src/components/multi-panel-view/multi-panel-view.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import React, { MutableRefObject, ReactElement, ReactNode, useEffect, useRef, useState } from 'react';
   6 import {
   7     Button,
   8     Grid,
   9     Paper,
  10     StyleRulesCallback,
  11     Tooltip,
  12     withStyles,
  13     WithStyles
  14 } from "@material-ui/core";
  15 import { GridProps } from '@material-ui/core/Grid';
  16 import { isArray } from 'lodash';
  17 import { DefaultView } from 'components/default-view/default-view';
  18 import { InfoIcon } from 'components/icon/icon';
  19 import { ReactNodeArray } from 'prop-types';
  20 import classNames from 'classnames';
  21
  22 type CssRules = 'root' | 'button' | 'buttonIcon' | 'content';
  23
  24 const styles: StyleRulesCallback<CssRules> = theme => ({
  25     root: {
  26         marginTop: '10px',
  27     },
  28     button: {
  29         padding: '2px 5px',
  30         marginRight: '5px',
  31     },
  32     buttonIcon: {
  33         boxShadow: 'none',
  34         padding: '2px 0px 2px 5px',
  35         fontSize: '1rem'
  36     },
  37     content: {
  38         overflow: 'auto',
  39     },
  40 });
  41
  42 interface MPVHideablePanelDataProps {
  43     name: string;
  44     visible: boolean;
  45     maximized: boolean;
  46     illuminated: boolean;
  47     children: ReactNode;
  48     panelRef?: MutableRefObject<any>;
  49 }
  50
  51 interface MPVHideablePanelActionProps {
  52     doHidePanel: () => void;
  53     doMaximizePanel: () => void;
  54     doUnMaximizePanel: () => void;
  55 }
  56
  57 type MPVHideablePanelProps = MPVHideablePanelDataProps & MPVHideablePanelActionProps;
  58
  59 const MPVHideablePanel = ({doHidePanel, doMaximizePanel, doUnMaximizePanel, name, visible, maximized, illuminated, ...props}: MPVHideablePanelProps) =>
  60     visible
  61     ? <>
  62         {React.cloneElement((props.children as ReactElement), { doHidePanel, doMaximizePanel, doUnMaximizePanel, panelName: name, panelMaximized: maximized, panelIlluminated: illuminated, panelRef: props.panelRef })}
  63     </>
  64     : null;
  65
  66 interface MPVPanelDataProps {
  67     panelName?: string;
  68     panelMaximized?: boolean;
  69     panelIlluminated?: boolean;
  70     panelRef?: MutableRefObject<any>;
  71     forwardProps?: boolean;
  72     maxHeight?: string;
  73     minHeight?: string;
  74 }
  75
  76 interface MPVPanelActionProps {
  77     doHidePanel?: () => void;
  78     doMaximizePanel?: () => void;
  79     doUnMaximizePanel?: () => void;
  80 }
  81
  82 // Props received by panel implementors
  83 export type MPVPanelProps = MPVPanelDataProps & MPVPanelActionProps;
  84
  85 type MPVPanelContentProps = {children: ReactElement} & MPVPanelProps & GridProps;
  86
  87 // Grid item compatible component for layout and MPV props passing
  88 export const MPVPanelContent = ({doHidePanel, doMaximizePanel, doUnMaximizePanel, panelName,
  89     panelMaximized, panelIlluminated, panelRef, forwardProps, maxHeight, minHeight,
  90     ...props}: MPVPanelContentProps) => {
  91     useEffect(() => {
  92         if (panelRef && panelRef.current) {
  93             panelRef.current.scrollIntoView({alignToTop: true});
  94         }
  95     }, [panelRef]);
  96
  97     const maxH = panelMaximized
  98         ? '100%'
  99         : maxHeight;
 100
 101     return <Grid item style={{maxHeight: maxH, minHeight}} {...props}>
 102         <span ref={panelRef} /> {/* Element to scroll to when the panel is selected */}
 103         <Paper style={{height: '100%'}} elevation={panelIlluminated ? 8 : 0}>
 104             { forwardProps
 105                 ? React.cloneElement(props.children, { doHidePanel, doMaximizePanel, doUnMaximizePanel, panelName, panelMaximized })
 106                 : props.children }
 107         </Paper>
 108     </Grid>;
 109 }
 110
 111 export interface MPVPanelState {
 112     name: string;
 113     visible?: boolean;
 114 }
 115 interface MPVContainerDataProps {
 116     panelStates?: MPVPanelState[];
 117 }
 118 type MPVContainerProps = MPVContainerDataProps & GridProps;
 119
 120 // Grid container compatible component that also handles panel toggling.
 121 const MPVContainerComponent = ({children, panelStates, classes, ...props}: MPVContainerProps & WithStyles<CssRules>) => {
 122     if (children === undefined || children === null || children === {}) {
 123         children = [];
 124     } else if (!isArray(children)) {
 125         children = [children];
 126     }
 127     const initialVisibility = (children as ReactNodeArray).map((_, idx) =>
 128         !panelStates || // if panelStates wasn't passed, default to all visible panels
 129             (panelStates[idx] &&
 130                 (panelStates[idx].visible || panelStates[idx].visible === undefined)));
 131     const [panelVisibility, setPanelVisibility] = useState<boolean[]>(initialVisibility);
 132     const [previousPanelVisibility, setPreviousPanelVisibility] = useState<boolean[]>(initialVisibility);
 133     const [highlightedPanel, setHighlightedPanel] = useState<number>(-1);
 134     const [selectedPanel, setSelectedPanel] = useState<number>(-1);
 135     const panelRef = useRef<any>(null);
 136
 137     let panels: JSX.Element[] = [];
 138     let buttons: JSX.Element[] = [];
 139
 140     if (isArray(children)) {
 141         for (let idx = 0; idx < children.length; idx++) {
 142             const showFn = (idx: number) => () => {
 143                 setPreviousPanelVisibility(initialVisibility);
 144                 setPanelVisibility([
 145                     ...panelVisibility.slice(0, idx),
 146                     true,
 147                     ...panelVisibility.slice(idx+1)
 148                 ]);
 149                 setSelectedPanel(idx);
 150             };
 151             const hideFn = (idx: number) => () => {
 152                 setPreviousPanelVisibility(initialVisibility);
 153                 setPanelVisibility([
 154                     ...panelVisibility.slice(0, idx),
 155                     false,
 156                     ...panelVisibility.slice(idx+1)
 157                 ])
 158             };
 159             const maximizeFn = (idx: number) => () => {
 160                 setPreviousPanelVisibility(panelVisibility);
 161                 // Maximize X == hide all but X
 162                 setPanelVisibility([
 163                     ...panelVisibility.slice(0, idx).map(() => false),
 164                     true,
 165                     ...panelVisibility.slice(idx+1).map(() => false),
 166                 ]);
 167             };
 168             const unMaximizeFn = (idx: number) => () => {
 169                 setPanelVisibility(previousPanelVisibility);
 170                 setSelectedPanel(idx);
 171             }
 172             const panelName = panelStates === undefined
 173                 ? `Panel ${idx+1}`
 174                 : (panelStates[idx] && panelStates[idx].name) || `Panel ${idx+1}`;
 175             const btnVariant = panelVisibility[idx]
 176                 ? "contained"
 177                 : "outlined";
 178             const btnTooltip = panelVisibility[idx]
 179                 ? ``
 180                 :`Open ${panelName} panel`;
 181             const panelIsMaximized = panelVisibility[idx] &&
 182                 panelVisibility.filter(e => e).length === 1;
 183
 184             buttons = [
 185                 ...buttons,
 186                 <Tooltip title={btnTooltip} disableFocusListener>
 187                     <Button variant={btnVariant} size="small" color="primary"
 188                         className={classNames(classes.button)}
 189                         onMouseEnter={() => {
 190                             setHighlightedPanel(idx);
 191                         }}
 192                         onMouseLeave={() => {
 193                             setHighlightedPanel(-1);
 194                         }}
 195                         onClick={showFn(idx)}>
 196                             {panelName}
 197                     </Button>
 198                 </Tooltip>
 199             ];
 200
 201             const aPanel =
 202                 <MPVHideablePanel key={idx} visible={panelVisibility[idx]} name={panelName}
 203                     panelRef={(idx === selectedPanel) ? panelRef : undefined}
 204                     maximized={panelIsMaximized} illuminated={idx === highlightedPanel}
 205                     doHidePanel={hideFn(idx)} doMaximizePanel={maximizeFn(idx)} doUnMaximizePanel={panelIsMaximized ? unMaximizeFn(idx) : () => null}>
 206                     {children[idx]}
 207                 </MPVHideablePanel>;
 208             panels = [...panels, aPanel];
 209         };
 210     };
 211
 212     return <Grid container {...props} className={classes.root}>
 213         <Grid container item direction="row">
 214             { buttons.map((tgl, idx) => <Grid item key={idx}>{tgl}</Grid>) }
 215         </Grid>
 216         <Grid container item {...props} xs className={classes.content}
 217             onScroll={() => setSelectedPanel(-1)}>
 218             { panelVisibility.includes(true)
 219                 ? panels
 220                 : <Grid container item alignItems='center' justify='center'>
 221                     <DefaultView messages={["All panels are hidden.", "Click on the buttons above to show them."]} icon={InfoIcon} />
 222                 </Grid> }
 223         </Grid>
 224     </Grid>;
 225 };
 226
 227 export const MPVContainer = withStyles(styles)(MPVContainerComponent);