- ({ classes, ...props }: WithStyles<CssRules> & SidePanelTreeProps & { currentRoute: string }) =>
- <Grid item xs>
- {props.isCollapsed ?
- <>
- <SidePanelToggle />
- <SidePanelCollapsed />
- </>
- :
- <>
- <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 observer = new ResizeObserver((entries)=>{
+ const width = entries[0].contentRect.width
+ props.setCurrentSideWidth(width)
+ })
+
+ 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>
+ </>
+ }