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