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