@carbon/ibm-products 1.14.0 → 1.15.0
Sign up to get free protection for your applications and to get access to all the features.
- 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;
|