@carbon/ibm-products 1.17.0 → 1.18.2
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 +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 +215 -90
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +4 -4
- package/css/index-full-carbon.min.css.map +1 -1
- package/css/index-without-carbon.css +98 -24
- 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 +124 -55
- package/css/index.css.map +1 -1
- package/css/index.min.css +4 -4
- package/css/index.min.css.map +1 -1
- package/es/components/AddSelect/AddSelect.js +57 -8
- package/es/components/AddSelect/AddSelectColumn.js +31 -73
- package/es/components/AddSelect/AddSelectFilter.js +2 -2
- package/es/components/AddSelect/AddSelectList.js +32 -6
- package/es/components/AddSelect/AddSelectMetaPanel.js +54 -0
- package/es/components/AddSelect/AddSelectSidebar.js +19 -1
- 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 +29 -15
- package/es/components/DataSpreadsheet/DataSpreadsheetBody.js +89 -46
- package/es/components/DataSpreadsheet/DataSpreadsheetHeader.js +70 -6
- package/es/components/DataSpreadsheet/hooks/index.js +3 -1
- package/es/components/DataSpreadsheet/hooks/useSpreadsheetEdit.js +15 -14
- package/es/components/DataSpreadsheet/hooks/useSpreadsheetMouseMove.js +64 -0
- package/es/components/DataSpreadsheet/hooks/useSpreadsheetMouseUp.js +155 -0
- package/es/components/DataSpreadsheet/utils/createCellSelectionArea.js +3 -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 +1 -1
- package/es/components/DataSpreadsheet/utils/moveColumnIndicatorLine.js +35 -0
- package/es/components/Datagrid/Datagrid/Datagrid.js +1 -1
- package/es/components/Datagrid/Datagrid/DatagridEmptyBody.js +22 -3
- 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/lib/components/AddSelect/AddSelect.js +58 -8
- package/lib/components/AddSelect/AddSelectColumn.js +32 -71
- package/lib/components/AddSelect/AddSelectFilter.js +2 -2
- package/lib/components/AddSelect/AddSelectList.js +30 -4
- package/lib/components/AddSelect/AddSelectMetaPanel.js +77 -0
- package/lib/components/AddSelect/AddSelectSidebar.js +20 -1
- 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 +28 -14
- package/lib/components/DataSpreadsheet/DataSpreadsheetBody.js +90 -45
- package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.js +72 -6
- package/lib/components/DataSpreadsheet/hooks/index.js +17 -1
- package/lib/components/DataSpreadsheet/hooks/useSpreadsheetEdit.js +14 -14
- package/lib/components/DataSpreadsheet/hooks/useSpreadsheetMouseMove.js +78 -0
- package/lib/components/DataSpreadsheet/hooks/useSpreadsheetMouseUp.js +163 -0
- package/lib/components/DataSpreadsheet/utils/createCellSelectionArea.js +3 -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 +1 -1
- package/lib/components/DataSpreadsheet/utils/moveColumnIndicatorLine.js +46 -0
- package/lib/components/Datagrid/Datagrid/Datagrid.js +1 -1
- package/lib/components/Datagrid/Datagrid/DatagridEmptyBody.js +24 -3
- 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/package.json +13 -12
- package/scss/components/AddSelect/_add-select.scss +45 -5
- package/scss/components/DataSpreadsheet/_data-spreadsheet.scss +28 -14
- package/scss/components/Datagrid/_storybook-styles.scss +5 -0
- package/scss/components/Datagrid/styles/datagrid.scss +43 -5
@@ -0,0 +1,64 @@
|
|
1
|
+
/**
|
2
|
+
* Copyright IBM Corp. 2022, 2022
|
3
|
+
*
|
4
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
6
|
+
*/
|
7
|
+
import { useEffect } from 'react';
|
8
|
+
import { px } from '@carbon/layout';
|
9
|
+
import { pkg } from '../../../settings';
|
10
|
+
import { getScrollbarWidth } from '../../../global/js/utils/getScrollbarWidth';
|
11
|
+
import { moveColumnIndicatorLine } from '../utils/moveColumnIndicatorLine'; // Used specifically for reordering columns, will move the position of the
|
12
|
+
// cloned selection area to follow the position of the cursor
|
13
|
+
|
14
|
+
export var useSpreadsheetMouseMove = function useSpreadsheetMouseMove(_ref) {
|
15
|
+
var ref = _ref.ref,
|
16
|
+
_ref$blockClass = _ref.blockClass,
|
17
|
+
blockClass = _ref$blockClass === void 0 ? "".concat(pkg.prefix, "--data-spreadsheet") : _ref$blockClass,
|
18
|
+
headerCellHoldActive = _ref.headerCellHoldActive,
|
19
|
+
defaultColumn = _ref.defaultColumn;
|
20
|
+
useEffect(function () {
|
21
|
+
var handleMouseMove = function handleMouseMove(event) {
|
22
|
+
var clonedSelectionElement = ref.current.querySelector(".".concat(blockClass, "__selection-area--element-cloned"));
|
23
|
+
|
24
|
+
if (clonedSelectionElement) {
|
25
|
+
ref.current.addEventListener('mousemove', handleMouseMove);
|
26
|
+
}
|
27
|
+
|
28
|
+
var spreadsheetCoords = ref.current.getBoundingClientRect();
|
29
|
+
var listContainer = ref.current.querySelector(".".concat(blockClass, "__list--container"));
|
30
|
+
var scrollAmount = listContainer.scrollLeft;
|
31
|
+
moveColumnIndicatorLine({
|
32
|
+
clonedSelectionElement: clonedSelectionElement,
|
33
|
+
ref: ref,
|
34
|
+
spreadsheetCoords: spreadsheetCoords,
|
35
|
+
leftScrollAmount: scrollAmount
|
36
|
+
});
|
37
|
+
var scrollbarWidth = getScrollbarWidth();
|
38
|
+
var spreadsheetWrapperElement = ref.current;
|
39
|
+
spreadsheetWrapperElement.getBoundingClientRect();
|
40
|
+
var xPositionRelativeToSpreadsheet = event.clientX - spreadsheetCoords.left;
|
41
|
+
var offsetXValue = clonedSelectionElement === null || clonedSelectionElement === void 0 ? void 0 : clonedSelectionElement.getAttribute('data-clone-offset-x');
|
42
|
+
var totalSpreadsheetScrollingWidth = listContainer.scrollWidth;
|
43
|
+
var clonedSelectionWidth = clonedSelectionElement.offsetWidth;
|
44
|
+
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
|
+
// add the amount horizontally scrolled
|
46
|
+
|
47
|
+
clonedSelectionElement.style.left = px(totalSpreadsheetScrollingWidth - clonedSelectionWidth - scrollbarWidth >= clonePlacement ? clonePlacement + scrollAmount : totalSpreadsheetScrollingWidth - clonedSelectionWidth - scrollbarWidth);
|
48
|
+
};
|
49
|
+
|
50
|
+
if (headerCellHoldActive) {
|
51
|
+
ref.current.addEventListener('mousemove', handleMouseMove);
|
52
|
+
}
|
53
|
+
|
54
|
+
var spreadsheetRef = ref.current;
|
55
|
+
|
56
|
+
if (!headerCellHoldActive) {
|
57
|
+
spreadsheetRef === null || spreadsheetRef === void 0 ? void 0 : spreadsheetRef.removeEventListener('mousemove', handleMouseMove);
|
58
|
+
}
|
59
|
+
|
60
|
+
return function () {
|
61
|
+
spreadsheetRef === null || spreadsheetRef === void 0 ? void 0 : spreadsheetRef.removeEventListener('mousemove', handleMouseMove);
|
62
|
+
};
|
63
|
+
});
|
64
|
+
};
|
@@ -0,0 +1,155 @@
|
|
1
|
+
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
2
|
+
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
|
3
|
+
|
4
|
+
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; }
|
5
|
+
|
6
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
7
|
+
|
8
|
+
/**
|
9
|
+
* Copyright IBM Corp. 2022, 2022
|
10
|
+
*
|
11
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
12
|
+
* LICENSE file in the root directory of this source tree.
|
13
|
+
*/
|
14
|
+
import { useEffect } from 'react';
|
15
|
+
import { px } from '@carbon/layout';
|
16
|
+
import { pkg } from '../../../settings';
|
17
|
+
import { deepCloneObject } from '../../../global/js/utils/deepCloneObject';
|
18
|
+
export var useSpreadsheetMouseUp = function useSpreadsheetMouseUp(_ref) {
|
19
|
+
var currentMatcher = _ref.currentMatcher,
|
20
|
+
setSelectionAreas = _ref.setSelectionAreas,
|
21
|
+
setClickAndHoldActive = _ref.setClickAndHoldActive,
|
22
|
+
setValidStartingPoint = _ref.setValidStartingPoint,
|
23
|
+
validStartingPoint = _ref.validStartingPoint,
|
24
|
+
_ref$blockClass = _ref.blockClass,
|
25
|
+
blockClass = _ref$blockClass === void 0 ? "".concat(pkg.prefix, "--data-spreadsheet") : _ref$blockClass,
|
26
|
+
ref = _ref.ref,
|
27
|
+
setHeaderCellHoldActive = _ref.setHeaderCellHoldActive,
|
28
|
+
setColumnOrder = _ref.setColumnOrder,
|
29
|
+
visibleColumns = _ref.visibleColumns,
|
30
|
+
setActiveCellCoordinates = _ref.setActiveCellCoordinates,
|
31
|
+
activeCellCoordinates = _ref.activeCellCoordinates,
|
32
|
+
rows = _ref.rows,
|
33
|
+
defaultColumn = _ref.defaultColumn;
|
34
|
+
useEffect(function () {
|
35
|
+
var handleMouseUp = function handleMouseUp(event) {
|
36
|
+
// Remove the cloned selection area on mouse up
|
37
|
+
if (!validStartingPoint) {
|
38
|
+
setHeaderCellHoldActive(false);
|
39
|
+
var selectionAreaCloneElement = ref.current.querySelector(".".concat(blockClass, "__selection-area--element-cloned"));
|
40
|
+
|
41
|
+
if (!selectionAreaCloneElement) {
|
42
|
+
return;
|
43
|
+
} // Mouse up while a cloned selection area exists/a column is being reordered
|
44
|
+
|
45
|
+
|
46
|
+
if (selectionAreaCloneElement) {
|
47
|
+
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');
|
50
|
+
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
|
+
|
52
|
+
if (!columnToMoveToElement) {
|
53
|
+
return;
|
54
|
+
}
|
55
|
+
|
56
|
+
var selectionAreaToMove = ref.current.querySelector("[data-matcher-id=\"".concat(currentMatcher, "\"]"));
|
57
|
+
var spreadsheetPosition = ref.current.getBoundingClientRect();
|
58
|
+
var newIndexPosition = columnToMoveToElement.getBoundingClientRect();
|
59
|
+
var listContainer = ref.current.querySelector(".".concat(blockClass, "__list--container"));
|
60
|
+
var leftScrollAmount = listContainer.scrollLeft;
|
61
|
+
var relativeNewPosition = newIndexPosition.left - spreadsheetPosition.left + leftScrollAmount;
|
62
|
+
var cloneColumnWidth = selectionAreaCloneElement.offsetWidth;
|
63
|
+
var columnsWidthUpToNewIndex = 0;
|
64
|
+
var newIndexLessThanStarting = newColumnIndex < originalColumnIndex;
|
65
|
+
visibleColumns.forEach(function (item, index) {
|
66
|
+
if (newIndexLessThanStarting && index === visibleColumns.length - 1) {
|
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);
|
76
|
+
setSelectionAreas(function (prev) {
|
77
|
+
var selectionAreaClone = deepCloneObject(prev);
|
78
|
+
|
79
|
+
if (originalColumnIndex === newColumnIndex) {
|
80
|
+
return prev;
|
81
|
+
}
|
82
|
+
|
83
|
+
var indexOfItemToUpdate = selectionAreaClone.findIndex(function (item) {
|
84
|
+
return item.matcher === currentMatcher;
|
85
|
+
});
|
86
|
+
|
87
|
+
if (indexOfItemToUpdate === -1) {
|
88
|
+
return prev;
|
89
|
+
}
|
90
|
+
|
91
|
+
selectionAreaClone[indexOfItemToUpdate].header.index = Number(newColumnIndex);
|
92
|
+
selectionAreaClone[indexOfItemToUpdate].point1.column = Number(newColumnIndex);
|
93
|
+
selectionAreaClone[indexOfItemToUpdate].point2.column = Number(newColumnIndex);
|
94
|
+
return selectionAreaClone;
|
95
|
+
});
|
96
|
+
var columnIdArray = visibleColumns.map(function (column) {
|
97
|
+
return column.id;
|
98
|
+
});
|
99
|
+
|
100
|
+
var columnIdArrayClone = _toConsumableArray(columnIdArray); // Remove one element at the original index
|
101
|
+
|
102
|
+
|
103
|
+
columnIdArrayClone.splice(originalColumnIndex, 1); // Add one element at the new index
|
104
|
+
|
105
|
+
columnIdArrayClone.splice(newColumnIndex, 0, columnIdArray[originalColumnIndex]);
|
106
|
+
setColumnOrder(columnIdArrayClone); // Function provided by useTable (react-table) hook to reorder columns
|
107
|
+
|
108
|
+
var newCellCoords = _objectSpread(_objectSpread({}, activeCellCoordinates), {}, {
|
109
|
+
column: Number(newColumnIndex)
|
110
|
+
});
|
111
|
+
|
112
|
+
setActiveCellCoordinates(newCellCoords); // Remove the cloned column and indicator elements
|
113
|
+
|
114
|
+
var indicatorLineElement = ref.current.querySelector(".".concat(blockClass, "__reorder-indicator-line"));
|
115
|
+
indicatorLineElement === null || indicatorLineElement === void 0 ? void 0 : indicatorLineElement.remove();
|
116
|
+
selectionAreaCloneElement === null || selectionAreaCloneElement === void 0 ? void 0 : selectionAreaCloneElement.remove();
|
117
|
+
}
|
118
|
+
} // Mouse up was on a spreadsheet body cell which is a valid
|
119
|
+
// start/end point for creating a selection area
|
120
|
+
|
121
|
+
|
122
|
+
if (validStartingPoint) {
|
123
|
+
setClickAndHoldActive(false);
|
124
|
+
setValidStartingPoint(false);
|
125
|
+
var cellButton = event.target.closest(".".concat(blockClass, "__body--td"));
|
126
|
+
|
127
|
+
if (cellButton) {
|
128
|
+
var endCellCoordinates = {
|
129
|
+
row: Number(cellButton.getAttribute('data-row-index')),
|
130
|
+
column: Number(cellButton.getAttribute('data-column-index'))
|
131
|
+
};
|
132
|
+
setSelectionAreas(function (prev) {
|
133
|
+
var selectionAreaClone = deepCloneObject(prev);
|
134
|
+
var indexOfItemToUpdate = selectionAreaClone.findIndex(function (item) {
|
135
|
+
return item.matcher === currentMatcher;
|
136
|
+
}); // No items in the array have an object that matches the value of currentMatcher
|
137
|
+
|
138
|
+
if (indexOfItemToUpdate === -1) {
|
139
|
+
return prev;
|
140
|
+
}
|
141
|
+
|
142
|
+
selectionAreaClone[indexOfItemToUpdate].point2 = endCellCoordinates;
|
143
|
+
selectionAreaClone[indexOfItemToUpdate].areaCreated = false;
|
144
|
+
return selectionAreaClone;
|
145
|
+
});
|
146
|
+
}
|
147
|
+
}
|
148
|
+
};
|
149
|
+
|
150
|
+
document.addEventListener('mouseup', handleMouseUp);
|
151
|
+
return function () {
|
152
|
+
document.removeEventListener('mouseup', handleMouseUp);
|
153
|
+
};
|
154
|
+
}, [blockClass, currentMatcher, setSelectionAreas, setClickAndHoldActive, setValidStartingPoint, validStartingPoint, ref, setHeaderCellHoldActive, setColumnOrder, visibleColumns, setActiveCellCoordinates, activeCellCoordinates, rows, defaultColumn]);
|
155
|
+
};
|
@@ -11,11 +11,11 @@ export var createCellSelectionArea = function createCellSelectionArea(_ref) {
|
|
11
11
|
var ref = _ref.ref,
|
12
12
|
area = _ref.area,
|
13
13
|
blockClass = _ref.blockClass,
|
14
|
-
columns = _ref.columns,
|
15
14
|
defaultColumn = _ref.defaultColumn,
|
16
15
|
selectionAreas = _ref.selectionAreas,
|
17
16
|
setSelectionAreas = _ref.setSelectionAreas,
|
18
|
-
setActiveCellInsideSelectionArea = _ref.setActiveCellInsideSelectionArea
|
17
|
+
setActiveCellInsideSelectionArea = _ref.setActiveCellInsideSelectionArea,
|
18
|
+
visibleColumns = _ref.visibleColumns;
|
19
19
|
|
20
20
|
var _getSelectionAreaPoin = getSelectionAreaPoints(area),
|
21
21
|
lowestColumnIndex = _getSelectionAreaPoin.lowestColumnIndex,
|
@@ -30,7 +30,7 @@ export var createCellSelectionArea = function createCellSelectionArea(_ref) {
|
|
30
30
|
}
|
31
31
|
|
32
32
|
var selectionAreaVariableWidth = 0;
|
33
|
-
|
33
|
+
visibleColumns.forEach(function (item, index) {
|
34
34
|
if (index >= lowestColumnIndex && index <= greatestColumnIndex) {
|
35
35
|
selectionAreaVariableWidth += (item === null || item === void 0 ? void 0 : item.width) || (defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.width);
|
36
36
|
}
|
@@ -4,7 +4,7 @@
|
|
4
4
|
* This source code is licensed under the Apache-2.0 license found in the
|
5
5
|
* LICENSE file in the root directory of this source tree.
|
6
6
|
*/
|
7
|
-
import { baseFontSize, sizeXSmall as
|
7
|
+
import { baseFontSize, sizeXSmall as xs, sizeSmall as sm, sizeMedium as md, sizeLarge as lg } from '@carbon/layout';
|
8
8
|
|
9
9
|
var getSizeInPixels = function getSizeInPixels(carbonSize) {
|
10
10
|
return Number(carbonSize.replace('rem', '') * baseFontSize);
|
@@ -12,19 +12,19 @@ var getSizeInPixels = function getSizeInPixels(carbonSize) {
|
|
12
12
|
|
13
13
|
export var getCellSize = function getCellSize(cellSize) {
|
14
14
|
switch (cellSize) {
|
15
|
-
case '
|
16
|
-
return getSizeInPixels(
|
15
|
+
case 'xs':
|
16
|
+
return getSizeInPixels(xs);
|
17
17
|
|
18
|
-
case '
|
19
|
-
return getSizeInPixels(
|
18
|
+
case 'sm':
|
19
|
+
return getSizeInPixels(sm);
|
20
20
|
|
21
|
-
case '
|
22
|
-
return getSizeInPixels(
|
21
|
+
case 'md':
|
22
|
+
return getSizeInPixels(md);
|
23
23
|
|
24
|
-
case '
|
25
|
-
return getSizeInPixels(
|
24
|
+
case 'lg':
|
25
|
+
return getSizeInPixels(lg);
|
26
26
|
|
27
27
|
default:
|
28
|
-
return getSizeInPixels(
|
28
|
+
return getSizeInPixels(sm);
|
29
29
|
}
|
30
30
|
};
|
@@ -11,7 +11,8 @@ export var getSpreadsheetWidth = function getSpreadsheetWidth(_ref) {
|
|
11
11
|
scrollBarSizeValue = _ref.scrollBarSizeValue,
|
12
12
|
totalVisibleColumns = _ref.totalVisibleColumns,
|
13
13
|
defaultColumn = _ref.defaultColumn,
|
14
|
-
totalColumnsWidth = _ref.totalColumnsWidth
|
14
|
+
totalColumnsWidth = _ref.totalColumnsWidth,
|
15
|
+
visibleColumns = _ref.visibleColumns;
|
15
16
|
var additionalWidth = scrollBarSizeValue + defaultColumn.rowHeaderWidth;
|
16
17
|
|
17
18
|
if (!totalVisibleColumns) {
|
@@ -25,6 +26,11 @@ export var getSpreadsheetWidth = function getSpreadsheetWidth(_ref) {
|
|
25
26
|
}
|
26
27
|
|
27
28
|
if (totalVisibleColumns) {
|
28
|
-
|
29
|
+
var totalVisibleColumnWidth = visibleColumns.map(function (item, index) {
|
30
|
+
return index <= totalVisibleColumns - 1 && ((item === null || item === void 0 ? void 0 : item.width) || (defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.width));
|
31
|
+
}).reduce(function (prev, curr) {
|
32
|
+
return prev + curr;
|
33
|
+
}, 0);
|
34
|
+
return totalVisibleColumnWidth + additionalWidth;
|
29
35
|
}
|
30
36
|
};
|
@@ -0,0 +1,35 @@
|
|
1
|
+
/**
|
2
|
+
* Copyright IBM Corp. 2022, 2022
|
3
|
+
*
|
4
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
6
|
+
*/
|
7
|
+
import { px } from '@carbon/layout';
|
8
|
+
import { pkg } from '../../../settings';
|
9
|
+
export var moveColumnIndicatorLine = function moveColumnIndicatorLine(_ref) {
|
10
|
+
var _ref$blockClass = _ref.blockClass,
|
11
|
+
blockClass = _ref$blockClass === void 0 ? "".concat(pkg.prefix, "--data-spreadsheet") : _ref$blockClass,
|
12
|
+
clonedSelectionElement = _ref.clonedSelectionElement,
|
13
|
+
ref = _ref.ref,
|
14
|
+
spreadsheetCoords = _ref.spreadsheetCoords,
|
15
|
+
leftScrollAmount = _ref.leftScrollAmount;
|
16
|
+
var closestCell = event.target.closest(".".concat(blockClass, "--interactive-cell-element"));
|
17
|
+
var newColumnIndex = closestCell === null || closestCell === void 0 ? void 0 : closestCell.getAttribute('data-column-index');
|
18
|
+
var originalColumnIndex = clonedSelectionElement === null || clonedSelectionElement === void 0 ? void 0 : clonedSelectionElement.getAttribute('data-column-index-original');
|
19
|
+
var closestCellCoords = closestCell.getBoundingClientRect();
|
20
|
+
var indicatorLineElement = ref.current.querySelector(".".concat(blockClass, "__reorder-indicator-line"));
|
21
|
+
var matcherId = clonedSelectionElement === null || clonedSelectionElement === void 0 ? void 0 : clonedSelectionElement.getAttribute('data-matcher-id');
|
22
|
+
var selectionAreaOrigin = ref.current.querySelector("[data-matcher-id=\"".concat(matcherId, "\"]"));
|
23
|
+
|
24
|
+
if (Number(newColumnIndex) > Number(originalColumnIndex)) {
|
25
|
+
indicatorLineElement.style.left = px(closestCellCoords.left - spreadsheetCoords.left + closestCell.offsetWidth - 2 + leftScrollAmount);
|
26
|
+
}
|
27
|
+
|
28
|
+
if (Number(newColumnIndex) < Number(originalColumnIndex)) {
|
29
|
+
indicatorLineElement.style.left = px(closestCellCoords.left - spreadsheetCoords.left + leftScrollAmount);
|
30
|
+
}
|
31
|
+
|
32
|
+
if (Number(newColumnIndex) === Number(originalColumnIndex)) {
|
33
|
+
indicatorLineElement.style.left = selectionAreaOrigin.style.left;
|
34
|
+
}
|
35
|
+
};
|
@@ -60,7 +60,7 @@ export var Datagrid = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
60
60
|
return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
|
61
61
|
id: tableId,
|
62
62
|
ref: ref,
|
63
|
-
className: cx(className, blockClass, withVirtualScroll ? "".concat(blockClass, "__datagridWrap") : "".concat(blockClass, "__datagridWrap-simple"))
|
63
|
+
className: cx(className, blockClass, withVirtualScroll ? "".concat(blockClass, "__datagridWrap") : "".concat(blockClass, "__datagridWrap-simple"), !isFetching && rows.length === 0 ? "".concat(blockClass, "__empty-state") : '')
|
64
64
|
}, getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement(DatagridToolbar, datagridState), leftPanel && /*#__PURE__*/React.createElement("div", {
|
65
65
|
className: "".concat(blockClass, "__grid-container ").concat(blockClass, "__displayFlex")
|
66
66
|
}, leftPanel && leftPanel.isOpen && /*#__PURE__*/React.createElement("div", {
|
@@ -1,3 +1,5 @@
|
|
1
|
+
import _extends from "@babel/runtime/helpers/extends";
|
2
|
+
|
1
3
|
/*
|
2
4
|
* Licensed Materials - Property of IBM
|
3
5
|
* 5724-Q36
|
@@ -7,13 +9,30 @@
|
|
7
9
|
*/
|
8
10
|
import React from 'react';
|
9
11
|
import { pkg } from '../../../settings';
|
12
|
+
import { DataTable } from 'carbon-components-react';
|
13
|
+
import { NoDataEmptyState } from '../../EmptyStates/NoDataEmptyState';
|
10
14
|
var blockClass = "".concat(pkg.prefix, "--datagrid");
|
15
|
+
var TableBody = DataTable.TableBody,
|
16
|
+
TableRow = DataTable.TableRow,
|
17
|
+
TableCell = DataTable.TableCell;
|
11
18
|
|
12
19
|
var DatagridEmptyBody = function DatagridEmptyBody(datagridState) {
|
13
|
-
var
|
14
|
-
|
20
|
+
var getTableBodyProps = datagridState.getTableBodyProps,
|
21
|
+
headers = datagridState.headers,
|
22
|
+
emptyStateTitle = datagridState.emptyStateTitle,
|
23
|
+
emptyStateDescription = datagridState.emptyStateDescription,
|
24
|
+
emptyStateSize = datagridState.emptyStateSize,
|
25
|
+
illustrationTheme = datagridState.illustrationTheme;
|
26
|
+
return /*#__PURE__*/React.createElement(TableBody, _extends({}, getTableBodyProps(), {
|
15
27
|
className: "".concat(blockClass, "__empty-state-body")
|
16
|
-
},
|
28
|
+
}), /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableCell, {
|
29
|
+
colSpan: headers.length
|
30
|
+
}, /*#__PURE__*/React.createElement(NoDataEmptyState, {
|
31
|
+
illustrationTheme: illustrationTheme,
|
32
|
+
size: emptyStateSize,
|
33
|
+
title: emptyStateTitle,
|
34
|
+
subtitle: emptyStateDescription
|
35
|
+
}))));
|
17
36
|
};
|
18
37
|
|
19
38
|
export default DatagridEmptyBody;
|
@@ -54,9 +54,9 @@ var RowSizeDropdown = function RowSizeDropdown(_ref) {
|
|
54
54
|
|
55
55
|
RowSizeDropdown.propTypes = {
|
56
56
|
buttonLabel: PropTypes.string,
|
57
|
-
datagridName: PropTypes.string
|
58
|
-
light: PropTypes.bool
|
57
|
+
datagridName: PropTypes.string,
|
58
|
+
light: PropTypes.bool,
|
59
59
|
onChange: PropTypes.func.isRequired,
|
60
|
-
selectedOption: PropTypes.string
|
60
|
+
selectedOption: PropTypes.string
|
61
61
|
};
|
62
62
|
export default RowSizeDropdown;
|
@@ -128,7 +128,7 @@ RowSizeRadioGroup.defaultProps = {
|
|
128
128
|
};
|
129
129
|
RowSizeRadioGroup.propTypes = {
|
130
130
|
buttonRef: PropTypes.any.isRequired,
|
131
|
-
datagridName: PropTypes.string
|
131
|
+
datagridName: PropTypes.string,
|
132
132
|
hideRadioGroup: PropTypes.func.isRequired,
|
133
133
|
legendText: PropTypes.string,
|
134
134
|
onChange: PropTypes.func.isRequired,
|
@@ -79,7 +79,7 @@ export var ExportModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
79
79
|
|
80
80
|
setName(filename);
|
81
81
|
setExtension(preformattedExtensions === null || preformattedExtensions === void 0 ? void 0 : (_preformattedExtensio = preformattedExtensions[0]) === null || _preformattedExtensio === void 0 ? void 0 : _preformattedExtensio.extension);
|
82
|
-
}, [filename, preformattedExtensions]);
|
82
|
+
}, [filename, preformattedExtensions, open]);
|
83
83
|
|
84
84
|
var onNameChangeHandler = function onNameChangeHandler(evt) {
|
85
85
|
setName(evt.target.value);
|
@@ -43,7 +43,11 @@ var _addSelectUtils = require("./add-select-utils");
|
|
43
43
|
|
44
44
|
var _AddSelectFilter = require("./AddSelectFilter");
|
45
45
|
|
46
|
-
var
|
46
|
+
var _AddSelectSort = require("./AddSelectSort");
|
47
|
+
|
48
|
+
var _useItemSort2 = require("./hooks/useItemSort");
|
49
|
+
|
50
|
+
var _excluded = ["className", "clearFiltersText", "closeIconDescription", "columnInputPlaceholder", "description", "globalFilters", "globalFiltersIconDescription", "globalFiltersPlaceholderText", "globalFiltersPrimaryButtonText", "globalFiltersSecondaryButtonText", "globalSearchLabel", "globalSearchPlaceholder", "globalSortBy", "influencerTitle", "items", "itemsLabel", "metaIconDescription", "metaPanelTitle", "multi", "navIconDescription", "noResultsDescription", "noResultsTitle", "noSelectionDescription", "noSelectionTitle", "onClose", "onCloseButtonText", "onSubmit", "onSubmitButtonText", "open", "portalTarget", "removeIconDescription", "searchResultsLabel", "title"];
|
47
51
|
|
48
52
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
49
53
|
|
@@ -55,6 +59,7 @@ var AddSelect = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
55
59
|
|
56
60
|
var className = _ref.className,
|
57
61
|
clearFiltersText = _ref.clearFiltersText,
|
62
|
+
closeIconDescription = _ref.closeIconDescription,
|
58
63
|
columnInputPlaceholder = _ref.columnInputPlaceholder,
|
59
64
|
description = _ref.description,
|
60
65
|
globalFilters = _ref.globalFilters,
|
@@ -64,10 +69,14 @@ var AddSelect = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
64
69
|
globalFiltersSecondaryButtonText = _ref.globalFiltersSecondaryButtonText,
|
65
70
|
globalSearchLabel = _ref.globalSearchLabel,
|
66
71
|
globalSearchPlaceholder = _ref.globalSearchPlaceholder,
|
72
|
+
globalSortBy = _ref.globalSortBy,
|
67
73
|
influencerTitle = _ref.influencerTitle,
|
68
74
|
items = _ref.items,
|
69
75
|
itemsLabel = _ref.itemsLabel,
|
76
|
+
metaIconDescription = _ref.metaIconDescription,
|
77
|
+
metaPanelTitle = _ref.metaPanelTitle,
|
70
78
|
multi = _ref.multi,
|
79
|
+
navIconDescription = _ref.navIconDescription,
|
71
80
|
noResultsDescription = _ref.noResultsDescription,
|
72
81
|
noResultsTitle = _ref.noResultsTitle,
|
73
82
|
noSelectionDescription = _ref.noSelectionDescription,
|
@@ -129,6 +138,17 @@ var AddSelect = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
129
138
|
appliedGlobalFilters = _useState18[0],
|
130
139
|
setAppliedGlobalFilters = _useState18[1];
|
131
140
|
|
141
|
+
var _useState19 = (0, _react.useState)({}),
|
142
|
+
_useState20 = (0, _slicedToArray2.default)(_useState19, 2),
|
143
|
+
displayMetalPanel = _useState20[0],
|
144
|
+
setDisplayMetaPanel = _useState20[1];
|
145
|
+
|
146
|
+
var _useItemSort = (0, _useItemSort2.useItemSort)(),
|
147
|
+
sortDirection = _useItemSort.sortDirection,
|
148
|
+
setSortDirection = _useItemSort.setSortDirection,
|
149
|
+
sortAttribute = _useItemSort.sortAttribute,
|
150
|
+
setSortAttribute = _useItemSort.setSortAttribute;
|
151
|
+
|
132
152
|
(0, _react.useEffect)(function () {
|
133
153
|
var entries = items.entries; // flatItems is just a single array of all entries including children
|
134
154
|
|
@@ -218,6 +238,8 @@ var AddSelect = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
218
238
|
return results;
|
219
239
|
};
|
220
240
|
|
241
|
+
var sortFn = (0, _addSelectUtils.sortItems)(sortAttribute, sortDirection);
|
242
|
+
|
221
243
|
var getDisplayItems = function getDisplayItems() {
|
222
244
|
if (useNormalizedItems) {
|
223
245
|
// when global search or filter is in use the results are not in column format
|
@@ -230,7 +252,7 @@ var AddSelect = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
230
252
|
return filters.every(function (filter) {
|
231
253
|
return item[filter] === appliedGlobalFilters[filter];
|
232
254
|
});
|
233
|
-
});
|
255
|
+
}).sort(sortFn);
|
234
256
|
return results;
|
235
257
|
}
|
236
258
|
|
@@ -243,13 +265,16 @@ var AddSelect = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
243
265
|
|
244
266
|
var itemsToDisplay = getDisplayItems();
|
245
267
|
var commonListProps = {
|
268
|
+
metaIconDescription: metaIconDescription,
|
246
269
|
multi: multi,
|
247
270
|
multiSelection: multiSelection,
|
271
|
+
navIconDescription: navIconDescription,
|
248
272
|
path: path,
|
249
273
|
setMultiSelection: setMultiSelection,
|
250
274
|
setPath: setPath,
|
251
275
|
setSingleSelection: setSingleSelection,
|
252
|
-
singleSelection: singleSelection
|
276
|
+
singleSelection: singleSelection,
|
277
|
+
setDisplayMetaPanel: setDisplayMetaPanel
|
253
278
|
}; // handlers
|
254
279
|
|
255
280
|
var handleSearch = function handleSearch(term) {
|
@@ -284,13 +309,17 @@ var AddSelect = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
284
309
|
portalTarget: portalTarget
|
285
310
|
};
|
286
311
|
var sidebarProps = {
|
312
|
+
closeIconDescription: closeIconDescription,
|
287
313
|
influencerTitle: influencerTitle,
|
288
314
|
items: flatItems,
|
315
|
+
metaPanelTitle: metaPanelTitle,
|
289
316
|
multiSelection: multiSelection,
|
290
317
|
noSelectionDescription: noSelectionDescription,
|
291
318
|
noSelectionTitle: noSelectionTitle,
|
292
319
|
removeIconDescription: removeIconDescription,
|
293
|
-
setMultiSelection: setMultiSelection
|
320
|
+
setMultiSelection: setMultiSelection,
|
321
|
+
displayMetalPanel: displayMetalPanel,
|
322
|
+
setDisplayMetaPanel: setDisplayMetaPanel
|
294
323
|
};
|
295
324
|
|
296
325
|
var setShowBreadsCrumbs = function setShowBreadsCrumbs() {
|
@@ -317,9 +346,11 @@ var AddSelect = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
317
346
|
return true;
|
318
347
|
};
|
319
348
|
|
349
|
+
var hasResults = itemsToDisplay.length > 0;
|
350
|
+
var globalFiltersApplied = Object.keys(appliedGlobalFilters).length > 0;
|
320
351
|
var showBreadsCrumbs = setShowBreadsCrumbs();
|
321
|
-
var
|
322
|
-
var
|
352
|
+
var showSort = (searchTerm || globalFiltersApplied) && hasResults;
|
353
|
+
var showTags = setShowTags(); // main content
|
323
354
|
|
324
355
|
var body = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
|
325
356
|
className: "".concat(blockClass, "__header")
|
@@ -339,6 +370,8 @@ var AddSelect = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
339
370
|
hasFiltersApplied: globalFiltersApplied,
|
340
371
|
clearFiltersText: clearFiltersText
|
341
372
|
}), /*#__PURE__*/_react.default.createElement("div", {
|
373
|
+
className: "".concat(blockClass, "__sub-header")
|
374
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
342
375
|
className: "".concat(blockClass, "__tag-container")
|
343
376
|
}, showBreadsCrumbs ? /*#__PURE__*/_react.default.createElement(_AddSelectBreadcrumbs.AddSelectBreadcrumbs, {
|
344
377
|
itemsLabel: itemsLabel,
|
@@ -349,7 +382,14 @@ var AddSelect = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
349
382
|
}, searchTerm ? searchResultsLabel : itemsLabel), showTags && /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Tag, {
|
350
383
|
type: "gray",
|
351
384
|
size: "sm"
|
352
|
-
}, itemsToDisplay.length))
|
385
|
+
}, itemsToDisplay.length)), showSort && /*#__PURE__*/_react.default.createElement(_AddSelectSort.AddSelectSort, {
|
386
|
+
items: itemsToDisplay,
|
387
|
+
setSortAttribute: setSortAttribute,
|
388
|
+
setSortDirection: setSortDirection,
|
389
|
+
sortAttribute: sortAttribute,
|
390
|
+
sortDirection: sortDirection,
|
391
|
+
sortBy: globalSortBy
|
392
|
+
}))), useNormalizedItems && !searchTerm && !globalFiltersApplied ? /*#__PURE__*/_react.default.createElement("div", {
|
353
393
|
className: "".concat(blockClass, "__columns")
|
354
394
|
}, itemsToDisplay.map(function (page, idx) {
|
355
395
|
var _path;
|
@@ -360,7 +400,7 @@ var AddSelect = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
360
400
|
header: idx === 0 ? itemsLabel : (_path = path[idx - 1]) === null || _path === void 0 ? void 0 : _path.title,
|
361
401
|
columnInputPlaceholder: columnInputPlaceholder
|
362
402
|
}));
|
363
|
-
})) : /*#__PURE__*/_react.default.createElement("div", null,
|
403
|
+
})) : /*#__PURE__*/_react.default.createElement("div", null, hasResults ? /*#__PURE__*/_react.default.createElement(_AddSelectList.AddSelectList, (0, _extends2.default)({}, commonListProps, {
|
364
404
|
filteredItems: itemsToDisplay,
|
365
405
|
modifiers: items === null || items === void 0 ? void 0 : items.modifiers
|
366
406
|
})) : /*#__PURE__*/_react.default.createElement("div", {
|
@@ -381,6 +421,7 @@ exports.AddSelect = AddSelect;
|
|
381
421
|
AddSelect.propTypes = {
|
382
422
|
className: _propTypes.default.string,
|
383
423
|
clearFiltersText: _propTypes.default.string,
|
424
|
+
closeIconDescription: _propTypes.default.string,
|
384
425
|
columnInputPlaceholder: _propTypes.default.string,
|
385
426
|
description: _propTypes.default.string,
|
386
427
|
globalFilters: _propTypes.default.arrayOf(_propTypes.default.shape({
|
@@ -393,6 +434,7 @@ AddSelect.propTypes = {
|
|
393
434
|
globalFiltersSecondaryButtonText: _propTypes.default.string,
|
394
435
|
globalSearchLabel: _propTypes.default.string,
|
395
436
|
globalSearchPlaceholder: _propTypes.default.string,
|
437
|
+
globalSortBy: _propTypes.default.array,
|
396
438
|
influencerTitle: _propTypes.default.string,
|
397
439
|
items: _propTypes.default.shape({
|
398
440
|
modifiers: _propTypes.default.shape({
|
@@ -410,13 +452,21 @@ AddSelect.propTypes = {
|
|
410
452
|
children: _propTypes.default.object,
|
411
453
|
icon: _propTypes.default.object,
|
412
454
|
id: _propTypes.default.string.isRequired,
|
455
|
+
meta: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.shape({
|
456
|
+
id: _propTypes.default.string,
|
457
|
+
title: _propTypes.default.string,
|
458
|
+
value: _propTypes.default.string
|
459
|
+
})), _propTypes.default.node]),
|
413
460
|
subtitle: _propTypes.default.string,
|
414
461
|
title: _propTypes.default.string.isRequired,
|
415
462
|
value: _propTypes.default.string.isRequired
|
416
463
|
}))
|
417
464
|
}),
|
418
465
|
itemsLabel: _propTypes.default.string,
|
466
|
+
metaIconDescription: _propTypes.default.string,
|
467
|
+
metaPanelTitle: _propTypes.default.string,
|
419
468
|
multi: _propTypes.default.bool,
|
469
|
+
navIconDescription: _propTypes.default.string,
|
420
470
|
noResultsDescription: _propTypes.default.string,
|
421
471
|
noResultsTitle: _propTypes.default.string,
|
422
472
|
noSelectionDescription: _propTypes.default.string,
|