@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/TableFooter.tsx"],"names":["TableFooter","props","rowsPerPageValues","label","dropDownText","rowsPerPage","columns","length","multiSelect","value","onRowsPerPageChange","total","from","to","prevPage","COLORS","neutral_600","nextPage"],"mappings":";;;;;;;;;AAAA;;AAEA;;AACA;;AACA;;AACA;;AAEA;;;;
|
|
1
|
+
{"version":3,"sources":["../../../src/Table/TableFooter.tsx"],"names":["TableFooter","props","rowsPerPageValues","label","dropDownText","rowsPerPage","columns","length","multiSelect","accordion","setIsCollapsed","isCollapsed","e","preventDefault","rows","value","onRowsPerPageChange","total","from","to","prevPage","COLORS","neutral_600","nextPage"],"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"}
|
|
@@ -14,8 +14,10 @@ export declare const StyledTableBody: import("styled-components").StyledComponen
|
|
|
14
14
|
export declare const StyledTableCell: import("styled-components").StyledComponent<"td", any, {}, never>;
|
|
15
15
|
export declare const StyledTableCellContent: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
16
16
|
export declare const StyledTableCellIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
17
|
+
export declare const StyledTableCellText: import("styled-components").StyledComponent<"span", any, {}, never>;
|
|
17
18
|
export declare const StyledTableFooter: import("styled-components").StyledComponent<"tfoot", any, {}, never>;
|
|
18
19
|
export declare const StyledTableFooterContent: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
19
20
|
export declare const StyledTableFooterCurrentInfo: import("styled-components").StyledComponent<"span", any, {}, never>;
|
|
20
21
|
export declare const StyledTableFooterControls: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
21
22
|
export declare const StyledTableSpinner: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
23
|
+
export declare const StyledTableFooterCollapseButton: import("styled-components").StyledComponent<"button", any, {}, never>;
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
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 = void 0;
|
|
6
|
+
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 = void 0;
|
|
7
7
|
|
|
8
8
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
9
9
|
|
|
@@ -13,7 +13,7 @@ var _typography = require("../styles/typography");
|
|
|
13
13
|
|
|
14
14
|
var _zIndexes = require("../styles/z-indexes");
|
|
15
15
|
|
|
16
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18;
|
|
16
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20;
|
|
17
17
|
|
|
18
18
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
19
19
|
|
|
@@ -26,7 +26,7 @@ var TableWrapper = _styledComponents.default.div(_templateObject || (_templateOb
|
|
|
26
26
|
|
|
27
27
|
exports.TableWrapper = TableWrapper;
|
|
28
28
|
|
|
29
|
-
var StyledTable = _styledComponents.default.table(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n background: transparent;\n width: 100%;\n"])));
|
|
29
|
+
var StyledTable = _styledComponents.default.table(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n background: transparent;\n width: 100%;\n table-layout: fixed;\n"])));
|
|
30
30
|
|
|
31
31
|
exports.StyledTable = StyledTable;
|
|
32
32
|
|
|
@@ -50,7 +50,7 @@ var StyledTableHeaderColumnContent = _styledComponents.default.div(_templateObje
|
|
|
50
50
|
|
|
51
51
|
exports.StyledTableHeaderColumnContent = StyledTableHeaderColumnContent;
|
|
52
52
|
|
|
53
|
-
var StyledTableHeaderColumn = _styledComponents.default.th(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n ", "\n position: relative;\n\n background-color: ", ";\n\n //fixes header heights no idea why\n height: 1px;\n\n &.sortable {\n cursor: pointer;\n\n &:hover {\n background-color: ", ";\n color: ", ";\n z-index: ", ";\n }\n\n &:active {\n background-color: ", ";\n color: ", ";\n box-shadow: none !important;\n z-index: ", ";\n }\n\n &:focus {\n outline: none;\n box-shadow: 0 4px 12px ", ", 0 0 8px ", ";\n z-index: ", ";\n }\n }\n\n &.sortable ", " > svg {\n opacity: 0;\n }\n\n &.sortable.sorted ", " > svg {\n opacity: 1;\n }\n\n"])), (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Bold, _styles.COLORS.neutral_600), _styles.COLORS.white, _styles.COLORS.primary_20, _styles.COLORS.primary_700, _zIndexes.Z_INDEXES.hover, _styles.COLORS.primary_100, _styles.COLORS.primary_800, _zIndexes.Z_INDEXES.active, _styles.COLORS.focus_25, _styles.COLORS.focus, _zIndexes.Z_INDEXES.focus, StyledTableHeaderColumnContent, StyledTableHeaderColumnContent);
|
|
53
|
+
var StyledTableHeaderColumn = _styledComponents.default.th(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n ", "\n position: relative;\n\n background-color: ", ";\n\n //fixes header heights no idea why\n height: 1px;\n\n &.sortable {\n cursor: pointer;\n\n &:hover {\n background-color: ", ";\n color: ", ";\n z-index: ", ";\n }\n\n &:active {\n background-color: ", ";\n color: ", ";\n box-shadow: none !important;\n z-index: ", ";\n }\n\n &:focus {\n outline: none;\n box-shadow: 0 4px 12px ", ", 0 0 8px ", ";\n z-index: ", ";\n }\n }\n\n &.sortable ", " > svg {\n opacity: 0;\n }\n\n &.sortable.sorted ", " > svg {\n opacity: 1;\n }\n\n &.sorted {\n background-color: ", ";\n }\n\n"])), (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Bold, _styles.COLORS.neutral_600), _styles.COLORS.white, _styles.COLORS.primary_20, _styles.COLORS.primary_700, _zIndexes.Z_INDEXES.hover, _styles.COLORS.primary_100, _styles.COLORS.primary_800, _zIndexes.Z_INDEXES.active, _styles.COLORS.focus_25, _styles.COLORS.focus, _zIndexes.Z_INDEXES.focus, StyledTableHeaderColumnContent, StyledTableHeaderColumnContent, _styles.COLORS.neutral_20);
|
|
54
54
|
|
|
55
55
|
exports.StyledTableHeaderColumn = StyledTableHeaderColumn;
|
|
56
56
|
|
|
@@ -58,7 +58,7 @@ var StyledTableBodyRow = _styledComponents.default.tr(_templateObject9 || (_temp
|
|
|
58
58
|
|
|
59
59
|
exports.StyledTableBodyRow = StyledTableBodyRow;
|
|
60
60
|
|
|
61
|
-
var StyledTableBody = _styledComponents.default.tbody(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n ", ":nth-child(odd):not(:hover):not(:focus):not(:active) {\n background-color: ", ";\n }\n\n ", ":nth-child(even):not(:hover):not(:focus):not(:active) {\n background-color: ", ";\n }\n"])), StyledTableBodyRow, _styles.COLORS.neutral_100, StyledTableBodyRow, _styles.COLORS.
|
|
61
|
+
var StyledTableBody = _styledComponents.default.tbody(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n ", ":nth-child(odd):not(:hover):not(:focus):not(:active) {\n background-color: ", ";\n }\n\n ", ":nth-child(even):not(:hover):not(:focus):not(:active) {\n background-color: ", ";\n }\n"])), StyledTableBodyRow, _styles.COLORS.neutral_100, StyledTableBodyRow, _styles.COLORS.neutral_20);
|
|
62
62
|
|
|
63
63
|
exports.StyledTableBody = StyledTableBody;
|
|
64
64
|
|
|
@@ -66,7 +66,7 @@ var StyledTableCell = _styledComponents.default.td(_templateObject11 || (_templa
|
|
|
66
66
|
|
|
67
67
|
exports.StyledTableCell = StyledTableCell;
|
|
68
68
|
|
|
69
|
-
var StyledTableCellContent = _styledComponents.default.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n min-height: 48px;\n\n padding: 0 16px;\n ", "\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"])), (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Regular,
|
|
69
|
+
var StyledTableCellContent = _styledComponents.default.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n min-height: 48px;\n\n padding: 0 16px;\n ", "\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"])), (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.black));
|
|
70
70
|
|
|
71
71
|
exports.StyledTableCellContent = StyledTableCellContent;
|
|
72
72
|
|
|
@@ -74,23 +74,31 @@ var StyledTableCellIcon = _styledComponents.default.div(_templateObject13 || (_t
|
|
|
74
74
|
|
|
75
75
|
exports.StyledTableCellIcon = StyledTableCellIcon;
|
|
76
76
|
|
|
77
|
-
var
|
|
77
|
+
var StyledTableCellText = _styledComponents.default.span(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n padding: 12px 0;\n"])));
|
|
78
|
+
|
|
79
|
+
exports.StyledTableCellText = StyledTableCellText;
|
|
80
|
+
|
|
81
|
+
var StyledTableFooter = _styledComponents.default.tfoot(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n"])));
|
|
78
82
|
|
|
79
83
|
exports.StyledTableFooter = StyledTableFooter;
|
|
80
84
|
|
|
81
|
-
var StyledTableFooterContent = _styledComponents.default.div(
|
|
85
|
+
var StyledTableFooterContent = _styledComponents.default.div(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n border-top: 2px solid ", ";\n border-bottom: 1px solid ", ";\n box-sizing: border-box;\n min-height: 56px;\n\n display: flex;\n align-items: center;\n justify-content: right;\n\n"])), _styles.COLORS.neutral_200, _styles.COLORS.neutral_200);
|
|
82
86
|
|
|
83
87
|
exports.StyledTableFooterContent = StyledTableFooterContent;
|
|
84
88
|
|
|
85
|
-
var StyledTableFooterCurrentInfo = _styledComponents.default.span(
|
|
89
|
+
var StyledTableFooterCurrentInfo = _styledComponents.default.span(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n padding: 0 16px;\n ", "\n"])), (0, _typography.ComponentXSStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.black));
|
|
86
90
|
|
|
87
91
|
exports.StyledTableFooterCurrentInfo = StyledTableFooterCurrentInfo;
|
|
88
92
|
|
|
89
|
-
var StyledTableFooterControls = _styledComponents.default.div(
|
|
93
|
+
var StyledTableFooterControls = _styledComponents.default.div(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n display: flex;\n"])));
|
|
90
94
|
|
|
91
95
|
exports.StyledTableFooterControls = StyledTableFooterControls;
|
|
92
96
|
|
|
93
|
-
var StyledTableSpinner = _styledComponents.default.div(
|
|
97
|
+
var StyledTableSpinner = _styledComponents.default.div(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n height: 100%;\n width: 100%;\n position: absolute;\n background-color: rgba(0, 0, 0, 0.5);\n top: 0;\n"])));
|
|
94
98
|
|
|
95
99
|
exports.StyledTableSpinner = StyledTableSpinner;
|
|
100
|
+
|
|
101
|
+
var StyledTableFooterCollapseButton = _styledComponents.default.button(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n position: relative;\n border-bottom: 1px solid ", ";\n border-top: 1px solid ", ";\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: ", ";\n\n cursor: pointer;\n\n ", "\n &:focus {\n outline: none;\n z-index: ", ";\n color: ", ";\n box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2E7FA1;\n }\n\n &:hover {\n z-index: ", ";\n background: ", ";\n color: ", ";\n }\n\n &:active {\n box-shadow: none;\n z-index: ", ";\n background: ", ";\n color: ", ";\n }\n\n &:disabled {\n display: none;\n }\n\n"])), _styles.COLORS.neutral_200, _styles.COLORS.neutral_200, _styles.COLORS.white, (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Bold, _styles.COLORS.neutral_800), _zIndexes.Z_INDEXES.focus, _styles.COLORS.neutral_600, _zIndexes.Z_INDEXES.hover, _styles.COLORS.primary_20, _styles.COLORS.primary_700, _zIndexes.Z_INDEXES.active, _styles.COLORS.primary_100, _styles.COLORS.primary_800);
|
|
102
|
+
|
|
103
|
+
exports.StyledTableFooterCollapseButton = StyledTableFooterCollapseButton;
|
|
96
104
|
//# 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","ComponentTextStyle","Bold","black","StyledTableHeaderColumns","StyledTableHeaderColumnContent","StyledTableHeaderColumn","th","neutral_600","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","Regular","StyledTableCellIcon","neutral_700","StyledTableFooter","tfoot","StyledTableFooterContent","StyledTableFooterCurrentInfo","
|
|
1
|
+
{"version":3,"sources":["../../../src/Table/TableStyles.ts"],"names":["TableWrapper","styled","div","StyledTable","table","StyledTableHeader","thead","StyledTableHeaderTitle","tr","StyledTableHeaderTitleContent","COLORS","neutral_200","ComponentTextStyle","Bold","black","StyledTableHeaderColumns","StyledTableHeaderColumnContent","StyledTableHeaderColumn","th","neutral_600","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","Regular","StyledTableCellIcon","neutral_700","StyledTableCellText","span","StyledTableFooter","tfoot","StyledTableFooterContent","StyledTableFooterCurrentInfo","StyledTableFooterControls","StyledTableSpinner","StyledTableFooterCollapseButton","button","neutral_800"],"mappings":";;;;;;;AAGA;;AAKA;;AACA;;AAOA;;;;;;;;AAEA;AACA;AACA;AAEO,IAAMA,YAAY,GAAGC,0BAAOC,GAAV,8FAAlB;;;;AAKA,IAAMC,WAAW,GAAGF,0BAAOG,KAAV,6IAAjB;;;;AAMA,IAAMC,iBAAiB,GAAGJ,0BAAOK,KAAV,yEAAvB;;;;AAGA,IAAMC,sBAAsB,GAAGN,0BAAOO,EAAV,yEAA5B;;;;AAGA,IAAMC,6BAA6B,GAAGR,0BAAOC,GAAV,sWAObQ,eAAOC,WAPM,EAQhBD,eAAOC,WARS,EAWtC,mCAAkBC,+BAAmBC,IAArC,EAA2CH,eAAOI,KAAlD,CAXsC,CAAnC;;;;AAiBA,IAAMC,wBAAwB,GAAGd,0BAAOO,EAAV,yEAA9B;;;;AAGA,IAAMQ,8BAA8B,GAAGf,0BAAOC,GAAV,6SAQjBQ,eAAOC,WARU,EASdD,eAAOC,WATO,CAApC;;;;AAYA,IAAMM,uBAAuB,GAAGhB,0BAAOiB,EAAV,yuBAChC,mCAAkBN,+BAAmBC,IAArC,EAA2CH,eAAOS,WAAlD,CADgC,EAIdT,eAAOU,KAJO,EAaVV,eAAOW,UAbG,EAcrBX,eAAOY,WAdc,EAenBC,oBAAUC,KAfS,EAmBVd,eAAOe,WAnBG,EAoBrBf,eAAOgB,WApBc,EAsBnBH,oBAAUI,MAtBS,EA2BLjB,eAAOkB,QA3BF,EA2BuBlB,eAAOmB,KA3B9B,EA4BnBN,oBAAUM,KA5BS,EAgCrBb,8BAhCqB,EAoCdA,8BApCc,EAyCZN,eAAOoB,UAzCK,CAA7B;;;;AA8CA,IAAMC,kBAAkB,GAAG9B,0BAAOO,EAAV,obAMPE,eAAOsB,WANA,EAOhBT,oBAAUC,KAPM,EAWPd,eAAOsB,WAXA,EAahBT,oBAAUM,KAbM,EAmBhBN,oBAAUI,MAnBM,CAAxB;;;;AAwBA,IAAMM,eAAe,GAAGhC,0BAAOiC,KAAV,+QACxBH,kBADwB,EAEJrB,eAAOyB,WAFH,EAKxBJ,kBALwB,EAMJrB,eAAOoB,UANH,CAArB;;;;AAWA,IAAMM,eAAe,GAAGnC,0BAAOoC,EAAV,yEAArB;;;;AAEA,IAAMC,sBAAsB,GAAGrC,0BAAOC,GAAV,yeAI/B,mCAAkBU,+BAAmB2B,OAArC,EAA8C7B,eAAOI,KAArD,CAJ+B,CAA5B;;;;AA+BA,IAAM0B,mBAAmB,GAAGvC,0BAAOC,GAAV,oMACrBQ,eAAO+B,WADc,EAMnB/B,eAAO+B,WANY,CAAzB;;;;AAYA,IAAMC,mBAAmB,GAAGzC,0BAAO0C,IAAV,+FAAzB;;;;AAKA,IAAMC,iBAAiB,GAAG3C,0BAAO4C,KAAV,2EAAvB;;;;AAGA,IAAMC,wBAAwB,GAAG7C,0BAAOC,GAAV,sQACXQ,eAAOC,WADI,EAERD,eAAOC,WAFC,CAA9B;;;;AAYA,IAAMoC,4BAA4B,GAAG9C,0BAAO0C,IAAV,wGAErC,oCAAmB/B,+BAAmB2B,OAAtC,EAA+C7B,eAAOI,KAAtD,CAFqC,CAAlC;;;;AAKA,IAAMkC,yBAAyB,GAAG/C,0BAAOC,GAAV,6FAA/B;;;;AAIA,IAAM+C,kBAAkB,GAAGhD,0BAAOC,GAAV,uLAAxB;;;;AAQA,IAAMgD,+BAA+B,GAAGjD,0BAAOkD,MAAV,yxBAEfzC,eAAOC,WAFQ,EAGlBD,eAAOC,WAHW,EAa5BD,eAAOU,KAbqB,EAiBxC,mCAAkBR,+BAAmBC,IAArC,EAA2CH,eAAO0C,WAAlD,CAjBwC,EAoB7B7B,oBAAUM,KApBmB,EAqB/BnB,eAAOS,WArBwB,EA0B7BI,oBAAUC,KA1BmB,EA2B1Bd,eAAOW,UA3BmB,EA4B/BX,eAAOY,WA5BwB,EAiC7BC,oBAAUI,MAjCmB,EAkC1BjB,eAAOe,WAlCmB,EAmC/Bf,eAAOgB,WAnCwB,CAArC","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"}
|
|
@@ -9,8 +9,11 @@ export interface TableProps {
|
|
|
9
9
|
title?: string;
|
|
10
10
|
columns: TableColumn[];
|
|
11
11
|
rows: any[];
|
|
12
|
-
|
|
12
|
+
accordion?: boolean;
|
|
13
|
+
collapsed?: boolean;
|
|
14
|
+
collapsedRows?: number;
|
|
13
15
|
remoteOperations?: boolean;
|
|
16
|
+
pagination?: TablePagination;
|
|
14
17
|
onPreviousPageClick?: () => void;
|
|
15
18
|
onNextPageClick?: () => void;
|
|
16
19
|
onRowsPerPageChange?: (count: number) => void;
|
|
@@ -8,6 +8,10 @@ var _index = require("../index");
|
|
|
8
8
|
|
|
9
9
|
require("jest-styled-components");
|
|
10
10
|
|
|
11
|
+
var _TableStyles = require("../TableStyles");
|
|
12
|
+
|
|
13
|
+
var _testUtils = require("react-dom/test-utils");
|
|
14
|
+
|
|
11
15
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
12
16
|
|
|
13
17
|
/**
|
|
@@ -316,5 +320,165 @@ describe('<Table />', function () {
|
|
|
316
320
|
|
|
317
321
|
expect(getByTestId('TestTableFooterRow')).toBeDefined();
|
|
318
322
|
});
|
|
323
|
+
describe('Table Accordion tests', function () {
|
|
324
|
+
it('Should render collapse button when configured as accordion', function () {
|
|
325
|
+
var columns = [{
|
|
326
|
+
key: 'column1',
|
|
327
|
+
name: 'Column 1'
|
|
328
|
+
}, {
|
|
329
|
+
key: 'column2',
|
|
330
|
+
name: 'Column 2'
|
|
331
|
+
}];
|
|
332
|
+
var rows = [{
|
|
333
|
+
column1: 'Test content',
|
|
334
|
+
column2: 'Test content 2'
|
|
335
|
+
}, {
|
|
336
|
+
column1: 'Test content',
|
|
337
|
+
column2: 'Test content 2'
|
|
338
|
+
}, {
|
|
339
|
+
column1: 'Test content',
|
|
340
|
+
column2: 'Test content 2'
|
|
341
|
+
}, {
|
|
342
|
+
column1: 'Test content',
|
|
343
|
+
column2: 'Test content 2'
|
|
344
|
+
}];
|
|
345
|
+
var wrapper = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Table, {
|
|
346
|
+
rows: rows,
|
|
347
|
+
columns: columns,
|
|
348
|
+
accordion: true,
|
|
349
|
+
collapsedRows: 3
|
|
350
|
+
}));
|
|
351
|
+
expect(wrapper.container.querySelectorAll("".concat(_TableStyles.StyledTableFooterCollapseButton))).toHaveLength(1);
|
|
352
|
+
});
|
|
353
|
+
it('Should not render all items when collapsed', function () {
|
|
354
|
+
var columns = [{
|
|
355
|
+
key: 'column1',
|
|
356
|
+
name: 'Column 1'
|
|
357
|
+
}, {
|
|
358
|
+
key: 'column2',
|
|
359
|
+
name: 'Column 2'
|
|
360
|
+
}];
|
|
361
|
+
var rows = [{
|
|
362
|
+
column1: 'Test content',
|
|
363
|
+
column2: 'Test content 2'
|
|
364
|
+
}, {
|
|
365
|
+
column1: 'Test content',
|
|
366
|
+
column2: 'Test content 2'
|
|
367
|
+
}, {
|
|
368
|
+
column1: 'Test content',
|
|
369
|
+
column2: 'Test content 2'
|
|
370
|
+
}, {
|
|
371
|
+
column1: 'Test content',
|
|
372
|
+
column2: 'Test content 2'
|
|
373
|
+
}];
|
|
374
|
+
var wrapper = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Table, {
|
|
375
|
+
rows: rows,
|
|
376
|
+
columns: columns,
|
|
377
|
+
accordion: true,
|
|
378
|
+
collapsedRows: 3
|
|
379
|
+
}));
|
|
380
|
+
expect(wrapper.container.querySelectorAll("".concat(_TableStyles.StyledTableBodyRow))).toHaveLength(3);
|
|
381
|
+
});
|
|
382
|
+
it('Should render all items when not collapsed', function () {
|
|
383
|
+
var columns = [{
|
|
384
|
+
key: 'column1',
|
|
385
|
+
name: 'Column 1'
|
|
386
|
+
}, {
|
|
387
|
+
key: 'column2',
|
|
388
|
+
name: 'Column 2'
|
|
389
|
+
}];
|
|
390
|
+
var rows = [{
|
|
391
|
+
column1: 'Test content',
|
|
392
|
+
column2: 'Test content 2'
|
|
393
|
+
}, {
|
|
394
|
+
column1: 'Test content',
|
|
395
|
+
column2: 'Test content 2'
|
|
396
|
+
}, {
|
|
397
|
+
column1: 'Test content',
|
|
398
|
+
column2: 'Test content 2'
|
|
399
|
+
}, {
|
|
400
|
+
column1: 'Test content',
|
|
401
|
+
column2: 'Test content 2'
|
|
402
|
+
}];
|
|
403
|
+
var wrapper = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Table, {
|
|
404
|
+
rows: rows,
|
|
405
|
+
columns: columns,
|
|
406
|
+
accordion: true,
|
|
407
|
+
collapsedRows: 3,
|
|
408
|
+
collapsed: false
|
|
409
|
+
}));
|
|
410
|
+
expect(wrapper.container.querySelectorAll("".concat(_TableStyles.StyledTableBodyRow))).toHaveLength(4);
|
|
411
|
+
});
|
|
412
|
+
it('Should expand when show more button is clicked', function () {
|
|
413
|
+
var columns = [{
|
|
414
|
+
key: 'column1',
|
|
415
|
+
name: 'Column 1'
|
|
416
|
+
}, {
|
|
417
|
+
key: 'column2',
|
|
418
|
+
name: 'Column 2'
|
|
419
|
+
}];
|
|
420
|
+
var rows = [{
|
|
421
|
+
column1: 'Test content',
|
|
422
|
+
column2: 'Test content 2'
|
|
423
|
+
}, {
|
|
424
|
+
column1: 'Test content',
|
|
425
|
+
column2: 'Test content 2'
|
|
426
|
+
}, {
|
|
427
|
+
column1: 'Test content',
|
|
428
|
+
column2: 'Test content 2'
|
|
429
|
+
}, {
|
|
430
|
+
column1: 'Test content',
|
|
431
|
+
column2: 'Test content 2'
|
|
432
|
+
}];
|
|
433
|
+
var wrapper = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Table, {
|
|
434
|
+
rows: rows,
|
|
435
|
+
columns: columns,
|
|
436
|
+
accordion: true,
|
|
437
|
+
collapsedRows: 3,
|
|
438
|
+
collapsed: true
|
|
439
|
+
}));
|
|
440
|
+
expect(wrapper.container.querySelectorAll("".concat(_TableStyles.StyledTableBodyRow))).toHaveLength(3);
|
|
441
|
+
(0, _testUtils.act)(function () {
|
|
442
|
+
var button = wrapper.container.querySelectorAll("".concat(_TableStyles.StyledTableFooterCollapseButton))[0];
|
|
443
|
+
button.click();
|
|
444
|
+
});
|
|
445
|
+
expect(wrapper.container.querySelectorAll("".concat(_TableStyles.StyledTableBodyRow))).toHaveLength(4);
|
|
446
|
+
});
|
|
447
|
+
it('Should collapse when show less button is clicked', function () {
|
|
448
|
+
var columns = [{
|
|
449
|
+
key: 'column1',
|
|
450
|
+
name: 'Column 1'
|
|
451
|
+
}, {
|
|
452
|
+
key: 'column2',
|
|
453
|
+
name: 'Column 2'
|
|
454
|
+
}];
|
|
455
|
+
var rows = [{
|
|
456
|
+
column1: 'Test content',
|
|
457
|
+
column2: 'Test content 2'
|
|
458
|
+
}, {
|
|
459
|
+
column1: 'Test content',
|
|
460
|
+
column2: 'Test content 2'
|
|
461
|
+
}, {
|
|
462
|
+
column1: 'Test content',
|
|
463
|
+
column2: 'Test content 2'
|
|
464
|
+
}, {
|
|
465
|
+
column1: 'Test content',
|
|
466
|
+
column2: 'Test content 2'
|
|
467
|
+
}];
|
|
468
|
+
var wrapper = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Table, {
|
|
469
|
+
rows: rows,
|
|
470
|
+
columns: columns,
|
|
471
|
+
accordion: true,
|
|
472
|
+
collapsedRows: 3,
|
|
473
|
+
collapsed: false
|
|
474
|
+
}));
|
|
475
|
+
expect(wrapper.container.querySelectorAll("".concat(_TableStyles.StyledTableBodyRow))).toHaveLength(4);
|
|
476
|
+
(0, _testUtils.act)(function () {
|
|
477
|
+
var button = wrapper.container.querySelectorAll("".concat(_TableStyles.StyledTableFooterCollapseButton))[0];
|
|
478
|
+
button.click();
|
|
479
|
+
});
|
|
480
|
+
expect(wrapper.container.querySelectorAll("".concat(_TableStyles.StyledTableBodyRow))).toHaveLength(3);
|
|
481
|
+
});
|
|
482
|
+
});
|
|
319
483
|
});
|
|
320
484
|
//# sourceMappingURL=Table.test.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/Table/__tests__/Table.test.tsx"],"names":["describe","it","columns","key","name","rows","column1","column2","getByTestId","expect","toBeDefined","queryByTestId","not","toBeNull","tableHeaderRow","children","textContent","toContain","getElementsByTagName","length","toEqual","classList","contains","toBe"],"mappings":"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","sourcesContent":["import React from 'react';\n/**\n * Import React libraries.\n */\nimport { render } from '@testing-library/react';\n\n/**\n * Import custom components.\n */\nimport { Table } from '../index';\n\n/**\n * Import third-party libraries.\n */\nimport 'jest-styled-components';\n\n/**\n * Import custom types.\n */\nimport { TableColumn } from '../TableTypes';\n\ndescribe('<Table />', () => {\n it('Renders the Table', () => {\n const columns: TableColumn[] = [\n {\n key: 'column1',\n name: 'Column 1',\n },\n {\n key: 'column2',\n name: 'Column 2',\n },\n ];\n const rows: any[] = [\n {\n column1: 'Test content',\n column2: 'Test content 2',\n },\n ];\n const { getByTestId } = render(<Table rows={rows} columns={columns} title=\"Test title\" />);\n expect(getByTestId('TestTable')).toBeDefined();\n });\n\n describe('Table Header Row Tests', () => {\n it('Should render table header row in case title is passed', () => {\n const columns: TableColumn[] = [\n {\n key: 'column1',\n name: 'Column 1',\n },\n {\n key: 'column2',\n name: 'Column 2',\n },\n ];\n const rows: any[] = [\n {\n column1: 'Test content',\n column2: 'Test content 2',\n },\n ];\n const { queryByTestId } = render(<Table rows={rows} columns={columns} title=\"Test title\" />);\n expect(queryByTestId('TestTableHeaderRow')).not.toBeNull();\n });\n\n it('Should not render table header row in case title is passed', () => {\n const columns: TableColumn[] = [\n {\n key: 'column1',\n name: 'Column 1',\n },\n {\n key: 'column2',\n name: 'Column 2',\n },\n ];\n const rows: any[] = [\n {\n column1: 'Test content',\n column2: 'Test content 2',\n },\n ];\n const { queryByTestId } = render(<Table rows={rows} columns={columns} />);\n expect(queryByTestId('TestTableHeaderRow')).toBeNull();\n });\n\n describe('Table Header Row functional tests', () => {\n it('Should have title', () => {\n const columns: TableColumn[] = [\n {\n key: 'column1',\n name: 'Column 1',\n },\n {\n key: 'column2',\n name: 'Column 2',\n },\n ];\n const rows: any[] = [\n {\n column1: 'Test content',\n column2: 'Test content 2',\n },\n ];\n const { queryByTestId } = render(<Table rows={rows} columns={columns} title=\"Test Title\" />);\n const tableHeaderRow = queryByTestId('TestTableHeaderRow');\n expect(tableHeaderRow?.children[0].children[0].textContent).toContain('Test Title');\n });\n\n it('Should have options menu', () => {\n const columns: TableColumn[] = [\n {\n key: 'column1',\n name: 'Column 1',\n },\n {\n key: 'column2',\n name: 'Column 2',\n },\n ];\n const rows: any[] = [\n {\n column1: 'Test content',\n column2: 'Test content 2',\n },\n ];\n const { queryByTestId } = render(<Table rows={rows} columns={columns} title=\"Test Title\" />);\n expect(queryByTestId('TestTableHeaderRow')?.getElementsByTagName('svg')).not.toBeNull();\n });\n });\n });\n\n describe('Table Column Header Row Tests', () => {\n it('Should render column header row', () => {\n const columns: TableColumn[] = [\n {\n key: 'column1',\n name: 'Column 1',\n },\n {\n key: 'column2',\n name: 'Column 2',\n },\n ];\n const rows: any[] = [\n {\n column1: 'Test content',\n column2: 'Test content 2',\n },\n ];\n const { getByTestId } = render(<Table rows={rows} columns={columns} />);\n expect(getByTestId('TestTableColumnHeaderRow')).not.toBeNull();\n });\n\n it('Should render two columns in the column header row', () => {\n const columns: TableColumn[] = [\n {\n key: 'column1',\n name: 'Column 1',\n },\n {\n key: 'column2',\n name: 'Column 2',\n },\n ];\n const rows: any[] = [\n {\n column1: 'Test content',\n column2: 'Test content 2',\n },\n ];\n const { getByTestId } = render(<Table rows={rows} columns={columns} />);\n expect(getByTestId('TestTableColumnHeaderRow').children.length).toEqual(2);\n });\n\n it('Should render correct column names in the column header row', () => {\n const columns: TableColumn[] = [\n {\n key: 'column1',\n name: 'Column 1',\n },\n {\n key: 'column2',\n name: 'Column 2',\n },\n ];\n const rows: any[] = [\n {\n column1: 'Test content',\n column2: 'Test content 2',\n },\n ];\n const { getByTestId } = render(<Table rows={rows} columns={columns} />);\n expect(getByTestId('TestTableColumnHeaderRow').children[0].textContent).toEqual('Column 1');\n expect(getByTestId('TestTableColumnHeaderRow').children[1].textContent).toEqual('Column 2');\n });\n\n it('Should render columns without no-border class in the column header row, in case title is passed', () => {\n const columns: TableColumn[] = [\n {\n key: 'column1',\n name: 'Column 1',\n },\n {\n key: 'column2',\n name: 'Column 2',\n },\n ];\n const rows: any[] = [\n {\n column1: 'Test content',\n column2: 'Test content 2',\n },\n ];\n const { getByTestId } = render(<Table rows={rows} columns={columns} title=\"test title\" />);\n expect(getByTestId('TestTableColumnHeaderRow').children[0].classList.contains('no-border')).toBe(false);\n expect(getByTestId('TestTableColumnHeaderRow').children[1].classList.contains('no-border')).toBe(false);\n });\n\n });\n\n describe('Table Body Row tests', () => {\n it('Should not render \"No Data\" row in case there are rows', () => {\n const columns: TableColumn[] = [\n {\n key: 'column1',\n name: 'Column 1',\n },\n {\n key: 'column2',\n name: 'Column 2',\n },\n ];\n const rows: any[] = [\n {\n column1: 'Test content',\n column2: 'Test content 2',\n },\n ];\n const { queryByTestId } = render(<Table rows={rows} columns={columns} />);\n expect(queryByTestId('TestTableNoDataRow')).toBeNull();\n });\n\n it('Should render \"No Data\" row in case there are no rows', () => {\n const columns: TableColumn[] = [\n {\n key: 'column1',\n name: 'Column 1',\n },\n {\n key: 'column2',\n name: 'Column 2',\n },\n ];\n const rows: any[] = [];\n const { queryByTestId } = render(<Table rows={rows} columns={columns} />);\n expect(queryByTestId('TestTableNoDataRow')).not.toBeNull();\n expect(queryByTestId('TestTableNoDataRow')?.textContent).toEqual('There are no rows to display');\n });\n\n it('Should render a data row with correct content for each row that is passed', () => {\n const columns: TableColumn[] = [\n {\n key: 'column1',\n name: 'Column 1',\n },\n {\n key: 'column2',\n name: 'Column 2',\n },\n ];\n const rows: any[] = [\n {\n column1: 'Test content',\n column2: 'Test content 2',\n },\n ];\n const { getByTestId } = render(<Table rows={rows} columns={columns} />);\n expect(getByTestId('TestTableDataRow')).toBeDefined();\n expect(getByTestId('TestTableDataRow').children.length).toEqual(2);\n expect(getByTestId('TestTableDataRow').children[0].textContent).toEqual('Test content');\n expect(getByTestId('TestTableDataRow').children[1].textContent).toEqual('Test content 2');\n });\n });\n\n it('Should render footer row', () => {\n const columns: TableColumn[] = [\n {\n key: 'column1',\n name: 'Column 1',\n },\n {\n key: 'column2',\n name: 'Column 2',\n },\n ];\n const rows: any[] = [\n {\n column1: 'Test content',\n column2: 'Test content 2',\n },\n ];\n const { getByTestId } = render(<Table rows={rows} columns={columns} />);\n expect(getByTestId('TestTableFooterRow')).toBeDefined();\n });\n});\n"],"file":"Table.test.js"}
|
|
1
|
+
{"version":3,"sources":["../../../../src/Table/__tests__/Table.test.tsx"],"names":["describe","it","columns","key","name","rows","column1","column2","getByTestId","expect","toBeDefined","queryByTestId","not","toBeNull","tableHeaderRow","children","textContent","toContain","getElementsByTagName","length","toEqual","classList","contains","toBe","wrapper","container","querySelectorAll","StyledTableFooterCollapseButton","toHaveLength","StyledTableBodyRow","button","click"],"mappings":"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","sourcesContent":["import React from 'react';\n/**\n * Import React libraries.\n */\nimport { render } from '@testing-library/react';\n\n/**\n * Import custom components.\n */\nimport { Table } from '../index';\n\n/**\n * Import third-party libraries.\n */\nimport 'jest-styled-components';\n\n/**\n * Import custom types.\n */\nimport { TableColumn } from '../TableTypes';\nimport {StyledTableBodyRow, StyledTableFooterCollapseButton} from '../TableStyles';\nimport {act} from 'react-dom/test-utils';\n\ndescribe('<Table />', () => {\n it('Renders the Table', () => {\n const columns: TableColumn[] = [\n {\n key: 'column1',\n name: 'Column 1',\n },\n {\n key: 'column2',\n name: 'Column 2',\n },\n ];\n const rows: any[] = [\n {\n column1: 'Test content',\n column2: 'Test content 2',\n },\n ];\n const { getByTestId } = render(<Table rows={rows} columns={columns} title=\"Test title\" />);\n expect(getByTestId('TestTable')).toBeDefined();\n });\n\n describe('Table Header Row Tests', () => {\n it('Should render table header row in case title is passed', () => {\n const columns: TableColumn[] = [\n {\n key: 'column1',\n name: 'Column 1',\n },\n {\n key: 'column2',\n name: 'Column 2',\n },\n ];\n const rows: any[] = [\n {\n column1: 'Test content',\n column2: 'Test content 2',\n },\n ];\n const { queryByTestId } = render(<Table rows={rows} columns={columns} title=\"Test title\" />);\n expect(queryByTestId('TestTableHeaderRow')).not.toBeNull();\n });\n\n it('Should not render table header row in case title is passed', () => {\n const columns: TableColumn[] = [\n {\n key: 'column1',\n name: 'Column 1',\n },\n {\n key: 'column2',\n name: 'Column 2',\n },\n ];\n const rows: any[] = [\n {\n column1: 'Test content',\n column2: 'Test content 2',\n },\n ];\n const { queryByTestId } = render(<Table rows={rows} columns={columns} />);\n expect(queryByTestId('TestTableHeaderRow')).toBeNull();\n });\n\n describe('Table Header Row functional tests', () => {\n it('Should have title', () => {\n const columns: TableColumn[] = [\n {\n key: 'column1',\n name: 'Column 1',\n },\n {\n key: 'column2',\n name: 'Column 2',\n },\n ];\n const rows: any[] = [\n {\n column1: 'Test content',\n column2: 'Test content 2',\n },\n ];\n const { queryByTestId } = render(<Table rows={rows} columns={columns} title=\"Test Title\" />);\n const tableHeaderRow = queryByTestId('TestTableHeaderRow');\n expect(tableHeaderRow?.children[0].children[0].textContent).toContain('Test Title');\n });\n\n it('Should have options menu', () => {\n const columns: TableColumn[] = [\n {\n key: 'column1',\n name: 'Column 1',\n },\n {\n key: 'column2',\n name: 'Column 2',\n },\n ];\n const rows: any[] = [\n {\n column1: 'Test content',\n column2: 'Test content 2',\n },\n ];\n const { queryByTestId } = render(<Table rows={rows} columns={columns} title=\"Test Title\" />);\n expect(queryByTestId('TestTableHeaderRow')?.getElementsByTagName('svg')).not.toBeNull();\n });\n });\n });\n\n describe('Table Column Header Row Tests', () => {\n it('Should render column header row', () => {\n const columns: TableColumn[] = [\n {\n key: 'column1',\n name: 'Column 1',\n },\n {\n key: 'column2',\n name: 'Column 2',\n },\n ];\n const rows: any[] = [\n {\n column1: 'Test content',\n column2: 'Test content 2',\n },\n ];\n const { getByTestId } = render(<Table rows={rows} columns={columns} />);\n expect(getByTestId('TestTableColumnHeaderRow')).not.toBeNull();\n });\n\n it('Should render two columns in the column header row', () => {\n const columns: TableColumn[] = [\n {\n key: 'column1',\n name: 'Column 1',\n },\n {\n key: 'column2',\n name: 'Column 2',\n },\n ];\n const rows: any[] = [\n {\n column1: 'Test content',\n column2: 'Test content 2',\n },\n ];\n const { getByTestId } = render(<Table rows={rows} columns={columns} />);\n expect(getByTestId('TestTableColumnHeaderRow').children.length).toEqual(2);\n });\n\n it('Should render correct column names in the column header row', () => {\n const columns: TableColumn[] = [\n {\n key: 'column1',\n name: 'Column 1',\n },\n {\n key: 'column2',\n name: 'Column 2',\n },\n ];\n const rows: any[] = [\n {\n column1: 'Test content',\n column2: 'Test content 2',\n },\n ];\n const { getByTestId } = render(<Table rows={rows} columns={columns} />);\n expect(getByTestId('TestTableColumnHeaderRow').children[0].textContent).toEqual('Column 1');\n expect(getByTestId('TestTableColumnHeaderRow').children[1].textContent).toEqual('Column 2');\n });\n\n it('Should render columns without no-border class in the column header row, in case title is passed', () => {\n const columns: TableColumn[] = [\n {\n key: 'column1',\n name: 'Column 1',\n },\n {\n key: 'column2',\n name: 'Column 2',\n },\n ];\n const rows: any[] = [\n {\n column1: 'Test content',\n column2: 'Test content 2',\n },\n ];\n const { getByTestId } = render(<Table rows={rows} columns={columns} title=\"test title\" />);\n expect(getByTestId('TestTableColumnHeaderRow').children[0].classList.contains('no-border')).toBe(false);\n expect(getByTestId('TestTableColumnHeaderRow').children[1].classList.contains('no-border')).toBe(false);\n });\n\n });\n\n describe('Table Body Row tests', () => {\n it('Should not render \"No Data\" row in case there are rows', () => {\n const columns: TableColumn[] = [\n {\n key: 'column1',\n name: 'Column 1',\n },\n {\n key: 'column2',\n name: 'Column 2',\n },\n ];\n const rows: any[] = [\n {\n column1: 'Test content',\n column2: 'Test content 2',\n },\n ];\n const { queryByTestId } = render(<Table rows={rows} columns={columns} />);\n expect(queryByTestId('TestTableNoDataRow')).toBeNull();\n });\n\n it('Should render \"No Data\" row in case there are no rows', () => {\n const columns: TableColumn[] = [\n {\n key: 'column1',\n name: 'Column 1',\n },\n {\n key: 'column2',\n name: 'Column 2',\n },\n ];\n const rows: any[] = [];\n const { queryByTestId } = render(<Table rows={rows} columns={columns} />);\n expect(queryByTestId('TestTableNoDataRow')).not.toBeNull();\n expect(queryByTestId('TestTableNoDataRow')?.textContent).toEqual('There are no rows to display');\n });\n\n it('Should render a data row with correct content for each row that is passed', () => {\n const columns: TableColumn[] = [\n {\n key: 'column1',\n name: 'Column 1',\n },\n {\n key: 'column2',\n name: 'Column 2',\n },\n ];\n const rows: any[] = [\n {\n column1: 'Test content',\n column2: 'Test content 2',\n },\n ];\n const { getByTestId } = render(<Table rows={rows} columns={columns} />);\n expect(getByTestId('TestTableDataRow')).toBeDefined();\n expect(getByTestId('TestTableDataRow').children.length).toEqual(2);\n expect(getByTestId('TestTableDataRow').children[0].textContent).toEqual('Test content');\n expect(getByTestId('TestTableDataRow').children[1].textContent).toEqual('Test content 2');\n });\n });\n\n it('Should render footer row', () => {\n const columns: TableColumn[] = [\n {\n key: 'column1',\n name: 'Column 1',\n },\n {\n key: 'column2',\n name: 'Column 2',\n },\n ];\n const rows: any[] = [\n {\n column1: 'Test content',\n column2: 'Test content 2',\n },\n ];\n const { getByTestId } = render(<Table rows={rows} columns={columns} />);\n expect(getByTestId('TestTableFooterRow')).toBeDefined();\n });\n\n describe('Table Accordion tests', () => {\n it('Should render collapse button when configured as accordion', () => {\n const columns: TableColumn[] = [\n {\n key: 'column1',\n name: 'Column 1',\n },\n {\n key: 'column2',\n name: 'Column 2',\n },\n ];\n const rows: any[] = [\n {\n column1: 'Test content',\n column2: 'Test content 2',\n },\n {\n column1: 'Test content',\n column2: 'Test content 2',\n },\n {\n column1: 'Test content',\n column2: 'Test content 2',\n },\n {\n column1: 'Test content',\n column2: 'Test content 2',\n },\n ];\n const wrapper = render(<Table rows={rows} columns={columns} accordion={true} collapsedRows={3}/>);\n\n expect(wrapper.container.querySelectorAll(`${StyledTableFooterCollapseButton}`)).toHaveLength(1);\n });\n\n it('Should not render all items when collapsed', () => {\n const columns: TableColumn[] = [\n {\n key: 'column1',\n name: 'Column 1',\n },\n {\n key: 'column2',\n name: 'Column 2',\n },\n ];\n const rows: any[] = [\n {\n column1: 'Test content',\n column2: 'Test content 2',\n },\n {\n column1: 'Test content',\n column2: 'Test content 2',\n },\n {\n column1: 'Test content',\n column2: 'Test content 2',\n },\n {\n column1: 'Test content',\n column2: 'Test content 2',\n },\n ];\n const wrapper = render(<Table rows={rows} columns={columns} accordion={true} collapsedRows={3}/>);\n\n expect(wrapper.container.querySelectorAll(`${StyledTableBodyRow}`)).toHaveLength(3);\n });\n\n it('Should render all items when not collapsed', () => {\n const columns: TableColumn[] = [\n {\n key: 'column1',\n name: 'Column 1',\n },\n {\n key: 'column2',\n name: 'Column 2',\n },\n ];\n const rows: any[] = [\n {\n column1: 'Test content',\n column2: 'Test content 2',\n },\n {\n column1: 'Test content',\n column2: 'Test content 2',\n },\n {\n column1: 'Test content',\n column2: 'Test content 2',\n },\n {\n column1: 'Test content',\n column2: 'Test content 2',\n },\n ];\n const wrapper = render(<Table rows={rows} columns={columns} accordion={true} collapsedRows={3}\n collapsed={false}/>);\n\n expect(wrapper.container.querySelectorAll(`${StyledTableBodyRow}`)).toHaveLength(4);\n });\n\n it('Should expand when show more button is clicked', () => {\n const columns: TableColumn[] = [\n {\n key: 'column1',\n name: 'Column 1',\n },\n {\n key: 'column2',\n name: 'Column 2',\n },\n ];\n const rows: any[] = [\n {\n column1: 'Test content',\n column2: 'Test content 2',\n },\n {\n column1: 'Test content',\n column2: 'Test content 2',\n },\n {\n column1: 'Test content',\n column2: 'Test content 2',\n },\n {\n column1: 'Test content',\n column2: 'Test content 2',\n },\n ];\n const wrapper = render(<Table rows={rows} columns={columns} accordion={true} collapsedRows={3}\n collapsed={true}/>);\n\n expect(wrapper.container.querySelectorAll(`${StyledTableBodyRow}`)).toHaveLength(3);\n\n act(() => {\n let button = wrapper.container.querySelectorAll(`${StyledTableFooterCollapseButton}`)[0] as HTMLButtonElement;\n button.click();\n })\n\n expect(wrapper.container.querySelectorAll(`${StyledTableBodyRow}`)).toHaveLength(4);\n });\n\n it('Should collapse when show less button is clicked', () => {\n const columns: TableColumn[] = [\n {\n key: 'column1',\n name: 'Column 1',\n },\n {\n key: 'column2',\n name: 'Column 2',\n },\n ];\n const rows: any[] = [\n {\n column1: 'Test content',\n column2: 'Test content 2',\n },\n {\n column1: 'Test content',\n column2: 'Test content 2',\n },\n {\n column1: 'Test content',\n column2: 'Test content 2',\n },\n {\n column1: 'Test content',\n column2: 'Test content 2',\n },\n ];\n const wrapper = render(<Table rows={rows} columns={columns} accordion={true} collapsedRows={3}\n collapsed={false}/>);\n\n expect(wrapper.container.querySelectorAll(`${StyledTableBodyRow}`)).toHaveLength(4);\n\n act(() => {\n let button = wrapper.container.querySelectorAll(`${StyledTableFooterCollapseButton}`)[0] as HTMLButtonElement;\n button.click();\n })\n\n expect(wrapper.container.querySelectorAll(`${StyledTableBodyRow}`)).toHaveLength(3);\n });\n });\n});\n"],"file":"Table.test.js"}
|
package/dist/umd/Table/Table.js
CHANGED
|
@@ -116,7 +116,10 @@
|
|
|
116
116
|
showLoadingIndicator,
|
|
117
117
|
selectable,
|
|
118
118
|
multiSelect,
|
|
119
|
-
keyExpr
|
|
119
|
+
keyExpr,
|
|
120
|
+
accordion,
|
|
121
|
+
collapsed = true,
|
|
122
|
+
collapsedRows
|
|
120
123
|
} = props; // States used within the component
|
|
121
124
|
|
|
122
125
|
const [rowsPerPage, setRowsPerPage] = React.useState(10);
|
|
@@ -128,6 +131,7 @@
|
|
|
128
131
|
const [from, setFrom] = React.useState();
|
|
129
132
|
const [to, setTo] = React.useState();
|
|
130
133
|
const [total, setTotal] = React.useState();
|
|
134
|
+
const [isCollapsed, setIsCollapsed] = React.useState(true);
|
|
131
135
|
const [selectAllState, setSelectAllState] = React.useState('none');
|
|
132
136
|
const [selected, setSelected] = React.useState(multiSelect ? [] : undefined);
|
|
133
137
|
React.useEffect(() => {
|
|
@@ -181,6 +185,18 @@
|
|
|
181
185
|
setRowsPerPage(pagination?.rowsPerPage);
|
|
182
186
|
}
|
|
183
187
|
}, [remoteOperations, pagination, rows]);
|
|
188
|
+
/**
|
|
189
|
+
* Sets number of rows to display when accordion.
|
|
190
|
+
*/
|
|
191
|
+
|
|
192
|
+
React.useEffect(() => {
|
|
193
|
+
if (!accordion) return;
|
|
194
|
+
setRowsPerPage(isCollapsed ? collapsedRows || 10 : rows.length);
|
|
195
|
+
}, [rows, accordion, collapsedRows, isCollapsed]);
|
|
196
|
+
React.useEffect(() => {
|
|
197
|
+
if (!accordion) return;
|
|
198
|
+
setIsCollapsed(!!collapsed);
|
|
199
|
+
}, [accordion, collapsed]);
|
|
184
200
|
/**
|
|
185
201
|
* Filters out a rows by specific column filters and sorts them if any sorting is set.
|
|
186
202
|
* @returns Filtered and sorted rows.
|
|
@@ -408,6 +424,8 @@
|
|
|
408
424
|
})), /*#__PURE__*/React.createElement(_TableFooter2.default, _extends({}, props, {
|
|
409
425
|
onRowsPerPageChange: changeRowsPerPage,
|
|
410
426
|
rowsPerPage: rowsPerPage,
|
|
427
|
+
setIsCollapsed: setIsCollapsed,
|
|
428
|
+
isCollapsed: isCollapsed,
|
|
411
429
|
from: from,
|
|
412
430
|
to: to,
|
|
413
431
|
total: total,
|