@carbon/ibm-products 1.9.0 → 1.11.1
Sign up to get free protection for your applications and to get access to all the features.
- package/css/index-full-carbon.css +364 -5838
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +5 -5
- package/css/index-full-carbon.min.css.map +1 -1
- package/css/index-without-carbon-released-only.css +68 -3430
- package/css/index-without-carbon-released-only.css.map +1 -1
- package/css/index-without-carbon-released-only.min.css +3 -3
- package/css/index-without-carbon-released-only.min.css.map +1 -1
- package/css/index-without-carbon.css +185 -4098
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +5 -5
- package/css/index-without-carbon.min.css.map +1 -1
- package/css/index.css +302 -4099
- package/css/index.css.map +1 -1
- package/css/index.min.css +5 -5
- package/css/index.min.css.map +1 -1
- package/es/components/AddSelect/AddSelect.js +98 -92
- package/es/components/AddSelect/AddSelectColumn.js +219 -8
- package/es/components/AddSelect/AddSelectList.js +5 -5
- package/es/components/AddSelect/AddSelectSidebar.js +3 -15
- package/es/components/AddSelect/add-select-utils.js +64 -0
- package/es/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +2 -1
- package/es/components/ButtonMenu/ButtonMenu.js +12 -4
- package/es/components/DataSpreadsheet/DataSpreadsheet.js +480 -182
- package/es/components/DataSpreadsheet/DataSpreadsheetBody.js +124 -81
- package/es/components/DataSpreadsheet/DataSpreadsheetHeader.js +74 -8
- package/es/components/DataSpreadsheet/hooks/useMoveActiveCell.js +27 -0
- package/es/components/DataSpreadsheet/hooks/useResetSpreadsheetFocus.js +28 -0
- package/es/components/DataSpreadsheet/hooks/useSpreadsheetOutsideClick.js +41 -0
- package/es/components/DataSpreadsheet/utils/checkActiveHeaderCell.js +34 -0
- package/es/components/DataSpreadsheet/{createActiveCellFn.js → utils/createActiveCellFn.js} +21 -8
- package/es/components/DataSpreadsheet/{createCellSelectionArea.js → utils/createCellSelectionArea.js} +8 -4
- package/es/components/DataSpreadsheet/{generateData.js → utils/generateData.js} +6 -0
- package/es/components/DataSpreadsheet/{getCellSize.js → utils/getCellSize.js} +0 -0
- package/es/components/DataSpreadsheet/utils/handleHeaderCellSelection.js +46 -0
- package/es/components/DataSpreadsheet/utils/handleMultipleKeys.js +82 -0
- package/es/components/DataSpreadsheet/utils/removeCellSelections.js +30 -0
- package/es/components/InlineEdit/InlineEdit.js +58 -27
- package/es/components/OptionsTile/OptionsTile.js +31 -21
- package/es/components/OptionsTile/index.js +1 -1
- package/es/components/PageHeader/PageHeader.js +26 -15
- package/es/components/PageHeader/PageHeaderTitle.js +2 -1
- package/es/components/PageHeader/PageHeaderUtils.js +24 -29
- package/es/components/TagSet/TagSet.js +12 -3
- package/es/components/UserProfileImage/UserProfileImage.js +2 -1
- package/es/components/index.js +0 -1
- package/es/global/js/package-settings.js +1 -2
- package/lib/components/AddSelect/AddSelect.js +101 -92
- package/lib/components/AddSelect/AddSelectColumn.js +232 -13
- package/lib/components/AddSelect/AddSelectList.js +5 -5
- package/lib/components/AddSelect/AddSelectSidebar.js +9 -15
- package/lib/components/AddSelect/add-select-utils.js +78 -0
- package/lib/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +2 -1
- package/lib/components/ButtonMenu/ButtonMenu.js +12 -4
- package/lib/components/DataSpreadsheet/DataSpreadsheet.js +490 -186
- package/lib/components/DataSpreadsheet/DataSpreadsheetBody.js +127 -82
- package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.js +82 -9
- package/lib/components/DataSpreadsheet/hooks/useMoveActiveCell.js +37 -0
- package/lib/components/DataSpreadsheet/hooks/useResetSpreadsheetFocus.js +39 -0
- package/lib/components/DataSpreadsheet/hooks/useSpreadsheetOutsideClick.js +52 -0
- package/lib/components/DataSpreadsheet/utils/checkActiveHeaderCell.js +45 -0
- package/lib/components/DataSpreadsheet/{createActiveCellFn.js → utils/createActiveCellFn.js} +21 -8
- package/lib/components/DataSpreadsheet/{createCellSelectionArea.js → utils/createCellSelectionArea.js} +8 -4
- package/lib/components/DataSpreadsheet/{generateData.js → utils/generateData.js} +6 -0
- package/lib/components/DataSpreadsheet/{getCellSize.js → utils/getCellSize.js} +0 -0
- package/lib/components/DataSpreadsheet/utils/handleHeaderCellSelection.js +59 -0
- package/lib/components/DataSpreadsheet/utils/handleMultipleKeys.js +92 -0
- package/lib/components/DataSpreadsheet/utils/removeCellSelections.js +41 -0
- package/lib/components/InlineEdit/InlineEdit.js +60 -28
- package/lib/components/OptionsTile/OptionsTile.js +30 -20
- package/lib/components/PageHeader/PageHeader.js +25 -15
- package/lib/components/PageHeader/PageHeaderTitle.js +2 -1
- package/lib/components/PageHeader/PageHeaderUtils.js +24 -29
- package/lib/components/TagSet/TagSet.js +13 -3
- package/lib/components/UserProfileImage/UserProfileImage.js +2 -1
- package/lib/components/index.js +0 -8
- package/lib/global/js/package-settings.js +1 -2
- package/package.json +17 -17
- package/scss/components/AddSelect/_add-select.scss +47 -14
- package/scss/components/BreadcrumbWithOverflow/_breadcrumb-with-overflow.scss +7 -3
- package/scss/components/CreateInfluencer/_create-influencer.scss +2 -0
- package/scss/components/CreateModal/_create-modal.scss +1 -0
- package/scss/components/CreateSidePanel/_create-side-panel.scss +1 -1
- package/scss/components/CreateSidePanel/_storybook-styles.scss +1 -1
- package/scss/components/CreateTearsheet/_create-tearsheet.scss +1 -0
- package/scss/components/CreateTearsheetNarrow/_create-tearsheet-narrow.scss +1 -0
- package/scss/components/DataSpreadsheet/_data-spreadsheet.scss +25 -7
- package/scss/components/EditSidePanel/_edit-side-panel.scss +9 -0
- package/scss/components/EditSidePanel/_storybook-styles.scss +1 -1
- package/scss/components/InlineEdit/_inline-edit.scss +46 -39
- package/scss/components/InlineEdit/_storybook-styles.scss +1 -0
- package/scss/components/ModifiedTabs/_modified-tabs.scss +5 -0
- package/scss/components/NotificationsPanel/_notifications-panel.scss +10 -3
- package/scss/components/OptionsTile/_index.scss +1 -1
- package/scss/components/OptionsTile/_options-tile.scss +17 -17
- package/scss/components/OptionsTile/_storybook-styles.scss +4 -4
- package/scss/components/PageHeader/_page-header.scss +5 -2
- package/scss/components/SidePanel/_side-panel.scss +19 -12
- package/scss/components/StatusIcon/_status-icon.scss +1 -0
- package/scss/components/Tearsheet/_tearsheet.scss +4 -0
- package/scss/components/UserProfileImage/_user-profile-image.scss +9 -0
- package/scss/components/WebTerminal/_web-terminal.scss +2 -0
- package/scss/components/_index.scss +0 -1
- package/es/components/LoadingBar/LoadingBar.js +0 -156
- package/es/components/LoadingBar/index.js +0 -7
- package/lib/components/LoadingBar/LoadingBar.js +0 -170
- package/lib/components/LoadingBar/index.js +0 -13
- package/scss/components/LoadingBar/_index.scss +0 -8
- package/scss/components/LoadingBar/_loading-bar.scss +0 -211
- package/scss/components/LoadingBar/_storybook-styles.scss +0 -14
@@ -11,6 +11,8 @@ exports.DataSpreadsheetBody = void 0;
|
|
11
11
|
|
12
12
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
13
13
|
|
14
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
15
|
+
|
14
16
|
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
15
17
|
|
16
18
|
var _react = _interopRequireWildcard(require("react"));
|
@@ -27,7 +29,13 @@ var _deepCloneObject = require("../../global/js/utils/deepCloneObject");
|
|
27
29
|
|
28
30
|
var _uuidv = _interopRequireDefault(require("../../global/js/utils/uuidv4"));
|
29
31
|
|
30
|
-
var
|
32
|
+
var _removeCellSelections = require("./utils/removeCellSelections");
|
33
|
+
|
34
|
+
var _createCellSelectionArea = require("./utils/createCellSelectionArea");
|
35
|
+
|
36
|
+
var _checkActiveHeaderCell = require("./utils/checkActiveHeaderCell");
|
37
|
+
|
38
|
+
var _handleHeaderCellSelection = require("./utils/handleHeaderCellSelection");
|
31
39
|
|
32
40
|
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); }
|
33
41
|
|
@@ -40,9 +48,10 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
|
|
40
48
|
* LICENSE file in the root directory of this source tree.
|
41
49
|
*/
|
42
50
|
var blockClass = "".concat(_settings.pkg.prefix, "--data-spreadsheet");
|
43
|
-
|
44
|
-
var
|
45
|
-
|
51
|
+
var DataSpreadsheetBody = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
52
|
+
var columns = _ref.columns,
|
53
|
+
activeCellCoordinates = _ref.activeCellCoordinates,
|
54
|
+
defaultColumn = _ref.defaultColumn,
|
46
55
|
getTableBodyProps = _ref.getTableBodyProps,
|
47
56
|
id = _ref.id,
|
48
57
|
prepareRow = _ref.prepareRow,
|
@@ -77,6 +86,7 @@ var DataSpreadsheetBody = function DataSpreadsheetBody(_ref) {
|
|
77
86
|
(0, _createCellSelectionArea.createCellSelectionArea)({
|
78
87
|
area: area,
|
79
88
|
blockClass: blockClass,
|
89
|
+
defaultColumn: defaultColumn,
|
80
90
|
selectionAreas: selectionAreas,
|
81
91
|
setSelectionAreas: setSelectionAreas
|
82
92
|
});
|
@@ -85,7 +95,7 @@ var DataSpreadsheetBody = function DataSpreadsheetBody(_ref) {
|
|
85
95
|
return;
|
86
96
|
});
|
87
97
|
}
|
88
|
-
}, [selectionAreas, setSelectionAreas]); // Mouse up
|
98
|
+
}, [selectionAreas, setSelectionAreas, defaultColumn]); // Mouse up
|
89
99
|
|
90
100
|
(0, _react.useEffect)(function () {
|
91
101
|
var handleMouseUp = function handleMouseUp(event) {
|
@@ -97,7 +107,6 @@ var DataSpreadsheetBody = function DataSpreadsheetBody(_ref) {
|
|
97
107
|
row: Number(cellButton.getAttribute('data-row-index')),
|
98
108
|
column: Number(cellButton.getAttribute('data-column-index'))
|
99
109
|
};
|
100
|
-
setCurrentMatcher(null);
|
101
110
|
setSelectionAreas(function (prev) {
|
102
111
|
var selectionAreaClone = (0, _deepCloneObject.deepCloneObject)(prev);
|
103
112
|
var indexOfItemToUpdate = selectionAreaClone.findIndex(function (item) {
|
@@ -112,21 +121,6 @@ var DataSpreadsheetBody = function DataSpreadsheetBody(_ref) {
|
|
112
121
|
selectionAreaClone[indexOfItemToUpdate].areaCreated = false;
|
113
122
|
return selectionAreaClone;
|
114
123
|
});
|
115
|
-
} else {
|
116
|
-
var selectionAreaClone = (0, _deepCloneObject.deepCloneObject)(selectionAreas);
|
117
|
-
var indexOfItemToUpdate = selectionAreaClone.findIndex(function (item) {
|
118
|
-
return item.matcher === currentMatcher;
|
119
|
-
});
|
120
|
-
|
121
|
-
if (indexOfItemToUpdate === -1) {
|
122
|
-
return;
|
123
|
-
}
|
124
|
-
|
125
|
-
var newArray = selectionAreaClone.filter(function (item) {
|
126
|
-
return item.matcher !== currentMatcher;
|
127
|
-
});
|
128
|
-
setCurrentMatcher(null);
|
129
|
-
setSelectionAreas(newArray);
|
130
124
|
}
|
131
125
|
};
|
132
126
|
|
@@ -134,7 +128,7 @@ var DataSpreadsheetBody = function DataSpreadsheetBody(_ref) {
|
|
134
128
|
return function () {
|
135
129
|
document.removeEventListener('mouseup', handleMouseUp);
|
136
130
|
};
|
137
|
-
}, [selectionAreas, currentMatcher, setSelectionAreas, setClickAndHoldActive, setCurrentMatcher]); // Make sure that if the cellSize prop changes, the active
|
131
|
+
}, [selectionAreas, currentMatcher, setSelectionAreas, setClickAndHoldActive, setCurrentMatcher, ref]); // Make sure that if the cellSize prop changes, the active
|
138
132
|
// cell also gets updated with the new size
|
139
133
|
|
140
134
|
(0, _react.useEffect)(function () {
|
@@ -147,68 +141,110 @@ var DataSpreadsheetBody = function DataSpreadsheetBody(_ref) {
|
|
147
141
|
}, [defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeight]); // onClick fn for each cell in the data spreadsheet body,
|
148
142
|
// adds the active cell highlight
|
149
143
|
|
150
|
-
var handleBodyCellClick = (0, _react.useCallback)(function (
|
151
|
-
|
152
|
-
|
153
|
-
|
154
|
-
|
155
|
-
|
156
|
-
|
157
|
-
var tempMatcher = (0, _uuidv.default)();
|
158
|
-
setActiveCellCoordinates(activeCoordinates); // prevent multiple selections unless cmd key is held
|
159
|
-
// meaning that selectionAreas should only have one item by default
|
160
|
-
|
161
|
-
if (isHoldingCommandKey) {
|
162
|
-
setSelectionAreas(function (prev) {
|
163
|
-
return [].concat((0, _toConsumableArray2.default)(prev), [{
|
164
|
-
point1: activeCoordinates,
|
165
|
-
matcher: tempMatcher
|
166
|
-
}]);
|
167
|
-
});
|
168
|
-
} else {
|
169
|
-
// remove all previous cell selections
|
170
|
-
var cellSelections = spreadsheetBodyRef.current.querySelectorAll(".".concat(blockClass, "__selection-area--element"));
|
171
|
-
Array.from(cellSelections).forEach(function (element) {
|
172
|
-
return element.remove();
|
173
|
-
});
|
174
|
-
setSelectionAreas([{
|
175
|
-
point1: activeCoordinates,
|
176
|
-
matcher: tempMatcher
|
177
|
-
}]);
|
178
|
-
}
|
179
|
-
|
180
|
-
setCurrentMatcher(tempMatcher);
|
181
|
-
setClickAndHoldActive(true);
|
182
|
-
}, [setActiveCellCoordinates, setSelectionAreas, setContainerHasFocus, setClickAndHoldActive, setCurrentMatcher]);
|
183
|
-
var handleBodyCellHover = (0, _react.useCallback)(function (event, cell, columnIndex) {
|
184
|
-
if (clickAndHoldActive) {
|
185
|
-
var cellCoordinates = {
|
144
|
+
var handleBodyCellClick = (0, _react.useCallback)(function (cell, columnIndex) {
|
145
|
+
return function (event) {
|
146
|
+
event.preventDefault();
|
147
|
+
var isHoldingCommandKey = event.metaKey || event.ctrlKey;
|
148
|
+
var isHoldingShiftKey = event.shiftKey;
|
149
|
+
setContainerHasFocus(true);
|
150
|
+
var activeCoordinates = {
|
186
151
|
row: cell.row.index,
|
187
152
|
column: columnIndex
|
188
153
|
};
|
189
|
-
|
190
|
-
|
154
|
+
var tempMatcher = (0, _uuidv.default)();
|
155
|
+
setClickAndHoldActive(true); // prevent multiple selections unless cmd key is held
|
156
|
+
// meaning that selectionAreas should only have one item by default
|
191
157
|
|
192
|
-
|
158
|
+
if (isHoldingCommandKey) {
|
159
|
+
setActiveCellCoordinates(activeCoordinates);
|
160
|
+
setCurrentMatcher(tempMatcher);
|
161
|
+
setSelectionAreas(function (prev) {
|
162
|
+
return [].concat((0, _toConsumableArray2.default)(prev), [{
|
163
|
+
point1: activeCoordinates,
|
164
|
+
matcher: tempMatcher
|
165
|
+
}]);
|
166
|
+
});
|
167
|
+
} else if (isHoldingShiftKey) {
|
168
|
+
setContainerHasFocus(true);
|
169
|
+
var selectionAreaClone = (0, _deepCloneObject.deepCloneObject)(selectionAreas);
|
193
170
|
var indexOfItemToUpdate = selectionAreaClone.findIndex(function (item) {
|
194
171
|
return item.matcher === currentMatcher;
|
195
|
-
});
|
172
|
+
});
|
196
173
|
|
197
174
|
if (indexOfItemToUpdate === -1) {
|
198
|
-
|
199
|
-
|
175
|
+
// There is always a selectionArea with a point1 object that updates
|
176
|
+
// whenever the activeCellCoordinates update, we should always be able
|
177
|
+
// to find an index, but if we do not for some reason we should return
|
178
|
+
// at this point.
|
179
|
+
return;
|
180
|
+
} else {
|
181
|
+
// Update the selectionArea that was found, do not update currentMatcher
|
182
|
+
selectionAreaClone[indexOfItemToUpdate].point1 = activeCellCoordinates;
|
183
|
+
selectionAreaClone[indexOfItemToUpdate].point2 = activeCoordinates;
|
184
|
+
selectionAreaClone[indexOfItemToUpdate].areaCreated = false;
|
185
|
+
selectionAreaClone[indexOfItemToUpdate].matcher = currentMatcher;
|
186
|
+
setSelectionAreas(selectionAreaClone);
|
187
|
+
}
|
188
|
+
} else {
|
189
|
+
setActiveCellCoordinates(activeCoordinates); // remove all previous cell selections
|
190
|
+
|
191
|
+
(0, _removeCellSelections.removeCellSelections)({
|
192
|
+
spreadsheetRef: ref
|
193
|
+
});
|
194
|
+
setSelectionAreas([{
|
195
|
+
point1: activeCoordinates,
|
196
|
+
matcher: tempMatcher
|
197
|
+
}]);
|
198
|
+
setCurrentMatcher(tempMatcher);
|
199
|
+
}
|
200
|
+
};
|
201
|
+
}, [currentMatcher, activeCellCoordinates, selectionAreas, setActiveCellCoordinates, setSelectionAreas, setContainerHasFocus, setClickAndHoldActive, setCurrentMatcher, ref]);
|
202
|
+
var handleBodyCellHover = (0, _react.useCallback)(function (cell, columnIndex) {
|
203
|
+
return function () {
|
204
|
+
if (clickAndHoldActive) {
|
205
|
+
var cellCoordinates = {
|
206
|
+
row: cell.row.index,
|
207
|
+
column: columnIndex
|
208
|
+
};
|
209
|
+
setSelectionAreas(function (prev) {
|
210
|
+
var _selectionAreaClone$i, _selectionAreaClone$i2;
|
211
|
+
|
212
|
+
var selectionAreaClone = (0, _deepCloneObject.deepCloneObject)(prev);
|
213
|
+
var indexOfItemToUpdate = selectionAreaClone.findIndex(function (item) {
|
214
|
+
return item.matcher === currentMatcher;
|
215
|
+
}); // No items in the array match up with the currentMatcher value
|
200
216
|
|
217
|
+
if (indexOfItemToUpdate === -1) {
|
218
|
+
return prev;
|
219
|
+
} // Do not update state if you're still hovering on the same cell
|
201
220
|
|
202
|
-
if (((_selectionAreaClone$i = selectionAreaClone[indexOfItemToUpdate].point2) === null || _selectionAreaClone$i === void 0 ? void 0 : _selectionAreaClone$i.row) === cellCoordinates.row && ((_selectionAreaClone$i2 = selectionAreaClone[indexOfItemToUpdate].point2) === null || _selectionAreaClone$i2 === void 0 ? void 0 : _selectionAreaClone$i2.column) === cellCoordinates.column) {
|
203
|
-
return prev;
|
204
|
-
}
|
205
221
|
|
206
|
-
|
207
|
-
|
208
|
-
|
222
|
+
if (((_selectionAreaClone$i = selectionAreaClone[indexOfItemToUpdate].point2) === null || _selectionAreaClone$i === void 0 ? void 0 : _selectionAreaClone$i.row) === cellCoordinates.row && ((_selectionAreaClone$i2 = selectionAreaClone[indexOfItemToUpdate].point2) === null || _selectionAreaClone$i2 === void 0 ? void 0 : _selectionAreaClone$i2.column) === cellCoordinates.column) {
|
223
|
+
return prev;
|
224
|
+
}
|
225
|
+
|
226
|
+
selectionAreaClone[indexOfItemToUpdate].point2 = cellCoordinates;
|
227
|
+
selectionAreaClone[indexOfItemToUpdate].areaCreated = false;
|
228
|
+
return selectionAreaClone;
|
229
|
+
});
|
230
|
+
}
|
231
|
+
};
|
232
|
+
}, [clickAndHoldActive, currentMatcher, setSelectionAreas]);
|
233
|
+
var handleRowHeaderClick = (0, _react.useCallback)(function (index) {
|
234
|
+
return function () {
|
235
|
+
(0, _handleHeaderCellSelection.handleHeaderCellSelection)({
|
236
|
+
type: 'row',
|
237
|
+
activeCellCoordinates: activeCellCoordinates,
|
238
|
+
rows: rows,
|
239
|
+
columns: columns,
|
240
|
+
setActiveCellCoordinates: setActiveCellCoordinates,
|
241
|
+
setCurrentMatcher: setCurrentMatcher,
|
242
|
+
setSelectionAreas: setSelectionAreas,
|
243
|
+
spreadsheetRef: ref,
|
244
|
+
index: index
|
209
245
|
});
|
210
|
-
}
|
211
|
-
}, [
|
246
|
+
};
|
247
|
+
}, [columns, ref, setSelectionAreas, setCurrentMatcher, setActiveCellCoordinates, activeCellCoordinates, rows]); // Renders each row/cell in the spreadsheet body
|
212
248
|
|
213
249
|
var RenderRow = (0, _react.useCallback)(function (_ref2) {
|
214
250
|
var index = _ref2.index,
|
@@ -225,7 +261,8 @@ var DataSpreadsheetBody = function DataSpreadsheetBody(_ref) {
|
|
225
261
|
"data-row-index": index,
|
226
262
|
"data-column-index": "header",
|
227
263
|
type: "button",
|
228
|
-
|
264
|
+
onClick: handleRowHeaderClick(index),
|
265
|
+
className: (0, _classnames.default)("".concat(blockClass, "__td"), "".concat(blockClass, "__td-th"), "".concat(blockClass, "--interactive-cell-element"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__td-th--active-header"), (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === index || (0, _checkActiveHeaderCell.checkActiveHeaderCell)(index, selectionAreas, 'row'))),
|
229
266
|
style: {
|
230
267
|
width: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeaderWidth
|
231
268
|
}
|
@@ -237,17 +274,13 @@ var DataSpreadsheetBody = function DataSpreadsheetBody(_ref) {
|
|
237
274
|
}, cell.getCellProps(), {
|
238
275
|
className: (0, _classnames.default)("".concat(blockClass, "__td"), "".concat(blockClass, "__body--td"), "".concat(blockClass, "--interactive-cell-element")),
|
239
276
|
key: "cell_".concat(index),
|
240
|
-
onMouseDown:
|
241
|
-
|
242
|
-
},
|
243
|
-
onMouseOver: function onMouseOver(event) {
|
244
|
-
return handleBodyCellHover(event, cell, index);
|
245
|
-
},
|
277
|
+
onMouseDown: handleBodyCellClick(cell, index),
|
278
|
+
onMouseOver: handleBodyCellHover(cell, index),
|
246
279
|
onFocus: function onFocus() {},
|
247
280
|
type: "button"
|
248
281
|
}), cell.render('Cell'));
|
249
282
|
}));
|
250
|
-
}, [prepareRow, rows, defaultColumn.rowHeaderWidth, handleBodyCellClick, handleBodyCellHover]);
|
283
|
+
}, [prepareRow, rows, defaultColumn.rowHeaderWidth, activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row, selectionAreas, handleRowHeaderClick, handleBodyCellClick, handleBodyCellHover]);
|
251
284
|
var spreadsheetBodyRef = (0, _react.useRef)();
|
252
285
|
return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
|
253
286
|
ref: spreadsheetBodyRef,
|
@@ -259,15 +292,27 @@ var DataSpreadsheetBody = function DataSpreadsheetBody(_ref) {
|
|
259
292
|
itemSize: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeight,
|
260
293
|
width: totalColumnsWidth + scrollBarSize
|
261
294
|
}, RenderRow));
|
262
|
-
};
|
263
|
-
|
295
|
+
});
|
264
296
|
exports.DataSpreadsheetBody = DataSpreadsheetBody;
|
265
297
|
DataSpreadsheetBody.propTypes = {
|
298
|
+
/**
|
299
|
+
* Object containing the active cell coordinates
|
300
|
+
*/
|
301
|
+
activeCellCoordinates: _propTypes.default.shape({
|
302
|
+
row: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
|
303
|
+
column: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
|
304
|
+
}),
|
305
|
+
|
266
306
|
/**
|
267
307
|
* Is the user clicking and holding in the data spreadsheet body
|
268
308
|
*/
|
269
309
|
clickAndHoldActive: _propTypes.default.bool,
|
270
310
|
|
311
|
+
/**
|
312
|
+
* All of the spreadsheet columns
|
313
|
+
*/
|
314
|
+
columns: _propTypes.default.array,
|
315
|
+
|
271
316
|
/**
|
272
317
|
* This represents the id of the current cell selection area
|
273
318
|
*/
|
@@ -2,6 +2,8 @@
|
|
2
2
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
4
4
|
|
5
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
6
|
+
|
5
7
|
Object.defineProperty(exports, "__esModule", {
|
6
8
|
value: true
|
7
9
|
});
|
@@ -9,7 +11,9 @@ exports.DataSpreadsheetHeader = void 0;
|
|
9
11
|
|
10
12
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
11
13
|
|
12
|
-
var
|
14
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
15
|
+
|
16
|
+
var _react = _interopRequireWildcard(require("react"));
|
13
17
|
|
14
18
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
15
19
|
|
@@ -17,6 +21,14 @@ var _classnames = _interopRequireDefault(require("classnames"));
|
|
17
21
|
|
18
22
|
var _settings = require("../../settings");
|
19
23
|
|
24
|
+
var _checkActiveHeaderCell = require("./utils/checkActiveHeaderCell");
|
25
|
+
|
26
|
+
var _handleHeaderCellSelection = require("./utils/handleHeaderCellSelection");
|
27
|
+
|
28
|
+
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); }
|
29
|
+
|
30
|
+
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; }
|
31
|
+
|
20
32
|
/**
|
21
33
|
* Copyright IBM Corp. 2022, 2022
|
22
34
|
*
|
@@ -24,10 +36,33 @@ var _settings = require("../../settings");
|
|
24
36
|
* LICENSE file in the root directory of this source tree.
|
25
37
|
*/
|
26
38
|
var blockClass = "".concat(_settings.pkg.prefix, "--data-spreadsheet");
|
39
|
+
var DataSpreadsheetHeader = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
40
|
+
var activeCellCoordinates = _ref.activeCellCoordinates,
|
41
|
+
columns = _ref.columns,
|
42
|
+
defaultColumn = _ref.defaultColumn,
|
43
|
+
headerGroups = _ref.headerGroups,
|
44
|
+
selectionAreas = _ref.selectionAreas,
|
45
|
+
setActiveCellCoordinates = _ref.setActiveCellCoordinates,
|
46
|
+
setCurrentMatcher = _ref.setCurrentMatcher,
|
47
|
+
setSelectionAreas = _ref.setSelectionAreas,
|
48
|
+
rows = _ref.rows;
|
49
|
+
|
50
|
+
var handleColumnHeaderClick = function handleColumnHeaderClick(index) {
|
51
|
+
return function () {
|
52
|
+
(0, _handleHeaderCellSelection.handleHeaderCellSelection)({
|
53
|
+
type: 'column',
|
54
|
+
activeCellCoordinates: activeCellCoordinates,
|
55
|
+
rows: rows,
|
56
|
+
columns: columns,
|
57
|
+
setActiveCellCoordinates: setActiveCellCoordinates,
|
58
|
+
setCurrentMatcher: setCurrentMatcher,
|
59
|
+
setSelectionAreas: setSelectionAreas,
|
60
|
+
spreadsheetRef: ref,
|
61
|
+
index: index
|
62
|
+
});
|
63
|
+
};
|
64
|
+
};
|
27
65
|
|
28
|
-
var DataSpreadsheetHeader = function DataSpreadsheetHeader(_ref) {
|
29
|
-
var defaultColumn = _ref.defaultColumn,
|
30
|
-
headerGroups = _ref.headerGroups;
|
31
66
|
return /*#__PURE__*/_react.default.createElement("div", {
|
32
67
|
className: (0, _classnames.default)("".concat(blockClass, "__header--container"))
|
33
68
|
}, headerGroups.map(function (headerGroup, index) {
|
@@ -40,7 +75,7 @@ var DataSpreadsheetHeader = function DataSpreadsheetHeader(_ref) {
|
|
40
75
|
"data-column-index": "header",
|
41
76
|
type: "button",
|
42
77
|
tabIndex: -1,
|
43
|
-
className: (0, _classnames.default)("".concat(blockClass, "__th"), "".concat(blockClass, "--interactive-cell-element")),
|
78
|
+
className: (0, _classnames.default)("".concat(blockClass, "__th"), "".concat(blockClass, "--interactive-cell-element"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__th--active-header"), (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === 'header' && (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === 'header')),
|
44
79
|
style: {
|
45
80
|
width: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeaderWidth,
|
46
81
|
height: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeight
|
@@ -51,19 +86,32 @@ var DataSpreadsheetHeader = function DataSpreadsheetHeader(_ref) {
|
|
51
86
|
"data-row-index": "header",
|
52
87
|
"data-column-index": index,
|
53
88
|
tabIndex: -1,
|
89
|
+
onClick: handleColumnHeaderClick(index),
|
54
90
|
style: {
|
55
91
|
height: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeight
|
56
92
|
}
|
57
93
|
}, column.getHeaderProps(), {
|
58
|
-
className: (0, _classnames.default)("".concat(blockClass, "__th"), "".concat(blockClass, "--interactive-cell-element")),
|
94
|
+
className: (0, _classnames.default)("".concat(blockClass, "__th"), "".concat(blockClass, "--interactive-cell-element"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__th--active-header"), (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === index || (0, _checkActiveHeaderCell.checkActiveHeaderCell)(index, selectionAreas, 'column'))),
|
59
95
|
type: "button"
|
60
96
|
}), column.render('Header'));
|
61
97
|
}));
|
62
98
|
}));
|
63
|
-
};
|
64
|
-
|
99
|
+
});
|
65
100
|
exports.DataSpreadsheetHeader = DataSpreadsheetHeader;
|
66
101
|
DataSpreadsheetHeader.propTypes = {
|
102
|
+
/**
|
103
|
+
* Object containing the active cell coordinates
|
104
|
+
*/
|
105
|
+
activeCellCoordinates: _propTypes.default.shape({
|
106
|
+
row: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
|
107
|
+
column: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])
|
108
|
+
}),
|
109
|
+
|
110
|
+
/**
|
111
|
+
* All of the spreadsheet columns
|
112
|
+
*/
|
113
|
+
columns: _propTypes.default.array,
|
114
|
+
|
67
115
|
/**
|
68
116
|
* Default spreadsheet sizing values
|
69
117
|
*/
|
@@ -76,5 +124,30 @@ DataSpreadsheetHeader.propTypes = {
|
|
76
124
|
/**
|
77
125
|
* Headers provided from useTable hook
|
78
126
|
*/
|
79
|
-
headerGroups: _propTypes.default.arrayOf(_propTypes.default.object)
|
127
|
+
headerGroups: _propTypes.default.arrayOf(_propTypes.default.object),
|
128
|
+
|
129
|
+
/**
|
130
|
+
* All of the spreadsheet row data
|
131
|
+
*/
|
132
|
+
rows: _propTypes.default.arrayOf(_propTypes.default.object),
|
133
|
+
|
134
|
+
/**
|
135
|
+
* All of the cell selection area items
|
136
|
+
*/
|
137
|
+
selectionAreas: _propTypes.default.arrayOf(_propTypes.default.object),
|
138
|
+
|
139
|
+
/**
|
140
|
+
* Setter fn for activeCellCoordinates value
|
141
|
+
*/
|
142
|
+
setActiveCellCoordinates: _propTypes.default.func,
|
143
|
+
|
144
|
+
/**
|
145
|
+
* Setter fn for currentMatcher value
|
146
|
+
*/
|
147
|
+
setCurrentMatcher: _propTypes.default.func,
|
148
|
+
|
149
|
+
/**
|
150
|
+
* Setter fn for selectionAreas value
|
151
|
+
*/
|
152
|
+
setSelectionAreas: _propTypes.default.func
|
80
153
|
};
|
@@ -0,0 +1,37 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.useMoveActiveCell = void 0;
|
7
|
+
|
8
|
+
var _react = require("react");
|
9
|
+
|
10
|
+
/**
|
11
|
+
* Copyright IBM Corp. 2022, 2022
|
12
|
+
*
|
13
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
14
|
+
* LICENSE file in the root directory of this source tree.
|
15
|
+
*/
|
16
|
+
// Moves the placement of the active cell
|
17
|
+
var useMoveActiveCell = function useMoveActiveCell(_ref) {
|
18
|
+
var spreadsheetRef = _ref.spreadsheetRef,
|
19
|
+
activeCellCoordinates = _ref.activeCellCoordinates,
|
20
|
+
containerHasFocus = _ref.containerHasFocus,
|
21
|
+
createActiveCell = _ref.createActiveCell;
|
22
|
+
(0, _react.useEffect)(function () {
|
23
|
+
var activeCellPlacementElement = spreadsheetRef === null || spreadsheetRef === void 0 ? void 0 : spreadsheetRef.current.querySelector("[data-row-index=\"".concat(activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row, "\"][data-column-index=\"").concat(activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column, "\"]"));
|
24
|
+
var shouldPlaceActiveCellInHeader = (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === 'header' && true;
|
25
|
+
var selectAllElement = spreadsheetRef === null || spreadsheetRef === void 0 ? void 0 : spreadsheetRef.current.querySelector("[data-row-index=\"header\"][data-column-index=\"header\"]");
|
26
|
+
|
27
|
+
if (containerHasFocus) {
|
28
|
+
createActiveCell({
|
29
|
+
placementElement: activeCellCoordinates ? activeCellPlacementElement : selectAllElement,
|
30
|
+
coords: activeCellCoordinates,
|
31
|
+
addToHeader: shouldPlaceActiveCellInHeader
|
32
|
+
});
|
33
|
+
}
|
34
|
+
}, [activeCellCoordinates, spreadsheetRef, createActiveCell, containerHasFocus]);
|
35
|
+
};
|
36
|
+
|
37
|
+
exports.useMoveActiveCell = useMoveActiveCell;
|
@@ -0,0 +1,39 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.useResetSpreadsheetFocus = void 0;
|
7
|
+
|
8
|
+
var _react = require("react");
|
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 useResetSpreadsheetFocus = function useResetSpreadsheetFocus(_ref) {
|
19
|
+
var activeKeys = _ref.activeKeys,
|
20
|
+
_ref$blockClass = _ref.blockClass,
|
21
|
+
blockClass = _ref$blockClass === void 0 ? "".concat(_settings.pkg.prefix, "--data-spreadsheet") : _ref$blockClass,
|
22
|
+
focusedElement = _ref.focusedElement,
|
23
|
+
removeActiveCell = _ref.removeActiveCell,
|
24
|
+
setContainerHasFocus = _ref.setContainerHasFocus;
|
25
|
+
// Reset everything when spreadsheet loses focus
|
26
|
+
(0, _react.useEffect)(function () {
|
27
|
+
if (!focusedElement.classList.contains("".concat(blockClass, "--interactive-cell-element"))) {
|
28
|
+
setContainerHasFocus(false);
|
29
|
+
removeActiveCell();
|
30
|
+
activeKeys.current = [];
|
31
|
+
}
|
32
|
+
|
33
|
+
if (focusedElement.classList.contains(blockClass) || focusedElement.classList.contains("".concat(blockClass, "--interactive-cell-element"))) {
|
34
|
+
setContainerHasFocus(true);
|
35
|
+
}
|
36
|
+
}, [focusedElement, removeActiveCell, activeKeys, blockClass, setContainerHasFocus]);
|
37
|
+
};
|
38
|
+
|
39
|
+
exports.useResetSpreadsheetFocus = useResetSpreadsheetFocus;
|
@@ -0,0 +1,52 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.useSpreadsheetOutsideClick = void 0;
|
7
|
+
|
8
|
+
var _react = require("react");
|
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
|
+
// Click outside useEffect for spreadsheet
|
19
|
+
var useSpreadsheetOutsideClick = function useSpreadsheetOutsideClick(_ref) {
|
20
|
+
var spreadsheetRef = _ref.spreadsheetRef,
|
21
|
+
_ref$blockClass = _ref.blockClass,
|
22
|
+
blockClass = _ref$blockClass === void 0 ? "".concat(_settings.pkg.prefix, "--data-spreadsheet") : _ref$blockClass,
|
23
|
+
setActiveCellCoordinates = _ref.setActiveCellCoordinates,
|
24
|
+
setSelectionAreas = _ref.setSelectionAreas,
|
25
|
+
removeActiveCell = _ref.removeActiveCell,
|
26
|
+
removeCellSelections = _ref.removeCellSelections,
|
27
|
+
setContainerHasFocus = _ref.setContainerHasFocus,
|
28
|
+
activeKeys = _ref.activeKeys,
|
29
|
+
removeCellEditor = _ref.removeCellEditor;
|
30
|
+
(0, _react.useEffect)(function () {
|
31
|
+
var handleOutsideClick = function handleOutsideClick(event) {
|
32
|
+
if (!spreadsheetRef.current || spreadsheetRef.current.contains(event.target) || event.target.classList.contains("".concat(blockClass, "__active-cell--highlight")) || event.target.classList.contains("".concat(blockClass, "--interactive-cell-element"))) {
|
33
|
+
return;
|
34
|
+
}
|
35
|
+
|
36
|
+
setActiveCellCoordinates(null);
|
37
|
+
setSelectionAreas([]);
|
38
|
+
removeActiveCell();
|
39
|
+
removeCellSelections();
|
40
|
+
setContainerHasFocus(false);
|
41
|
+
removeCellEditor();
|
42
|
+
activeKeys.current = [];
|
43
|
+
};
|
44
|
+
|
45
|
+
document.addEventListener('click', handleOutsideClick);
|
46
|
+
return function () {
|
47
|
+
document.removeEventListener('click', handleOutsideClick);
|
48
|
+
};
|
49
|
+
}, [spreadsheetRef, removeActiveCell, removeCellSelections, activeKeys, blockClass, setActiveCellCoordinates, setContainerHasFocus, setSelectionAreas, removeCellEditor]);
|
50
|
+
};
|
51
|
+
|
52
|
+
exports.useSpreadsheetOutsideClick = useSpreadsheetOutsideClick;
|
@@ -0,0 +1,45 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
4
|
+
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
6
|
+
value: true
|
7
|
+
});
|
8
|
+
exports.checkActiveHeaderCell = void 0;
|
9
|
+
|
10
|
+
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
11
|
+
|
12
|
+
var _deepCloneObject = require("../../../global/js/utils/deepCloneObject");
|
13
|
+
|
14
|
+
/**
|
15
|
+
* Copyright IBM Corp. 2022, 2022
|
16
|
+
*
|
17
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
18
|
+
* LICENSE file in the root directory of this source tree.
|
19
|
+
*/
|
20
|
+
// Determines if a row or column header cell should receive a highlight/active background color
|
21
|
+
// Check each object in selectionAreas and see if the headerIndex is between
|
22
|
+
// point1.row and point2.row, inclusive
|
23
|
+
var checkActiveHeaderCell = function checkActiveHeaderCell(headerIndex, selectionAreas, headerType) {
|
24
|
+
var areasCloned = (0, _deepCloneObject.deepCloneObject)(selectionAreas);
|
25
|
+
var activeRowIndexes = [];
|
26
|
+
areasCloned.forEach(function (area) {
|
27
|
+
var _area$point, _area$point2, _area$point3, _area$point4;
|
28
|
+
|
29
|
+
var greatestRowIndex = Math.max((_area$point = area.point1) === null || _area$point === void 0 ? void 0 : _area$point[headerType], (_area$point2 = area.point2) === null || _area$point2 === void 0 ? void 0 : _area$point2[headerType]);
|
30
|
+
var lowestRowIndex = Math.min((_area$point3 = area.point1) === null || _area$point3 === void 0 ? void 0 : _area$point3[headerType], (_area$point4 = area.point2) === null || _area$point4 === void 0 ? void 0 : _area$point4[headerType]);
|
31
|
+
|
32
|
+
for (var i = lowestRowIndex; i <= greatestRowIndex; i++) {
|
33
|
+
activeRowIndexes.push(i);
|
34
|
+
}
|
35
|
+
});
|
36
|
+
var activeRowIndexesNoDuplicates = (0, _toConsumableArray2.default)(new Set(activeRowIndexes));
|
37
|
+
|
38
|
+
if (areasCloned !== null && areasCloned !== void 0 && areasCloned.length && activeRowIndexesNoDuplicates.includes(headerIndex)) {
|
39
|
+
return true;
|
40
|
+
}
|
41
|
+
|
42
|
+
return false;
|
43
|
+
};
|
44
|
+
|
45
|
+
exports.checkActiveHeaderCell = checkActiveHeaderCell;
|