services/workbench2/src/components/tabbedList/tabbed-list.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import React, { useEffect, useState } from 'react';
   6 import { Tabs, Tab, List, ListItem, StyleRulesCallback, withStyles } from '@material-ui/core';
   7 import { WithStyles } from '@material-ui/core';
   8 import classNames from 'classnames';
   9 import { ArvadosTheme } from 'common/custom-theme';
  10
  11 type TabbedListClasses = 'root' | 'tabs' | 'list' | 'listItem';
  12
  13 const tabbedListStyles: StyleRulesCallback<TabbedListClasses> = (theme: ArvadosTheme) => ({
  14     root: {
  15         overflowY: 'auto',
  16     },
  17     tabs: {
  18         backgroundColor: theme.palette.background.paper,
  19         position: 'sticky',
  20         top: 0,
  21         zIndex: 1,
  22         borderBottom: '1px solid lightgrey',
  23     },
  24     list: {
  25         overflowY: 'scroll',
  26     },
  27     listItem: {
  28         cursor: 'pointer',
  29     },
  30 });
  31
  32 type SingleTabProps<T> = {
  33     label: string;
  34     items: T[];
  35 };
  36
  37 type TabPanelProps = {
  38   children: React.ReactNode;
  39   value: number;
  40   index: number;
  41 };
  42
  43 type TabbedListProps<T> = {
  44     tabbedListContents: SingleTabProps<T>[];
  45     renderListItem?: (item: T) => React.ReactNode;
  46     injectedStyles?: string;
  47     keypress?: { key: string };
  48     selectedIndex?: number;
  49 };
  50
  51 export const TabbedList = withStyles(tabbedListStyles)(<T, _>({ tabbedListContents, renderListItem, selectedIndex, keypress, injectedStyles, classes }: TabbedListProps<T> & WithStyles<TabbedListClasses>) => {
  52     const [tabNr, setTabNr] = useState(0);
  53
  54     useEffect(() => {
  55       if (keypress) handleKeyPress(keypress.key);
  56     }, [keypress]);
  57
  58     const handleKeyPress = (keypress: string) => {
  59         const numTabs = tabbedListContents.length;
  60         if (keypress === 'Tab') {
  61             setTabNr((tabNr + 1) % numTabs);
  62         }
  63     };
  64
  65     const handleTabChange = (event: React.SyntheticEvent, newValue: number) => {
  66         event.preventDefault();
  67         setTabNr(newValue);
  68     };
  69
  70     return (
  71         <div className={classNames(classes.root, injectedStyles)}>
  72             <div className={classes.tabs}>
  73                 <Tabs
  74                     value={tabNr}
  75                     onChange={handleTabChange}
  76                     fullWidth
  77                 >
  78                     {tabbedListContents.map((tab) => (
  79                         <Tab label={tab.label} />
  80                     ))}
  81                 </Tabs>
  82             </div>
  83             <TabPanel
  84                 value={tabNr}
  85                 index={tabNr}
  86             >
  87                 <List className={classes.list}>
  88                     {tabbedListContents[tabNr].items.map((item, i) => (
  89                         <ListItem
  90                         className={classes.listItem}
  91                         selected={i === selectedIndex}
  92                         >
  93                           {renderListItem ? renderListItem(item) : JSON.stringify(item)}
  94                         </ListItem>
  95                     ))}
  96                 </List>
  97             </TabPanel>
  98         </div>
  99     );
 100 });
 101
 102 const TabPanel = ({ children, value, index }: TabPanelProps) => {
 103     return <div hidden={value !== index}>{value === index && children}</div>;
 104 };