@carbon/ibm-products 1.32.0 → 1.33.0
Sign up to get free protection for your applications and to get access to all the features.
- package/css/index-full-carbon.css +145 -12
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +5 -1
- package/css/index-full-carbon.min.css.map +1 -1
- package/css/index-without-carbon-released-only.css +6 -2
- package/css/index-without-carbon-released-only.css.map +1 -1
- package/css/index-without-carbon-released-only.min.css +5 -1
- package/css/index-without-carbon-released-only.min.css.map +1 -1
- package/css/index-without-carbon.css +141 -12
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +5 -1
- package/css/index-without-carbon.min.css.map +1 -1
- package/css/index.css +141 -12
- package/css/index.css.map +1 -1
- package/css/index.min.css +5 -1
- package/css/index.min.css.map +1 -1
- package/es/components/CreateTearsheetNarrow/CreateTearsheetNarrow.js +2 -2
- package/es/components/DataSpreadsheet/hooks/useMultipleKeyTracking.js +6 -5
- package/es/components/Datagrid/Datagrid/DatagridContent.js +57 -30
- package/es/components/Datagrid/Datagrid/DatagridRow.js +10 -2
- package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +84 -38
- package/es/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.js +2 -2
- package/es/components/Datagrid/Datagrid/addons/InlineEdit/handleMultipleKeys.js +21 -0
- package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js +1 -1
- package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js +1 -1
- package/es/components/Datagrid/utils/getInlineEditColumns.js +25 -7
- package/es/components/Datagrid/utils/makeData.js +34 -5
- package/es/components/InlineEdit/InlineEdit.js +7 -7
- package/es/components/OptionsTile/OptionsTile.js +4 -2
- package/lib/components/CreateTearsheetNarrow/CreateTearsheetNarrow.js +2 -2
- package/lib/components/DataSpreadsheet/hooks/useMultipleKeyTracking.js +6 -5
- package/lib/components/Datagrid/Datagrid/DatagridContent.js +56 -28
- package/lib/components/Datagrid/Datagrid/DatagridRow.js +19 -2
- package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +84 -38
- package/lib/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.js +2 -2
- package/lib/components/Datagrid/Datagrid/addons/InlineEdit/handleMultipleKeys.js +22 -0
- package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js +1 -1
- package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js +1 -1
- package/lib/components/Datagrid/utils/getInlineEditColumns.js +25 -7
- package/lib/components/Datagrid/utils/makeData.js +35 -5
- package/lib/components/InlineEdit/InlineEdit.js +7 -7
- package/lib/components/OptionsTile/OptionsTile.js +4 -2
- package/package.json +12 -12
- package/scss/components/Datagrid/_storybook-styles.scss +7 -0
- package/scss/components/Datagrid/styles/_datagrid.scss +0 -5
- package/scss/components/Datagrid/styles/_useInlineEdit.scss +182 -1
- package/scss/components/InlineEdit/_inline-edit.scss +4 -2
- package/scss/components/OptionsTile/_options-tile.scss +4 -0
@@ -49,7 +49,8 @@ var useMultipleKeyTracking = function useMultipleKeyTracking(_ref) {
|
|
49
49
|
|
50
50
|
var previousState = (0, _hooks.usePreviousValue)({
|
51
51
|
isEditing: isEditing,
|
52
|
-
windowFocused: windowFocused
|
52
|
+
windowFocused: windowFocused,
|
53
|
+
containerHasFocus: containerHasFocus
|
53
54
|
}); // useEffect to check for window focus, if window loses focus
|
54
55
|
// we need to clear out the keysPressedList
|
55
56
|
|
@@ -80,7 +81,7 @@ var useMultipleKeyTracking = function useMultipleKeyTracking(_ref) {
|
|
80
81
|
};
|
81
82
|
}, []);
|
82
83
|
(0, _react.useEffect)(function () {
|
83
|
-
if (containerHasFocus && !isEditing) {
|
84
|
+
if (ref && containerHasFocus && !isEditing) {
|
84
85
|
ref.current.onkeydown = ref.current.onkeyup = function (event) {
|
85
86
|
// If keydown, we will add the new key to the keysPressedList array
|
86
87
|
if (event.type === 'keydown') {
|
@@ -132,15 +133,15 @@ var useMultipleKeyTracking = function useMultipleKeyTracking(_ref) {
|
|
132
133
|
// or is currently in edit mode
|
133
134
|
|
134
135
|
|
135
|
-
if (!containerHasFocus || isEditing) {
|
136
|
+
if (ref && !containerHasFocus || isEditing) {
|
136
137
|
ref.current.onkeydown = undefined;
|
137
138
|
ref.current.onkeyup = undefined;
|
138
139
|
|
139
|
-
if (!(previousState !== null && previousState !== void 0 && previousState.isEditing) && isEditing) {
|
140
|
+
if (!(previousState !== null && previousState !== void 0 && previousState.isEditing) && isEditing || previousState !== null && previousState !== void 0 && previousState.containerHasFocus && !containerHasFocus) {
|
140
141
|
setKeysPressedList([]);
|
141
142
|
}
|
142
143
|
}
|
143
|
-
}, [keysPressedList, containerHasFocus, ref, isEditing, previousState === null || previousState === void 0 ? void 0 : previousState.isEditing, windowFocused, previousState === null || previousState === void 0 ? void 0 : previousState.windowFocused, usingMac]);
|
144
|
+
}, [keysPressedList, containerHasFocus, ref, isEditing, previousState === null || previousState === void 0 ? void 0 : previousState.isEditing, previousState === null || previousState === void 0 ? void 0 : previousState.containerHasFocus, windowFocused, previousState === null || previousState === void 0 ? void 0 : previousState.windowFocused, usingMac]);
|
144
145
|
return {
|
145
146
|
keysPressedList: keysPressedList,
|
146
147
|
windowFocused: windowFocused,
|
@@ -21,6 +21,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
21
21
|
|
22
22
|
var _carbonComponentsReact = require("carbon-components-react");
|
23
23
|
|
24
|
+
var _layout = require("@carbon/layout");
|
25
|
+
|
24
26
|
var _DatagridHead = _interopRequireDefault(require("./DatagridHead"));
|
25
27
|
|
26
28
|
var _DatagridBody = _interopRequireDefault(require("./DatagridBody"));
|
@@ -48,7 +50,7 @@ var TableContainer = _carbonComponentsReact.DataTable.TableContainer,
|
|
48
50
|
var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
|
49
51
|
|
50
52
|
var DatagridContent = function DatagridContent(_ref) {
|
51
|
-
var
|
53
|
+
var _cx4;
|
52
54
|
|
53
55
|
var datagridState = _ref.datagridState;
|
54
56
|
|
@@ -71,7 +73,10 @@ var DatagridContent = function DatagridContent(_ref) {
|
|
71
73
|
gridTitle = datagridState.gridTitle,
|
72
74
|
gridDescription = datagridState.gridDescription,
|
73
75
|
useDenseHeader = datagridState.useDenseHeader,
|
74
|
-
withInlineEdit = datagridState.withInlineEdit
|
76
|
+
withInlineEdit = datagridState.withInlineEdit,
|
77
|
+
tableId = datagridState.tableId,
|
78
|
+
DatagridActions = datagridState.DatagridActions,
|
79
|
+
totalColumnsWidth = datagridState.totalColumnsWidth;
|
75
80
|
var rows = DatagridPagination && datagridState.page || datagridState.rows;
|
76
81
|
var gridActive = state.gridActive,
|
77
82
|
editId = state.editId;
|
@@ -85,7 +90,7 @@ var DatagridContent = function DatagridContent(_ref) {
|
|
85
90
|
// and swapped out with an input, i.e. text, number, selection, or date picker
|
86
91
|
|
87
92
|
|
88
|
-
if (target.closest(".".concat(blockClass, "__inline-edit-button")) || target.closest(".".concat(blockClass, "__inline-edit--select"))) {
|
93
|
+
if (target.closest(".".concat(blockClass, "__inline-edit-button")) || target.closest(".".concat(blockClass, "__inline-edit--select")) || target.closest(".".concat(blockClass, "__row-size-button"))) {
|
89
94
|
return;
|
90
95
|
}
|
91
96
|
|
@@ -95,16 +100,55 @@ var DatagridContent = function DatagridContent(_ref) {
|
|
95
100
|
});
|
96
101
|
});
|
97
102
|
|
103
|
+
var renderTable = function renderTable() {
|
104
|
+
var _getTableProps;
|
105
|
+
|
106
|
+
return /*#__PURE__*/_react.default.createElement(Table, (0, _extends2.default)({}, getTableProps(), {
|
107
|
+
className: (0, _classnames.default)(withVirtualScroll ? '' : "".concat(blockClass, "__table-simple"), "".concat(blockClass, "__vertical-align-").concat(verticalAlign), (0, _defineProperty2.default)({}, "".concat(blockClass, "__variable-row-height"), variableRowHeight), (0, _defineProperty2.default)({}, "".concat(blockClass, "__table-with-inline-edit"), withInlineEdit), (0, _defineProperty2.default)({}, "".concat(blockClass, "__table-grid-active"), gridActive), (_getTableProps = getTableProps()) === null || _getTableProps === void 0 ? void 0 : _getTableProps.className),
|
108
|
+
role: withInlineEdit && 'grid',
|
109
|
+
tabIndex: withInlineEdit && 0,
|
110
|
+
onKeyDown: withInlineEdit ? function (event) {
|
111
|
+
return (0, _handleGridKeyPress.handleGridKeyPress)({
|
112
|
+
event: event,
|
113
|
+
dispatch: dispatch,
|
114
|
+
state: state,
|
115
|
+
instance: datagridState,
|
116
|
+
keysPressedList: keysPressedList,
|
117
|
+
usingMac: usingMac
|
118
|
+
});
|
119
|
+
} : null,
|
120
|
+
onFocus: withInlineEdit ? function () {
|
121
|
+
return (0, _handleGridFocus.handleGridFocus)(state, dispatch);
|
122
|
+
} : null
|
123
|
+
}), /*#__PURE__*/_react.default.createElement(_DatagridHead.default, datagridState), /*#__PURE__*/_react.default.createElement(_DatagridBody.default, (0, _extends2.default)({}, datagridState, {
|
124
|
+
rows: rows
|
125
|
+
})));
|
126
|
+
};
|
127
|
+
|
98
128
|
var _useMultipleKeyTracki = (0, _hooks2.useMultipleKeyTracking)({
|
99
|
-
ref: multiKeyTrackingRef,
|
129
|
+
ref: withInlineEdit ? multiKeyTrackingRef : null,
|
100
130
|
containerHasFocus: gridActive,
|
101
131
|
isEditing: !!editId
|
102
132
|
}),
|
103
133
|
keysPressedList = _useMultipleKeyTracki.keysPressedList,
|
104
|
-
usingMac = _useMultipleKeyTracki.usingMac;
|
134
|
+
usingMac = _useMultipleKeyTracki.usingMac; // Provides a width for the region outline for useInlineEdit
|
135
|
+
|
105
136
|
|
137
|
+
(0, _react.useEffect)(function () {
|
138
|
+
if (!withInlineEdit) {
|
139
|
+
return;
|
140
|
+
}
|
141
|
+
|
142
|
+
var gridElement = document.querySelector("#".concat(tableId));
|
143
|
+
var tableHeader = document.querySelector(".".concat(_settings.carbon.prefix, "--data-table-header"));
|
144
|
+
gridElement.style.setProperty("--".concat(blockClass, "--grid-width"), (0, _layout.px)(totalColumnsWidth + 32));
|
145
|
+
|
146
|
+
if (gridActive) {
|
147
|
+
gridElement.style.setProperty("--".concat(blockClass, "--grid-header-height"), (0, _layout.px)((tableHeader === null || tableHeader === void 0 ? void 0 : tableHeader.clientHeight) || 0));
|
148
|
+
}
|
149
|
+
}, [withInlineEdit, tableId, totalColumnsWidth, datagridState, gridActive]);
|
106
150
|
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(TableContainer, {
|
107
|
-
className: (0, _classnames.default)("".concat(blockClass, "__grid-container"), withVirtualScroll || fullHeightDatagrid ? "".concat(blockClass, "__full-height") : '', DatagridPagination ? "".concat(blockClass, "__with-pagination") : '', useDenseHeader ? "".concat(blockClass, "__dense-header") : ''),
|
151
|
+
className: (0, _classnames.default)("".concat(blockClass, "__grid-container"), withVirtualScroll || fullHeightDatagrid ? "".concat(blockClass, "__full-height") : '', DatagridPagination ? "".concat(blockClass, "__with-pagination") : '', useDenseHeader ? "".concat(blockClass, "__dense-header") : '', (_cx4 = {}, (0, _defineProperty2.default)(_cx4, "".concat(blockClass, "__grid-container-grid-active"), gridActive), (0, _defineProperty2.default)(_cx4, "".concat(blockClass, "__grid-container-inline-edit"), withInlineEdit), (0, _defineProperty2.default)(_cx4, "".concat(blockClass, "__grid-container-grid-active--without-toolbar"), withInlineEdit && !DatagridActions), _cx4)),
|
108
152
|
title: gridTitle,
|
109
153
|
description: gridDescription
|
110
154
|
}, /*#__PURE__*/_react.default.createElement(_DatagridToolbar.default, datagridState), /*#__PURE__*/_react.default.createElement("div", {
|
@@ -112,28 +156,9 @@ var DatagridContent = function DatagridContent(_ref) {
|
|
112
156
|
ref: gridAreaRef
|
113
157
|
}, leftPanel && leftPanel.isOpen && /*#__PURE__*/_react.default.createElement("div", {
|
114
158
|
className: "".concat(blockClass, "__datagridLeftPanel")
|
115
|
-
}, leftPanel.panelContent), /*#__PURE__*/_react.default.createElement("div", {
|
159
|
+
}, leftPanel.panelContent), withInlineEdit ? /*#__PURE__*/_react.default.createElement("div", {
|
116
160
|
ref: multiKeyTrackingRef
|
117
|
-
},
|
118
|
-
className: (0, _classnames.default)(withVirtualScroll ? '' : "".concat(blockClass, "__table-simple"), "".concat(blockClass, "__vertical-align-").concat(verticalAlign), (0, _defineProperty2.default)({}, "".concat(blockClass, "__variable-row-height"), variableRowHeight), (0, _defineProperty2.default)({}, "".concat(blockClass, "__table-with-inline-edit"), withInlineEdit), (0, _defineProperty2.default)({}, "".concat(blockClass, "__table-grid-active"), gridActive), (_getTableProps = getTableProps()) === null || _getTableProps === void 0 ? void 0 : _getTableProps.className),
|
119
|
-
role: withInlineEdit && 'grid',
|
120
|
-
tabIndex: withInlineEdit && 0,
|
121
|
-
onKeyDown: withInlineEdit ? function (event) {
|
122
|
-
return (0, _handleGridKeyPress.handleGridKeyPress)({
|
123
|
-
event: event,
|
124
|
-
dispatch: dispatch,
|
125
|
-
state: state,
|
126
|
-
instance: datagridState,
|
127
|
-
keysPressedList: keysPressedList,
|
128
|
-
usingMac: usingMac
|
129
|
-
});
|
130
|
-
} : null,
|
131
|
-
onFocus: withInlineEdit ? function () {
|
132
|
-
return (0, _handleGridFocus.handleGridFocus)(state, dispatch);
|
133
|
-
} : null
|
134
|
-
}), /*#__PURE__*/_react.default.createElement(_DatagridHead.default, datagridState), /*#__PURE__*/_react.default.createElement(_DatagridBody.default, (0, _extends2.default)({}, datagridState, {
|
135
|
-
rows: rows
|
136
|
-
})))))), (rows === null || rows === void 0 ? void 0 : rows.length) > 0 && !isFetching && DatagridPagination && DatagridPagination(datagridState), CustomizeColumnsModal && /*#__PURE__*/_react.default.createElement(CustomizeColumnsModal, {
|
161
|
+
}, renderTable()) : renderTable())), (rows === null || rows === void 0 ? void 0 : rows.length) > 0 && !isFetching && DatagridPagination && DatagridPagination(datagridState), CustomizeColumnsModal && /*#__PURE__*/_react.default.createElement(CustomizeColumnsModal, {
|
137
162
|
instance: datagridState
|
138
163
|
}));
|
139
164
|
};
|
@@ -143,6 +168,7 @@ DatagridContent.propTypes = {
|
|
143
168
|
datagridState: _propTypes.default.shape({
|
144
169
|
getTableProps: _propTypes.default.func,
|
145
170
|
withVirtualScroll: _propTypes.default.bool,
|
171
|
+
DatagridActions: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.func]),
|
146
172
|
DatagridPagination: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.func]),
|
147
173
|
CustomizeColumnsModal: _propTypes.default.element,
|
148
174
|
isFetching: _propTypes.default.bool,
|
@@ -155,6 +181,8 @@ DatagridContent.propTypes = {
|
|
155
181
|
gridTitle: _propTypes.default.node,
|
156
182
|
gridDescription: _propTypes.default.node,
|
157
183
|
page: _propTypes.default.arrayOf(_propTypes.default.object),
|
158
|
-
rows: _propTypes.default.arrayOf(_propTypes.default.object)
|
184
|
+
rows: _propTypes.default.arrayOf(_propTypes.default.object),
|
185
|
+
tableId: _propTypes.default.string,
|
186
|
+
totalColumnsWidth: _propTypes.default.number
|
159
187
|
})
|
160
188
|
};
|
@@ -2,6 +2,8 @@
|
|
2
2
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
4
4
|
|
5
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
6
|
+
|
5
7
|
Object.defineProperty(exports, "__esModule", {
|
6
8
|
value: true
|
7
9
|
});
|
@@ -13,7 +15,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
|
|
13
15
|
|
14
16
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
15
17
|
|
16
|
-
var _react =
|
18
|
+
var _react = _interopRequireWildcard(require("react"));
|
17
19
|
|
18
20
|
var _carbonComponentsReact = require("carbon-components-react");
|
19
21
|
|
@@ -23,7 +25,16 @@ var _classnames = _interopRequireDefault(require("classnames"));
|
|
23
25
|
|
24
26
|
var _settings = require("../../../settings");
|
25
27
|
|
28
|
+
var _InlineEditContext = require("./addons/InlineEdit/InlineEditContext/InlineEditContext");
|
29
|
+
|
30
|
+
var _getCellIdAsObject = require("./addons/InlineEdit/InlineEditContext/getCellIdAsObject");
|
31
|
+
|
26
32
|
var _excluded = ["children"];
|
33
|
+
|
34
|
+
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); }
|
35
|
+
|
36
|
+
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; }
|
37
|
+
|
27
38
|
var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
|
28
39
|
var TableRow = _carbonComponentsReact.DataTable.TableRow,
|
29
40
|
TableCell = _carbonComponentsReact.DataTable.TableCell; // eslint-disable-next-line react/prop-types
|
@@ -32,8 +43,14 @@ var DatagridRow = function DatagridRow(datagridState) {
|
|
32
43
|
var _cx;
|
33
44
|
|
34
45
|
var row = datagridState.row;
|
46
|
+
|
47
|
+
var _useContext = (0, _react.useContext)(_InlineEditContext.InlineEditContext),
|
48
|
+
state = _useContext.state;
|
49
|
+
|
50
|
+
var activeCellId = state.activeCellId;
|
51
|
+
var activeCellObject = activeCellId && (0, _getCellIdAsObject.getCellIdAsObject)(activeCellId);
|
35
52
|
return /*#__PURE__*/_react.default.createElement(TableRow, (0, _extends2.default)({
|
36
|
-
className: (0, _classnames.default)("".concat(blockClass, "__carbon-row"), (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__carbon-row-expanded"), row.isExpanded), (0, _defineProperty2.default)(_cx, "".concat(_settings.carbon.prefix, "--data-table--selected"), row.isSelected), _cx))
|
53
|
+
className: (0, _classnames.default)("".concat(blockClass, "__carbon-row"), (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__carbon-row-expanded"), row.isExpanded), (0, _defineProperty2.default)(_cx, "".concat(_settings.carbon.prefix, "--data-table--selected"), row.isSelected), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__carbon-row-hover-active"), activeCellObject && row.index === activeCellObject.row), _cx))
|
37
54
|
}, row.getRowProps(), {
|
38
55
|
key: row.id,
|
39
56
|
onMouseEnter: function onMouseEnter(event) {
|
@@ -46,7 +46,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
|
|
46
46
|
var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
|
47
47
|
|
48
48
|
var InlineEditCell = function InlineEditCell(_ref) {
|
49
|
-
var _cx3;
|
49
|
+
var _config$validator, _cx3;
|
50
50
|
|
51
51
|
var cell = _ref.cell,
|
52
52
|
config = _ref.config,
|
@@ -111,7 +111,24 @@ var InlineEditCell = function InlineEditCell(_ref) {
|
|
111
111
|
return item.id === columnId;
|
112
112
|
});
|
113
113
|
setCellLabel(typeof columnLabel.Header === 'string' ? columnLabel.Header : 'Inline edit cell label'); // eslint-disable-next-line react-hooks/exhaustive-deps
|
114
|
-
}, []); //
|
114
|
+
}, []); // Reverts cellValue back to initialValue when exiting edit mode via clicking outside
|
115
|
+
// of the cell (either on a regular cell or clicking into another inline edit cell) and the
|
116
|
+
// edit input is in an invalid state
|
117
|
+
|
118
|
+
(0, _react.useEffect)(function () {
|
119
|
+
if ((previousState === null || previousState === void 0 ? void 0 : previousState.editId) === cellId && !editId || (previousState === null || previousState === void 0 ? void 0 : previousState.editId) === cellId && cellId !== editId) {
|
120
|
+
var _ref3 = config || {},
|
121
|
+
validator = _ref3.validator;
|
122
|
+
|
123
|
+
var isInvalid = validator === null || validator === void 0 ? void 0 : validator(cellValue);
|
124
|
+
|
125
|
+
if (isInvalid) {
|
126
|
+
setCellValue(initialValue);
|
127
|
+
saveCellData(initialValue);
|
128
|
+
return;
|
129
|
+
}
|
130
|
+
}
|
131
|
+
}, [previousState === null || previousState === void 0 ? void 0 : previousState.editId, editId, cellId, cellValue, config, initialValue, saveCellData]); // If you are in edit mode and click outside of the cell,
|
115
132
|
// this changes the cell back to the InlineEditButton
|
116
133
|
|
117
134
|
(0, _react.useEffect)(function () {
|
@@ -223,6 +240,16 @@ var InlineEditCell = function InlineEditCell(_ref) {
|
|
223
240
|
return;
|
224
241
|
}
|
225
242
|
|
243
|
+
var _ref4 = config || {},
|
244
|
+
validator = _ref4.validator;
|
245
|
+
|
246
|
+
var isInvalid = validator === null || validator === void 0 ? void 0 : validator(cellValue); // If an invalid state is detected, Tab/Enter should not do anything
|
247
|
+
// until the input has a valid state once again
|
248
|
+
|
249
|
+
if (isInvalid) {
|
250
|
+
return;
|
251
|
+
}
|
252
|
+
|
226
253
|
var newCellId = getNewCellId(key);
|
227
254
|
saveCellData(cellValue);
|
228
255
|
setInitialValue(cellValue);
|
@@ -273,8 +300,8 @@ var InlineEditCell = function InlineEditCell(_ref) {
|
|
273
300
|
};
|
274
301
|
|
275
302
|
var renderSelectCell = function renderSelectCell() {
|
276
|
-
var
|
277
|
-
inputProps =
|
303
|
+
var _ref5 = config || {},
|
304
|
+
inputProps = _ref5.inputProps;
|
278
305
|
|
279
306
|
return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Dropdown, (0, _extends2.default)({
|
280
307
|
id: cellId,
|
@@ -310,8 +337,8 @@ var InlineEditCell = function InlineEditCell(_ref) {
|
|
310
337
|
},
|
311
338
|
downshiftProps: {
|
312
339
|
onStateChange: function onStateChange(downshiftState) {
|
313
|
-
var
|
314
|
-
isOpen =
|
340
|
+
var _ref6 = downshiftState || {},
|
341
|
+
isOpen = _ref6.isOpen; // !isOpen does not work in this case because a state change occurs on hover of the
|
315
342
|
// menu items and isOpen is changed to undefined which causes dispatch to be called unexpectedly
|
316
343
|
|
317
344
|
|
@@ -412,6 +439,55 @@ var InlineEditCell = function InlineEditCell(_ref) {
|
|
412
439
|
return null;
|
413
440
|
};
|
414
441
|
|
442
|
+
var renderNumberInput = function renderNumberInput() {
|
443
|
+
var _ref7 = config || {},
|
444
|
+
validator = _ref7.validator;
|
445
|
+
|
446
|
+
return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.NumberInput, (0, _extends2.default)({
|
447
|
+
placeholder: placeholder,
|
448
|
+
label: cellLabel
|
449
|
+
}, inputProps, {
|
450
|
+
id: cellId,
|
451
|
+
hideLabel: true,
|
452
|
+
defaultValue: cellValue,
|
453
|
+
invalid: validator === null || validator === void 0 ? void 0 : validator(cellValue),
|
454
|
+
invalidText: (inputProps === null || inputProps === void 0 ? void 0 : inputProps.invalidText) || 'Provide missing invalidText',
|
455
|
+
onChange: function onChange(event) {
|
456
|
+
setCellValue(event.imaginaryTarget.value);
|
457
|
+
|
458
|
+
if (inputProps.onChange) {
|
459
|
+
inputProps.onChange(event.imaginaryTarget.value);
|
460
|
+
}
|
461
|
+
},
|
462
|
+
ref: numberInputRef
|
463
|
+
}));
|
464
|
+
};
|
465
|
+
|
466
|
+
var renderTextInput = function renderTextInput() {
|
467
|
+
var _ref8 = config || {},
|
468
|
+
validator = _ref8.validator;
|
469
|
+
|
470
|
+
var isInvalid = validator === null || validator === void 0 ? void 0 : validator(cellValue);
|
471
|
+
return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.TextInput, (0, _extends2.default)({
|
472
|
+
labelText: cellLabel,
|
473
|
+
placeholder: placeholder
|
474
|
+
}, inputProps, {
|
475
|
+
id: cellId,
|
476
|
+
hideLabel: true,
|
477
|
+
defaultValue: cellValue,
|
478
|
+
invalid: isInvalid,
|
479
|
+
invalidText: (inputProps === null || inputProps === void 0 ? void 0 : inputProps.invalidText) || 'Provide missing invalidText',
|
480
|
+
onChange: function onChange(event) {
|
481
|
+
setCellValue(event.target.value);
|
482
|
+
|
483
|
+
if (inputProps.onChange) {
|
484
|
+
inputProps.onChange(event.target.value);
|
485
|
+
}
|
486
|
+
},
|
487
|
+
ref: textInputRef
|
488
|
+
}));
|
489
|
+
};
|
490
|
+
|
415
491
|
return (
|
416
492
|
/*#__PURE__*/
|
417
493
|
// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
|
@@ -424,7 +500,7 @@ var InlineEditCell = function InlineEditCell(_ref) {
|
|
424
500
|
"data-inline-type": type,
|
425
501
|
onClick: !nonEditCell ? handleInlineCellClick : addActiveState,
|
426
502
|
onKeyDown: !nonEditCell ? handleKeyDown : null,
|
427
|
-
className: (0, _classnames.default)("".concat(blockClass, "__inline-edit--outer-cell-button"), (_cx3 = {}, (0, _defineProperty2.default)(_cx3, "".concat(blockClass, "__inline-edit--outer-cell-button--").concat(rowSize), rowSize), (0, _defineProperty2.default)(_cx3, "".concat(blockClass, "__inline-edit--outer-cell-button--lg"), !rowSize), _cx3))
|
503
|
+
className: (0, _classnames.default)("".concat(blockClass, "__inline-edit--outer-cell-button"), (_cx3 = {}, (0, _defineProperty2.default)(_cx3, "".concat(blockClass, "__inline-edit--outer-cell-button--").concat(rowSize), rowSize), (0, _defineProperty2.default)(_cx3, "".concat(blockClass, "__inline-edit--outer-cell-button--lg"), !rowSize), (0, _defineProperty2.default)(_cx3, "".concat(blockClass, "__inline-edit--outer-cell-button--invalid"), config === null || config === void 0 ? void 0 : (_config$validator = config.validator) === null || _config$validator === void 0 ? void 0 : _config$validator.call(config, cellValue)), _cx3))
|
428
504
|
}, !inEditMode && /*#__PURE__*/_react.default.createElement(_InlineEditButton.InlineEditButton, {
|
429
505
|
isActiveCell: cellId === activeCellId,
|
430
506
|
renderIcon: setRenderIcon(),
|
@@ -437,37 +513,7 @@ var InlineEditCell = function InlineEditCell(_ref) {
|
|
437
513
|
totalInlineEditColumns: totalInlineEditColumns,
|
438
514
|
totalColumns: totalColumns,
|
439
515
|
type: type
|
440
|
-
}), !nonEditCell && inEditMode && cellId === activeCellId && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, type === 'text' &&
|
441
|
-
labelText: cellLabel,
|
442
|
-
placeholder: placeholder
|
443
|
-
}, inputProps, {
|
444
|
-
id: cellId,
|
445
|
-
hideLabel: true,
|
446
|
-
defaultValue: cellValue,
|
447
|
-
onChange: function onChange(event) {
|
448
|
-
setCellValue(event.target.value);
|
449
|
-
|
450
|
-
if (inputProps.onChange) {
|
451
|
-
inputProps.onChange(event.target.value);
|
452
|
-
}
|
453
|
-
},
|
454
|
-
ref: textInputRef
|
455
|
-
})), type === 'number' && /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.NumberInput, (0, _extends2.default)({
|
456
|
-
placeholder: placeholder,
|
457
|
-
label: cellLabel
|
458
|
-
}, inputProps, {
|
459
|
-
id: cellId,
|
460
|
-
hideLabel: true,
|
461
|
-
defaultValue: cellValue,
|
462
|
-
onChange: function onChange(event) {
|
463
|
-
setCellValue(event.imaginaryTarget.value);
|
464
|
-
|
465
|
-
if (inputProps.onChange) {
|
466
|
-
inputProps.onChange(event.imaginaryTarget.value);
|
467
|
-
}
|
468
|
-
},
|
469
|
-
ref: numberInputRef
|
470
|
-
})), type === 'selection' && renderSelectCell(), type === 'date' && renderDateCell()))
|
516
|
+
}), !nonEditCell && inEditMode && cellId === activeCellId && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, type === 'text' && renderTextInput(), type === 'number' && renderNumberInput(), type === 'selection' && renderSelectCell(), type === 'date' && renderDateCell()))
|
471
517
|
);
|
472
518
|
};
|
473
519
|
|
@@ -42,11 +42,11 @@ var handleGridKeyPress = function handleGridKeyPress(_ref) {
|
|
42
42
|
type: 'EXIT_EDIT_MODE',
|
43
43
|
payload: activeCellId
|
44
44
|
});
|
45
|
+
var inlineEditArea = document.querySelector("#".concat(instance.tableId, " .").concat(blockClass, "__table-with-inline-edit"));
|
46
|
+
inlineEditArea.focus();
|
45
47
|
}
|
46
48
|
|
47
49
|
event.preventDefault();
|
48
|
-
var inlineEditArea = document.querySelector("#".concat(instance.tableId, " .").concat(blockClass, "__table-with-inline-edit"));
|
49
|
-
inlineEditArea.focus();
|
50
50
|
return;
|
51
51
|
}
|
52
52
|
|
@@ -9,6 +9,8 @@ var _handleMultipleKeys = require("../../../../DataSpreadsheet/utils/handleMulti
|
|
9
9
|
|
10
10
|
var _settings = require("../../../../../settings");
|
11
11
|
|
12
|
+
var _getFocusableElements = require("../../../../../global/js/utils/getFocusableElements");
|
13
|
+
|
12
14
|
/**
|
13
15
|
* Copyright IBM Corp. 2022, 2022
|
14
16
|
*
|
@@ -72,6 +74,26 @@ var handleMultipleKeys = function handleMultipleKeys(_ref) {
|
|
72
74
|
});
|
73
75
|
}, 250);
|
74
76
|
}
|
77
|
+
} // Shift + Tab
|
78
|
+
// This should remove the active grid state
|
79
|
+
|
80
|
+
|
81
|
+
if ((keysPressedList.includes('ShiftLeft') || keysPressedList.includes('ShiftRight')) && keysPressedList.includes('Tab')) {
|
82
|
+
dispatch({
|
83
|
+
type: 'REMOVE_GRID_ACTIVE_FOCUS',
|
84
|
+
payload: activeCellId
|
85
|
+
});
|
86
|
+
var tableElement = document.querySelector("#".concat(instance.tableId));
|
87
|
+
var datagridFocusableElements = (0, _getFocusableElements.getFocusableElements)(tableElement);
|
88
|
+
var indexOfTable = datagridFocusableElements.findIndex(function (item) {
|
89
|
+
return item instanceof HTMLTableElement;
|
90
|
+
});
|
91
|
+
|
92
|
+
if (indexOfTable && Number.isFinite(indexOfTable)) {
|
93
|
+
var _datagridFocusableEle;
|
94
|
+
|
95
|
+
(_datagridFocusableEle = datagridFocusableElements[indexOfTable]) === null || _datagridFocusableEle === void 0 ? void 0 : _datagridFocusableEle.focus();
|
96
|
+
}
|
75
97
|
}
|
76
98
|
};
|
77
99
|
|
@@ -60,7 +60,7 @@ var RowSizeDropdown = function RowSizeDropdown(_ref) {
|
|
60
60
|
return setIsOpen(!isOpen);
|
61
61
|
},
|
62
62
|
iconDescription: legendText,
|
63
|
-
className: (0, _classnames.default)((0, _defineProperty2.default)({}, "".concat(blockClass, "__row-size-button--open"), isOpen))
|
63
|
+
className: (0, _classnames.default)("".concat(blockClass, "__row-size-button"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__row-size-button--open"), isOpen))
|
64
64
|
}), isOpen && /*#__PURE__*/React.createElement(_RowSizeRadioGroup.default, (0, _extends2.default)({}, props, {
|
65
65
|
legendText: legendText,
|
66
66
|
buttonRef: buttonRef,
|
@@ -113,7 +113,7 @@ var getDropdownPosition = function getDropdownPosition(buttonEle) {
|
|
113
113
|
|
114
114
|
if (parent instanceof HTMLElement) {
|
115
115
|
var top = buttonEle.offsetTop + buttonEle.offsetHeight;
|
116
|
-
var right = parent.offsetWidth - parent.offsetLeft -
|
116
|
+
var right = parent.offsetWidth - parent.offsetLeft - buttonEle.offsetLeft;
|
117
117
|
return {
|
118
118
|
top: top,
|
119
119
|
right: right
|
@@ -41,25 +41,43 @@ var getInlineEditColumns = function getInlineEditColumns() {
|
|
41
41
|
accessor: 'firstName',
|
42
42
|
inlineEdit: {
|
43
43
|
type: 'text',
|
44
|
-
|
45
|
-
|
44
|
+
// required for including validation, this is used to set the invalid prop internally
|
45
|
+
validator: function validator(n) {
|
46
|
+
return n.length >= 40;
|
47
|
+
},
|
48
|
+
// These props are passed to the Carbon component used for inline editing
|
49
|
+
inputProps: {
|
50
|
+
invalidText: 'Invalid text, character count must be less than 40'
|
51
|
+
}
|
46
52
|
}
|
47
53
|
}, {
|
48
54
|
Header: 'Last Name',
|
49
55
|
accessor: 'lastName',
|
50
56
|
inlineEdit: {
|
51
57
|
type: 'text',
|
52
|
-
|
53
|
-
|
58
|
+
// required for including validation, this is used to set the invalid prop internally
|
59
|
+
validator: function validator(n) {
|
60
|
+
return n.length >= 40;
|
61
|
+
},
|
62
|
+
// These props are passed to the Carbon component used for inline editing
|
63
|
+
inputProps: {
|
64
|
+
invalidText: 'Invalid text, character count must be less than 40'
|
65
|
+
}
|
54
66
|
}
|
55
67
|
}, {
|
56
68
|
Header: 'Age',
|
57
69
|
accessor: 'age',
|
58
70
|
width: 120,
|
59
71
|
inlineEdit: {
|
72
|
+
// required for including validation, this is used to set the invalid prop internally
|
73
|
+
validator: function validator(n) {
|
74
|
+
return n && n < 18;
|
75
|
+
},
|
60
76
|
type: 'number',
|
61
|
-
|
62
|
-
|
77
|
+
// These props are passed to the Carbon component used for inline editing
|
78
|
+
inputProps: {
|
79
|
+
invalidText: 'Invalid number, must be 18 or greater'
|
80
|
+
}
|
63
81
|
}
|
64
82
|
}, {
|
65
83
|
Header: 'Visits',
|
@@ -96,7 +114,7 @@ var getInlineEditColumns = function getInlineEditColumns() {
|
|
96
114
|
// These props are passed to the Carbon component used for inline editing
|
97
115
|
items: inlineEditSelectItems,
|
98
116
|
onChange: function onChange(item) {
|
99
|
-
|
117
|
+
console.log(item);
|
100
118
|
}
|
101
119
|
}
|
102
120
|
}
|
@@ -13,16 +13,25 @@ var _react = _interopRequireDefault(require("react"));
|
|
13
13
|
|
14
14
|
var _namor = _interopRequireDefault(require("namor"));
|
15
15
|
|
16
|
+
var _StatusIcon = require("../../StatusIcon");
|
17
|
+
|
16
18
|
var _getInlineEditColumns = require("./getInlineEditColumns");
|
17
19
|
|
18
20
|
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
21
|
|
20
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; }
|
21
23
|
|
22
|
-
var getRandomInteger = function getRandomInteger(min, max) {
|
23
|
-
|
24
|
-
|
25
|
-
|
24
|
+
var getRandomInteger = function getRandomInteger(min, max, decimalPlaces) {
|
25
|
+
var roundedMin = Math.ceil(min);
|
26
|
+
var roundedMax = Math.floor(max);
|
27
|
+
var randomNumber = Math.random() * (max - min) + min;
|
28
|
+
|
29
|
+
if (!decimalPlaces) {
|
30
|
+
return Math.floor(Math.random() * (roundedMax - roundedMin + 1)) + roundedMin;
|
31
|
+
}
|
32
|
+
|
33
|
+
var power = Math.pow(10, decimalPlaces);
|
34
|
+
return Math.floor(randomNumber * power) / power;
|
26
35
|
};
|
27
36
|
|
28
37
|
var makeData = function makeData() {
|
@@ -57,6 +66,24 @@ var range = function range(len) {
|
|
57
66
|
|
58
67
|
exports.range = range;
|
59
68
|
|
69
|
+
var renderStatusIcon = function renderStatusIcon(statusChance) {
|
70
|
+
var iconProps = {
|
71
|
+
size: 'sm',
|
72
|
+
theme: 'light',
|
73
|
+
kind: statusChance > 0.66 ? 'critical' : statusChance > 0.33 ? 'minor-warning' : 'normal',
|
74
|
+
iconDescription: statusChance > 0.66 ? 'Critical' : statusChance > 0.33 ? 'Minor warning' : 'Normal'
|
75
|
+
};
|
76
|
+
return /*#__PURE__*/_react.default.createElement(_StatusIcon.StatusIcon, iconProps);
|
77
|
+
};
|
78
|
+
|
79
|
+
var renderDocLink = function renderDocLink(statusChance) {
|
80
|
+
var docLinkObj = {
|
81
|
+
href: statusChance > 0.66 ? 'http://carbondesignsystem.com/' : statusChance > 0.33 ? 'https://pages.github.ibm.com/cdai-design/pal/' : 'http://carbon-for-ibm-products.netlify.app/',
|
82
|
+
text: statusChance > 0.66 ? 'Carbon Design System' : statusChance > 0.33 ? 'Carbon for IBM Products PAL' : 'Carbon for IBM Products storybook'
|
83
|
+
};
|
84
|
+
return docLinkObj;
|
85
|
+
};
|
86
|
+
|
60
87
|
var newPerson = function newPerson() {
|
61
88
|
var statusChance = Math.random();
|
62
89
|
var initialChartTypeIndex = getRandomInteger(0, 2);
|
@@ -159,7 +186,10 @@ var newPerson = function newPerson() {
|
|
159
186
|
}),
|
160
187
|
status: statusChance > 0.66 ? 'relationship' : statusChance > 0.33 ? 'complicated' : 'single',
|
161
188
|
chartType: initialChartTypeIndex === 0 ? _getInlineEditColumns.inlineEditSelectItems[0] : initialChartTypeIndex === 1 ? _getInlineEditColumns.inlineEditSelectItems[1] : _getInlineEditColumns.inlineEditSelectItems[2],
|
162
|
-
activeSince: statusChance > 0.66 ? activeSinceDate : statusChance > 0.33 ? yesterdayDate : twoDaysAgoDate
|
189
|
+
activeSince: statusChance > 0.66 ? activeSinceDate : statusChance > 0.33 ? yesterdayDate : twoDaysAgoDate,
|
190
|
+
bonus: "$\r".concat(getRandomInteger(100, 500, 2)),
|
191
|
+
status_icon: renderStatusIcon(statusChance),
|
192
|
+
doc_link: renderDocLink(statusChance)
|
163
193
|
};
|
164
194
|
};
|
165
195
|
|