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