@dxc-technology/halstack-react 10.0.0 → 11.0.0
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/BackgroundColorContext.d.ts +2 -2
- package/BackgroundColorContext.js +5 -17
- package/HalstackContext.d.ts +26 -6
- package/HalstackContext.js +9 -34
- package/README.md +47 -0
- package/accordion/Accordion.js +21 -58
- package/accordion/Accordion.stories.tsx +1 -15
- package/accordion/Accordion.test.js +18 -33
- package/accordion/types.d.ts +5 -5
- package/accordion-group/AccordionGroup.js +15 -42
- package/accordion-group/AccordionGroup.stories.tsx +1 -1
- package/accordion-group/AccordionGroup.test.js +42 -60
- package/accordion-group/AccordionGroupAccordion.js +9 -21
- package/accordion-group/types.d.ts +6 -6
- package/alert/Alert.js +14 -46
- package/alert/Alert.test.js +28 -45
- package/alert/types.d.ts +5 -5
- package/badge/Badge.js +4 -17
- package/badge/types.d.ts +1 -1
- package/bleed/Bleed.js +13 -21
- package/bleed/types.d.ts +2 -2
- package/box/Box.js +10 -29
- package/box/Box.test.js +1 -6
- package/box/types.d.ts +3 -3
- package/bulleted-list/BulletedList.js +7 -33
- package/bulleted-list/BulletedList.stories.tsx +1 -91
- package/bulleted-list/types.d.ts +5 -5
- package/button/Button.js +23 -46
- package/button/Button.stories.tsx +5 -86
- package/button/Button.test.js +11 -21
- package/button/types.d.ts +4 -4
- package/card/Card.js +21 -44
- package/card/Card.test.js +10 -21
- package/card/types.d.ts +5 -5
- package/checkbox/Checkbox.js +81 -111
- package/checkbox/Checkbox.stories.tsx +16 -54
- package/checkbox/Checkbox.test.js +107 -63
- package/checkbox/types.d.ts +8 -4
- package/chip/Chip.js +12 -31
- package/chip/Chip.test.js +15 -28
- package/chip/types.d.ts +4 -4
- package/common/coreTokens.js +1 -2
- package/common/utils.js +2 -8
- package/common/variables.d.ts +23 -6
- package/common/variables.js +25 -15
- package/date-input/Calendar.js +13 -57
- package/date-input/DateInput.js +50 -96
- package/date-input/DateInput.stories.tsx +11 -30
- package/date-input/DateInput.test.js +674 -701
- package/date-input/DatePicker.js +11 -42
- package/date-input/Icons.d.ts +6 -6
- package/date-input/Icons.js +6 -23
- package/date-input/YearPicker.js +8 -34
- package/date-input/types.d.ts +27 -21
- package/dialog/Dialog.js +11 -35
- package/dialog/Dialog.test.js +125 -187
- package/dialog/types.d.ts +18 -13
- package/dropdown/Dropdown.js +39 -93
- package/dropdown/Dropdown.test.js +391 -378
- package/dropdown/DropdownMenu.js +8 -19
- package/dropdown/DropdownMenuItem.js +5 -17
- package/dropdown/types.d.ts +17 -19
- package/file-input/FileInput.js +131 -220
- package/file-input/FileInput.stories.tsx +1 -1
- package/file-input/FileInput.test.js +293 -342
- package/file-input/FileItem.js +12 -39
- package/file-input/types.d.ts +9 -9
- package/flex/Flex.js +25 -39
- package/flex/types.d.ts +6 -6
- package/footer/Footer.js +9 -39
- package/footer/Footer.stories.tsx +8 -7
- package/footer/Footer.test.js +18 -32
- package/footer/Icons.d.ts +2 -2
- package/footer/Icons.js +2 -7
- package/footer/types.d.ts +13 -13
- package/grid/Grid.js +1 -16
- package/grid/types.d.ts +10 -10
- package/header/Header.d.ts +1 -1
- package/header/Header.js +19 -64
- package/header/Header.test.js +12 -25
- package/header/Icons.d.ts +2 -2
- package/header/Icons.js +2 -7
- package/header/types.d.ts +5 -7
- package/heading/Heading.js +9 -31
- package/heading/Heading.test.js +70 -87
- package/heading/types.d.ts +7 -7
- package/image/Image.d.ts +4 -0
- package/image/Image.js +70 -0
- package/image/Image.stories.tsx +127 -0
- package/image/types.d.ts +72 -0
- package/inset/Inset.js +13 -21
- package/inset/types.d.ts +2 -2
- package/layout/ApplicationLayout.d.ts +1 -1
- package/layout/ApplicationLayout.js +25 -65
- package/layout/ApplicationLayout.stories.tsx +1 -1
- package/layout/Icons.d.ts +8 -5
- package/layout/Icons.js +51 -59
- package/layout/SidenavContext.d.ts +1 -1
- package/layout/SidenavContext.js +3 -9
- package/layout/types.d.ts +3 -3
- package/link/Link.js +21 -42
- package/link/Link.test.js +23 -41
- package/link/types.d.ts +14 -14
- package/main.d.ts +3 -2
- package/main.js +10 -51
- package/nav-tabs/NavTabs.js +11 -43
- package/nav-tabs/NavTabs.stories.tsx +1 -1
- package/nav-tabs/NavTabs.test.js +36 -43
- package/nav-tabs/Tab.js +16 -45
- package/nav-tabs/types.d.ts +9 -9
- package/number-input/NumberInput.d.ts +7 -0
- package/number-input/NumberInput.js +26 -35
- package/number-input/NumberInput.stories.tsx +42 -26
- package/number-input/NumberInput.test.js +700 -412
- package/number-input/types.d.ts +11 -5
- package/package.json +28 -26
- package/paginator/Icons.d.ts +5 -5
- package/paginator/Icons.js +5 -19
- package/paginator/Paginator.js +14 -39
- package/paginator/Paginator.test.js +224 -207
- package/paginator/types.d.ts +3 -3
- package/paragraph/Paragraph.js +3 -14
- package/paragraph/Paragraph.stories.tsx +0 -17
- package/password-input/Icons.d.ts +6 -0
- package/password-input/Icons.js +35 -0
- package/password-input/PasswordInput.js +57 -126
- package/password-input/PasswordInput.stories.tsx +1 -32
- package/password-input/PasswordInput.test.js +157 -140
- package/password-input/types.d.ts +8 -7
- package/progress-bar/ProgressBar.js +16 -42
- package/progress-bar/{ProgressBar.stories.jsx → ProgressBar.stories.tsx} +1 -1
- package/progress-bar/ProgressBar.test.js +35 -52
- package/progress-bar/types.d.ts +3 -3
- package/quick-nav/QuickNav.js +4 -27
- package/quick-nav/QuickNav.stories.tsx +1 -1
- package/quick-nav/types.d.ts +10 -10
- package/radio-group/Radio.d.ts +1 -1
- package/radio-group/Radio.js +22 -54
- package/radio-group/RadioGroup.js +37 -83
- package/radio-group/RadioGroup.stories.tsx +10 -10
- package/radio-group/RadioGroup.test.js +504 -470
- package/radio-group/types.d.ts +8 -8
- package/resultset-table/Icons.d.ts +7 -0
- package/{resultsetTable → resultset-table}/Icons.js +1 -5
- package/{resultsetTable → resultset-table}/ResultsetTable.js +22 -58
- package/{resultsetTable → resultset-table}/ResultsetTable.test.js +72 -92
- package/{resultsetTable → resultset-table}/types.d.ts +7 -7
- package/select/Icons.d.ts +7 -7
- package/select/Icons.js +1 -5
- package/select/Listbox.js +13 -39
- package/select/Option.js +9 -26
- package/select/Select.js +54 -138
- package/select/Select.stories.tsx +3 -3
- package/select/Select.test.js +1906 -1800
- package/select/types.d.ts +14 -15
- package/sidenav/Icons.d.ts +4 -4
- package/sidenav/Icons.js +1 -5
- package/sidenav/Sidenav.js +24 -63
- package/sidenav/Sidenav.test.js +3 -10
- package/sidenav/types.d.ts +18 -18
- package/slider/Slider.js +38 -86
- package/slider/Slider.test.js +107 -103
- package/slider/types.d.ts +4 -4
- package/spinner/Spinner.js +10 -40
- package/spinner/Spinner.test.js +25 -34
- package/spinner/types.d.ts +3 -3
- package/switch/Switch.js +26 -69
- package/switch/Switch.stories.tsx +0 -34
- package/switch/Switch.test.js +51 -96
- package/switch/types.d.ts +4 -4
- package/table/Table.js +4 -23
- package/table/Table.test.js +1 -6
- package/table/types.d.ts +8 -8
- package/tabs/Tab.js +10 -29
- package/tabs/Tabs.js +48 -124
- package/tabs/Tabs.test.js +62 -118
- package/tabs/types.d.ts +19 -19
- package/tag/Tag.js +21 -51
- package/tag/Tag.test.js +19 -30
- package/tag/types.d.ts +7 -7
- package/text-input/Icons.d.ts +5 -5
- package/text-input/Icons.js +1 -5
- package/text-input/Suggestion.js +9 -26
- package/text-input/Suggestions.d.ts +1 -1
- package/text-input/Suggestions.js +12 -57
- package/text-input/TextInput.js +182 -263
- package/text-input/TextInput.stories.tsx +48 -152
- package/text-input/TextInput.test.js +1210 -1194
- package/text-input/types.d.ts +25 -17
- package/textarea/Textarea.js +60 -96
- package/textarea/{Textarea.stories.jsx → Textarea.stories.tsx} +58 -99
- package/textarea/Textarea.test.js +150 -179
- package/textarea/types.d.ts +9 -5
- package/toggle-group/ToggleGroup.js +91 -105
- package/toggle-group/ToggleGroup.stories.tsx +7 -4
- package/toggle-group/ToggleGroup.test.js +68 -87
- package/toggle-group/types.d.ts +26 -17
- package/typography/Typography.js +4 -13
- package/typography/types.d.ts +1 -1
- package/useTheme.d.ts +20 -3
- package/useTheme.js +1 -8
- package/useTranslatedLabels.js +1 -7
- package/utils/BaseTypography.d.ts +2 -2
- package/utils/BaseTypography.js +16 -30
- package/utils/FocusLock.js +12 -36
- package/wizard/Wizard.js +14 -49
- package/wizard/Wizard.test.js +53 -80
- package/wizard/types.d.ts +6 -6
- package/number-input/NumberInputContext.d.ts +0 -4
- package/number-input/NumberInputContext.js +0 -19
- package/number-input/numberInputContextTypes.d.ts +0 -19
- package/resultsetTable/Icons.d.ts +0 -7
- package/slider/Slider.stories.tsx +0 -240
- /package/{resultsetTable → image}/types.js +0 -0
- /package/{resultsetTable → resultset-table}/ResultsetTable.d.ts +0 -0
- /package/{resultsetTable → resultset-table}/ResultsetTable.stories.tsx +0 -0
- /package/{number-input/numberInputContextTypes.js → resultset-table/types.js} +0 -0
- /package/spinner/{Spinner.stories.jsx → Spinner.stories.tsx} +0 -0
- /package/table/{Table.stories.jsx → Table.stories.tsx} +0 -0
package/radio-group/types.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export
|
|
1
|
+
export type Option = {
|
|
2
2
|
/**
|
|
3
3
|
* Label of the option placed next to the radio input.
|
|
4
4
|
*/
|
|
@@ -14,11 +14,11 @@ export declare type Option = {
|
|
|
14
14
|
*/
|
|
15
15
|
disabled?: boolean;
|
|
16
16
|
};
|
|
17
|
-
|
|
17
|
+
type RadioGroupProps = {
|
|
18
18
|
/**
|
|
19
19
|
* Text to be placed above the radio group.
|
|
20
20
|
*/
|
|
21
|
-
label
|
|
21
|
+
label?: string;
|
|
22
22
|
/**
|
|
23
23
|
* Name attribute of the input element. This attribute will allow users
|
|
24
24
|
* to find the component's value during the submit event.
|
|
@@ -49,9 +49,9 @@ declare type RadioGroupProps = {
|
|
|
49
49
|
*/
|
|
50
50
|
optionalItemLabel?: string;
|
|
51
51
|
/**
|
|
52
|
-
* If true, the component will be
|
|
52
|
+
* If true, the component will not be mutable, meaning the user can not edit the control.
|
|
53
53
|
*/
|
|
54
|
-
|
|
54
|
+
readOnly?: boolean;
|
|
55
55
|
/**
|
|
56
56
|
* Sets the orientation of the options within the radio group.
|
|
57
57
|
*/
|
|
@@ -97,18 +97,18 @@ declare type RadioGroupProps = {
|
|
|
97
97
|
/**
|
|
98
98
|
* Reference to the component.
|
|
99
99
|
*/
|
|
100
|
-
export
|
|
100
|
+
export type RefType = HTMLDivElement;
|
|
101
101
|
/**
|
|
102
102
|
* Single radio prop types.
|
|
103
103
|
*/
|
|
104
|
-
export
|
|
104
|
+
export type RadioProps = {
|
|
105
105
|
label: string;
|
|
106
106
|
checked: boolean;
|
|
107
107
|
onClick: () => void;
|
|
108
108
|
error?: string;
|
|
109
109
|
disabled: boolean;
|
|
110
110
|
focused: boolean;
|
|
111
|
-
|
|
111
|
+
readOnly: boolean;
|
|
112
112
|
tabIndex: number;
|
|
113
113
|
};
|
|
114
114
|
export default RadioGroupProps;
|
|
@@ -1,14 +1,11 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
|
6
5
|
value: true
|
|
7
6
|
});
|
|
8
7
|
exports["default"] = void 0;
|
|
9
|
-
|
|
10
8
|
var _react = _interopRequireDefault(require("react"));
|
|
11
|
-
|
|
12
9
|
var icons = {
|
|
13
10
|
arrowUp: /*#__PURE__*/_react["default"].createElement("svg", {
|
|
14
11
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -47,5 +44,4 @@ var icons = {
|
|
|
47
44
|
d: "M12 5.83L15.17 9l1.41-1.41L12 3 7.41 7.59 8.83 9 12 5.83zm0 12.34L8.83 15l-1.41 1.41L12 21l4.59-4.59L15.17 15 12 18.17z"
|
|
48
45
|
}))
|
|
49
46
|
};
|
|
50
|
-
var _default = icons;
|
|
51
|
-
exports["default"] = _default;
|
|
47
|
+
var _default = exports["default"] = icons;
|
|
@@ -1,52 +1,33 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
4
|
var _typeof3 = require("@babel/runtime/helpers/typeof");
|
|
6
|
-
|
|
7
5
|
Object.defineProperty(exports, "__esModule", {
|
|
8
6
|
value: true
|
|
9
7
|
});
|
|
10
8
|
exports["default"] = void 0;
|
|
11
|
-
|
|
12
9
|
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
13
|
-
|
|
14
10
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
15
|
-
|
|
16
11
|
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
|
|
17
|
-
|
|
18
12
|
var _react = _interopRequireWildcard(require("react"));
|
|
19
|
-
|
|
20
13
|
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
21
|
-
|
|
22
14
|
var _variables = require("../common/variables");
|
|
23
|
-
|
|
24
15
|
var _Table = _interopRequireDefault(require("../table/Table"));
|
|
25
|
-
|
|
26
16
|
var _Paginator = _interopRequireDefault(require("../paginator/Paginator"));
|
|
27
|
-
|
|
28
17
|
var _useTheme = _interopRequireDefault(require("../useTheme"));
|
|
29
|
-
|
|
30
18
|
var _Icons = _interopRequireDefault(require("./Icons"));
|
|
31
|
-
|
|
32
19
|
var _utils = require("../common/utils");
|
|
33
|
-
|
|
34
20
|
var _templateObject, _templateObject2, _templateObject3;
|
|
35
|
-
|
|
36
|
-
function
|
|
37
|
-
|
|
38
|
-
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
39
|
-
|
|
21
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
22
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
|
40
23
|
var normalizeSortValue = function normalizeSortValue(sortValue) {
|
|
41
24
|
return typeof sortValue === "string" ? sortValue.toUpperCase() : sortValue;
|
|
42
25
|
};
|
|
43
|
-
|
|
44
26
|
var sortArray = function sortArray(index, order, resultset) {
|
|
45
27
|
return resultset.slice().sort(function (element1, element2) {
|
|
46
28
|
var sortValueA = normalizeSortValue(element1[index].sortValue || element1[index].displayValue);
|
|
47
29
|
var sortValueB = normalizeSortValue(element2[index].sortValue || element2[index].displayValue);
|
|
48
30
|
var comparison = 0;
|
|
49
|
-
|
|
50
31
|
if ((0, _typeof2["default"])(sortValueA) === "object") {
|
|
51
32
|
comparison = -1;
|
|
52
33
|
} else if ((0, _typeof2["default"])(sortValueB) === "object") {
|
|
@@ -56,48 +37,40 @@ var sortArray = function sortArray(index, order, resultset) {
|
|
|
56
37
|
} else if (sortValueA < sortValueB) {
|
|
57
38
|
comparison = -1;
|
|
58
39
|
}
|
|
59
|
-
|
|
60
40
|
return order === "descending" ? comparison * -1 : comparison;
|
|
61
41
|
});
|
|
62
42
|
};
|
|
63
|
-
|
|
64
43
|
var getMinItemsPerPageIndex = function getMinItemsPerPageIndex(currentPageInternal, itemsPerPage, page) {
|
|
65
44
|
return currentPageInternal === 1 ? 0 : itemsPerPage * (page - 1);
|
|
66
45
|
};
|
|
67
|
-
|
|
68
46
|
var getMaxItemsPerPageIndex = function getMaxItemsPerPageIndex(minItemsPerPageIndex, itemsPerPage, resultset, page) {
|
|
69
47
|
return minItemsPerPageIndex + itemsPerPage > resultset.length ? resultset.length : itemsPerPage * page - 1;
|
|
70
48
|
};
|
|
71
|
-
|
|
72
49
|
var DxcResultsetTable = function DxcResultsetTable(_ref) {
|
|
73
50
|
var columns = _ref.columns,
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
51
|
+
rows = _ref.rows,
|
|
52
|
+
_ref$showGoToPage = _ref.showGoToPage,
|
|
53
|
+
showGoToPage = _ref$showGoToPage === void 0 ? true : _ref$showGoToPage,
|
|
54
|
+
_ref$itemsPerPage = _ref.itemsPerPage,
|
|
55
|
+
itemsPerPage = _ref$itemsPerPage === void 0 ? 5 : _ref$itemsPerPage,
|
|
56
|
+
itemsPerPageOptions = _ref.itemsPerPageOptions,
|
|
57
|
+
itemsPerPageFunction = _ref.itemsPerPageFunction,
|
|
58
|
+
margin = _ref.margin,
|
|
59
|
+
_ref$tabIndex = _ref.tabIndex,
|
|
60
|
+
tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
|
|
84
61
|
var colorsTheme = (0, _useTheme["default"])();
|
|
85
|
-
|
|
86
62
|
var _useState = (0, _react.useState)(1),
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
63
|
+
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
|
|
64
|
+
page = _useState2[0],
|
|
65
|
+
changePage = _useState2[1];
|
|
91
66
|
var _useState3 = (0, _react.useState)(-1),
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
67
|
+
_useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
|
|
68
|
+
sortColumnIndex = _useState4[0],
|
|
69
|
+
changeSortColumnIndex = _useState4[1];
|
|
96
70
|
var _useState5 = (0, _react.useState)("ascending"),
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
71
|
+
_useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
|
|
72
|
+
sortOrder = _useState6[0],
|
|
73
|
+
changeSortOrder = _useState6[1];
|
|
101
74
|
var minItemsPerPageIndex = (0, _react.useMemo)(function () {
|
|
102
75
|
return getMinItemsPerPageIndex(page, itemsPerPage, page);
|
|
103
76
|
}, [itemsPerPage, page]);
|
|
@@ -110,17 +83,14 @@ var DxcResultsetTable = function DxcResultsetTable(_ref) {
|
|
|
110
83
|
var filteredResultset = (0, _react.useMemo)(function () {
|
|
111
84
|
return sortedResultset && sortedResultset.slice(minItemsPerPageIndex, maxItemsPerPageIndex + 1);
|
|
112
85
|
}, [sortedResultset, minItemsPerPageIndex, maxItemsPerPageIndex]);
|
|
113
|
-
|
|
114
86
|
var goToPage = function goToPage(newPage) {
|
|
115
87
|
changePage(newPage);
|
|
116
88
|
};
|
|
117
|
-
|
|
118
89
|
var changeSorting = function changeSorting(columnIndex) {
|
|
119
90
|
changePage(1);
|
|
120
91
|
changeSortColumnIndex(columnIndex);
|
|
121
92
|
changeSortOrder(sortColumnIndex === -1 || sortColumnIndex !== columnIndex ? "ascending" : sortOrder === "ascending" ? "descending" : "ascending");
|
|
122
93
|
};
|
|
123
|
-
|
|
124
94
|
(0, _react.useEffect)(function () {
|
|
125
95
|
rows.length > 0 ? changePage(1) : changePage(0);
|
|
126
96
|
}, [rows]);
|
|
@@ -160,11 +130,9 @@ var DxcResultsetTable = function DxcResultsetTable(_ref) {
|
|
|
160
130
|
tabIndex: tabIndex
|
|
161
131
|
})));
|
|
162
132
|
};
|
|
163
|
-
|
|
164
133
|
var calculateWidth = function calculateWidth(margin) {
|
|
165
134
|
return "calc(100% - ".concat((0, _utils.getMargin)(margin, "left"), " - ").concat((0, _utils.getMargin)(margin, "right"), ")");
|
|
166
135
|
};
|
|
167
|
-
|
|
168
136
|
var DxcResultsetTableContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n width: ", ";\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n"])), function (props) {
|
|
169
137
|
return calculateWidth(props.margin);
|
|
170
138
|
}, function (props) {
|
|
@@ -178,7 +146,6 @@ var DxcResultsetTableContainer = _styledComponents["default"].div(_templateObjec
|
|
|
178
146
|
}, function (props) {
|
|
179
147
|
return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
|
|
180
148
|
});
|
|
181
|
-
|
|
182
149
|
var HeaderContainer = _styledComponents["default"].span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n align-items: center;\n justify-content: ", ";\n gap: 8px;\n width: fit-content;\n border: 1px solid transparent;\n border-radius: 2px;\n padding: 3px;\n cursor: ", ";\n\n ", "\n"])), function (props) {
|
|
183
150
|
return props.theme.headerTextAlign === "center" ? "center" : props.theme.headerTextAlign === "right" ? "flex-end" : "flex-start";
|
|
184
151
|
}, function (props) {
|
|
@@ -186,10 +153,7 @@ var HeaderContainer = _styledComponents["default"].span(_templateObject2 || (_te
|
|
|
186
153
|
}, function (props) {
|
|
187
154
|
return props.isSortable && "&:focus {\n outline: #0095ff solid 2px;\n }";
|
|
188
155
|
});
|
|
189
|
-
|
|
190
156
|
var SortIcon = _styledComponents["default"].span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n height: 14px;\n width: 14px;\n color: ", ";\n\n svg {\n height: 100%;\n width: 100%;\n }\n"])), function (props) {
|
|
191
157
|
return props.theme.sortIconColor;
|
|
192
158
|
});
|
|
193
|
-
|
|
194
|
-
var _default = DxcResultsetTable;
|
|
195
|
-
exports["default"] = _default;
|
|
159
|
+
var _default = exports["default"] = DxcResultsetTable;
|
|
@@ -1,19 +1,14 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
4
|
+
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
|
|
5
|
+
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
|
|
5
6
|
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
|
6
|
-
|
|
7
7
|
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
|
8
|
-
|
|
9
8
|
var _react = _interopRequireDefault(require("react"));
|
|
10
|
-
|
|
11
9
|
var _react2 = require("@testing-library/react");
|
|
12
|
-
|
|
13
10
|
var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
|
|
14
|
-
|
|
15
11
|
var _ResultsetTable = _interopRequireDefault(require("./ResultsetTable.tsx"));
|
|
16
|
-
|
|
17
12
|
// Mocking DOMRect for Radix Primitive Popover
|
|
18
13
|
global.globalThis = global;
|
|
19
14
|
global.DOMRect = {
|
|
@@ -28,12 +23,10 @@ global.DOMRect = {
|
|
|
28
23
|
};
|
|
29
24
|
}
|
|
30
25
|
};
|
|
31
|
-
|
|
32
26
|
global.ResizeObserver = /*#__PURE__*/function () {
|
|
33
27
|
function ResizeObserver() {
|
|
34
28
|
(0, _classCallCheck2["default"])(this, ResizeObserver);
|
|
35
29
|
}
|
|
36
|
-
|
|
37
30
|
(0, _createClass2["default"])(ResizeObserver, [{
|
|
38
31
|
key: "observe",
|
|
39
32
|
value: function observe() {}
|
|
@@ -46,7 +39,6 @@ global.ResizeObserver = /*#__PURE__*/function () {
|
|
|
46
39
|
}]);
|
|
47
40
|
return ResizeObserver;
|
|
48
41
|
}();
|
|
49
|
-
|
|
50
42
|
var columns = [{
|
|
51
43
|
displayValue: "Id",
|
|
52
44
|
isSortable: false
|
|
@@ -181,92 +173,88 @@ var rows2 = [[{
|
|
|
181
173
|
describe("Resultset table component tests", function () {
|
|
182
174
|
test("Resultset table rendered correctly", function () {
|
|
183
175
|
var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"], {
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
176
|
+
columns: columns,
|
|
177
|
+
rows: rows,
|
|
178
|
+
itemsPerPage: 3
|
|
179
|
+
})),
|
|
180
|
+
getByText = _render.getByText;
|
|
190
181
|
expect(getByText("Peter")).toBeTruthy();
|
|
191
182
|
});
|
|
192
183
|
test("Resultset table shows as many rows as itemsPerPage", function () {
|
|
193
184
|
var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"], {
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
185
|
+
columns: columns,
|
|
186
|
+
rows: rows,
|
|
187
|
+
itemsPerPage: 3
|
|
188
|
+
})),
|
|
189
|
+
getAllByRole = _render2.getAllByRole;
|
|
200
190
|
expect(getAllByRole("row").length - 1).toEqual(3);
|
|
201
191
|
});
|
|
202
192
|
test("Resultset table shows rows on second page", function () {
|
|
203
193
|
var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"], {
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
194
|
+
columns: columns,
|
|
195
|
+
rows: rows,
|
|
196
|
+
itemsPerPage: 3
|
|
197
|
+
})),
|
|
198
|
+
getByText = _render3.getByText,
|
|
199
|
+
getAllByRole = _render3.getAllByRole;
|
|
211
200
|
expect(getByText("Peter")).toBeTruthy();
|
|
212
201
|
expect(getByText("Louis")).toBeTruthy();
|
|
213
202
|
expect(getByText("Lana")).toBeTruthy();
|
|
214
203
|
expect(getAllByRole("row").length - 1).toEqual(3);
|
|
215
204
|
var nextButton = getAllByRole("button")[3];
|
|
216
|
-
|
|
217
205
|
_react2.fireEvent.click(nextButton);
|
|
218
|
-
|
|
219
|
-
expect(getByText("4 to 6 of 10")).toBeTruthy();
|
|
220
|
-
expect(getByText("Rick")).toBeTruthy();
|
|
221
|
-
expect(getByText("Mark")).toBeTruthy();
|
|
222
|
-
expect(getByText("Cris")).toBeTruthy();
|
|
223
|
-
expect(getAllByRole("row").length - 1).toEqual(3);
|
|
224
|
-
});
|
|
225
|
-
test("Resultset table goToPage works as expected", function () {
|
|
226
|
-
window.HTMLElement.prototype.scrollIntoView = function () {};
|
|
227
|
-
|
|
228
|
-
window.HTMLElement.prototype.scrollTo = function () {};
|
|
229
|
-
|
|
230
|
-
var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"], {
|
|
231
|
-
columns: columns,
|
|
232
|
-
showGoToPage: true,
|
|
233
|
-
rows: rows,
|
|
234
|
-
itemsPerPage: 3
|
|
235
|
-
})),
|
|
236
|
-
getByText = _render4.getByText,
|
|
237
|
-
getAllByRole = _render4.getAllByRole;
|
|
238
|
-
|
|
239
|
-
expect(getByText("Peter")).toBeTruthy();
|
|
240
|
-
expect(getByText("Louis")).toBeTruthy();
|
|
241
|
-
expect(getByText("Lana")).toBeTruthy();
|
|
242
|
-
expect(getAllByRole("row").length - 1).toEqual(3);
|
|
243
|
-
var goToPageSelect = getAllByRole("button")[3];
|
|
244
|
-
|
|
245
|
-
_userEvent["default"].click(goToPageSelect);
|
|
246
|
-
|
|
247
|
-
var goToPageOption = getByText("2");
|
|
248
|
-
|
|
249
|
-
_userEvent["default"].click(goToPageOption);
|
|
250
|
-
|
|
251
206
|
expect(getByText("4 to 6 of 10")).toBeTruthy();
|
|
252
207
|
expect(getByText("Rick")).toBeTruthy();
|
|
253
208
|
expect(getByText("Mark")).toBeTruthy();
|
|
254
209
|
expect(getByText("Cris")).toBeTruthy();
|
|
255
210
|
expect(getAllByRole("row").length - 1).toEqual(3);
|
|
256
211
|
});
|
|
212
|
+
test("Resultset table goToPage works as expected", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
|
|
213
|
+
var _render4, getByText, getAllByRole, goToPageSelect, goToPageOption;
|
|
214
|
+
return _regenerator["default"].wrap(function _callee$(_context) {
|
|
215
|
+
while (1) switch (_context.prev = _context.next) {
|
|
216
|
+
case 0:
|
|
217
|
+
window.HTMLElement.prototype.scrollIntoView = function () {};
|
|
218
|
+
window.HTMLElement.prototype.scrollTo = function () {};
|
|
219
|
+
_render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"], {
|
|
220
|
+
columns: columns,
|
|
221
|
+
showGoToPage: true,
|
|
222
|
+
rows: rows,
|
|
223
|
+
itemsPerPage: 3
|
|
224
|
+
})), getByText = _render4.getByText, getAllByRole = _render4.getAllByRole;
|
|
225
|
+
expect(getByText("Peter")).toBeTruthy();
|
|
226
|
+
expect(getByText("Louis")).toBeTruthy();
|
|
227
|
+
expect(getByText("Lana")).toBeTruthy();
|
|
228
|
+
expect(getAllByRole("row").length - 1).toEqual(3);
|
|
229
|
+
goToPageSelect = getAllByRole("button")[3];
|
|
230
|
+
_context.next = 10;
|
|
231
|
+
return _userEvent["default"].click(goToPageSelect);
|
|
232
|
+
case 10:
|
|
233
|
+
goToPageOption = getByText("2");
|
|
234
|
+
_context.next = 13;
|
|
235
|
+
return _userEvent["default"].click(goToPageOption);
|
|
236
|
+
case 13:
|
|
237
|
+
expect(getByText("4 to 6 of 10")).toBeTruthy();
|
|
238
|
+
expect(getByText("Rick")).toBeTruthy();
|
|
239
|
+
expect(getByText("Mark")).toBeTruthy();
|
|
240
|
+
expect(getByText("Cris")).toBeTruthy();
|
|
241
|
+
expect(getAllByRole("row").length - 1).toEqual(3);
|
|
242
|
+
case 18:
|
|
243
|
+
case "end":
|
|
244
|
+
return _context.stop();
|
|
245
|
+
}
|
|
246
|
+
}, _callee);
|
|
247
|
+
})));
|
|
257
248
|
test("Resultset table going to the last page shows only one row", function () {
|
|
258
249
|
var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"], {
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
250
|
+
columns: columns,
|
|
251
|
+
rows: rows,
|
|
252
|
+
itemsPerPage: 3
|
|
253
|
+
})),
|
|
254
|
+
getByText = _render5.getByText,
|
|
255
|
+
getAllByRole = _render5.getAllByRole;
|
|
266
256
|
var lastButton = getAllByRole("button")[4];
|
|
267
|
-
|
|
268
257
|
_react2.fireEvent.click(lastButton);
|
|
269
|
-
|
|
270
258
|
expect(getByText("10 to 10 of 10")).toBeTruthy();
|
|
271
259
|
expect(getAllByRole("row")).toHaveLength(2);
|
|
272
260
|
expect(getByText("Cosmin")).toBeTruthy();
|
|
@@ -278,26 +266,21 @@ describe("Resultset table component tests", function () {
|
|
|
278
266
|
itemsPerPage: 3
|
|
279
267
|
}));
|
|
280
268
|
expect(component.queryByText("Peter")).toBeTruthy();
|
|
281
|
-
|
|
282
269
|
_react2.fireEvent.click(component.queryByText("Name"));
|
|
283
|
-
|
|
284
270
|
expect(component.queryByText("Tina")).not.toBeTruthy();
|
|
285
271
|
expect(component.queryByText("Cosmin")).toBeTruthy();
|
|
286
|
-
|
|
287
272
|
_react2.fireEvent.click(component.queryByText("Name"));
|
|
288
|
-
|
|
289
273
|
expect(component.queryByText("Tina")).toBeTruthy();
|
|
290
274
|
expect(component.queryByText("Cosmin")).not.toBeTruthy();
|
|
291
275
|
});
|
|
292
276
|
test("Resultset table change rows should go to first page", function () {
|
|
293
277
|
var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"], {
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
278
|
+
columns: columns,
|
|
279
|
+
rows: rows,
|
|
280
|
+
itemsPerPage: 3
|
|
281
|
+
})),
|
|
282
|
+
queryByText = _render6.queryByText,
|
|
283
|
+
rerender = _render6.rerender;
|
|
301
284
|
expect(queryByText("Peter")).toBeTruthy();
|
|
302
285
|
rerender( /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"], {
|
|
303
286
|
columns: columns,
|
|
@@ -308,18 +291,15 @@ describe("Resultset table component tests", function () {
|
|
|
308
291
|
});
|
|
309
292
|
test("Resultset table change itemsPerPage should go to first page", function () {
|
|
310
293
|
var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"], {
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
294
|
+
columns: columns,
|
|
295
|
+
rows: rows,
|
|
296
|
+
itemsPerPage: 3,
|
|
297
|
+
itemsPerPageOptions: [2, 3]
|
|
298
|
+
})),
|
|
299
|
+
getAllByRole = _render7.getAllByRole;
|
|
318
300
|
var lastButton = getAllByRole("button")[4];
|
|
319
301
|
expect(getAllByRole("row").length - 1).toEqual(3);
|
|
320
|
-
|
|
321
302
|
_react2.fireEvent.click(lastButton);
|
|
322
|
-
|
|
323
303
|
expect(getAllByRole("row").length - 1).toEqual(1);
|
|
324
304
|
});
|
|
325
305
|
});
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
|
|
3
|
-
|
|
2
|
+
type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
|
|
3
|
+
type Margin = {
|
|
4
4
|
top?: Space;
|
|
5
5
|
bottom?: Space;
|
|
6
6
|
left?: Space;
|
|
7
7
|
right?: Space;
|
|
8
8
|
};
|
|
9
|
-
export
|
|
9
|
+
export type Column = {
|
|
10
10
|
/**
|
|
11
11
|
* Column display value.
|
|
12
12
|
*/
|
|
@@ -16,7 +16,7 @@ export declare type Column = {
|
|
|
16
16
|
*/
|
|
17
17
|
isSortable?: boolean;
|
|
18
18
|
};
|
|
19
|
-
|
|
19
|
+
type Row = {
|
|
20
20
|
/**
|
|
21
21
|
* Value to be displayed in the cell.
|
|
22
22
|
*/
|
|
@@ -27,7 +27,7 @@ declare type Row = {
|
|
|
27
27
|
*/
|
|
28
28
|
sortValue?: string;
|
|
29
29
|
};
|
|
30
|
-
|
|
30
|
+
type Props = {
|
|
31
31
|
/**
|
|
32
32
|
* An array of objects representing the columns of the table.
|
|
33
33
|
*/
|
|
@@ -53,14 +53,14 @@ declare type Props = {
|
|
|
53
53
|
* This function will be called when the user selects an item per page
|
|
54
54
|
* option. The value selected will be passed as a parameter.
|
|
55
55
|
*/
|
|
56
|
-
itemsPerPageFunction?: (
|
|
56
|
+
itemsPerPageFunction?: (value: number) => void;
|
|
57
57
|
/**
|
|
58
58
|
* Size of the margin to be applied to the component. You can pass an object with 'top',
|
|
59
59
|
* 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
|
|
60
60
|
*/
|
|
61
61
|
margin?: Space | Margin;
|
|
62
62
|
/**
|
|
63
|
-
* Value of the tabindex attribute
|
|
63
|
+
* Value of the tabindex attribute applied to the sortable icon.
|
|
64
64
|
*/
|
|
65
65
|
tabIndex?: number;
|
|
66
66
|
};
|
package/select/Icons.d.ts
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
|
|
1
|
+
import React from "react";
|
|
2
2
|
declare const selectIcons: {
|
|
3
|
-
error: JSX.Element;
|
|
4
|
-
arrowUp: JSX.Element;
|
|
5
|
-
arrowDown: JSX.Element;
|
|
6
|
-
clear: JSX.Element;
|
|
7
|
-
selected: JSX.Element;
|
|
8
|
-
searchOff: JSX.Element;
|
|
3
|
+
error: React.JSX.Element;
|
|
4
|
+
arrowUp: React.JSX.Element;
|
|
5
|
+
arrowDown: React.JSX.Element;
|
|
6
|
+
clear: React.JSX.Element;
|
|
7
|
+
selected: React.JSX.Element;
|
|
8
|
+
searchOff: React.JSX.Element;
|
|
9
9
|
};
|
|
10
10
|
export default selectIcons;
|
package/select/Icons.js
CHANGED
|
@@ -1,14 +1,11 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
|
6
5
|
value: true
|
|
7
6
|
});
|
|
8
7
|
exports["default"] = void 0;
|
|
9
|
-
|
|
10
8
|
var _react = _interopRequireDefault(require("react"));
|
|
11
|
-
|
|
12
9
|
var selectIcons = {
|
|
13
10
|
error: /*#__PURE__*/_react["default"].createElement("svg", {
|
|
14
11
|
role: "img",
|
|
@@ -89,5 +86,4 @@ var selectIcons = {
|
|
|
89
86
|
points: "6.47,10.82 4,13.29 1.53,10.82 0.82,11.53 3.29,14 0.82,16.47 1.53,17.18 4,14.71 6.47,17.18 7.18,16.47 4.71,14 7.18,11.53"
|
|
90
87
|
}))))
|
|
91
88
|
};
|
|
92
|
-
var _default = selectIcons;
|
|
93
|
-
exports["default"] = _default;
|
|
89
|
+
var _default = exports["default"] = selectIcons;
|