@carbon/ibm-products 1.44.1 → 1.45.0
Sign up to get free protection for your applications and to get access to all the features.
- package/css/index-full-carbon.css +2 -2
- package/css/index-full-carbon.min.css +1 -1
- package/css/index-full-carbon.min.css.map +1 -1
- package/css/index-without-carbon.css +2 -2
- package/css/index-without-carbon.min.css +1 -1
- package/css/index-without-carbon.min.css.map +1 -1
- package/css/index.css +2 -2
- package/css/index.min.css +1 -1
- package/css/index.min.css.map +1 -1
- package/es/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +43 -11
- package/es/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +47 -15
- package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/index.js +9 -1
- package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useShouldDisableButtons.js +34 -0
- package/es/components/Datagrid/utils/DatagridActions.js +4 -36
- package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +36 -4
- package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +40 -14
- package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/index.js +8 -1
- package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useShouldDisableButtons.js +41 -0
- package/lib/components/Datagrid/utils/DatagridActions.js +4 -36
- package/package.json +2 -2
- package/scss/components/Datagrid/styles/_datagrid.scss +1 -1
- package/scss/components/Datagrid/styles/addons/_RowSizeDropdown.scss +1 -1
@@ -5,13 +5,13 @@ 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
7
|
// @flow
|
8
|
-
|
9
|
-
*
|
10
|
-
*
|
11
|
-
*
|
12
|
-
*
|
13
|
-
* restricted by GSA ADP Schedule Contract with IBM Corp.
|
8
|
+
/**
|
9
|
+
* Copyright IBM Corp. 2022, 2023
|
10
|
+
*
|
11
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
12
|
+
* LICENSE file in the root directory of this source tree.
|
14
13
|
*/
|
14
|
+
|
15
15
|
import { Filter16 } from '@carbon/icons-react';
|
16
16
|
import { Button, Checkbox, DatePicker, DatePickerInput, Dropdown, FormGroup, NumberInput, RadioButton, RadioButtonGroup } from 'carbon-components-react';
|
17
17
|
import cx from 'classnames';
|
@@ -21,7 +21,7 @@ import { useClickOutside } from '../../../../../global/js/hooks';
|
|
21
21
|
import { pkg } from '../../../../../settings';
|
22
22
|
import { ActionSet } from '../../../../ActionSet';
|
23
23
|
import { BATCH, CHECKBOX, CLEAR_FILTERS, DATE, DROPDOWN, FLYOUT, INSTANT, NUMBER, RADIO } from './constants';
|
24
|
-
import { useInitialStateFromFilters, useSubscribeToEventEmitter } from './hooks';
|
24
|
+
import { useInitialStateFromFilters, useShouldDisableButtons, useSubscribeToEventEmitter } from './hooks';
|
25
25
|
import { getInitialStateFromFilters } from './utils';
|
26
26
|
var blockClass = "".concat(pkg.prefix, "--datagrid");
|
27
27
|
var componentClass = "".concat(blockClass, "-filter-flyout");
|
@@ -69,6 +69,14 @@ var FilterFlyout = function FilterFlyout(_ref) {
|
|
69
69
|
// When using batch actions we have to store the filters to then apply them later
|
70
70
|
var prevFiltersRef = useRef(JSON.stringify(filtersState));
|
71
71
|
var prevFiltersObjectArrayRef = useRef(JSON.stringify(filtersObjectArray));
|
72
|
+
var _useShouldDisableButt = useShouldDisableButtons({
|
73
|
+
initialValue: true,
|
74
|
+
filtersState: filtersState,
|
75
|
+
prevFiltersRef: prevFiltersRef
|
76
|
+
}),
|
77
|
+
_useShouldDisableButt2 = _slicedToArray(_useShouldDisableButt, 2),
|
78
|
+
shouldDisableButtons = _useShouldDisableButt2[0],
|
79
|
+
setShouldDisableButtons = _useShouldDisableButt2[1];
|
72
80
|
|
73
81
|
/** Memos */
|
74
82
|
var showActionSet = updateMethod === BATCH;
|
@@ -88,6 +96,9 @@ var FilterFlyout = function FilterFlyout(_ref) {
|
|
88
96
|
// From the user
|
89
97
|
onApply();
|
90
98
|
|
99
|
+
// When the user clicks apply, the action set buttons should be disabled again
|
100
|
+
setShouldDisableButtons(true);
|
101
|
+
|
91
102
|
// updates the ref so next time the flyout opens we have records of the previous filters
|
92
103
|
prevFiltersRef.current = JSON.stringify(filtersState);
|
93
104
|
prevFiltersObjectArrayRef.current = JSON.stringify(filtersObjectArray);
|
@@ -161,6 +172,19 @@ var FilterFlyout = function FilterFlyout(_ref) {
|
|
161
172
|
if (shouldRemoveFromArray) {
|
162
173
|
filtersObjectArrayCopy.splice(index, 1);
|
163
174
|
}
|
175
|
+
} else if (type === DROPDOWN || type === RADIO) {
|
176
|
+
if (value === 'Any') {
|
177
|
+
/**
|
178
|
+
Checks to see if the selected value is 'Any', that means the user wants
|
179
|
+
to reset specific filter
|
180
|
+
*/
|
181
|
+
var _index = filtersObjectArrayCopy.findIndex(function (filter) {
|
182
|
+
return filter.id === column;
|
183
|
+
});
|
184
|
+
|
185
|
+
// Remove it from the filters array
|
186
|
+
filtersObjectArrayCopy.splice(_index, 1);
|
187
|
+
}
|
164
188
|
}
|
165
189
|
setFiltersObjectArray(filtersObjectArrayCopy);
|
166
190
|
|
@@ -258,8 +282,9 @@ var FilterFlyout = function FilterFlyout(_ref) {
|
|
258
282
|
}));
|
259
283
|
}));
|
260
284
|
} else if (type === RADIO) {
|
285
|
+
var _filtersState$column, _filtersState$column2;
|
261
286
|
return /*#__PURE__*/React.createElement(FormGroup, components.FormGroup, /*#__PURE__*/React.createElement(RadioButtonGroup, _extends({}, components.RadioButtonGroup, {
|
262
|
-
valueSelected: filtersState[column].value,
|
287
|
+
valueSelected: ((_filtersState$column = filtersState[column]) === null || _filtersState$column === void 0 ? void 0 : _filtersState$column.value) === '' ? 'Any' : (_filtersState$column2 = filtersState[column]) === null || _filtersState$column2 === void 0 ? void 0 : _filtersState$column2.value,
|
263
288
|
onChange: function onChange(selected) {
|
264
289
|
var _components$RadioButt, _components$RadioButt2;
|
265
290
|
setFiltersState(_objectSpread(_objectSpread({}, filtersState), {}, _defineProperty({}, column, {
|
@@ -273,6 +298,10 @@ var FilterFlyout = function FilterFlyout(_ref) {
|
|
273
298
|
});
|
274
299
|
(_components$RadioButt = (_components$RadioButt2 = components.RadioButtonGroup).onChange) === null || _components$RadioButt === void 0 ? void 0 : _components$RadioButt.call(_components$RadioButt2, selected);
|
275
300
|
}
|
301
|
+
}), /*#__PURE__*/React.createElement(RadioButton, {
|
302
|
+
id: "any",
|
303
|
+
labelText: "Any",
|
304
|
+
value: "Any"
|
276
305
|
}), components.RadioButton.map(function (radio) {
|
277
306
|
var _ref4, _radio$id;
|
278
307
|
return /*#__PURE__*/React.createElement(RadioButton, _extends({
|
@@ -281,7 +310,8 @@ var FilterFlyout = function FilterFlyout(_ref) {
|
|
281
310
|
})));
|
282
311
|
} else if (type === DROPDOWN) {
|
283
312
|
return /*#__PURE__*/React.createElement(Dropdown, _extends({}, components.Dropdown, {
|
284
|
-
selectedItem: filtersState[column].value,
|
313
|
+
selectedItem: filtersState[column].value === '' ? 'Any' : filtersState[column].value,
|
314
|
+
items: ['Any'].concat(_toConsumableArray(components.Dropdown.items)),
|
285
315
|
onChange: function onChange(_ref5) {
|
286
316
|
var _components$Dropdown$, _components$Dropdown;
|
287
317
|
var selectedItem = _ref5.selectedItem;
|
@@ -311,13 +341,15 @@ var FilterFlyout = function FilterFlyout(_ref) {
|
|
311
341
|
kind: 'primary',
|
312
342
|
label: primaryActionLabel,
|
313
343
|
onClick: apply,
|
314
|
-
isExpressive: false
|
344
|
+
isExpressive: false,
|
345
|
+
disabled: shouldDisableButtons
|
315
346
|
}, {
|
316
347
|
key: 3,
|
317
348
|
kind: 'secondary',
|
318
349
|
label: secondaryActionLabel,
|
319
350
|
onClick: cancel,
|
320
|
-
isExpressive: false
|
351
|
+
isExpressive: false,
|
352
|
+
disabled: shouldDisableButtons
|
321
353
|
}],
|
322
354
|
size: "md",
|
323
355
|
buttonSize: "md"
|
@@ -5,6 +5,12 @@ 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
7
|
/* eslint-disable react/jsx-key */
|
8
|
+
/**
|
9
|
+
* Copyright IBM Corp. 2022, 2023
|
10
|
+
*
|
11
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
12
|
+
* LICENSE file in the root directory of this source tree.
|
13
|
+
*/
|
8
14
|
|
9
15
|
import React, { useRef, useMemo, useContext, useState, useEffect } from 'react';
|
10
16
|
import PropTypes from 'prop-types';
|
@@ -18,15 +24,15 @@ import { panelVariants, innerContainerVariants, actionSetVariants } from './moti
|
|
18
24
|
import { Close32 } from '@carbon/icons-react';
|
19
25
|
import { ActionSet } from '../../../../ActionSet';
|
20
26
|
import { FilterContext } from '.';
|
21
|
-
import { useInitialStateFromFilters, useSubscribeToEventEmitter } from './hooks';
|
27
|
+
import { useInitialStateFromFilters, useSubscribeToEventEmitter, useShouldDisableButtons } from './hooks';
|
22
28
|
import { getInitialStateFromFilters } from './utils';
|
23
|
-
import isEqual from 'lodash/isEqual';
|
24
29
|
var blockClass = "".concat(pkg.prefix, "--datagrid");
|
25
30
|
var componentClass = "".concat(blockClass, "-filter-panel");
|
26
31
|
var MotionActionSet = motion(ActionSet);
|
27
32
|
var FilterPanel = function FilterPanel(_ref) {
|
28
33
|
var _cx;
|
29
|
-
var title = _ref.title,
|
34
|
+
var _ref$title = _ref.title,
|
35
|
+
title = _ref$title === void 0 ? 'Filter' : _ref$title,
|
30
36
|
_ref$closeIconDescrip = _ref.closeIconDescription,
|
31
37
|
closeIconDescription = _ref$closeIconDescrip === void 0 ? 'Close filter panel' : _ref$closeIconDescrip,
|
32
38
|
_ref$updateMethod = _ref.updateMethod,
|
@@ -54,14 +60,10 @@ var FilterPanel = function FilterPanel(_ref) {
|
|
54
60
|
_useState2 = _slicedToArray(_useState, 2),
|
55
61
|
filtersObjectArray = _useState2[0],
|
56
62
|
setFiltersObjectArray = _useState2[1];
|
57
|
-
var _useState3 = useState(
|
63
|
+
var _useState3 = useState(false),
|
58
64
|
_useState4 = _slicedToArray(_useState3, 2),
|
59
|
-
|
60
|
-
|
61
|
-
var _useState5 = useState(false),
|
62
|
-
_useState6 = _slicedToArray(_useState5, 2),
|
63
|
-
showDividerLine = _useState6[0],
|
64
|
-
setShowDividerLine = _useState6[1];
|
65
|
+
showDividerLine = _useState4[0],
|
66
|
+
setShowDividerLine = _useState4[1];
|
65
67
|
|
66
68
|
/** Refs */
|
67
69
|
var filterPanelRef = useRef();
|
@@ -72,6 +74,16 @@ var FilterPanel = function FilterPanel(_ref) {
|
|
72
74
|
var prevFiltersRef = useRef(JSON.stringify(filtersState));
|
73
75
|
var prevFiltersObjectArrayRef = useRef(JSON.stringify(filtersObjectArray));
|
74
76
|
|
77
|
+
/** State from hooks */
|
78
|
+
var _useShouldDisableButt = useShouldDisableButtons({
|
79
|
+
initialValue: true,
|
80
|
+
filtersState: filtersState,
|
81
|
+
prevFiltersRef: prevFiltersRef
|
82
|
+
}),
|
83
|
+
_useShouldDisableButt2 = _slicedToArray(_useShouldDisableButt, 2),
|
84
|
+
shouldDisableButtons = _useShouldDisableButt2[0],
|
85
|
+
setShouldDisableButtons = _useShouldDisableButt2[1];
|
86
|
+
|
75
87
|
/** Memos */
|
76
88
|
var showActionSet = useMemo(function () {
|
77
89
|
return updateMethod === BATCH;
|
@@ -116,7 +128,11 @@ var FilterPanel = function FilterPanel(_ref) {
|
|
116
128
|
};
|
117
129
|
var apply = function apply() {
|
118
130
|
setAllFilters(filtersObjectArray);
|
131
|
+
|
132
|
+
// From the user
|
119
133
|
onApply();
|
134
|
+
|
135
|
+
// When the user clicks apply, the action set buttons should be disabled again
|
120
136
|
setShouldDisableButtons(true);
|
121
137
|
|
122
138
|
// updates the ref so next time the flyout opens we have records of the previous filters
|
@@ -178,6 +194,19 @@ var FilterPanel = function FilterPanel(_ref) {
|
|
178
194
|
// Remove it from the filters array since there is nothing to filter
|
179
195
|
filtersObjectArrayCopy.splice(_index, 1);
|
180
196
|
}
|
197
|
+
} else if (type === DROPDOWN || type === RADIO) {
|
198
|
+
if (value === 'Any') {
|
199
|
+
/**
|
200
|
+
Checks to see if the selected value is 'Any', that means the user wants
|
201
|
+
to reset specific filter
|
202
|
+
*/
|
203
|
+
var _index2 = filtersObjectArrayCopy.findIndex(function (filter) {
|
204
|
+
return filter.id === column;
|
205
|
+
});
|
206
|
+
|
207
|
+
// Remove it from the filters array
|
208
|
+
filtersObjectArrayCopy.splice(_index2, 1);
|
209
|
+
}
|
181
210
|
}
|
182
211
|
setFiltersObjectArray(filtersObjectArrayCopy);
|
183
212
|
|
@@ -189,6 +218,7 @@ var FilterPanel = function FilterPanel(_ref) {
|
|
189
218
|
|
190
219
|
/** Render the individual filter component */
|
191
220
|
var renderFilter = function renderFilter(_ref3) {
|
221
|
+
var _filtersState$column, _filtersState$column2;
|
192
222
|
var type = _ref3.type,
|
193
223
|
column = _ref3.column,
|
194
224
|
components = _ref3.props;
|
@@ -268,7 +298,7 @@ var FilterPanel = function FilterPanel(_ref) {
|
|
268
298
|
}));
|
269
299
|
case RADIO:
|
270
300
|
return /*#__PURE__*/React.createElement(FormGroup, components.FormGroup, /*#__PURE__*/React.createElement(RadioButtonGroup, _extends({}, components.RadioButtonGroup, {
|
271
|
-
valueSelected: filtersState[column].value,
|
301
|
+
valueSelected: ((_filtersState$column = filtersState[column]) === null || _filtersState$column === void 0 ? void 0 : _filtersState$column.value) === '' ? 'Any' : (_filtersState$column2 = filtersState[column]) === null || _filtersState$column2 === void 0 ? void 0 : _filtersState$column2.value,
|
272
302
|
onChange: function onChange(selected) {
|
273
303
|
var _components$RadioButt, _components$RadioButt2;
|
274
304
|
setFiltersState(_objectSpread(_objectSpread({}, filtersState), {}, _defineProperty({}, column, {
|
@@ -282,6 +312,10 @@ var FilterPanel = function FilterPanel(_ref) {
|
|
282
312
|
});
|
283
313
|
(_components$RadioButt = (_components$RadioButt2 = components.RadioButtonGroup).onChange) === null || _components$RadioButt === void 0 ? void 0 : _components$RadioButt.call(_components$RadioButt2, selected);
|
284
314
|
}
|
315
|
+
}), /*#__PURE__*/React.createElement(RadioButton, {
|
316
|
+
id: "any",
|
317
|
+
labelText: "Any",
|
318
|
+
value: "Any"
|
285
319
|
}), components.RadioButton.map(function (radio) {
|
286
320
|
var _ref4, _radio$id;
|
287
321
|
return /*#__PURE__*/React.createElement(RadioButton, _extends({
|
@@ -290,7 +324,8 @@ var FilterPanel = function FilterPanel(_ref) {
|
|
290
324
|
})));
|
291
325
|
case DROPDOWN:
|
292
326
|
return /*#__PURE__*/React.createElement(Dropdown, _extends({}, components.Dropdown, {
|
293
|
-
|
327
|
+
items: ['Any'].concat(_toConsumableArray(components.Dropdown.items)),
|
328
|
+
selectedItem: filtersState[column].value === '' ? 'Any' : filtersState[column].value,
|
294
329
|
onChange: function onChange(_ref5) {
|
295
330
|
var _components$Dropdown$, _components$Dropdown;
|
296
331
|
var selectedItem = _ref5.selectedItem;
|
@@ -349,9 +384,6 @@ var FilterPanel = function FilterPanel(_ref) {
|
|
349
384
|
var _filterPanelRef$curre;
|
350
385
|
(_filterPanelRef$curre = filterPanelRef.current) === null || _filterPanelRef$curre === void 0 ? void 0 : _filterPanelRef$curre.style.setProperty('--filter-panel-min-height', rem(filterPanelMinHeight));
|
351
386
|
}, [filterPanelMinHeight]);
|
352
|
-
useEffect(function updateDisabledButtonsState() {
|
353
|
-
setShouldDisableButtons(isEqual(filtersState, JSON.parse(prevFiltersRef.current)));
|
354
|
-
}, [filtersState]);
|
355
387
|
useSubscribeToEventEmitter(CLEAR_FILTERS, reset);
|
356
388
|
var getScrollableContainerHeight = function getScrollableContainerHeight() {
|
357
389
|
var _filterHeadingRef$cur, _filterSearchRef$curr, _actionSetRef$current;
|
@@ -1,2 +1,10 @@
|
|
1
|
+
/**
|
2
|
+
* Copyright IBM Corp. 2022, 2023
|
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
|
export { default as useInitialStateFromFilters } from './useInitialStateFromFilters';
|
2
|
-
export { default as useSubscribeToEventEmitter } from './useSubscribeToEventEmitter';
|
9
|
+
export { default as useSubscribeToEventEmitter } from './useSubscribeToEventEmitter';
|
10
|
+
export { default as useShouldDisableButtons } from './useShouldDisableButtons';
|
@@ -0,0 +1,34 @@
|
|
1
|
+
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
2
|
+
/**
|
3
|
+
* Copyright IBM Corp. 2023, 2023
|
4
|
+
*
|
5
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
6
|
+
* LICENSE file in the root directory of this source tree.
|
7
|
+
*/
|
8
|
+
/* eslint-disable jsdoc/check-param-names */
|
9
|
+
|
10
|
+
import { useState, useEffect } from 'react';
|
11
|
+
import isEqual from 'lodash/isEqual';
|
12
|
+
|
13
|
+
/**
|
14
|
+
* Keeps track of the button disabled state
|
15
|
+
* @param {string} initialValue - the initial value if the buttons should be enabled or disabled
|
16
|
+
* @param {object} filtersState - the filter state from the filter panel or flyout
|
17
|
+
* @param {object} prevFiltersRef - reference of the prev filterState
|
18
|
+
* @returns {Array} returns a tuple of the state and setter function
|
19
|
+
*/
|
20
|
+
var useShouldDisableButtons = function useShouldDisableButtons(_ref) {
|
21
|
+
var _ref$initialValue = _ref.initialValue,
|
22
|
+
initialValue = _ref$initialValue === void 0 ? true : _ref$initialValue,
|
23
|
+
filtersState = _ref.filtersState,
|
24
|
+
prevFiltersRef = _ref.prevFiltersRef;
|
25
|
+
var _useState = useState(initialValue),
|
26
|
+
_useState2 = _slicedToArray(_useState, 2),
|
27
|
+
shouldDisableButtons = _useState2[0],
|
28
|
+
setShouldDisableButtons = _useState2[1];
|
29
|
+
useEffect(function updateDisabledButtonsState() {
|
30
|
+
setShouldDisableButtons(isEqual(filtersState, JSON.parse(prevFiltersRef.current)));
|
31
|
+
}, [filtersState, prevFiltersRef]);
|
32
|
+
return [shouldDisableButtons, setShouldDisableButtons];
|
33
|
+
};
|
34
|
+
export default useShouldDisableButtons;
|
@@ -140,7 +140,7 @@ export var DatagridActions = function DatagridActions(datagridState) {
|
|
140
140
|
onChange: function onChange(e) {
|
141
141
|
return setGlobalFilter(e.target.value);
|
142
142
|
}
|
143
|
-
}), renderFilterFlyout(), /*#__PURE__*/React.createElement(
|
143
|
+
}), renderFilterFlyout(), /*#__PURE__*/React.createElement("div", {
|
144
144
|
style: style
|
145
145
|
}, /*#__PURE__*/React.createElement(Button, {
|
146
146
|
kind: "ghost",
|
@@ -160,7 +160,7 @@ export var DatagridActions = function DatagridActions(datagridState) {
|
|
160
160
|
onClick: downloadCsv
|
161
161
|
})), CustomizeColumnsButton && /*#__PURE__*/React.createElement("div", {
|
162
162
|
style: style
|
163
|
-
}, /*#__PURE__*/React.createElement(CustomizeColumnsButton, null)), /*#__PURE__*/React.createElement(ButtonMenu, {
|
163
|
+
}, /*#__PURE__*/React.createElement(CustomizeColumnsButton, null)), /*#__PURE__*/React.createElement(RowSizeDropdown, rowSizeDropdownProps), /*#__PURE__*/React.createElement(ButtonMenu, {
|
164
164
|
label: "Primary button",
|
165
165
|
size: "lg",
|
166
166
|
light: true,
|
@@ -174,7 +174,7 @@ export var DatagridActions = function DatagridActions(datagridState) {
|
|
174
174
|
}), /*#__PURE__*/React.createElement(ButtonMenuItem, {
|
175
175
|
itemText: "Option 3",
|
176
176
|
onClick: action("Click on ButtonMenu Option 3")
|
177
|
-
}))) : /*#__PURE__*/React.createElement(TableToolbarContent, null,
|
177
|
+
}))) : /*#__PURE__*/React.createElement(TableToolbarContent, null, /*#__PURE__*/React.createElement(TableToolbarSearch, {
|
178
178
|
size: "xl",
|
179
179
|
id: "columnSearch",
|
180
180
|
persistent: true,
|
@@ -182,39 +182,7 @@ export var DatagridActions = function DatagridActions(datagridState) {
|
|
182
182
|
onChange: function onChange(e) {
|
183
183
|
return setGlobalFilter(e.target.value);
|
184
184
|
}
|
185
|
-
}),
|
186
|
-
style: style
|
187
|
-
}, /*#__PURE__*/React.createElement(Button, {
|
188
|
-
kind: "ghost",
|
189
|
-
hasIconOnly: true,
|
190
|
-
tooltipPosition: "bottom",
|
191
|
-
renderIcon: Restart16,
|
192
|
-
iconDescription: 'Refresh',
|
193
|
-
onClick: refreshColumns
|
194
|
-
})), /*#__PURE__*/React.createElement("div", {
|
195
|
-
style: style
|
196
|
-
}, /*#__PURE__*/React.createElement(Button, {
|
197
|
-
kind: "ghost",
|
198
|
-
hasIconOnly: true,
|
199
|
-
tooltipPosition: "bottom",
|
200
|
-
renderIcon: Download16,
|
201
|
-
iconDescription: 'Download CSV',
|
202
|
-
onClick: downloadCsv
|
203
|
-
})), CustomizeColumnsButton && /*#__PURE__*/React.createElement("div", {
|
204
|
-
style: style
|
205
|
-
}, /*#__PURE__*/React.createElement(CustomizeColumnsButton, null)), /*#__PURE__*/React.createElement(ButtonMenu, {
|
206
|
-
label: "Primary button",
|
207
|
-
renderIcon: Add16
|
208
|
-
}, /*#__PURE__*/React.createElement(ButtonMenuItem, {
|
209
|
-
itemText: "Option 1",
|
210
|
-
onClick: action("Click on ButtonMenu Option 1")
|
211
|
-
}), /*#__PURE__*/React.createElement(ButtonMenuItem, {
|
212
|
-
itemText: "Option 2",
|
213
|
-
onClick: action("Click on ButtonMenu Option 2")
|
214
|
-
}), /*#__PURE__*/React.createElement(ButtonMenuItem, {
|
215
|
-
itemText: "Option 3",
|
216
|
-
onClick: action("Click on ButtonMenu Option 3")
|
217
|
-
})), /*#__PURE__*/React.createElement(OverflowMenu, {
|
185
|
+
}), /*#__PURE__*/React.createElement(OverflowMenu, {
|
218
186
|
ariaLabel: "Tools",
|
219
187
|
size: "lg",
|
220
188
|
flipped: true,
|
@@ -71,6 +71,14 @@ var FilterFlyout = function FilterFlyout(_ref) {
|
|
71
71
|
// When using batch actions we have to store the filters to then apply them later
|
72
72
|
var prevFiltersRef = (0, _react.useRef)(JSON.stringify(filtersState));
|
73
73
|
var prevFiltersObjectArrayRef = (0, _react.useRef)(JSON.stringify(filtersObjectArray));
|
74
|
+
var _useShouldDisableButt = (0, _hooks2.useShouldDisableButtons)({
|
75
|
+
initialValue: true,
|
76
|
+
filtersState: filtersState,
|
77
|
+
prevFiltersRef: prevFiltersRef
|
78
|
+
}),
|
79
|
+
_useShouldDisableButt2 = (0, _slicedToArray2.default)(_useShouldDisableButt, 2),
|
80
|
+
shouldDisableButtons = _useShouldDisableButt2[0],
|
81
|
+
setShouldDisableButtons = _useShouldDisableButt2[1];
|
74
82
|
|
75
83
|
/** Memos */
|
76
84
|
var showActionSet = updateMethod === _constants.BATCH;
|
@@ -90,6 +98,9 @@ var FilterFlyout = function FilterFlyout(_ref) {
|
|
90
98
|
// From the user
|
91
99
|
onApply();
|
92
100
|
|
101
|
+
// When the user clicks apply, the action set buttons should be disabled again
|
102
|
+
setShouldDisableButtons(true);
|
103
|
+
|
93
104
|
// updates the ref so next time the flyout opens we have records of the previous filters
|
94
105
|
prevFiltersRef.current = JSON.stringify(filtersState);
|
95
106
|
prevFiltersObjectArrayRef.current = JSON.stringify(filtersObjectArray);
|
@@ -163,6 +174,19 @@ var FilterFlyout = function FilterFlyout(_ref) {
|
|
163
174
|
if (shouldRemoveFromArray) {
|
164
175
|
filtersObjectArrayCopy.splice(index, 1);
|
165
176
|
}
|
177
|
+
} else if (type === _constants.DROPDOWN || type === _constants.RADIO) {
|
178
|
+
if (value === 'Any') {
|
179
|
+
/**
|
180
|
+
Checks to see if the selected value is 'Any', that means the user wants
|
181
|
+
to reset specific filter
|
182
|
+
*/
|
183
|
+
var _index = filtersObjectArrayCopy.findIndex(function (filter) {
|
184
|
+
return filter.id === column;
|
185
|
+
});
|
186
|
+
|
187
|
+
// Remove it from the filters array
|
188
|
+
filtersObjectArrayCopy.splice(_index, 1);
|
189
|
+
}
|
166
190
|
}
|
167
191
|
setFiltersObjectArray(filtersObjectArrayCopy);
|
168
192
|
|
@@ -260,8 +284,9 @@ var FilterFlyout = function FilterFlyout(_ref) {
|
|
260
284
|
}));
|
261
285
|
}));
|
262
286
|
} else if (type === _constants.RADIO) {
|
287
|
+
var _filtersState$column, _filtersState$column2;
|
263
288
|
return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.FormGroup, components.FormGroup, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.RadioButtonGroup, (0, _extends2.default)({}, components.RadioButtonGroup, {
|
264
|
-
valueSelected: filtersState[column].value,
|
289
|
+
valueSelected: ((_filtersState$column = filtersState[column]) === null || _filtersState$column === void 0 ? void 0 : _filtersState$column.value) === '' ? 'Any' : (_filtersState$column2 = filtersState[column]) === null || _filtersState$column2 === void 0 ? void 0 : _filtersState$column2.value,
|
265
290
|
onChange: function onChange(selected) {
|
266
291
|
var _components$RadioButt, _components$RadioButt2;
|
267
292
|
setFiltersState(_objectSpread(_objectSpread({}, filtersState), {}, (0, _defineProperty2.default)({}, column, {
|
@@ -275,6 +300,10 @@ var FilterFlyout = function FilterFlyout(_ref) {
|
|
275
300
|
});
|
276
301
|
(_components$RadioButt = (_components$RadioButt2 = components.RadioButtonGroup).onChange) === null || _components$RadioButt === void 0 ? void 0 : _components$RadioButt.call(_components$RadioButt2, selected);
|
277
302
|
}
|
303
|
+
}), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.RadioButton, {
|
304
|
+
id: "any",
|
305
|
+
labelText: "Any",
|
306
|
+
value: "Any"
|
278
307
|
}), components.RadioButton.map(function (radio) {
|
279
308
|
var _ref4, _radio$id;
|
280
309
|
return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.RadioButton, (0, _extends2.default)({
|
@@ -283,7 +312,8 @@ var FilterFlyout = function FilterFlyout(_ref) {
|
|
283
312
|
})));
|
284
313
|
} else if (type === _constants.DROPDOWN) {
|
285
314
|
return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Dropdown, (0, _extends2.default)({}, components.Dropdown, {
|
286
|
-
selectedItem: filtersState[column].value,
|
315
|
+
selectedItem: filtersState[column].value === '' ? 'Any' : filtersState[column].value,
|
316
|
+
items: ['Any'].concat((0, _toConsumableArray2.default)(components.Dropdown.items)),
|
287
317
|
onChange: function onChange(_ref5) {
|
288
318
|
var _components$Dropdown$, _components$Dropdown;
|
289
319
|
var selectedItem = _ref5.selectedItem;
|
@@ -313,13 +343,15 @@ var FilterFlyout = function FilterFlyout(_ref) {
|
|
313
343
|
kind: 'primary',
|
314
344
|
label: primaryActionLabel,
|
315
345
|
onClick: apply,
|
316
|
-
isExpressive: false
|
346
|
+
isExpressive: false,
|
347
|
+
disabled: shouldDisableButtons
|
317
348
|
}, {
|
318
349
|
key: 3,
|
319
350
|
kind: 'secondary',
|
320
351
|
label: secondaryActionLabel,
|
321
352
|
onClick: cancel,
|
322
|
-
isExpressive: false
|
353
|
+
isExpressive: false,
|
354
|
+
disabled: shouldDisableButtons
|
323
355
|
}],
|
324
356
|
size: "md",
|
325
357
|
buttonSize: "md"
|
@@ -24,7 +24,6 @@ var _ActionSet = require("../../../../ActionSet");
|
|
24
24
|
var _ = require(".");
|
25
25
|
var _hooks = require("./hooks");
|
26
26
|
var _utils = require("./utils");
|
27
|
-
var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
|
28
27
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
29
28
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(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; }
|
30
29
|
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; }
|
@@ -34,7 +33,8 @@ var componentClass = "".concat(blockClass, "-filter-panel");
|
|
34
33
|
var MotionActionSet = (0, _framerMotion.motion)(_ActionSet.ActionSet);
|
35
34
|
var FilterPanel = function FilterPanel(_ref) {
|
36
35
|
var _cx;
|
37
|
-
var title = _ref.title,
|
36
|
+
var _ref$title = _ref.title,
|
37
|
+
title = _ref$title === void 0 ? 'Filter' : _ref$title,
|
38
38
|
_ref$closeIconDescrip = _ref.closeIconDescription,
|
39
39
|
closeIconDescription = _ref$closeIconDescrip === void 0 ? 'Close filter panel' : _ref$closeIconDescrip,
|
40
40
|
_ref$updateMethod = _ref.updateMethod,
|
@@ -62,14 +62,10 @@ var FilterPanel = function FilterPanel(_ref) {
|
|
62
62
|
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
63
63
|
filtersObjectArray = _useState2[0],
|
64
64
|
setFiltersObjectArray = _useState2[1];
|
65
|
-
var _useState3 = (0, _react.useState)(
|
65
|
+
var _useState3 = (0, _react.useState)(false),
|
66
66
|
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
|
67
|
-
|
68
|
-
|
69
|
-
var _useState5 = (0, _react.useState)(false),
|
70
|
-
_useState6 = (0, _slicedToArray2.default)(_useState5, 2),
|
71
|
-
showDividerLine = _useState6[0],
|
72
|
-
setShowDividerLine = _useState6[1];
|
67
|
+
showDividerLine = _useState4[0],
|
68
|
+
setShowDividerLine = _useState4[1];
|
73
69
|
|
74
70
|
/** Refs */
|
75
71
|
var filterPanelRef = (0, _react.useRef)();
|
@@ -80,6 +76,16 @@ var FilterPanel = function FilterPanel(_ref) {
|
|
80
76
|
var prevFiltersRef = (0, _react.useRef)(JSON.stringify(filtersState));
|
81
77
|
var prevFiltersObjectArrayRef = (0, _react.useRef)(JSON.stringify(filtersObjectArray));
|
82
78
|
|
79
|
+
/** State from hooks */
|
80
|
+
var _useShouldDisableButt = (0, _hooks.useShouldDisableButtons)({
|
81
|
+
initialValue: true,
|
82
|
+
filtersState: filtersState,
|
83
|
+
prevFiltersRef: prevFiltersRef
|
84
|
+
}),
|
85
|
+
_useShouldDisableButt2 = (0, _slicedToArray2.default)(_useShouldDisableButt, 2),
|
86
|
+
shouldDisableButtons = _useShouldDisableButt2[0],
|
87
|
+
setShouldDisableButtons = _useShouldDisableButt2[1];
|
88
|
+
|
83
89
|
/** Memos */
|
84
90
|
var showActionSet = (0, _react.useMemo)(function () {
|
85
91
|
return updateMethod === _constants.BATCH;
|
@@ -124,7 +130,11 @@ var FilterPanel = function FilterPanel(_ref) {
|
|
124
130
|
};
|
125
131
|
var apply = function apply() {
|
126
132
|
setAllFilters(filtersObjectArray);
|
133
|
+
|
134
|
+
// From the user
|
127
135
|
onApply();
|
136
|
+
|
137
|
+
// When the user clicks apply, the action set buttons should be disabled again
|
128
138
|
setShouldDisableButtons(true);
|
129
139
|
|
130
140
|
// updates the ref so next time the flyout opens we have records of the previous filters
|
@@ -186,6 +196,19 @@ var FilterPanel = function FilterPanel(_ref) {
|
|
186
196
|
// Remove it from the filters array since there is nothing to filter
|
187
197
|
filtersObjectArrayCopy.splice(_index, 1);
|
188
198
|
}
|
199
|
+
} else if (type === _constants.DROPDOWN || type === _constants.RADIO) {
|
200
|
+
if (value === 'Any') {
|
201
|
+
/**
|
202
|
+
Checks to see if the selected value is 'Any', that means the user wants
|
203
|
+
to reset specific filter
|
204
|
+
*/
|
205
|
+
var _index2 = filtersObjectArrayCopy.findIndex(function (filter) {
|
206
|
+
return filter.id === column;
|
207
|
+
});
|
208
|
+
|
209
|
+
// Remove it from the filters array
|
210
|
+
filtersObjectArrayCopy.splice(_index2, 1);
|
211
|
+
}
|
189
212
|
}
|
190
213
|
setFiltersObjectArray(filtersObjectArrayCopy);
|
191
214
|
|
@@ -197,6 +220,7 @@ var FilterPanel = function FilterPanel(_ref) {
|
|
197
220
|
|
198
221
|
/** Render the individual filter component */
|
199
222
|
var renderFilter = function renderFilter(_ref3) {
|
223
|
+
var _filtersState$column, _filtersState$column2;
|
200
224
|
var type = _ref3.type,
|
201
225
|
column = _ref3.column,
|
202
226
|
components = _ref3.props;
|
@@ -276,7 +300,7 @@ var FilterPanel = function FilterPanel(_ref) {
|
|
276
300
|
}));
|
277
301
|
case _constants.RADIO:
|
278
302
|
return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.FormGroup, components.FormGroup, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.RadioButtonGroup, (0, _extends2.default)({}, components.RadioButtonGroup, {
|
279
|
-
valueSelected: filtersState[column].value,
|
303
|
+
valueSelected: ((_filtersState$column = filtersState[column]) === null || _filtersState$column === void 0 ? void 0 : _filtersState$column.value) === '' ? 'Any' : (_filtersState$column2 = filtersState[column]) === null || _filtersState$column2 === void 0 ? void 0 : _filtersState$column2.value,
|
280
304
|
onChange: function onChange(selected) {
|
281
305
|
var _components$RadioButt, _components$RadioButt2;
|
282
306
|
setFiltersState(_objectSpread(_objectSpread({}, filtersState), {}, (0, _defineProperty2.default)({}, column, {
|
@@ -290,6 +314,10 @@ var FilterPanel = function FilterPanel(_ref) {
|
|
290
314
|
});
|
291
315
|
(_components$RadioButt = (_components$RadioButt2 = components.RadioButtonGroup).onChange) === null || _components$RadioButt === void 0 ? void 0 : _components$RadioButt.call(_components$RadioButt2, selected);
|
292
316
|
}
|
317
|
+
}), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.RadioButton, {
|
318
|
+
id: "any",
|
319
|
+
labelText: "Any",
|
320
|
+
value: "Any"
|
293
321
|
}), components.RadioButton.map(function (radio) {
|
294
322
|
var _ref4, _radio$id;
|
295
323
|
return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.RadioButton, (0, _extends2.default)({
|
@@ -298,7 +326,8 @@ var FilterPanel = function FilterPanel(_ref) {
|
|
298
326
|
})));
|
299
327
|
case _constants.DROPDOWN:
|
300
328
|
return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Dropdown, (0, _extends2.default)({}, components.Dropdown, {
|
301
|
-
|
329
|
+
items: ['Any'].concat((0, _toConsumableArray2.default)(components.Dropdown.items)),
|
330
|
+
selectedItem: filtersState[column].value === '' ? 'Any' : filtersState[column].value,
|
302
331
|
onChange: function onChange(_ref5) {
|
303
332
|
var _components$Dropdown$, _components$Dropdown;
|
304
333
|
var selectedItem = _ref5.selectedItem;
|
@@ -357,9 +386,6 @@ var FilterPanel = function FilterPanel(_ref) {
|
|
357
386
|
var _filterPanelRef$curre;
|
358
387
|
(_filterPanelRef$curre = filterPanelRef.current) === null || _filterPanelRef$curre === void 0 ? void 0 : _filterPanelRef$curre.style.setProperty('--filter-panel-min-height', (0, _layout.rem)(filterPanelMinHeight));
|
359
388
|
}, [filterPanelMinHeight]);
|
360
|
-
(0, _react.useEffect)(function updateDisabledButtonsState() {
|
361
|
-
setShouldDisableButtons((0, _isEqual.default)(filtersState, JSON.parse(prevFiltersRef.current)));
|
362
|
-
}, [filtersState]);
|
363
389
|
(0, _hooks.useSubscribeToEventEmitter)(_constants.CLEAR_FILTERS, reset);
|
364
390
|
var getScrollableContainerHeight = function getScrollableContainerHeight() {
|
365
391
|
var _filterHeadingRef$cur, _filterSearchRef$curr, _actionSetRef$current;
|
@@ -10,6 +10,12 @@ Object.defineProperty(exports, "useInitialStateFromFilters", {
|
|
10
10
|
return _useInitialStateFromFilters.default;
|
11
11
|
}
|
12
12
|
});
|
13
|
+
Object.defineProperty(exports, "useShouldDisableButtons", {
|
14
|
+
enumerable: true,
|
15
|
+
get: function get() {
|
16
|
+
return _useShouldDisableButtons.default;
|
17
|
+
}
|
18
|
+
});
|
13
19
|
Object.defineProperty(exports, "useSubscribeToEventEmitter", {
|
14
20
|
enumerable: true,
|
15
21
|
get: function get() {
|
@@ -17,4 +23,5 @@ Object.defineProperty(exports, "useSubscribeToEventEmitter", {
|
|
17
23
|
}
|
18
24
|
});
|
19
25
|
var _useInitialStateFromFilters = _interopRequireDefault(require("./useInitialStateFromFilters"));
|
20
|
-
var _useSubscribeToEventEmitter = _interopRequireDefault(require("./useSubscribeToEventEmitter"));
|
26
|
+
var _useSubscribeToEventEmitter = _interopRequireDefault(require("./useSubscribeToEventEmitter"));
|
27
|
+
var _useShouldDisableButtons = _interopRequireDefault(require("./useShouldDisableButtons"));
|