packageDocumentation module import * as React from "react" ; import { FormatterSpec } from "@itwin/core-quantity" ; import { SpecialKey } from "@itwin/appui-abstract" ; import { CommonProps , WebFontIcon } from "@itwin/core-react" ; import { Input } from "@itwin/itwinui-react" ; import { UiIModelComponents } from "../UiIModelComponents" ; alpha export interface FormatSampleProps extends CommonProps { formatSpec ? : FormatterSpec ; initialMagnitude ? : number ; hideLabels ? : boolean ; } alpha export function FormatSample ( props ) { const { initialMagnitude , formatSpec , hideLabels } = props ; const initialValue = initialMagnitude ?? 0 ; const [ magnitude , setMagnitude ] = React . useState ( initialValue ) ; const [ sampleValue , setSampleValue ] = React . useState ( initialValue . toString ( ) ) ; React . useEffect ( ( ) => { const value = initialMagnitude ?? 0 ; setMagnitude ( value ) ; setSampleValue ( value . toString ( ) ) ; } , [ initialMagnitude ] ) ; const handleOnValueBlur = React . useCallback ( ( ) => { let newValue = Number . parseFloat ( sampleValue ) ; if ( Number . isNaN ( newValue ) ) newValue = 0 ; setMagnitude ( newValue ) ; setSampleValue ( newValue . toString ( ) ) ; } , [ sampleValue ] ) ; const handleOnValueChange = React . useCallback ( ( event ) => { setSampleValue ( event . target . value ) ; } , [ ] ) ; const handleKeyDown = React . useCallback ( ( e ) => { if ( e . key === SpecialKey . Enter ) { let newValue = Number . parseFloat ( sampleValue ) ; if ( Number . isNaN ( newValue ) ) newValue = 0 ; setMagnitude ( newValue ) ; setSampleValue ( newValue . toString ( ) ) ; e . preventDefault ( ) ; } } , [ sampleValue ] ) ; const activePersistenceUnitLabel = formatSpec ? formatSpec . persistenceUnit . label : "" ; const formattedValue = formatSpec ? formatSpec . applyFormatting ( magnitude ) : "" ; const valueLabel = React . useRef ( UiIModelComponents . translate ( "QuantityFormat.labels.value" ) ) ; const formattedLabel = React . useRef ( UiIModelComponents . translate ( "QuantityFormat.labels.formatted" ) ) ; return ( < > { ! hideLabels && < span className = { "uicore-label" } > { valueLabel . current } < /span>} < span className = "components-inline" > < Input data - testid = "format-sample-input" className = { "components-quantity-persistence-input" } value = { sampleValue } onChange = { handleOnValueChange } onKeyDown = { handleKeyDown } onBlur = { handleOnValueBlur } size = "small" / > { activePersistenceUnitLabel } < /span> { ! hideLabels && < span className = { "uicore-label" } > { formattedLabel . current } < /span>} < span > { hideLabels && ( formattedValue . length > 0 ) && < WebFontIcon iconName = "icon-progress-forward-2" / > } < span data - testid = "format-sample-formatted" className = { "uicore-label components-quantity-formatted-sample" } > { formattedValue } < /span> < /span> < />); }