services/workbench2/src/views-components/side-panel/side-panel.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import React, { useRef, useEffect } from 'react';
   6 import { CustomStyleRulesCallback } from 'common/custom-theme';
   7 import { WithStyles } from '@mui/styles';
   8 import withStyles from '@mui/styles/withStyles';
   9 import { ArvadosTheme } from 'common/custom-theme';
  10 import { SidePanelTree, SidePanelTreeProps } from 'views-components/side-panel-tree/side-panel-tree';
  11 import { Dispatch } from 'redux';
  12 import { connect } from 'react-redux';
  13 import { navigateFromSidePanel, setCurrentSideWidth } from 'store/side-panel/side-panel-action';
  14 import { Grid } from '@mui/material';
  15 import { SidePanelButton } from 'views-components/side-panel-button/side-panel-button';
  16 import { RootState } from 'store/store';
  17 import SidePanelToggle from 'views-components/side-panel-toggle/side-panel-toggle';
  18 import { SidePanelCollapsed } from './side-panel-collapsed';
  19
  20 const DRAWER_WIDTH = 240;
  21
  22 type CssRules = 'root' | 'topButtonContainer';
  23
  24 const styles: CustomStyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  25     root: {
  26         background: theme.palette.background.paper,
  27         borderRight: `1px solid ${theme.palette.divider}`,
  28         height: '100%',
  29         overflowX: 'auto',
  30         width: DRAWER_WIDTH,
  31     },
  32     topButtonContainer: {
  33         display: 'flex',
  34         justifyContent: 'space-between'
  35     }
  36 });
  37
  38 const mapDispatchToProps = (dispatch: Dispatch): SidePanelTreeProps => ({
  39     onItemActivation: id => {
  40         dispatch<any>(navigateFromSidePanel(id));
  41     },
  42     setCurrentSideWidth: width => {
  43         dispatch<any>(setCurrentSideWidth(width))
  44     }
  45 });
  46
  47 const mapStateToProps = ({ router, sidePanel, detailsPanel }: RootState) => ({
  48     currentRoute: router.location ? router.location.pathname : '',
  49     isCollapsed: sidePanel.collapsedState,
  50     currentSideWidth: sidePanel.currentSideWidth,
  51     isDetailsPanelTransitioning: detailsPanel.isTransitioning
  52 });
  53
  54 export const SidePanel = withStyles(styles)(
  55     connect(mapStateToProps, mapDispatchToProps)(
  56         ({ classes, ...props }: WithStyles<CssRules> & SidePanelTreeProps ) =>{
  57
  58         const splitPaneRef = useRef<any>(null)
  59
  60         useEffect(()=>{
  61             const splitPane = splitPaneRef?.current as Element
  62
  63             if (!splitPane) return;
  64
  65             const observerCallback: ResizeObserverCallback = (entries: ResizeObserverEntry[]) => {
  66                 //entries[0] targets the left side of the split pane
  67                 const width = entries[0].contentRect.width
  68                 if (width === props.currentSideWidth) return;
  69
  70                 //prevents potential infinite resize triggers
  71                 window.requestAnimationFrame((): void | undefined => {
  72                   if (!Array.isArray(entries) || !entries.length) {
  73                       props.setCurrentSideWidth(width)
  74                     return;
  75                   }
  76                 });
  77               };
  78
  79             const observer = new ResizeObserver(observerCallback)
  80
  81             observer.observe(splitPane)
  82             return ()=> observer.disconnect()
  83         }, [props])
  84
  85             return (
  86                 <Grid item xs>
  87                     {props.isCollapsed ?
  88                         <div ref={splitPaneRef}>
  89                             <div>
  90                                 <SidePanelToggle />
  91                                 <SidePanelCollapsed />
  92                             </div>
  93                         </div>
  94                             :
  95                         <div ref={splitPaneRef}>
  96                             <div className={classes.topButtonContainer}>
  97                                 <SidePanelButton key={props.currentRoute} />
  98                                 <SidePanelToggle/>
  99                             </div>
 100                             <SidePanelTree {...props} />
 101                         </div>
 102                     }
 103                 </Grid>
 104         )}
 105     ));