packageDocumentation module import classnames from "classnames" ; import * as React from "react" ; import { IModelApp , QuantityFormatsChangedArgs , QuantityTypeArg } from "@itwin/core-frontend" ; import { Parser } from "@itwin/core-quantity" ; import { ParseResults } from "@itwin/appui-abstract" ; import { CommonProps } from "@itwin/core-react" ; import { UiIModelComponents } from "../UiIModelComponents" ; import { ParsedInput } from "@itwin/components-react" ; beta export interface QuantityProps extends CommonProps { /** Initial magnitude in 'persistence' units. See `getPersistenceUnitByQuantityType` in [QuantityFormatter]($core-frontend) */ initialValue : number ; /** Type of quantity being input. */ quantityType : QuantityTypeArg ; /** Function to call in the quantity value is changed. The value returned will be in 'persistence' units. */ onQuantityChange : ( newQuantityValue : number ) => void ; /** Set to `true` if value is for display only */ readonly ? : boolean ; /** Provides ability to return reference to HTMLInputElement */ ref ? : React . Ref < HTMLInputElement > ; } beta export function QuantityInput ( { initialValue , quantityType , readonly , className , style , onQuantityChange , ref } ) { const [ formatterSpec , setFormatterSpec ] = React . useState ( ( ) => IModelApp . quantityFormatter . findFormatterSpecByQuantityType ( quantityType ) ) ; const [ parserSpec , setParserSpec ] = React . useState ( ( ) => IModelApp . quantityFormatter . findParserSpecByQuantityType ( quantityType ) ) ; const formatValue = React . useCallback ( ( value ) => { if ( formatterSpec ) { return formatterSpec . applyFormatting ( value ) ; } return value . toFixed ( 2 ) ; } , [ formatterSpec ] ) ; const parseString = React . useCallback ( ( userInput ) : ParseResults => { if ( parserSpec ) { const parseResult = IModelApp . quantityFormatter . parseToQuantityValue ( userInput , parserSpec ) ; if ( Parser . isParsedQuantity ( parseResult ) ) { return { value : parseResult . value } ; } else { const statusId = Parser . isParseError ( parseResult ) ? parseResult . error . toString ( ) : "Unknown" ; return { parseError : `${ UiIModelComponents . translate ( "QuantityInput.NoParserDefined" ) }${ statusId }` } ; } } return { parseError : UiIModelComponents . translate ( "QuantityInput.NoParserDefined" ) } ; } , [ parserSpec ] ) ; const classNames = classnames ( className , "components-quantity-input" ) ; React . useEffect ( ( ) => { const handleUnitSystemChanged = ( ( ) : void => { setFormatterSpec ( IModelApp . quantityFormatter . findFormatterSpecByQuantityType ( quantityType ) ) ; setParserSpec ( IModelApp . quantityFormatter . findParserSpecByQuantityType ( quantityType ) ) ; } ) ; IModelApp . quantityFormatter . onActiveFormattingUnitSystemChanged . addListener ( handleUnitSystemChanged ) ; return ( ) => { IModelApp . quantityFormatter . onActiveFormattingUnitSystemChanged . removeListener ( handleUnitSystemChanged ) ; } ; } , [ quantityType ] ) ; React . useEffect ( ( ) => { const handleUnitSystemChanged = ( ( args ) : void => { const quantityKey = IModelApp . quantityFormatter . getQuantityTypeKey ( quantityType ) ; if ( args . quantityType === quantityKey ) { setFormatterSpec ( IModelApp . quantityFormatter . findFormatterSpecByQuantityType ( quantityType ) ) ; setParserSpec ( IModelApp . quantityFormatter . findParserSpecByQuantityType ( quantityType ) ) ; } } ) ; IModelApp . quantityFormatter . onQuantityFormatsChanged . addListener ( handleUnitSystemChanged ) ; return ( ) => { IModelApp . quantityFormatter . onQuantityFormatsChanged . removeListener ( handleUnitSystemChanged ) ; } ; } , [ quantityType ] ) ; return < ParsedInput data - testid = "components-quantity-input" ref = { ref } style = { style } className = { classNames } onChange = { onQuantityChange } initialValue = { initialValue } readonly = { readonly } formatValue = { formatValue } parseString = { parseString } / > ; }