@carbon/ibm-products 1.15.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/components/Datagrid/styles/datagrid.css +4 -0
- package/css/components/Datagrid/styles/datagrid.css.map +1 -1
- package/css/components/Datagrid/styles/index.css +5 -1
- package/css/components/Datagrid/styles/index.css.map +1 -1
- package/css/components/Datagrid/styles/useNestedRows.css +1 -1
- package/css/index-full-carbon.css +195 -88
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +7 -4
- package/css/index-full-carbon.min.css.map +1 -1
- package/css/index-without-carbon-released-only.css +9 -3
- package/css/index-without-carbon-released-only.css.map +1 -1
- package/css/index-without-carbon-released-only.min.css +4 -1
- package/css/index-without-carbon-released-only.min.css.map +1 -1
- package/css/index-without-carbon.css +78 -22
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +6 -3
- package/css/index-without-carbon.min.css.map +1 -1
- package/css/index.css +104 -53
- package/css/index.css.map +1 -1
- package/css/index.min.css +7 -4
- package/css/index.min.css.map +1 -1
- package/es/components/AddSelect/AddSelect.js +39 -10
- package/es/components/AddSelect/AddSelectColumn.js +31 -73
- package/es/components/AddSelect/AddSelectFilter.js +48 -5
- 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 +38 -15
- package/es/components/DataSpreadsheet/DataSpreadsheetBody.js +93 -46
- package/es/components/DataSpreadsheet/DataSpreadsheetHeader.js +82 -6
- package/es/components/DataSpreadsheet/hooks/index.js +3 -1
- package/es/components/DataSpreadsheet/hooks/useSpreadsheetEdit.js +65 -19
- package/es/components/DataSpreadsheet/hooks/useSpreadsheetMouseMove.js +60 -0
- package/es/components/DataSpreadsheet/hooks/useSpreadsheetMouseUp.js +153 -0
- package/es/components/DataSpreadsheet/utils/checkSelectedHeaderCell.js +16 -0
- package/es/components/DataSpreadsheet/utils/createCellSelectionArea.js +11 -6
- package/es/components/DataSpreadsheet/utils/generateData.js +17 -9
- package/es/components/DataSpreadsheet/utils/getSpreadsheetWidth.js +30 -0
- package/es/components/DataSpreadsheet/utils/handleHeaderCellSelection.js +6 -2
- package/es/components/DataSpreadsheet/utils/moveColumnIndicatorLine.js +34 -0
- package/es/components/Datagrid/Datagrid/Datagrid.js +24 -12
- package/es/components/Datagrid/Datagrid/DatagridHead.js +8 -16
- package/es/components/Datagrid/Datagrid/DatagridHeaderRow.js +10 -10
- package/es/components/Datagrid/Datagrid/DatagridRow.js +12 -2
- package/es/components/Datagrid/Datagrid/index.js +6 -7
- package/es/components/Datagrid/index.js +1 -1
- package/es/components/Datagrid/useNestedRows.js +3 -3
- package/es/components/Datagrid/useRowExpander.js +1 -1
- package/es/components/ExportModal/ExportModal.js +10 -5
- package/es/components/SidePanel/SidePanel.js +5 -1
- package/es/components/WebTerminal/WebTerminal.js +36 -11
- package/es/components/WebTerminal/WebTerminalContentWrapper.js +49 -0
- package/es/components/WebTerminal/index.js +2 -1
- package/es/components/index.js +1 -1
- package/es/global/js/package-settings.js +1 -0
- package/lib/components/AddSelect/AddSelect.js +40 -10
- package/lib/components/AddSelect/AddSelectColumn.js +32 -71
- package/lib/components/AddSelect/AddSelectFilter.js +47 -4
- 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 +37 -14
- package/lib/components/DataSpreadsheet/DataSpreadsheetBody.js +96 -45
- package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.js +85 -6
- package/lib/components/DataSpreadsheet/hooks/index.js +17 -1
- package/lib/components/DataSpreadsheet/hooks/useSpreadsheetEdit.js +68 -18
- package/lib/components/DataSpreadsheet/hooks/useSpreadsheetMouseMove.js +74 -0
- package/lib/components/DataSpreadsheet/hooks/useSpreadsheetMouseUp.js +161 -0
- package/lib/components/DataSpreadsheet/utils/checkSelectedHeaderCell.js +26 -0
- package/lib/components/DataSpreadsheet/utils/createCellSelectionArea.js +11 -6
- package/lib/components/DataSpreadsheet/utils/generateData.js +17 -9
- package/lib/components/DataSpreadsheet/utils/getSpreadsheetWidth.js +40 -0
- package/lib/components/DataSpreadsheet/utils/handleHeaderCellSelection.js +6 -2
- package/lib/components/DataSpreadsheet/utils/moveColumnIndicatorLine.js +45 -0
- package/lib/components/Datagrid/Datagrid/Datagrid.js +25 -8
- package/lib/components/Datagrid/Datagrid/DatagridHead.js +8 -16
- package/lib/components/Datagrid/Datagrid/DatagridHeaderRow.js +10 -10
- package/lib/components/Datagrid/Datagrid/DatagridRow.js +14 -2
- package/lib/components/Datagrid/Datagrid/index.js +3 -5
- package/lib/components/Datagrid/index.js +2 -2
- package/lib/components/Datagrid/useNestedRows.js +3 -3
- package/lib/components/Datagrid/useRowExpander.js +1 -1
- package/lib/components/ExportModal/ExportModal.js +9 -4
- package/lib/components/SidePanel/SidePanel.js +5 -1
- package/lib/components/WebTerminal/WebTerminal.js +36 -10
- package/lib/components/WebTerminal/WebTerminalContentWrapper.js +58 -0
- package/lib/components/WebTerminal/index.js +9 -1
- package/lib/components/index.js +6 -0
- package/lib/global/js/package-settings.js +1 -0
- package/package.json +14 -13
- package/scss/components/AddSelect/_add-select.scss +15 -2
- package/scss/components/DataSpreadsheet/_data-spreadsheet.scss +38 -14
- package/scss/components/Datagrid/styles/datagrid.scss +8 -0
- package/scss/components/Datagrid/styles/useNestedRows.scss +1 -1
- package/scss/components/SidePanel/_side-panel.scss +22 -3
- package/scss/components/WebTerminal/_storybook-styles.scss +5 -0
- package/scss/components/WebTerminal/_web-terminal.scss +14 -4
@@ -0,0 +1,79 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
4
|
+
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
6
|
+
value: true
|
7
|
+
});
|
8
|
+
exports.AddSelectSort = void 0;
|
9
|
+
|
10
|
+
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
11
|
+
|
12
|
+
var _react = _interopRequireDefault(require("react"));
|
13
|
+
|
14
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
15
|
+
|
16
|
+
var _carbonComponentsReact = require("carbon-components-react");
|
17
|
+
|
18
|
+
var _iconsReact = require("@carbon/icons-react");
|
19
|
+
|
20
|
+
var _settings = require("../../settings");
|
21
|
+
|
22
|
+
//
|
23
|
+
// Copyright IBM Corp. 2022
|
24
|
+
//
|
25
|
+
// This source code is licensed under the Apache-2.0 license found in the
|
26
|
+
// LICENSE file in the root directory of this source tree.
|
27
|
+
//
|
28
|
+
var componentName = 'AddSelect';
|
29
|
+
|
30
|
+
var AddSelectSort = function AddSelectSort(_ref) {
|
31
|
+
var setSortAttribute = _ref.setSortAttribute,
|
32
|
+
setSortDirection = _ref.setSortDirection,
|
33
|
+
sortBy = _ref.sortBy;
|
34
|
+
var blockClass = "".concat(_settings.pkg.prefix, "--add-select-sort");
|
35
|
+
var sortByOpts = sortBy ? sortBy.reduce(function (acc, cur) {
|
36
|
+
var opts = [{
|
37
|
+
id: "".concat(cur, "-asc"),
|
38
|
+
itemText: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_iconsReact.ArrowUp16, null), cur),
|
39
|
+
direction: 'asc',
|
40
|
+
attribute: cur
|
41
|
+
}, {
|
42
|
+
id: "".concat(cur, "-desc"),
|
43
|
+
itemText: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_iconsReact.ArrowDown16, null), cur),
|
44
|
+
direction: 'desc',
|
45
|
+
attribute: cur
|
46
|
+
}];
|
47
|
+
return [].concat((0, _toConsumableArray2.default)(acc), opts);
|
48
|
+
}, []) : []; // handlers
|
49
|
+
|
50
|
+
var sortHandler = function sortHandler(_ref2) {
|
51
|
+
var direction = _ref2.direction,
|
52
|
+
attribute = _ref2.attribute;
|
53
|
+
setSortAttribute(attribute);
|
54
|
+
setSortDirection(direction);
|
55
|
+
};
|
56
|
+
|
57
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
58
|
+
className: blockClass
|
59
|
+
}, sortByOpts.length > 0 && /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.OverflowMenu, {
|
60
|
+
renderIcon: _iconsReact.ArrowsVertical32,
|
61
|
+
flipped: true
|
62
|
+
}, sortByOpts.map(function (opt) {
|
63
|
+
return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.OverflowMenuItem, {
|
64
|
+
key: opt.id,
|
65
|
+
itemText: opt.itemText,
|
66
|
+
onClick: function onClick() {
|
67
|
+
return sortHandler(opt);
|
68
|
+
}
|
69
|
+
});
|
70
|
+
})));
|
71
|
+
};
|
72
|
+
|
73
|
+
exports.AddSelectSort = AddSelectSort;
|
74
|
+
AddSelectSort.propTypes = {
|
75
|
+
setSortAttribute: _propTypes.default.func,
|
76
|
+
setSortDirection: _propTypes.default.func,
|
77
|
+
sortBy: _propTypes.default.array
|
78
|
+
};
|
79
|
+
AddSelectSort.displayName = componentName;
|
@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
6
6
|
value: true
|
7
7
|
});
|
8
|
-
exports.normalize = exports.getGlobalFilterValues = exports.flatten = void 0;
|
8
|
+
exports.sortItems = exports.normalize = exports.getSortBy = exports.getGlobalFilterValues = exports.flatten = void 0;
|
9
9
|
|
10
10
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
11
11
|
|
@@ -108,4 +108,31 @@ var getGlobalFilterValues = function getGlobalFilterValues(globalFilters, items)
|
|
108
108
|
return filterOpts;
|
109
109
|
};
|
110
110
|
|
111
|
-
exports.getGlobalFilterValues = getGlobalFilterValues;
|
111
|
+
exports.getGlobalFilterValues = getGlobalFilterValues;
|
112
|
+
|
113
|
+
var sortItems = function sortItems(attribute, direction) {
|
114
|
+
return function (a, b) {
|
115
|
+
var _a$attribute, _b$attribute;
|
116
|
+
|
117
|
+
var valueA = (_a$attribute = a[attribute]) === null || _a$attribute === void 0 ? void 0 : _a$attribute.split(' ').join('');
|
118
|
+
var valueB = (_b$attribute = b[attribute]) === null || _b$attribute === void 0 ? void 0 : _b$attribute.split(' ').join('');
|
119
|
+
|
120
|
+
if (direction === 'desc') {
|
121
|
+
return valueA > valueB ? -1 : 1;
|
122
|
+
}
|
123
|
+
|
124
|
+
return valueA < valueB ? -1 : 1;
|
125
|
+
};
|
126
|
+
};
|
127
|
+
|
128
|
+
exports.sortItems = sortItems;
|
129
|
+
|
130
|
+
var getSortBy = function getSortBy(items) {
|
131
|
+
var _items$find;
|
132
|
+
|
133
|
+
return (_items$find = items.find(function (item) {
|
134
|
+
return item.sortBy;
|
135
|
+
})) === null || _items$find === void 0 ? void 0 : _items$find.sortBy;
|
136
|
+
};
|
137
|
+
|
138
|
+
exports.getSortBy = getSortBy;
|
@@ -0,0 +1,33 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
4
|
+
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
6
|
+
value: true
|
7
|
+
});
|
8
|
+
exports.useItemSort = void 0;
|
9
|
+
|
10
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
11
|
+
|
12
|
+
var _react = require("react");
|
13
|
+
|
14
|
+
var useItemSort = function useItemSort() {
|
15
|
+
var _useState = (0, _react.useState)(''),
|
16
|
+
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
17
|
+
sortDirection = _useState2[0],
|
18
|
+
setSortDirection = _useState2[1];
|
19
|
+
|
20
|
+
var _useState3 = (0, _react.useState)(''),
|
21
|
+
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
|
22
|
+
sortAttribute = _useState4[0],
|
23
|
+
setSortAttribute = _useState4[1];
|
24
|
+
|
25
|
+
return {
|
26
|
+
sortDirection: sortDirection,
|
27
|
+
setSortDirection: setSortDirection,
|
28
|
+
sortAttribute: sortAttribute,
|
29
|
+
setSortAttribute: setSortAttribute
|
30
|
+
};
|
31
|
+
};
|
32
|
+
|
33
|
+
exports.useItemSort = useItemSort;
|
@@ -65,7 +65,7 @@ var _handleActiveCellInSelectionEnter = require("./utils/handleActiveCellInSelec
|
|
65
65
|
|
66
66
|
var _handleActiveCellInSelectionTab = require("./utils/handleActiveCellInSelectionTab");
|
67
67
|
|
68
|
-
var _excluded = ["cellSize", "className", "columns", "data", "defaultEmptyRowCount", "onDataUpdate", "id", "onActiveCellChange", "onSelectionAreaChange"];
|
68
|
+
var _excluded = ["cellSize", "className", "columns", "data", "defaultEmptyRowCount", "onDataUpdate", "id", "onActiveCellChange", "onSelectionAreaChange", "totalVisibleColumns"];
|
69
69
|
|
70
70
|
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); }
|
71
71
|
|
@@ -110,6 +110,7 @@ var DataSpreadsheet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
|
|
110
110
|
onActiveCellChange = _ref$onActiveCellChan === void 0 ? defaults.onActiveCellChange : _ref$onActiveCellChan,
|
111
111
|
_ref$onSelectionAreaC = _ref.onSelectionAreaChange,
|
112
112
|
onSelectionAreaChange = _ref$onSelectionAreaC === void 0 ? defaults.onSelectionAreaChange : _ref$onSelectionAreaC,
|
113
|
+
totalVisibleColumns = _ref.totalVisibleColumns,
|
113
114
|
rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
|
114
115
|
var multiKeyTrackingRef = (0, _react.useRef)();
|
115
116
|
var localRef = (0, _react.useRef)();
|
@@ -158,8 +159,13 @@ var DataSpreadsheet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
|
|
158
159
|
|
159
160
|
var _useState17 = (0, _react.useState)(false),
|
160
161
|
_useState18 = (0, _slicedToArray2.default)(_useState17, 2),
|
161
|
-
|
162
|
-
|
162
|
+
headerCellHoldActive = _useState18[0],
|
163
|
+
setHeaderCellHoldActive = _useState18[1];
|
164
|
+
|
165
|
+
var _useState19 = (0, _react.useState)(false),
|
166
|
+
_useState20 = (0, _slicedToArray2.default)(_useState19, 2),
|
167
|
+
activeCellInsideSelectionArea = _useState20[0],
|
168
|
+
setActiveCellInsideSelectionArea = _useState20[1];
|
163
169
|
|
164
170
|
var previousState = (0, _hooks.usePreviousValue)({
|
165
171
|
activeCellCoordinates: activeCellCoordinates,
|
@@ -168,10 +174,10 @@ var DataSpreadsheet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
|
|
168
174
|
var cellSizeValue = (0, _getCellSize.getCellSize)(cellSize);
|
169
175
|
var cellEditorRef = (0, _react.useRef)();
|
170
176
|
|
171
|
-
var
|
172
|
-
|
173
|
-
activeCellContent =
|
174
|
-
setActiveCellContent =
|
177
|
+
var _useState21 = (0, _react.useState)(),
|
178
|
+
_useState22 = (0, _slicedToArray2.default)(_useState21, 2),
|
179
|
+
activeCellContent = _useState22[0],
|
180
|
+
setActiveCellContent = _useState22[1];
|
175
181
|
|
176
182
|
var activeCellRef = (0, _react.useRef)();
|
177
183
|
var cellEditorRulerRef = (0, _react.useRef)();
|
@@ -199,13 +205,15 @@ var DataSpreadsheet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
|
|
199
205
|
columns: columns,
|
200
206
|
data: data,
|
201
207
|
defaultColumn: defaultColumn
|
202
|
-
}, _reactTable.useBlockLayout),
|
208
|
+
}, _reactTable.useBlockLayout, _reactTable.useColumnOrder),
|
203
209
|
getTableProps = _useTable.getTableProps,
|
204
210
|
getTableBodyProps = _useTable.getTableBodyProps,
|
205
211
|
headerGroups = _useTable.headerGroups,
|
206
212
|
rows = _useTable.rows,
|
207
213
|
totalColumnsWidth = _useTable.totalColumnsWidth,
|
208
|
-
prepareRow = _useTable.prepareRow
|
214
|
+
prepareRow = _useTable.prepareRow,
|
215
|
+
setColumnOrder = _useTable.setColumnOrder,
|
216
|
+
visibleColumns = _useTable.visibleColumns; // Update the spreadsheet data after editing a cell
|
209
217
|
|
210
218
|
|
211
219
|
var updateData = (0, _react.useCallback)(function (rowIndex, columnId) {
|
@@ -608,10 +616,12 @@ var DataSpreadsheet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
|
|
608
616
|
|
609
617
|
var startEditMode = function startEditMode() {
|
610
618
|
setIsEditing(true);
|
619
|
+
setClickAndHoldActive(false);
|
611
620
|
var activeCellFullData = typeof (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === 'number' && typeof (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === 'number' ? rows[activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row].cells[activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column] : null;
|
612
|
-
var activeCellValue = activeCellFullData ?
|
621
|
+
var activeCellValue = activeCellFullData ? activeCellFullData.row.cells[activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column].value : null;
|
613
622
|
setCellEditorValue(activeCellValue);
|
614
623
|
cellEditorRulerRef.current.textContent = activeCellValue;
|
624
|
+
cellEditorRef.current.style.width = activeCellRef === null || activeCellRef === void 0 ? void 0 : activeCellRef.current.style.width;
|
615
625
|
}; // Sets the initial placement of the cell editor cursor at the end of the text area
|
616
626
|
// this is not done for us by default in Safari
|
617
627
|
|
@@ -732,7 +742,7 @@ var DataSpreadsheet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
|
|
732
742
|
activeCellRef: activeCellRef,
|
733
743
|
cellEditorRef: cellEditorRef,
|
734
744
|
cellEditorRulerRef: cellEditorRulerRef,
|
735
|
-
|
745
|
+
visibleColumns: visibleColumns,
|
736
746
|
defaultColumn: defaultColumn,
|
737
747
|
cellEditorValue: cellEditorValue
|
738
748
|
});
|
@@ -801,7 +811,10 @@ var DataSpreadsheet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
|
|
801
811
|
setSelectionAreas: setSelectionAreas,
|
802
812
|
setCurrentMatcher: setCurrentMatcher,
|
803
813
|
setSelectionAreaData: setSelectionAreaData,
|
804
|
-
|
814
|
+
totalVisibleColumns: totalVisibleColumns,
|
815
|
+
updateActiveCellCoordinates: updateActiveCellCoordinates,
|
816
|
+
setHeaderCellHoldActive: setHeaderCellHoldActive,
|
817
|
+
headerCellHoldActive: headerCellHoldActive
|
805
818
|
}), /*#__PURE__*/_react.default.createElement(_DataSpreadsheetBody.DataSpreadsheetBody, {
|
806
819
|
activeCellCoordinates: activeCellCoordinates,
|
807
820
|
ref: spreadsheetRef,
|
@@ -829,7 +842,11 @@ var DataSpreadsheet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
|
|
829
842
|
id: id,
|
830
843
|
columns: columns,
|
831
844
|
defaultEmptyRowCount: defaultEmptyRowCount,
|
832
|
-
setActiveCellInsideSelectionArea: setActiveCellInsideSelectionArea
|
845
|
+
setActiveCellInsideSelectionArea: setActiveCellInsideSelectionArea,
|
846
|
+
totalVisibleColumns: totalVisibleColumns,
|
847
|
+
setHeaderCellHoldActive: setHeaderCellHoldActive,
|
848
|
+
setColumnOrder: setColumnOrder,
|
849
|
+
visibleColumns: visibleColumns
|
833
850
|
}), /*#__PURE__*/_react.default.createElement("button", {
|
834
851
|
onMouseDown: handleActiveCellMouseDown,
|
835
852
|
onClick: handleActiveCellClick,
|
@@ -927,7 +944,13 @@ DataSpreadsheet.propTypes = {
|
|
927
944
|
/**
|
928
945
|
* The event handler that is called when the selection area values change
|
929
946
|
*/
|
930
|
-
onSelectionAreaChange: _propTypes.default.func
|
947
|
+
onSelectionAreaChange: _propTypes.default.func,
|
948
|
+
|
949
|
+
/**
|
950
|
+
* The total number of columns to be initially visible, additional columns will be rendered and
|
951
|
+
* visible via horizontal scrollbar
|
952
|
+
*/
|
953
|
+
totalVisibleColumns: _propTypes.default.number
|
931
954
|
/* TODO: add types and DocGen for all props. */
|
932
955
|
|
933
956
|
};
|
@@ -15,6 +15,8 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
|
|
15
15
|
|
16
16
|
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
17
17
|
|
18
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
19
|
+
|
18
20
|
var _react = _interopRequireWildcard(require("react"));
|
19
21
|
|
20
22
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
@@ -39,8 +41,14 @@ var _createCellSelectionArea = require("./utils/createCellSelectionArea");
|
|
39
41
|
|
40
42
|
var _checkActiveHeaderCell = require("./utils/checkActiveHeaderCell");
|
41
43
|
|
44
|
+
var _checkSelectedHeaderCell = require("./utils/checkSelectedHeaderCell");
|
45
|
+
|
42
46
|
var _handleHeaderCellSelection = require("./utils/handleHeaderCellSelection");
|
43
47
|
|
48
|
+
var _getSpreadsheetWidth = require("./utils/getSpreadsheetWidth");
|
49
|
+
|
50
|
+
var _hooks2 = require("./hooks");
|
51
|
+
|
44
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); }
|
45
53
|
|
46
54
|
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; }
|
@@ -74,7 +82,18 @@ var DataSpreadsheetBody = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, re
|
|
74
82
|
currentMatcher = _ref.currentMatcher,
|
75
83
|
setCurrentMatcher = _ref.setCurrentMatcher,
|
76
84
|
onSelectionAreaChange = _ref.onSelectionAreaChange,
|
77
|
-
setActiveCellInsideSelectionArea = _ref.setActiveCellInsideSelectionArea
|
85
|
+
setActiveCellInsideSelectionArea = _ref.setActiveCellInsideSelectionArea,
|
86
|
+
totalVisibleColumns = _ref.totalVisibleColumns,
|
87
|
+
setHeaderCellHoldActive = _ref.setHeaderCellHoldActive,
|
88
|
+
setColumnOrder = _ref.setColumnOrder,
|
89
|
+
visibleColumns = _ref.visibleColumns;
|
90
|
+
|
91
|
+
var _useState = (0, _react.useState)(false),
|
92
|
+
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
93
|
+
validStartingPoint = _useState2[0],
|
94
|
+
setValidStartingPoint = _useState2[1];
|
95
|
+
|
96
|
+
var contentScrollRef = (0, _react.useRef)();
|
78
97
|
var previousState = (0, _hooks.usePreviousValue)({
|
79
98
|
selectionAreaData: selectionAreaData,
|
80
99
|
clickAndHoldActive: clickAndHoldActive
|
@@ -138,14 +157,15 @@ var DataSpreadsheetBody = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, re
|
|
138
157
|
defaultColumn: defaultColumn,
|
139
158
|
selectionAreas: selectionAreas,
|
140
159
|
setSelectionAreas: setSelectionAreas,
|
141
|
-
setActiveCellInsideSelectionArea: setActiveCellInsideSelectionArea
|
160
|
+
setActiveCellInsideSelectionArea: setActiveCellInsideSelectionArea,
|
161
|
+
visibleColumns: visibleColumns
|
142
162
|
});
|
143
163
|
}
|
144
164
|
|
145
165
|
return;
|
146
166
|
});
|
147
167
|
}
|
148
|
-
}, [selectionAreas, setSelectionAreas, defaultColumn, onSelectionAreaChange, setSelectionAreaData, ref, activeCellCoordinates, setActiveCellInsideSelectionArea]);
|
168
|
+
}, [selectionAreas, setSelectionAreas, defaultColumn, onSelectionAreaChange, setSelectionAreaData, ref, activeCellCoordinates, setActiveCellInsideSelectionArea, visibleColumns]);
|
149
169
|
|
150
170
|
var populateSelectionAreaCellData = function populateSelectionAreaCellData(_ref2) {
|
151
171
|
var rowStart = _ref2.rowStart,
|
@@ -161,41 +181,23 @@ var DataSpreadsheetBody = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, re
|
|
161
181
|
}
|
162
182
|
|
163
183
|
return cellContainer;
|
164
|
-
};
|
165
|
-
|
166
|
-
|
167
|
-
|
168
|
-
|
169
|
-
|
170
|
-
|
171
|
-
|
172
|
-
|
173
|
-
|
174
|
-
|
175
|
-
|
176
|
-
|
177
|
-
|
178
|
-
|
179
|
-
|
180
|
-
|
181
|
-
}); // No items in the array have an object that matches the value of currentMatcher
|
182
|
-
|
183
|
-
if (indexOfItemToUpdate === -1) {
|
184
|
-
return prev;
|
185
|
-
}
|
186
|
-
|
187
|
-
selectionAreaClone[indexOfItemToUpdate].point2 = endCellCoordinates;
|
188
|
-
selectionAreaClone[indexOfItemToUpdate].areaCreated = false;
|
189
|
-
return selectionAreaClone;
|
190
|
-
});
|
191
|
-
}
|
192
|
-
};
|
193
|
-
|
194
|
-
document.addEventListener('mouseup', handleMouseUp);
|
195
|
-
return function () {
|
196
|
-
document.removeEventListener('mouseup', handleMouseUp);
|
197
|
-
};
|
198
|
-
}, [selectionAreas, currentMatcher, setSelectionAreas, setClickAndHoldActive, setCurrentMatcher, ref]); // Make sure that if the cellSize prop changes, the active
|
184
|
+
};
|
185
|
+
|
186
|
+
(0, _hooks2.useSpreadsheetMouseUp)({
|
187
|
+
currentMatcher: currentMatcher,
|
188
|
+
setClickAndHoldActive: setClickAndHoldActive,
|
189
|
+
setSelectionAreas: setSelectionAreas,
|
190
|
+
setValidStartingPoint: setValidStartingPoint,
|
191
|
+
validStartingPoint: validStartingPoint,
|
192
|
+
ref: ref,
|
193
|
+
setHeaderCellHoldActive: setHeaderCellHoldActive,
|
194
|
+
setColumnOrder: setColumnOrder,
|
195
|
+
visibleColumns: visibleColumns,
|
196
|
+
setActiveCellCoordinates: setActiveCellCoordinates,
|
197
|
+
rows: rows,
|
198
|
+
activeCellCoordinates: activeCellCoordinates,
|
199
|
+
defaultColumn: defaultColumn
|
200
|
+
}); // Make sure that if the cellSize prop changes, the active
|
199
201
|
// cell also gets updated with the new size
|
200
202
|
|
201
203
|
(0, _react.useEffect)(function () {
|
@@ -211,6 +213,9 @@ var DataSpreadsheetBody = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, re
|
|
211
213
|
var handleBodyCellClick = (0, _react.useCallback)(function (cell, columnIndex) {
|
212
214
|
return function (event) {
|
213
215
|
event.preventDefault();
|
216
|
+
var closestBodyCell = event.target.closest(".".concat(blockClass, "__body--td"));
|
217
|
+
var isValidSelectionAreaStart = closestBodyCell.classList.contains("".concat(blockClass, "__body--td"));
|
218
|
+
setValidStartingPoint(isValidSelectionAreaStart);
|
214
219
|
var isHoldingCommandKey = event.metaKey || event.ctrlKey;
|
215
220
|
var isHoldingShiftKey = event.shiftKey;
|
216
221
|
setContainerHasFocus(true);
|
@@ -271,6 +276,21 @@ var DataSpreadsheetBody = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, re
|
|
271
276
|
}
|
272
277
|
};
|
273
278
|
}, [currentMatcher, activeCellCoordinates, selectionAreas, setActiveCellCoordinates, setSelectionAreas, setContainerHasFocus, setClickAndHoldActive, setCurrentMatcher, ref, setSelectionAreaData, setActiveCellInsideSelectionArea]);
|
279
|
+
|
280
|
+
var handleBodyScroll = function handleBodyScroll() {
|
281
|
+
var headerRowElement = ref.current.querySelector("\n .".concat(blockClass, "__header--container .").concat(blockClass, "__tr"));
|
282
|
+
headerRowElement.scrollLeft = contentScrollRef.current.scrollLeft;
|
283
|
+
};
|
284
|
+
|
285
|
+
(0, _react.useEffect)(function () {
|
286
|
+
contentScrollRef.current.addEventListener('scroll', function (event) {
|
287
|
+
return handleBodyScroll(event);
|
288
|
+
});
|
289
|
+
var contentScrollElementRef = contentScrollRef.current;
|
290
|
+
return function () {
|
291
|
+
contentScrollElementRef.removeEventListener('scroll', handleBodyScroll);
|
292
|
+
};
|
293
|
+
});
|
274
294
|
var handleBodyCellHover = (0, _react.useCallback)(function (cell, columnIndex) {
|
275
295
|
return function () {
|
276
296
|
if (clickAndHoldActive) {
|
@@ -353,6 +373,8 @@ var DataSpreadsheetBody = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, re
|
|
353
373
|
var row = rows[index];
|
354
374
|
|
355
375
|
if (rows && rows.length) {
|
376
|
+
var _cx;
|
377
|
+
|
356
378
|
prepareRow(row);
|
357
379
|
return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, row.getRowProps({
|
358
380
|
style: style
|
@@ -361,7 +383,8 @@ var DataSpreadsheetBody = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, re
|
|
361
383
|
"data-row-index": index,
|
362
384
|
"aria-rowindex": index + 1
|
363
385
|
}), /*#__PURE__*/_react.default.createElement("div", {
|
364
|
-
role: "rowheader"
|
386
|
+
role: "rowheader",
|
387
|
+
className: "".concat(blockClass, "__td-th--cell-container")
|
365
388
|
}, /*#__PURE__*/_react.default.createElement("button", {
|
366
389
|
id: "".concat(blockClass, "__cell--").concat(index, "--header"),
|
367
390
|
tabIndex: -1,
|
@@ -369,9 +392,9 @@ var DataSpreadsheetBody = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, re
|
|
369
392
|
"data-column-index": "header",
|
370
393
|
type: "button",
|
371
394
|
onClick: handleRowHeaderClick(index),
|
372
|
-
className: (0, _classnames.default)("".concat(blockClass, "__td"), "".concat(blockClass, "__td-th"), "".concat(blockClass, "--interactive-cell-element"), (0, _defineProperty2.default)(
|
395
|
+
className: (0, _classnames.default)("".concat(blockClass, "__td"), "".concat(blockClass, "__td-th"), "".concat(blockClass, "--interactive-cell-element"), (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__td-th--active-header"), (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === index || (0, _checkActiveHeaderCell.checkActiveHeaderCell)(index, selectionAreas, 'row')), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__td-th--selected-header"), (0, _checkSelectedHeaderCell.checkSelectedHeaderCell)(index, selectionAreas, 'row')), _cx)),
|
373
396
|
style: {
|
374
|
-
width:
|
397
|
+
width: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeaderWidth
|
375
398
|
}
|
376
399
|
}, index + 1)), row.cells.map(function (cell, index) {
|
377
400
|
return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
|
@@ -380,7 +403,8 @@ var DataSpreadsheetBody = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, re
|
|
380
403
|
}, cell.getCellProps(), {
|
381
404
|
role: "gridcell",
|
382
405
|
style: _objectSpread(_objectSpread({}, cell.getCellProps().style), {}, {
|
383
|
-
display: 'grid'
|
406
|
+
display: 'grid',
|
407
|
+
minWidth: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.width
|
384
408
|
})
|
385
409
|
}), /*#__PURE__*/_react.default.createElement("button", {
|
386
410
|
id: "".concat(blockClass, "__cell--").concat(cell.row.index, "--").concat(index),
|
@@ -395,7 +419,7 @@ var DataSpreadsheetBody = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, re
|
|
395
419
|
}, cell.render('Cell')));
|
396
420
|
}));
|
397
421
|
}
|
398
|
-
}, [prepareRow, rows,
|
422
|
+
}, [prepareRow, rows, activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row, selectionAreas, handleRowHeaderClick, handleBodyCellClick, handleBodyCellHover, defaultColumn]);
|
399
423
|
var spreadsheetBodyRef = (0, _react.useRef)();
|
400
424
|
return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
|
401
425
|
ref: spreadsheetBodyRef,
|
@@ -405,7 +429,13 @@ var DataSpreadsheetBody = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, re
|
|
405
429
|
height: 400,
|
406
430
|
itemCount: rows.length || defaultEmptyRowCount,
|
407
431
|
itemSize: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeight,
|
408
|
-
width:
|
432
|
+
width: (0, _getSpreadsheetWidth.getSpreadsheetWidth)({
|
433
|
+
scrollBarSizeValue: scrollBarSize,
|
434
|
+
totalVisibleColumns: totalVisibleColumns,
|
435
|
+
defaultColumn: defaultColumn,
|
436
|
+
totalColumnsWidth: totalColumnsWidth
|
437
|
+
}),
|
438
|
+
outerRef: contentScrollRef
|
409
439
|
}, rows !== null && rows !== void 0 && rows.length ? RenderRow : RenderEmptyRows));
|
410
440
|
});
|
411
441
|
exports.DataSpreadsheetBody = DataSpreadsheetBody;
|
@@ -517,6 +547,11 @@ DataSpreadsheetBody.propTypes = {
|
|
517
547
|
*/
|
518
548
|
setClickAndHoldActive: _propTypes.default.func,
|
519
549
|
|
550
|
+
/**
|
551
|
+
* Setter fn for column ordering, provided from react-table
|
552
|
+
*/
|
553
|
+
setColumnOrder: _propTypes.default.func,
|
554
|
+
|
520
555
|
/**
|
521
556
|
* Setter fn for containerHasFocus state value
|
522
557
|
*/
|
@@ -527,6 +562,11 @@ DataSpreadsheetBody.propTypes = {
|
|
527
562
|
*/
|
528
563
|
setCurrentMatcher: _propTypes.default.func,
|
529
564
|
|
565
|
+
/**
|
566
|
+
* Setter fn for header cell hold active value
|
567
|
+
*/
|
568
|
+
setHeaderCellHoldActive: _propTypes.default.func,
|
569
|
+
|
530
570
|
/**
|
531
571
|
* Setter fn for selectionAreaData state value
|
532
572
|
*/
|
@@ -540,5 +580,16 @@ DataSpreadsheetBody.propTypes = {
|
|
540
580
|
/**
|
541
581
|
* The total columns width
|
542
582
|
*/
|
543
|
-
totalColumnsWidth: _propTypes.default.number
|
583
|
+
totalColumnsWidth: _propTypes.default.number,
|
584
|
+
|
585
|
+
/**
|
586
|
+
* The total number of columns to be initially visible, additional columns will be rendered and
|
587
|
+
* visible via horizontal scrollbar
|
588
|
+
*/
|
589
|
+
totalVisibleColumns: _propTypes.default.number,
|
590
|
+
|
591
|
+
/**
|
592
|
+
* Prop from react-table used to reorder columns
|
593
|
+
*/
|
594
|
+
visibleColumns: _propTypes.default.array
|
544
595
|
};
|