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

lifeomic · Mar 21, 2023 · 6869b9b · 6869b9b
1 parent 37e673e
commit 6869b9b
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 1 deletion.
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
@@ -42,6 +42,7 @@ export const ReactTableModule = React.memo(
         config,
         className,
         data,
+        onRowClick,
         enableRowSelection,
         enableSorting,
         isLoading = false,
@@ -50,6 +51,7 @@ export const ReactTableModule = React.memo(
         rowRole,
         sortState = { sortKey: null, sortDirection: null },
         maxCellWidth,
+        rowActions,
         rowClickLabel,
         state,
         ...rootProps
@@ -118,11 +120,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}
                   />
                 ))}