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 } from "@itwin/itwinui-react" ; import { ThousandsSelector } from "./ThousandsSelector" ; import { UiIModelComponents } from "../../UiIModelComponents" ; internal export interface ThousandsSeparatorProps extends CommonProps { formatProps : FormatProps ; onChange ? : ( format : FormatProps ) => void ; } internal export function ThousandsSeparator ( props ) { const { formatProps , onChange } = props ; const handleSetFormatProps = React . useCallback ( ( newProps ) => { onChange && onChange ( newProps ) ; } , [ onChange ] ) ; 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 ( /,|;|\|/ ) ; formatTraits = [ ... traits , traitStr ] ; } } else { if ( formatProps . formatTraits ) { 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 handleUseThousandsSeparatorChange = React . useCallback ( ( e ) => { setFormatTrait ( FormatTraits . Use1000Separator , e . target . checked ) ; } , [ setFormatTrait ] ) ; const isFormatTraitSet = React . useCallback ( ( trait ) => { return Format . isFormatTraitSetInProps ( formatProps , trait ) ; } , [ formatProps ] ) ; const handleThousandSeparatorChange = React . useCallback ( ( thousandSeparator ) => { let decimalSeparator = formatProps . decimalSeparator ; if ( isFormatTraitSet ( FormatTraits . Use1000Separator ) ) { if ( thousandSeparator === "." ) decimalSeparator = "," ; else decimalSeparator = "." ; } const newFormatProps = { ... formatProps , thousandSeparator , decimalSeparator } ; handleSetFormatProps ( newFormatProps ) ; } , [ formatProps , isFormatTraitSet , handleSetFormatProps ] ) ; const useThousandSeparatorLabel = React . useRef ( UiIModelComponents . translate ( "QuantityFormat.labels.useThousandSeparatorLabel" ) ) ; const thousandSeparatorLabel = React . useRef ( UiIModelComponents . translate ( "QuantityFormat.labels.thousandSeparatorLabel" ) ) ; return ( < > < span className = { "uicore-label" } > { useThousandSeparatorLabel . current } < /span> < Checkbox data - testid = "use-thousands-separator" checked = { isFormatTraitSet ( FormatTraits . Use1000Separator ) } onChange = { handleUseThousandsSeparatorChange } / > < span className = { classnames ( "uicore-label" , ! ( isFormatTraitSet ( FormatTraits . Use1000Separator ) ) && "uicore-disabled" ) } > { thousandSeparatorLabel . current } < /span> < ThousandsSelector data - testid = "thousands-separator-selector" separator = { formatProps . thousandSeparator ?? "," } disabled = { ! isFormatTraitSet ( FormatTraits . Use1000Separator ) } onChange = { handleThousandSeparatorChange } / > < />); }