@carbon/ibm-products 1.45.0 → 1.46.1
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 +38 -21
- 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 +38 -21
- 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 +38 -21
- 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 +18 -228
- package/es/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +39 -268
- package/es/components/Datagrid/Datagrid/addons/Filtering/FilterProvider.js +4 -4
- package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/index.js +2 -1
- package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +276 -0
- package/es/components/Datagrid/Datagrid/addons/Filtering/utils.js +6 -6
- package/es/components/Datagrid/useSortableColumns.js +16 -10
- 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 -224
- package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +44 -265
- package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterProvider.js +4 -4
- package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/index.js +8 -1
- package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +280 -0
- package/lib/components/Datagrid/Datagrid/addons/Filtering/utils.js +5 -5
- package/lib/components/Datagrid/useSortableColumns.js +9 -3
- package/lib/components/Datagrid/utils/DatagridActions.js +2 -2
- package/package.json +8 -8
- package/scss/components/Datagrid/styles/_datagrid.scss +2 -4
- package/scss/components/Datagrid/styles/_useSortableColumns.scss +33 -17
- package/scss/components/OptionsTile/_options-tile.scss +8 -1
@@ -1,9 +1,5 @@
|
|
1
|
-
import _extends from "@babel/runtime/helpers/extends";
|
2
1
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
3
|
-
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
|
4
2
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
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
|
-
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
3
|
/* eslint-disable react/jsx-key */
|
8
4
|
/**
|
9
5
|
* Copyright IBM Corp. 2022, 2023
|
@@ -14,18 +10,17 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
|
|
14
10
|
|
15
11
|
import React, { useRef, useMemo, useContext, useState, useEffect } from 'react';
|
16
12
|
import PropTypes from 'prop-types';
|
17
|
-
import { Accordion, AccordionItem, Button, Search
|
13
|
+
import { Accordion, AccordionItem, Button, Search } from 'carbon-components-react';
|
18
14
|
import { rem } from '@carbon/layout';
|
19
15
|
import { pkg } from '../../../../../settings';
|
20
|
-
import { BATCH,
|
16
|
+
import { BATCH, CLEAR_FILTERS, INSTANT, PANEL } from './constants';
|
21
17
|
import cx from 'classnames';
|
22
18
|
import { motion } from 'framer-motion';
|
23
19
|
import { panelVariants, innerContainerVariants, actionSetVariants } from './motion/variants';
|
24
20
|
import { Close32 } from '@carbon/icons-react';
|
25
21
|
import { ActionSet } from '../../../../ActionSet';
|
26
22
|
import { FilterContext } from '.';
|
27
|
-
import {
|
28
|
-
import { getInitialStateFromFilters } from './utils';
|
23
|
+
import { useFilters, useSubscribeToEventEmitter, useShouldDisableButtons } from './hooks';
|
29
24
|
var blockClass = "".concat(pkg.prefix, "--datagrid");
|
30
25
|
var componentClass = "".concat(blockClass, "-filter-panel");
|
31
26
|
var MotionActionSet = motion(ActionSet);
|
@@ -52,27 +47,29 @@ var FilterPanel = function FilterPanel(_ref) {
|
|
52
47
|
_ref$filterPanelMinHe = _ref.filterPanelMinHeight,
|
53
48
|
filterPanelMinHeight = _ref$filterPanelMinHe === void 0 ? 600 : _ref$filterPanelMinHe;
|
54
49
|
/** State */
|
55
|
-
var
|
56
|
-
_useInitialStateFromF2 = _slicedToArray(_useInitialStateFromF, 2),
|
57
|
-
filtersState = _useInitialStateFromF2[0],
|
58
|
-
setFiltersState = _useInitialStateFromF2[1];
|
59
|
-
var _useState = useState([]),
|
50
|
+
var _useState = useState(false),
|
60
51
|
_useState2 = _slicedToArray(_useState, 2),
|
61
|
-
|
62
|
-
|
63
|
-
var
|
64
|
-
|
65
|
-
|
66
|
-
|
52
|
+
showDividerLine = _useState2[0],
|
53
|
+
setShowDividerLine = _useState2[1];
|
54
|
+
var _useFilters = useFilters({
|
55
|
+
updateMethod: updateMethod,
|
56
|
+
filters: filterSections,
|
57
|
+
setAllFilters: setAllFilters,
|
58
|
+
variation: PANEL
|
59
|
+
}),
|
60
|
+
filtersState = _useFilters.filtersState,
|
61
|
+
prevFiltersObjectArrayRef = _useFilters.prevFiltersObjectArrayRef,
|
62
|
+
prevFiltersRef = _useFilters.prevFiltersRef,
|
63
|
+
revertToPreviousFilters = _useFilters.revertToPreviousFilters,
|
64
|
+
reset = _useFilters.reset,
|
65
|
+
renderFilter = _useFilters.renderFilter,
|
66
|
+
filtersObjectArray = _useFilters.filtersObjectArray;
|
67
67
|
|
68
68
|
/** Refs */
|
69
69
|
var filterPanelRef = useRef();
|
70
70
|
var filterHeadingRef = useRef();
|
71
71
|
var filterSearchRef = useRef();
|
72
72
|
var actionSetRef = useRef();
|
73
|
-
// When using batch actions we have to store the filters to then apply them later
|
74
|
-
var prevFiltersRef = useRef(JSON.stringify(filtersState));
|
75
|
-
var prevFiltersObjectArrayRef = useRef(JSON.stringify(filtersObjectArray));
|
76
73
|
|
77
74
|
/** State from hooks */
|
78
75
|
var _useShouldDisableButt = useShouldDisableButtons({
|
@@ -91,19 +88,12 @@ var FilterPanel = function FilterPanel(_ref) {
|
|
91
88
|
|
92
89
|
/** Context */
|
93
90
|
var _useContext = useContext(FilterContext),
|
94
|
-
|
95
|
-
|
91
|
+
panelOpen = _useContext.panelOpen,
|
92
|
+
setPanelOpen = _useContext.setPanelOpen;
|
96
93
|
|
97
94
|
/** Methods */
|
98
95
|
var closePanel = function closePanel() {
|
99
|
-
return
|
100
|
-
};
|
101
|
-
|
102
|
-
// If the user decides to cancel or click outside the flyout, it reverts back to the filters that were
|
103
|
-
// there when they opened the flyout
|
104
|
-
var revertToPreviousFilters = function revertToPreviousFilters() {
|
105
|
-
setFiltersState(JSON.parse(prevFiltersRef.current));
|
106
|
-
setFiltersObjectArray(JSON.parse(prevFiltersObjectArrayRef.current));
|
96
|
+
return setPanelOpen(false);
|
107
97
|
};
|
108
98
|
var cancel = function cancel() {
|
109
99
|
// Reverting to previous filters only applies when using batch actions
|
@@ -112,20 +102,6 @@ var FilterPanel = function FilterPanel(_ref) {
|
|
112
102
|
onCancel();
|
113
103
|
}
|
114
104
|
};
|
115
|
-
var reset = function reset() {
|
116
|
-
// Get the initial values for the filters
|
117
|
-
var initialFiltersState = getInitialStateFromFilters(filterSections, PANEL);
|
118
|
-
var initialFiltersObjectArray = [];
|
119
|
-
|
120
|
-
// Set the state to the initial values
|
121
|
-
setFiltersState(initialFiltersState);
|
122
|
-
setFiltersObjectArray(initialFiltersObjectArray);
|
123
|
-
setAllFilters([]);
|
124
|
-
|
125
|
-
// Update their respective refs so everything is in sync
|
126
|
-
prevFiltersRef.current = JSON.stringify(initialFiltersState);
|
127
|
-
prevFiltersObjectArrayRef.current = JSON.stringify(initialFiltersObjectArray);
|
128
|
-
};
|
129
105
|
var apply = function apply() {
|
130
106
|
setAllFilters(filtersObjectArray);
|
131
107
|
|
@@ -139,211 +115,6 @@ var FilterPanel = function FilterPanel(_ref) {
|
|
139
115
|
prevFiltersRef.current = JSON.stringify(filtersState);
|
140
116
|
prevFiltersObjectArrayRef.current = JSON.stringify(filtersObjectArray);
|
141
117
|
};
|
142
|
-
var applyFilters = function applyFilters(_ref2) {
|
143
|
-
var column = _ref2.column,
|
144
|
-
value = _ref2.value,
|
145
|
-
type = _ref2.type;
|
146
|
-
// If no end date is selected return because we need the end date to do computations
|
147
|
-
if (type === DATE && value.length > 0 && !value[1]) {
|
148
|
-
return;
|
149
|
-
}
|
150
|
-
var filtersObjectArrayCopy = _toConsumableArray(filtersObjectArray);
|
151
|
-
// // check if the filter already exists in the array
|
152
|
-
var filter = filtersObjectArrayCopy.find(function (item) {
|
153
|
-
return item.id === column;
|
154
|
-
});
|
155
|
-
|
156
|
-
// // if filter exists in array then update the filter's new value
|
157
|
-
if (filter) {
|
158
|
-
filter.value = value;
|
159
|
-
} else {
|
160
|
-
filtersObjectArrayCopy.push({
|
161
|
-
id: column,
|
162
|
-
value: value,
|
163
|
-
type: type
|
164
|
-
});
|
165
|
-
}
|
166
|
-
|
167
|
-
// ATTENTION: this is where you would reset or remove individual filters from the filters array
|
168
|
-
if (type === CHECKBOX) {
|
169
|
-
/**
|
170
|
-
When all checkboxes of a group are all unselected the value still exists in the filtersObjectArray
|
171
|
-
This checks if all the checkboxes are selected = false and removes it from the array
|
172
|
-
*/
|
173
|
-
var index = filtersObjectArrayCopy.findIndex(function (filter) {
|
174
|
-
return filter.id === column;
|
175
|
-
});
|
176
|
-
|
177
|
-
// If all the selected state is false remove from array
|
178
|
-
var shouldRemoveFromArray = filtersObjectArrayCopy[index].value.every(function (val) {
|
179
|
-
return val.selected === false;
|
180
|
-
});
|
181
|
-
if (shouldRemoveFromArray) {
|
182
|
-
filtersObjectArrayCopy.splice(index, 1);
|
183
|
-
}
|
184
|
-
} else if (type === DATE) {
|
185
|
-
if (value.length === 0) {
|
186
|
-
/**
|
187
|
-
Checks to see if the date value is an empty array, if it is that means the user wants
|
188
|
-
to reset the date filter
|
189
|
-
*/
|
190
|
-
var _index = filtersObjectArrayCopy.findIndex(function (filter) {
|
191
|
-
return filter.id === column;
|
192
|
-
});
|
193
|
-
|
194
|
-
// Remove it from the filters array since there is nothing to filter
|
195
|
-
filtersObjectArrayCopy.splice(_index, 1);
|
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
|
-
}
|
210
|
-
}
|
211
|
-
setFiltersObjectArray(filtersObjectArrayCopy);
|
212
|
-
|
213
|
-
// // Automatically apply the filters if the updateMethod is instant
|
214
|
-
if (updateMethod === INSTANT) {
|
215
|
-
setAllFilters(filtersObjectArrayCopy);
|
216
|
-
}
|
217
|
-
};
|
218
|
-
|
219
|
-
/** Render the individual filter component */
|
220
|
-
var renderFilter = function renderFilter(_ref3) {
|
221
|
-
var _filtersState$column, _filtersState$column2;
|
222
|
-
var type = _ref3.type,
|
223
|
-
column = _ref3.column,
|
224
|
-
components = _ref3.props;
|
225
|
-
switch (type) {
|
226
|
-
case DATE:
|
227
|
-
return /*#__PURE__*/React.createElement(DatePicker, _extends({}, components.DatePicker, {
|
228
|
-
onChange: function onChange(value) {
|
229
|
-
var _components$DatePicke, _components$DatePicke2;
|
230
|
-
setFiltersState(_objectSpread(_objectSpread({}, filtersState), {}, _defineProperty({}, column, {
|
231
|
-
value: value,
|
232
|
-
type: type
|
233
|
-
})));
|
234
|
-
applyFilters({
|
235
|
-
column: column,
|
236
|
-
value: value,
|
237
|
-
type: type
|
238
|
-
});
|
239
|
-
(_components$DatePicke = (_components$DatePicke2 = components.DatePicker).onChange) === null || _components$DatePicke === void 0 ? void 0 : _components$DatePicke.call(_components$DatePicke2, value);
|
240
|
-
},
|
241
|
-
value: filtersState[column].value,
|
242
|
-
datePickerType: "range",
|
243
|
-
light: true
|
244
|
-
}), /*#__PURE__*/React.createElement(DatePickerInput, _extends({
|
245
|
-
placeholder: "mm/dd/yyyy",
|
246
|
-
labelText: "Start date"
|
247
|
-
}, components.DatePickerInput.start)), /*#__PURE__*/React.createElement(DatePickerInput, _extends({
|
248
|
-
placeholder: "mm/dd/yyyy",
|
249
|
-
labelText: "End date"
|
250
|
-
}, components.DatePickerInput.end)));
|
251
|
-
case NUMBER:
|
252
|
-
return /*#__PURE__*/React.createElement(NumberInput, _extends({
|
253
|
-
step: 1,
|
254
|
-
allowEmpty: true,
|
255
|
-
hideSteppers: true
|
256
|
-
}, components.NumberInput, {
|
257
|
-
onChange: function onChange(event) {
|
258
|
-
var _components$NumberInp, _components$NumberInp2;
|
259
|
-
setFiltersState(_objectSpread(_objectSpread({}, filtersState), {}, _defineProperty({}, column, {
|
260
|
-
value: event.target.value,
|
261
|
-
type: type
|
262
|
-
})));
|
263
|
-
applyFilters({
|
264
|
-
column: column,
|
265
|
-
value: event.target.value,
|
266
|
-
type: type
|
267
|
-
});
|
268
|
-
(_components$NumberInp = (_components$NumberInp2 = components.NumberInput).onChange) === null || _components$NumberInp === void 0 ? void 0 : _components$NumberInp.call(_components$NumberInp2, event);
|
269
|
-
},
|
270
|
-
value: filtersState[column].value,
|
271
|
-
light: true
|
272
|
-
}));
|
273
|
-
case CHECKBOX:
|
274
|
-
return /*#__PURE__*/React.createElement(FormGroup, components.FormGroup, filtersState[column].value.map(function (option) {
|
275
|
-
return /*#__PURE__*/React.createElement(Checkbox, _extends({
|
276
|
-
key: option.labelText
|
277
|
-
}, option, {
|
278
|
-
onChange: function onChange(isSelected) {
|
279
|
-
var _option$onChange;
|
280
|
-
var checkboxCopy = filtersState[column].value;
|
281
|
-
var foundCheckbox = checkboxCopy.find(function (checkbox) {
|
282
|
-
return checkbox.value === option.value;
|
283
|
-
});
|
284
|
-
foundCheckbox.selected = isSelected;
|
285
|
-
setFiltersState(_objectSpread(_objectSpread({}, filtersState), {}, _defineProperty({}, column, {
|
286
|
-
value: checkboxCopy,
|
287
|
-
type: type
|
288
|
-
})));
|
289
|
-
applyFilters({
|
290
|
-
column: column,
|
291
|
-
value: _toConsumableArray(filtersState[column].value),
|
292
|
-
type: type
|
293
|
-
});
|
294
|
-
(_option$onChange = option.onChange) === null || _option$onChange === void 0 ? void 0 : _option$onChange.call(option, isSelected);
|
295
|
-
},
|
296
|
-
checked: option.selected
|
297
|
-
}));
|
298
|
-
}));
|
299
|
-
case RADIO:
|
300
|
-
return /*#__PURE__*/React.createElement(FormGroup, components.FormGroup, /*#__PURE__*/React.createElement(RadioButtonGroup, _extends({}, components.RadioButtonGroup, {
|
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,
|
302
|
-
onChange: function onChange(selected) {
|
303
|
-
var _components$RadioButt, _components$RadioButt2;
|
304
|
-
setFiltersState(_objectSpread(_objectSpread({}, filtersState), {}, _defineProperty({}, column, {
|
305
|
-
value: selected,
|
306
|
-
type: type
|
307
|
-
})));
|
308
|
-
applyFilters({
|
309
|
-
column: column,
|
310
|
-
value: selected,
|
311
|
-
type: type
|
312
|
-
});
|
313
|
-
(_components$RadioButt = (_components$RadioButt2 = components.RadioButtonGroup).onChange) === null || _components$RadioButt === void 0 ? void 0 : _components$RadioButt.call(_components$RadioButt2, selected);
|
314
|
-
}
|
315
|
-
}), /*#__PURE__*/React.createElement(RadioButton, {
|
316
|
-
id: "any",
|
317
|
-
labelText: "Any",
|
318
|
-
value: "Any"
|
319
|
-
}), components.RadioButton.map(function (radio) {
|
320
|
-
var _ref4, _radio$id;
|
321
|
-
return /*#__PURE__*/React.createElement(RadioButton, _extends({
|
322
|
-
key: (_ref4 = (_radio$id = radio.id) !== null && _radio$id !== void 0 ? _radio$id : radio.labelText) !== null && _ref4 !== void 0 ? _ref4 : radio.value
|
323
|
-
}, radio));
|
324
|
-
})));
|
325
|
-
case DROPDOWN:
|
326
|
-
return /*#__PURE__*/React.createElement(Dropdown, _extends({}, components.Dropdown, {
|
327
|
-
items: ['Any'].concat(_toConsumableArray(components.Dropdown.items)),
|
328
|
-
selectedItem: filtersState[column].value === '' ? 'Any' : filtersState[column].value,
|
329
|
-
onChange: function onChange(_ref5) {
|
330
|
-
var _components$Dropdown$, _components$Dropdown;
|
331
|
-
var selectedItem = _ref5.selectedItem;
|
332
|
-
setFiltersState(_objectSpread(_objectSpread({}, filtersState), {}, _defineProperty({}, column, {
|
333
|
-
value: selectedItem,
|
334
|
-
type: type
|
335
|
-
})));
|
336
|
-
applyFilters({
|
337
|
-
column: column,
|
338
|
-
value: selectedItem,
|
339
|
-
type: type
|
340
|
-
});
|
341
|
-
(_components$Dropdown$ = (_components$Dropdown = components.Dropdown).onChange) === null || _components$Dropdown$ === void 0 ? void 0 : _components$Dropdown$.call(_components$Dropdown, selectedItem);
|
342
|
-
},
|
343
|
-
light: true
|
344
|
-
}));
|
345
|
-
}
|
346
|
-
};
|
347
118
|
var renderActionSet = function renderActionSet() {
|
348
119
|
return showActionSet && /*#__PURE__*/React.createElement(MotionActionSet, {
|
349
120
|
actions: [{
|
@@ -374,12 +145,12 @@ var FilterPanel = function FilterPanel(_ref) {
|
|
374
145
|
|
375
146
|
/** Effects */
|
376
147
|
useEffect(function liftOpenStateToParent() {
|
377
|
-
if (
|
378
|
-
onPanelOpen(
|
148
|
+
if (panelOpen) {
|
149
|
+
onPanelOpen(panelOpen);
|
379
150
|
} else {
|
380
|
-
onPanelClose(
|
151
|
+
onPanelClose(panelOpen);
|
381
152
|
}
|
382
|
-
}, [
|
153
|
+
}, [panelOpen, onPanelClose, onPanelOpen]);
|
383
154
|
useEffect(function setPanelMinimumHeight() {
|
384
155
|
var _filterPanelRef$curre;
|
385
156
|
(_filterPanelRef$curre = filterPanelRef.current) === null || _filterPanelRef$curre === void 0 ? void 0 : _filterPanelRef$curre.style.setProperty('--filter-panel-min-height', rem(filterPanelMinHeight));
|
@@ -395,9 +166,9 @@ var FilterPanel = function FilterPanel(_ref) {
|
|
395
166
|
};
|
396
167
|
return /*#__PURE__*/React.createElement(motion.div, {
|
397
168
|
ref: filterPanelRef,
|
398
|
-
className: cx(componentClass, "".concat(componentClass, "__container"), (_cx = {}, _defineProperty(_cx, "".concat(componentClass, "--open"),
|
169
|
+
className: cx(componentClass, "".concat(componentClass, "__container"), (_cx = {}, _defineProperty(_cx, "".concat(componentClass, "--open"), panelOpen), _defineProperty(_cx, "".concat(componentClass, "--batch"), showActionSet), _defineProperty(_cx, "".concat(componentClass, "--instant"), !showActionSet), _cx)),
|
399
170
|
initial: false,
|
400
|
-
animate:
|
171
|
+
animate: panelOpen ? 'visible' : 'hidden',
|
401
172
|
variants: panelVariants
|
402
173
|
}, /*#__PURE__*/React.createElement(motion.div, {
|
403
174
|
variants: innerContainerVariants
|
@@ -428,25 +199,25 @@ var FilterPanel = function FilterPanel(_ref) {
|
|
428
199
|
height: getScrollableContainerHeight()
|
429
200
|
},
|
430
201
|
onScroll: onInnerContainerScroll
|
431
|
-
}, filterSections.map(function (
|
432
|
-
var
|
433
|
-
categoryTitle =
|
434
|
-
|
435
|
-
filters =
|
436
|
-
hasAccordion =
|
202
|
+
}, filterSections.map(function (_ref2) {
|
203
|
+
var _ref2$categoryTitle = _ref2.categoryTitle,
|
204
|
+
categoryTitle = _ref2$categoryTitle === void 0 ? null : _ref2$categoryTitle,
|
205
|
+
_ref2$filters = _ref2.filters,
|
206
|
+
filters = _ref2$filters === void 0 ? [] : _ref2$filters,
|
207
|
+
hasAccordion = _ref2.hasAccordion;
|
437
208
|
return /*#__PURE__*/React.createElement("div", {
|
438
209
|
className: "".concat(componentClass, "__category")
|
439
210
|
}, categoryTitle && /*#__PURE__*/React.createElement("div", {
|
440
211
|
className: "".concat(componentClass, "__category-title")
|
441
|
-
}, categoryTitle), hasAccordion ? /*#__PURE__*/React.createElement(Accordion, null, filters.map(function (
|
442
|
-
var filterLabel =
|
443
|
-
filter =
|
212
|
+
}, categoryTitle), hasAccordion ? /*#__PURE__*/React.createElement(Accordion, null, filters.map(function (_ref3) {
|
213
|
+
var filterLabel = _ref3.filterLabel,
|
214
|
+
filter = _ref3.filter;
|
444
215
|
return /*#__PURE__*/React.createElement(AccordionItem, {
|
445
216
|
title: filterLabel,
|
446
217
|
key: filterLabel
|
447
218
|
}, renderFilter(filter));
|
448
|
-
})) : filters.map(function (
|
449
|
-
var filter =
|
219
|
+
})) : filters.map(function (_ref4) {
|
220
|
+
var filter = _ref4.filter;
|
450
221
|
return renderFilter(filter);
|
451
222
|
}));
|
452
223
|
})), renderActionSet()));
|
@@ -65,13 +65,13 @@ export var FilterProvider = function FilterProvider(_ref2) {
|
|
65
65
|
var filterTags = prepareFiltersForTags(filters);
|
66
66
|
var _useState = useState(false),
|
67
67
|
_useState2 = _slicedToArray(_useState, 2),
|
68
|
-
|
69
|
-
|
68
|
+
panelOpen = _useState2[0],
|
69
|
+
setPanelOpen = _useState2[1];
|
70
70
|
var value = {
|
71
71
|
filterTags: filterTags,
|
72
72
|
EventEmitter: EventEmitter,
|
73
|
-
|
74
|
-
|
73
|
+
panelOpen: panelOpen,
|
74
|
+
setPanelOpen: setPanelOpen
|
75
75
|
};
|
76
76
|
return /*#__PURE__*/React.createElement(FilterContext.Provider, {
|
77
77
|
value: value
|
@@ -7,4 +7,5 @@
|
|
7
7
|
|
8
8
|
export { default as useInitialStateFromFilters } from './useInitialStateFromFilters';
|
9
9
|
export { default as useSubscribeToEventEmitter } from './useSubscribeToEventEmitter';
|
10
|
-
export { default as useShouldDisableButtons } from './useShouldDisableButtons';
|
10
|
+
export { default as useShouldDisableButtons } from './useShouldDisableButtons';
|
11
|
+
export { default as useFilters } from './useFilters';
|