- ({ classes, ...props }: WithStyles<CssRules> & SidePanelTreeProps & { currentRoute: string }) =>
- <Grid item xs>
- {props.isCollapsed ? <SidePanelToggle /> :
- <>
- <Grid className={classes.topButtonContainer}>
- <SidePanelButton key={props.currentRoute} />
- <SidePanelToggle/>
+ ({ classes, ...props }: WithStyles<CssRules> & SidePanelTreeProps & { currentRoute: string, isDetailsPanelTransitioning: boolean }) =>{
+
+ const splitPaneRef = useRef<any>(null)
+
+ useEffect(()=>{
+ const splitPane = splitPaneRef?.current as Element
+
+ if (!splitPane) return;
+
+ const observerCallback: ResizeObserverCallback = (entries: ResizeObserverEntry[]) => {
+ try {
+ //prevents potential infinite resize triggers
+ window.requestAnimationFrame((): void | undefined => {
+ if (!Array.isArray(entries) || !entries.length) {
+ return;
+ }
+ const width = entries[0].contentRect.width
+ props.setCurrentSideWidth(width)
+ });
+ } catch (error) {
+ console.error('Error in resize observer callback', error);
+ }
+ };
+
+ const observer = new ResizeObserver(observerCallback)
+
+ observer.observe(splitPane)
+ return ()=> observer.disconnect()
+ }, [props])
+
+ return (
+ <Grid item xs>
+ {props.isCollapsed ?
+ <div ref={splitPaneRef}>
+ <>
+ <SidePanelToggle />
+ <SidePanelCollapsed />
+ </>
+ </div>
+ :
+ <>
+ <div ref={splitPaneRef}>
+ <Grid className={classes.topButtonContainer}>
+ <SidePanelButton key={props.currentRoute} />
+ <SidePanelToggle/>
+ </Grid>
+ <SidePanelTree {...props} />
+ </div>
+ </>
+ }