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, { ReactElement, ReactNode, useState } from 'react';
   6 import { Button, Grid, StyleRulesCallback, Tooltip, withStyles, WithStyles } from "@material-ui/core";
   7 import { GridProps } from '@material-ui/core/Grid';
   8 import { isArray } from 'lodash';
   9 import { DefaultView } from 'components/default-view/default-view';
  10 import { InfoIcon, InvisibleIcon, VisibleIcon } from 'components/icon/icon';
  11 import { ReactNodeArray } from 'prop-types';
  12 import classNames from 'classnames';
  13
  14 type CssRules = 'button' | 'buttonIcon' | 'content';
  15
  16 const styles: StyleRulesCallback<CssRules> = theme => ({
  17     button: {
  18         padding: '2px 5px',
  19         marginRight: '5px',
  20     },
  21     buttonIcon: {
  22         boxShadow: 'none',
  23         padding: '2px 0px 2px 5px',
  24         fontSize: '1rem'
  25     },
  26     content: {
  27         overflow: 'auto',
  28     },
  29 });
  30
  31 interface MPVHideablePanelDataProps {
  32     name: string;
  33     visible: boolean;
  34     maximized: boolean;
  35     children: ReactNode;
  36 }
  37
  38 interface MPVHideablePanelActionProps {
  39     doHidePanel: () => void;
  40     doMaximizePanel: () => void;
  41 }
  42
  43 type MPVHideablePanelProps = MPVHideablePanelDataProps & MPVHideablePanelActionProps;
  44
  45 const MPVHideablePanel = ({doHidePanel, doMaximizePanel, name, visible, maximized, ...props}: MPVHideablePanelProps) =>
  46     visible
  47     ? <>
  48         {React.cloneElement((props.children as ReactElement), { doHidePanel, doMaximizePanel,panelName: name, panelMaximized: maximized })}
  49     </>
  50     : null;
  51
  52 interface MPVPanelDataProps {
  53     panelName?: string;
  54     panelMaximized?: boolean;
  55 }
  56
  57 interface MPVPanelActionProps {
  58     doHidePanel?: () => void;
  59     doMaximizePanel?: () => void;
  60 }
  61
  62 // Props received by panel implementors
  63 export type MPVPanelProps = MPVPanelDataProps & MPVPanelActionProps;
  64
  65 type MPVPanelContentProps = {children: ReactElement} & MPVPanelProps & GridProps;
  66
  67 // Grid item compatible component for layout and MPV props passing
  68 export const MPVPanelContent = ({doHidePanel, doMaximizePanel, panelName, panelMaximized, ...props}: MPVPanelContentProps) =>
  69     <Grid item {...props}>
  70         {React.cloneElement(props.children, { doHidePanel, doMaximizePanel, panelName, panelMaximized })}
  71     </Grid>;
  72
  73 export interface MPVPanelState {
  74     name: string;
  75     visible?: boolean;
  76 }
  77 interface MPVContainerDataProps {
  78     panelStates?: MPVPanelState[];
  79 }
  80 type MPVContainerProps = MPVContainerDataProps & GridProps;
  81
  82 // Grid container compatible component that also handles panel toggling.
  83 const MPVContainerComponent = ({children, panelStates, classes, ...props}: MPVContainerProps & WithStyles<CssRules>) => {
  84     if (children === undefined || children === null || children === {}) {
  85         children = [];
  86     } else if (!isArray(children)) {
  87         children = [children];
  88     }
  89     const visibility = (children as ReactNodeArray).map((_, idx) =>
  90         !!!panelStates || // if panelStates wasn't passed, default to all visible panels
  91             (panelStates[idx] &&
  92                 (panelStates[idx].visible || panelStates[idx].visible === undefined)));
  93     const [panelVisibility, setPanelVisibility] = useState<boolean[]>(visibility);
  94
  95     let panels: JSX.Element[] = [];
  96     let toggles: JSX.Element[] = [];
  97
  98     if (isArray(children)) {
  99         for (let idx = 0; idx < children.length; idx++) {
 100             const toggleFn = (idx: number) => () => {
 101                 setPanelVisibility([
 102                     ...panelVisibility.slice(0, idx),
 103                     !panelVisibility[idx],
 104                     ...panelVisibility.slice(idx+1)
 105                 ])
 106             };
 107             const maximizeFn = (idx: number) => () => {
 108                 // Maximize X == hide all but X
 109                 setPanelVisibility([
 110                     ...panelVisibility.slice(0, idx).map(() => false),
 111                     true,
 112                     ...panelVisibility.slice(idx+1).map(() => false),
 113                 ])
 114             };
 115             const toggleIcon = panelVisibility[idx]
 116                 ? <VisibleIcon className={classNames(classes.buttonIcon)} />
 117                 : <InvisibleIcon className={classNames(classes.buttonIcon)}/>
 118             const panelName = panelStates === undefined
 119                 ? `Panel ${idx+1}`
 120                 : (panelStates[idx] && panelStates[idx].name) || `Panel ${idx+1}`;
 121             const toggleVariant = panelVisibility[idx]
 122                 ? "contained"
 123                 : "text";
 124             const toggleTooltip = panelVisibility[idx]
 125                 ? `Hide ${panelName} panel`
 126                 : `Show ${panelName} panel`;
 127             const panelIsMaximized = panelVisibility[idx] &&
 128                 panelVisibility.filter(e => e).length === 1;
 129
 130             toggles = [
 131                 ...toggles,
 132                 <Tooltip title={toggleTooltip} disableFocusListener>
 133                     <Button variant={toggleVariant} size="small" color="primary"
 134                         className={classNames(classes.button)}
 135                         onClick={toggleFn(idx)}>
 136                             {panelName}
 137                             {toggleIcon}
 138                     </Button>
 139                 </Tooltip>
 140             ];
 141
 142             const aPanel =
 143                 <MPVHideablePanel key={idx} visible={panelVisibility[idx]} name={panelName}
 144                     maximized={panelIsMaximized}
 145                     doHidePanel={toggleFn(idx)} doMaximizePanel={maximizeFn(idx)}>
 146                     {children[idx]}
 147                 </MPVHideablePanel>;
 148             panels = [...panels, aPanel];
 149         };
 150     };
 151
 152     return <Grid container {...props}>
 153         <Grid container item direction="row">
 154             { toggles.map((tgl, idx) => <Grid item key={idx}>{tgl}</Grid>) }
 155         </Grid>
 156         <Grid container item {...props} xs className={classes.content}>
 157             { panelVisibility.includes(true)
 158                 ? panels
 159                 : <Grid container item alignItems='center' justify='center'>
 160                     <DefaultView messages={["All panels are hidden.", "Click on the buttons above to show them."]} icon={InfoIcon} />
 161                 </Grid> }
 162         </Grid>
 163     </Grid>;
 164 };
 165
 166 export const MPVContainer = withStyles(styles)(MPVContainerComponent);