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';
  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 });
  27
  28 interface MPVHideablePanelDataProps {
  29     name: string;
  30     visible: boolean;
  31     children: ReactNode;
  32 }
  33
  34 interface MPVHideablePanelActionProps {
  35     doHidePanel: () => void;
  36 }
  37
  38 type MPVPanelProps = MPVHideablePanelDataProps & MPVHideablePanelActionProps;
  39
  40 const MPVHideablePanel = ({doHidePanel, name, visible, ...props}: MPVPanelProps) =>
  41     visible
  42     ? <>
  43         {React.cloneElement((props.children as ReactElement), { doHidePanel, panelName: name })}
  44     </>
  45     : null;
  46
  47 interface MPVPanelContentDataProps {
  48     panelName?: string;
  49     children: ReactElement;
  50 }
  51
  52 interface MPVPanelContentActionProps {
  53     doHidePanel?: () => void;
  54 }
  55
  56 type MPVPanelContentProps = MPVPanelContentDataProps & MPVPanelContentActionProps & GridProps;
  57
  58 // Grid item compatible component for layout and MPV props passing
  59 export const MPVPanelContent = ({doHidePanel, panelName, ...props}: MPVPanelContentProps) =>
  60     <Grid item {...props}>
  61         {React.cloneElement(props.children, { doHidePanel, panelName })}
  62     </Grid>;
  63
  64 export interface MPVContainerDataProps {
  65     panelNames?: string[];
  66 }
  67
  68 type MPVContainerProps = MPVContainerDataProps & GridProps;
  69
  70 // Grid container compatible component that also handles panel toggling.
  71 const MPVContainerComponent = ({children, panelNames, classes, ...props}: MPVContainerProps & WithStyles<CssRules>) => {
  72     if (children === undefined || children === null || children === {}) {
  73         children = [];
  74     } else if (!isArray(children)) {
  75         children = [children];
  76     }
  77     const visibility = (children as ReactNodeArray).map(() => true);
  78     const [panelVisibility, setPanelVisibility] = useState<boolean[]>(visibility);
  79
  80     let panels: JSX.Element[] = [];
  81     let toggles: JSX.Element[] = [];
  82
  83     if (isArray(children)) {
  84         for (let idx = 0; idx < children.length; idx++) {
  85             const toggleFn = (idx: number) => () => {
  86                 setPanelVisibility([
  87                     ...panelVisibility.slice(0, idx),
  88                     !panelVisibility[idx],
  89                     ...panelVisibility.slice(idx+1)
  90                 ])
  91             };
  92             const toggleIcon = panelVisibility[idx]
  93                 ? <VisibleIcon className={classNames(classes.buttonIcon)} />
  94                 : <InvisibleIcon className={classNames(classes.buttonIcon)}/>
  95             const panelName = panelNames === undefined
  96                 ? `Panel ${idx+1}`
  97                 : panelNames[idx] || `Panel ${idx+1}`;
  98             const toggleVariant = panelVisibility[idx]
  99                 ? "raised"
 100                 : "flat";
 101             const toggleTooltip = panelVisibility[idx]
 102                 ? `Hide ${panelName} panel`
 103                 : `Show ${panelName} panel`;
 104
 105             toggles = [
 106                 ...toggles,
 107                 <Tooltip title={toggleTooltip} disableFocusListener>
 108                     <Button variant={toggleVariant} size="small" color="primary"
 109                         className={classNames(classes.button)}
 110                         onClick={toggleFn(idx)}>
 111                             {panelName}
 112                             {toggleIcon}
 113                     </Button>
 114                 </Tooltip>
 115             ];
 116
 117             const aPanel =
 118                 <MPVHideablePanel visible={panelVisibility[idx]} name={panelName} doHidePanel={toggleFn(idx)}>
 119                     {children[idx]}
 120                 </MPVHideablePanel>;
 121             panels = [...panels, aPanel];
 122         };
 123     };
 124
 125     return <Grid container {...props}>
 126         <Grid item>
 127             { toggles }
 128         </Grid>
 129         { panelVisibility.includes(true)
 130             ? panels
 131             : <Grid container alignItems='center' justify='center'>
 132                 <DefaultView messages={["All panels are hidden.", "Click on the buttons above to show them."]} icon={InfoIcon} />
 133             </Grid> }
 134     </Grid>;
 135 };
 136
 137 export const MPVContainer = withStyles(styles)(MPVContainerComponent);