packageDocumentation module import * as React from "react" ; import { CommonProps } from "@itwin/core-react" ; import { UiIModelComponents } from "../UiIModelComponents" ; import { DecimalPrecision , Format , FormatProps , FormatType , FractionalPrecision , ScientificType } from "@itwin/core-quantity" ; import { Select , SelectOption } from "@itwin/itwinui-react" ; alpha interface FormatTypeSelectorProps extends CommonProps { type : FormatType ; onChange : ( value : FormatType ) => void ; } alpha function FormatTypeSelector ( props ) { const { type , onChange , ... otherProps } = props ; const formatOptions = React . useRef < SelectOption < FormatType > [ ] > ( [ { value : FormatType . Decimal , label : UiIModelComponents . translate ( "QuantityFormat.decimal" ) } , { value : FormatType . Scientific , label : UiIModelComponents . translate ( "QuantityFormat.scientific" ) } , { value : FormatType . Station , label : UiIModelComponents . translate ( "QuantityFormat.station" ) } , { value : FormatType . Fractional , label : UiIModelComponents . translate ( "QuantityFormat.fractional" ) } , ] ) ; const handleOnChange = React . useCallback ( ( newValue ) => { onChange && onChange ( newValue ) ; } , [ onChange ] ) ; return ( < Select options = { formatOptions . current } value = { type } onChange = { handleOnChange } size = "small" { ... otherProps } />); } alpha export interface FormatTypeOptionProps extends CommonProps { formatProps : FormatProps ; onChange ? : ( format : FormatProps ) => void ; } alpha export function FormatTypeOption ( props ) { const { formatProps , onChange } = props ; const handleFormatTypeChange = React . useCallback ( ( newType ) => { const type = Format . formatTypeToString ( newType ) ; let precision ; let stationOffsetSize ; let scientificType ; switch ( newType ) { case FormatType . Scientific : precision = DecimalPrecision . Six ; scientificType = Format . scientificTypeToString ( ScientificType . Normalized ) ; break ; case FormatType . Decimal : precision = DecimalPrecision . Four ; break ; case FormatType . Station : precision = DecimalPrecision . Two ; stationOffsetSize = formatProps . composite ?. units [ 0 ] . name . toLocaleLowerCase ( ) . endsWith ( "m" ) ? 3 : 2 ; break ; case FormatType . Fractional : precision = FractionalPrecision . Eight ; break ; } const newFormatProps = { ... formatProps , type , precision , scientificType , stationOffsetSize } ; onChange && onChange ( newFormatProps ) ; } , [ formatProps , onChange ] ) ; const formatType = Format . parseFormatType ( formatProps . type , "format" ) ; const label = React . useRef ( UiIModelComponents . translate ( "QuantityFormat.labels.type" ) ) ; return ( < > < span className = { "uicore-label.current" } > { label . current } < /span> < FormatTypeSelector data - testid = "format-type-selector" type = { formatType } onChange = { handleFormatTypeChange } / > < />); }