packageDocumentation module import "./WeightEditor.scss" ; import classnames from "classnames" ; import * as React from "react" ; import { PropertyRecord , PropertyValue , PropertyValueFormat , StandardEditorNames , StandardTypeNames } from "@itwin/appui-abstract" ; import { PropertyEditorBase , PropertyEditorManager , PropertyEditorProps , TypeEditor } from "@itwin/components-react" ; import { WeightPickerButton } from "../lineweight/WeightPickerButton" ; internal interface WeightEditorState { weightValue : number ; readonly : boolean ; isDisabled ? : boolean ; } public export class WeightEditor extends React . PureComponent < PropertyEditorProps , WeightEditorState > implements TypeEditor { private _control : any | null = null ; private _isMounted = false ; private _availableWeights : number [ ] = [ ] ; private _divElement = React . createRef < HTMLDivElement > ( ) ; internal public override readonly state : Readonly < WeightEditorState > = { weightValue : 0 , readonly : false } ; constructor ( props ) { super ( props ) ; } public async getPropertyValue ( ) { const record = this . props . propertyRecord ; let propertyValue ; if ( record && record . value . valueFormat === PropertyValueFormat . Primitive ) { propertyValue = { valueFormat : PropertyValueFormat . Primitive , value : this . state . weightValue , displayValue : "" } ; } return propertyValue ; } public get htmlElement ( ) : HTMLElement | null { return this . _divElement . current ; } public get hasFocus ( ) : boolean { let containsFocus = false ; if ( this . _divElement . current ) containsFocus = this . _divElement . current . contains ( document . activeElement ) ; return containsFocus ; } private setFocus ( ) { if ( this . _control && ! this . state . isDisabled ) { this . _control . setFocus ( ) ; } } private _onLineWeightPick = ( weight ) => { const propertyRecord = this . props . propertyRecord as PropertyRecord ; this . setState ( { weightValue : weight } , async ( ) => { if ( propertyRecord && this . props . onCommit ) { const propertyValue = await this . getPropertyValue ( ) ; if ( propertyValue !== undefined ) { this . props . onCommit ( { propertyRecord , newValue : propertyValue } ) ; } } } ) ; } ; internal public override componentDidMount ( ) { this . _isMounted = true ; this . setStateFromProps ( ) ; } internal public override componentWillUnmount ( ) { this . _isMounted = false ; } internal public override componentDidUpdate ( prevProps ) { if ( this . props . propertyRecord !== prevProps . propertyRecord ) { this . setStateFromProps ( ) ; } } private async setStateFromProps ( ) { const record = this . props . propertyRecord ; let initialValue = 0 ; if ( record && record . value . valueFormat === PropertyValueFormat . Primitive ) { initialValue = record . value . value as number ; } const readonly = record && undefined !== record . isReadonly ? record . isReadonly : false ; const isDisabled = record ? record . isDisabled : undefined ; if ( this . _isMounted ) this . setState ( { weightValue : initialValue , readonly , isDisabled } , ( ) => { if ( this . props . setFocus ) { this . setFocus ( ) ; } } ) ; } internal public override render ( ) { return ( < div className = { classnames ( "components-weight-editor" , this . props . className ) } style = { this . props . style } ref = { this . _divElement } > < WeightPickerButton ref = { ( control ) => this . _control = control } activeWeight = { this . state . weightValue } weights = { this . _availableWeights . length > 0 ? this . _availableWeights : undefined } disabled = { this . state . isDisabled ? true : false } readonly = { this . state . readonly } onLineWeightPick = { this . _onLineWeightPick } data - testid = "components-weight-editor" / > < /div>); } } public export class WeightPropertyEditor extends PropertyEditorBase { public get reactNode ( ) : React . ReactNode { return < WeightEditor />; } } PropertyEditorManager . registerEditor ( StandardTypeNames . Number , WeightPropertyEditor , StandardEditorNames . WeightPicker ) ;