packageDocumentation module import "./ColorEditor.scss" ; import classnames from "classnames" ; import * as React from "react" ; import { ColorDef } from "@itwin/core-common" ; import { ColorEditorParams , PropertyEditorParams , PropertyEditorParamTypes , PropertyRecord , PropertyValue , PropertyValueFormat , StandardEditorNames , StandardTypeNames , } from "@itwin/appui-abstract" ; import { PropertyEditorBase , PropertyEditorManager , PropertyEditorProps , TypeEditor } from "@itwin/components-react" ; import { ColorPickerButton } from "../color/ColorPickerButton" ; internal interface ColorEditorState { colorValue : number ; readonly : boolean ; isDisabled ? : boolean ; numColumns : number ; availableColors : ColorDef [ ] ; } beta export class ColorEditor extends React . PureComponent < PropertyEditorProps , ColorEditorState > implements TypeEditor { private _buttonElement : React . RefObject < HTMLButtonElement > = React . createRef ( ) ; internal public override readonly state : Readonly < ColorEditorState > = { colorValue : 0 , readonly : false , numColumns : 4 , availableColors : [ ] } ; public async getPropertyValue ( ) { const record = this . props . propertyRecord ; let propertyValue ; if ( record && record . value . valueFormat === PropertyValueFormat . Primitive ) { propertyValue = { valueFormat : PropertyValueFormat . Primitive , value : this . state . colorValue , displayValue : "" } ; } return propertyValue ; } public get htmlElement ( ) : HTMLElement | null { return this . _buttonElement . current ; } public get hasFocus ( ) : boolean { return document . activeElement === this . _buttonElement . current ; } private setFocus ( ) { if ( this . _buttonElement && this . _buttonElement . current && ! this . state . isDisabled ) { this . _buttonElement . current . focus ( ) ; } } private _onColorPick = ( color ) => { const propertyRecord = this . props . propertyRecord as PropertyRecord ; this . setState ( { colorValue : color . tbgr } , 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 . setStateFromProps ( ) ; } internal public override componentDidUpdate ( prevProps ) { if ( this . props . propertyRecord !== prevProps . propertyRecord ) { this . setStateFromProps ( ) ; } } private async setStateFromProps ( ) { const record = this . props . propertyRecord ; if ( record && record . value . valueFormat === PropertyValueFormat . Primitive ) { const colorValue = record . value . value as number ; let numColumns = 4 ; const availableColors = new Array < ColorDef > ( ) ; const readonly = record && undefined !== record . isReadonly ? record . isReadonly : false ; const isDisabled = record ? record . isDisabled : undefined ; if ( record . property . editor && record . property . editor . params ) { const colorParams = record . property . editor . params . find ( ( param ) => param . type === PropertyEditorParamTypes . ColorData ) as ColorEditorParams ; if ( colorParams ) { colorParams . colorValues . forEach ( ( colorNumber ) => { availableColors . push ( ColorDef . create ( colorNumber ) ) ; } ) ; if ( colorParams . numColumns ) numColumns = colorParams . numColumns ; } } this . setState ( { colorValue , readonly , isDisabled , numColumns , availableColors } , ( ) => { if ( this . props . setFocus ) { this . setFocus ( ) ; } } ) ; } } internal public override render ( ) { const colorDef = ColorDef . create ( this . state . colorValue ) ; return ( < div className = { classnames ( "components-color-editor" , this . props . className ) } style = { this . props . style } > < ColorPickerButton ref = { this . _buttonElement } initialColor = { colorDef } colorDefs = { this . state . availableColors . length > 0 ? this . state . availableColors : [ colorDef ] } numColumns = { this . state . numColumns } disabled = { this . state . isDisabled ? true : false } readonly = { this . state . readonly } onColorPick = { this . _onColorPick } data - testid = "components-color-editor" / > < /div>); } } beta export class ColorPropertyEditor extends PropertyEditorBase { public get reactNode ( ) : React . ReactNode { return < ColorEditor />; } } PropertyEditorManager . registerEditor ( StandardTypeNames . Number , ColorPropertyEditor , StandardEditorNames . ColorPicker ) ;