@carbon/ibm-products 2.0.0-rc.20 → 2.0.0-rc.21
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/README.md +17 -0
- package/css/index-full-carbon.css +12 -6
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +4 -2
- package/css/index-full-carbon.min.css.map +1 -1
- package/css/index-without-carbon.css +12 -6
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +4 -2
- package/css/index-without-carbon.min.css.map +1 -1
- package/css/index.css +12 -6
- package/css/index.css.map +1 -1
- package/css/index.min.css +4 -2
- package/css/index.min.css.map +1 -1
- package/es/components/Datagrid/Datagrid/DatagridContent.js +2 -2
- package/es/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +19 -247
- package/es/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +41 -285
- package/es/components/Datagrid/Datagrid/addons/Filtering/FilterProvider.js +4 -4
- package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/index.js +1 -0
- package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +310 -0
- package/es/components/Datagrid/Datagrid/addons/Filtering/utils.js +6 -6
- package/es/components/Datagrid/utils/DatagridActions.js +2 -2
- package/lib/components/Datagrid/Datagrid/DatagridContent.js +2 -2
- package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +22 -243
- package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +47 -284
- package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterProvider.js +4 -4
- package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/index.js +8 -0
- package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +325 -0
- package/lib/components/Datagrid/Datagrid/addons/Filtering/utils.js +5 -5
- package/lib/components/Datagrid/utils/DatagridActions.js +2 -2
- package/package.json +2 -2
- package/scss/components/Datagrid/styles/_datagrid.scss +2 -4
- package/scss/components/OptionsTile/_options-tile.scss +10 -3
@@ -9,12 +9,8 @@ Object.defineProperty(exports, "__esModule", {
|
|
9
9
|
});
|
10
10
|
exports.default = void 0;
|
11
11
|
|
12
|
-
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
13
|
-
|
14
12
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
15
13
|
|
16
|
-
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
17
|
-
|
18
14
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
19
15
|
|
20
16
|
var _icons = require("@carbon/react/icons");
|
@@ -37,16 +33,18 @@ var _constants = require("./constants");
|
|
37
33
|
|
38
34
|
var _hooks2 = require("./hooks");
|
39
35
|
|
40
|
-
var _utils = require("./utils");
|
41
|
-
|
42
36
|
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); }
|
43
37
|
|
44
38
|
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; }
|
45
39
|
|
46
|
-
|
47
|
-
|
48
|
-
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) { (0, _defineProperty2.default)(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; }
|
40
|
+
// @flow
|
49
41
|
|
42
|
+
/**
|
43
|
+
* Copyright IBM Corp. 2022, 2023
|
44
|
+
*
|
45
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
46
|
+
* LICENSE file in the root directory of this source tree.
|
47
|
+
*/
|
50
48
|
var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
|
51
49
|
var componentClass = "".concat(blockClass, "-filter-flyout");
|
52
50
|
|
@@ -83,22 +81,23 @@ var FilterFlyout = function FilterFlyout(_ref) {
|
|
83
81
|
open = _useState2[0],
|
84
82
|
setOpen = _useState2[1];
|
85
83
|
|
86
|
-
var
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
|
92
|
-
|
93
|
-
|
94
|
-
|
84
|
+
var _useFilters = (0, _hooks2.useFilters)({
|
85
|
+
updateMethod: updateMethod,
|
86
|
+
filters: filters,
|
87
|
+
setAllFilters: setAllFilters,
|
88
|
+
variation: _constants.FLYOUT
|
89
|
+
}),
|
90
|
+
filtersState = _useFilters.filtersState,
|
91
|
+
prevFiltersObjectArrayRef = _useFilters.prevFiltersObjectArrayRef,
|
92
|
+
prevFiltersRef = _useFilters.prevFiltersRef,
|
93
|
+
revertToPreviousFilters = _useFilters.revertToPreviousFilters,
|
94
|
+
reset = _useFilters.reset,
|
95
|
+
renderFilter = _useFilters.renderFilter,
|
96
|
+
filtersObjectArray = _useFilters.filtersObjectArray;
|
95
97
|
/** Refs */
|
96
98
|
|
97
99
|
|
98
|
-
var filterFlyoutRef = (0, _react2.useRef)(null);
|
99
|
-
|
100
|
-
var prevFiltersRef = (0, _react2.useRef)(JSON.stringify(filtersState));
|
101
|
-
var prevFiltersObjectArrayRef = (0, _react2.useRef)(JSON.stringify(filtersObjectArray));
|
100
|
+
var filterFlyoutRef = (0, _react2.useRef)(null);
|
102
101
|
/** State from hooks */
|
103
102
|
|
104
103
|
var _useShouldDisableButt = (0, _hooks2.useShouldDisableButtons)({
|
@@ -147,92 +146,9 @@ var FilterFlyout = function FilterFlyout(_ref) {
|
|
147
146
|
|
148
147
|
closeFlyout();
|
149
148
|
};
|
150
|
-
|
151
|
-
var reset = function reset() {
|
152
|
-
// Get the initial values for the filters
|
153
|
-
var initialFiltersState = (0, _utils.getInitialStateFromFilters)(filters, _constants.FLYOUT);
|
154
|
-
var initialFiltersObjectArray = []; // Set the state to the initial values
|
155
|
-
|
156
|
-
setFiltersState(initialFiltersState);
|
157
|
-
setFiltersObjectArray(initialFiltersObjectArray);
|
158
|
-
setAllFilters([]); // Update their respective refs so everything is in sync
|
159
|
-
|
160
|
-
prevFiltersRef.current = JSON.stringify(initialFiltersState);
|
161
|
-
prevFiltersObjectArrayRef.current = JSON.stringify(initialFiltersObjectArray);
|
162
|
-
}; // If the user decides to cancel or click outside the flyout, it reverts back to the filters that were
|
163
|
-
// there when they opened the flyout
|
164
|
-
|
165
|
-
|
166
|
-
var revertToPreviousFilters = function revertToPreviousFilters() {
|
167
|
-
setFiltersState(JSON.parse(prevFiltersRef.current));
|
168
|
-
setFiltersObjectArray(JSON.parse(prevFiltersObjectArrayRef.current));
|
169
|
-
};
|
170
|
-
|
171
|
-
var applyFilters = (0, _react2.useCallback)(function (_ref2) {
|
172
|
-
var column = _ref2.column,
|
173
|
-
value = _ref2.value,
|
174
|
-
type = _ref2.type;
|
175
|
-
|
176
|
-
// If no end date is selected return because we need the end date to do computations
|
177
|
-
if (type === _constants.DATE && !value[1]) {
|
178
|
-
return;
|
179
|
-
}
|
180
|
-
|
181
|
-
var filtersObjectArrayCopy = (0, _toConsumableArray2.default)(filtersObjectArray); // check if the filter already exists in the array
|
182
|
-
|
183
|
-
var filter = filtersObjectArrayCopy.find(function (item) {
|
184
|
-
return item.id === column;
|
185
|
-
}); // if filter exists in array then update the filter's new value
|
186
|
-
|
187
|
-
if (filter) {
|
188
|
-
filter.value = value;
|
189
|
-
} else {
|
190
|
-
filtersObjectArrayCopy.push({
|
191
|
-
id: column,
|
192
|
-
value: value,
|
193
|
-
type: type
|
194
|
-
});
|
195
|
-
}
|
196
|
-
|
197
|
-
if (type === _constants.CHECKBOX) {
|
198
|
-
/**
|
199
|
-
When all checkboxes of a group are all unselected the value still exists in the filtersObjectArray
|
200
|
-
This checks if all the checkboxes are selected = false and removes it from the array
|
201
|
-
*/
|
202
|
-
var index = filtersObjectArrayCopy.findIndex(function (filter) {
|
203
|
-
return filter.id === column;
|
204
|
-
}); // If all the selected state is false remove from array
|
205
|
-
|
206
|
-
var shouldRemoveFromArray = filtersObjectArrayCopy[index].value.every(function (val) {
|
207
|
-
return val.selected === false;
|
208
|
-
});
|
209
|
-
|
210
|
-
if (shouldRemoveFromArray) {
|
211
|
-
filtersObjectArrayCopy.splice(index, 1);
|
212
|
-
}
|
213
|
-
} else if (type === _constants.DROPDOWN || type === _constants.RADIO) {
|
214
|
-
if (value === 'Any') {
|
215
|
-
/**
|
216
|
-
Checks to see if the selected value is 'Any', that means the user wants
|
217
|
-
to reset specific filter
|
218
|
-
*/
|
219
|
-
var _index = filtersObjectArrayCopy.findIndex(function (filter) {
|
220
|
-
return filter.id === column;
|
221
|
-
}); // Remove it from the filters array
|
222
|
-
|
223
|
-
|
224
|
-
filtersObjectArrayCopy.splice(_index, 1);
|
225
|
-
}
|
226
|
-
}
|
227
|
-
|
228
|
-
setFiltersObjectArray(filtersObjectArrayCopy); // Automatically apply the filters if the updateMethod is instant
|
229
|
-
|
230
|
-
if (updateMethod === _constants.INSTANT) {
|
231
|
-
setAllFilters(filtersObjectArrayCopy);
|
232
|
-
}
|
233
|
-
}, [setAllFilters, updateMethod, filtersObjectArray]);
|
234
149
|
/** Effects */
|
235
150
|
|
151
|
+
|
236
152
|
(0, _hooks.useClickOutside)(filterFlyoutRef, function (target) {
|
237
153
|
var hasClickedOnDatePicker = target.closest('.flatpickr-calendar');
|
238
154
|
var hasClickedOnDropdown = target.className === "".concat(carbonPrefix, "--list-box__menu-item__option");
|
@@ -244,145 +160,8 @@ var FilterFlyout = function FilterFlyout(_ref) {
|
|
244
160
|
cancel();
|
245
161
|
});
|
246
162
|
(0, _hooks2.useSubscribeToEventEmitter)(_constants.CLEAR_FILTERS, reset);
|
247
|
-
/** Render the individual filter component */
|
248
|
-
|
249
|
-
var renderFilter = function renderFilter(_ref3) {
|
250
|
-
var type = _ref3.type,
|
251
|
-
column = _ref3.column,
|
252
|
-
components = _ref3.props;
|
253
|
-
|
254
|
-
if (type === _constants.DATE) {
|
255
|
-
return /*#__PURE__*/_react2.default.createElement(_react.DatePicker, (0, _extends2.default)({}, components.DatePicker, {
|
256
|
-
onChange: function onChange(value) {
|
257
|
-
var _components$DatePicke, _components$DatePicke2;
|
258
|
-
|
259
|
-
setFiltersState(_objectSpread(_objectSpread({}, filtersState), {}, (0, _defineProperty2.default)({}, column, {
|
260
|
-
value: value,
|
261
|
-
type: type
|
262
|
-
})));
|
263
|
-
applyFilters({
|
264
|
-
column: column,
|
265
|
-
value: value,
|
266
|
-
type: type
|
267
|
-
});
|
268
|
-
(_components$DatePicke = (_components$DatePicke2 = components.DatePicker).onChange) === null || _components$DatePicke === void 0 ? void 0 : _components$DatePicke.call(_components$DatePicke2, value);
|
269
|
-
},
|
270
|
-
value: filtersState[column].value,
|
271
|
-
datePickerType: "range"
|
272
|
-
}), /*#__PURE__*/_react2.default.createElement(_react.DatePickerInput, (0, _extends2.default)({
|
273
|
-
placeholder: "mm/dd/yyyy",
|
274
|
-
labelText: "Start date"
|
275
|
-
}, components.DatePickerInput.start)), /*#__PURE__*/_react2.default.createElement(_react.DatePickerInput, (0, _extends2.default)({
|
276
|
-
placeholder: "mm/dd/yyyy",
|
277
|
-
labelText: "End date"
|
278
|
-
}, components.DatePickerInput.end)));
|
279
|
-
} else if (type === _constants.NUMBER) {
|
280
|
-
return /*#__PURE__*/_react2.default.createElement(_react.NumberInput, (0, _extends2.default)({
|
281
|
-
step: 1,
|
282
|
-
allowEmpty: true,
|
283
|
-
hideSteppers: true
|
284
|
-
}, components.NumberInput, {
|
285
|
-
onChange: function onChange(event) {
|
286
|
-
var _components$NumberInp, _components$NumberInp2;
|
287
|
-
|
288
|
-
setFiltersState(_objectSpread(_objectSpread({}, filtersState), {}, (0, _defineProperty2.default)({}, column, {
|
289
|
-
value: event.target.value,
|
290
|
-
type: type
|
291
|
-
})));
|
292
|
-
applyFilters({
|
293
|
-
column: column,
|
294
|
-
value: event.target.value,
|
295
|
-
type: type
|
296
|
-
});
|
297
|
-
(_components$NumberInp = (_components$NumberInp2 = components.NumberInput).onChange) === null || _components$NumberInp === void 0 ? void 0 : _components$NumberInp.call(_components$NumberInp2, event);
|
298
|
-
},
|
299
|
-
value: filtersState[column].value
|
300
|
-
}));
|
301
|
-
} else if (type === _constants.CHECKBOX) {
|
302
|
-
return /*#__PURE__*/_react2.default.createElement(_react.FormGroup, components.FormGroup, filtersState[column].value.map(function (option) {
|
303
|
-
return /*#__PURE__*/_react2.default.createElement(_react.Checkbox, (0, _extends2.default)({
|
304
|
-
key: option.labelText
|
305
|
-
}, option, {
|
306
|
-
onChange: function onChange(_, _ref4) {
|
307
|
-
var _option$onChange;
|
308
|
-
|
309
|
-
var isSelected = _ref4.checked;
|
310
|
-
var checkboxCopy = filtersState[column].value;
|
311
|
-
var foundCheckbox = checkboxCopy.find(function (checkbox) {
|
312
|
-
return checkbox.value === option.value;
|
313
|
-
});
|
314
|
-
foundCheckbox.selected = isSelected;
|
315
|
-
setFiltersState(_objectSpread(_objectSpread({}, filtersState), {}, (0, _defineProperty2.default)({}, column, {
|
316
|
-
value: checkboxCopy,
|
317
|
-
type: type
|
318
|
-
})));
|
319
|
-
applyFilters({
|
320
|
-
column: column,
|
321
|
-
value: (0, _toConsumableArray2.default)(filtersState[column].value),
|
322
|
-
type: type
|
323
|
-
});
|
324
|
-
(_option$onChange = option.onChange) === null || _option$onChange === void 0 ? void 0 : _option$onChange.call(option, isSelected);
|
325
|
-
},
|
326
|
-
checked: option.selected
|
327
|
-
}));
|
328
|
-
}));
|
329
|
-
} else if (type === _constants.RADIO) {
|
330
|
-
var _filtersState$column, _filtersState$column2;
|
331
|
-
|
332
|
-
return /*#__PURE__*/_react2.default.createElement(_react.FormGroup, components.FormGroup, /*#__PURE__*/_react2.default.createElement(_react.RadioButtonGroup, (0, _extends2.default)({}, components.RadioButtonGroup, {
|
333
|
-
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,
|
334
|
-
onChange: function onChange(selected) {
|
335
|
-
var _components$RadioButt, _components$RadioButt2;
|
336
|
-
|
337
|
-
setFiltersState(_objectSpread(_objectSpread({}, filtersState), {}, (0, _defineProperty2.default)({}, column, {
|
338
|
-
value: selected,
|
339
|
-
type: type
|
340
|
-
})));
|
341
|
-
applyFilters({
|
342
|
-
column: column,
|
343
|
-
value: selected,
|
344
|
-
type: type
|
345
|
-
});
|
346
|
-
(_components$RadioButt = (_components$RadioButt2 = components.RadioButtonGroup).onChange) === null || _components$RadioButt === void 0 ? void 0 : _components$RadioButt.call(_components$RadioButt2, selected);
|
347
|
-
}
|
348
|
-
}), /*#__PURE__*/_react2.default.createElement(_react.RadioButton, {
|
349
|
-
id: "any",
|
350
|
-
labelText: "Any",
|
351
|
-
value: "Any"
|
352
|
-
}), components.RadioButton.map(function (radio) {
|
353
|
-
var _ref5, _radio$id;
|
354
|
-
|
355
|
-
return /*#__PURE__*/_react2.default.createElement(_react.RadioButton, (0, _extends2.default)({
|
356
|
-
key: (_ref5 = (_radio$id = radio.id) !== null && _radio$id !== void 0 ? _radio$id : radio.labelText) !== null && _ref5 !== void 0 ? _ref5 : radio.value
|
357
|
-
}, radio));
|
358
|
-
})));
|
359
|
-
} else if (type === _constants.DROPDOWN) {
|
360
|
-
var _filtersState$column3, _filtersState$column4;
|
361
|
-
|
362
|
-
return /*#__PURE__*/_react2.default.createElement(_react.Dropdown, (0, _extends2.default)({}, components.Dropdown, {
|
363
|
-
selectedItem: ((_filtersState$column3 = filtersState[column]) === null || _filtersState$column3 === void 0 ? void 0 : _filtersState$column3.value) === '' ? 'Any' : (_filtersState$column4 = filtersState[column]) === null || _filtersState$column4 === void 0 ? void 0 : _filtersState$column4.value,
|
364
|
-
items: ['Any'].concat((0, _toConsumableArray2.default)(components.Dropdown.items)),
|
365
|
-
onChange: function onChange(_ref6) {
|
366
|
-
var _components$Dropdown$, _components$Dropdown;
|
367
|
-
|
368
|
-
var selectedItem = _ref6.selectedItem;
|
369
|
-
setFiltersState(_objectSpread(_objectSpread({}, filtersState), {}, (0, _defineProperty2.default)({}, column, {
|
370
|
-
value: selectedItem,
|
371
|
-
type: type
|
372
|
-
})));
|
373
|
-
applyFilters({
|
374
|
-
column: column,
|
375
|
-
value: selectedItem,
|
376
|
-
type: type
|
377
|
-
});
|
378
|
-
(_components$Dropdown$ = (_components$Dropdown = components.Dropdown).onChange) === null || _components$Dropdown$ === void 0 ? void 0 : _components$Dropdown$.call(_components$Dropdown, selectedItem);
|
379
|
-
}
|
380
|
-
}));
|
381
|
-
}
|
382
|
-
};
|
383
163
|
/** Renders all filters */
|
384
164
|
|
385
|
-
|
386
165
|
var renderFilters = function renderFilters() {
|
387
166
|
return filters.map(renderFilter);
|
388
167
|
};
|