refactor(design-system): migrate data table components

commercetools · Dec 17, 2024 · 4a1cf34 · 4a1cf34
1 parent 5ee5798
commit 4a1cf34
Show file tree

Hide file tree

Showing 5 changed files with 86 additions and 101 deletions.
diff --git a/packages/components/data-table/src/cell.tsx b/packages/components/data-table/src/cell.tsx
@@ -23,15 +23,11 @@ export type TDataCell = {
   isRowCollapsed?: boolean;
 };
 
-const defaultProps: Pick<
-  TDataCell,
-  'isTruncated' | 'shouldRenderBottomBorder'
-> = {
-  isTruncated: false,
-  shouldRenderBottomBorder: true,
-};
-
-const DataCell = (props: TDataCell) => {
+const DataCell = ({
+  isTruncated = false,
+  shouldRenderBottomBorder = true,
+  ...props
+}: TDataCell) => {
   if (props.shouldRenderCollapseButton) {
     warning(
       typeof props.handleRowCollapseClick === 'function',
@@ -51,17 +47,19 @@ const DataCell = (props: TDataCell) => {
     <BaseCell
       onClick={props.onCellClick}
       shouldIgnoreRowClick={props.shouldIgnoreRowClick}
-      shouldClipContent={
-        props.isTruncated && !props.shouldRenderResizingIndicator
-      }
-      shouldRenderBottomBorder={props.shouldRenderBottomBorder}
+      shouldClipContent={isTruncated && !props.shouldRenderResizingIndicator}
+      shouldRenderBottomBorder={shouldRenderBottomBorder}
     >
       <CellInner
         isCondensed={props.isCondensed}
-        isTruncated={props.isTruncated}
+        isTruncated={isTruncated}
         verticalCellAlignment={props.verticalCellAlignment}
         horizontalCellAlignment={props.horizontalCellAlignment}
-        {...filterDataAttributes(props)}
+        {...filterDataAttributes({
+          isTruncated,
+          shouldRenderBottomBorder,
+          ...props,
+        })}
       >
         {props.children}
       </CellInner>
@@ -83,6 +81,4 @@ const DataCell = (props: TDataCell) => {
 };
 DataCell.displayName = 'DataCell';
 
-DataCell.defaultProps = defaultProps;
-
 export default DataCell;
diff --git a/packages/components/data-table/src/data-row.tsx b/packages/components/data-table/src/data-row.tsx
@@ -21,33 +21,28 @@ export type TDataRow<Row extends TRow = TRow> = {
   | 'itemRenderer'
 >;
 
-const defaultItemRenderer = (row: TRow, column: TColumn): ReactNode => {
+const defaultItemRenderer = <Row extends TRow = TRow>(
+  row: TRow,
+  column: TColumn<Row>,
+  _isRowCollapsed: boolean
+): ReactNode => {
   // @ts-ignore
   return row[column.key];
 };
 
-const defaultProps: Pick<
-  TDataRow,
-  | 'isCondensed'
-  | 'shouldClipContent'
-  | 'verticalCellAlignment'
-  | 'horizontalCellAlignment'
-  | 'shouldRenderBottomBorder'
-  | 'itemRenderer'
-> = {
-  isCondensed: true,
-  shouldClipContent: false,
-  verticalCellAlignment: 'top',
-  horizontalCellAlignment: 'left',
-  shouldRenderBottomBorder: true,
-  itemRenderer: defaultItemRenderer,
-};
-
 type TColumnResizingContext = {
   getIsColumnBeingResized: (columnIndex: number) => boolean;
 };
 
-const DataRow = <Row extends TRow = TRow>(props: TDataRow<Row>) => {
+const DataRow = <Row extends TRow = TRow>({
+  isCondensed = true,
+  shouldClipContent = false,
+  verticalCellAlignment = 'top',
+  horizontalCellAlignment = 'left',
+  shouldRenderBottomBorder = true,
+  itemRenderer = defaultItemRenderer,
+  ...props
+}: TDataRow<Row>) => {
   const { getIsColumnBeingResized } = useContext(
     ColumnResizingContext
   ) as TColumnResizingContext;
@@ -81,11 +76,11 @@ const DataRow = <Row extends TRow = TRow>(props: TDataRow<Row>) => {
           key={`${props.row.id}-${column.key}`}
           data-testid={`cell-${props.rowIndex}-${column.key}`}
           isTruncated={column.isTruncated && isRowCollapsed}
-          isCondensed={props.isCondensed}
+          isCondensed={isCondensed}
           isRowCollapsed={isRowCollapsed}
-          verticalCellAlignment={props.verticalCellAlignment}
+          verticalCellAlignment={verticalCellAlignment}
           horizontalCellAlignment={
-            column.align ? column.align : props.horizontalCellAlignment
+            column.align ? column.align : horizontalCellAlignment
           }
           shouldIgnoreRowClick={column.shouldIgnoreRowClick}
           handleRowCollapseClick={handleRowCollapseClick}
@@ -98,19 +93,18 @@ const DataRow = <Row extends TRow = TRow>(props: TDataRow<Row>) => {
               ? () => props.onRowClick?.(props.row, props.rowIndex, column.key)
               : undefined
           }
-          shouldRenderBottomBorder={props.shouldRenderBottomBorder}
+          shouldRenderBottomBorder={shouldRenderBottomBorder}
           shouldRenderResizingIndicator={getIsColumnBeingResized(columnIndex)}
         >
           {column.renderItem
             ? column.renderItem(props.row, isRowCollapsed)
-            : props.itemRenderer(props.row, column, isRowCollapsed)}
+            : itemRenderer(props.row, column, isRowCollapsed)}
         </DataCell>
       ))}
     </TableRow>
   );
 };
 
-DataRow.defaultProps = defaultProps;
 DataRow.displayName = 'DataRow';
 
 export default DataRow;
diff --git a/packages/components/data-table/src/data-table.stories.tsx b/packages/components/data-table/src/data-table.stories.tsx
@@ -1,6 +1,6 @@
 import { useMemo, useState } from 'react';
 import type { Meta, StoryFn } from '@storybook/react';
-import DataTable from './data-table';
+import DataTable, { type TColumn } from './data-table';
 
 import CheckboxInput from '../../inputs/checkbox-input';
 
@@ -172,7 +172,6 @@ export const BasicExample: Story = (args) => {
         // label: <CheckboxInput onChange={() => {}} />,
         shouldIgnoreRowClick: true,
         align: 'center',
-        // @ts-expect-error
         renderItem: (row) => (
           <CheckboxInput
             isChecked={checkedRowsState[row.id]}
@@ -186,8 +185,8 @@ export const BasicExample: Story = (args) => {
         ),
         disableResizing: true,
       },
-      ...columns,
-    ];
+      ...(columns || []),
+    ] as TColumn[];
   }, [columns, checkedRowsState]);
 
   const onSortRequest = (key: SortState['key'], dir: SortState['dir']) => {
@@ -200,7 +199,6 @@ export const BasicExample: Story = (args) => {
         <DataTable
           {...args}
           rows={rows}
-          // @ts-expect-error
           columns={tableColumns}
           sortedBy={sort.key}
           sortDirection={sort.dir}

diff --git a/packages/components/data-table/src/data-table.tsx b/packages/components/data-table/src/data-table.tsx
@@ -47,26 +47,6 @@ const shouldRenderRowBottomBorder = (
   return false;
 };
 
-const defaultProps: Pick<
-  TDataTableProps,
-  | 'columns'
-  | 'isCondensed'
-  | 'wrapHeaderLabels'
-  | 'horizontalCellAlignment'
-  | 'verticalCellAlignment'
-  | 'disableSelfContainment'
-  | 'itemRenderer'
-> = {
-  columns: [],
-  isCondensed: true,
-  wrapHeaderLabels: true,
-  verticalCellAlignment: 'top',
-  horizontalCellAlignment: 'left',
-  disableSelfContainment: false,
-  // @ts-ignore
-  itemRenderer: (row, column) => row[column.key],
-};
-
 export type TColumn<Row extends TRow = TRow> = {
   /**
    * The unique key of the column that is used to identify your data type.
@@ -176,7 +156,7 @@ export type TDataTableProps<Row extends TRow = TRow> = {
    *
    * [Colum signatures with description](/?path=/docs/components-datatable-readme--props#signatures)
    */
-  columns: TColumn<Row>[];
+  columns?: TColumn<Row>[];
   /**
    * The columns of the nested items to be rendered in the table. Just like the columns, Each object requires a unique `key` which should correspond to property key of
    * the items of `rows` that you want to render under this column, and a `label`
@@ -231,7 +211,7 @@ export type TDataTableProps<Row extends TRow = TRow> = {
    * The default function used to render the content of each item in a cell.
    * In case a column has its own `renderItem` render function, it will take precedence over this function.
    */
-  itemRenderer: (
+  itemRenderer?: (
     item: Row,
     column: TColumn<Row>,
     isRowCollapsed: boolean
@@ -274,14 +254,27 @@ export type TDataTableProps<Row extends TRow = TRow> = {
   maxExpandableHeight?: number;
 };
 
-const DataTable = <Row extends TRow = TRow>(props: TDataTableProps<Row>) => {
-  const { columns, isCondensed } = useDataTableManagerContext();
-  const isValueFromProvider = Boolean(columns && columns.length !== 0);
-  const columnsData = isValueFromProvider ? columns : props.columns;
+const DataTable = <Row extends TRow = TRow>({
+  columns = [],
+  isCondensed = true,
+  wrapHeaderLabels = true,
+  verticalCellAlignment = 'top',
+  horizontalCellAlignment = 'left',
+  disableSelfContainment = false,
+  // @ts-ignore
+  itemRenderer = (row, column) => row[column.key],
+  ...props
+}: TDataTableProps<Row>) => {
+  const { columns: contextColumns, isCondensed: contextIsCondensed } =
+    useDataTableManagerContext();
+  const isValueFromProvider = Boolean(
+    contextColumns && contextColumns.length !== 0
+  );
+  const columnsData = isValueFromProvider ? contextColumns : columns;
   const condensedValue =
-    isValueFromProvider && isCondensed !== undefined
-      ? isCondensed
-      : props.isCondensed;
+    isValueFromProvider && contextIsCondensed !== undefined
+      ? contextIsCondensed
+      : isCondensed;
 
   //  TODO - initial poc for the nested rows
   // const [openedItemIds, setOpenedItemIds] = useState<string[]>([]);
@@ -332,14 +325,21 @@ const DataTable = <Row extends TRow = TRow>(props: TDataTableProps<Row>) => {
       maxWidth={props.maxWidth}
       maxHeight={props.maxHeight}
       isBeingResized={columnResizingReducer.getIsAnyColumnBeingResized()}
-      disableSelfContainment={!!props.disableSelfContainment}
+      disableSelfContainment={!!disableSelfContainment}
     >
       <TableGrid
         ref={tableRef as LegacyRef<HTMLTableElement>}
-        {...filterDataAttributes(props)}
+        {...filterDataAttributes({
+          isCondensed,
+          wrapHeaderLabels,
+          verticalCellAlignment,
+          horizontalCellAlignment,
+          disableSelfContainment,
+          ...props,
+        })}
         columns={columnsData as TColumn<TRow>[]}
         maxHeight={props.maxHeight}
-        disableSelfContainment={!!props.disableSelfContainment}
+        disableSelfContainment={!!disableSelfContainment}
         resizedTotalWidth={resizedTotalWidth}
       >
         <ColumnResizingContext.Provider value={columnResizingReducer}>
@@ -348,15 +348,17 @@ const DataTable = <Row extends TRow = TRow>(props: TDataTableProps<Row>) => {
               {columnsData.map((column) => (
                 <HeaderCell
                   key={column.key}
-                  shouldWrap={props.wrapHeaderLabels}
+                  shouldWrap={wrapHeaderLabels}
                   isCondensed={condensedValue}
                   iconComponent={column.headerIcon}
                   onColumnResized={props.onColumnResized}
                   disableResizing={column.disableResizing}
                   horizontalCellAlignment={
-                    column.align ? column.align : props.horizontalCellAlignment
+                    column.align ? column.align : horizontalCellAlignment
                   }
-                  disableHeaderStickiness={props.disableHeaderStickiness}
+                  disableHeaderStickiness={Boolean(
+                    props.disableHeaderStickiness
+                  )}
                   columnWidth={column.width}
                   /* Sorting Props */
                   onClick={props.onSortChange && props.onSortChange}
@@ -404,14 +406,15 @@ const DataTable = <Row extends TRow = TRow>(props: TDataTableProps<Row>) => {
             {props.rows.map((row, rowIndex) => (
               <DataRow<Row>
                 {...props}
+                itemRenderer={itemRenderer}
                 isCondensed={condensedValue}
                 columns={columnsData}
                 row={row}
                 key={row.id}
                 rowIndex={rowIndex}
                 shouldClipContent={
                   columnResizingReducer.getIsAnyColumnBeingResized() ||
-                  hasTableBeenResized
+                  Boolean(hasTableBeenResized)
                 }
                 shouldRenderBottomBorder={shouldRenderRowBottomBorder(
                   rowIndex,
@@ -427,7 +430,7 @@ const DataTable = <Row extends TRow = TRow>(props: TDataTableProps<Row>) => {
         <Footer
           data-testid="footer"
           isCondensed={condensedValue}
-          horizontalCellAlignment={props.horizontalCellAlignment}
+          horizontalCellAlignment={horizontalCellAlignment}
           resizedTotalWidth={resizedTotalWidth}
         >
           {props.footer}
@@ -437,7 +440,6 @@ const DataTable = <Row extends TRow = TRow>(props: TDataTableProps<Row>) => {
   );
 };
 
-DataTable.defaultProps = defaultProps;
 DataTable.displayName = 'DataTable';
 
 export default DataTable;
diff --git a/packages/components/data-table/src/header-cell.tsx b/packages/components/data-table/src/header-cell.tsx
@@ -119,28 +119,24 @@ export type THeaderCell = {
   iconComponent?: ReactNode;
 };
 
-const defaultProps: Pick<
-  THeaderCell,
-  'sortDirection' | 'disableHeaderStickiness' | 'horizontalCellAlignment'
-> = {
-  sortDirection: 'desc',
-  disableHeaderStickiness: false,
-  horizontalCellAlignment: 'left',
-};
-
-const HeaderCell = (props: THeaderCell) => {
+const HeaderCell = ({
+  sortDirection = 'desc',
+  disableHeaderStickiness = false,
+  horizontalCellAlignment = 'left',
+  ...props
+}: THeaderCell) => {
   let sortableHeaderProps = {};
   let SortingIcon!: typeof ArrowDownIcon;
 
   if (props.isSortable) {
     const isActive = props.sortedBy === props.columnKey;
     const nextSortDirection =
-      !isActive || props.sortDirection === 'desc' ? 'asc' : 'desc';
-    SortingIcon = props.sortDirection === 'desc' ? ArrowDownIcon : ArrowUpIcon;
+      !isActive || sortDirection === 'desc' ? 'asc' : 'desc';
+    SortingIcon = sortDirection === 'desc' ? ArrowDownIcon : ArrowUpIcon;
 
     sortableHeaderProps = {
       as: 'button',
-      label: props.sortDirection,
+      label: sortDirection,
       onClick: () =>
         props.onClick && props.onClick(props.columnKey, nextSortDirection),
       isActive,
@@ -159,12 +155,12 @@ const HeaderCell = (props: THeaderCell) => {
       columnKey={props.columnKey}
       onColumnResized={props.onColumnResized}
       disableResizing={props.disableResizing}
-      disableHeaderStickiness={props.disableHeaderStickiness}
+      disableHeaderStickiness={disableHeaderStickiness}
     >
       <HeaderCellInner
         shouldWrap={props.shouldWrap}
         isCondensed={props.isCondensed}
-        horizontalCellAlignment={props.horizontalCellAlignment}
+        horizontalCellAlignment={horizontalCellAlignment}
         {...sortableHeaderProps}
       >
         <HeaderLabelWrapper>
@@ -198,6 +194,5 @@ const HeaderCell = (props: THeaderCell) => {
   );
 };
 HeaderCell.displayName = 'HeaderCell';
-HeaderCell.defaultProps = defaultProps;
 
 export default HeaderCell;