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 MPVPanelState {
  67     name: string;
  68     visible?: boolean;
  69 }
  70 interface MPVContainerDataProps {
  71     panelStates?: MPVPanelState[];
  72 }
  73 type MPVContainerProps = MPVContainerDataProps & GridProps;
  74
  75 // Grid container compatible component that also handles panel toggling.
  76 const MPVContainerComponent = ({children, panelStates, classes, ...props}: MPVContainerProps & WithStyles<CssRules>) => {
  77     if (children === undefined || children === null || children === {}) {
  78         children = [];
  79     } else if (!isArray(children)) {
  80         children = [children];
  81     }
  82     const visibility = (children as ReactNodeArray).map((_, idx) =>
  83         !!!panelStates || // if panelStates wasn't passed, default to all visible panels
  84             (panelStates[idx] &&
  85                 (panelStates[idx].visible || panelStates[idx].visible === undefined)));
  86     const [panelVisibility, setPanelVisibility] = useState<boolean[]>(visibility);
  87
  88     let panels: JSX.Element[] = [];
  89     let toggles: JSX.Element[] = [];
  90
  91     if (isArray(children)) {
  92         for (let idx = 0; idx < children.length; idx++) {
  93             const toggleFn = (idx: number) => () => {
  94                 setPanelVisibility([
  95                     ...panelVisibility.slice(0, idx),
  96                     !panelVisibility[idx],
  97                     ...panelVisibility.slice(idx+1)
  98                 ])
  99             };
 100             const toggleIcon = panelVisibility[idx]
 101                 ? <VisibleIcon className={classNames(classes.buttonIcon)} />
 102                 : <InvisibleIcon className={classNames(classes.buttonIcon)}/>
 103             const panelName = panelStates === undefined
 104                 ? `Panel ${idx+1}`
 105                 : (panelStates[idx] && panelStates[idx].name) || `Panel ${idx+1}`;
 106             const toggleVariant = panelVisibility[idx]
 107                 ? "raised"
 108                 : "flat";
 109             const toggleTooltip = panelVisibility[idx]
 110                 ? `Hide ${panelName} panel`
 111                 : `Show ${panelName} panel`;
 112
 113             toggles = [
 114                 ...toggles,
 115                 <Tooltip title={toggleTooltip} disableFocusListener>
 116                     <Button variant={toggleVariant} size="small" color="primary"
 117                         className={classNames(classes.button)}
 118                         onClick={toggleFn(idx)}>
 119                             {panelName}
 120                             {toggleIcon}
 121                     </Button>
 122                 </Tooltip>
 123             ];
 124
 125             const aPanel =
 126                 <MPVHideablePanel visible={panelVisibility[idx]} name={panelName} doHidePanel={toggleFn(idx)}>
 127                     {children[idx]}
 128                 </MPVHideablePanel>;
 129             panels = [...panels, aPanel];
 130         };
 131     };
 132
 133     return <Grid container {...props}>
 134         <Grid item>
 135             { toggles }
 136         </Grid>
 137         { panelVisibility.includes(true)
 138             ? panels
 139             : <Grid container alignItems='center' justify='center'>
 140                 <DefaultView messages={["All panels are hidden.", "Click on the buttons above to show them."]} icon={InfoIcon} />
 141             </Grid> }
 142     </Grid>;
 143 };
 144
 145 export const MPVContainer = withStyles(styles)(MPVContainerComponent);