@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.
Files changed (32) hide show
  1. package/README.md +17 -0
  2. package/css/index-full-carbon.css +12 -6
  3. package/css/index-full-carbon.css.map +1 -1
  4. package/css/index-full-carbon.min.css +4 -2
  5. package/css/index-full-carbon.min.css.map +1 -1
  6. package/css/index-without-carbon.css +12 -6
  7. package/css/index-without-carbon.css.map +1 -1
  8. package/css/index-without-carbon.min.css +4 -2
  9. package/css/index-without-carbon.min.css.map +1 -1
  10. package/css/index.css +12 -6
  11. package/css/index.css.map +1 -1
  12. package/css/index.min.css +4 -2
  13. package/css/index.min.css.map +1 -1
  14. package/es/components/Datagrid/Datagrid/DatagridContent.js +2 -2
  15. package/es/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +19 -247
  16. package/es/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +41 -285
  17. package/es/components/Datagrid/Datagrid/addons/Filtering/FilterProvider.js +4 -4
  18. package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/index.js +1 -0
  19. package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +310 -0
  20. package/es/components/Datagrid/Datagrid/addons/Filtering/utils.js +6 -6
  21. package/es/components/Datagrid/utils/DatagridActions.js +2 -2
  22. package/lib/components/Datagrid/Datagrid/DatagridContent.js +2 -2
  23. package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +22 -243
  24. package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +47 -284
  25. package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterProvider.js +4 -4
  26. package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/index.js +8 -0
  27. package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +325 -0
  28. package/lib/components/Datagrid/Datagrid/addons/Filtering/utils.js +5 -5
  29. package/lib/components/Datagrid/utils/DatagridActions.js +2 -2
  30. package/package.json +2 -2
  31. package/scss/components/Datagrid/styles/_datagrid.scss +2 -4
  32. 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
- 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; }
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 _useInitialStateFromF = (0, _hooks2.useInitialStateFromFilters)(filters, _constants.FLYOUT),
87
- _useInitialStateFromF2 = (0, _slicedToArray2.default)(_useInitialStateFromF, 2),
88
- filtersState = _useInitialStateFromF2[0],
89
- setFiltersState = _useInitialStateFromF2[1];
90
-
91
- var _useState3 = (0, _react2.useState)([]),
92
- _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
93
- filtersObjectArray = _useState4[0],
94
- setFiltersObjectArray = _useState4[1];
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); // When using batch actions we have to store the filters to then apply them later
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
  };