@carbon/ibm-products 1.18.2 → 1.20.0
Sign up to get free protection for your applications and to get access to all the features.
- package/css/components/Datagrid/styles/datagrid.css +20 -1
- package/css/components/Datagrid/styles/datagrid.css.map +1 -1
- package/css/components/Datagrid/styles/draggableElement.css +57 -0
- package/css/components/Datagrid/styles/draggableElement.css.map +1 -0
- package/css/components/Datagrid/styles/index.css +100 -1
- package/css/components/Datagrid/styles/index.css.map +1 -1
- package/css/index-full-carbon.css +114 -2
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +3 -3
- package/css/index-full-carbon.min.css.map +1 -1
- package/css/index-without-carbon-released-only.css +241 -0
- package/css/index-without-carbon-released-only.css.map +1 -1
- package/css/index-without-carbon-released-only.min.css +7 -1
- package/css/index-without-carbon-released-only.min.css.map +1 -1
- package/css/index-without-carbon.css +114 -2
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +3 -3
- package/css/index-without-carbon.min.css.map +1 -1
- package/css/index.css +114 -2
- package/css/index.css.map +1 -1
- package/css/index.min.css +3 -3
- package/css/index.min.css.map +1 -1
- package/es/components/ActionSet/ActionSet.js +1 -0
- package/es/components/AddSelect/AddSelect.js +34 -3
- package/es/components/AddSelect/AddSelectFilter.js +9 -3
- package/es/components/AddSelect/AddSelectList.js +33 -9
- package/es/components/AddSelect/AddSelectSidebar.js +19 -11
- package/es/components/ComboButton/ComboButton.js +3 -5
- package/es/components/CreateSidePanel/CreateSidePanel.js +4 -10
- package/es/components/DataSpreadsheet/DataSpreadsheet.js +3 -1
- package/es/components/DataSpreadsheet/DataSpreadsheetBody.js +4 -3
- package/es/components/DataSpreadsheet/DataSpreadsheetHeader.js +25 -9
- package/es/components/DataSpreadsheet/hooks/useSpreadsheetMouseMove.js +1 -3
- package/es/components/DataSpreadsheet/hooks/useSpreadsheetMouseUp.js +63 -34
- package/es/components/DataSpreadsheet/utils/checkSelectedHeaderCell.js +17 -3
- package/es/components/DataSpreadsheet/utils/handleHeaderCellSelection.js +113 -19
- package/es/components/Datagrid/Datagrid/DraggableElement.js +9 -19
- package/es/components/EditSidePanel/EditSidePanel.js +3 -9
- package/es/components/SidePanel/SidePanel.js +2 -2
- package/es/global/js/hooks/useWindowResize.js +2 -1
- package/es/global/js/hooks/useWindowScroll.js +2 -1
- package/es/global/js/package-settings.js +1 -1
- package/es/global/js/utils/scrollableAncestor.js +2 -1
- package/lib/components/ActionSet/ActionSet.js +1 -0
- package/lib/components/AddSelect/AddSelect.js +34 -3
- package/lib/components/AddSelect/AddSelectFilter.js +10 -3
- package/lib/components/AddSelect/AddSelectList.js +32 -9
- package/lib/components/AddSelect/AddSelectSidebar.js +19 -11
- package/lib/components/ComboButton/ComboButton.js +5 -8
- package/lib/components/CreateSidePanel/CreateSidePanel.js +3 -10
- package/lib/components/DataSpreadsheet/DataSpreadsheet.js +3 -1
- package/lib/components/DataSpreadsheet/DataSpreadsheetBody.js +4 -3
- package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.js +25 -9
- package/lib/components/DataSpreadsheet/hooks/useSpreadsheetMouseMove.js +1 -4
- package/lib/components/DataSpreadsheet/hooks/useSpreadsheetMouseUp.js +64 -34
- package/lib/components/DataSpreadsheet/utils/checkSelectedHeaderCell.js +17 -3
- package/lib/components/DataSpreadsheet/utils/handleHeaderCellSelection.js +112 -19
- package/lib/components/Datagrid/Datagrid/DraggableElement.js +11 -19
- package/lib/components/EditSidePanel/EditSidePanel.js +3 -10
- package/lib/components/SidePanel/SidePanel.js +2 -2
- package/lib/global/js/hooks/useWindowResize.js +3 -1
- package/lib/global/js/hooks/useWindowScroll.js +5 -1
- package/lib/global/js/package-settings.js +1 -1
- package/lib/global/js/utils/scrollableAncestor.js +6 -1
- package/package.json +4 -4
- package/scss/components/AddSelect/_add-select.scss +6 -0
- package/scss/components/ComboButton/_combo-button.scss +2 -1
- package/scss/components/DataSpreadsheet/_data-spreadsheet.scss +1 -0
- package/scss/components/Datagrid/_datagrid.scss +1 -10
- package/scss/components/Datagrid/styles/datagrid.scss +17 -1
- package/scss/components/Datagrid/styles/draggableElement.scss +58 -0
- package/scss/components/Datagrid/styles/index.scss +2 -1
- package/scss/components/_index-released-only.scss +1 -0
@@ -15,19 +15,24 @@ import { UserProfileImage } from '../UserProfileImage';
|
|
15
15
|
import { pkg } from '../../settings';
|
16
16
|
var componentName = 'AddSelectList';
|
17
17
|
export var AddSelectList = function AddSelectList(_ref) {
|
18
|
-
var
|
18
|
+
var _modifiers$options;
|
19
|
+
|
20
|
+
var appliedModifiers = _ref.appliedModifiers,
|
21
|
+
filteredItems = _ref.filteredItems,
|
19
22
|
metaIconDescription = _ref.metaIconDescription,
|
20
23
|
modifiers = _ref.modifiers,
|
21
24
|
multi = _ref.multi,
|
22
25
|
multiSelection = _ref.multiSelection,
|
23
26
|
navIconDescription = _ref.navIconDescription,
|
24
27
|
path = _ref.path,
|
28
|
+
setAppliedModifiers = _ref.setAppliedModifiers,
|
25
29
|
setDisplayMetaPanel = _ref.setDisplayMetaPanel,
|
26
30
|
setMultiSelection = _ref.setMultiSelection,
|
27
31
|
setPath = _ref.setPath,
|
28
32
|
setSingleSelection = _ref.setSingleSelection,
|
29
33
|
singleSelection = _ref.singleSelection;
|
30
34
|
var blockClass = "".concat(pkg.prefix, "--add-select__selections");
|
35
|
+
var hasModifiers = (modifiers === null || modifiers === void 0 ? void 0 : (_modifiers$options = modifiers.options) === null || _modifiers$options === void 0 ? void 0 : _modifiers$options.length) > 0;
|
31
36
|
|
32
37
|
var handleSingleSelection = function handleSingleSelection(value) {
|
33
38
|
setSingleSelection(value);
|
@@ -130,14 +135,24 @@ export var AddSelectList = function AddSelectList(_ref) {
|
|
130
135
|
return /*#__PURE__*/React.createElement(Icon, null);
|
131
136
|
};
|
132
137
|
|
138
|
+
var modifierHandler = function modifierHandler(id, selectedItem) {
|
139
|
+
var modifiersClone = _toConsumableArray(appliedModifiers);
|
140
|
+
|
141
|
+
var modifierIdx = modifiersClone.findIndex(function (item) {
|
142
|
+
return item.id === id;
|
143
|
+
});
|
144
|
+
modifiersClone[modifierIdx] = _defineProperty({
|
145
|
+
id: id
|
146
|
+
}, modifiers.id, selectedItem);
|
147
|
+
setAppliedModifiers(modifiersClone);
|
148
|
+
};
|
149
|
+
|
133
150
|
return /*#__PURE__*/React.createElement("div", {
|
134
151
|
className: "".concat(blockClass, "-wrapper")
|
135
152
|
}, /*#__PURE__*/React.createElement(StructuredListWrapper, {
|
136
153
|
selection: true,
|
137
154
|
className: "".concat(blockClass)
|
138
155
|
}, /*#__PURE__*/React.createElement(StructuredListBody, null, filteredItems.map(function (item) {
|
139
|
-
var _modifiers$options;
|
140
|
-
|
141
156
|
return /*#__PURE__*/React.createElement(StructuredListRow, {
|
142
157
|
key: item.id,
|
143
158
|
className: cx("".concat(blockClass, "-row"), _defineProperty({}, "".concat(blockClass, "-row-selected"), isSelected(item.id)))
|
@@ -165,22 +180,29 @@ export var AddSelectList = function AddSelectList(_ref) {
|
|
165
180
|
className: "".concat(blockClass, "-cell-title")
|
166
181
|
}, item.title), item.subtitle && /*#__PURE__*/React.createElement("span", {
|
167
182
|
className: "".concat(blockClass, "-cell-subtitle")
|
168
|
-
}, item.subtitle)))),
|
183
|
+
}, item.subtitle)))), hasModifiers && /*#__PURE__*/React.createElement(Dropdown, {
|
169
184
|
id: "".concat(item.id, "-modifier"),
|
170
185
|
type: "inline",
|
171
|
-
items: modifiers
|
186
|
+
items: modifiers.options,
|
172
187
|
light: true,
|
173
|
-
label: modifiers
|
188
|
+
label: modifiers.label,
|
174
189
|
disabled: !isSelected(item.id),
|
175
|
-
className: "".concat(blockClass, "-dropdown ").concat(blockClass, "-hidden-hover")
|
190
|
+
className: "".concat(blockClass, "-dropdown ").concat(blockClass, "-hidden-hover"),
|
191
|
+
initialSelectedItem: item[modifiers.id],
|
192
|
+
onChange: function onChange(_ref5) {
|
193
|
+
var selectedItem = _ref5.selectedItem;
|
194
|
+
return modifierHandler(item.id, selectedItem);
|
195
|
+
}
|
176
196
|
})) : /*#__PURE__*/React.createElement(RadioButton, {
|
177
197
|
className: "".concat(blockClass, "-radio"),
|
178
198
|
name: "add-select-selections",
|
179
199
|
id: item.id,
|
180
200
|
value: item.value,
|
181
201
|
labelText: item.title,
|
182
|
-
onChange:
|
183
|
-
|
202
|
+
onChange: function onChange() {
|
203
|
+
return handleSingleSelection(item.id);
|
204
|
+
},
|
205
|
+
selected: item.id === singleSelection
|
184
206
|
}), item.children && /*#__PURE__*/React.createElement(Button, {
|
185
207
|
renderIcon: ChevronRight16,
|
186
208
|
iconDescription: navIconDescription,
|
@@ -209,6 +231,7 @@ export var AddSelectList = function AddSelectList(_ref) {
|
|
209
231
|
}))));
|
210
232
|
};
|
211
233
|
AddSelectList.propTypes = {
|
234
|
+
appliedModifiers: PropTypes.array,
|
212
235
|
filteredItems: PropTypes.array,
|
213
236
|
metaIconDescription: PropTypes.string,
|
214
237
|
modifiers: PropTypes.object,
|
@@ -216,6 +239,7 @@ AddSelectList.propTypes = {
|
|
216
239
|
multiSelection: PropTypes.array,
|
217
240
|
navIconDescription: PropTypes.string,
|
218
241
|
path: PropTypes.array,
|
242
|
+
setAppliedModifiers: PropTypes.func,
|
219
243
|
setDisplayMetaPanel: PropTypes.func,
|
220
244
|
setMultiSelection: PropTypes.func,
|
221
245
|
setPath: PropTypes.func,
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
2
|
-
var _excluded = ["icon", "avatar"];
|
2
|
+
var _excluded = ["meta", "icon", "avatar"];
|
3
3
|
//
|
4
4
|
// Copyright IBM Corp. 2022
|
5
5
|
//
|
@@ -15,11 +15,15 @@ import { pkg } from '../../settings';
|
|
15
15
|
import { AddSelectMetaPanel } from './AddSelectMetaPanel';
|
16
16
|
var componentName = 'AddSelectSidebar';
|
17
17
|
export var AddSelectSidebar = function AddSelectSidebar(_ref) {
|
18
|
-
var
|
18
|
+
var _modifiers$options;
|
19
|
+
|
20
|
+
var appliedModifiers = _ref.appliedModifiers,
|
21
|
+
closeIconDescription = _ref.closeIconDescription,
|
19
22
|
displayMetalPanel = _ref.displayMetalPanel,
|
20
23
|
influencerTitle = _ref.influencerTitle,
|
21
24
|
items = _ref.items,
|
22
25
|
metaPanelTitle = _ref.metaPanelTitle,
|
26
|
+
modifiers = _ref.modifiers,
|
23
27
|
multiSelection = _ref.multiSelection,
|
24
28
|
noSelectionDescription = _ref.noSelectionDescription,
|
25
29
|
noSelectionTitle = _ref.noSelectionTitle,
|
@@ -27,6 +31,8 @@ export var AddSelectSidebar = function AddSelectSidebar(_ref) {
|
|
27
31
|
setDisplayMetaPanel = _ref.setDisplayMetaPanel,
|
28
32
|
setMultiSelection = _ref.setMultiSelection;
|
29
33
|
var blockClass = "".concat(pkg.prefix, "--add-select__sidebar");
|
34
|
+
var hasModifiers = (modifiers === null || modifiers === void 0 ? void 0 : (_modifiers$options = modifiers.options) === null || _modifiers$options === void 0 ? void 0 : _modifiers$options.length) > 0;
|
35
|
+
var hasSelections = multiSelection.length > 0;
|
30
36
|
|
31
37
|
var handleItemRemove = function handleItemRemove(id) {
|
32
38
|
var newSelections = multiSelection.filter(function (v) {
|
@@ -41,7 +47,8 @@ export var AddSelectSidebar = function AddSelectSidebar(_ref) {
|
|
41
47
|
}); // certain properties should not be displayed in the sidebar
|
42
48
|
// eslint-disable-next-line no-unused-vars
|
43
49
|
|
44
|
-
var
|
50
|
+
var meta = selectedItem.meta,
|
51
|
+
icon = selectedItem.icon,
|
45
52
|
avatar = selectedItem.avatar,
|
46
53
|
newItem = _objectWithoutProperties(selectedItem, _excluded);
|
47
54
|
|
@@ -49,24 +56,23 @@ export var AddSelectSidebar = function AddSelectSidebar(_ref) {
|
|
49
56
|
return acc;
|
50
57
|
}, []);
|
51
58
|
|
52
|
-
var getTitle = function getTitle(
|
53
|
-
var title = _ref2.title,
|
54
|
-
subtitle = _ref2.subtitle,
|
55
|
-
id = _ref2.id;
|
59
|
+
var getTitle = function getTitle(item) {
|
56
60
|
return /*#__PURE__*/React.createElement("div", {
|
57
61
|
className: "".concat(blockClass, "-accordion-title")
|
58
62
|
}, /*#__PURE__*/React.createElement("div", {
|
59
63
|
className: "".concat(blockClass, "-selected-item")
|
60
64
|
}, /*#__PURE__*/React.createElement("p", {
|
61
65
|
className: "".concat(blockClass, "-selected-item-title")
|
62
|
-
}, title), /*#__PURE__*/React.createElement("p", {
|
66
|
+
}, item.title), /*#__PURE__*/React.createElement("p", {
|
63
67
|
className: "".concat(blockClass, "-selected-item-subtitle")
|
64
|
-
}, subtitle)), /*#__PURE__*/React.createElement(
|
68
|
+
}, item.subtitle)), hasModifiers && /*#__PURE__*/React.createElement("div", null, appliedModifiers.find(function (modifier) {
|
69
|
+
return modifier.id === item.id;
|
70
|
+
})[modifiers.id]), /*#__PURE__*/React.createElement(Button, {
|
65
71
|
renderIcon: SubtractAlt32,
|
66
72
|
iconDescription: removeIconDescription,
|
67
73
|
hasIconOnly: true,
|
68
74
|
onClick: function onClick() {
|
69
|
-
return handleItemRemove(id);
|
75
|
+
return handleItemRemove(item.id);
|
70
76
|
},
|
71
77
|
kind: "ghost",
|
72
78
|
className: "".concat(blockClass, "-item-remove-button"),
|
@@ -92,7 +98,7 @@ export var AddSelectSidebar = function AddSelectSidebar(_ref) {
|
|
92
98
|
}, influencerTitle), /*#__PURE__*/React.createElement(Tag, {
|
93
99
|
type: "gray",
|
94
100
|
size: "sm"
|
95
|
-
}, multiSelection.length)),
|
101
|
+
}, multiSelection.length)), hasSelections ? /*#__PURE__*/React.createElement(Accordion, {
|
96
102
|
align: "start"
|
97
103
|
}, sidebarItems.map(function (item) {
|
98
104
|
return /*#__PURE__*/React.createElement(AccordionItem, {
|
@@ -117,11 +123,13 @@ export var AddSelectSidebar = function AddSelectSidebar(_ref) {
|
|
117
123
|
})));
|
118
124
|
};
|
119
125
|
AddSelectSidebar.propTypes = {
|
126
|
+
appliedModifiers: PropTypes.array,
|
120
127
|
closeIconDescription: PropTypes.string,
|
121
128
|
displayMetalPanel: PropTypes.object,
|
122
129
|
influencerTitle: PropTypes.string,
|
123
130
|
items: PropTypes.array,
|
124
131
|
metaPanelTitle: PropTypes.string,
|
132
|
+
modifiers: PropTypes.object,
|
125
133
|
multiSelection: PropTypes.array,
|
126
134
|
noSelectionDescription: PropTypes.string,
|
127
135
|
noSelectionTitle: PropTypes.string,
|
@@ -18,13 +18,11 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
|
|
18
18
|
* LICENSE file in the root directory of this source tree.
|
19
19
|
*/
|
20
20
|
import { ChevronDown16, ChevronUp16 } from '@carbon/icons-react';
|
21
|
-
import { Button, OverflowMenuItem } from 'carbon-components-react';
|
22
|
-
import { OverflowMenu } from 'carbon-components-react/lib/components/OverflowMenu/OverflowMenu';
|
23
|
-
import setupGetInstanceId from 'carbon-components-react/lib/tools/setupGetInstanceId';
|
21
|
+
import { Button, OverflowMenuItem, OverflowMenu } from 'carbon-components-react';
|
24
22
|
import classnames from 'classnames';
|
25
23
|
import { node, shape, string } from 'prop-types';
|
24
|
+
import uuidv4 from '../../global/js/utils/uuidv4';
|
26
25
|
import React, { Children, createElement, useRef, useState } from 'react';
|
27
|
-
var getInstanceId = setupGetInstanceId();
|
28
26
|
var blockClass = 'security--combo-button';
|
29
27
|
/**
|
30
28
|
* The combo button consolidates similar actions, while exposing the most commonly used one.
|
@@ -36,7 +34,7 @@ var ComboButton = function ComboButton(_ref) {
|
|
36
34
|
overflowMenu = _ref.overflowMenu,
|
37
35
|
rest = _objectWithoutProperties(_ref, _excluded);
|
38
36
|
|
39
|
-
var _useRef = useRef(
|
37
|
+
var _useRef = useRef(uuidv4()),
|
40
38
|
instanceId = _useRef.current;
|
41
39
|
|
42
40
|
var _useState = useState(false),
|
@@ -22,11 +22,9 @@ import { pkg } from '../../settings';
|
|
22
22
|
import { getDevtoolsProps } from '../../global/js/utils/devtools'; // Carbon and package components we use.
|
23
23
|
|
24
24
|
import { Form } from 'carbon-components-react';
|
25
|
-
import { SidePanel } from '../SidePanel';
|
26
|
-
import { ActionSet } from '../ActionSet'; // The block part of our conventional BEM class names (blockClass__E--M).
|
25
|
+
import { SidePanel } from '../SidePanel'; // The block part of our conventional BEM class names (blockClass__E--M).
|
27
26
|
|
28
27
|
var blockClass = "".concat(pkg.prefix, "--create-side-panel");
|
29
|
-
var sidePanelBlockClass = "".concat(pkg.prefix, "--side-panel");
|
30
28
|
var componentName = 'CreateSidePanel'; // NOTE: the component SCSS is not imported here: it is rolled up separately.
|
31
29
|
|
32
30
|
/**
|
@@ -64,7 +62,6 @@ export var CreateSidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref)
|
|
64
62
|
onClick: onRequestClose,
|
65
63
|
kind: 'secondary'
|
66
64
|
}];
|
67
|
-
var actionContainerClassNames = cx(["".concat(blockClass, "__actions-container"), "".concat(sidePanelBlockClass, "__actions-container")]);
|
68
65
|
return selectorPageContent && /*#__PURE__*/React.createElement(SidePanel, _extends({}, rest, _objectSpread({
|
69
66
|
open: open,
|
70
67
|
ref: ref,
|
@@ -78,18 +75,15 @@ export var CreateSidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref)
|
|
78
75
|
slideIn: true,
|
79
76
|
animateTitle: false,
|
80
77
|
className: cx(blockClass, className),
|
81
|
-
size: "md"
|
78
|
+
size: "md",
|
79
|
+
actions: actions
|
82
80
|
}), /*#__PURE__*/React.createElement("h3", {
|
83
81
|
className: "".concat(blockClass, "__form-title-text ").concat(blockClass, "__content-text")
|
84
82
|
}, formTitle), /*#__PURE__*/React.createElement("p", {
|
85
83
|
className: "".concat(blockClass, "__form-description-text ").concat(blockClass, "__content-text")
|
86
84
|
}, formDescription), /*#__PURE__*/React.createElement(Form, {
|
87
85
|
className: "".concat(blockClass, "__form")
|
88
|
-
}, children
|
89
|
-
actions: actions,
|
90
|
-
className: actionContainerClassNames,
|
91
|
-
size: "md"
|
92
|
-
})));
|
86
|
+
}, children));
|
93
87
|
});
|
94
88
|
CreateSidePanel = pkg.checkComponentEnabled(CreateSidePanel, componentName);
|
95
89
|
CreateSidePanel.displayName = componentName;
|
@@ -667,7 +667,8 @@ export var DataSpreadsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref)
|
|
667
667
|
spreadsheetRef: spreadsheetRef,
|
668
668
|
isKeyboard: isKeyboard,
|
669
669
|
setSelectionAreaData: setSelectionAreaData,
|
670
|
-
index: index
|
670
|
+
index: index,
|
671
|
+
currentMatcher: currentMatcher
|
671
672
|
}; // Select an entire column
|
672
673
|
|
673
674
|
if ((activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === 'header' && (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) !== 'header') {
|
@@ -768,6 +769,7 @@ export var DataSpreadsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref)
|
|
768
769
|
activeCellCoordinates: activeCellCoordinates,
|
769
770
|
cellSize: cellSize,
|
770
771
|
columns: columns,
|
772
|
+
currentMatcher: currentMatcher,
|
771
773
|
defaultColumn: defaultColumn,
|
772
774
|
headerGroups: headerGroups,
|
773
775
|
rows: rows,
|
@@ -169,7 +169,8 @@ export var DataSpreadsheetBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
169
169
|
setActiveCellCoordinates: setActiveCellCoordinates,
|
170
170
|
rows: rows,
|
171
171
|
activeCellCoordinates: activeCellCoordinates,
|
172
|
-
defaultColumn: defaultColumn
|
172
|
+
defaultColumn: defaultColumn,
|
173
|
+
selectionAreas: selectionAreas
|
173
174
|
}); // Make sure that if the cellSize prop changes, the active
|
174
175
|
// cell also gets updated with the new size and new top placement
|
175
176
|
// value. All of the cell selections will be updated as well
|
@@ -395,7 +396,7 @@ export var DataSpreadsheetBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
395
396
|
"data-column-index": "header",
|
396
397
|
type: "button",
|
397
398
|
onClick: handleRowHeaderClick(index),
|
398
|
-
className: cx("".concat(blockClass, "__td"), "".concat(blockClass, "__td-th"), "".concat(blockClass, "--interactive-cell-element"), (_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__td-th--active-header"), (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === index || checkActiveHeaderCell(index, selectionAreas, 'row')), _defineProperty(_cx, "".concat(blockClass, "__td-th--selected-header"), checkSelectedHeaderCell(index, selectionAreas, 'row')), _cx)),
|
399
|
+
className: cx("".concat(blockClass, "__td"), "".concat(blockClass, "__td-th"), "".concat(blockClass, "--interactive-cell-element"), (_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__td-th--active-header"), (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === index || checkActiveHeaderCell(index, selectionAreas, 'row')), _defineProperty(_cx, "".concat(blockClass, "__td-th--selected-header"), checkSelectedHeaderCell(index, selectionAreas, 'row', columns)), _cx)),
|
399
400
|
style: {
|
400
401
|
width: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeaderWidth
|
401
402
|
}
|
@@ -424,7 +425,7 @@ export var DataSpreadsheetBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
424
425
|
}, cell.render('Cell')));
|
425
426
|
}));
|
426
427
|
}
|
427
|
-
}, [prepareRow, rows, activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row, selectionAreas, handleRowHeaderClick, handleBodyCellClick, handleBodyCellHover, defaultColumn]);
|
428
|
+
}, [prepareRow, rows, activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row, selectionAreas, handleRowHeaderClick, handleBodyCellClick, handleBodyCellHover, defaultColumn, columns]);
|
428
429
|
var spreadsheetBodyRef = useRef();
|
429
430
|
return /*#__PURE__*/React.createElement("div", _extends({
|
430
431
|
ref: spreadsheetBodyRef,
|
@@ -29,6 +29,7 @@ export var DataSpreadsheetHeader = /*#__PURE__*/forwardRef(function (_ref, ref)
|
|
29
29
|
var activeCellCoordinates = _ref.activeCellCoordinates,
|
30
30
|
cellSize = _ref.cellSize,
|
31
31
|
columns = _ref.columns,
|
32
|
+
currentMatcher = _ref.currentMatcher,
|
32
33
|
defaultColumn = _ref.defaultColumn,
|
33
34
|
headerGroups = _ref.headerGroups,
|
34
35
|
scrollBarSize = _ref.scrollBarSize,
|
@@ -71,6 +72,7 @@ export var DataSpreadsheetHeader = /*#__PURE__*/forwardRef(function (_ref, ref)
|
|
71
72
|
var handleColumnHeaderClick = function handleColumnHeaderClick(index) {
|
72
73
|
return function (event) {
|
73
74
|
var isHoldingCommandKey = event.metaKey || event.ctrlKey;
|
75
|
+
var isHoldingShiftKey = event.shiftKey;
|
74
76
|
handleHeaderCellSelection({
|
75
77
|
type: 'column',
|
76
78
|
activeCellCoordinates: activeCellCoordinates,
|
@@ -82,7 +84,9 @@ export var DataSpreadsheetHeader = /*#__PURE__*/forwardRef(function (_ref, ref)
|
|
82
84
|
spreadsheetRef: ref,
|
83
85
|
index: index,
|
84
86
|
setSelectionAreaData: setSelectionAreaData,
|
85
|
-
isHoldingCommandKey: isHoldingCommandKey
|
87
|
+
isHoldingCommandKey: isHoldingCommandKey,
|
88
|
+
isHoldingShiftKey: isHoldingShiftKey,
|
89
|
+
currentMatcher: currentMatcher
|
86
90
|
});
|
87
91
|
};
|
88
92
|
};
|
@@ -103,23 +107,30 @@ export var DataSpreadsheetHeader = /*#__PURE__*/forwardRef(function (_ref, ref)
|
|
103
107
|
return function (event) {
|
104
108
|
var _selectionAreaToClone;
|
105
109
|
|
110
|
+
if (event.shiftKey) {
|
111
|
+
// Remove columns, need to call handleHeaderCellSelection
|
112
|
+
return;
|
113
|
+
}
|
114
|
+
|
106
115
|
setSelectedHeaderReorderActive(true);
|
116
|
+
var selectionAreaToClone = selectionAreas.filter(function (item) {
|
117
|
+
return (item === null || item === void 0 ? void 0 : item.matcher) === currentMatcher;
|
118
|
+
});
|
119
|
+
var selectionAreaElement = ref.current.querySelector("[data-matcher-id=\"".concat((_selectionAreaToClone = selectionAreaToClone[0]) === null || _selectionAreaToClone === void 0 ? void 0 : _selectionAreaToClone.matcher, "\"]"));
|
107
120
|
var clickXPosition = event.clientX;
|
108
121
|
var headerButtonCoords = event.target.getBoundingClientRect();
|
122
|
+
var headerIndex = event.target.getAttribute('data-column-index');
|
109
123
|
var offsetXValue = clickXPosition - headerButtonCoords.left;
|
124
|
+
var lowestColumnIndexFromSelectionArea = Math.min(selectionAreaToClone[0].point1.column, selectionAreaToClone[0].point2.column);
|
125
|
+
var selectionAreaCoords = selectionAreaElement.getBoundingClientRect();
|
126
|
+
var updatedOffsetDifference = lowestColumnIndexFromSelectionArea < parseInt(headerIndex) ? offsetXValue + (headerButtonCoords.left - selectionAreaCoords.left) : offsetXValue;
|
110
127
|
var bodyContainer = document.querySelector(".".concat(blockClass, "__list--container")).firstElementChild;
|
111
|
-
var selectionAreaToClone = selectionAreas.filter(function (item) {
|
112
|
-
var _item$header;
|
113
|
-
|
114
|
-
return (item === null || item === void 0 ? void 0 : (_item$header = item.header) === null || _item$header === void 0 ? void 0 : _item$header.index) === index;
|
115
|
-
});
|
116
|
-
var selectionAreaElement = ref.current.querySelector("[data-matcher-id=\"".concat((_selectionAreaToClone = selectionAreaToClone[0]) === null || _selectionAreaToClone === void 0 ? void 0 : _selectionAreaToClone.matcher, "\"]"));
|
117
128
|
var selectionAreaClonedElement = selectionAreaElement.cloneNode();
|
118
129
|
var reorderIndicatorLine = selectionAreaElement.cloneNode();
|
119
130
|
reorderIndicatorLine.className = "".concat(blockClass, "__reorder-indicator-line");
|
120
131
|
reorderIndicatorLine.style.width = px(2);
|
121
132
|
selectionAreaClonedElement.classList.add("".concat(blockClass, "__selection-area--element-cloned"));
|
122
|
-
selectionAreaClonedElement.setAttribute('data-clone-offset-x',
|
133
|
+
selectionAreaClonedElement.setAttribute('data-clone-offset-x', updatedOffsetDifference);
|
123
134
|
selectionAreaClonedElement.setAttribute('data-column-index-original', index);
|
124
135
|
bodyContainer.appendChild(selectionAreaClonedElement);
|
125
136
|
bodyContainer.appendChild(reorderIndicatorLine);
|
@@ -169,7 +180,7 @@ export var DataSpreadsheetHeader = /*#__PURE__*/forwardRef(function (_ref, ref)
|
|
169
180
|
}, "\xA0")), headerGroup.headers.map(function (column, index) {
|
170
181
|
var _cx2;
|
171
182
|
|
172
|
-
var selectedHeader = checkSelectedHeaderCell(index, selectionAreas, 'column');
|
183
|
+
var selectedHeader = checkSelectedHeaderCell(index, selectionAreas, 'column', rows);
|
173
184
|
return /*#__PURE__*/React.createElement("div", _extends({
|
174
185
|
key: "column_".concat(index),
|
175
186
|
role: "columnheader",
|
@@ -213,6 +224,11 @@ DataSpreadsheetHeader.propTypes = {
|
|
213
224
|
*/
|
214
225
|
columns: PropTypes.array,
|
215
226
|
|
227
|
+
/**
|
228
|
+
* uuid that corresponds to the current selection area
|
229
|
+
*/
|
230
|
+
currentMatcher: PropTypes.string,
|
231
|
+
|
216
232
|
/**
|
217
233
|
* Default spreadsheet sizing values
|
218
234
|
*/
|
@@ -7,7 +7,6 @@
|
|
7
7
|
import { useEffect } from 'react';
|
8
8
|
import { px } from '@carbon/layout';
|
9
9
|
import { pkg } from '../../../settings';
|
10
|
-
import { getScrollbarWidth } from '../../../global/js/utils/getScrollbarWidth';
|
11
10
|
import { moveColumnIndicatorLine } from '../utils/moveColumnIndicatorLine'; // Used specifically for reordering columns, will move the position of the
|
12
11
|
// cloned selection area to follow the position of the cursor
|
13
12
|
|
@@ -34,7 +33,6 @@ export var useSpreadsheetMouseMove = function useSpreadsheetMouseMove(_ref) {
|
|
34
33
|
spreadsheetCoords: spreadsheetCoords,
|
35
34
|
leftScrollAmount: scrollAmount
|
36
35
|
});
|
37
|
-
var scrollbarWidth = getScrollbarWidth();
|
38
36
|
var spreadsheetWrapperElement = ref.current;
|
39
37
|
spreadsheetWrapperElement.getBoundingClientRect();
|
40
38
|
var xPositionRelativeToSpreadsheet = event.clientX - spreadsheetCoords.left;
|
@@ -44,7 +42,7 @@ export var useSpreadsheetMouseMove = function useSpreadsheetMouseMove(_ref) {
|
|
44
42
|
var clonePlacement = Math.max(xPositionRelativeToSpreadsheet - offsetXValue, defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeaderWidth); // Moves the position of the cloned selection area to follow mouse, and
|
45
43
|
// add the amount horizontally scrolled
|
46
44
|
|
47
|
-
clonedSelectionElement.style.left = px(totalSpreadsheetScrollingWidth - clonedSelectionWidth
|
45
|
+
clonedSelectionElement.style.left = px(totalSpreadsheetScrollingWidth - clonedSelectionWidth >= clonePlacement ? clonePlacement + scrollAmount : totalSpreadsheetScrollingWidth - clonedSelectionWidth);
|
48
46
|
};
|
49
47
|
|
50
48
|
if (headerCellHoldActive) {
|
@@ -30,7 +30,8 @@ export var useSpreadsheetMouseUp = function useSpreadsheetMouseUp(_ref) {
|
|
30
30
|
setActiveCellCoordinates = _ref.setActiveCellCoordinates,
|
31
31
|
activeCellCoordinates = _ref.activeCellCoordinates,
|
32
32
|
rows = _ref.rows,
|
33
|
-
defaultColumn = _ref.defaultColumn
|
33
|
+
defaultColumn = _ref.defaultColumn,
|
34
|
+
selectionAreas = _ref.selectionAreas;
|
34
35
|
useEffect(function () {
|
35
36
|
var handleMouseUp = function handleMouseUp(event) {
|
36
37
|
// Remove the cloned selection area on mouse up
|
@@ -45,8 +46,12 @@ export var useSpreadsheetMouseUp = function useSpreadsheetMouseUp(_ref) {
|
|
45
46
|
|
46
47
|
if (selectionAreaCloneElement) {
|
47
48
|
var closestCell = event.target.closest(".".concat(blockClass, "--interactive-cell-element"));
|
48
|
-
var newColumnIndex = closestCell === null || closestCell === void 0 ? void 0 : closestCell.getAttribute('data-column-index');
|
49
|
-
var originalColumnIndex = selectionAreaCloneElement === null || selectionAreaCloneElement === void 0 ? void 0 : selectionAreaCloneElement.getAttribute('data-column-index-original');
|
49
|
+
var newColumnIndex = parseInt === null || parseInt === void 0 ? void 0 : parseInt(closestCell === null || closestCell === void 0 ? void 0 : closestCell.getAttribute('data-column-index'));
|
50
|
+
var originalColumnIndex = parseInt === null || parseInt === void 0 ? void 0 : parseInt(selectionAreaCloneElement === null || selectionAreaCloneElement === void 0 ? void 0 : selectionAreaCloneElement.getAttribute('data-column-index-original'));
|
51
|
+
var selectionAreaToClone = selectionAreas.filter(function (item) {
|
52
|
+
return (item === null || item === void 0 ? void 0 : item.matcher) === currentMatcher;
|
53
|
+
});
|
54
|
+
var selectionAreaIndexArray = selectionAreaToClone[0].header.selectedIndexList;
|
50
55
|
var columnToMoveToElement = ref.current.querySelector("[data-row-index=\"header\"][data-column-index=\"".concat(newColumnIndex, "\"]")); // Mouse up element was not part of the spreadsheet component
|
51
56
|
|
52
57
|
if (!columnToMoveToElement) {
|
@@ -55,24 +60,11 @@ export var useSpreadsheetMouseUp = function useSpreadsheetMouseUp(_ref) {
|
|
55
60
|
|
56
61
|
var selectionAreaToMove = ref.current.querySelector("[data-matcher-id=\"".concat(currentMatcher, "\"]"));
|
57
62
|
var spreadsheetPosition = ref.current.getBoundingClientRect();
|
58
|
-
var newIndexPosition = columnToMoveToElement.getBoundingClientRect();
|
59
63
|
var listContainer = ref.current.querySelector(".".concat(blockClass, "__list--container"));
|
60
64
|
var leftScrollAmount = listContainer.scrollLeft;
|
61
|
-
var relativeNewPosition = newIndexPosition.left - spreadsheetPosition.left + leftScrollAmount;
|
62
|
-
var cloneColumnWidth = selectionAreaCloneElement.offsetWidth;
|
63
|
-
var columnsWidthUpToNewIndex = 0;
|
64
65
|
var newIndexLessThanStarting = newColumnIndex < originalColumnIndex;
|
65
|
-
|
66
|
-
|
67
|
-
return;
|
68
|
-
}
|
69
|
-
|
70
|
-
if (index <= newColumnIndex) {
|
71
|
-
columnsWidthUpToNewIndex += (item === null || item === void 0 ? void 0 : item.width) || (defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.width);
|
72
|
-
}
|
73
|
-
});
|
74
|
-
var updatedSelectionAreaPlacement = newIndexLessThanStarting ? relativeNewPosition : columnsWidthUpToNewIndex - cloneColumnWidth + (defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeaderWidth);
|
75
|
-
selectionAreaToMove.style.left = px(updatedSelectionAreaPlacement);
|
66
|
+
var newIndexGreater = newColumnIndex > originalColumnIndex;
|
67
|
+
var differenceBetweenOldNewIndex = newIndexGreater ? newColumnIndex - originalColumnIndex : originalColumnIndex - newColumnIndex;
|
76
68
|
setSelectionAreas(function (prev) {
|
77
69
|
var selectionAreaClone = deepCloneObject(prev);
|
78
70
|
|
@@ -88,28 +80,65 @@ export var useSpreadsheetMouseUp = function useSpreadsheetMouseUp(_ref) {
|
|
88
80
|
return prev;
|
89
81
|
}
|
90
82
|
|
91
|
-
|
92
|
-
|
93
|
-
|
83
|
+
if (!selectionAreaIndexArray.includes(newColumnIndex)) {
|
84
|
+
// We need to not add just the newColumnIndex, but an array of indexes
|
85
|
+
// if there are multiple columns
|
86
|
+
var newIndexArray = newIndexGreater ? selectionAreaIndexArray.map(function (num) {
|
87
|
+
return num + differenceBetweenOldNewIndex;
|
88
|
+
}) : selectionAreaIndexArray.map(function (num) {
|
89
|
+
return num - differenceBetweenOldNewIndex;
|
90
|
+
});
|
91
|
+
selectionAreaClone[indexOfItemToUpdate].header.selectedIndexList = newIndexArray;
|
92
|
+
selectionAreaClone[indexOfItemToUpdate].point1.column = Math.min.apply(Math, _toConsumableArray(newIndexArray));
|
93
|
+
selectionAreaClone[indexOfItemToUpdate].point2.column = Math.max.apply(Math, _toConsumableArray(newIndexArray));
|
94
|
+
}
|
95
|
+
|
94
96
|
return selectionAreaClone;
|
95
|
-
});
|
96
|
-
|
97
|
-
|
98
|
-
|
97
|
+
}); // Only reorder columns if the new index is _not_ part of the
|
98
|
+
// selectionAreaIndexArray, meaning the new placement is outside
|
99
|
+
// of the current selection area. Similarly, the active cell position
|
100
|
+
// should only be changed under the same condition.
|
101
|
+
|
102
|
+
if (!selectionAreaIndexArray.includes(newColumnIndex)) {
|
103
|
+
var deleteCount = selectionAreaIndexArray.length;
|
104
|
+
var startIndex = Math.min.apply(Math, _toConsumableArray(selectionAreaIndexArray));
|
105
|
+
var columnIdArray = visibleColumns.map(function (column) {
|
106
|
+
return column.id;
|
107
|
+
});
|
99
108
|
|
100
|
-
|
109
|
+
var columnIdArrayClone = _toConsumableArray(columnIdArray);
|
101
110
|
|
111
|
+
var getNewColumnOrder = function getNewColumnOrder() {
|
112
|
+
var newColumnList = [];
|
113
|
+
selectionAreaIndexArray.map(function (index) {
|
114
|
+
return newColumnList.push(columnIdArray[index]);
|
115
|
+
});
|
116
|
+
return newColumnList;
|
117
|
+
}; // Remove one element at the original index
|
102
118
|
|
103
|
-
columnIdArrayClone.splice(originalColumnIndex, 1); // Add one element at the new index
|
104
119
|
|
105
|
-
|
106
|
-
|
120
|
+
columnIdArrayClone.splice(startIndex, deleteCount);
|
121
|
+
var originalPointIndex = selectionAreaIndexArray.findIndex(function (item) {
|
122
|
+
return item === originalColumnIndex;
|
123
|
+
});
|
124
|
+
var updatedNewIndexWithNewOrder = newColumnIndex - originalPointIndex; // Add one element at the new index
|
107
125
|
|
108
|
-
|
109
|
-
|
110
|
-
|
126
|
+
columnIdArrayClone.splice.apply(columnIdArrayClone, [updatedNewIndexWithNewOrder, 0].concat(_toConsumableArray(getNewColumnOrder())));
|
127
|
+
setColumnOrder(columnIdArrayClone); // Function provided by useTable (react-table) hook to reorder columns
|
128
|
+
|
129
|
+
var newCellCoords = _objectSpread(_objectSpread({}, activeCellCoordinates), {}, {
|
130
|
+
column: newIndexGreater ? activeCellCoordinates.column + differenceBetweenOldNewIndex : activeCellCoordinates.column - differenceBetweenOldNewIndex
|
131
|
+
});
|
132
|
+
|
133
|
+
setActiveCellCoordinates(newCellCoords);
|
134
|
+
var firstSelectedHeader = Array.from(ref.current.querySelectorAll(".".concat(blockClass, "__th--selected-header")))[0];
|
135
|
+
var firstSelectedHeaderCoords = firstSelectedHeader.getBoundingClientRect();
|
136
|
+
var newRelativePosition = firstSelectedHeaderCoords.left - spreadsheetPosition.left + leftScrollAmount; // console.log(firstSelectedHeaderCoords.left - spreadsheetPosition.left + leftScrollAmount);
|
137
|
+
|
138
|
+
var updatedSelectionAreaPlacement = newIndexLessThanStarting ? newRelativePosition : newColumnIndex === originalColumnIndex ? selectionAreaToMove.style.left : newRelativePosition;
|
139
|
+
selectionAreaToMove.style.left = px(updatedSelectionAreaPlacement);
|
140
|
+
} // Remove the cloned column and indicator elements
|
111
141
|
|
112
|
-
setActiveCellCoordinates(newCellCoords); // Remove the cloned column and indicator elements
|
113
142
|
|
114
143
|
var indicatorLineElement = ref.current.querySelector(".".concat(blockClass, "__reorder-indicator-line"));
|
115
144
|
indicatorLineElement === null || indicatorLineElement === void 0 ? void 0 : indicatorLineElement.remove();
|
@@ -151,5 +180,5 @@ export var useSpreadsheetMouseUp = function useSpreadsheetMouseUp(_ref) {
|
|
151
180
|
return function () {
|
152
181
|
document.removeEventListener('mouseup', handleMouseUp);
|
153
182
|
};
|
154
|
-
}, [blockClass, currentMatcher, setSelectionAreas, setClickAndHoldActive, setValidStartingPoint, validStartingPoint, ref, setHeaderCellHoldActive, setColumnOrder, visibleColumns, setActiveCellCoordinates, activeCellCoordinates, rows, defaultColumn]);
|
183
|
+
}, [blockClass, currentMatcher, setSelectionAreas, setClickAndHoldActive, setValidStartingPoint, validStartingPoint, ref, setHeaderCellHoldActive, setColumnOrder, visibleColumns, setActiveCellCoordinates, activeCellCoordinates, rows, defaultColumn, selectionAreas]);
|
155
184
|
};
|
@@ -5,12 +5,26 @@
|
|
5
5
|
* LICENSE file in the root directory of this source tree.
|
6
6
|
*/
|
7
7
|
import { deepCloneObject } from '../../../global/js/utils/deepCloneObject';
|
8
|
-
export var checkSelectedHeaderCell = function checkSelectedHeaderCell(headerIndex, selectionAreas, headerType) {
|
8
|
+
export var checkSelectedHeaderCell = function checkSelectedHeaderCell(headerIndex, selectionAreas, headerType, items) {
|
9
9
|
var areasCloned = deepCloneObject(selectionAreas);
|
10
10
|
var isSelectedHeader = areasCloned.some(function (area) {
|
11
|
-
var _area$
|
11
|
+
var _area$point, _area$point2, _area$point3, _area$point4, _area$point5, _area$point6, _area$point7, _area$point8;
|
12
12
|
|
13
|
-
|
13
|
+
var oppositeType = headerType === 'column' ? 'row' : 'column';
|
14
|
+
var minOppositeSelection = Math.min(area === null || area === void 0 ? void 0 : (_area$point = area.point1) === null || _area$point === void 0 ? void 0 : _area$point[oppositeType], area === null || area === void 0 ? void 0 : (_area$point2 = area.point2) === null || _area$point2 === void 0 ? void 0 : _area$point2[oppositeType]);
|
15
|
+
var maxOppositeSelection = Math.max(area === null || area === void 0 ? void 0 : (_area$point3 = area.point1) === null || _area$point3 === void 0 ? void 0 : _area$point3[oppositeType], area === null || area === void 0 ? void 0 : (_area$point4 = area.point2) === null || _area$point4 === void 0 ? void 0 : _area$point4[oppositeType]);
|
16
|
+
var minSelection = Math.min(area === null || area === void 0 ? void 0 : (_area$point5 = area.point1) === null || _area$point5 === void 0 ? void 0 : _area$point5[headerType], area === null || area === void 0 ? void 0 : (_area$point6 = area.point2) === null || _area$point6 === void 0 ? void 0 : _area$point6[headerType]);
|
17
|
+
var maxSelection = Math.max(area === null || area === void 0 ? void 0 : (_area$point7 = area.point1) === null || _area$point7 === void 0 ? void 0 : _area$point7[headerType], area === null || area === void 0 ? void 0 : (_area$point8 = area.point2) === null || _area$point8 === void 0 ? void 0 : _area$point8[headerType]);
|
18
|
+
var isTrueSelectedState = (items === null || items === void 0 ? void 0 : items.length) - 1 === maxOppositeSelection && minOppositeSelection === 0; // console.log({minSelection, maxSelection});
|
19
|
+
// Iterate over all columns included in the selection area
|
20
|
+
|
21
|
+
for (var i = minSelection; i <= maxSelection; i++) {
|
22
|
+
if (headerIndex === i && isTrueSelectedState) {
|
23
|
+
return true;
|
24
|
+
}
|
25
|
+
}
|
26
|
+
|
27
|
+
return false;
|
14
28
|
});
|
15
29
|
return isSelectedHeader;
|
16
30
|
};
|