@carbon/ibm-products 1.69.0 → 1.71.0
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +8 -4
- package/css/index-full-carbon.css +17 -12
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +4 -4
- package/css/index-full-carbon.min.css.map +1 -1
- package/css/index-without-carbon-released-only.css +16 -12
- package/css/index-without-carbon-released-only.css.map +1 -1
- package/css/index-without-carbon-released-only.min.css +3 -3
- package/css/index-without-carbon-released-only.min.css.map +1 -1
- package/css/index-without-carbon.css +17 -12
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +4 -4
- package/css/index-without-carbon.min.css.map +1 -1
- package/css/index.css +17 -12
- package/css/index.css.map +1 -1
- package/css/index.min.css +4 -4
- package/css/index.min.css.map +1 -1
- package/es/components/ButtonMenu/ButtonMenu.js +11 -1
- package/es/components/CreateTearsheet/preview-components/MultiStepWithIntro.js +6 -3
- package/es/components/Datagrid/Datagrid/DatagridContent.js +9 -8
- package/es/components/Datagrid/Datagrid/DatagridHeaderRow.js +6 -1
- package/es/components/Datagrid/Datagrid/DatagridRow.js +6 -1
- package/es/components/Datagrid/Datagrid/DatagridSelectAll.js +9 -4
- package/es/components/Datagrid/Datagrid/DatagridToolbar.js +11 -4
- package/es/components/Datagrid/Datagrid/DraggableElement.js +1 -1
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +4 -1
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsTearsheet.js +1 -1
- package/es/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +18 -6
- package/es/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +21 -11
- package/es/components/Datagrid/Datagrid/addons/Filtering/FilterProvider.js +34 -10
- package/es/components/Datagrid/Datagrid/addons/Filtering/constants.js +6 -2
- package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilterContext.js +7 -0
- package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +42 -11
- package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useShouldDisableButtons.js +3 -3
- package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useSubscribeToEventEmitter.js +1 -0
- package/es/components/Datagrid/Datagrid/addons/Filtering/index.js +1 -0
- package/es/components/Datagrid/Datagrid/addons/Filtering/utils.js +2 -6
- package/es/components/Datagrid/Datagrid/addons/stateReducer.js +4 -7
- package/es/components/Datagrid/useActionsColumn.js +18 -14
- package/es/components/Datagrid/useFiltering.js +3 -6
- package/es/components/Datagrid/useInfiniteScroll.js +7 -3
- package/es/components/Datagrid/useNestedRowExpander.js +2 -2
- package/es/components/Datagrid/useRowIsMouseOver.js +3 -1
- package/es/components/Datagrid/useSelectAllToggle.js +11 -10
- package/es/components/Datagrid/useSelectRows.js +2 -2
- package/es/components/Datagrid/utils/filterPropsForTesting.js +150 -0
- package/es/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js +9 -3
- package/es/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.js +8 -3
- package/es/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js +8 -3
- package/es/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js +8 -3
- package/es/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js +8 -3
- package/es/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js +8 -3
- package/es/components/EmptyStates/assets/ErrorIllustration.js +6 -6
- package/es/components/EmptyStates/assets/NoDataIllustration.js +6 -6
- package/es/components/EmptyStates/assets/NoTagsIllustration.js +6 -6
- package/es/components/EmptyStates/assets/NotFoundIllustration.js +6 -6
- package/es/components/EmptyStates/assets/NotificationsIllustration.js +6 -6
- package/es/components/EmptyStates/assets/UnauthorizedIllustration.js +6 -6
- package/es/components/FilterSummary/FilterSummary.js +19 -15
- package/es/components/InterstitialScreen/InterstitialScreen.js +8 -7
- package/es/components/Tearsheet/TearsheetShell.js +6 -4
- package/es/global/js/hooks/index.js +3 -2
- package/es/global/js/hooks/useFocus.js +72 -0
- package/es/global/js/hooks/useIsomorphicEffect.js +12 -0
- package/es/global/js/package-settings.js +0 -1
- package/lib/components/ButtonMenu/ButtonMenu.js +11 -1
- package/lib/components/CreateTearsheet/preview-components/MultiStepWithIntro.js +6 -3
- package/lib/components/Datagrid/Datagrid/DatagridContent.js +9 -8
- package/lib/components/Datagrid/Datagrid/DatagridHeaderRow.js +6 -1
- package/lib/components/Datagrid/Datagrid/DatagridRow.js +6 -1
- package/lib/components/Datagrid/Datagrid/DatagridSelectAll.js +8 -3
- package/lib/components/Datagrid/Datagrid/DatagridToolbar.js +11 -4
- package/lib/components/Datagrid/Datagrid/DraggableElement.js +1 -1
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +4 -1
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsTearsheet.js +1 -1
- package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +18 -6
- package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +21 -11
- package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterProvider.js +30 -7
- package/lib/components/Datagrid/Datagrid/addons/Filtering/constants.js +8 -3
- package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilterContext.js +7 -0
- package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +34 -3
- package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useShouldDisableButtons.js +3 -3
- package/lib/components/Datagrid/Datagrid/addons/Filtering/utils.js +2 -6
- package/lib/components/Datagrid/Datagrid/addons/stateReducer.js +4 -7
- package/lib/components/Datagrid/useActionsColumn.js +17 -13
- package/lib/components/Datagrid/useFiltering.js +1 -4
- package/lib/components/Datagrid/useInfiniteScroll.js +7 -3
- package/lib/components/Datagrid/useNestedRowExpander.js +1 -1
- package/lib/components/Datagrid/useRowIsMouseOver.js +3 -1
- package/lib/components/Datagrid/useSelectAllToggle.js +9 -9
- package/lib/components/Datagrid/useSelectRows.js +1 -1
- package/lib/components/Datagrid/utils/filterPropsForTesting.js +159 -0
- package/lib/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js +9 -3
- package/lib/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.js +8 -3
- package/lib/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js +8 -3
- package/lib/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js +8 -3
- package/lib/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js +8 -3
- package/lib/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js +8 -3
- package/lib/components/EmptyStates/assets/ErrorIllustration.js +6 -6
- package/lib/components/EmptyStates/assets/NoDataIllustration.js +6 -6
- package/lib/components/EmptyStates/assets/NoTagsIllustration.js +6 -6
- package/lib/components/EmptyStates/assets/NotFoundIllustration.js +6 -6
- package/lib/components/EmptyStates/assets/NotificationsIllustration.js +6 -6
- package/lib/components/EmptyStates/assets/UnauthorizedIllustration.js +6 -6
- package/lib/components/FilterSummary/FilterSummary.js +18 -14
- package/lib/components/InterstitialScreen/InterstitialScreen.js +8 -6
- package/lib/components/Tearsheet/TearsheetShell.js +6 -4
- package/lib/global/js/hooks/index.js +8 -1
- package/lib/global/js/hooks/useFocus.js +79 -0
- package/lib/global/js/hooks/useIsomorphicEffect.js +18 -0
- package/lib/global/js/package-settings.js +0 -1
- package/package.json +6 -5
- package/scss/components/Datagrid/_datagrid.scss +9 -1
- package/scss/components/Datagrid/styles/_datagrid.scss +10 -4
- package/scss/components/Datagrid/styles/addons/_FilterPanel.scss +6 -7
- package/scss/components/InterstitialScreen/_interstitial-screen.scss +1 -0
- package/scss/components/SidePanel/_side-panel.scss +5 -1
- package/telemetry.yml +816 -0
@@ -1,6 +1,6 @@
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
2
2
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
3
|
-
var _excluded = ["children", "className", "iconDescription", "kind", "label", "menuOptionsClass", "renderIcon", "size"];
|
3
|
+
var _excluded = ["children", "className", "iconDescription", "kind", "label", "menuAriaLabel", "menuOptionsClass", "renderIcon", "size"];
|
4
4
|
/**
|
5
5
|
* Copyright IBM Corp. 2021, 2021
|
6
6
|
*
|
@@ -18,6 +18,7 @@ import { pkg, carbon } from '../../settings';
|
|
18
18
|
|
19
19
|
// Carbon and package components we use.
|
20
20
|
import { Button, OverflowMenu } from 'carbon-components-react';
|
21
|
+
import { getNodeTextContent } from '../../global/js/utils/getNodeTextContent';
|
21
22
|
|
22
23
|
// The block part of our conventional BEM class names (blockClass__E--M).
|
23
24
|
var blockClass = "".concat(pkg.prefix, "--button-menu");
|
@@ -39,12 +40,14 @@ var defaults = {
|
|
39
40
|
* OverflowMenuItem component.
|
40
41
|
*/
|
41
42
|
export var ButtonMenu = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
43
|
+
var _ref2;
|
42
44
|
var children = _ref.children,
|
43
45
|
className = _ref.className,
|
44
46
|
iconDescription = _ref.iconDescription,
|
45
47
|
_ref$kind = _ref.kind,
|
46
48
|
kind = _ref$kind === void 0 ? defaults.kind : _ref$kind,
|
47
49
|
label = _ref.label,
|
50
|
+
menuAriaLabel = _ref.menuAriaLabel,
|
48
51
|
menuOptionsClass = _ref.menuOptionsClass,
|
49
52
|
Icon = _ref.renderIcon,
|
50
53
|
_ref$size = _ref.size,
|
@@ -59,6 +62,7 @@ export var ButtonMenu = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
59
62
|
|
60
63
|
menuOptionsClass: cx("".concat(blockClass, "__options"), menuOptionsClass),
|
61
64
|
size: size,
|
65
|
+
ariaLabel: (_ref2 = menuAriaLabel !== null && menuAriaLabel !== void 0 ? menuAriaLabel : getNodeTextContent(label)) !== null && _ref2 !== void 0 ? _ref2 : undefined,
|
62
66
|
renderIcon: function renderIcon() {
|
63
67
|
return /*#__PURE__*/React.createElement("div", {
|
64
68
|
className: cx(["".concat(blockClass, "__trigger"), "".concat(carbon.prefix, "--btn"), "".concat(carbon.prefix, "--btn--").concat(kind), "".concat(carbon.prefix, "--btn--").concat(buttonSize)])
|
@@ -105,6 +109,12 @@ ButtonMenu.propTypes = {
|
|
105
109
|
* The button label for the menu trigger.
|
106
110
|
*/
|
107
111
|
label: PropTypes.node,
|
112
|
+
/**
|
113
|
+
* Provide the menuAriaLabel prop to be passed to the ButtonMenu component.
|
114
|
+
* This optional label should contain or match the visible labels or
|
115
|
+
* it will automatically take button label
|
116
|
+
*/
|
117
|
+
menuAriaLabel: PropTypes.string,
|
108
118
|
/**
|
109
119
|
* class name applied to the overflow options
|
110
120
|
*/
|
@@ -119,7 +119,8 @@ export var MultiStepWithIntro = function MultiStepWithIntro(_ref) {
|
|
119
119
|
}, /*#__PURE__*/React.createElement(RadioTile, {
|
120
120
|
className: "".concat(pkg.prefix, "--tearsheet-create-multi-step--custom-tile"),
|
121
121
|
value: "standard",
|
122
|
-
id: "tile-1"
|
122
|
+
id: "tile-1",
|
123
|
+
tabIndex: selectedCategory === 'standard' ? 0 : -1
|
123
124
|
}, /*#__PURE__*/React.createElement(NoDataIllustration, {
|
124
125
|
size: "lg"
|
125
126
|
}), /*#__PURE__*/React.createElement("span", {
|
@@ -127,7 +128,8 @@ export var MultiStepWithIntro = function MultiStepWithIntro(_ref) {
|
|
127
128
|
}, "Standard")), /*#__PURE__*/React.createElement(RadioTile, {
|
128
129
|
className: "".concat(pkg.prefix, "--tearsheet-create-multi-step--custom-tile"),
|
129
130
|
value: "premium",
|
130
|
-
id: "tile-2"
|
131
|
+
id: "tile-2",
|
132
|
+
tabIndex: selectedCategory === 'premium' ? 0 : -1
|
131
133
|
}, /*#__PURE__*/React.createElement(NoDataIllustration, {
|
132
134
|
size: "lg"
|
133
135
|
}), /*#__PURE__*/React.createElement("span", {
|
@@ -135,7 +137,8 @@ export var MultiStepWithIntro = function MultiStepWithIntro(_ref) {
|
|
135
137
|
}, "Premium")), /*#__PURE__*/React.createElement(RadioTile, {
|
136
138
|
className: "".concat(pkg.prefix, "--tearsheet-create-multi-step--custom-tile"),
|
137
139
|
value: "plus",
|
138
|
-
id: "tile-3"
|
140
|
+
id: "tile-3",
|
141
|
+
tabIndex: selectedCategory === 'plus' ? 0 : -1
|
139
142
|
}, /*#__PURE__*/React.createElement(NoDataIllustration, {
|
140
143
|
size: "lg"
|
141
144
|
}), /*#__PURE__*/React.createElement("span", {
|
@@ -88,7 +88,7 @@ export var DatagridContent = function DatagridContent(_ref) {
|
|
88
88
|
});
|
89
89
|
var renderTable = function renderTable() {
|
90
90
|
var _getTableProps;
|
91
|
-
return /*#__PURE__*/React.createElement(Table, _extends({}, getTableProps(), {
|
91
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Table, _extends({}, getTableProps(), {
|
92
92
|
className: cx(withVirtualScroll ? '' : "".concat(blockClass, "__table-simple"), "".concat(blockClass, "__vertical-align-").concat(verticalAlign), _defineProperty({}, "".concat(blockClass, "__variable-row-height"), variableRowHeight), _defineProperty({}, "".concat(blockClass, "__table-with-inline-edit"), withInlineEdit), _defineProperty({}, "".concat(blockClass, "__table-grid-active"), gridActive), _defineProperty({}, "".concat(blockClass, "__table-is-resizing"), typeof columnResizing.isResizingColumn === 'string'), (_getTableProps = getTableProps()) === null || _getTableProps === void 0 ? void 0 : _getTableProps.className),
|
93
93
|
role: withInlineEdit && 'grid',
|
94
94
|
tabIndex: withInlineEdit && 0,
|
@@ -109,7 +109,7 @@ export var DatagridContent = function DatagridContent(_ref) {
|
|
109
109
|
title: title
|
110
110
|
}), !withVirtualScroll && /*#__PURE__*/React.createElement(DatagridHead, datagridState), /*#__PURE__*/React.createElement(DatagridBody, _extends({}, datagridState, {
|
111
111
|
rows: contentRows
|
112
|
-
})));
|
112
|
+
}))), (filterProps === null || filterProps === void 0 ? void 0 : filterProps.variation) === 'panel' && renderPagination());
|
113
113
|
};
|
114
114
|
var _useMultipleKeyTracki = useMultipleKeyTracking({
|
115
115
|
ref: withInlineEdit ? multiKeyTrackingRef : null,
|
@@ -134,8 +134,6 @@ export var DatagridContent = function DatagridContent(_ref) {
|
|
134
134
|
useSubscribeToEventEmitter(CLEAR_SINGLE_FILTER, function (id) {
|
135
135
|
return clearSingleFilter(id, setAllFilters, state);
|
136
136
|
});
|
137
|
-
|
138
|
-
/* istanbul ignore next */
|
139
137
|
var renderFilterSummary = function renderFilterSummary() {
|
140
138
|
return state.filters.length > 0 && /*#__PURE__*/React.createElement(FilterSummary, {
|
141
139
|
className: "".concat(blockClass, "__filter-summary"),
|
@@ -147,6 +145,11 @@ export var DatagridContent = function DatagridContent(_ref) {
|
|
147
145
|
overflowType: "tag"
|
148
146
|
});
|
149
147
|
};
|
148
|
+
var renderPagination = function renderPagination() {
|
149
|
+
if ((contentRows === null || contentRows === void 0 ? void 0 : contentRows.length) > 0 && !isFetching && DatagridPagination) {
|
150
|
+
return /*#__PURE__*/React.createElement(DatagridPagination, datagridState);
|
151
|
+
}
|
152
|
+
};
|
150
153
|
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TableContainer, {
|
151
154
|
className: cx("".concat(blockClass, "__grid-container"), withVirtualScroll || fullHeightDatagrid ? "".concat(blockClass, "__full-height") : '', DatagridPagination ? "".concat(blockClass, "__with-pagination") : '', useDenseHeader ? "".concat(blockClass, "__dense-header") : '', (_cx5 = {}, _defineProperty(_cx5, "".concat(blockClass, "__grid-container-grid-active"), gridActive), _defineProperty(_cx5, "".concat(blockClass, "__grid-container-inline-edit"), withInlineEdit), _defineProperty(_cx5, "".concat(blockClass, "__grid-container-grid-active--without-toolbar"), withInlineEdit && !DatagridActions), _cx5)),
|
152
155
|
title: gridTitle,
|
@@ -154,9 +157,7 @@ export var DatagridContent = function DatagridContent(_ref) {
|
|
154
157
|
}, /*#__PURE__*/React.createElement(DatagridToolbar, datagridState), /*#__PURE__*/React.createElement("div", {
|
155
158
|
className: cx("".concat(blockClass, "__table-container"), _defineProperty({}, "".concat(blockClass, "__table-container--filter-open"), panelOpen)),
|
156
159
|
ref: gridAreaRef
|
157
|
-
}, (filterProps === null || filterProps === void 0 ? void 0 : filterProps.variation) === 'panel' && /*#__PURE__*/React.createElement(FilterPanel, _extends({
|
158
|
-
updateMethod: "batch"
|
159
|
-
}, getFilterFlyoutProps(), {
|
160
|
+
}, (filterProps === null || filterProps === void 0 ? void 0 : filterProps.variation) === 'panel' && /*#__PURE__*/React.createElement(FilterPanel, _extends({}, getFilterFlyoutProps(), {
|
160
161
|
title: filterProps.panelTitle,
|
161
162
|
filterSections: filterProps.sections,
|
162
163
|
isFetching: isFetching
|
@@ -167,7 +168,7 @@ export var DatagridContent = function DatagridContent(_ref) {
|
|
167
168
|
}, renderTable()) : withVirtualScroll ? /*#__PURE__*/React.createElement("div", {
|
168
169
|
className: "".concat(blockClass, "__virtualScrollContainer"),
|
169
170
|
ref: gridRef
|
170
|
-
}, renderTable()) : renderTable()))), (
|
171
|
+
}, renderTable()) : renderTable()))), (filterProps === null || filterProps === void 0 ? void 0 : filterProps.variation) !== 'panel' && renderPagination(), CustomizeColumnsTearsheet && /*#__PURE__*/React.createElement(CustomizeColumnsTearsheet, {
|
171
172
|
instance: datagridState
|
172
173
|
}));
|
173
174
|
};
|
@@ -30,7 +30,8 @@ var getAccessibilityProps = function getAccessibilityProps(header) {
|
|
30
30
|
return props;
|
31
31
|
};
|
32
32
|
var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
|
33
|
-
var resizerAriaLabel = datagridState.resizerAriaLabel
|
33
|
+
var resizerAriaLabel = datagridState.resizerAriaLabel,
|
34
|
+
isFetching = datagridState.isFetching;
|
34
35
|
// Used to measure the height of the table and uses that value
|
35
36
|
// to display a vertical line to indicate the column you are resizing
|
36
37
|
useEffect(function () {
|
@@ -103,9 +104,13 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
|
|
103
104
|
key: header.id,
|
104
105
|
"aria-hidden": header.id === 'spacer' && 'true'
|
105
106
|
}, getAccessibilityProps(header)), header.render('Header'), header.getResizerProps && !header.isAction && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("input", _extends({}, header.getResizerProps(), {
|
107
|
+
disabled: isFetching,
|
106
108
|
onMouseDown: function onMouseDown(event) {
|
107
109
|
return handleOnMouseDownResize(event, header.getResizerProps);
|
108
110
|
},
|
111
|
+
onMouseUp: function onMouseUp() {
|
112
|
+
return handleColumnResizeEndEvent(dispatch, onColResizeEnd, header.id, true);
|
113
|
+
},
|
109
114
|
onKeyDown: function onKeyDown(event) {
|
110
115
|
var key = event.key;
|
111
116
|
if (key === 'ArrowLeft' || key === 'ArrowRight') {
|
@@ -37,7 +37,9 @@ var DatagridRow = function DatagridRow(datagridState) {
|
|
37
37
|
prepareRow = datagridState.prepareRow,
|
38
38
|
key = datagridState.key,
|
39
39
|
tableId = datagridState.tableId,
|
40
|
-
withExpandedRows = datagridState.withExpandedRows
|
40
|
+
withExpandedRows = datagridState.withExpandedRows,
|
41
|
+
withMouseHover = datagridState.withMouseHover,
|
42
|
+
setMouseOverRowIndex = datagridState.setMouseOverRowIndex;
|
41
43
|
var getVisibleNestedRowCount = function getVisibleNestedRowCount(_ref) {
|
42
44
|
var isExpanded = _ref.isExpanded,
|
43
45
|
subRows = _ref.subRows;
|
@@ -82,6 +84,9 @@ var DatagridRow = function DatagridRow(datagridState) {
|
|
82
84
|
return null;
|
83
85
|
};
|
84
86
|
var handleMouseLeave = function handleMouseLeave(event) {
|
87
|
+
if (withMouseHover) {
|
88
|
+
setMouseOverRowIndex(null);
|
89
|
+
}
|
85
90
|
var hoverRow = event.target.closest(".".concat(blockClass, "__carbon-row-expanded"));
|
86
91
|
hoverRow === null || hoverRow === void 0 ? void 0 : hoverRow.classList.remove("".concat(blockClass, "__carbon-row-expanded-hover-active"));
|
87
92
|
};
|
@@ -4,7 +4,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
4
4
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
5
5
|
var _excluded = ["onChange"];
|
6
6
|
/**
|
7
|
-
* Copyright IBM Corp. 2020,
|
7
|
+
* Copyright IBM Corp. 2020, 2024
|
8
8
|
*
|
9
9
|
* This source code is licensed under the Apache-2.0 license found in the
|
10
10
|
* LICENSE file in the root directory of this source tree.
|
@@ -18,7 +18,7 @@ import { handleSelectAllRowData } from './addons/stateReducer';
|
|
18
18
|
var blockClass = "".concat(pkg.prefix, "--datagrid");
|
19
19
|
var SelectAll = function SelectAll(datagridState) {
|
20
20
|
var _columns$;
|
21
|
-
var _useState = useState(window.innerWidth),
|
21
|
+
var _useState = useState(typeof window !== 'undefined' ? window.innerWidth : ''),
|
22
22
|
_useState2 = _slicedToArray(_useState, 2),
|
23
23
|
windowSize = _useState2[0],
|
24
24
|
setWindowSize = _useState2[1];
|
@@ -27,7 +27,9 @@ var SelectAll = function SelectAll(datagridState) {
|
|
27
27
|
function updateSize() {
|
28
28
|
setWindowSize(window.innerWidth);
|
29
29
|
}
|
30
|
-
window
|
30
|
+
if (typeof window !== 'undefined') {
|
31
|
+
window.addEventListener('resize', updateSize);
|
32
|
+
}
|
31
33
|
return function () {
|
32
34
|
return window.removeEventListener('resize', updateSize);
|
33
35
|
};
|
@@ -44,7 +46,8 @@ var SelectAll = function SelectAll(datagridState) {
|
|
44
46
|
dispatch = datagridState.dispatch,
|
45
47
|
rows = datagridState.rows,
|
46
48
|
getRowId = datagridState.getRowId,
|
47
|
-
toggleAllRowsSelected = datagridState.toggleAllRowsSelected
|
49
|
+
toggleAllRowsSelected = datagridState.toggleAllRowsSelected,
|
50
|
+
onAllRowSelect = datagridState.onAllRowSelect;
|
48
51
|
var isFirstColumnStickyLeft = ((_columns$ = columns[0]) === null || _columns$ === void 0 ? void 0 : _columns$.sticky) === 'left' && withStickyColumn;
|
49
52
|
if (hideSelectAll || radio) {
|
50
53
|
return /*#__PURE__*/React.createElement("div", {
|
@@ -66,6 +69,7 @@ var SelectAll = function SelectAll(datagridState) {
|
|
66
69
|
indeterminate: true
|
67
70
|
});
|
68
71
|
toggleAllRowsSelected(false);
|
72
|
+
onAllRowSelect === null || onAllRowSelect === void 0 ? void 0 : onAllRowSelect(rows, event);
|
69
73
|
return onChange === null || onChange === void 0 ? void 0 : onChange({
|
70
74
|
target: {
|
71
75
|
checked: false
|
@@ -78,6 +82,7 @@ var SelectAll = function SelectAll(datagridState) {
|
|
78
82
|
getRowId: getRowId,
|
79
83
|
isChecked: event.target.checked
|
80
84
|
});
|
85
|
+
onAllRowSelect === null || onAllRowSelect === void 0 ? void 0 : onAllRowSelect(rows, event);
|
81
86
|
return onChange === null || onChange === void 0 ? void 0 : onChange(event);
|
82
87
|
};
|
83
88
|
return /*#__PURE__*/React.createElement("div", {
|
@@ -99,6 +99,16 @@ var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridS
|
|
99
99
|
}
|
100
100
|
}));
|
101
101
|
};
|
102
|
+
var onCancelHandler = function onCancelHandler() {
|
103
|
+
handleSelectAllRowData({
|
104
|
+
dispatch: dispatch,
|
105
|
+
rows: [],
|
106
|
+
getRowId: getRowId,
|
107
|
+
isChecked: false
|
108
|
+
});
|
109
|
+
toggleAllRowsSelected(false);
|
110
|
+
setGlobalFilter(null);
|
111
|
+
};
|
102
112
|
|
103
113
|
// Only display the first two batch actions, the rest are
|
104
114
|
// displayed inside of the ButtonMenu if there are more than
|
@@ -106,10 +116,7 @@ var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridS
|
|
106
116
|
return /*#__PURE__*/React.createElement(TableBatchActions, {
|
107
117
|
shouldShowBatchActions: totalSelected > 0,
|
108
118
|
totalSelected: totalSelected,
|
109
|
-
onCancel:
|
110
|
-
toggleAllRowsSelected(false);
|
111
|
-
setGlobalFilter(null);
|
112
|
-
},
|
119
|
+
onCancel: onCancelHandler,
|
113
120
|
translateWithId: translateWithIdBatchActions
|
114
121
|
}, !displayAllInMenu && toolbarBatchActions && (toolbarBatchActions === null || toolbarBatchActions === void 0 ? void 0 : toolbarBatchActions.map(function (batchAction, index) {
|
115
122
|
if (index < 2 && toolbarBatchActions.length > 3 || index < 3 && toolbarBatchActions.length <= 3) {
|
@@ -40,7 +40,7 @@ var DraggableElement = function DraggableElement(_ref) {
|
|
40
40
|
}, "".concat(blockClass, "__draggable-handleStyle"))
|
41
41
|
}, isSticky ? /*#__PURE__*/React.createElement(Locked16, null) : /*#__PURE__*/React.createElement(Draggable16, null)), children);
|
42
42
|
var style = {
|
43
|
-
transform: CSS.Transform.toString(transform),
|
43
|
+
transform: !disabled ? CSS.Transform.toString(transform) : {},
|
44
44
|
transition: transition
|
45
45
|
};
|
46
46
|
return /*#__PURE__*/React.createElement("li", _extends({
|
@@ -38,6 +38,9 @@ var Columns = function Columns(_ref) {
|
|
38
38
|
$splice: [[from, 1], [to, 0, fromCol]]
|
39
39
|
}));
|
40
40
|
}, [columns, setColumnsObject]);
|
41
|
+
var filteredStickyColumn = columns === null || columns === void 0 ? void 0 : columns.filter(function (item) {
|
42
|
+
return !item.sticky;
|
43
|
+
});
|
41
44
|
return /*#__PURE__*/React.createElement("div", {
|
42
45
|
className: "".concat(blockClass, "__customize-columns-column-list"),
|
43
46
|
ref: listRef
|
@@ -61,7 +64,7 @@ var Columns = function Columns(_ref) {
|
|
61
64
|
checked: getVisibleColumnsCount() === columns.length,
|
62
65
|
indeterminate: getVisibleColumnsCount() < columns.length && getVisibleColumnsCount() > 0,
|
63
66
|
onChange: function onChange() {
|
64
|
-
onSelectColumn(
|
67
|
+
onSelectColumn(filteredStickyColumn, getVisibleColumnsCount() !== columns.length);
|
65
68
|
},
|
66
69
|
id: "".concat(blockClass, "__customization-column-select-all"),
|
67
70
|
labelText: selectAllLabel
|
package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsTearsheet.js
CHANGED
@@ -90,7 +90,7 @@ var CustomizeColumnsTearsheet = function CustomizeColumnsTearsheet(_ref) {
|
|
90
90
|
};
|
91
91
|
var onCheckboxCheck = function onCheckboxCheck(col, value) {
|
92
92
|
var changedDefinitions = columnObjects.map(function (definition) {
|
93
|
-
if (Array.isArray(col) && col.indexOf(definition) !=
|
93
|
+
if (Array.isArray(col) && col.indexOf(definition) != -1 || definition.id === col.id) {
|
94
94
|
return _objectSpread(_objectSpread({}, definition), {}, {
|
95
95
|
isVisible: value
|
96
96
|
});
|
@@ -21,18 +21,23 @@ import { useSubscribeToEventEmitter, useFilters, useShouldDisableButtons } from
|
|
21
21
|
import { carbon } from '../../../../../settings';
|
22
22
|
var blockClass = "".concat(pkg.prefix, "--datagrid");
|
23
23
|
var componentClass = "".concat(blockClass, "-filter-flyout");
|
24
|
+
var defaults = {
|
25
|
+
flyoutIconDescription: 'Open filters',
|
26
|
+
title: 'Filter',
|
27
|
+
primaryActionLabel: 'Apply',
|
28
|
+
secondaryActionLabel: 'Cancel'
|
29
|
+
};
|
24
30
|
var FilterFlyout = function FilterFlyout(_ref) {
|
25
31
|
var _cx2;
|
26
|
-
var
|
27
|
-
updateMethod = _ref$updateMethod === void 0 ? BATCH : _ref$updateMethod,
|
32
|
+
var updateMethod = _ref.updateMethod,
|
28
33
|
_ref$flyoutIconDescri = _ref.flyoutIconDescription,
|
29
|
-
flyoutIconDescription = _ref$flyoutIconDescri === void 0 ?
|
34
|
+
flyoutIconDescription = _ref$flyoutIconDescri === void 0 ? defaults.flyoutIconDescription : _ref$flyoutIconDescri,
|
30
35
|
_ref$filters = _ref.filters,
|
31
36
|
filters = _ref$filters === void 0 ? [] : _ref$filters,
|
32
37
|
_ref$title = _ref.title,
|
33
|
-
title = _ref$title === void 0 ?
|
38
|
+
title = _ref$title === void 0 ? defaults.title : _ref$title,
|
34
39
|
_ref$primaryActionLab = _ref.primaryActionLabel,
|
35
|
-
primaryActionLabel = _ref$primaryActionLab === void 0 ?
|
40
|
+
primaryActionLabel = _ref$primaryActionLab === void 0 ? defaults.primaryActionLabel : _ref$primaryActionLab,
|
36
41
|
_ref$onFlyoutOpen = _ref.onFlyoutOpen,
|
37
42
|
onFlyoutOpen = _ref$onFlyoutOpen === void 0 ? function () {} : _ref$onFlyoutOpen,
|
38
43
|
_ref$onFlyoutClose = _ref.onFlyoutClose,
|
@@ -42,7 +47,7 @@ var FilterFlyout = function FilterFlyout(_ref) {
|
|
42
47
|
_ref$onCancel = _ref.onCancel,
|
43
48
|
onCancel = _ref$onCancel === void 0 ? function () {} : _ref$onCancel,
|
44
49
|
_ref$secondaryActionL = _ref.secondaryActionLabel,
|
45
|
-
secondaryActionLabel = _ref$secondaryActionL === void 0 ?
|
50
|
+
secondaryActionLabel = _ref$secondaryActionL === void 0 ? defaults.secondaryActionLabel : _ref$secondaryActionL,
|
46
51
|
setAllFilters = _ref.setAllFilters,
|
47
52
|
_ref$data = _ref.data,
|
48
53
|
data = _ref$data === void 0 ? [] : _ref$data,
|
@@ -88,6 +93,9 @@ var FilterFlyout = function FilterFlyout(_ref) {
|
|
88
93
|
_useShouldDisableButt2 = _slicedToArray(_useShouldDisableButt, 2),
|
89
94
|
shouldDisableButtons = _useShouldDisableButt2[0],
|
90
95
|
setShouldDisableButtons = _useShouldDisableButt2[1];
|
96
|
+
|
97
|
+
// Skip resize testing
|
98
|
+
/* istanbul ignore next */
|
91
99
|
var handleResize = function handleResize(current) {
|
92
100
|
var filterFlyoutRefPosition = flyoutInnerRef === null || flyoutInnerRef === void 0 ? void 0 : flyoutInnerRef.current.getBoundingClientRect();
|
93
101
|
var originalFlyoutWidth = parseInt(window.getComputedStyle(flyoutInnerRef === null || flyoutInnerRef === void 0 ? void 0 : flyoutInnerRef.current).getPropertyValue('width'));
|
@@ -177,9 +185,13 @@ var FilterFlyout = function FilterFlyout(_ref) {
|
|
177
185
|
};
|
178
186
|
|
179
187
|
/** Effects */
|
188
|
+
// Close flyout when clicking outside
|
180
189
|
useClickOutside(filterFlyoutRef, function (target) {
|
181
190
|
var hasClickedOnDatePicker = target.closest('.flatpickr-calendar');
|
182
191
|
var hasClickedOnDropdown = target.className === "".concat(carbon.prefix, "--list-box__menu-item__option");
|
192
|
+
|
193
|
+
// Do not do anything if flyout is closed or if clicking on anything
|
194
|
+
// rendered via a portal
|
183
195
|
if (!open || hasClickedOnDatePicker || hasClickedOnDropdown) {
|
184
196
|
return;
|
185
197
|
}
|
@@ -1,6 +1,5 @@
|
|
1
1
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
2
2
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
3
|
-
/* eslint-disable react/jsx-key */
|
4
3
|
/**
|
5
4
|
* Copyright IBM Corp. 2022, 2024
|
6
5
|
*
|
@@ -24,14 +23,21 @@ import { useFilters, useSubscribeToEventEmitter, useShouldDisableButtons } from
|
|
24
23
|
var blockClass = "".concat(pkg.prefix, "--datagrid");
|
25
24
|
var componentClass = "".concat(blockClass, "-filter-panel");
|
26
25
|
var MotionActionSet = motion(ActionSet);
|
26
|
+
var defaults = {
|
27
|
+
title: 'Filter',
|
28
|
+
closeIconDescription: 'Close filter panel',
|
29
|
+
primaryActionLabel: 'Apply',
|
30
|
+
secondaryActionLabel: 'Cancel',
|
31
|
+
searchLabelText: 'Filter search',
|
32
|
+
searchPlaceholder: 'Find filters'
|
33
|
+
};
|
27
34
|
var FilterPanel = function FilterPanel(_ref) {
|
28
35
|
var _cx;
|
29
36
|
var _ref$title = _ref.title,
|
30
|
-
title = _ref$title === void 0 ?
|
37
|
+
title = _ref$title === void 0 ? defaults.title : _ref$title,
|
31
38
|
_ref$closeIconDescrip = _ref.closeIconDescription,
|
32
|
-
closeIconDescription = _ref$closeIconDescrip === void 0 ?
|
33
|
-
|
34
|
-
updateMethod = _ref$updateMethod === void 0 ? BATCH : _ref$updateMethod,
|
39
|
+
closeIconDescription = _ref$closeIconDescrip === void 0 ? defaults.closeIconDescription : _ref$closeIconDescrip,
|
40
|
+
updateMethod = _ref.updateMethod,
|
35
41
|
filterSections = _ref.filterSections,
|
36
42
|
setAllFilters = _ref.setAllFilters,
|
37
43
|
_ref$onApply = _ref.onApply,
|
@@ -47,13 +53,13 @@ var FilterPanel = function FilterPanel(_ref) {
|
|
47
53
|
_ref$filterPanelMinHe = _ref.filterPanelMinHeight,
|
48
54
|
filterPanelMinHeight = _ref$filterPanelMinHe === void 0 ? 600 : _ref$filterPanelMinHe,
|
49
55
|
_ref$primaryActionLab = _ref.primaryActionLabel,
|
50
|
-
primaryActionLabel = _ref$primaryActionLab === void 0 ?
|
56
|
+
primaryActionLabel = _ref$primaryActionLab === void 0 ? defaults.primaryActionLabel : _ref$primaryActionLab,
|
51
57
|
_ref$secondaryActionL = _ref.secondaryActionLabel,
|
52
|
-
secondaryActionLabel = _ref$secondaryActionL === void 0 ?
|
58
|
+
secondaryActionLabel = _ref$secondaryActionL === void 0 ? defaults.secondaryActionLabel : _ref$secondaryActionL,
|
53
59
|
_ref$searchLabelText = _ref.searchLabelText,
|
54
|
-
searchLabelText = _ref$searchLabelText === void 0 ?
|
60
|
+
searchLabelText = _ref$searchLabelText === void 0 ? defaults.searchLabelText : _ref$searchLabelText,
|
55
61
|
_ref$searchPlaceholde = _ref.searchPlaceholder,
|
56
|
-
searchPlaceholder = _ref$searchPlaceholde === void 0 ?
|
62
|
+
searchPlaceholder = _ref$searchPlaceholde === void 0 ? defaults.searchPlaceholder : _ref$searchPlaceholde,
|
57
63
|
_ref$reactTableFilter = _ref.reactTableFiltersState,
|
58
64
|
reactTableFiltersState = _ref$reactTableFilter === void 0 ? [] : _ref$reactTableFilter,
|
59
65
|
_ref$isFetching = _ref.isFetching,
|
@@ -177,7 +183,8 @@ var FilterPanel = function FilterPanel(_ref) {
|
|
177
183
|
var filterHeadingHeight = (_filterHeadingRef$cur = filterHeadingRef.current) === null || _filterHeadingRef$cur === void 0 ? void 0 : _filterHeadingRef$cur.getBoundingClientRect().height;
|
178
184
|
var filterSearchHeight = (_filterSearchRef$curr = filterSearchRef.current) === null || _filterSearchRef$curr === void 0 ? void 0 : _filterSearchRef$curr.getBoundingClientRect().height;
|
179
185
|
var actionSetHeight = (_actionSetRef$current = actionSetRef.current) === null || _actionSetRef$current === void 0 ? void 0 : _actionSetRef$current.getBoundingClientRect().height;
|
180
|
-
var height = "calc(100vh - ".concat(filterHeadingHeight, "px - ").concat(
|
186
|
+
var height = panelOpen ? "calc(100vh - ".concat(filterHeadingHeight, "px - ").concat( /* istanbul ignore next */
|
187
|
+
showFilterSearch ? filterSearchHeight : 0, "px - ").concat(updateMethod === BATCH ? actionSetHeight : 0, "px)") : 0;
|
181
188
|
return height;
|
182
189
|
};
|
183
190
|
return /*#__PURE__*/React.createElement(motion.div, {
|
@@ -203,7 +210,10 @@ var FilterPanel = function FilterPanel(_ref) {
|
|
203
210
|
tooltipPosition: "bottom",
|
204
211
|
tooltipAlignment: "end",
|
205
212
|
onClick: closePanel
|
206
|
-
}), showFilterSearch &&
|
213
|
+
}), showFilterSearch &&
|
214
|
+
/*#__PURE__*/
|
215
|
+
/* istanbul ignore next */
|
216
|
+
React.createElement("div", {
|
207
217
|
ref: filterSearchRef,
|
208
218
|
className: "".concat(componentClass, "__search")
|
209
219
|
}, /*#__PURE__*/React.createElement(Search, {
|
@@ -4,14 +4,15 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
|
|
4
4
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
5
5
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
6
6
|
/**
|
7
|
-
* Copyright IBM Corp. 2022,
|
7
|
+
* Copyright IBM Corp. 2022, 2024
|
8
8
|
*
|
9
9
|
* This source code is licensed under the Apache-2.0 license found in the
|
10
10
|
* LICENSE file in the root directory of this source tree.
|
11
11
|
*/
|
12
|
-
|
12
|
+
|
13
|
+
import React, { createContext, useState, useReducer } from 'react';
|
13
14
|
import PropTypes from 'prop-types';
|
14
|
-
import { DATE, DROPDOWN, NUMBER, RADIO, CHECKBOX, CLEAR_SINGLE_FILTER } from './constants';
|
15
|
+
import { DATE, DROPDOWN, NUMBER, RADIO, CHECKBOX, CLEAR_SINGLE_FILTER, SAVED_FILTERS } from './constants';
|
15
16
|
export var FilterContext = /*#__PURE__*/createContext();
|
16
17
|
var EventEmitter = {
|
17
18
|
events: {},
|
@@ -141,22 +142,45 @@ var prepareFiltersForTags = function prepareFiltersForTags(filters, renderDateLa
|
|
141
142
|
});
|
142
143
|
return tags;
|
143
144
|
};
|
144
|
-
|
145
|
-
|
146
|
-
|
147
|
-
|
148
|
-
|
149
|
-
|
145
|
+
var filteringReducer = function filteringReducer(state, action) {
|
146
|
+
switch (action.type) {
|
147
|
+
case SAVED_FILTERS:
|
148
|
+
{
|
149
|
+
var _ref3 = action.payload || {},
|
150
|
+
savedFilters = _ref3.savedFilters;
|
151
|
+
return _objectSpread(_objectSpread({}, state), {}, {
|
152
|
+
savedFilters: savedFilters
|
153
|
+
});
|
154
|
+
}
|
155
|
+
default:
|
156
|
+
return state;
|
157
|
+
}
|
158
|
+
};
|
159
|
+
export var FilterProvider = function FilterProvider(_ref4) {
|
160
|
+
var children = _ref4.children,
|
161
|
+
filters = _ref4.filters,
|
162
|
+
filterProps = _ref4.filterProps;
|
163
|
+
var _ref5 = filterProps || {},
|
164
|
+
renderDateLabel = _ref5.renderDateLabel;
|
150
165
|
var filterTags = prepareFiltersForTags(filters, renderDateLabel);
|
151
166
|
var _useState = useState(false),
|
152
167
|
_useState2 = _slicedToArray(_useState, 2),
|
153
168
|
panelOpen = _useState2[0],
|
154
169
|
setPanelOpen = _useState2[1];
|
170
|
+
var initialState = {
|
171
|
+
savedFilters: []
|
172
|
+
};
|
173
|
+
var _useReducer = useReducer(filteringReducer, initialState),
|
174
|
+
_useReducer2 = _slicedToArray(_useReducer, 2),
|
175
|
+
state = _useReducer2[0],
|
176
|
+
dispatch = _useReducer2[1];
|
155
177
|
var value = {
|
156
178
|
filterTags: filterTags,
|
157
179
|
EventEmitter: EventEmitter,
|
158
180
|
panelOpen: panelOpen,
|
159
|
-
setPanelOpen: setPanelOpen
|
181
|
+
setPanelOpen: setPanelOpen,
|
182
|
+
state: state,
|
183
|
+
dispatch: dispatch
|
160
184
|
};
|
161
185
|
return /*#__PURE__*/React.createElement(FilterContext.Provider, {
|
162
186
|
value: value
|
@@ -1,9 +1,10 @@
|
|
1
1
|
/**
|
2
|
-
* Copyright IBM Corp. 2022,
|
2
|
+
* Copyright IBM Corp. 2022, 2024
|
3
3
|
*
|
4
4
|
* This source code is licensed under the Apache-2.0 license found in the
|
5
5
|
* LICENSE file in the root directory of this source tree.
|
6
6
|
*/
|
7
|
+
|
7
8
|
/** Constants for update methods can either be batch or instant */
|
8
9
|
export var BATCH = 'batch';
|
9
10
|
export var INSTANT = 'instant';
|
@@ -25,4 +26,7 @@ export var CLEAR_SINGLE_FILTER = 'clearSingleFilter';
|
|
25
26
|
|
26
27
|
/** Constants for panel dimensions */
|
27
28
|
export var PANEL_WIDTH = 320;
|
28
|
-
export var ACTION_SET_HEIGHT = 64;
|
29
|
+
export var ACTION_SET_HEIGHT = 64;
|
30
|
+
|
31
|
+
/** Constants for local reducer */
|
32
|
+
export var SAVED_FILTERS = 'savedFilters';
|
@@ -1,3 +1,10 @@
|
|
1
|
+
/**
|
2
|
+
* Copyright IBM Corp. 2023, 2024
|
3
|
+
*
|
4
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
6
|
+
*/
|
7
|
+
|
1
8
|
import { FilterContext } from '../FilterProvider';
|
2
9
|
import { useContext } from 'react';
|
3
10
|
var useFilterContext = function useFilterContext() {
|
@@ -4,18 +4,19 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
|
|
4
4
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
5
5
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
6
6
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
7
|
-
|
8
|
-
*
|
9
|
-
*
|
10
|
-
*
|
11
|
-
*
|
12
|
-
* restricted by GSA ADP Schedule Contract with IBM Corp.
|
7
|
+
/**
|
8
|
+
* Copyright IBM Corp. 2023, 2024
|
9
|
+
*
|
10
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
11
|
+
* LICENSE file in the root directory of this source tree.
|
13
12
|
*/
|
14
|
-
|
13
|
+
|
14
|
+
import React, { useState, useRef, useEffect, useCallback, useContext } from 'react';
|
15
15
|
import { Checkbox, DatePicker, DatePickerInput, Dropdown, FormGroup, NumberInput, RadioButton, RadioButtonGroup } from 'carbon-components-react';
|
16
|
-
import { INSTANT, BATCH, DATE, CHECKBOX, NUMBER, RADIO, DROPDOWN, PANEL } from '../constants';
|
16
|
+
import { INSTANT, BATCH, DATE, CHECKBOX, NUMBER, RADIO, DROPDOWN, PANEL, SAVED_FILTERS } from '../constants';
|
17
17
|
import { getInitialStateFromFilters } from '../utils';
|
18
18
|
import { usePreviousValue } from '../../../../../../global/js/hooks';
|
19
|
+
import { FilterContext } from '../FilterProvider';
|
19
20
|
var useFilters = function useFilters(_ref) {
|
20
21
|
var updateMethod = _ref.updateMethod,
|
21
22
|
_ref$filters = _ref.filters,
|
@@ -23,10 +24,13 @@ var useFilters = function useFilters(_ref) {
|
|
23
24
|
setAllFilters = _ref.setAllFilters,
|
24
25
|
variation = _ref.variation,
|
25
26
|
reactTableFiltersState = _ref.reactTableFiltersState,
|
26
|
-
|
27
|
-
onCancel = _ref$onCancel === void 0 ? function () {} : _ref$onCancel,
|
27
|
+
onCancel = _ref.onCancel,
|
28
28
|
panelOpen = _ref.panelOpen,
|
29
29
|
isFetching = _ref.isFetching;
|
30
|
+
var _useContext = useContext(FilterContext),
|
31
|
+
state = _useContext.state,
|
32
|
+
localDispatch = _useContext.dispatch;
|
33
|
+
var savedFilters = state.savedFilters;
|
30
34
|
/** State */
|
31
35
|
var _useState = useState(getInitialStateFromFilters(filters, variation, reactTableFiltersState)),
|
32
36
|
_useState2 = _slicedToArray(_useState, 2),
|
@@ -166,6 +170,16 @@ var useFilters = function useFilters(_ref) {
|
|
166
170
|
}
|
167
171
|
setFiltersObjectArray(filtersObjectArrayCopy);
|
168
172
|
|
173
|
+
// Dispatch action from local filter context to track filters in order
|
174
|
+
// to keep history if `isFetching` becomes true. If so, react-table
|
175
|
+
// clears all filter history
|
176
|
+
localDispatch({
|
177
|
+
type: SAVED_FILTERS,
|
178
|
+
payload: {
|
179
|
+
savedFilters: filtersObjectArrayCopy
|
180
|
+
}
|
181
|
+
});
|
182
|
+
|
169
183
|
// // Automatically apply the filters if the updateMethod is instant
|
170
184
|
if (updateMethod === INSTANT) {
|
171
185
|
setAllFilters(filtersObjectArrayCopy);
|
@@ -345,10 +359,27 @@ var useFilters = function useFilters(_ref) {
|
|
345
359
|
setAllFilters(JSON.parse(prevFiltersObjectArrayRef.current));
|
346
360
|
setFetchingReset(true);
|
347
361
|
}
|
362
|
+
if (isFetching && fetchingReset) {
|
363
|
+
var cleanFilters = function cleanFilters(originalFilterState) {
|
364
|
+
var copy = _objectSpread({}, originalFilterState);
|
365
|
+
var updatedFilters = savedFilters.map(function (f) {
|
366
|
+
if (Object.hasOwn(copy, f.id)) {
|
367
|
+
copy[f.id] = f;
|
368
|
+
return copy;
|
369
|
+
}
|
370
|
+
return copy;
|
371
|
+
});
|
372
|
+
return updatedFilters[0];
|
373
|
+
};
|
374
|
+
setFiltersObjectArray(savedFilters);
|
375
|
+
var filterStateCopy = cleanFilters(filtersState);
|
376
|
+
setFiltersState(filterStateCopy);
|
377
|
+
}
|
348
378
|
if (!isFetching) {
|
349
379
|
setFetchingReset(false);
|
350
380
|
}
|
351
|
-
|
381
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
382
|
+
}, [isFetching, reactTableFiltersState, setAllFilters, fetchingReset, savedFilters, filtersObjectArray]);
|
352
383
|
var cancel = function cancel() {
|
353
384
|
// Reverting to previous filters only applies when using batch actions
|
354
385
|
if (updateMethod === BATCH) {
|