packageDocumentation module import "./ToggleEditor.scss" ; import classnames from "classnames" ; import * as React from "react" ; import { PropertyValue , PropertyValueFormat , StandardEditorNames , StandardTypeNames } from "@itwin/appui-abstract" ; import { PropertyEditorProps , TypeEditor } from "./EditorContainer" ; import { PropertyEditorBase , PropertyEditorManager } from "./PropertyEditorManager" ; import { ToggleSwitch } from "@itwin/itwinui-react" ; internal interface ToggleEditorState { toggleValue : boolean ; isDisabled ? : boolean ; } public export class ToggleEditor extends React . PureComponent < PropertyEditorProps , ToggleEditorState > implements TypeEditor { private _isMounted = false ; private _inputElement = React . createRef < HTMLInputElement > ( ) ; internal public override readonly state : Readonly < ToggleEditorState > = { toggleValue : false , isDisabled : false } ; public async getPropertyValue ( ) { const record = this . props . propertyRecord ; let propertyValue ; if ( record && record . value . valueFormat === PropertyValueFormat . Primitive ) { propertyValue = { valueFormat : PropertyValueFormat . Primitive , value : this . state . toggleValue , displayValue : "" } ; } return propertyValue ; } public get htmlElement ( ) : HTMLElement | null { return this . _inputElement . current ; } public get hasFocus ( ) : boolean { return document . activeElement === this . _inputElement . current ; } private _updateToggleValue = ( e ) : any => { if ( this . _isMounted ) { if ( this . _isMounted ) { let toggleValue = false ; if ( e . target . checked !== undefined ) toggleValue = e . target . checked ; else { if ( e . target . value !== undefined && typeof e . target . value === "boolean" ) toggleValue = e . target . value ; } this . setState ( { toggleValue } , async ( ) => { if ( this . props . propertyRecord && this . props . onCommit ) { const propertyValue = await this . getPropertyValue ( ) ; if ( propertyValue !== undefined ) { 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 toggleValue = false ; let isDisabled = false ; if ( propertyRecord && propertyRecord . value . valueFormat === PropertyValueFormat . Primitive ) { const primitiveValue = propertyRecord . value . value ; toggleValue = primitiveValue as boolean ; } if ( propertyRecord && propertyRecord . isDisabled ) isDisabled = propertyRecord . isDisabled ; if ( this . _isMounted ) this . setState ( { toggleValue , isDisabled } ) ; } internal public override render ( ) { const className = classnames ( "components-cell-editor" , "components-toggle-editor" , this . props . className ) ; const isChecked = this . state . toggleValue ; const isDisabled = ! ! this . state . isDisabled ; return ( < ToggleSwitch ref = { this . _inputElement } onBlur = { this . props . onBlur } className = { className } style = { this . props . style } checked = { isChecked } disabled = { isDisabled } onChange = { this . _updateToggleValue } data - testid = "components-toggle-editor" setFocus = { this . props . setFocus } / > ) ; } } public export class TogglePropertyEditor extends PropertyEditorBase { public override get containerHandlesBlur ( ) : boolean { return false ; } public get reactNode ( ) : React . ReactNode { return < ToggleEditor />; } } PropertyEditorManager . registerEditor ( StandardTypeNames . Bool , TogglePropertyEditor , StandardEditorNames . Toggle ) ; PropertyEditorManager . registerEditor ( StandardTypeNames . Boolean , TogglePropertyEditor , StandardEditorNames . Toggle ) ;