@carbon/ibm-products 2.6.1 → 2.8.0
Sign up to get free protection for your applications and to get access to all the features.
- package/css/index-full-carbon.css +6368 -5849
- 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 +24 -23
- 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 +1428 -278
- 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 +1902 -1767
- 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/AddSelect/AddSelectRow.js +2 -1
- package/es/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +6 -7
- package/es/components/ButtonMenu/ButtonMenu.js +4 -0
- package/es/components/ButtonSetWithOverflow/ButtonSetWithOverflow.js +21 -28
- package/es/components/ComboButton/ComboButton.js +5 -0
- package/es/components/CreateTearsheet/CreateTearsheet.js +30 -14
- package/es/components/CreateTearsheet/CreateTearsheetStep.js +10 -4
- package/es/components/CreateTearsheet/preview-components/MultiStepTearsheet.js +3 -0
- package/es/components/DataSpreadsheet/DataSpreadsheet.js +1 -1
- package/es/components/Datagrid/Datagrid/Datagrid.js +12 -7
- package/es/components/Datagrid/Datagrid/DatagridContent.js +18 -14
- package/es/components/Datagrid/Datagrid/DatagridHeaderRow.js +128 -10
- package/es/components/Datagrid/Datagrid/DatagridToolbar.js +8 -14
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/DraggableItemsList.js +1 -23
- package/es/components/Datagrid/Datagrid/addons/stateReducer.js +111 -0
- package/es/components/Datagrid/Datagrid.docs-page.js +6 -0
- package/es/components/Datagrid/useDatagrid.js +5 -2
- package/es/components/Datagrid/utils/DatagridActions.js +9 -10
- package/es/components/Datagrid/utils/getColTitle.js +25 -0
- package/es/components/NotificationsPanel/NotificationsPanel.js +8 -10
- package/es/components/OptionsTile/OptionsTile.js +2 -4
- package/es/components/PageHeader/PageHeaderUtils.js +10 -3
- package/es/components/TooltipTrigger/TooltipTrigger.js +62 -0
- package/es/components/TooltipTrigger/index.js +8 -0
- package/es/components/TooltipTrigger/useExample.js +49 -0
- package/es/components/UserProfileImage/UserProfileImage.js +7 -6
- package/es/global/js/hooks/useCreateComponentStepChange.js +98 -49
- package/es/global/js/hooks/useResizeObserver.js +19 -3
- package/es/global/js/hooks/useRetrieveStepData.js +1 -1
- package/es/global/js/utils/StoryDocsPage.js +0 -1
- package/es/global/js/utils/test-helper.js +97 -43
- package/es/settings.js +8 -2
- package/lib/components/AddSelect/AddSelectRow.js +2 -1
- package/lib/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +5 -6
- package/lib/components/ButtonMenu/ButtonMenu.js +5 -1
- package/lib/components/ButtonSetWithOverflow/ButtonSetWithOverflow.js +20 -27
- package/lib/components/ComboButton/ComboButton.js +5 -0
- package/lib/components/CreateTearsheet/CreateTearsheet.js +30 -14
- package/lib/components/CreateTearsheet/CreateTearsheetStep.js +10 -4
- package/lib/components/CreateTearsheet/preview-components/MultiStepTearsheet.js +3 -0
- package/lib/components/DataSpreadsheet/DataSpreadsheet.js +1 -1
- package/lib/components/Datagrid/Datagrid/Datagrid.js +12 -7
- package/lib/components/Datagrid/Datagrid/DatagridContent.js +17 -13
- package/lib/components/Datagrid/Datagrid/DatagridHeaderRow.js +131 -10
- package/lib/components/Datagrid/Datagrid/DatagridToolbar.js +7 -13
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/DraggableItemsList.js +4 -26
- package/lib/components/Datagrid/Datagrid/addons/stateReducer.js +122 -0
- package/lib/components/Datagrid/Datagrid.docs-page.js +6 -0
- package/lib/components/Datagrid/useDatagrid.js +5 -2
- package/lib/components/Datagrid/utils/DatagridActions.js +8 -9
- package/lib/components/Datagrid/utils/getColTitle.js +32 -0
- package/lib/components/NotificationsPanel/NotificationsPanel.js +8 -10
- package/lib/components/OptionsTile/OptionsTile.js +2 -4
- package/lib/components/PageHeader/PageHeaderUtils.js +10 -3
- package/lib/components/TooltipTrigger/TooltipTrigger.js +67 -0
- package/lib/components/TooltipTrigger/index.js +12 -0
- package/lib/components/TooltipTrigger/useExample.js +58 -0
- package/lib/components/UserProfileImage/UserProfileImage.js +6 -5
- package/lib/global/js/hooks/useCreateComponentStepChange.js +98 -49
- package/lib/global/js/hooks/useResizeObserver.js +19 -3
- package/lib/global/js/hooks/useRetrieveStepData.js +1 -1
- package/lib/global/js/utils/StoryDocsPage.js +0 -1
- package/lib/global/js/utils/test-helper.js +99 -44
- package/lib/settings.js +8 -2
- package/package.json +14 -14
- package/scss/components/APIKeyModal/_storybook-styles.scss +1 -1
- package/scss/components/AboutModal/_storybook-styles.scss +1 -1
- package/scss/components/ActionSet/_storybook-styles.scss +1 -1
- package/scss/components/CreateFullPage/_storybook-styles.scss +1 -1
- package/scss/components/CreateModal/_storybook-styles.scss +1 -1
- package/scss/components/CreateSidePanel/_storybook-styles.scss +1 -1
- package/scss/components/CreateTearsheet/_storybook-styles.scss +1 -1
- package/scss/components/CreateTearsheetNarrow/_storybook-styles.scss +1 -1
- package/scss/components/Datagrid/_storybook-styles.scss +1 -1
- package/scss/components/Datagrid/styles/_datagrid.scss +65 -0
- package/scss/components/EditSidePanel/_storybook-styles.scss +1 -1
- package/scss/components/EditTearsheet/_storybook-styles.scss +1 -1
- package/scss/components/EditTearsheetNarrow/_storybook-styles.scss +1 -1
- package/scss/components/EditUpdateCards/_storybook-styles.scss +1 -1
- package/scss/components/ExpressiveCard/_storybook-styles.scss +1 -1
- package/scss/components/NotificationsPanel/_storybook-styles.scss +1 -1
- package/scss/components/OptionsTile/_storybook-styles.scss +1 -1
- package/scss/components/PageHeader/_page-header.scss +8 -4
- package/scss/components/Tearsheet/_storybook-styles.scss +1 -1
- package/scss/components/TooltipTrigger/_index-with-carbon.scss +8 -0
- package/scss/components/TooltipTrigger/_index.scss +8 -0
- package/scss/components/TooltipTrigger/_storybook-styles.scss +6 -0
- package/scss/components/TooltipTrigger/_tooltip-trigger.scss +29 -0
- package/scss/components/WebTerminal/_storybook-styles.scss +1 -1
- package/scss/components/_index-with-carbon.scss +1 -0
- package/scss/components/_index.scss +1 -0
@@ -16,7 +16,7 @@ var _pconsole = _interopRequireDefault(require("../../../global/js/utils/pconsol
|
|
16
16
|
var _InlineEditContext = require("./addons/InlineEdit/InlineEditContext");
|
17
17
|
var _DatagridContent = require("./DatagridContent");
|
18
18
|
var _FilterProvider = require("./addons/Filtering/FilterProvider");
|
19
|
-
var _excluded = ["datagridState"];
|
19
|
+
var _excluded = ["datagridState", "title"];
|
20
20
|
/**
|
21
21
|
* Copyright IBM Corp. 2020, 2023
|
22
22
|
*
|
@@ -31,6 +31,7 @@ var componentName = 'Datagrid';
|
|
31
31
|
*/
|
32
32
|
var Datagrid = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
33
33
|
var datagridState = _ref.datagridState,
|
34
|
+
title = _ref.title,
|
34
35
|
rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
|
35
36
|
if (!datagridState) {
|
36
37
|
_pconsole.default.warn('Datagrid was not passed datagridState which is required to render this component.');
|
@@ -44,6 +45,10 @@ var Datagrid = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
44
45
|
className = datagridState.className,
|
45
46
|
filters = datagridState.state.filters;
|
46
47
|
var rows = DatagridPagination && datagridState.page || datagridState.rows;
|
48
|
+
var props = {
|
49
|
+
title: title,
|
50
|
+
datagridState: datagridState
|
51
|
+
};
|
47
52
|
return /*#__PURE__*/_react.default.createElement(_FilterProvider.FilterProvider, {
|
48
53
|
filters: filters
|
49
54
|
}, /*#__PURE__*/_react.default.createElement(_InlineEditContext.InlineEditProvider, null, /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, {
|
@@ -52,11 +57,7 @@ var Datagrid = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
52
57
|
className: (0, _classnames.default)(className, blockClass, withVirtualScroll ? "".concat(blockClass, "__datagridWrap") : "".concat(blockClass, "__datagridWrap-simple"), !isFetching && rows.length === 0 ? "".concat(blockClass, "__empty-state") : '')
|
53
58
|
}, (0, _devtools.getDevtoolsProps)(componentName)), (filterProps === null || filterProps === void 0 ? void 0 : filterProps.variation) === 'panel' ? /*#__PURE__*/_react.default.createElement("div", {
|
54
59
|
className: "".concat(blockClass, "__datagridWithPanel ").concat(blockClass, "__displayFlex")
|
55
|
-
}, /*#__PURE__*/_react.default.createElement(_DatagridContent.DatagridContent,
|
56
|
-
datagridState: datagridState
|
57
|
-
})) : /*#__PURE__*/_react.default.createElement(_DatagridContent.DatagridContent, {
|
58
|
-
datagridState: datagridState
|
59
|
-
}))));
|
60
|
+
}, /*#__PURE__*/_react.default.createElement(_DatagridContent.DatagridContent, props)) : /*#__PURE__*/_react.default.createElement(_DatagridContent.DatagridContent, props))));
|
60
61
|
});
|
61
62
|
|
62
63
|
// Return a placeholder if not released and not enabled by feature flag
|
@@ -70,5 +71,9 @@ Datagrid.propTypes = {
|
|
70
71
|
/**
|
71
72
|
* The data grid state, much of it being supplied by the useDatagrid hook
|
72
73
|
*/
|
73
|
-
datagridState: _propTypes.default.object.isRequired
|
74
|
+
datagridState: _propTypes.default.object.isRequired,
|
75
|
+
/**
|
76
|
+
* Table title
|
77
|
+
*/
|
78
|
+
title: _propTypes.default.string
|
74
79
|
};
|
@@ -8,23 +8,23 @@ Object.defineProperty(exports, "__esModule", {
|
|
8
8
|
exports.DatagridContent = void 0;
|
9
9
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
10
10
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
11
|
+
var _Filtering = require("./addons/Filtering");
|
11
12
|
var _react = _interopRequireWildcard(require("react"));
|
12
|
-
var _classnames = _interopRequireDefault(require("classnames"));
|
13
|
-
var _propTypes = _interopRequireDefault(require("prop-types"));
|
14
13
|
var _react2 = require("@carbon/react");
|
15
|
-
var
|
16
|
-
var
|
14
|
+
var _settings = require("../../../settings");
|
15
|
+
var _constants = require("./addons/Filtering/constants");
|
17
16
|
var _DatagridBody = _interopRequireDefault(require("./DatagridBody"));
|
17
|
+
var _DatagridHead = _interopRequireDefault(require("./DatagridHead"));
|
18
18
|
var _DatagridToolbar = _interopRequireDefault(require("./DatagridToolbar"));
|
19
|
-
var
|
20
|
-
var _settings = require("../../../settings");
|
19
|
+
var _FilterSummary = require("../../FilterSummary");
|
21
20
|
var _InlineEditContext = require("./addons/InlineEdit/InlineEditContext");
|
22
|
-
var
|
21
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
22
|
+
var _classnames = _interopRequireDefault(require("classnames"));
|
23
23
|
var _handleGridFocus = require("./addons/InlineEdit/handleGridFocus");
|
24
|
+
var _handleGridKeyPress = require("./addons/InlineEdit/handleGridKeyPress");
|
25
|
+
var _layout = require("@carbon/layout");
|
24
26
|
var _hooks = require("../../../global/js/hooks");
|
25
27
|
var _hooks2 = require("../../DataSpreadsheet/hooks");
|
26
|
-
var _FilterSummary = require("../../FilterSummary");
|
27
|
-
var _constants = require("./addons/Filtering/constants");
|
28
28
|
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); }
|
29
29
|
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; }
|
30
30
|
/**
|
@@ -37,7 +37,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
|
|
37
37
|
var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
|
38
38
|
var DatagridContent = function DatagridContent(_ref) {
|
39
39
|
var _cx4;
|
40
|
-
var datagridState = _ref.datagridState
|
40
|
+
var datagridState = _ref.datagridState,
|
41
|
+
title = _ref.title;
|
41
42
|
var _useContext = (0, _react.useContext)(_InlineEditContext.InlineEditContext),
|
42
43
|
inlineEditState = _useContext.state,
|
43
44
|
dispatch = _useContext.dispatch;
|
@@ -105,7 +106,8 @@ var DatagridContent = function DatagridContent(_ref) {
|
|
105
106
|
} : null,
|
106
107
|
onFocus: withInlineEdit ? function () {
|
107
108
|
return (0, _handleGridFocus.handleGridFocus)(inlineEditState, dispatch);
|
108
|
-
} : null
|
109
|
+
} : null,
|
110
|
+
title: title
|
109
111
|
}), !withVirtualScroll ? /*#__PURE__*/_react.default.createElement(_DatagridHead.default, datagridState) : null, /*#__PURE__*/_react.default.createElement(_DatagridBody.default, (0, _extends2.default)({}, datagridState, {
|
110
112
|
rows: rows
|
111
113
|
})));
|
@@ -136,7 +138,8 @@ var DatagridContent = function DatagridContent(_ref) {
|
|
136
138
|
filters: filterTags,
|
137
139
|
clearFilters: function clearFilters() {
|
138
140
|
return EventEmitter.dispatch(_constants.CLEAR_FILTERS);
|
139
|
-
}
|
141
|
+
},
|
142
|
+
renderLabel: filterProps.renderLabel
|
140
143
|
});
|
141
144
|
};
|
142
145
|
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_react2.TableContainer, {
|
@@ -188,5 +191,6 @@ DatagridContent.propTypes = {
|
|
188
191
|
setAllFilters: _propTypes.default.func,
|
189
192
|
getFilterProps: _propTypes.default.func,
|
190
193
|
state: _propTypes.default.object
|
191
|
-
})
|
194
|
+
}),
|
195
|
+
title: _propTypes.default.string
|
192
196
|
};
|
@@ -1,19 +1,26 @@
|
|
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 _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
9
10
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
10
|
-
var
|
11
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
12
|
+
var _react = _interopRequireWildcard(require("react"));
|
11
13
|
var _classnames = _interopRequireDefault(require("classnames"));
|
12
14
|
var _react2 = require("@carbon/react");
|
15
|
+
var _layout = require("@carbon/layout");
|
13
16
|
var _commonColumnIds = require("../common-column-ids");
|
14
17
|
var _settings = require("../../../settings");
|
18
|
+
var _getColTitle = _interopRequireDefault(require("../utils/getColTitle"));
|
19
|
+
var _stateReducer = require("./addons/stateReducer");
|
20
|
+
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); }
|
21
|
+
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
22
|
/**
|
16
|
-
* Copyright IBM Corp. 2020,
|
23
|
+
* Copyright IBM Corp. 2020, 2023
|
17
24
|
*
|
18
25
|
* This source code is licensed under the Apache-2.0 license found in the
|
19
26
|
* LICENSE file in the root directory of this source tree.
|
@@ -22,16 +29,86 @@ var _settings = require("../../../settings");
|
|
22
29
|
// @flow
|
23
30
|
|
24
31
|
var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
|
32
|
+
var getAccessibilityProps = function getAccessibilityProps(header) {
|
33
|
+
var props = {};
|
34
|
+
var title = (0, _getColTitle.default)(header);
|
35
|
+
if (title) {
|
36
|
+
props.title = title;
|
37
|
+
} else {
|
38
|
+
props['aria-hidden'] = true;
|
39
|
+
}
|
40
|
+
return props;
|
41
|
+
};
|
25
42
|
var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
|
43
|
+
// Used to measure the height of the table and uses that value
|
44
|
+
// to display a vertical line to indicate the column you are resizing
|
45
|
+
(0, _react.useEffect)(function () {
|
46
|
+
var tableId = datagridState.tableId;
|
47
|
+
if (tableId) {
|
48
|
+
var gridElement = document.querySelector("#".concat(tableId));
|
49
|
+
var tableElement = gridElement.querySelector('table');
|
50
|
+
var headerRowElement = document.querySelector("#".concat(tableId, " .").concat(blockClass, "__head"));
|
51
|
+
var hasHorizontalScrollbar = tableElement.scrollWidth > tableElement.clientWidth;
|
52
|
+
var scrollBuffer = hasHorizontalScrollbar ? 18 : 2;
|
53
|
+
var tableToolbar = gridElement.querySelector(".".concat(blockClass, "__table-toolbar"));
|
54
|
+
var tableToolbarHeight = (tableToolbar === null || tableToolbar === void 0 ? void 0 : tableToolbar.offsetHeight) || 0;
|
55
|
+
var setCustomValues = function setCustomValues(_ref) {
|
56
|
+
var _ref$rowHeight = _ref.rowHeight,
|
57
|
+
rowHeight = _ref$rowHeight === void 0 ? 48 : _ref$rowHeight,
|
58
|
+
gridHeight = _ref.gridHeight;
|
59
|
+
headerRowElement.style.setProperty("--".concat(blockClass, "--row-height"), (0, _layout.px)(rowHeight));
|
60
|
+
headerRowElement.style.setProperty("--".concat(blockClass, "--grid-height"), (0, _layout.px)(gridHeight - scrollBuffer - tableToolbarHeight));
|
61
|
+
};
|
62
|
+
setCustomValues({
|
63
|
+
gridHeight: gridElement.offsetHeight,
|
64
|
+
rowHeight: headerRowElement.clientHeight
|
65
|
+
});
|
66
|
+
}
|
67
|
+
}, [datagridState.rowSize, datagridState.tableId, datagridState]);
|
68
|
+
var _useState = (0, _react.useState)(2),
|
69
|
+
_useState2 = (0, _slicedToArray2.default)(_useState, 1),
|
70
|
+
incrementAmount = _useState2[0];
|
71
|
+
var getClientXPosition = function getClientXPosition(event) {
|
72
|
+
var isTouchEvent = false;
|
73
|
+
if (event.type === 'touchstart') {
|
74
|
+
// Do not respond to multiple touches (e.g. 2 or 3 fingers)
|
75
|
+
if (event.touches && event.touches.length > 1) {
|
76
|
+
return;
|
77
|
+
}
|
78
|
+
isTouchEvent = true;
|
79
|
+
}
|
80
|
+
var clientX = isTouchEvent ? Math.round(event.touches[0].clientX) : event.clientX;
|
81
|
+
var closestHeader = event.target.closest('th');
|
82
|
+
var closestHeaderCoords = closestHeader.getBoundingClientRect();
|
83
|
+
var headerOffset = closestHeaderCoords.left;
|
84
|
+
var offsetValue = clientX - headerOffset;
|
85
|
+
return offsetValue;
|
86
|
+
};
|
87
|
+
(0, _react.useEffect)(function () {
|
88
|
+
var isResizing = datagridState.state.isResizing;
|
89
|
+
if (isResizing) {
|
90
|
+
var onColResizeEnd = datagridState.onColResizeEnd;
|
91
|
+
document.addEventListener('mouseup', function () {
|
92
|
+
(0, _stateReducer.handleColumnResizeEndEvent)(datagridState.dispatch, onColResizeEnd, isResizing);
|
93
|
+
document.activeElement.blur();
|
94
|
+
});
|
95
|
+
}
|
96
|
+
return function () {
|
97
|
+
document.removeEventListener('mouseup', function () {
|
98
|
+
return (0, _stateReducer.handleColumnResizeEndEvent)(datagridState.dispatch);
|
99
|
+
});
|
100
|
+
};
|
101
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
102
|
+
}, [datagridState.state.isResizing]);
|
26
103
|
return /*#__PURE__*/_react.default.createElement(_react2.TableRow, (0, _extends2.default)({}, headerGroup.getHeaderGroupProps({
|
27
104
|
role: false
|
28
105
|
}), {
|
29
106
|
className: (0, _classnames.default)("".concat(blockClass, "__head"), headerGroup.getHeaderGroupProps().className),
|
30
107
|
ref: headRef
|
31
|
-
}), datagridState.headers.filter(function (
|
32
|
-
var isVisible =
|
108
|
+
}), datagridState.headers.filter(function (_ref2) {
|
109
|
+
var isVisible = _ref2.isVisible;
|
33
110
|
return isVisible;
|
34
|
-
}).map(function (header) {
|
111
|
+
}).map(function (header, index) {
|
35
112
|
var _cx;
|
36
113
|
if (header.id === _commonColumnIds.selectionColumnId) {
|
37
114
|
// render directly without the wrapper TableHeader
|
@@ -39,13 +116,57 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
|
|
39
116
|
key: header.id
|
40
117
|
});
|
41
118
|
}
|
42
|
-
|
43
|
-
|
44
|
-
|
119
|
+
var _ref3 = header || 50,
|
120
|
+
minWidth = _ref3.minWidth;
|
121
|
+
var visibleColumns = datagridState.visibleColumns,
|
122
|
+
state = datagridState.state,
|
123
|
+
dispatch = datagridState.dispatch,
|
124
|
+
onColResizeEnd = datagridState.onColResizeEnd;
|
125
|
+
var columnResizing = state.columnResizing,
|
126
|
+
isResizing = state.isResizing;
|
127
|
+
var columnWidths = columnResizing.columnWidths;
|
128
|
+
var originalCol = visibleColumns[index];
|
129
|
+
return /*#__PURE__*/_react.default.createElement(_react2.TableHeader, (0, _extends2.default)({}, header.getHeaderProps(), {
|
45
130
|
className: (0, _classnames.default)((_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__resizableColumn"), header.getResizerProps), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__isResizing"), header.isResizing), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__sortableColumn"), datagridState.isTableSortable), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__isSorted"), header.isSorted), _cx), header.getHeaderProps().className),
|
46
131
|
key: header.id
|
47
|
-
}), header.render('Header'), header.getResizerProps && /*#__PURE__*/_react.default.createElement("
|
48
|
-
|
132
|
+
}, getAccessibilityProps(header)), header.render('Header'), header.getResizerProps && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({}, header.getResizerProps(), {
|
133
|
+
onMouseMove: function onMouseMove(event) {
|
134
|
+
if (isResizing) {
|
135
|
+
var newWidth = getClientXPosition(event);
|
136
|
+
// Sets a min width for resizing so at least one character from the column header is visible
|
137
|
+
if (newWidth >= 50) {
|
138
|
+
(0, _stateReducer.handleColumnResizingEvent)(dispatch, header, newWidth);
|
139
|
+
}
|
140
|
+
}
|
141
|
+
},
|
142
|
+
onMouseDown: function onMouseDown() {
|
143
|
+
return (0, _stateReducer.handleColumnResizeStartEvent)(dispatch, header.id);
|
144
|
+
},
|
145
|
+
onKeyDown: function onKeyDown(event) {
|
146
|
+
var key = event.key;
|
147
|
+
if (key === 'ArrowLeft' || key === 'ArrowRight') {
|
148
|
+
var currentColumnWidth = columnWidths[header.id] || (datagridState.isTableSortable && originalCol.width < 90 ? 90 : originalCol.width);
|
149
|
+
if (key === 'ArrowLeft') {
|
150
|
+
if (currentColumnWidth - incrementAmount > Math.max(minWidth, 50)) {
|
151
|
+
var newWidth = currentColumnWidth - incrementAmount;
|
152
|
+
(0, _stateReducer.handleColumnResizingEvent)(dispatch, header, newWidth, true);
|
153
|
+
}
|
154
|
+
}
|
155
|
+
if (key === 'ArrowRight') {
|
156
|
+
var _newWidth = currentColumnWidth + incrementAmount;
|
157
|
+
(0, _stateReducer.handleColumnResizingEvent)(dispatch, header, _newWidth, true);
|
158
|
+
}
|
159
|
+
}
|
160
|
+
},
|
161
|
+
onKeyUp: function onKeyUp() {
|
162
|
+
return (0, _stateReducer.handleColumnResizeEndEvent)(dispatch, onColResizeEnd, header.id);
|
163
|
+
},
|
164
|
+
className: (0, _classnames.default)("".concat(blockClass, "__col-resizer-range")),
|
165
|
+
type: "range",
|
166
|
+
defaultValue: originalCol.width,
|
167
|
+
"aria-label": "Resize column"
|
168
|
+
})), /*#__PURE__*/_react.default.createElement("span", {
|
169
|
+
className: "".concat(blockClass, "__col-resize-indicator")
|
49
170
|
})));
|
50
171
|
}));
|
51
172
|
};
|
@@ -9,10 +9,8 @@ exports.default = void 0;
|
|
9
9
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
10
10
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
11
11
|
var _react = _interopRequireWildcard(require("react"));
|
12
|
-
var _icons = require("@carbon/react/icons");
|
13
12
|
var _react2 = require("@carbon/react");
|
14
13
|
var _useResizeObserver2 = require("../../../global/js/hooks/useResizeObserver");
|
15
|
-
var _ButtonMenu = require("../../ButtonMenu");
|
16
14
|
var _settings = require("../../../settings");
|
17
15
|
var _classnames = _interopRequireDefault(require("classnames"));
|
18
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); }
|
@@ -86,19 +84,15 @@ var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridS
|
|
86
84
|
if ((toolbarBatchActions === null || toolbarBatchActions === void 0 ? void 0 : toolbarBatchActions.length) <= 3 && !displayAllInMenu) {
|
87
85
|
return null;
|
88
86
|
}
|
89
|
-
return /*#__PURE__*/_react.default.createElement(
|
90
|
-
label:
|
91
|
-
|
92
|
-
className: (0, _classnames.default)("".concat(blockClass, "__button-menu"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__button-menu--icon-only"), width <= minWidthBeforeOverflowIcon)),
|
93
|
-
menuOptionsClass: "".concat(blockClass, "__button-menu-options"),
|
94
|
-
flipped: true,
|
95
|
-
menuAriaLabel: 'Batch actions'
|
87
|
+
return /*#__PURE__*/_react.default.createElement(_react2.MenuButton, {
|
88
|
+
label: "More",
|
89
|
+
className: (0, _classnames.default)("".concat(blockClass, "__button-menu"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__button-menu--icon-only"), width <= minWidthBeforeOverflowIcon))
|
96
90
|
}, toolbarBatchActions && toolbarBatchActions.map(function (batchAction, index) {
|
97
91
|
if (index < 2) {
|
98
92
|
if (displayAllInMenu) {
|
99
|
-
return /*#__PURE__*/_react.default.createElement(
|
93
|
+
return /*#__PURE__*/_react.default.createElement(_react2.MenuItem, {
|
100
94
|
key: "".concat(batchAction.label, "-").concat(index),
|
101
|
-
|
95
|
+
label: batchAction.label,
|
102
96
|
onClick: function onClick(event) {
|
103
97
|
batchAction.onClick(getSelectedRowData(), event);
|
104
98
|
if (batchAction.type === 'select_all') {
|
@@ -109,9 +103,9 @@ var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridS
|
|
109
103
|
}
|
110
104
|
return null;
|
111
105
|
}
|
112
|
-
return /*#__PURE__*/_react.default.createElement(
|
106
|
+
return /*#__PURE__*/_react.default.createElement(_react2.MenuItem, {
|
113
107
|
key: "".concat(batchAction.label, "-").concat(index),
|
114
|
-
|
108
|
+
label: batchAction.label,
|
115
109
|
onClick: function onClick(event) {
|
116
110
|
batchAction.onClick(getSelectedRowData(), event);
|
117
111
|
if (batchAction.type === 'select_all') {
|
@@ -11,6 +11,7 @@ var _react2 = require("@carbon/react");
|
|
11
11
|
var _common = require("./common");
|
12
12
|
var _DraggableElement = _interopRequireDefault(require("../../DraggableElement"));
|
13
13
|
var _settings = require("../../../../../settings");
|
14
|
+
var _getColTitle2 = _interopRequireDefault(require("../../../utils/getColTitle"));
|
14
15
|
/**
|
15
16
|
* Copyright IBM Corp. 2023, 2023
|
16
17
|
*
|
@@ -29,40 +30,17 @@ var DraggableItemsList = function DraggableItemsList(_ref) {
|
|
29
30
|
setAriaRegionText = _ref.setAriaRegionText,
|
30
31
|
setColumnsObject = _ref.setColumnsObject,
|
31
32
|
setFocusIndex = _ref.setFocusIndex;
|
32
|
-
// This function recursively looks for the nested header element until we can find the key which contains the title.
|
33
|
-
// This can happen if multiple hooks are used together that manipulate the rendering of the column
|
34
|
-
// header, such as `useColumnCenterAlign` and `useSortableColumns`.
|
35
|
-
var getNestedTitle = function getNestedTitle(component) {
|
36
|
-
if (component && !component.key) {
|
37
|
-
return getNestedTitle(component.children);
|
38
|
-
}
|
39
|
-
if (component && component.key && typeof component.key === 'string') {
|
40
|
-
return component.key;
|
41
|
-
}
|
42
|
-
};
|
43
|
-
var getColTitle = function getColTitle(col) {
|
44
|
-
if (!col) {
|
45
|
-
return;
|
46
|
-
}
|
47
|
-
var checkTitle = function checkTitle() {
|
48
|
-
if (col.Header().props.children.props && col.Header().props.children.props.title) {
|
49
|
-
return col.Header().props.children.props.title;
|
50
|
-
}
|
51
|
-
return getNestedTitle(col.Header().props.children.props);
|
52
|
-
};
|
53
|
-
return typeof (col === null || col === void 0 ? void 0 : col.Header) === 'function' ? checkTitle() : col.Header.props.title;
|
54
|
-
};
|
55
33
|
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, columns
|
56
34
|
// hide the columns without Header, e.g the sticky actions, spacer
|
57
35
|
.filter(function (colDef) {
|
58
|
-
return !!
|
36
|
+
return !!(0, _getColTitle2.default)(colDef);
|
59
37
|
}).filter(Boolean).filter(function (colDef) {
|
60
38
|
return !colDef.isAction;
|
61
39
|
}).filter(function (colDef) {
|
62
40
|
var _getColTitle;
|
63
|
-
return filterString.length === 0 || ((_getColTitle =
|
41
|
+
return filterString.length === 0 || ((_getColTitle = (0, _getColTitle2.default)(colDef)) === null || _getColTitle === void 0 ? void 0 : _getColTitle.toLowerCase().includes(filterString)) && colDef.id !== 'spacer';
|
64
42
|
}).map(function (colDef, i) {
|
65
|
-
var colHeaderTitle =
|
43
|
+
var colHeaderTitle = (0, _getColTitle2.default)(colDef);
|
66
44
|
var searchString = new RegExp('(' + filterString + ')');
|
67
45
|
var res = filterString.length ? colHeaderTitle.toLowerCase().split(searchString) : null;
|
68
46
|
var firstWord = res !== null ? res[0] === '' ? res[1].charAt(0).toUpperCase() + res[1].substring(1) : res[0].charAt(0).toUpperCase() + res[0].substring(1) : null;
|
@@ -0,0 +1,122 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
5
|
+
value: true
|
6
|
+
});
|
7
|
+
exports.stateReducer = exports.handleColumnResizingEvent = exports.handleColumnResizeStartEvent = exports.handleColumnResizeEndEvent = void 0;
|
8
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
9
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
10
|
+
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; }
|
11
|
+
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; }
|
12
|
+
/**
|
13
|
+
* Copyright IBM Corp. 2023, 2023
|
14
|
+
*
|
15
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
16
|
+
* LICENSE file in the root directory of this source tree.
|
17
|
+
*/
|
18
|
+
|
19
|
+
var COLUMN_RESIZE_START = 'columnStartResizing';
|
20
|
+
var COLUMN_RESIZING = 'columnResizing';
|
21
|
+
var COLUMN_RESIZE_END = 'columnDoneResizing';
|
22
|
+
var INIT = 'init';
|
23
|
+
var handleColumnResizeStartEvent = function handleColumnResizeStartEvent(dispatch, headerId) {
|
24
|
+
dispatch({
|
25
|
+
type: COLUMN_RESIZE_START,
|
26
|
+
payload: {
|
27
|
+
headerId: headerId
|
28
|
+
}
|
29
|
+
});
|
30
|
+
};
|
31
|
+
exports.handleColumnResizeStartEvent = handleColumnResizeStartEvent;
|
32
|
+
var handleColumnResizeEndEvent = function handleColumnResizeEndEvent(dispatch, onColResizeEnd, headerId) {
|
33
|
+
dispatch({
|
34
|
+
type: COLUMN_RESIZE_END,
|
35
|
+
payload: {
|
36
|
+
onColResizeEnd: onColResizeEnd,
|
37
|
+
headerId: headerId
|
38
|
+
}
|
39
|
+
});
|
40
|
+
};
|
41
|
+
exports.handleColumnResizeEndEvent = handleColumnResizeEndEvent;
|
42
|
+
var handleColumnResizingEvent = function handleColumnResizingEvent(dispatch, header, newWidth, isKeyEvent) {
|
43
|
+
if (isKeyEvent) {
|
44
|
+
dispatch({
|
45
|
+
type: COLUMN_RESIZE_START,
|
46
|
+
payload: {
|
47
|
+
newWidth: newWidth,
|
48
|
+
headerId: header.id,
|
49
|
+
defaultWidth: header.originalWidth
|
50
|
+
}
|
51
|
+
});
|
52
|
+
}
|
53
|
+
dispatch({
|
54
|
+
type: COLUMN_RESIZING,
|
55
|
+
payload: {
|
56
|
+
newWidth: newWidth,
|
57
|
+
headerId: header.id,
|
58
|
+
defaultWidth: header.originalWidth
|
59
|
+
}
|
60
|
+
});
|
61
|
+
};
|
62
|
+
exports.handleColumnResizingEvent = handleColumnResizingEvent;
|
63
|
+
var stateReducer = function stateReducer(newState, action) {
|
64
|
+
switch (action.type) {
|
65
|
+
case INIT:
|
66
|
+
{
|
67
|
+
return _objectSpread(_objectSpread({}, newState), {}, {
|
68
|
+
isResizing: false
|
69
|
+
});
|
70
|
+
}
|
71
|
+
case COLUMN_RESIZE_START:
|
72
|
+
{
|
73
|
+
var headerId = action.payload.headerId;
|
74
|
+
return _objectSpread(_objectSpread({}, newState), {}, {
|
75
|
+
isResizing: headerId
|
76
|
+
});
|
77
|
+
}
|
78
|
+
case COLUMN_RESIZING:
|
79
|
+
{
|
80
|
+
var _ref = action.payload || {},
|
81
|
+
_headerId = _ref.headerId,
|
82
|
+
newWidth = _ref.newWidth,
|
83
|
+
defaultWidth = _ref.defaultWidth;
|
84
|
+
var newColumnWidth = {};
|
85
|
+
if (typeof _headerId === 'undefined') {
|
86
|
+
return _objectSpread({}, newState);
|
87
|
+
}
|
88
|
+
newColumnWidth[_headerId] = newWidth;
|
89
|
+
var cleanedWidths = Object.fromEntries(Object.entries(newState.columnResizing.columnWidths).filter(function (_ref2) {
|
90
|
+
var _ref3 = (0, _slicedToArray2.default)(_ref2, 2),
|
91
|
+
_ = _ref3[0],
|
92
|
+
value = _ref3[1];
|
93
|
+
return !isNaN(value);
|
94
|
+
}));
|
95
|
+
return _objectSpread(_objectSpread({}, newState), {}, {
|
96
|
+
isResizing: _headerId,
|
97
|
+
columnResizing: _objectSpread(_objectSpread({}, newState.columnResizing), {}, {
|
98
|
+
columnWidth: defaultWidth,
|
99
|
+
columnWidths: _objectSpread(_objectSpread({}, cleanedWidths), newColumnWidth),
|
100
|
+
headerIdWidths: [_headerId, newWidth]
|
101
|
+
})
|
102
|
+
});
|
103
|
+
}
|
104
|
+
case COLUMN_RESIZE_END:
|
105
|
+
{
|
106
|
+
var _action$payload = action.payload,
|
107
|
+
onColResizeEnd = _action$payload.onColResizeEnd,
|
108
|
+
_headerId2 = _action$payload.headerId;
|
109
|
+
var currentColumn = {};
|
110
|
+
currentColumn[_headerId2] = newState.columnResizing.columnWidths[_headerId2];
|
111
|
+
var allChangedColumns = newState.columnResizing.columnWidths;
|
112
|
+
var isResizing = newState.isResizing;
|
113
|
+
if (isResizing) {
|
114
|
+
onColResizeEnd === null || onColResizeEnd === void 0 ? void 0 : onColResizeEnd(currentColumn, allChangedColumns);
|
115
|
+
}
|
116
|
+
return _objectSpread(_objectSpread({}, newState), {}, {
|
117
|
+
isResizing: false
|
118
|
+
});
|
119
|
+
}
|
120
|
+
}
|
121
|
+
};
|
122
|
+
exports.stateReducer = stateReducer;
|
@@ -51,6 +51,12 @@ var DocsPage = function DocsPage() {
|
|
51
51
|
language: 'jsx',
|
52
52
|
code: "\n const columns = [\n {\n Header: 'First Name',\n accessor: 'firstName',\n },\n {\n Header: 'Last Name',\n accessor: 'lastName',\n Cell: ({ cell: { value } }) => (\n <span className=\"custom-cell-wrapper\">{value}</span>\n ),\n },\n];\n "
|
53
53
|
}
|
54
|
+
}, {
|
55
|
+
description: "There is also an optional resize callback when resizing columns, allowing you to save the widths of columns that have been resized. The resize callback returns the column that was just resized and it's width, in addition to all of the columns that have been resized and their widths.",
|
56
|
+
source: {
|
57
|
+
language: 'jsx',
|
58
|
+
code: "\nuseDatagrid({\n columns,\n data,\n onColResizeEnd: (currentColumn, allColumns) =>\n console.log(currentColumn, allColumns),\n});\n "
|
59
|
+
}
|
54
60
|
}, {
|
55
61
|
title: 'Rendering the table toolbar',
|
56
62
|
image: /*#__PURE__*/_react.default.createElement("img", {
|
@@ -17,6 +17,7 @@ var _useRowSize = _interopRequireDefault(require("./useRowSize"));
|
|
17
17
|
var _DatagridHeaderRow = _interopRequireDefault(require("./Datagrid/DatagridHeaderRow"));
|
18
18
|
var _useFlexResize = _interopRequireDefault(require("./useFlexResize"));
|
19
19
|
var _useFloatingScroll = _interopRequireDefault(require("./useFloatingScroll"));
|
20
|
+
var _stateReducer = require("./Datagrid/addons/stateReducer");
|
20
21
|
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; }
|
21
22
|
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
23
|
* Licensed Materials - Property of IBM
|
@@ -35,9 +36,11 @@ var useDatagrid = function useDatagrid(params) {
|
|
35
36
|
for (var _len = arguments.length, plugins = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
36
37
|
plugins[_key - 1] = arguments[_key];
|
37
38
|
}
|
38
|
-
var tableState = _reactTable.useTable.apply(void 0, [_objectSpread({
|
39
|
+
var tableState = _reactTable.useTable.apply(void 0, [_objectSpread(_objectSpread({
|
39
40
|
tableId: tableId
|
40
|
-
}, params)
|
41
|
+
}, params), {}, {
|
42
|
+
stateReducer: _stateReducer.stateReducer
|
43
|
+
})].concat(defaultPlugins, plugins, defaultEndPlugins, (0, _toConsumableArray2.default)(clientEndPlugins)));
|
41
44
|
return tableState;
|
42
45
|
};
|
43
46
|
var _default = useDatagrid;
|
@@ -9,7 +9,6 @@ exports.DatagridActions = void 0;
|
|
9
9
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
10
10
|
var _icons = require("@carbon/react/icons");
|
11
11
|
var _react = require("@carbon/react");
|
12
|
-
var _ButtonMenu = require("../../ButtonMenu");
|
13
12
|
var _react2 = _interopRequireWildcard(require("react"));
|
14
13
|
var _addonActions = require("@storybook/addon-actions");
|
15
14
|
var _settings = require("../../../settings");
|
@@ -161,18 +160,18 @@ var DatagridActions = function DatagridActions(datagridState) {
|
|
161
160
|
onClick: downloadCsv
|
162
161
|
})), CustomizeColumnsButton && /*#__PURE__*/_react2.default.createElement("div", {
|
163
162
|
style: style
|
164
|
-
}, /*#__PURE__*/_react2.default.createElement(CustomizeColumnsButton, null)), /*#__PURE__*/_react2.default.createElement(RowSizeDropdown, rowSizeDropdownProps), /*#__PURE__*/_react2.default.createElement(
|
163
|
+
}, /*#__PURE__*/_react2.default.createElement(CustomizeColumnsButton, null)), /*#__PURE__*/_react2.default.createElement(RowSizeDropdown, rowSizeDropdownProps), /*#__PURE__*/_react2.default.createElement(_react.MenuButton, {
|
165
164
|
label: "Primary button",
|
166
165
|
renderIcon: _icons.ChevronDown,
|
167
|
-
|
168
|
-
}, /*#__PURE__*/_react2.default.createElement(
|
169
|
-
|
166
|
+
className: "".concat(blockClass, "__toolbar-options")
|
167
|
+
}, /*#__PURE__*/_react2.default.createElement(_react.MenuItem, {
|
168
|
+
label: "Option 1",
|
170
169
|
onClick: (0, _addonActions.action)("Click on ButtonMenu Option 1")
|
171
|
-
}), /*#__PURE__*/_react2.default.createElement(
|
172
|
-
|
170
|
+
}), /*#__PURE__*/_react2.default.createElement(_react.MenuItem, {
|
171
|
+
label: "Option 2",
|
173
172
|
onClick: (0, _addonActions.action)("Click on ButtonMenu Option 2")
|
174
|
-
}), /*#__PURE__*/_react2.default.createElement(
|
175
|
-
|
173
|
+
}), /*#__PURE__*/_react2.default.createElement(_react.MenuItem, {
|
174
|
+
label: "Option 3",
|
176
175
|
onClick: (0, _addonActions.action)("Click on ButtonMenu Option 3")
|
177
176
|
}))) : /*#__PURE__*/_react2.default.createElement(_react.TableToolbarContent, null, renderFilterPanelButton(), /*#__PURE__*/_react2.default.createElement(_react.TableToolbarSearch, {
|
178
177
|
size: "xl",
|
@@ -0,0 +1,32 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.default = void 0;
|
7
|
+
// This function recursively looks for the nested header element until we can find the key which contains the title.
|
8
|
+
// This can happen if multiple hooks are used together that manipulate the rendering of the column
|
9
|
+
// header, such as `useColumnCenterAlign` and `useSortableColumns`.
|
10
|
+
var getNestedTitle = function getNestedTitle(component) {
|
11
|
+
if (component && !component.key) {
|
12
|
+
return getNestedTitle(component.children);
|
13
|
+
}
|
14
|
+
if (component && component.key && typeof component.key === 'string') {
|
15
|
+
return component.key;
|
16
|
+
}
|
17
|
+
};
|
18
|
+
var getColTitle = function getColTitle(col) {
|
19
|
+
var _col$Header;
|
20
|
+
if (!col) {
|
21
|
+
return;
|
22
|
+
}
|
23
|
+
var checkTitle = function checkTitle() {
|
24
|
+
if (col.Header().props.children.props && col.Header().props.children.props.title) {
|
25
|
+
return col.Header().props.children.props.title;
|
26
|
+
}
|
27
|
+
return getNestedTitle(col.Header().props.children.props);
|
28
|
+
};
|
29
|
+
return typeof (col === null || col === void 0 ? void 0 : col.Header) === 'function' ? checkTitle() : col === null || col === void 0 || (_col$Header = col.Header) === null || _col$Header === void 0 || (_col$Header = _col$Header.props) === null || _col$Header === void 0 ? void 0 : _col$Header.title;
|
30
|
+
};
|
31
|
+
var _default = getColTitle;
|
32
|
+
exports.default = _default;
|