fix: improve action column

getlago · Jul 26, 2024 · 2613da3 · 2613da3
1 parent a520a8d
commit 2613da3
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 29 deletions.
diff --git a/src/components/designSystem/Table/Table.tsx b/src/components/designSystem/Table/Table.tsx
@@ -8,7 +8,7 @@ import {
 import { MouseEvent, ReactNode, useRef } from 'react'
 import styled from 'styled-components'
 
-import { Button, ButtonProps, Popper, Skeleton, Typography } from '~/components/designSystem'
+import { Button, IconName, Popper, Skeleton, Tooltip, Typography } from '~/components/designSystem'
 import { GenericPlaceholder, GenericPlaceholderProps } from '~/components/GenericPlaceholder'
 import { useInternationalization } from '~/hooks/core/useInternationalization'
 import { useListKeysNavigation } from '~/hooks/ui/useListKeyNavigation'
@@ -45,6 +45,15 @@ type DataItem = {
   id: string
 }
 
+export type ActionItem<T> = {
+  title: string | ReactNode
+  onAction: (item: T) => void
+  startIcon?: IconName
+  disabled?: boolean
+  tooltip?: string
+  tooltipListener?: boolean
+}
+
 interface TableProps<T> {
   name: string
   data: T[]
@@ -57,11 +66,7 @@ interface TableProps<T> {
     errorState?: Partial<GenericPlaceholderProps>
   }
   onRowAction?: (item: T) => void
-  actionColumn?: Array<{
-    title: string | ReactNode
-    startIcon?: ButtonProps['startIcon']
-    onAction: (item: T) => void
-  }>
+  actionColumn?: (item: T) => Array<ActionItem<T> | null>
   /**
    * 'sm' = 4px ; 'md' = 16px ; 'lg' = 48px
    * @default 'lg'
@@ -254,21 +259,43 @@ export const Table = <T extends DataItem>({
                       >
                         {({ closePopper }) => (
                           <MenuPopper data-id={`${TABLE_ID}-popper`}>
-                            {actionColumn.map((action, j) => (
-                              <Button
-                                fullWidth
-                                key={`${TABLE_ID}-action-${i}-${j}`}
-                                startIcon={action.startIcon}
-                                variant="quaternary"
-                                align="left"
-                                onClick={async () => {
-                                  await action.onAction(item)
-                                  closePopper()
-                                }}
-                              >
-                                {action.title}
-                              </Button>
-                            ))}
+                            {actionColumn(item)
+                              .filter((action) => !!action)
+                              .map((action, j) => {
+                                if (!action) {
+                                  return
+                                }
+
+                                const button = (
+                                  <Button
+                                    fullWidth
+                                    startIcon={action.startIcon}
+                                    variant="quaternary"
+                                    align="left"
+                                    disabled={action.disabled}
+                                    onClick={async () => {
+                                      await action.onAction(item)
+                                      closePopper()
+                                    }}
+                                  >
+                                    {action.title}
+                                  </Button>
+                                )
+
+                                if (action.tooltip) {
+                                  return (
+                                    <Tooltip
+                                      key={`${TABLE_ID}-action-${i}-${j}`}
+                                      title={action.tooltip}
+                                      disableHoverListener={action.tooltipListener}
+                                    >
+                                      {button}
+                                    </Tooltip>
+                                  )
+                                }
+
+                                return button
+                              })}
                           </MenuPopper>
                         )}
                       </Popper>

diff --git a/src/pages/__devOnly/DesignSystem.tsx b/src/pages/__devOnly/DesignSystem.tsx
@@ -563,14 +563,16 @@ const DesignSystem = () => {
                       },
                     ]}
                     onRowAction={(item) => alert(`You clicked on ${item.id}`)}
-                    actionColumn={[
-                      {
-                        title: 'Edit',
-                        startIcon: 'pen',
-                        onAction: (item) => {
-                          alert(`You edited ${item.id}`)
-                        },
-                      },
+                    actionColumn={(currentItem) => [
+                      currentItem.amount > 1000
+                        ? {
+                            title: 'Edit',
+                            startIcon: 'pen',
+                            onAction: (item) => {
+                              alert(`You edited ${item.id}`)
+                            },
+                          }
+                        : null,
                       {
                         title: 'Delete',
                         startIcon: 'trash',