@carbon/ibm-products 2.0.0-rc.17 → 2.0.0-rc.19
Sign up to get free protection for your applications and to get access to all the features.
- package/css/index-full-carbon.css +140 -21
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +3 -3
- package/css/index-full-carbon.min.css.map +1 -1
- package/css/index-without-carbon-released-only.css +413 -0
- package/css/index-without-carbon-released-only.css.map +1 -1
- package/css/index-without-carbon-released-only.min.css +1 -1
- package/css/index-without-carbon-released-only.min.css.map +1 -1
- package/css/index-without-carbon.css +140 -21
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +3 -3
- package/css/index-without-carbon.min.css.map +1 -1
- package/css/index.css +139 -21
- package/css/index.css.map +1 -1
- package/css/index.min.css +2 -2
- package/css/index.min.css.map +1 -1
- package/es/components/Datagrid/Datagrid/Datagrid.js +4 -4
- package/es/components/Datagrid/Datagrid/DatagridContent.js +46 -16
- package/es/components/Datagrid/Datagrid/DatagridToolbar.js +3 -21
- package/es/components/Datagrid/Datagrid/DraggableElement.js +7 -3
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +7 -2
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsTearsheet.js +1 -1
- package/es/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +120 -60
- package/es/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +514 -0
- package/es/components/Datagrid/Datagrid/addons/Filtering/FilterProvider.js +10 -2
- package/es/components/Datagrid/Datagrid/addons/Filtering/constants.js +9 -1
- package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/index.js +9 -0
- package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useInitialStateFromFilters.js +4 -1
- package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useShouldDisableButtons.js +38 -0
- package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useSubscribeToEventEmitter.js +25 -0
- package/es/components/Datagrid/Datagrid/addons/Filtering/index.js +3 -1
- package/es/components/Datagrid/Datagrid/addons/Filtering/motion/variants.js +55 -0
- package/es/components/Datagrid/Datagrid/addons/Filtering/utils.js +53 -19
- package/es/components/Datagrid/Datagrid.stories/index.js +0 -1
- package/es/components/Datagrid/useFiltering.js +11 -4
- package/es/components/Datagrid/utils/DatagridActions.js +41 -13
- package/es/components/OptionsTile/OptionsTile.js +3 -3
- package/es/components/Tearsheet/Tearsheet.js +5 -0
- package/es/components/Tearsheet/TearsheetNarrow.js +5 -0
- package/es/components/Tearsheet/TearsheetShell.js +1 -1
- package/es/global/js/package-settings.js +2 -2
- package/lib/components/Datagrid/Datagrid/Datagrid.js +4 -4
- package/lib/components/Datagrid/Datagrid/DatagridContent.js +48 -15
- package/lib/components/Datagrid/Datagrid/DatagridToolbar.js +2 -23
- package/lib/components/Datagrid/Datagrid/DraggableElement.js +6 -2
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +7 -2
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsTearsheet.js +1 -1
- package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +113 -51
- package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +538 -0
- package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterProvider.js +9 -1
- package/lib/components/Datagrid/Datagrid/addons/Filtering/constants.js +15 -3
- package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/index.js +31 -0
- package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useInitialStateFromFilters.js +5 -1
- package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useShouldDisableButtons.js +50 -0
- package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useSubscribeToEventEmitter.js +35 -0
- package/lib/components/Datagrid/Datagrid/addons/Filtering/index.js +23 -1
- package/lib/components/Datagrid/Datagrid/addons/Filtering/motion/variants.js +67 -0
- package/lib/components/Datagrid/Datagrid/addons/Filtering/utils.js +53 -18
- package/lib/components/Datagrid/Datagrid.stories/index.js +0 -8
- package/lib/components/Datagrid/useFiltering.js +11 -3
- package/lib/components/Datagrid/utils/DatagridActions.js +41 -11
- package/lib/components/OptionsTile/OptionsTile.js +2 -2
- package/lib/components/Tearsheet/Tearsheet.js +5 -0
- package/lib/components/Tearsheet/TearsheetNarrow.js +5 -0
- package/lib/components/Tearsheet/TearsheetShell.js +1 -1
- package/lib/global/js/package-settings.js +2 -2
- package/package.json +2 -2
- package/scss/components/Datagrid/styles/_datagrid.scss +16 -17
- package/scss/components/Datagrid/styles/_draggableElement.scss +5 -1
- package/scss/components/Datagrid/styles/_index.scss +1 -0
- package/scss/components/Datagrid/styles/addons/_FilterPanel.scss +129 -0
- package/scss/components/Datagrid/styles/addons/_RowSizeDropdown.scss +3 -3
- package/scss/components/FilterSummary/_filter-summary.scss +1 -0
- package/scss/components/MultiAddSelect/_multi-add-select.scss +1 -1
- package/scss/components/SingleAddSelect/_single-add-select.scss +1 -1
- package/scss/components/_index-released-only-with-carbon.scss +2 -0
- package/scss/components/_index-released-only.scss +2 -0
- package/es/components/Datagrid/Datagrid.stories/LeftPanelStory.js +0 -6
- package/lib/components/Datagrid/Datagrid.stories/LeftPanelStory.js +0 -13
@@ -57,6 +57,7 @@ var DraggableElement = function DraggableElement(_ref) {
|
|
57
57
|
onGrab = _ref.onGrab,
|
58
58
|
onArrowKeyDown = _ref.onArrowKeyDown,
|
59
59
|
isFocused = _ref.isFocused,
|
60
|
+
isSticky = _ref.isSticky,
|
60
61
|
moveElement = _ref.moveElement,
|
61
62
|
selected = _ref.selected,
|
62
63
|
_ref$positionLabel = _ref.positionLabel,
|
@@ -143,11 +144,13 @@ var DraggableElement = function DraggableElement(_ref) {
|
|
143
144
|
className: (0, _classnames.default)({
|
144
145
|
disabled: disabled
|
145
146
|
}, "".concat(blockClass, "__draggable-handleStyle"))
|
146
|
-
}, /*#__PURE__*/React.createElement(_icons.
|
147
|
+
}, isSticky ? /*#__PURE__*/React.createElement(_icons.Locked, {
|
148
|
+
size: 16
|
149
|
+
}) : /*#__PURE__*/React.createElement(_icons.Draggable, {
|
147
150
|
size: 16
|
148
151
|
})), children);
|
149
152
|
return /*#__PURE__*/React.createElement("li", {
|
150
|
-
className: (0, _classnames.default)((_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__draggable-handleHolder-isOver"), isOver && !disabled), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__draggable-handleHolder-grabbed"), isGrabbed), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__draggable-handleHolder-selected"), selected), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__draggable-handleHolder"), !selected), _cx)),
|
153
|
+
className: (0, _classnames.default)((_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__draggable-handleHolder-isOver"), isOver && !disabled), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__draggable-handleHolder-grabbed"), isGrabbed), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__draggable-handleHolder-selected"), selected), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__draggable-handleHolder--sticky"), isSticky), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__draggable-handleHolder"), !selected), _cx)),
|
151
154
|
ref: ref,
|
152
155
|
"aria-selected": isFocused,
|
153
156
|
role: "option",
|
@@ -196,6 +199,7 @@ DraggableElement.propTypes = {
|
|
196
199
|
id: _propTypes.default.string.isRequired,
|
197
200
|
index: _propTypes.default.number.isRequired,
|
198
201
|
isFocused: _propTypes.default.bool.isRequired,
|
202
|
+
isSticky: _propTypes.default.bool,
|
199
203
|
listData: _propTypes.default.array.isRequired,
|
200
204
|
moveElement: _propTypes.default.func.isRequired,
|
201
205
|
onArrowKeyDown: _propTypes.default.func.isRequired,
|
@@ -124,10 +124,12 @@ var Columns = function Columns(_ref) {
|
|
124
124
|
var res = filterString.length ? colDef.Header.props.title.toLowerCase().split(searchString) : null;
|
125
125
|
var firstWord = res !== null ? res[0] === '' ? res[1].charAt(0).toUpperCase() + res[1].substring(1) : res[0].charAt(0).toUpperCase() + res[0].substring(1) : null;
|
126
126
|
var highlightedText = res !== null ? res[0] === '' ? "<strong>".concat(firstWord, "</strong>") + res[2] : firstWord + "<strong>".concat(res[1], "</strong>") + res[2] : colDef.Header.props.title;
|
127
|
+
var isFrozenColumn = !!colDef.sticky;
|
127
128
|
|
128
129
|
var listContents = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_react2.Checkbox, {
|
129
130
|
className: (0, _classnames.default)("".concat(blockClass, "__customize-columns-checkbox-wrapper"), "".concat(blockClass, "__customize-columns-checkbox")),
|
130
131
|
checked: (0, _common.isColumnVisible)(colDef),
|
132
|
+
disabled: isFrozenColumn,
|
131
133
|
onChange: function onChange(_, _ref2) {
|
132
134
|
var checked = _ref2.checked;
|
133
135
|
return onSelectColumn(colDef, checked);
|
@@ -149,18 +151,21 @@ var Columns = function Columns(_ref) {
|
|
149
151
|
setListData: setColumnsObject,
|
150
152
|
id: "dnd-datagrid-columns-".concat(colDef.id),
|
151
153
|
type: "column-customization",
|
152
|
-
disabled: filterString.length > 0,
|
154
|
+
disabled: filterString.length > 0 || isFrozenColumn,
|
153
155
|
ariaLabel: colDef.Header.props.title,
|
154
156
|
onGrab: setAriaRegionText,
|
155
157
|
isFocused: focusIndex === i,
|
158
|
+
isSticky: isFrozenColumn,
|
156
159
|
moveElement: moveElement,
|
157
160
|
onArrowKeyDown: function onArrowKeyDown(e, isGrabbed, currentIndex) {
|
158
161
|
if (isGrabbed) {
|
162
|
+
var _columns$nextIndex;
|
163
|
+
|
159
164
|
var nextIndex = getNextIndex(columns, currentIndex, e.key);
|
160
165
|
e.preventDefault();
|
161
166
|
e.stopPropagation();
|
162
167
|
|
163
|
-
if (nextIndex >= 0) {
|
168
|
+
if (nextIndex >= 0 && !((_columns$nextIndex = columns[nextIndex]) !== null && _columns$nextIndex !== void 0 && _columns$nextIndex.sticky)) {
|
164
169
|
setFocusIndex(nextIndex);
|
165
170
|
moveElement(currentIndex, nextIndex);
|
166
171
|
e.target.scrollIntoView({
|
package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsTearsheet.js
CHANGED
@@ -79,7 +79,7 @@ var CustomizeColumnsTearsheet = function CustomizeColumnsTearsheet(_ref) {
|
|
79
79
|
|
80
80
|
var _useState7 = (0, _react.useState)(columnDefinitions // hide the columns without Header, e.g the sticky actions, spacer
|
81
81
|
.filter(function (colDef) {
|
82
|
-
return !!colDef.Header.props;
|
82
|
+
return !!colDef.Header.props && !colDef.isAction;
|
83
83
|
}) // only sort the hidden column to the end when modal reopen
|
84
84
|
.sort(function (defA, defB) {
|
85
85
|
var isVisibleA = (0, _common.isColumnVisible)(defA);
|
@@ -35,9 +35,7 @@ var _ActionSet = require("../../../../ActionSet");
|
|
35
35
|
|
36
36
|
var _constants = require("./constants");
|
37
37
|
|
38
|
-
var
|
39
|
-
|
40
|
-
var _useInitialStateFromFilters = _interopRequireDefault(require("./hooks/useInitialStateFromFilters"));
|
38
|
+
var _hooks2 = require("./hooks");
|
41
39
|
|
42
40
|
var _utils = require("./utils");
|
43
41
|
|
@@ -75,20 +73,17 @@ var FilterFlyout = function FilterFlyout(_ref) {
|
|
75
73
|
onCancel = _ref$onCancel === void 0 ? function () {} : _ref$onCancel,
|
76
74
|
_ref$secondaryActionL = _ref.secondaryActionLabel,
|
77
75
|
secondaryActionLabel = _ref$secondaryActionL === void 0 ? 'Cancel' : _ref$secondaryActionL,
|
78
|
-
setAllFilters = _ref.setAllFilters
|
76
|
+
setAllFilters = _ref.setAllFilters,
|
77
|
+
_ref$data = _ref.data,
|
78
|
+
data = _ref$data === void 0 ? [] : _ref$data;
|
79
79
|
|
80
|
-
/** Context state and methods */
|
81
|
-
var _useContext = (0, _react2.useContext)(_FilterProvider.FilterContext),
|
82
|
-
EventEmitter = _useContext.EventEmitter;
|
83
80
|
/** State */
|
84
|
-
|
85
|
-
|
86
81
|
var _useState = (0, _react2.useState)(false),
|
87
82
|
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
88
83
|
open = _useState2[0],
|
89
84
|
setOpen = _useState2[1];
|
90
85
|
|
91
|
-
var _useInitialStateFromF = (0,
|
86
|
+
var _useInitialStateFromF = (0, _hooks2.useInitialStateFromFilters)(filters, _constants.FLYOUT),
|
92
87
|
_useInitialStateFromF2 = (0, _slicedToArray2.default)(_useInitialStateFromF, 2),
|
93
88
|
filtersState = _useInitialStateFromF2[0],
|
94
89
|
setFiltersState = _useInitialStateFromF2[1];
|
@@ -104,9 +99,21 @@ var FilterFlyout = function FilterFlyout(_ref) {
|
|
104
99
|
|
105
100
|
var prevFiltersRef = (0, _react2.useRef)(JSON.stringify(filtersState));
|
106
101
|
var prevFiltersObjectArrayRef = (0, _react2.useRef)(JSON.stringify(filtersObjectArray));
|
102
|
+
/** State from hooks */
|
103
|
+
|
104
|
+
var _useShouldDisableButt = (0, _hooks2.useShouldDisableButtons)({
|
105
|
+
initialValue: true,
|
106
|
+
filtersState: filtersState,
|
107
|
+
prevFiltersRef: prevFiltersRef
|
108
|
+
}),
|
109
|
+
_useShouldDisableButt2 = (0, _slicedToArray2.default)(_useShouldDisableButt, 2),
|
110
|
+
shouldDisableButtons = _useShouldDisableButt2[0],
|
111
|
+
setShouldDisableButtons = _useShouldDisableButt2[1];
|
107
112
|
/** Memos */
|
108
113
|
|
114
|
+
|
109
115
|
var showActionSet = updateMethod === _constants.BATCH;
|
116
|
+
var carbonPrefix = (0, _react.usePrefix)();
|
110
117
|
/** Methods */
|
111
118
|
|
112
119
|
var openFlyout = function openFlyout() {
|
@@ -121,8 +128,11 @@ var FilterFlyout = function FilterFlyout(_ref) {
|
|
121
128
|
|
122
129
|
var apply = function apply() {
|
123
130
|
setAllFilters(filtersObjectArray);
|
124
|
-
closeFlyout();
|
125
|
-
|
131
|
+
closeFlyout(); // From the user
|
132
|
+
|
133
|
+
onApply(); // When the user clicks apply, the action set buttons should be disabled again
|
134
|
+
|
135
|
+
setShouldDisableButtons(true); // updates the ref so next time the flyout opens we have records of the previous filters
|
126
136
|
|
127
137
|
prevFiltersRef.current = JSON.stringify(filtersState);
|
128
138
|
prevFiltersObjectArrayRef.current = JSON.stringify(filtersObjectArray);
|
@@ -140,7 +150,7 @@ var FilterFlyout = function FilterFlyout(_ref) {
|
|
140
150
|
|
141
151
|
var reset = function reset() {
|
142
152
|
// Get the initial values for the filters
|
143
|
-
var initialFiltersState = (0, _utils.getInitialStateFromFilters)(filters);
|
153
|
+
var initialFiltersState = (0, _utils.getInitialStateFromFilters)(filters, _constants.FLYOUT);
|
144
154
|
var initialFiltersObjectArray = []; // Set the state to the initial values
|
145
155
|
|
146
156
|
setFiltersState(initialFiltersState);
|
@@ -184,6 +194,37 @@ var FilterFlyout = function FilterFlyout(_ref) {
|
|
184
194
|
});
|
185
195
|
}
|
186
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
|
+
|
187
228
|
setFiltersObjectArray(filtersObjectArrayCopy); // Automatically apply the filters if the updateMethod is instant
|
188
229
|
|
189
230
|
if (updateMethod === _constants.INSTANT) {
|
@@ -194,33 +235,31 @@ var FilterFlyout = function FilterFlyout(_ref) {
|
|
194
235
|
|
195
236
|
(0, _hooks.useClickOutside)(filterFlyoutRef, function (target) {
|
196
237
|
var hasClickedOnDatePicker = target.closest('.flatpickr-calendar');
|
238
|
+
var hasClickedOnDropdown = target.className === "".concat(carbonPrefix, "--list-box__menu-item__option");
|
197
239
|
|
198
|
-
if (!open || hasClickedOnDatePicker) {
|
240
|
+
if (!open || hasClickedOnDatePicker || hasClickedOnDropdown) {
|
199
241
|
return;
|
200
242
|
}
|
201
243
|
|
202
244
|
cancel();
|
203
245
|
});
|
204
|
-
(0,
|
205
|
-
// This event is emitted from the DatagridToolbar component when clearFilters is clicked in FilterSummary
|
206
|
-
EventEmitter.subscribe(_constants.CLEAR_FILTERS, reset);
|
207
|
-
});
|
246
|
+
(0, _hooks2.useSubscribeToEventEmitter)(_constants.CLEAR_FILTERS, reset);
|
208
247
|
/** Render the individual filter component */
|
209
248
|
|
210
|
-
var renderFilter =
|
249
|
+
var renderFilter = function renderFilter(_ref3) {
|
211
250
|
var type = _ref3.type,
|
212
251
|
column = _ref3.column,
|
213
252
|
components = _ref3.props;
|
214
|
-
var key = "".concat(type, "-").concat(column, "-").concat(Math.random());
|
215
253
|
|
216
254
|
if (type === _constants.DATE) {
|
217
|
-
return /*#__PURE__*/_react2.default.createElement(_react.DatePicker, (0, _extends2.default)({
|
218
|
-
key: key
|
219
|
-
}, components.DatePicker, {
|
255
|
+
return /*#__PURE__*/_react2.default.createElement(_react.DatePicker, (0, _extends2.default)({}, components.DatePicker, {
|
220
256
|
onChange: function onChange(value) {
|
221
257
|
var _components$DatePicke, _components$DatePicke2;
|
222
258
|
|
223
|
-
setFiltersState(_objectSpread(_objectSpread({}, filtersState), {}, (0, _defineProperty2.default)({}, column,
|
259
|
+
setFiltersState(_objectSpread(_objectSpread({}, filtersState), {}, (0, _defineProperty2.default)({}, column, {
|
260
|
+
value: value,
|
261
|
+
type: type
|
262
|
+
})));
|
224
263
|
applyFilters({
|
225
264
|
column: column,
|
226
265
|
value: value,
|
@@ -228,7 +267,7 @@ var FilterFlyout = function FilterFlyout(_ref) {
|
|
228
267
|
});
|
229
268
|
(_components$DatePicke = (_components$DatePicke2 = components.DatePicker).onChange) === null || _components$DatePicke === void 0 ? void 0 : _components$DatePicke.call(_components$DatePicke2, value);
|
230
269
|
},
|
231
|
-
value: filtersState[column],
|
270
|
+
value: filtersState[column].value,
|
232
271
|
datePickerType: "range"
|
233
272
|
}), /*#__PURE__*/_react2.default.createElement(_react.DatePickerInput, (0, _extends2.default)({
|
234
273
|
placeholder: "mm/dd/yyyy",
|
@@ -239,7 +278,6 @@ var FilterFlyout = function FilterFlyout(_ref) {
|
|
239
278
|
}, components.DatePickerInput.end)));
|
240
279
|
} else if (type === _constants.NUMBER) {
|
241
280
|
return /*#__PURE__*/_react2.default.createElement(_react.NumberInput, (0, _extends2.default)({
|
242
|
-
key: key,
|
243
281
|
step: 1,
|
244
282
|
allowEmpty: true,
|
245
283
|
hideSteppers: true
|
@@ -247,7 +285,10 @@ var FilterFlyout = function FilterFlyout(_ref) {
|
|
247
285
|
onChange: function onChange(event) {
|
248
286
|
var _components$NumberInp, _components$NumberInp2;
|
249
287
|
|
250
|
-
setFiltersState(_objectSpread(_objectSpread({}, filtersState), {}, (0, _defineProperty2.default)({}, column,
|
288
|
+
setFiltersState(_objectSpread(_objectSpread({}, filtersState), {}, (0, _defineProperty2.default)({}, column, {
|
289
|
+
value: event.target.value,
|
290
|
+
type: type
|
291
|
+
})));
|
251
292
|
applyFilters({
|
252
293
|
column: column,
|
253
294
|
value: event.target.value,
|
@@ -255,44 +296,48 @@ var FilterFlyout = function FilterFlyout(_ref) {
|
|
255
296
|
});
|
256
297
|
(_components$NumberInp = (_components$NumberInp2 = components.NumberInput).onChange) === null || _components$NumberInp === void 0 ? void 0 : _components$NumberInp.call(_components$NumberInp2, event);
|
257
298
|
},
|
258
|
-
value: filtersState[column]
|
299
|
+
value: filtersState[column].value
|
259
300
|
}));
|
260
301
|
} else if (type === _constants.CHECKBOX) {
|
261
|
-
return /*#__PURE__*/_react2.default.createElement(_react.FormGroup,
|
262
|
-
key: key
|
263
|
-
}, components.FormGroup), filtersState[column].map(function (option) {
|
302
|
+
return /*#__PURE__*/_react2.default.createElement(_react.FormGroup, components.FormGroup, filtersState[column].value.map(function (option) {
|
264
303
|
return /*#__PURE__*/_react2.default.createElement(_react.Checkbox, (0, _extends2.default)({
|
265
304
|
key: option.labelText
|
266
305
|
}, option, {
|
267
306
|
onChange: function onChange(_, _ref4) {
|
268
307
|
var _option$onChange;
|
269
308
|
|
270
|
-
var
|
271
|
-
var checkboxCopy = filtersState[column];
|
309
|
+
var isSelected = _ref4.checked;
|
310
|
+
var checkboxCopy = filtersState[column].value;
|
272
311
|
var foundCheckbox = checkboxCopy.find(function (checkbox) {
|
273
312
|
return checkbox.value === option.value;
|
274
313
|
});
|
275
|
-
foundCheckbox.selected =
|
276
|
-
setFiltersState(_objectSpread(_objectSpread({}, filtersState), {}, (0, _defineProperty2.default)({}, column,
|
314
|
+
foundCheckbox.selected = isSelected;
|
315
|
+
setFiltersState(_objectSpread(_objectSpread({}, filtersState), {}, (0, _defineProperty2.default)({}, column, {
|
316
|
+
value: checkboxCopy,
|
317
|
+
type: type
|
318
|
+
})));
|
277
319
|
applyFilters({
|
278
320
|
column: column,
|
279
|
-
value: (0, _toConsumableArray2.default)(filtersState[column]),
|
321
|
+
value: (0, _toConsumableArray2.default)(filtersState[column].value),
|
280
322
|
type: type
|
281
323
|
});
|
282
|
-
(_option$onChange = option.onChange) === null || _option$onChange === void 0 ? void 0 : _option$onChange.call(option,
|
324
|
+
(_option$onChange = option.onChange) === null || _option$onChange === void 0 ? void 0 : _option$onChange.call(option, isSelected);
|
283
325
|
},
|
284
326
|
checked: option.selected
|
285
327
|
}));
|
286
328
|
}));
|
287
329
|
} else if (type === _constants.RADIO) {
|
288
|
-
|
289
|
-
|
290
|
-
|
291
|
-
valueSelected: filtersState[column],
|
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,
|
292
334
|
onChange: function onChange(selected) {
|
293
335
|
var _components$RadioButt, _components$RadioButt2;
|
294
336
|
|
295
|
-
setFiltersState(_objectSpread(_objectSpread({}, filtersState), {}, (0, _defineProperty2.default)({}, column,
|
337
|
+
setFiltersState(_objectSpread(_objectSpread({}, filtersState), {}, (0, _defineProperty2.default)({}, column, {
|
338
|
+
value: selected,
|
339
|
+
type: type
|
340
|
+
})));
|
296
341
|
applyFilters({
|
297
342
|
column: column,
|
298
343
|
value: selected,
|
@@ -300,6 +345,10 @@ var FilterFlyout = function FilterFlyout(_ref) {
|
|
300
345
|
});
|
301
346
|
(_components$RadioButt = (_components$RadioButt2 = components.RadioButtonGroup).onChange) === null || _components$RadioButt === void 0 ? void 0 : _components$RadioButt.call(_components$RadioButt2, selected);
|
302
347
|
}
|
348
|
+
}), /*#__PURE__*/_react2.default.createElement(_react.RadioButton, {
|
349
|
+
id: "any",
|
350
|
+
labelText: "Any",
|
351
|
+
value: "Any"
|
303
352
|
}), components.RadioButton.map(function (radio) {
|
304
353
|
var _ref5, _radio$id;
|
305
354
|
|
@@ -308,15 +357,19 @@ var FilterFlyout = function FilterFlyout(_ref) {
|
|
308
357
|
}, radio));
|
309
358
|
})));
|
310
359
|
} else if (type === _constants.DROPDOWN) {
|
311
|
-
|
312
|
-
|
313
|
-
}, components.Dropdown, {
|
314
|
-
selectedItem: filtersState[column],
|
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)),
|
315
365
|
onChange: function onChange(_ref6) {
|
316
366
|
var _components$Dropdown$, _components$Dropdown;
|
317
367
|
|
318
368
|
var selectedItem = _ref6.selectedItem;
|
319
|
-
setFiltersState(_objectSpread(_objectSpread({}, filtersState), {}, (0, _defineProperty2.default)({}, column,
|
369
|
+
setFiltersState(_objectSpread(_objectSpread({}, filtersState), {}, (0, _defineProperty2.default)({}, column, {
|
370
|
+
value: selectedItem,
|
371
|
+
type: type
|
372
|
+
})));
|
320
373
|
applyFilters({
|
321
374
|
column: column,
|
322
375
|
value: selectedItem,
|
@@ -326,9 +379,10 @@ var FilterFlyout = function FilterFlyout(_ref) {
|
|
326
379
|
}
|
327
380
|
}));
|
328
381
|
}
|
329
|
-
}
|
382
|
+
};
|
330
383
|
/** Renders all filters */
|
331
384
|
|
385
|
+
|
332
386
|
var renderFilters = function renderFilters() {
|
333
387
|
return filters.map(renderFilter);
|
334
388
|
};
|
@@ -340,13 +394,15 @@ var FilterFlyout = function FilterFlyout(_ref) {
|
|
340
394
|
kind: 'primary',
|
341
395
|
label: primaryActionLabel,
|
342
396
|
onClick: apply,
|
343
|
-
isExpressive: false
|
397
|
+
isExpressive: false,
|
398
|
+
disabled: shouldDisableButtons
|
344
399
|
}, {
|
345
400
|
key: 3,
|
346
401
|
kind: 'secondary',
|
347
402
|
label: secondaryActionLabel,
|
348
403
|
onClick: cancel,
|
349
|
-
isExpressive: false
|
404
|
+
isExpressive: false,
|
405
|
+
disabled: shouldDisableButtons
|
350
406
|
}],
|
351
407
|
size: "md",
|
352
408
|
buttonSize: "md"
|
@@ -366,7 +422,8 @@ var FilterFlyout = function FilterFlyout(_ref) {
|
|
366
422
|
},
|
367
423
|
iconDescription: flyoutIconDescription,
|
368
424
|
onClick: open ? closeFlyout : openFlyout,
|
369
|
-
className: (0, _classnames.default)("".concat(componentClass, "__trigger"), (0, _defineProperty2.default)({}, "".concat(componentClass, "__trigger--open"), open))
|
425
|
+
className: (0, _classnames.default)("".concat(componentClass, "__trigger"), (0, _defineProperty2.default)({}, "".concat(componentClass, "__trigger--open"), open)),
|
426
|
+
disabled: data.length === 0
|
370
427
|
}), /*#__PURE__*/_react2.default.createElement("div", {
|
371
428
|
ref: filterFlyoutRef,
|
372
429
|
className: (0, _classnames.default)(componentClass, (_cx2 = {}, (0, _defineProperty2.default)(_cx2, "".concat(componentClass, "--open"), open), (0, _defineProperty2.default)(_cx2, "".concat(componentClass, "--batch"), showActionSet), (0, _defineProperty2.default)(_cx2, "".concat(componentClass, "--instant"), !showActionSet), _cx2))
|
@@ -380,6 +437,11 @@ var FilterFlyout = function FilterFlyout(_ref) {
|
|
380
437
|
};
|
381
438
|
|
382
439
|
FilterFlyout.propTypes = {
|
440
|
+
/**
|
441
|
+
* All data rows in the table
|
442
|
+
*/
|
443
|
+
data: _propTypes.default.array.isRequired,
|
444
|
+
|
383
445
|
/**
|
384
446
|
* Array of filters to render
|
385
447
|
*/
|