@carbon/ibm-products 1.18.0 → 1.19.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 +24 -4
- package/css/components/Datagrid/styles/datagrid.css.map +1 -1
- package/css/components/Datagrid/styles/index.css +24 -4
- package/css/components/Datagrid/styles/index.css.map +1 -1
- package/css/index-full-carbon.css +78 -13
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +2 -2
- package/css/index-full-carbon.min.css.map +1 -1
- package/css/index-without-carbon.css +78 -13
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +2 -2
- package/css/index-without-carbon.min.css.map +1 -1
- package/css/index.css +78 -13
- package/css/index.css.map +1 -1
- package/css/index.min.css +2 -2
- package/css/index.min.css.map +1 -1
- package/es/components/ActionSet/ActionSet.js +1 -0
- package/es/components/AddSelect/AddSelect.js +28 -3
- package/es/components/AddSelect/AddSelectFilter.js +9 -3
- package/es/components/AddSelect/AddSelectList.js +32 -6
- package/es/components/AddSelect/AddSelectMetaPanel.js +54 -0
- package/es/components/AddSelect/AddSelectSidebar.js +22 -3
- package/es/components/DataSpreadsheet/DataSpreadsheet.js +7 -4
- package/es/components/DataSpreadsheet/DataSpreadsheetBody.js +43 -10
- package/es/components/DataSpreadsheet/DataSpreadsheetHeader.js +36 -13
- package/es/components/DataSpreadsheet/hooks/useSpreadsheetMouseMove.js +8 -6
- package/es/components/DataSpreadsheet/hooks/useSpreadsheetMouseUp.js +65 -34
- package/es/components/DataSpreadsheet/utils/checkSelectedHeaderCell.js +17 -3
- package/es/components/DataSpreadsheet/utils/getCellSize.js +10 -10
- package/es/components/DataSpreadsheet/utils/getSpreadsheetWidth.js +8 -2
- package/es/components/DataSpreadsheet/utils/handleHeaderCellSelection.js +113 -19
- package/es/components/DataSpreadsheet/utils/moveColumnIndicatorLine.js +4 -3
- package/es/components/Datagrid/Datagrid/Datagrid.js +1 -1
- package/es/components/Datagrid/Datagrid/DatagridEmptyBody.js +22 -3
- package/es/components/Datagrid/Datagrid/DraggableElement.js +0 -7
- package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js +3 -3
- package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js +1 -1
- package/es/components/ExportModal/ExportModal.js +1 -1
- package/es/global/js/hooks/useWindowResize.js +2 -1
- package/es/global/js/hooks/useWindowScroll.js +2 -1
- package/es/global/js/utils/scrollableAncestor.js +2 -1
- package/lib/components/ActionSet/ActionSet.js +1 -0
- package/lib/components/AddSelect/AddSelect.js +28 -3
- package/lib/components/AddSelect/AddSelectFilter.js +10 -3
- package/lib/components/AddSelect/AddSelectList.js +30 -4
- package/lib/components/AddSelect/AddSelectMetaPanel.js +77 -0
- package/lib/components/AddSelect/AddSelectSidebar.js +23 -3
- package/lib/components/DataSpreadsheet/DataSpreadsheet.js +7 -4
- package/lib/components/DataSpreadsheet/DataSpreadsheetBody.js +43 -10
- package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.js +36 -13
- package/lib/components/DataSpreadsheet/hooks/useSpreadsheetMouseMove.js +8 -7
- package/lib/components/DataSpreadsheet/hooks/useSpreadsheetMouseUp.js +66 -34
- package/lib/components/DataSpreadsheet/utils/checkSelectedHeaderCell.js +17 -3
- package/lib/components/DataSpreadsheet/utils/getCellSize.js +4 -4
- package/lib/components/DataSpreadsheet/utils/getSpreadsheetWidth.js +8 -2
- package/lib/components/DataSpreadsheet/utils/handleHeaderCellSelection.js +112 -19
- package/lib/components/DataSpreadsheet/utils/moveColumnIndicatorLine.js +4 -3
- package/lib/components/Datagrid/Datagrid/Datagrid.js +1 -1
- package/lib/components/Datagrid/Datagrid/DatagridEmptyBody.js +24 -3
- package/lib/components/Datagrid/Datagrid/DraggableElement.js +0 -7
- package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js +3 -3
- package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js +1 -1
- package/lib/components/ExportModal/ExportModal.js +1 -1
- package/lib/global/js/hooks/useWindowResize.js +3 -1
- package/lib/global/js/hooks/useWindowScroll.js +5 -1
- package/lib/global/js/utils/scrollableAncestor.js +6 -1
- package/package.json +7 -7
- package/scss/components/AddSelect/_add-select.scss +46 -6
- package/scss/components/DataSpreadsheet/_data-spreadsheet.scss +8 -1
- package/scss/components/Datagrid/_storybook-styles.scss +5 -0
- package/scss/components/Datagrid/styles/datagrid.scss +43 -5
@@ -7,8 +7,8 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
|
|
7
7
|
// LICENSE file in the root directory of this source tree.
|
8
8
|
//
|
9
9
|
import React from 'react';
|
10
|
-
import { Checkbox, RadioButton, StructuredListRow, StructuredListWrapper, StructuredListBody, StructuredListCell, Dropdown } from 'carbon-components-react';
|
11
|
-
import { ChevronRight16 } from '@carbon/icons-react';
|
10
|
+
import { Button, Checkbox, RadioButton, StructuredListRow, StructuredListWrapper, StructuredListBody, StructuredListCell, Dropdown } from 'carbon-components-react';
|
11
|
+
import { ChevronRight16, View16 } from '@carbon/icons-react';
|
12
12
|
import PropTypes from 'prop-types';
|
13
13
|
import cx from 'classnames';
|
14
14
|
import { UserProfileImage } from '../UserProfileImage';
|
@@ -16,10 +16,13 @@ import { pkg } from '../../settings';
|
|
16
16
|
var componentName = 'AddSelectList';
|
17
17
|
export var AddSelectList = function AddSelectList(_ref) {
|
18
18
|
var filteredItems = _ref.filteredItems,
|
19
|
+
metaIconDescription = _ref.metaIconDescription,
|
19
20
|
modifiers = _ref.modifiers,
|
20
21
|
multi = _ref.multi,
|
21
22
|
multiSelection = _ref.multiSelection,
|
23
|
+
navIconDescription = _ref.navIconDescription,
|
22
24
|
path = _ref.path,
|
25
|
+
setDisplayMetaPanel = _ref.setDisplayMetaPanel,
|
23
26
|
setMultiSelection = _ref.setMultiSelection,
|
24
27
|
setPath = _ref.setPath,
|
25
28
|
setSingleSelection = _ref.setSingleSelection,
|
@@ -169,7 +172,7 @@ export var AddSelectList = function AddSelectList(_ref) {
|
|
169
172
|
light: true,
|
170
173
|
label: modifiers === null || modifiers === void 0 ? void 0 : modifiers.label,
|
171
174
|
disabled: !isSelected(item.id),
|
172
|
-
className: "".concat(blockClass, "-dropdown")
|
175
|
+
className: "".concat(blockClass, "-dropdown ").concat(blockClass, "-hidden-hover")
|
173
176
|
})) : /*#__PURE__*/React.createElement(RadioButton, {
|
174
177
|
className: "".concat(blockClass, "-radio"),
|
175
178
|
name: "add-select-selections",
|
@@ -178,19 +181,42 @@ export var AddSelectList = function AddSelectList(_ref) {
|
|
178
181
|
labelText: item.title,
|
179
182
|
onChange: handleSingleSelection,
|
180
183
|
selected: item.value === singleSelection
|
181
|
-
}), item.children && /*#__PURE__*/React.createElement(
|
184
|
+
}), item.children && /*#__PURE__*/React.createElement(Button, {
|
185
|
+
renderIcon: ChevronRight16,
|
186
|
+
iconDescription: navIconDescription,
|
187
|
+
tooltipPosition: "left",
|
188
|
+
tooltipAlignment: "center",
|
189
|
+
hasIconOnly: true,
|
182
190
|
onClick: function onClick() {
|
183
191
|
return onNavigateItem(item);
|
184
|
-
}
|
185
|
-
|
192
|
+
},
|
193
|
+
kind: "ghost",
|
194
|
+
size: "sm"
|
195
|
+
}), item.meta && /*#__PURE__*/React.createElement("div", {
|
196
|
+
className: "".concat(blockClass, "-hidden-hover")
|
197
|
+
}, /*#__PURE__*/React.createElement(Button, {
|
198
|
+
renderIcon: View16,
|
199
|
+
iconDescription: metaIconDescription,
|
200
|
+
tooltipPosition: "left",
|
201
|
+
tooltipAlignment: "center",
|
202
|
+
hasIconOnly: true,
|
203
|
+
onClick: function onClick() {
|
204
|
+
return setDisplayMetaPanel(item);
|
205
|
+
},
|
206
|
+
kind: "ghost",
|
207
|
+
size: "sm"
|
208
|
+
})))));
|
186
209
|
}))));
|
187
210
|
};
|
188
211
|
AddSelectList.propTypes = {
|
189
212
|
filteredItems: PropTypes.array,
|
213
|
+
metaIconDescription: PropTypes.string,
|
190
214
|
modifiers: PropTypes.object,
|
191
215
|
multi: PropTypes.bool,
|
192
216
|
multiSelection: PropTypes.array,
|
217
|
+
navIconDescription: PropTypes.string,
|
193
218
|
path: PropTypes.array,
|
219
|
+
setDisplayMetaPanel: PropTypes.func,
|
194
220
|
setMultiSelection: PropTypes.func,
|
195
221
|
setPath: PropTypes.func,
|
196
222
|
setSingleSelection: PropTypes.func,
|
@@ -0,0 +1,54 @@
|
|
1
|
+
import React, { isValidElement } from 'react';
|
2
|
+
import PropTypes from 'prop-types';
|
3
|
+
import { Close16 } from '@carbon/icons-react';
|
4
|
+
import { Button } from 'carbon-components-react';
|
5
|
+
import { pkg } from '../../settings';
|
6
|
+
var componentName = 'AddSelectMetaPanel';
|
7
|
+
export var AddSelectMetaPanel = function AddSelectMetaPanel(_ref) {
|
8
|
+
var closeIconDescription = _ref.closeIconDescription,
|
9
|
+
meta = _ref.meta,
|
10
|
+
setDisplayMetaPanel = _ref.setDisplayMetaPanel,
|
11
|
+
title = _ref.title;
|
12
|
+
var blockClass = "".concat(pkg.prefix, "--add-select__meta-panel");
|
13
|
+
|
14
|
+
var onCloseHandler = function onCloseHandler() {
|
15
|
+
setDisplayMetaPanel({});
|
16
|
+
};
|
17
|
+
|
18
|
+
return /*#__PURE__*/React.createElement("div", {
|
19
|
+
className: blockClass
|
20
|
+
}, /*#__PURE__*/React.createElement("div", {
|
21
|
+
className: "".concat(blockClass, "-header")
|
22
|
+
}, /*#__PURE__*/React.createElement("p", {
|
23
|
+
className: "".concat(blockClass, "-title")
|
24
|
+
}, title), /*#__PURE__*/React.createElement(Button, {
|
25
|
+
renderIcon: Close16,
|
26
|
+
iconDescription: closeIconDescription,
|
27
|
+
tooltipPosition: "left",
|
28
|
+
tooltipAlignment: "center",
|
29
|
+
hasIconOnly: true,
|
30
|
+
onClick: onCloseHandler,
|
31
|
+
kind: "ghost",
|
32
|
+
size: "sm"
|
33
|
+
})), /*#__PURE__*/isValidElement(meta) ? meta : meta.map(function (entry) {
|
34
|
+
return /*#__PURE__*/React.createElement("div", {
|
35
|
+
key: entry.id,
|
36
|
+
className: "".concat(blockClass, "-entry")
|
37
|
+
}, /*#__PURE__*/React.createElement("p", {
|
38
|
+
className: "".concat(blockClass, "-entry-title")
|
39
|
+
}, entry.title), /*#__PURE__*/React.createElement("p", {
|
40
|
+
className: "".concat(blockClass, "-entry-body")
|
41
|
+
}, entry.value));
|
42
|
+
}));
|
43
|
+
};
|
44
|
+
AddSelectMetaPanel.propTypes = {
|
45
|
+
closeIconDescription: PropTypes.string,
|
46
|
+
meta: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.shape({
|
47
|
+
id: PropTypes.string,
|
48
|
+
title: PropTypes.string,
|
49
|
+
value: PropTypes.string
|
50
|
+
})), PropTypes.node]),
|
51
|
+
setDisplayMetaPanel: PropTypes.func,
|
52
|
+
title: PropTypes.string
|
53
|
+
};
|
54
|
+
AddSelectMetaPanel.displayName = componentName;
|
@@ -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
|
//
|
@@ -12,14 +12,19 @@ import { SubtractAlt32 } from '@carbon/icons-react';
|
|
12
12
|
import PropTypes from 'prop-types';
|
13
13
|
import { NoDataEmptyState } from '../../components/EmptyStates/NoDataEmptyState';
|
14
14
|
import { pkg } from '../../settings';
|
15
|
+
import { AddSelectMetaPanel } from './AddSelectMetaPanel';
|
15
16
|
var componentName = 'AddSelectSidebar';
|
16
17
|
export var AddSelectSidebar = function AddSelectSidebar(_ref) {
|
17
|
-
var
|
18
|
+
var closeIconDescription = _ref.closeIconDescription,
|
19
|
+
displayMetalPanel = _ref.displayMetalPanel,
|
20
|
+
influencerTitle = _ref.influencerTitle,
|
18
21
|
items = _ref.items,
|
22
|
+
metaPanelTitle = _ref.metaPanelTitle,
|
19
23
|
multiSelection = _ref.multiSelection,
|
20
24
|
noSelectionDescription = _ref.noSelectionDescription,
|
21
25
|
noSelectionTitle = _ref.noSelectionTitle,
|
22
26
|
removeIconDescription = _ref.removeIconDescription,
|
27
|
+
setDisplayMetaPanel = _ref.setDisplayMetaPanel,
|
23
28
|
setMultiSelection = _ref.setMultiSelection;
|
24
29
|
var blockClass = "".concat(pkg.prefix, "--add-select__sidebar");
|
25
30
|
|
@@ -36,7 +41,8 @@ export var AddSelectSidebar = function AddSelectSidebar(_ref) {
|
|
36
41
|
}); // certain properties should not be displayed in the sidebar
|
37
42
|
// eslint-disable-next-line no-unused-vars
|
38
43
|
|
39
|
-
var
|
44
|
+
var meta = selectedItem.meta,
|
45
|
+
icon = selectedItem.icon,
|
40
46
|
avatar = selectedItem.avatar,
|
41
47
|
newItem = _objectWithoutProperties(selectedItem, _excluded);
|
42
48
|
|
@@ -69,6 +75,15 @@ export var AddSelectSidebar = function AddSelectSidebar(_ref) {
|
|
69
75
|
}));
|
70
76
|
};
|
71
77
|
|
78
|
+
if (Object.keys(displayMetalPanel).length !== 0) {
|
79
|
+
return /*#__PURE__*/React.createElement(AddSelectMetaPanel, {
|
80
|
+
closeIconDescription: closeIconDescription,
|
81
|
+
meta: displayMetalPanel.meta,
|
82
|
+
setDisplayMetaPanel: setDisplayMetaPanel,
|
83
|
+
title: metaPanelTitle
|
84
|
+
});
|
85
|
+
}
|
86
|
+
|
72
87
|
return /*#__PURE__*/React.createElement("div", {
|
73
88
|
className: blockClass
|
74
89
|
}, /*#__PURE__*/React.createElement("div", {
|
@@ -103,12 +118,16 @@ export var AddSelectSidebar = function AddSelectSidebar(_ref) {
|
|
103
118
|
})));
|
104
119
|
};
|
105
120
|
AddSelectSidebar.propTypes = {
|
121
|
+
closeIconDescription: PropTypes.string,
|
122
|
+
displayMetalPanel: PropTypes.object,
|
106
123
|
influencerTitle: PropTypes.string,
|
107
124
|
items: PropTypes.array,
|
125
|
+
metaPanelTitle: PropTypes.string,
|
108
126
|
multiSelection: PropTypes.array,
|
109
127
|
noSelectionDescription: PropTypes.string,
|
110
128
|
noSelectionTitle: PropTypes.string,
|
111
129
|
removeIconDescription: PropTypes.string,
|
130
|
+
setDisplayMetaPanel: PropTypes.func,
|
112
131
|
setMultiSelection: PropTypes.func
|
113
132
|
};
|
114
133
|
AddSelectSidebar.displayName = componentName;
|
@@ -46,7 +46,7 @@ var blockClass = "".concat(pkg.prefix, "--data-spreadsheet");
|
|
46
46
|
var componentName = 'DataSpreadsheet'; // Default values for props
|
47
47
|
|
48
48
|
var defaults = {
|
49
|
-
cellSize: '
|
49
|
+
cellSize: 'sm',
|
50
50
|
columns: Object.freeze([]),
|
51
51
|
data: Object.freeze([]),
|
52
52
|
defaultEmptyRowCount: 16,
|
@@ -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,
|
@@ -780,7 +782,8 @@ export var DataSpreadsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref)
|
|
780
782
|
totalVisibleColumns: totalVisibleColumns,
|
781
783
|
updateActiveCellCoordinates: updateActiveCellCoordinates,
|
782
784
|
setHeaderCellHoldActive: setHeaderCellHoldActive,
|
783
|
-
headerCellHoldActive: headerCellHoldActive
|
785
|
+
headerCellHoldActive: headerCellHoldActive,
|
786
|
+
visibleColumns: visibleColumns
|
784
787
|
}), /*#__PURE__*/React.createElement(DataSpreadsheetBody, {
|
785
788
|
activeCellCoordinates: activeCellCoordinates,
|
786
789
|
ref: spreadsheetRef,
|
@@ -863,7 +866,7 @@ DataSpreadsheet.propTypes = {
|
|
863
866
|
/**
|
864
867
|
* Specifies the cell height
|
865
868
|
*/
|
866
|
-
cellSize: PropTypes.oneOf(['
|
869
|
+
cellSize: PropTypes.oneOf(['xs', 'sm', 'md', 'lg']),
|
867
870
|
|
868
871
|
/**
|
869
872
|
* Provide an optional class to be applied to the containing node.
|
@@ -68,7 +68,8 @@ export var DataSpreadsheetBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
68
68
|
var contentScrollRef = useRef();
|
69
69
|
var previousState = usePreviousValue({
|
70
70
|
selectionAreaData: selectionAreaData,
|
71
|
-
clickAndHoldActive: clickAndHoldActive
|
71
|
+
clickAndHoldActive: clickAndHoldActive,
|
72
|
+
rowHeight: defaultColumn.rowHeight
|
72
73
|
}); // Set custom css property containing the spreadsheet total width
|
73
74
|
|
74
75
|
useEffect(function () {
|
@@ -148,7 +149,7 @@ export var DataSpreadsheetBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
148
149
|
|
149
150
|
for (var rowIndex = rowStart; rowIndex <= rowEnd; rowIndex++) {
|
150
151
|
for (var columnIndex = columnStart; columnIndex <= columnEnd; columnIndex++) {
|
151
|
-
cellContainer.push([rowIndex, columnIndex]);
|
152
|
+
cellContainer.push([rowIndex, columnIndex, "".concat(blockClass, "__cell--").concat(rowIndex, "--").concat(columnIndex)]);
|
152
153
|
}
|
153
154
|
}
|
154
155
|
|
@@ -168,18 +169,47 @@ export var DataSpreadsheetBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
168
169
|
setActiveCellCoordinates: setActiveCellCoordinates,
|
169
170
|
rows: rows,
|
170
171
|
activeCellCoordinates: activeCellCoordinates,
|
171
|
-
defaultColumn: defaultColumn
|
172
|
+
defaultColumn: defaultColumn,
|
173
|
+
selectionAreas: selectionAreas
|
172
174
|
}); // Make sure that if the cellSize prop changes, the active
|
173
|
-
// cell also gets updated with the new size
|
175
|
+
// cell also gets updated with the new size and new top placement
|
176
|
+
// value. All of the cell selections will be updated as well
|
174
177
|
|
175
178
|
useEffect(function () {
|
176
179
|
var listContainer = spreadsheetBodyRef === null || spreadsheetBodyRef === void 0 ? void 0 : spreadsheetBodyRef.current;
|
177
180
|
var activeCellButton = listContainer.querySelector(".".concat(blockClass, "__active-cell--highlight"));
|
178
181
|
|
179
|
-
if (activeCellButton) {
|
182
|
+
if (activeCellButton && defaultColumn.rowHeight !== previousState.rowHeight) {
|
180
183
|
activeCellButton.style.height = "".concat(defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeight, "px");
|
184
|
+
|
185
|
+
if (activeCellCoordinates) {
|
186
|
+
var activeTargetElement = ref.current.querySelector("[data-row-index=\"".concat(activeCellCoordinates.row, "\"][data-column-index=\"").concat(activeCellCoordinates.column, "\"]"));
|
187
|
+
|
188
|
+
var _listContainer = ref.current.querySelector(".".concat(blockClass, "__list--container"));
|
189
|
+
|
190
|
+
var newActiveCellTopPosition = activeTargetElement.getBoundingClientRect().top - _listContainer.getBoundingClientRect().top;
|
191
|
+
|
192
|
+
activeCellButton.style.top = px(newActiveCellTopPosition);
|
193
|
+
removeCellSelections({
|
194
|
+
spreadsheetRef: ref
|
195
|
+
});
|
196
|
+
selectionAreas.map(function (area) {
|
197
|
+
if (!area.areaCreated && area.point1 && area.point2 && area.matcher) {
|
198
|
+
return createCellSelectionArea({
|
199
|
+
ref: ref,
|
200
|
+
area: area,
|
201
|
+
blockClass: blockClass,
|
202
|
+
defaultColumn: defaultColumn,
|
203
|
+
selectionAreas: selectionAreas,
|
204
|
+
setSelectionAreas: setSelectionAreas,
|
205
|
+
setActiveCellInsideSelectionArea: setActiveCellInsideSelectionArea,
|
206
|
+
visibleColumns: visibleColumns
|
207
|
+
});
|
208
|
+
}
|
209
|
+
});
|
210
|
+
}
|
181
211
|
}
|
182
|
-
}, [defaultColumn === null ||
|
212
|
+
}, [defaultColumn, ref, activeCellCoordinates, previousState === null || previousState === void 0 ? void 0 : previousState.rowHeight, selectionAreas, setActiveCellInsideSelectionArea, setSelectionAreas, visibleColumns]); // onClick fn for each cell in the data spreadsheet body,
|
183
213
|
// adds the active cell highlight
|
184
214
|
|
185
215
|
var handleBodyCellClick = useCallback(function (cell, columnIndex) {
|
@@ -366,11 +396,13 @@ export var DataSpreadsheetBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
366
396
|
"data-column-index": "header",
|
367
397
|
type: "button",
|
368
398
|
onClick: handleRowHeaderClick(index),
|
369
|
-
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)),
|
370
400
|
style: {
|
371
401
|
width: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeaderWidth
|
372
402
|
}
|
373
403
|
}, index + 1)), row.cells.map(function (cell, index) {
|
404
|
+
var _cell$column;
|
405
|
+
|
374
406
|
return /*#__PURE__*/React.createElement("div", _extends({
|
375
407
|
key: "cell_".concat(index),
|
376
408
|
"aria-colindex": index + 1
|
@@ -378,7 +410,7 @@ export var DataSpreadsheetBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
378
410
|
role: "gridcell",
|
379
411
|
style: _objectSpread(_objectSpread({}, cell.getCellProps().style), {}, {
|
380
412
|
display: 'grid',
|
381
|
-
minWidth: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.width
|
413
|
+
minWidth: (cell === null || cell === void 0 ? void 0 : (_cell$column = cell.column) === null || _cell$column === void 0 ? void 0 : _cell$column.width) || (defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.width)
|
382
414
|
})
|
383
415
|
}), /*#__PURE__*/React.createElement("button", {
|
384
416
|
id: "".concat(blockClass, "__cell--").concat(cell.row.index, "--").concat(index),
|
@@ -393,7 +425,7 @@ export var DataSpreadsheetBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
393
425
|
}, cell.render('Cell')));
|
394
426
|
}));
|
395
427
|
}
|
396
|
-
}, [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]);
|
397
429
|
var spreadsheetBodyRef = useRef();
|
398
430
|
return /*#__PURE__*/React.createElement("div", _extends({
|
399
431
|
ref: spreadsheetBodyRef,
|
@@ -407,7 +439,8 @@ export var DataSpreadsheetBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
407
439
|
scrollBarSizeValue: scrollBarSize,
|
408
440
|
totalVisibleColumns: totalVisibleColumns,
|
409
441
|
defaultColumn: defaultColumn,
|
410
|
-
totalColumnsWidth: totalColumnsWidth
|
442
|
+
totalColumnsWidth: totalColumnsWidth,
|
443
|
+
visibleColumns: visibleColumns
|
411
444
|
}),
|
412
445
|
outerRef: contentScrollRef
|
413
446
|
}, rows !== null && rows !== void 0 && rows.length ? RenderRow : RenderEmptyRows));
|
@@ -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,
|
@@ -41,7 +42,8 @@ export var DataSpreadsheetHeader = /*#__PURE__*/forwardRef(function (_ref, ref)
|
|
41
42
|
totalVisibleColumns = _ref.totalVisibleColumns,
|
42
43
|
updateActiveCellCoordinates = _ref.updateActiveCellCoordinates,
|
43
44
|
setHeaderCellHoldActive = _ref.setHeaderCellHoldActive,
|
44
|
-
headerCellHoldActive = _ref.headerCellHoldActive
|
45
|
+
headerCellHoldActive = _ref.headerCellHoldActive,
|
46
|
+
visibleColumns = _ref.visibleColumns;
|
45
47
|
|
46
48
|
var _useState = useState(0),
|
47
49
|
_useState2 = _slicedToArray(_useState, 2),
|
@@ -70,6 +72,7 @@ export var DataSpreadsheetHeader = /*#__PURE__*/forwardRef(function (_ref, ref)
|
|
70
72
|
var handleColumnHeaderClick = function handleColumnHeaderClick(index) {
|
71
73
|
return function (event) {
|
72
74
|
var isHoldingCommandKey = event.metaKey || event.ctrlKey;
|
75
|
+
var isHoldingShiftKey = event.shiftKey;
|
73
76
|
handleHeaderCellSelection({
|
74
77
|
type: 'column',
|
75
78
|
activeCellCoordinates: activeCellCoordinates,
|
@@ -81,7 +84,9 @@ export var DataSpreadsheetHeader = /*#__PURE__*/forwardRef(function (_ref, ref)
|
|
81
84
|
spreadsheetRef: ref,
|
82
85
|
index: index,
|
83
86
|
setSelectionAreaData: setSelectionAreaData,
|
84
|
-
isHoldingCommandKey: isHoldingCommandKey
|
87
|
+
isHoldingCommandKey: isHoldingCommandKey,
|
88
|
+
isHoldingShiftKey: isHoldingShiftKey,
|
89
|
+
currentMatcher: currentMatcher
|
85
90
|
});
|
86
91
|
};
|
87
92
|
};
|
@@ -102,23 +107,30 @@ export var DataSpreadsheetHeader = /*#__PURE__*/forwardRef(function (_ref, ref)
|
|
102
107
|
return function (event) {
|
103
108
|
var _selectionAreaToClone;
|
104
109
|
|
110
|
+
if (event.shiftKey) {
|
111
|
+
// Remove columns, need to call handleHeaderCellSelection
|
112
|
+
return;
|
113
|
+
}
|
114
|
+
|
105
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, "\"]"));
|
106
120
|
var clickXPosition = event.clientX;
|
107
121
|
var headerButtonCoords = event.target.getBoundingClientRect();
|
122
|
+
var headerIndex = event.target.getAttribute('data-column-index');
|
108
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;
|
109
127
|
var bodyContainer = document.querySelector(".".concat(blockClass, "__list--container")).firstElementChild;
|
110
|
-
var selectionAreaToClone = selectionAreas.filter(function (item) {
|
111
|
-
var _item$header;
|
112
|
-
|
113
|
-
return (item === null || item === void 0 ? void 0 : (_item$header = item.header) === null || _item$header === void 0 ? void 0 : _item$header.index) === index;
|
114
|
-
});
|
115
|
-
var selectionAreaElement = ref.current.querySelector("[data-matcher-id=\"".concat((_selectionAreaToClone = selectionAreaToClone[0]) === null || _selectionAreaToClone === void 0 ? void 0 : _selectionAreaToClone.matcher, "\"]"));
|
116
128
|
var selectionAreaClonedElement = selectionAreaElement.cloneNode();
|
117
129
|
var reorderIndicatorLine = selectionAreaElement.cloneNode();
|
118
130
|
reorderIndicatorLine.className = "".concat(blockClass, "__reorder-indicator-line");
|
119
131
|
reorderIndicatorLine.style.width = px(2);
|
120
132
|
selectionAreaClonedElement.classList.add("".concat(blockClass, "__selection-area--element-cloned"));
|
121
|
-
selectionAreaClonedElement.setAttribute('data-clone-offset-x',
|
133
|
+
selectionAreaClonedElement.setAttribute('data-clone-offset-x', updatedOffsetDifference);
|
122
134
|
selectionAreaClonedElement.setAttribute('data-column-index-original', index);
|
123
135
|
bodyContainer.appendChild(selectionAreaClonedElement);
|
124
136
|
bodyContainer.appendChild(reorderIndicatorLine);
|
@@ -144,7 +156,8 @@ export var DataSpreadsheetHeader = /*#__PURE__*/forwardRef(function (_ref, ref)
|
|
144
156
|
headerGroup: headerGroup,
|
145
157
|
scrollBarSizeValue: scrollBarSizeValue,
|
146
158
|
totalVisibleColumns: totalVisibleColumns,
|
147
|
-
defaultColumn: defaultColumn
|
159
|
+
defaultColumn: defaultColumn,
|
160
|
+
visibleColumns: visibleColumns
|
148
161
|
}),
|
149
162
|
overflow: 'hidden'
|
150
163
|
}),
|
@@ -167,7 +180,7 @@ export var DataSpreadsheetHeader = /*#__PURE__*/forwardRef(function (_ref, ref)
|
|
167
180
|
}, "\xA0")), headerGroup.headers.map(function (column, index) {
|
168
181
|
var _cx2;
|
169
182
|
|
170
|
-
var selectedHeader = checkSelectedHeaderCell(index, selectionAreas, 'column');
|
183
|
+
var selectedHeader = checkSelectedHeaderCell(index, selectionAreas, 'column', rows);
|
171
184
|
return /*#__PURE__*/React.createElement("div", _extends({
|
172
185
|
key: "column_".concat(index),
|
173
186
|
role: "columnheader",
|
@@ -204,13 +217,18 @@ DataSpreadsheetHeader.propTypes = {
|
|
204
217
|
/**
|
205
218
|
* Specifies the cell height
|
206
219
|
*/
|
207
|
-
cellSize: PropTypes.oneOf(['
|
220
|
+
cellSize: PropTypes.oneOf(['xs', 'sm', 'md', 'lg']),
|
208
221
|
|
209
222
|
/**
|
210
223
|
* All of the spreadsheet columns
|
211
224
|
*/
|
212
225
|
columns: PropTypes.array,
|
213
226
|
|
227
|
+
/**
|
228
|
+
* uuid that corresponds to the current selection area
|
229
|
+
*/
|
230
|
+
currentMatcher: PropTypes.string,
|
231
|
+
|
214
232
|
/**
|
215
233
|
* Default spreadsheet sizing values
|
216
234
|
*/
|
@@ -279,5 +297,10 @@ DataSpreadsheetHeader.propTypes = {
|
|
279
297
|
/**
|
280
298
|
* Function used to update the active cell coordinates
|
281
299
|
*/
|
282
|
-
updateActiveCellCoordinates: PropTypes.func
|
300
|
+
updateActiveCellCoordinates: PropTypes.func,
|
301
|
+
|
302
|
+
/**
|
303
|
+
* Array of visible columns provided by react-table useTable hook
|
304
|
+
*/
|
305
|
+
visibleColumns: PropTypes.array
|
283
306
|
};
|
@@ -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
|
|
@@ -26,21 +25,24 @@ export var useSpreadsheetMouseMove = function useSpreadsheetMouseMove(_ref) {
|
|
26
25
|
}
|
27
26
|
|
28
27
|
var spreadsheetCoords = ref.current.getBoundingClientRect();
|
28
|
+
var listContainer = ref.current.querySelector(".".concat(blockClass, "__list--container"));
|
29
|
+
var scrollAmount = listContainer.scrollLeft;
|
29
30
|
moveColumnIndicatorLine({
|
30
31
|
clonedSelectionElement: clonedSelectionElement,
|
31
32
|
ref: ref,
|
32
|
-
spreadsheetCoords: spreadsheetCoords
|
33
|
+
spreadsheetCoords: spreadsheetCoords,
|
34
|
+
leftScrollAmount: scrollAmount
|
33
35
|
});
|
34
|
-
var scrollbarWidth = getScrollbarWidth();
|
35
36
|
var spreadsheetWrapperElement = ref.current;
|
36
37
|
spreadsheetWrapperElement.getBoundingClientRect();
|
37
38
|
var xPositionRelativeToSpreadsheet = event.clientX - spreadsheetCoords.left;
|
38
39
|
var offsetXValue = clonedSelectionElement === null || clonedSelectionElement === void 0 ? void 0 : clonedSelectionElement.getAttribute('data-clone-offset-x');
|
39
|
-
var
|
40
|
+
var totalSpreadsheetScrollingWidth = listContainer.scrollWidth;
|
40
41
|
var clonedSelectionWidth = clonedSelectionElement.offsetWidth;
|
41
|
-
var clonePlacement = Math.max(xPositionRelativeToSpreadsheet - offsetXValue, defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeaderWidth); // Moves the position of the cloned selection area to follow mouse
|
42
|
+
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
|
43
|
+
// add the amount horizontally scrolled
|
42
44
|
|
43
|
-
clonedSelectionElement.style.left = px(
|
45
|
+
clonedSelectionElement.style.left = px(totalSpreadsheetScrollingWidth - clonedSelectionWidth >= clonePlacement ? clonePlacement + scrollAmount : totalSpreadsheetScrollingWidth - clonedSelectionWidth);
|
44
46
|
};
|
45
47
|
|
46
48
|
if (headerCellHoldActive) {
|