@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
@@ -0,0 +1,94 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
4
|
+
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
6
|
+
value: true
|
7
|
+
});
|
8
|
+
exports.handleEditSubmit = void 0;
|
9
|
+
|
10
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
11
|
+
|
12
|
+
var _removeCellSelections = require("./removeCellSelections");
|
13
|
+
|
14
|
+
var _uuidv = _interopRequireDefault(require("../../../global/js/utils/uuidv4"));
|
15
|
+
|
16
|
+
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; }
|
17
|
+
|
18
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
19
|
+
|
20
|
+
// Update the data
|
21
|
+
var handleEditSubmit = function handleEditSubmit(_ref) {
|
22
|
+
var activeCellCoordinates = _ref.activeCellCoordinates,
|
23
|
+
cellEditorRulerRef = _ref.cellEditorRulerRef,
|
24
|
+
columns = _ref.columns,
|
25
|
+
previousState = _ref.previousState,
|
26
|
+
removeCellEditor = _ref.removeCellEditor,
|
27
|
+
rows = _ref.rows,
|
28
|
+
setActiveCellCoordinates = _ref.setActiveCellCoordinates,
|
29
|
+
setCurrentMatcher = _ref.setCurrentMatcher,
|
30
|
+
setSelectionAreas = _ref.setSelectionAreas,
|
31
|
+
spreadsheetRef = _ref.spreadsheetRef,
|
32
|
+
updateData = _ref.updateData;
|
33
|
+
return function (event) {
|
34
|
+
var key = event.key;
|
35
|
+
|
36
|
+
var updateSelectionAreaOnCellEditSubmit = function updateSelectionAreaOnCellEditSubmit(_ref2) {
|
37
|
+
var type = _ref2.type;
|
38
|
+
|
39
|
+
var submitEditChanges = function submitEditChanges() {
|
40
|
+
var prevCoords = previousState === null || previousState === void 0 ? void 0 : previousState.activeCellCoordinates;
|
41
|
+
var cellProps = rows[prevCoords === null || prevCoords === void 0 ? void 0 : prevCoords.row].cells[prevCoords === null || prevCoords === void 0 ? void 0 : prevCoords.column];
|
42
|
+
removeCellEditor();
|
43
|
+
updateData(prevCoords === null || prevCoords === void 0 ? void 0 : prevCoords.row, cellProps.column.id);
|
44
|
+
};
|
45
|
+
|
46
|
+
(0, _removeCellSelections.removeCellSelections)({
|
47
|
+
spreadsheetRef: spreadsheetRef
|
48
|
+
});
|
49
|
+
submitEditChanges();
|
50
|
+
var tempMatcher = (0, _uuidv.default)();
|
51
|
+
var newSelectionArea = {
|
52
|
+
row: type === 'Enter' ? activeCellCoordinates.row === rows.length - 1 ? activeCellCoordinates.row : activeCellCoordinates.row + 1 : activeCellCoordinates.row,
|
53
|
+
column: type === 'Tab' ? activeCellCoordinates.column === columns.length - 1 ? activeCellCoordinates.column : activeCellCoordinates.column + 1 : activeCellCoordinates.column
|
54
|
+
};
|
55
|
+
setSelectionAreas([{
|
56
|
+
point1: newSelectionArea,
|
57
|
+
point2: newSelectionArea,
|
58
|
+
matcher: tempMatcher,
|
59
|
+
areaCreated: false
|
60
|
+
}]);
|
61
|
+
setCurrentMatcher(tempMatcher);
|
62
|
+
cellEditorRulerRef.current.textContent = '';
|
63
|
+
};
|
64
|
+
|
65
|
+
if (key === 'Enter') {
|
66
|
+
updateSelectionAreaOnCellEditSubmit({
|
67
|
+
type: 'Enter'
|
68
|
+
});
|
69
|
+
setActiveCellCoordinates(function (prev) {
|
70
|
+
return _objectSpread(_objectSpread({}, prev), {}, {
|
71
|
+
row: prev.row === rows.length - 1 ? prev.row : prev.row + 1 // do not move to next cell below if we're already in the last row
|
72
|
+
|
73
|
+
});
|
74
|
+
});
|
75
|
+
}
|
76
|
+
|
77
|
+
if (key === 'Tab') {
|
78
|
+
event.preventDefault();
|
79
|
+
updateSelectionAreaOnCellEditSubmit({
|
80
|
+
type: 'Tab'
|
81
|
+
});
|
82
|
+
setActiveCellCoordinates(function (prev) {
|
83
|
+
return _objectSpread(_objectSpread({}, prev), {}, {
|
84
|
+
column: prev.column === columns.length - 1 ? prev.column : prev.column + 1 // do not move to next cell below if we're already in the last column
|
85
|
+
|
86
|
+
});
|
87
|
+
});
|
88
|
+
}
|
89
|
+
|
90
|
+
return;
|
91
|
+
};
|
92
|
+
};
|
93
|
+
|
94
|
+
exports.handleEditSubmit = handleEditSubmit;
|
@@ -7,10 +7,16 @@ Object.defineProperty(exports, "__esModule", {
|
|
7
7
|
});
|
8
8
|
exports.handleHeaderCellSelection = void 0;
|
9
9
|
|
10
|
+
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
11
|
+
|
12
|
+
var _deepCloneObject = require("../../../global/js/utils/deepCloneObject");
|
13
|
+
|
10
14
|
var _uuidv = _interopRequireDefault(require("../../../global/js/utils/uuidv4"));
|
11
15
|
|
12
16
|
var _removeCellSelections = require("./removeCellSelections");
|
13
17
|
|
18
|
+
var _checkActiveHeaderCell = require("./checkActiveHeaderCell");
|
19
|
+
|
14
20
|
/**
|
15
21
|
* Copyright IBM Corp. 2022, 2022
|
16
22
|
*
|
@@ -28,8 +34,16 @@ var handleHeaderCellSelection = function handleHeaderCellSelection(_ref) {
|
|
28
34
|
spreadsheetRef = _ref.spreadsheetRef,
|
29
35
|
index = _ref.index,
|
30
36
|
isKeyboard = _ref.isKeyboard,
|
31
|
-
setSelectionAreaData = _ref.setSelectionAreaData
|
32
|
-
|
37
|
+
setSelectionAreaData = _ref.setSelectionAreaData,
|
38
|
+
isHoldingCommandKey = _ref.isHoldingCommandKey;
|
39
|
+
|
40
|
+
if (!isHoldingCommandKey) {
|
41
|
+
setSelectionAreaData([]);
|
42
|
+
(0, _removeCellSelections.removeCellSelections)({
|
43
|
+
spreadsheetRef: spreadsheetRef
|
44
|
+
});
|
45
|
+
}
|
46
|
+
|
33
47
|
var rowValue = isKeyboard ? activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row : index;
|
34
48
|
var columnValue = isKeyboard ? activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column : index;
|
35
49
|
var point1 = {
|
@@ -47,15 +61,37 @@ var handleHeaderCellSelection = function handleHeaderCellSelection(_ref) {
|
|
47
61
|
column: type === 'column' ? columnValue : 0
|
48
62
|
});
|
49
63
|
setCurrentMatcher(tempMatcher);
|
50
|
-
|
51
|
-
spreadsheetRef: spreadsheetRef
|
52
|
-
});
|
53
|
-
setSelectionAreas([{
|
64
|
+
var newSelectionArea = {
|
54
65
|
point1: point1,
|
55
66
|
point2: point2,
|
56
67
|
areaCreated: false,
|
57
|
-
matcher: tempMatcher
|
58
|
-
|
68
|
+
matcher: tempMatcher,
|
69
|
+
header: {
|
70
|
+
type: type,
|
71
|
+
index: index
|
72
|
+
}
|
73
|
+
};
|
74
|
+
setSelectionAreas(function (prev) {
|
75
|
+
var selectionsClone = (0, _deepCloneObject.deepCloneObject)(prev);
|
76
|
+
|
77
|
+
if (isHoldingCommandKey) {
|
78
|
+
var selectionsFromHeaderCell = selectionsClone.filter(function (item) {
|
79
|
+
return item.header.type;
|
80
|
+
});
|
81
|
+
var previouslyCreatedHeaderSelection = selectionsFromHeaderCell.filter(function (item) {
|
82
|
+
return item.header.type === type;
|
83
|
+
});
|
84
|
+
var isHeaderPartOfPreviousSelection = (0, _checkActiveHeaderCell.checkActiveHeaderCell)(index, previouslyCreatedHeaderSelection, type); // Prevents row/column header selections from being created multiple times
|
85
|
+
|
86
|
+
if (previouslyCreatedHeaderSelection.length && isHeaderPartOfPreviousSelection) {
|
87
|
+
return prev;
|
88
|
+
}
|
89
|
+
|
90
|
+
return [].concat((0, _toConsumableArray2.default)(prev), [newSelectionArea]);
|
91
|
+
}
|
92
|
+
|
93
|
+
return [newSelectionArea];
|
94
|
+
});
|
59
95
|
};
|
60
96
|
|
61
97
|
exports.handleHeaderCellSelection = handleHeaderCellSelection;
|
@@ -1,18 +1,36 @@
|
|
1
1
|
"use strict";
|
2
2
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
4
|
+
|
3
5
|
Object.defineProperty(exports, "__esModule", {
|
4
6
|
value: true
|
5
7
|
});
|
6
|
-
exports.includesShift = exports.handleMultipleKeys = void 0;
|
8
|
+
exports.includesShift = exports.includesResourceKey = exports.handleMultipleKeys = void 0;
|
9
|
+
|
10
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
7
11
|
|
8
12
|
var _deepCloneObject = require("../../../global/js/utils/deepCloneObject");
|
9
13
|
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
14
|
+
var _uuidv = _interopRequireDefault(require("../../../global/js/utils/uuidv4"));
|
15
|
+
|
16
|
+
var _selectAllCells = require("./selectAllCells");
|
17
|
+
|
18
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
19
|
+
|
20
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
21
|
+
|
22
|
+
var includesResourceKey = function includesResourceKey(arr, usingMac) {
|
23
|
+
if (usingMac) {
|
24
|
+
return includesMeta(arr);
|
25
|
+
}
|
26
|
+
|
27
|
+
if (!usingMac) {
|
28
|
+
return includesControl(arr);
|
29
|
+
}
|
30
|
+
};
|
31
|
+
|
32
|
+
exports.includesResourceKey = includesResourceKey;
|
33
|
+
|
16
34
|
var includesShift = function includesShift(arr) {
|
17
35
|
if (arr.includes('ShiftLeft') || arr.includes('ShiftRight')) {
|
18
36
|
return true;
|
@@ -40,7 +58,7 @@ var includesControl = function includesControl(arr) {
|
|
40
58
|
};
|
41
59
|
|
42
60
|
var handleMultipleKeys = function handleMultipleKeys(_ref) {
|
43
|
-
var _selectionAreasClone
|
61
|
+
var _selectionAreasClone$, _selectionAreasClone$2, _selectionAreasClone$3;
|
44
62
|
|
45
63
|
var activeCellCoordinates = _ref.activeCellCoordinates,
|
46
64
|
event = _ref.event,
|
@@ -49,15 +67,21 @@ var handleMultipleKeys = function handleMultipleKeys(_ref) {
|
|
49
67
|
currentMatcher = _ref.currentMatcher,
|
50
68
|
rows = _ref.rows,
|
51
69
|
setSelectionAreas = _ref.setSelectionAreas,
|
52
|
-
columns = _ref.columns
|
70
|
+
columns = _ref.columns,
|
71
|
+
updateActiveCellCoordinates = _ref.updateActiveCellCoordinates,
|
72
|
+
spreadsheetRef = _ref.spreadsheetRef,
|
73
|
+
removeCellSelections = _ref.removeCellSelections,
|
74
|
+
blockClass = _ref.blockClass,
|
75
|
+
setCurrentMatcher = _ref.setCurrentMatcher,
|
76
|
+
usingMac = _ref.usingMac;
|
53
77
|
var selectionAreasClone = (0, _deepCloneObject.deepCloneObject)(selectionAreas);
|
54
78
|
var indexOfCurrentArea = selectionAreasClone.findIndex(function (item) {
|
55
79
|
return item.matcher === currentMatcher;
|
56
80
|
});
|
57
|
-
var pointToUpdate = (_selectionAreasClone$ = selectionAreasClone[indexOfCurrentArea]) !== null && _selectionAreasClone$ !== void 0 && _selectionAreasClone$.point2 ? selectionAreasClone[indexOfCurrentArea].point2 : selectionAreasClone[indexOfCurrentArea].point1; // Down + Shift
|
81
|
+
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
|
58
82
|
|
59
83
|
if (includesShift(keysPressedList) && keysPressedList.includes('ArrowDown') && keysPressedList.length === 2) {
|
60
|
-
if (rows.length - 1 === pointToUpdate.row) {
|
84
|
+
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') {
|
61
85
|
return;
|
62
86
|
}
|
63
87
|
|
@@ -72,7 +96,7 @@ var handleMultipleKeys = function handleMultipleKeys(_ref) {
|
|
72
96
|
|
73
97
|
|
74
98
|
if (includesShift(keysPressedList) && keysPressedList.includes('ArrowRight') && keysPressedList.length === 2) {
|
75
|
-
if (columns.length - 1 === pointToUpdate.column) {
|
99
|
+
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') {
|
76
100
|
return;
|
77
101
|
}
|
78
102
|
|
@@ -87,7 +111,7 @@ var handleMultipleKeys = function handleMultipleKeys(_ref) {
|
|
87
111
|
|
88
112
|
|
89
113
|
if (includesShift(keysPressedList) && keysPressedList.includes('ArrowUp') && keysPressedList.length === 2) {
|
90
|
-
if (pointToUpdate.row === 0) {
|
114
|
+
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') {
|
91
115
|
return;
|
92
116
|
}
|
93
117
|
|
@@ -102,7 +126,7 @@ var handleMultipleKeys = function handleMultipleKeys(_ref) {
|
|
102
126
|
|
103
127
|
|
104
128
|
if (includesShift(keysPressedList) && keysPressedList.includes('ArrowLeft') && keysPressedList.length === 2) {
|
105
|
-
if (pointToUpdate.column === 0) {
|
129
|
+
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') {
|
106
130
|
return;
|
107
131
|
}
|
108
132
|
|
@@ -116,7 +140,7 @@ var handleMultipleKeys = function handleMultipleKeys(_ref) {
|
|
116
140
|
} // CMD + a (select all)
|
117
141
|
|
118
142
|
|
119
|
-
if (
|
143
|
+
if (includesResourceKey(keysPressedList, usingMac) && keysPressedList.includes('KeyA')) {
|
120
144
|
event.preventDefault();
|
121
145
|
var selectionPoint1 = {
|
122
146
|
row: 0,
|
@@ -125,7 +149,20 @@ var handleMultipleKeys = function handleMultipleKeys(_ref) {
|
|
125
149
|
var selectionPoint2 = {
|
126
150
|
row: rows.length - 1,
|
127
151
|
column: columns.length - 1
|
128
|
-
};
|
152
|
+
}; // If indexOfCurrentArea is -1, it means the active cell is in a cell header position
|
153
|
+
|
154
|
+
if (indexOfCurrentArea === -1) {
|
155
|
+
(0, _selectAllCells.selectAllCells)({
|
156
|
+
ref: spreadsheetRef,
|
157
|
+
setCurrentMatcher: setCurrentMatcher,
|
158
|
+
setSelectionAreas: setSelectionAreas,
|
159
|
+
rows: rows,
|
160
|
+
columns: columns,
|
161
|
+
activeCellCoordinates: activeCellCoordinates,
|
162
|
+
updateActiveCellCoordinates: updateActiveCellCoordinates
|
163
|
+
});
|
164
|
+
}
|
165
|
+
|
129
166
|
selectionAreasClone[indexOfCurrentArea].point1 = selectionPoint1;
|
130
167
|
selectionAreasClone[indexOfCurrentArea].point2 = selectionPoint2;
|
131
168
|
selectionAreasClone[indexOfCurrentArea].areaCreated = false;
|
@@ -136,12 +173,35 @@ var handleMultipleKeys = function handleMultipleKeys(_ref) {
|
|
136
173
|
if (includesControl(keysPressedList) && keysPressedList.includes('Space')) {
|
137
174
|
var _selectionPoint = {
|
138
175
|
row: 0,
|
139
|
-
column: activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column
|
176
|
+
column: (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === 'header' ? 0 : activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column
|
140
177
|
};
|
141
178
|
var _selectionPoint2 = {
|
142
179
|
row: rows.length - 1,
|
143
|
-
column: activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column
|
144
|
-
};
|
180
|
+
column: (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === 'header' ? 0 : activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column
|
181
|
+
}; // If indexOfCurrentArea is -1, it means the active cell is in a cell header position
|
182
|
+
|
183
|
+
if (indexOfCurrentArea === -1) {
|
184
|
+
var tempMatcher = (0, _uuidv.default)();
|
185
|
+
var newSelectionArea = {
|
186
|
+
point1: _selectionPoint,
|
187
|
+
point2: _selectionPoint2,
|
188
|
+
areaCreated: false,
|
189
|
+
matcher: tempMatcher
|
190
|
+
};
|
191
|
+
|
192
|
+
var coordinatesClone = _objectSpread({}, activeCellCoordinates);
|
193
|
+
|
194
|
+
updateActiveCellCoordinates({
|
195
|
+
coords: coordinatesClone,
|
196
|
+
updatedValue: {
|
197
|
+
column: (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === 'header' ? 0 : activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column,
|
198
|
+
row: (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === 'header' ? 0 : activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row
|
199
|
+
}
|
200
|
+
});
|
201
|
+
setCurrentMatcher(tempMatcher);
|
202
|
+
return setSelectionAreas([newSelectionArea]);
|
203
|
+
}
|
204
|
+
|
145
205
|
selectionAreasClone[indexOfCurrentArea].point1 = _selectionPoint;
|
146
206
|
selectionAreasClone[indexOfCurrentArea].point2 = _selectionPoint2;
|
147
207
|
selectionAreasClone[indexOfCurrentArea].areaCreated = false;
|
@@ -151,17 +211,96 @@ var handleMultipleKeys = function handleMultipleKeys(_ref) {
|
|
151
211
|
|
152
212
|
if (includesShift(keysPressedList) && keysPressedList.includes('Space')) {
|
153
213
|
var _selectionPoint3 = {
|
154
|
-
row: activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row,
|
214
|
+
row: (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === 'header' ? 0 : activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row,
|
155
215
|
column: 0
|
156
216
|
};
|
157
217
|
var _selectionPoint4 = {
|
158
|
-
row: activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row,
|
218
|
+
row: (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === 'header' ? 0 : activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row,
|
159
219
|
column: columns.length - 1
|
160
|
-
};
|
220
|
+
}; // If indexOfCurrentArea is -1, it means the active cell is in a cell header position
|
221
|
+
|
222
|
+
if (indexOfCurrentArea === -1) {
|
223
|
+
var _tempMatcher = (0, _uuidv.default)();
|
224
|
+
|
225
|
+
var _newSelectionArea = {
|
226
|
+
point1: _selectionPoint3,
|
227
|
+
point2: _selectionPoint4,
|
228
|
+
areaCreated: false,
|
229
|
+
matcher: _tempMatcher
|
230
|
+
};
|
231
|
+
|
232
|
+
var _coordinatesClone = _objectSpread({}, activeCellCoordinates);
|
233
|
+
|
234
|
+
updateActiveCellCoordinates({
|
235
|
+
coords: _coordinatesClone,
|
236
|
+
updatedValue: {
|
237
|
+
column: (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === 'header' ? 0 : activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column,
|
238
|
+
row: (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === 'header' ? 0 : activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row
|
239
|
+
}
|
240
|
+
});
|
241
|
+
setCurrentMatcher(_tempMatcher);
|
242
|
+
return setSelectionAreas([_newSelectionArea]);
|
243
|
+
}
|
244
|
+
|
161
245
|
selectionAreasClone[indexOfCurrentArea].point1 = _selectionPoint3;
|
162
246
|
selectionAreasClone[indexOfCurrentArea].point2 = _selectionPoint4;
|
163
247
|
selectionAreasClone[indexOfCurrentArea].areaCreated = false;
|
164
248
|
setSelectionAreas(selectionAreasClone);
|
249
|
+
} // CMD + HOME (Selects first cell in first row)
|
250
|
+
|
251
|
+
|
252
|
+
if (includesResourceKey(keysPressedList, usingMac) && keysPressedList.includes('Home')) {
|
253
|
+
var scrollElement = spreadsheetRef.current.querySelector(".".concat(blockClass, "__list--container"));
|
254
|
+
scrollElement.scrollTop = 0;
|
255
|
+
|
256
|
+
var _coordinatesClone2 = _objectSpread({}, activeCellCoordinates);
|
257
|
+
|
258
|
+
removeCellSelections({
|
259
|
+
spreadsheetRef: spreadsheetRef
|
260
|
+
});
|
261
|
+
updateActiveCellCoordinates({
|
262
|
+
coords: _coordinatesClone2,
|
263
|
+
updatedValue: {
|
264
|
+
column: 0,
|
265
|
+
row: 0
|
266
|
+
}
|
267
|
+
});
|
268
|
+
} // CMD + END (Selects last cell in last row)
|
269
|
+
|
270
|
+
|
271
|
+
if (includesResourceKey(keysPressedList, usingMac) && keysPressedList.includes('End')) {
|
272
|
+
var _scrollElement = spreadsheetRef.current.querySelector(".".concat(blockClass, "__list--container"));
|
273
|
+
|
274
|
+
_scrollElement.scrollTop = _scrollElement.scrollHeight;
|
275
|
+
|
276
|
+
var _coordinatesClone3 = _objectSpread({}, activeCellCoordinates);
|
277
|
+
|
278
|
+
removeCellSelections({
|
279
|
+
spreadsheetRef: spreadsheetRef
|
280
|
+
});
|
281
|
+
var lastCellExists = !!rows[(rows === null || rows === void 0 ? void 0 : rows.length) - 1].cells[(columns === null || columns === void 0 ? void 0 : columns.length) - 1];
|
282
|
+
|
283
|
+
var updateToLastCell = function updateToLastCell() {
|
284
|
+
updateActiveCellCoordinates({
|
285
|
+
coords: _coordinatesClone3,
|
286
|
+
updatedValue: {
|
287
|
+
column: columns.length - 1,
|
288
|
+
row: rows.length - 1
|
289
|
+
}
|
290
|
+
});
|
291
|
+
}; // With the spreadsheet supporting virtualized data, it's possible that the last cell
|
292
|
+
// has never been rendered yet, if that's the case we scroll to the bottom of the spreadsheet
|
293
|
+
// and add a timeout to wait for the last row to render to the DOM before updating the active cell coordinates.
|
294
|
+
// If we're able to verify that the last row has been rendered, no timeout is used.
|
295
|
+
|
296
|
+
|
297
|
+
if (lastCellExists) {
|
298
|
+
updateToLastCell();
|
299
|
+
} else {
|
300
|
+
setTimeout(function () {
|
301
|
+
updateToLastCell();
|
302
|
+
}, 1);
|
303
|
+
}
|
165
304
|
}
|
166
305
|
};
|
167
306
|
|
@@ -0,0 +1,60 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
4
|
+
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
6
|
+
value: true
|
7
|
+
});
|
8
|
+
exports.selectAllCells = void 0;
|
9
|
+
|
10
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
11
|
+
|
12
|
+
var _removeCellSelections = require("./removeCellSelections");
|
13
|
+
|
14
|
+
var _uuidv = _interopRequireDefault(require("../../../global/js/utils/uuidv4"));
|
15
|
+
|
16
|
+
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; }
|
17
|
+
|
18
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
19
|
+
|
20
|
+
var selectAllCells = function selectAllCells(_ref) {
|
21
|
+
var activeCellCoordinates = _ref.activeCellCoordinates,
|
22
|
+
columns = _ref.columns,
|
23
|
+
setCurrentMatcher = _ref.setCurrentMatcher,
|
24
|
+
setSelectionAreas = _ref.setSelectionAreas,
|
25
|
+
ref = _ref.ref,
|
26
|
+
rows = _ref.rows,
|
27
|
+
updateActiveCellCoordinates = _ref.updateActiveCellCoordinates;
|
28
|
+
(0, _removeCellSelections.removeCellSelections)({
|
29
|
+
spreadsheetRef: ref
|
30
|
+
});
|
31
|
+
var selectionPoint1 = {
|
32
|
+
row: 0,
|
33
|
+
column: 0
|
34
|
+
};
|
35
|
+
var selectionPoint2 = {
|
36
|
+
row: rows.length - 1,
|
37
|
+
column: columns.length - 1
|
38
|
+
};
|
39
|
+
var tempMatcher = (0, _uuidv.default)();
|
40
|
+
var newSelectionArea = {
|
41
|
+
point1: selectionPoint1,
|
42
|
+
point2: selectionPoint2,
|
43
|
+
areaCreated: false,
|
44
|
+
matcher: tempMatcher
|
45
|
+
};
|
46
|
+
|
47
|
+
var coordinatesClone = _objectSpread({}, activeCellCoordinates);
|
48
|
+
|
49
|
+
updateActiveCellCoordinates({
|
50
|
+
coords: coordinatesClone,
|
51
|
+
updatedValue: {
|
52
|
+
column: 0,
|
53
|
+
row: 0
|
54
|
+
}
|
55
|
+
});
|
56
|
+
setCurrentMatcher(tempMatcher);
|
57
|
+
return setSelectionAreas([newSelectionArea]);
|
58
|
+
};
|
59
|
+
|
60
|
+
exports.selectAllCells = selectAllCells;
|
@@ -13,6 +13,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
|
|
13
13
|
|
14
14
|
var _react = _interopRequireWildcard(require("react"));
|
15
15
|
|
16
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
17
|
+
|
16
18
|
var _AddSelect = require("../AddSelect");
|
17
19
|
|
18
20
|
var _devtools = require("../../global/js/utils/devtools");
|
@@ -23,7 +25,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
|
|
23
25
|
|
24
26
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
25
27
|
|
26
|
-
// import PropTypes from 'prop-types';
|
27
28
|
var componentName = 'MultiAddSelect';
|
28
29
|
var MultiAddSelect = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
29
30
|
return /*#__PURE__*/_react.default.createElement(_AddSelect.AddSelect, (0, _extends2.default)({}, props, {
|
@@ -33,5 +34,152 @@ var MultiAddSelect = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
33
34
|
});
|
34
35
|
exports.MultiAddSelect = MultiAddSelect;
|
35
36
|
exports.MultiAddSelect = MultiAddSelect = _settings.pkg.checkComponentEnabled(MultiAddSelect, componentName);
|
36
|
-
MultiAddSelect.propTypes = {
|
37
|
+
MultiAddSelect.propTypes = {
|
38
|
+
/**
|
39
|
+
* optional class name
|
40
|
+
*/
|
41
|
+
className: _propTypes.default.string,
|
42
|
+
|
43
|
+
/**
|
44
|
+
* placeholder for column input filter
|
45
|
+
*/
|
46
|
+
columnInputPlaceholder: _propTypes.default.string,
|
47
|
+
|
48
|
+
/**
|
49
|
+
* text description that appears under the title
|
50
|
+
*/
|
51
|
+
description: _propTypes.default.string,
|
52
|
+
|
53
|
+
/**
|
54
|
+
* options to display in the global filter box. values are generated
|
55
|
+
* from the id which should correlate with a specific property in an
|
56
|
+
* item entry
|
57
|
+
*/
|
58
|
+
globalFilters: _propTypes.default.arrayOf(_propTypes.default.shape({
|
59
|
+
id: _propTypes.default.string,
|
60
|
+
label: _propTypes.default.string
|
61
|
+
})),
|
62
|
+
globalFiltersIconDescription: _propTypes.default.string,
|
63
|
+
|
64
|
+
/**
|
65
|
+
* placeholder text for the global filter dropdown
|
66
|
+
*/
|
67
|
+
globalFiltersPlaceholderText: _propTypes.default.string,
|
68
|
+
|
69
|
+
/**
|
70
|
+
* text for the global filter primary button
|
71
|
+
*/
|
72
|
+
globalFiltersPrimaryButtonText: _propTypes.default.string,
|
73
|
+
|
74
|
+
/**
|
75
|
+
* text for the global filter secondary button
|
76
|
+
*/
|
77
|
+
globalFiltersSecondaryButtonText: _propTypes.default.string,
|
78
|
+
|
79
|
+
/**
|
80
|
+
* label for global search input
|
81
|
+
*/
|
82
|
+
globalSearchLabel: _propTypes.default.string,
|
83
|
+
|
84
|
+
/**
|
85
|
+
* placeholder for global search input
|
86
|
+
*/
|
87
|
+
globalSearchPlaceholder: _propTypes.default.string,
|
88
|
+
|
89
|
+
/**
|
90
|
+
* title that displays in the sidebar / influencer
|
91
|
+
*/
|
92
|
+
influencerTitle: _propTypes.default.string,
|
93
|
+
|
94
|
+
/**
|
95
|
+
* object that contains the item data. for more information reference the
|
96
|
+
* "Structuring items" section in the docs tab
|
97
|
+
*/
|
98
|
+
items: _propTypes.default.shape({
|
99
|
+
modifiers: _propTypes.default.shape({
|
100
|
+
label: _propTypes.default.string,
|
101
|
+
options: _propTypes.default.array
|
102
|
+
}),
|
103
|
+
sortBy: _propTypes.default.array,
|
104
|
+
filterBy: _propTypes.default.array,
|
105
|
+
entries: _propTypes.default.arrayOf(_propTypes.default.shape({
|
106
|
+
avatar: _propTypes.default.shape({
|
107
|
+
alt: _propTypes.default.string,
|
108
|
+
icon: _propTypes.default.object,
|
109
|
+
src: _propTypes.default.string
|
110
|
+
}),
|
111
|
+
children: _propTypes.default.object,
|
112
|
+
icon: _propTypes.default.object,
|
113
|
+
id: _propTypes.default.string.isRequired,
|
114
|
+
subtitle: _propTypes.default.string,
|
115
|
+
title: _propTypes.default.string.isRequired,
|
116
|
+
value: _propTypes.default.string.isRequired
|
117
|
+
}))
|
118
|
+
}),
|
119
|
+
|
120
|
+
/**
|
121
|
+
* label that display above the list of items
|
122
|
+
*/
|
123
|
+
itemsLabel: _propTypes.default.string,
|
124
|
+
|
125
|
+
/**
|
126
|
+
* text to display when no results are found from the global search
|
127
|
+
*/
|
128
|
+
noResultsDescription: _propTypes.default.string,
|
129
|
+
|
130
|
+
/**
|
131
|
+
* title to display when no results are found from the global search
|
132
|
+
*/
|
133
|
+
noResultsTitle: _propTypes.default.string,
|
134
|
+
|
135
|
+
/**
|
136
|
+
* text body that displays in the sidebar when nothing is selected
|
137
|
+
*/
|
138
|
+
noSelectionDescription: _propTypes.default.string,
|
139
|
+
|
140
|
+
/**
|
141
|
+
* title that displays in the sidebar when nothing is selected
|
142
|
+
*/
|
143
|
+
noSelectionTitle: _propTypes.default.string,
|
144
|
+
|
145
|
+
/**
|
146
|
+
* function to call when the close button clicked
|
147
|
+
*/
|
148
|
+
onClose: _propTypes.default.func,
|
149
|
+
|
150
|
+
/**
|
151
|
+
* text for close button
|
152
|
+
*/
|
153
|
+
onCloseButtonText: _propTypes.default.string,
|
154
|
+
|
155
|
+
/**
|
156
|
+
* function to call when the submit button is clicked. returns a selection
|
157
|
+
*/
|
158
|
+
onSubmit: _propTypes.default.func,
|
159
|
+
|
160
|
+
/**
|
161
|
+
* text for the submit button
|
162
|
+
*/
|
163
|
+
onSubmitButtonText: _propTypes.default.string,
|
164
|
+
|
165
|
+
/**
|
166
|
+
* specifies if the component is open or not
|
167
|
+
*/
|
168
|
+
open: _propTypes.default.bool,
|
169
|
+
|
170
|
+
/**
|
171
|
+
* description for the remove item icon
|
172
|
+
*/
|
173
|
+
removeIconDescription: _propTypes.default.string,
|
174
|
+
|
175
|
+
/**
|
176
|
+
* text that displays when displaying filtered items
|
177
|
+
*/
|
178
|
+
searchResultsLabel: _propTypes.default.string,
|
179
|
+
|
180
|
+
/**
|
181
|
+
* header text
|
182
|
+
*/
|
183
|
+
title: _propTypes.default.string
|
184
|
+
};
|
37
185
|
MultiAddSelect.displayName = componentName;
|