import { useActiveFrontstageDef } from "@itwin/appui-react" ; import { WidgetState } from "@itwin/appui-abstract" ; import { Centered } from "@itwin/core-react" ; import { ISelectionProvider , Presentation , SelectionChangeEventArgs } from "@itwin/presentation-frontend" ; import * as React from "react" ; export function useWidgetDef ( id ) { const frontstageDef = useActiveFrontstageDef ( ) ; return frontstageDef ?. findWidgetDef ( id ) ; } /** Hook used to return ids from selected element */ export function useIdOfSelectedElements ( className ? ) { const [ locatedIds , setLocatedIds ] = React . useState < string [ ] > ( [ ] ) ; React . useEffect ( ( ) => { return Presentation . selection . selectionChange . addListener ( async ( evt , selectionProvider ) => { const selection = selectionProvider . getSelection ( evt . imodel , evt . level ) ; if ( selection . isEmpty ) { setLocatedIds ( [ ] ) ; } else { if ( selection . instanceKeys . size !== 0 ) { const selectIds = [ ] ; selection . instanceKeys . forEach ( ( currentIds , key ) => { if ( ! className || className && key === className ) selectIds . push ( ... currentIds ) ; } ) ; setLocatedIds ( selectIds ) ; } } } ) ; } , [ className ] ) ; return locatedIds ; } export function SelectedElementDataWidgetComponent ( ) { const idList = useIdOfSelectedElements ( ) ; const widgetDef = useWidgetDef ( "ui-item-provider-test:elementDataListWidget" ) ; React . useEffect ( ( ) => { if ( idList . length === 0 ) { setImmediate ( ( ) => widgetDef ?. setWidgetState ( WidgetState . Hidden ) ) ; } else { setImmediate ( ( ) => widgetDef ?. setWidgetState ( WidgetState . Open ) ) ; } } , [ idList , widgetDef ] ) ; if ( 0 === idList . length ) { return ( < Centered > < p className = "center-text" > Select element / elements < /p> < /Centered>); } return ( < Centered > < p className = "center-text" > { idList . length } element ( s ) selected < /p> < /Centered>); }