@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
@@ -12,6 +12,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
|
|
12
12
|
*/
|
13
13
|
import { useMemo } from 'react';
|
14
14
|
import { FilterFlyout } from './Datagrid/addons/Filtering';
|
15
|
+
import { BATCH } from './Datagrid/addons/Filtering/constants';
|
15
16
|
var useFiltering = function useFiltering(hooks) {
|
16
17
|
var filterTypes = useMemo(function () {
|
17
18
|
return {
|
@@ -62,14 +63,20 @@ var useFiltering = function useFiltering(hooks) {
|
|
62
63
|
hooks.useInstance.push(function (instance) {
|
63
64
|
var filterProps = instance.filterProps,
|
64
65
|
setAllFilters = instance.setAllFilters,
|
65
|
-
|
66
|
+
setFilter = instance.setFilter,
|
67
|
+
headers = instance.headers,
|
68
|
+
data = instance.data;
|
66
69
|
var defaultProps = {
|
67
|
-
variation: 'flyout'
|
70
|
+
variation: 'flyout',
|
71
|
+
updateMethod: BATCH,
|
72
|
+
panelIconDescription: 'Open filter panel'
|
68
73
|
};
|
69
74
|
var getFilterFlyoutProps = function getFilterFlyoutProps() {
|
70
75
|
return _objectSpread(_objectSpread(_objectSpread({}, defaultProps), filterProps), {}, {
|
71
76
|
setAllFilters: setAllFilters,
|
72
|
-
|
77
|
+
setFilter: setFilter,
|
78
|
+
headers: headers,
|
79
|
+
data: data
|
73
80
|
});
|
74
81
|
};
|
75
82
|
Object.assign(instance, {
|
@@ -6,14 +6,17 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
6
6
|
* LICENSE file in the root directory of this source tree.
|
7
7
|
*/
|
8
8
|
|
9
|
-
import React, { useLayoutEffect, useMemo, useState } from 'react';
|
9
|
+
import React, { useLayoutEffect, useMemo, useContext, useState } from 'react';
|
10
10
|
import { Button, DataTable, OverflowMenu, OverflowMenuItem, ComposedModal, ModalBody, ModalFooter, ModalHeader, Dropdown } from 'carbon-components-react';
|
11
|
-
import { Add16, ChevronDown16, Download16, Restart16 } from '@carbon/icons-react';
|
11
|
+
import { Add16, ChevronDown16, Download16, Filter16, Restart16 } from '@carbon/icons-react';
|
12
12
|
import { action } from '@storybook/addon-actions';
|
13
13
|
import { pkg } from '../../../settings';
|
14
14
|
import { ButtonMenu, ButtonMenuItem } from '../../ButtonMenu';
|
15
|
+
import { FilterContext } from '../Datagrid/addons/Filtering';
|
15
16
|
var blockClass = "".concat(pkg.prefix, "--datagrid");
|
16
17
|
export var DatagridActions = function DatagridActions(datagridState) {
|
18
|
+
var _useContext = useContext(FilterContext),
|
19
|
+
setLeftPanelOpen = _useContext.setLeftPanelOpen;
|
17
20
|
var selectedFlatRows = datagridState.selectedFlatRows,
|
18
21
|
setGlobalFilter = datagridState.setGlobalFilter,
|
19
22
|
CustomizeColumnsButton = datagridState.CustomizeColumnsButton,
|
@@ -22,6 +25,7 @@ export var DatagridActions = function DatagridActions(datagridState) {
|
|
22
25
|
useDenseHeader = datagridState.useDenseHeader,
|
23
26
|
filterProps = datagridState.filterProps,
|
24
27
|
getFilterFlyoutProps = datagridState.getFilterFlyoutProps,
|
28
|
+
data = datagridState.data,
|
25
29
|
FilterFlyout = datagridState.FilterFlyout;
|
26
30
|
var downloadCsv = function downloadCsv() {
|
27
31
|
alert('Downloading...');
|
@@ -45,6 +49,23 @@ export var DatagridActions = function DatagridActions(datagridState) {
|
|
45
49
|
var renderFilterFlyout = function renderFilterFlyout() {
|
46
50
|
return (filterProps === null || filterProps === void 0 ? void 0 : filterProps.variation) === 'flyout' && /*#__PURE__*/React.createElement(FilterFlyout, getFilterFlyoutProps());
|
47
51
|
};
|
52
|
+
var renderFilterPanelButton = function renderFilterPanelButton() {
|
53
|
+
return (filterProps === null || filterProps === void 0 ? void 0 : filterProps.variation) === 'panel' && /*#__PURE__*/React.createElement(Button, {
|
54
|
+
kind: "ghost",
|
55
|
+
hasIconOnly: true,
|
56
|
+
tooltipPosition: "bottom",
|
57
|
+
renderIcon: Filter16,
|
58
|
+
iconDescription: filterProps.panelIconDescription,
|
59
|
+
className: "".concat(blockClass, "-filter-panel-open-button"),
|
60
|
+
onClick: function onClick() {
|
61
|
+
return setLeftPanelOpen(function (open) {
|
62
|
+
return !open;
|
63
|
+
});
|
64
|
+
},
|
65
|
+
disabled: data.length === 0,
|
66
|
+
tooltipAlignment: "start"
|
67
|
+
});
|
68
|
+
};
|
48
69
|
var _useState = useState(false),
|
49
70
|
_useState2 = _slicedToArray(_useState, 2),
|
50
71
|
modalOpen = _useState2[0],
|
@@ -66,7 +87,7 @@ export var DatagridActions = function DatagridActions(datagridState) {
|
|
66
87
|
var items = ['Option 1', 'Option 2', 'Option 3'];
|
67
88
|
return isNothingSelected && (useDenseHeader && useDenseHeader ? /*#__PURE__*/React.createElement(TableToolbarContent, {
|
68
89
|
size: "sm"
|
69
|
-
}, !mobileToolbar ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
|
90
|
+
}, !mobileToolbar ? /*#__PURE__*/React.createElement(React.Fragment, null, renderFilterPanelButton(), /*#__PURE__*/React.createElement("div", {
|
70
91
|
style: style
|
71
92
|
}, /*#__PURE__*/React.createElement(Button, {
|
72
93
|
kind: "ghost",
|
@@ -111,7 +132,7 @@ export var DatagridActions = function DatagridActions(datagridState) {
|
|
111
132
|
itemText: "Create",
|
112
133
|
hasDivider: true,
|
113
134
|
requireTitle: true
|
114
|
-
}))) : !mobileToolbar ? /*#__PURE__*/React.createElement(TableToolbarContent, null, /*#__PURE__*/React.createElement(TableToolbarSearch, {
|
135
|
+
}))) : !mobileToolbar ? /*#__PURE__*/React.createElement(TableToolbarContent, null, renderFilterPanelButton(), /*#__PURE__*/React.createElement(TableToolbarSearch, {
|
115
136
|
size: "xl",
|
116
137
|
id: "columnSearch",
|
117
138
|
persistent: true,
|
@@ -153,7 +174,7 @@ export var DatagridActions = function DatagridActions(datagridState) {
|
|
153
174
|
}), /*#__PURE__*/React.createElement(ButtonMenuItem, {
|
154
175
|
itemText: "Option 3",
|
155
176
|
onClick: action("Click on ButtonMenu Option 3")
|
156
|
-
}))) : /*#__PURE__*/React.createElement(TableToolbarContent, null, /*#__PURE__*/React.createElement(TableToolbarSearch, {
|
177
|
+
}))) : /*#__PURE__*/React.createElement(TableToolbarContent, null, renderFilterPanelButton(), /*#__PURE__*/React.createElement(TableToolbarSearch, {
|
157
178
|
size: "xl",
|
158
179
|
id: "columnSearch",
|
159
180
|
persistent: true,
|
@@ -161,7 +182,39 @@ export var DatagridActions = function DatagridActions(datagridState) {
|
|
161
182
|
onChange: function onChange(e) {
|
162
183
|
return setGlobalFilter(e.target.value);
|
163
184
|
}
|
164
|
-
}), /*#__PURE__*/React.createElement(
|
185
|
+
}), renderFilterFlyout(), /*#__PURE__*/React.createElement(RowSizeDropdown, rowSizeDropdownProps), /*#__PURE__*/React.createElement("div", {
|
186
|
+
style: style
|
187
|
+
}, /*#__PURE__*/React.createElement(Button, {
|
188
|
+
kind: "ghost",
|
189
|
+
hasIconOnly: true,
|
190
|
+
tooltipPosition: "bottom",
|
191
|
+
renderIcon: Restart16,
|
192
|
+
iconDescription: 'Refresh',
|
193
|
+
onClick: refreshColumns
|
194
|
+
})), /*#__PURE__*/React.createElement("div", {
|
195
|
+
style: style
|
196
|
+
}, /*#__PURE__*/React.createElement(Button, {
|
197
|
+
kind: "ghost",
|
198
|
+
hasIconOnly: true,
|
199
|
+
tooltipPosition: "bottom",
|
200
|
+
renderIcon: Download16,
|
201
|
+
iconDescription: 'Download CSV',
|
202
|
+
onClick: downloadCsv
|
203
|
+
})), CustomizeColumnsButton && /*#__PURE__*/React.createElement("div", {
|
204
|
+
style: style
|
205
|
+
}, /*#__PURE__*/React.createElement(CustomizeColumnsButton, null)), /*#__PURE__*/React.createElement(ButtonMenu, {
|
206
|
+
label: "Primary button",
|
207
|
+
renderIcon: Add16
|
208
|
+
}, /*#__PURE__*/React.createElement(ButtonMenuItem, {
|
209
|
+
itemText: "Option 1",
|
210
|
+
onClick: action("Click on ButtonMenu Option 1")
|
211
|
+
}), /*#__PURE__*/React.createElement(ButtonMenuItem, {
|
212
|
+
itemText: "Option 2",
|
213
|
+
onClick: action("Click on ButtonMenu Option 2")
|
214
|
+
}), /*#__PURE__*/React.createElement(ButtonMenuItem, {
|
215
|
+
itemText: "Option 3",
|
216
|
+
onClick: action("Click on ButtonMenu Option 3")
|
217
|
+
})), /*#__PURE__*/React.createElement(OverflowMenu, {
|
165
218
|
ariaLabel: "Tools",
|
166
219
|
size: "lg",
|
167
220
|
flipped: true,
|
@@ -69,7 +69,7 @@ AddSelect.propTypes = {
|
|
69
69
|
options: _propTypes.default.array
|
70
70
|
}),
|
71
71
|
sortBy: _propTypes.default.array,
|
72
|
-
filterBy: _propTypes.default.
|
72
|
+
filterBy: _propTypes.default.string,
|
73
73
|
entries: _propTypes.default.arrayOf(_propTypes.default.shape({
|
74
74
|
avatar: _propTypes.default.shape({
|
75
75
|
alt: _propTypes.default.string,
|
@@ -321,7 +321,7 @@ AddSelectBody.propTypes = {
|
|
321
321
|
options: _propTypes.default.array
|
322
322
|
}),
|
323
323
|
sortBy: _propTypes.default.array,
|
324
|
-
filterBy: _propTypes.default.
|
324
|
+
filterBy: _propTypes.default.string,
|
325
325
|
entries: _propTypes.default.arrayOf(_propTypes.default.shape({
|
326
326
|
avatar: _propTypes.default.shape({
|
327
327
|
alt: _propTypes.default.string,
|
@@ -127,7 +127,6 @@ var AddSelectColumn = function AddSelectColumn(_ref) {
|
|
127
127
|
if (filters.length === 0) {
|
128
128
|
return true;
|
129
129
|
}
|
130
|
-
var filterBy = item.filterBy;
|
131
130
|
var filterByValue = item[filterBy];
|
132
131
|
return filters.some(function (filter) {
|
133
132
|
return filter === filterByValue;
|
@@ -177,6 +176,7 @@ var AddSelectColumn = function AddSelectColumn(_ref) {
|
|
177
176
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
178
177
|
className: "".concat(_settings.carbon.prefix, "--overflow-menu-options__btn")
|
179
178
|
}, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Checkbox, {
|
179
|
+
className: "".concat(colClass, "-filter-checkbox"),
|
180
180
|
id: opt,
|
181
181
|
labelText: opt,
|
182
182
|
onChange: function onChange(checked) {
|
@@ -30,7 +30,7 @@ var Datagrid = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
30
30
|
DatagridPagination = datagridState.DatagridPagination,
|
31
31
|
isFetching = datagridState.isFetching,
|
32
32
|
tableId = datagridState.tableId,
|
33
|
-
|
33
|
+
filterProps = datagridState.filterProps,
|
34
34
|
className = datagridState.className,
|
35
35
|
filters = datagridState.state.filters;
|
36
36
|
var rows = DatagridPagination && datagridState.page || datagridState.rows;
|
@@ -40,11 +40,11 @@ var Datagrid = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
40
40
|
id: tableId,
|
41
41
|
ref: ref,
|
42
42
|
className: (0, _classnames.default)(className, blockClass, withVirtualScroll ? "".concat(blockClass, "__datagridWrap") : "".concat(blockClass, "__datagridWrap-simple"), !isFetching && rows.length === 0 ? "".concat(blockClass, "__empty-state") : '')
|
43
|
-
}, (0, _devtools.getDevtoolsProps)(componentName)),
|
43
|
+
}, (0, _devtools.getDevtoolsProps)(componentName)), (filterProps === null || filterProps === void 0 ? void 0 : filterProps.variation) === 'panel' ? /*#__PURE__*/_react.default.createElement("div", {
|
44
44
|
className: "".concat(blockClass, "__datagridWithPanel ").concat(blockClass, "__displayFlex ").concat(blockClass, "__leftPanel-position")
|
45
45
|
}, /*#__PURE__*/_react.default.createElement(_DatagridContent.DatagridContent, {
|
46
46
|
datagridState: datagridState
|
47
|
-
}))
|
47
|
+
})) : /*#__PURE__*/_react.default.createElement(_DatagridContent.DatagridContent, {
|
48
48
|
datagridState: datagridState
|
49
49
|
}))));
|
50
50
|
});
|
@@ -22,6 +22,10 @@ var _InlineEditContext = require("./addons/InlineEdit/InlineEditContext");
|
|
22
22
|
var _handleGridFocus = require("./addons/InlineEdit/handleGridFocus");
|
23
23
|
var _hooks = require("../../../global/js/hooks");
|
24
24
|
var _hooks2 = require("../../DataSpreadsheet/hooks");
|
25
|
+
var _FilterPanel = _interopRequireDefault(require("./addons/Filtering/FilterPanel"));
|
26
|
+
var _FilterSummary = require("../../FilterSummary");
|
27
|
+
var _Filtering = require("./addons/Filtering");
|
28
|
+
var _constants = require("./addons/Filtering/constants");
|
25
29
|
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); }
|
26
30
|
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; }
|
27
31
|
/**
|
@@ -38,16 +42,23 @@ var DatagridContent = function DatagridContent(_ref) {
|
|
38
42
|
var _cx4;
|
39
43
|
var datagridState = _ref.datagridState;
|
40
44
|
var _useContext = (0, _react.useContext)(_InlineEditContext.InlineEditContext),
|
41
|
-
|
45
|
+
inlineEditState = _useContext.state,
|
42
46
|
dispatch = _useContext.dispatch;
|
43
|
-
var
|
47
|
+
var _useContext2 = (0, _react.useContext)(_Filtering.FilterContext),
|
48
|
+
filterTags = _useContext2.filterTags,
|
49
|
+
EventEmitter = _useContext2.EventEmitter,
|
50
|
+
leftPanelOpen = _useContext2.leftPanelOpen;
|
51
|
+
var activeCellId = inlineEditState.activeCellId,
|
52
|
+
gridActive = inlineEditState.gridActive,
|
53
|
+
editId = inlineEditState.editId;
|
44
54
|
var _datagridState$getTab = datagridState.getTableProps,
|
45
55
|
getTableProps = _datagridState$getTab === void 0 ? function () {} : _datagridState$getTab,
|
56
|
+
getFilterFlyoutProps = datagridState.getFilterFlyoutProps,
|
46
57
|
withVirtualScroll = datagridState.withVirtualScroll,
|
47
58
|
DatagridPagination = datagridState.DatagridPagination,
|
48
59
|
isFetching = datagridState.isFetching,
|
49
60
|
CustomizeColumnsTearsheet = datagridState.CustomizeColumnsTearsheet,
|
50
|
-
|
61
|
+
filterProps = datagridState.filterProps,
|
51
62
|
fullHeightDatagrid = datagridState.fullHeightDatagrid,
|
52
63
|
_datagridState$vertic = datagridState.verticalAlign,
|
53
64
|
verticalAlign = _datagridState$vertic === void 0 ? 'center' : _datagridState$vertic,
|
@@ -59,10 +70,9 @@ var DatagridContent = function DatagridContent(_ref) {
|
|
59
70
|
tableId = datagridState.tableId,
|
60
71
|
DatagridActions = datagridState.DatagridActions,
|
61
72
|
totalColumnsWidth = datagridState.totalColumnsWidth,
|
62
|
-
gridRef = datagridState.gridRef
|
73
|
+
gridRef = datagridState.gridRef,
|
74
|
+
state = datagridState.state;
|
63
75
|
var rows = DatagridPagination && datagridState.page || datagridState.rows;
|
64
|
-
var gridActive = state.gridActive,
|
65
|
-
editId = state.editId;
|
66
76
|
var gridAreaRef = (0, _react.useRef)();
|
67
77
|
var multiKeyTrackingRef = (0, _react.useRef)();
|
68
78
|
(0, _hooks.useClickOutside)(gridAreaRef, function (target) {
|
@@ -90,14 +100,14 @@ var DatagridContent = function DatagridContent(_ref) {
|
|
90
100
|
return (0, _handleGridKeyPress.handleGridKeyPress)({
|
91
101
|
event: event,
|
92
102
|
dispatch: dispatch,
|
93
|
-
|
103
|
+
inlineEditState: inlineEditState,
|
94
104
|
instance: datagridState,
|
95
105
|
keysPressedList: keysPressedList,
|
96
106
|
usingMac: usingMac
|
97
107
|
});
|
98
108
|
} : null,
|
99
109
|
onFocus: withInlineEdit ? function () {
|
100
|
-
return (0, _handleGridFocus.handleGridFocus)(
|
110
|
+
return (0, _handleGridFocus.handleGridFocus)(inlineEditState, dispatch);
|
101
111
|
} : null
|
102
112
|
}), !withVirtualScroll ? /*#__PURE__*/_react.default.createElement(_DatagridHead.default, datagridState) : null, /*#__PURE__*/_react.default.createElement(_DatagridBody.default, (0, _extends2.default)({}, datagridState, {
|
103
113
|
rows: rows
|
@@ -123,21 +133,35 @@ var DatagridContent = function DatagridContent(_ref) {
|
|
123
133
|
gridElement.style.setProperty("--".concat(blockClass, "--grid-header-height"), (0, _layout.px)((tableHeader === null || tableHeader === void 0 ? void 0 : tableHeader.clientHeight) || 0));
|
124
134
|
}
|
125
135
|
}, [withInlineEdit, tableId, totalColumnsWidth, datagridState, gridActive]);
|
136
|
+
var renderFilterSummary = function renderFilterSummary() {
|
137
|
+
return state.filters.length > 0 && /*#__PURE__*/_react.default.createElement(_FilterSummary.FilterSummary, {
|
138
|
+
className: "".concat(blockClass, "__filter-summary"),
|
139
|
+
filters: filterTags,
|
140
|
+
clearFilters: function clearFilters() {
|
141
|
+
return EventEmitter.dispatch(_constants.CLEAR_FILTERS);
|
142
|
+
}
|
143
|
+
});
|
144
|
+
};
|
126
145
|
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(TableContainer, {
|
127
146
|
className: (0, _classnames.default)("".concat(blockClass, "__grid-container"), withVirtualScroll || fullHeightDatagrid ? "".concat(blockClass, "__full-height") : '', DatagridPagination ? "".concat(blockClass, "__with-pagination") : '', useDenseHeader ? "".concat(blockClass, "__dense-header") : '', (_cx4 = {}, (0, _defineProperty2.default)(_cx4, "".concat(blockClass, "__grid-container-grid-active"), gridActive), (0, _defineProperty2.default)(_cx4, "".concat(blockClass, "__grid-container-inline-edit"), withInlineEdit), (0, _defineProperty2.default)(_cx4, "".concat(blockClass, "__grid-container-grid-active--without-toolbar"), withInlineEdit && !DatagridActions), _cx4)),
|
128
147
|
title: gridTitle,
|
129
148
|
description: gridDescription
|
130
149
|
}, /*#__PURE__*/_react.default.createElement(_DatagridToolbar.default, datagridState), /*#__PURE__*/_react.default.createElement("div", {
|
131
|
-
className: "".concat(blockClass, "__table-container"),
|
150
|
+
className: (0, _classnames.default)("".concat(blockClass, "__table-container"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__table-container--filter-open"), leftPanelOpen)),
|
132
151
|
ref: gridAreaRef
|
133
|
-
},
|
134
|
-
|
135
|
-
},
|
152
|
+
}, (filterProps === null || filterProps === void 0 ? void 0 : filterProps.variation) === 'panel' && /*#__PURE__*/_react.default.createElement(_FilterPanel.default, (0, _extends2.default)({
|
153
|
+
updateMethod: "batch"
|
154
|
+
}, getFilterFlyoutProps(), {
|
155
|
+
title: filterProps.panelTitle,
|
156
|
+
filterSections: filterProps.sections
|
157
|
+
})), /*#__PURE__*/_react.default.createElement("div", {
|
158
|
+
className: "".concat(blockClass, "__table-container-inner")
|
159
|
+
}, renderFilterSummary(), withInlineEdit ? /*#__PURE__*/_react.default.createElement("div", {
|
136
160
|
ref: multiKeyTrackingRef
|
137
161
|
}, renderTable()) : withVirtualScroll ? /*#__PURE__*/_react.default.createElement("div", {
|
138
162
|
className: "".concat(blockClass, "__virtualScrollContainer"),
|
139
163
|
ref: gridRef
|
140
|
-
}, renderTable()) : renderTable())), (rows === null || rows === void 0 ? void 0 : rows.length) > 0 && !isFetching && DatagridPagination && /*#__PURE__*/_react.default.createElement(DatagridPagination, datagridState), CustomizeColumnsTearsheet && /*#__PURE__*/_react.default.createElement(CustomizeColumnsTearsheet, {
|
164
|
+
}, renderTable()) : renderTable()))), (rows === null || rows === void 0 ? void 0 : rows.length) > 0 && !isFetching && DatagridPagination && /*#__PURE__*/_react.default.createElement(DatagridPagination, datagridState), CustomizeColumnsTearsheet && /*#__PURE__*/_react.default.createElement(CustomizeColumnsTearsheet, {
|
141
165
|
instance: datagridState
|
142
166
|
}));
|
143
167
|
};
|
@@ -145,13 +169,14 @@ exports.DatagridContent = DatagridContent;
|
|
145
169
|
DatagridContent.propTypes = {
|
146
170
|
datagridState: _propTypes.default.shape({
|
147
171
|
getTableProps: _propTypes.default.func,
|
172
|
+
getFilterFlyoutProps: _propTypes.default.func,
|
148
173
|
withVirtualScroll: _propTypes.default.bool,
|
149
174
|
DatagridActions: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.func]),
|
150
175
|
DatagridPagination: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.func]),
|
151
176
|
CustomizeColumnsTearsheet: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.func]),
|
152
177
|
isFetching: _propTypes.default.bool,
|
153
|
-
leftPanel: _propTypes.default.object,
|
154
178
|
fullHeightDatagrid: _propTypes.default.bool,
|
179
|
+
filterProps: _propTypes.default.object,
|
155
180
|
variableRowHeight: _propTypes.default.bool,
|
156
181
|
useDenseHeader: _propTypes.default.bool,
|
157
182
|
withInlineEdit: _propTypes.default.bool,
|
@@ -162,6 +187,9 @@ DatagridContent.propTypes = {
|
|
162
187
|
rows: _propTypes.default.arrayOf(_propTypes.default.object),
|
163
188
|
tableId: _propTypes.default.string,
|
164
189
|
totalColumnsWidth: _propTypes.default.number,
|
165
|
-
gridRef: _propTypes.default.object
|
190
|
+
gridRef: _propTypes.default.object,
|
191
|
+
setAllFilters: _propTypes.default.func,
|
192
|
+
getFilterProps: _propTypes.default.func,
|
193
|
+
state: _propTypes.default.object
|
166
194
|
})
|
167
195
|
};
|
@@ -15,9 +15,6 @@ var _reactResizeDetector = require("react-resize-detector");
|
|
15
15
|
var _ButtonMenu = require("../../ButtonMenu");
|
16
16
|
var _settings = require("../../../settings");
|
17
17
|
var _classnames = _interopRequireDefault(require("classnames"));
|
18
|
-
var _FilterSummary = require("../../FilterSummary");
|
19
|
-
var _FilterProvider = require("./addons/Filtering/FilterProvider");
|
20
|
-
var _constants = require("./addons/Filtering/constants");
|
21
18
|
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); }
|
22
19
|
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; }
|
23
20
|
/**
|
@@ -143,24 +140,14 @@ var DatagridToolbar = function DatagridToolbar(datagridState) {
|
|
143
140
|
var DatagridActions = datagridState.DatagridActions,
|
144
141
|
DatagridBatchActions = datagridState.DatagridBatchActions,
|
145
142
|
batchActions = datagridState.batchActions,
|
146
|
-
|
147
|
-
var
|
148
|
-
filterTags = _useContext.filterTags,
|
149
|
-
EventEmitter = _useContext.EventEmitter;
|
150
|
-
var renderFilterSummary = function renderFilterSummary() {
|
151
|
-
return state.filters.length > 0 && /*#__PURE__*/_react.default.createElement(_FilterSummary.FilterSummary, {
|
152
|
-
filters: filterTags,
|
153
|
-
clearFilters: function clearFilters() {
|
154
|
-
return EventEmitter.dispatch(_constants.CLEAR_FILTERS);
|
155
|
-
}
|
156
|
-
});
|
157
|
-
};
|
143
|
+
rowSize = datagridState.rowSize;
|
144
|
+
var getRowHeight = rowSize ? rowSize : 'lg';
|
158
145
|
return batchActions && DatagridActions ? /*#__PURE__*/_react.default.createElement("div", {
|
159
146
|
ref: ref,
|
147
|
+
className: (0, _classnames.default)("".concat(blockClass, "__table-toolbar"), "".concat(blockClass, "__table-toolbar--").concat(getRowHeight))
|
148
|
+
}, /*#__PURE__*/_react.default.createElement(TableToolbar, null, DatagridActions && DatagridActions(datagridState), DatagridBatchActionsToolbar && DatagridBatchActionsToolbar(datagridState, width, ref))) : DatagridActions ? /*#__PURE__*/_react.default.createElement("div", {
|
160
149
|
className: "".concat(blockClass, "__table-toolbar")
|
161
|
-
}, /*#__PURE__*/_react.default.createElement(TableToolbar, null, DatagridActions && DatagridActions(datagridState),
|
162
|
-
className: "".concat(blockClass, "__table-toolbar")
|
163
|
-
}, /*#__PURE__*/_react.default.createElement(TableToolbar, null, DatagridActions && DatagridActions(datagridState), DatagridBatchActions && DatagridBatchActions(datagridState)), renderFilterSummary()) : null;
|
150
|
+
}, /*#__PURE__*/_react.default.createElement(TableToolbar, null, DatagridActions && DatagridActions(datagridState), DatagridBatchActions && DatagridBatchActions(datagridState))) : null;
|
164
151
|
};
|
165
152
|
var _default = DatagridToolbar;
|
166
153
|
exports.default = _default;
|
@@ -154,7 +154,7 @@ var DraggableElement = function DraggableElement(_ref) {
|
|
154
154
|
className: "".concat(blockClass, "__shared-ui--assistive-text")
|
155
155
|
}, ariaLabel), isDragging && !isOver ? /*#__PURE__*/React.createElement("div", {
|
156
156
|
ref: preview,
|
157
|
-
className: "
|
157
|
+
className: "".concat(blockClass, "__draggable-handleHolder-droppable ").concat(blockClass, "__draggable-handleHolder-droppable--origin")
|
158
158
|
}, content) : /*#__PURE__*/React.createElement("div", {
|
159
159
|
ref: drag,
|
160
160
|
"aria-hidden": isFocused && isFocusedOnItem // if focus on li, hide the children from aria
|
@@ -19,8 +19,7 @@ var _hooks = require("../../../../../global/js/hooks");
|
|
19
19
|
var _settings = require("../../../../../settings");
|
20
20
|
var _ActionSet = require("../../../../ActionSet");
|
21
21
|
var _constants = require("./constants");
|
22
|
-
var
|
23
|
-
var _useInitialStateFromFilters = _interopRequireDefault(require("./hooks/useInitialStateFromFilters"));
|
22
|
+
var _hooks2 = require("./hooks");
|
24
23
|
var _utils = require("./utils");
|
25
24
|
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); }
|
26
25
|
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; }
|
@@ -50,17 +49,15 @@ var FilterFlyout = function FilterFlyout(_ref) {
|
|
50
49
|
onCancel = _ref$onCancel === void 0 ? function () {} : _ref$onCancel,
|
51
50
|
_ref$secondaryActionL = _ref.secondaryActionLabel,
|
52
51
|
secondaryActionLabel = _ref$secondaryActionL === void 0 ? 'Cancel' : _ref$secondaryActionL,
|
53
|
-
setAllFilters = _ref.setAllFilters
|
54
|
-
|
55
|
-
|
56
|
-
EventEmitter = _useContext.EventEmitter;
|
57
|
-
|
52
|
+
setAllFilters = _ref.setAllFilters,
|
53
|
+
_ref$data = _ref.data,
|
54
|
+
data = _ref$data === void 0 ? [] : _ref$data;
|
58
55
|
/** State */
|
59
56
|
var _useState = (0, _react.useState)(false),
|
60
57
|
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
61
58
|
open = _useState2[0],
|
62
59
|
setOpen = _useState2[1];
|
63
|
-
var _useInitialStateFromF = (0,
|
60
|
+
var _useInitialStateFromF = (0, _hooks2.useInitialStateFromFilters)(filters, _constants.FLYOUT),
|
64
61
|
_useInitialStateFromF2 = (0, _slicedToArray2.default)(_useInitialStateFromF, 2),
|
65
62
|
filtersState = _useInitialStateFromF2[0],
|
66
63
|
setFiltersState = _useInitialStateFromF2[1];
|
@@ -90,6 +87,7 @@ var FilterFlyout = function FilterFlyout(_ref) {
|
|
90
87
|
var apply = function apply() {
|
91
88
|
setAllFilters(filtersObjectArray);
|
92
89
|
closeFlyout();
|
90
|
+
// From the user
|
93
91
|
onApply();
|
94
92
|
|
95
93
|
// updates the ref so next time the flyout opens we have records of the previous filters
|
@@ -106,7 +104,7 @@ var FilterFlyout = function FilterFlyout(_ref) {
|
|
106
104
|
};
|
107
105
|
var reset = function reset() {
|
108
106
|
// Get the initial values for the filters
|
109
|
-
var initialFiltersState = (0, _utils.getInitialStateFromFilters)(filters);
|
107
|
+
var initialFiltersState = (0, _utils.getInitialStateFromFilters)(filters, _constants.FLYOUT);
|
110
108
|
var initialFiltersObjectArray = [];
|
111
109
|
|
112
110
|
// Set the state to the initial values
|
@@ -149,6 +147,23 @@ var FilterFlyout = function FilterFlyout(_ref) {
|
|
149
147
|
type: type
|
150
148
|
});
|
151
149
|
}
|
150
|
+
if (type === _constants.CHECKBOX) {
|
151
|
+
/**
|
152
|
+
When all checkboxes of a group are all unselected the value still exists in the filtersObjectArray
|
153
|
+
This checks if all the checkboxes are selected = false and removes it from the array
|
154
|
+
*/
|
155
|
+
var index = filtersObjectArrayCopy.findIndex(function (filter) {
|
156
|
+
return filter.id === column;
|
157
|
+
});
|
158
|
+
|
159
|
+
// If all the selected state is false remove from array
|
160
|
+
var shouldRemoveFromArray = filtersObjectArrayCopy[index].value.every(function (val) {
|
161
|
+
return val.selected === false;
|
162
|
+
});
|
163
|
+
if (shouldRemoveFromArray) {
|
164
|
+
filtersObjectArrayCopy.splice(index, 1);
|
165
|
+
}
|
166
|
+
}
|
152
167
|
setFiltersObjectArray(filtersObjectArrayCopy);
|
153
168
|
|
154
169
|
// Automatically apply the filters if the updateMethod is instant
|
@@ -160,18 +175,16 @@ var FilterFlyout = function FilterFlyout(_ref) {
|
|
160
175
|
/** Effects */
|
161
176
|
(0, _hooks.useClickOutside)(filterFlyoutRef, function (target) {
|
162
177
|
var hasClickedOnDatePicker = target.closest('.flatpickr-calendar');
|
163
|
-
|
178
|
+
var hasClickedOnDropdown = target.className === 'bx--list-box__menu-item__option';
|
179
|
+
if (!open || hasClickedOnDatePicker || hasClickedOnDropdown) {
|
164
180
|
return;
|
165
181
|
}
|
166
182
|
cancel();
|
167
183
|
});
|
168
|
-
(0,
|
169
|
-
// This event is emitted from the DatagridToolbar component when clearFilters is clicked in FilterSummary
|
170
|
-
EventEmitter.subscribe(_constants.CLEAR_FILTERS, reset);
|
171
|
-
});
|
184
|
+
(0, _hooks2.useSubscribeToEventEmitter)(_constants.CLEAR_FILTERS, reset);
|
172
185
|
|
173
186
|
/** Render the individual filter component */
|
174
|
-
var renderFilter =
|
187
|
+
var renderFilter = function renderFilter(_ref3) {
|
175
188
|
var type = _ref3.type,
|
176
189
|
column = _ref3.column,
|
177
190
|
components = _ref3.props;
|
@@ -179,7 +192,10 @@ var FilterFlyout = function FilterFlyout(_ref) {
|
|
179
192
|
return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.DatePicker, (0, _extends2.default)({}, components.DatePicker, {
|
180
193
|
onChange: function onChange(value) {
|
181
194
|
var _components$DatePicke, _components$DatePicke2;
|
182
|
-
setFiltersState(_objectSpread(_objectSpread({}, filtersState), {}, (0, _defineProperty2.default)({}, column,
|
195
|
+
setFiltersState(_objectSpread(_objectSpread({}, filtersState), {}, (0, _defineProperty2.default)({}, column, {
|
196
|
+
value: value,
|
197
|
+
type: type
|
198
|
+
})));
|
183
199
|
applyFilters({
|
184
200
|
column: column,
|
185
201
|
value: value,
|
@@ -187,7 +203,7 @@ var FilterFlyout = function FilterFlyout(_ref) {
|
|
187
203
|
});
|
188
204
|
(_components$DatePicke = (_components$DatePicke2 = components.DatePicker).onChange) === null || _components$DatePicke === void 0 ? void 0 : _components$DatePicke.call(_components$DatePicke2, value);
|
189
205
|
},
|
190
|
-
value: filtersState[column],
|
206
|
+
value: filtersState[column].value,
|
191
207
|
datePickerType: "range"
|
192
208
|
}), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.DatePickerInput, (0, _extends2.default)({
|
193
209
|
placeholder: "mm/dd/yyyy",
|
@@ -204,7 +220,10 @@ var FilterFlyout = function FilterFlyout(_ref) {
|
|
204
220
|
}, components.NumberInput, {
|
205
221
|
onChange: function onChange(event) {
|
206
222
|
var _components$NumberInp, _components$NumberInp2;
|
207
|
-
setFiltersState(_objectSpread(_objectSpread({}, filtersState), {}, (0, _defineProperty2.default)({}, column,
|
223
|
+
setFiltersState(_objectSpread(_objectSpread({}, filtersState), {}, (0, _defineProperty2.default)({}, column, {
|
224
|
+
value: event.target.value,
|
225
|
+
type: type
|
226
|
+
})));
|
208
227
|
applyFilters({
|
209
228
|
column: column,
|
210
229
|
value: event.target.value,
|
@@ -212,24 +231,27 @@ var FilterFlyout = function FilterFlyout(_ref) {
|
|
212
231
|
});
|
213
232
|
(_components$NumberInp = (_components$NumberInp2 = components.NumberInput).onChange) === null || _components$NumberInp === void 0 ? void 0 : _components$NumberInp.call(_components$NumberInp2, event);
|
214
233
|
},
|
215
|
-
value: filtersState[column]
|
234
|
+
value: filtersState[column].value
|
216
235
|
}));
|
217
236
|
} else if (type === _constants.CHECKBOX) {
|
218
|
-
return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.FormGroup, components.FormGroup, filtersState[column].map(function (option) {
|
237
|
+
return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.FormGroup, components.FormGroup, filtersState[column].value.map(function (option) {
|
219
238
|
return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Checkbox, (0, _extends2.default)({
|
220
239
|
key: option.labelText
|
221
240
|
}, option, {
|
222
241
|
onChange: function onChange(isSelected) {
|
223
242
|
var _option$onChange;
|
224
|
-
var checkboxCopy = filtersState[column];
|
243
|
+
var checkboxCopy = filtersState[column].value;
|
225
244
|
var foundCheckbox = checkboxCopy.find(function (checkbox) {
|
226
245
|
return checkbox.value === option.value;
|
227
246
|
});
|
228
247
|
foundCheckbox.selected = isSelected;
|
229
|
-
setFiltersState(_objectSpread(_objectSpread({}, filtersState), {}, (0, _defineProperty2.default)({}, column,
|
248
|
+
setFiltersState(_objectSpread(_objectSpread({}, filtersState), {}, (0, _defineProperty2.default)({}, column, {
|
249
|
+
value: checkboxCopy,
|
250
|
+
type: type
|
251
|
+
})));
|
230
252
|
applyFilters({
|
231
253
|
column: column,
|
232
|
-
value: (0, _toConsumableArray2.default)(filtersState[column]),
|
254
|
+
value: (0, _toConsumableArray2.default)(filtersState[column].value),
|
233
255
|
type: type
|
234
256
|
});
|
235
257
|
(_option$onChange = option.onChange) === null || _option$onChange === void 0 ? void 0 : _option$onChange.call(option, isSelected);
|
@@ -239,10 +261,13 @@ var FilterFlyout = function FilterFlyout(_ref) {
|
|
239
261
|
}));
|
240
262
|
} else if (type === _constants.RADIO) {
|
241
263
|
return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.FormGroup, components.FormGroup, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.RadioButtonGroup, (0, _extends2.default)({}, components.RadioButtonGroup, {
|
242
|
-
valueSelected: filtersState[column],
|
264
|
+
valueSelected: filtersState[column].value,
|
243
265
|
onChange: function onChange(selected) {
|
244
266
|
var _components$RadioButt, _components$RadioButt2;
|
245
|
-
setFiltersState(_objectSpread(_objectSpread({}, filtersState), {}, (0, _defineProperty2.default)({}, column,
|
267
|
+
setFiltersState(_objectSpread(_objectSpread({}, filtersState), {}, (0, _defineProperty2.default)({}, column, {
|
268
|
+
value: selected,
|
269
|
+
type: type
|
270
|
+
})));
|
246
271
|
applyFilters({
|
247
272
|
column: column,
|
248
273
|
value: selected,
|
@@ -258,11 +283,14 @@ var FilterFlyout = function FilterFlyout(_ref) {
|
|
258
283
|
})));
|
259
284
|
} else if (type === _constants.DROPDOWN) {
|
260
285
|
return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Dropdown, (0, _extends2.default)({}, components.Dropdown, {
|
261
|
-
selectedItem: filtersState[column],
|
286
|
+
selectedItem: filtersState[column].value,
|
262
287
|
onChange: function onChange(_ref5) {
|
263
288
|
var _components$Dropdown$, _components$Dropdown;
|
264
289
|
var selectedItem = _ref5.selectedItem;
|
265
|
-
setFiltersState(_objectSpread(_objectSpread({}, filtersState), {}, (0, _defineProperty2.default)({}, column,
|
290
|
+
setFiltersState(_objectSpread(_objectSpread({}, filtersState), {}, (0, _defineProperty2.default)({}, column, {
|
291
|
+
value: selectedItem,
|
292
|
+
type: type
|
293
|
+
})));
|
266
294
|
applyFilters({
|
267
295
|
column: column,
|
268
296
|
value: selectedItem,
|
@@ -272,12 +300,12 @@ var FilterFlyout = function FilterFlyout(_ref) {
|
|
272
300
|
}
|
273
301
|
}));
|
274
302
|
}
|
275
|
-
}
|
303
|
+
};
|
276
304
|
|
277
305
|
/** Renders all filters */
|
278
|
-
var renderFilters =
|
306
|
+
var renderFilters = function renderFilters() {
|
279
307
|
return filters.map(renderFilter);
|
280
|
-
}
|
308
|
+
};
|
281
309
|
var renderActionSet = function renderActionSet() {
|
282
310
|
return showActionSet && /*#__PURE__*/_react.default.createElement(_ActionSet.ActionSet, {
|
283
311
|
actions: [{
|
@@ -306,7 +334,8 @@ var FilterFlyout = function FilterFlyout(_ref) {
|
|
306
334
|
renderIcon: _iconsReact.Filter16,
|
307
335
|
iconDescription: flyoutIconDescription,
|
308
336
|
onClick: open ? closeFlyout : openFlyout,
|
309
|
-
className: (0, _classnames.default)("".concat(componentClass, "__trigger"), (0, _defineProperty2.default)({}, "".concat(componentClass, "__trigger--open"), open))
|
337
|
+
className: (0, _classnames.default)("".concat(componentClass, "__trigger"), (0, _defineProperty2.default)({}, "".concat(componentClass, "__trigger--open"), open)),
|
338
|
+
disabled: data.length === 0
|
310
339
|
}), /*#__PURE__*/_react.default.createElement("div", {
|
311
340
|
ref: filterFlyoutRef,
|
312
341
|
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))
|
@@ -319,6 +348,10 @@ var FilterFlyout = function FilterFlyout(_ref) {
|
|
319
348
|
}, renderFilters())), renderActionSet()));
|
320
349
|
};
|
321
350
|
FilterFlyout.propTypes = {
|
351
|
+
/**
|
352
|
+
* All data rows in the table
|
353
|
+
*/
|
354
|
+
data: _propTypes.default.array.isRequired,
|
322
355
|
/**
|
323
356
|
* Array of filters to render
|
324
357
|
*/
|