@carbon/ibm-products 2.0.1 → 2.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/css/index-full-carbon.css +1 -1
- package/css/index-full-carbon.min.css +1 -1
- 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 +1 -1
- package/css/index-without-carbon.min.css +1 -1
- package/css/index-without-carbon.min.css.map +1 -1
- package/css/index.css +1 -1
- package/css/index.min.css +1 -1
- package/css/index.min.css.map +1 -1
- package/es/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +34 -36
- package/es/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +20 -24
- package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/index.js +0 -1
- package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +44 -15
- package/es/components/Datagrid/useFiltering.js +1 -1
- package/es/components/UserProfileImage/UserProfileImage.js +13 -2
- package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +33 -35
- package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +20 -24
- package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/index.js +0 -7
- package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +42 -13
- package/lib/components/Datagrid/useFiltering.js +1 -1
- package/lib/components/UserProfileImage/UserProfileImage.js +13 -2
- package/package.json +2 -2
- package/scss/components/NotificationsPanel/_notifications-panel.scss +1 -1
- package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useInitialStateFromFilters.js +0 -21
- package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useInitialStateFromFilters.js +0 -30
@@ -11,10 +11,9 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
|
|
11
11
|
* US Government Users Restricted Rights - Use, duplication or disclosure
|
12
12
|
* restricted by GSA ADP Schedule Contract with IBM Corp.
|
13
13
|
*/
|
14
|
-
import React, { useState, useRef } from 'react';
|
14
|
+
import React, { useState, useRef, useEffect } from 'react';
|
15
15
|
import { Checkbox, DatePicker, DatePickerInput, Dropdown, FormGroup, NumberInput, RadioButton, RadioButtonGroup, Layer } from '@carbon/react';
|
16
|
-
import { INSTANT, DATE, CHECKBOX, NUMBER, RADIO, DROPDOWN, PANEL } from '../constants';
|
17
|
-
import useInitialStateFromFilters from './useInitialStateFromFilters';
|
16
|
+
import { INSTANT, BATCH, DATE, CHECKBOX, NUMBER, RADIO, DROPDOWN, PANEL } from '../constants';
|
18
17
|
import { getInitialStateFromFilters } from '../utils';
|
19
18
|
var useFilters = function useFilters(_ref) {
|
20
19
|
var updateMethod = _ref.updateMethod,
|
@@ -22,19 +21,22 @@ var useFilters = function useFilters(_ref) {
|
|
22
21
|
filters = _ref$filters === void 0 ? [] : _ref$filters,
|
23
22
|
setAllFilters = _ref.setAllFilters,
|
24
23
|
variation = _ref.variation,
|
25
|
-
|
24
|
+
reactTableFiltersState = _ref.reactTableFiltersState,
|
25
|
+
_ref$onCancel = _ref.onCancel,
|
26
|
+
onCancel = _ref$onCancel === void 0 ? function () {} : _ref$onCancel;
|
26
27
|
/** State */
|
27
|
-
var
|
28
|
-
_useInitialStateFromF2 = _slicedToArray(_useInitialStateFromF, 2),
|
29
|
-
filtersState = _useInitialStateFromF2[0],
|
30
|
-
setFiltersState = _useInitialStateFromF2[1];
|
31
|
-
var _useState = useState(initialFilters),
|
28
|
+
var _useState = useState(getInitialStateFromFilters(filters, variation, reactTableFiltersState)),
|
32
29
|
_useState2 = _slicedToArray(_useState, 2),
|
33
|
-
|
34
|
-
|
30
|
+
filtersState = _useState2[0],
|
31
|
+
setFiltersState = _useState2[1];
|
32
|
+
var _useState3 = useState(reactTableFiltersState),
|
33
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
34
|
+
filtersObjectArray = _useState4[0],
|
35
|
+
setFiltersObjectArray = _useState4[1];
|
35
36
|
|
36
37
|
// When using batch actions we have to store the filters to then apply them later
|
37
38
|
var prevFiltersRef = useRef(JSON.stringify(filtersState));
|
39
|
+
var lastAppliedFilters = useRef(JSON.stringify(reactTableFiltersState));
|
38
40
|
var prevFiltersObjectArrayRef = useRef(JSON.stringify(filtersObjectArray));
|
39
41
|
|
40
42
|
/** Methods */
|
@@ -43,6 +45,7 @@ var useFilters = function useFilters(_ref) {
|
|
43
45
|
var revertToPreviousFilters = function revertToPreviousFilters() {
|
44
46
|
setFiltersState(JSON.parse(prevFiltersRef.current));
|
45
47
|
setFiltersObjectArray(JSON.parse(prevFiltersObjectArrayRef.current));
|
48
|
+
setAllFilters(JSON.parse(lastAppliedFilters.current));
|
46
49
|
};
|
47
50
|
var reset = function reset() {
|
48
51
|
// When we reset we want the "initialFilters" to be an empty array
|
@@ -154,8 +157,11 @@ var useFilters = function useFilters(_ref) {
|
|
154
157
|
var type = _ref3.type,
|
155
158
|
column = _ref3.column,
|
156
159
|
components = _ref3.props;
|
157
|
-
var isPanel = variation === PANEL;
|
158
160
|
var filter;
|
161
|
+
var isPanel = variation === PANEL;
|
162
|
+
if (!type) {
|
163
|
+
return console.error("type: ".concat(type, "; does not exist as a type of filter."));
|
164
|
+
}
|
159
165
|
switch (type) {
|
160
166
|
case DATE:
|
161
167
|
filter = /*#__PURE__*/React.createElement(DatePicker, _extends({}, components.DatePicker, {
|
@@ -281,10 +287,31 @@ var useFilters = function useFilters(_ref) {
|
|
281
287
|
break;
|
282
288
|
}
|
283
289
|
if (isPanel) {
|
284
|
-
return /*#__PURE__*/React.createElement(Layer,
|
290
|
+
return /*#__PURE__*/React.createElement(Layer, {
|
291
|
+
key: column
|
292
|
+
}, filter);
|
285
293
|
}
|
286
|
-
return
|
294
|
+
return /*#__PURE__*/React.createElement(React.Fragment, {
|
295
|
+
key: column
|
296
|
+
}, filter);
|
287
297
|
};
|
298
|
+
var cancel = function cancel() {
|
299
|
+
// Reverting to previous filters only applies when using batch actions
|
300
|
+
if (updateMethod === BATCH) {
|
301
|
+
revertToPreviousFilters();
|
302
|
+
onCancel();
|
303
|
+
}
|
304
|
+
};
|
305
|
+
|
306
|
+
/** The purpose of this function is to sync any changes in react-tables state.filters array and reflect
|
307
|
+
those new filter changes in the panel/flyout state. The external change is triggered if setAllFilters is called outside of the Datagrid */
|
308
|
+
useEffect(function updateStateAndFiltersToReflectExternalFilterChanges() {
|
309
|
+
var newFiltersState = getInitialStateFromFilters(filters, variation, reactTableFiltersState);
|
310
|
+
setFiltersState(newFiltersState);
|
311
|
+
prevFiltersRef.current = JSON.stringify(newFiltersState);
|
312
|
+
prevFiltersObjectArrayRef.current = JSON.stringify(reactTableFiltersState);
|
313
|
+
setFiltersObjectArray(reactTableFiltersState);
|
314
|
+
}, [filters, reactTableFiltersState, variation]);
|
288
315
|
return {
|
289
316
|
filtersState: filtersState,
|
290
317
|
setFiltersState: setFiltersState,
|
@@ -293,7 +320,9 @@ var useFilters = function useFilters(_ref) {
|
|
293
320
|
revertToPreviousFilters: revertToPreviousFilters,
|
294
321
|
reset: reset,
|
295
322
|
renderFilter: renderFilter,
|
296
|
-
filtersObjectArray: filtersObjectArray
|
323
|
+
filtersObjectArray: filtersObjectArray,
|
324
|
+
lastAppliedFilters: lastAppliedFilters,
|
325
|
+
cancel: cancel
|
297
326
|
};
|
298
327
|
};
|
299
328
|
export default useFilters;
|
@@ -74,7 +74,7 @@ var useFiltering = function useFiltering(hooks) {
|
|
74
74
|
variation: 'flyout',
|
75
75
|
updateMethod: BATCH,
|
76
76
|
panelIconDescription: 'Open filter panel',
|
77
|
-
|
77
|
+
reactTableFiltersState: state.filters
|
78
78
|
};
|
79
79
|
var getFilterFlyoutProps = function getFilterFlyoutProps() {
|
80
80
|
return _objectSpread(_objectSpread(_objectSpread({}, defaultProps), filterProps), {}, {
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
2
2
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
3
|
-
var _excluded = ["backgroundColor", "className", "kind", "icon", "initials", "image", "imageDescription", "size", "theme", "tooltipText"];
|
3
|
+
var _excluded = ["backgroundColor", "className", "kind", "icon", "initials", "image", "imageDescription", "size", "theme", "tooltipText", "tooltipAlignment"];
|
4
4
|
/**
|
5
5
|
* Copyright IBM Corp. 2021, 2021
|
6
6
|
*
|
@@ -28,6 +28,10 @@ var componentName = 'UserProfileImage';
|
|
28
28
|
|
29
29
|
// NOTE: the component SCSS is not imported here: it is rolled up separately.
|
30
30
|
|
31
|
+
// Default values for props
|
32
|
+
var defaults = {
|
33
|
+
tooltipAlignment: 'bottom'
|
34
|
+
};
|
31
35
|
/**
|
32
36
|
* This is a user profile image component which displays an image, or initials or icon for a user.
|
33
37
|
*/
|
@@ -42,6 +46,8 @@ export var UserProfileImage = /*#__PURE__*/React.forwardRef(function (_ref, ref)
|
|
42
46
|
size = _ref.size,
|
43
47
|
theme = _ref.theme,
|
44
48
|
tooltipText = _ref.tooltipText,
|
49
|
+
_ref$tooltipAlignment = _ref.tooltipAlignment,
|
50
|
+
tooltipAlignment = _ref$tooltipAlignment === void 0 ? defaults.tooltipAlignment : _ref$tooltipAlignment,
|
45
51
|
rest = _objectWithoutProperties(_ref, _excluded);
|
46
52
|
var icons = {
|
47
53
|
user: {
|
@@ -121,7 +127,8 @@ export var UserProfileImage = /*#__PURE__*/React.forwardRef(function (_ref, ref)
|
|
121
127
|
return FillItem && (tooltipText ? /*#__PURE__*/React.createElement(IconButton, {
|
122
128
|
label: tooltipText,
|
123
129
|
className: "".concat(blockClass, "__tooltip"),
|
124
|
-
kind: "ghost"
|
130
|
+
kind: "ghost",
|
131
|
+
align: tooltipAlignment
|
125
132
|
}, renderUserProfileImage()) : renderUserProfileImage());
|
126
133
|
});
|
127
134
|
|
@@ -169,6 +176,10 @@ UserProfileImage.propTypes = {
|
|
169
176
|
* Set theme in which the component will be rendered
|
170
177
|
*/
|
171
178
|
theme: PropTypes.oneOf(['light', 'dark']).isRequired,
|
179
|
+
/**
|
180
|
+
* Specify how the trigger should align with the tooltip
|
181
|
+
*/
|
182
|
+
tooltipAlignment: PropTypes.oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'right']),
|
172
183
|
/**
|
173
184
|
* Pass in the display name to have it shown on hover
|
174
185
|
*/
|
@@ -55,11 +55,8 @@ var FilterFlyout = function FilterFlyout(_ref) {
|
|
55
55
|
setAllFilters = _ref.setAllFilters,
|
56
56
|
_ref$data = _ref.data,
|
57
57
|
data = _ref$data === void 0 ? [] : _ref$data,
|
58
|
-
_ref$
|
59
|
-
|
60
|
-
// Save the initial filters we only need the filters once when it loads
|
61
|
-
var initialFiltersRef = (0, _react2.useRef)(initialFilters);
|
62
|
-
|
58
|
+
_ref$reactTableFilter = _ref.reactTableFiltersState,
|
59
|
+
reactTableFiltersState = _ref$reactTableFilter === void 0 ? [] : _ref$reactTableFilter;
|
63
60
|
/** State */
|
64
61
|
var _useState = (0, _react2.useState)(false),
|
65
62
|
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
@@ -70,15 +67,17 @@ var FilterFlyout = function FilterFlyout(_ref) {
|
|
70
67
|
filters: filters,
|
71
68
|
setAllFilters: setAllFilters,
|
72
69
|
variation: _constants.FLYOUT,
|
73
|
-
|
70
|
+
reactTableFiltersState: reactTableFiltersState,
|
71
|
+
onCancel: onCancel
|
74
72
|
}),
|
75
73
|
filtersState = _useFilters.filtersState,
|
76
74
|
prevFiltersObjectArrayRef = _useFilters.prevFiltersObjectArrayRef,
|
77
75
|
prevFiltersRef = _useFilters.prevFiltersRef,
|
78
|
-
|
76
|
+
cancel = _useFilters.cancel,
|
79
77
|
reset = _useFilters.reset,
|
80
78
|
renderFilter = _useFilters.renderFilter,
|
81
|
-
filtersObjectArray = _useFilters.filtersObjectArray
|
79
|
+
filtersObjectArray = _useFilters.filtersObjectArray,
|
80
|
+
lastAppliedFilters = _useFilters.lastAppliedFilters;
|
82
81
|
|
83
82
|
/** Refs */
|
84
83
|
var filterFlyoutRef = (0, _react2.useRef)(null);
|
@@ -117,26 +116,10 @@ var FilterFlyout = function FilterFlyout(_ref) {
|
|
117
116
|
// updates the ref so next time the flyout opens we have records of the previous filters
|
118
117
|
prevFiltersRef.current = JSON.stringify(filtersState);
|
119
118
|
prevFiltersObjectArrayRef.current = JSON.stringify(filtersObjectArray);
|
120
|
-
};
|
121
|
-
var cancel = function cancel() {
|
122
|
-
// Reverting to previous filters only applies when using batch actions
|
123
|
-
if (updateMethod === _constants.BATCH) {
|
124
|
-
revertToPreviousFilters();
|
125
|
-
onCancel();
|
126
|
-
}
|
127
|
-
closeFlyout();
|
128
|
-
};
|
129
119
|
|
130
|
-
|
131
|
-
|
132
|
-
|
133
|
-
var hasClickedOnDropdown = target.className === "".concat(carbonPrefix, "--list-box__menu-item__option");
|
134
|
-
if (!open || hasClickedOnDatePicker || hasClickedOnDropdown) {
|
135
|
-
return;
|
136
|
-
}
|
137
|
-
cancel();
|
138
|
-
});
|
139
|
-
(0, _hooks2.useSubscribeToEventEmitter)(_constants.CLEAR_FILTERS, reset);
|
120
|
+
// Update the last applied filters
|
121
|
+
lastAppliedFilters.current = JSON.stringify(filtersObjectArray);
|
122
|
+
};
|
140
123
|
|
141
124
|
/** Renders all filters */
|
142
125
|
var renderFilters = function renderFilters() {
|
@@ -163,6 +146,21 @@ var FilterFlyout = function FilterFlyout(_ref) {
|
|
163
146
|
buttonSize: "md"
|
164
147
|
});
|
165
148
|
};
|
149
|
+
|
150
|
+
/** Effects */
|
151
|
+
(0, _hooks.useClickOutside)(filterFlyoutRef, function (target) {
|
152
|
+
var hasClickedOnDatePicker = target.closest('.flatpickr-calendar');
|
153
|
+
var hasClickedOnDropdown = target.className === "".concat(carbonPrefix, "--list-box__menu-item__option");
|
154
|
+
if (!open || hasClickedOnDatePicker || hasClickedOnDropdown) {
|
155
|
+
return;
|
156
|
+
}
|
157
|
+
closeFlyout();
|
158
|
+
cancel();
|
159
|
+
});
|
160
|
+
(0, _hooks2.useSubscribeToEventEmitter)(_constants.CLEAR_FILTERS, reset);
|
161
|
+
(0, _react2.useEffect)(function reflectLastAppliedFiltersWhenReactTableUpdates() {
|
162
|
+
lastAppliedFilters.current = JSON.stringify(reactTableFiltersState);
|
163
|
+
}, [reactTableFiltersState, lastAppliedFilters]);
|
166
164
|
return /*#__PURE__*/_react2.default.createElement("div", {
|
167
165
|
className: "".concat(componentClass, "__container")
|
168
166
|
}, /*#__PURE__*/_react2.default.createElement(_react.Button, {
|
@@ -206,14 +204,6 @@ FilterFlyout.propTypes = {
|
|
206
204
|
* Icon description for the filter flyout button
|
207
205
|
*/
|
208
206
|
flyoutIconDescription: _propTypes.default.string,
|
209
|
-
/**
|
210
|
-
* Filters that should be applied on load
|
211
|
-
*/
|
212
|
-
initialFilters: _propTypes.default.arrayOf(_propTypes.default.shape({
|
213
|
-
id: _propTypes.default.string.isRequired,
|
214
|
-
type: _propTypes.default.string.isRequired,
|
215
|
-
value: _propTypes.default.any.isRequired
|
216
|
-
})),
|
217
207
|
/**
|
218
208
|
* Callback when the apply button is clicked
|
219
209
|
*/
|
@@ -234,6 +224,14 @@ FilterFlyout.propTypes = {
|
|
234
224
|
* Label text of the primary action in the flyout
|
235
225
|
*/
|
236
226
|
primaryActionLabel: _propTypes.default.string,
|
227
|
+
/**
|
228
|
+
* Filters from react table's state
|
229
|
+
*/
|
230
|
+
reactTableFiltersState: _propTypes.default.arrayOf(_propTypes.default.shape({
|
231
|
+
id: _propTypes.default.string.isRequired,
|
232
|
+
type: _propTypes.default.string.isRequired,
|
233
|
+
value: _propTypes.default.any.isRequired
|
234
|
+
})),
|
237
235
|
/**
|
238
236
|
* Label text of the secondary action in the flyout
|
239
237
|
*/
|
@@ -66,11 +66,8 @@ var FilterPanel = function FilterPanel(_ref) {
|
|
66
66
|
searchLabelText = _ref$searchLabelText === void 0 ? 'Filter search' : _ref$searchLabelText,
|
67
67
|
_ref$searchPlaceholde = _ref.searchPlaceholder,
|
68
68
|
searchPlaceholder = _ref$searchPlaceholde === void 0 ? 'Find filters' : _ref$searchPlaceholde,
|
69
|
-
_ref$
|
70
|
-
|
71
|
-
// Save the initial filters we only need the filters once
|
72
|
-
var initialFiltersRef = (0, _react.useRef)(initialFilters);
|
73
|
-
|
69
|
+
_ref$reactTableFilter = _ref.reactTableFiltersState,
|
70
|
+
reactTableFiltersState = _ref$reactTableFilter === void 0 ? [] : _ref$reactTableFilter;
|
74
71
|
/** State */
|
75
72
|
var _useState = (0, _react.useState)(false),
|
76
73
|
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
@@ -81,15 +78,17 @@ var FilterPanel = function FilterPanel(_ref) {
|
|
81
78
|
filters: filterSections,
|
82
79
|
setAllFilters: setAllFilters,
|
83
80
|
variation: _constants.PANEL,
|
84
|
-
|
81
|
+
reactTableFiltersState: reactTableFiltersState,
|
82
|
+
onCancel: onCancel
|
85
83
|
}),
|
86
84
|
filtersState = _useFilters.filtersState,
|
87
85
|
prevFiltersObjectArrayRef = _useFilters.prevFiltersObjectArrayRef,
|
88
86
|
prevFiltersRef = _useFilters.prevFiltersRef,
|
89
|
-
|
87
|
+
cancel = _useFilters.cancel,
|
90
88
|
reset = _useFilters.reset,
|
91
89
|
renderFilter = _useFilters.renderFilter,
|
92
|
-
filtersObjectArray = _useFilters.filtersObjectArray
|
90
|
+
filtersObjectArray = _useFilters.filtersObjectArray,
|
91
|
+
lastAppliedFilters = _useFilters.lastAppliedFilters;
|
93
92
|
|
94
93
|
/** Refs */
|
95
94
|
var filterPanelRef = (0, _react.useRef)();
|
@@ -119,14 +118,8 @@ var FilterPanel = function FilterPanel(_ref) {
|
|
119
118
|
|
120
119
|
/** Methods */
|
121
120
|
var closePanel = function closePanel() {
|
122
|
-
|
123
|
-
|
124
|
-
var cancel = function cancel() {
|
125
|
-
// Reverting to previous filters only applies when using batch actions
|
126
|
-
if (updateMethod === _constants.BATCH) {
|
127
|
-
revertToPreviousFilters();
|
128
|
-
onCancel();
|
129
|
-
}
|
121
|
+
cancel();
|
122
|
+
setPanelOpen(false);
|
130
123
|
};
|
131
124
|
var apply = function apply() {
|
132
125
|
setAllFilters(filtersObjectArray);
|
@@ -138,6 +131,9 @@ var FilterPanel = function FilterPanel(_ref) {
|
|
138
131
|
// updates the ref so next time the flyout opens we have records of the previous filters
|
139
132
|
prevFiltersRef.current = JSON.stringify(filtersState);
|
140
133
|
prevFiltersObjectArrayRef.current = JSON.stringify(filtersObjectArray);
|
134
|
+
|
135
|
+
// Update the last applied filters
|
136
|
+
lastAppliedFilters.current = JSON.stringify(filtersObjectArray);
|
141
137
|
};
|
142
138
|
var renderActionSet = function renderActionSet() {
|
143
139
|
return showActionSet && /*#__PURE__*/_react.default.createElement(MotionActionSet, {
|
@@ -254,20 +250,20 @@ FilterPanel.propTypes = {
|
|
254
250
|
closeIconDescription: _propTypes.default.string,
|
255
251
|
filterPanelMinHeight: _propTypes.default.number,
|
256
252
|
filterSections: _propTypes.default.array,
|
257
|
-
/**
|
258
|
-
* Filters that should be applied on load
|
259
|
-
*/
|
260
|
-
initialFilters: _propTypes.default.arrayOf(_propTypes.default.shape({
|
261
|
-
id: _propTypes.default.string.isRequired,
|
262
|
-
type: _propTypes.default.string.isRequired,
|
263
|
-
value: _propTypes.default.any.isRequired
|
264
|
-
})),
|
265
253
|
onApply: _propTypes.default.func,
|
266
254
|
onCancel: _propTypes.default.func,
|
267
255
|
onPanelClose: _propTypes.default.func,
|
268
256
|
onPanelOpen: _propTypes.default.func,
|
269
257
|
open: _propTypes.default.bool,
|
270
258
|
primaryActionLabel: _propTypes.default.string,
|
259
|
+
/**
|
260
|
+
* Filters from react table's state
|
261
|
+
*/
|
262
|
+
reactTableFiltersState: _propTypes.default.arrayOf(_propTypes.default.shape({
|
263
|
+
id: _propTypes.default.string.isRequired,
|
264
|
+
type: _propTypes.default.string.isRequired,
|
265
|
+
value: _propTypes.default.any.isRequired
|
266
|
+
})),
|
271
267
|
searchLabelText: _propTypes.default.string,
|
272
268
|
searchPlaceholder: _propTypes.default.string,
|
273
269
|
secondaryActionLabel: _propTypes.default.string,
|
@@ -10,12 +10,6 @@ Object.defineProperty(exports, "useFilters", {
|
|
10
10
|
return _useFilters.default;
|
11
11
|
}
|
12
12
|
});
|
13
|
-
Object.defineProperty(exports, "useInitialStateFromFilters", {
|
14
|
-
enumerable: true,
|
15
|
-
get: function get() {
|
16
|
-
return _useInitialStateFromFilters.default;
|
17
|
-
}
|
18
|
-
});
|
19
13
|
Object.defineProperty(exports, "useShouldDisableButtons", {
|
20
14
|
enumerable: true,
|
21
15
|
get: function get() {
|
@@ -28,7 +22,6 @@ Object.defineProperty(exports, "useSubscribeToEventEmitter", {
|
|
28
22
|
return _useSubscribeToEventEmitter.default;
|
29
23
|
}
|
30
24
|
});
|
31
|
-
var _useInitialStateFromFilters = _interopRequireDefault(require("./useInitialStateFromFilters"));
|
32
25
|
var _useSubscribeToEventEmitter = _interopRequireDefault(require("./useSubscribeToEventEmitter"));
|
33
26
|
var _useFilters = _interopRequireDefault(require("./useFilters"));
|
34
27
|
var _useShouldDisableButtons = _interopRequireDefault(require("./useShouldDisableButtons"));
|
@@ -13,7 +13,6 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
|
|
13
13
|
var _react = _interopRequireWildcard(require("react"));
|
14
14
|
var _react2 = require("@carbon/react");
|
15
15
|
var _constants = require("../constants");
|
16
|
-
var _useInitialStateFromFilters = _interopRequireDefault(require("./useInitialStateFromFilters"));
|
17
16
|
var _utils = require("../utils");
|
18
17
|
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); }
|
19
18
|
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; }
|
@@ -31,19 +30,22 @@ var useFilters = function useFilters(_ref) {
|
|
31
30
|
filters = _ref$filters === void 0 ? [] : _ref$filters,
|
32
31
|
setAllFilters = _ref.setAllFilters,
|
33
32
|
variation = _ref.variation,
|
34
|
-
|
33
|
+
reactTableFiltersState = _ref.reactTableFiltersState,
|
34
|
+
_ref$onCancel = _ref.onCancel,
|
35
|
+
onCancel = _ref$onCancel === void 0 ? function () {} : _ref$onCancel;
|
35
36
|
/** State */
|
36
|
-
var
|
37
|
-
_useInitialStateFromF2 = (0, _slicedToArray2.default)(_useInitialStateFromF, 2),
|
38
|
-
filtersState = _useInitialStateFromF2[0],
|
39
|
-
setFiltersState = _useInitialStateFromF2[1];
|
40
|
-
var _useState = (0, _react.useState)(initialFilters),
|
37
|
+
var _useState = (0, _react.useState)((0, _utils.getInitialStateFromFilters)(filters, variation, reactTableFiltersState)),
|
41
38
|
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
42
|
-
|
43
|
-
|
39
|
+
filtersState = _useState2[0],
|
40
|
+
setFiltersState = _useState2[1];
|
41
|
+
var _useState3 = (0, _react.useState)(reactTableFiltersState),
|
42
|
+
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
|
43
|
+
filtersObjectArray = _useState4[0],
|
44
|
+
setFiltersObjectArray = _useState4[1];
|
44
45
|
|
45
46
|
// When using batch actions we have to store the filters to then apply them later
|
46
47
|
var prevFiltersRef = (0, _react.useRef)(JSON.stringify(filtersState));
|
48
|
+
var lastAppliedFilters = (0, _react.useRef)(JSON.stringify(reactTableFiltersState));
|
47
49
|
var prevFiltersObjectArrayRef = (0, _react.useRef)(JSON.stringify(filtersObjectArray));
|
48
50
|
|
49
51
|
/** Methods */
|
@@ -52,6 +54,7 @@ var useFilters = function useFilters(_ref) {
|
|
52
54
|
var revertToPreviousFilters = function revertToPreviousFilters() {
|
53
55
|
setFiltersState(JSON.parse(prevFiltersRef.current));
|
54
56
|
setFiltersObjectArray(JSON.parse(prevFiltersObjectArrayRef.current));
|
57
|
+
setAllFilters(JSON.parse(lastAppliedFilters.current));
|
55
58
|
};
|
56
59
|
var reset = function reset() {
|
57
60
|
// When we reset we want the "initialFilters" to be an empty array
|
@@ -163,8 +166,11 @@ var useFilters = function useFilters(_ref) {
|
|
163
166
|
var type = _ref3.type,
|
164
167
|
column = _ref3.column,
|
165
168
|
components = _ref3.props;
|
166
|
-
var isPanel = variation === _constants.PANEL;
|
167
169
|
var filter;
|
170
|
+
var isPanel = variation === _constants.PANEL;
|
171
|
+
if (!type) {
|
172
|
+
return console.error("type: ".concat(type, "; does not exist as a type of filter."));
|
173
|
+
}
|
168
174
|
switch (type) {
|
169
175
|
case _constants.DATE:
|
170
176
|
filter = /*#__PURE__*/_react.default.createElement(_react2.DatePicker, (0, _extends2.default)({}, components.DatePicker, {
|
@@ -290,10 +296,31 @@ var useFilters = function useFilters(_ref) {
|
|
290
296
|
break;
|
291
297
|
}
|
292
298
|
if (isPanel) {
|
293
|
-
return /*#__PURE__*/_react.default.createElement(_react2.Layer,
|
299
|
+
return /*#__PURE__*/_react.default.createElement(_react2.Layer, {
|
300
|
+
key: column
|
301
|
+
}, filter);
|
294
302
|
}
|
295
|
-
return
|
303
|
+
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
|
304
|
+
key: column
|
305
|
+
}, filter);
|
296
306
|
};
|
307
|
+
var cancel = function cancel() {
|
308
|
+
// Reverting to previous filters only applies when using batch actions
|
309
|
+
if (updateMethod === _constants.BATCH) {
|
310
|
+
revertToPreviousFilters();
|
311
|
+
onCancel();
|
312
|
+
}
|
313
|
+
};
|
314
|
+
|
315
|
+
/** The purpose of this function is to sync any changes in react-tables state.filters array and reflect
|
316
|
+
those new filter changes in the panel/flyout state. The external change is triggered if setAllFilters is called outside of the Datagrid */
|
317
|
+
(0, _react.useEffect)(function updateStateAndFiltersToReflectExternalFilterChanges() {
|
318
|
+
var newFiltersState = (0, _utils.getInitialStateFromFilters)(filters, variation, reactTableFiltersState);
|
319
|
+
setFiltersState(newFiltersState);
|
320
|
+
prevFiltersRef.current = JSON.stringify(newFiltersState);
|
321
|
+
prevFiltersObjectArrayRef.current = JSON.stringify(reactTableFiltersState);
|
322
|
+
setFiltersObjectArray(reactTableFiltersState);
|
323
|
+
}, [filters, reactTableFiltersState, variation]);
|
297
324
|
return {
|
298
325
|
filtersState: filtersState,
|
299
326
|
setFiltersState: setFiltersState,
|
@@ -302,7 +329,9 @@ var useFilters = function useFilters(_ref) {
|
|
302
329
|
revertToPreviousFilters: revertToPreviousFilters,
|
303
330
|
reset: reset,
|
304
331
|
renderFilter: renderFilter,
|
305
|
-
filtersObjectArray: filtersObjectArray
|
332
|
+
filtersObjectArray: filtersObjectArray,
|
333
|
+
lastAppliedFilters: lastAppliedFilters,
|
334
|
+
cancel: cancel
|
306
335
|
};
|
307
336
|
};
|
308
337
|
var _default = useFilters;
|
@@ -79,7 +79,7 @@ var useFiltering = function useFiltering(hooks) {
|
|
79
79
|
variation: 'flyout',
|
80
80
|
updateMethod: _constants.BATCH,
|
81
81
|
panelIconDescription: 'Open filter panel',
|
82
|
-
|
82
|
+
reactTableFiltersState: state.filters
|
83
83
|
};
|
84
84
|
var getFilterFlyoutProps = function getFilterFlyoutProps() {
|
85
85
|
return _objectSpread(_objectSpread(_objectSpread({}, defaultProps), filterProps), {}, {
|
@@ -15,7 +15,7 @@ require("../../global/js/utils/props-helper");
|
|
15
15
|
var _settings = require("../../settings");
|
16
16
|
var _icons = require("@carbon/react/icons");
|
17
17
|
var _react2 = require("@carbon/react");
|
18
|
-
var _excluded = ["backgroundColor", "className", "kind", "icon", "initials", "image", "imageDescription", "size", "theme", "tooltipText"];
|
18
|
+
var _excluded = ["backgroundColor", "className", "kind", "icon", "initials", "image", "imageDescription", "size", "theme", "tooltipText", "tooltipAlignment"];
|
19
19
|
/**
|
20
20
|
* Copyright IBM Corp. 2021, 2021
|
21
21
|
*
|
@@ -31,6 +31,10 @@ var componentName = 'UserProfileImage';
|
|
31
31
|
|
32
32
|
// NOTE: the component SCSS is not imported here: it is rolled up separately.
|
33
33
|
|
34
|
+
// Default values for props
|
35
|
+
var defaults = {
|
36
|
+
tooltipAlignment: 'bottom'
|
37
|
+
};
|
34
38
|
/**
|
35
39
|
* This is a user profile image component which displays an image, or initials or icon for a user.
|
36
40
|
*/
|
@@ -45,6 +49,8 @@ var UserProfileImage = /*#__PURE__*/_react.default.forwardRef(function (_ref, re
|
|
45
49
|
size = _ref.size,
|
46
50
|
theme = _ref.theme,
|
47
51
|
tooltipText = _ref.tooltipText,
|
52
|
+
_ref$tooltipAlignment = _ref.tooltipAlignment,
|
53
|
+
tooltipAlignment = _ref$tooltipAlignment === void 0 ? defaults.tooltipAlignment : _ref$tooltipAlignment,
|
48
54
|
rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
|
49
55
|
var icons = {
|
50
56
|
user: {
|
@@ -124,7 +130,8 @@ var UserProfileImage = /*#__PURE__*/_react.default.forwardRef(function (_ref, re
|
|
124
130
|
return FillItem && (tooltipText ? /*#__PURE__*/_react.default.createElement(_react2.IconButton, {
|
125
131
|
label: tooltipText,
|
126
132
|
className: "".concat(blockClass, "__tooltip"),
|
127
|
-
kind: "ghost"
|
133
|
+
kind: "ghost",
|
134
|
+
align: tooltipAlignment
|
128
135
|
}, renderUserProfileImage()) : renderUserProfileImage());
|
129
136
|
});
|
130
137
|
|
@@ -173,6 +180,10 @@ UserProfileImage.propTypes = {
|
|
173
180
|
* Set theme in which the component will be rendered
|
174
181
|
*/
|
175
182
|
theme: _propTypes.default.oneOf(['light', 'dark']).isRequired,
|
183
|
+
/**
|
184
|
+
* Specify how the trigger should align with the tooltip
|
185
|
+
*/
|
186
|
+
tooltipAlignment: _propTypes.default.oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'right']),
|
176
187
|
/**
|
177
188
|
* Pass in the display name to have it shown on hover
|
178
189
|
*/
|
package/package.json
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
{
|
2
2
|
"name": "@carbon/ibm-products",
|
3
3
|
"description": "Carbon for IBM Products",
|
4
|
-
"version": "2.0
|
4
|
+
"version": "2.1.0",
|
5
5
|
"license": "Apache-2.0",
|
6
6
|
"main": "lib/index.js",
|
7
7
|
"module": "es/index.js",
|
@@ -94,5 +94,5 @@
|
|
94
94
|
"react": "^16.8.6 || ^17.0.1",
|
95
95
|
"react-dom": "^16.8.6 || ^17.0.1"
|
96
96
|
},
|
97
|
-
"gitHead": "
|
97
|
+
"gitHead": "7d5b5013039a6d98e3aab8375a7ea249c44ee4ae"
|
98
98
|
}
|
package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useInitialStateFromFilters.js
DELETED
@@ -1,21 +0,0 @@
|
|
1
|
-
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
2
|
-
/*
|
3
|
-
* Licensed Materials - Property of IBM
|
4
|
-
* 5724-Q36
|
5
|
-
* (c) Copyright IBM Corp. 2022
|
6
|
-
* US Government Users Restricted Rights - Use, duplication or disclosure
|
7
|
-
* restricted by GSA ADP Schedule Contract with IBM Corp.
|
8
|
-
*/
|
9
|
-
import { useState } from 'react';
|
10
|
-
import { FLYOUT } from '../constants';
|
11
|
-
import { getInitialStateFromFilters } from '../utils';
|
12
|
-
var useInitialStateFromFilters = function useInitialStateFromFilters(filters) {
|
13
|
-
var variation = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : FLYOUT;
|
14
|
-
var initialFilters = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
|
15
|
-
var _useState = useState(getInitialStateFromFilters(filters, variation, initialFilters)),
|
16
|
-
_useState2 = _slicedToArray(_useState, 2),
|
17
|
-
state = _useState2[0],
|
18
|
-
setState = _useState2[1];
|
19
|
-
return [state, setState];
|
20
|
-
};
|
21
|
-
export default useInitialStateFromFilters;
|
package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useInitialStateFromFilters.js
DELETED
@@ -1,30 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
4
|
-
Object.defineProperty(exports, "__esModule", {
|
5
|
-
value: true
|
6
|
-
});
|
7
|
-
exports.default = void 0;
|
8
|
-
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
9
|
-
var _react = require("react");
|
10
|
-
var _constants = require("../constants");
|
11
|
-
var _utils = require("../utils");
|
12
|
-
/*
|
13
|
-
* Licensed Materials - Property of IBM
|
14
|
-
* 5724-Q36
|
15
|
-
* (c) Copyright IBM Corp. 2022
|
16
|
-
* US Government Users Restricted Rights - Use, duplication or disclosure
|
17
|
-
* restricted by GSA ADP Schedule Contract with IBM Corp.
|
18
|
-
*/
|
19
|
-
|
20
|
-
var useInitialStateFromFilters = function useInitialStateFromFilters(filters) {
|
21
|
-
var variation = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _constants.FLYOUT;
|
22
|
-
var initialFilters = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
|
23
|
-
var _useState = (0, _react.useState)((0, _utils.getInitialStateFromFilters)(filters, variation, initialFilters)),
|
24
|
-
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
25
|
-
state = _useState2[0],
|
26
|
-
setState = _useState2[1];
|
27
|
-
return [state, setState];
|
28
|
-
};
|
29
|
-
var _default = useInitialStateFromFilters;
|
30
|
-
exports.default = _default;
|