@carbon/ibm-products 1.42.0 → 1.43.0
Sign up to get free protection for your applications and to get access to all the features.
- package/css/index-full-carbon.css +161 -26
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +2 -2
- package/css/index-full-carbon.min.css.map +1 -1
- package/css/index-without-carbon-released-only.css +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 +161 -26
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +2 -2
- package/css/index-without-carbon.min.css.map +1 -1
- package/css/index.css +161 -26
- 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/AddSelect/AddSelect.js +1 -1
- package/es/components/AddSelect/AddSelectBody.js +1 -1
- package/es/components/AddSelect/AddSelectColumn.js +1 -1
- package/es/components/Datagrid/Datagrid/Datagrid.js +3 -3
- package/es/components/Datagrid/Datagrid/DatagridContent.js +43 -15
- package/es/components/Datagrid/Datagrid/DatagridToolbar.js +5 -19
- package/es/components/Datagrid/Datagrid/DraggableElement.js +1 -1
- package/es/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +65 -34
- package/es/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +436 -0
- package/es/components/Datagrid/Datagrid/addons/Filtering/FilterProvider.js +8 -2
- package/es/components/Datagrid/Datagrid/addons/Filtering/constants.js +9 -1
- package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/index.js +2 -0
- package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useInitialStateFromFilters.js +3 -1
- package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useSubscribeToEventEmitter.js +23 -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 +49 -17
- package/es/components/Datagrid/Datagrid.stories/index.js +0 -1
- package/es/components/Datagrid/useFiltering.js +10 -3
- package/es/components/Datagrid/utils/DatagridActions.js +59 -6
- package/lib/components/AddSelect/AddSelect.js +1 -1
- package/lib/components/AddSelect/AddSelectBody.js +1 -1
- package/lib/components/AddSelect/AddSelectColumn.js +1 -1
- package/lib/components/Datagrid/Datagrid/Datagrid.js +3 -3
- package/lib/components/Datagrid/Datagrid/DatagridContent.js +43 -15
- package/lib/components/Datagrid/Datagrid/DatagridToolbar.js +5 -18
- package/lib/components/Datagrid/Datagrid/DraggableElement.js +1 -1
- package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +64 -31
- package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +445 -0
- package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterProvider.js +7 -1
- package/lib/components/Datagrid/Datagrid/addons/Filtering/constants.js +15 -3
- package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/index.js +20 -0
- package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useInitialStateFromFilters.js +3 -1
- package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useSubscribeToEventEmitter.js +30 -0
- package/lib/components/Datagrid/Datagrid/addons/Filtering/index.js +21 -1
- package/lib/components/Datagrid/Datagrid/addons/Filtering/motion/variants.js +64 -0
- package/lib/components/Datagrid/Datagrid/addons/Filtering/utils.js +48 -17
- package/lib/components/Datagrid/Datagrid.stories/index.js +0 -7
- package/lib/components/Datagrid/useFiltering.js +10 -3
- package/lib/components/Datagrid/utils/DatagridActions.js +57 -4
- package/package.json +14 -14
- package/scss/components/Datagrid/styles/_datagrid.scss +25 -18
- package/scss/components/Datagrid/styles/_draggableElement.scss +12 -4
- package/scss/components/Datagrid/styles/_index.scss +1 -0
- package/scss/components/Datagrid/styles/_useExpandedRow.scss +1 -1
- package/scss/components/Datagrid/styles/_useInlineEdit.scss +7 -3
- package/scss/components/Datagrid/styles/addons/_CustomizeColumnsTearsheet.scss +5 -1
- package/scss/components/Datagrid/styles/addons/_FilterPanel.scss +123 -0
- package/scss/components/FilterSummary/_filter-summary.scss +1 -0
- package/scss/components/Tearsheet/_tearsheet.scss +1 -1
- package/es/components/Datagrid/Datagrid.stories/LeftPanelStory.js +0 -6
- package/lib/components/Datagrid/Datagrid.stories/LeftPanelStory.js +0 -13
@@ -21,6 +21,10 @@ import { InlineEditContext } from './addons/InlineEdit/InlineEditContext';
|
|
21
21
|
import { handleGridFocus } from './addons/InlineEdit/handleGridFocus';
|
22
22
|
import { useClickOutside } from '../../../global/js/hooks';
|
23
23
|
import { useMultipleKeyTracking } from '../../DataSpreadsheet/hooks';
|
24
|
+
import FilterPanel from './addons/Filtering/FilterPanel';
|
25
|
+
import { FilterSummary } from '../../FilterSummary';
|
26
|
+
import { FilterContext } from './addons/Filtering';
|
27
|
+
import { CLEAR_FILTERS } from './addons/Filtering/constants';
|
24
28
|
var TableContainer = DataTable.TableContainer,
|
25
29
|
Table = DataTable.Table;
|
26
30
|
var blockClass = "".concat(pkg.prefix, "--datagrid");
|
@@ -28,16 +32,23 @@ export var DatagridContent = function DatagridContent(_ref) {
|
|
28
32
|
var _cx4;
|
29
33
|
var datagridState = _ref.datagridState;
|
30
34
|
var _useContext = useContext(InlineEditContext),
|
31
|
-
|
35
|
+
inlineEditState = _useContext.state,
|
32
36
|
dispatch = _useContext.dispatch;
|
33
|
-
var
|
37
|
+
var _useContext2 = useContext(FilterContext),
|
38
|
+
filterTags = _useContext2.filterTags,
|
39
|
+
EventEmitter = _useContext2.EventEmitter,
|
40
|
+
leftPanelOpen = _useContext2.leftPanelOpen;
|
41
|
+
var activeCellId = inlineEditState.activeCellId,
|
42
|
+
gridActive = inlineEditState.gridActive,
|
43
|
+
editId = inlineEditState.editId;
|
34
44
|
var _datagridState$getTab = datagridState.getTableProps,
|
35
45
|
getTableProps = _datagridState$getTab === void 0 ? function () {} : _datagridState$getTab,
|
46
|
+
getFilterFlyoutProps = datagridState.getFilterFlyoutProps,
|
36
47
|
withVirtualScroll = datagridState.withVirtualScroll,
|
37
48
|
DatagridPagination = datagridState.DatagridPagination,
|
38
49
|
isFetching = datagridState.isFetching,
|
39
50
|
CustomizeColumnsTearsheet = datagridState.CustomizeColumnsTearsheet,
|
40
|
-
|
51
|
+
filterProps = datagridState.filterProps,
|
41
52
|
fullHeightDatagrid = datagridState.fullHeightDatagrid,
|
42
53
|
_datagridState$vertic = datagridState.verticalAlign,
|
43
54
|
verticalAlign = _datagridState$vertic === void 0 ? 'center' : _datagridState$vertic,
|
@@ -49,10 +60,9 @@ export var DatagridContent = function DatagridContent(_ref) {
|
|
49
60
|
tableId = datagridState.tableId,
|
50
61
|
DatagridActions = datagridState.DatagridActions,
|
51
62
|
totalColumnsWidth = datagridState.totalColumnsWidth,
|
52
|
-
gridRef = datagridState.gridRef
|
63
|
+
gridRef = datagridState.gridRef,
|
64
|
+
state = datagridState.state;
|
53
65
|
var rows = DatagridPagination && datagridState.page || datagridState.rows;
|
54
|
-
var gridActive = state.gridActive,
|
55
|
-
editId = state.editId;
|
56
66
|
var gridAreaRef = useRef();
|
57
67
|
var multiKeyTrackingRef = useRef();
|
58
68
|
useClickOutside(gridAreaRef, function (target) {
|
@@ -80,14 +90,14 @@ export var DatagridContent = function DatagridContent(_ref) {
|
|
80
90
|
return handleGridKeyPress({
|
81
91
|
event: event,
|
82
92
|
dispatch: dispatch,
|
83
|
-
|
93
|
+
inlineEditState: inlineEditState,
|
84
94
|
instance: datagridState,
|
85
95
|
keysPressedList: keysPressedList,
|
86
96
|
usingMac: usingMac
|
87
97
|
});
|
88
98
|
} : null,
|
89
99
|
onFocus: withInlineEdit ? function () {
|
90
|
-
return handleGridFocus(
|
100
|
+
return handleGridFocus(inlineEditState, dispatch);
|
91
101
|
} : null
|
92
102
|
}), !withVirtualScroll ? /*#__PURE__*/React.createElement(DatagridHead, datagridState) : null, /*#__PURE__*/React.createElement(DatagridBody, _extends({}, datagridState, {
|
93
103
|
rows: rows
|
@@ -113,34 +123,49 @@ export var DatagridContent = function DatagridContent(_ref) {
|
|
113
123
|
gridElement.style.setProperty("--".concat(blockClass, "--grid-header-height"), px((tableHeader === null || tableHeader === void 0 ? void 0 : tableHeader.clientHeight) || 0));
|
114
124
|
}
|
115
125
|
}, [withInlineEdit, tableId, totalColumnsWidth, datagridState, gridActive]);
|
126
|
+
var renderFilterSummary = function renderFilterSummary() {
|
127
|
+
return state.filters.length > 0 && /*#__PURE__*/React.createElement(FilterSummary, {
|
128
|
+
className: "".concat(blockClass, "__filter-summary"),
|
129
|
+
filters: filterTags,
|
130
|
+
clearFilters: function clearFilters() {
|
131
|
+
return EventEmitter.dispatch(CLEAR_FILTERS);
|
132
|
+
}
|
133
|
+
});
|
134
|
+
};
|
116
135
|
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TableContainer, {
|
117
136
|
className: cx("".concat(blockClass, "__grid-container"), withVirtualScroll || fullHeightDatagrid ? "".concat(blockClass, "__full-height") : '', DatagridPagination ? "".concat(blockClass, "__with-pagination") : '', useDenseHeader ? "".concat(blockClass, "__dense-header") : '', (_cx4 = {}, _defineProperty(_cx4, "".concat(blockClass, "__grid-container-grid-active"), gridActive), _defineProperty(_cx4, "".concat(blockClass, "__grid-container-inline-edit"), withInlineEdit), _defineProperty(_cx4, "".concat(blockClass, "__grid-container-grid-active--without-toolbar"), withInlineEdit && !DatagridActions), _cx4)),
|
118
137
|
title: gridTitle,
|
119
138
|
description: gridDescription
|
120
139
|
}, /*#__PURE__*/React.createElement(DatagridToolbar, datagridState), /*#__PURE__*/React.createElement("div", {
|
121
|
-
className: "".concat(blockClass, "__table-container"),
|
140
|
+
className: cx("".concat(blockClass, "__table-container"), _defineProperty({}, "".concat(blockClass, "__table-container--filter-open"), leftPanelOpen)),
|
122
141
|
ref: gridAreaRef
|
123
|
-
},
|
124
|
-
|
125
|
-
},
|
142
|
+
}, (filterProps === null || filterProps === void 0 ? void 0 : filterProps.variation) === 'panel' && /*#__PURE__*/React.createElement(FilterPanel, _extends({
|
143
|
+
updateMethod: "batch"
|
144
|
+
}, getFilterFlyoutProps(), {
|
145
|
+
title: filterProps.panelTitle,
|
146
|
+
filterSections: filterProps.sections
|
147
|
+
})), /*#__PURE__*/React.createElement("div", {
|
148
|
+
className: "".concat(blockClass, "__table-container-inner")
|
149
|
+
}, renderFilterSummary(), withInlineEdit ? /*#__PURE__*/React.createElement("div", {
|
126
150
|
ref: multiKeyTrackingRef
|
127
151
|
}, renderTable()) : withVirtualScroll ? /*#__PURE__*/React.createElement("div", {
|
128
152
|
className: "".concat(blockClass, "__virtualScrollContainer"),
|
129
153
|
ref: gridRef
|
130
|
-
}, renderTable()) : renderTable())), (rows === null || rows === void 0 ? void 0 : rows.length) > 0 && !isFetching && DatagridPagination && /*#__PURE__*/React.createElement(DatagridPagination, datagridState), CustomizeColumnsTearsheet && /*#__PURE__*/React.createElement(CustomizeColumnsTearsheet, {
|
154
|
+
}, renderTable()) : renderTable()))), (rows === null || rows === void 0 ? void 0 : rows.length) > 0 && !isFetching && DatagridPagination && /*#__PURE__*/React.createElement(DatagridPagination, datagridState), CustomizeColumnsTearsheet && /*#__PURE__*/React.createElement(CustomizeColumnsTearsheet, {
|
131
155
|
instance: datagridState
|
132
156
|
}));
|
133
157
|
};
|
134
158
|
DatagridContent.propTypes = {
|
135
159
|
datagridState: PropTypes.shape({
|
136
160
|
getTableProps: PropTypes.func,
|
161
|
+
getFilterFlyoutProps: PropTypes.func,
|
137
162
|
withVirtualScroll: PropTypes.bool,
|
138
163
|
DatagridActions: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
|
139
164
|
DatagridPagination: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
|
140
165
|
CustomizeColumnsTearsheet: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
|
141
166
|
isFetching: PropTypes.bool,
|
142
|
-
leftPanel: PropTypes.object,
|
143
167
|
fullHeightDatagrid: PropTypes.bool,
|
168
|
+
filterProps: PropTypes.object,
|
144
169
|
variableRowHeight: PropTypes.bool,
|
145
170
|
useDenseHeader: PropTypes.bool,
|
146
171
|
withInlineEdit: PropTypes.bool,
|
@@ -151,6 +176,9 @@ DatagridContent.propTypes = {
|
|
151
176
|
rows: PropTypes.arrayOf(PropTypes.object),
|
152
177
|
tableId: PropTypes.string,
|
153
178
|
totalColumnsWidth: PropTypes.number,
|
154
|
-
gridRef: PropTypes.object
|
179
|
+
gridRef: PropTypes.object,
|
180
|
+
setAllFilters: PropTypes.func,
|
181
|
+
getFilterProps: PropTypes.func,
|
182
|
+
state: PropTypes.object
|
155
183
|
})
|
156
184
|
};
|
@@ -14,10 +14,6 @@ import { useResizeDetector } from 'react-resize-detector';
|
|
14
14
|
import { ButtonMenu, ButtonMenuItem } from '../../ButtonMenu';
|
15
15
|
import { pkg, carbon } from '../../../settings';
|
16
16
|
import cx from 'classnames';
|
17
|
-
import { FilterSummary } from '../../FilterSummary';
|
18
|
-
import { useContext } from 'react';
|
19
|
-
import { FilterContext } from './addons/Filtering/FilterProvider';
|
20
|
-
import { CLEAR_FILTERS } from './addons/Filtering/constants';
|
21
17
|
var blockClass = "".concat(pkg.prefix, "--datagrid");
|
22
18
|
var TableToolbar = DataTable.TableToolbar;
|
23
19
|
var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridState, width, ref) {
|
@@ -134,23 +130,13 @@ var DatagridToolbar = function DatagridToolbar(datagridState) {
|
|
134
130
|
var DatagridActions = datagridState.DatagridActions,
|
135
131
|
DatagridBatchActions = datagridState.DatagridBatchActions,
|
136
132
|
batchActions = datagridState.batchActions,
|
137
|
-
|
138
|
-
var
|
139
|
-
filterTags = _useContext.filterTags,
|
140
|
-
EventEmitter = _useContext.EventEmitter;
|
141
|
-
var renderFilterSummary = function renderFilterSummary() {
|
142
|
-
return state.filters.length > 0 && /*#__PURE__*/React.createElement(FilterSummary, {
|
143
|
-
filters: filterTags,
|
144
|
-
clearFilters: function clearFilters() {
|
145
|
-
return EventEmitter.dispatch(CLEAR_FILTERS);
|
146
|
-
}
|
147
|
-
});
|
148
|
-
};
|
133
|
+
rowSize = datagridState.rowSize;
|
134
|
+
var getRowHeight = rowSize ? rowSize : 'lg';
|
149
135
|
return batchActions && DatagridActions ? /*#__PURE__*/React.createElement("div", {
|
150
136
|
ref: ref,
|
137
|
+
className: cx("".concat(blockClass, "__table-toolbar"), "".concat(blockClass, "__table-toolbar--").concat(getRowHeight))
|
138
|
+
}, /*#__PURE__*/React.createElement(TableToolbar, null, DatagridActions && DatagridActions(datagridState), DatagridBatchActionsToolbar && DatagridBatchActionsToolbar(datagridState, width, ref))) : DatagridActions ? /*#__PURE__*/React.createElement("div", {
|
151
139
|
className: "".concat(blockClass, "__table-toolbar")
|
152
|
-
}, /*#__PURE__*/React.createElement(TableToolbar, null, DatagridActions && DatagridActions(datagridState),
|
153
|
-
className: "".concat(blockClass, "__table-toolbar")
|
154
|
-
}, /*#__PURE__*/React.createElement(TableToolbar, null, DatagridActions && DatagridActions(datagridState), DatagridBatchActions && DatagridBatchActions(datagridState)), renderFilterSummary()) : null;
|
140
|
+
}, /*#__PURE__*/React.createElement(TableToolbar, null, DatagridActions && DatagridActions(datagridState), DatagridBatchActions && DatagridBatchActions(datagridState))) : null;
|
155
141
|
};
|
156
142
|
export default DatagridToolbar;
|
@@ -143,7 +143,7 @@ var DraggableElement = function DraggableElement(_ref) {
|
|
143
143
|
className: "".concat(blockClass, "__shared-ui--assistive-text")
|
144
144
|
}, ariaLabel), isDragging && !isOver ? /*#__PURE__*/React.createElement("div", {
|
145
145
|
ref: preview,
|
146
|
-
className: "
|
146
|
+
className: "".concat(blockClass, "__draggable-handleHolder-droppable ").concat(blockClass, "__draggable-handleHolder-droppable--origin")
|
147
147
|
}, content) : /*#__PURE__*/React.createElement("div", {
|
148
148
|
ref: drag,
|
149
149
|
"aria-hidden": isFocused && isFocusedOnItem // if focus on li, hide the children from aria
|
@@ -17,14 +17,11 @@ import { Button, Checkbox, DatePicker, DatePickerInput, Dropdown, FormGroup, Num
|
|
17
17
|
import cx from 'classnames';
|
18
18
|
import PropTypes from 'prop-types';
|
19
19
|
import React, { useCallback, useRef, useState } from 'react';
|
20
|
-
import { useEffect } from 'react';
|
21
|
-
import { useContext } from 'react';
|
22
20
|
import { useClickOutside } from '../../../../../global/js/hooks';
|
23
21
|
import { pkg } from '../../../../../settings';
|
24
22
|
import { ActionSet } from '../../../../ActionSet';
|
25
|
-
import { BATCH, CHECKBOX, CLEAR_FILTERS, DATE, DROPDOWN, INSTANT, NUMBER, RADIO } from './constants';
|
26
|
-
import {
|
27
|
-
import useInitialStateFromFilters from './hooks/useInitialStateFromFilters';
|
23
|
+
import { BATCH, CHECKBOX, CLEAR_FILTERS, DATE, DROPDOWN, FLYOUT, INSTANT, NUMBER, RADIO } from './constants';
|
24
|
+
import { useInitialStateFromFilters, useSubscribeToEventEmitter } from './hooks';
|
28
25
|
import { getInitialStateFromFilters } from './utils';
|
29
26
|
var blockClass = "".concat(pkg.prefix, "--datagrid");
|
30
27
|
var componentClass = "".concat(blockClass, "-filter-flyout");
|
@@ -50,17 +47,15 @@ var FilterFlyout = function FilterFlyout(_ref) {
|
|
50
47
|
onCancel = _ref$onCancel === void 0 ? function () {} : _ref$onCancel,
|
51
48
|
_ref$secondaryActionL = _ref.secondaryActionLabel,
|
52
49
|
secondaryActionLabel = _ref$secondaryActionL === void 0 ? 'Cancel' : _ref$secondaryActionL,
|
53
|
-
setAllFilters = _ref.setAllFilters
|
54
|
-
|
55
|
-
|
56
|
-
EventEmitter = _useContext.EventEmitter;
|
57
|
-
|
50
|
+
setAllFilters = _ref.setAllFilters,
|
51
|
+
_ref$data = _ref.data,
|
52
|
+
data = _ref$data === void 0 ? [] : _ref$data;
|
58
53
|
/** State */
|
59
54
|
var _useState = useState(false),
|
60
55
|
_useState2 = _slicedToArray(_useState, 2),
|
61
56
|
open = _useState2[0],
|
62
57
|
setOpen = _useState2[1];
|
63
|
-
var _useInitialStateFromF = useInitialStateFromFilters(filters),
|
58
|
+
var _useInitialStateFromF = useInitialStateFromFilters(filters, FLYOUT),
|
64
59
|
_useInitialStateFromF2 = _slicedToArray(_useInitialStateFromF, 2),
|
65
60
|
filtersState = _useInitialStateFromF2[0],
|
66
61
|
setFiltersState = _useInitialStateFromF2[1];
|
@@ -90,6 +85,7 @@ var FilterFlyout = function FilterFlyout(_ref) {
|
|
90
85
|
var apply = function apply() {
|
91
86
|
setAllFilters(filtersObjectArray);
|
92
87
|
closeFlyout();
|
88
|
+
// From the user
|
93
89
|
onApply();
|
94
90
|
|
95
91
|
// updates the ref so next time the flyout opens we have records of the previous filters
|
@@ -106,7 +102,7 @@ var FilterFlyout = function FilterFlyout(_ref) {
|
|
106
102
|
};
|
107
103
|
var reset = function reset() {
|
108
104
|
// Get the initial values for the filters
|
109
|
-
var initialFiltersState = getInitialStateFromFilters(filters);
|
105
|
+
var initialFiltersState = getInitialStateFromFilters(filters, FLYOUT);
|
110
106
|
var initialFiltersObjectArray = [];
|
111
107
|
|
112
108
|
// Set the state to the initial values
|
@@ -149,6 +145,23 @@ var FilterFlyout = function FilterFlyout(_ref) {
|
|
149
145
|
type: type
|
150
146
|
});
|
151
147
|
}
|
148
|
+
if (type === CHECKBOX) {
|
149
|
+
/**
|
150
|
+
When all checkboxes of a group are all unselected the value still exists in the filtersObjectArray
|
151
|
+
This checks if all the checkboxes are selected = false and removes it from the array
|
152
|
+
*/
|
153
|
+
var index = filtersObjectArrayCopy.findIndex(function (filter) {
|
154
|
+
return filter.id === column;
|
155
|
+
});
|
156
|
+
|
157
|
+
// If all the selected state is false remove from array
|
158
|
+
var shouldRemoveFromArray = filtersObjectArrayCopy[index].value.every(function (val) {
|
159
|
+
return val.selected === false;
|
160
|
+
});
|
161
|
+
if (shouldRemoveFromArray) {
|
162
|
+
filtersObjectArrayCopy.splice(index, 1);
|
163
|
+
}
|
164
|
+
}
|
152
165
|
setFiltersObjectArray(filtersObjectArrayCopy);
|
153
166
|
|
154
167
|
// Automatically apply the filters if the updateMethod is instant
|
@@ -160,18 +173,16 @@ var FilterFlyout = function FilterFlyout(_ref) {
|
|
160
173
|
/** Effects */
|
161
174
|
useClickOutside(filterFlyoutRef, function (target) {
|
162
175
|
var hasClickedOnDatePicker = target.closest('.flatpickr-calendar');
|
163
|
-
|
176
|
+
var hasClickedOnDropdown = target.className === 'bx--list-box__menu-item__option';
|
177
|
+
if (!open || hasClickedOnDatePicker || hasClickedOnDropdown) {
|
164
178
|
return;
|
165
179
|
}
|
166
180
|
cancel();
|
167
181
|
});
|
168
|
-
|
169
|
-
// This event is emitted from the DatagridToolbar component when clearFilters is clicked in FilterSummary
|
170
|
-
EventEmitter.subscribe(CLEAR_FILTERS, reset);
|
171
|
-
});
|
182
|
+
useSubscribeToEventEmitter(CLEAR_FILTERS, reset);
|
172
183
|
|
173
184
|
/** Render the individual filter component */
|
174
|
-
var renderFilter =
|
185
|
+
var renderFilter = function renderFilter(_ref3) {
|
175
186
|
var type = _ref3.type,
|
176
187
|
column = _ref3.column,
|
177
188
|
components = _ref3.props;
|
@@ -179,7 +190,10 @@ var FilterFlyout = function FilterFlyout(_ref) {
|
|
179
190
|
return /*#__PURE__*/React.createElement(DatePicker, _extends({}, components.DatePicker, {
|
180
191
|
onChange: function onChange(value) {
|
181
192
|
var _components$DatePicke, _components$DatePicke2;
|
182
|
-
setFiltersState(_objectSpread(_objectSpread({}, filtersState), {}, _defineProperty({}, column,
|
193
|
+
setFiltersState(_objectSpread(_objectSpread({}, filtersState), {}, _defineProperty({}, column, {
|
194
|
+
value: value,
|
195
|
+
type: type
|
196
|
+
})));
|
183
197
|
applyFilters({
|
184
198
|
column: column,
|
185
199
|
value: value,
|
@@ -187,7 +201,7 @@ var FilterFlyout = function FilterFlyout(_ref) {
|
|
187
201
|
});
|
188
202
|
(_components$DatePicke = (_components$DatePicke2 = components.DatePicker).onChange) === null || _components$DatePicke === void 0 ? void 0 : _components$DatePicke.call(_components$DatePicke2, value);
|
189
203
|
},
|
190
|
-
value: filtersState[column],
|
204
|
+
value: filtersState[column].value,
|
191
205
|
datePickerType: "range"
|
192
206
|
}), /*#__PURE__*/React.createElement(DatePickerInput, _extends({
|
193
207
|
placeholder: "mm/dd/yyyy",
|
@@ -204,7 +218,10 @@ var FilterFlyout = function FilterFlyout(_ref) {
|
|
204
218
|
}, components.NumberInput, {
|
205
219
|
onChange: function onChange(event) {
|
206
220
|
var _components$NumberInp, _components$NumberInp2;
|
207
|
-
setFiltersState(_objectSpread(_objectSpread({}, filtersState), {}, _defineProperty({}, column,
|
221
|
+
setFiltersState(_objectSpread(_objectSpread({}, filtersState), {}, _defineProperty({}, column, {
|
222
|
+
value: event.target.value,
|
223
|
+
type: type
|
224
|
+
})));
|
208
225
|
applyFilters({
|
209
226
|
column: column,
|
210
227
|
value: event.target.value,
|
@@ -212,24 +229,27 @@ var FilterFlyout = function FilterFlyout(_ref) {
|
|
212
229
|
});
|
213
230
|
(_components$NumberInp = (_components$NumberInp2 = components.NumberInput).onChange) === null || _components$NumberInp === void 0 ? void 0 : _components$NumberInp.call(_components$NumberInp2, event);
|
214
231
|
},
|
215
|
-
value: filtersState[column]
|
232
|
+
value: filtersState[column].value
|
216
233
|
}));
|
217
234
|
} else if (type === CHECKBOX) {
|
218
|
-
return /*#__PURE__*/React.createElement(FormGroup, components.FormGroup, filtersState[column].map(function (option) {
|
235
|
+
return /*#__PURE__*/React.createElement(FormGroup, components.FormGroup, filtersState[column].value.map(function (option) {
|
219
236
|
return /*#__PURE__*/React.createElement(Checkbox, _extends({
|
220
237
|
key: option.labelText
|
221
238
|
}, option, {
|
222
239
|
onChange: function onChange(isSelected) {
|
223
240
|
var _option$onChange;
|
224
|
-
var checkboxCopy = filtersState[column];
|
241
|
+
var checkboxCopy = filtersState[column].value;
|
225
242
|
var foundCheckbox = checkboxCopy.find(function (checkbox) {
|
226
243
|
return checkbox.value === option.value;
|
227
244
|
});
|
228
245
|
foundCheckbox.selected = isSelected;
|
229
|
-
setFiltersState(_objectSpread(_objectSpread({}, filtersState), {}, _defineProperty({}, column,
|
246
|
+
setFiltersState(_objectSpread(_objectSpread({}, filtersState), {}, _defineProperty({}, column, {
|
247
|
+
value: checkboxCopy,
|
248
|
+
type: type
|
249
|
+
})));
|
230
250
|
applyFilters({
|
231
251
|
column: column,
|
232
|
-
value: _toConsumableArray(filtersState[column]),
|
252
|
+
value: _toConsumableArray(filtersState[column].value),
|
233
253
|
type: type
|
234
254
|
});
|
235
255
|
(_option$onChange = option.onChange) === null || _option$onChange === void 0 ? void 0 : _option$onChange.call(option, isSelected);
|
@@ -239,10 +259,13 @@ var FilterFlyout = function FilterFlyout(_ref) {
|
|
239
259
|
}));
|
240
260
|
} else if (type === RADIO) {
|
241
261
|
return /*#__PURE__*/React.createElement(FormGroup, components.FormGroup, /*#__PURE__*/React.createElement(RadioButtonGroup, _extends({}, components.RadioButtonGroup, {
|
242
|
-
valueSelected: filtersState[column],
|
262
|
+
valueSelected: filtersState[column].value,
|
243
263
|
onChange: function onChange(selected) {
|
244
264
|
var _components$RadioButt, _components$RadioButt2;
|
245
|
-
setFiltersState(_objectSpread(_objectSpread({}, filtersState), {}, _defineProperty({}, column,
|
265
|
+
setFiltersState(_objectSpread(_objectSpread({}, filtersState), {}, _defineProperty({}, column, {
|
266
|
+
value: selected,
|
267
|
+
type: type
|
268
|
+
})));
|
246
269
|
applyFilters({
|
247
270
|
column: column,
|
248
271
|
value: selected,
|
@@ -258,11 +281,14 @@ var FilterFlyout = function FilterFlyout(_ref) {
|
|
258
281
|
})));
|
259
282
|
} else if (type === DROPDOWN) {
|
260
283
|
return /*#__PURE__*/React.createElement(Dropdown, _extends({}, components.Dropdown, {
|
261
|
-
selectedItem: filtersState[column],
|
284
|
+
selectedItem: filtersState[column].value,
|
262
285
|
onChange: function onChange(_ref5) {
|
263
286
|
var _components$Dropdown$, _components$Dropdown;
|
264
287
|
var selectedItem = _ref5.selectedItem;
|
265
|
-
setFiltersState(_objectSpread(_objectSpread({}, filtersState), {}, _defineProperty({}, column,
|
288
|
+
setFiltersState(_objectSpread(_objectSpread({}, filtersState), {}, _defineProperty({}, column, {
|
289
|
+
value: selectedItem,
|
290
|
+
type: type
|
291
|
+
})));
|
266
292
|
applyFilters({
|
267
293
|
column: column,
|
268
294
|
value: selectedItem,
|
@@ -272,12 +298,12 @@ var FilterFlyout = function FilterFlyout(_ref) {
|
|
272
298
|
}
|
273
299
|
}));
|
274
300
|
}
|
275
|
-
}
|
301
|
+
};
|
276
302
|
|
277
303
|
/** Renders all filters */
|
278
|
-
var renderFilters =
|
304
|
+
var renderFilters = function renderFilters() {
|
279
305
|
return filters.map(renderFilter);
|
280
|
-
}
|
306
|
+
};
|
281
307
|
var renderActionSet = function renderActionSet() {
|
282
308
|
return showActionSet && /*#__PURE__*/React.createElement(ActionSet, {
|
283
309
|
actions: [{
|
@@ -306,7 +332,8 @@ var FilterFlyout = function FilterFlyout(_ref) {
|
|
306
332
|
renderIcon: Filter16,
|
307
333
|
iconDescription: flyoutIconDescription,
|
308
334
|
onClick: open ? closeFlyout : openFlyout,
|
309
|
-
className: cx("".concat(componentClass, "__trigger"), _defineProperty({}, "".concat(componentClass, "__trigger--open"), open))
|
335
|
+
className: cx("".concat(componentClass, "__trigger"), _defineProperty({}, "".concat(componentClass, "__trigger--open"), open)),
|
336
|
+
disabled: data.length === 0
|
310
337
|
}), /*#__PURE__*/React.createElement("div", {
|
311
338
|
ref: filterFlyoutRef,
|
312
339
|
className: cx(componentClass, (_cx2 = {}, _defineProperty(_cx2, "".concat(componentClass, "--open"), open), _defineProperty(_cx2, "".concat(componentClass, "--batch"), showActionSet), _defineProperty(_cx2, "".concat(componentClass, "--instant"), !showActionSet), _cx2))
|
@@ -319,6 +346,10 @@ var FilterFlyout = function FilterFlyout(_ref) {
|
|
319
346
|
}, renderFilters())), renderActionSet()));
|
320
347
|
};
|
321
348
|
FilterFlyout.propTypes = {
|
349
|
+
/**
|
350
|
+
* All data rows in the table
|
351
|
+
*/
|
352
|
+
data: PropTypes.array.isRequired,
|
322
353
|
/**
|
323
354
|
* Array of filters to render
|
324
355
|
*/
|