@carbon/ibm-products 1.17.0 → 1.18.0
Sign up to get free protection for your applications and to get access to all the features.
- 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
@@ -15,6 +15,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
|
|
15
15
|
import React, { forwardRef, useEffect, useState } from 'react';
|
16
16
|
import PropTypes from 'prop-types';
|
17
17
|
import cx from 'classnames';
|
18
|
+
import { px } from '@carbon/layout';
|
18
19
|
import { pkg } from '../../settings';
|
19
20
|
import { usePreviousValue } from '../../global/js/hooks';
|
20
21
|
import { checkActiveHeaderCell } from './utils/checkActiveHeaderCell';
|
@@ -22,6 +23,7 @@ import { checkSelectedHeaderCell } from './utils/checkSelectedHeaderCell';
|
|
22
23
|
import { handleHeaderCellSelection } from './utils/handleHeaderCellSelection';
|
23
24
|
import { selectAllCells } from './utils/selectAllCells';
|
24
25
|
import { getSpreadsheetWidth } from './utils/getSpreadsheetWidth';
|
26
|
+
import { useSpreadsheetMouseMove } from './hooks';
|
25
27
|
var blockClass = "".concat(pkg.prefix, "--data-spreadsheet");
|
26
28
|
export var DataSpreadsheetHeader = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
27
29
|
var activeCellCoordinates = _ref.activeCellCoordinates,
|
@@ -37,13 +39,20 @@ export var DataSpreadsheetHeader = /*#__PURE__*/forwardRef(function (_ref, ref)
|
|
37
39
|
setSelectionAreaData = _ref.setSelectionAreaData,
|
38
40
|
rows = _ref.rows,
|
39
41
|
totalVisibleColumns = _ref.totalVisibleColumns,
|
40
|
-
updateActiveCellCoordinates = _ref.updateActiveCellCoordinates
|
42
|
+
updateActiveCellCoordinates = _ref.updateActiveCellCoordinates,
|
43
|
+
setHeaderCellHoldActive = _ref.setHeaderCellHoldActive,
|
44
|
+
headerCellHoldActive = _ref.headerCellHoldActive;
|
41
45
|
|
42
46
|
var _useState = useState(0),
|
43
47
|
_useState2 = _slicedToArray(_useState, 2),
|
44
48
|
scrollBarSizeValue = _useState2[0],
|
45
49
|
setScrollBarSizeValue = _useState2[1];
|
46
50
|
|
51
|
+
var _useState3 = useState(false),
|
52
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
53
|
+
selectedHeaderReorderActive = _useState4[0],
|
54
|
+
setSelectedHeaderReorderActive = _useState4[1];
|
55
|
+
|
47
56
|
var previousState = usePreviousValue({
|
48
57
|
cellSize: cellSize
|
49
58
|
});
|
@@ -89,6 +98,39 @@ export var DataSpreadsheetHeader = /*#__PURE__*/forwardRef(function (_ref, ref)
|
|
89
98
|
});
|
90
99
|
};
|
91
100
|
|
101
|
+
var handleHeaderMouseDown = function handleHeaderMouseDown(index) {
|
102
|
+
return function (event) {
|
103
|
+
var _selectionAreaToClone;
|
104
|
+
|
105
|
+
setSelectedHeaderReorderActive(true);
|
106
|
+
var clickXPosition = event.clientX;
|
107
|
+
var headerButtonCoords = event.target.getBoundingClientRect();
|
108
|
+
var offsetXValue = clickXPosition - headerButtonCoords.left;
|
109
|
+
var bodyContainer = document.querySelector(".".concat(blockClass, "__list--container")).firstElementChild;
|
110
|
+
var selectionAreaToClone = selectionAreas.filter(function (item) {
|
111
|
+
var _item$header;
|
112
|
+
|
113
|
+
return (item === null || item === void 0 ? void 0 : (_item$header = item.header) === null || _item$header === void 0 ? void 0 : _item$header.index) === index;
|
114
|
+
});
|
115
|
+
var selectionAreaElement = ref.current.querySelector("[data-matcher-id=\"".concat((_selectionAreaToClone = selectionAreaToClone[0]) === null || _selectionAreaToClone === void 0 ? void 0 : _selectionAreaToClone.matcher, "\"]"));
|
116
|
+
var selectionAreaClonedElement = selectionAreaElement.cloneNode();
|
117
|
+
var reorderIndicatorLine = selectionAreaElement.cloneNode();
|
118
|
+
reorderIndicatorLine.className = "".concat(blockClass, "__reorder-indicator-line");
|
119
|
+
reorderIndicatorLine.style.width = px(2);
|
120
|
+
selectionAreaClonedElement.classList.add("".concat(blockClass, "__selection-area--element-cloned"));
|
121
|
+
selectionAreaClonedElement.setAttribute('data-clone-offset-x', offsetXValue);
|
122
|
+
selectionAreaClonedElement.setAttribute('data-column-index-original', index);
|
123
|
+
bodyContainer.appendChild(selectionAreaClonedElement);
|
124
|
+
bodyContainer.appendChild(reorderIndicatorLine);
|
125
|
+
setHeaderCellHoldActive(true);
|
126
|
+
};
|
127
|
+
};
|
128
|
+
|
129
|
+
useSpreadsheetMouseMove({
|
130
|
+
ref: ref,
|
131
|
+
headerCellHoldActive: headerCellHoldActive,
|
132
|
+
defaultColumn: defaultColumn
|
133
|
+
});
|
92
134
|
return /*#__PURE__*/React.createElement("div", {
|
93
135
|
className: cx("".concat(blockClass, "__header--container")),
|
94
136
|
role: "rowgroup"
|
@@ -125,6 +167,7 @@ export var DataSpreadsheetHeader = /*#__PURE__*/forwardRef(function (_ref, ref)
|
|
125
167
|
}, "\xA0")), headerGroup.headers.map(function (column, index) {
|
126
168
|
var _cx2;
|
127
169
|
|
170
|
+
var selectedHeader = checkSelectedHeaderCell(index, selectionAreas, 'column');
|
128
171
|
return /*#__PURE__*/React.createElement("div", _extends({
|
129
172
|
key: "column_".concat(index),
|
130
173
|
role: "columnheader",
|
@@ -134,12 +177,16 @@ export var DataSpreadsheetHeader = /*#__PURE__*/forwardRef(function (_ref, ref)
|
|
134
177
|
"data-row-index": "header",
|
135
178
|
"data-column-index": index,
|
136
179
|
tabIndex: -1,
|
137
|
-
|
180
|
+
onMouseDown: selectedHeader ? handleHeaderMouseDown(index) : null,
|
181
|
+
onMouseUp: selectedHeader ? function () {
|
182
|
+
return setSelectedHeaderReorderActive(false);
|
183
|
+
} : null,
|
184
|
+
onClick: !selectedHeader ? handleColumnHeaderClick(index) : null,
|
138
185
|
style: {
|
139
186
|
height: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeight,
|
140
187
|
width: (column === null || column === void 0 ? void 0 : column.width) || (defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.width)
|
141
188
|
},
|
142
|
-
className: cx("".concat(blockClass, "__th"), "".concat(blockClass, "--interactive-cell-element"), (_cx2 = {}, _defineProperty(_cx2, "".concat(blockClass, "__th--active-header"), (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === index || checkActiveHeaderCell(index, selectionAreas, 'column')), _defineProperty(_cx2, "".concat(blockClass, "__th--selected-header"),
|
189
|
+
className: cx("".concat(blockClass, "__th"), "".concat(blockClass, "--interactive-cell-element"), (_cx2 = {}, _defineProperty(_cx2, "".concat(blockClass, "__th--active-header"), (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === index || checkActiveHeaderCell(index, selectionAreas, 'column')), _defineProperty(_cx2, "".concat(blockClass, "__th--selected-header"), selectedHeader), _defineProperty(_cx2, "".concat(blockClass, "__th--selected-header-reorder-active"), selectedHeaderReorderActive), _cx2)),
|
143
190
|
type: "button"
|
144
191
|
}, column.render('Header')));
|
145
192
|
}));
|
@@ -173,6 +220,11 @@ DataSpreadsheetHeader.propTypes = {
|
|
173
220
|
width: PropTypes.number
|
174
221
|
}),
|
175
222
|
|
223
|
+
/**
|
224
|
+
* Whether or not a click/hold is active on a header cell
|
225
|
+
*/
|
226
|
+
headerCellHoldActive: PropTypes.bool,
|
227
|
+
|
176
228
|
/**
|
177
229
|
* Headers provided from useTable hook
|
178
230
|
*/
|
@@ -203,6 +255,11 @@ DataSpreadsheetHeader.propTypes = {
|
|
203
255
|
*/
|
204
256
|
setCurrentMatcher: PropTypes.func,
|
205
257
|
|
258
|
+
/**
|
259
|
+
* Setter fn for header cell hold active value
|
260
|
+
*/
|
261
|
+
setHeaderCellHoldActive: PropTypes.func,
|
262
|
+
|
206
263
|
/**
|
207
264
|
* Setter fn for selectionAreaData state value
|
208
265
|
*/
|
@@ -8,4 +8,6 @@ export { useMoveActiveCell } from './useMoveActiveCell';
|
|
8
8
|
export { useMultipleKeyTracking } from './useMultipleKeyTracking';
|
9
9
|
export { useResetSpreadsheetFocus } from './useResetSpreadsheetFocus';
|
10
10
|
export { useSpreadsheetOutsideClick } from './useSpreadsheetOutsideClick';
|
11
|
-
export { useSpreadsheetEdit } from './useSpreadsheetEdit';
|
11
|
+
export { useSpreadsheetEdit } from './useSpreadsheetEdit';
|
12
|
+
export { useSpreadsheetMouseUp } from './useSpreadsheetMouseUp';
|
13
|
+
export { useSpreadsheetMouseMove } from './useSpreadsheetMouseMove';
|
@@ -1,10 +1,11 @@
|
|
1
1
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
2
|
+
|
3
|
+
/**
|
4
|
+
* Copyright IBM Corp. 2022, 2022
|
5
|
+
*
|
6
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
7
|
+
* LICENSE file in the root directory of this source tree.
|
8
|
+
*/
|
8
9
|
import { useEffect, useState } from 'react';
|
9
10
|
import { px } from '@carbon/layout';
|
10
11
|
import { pkg } from '../../../settings';
|
@@ -16,7 +17,7 @@ export var useSpreadsheetEdit = function useSpreadsheetEdit(_ref) {
|
|
16
17
|
activeCellRef = _ref.activeCellRef,
|
17
18
|
cellEditorRef = _ref.cellEditorRef,
|
18
19
|
cellEditorRulerRef = _ref.cellEditorRulerRef,
|
19
|
-
|
20
|
+
visibleColumns = _ref.visibleColumns,
|
20
21
|
defaultColumn = _ref.defaultColumn,
|
21
22
|
cellEditorValue = _ref.cellEditorValue,
|
22
23
|
_ref$blockClass = _ref.blockClass,
|
@@ -55,9 +56,9 @@ export var useSpreadsheetEdit = function useSpreadsheetEdit(_ref) {
|
|
55
56
|
(_cellEditorRef$curren = cellEditorRef.current) === null || _cellEditorRef$curren === void 0 ? void 0 : _cellEditorRef$curren.focus();
|
56
57
|
|
57
58
|
if (rulerWidth < cellEditorCurrentWidth) {
|
58
|
-
var
|
59
|
+
var _visibleColumns$nextI;
|
59
60
|
|
60
|
-
var currentColumnWidth = ((
|
61
|
+
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
|
61
62
|
|
62
63
|
if (rulerWidth < cellEditorCurrentWidth - currentColumnWidth) {
|
63
64
|
cellEditorRef.current.style.width = px(parseInt(cellEditorRef.current.style.width) - currentColumnWidth);
|
@@ -73,17 +74,17 @@ export var useSpreadsheetEdit = function useSpreadsheetEdit(_ref) {
|
|
73
74
|
}
|
74
75
|
|
75
76
|
if (rulerWidth >= cellEditorCurrentWidth) {
|
76
|
-
var
|
77
|
+
var _visibleColumns;
|
77
78
|
|
78
79
|
setNextIndex(function (prev) {
|
79
|
-
if (prev ===
|
80
|
+
if (prev === visibleColumns.length - 1) {
|
80
81
|
return prev;
|
81
82
|
}
|
82
83
|
|
83
84
|
return prev + 1;
|
84
85
|
});
|
85
|
-
var onLastColumnIndex = nextIndex + 1 ===
|
86
|
-
var nextColumnWidth = onLastColumnIndex ? 0 : ((
|
86
|
+
var onLastColumnIndex = nextIndex + 1 === visibleColumns.length;
|
87
|
+
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);
|
87
88
|
var startingRowPosition = activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row;
|
88
89
|
var totalRows = rows.length;
|
89
90
|
var totalCellEditorMaxHeight = (totalRows - startingRowPosition) * defaultColumn.rowHeight;
|
@@ -109,5 +110,5 @@ export var useSpreadsheetEdit = function useSpreadsheetEdit(_ref) {
|
|
109
110
|
activeCellRef.current.focus();
|
110
111
|
setNextIndex(activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column);
|
111
112
|
}
|
112
|
-
}, [isEditing, activeCellCoordinates, rows, cellEditorValue,
|
113
|
+
}, [isEditing, activeCellCoordinates, rows, cellEditorValue, defaultColumn, activeCellRef, cellEditorRef, cellEditorRulerRef, visibleColumns, blockClass, previousState === null || previousState === void 0 ? void 0 : previousState.cellEditorValue, nextIndex]);
|
113
114
|
};
|
@@ -0,0 +1,60 @@
|
|
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
|
+
import { pkg } from '../../../settings';
|
10
|
+
import { getScrollbarWidth } from '../../../global/js/utils/getScrollbarWidth';
|
11
|
+
import { moveColumnIndicatorLine } from '../utils/moveColumnIndicatorLine'; // Used specifically for reordering columns, will move the position of the
|
12
|
+
// cloned selection area to follow the position of the cursor
|
13
|
+
|
14
|
+
export var useSpreadsheetMouseMove = function useSpreadsheetMouseMove(_ref) {
|
15
|
+
var ref = _ref.ref,
|
16
|
+
_ref$blockClass = _ref.blockClass,
|
17
|
+
blockClass = _ref$blockClass === void 0 ? "".concat(pkg.prefix, "--data-spreadsheet") : _ref$blockClass,
|
18
|
+
headerCellHoldActive = _ref.headerCellHoldActive,
|
19
|
+
defaultColumn = _ref.defaultColumn;
|
20
|
+
useEffect(function () {
|
21
|
+
var handleMouseMove = function handleMouseMove(event) {
|
22
|
+
var clonedSelectionElement = ref.current.querySelector(".".concat(blockClass, "__selection-area--element-cloned"));
|
23
|
+
|
24
|
+
if (clonedSelectionElement) {
|
25
|
+
ref.current.addEventListener('mousemove', handleMouseMove);
|
26
|
+
}
|
27
|
+
|
28
|
+
var spreadsheetCoords = ref.current.getBoundingClientRect();
|
29
|
+
moveColumnIndicatorLine({
|
30
|
+
clonedSelectionElement: clonedSelectionElement,
|
31
|
+
ref: ref,
|
32
|
+
spreadsheetCoords: spreadsheetCoords
|
33
|
+
});
|
34
|
+
var scrollbarWidth = getScrollbarWidth();
|
35
|
+
var spreadsheetWrapperElement = ref.current;
|
36
|
+
spreadsheetWrapperElement.getBoundingClientRect();
|
37
|
+
var xPositionRelativeToSpreadsheet = event.clientX - spreadsheetCoords.left;
|
38
|
+
var offsetXValue = clonedSelectionElement === null || clonedSelectionElement === void 0 ? void 0 : clonedSelectionElement.getAttribute('data-clone-offset-x');
|
39
|
+
var totalSpreadsheetWidth = ref.current.offsetWidth;
|
40
|
+
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
|
+
|
43
|
+
clonedSelectionElement.style.left = px(totalSpreadsheetWidth - clonedSelectionWidth - scrollbarWidth >= clonePlacement ? clonePlacement : totalSpreadsheetWidth - clonedSelectionWidth - scrollbarWidth);
|
44
|
+
};
|
45
|
+
|
46
|
+
if (headerCellHoldActive) {
|
47
|
+
ref.current.addEventListener('mousemove', handleMouseMove);
|
48
|
+
}
|
49
|
+
|
50
|
+
var spreadsheetRef = ref.current;
|
51
|
+
|
52
|
+
if (!headerCellHoldActive) {
|
53
|
+
spreadsheetRef === null || spreadsheetRef === void 0 ? void 0 : spreadsheetRef.removeEventListener('mousemove', handleMouseMove);
|
54
|
+
}
|
55
|
+
|
56
|
+
return function () {
|
57
|
+
spreadsheetRef === null || spreadsheetRef === void 0 ? void 0 : spreadsheetRef.removeEventListener('mousemove', handleMouseMove);
|
58
|
+
};
|
59
|
+
});
|
60
|
+
};
|
@@ -0,0 +1,153 @@
|
|
1
|
+
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
2
|
+
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
|
3
|
+
|
4
|
+
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; }
|
5
|
+
|
6
|
+
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; }
|
7
|
+
|
8
|
+
/**
|
9
|
+
* Copyright IBM Corp. 2022, 2022
|
10
|
+
*
|
11
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
12
|
+
* LICENSE file in the root directory of this source tree.
|
13
|
+
*/
|
14
|
+
import { useEffect } from 'react';
|
15
|
+
import { px } from '@carbon/layout';
|
16
|
+
import { pkg } from '../../../settings';
|
17
|
+
import { deepCloneObject } from '../../../global/js/utils/deepCloneObject';
|
18
|
+
export var useSpreadsheetMouseUp = function useSpreadsheetMouseUp(_ref) {
|
19
|
+
var currentMatcher = _ref.currentMatcher,
|
20
|
+
setSelectionAreas = _ref.setSelectionAreas,
|
21
|
+
setClickAndHoldActive = _ref.setClickAndHoldActive,
|
22
|
+
setValidStartingPoint = _ref.setValidStartingPoint,
|
23
|
+
validStartingPoint = _ref.validStartingPoint,
|
24
|
+
_ref$blockClass = _ref.blockClass,
|
25
|
+
blockClass = _ref$blockClass === void 0 ? "".concat(pkg.prefix, "--data-spreadsheet") : _ref$blockClass,
|
26
|
+
ref = _ref.ref,
|
27
|
+
setHeaderCellHoldActive = _ref.setHeaderCellHoldActive,
|
28
|
+
setColumnOrder = _ref.setColumnOrder,
|
29
|
+
visibleColumns = _ref.visibleColumns,
|
30
|
+
setActiveCellCoordinates = _ref.setActiveCellCoordinates,
|
31
|
+
activeCellCoordinates = _ref.activeCellCoordinates,
|
32
|
+
rows = _ref.rows,
|
33
|
+
defaultColumn = _ref.defaultColumn;
|
34
|
+
useEffect(function () {
|
35
|
+
var handleMouseUp = function handleMouseUp(event) {
|
36
|
+
// Remove the cloned selection area on mouse up
|
37
|
+
if (!validStartingPoint) {
|
38
|
+
setHeaderCellHoldActive(false);
|
39
|
+
var selectionAreaCloneElement = ref.current.querySelector(".".concat(blockClass, "__selection-area--element-cloned"));
|
40
|
+
|
41
|
+
if (!selectionAreaCloneElement) {
|
42
|
+
return;
|
43
|
+
} // Mouse up while a cloned selection area exists/a column is being reordered
|
44
|
+
|
45
|
+
|
46
|
+
if (selectionAreaCloneElement) {
|
47
|
+
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');
|
50
|
+
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
|
+
|
52
|
+
if (!columnToMoveToElement) {
|
53
|
+
return;
|
54
|
+
}
|
55
|
+
|
56
|
+
var selectionAreaToMove = ref.current.querySelector("[data-matcher-id=\"".concat(currentMatcher, "\"]"));
|
57
|
+
var spreadsheetPosition = ref.current.getBoundingClientRect();
|
58
|
+
var newIndexPosition = columnToMoveToElement.getBoundingClientRect();
|
59
|
+
var relativeNewPosition = newIndexPosition.left - spreadsheetPosition.left;
|
60
|
+
var cloneColumnWidth = selectionAreaCloneElement.offsetWidth;
|
61
|
+
var columnsWidthUpToNewIndex = 0;
|
62
|
+
var newIndexLessThanStarting = newColumnIndex < originalColumnIndex;
|
63
|
+
visibleColumns.forEach(function (item, index) {
|
64
|
+
if (newIndexLessThanStarting && index === visibleColumns.length - 1) {
|
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);
|
74
|
+
setSelectionAreas(function (prev) {
|
75
|
+
var selectionAreaClone = deepCloneObject(prev);
|
76
|
+
|
77
|
+
if (originalColumnIndex === newColumnIndex) {
|
78
|
+
return prev;
|
79
|
+
}
|
80
|
+
|
81
|
+
var indexOfItemToUpdate = selectionAreaClone.findIndex(function (item) {
|
82
|
+
return item.matcher === currentMatcher;
|
83
|
+
});
|
84
|
+
|
85
|
+
if (indexOfItemToUpdate === -1) {
|
86
|
+
return prev;
|
87
|
+
}
|
88
|
+
|
89
|
+
selectionAreaClone[indexOfItemToUpdate].header.index = Number(newColumnIndex);
|
90
|
+
selectionAreaClone[indexOfItemToUpdate].point1.column = Number(newColumnIndex);
|
91
|
+
selectionAreaClone[indexOfItemToUpdate].point2.column = Number(newColumnIndex);
|
92
|
+
return selectionAreaClone;
|
93
|
+
});
|
94
|
+
var columnIdArray = visibleColumns.map(function (column) {
|
95
|
+
return column.id;
|
96
|
+
});
|
97
|
+
|
98
|
+
var columnIdArrayClone = _toConsumableArray(columnIdArray); // Remove one element at the original index
|
99
|
+
|
100
|
+
|
101
|
+
columnIdArrayClone.splice(originalColumnIndex, 1); // Add one element at the new index
|
102
|
+
|
103
|
+
columnIdArrayClone.splice(newColumnIndex, 0, columnIdArray[originalColumnIndex]);
|
104
|
+
setColumnOrder(columnIdArrayClone); // Function provided by useTable (react-table) hook to reorder columns
|
105
|
+
|
106
|
+
var newCellCoords = _objectSpread(_objectSpread({}, activeCellCoordinates), {}, {
|
107
|
+
column: Number(newColumnIndex)
|
108
|
+
});
|
109
|
+
|
110
|
+
setActiveCellCoordinates(newCellCoords); // Remove the cloned column and indicator elements
|
111
|
+
|
112
|
+
var indicatorLineElement = ref.current.querySelector(".".concat(blockClass, "__reorder-indicator-line"));
|
113
|
+
indicatorLineElement === null || indicatorLineElement === void 0 ? void 0 : indicatorLineElement.remove();
|
114
|
+
selectionAreaCloneElement === null || selectionAreaCloneElement === void 0 ? void 0 : selectionAreaCloneElement.remove();
|
115
|
+
}
|
116
|
+
} // Mouse up was on a spreadsheet body cell which is a valid
|
117
|
+
// start/end point for creating a selection area
|
118
|
+
|
119
|
+
|
120
|
+
if (validStartingPoint) {
|
121
|
+
setClickAndHoldActive(false);
|
122
|
+
setValidStartingPoint(false);
|
123
|
+
var cellButton = event.target.closest(".".concat(blockClass, "__body--td"));
|
124
|
+
|
125
|
+
if (cellButton) {
|
126
|
+
var endCellCoordinates = {
|
127
|
+
row: Number(cellButton.getAttribute('data-row-index')),
|
128
|
+
column: Number(cellButton.getAttribute('data-column-index'))
|
129
|
+
};
|
130
|
+
setSelectionAreas(function (prev) {
|
131
|
+
var selectionAreaClone = deepCloneObject(prev);
|
132
|
+
var indexOfItemToUpdate = selectionAreaClone.findIndex(function (item) {
|
133
|
+
return item.matcher === currentMatcher;
|
134
|
+
}); // No items in the array have an object that matches the value of currentMatcher
|
135
|
+
|
136
|
+
if (indexOfItemToUpdate === -1) {
|
137
|
+
return prev;
|
138
|
+
}
|
139
|
+
|
140
|
+
selectionAreaClone[indexOfItemToUpdate].point2 = endCellCoordinates;
|
141
|
+
selectionAreaClone[indexOfItemToUpdate].areaCreated = false;
|
142
|
+
return selectionAreaClone;
|
143
|
+
});
|
144
|
+
}
|
145
|
+
}
|
146
|
+
};
|
147
|
+
|
148
|
+
document.addEventListener('mouseup', handleMouseUp);
|
149
|
+
return function () {
|
150
|
+
document.removeEventListener('mouseup', handleMouseUp);
|
151
|
+
};
|
152
|
+
}, [blockClass, currentMatcher, setSelectionAreas, setClickAndHoldActive, setValidStartingPoint, validStartingPoint, ref, setHeaderCellHoldActive, setColumnOrder, visibleColumns, setActiveCellCoordinates, activeCellCoordinates, rows, defaultColumn]);
|
153
|
+
};
|
@@ -11,11 +11,11 @@ export var createCellSelectionArea = function createCellSelectionArea(_ref) {
|
|
11
11
|
var ref = _ref.ref,
|
12
12
|
area = _ref.area,
|
13
13
|
blockClass = _ref.blockClass,
|
14
|
-
columns = _ref.columns,
|
15
14
|
defaultColumn = _ref.defaultColumn,
|
16
15
|
selectionAreas = _ref.selectionAreas,
|
17
16
|
setSelectionAreas = _ref.setSelectionAreas,
|
18
|
-
setActiveCellInsideSelectionArea = _ref.setActiveCellInsideSelectionArea
|
17
|
+
setActiveCellInsideSelectionArea = _ref.setActiveCellInsideSelectionArea,
|
18
|
+
visibleColumns = _ref.visibleColumns;
|
19
19
|
|
20
20
|
var _getSelectionAreaPoin = getSelectionAreaPoints(area),
|
21
21
|
lowestColumnIndex = _getSelectionAreaPoin.lowestColumnIndex,
|
@@ -30,7 +30,7 @@ export var createCellSelectionArea = function createCellSelectionArea(_ref) {
|
|
30
30
|
}
|
31
31
|
|
32
32
|
var selectionAreaVariableWidth = 0;
|
33
|
-
|
33
|
+
visibleColumns.forEach(function (item, index) {
|
34
34
|
if (index >= lowestColumnIndex && index <= greatestColumnIndex) {
|
35
35
|
selectionAreaVariableWidth += (item === null || item === void 0 ? void 0 : item.width) || (defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.width);
|
36
36
|
}
|
@@ -0,0 +1,34 @@
|
|
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 { px } from '@carbon/layout';
|
8
|
+
import { pkg } from '../../../settings';
|
9
|
+
export var moveColumnIndicatorLine = function moveColumnIndicatorLine(_ref) {
|
10
|
+
var _ref$blockClass = _ref.blockClass,
|
11
|
+
blockClass = _ref$blockClass === void 0 ? "".concat(pkg.prefix, "--data-spreadsheet") : _ref$blockClass,
|
12
|
+
clonedSelectionElement = _ref.clonedSelectionElement,
|
13
|
+
ref = _ref.ref,
|
14
|
+
spreadsheetCoords = _ref.spreadsheetCoords;
|
15
|
+
var closestCell = event.target.closest(".".concat(blockClass, "--interactive-cell-element"));
|
16
|
+
var newColumnIndex = closestCell === null || closestCell === void 0 ? void 0 : closestCell.getAttribute('data-column-index');
|
17
|
+
var originalColumnIndex = clonedSelectionElement === null || clonedSelectionElement === void 0 ? void 0 : clonedSelectionElement.getAttribute('data-column-index-original');
|
18
|
+
var closestCellCoords = closestCell.getBoundingClientRect();
|
19
|
+
var indicatorLineElement = ref.current.querySelector(".".concat(blockClass, "__reorder-indicator-line"));
|
20
|
+
var matcherId = clonedSelectionElement === null || clonedSelectionElement === void 0 ? void 0 : clonedSelectionElement.getAttribute('data-matcher-id');
|
21
|
+
var selectionAreaOrigin = ref.current.querySelector("[data-matcher-id=\"".concat(matcherId, "\"]"));
|
22
|
+
|
23
|
+
if (Number(newColumnIndex) > Number(originalColumnIndex)) {
|
24
|
+
indicatorLineElement.style.left = px(closestCellCoords.left - spreadsheetCoords.left + closestCell.offsetWidth - 2);
|
25
|
+
}
|
26
|
+
|
27
|
+
if (Number(newColumnIndex) < Number(originalColumnIndex)) {
|
28
|
+
indicatorLineElement.style.left = px(closestCellCoords.left - spreadsheetCoords.left);
|
29
|
+
}
|
30
|
+
|
31
|
+
if (Number(newColumnIndex) === Number(originalColumnIndex)) {
|
32
|
+
indicatorLineElement.style.left = selectionAreaOrigin.style.left;
|
33
|
+
}
|
34
|
+
};
|
@@ -43,7 +43,11 @@ var _addSelectUtils = require("./add-select-utils");
|
|
43
43
|
|
44
44
|
var _AddSelectFilter = require("./AddSelectFilter");
|
45
45
|
|
46
|
-
var
|
46
|
+
var _AddSelectSort = require("./AddSelectSort");
|
47
|
+
|
48
|
+
var _useItemSort2 = require("./hooks/useItemSort");
|
49
|
+
|
50
|
+
var _excluded = ["className", "clearFiltersText", "columnInputPlaceholder", "description", "globalFilters", "globalFiltersIconDescription", "globalFiltersPlaceholderText", "globalFiltersPrimaryButtonText", "globalFiltersSecondaryButtonText", "globalSearchLabel", "globalSearchPlaceholder", "globalSortBy", "influencerTitle", "items", "itemsLabel", "multi", "noResultsDescription", "noResultsTitle", "noSelectionDescription", "noSelectionTitle", "onClose", "onCloseButtonText", "onSubmit", "onSubmitButtonText", "open", "portalTarget", "removeIconDescription", "searchResultsLabel", "title"];
|
47
51
|
|
48
52
|
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); }
|
49
53
|
|
@@ -64,6 +68,7 @@ var AddSelect = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
64
68
|
globalFiltersSecondaryButtonText = _ref.globalFiltersSecondaryButtonText,
|
65
69
|
globalSearchLabel = _ref.globalSearchLabel,
|
66
70
|
globalSearchPlaceholder = _ref.globalSearchPlaceholder,
|
71
|
+
globalSortBy = _ref.globalSortBy,
|
67
72
|
influencerTitle = _ref.influencerTitle,
|
68
73
|
items = _ref.items,
|
69
74
|
itemsLabel = _ref.itemsLabel,
|
@@ -129,6 +134,12 @@ var AddSelect = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
129
134
|
appliedGlobalFilters = _useState18[0],
|
130
135
|
setAppliedGlobalFilters = _useState18[1];
|
131
136
|
|
137
|
+
var _useItemSort = (0, _useItemSort2.useItemSort)(),
|
138
|
+
sortDirection = _useItemSort.sortDirection,
|
139
|
+
setSortDirection = _useItemSort.setSortDirection,
|
140
|
+
sortAttribute = _useItemSort.sortAttribute,
|
141
|
+
setSortAttribute = _useItemSort.setSortAttribute;
|
142
|
+
|
132
143
|
(0, _react.useEffect)(function () {
|
133
144
|
var entries = items.entries; // flatItems is just a single array of all entries including children
|
134
145
|
|
@@ -218,6 +229,8 @@ var AddSelect = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
218
229
|
return results;
|
219
230
|
};
|
220
231
|
|
232
|
+
var sortFn = (0, _addSelectUtils.sortItems)(sortAttribute, sortDirection);
|
233
|
+
|
221
234
|
var getDisplayItems = function getDisplayItems() {
|
222
235
|
if (useNormalizedItems) {
|
223
236
|
// when global search or filter is in use the results are not in column format
|
@@ -230,7 +243,7 @@ var AddSelect = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
230
243
|
return filters.every(function (filter) {
|
231
244
|
return item[filter] === appliedGlobalFilters[filter];
|
232
245
|
});
|
233
|
-
});
|
246
|
+
}).sort(sortFn);
|
234
247
|
return results;
|
235
248
|
}
|
236
249
|
|
@@ -317,9 +330,11 @@ var AddSelect = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
317
330
|
return true;
|
318
331
|
};
|
319
332
|
|
333
|
+
var hasResults = itemsToDisplay.length > 0;
|
334
|
+
var globalFiltersApplied = Object.keys(appliedGlobalFilters).length > 0;
|
320
335
|
var showBreadsCrumbs = setShowBreadsCrumbs();
|
321
|
-
var
|
322
|
-
var
|
336
|
+
var showSort = (searchTerm || globalFiltersApplied) && hasResults;
|
337
|
+
var showTags = setShowTags(); // main content
|
323
338
|
|
324
339
|
var body = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
|
325
340
|
className: "".concat(blockClass, "__header")
|
@@ -339,6 +354,8 @@ var AddSelect = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
339
354
|
hasFiltersApplied: globalFiltersApplied,
|
340
355
|
clearFiltersText: clearFiltersText
|
341
356
|
}), /*#__PURE__*/_react.default.createElement("div", {
|
357
|
+
className: "".concat(blockClass, "__sub-header")
|
358
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
342
359
|
className: "".concat(blockClass, "__tag-container")
|
343
360
|
}, showBreadsCrumbs ? /*#__PURE__*/_react.default.createElement(_AddSelectBreadcrumbs.AddSelectBreadcrumbs, {
|
344
361
|
itemsLabel: itemsLabel,
|
@@ -349,7 +366,14 @@ var AddSelect = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
349
366
|
}, searchTerm ? searchResultsLabel : itemsLabel), showTags && /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Tag, {
|
350
367
|
type: "gray",
|
351
368
|
size: "sm"
|
352
|
-
}, itemsToDisplay.length))
|
369
|
+
}, itemsToDisplay.length)), showSort && /*#__PURE__*/_react.default.createElement(_AddSelectSort.AddSelectSort, {
|
370
|
+
items: itemsToDisplay,
|
371
|
+
setSortAttribute: setSortAttribute,
|
372
|
+
setSortDirection: setSortDirection,
|
373
|
+
sortAttribute: sortAttribute,
|
374
|
+
sortDirection: sortDirection,
|
375
|
+
sortBy: globalSortBy
|
376
|
+
}))), useNormalizedItems && !searchTerm && !globalFiltersApplied ? /*#__PURE__*/_react.default.createElement("div", {
|
353
377
|
className: "".concat(blockClass, "__columns")
|
354
378
|
}, itemsToDisplay.map(function (page, idx) {
|
355
379
|
var _path;
|
@@ -360,7 +384,7 @@ var AddSelect = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
360
384
|
header: idx === 0 ? itemsLabel : (_path = path[idx - 1]) === null || _path === void 0 ? void 0 : _path.title,
|
361
385
|
columnInputPlaceholder: columnInputPlaceholder
|
362
386
|
}));
|
363
|
-
})) : /*#__PURE__*/_react.default.createElement("div", null,
|
387
|
+
})) : /*#__PURE__*/_react.default.createElement("div", null, hasResults ? /*#__PURE__*/_react.default.createElement(_AddSelectList.AddSelectList, (0, _extends2.default)({}, commonListProps, {
|
364
388
|
filteredItems: itemsToDisplay,
|
365
389
|
modifiers: items === null || items === void 0 ? void 0 : items.modifiers
|
366
390
|
})) : /*#__PURE__*/_react.default.createElement("div", {
|
@@ -393,6 +417,7 @@ AddSelect.propTypes = {
|
|
393
417
|
globalFiltersSecondaryButtonText: _propTypes.default.string,
|
394
418
|
globalSearchLabel: _propTypes.default.string,
|
395
419
|
globalSearchPlaceholder: _propTypes.default.string,
|
420
|
+
globalSortBy: _propTypes.default.array,
|
396
421
|
influencerTitle: _propTypes.default.string,
|
397
422
|
items: _propTypes.default.shape({
|
398
423
|
modifiers: _propTypes.default.shape({
|