packageDocumentation module import * as React from "react" ; import { CommonProps } from "@itwin/core-react" ; import { ExpandableBlock } from "@itwin/itwinui-react" ; import { HighlightedText } from "../../common/HighlightedText" ; import { HighlightingComponentProps } from "../../common/HighlightingComponentProps" ; import { PropertyCategory } from "../PropertyDataProvider" ; public export interface PropertyCategoryBlockProps extends CommonProps { /** Category of the properties */ category : PropertyCategory ; /** Callback to when PropertyCategoryBlock gets expended or collapsed */ onExpansionToggled ? : ( categoryName : string ) => void ; /** Properties used for highlighting */ highlight ? : HighlightingComponentProps ; } public export class PropertyCategoryBlock extends React . Component < PropertyCategoryBlockProps > { constructor ( props ) { super ( props ) ; } private toggleExpansion ( ) { if ( this . props . onExpansionToggled ) this . props . onExpansionToggled ( this . props . category . name ) ; } private _handleToggle = ( _isExpanding ) : void => { this . toggleExpansion ( ) ; } ; internal public override render ( ) { const { highlight , category , children , onExpansionToggled , ... props } = this . props ; const activeMatchIndex = this . props . category . name === highlight ?. activeHighlight ?. highlightedItemIdentifier ? highlight . activeHighlight . highlightIndex : undefined ; const label = highlight ? ( < HighlightedText text = { category . label } activeMatchIndex = { activeMatchIndex } searchText = { highlight . highlightedText } / > ) : category . label ; return ( < ExpandableBlock isExpanded = { category . expand } onToggle = { this . _handleToggle } title = { label } size = "small" { ... props } > { category . expand && children } < /ExpandableBlock>); } }