packageDocumentation module import * as React from "react" ; import { CommonProps } from "@itwin/core-react" ; import { FormatProps , UnitProps , UnitsProvider } from "@itwin/core-quantity" ; import { Input } from "@itwin/itwinui-react" ; import { UnitDescr } from "./misc/UnitDescr" ; import { UiIModelComponents } from "../UiIModelComponents" ; alpha export interface FormatUnitsProps extends CommonProps { initialFormat : FormatProps ; persistenceUnit ? : UnitProps ; unitsProvider : UnitsProvider ; onUnitsChange ? : ( format : FormatProps ) => void ; } alpha export function FormatUnits ( props ) { const { initialFormat , persistenceUnit , unitsProvider , onUnitsChange } = props ; const initialFormatRef = React . useRef < FormatProps > ( initialFormat ) ; const [ formatProps , setFormatProps ] = React . useState ( initialFormat ) ; React . useEffect ( ( ) => { if ( initialFormatRef . current !== initialFormat ) { initialFormatRef . current = initialFormat ; setFormatProps ( initialFormat ) ; } } , [ initialFormat ] ) ; const handleSetFormatProps = React . useCallback ( ( newProps ) => { setFormatProps ( newProps ) ; onUnitsChange && onUnitsChange ( newProps ) ; } , [ onUnitsChange ] ) ; const handleUnitLabelChange = React . useCallback ( ( newLabel , index ) => { if ( formatProps . composite && formatProps . composite . units . length > index && index >= 0 ) { const units = formatProps . composite . units . map ( ( entry , ndx ) => { if ( index === ndx ) return { name : entry . name , label : newLabel } ; else return entry ; } ) ; const composite = { ... formatProps . composite , units } ; const newFormatProps = { ... formatProps , composite } ; handleSetFormatProps ( newFormatProps ) ; } } , [ formatProps , handleSetFormatProps ] ) ; const handleUnitChange = React . useCallback ( ( newUnit , index ) => { const unitParts = newUnit . split ( /:/ ) ; if ( unitParts [ 0 ] === "REMOVEUNIT" ) { if ( formatProps . composite && formatProps . composite . units . length > 1 ) { const units = [ ... formatProps . composite . units ] ; units . pop ( ) ; const composite = { ... formatProps . composite , units } ; const newFormatProps = { ... formatProps , composite } ; handleSetFormatProps ( newFormatProps ) ; } } else if ( unitParts [ 0 ] === "ADDSUBUNIT" ) { const units = formatProps . composite && formatProps . composite . units . length ? [ ... formatProps . composite . units , { name : unitParts [ 1 ] , label : unitParts [ 2 ] } ] : [ { name : unitParts [ 1 ] , label : unitParts [ 2 ] } ] ; const composite = { ... formatProps . composite , units } ; const newFormatProps = { ... formatProps , composite } ; handleSetFormatProps ( newFormatProps ) ; } else { if ( formatProps . composite && formatProps . composite . units . length > index && index >= 0 ) { const units = formatProps . composite . units . map ( ( entry , ndx ) => { if ( index === ndx ) return { name : unitParts [ 0 ] , label : unitParts [ 1 ] } ; else return entry ; } ) ; const composite = { ... formatProps . composite , units } ; const newFormatProps = { ... formatProps , composite } ; handleSetFormatProps ( newFormatProps ) ; } else if ( ! formatProps . composite ) { const composite = { units : [ { name : unitParts [ 0 ] , label : unitParts [ 1 ] } ] } ; const newFormatProps = { ... formatProps , composite } ; handleSetFormatProps ( newFormatProps ) ; } } } , [ formatProps , handleSetFormatProps ] ) ; const handleOnSpacerChange = React . useCallback ( ( e ) => { if ( formatProps . composite ) { const spacerValue = e . target . value . length ? e . target . value [ 0 ] : "" ; const composite = { ... formatProps . composite , spacer : spacerValue } ; const newFormatProps = { ... formatProps , composite } ; handleSetFormatProps ( newFormatProps ) ; } } , [ formatProps , handleSetFormatProps ] ) ; const compositeSpacer = React . useRef ( UiIModelComponents . translate ( "QuantityFormat.labels.compositeSpacer" ) ) ; return ( < > { ( formatProps . composite ?. units ) ? formatProps . composite . units . map ( ( value , index ) => < UnitDescr key = { value . name } name = { value . name } label = { value . label ?? "" } parentUnitName = { index > 0 ? formatProps . composite ! . units [ index - 1 ] . name : undefined } unitsProvider = { unitsProvider } index = { index } onUnitChange = { handleUnitChange } onLabelChange = { handleUnitLabelChange } readonly = { index < ( formatProps . composite ! . units . length - 1 ) } / > ) : persistenceUnit && < UnitDescr key = { persistenceUnit . name } name = { persistenceUnit . name } label = { persistenceUnit . label } unitsProvider = { unitsProvider } index = { 0 } onUnitChange = { handleUnitChange } onLabelChange = { handleUnitLabelChange } / > } { ( formatProps . composite ?. units && formatProps . composite . units . length > 1 ) && < > < span key = { "composite-spacer-label" } className = { "uicore-label" } > { compositeSpacer . current } < /span> < Input key = { "composite-spacer" } data - testid = "composite-spacer" value = { formatProps . composite . spacer ?? "" } onChange = { handleOnSpacerChange } size = "small" / > < />} < />); }