packageDocumentation module import "./EnumEditor.scss" ; import classnames from "classnames" ; import * as React from "react" ; import { EnumerationChoice , PropertyValue , PropertyValueFormat , StandardTypeNames } from "@itwin/appui-abstract" ; import { Select , SelectOption } from "@itwin/itwinui-react" ; import { PropertyEditorProps , TypeEditor } from "./EditorContainer" ; import { PropertyEditorBase , PropertyEditorManager } from "./PropertyEditorManager" ; import { UiComponents } from "../UiComponents" ; internal interface EnumEditorState { selectValue : string | number ; valueIsNumber : boolean ; options : SelectOption < string > [ ] ; parentDiv : HTMLDivElement | null ; } public export class EnumEditor extends React . PureComponent < PropertyEditorProps , EnumEditorState > implements TypeEditor { private _isMounted = false ; private _ariaLabel = UiComponents . translate ( "editor.enum" ) ; private _divElement = React . createRef < HTMLDivElement > ( ) ; internal public override readonly state : Readonly < EnumEditorState > = { selectValue : "" , valueIsNumber : false , options : [ ] , parentDiv : null } ; public async getPropertyValue ( ) { const record = this . props . propertyRecord ; let propertyValue ; if ( record && record . value . valueFormat === PropertyValueFormat . Primitive ) { propertyValue = { valueFormat : PropertyValueFormat . Primitive , value : this . state . selectValue , 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 _updateSelectValue = ( newValue ) => { if ( this . _isMounted ) { let selectValue ; if ( this . state . valueIsNumber ) selectValue = parseInt ( newValue , 10 ) ; else selectValue = newValue ; this . setState ( { selectValue } , async ( ) => { if ( this . props . propertyRecord && this . props . onCommit ) { const propertyValue = await this . getPropertyValue ( ) ; if ( propertyValue ) { this . props . onCommit ( { propertyRecord : this . props . 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 { propertyRecord } = this . props ; let initialValue = "" ; let valueIsNumber = false ; if ( propertyRecord && propertyRecord . value . valueFormat === PropertyValueFormat . Primitive ) { const primitiveValue = propertyRecord . value . value ; if ( typeof primitiveValue === "string" ) { initialValue = primitiveValue ; valueIsNumber = false ; } else { initialValue = primitiveValue as number ; valueIsNumber = true ; } } let choices ; if ( propertyRecord && propertyRecord . property . enum ) { if ( propertyRecord . property . enum . choices instanceof Promise ) { choices = await propertyRecord . property . enum . choices ; } else { choices = propertyRecord . property . enum . choices ; } } const options = [ ] ; if ( choices ) { choices . forEach ( ( choice ) => { options . push ( { value : choice . value . toString ( ) , label : choice . label } ) ; } ) ; } if ( this . _isMounted ) this . setState ( { selectValue : initialValue , valueIsNumber , options , parentDiv : this . _divElement . current } ) ; } internal public override render ( ) { const className = classnames ( "components-cell-editor" , "components-enum-editor" , this . props . className ) ; const selectValue = this . state . selectValue !== undefined ? this . state . selectValue . toString ( ) : undefined ; const minWidthStyle = { minWidth : `6em` } ; return ( < div ref = { this . _divElement } > < Select className = { className } style = { this . props . style ? this . props . style : minWidthStyle } value = { selectValue } onChange = { this . _updateSelectValue } data - testid = "components-select-editor" options = { this . state . options } setFocus = { this . props . setFocus } aria - label = { this . _ariaLabel } size = "small" / > < /div>); } } public export class EnumPropertyEditor extends PropertyEditorBase { public override get containerHandlesEnter ( ) : boolean { return false ; } public override get containerStopsKeydownPropagation ( ) : boolean { return false ; } public get reactNode ( ) : React . ReactNode { return < EnumEditor />; } } PropertyEditorManager . registerEditor ( StandardTypeNames . Enum , EnumPropertyEditor ) ;