From 53d31310d79df12b1386555194a2cc8d52cd5fb2 Mon Sep 17 00:00:00 2001 From: panagiotis vourtsis Date: Thu, 22 Oct 2020 14:26:56 +0300 Subject: [PATCH 1/6] fix(table): improve the overall performance of the table --- src/components/Table/Table.stories.mdx | 37 +- src/components/Table/Table.tsx | 104 +- .../__snapshots__/Table.stories.storyshot | 6248 ++++++++++++++++- .../RenderRowOrNestedRow.tsx | 158 +- .../components/ContentCell/ContentCell.tsx | 64 + .../components/ContentCell/index.ts | 1 + .../ExpandedButtonCell/ExpandedButtonCell.tsx | 45 + .../components/ExpandedButtonCell/index.ts | 1 + .../Table/components/TableCell/TableCell.tsx | 92 +- .../TableRowWrapper/TableRowWrapper.tsx | 65 + .../Table/components/TableRowWrapper/index.ts | 1 + 11 files changed, 6414 insertions(+), 402 deletions(-) create mode 100644 src/components/Table/components/RenderRowOrNestedRow/components/ContentCell/ContentCell.tsx create mode 100644 src/components/Table/components/RenderRowOrNestedRow/components/ContentCell/index.ts create mode 100644 src/components/Table/components/RenderRowOrNestedRow/components/ExpandedButtonCell/ExpandedButtonCell.tsx create mode 100644 src/components/Table/components/RenderRowOrNestedRow/components/ExpandedButtonCell/index.ts create mode 100644 src/components/Table/components/TableRowWrapper/TableRowWrapper.tsx create mode 100644 src/components/Table/components/TableRowWrapper/index.ts diff --git a/src/components/Table/Table.stories.mdx b/src/components/Table/Table.stories.mdx index 9ec223f59..badc74f40 100644 --- a/src/components/Table/Table.stories.mdx +++ b/src/components/Table/Table.stories.mdx @@ -1,7 +1,5 @@ -import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks'; -import { withKnobs, boolean, array, select, text } from '@storybook/addon-knobs'; +import { Meta, Preview, Props, Story } from '@storybook/addon-docs/blocks'; import Table from './Table'; -import Stack from '../storyUtils/Stack'; @@ -125,34 +123,23 @@ Table with expandable rows and nested header type="nested-header" onCheck={console.log} padded + onCheck={g => console.log('on table change: ', g)} topLeftText={'topLeftText'} topRightArea={() => (
top right section
)} - data={[ - { - id: 1, - cells: [ - { content: 'title', widthPercentage: 40 }, - { content: 'firstname' }, - { content: 'lastname' }, - { content: 4.221 }, - ], - expanded: () =>
Hey i am an expandable content
, - }, - { - id: 2, - cells: [ - { content: 'title', widthPercentage: 40 }, - { content: 'firstname' }, - { content: 'lastname' }, - { content: 4.221 }, - ], - expanded: () =>
Hey i am an expandable content
, - }, - ]} + data={new Array(50).fill(null).map((item, index) => ({ + id: index + 1, + cells: [ + { content: 'title', widthPercentage: 40 }, + { content: 'firstname' }, + { content: 'lastname' }, + { content: 4.221 }, + ], + expanded: () =>
Hey i am an expandable content
, + }))} /> diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx index afe6eb34c..c23ab7c62 100644 --- a/src/components/Table/Table.tsx +++ b/src/components/Table/Table.tsx @@ -6,11 +6,10 @@ import rem from 'polished/lib/helpers/rem'; import * as React from 'react'; import useTheme from '../../hooks/useTheme'; import CheckBox from '../CheckBox'; -import RenderRowOrNestedRow from './components/RenderRowOrNestedRow'; import TableCell from './components/TableCell'; import TableRow from './components/TableRow'; import { tableStyle } from './Table.style'; -import { TableRowContext } from './TableRowContext'; +import TableRowWrapper from './components/TableRowWrapper'; export type ContentComponent = (data: Cell) => React.Component | JSX.Element; export type Cell = { @@ -78,28 +77,20 @@ function Table({ setSelectedIds([]); }, [data]); - const onSelectionChange = React.useCallback( - (selections: Selection[]) => { - setSelectedIds(selections); - - if (onCheck) { - onCheck(selections); - } - }, - [onCheck] - ); - - const onSelectionAdd = React.useCallback( - (rowId: Selection) => { - const selections = - selectedIds.indexOf(rowId) === -1 - ? [...selectedIds, rowId] - : selectedIds.filter(item => item !== rowId); - - onSelectionChange(selections); - }, - [onSelectionChange, selectedIds] - ); + /** when the selection of ids change then inform the user if onCheck callback provided **/ + React.useEffect(() => { + if (onCheck) { + onCheck(selectedIds); + } + }, [onCheck, selectedIds]); + + const onSelectionAdd = React.useCallback((rowId: Selection) => { + setSelectedIds((selectedIds: Selection[]) => + selectedIds.indexOf(rowId) === -1 + ? [...selectedIds, rowId] + : selectedIds.filter(item => item !== rowId) + ); + }, []); const columnsHasNumberArr = React.useMemo( () => @@ -138,9 +129,9 @@ function Table({ intermediate={selectedIds.length > 0 && selectedIds.length !== data.length} onClick={() => { if (selectedIds.length === data.length) { - onSelectionChange([]); + setSelectedIds([]); } else { - onSelectionChange(data.map(({ id }) => id)); + setSelectedIds(data.map(({ id }) => id)); } }} /> @@ -209,7 +200,7 @@ function Table({ key={row.id} {...{ row, - selectedIds, + isRowSelected: selectedIds.indexOf(row.id) !== -1, onSelectionAdd, padded, columns, @@ -229,63 +220,4 @@ function Table({ ); } -type TableRowWrapperProps = { - row: Row; - selectedIds: Selection[]; - onSelectionAdd: (selection: Selection) => void; - columnsHasNumberArr: boolean[]; - columnsWithWidth: number[]; - padded: boolean; - onSelectionChangeExist: boolean; - columnCount: number; - columns: string[]; - fixedHeader: boolean; - type: TableType; - expanded: boolean; -}; - -const TableRowWrapper = ({ - row, - selectedIds, - onSelectionAdd, - padded, - columns, - fixedHeader, - type, - columnsHasNumberArr, - columnsWithWidth, - columnCount, - onSelectionChangeExist, - expanded, -}: TableRowWrapperProps) => { - const isRowSelected = React.useMemo(() => selectedIds.indexOf(row.id) !== -1, [ - row.id, - selectedIds, - ]); - const tChange = React.useCallback(() => { - onSelectionAdd(row.id); - }, [onSelectionAdd, row.id]); - - return ( - - {...{ row }} /> - - ); -}; - export default Table; diff --git a/src/components/Table/__snapshots__/Table.stories.storyshot b/src/components/Table/__snapshots__/Table.stories.storyshot index 181f95008..84378ca5d 100644 --- a/src/components/Table/__snapshots__/Table.stories.storyshot +++ b/src/components/Table/__snapshots__/Table.stories.storyshot @@ -40,7 +40,7 @@ exports[`Storyshots Design System/Table Financial Table 1`] = ` className="css-1o8230t-TableRow" > topLeftText
@@ -88,25 +88,25 @@ exports[`Storyshots Design System/Table Financial Table 1`] = ` className="css-1nbzf55-Table" > Title Name Surname Age @@ -117,7 +117,7 @@ exports[`Storyshots Design System/Table Financial Table 1`] = ` className="css-8z679-TableRow" > 4.221 @@ -402,7 +402,7 @@ exports[`Storyshots Design System/Table Fixed Header Table 1`] = ` className="css-1o8230t-TableRow" > topLeftText
@@ -450,25 +450,25 @@ exports[`Storyshots Design System/Table Fixed Header Table 1`] = ` className="css-1nbzf55-Table" > Title Name Surname Age @@ -479,7 +479,7 @@ exports[`Storyshots Design System/Table Fixed Header Table 1`] = ` className="css-8z679-TableRow" > topLeftText
@@ -1112,22 +1112,22 @@ exports[`Storyshots Design System/Table Regular Table with simple rows 1`] = ` className="css-1nbzf55-Table" > Title Name Surname Age @@ -1138,7 +1138,7 @@ exports[`Storyshots Design System/Table Regular Table with simple rows 1`] = ` className="css-8z679-TableRow" > topLeftText
@@ -1548,7 +1548,5959 @@ exports[`Storyshots Design System/Table Table with expandable rows 1`] = ` className="css-10e6370-TableRow" > +
+ + + + + + + + + + + +
+ + + + + + +
+ Title +
+ + title + + 		+
+ Name +
+ + firstname + + 		+
+ Surname +
+ + lastname + + 		+
+ Age +
+ + 4.221 + + 		+
+
+
+ + + +
+
+
+
+
+ + + + +
+ + + + + + + + + + + +
+ + + + + + +
+ Title +
+ + title + + 		+
+ Name +
+ + firstname + + 		+
+ Surname +
+ + lastname + + 		+
+ Age +
+ + 4.221 + + 		+
+
+
+ + + +
+
+
+
+
+ + + + +
+ + + + + + + + + + + +
+ + + + + + +
+ Title +
+ + title + + 		+
+ Name +
+ + firstname + + 		+
+ Surname +
+ + lastname + + 		+
+ Age +
+ + 4.221 + + 		+
+
+
+ + + +
+
+
+
+
+ + + + +
+ + + + + + + + + + + +
+ + + + + + +
+ Title +
+ + title + + 		+
+ Name +
+ + firstname + + 		+
+ Surname +
+ + lastname + + 		+
+ Age +
+ + 4.221 + + 		+
+
+
+ + + +
+
+
+
+
+ + + + +
+ + + + + + + + + + + +
+ + + + + + +
+ Title +
+ + title + + 		+
+ Name +
+ + firstname + + 		+
+ Surname +
+ + lastname + + 		+
+ Age +
+ + 4.221 + + 		+
+
+
+ + + +
+
+
+
+
+ + + + +
+ + + + + + + + + + + +
+ + + + + + +
+ Title +
+ + title + + 		+
+ Name +
+ + firstname + + 		+
+ Surname +
+ + lastname + + 		+
+ Age +
+ + 4.221 + + 		+
+
+
+ + + +
+
+
+
+
+ + + + +
+ + + + + + + + + + + +
+ + + + + + +
+ Title +
+ + title + + 		+
+ Name +
+ + firstname + + 		+
+ Surname +
+ + lastname + + 		+
+ Age +
+ + 4.221 + + 		+
+
+
+ + + +
+
+
+
+
+ + + + +
+ + + + + + + + + + + +
+ + + + + + +
+ Title +
+ + title + + 		+
+ Name +
+ + firstname + + 		+
+ Surname +
+ + lastname + + 		+
+ Age +
+ + 4.221 + + 		+
+
+
+ + + +
+
+
+
+
+ + + + +
+ + + + + + + + + + + +
+ + + + + + +
+ Title +
+ + title + + 		+
+ Name +
+ + firstname + + 		+
+ Surname +
+ + lastname + + 		+
+ Age +
+ + 4.221 + + 		+
+
+
+ + + +
+
+
+
+
+ + + + +
+ + + + + + + + + + + +
+ + + + + + +
+ Title +
+ + title + + 		+
+ Name +
+ + firstname + + 		+
+ Surname +
+ + lastname + + 		+
+ Age +
+ + 4.221 + + 		+
+
+
+ + + +
+
+
+
+
+ + + + +
+ + + + + + + + + + + +
+ + + + + + +
+ Title +
+ + title + + 		+
+ Name +
+ + firstname + + 		+
+ Surname +
+ + lastname + + 		+
+ Age +
+ + 4.221 + + 		+
+
+
+ + + +
+
+
+
+
+ + + + +
+ + + + + + + + + + + +
+ + + + + + +
+ Title +
+ + title + + 		+
+ Name +
+ + firstname + + 		+
+ Surname +
+ + lastname + + 		+
+ Age +
+ + 4.221 + + 		+
+
+
+ + + +
+
+
+
+
+ + + + +
+ + + + + + + + + + + +
+ + + + + + +
+ Title +
+ + title + + 		+
+ Name +
+ + firstname + + 		+
+ Surname +
+ + lastname + + 		+
+ Age +
+ + 4.221 + + 		+
+
+
+ + + +
+
+
+
+
+ + + + +
+ + + + + + + + + + + +
+ + + + + + +
+ Title +
+ + title + + 		+
+ Name +
+ + firstname + + 		+
+ Surname +
+ + lastname + + 		+
+ Age +
+ + 4.221 + + 		+
+
+
+ + + +
+
+
+
+
+ + + + +
+ + + + + + + + + + + +
+ + + + + + +
+ Title +
+ + title + + 		+
+ Name +
+ + firstname + + 		+
+ Surname +
+ + lastname + + 		+
+ Age +
+ + 4.221 + + 		+
+
+
+ + + +
+
+
+
+
+ + + + +
+ + + + + + + + + + + +
+ + + + + + +
+ Title +
+ + title + + 		+
+ Name +
+ + firstname + + 		+
+ Surname +
+ + lastname + + 		+
+ Age +
+ + 4.221 + + 		+
+
+
+ + + +
+
+
+
+
+ + + + +
+ + + + + + + + + + + +
+ + + + + + +
+ Title +
+ + title + + 		+
+ Name +
+ + firstname + + 		+
+ Surname +
+ + lastname + + 		+
+ Age +
+ + 4.221 + + 		+
+
+
+ + + +
+
+
+
+
+ + + + +
+ + + + + + + + + + + +
+ + + + + + +
+ Title +
+ + title + + 		+
+ Name +
+ + firstname + + 		+
+ Surname +
+ + lastname + + 		+
+ Age +
+ + 4.221 + + 		+
+
+
+ + + +
+
+
+
+
+ + + + +
+ + + + + + + + + + + +
+ + + + + + +
+ Title +
+ + title + + 		+
+ Name +
+ + firstname + + 		+
+ Surname +
+ + lastname + + 		+
+ Age +
+ + 4.221 + + 		+
+
+
+ + + +
+
+
+
+
+ + + + +
+ + + + + + + + + + + +
+ + + + + + +
+ Title +
+ + title + + 		+
+ Name +
+ + firstname + + 		+
+ Surname +
+ + lastname + + 		+
+ Age +
+ + 4.221 + + 		+
+
+
+ + + +
+
+
+
+
+ + + + +
+ + + + + + + + + + + +
+ + + + + + +
+ Title +
+ + title + + 		+
+ Name +
+ + firstname + + 		+
+ Surname +
+ + lastname + + 		+
+ Age +
+ + 4.221 + + 		+
+
+
+ + + +
+
+
+
+
+ + + + +
+ + + + + + + + + + + +
+ + + + + + +
+ Title +
+ + title + + 		+
+ Name +
+ + firstname + + 		+
+ Surname +
+ + lastname + + 		+
+ Age +
+ + 4.221 + + 		+
+
+
+ + + +
+
+
+
+
+ + + + +
+ + + + + + + + + + + +
+ + + + + + +
+ Title +
+ + title + + 		+
+ Name +
+ + firstname + + 		+
+ Surname +
+ + lastname + + 		+
+ Age +
+ + 4.221 + + 		+
+
+
+ + + +
+
+
+
+
+ + + + +
+ + + + + + + + + + + +
+ + + + + + +
+ Title +
+ + title + + 		+
+ Name +
+ + firstname + + 		+
+ Surname +
+ + lastname + + 		+
+ Age +
+ + 4.221 + + 		+
+
+
+ + + +
+
+
+
+
+ + + + +
+ + + + + + + + + + + +
+ + + + + + +
+ Title +
+ + title + + 		+
+ Name +
+ + firstname + + 		+
+ Surname +
+ + lastname + + 		+
+ Age +
+ + 4.221 + + 		+
+
+
+ + + +
+
+
+
+
+ + + + +
+ + + + + + + + + + + +
+ + + + + + +
+ Title +
+ + title + + 		+
+ Name +
+ + firstname + + 		+
+ Surname +
+ + lastname + + 		+
+ Age +
+ + 4.221 + + 		+
+
+
+ + + +
+
+
+
+
+ + + + +
+ + + + + + + + + + + +
+ + + + + + +
+ Title +
+ + title + + 		+
+ Name +
+ + firstname + + 		+
+ Surname +
+ + lastname + + 		+
+ Age +
+ + 4.221 + + 		+
+
+
+ + + +
+
+
+
+
+ + + + +
+ + + + + + + + + + + +
+ + + + + + +
+ Title +
+ + title + + 		+
+ Name +
+ + firstname + + 		+
+ Surname +
+ + lastname + + 		+
+ Age +
+ + 4.221 + + 		+
+
+
+ + + +
+
+
+
+
+ + + + +
+ + + + + + + + + + + +
+ + + + + + +
+ Title +
+ + title + + 		+
+ Name +
+ + firstname + + 		+
+ Surname +
+ + lastname + + 		+
+ Age +
+ + 4.221 + + 		+
+
+
+ + + +
+
+
+
+
+ + + + +
+ + + + + + + + + + + +
+ + + + + + +
+ Title +
+ + title + + 		+
+ Name +
+ + firstname + + 		+
+ Surname +
+ + lastname + + 		+
+ Age +
+ + 4.221 + + 		+
+
+
+ + + +
+
+
+
+
+ + + + +
+ + + + + + + + + + + +
+ + + + + + +
+ Title +
+ + title + + 		+
+ Name +
+ + firstname + + 		+
+ Surname +
+ + lastname + + 		+
+ Age +
+ + 4.221 + + 		+
+
+
+ + + +
+
+
+
+
+ + + + +
+ + + + + + + + + + + +
+ + + + + + +
+ Title +
+ + title + + 		+
+ Name +
+ + firstname + + 		+
+ Surname +
+ + lastname + + 		+
+ Age +
+ + 4.221 + + 		+
+
+
+ + + +
+
+
+
+
+ + + + +
+ + + + + + + + + + + +
+ + + + + + +
+ Title +
+ + title + + 		+
+ Name +
+ + firstname + + 		+
+ Surname +
+ + lastname + + 		+
+ Age +
+ + 4.221 + + 		+
+
+
+ + + +
+
+
+
+
+ + + + +
+ + + + + + + + + + + +
+ + + + + + +
+ Title +
+ + title + + 		+
+ Name +
+ + firstname + + 		+
+ Surname +
+ + lastname + + 		+
+ Age +
+ + 4.221 + + 		+
+
+
+ + + +
+
+
+
+
+ + + + +
+ + + + + + + + + + + +
+ + + + + + +
+ Title +
+ + title + + 		+
+ Name +
+ + firstname + + 		+
+ Surname +
+ + lastname + + 		+
+ Age +
+ + 4.221 + + 		+
+
+
+ + + +
+
+
+
+
+ + + + +
+ + + + + + + + + + + +
+ + + + + + +
+ Title +
+ + title + + 		+
+ Name +
+ + firstname + + 		+
+ Surname +
+ + lastname + + 		+
+ Age +
+ + 4.221 + + 		+
+
+
+ + + +
+
+
+
+
+ + + + +
+ + + + + + + + + + + +
+ + + + + + +
+ Title +
+ + title + + 		+
+ Name +
+ + firstname + + 		+
+ Surname +
+ + lastname + + 		+
+ Age +
+ + 4.221 + + 		+
+
+
+ + + +
+
+
+
+
+ + + + +
+ + + + + + + + + + + +
+ + + + + + +
+ Title +
+ + title + + 		+
+ Name +
+ + firstname + + 		+
+ Surname +
+ + lastname + + 		+
+ Age +
+ + 4.221 + + 		+
+
+
+ + + +
+
+
+
+
+ + + + +
+ + + + + + + + + + + +
+ + + + + + +
+ Title +
+ + title + + 		+
+ Name +
+ + firstname + + 		+
+ Surname +
+ + lastname + + 		+
+ Age +
+ + 4.221 + + 		+
+
+
+ + + +
+
+
+
+
+ + + + +
+ + + + + + + + + + + +
+ + + + + + +
+ Title +
+ + title + + 		+
+ Name +
+ + firstname + + 		+
+ Surname +
+ + lastname + + 		+
+ Age +
+ + 4.221 + + 		+
+
+
+ + + +
+
+
+
+
+ + + + +
+ + + + + + + + + + + +
+ + + + + + +
+ Title +
+ + title + + 		+
+ Name +
+ + firstname + + 		+
+ Surname +
+ + lastname + + 		+
+ Age +
+ + 4.221 + + 		+
+
+
+ + + +
+
+
+
+
+ + + + +
+ + + + + + + + + + + +
+ + + + + + +
+ Title +
+ + title + + 		+
+ Name +
+ + firstname + + 		+
+ Surname +
+ + lastname + + 		+
+ Age +
+ + 4.221 + + 		+
+
+
+ + + +
+
+
+
+
+ + + + +
+ + + + + + + + + + + +
+ + + + + + +
+ Title +
+ + title + + 		+
+ Name +
+ + firstname + + 		+
+ Surname +
+ + lastname + + 		+
+ Age +
+ + 4.221 + + 		+
+
+
+ + + +
+
+
+
+
+ + + + +
+ + + + + + + + + + + +
+ + + + + + +
+ Title +
+ + title + + 		+
+ Name +
+ + firstname + + 		+
+ Surname +
+ + lastname + + 		+
+ Age +
+ + 4.221 + + 		+
+
+
+ + + +
+
+
+
+
+ + + + +
+ + + + + + + + + + + +
+ + + + + + +
+ Title +
+ + title + + 		+
+ Name +
+ + firstname + + 		+
+ Surname +
+ + lastname + + 		+
+ Age +
+ + 4.221 + + 		+
+
+
+ + + +
+
+
+
+
+ + + + +
+ + + + + + + + + + + +
+ + + + + + +
+ Title +
+ + title + + 		+
+ Name +
+ + firstname + + 		+
+ Surname +
+ + lastname + + 		+
+ Age +
+ + 4.221 + + 		+
+
+
+ + + +
+
+
+
+
+ + + + +
+ + + + + + + + + + + +
+ + + + + + +
+ Title +
+ + title + + 		+
+ Name +
+ + firstname + + 		+
+ Surname +
+ + lastname + + 		+
+ Age +
+ + 4.221 + + 		+
+
+
+ + + +
+
+
+
+
+ + + + +
+ + + + + + + + + + + +
+ + + + + + +
+ Title +
+ + title + + 		+
+ Name +
+ + firstname + + 		+
+ Surname +
+ + lastname + + 		+
+ Age +
+ + 4.221 + + 		+
+
+
+ + + +
+
+
+
+
+ + + +
Title
@@ -1599,10 +7551,10 @@ exports[`Storyshots Design System/Table Table with expandable rows 1`] = `
Name
@@ -1613,10 +7565,10 @@ exports[`Storyshots Design System/Table Table with expandable rows 1`] = `
Surname
@@ -1627,10 +7579,10 @@ exports[`Storyshots Design System/Table Table with expandable rows 1`] = `
Age
@@ -1641,15 +7593,15 @@ exports[`Storyshots Design System/Table Table with expandable rows 1`] = `
Title
@@ -1723,10 +7675,10 @@ exports[`Storyshots Design System/Table Table with expandable rows 1`] = `
Name
@@ -1737,10 +7689,10 @@ exports[`Storyshots Design System/Table Table with expandable rows 1`] = `
Surname
@@ -1751,10 +7703,10 @@ exports[`Storyshots Design System/Table Table with expandable rows 1`] = `
Age
@@ -1765,15 +7717,15 @@ exports[`Storyshots Design System/Table Table with expandable rows 1`] = `
{} }: any) => { - const { - columnsHasNumberArr, - columnsWithWidth, - onSelectionChangeExist, - padded, - columns, - fixedHeader, - tChange, - row, - type, - isRowSelected, - bordered, - } = React.useContext(TableRowContext); - const theme = useTheme(); - let cellCounter = 0; - let prevCellColSpan = 0; - const { expanded } = row; - - return ( - - {onSelectionChangeExist && ( - - - - )} - {row.cells.map(({ content, colSpan, type: cellType, align }, index) => { - cellCounter = prevCellColSpan ? prevCellColSpan - 1 + index : index; - prevCellColSpan = colSpan || prevCellColSpan ? prevCellColSpan + (colSpan || 0) : 0; +const RenderRowWithCells = React.memo( + ({ + checked = false, + toggleChecked = () => {}, + }: { + checked?: boolean; + toggleChecked?: () => void; + }) => { + const { + columnsHasNumberArr, + columnsWithWidth, + onSelectionChangeExist, + padded, + columns, + fixedHeader, + tChange, + row, + type, + isRowSelected, + bordered, + } = React.useContext(TableRowContext); + const theme = useTheme(); + const { expanded } = row; + const isExpandedExists = Boolean(expanded); - return ( - + {onSelectionChangeExist && ( + + + + )} + {row.cells.map(({ content, colSpan, type: cellType, align }, index) => ( + - {type === 'nested-header' && ( -
- {columns[cellCounter]} -
- )} - {isComponentFunctionType(content) ? ( - content({ content, colSpan }) - ) : ( - {content} - )} - - ); - })} + colSpan={colSpan} + columnsWithWidth={columnsWithWidth} + content={content} + cellType={cellType} + rowType={type} + align={align} + /> + ))} - {expanded && ( - -
-
toggleChecked()} - > -
- -
-
-
- - )} - - ); -}); + + + ); + } +); RenderRowWithCells.displayName = 'RenderRowWithCells'; const RenderRowOrNestedRow = ({ row }: { row: Row }) => { @@ -160,4 +120,4 @@ const RenderRowOrNestedRow = ({ row }: { r RenderRowOrNestedRow.displayName = 'RenderRowOrNestedRow'; -export default RenderRowOrNestedRow; +export default React.memo(RenderRowOrNestedRow) as typeof RenderRowOrNestedRow; diff --git a/src/components/Table/components/RenderRowOrNestedRow/components/ContentCell/ContentCell.tsx b/src/components/Table/components/RenderRowOrNestedRow/components/ContentCell/ContentCell.tsx new file mode 100644 index 000000000..c4fce51ac --- /dev/null +++ b/src/components/Table/components/RenderRowOrNestedRow/components/ContentCell/ContentCell.tsx @@ -0,0 +1,64 @@ +/** @jsx jsx */ +import { jsx } from '@emotion/core'; +import React from 'react'; +import useTheme from '../../../../../../hooks/useTheme'; +import TableCell from '../../../TableCell'; +import { isComponentFunctionType } from '../../../../../../utils/helpers'; +import { ContentComponent, TableType } from '../../../../Table'; + +type Props = { + columnsHasNumberArr: boolean[]; + columns: string[]; + padded: boolean; + columnsWithWidth: number[]; + content: number | string | ContentComponent; + colSpan?: number; + cellType?: 'financial' | 'normal'; + align?: 'left' | 'right'; + rowType: TableType; + cellCounter: number; +}; + +const ContentCell: React.FC = ({ + columnsHasNumberArr, + columns, + padded, + columnsWithWidth, + content, + colSpan, + rowType, + cellType, + align, + cellCounter, +}) => { + const theme = useTheme(); + + return ( + + {rowType === 'nested-header' && ( +
+ {/* nested header render */} + {columns[cellCounter]} +
+ )} + {isComponentFunctionType(content) ? ( + content({ content, colSpan }) + ) : ( + {content} + )} + + ); +}; + +export default React.memo(ContentCell); diff --git a/src/components/Table/components/RenderRowOrNestedRow/components/ContentCell/index.ts b/src/components/Table/components/RenderRowOrNestedRow/components/ContentCell/index.ts new file mode 100644 index 000000000..965c04e46 --- /dev/null +++ b/src/components/Table/components/RenderRowOrNestedRow/components/ContentCell/index.ts @@ -0,0 +1 @@ +export { default } from './ContentCell'; diff --git a/src/components/Table/components/RenderRowOrNestedRow/components/ExpandedButtonCell/ExpandedButtonCell.tsx b/src/components/Table/components/RenderRowOrNestedRow/components/ExpandedButtonCell/ExpandedButtonCell.tsx new file mode 100644 index 000000000..586e01bff --- /dev/null +++ b/src/components/Table/components/RenderRowOrNestedRow/components/ExpandedButtonCell/ExpandedButtonCell.tsx @@ -0,0 +1,45 @@ +/** @jsx jsx */ +import { jsx } from '@emotion/core'; +import React from 'react'; +import useTheme from '../../../../../../hooks/useTheme'; +import TableCell from '../../../TableCell'; +import rem from 'polished/lib/helpers/rem'; +import Icon from '../../../../../Icon'; + +type Props = { isExpandedExists: boolean; checked: boolean; toggleChecked: () => void }; + +const ExpandedButtonCell: React.FC = ({ isExpandedExists, checked, toggleChecked }) => { + const theme = useTheme(); + + return isExpandedExists ? ( + +
+
toggleChecked()} + > +
+ +
+
+
+ + ) : null; +}; + +export default React.memo(ExpandedButtonCell); diff --git a/src/components/Table/components/RenderRowOrNestedRow/components/ExpandedButtonCell/index.ts b/src/components/Table/components/RenderRowOrNestedRow/components/ExpandedButtonCell/index.ts new file mode 100644 index 000000000..16da55829 --- /dev/null +++ b/src/components/Table/components/RenderRowOrNestedRow/components/ExpandedButtonCell/index.ts @@ -0,0 +1 @@ +export { default } from './ExpandedButtonCell'; diff --git a/src/components/Table/components/TableCell/TableCell.tsx b/src/components/Table/components/TableCell/TableCell.tsx index 9e475d21f..44a33da88 100644 --- a/src/components/Table/components/TableCell/TableCell.tsx +++ b/src/components/Table/components/TableCell/TableCell.tsx @@ -13,50 +13,54 @@ type Props = { padded?: boolean; }; -const TableCell: React.FC = ({ - textAlign = 'left', - component = 'td', - width, - sticky = false, - colSpan, - children, - type = 'normal', - padded = false, -}) => { - const theme = useTheme(); - const Component = component; +const TableCell: React.FC = React.memo( + ({ + textAlign = 'left', + component = 'td', + width, + sticky = false, + colSpan, + children, + type = 'normal', + padded = false, + }) => { + const theme = useTheme(); + const Component = component; - return ( - - {children} - - ); -}; + return ( + + {children} + + ); + } +); export default TableCell; diff --git a/src/components/Table/components/TableRowWrapper/TableRowWrapper.tsx b/src/components/Table/components/TableRowWrapper/TableRowWrapper.tsx new file mode 100644 index 000000000..95f3c05e4 --- /dev/null +++ b/src/components/Table/components/TableRowWrapper/TableRowWrapper.tsx @@ -0,0 +1,65 @@ +/** @jsx jsx */ +import { jsx } from '@emotion/core'; +import React from 'react'; +import { TableRowContext } from '../../TableRowContext'; +import RenderRowOrNestedRow from '../RenderRowOrNestedRow/RenderRowOrNestedRow'; +import { Row, Selection, TableType } from '../../Table'; + +type TableRowWrapperProps = { + row: Row; + isRowSelected: boolean; + onSelectionAdd: (selection: Selection) => void; + columnsHasNumberArr: boolean[]; + columnsWithWidth: number[]; + padded: boolean; + onSelectionChangeExist: boolean; + columnCount: number; + columns: string[]; + fixedHeader: boolean; + type: TableType; + expanded: boolean; +}; + +const TableRowWrapper = >(props: TableRowWrapperProps) => { + const { + row, + isRowSelected, + onSelectionAdd, + padded, + columns, + fixedHeader, + type, + columnsHasNumberArr, + columnsWithWidth, + columnCount, + onSelectionChangeExist, + expanded, + } = props; + + const tChange = React.useCallback(() => { + onSelectionAdd(row.id); + }, [onSelectionAdd, row.id]); + + return ( + + row={row} /> + + ); +}; + +export default React.memo(TableRowWrapper) as typeof TableRowWrapper; diff --git a/src/components/Table/components/TableRowWrapper/index.ts b/src/components/Table/components/TableRowWrapper/index.ts new file mode 100644 index 000000000..777e4f73f --- /dev/null +++ b/src/components/Table/components/TableRowWrapper/index.ts @@ -0,0 +1 @@ +export { default } from './TableRowWrapper'; From 5be00c513ebdcabd1b45c4fad97ae2193f370e67 Mon Sep 17 00:00:00 2001 From: panagiotis vourtsis Date: Thu, 22 Oct 2020 18:22:10 +0300 Subject: [PATCH 2/6] feat(checkbox): add test id property for testing --- src/components/CheckBox/CheckBox.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/CheckBox/CheckBox.tsx b/src/components/CheckBox/CheckBox.tsx index 5062fc41c..60b0ecc78 100644 --- a/src/components/CheckBox/CheckBox.tsx +++ b/src/components/CheckBox/CheckBox.tsx @@ -2,8 +2,9 @@ import { jsx } from '@emotion/core'; import * as React from 'react'; import { ChangeEvent } from 'react'; -import { generateUniqueID } from '../../utils/helpers'; +import { generateTestDataId, generateUniqueID } from '../../utils/helpers'; import { checkboxStyle, checkboxWrapperStyle, labelStyle, wrapperStyle } from './CheckBox.style'; +import { TestId } from '../../utils/types'; export type Props = { /** The label of the checkbox. */ @@ -16,6 +17,8 @@ export type Props = { disabled?: boolean; /** Boolean defining if the checkbox is in intermediate state when checked ( - instead of ✓ ). Defaults to false */ intermediate?: boolean; + /** The data test id if needed */ + dataTestId?: TestId; }; const CheckBox: React.FC = ({ @@ -24,6 +27,7 @@ const CheckBox: React.FC = ({ onClick, disabled = false, intermediate = false, + dataTestId, }) => { const [isChecked, setIsChecked] = React.useState(checked); const id = generateUniqueID(); @@ -44,6 +48,7 @@ const CheckBox: React.FC = ({ Date: Thu, 22 Oct 2020 18:24:17 +0300 Subject: [PATCH 3/6] feat(tests): fix testing library with a render method to have the themeprovider, upgrade TS --- __mocks__/fileMock.ts | 4 -- __mocks__/fileMock.tsx | 10 +++++ jest.config.js | 4 +- package.json | 6 +-- src/test/index.ts | 1 + src/test/utils.tsx | 12 ++++++ yarn.lock | 90 +++++++++++++++++++++--------------------- 7 files changed, 73 insertions(+), 54 deletions(-) delete mode 100644 __mocks__/fileMock.ts create mode 100644 __mocks__/fileMock.tsx create mode 100644 src/test/index.ts create mode 100644 src/test/utils.tsx diff --git a/__mocks__/fileMock.ts b/__mocks__/fileMock.ts deleted file mode 100644 index 94f7ee73f..000000000 --- a/__mocks__/fileMock.ts +++ /dev/null @@ -1,4 +0,0 @@ -// @ts-ignore -import * as React from 'react'; -export default 'SvgrURL'; -export const ReactComponent = 'div'; diff --git a/__mocks__/fileMock.tsx b/__mocks__/fileMock.tsx new file mode 100644 index 000000000..94724e195 --- /dev/null +++ b/__mocks__/fileMock.tsx @@ -0,0 +1,10 @@ +import React from 'react'; + +// eslint-disable-next-line react/display-name +const SvgrMock = React.forwardRef((props, ref) => { + // @ts-ignore + return ; +}); + +export const ReactComponent = SvgrMock; +export default SvgrMock; diff --git a/jest.config.js b/jest.config.js index ff5f4824a..b12d2bebf 100644 --- a/jest.config.js +++ b/jest.config.js @@ -1,7 +1,7 @@ module.exports = { preset: 'ts-jest', testEnvironment: 'jsdom', - testRegex: '(/test/.*|\\.(test|spec))\\.(ts|tsx|js)$', + testRegex: '(\\.(test|spec))\\.(ts|tsx|js)$', transform: { '^.+\\.[tj]sx?$': 'ts-jest', '^.+\\.mdx?$': '@storybook/addon-docs/jest-transform-mdx', @@ -10,6 +10,6 @@ module.exports = { moduleFileExtensions: ['js', 'json', 'jsx', 'ts', 'tsx', 'mdx'], moduleDirectories: ['/src', 'node_modules'], moduleNameMapper: { - '\\.svg$': '/__mocks__/fileMock.ts', + '\\.svg$': '/__mocks__/fileMock.tsx', }, }; diff --git a/package.json b/package.json index 13a58a01c..e3bf4c159 100644 --- a/package.json +++ b/package.json @@ -39,8 +39,8 @@ "@types/react-router-dom": "^5.1.5", "@types/react-select": "^3.0.10", "@types/react-test-renderer": "^16.9.3", - "@typescript-eslint/eslint-plugin": "^4.1.0", - "@typescript-eslint/parser": "^4.1.0", + "@typescript-eslint/eslint-plugin": "^4.5.0", + "@typescript-eslint/parser": "^4.5.0", "babel-loader": "^8.0.6", "babel-plugin-inline-import-data-uri": "^1.0.1", "babel-plugin-inline-react-svg": "^1.1.1", @@ -71,7 +71,7 @@ "styled-components": "^5.2.0", "ts-jest": "^25.1.0", "ts-loader": "^6.2.1", - "typescript": "3.7.5", + "typescript": "3.9.7", "url-loader": "^4.1.0" }, "dependencies": { diff --git a/src/test/index.ts b/src/test/index.ts new file mode 100644 index 000000000..04bca77e0 --- /dev/null +++ b/src/test/index.ts @@ -0,0 +1 @@ +export * from './utils'; diff --git a/src/test/utils.tsx b/src/test/utils.tsx new file mode 100644 index 000000000..1cad0c22a --- /dev/null +++ b/src/test/utils.tsx @@ -0,0 +1,12 @@ +import React from 'react'; +import { render } from '@testing-library/react'; +import ThemeProvider from '../components/ThemeProvider'; + +const renderWithThemeProvider = (children: JSX.Element) => { + return render( + {children} + ); +}; + +export * from '@testing-library/react'; +export { renderWithThemeProvider as render }; diff --git a/yarn.lock b/yarn.lock index 297f54351..727012ee8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2808,61 +2808,61 @@ dependencies: "@types/yargs-parser" "*" -"@typescript-eslint/eslint-plugin@^4.1.0": - version "4.1.1" - resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.1.1.tgz#78d5b18e259b13c2f4ec41dd9105af269a161a75" - integrity sha512-Hoxyt99EA9LMmqo/5PuWWPeWeB3mKyvibfJ1Hy5SfiUpjE8Nqp+5QNd9fOkzL66+fqvIWSIE+Ett16LGMzCGnQ== +"@typescript-eslint/eslint-plugin@^4.5.0": + version "4.5.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.5.0.tgz#4ff9c1d8535ae832e239f0ef6d7210592d9b0b07" + integrity sha512-mjb/gwNcmDKNt+6mb7Aj/TjKzIJjOPcoCJpjBQC9ZnTRnBt1p4q5dJSSmIqAtsZ/Pff5N+hJlbiPc5bl6QN4OQ== dependencies: - "@typescript-eslint/experimental-utils" "4.1.1" - "@typescript-eslint/scope-manager" "4.1.1" + "@typescript-eslint/experimental-utils" "4.5.0" + "@typescript-eslint/scope-manager" "4.5.0" debug "^4.1.1" functional-red-black-tree "^1.0.1" regexpp "^3.0.0" semver "^7.3.2" tsutils "^3.17.1" -"@typescript-eslint/experimental-utils@4.1.1": - version "4.1.1" - resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-4.1.1.tgz#52ff4e37c93113eb96385a4e6d075abece1ea72d" - integrity sha512-jzYsNciHoa4Z3c1URtmeT/bamYm8Dwfw6vuN3WHIE/BXb1iC4KveAnXDErTAZtPVxTYBaYn3n2gbt6F6D2rm1A== +"@typescript-eslint/experimental-utils@4.5.0": + version "4.5.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-4.5.0.tgz#547fe1158609143ce60645383aa1d6f83ada28df" + integrity sha512-bW9IpSAKYvkqDGRZzayBXIgPsj2xmmVHLJ+flGSoN0fF98pGoKFhbunIol0VF2Crka7z984EEhFi623Rl7e6gg== dependencies: "@types/json-schema" "^7.0.3" - "@typescript-eslint/scope-manager" "4.1.1" - "@typescript-eslint/types" "4.1.1" - "@typescript-eslint/typescript-estree" "4.1.1" + "@typescript-eslint/scope-manager" "4.5.0" + "@typescript-eslint/types" "4.5.0" + "@typescript-eslint/typescript-estree" "4.5.0" eslint-scope "^5.0.0" eslint-utils "^2.0.0" -"@typescript-eslint/parser@^4.1.0": - version "4.1.1" - resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-4.1.1.tgz#324b4b35e314075adbc92bd8330cf3ef0c88cf3e" - integrity sha512-NLIhmicpKGfJbdXyQBz9j48PA6hq6e+SDOoXy7Ak6bq1ebGqbgG+fR1UIDAuay6OjQdot69c/URu2uLlsP8GQQ== +"@typescript-eslint/parser@^4.5.0": + version "4.5.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-4.5.0.tgz#b2d659f25eec0041c7bc5660b91db1eefe8d7122" + integrity sha512-xb+gmyhQcnDWe+5+xxaQk5iCw6KqXd8VQxGiTeELTMoYeRjpocZYYRP1gFVM2C8Yl0SpUvLa1lhprwqZ00w3Iw== dependencies: - "@typescript-eslint/scope-manager" "4.1.1" - "@typescript-eslint/types" "4.1.1" - "@typescript-eslint/typescript-estree" "4.1.1" + "@typescript-eslint/scope-manager" "4.5.0" + "@typescript-eslint/types" "4.5.0" + "@typescript-eslint/typescript-estree" "4.5.0" debug "^4.1.1" -"@typescript-eslint/scope-manager@4.1.1": - version "4.1.1" - resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-4.1.1.tgz#bdb8526e82435f32b4ccd9dd4cec01af97b48850" - integrity sha512-0W8TTobCvIIQ2FsrYTffyZGAAFUyIbEHq5EYJb1m7Rpd005jrnOvKOo8ywCLhs/Bm17C+KsrUboBvBAARQVvyA== +"@typescript-eslint/scope-manager@4.5.0": + version "4.5.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-4.5.0.tgz#8dfd53c3256d4357e7d66c2fc8956835f4d239be" + integrity sha512-C0cEO0cTMPJ/w4RA/KVe4LFFkkSh9VHoFzKmyaaDWAnPYIEzVCtJ+Un8GZoJhcvq+mPFXEsXa01lcZDHDG6Www== dependencies: - "@typescript-eslint/types" "4.1.1" - "@typescript-eslint/visitor-keys" "4.1.1" + "@typescript-eslint/types" "4.5.0" + "@typescript-eslint/visitor-keys" "4.5.0" -"@typescript-eslint/types@4.1.1": - version "4.1.1" - resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-4.1.1.tgz#57500c4a86b28cb47094c1a62f1177ea279a09cb" - integrity sha512-zrBiqOKYerMTllKcn+BP+i1b7LW/EbMMYytroXMxUTvFPn1smkCu0D7lSAx29fTUO4jnwV0ljSvYQtn2vNrNxA== +"@typescript-eslint/types@4.5.0": + version "4.5.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-4.5.0.tgz#98256e07bad1c8d15d0c9627ebec82fd971bb3c3" + integrity sha512-n2uQoXnyWNk0Les9MtF0gCK3JiWd987JQi97dMSxBOzVoLZXCNtxFckVqt1h8xuI1ix01t+iMY4h4rFMj/303g== -"@typescript-eslint/typescript-estree@4.1.1": - version "4.1.1" - resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-4.1.1.tgz#2015a84d71303ecdb6f46efd807ac19a51aab490" - integrity sha512-2AUg5v0liVBsqbGxBphbJ0QbGqSRVaF5qPoTPWcxop+66vMdU1h4CCvHxTC47+Qb+Pr4l2RhXDd41JNpwcQEKw== +"@typescript-eslint/typescript-estree@4.5.0": + version "4.5.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-4.5.0.tgz#d50cf91ae3a89878401111031eb6fb6d03554f64" + integrity sha512-gN1mffq3zwRAjlYWzb5DanarOPdajQwx5MEWkWCk0XvqC8JpafDTeioDoow2L4CA/RkYZu7xEsGZRhqrTsAG8w== dependencies: - "@typescript-eslint/types" "4.1.1" - "@typescript-eslint/visitor-keys" "4.1.1" + "@typescript-eslint/types" "4.5.0" + "@typescript-eslint/visitor-keys" "4.5.0" debug "^4.1.1" globby "^11.0.1" is-glob "^4.0.1" @@ -2870,12 +2870,12 @@ semver "^7.3.2" tsutils "^3.17.1" -"@typescript-eslint/visitor-keys@4.1.1": - version "4.1.1" - resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-4.1.1.tgz#bb05664bf4bea28dc120d1da94f3027d42ab0f6f" - integrity sha512-/EOOXbA2ferGLG6RmCHEQ0lTTLkOlXYDgblCmQk3tIU7mTPLm4gKhFMeeUSe+bcchTUsKeCk8xcpbop5Zr/8Rw== +"@typescript-eslint/visitor-keys@4.5.0": + version "4.5.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-4.5.0.tgz#b59f26213ac597efe87f6b13cf2aabee70542af0" + integrity sha512-UHq4FSa55NDZqscRU//O5ROFhHa9Hqn9KWTEvJGTArtTQp5GKv9Zqf6d/Q3YXXcFv4woyBml7fJQlQ+OuqRcHA== dependencies: - "@typescript-eslint/types" "4.1.1" + "@typescript-eslint/types" "4.5.0" eslint-visitor-keys "^2.0.0" "@webassemblyjs/ast@1.9.0": @@ -12251,10 +12251,10 @@ typedarray@^0.0.6: resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777" integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c= -typescript@3.7.5: - version "3.7.5" - resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.7.5.tgz#0692e21f65fd4108b9330238aac11dd2e177a1ae" - integrity sha512-/P5lkRXkWHNAbcJIiHPfRoKqyd7bsyCma1hZNUGfn20qm64T6ZBlrzprymeu918H+mB/0rIg2gGK/BXkhhYgBw== +typescript@3.9.7: + version "3.9.7" + resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.9.7.tgz#98d600a5ebdc38f40cb277522f12dc800e9e25fa" + integrity sha512-BLbiRkiBzAwsjut4x/dsibSTB6yWpwT5qWmC2OfuCg3GgVQCSgMs4vEctYPhsaGtd0AeuuHMkjZ2h2WG8MSzRw== typical@^4.0.0: version "4.0.0" From bd4af69b91f91599d9d728d64a6c79901e1c7774 Mon Sep 17 00:00:00 2001 From: panagiotis vourtsis Date: Thu, 22 Oct 2020 18:25:49 +0300 Subject: [PATCH 4/6] feat(table): adding tests and improve performance with onCheck fn provided --- .../Breadcrumb.stories.storyshot | 32 +-- .../__snapshots__/CheckBox.stories.storyshot | 11 + .../Icon/__snapshots__/Icon.stories.storyshot | 210 +++++++------- .../IconButton.stories.storyshot | 12 +- .../Menu/__snapshots__/Menu.stories.storyshot | 4 +- .../Pagination.stories.storyshot | 12 +- src/components/Table/Table.stories.mdx | 1 - src/components/Table/Table.test.tsx | 85 ++++++ src/components/Table/Table.tsx | 30 +- .../__snapshots__/Table.stories.storyshot | 256 ++++++++++++------ .../RenderRowOrNestedRow.tsx | 2 +- .../ExpandedButtonCell/ExpandedButtonCell.tsx | 1 + 12 files changed, 415 insertions(+), 241 deletions(-) create mode 100644 src/components/Table/Table.test.tsx diff --git a/src/components/Breadcrumb/__snapshots__/Breadcrumb.stories.storyshot b/src/components/Breadcrumb/__snapshots__/Breadcrumb.stories.storyshot index b6792355e..2f62732ae 100644 --- a/src/components/Breadcrumb/__snapshots__/Breadcrumb.stories.storyshot +++ b/src/components/Breadcrumb/__snapshots__/Breadcrumb.stories.storyshot @@ -63,7 +63,7 @@ exports[`Storyshots Design System/Breadcrumb Advanced Breadcrumbs with options p - @@ -88,7 +88,7 @@ exports[`Storyshots Design System/Breadcrumb Advanced Breadcrumbs with options p - @@ -99,7 +99,7 @@ exports[`Storyshots Design System/Breadcrumb Advanced Breadcrumbs with options p - @@ -123,7 +123,7 @@ exports[`Storyshots Design System/Breadcrumb Advanced Breadcrumbs with options p - @@ -155,7 +155,7 @@ exports[`Storyshots Design System/Breadcrumb Advanced Breadcrumbs with options p - @@ -245,7 +245,7 @@ exports[`Storyshots Design System/Breadcrumb Breadcrumb showcase 1`] = ` - @@ -270,7 +270,7 @@ exports[`Storyshots Design System/Breadcrumb Breadcrumb showcase 1`] = ` - @@ -281,7 +281,7 @@ exports[`Storyshots Design System/Breadcrumb Breadcrumb showcase 1`] = ` - @@ -305,7 +305,7 @@ exports[`Storyshots Design System/Breadcrumb Breadcrumb showcase 1`] = ` - @@ -337,7 +337,7 @@ exports[`Storyshots Design System/Breadcrumb Breadcrumb showcase 1`] = ` - @@ -417,7 +417,7 @@ exports[`Storyshots Design System/Breadcrumb Simple Breadcrumbs 1`] = ` - @@ -437,7 +437,7 @@ exports[`Storyshots Design System/Breadcrumb Simple Breadcrumbs 1`] = ` - @@ -522,7 +522,7 @@ exports[`Storyshots Design System/Breadcrumb Simple Breadcrumbs with options 1`] - @@ -547,7 +547,7 @@ exports[`Storyshots Design System/Breadcrumb Simple Breadcrumbs with options 1`] - @@ -558,7 +558,7 @@ exports[`Storyshots Design System/Breadcrumb Simple Breadcrumbs with options 1`] - @@ -582,7 +582,7 @@ exports[`Storyshots Design System/Breadcrumb Simple Breadcrumbs with options 1`] - diff --git a/src/components/CheckBox/__snapshots__/CheckBox.stories.storyshot b/src/components/CheckBox/__snapshots__/CheckBox.stories.storyshot index 773e4aea1..3c2000da5 100644 --- a/src/components/CheckBox/__snapshots__/CheckBox.stories.storyshot +++ b/src/components/CheckBox/__snapshots__/CheckBox.stories.storyshot @@ -51,6 +51,7 @@ exports[`Storyshots Design System/CheckBox CheckBox with Label 1`] = ` - @@ -94,7 +94,7 @@ exports[`Storyshots Design System/Icon Icon with color 1`] = ` - @@ -131,7 +131,7 @@ exports[`Storyshots Design System/Icon Icon with color 1`] = ` - @@ -168,7 +168,7 @@ exports[`Storyshots Design System/Icon Icon with color 1`] = ` - @@ -205,7 +205,7 @@ exports[`Storyshots Design System/Icon Icon with color 1`] = ` - @@ -242,7 +242,7 @@ exports[`Storyshots Design System/Icon Icon with color 1`] = ` - @@ -279,7 +279,7 @@ exports[`Storyshots Design System/Icon Icon with color 1`] = ` - @@ -316,7 +316,7 @@ exports[`Storyshots Design System/Icon Icon with color 1`] = ` - @@ -392,7 +392,7 @@ exports[`Storyshots Design System/Icon Icon with size 1`] = ` - @@ -429,7 +429,7 @@ exports[`Storyshots Design System/Icon Icon with size 1`] = ` - @@ -466,7 +466,7 @@ exports[`Storyshots Design System/Icon Icon with size 1`] = ` - @@ -542,7 +542,7 @@ exports[`Storyshots Design System/Icon Icons Gallery 1`] = ` - @@ -579,7 +579,7 @@ exports[`Storyshots Design System/Icon Icons Gallery 1`] = ` - @@ -616,7 +616,7 @@ exports[`Storyshots Design System/Icon Icons Gallery 1`] = ` - @@ -653,7 +653,7 @@ exports[`Storyshots Design System/Icon Icons Gallery 1`] = ` - @@ -690,7 +690,7 @@ exports[`Storyshots Design System/Icon Icons Gallery 1`] = ` - @@ -727,7 +727,7 @@ exports[`Storyshots Design System/Icon Icons Gallery 1`] = ` - @@ -764,7 +764,7 @@ exports[`Storyshots Design System/Icon Icons Gallery 1`] = ` - @@ -801,7 +801,7 @@ exports[`Storyshots Design System/Icon Icons Gallery 1`] = ` - @@ -838,7 +838,7 @@ exports[`Storyshots Design System/Icon Icons Gallery 1`] = ` - @@ -875,7 +875,7 @@ exports[`Storyshots Design System/Icon Icons Gallery 1`] = ` - @@ -912,7 +912,7 @@ exports[`Storyshots Design System/Icon Icons Gallery 1`] = ` - @@ -949,7 +949,7 @@ exports[`Storyshots Design System/Icon Icons Gallery 1`] = ` - @@ -986,7 +986,7 @@ exports[`Storyshots Design System/Icon Icons Gallery 1`] = ` - @@ -1023,7 +1023,7 @@ exports[`Storyshots Design System/Icon Icons Gallery 1`] = ` - @@ -1060,7 +1060,7 @@ exports[`Storyshots Design System/Icon Icons Gallery 1`] = ` - @@ -1097,7 +1097,7 @@ exports[`Storyshots Design System/Icon Icons Gallery 1`] = ` - @@ -1134,7 +1134,7 @@ exports[`Storyshots Design System/Icon Icons Gallery 1`] = ` - @@ -1171,7 +1171,7 @@ exports[`Storyshots Design System/Icon Icons Gallery 1`] = ` - @@ -1208,7 +1208,7 @@ exports[`Storyshots Design System/Icon Icons Gallery 1`] = ` - @@ -1245,7 +1245,7 @@ exports[`Storyshots Design System/Icon Icons Gallery 1`] = ` - @@ -1282,7 +1282,7 @@ exports[`Storyshots Design System/Icon Icons Gallery 1`] = ` - @@ -1319,7 +1319,7 @@ exports[`Storyshots Design System/Icon Icons Gallery 1`] = ` - @@ -1356,7 +1356,7 @@ exports[`Storyshots Design System/Icon Icons Gallery 1`] = ` - @@ -1393,7 +1393,7 @@ exports[`Storyshots Design System/Icon Icons Gallery 1`] = ` - @@ -1430,7 +1430,7 @@ exports[`Storyshots Design System/Icon Icons Gallery 1`] = ` - @@ -1467,7 +1467,7 @@ exports[`Storyshots Design System/Icon Icons Gallery 1`] = ` - @@ -1504,7 +1504,7 @@ exports[`Storyshots Design System/Icon Icons Gallery 1`] = ` - @@ -1541,7 +1541,7 @@ exports[`Storyshots Design System/Icon Icons Gallery 1`] = ` - @@ -1578,7 +1578,7 @@ exports[`Storyshots Design System/Icon Icons Gallery 1`] = ` - @@ -1615,7 +1615,7 @@ exports[`Storyshots Design System/Icon Icons Gallery 1`] = ` - @@ -1652,7 +1652,7 @@ exports[`Storyshots Design System/Icon Icons Gallery 1`] = ` - @@ -1689,7 +1689,7 @@ exports[`Storyshots Design System/Icon Icons Gallery 1`] = ` - @@ -1726,7 +1726,7 @@ exports[`Storyshots Design System/Icon Icons Gallery 1`] = ` - @@ -1763,7 +1763,7 @@ exports[`Storyshots Design System/Icon Icons Gallery 1`] = ` - @@ -1800,7 +1800,7 @@ exports[`Storyshots Design System/Icon Icons Gallery 1`] = ` - @@ -1837,7 +1837,7 @@ exports[`Storyshots Design System/Icon Icons Gallery 1`] = ` - @@ -1874,7 +1874,7 @@ exports[`Storyshots Design System/Icon Icons Gallery 1`] = ` - @@ -1911,7 +1911,7 @@ exports[`Storyshots Design System/Icon Icons Gallery 1`] = ` - @@ -1948,7 +1948,7 @@ exports[`Storyshots Design System/Icon Icons Gallery 1`] = ` - @@ -1985,7 +1985,7 @@ exports[`Storyshots Design System/Icon Icons Gallery 1`] = ` - @@ -2022,7 +2022,7 @@ exports[`Storyshots Design System/Icon Icons Gallery 1`] = ` - @@ -2059,7 +2059,7 @@ exports[`Storyshots Design System/Icon Icons Gallery 1`] = ` - @@ -2096,7 +2096,7 @@ exports[`Storyshots Design System/Icon Icons Gallery 1`] = ` - @@ -2133,7 +2133,7 @@ exports[`Storyshots Design System/Icon Icons Gallery 1`] = ` - @@ -2170,7 +2170,7 @@ exports[`Storyshots Design System/Icon Icons Gallery 1`] = ` - @@ -2207,7 +2207,7 @@ exports[`Storyshots Design System/Icon Icons Gallery 1`] = ` - @@ -2244,7 +2244,7 @@ exports[`Storyshots Design System/Icon Icons Gallery 1`] = ` - @@ -2281,7 +2281,7 @@ exports[`Storyshots Design System/Icon Icons Gallery 1`] = ` - @@ -2318,7 +2318,7 @@ exports[`Storyshots Design System/Icon Icons Gallery 1`] = ` - @@ -2355,7 +2355,7 @@ exports[`Storyshots Design System/Icon Icons Gallery 1`] = ` - @@ -2392,7 +2392,7 @@ exports[`Storyshots Design System/Icon Icons Gallery 1`] = ` - @@ -2429,7 +2429,7 @@ exports[`Storyshots Design System/Icon Icons Gallery 1`] = ` - @@ -2466,7 +2466,7 @@ exports[`Storyshots Design System/Icon Icons Gallery 1`] = ` - @@ -2503,7 +2503,7 @@ exports[`Storyshots Design System/Icon Icons Gallery 1`] = ` - @@ -2540,7 +2540,7 @@ exports[`Storyshots Design System/Icon Icons Gallery 1`] = ` - @@ -2577,7 +2577,7 @@ exports[`Storyshots Design System/Icon Icons Gallery 1`] = ` - @@ -2614,7 +2614,7 @@ exports[`Storyshots Design System/Icon Icons Gallery 1`] = ` - @@ -2651,7 +2651,7 @@ exports[`Storyshots Design System/Icon Icons Gallery 1`] = ` - @@ -2688,7 +2688,7 @@ exports[`Storyshots Design System/Icon Icons Gallery 1`] = ` - @@ -2725,7 +2725,7 @@ exports[`Storyshots Design System/Icon Icons Gallery 1`] = ` - @@ -2762,7 +2762,7 @@ exports[`Storyshots Design System/Icon Icons Gallery 1`] = ` - @@ -2799,7 +2799,7 @@ exports[`Storyshots Design System/Icon Icons Gallery 1`] = ` - @@ -2836,7 +2836,7 @@ exports[`Storyshots Design System/Icon Icons Gallery 1`] = ` - @@ -2873,7 +2873,7 @@ exports[`Storyshots Design System/Icon Icons Gallery 1`] = ` - @@ -2910,7 +2910,7 @@ exports[`Storyshots Design System/Icon Icons Gallery 1`] = ` - @@ -2947,7 +2947,7 @@ exports[`Storyshots Design System/Icon Icons Gallery 1`] = ` - @@ -2984,7 +2984,7 @@ exports[`Storyshots Design System/Icon Icons Gallery 1`] = ` - @@ -3021,7 +3021,7 @@ exports[`Storyshots Design System/Icon Icons Gallery 1`] = ` - @@ -3058,7 +3058,7 @@ exports[`Storyshots Design System/Icon Icons Gallery 1`] = ` - @@ -3095,7 +3095,7 @@ exports[`Storyshots Design System/Icon Icons Gallery 1`] = ` - @@ -3132,7 +3132,7 @@ exports[`Storyshots Design System/Icon Icons Gallery 1`] = ` - @@ -3169,7 +3169,7 @@ exports[`Storyshots Design System/Icon Icons Gallery 1`] = ` - @@ -3206,7 +3206,7 @@ exports[`Storyshots Design System/Icon Icons Gallery 1`] = ` - @@ -3243,7 +3243,7 @@ exports[`Storyshots Design System/Icon Icons Gallery 1`] = ` - @@ -3280,7 +3280,7 @@ exports[`Storyshots Design System/Icon Icons Gallery 1`] = ` - @@ -3317,7 +3317,7 @@ exports[`Storyshots Design System/Icon Icons Gallery 1`] = ` - @@ -3354,7 +3354,7 @@ exports[`Storyshots Design System/Icon Icons Gallery 1`] = ` - @@ -3391,7 +3391,7 @@ exports[`Storyshots Design System/Icon Icons Gallery 1`] = ` - @@ -3428,7 +3428,7 @@ exports[`Storyshots Design System/Icon Icons Gallery 1`] = ` - @@ -3465,7 +3465,7 @@ exports[`Storyshots Design System/Icon Icons Gallery 1`] = ` - @@ -3502,7 +3502,7 @@ exports[`Storyshots Design System/Icon Icons Gallery 1`] = ` - @@ -3539,7 +3539,7 @@ exports[`Storyshots Design System/Icon Icons Gallery 1`] = ` - @@ -3576,7 +3576,7 @@ exports[`Storyshots Design System/Icon Icons Gallery 1`] = ` - @@ -3613,7 +3613,7 @@ exports[`Storyshots Design System/Icon Icons Gallery 1`] = ` - @@ -3650,7 +3650,7 @@ exports[`Storyshots Design System/Icon Icons Gallery 1`] = ` - @@ -3687,7 +3687,7 @@ exports[`Storyshots Design System/Icon Icons Gallery 1`] = ` - @@ -3724,7 +3724,7 @@ exports[`Storyshots Design System/Icon Icons Gallery 1`] = ` - @@ -3761,7 +3761,7 @@ exports[`Storyshots Design System/Icon Icons Gallery 1`] = ` - @@ -3798,7 +3798,7 @@ exports[`Storyshots Design System/Icon Icons Gallery 1`] = ` - @@ -3835,7 +3835,7 @@ exports[`Storyshots Design System/Icon Icons Gallery 1`] = ` - @@ -3872,7 +3872,7 @@ exports[`Storyshots Design System/Icon Icons Gallery 1`] = ` - @@ -3909,7 +3909,7 @@ exports[`Storyshots Design System/Icon Icons Gallery 1`] = ` - @@ -3946,7 +3946,7 @@ exports[`Storyshots Design System/Icon Icons Gallery 1`] = ` - @@ -3983,7 +3983,7 @@ exports[`Storyshots Design System/Icon Icons Gallery 1`] = ` - diff --git a/src/components/IconButton/__snapshots__/IconButton.stories.storyshot b/src/components/IconButton/__snapshots__/IconButton.stories.storyshot index 96c84a22b..1a4534256 100644 --- a/src/components/IconButton/__snapshots__/IconButton.stories.storyshot +++ b/src/components/IconButton/__snapshots__/IconButton.stories.storyshot @@ -56,7 +56,7 @@ exports[`Storyshots Design System/IconButton IconButton Sizes 1`] = ` - @@ -85,7 +85,7 @@ exports[`Storyshots Design System/IconButton IconButton Sizes 1`] = ` - @@ -114,7 +114,7 @@ exports[`Storyshots Design System/IconButton IconButton Sizes 1`] = ` - @@ -182,7 +182,7 @@ exports[`Storyshots Design System/IconButton IconButton Types 1`] = ` - @@ -211,7 +211,7 @@ exports[`Storyshots Design System/IconButton IconButton Types 1`] = ` - @@ -240,7 +240,7 @@ exports[`Storyshots Design System/IconButton IconButton Types 1`] = ` - diff --git a/src/components/Menu/__snapshots__/Menu.stories.storyshot b/src/components/Menu/__snapshots__/Menu.stories.storyshot index 42aef508e..5f0506a99 100644 --- a/src/components/Menu/__snapshots__/Menu.stories.storyshot +++ b/src/components/Menu/__snapshots__/Menu.stories.storyshot @@ -53,7 +53,7 @@ exports[`Storyshots Design System/Menu Menu with option icon and different colou - @@ -128,7 +128,7 @@ exports[`Storyshots Design System/Menu Menu with selection handler 1`] = ` - diff --git a/src/components/Pagination/__snapshots__/Pagination.stories.storyshot b/src/components/Pagination/__snapshots__/Pagination.stories.storyshot index 121a20f63..da9c916d3 100644 --- a/src/components/Pagination/__snapshots__/Pagination.stories.storyshot +++ b/src/components/Pagination/__snapshots__/Pagination.stories.storyshot @@ -50,7 +50,7 @@ exports[`Storyshots Design System/Pagination Pagination 1`] = ` - @@ -72,7 +72,7 @@ exports[`Storyshots Design System/Pagination Pagination 1`] = ` - @@ -100,7 +100,7 @@ exports[`Storyshots Design System/Pagination Pagination 1`] = ` - @@ -122,7 +122,7 @@ exports[`Storyshots Design System/Pagination Pagination 1`] = ` - @@ -183,7 +183,7 @@ exports[`Storyshots Design System/Pagination Pagination without all buttons 1`] - @@ -211,7 +211,7 @@ exports[`Storyshots Design System/Pagination Pagination without all buttons 1`] - diff --git a/src/components/Table/Table.stories.mdx b/src/components/Table/Table.stories.mdx index badc74f40..54ab188c1 100644 --- a/src/components/Table/Table.stories.mdx +++ b/src/components/Table/Table.stories.mdx @@ -121,7 +121,6 @@ Table with expandable rows and nested header console.log('on table change: ', g)} topLeftText={'topLeftText'} diff --git a/src/components/Table/Table.test.tsx b/src/components/Table/Table.test.tsx new file mode 100644 index 000000000..01fa63fd2 --- /dev/null +++ b/src/components/Table/Table.test.tsx @@ -0,0 +1,85 @@ +import React from 'react'; +import { fireEvent, render, within } from 'test'; +import Table from './Table'; + +describe('Table', () => { + const data = new Array(50).fill(null).map((item, index) => ({ + id: index + 1, + cells: [ + { content: 'title', widthPercentage: 40 }, + { content: 'firstname' }, + { content: 'lastname' }, + { content: 4.221 }, + ], + // eslint-disable-next-line react/display-name + expanded: () =>
Hey i am an expandable content
, + })); + + test('the expandable table that shows the content when clicking', async () => { + const { getAllByText, findByText } = render( +
+ ); + + // check nested table data are rendered by checking row header + expect(getAllByText('Title').length).toBe(data.length); + + const row = getAllByText('Title')[0].closest('tr') as HTMLElement; + const rowUtils = within(row); + const expandedButton = await rowUtils.findByTestId('expanded-button'); + + fireEvent.click(expandedButton); + + const content = await findByText('Hey i am an expandable content'); + + expect(content).toBeTruthy(); + }); + + test('that the onCheck returns the selected rows back when a row is selected', async () => { + const onCheck = jest.fn(); + const { getAllByText } = render( +
+ ); + + const row = getAllByText('Title')[0].closest('tr') as HTMLElement; + const rowUtils = within(row); + const checkbox = await rowUtils.findByTestId('checkbox-row-check'); + + fireEvent.click(checkbox); + + expect(onCheck).toHaveBeenCalledTimes(1); + expect(onCheck).toHaveBeenCalledWith([data[0].id]); + }); + + test('that the onCheck on top of the table returns the selected rows back when all are selected', async () => { + const onCheck = jest.fn(); + const topLeftText = 'topLeftText'; + const { getByText } = render( +
+ ); + + const row = getByText(topLeftText).closest('tr') as HTMLElement; + const rowUtils = within(row); + const checkbox = await rowUtils.findByTestId('checkbox'); + + fireEvent.click(checkbox); + + expect(onCheck).toHaveBeenCalledTimes(1); + expect(onCheck).toHaveBeenCalledWith(data.map(({ id }) => id)); + }); +}); diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx index 1dd514d1f..033794710 100644 --- a/src/components/Table/Table.tsx +++ b/src/components/Table/Table.tsx @@ -69,23 +69,23 @@ function Table({ topRightArea, }: Props) { const theme = useTheme(); - const [selectedIds, setSelectedIds] = React.useState([]); + const [selectedIds, setSelectedIds] = React.useState(undefined); const columnCount = onCheck ? columns.length + 1 : columns.length; - React.useEffect(() => { - // when changing data reset the selecting ids since it might have changed - setSelectedIds([]); - }, [data]); + // React.useEffect(() => { + // // when changing data reset the selecting ids since it might have changed + // setSelectedIds([]); + // }, [data]); /** when the selection of ids change then inform the user if onCheck callback provided **/ React.useEffect(() => { - if (onCheck) { - onCheck(selectedIds); + if (onCheck && selectedIds) { + onCheck(selectedIds as Selection[]); } }, [onCheck, selectedIds]); const onSelectionAdd = React.useCallback((rowId: Selection) => { - setSelectedIds((selectedIds: Selection[]) => + setSelectedIds((selectedIds: Selection[] = []) => selectedIds.indexOf(rowId) === -1 ? [...selectedIds, rowId] : selectedIds.filter(item => item !== rowId) @@ -125,10 +125,12 @@ function Table({ {onCheck && ( 0)} - intermediate={selectedIds.length > 0 && selectedIds.length !== data.length} + checked={Boolean(selectedIds && selectedIds.length > 0)} + intermediate={ + selectedIds && selectedIds.length > 0 && selectedIds?.length !== data.length + } onClick={() => { - if (selectedIds.length === data.length) { + if (selectedIds?.length === data.length) { setSelectedIds([]); } else { setSelectedIds(data.map(({ id }) => id)); @@ -138,7 +140,7 @@ function Table({ )} - {selectedIds.length > 0 ? ( + {selectedIds && selectedIds?.length > 0 ? ( {selectedIds.length} {pluralize('item', selectedIds.length)} selected @@ -146,7 +148,7 @@ function Table({ topLeftText )} - {topRightArea && ( + {topRightArea && selectedIds && ( ({ key={row.id} {...{ row, - isRowSelected: selectedIds.indexOf(row.id) !== -1, + isRowSelected: selectedIds ? selectedIds.indexOf(row.id) !== -1 : false, onSelectionAdd, padded, columns, diff --git a/src/components/Table/__snapshots__/Table.stories.storyshot b/src/components/Table/__snapshots__/Table.stories.storyshot index 80b7bbb2d..9de52c617 100644 --- a/src/components/Table/__snapshots__/Table.stories.storyshot +++ b/src/components/Table/__snapshots__/Table.stories.storyshot @@ -51,6 +51,7 @@ exports[`Storyshots Design System/Table Financial Table 1`] = ` topLeftText -
-
-
- top right section -
-
-
@@ -128,6 +119,7 @@ exports[`Storyshots Design System/Table Financial Table 1`] = ` topLeftText - -
-
- top right section -
-
- @@ -490,6 +476,7 @@ exports[`Storyshots Design System/Table Fixed Header Table 1`] = ` topLeftText - -
-
- top right section -
-
- @@ -1510,6 +1495,7 @@ exports[`Storyshots Design System/Table Table with expandable rows 1`] = ` topLeftText - -
-
- top right section -
-
- @@ -1573,6 +1549,7 @@ exports[`Storyshots Design System/Table Table with expandable rows 1`] = `
- @@ -1697,6 +1675,7 @@ exports[`Storyshots Design System/Table Table with expandable rows 1`] = `
- @@ -1821,6 +1801,7 @@ exports[`Storyshots Design System/Table Table with expandable rows 1`] = `
- @@ -1945,6 +1927,7 @@ exports[`Storyshots Design System/Table Table with expandable rows 1`] = `
- @@ -2069,6 +2053,7 @@ exports[`Storyshots Design System/Table Table with expandable rows 1`] = `
- @@ -2193,6 +2179,7 @@ exports[`Storyshots Design System/Table Table with expandable rows 1`] = `
- @@ -2317,6 +2305,7 @@ exports[`Storyshots Design System/Table Table with expandable rows 1`] = `
- @@ -2441,6 +2431,7 @@ exports[`Storyshots Design System/Table Table with expandable rows 1`] = `
- @@ -2565,6 +2557,7 @@ exports[`Storyshots Design System/Table Table with expandable rows 1`] = `
- @@ -2689,6 +2683,7 @@ exports[`Storyshots Design System/Table Table with expandable rows 1`] = `
- @@ -2813,6 +2809,7 @@ exports[`Storyshots Design System/Table Table with expandable rows 1`] = `
- @@ -2937,6 +2935,7 @@ exports[`Storyshots Design System/Table Table with expandable rows 1`] = `
- @@ -3061,6 +3061,7 @@ exports[`Storyshots Design System/Table Table with expandable rows 1`] = `
- @@ -3185,6 +3187,7 @@ exports[`Storyshots Design System/Table Table with expandable rows 1`] = `
- @@ -3309,6 +3313,7 @@ exports[`Storyshots Design System/Table Table with expandable rows 1`] = `
- @@ -3433,6 +3439,7 @@ exports[`Storyshots Design System/Table Table with expandable rows 1`] = `
- @@ -3557,6 +3565,7 @@ exports[`Storyshots Design System/Table Table with expandable rows 1`] = `
- @@ -3681,6 +3691,7 @@ exports[`Storyshots Design System/Table Table with expandable rows 1`] = `
- @@ -3805,6 +3817,7 @@ exports[`Storyshots Design System/Table Table with expandable rows 1`] = `
- @@ -3929,6 +3943,7 @@ exports[`Storyshots Design System/Table Table with expandable rows 1`] = `
- @@ -4053,6 +4069,7 @@ exports[`Storyshots Design System/Table Table with expandable rows 1`] = `
- @@ -4177,6 +4195,7 @@ exports[`Storyshots Design System/Table Table with expandable rows 1`] = `
- @@ -4301,6 +4321,7 @@ exports[`Storyshots Design System/Table Table with expandable rows 1`] = `
- @@ -4425,6 +4447,7 @@ exports[`Storyshots Design System/Table Table with expandable rows 1`] = `
- @@ -4549,6 +4573,7 @@ exports[`Storyshots Design System/Table Table with expandable rows 1`] = `
- @@ -4673,6 +4699,7 @@ exports[`Storyshots Design System/Table Table with expandable rows 1`] = `
- @@ -4797,6 +4825,7 @@ exports[`Storyshots Design System/Table Table with expandable rows 1`] = `
- @@ -4921,6 +4951,7 @@ exports[`Storyshots Design System/Table Table with expandable rows 1`] = `
- @@ -5045,6 +5077,7 @@ exports[`Storyshots Design System/Table Table with expandable rows 1`] = `
- @@ -5169,6 +5203,7 @@ exports[`Storyshots Design System/Table Table with expandable rows 1`] = `
- @@ -5293,6 +5329,7 @@ exports[`Storyshots Design System/Table Table with expandable rows 1`] = `
- @@ -5417,6 +5455,7 @@ exports[`Storyshots Design System/Table Table with expandable rows 1`] = `
- @@ -5541,6 +5581,7 @@ exports[`Storyshots Design System/Table Table with expandable rows 1`] = `
- @@ -5665,6 +5707,7 @@ exports[`Storyshots Design System/Table Table with expandable rows 1`] = `
- @@ -5789,6 +5833,7 @@ exports[`Storyshots Design System/Table Table with expandable rows 1`] = `
- @@ -5913,6 +5959,7 @@ exports[`Storyshots Design System/Table Table with expandable rows 1`] = `
- @@ -6037,6 +6085,7 @@ exports[`Storyshots Design System/Table Table with expandable rows 1`] = `
- @@ -6161,6 +6211,7 @@ exports[`Storyshots Design System/Table Table with expandable rows 1`] = `
- @@ -6285,6 +6337,7 @@ exports[`Storyshots Design System/Table Table with expandable rows 1`] = `
- @@ -6409,6 +6463,7 @@ exports[`Storyshots Design System/Table Table with expandable rows 1`] = `
- @@ -6533,6 +6589,7 @@ exports[`Storyshots Design System/Table Table with expandable rows 1`] = `
- @@ -6657,6 +6715,7 @@ exports[`Storyshots Design System/Table Table with expandable rows 1`] = `
- @@ -6781,6 +6841,7 @@ exports[`Storyshots Design System/Table Table with expandable rows 1`] = `
- @@ -6905,6 +6967,7 @@ exports[`Storyshots Design System/Table Table with expandable rows 1`] = `
- @@ -7029,6 +7093,7 @@ exports[`Storyshots Design System/Table Table with expandable rows 1`] = `
- @@ -7153,6 +7219,7 @@ exports[`Storyshots Design System/Table Table with expandable rows 1`] = `
- @@ -7277,6 +7345,7 @@ exports[`Storyshots Design System/Table Table with expandable rows 1`] = `
- @@ -7401,6 +7471,7 @@ exports[`Storyshots Design System/Table Table with expandable rows 1`] = `
- @@ -7525,6 +7597,7 @@ exports[`Storyshots Design System/Table Table with expandable rows 1`] = `
- @@ -7649,6 +7723,7 @@ exports[`Storyshots Design System/Table Table with expandable rows 1`] = `
- diff --git a/src/components/Table/components/RenderRowOrNestedRow/RenderRowOrNestedRow.tsx b/src/components/Table/components/RenderRowOrNestedRow/RenderRowOrNestedRow.tsx index c2d1b17ec..a4f1b6916 100644 --- a/src/components/Table/components/RenderRowOrNestedRow/RenderRowOrNestedRow.tsx +++ b/src/components/Table/components/RenderRowOrNestedRow/RenderRowOrNestedRow.tsx @@ -45,7 +45,7 @@ const RenderRowWithCells = React.memo( > {onSelectionChangeExist && ( - + )} {row.cells.map(({ content, colSpan, type: cellType, align }, index) => ( diff --git a/src/components/Table/components/RenderRowOrNestedRow/components/ExpandedButtonCell/ExpandedButtonCell.tsx b/src/components/Table/components/RenderRowOrNestedRow/components/ExpandedButtonCell/ExpandedButtonCell.tsx index 586e01bff..87ffbe0f0 100644 --- a/src/components/Table/components/RenderRowOrNestedRow/components/ExpandedButtonCell/ExpandedButtonCell.tsx +++ b/src/components/Table/components/RenderRowOrNestedRow/components/ExpandedButtonCell/ExpandedButtonCell.tsx @@ -15,6 +15,7 @@ const ExpandedButtonCell: React.FC = ({ isExpandedExists, checked, toggle
Date: Tue, 27 Oct 2020 10:24:45 +0200 Subject: [PATCH 5/6] chore(table): remove comment code --- src/components/Table/Table.tsx | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx index 033794710..2513f7293 100644 --- a/src/components/Table/Table.tsx +++ b/src/components/Table/Table.tsx @@ -72,11 +72,6 @@ function Table({ const [selectedIds, setSelectedIds] = React.useState(undefined); const columnCount = onCheck ? columns.length + 1 : columns.length; - // React.useEffect(() => { - // // when changing data reset the selecting ids since it might have changed - // setSelectedIds([]); - // }, [data]); - /** when the selection of ids change then inform the user if onCheck callback provided **/ React.useEffect(() => { if (onCheck && selectedIds) { From 7c61de6d78bed7dfee9ecae7366d469ea193f0ef Mon Sep 17 00:00:00 2001 From: panagiotis vourtsis Date: Tue, 27 Oct 2020 10:51:12 +0200 Subject: [PATCH 6/6] chore(table): simplify the complexity of the calculation code for best performance --- src/components/Table/Table.tsx | 20 ++++++-------------- 1 file changed, 6 insertions(+), 14 deletions(-) diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx index 2513f7293..915d2a099 100644 --- a/src/components/Table/Table.tsx +++ b/src/components/Table/Table.tsx @@ -89,25 +89,17 @@ function Table({ const columnsHasNumberArr = React.useMemo( () => - head( - data.map(({ cells }) => - cells.map(({ content }) => { - return Boolean(Number.isInteger(Number(content)) || parseFloat(`${content}`)); - }) - ) - ) || [], + head(data)?.cells.map(({ content }) => { + return Boolean(Number.isInteger(Number(content)) || parseFloat(`${content}`)); + }) || [], [data] ); const columnsWithWidth = React.useMemo( () => - head( - data.map(({ cells }) => - cells.map(({ widthPercentage }) => { - return widthPercentage; - }) - ) - ) || [], + head(data)?.cells.map(({ widthPercentage }) => { + return widthPercentage; + }) || [], [data] );