@laerdal/life-react-components 1.3.2-dev.14 → 1.3.2-dev.17
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/esm/Table/Table.js +19 -1
- package/dist/esm/Table/Table.js.map +1 -1
- package/dist/esm/Table/TableBody.js +4 -4
- package/dist/esm/Table/TableBody.js.map +1 -1
- package/dist/esm/Table/TableFooter.js +11 -3
- package/dist/esm/Table/TableFooter.js.map +1 -1
- package/dist/esm/Table/TableStyles.js +56 -3
- package/dist/esm/Table/TableStyles.js.map +1 -1
- package/dist/esm/Table/__tests__/Table.test.js +162 -0
- package/dist/esm/Table/__tests__/Table.test.js.map +1 -1
- package/dist/js/Table/Table.js +30 -7
- package/dist/js/Table/Table.js.map +1 -1
- package/dist/js/Table/TableBody.js +3 -3
- package/dist/js/Table/TableBody.js.map +1 -1
- package/dist/js/Table/TableFooter.d.ts +2 -0
- package/dist/js/Table/TableFooter.js +15 -2
- package/dist/js/Table/TableFooter.js.map +1 -1
- package/dist/js/Table/TableStyles.d.ts +2 -0
- package/dist/js/Table/TableStyles.js +19 -11
- package/dist/js/Table/TableStyles.js.map +1 -1
- package/dist/js/Table/TableTypes.d.ts +4 -1
- package/dist/js/Table/__tests__/Table.test.js +164 -0
- package/dist/js/Table/__tests__/Table.test.js.map +1 -1
- package/dist/umd/Table/Table.js +19 -1
- package/dist/umd/Table/Table.js.map +1 -1
- package/dist/umd/Table/TableBody.js +3 -3
- package/dist/umd/Table/TableBody.js.map +1 -1
- package/dist/umd/Table/TableFooter.js +13 -6
- package/dist/umd/Table/TableFooter.js.map +1 -1
- package/dist/umd/Table/TableStyles.js +56 -3
- package/dist/umd/Table/TableStyles.js.map +1 -1
- package/dist/umd/Table/__tests__/Table.test.js +164 -4
- package/dist/umd/Table/__tests__/Table.test.js.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/Table/Table.tsx"],"names":["Table","props","keyExpr","React","multiSelect","setSelected","currentList","currentPageRows","row","count","selected","item","setSelectAllState","tmpFilteredRows","filterAndSortRows","setFilteredRows","setTotal","rowsFrom","currentPage","rowsTo","setFrom","setTo","setCurrentPageRows","pagination","setCurrentPage","setRowsPerPage","matchFilterCriteria","column","columns","sortingColumn","setSortedDirection","setSortedColumn","a","b","sortTableColumn","tmpColumn","remoteOperations","onTriggerSortingChange","previousPage","onPreviousPageClick","nextPage","onNextPageClick","filteredRows","changeRowsPerPage","value","onRowsPerPageChange","onRowClick","selectedText","window","currentSelection","existing","onSelectAllClick","selectAllState","showLoadingIndicator","Size"],"mappings":"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","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport {Size} from '../types'\n\n/**\n * Import custom styles.\n */\nimport {StyledTable, StyledTableSpinner, TableWrapper} from './TableStyles';\n\n/**\n * Import custom types.\n */\nimport {TableProps, TableColumn, TableSortingDirection} from './TableTypes';\nimport {LoadingIndicator} from '../LoadingIndicator';\nimport TableHeader from './TableHeaders';\nimport TableFooter from './TableFooter';\nimport TableBody from './TableBody';\n\nconst Table: React.FunctionComponent<TableProps> = (props: TableProps) => {\n let {\n onPreviousPageClick,\n onNextPageClick,\n onRowsPerPageChange,\n onTriggerSortingChange,\n columns,\n rows,\n remoteOperations,\n pagination,\n showLoadingIndicator,\n selectable,\n multiSelect,\n keyExpr\n } = props;\n\n // States used within the component\n const [rowsPerPage, setRowsPerPage] = React.useState<number>(10);\n const [filteredRows, setFilteredRows] = React.useState<any[]>([]);\n const [currentPageRows, setCurrentPageRows] = React.useState<any[]>([]);\n const [currentPage, setCurrentPage] = React.useState<number>(1);\n const [sortedColumn, setSortedColumn] = React.useState<string>('');\n const [sortedDirection, setSortedDirection] = React.useState<TableSortingDirection>('asc');\n const [from, setFrom] = React.useState<number>();\n const [to, setTo] = React.useState<number>();\n const [total, setTotal] = React.useState<number>();\n\n const [selectAllState, setSelectAllState] = React.useState<'all' | 'some' | 'none'>('none');\n\n const [selected, setSelected] = React.useState<any | any[]>(multiSelect ? [] : undefined);\n\n React.useEffect(() => {\n setSelected(props.selectedRows || (multiSelect ? [] : undefined))\n }, [props.selectedRows, multiSelect])\n\n /**\n * update select all checkbox state\n */\n React.useEffect(() => {\n if (multiSelect) {\n const currentList = currentPageRows.map(row => keyExpr ? row[keyExpr] : row);\n const count = selected.filter((item: any) => currentList.includes(item)).length;\n\n setSelectAllState(count === currentList.length ? 'all' : count > 0 ? 'some' : 'none');\n }\n }, [currentPageRows, multiSelect, selected, keyExpr])\n\n\n /**\n * Takes care of local pagination.\n * Works only in case remote pagination is not defined or is set to false.\n */\n React.useEffect(() => {\n if (!remoteOperations) {\n // Let's retrieve temporary filtered rows and update globally filtered rows\n const tmpFilteredRows = filterAndSortRows();\n setFilteredRows(tmpFilteredRows);\n setTotal(tmpFilteredRows.length);\n\n // Assign rows from and rows to\n const rowsFrom = (currentPage - 1) * rowsPerPage;\n const rowsTo = rowsFrom + rowsPerPage >= tmpFilteredRows.length ? tmpFilteredRows.length : rowsFrom + rowsPerPage;\n\n // Set from and to values\n setFrom(rowsFrom + 1);\n setTo(rowsTo);\n\n // Filter out the rows\n setCurrentPageRows(tmpFilteredRows.slice(rowsFrom, rowsTo));\n }\n }, [rowsPerPage, rows, currentPage, columns, sortedColumn, sortedDirection, remoteOperations]);\n\n /**\n * Takes care of remote pagination.\n * Works only in case remote pagination is set to true.\n */\n React.useEffect(() => {\n if (remoteOperations) {\n setCurrentPageRows(rows);\n\n // Let's assign pagination values\n setFrom(pagination?.from);\n setTo(pagination?.to);\n setTotal(pagination?.total);\n setCurrentPage(pagination?.currentPage!);\n setRowsPerPage(pagination?.rowsPerPage!);\n }\n }, [remoteOperations, pagination, rows]);\n\n /**\n * Filters out a rows by specific column filters and sorts them if any sorting is set.\n * @returns Filtered and sorted rows.\n */\n const filterAndSortRows = (): any[] => {\n let tmpFilteredRows = rows.filter((row) => {\n // Let's start with matched filter criteria\n let matchFilterCriteria = true;\n\n // Let's go through columns\n for (const column of columns) {\n // Let's check if filter value is specified for the column\n // And if it doesn't match the current row column value\n // Then let's update match filter criteria to failed\n if (column.filterValue && row[column.key].toLowerCase().indexOf(column.filterValue.toLowerCase()) === -1) {\n matchFilterCriteria = false;\n }\n }\n\n // Let's return row only in case match filter criteria succeeds\n if (matchFilterCriteria) {\n return row;\n }\n });\n\n // Let's apply sorting if needed\n if (columns.some((column) => column.sortingDirection)) {\n // Let's find the sorting column\n const sortingColumn = columns.find((column) => column.sortingDirection)!;\n\n // Update sorted column data\n setSortedDirection(sortingColumn.sortingDirection!);\n setSortedColumn(sortingColumn.key!);\n\n // Let's sort the rows\n tmpFilteredRows.sort((a, b) => {\n if (a[sortingColumn.key] > b[sortingColumn.key]) {\n return sortingColumn.sortingDirection === 'asc' ? 1 : -1;\n } else if (a[sortingColumn.key] < b[sortingColumn.key]) {\n return sortingColumn.sortingDirection === 'asc' ? -1 : 1;\n } else {\n return 0;\n }\n });\n }\n\n // Let's return filtered rows\n return tmpFilteredRows;\n };\n\n /**\n * Applies a specific sorting to a column.\n * If no sorting exists, then applies ascending initially\n * @param column - Column to which sorting should be applied.\n */\n const sortTableColumn = (column: TableColumn): void => {\n // Let's remove any active sorting\n columns = columns.map((tmpColumn: TableColumn) => {\n // Let's apply new sorting\n // Let's check if it is the column for which we have to apply sorting\n if (column.key === tmpColumn.key && tmpColumn.sortable) {\n // Let's check if sorting is not defined\n // If so, let's toggle the sorting direction\n if (tmpColumn.sortingDirection !== undefined) {\n if (tmpColumn.sortingDirection === 'asc') {\n tmpColumn.sortingDirection = 'desc';\n\n // Update sorted column and direction\n setSortedColumn(column.key);\n setSortedDirection('desc');\n\n // Let's trigger remote sorting trigger function\n if (remoteOperations && onTriggerSortingChange) {\n onTriggerSortingChange(column.key, 'desc');\n }\n } else {\n tmpColumn.sortingDirection = 'asc';\n\n // Update sorted column and direction\n setSortedColumn(column.key);\n setSortedDirection('asc');\n\n // Let's trigger remote sorting trigger function\n if (remoteOperations && onTriggerSortingChange) {\n onTriggerSortingChange(column.key, 'asc');\n }\n }\n } else {\n // Let's apply the initial sorting\n tmpColumn.sortingDirection = 'asc';\n\n // Update sorted column and direction\n setSortedColumn(column.key);\n setSortedDirection('asc');\n\n // Let's trigger remote sorting trigger function\n if (remoteOperations && onTriggerSortingChange) {\n onTriggerSortingChange(column.key, 'asc');\n }\n }\n } else if (tmpColumn.sortingDirection !== undefined) {\n // Let's remove sorting\n tmpColumn.sortingDirection = undefined;\n }\n\n return tmpColumn;\n });\n };\n\n /**\n * Navigates user back to the previous page and updates the current table page.\n */\n const previousPage = () => {\n if (remoteOperations) {\n // Let's inform parent component about page change\n if (onPreviousPageClick) {\n onPreviousPageClick();\n }\n } else {\n // Let's change the page within the component\n setCurrentPage(currentPage > 1 ? currentPage - 1 : 1);\n }\n };\n\n /**\n * Navigates user to the next page and updates the current table page.\n */\n const nextPage = () => {\n if (remoteOperations) {\n // Let's inform parent component about page change\n if (onNextPageClick) {\n onNextPageClick();\n }\n } else {\n // Let's change the page within the component\n setCurrentPage(currentPage * rowsPerPage >= filteredRows.length ? currentPage : currentPage + 1);\n }\n };\n\n /**\n * Updates the rows per page value and refreshes the table content accordingly.\n * @param value - Newly selected rows per page value.\n */\n const changeRowsPerPage = (value: number) => {\n // Let's check if we are using remote pagination\n if (remoteOperations) {\n // Inform parent component about rows per page change\n if (onRowsPerPageChange) {\n onRowsPerPageChange(value);\n }\n } else {\n // Let's reset current page to 1\n setCurrentPage(1);\n }\n\n // Let's set rows per page\n setRowsPerPage(value);\n };\n\n\n /**\n * Function which is called when a mouse click happens on a row to pass data to the parent component.\n * @param row - Row in which the link is located.\n */\n const onRowClick = (row: any): void => {\n const selectedText = window?.getSelection()?.toString();\n\n if (selectedText?.length === 0 && selectable) {\n const value = keyExpr ? row[keyExpr] : row;\n let currentSelection = value;\n if (!!multiSelect) {\n const existing = selected?.indexOf(value);\n if (existing > -1) {\n currentSelection = [...selected];\n currentSelection.splice(existing, 1);\n } else {\n currentSelection = [...selected, currentSelection];\n }\n }\n\n setSelected(currentSelection)\n props.onSelectionChange && props.onSelectionChange(currentSelection);\n }\n };\n\n /**\n * Function which is called when user clicks checkbox to select or deselect all rows.\n */\n const onSelectAllClick = () => {\n const currentList = currentPageRows.map(row => keyExpr ? row[keyExpr] : row);\n\n switch (selectAllState) {\n case 'all':\n setSelected([...selected].filter(item => !currentList.includes(item)));\n setSelectAllState('none');\n break;\n case 'none':\n setSelected([...selected, ...currentList]);\n setSelectAllState('all');\n break;\n case 'some':\n setSelected([...selected, ...currentList.filter(item => !selected.includes(item))]);\n setSelectAllState('all');\n break;\n }\n };\n\n /**\n * Return Table component.\n */\n return (\n <TableWrapper>\n <StyledTable cellPadding=\"0\" cellSpacing=\"0\" data-testid=\"TestTable\" className={'table'}>\n <TableHeader {...props}\n sortByColumn={sortTableColumn}\n onSelectAllClick={onSelectAllClick}\n selectAllState={selectAllState}/>\n <TableBody {...props}\n currentPageRows={currentPageRows}\n selected={selected}\n onRowClick={onRowClick}/>\n <TableFooter {...props}\n onRowsPerPageChange={changeRowsPerPage}\n rowsPerPage={rowsPerPage}\n from={from}\n to={to}\n total={total}\n nextPage={nextPage}\n prevPage={previousPage}/>\n </StyledTable>\n {showLoadingIndicator && (\n <StyledTableSpinner>\n <LoadingIndicator size={Size.Medium} color=\"#ffffff\"/>\n </StyledTableSpinner>\n )}\n </TableWrapper>\n );\n};\n\nexport default Table;\n"],"file":"Table.js"}
|
|
1
|
+
{"version":3,"sources":["../../../src/Table/Table.tsx"],"names":["Table","props","collapsed","collapsedRows","React","multiSelect","setSelected","currentList","currentPageRows","row","keyExpr","count","selected","item","setSelectAllState","tmpFilteredRows","filterAndSortRows","setFilteredRows","setTotal","rowsFrom","currentPage","rowsTo","setFrom","setTo","setCurrentPageRows","pagination","setCurrentPage","setRowsPerPage","isCollapsed","rows","setIsCollapsed","matchFilterCriteria","column","columns","sortingColumn","setSortedDirection","setSortedColumn","a","b","sortTableColumn","tmpColumn","remoteOperations","onTriggerSortingChange","previousPage","onPreviousPageClick","nextPage","onNextPageClick","filteredRows","changeRowsPerPage","value","onRowsPerPageChange","onRowClick","selectedText","window","currentSelection","existing","onSelectAllClick","selectAllState","showLoadingIndicator","Size"],"mappings":"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","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport {Size} from '../types'\n\n/**\n * Import custom styles.\n */\nimport {StyledTable, StyledTableSpinner, TableWrapper} from './TableStyles';\n\n/**\n * Import custom types.\n */\nimport {TableProps, TableColumn, TableSortingDirection} from './TableTypes';\nimport {LoadingIndicator} from '../LoadingIndicator';\nimport TableHeader from './TableHeaders';\nimport TableFooter from './TableFooter';\nimport TableBody from './TableBody';\n\nconst Table: React.FunctionComponent<TableProps> = (props: TableProps) => {\n let {\n onPreviousPageClick,\n onNextPageClick,\n onRowsPerPageChange,\n onTriggerSortingChange,\n columns,\n rows,\n remoteOperations,\n pagination,\n showLoadingIndicator,\n selectable,\n multiSelect,\n keyExpr,\n accordion,\n collapsed = true,\n collapsedRows\n } = props;\n\n // States used within the component\n const [rowsPerPage, setRowsPerPage] = React.useState<number>(10);\n const [filteredRows, setFilteredRows] = React.useState<any[]>([]);\n const [currentPageRows, setCurrentPageRows] = React.useState<any[]>([]);\n const [currentPage, setCurrentPage] = React.useState<number>(1);\n const [sortedColumn, setSortedColumn] = React.useState<string>('');\n const [sortedDirection, setSortedDirection] = React.useState<TableSortingDirection>('asc');\n const [from, setFrom] = React.useState<number>();\n const [to, setTo] = React.useState<number>();\n const [total, setTotal] = React.useState<number>();\n\n const [isCollapsed, setIsCollapsed] = React.useState(true);\n\n const [selectAllState, setSelectAllState] = React.useState<'all' | 'some' | 'none'>('none');\n\n const [selected, setSelected] = React.useState<any | any[]>(multiSelect ? [] : undefined);\n\n React.useEffect(() => {\n setSelected(props.selectedRows || (multiSelect ? [] : undefined))\n }, [props.selectedRows, multiSelect])\n\n /**\n * update select all checkbox state\n */\n React.useEffect(() => {\n if (multiSelect) {\n const currentList = currentPageRows.map(row => keyExpr ? row[keyExpr] : row);\n const count = selected.filter((item: any) => currentList.includes(item)).length;\n\n setSelectAllState(count === currentList.length ? 'all' : count > 0 ? 'some' : 'none');\n }\n }, [currentPageRows, multiSelect, selected, keyExpr])\n\n\n /**\n * Takes care of local pagination.\n * Works only in case remote pagination is not defined or is set to false.\n */\n React.useEffect(() => {\n if (!remoteOperations) {\n // Let's retrieve temporary filtered rows and update globally filtered rows\n const tmpFilteredRows = filterAndSortRows();\n setFilteredRows(tmpFilteredRows);\n setTotal(tmpFilteredRows.length);\n\n // Assign rows from and rows to\n const rowsFrom = (currentPage - 1) * rowsPerPage;\n const rowsTo = rowsFrom + rowsPerPage >= tmpFilteredRows.length ? tmpFilteredRows.length : rowsFrom + rowsPerPage;\n\n // Set from and to values\n setFrom(rowsFrom + 1);\n setTo(rowsTo);\n\n // Filter out the rows\n setCurrentPageRows(tmpFilteredRows.slice(rowsFrom, rowsTo));\n }\n }, [rowsPerPage, rows, currentPage, columns, sortedColumn, sortedDirection, remoteOperations]);\n\n /**\n * Takes care of remote pagination.\n * Works only in case remote pagination is set to true.\n */\n React.useEffect(() => {\n if (remoteOperations) {\n setCurrentPageRows(rows);\n\n // Let's assign pagination values\n setFrom(pagination?.from);\n setTo(pagination?.to);\n setTotal(pagination?.total);\n setCurrentPage(pagination?.currentPage!);\n setRowsPerPage(pagination?.rowsPerPage!);\n }\n }, [remoteOperations, pagination, rows]);\n\n /**\n * Sets number of rows to display when accordion.\n */\n React.useEffect(() => {\n if (!accordion) return;\n\n setRowsPerPage(isCollapsed ? collapsedRows || 10 : rows.length );\n }, [rows, accordion, collapsedRows, isCollapsed])\n\n React.useEffect(() => {\n if (!accordion) return;\n\n setIsCollapsed(!!collapsed);\n }, [ accordion, collapsed])\n\n /**\n * Filters out a rows by specific column filters and sorts them if any sorting is set.\n * @returns Filtered and sorted rows.\n */\n const filterAndSortRows = (): any[] => {\n let tmpFilteredRows = rows.filter((row) => {\n // Let's start with matched filter criteria\n let matchFilterCriteria = true;\n\n // Let's go through columns\n for (const column of columns) {\n // Let's check if filter value is specified for the column\n // And if it doesn't match the current row column value\n // Then let's update match filter criteria to failed\n if (column.filterValue && row[column.key].toLowerCase().indexOf(column.filterValue.toLowerCase()) === -1) {\n matchFilterCriteria = false;\n }\n }\n\n // Let's return row only in case match filter criteria succeeds\n if (matchFilterCriteria) {\n return row;\n }\n });\n\n // Let's apply sorting if needed\n if (columns.some((column) => column.sortingDirection)) {\n // Let's find the sorting column\n const sortingColumn = columns.find((column) => column.sortingDirection)!;\n\n // Update sorted column data\n setSortedDirection(sortingColumn.sortingDirection!);\n setSortedColumn(sortingColumn.key!);\n\n // Let's sort the rows\n tmpFilteredRows.sort((a, b) => {\n if (a[sortingColumn.key] > b[sortingColumn.key]) {\n return sortingColumn.sortingDirection === 'asc' ? 1 : -1;\n } else if (a[sortingColumn.key] < b[sortingColumn.key]) {\n return sortingColumn.sortingDirection === 'asc' ? -1 : 1;\n } else {\n return 0;\n }\n });\n }\n\n // Let's return filtered rows\n return tmpFilteredRows;\n };\n\n /**\n * Applies a specific sorting to a column.\n * If no sorting exists, then applies ascending initially\n * @param column - Column to which sorting should be applied.\n */\n const sortTableColumn = (column: TableColumn): void => {\n // Let's remove any active sorting\n columns = columns.map((tmpColumn: TableColumn) => {\n // Let's apply new sorting\n // Let's check if it is the column for which we have to apply sorting\n if (column.key === tmpColumn.key && tmpColumn.sortable) {\n // Let's check if sorting is not defined\n // If so, let's toggle the sorting direction\n if (tmpColumn.sortingDirection !== undefined) {\n if (tmpColumn.sortingDirection === 'asc') {\n tmpColumn.sortingDirection = 'desc';\n\n // Update sorted column and direction\n setSortedColumn(column.key);\n setSortedDirection('desc');\n\n // Let's trigger remote sorting trigger function\n if (remoteOperations && onTriggerSortingChange) {\n onTriggerSortingChange(column.key, 'desc');\n }\n } else {\n tmpColumn.sortingDirection = 'asc';\n\n // Update sorted column and direction\n setSortedColumn(column.key);\n setSortedDirection('asc');\n\n // Let's trigger remote sorting trigger function\n if (remoteOperations && onTriggerSortingChange) {\n onTriggerSortingChange(column.key, 'asc');\n }\n }\n } else {\n // Let's apply the initial sorting\n tmpColumn.sortingDirection = 'asc';\n\n // Update sorted column and direction\n setSortedColumn(column.key);\n setSortedDirection('asc');\n\n // Let's trigger remote sorting trigger function\n if (remoteOperations && onTriggerSortingChange) {\n onTriggerSortingChange(column.key, 'asc');\n }\n }\n } else if (tmpColumn.sortingDirection !== undefined) {\n // Let's remove sorting\n tmpColumn.sortingDirection = undefined;\n }\n\n return tmpColumn;\n });\n };\n\n /**\n * Navigates user back to the previous page and updates the current table page.\n */\n const previousPage = () => {\n if (remoteOperations) {\n // Let's inform parent component about page change\n if (onPreviousPageClick) {\n onPreviousPageClick();\n }\n } else {\n // Let's change the page within the component\n setCurrentPage(currentPage > 1 ? currentPage - 1 : 1);\n }\n };\n\n /**\n * Navigates user to the next page and updates the current table page.\n */\n const nextPage = () => {\n if (remoteOperations) {\n // Let's inform parent component about page change\n if (onNextPageClick) {\n onNextPageClick();\n }\n } else {\n // Let's change the page within the component\n setCurrentPage(currentPage * rowsPerPage >= filteredRows.length ? currentPage : currentPage + 1);\n }\n };\n\n /**\n * Updates the rows per page value and refreshes the table content accordingly.\n * @param value - Newly selected rows per page value.\n */\n const changeRowsPerPage = (value: number) => {\n // Let's check if we are using remote pagination\n if (remoteOperations) {\n // Inform parent component about rows per page change\n if (onRowsPerPageChange) {\n onRowsPerPageChange(value);\n }\n } else {\n // Let's reset current page to 1\n setCurrentPage(1);\n }\n\n // Let's set rows per page\n setRowsPerPage(value);\n };\n\n\n /**\n * Function which is called when a mouse click happens on a row to pass data to the parent component.\n * @param row - Row in which the link is located.\n */\n const onRowClick = (row: any): void => {\n const selectedText = window?.getSelection()?.toString();\n\n if (selectedText?.length === 0 && selectable) {\n const value = keyExpr ? row[keyExpr] : row;\n let currentSelection = value;\n if (!!multiSelect) {\n const existing = selected?.indexOf(value);\n if (existing > -1) {\n currentSelection = [...selected];\n currentSelection.splice(existing, 1);\n } else {\n currentSelection = [...selected, currentSelection];\n }\n }\n\n setSelected(currentSelection)\n props.onSelectionChange && props.onSelectionChange(currentSelection);\n }\n };\n\n /**\n * Function which is called when user clicks checkbox to select or deselect all rows.\n */\n const onSelectAllClick = () => {\n const currentList = currentPageRows.map(row => keyExpr ? row[keyExpr] : row);\n\n switch (selectAllState) {\n case 'all':\n setSelected([...selected].filter(item => !currentList.includes(item)));\n setSelectAllState('none');\n break;\n case 'none':\n setSelected([...selected, ...currentList]);\n setSelectAllState('all');\n break;\n case 'some':\n setSelected([...selected, ...currentList.filter(item => !selected.includes(item))]);\n setSelectAllState('all');\n break;\n }\n };\n\n /**\n * Return Table component.\n */\n return (\n <TableWrapper>\n <StyledTable cellPadding=\"0\" cellSpacing=\"0\" data-testid=\"TestTable\" className={'table'}>\n <TableHeader {...props}\n sortByColumn={sortTableColumn}\n onSelectAllClick={onSelectAllClick}\n selectAllState={selectAllState}/>\n <TableBody {...props}\n currentPageRows={currentPageRows}\n selected={selected}\n onRowClick={onRowClick}/>\n <TableFooter {...props}\n onRowsPerPageChange={changeRowsPerPage}\n rowsPerPage={rowsPerPage}\n setIsCollapsed={setIsCollapsed}\n isCollapsed={isCollapsed}\n from={from}\n to={to}\n total={total}\n nextPage={nextPage}\n prevPage={previousPage}/>\n </StyledTable>\n {showLoadingIndicator && (\n <StyledTableSpinner>\n <LoadingIndicator size={Size.Medium} color=\"#ffffff\"/>\n </StyledTableSpinner>\n )}\n </TableWrapper>\n );\n};\n\nexport default Table;\n"],"file":"Table.js"}
|
|
@@ -157,7 +157,7 @@
|
|
|
157
157
|
{
|
|
158
158
|
const props = _objectSpread({
|
|
159
159
|
variant: 'default',
|
|
160
|
-
href: ''
|
|
160
|
+
href: '#'
|
|
161
161
|
}, column.additionalProps);
|
|
162
162
|
|
|
163
163
|
return /*#__PURE__*/React.createElement(_HyperLink.HyperLink, _extends({
|
|
@@ -221,7 +221,7 @@
|
|
|
221
221
|
case 'number':
|
|
222
222
|
case 'text':
|
|
223
223
|
default:
|
|
224
|
-
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_TableStyles.StyledTableCellIcon, null, column.icon), /*#__PURE__*/React.createElement(
|
|
224
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, column.icon && /*#__PURE__*/React.createElement(_TableStyles.StyledTableCellIcon, null, column.icon), /*#__PURE__*/React.createElement(_TableStyles.StyledTableCellText, null, row[column.key]));
|
|
225
225
|
}
|
|
226
226
|
};
|
|
227
227
|
|
|
@@ -250,7 +250,7 @@
|
|
|
250
250
|
},
|
|
251
251
|
title: column.shortenText && row[column.key]
|
|
252
252
|
}, /*#__PURE__*/React.createElement(_TableStyles.StyledTableCellContent, {
|
|
253
|
-
className: `${column.shortenText
|
|
253
|
+
className: `${column.shortenText ? `truncate-text` : ''} ${column.justify || ''}`
|
|
254
254
|
}, renderCellBody(column, row)))))) : /*#__PURE__*/React.createElement(_TableStyles.StyledTableBodyRow, {
|
|
255
255
|
"data-testid": "TestTableNoDataRow"
|
|
256
256
|
}, /*#__PURE__*/React.createElement(_TableStyles.StyledTableCell, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/Table/TableBody.tsx"],"names":["currentPageRows","onRowClick","selected","TableBody","props","renderCellBody","column","variant","href","color","e","row","iconColor","shape","useTransparentBackground","size","Size","Small","index","event","key","maxWidth","width"],"mappings":"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","sourcesContent":["import {TableColumn, TableProps} from './TableTypes';\nimport {Button} from '../Button';\nimport {Size} from '../types';\nimport * as React from 'react';\nimport {Checkbox} from '../InputFields';\nimport {ButtonProps} from '../Button/Button';\nimport IconButton, {IconButtonProps} from '../Button/Iconbutton';\nimport {HyperlinkProps} from '../HyperLink/HyperLink';\nimport {HyperLink} from '../HyperLink';\nimport {\n StyledTableBody,\n StyledTableBodyRow,\n StyledTableCell,\n StyledTableCellContent,\n StyledTableCellIcon\n} from './TableStyles';\n\n\ninterface TableBodyProps extends TableProps {\n currentPageRows: any[];\n onRowClick?: (row: any) => void;\n selected?: any | any[];\n}\n\nconst TableBody: React.FC<TableBodyProps> = (props) => {\n\n const renderCellBody = (column: TableColumn, row: any) => {\n switch (column.type) {\n case 'link': {\n const props = ({variant: 'default', href: '', ...column.additionalProps}) as HyperlinkProps;\n return (\n <HyperLink style={column.colorFn && {color: column.colorFn(row, column.key)}}\n {...props}\n onClick={(e) => {\n e.preventDefault();\n e.stopPropagation();\n column.action && column.action(row, e);\n }}>\n {row[column.key]}\n </HyperLink>\n );\n }\n case 'icon': {\n const props = ({\n iconColor: column.colorFn && column.colorFn(row, column.key),\n variant: 'secondary',\n shape: 'circular',\n useTransparentBackground: true,\n ...column.additionalProps\n }) as IconButtonProps;\n return <IconButton {...props}\n action={(e) => {\n e?.stopPropagation();\n column.action && column.action(row, e);\n }}>\n {column.icon}\n </IconButton>\n }\n case 'button': {\n const props = ({\n variant: 'tertiary',\n size: Size.Small,\n ...column.additionalProps\n }) as ButtonProps;\n return <Button style={column.colorFn && {color: column.colorFn(row, column.key)}}\n {...props}\n onClick={(e) => {\n e?.stopPropagation();\n column.action && column.action(row, e);\n }}>\n {row[column.key]}\n </Button>\n }\n case 'boolean':\n return <Checkbox selected={!!row[column.key]} readonly={true}/>;\n case 'custom':\n return column.customContent && column.customContent(row, column.key);\n case 'number':\n case 'text':\n default:\n return (\n <>\n <StyledTableCellIcon>{column.icon}</StyledTableCellIcon>\n <span>{row[column.key]}</span>\n </>\n );\n }\n }\n\n return (\n <StyledTableBody>\n {props.currentPageRows.length > 0 ? (\n props.currentPageRows.map((row: any, index: number) => (\n <StyledTableBodyRow key={`row_${index}`}\n className={props.selectable ? 'selectable' : ''}\n onClick={() => props.onRowClick && props.onRowClick(row)}\n onMouseDown={(event) => event.preventDefault()}\n onKeyPress={(e) => {\n if (e.key === 'Enter') {\n props.onRowClick && props.onRowClick(row);\n }\n }}\n tabIndex={props.selectable ? 0 : undefined}\n data-testid=\"TestTableDataRow\">\n {\n props.multiSelect &&\n <StyledTableCell>\n <StyledTableCellContent>\n <Checkbox selected={props.selected?.indexOf(props.keyExpr ? row[props.keyExpr] : row) > -1}\n readonly={true}/>\n </StyledTableCellContent>\n </StyledTableCell>\n }\n {props.columns.map((column: TableColumn) => (\n <StyledTableCell key={`row_${index}_${column.key}`}\n style={column.colorFn ? {\n color: column.colorFn(row, column.key),\n maxWidth: column.width\n } : {maxWidth: column.width}}\n title={column.shortenText && row[column.key]}>\n <StyledTableCellContent className={`${column.shortenText && `truncate-text`} ${column.justify || ''}`}>\n {renderCellBody(column, row)}\n </StyledTableCellContent>\n </StyledTableCell>\n ))}\n </StyledTableBodyRow>\n ))\n ) : (\n <StyledTableBodyRow data-testid=\"TestTableNoDataRow\">\n <StyledTableCell colSpan={props.columns.length + (props.multiSelect ? 1 : 0)}>\n <StyledTableCellContent className={'center'}>\n There are no rows to display\n </StyledTableCellContent>\n </StyledTableCell>\n </StyledTableBodyRow>\n )}\n\n </StyledTableBody>\n );\n }\n;\n\nexport default TableBody;\n"],"file":"TableBody.js"}
|
|
1
|
+
{"version":3,"sources":["../../../src/Table/TableBody.tsx"],"names":["currentPageRows","onRowClick","selected","TableBody","props","renderCellBody","column","variant","href","color","e","row","iconColor","shape","useTransparentBackground","size","Size","Small","index","event","key","maxWidth","width"],"mappings":"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","sourcesContent":["import {TableColumn, TableProps} from './TableTypes';\nimport {Button} from '../Button';\nimport {Size} from '../types';\nimport * as React from 'react';\nimport {Checkbox} from '../InputFields';\nimport {ButtonProps} from '../Button/Button';\nimport IconButton, {IconButtonProps} from '../Button/Iconbutton';\nimport {HyperlinkProps} from '../HyperLink/HyperLink';\nimport {HyperLink} from '../HyperLink';\nimport {\n StyledTableBody,\n StyledTableBodyRow,\n StyledTableCell,\n StyledTableCellContent,\n StyledTableCellIcon, StyledTableCellText\n} from './TableStyles';\n\n\ninterface TableBodyProps extends TableProps {\n currentPageRows: any[];\n onRowClick?: (row: any) => void;\n selected?: any | any[];\n}\n\nconst TableBody: React.FC<TableBodyProps> = (props) => {\n\n const renderCellBody = (column: TableColumn, row: any) => {\n switch (column.type) {\n case 'link': {\n const props = ({variant: 'default', href: '#', ...column.additionalProps}) as HyperlinkProps;\n return (\n <HyperLink style={column.colorFn && {color: column.colorFn(row, column.key)}}\n {...props}\n onClick={(e) => {\n e.preventDefault();\n e.stopPropagation();\n column.action && column.action(row, e);\n }}>\n {row[column.key]}\n </HyperLink>\n );\n }\n case 'icon': {\n const props = ({\n iconColor: column.colorFn && column.colorFn(row, column.key),\n variant: 'secondary',\n shape: 'circular',\n useTransparentBackground: true,\n ...column.additionalProps\n }) as IconButtonProps;\n return <IconButton {...props}\n action={(e) => {\n e?.stopPropagation();\n column.action && column.action(row, e);\n }}>\n {column.icon}\n </IconButton>\n }\n case 'button': {\n const props = ({\n variant: 'tertiary',\n size: Size.Small,\n ...column.additionalProps\n }) as ButtonProps;\n return <Button style={column.colorFn && {color: column.colorFn(row, column.key)}}\n {...props}\n onClick={(e) => {\n e?.stopPropagation();\n column.action && column.action(row, e);\n }}>\n {row[column.key]}\n </Button>\n }\n case 'boolean':\n return <Checkbox selected={!!row[column.key]} readonly={true}/>;\n case 'custom':\n return column.customContent && column.customContent(row, column.key);\n case 'number':\n case 'text':\n default:\n return (\n <>\n {\n column.icon &&\n <StyledTableCellIcon>{column.icon}</StyledTableCellIcon>\n }\n <StyledTableCellText>{row[column.key]}</StyledTableCellText>\n </>\n );\n }\n }\n\n return (\n <StyledTableBody>\n {props.currentPageRows.length > 0 ? (\n props.currentPageRows.map((row: any, index: number) => (\n <StyledTableBodyRow key={`row_${index}`}\n className={props.selectable ? 'selectable' : ''}\n onClick={() => props.onRowClick && props.onRowClick(row)}\n onMouseDown={(event) => event.preventDefault()}\n onKeyPress={(e) => {\n if (e.key === 'Enter') {\n props.onRowClick && props.onRowClick(row);\n }\n }}\n tabIndex={props.selectable ? 0 : undefined}\n data-testid=\"TestTableDataRow\">\n {\n props.multiSelect &&\n <StyledTableCell>\n <StyledTableCellContent>\n <Checkbox selected={props.selected?.indexOf(props.keyExpr ? row[props.keyExpr] : row) > -1}\n readonly={true}/>\n </StyledTableCellContent>\n </StyledTableCell>\n }\n {props.columns.map((column: TableColumn) => (\n <StyledTableCell key={`row_${index}_${column.key}`}\n style={column.colorFn ? {\n color: column.colorFn(row, column.key),\n maxWidth: column.width\n } : {maxWidth: column.width}}\n title={column.shortenText && row[column.key]}>\n <StyledTableCellContent\n className={`${column.shortenText ? `truncate-text` : ''} ${column.justify || ''}`}>\n {renderCellBody(column, row)}\n </StyledTableCellContent>\n </StyledTableCell>\n ))}\n </StyledTableBodyRow>\n ))\n ) : (\n <StyledTableBodyRow data-testid=\"TestTableNoDataRow\">\n <StyledTableCell colSpan={props.columns.length + (props.multiSelect ? 1 : 0)}>\n <StyledTableCellContent className={'center'}>\n There are no rows to display\n </StyledTableCellContent>\n </StyledTableCell>\n </StyledTableBodyRow>\n )}\n\n </StyledTableBody>\n );\n }\n;\n\nexport default TableBody;\n"],"file":"TableBody.js"}
|
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
(function (global, factory) {
|
|
2
2
|
if (typeof define === "function" && define.amd) {
|
|
3
|
-
define(["exports", "prop-types", "react", "../Dropdown", "../Button", "../icons/systemicons/SystemIcons", "../styles", "./TableStyles"], factory);
|
|
3
|
+
define(["exports", "prop-types", "react", "../Dropdown", "../Button", "../icons/systemicons/SystemIcons", "../styles", "./TableStyles", "../icons"], factory);
|
|
4
4
|
} else if (typeof exports !== "undefined") {
|
|
5
|
-
factory(exports, require("prop-types"), require("react"), require("../Dropdown"), require("../Button"), require("../icons/systemicons/SystemIcons"), require("../styles"), require("./TableStyles"));
|
|
5
|
+
factory(exports, require("prop-types"), require("react"), require("../Dropdown"), require("../Button"), require("../icons/systemicons/SystemIcons"), require("../styles"), require("./TableStyles"), require("../icons"));
|
|
6
6
|
} else {
|
|
7
7
|
var mod = {
|
|
8
8
|
exports: {}
|
|
9
9
|
};
|
|
10
|
-
factory(mod.exports, global.propTypes, global.react, global.Dropdown, global.Button, global.SystemIcons, global.styles, global.TableStyles);
|
|
10
|
+
factory(mod.exports, global.propTypes, global.react, global.Dropdown, global.Button, global.SystemIcons, global.styles, global.TableStyles, global.icons);
|
|
11
11
|
global.undefined = mod.exports;
|
|
12
12
|
}
|
|
13
|
-
})(this, function (exports, _propTypes, _react, _Dropdown, _Button, _SystemIcons, _styles, _TableStyles) {
|
|
13
|
+
})(this, function (exports, _propTypes, _react, _Dropdown, _Button, _SystemIcons, _styles, _TableStyles, _icons) {
|
|
14
14
|
"use strict";
|
|
15
15
|
|
|
16
16
|
Object.defineProperty(exports, "__esModule", {
|
|
@@ -41,9 +41,14 @@
|
|
|
41
41
|
return /*#__PURE__*/_react2.default.createElement(_TableStyles.StyledTableFooter, null, /*#__PURE__*/_react2.default.createElement("tr", null, /*#__PURE__*/_react2.default.createElement("td", {
|
|
42
42
|
colSpan: props.columns.length + (props.multiSelect ? 1 : 0),
|
|
43
43
|
"data-testid": "TestTableFooterRow"
|
|
44
|
-
},
|
|
44
|
+
}, props.accordion && /*#__PURE__*/_react2.default.createElement(_TableStyles.StyledTableFooterCollapseButton, {
|
|
45
|
+
onClick: () => props.setIsCollapsed(!props.isCollapsed),
|
|
46
|
+
onMouseDown: e => e.preventDefault(),
|
|
47
|
+
disabled: props.isCollapsed && props.rows.length <= props.rowsPerPage
|
|
48
|
+
}, props.isCollapsed && /*#__PURE__*/_react2.default.createElement(_react2.default.Fragment, null, /*#__PURE__*/_react2.default.createElement("span", null, "Show more(", props.rows.length - props.rowsPerPage, ")"), /*#__PURE__*/_react2.default.createElement(_icons.SystemIcons.ArrowDropDown, null)), !props.isCollapsed && /*#__PURE__*/_react2.default.createElement(_react2.default.Fragment, null, /*#__PURE__*/_react2.default.createElement("span", null, "Show less"), /*#__PURE__*/_react2.default.createElement(_icons.SystemIcons.ArrowDropUp, null))), !props.accordion && /*#__PURE__*/_react2.default.createElement(_TableStyles.StyledTableFooterContent, null, /*#__PURE__*/_react2.default.createElement(_Dropdown.DropdownFilter, {
|
|
45
49
|
id: "rows-per-page",
|
|
46
50
|
list: rowsPerPageValues,
|
|
51
|
+
margin: '0',
|
|
47
52
|
disableSorting: true,
|
|
48
53
|
onSelect: value => props.onRowsPerPageChange(+value),
|
|
49
54
|
initalValue: dropDownText,
|
|
@@ -75,7 +80,9 @@
|
|
|
75
80
|
to: _propTypes2.default.number,
|
|
76
81
|
total: _propTypes2.default.number,
|
|
77
82
|
nextPage: _propTypes2.default.func.isRequired,
|
|
78
|
-
prevPage: _propTypes2.default.func.isRequired
|
|
83
|
+
prevPage: _propTypes2.default.func.isRequired,
|
|
84
|
+
setIsCollapsed: _propTypes2.default.func.isRequired,
|
|
85
|
+
isCollapsed: _propTypes2.default.bool.isRequired
|
|
79
86
|
};
|
|
80
87
|
exports.default = TableFooter;
|
|
81
88
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/Table/TableFooter.tsx"],"names":["onRowsPerPageChange","rowsPerPage","from","to","total","nextPage","prevPage","TableFooter","props","rowsPerPageValues","label","dropDownText","value","COLORS","neutral_600"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"sources":["../../../src/Table/TableFooter.tsx"],"names":["onRowsPerPageChange","rowsPerPage","from","to","total","nextPage","prevPage","setIsCollapsed","isCollapsed","TableFooter","props","rowsPerPageValues","label","dropDownText","e","value","COLORS","neutral_600"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {TableProps} from './TableTypes';\nimport {DropdownFilter} from '../Dropdown';\nimport {IconButton} from '../Button';\nimport {ChevronLeft, ChevronRight} from '../icons/systemicons/SystemIcons';\nimport {COLORS} from '../styles';\nimport {DropdownFilterItem} from '../Dropdown/DropdownFilter';\nimport {\n StyledTableFooter, StyledTableFooterCollapseButton,\n StyledTableFooterContent,\n StyledTableFooterControls,\n StyledTableFooterCurrentInfo\n} from './TableStyles';\nimport {SystemIcons} from '../icons';\n\n\ninterface TableFooterProps extends TableProps {\n onRowsPerPageChange: (value: number) => void;\n rowsPerPage: number;\n from?: number;\n to?: number;\n total?: number;\n nextPage: () => void;\n prevPage: () => void;\n setIsCollapsed: (isCollapsed: boolean) => void;\n isCollapsed: boolean;\n}\n\nconst TableFooter: React.FunctionComponent<TableFooterProps> = (props) => {\n const rowsPerPageValues: DropdownFilterItem[] = [{label: '10'}, {label: '20'}, {label: '50'}, {label: '100'}];\n\n const dropDownText = `Rows per page: ${props.rowsPerPage}`;\n\n return (\n <StyledTableFooter>\n <tr>\n <td colSpan={props.columns.length + (props.multiSelect ? 1 : 0)} data-testid=\"TestTableFooterRow\">\n {\n props.accordion &&\n <StyledTableFooterCollapseButton onClick={() => props.setIsCollapsed(!props.isCollapsed)}\n onMouseDown={e => e.preventDefault()}\n disabled={props.isCollapsed && props.rows.length <= props.rowsPerPage}>\n {\n props.isCollapsed &&\n <>\n <span>Show more({props.rows.length - props.rowsPerPage})</span>\n <SystemIcons.ArrowDropDown/>\n </>\n }\n {\n !props.isCollapsed &&\n <>\n <span>Show less</span>\n <SystemIcons.ArrowDropUp/>\n </>\n }\n </StyledTableFooterCollapseButton>\n }\n {\n !props.accordion &&\n <StyledTableFooterContent>\n <DropdownFilter\n id=\"rows-per-page\"\n list={rowsPerPageValues}\n margin={'0'}\n disableSorting={true}\n onSelect={(value) => props.onRowsPerPageChange(+value)}\n initalValue={dropDownText}\n keepInitialValue={true}\n isButton={true}\n />\n <StyledTableFooterCurrentInfo>\n {props.total === 0 ? 0 : props.from}-{props.to} of {props.total}\n </StyledTableFooterCurrentInfo>\n <StyledTableFooterControls>\n <IconButton variant=\"secondary\" shape=\"circular\" action={() => props.prevPage()}\n disabled={props.from === 1}>\n <ChevronLeft size=\"24\" color={COLORS.neutral_600}/>\n </IconButton>\n <IconButton variant=\"secondary\" shape=\"circular\" action={() => props.nextPage()}\n disabled={props.to === props.total}>\n <ChevronRight size=\"24\" color={COLORS.neutral_600}/>\n </IconButton>\n </StyledTableFooterControls>\n </StyledTableFooterContent>\n }\n </td>\n </tr>\n </StyledTableFooter>\n );\n};\n\n\nexport default TableFooter;\n"],"file":"TableFooter.js"}
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
Object.defineProperty(exports, "__esModule", {
|
|
17
17
|
value: true
|
|
18
18
|
});
|
|
19
|
-
exports.StyledTableSpinner = exports.StyledTableFooterControls = exports.StyledTableFooterCurrentInfo = exports.StyledTableFooterContent = exports.StyledTableFooter = exports.StyledTableCellIcon = exports.StyledTableCellContent = exports.StyledTableCell = exports.StyledTableBody = exports.StyledTableBodyRow = exports.StyledTableHeaderColumn = exports.StyledTableHeaderColumnContent = exports.StyledTableHeaderColumns = exports.StyledTableHeaderTitleContent = exports.StyledTableHeaderTitle = exports.StyledTableHeader = exports.StyledTable = exports.TableWrapper = undefined;
|
|
19
|
+
exports.StyledTableFooterCollapseButton = exports.StyledTableSpinner = exports.StyledTableFooterControls = exports.StyledTableFooterCurrentInfo = exports.StyledTableFooterContent = exports.StyledTableFooter = exports.StyledTableCellText = exports.StyledTableCellIcon = exports.StyledTableCellContent = exports.StyledTableCell = exports.StyledTableBody = exports.StyledTableBodyRow = exports.StyledTableHeaderColumn = exports.StyledTableHeaderColumnContent = exports.StyledTableHeaderColumns = exports.StyledTableHeaderTitleContent = exports.StyledTableHeaderTitle = exports.StyledTableHeader = exports.StyledTable = exports.TableWrapper = undefined;
|
|
20
20
|
|
|
21
21
|
var _styledComponents2 = _interopRequireDefault(_styledComponents);
|
|
22
22
|
|
|
@@ -43,6 +43,7 @@
|
|
|
43
43
|
const StyledTable = exports.StyledTable = _styledComponents2.default.table`
|
|
44
44
|
background: transparent;
|
|
45
45
|
width: 100%;
|
|
46
|
+
table-layout: fixed;
|
|
46
47
|
`;
|
|
47
48
|
const StyledTableHeader = exports.StyledTableHeader = _styledComponents2.default.thead`
|
|
48
49
|
`;
|
|
@@ -117,6 +118,10 @@
|
|
|
117
118
|
opacity: 1;
|
|
118
119
|
}
|
|
119
120
|
|
|
121
|
+
&.sorted {
|
|
122
|
+
background-color: ${_styles.COLORS.neutral_20};
|
|
123
|
+
}
|
|
124
|
+
|
|
120
125
|
`;
|
|
121
126
|
const StyledTableBodyRow = exports.StyledTableBodyRow = _styledComponents2.default.tr`
|
|
122
127
|
cursor: pointer;
|
|
@@ -147,7 +152,7 @@
|
|
|
147
152
|
}
|
|
148
153
|
|
|
149
154
|
${StyledTableBodyRow}:nth-child(even):not(:hover):not(:focus):not(:active) {
|
|
150
|
-
background-color: ${_styles.COLORS.
|
|
155
|
+
background-color: ${_styles.COLORS.neutral_20};
|
|
151
156
|
}
|
|
152
157
|
`;
|
|
153
158
|
const StyledTableCell = exports.StyledTableCell = _styledComponents2.default.td``;
|
|
@@ -155,10 +160,11 @@
|
|
|
155
160
|
min-height: 48px;
|
|
156
161
|
|
|
157
162
|
padding: 0 16px;
|
|
158
|
-
${(0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Regular,
|
|
163
|
+
${(0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.black)}
|
|
159
164
|
|
|
160
165
|
display: flex;
|
|
161
166
|
align-items: center;
|
|
167
|
+
justify-content: left;
|
|
162
168
|
gap: 8px;
|
|
163
169
|
|
|
164
170
|
&.truncate-text,
|
|
@@ -190,6 +196,9 @@
|
|
|
190
196
|
width: 24px;
|
|
191
197
|
height: 24px;
|
|
192
198
|
}
|
|
199
|
+
`;
|
|
200
|
+
const StyledTableCellText = exports.StyledTableCellText = _styledComponents2.default.span`
|
|
201
|
+
padding: 12px 0;
|
|
193
202
|
`;
|
|
194
203
|
const StyledTableFooter = exports.StyledTableFooter = _styledComponents2.default.tfoot`
|
|
195
204
|
`;
|
|
@@ -202,6 +211,7 @@
|
|
|
202
211
|
display: flex;
|
|
203
212
|
align-items: center;
|
|
204
213
|
justify-content: right;
|
|
214
|
+
|
|
205
215
|
`;
|
|
206
216
|
const StyledTableFooterCurrentInfo = exports.StyledTableFooterCurrentInfo = _styledComponents2.default.span`
|
|
207
217
|
padding: 0 16px;
|
|
@@ -216,6 +226,49 @@
|
|
|
216
226
|
position: absolute;
|
|
217
227
|
background-color: rgba(0, 0, 0, 0.5);
|
|
218
228
|
top: 0;
|
|
229
|
+
`;
|
|
230
|
+
const StyledTableFooterCollapseButton = exports.StyledTableFooterCollapseButton = _styledComponents2.default.button`
|
|
231
|
+
position: relative;
|
|
232
|
+
border-bottom: 1px solid ${_styles.COLORS.neutral_200};
|
|
233
|
+
border-top: 1px solid ${_styles.COLORS.neutral_200};
|
|
234
|
+
border-left: none;
|
|
235
|
+
border-right: none;
|
|
236
|
+
box-sizing: border-box;
|
|
237
|
+
min-height: 48px;
|
|
238
|
+
display: flex;
|
|
239
|
+
width: 100%;
|
|
240
|
+
align-items: center;
|
|
241
|
+
justify-content: center;
|
|
242
|
+
gap: 4px;
|
|
243
|
+
background: ${_styles.COLORS.white};
|
|
244
|
+
|
|
245
|
+
cursor: pointer;
|
|
246
|
+
|
|
247
|
+
${(0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Bold, _styles.COLORS.neutral_800)}
|
|
248
|
+
&:focus {
|
|
249
|
+
outline: none;
|
|
250
|
+
z-index: ${_zIndexes.Z_INDEXES.focus};
|
|
251
|
+
color: ${_styles.COLORS.neutral_600};
|
|
252
|
+
box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2E7FA1;
|
|
253
|
+
}
|
|
254
|
+
|
|
255
|
+
&:hover {
|
|
256
|
+
z-index: ${_zIndexes.Z_INDEXES.hover};
|
|
257
|
+
background: ${_styles.COLORS.primary_20};
|
|
258
|
+
color: ${_styles.COLORS.primary_700};
|
|
259
|
+
}
|
|
260
|
+
|
|
261
|
+
&:active {
|
|
262
|
+
box-shadow: none;
|
|
263
|
+
z-index: ${_zIndexes.Z_INDEXES.active};
|
|
264
|
+
background: ${_styles.COLORS.primary_100};
|
|
265
|
+
color: ${_styles.COLORS.primary_800};
|
|
266
|
+
}
|
|
267
|
+
|
|
268
|
+
&:disabled {
|
|
269
|
+
display: none;
|
|
270
|
+
}
|
|
271
|
+
|
|
219
272
|
`;
|
|
220
273
|
});
|
|
221
274
|
//# sourceMappingURL=TableStyles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/Table/TableStyles.ts"],"names":["TableWrapper","styled","div","StyledTable","table","StyledTableHeader","thead","StyledTableHeaderTitle","tr","StyledTableHeaderTitleContent","COLORS","neutral_200","ComponentLStyling","ComponentTextStyle","StyledTableHeaderColumns","StyledTableHeaderColumnContent","StyledTableHeaderColumn","th","ComponentSStyling","white","primary_20","primary_700","Z_INDEXES","hover","primary_100","primary_800","active","focus_25","focus","StyledTableBodyRow","primary_200","StyledTableBody","tbody","neutral_100","StyledTableCell","td","StyledTableCellContent","StyledTableCellIcon","neutral_700","StyledTableFooter","tfoot","StyledTableFooterContent","StyledTableFooterCurrentInfo","span","ComponentXSStyling","StyledTableFooterControls","StyledTableSpinner"],"mappings":"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","sourcesContent":["/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\n\n/**\n * Import custom style properties.\n */\nimport {COLORS} from '../styles';\nimport {\n ComponentLStyling,\n ComponentMStyling,\n ComponentSStyling,\n ComponentTextStyle,\n ComponentXSStyling\n} from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\n/**\n * Table styles\n */\n\nexport const TableWrapper = styled.div`\n position: relative;\n`;\n\n\nexport const StyledTable = styled.table`\n background: transparent;\n width: 100%;\n`;\n\nexport const StyledTableHeader = styled.thead`\n`;\n\nexport const StyledTableHeaderTitle = styled.tr`\n`;\n\nexport const StyledTableHeaderTitleContent = styled.div`\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n box-sizing: border-box;\n min-height: 56px;\n border-bottom: 1px solid ${COLORS.neutral_200};\n border-top: 2px solid ${COLORS.neutral_200};\n padding: 0 16px;\n\n ${ComponentLStyling(ComponentTextStyle.Bold, COLORS.black)}\n .title-menu {\n margin-right: -16px;\n }\n`;\n\nexport const StyledTableHeaderColumns = styled.tr`\n`;\n\nexport const StyledTableHeaderColumnContent = styled.div`\n box-sizing: border-box;\n min-height: 56px;\n padding: 0 16px;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-top: 1px solid ${COLORS.neutral_200};\n border-bottom: 1px solid ${COLORS.neutral_200};\n`;\n\nexport const StyledTableHeaderColumn = styled.th`\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n position: relative;\n\n background-color: ${COLORS.white};\n\n //fixes header heights no idea why\n height: 1px;\n\n &.sortable {\n cursor: pointer;\n\n &:hover {\n background-color: ${COLORS.primary_20};\n color: ${COLORS.primary_700};\n z-index: ${Z_INDEXES.hover};\n }\n\n &:active {\n background-color: ${COLORS.primary_100};\n color: ${COLORS.primary_800};\n box-shadow: none !important;\n z-index: ${Z_INDEXES.active};\n }\n\n &:focus {\n outline: none;\n box-shadow: 0 4px 12px ${COLORS.focus_25}, 0 0 8px ${COLORS.focus};\n z-index: ${Z_INDEXES.focus};\n }\n }\n\n &.sortable ${StyledTableHeaderColumnContent} > svg {\n opacity: 0;\n }\n\n &.sortable.sorted ${StyledTableHeaderColumnContent} > svg {\n opacity: 1;\n }\n\n`;\n\nexport const StyledTableBodyRow = styled.tr`\n cursor: pointer;\n position: relative;\n outline: none;\n\n &:hover {\n background-color: ${COLORS.primary_200};\n z-index: ${Z_INDEXES.hover};\n }\n\n &:focus {\n background-color: ${COLORS.primary_200};\n box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2E7FA1;\n z-index: ${Z_INDEXES.focus};\n outline: none;\n }\n\n &:active {\n box-shadow: none;\n z-index: ${Z_INDEXES.active};\n }\n\n`;\n\nexport const StyledTableBody = styled.tbody`\n ${StyledTableBodyRow}:nth-child(odd):not(:hover):not(:focus):not(:active) {\n background-color: ${COLORS.neutral_100};\n }\n\n ${StyledTableBodyRow}:nth-child(even):not(:hover):not(:focus):not(:active) {\n background-color: ${COLORS.white};\n }\n`;\n\n\nexport const StyledTableCell = styled.td``;\n\nexport const StyledTableCellContent = styled.div`\n min-height: 48px;\n\n padding: 0 16px;\n ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n\n display: flex;\n align-items: center;\n gap: 8px;\n\n &.truncate-text,\n &.truncate-text span {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n &.left {\n justify-content: left;\n }\n\n &.right {\n justify-content: right;\n }\n\n &.center {\n justify-content: center;\n }\n`;\n\nexport const StyledTableCellIcon = styled.div`\n color: ${COLORS.neutral_700};\n width: 24px;\n height: 24px;\n\n svg {\n color: ${COLORS.neutral_700};\n width: 24px;\n height: 24px;\n }\n`;\n\n\nexport const StyledTableFooter = styled.tfoot`\n`;\n\nexport const StyledTableFooterContent = styled.div`\n border-top: 2px solid ${COLORS.neutral_200};\n border-bottom: 1px solid ${COLORS.neutral_200};\n box-sizing: border-box;\n min-height: 56px;\n\n display: flex;\n align-items: center;\n justify-content: right;\n`;\n\nexport const StyledTableFooterCurrentInfo = styled.span`\n padding: 0 16px;\n ${ComponentXSStyling(ComponentTextStyle.Regular, COLORS.black)}\n`;\n\nexport const StyledTableFooterControls = styled.div`\n display: flex;\n`;\n\nexport const StyledTableSpinner = styled.div`\n height: 100%;\n width: 100%;\n position: absolute;\n background-color: rgba(0, 0, 0, 0.5);\n top: 0;\n`;\n"],"file":"TableStyles.js"}
|
|
1
|
+
{"version":3,"sources":["../../../src/Table/TableStyles.ts"],"names":["TableWrapper","styled","div","StyledTable","table","StyledTableHeader","thead","StyledTableHeaderTitle","tr","StyledTableHeaderTitleContent","COLORS","neutral_200","ComponentLStyling","ComponentTextStyle","StyledTableHeaderColumns","StyledTableHeaderColumnContent","StyledTableHeaderColumn","th","ComponentSStyling","white","primary_20","primary_700","Z_INDEXES","hover","primary_100","primary_800","active","focus_25","focus","neutral_20","StyledTableBodyRow","primary_200","StyledTableBody","tbody","neutral_100","StyledTableCell","td","StyledTableCellContent","StyledTableCellIcon","neutral_700","StyledTableCellText","span","StyledTableFooter","tfoot","StyledTableFooterContent","StyledTableFooterCurrentInfo","ComponentXSStyling","StyledTableFooterControls","StyledTableSpinner","StyledTableFooterCollapseButton","button","ComponentMStyling","neutral_600"],"mappings":"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","sourcesContent":["/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\n\n/**\n * Import custom style properties.\n */\nimport {COLORS} from '../styles';\nimport {\n ComponentLStyling,\n ComponentMStyling,\n ComponentSStyling,\n ComponentTextStyle,\n ComponentXSStyling\n} from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\n/**\n * Table styles\n */\n\nexport const TableWrapper = styled.div`\n position: relative;\n`;\n\n\nexport const StyledTable = styled.table`\n background: transparent;\n width: 100%;\n table-layout: fixed;\n`;\n\nexport const StyledTableHeader = styled.thead`\n`;\n\nexport const StyledTableHeaderTitle = styled.tr`\n`;\n\nexport const StyledTableHeaderTitleContent = styled.div`\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n box-sizing: border-box;\n min-height: 56px;\n border-bottom: 1px solid ${COLORS.neutral_200};\n border-top: 2px solid ${COLORS.neutral_200};\n padding: 0 16px;\n\n ${ComponentLStyling(ComponentTextStyle.Bold, COLORS.black)}\n .title-menu {\n margin-right: -16px;\n }\n`;\n\nexport const StyledTableHeaderColumns = styled.tr`\n`;\n\nexport const StyledTableHeaderColumnContent = styled.div`\n box-sizing: border-box;\n min-height: 56px;\n padding: 0 16px;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-top: 1px solid ${COLORS.neutral_200};\n border-bottom: 1px solid ${COLORS.neutral_200};\n`;\n\nexport const StyledTableHeaderColumn = styled.th`\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n position: relative;\n\n background-color: ${COLORS.white};\n\n //fixes header heights no idea why\n height: 1px;\n\n &.sortable {\n cursor: pointer;\n\n &:hover {\n background-color: ${COLORS.primary_20};\n color: ${COLORS.primary_700};\n z-index: ${Z_INDEXES.hover};\n }\n\n &:active {\n background-color: ${COLORS.primary_100};\n color: ${COLORS.primary_800};\n box-shadow: none !important;\n z-index: ${Z_INDEXES.active};\n }\n\n &:focus {\n outline: none;\n box-shadow: 0 4px 12px ${COLORS.focus_25}, 0 0 8px ${COLORS.focus};\n z-index: ${Z_INDEXES.focus};\n }\n }\n\n &.sortable ${StyledTableHeaderColumnContent} > svg {\n opacity: 0;\n }\n\n &.sortable.sorted ${StyledTableHeaderColumnContent} > svg {\n opacity: 1;\n }\n\n &.sorted {\n background-color: ${COLORS.neutral_20};\n }\n\n`;\n\nexport const StyledTableBodyRow = styled.tr`\n cursor: pointer;\n position: relative;\n outline: none;\n\n &:hover {\n background-color: ${COLORS.primary_200};\n z-index: ${Z_INDEXES.hover};\n }\n\n &:focus {\n background-color: ${COLORS.primary_200};\n box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2E7FA1;\n z-index: ${Z_INDEXES.focus};\n outline: none;\n }\n\n &:active {\n box-shadow: none;\n z-index: ${Z_INDEXES.active};\n }\n\n`;\n\nexport const StyledTableBody = styled.tbody`\n ${StyledTableBodyRow}:nth-child(odd):not(:hover):not(:focus):not(:active) {\n background-color: ${COLORS.neutral_100};\n }\n\n ${StyledTableBodyRow}:nth-child(even):not(:hover):not(:focus):not(:active) {\n background-color: ${COLORS.neutral_20};\n }\n`;\n\n\nexport const StyledTableCell = styled.td``;\n\nexport const StyledTableCellContent = styled.div`\n min-height: 48px;\n\n padding: 0 16px;\n ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n display: flex;\n align-items: center;\n justify-content: left;\n gap: 8px;\n\n &.truncate-text,\n &.truncate-text span {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n &.left {\n justify-content: left;\n }\n\n &.right {\n justify-content: right;\n }\n\n &.center {\n justify-content: center;\n }\n`;\n\nexport const StyledTableCellIcon = styled.div`\n color: ${COLORS.neutral_700};\n width: 24px;\n height: 24px;\n\n svg {\n color: ${COLORS.neutral_700};\n width: 24px;\n height: 24px;\n }\n`;\n\nexport const StyledTableCellText = styled.span`\n padding: 12px 0;\n`;\n\n\nexport const StyledTableFooter = styled.tfoot`\n`;\n\nexport const StyledTableFooterContent = styled.div`\n border-top: 2px solid ${COLORS.neutral_200};\n border-bottom: 1px solid ${COLORS.neutral_200};\n box-sizing: border-box;\n min-height: 56px;\n\n display: flex;\n align-items: center;\n justify-content: right;\n\n`;\n\nexport const StyledTableFooterCurrentInfo = styled.span`\n padding: 0 16px;\n ${ComponentXSStyling(ComponentTextStyle.Regular, COLORS.black)}\n`;\n\nexport const StyledTableFooterControls = styled.div`\n display: flex;\n`;\n\nexport const StyledTableSpinner = styled.div`\n height: 100%;\n width: 100%;\n position: absolute;\n background-color: rgba(0, 0, 0, 0.5);\n top: 0;\n`;\n\nexport const StyledTableFooterCollapseButton = styled.button`\n position: relative;\n border-bottom: 1px solid ${COLORS.neutral_200};\n border-top: 1px solid ${COLORS.neutral_200};\n border-left: none;\n border-right: none;\n box-sizing: border-box;\n min-height: 48px;\n display: flex;\n width: 100%;\n align-items: center;\n justify-content: center;\n gap: 4px;\n background: ${COLORS.white};\n\n cursor: pointer;\n\n ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.neutral_800)}\n &:focus {\n outline: none;\n z-index: ${Z_INDEXES.focus};\n color: ${COLORS.neutral_600};\n box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2E7FA1;\n }\n\n &:hover {\n z-index: ${Z_INDEXES.hover};\n background: ${COLORS.primary_20};\n color: ${COLORS.primary_700};\n }\n\n &:active {\n box-shadow: none;\n z-index: ${Z_INDEXES.active};\n background: ${COLORS.primary_100};\n color: ${COLORS.primary_800};\n }\n\n &:disabled {\n display: none;\n }\n\n`;\n"],"file":"TableStyles.js"}
|
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
(function (global, factory) {
|
|
2
2
|
if (typeof define === "function" && define.amd) {
|
|
3
|
-
define(["react", "@testing-library/react", "../index", "jest-styled-components"], factory);
|
|
3
|
+
define(["react", "@testing-library/react", "../index", "../TableStyles", "react-dom/test-utils", "jest-styled-components"], factory);
|
|
4
4
|
} else if (typeof exports !== "undefined") {
|
|
5
|
-
factory(require("react"), require("@testing-library/react"), require("../index"), require("jest-styled-components"));
|
|
5
|
+
factory(require("react"), require("@testing-library/react"), require("../index"), require("../TableStyles"), require("react-dom/test-utils"), require("jest-styled-components"));
|
|
6
6
|
} else {
|
|
7
7
|
var mod = {
|
|
8
8
|
exports: {}
|
|
9
9
|
};
|
|
10
|
-
factory(global.react, global.react, global.index, global.jestStyledComponents);
|
|
10
|
+
factory(global.react, global.react, global.index, global.TableStyles, global.testUtils, global.jestStyledComponents);
|
|
11
11
|
global.undefined = mod.exports;
|
|
12
12
|
}
|
|
13
|
-
})(this, function (_react, _react3, _index) {
|
|
13
|
+
})(this, function (_react, _react3, _index, _TableStyles, _testUtils) {
|
|
14
14
|
"use strict";
|
|
15
15
|
|
|
16
16
|
var _react2 = _interopRequireDefault(_react);
|
|
@@ -314,6 +314,166 @@
|
|
|
314
314
|
}));
|
|
315
315
|
expect(getByTestId('TestTableFooterRow')).toBeDefined();
|
|
316
316
|
});
|
|
317
|
+
describe('Table Accordion tests', () => {
|
|
318
|
+
it('Should render collapse button when configured as accordion', () => {
|
|
319
|
+
const columns = [{
|
|
320
|
+
key: 'column1',
|
|
321
|
+
name: 'Column 1'
|
|
322
|
+
}, {
|
|
323
|
+
key: 'column2',
|
|
324
|
+
name: 'Column 2'
|
|
325
|
+
}];
|
|
326
|
+
const rows = [{
|
|
327
|
+
column1: 'Test content',
|
|
328
|
+
column2: 'Test content 2'
|
|
329
|
+
}, {
|
|
330
|
+
column1: 'Test content',
|
|
331
|
+
column2: 'Test content 2'
|
|
332
|
+
}, {
|
|
333
|
+
column1: 'Test content',
|
|
334
|
+
column2: 'Test content 2'
|
|
335
|
+
}, {
|
|
336
|
+
column1: 'Test content',
|
|
337
|
+
column2: 'Test content 2'
|
|
338
|
+
}];
|
|
339
|
+
const wrapper = (0, _react3.render)( /*#__PURE__*/_react2.default.createElement(_index.Table, {
|
|
340
|
+
rows: rows,
|
|
341
|
+
columns: columns,
|
|
342
|
+
accordion: true,
|
|
343
|
+
collapsedRows: 3
|
|
344
|
+
}));
|
|
345
|
+
expect(wrapper.container.querySelectorAll(`${_TableStyles.StyledTableFooterCollapseButton}`)).toHaveLength(1);
|
|
346
|
+
});
|
|
347
|
+
it('Should not render all items when collapsed', () => {
|
|
348
|
+
const columns = [{
|
|
349
|
+
key: 'column1',
|
|
350
|
+
name: 'Column 1'
|
|
351
|
+
}, {
|
|
352
|
+
key: 'column2',
|
|
353
|
+
name: 'Column 2'
|
|
354
|
+
}];
|
|
355
|
+
const rows = [{
|
|
356
|
+
column1: 'Test content',
|
|
357
|
+
column2: 'Test content 2'
|
|
358
|
+
}, {
|
|
359
|
+
column1: 'Test content',
|
|
360
|
+
column2: 'Test content 2'
|
|
361
|
+
}, {
|
|
362
|
+
column1: 'Test content',
|
|
363
|
+
column2: 'Test content 2'
|
|
364
|
+
}, {
|
|
365
|
+
column1: 'Test content',
|
|
366
|
+
column2: 'Test content 2'
|
|
367
|
+
}];
|
|
368
|
+
const wrapper = (0, _react3.render)( /*#__PURE__*/_react2.default.createElement(_index.Table, {
|
|
369
|
+
rows: rows,
|
|
370
|
+
columns: columns,
|
|
371
|
+
accordion: true,
|
|
372
|
+
collapsedRows: 3
|
|
373
|
+
}));
|
|
374
|
+
expect(wrapper.container.querySelectorAll(`${_TableStyles.StyledTableBodyRow}`)).toHaveLength(3);
|
|
375
|
+
});
|
|
376
|
+
it('Should render all items when not collapsed', () => {
|
|
377
|
+
const columns = [{
|
|
378
|
+
key: 'column1',
|
|
379
|
+
name: 'Column 1'
|
|
380
|
+
}, {
|
|
381
|
+
key: 'column2',
|
|
382
|
+
name: 'Column 2'
|
|
383
|
+
}];
|
|
384
|
+
const rows = [{
|
|
385
|
+
column1: 'Test content',
|
|
386
|
+
column2: 'Test content 2'
|
|
387
|
+
}, {
|
|
388
|
+
column1: 'Test content',
|
|
389
|
+
column2: 'Test content 2'
|
|
390
|
+
}, {
|
|
391
|
+
column1: 'Test content',
|
|
392
|
+
column2: 'Test content 2'
|
|
393
|
+
}, {
|
|
394
|
+
column1: 'Test content',
|
|
395
|
+
column2: 'Test content 2'
|
|
396
|
+
}];
|
|
397
|
+
const wrapper = (0, _react3.render)( /*#__PURE__*/_react2.default.createElement(_index.Table, {
|
|
398
|
+
rows: rows,
|
|
399
|
+
columns: columns,
|
|
400
|
+
accordion: true,
|
|
401
|
+
collapsedRows: 3,
|
|
402
|
+
collapsed: false
|
|
403
|
+
}));
|
|
404
|
+
expect(wrapper.container.querySelectorAll(`${_TableStyles.StyledTableBodyRow}`)).toHaveLength(4);
|
|
405
|
+
});
|
|
406
|
+
it('Should expand when show more button is clicked', () => {
|
|
407
|
+
const columns = [{
|
|
408
|
+
key: 'column1',
|
|
409
|
+
name: 'Column 1'
|
|
410
|
+
}, {
|
|
411
|
+
key: 'column2',
|
|
412
|
+
name: 'Column 2'
|
|
413
|
+
}];
|
|
414
|
+
const rows = [{
|
|
415
|
+
column1: 'Test content',
|
|
416
|
+
column2: 'Test content 2'
|
|
417
|
+
}, {
|
|
418
|
+
column1: 'Test content',
|
|
419
|
+
column2: 'Test content 2'
|
|
420
|
+
}, {
|
|
421
|
+
column1: 'Test content',
|
|
422
|
+
column2: 'Test content 2'
|
|
423
|
+
}, {
|
|
424
|
+
column1: 'Test content',
|
|
425
|
+
column2: 'Test content 2'
|
|
426
|
+
}];
|
|
427
|
+
const wrapper = (0, _react3.render)( /*#__PURE__*/_react2.default.createElement(_index.Table, {
|
|
428
|
+
rows: rows,
|
|
429
|
+
columns: columns,
|
|
430
|
+
accordion: true,
|
|
431
|
+
collapsedRows: 3,
|
|
432
|
+
collapsed: true
|
|
433
|
+
}));
|
|
434
|
+
expect(wrapper.container.querySelectorAll(`${_TableStyles.StyledTableBodyRow}`)).toHaveLength(3);
|
|
435
|
+
(0, _testUtils.act)(() => {
|
|
436
|
+
let button = wrapper.container.querySelectorAll(`${_TableStyles.StyledTableFooterCollapseButton}`)[0];
|
|
437
|
+
button.click();
|
|
438
|
+
});
|
|
439
|
+
expect(wrapper.container.querySelectorAll(`${_TableStyles.StyledTableBodyRow}`)).toHaveLength(4);
|
|
440
|
+
});
|
|
441
|
+
it('Should collapse when show less button is clicked', () => {
|
|
442
|
+
const columns = [{
|
|
443
|
+
key: 'column1',
|
|
444
|
+
name: 'Column 1'
|
|
445
|
+
}, {
|
|
446
|
+
key: 'column2',
|
|
447
|
+
name: 'Column 2'
|
|
448
|
+
}];
|
|
449
|
+
const rows = [{
|
|
450
|
+
column1: 'Test content',
|
|
451
|
+
column2: 'Test content 2'
|
|
452
|
+
}, {
|
|
453
|
+
column1: 'Test content',
|
|
454
|
+
column2: 'Test content 2'
|
|
455
|
+
}, {
|
|
456
|
+
column1: 'Test content',
|
|
457
|
+
column2: 'Test content 2'
|
|
458
|
+
}, {
|
|
459
|
+
column1: 'Test content',
|
|
460
|
+
column2: 'Test content 2'
|
|
461
|
+
}];
|
|
462
|
+
const wrapper = (0, _react3.render)( /*#__PURE__*/_react2.default.createElement(_index.Table, {
|
|
463
|
+
rows: rows,
|
|
464
|
+
columns: columns,
|
|
465
|
+
accordion: true,
|
|
466
|
+
collapsedRows: 3,
|
|
467
|
+
collapsed: false
|
|
468
|
+
}));
|
|
469
|
+
expect(wrapper.container.querySelectorAll(`${_TableStyles.StyledTableBodyRow}`)).toHaveLength(4);
|
|
470
|
+
(0, _testUtils.act)(() => {
|
|
471
|
+
let button = wrapper.container.querySelectorAll(`${_TableStyles.StyledTableFooterCollapseButton}`)[0];
|
|
472
|
+
button.click();
|
|
473
|
+
});
|
|
474
|
+
expect(wrapper.container.querySelectorAll(`${_TableStyles.StyledTableBodyRow}`)).toHaveLength(3);
|
|
475
|
+
});
|
|
476
|
+
});
|
|
317
477
|
});
|
|
318
478
|
});
|
|
319
479
|
//# sourceMappingURL=Table.test.js.map
|