packageDocumentation module import "./FormatPanel.scss" ; import * as React from "react" ; import { Format , FormatProps , FormatterSpec , UnitProps , UnitsProvider } from "@itwin/core-quantity" ; import { CommonProps } from "@itwin/core-react" ; import { FormatPrecision } from "./FormatPrecision" ; import { FormatSample } from "./FormatSample" ; import { FormatTypeOption } from "./FormatType" ; import { FormatUnitLabel } from "./FormatUnitLabel" ; import { FormatUnits } from "./FormatUnits" ; import { MiscFormatOptions } from "./MiscFormatOptions" ; alpha export interface FormatPanelProps extends CommonProps { initialFormat : FormatProps ; unitsProvider : UnitsProvider ; persistenceUnit : Promise < UnitProps > | UnitProps ; showSample ? : boolean ; initialMagnitude ? : number ; enableMinimumProperties ? : boolean ; onFormatChange ? : ( format : FormatProps ) => void ; provideFormatSpec ? : ( formatProps : FormatProps , persistenceUnit : UnitProps , unitsProvider : UnitsProvider ) => Promise < FormatterSpec > ; providePrimaryChildren ? : ( formatProps : FormatProps , fireFormatChange : ( newProps : FormatProps ) => void ) => React . ReactNode ; provideSecondaryChildren ? : ( formatProps : FormatProps , fireFormatChange : ( newProps : FormatProps ) => void ) => React . ReactNode ; } async function generateFormatSpec ( formatProps , persistenceUnit , unitsProvider ) { const actualFormat = await Format . createFromJSON ( "custom" , unitsProvider , formatProps ) ; return FormatterSpec . create ( actualFormat . name , actualFormat , unitsProvider , persistenceUnit ) ; } alpha export function FormatPanel ( props ) { const [ formatSpec , setFormatSpec ] = React . useState < FormatterSpec > ( ) ; const { initialFormat , showSample , initialMagnitude , unitsProvider , persistenceUnit , onFormatChange , provideFormatSpec , enableMinimumProperties } = props ; const [ formatProps , setFormatProps ] = React . useState ( initialFormat ) ; const [ showOptions , setShowOptions ] = React . useState ( false ) ; React . useEffect ( ( ) => { setFormatProps ( initialFormat ) ; setFormatSpec ( undefined ) ; } , [ initialFormat ] ) ; const handleUserFormatChanges = React . useCallback ( ( newProps ) => { setFormatProps ( newProps ) ; setFormatSpec ( undefined ) ; onFormatChange && onFormatChange ( newProps ) ; } , [ onFormatChange ] ) ; const isMounted = React . useRef ( false ) ; React . useEffect ( ( ) => { isMounted . current = true ; return ( ( ) => { isMounted . current = false ; } ) ; } , [ ] ) ; React . useEffect ( ( ) => { async function fetchFormatSpec ( ) { const pu = await persistenceUnit ; let newFormatSpec ; if ( provideFormatSpec ) { newFormatSpec = await provideFormatSpec ( formatProps , pu , unitsProvider ) ; } else { newFormatSpec = await generateFormatSpec ( formatProps , pu , unitsProvider ) ; } isMounted . current && setFormatSpec ( newFormatSpec ) ; } if ( ! formatSpec ) fetchFormatSpec ( ) ; } , [ formatProps , formatSpec , persistenceUnit , provideFormatSpec , unitsProvider ] ) ; const handleFormatChange = React . useCallback ( ( newFormatProps ) => { handleUserFormatChanges ( newFormatProps ) ; } , [ handleUserFormatChanges ] ) ; const handleShowOptions = React . useCallback ( ( show ) => { setShowOptions ( show ) ; } , [ ] ) ; return ( < div className = "components-quantityFormat-panel" > { showSample && < FormatSample formatSpec = { formatSpec } initialMagnitude = { initialMagnitude } / > } < FormatUnits unitsProvider = { unitsProvider } persistenceUnit = { formatSpec ?. persistenceUnit } initialFormat = { formatProps } onUnitsChange = { handleFormatChange } / > < FormatUnitLabel formatProps = { formatProps } onUnitLabelChange = { handleFormatChange } / > < FormatTypeOption formatProps = { formatProps } onChange = { handleFormatChange } / > < FormatPrecision formatProps = { formatProps } onChange = { handleFormatChange } / > { props . providePrimaryChildren && props . providePrimaryChildren ( formatProps , handleFormatChange ) } < MiscFormatOptions formatProps = { formatProps } onChange = { handleFormatChange } enableMinimumProperties = { enableMinimumProperties } showOptions = { showOptions } onShowHideOptions = { handleShowOptions } > { props . provideSecondaryChildren && props . provideSecondaryChildren ( formatProps , handleFormatChange ) } < /MiscFormatOptions> < /div>); }