@carbon/ibm-products 1.14.0 → 1.15.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/css/index-full-carbon.css +23 -5
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +3 -3
- package/css/index-full-carbon.min.css.map +1 -1
- package/css/index-without-carbon-released-only.css +4 -4
- package/css/index-without-carbon-released-only.css.map +1 -1
- package/css/index-without-carbon-released-only.min.css +2 -2
- package/css/index-without-carbon-released-only.min.css.map +1 -1
- package/css/index-without-carbon.css +23 -5
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +3 -3
- package/css/index-without-carbon.min.css.map +1 -1
- package/css/index.css +23 -5
- package/css/index.css.map +1 -1
- package/css/index.min.css +3 -3
- package/css/index.min.css.map +1 -1
- package/es/components/AddSelect/AddSelect.js +25 -19
- package/es/components/AddSelect/AddSelectFilter.js +5 -5
- package/es/components/DataSpreadsheet/DataSpreadsheet.js +174 -127
- package/es/components/DataSpreadsheet/DataSpreadsheetBody.js +24 -8
- package/es/components/DataSpreadsheet/DataSpreadsheetHeader.js +31 -6
- package/es/components/DataSpreadsheet/hooks/index.js +2 -1
- package/es/components/DataSpreadsheet/hooks/useMultipleKeyTracking.js +36 -8
- package/es/components/DataSpreadsheet/hooks/useSpreadsheetEdit.js +68 -0
- package/es/components/DataSpreadsheet/utils/createCellSelectionArea.js +20 -8
- package/es/components/DataSpreadsheet/utils/getSelectionAreaPoints.js +18 -0
- package/es/components/DataSpreadsheet/utils/handleActiveCellInSelectionEnter.js +121 -0
- package/es/components/DataSpreadsheet/utils/handleActiveCellInSelectionTab.js +108 -0
- package/es/components/DataSpreadsheet/utils/handleEditSubmit.js +87 -0
- package/es/components/DataSpreadsheet/utils/handleHeaderCellSelection.js +42 -8
- package/es/components/DataSpreadsheet/utils/handleMultipleKeys.js +153 -15
- package/es/components/DataSpreadsheet/utils/selectAllCells.js +53 -0
- package/es/components/MultiAddSelect/MultiAddSelect.js +150 -3
- package/es/components/PageHeader/PageHeader.js +3 -1
- package/es/components/SingleAddSelect/SingleAddSelect.js +90 -4
- package/es/components/TagSet/TagSet.js +13 -6
- package/es/components/Tearsheet/TearsheetShell.js +34 -10
- package/es/global/js/package-settings.js +2 -1
- package/lib/components/AddSelect/AddSelect.js +25 -19
- package/lib/components/AddSelect/AddSelectFilter.js +5 -5
- package/lib/components/DataSpreadsheet/DataSpreadsheet.js +178 -126
- package/lib/components/DataSpreadsheet/DataSpreadsheetBody.js +24 -8
- package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.js +32 -6
- package/lib/components/DataSpreadsheet/hooks/index.js +9 -1
- package/lib/components/DataSpreadsheet/hooks/useMultipleKeyTracking.js +36 -8
- package/lib/components/DataSpreadsheet/hooks/useSpreadsheetEdit.js +79 -0
- package/lib/components/DataSpreadsheet/utils/createCellSelectionArea.js +21 -8
- package/lib/components/DataSpreadsheet/utils/getSelectionAreaPoints.js +27 -0
- package/lib/components/DataSpreadsheet/utils/handleActiveCellInSelectionEnter.js +127 -0
- package/lib/components/DataSpreadsheet/utils/handleActiveCellInSelectionTab.js +118 -0
- package/lib/components/DataSpreadsheet/utils/handleEditSubmit.js +94 -0
- package/lib/components/DataSpreadsheet/utils/handleHeaderCellSelection.js +44 -8
- package/lib/components/DataSpreadsheet/utils/handleMultipleKeys.js +161 -22
- package/lib/components/DataSpreadsheet/utils/selectAllCells.js +60 -0
- package/lib/components/MultiAddSelect/MultiAddSelect.js +150 -2
- package/lib/components/PageHeader/PageHeader.js +3 -1
- package/lib/components/SingleAddSelect/SingleAddSelect.js +91 -3
- package/lib/components/TagSet/TagSet.js +13 -6
- package/lib/components/Tearsheet/TearsheetShell.js +36 -10
- package/lib/global/js/package-settings.js +2 -1
- package/package.json +11 -11
- package/scss/components/AboutModal/_about-modal.scss +4 -0
- package/scss/components/DataSpreadsheet/_data-spreadsheet.scss +22 -1
- package/scss/components/ExportModal/_export-modal.scss +0 -4
@@ -1,11 +1,15 @@
|
|
1
|
+
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
|
2
|
+
|
1
3
|
/**
|
2
4
|
* Copyright IBM Corp. 2022, 2022
|
3
5
|
*
|
4
6
|
* This source code is licensed under the Apache-2.0 license found in the
|
5
7
|
* LICENSE file in the root directory of this source tree.
|
6
8
|
*/
|
9
|
+
import { deepCloneObject } from '../../../global/js/utils/deepCloneObject';
|
7
10
|
import uuidv4 from '../../../global/js/utils/uuidv4';
|
8
11
|
import { removeCellSelections } from './removeCellSelections';
|
12
|
+
import { checkActiveHeaderCell } from './checkActiveHeaderCell';
|
9
13
|
export var handleHeaderCellSelection = function handleHeaderCellSelection(_ref) {
|
10
14
|
var type = _ref.type,
|
11
15
|
activeCellCoordinates = _ref.activeCellCoordinates,
|
@@ -17,8 +21,16 @@ export var handleHeaderCellSelection = function handleHeaderCellSelection(_ref)
|
|
17
21
|
spreadsheetRef = _ref.spreadsheetRef,
|
18
22
|
index = _ref.index,
|
19
23
|
isKeyboard = _ref.isKeyboard,
|
20
|
-
setSelectionAreaData = _ref.setSelectionAreaData
|
21
|
-
|
24
|
+
setSelectionAreaData = _ref.setSelectionAreaData,
|
25
|
+
isHoldingCommandKey = _ref.isHoldingCommandKey;
|
26
|
+
|
27
|
+
if (!isHoldingCommandKey) {
|
28
|
+
setSelectionAreaData([]);
|
29
|
+
removeCellSelections({
|
30
|
+
spreadsheetRef: spreadsheetRef
|
31
|
+
});
|
32
|
+
}
|
33
|
+
|
22
34
|
var rowValue = isKeyboard ? activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row : index;
|
23
35
|
var columnValue = isKeyboard ? activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column : index;
|
24
36
|
var point1 = {
|
@@ -36,13 +48,35 @@ export var handleHeaderCellSelection = function handleHeaderCellSelection(_ref)
|
|
36
48
|
column: type === 'column' ? columnValue : 0
|
37
49
|
});
|
38
50
|
setCurrentMatcher(tempMatcher);
|
39
|
-
|
40
|
-
spreadsheetRef: spreadsheetRef
|
41
|
-
});
|
42
|
-
setSelectionAreas([{
|
51
|
+
var newSelectionArea = {
|
43
52
|
point1: point1,
|
44
53
|
point2: point2,
|
45
54
|
areaCreated: false,
|
46
|
-
matcher: tempMatcher
|
47
|
-
|
55
|
+
matcher: tempMatcher,
|
56
|
+
header: {
|
57
|
+
type: type,
|
58
|
+
index: index
|
59
|
+
}
|
60
|
+
};
|
61
|
+
setSelectionAreas(function (prev) {
|
62
|
+
var selectionsClone = deepCloneObject(prev);
|
63
|
+
|
64
|
+
if (isHoldingCommandKey) {
|
65
|
+
var selectionsFromHeaderCell = selectionsClone.filter(function (item) {
|
66
|
+
return item.header.type;
|
67
|
+
});
|
68
|
+
var previouslyCreatedHeaderSelection = selectionsFromHeaderCell.filter(function (item) {
|
69
|
+
return item.header.type === type;
|
70
|
+
});
|
71
|
+
var isHeaderPartOfPreviousSelection = checkActiveHeaderCell(index, previouslyCreatedHeaderSelection, type); // Prevents row/column header selections from being created multiple times
|
72
|
+
|
73
|
+
if (previouslyCreatedHeaderSelection.length && isHeaderPartOfPreviousSelection) {
|
74
|
+
return prev;
|
75
|
+
}
|
76
|
+
|
77
|
+
return [].concat(_toConsumableArray(prev), [newSelectionArea]);
|
78
|
+
}
|
79
|
+
|
80
|
+
return [newSelectionArea];
|
81
|
+
});
|
48
82
|
};
|
@@ -1,3 +1,9 @@
|
|
1
|
+
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
2
|
+
|
3
|
+
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; }
|
4
|
+
|
5
|
+
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) { _defineProperty(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; }
|
6
|
+
|
1
7
|
/**
|
2
8
|
* Copyright IBM Corp. 2022, 2022
|
3
9
|
*
|
@@ -5,6 +11,17 @@
|
|
5
11
|
* LICENSE file in the root directory of this source tree.
|
6
12
|
*/
|
7
13
|
import { deepCloneObject } from '../../../global/js/utils/deepCloneObject';
|
14
|
+
import uuidv4 from '../../../global/js/utils/uuidv4';
|
15
|
+
import { selectAllCells } from './selectAllCells';
|
16
|
+
export var includesResourceKey = function includesResourceKey(arr, usingMac) {
|
17
|
+
if (usingMac) {
|
18
|
+
return includesMeta(arr);
|
19
|
+
}
|
20
|
+
|
21
|
+
if (!usingMac) {
|
22
|
+
return includesControl(arr);
|
23
|
+
}
|
24
|
+
};
|
8
25
|
export var includesShift = function includesShift(arr) {
|
9
26
|
if (arr.includes('ShiftLeft') || arr.includes('ShiftRight')) {
|
10
27
|
return true;
|
@@ -30,7 +47,7 @@ var includesControl = function includesControl(arr) {
|
|
30
47
|
};
|
31
48
|
|
32
49
|
export var handleMultipleKeys = function handleMultipleKeys(_ref) {
|
33
|
-
var _selectionAreasClone
|
50
|
+
var _selectionAreasClone$, _selectionAreasClone$2, _selectionAreasClone$3;
|
34
51
|
|
35
52
|
var activeCellCoordinates = _ref.activeCellCoordinates,
|
36
53
|
event = _ref.event,
|
@@ -39,15 +56,21 @@ export var handleMultipleKeys = function handleMultipleKeys(_ref) {
|
|
39
56
|
currentMatcher = _ref.currentMatcher,
|
40
57
|
rows = _ref.rows,
|
41
58
|
setSelectionAreas = _ref.setSelectionAreas,
|
42
|
-
columns = _ref.columns
|
59
|
+
columns = _ref.columns,
|
60
|
+
updateActiveCellCoordinates = _ref.updateActiveCellCoordinates,
|
61
|
+
spreadsheetRef = _ref.spreadsheetRef,
|
62
|
+
removeCellSelections = _ref.removeCellSelections,
|
63
|
+
blockClass = _ref.blockClass,
|
64
|
+
setCurrentMatcher = _ref.setCurrentMatcher,
|
65
|
+
usingMac = _ref.usingMac;
|
43
66
|
var selectionAreasClone = deepCloneObject(selectionAreas);
|
44
67
|
var indexOfCurrentArea = selectionAreasClone.findIndex(function (item) {
|
45
68
|
return item.matcher === currentMatcher;
|
46
69
|
});
|
47
|
-
var pointToUpdate = (_selectionAreasClone$ = selectionAreasClone[indexOfCurrentArea]) !== null && _selectionAreasClone$ !== void 0 && _selectionAreasClone$.point2 ? selectionAreasClone[indexOfCurrentArea].point2 : selectionAreasClone[indexOfCurrentArea].point1; // Down + Shift
|
70
|
+
var pointToUpdate = (_selectionAreasClone$ = selectionAreasClone[indexOfCurrentArea]) !== null && _selectionAreasClone$ !== void 0 && _selectionAreasClone$.point2 ? (_selectionAreasClone$2 = selectionAreasClone[indexOfCurrentArea]) === null || _selectionAreasClone$2 === void 0 ? void 0 : _selectionAreasClone$2.point2 : (_selectionAreasClone$3 = selectionAreasClone[indexOfCurrentArea]) === null || _selectionAreasClone$3 === void 0 ? void 0 : _selectionAreasClone$3.point1; // Down + Shift
|
48
71
|
|
49
72
|
if (includesShift(keysPressedList) && keysPressedList.includes('ArrowDown') && keysPressedList.length === 2) {
|
50
|
-
if (rows.length - 1 === pointToUpdate.row) {
|
73
|
+
if (rows.length - 1 === (pointToUpdate === null || pointToUpdate === void 0 ? void 0 : pointToUpdate.row) || (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === 'header' || (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === 'header') {
|
51
74
|
return;
|
52
75
|
}
|
53
76
|
|
@@ -62,7 +85,7 @@ export var handleMultipleKeys = function handleMultipleKeys(_ref) {
|
|
62
85
|
|
63
86
|
|
64
87
|
if (includesShift(keysPressedList) && keysPressedList.includes('ArrowRight') && keysPressedList.length === 2) {
|
65
|
-
if (columns.length - 1 === pointToUpdate.column) {
|
88
|
+
if (columns.length - 1 === (pointToUpdate === null || pointToUpdate === void 0 ? void 0 : pointToUpdate.column) || (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === 'header' || (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === 'header') {
|
66
89
|
return;
|
67
90
|
}
|
68
91
|
|
@@ -77,7 +100,7 @@ export var handleMultipleKeys = function handleMultipleKeys(_ref) {
|
|
77
100
|
|
78
101
|
|
79
102
|
if (includesShift(keysPressedList) && keysPressedList.includes('ArrowUp') && keysPressedList.length === 2) {
|
80
|
-
if (pointToUpdate.row === 0) {
|
103
|
+
if ((pointToUpdate === null || pointToUpdate === void 0 ? void 0 : pointToUpdate.row) === 0 || (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === 'header' || (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === 'header') {
|
81
104
|
return;
|
82
105
|
}
|
83
106
|
|
@@ -92,7 +115,7 @@ export var handleMultipleKeys = function handleMultipleKeys(_ref) {
|
|
92
115
|
|
93
116
|
|
94
117
|
if (includesShift(keysPressedList) && keysPressedList.includes('ArrowLeft') && keysPressedList.length === 2) {
|
95
|
-
if (pointToUpdate.column === 0) {
|
118
|
+
if ((pointToUpdate === null || pointToUpdate === void 0 ? void 0 : pointToUpdate.column) === 0 || (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === 'header' || (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === 'header') {
|
96
119
|
return;
|
97
120
|
}
|
98
121
|
|
@@ -106,7 +129,7 @@ export var handleMultipleKeys = function handleMultipleKeys(_ref) {
|
|
106
129
|
} // CMD + a (select all)
|
107
130
|
|
108
131
|
|
109
|
-
if (
|
132
|
+
if (includesResourceKey(keysPressedList, usingMac) && keysPressedList.includes('KeyA')) {
|
110
133
|
event.preventDefault();
|
111
134
|
var selectionPoint1 = {
|
112
135
|
row: 0,
|
@@ -115,7 +138,20 @@ export var handleMultipleKeys = function handleMultipleKeys(_ref) {
|
|
115
138
|
var selectionPoint2 = {
|
116
139
|
row: rows.length - 1,
|
117
140
|
column: columns.length - 1
|
118
|
-
};
|
141
|
+
}; // If indexOfCurrentArea is -1, it means the active cell is in a cell header position
|
142
|
+
|
143
|
+
if (indexOfCurrentArea === -1) {
|
144
|
+
selectAllCells({
|
145
|
+
ref: spreadsheetRef,
|
146
|
+
setCurrentMatcher: setCurrentMatcher,
|
147
|
+
setSelectionAreas: setSelectionAreas,
|
148
|
+
rows: rows,
|
149
|
+
columns: columns,
|
150
|
+
activeCellCoordinates: activeCellCoordinates,
|
151
|
+
updateActiveCellCoordinates: updateActiveCellCoordinates
|
152
|
+
});
|
153
|
+
}
|
154
|
+
|
119
155
|
selectionAreasClone[indexOfCurrentArea].point1 = selectionPoint1;
|
120
156
|
selectionAreasClone[indexOfCurrentArea].point2 = selectionPoint2;
|
121
157
|
selectionAreasClone[indexOfCurrentArea].areaCreated = false;
|
@@ -126,12 +162,35 @@ export var handleMultipleKeys = function handleMultipleKeys(_ref) {
|
|
126
162
|
if (includesControl(keysPressedList) && keysPressedList.includes('Space')) {
|
127
163
|
var _selectionPoint = {
|
128
164
|
row: 0,
|
129
|
-
column: activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column
|
165
|
+
column: (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === 'header' ? 0 : activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column
|
130
166
|
};
|
131
167
|
var _selectionPoint2 = {
|
132
168
|
row: rows.length - 1,
|
133
|
-
column: activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column
|
134
|
-
};
|
169
|
+
column: (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === 'header' ? 0 : activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column
|
170
|
+
}; // If indexOfCurrentArea is -1, it means the active cell is in a cell header position
|
171
|
+
|
172
|
+
if (indexOfCurrentArea === -1) {
|
173
|
+
var tempMatcher = uuidv4();
|
174
|
+
var newSelectionArea = {
|
175
|
+
point1: _selectionPoint,
|
176
|
+
point2: _selectionPoint2,
|
177
|
+
areaCreated: false,
|
178
|
+
matcher: tempMatcher
|
179
|
+
};
|
180
|
+
|
181
|
+
var coordinatesClone = _objectSpread({}, activeCellCoordinates);
|
182
|
+
|
183
|
+
updateActiveCellCoordinates({
|
184
|
+
coords: coordinatesClone,
|
185
|
+
updatedValue: {
|
186
|
+
column: (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === 'header' ? 0 : activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column,
|
187
|
+
row: (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === 'header' ? 0 : activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row
|
188
|
+
}
|
189
|
+
});
|
190
|
+
setCurrentMatcher(tempMatcher);
|
191
|
+
return setSelectionAreas([newSelectionArea]);
|
192
|
+
}
|
193
|
+
|
135
194
|
selectionAreasClone[indexOfCurrentArea].point1 = _selectionPoint;
|
136
195
|
selectionAreasClone[indexOfCurrentArea].point2 = _selectionPoint2;
|
137
196
|
selectionAreasClone[indexOfCurrentArea].areaCreated = false;
|
@@ -141,16 +200,95 @@ export var handleMultipleKeys = function handleMultipleKeys(_ref) {
|
|
141
200
|
|
142
201
|
if (includesShift(keysPressedList) && keysPressedList.includes('Space')) {
|
143
202
|
var _selectionPoint3 = {
|
144
|
-
row: activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row,
|
203
|
+
row: (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === 'header' ? 0 : activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row,
|
145
204
|
column: 0
|
146
205
|
};
|
147
206
|
var _selectionPoint4 = {
|
148
|
-
row: activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row,
|
207
|
+
row: (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === 'header' ? 0 : activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row,
|
149
208
|
column: columns.length - 1
|
150
|
-
};
|
209
|
+
}; // If indexOfCurrentArea is -1, it means the active cell is in a cell header position
|
210
|
+
|
211
|
+
if (indexOfCurrentArea === -1) {
|
212
|
+
var _tempMatcher = uuidv4();
|
213
|
+
|
214
|
+
var _newSelectionArea = {
|
215
|
+
point1: _selectionPoint3,
|
216
|
+
point2: _selectionPoint4,
|
217
|
+
areaCreated: false,
|
218
|
+
matcher: _tempMatcher
|
219
|
+
};
|
220
|
+
|
221
|
+
var _coordinatesClone = _objectSpread({}, activeCellCoordinates);
|
222
|
+
|
223
|
+
updateActiveCellCoordinates({
|
224
|
+
coords: _coordinatesClone,
|
225
|
+
updatedValue: {
|
226
|
+
column: (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === 'header' ? 0 : activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column,
|
227
|
+
row: (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === 'header' ? 0 : activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row
|
228
|
+
}
|
229
|
+
});
|
230
|
+
setCurrentMatcher(_tempMatcher);
|
231
|
+
return setSelectionAreas([_newSelectionArea]);
|
232
|
+
}
|
233
|
+
|
151
234
|
selectionAreasClone[indexOfCurrentArea].point1 = _selectionPoint3;
|
152
235
|
selectionAreasClone[indexOfCurrentArea].point2 = _selectionPoint4;
|
153
236
|
selectionAreasClone[indexOfCurrentArea].areaCreated = false;
|
154
237
|
setSelectionAreas(selectionAreasClone);
|
238
|
+
} // CMD + HOME (Selects first cell in first row)
|
239
|
+
|
240
|
+
|
241
|
+
if (includesResourceKey(keysPressedList, usingMac) && keysPressedList.includes('Home')) {
|
242
|
+
var scrollElement = spreadsheetRef.current.querySelector(".".concat(blockClass, "__list--container"));
|
243
|
+
scrollElement.scrollTop = 0;
|
244
|
+
|
245
|
+
var _coordinatesClone2 = _objectSpread({}, activeCellCoordinates);
|
246
|
+
|
247
|
+
removeCellSelections({
|
248
|
+
spreadsheetRef: spreadsheetRef
|
249
|
+
});
|
250
|
+
updateActiveCellCoordinates({
|
251
|
+
coords: _coordinatesClone2,
|
252
|
+
updatedValue: {
|
253
|
+
column: 0,
|
254
|
+
row: 0
|
255
|
+
}
|
256
|
+
});
|
257
|
+
} // CMD + END (Selects last cell in last row)
|
258
|
+
|
259
|
+
|
260
|
+
if (includesResourceKey(keysPressedList, usingMac) && keysPressedList.includes('End')) {
|
261
|
+
var _scrollElement = spreadsheetRef.current.querySelector(".".concat(blockClass, "__list--container"));
|
262
|
+
|
263
|
+
_scrollElement.scrollTop = _scrollElement.scrollHeight;
|
264
|
+
|
265
|
+
var _coordinatesClone3 = _objectSpread({}, activeCellCoordinates);
|
266
|
+
|
267
|
+
removeCellSelections({
|
268
|
+
spreadsheetRef: spreadsheetRef
|
269
|
+
});
|
270
|
+
var lastCellExists = !!rows[(rows === null || rows === void 0 ? void 0 : rows.length) - 1].cells[(columns === null || columns === void 0 ? void 0 : columns.length) - 1];
|
271
|
+
|
272
|
+
var updateToLastCell = function updateToLastCell() {
|
273
|
+
updateActiveCellCoordinates({
|
274
|
+
coords: _coordinatesClone3,
|
275
|
+
updatedValue: {
|
276
|
+
column: columns.length - 1,
|
277
|
+
row: rows.length - 1
|
278
|
+
}
|
279
|
+
});
|
280
|
+
}; // With the spreadsheet supporting virtualized data, it's possible that the last cell
|
281
|
+
// has never been rendered yet, if that's the case we scroll to the bottom of the spreadsheet
|
282
|
+
// and add a timeout to wait for the last row to render to the DOM before updating the active cell coordinates.
|
283
|
+
// If we're able to verify that the last row has been rendered, no timeout is used.
|
284
|
+
|
285
|
+
|
286
|
+
if (lastCellExists) {
|
287
|
+
updateToLastCell();
|
288
|
+
} else {
|
289
|
+
setTimeout(function () {
|
290
|
+
updateToLastCell();
|
291
|
+
}, 1);
|
292
|
+
}
|
155
293
|
}
|
156
294
|
};
|
@@ -0,0 +1,53 @@
|
|
1
|
+
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
2
|
+
|
3
|
+
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; }
|
4
|
+
|
5
|
+
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) { _defineProperty(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; }
|
6
|
+
|
7
|
+
/**
|
8
|
+
* Copyright IBM Corp. 2022, 2022
|
9
|
+
*
|
10
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
11
|
+
* LICENSE file in the root directory of this source tree.
|
12
|
+
*/
|
13
|
+
import { removeCellSelections } from './removeCellSelections';
|
14
|
+
import uuidv4 from '../../../global/js/utils/uuidv4';
|
15
|
+
export var selectAllCells = function selectAllCells(_ref) {
|
16
|
+
var activeCellCoordinates = _ref.activeCellCoordinates,
|
17
|
+
columns = _ref.columns,
|
18
|
+
setCurrentMatcher = _ref.setCurrentMatcher,
|
19
|
+
setSelectionAreas = _ref.setSelectionAreas,
|
20
|
+
ref = _ref.ref,
|
21
|
+
rows = _ref.rows,
|
22
|
+
updateActiveCellCoordinates = _ref.updateActiveCellCoordinates;
|
23
|
+
removeCellSelections({
|
24
|
+
spreadsheetRef: ref
|
25
|
+
});
|
26
|
+
var selectionPoint1 = {
|
27
|
+
row: 0,
|
28
|
+
column: 0
|
29
|
+
};
|
30
|
+
var selectionPoint2 = {
|
31
|
+
row: rows.length - 1,
|
32
|
+
column: columns.length - 1
|
33
|
+
};
|
34
|
+
var tempMatcher = uuidv4();
|
35
|
+
var newSelectionArea = {
|
36
|
+
point1: selectionPoint1,
|
37
|
+
point2: selectionPoint2,
|
38
|
+
areaCreated: false,
|
39
|
+
matcher: tempMatcher
|
40
|
+
};
|
41
|
+
|
42
|
+
var coordinatesClone = _objectSpread({}, activeCellCoordinates);
|
43
|
+
|
44
|
+
updateActiveCellCoordinates({
|
45
|
+
coords: coordinatesClone,
|
46
|
+
updatedValue: {
|
47
|
+
column: 0,
|
48
|
+
row: 0
|
49
|
+
}
|
50
|
+
});
|
51
|
+
setCurrentMatcher(tempMatcher);
|
52
|
+
return setSelectionAreas([newSelectionArea]);
|
53
|
+
};
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
2
|
-
import React, { forwardRef } from 'react';
|
3
|
-
|
2
|
+
import React, { forwardRef } from 'react';
|
3
|
+
import PropTypes from 'prop-types';
|
4
4
|
import { AddSelect } from '../AddSelect';
|
5
5
|
import { getDevtoolsProps } from '../../global/js/utils/devtools';
|
6
6
|
import { pkg } from '../../settings';
|
@@ -12,5 +12,152 @@ export var MultiAddSelect = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
12
12
|
}, getDevtoolsProps(componentName)));
|
13
13
|
});
|
14
14
|
MultiAddSelect = pkg.checkComponentEnabled(MultiAddSelect, componentName);
|
15
|
-
MultiAddSelect.propTypes = {
|
15
|
+
MultiAddSelect.propTypes = {
|
16
|
+
/**
|
17
|
+
* optional class name
|
18
|
+
*/
|
19
|
+
className: PropTypes.string,
|
20
|
+
|
21
|
+
/**
|
22
|
+
* placeholder for column input filter
|
23
|
+
*/
|
24
|
+
columnInputPlaceholder: PropTypes.string,
|
25
|
+
|
26
|
+
/**
|
27
|
+
* text description that appears under the title
|
28
|
+
*/
|
29
|
+
description: PropTypes.string,
|
30
|
+
|
31
|
+
/**
|
32
|
+
* options to display in the global filter box. values are generated
|
33
|
+
* from the id which should correlate with a specific property in an
|
34
|
+
* item entry
|
35
|
+
*/
|
36
|
+
globalFilters: PropTypes.arrayOf(PropTypes.shape({
|
37
|
+
id: PropTypes.string,
|
38
|
+
label: PropTypes.string
|
39
|
+
})),
|
40
|
+
globalFiltersIconDescription: PropTypes.string,
|
41
|
+
|
42
|
+
/**
|
43
|
+
* placeholder text for the global filter dropdown
|
44
|
+
*/
|
45
|
+
globalFiltersPlaceholderText: PropTypes.string,
|
46
|
+
|
47
|
+
/**
|
48
|
+
* text for the global filter primary button
|
49
|
+
*/
|
50
|
+
globalFiltersPrimaryButtonText: PropTypes.string,
|
51
|
+
|
52
|
+
/**
|
53
|
+
* text for the global filter secondary button
|
54
|
+
*/
|
55
|
+
globalFiltersSecondaryButtonText: PropTypes.string,
|
56
|
+
|
57
|
+
/**
|
58
|
+
* label for global search input
|
59
|
+
*/
|
60
|
+
globalSearchLabel: PropTypes.string,
|
61
|
+
|
62
|
+
/**
|
63
|
+
* placeholder for global search input
|
64
|
+
*/
|
65
|
+
globalSearchPlaceholder: PropTypes.string,
|
66
|
+
|
67
|
+
/**
|
68
|
+
* title that displays in the sidebar / influencer
|
69
|
+
*/
|
70
|
+
influencerTitle: PropTypes.string,
|
71
|
+
|
72
|
+
/**
|
73
|
+
* object that contains the item data. for more information reference the
|
74
|
+
* "Structuring items" section in the docs tab
|
75
|
+
*/
|
76
|
+
items: PropTypes.shape({
|
77
|
+
modifiers: PropTypes.shape({
|
78
|
+
label: PropTypes.string,
|
79
|
+
options: PropTypes.array
|
80
|
+
}),
|
81
|
+
sortBy: PropTypes.array,
|
82
|
+
filterBy: PropTypes.array,
|
83
|
+
entries: PropTypes.arrayOf(PropTypes.shape({
|
84
|
+
avatar: PropTypes.shape({
|
85
|
+
alt: PropTypes.string,
|
86
|
+
icon: PropTypes.object,
|
87
|
+
src: PropTypes.string
|
88
|
+
}),
|
89
|
+
children: PropTypes.object,
|
90
|
+
icon: PropTypes.object,
|
91
|
+
id: PropTypes.string.isRequired,
|
92
|
+
subtitle: PropTypes.string,
|
93
|
+
title: PropTypes.string.isRequired,
|
94
|
+
value: PropTypes.string.isRequired
|
95
|
+
}))
|
96
|
+
}),
|
97
|
+
|
98
|
+
/**
|
99
|
+
* label that display above the list of items
|
100
|
+
*/
|
101
|
+
itemsLabel: PropTypes.string,
|
102
|
+
|
103
|
+
/**
|
104
|
+
* text to display when no results are found from the global search
|
105
|
+
*/
|
106
|
+
noResultsDescription: PropTypes.string,
|
107
|
+
|
108
|
+
/**
|
109
|
+
* title to display when no results are found from the global search
|
110
|
+
*/
|
111
|
+
noResultsTitle: PropTypes.string,
|
112
|
+
|
113
|
+
/**
|
114
|
+
* text body that displays in the sidebar when nothing is selected
|
115
|
+
*/
|
116
|
+
noSelectionDescription: PropTypes.string,
|
117
|
+
|
118
|
+
/**
|
119
|
+
* title that displays in the sidebar when nothing is selected
|
120
|
+
*/
|
121
|
+
noSelectionTitle: PropTypes.string,
|
122
|
+
|
123
|
+
/**
|
124
|
+
* function to call when the close button clicked
|
125
|
+
*/
|
126
|
+
onClose: PropTypes.func,
|
127
|
+
|
128
|
+
/**
|
129
|
+
* text for close button
|
130
|
+
*/
|
131
|
+
onCloseButtonText: PropTypes.string,
|
132
|
+
|
133
|
+
/**
|
134
|
+
* function to call when the submit button is clicked. returns a selection
|
135
|
+
*/
|
136
|
+
onSubmit: PropTypes.func,
|
137
|
+
|
138
|
+
/**
|
139
|
+
* text for the submit button
|
140
|
+
*/
|
141
|
+
onSubmitButtonText: PropTypes.string,
|
142
|
+
|
143
|
+
/**
|
144
|
+
* specifies if the component is open or not
|
145
|
+
*/
|
146
|
+
open: PropTypes.bool,
|
147
|
+
|
148
|
+
/**
|
149
|
+
* description for the remove item icon
|
150
|
+
*/
|
151
|
+
removeIconDescription: PropTypes.string,
|
152
|
+
|
153
|
+
/**
|
154
|
+
* text that displays when displaying filtered items
|
155
|
+
*/
|
156
|
+
searchResultsLabel: PropTypes.string,
|
157
|
+
|
158
|
+
/**
|
159
|
+
* header text
|
160
|
+
*/
|
161
|
+
title: PropTypes.string
|
162
|
+
};
|
16
163
|
MultiAddSelect.displayName = componentName;
|
@@ -499,7 +499,8 @@ var TYPES = {
|
|
499
499
|
gray: 'Gray',
|
500
500
|
'cool-gray': 'Cool-Gray',
|
501
501
|
'warm-gray': 'Warm-Gray',
|
502
|
-
'high-contrast': 'High-Contrast'
|
502
|
+
'high-contrast': 'High-Contrast',
|
503
|
+
outline: 'Outline'
|
503
504
|
};
|
504
505
|
var tagTypes = Object.keys(TYPES);
|
505
506
|
export var deprecatedProps = {
|
@@ -513,6 +514,7 @@ export var deprecatedProps = {
|
|
513
514
|
*/
|
514
515
|
hasBackgroundAlways: deprecateProp(PropTypes.bool, 'Property replaced by `withoutBackground`')
|
515
516
|
};
|
517
|
+
PageHeader.tagTypes = tagTypes;
|
516
518
|
PageHeader.propTypes = _objectSpread({
|
517
519
|
/**
|
518
520
|
* Specifies the action bar items which are the final items in the row top of the PageHeader.
|
@@ -1,15 +1,101 @@
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
2
|
-
import React, { forwardRef } from 'react';
|
3
|
-
|
2
|
+
import React, { forwardRef } from 'react';
|
3
|
+
import PropTypes from 'prop-types';
|
4
4
|
import { AddSelect } from '../AddSelect';
|
5
5
|
import { getDevtoolsProps } from '../../global/js/utils/devtools';
|
6
6
|
import { pkg } from '../../settings';
|
7
|
+
import { prepareProps } from '../../global/js/utils/props-helper';
|
7
8
|
var componentName = 'SingleAddSelect';
|
8
9
|
export var SingleAddSelect = /*#__PURE__*/forwardRef(function (props, ref) {
|
9
|
-
|
10
|
+
// remove multi add select specific props
|
11
|
+
var validProps = prepareProps(props, ['columnInputPlaceholder', 'globalFilters', 'globalFiltersIconDescription', 'globalFiltersPlaceholderText', 'globalFiltersPrimaryButtonText', 'globalFiltersSecondaryButtonText', 'influencerTitle', 'multi', 'noSelectionDescription', 'noSelectionTitle', 'removeIconDescription']);
|
12
|
+
return /*#__PURE__*/React.createElement(AddSelect, _extends({}, validProps, {
|
10
13
|
ref: ref
|
11
14
|
}, getDevtoolsProps(componentName)));
|
12
15
|
});
|
13
16
|
SingleAddSelect = pkg.checkComponentEnabled(SingleAddSelect, componentName);
|
14
|
-
SingleAddSelect.propTypes = {
|
17
|
+
SingleAddSelect.propTypes = {
|
18
|
+
/**
|
19
|
+
* optional class name
|
20
|
+
*/
|
21
|
+
className: PropTypes.string,
|
22
|
+
|
23
|
+
/**
|
24
|
+
* text description that appears under the title
|
25
|
+
*/
|
26
|
+
description: PropTypes.string,
|
27
|
+
|
28
|
+
/**
|
29
|
+
* label for global search input
|
30
|
+
*/
|
31
|
+
globalSearchLabel: PropTypes.string,
|
32
|
+
|
33
|
+
/**
|
34
|
+
* placeholder for global search input
|
35
|
+
*/
|
36
|
+
globalSearchPlaceholder: PropTypes.string,
|
37
|
+
|
38
|
+
/**
|
39
|
+
* object that contains the item data. for more information reference the
|
40
|
+
* "Structuring items" section in the docs tab
|
41
|
+
*/
|
42
|
+
items: PropTypes.shape({
|
43
|
+
entries: PropTypes.arrayOf(PropTypes.shape({
|
44
|
+
children: PropTypes.object,
|
45
|
+
id: PropTypes.string.isRequired,
|
46
|
+
title: PropTypes.string.isRequired,
|
47
|
+
value: PropTypes.string.isRequired
|
48
|
+
}))
|
49
|
+
}),
|
50
|
+
|
51
|
+
/**
|
52
|
+
* label that display above the list of items
|
53
|
+
*/
|
54
|
+
itemsLabel: PropTypes.string,
|
55
|
+
|
56
|
+
/**
|
57
|
+
* text to display when no results are found from the global search
|
58
|
+
*/
|
59
|
+
noResultsDescription: PropTypes.string,
|
60
|
+
|
61
|
+
/**
|
62
|
+
* title to display when no results are found from the global search
|
63
|
+
*/
|
64
|
+
noResultsTitle: PropTypes.string,
|
65
|
+
|
66
|
+
/**
|
67
|
+
* function to call when the close button clicked
|
68
|
+
*/
|
69
|
+
onClose: PropTypes.func,
|
70
|
+
|
71
|
+
/**
|
72
|
+
* text for close button
|
73
|
+
*/
|
74
|
+
onCloseButtonText: PropTypes.string,
|
75
|
+
|
76
|
+
/**
|
77
|
+
* function to call when the submit button is clicked. returns a selection
|
78
|
+
*/
|
79
|
+
onSubmit: PropTypes.func,
|
80
|
+
|
81
|
+
/**
|
82
|
+
* text for the submit button
|
83
|
+
*/
|
84
|
+
onSubmitButtonText: PropTypes.string,
|
85
|
+
|
86
|
+
/**
|
87
|
+
* specifies if the component is open or not
|
88
|
+
*/
|
89
|
+
open: PropTypes.bool,
|
90
|
+
|
91
|
+
/**
|
92
|
+
* text that displays when displaying filtered items
|
93
|
+
*/
|
94
|
+
searchResultsLabel: PropTypes.string,
|
95
|
+
|
96
|
+
/**
|
97
|
+
* header text
|
98
|
+
*/
|
99
|
+
title: PropTypes.string
|
100
|
+
};
|
15
101
|
SingleAddSelect.displayName = componentName;
|