feat: added col, row & cell styles by its definitions

DevoInc · Sep 19, 2024 · 33d7a62 · 33d7a62
1 parent 6e0cee5
commit 33d7a62
Show file tree

Hide file tree

Showing 25 changed files with 324 additions and 151 deletions.
diff --git a/packages/table/src/core/Cell/Cell.tsx b/packages/table/src/core/Cell/Cell.tsx
@@ -1,18 +1,20 @@
 import * as React from 'react';
+
 import { GIPencilEditFilled } from '@devoinc/genesys-icons';
+import { mergeStyles } from '@devoinc/genesys-ui';
 
-import type { TColDef, TRow } from '../../declarations';
+import type { TCellDef, TColDef, TRow, TRowDef } from '../../declarations';
 import { useRenderContent } from './useRenderContent';
 import { useInitialState } from '../../editors/useInitialState';
 import { TableContext, WrapperContext } from '../../context';
-
 import { StyledCellWrapper } from './StyledCellWrapper';
 import { StyledCell } from './StyledCell';
 import { StyledCellMarker } from './StyledCellMarker';
 
 interface CellProps {
   data: unknown;
   colDef: TColDef;
+  cellDef: TCellDef;
   width?: number;
   height?: number;
   offsetX?: number;
@@ -24,6 +26,7 @@ interface CellProps {
 export const Cell: React.FC<CellProps> = ({
   data,
   colDef,
+  cellDef,
   rowIndex,
   width,
   height,
@@ -34,7 +37,9 @@ export const Cell: React.FC<CellProps> = ({
   const { density, texts, highlightColumnsOnHover } =
     React.useContext(TableContext);
   const { height: wrapperHeight } = React.useContext(WrapperContext);
-  const { onReset } = colDef;
+  const onReset = colDef.onReset;
+  const colStyle = colDef?.style ?? '';
+  const cellStyle = cellDef?.style ?? '';
 
   useInitialState(data, onReset);
 
@@ -53,6 +58,7 @@ export const Cell: React.FC<CellProps> = ({
       aria-selected={isEditMode}
       onDoubleClick={onDoubleClick}
       ref={cellRef}
+      css={mergeStyles(colStyle, cellStyle)}
     >
       <StyledCellWrapper
         as={colDef.editable ? 'button' : 'div'}

diff --git a/packages/table/src/core/Cell/StyledCell.ts b/packages/table/src/core/Cell/StyledCell.ts
@@ -1,4 +1,4 @@
-import styled, { css } from 'styled-components';
+import styled, { css, CSSProp } from 'styled-components';
 
 import { pseudoElementOverlayMixin } from '@devoinc/genesys-ui';
 
@@ -14,6 +14,8 @@ interface StyledCellProps {
   $offsetX: number;
   $width: number;
   $height: number;
+  // TODO: interface only for satisfy the type error with TS and inherit CSSProp
+  css: CSSProp;
 }
 
 export const StyledCell = styled.td.attrs(

diff --git a/packages/table/src/core/Row/Row.tsx b/packages/table/src/core/Row/Row.tsx
@@ -3,28 +3,26 @@ import { VirtualItem, Virtualizer } from '@tanstack/react-virtual';
 import { TableContext } from '../../context/TableContext';
 import { Cell } from '../Cell';
 import { StyledTableRow, type StyledTableRowProps } from './StyledTableRow';
-import { getRowDef } from '../../helpers';
-import { TStateRow } from '../../declarations';
+import { getCellDef, getRowDef } from '../../helpers';
+import { TColDef, TRowDef, TStateRow } from '../../declarations';
 
 interface RowProps extends StyledTableRowProps {
-  data: { [key: string]: unknown };
+  rowData: { [key: string]: unknown };
   columnVirtualizer: Virtualizer<HTMLDivElement, Element>;
   virtualRow: VirtualItem;
   state?: TStateRow;
 }
 
 export const Row: React.FC<RowProps> = ({
   columnVirtualizer,
-  data,
+  rowData,
   isAfterRow,
   isDragging,
   state = 'enabled',
   virtualRow,
 }) => {
-  const { striped, colDefs, rowDefs } = React.useContext(TableContext);
-
-  const rowDef = getRowDef(rowDefs, data.id as string);
-
+  const { striped, colDefs, rowDefs, cellDefs } = React.useContext(TableContext);
+  const rowDef = (getRowDef(rowDefs, rowData.id as string) ?? {}) as TRowDef;
   return (
     <StyledTableRow
       $height={virtualRow.size}
@@ -36,36 +34,44 @@ export const Row: React.FC<RowProps> = ({
       isDragging={isDragging}
       $state={state}
       $striped={striped}
+      css={rowDef?.style}
     >
       {rowDef?.cellRenderer ? (
         <Cell
           colDef={{
             id: 'afterRow',
             cellRenderer: rowDef.cellRenderer,
           }}
+          cellDef={{
+            colId: 'afterRow',
+            rowId: rowDef.id,
+          }}
           height={virtualRow.size}
           key={`cell-0`}
           offsetX={0}
           width={columnVirtualizer.getTotalSize()}
           rowIndex={virtualRow.index}
-          row={data}
+          row={rowData}
           data={null}
           colSpan={colDefs.length}
         />
       ) : (
         columnVirtualizer
           .getVirtualItems()
           .map((virtualColumn: VirtualItem) => {
+            const colDef = (colDefs[virtualColumn.index] ?? {}) as TColDef;
+            const cellDef = getCellDef(cellDefs, colDef.id, rowDef.id);
             return (
               <Cell
-                colDef={colDefs[virtualColumn.index]}
-                data={data[colDefs[virtualColumn.index].id] ?? ''}
+                colDef={colDef}
+                cellDef={cellDef}
+                data={rowData[colDef.id] ?? ''}
                 height={virtualRow.size}
                 key={`cell-${virtualColumn.key}`}
                 offsetX={virtualColumn.start}
                 width={virtualColumn.size}
                 rowIndex={virtualRow.index}
-                row={data}
+                row={rowData}
               />
             );
           })

diff --git a/packages/table/src/core/Row/StyledTableRow.ts b/packages/table/src/core/Row/StyledTableRow.ts
@@ -1,5 +1,5 @@
 import React from 'react';
-import styled, { css } from 'styled-components';
+import styled, { css, CSSProp } from 'styled-components';
 import {
   pseudoElementMixin,
   pseudoElementOverlayMixin,
@@ -18,6 +18,8 @@ export interface StyledTableRowProps {
   transform?: React.CSSProperties['transform'];
   $width?: React.CSSProperties['width'];
   $hide?: boolean;
+  // TODO: interface only for satisfy the type error with TS and inherit CSSProp
+  css?: CSSProp;
 }
 
 export const StyledTableRow = styled.tr.attrs<StyledTableRowProps>(

diff --git a/packages/table/src/core/Table/Table.tsx b/packages/table/src/core/Table/Table.tsx
@@ -12,6 +12,7 @@ export const Table: React.FC<TableProps> = ({
   defaultColDef,
   colDefs = [],
   rowDefs = [],
+  cellDefs = [],
   columnPresets = [],
   density = 'default',
   striped = false,
@@ -53,6 +54,7 @@ export const Table: React.FC<TableProps> = ({
         onFilter,
         rowHeight,
         rowDefs,
+        cellDefs,
       }}
     >
       <WrapperContextProvider>

diff --git a/packages/table/src/core/TableBody/TableBody.tsx b/packages/table/src/core/TableBody/TableBody.tsx
@@ -32,7 +32,7 @@ export const TableBody: React.FC<TableBodyProps> = ({
           <Row
             key={'tb_' + virtualRow.key}
             columnVirtualizer={columnVirtualizer}
-            data={data[virtualRow.index]}
+            rowData={data[virtualRow.index]}
             virtualRow={virtualRow}
           />
         );

diff --git a/packages/table/src/core/utils/columns.ts b/packages/table/src/core/utils/columns.ts
@@ -1,5 +1,5 @@
 import { VirtualItem } from '@tanstack/react-virtual';
-import type { TColDef, TDefaultColDef, TPreset } from '../../declarations';
+import type { TColDef, TDefaultColDef, TColPreset } from '../../declarations';
 
 export const getColDefByID = (
   colDefs: TColDef[] = [],
@@ -13,7 +13,7 @@ export const getColDefByID = (
 export const getCollatedColumns = (
   defaultColDef: TDefaultColDef,
   column: TColDef,
-  presets: TPreset[] = [],
+  presets: TColPreset[] = [],
 ): TColDef => {
   const preset = presets.find((element) => element.id === column.preset);
   return { ...defaultColDef, ...preset, ...column };

diff --git a/packages/table/src/declarations.ts b/packages/table/src/declarations.ts
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { CSSProp } from 'styled-components';
 
 import { DateContext } from './valueFormatters/date';
 
@@ -26,6 +27,8 @@ export type TStateRow =
   | 'created'
   | 'deleted';
 
+// Definitions
+
 export type TColDef = {
   id: string;
   headerName?: string;
@@ -55,14 +58,13 @@ export type TColDef = {
   sort?: 'asc' | 'desc';
   sortIndex?: React.ReactNode;
 
-  expandedRow?: boolean;
   isDragging?: boolean;
   onReset?: (initialValue: unknown) => void;
   tooltipField?: string;
   resizable?: boolean;
+  minWidth?: number;
+  width?: number;
   rowHeight?: number;
-  minWidth?: number | string;
-  width?: number | string;
   align?: TCellHorAlign;
   verticalAlign?: TCellVerAlign;
   textAlign?: React.CSSProperties['textAlign'];
@@ -71,29 +73,34 @@ export type TColDef = {
   toEdge?: boolean;
   headerOnFilterPosition?: boolean;
   hide?: boolean;
+  style?: CSSProp;
 };
 
 export type TRowDef = {
   hide?: boolean;
   id: string;
-  height?: React.CSSProperties['height'];
+  height?: number;
+  minHeight?: number;
+  isDragging?: boolean;
   cellRenderer?:
     | React.FC<TCellRenderer>
     | (({ value, colDef, rowIndex, row }: TCellRenderer) => React.ReactNode);
+  style?: CSSProp;
 };
 
-export type TAfterRow = {
+export type TCellDef = {
+  colId: string;
+  rowId: string;
   hide?: boolean;
-  id: string;
+  style?: CSSProp;
 };
 
-export type TCellDef = {
-  idColumn: string;
-  idRow: string;
+export type TAfterRow = {
   hide?: boolean;
+  id: string;
 };
 
-export type TPreset = {
+export type TColPreset = {
   id: string;
 } & Omit<TColDef, 'colId'>;
 
@@ -159,9 +166,10 @@ export interface ITable {
   data: TData;
   colDefs?: TColDef[];
   rowDefs?: TRowDef[];
+  cellDefs?: TCellDef[];
   afterRowDefs?: TAfterRow[];
   defaultColDef?: TDefaultColDef;
-  columnPresets?: TPreset[];
+  columnPresets?: TColPreset[];
   context?: {
     [key: string]: unknown;
   };

diff --git a/packages/table/src/helpers/afterRow/addAfterRowToRowDefs.test.ts b/packages/table/src/helpers/afterRow/addAfterRowToRowDefs.test.ts
@@ -0,0 +1,33 @@
+import { describe, test, expect } from 'vitest';
+
+import { TRowDef } from '../../declarations';
+import { addAfterRowToRowDefs } from './addAfterRowToRowDefs';
+
+describe('Add afterrow to row defs', () => {
+  describe('addAfterRowToRowDefs', () => {
+    const cases: [string, TRowDef[], string, TRowDef[]][] = [
+      [
+        'add element with rowdefs empty',
+        [],
+        '1',
+        [{ id: `afterRow-1`, hide: false }],
+      ],
+      [
+        'add element with rowdefs > 0',
+        [{ id: `afterRow-1`, hide: false }],
+        '2',
+        [
+          { id: `afterRow-1`, hide: false },
+          { id: `afterRow-2`, hide: false },
+        ],
+      ],
+      ['add element with rowdefs empty', null, '1', undefined],
+    ];
+
+    test.each(cases)('%s', (_title, rowDefs, id, expected) => {
+      expect(addAfterRowToRowDefs(rowDefs, id, () => null, 13)).toMatchObject(
+        expected,
+      );
+    });
+  });
+});
diff --git a/packages/table/src/helpers/afterRow/addAfterRowToRowDefs.ts b/packages/table/src/helpers/afterRow/addAfterRowToRowDefs.ts
@@ -0,0 +1,18 @@
+import * as React from 'react';
+
+import type { TCellRenderer, TRowDef } from '../../declarations';
+
+export const addAfterRowToRowDefs = (
+  rowDefs: TRowDef[],
+  id: string,
+  afterRowRenderer:
+    | React.FC<TCellRenderer>
+    | (({ value, colDef, rowIndex, row }: TCellRenderer) => React.ReactNode),
+  afterRowHeight: number,
+) =>
+  rowDefs?.concat({
+    id: `afterRow-${id}`,
+    hide: false,
+    cellRenderer: afterRowRenderer,
+    height: afterRowHeight,
+  });