packageDocumentation module import * as React from "react" ; import { PropertyRecord , PropertyValueFormat } from "@itwin/appui-abstract" ; import { Orientation } from "@itwin/core-react" ; import { HighlightingComponentProps } from "../../../common/HighlightingComponentProps" ; import { EditorContainer , PropertyUpdatedArgs } from "../../../editors/EditorContainer" ; import { CommonPropertyRenderer } from "../../../properties/renderers/CommonPropertyRenderer" ; import { PrimitivePropertyRenderer , PrimitiveRendererProps } from "../../../properties/renderers/PrimitivePropertyRenderer" ; import { SharedRendererProps } from "../../../properties/renderers/PropertyRenderer" ; import { PropertyValueRendererManager } from "../../../properties/ValueRendererManager" ; import { PropertyCategory } from "../../PropertyDataProvider" ; import { FlatNonPrimitivePropertyRenderer } from "./FlatNonPrimitivePropertyRenderer" ; internal export interface FlatPropertyRendererProps extends SharedRendererProps { category ? : PropertyCategory ; /** Custom value renderer */ propertyValueRendererManager ? : PropertyValueRendererManager ; /** Multiplier of how much the property is indented to the right */ indentation ? : number ; beta isEditing ? : boolean ; beta onEditCommit ? : ( args : PropertyUpdatedArgs , category : PropertyCategory ) => void ; beta onEditCancel ? : ( ) => void ; /** Whether property value is displayed in expanded state. */ isExpanded : boolean ; /** Called when toggling between expanded and collapsed property value display state. */ onExpansionToggled : ( ) => void ; /** Reports property height changes. */ onHeightChanged ? : ( newHeight : number ) => void ; highlight ? : HighlightingComponentProps & { applyOnLabel : boolean ; applyOnValue : boolean ; } ; children ? : never ; } internal export const FlatPropertyRenderer = ( props ) => { const { category , propertyValueRendererManager , isEditing , onEditCommit , onEditCancel , onHeightChanged , highlight , ... passthroughProps } = props ; const valueElementRenderer = ( ) => ( < DisplayValue propertyRecord = { passthroughProps . propertyRecord } orientation = { passthroughProps . orientation } columnRatio = { passthroughProps . columnRatio } width = { passthroughProps . width } category = { category } propertyValueRendererManager = { propertyValueRendererManager } isEditing = { isEditing } onEditCommit = { onEditCommit } onEditCancel = { onEditCancel } isExpanded = { passthroughProps . isExpanded } onExpansionToggled = { passthroughProps . onExpansionToggled } onHeightChanged = { onHeightChanged } highlight = { highlight } / > ) ; const primitiveRendererProps = { ... passthroughProps , valueElementRenderer , indentation : props . indentation } ; switch ( props . propertyRecord . value . valueFormat ) { case PropertyValueFormat . Primitive : return ( < PrimitivePropertyRenderer highlight = { highlight ?. applyOnLabel ? highlight : undefined } { ... primitiveRendererProps } />); case PropertyValueFormat . Array : if ( props . propertyRecord . value . items . length === 0 ) return ( < PrimitivePropertyRenderer highlight = { highlight ?. applyOnLabel ? highlight : undefined } { ... primitiveRendererProps } />); case PropertyValueFormat . Struct : return ( < FlatNonPrimitivePropertyRenderer isExpanded = { props . isExpanded } onExpandToggled = { props . onExpansionToggled } { ... primitiveRendererProps } />); } } ; interface DisplayValueProps { isEditing ? : boolean ; propertyRecord : PropertyRecord ; orientation : Orientation ; columnRatio ? : number ; /** Pass width to rerender component as property grid width changes */ width ? : number ; indentation ? : number ; propertyValueRendererManager ? : PropertyValueRendererManager ; isExpanded ? : boolean ; onExpansionToggled ? : ( ) => void ; onHeightChanged ? : ( newHeight : number ) => void ; category ? : PropertyCategory ; onEditCancel ? : ( ) => void ; onEditCommit ? : ( args : PropertyUpdatedArgs , category : PropertyCategory ) => void ; highlight ? : HighlightingComponentProps & { applyOnLabel : boolean ; applyOnValue : boolean ; } ; } const DisplayValue = ( props ) => { useResetHeightOnEdit ( props . isEditing , props . onHeightChanged ) ; if ( props . isEditing ) { const _onEditCommit = ( args ) => { if ( props . category ) props . onEditCommit ?. ( args , props . category ) ; } ; return ( < EditorContainer propertyRecord = { props . propertyRecord } onCommit = { _onEditCommit } onCancel = { props . onEditCancel ?? ( ( ) => { } ) } setFocus = { true } / > ) ; } return ( < > { CommonPropertyRenderer . createNewDisplayValue ( props . orientation , props . propertyRecord , props . indentation , props . propertyValueRendererManager , props . isExpanded , props . onExpansionToggled , props . onHeightChanged , props . highlight ) } < />); } ; function useResetHeightOnEdit ( isEditing ? , onHeightChanged ? ) { const previousEditingStatusRef = React . useRef ( isEditing ) ; React . useEffect ( ( ) => { if ( ! previousEditingStatusRef . current && isEditing ) { onHeightChanged ?. ( 27 ) ; } previousEditingStatusRef . current = isEditing ; } ) ; }