@carbon/ibm-products 1.32.1 → 1.34.0
Sign up to get free protection for your applications and to get access to all the features.
- package/css/index-full-carbon.css +210 -158
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +7 -3
- package/css/index-full-carbon.min.css.map +1 -1
- package/css/index-without-carbon-released-only.css +12 -144
- package/css/index-without-carbon-released-only.css.map +1 -1
- package/css/index-without-carbon-released-only.min.css +7 -3
- package/css/index-without-carbon-released-only.min.css.map +1 -1
- package/css/index-without-carbon.css +193 -156
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +7 -3
- package/css/index-without-carbon.min.css.map +1 -1
- package/css/index.css +208 -156
- package/css/index.css.map +1 -1
- package/css/index.min.css +7 -3
- package/css/index.min.css.map +1 -1
- package/es/components/CreateTearsheetNarrow/CreateTearsheetNarrow.js +2 -2
- package/es/components/DataSpreadsheet/hooks/useMultipleKeyTracking.js +4 -3
- package/es/components/Datagrid/Datagrid/DatagridContent.js +30 -7
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +0 -1
- 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/utils/getArgTypes.js +4 -0
- package/es/components/Datagrid/utils/getInlineEditColumns.js +25 -7
- package/es/components/Datagrid/utils/makeData.js +10 -1
- package/es/components/InlineEditV2/InlineEditV2.js +249 -0
- package/es/components/InlineEditV2/index.js +1 -0
- package/es/components/PageHeader/PageHeaderTitle.js +3 -1
- package/es/components/SidePanel/SidePanel.js +44 -51
- package/es/components/SidePanel/motion/variants.js +39 -0
- package/es/components/index.js +2 -1
- package/es/global/js/package-settings.js +2 -1
- package/es/global/js/utils/getBezierValues.js +20 -0
- package/es/global/js/utils/motionConstants.js +45 -0
- package/lib/components/CreateTearsheetNarrow/CreateTearsheetNarrow.js +2 -2
- package/lib/components/DataSpreadsheet/hooks/useMultipleKeyTracking.js +4 -3
- package/lib/components/Datagrid/Datagrid/DatagridContent.js +29 -5
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +0 -1
- 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/utils/getArgTypes.js +4 -0
- package/lib/components/Datagrid/utils/getInlineEditColumns.js +25 -7
- package/lib/components/Datagrid/utils/makeData.js +10 -1
- package/lib/components/InlineEditV2/InlineEditV2.js +277 -0
- package/lib/components/InlineEditV2/index.js +13 -0
- package/lib/components/PageHeader/PageHeaderTitle.js +3 -1
- package/lib/components/SidePanel/SidePanel.js +45 -50
- package/lib/components/SidePanel/motion/variants.js +49 -0
- package/lib/components/index.js +9 -1
- package/lib/global/js/package-settings.js +2 -1
- package/lib/global/js/utils/getBezierValues.js +29 -0
- package/lib/global/js/utils/motionConstants.js +55 -0
- package/package.json +14 -13
- package/scss/components/Datagrid/_storybook-styles.scss +11 -0
- package/scss/components/Datagrid/styles/_datagrid.scss +0 -5
- package/scss/components/Datagrid/styles/_useInlineEdit.scss +177 -2
- package/scss/components/InlineEdit/_inline-edit.scss +4 -2
- package/scss/components/InlineEditV2/_index.scss +10 -0
- package/scss/components/InlineEditV2/_inline-edit-v2.scss +81 -0
- package/scss/components/ModifiedTabs/_modified-tabs.scss +1 -1
- package/scss/components/PageHeader/_page-header.scss +4 -0
- package/scss/components/SidePanel/_side-panel.scss +0 -75
- package/scss/components/_index.scss +2 -0
@@ -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
|
};
|
@@ -81,5 +81,9 @@ export var ARG_TYPES = {
|
|
81
81
|
type: 'number'
|
82
82
|
},
|
83
83
|
description: 'This value controls the height of the expanded content area. _This value is set/passed inside of the `datagridState` object._'
|
84
|
+
},
|
85
|
+
customizeColumnsProps: {
|
86
|
+
control: 'object',
|
87
|
+
description: 'This is an object containing all of the props used with the column customization extension. _This value is set/passed inside of the `datagridState` object._'
|
84
88
|
}
|
85
89
|
};
|
@@ -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
|
}
|
@@ -65,6 +65,14 @@ var renderStatusIcon = function renderStatusIcon(statusChance) {
|
|
65
65
|
return /*#__PURE__*/React.createElement(StatusIcon, iconProps);
|
66
66
|
};
|
67
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
|
+
|
68
76
|
var newPerson = function newPerson() {
|
69
77
|
var statusChance = Math.random();
|
70
78
|
var initialChartTypeIndex = getRandomInteger(0, 2);
|
@@ -169,7 +177,8 @@ var newPerson = function newPerson() {
|
|
169
177
|
chartType: initialChartTypeIndex === 0 ? inlineEditSelectItems[0] : initialChartTypeIndex === 1 ? inlineEditSelectItems[1] : inlineEditSelectItems[2],
|
170
178
|
activeSince: statusChance > 0.66 ? activeSinceDate : statusChance > 0.33 ? yesterdayDate : twoDaysAgoDate,
|
171
179
|
bonus: "$\r".concat(getRandomInteger(100, 500, 2)),
|
172
|
-
status_icon: renderStatusIcon(statusChance)
|
180
|
+
status_icon: renderStatusIcon(statusChance),
|
181
|
+
doc_link: renderDocLink(statusChance)
|
173
182
|
};
|
174
183
|
};
|
175
184
|
|
@@ -0,0 +1,249 @@
|
|
1
|
+
import _extends from "@babel/runtime/helpers/extends";
|
2
|
+
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
3
|
+
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
4
|
+
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
5
|
+
var _excluded = ["cancelLabel", "editLabel", "invalid", "invalidLabel", "onCancel", "onChange", "onSave", "readOnly", "saveLabel", "value"];
|
6
|
+
import React, { useState, useEffect, forwardRef, useRef } from 'react';
|
7
|
+
import { Button } from 'carbon-components-react';
|
8
|
+
import cx from 'classnames';
|
9
|
+
import PropTypes from 'prop-types';
|
10
|
+
import { Edit24, Checkmark24, Close24, EditOff24, WarningFilled16 } from '@carbon/icons-react';
|
11
|
+
import { pkg, carbon } from '../../settings';
|
12
|
+
import { getDevtoolsProps } from '../../global/js/utils/devtools';
|
13
|
+
var componentName = 'InlineEditV2';
|
14
|
+
var blockClass = "".concat(pkg.prefix, "--inline-edit-v2");
|
15
|
+
export var InlineEditV2 = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
16
|
+
var _cx;
|
17
|
+
|
18
|
+
var cancelLabel = _ref.cancelLabel,
|
19
|
+
editLabel = _ref.editLabel,
|
20
|
+
invalid = _ref.invalid,
|
21
|
+
invalidLabel = _ref.invalidLabel,
|
22
|
+
onCancel = _ref.onCancel,
|
23
|
+
onChange = _ref.onChange,
|
24
|
+
onSave = _ref.onSave,
|
25
|
+
readOnly = _ref.readOnly,
|
26
|
+
saveLabel = _ref.saveLabel,
|
27
|
+
value = _ref.value,
|
28
|
+
rest = _objectWithoutProperties(_ref, _excluded);
|
29
|
+
|
30
|
+
var _useState = useState(false),
|
31
|
+
_useState2 = _slicedToArray(_useState, 2),
|
32
|
+
focused = _useState2[0],
|
33
|
+
setFocused = _useState2[1];
|
34
|
+
|
35
|
+
var _useState3 = useState(''),
|
36
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
37
|
+
initialValue = _useState4[0],
|
38
|
+
setInitialValue = _useState4[1];
|
39
|
+
|
40
|
+
var _useState5 = useState(false),
|
41
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
42
|
+
dirtyInput = _useState6[0],
|
43
|
+
setDirtyInput = _useState6[1];
|
44
|
+
|
45
|
+
var inputRef = useRef(null);
|
46
|
+
var canSave = value !== initialValue && !invalid;
|
47
|
+
var escaping = useRef(false);
|
48
|
+
useEffect(function () {
|
49
|
+
if (!initialValue && !dirtyInput) {
|
50
|
+
setInitialValue(value);
|
51
|
+
}
|
52
|
+
}, [initialValue, dirtyInput, value]);
|
53
|
+
|
54
|
+
var isTargetingChild = function isTargetingChild(_ref2) {
|
55
|
+
var currentTarget = _ref2.currentTarget,
|
56
|
+
relatedTarget = _ref2.relatedTarget;
|
57
|
+
return currentTarget.contains(relatedTarget);
|
58
|
+
};
|
59
|
+
|
60
|
+
var onChangeHandler = function onChangeHandler(_ref3) {
|
61
|
+
var target = _ref3.target;
|
62
|
+
|
63
|
+
if (!dirtyInput) {
|
64
|
+
setDirtyInput(true);
|
65
|
+
}
|
66
|
+
|
67
|
+
onChange(target.value);
|
68
|
+
};
|
69
|
+
|
70
|
+
var onFocusHandler = function onFocusHandler(e) {
|
71
|
+
if (readOnly) {
|
72
|
+
return;
|
73
|
+
}
|
74
|
+
|
75
|
+
if (!isTargetingChild(e)) {
|
76
|
+
inputRef.current.focus();
|
77
|
+
setFocused(true);
|
78
|
+
}
|
79
|
+
};
|
80
|
+
|
81
|
+
var onSaveHandler = function onSaveHandler() {
|
82
|
+
setInitialValue(value);
|
83
|
+
setFocused(false);
|
84
|
+
setDirtyInput(false);
|
85
|
+
onSave();
|
86
|
+
};
|
87
|
+
|
88
|
+
var onCancelHandler = function onCancelHandler() {
|
89
|
+
setFocused(false);
|
90
|
+
setDirtyInput(false);
|
91
|
+
onCancel(initialValue);
|
92
|
+
};
|
93
|
+
|
94
|
+
var onBlurHandler = function onBlurHandler(e) {
|
95
|
+
if (readOnly || escaping.current) {
|
96
|
+
return;
|
97
|
+
}
|
98
|
+
|
99
|
+
if (!isTargetingChild(e)) {
|
100
|
+
if (canSave) {
|
101
|
+
onSaveHandler();
|
102
|
+
} else {
|
103
|
+
onCancelHandler();
|
104
|
+
}
|
105
|
+
}
|
106
|
+
};
|
107
|
+
|
108
|
+
var returnHandler = function returnHandler() {
|
109
|
+
if (canSave) {
|
110
|
+
onSaveHandler();
|
111
|
+
}
|
112
|
+
};
|
113
|
+
|
114
|
+
var escapeHandler = function escapeHandler() {
|
115
|
+
onCancelHandler();
|
116
|
+
};
|
117
|
+
|
118
|
+
var onKeyHandler = function onKeyHandler(e) {
|
119
|
+
// to prevent blur handler from being called twice add additional state to check if escape is being used
|
120
|
+
escaping.current = true;
|
121
|
+
|
122
|
+
switch (e.key) {
|
123
|
+
case 'Escape':
|
124
|
+
inputRef.current.blur();
|
125
|
+
escapeHandler();
|
126
|
+
break;
|
127
|
+
|
128
|
+
case 'Enter':
|
129
|
+
inputRef.current.blur();
|
130
|
+
returnHandler();
|
131
|
+
break;
|
132
|
+
|
133
|
+
default:
|
134
|
+
break;
|
135
|
+
}
|
136
|
+
|
137
|
+
escaping.current = false;
|
138
|
+
};
|
139
|
+
|
140
|
+
return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
|
141
|
+
ref: ref
|
142
|
+
}, getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement("div", {
|
143
|
+
className: cx(blockClass, (_cx = {}, _defineProperty(_cx, "".concat(blockClass, "-focused"), focused), _defineProperty(_cx, "".concat(blockClass, "-readonly"), readOnly), _cx)),
|
144
|
+
onFocus: onFocusHandler,
|
145
|
+
onBlur: onBlurHandler
|
146
|
+
}, /*#__PURE__*/React.createElement("input", {
|
147
|
+
className: cx("".concat(blockClass, "__text-input"), "".concat(carbon.prefix, "--text-input")),
|
148
|
+
type: "text",
|
149
|
+
value: value,
|
150
|
+
onChange: onChangeHandler,
|
151
|
+
ref: inputRef,
|
152
|
+
readOnly: readOnly,
|
153
|
+
onKeyDown: onKeyHandler
|
154
|
+
}), focused ? /*#__PURE__*/React.createElement(React.Fragment, null, invalid && /*#__PURE__*/React.createElement(WarningFilled16, {
|
155
|
+
className: "".concat(blockClass, "__warning-icon")
|
156
|
+
}), /*#__PURE__*/React.createElement(Button, {
|
157
|
+
hasIconOnly: true,
|
158
|
+
renderIcon: Close24,
|
159
|
+
size: "sm",
|
160
|
+
iconDescription: cancelLabel,
|
161
|
+
onClick: onCancelHandler,
|
162
|
+
kind: "ghost",
|
163
|
+
tabIndex: 0,
|
164
|
+
key: "cancel",
|
165
|
+
className: "".concat(blockClass, "__btn ").concat(blockClass, "__btn-cancel")
|
166
|
+
}), canSave && /*#__PURE__*/React.createElement(Button, {
|
167
|
+
hasIconOnly: true,
|
168
|
+
renderIcon: Checkmark24,
|
169
|
+
size: "sm",
|
170
|
+
iconDescription: saveLabel,
|
171
|
+
onClick: onSaveHandler,
|
172
|
+
kind: "ghost",
|
173
|
+
tabIndex: 0,
|
174
|
+
key: "save",
|
175
|
+
className: "".concat(blockClass, "__btn ").concat(blockClass, "__btn-save"),
|
176
|
+
disabled: !canSave
|
177
|
+
})) : /*#__PURE__*/React.createElement(Button, {
|
178
|
+
className: "".concat(blockClass, "__btn ").concat(blockClass, "__btn-edit"),
|
179
|
+
hasIconOnly: true,
|
180
|
+
renderIcon: readOnly ? EditOff24 : Edit24,
|
181
|
+
size: "sm",
|
182
|
+
iconDescription: editLabel,
|
183
|
+
onClick: onFocusHandler,
|
184
|
+
kind: "ghost",
|
185
|
+
disabled: readOnly,
|
186
|
+
tabIndex: 0,
|
187
|
+
key: "edit"
|
188
|
+
})), focused && invalid && /*#__PURE__*/React.createElement("p", {
|
189
|
+
className: "".concat(blockClass, "__warning-text")
|
190
|
+
}, invalidLabel));
|
191
|
+
});
|
192
|
+
InlineEditV2 = pkg.checkComponentEnabled(InlineEditV2, componentName);
|
193
|
+
InlineEditV2.displayName = componentName;
|
194
|
+
InlineEditV2.propTypes = {
|
195
|
+
/**
|
196
|
+
* label for cancel button
|
197
|
+
*/
|
198
|
+
cancelLabel: PropTypes.string.isRequired,
|
199
|
+
|
200
|
+
/**
|
201
|
+
* label for edit button
|
202
|
+
*/
|
203
|
+
editLabel: PropTypes.string.isRequired,
|
204
|
+
|
205
|
+
/**
|
206
|
+
* determines if the input is invalid
|
207
|
+
*/
|
208
|
+
invalid: PropTypes.bool,
|
209
|
+
|
210
|
+
/**
|
211
|
+
* text that is displayed if the input is invalid
|
212
|
+
*/
|
213
|
+
invalidLabel: PropTypes.string,
|
214
|
+
|
215
|
+
/**
|
216
|
+
* handler that is called when the cancel button is pressed or when the user removes focus from the input and there is no new value
|
217
|
+
*/
|
218
|
+
onCancel: PropTypes.func.isRequired,
|
219
|
+
|
220
|
+
/**
|
221
|
+
* handler that is called when the input is updated
|
222
|
+
*/
|
223
|
+
onChange: PropTypes.func.isRequired,
|
224
|
+
|
225
|
+
/**
|
226
|
+
* handler that is called when the save button is pressed or when the user removes focus from the input if it has a new value
|
227
|
+
*/
|
228
|
+
onSave: PropTypes.func.isRequired,
|
229
|
+
|
230
|
+
/**
|
231
|
+
* determines if the input is in readOnly mode
|
232
|
+
*/
|
233
|
+
readOnly: PropTypes.bool,
|
234
|
+
|
235
|
+
/**
|
236
|
+
* label for save button
|
237
|
+
*/
|
238
|
+
saveLabel: PropTypes.string.isRequired,
|
239
|
+
|
240
|
+
/**
|
241
|
+
* current value of the input
|
242
|
+
*/
|
243
|
+
value: PropTypes.string.isRequired
|
244
|
+
};
|
245
|
+
InlineEditV2.defaultProps = {
|
246
|
+
invalid: false,
|
247
|
+
invalidLabel: '',
|
248
|
+
readOnly: false
|
249
|
+
};
|
@@ -0,0 +1 @@
|
|
1
|
+
export { InlineEditV2 } from './InlineEditV2';
|
@@ -68,7 +68,9 @@ export var PageHeaderTitle = function PageHeaderTitle(_ref) {
|
|
68
68
|
return /*#__PURE__*/React.createElement("div", {
|
69
69
|
className: cx("".concat(blockClass, "__title"), _defineProperty({}, "".concat(blockClass, "__title--editable"), isEditable), _defineProperty({}, "".concat(blockClass, "__title--fades"), hasBreadcrumbRow)),
|
70
70
|
title: titleText
|
71
|
-
},
|
71
|
+
}, /*#__PURE__*/React.createElement("h1", {
|
72
|
+
className: "".concat(blockClass, "__title-wrapper")
|
73
|
+
}, titleInnards));
|
72
74
|
};
|
73
75
|
export var inlineEditRequired = function inlineEditRequired(_ref2) {
|
74
76
|
var onSave = _ref2.onSave;
|