packageDocumentation module import * as React from "react" ; import classnames from "classnames" ; import { IMatch } from "@itwin/appui-abstract" ; import { CommonProps } from "../utils/Props" ; import "./FilteredText.scss" ; alpha export interface FilteredTextProps extends CommonProps { /** string that matched a filter string */ value : string ; /** define array of start and end positions of filter matches. */ matches ? : IMatch [ ] ; /** holds class name for matching span text. */ matchClassName ? : string ; /** holds style for matching span text. */ matchStyle ? : React . CSSProperties ; } alpha export function FilteredText ( props ) { const { value , className , matches , matchClassName , matchStyle , ... otherProps } = props ; if ( matches && matches . length > 0 ) { const spans = [ ] ; let startPos = 0 ; for ( const span of matches ) { if ( span . start !== startPos ) spans . push ( < span key = { startPos } className = "uicore-partial-filtered-text" > { value . substr ( startPos , span . start - startPos ) } < /span>); spans . push ( < span key = { span . start } style = { matchStyle } className = { classnames ( "uicore-filtered-text-match" , matchClassName ) } > { value . substr ( span . start , span . end - span . start ) } < /span>); startPos = span . end ; } const endPos = value . length ; if ( startPos < endPos ) { spans . push ( < span key = { startPos } className = "uicore-partial-filtered-text" > { value . substr ( startPos , endPos - startPos ) } < /span>); } return < div { ... otherProps } className = { classnames ( "uicore-filtered-text" , className ) } title = { value } > { spans } < /div>; } return < span { ... otherProps } className = { classnames ( "uicore-filtered-text" , className ) } title = { value } > { value } < /span>; }