packageDocumentation module import classnames from "classnames" ; import * as React from "react" ; import { CommonProps } from "@itwin/core-react" ; import { Format , FormatProps , FormatTraits } from "@itwin/core-quantity" ; import { Checkbox , Select , SelectOption } from "@itwin/itwinui-react" ; import { UiIModelComponents } from "../UiIModelComponents" ; interface UomSeparatorSelectorProps extends CommonProps { separator : string ; disabled ? : boolean ; onChange : ( value : string ) => void ; } function UomSeparatorSelector ( props ) { const { separator , onChange , ... otherProps } = props ; const uomDefaultEntries = React . useRef < SelectOption < string > [ ] > ( [ { value : "" , label : UiIModelComponents . translate ( "QuantityFormat.none" ) } , { value : " " , label : UiIModelComponents . translate ( "QuantityFormat.space" ) } , { value : "-" , label : UiIModelComponents . translate ( "QuantityFormat.dash" ) } , ] ) ; const handleOnChange = React . useCallback ( ( newValue ) => { onChange && onChange ( newValue ) ; } , [ onChange ] ) ; const separatorOptions = React . useMemo ( ( ) => { const completeListOfEntries = [ ] ; if ( undefined === uomDefaultEntries . current . find ( ( option ) => option . value === separator ) ) { completeListOfEntries . push ( { value : separator , label : separator } ) ; } completeListOfEntries . push ( ... uomDefaultEntries . current ) ; return completeListOfEntries ; } , [ separator ] ) ; return ( < Select options = { separatorOptions } value = { separator } onChange = { handleOnChange } size = "small" { ... otherProps } />); } alpha export interface FormatUnitLabelProps extends CommonProps { formatProps : FormatProps ; onUnitLabelChange ? : ( format : FormatProps ) => void ; } alpha export function FormatUnitLabel ( props ) { const { formatProps , onUnitLabelChange } = props ; const handleSetFormatProps = React . useCallback ( ( newProps ) => { onUnitLabelChange && onUnitLabelChange ( newProps ) ; } , [ onUnitLabelChange ] ) ; const isFormatTraitSet = React . useCallback ( ( trait ) => { return Format . isFormatTraitSetInProps ( formatProps , trait ) ; } , [ formatProps ] ) ; const setFormatTrait = React . useCallback ( ( trait , setActive ) => { const traitStr = Format . getTraitString ( trait ) ; let formatTraits = [ traitStr ] ; if ( setActive ) { if ( formatProps . formatTraits ) { const traits = Array . isArray ( formatProps . formatTraits ) ? formatProps . formatTraits : formatProps . formatTraits . split ( /,|;|\|/ ) ; if ( ! traits . find ( ( traitEntry ) => traitStr === traitEntry ) ) { formatTraits = [ ... traits , traitStr ] ; } } } else { if ( ! formatProps . formatTraits ) return ; const traits = Array . isArray ( formatProps . formatTraits ) ? formatProps . formatTraits : formatProps . formatTraits . split ( /,|;|\|/ ) ; formatTraits = traits . filter ( ( traitEntry ) => traitEntry !== traitStr ) ; } const newFormatProps = { ... formatProps , formatTraits } ; handleSetFormatProps ( newFormatProps ) ; } , [ formatProps , handleSetFormatProps ] ) ; const handleUomSeparatorChange = React . useCallback ( ( newSeparator ) => { const newFormatProps = { ... formatProps , uomSeparator : newSeparator } ; handleSetFormatProps ( newFormatProps ) ; } , [ formatProps , handleSetFormatProps ] ) ; const handleShowUnitLabelChange = React . useCallback ( ( e ) => { setFormatTrait ( FormatTraits . ShowUnitLabel , e . target . checked ) ; } , [ setFormatTrait ] ) ; const appendUnitLabel = React . useRef ( UiIModelComponents . translate ( "QuantityFormat.labels.appendUnitLabel" ) ) ; const labelSeparator = React . useRef ( UiIModelComponents . translate ( "QuantityFormat.labels.labelSeparator" ) ) ; return ( < > < span className = { "uicore-label" } > { appendUnitLabel . current } < /span> < Checkbox data - testid = "show-unit-label-checkbox" checked = { isFormatTraitSet ( FormatTraits . ShowUnitLabel ) } onChange = { handleShowUnitLabelChange } / > < span className = { classnames ( "uicore-label" , ! isFormatTraitSet ( FormatTraits . ShowUnitLabel ) && "uicore-disabled" ) } > { labelSeparator . current } < /span> < UomSeparatorSelector data - testid = "uom-separator-select" separator = { formatProps . uomSeparator ?? "" } onChange = { handleUomSeparatorChange } disabled = { ! isFormatTraitSet ( FormatTraits . ShowUnitLabel ) } /> < />); }