@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
@@ -11,14 +11,17 @@ var _excluded = ["columnInputPlaceholder", "filteredItems", "header", "multiSele
|
|
11
11
|
//
|
12
12
|
import React, { useState, useEffect } from 'react';
|
13
13
|
import PropTypes from 'prop-types';
|
14
|
-
import { TextInput, Tag, OverflowMenu,
|
15
|
-
import { Filter32
|
14
|
+
import { TextInput, Tag, OverflowMenu, Checkbox } from 'carbon-components-react';
|
15
|
+
import { Filter32 } from '@carbon/icons-react';
|
16
16
|
import { pkg, carbon } from '../../settings';
|
17
17
|
import { AddSelectList } from './AddSelectList';
|
18
|
+
import { AddSelectSort } from './AddSelectSort';
|
19
|
+
import { sortItems, getSortBy } from './add-select-utils';
|
20
|
+
import { useItemSort } from './hooks/useItemSort';
|
18
21
|
import uuidv4 from '../../global/js/utils/uuidv4';
|
19
22
|
var componentName = 'AddSelect';
|
20
23
|
export var AddSelectColumn = function AddSelectColumn(_ref) {
|
21
|
-
var _filteredItems$find
|
24
|
+
var _filteredItems$find;
|
22
25
|
|
23
26
|
var columnInputPlaceholder = _ref.columnInputPlaceholder,
|
24
27
|
filteredItems = _ref.filteredItems,
|
@@ -37,20 +40,16 @@ export var AddSelectColumn = function AddSelectColumn(_ref) {
|
|
37
40
|
searchTerm = _useState4[0],
|
38
41
|
setSearchTerm = _useState4[1];
|
39
42
|
|
40
|
-
var
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
var _useState7 = useState(''),
|
46
|
-
_useState8 = _slicedToArray(_useState7, 2),
|
47
|
-
sortAttribute = _useState8[0],
|
48
|
-
setSortAttribute = _useState8[1];
|
43
|
+
var _useItemSort = useItemSort(),
|
44
|
+
sortDirection = _useItemSort.sortDirection,
|
45
|
+
setSortDirection = _useItemSort.setSortDirection,
|
46
|
+
sortAttribute = _useItemSort.sortAttribute,
|
47
|
+
setSortAttribute = _useItemSort.setSortAttribute;
|
49
48
|
|
50
|
-
var
|
51
|
-
|
52
|
-
filters =
|
53
|
-
setFilters =
|
49
|
+
var _useState5 = useState([]),
|
50
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
51
|
+
filters = _useState6[0],
|
52
|
+
setFilters = _useState6[1];
|
54
53
|
|
55
54
|
var blockClass = "".concat(pkg.prefix, "--add-select");
|
56
55
|
var colClass = "".concat(blockClass, "__column");
|
@@ -59,39 +58,14 @@ export var AddSelectColumn = function AddSelectColumn(_ref) {
|
|
59
58
|
return multiSelection.includes(item.id);
|
60
59
|
});
|
61
60
|
setAllSelected(isAllSelected);
|
62
|
-
}, [filteredItems, multiSelection]); //
|
63
|
-
|
64
|
-
var
|
65
|
-
return item.sortBy;
|
66
|
-
})) === null || _filteredItems$find === void 0 ? void 0 : _filteredItems$find.sortBy;
|
67
|
-
var sortByOpts = colSortBy ? colSortBy.reduce(function (acc, cur) {
|
68
|
-
var opts = [{
|
69
|
-
id: "".concat(cur, "-asc"),
|
70
|
-
itemText: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ArrowUp16, null), cur),
|
71
|
-
direction: 'asc',
|
72
|
-
attribute: cur
|
73
|
-
}, {
|
74
|
-
id: "".concat(cur, "-desc"),
|
75
|
-
itemText: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ArrowDown16, null), cur),
|
76
|
-
direction: 'desc',
|
77
|
-
attribute: cur
|
78
|
-
}];
|
79
|
-
return [].concat(_toConsumableArray(acc), opts);
|
80
|
-
}, []) : []; // filtering
|
81
|
-
|
82
|
-
var colFilterBy = (_filteredItems$find2 = filteredItems.find(function (item) {
|
61
|
+
}, [filteredItems, multiSelection]); // filtering
|
62
|
+
|
63
|
+
var colFilterBy = (_filteredItems$find = filteredItems.find(function (item) {
|
83
64
|
return item.filterBy;
|
84
|
-
})) === null || _filteredItems$
|
65
|
+
})) === null || _filteredItems$find === void 0 ? void 0 : _filteredItems$find.filterBy;
|
85
66
|
var filterByOpts = colFilterBy ? filteredItems.map(function (item) {
|
86
67
|
return item[colFilterBy];
|
87
|
-
}) : [];
|
88
|
-
|
89
|
-
var sortHandler = function sortHandler(_ref2) {
|
90
|
-
var direction = _ref2.direction,
|
91
|
-
attribute = _ref2.attribute;
|
92
|
-
setSortAttribute(attribute);
|
93
|
-
setSortDirection(direction);
|
94
|
-
};
|
68
|
+
}) : [];
|
95
69
|
|
96
70
|
var selectAllHandler = function selectAllHandler(checked) {
|
97
71
|
var itemIds = filteredItems.map(function (item) {
|
@@ -138,22 +112,11 @@ export var AddSelectColumn = function AddSelectColumn(_ref) {
|
|
138
112
|
});
|
139
113
|
};
|
140
114
|
|
141
|
-
var
|
142
|
-
|
143
|
-
|
144
|
-
var valueA = (_a$sortAttribute = a[sortAttribute]) === null || _a$sortAttribute === void 0 ? void 0 : _a$sortAttribute.split(' ').join('');
|
145
|
-
var valueB = (_b$sortAttribute = b[sortAttribute]) === null || _b$sortAttribute === void 0 ? void 0 : _b$sortAttribute.split(' ').join('');
|
146
|
-
|
147
|
-
if (sortDirection === 'desc') {
|
148
|
-
return valueA > valueB ? -1 : 1;
|
149
|
-
}
|
150
|
-
|
151
|
-
return valueA < valueB ? -1 : 1;
|
152
|
-
};
|
153
|
-
|
115
|
+
var sortFn = sortItems(sortAttribute, sortDirection);
|
116
|
+
var sortBy = getSortBy(filteredItems);
|
154
117
|
var colItems = filteredItems.filter(filterBySearch) // first check if the item meets the search
|
155
118
|
.filter(filterByAttribute) // then check if the item is included in the filter
|
156
|
-
.sort(
|
119
|
+
.sort(sortFn); // then sort the items by whatever criteria
|
157
120
|
|
158
121
|
return /*#__PURE__*/React.createElement("div", {
|
159
122
|
className: colClass
|
@@ -171,19 +134,14 @@ export var AddSelectColumn = function AddSelectColumn(_ref) {
|
|
171
134
|
labelText: columnInputPlaceholder
|
172
135
|
}), /*#__PURE__*/React.createElement("div", {
|
173
136
|
className: "".concat(colClass, "-sort-filter")
|
174
|
-
},
|
175
|
-
|
176
|
-
|
177
|
-
|
178
|
-
|
179
|
-
|
180
|
-
|
181
|
-
|
182
|
-
onClick: function onClick() {
|
183
|
-
return sortHandler(opt);
|
184
|
-
}
|
185
|
-
});
|
186
|
-
})), filterByOpts.length > 0 && /*#__PURE__*/React.createElement(OverflowMenu, {
|
137
|
+
}, /*#__PURE__*/React.createElement(AddSelectSort, {
|
138
|
+
items: filteredItems,
|
139
|
+
setSortAttribute: setSortAttribute,
|
140
|
+
setSortDirection: setSortDirection,
|
141
|
+
sortAttribute: sortAttribute,
|
142
|
+
sortDirection: sortDirection,
|
143
|
+
sortBy: sortBy
|
144
|
+
}), filterByOpts.length > 0 && /*#__PURE__*/React.createElement(OverflowMenu, {
|
187
145
|
renderIcon: Filter32,
|
188
146
|
className: "".concat(colClass, "-overflow"),
|
189
147
|
flipped: true
|
@@ -12,15 +12,18 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
|
|
12
12
|
// LICENSE file in the root directory of this source tree.
|
13
13
|
//
|
14
14
|
import React, { useState } from 'react';
|
15
|
-
import { Button, ButtonSet, Dropdown, TextInput } from 'carbon-components-react';
|
15
|
+
import { Button, ButtonSet, Dropdown, TextInput, Tag } from 'carbon-components-react';
|
16
16
|
import PropTypes from 'prop-types';
|
17
17
|
import { Filter16 } from '@carbon/icons-react';
|
18
18
|
import { pkg } from '../../settings';
|
19
19
|
var componentName = 'AddSelectFilter';
|
20
20
|
export var AddSelectFilter = function AddSelectFilter(_ref) {
|
21
|
-
var
|
21
|
+
var appliedFilters = _ref.appliedFilters,
|
22
|
+
clearFiltersText = _ref.clearFiltersText,
|
23
|
+
filterOpts = _ref.filterOpts,
|
22
24
|
handleFilter = _ref.handleFilter,
|
23
25
|
handleSearch = _ref.handleSearch,
|
26
|
+
hasFiltersApplied = _ref.hasFiltersApplied,
|
24
27
|
iconDescription = _ref.iconDescription,
|
25
28
|
inputLabel = _ref.inputLabel,
|
26
29
|
inputPlaceholder = _ref.inputPlaceholder,
|
@@ -50,6 +53,14 @@ export var AddSelectFilter = function AddSelectFilter(_ref) {
|
|
50
53
|
var selectedItem = _ref2.selectedItem;
|
51
54
|
setFilters(_objectSpread(_objectSpread({}, filters), {}, _defineProperty({}, id, selectedItem)));
|
52
55
|
};
|
56
|
+
/**
|
57
|
+
* this component needs to manage it's own internal state of filters before they're applied
|
58
|
+
* setFilters manages the local filter state
|
59
|
+
* applyFilters adds the filter state to the parent
|
60
|
+
* resetFilters resets the local state
|
61
|
+
* clearFilters resets both
|
62
|
+
*/
|
63
|
+
|
53
64
|
|
54
65
|
var applyFilters = function applyFilters() {
|
55
66
|
handleFilter(filters);
|
@@ -59,12 +70,25 @@ export var AddSelectFilter = function AddSelectFilter(_ref) {
|
|
59
70
|
setFilters({});
|
60
71
|
};
|
61
72
|
|
73
|
+
var clearFilters = function clearFilters() {
|
74
|
+
resetFilters();
|
75
|
+
handleFilter({});
|
76
|
+
};
|
77
|
+
|
78
|
+
var removeTag = function removeTag(key) {
|
79
|
+
var newFilters = _objectSpread({}, filters);
|
80
|
+
|
81
|
+
delete newFilters[key];
|
82
|
+
setFilters(newFilters);
|
83
|
+
handleFilter(newFilters);
|
84
|
+
};
|
85
|
+
|
62
86
|
var getSelectedItem = function getSelectedItem(id) {
|
63
87
|
return filters[id] || '';
|
64
88
|
};
|
65
89
|
|
66
90
|
var showFilter = multi && (filterOpts === null || filterOpts === void 0 ? void 0 : filterOpts.length) > 0;
|
67
|
-
return /*#__PURE__*/React.createElement("div", {
|
91
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
|
68
92
|
className: "".concat(blockClass, "-search")
|
69
93
|
}, /*#__PURE__*/React.createElement(TextInput, {
|
70
94
|
id: "temp-id",
|
@@ -83,7 +107,7 @@ export var AddSelectFilter = function AddSelectFilter(_ref) {
|
|
83
107
|
className: "".concat(blockClass, "-toggle"),
|
84
108
|
size: "md"
|
85
109
|
}), open && /*#__PURE__*/React.createElement("div", {
|
86
|
-
className:
|
110
|
+
className: blockClass
|
87
111
|
}, /*#__PURE__*/React.createElement("div", {
|
88
112
|
className: "".concat(blockClass, "-content")
|
89
113
|
}, /*#__PURE__*/React.createElement("p", null, "Filters"), /*#__PURE__*/React.createElement("div", {
|
@@ -111,12 +135,31 @@ export var AddSelectFilter = function AddSelectFilter(_ref) {
|
|
111
135
|
kind: "primary",
|
112
136
|
onClick: applyFilters,
|
113
137
|
className: "".concat(blockClass, "-button")
|
114
|
-
}, primaryButtonText))))
|
138
|
+
}, primaryButtonText)))), hasFiltersApplied && /*#__PURE__*/React.createElement("div", {
|
139
|
+
className: "".concat(blockClass, "-applied")
|
140
|
+
}, Object.keys(appliedFilters).map(function (filterType) {
|
141
|
+
return /*#__PURE__*/React.createElement(Tag, {
|
142
|
+
key: filterType,
|
143
|
+
type: "gray",
|
144
|
+
size: "sm",
|
145
|
+
onClose: function onClose() {
|
146
|
+
return removeTag(filterType);
|
147
|
+
},
|
148
|
+
filter: true
|
149
|
+
}, "".concat(filterType, ": ").concat(appliedFilters[filterType]));
|
150
|
+
}), /*#__PURE__*/React.createElement(Button, {
|
151
|
+
kind: "ghost",
|
152
|
+
size: "sm",
|
153
|
+
onClick: clearFilters
|
154
|
+
}, clearFiltersText)));
|
115
155
|
};
|
116
156
|
AddSelectFilter.propTypes = {
|
157
|
+
appliedFilters: PropTypes.object,
|
158
|
+
clearFiltersText: PropTypes.string,
|
117
159
|
filterOpts: PropTypes.array,
|
118
160
|
handleFilter: PropTypes.func,
|
119
161
|
handleSearch: PropTypes.func,
|
162
|
+
hasFiltersApplied: PropTypes.bool,
|
120
163
|
iconDescription: PropTypes.string,
|
121
164
|
inputLabel: PropTypes.string,
|
122
165
|
inputPlaceholder: PropTypes.string,
|
@@ -0,0 +1,61 @@
|
|
1
|
+
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
|
2
|
+
//
|
3
|
+
// Copyright IBM Corp. 2022
|
4
|
+
//
|
5
|
+
// This source code is licensed under the Apache-2.0 license found in the
|
6
|
+
// LICENSE file in the root directory of this source tree.
|
7
|
+
//
|
8
|
+
import React from 'react';
|
9
|
+
import PropTypes from 'prop-types';
|
10
|
+
import { OverflowMenu, OverflowMenuItem } from 'carbon-components-react';
|
11
|
+
import { ArrowsVertical32, ArrowUp16, ArrowDown16 } from '@carbon/icons-react';
|
12
|
+
import { pkg } from '../../settings';
|
13
|
+
var componentName = 'AddSelect';
|
14
|
+
export var AddSelectSort = function AddSelectSort(_ref) {
|
15
|
+
var setSortAttribute = _ref.setSortAttribute,
|
16
|
+
setSortDirection = _ref.setSortDirection,
|
17
|
+
sortBy = _ref.sortBy;
|
18
|
+
var blockClass = "".concat(pkg.prefix, "--add-select-sort");
|
19
|
+
var sortByOpts = sortBy ? sortBy.reduce(function (acc, cur) {
|
20
|
+
var opts = [{
|
21
|
+
id: "".concat(cur, "-asc"),
|
22
|
+
itemText: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ArrowUp16, null), cur),
|
23
|
+
direction: 'asc',
|
24
|
+
attribute: cur
|
25
|
+
}, {
|
26
|
+
id: "".concat(cur, "-desc"),
|
27
|
+
itemText: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ArrowDown16, null), cur),
|
28
|
+
direction: 'desc',
|
29
|
+
attribute: cur
|
30
|
+
}];
|
31
|
+
return [].concat(_toConsumableArray(acc), opts);
|
32
|
+
}, []) : []; // handlers
|
33
|
+
|
34
|
+
var sortHandler = function sortHandler(_ref2) {
|
35
|
+
var direction = _ref2.direction,
|
36
|
+
attribute = _ref2.attribute;
|
37
|
+
setSortAttribute(attribute);
|
38
|
+
setSortDirection(direction);
|
39
|
+
};
|
40
|
+
|
41
|
+
return /*#__PURE__*/React.createElement("div", {
|
42
|
+
className: blockClass
|
43
|
+
}, sortByOpts.length > 0 && /*#__PURE__*/React.createElement(OverflowMenu, {
|
44
|
+
renderIcon: ArrowsVertical32,
|
45
|
+
flipped: true
|
46
|
+
}, sortByOpts.map(function (opt) {
|
47
|
+
return /*#__PURE__*/React.createElement(OverflowMenuItem, {
|
48
|
+
key: opt.id,
|
49
|
+
itemText: opt.itemText,
|
50
|
+
onClick: function onClick() {
|
51
|
+
return sortHandler(opt);
|
52
|
+
}
|
53
|
+
});
|
54
|
+
})));
|
55
|
+
};
|
56
|
+
AddSelectSort.propTypes = {
|
57
|
+
setSortAttribute: PropTypes.func,
|
58
|
+
setSortDirection: PropTypes.func,
|
59
|
+
sortBy: PropTypes.array
|
60
|
+
};
|
61
|
+
AddSelectSort.displayName = componentName;
|
@@ -91,4 +91,25 @@ export var getGlobalFilterValues = function getGlobalFilterValues(globalFilters,
|
|
91
91
|
return prevFilter;
|
92
92
|
}, []);
|
93
93
|
return filterOpts;
|
94
|
+
};
|
95
|
+
export var sortItems = function sortItems(attribute, direction) {
|
96
|
+
return function (a, b) {
|
97
|
+
var _a$attribute, _b$attribute;
|
98
|
+
|
99
|
+
var valueA = (_a$attribute = a[attribute]) === null || _a$attribute === void 0 ? void 0 : _a$attribute.split(' ').join('');
|
100
|
+
var valueB = (_b$attribute = b[attribute]) === null || _b$attribute === void 0 ? void 0 : _b$attribute.split(' ').join('');
|
101
|
+
|
102
|
+
if (direction === 'desc') {
|
103
|
+
return valueA > valueB ? -1 : 1;
|
104
|
+
}
|
105
|
+
|
106
|
+
return valueA < valueB ? -1 : 1;
|
107
|
+
};
|
108
|
+
};
|
109
|
+
export var getSortBy = function getSortBy(items) {
|
110
|
+
var _items$find;
|
111
|
+
|
112
|
+
return (_items$find = items.find(function (item) {
|
113
|
+
return item.sortBy;
|
114
|
+
})) === null || _items$find === void 0 ? void 0 : _items$find.sortBy;
|
94
115
|
};
|
@@ -0,0 +1,20 @@
|
|
1
|
+
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
2
|
+
import { useState } from 'react';
|
3
|
+
export var useItemSort = function useItemSort() {
|
4
|
+
var _useState = useState(''),
|
5
|
+
_useState2 = _slicedToArray(_useState, 2),
|
6
|
+
sortDirection = _useState2[0],
|
7
|
+
setSortDirection = _useState2[1];
|
8
|
+
|
9
|
+
var _useState3 = useState(''),
|
10
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
11
|
+
sortAttribute = _useState4[0],
|
12
|
+
setSortAttribute = _useState4[1];
|
13
|
+
|
14
|
+
return {
|
15
|
+
sortDirection: sortDirection,
|
16
|
+
setSortDirection: setSortDirection,
|
17
|
+
sortAttribute: sortAttribute,
|
18
|
+
setSortAttribute: setSortAttribute
|
19
|
+
};
|
20
|
+
};
|
@@ -3,7 +3,7 @@ import _typeof from "@babel/runtime/helpers/typeof";
|
|
3
3
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
4
4
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
5
5
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
6
|
-
var _excluded = ["cellSize", "className", "columns", "data", "defaultEmptyRowCount", "onDataUpdate", "id", "onActiveCellChange", "onSelectionAreaChange"];
|
6
|
+
var _excluded = ["cellSize", "className", "columns", "data", "defaultEmptyRowCount", "onDataUpdate", "id", "onActiveCellChange", "onSelectionAreaChange", "totalVisibleColumns"];
|
7
7
|
|
8
8
|
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; }
|
9
9
|
|
@@ -17,7 +17,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
|
|
17
17
|
*/
|
18
18
|
// Import portions of React that are needed.
|
19
19
|
import React, { useMemo, useRef, useState, useCallback, useEffect } from 'react';
|
20
|
-
import { useBlockLayout, useTable } from 'react-table'; // Other standard imports.
|
20
|
+
import { useBlockLayout, useTable, useColumnOrder } from 'react-table'; // Other standard imports.
|
21
21
|
|
22
22
|
import PropTypes from 'prop-types';
|
23
23
|
import cx from 'classnames';
|
@@ -75,6 +75,7 @@ export var DataSpreadsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref)
|
|
75
75
|
onActiveCellChange = _ref$onActiveCellChan === void 0 ? defaults.onActiveCellChange : _ref$onActiveCellChan,
|
76
76
|
_ref$onSelectionAreaC = _ref.onSelectionAreaChange,
|
77
77
|
onSelectionAreaChange = _ref$onSelectionAreaC === void 0 ? defaults.onSelectionAreaChange : _ref$onSelectionAreaC,
|
78
|
+
totalVisibleColumns = _ref.totalVisibleColumns,
|
78
79
|
rest = _objectWithoutProperties(_ref, _excluded);
|
79
80
|
|
80
81
|
var multiKeyTrackingRef = useRef();
|
@@ -124,8 +125,13 @@ export var DataSpreadsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref)
|
|
124
125
|
|
125
126
|
var _useState17 = useState(false),
|
126
127
|
_useState18 = _slicedToArray(_useState17, 2),
|
127
|
-
|
128
|
-
|
128
|
+
headerCellHoldActive = _useState18[0],
|
129
|
+
setHeaderCellHoldActive = _useState18[1];
|
130
|
+
|
131
|
+
var _useState19 = useState(false),
|
132
|
+
_useState20 = _slicedToArray(_useState19, 2),
|
133
|
+
activeCellInsideSelectionArea = _useState20[0],
|
134
|
+
setActiveCellInsideSelectionArea = _useState20[1];
|
129
135
|
|
130
136
|
var previousState = usePreviousValue({
|
131
137
|
activeCellCoordinates: activeCellCoordinates,
|
@@ -134,10 +140,10 @@ export var DataSpreadsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref)
|
|
134
140
|
var cellSizeValue = getCellSize(cellSize);
|
135
141
|
var cellEditorRef = useRef();
|
136
142
|
|
137
|
-
var
|
138
|
-
|
139
|
-
activeCellContent =
|
140
|
-
setActiveCellContent =
|
143
|
+
var _useState21 = useState(),
|
144
|
+
_useState22 = _slicedToArray(_useState21, 2),
|
145
|
+
activeCellContent = _useState22[0],
|
146
|
+
setActiveCellContent = _useState22[1];
|
141
147
|
|
142
148
|
var activeCellRef = useRef();
|
143
149
|
var cellEditorRulerRef = useRef();
|
@@ -165,13 +171,15 @@ export var DataSpreadsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref)
|
|
165
171
|
columns: columns,
|
166
172
|
data: data,
|
167
173
|
defaultColumn: defaultColumn
|
168
|
-
}, useBlockLayout),
|
174
|
+
}, useBlockLayout, useColumnOrder),
|
169
175
|
getTableProps = _useTable.getTableProps,
|
170
176
|
getTableBodyProps = _useTable.getTableBodyProps,
|
171
177
|
headerGroups = _useTable.headerGroups,
|
172
178
|
rows = _useTable.rows,
|
173
179
|
totalColumnsWidth = _useTable.totalColumnsWidth,
|
174
|
-
prepareRow = _useTable.prepareRow
|
180
|
+
prepareRow = _useTable.prepareRow,
|
181
|
+
setColumnOrder = _useTable.setColumnOrder,
|
182
|
+
visibleColumns = _useTable.visibleColumns; // Update the spreadsheet data after editing a cell
|
175
183
|
|
176
184
|
|
177
185
|
var updateData = useCallback(function (rowIndex, columnId) {
|
@@ -574,10 +582,12 @@ export var DataSpreadsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref)
|
|
574
582
|
|
575
583
|
var startEditMode = function startEditMode() {
|
576
584
|
setIsEditing(true);
|
585
|
+
setClickAndHoldActive(false);
|
577
586
|
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;
|
578
|
-
var activeCellValue = activeCellFullData ?
|
587
|
+
var activeCellValue = activeCellFullData ? activeCellFullData.row.cells[activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column].value : null;
|
579
588
|
setCellEditorValue(activeCellValue);
|
580
589
|
cellEditorRulerRef.current.textContent = activeCellValue;
|
590
|
+
cellEditorRef.current.style.width = activeCellRef === null || activeCellRef === void 0 ? void 0 : activeCellRef.current.style.width;
|
581
591
|
}; // Sets the initial placement of the cell editor cursor at the end of the text area
|
582
592
|
// this is not done for us by default in Safari
|
583
593
|
|
@@ -698,7 +708,7 @@ export var DataSpreadsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref)
|
|
698
708
|
activeCellRef: activeCellRef,
|
699
709
|
cellEditorRef: cellEditorRef,
|
700
710
|
cellEditorRulerRef: cellEditorRulerRef,
|
701
|
-
|
711
|
+
visibleColumns: visibleColumns,
|
702
712
|
defaultColumn: defaultColumn,
|
703
713
|
cellEditorValue: cellEditorValue
|
704
714
|
});
|
@@ -767,7 +777,10 @@ export var DataSpreadsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref)
|
|
767
777
|
setSelectionAreas: setSelectionAreas,
|
768
778
|
setCurrentMatcher: setCurrentMatcher,
|
769
779
|
setSelectionAreaData: setSelectionAreaData,
|
770
|
-
|
780
|
+
totalVisibleColumns: totalVisibleColumns,
|
781
|
+
updateActiveCellCoordinates: updateActiveCellCoordinates,
|
782
|
+
setHeaderCellHoldActive: setHeaderCellHoldActive,
|
783
|
+
headerCellHoldActive: headerCellHoldActive
|
771
784
|
}), /*#__PURE__*/React.createElement(DataSpreadsheetBody, {
|
772
785
|
activeCellCoordinates: activeCellCoordinates,
|
773
786
|
ref: spreadsheetRef,
|
@@ -795,7 +808,11 @@ export var DataSpreadsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref)
|
|
795
808
|
id: id,
|
796
809
|
columns: columns,
|
797
810
|
defaultEmptyRowCount: defaultEmptyRowCount,
|
798
|
-
setActiveCellInsideSelectionArea: setActiveCellInsideSelectionArea
|
811
|
+
setActiveCellInsideSelectionArea: setActiveCellInsideSelectionArea,
|
812
|
+
totalVisibleColumns: totalVisibleColumns,
|
813
|
+
setHeaderCellHoldActive: setHeaderCellHoldActive,
|
814
|
+
setColumnOrder: setColumnOrder,
|
815
|
+
visibleColumns: visibleColumns
|
799
816
|
}), /*#__PURE__*/React.createElement("button", {
|
800
817
|
onMouseDown: handleActiveCellMouseDown,
|
801
818
|
onClick: handleActiveCellClick,
|
@@ -891,7 +908,13 @@ DataSpreadsheet.propTypes = {
|
|
891
908
|
/**
|
892
909
|
* The event handler that is called when the selection area values change
|
893
910
|
*/
|
894
|
-
onSelectionAreaChange: PropTypes.func
|
911
|
+
onSelectionAreaChange: PropTypes.func,
|
912
|
+
|
913
|
+
/**
|
914
|
+
* The total number of columns to be initially visible, additional columns will be rendered and
|
915
|
+
* visible via horizontal scrollbar
|
916
|
+
*/
|
917
|
+
totalVisibleColumns: PropTypes.number
|
895
918
|
/* TODO: add types and DocGen for all props. */
|
896
919
|
|
897
920
|
};
|