feat: add onClickRow prop for B3Table component (#174)

* feat: turn product rows into clickable elements * feat: implement clickable row on orders component * fix: avoid redeclaration of styles
bigcommerce · Mar 15, 2023 · 5108598 · 5108598
1 parent 1f9c494
commit 5108598
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 29 deletions.
diff --git a/apps/storefront/src/components/table/B3PaginationTable.tsx b/apps/storefront/src/components/table/B3PaginationTable.tsx
@@ -56,6 +56,7 @@ interface B3PaginationTableProps<T> {
   labelRowsPerPage?: string,
   itemIsMobileSpacing?: number,
   disableCheckbox?: boolean,
+  onClickRow?: (item: any, index?: number) => void,
   showRowsPerPageOptions?: boolean,
 }
 
@@ -85,6 +86,7 @@ const PaginationTable:<T>(props: B3PaginationTableProps<T>) => ReactElement = ({
   labelRowsPerPage = '',
   itemIsMobileSpacing = 2,
   disableCheckbox = false,
+  onClickRow,
   showPagination = true,
   showRowsPerPageOptions = true,
 }, ref?: Ref<unknown>) => {
@@ -225,6 +227,7 @@ const PaginationTable:<T>(props: B3PaginationTableProps<T>) => ReactElement = ({
       handleSelectOneItem={handleSelectOneItem}
       showBorder={showBorder}
       labelRowsPerPage={labelRowsPerPage}
+      onClickRow={onClickRow}
       showPagination={showPagination}
       showRowsPerPageOptions={showRowsPerPageOptions}
     />

diff --git a/apps/storefront/src/components/table/B3Table.tsx b/apps/storefront/src/components/table/B3Table.tsx
@@ -67,9 +67,14 @@ interface TableProps<T> {
   selectCheckbox?: Array<number | string>,
   labelRowsPerPage?: string,
   disableCheckbox?: boolean,
+  onClickRow?: (item: any, index?: number) => void,
   showRowsPerPageOptions?: boolean,
 }
 
+const MOUSE_POINTER_STYLE = {
+  cursor: 'pointer',
+}
+
 export const B3Table:<T>(props: TableProps<T>) => ReactElement = ({
   tableFixed = true,
   columnItems,
@@ -102,13 +107,15 @@ export const B3Table:<T>(props: TableProps<T>) => ReactElement = ({
   selectCheckbox = [],
   labelRowsPerPage = '',
   disableCheckbox = false,
+  onClickRow,
   showRowsPerPageOptions = true,
 }) => {
   const {
     offset,
     count,
     first,
   } = pagination
+  const clickableRowStyles = typeof onClickRow === 'function' ? MOUSE_POINTER_STYLE : undefined
 
   const handlePaginationChange = (pagination: Pagination) => {
     if (!isLoading) {
@@ -298,6 +305,8 @@ export const B3Table:<T>(props: TableProps<T>) => ReactElement = ({
                     <TableRow
                       key={node[tableKey || 'id']}
                       hover={hover}
+                      onClick={() => onClickRow?.(node, index)}
+                      sx={clickableRowStyles}
                     >
                       {
                         showCheckbox && (

diff --git a/apps/storefront/src/pages/order/Order.tsx b/apps/storefront/src/pages/order/Order.tsx
@@ -182,21 +182,6 @@ const Order = ({
     {
       key: 'orderId',
       title: 'Order',
-      render: (item: ListItem, index: number) => (
-        <Box
-          component="span"
-          sx={{
-            cursor: 'pointer',
-            '&:hover': {
-              textDecoration: 'underline',
-            },
-          }}
-          onClick={() => goToDetail(item, index)}
-        >
-          {item.orderId}
-        </Box>
-      ),
-      width: '10%',
     },
     {
       key: 'poNumber',
@@ -333,6 +318,12 @@ const Order = ({
                 isCompanyOrder={isCompanyOrder}
               />
             )}
+            onClickRow={(item: ListItem, index?: number) => {
+              if (index !== undefined) {
+                goToDetail(item, index)
+              }
+            }}
+            hover
           />
         </Box>
       </B3Sping>

diff --git a/apps/storefront/src/pages/quote/QuotesList.tsx b/apps/storefront/src/pages/quote/QuotesList.tsx
@@ -257,20 +257,6 @@ const QuotesList = () => {
     {
       key: 'quoteNumber',
       title: 'Quote #',
-      render: (item: ListItem) => (
-        <Box
-          component="span"
-          sx={{
-            cursor: 'pointer',
-            '&:hover': {
-              textDecoration: 'underline',
-            },
-          }}
-          onClick={() => goToDetail(item, +item.status)}
-        >
-          {item.quoteNumber}
-        </Box>
-      ),
     },
     {
       key: 'quoteTitle',
@@ -393,6 +379,10 @@ const QuotesList = () => {
                 goToDetail={goToDetail}
               />
             )}
+            onClickRow={(row: ListItem) => {
+              goToDetail(row, +row.status)
+            }}
+            hover
           />
         </Box>
       </B3Sping>