feat(PHC-4380): add row actions #331

lifeomic · Mar 21, 2023 · 6aa899b · 6aa899b
1 parent 37e673e
commit 6aa899b
Show file tree

Hide file tree

Showing 2 changed files with 106 additions and 22 deletions.
diff --git a/src/components/TableModule/ReactTableModule.stories.tsx b/src/components/TableModule/ReactTableModule.stories.tsx
@@ -2,13 +2,20 @@ import React, { useRef } from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import { createColumnHelper, SortingState } from '@tanstack/react-table';
 import { Checkbox } from '../Checkbox';
+import { TableModuleActions } from './TableModuleActions';
+import { IconButton } from '../IconButton';
+import { Share, Trash } from '@lifeomic/chromicons';
+import { Button } from '../Button';
+import { TableActionDivider } from './TableActionDivider';
+import { Tooltip } from '../Tooltip';
 
 import { ReactTableModule } from './ReactTableModule';
 
 export default {
   title: 'Components/TableModule2',
   component: ReactTableModule,
   argTypes: {},
+  subcomponents: { TableModuleActions, TableActionDivider },
 } as ComponentMeta<typeof ReactTableModule>;
 
 type Food = {
@@ -161,7 +168,6 @@ export const ManualSort: ComponentStory<typeof ReactTableModule> = (args) => {
   React.useEffect(() => {
     const sort = sorting?.[0];
     const index = sort?.id.toLowerCase();
-    console.log('sorting', sort);
     if (sort && index) {
       setSortedData(
         [...data].sort((a: any, b: any) => {
@@ -214,6 +220,55 @@ export const DefaultSort: ComponentStory<typeof ReactTableModule> = (args) => {
   );
 };
 
+export const HoverActions = Template.bind({});
+HoverActions.args = {
+  data,
+  columns,
+  rowActions: (row: any) => (
+    <>
+      <Button variant="text" color="inverse" style={{ marginRight: '8px' }}>
+        Revoke
+      </Button>
+      <TableActionDivider />
+      <Tooltip title="Share">
+        <IconButton
+          aria-label="Share"
+          icon={Share}
+          color="inverse"
+          onClick={() => console.log(`search ${row}!`)}
+        />
+      </Tooltip>
+      <Tooltip title="Trash">
+        <IconButton
+          aria-label="Trash"
+          icon={Trash}
+          color="inverse"
+          onClick={() => console.log(`trash ${row}!`)}
+        />
+      </Tooltip>
+      {row.fat === '9.0' && (
+        <Tooltip title="Trash">
+          <IconButton
+            aria-label="Trash"
+            icon={Trash}
+            color="inverse"
+            onClick={() => console.log(`trash ${row}!`)}
+          />
+        </Tooltip>
+      )}
+    </>
+  ),
+};
+HoverActions.parameters = {
+  docs: {
+    description: {
+      story: `It is a common design pattern to include actionable buttons for a table row. The
+Table Module exposes a \`rowActions\` prop to help. Hover over a row to view the
+actions toolbar.`,
+    },
+  },
+};
+
 export const RowSelection = Template.bind({});
 const selectionColumn = {
   id: 'select',

diff --git a/src/components/TableModule/ReactTableModule.tsx b/src/components/TableModule/ReactTableModule.tsx
@@ -1,15 +1,13 @@
 import * as React from 'react';
 import clsx from 'clsx';
+import { motion } from 'framer-motion';
 
 import {
   getCoreRowModel,
   getSortedRowModel,
   useReactTable,
   ColumnDef,
   OnChangeFn,
-  TableState,
-  Updater,
-  SortingState,
 } from '@tanstack/react-table';
 
 import {
@@ -42,6 +40,7 @@ export const ReactTableModule = React.memo(
         config,
         className,
         data,
+        onRowClick,
         enableRowSelection,
         enableSorting,
         isLoading = false,
@@ -50,8 +49,10 @@ export const ReactTableModule = React.memo(
         rowRole,
         sortState = { sortKey: null, sortDirection: null },
         maxCellWidth,
+        rowActions,
         rowClickLabel,
         state,
+        noResultsMessage,
         ...rootProps
       },
       forwardedRef
@@ -78,6 +79,7 @@ export const ReactTableModule = React.memo(
         manualSorting,
       });
 
+      // support one level of headers only
       const headers = table.getHeaderGroups()[0].headers;
 
       return (
@@ -88,28 +90,53 @@ export const ReactTableModule = React.memo(
           {...rootProps}
         >
           <thead className={classes.tableHeader}>
-            {table.getHeaderGroups().map((headerGroup) => (
+            <tr
+              className={classes.tableRow}
+              role="row"
+              {...getTestProps(testIds.headerRow)}
+            >
+              {headers.map((header, i) => (
+                <TableHeaderCell
+                  index={i}
+                  key={header.id}
+                  header={{ label: header.id }}
+                  coreHeader={header}
+                  onClick={header.column.getToggleSortingHandler()}
+                  sortDirection={null}
+                  headingsCount={headers.length}
+                ></TableHeaderCell>
+              ))}
+              {(rowActions || onRowClick) && (
+                <TableHeaderCell
+                  header={{
+                    label: '',
+                  }}
+                  index={headers.length + 1}
+                  headingsCount={headers.length}
+                  isSorting={false}
+                  sortDirection={null}
+                />
+              )}
+            </tr>
+          </thead>
+          <tbody role="rowgroup">
+            {!isLoading && data && data.length === 0 && (
               <tr
-                key={headerGroup.id}
-                className={classes.tableRow}
+                className={clsx(classes.tableRow, classes.tableDataRow)}
                 role="row"
-                {...getTestProps(testIds.headerRow)}
+                {...getTestProps(testIds.noResultsRow)}
               >
-                {headerGroup.headers.map((header, i) => (
-                  <TableHeaderCell
-                    index={i}
-                    key={header.id}
-                    header={{ label: header.id }}
-                    coreHeader={header}
-                    onClick={header.column.getToggleSortingHandler()}
-                    sortDirection={null}
-                    headingsCount={headerGroup.headers.length}
-                  ></TableHeaderCell>
-                ))}
+                <motion.td
+                  className={classes.tableRowCell}
+                  colSpan={headers.length}
+                  role="cell"
+                  initial={{ opacity: 0 }}
+                  animate={{ opacity: 1, transition: { duration: 1.5 } }}
+                >
+                  {noResultsMessage || 'No results'}
+                </motion.td>
               </tr>
-            ))}
-          </thead>
-          <tbody role="rowgroup">
+            )}
             {!isLoading &&
               data &&
               table
@@ -118,11 +145,13 @@ export const ReactTableModule = React.memo(
                   <TableModuleRow
                     key={`tableRow-${rowIndex}`}
                     data={row}
+                    onRowClick={onRowClick}
                     rowRole={rowRole}
                     maxCellWidth={maxCellWidth}
                     row={row}
                     headingsLength={headers?.length}
                     cells={row.getVisibleCells()}
+                    rowActions={rowActions}
                     rowClickLabel={rowClickLabel}
                   />
                 ))}