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