@carbon/ibm-products 1.18.1 → 1.19.1
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/components/Datagrid/styles/draggableElement.css +57 -0
- package/css/components/Datagrid/styles/draggableElement.css.map +1 -0
- package/css/components/Datagrid/styles/index.css +80 -0
- package/css/components/Datagrid/styles/index.css.map +1 -1
- package/css/index-full-carbon.css +98 -3
- 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.css +98 -3
- 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 +98 -3
- 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/ActionSet/ActionSet.js +1 -0
- package/es/components/AddSelect/AddSelectFilter.js +9 -3
- package/es/components/AddSelect/AddSelectSidebar.js +3 -2
- package/es/components/ComboButton/ComboButton.js +1 -2
- package/es/components/DataSpreadsheet/DataSpreadsheet.js +5 -3
- package/es/components/DataSpreadsheet/DataSpreadsheetBody.js +38 -8
- package/es/components/DataSpreadsheet/DataSpreadsheetHeader.js +26 -10
- package/es/components/DataSpreadsheet/hooks/useSpreadsheetMouseMove.js +8 -6
- package/es/components/DataSpreadsheet/hooks/useSpreadsheetMouseUp.js +65 -34
- package/es/components/DataSpreadsheet/utils/checkSelectedHeaderCell.js +17 -3
- package/es/components/DataSpreadsheet/utils/getCellSize.js +10 -10
- package/es/components/DataSpreadsheet/utils/handleHeaderCellSelection.js +113 -19
- package/es/components/DataSpreadsheet/utils/moveColumnIndicatorLine.js +4 -3
- package/es/components/Datagrid/Datagrid/DraggableElement.js +9 -19
- package/es/components/ExportModal/ExportModal.js +1 -1
- package/es/global/js/hooks/useWindowResize.js +2 -1
- package/es/global/js/hooks/useWindowScroll.js +2 -1
- package/es/global/js/utils/scrollableAncestor.js +2 -1
- package/lib/components/ActionSet/ActionSet.js +1 -0
- package/lib/components/AddSelect/AddSelectFilter.js +10 -3
- package/lib/components/AddSelect/AddSelectSidebar.js +3 -2
- package/lib/components/ComboButton/ComboButton.js +2 -4
- package/lib/components/DataSpreadsheet/DataSpreadsheet.js +5 -3
- package/lib/components/DataSpreadsheet/DataSpreadsheetBody.js +38 -8
- package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.js +26 -10
- package/lib/components/DataSpreadsheet/hooks/useSpreadsheetMouseMove.js +8 -7
- package/lib/components/DataSpreadsheet/hooks/useSpreadsheetMouseUp.js +66 -34
- package/lib/components/DataSpreadsheet/utils/checkSelectedHeaderCell.js +17 -3
- package/lib/components/DataSpreadsheet/utils/getCellSize.js +4 -4
- package/lib/components/DataSpreadsheet/utils/handleHeaderCellSelection.js +112 -19
- package/lib/components/DataSpreadsheet/utils/moveColumnIndicatorLine.js +4 -3
- package/lib/components/Datagrid/Datagrid/DraggableElement.js +11 -19
- package/lib/components/ExportModal/ExportModal.js +1 -1
- package/lib/global/js/hooks/useWindowResize.js +3 -1
- package/lib/global/js/hooks/useWindowScroll.js +5 -1
- package/lib/global/js/utils/scrollableAncestor.js +6 -1
- package/package.json +4 -4
- package/scss/components/AddSelect/_add-select.scss +6 -0
- package/scss/components/ComboButton/_combo-button.scss +2 -1
- package/scss/components/DataSpreadsheet/_data-spreadsheet.scss +7 -0
- package/scss/components/Datagrid/_datagrid.scss +1 -10
- package/scss/components/Datagrid/styles/draggableElement.scss +58 -0
- package/scss/components/Datagrid/styles/index.scss +2 -1
@@ -68,7 +68,8 @@ export var DataSpreadsheetBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
68
68
|
var contentScrollRef = useRef();
|
69
69
|
var previousState = usePreviousValue({
|
70
70
|
selectionAreaData: selectionAreaData,
|
71
|
-
clickAndHoldActive: clickAndHoldActive
|
71
|
+
clickAndHoldActive: clickAndHoldActive,
|
72
|
+
rowHeight: defaultColumn.rowHeight
|
72
73
|
}); // Set custom css property containing the spreadsheet total width
|
73
74
|
|
74
75
|
useEffect(function () {
|
@@ -148,7 +149,7 @@ export var DataSpreadsheetBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
148
149
|
|
149
150
|
for (var rowIndex = rowStart; rowIndex <= rowEnd; rowIndex++) {
|
150
151
|
for (var columnIndex = columnStart; columnIndex <= columnEnd; columnIndex++) {
|
151
|
-
cellContainer.push([rowIndex, columnIndex]);
|
152
|
+
cellContainer.push([rowIndex, columnIndex, "".concat(blockClass, "__cell--").concat(rowIndex, "--").concat(columnIndex)]);
|
152
153
|
}
|
153
154
|
}
|
154
155
|
|
@@ -168,18 +169,47 @@ export var DataSpreadsheetBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
168
169
|
setActiveCellCoordinates: setActiveCellCoordinates,
|
169
170
|
rows: rows,
|
170
171
|
activeCellCoordinates: activeCellCoordinates,
|
171
|
-
defaultColumn: defaultColumn
|
172
|
+
defaultColumn: defaultColumn,
|
173
|
+
selectionAreas: selectionAreas
|
172
174
|
}); // Make sure that if the cellSize prop changes, the active
|
173
|
-
// cell also gets updated with the new size
|
175
|
+
// cell also gets updated with the new size and new top placement
|
176
|
+
// value. All of the cell selections will be updated as well
|
174
177
|
|
175
178
|
useEffect(function () {
|
176
179
|
var listContainer = spreadsheetBodyRef === null || spreadsheetBodyRef === void 0 ? void 0 : spreadsheetBodyRef.current;
|
177
180
|
var activeCellButton = listContainer.querySelector(".".concat(blockClass, "__active-cell--highlight"));
|
178
181
|
|
179
|
-
if (activeCellButton) {
|
182
|
+
if (activeCellButton && defaultColumn.rowHeight !== previousState.rowHeight) {
|
180
183
|
activeCellButton.style.height = "".concat(defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeight, "px");
|
184
|
+
|
185
|
+
if (activeCellCoordinates) {
|
186
|
+
var activeTargetElement = ref.current.querySelector("[data-row-index=\"".concat(activeCellCoordinates.row, "\"][data-column-index=\"").concat(activeCellCoordinates.column, "\"]"));
|
187
|
+
|
188
|
+
var _listContainer = ref.current.querySelector(".".concat(blockClass, "__list--container"));
|
189
|
+
|
190
|
+
var newActiveCellTopPosition = activeTargetElement.getBoundingClientRect().top - _listContainer.getBoundingClientRect().top;
|
191
|
+
|
192
|
+
activeCellButton.style.top = px(newActiveCellTopPosition);
|
193
|
+
removeCellSelections({
|
194
|
+
spreadsheetRef: ref
|
195
|
+
});
|
196
|
+
selectionAreas.map(function (area) {
|
197
|
+
if (!area.areaCreated && area.point1 && area.point2 && area.matcher) {
|
198
|
+
return createCellSelectionArea({
|
199
|
+
ref: ref,
|
200
|
+
area: area,
|
201
|
+
blockClass: blockClass,
|
202
|
+
defaultColumn: defaultColumn,
|
203
|
+
selectionAreas: selectionAreas,
|
204
|
+
setSelectionAreas: setSelectionAreas,
|
205
|
+
setActiveCellInsideSelectionArea: setActiveCellInsideSelectionArea,
|
206
|
+
visibleColumns: visibleColumns
|
207
|
+
});
|
208
|
+
}
|
209
|
+
});
|
210
|
+
}
|
181
211
|
}
|
182
|
-
}, [defaultColumn === null ||
|
212
|
+
}, [defaultColumn, ref, activeCellCoordinates, previousState === null || previousState === void 0 ? void 0 : previousState.rowHeight, selectionAreas, setActiveCellInsideSelectionArea, setSelectionAreas, visibleColumns]); // onClick fn for each cell in the data spreadsheet body,
|
183
213
|
// adds the active cell highlight
|
184
214
|
|
185
215
|
var handleBodyCellClick = useCallback(function (cell, columnIndex) {
|
@@ -366,7 +396,7 @@ export var DataSpreadsheetBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
366
396
|
"data-column-index": "header",
|
367
397
|
type: "button",
|
368
398
|
onClick: handleRowHeaderClick(index),
|
369
|
-
className: cx("".concat(blockClass, "__td"), "".concat(blockClass, "__td-th"), "".concat(blockClass, "--interactive-cell-element"), (_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__td-th--active-header"), (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === index || checkActiveHeaderCell(index, selectionAreas, 'row')), _defineProperty(_cx, "".concat(blockClass, "__td-th--selected-header"), checkSelectedHeaderCell(index, selectionAreas, 'row')), _cx)),
|
399
|
+
className: cx("".concat(blockClass, "__td"), "".concat(blockClass, "__td-th"), "".concat(blockClass, "--interactive-cell-element"), (_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__td-th--active-header"), (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === index || checkActiveHeaderCell(index, selectionAreas, 'row')), _defineProperty(_cx, "".concat(blockClass, "__td-th--selected-header"), checkSelectedHeaderCell(index, selectionAreas, 'row', columns)), _cx)),
|
370
400
|
style: {
|
371
401
|
width: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeaderWidth
|
372
402
|
}
|
@@ -395,7 +425,7 @@ export var DataSpreadsheetBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
395
425
|
}, cell.render('Cell')));
|
396
426
|
}));
|
397
427
|
}
|
398
|
-
}, [prepareRow, rows, activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row, selectionAreas, handleRowHeaderClick, handleBodyCellClick, handleBodyCellHover, defaultColumn]);
|
428
|
+
}, [prepareRow, rows, activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row, selectionAreas, handleRowHeaderClick, handleBodyCellClick, handleBodyCellHover, defaultColumn, columns]);
|
399
429
|
var spreadsheetBodyRef = useRef();
|
400
430
|
return /*#__PURE__*/React.createElement("div", _extends({
|
401
431
|
ref: spreadsheetBodyRef,
|
@@ -29,6 +29,7 @@ export var DataSpreadsheetHeader = /*#__PURE__*/forwardRef(function (_ref, ref)
|
|
29
29
|
var activeCellCoordinates = _ref.activeCellCoordinates,
|
30
30
|
cellSize = _ref.cellSize,
|
31
31
|
columns = _ref.columns,
|
32
|
+
currentMatcher = _ref.currentMatcher,
|
32
33
|
defaultColumn = _ref.defaultColumn,
|
33
34
|
headerGroups = _ref.headerGroups,
|
34
35
|
scrollBarSize = _ref.scrollBarSize,
|
@@ -71,6 +72,7 @@ export var DataSpreadsheetHeader = /*#__PURE__*/forwardRef(function (_ref, ref)
|
|
71
72
|
var handleColumnHeaderClick = function handleColumnHeaderClick(index) {
|
72
73
|
return function (event) {
|
73
74
|
var isHoldingCommandKey = event.metaKey || event.ctrlKey;
|
75
|
+
var isHoldingShiftKey = event.shiftKey;
|
74
76
|
handleHeaderCellSelection({
|
75
77
|
type: 'column',
|
76
78
|
activeCellCoordinates: activeCellCoordinates,
|
@@ -82,7 +84,9 @@ export var DataSpreadsheetHeader = /*#__PURE__*/forwardRef(function (_ref, ref)
|
|
82
84
|
spreadsheetRef: ref,
|
83
85
|
index: index,
|
84
86
|
setSelectionAreaData: setSelectionAreaData,
|
85
|
-
isHoldingCommandKey: isHoldingCommandKey
|
87
|
+
isHoldingCommandKey: isHoldingCommandKey,
|
88
|
+
isHoldingShiftKey: isHoldingShiftKey,
|
89
|
+
currentMatcher: currentMatcher
|
86
90
|
});
|
87
91
|
};
|
88
92
|
};
|
@@ -103,23 +107,30 @@ export var DataSpreadsheetHeader = /*#__PURE__*/forwardRef(function (_ref, ref)
|
|
103
107
|
return function (event) {
|
104
108
|
var _selectionAreaToClone;
|
105
109
|
|
110
|
+
if (event.shiftKey) {
|
111
|
+
// Remove columns, need to call handleHeaderCellSelection
|
112
|
+
return;
|
113
|
+
}
|
114
|
+
|
106
115
|
setSelectedHeaderReorderActive(true);
|
116
|
+
var selectionAreaToClone = selectionAreas.filter(function (item) {
|
117
|
+
return (item === null || item === void 0 ? void 0 : item.matcher) === currentMatcher;
|
118
|
+
});
|
119
|
+
var selectionAreaElement = ref.current.querySelector("[data-matcher-id=\"".concat((_selectionAreaToClone = selectionAreaToClone[0]) === null || _selectionAreaToClone === void 0 ? void 0 : _selectionAreaToClone.matcher, "\"]"));
|
107
120
|
var clickXPosition = event.clientX;
|
108
121
|
var headerButtonCoords = event.target.getBoundingClientRect();
|
122
|
+
var headerIndex = event.target.getAttribute('data-column-index');
|
109
123
|
var offsetXValue = clickXPosition - headerButtonCoords.left;
|
124
|
+
var lowestColumnIndexFromSelectionArea = Math.min(selectionAreaToClone[0].point1.column, selectionAreaToClone[0].point2.column);
|
125
|
+
var selectionAreaCoords = selectionAreaElement.getBoundingClientRect();
|
126
|
+
var updatedOffsetDifference = lowestColumnIndexFromSelectionArea < parseInt(headerIndex) ? offsetXValue + (headerButtonCoords.left - selectionAreaCoords.left) : offsetXValue;
|
110
127
|
var bodyContainer = document.querySelector(".".concat(blockClass, "__list--container")).firstElementChild;
|
111
|
-
var selectionAreaToClone = selectionAreas.filter(function (item) {
|
112
|
-
var _item$header;
|
113
|
-
|
114
|
-
return (item === null || item === void 0 ? void 0 : (_item$header = item.header) === null || _item$header === void 0 ? void 0 : _item$header.index) === index;
|
115
|
-
});
|
116
|
-
var selectionAreaElement = ref.current.querySelector("[data-matcher-id=\"".concat((_selectionAreaToClone = selectionAreaToClone[0]) === null || _selectionAreaToClone === void 0 ? void 0 : _selectionAreaToClone.matcher, "\"]"));
|
117
128
|
var selectionAreaClonedElement = selectionAreaElement.cloneNode();
|
118
129
|
var reorderIndicatorLine = selectionAreaElement.cloneNode();
|
119
130
|
reorderIndicatorLine.className = "".concat(blockClass, "__reorder-indicator-line");
|
120
131
|
reorderIndicatorLine.style.width = px(2);
|
121
132
|
selectionAreaClonedElement.classList.add("".concat(blockClass, "__selection-area--element-cloned"));
|
122
|
-
selectionAreaClonedElement.setAttribute('data-clone-offset-x',
|
133
|
+
selectionAreaClonedElement.setAttribute('data-clone-offset-x', updatedOffsetDifference);
|
123
134
|
selectionAreaClonedElement.setAttribute('data-column-index-original', index);
|
124
135
|
bodyContainer.appendChild(selectionAreaClonedElement);
|
125
136
|
bodyContainer.appendChild(reorderIndicatorLine);
|
@@ -169,7 +180,7 @@ export var DataSpreadsheetHeader = /*#__PURE__*/forwardRef(function (_ref, ref)
|
|
169
180
|
}, "\xA0")), headerGroup.headers.map(function (column, index) {
|
170
181
|
var _cx2;
|
171
182
|
|
172
|
-
var selectedHeader = checkSelectedHeaderCell(index, selectionAreas, 'column');
|
183
|
+
var selectedHeader = checkSelectedHeaderCell(index, selectionAreas, 'column', rows);
|
173
184
|
return /*#__PURE__*/React.createElement("div", _extends({
|
174
185
|
key: "column_".concat(index),
|
175
186
|
role: "columnheader",
|
@@ -206,13 +217,18 @@ DataSpreadsheetHeader.propTypes = {
|
|
206
217
|
/**
|
207
218
|
* Specifies the cell height
|
208
219
|
*/
|
209
|
-
cellSize: PropTypes.oneOf(['
|
220
|
+
cellSize: PropTypes.oneOf(['xs', 'sm', 'md', 'lg']),
|
210
221
|
|
211
222
|
/**
|
212
223
|
* All of the spreadsheet columns
|
213
224
|
*/
|
214
225
|
columns: PropTypes.array,
|
215
226
|
|
227
|
+
/**
|
228
|
+
* uuid that corresponds to the current selection area
|
229
|
+
*/
|
230
|
+
currentMatcher: PropTypes.string,
|
231
|
+
|
216
232
|
/**
|
217
233
|
* Default spreadsheet sizing values
|
218
234
|
*/
|
@@ -7,7 +7,6 @@
|
|
7
7
|
import { useEffect } from 'react';
|
8
8
|
import { px } from '@carbon/layout';
|
9
9
|
import { pkg } from '../../../settings';
|
10
|
-
import { getScrollbarWidth } from '../../../global/js/utils/getScrollbarWidth';
|
11
10
|
import { moveColumnIndicatorLine } from '../utils/moveColumnIndicatorLine'; // Used specifically for reordering columns, will move the position of the
|
12
11
|
// cloned selection area to follow the position of the cursor
|
13
12
|
|
@@ -26,21 +25,24 @@ export var useSpreadsheetMouseMove = function useSpreadsheetMouseMove(_ref) {
|
|
26
25
|
}
|
27
26
|
|
28
27
|
var spreadsheetCoords = ref.current.getBoundingClientRect();
|
28
|
+
var listContainer = ref.current.querySelector(".".concat(blockClass, "__list--container"));
|
29
|
+
var scrollAmount = listContainer.scrollLeft;
|
29
30
|
moveColumnIndicatorLine({
|
30
31
|
clonedSelectionElement: clonedSelectionElement,
|
31
32
|
ref: ref,
|
32
|
-
spreadsheetCoords: spreadsheetCoords
|
33
|
+
spreadsheetCoords: spreadsheetCoords,
|
34
|
+
leftScrollAmount: scrollAmount
|
33
35
|
});
|
34
|
-
var scrollbarWidth = getScrollbarWidth();
|
35
36
|
var spreadsheetWrapperElement = ref.current;
|
36
37
|
spreadsheetWrapperElement.getBoundingClientRect();
|
37
38
|
var xPositionRelativeToSpreadsheet = event.clientX - spreadsheetCoords.left;
|
38
39
|
var offsetXValue = clonedSelectionElement === null || clonedSelectionElement === void 0 ? void 0 : clonedSelectionElement.getAttribute('data-clone-offset-x');
|
39
|
-
var
|
40
|
+
var totalSpreadsheetScrollingWidth = listContainer.scrollWidth;
|
40
41
|
var clonedSelectionWidth = clonedSelectionElement.offsetWidth;
|
41
|
-
var clonePlacement = Math.max(xPositionRelativeToSpreadsheet - offsetXValue, defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeaderWidth); // Moves the position of the cloned selection area to follow mouse
|
42
|
+
var clonePlacement = Math.max(xPositionRelativeToSpreadsheet - offsetXValue, defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeaderWidth); // Moves the position of the cloned selection area to follow mouse, and
|
43
|
+
// add the amount horizontally scrolled
|
42
44
|
|
43
|
-
clonedSelectionElement.style.left = px(
|
45
|
+
clonedSelectionElement.style.left = px(totalSpreadsheetScrollingWidth - clonedSelectionWidth >= clonePlacement ? clonePlacement + scrollAmount : totalSpreadsheetScrollingWidth - clonedSelectionWidth);
|
44
46
|
};
|
45
47
|
|
46
48
|
if (headerCellHoldActive) {
|
@@ -30,7 +30,8 @@ export var useSpreadsheetMouseUp = function useSpreadsheetMouseUp(_ref) {
|
|
30
30
|
setActiveCellCoordinates = _ref.setActiveCellCoordinates,
|
31
31
|
activeCellCoordinates = _ref.activeCellCoordinates,
|
32
32
|
rows = _ref.rows,
|
33
|
-
defaultColumn = _ref.defaultColumn
|
33
|
+
defaultColumn = _ref.defaultColumn,
|
34
|
+
selectionAreas = _ref.selectionAreas;
|
34
35
|
useEffect(function () {
|
35
36
|
var handleMouseUp = function handleMouseUp(event) {
|
36
37
|
// Remove the cloned selection area on mouse up
|
@@ -45,8 +46,12 @@ export var useSpreadsheetMouseUp = function useSpreadsheetMouseUp(_ref) {
|
|
45
46
|
|
46
47
|
if (selectionAreaCloneElement) {
|
47
48
|
var closestCell = event.target.closest(".".concat(blockClass, "--interactive-cell-element"));
|
48
|
-
var newColumnIndex = closestCell === null || closestCell === void 0 ? void 0 : closestCell.getAttribute('data-column-index');
|
49
|
-
var originalColumnIndex = selectionAreaCloneElement === null || selectionAreaCloneElement === void 0 ? void 0 : selectionAreaCloneElement.getAttribute('data-column-index-original');
|
49
|
+
var newColumnIndex = parseInt === null || parseInt === void 0 ? void 0 : parseInt(closestCell === null || closestCell === void 0 ? void 0 : closestCell.getAttribute('data-column-index'));
|
50
|
+
var originalColumnIndex = parseInt === null || parseInt === void 0 ? void 0 : parseInt(selectionAreaCloneElement === null || selectionAreaCloneElement === void 0 ? void 0 : selectionAreaCloneElement.getAttribute('data-column-index-original'));
|
51
|
+
var selectionAreaToClone = selectionAreas.filter(function (item) {
|
52
|
+
return (item === null || item === void 0 ? void 0 : item.matcher) === currentMatcher;
|
53
|
+
});
|
54
|
+
var selectionAreaIndexArray = selectionAreaToClone[0].header.selectedIndexList;
|
50
55
|
var columnToMoveToElement = ref.current.querySelector("[data-row-index=\"header\"][data-column-index=\"".concat(newColumnIndex, "\"]")); // Mouse up element was not part of the spreadsheet component
|
51
56
|
|
52
57
|
if (!columnToMoveToElement) {
|
@@ -55,22 +60,11 @@ export var useSpreadsheetMouseUp = function useSpreadsheetMouseUp(_ref) {
|
|
55
60
|
|
56
61
|
var selectionAreaToMove = ref.current.querySelector("[data-matcher-id=\"".concat(currentMatcher, "\"]"));
|
57
62
|
var spreadsheetPosition = ref.current.getBoundingClientRect();
|
58
|
-
var
|
59
|
-
var
|
60
|
-
var cloneColumnWidth = selectionAreaCloneElement.offsetWidth;
|
61
|
-
var columnsWidthUpToNewIndex = 0;
|
63
|
+
var listContainer = ref.current.querySelector(".".concat(blockClass, "__list--container"));
|
64
|
+
var leftScrollAmount = listContainer.scrollLeft;
|
62
65
|
var newIndexLessThanStarting = newColumnIndex < originalColumnIndex;
|
63
|
-
|
64
|
-
|
65
|
-
return;
|
66
|
-
}
|
67
|
-
|
68
|
-
if (index <= newColumnIndex) {
|
69
|
-
columnsWidthUpToNewIndex += (item === null || item === void 0 ? void 0 : item.width) || (defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.width);
|
70
|
-
}
|
71
|
-
});
|
72
|
-
var updatedSelectionAreaPlacement = newIndexLessThanStarting ? relativeNewPosition : columnsWidthUpToNewIndex - cloneColumnWidth + (defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeaderWidth);
|
73
|
-
selectionAreaToMove.style.left = px(updatedSelectionAreaPlacement);
|
66
|
+
var newIndexGreater = newColumnIndex > originalColumnIndex;
|
67
|
+
var differenceBetweenOldNewIndex = newIndexGreater ? newColumnIndex - originalColumnIndex : originalColumnIndex - newColumnIndex;
|
74
68
|
setSelectionAreas(function (prev) {
|
75
69
|
var selectionAreaClone = deepCloneObject(prev);
|
76
70
|
|
@@ -86,28 +80,65 @@ export var useSpreadsheetMouseUp = function useSpreadsheetMouseUp(_ref) {
|
|
86
80
|
return prev;
|
87
81
|
}
|
88
82
|
|
89
|
-
|
90
|
-
|
91
|
-
|
83
|
+
if (!selectionAreaIndexArray.includes(newColumnIndex)) {
|
84
|
+
// We need to not add just the newColumnIndex, but an array of indexes
|
85
|
+
// if there are multiple columns
|
86
|
+
var newIndexArray = newIndexGreater ? selectionAreaIndexArray.map(function (num) {
|
87
|
+
return num + differenceBetweenOldNewIndex;
|
88
|
+
}) : selectionAreaIndexArray.map(function (num) {
|
89
|
+
return num - differenceBetweenOldNewIndex;
|
90
|
+
});
|
91
|
+
selectionAreaClone[indexOfItemToUpdate].header.selectedIndexList = newIndexArray;
|
92
|
+
selectionAreaClone[indexOfItemToUpdate].point1.column = Math.min.apply(Math, _toConsumableArray(newIndexArray));
|
93
|
+
selectionAreaClone[indexOfItemToUpdate].point2.column = Math.max.apply(Math, _toConsumableArray(newIndexArray));
|
94
|
+
}
|
95
|
+
|
92
96
|
return selectionAreaClone;
|
93
|
-
});
|
94
|
-
|
95
|
-
|
96
|
-
|
97
|
+
}); // Only reorder columns if the new index is _not_ part of the
|
98
|
+
// selectionAreaIndexArray, meaning the new placement is outside
|
99
|
+
// of the current selection area. Similarly, the active cell position
|
100
|
+
// should only be changed under the same condition.
|
101
|
+
|
102
|
+
if (!selectionAreaIndexArray.includes(newColumnIndex)) {
|
103
|
+
var deleteCount = selectionAreaIndexArray.length;
|
104
|
+
var startIndex = Math.min.apply(Math, _toConsumableArray(selectionAreaIndexArray));
|
105
|
+
var columnIdArray = visibleColumns.map(function (column) {
|
106
|
+
return column.id;
|
107
|
+
});
|
97
108
|
|
98
|
-
|
109
|
+
var columnIdArrayClone = _toConsumableArray(columnIdArray);
|
99
110
|
|
111
|
+
var getNewColumnOrder = function getNewColumnOrder() {
|
112
|
+
var newColumnList = [];
|
113
|
+
selectionAreaIndexArray.map(function (index) {
|
114
|
+
return newColumnList.push(columnIdArray[index]);
|
115
|
+
});
|
116
|
+
return newColumnList;
|
117
|
+
}; // Remove one element at the original index
|
100
118
|
|
101
|
-
columnIdArrayClone.splice(originalColumnIndex, 1); // Add one element at the new index
|
102
119
|
|
103
|
-
|
104
|
-
|
120
|
+
columnIdArrayClone.splice(startIndex, deleteCount);
|
121
|
+
var originalPointIndex = selectionAreaIndexArray.findIndex(function (item) {
|
122
|
+
return item === originalColumnIndex;
|
123
|
+
});
|
124
|
+
var updatedNewIndexWithNewOrder = newColumnIndex - originalPointIndex; // Add one element at the new index
|
105
125
|
|
106
|
-
|
107
|
-
|
108
|
-
|
126
|
+
columnIdArrayClone.splice.apply(columnIdArrayClone, [updatedNewIndexWithNewOrder, 0].concat(_toConsumableArray(getNewColumnOrder())));
|
127
|
+
setColumnOrder(columnIdArrayClone); // Function provided by useTable (react-table) hook to reorder columns
|
128
|
+
|
129
|
+
var newCellCoords = _objectSpread(_objectSpread({}, activeCellCoordinates), {}, {
|
130
|
+
column: newIndexGreater ? activeCellCoordinates.column + differenceBetweenOldNewIndex : activeCellCoordinates.column - differenceBetweenOldNewIndex
|
131
|
+
});
|
132
|
+
|
133
|
+
setActiveCellCoordinates(newCellCoords);
|
134
|
+
var firstSelectedHeader = Array.from(ref.current.querySelectorAll(".".concat(blockClass, "__th--selected-header")))[0];
|
135
|
+
var firstSelectedHeaderCoords = firstSelectedHeader.getBoundingClientRect();
|
136
|
+
var newRelativePosition = firstSelectedHeaderCoords.left - spreadsheetPosition.left + leftScrollAmount; // console.log(firstSelectedHeaderCoords.left - spreadsheetPosition.left + leftScrollAmount);
|
137
|
+
|
138
|
+
var updatedSelectionAreaPlacement = newIndexLessThanStarting ? newRelativePosition : newColumnIndex === originalColumnIndex ? selectionAreaToMove.style.left : newRelativePosition;
|
139
|
+
selectionAreaToMove.style.left = px(updatedSelectionAreaPlacement);
|
140
|
+
} // Remove the cloned column and indicator elements
|
109
141
|
|
110
|
-
setActiveCellCoordinates(newCellCoords); // Remove the cloned column and indicator elements
|
111
142
|
|
112
143
|
var indicatorLineElement = ref.current.querySelector(".".concat(blockClass, "__reorder-indicator-line"));
|
113
144
|
indicatorLineElement === null || indicatorLineElement === void 0 ? void 0 : indicatorLineElement.remove();
|
@@ -149,5 +180,5 @@ export var useSpreadsheetMouseUp = function useSpreadsheetMouseUp(_ref) {
|
|
149
180
|
return function () {
|
150
181
|
document.removeEventListener('mouseup', handleMouseUp);
|
151
182
|
};
|
152
|
-
}, [blockClass, currentMatcher, setSelectionAreas, setClickAndHoldActive, setValidStartingPoint, validStartingPoint, ref, setHeaderCellHoldActive, setColumnOrder, visibleColumns, setActiveCellCoordinates, activeCellCoordinates, rows, defaultColumn]);
|
183
|
+
}, [blockClass, currentMatcher, setSelectionAreas, setClickAndHoldActive, setValidStartingPoint, validStartingPoint, ref, setHeaderCellHoldActive, setColumnOrder, visibleColumns, setActiveCellCoordinates, activeCellCoordinates, rows, defaultColumn, selectionAreas]);
|
153
184
|
};
|
@@ -5,12 +5,26 @@
|
|
5
5
|
* LICENSE file in the root directory of this source tree.
|
6
6
|
*/
|
7
7
|
import { deepCloneObject } from '../../../global/js/utils/deepCloneObject';
|
8
|
-
export var checkSelectedHeaderCell = function checkSelectedHeaderCell(headerIndex, selectionAreas, headerType) {
|
8
|
+
export var checkSelectedHeaderCell = function checkSelectedHeaderCell(headerIndex, selectionAreas, headerType, items) {
|
9
9
|
var areasCloned = deepCloneObject(selectionAreas);
|
10
10
|
var isSelectedHeader = areasCloned.some(function (area) {
|
11
|
-
var _area$
|
11
|
+
var _area$point, _area$point2, _area$point3, _area$point4, _area$point5, _area$point6, _area$point7, _area$point8;
|
12
12
|
|
13
|
-
|
13
|
+
var oppositeType = headerType === 'column' ? 'row' : 'column';
|
14
|
+
var minOppositeSelection = Math.min(area === null || area === void 0 ? void 0 : (_area$point = area.point1) === null || _area$point === void 0 ? void 0 : _area$point[oppositeType], area === null || area === void 0 ? void 0 : (_area$point2 = area.point2) === null || _area$point2 === void 0 ? void 0 : _area$point2[oppositeType]);
|
15
|
+
var maxOppositeSelection = Math.max(area === null || area === void 0 ? void 0 : (_area$point3 = area.point1) === null || _area$point3 === void 0 ? void 0 : _area$point3[oppositeType], area === null || area === void 0 ? void 0 : (_area$point4 = area.point2) === null || _area$point4 === void 0 ? void 0 : _area$point4[oppositeType]);
|
16
|
+
var minSelection = Math.min(area === null || area === void 0 ? void 0 : (_area$point5 = area.point1) === null || _area$point5 === void 0 ? void 0 : _area$point5[headerType], area === null || area === void 0 ? void 0 : (_area$point6 = area.point2) === null || _area$point6 === void 0 ? void 0 : _area$point6[headerType]);
|
17
|
+
var maxSelection = Math.max(area === null || area === void 0 ? void 0 : (_area$point7 = area.point1) === null || _area$point7 === void 0 ? void 0 : _area$point7[headerType], area === null || area === void 0 ? void 0 : (_area$point8 = area.point2) === null || _area$point8 === void 0 ? void 0 : _area$point8[headerType]);
|
18
|
+
var isTrueSelectedState = (items === null || items === void 0 ? void 0 : items.length) - 1 === maxOppositeSelection && minOppositeSelection === 0; // console.log({minSelection, maxSelection});
|
19
|
+
// Iterate over all columns included in the selection area
|
20
|
+
|
21
|
+
for (var i = minSelection; i <= maxSelection; i++) {
|
22
|
+
if (headerIndex === i && isTrueSelectedState) {
|
23
|
+
return true;
|
24
|
+
}
|
25
|
+
}
|
26
|
+
|
27
|
+
return false;
|
14
28
|
});
|
15
29
|
return isSelectedHeader;
|
16
30
|
};
|
@@ -4,7 +4,7 @@
|
|
4
4
|
* This source code is licensed under the Apache-2.0 license found in the
|
5
5
|
* LICENSE file in the root directory of this source tree.
|
6
6
|
*/
|
7
|
-
import { baseFontSize, sizeXSmall as
|
7
|
+
import { baseFontSize, sizeXSmall as xs, sizeSmall as sm, sizeMedium as md, sizeLarge as lg } from '@carbon/layout';
|
8
8
|
|
9
9
|
var getSizeInPixels = function getSizeInPixels(carbonSize) {
|
10
10
|
return Number(carbonSize.replace('rem', '') * baseFontSize);
|
@@ -12,19 +12,19 @@ var getSizeInPixels = function getSizeInPixels(carbonSize) {
|
|
12
12
|
|
13
13
|
export var getCellSize = function getCellSize(cellSize) {
|
14
14
|
switch (cellSize) {
|
15
|
-
case '
|
16
|
-
return getSizeInPixels(
|
15
|
+
case 'xs':
|
16
|
+
return getSizeInPixels(xs);
|
17
17
|
|
18
|
-
case '
|
19
|
-
return getSizeInPixels(
|
18
|
+
case 'sm':
|
19
|
+
return getSizeInPixels(sm);
|
20
20
|
|
21
|
-
case '
|
22
|
-
return getSizeInPixels(
|
21
|
+
case 'md':
|
22
|
+
return getSizeInPixels(md);
|
23
23
|
|
24
|
-
case '
|
25
|
-
return getSizeInPixels(
|
24
|
+
case 'lg':
|
25
|
+
return getSizeInPixels(lg);
|
26
26
|
|
27
27
|
default:
|
28
|
-
return getSizeInPixels(
|
28
|
+
return getSizeInPixels(sm);
|
29
29
|
}
|
30
30
|
};
|
@@ -10,19 +10,37 @@ import { deepCloneObject } from '../../../global/js/utils/deepCloneObject';
|
|
10
10
|
import uuidv4 from '../../../global/js/utils/uuidv4';
|
11
11
|
import { removeCellSelections } from './removeCellSelections';
|
12
12
|
import { checkActiveHeaderCell } from './checkActiveHeaderCell';
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
13
|
+
|
14
|
+
var getSelectedItemIndexList = function getSelectedItemIndexList(_ref) {
|
15
|
+
var indexList = _ref.indexList,
|
16
|
+
newIndex = _ref.newIndex,
|
17
|
+
activeCellIndex = _ref.activeCellIndex;
|
18
|
+
var lowestIndex = newIndex > activeCellIndex ? activeCellIndex : Math.min.apply(Math, _toConsumableArray(indexList).concat([newIndex]));
|
19
|
+
var highestIndex = newIndex < activeCellIndex ? activeCellIndex : Math.max.apply(Math, _toConsumableArray(indexList).concat([newIndex]));
|
20
|
+
var newIndexList = [];
|
21
|
+
|
22
|
+
for (var i = lowestIndex; i <= highestIndex; i++) {
|
23
|
+
newIndexList.push(i);
|
24
|
+
}
|
25
|
+
|
26
|
+
return [].concat(newIndexList);
|
27
|
+
};
|
28
|
+
|
29
|
+
export var handleHeaderCellSelection = function handleHeaderCellSelection(_ref2) {
|
30
|
+
var type = _ref2.type,
|
31
|
+
activeCellCoordinates = _ref2.activeCellCoordinates,
|
32
|
+
rows = _ref2.rows,
|
33
|
+
columns = _ref2.columns,
|
34
|
+
currentMatcher = _ref2.currentMatcher,
|
35
|
+
setActiveCellCoordinates = _ref2.setActiveCellCoordinates,
|
36
|
+
setCurrentMatcher = _ref2.setCurrentMatcher,
|
37
|
+
setSelectionAreas = _ref2.setSelectionAreas,
|
38
|
+
spreadsheetRef = _ref2.spreadsheetRef,
|
39
|
+
index = _ref2.index,
|
40
|
+
isKeyboard = _ref2.isKeyboard,
|
41
|
+
setSelectionAreaData = _ref2.setSelectionAreaData,
|
42
|
+
isHoldingCommandKey = _ref2.isHoldingCommandKey,
|
43
|
+
isHoldingShiftKey = _ref2.isHoldingShiftKey;
|
26
44
|
|
27
45
|
if (!isHoldingCommandKey) {
|
28
46
|
setSelectionAreaData([]);
|
@@ -43,11 +61,15 @@ export var handleHeaderCellSelection = function handleHeaderCellSelection(_ref)
|
|
43
61
|
column: type === 'column' ? columnValue : columns.length - 1
|
44
62
|
};
|
45
63
|
var tempMatcher = uuidv4();
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
64
|
+
|
65
|
+
if (!isHoldingShiftKey) {
|
66
|
+
setActiveCellCoordinates({
|
67
|
+
row: type === 'column' ? 0 : rowValue,
|
68
|
+
column: type === 'column' ? columnValue : 0
|
69
|
+
});
|
70
|
+
setCurrentMatcher(tempMatcher);
|
71
|
+
}
|
72
|
+
|
51
73
|
var newSelectionArea = {
|
52
74
|
point1: point1,
|
53
75
|
point2: point2,
|
@@ -55,7 +77,7 @@ export var handleHeaderCellSelection = function handleHeaderCellSelection(_ref)
|
|
55
77
|
matcher: tempMatcher,
|
56
78
|
header: {
|
57
79
|
type: type,
|
58
|
-
|
80
|
+
selectedIndexList: [type === 'column' ? columnValue : rowValue]
|
59
81
|
}
|
60
82
|
};
|
61
83
|
setSelectionAreas(function (prev) {
|
@@ -81,6 +103,78 @@ export var handleHeaderCellSelection = function handleHeaderCellSelection(_ref)
|
|
81
103
|
return [].concat(_toConsumableArray(prev), [newSelectionArea]);
|
82
104
|
}
|
83
105
|
|
106
|
+
if (isHoldingShiftKey) {
|
107
|
+
var _selectionAreasClone$, _selectionAreasClone$2;
|
108
|
+
|
109
|
+
var _selectionsFromHeaderCell = selectionsClone.filter(function (item) {
|
110
|
+
var _item$header3;
|
111
|
+
|
112
|
+
return (_item$header3 = item.header) === null || _item$header3 === void 0 ? void 0 : _item$header3.type;
|
113
|
+
}); // Shift/click behavior should not occur unless there are activeCellCoordinates set
|
114
|
+
|
115
|
+
|
116
|
+
var currentSelectionArea = _selectionsFromHeaderCell.filter(function (item) {
|
117
|
+
return item.matcher === currentMatcher;
|
118
|
+
})[0];
|
119
|
+
|
120
|
+
var originalAreaIndex = Math.max(currentSelectionArea === null || currentSelectionArea === void 0 ? void 0 : currentSelectionArea.point1[type], currentSelectionArea === null || currentSelectionArea === void 0 ? void 0 : currentSelectionArea.point2[type], activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates[type]);
|
121
|
+
var newIndexValue = type === 'column' ? columnValue : rowValue;
|
122
|
+
var newPoint = {
|
123
|
+
row: originalAreaIndex < newIndexValue ? rows.length - 1 : 0,
|
124
|
+
column: columnValue
|
125
|
+
};
|
126
|
+
var selectionAreasClone = deepCloneObject(prev);
|
127
|
+
var indexOfCurrentArea = selectionAreasClone.findIndex(function (item) {
|
128
|
+
return item.matcher === currentMatcher;
|
129
|
+
});
|
130
|
+
var newIndexList = getSelectedItemIndexList({
|
131
|
+
indexList: ((_selectionAreasClone$ = selectionAreasClone[indexOfCurrentArea]) === null || _selectionAreasClone$ === void 0 ? void 0 : (_selectionAreasClone$2 = _selectionAreasClone$.header) === null || _selectionAreasClone$2 === void 0 ? void 0 : _selectionAreasClone$2.selectedIndexList) || [type === 'column' ? columnValue : rowValue],
|
132
|
+
newIndex: newIndexValue,
|
133
|
+
activeCellIndex: activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates[type]
|
134
|
+
});
|
135
|
+
|
136
|
+
var setPoint1 = function setPoint1(value) {
|
137
|
+
return value < newIndexValue ? {
|
138
|
+
row: type === 'column' ? 0 : Math.min.apply(Math, _toConsumableArray(newIndexList)),
|
139
|
+
column: type === 'column' ? Math.min.apply(Math, _toConsumableArray(newIndexList)) : 0
|
140
|
+
} : newPoint;
|
141
|
+
};
|
142
|
+
|
143
|
+
var setPoint2 = function setPoint2(value) {
|
144
|
+
return value < newIndexValue ? newPoint : {
|
145
|
+
row: type === 'column' ? rows.length - 1 : Math.max.apply(Math, _toConsumableArray(newIndexList)),
|
146
|
+
column: type === 'column' ? Math.max.apply(Math, _toConsumableArray(newIndexList)) : columns.length - 1
|
147
|
+
};
|
148
|
+
}; // If there is no active cell set and shift is clicked on a header cell
|
149
|
+
|
150
|
+
|
151
|
+
if (!activeCellCoordinates || typeof activeCellCoordinates === 'undefined') {
|
152
|
+
// Need to set positioning of active cell because it doesn't exist yet
|
153
|
+
setCurrentMatcher(tempMatcher);
|
154
|
+
var firstSelectionArea = {
|
155
|
+
point1: setPoint1(type === 'column' ? columnValue : rowValue),
|
156
|
+
point2: setPoint2(type === 'column' ? columnValue : rowValue),
|
157
|
+
areaCreated: false,
|
158
|
+
matcher: tempMatcher,
|
159
|
+
header: {
|
160
|
+
type: type,
|
161
|
+
selectedIndexList: [type === 'column' ? columnValue : rowValue]
|
162
|
+
}
|
163
|
+
};
|
164
|
+
setActiveCellCoordinates({
|
165
|
+
row: type === 'column' ? 0 : rowValue,
|
166
|
+
column: type === 'column' ? columnValue : 0
|
167
|
+
});
|
168
|
+
return [firstSelectionArea];
|
169
|
+
}
|
170
|
+
|
171
|
+
selectionAreasClone[indexOfCurrentArea].point1 = setPoint1(activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates[type]);
|
172
|
+
selectionAreasClone[indexOfCurrentArea].point2 = setPoint2(activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates[type]);
|
173
|
+
selectionAreasClone[indexOfCurrentArea].areaCreated = false;
|
174
|
+
selectionAreasClone[indexOfCurrentArea].header.selectedIndexList = newIndexList;
|
175
|
+
return selectionAreasClone;
|
176
|
+
}
|
177
|
+
|
84
178
|
return [newSelectionArea];
|
85
179
|
});
|
86
180
|
};
|
@@ -11,7 +11,8 @@ export var moveColumnIndicatorLine = function moveColumnIndicatorLine(_ref) {
|
|
11
11
|
blockClass = _ref$blockClass === void 0 ? "".concat(pkg.prefix, "--data-spreadsheet") : _ref$blockClass,
|
12
12
|
clonedSelectionElement = _ref.clonedSelectionElement,
|
13
13
|
ref = _ref.ref,
|
14
|
-
spreadsheetCoords = _ref.spreadsheetCoords
|
14
|
+
spreadsheetCoords = _ref.spreadsheetCoords,
|
15
|
+
leftScrollAmount = _ref.leftScrollAmount;
|
15
16
|
var closestCell = event.target.closest(".".concat(blockClass, "--interactive-cell-element"));
|
16
17
|
var newColumnIndex = closestCell === null || closestCell === void 0 ? void 0 : closestCell.getAttribute('data-column-index');
|
17
18
|
var originalColumnIndex = clonedSelectionElement === null || clonedSelectionElement === void 0 ? void 0 : clonedSelectionElement.getAttribute('data-column-index-original');
|
@@ -21,11 +22,11 @@ export var moveColumnIndicatorLine = function moveColumnIndicatorLine(_ref) {
|
|
21
22
|
var selectionAreaOrigin = ref.current.querySelector("[data-matcher-id=\"".concat(matcherId, "\"]"));
|
22
23
|
|
23
24
|
if (Number(newColumnIndex) > Number(originalColumnIndex)) {
|
24
|
-
indicatorLineElement.style.left = px(closestCellCoords.left - spreadsheetCoords.left + closestCell.offsetWidth - 2);
|
25
|
+
indicatorLineElement.style.left = px(closestCellCoords.left - spreadsheetCoords.left + closestCell.offsetWidth - 2 + leftScrollAmount);
|
25
26
|
}
|
26
27
|
|
27
28
|
if (Number(newColumnIndex) < Number(originalColumnIndex)) {
|
28
|
-
indicatorLineElement.style.left = px(closestCellCoords.left - spreadsheetCoords.left);
|
29
|
+
indicatorLineElement.style.left = px(closestCellCoords.left - spreadsheetCoords.left + leftScrollAmount);
|
29
30
|
}
|
30
31
|
|
31
32
|
if (Number(newColumnIndex) === Number(originalColumnIndex)) {
|