@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
@@ -17,9 +17,10 @@ import PropTypes from 'prop-types';
|
|
17
17
|
import cx from 'classnames';
|
18
18
|
import { px } from '@carbon/layout';
|
19
19
|
import { pkg } from '../../settings';
|
20
|
+
import { usePreviousValue } from '../../global/js/hooks';
|
20
21
|
import { checkActiveHeaderCell } from './utils/checkActiveHeaderCell';
|
21
22
|
import { handleHeaderCellSelection } from './utils/handleHeaderCellSelection';
|
22
|
-
import {
|
23
|
+
import { selectAllCells } from './utils/selectAllCells';
|
23
24
|
var blockClass = "".concat(pkg.prefix, "--data-spreadsheet");
|
24
25
|
export var DataSpreadsheetHeader = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
25
26
|
var activeCellCoordinates = _ref.activeCellCoordinates,
|
@@ -33,7 +34,8 @@ export var DataSpreadsheetHeader = /*#__PURE__*/forwardRef(function (_ref, ref)
|
|
33
34
|
setCurrentMatcher = _ref.setCurrentMatcher,
|
34
35
|
setSelectionAreas = _ref.setSelectionAreas,
|
35
36
|
setSelectionAreaData = _ref.setSelectionAreaData,
|
36
|
-
rows = _ref.rows
|
37
|
+
rows = _ref.rows,
|
38
|
+
updateActiveCellCoordinates = _ref.updateActiveCellCoordinates;
|
37
39
|
|
38
40
|
var _useState = useState(0),
|
39
41
|
_useState2 = _slicedToArray(_useState, 2),
|
@@ -55,7 +57,8 @@ export var DataSpreadsheetHeader = /*#__PURE__*/forwardRef(function (_ref, ref)
|
|
55
57
|
}, [cellSize, ref, scrollBarSize, previousState === null || previousState === void 0 ? void 0 : previousState.cellSize]);
|
56
58
|
|
57
59
|
var handleColumnHeaderClick = function handleColumnHeaderClick(index) {
|
58
|
-
return function () {
|
60
|
+
return function (event) {
|
61
|
+
var isHoldingCommandKey = event.metaKey || event.ctrlKey;
|
59
62
|
handleHeaderCellSelection({
|
60
63
|
type: 'column',
|
61
64
|
activeCellCoordinates: activeCellCoordinates,
|
@@ -66,13 +69,27 @@ export var DataSpreadsheetHeader = /*#__PURE__*/forwardRef(function (_ref, ref)
|
|
66
69
|
setSelectionAreas: setSelectionAreas,
|
67
70
|
spreadsheetRef: ref,
|
68
71
|
index: index,
|
69
|
-
setSelectionAreaData: setSelectionAreaData
|
72
|
+
setSelectionAreaData: setSelectionAreaData,
|
73
|
+
isHoldingCommandKey: isHoldingCommandKey
|
70
74
|
});
|
71
75
|
};
|
72
76
|
};
|
73
77
|
|
78
|
+
var handleSelectAllClick = function handleSelectAllClick() {
|
79
|
+
selectAllCells({
|
80
|
+
ref: ref,
|
81
|
+
setCurrentMatcher: setCurrentMatcher,
|
82
|
+
setSelectionAreas: setSelectionAreas,
|
83
|
+
rows: rows,
|
84
|
+
columns: columns,
|
85
|
+
activeCellCoordinates: activeCellCoordinates,
|
86
|
+
updateActiveCellCoordinates: updateActiveCellCoordinates
|
87
|
+
});
|
88
|
+
};
|
89
|
+
|
74
90
|
return /*#__PURE__*/React.createElement("div", {
|
75
|
-
className: cx("".concat(blockClass, "__header--container"))
|
91
|
+
className: cx("".concat(blockClass, "__header--container")),
|
92
|
+
role: "rowgroup"
|
76
93
|
}, headerGroups.map(function (headerGroup, index) {
|
77
94
|
return /*#__PURE__*/React.createElement("div", _extends({
|
78
95
|
key: "header_".concat(index)
|
@@ -88,10 +105,12 @@ export var DataSpreadsheetHeader = /*#__PURE__*/forwardRef(function (_ref, ref)
|
|
88
105
|
height: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeight
|
89
106
|
}
|
90
107
|
}, /*#__PURE__*/React.createElement("button", {
|
108
|
+
id: "".concat(blockClass, "__cell--header--header"),
|
91
109
|
"data-row-index": "header",
|
92
110
|
"data-column-index": "header",
|
93
111
|
type: "button",
|
94
112
|
tabIndex: -1,
|
113
|
+
onClick: handleSelectAllClick,
|
95
114
|
className: cx("".concat(blockClass, "__th"), "".concat(blockClass, "--interactive-cell-element"), "".concat(blockClass, "__th--select-all"), _defineProperty({}, "".concat(blockClass, "__th--active-header"), (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === 'header' && (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === 'header'))
|
96
115
|
}, "\xA0")), headerGroup.headers.map(function (column, index) {
|
97
116
|
return /*#__PURE__*/React.createElement("div", _extends({
|
@@ -99,6 +118,7 @@ export var DataSpreadsheetHeader = /*#__PURE__*/forwardRef(function (_ref, ref)
|
|
99
118
|
role: "columnheader",
|
100
119
|
className: "".concat(blockClass, "__columnheader")
|
101
120
|
}, column.getHeaderProps()), /*#__PURE__*/React.createElement("button", {
|
121
|
+
id: "".concat(blockClass, "__cell--header--").concat(index),
|
102
122
|
"data-row-index": "header",
|
103
123
|
"data-column-index": index,
|
104
124
|
tabIndex: -1,
|
@@ -178,5 +198,10 @@ DataSpreadsheetHeader.propTypes = {
|
|
178
198
|
/**
|
179
199
|
* Setter fn for selectionAreas value
|
180
200
|
*/
|
181
|
-
setSelectionAreas: PropTypes.func
|
201
|
+
setSelectionAreas: PropTypes.func,
|
202
|
+
|
203
|
+
/**
|
204
|
+
* Function used to update the active cell coordinates
|
205
|
+
*/
|
206
|
+
updateActiveCellCoordinates: PropTypes.func
|
182
207
|
};
|
@@ -7,4 +7,5 @@
|
|
7
7
|
export { useMoveActiveCell } from './useMoveActiveCell';
|
8
8
|
export { useMultipleKeyTracking } from './useMultipleKeyTracking';
|
9
9
|
export { useResetSpreadsheetFocus } from './useResetSpreadsheetFocus';
|
10
|
-
export { useSpreadsheetOutsideClick } from './useSpreadsheetOutsideClick';
|
10
|
+
export { useSpreadsheetOutsideClick } from './useSpreadsheetOutsideClick';
|
11
|
+
export { useSpreadsheetEdit } from './useSpreadsheetEdit';
|
@@ -9,6 +9,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
9
9
|
*/
|
10
10
|
import { useEffect, useState } from 'react';
|
11
11
|
import { usePreviousValue } from '../../../global/js/hooks';
|
12
|
+
import { includesResourceKey } from '../utils/handleMultipleKeys';
|
12
13
|
|
13
14
|
var hasFocus = function hasFocus() {
|
14
15
|
return typeof document !== 'undefined' && document.hasFocus();
|
@@ -19,15 +20,20 @@ export var useMultipleKeyTracking = function useMultipleKeyTracking(_ref) {
|
|
19
20
|
containerHasFocus = _ref.containerHasFocus,
|
20
21
|
isEditing = _ref.isEditing;
|
21
22
|
|
22
|
-
var _useState = useState(
|
23
|
+
var _useState = useState(''),
|
23
24
|
_useState2 = _slicedToArray(_useState, 2),
|
24
|
-
|
25
|
-
|
25
|
+
usingMac = _useState2[0],
|
26
|
+
setUsingMac = _useState2[1];
|
26
27
|
|
27
|
-
var _useState3 = useState(
|
28
|
+
var _useState3 = useState(hasFocus),
|
28
29
|
_useState4 = _slicedToArray(_useState3, 2),
|
29
|
-
|
30
|
-
|
30
|
+
windowFocused = _useState4[0],
|
31
|
+
setWindowFocused = _useState4[1];
|
32
|
+
|
33
|
+
var _useState5 = useState([]),
|
34
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
35
|
+
keysPressedList = _useState6[0],
|
36
|
+
setKeysPressedList = _useState6[1];
|
31
37
|
|
32
38
|
var previousState = usePreviousValue({
|
33
39
|
isEditing: isEditing,
|
@@ -36,6 +42,14 @@ export var useMultipleKeyTracking = function useMultipleKeyTracking(_ref) {
|
|
36
42
|
// we need to clear out the keysPressedList
|
37
43
|
|
38
44
|
useEffect(function () {
|
45
|
+
var userAgentString = window.navigator.userAgent;
|
46
|
+
|
47
|
+
if (userAgentString.includes('Macintosh')) {
|
48
|
+
setUsingMac(true);
|
49
|
+
} else {
|
50
|
+
setUsingMac(false);
|
51
|
+
}
|
52
|
+
|
39
53
|
setWindowFocused(hasFocus());
|
40
54
|
|
41
55
|
var onWindowFocus = function onWindowFocus() {
|
@@ -61,6 +75,19 @@ export var useMultipleKeyTracking = function useMultipleKeyTracking(_ref) {
|
|
61
75
|
// Prevent multiple keys of the same type being added to our keysPressedList array
|
62
76
|
if (keysPressedList.includes(event.code)) {
|
63
77
|
return;
|
78
|
+
} // Because keyup events are lost when using the Command key
|
79
|
+
// we need to remove the previously pressed keys so that we
|
80
|
+
// do not have keys in the pressed list that should not be
|
81
|
+
|
82
|
+
|
83
|
+
if (includesResourceKey(keysPressedList, usingMac) && keysPressedList.length > 1) {
|
84
|
+
var clonedKeys = _toConsumableArray(keysPressedList);
|
85
|
+
|
86
|
+
var filteredClonedKeys = clonedKeys.filter(function (item) {
|
87
|
+
return item === 'MetaLeft' || item === 'MetaRight';
|
88
|
+
});
|
89
|
+
filteredClonedKeys.push(event.code);
|
90
|
+
return setKeysPressedList(_toConsumableArray(new Set(filteredClonedKeys)));
|
64
91
|
}
|
65
92
|
|
66
93
|
var tempKeys = _toConsumableArray(keysPressedList);
|
@@ -103,9 +130,10 @@ export var useMultipleKeyTracking = function useMultipleKeyTracking(_ref) {
|
|
103
130
|
setKeysPressedList([]);
|
104
131
|
}
|
105
132
|
}
|
106
|
-
}, [keysPressedList, containerHasFocus, ref, isEditing, previousState === null || previousState === void 0 ? void 0 : previousState.isEditing, windowFocused, previousState === null || previousState === void 0 ? void 0 : previousState.windowFocused]);
|
133
|
+
}, [keysPressedList, containerHasFocus, ref, isEditing, previousState === null || previousState === void 0 ? void 0 : previousState.isEditing, windowFocused, previousState === null || previousState === void 0 ? void 0 : previousState.windowFocused, usingMac]);
|
107
134
|
return {
|
108
135
|
keysPressedList: keysPressedList,
|
109
|
-
windowFocused: windowFocused
|
136
|
+
windowFocused: windowFocused,
|
137
|
+
usingMac: usingMac
|
110
138
|
};
|
111
139
|
};
|
@@ -0,0 +1,68 @@
|
|
1
|
+
// /**
|
2
|
+
// * Copyright IBM Corp. 2022, 2022
|
3
|
+
// *
|
4
|
+
// * This source code is licensed under the Apache-2.0 license found in the
|
5
|
+
// * LICENSE file in the root directory of this source tree.
|
6
|
+
// */
|
7
|
+
import { useEffect } from 'react';
|
8
|
+
import { px } from '@carbon/layout';
|
9
|
+
export var useSpreadsheetEdit = function useSpreadsheetEdit(_ref) {
|
10
|
+
var isEditing = _ref.isEditing,
|
11
|
+
rows = _ref.rows,
|
12
|
+
activeCellCoordinates = _ref.activeCellCoordinates,
|
13
|
+
activeCellRef = _ref.activeCellRef,
|
14
|
+
cellEditorRef = _ref.cellEditorRef,
|
15
|
+
cellEditorRulerRef = _ref.cellEditorRulerRef,
|
16
|
+
columns = _ref.columns,
|
17
|
+
defaultColumn = _ref.defaultColumn,
|
18
|
+
cellEditorValue = _ref.cellEditorValue;
|
19
|
+
useEffect(function () {
|
20
|
+
if (isEditing) {
|
21
|
+
var _rows$activeCellCoord, _cellProps$column, _cellEditorRef$curren;
|
22
|
+
|
23
|
+
var cellProps = (_rows$activeCellCoord = rows[activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row]) === null || _rows$activeCellCoord === void 0 ? void 0 : _rows$activeCellCoord.cells[activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column];
|
24
|
+
var activeCellLeftPosition = activeCellRef === null || activeCellRef === void 0 ? void 0 : activeCellRef.current.style.left;
|
25
|
+
var activeCellTopPosition = activeCellRef === null || activeCellRef === void 0 ? void 0 : activeCellRef.current.style.top;
|
26
|
+
cellEditorRef.current.style.left = activeCellLeftPosition;
|
27
|
+
cellEditorRef.current.style.top = activeCellTopPosition;
|
28
|
+
cellEditorRef.current.style.display = 'block';
|
29
|
+
cellEditorRef.current.style.width = activeCellRef === null || activeCellRef === void 0 ? void 0 : activeCellRef.current.style.width;
|
30
|
+
cellEditorRef.current.style.height = activeCellRef === null || activeCellRef === void 0 ? void 0 : activeCellRef.current.style.height;
|
31
|
+
cellEditorRef.current.style.paddingTop = "".concat((parseInt(activeCellRef === null || activeCellRef === void 0 ? void 0 : activeCellRef.current.style.height) - 16) / 2 - 1, "px"); // calculate paddingTop based on cellHeight which could be variable depending on the cellSize prop
|
32
|
+
|
33
|
+
cellEditorRef.current.style.textAlign = (cellProps === null || cellProps === void 0 ? void 0 : (_cellProps$column = cellProps.column) === null || _cellProps$column === void 0 ? void 0 : _cellProps$column.placement) === 'right' ? 'right' : 'left';
|
34
|
+
(_cellEditorRef$curren = cellEditorRef.current) === null || _cellEditorRef$curren === void 0 ? void 0 : _cellEditorRef$curren.focus();
|
35
|
+
var rulerWidth = cellEditorRulerRef.current.offsetWidth;
|
36
|
+
var cellWidth = activeCellRef.current.offsetWidth;
|
37
|
+
|
38
|
+
if (rulerWidth >= cellWidth) {
|
39
|
+
var widthMultiplier = Math.floor(rulerWidth / cellWidth) + 1;
|
40
|
+
var startingColumnPosition = activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column;
|
41
|
+
var startingRowPosition = activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row;
|
42
|
+
var totalColumns = columns.length;
|
43
|
+
var totalRows = rows.length;
|
44
|
+
var totalMultiplierPossible = totalColumns - startingColumnPosition;
|
45
|
+
var totalCellEditorMaxHeight = (totalRows - startingRowPosition) * defaultColumn.rowHeight;
|
46
|
+
cellEditorRef.current.style.maxHeight = px(totalCellEditorMaxHeight);
|
47
|
+
cellEditorRef.current.style.width = px(cellWidth * (widthMultiplier <= totalMultiplierPossible ? widthMultiplier : totalMultiplierPossible));
|
48
|
+
cellEditorRef.current.style.height = px(cellEditorRef.current.scrollHeight); // adds dynamic height to cell editor
|
49
|
+
// Cell editor has reached max height, we need to add the scrolling back.
|
50
|
+
// We also need to subtract 1 to account for the fact that the cell editor
|
51
|
+
// is placed one pixel below the cell being edited to account for the border
|
52
|
+
|
53
|
+
if (cellEditorRef.current.clientHeight === totalCellEditorMaxHeight - 1) {
|
54
|
+
cellEditorRef.current.style.overflow = 'auto';
|
55
|
+
} else {
|
56
|
+
cellEditorRef.current.style.overflow = 'hidden';
|
57
|
+
}
|
58
|
+
}
|
59
|
+
}
|
60
|
+
|
61
|
+
if (!isEditing) {
|
62
|
+
cellEditorRef.current.style.overflow = 'hidden';
|
63
|
+
cellEditorRef.current.style.display = 'none';
|
64
|
+
cellEditorRef.current.blur();
|
65
|
+
activeCellRef.current.focus();
|
66
|
+
}
|
67
|
+
}, [isEditing, activeCellCoordinates, rows, cellEditorValue, columns.length, defaultColumn, cellEditorValue, activeCellRef, cellEditorRef, cellEditorRulerRef]);
|
68
|
+
};
|
@@ -6,22 +6,34 @@
|
|
6
6
|
*/
|
7
7
|
import { px } from '@carbon/layout';
|
8
8
|
import { deepCloneObject } from '../../../global/js/utils/deepCloneObject';
|
9
|
+
import { getSelectionAreaPoints } from './getSelectionAreaPoints';
|
9
10
|
export var createCellSelectionArea = function createCellSelectionArea(_ref) {
|
10
|
-
var
|
11
|
+
var ref = _ref.ref,
|
12
|
+
area = _ref.area,
|
11
13
|
blockClass = _ref.blockClass,
|
12
14
|
defaultColumn = _ref.defaultColumn,
|
13
15
|
selectionAreas = _ref.selectionAreas,
|
14
|
-
setSelectionAreas = _ref.setSelectionAreas
|
15
|
-
|
16
|
-
|
17
|
-
var
|
18
|
-
|
16
|
+
setSelectionAreas = _ref.setSelectionAreas,
|
17
|
+
setActiveCellInsideSelectionArea = _ref.setActiveCellInsideSelectionArea;
|
18
|
+
|
19
|
+
var _getSelectionAreaPoin = getSelectionAreaPoints(area),
|
20
|
+
lowestColumnIndex = _getSelectionAreaPoin.lowestColumnIndex,
|
21
|
+
lowestRowIndex = _getSelectionAreaPoin.lowestRowIndex,
|
22
|
+
greatestColumnIndex = _getSelectionAreaPoin.greatestColumnIndex,
|
23
|
+
greatestRowIndex = _getSelectionAreaPoin.greatestRowIndex;
|
24
|
+
|
25
|
+
if (greatestRowIndex - lowestRowIndex > 0 || greatestColumnIndex - lowestColumnIndex > 0) {
|
26
|
+
setActiveCellInsideSelectionArea(true);
|
27
|
+
var activeCellElement = ref.current.querySelector(".".concat(blockClass, "__active-cell--highlight"));
|
28
|
+
activeCellElement.setAttribute('data-selection-id', area.matcher);
|
29
|
+
}
|
30
|
+
|
19
31
|
var point1Element = document.querySelector("[data-row-index=\"".concat(area.point1.row, "\"][data-column-index=\"").concat(area.point1.column, "\"]")) || document.querySelector(".".concat(blockClass, "__body--td")); // if we can't find the point1 element (this can happen in the case where a virtualized row is not present anymore in the DOM), we get the default height/width of the first body cell we find
|
20
32
|
|
21
33
|
var selectionAreaCellWidth = point1Element.offsetWidth;
|
22
34
|
var selectionAreaCellHeight = point1Element.offsetHeight;
|
23
|
-
var selectionAreaTotalWidth = selectionAreaCellWidth * (
|
24
|
-
var selectionAreaTotalHeight = selectionAreaCellHeight * (
|
35
|
+
var selectionAreaTotalWidth = selectionAreaCellWidth * (greatestColumnIndex - lowestColumnIndex + 1);
|
36
|
+
var selectionAreaTotalHeight = selectionAreaCellHeight * (greatestRowIndex - lowestRowIndex + 1);
|
25
37
|
var bodyContainer = document.querySelector(".".concat(blockClass, "__list--container")).firstElementChild;
|
26
38
|
var placementElement = bodyContainer.querySelector("[data-row-index=\"".concat(lowestRowIndex, "\"][data-column-index=\"").concat(lowestColumnIndex, "\"]"));
|
27
39
|
var relativePosition = {
|
@@ -0,0 +1,18 @@
|
|
1
|
+
/**
|
2
|
+
* Copyright IBM Corp. 2022, 2022
|
3
|
+
*
|
4
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
6
|
+
*/
|
7
|
+
export var getSelectionAreaPoints = function getSelectionAreaPoints(area) {
|
8
|
+
var greatestRowIndex = Math.max(area.point1.row, area.point2.row);
|
9
|
+
var greatestColumnIndex = Math.max(area.point1.column, area.point2.column);
|
10
|
+
var lowestRowIndex = Math.min(area.point1.row, area.point2.row);
|
11
|
+
var lowestColumnIndex = Math.min(area.point1.column, area.point2.column);
|
12
|
+
return {
|
13
|
+
greatestRowIndex: greatestRowIndex,
|
14
|
+
greatestColumnIndex: greatestColumnIndex,
|
15
|
+
lowestColumnIndex: lowestColumnIndex,
|
16
|
+
lowestRowIndex: lowestRowIndex
|
17
|
+
};
|
18
|
+
};
|
@@ -0,0 +1,121 @@
|
|
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 { getSelectionAreaPoints } from './getSelectionAreaPoints';
|
14
|
+
export var handleActiveCellInSelectionEnter = function handleActiveCellInSelectionEnter(_ref) {
|
15
|
+
var activeCellInsideSelectionArea = _ref.activeCellInsideSelectionArea,
|
16
|
+
activeCellCoordinates = _ref.activeCellCoordinates,
|
17
|
+
activeCellRef = _ref.activeCellRef,
|
18
|
+
selectionAreas = _ref.selectionAreas,
|
19
|
+
updateActiveCellCoordinates = _ref.updateActiveCellCoordinates;
|
20
|
+
|
21
|
+
if (!activeCellInsideSelectionArea) {
|
22
|
+
return;
|
23
|
+
}
|
24
|
+
|
25
|
+
var activeCellSelectionId = activeCellRef.current.getAttribute('data-selection-id');
|
26
|
+
var activeCellIndexInSelectionAreas = selectionAreas.findIndex(function (item) {
|
27
|
+
return item.matcher === activeCellSelectionId;
|
28
|
+
});
|
29
|
+
var selectionAreaToNavigate = selectionAreas[activeCellIndexInSelectionAreas];
|
30
|
+
|
31
|
+
var _getSelectionAreaPoin = getSelectionAreaPoints(selectionAreaToNavigate),
|
32
|
+
lowestColumnIndex = _getSelectionAreaPoin.lowestColumnIndex,
|
33
|
+
lowestRowIndex = _getSelectionAreaPoin.lowestRowIndex,
|
34
|
+
greatestColumnIndex = _getSelectionAreaPoin.greatestColumnIndex,
|
35
|
+
greatestRowIndex = _getSelectionAreaPoin.greatestRowIndex; // Move active cell down one row if possible
|
36
|
+
|
37
|
+
|
38
|
+
var coordinatesClone = _objectSpread({}, activeCellCoordinates);
|
39
|
+
|
40
|
+
if ((activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) < greatestRowIndex) {
|
41
|
+
updateActiveCellCoordinates({
|
42
|
+
coords: coordinatesClone,
|
43
|
+
updatedValue: {
|
44
|
+
row: (coordinatesClone === null || coordinatesClone === void 0 ? void 0 : coordinatesClone.row) + 1
|
45
|
+
},
|
46
|
+
optOutOfSelectionAreaUpdate: true
|
47
|
+
});
|
48
|
+
} // Move active cell to next column of selection area if it exists
|
49
|
+
// If not, find the next selection area and update active cell to
|
50
|
+
// be the first cell in that selection
|
51
|
+
|
52
|
+
|
53
|
+
if ((activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === greatestRowIndex) {
|
54
|
+
if ((activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) < greatestColumnIndex) {
|
55
|
+
updateActiveCellCoordinates({
|
56
|
+
coords: coordinatesClone,
|
57
|
+
updatedValue: {
|
58
|
+
column: (coordinatesClone === null || coordinatesClone === void 0 ? void 0 : coordinatesClone.column) + 1,
|
59
|
+
row: lowestRowIndex
|
60
|
+
},
|
61
|
+
optOutOfSelectionAreaUpdate: true
|
62
|
+
});
|
63
|
+
} // Move to next selection area if there is one, or back to
|
64
|
+
// the beginning of the current selection
|
65
|
+
|
66
|
+
|
67
|
+
if ((activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === greatestColumnIndex) {
|
68
|
+
if (selectionAreas.length > 1) {
|
69
|
+
if (selectionAreas[activeCellIndexInSelectionAreas + 1]) {
|
70
|
+
// Update activeCellRef data-selection-id attribute to the matcher of the next selection area
|
71
|
+
activeCellRef.current.setAttribute('data-selection-id', selectionAreas[activeCellIndexInSelectionAreas + 1].matcher);
|
72
|
+
var nextSelectionArea = selectionAreas[activeCellIndexInSelectionAreas + 1];
|
73
|
+
|
74
|
+
var _getSelectionAreaPoin2 = getSelectionAreaPoints(nextSelectionArea),
|
75
|
+
_lowestColumnIndex = _getSelectionAreaPoin2.lowestColumnIndex,
|
76
|
+
_lowestRowIndex = _getSelectionAreaPoin2.lowestRowIndex;
|
77
|
+
|
78
|
+
updateActiveCellCoordinates({
|
79
|
+
coords: coordinatesClone,
|
80
|
+
updatedValue: {
|
81
|
+
column: _lowestColumnIndex,
|
82
|
+
row: _lowestRowIndex
|
83
|
+
},
|
84
|
+
optOutOfSelectionAreaUpdate: true
|
85
|
+
});
|
86
|
+
return;
|
87
|
+
} else {
|
88
|
+
// There are multiple selection areas and the active cell is in the last one
|
89
|
+
// So we need to move the active cell to the first cell in the first selection area
|
90
|
+
activeCellRef.current.setAttribute('data-selection-id', selectionAreas[0].matcher);
|
91
|
+
var firstSelectionArea = selectionAreas[0];
|
92
|
+
|
93
|
+
var _getSelectionAreaPoin3 = getSelectionAreaPoints(firstSelectionArea),
|
94
|
+
_lowestColumnIndex2 = _getSelectionAreaPoin3.lowestColumnIndex,
|
95
|
+
_lowestRowIndex2 = _getSelectionAreaPoin3.lowestRowIndex;
|
96
|
+
|
97
|
+
updateActiveCellCoordinates({
|
98
|
+
coords: coordinatesClone,
|
99
|
+
updatedValue: {
|
100
|
+
column: _lowestColumnIndex2,
|
101
|
+
row: _lowestRowIndex2
|
102
|
+
},
|
103
|
+
optOutOfSelectionAreaUpdate: true
|
104
|
+
});
|
105
|
+
}
|
106
|
+
} // Only one selection area, go back to first cell in the selection
|
107
|
+
|
108
|
+
|
109
|
+
if (selectionAreas.length === 1) {
|
110
|
+
return updateActiveCellCoordinates({
|
111
|
+
coords: coordinatesClone,
|
112
|
+
updatedValue: {
|
113
|
+
column: lowestColumnIndex,
|
114
|
+
row: lowestRowIndex
|
115
|
+
},
|
116
|
+
optOutOfSelectionAreaUpdate: true
|
117
|
+
});
|
118
|
+
}
|
119
|
+
}
|
120
|
+
}
|
121
|
+
};
|
@@ -0,0 +1,108 @@
|
|
1
|
+
/**
|
2
|
+
* Copyright IBM Corp. 2022, 2022
|
3
|
+
*
|
4
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
6
|
+
*/
|
7
|
+
import { getSelectionAreaPoints } from './getSelectionAreaPoints';
|
8
|
+
export var handleActiveCellInSelectionTab = function handleActiveCellInSelectionTab(_ref) {
|
9
|
+
var activeCellInsideSelectionArea = _ref.activeCellInsideSelectionArea,
|
10
|
+
activeCellCoordinates = _ref.activeCellCoordinates,
|
11
|
+
activeCellRef = _ref.activeCellRef,
|
12
|
+
selectionAreas = _ref.selectionAreas,
|
13
|
+
updateActiveCellCoordinates = _ref.updateActiveCellCoordinates;
|
14
|
+
|
15
|
+
if (!activeCellInsideSelectionArea) {
|
16
|
+
return;
|
17
|
+
}
|
18
|
+
|
19
|
+
var activeCellSelectionId = activeCellRef.current.getAttribute('data-selection-id');
|
20
|
+
var activeCellIndexInSelectionAreas = selectionAreas.findIndex(function (item) {
|
21
|
+
return item.matcher === activeCellSelectionId;
|
22
|
+
});
|
23
|
+
var selectionAreaToNavigate = selectionAreas[activeCellIndexInSelectionAreas];
|
24
|
+
|
25
|
+
var _getSelectionAreaPoin = getSelectionAreaPoints(selectionAreaToNavigate),
|
26
|
+
lowestColumnIndex = _getSelectionAreaPoin.lowestColumnIndex,
|
27
|
+
lowestRowIndex = _getSelectionAreaPoin.lowestRowIndex,
|
28
|
+
greatestColumnIndex = _getSelectionAreaPoin.greatestColumnIndex,
|
29
|
+
greatestRowIndex = _getSelectionAreaPoin.greatestRowIndex; // Move active cell to next column in selection area
|
30
|
+
|
31
|
+
|
32
|
+
if ((activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) < greatestColumnIndex) {
|
33
|
+
updateActiveCellCoordinates({
|
34
|
+
updatedValue: {
|
35
|
+
column: (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) + 1
|
36
|
+
},
|
37
|
+
optOutOfSelectionAreaUpdate: true
|
38
|
+
});
|
39
|
+
} // Move active cell to next row of selection area if it exists
|
40
|
+
// If not, find the next selection area and update active cell to
|
41
|
+
// be the first cell in that selection
|
42
|
+
|
43
|
+
|
44
|
+
if ((activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === greatestColumnIndex) {
|
45
|
+
if ((activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) < greatestRowIndex) {
|
46
|
+
updateActiveCellCoordinates({
|
47
|
+
updatedValue: {
|
48
|
+
column: lowestColumnIndex,
|
49
|
+
row: (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) + 1
|
50
|
+
},
|
51
|
+
optOutOfSelectionAreaUpdate: true
|
52
|
+
});
|
53
|
+
} // Move to next selection area if there is on, or back to
|
54
|
+
// the beginning of the current selection
|
55
|
+
|
56
|
+
|
57
|
+
if ((activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === greatestRowIndex) {
|
58
|
+
if (selectionAreas.length > 1) {
|
59
|
+
if (selectionAreas[activeCellIndexInSelectionAreas + 1]) {
|
60
|
+
// Update activeCellRef data-selection-id attribute to the matcher of the next selection area
|
61
|
+
activeCellRef.current.setAttribute('data-selection-id', selectionAreas[activeCellIndexInSelectionAreas + 1].matcher);
|
62
|
+
var nextSelectionArea = selectionAreas[activeCellIndexInSelectionAreas + 1];
|
63
|
+
|
64
|
+
var _getSelectionAreaPoin2 = getSelectionAreaPoints(nextSelectionArea),
|
65
|
+
_lowestColumnIndex = _getSelectionAreaPoin2.lowestColumnIndex,
|
66
|
+
_lowestRowIndex = _getSelectionAreaPoin2.lowestRowIndex;
|
67
|
+
|
68
|
+
updateActiveCellCoordinates({
|
69
|
+
updatedValue: {
|
70
|
+
column: _lowestColumnIndex,
|
71
|
+
row: _lowestRowIndex
|
72
|
+
},
|
73
|
+
optOutOfSelectionAreaUpdate: true
|
74
|
+
});
|
75
|
+
return;
|
76
|
+
} else {
|
77
|
+
// There are multiple selection areas and the active cell is in the last one
|
78
|
+
// So we need to move the active cell to the first cell in the first selection area
|
79
|
+
activeCellRef.current.setAttribute('data-selection-id', selectionAreas[0].matcher);
|
80
|
+
var firstSelectionArea = selectionAreas[0];
|
81
|
+
|
82
|
+
var _getSelectionAreaPoin3 = getSelectionAreaPoints(firstSelectionArea),
|
83
|
+
_lowestColumnIndex2 = _getSelectionAreaPoin3.lowestColumnIndex,
|
84
|
+
_lowestRowIndex2 = _getSelectionAreaPoin3.lowestRowIndex;
|
85
|
+
|
86
|
+
updateActiveCellCoordinates({
|
87
|
+
updatedValue: {
|
88
|
+
column: _lowestColumnIndex2,
|
89
|
+
row: _lowestRowIndex2
|
90
|
+
},
|
91
|
+
optOutOfSelectionAreaUpdate: true
|
92
|
+
});
|
93
|
+
}
|
94
|
+
} // Only one selection area, go back to first cell in the selection
|
95
|
+
|
96
|
+
|
97
|
+
if (selectionAreas.length === 1) {
|
98
|
+
return updateActiveCellCoordinates({
|
99
|
+
updatedValue: {
|
100
|
+
column: lowestColumnIndex,
|
101
|
+
row: lowestRowIndex
|
102
|
+
},
|
103
|
+
optOutOfSelectionAreaUpdate: true
|
104
|
+
});
|
105
|
+
}
|
106
|
+
}
|
107
|
+
}
|
108
|
+
};
|
@@ -0,0 +1,87 @@
|
|
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'; // Update the data
|
15
|
+
|
16
|
+
export var handleEditSubmit = function handleEditSubmit(_ref) {
|
17
|
+
var activeCellCoordinates = _ref.activeCellCoordinates,
|
18
|
+
cellEditorRulerRef = _ref.cellEditorRulerRef,
|
19
|
+
columns = _ref.columns,
|
20
|
+
previousState = _ref.previousState,
|
21
|
+
removeCellEditor = _ref.removeCellEditor,
|
22
|
+
rows = _ref.rows,
|
23
|
+
setActiveCellCoordinates = _ref.setActiveCellCoordinates,
|
24
|
+
setCurrentMatcher = _ref.setCurrentMatcher,
|
25
|
+
setSelectionAreas = _ref.setSelectionAreas,
|
26
|
+
spreadsheetRef = _ref.spreadsheetRef,
|
27
|
+
updateData = _ref.updateData;
|
28
|
+
return function (event) {
|
29
|
+
var key = event.key;
|
30
|
+
|
31
|
+
var updateSelectionAreaOnCellEditSubmit = function updateSelectionAreaOnCellEditSubmit(_ref2) {
|
32
|
+
var type = _ref2.type;
|
33
|
+
|
34
|
+
var submitEditChanges = function submitEditChanges() {
|
35
|
+
var prevCoords = previousState === null || previousState === void 0 ? void 0 : previousState.activeCellCoordinates;
|
36
|
+
var cellProps = rows[prevCoords === null || prevCoords === void 0 ? void 0 : prevCoords.row].cells[prevCoords === null || prevCoords === void 0 ? void 0 : prevCoords.column];
|
37
|
+
removeCellEditor();
|
38
|
+
updateData(prevCoords === null || prevCoords === void 0 ? void 0 : prevCoords.row, cellProps.column.id);
|
39
|
+
};
|
40
|
+
|
41
|
+
removeCellSelections({
|
42
|
+
spreadsheetRef: spreadsheetRef
|
43
|
+
});
|
44
|
+
submitEditChanges();
|
45
|
+
var tempMatcher = uuidv4();
|
46
|
+
var newSelectionArea = {
|
47
|
+
row: type === 'Enter' ? activeCellCoordinates.row === rows.length - 1 ? activeCellCoordinates.row : activeCellCoordinates.row + 1 : activeCellCoordinates.row,
|
48
|
+
column: type === 'Tab' ? activeCellCoordinates.column === columns.length - 1 ? activeCellCoordinates.column : activeCellCoordinates.column + 1 : activeCellCoordinates.column
|
49
|
+
};
|
50
|
+
setSelectionAreas([{
|
51
|
+
point1: newSelectionArea,
|
52
|
+
point2: newSelectionArea,
|
53
|
+
matcher: tempMatcher,
|
54
|
+
areaCreated: false
|
55
|
+
}]);
|
56
|
+
setCurrentMatcher(tempMatcher);
|
57
|
+
cellEditorRulerRef.current.textContent = '';
|
58
|
+
};
|
59
|
+
|
60
|
+
if (key === 'Enter') {
|
61
|
+
updateSelectionAreaOnCellEditSubmit({
|
62
|
+
type: 'Enter'
|
63
|
+
});
|
64
|
+
setActiveCellCoordinates(function (prev) {
|
65
|
+
return _objectSpread(_objectSpread({}, prev), {}, {
|
66
|
+
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
|
67
|
+
|
68
|
+
});
|
69
|
+
});
|
70
|
+
}
|
71
|
+
|
72
|
+
if (key === 'Tab') {
|
73
|
+
event.preventDefault();
|
74
|
+
updateSelectionAreaOnCellEditSubmit({
|
75
|
+
type: 'Tab'
|
76
|
+
});
|
77
|
+
setActiveCellCoordinates(function (prev) {
|
78
|
+
return _objectSpread(_objectSpread({}, prev), {}, {
|
79
|
+
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
|
80
|
+
|
81
|
+
});
|
82
|
+
});
|
83
|
+
}
|
84
|
+
|
85
|
+
return;
|
86
|
+
};
|
87
|
+
};
|