@carbon/ibm-products 2.11.2 → 2.12.0
Sign up to get free protection for your applications and to get access to all the features.
- package/css/index-full-carbon.css +40 -7
- 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 +36 -7
- package/css/index-without-carbon-released-only.css.map +1 -1
- package/css/index-without-carbon-released-only.min.css +2 -2
- package/css/index-without-carbon-released-only.min.css.map +1 -1
- package/css/index-without-carbon.css +40 -7
- 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 +40 -7
- package/css/index.css.map +1 -1
- package/css/index.min.css +3 -3
- package/css/index.min.css.map +1 -1
- package/es/components/Card/Card.js +9 -1
- package/es/components/Card/CardFooter.js +8 -2
- package/es/components/Card/CardHeader.js +8 -2
- package/es/components/CreateFullPage/CreateFullPage.docs-page.js +6 -0
- package/es/components/CreateFullPage/CreateFullPage.js +66 -8
- package/es/components/Datagrid/Datagrid/Datagrid.js +2 -1
- package/es/components/Datagrid/Datagrid/DatagridContent.js +7 -1
- package/es/components/Datagrid/Datagrid/DatagridSelectAll.js +13 -1
- package/es/components/Datagrid/Datagrid/DraggableElement.js +1 -0
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/DraggableItemsList.js +31 -10
- package/es/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +18 -17
- package/es/components/Datagrid/Datagrid/addons/Filtering/FilterProvider.js +104 -18
- package/es/components/Datagrid/Datagrid/addons/Filtering/OverflowCheckboxes.js +68 -0
- package/es/components/Datagrid/Datagrid/addons/Filtering/constants.js +1 -0
- package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +120 -54
- package/es/components/Datagrid/Datagrid/addons/Filtering/utils.js +9 -3
- package/es/components/Datagrid/useActionsColumn.js +0 -2
- package/es/components/Datagrid/useFiltering.js +4 -1
- package/es/components/Datagrid/utils/DatagridActions.js +2 -3
- package/es/components/SimpleHeader/SimpleHeader.docs-page.js +17 -0
- package/es/components/SimpleHeader/SimpleHeader.js +92 -0
- package/es/components/SimpleHeader/index.js +8 -0
- package/es/components/StatusIcon/StatusIcon.js +13 -13
- package/es/components/Tearsheet/Tearsheet.js +2 -1
- package/es/components/Tearsheet/TearsheetNarrow.js +2 -1
- package/es/components/Tearsheet/TearsheetShell.js +2 -1
- package/es/global/js/utils/StoryDocsPage.js +3 -3
- package/lib/components/Card/Card.js +9 -1
- package/lib/components/Card/CardFooter.js +8 -2
- package/lib/components/Card/CardHeader.js +8 -2
- package/lib/components/CreateFullPage/CreateFullPage.docs-page.js +6 -0
- package/lib/components/CreateFullPage/CreateFullPage.js +65 -7
- package/lib/components/Datagrid/Datagrid/Datagrid.js +2 -1
- package/lib/components/Datagrid/Datagrid/DatagridContent.js +6 -0
- package/lib/components/Datagrid/Datagrid/DatagridSelectAll.js +13 -1
- package/lib/components/Datagrid/Datagrid/DraggableElement.js +1 -0
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/DraggableItemsList.js +31 -10
- package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +40 -38
- package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterProvider.js +109 -24
- package/lib/components/Datagrid/Datagrid/addons/Filtering/OverflowCheckboxes.js +79 -0
- package/lib/components/Datagrid/Datagrid/addons/Filtering/constants.js +4 -2
- package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +136 -70
- package/lib/components/Datagrid/Datagrid/addons/Filtering/utils.js +10 -4
- package/lib/components/Datagrid/useActionsColumn.js +0 -2
- package/lib/components/Datagrid/useFiltering.js +4 -1
- package/lib/components/Datagrid/utils/DatagridActions.js +2 -3
- package/lib/components/SimpleHeader/SimpleHeader.docs-page.js +28 -0
- package/lib/components/SimpleHeader/SimpleHeader.js +102 -0
- package/lib/components/SimpleHeader/index.js +12 -0
- package/lib/components/StatusIcon/StatusIcon.js +12 -12
- package/lib/components/Tearsheet/Tearsheet.js +1 -1
- package/lib/components/Tearsheet/TearsheetNarrow.js +1 -1
- package/lib/components/Tearsheet/TearsheetShell.js +4 -2
- package/lib/global/js/utils/StoryDocsPage.js +3 -3
- package/package.json +2 -2
- package/scss/components/Card/_card.scss +1 -1
- package/scss/components/CreateFullPage/_create-full-page.scss +11 -2
- package/scss/components/Datagrid/styles/addons/_FilterPanel.scss +4 -0
- package/scss/components/ProductiveCard/_productive-card.scss +0 -1
- package/scss/components/SimpleHeader/_carbon-imports.scss +11 -0
- package/scss/components/SimpleHeader/_index-with-carbon.scss +9 -0
- package/scss/components/SimpleHeader/_index.scss +10 -0
- package/scss/components/SimpleHeader/_simple-header.scss +37 -0
- package/scss/components/StatusIcon/_status-icon.scss +0 -1
- package/scss/components/_index-with-carbon.scss +1 -0
@@ -5,23 +5,23 @@ var _typeof = require("@babel/runtime/helpers/typeof");
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
6
6
|
value: true
|
7
7
|
});
|
8
|
-
exports.default = void 0;
|
8
|
+
exports.default = exports.componentClass = void 0;
|
9
9
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
10
10
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
11
11
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
12
|
-
var _react =
|
13
|
-
var _propTypes = _interopRequireDefault(require("prop-types"));
|
14
|
-
var _react2 = require("@carbon/react");
|
15
|
-
var _layout = require("@carbon/layout");
|
16
|
-
var _settings = require("../../../../../settings");
|
12
|
+
var _react = require("@carbon/react");
|
17
13
|
var _constants = require("./constants");
|
18
|
-
var
|
19
|
-
var _framerMotion = require("framer-motion");
|
14
|
+
var _react2 = _interopRequireWildcard(require("react"));
|
20
15
|
var _variants = require("./motion/variants");
|
21
|
-
var
|
16
|
+
var _hooks = require("./hooks");
|
22
17
|
var _ActionSet = require("../../../../ActionSet");
|
18
|
+
var _icons = require("@carbon/react/icons");
|
23
19
|
var _ = require(".");
|
24
|
-
var
|
20
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
21
|
+
var _classnames = _interopRequireDefault(require("classnames"));
|
22
|
+
var _framerMotion = require("framer-motion");
|
23
|
+
var _settings = require("../../../../../settings");
|
24
|
+
var _layout = require("@carbon/layout");
|
25
25
|
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
26
|
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
27
|
/**
|
@@ -35,6 +35,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
|
|
35
35
|
|
36
36
|
var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
|
37
37
|
var componentClass = "".concat(blockClass, "-filter-panel");
|
38
|
+
exports.componentClass = componentClass;
|
38
39
|
var MotionActionSet = (0, _framerMotion.motion)(_ActionSet.ActionSet);
|
39
40
|
var FilterPanel = function FilterPanel(_ref) {
|
40
41
|
var _cx;
|
@@ -69,17 +70,23 @@ var FilterPanel = function FilterPanel(_ref) {
|
|
69
70
|
_ref$reactTableFilter = _ref.reactTableFiltersState,
|
70
71
|
reactTableFiltersState = _ref$reactTableFilter === void 0 ? [] : _ref$reactTableFilter;
|
71
72
|
/** State */
|
72
|
-
var _useState = (0,
|
73
|
+
var _useState = (0, _react2.useState)(false),
|
73
74
|
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
74
75
|
showDividerLine = _useState2[0],
|
75
76
|
setShowDividerLine = _useState2[1];
|
77
|
+
|
78
|
+
/** Context */
|
79
|
+
var _useContext = (0, _react2.useContext)(_.FilterContext),
|
80
|
+
panelOpen = _useContext.panelOpen,
|
81
|
+
setPanelOpen = _useContext.setPanelOpen;
|
76
82
|
var _useFilters = (0, _hooks.useFilters)({
|
77
83
|
updateMethod: updateMethod,
|
78
84
|
filters: filterSections,
|
79
85
|
setAllFilters: setAllFilters,
|
80
86
|
variation: _constants.PANEL,
|
81
87
|
reactTableFiltersState: reactTableFiltersState,
|
82
|
-
onCancel: onCancel
|
88
|
+
onCancel: onCancel,
|
89
|
+
panelOpen: panelOpen
|
83
90
|
}),
|
84
91
|
filtersState = _useFilters.filtersState,
|
85
92
|
prevFiltersObjectArrayRef = _useFilters.prevFiltersObjectArrayRef,
|
@@ -91,10 +98,10 @@ var FilterPanel = function FilterPanel(_ref) {
|
|
91
98
|
lastAppliedFilters = _useFilters.lastAppliedFilters;
|
92
99
|
|
93
100
|
/** Refs */
|
94
|
-
var filterPanelRef = (0,
|
95
|
-
var filterHeadingRef = (0,
|
96
|
-
var filterSearchRef = (0,
|
97
|
-
var actionSetRef = (0,
|
101
|
+
var filterPanelRef = (0, _react2.useRef)();
|
102
|
+
var filterHeadingRef = (0, _react2.useRef)();
|
103
|
+
var filterSearchRef = (0, _react2.useRef)();
|
104
|
+
var actionSetRef = (0, _react2.useRef)();
|
98
105
|
|
99
106
|
/** State from hooks */
|
100
107
|
var _useShouldDisableButt = (0, _hooks.useShouldDisableButtons)({
|
@@ -107,15 +114,10 @@ var FilterPanel = function FilterPanel(_ref) {
|
|
107
114
|
setShouldDisableButtons = _useShouldDisableButt2[1];
|
108
115
|
|
109
116
|
/** Memos */
|
110
|
-
var showActionSet = (0,
|
117
|
+
var showActionSet = (0, _react2.useMemo)(function () {
|
111
118
|
return updateMethod === _constants.BATCH;
|
112
119
|
}, [updateMethod]);
|
113
120
|
|
114
|
-
/** Context */
|
115
|
-
var _useContext = (0, _react.useContext)(_.FilterContext),
|
116
|
-
panelOpen = _useContext.panelOpen,
|
117
|
-
setPanelOpen = _useContext.setPanelOpen;
|
118
|
-
|
119
121
|
/** Methods */
|
120
122
|
var closePanel = function closePanel() {
|
121
123
|
cancel();
|
@@ -136,7 +138,7 @@ var FilterPanel = function FilterPanel(_ref) {
|
|
136
138
|
lastAppliedFilters.current = JSON.stringify(filtersObjectArray);
|
137
139
|
};
|
138
140
|
var renderActionSet = function renderActionSet() {
|
139
|
-
return showActionSet && /*#__PURE__*/
|
141
|
+
return showActionSet && /*#__PURE__*/_react2.default.createElement(MotionActionSet, {
|
140
142
|
actions: [{
|
141
143
|
key: 1,
|
142
144
|
kind: 'primary',
|
@@ -164,14 +166,14 @@ var FilterPanel = function FilterPanel(_ref) {
|
|
164
166
|
};
|
165
167
|
|
166
168
|
/** Effects */
|
167
|
-
(0,
|
169
|
+
(0, _react2.useEffect)(function liftOpenStateToParent() {
|
168
170
|
if (panelOpen) {
|
169
171
|
onPanelOpen(panelOpen);
|
170
172
|
} else {
|
171
173
|
onPanelClose(panelOpen);
|
172
174
|
}
|
173
175
|
}, [panelOpen, onPanelClose, onPanelOpen]);
|
174
|
-
(0,
|
176
|
+
(0, _react2.useEffect)(function setPanelMinimumHeight() {
|
175
177
|
var _filterPanelRef$curre;
|
176
178
|
(_filterPanelRef$curre = filterPanelRef.current) === null || _filterPanelRef$curre === void 0 || _filterPanelRef$curre.style.setProperty('--filter-panel-min-height', (0, _layout.rem)(filterPanelMinHeight));
|
177
179
|
}, [filterPanelMinHeight]);
|
@@ -184,23 +186,23 @@ var FilterPanel = function FilterPanel(_ref) {
|
|
184
186
|
var height = "calc(100vh - ".concat(filterHeadingHeight, "px - ").concat(showFilterSearch ? filterSearchHeight : 0, "px - ").concat(updateMethod === _constants.BATCH ? actionSetHeight : 0, "px)");
|
185
187
|
return height;
|
186
188
|
};
|
187
|
-
return /*#__PURE__*/
|
189
|
+
return /*#__PURE__*/_react2.default.createElement(_framerMotion.motion.div, {
|
188
190
|
ref: filterPanelRef,
|
189
191
|
className: (0, _classnames.default)(componentClass, "".concat(componentClass, "__container"), (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(componentClass, "--open"), panelOpen), (0, _defineProperty2.default)(_cx, "".concat(componentClass, "--batch"), showActionSet), (0, _defineProperty2.default)(_cx, "".concat(componentClass, "--instant"), !showActionSet), _cx)),
|
190
192
|
initial: false,
|
191
193
|
animate: panelOpen ? 'visible' : 'hidden',
|
192
194
|
variants: _variants.panelVariants
|
193
|
-
}, /*#__PURE__*/
|
195
|
+
}, /*#__PURE__*/_react2.default.createElement(_framerMotion.motion.div, {
|
194
196
|
variants: _variants.innerContainerVariants
|
195
|
-
}, /*#__PURE__*/
|
197
|
+
}, /*#__PURE__*/_react2.default.createElement("header", {
|
196
198
|
ref: filterHeadingRef,
|
197
199
|
className: (0, _classnames.default)("".concat(componentClass, "__heading"), (0, _defineProperty2.default)({}, "".concat(componentClass, "__heading--with-divider"), showDividerLine))
|
198
|
-
}, /*#__PURE__*/
|
200
|
+
}, /*#__PURE__*/_react2.default.createElement("div", {
|
199
201
|
className: "".concat(componentClass, "__title")
|
200
|
-
}, title), /*#__PURE__*/
|
202
|
+
}, title), /*#__PURE__*/_react2.default.createElement(_react.Button, {
|
201
203
|
hasIconOnly: true,
|
202
204
|
renderIcon: function renderIcon(props) {
|
203
|
-
return /*#__PURE__*/
|
205
|
+
return /*#__PURE__*/_react2.default.createElement(_icons.Close, (0, _extends2.default)({
|
204
206
|
size: 16
|
205
207
|
}, props));
|
206
208
|
},
|
@@ -209,14 +211,14 @@ var FilterPanel = function FilterPanel(_ref) {
|
|
209
211
|
tooltipPosition: "bottom",
|
210
212
|
tooltipAlignment: "end",
|
211
213
|
onClick: closePanel
|
212
|
-
}), showFilterSearch && /*#__PURE__*/
|
214
|
+
}), showFilterSearch && /*#__PURE__*/_react2.default.createElement("div", {
|
213
215
|
ref: filterSearchRef,
|
214
216
|
className: "".concat(componentClass, "__search")
|
215
|
-
}, /*#__PURE__*/
|
217
|
+
}, /*#__PURE__*/_react2.default.createElement(_react.Layer, null, /*#__PURE__*/_react2.default.createElement(_react.Search, {
|
216
218
|
labelText: searchLabelText,
|
217
219
|
placeholder: searchPlaceholder,
|
218
220
|
size: "sm"
|
219
|
-
})))), /*#__PURE__*/
|
221
|
+
})))), /*#__PURE__*/_react2.default.createElement("div", {
|
220
222
|
className: "".concat(componentClass, "__inner-container"),
|
221
223
|
style: {
|
222
224
|
height: getScrollableContainerHeight()
|
@@ -228,15 +230,15 @@ var FilterPanel = function FilterPanel(_ref) {
|
|
228
230
|
_ref2$filters = _ref2.filters,
|
229
231
|
filters = _ref2$filters === void 0 ? [] : _ref2$filters,
|
230
232
|
hasAccordion = _ref2.hasAccordion;
|
231
|
-
return /*#__PURE__*/
|
233
|
+
return /*#__PURE__*/_react2.default.createElement("div", {
|
232
234
|
key: index,
|
233
235
|
className: "".concat(componentClass, "__category")
|
234
|
-
}, categoryTitle && /*#__PURE__*/
|
236
|
+
}, categoryTitle && /*#__PURE__*/_react2.default.createElement("div", {
|
235
237
|
className: "".concat(componentClass, "__category-title")
|
236
|
-
}, categoryTitle), hasAccordion ? /*#__PURE__*/
|
238
|
+
}, categoryTitle), hasAccordion ? /*#__PURE__*/_react2.default.createElement(_react.Accordion, null, filters.map(function (_ref3) {
|
237
239
|
var filterLabel = _ref3.filterLabel,
|
238
240
|
filter = _ref3.filter;
|
239
|
-
return /*#__PURE__*/
|
241
|
+
return /*#__PURE__*/_react2.default.createElement(_react.AccordionItem, {
|
240
242
|
title: filterLabel,
|
241
243
|
key: filterLabel
|
242
244
|
}, renderFilter(filter));
|
@@ -5,20 +5,22 @@ var _typeof = require("@babel/runtime/helpers/typeof");
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
6
6
|
value: true
|
7
7
|
});
|
8
|
-
exports.FilterProvider = exports.FilterContext = void 0;
|
8
|
+
exports.clearSingleFilter = exports.FilterProvider = exports.FilterContext = void 0;
|
9
9
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
10
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
11
|
+
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
10
12
|
var _react = _interopRequireWildcard(require("react"));
|
11
13
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
12
14
|
var _constants = require("./constants");
|
13
15
|
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); }
|
14
16
|
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; }
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
17
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
18
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /**
|
19
|
+
* Copyright IBM Corp. 2022, 2023
|
20
|
+
*
|
21
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
22
|
+
* LICENSE file in the root directory of this source tree.
|
23
|
+
*/
|
22
24
|
var FilterContext = /*#__PURE__*/(0, _react.createContext)();
|
23
25
|
exports.FilterContext = FilterContext;
|
24
26
|
var EventEmitter = {
|
@@ -39,42 +41,124 @@ var EventEmitter = {
|
|
39
41
|
}
|
40
42
|
}
|
41
43
|
};
|
42
|
-
var
|
44
|
+
var removeFilterItem = function removeFilterItem(state, index) {
|
45
|
+
return state.splice(index, 1);
|
46
|
+
};
|
47
|
+
var updateFilterState = function updateFilterState(state, type, value) {
|
48
|
+
if (type === _constants.CHECKBOX) {
|
49
|
+
return;
|
50
|
+
}
|
51
|
+
if (type === _constants.DATE) {
|
52
|
+
var _filterTagIndex = state.findIndex(function (val) {
|
53
|
+
return formatDateRange(val.value[0], val.value[1]) === formatDateRange(value[0], value[1]);
|
54
|
+
});
|
55
|
+
return removeFilterItem(state, _filterTagIndex);
|
56
|
+
}
|
57
|
+
var filterTagIndex = state.findIndex(function (val) {
|
58
|
+
return val.value === value;
|
59
|
+
});
|
60
|
+
return removeFilterItem(state, filterTagIndex);
|
61
|
+
};
|
62
|
+
var clearSingleFilter = function clearSingleFilter(_ref, setAllFilters, state) {
|
63
|
+
var key = _ref.key,
|
64
|
+
value = _ref.value;
|
65
|
+
var tempState = (0, _toConsumableArray2.default)(state.filters);
|
66
|
+
tempState.forEach(function (f, filterIndex) {
|
67
|
+
if (f.id === key) {
|
68
|
+
var filterValues = f.value;
|
69
|
+
var filterType = f.type;
|
70
|
+
updateFilterState(tempState, filterType, value);
|
71
|
+
if (filterType === _constants.CHECKBOX) {
|
72
|
+
/**
|
73
|
+
When all checkboxes of a group are all unselected the value still exists in the filtersObjectArray
|
74
|
+
This checks if all the checkboxes are selected = false and removes it from the array
|
75
|
+
*/
|
76
|
+
var valueIndex = filterValues.findIndex(function (val) {
|
77
|
+
return val.id === value;
|
78
|
+
});
|
79
|
+
filterValues[valueIndex].selected = false;
|
80
|
+
var updatedFilterObject = _objectSpread(_objectSpread({}, f), {}, {
|
81
|
+
value: (0, _toConsumableArray2.default)(filterValues)
|
82
|
+
});
|
83
|
+
tempState[filterIndex] = updatedFilterObject;
|
84
|
+
var index = tempState.findIndex(function (filter) {
|
85
|
+
return filter.id === key;
|
86
|
+
});
|
87
|
+
|
88
|
+
// If all the selected state is false remove from array
|
89
|
+
var shouldRemoveFromArray = tempState[index].value.every(function (val) {
|
90
|
+
return val.selected === false;
|
91
|
+
});
|
92
|
+
if (shouldRemoveFromArray) {
|
93
|
+
removeFilterItem(tempState, index);
|
94
|
+
}
|
95
|
+
}
|
96
|
+
}
|
97
|
+
});
|
98
|
+
setAllFilters(tempState);
|
99
|
+
};
|
100
|
+
exports.clearSingleFilter = clearSingleFilter;
|
101
|
+
var handleSingleFilterRemoval = function handleSingleFilterRemoval(key, value) {
|
102
|
+
EventEmitter.dispatch(_constants.CLEAR_SINGLE_FILTER, {
|
103
|
+
key: key,
|
104
|
+
value: value
|
105
|
+
});
|
106
|
+
};
|
107
|
+
var formatDateRange = function formatDateRange(startDate, endDate) {
|
108
|
+
var startDateObj = new Date(startDate);
|
109
|
+
var endDateObj = new Date(endDate);
|
110
|
+
return "".concat(startDateObj.toLocaleDateString(), " - ").concat(endDateObj.toLocaleDateString());
|
111
|
+
};
|
112
|
+
var prepareFiltersForTags = function prepareFiltersForTags(filters, renderDateLabel) {
|
43
113
|
var tags = [];
|
44
|
-
filters.forEach(function (
|
45
|
-
var id =
|
46
|
-
type =
|
47
|
-
value =
|
114
|
+
filters.forEach(function (_ref2) {
|
115
|
+
var id = _ref2.id,
|
116
|
+
type = _ref2.type,
|
117
|
+
value = _ref2.value;
|
118
|
+
var sharedFilterProps = {
|
119
|
+
filter: true,
|
120
|
+
onClose: function onClose() {
|
121
|
+
return handleSingleFilterRemoval(id, value);
|
122
|
+
}
|
123
|
+
};
|
48
124
|
if (type === _constants.DROPDOWN || type === _constants.RADIO || type === _constants.NUMBER) {
|
49
|
-
tags.push({
|
125
|
+
tags.push(_objectSpread({
|
50
126
|
key: id,
|
51
127
|
value: value
|
52
|
-
});
|
128
|
+
}, sharedFilterProps));
|
53
129
|
} else if (type === _constants.DATE) {
|
130
|
+
var _renderDateLabel;
|
54
131
|
var _value = (0, _slicedToArray2.default)(value, 2),
|
55
132
|
startDate = _value[0],
|
56
133
|
endDate = _value[1];
|
57
|
-
tags.push({
|
134
|
+
tags.push(_objectSpread({
|
58
135
|
key: id,
|
59
|
-
value:
|
60
|
-
});
|
136
|
+
value: (_renderDateLabel = renderDateLabel === null || renderDateLabel === void 0 ? void 0 : renderDateLabel(startDate, endDate)) !== null && _renderDateLabel !== void 0 ? _renderDateLabel : formatDateRange(startDate, endDate)
|
137
|
+
}, sharedFilterProps));
|
61
138
|
} else if (type === _constants.CHECKBOX) {
|
62
139
|
value.forEach(function (checkbox) {
|
63
140
|
if (checkbox.selected) {
|
64
|
-
tags.push({
|
141
|
+
tags.push(_objectSpread(_objectSpread({
|
65
142
|
key: id,
|
66
143
|
value: checkbox.value
|
67
|
-
})
|
144
|
+
}, sharedFilterProps), {}, {
|
145
|
+
onClose: function onClose() {
|
146
|
+
return handleSingleFilterRemoval(id, checkbox.value);
|
147
|
+
}
|
148
|
+
}));
|
68
149
|
}
|
69
150
|
});
|
70
151
|
}
|
71
152
|
});
|
72
153
|
return tags;
|
73
154
|
};
|
74
|
-
var FilterProvider = function FilterProvider(
|
75
|
-
var children =
|
76
|
-
filters =
|
77
|
-
|
155
|
+
var FilterProvider = function FilterProvider(_ref3) {
|
156
|
+
var children = _ref3.children,
|
157
|
+
filters = _ref3.filters,
|
158
|
+
filterProps = _ref3.filterProps;
|
159
|
+
var _ref4 = filterProps || {},
|
160
|
+
renderDateLabel = _ref4.renderDateLabel;
|
161
|
+
var filterTags = prepareFiltersForTags(filters, renderDateLabel);
|
78
162
|
var _useState = (0, _react.useState)(false),
|
79
163
|
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
80
164
|
panelOpen = _useState2[0],
|
@@ -92,5 +176,6 @@ var FilterProvider = function FilterProvider(_ref2) {
|
|
92
176
|
exports.FilterProvider = FilterProvider;
|
93
177
|
FilterProvider.propTypes = {
|
94
178
|
children: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.node), _propTypes.default.node]).isRequired,
|
179
|
+
filterProps: _propTypes.default.object,
|
95
180
|
filters: _propTypes.default.arrayOf(_propTypes.default.object).isRequired
|
96
181
|
};
|
@@ -0,0 +1,79 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
4
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
6
|
+
value: true
|
7
|
+
});
|
8
|
+
exports.default = void 0;
|
9
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
10
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
11
|
+
var _react = require("@carbon/react");
|
12
|
+
var _react2 = _interopRequireWildcard(require("react"));
|
13
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
14
|
+
var _FilterPanel = require("./FilterPanel");
|
15
|
+
var _useFilters = require("./hooks/useFilters");
|
16
|
+
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); }
|
17
|
+
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; }
|
18
|
+
var OverflowCheckboxes = function OverflowCheckboxes(_ref) {
|
19
|
+
var components = _ref.components,
|
20
|
+
filtersState = _ref.filtersState,
|
21
|
+
column = _ref.column,
|
22
|
+
setFiltersState = _ref.setFiltersState,
|
23
|
+
type = _ref.type,
|
24
|
+
applyFilters = _ref.applyFilters,
|
25
|
+
_ref$viewAllLabel = _ref.viewAllLabel,
|
26
|
+
viewAllLabel = _ref$viewAllLabel === void 0 ? 'View all' : _ref$viewAllLabel,
|
27
|
+
_ref$viewLessLabel = _ref.viewLessLabel,
|
28
|
+
viewLessLabel = _ref$viewLessLabel === void 0 ? 'View less' : _ref$viewLessLabel;
|
29
|
+
var _useState = (0, _react2.useState)(false),
|
30
|
+
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
31
|
+
showAllItems = _useState2[0],
|
32
|
+
setShowAllItems = _useState2[1];
|
33
|
+
var firstFiveItems = filtersState[column].value.slice(0, 5);
|
34
|
+
var restOfTheItems = filtersState[column].value.slice(5, filtersState[column].value.length - 1);
|
35
|
+
var renderCheckbox = function renderCheckbox(option) {
|
36
|
+
return /*#__PURE__*/_react2.default.createElement(_react.Checkbox, (0, _extends2.default)({
|
37
|
+
key: option.labelText
|
38
|
+
}, option, {
|
39
|
+
onChange: function onChange(_, _ref2) {
|
40
|
+
var checked = _ref2.checked;
|
41
|
+
return (0, _useFilters.handleCheckboxChange)({
|
42
|
+
checked: checked,
|
43
|
+
filtersState: filtersState,
|
44
|
+
column: column,
|
45
|
+
option: option,
|
46
|
+
setFiltersState: setFiltersState,
|
47
|
+
applyFilters: applyFilters,
|
48
|
+
type: type
|
49
|
+
});
|
50
|
+
},
|
51
|
+
checked: option.selected,
|
52
|
+
disabled: option.disabled
|
53
|
+
}));
|
54
|
+
};
|
55
|
+
var renderViewAllButtonText = function renderViewAllButtonText() {
|
56
|
+
/** This should render the text "View all ([amount of checkboxes])" or "View less" */
|
57
|
+
return showAllItems ? viewLessLabel : "".concat(viewAllLabel, " (").concat(filtersState[column].value.length, ")");
|
58
|
+
};
|
59
|
+
return /*#__PURE__*/_react2.default.createElement(_react.FormGroup, components.FormGroup, firstFiveItems.map(renderCheckbox), showAllItems && restOfTheItems.map(renderCheckbox), /*#__PURE__*/_react2.default.createElement(_react.Button, {
|
60
|
+
className: "".concat(_FilterPanel.componentClass, "__view-all-button"),
|
61
|
+
kind: "ghost",
|
62
|
+
size: "sm",
|
63
|
+
onClick: function onClick() {
|
64
|
+
return setShowAllItems(!showAllItems);
|
65
|
+
}
|
66
|
+
}, renderViewAllButtonText()));
|
67
|
+
};
|
68
|
+
OverflowCheckboxes.propTypes = {
|
69
|
+
applyFilters: _propTypes.default.func,
|
70
|
+
column: _propTypes.default.string,
|
71
|
+
components: _propTypes.default.object,
|
72
|
+
filtersState: _propTypes.default.object,
|
73
|
+
setFiltersState: _propTypes.default.func,
|
74
|
+
type: _propTypes.default.string,
|
75
|
+
viewAllLabel: _propTypes.default.string,
|
76
|
+
viewLessLabel: _propTypes.default.string
|
77
|
+
};
|
78
|
+
var _default = OverflowCheckboxes;
|
79
|
+
exports.default = _default;
|
@@ -3,7 +3,7 @@
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
4
4
|
value: true
|
5
5
|
});
|
6
|
-
exports.RADIO = exports.PANEL_WIDTH = exports.PANEL = exports.NUMBER = exports.INSTANT = exports.FLYOUT = exports.DROPDOWN = exports.DATE = exports.CLEAR_FILTERS = exports.CHECKBOX = exports.BATCH = exports.ACTION_SET_HEIGHT = void 0;
|
6
|
+
exports.RADIO = exports.PANEL_WIDTH = exports.PANEL = exports.NUMBER = exports.INSTANT = exports.FLYOUT = exports.DROPDOWN = exports.DATE = exports.CLEAR_SINGLE_FILTER = exports.CLEAR_FILTERS = exports.CHECKBOX = exports.BATCH = exports.ACTION_SET_HEIGHT = void 0;
|
7
7
|
/**
|
8
8
|
* Copyright IBM Corp. 2022, 2022
|
9
9
|
*
|
@@ -36,9 +36,11 @@ var DROPDOWN = 'dropdown';
|
|
36
36
|
/** Constants for event emitters */
|
37
37
|
exports.DROPDOWN = DROPDOWN;
|
38
38
|
var CLEAR_FILTERS = 'clearFilters';
|
39
|
+
exports.CLEAR_FILTERS = CLEAR_FILTERS;
|
40
|
+
var CLEAR_SINGLE_FILTER = 'clearSingleFilter';
|
39
41
|
|
40
42
|
/** Constants for panel dimensions */
|
41
|
-
exports.
|
43
|
+
exports.CLEAR_SINGLE_FILTER = CLEAR_SINGLE_FILTER;
|
42
44
|
var PANEL_WIDTH = 320;
|
43
45
|
exports.PANEL_WIDTH = PANEL_WIDTH;
|
44
46
|
var ACTION_SET_HEIGHT = 64;
|