feat(Table): Add error rows feature

kronostechnologies · Nov 17, 2020 · 9c84934 · 9c84934
1 parent bd43601
commit 9c84934
Show file tree

Hide file tree

Showing 8 changed files with 767 additions and 124 deletions.
diff --git a/packages/react/src/components/table/table-row.tsx b/packages/react/src/components/table/table-row.tsx
@@ -1,16 +1,57 @@
 import React, { CSSProperties, ReactElement } from 'react';
 import { UseTableRowProps } from 'react-table';
+import styled, { css } from 'styled-components';
+
+import { Theme } from '../theme-wrapper/theme-wrapper';
 import { RowProps } from './table';
 
-interface TableRowProps {
+const StyledTableRow = styled.tr<StyledTableRowProps & {theme: Theme}>`
+    border-top: 1px solid ${({ theme }) => theme.greys.grey};
+    ${({ clickable, theme }) => clickable && css`
+        :focus {
+            border-color: ${theme.tokens['focus-border']};
+            box-shadow: ${theme.tokens['focus-border-box-shadow-inset']};
+            outline: none;
+        }
+
+        :hover {
+            background-color: ${theme.greys.grey};
+            cursor: pointer;
+        }
+    `}
+
+    ${({ error, striped, theme }) => striped && !error && css`
+        :nth-child(odd) {
+            background-color: ${theme.greys['colored-white']};
+        }
+    `}
+
+    ${({ error, theme }) => error && css`
+        border: 1px solid ${theme.notifications['error-2.1']};
+        /* TODO fix with next thematization theme.notifications.error4 */
+        background-color: #fcf8f9;
+    `}
+`;
+
+interface StyledTableRowProps {
+    clickable: boolean;
+    error: boolean;
+    striped?: boolean;
+}
+
+interface TableRowProps extends Omit<StyledTableRowProps, 'clickable'> {
     row: UseTableRowProps<{}>;
+    viewIndex: number;
 
     onClick?(row: RowProps): void;
 }
 
-export function TableRow({ row, onClick }: TableRowProps): ReactElement {
+export function TableRow({ error, row, striped, viewIndex, onClick }: TableRowProps): ReactElement {
     return (
-        <tr
+        <StyledTableRow
+            clickable={!!onClick}
+            error={error}
+            striped={striped}
             onClick={() => onClick && onClick(row)}
             {...row.getRowProps()}
             {...(onClick ? { tabIndex: 0, role: 'button' } : {})}
@@ -23,10 +64,10 @@ export function TableRow({ row, onClick }: TableRowProps): ReactElement {
                         className={cell.column.className}
                         {...{ ...cell.getCellProps(), key: `${cell.column.id}-${cell.row.id}` }}
                     >
-                        {cell.render('Cell')}
+                        {cell.render('Cell', { viewIndex })}
                     </td>
                 );
             })}
-        </tr>
+        </StyledTableRow>
     );
 }
diff --git a/packages/react/src/components/table/table.test.tsx b/packages/react/src/components/table/table.test.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import { renderWithProviders } from '@design-elements/test-utils/renderer';
 import { DeviceType } from '../device-context-provider/device-context-provider';
-import { ColumnsProps, Table } from './table';
+import { ColumnsProps, Table, TableProps } from './table';
 
 describe('Table', () => {
     test('has desktop styles', () => {
@@ -36,25 +36,41 @@ describe('Table', () => {
     });
 
     test('has striped styles', () => {
-        const tree = renderWithProviders(
-            <Table striped columns={columns} data={data}/>,
-        );
+        const tree = renderTable(columns, undefined, { striped: true });
 
         expect(tree).toMatchSnapshot();
     });
 
-    test('has small rowType styles', () => {
-        const tree = renderWithProviders(
-            <Table rowType="small" columns={columns} data={data}/>,
-        );
+    test('has small rowSize styles', () => {
+        const tree = renderTable(columns, undefined, { rowSize: 'small' });
+
+        expect(tree).toMatchSnapshot();
+    });
+
+    test('has rowNumbers styles', () => {
+        const tree = renderTable(columns, undefined, { rowNumbers: true });
+
+        expect(tree).toMatchSnapshot();
+    });
+
+    test('has clickable rows styles', () => {
+        const tree = renderTable(columns, undefined, { onRowClick: jest.fn() });
+
+        expect(tree).toMatchSnapshot();
+    });
+
+    test('has error rows styles', () => {
+        const tree = renderWithProviders(<Table<TestData> columns={columns} data={errorData}/>);
 
         expect(tree).toMatchSnapshot();
     });
 });
 
-const renderTable = (columnsArray: ColumnsProps, currentDevice?: DeviceType) => (
+interface TablePropsLite extends Omit<TableProps<TestData>, 'columns' | 'data'> {}
+
+const renderTable = (columnsArray: ColumnsProps, currentDevice?: DeviceType, props?: TablePropsLite) => (
     renderWithProviders(
-        <Table<TestData> columns={columnsArray} data={data}/>,
+        <Table<TestData> columns={columnsArray} data={data} {...props}/>,
         currentDevice,
     )
 );
@@ -99,6 +115,7 @@ const columnsSorted = [
 interface TestData {
     column1: string;
     column2: string;
+    error?: boolean;
 }
 
 const data: TestData[] = [
@@ -115,3 +132,20 @@ const data: TestData[] = [
         column2: 'World',
     },
 ];
+
+const errorData: TestData[] = [
+    {
+        column1: 'Hello',
+        column2: 'World',
+        error: true,
+    },
+    {
+        column1: 'Hello',
+        column2: 'World',
+    },
+    {
+        column1: 'Hello',
+        column2: 'World',
+        error: true,
+    },
+];