@carbon/ibm-products 1.17.0 → 1.18.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/README.md +30 -27
- package/css/index-full-carbon.css +144 -78
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +4 -4
- package/css/index-full-carbon.min.css.map +1 -1
- package/css/index-without-carbon.css +27 -12
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +2 -2
- package/css/index-without-carbon.min.css.map +1 -1
- package/css/index.css +53 -43
- package/css/index.css.map +1 -1
- package/css/index.min.css +4 -4
- package/css/index.min.css.map +1 -1
- package/es/components/AddSelect/AddSelect.js +30 -6
- package/es/components/AddSelect/AddSelectColumn.js +31 -73
- package/es/components/AddSelect/AddSelectFilter.js +2 -2
- package/es/components/AddSelect/AddSelectSort.js +61 -0
- package/es/components/AddSelect/add-select-utils.js +21 -0
- package/es/components/AddSelect/hooks/useItemSort.js +20 -0
- package/es/components/DataSpreadsheet/DataSpreadsheet.js +26 -13
- package/es/components/DataSpreadsheet/DataSpreadsheetBody.js +51 -40
- package/es/components/DataSpreadsheet/DataSpreadsheetHeader.js +60 -3
- package/es/components/DataSpreadsheet/hooks/index.js +3 -1
- package/es/components/DataSpreadsheet/hooks/useSpreadsheetEdit.js +15 -14
- package/es/components/DataSpreadsheet/hooks/useSpreadsheetMouseMove.js +60 -0
- package/es/components/DataSpreadsheet/hooks/useSpreadsheetMouseUp.js +153 -0
- package/es/components/DataSpreadsheet/utils/createCellSelectionArea.js +3 -3
- package/es/components/DataSpreadsheet/utils/moveColumnIndicatorLine.js +34 -0
- package/lib/components/AddSelect/AddSelect.js +31 -6
- package/lib/components/AddSelect/AddSelectColumn.js +32 -71
- package/lib/components/AddSelect/AddSelectFilter.js +2 -2
- package/lib/components/AddSelect/AddSelectSort.js +79 -0
- package/lib/components/AddSelect/add-select-utils.js +29 -2
- package/lib/components/AddSelect/hooks/useItemSort.js +33 -0
- package/lib/components/DataSpreadsheet/DataSpreadsheet.js +25 -12
- package/lib/components/DataSpreadsheet/DataSpreadsheetBody.js +52 -39
- package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.js +62 -3
- package/lib/components/DataSpreadsheet/hooks/index.js +17 -1
- package/lib/components/DataSpreadsheet/hooks/useSpreadsheetEdit.js +14 -14
- package/lib/components/DataSpreadsheet/hooks/useSpreadsheetMouseMove.js +74 -0
- package/lib/components/DataSpreadsheet/hooks/useSpreadsheetMouseUp.js +161 -0
- package/lib/components/DataSpreadsheet/utils/createCellSelectionArea.js +3 -3
- package/lib/components/DataSpreadsheet/utils/moveColumnIndicatorLine.js +45 -0
- package/package.json +11 -10
- package/scss/components/AddSelect/_add-select.scss +6 -0
- package/scss/components/DataSpreadsheet/_data-spreadsheet.scss +21 -13
@@ -21,6 +21,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
21
21
|
|
22
22
|
var _classnames = _interopRequireDefault(require("classnames"));
|
23
23
|
|
24
|
+
var _layout = require("@carbon/layout");
|
25
|
+
|
24
26
|
var _settings = require("../../settings");
|
25
27
|
|
26
28
|
var _hooks = require("../../global/js/hooks");
|
@@ -35,6 +37,8 @@ var _selectAllCells = require("./utils/selectAllCells");
|
|
35
37
|
|
36
38
|
var _getSpreadsheetWidth = require("./utils/getSpreadsheetWidth");
|
37
39
|
|
40
|
+
var _hooks2 = require("./hooks");
|
41
|
+
|
38
42
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
39
43
|
|
40
44
|
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; }
|
@@ -58,13 +62,20 @@ var DataSpreadsheetHeader = /*#__PURE__*/(0, _react.forwardRef)(function (_ref,
|
|
58
62
|
setSelectionAreaData = _ref.setSelectionAreaData,
|
59
63
|
rows = _ref.rows,
|
60
64
|
totalVisibleColumns = _ref.totalVisibleColumns,
|
61
|
-
updateActiveCellCoordinates = _ref.updateActiveCellCoordinates
|
65
|
+
updateActiveCellCoordinates = _ref.updateActiveCellCoordinates,
|
66
|
+
setHeaderCellHoldActive = _ref.setHeaderCellHoldActive,
|
67
|
+
headerCellHoldActive = _ref.headerCellHoldActive;
|
62
68
|
|
63
69
|
var _useState = (0, _react.useState)(0),
|
64
70
|
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
65
71
|
scrollBarSizeValue = _useState2[0],
|
66
72
|
setScrollBarSizeValue = _useState2[1];
|
67
73
|
|
74
|
+
var _useState3 = (0, _react.useState)(false),
|
75
|
+
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
|
76
|
+
selectedHeaderReorderActive = _useState4[0],
|
77
|
+
setSelectedHeaderReorderActive = _useState4[1];
|
78
|
+
|
68
79
|
var previousState = (0, _hooks.usePreviousValue)({
|
69
80
|
cellSize: cellSize
|
70
81
|
});
|
@@ -110,6 +121,39 @@ var DataSpreadsheetHeader = /*#__PURE__*/(0, _react.forwardRef)(function (_ref,
|
|
110
121
|
});
|
111
122
|
};
|
112
123
|
|
124
|
+
var handleHeaderMouseDown = function handleHeaderMouseDown(index) {
|
125
|
+
return function (event) {
|
126
|
+
var _selectionAreaToClone;
|
127
|
+
|
128
|
+
setSelectedHeaderReorderActive(true);
|
129
|
+
var clickXPosition = event.clientX;
|
130
|
+
var headerButtonCoords = event.target.getBoundingClientRect();
|
131
|
+
var offsetXValue = clickXPosition - headerButtonCoords.left;
|
132
|
+
var bodyContainer = document.querySelector(".".concat(blockClass, "__list--container")).firstElementChild;
|
133
|
+
var selectionAreaToClone = selectionAreas.filter(function (item) {
|
134
|
+
var _item$header;
|
135
|
+
|
136
|
+
return (item === null || item === void 0 ? void 0 : (_item$header = item.header) === null || _item$header === void 0 ? void 0 : _item$header.index) === index;
|
137
|
+
});
|
138
|
+
var selectionAreaElement = ref.current.querySelector("[data-matcher-id=\"".concat((_selectionAreaToClone = selectionAreaToClone[0]) === null || _selectionAreaToClone === void 0 ? void 0 : _selectionAreaToClone.matcher, "\"]"));
|
139
|
+
var selectionAreaClonedElement = selectionAreaElement.cloneNode();
|
140
|
+
var reorderIndicatorLine = selectionAreaElement.cloneNode();
|
141
|
+
reorderIndicatorLine.className = "".concat(blockClass, "__reorder-indicator-line");
|
142
|
+
reorderIndicatorLine.style.width = (0, _layout.px)(2);
|
143
|
+
selectionAreaClonedElement.classList.add("".concat(blockClass, "__selection-area--element-cloned"));
|
144
|
+
selectionAreaClonedElement.setAttribute('data-clone-offset-x', offsetXValue);
|
145
|
+
selectionAreaClonedElement.setAttribute('data-column-index-original', index);
|
146
|
+
bodyContainer.appendChild(selectionAreaClonedElement);
|
147
|
+
bodyContainer.appendChild(reorderIndicatorLine);
|
148
|
+
setHeaderCellHoldActive(true);
|
149
|
+
};
|
150
|
+
};
|
151
|
+
|
152
|
+
(0, _hooks2.useSpreadsheetMouseMove)({
|
153
|
+
ref: ref,
|
154
|
+
headerCellHoldActive: headerCellHoldActive,
|
155
|
+
defaultColumn: defaultColumn
|
156
|
+
});
|
113
157
|
return /*#__PURE__*/_react.default.createElement("div", {
|
114
158
|
className: (0, _classnames.default)("".concat(blockClass, "__header--container")),
|
115
159
|
role: "rowgroup"
|
@@ -146,6 +190,7 @@ var DataSpreadsheetHeader = /*#__PURE__*/(0, _react.forwardRef)(function (_ref,
|
|
146
190
|
}, "\xA0")), headerGroup.headers.map(function (column, index) {
|
147
191
|
var _cx2;
|
148
192
|
|
193
|
+
var selectedHeader = (0, _checkSelectedHeaderCell.checkSelectedHeaderCell)(index, selectionAreas, 'column');
|
149
194
|
return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
|
150
195
|
key: "column_".concat(index),
|
151
196
|
role: "columnheader",
|
@@ -155,12 +200,16 @@ var DataSpreadsheetHeader = /*#__PURE__*/(0, _react.forwardRef)(function (_ref,
|
|
155
200
|
"data-row-index": "header",
|
156
201
|
"data-column-index": index,
|
157
202
|
tabIndex: -1,
|
158
|
-
|
203
|
+
onMouseDown: selectedHeader ? handleHeaderMouseDown(index) : null,
|
204
|
+
onMouseUp: selectedHeader ? function () {
|
205
|
+
return setSelectedHeaderReorderActive(false);
|
206
|
+
} : null,
|
207
|
+
onClick: !selectedHeader ? handleColumnHeaderClick(index) : null,
|
159
208
|
style: {
|
160
209
|
height: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeight,
|
161
210
|
width: (column === null || column === void 0 ? void 0 : column.width) || (defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.width)
|
162
211
|
},
|
163
|
-
className: (0, _classnames.default)("".concat(blockClass, "__th"), "".concat(blockClass, "--interactive-cell-element"), (_cx2 = {}, (0, _defineProperty2.default)(_cx2, "".concat(blockClass, "__th--active-header"), (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === index || (0, _checkActiveHeaderCell.checkActiveHeaderCell)(index, selectionAreas, 'column')), (0, _defineProperty2.default)(_cx2, "".concat(blockClass, "__th--selected-header"), (0,
|
212
|
+
className: (0, _classnames.default)("".concat(blockClass, "__th"), "".concat(blockClass, "--interactive-cell-element"), (_cx2 = {}, (0, _defineProperty2.default)(_cx2, "".concat(blockClass, "__th--active-header"), (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === index || (0, _checkActiveHeaderCell.checkActiveHeaderCell)(index, selectionAreas, 'column')), (0, _defineProperty2.default)(_cx2, "".concat(blockClass, "__th--selected-header"), selectedHeader), (0, _defineProperty2.default)(_cx2, "".concat(blockClass, "__th--selected-header-reorder-active"), selectedHeaderReorderActive), _cx2)),
|
164
213
|
type: "button"
|
165
214
|
}, column.render('Header')));
|
166
215
|
}));
|
@@ -195,6 +244,11 @@ DataSpreadsheetHeader.propTypes = {
|
|
195
244
|
width: _propTypes.default.number
|
196
245
|
}),
|
197
246
|
|
247
|
+
/**
|
248
|
+
* Whether or not a click/hold is active on a header cell
|
249
|
+
*/
|
250
|
+
headerCellHoldActive: _propTypes.default.bool,
|
251
|
+
|
198
252
|
/**
|
199
253
|
* Headers provided from useTable hook
|
200
254
|
*/
|
@@ -225,6 +279,11 @@ DataSpreadsheetHeader.propTypes = {
|
|
225
279
|
*/
|
226
280
|
setCurrentMatcher: _propTypes.default.func,
|
227
281
|
|
282
|
+
/**
|
283
|
+
* Setter fn for header cell hold active value
|
284
|
+
*/
|
285
|
+
setHeaderCellHoldActive: _propTypes.default.func,
|
286
|
+
|
228
287
|
/**
|
229
288
|
* Setter fn for selectionAreaData state value
|
230
289
|
*/
|
@@ -27,6 +27,18 @@ Object.defineProperty(exports, "useSpreadsheetEdit", {
|
|
27
27
|
return _useSpreadsheetEdit.useSpreadsheetEdit;
|
28
28
|
}
|
29
29
|
});
|
30
|
+
Object.defineProperty(exports, "useSpreadsheetMouseMove", {
|
31
|
+
enumerable: true,
|
32
|
+
get: function get() {
|
33
|
+
return _useSpreadsheetMouseMove.useSpreadsheetMouseMove;
|
34
|
+
}
|
35
|
+
});
|
36
|
+
Object.defineProperty(exports, "useSpreadsheetMouseUp", {
|
37
|
+
enumerable: true,
|
38
|
+
get: function get() {
|
39
|
+
return _useSpreadsheetMouseUp.useSpreadsheetMouseUp;
|
40
|
+
}
|
41
|
+
});
|
30
42
|
Object.defineProperty(exports, "useSpreadsheetOutsideClick", {
|
31
43
|
enumerable: true,
|
32
44
|
get: function get() {
|
@@ -42,4 +54,8 @@ var _useResetSpreadsheetFocus = require("./useResetSpreadsheetFocus");
|
|
42
54
|
|
43
55
|
var _useSpreadsheetOutsideClick = require("./useSpreadsheetOutsideClick");
|
44
56
|
|
45
|
-
var _useSpreadsheetEdit = require("./useSpreadsheetEdit");
|
57
|
+
var _useSpreadsheetEdit = require("./useSpreadsheetEdit");
|
58
|
+
|
59
|
+
var _useSpreadsheetMouseUp = require("./useSpreadsheetMouseUp");
|
60
|
+
|
61
|
+
var _useSpreadsheetMouseMove = require("./useSpreadsheetMouseMove");
|
@@ -17,12 +17,12 @@ var _settings = require("../../../settings");
|
|
17
17
|
|
18
18
|
var _hooks = require("../../../global/js/hooks");
|
19
19
|
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
20
|
+
/**
|
21
|
+
* Copyright IBM Corp. 2022, 2022
|
22
|
+
*
|
23
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
24
|
+
* LICENSE file in the root directory of this source tree.
|
25
|
+
*/
|
26
26
|
var useSpreadsheetEdit = function useSpreadsheetEdit(_ref) {
|
27
27
|
var isEditing = _ref.isEditing,
|
28
28
|
rows = _ref.rows,
|
@@ -30,7 +30,7 @@ var useSpreadsheetEdit = function useSpreadsheetEdit(_ref) {
|
|
30
30
|
activeCellRef = _ref.activeCellRef,
|
31
31
|
cellEditorRef = _ref.cellEditorRef,
|
32
32
|
cellEditorRulerRef = _ref.cellEditorRulerRef,
|
33
|
-
|
33
|
+
visibleColumns = _ref.visibleColumns,
|
34
34
|
defaultColumn = _ref.defaultColumn,
|
35
35
|
cellEditorValue = _ref.cellEditorValue,
|
36
36
|
_ref$blockClass = _ref.blockClass,
|
@@ -69,9 +69,9 @@ var useSpreadsheetEdit = function useSpreadsheetEdit(_ref) {
|
|
69
69
|
(_cellEditorRef$curren = cellEditorRef.current) === null || _cellEditorRef$curren === void 0 ? void 0 : _cellEditorRef$curren.focus();
|
70
70
|
|
71
71
|
if (rulerWidth < cellEditorCurrentWidth) {
|
72
|
-
var
|
72
|
+
var _visibleColumns$nextI;
|
73
73
|
|
74
|
-
var currentColumnWidth = ((
|
74
|
+
var currentColumnWidth = ((_visibleColumns$nextI = visibleColumns[nextIndex]) === null || _visibleColumns$nextI === void 0 ? void 0 : _visibleColumns$nextI.width) || (defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.width); // If the contents of the cell editor is deleted past the point of the next column
|
75
75
|
|
76
76
|
if (rulerWidth < cellEditorCurrentWidth - currentColumnWidth) {
|
77
77
|
cellEditorRef.current.style.width = (0, _layout.px)(parseInt(cellEditorRef.current.style.width) - currentColumnWidth);
|
@@ -87,17 +87,17 @@ var useSpreadsheetEdit = function useSpreadsheetEdit(_ref) {
|
|
87
87
|
}
|
88
88
|
|
89
89
|
if (rulerWidth >= cellEditorCurrentWidth) {
|
90
|
-
var
|
90
|
+
var _visibleColumns;
|
91
91
|
|
92
92
|
setNextIndex(function (prev) {
|
93
|
-
if (prev ===
|
93
|
+
if (prev === visibleColumns.length - 1) {
|
94
94
|
return prev;
|
95
95
|
}
|
96
96
|
|
97
97
|
return prev + 1;
|
98
98
|
});
|
99
|
-
var onLastColumnIndex = nextIndex + 1 ===
|
100
|
-
var nextColumnWidth = onLastColumnIndex ? 0 : ((
|
99
|
+
var onLastColumnIndex = nextIndex + 1 === visibleColumns.length;
|
100
|
+
var nextColumnWidth = onLastColumnIndex ? 0 : ((_visibleColumns = visibleColumns[nextIndex + 1]) === null || _visibleColumns === void 0 ? void 0 : _visibleColumns.width) || (defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.width);
|
101
101
|
var startingRowPosition = activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row;
|
102
102
|
var totalRows = rows.length;
|
103
103
|
var totalCellEditorMaxHeight = (totalRows - startingRowPosition) * defaultColumn.rowHeight;
|
@@ -123,7 +123,7 @@ var useSpreadsheetEdit = function useSpreadsheetEdit(_ref) {
|
|
123
123
|
activeCellRef.current.focus();
|
124
124
|
setNextIndex(activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column);
|
125
125
|
}
|
126
|
-
}, [isEditing, activeCellCoordinates, rows, cellEditorValue,
|
126
|
+
}, [isEditing, activeCellCoordinates, rows, cellEditorValue, defaultColumn, activeCellRef, cellEditorRef, cellEditorRulerRef, visibleColumns, blockClass, previousState === null || previousState === void 0 ? void 0 : previousState.cellEditorValue, nextIndex]);
|
127
127
|
};
|
128
128
|
|
129
129
|
exports.useSpreadsheetEdit = useSpreadsheetEdit;
|
@@ -0,0 +1,74 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.useSpreadsheetMouseMove = void 0;
|
7
|
+
|
8
|
+
var _react = require("react");
|
9
|
+
|
10
|
+
var _layout = require("@carbon/layout");
|
11
|
+
|
12
|
+
var _settings = require("../../../settings");
|
13
|
+
|
14
|
+
var _getScrollbarWidth = require("../../../global/js/utils/getScrollbarWidth");
|
15
|
+
|
16
|
+
var _moveColumnIndicatorLine = require("../utils/moveColumnIndicatorLine");
|
17
|
+
|
18
|
+
/**
|
19
|
+
* Copyright IBM Corp. 2022, 2022
|
20
|
+
*
|
21
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
22
|
+
* LICENSE file in the root directory of this source tree.
|
23
|
+
*/
|
24
|
+
// Used specifically for reordering columns, will move the position of the
|
25
|
+
// cloned selection area to follow the position of the cursor
|
26
|
+
var useSpreadsheetMouseMove = function useSpreadsheetMouseMove(_ref) {
|
27
|
+
var ref = _ref.ref,
|
28
|
+
_ref$blockClass = _ref.blockClass,
|
29
|
+
blockClass = _ref$blockClass === void 0 ? "".concat(_settings.pkg.prefix, "--data-spreadsheet") : _ref$blockClass,
|
30
|
+
headerCellHoldActive = _ref.headerCellHoldActive,
|
31
|
+
defaultColumn = _ref.defaultColumn;
|
32
|
+
(0, _react.useEffect)(function () {
|
33
|
+
var handleMouseMove = function handleMouseMove(event) {
|
34
|
+
var clonedSelectionElement = ref.current.querySelector(".".concat(blockClass, "__selection-area--element-cloned"));
|
35
|
+
|
36
|
+
if (clonedSelectionElement) {
|
37
|
+
ref.current.addEventListener('mousemove', handleMouseMove);
|
38
|
+
}
|
39
|
+
|
40
|
+
var spreadsheetCoords = ref.current.getBoundingClientRect();
|
41
|
+
(0, _moveColumnIndicatorLine.moveColumnIndicatorLine)({
|
42
|
+
clonedSelectionElement: clonedSelectionElement,
|
43
|
+
ref: ref,
|
44
|
+
spreadsheetCoords: spreadsheetCoords
|
45
|
+
});
|
46
|
+
var scrollbarWidth = (0, _getScrollbarWidth.getScrollbarWidth)();
|
47
|
+
var spreadsheetWrapperElement = ref.current;
|
48
|
+
spreadsheetWrapperElement.getBoundingClientRect();
|
49
|
+
var xPositionRelativeToSpreadsheet = event.clientX - spreadsheetCoords.left;
|
50
|
+
var offsetXValue = clonedSelectionElement === null || clonedSelectionElement === void 0 ? void 0 : clonedSelectionElement.getAttribute('data-clone-offset-x');
|
51
|
+
var totalSpreadsheetWidth = ref.current.offsetWidth;
|
52
|
+
var clonedSelectionWidth = clonedSelectionElement.offsetWidth;
|
53
|
+
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
|
54
|
+
|
55
|
+
clonedSelectionElement.style.left = (0, _layout.px)(totalSpreadsheetWidth - clonedSelectionWidth - scrollbarWidth >= clonePlacement ? clonePlacement : totalSpreadsheetWidth - clonedSelectionWidth - scrollbarWidth);
|
56
|
+
};
|
57
|
+
|
58
|
+
if (headerCellHoldActive) {
|
59
|
+
ref.current.addEventListener('mousemove', handleMouseMove);
|
60
|
+
}
|
61
|
+
|
62
|
+
var spreadsheetRef = ref.current;
|
63
|
+
|
64
|
+
if (!headerCellHoldActive) {
|
65
|
+
spreadsheetRef === null || spreadsheetRef === void 0 ? void 0 : spreadsheetRef.removeEventListener('mousemove', handleMouseMove);
|
66
|
+
}
|
67
|
+
|
68
|
+
return function () {
|
69
|
+
spreadsheetRef === null || spreadsheetRef === void 0 ? void 0 : spreadsheetRef.removeEventListener('mousemove', handleMouseMove);
|
70
|
+
};
|
71
|
+
});
|
72
|
+
};
|
73
|
+
|
74
|
+
exports.useSpreadsheetMouseMove = useSpreadsheetMouseMove;
|
@@ -0,0 +1,161 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
4
|
+
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
6
|
+
value: true
|
7
|
+
});
|
8
|
+
exports.useSpreadsheetMouseUp = void 0;
|
9
|
+
|
10
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
11
|
+
|
12
|
+
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
13
|
+
|
14
|
+
var _react = require("react");
|
15
|
+
|
16
|
+
var _layout = require("@carbon/layout");
|
17
|
+
|
18
|
+
var _settings = require("../../../settings");
|
19
|
+
|
20
|
+
var _deepCloneObject = require("../../../global/js/utils/deepCloneObject");
|
21
|
+
|
22
|
+
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; }
|
23
|
+
|
24
|
+
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; }
|
25
|
+
|
26
|
+
var useSpreadsheetMouseUp = function useSpreadsheetMouseUp(_ref) {
|
27
|
+
var currentMatcher = _ref.currentMatcher,
|
28
|
+
setSelectionAreas = _ref.setSelectionAreas,
|
29
|
+
setClickAndHoldActive = _ref.setClickAndHoldActive,
|
30
|
+
setValidStartingPoint = _ref.setValidStartingPoint,
|
31
|
+
validStartingPoint = _ref.validStartingPoint,
|
32
|
+
_ref$blockClass = _ref.blockClass,
|
33
|
+
blockClass = _ref$blockClass === void 0 ? "".concat(_settings.pkg.prefix, "--data-spreadsheet") : _ref$blockClass,
|
34
|
+
ref = _ref.ref,
|
35
|
+
setHeaderCellHoldActive = _ref.setHeaderCellHoldActive,
|
36
|
+
setColumnOrder = _ref.setColumnOrder,
|
37
|
+
visibleColumns = _ref.visibleColumns,
|
38
|
+
setActiveCellCoordinates = _ref.setActiveCellCoordinates,
|
39
|
+
activeCellCoordinates = _ref.activeCellCoordinates,
|
40
|
+
rows = _ref.rows,
|
41
|
+
defaultColumn = _ref.defaultColumn;
|
42
|
+
(0, _react.useEffect)(function () {
|
43
|
+
var handleMouseUp = function handleMouseUp(event) {
|
44
|
+
// Remove the cloned selection area on mouse up
|
45
|
+
if (!validStartingPoint) {
|
46
|
+
setHeaderCellHoldActive(false);
|
47
|
+
var selectionAreaCloneElement = ref.current.querySelector(".".concat(blockClass, "__selection-area--element-cloned"));
|
48
|
+
|
49
|
+
if (!selectionAreaCloneElement) {
|
50
|
+
return;
|
51
|
+
} // Mouse up while a cloned selection area exists/a column is being reordered
|
52
|
+
|
53
|
+
|
54
|
+
if (selectionAreaCloneElement) {
|
55
|
+
var closestCell = event.target.closest(".".concat(blockClass, "--interactive-cell-element"));
|
56
|
+
var newColumnIndex = closestCell === null || closestCell === void 0 ? void 0 : closestCell.getAttribute('data-column-index');
|
57
|
+
var originalColumnIndex = selectionAreaCloneElement === null || selectionAreaCloneElement === void 0 ? void 0 : selectionAreaCloneElement.getAttribute('data-column-index-original');
|
58
|
+
var columnToMoveToElement = ref.current.querySelector("[data-row-index=\"header\"][data-column-index=\"".concat(newColumnIndex, "\"]")); // Mouse up element was not part of the spreadsheet component
|
59
|
+
|
60
|
+
if (!columnToMoveToElement) {
|
61
|
+
return;
|
62
|
+
}
|
63
|
+
|
64
|
+
var selectionAreaToMove = ref.current.querySelector("[data-matcher-id=\"".concat(currentMatcher, "\"]"));
|
65
|
+
var spreadsheetPosition = ref.current.getBoundingClientRect();
|
66
|
+
var newIndexPosition = columnToMoveToElement.getBoundingClientRect();
|
67
|
+
var relativeNewPosition = newIndexPosition.left - spreadsheetPosition.left;
|
68
|
+
var cloneColumnWidth = selectionAreaCloneElement.offsetWidth;
|
69
|
+
var columnsWidthUpToNewIndex = 0;
|
70
|
+
var newIndexLessThanStarting = newColumnIndex < originalColumnIndex;
|
71
|
+
visibleColumns.forEach(function (item, index) {
|
72
|
+
if (newIndexLessThanStarting && index === visibleColumns.length - 1) {
|
73
|
+
return;
|
74
|
+
}
|
75
|
+
|
76
|
+
if (index <= newColumnIndex) {
|
77
|
+
columnsWidthUpToNewIndex += (item === null || item === void 0 ? void 0 : item.width) || (defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.width);
|
78
|
+
}
|
79
|
+
});
|
80
|
+
var updatedSelectionAreaPlacement = newIndexLessThanStarting ? relativeNewPosition : columnsWidthUpToNewIndex - cloneColumnWidth + (defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeaderWidth);
|
81
|
+
selectionAreaToMove.style.left = (0, _layout.px)(updatedSelectionAreaPlacement);
|
82
|
+
setSelectionAreas(function (prev) {
|
83
|
+
var selectionAreaClone = (0, _deepCloneObject.deepCloneObject)(prev);
|
84
|
+
|
85
|
+
if (originalColumnIndex === newColumnIndex) {
|
86
|
+
return prev;
|
87
|
+
}
|
88
|
+
|
89
|
+
var indexOfItemToUpdate = selectionAreaClone.findIndex(function (item) {
|
90
|
+
return item.matcher === currentMatcher;
|
91
|
+
});
|
92
|
+
|
93
|
+
if (indexOfItemToUpdate === -1) {
|
94
|
+
return prev;
|
95
|
+
}
|
96
|
+
|
97
|
+
selectionAreaClone[indexOfItemToUpdate].header.index = Number(newColumnIndex);
|
98
|
+
selectionAreaClone[indexOfItemToUpdate].point1.column = Number(newColumnIndex);
|
99
|
+
selectionAreaClone[indexOfItemToUpdate].point2.column = Number(newColumnIndex);
|
100
|
+
return selectionAreaClone;
|
101
|
+
});
|
102
|
+
var columnIdArray = visibleColumns.map(function (column) {
|
103
|
+
return column.id;
|
104
|
+
});
|
105
|
+
var columnIdArrayClone = (0, _toConsumableArray2.default)(columnIdArray); // Remove one element at the original index
|
106
|
+
|
107
|
+
columnIdArrayClone.splice(originalColumnIndex, 1); // Add one element at the new index
|
108
|
+
|
109
|
+
columnIdArrayClone.splice(newColumnIndex, 0, columnIdArray[originalColumnIndex]);
|
110
|
+
setColumnOrder(columnIdArrayClone); // Function provided by useTable (react-table) hook to reorder columns
|
111
|
+
|
112
|
+
var newCellCoords = _objectSpread(_objectSpread({}, activeCellCoordinates), {}, {
|
113
|
+
column: Number(newColumnIndex)
|
114
|
+
});
|
115
|
+
|
116
|
+
setActiveCellCoordinates(newCellCoords); // Remove the cloned column and indicator elements
|
117
|
+
|
118
|
+
var indicatorLineElement = ref.current.querySelector(".".concat(blockClass, "__reorder-indicator-line"));
|
119
|
+
indicatorLineElement === null || indicatorLineElement === void 0 ? void 0 : indicatorLineElement.remove();
|
120
|
+
selectionAreaCloneElement === null || selectionAreaCloneElement === void 0 ? void 0 : selectionAreaCloneElement.remove();
|
121
|
+
}
|
122
|
+
} // Mouse up was on a spreadsheet body cell which is a valid
|
123
|
+
// start/end point for creating a selection area
|
124
|
+
|
125
|
+
|
126
|
+
if (validStartingPoint) {
|
127
|
+
setClickAndHoldActive(false);
|
128
|
+
setValidStartingPoint(false);
|
129
|
+
var cellButton = event.target.closest(".".concat(blockClass, "__body--td"));
|
130
|
+
|
131
|
+
if (cellButton) {
|
132
|
+
var endCellCoordinates = {
|
133
|
+
row: Number(cellButton.getAttribute('data-row-index')),
|
134
|
+
column: Number(cellButton.getAttribute('data-column-index'))
|
135
|
+
};
|
136
|
+
setSelectionAreas(function (prev) {
|
137
|
+
var selectionAreaClone = (0, _deepCloneObject.deepCloneObject)(prev);
|
138
|
+
var indexOfItemToUpdate = selectionAreaClone.findIndex(function (item) {
|
139
|
+
return item.matcher === currentMatcher;
|
140
|
+
}); // No items in the array have an object that matches the value of currentMatcher
|
141
|
+
|
142
|
+
if (indexOfItemToUpdate === -1) {
|
143
|
+
return prev;
|
144
|
+
}
|
145
|
+
|
146
|
+
selectionAreaClone[indexOfItemToUpdate].point2 = endCellCoordinates;
|
147
|
+
selectionAreaClone[indexOfItemToUpdate].areaCreated = false;
|
148
|
+
return selectionAreaClone;
|
149
|
+
});
|
150
|
+
}
|
151
|
+
}
|
152
|
+
};
|
153
|
+
|
154
|
+
document.addEventListener('mouseup', handleMouseUp);
|
155
|
+
return function () {
|
156
|
+
document.removeEventListener('mouseup', handleMouseUp);
|
157
|
+
};
|
158
|
+
}, [blockClass, currentMatcher, setSelectionAreas, setClickAndHoldActive, setValidStartingPoint, validStartingPoint, ref, setHeaderCellHoldActive, setColumnOrder, visibleColumns, setActiveCellCoordinates, activeCellCoordinates, rows, defaultColumn]);
|
159
|
+
};
|
160
|
+
|
161
|
+
exports.useSpreadsheetMouseUp = useSpreadsheetMouseUp;
|
@@ -21,11 +21,11 @@ var createCellSelectionArea = function createCellSelectionArea(_ref) {
|
|
21
21
|
var ref = _ref.ref,
|
22
22
|
area = _ref.area,
|
23
23
|
blockClass = _ref.blockClass,
|
24
|
-
columns = _ref.columns,
|
25
24
|
defaultColumn = _ref.defaultColumn,
|
26
25
|
selectionAreas = _ref.selectionAreas,
|
27
26
|
setSelectionAreas = _ref.setSelectionAreas,
|
28
|
-
setActiveCellInsideSelectionArea = _ref.setActiveCellInsideSelectionArea
|
27
|
+
setActiveCellInsideSelectionArea = _ref.setActiveCellInsideSelectionArea,
|
28
|
+
visibleColumns = _ref.visibleColumns;
|
29
29
|
|
30
30
|
var _getSelectionAreaPoin = (0, _getSelectionAreaPoints.getSelectionAreaPoints)(area),
|
31
31
|
lowestColumnIndex = _getSelectionAreaPoin.lowestColumnIndex,
|
@@ -40,7 +40,7 @@ var createCellSelectionArea = function createCellSelectionArea(_ref) {
|
|
40
40
|
}
|
41
41
|
|
42
42
|
var selectionAreaVariableWidth = 0;
|
43
|
-
|
43
|
+
visibleColumns.forEach(function (item, index) {
|
44
44
|
if (index >= lowestColumnIndex && index <= greatestColumnIndex) {
|
45
45
|
selectionAreaVariableWidth += (item === null || item === void 0 ? void 0 : item.width) || (defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.width);
|
46
46
|
}
|
@@ -0,0 +1,45 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.moveColumnIndicatorLine = void 0;
|
7
|
+
|
8
|
+
var _layout = require("@carbon/layout");
|
9
|
+
|
10
|
+
var _settings = require("../../../settings");
|
11
|
+
|
12
|
+
/**
|
13
|
+
* Copyright IBM Corp. 2022, 2022
|
14
|
+
*
|
15
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
16
|
+
* LICENSE file in the root directory of this source tree.
|
17
|
+
*/
|
18
|
+
var moveColumnIndicatorLine = function moveColumnIndicatorLine(_ref) {
|
19
|
+
var _ref$blockClass = _ref.blockClass,
|
20
|
+
blockClass = _ref$blockClass === void 0 ? "".concat(_settings.pkg.prefix, "--data-spreadsheet") : _ref$blockClass,
|
21
|
+
clonedSelectionElement = _ref.clonedSelectionElement,
|
22
|
+
ref = _ref.ref,
|
23
|
+
spreadsheetCoords = _ref.spreadsheetCoords;
|
24
|
+
var closestCell = event.target.closest(".".concat(blockClass, "--interactive-cell-element"));
|
25
|
+
var newColumnIndex = closestCell === null || closestCell === void 0 ? void 0 : closestCell.getAttribute('data-column-index');
|
26
|
+
var originalColumnIndex = clonedSelectionElement === null || clonedSelectionElement === void 0 ? void 0 : clonedSelectionElement.getAttribute('data-column-index-original');
|
27
|
+
var closestCellCoords = closestCell.getBoundingClientRect();
|
28
|
+
var indicatorLineElement = ref.current.querySelector(".".concat(blockClass, "__reorder-indicator-line"));
|
29
|
+
var matcherId = clonedSelectionElement === null || clonedSelectionElement === void 0 ? void 0 : clonedSelectionElement.getAttribute('data-matcher-id');
|
30
|
+
var selectionAreaOrigin = ref.current.querySelector("[data-matcher-id=\"".concat(matcherId, "\"]"));
|
31
|
+
|
32
|
+
if (Number(newColumnIndex) > Number(originalColumnIndex)) {
|
33
|
+
indicatorLineElement.style.left = (0, _layout.px)(closestCellCoords.left - spreadsheetCoords.left + closestCell.offsetWidth - 2);
|
34
|
+
}
|
35
|
+
|
36
|
+
if (Number(newColumnIndex) < Number(originalColumnIndex)) {
|
37
|
+
indicatorLineElement.style.left = (0, _layout.px)(closestCellCoords.left - spreadsheetCoords.left);
|
38
|
+
}
|
39
|
+
|
40
|
+
if (Number(newColumnIndex) === Number(originalColumnIndex)) {
|
41
|
+
indicatorLineElement.style.left = selectionAreaOrigin.style.left;
|
42
|
+
}
|
43
|
+
};
|
44
|
+
|
45
|
+
exports.moveColumnIndicatorLine = moveColumnIndicatorLine;
|
package/package.json
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
{
|
2
2
|
"name": "@carbon/ibm-products",
|
3
3
|
"description": "Carbon for IBM Products",
|
4
|
-
"version": "1.
|
4
|
+
"version": "1.18.0",
|
5
5
|
"license": "Apache-2.0",
|
6
6
|
"main": "lib/index.js",
|
7
7
|
"module": "es/index.js",
|
@@ -50,19 +50,20 @@
|
|
50
50
|
"upgrade-dependencies": "npm-check-updates -u --dep dev,peer,prod --color --reject '/(carbon|^react$|^react-dom$|^chalk$|^react-dnd|^namor)/'"
|
51
51
|
},
|
52
52
|
"devDependencies": {
|
53
|
-
"@babel/cli": "^7.17.
|
54
|
-
"@babel/core": "^7.17.
|
55
|
-
"babel-preset-ibm-cloud-cognitive": "^0.14.
|
53
|
+
"@babel/cli": "^7.17.10",
|
54
|
+
"@babel/core": "^7.17.10",
|
55
|
+
"babel-preset-ibm-cloud-cognitive": "^0.14.15",
|
56
56
|
"chalk": "^4.1.2",
|
57
57
|
"change-case": "^4.1.2",
|
58
58
|
"copyfiles": "^2.4.1",
|
59
59
|
"cross-env": "^7.0.3",
|
60
60
|
"fs-extra": "^10.1.0",
|
61
61
|
"glob": "^8.0.1",
|
62
|
-
"jest": "^
|
63
|
-
"jest-config-ibm-cloud-cognitive": "^0.23.
|
62
|
+
"jest": "^28.0.3",
|
63
|
+
"jest-config-ibm-cloud-cognitive": "^0.23.18",
|
64
|
+
"jest-environment-jsdom": "^28.1.0",
|
64
65
|
"namor": "^1.1.2",
|
65
|
-
"npm-check-updates": "^12.5.
|
66
|
+
"npm-check-updates": "^12.5.11",
|
66
67
|
"npm-run-all": "^4.1.5",
|
67
68
|
"rimraf": "^3.0.2",
|
68
69
|
"sass": "^1.51.0",
|
@@ -86,11 +87,11 @@
|
|
86
87
|
"@carbon/motion": "^10.29.0",
|
87
88
|
"@carbon/themes": "^10.54.0",
|
88
89
|
"@carbon/type": "^10.44.0",
|
89
|
-
"carbon-components": "^10.
|
90
|
-
"carbon-components-react": "^7.
|
90
|
+
"carbon-components": "^10.57.1",
|
91
|
+
"carbon-components-react": "^7.57.1",
|
91
92
|
"carbon-icons": "^7.0.7",
|
92
93
|
"react": "^16.8.6 || ^17.0.1",
|
93
94
|
"react-dom": "^16.8.6 || ^17.0.1"
|
94
95
|
},
|
95
|
-
"gitHead": "
|
96
|
+
"gitHead": "6bf1f85853417a8b5142207318b12290254201bf"
|
96
97
|
}
|
@@ -180,19 +180,6 @@
|
|
180
180
|
outline: 0;
|
181
181
|
}
|
182
182
|
}
|
183
|
-
.#{$block-class}__active-cell--highlight.#{$block-class}__active-cell--with-selection {
|
184
|
-
&::before {
|
185
|
-
position: absolute;
|
186
|
-
top: 0;
|
187
|
-
left: 0;
|
188
|
-
display: block;
|
189
|
-
width: 100%;
|
190
|
-
height: 100%;
|
191
|
-
background-color: $interactive-01;
|
192
|
-
content: '';
|
193
|
-
opacity: 0.25;
|
194
|
-
}
|
195
|
-
}
|
196
183
|
.#{$block-class}__selection-area--element {
|
197
184
|
position: absolute;
|
198
185
|
z-index: 2;
|
@@ -210,6 +197,20 @@
|
|
210
197
|
content: '';
|
211
198
|
opacity: 0.2;
|
212
199
|
}
|
200
|
+
&.#{$block-class}__selection-area--element-cloned {
|
201
|
+
z-index: 4;
|
202
|
+
|
203
|
+
&::before {
|
204
|
+
background-color: $ui-05;
|
205
|
+
opacity: 0.25;
|
206
|
+
}
|
207
|
+
}
|
208
|
+
}
|
209
|
+
.#{$block-class}__reorder-indicator-line {
|
210
|
+
position: absolute;
|
211
|
+
z-index: 4;
|
212
|
+
width: $spacing-01;
|
213
|
+
background-color: $interactive-01;
|
213
214
|
}
|
214
215
|
.#{$block-class}__th--active-header,
|
215
216
|
.#{$block-class}__td-th--active-header.#{$block-class}__td {
|
@@ -220,10 +221,17 @@
|
|
220
221
|
background-color: $inverse-02;
|
221
222
|
color: $text-04;
|
222
223
|
|
224
|
+
&:focus,
|
223
225
|
&:hover {
|
224
226
|
background-color: $inverse-02;
|
225
227
|
}
|
226
228
|
}
|
229
|
+
.#{$block-class}__th--selected-header.#{$block-class}__th {
|
230
|
+
cursor: grab;
|
231
|
+
}
|
232
|
+
.#{$block-class}__th--selected-header-reorder-active.#{$block-class}__th {
|
233
|
+
cursor: grabbing;
|
234
|
+
}
|
227
235
|
.#{$block-class}__list--container {
|
228
236
|
overscroll-behavior: none;
|
229
237
|
}
|