@carbon/ibm-products 1.59.1 → 1.60.0
Sign up to get free protection for your applications and to get access to all the features.
- package/css/index-full-carbon.css +42 -21
- package/css/index-full-carbon.css.map +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.css +42 -21
- package/css/index-without-carbon.css.map +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 +42 -21
- package/css/index.css.map +1 -1
- package/css/index.min.css +1 -1
- package/css/index.min.css.map +1 -1
- package/es/components/Datagrid/Datagrid/Datagrid.js +2 -1
- package/es/components/Datagrid/Datagrid/DatagridContent.js +7 -1
- package/es/components/Datagrid/Datagrid/DatagridEmptyBody.js +4 -4
- package/es/components/Datagrid/Datagrid/DatagridSelectAll.js +13 -1
- package/es/components/Datagrid/Datagrid/DatagridToolbar.js +3 -15
- package/es/components/Datagrid/Datagrid/DraggableElement.js +32 -135
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +14 -38
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsTearsheet.js +1 -0
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/DraggableItemsList.js +128 -40
- package/es/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +7 -6
- package/es/components/Datagrid/Datagrid/addons/Filtering/FilterProvider.js +104 -18
- package/es/components/Datagrid/Datagrid/addons/Filtering/constants.js +1 -0
- package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +37 -4
- package/es/components/Datagrid/useFiltering.js +4 -1
- package/es/components/Datagrid/useNestedRowExpander.js +22 -9
- package/es/components/Datagrid/useRowExpander.js +22 -9
- package/es/components/Datagrid/utils/getArgTypes.js +12 -0
- package/es/components/EmptyStates/EmptyState.js +1 -1
- package/es/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js +1 -1
- package/es/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.js +1 -1
- package/es/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js +1 -1
- package/es/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js +1 -1
- package/es/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js +1 -1
- package/es/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js +1 -1
- package/es/components/EmptyStates/assets/ErrorIllustration.js +6 -11
- package/es/components/EmptyStates/assets/NoDataIllustration.js +6 -11
- package/es/components/EmptyStates/assets/NoTagsIllustration.js +6 -12
- package/es/components/EmptyStates/assets/NotFoundIllustration.js +6 -12
- package/es/components/EmptyStates/assets/NotificationsIllustration.js +6 -12
- package/es/components/EmptyStates/assets/UnauthorizedIllustration.js +6 -12
- package/es/components/FilterSummary/FilterSummary.js +9 -3
- package/es/components/TagSet/TagSet.js +3 -7
- package/es/global/js/hooks/useWindowScroll.js +5 -0
- package/lib/components/Datagrid/Datagrid/Datagrid.js +2 -1
- package/lib/components/Datagrid/Datagrid/DatagridContent.js +6 -0
- package/lib/components/Datagrid/Datagrid/DatagridEmptyBody.js +3 -3
- package/lib/components/Datagrid/Datagrid/DatagridSelectAll.js +13 -1
- package/lib/components/Datagrid/Datagrid/DatagridToolbar.js +3 -15
- package/lib/components/Datagrid/Datagrid/DraggableElement.js +34 -140
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +17 -38
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsTearsheet.js +1 -0
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/DraggableItemsList.js +128 -47
- package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +7 -6
- package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterProvider.js +104 -24
- package/lib/components/Datagrid/Datagrid/addons/Filtering/constants.js +4 -2
- package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +36 -3
- package/lib/components/Datagrid/useFiltering.js +4 -1
- package/lib/components/Datagrid/useNestedRowExpander.js +24 -9
- package/lib/components/Datagrid/useRowExpander.js +24 -9
- package/lib/components/Datagrid/utils/getArgTypes.js +12 -0
- package/lib/components/EmptyStates/EmptyState.js +1 -1
- package/lib/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js +1 -1
- package/lib/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.js +1 -1
- package/lib/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js +1 -1
- package/lib/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js +1 -1
- package/lib/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js +1 -1
- package/lib/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js +1 -1
- package/lib/components/EmptyStates/assets/ErrorIllustration.js +6 -11
- package/lib/components/EmptyStates/assets/NoDataIllustration.js +6 -11
- package/lib/components/EmptyStates/assets/NoTagsIllustration.js +6 -12
- package/lib/components/EmptyStates/assets/NotFoundIllustration.js +6 -12
- package/lib/components/EmptyStates/assets/NotificationsIllustration.js +6 -12
- package/lib/components/EmptyStates/assets/UnauthorizedIllustration.js +6 -12
- package/lib/components/FilterSummary/FilterSummary.js +9 -10
- package/lib/components/TagSet/TagSet.js +2 -6
- package/lib/global/js/hooks/useWindowScroll.js +6 -0
- package/package.json +6 -5
- package/scss/components/Datagrid/_datagrid.scss +1 -1
- package/scss/components/Datagrid/styles/_draggableElement.scss +44 -20
- package/scss/components/Datagrid/styles/addons/_CustomizeColumnsTearsheet.scss +0 -1
@@ -1,39 +1,31 @@
|
|
1
1
|
"use strict";
|
2
2
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
4
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
4
5
|
Object.defineProperty(exports, "__esModule", {
|
5
6
|
value: true
|
6
7
|
});
|
7
8
|
exports.default = void 0;
|
8
9
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
9
10
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
10
|
-
var _react =
|
11
|
+
var _react = _interopRequireWildcard(require("react"));
|
11
12
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
12
|
-
var _reactDnd = require("react-dnd");
|
13
|
-
var _reactDndHtml5Backend = require("react-dnd-html5-backend");
|
14
13
|
var _carbonComponentsReact = require("carbon-components-react");
|
15
14
|
var _immutabilityHelper = _interopRequireDefault(require("immutability-helper"));
|
16
15
|
var _settings = require("../../../../../settings");
|
17
16
|
var _classnames = _interopRequireDefault(require("classnames"));
|
18
17
|
var _DraggableItemsList = require("./DraggableItemsList");
|
18
|
+
var _uuidv = _interopRequireDefault(require("../../../../../global/js/utils/uuidv4"));
|
19
|
+
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); }
|
20
|
+
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; }
|
19
21
|
/**
|
20
|
-
* Copyright IBM Corp. 2022,
|
22
|
+
* Copyright IBM Corp. 2022, 2023
|
21
23
|
*
|
22
24
|
* This source code is licensed under the Apache-2.0 license found in the
|
23
25
|
* LICENSE file in the root directory of this source tree.
|
24
26
|
*/
|
25
27
|
|
26
28
|
var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
|
27
|
-
var getNextIndex = function getNextIndex(array, currentIndex, key) {
|
28
|
-
var newIndex = -1;
|
29
|
-
if (key === 'ArrowUp') {
|
30
|
-
newIndex = currentIndex - 1 >= 0 ? currentIndex - 1 : array.length - 1;
|
31
|
-
}
|
32
|
-
if (key === 'ArrowDown') {
|
33
|
-
newIndex = currentIndex + 1 < array.length ? currentIndex + 1 : 0;
|
34
|
-
}
|
35
|
-
return newIndex;
|
36
|
-
};
|
37
29
|
var Columns = function Columns(_ref) {
|
38
30
|
var getVisibleColumnsCount = _ref.getVisibleColumnsCount,
|
39
31
|
filterString = _ref.filterString,
|
@@ -43,36 +35,26 @@ var Columns = function Columns(_ref) {
|
|
43
35
|
assistiveTextInstructionsLabel = _ref.assistiveTextInstructionsLabel,
|
44
36
|
assistiveTextDisabledInstructionsLabel = _ref.assistiveTextDisabledInstructionsLabel,
|
45
37
|
selectAllLabel = _ref.selectAllLabel;
|
38
|
+
var listId = (0, _react.useRef)((0, _uuidv.default)()); // keep id between renders
|
39
|
+
var listRef = (0, _react.useRef)(null);
|
46
40
|
var _React$useState = _react.default.useState(''),
|
47
41
|
_React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
|
48
42
|
ariaRegionText = _React$useState2[0],
|
49
43
|
setAriaRegionText = _React$useState2[1];
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
setFocusIndex = _React$useState4[1];
|
54
|
-
var moveElement = _react.default.useCallback(function (dragIndex, hoverIndex) {
|
55
|
-
var dragCard = columns[dragIndex];
|
44
|
+
// after a drag/drop action set the columns
|
45
|
+
var moveElement = _react.default.useCallback(function (from, to) {
|
46
|
+
var fromCol = columns[from];
|
56
47
|
setColumnsObject((0, _immutabilityHelper.default)(columns, {
|
57
|
-
$splice: [[
|
48
|
+
$splice: [[from, 1], [to, 0, fromCol]]
|
58
49
|
}));
|
59
50
|
}, [columns, setColumnsObject]);
|
60
51
|
return /*#__PURE__*/_react.default.createElement("div", {
|
61
|
-
className: "".concat(blockClass, "__customize-columns-column-list")
|
62
|
-
|
63
|
-
backend: _reactDndHtml5Backend.HTML5Backend
|
52
|
+
className: "".concat(blockClass, "__customize-columns-column-list"),
|
53
|
+
ref: listRef
|
64
54
|
}, /*#__PURE__*/_react.default.createElement("ol", {
|
65
55
|
className: "".concat(blockClass, "__customize-columns-column-list--focus"),
|
66
56
|
role: "listbox",
|
67
57
|
"aria-describedby": "".concat(blockClass, "__customize-columns--instructions"),
|
68
|
-
onKeyDown: function onKeyDown(e) {
|
69
|
-
var nextIndex = getNextIndex(columns, focusIndex, e.key);
|
70
|
-
if (nextIndex >= 0) {
|
71
|
-
setFocusIndex(nextIndex);
|
72
|
-
e.preventDefault();
|
73
|
-
e.stopPropagation();
|
74
|
-
}
|
75
|
-
},
|
76
58
|
tabIndex: 0
|
77
59
|
}, /*#__PURE__*/_react.default.createElement("span", {
|
78
60
|
"aria-live": "assertive",
|
@@ -94,16 +76,13 @@ var Columns = function Columns(_ref) {
|
|
94
76
|
id: "".concat(blockClass, "__customization-column-select-all"),
|
95
77
|
labelText: selectAllLabel
|
96
78
|
})), /*#__PURE__*/_react.default.createElement(_DraggableItemsList.DraggableItemsList, {
|
79
|
+
id: listId.current,
|
97
80
|
columns: columns,
|
98
81
|
filterString: filterString,
|
99
|
-
focusIndex: focusIndex,
|
100
|
-
getNextIndex: getNextIndex,
|
101
82
|
moveElement: moveElement,
|
102
|
-
onSelectColumn: onSelectColumn,
|
103
83
|
setAriaRegionText: setAriaRegionText,
|
104
|
-
|
105
|
-
|
106
|
-
}))));
|
84
|
+
onSelectColumn: onSelectColumn
|
85
|
+
})));
|
107
86
|
};
|
108
87
|
Columns.propTypes = {
|
109
88
|
assistiveTextDisabledInstructionsLabel: _propTypes.default.string,
|
package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsTearsheet.js
CHANGED
@@ -77,6 +77,7 @@ var CustomizeColumnsTearsheet = function CustomizeColumnsTearsheet(_ref) {
|
|
77
77
|
isDirty = _useState10[0],
|
78
78
|
setIsDirty = _useState10[1];
|
79
79
|
var onRequestClose = function onRequestClose() {
|
80
|
+
setColumnObjects(columnDefinitions);
|
80
81
|
setIsTearsheetOpen(false);
|
81
82
|
};
|
82
83
|
var onRequestSubmit = function onRequestSubmit() {
|
@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
6
6
|
});
|
7
7
|
exports.DraggableItemsList = void 0;
|
8
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
8
9
|
var _react = _interopRequireDefault(require("react"));
|
9
10
|
var _propTypes = require("prop-types");
|
10
11
|
var _carbonComponentsReact = require("carbon-components-react");
|
@@ -12,25 +13,23 @@ var _common = require("./common");
|
|
12
13
|
var _DraggableElement = _interopRequireDefault(require("../../DraggableElement"));
|
13
14
|
var _settings = require("../../../../../settings");
|
14
15
|
var _getColTitle2 = _interopRequireDefault(require("../../../utils/getColTitle"));
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
* LICENSE file in the root directory of this source tree.
|
20
|
-
*/
|
21
|
-
|
16
|
+
var _core = require("@dnd-kit/core");
|
17
|
+
var _sortable = require("@dnd-kit/sortable");
|
18
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
19
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
22
20
|
var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
|
21
|
+
var matchedColsById = function matchedColsById(col1, col2) {
|
22
|
+
return col1 && col2 && col1.id === col2.id;
|
23
|
+
};
|
23
24
|
var DraggableItemsList = function DraggableItemsList(_ref) {
|
24
25
|
var columns = _ref.columns,
|
25
26
|
filterString = _ref.filterString,
|
26
|
-
|
27
|
-
getNextIndex = _ref.getNextIndex,
|
27
|
+
id = _ref.id,
|
28
28
|
moveElement = _ref.moveElement,
|
29
29
|
onSelectColumn = _ref.onSelectColumn,
|
30
|
-
setAriaRegionText = _ref.setAriaRegionText
|
31
|
-
|
32
|
-
|
33
|
-
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, columns
|
30
|
+
setAriaRegionText = _ref.setAriaRegionText;
|
31
|
+
var draggableClass = "".concat(blockClass, "__draggable-item");
|
32
|
+
var visibleCols = columns
|
34
33
|
// hide the columns without Header, e.g the sticky actions, spacer
|
35
34
|
.filter(function (colDef) {
|
36
35
|
return !!(0, _getColTitle2.default)(colDef);
|
@@ -39,7 +38,108 @@ var DraggableItemsList = function DraggableItemsList(_ref) {
|
|
39
38
|
}).filter(function (colDef) {
|
40
39
|
var _getColTitle;
|
41
40
|
return filterString.length === 0 || ((_getColTitle = (0, _getColTitle2.default)(colDef)) === null || _getColTitle === void 0 ? void 0 : _getColTitle.toLowerCase().includes(filterString)) && colDef.id !== 'spacer';
|
42
|
-
})
|
41
|
+
});
|
42
|
+
|
43
|
+
// let localRefCopy;
|
44
|
+
var handleDragEnd = function handleDragEnd(event) {
|
45
|
+
var active = event.active,
|
46
|
+
over = event.over;
|
47
|
+
var fromVisibleIndex = columns.findIndex(function (col) {
|
48
|
+
return matchedColsById(col, active);
|
49
|
+
});
|
50
|
+
var toVisibleIndex = columns.findIndex(function (col) {
|
51
|
+
return matchedColsById(col, over);
|
52
|
+
});
|
53
|
+
var colTitle = (0, _getColTitle2.default)(visibleCols[fromVisibleIndex]);
|
54
|
+
setAriaRegionText("".concat(colTitle, " dropped. New position ").concat(toVisibleIndex + 1, " of ").concat(visibleCols.length, "."));
|
55
|
+
var fromIndex = columns.findIndex(function (col) {
|
56
|
+
return matchedColsById(col, active);
|
57
|
+
});
|
58
|
+
var toIndex = columns.findIndex(function (col) {
|
59
|
+
return matchedColsById(col, over);
|
60
|
+
});
|
61
|
+
moveElement(fromIndex, toIndex);
|
62
|
+
};
|
63
|
+
var handleDragStart = function handleDragStart(event) {
|
64
|
+
var active = event.active;
|
65
|
+
var fromIndex = visibleCols.findIndex(function (col) {
|
66
|
+
return matchedColsById(col, active);
|
67
|
+
});
|
68
|
+
var colTitle = (0, _getColTitle2.default)(visibleCols[fromIndex]);
|
69
|
+
setAriaRegionText("".concat(colTitle, " grabbed. Current position ").concat(fromIndex + 1, " of ").concat(visibleCols.length, "."));
|
70
|
+
};
|
71
|
+
var handleDragUpdate = function handleDragUpdate(event) {
|
72
|
+
var active = event.active,
|
73
|
+
over = event.over;
|
74
|
+
var fromIndex = visibleCols.findIndex(function (col) {
|
75
|
+
return matchedColsById(col, active);
|
76
|
+
});
|
77
|
+
var toIndex = visibleCols.findIndex(function (col) {
|
78
|
+
return matchedColsById(col, over);
|
79
|
+
});
|
80
|
+
var colTitle = (0, _getColTitle2.default)(visibleCols[fromIndex]);
|
81
|
+
setAriaRegionText("".concat(colTitle, " grabbed. Original position ").concat(fromIndex + 1, ", new position ").concat(toIndex + 1, " of ").concat(visibleCols.length, "."));
|
82
|
+
};
|
83
|
+
var pointerSensor = (0, _core.useSensor)(_core.PointerSensor, {
|
84
|
+
// Require the mouse to move by 10 pixels before activating
|
85
|
+
activationConstraint: {
|
86
|
+
distance: 4
|
87
|
+
}
|
88
|
+
});
|
89
|
+
var keyboardSensor = (0, _core.useSensor)(_core.KeyboardSensor, {
|
90
|
+
coordinateGetter: function coordinateGetter(event, args) {
|
91
|
+
var currentCoordinates = args.currentCoordinates;
|
92
|
+
var target = event.target;
|
93
|
+
while (target && !target.classList.contains(draggableClass)) {
|
94
|
+
target = target.parentNode;
|
95
|
+
}
|
96
|
+
var delta = target.offsetHeight;
|
97
|
+
switch (event.code) {
|
98
|
+
case 'ArrowRight':
|
99
|
+
case 'ArrowLeft':
|
100
|
+
// ignore right and left
|
101
|
+
return currentCoordinates;
|
102
|
+
case 'ArrowUp':
|
103
|
+
return _objectSpread(_objectSpread({}, currentCoordinates), {}, {
|
104
|
+
y: currentCoordinates.y - delta
|
105
|
+
});
|
106
|
+
case 'ArrowDown':
|
107
|
+
return _objectSpread(_objectSpread({}, currentCoordinates), {}, {
|
108
|
+
y: currentCoordinates.y + delta
|
109
|
+
});
|
110
|
+
case 'Space':
|
111
|
+
break;
|
112
|
+
}
|
113
|
+
}
|
114
|
+
});
|
115
|
+
var sensors = (0, _core.useSensors)(pointerSensor, keyboardSensor);
|
116
|
+
var handleCheckboxKeydown = function handleCheckboxKeydown(event, colDef) {
|
117
|
+
if (event.code === 'Space') {
|
118
|
+
onSelectColumn(colDef, !(0, _common.isColumnVisible)(colDef));
|
119
|
+
event.preventDefault();
|
120
|
+
event.stopPropagation();
|
121
|
+
return false;
|
122
|
+
}
|
123
|
+
};
|
124
|
+
return /*#__PURE__*/_react.default.createElement(_core.DndContext, {
|
125
|
+
collisionDetection: _core.closestCenter,
|
126
|
+
onDragEnd: handleDragEnd,
|
127
|
+
onDragStart: handleDragStart,
|
128
|
+
onDragMove: handleDragUpdate,
|
129
|
+
sensors: sensors
|
130
|
+
}, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
|
131
|
+
className: "".concat(blockClass, "__draggable-underlay"),
|
132
|
+
"aria-hidden": "true",
|
133
|
+
key: "draggable-underlay-".concat(id)
|
134
|
+
}, visibleCols.map(function (colDef) {
|
135
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
136
|
+
className: "".concat(blockClass, "__draggable-underlay-item"),
|
137
|
+
key: colDef.id
|
138
|
+
});
|
139
|
+
})), /*#__PURE__*/_react.default.createElement(_sortable.SortableContext, {
|
140
|
+
items: visibleCols,
|
141
|
+
strategy: _sortable.verticalListSortingStrategy
|
142
|
+
}, visibleCols.map(function (colDef) {
|
43
143
|
var colHeaderTitle = (0, _getColTitle2.default)(colDef);
|
44
144
|
var searchString = new RegExp('(' + filterString + ')');
|
45
145
|
var res = filterString.length ? colHeaderTitle.toLowerCase().split(searchString) : null;
|
@@ -47,61 +147,42 @@ var DraggableItemsList = function DraggableItemsList(_ref) {
|
|
47
147
|
var highlightedText = res !== null ? res[0] === '' ? "<strong>".concat(firstWord, "</strong>") + res[2] : firstWord + "<strong>".concat(res[1], "</strong>") + res[2] : colHeaderTitle;
|
48
148
|
var isFrozenColumn = !!colDef.sticky;
|
49
149
|
var listContents = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Checkbox, {
|
50
|
-
wrapperClassName: "".concat(blockClass, "__customize-columns-checkbox-wrapper"),
|
51
150
|
checked: (0, _common.isColumnVisible)(colDef),
|
52
151
|
disabled: isFrozenColumn,
|
53
|
-
onChange:
|
152
|
+
onChange: function onChange(checked) {
|
153
|
+
return onSelectColumn(colDef, checked);
|
154
|
+
},
|
54
155
|
id: "".concat(blockClass, "__customization-column-").concat(colDef.id),
|
55
156
|
labelText: colHeaderTitle,
|
56
157
|
title: colHeaderTitle,
|
57
158
|
className: "".concat(blockClass, "__customize-columns-checkbox"),
|
58
|
-
hideLabel: true
|
159
|
+
hideLabel: true,
|
160
|
+
onKeyDown: function onKeyDown(event) {
|
161
|
+
return handleCheckboxKeydown(event, colDef);
|
162
|
+
}
|
59
163
|
}), /*#__PURE__*/_react.default.createElement("div", {
|
60
164
|
dangerouslySetInnerHTML: {
|
61
165
|
__html: highlightedText
|
62
|
-
}
|
166
|
+
},
|
167
|
+
className: "".concat(blockClass, "__customize-columns-checkbox-visible-label")
|
63
168
|
}));
|
64
169
|
return /*#__PURE__*/_react.default.createElement(_DraggableElement.default, {
|
170
|
+
classList: draggableClass,
|
65
171
|
key: colDef.id,
|
66
|
-
|
67
|
-
listData: columns,
|
68
|
-
setListData: setColumnsObject,
|
69
|
-
id: "dnd-datagrid-columns-".concat(colDef.id),
|
70
|
-
type: "column-customization",
|
172
|
+
id: colDef.id,
|
71
173
|
disabled: filterString.length > 0 || isFrozenColumn,
|
72
174
|
ariaLabel: colHeaderTitle,
|
73
|
-
onGrab: setAriaRegionText,
|
74
|
-
isFocused: focusIndex === i,
|
75
|
-
moveElement: moveElement,
|
76
|
-
onArrowKeyDown: function onArrowKeyDown(e, isGrabbed, currentIndex) {
|
77
|
-
if (isGrabbed) {
|
78
|
-
var _columns$nextIndex;
|
79
|
-
var nextIndex = getNextIndex(columns, currentIndex, e.key);
|
80
|
-
e.preventDefault();
|
81
|
-
e.stopPropagation();
|
82
|
-
if (nextIndex >= 0 && !((_columns$nextIndex = columns[nextIndex]) !== null && _columns$nextIndex !== void 0 && _columns$nextIndex.sticky)) {
|
83
|
-
setFocusIndex(nextIndex);
|
84
|
-
moveElement(currentIndex, nextIndex);
|
85
|
-
e.target.scrollIntoView({
|
86
|
-
block: 'center'
|
87
|
-
});
|
88
|
-
}
|
89
|
-
}
|
90
|
-
},
|
91
175
|
isSticky: isFrozenColumn,
|
92
176
|
selected: (0, _common.isColumnVisible)(colDef)
|
93
177
|
}, listContents);
|
94
|
-
}));
|
178
|
+
}))));
|
95
179
|
};
|
96
180
|
exports.DraggableItemsList = DraggableItemsList;
|
97
181
|
DraggableItemsList.propTypes = {
|
98
182
|
columns: _propTypes.PropTypes.array.isRequired,
|
99
183
|
filterString: _propTypes.PropTypes.string.isRequired,
|
100
|
-
|
101
|
-
getNextIndex: _propTypes.PropTypes.func.isRequired,
|
184
|
+
id: _propTypes.PropTypes.string.isRequired,
|
102
185
|
moveElement: _propTypes.PropTypes.func.isRequired,
|
103
186
|
onSelectColumn: _propTypes.PropTypes.func.isRequired,
|
104
|
-
setAriaRegionText: _propTypes.PropTypes.func.isRequired
|
105
|
-
setColumnsObject: _propTypes.PropTypes.func.isRequired,
|
106
|
-
setFocusIndex: _propTypes.PropTypes.func.isRequired
|
187
|
+
setAriaRegionText: _propTypes.PropTypes.func.isRequired
|
107
188
|
};
|
@@ -71,13 +71,19 @@ var FilterPanel = function FilterPanel(_ref) {
|
|
71
71
|
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
72
72
|
showDividerLine = _useState2[0],
|
73
73
|
setShowDividerLine = _useState2[1];
|
74
|
+
|
75
|
+
/** Context */
|
76
|
+
var _useContext = (0, _react.useContext)(_.FilterContext),
|
77
|
+
panelOpen = _useContext.panelOpen,
|
78
|
+
setPanelOpen = _useContext.setPanelOpen;
|
74
79
|
var _useFilters = (0, _hooks.useFilters)({
|
75
80
|
updateMethod: updateMethod,
|
76
81
|
filters: filterSections,
|
77
82
|
setAllFilters: setAllFilters,
|
78
83
|
variation: _constants.PANEL,
|
79
84
|
reactTableFiltersState: reactTableFiltersState,
|
80
|
-
onCancel: onCancel
|
85
|
+
onCancel: onCancel,
|
86
|
+
panelOpen: panelOpen
|
81
87
|
}),
|
82
88
|
filtersState = _useFilters.filtersState,
|
83
89
|
prevFiltersObjectArrayRef = _useFilters.prevFiltersObjectArrayRef,
|
@@ -109,11 +115,6 @@ var FilterPanel = function FilterPanel(_ref) {
|
|
109
115
|
return updateMethod === _constants.BATCH;
|
110
116
|
}, [updateMethod]);
|
111
117
|
|
112
|
-
/** Context */
|
113
|
-
var _useContext = (0, _react.useContext)(_.FilterContext),
|
114
|
-
panelOpen = _useContext.panelOpen,
|
115
|
-
setPanelOpen = _useContext.setPanelOpen;
|
116
|
-
|
117
118
|
/** Methods */
|
118
119
|
var closePanel = function closePanel() {
|
119
120
|
cancel();
|
@@ -5,20 +5,17 @@ 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
|
-
* This source code is licensed under the Apache-2.0 license found in the
|
19
|
-
* LICENSE file in the root directory of this source tree.
|
20
|
-
*/
|
21
|
-
|
17
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
18
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
22
19
|
var FilterContext = /*#__PURE__*/(0, _react.createContext)();
|
23
20
|
exports.FilterContext = FilterContext;
|
24
21
|
var EventEmitter = {
|
@@ -39,42 +36,124 @@ var EventEmitter = {
|
|
39
36
|
}
|
40
37
|
}
|
41
38
|
};
|
42
|
-
var
|
39
|
+
var removeFilterItem = function removeFilterItem(state, index) {
|
40
|
+
return state.splice(index, 1);
|
41
|
+
};
|
42
|
+
var updateFilterState = function updateFilterState(state, type, value) {
|
43
|
+
if (type === _constants.CHECKBOX) {
|
44
|
+
return;
|
45
|
+
}
|
46
|
+
if (type === _constants.DATE) {
|
47
|
+
var _filterTagIndex = state.findIndex(function (val) {
|
48
|
+
return formatDateRange(val.value[0], val.value[1]) === formatDateRange(value[0], value[1]);
|
49
|
+
});
|
50
|
+
return removeFilterItem(state, _filterTagIndex);
|
51
|
+
}
|
52
|
+
var filterTagIndex = state.findIndex(function (val) {
|
53
|
+
return val.value === value;
|
54
|
+
});
|
55
|
+
return removeFilterItem(state, filterTagIndex);
|
56
|
+
};
|
57
|
+
var clearSingleFilter = function clearSingleFilter(_ref, setAllFilters, state) {
|
58
|
+
var key = _ref.key,
|
59
|
+
value = _ref.value;
|
60
|
+
var tempState = (0, _toConsumableArray2.default)(state.filters);
|
61
|
+
tempState.forEach(function (f, filterIndex) {
|
62
|
+
if (f.id === key) {
|
63
|
+
var filterValues = f.value;
|
64
|
+
var filterType = f.type;
|
65
|
+
updateFilterState(tempState, filterType, value);
|
66
|
+
if (filterType === _constants.CHECKBOX) {
|
67
|
+
/**
|
68
|
+
When all checkboxes of a group are all unselected the value still exists in the filtersObjectArray
|
69
|
+
This checks if all the checkboxes are selected = false and removes it from the array
|
70
|
+
*/
|
71
|
+
var valueIndex = filterValues.findIndex(function (val) {
|
72
|
+
return val.id === value;
|
73
|
+
});
|
74
|
+
filterValues[valueIndex].selected = false;
|
75
|
+
var updatedFilterObject = _objectSpread(_objectSpread({}, f), {}, {
|
76
|
+
value: (0, _toConsumableArray2.default)(filterValues)
|
77
|
+
});
|
78
|
+
tempState[filterIndex] = updatedFilterObject;
|
79
|
+
var index = tempState.findIndex(function (filter) {
|
80
|
+
return filter.id === key;
|
81
|
+
});
|
82
|
+
|
83
|
+
// If all the selected state is false remove from array
|
84
|
+
var shouldRemoveFromArray = tempState[index].value.every(function (val) {
|
85
|
+
return val.selected === false;
|
86
|
+
});
|
87
|
+
if (shouldRemoveFromArray) {
|
88
|
+
removeFilterItem(tempState, index);
|
89
|
+
}
|
90
|
+
}
|
91
|
+
}
|
92
|
+
});
|
93
|
+
setAllFilters(tempState);
|
94
|
+
};
|
95
|
+
exports.clearSingleFilter = clearSingleFilter;
|
96
|
+
var handleSingleFilterRemoval = function handleSingleFilterRemoval(key, value) {
|
97
|
+
EventEmitter.dispatch(_constants.CLEAR_SINGLE_FILTER, {
|
98
|
+
key: key,
|
99
|
+
value: value
|
100
|
+
});
|
101
|
+
};
|
102
|
+
var formatDateRange = function formatDateRange(startDate, endDate) {
|
103
|
+
var startDateObj = new Date(startDate);
|
104
|
+
var endDateObj = new Date(endDate);
|
105
|
+
return "".concat(startDateObj.toLocaleDateString(), " - ").concat(endDateObj.toLocaleDateString());
|
106
|
+
};
|
107
|
+
var prepareFiltersForTags = function prepareFiltersForTags(filters, renderDateLabel) {
|
43
108
|
var tags = [];
|
44
|
-
filters.forEach(function (
|
45
|
-
var id =
|
46
|
-
type =
|
47
|
-
value =
|
109
|
+
filters.forEach(function (_ref2) {
|
110
|
+
var id = _ref2.id,
|
111
|
+
type = _ref2.type,
|
112
|
+
value = _ref2.value;
|
113
|
+
var sharedFilterProps = {
|
114
|
+
filter: true,
|
115
|
+
onClose: function onClose() {
|
116
|
+
return handleSingleFilterRemoval(id, value);
|
117
|
+
}
|
118
|
+
};
|
48
119
|
if (type === _constants.DROPDOWN || type === _constants.RADIO || type === _constants.NUMBER) {
|
49
|
-
tags.push({
|
120
|
+
tags.push(_objectSpread({
|
50
121
|
key: id,
|
51
122
|
value: value
|
52
|
-
});
|
123
|
+
}, sharedFilterProps));
|
53
124
|
} else if (type === _constants.DATE) {
|
125
|
+
var _renderDateLabel;
|
54
126
|
var _value = (0, _slicedToArray2.default)(value, 2),
|
55
127
|
startDate = _value[0],
|
56
128
|
endDate = _value[1];
|
57
|
-
tags.push({
|
129
|
+
tags.push(_objectSpread({
|
58
130
|
key: id,
|
59
|
-
value:
|
60
|
-
});
|
131
|
+
value: (_renderDateLabel = renderDateLabel === null || renderDateLabel === void 0 ? void 0 : renderDateLabel(startDate, endDate)) !== null && _renderDateLabel !== void 0 ? _renderDateLabel : formatDateRange(startDate, endDate)
|
132
|
+
}, sharedFilterProps));
|
61
133
|
} else if (type === _constants.CHECKBOX) {
|
62
134
|
value.forEach(function (checkbox) {
|
63
135
|
if (checkbox.selected) {
|
64
|
-
tags.push({
|
136
|
+
tags.push(_objectSpread(_objectSpread({
|
65
137
|
key: id,
|
66
138
|
value: checkbox.value
|
67
|
-
})
|
139
|
+
}, sharedFilterProps), {}, {
|
140
|
+
onClose: function onClose() {
|
141
|
+
return handleSingleFilterRemoval(id, checkbox.value);
|
142
|
+
}
|
143
|
+
}));
|
68
144
|
}
|
69
145
|
});
|
70
146
|
}
|
71
147
|
});
|
72
148
|
return tags;
|
73
149
|
};
|
74
|
-
var FilterProvider = function FilterProvider(
|
75
|
-
var children =
|
76
|
-
filters =
|
77
|
-
|
150
|
+
var FilterProvider = function FilterProvider(_ref3) {
|
151
|
+
var children = _ref3.children,
|
152
|
+
filters = _ref3.filters,
|
153
|
+
filterProps = _ref3.filterProps;
|
154
|
+
var _ref4 = filterProps || {},
|
155
|
+
renderDateLabel = _ref4.renderDateLabel;
|
156
|
+
var filterTags = prepareFiltersForTags(filters, renderDateLabel);
|
78
157
|
var _useState = (0, _react.useState)(false),
|
79
158
|
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
80
159
|
panelOpen = _useState2[0],
|
@@ -92,5 +171,6 @@ var FilterProvider = function FilterProvider(_ref2) {
|
|
92
171
|
exports.FilterProvider = FilterProvider;
|
93
172
|
FilterProvider.propTypes = {
|
94
173
|
children: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.node), _propTypes.default.node]).isRequired,
|
174
|
+
filterProps: _propTypes.default.object,
|
95
175
|
filters: _propTypes.default.arrayOf(_propTypes.default.object).isRequired
|
96
176
|
};
|
@@ -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;
|