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, useRef } 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 TabPanelProps = {
  33   children: React.ReactNode;
  34   value: number;
  35   index: number;
  36 };
  37
  38 type TabbedListProps<T> = {
  39     tabbedListContents: Record<string, T[]>;
  40     injectedStyles?: string;
  41     selectedIndex?: number;
  42     selectedTab?: number;
  43     handleSelect?: (selection: T) => React.MouseEventHandler<HTMLElement> | undefined;
  44     renderListItem?: (item: T) => React.ReactNode;
  45     handleTabChange?: (event: React.SyntheticEvent, newValue: number) => void;
  46 };
  47
  48 export const TabbedList = withStyles(tabbedListStyles)(<T, _>({ tabbedListContents, selectedIndex, selectedTab, injectedStyles, classes, handleSelect, renderListItem, handleTabChange }: TabbedListProps<T> & WithStyles<TabbedListClasses>) => {
  49     const tabNr = selectedTab || 0;
  50     const listRefs = useRef<HTMLDivElement[]>([]);
  51     const tabLabels = Object.keys(tabbedListContents);
  52
  53     useEffect(() => {
  54         if (selectedIndex !== undefined && listRefs.current[selectedIndex]) {
  55             listRefs.current[selectedIndex].scrollIntoView({ behavior: 'smooth', block: 'center' });
  56         }
  57     }, [selectedIndex]);
  58
  59     return (
  60         <div className={classNames(classes.root, injectedStyles)}>
  61             <div className={classes.tabs}>
  62                 <Tabs
  63                     value={tabNr}
  64                     onChange={handleTabChange}
  65                     fullWidth
  66                 >
  67                     {tabLabels.map((label) => (
  68                         <Tab label={label} />
  69                     ))}
  70                 </Tabs>
  71             </div>
  72             <TabPanel
  73                 value={tabNr}
  74                 index={tabNr}
  75             >
  76                 <List className={classes.list}>
  77                     {tabbedListContents[tabLabels[tabNr]].map((item, i) => (
  78                       <div ref={(el) => { if (!!el) listRefs.current[i] = el}}>
  79                         <ListItem
  80                         className={classes.listItem}
  81                         selected={i === selectedIndex}
  82                         onClick={handleSelect && handleSelect(item)}
  83                         >
  84                           {renderListItem ? renderListItem(item) : JSON.stringify(item)}
  85                         </ListItem>
  86                       </div>
  87                     ))}
  88                 </List>
  89             </TabPanel>
  90         </div>
  91     );
  92 });
  93
  94 const TabPanel = ({ children, value, index }: TabPanelProps) => {
  95     return <div hidden={value !== index}>{value === index && children}</div>;
  96 };