const mapStateToProps = ({ router, sidePanel, detailsPanel }: RootState) => ({
currentRoute: router.location ? router.location.pathname : '',
isCollapsed: sidePanel.collapsedState,
+ currentSideWidth: sidePanel.currentSideWidth,
isDetailsPanelTransitioning: detailsPanel.isTransitioning
});
export const SidePanel = withStyles(styles)(
connect(mapStateToProps, mapDispatchToProps)(
- ({ classes, ...props }: WithStyles<CssRules> & SidePanelTreeProps & { currentRoute: string, isDetailsPanelTransitioning: boolean }) =>{
+ ({ classes, ...props }: WithStyles<CssRules> & SidePanelTreeProps ) =>{
const splitPaneRef = useRef<any>(null)
if (!splitPane) return;
const observerCallback: ResizeObserverCallback = (entries: ResizeObserverEntry[]) => {
+ //entries[0] targets the left side of the split pane
+ const width = entries[0].contentRect.width
+ if (width === props.currentSideWidth) return;
+
//prevents potential infinite resize triggers
window.requestAnimationFrame((): void | undefined => {
if (!Array.isArray(entries) || !entries.length) {
+ props.setCurrentSideWidth(width)
return;
}
- const width = entries[0].contentRect.width
- props.setCurrentSideWidth(width)
});
};