@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
@@ -1,14 +1,15 @@
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
2
2
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
3
|
-
import React, { useContext, useRef } from 'react';
|
3
|
+
import React, { useContext, useEffect, useRef } from 'react';
|
4
4
|
import cx from 'classnames';
|
5
5
|
import PropTypes from 'prop-types';
|
6
6
|
import { DataTable } from 'carbon-components-react';
|
7
|
+
import { px } from '@carbon/layout';
|
7
8
|
import DatagridHead from './DatagridHead';
|
8
9
|
import DatagridBody from './DatagridBody';
|
9
10
|
import DatagridToolbar from './DatagridToolbar';
|
10
11
|
import { handleGridKeyPress } from './addons/InlineEdit/handleGridKeyPress';
|
11
|
-
import { pkg } from '../../../settings';
|
12
|
+
import { carbon, pkg } from '../../../settings';
|
12
13
|
import { InlineEditContext } from './addons/InlineEdit/InlineEditContext';
|
13
14
|
import { handleGridFocus } from './addons/InlineEdit/handleGridFocus';
|
14
15
|
import { useClickOutside } from '../../../global/js/hooks';
|
@@ -17,7 +18,7 @@ var TableContainer = DataTable.TableContainer,
|
|
17
18
|
Table = DataTable.Table;
|
18
19
|
var blockClass = "".concat(pkg.prefix, "--datagrid");
|
19
20
|
export var DatagridContent = function DatagridContent(_ref) {
|
20
|
-
var
|
21
|
+
var _cx4;
|
21
22
|
|
22
23
|
var datagridState = _ref.datagridState;
|
23
24
|
|
@@ -40,7 +41,10 @@ export var DatagridContent = function DatagridContent(_ref) {
|
|
40
41
|
gridTitle = datagridState.gridTitle,
|
41
42
|
gridDescription = datagridState.gridDescription,
|
42
43
|
useDenseHeader = datagridState.useDenseHeader,
|
43
|
-
withInlineEdit = datagridState.withInlineEdit
|
44
|
+
withInlineEdit = datagridState.withInlineEdit,
|
45
|
+
tableId = datagridState.tableId,
|
46
|
+
DatagridActions = datagridState.DatagridActions,
|
47
|
+
totalColumnsWidth = datagridState.totalColumnsWidth;
|
44
48
|
var rows = DatagridPagination && datagridState.page || datagridState.rows;
|
45
49
|
var gridActive = state.gridActive,
|
46
50
|
editId = state.editId;
|
@@ -54,7 +58,7 @@ export var DatagridContent = function DatagridContent(_ref) {
|
|
54
58
|
// and swapped out with an input, i.e. text, number, selection, or date picker
|
55
59
|
|
56
60
|
|
57
|
-
if (target.closest(".".concat(blockClass, "__inline-edit-button")) || target.closest(".".concat(blockClass, "__inline-edit--select"))) {
|
61
|
+
if (target.closest(".".concat(blockClass, "__inline-edit-button")) || target.closest(".".concat(blockClass, "__inline-edit--select")) || target.closest(".".concat(blockClass, "__row-size-button"))) {
|
58
62
|
return;
|
59
63
|
}
|
60
64
|
|
@@ -64,16 +68,55 @@ export var DatagridContent = function DatagridContent(_ref) {
|
|
64
68
|
});
|
65
69
|
});
|
66
70
|
|
71
|
+
var renderTable = function renderTable() {
|
72
|
+
var _getTableProps;
|
73
|
+
|
74
|
+
return /*#__PURE__*/React.createElement(Table, _extends({}, getTableProps(), {
|
75
|
+
className: cx(withVirtualScroll ? '' : "".concat(blockClass, "__table-simple"), "".concat(blockClass, "__vertical-align-").concat(verticalAlign), _defineProperty({}, "".concat(blockClass, "__variable-row-height"), variableRowHeight), _defineProperty({}, "".concat(blockClass, "__table-with-inline-edit"), withInlineEdit), _defineProperty({}, "".concat(blockClass, "__table-grid-active"), gridActive), (_getTableProps = getTableProps()) === null || _getTableProps === void 0 ? void 0 : _getTableProps.className),
|
76
|
+
role: withInlineEdit && 'grid',
|
77
|
+
tabIndex: withInlineEdit && 0,
|
78
|
+
onKeyDown: withInlineEdit ? function (event) {
|
79
|
+
return handleGridKeyPress({
|
80
|
+
event: event,
|
81
|
+
dispatch: dispatch,
|
82
|
+
state: state,
|
83
|
+
instance: datagridState,
|
84
|
+
keysPressedList: keysPressedList,
|
85
|
+
usingMac: usingMac
|
86
|
+
});
|
87
|
+
} : null,
|
88
|
+
onFocus: withInlineEdit ? function () {
|
89
|
+
return handleGridFocus(state, dispatch);
|
90
|
+
} : null
|
91
|
+
}), /*#__PURE__*/React.createElement(DatagridHead, datagridState), /*#__PURE__*/React.createElement(DatagridBody, _extends({}, datagridState, {
|
92
|
+
rows: rows
|
93
|
+
})));
|
94
|
+
};
|
95
|
+
|
67
96
|
var _useMultipleKeyTracki = useMultipleKeyTracking({
|
68
|
-
ref: multiKeyTrackingRef,
|
97
|
+
ref: withInlineEdit ? multiKeyTrackingRef : null,
|
69
98
|
containerHasFocus: gridActive,
|
70
99
|
isEditing: !!editId
|
71
100
|
}),
|
72
101
|
keysPressedList = _useMultipleKeyTracki.keysPressedList,
|
73
|
-
usingMac = _useMultipleKeyTracki.usingMac;
|
102
|
+
usingMac = _useMultipleKeyTracki.usingMac; // Provides a width for the region outline for useInlineEdit
|
103
|
+
|
74
104
|
|
105
|
+
useEffect(function () {
|
106
|
+
if (!withInlineEdit) {
|
107
|
+
return;
|
108
|
+
}
|
109
|
+
|
110
|
+
var gridElement = document.querySelector("#".concat(tableId));
|
111
|
+
var tableHeader = document.querySelector(".".concat(carbon.prefix, "--data-table-header"));
|
112
|
+
gridElement.style.setProperty("--".concat(blockClass, "--grid-width"), px(totalColumnsWidth + 32));
|
113
|
+
|
114
|
+
if (gridActive) {
|
115
|
+
gridElement.style.setProperty("--".concat(blockClass, "--grid-header-height"), px((tableHeader === null || tableHeader === void 0 ? void 0 : tableHeader.clientHeight) || 0));
|
116
|
+
}
|
117
|
+
}, [withInlineEdit, tableId, totalColumnsWidth, datagridState, gridActive]);
|
75
118
|
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TableContainer, {
|
76
|
-
className: cx("".concat(blockClass, "__grid-container"), withVirtualScroll || fullHeightDatagrid ? "".concat(blockClass, "__full-height") : '', DatagridPagination ? "".concat(blockClass, "__with-pagination") : '', useDenseHeader ? "".concat(blockClass, "__dense-header") : ''),
|
119
|
+
className: cx("".concat(blockClass, "__grid-container"), withVirtualScroll || fullHeightDatagrid ? "".concat(blockClass, "__full-height") : '', DatagridPagination ? "".concat(blockClass, "__with-pagination") : '', useDenseHeader ? "".concat(blockClass, "__dense-header") : '', (_cx4 = {}, _defineProperty(_cx4, "".concat(blockClass, "__grid-container-grid-active"), gridActive), _defineProperty(_cx4, "".concat(blockClass, "__grid-container-inline-edit"), withInlineEdit), _defineProperty(_cx4, "".concat(blockClass, "__grid-container-grid-active--without-toolbar"), withInlineEdit && !DatagridActions), _cx4)),
|
77
120
|
title: gridTitle,
|
78
121
|
description: gridDescription
|
79
122
|
}, /*#__PURE__*/React.createElement(DatagridToolbar, datagridState), /*#__PURE__*/React.createElement("div", {
|
@@ -81,28 +124,9 @@ export var DatagridContent = function DatagridContent(_ref) {
|
|
81
124
|
ref: gridAreaRef
|
82
125
|
}, leftPanel && leftPanel.isOpen && /*#__PURE__*/React.createElement("div", {
|
83
126
|
className: "".concat(blockClass, "__datagridLeftPanel")
|
84
|
-
}, leftPanel.panelContent), /*#__PURE__*/React.createElement("div", {
|
127
|
+
}, leftPanel.panelContent), withInlineEdit ? /*#__PURE__*/React.createElement("div", {
|
85
128
|
ref: multiKeyTrackingRef
|
86
|
-
}, /*#__PURE__*/React.createElement(
|
87
|
-
className: cx(withVirtualScroll ? '' : "".concat(blockClass, "__table-simple"), "".concat(blockClass, "__vertical-align-").concat(verticalAlign), _defineProperty({}, "".concat(blockClass, "__variable-row-height"), variableRowHeight), _defineProperty({}, "".concat(blockClass, "__table-with-inline-edit"), withInlineEdit), _defineProperty({}, "".concat(blockClass, "__table-grid-active"), gridActive), (_getTableProps = getTableProps()) === null || _getTableProps === void 0 ? void 0 : _getTableProps.className),
|
88
|
-
role: withInlineEdit && 'grid',
|
89
|
-
tabIndex: withInlineEdit && 0,
|
90
|
-
onKeyDown: withInlineEdit ? function (event) {
|
91
|
-
return handleGridKeyPress({
|
92
|
-
event: event,
|
93
|
-
dispatch: dispatch,
|
94
|
-
state: state,
|
95
|
-
instance: datagridState,
|
96
|
-
keysPressedList: keysPressedList,
|
97
|
-
usingMac: usingMac
|
98
|
-
});
|
99
|
-
} : null,
|
100
|
-
onFocus: withInlineEdit ? function () {
|
101
|
-
return handleGridFocus(state, dispatch);
|
102
|
-
} : null
|
103
|
-
}), /*#__PURE__*/React.createElement(DatagridHead, datagridState), /*#__PURE__*/React.createElement(DatagridBody, _extends({}, datagridState, {
|
104
|
-
rows: rows
|
105
|
-
})))))), (rows === null || rows === void 0 ? void 0 : rows.length) > 0 && !isFetching && DatagridPagination && DatagridPagination(datagridState), CustomizeColumnsModal && /*#__PURE__*/React.createElement(CustomizeColumnsModal, {
|
129
|
+
}, renderTable()) : renderTable())), (rows === null || rows === void 0 ? void 0 : rows.length) > 0 && !isFetching && DatagridPagination && DatagridPagination(datagridState), CustomizeColumnsModal && /*#__PURE__*/React.createElement(CustomizeColumnsModal, {
|
106
130
|
instance: datagridState
|
107
131
|
}));
|
108
132
|
};
|
@@ -110,6 +134,7 @@ DatagridContent.propTypes = {
|
|
110
134
|
datagridState: PropTypes.shape({
|
111
135
|
getTableProps: PropTypes.func,
|
112
136
|
withVirtualScroll: PropTypes.bool,
|
137
|
+
DatagridActions: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
|
113
138
|
DatagridPagination: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
|
114
139
|
CustomizeColumnsModal: PropTypes.element,
|
115
140
|
isFetching: PropTypes.bool,
|
@@ -122,6 +147,8 @@ DatagridContent.propTypes = {
|
|
122
147
|
gridTitle: PropTypes.node,
|
123
148
|
gridDescription: PropTypes.node,
|
124
149
|
page: PropTypes.arrayOf(PropTypes.object),
|
125
|
-
rows: PropTypes.arrayOf(PropTypes.object)
|
150
|
+
rows: PropTypes.arrayOf(PropTypes.object),
|
151
|
+
tableId: PropTypes.string,
|
152
|
+
totalColumnsWidth: PropTypes.number
|
126
153
|
})
|
127
154
|
};
|
@@ -11,11 +11,13 @@ var _excluded = ["children"];
|
|
11
11
|
* restricted by GSA ADP Schedule Contract with IBM Corp.
|
12
12
|
*/
|
13
13
|
// @flow
|
14
|
-
import React from 'react';
|
14
|
+
import React, { useContext } from 'react';
|
15
15
|
import { DataTable, SkeletonText } from 'carbon-components-react';
|
16
16
|
import { selectionColumnId } from '../common-column-ids';
|
17
17
|
import cx from 'classnames';
|
18
18
|
import { pkg, carbon } from '../../../settings';
|
19
|
+
import { InlineEditContext } from './addons/InlineEdit/InlineEditContext/InlineEditContext';
|
20
|
+
import { getCellIdAsObject } from './addons/InlineEdit/InlineEditContext/getCellIdAsObject';
|
19
21
|
var blockClass = "".concat(pkg.prefix, "--datagrid");
|
20
22
|
var TableRow = DataTable.TableRow,
|
21
23
|
TableCell = DataTable.TableCell; // eslint-disable-next-line react/prop-types
|
@@ -24,8 +26,14 @@ var DatagridRow = function DatagridRow(datagridState) {
|
|
24
26
|
var _cx;
|
25
27
|
|
26
28
|
var row = datagridState.row;
|
29
|
+
|
30
|
+
var _useContext = useContext(InlineEditContext),
|
31
|
+
state = _useContext.state;
|
32
|
+
|
33
|
+
var activeCellId = state.activeCellId;
|
34
|
+
var activeCellObject = activeCellId && getCellIdAsObject(activeCellId);
|
27
35
|
return /*#__PURE__*/React.createElement(TableRow, _extends({
|
28
|
-
className: cx("".concat(blockClass, "__carbon-row"), (_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__carbon-row-expanded"), row.isExpanded), _defineProperty(_cx, "".concat(carbon.prefix, "--data-table--selected"), row.isSelected), _cx))
|
36
|
+
className: cx("".concat(blockClass, "__carbon-row"), (_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__carbon-row-expanded"), row.isExpanded), _defineProperty(_cx, "".concat(carbon.prefix, "--data-table--selected"), row.isSelected), _defineProperty(_cx, "".concat(blockClass, "__carbon-row-hover-active"), activeCellObject && row.index === activeCellObject.row), _cx))
|
29
37
|
}, row.getRowProps(), {
|
30
38
|
key: row.id,
|
31
39
|
onMouseEnter: function onMouseEnter(event) {
|
@@ -24,7 +24,7 @@ import { usePreviousValue } from '../../../../../../global/js/hooks';
|
|
24
24
|
import { prepareProps } from '../../../../../../global/js/utils/props-helper';
|
25
25
|
var blockClass = "".concat(pkg.prefix, "--datagrid");
|
26
26
|
export var InlineEditCell = function InlineEditCell(_ref) {
|
27
|
-
var _cx3;
|
27
|
+
var _config$validator, _cx3;
|
28
28
|
|
29
29
|
var cell = _ref.cell,
|
30
30
|
config = _ref.config,
|
@@ -89,7 +89,24 @@ export var InlineEditCell = function InlineEditCell(_ref) {
|
|
89
89
|
return item.id === columnId;
|
90
90
|
});
|
91
91
|
setCellLabel(typeof columnLabel.Header === 'string' ? columnLabel.Header : 'Inline edit cell label'); // eslint-disable-next-line react-hooks/exhaustive-deps
|
92
|
-
}, []); //
|
92
|
+
}, []); // Reverts cellValue back to initialValue when exiting edit mode via clicking outside
|
93
|
+
// of the cell (either on a regular cell or clicking into another inline edit cell) and the
|
94
|
+
// edit input is in an invalid state
|
95
|
+
|
96
|
+
useEffect(function () {
|
97
|
+
if ((previousState === null || previousState === void 0 ? void 0 : previousState.editId) === cellId && !editId || (previousState === null || previousState === void 0 ? void 0 : previousState.editId) === cellId && cellId !== editId) {
|
98
|
+
var _ref3 = config || {},
|
99
|
+
validator = _ref3.validator;
|
100
|
+
|
101
|
+
var isInvalid = validator === null || validator === void 0 ? void 0 : validator(cellValue);
|
102
|
+
|
103
|
+
if (isInvalid) {
|
104
|
+
setCellValue(initialValue);
|
105
|
+
saveCellData(initialValue);
|
106
|
+
return;
|
107
|
+
}
|
108
|
+
}
|
109
|
+
}, [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,
|
93
110
|
// this changes the cell back to the InlineEditButton
|
94
111
|
|
95
112
|
useEffect(function () {
|
@@ -201,6 +218,16 @@ export var InlineEditCell = function InlineEditCell(_ref) {
|
|
201
218
|
return;
|
202
219
|
}
|
203
220
|
|
221
|
+
var _ref4 = config || {},
|
222
|
+
validator = _ref4.validator;
|
223
|
+
|
224
|
+
var isInvalid = validator === null || validator === void 0 ? void 0 : validator(cellValue); // If an invalid state is detected, Tab/Enter should not do anything
|
225
|
+
// until the input has a valid state once again
|
226
|
+
|
227
|
+
if (isInvalid) {
|
228
|
+
return;
|
229
|
+
}
|
230
|
+
|
204
231
|
var newCellId = getNewCellId(key);
|
205
232
|
saveCellData(cellValue);
|
206
233
|
setInitialValue(cellValue);
|
@@ -251,8 +278,8 @@ export var InlineEditCell = function InlineEditCell(_ref) {
|
|
251
278
|
};
|
252
279
|
|
253
280
|
var renderSelectCell = function renderSelectCell() {
|
254
|
-
var
|
255
|
-
inputProps =
|
281
|
+
var _ref5 = config || {},
|
282
|
+
inputProps = _ref5.inputProps;
|
256
283
|
|
257
284
|
return /*#__PURE__*/React.createElement(Dropdown, _extends({
|
258
285
|
id: cellId,
|
@@ -288,8 +315,8 @@ export var InlineEditCell = function InlineEditCell(_ref) {
|
|
288
315
|
},
|
289
316
|
downshiftProps: {
|
290
317
|
onStateChange: function onStateChange(downshiftState) {
|
291
|
-
var
|
292
|
-
isOpen =
|
318
|
+
var _ref6 = downshiftState || {},
|
319
|
+
isOpen = _ref6.isOpen; // !isOpen does not work in this case because a state change occurs on hover of the
|
293
320
|
// menu items and isOpen is changed to undefined which causes dispatch to be called unexpectedly
|
294
321
|
|
295
322
|
|
@@ -390,6 +417,55 @@ export var InlineEditCell = function InlineEditCell(_ref) {
|
|
390
417
|
return null;
|
391
418
|
};
|
392
419
|
|
420
|
+
var renderNumberInput = function renderNumberInput() {
|
421
|
+
var _ref7 = config || {},
|
422
|
+
validator = _ref7.validator;
|
423
|
+
|
424
|
+
return /*#__PURE__*/React.createElement(NumberInput, _extends({
|
425
|
+
placeholder: placeholder,
|
426
|
+
label: cellLabel
|
427
|
+
}, inputProps, {
|
428
|
+
id: cellId,
|
429
|
+
hideLabel: true,
|
430
|
+
defaultValue: cellValue,
|
431
|
+
invalid: validator === null || validator === void 0 ? void 0 : validator(cellValue),
|
432
|
+
invalidText: (inputProps === null || inputProps === void 0 ? void 0 : inputProps.invalidText) || 'Provide missing invalidText',
|
433
|
+
onChange: function onChange(event) {
|
434
|
+
setCellValue(event.imaginaryTarget.value);
|
435
|
+
|
436
|
+
if (inputProps.onChange) {
|
437
|
+
inputProps.onChange(event.imaginaryTarget.value);
|
438
|
+
}
|
439
|
+
},
|
440
|
+
ref: numberInputRef
|
441
|
+
}));
|
442
|
+
};
|
443
|
+
|
444
|
+
var renderTextInput = function renderTextInput() {
|
445
|
+
var _ref8 = config || {},
|
446
|
+
validator = _ref8.validator;
|
447
|
+
|
448
|
+
var isInvalid = validator === null || validator === void 0 ? void 0 : validator(cellValue);
|
449
|
+
return /*#__PURE__*/React.createElement(TextInput, _extends({
|
450
|
+
labelText: cellLabel,
|
451
|
+
placeholder: placeholder
|
452
|
+
}, inputProps, {
|
453
|
+
id: cellId,
|
454
|
+
hideLabel: true,
|
455
|
+
defaultValue: cellValue,
|
456
|
+
invalid: isInvalid,
|
457
|
+
invalidText: (inputProps === null || inputProps === void 0 ? void 0 : inputProps.invalidText) || 'Provide missing invalidText',
|
458
|
+
onChange: function onChange(event) {
|
459
|
+
setCellValue(event.target.value);
|
460
|
+
|
461
|
+
if (inputProps.onChange) {
|
462
|
+
inputProps.onChange(event.target.value);
|
463
|
+
}
|
464
|
+
},
|
465
|
+
ref: textInputRef
|
466
|
+
}));
|
467
|
+
};
|
468
|
+
|
393
469
|
return (
|
394
470
|
/*#__PURE__*/
|
395
471
|
// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
|
@@ -402,7 +478,7 @@ export var InlineEditCell = function InlineEditCell(_ref) {
|
|
402
478
|
"data-inline-type": type,
|
403
479
|
onClick: !nonEditCell ? handleInlineCellClick : addActiveState,
|
404
480
|
onKeyDown: !nonEditCell ? handleKeyDown : null,
|
405
|
-
className: cx("".concat(blockClass, "__inline-edit--outer-cell-button"), (_cx3 = {}, _defineProperty(_cx3, "".concat(blockClass, "__inline-edit--outer-cell-button--").concat(rowSize), rowSize), _defineProperty(_cx3, "".concat(blockClass, "__inline-edit--outer-cell-button--lg"), !rowSize), _cx3))
|
481
|
+
className: cx("".concat(blockClass, "__inline-edit--outer-cell-button"), (_cx3 = {}, _defineProperty(_cx3, "".concat(blockClass, "__inline-edit--outer-cell-button--").concat(rowSize), rowSize), _defineProperty(_cx3, "".concat(blockClass, "__inline-edit--outer-cell-button--lg"), !rowSize), _defineProperty(_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))
|
406
482
|
}, !inEditMode && /*#__PURE__*/React.createElement(InlineEditButton, {
|
407
483
|
isActiveCell: cellId === activeCellId,
|
408
484
|
renderIcon: setRenderIcon(),
|
@@ -415,37 +491,7 @@ export var InlineEditCell = function InlineEditCell(_ref) {
|
|
415
491
|
totalInlineEditColumns: totalInlineEditColumns,
|
416
492
|
totalColumns: totalColumns,
|
417
493
|
type: type
|
418
|
-
}), !nonEditCell && inEditMode && cellId === activeCellId && /*#__PURE__*/React.createElement(React.Fragment, null, type === 'text' &&
|
419
|
-
labelText: cellLabel,
|
420
|
-
placeholder: placeholder
|
421
|
-
}, inputProps, {
|
422
|
-
id: cellId,
|
423
|
-
hideLabel: true,
|
424
|
-
defaultValue: cellValue,
|
425
|
-
onChange: function onChange(event) {
|
426
|
-
setCellValue(event.target.value);
|
427
|
-
|
428
|
-
if (inputProps.onChange) {
|
429
|
-
inputProps.onChange(event.target.value);
|
430
|
-
}
|
431
|
-
},
|
432
|
-
ref: textInputRef
|
433
|
-
})), type === 'number' && /*#__PURE__*/React.createElement(NumberInput, _extends({
|
434
|
-
placeholder: placeholder,
|
435
|
-
label: cellLabel
|
436
|
-
}, inputProps, {
|
437
|
-
id: cellId,
|
438
|
-
hideLabel: true,
|
439
|
-
defaultValue: cellValue,
|
440
|
-
onChange: function onChange(event) {
|
441
|
-
setCellValue(event.imaginaryTarget.value);
|
442
|
-
|
443
|
-
if (inputProps.onChange) {
|
444
|
-
inputProps.onChange(event.imaginaryTarget.value);
|
445
|
-
}
|
446
|
-
},
|
447
|
-
ref: numberInputRef
|
448
|
-
})), type === 'selection' && renderSelectCell(), type === 'date' && renderDateCell()))
|
494
|
+
}), !nonEditCell && inEditMode && cellId === activeCellId && /*#__PURE__*/React.createElement(React.Fragment, null, type === 'text' && renderTextInput(), type === 'number' && renderNumberInput(), type === 'selection' && renderSelectCell(), type === 'date' && renderDateCell()))
|
449
495
|
);
|
450
496
|
};
|
451
497
|
InlineEditCell.propTypes = {
|
@@ -35,11 +35,11 @@ export var handleGridKeyPress = function handleGridKeyPress(_ref) {
|
|
35
35
|
type: 'EXIT_EDIT_MODE',
|
36
36
|
payload: activeCellId
|
37
37
|
});
|
38
|
+
var inlineEditArea = document.querySelector("#".concat(instance.tableId, " .").concat(blockClass, "__table-with-inline-edit"));
|
39
|
+
inlineEditArea.focus();
|
38
40
|
}
|
39
41
|
|
40
42
|
event.preventDefault();
|
41
|
-
var inlineEditArea = document.querySelector("#".concat(instance.tableId, " .").concat(blockClass, "__table-with-inline-edit"));
|
42
|
-
inlineEditArea.focus();
|
43
43
|
return;
|
44
44
|
}
|
45
45
|
|
@@ -6,6 +6,7 @@
|
|
6
6
|
*/
|
7
7
|
import { includesResourceKey } from '../../../../DataSpreadsheet/utils/handleMultipleKeys';
|
8
8
|
import { pkg } from '../../../../../settings';
|
9
|
+
import { getFocusableElements } from '../../../../../global/js/utils/getFocusableElements';
|
9
10
|
var blockClass = "".concat(pkg.prefix, "--datagrid");
|
10
11
|
export var handleMultipleKeys = function handleMultipleKeys(_ref) {
|
11
12
|
var usingMac = _ref.usingMac,
|
@@ -62,5 +63,25 @@ export var handleMultipleKeys = function handleMultipleKeys(_ref) {
|
|
62
63
|
});
|
63
64
|
}, 250);
|
64
65
|
}
|
66
|
+
} // Shift + Tab
|
67
|
+
// This should remove the active grid state
|
68
|
+
|
69
|
+
|
70
|
+
if ((keysPressedList.includes('ShiftLeft') || keysPressedList.includes('ShiftRight')) && keysPressedList.includes('Tab')) {
|
71
|
+
dispatch({
|
72
|
+
type: 'REMOVE_GRID_ACTIVE_FOCUS',
|
73
|
+
payload: activeCellId
|
74
|
+
});
|
75
|
+
var tableElement = document.querySelector("#".concat(instance.tableId));
|
76
|
+
var datagridFocusableElements = getFocusableElements(tableElement);
|
77
|
+
var indexOfTable = datagridFocusableElements.findIndex(function (item) {
|
78
|
+
return item instanceof HTMLTableElement;
|
79
|
+
});
|
80
|
+
|
81
|
+
if (indexOfTable && Number.isFinite(indexOfTable)) {
|
82
|
+
var _datagridFocusableEle;
|
83
|
+
|
84
|
+
(_datagridFocusableEle = datagridFocusableElements[indexOfTable]) === null || _datagridFocusableEle === void 0 ? void 0 : _datagridFocusableEle.focus();
|
85
|
+
}
|
65
86
|
}
|
66
87
|
};
|
@@ -43,7 +43,7 @@ var RowSizeDropdown = function RowSizeDropdown(_ref) {
|
|
43
43
|
return setIsOpen(!isOpen);
|
44
44
|
},
|
45
45
|
iconDescription: legendText,
|
46
|
-
className: cx(_defineProperty({}, "".concat(blockClass, "__row-size-button--open"), isOpen))
|
46
|
+
className: cx("".concat(blockClass, "__row-size-button"), _defineProperty({}, "".concat(blockClass, "__row-size-button--open"), isOpen))
|
47
47
|
}), isOpen && /*#__PURE__*/React.createElement(RowSizeRadioGroup, _extends({}, props, {
|
48
48
|
legendText: legendText,
|
49
49
|
buttonRef: buttonRef,
|
@@ -93,7 +93,7 @@ var getDropdownPosition = function getDropdownPosition(buttonEle) {
|
|
93
93
|
|
94
94
|
if (parent instanceof HTMLElement) {
|
95
95
|
var top = buttonEle.offsetTop + buttonEle.offsetHeight;
|
96
|
-
var right = parent.offsetWidth - parent.offsetLeft -
|
96
|
+
var right = parent.offsetWidth - parent.offsetLeft - buttonEle.offsetLeft;
|
97
97
|
return {
|
98
98
|
top: top,
|
99
99
|
right: right
|
@@ -31,25 +31,43 @@ export var getInlineEditColumns = function getInlineEditColumns() {
|
|
31
31
|
accessor: 'firstName',
|
32
32
|
inlineEdit: {
|
33
33
|
type: 'text',
|
34
|
-
|
35
|
-
|
34
|
+
// required for including validation, this is used to set the invalid prop internally
|
35
|
+
validator: function validator(n) {
|
36
|
+
return n.length >= 40;
|
37
|
+
},
|
38
|
+
// These props are passed to the Carbon component used for inline editing
|
39
|
+
inputProps: {
|
40
|
+
invalidText: 'Invalid text, character count must be less than 40'
|
41
|
+
}
|
36
42
|
}
|
37
43
|
}, {
|
38
44
|
Header: 'Last Name',
|
39
45
|
accessor: 'lastName',
|
40
46
|
inlineEdit: {
|
41
47
|
type: 'text',
|
42
|
-
|
43
|
-
|
48
|
+
// required for including validation, this is used to set the invalid prop internally
|
49
|
+
validator: function validator(n) {
|
50
|
+
return n.length >= 40;
|
51
|
+
},
|
52
|
+
// These props are passed to the Carbon component used for inline editing
|
53
|
+
inputProps: {
|
54
|
+
invalidText: 'Invalid text, character count must be less than 40'
|
55
|
+
}
|
44
56
|
}
|
45
57
|
}, {
|
46
58
|
Header: 'Age',
|
47
59
|
accessor: 'age',
|
48
60
|
width: 120,
|
49
61
|
inlineEdit: {
|
62
|
+
// required for including validation, this is used to set the invalid prop internally
|
63
|
+
validator: function validator(n) {
|
64
|
+
return n && n < 18;
|
65
|
+
},
|
50
66
|
type: 'number',
|
51
|
-
|
52
|
-
|
67
|
+
// These props are passed to the Carbon component used for inline editing
|
68
|
+
inputProps: {
|
69
|
+
invalidText: 'Invalid number, must be 18 or greater'
|
70
|
+
}
|
53
71
|
}
|
54
72
|
}, {
|
55
73
|
Header: 'Visits',
|
@@ -86,7 +104,7 @@ export var getInlineEditColumns = function getInlineEditColumns() {
|
|
86
104
|
// These props are passed to the Carbon component used for inline editing
|
87
105
|
items: inlineEditSelectItems,
|
88
106
|
onChange: function onChange(item) {
|
89
|
-
|
107
|
+
console.log(item);
|
90
108
|
}
|
91
109
|
}
|
92
110
|
}
|
@@ -12,12 +12,20 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
|
|
12
12
|
*/
|
13
13
|
import React from 'react';
|
14
14
|
import namor from 'namor';
|
15
|
+
import { StatusIcon } from '../../StatusIcon';
|
15
16
|
import { inlineEditSelectItems } from './getInlineEditColumns';
|
16
17
|
|
17
|
-
var getRandomInteger = function getRandomInteger(min, max) {
|
18
|
-
|
19
|
-
|
20
|
-
|
18
|
+
var getRandomInteger = function getRandomInteger(min, max, decimalPlaces) {
|
19
|
+
var roundedMin = Math.ceil(min);
|
20
|
+
var roundedMax = Math.floor(max);
|
21
|
+
var randomNumber = Math.random() * (max - min) + min;
|
22
|
+
|
23
|
+
if (!decimalPlaces) {
|
24
|
+
return Math.floor(Math.random() * (roundedMax - roundedMin + 1)) + roundedMin;
|
25
|
+
}
|
26
|
+
|
27
|
+
var power = Math.pow(10, decimalPlaces);
|
28
|
+
return Math.floor(randomNumber * power) / power;
|
21
29
|
};
|
22
30
|
|
23
31
|
export var makeData = function makeData() {
|
@@ -47,6 +55,24 @@ export var range = function range(len) {
|
|
47
55
|
return arr;
|
48
56
|
};
|
49
57
|
|
58
|
+
var renderStatusIcon = function renderStatusIcon(statusChance) {
|
59
|
+
var iconProps = {
|
60
|
+
size: 'sm',
|
61
|
+
theme: 'light',
|
62
|
+
kind: statusChance > 0.66 ? 'critical' : statusChance > 0.33 ? 'minor-warning' : 'normal',
|
63
|
+
iconDescription: statusChance > 0.66 ? 'Critical' : statusChance > 0.33 ? 'Minor warning' : 'Normal'
|
64
|
+
};
|
65
|
+
return /*#__PURE__*/React.createElement(StatusIcon, iconProps);
|
66
|
+
};
|
67
|
+
|
68
|
+
var renderDocLink = function renderDocLink(statusChance) {
|
69
|
+
var docLinkObj = {
|
70
|
+
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/',
|
71
|
+
text: statusChance > 0.66 ? 'Carbon Design System' : statusChance > 0.33 ? 'Carbon for IBM Products PAL' : 'Carbon for IBM Products storybook'
|
72
|
+
};
|
73
|
+
return docLinkObj;
|
74
|
+
};
|
75
|
+
|
50
76
|
var newPerson = function newPerson() {
|
51
77
|
var statusChance = Math.random();
|
52
78
|
var initialChartTypeIndex = getRandomInteger(0, 2);
|
@@ -149,7 +175,10 @@ var newPerson = function newPerson() {
|
|
149
175
|
}),
|
150
176
|
status: statusChance > 0.66 ? 'relationship' : statusChance > 0.33 ? 'complicated' : 'single',
|
151
177
|
chartType: initialChartTypeIndex === 0 ? inlineEditSelectItems[0] : initialChartTypeIndex === 1 ? inlineEditSelectItems[1] : inlineEditSelectItems[2],
|
152
|
-
activeSince: statusChance > 0.66 ? activeSinceDate : statusChance > 0.33 ? yesterdayDate : twoDaysAgoDate
|
178
|
+
activeSince: statusChance > 0.66 ? activeSinceDate : statusChance > 0.33 ? yesterdayDate : twoDaysAgoDate,
|
179
|
+
bonus: "$\r".concat(getRandomInteger(100, 500, 2)),
|
180
|
+
status_icon: renderStatusIcon(statusChance),
|
181
|
+
doc_link: renderDocLink(statusChance)
|
153
182
|
};
|
154
183
|
};
|
155
184
|
|
@@ -40,7 +40,7 @@ var buttons = ['cancel', 'edit', 'save'];
|
|
40
40
|
*/
|
41
41
|
|
42
42
|
export var InlineEdit = /*#__PURE__*/React.forwardRef(function (_ref, refIn) {
|
43
|
-
var _cx, _refInput$current, _refInput$current$
|
43
|
+
var _cx, _refInput$current, _refInput$current$tex, _cx3;
|
44
44
|
|
45
45
|
var buttonTooltipAlignment = _ref.buttonTooltipAlignment,
|
46
46
|
buttonTooltipPosition = _ref.buttonTooltipPosition,
|
@@ -66,7 +66,7 @@ export var InlineEdit = /*#__PURE__*/React.forwardRef(function (_ref, refIn) {
|
|
66
66
|
rest = _objectWithoutProperties(_ref, _excluded);
|
67
67
|
|
68
68
|
var refInput = useRef({
|
69
|
-
|
69
|
+
textContent: value
|
70
70
|
});
|
71
71
|
var localRef = useRef(null);
|
72
72
|
var ref = refIn || localRef;
|
@@ -148,15 +148,15 @@ export var InlineEdit = /*#__PURE__*/React.forwardRef(function (_ref, refIn) {
|
|
148
148
|
document.getSelection().removeAllRanges();
|
149
149
|
|
150
150
|
if (onSave) {
|
151
|
-
onSave(refInput.current.
|
151
|
+
onSave(refInput.current.textContent);
|
152
152
|
}
|
153
153
|
};
|
154
154
|
|
155
155
|
var handleInput = function handleInput() {
|
156
|
-
setInternalValue(refInput.current.
|
156
|
+
setInternalValue(refInput.current.textContent);
|
157
157
|
|
158
158
|
if (onChange) {
|
159
|
-
onChange(refInput.current.
|
159
|
+
onChange(refInput.current.textContent);
|
160
160
|
}
|
161
161
|
}; // pasting into contentEditable not supported by userEvent
|
162
162
|
|
@@ -191,7 +191,7 @@ export var InlineEdit = /*#__PURE__*/React.forwardRef(function (_ref, refIn) {
|
|
191
191
|
};
|
192
192
|
|
193
193
|
var handleCancel = function handleCancel() {
|
194
|
-
refInput.current.
|
194
|
+
refInput.current.textContent = value;
|
195
195
|
handleInput(value);
|
196
196
|
doSetEditing(false);
|
197
197
|
document.getSelection().removeAllRanges();
|
@@ -259,7 +259,7 @@ export var InlineEdit = /*#__PURE__*/React.forwardRef(function (_ref, refIn) {
|
|
259
259
|
}, /*#__PURE__*/React.createElement("div", _extends({}, rest, getDevtoolsProps(componentName), {
|
260
260
|
id: id,
|
261
261
|
size: size,
|
262
|
-
className: cx("".concat(blockClass, "__input"), _defineProperty({}, "".concat(blockClass, "__input--empty"), ((_refInput$current = refInput.current) === null || _refInput$current === void 0 ? void 0 : (_refInput$current$
|
262
|
+
className: cx("".concat(blockClass, "__input"), _defineProperty({}, "".concat(blockClass, "__input--empty"), ((_refInput$current = refInput.current) === null || _refInput$current === void 0 ? void 0 : (_refInput$current$tex = _refInput$current.textContent) === null || _refInput$current$tex === void 0 ? void 0 : _refInput$current$tex.length) === 0)),
|
263
263
|
contentEditable: true,
|
264
264
|
"aria-label": labelText,
|
265
265
|
role: "textbox",
|
@@ -202,12 +202,14 @@ export var OptionsTile = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
202
202
|
className: "".concat(blockClass, "__heading")
|
203
203
|
}, /*#__PURE__*/React.createElement("h6", {
|
204
204
|
id: titleId,
|
205
|
-
className: "".concat(blockClass, "__title")
|
205
|
+
className: "".concat(blockClass, "__title"),
|
206
|
+
title: title
|
206
207
|
}, title), text && /*#__PURE__*/React.createElement("span", {
|
207
208
|
className: cx(summaryClasses),
|
208
209
|
"aria-hidden": summaryHidden
|
209
210
|
}, Icon && /*#__PURE__*/React.createElement(Icon, null), /*#__PURE__*/React.createElement("span", {
|
210
|
-
className: "".concat(blockClass, "__summary-text")
|
211
|
+
className: "".concat(blockClass, "__summary-text"),
|
212
|
+
title: text
|
211
213
|
}, text)));
|
212
214
|
}
|
213
215
|
|
@@ -124,9 +124,9 @@ CreateTearsheetNarrow.propTypes = {
|
|
124
124
|
formDescription: _propTypes.default.node,
|
125
125
|
|
126
126
|
/**
|
127
|
-
* Specifies
|
127
|
+
* Specifies an optional field that provides a title for a form
|
128
128
|
*/
|
129
|
-
formTitle: _propTypes.default.node
|
129
|
+
formTitle: _propTypes.default.node,
|
130
130
|
|
131
131
|
/**
|
132
132
|
* A label for the tearsheet, displayed in the header area of the tearsheet
|