packageDocumentation module import "./NodeContent.scss" ; import classnames from "classnames" ; import * as React from "react" ; import { CommonProps , TreeNodePlaceholder } from "@itwin/core-react" ; import { ItemStyle , ItemStyleProvider } from "../../../properties/ItemStyle" ; import { PropertyContainerType , PropertyValueRendererContext , PropertyValueRendererManager } from "../../../properties/ValueRendererManager" ; import { HighlightableTreeNodeProps , HighlightingEngine } from "../../HighlightingEngine" ; import { TreeModelNode } from "../TreeModel" ; import { TreeNodeEditor , TreeNodeEditorRenderer } from "./TreeNodeEditor" ; internal export interface TreeNodeContentProps extends CommonProps { node : TreeModelNode ; showDescription ? : boolean ; highlightProps ? : HighlightableTreeNodeProps ; valueRendererManager : PropertyValueRendererManager ; onLabelRendered ? : ( node : TreeModelNode ) => void ; nodeEditorRenderer ? : TreeNodeEditorRenderer ; } internal export function TreeNodeContent ( props ) { const { node , valueRendererManager , onLabelRendered , highlightProps } = props ; const label = React . useMemo ( ( ) => getLabel ( node , valueRendererManager , highlightProps ) , [ node , valueRendererManager , highlightProps ] ) ; React . useEffect ( ( ) => { onLabelRendered && onLabelRendered ( node ) ; } , [ label , node , onLabelRendered ] ) ; let editor ; if ( props . node . editingInfo ) { const style = getStyle ( props . node . item . style , props . node . isSelected ) ; const editorProps = { node : props . node , onCancel : props . node . editingInfo . onCancel , onCommit : props . node . editingInfo . onCommit , style } ; editor = props . nodeEditorRenderer ? props . nodeEditorRenderer ( editorProps ) : < TreeNodeEditor { ... editorProps } / > ; } const isDescriptionEnabled = props . node . item . description && props . showDescription ; const containerClassName = classnames ( "components-controlledTree-node-content" , isDescriptionEnabled ? "with-description" : undefined , props . className ) ; const descriptionClassName = classnames ( "components-controlledTree-node-description" , editor ? "with-editor" : undefined ) ; return ( < div className = { containerClassName } style = { props . style } > { editor ? editor : label } { isDescriptionEnabled ? < div className = { descriptionClassName } > { props . node . item . description } < /div> : undefined } < /div>); } function getLabel ( node , valueRendererManager , highlightProps ? ) { const highlightCallback = highlightProps ? ( text ) => HighlightingEngine . renderNodeLabel ( text , highlightProps ) : undefined ; const context = { containerType : PropertyContainerType . Tree , style : getStyle ( node . item . style , node . isSelected ) , textHighlighter : highlightCallback , defaultValue : < TreeNodePlaceholder level = { 0 } data - testid = { "node-label-placeholder" } /> } ; return valueRendererManager . render ( node . item . label , context ) ; } function getStyle ( style ? , isSelected ? ) { return ItemStyleProvider . createStyle ( style ? style : { } , isSelected ) ; }