packageDocumentation module import "./IconEditor.scss" ; import classnames from "classnames" ; import * as React from "react" ; import { IconListEditorParams , PropertyEditorParams , PropertyEditorParamTypes , PropertyRecord , PropertyValue , PropertyValueFormat , StandardEditorNames , StandardTypeNames , } from "@itwin/appui-abstract" ; import { IconPickerButton } from "../iconpicker/IconPickerButton" ; import { PropertyEditorProps , TypeEditor } from "./EditorContainer" ; import { PropertyEditorBase , PropertyEditorManager } from "./PropertyEditorManager" ; internal interface IconEditorState { icon : string ; icons : string [ ] ; numColumns : number ; readonly ? : boolean ; isDisabled ? : boolean ; } alpha export class IconEditor extends React . PureComponent < PropertyEditorProps , IconEditorState > implements TypeEditor { private _control : any | null = null ; private _isMounted = false ; private _divElement = React . createRef < HTMLDivElement > ( ) ; constructor ( props ) { super ( props ) ; let icon = "" ; let numColumns = 4 ; const icons = [ ] ; const readonly = false ; const record = props . propertyRecord ; if ( record && record . property && record . property . editor && record . property . editor . params ) { const iconParams = record . property . editor . params . find ( ( param ) => param . type === PropertyEditorParamTypes . IconListData ) as IconListEditorParams ; if ( iconParams ) { if ( iconParams . iconValue ) icon = iconParams . iconValue ; if ( iconParams . numColumns ) numColumns = iconParams . numColumns ; if ( iconParams . iconValues ) iconParams . iconValues . forEach ( ( i ) => icons . push ( i ) ) ; } } this . state = { icon , icons , numColumns , readonly } ; } public async getPropertyValue ( ) { const record = this . props . propertyRecord ; let propertyValue ; if ( record && record . value . valueFormat === PropertyValueFormat . Primitive ) { propertyValue = { valueFormat : PropertyValueFormat . Primitive , value : this . state . icon , 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 _onIconChange = ( icon ) => { const propertyRecord = this . props . propertyRecord as PropertyRecord ; this . setState ( { icon } , async ( ) => { if ( propertyRecord && this . props . onCommit ) { const propertyValue = await this . getPropertyValue ( ) ; if ( propertyValue ) { 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 = "" ; if ( record && record . value . valueFormat === PropertyValueFormat . Primitive ) { initialValue = record . value . value as string ; } const readonly = record && undefined !== record . isReadonly ? record . isReadonly : false ; const isDisabled = record ? record . isDisabled : undefined ; if ( this . _isMounted ) this . setState ( { icon : initialValue , readonly , isDisabled } , ( ) => { if ( this . props . setFocus ) { this . setFocus ( ) ; } } ) ; } internal public override render ( ) { const { icon , icons , numColumns } = this . state ; return ( < div className = { classnames ( "components-icon-editor" , this . props . className ) } style = { this . props . style } ref = { this . _divElement } > < IconPickerButton ref = { ( control ) => this . _control = control } icon = { icon } icons = { icons } numColumns = { numColumns } disabled = { this . state . isDisabled } readonly = { this . state . readonly } onIconChange = { this . _onIconChange } data - testid = "components-icon-editor" / > < /div>); } } alpha export class IconPropertyEditor extends PropertyEditorBase { public get reactNode ( ) : React . ReactNode { return < IconEditor />; } } PropertyEditorManager . registerEditor ( StandardTypeNames . Text , IconPropertyEditor , StandardEditorNames . IconPicker ) ; PropertyEditorManager . registerEditor ( StandardTypeNames . String , IconPropertyEditor , StandardEditorNames . IconPicker ) ;