@carbon/ibm-products 2.43.2-canary.73 → 2.43.2-canary.75
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/es/components/DataSpreadsheet/DataSpreadsheet.d.ts +6 -0
- package/es/components/DataSpreadsheet/DataSpreadsheet.js +77 -38
- package/es/components/DataSpreadsheet/DataSpreadsheetBody.d.ts +4 -0
- package/es/components/DataSpreadsheet/DataSpreadsheetBody.js +10 -1
- package/es/components/DataSpreadsheet/types/index.d.ts +1 -0
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsTearsheet.js +34 -10
- package/lib/components/DataSpreadsheet/DataSpreadsheet.d.ts +6 -0
- package/lib/components/DataSpreadsheet/DataSpreadsheet.js +77 -38
- package/lib/components/DataSpreadsheet/DataSpreadsheetBody.d.ts +4 -0
- package/lib/components/DataSpreadsheet/DataSpreadsheetBody.js +10 -1
- package/lib/components/DataSpreadsheet/types/index.d.ts +1 -0
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsTearsheet.js +34 -10
- package/package.json +2 -2
@@ -44,6 +44,12 @@ interface DataSpreadsheetProps {
|
|
44
44
|
* The event handler that is called when the active cell changes
|
45
45
|
*/
|
46
46
|
onActiveCellChange?: () => void;
|
47
|
+
/**
|
48
|
+
* Callback for columns after being dragged
|
49
|
+
*/
|
50
|
+
onColDrag?: ({ ...args }: {
|
51
|
+
[x: string]: any;
|
52
|
+
}) => void;
|
47
53
|
/**
|
48
54
|
* The setter fn for the data prop
|
49
55
|
*/
|
@@ -32,7 +32,7 @@ import { useSpreadsheetOutsideClick } from './hooks/useSpreadsheetOutsideClick.j
|
|
32
32
|
import { useMoveActiveCell } from './hooks/useMoveActiveCell.js';
|
33
33
|
import { useSpreadsheetEdit } from './hooks/useSpreadsheetEdit.js';
|
34
34
|
|
35
|
-
var _excluded = ["cellSize", "className", "columns", "data", "defaultEmptyRowCount", "onDataUpdate", "id", "onActiveCellChange", "onSelectionAreaChange", "renderRowHeader", "renderRowHeaderDirection", "disableColumnSwapping", "readOnlyTable", "selectAllAriaLabel", "spreadsheetAriaLabel", "theme", "totalVisibleColumns"];
|
35
|
+
var _excluded = ["cellSize", "className", "columns", "data", "defaultEmptyRowCount", "onDataUpdate", "onColDrag", "id", "onActiveCellChange", "onSelectionAreaChange", "renderRowHeader", "renderRowHeaderDirection", "disableColumnSwapping", "readOnlyTable", "selectAllAriaLabel", "spreadsheetAriaLabel", "theme", "totalVisibleColumns"];
|
36
36
|
// The block part of our conventional BEM class names (blockClass__E--M).
|
37
37
|
var blockClass = "".concat(pkg.prefix, "--data-spreadsheet");
|
38
38
|
var componentName = 'DataSpreadsheet';
|
@@ -43,6 +43,7 @@ var defaults = {
|
|
43
43
|
data: Object.freeze([]),
|
44
44
|
defaultEmptyRowCount: 16,
|
45
45
|
onDataUpdate: Object.freeze(function () {}),
|
46
|
+
onColDrag: Object.freeze(function () {}),
|
46
47
|
onActiveCellChange: Object.freeze(function () {}),
|
47
48
|
onSelectionAreaChange: Object.freeze(function () {}),
|
48
49
|
theme: 'light'
|
@@ -62,6 +63,8 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
|
|
62
63
|
defaultEmptyRowCount = _ref$defaultEmptyRowC === void 0 ? defaults.defaultEmptyRowCount : _ref$defaultEmptyRowC,
|
63
64
|
_ref$onDataUpdate = _ref.onDataUpdate,
|
64
65
|
onDataUpdate = _ref$onDataUpdate === void 0 ? defaults.onDataUpdate : _ref$onDataUpdate,
|
66
|
+
_ref$onColDrag = _ref.onColDrag,
|
67
|
+
onColDrag = _ref$onColDrag === void 0 ? defaults.onColDrag : _ref$onColDrag,
|
65
68
|
id = _ref.id,
|
66
69
|
_ref$onActiveCellChan = _ref.onActiveCellChange,
|
67
70
|
onActiveCellChange = _ref$onActiveCellChan === void 0 ? defaults.onActiveCellChange : _ref$onActiveCellChan,
|
@@ -82,66 +85,75 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
|
|
82
85
|
var localRef = useRef();
|
83
86
|
var spreadsheetRef = ref || localRef;
|
84
87
|
var focusedElement = useActiveElement();
|
85
|
-
var _useState = useState(
|
88
|
+
var _useState = useState(columns),
|
86
89
|
_useState2 = _slicedToArray(_useState, 2),
|
87
|
-
|
88
|
-
|
89
|
-
var _useState3 = useState(
|
90
|
+
currentColumns = _useState2[0],
|
91
|
+
setCurrentColumns = _useState2[1];
|
92
|
+
var _useState3 = useState([]),
|
90
93
|
_useState4 = _slicedToArray(_useState3, 2),
|
91
|
-
|
92
|
-
|
93
|
-
var _useState5 = useState(
|
94
|
+
pastColumns = _useState4[0],
|
95
|
+
setPastColumns = _useState4[1];
|
96
|
+
var _useState5 = useState(false),
|
94
97
|
_useState6 = _slicedToArray(_useState5, 2),
|
95
|
-
|
96
|
-
|
97
|
-
var _useState7 = useState(
|
98
|
+
containerHasFocus = _useState6[0],
|
99
|
+
setContainerHasFocus = _useState6[1];
|
100
|
+
var _useState7 = useState(null),
|
98
101
|
_useState8 = _slicedToArray(_useState7, 2),
|
99
|
-
|
100
|
-
|
101
|
-
var _useState9 = useState(
|
102
|
+
activeCellCoordinates = _useState8[0],
|
103
|
+
setActiveCellCoordinates = _useState8[1];
|
104
|
+
var _useState9 = useState([]),
|
102
105
|
_useState10 = _slicedToArray(_useState9, 2),
|
103
|
-
|
104
|
-
|
105
|
-
var _useState11 = useState(
|
106
|
+
selectionAreas = _useState10[0],
|
107
|
+
setSelectionAreas = _useState10[1];
|
108
|
+
var _useState11 = useState([]),
|
106
109
|
_useState12 = _slicedToArray(_useState11, 2),
|
107
|
-
|
108
|
-
|
110
|
+
selectionAreaData = _useState12[0],
|
111
|
+
setSelectionAreaData = _useState12[1];
|
109
112
|
var _useState13 = useState(false),
|
110
113
|
_useState14 = _slicedToArray(_useState13, 2),
|
111
|
-
|
112
|
-
|
114
|
+
clickAndHoldActive = _useState14[0],
|
115
|
+
setClickAndHoldActive = _useState14[1];
|
113
116
|
var _useState15 = useState(''),
|
114
117
|
_useState16 = _slicedToArray(_useState15, 2),
|
115
|
-
|
116
|
-
|
118
|
+
currentMatcher = _useState16[0],
|
119
|
+
setCurrentMatcher = _useState16[1];
|
117
120
|
var _useState17 = useState(false),
|
118
121
|
_useState18 = _slicedToArray(_useState17, 2),
|
119
|
-
|
120
|
-
|
121
|
-
var _useState19 = useState(
|
122
|
+
isEditing = _useState18[0],
|
123
|
+
setIsEditing = _useState18[1];
|
124
|
+
var _useState19 = useState(''),
|
122
125
|
_useState20 = _slicedToArray(_useState19, 2),
|
123
|
-
|
124
|
-
|
125
|
-
var isBlurSpreadsheet = useRef(false);
|
126
|
+
cellEditorValue = _useState20[0],
|
127
|
+
setCellEditorValue = _useState20[1];
|
126
128
|
var _useState21 = useState(false),
|
127
129
|
_useState22 = _slicedToArray(_useState21, 2),
|
128
|
-
|
129
|
-
|
130
|
+
headerCellHoldActive = _useState22[0],
|
131
|
+
setHeaderCellHoldActive = _useState22[1];
|
130
132
|
var _useState23 = useState(false),
|
131
133
|
_useState24 = _slicedToArray(_useState23, 2),
|
132
|
-
|
133
|
-
|
134
|
+
selectedHeaderReorderActive = _useState24[0],
|
135
|
+
setSelectedHeaderReorderActive = _useState24[1];
|
136
|
+
var isBlurSpreadsheet = useRef(false);
|
137
|
+
var _useState25 = useState(false),
|
138
|
+
_useState26 = _slicedToArray(_useState25, 2),
|
139
|
+
isActiveHeaderCellChanged = _useState26[0],
|
140
|
+
setIsActiveHeaderCellChanged = _useState26[1];
|
141
|
+
var _useState27 = useState(false),
|
142
|
+
_useState28 = _slicedToArray(_useState27, 2),
|
143
|
+
activeCellInsideSelectionArea = _useState28[0],
|
144
|
+
setActiveCellInsideSelectionArea = _useState28[1];
|
134
145
|
var previousState = usePreviousValue({
|
135
146
|
activeCellCoordinates: activeCellCoordinates,
|
136
147
|
isEditing: isEditing,
|
137
|
-
cellEditorValue: cellEditorValue
|
148
|
+
cellEditorValue: cellEditorValue,
|
149
|
+
selectedHeaderReorderActive: selectedHeaderReorderActive
|
138
150
|
}) || {};
|
139
151
|
var cellSizeValue = getCellSize(cellSize);
|
140
152
|
var cellEditorRef = useRef();
|
141
|
-
var
|
142
|
-
|
143
|
-
activeCellContent =
|
144
|
-
setActiveCellContent =
|
153
|
+
var _useState29 = useState(),
|
154
|
+
_useState30 = _slicedToArray(_useState29, 2),
|
155
|
+
activeCellContent = _useState30[0],
|
156
|
+
setActiveCellContent = _useState30[1];
|
145
157
|
var activeCellRef = useRef();
|
146
158
|
var cellEditorRulerRef = useRef();
|
147
159
|
var hasCustomRowHeader = typeof renderRowHeader === 'function';
|
@@ -188,6 +200,28 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
|
|
188
200
|
});
|
189
201
|
});
|
190
202
|
}, [cellEditorValue, onDataUpdate]);
|
203
|
+
useEffect(function () {
|
204
|
+
var currentHeaders = [];
|
205
|
+
if (Object.keys(currentColumns).length > 0) {
|
206
|
+
Object.keys(currentColumns).forEach(function (itemIndex) {
|
207
|
+
if (currentColumns[itemIndex].Header) {
|
208
|
+
currentHeaders.push(currentColumns[itemIndex].Header);
|
209
|
+
}
|
210
|
+
});
|
211
|
+
}
|
212
|
+
if (previousState.selectedHeaderReorderActive) {
|
213
|
+
setPastColumns(currentHeaders);
|
214
|
+
}
|
215
|
+
if (!previousState.selectedHeaderReorderActive && pastColumns.length > 0 && !headerCellHoldActive && JSON.stringify(currentHeaders) !== JSON.stringify(pastColumns)) {
|
216
|
+
onColDrag({
|
217
|
+
headers: currentHeaders,
|
218
|
+
data: activeCellContent.props.data
|
219
|
+
});
|
220
|
+
if (currentHeaders.length === 0) {
|
221
|
+
setPastColumns([]);
|
222
|
+
}
|
223
|
+
}
|
224
|
+
}, [previousState === null || previousState === void 0 ? void 0 : previousState.selectedHeaderReorderActive, currentColumns, headerCellHoldActive, columns, activeCellContent, onColDrag, pastColumns]);
|
191
225
|
|
192
226
|
// Removes the active cell element
|
193
227
|
var removeActiveCell = useCallback(function () {
|
@@ -650,6 +684,7 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
|
|
650
684
|
}), /*#__PURE__*/React__default.createElement(DataSpreadsheetBody, {
|
651
685
|
activeCellRef: activeCellRef,
|
652
686
|
activeCellCoordinates: activeCellCoordinates,
|
687
|
+
setCurrentColumns: setCurrentColumns,
|
653
688
|
ref: spreadsheetRef,
|
654
689
|
clickAndHoldActive: clickAndHoldActive,
|
655
690
|
setClickAndHoldActive: setClickAndHoldActive,
|
@@ -783,6 +818,10 @@ DataSpreadsheet.propTypes = {
|
|
783
818
|
* The event handler that is called when the active cell changes
|
784
819
|
*/
|
785
820
|
onActiveCellChange: PropTypes.func,
|
821
|
+
/**
|
822
|
+
* Callback for when columns are dropped after dragged
|
823
|
+
*/
|
824
|
+
onColDrag: PropTypes.func,
|
786
825
|
/**
|
787
826
|
* The setter fn for the data prop
|
788
827
|
*/
|
@@ -48,6 +48,10 @@ interface DataSpreadsheetBodyProps {
|
|
48
48
|
* The spreadsheet id
|
49
49
|
*/
|
50
50
|
id?: number | string;
|
51
|
+
/**
|
52
|
+
* Set current columns after drag drop
|
53
|
+
*/
|
54
|
+
setCurrentColumns?: Dispatch<SetStateAction<object[]>>;
|
51
55
|
/**
|
52
56
|
* The event handler that is called when the active cell changes
|
53
57
|
*/
|
@@ -33,6 +33,7 @@ var DataSpreadsheetBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
33
33
|
defaultEmptyRowCount = _ref.defaultEmptyRowCount,
|
34
34
|
getTableBodyProps = _ref.getTableBodyProps,
|
35
35
|
headerGroups = _ref.headerGroups,
|
36
|
+
setCurrentColumns = _ref.setCurrentColumns,
|
36
37
|
id = _ref.id,
|
37
38
|
onDataUpdate = _ref.onDataUpdate,
|
38
39
|
renderRowHeader = _ref.renderRowHeader,
|
@@ -309,7 +310,11 @@ var DataSpreadsheetBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
309
310
|
};
|
310
311
|
buildEmptyRows();
|
311
312
|
}
|
312
|
-
|
313
|
+
if (headerGroups !== null && headerGroups !== void 0 && headerGroups[0] && typeof setCurrentColumns === 'function') {
|
314
|
+
var headers = headerGroups[0].headers;
|
315
|
+
setCurrentColumns(headers);
|
316
|
+
}
|
317
|
+
}, [rows, headerGroups, defaultEmptyRowCount, onDataUpdate, setCurrentColumns]);
|
313
318
|
var RenderEmptyRows = function RenderEmptyRows() {
|
314
319
|
return _div || (_div = /*#__PURE__*/React__default.createElement("div", null));
|
315
320
|
};
|
@@ -513,6 +518,10 @@ DataSpreadsheetBody.propTypes = {
|
|
513
518
|
* Setter fn for containerHasFocus state value
|
514
519
|
*/
|
515
520
|
setContainerHasFocus: PropTypes.func,
|
521
|
+
/**
|
522
|
+
* Set current columns after drag drop
|
523
|
+
*/
|
524
|
+
setCurrentColumns: PropTypes.func,
|
516
525
|
/**
|
517
526
|
* Setter fn for currentMatcher state value
|
518
527
|
*/
|
package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsTearsheet.js
CHANGED
@@ -73,15 +73,39 @@ var CustomizeColumnsTearsheet = function CustomizeColumnsTearsheet(_ref) {
|
|
73
73
|
onSaveColumnPrefs(updatedColumns);
|
74
74
|
};
|
75
75
|
var onCheckboxCheck = function onCheckboxCheck(col, value) {
|
76
|
+
// Update the visibility of columns based on a single column or an array of columns
|
76
77
|
var changedDefinitions = columnObjects.map(function (definition) {
|
77
|
-
|
78
|
-
|
78
|
+
// If select all is clicked
|
79
|
+
if (Array.isArray(col)) {
|
80
|
+
return col.includes(definition) && definition.canFilter && !definition.disabled ? _objectSpread2(_objectSpread2({}, definition), {}, {
|
79
81
|
isVisible: value
|
80
|
-
});
|
82
|
+
}) : definition;
|
81
83
|
}
|
82
|
-
return
|
84
|
+
// If a single checkbox is clicked which is written below as a default return
|
85
|
+
return col.id === definition.id ? _objectSpread2(_objectSpread2({}, definition), {}, {
|
86
|
+
isVisible: value
|
87
|
+
}) : definition;
|
83
88
|
});
|
84
|
-
|
89
|
+
|
90
|
+
// Count the number of visible columns excluding certain IDs after 1st mutation
|
91
|
+
var selectedColumnsCount = changedDefinitions.filter(function (definition) {
|
92
|
+
return definition.isVisible && !['datagridSelection', 'actions'].includes(definition.id);
|
93
|
+
}).length;
|
94
|
+
|
95
|
+
// Ensure special columns are visible if any other columns are visible
|
96
|
+
var finalDefinitions = changedDefinitions.map(function (definition) {
|
97
|
+
// If at least 1 column is visible after mutation, we add selection column and actions column (coming from various extensions)
|
98
|
+
if (selectedColumnsCount > 0) {
|
99
|
+
return ['datagridSelection', 'actions'].includes(definition.id) ? _objectSpread2(_objectSpread2({}, definition), {}, {
|
100
|
+
isVisible: true
|
101
|
+
}) : definition;
|
102
|
+
}
|
103
|
+
// Else we remove selection column and actions column
|
104
|
+
return ['datagridSelection', 'actions'].includes(definition.id) ? _objectSpread2(_objectSpread2({}, definition), {}, {
|
105
|
+
isVisible: false
|
106
|
+
}) : definition;
|
107
|
+
});
|
108
|
+
setColumnObjects(finalDefinitions);
|
85
109
|
setDirty();
|
86
110
|
};
|
87
111
|
var setDirty = function setDirty() {
|
@@ -96,14 +120,14 @@ var CustomizeColumnsTearsheet = function CustomizeColumnsTearsheet(_ref) {
|
|
96
120
|
}, [columnObjects]);
|
97
121
|
var string = searchText.trim().toLowerCase();
|
98
122
|
useEffect(function () {
|
99
|
-
var notFilterableCount = columnObjects.filter(function (col) {
|
100
|
-
return !col.canFilter;
|
101
|
-
}).length;
|
102
123
|
var actionCount = columnObjects.filter(function (col) {
|
103
124
|
return col.id === 'actions';
|
104
125
|
}).length;
|
105
|
-
|
106
|
-
|
126
|
+
var datagridSelectionCount = columnObjects.filter(function (col) {
|
127
|
+
return col.id === 'datagridSelection';
|
128
|
+
}).length;
|
129
|
+
setVisibleColumnsCount(getVisibleColumnsCount() - actionCount - datagridSelectionCount < 0 ? 0 : getVisibleColumnsCount() - actionCount - datagridSelectionCount);
|
130
|
+
setTotalColumns(columnObjects.length - actionCount - datagridSelectionCount);
|
107
131
|
}, [getVisibleColumnsCount, columnObjects]);
|
108
132
|
return /*#__PURE__*/React__default.createElement(TearsheetNarrow, {
|
109
133
|
className: "".concat(blockClass, "__customize-columns-tearsheet"),
|
@@ -44,6 +44,12 @@ interface DataSpreadsheetProps {
|
|
44
44
|
* The event handler that is called when the active cell changes
|
45
45
|
*/
|
46
46
|
onActiveCellChange?: () => void;
|
47
|
+
/**
|
48
|
+
* Callback for columns after being dragged
|
49
|
+
*/
|
50
|
+
onColDrag?: ({ ...args }: {
|
51
|
+
[x: string]: any;
|
52
|
+
}) => void;
|
47
53
|
/**
|
48
54
|
* The setter fn for the data prop
|
49
55
|
*/
|
@@ -41,7 +41,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
41
41
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
42
42
|
var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
|
43
43
|
|
44
|
-
var _excluded = ["cellSize", "className", "columns", "data", "defaultEmptyRowCount", "onDataUpdate", "id", "onActiveCellChange", "onSelectionAreaChange", "renderRowHeader", "renderRowHeaderDirection", "disableColumnSwapping", "readOnlyTable", "selectAllAriaLabel", "spreadsheetAriaLabel", "theme", "totalVisibleColumns"];
|
44
|
+
var _excluded = ["cellSize", "className", "columns", "data", "defaultEmptyRowCount", "onDataUpdate", "onColDrag", "id", "onActiveCellChange", "onSelectionAreaChange", "renderRowHeader", "renderRowHeaderDirection", "disableColumnSwapping", "readOnlyTable", "selectAllAriaLabel", "spreadsheetAriaLabel", "theme", "totalVisibleColumns"];
|
45
45
|
// The block part of our conventional BEM class names (blockClass__E--M).
|
46
46
|
var blockClass = "".concat(settings.pkg.prefix, "--data-spreadsheet");
|
47
47
|
var componentName = 'DataSpreadsheet';
|
@@ -52,6 +52,7 @@ var defaults = {
|
|
52
52
|
data: Object.freeze([]),
|
53
53
|
defaultEmptyRowCount: 16,
|
54
54
|
onDataUpdate: Object.freeze(function () {}),
|
55
|
+
onColDrag: Object.freeze(function () {}),
|
55
56
|
onActiveCellChange: Object.freeze(function () {}),
|
56
57
|
onSelectionAreaChange: Object.freeze(function () {}),
|
57
58
|
theme: 'light'
|
@@ -71,6 +72,8 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
|
|
71
72
|
defaultEmptyRowCount = _ref$defaultEmptyRowC === void 0 ? defaults.defaultEmptyRowCount : _ref$defaultEmptyRowC,
|
72
73
|
_ref$onDataUpdate = _ref.onDataUpdate,
|
73
74
|
onDataUpdate = _ref$onDataUpdate === void 0 ? defaults.onDataUpdate : _ref$onDataUpdate,
|
75
|
+
_ref$onColDrag = _ref.onColDrag,
|
76
|
+
onColDrag = _ref$onColDrag === void 0 ? defaults.onColDrag : _ref$onColDrag,
|
74
77
|
id = _ref.id,
|
75
78
|
_ref$onActiveCellChan = _ref.onActiveCellChange,
|
76
79
|
onActiveCellChange = _ref$onActiveCellChan === void 0 ? defaults.onActiveCellChange : _ref$onActiveCellChan,
|
@@ -91,66 +94,75 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
|
|
91
94
|
var localRef = React.useRef();
|
92
95
|
var spreadsheetRef = ref || localRef;
|
93
96
|
var focusedElement = useActiveElement.useActiveElement();
|
94
|
-
var _useState = React.useState(
|
97
|
+
var _useState = React.useState(columns),
|
95
98
|
_useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
|
96
|
-
|
97
|
-
|
98
|
-
var _useState3 = React.useState(
|
99
|
+
currentColumns = _useState2[0],
|
100
|
+
setCurrentColumns = _useState2[1];
|
101
|
+
var _useState3 = React.useState([]),
|
99
102
|
_useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
|
100
|
-
|
101
|
-
|
102
|
-
var _useState5 = React.useState(
|
103
|
+
pastColumns = _useState4[0],
|
104
|
+
setPastColumns = _useState4[1];
|
105
|
+
var _useState5 = React.useState(false),
|
103
106
|
_useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
|
104
|
-
|
105
|
-
|
106
|
-
var _useState7 = React.useState(
|
107
|
+
containerHasFocus = _useState6[0],
|
108
|
+
setContainerHasFocus = _useState6[1];
|
109
|
+
var _useState7 = React.useState(null),
|
107
110
|
_useState8 = _rollupPluginBabelHelpers.slicedToArray(_useState7, 2),
|
108
|
-
|
109
|
-
|
110
|
-
var _useState9 = React.useState(
|
111
|
+
activeCellCoordinates = _useState8[0],
|
112
|
+
setActiveCellCoordinates = _useState8[1];
|
113
|
+
var _useState9 = React.useState([]),
|
111
114
|
_useState10 = _rollupPluginBabelHelpers.slicedToArray(_useState9, 2),
|
112
|
-
|
113
|
-
|
114
|
-
var _useState11 = React.useState(
|
115
|
+
selectionAreas = _useState10[0],
|
116
|
+
setSelectionAreas = _useState10[1];
|
117
|
+
var _useState11 = React.useState([]),
|
115
118
|
_useState12 = _rollupPluginBabelHelpers.slicedToArray(_useState11, 2),
|
116
|
-
|
117
|
-
|
119
|
+
selectionAreaData = _useState12[0],
|
120
|
+
setSelectionAreaData = _useState12[1];
|
118
121
|
var _useState13 = React.useState(false),
|
119
122
|
_useState14 = _rollupPluginBabelHelpers.slicedToArray(_useState13, 2),
|
120
|
-
|
121
|
-
|
123
|
+
clickAndHoldActive = _useState14[0],
|
124
|
+
setClickAndHoldActive = _useState14[1];
|
122
125
|
var _useState15 = React.useState(''),
|
123
126
|
_useState16 = _rollupPluginBabelHelpers.slicedToArray(_useState15, 2),
|
124
|
-
|
125
|
-
|
127
|
+
currentMatcher = _useState16[0],
|
128
|
+
setCurrentMatcher = _useState16[1];
|
126
129
|
var _useState17 = React.useState(false),
|
127
130
|
_useState18 = _rollupPluginBabelHelpers.slicedToArray(_useState17, 2),
|
128
|
-
|
129
|
-
|
130
|
-
var _useState19 = React.useState(
|
131
|
+
isEditing = _useState18[0],
|
132
|
+
setIsEditing = _useState18[1];
|
133
|
+
var _useState19 = React.useState(''),
|
131
134
|
_useState20 = _rollupPluginBabelHelpers.slicedToArray(_useState19, 2),
|
132
|
-
|
133
|
-
|
134
|
-
var isBlurSpreadsheet = React.useRef(false);
|
135
|
+
cellEditorValue = _useState20[0],
|
136
|
+
setCellEditorValue = _useState20[1];
|
135
137
|
var _useState21 = React.useState(false),
|
136
138
|
_useState22 = _rollupPluginBabelHelpers.slicedToArray(_useState21, 2),
|
137
|
-
|
138
|
-
|
139
|
+
headerCellHoldActive = _useState22[0],
|
140
|
+
setHeaderCellHoldActive = _useState22[1];
|
139
141
|
var _useState23 = React.useState(false),
|
140
142
|
_useState24 = _rollupPluginBabelHelpers.slicedToArray(_useState23, 2),
|
141
|
-
|
142
|
-
|
143
|
+
selectedHeaderReorderActive = _useState24[0],
|
144
|
+
setSelectedHeaderReorderActive = _useState24[1];
|
145
|
+
var isBlurSpreadsheet = React.useRef(false);
|
146
|
+
var _useState25 = React.useState(false),
|
147
|
+
_useState26 = _rollupPluginBabelHelpers.slicedToArray(_useState25, 2),
|
148
|
+
isActiveHeaderCellChanged = _useState26[0],
|
149
|
+
setIsActiveHeaderCellChanged = _useState26[1];
|
150
|
+
var _useState27 = React.useState(false),
|
151
|
+
_useState28 = _rollupPluginBabelHelpers.slicedToArray(_useState27, 2),
|
152
|
+
activeCellInsideSelectionArea = _useState28[0],
|
153
|
+
setActiveCellInsideSelectionArea = _useState28[1];
|
143
154
|
var previousState = usePreviousValue.usePreviousValue({
|
144
155
|
activeCellCoordinates: activeCellCoordinates,
|
145
156
|
isEditing: isEditing,
|
146
|
-
cellEditorValue: cellEditorValue
|
157
|
+
cellEditorValue: cellEditorValue,
|
158
|
+
selectedHeaderReorderActive: selectedHeaderReorderActive
|
147
159
|
}) || {};
|
148
160
|
var cellSizeValue = getCellSize.getCellSize(cellSize);
|
149
161
|
var cellEditorRef = React.useRef();
|
150
|
-
var
|
151
|
-
|
152
|
-
activeCellContent =
|
153
|
-
setActiveCellContent =
|
162
|
+
var _useState29 = React.useState(),
|
163
|
+
_useState30 = _rollupPluginBabelHelpers.slicedToArray(_useState29, 2),
|
164
|
+
activeCellContent = _useState30[0],
|
165
|
+
setActiveCellContent = _useState30[1];
|
154
166
|
var activeCellRef = React.useRef();
|
155
167
|
var cellEditorRulerRef = React.useRef();
|
156
168
|
var hasCustomRowHeader = typeof renderRowHeader === 'function';
|
@@ -197,6 +209,28 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
|
|
197
209
|
});
|
198
210
|
});
|
199
211
|
}, [cellEditorValue, onDataUpdate]);
|
212
|
+
React.useEffect(function () {
|
213
|
+
var currentHeaders = [];
|
214
|
+
if (Object.keys(currentColumns).length > 0) {
|
215
|
+
Object.keys(currentColumns).forEach(function (itemIndex) {
|
216
|
+
if (currentColumns[itemIndex].Header) {
|
217
|
+
currentHeaders.push(currentColumns[itemIndex].Header);
|
218
|
+
}
|
219
|
+
});
|
220
|
+
}
|
221
|
+
if (previousState.selectedHeaderReorderActive) {
|
222
|
+
setPastColumns(currentHeaders);
|
223
|
+
}
|
224
|
+
if (!previousState.selectedHeaderReorderActive && pastColumns.length > 0 && !headerCellHoldActive && JSON.stringify(currentHeaders) !== JSON.stringify(pastColumns)) {
|
225
|
+
onColDrag({
|
226
|
+
headers: currentHeaders,
|
227
|
+
data: activeCellContent.props.data
|
228
|
+
});
|
229
|
+
if (currentHeaders.length === 0) {
|
230
|
+
setPastColumns([]);
|
231
|
+
}
|
232
|
+
}
|
233
|
+
}, [previousState === null || previousState === void 0 ? void 0 : previousState.selectedHeaderReorderActive, currentColumns, headerCellHoldActive, columns, activeCellContent, onColDrag, pastColumns]);
|
200
234
|
|
201
235
|
// Removes the active cell element
|
202
236
|
var removeActiveCell = React.useCallback(function () {
|
@@ -659,6 +693,7 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
|
|
659
693
|
}), /*#__PURE__*/React__default["default"].createElement(DataSpreadsheetBody.DataSpreadsheetBody, {
|
660
694
|
activeCellRef: activeCellRef,
|
661
695
|
activeCellCoordinates: activeCellCoordinates,
|
696
|
+
setCurrentColumns: setCurrentColumns,
|
662
697
|
ref: spreadsheetRef,
|
663
698
|
clickAndHoldActive: clickAndHoldActive,
|
664
699
|
setClickAndHoldActive: setClickAndHoldActive,
|
@@ -792,6 +827,10 @@ exports.DataSpreadsheet.propTypes = {
|
|
792
827
|
* The event handler that is called when the active cell changes
|
793
828
|
*/
|
794
829
|
onActiveCellChange: index["default"].func,
|
830
|
+
/**
|
831
|
+
* Callback for when columns are dropped after dragged
|
832
|
+
*/
|
833
|
+
onColDrag: index["default"].func,
|
795
834
|
/**
|
796
835
|
* The setter fn for the data prop
|
797
836
|
*/
|
@@ -48,6 +48,10 @@ interface DataSpreadsheetBodyProps {
|
|
48
48
|
* The spreadsheet id
|
49
49
|
*/
|
50
50
|
id?: number | string;
|
51
|
+
/**
|
52
|
+
* Set current columns after drag drop
|
53
|
+
*/
|
54
|
+
setCurrentColumns?: Dispatch<SetStateAction<object[]>>;
|
51
55
|
/**
|
52
56
|
* The event handler that is called when the active cell changes
|
53
57
|
*/
|
@@ -42,6 +42,7 @@ var DataSpreadsheetBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
42
42
|
defaultEmptyRowCount = _ref.defaultEmptyRowCount,
|
43
43
|
getTableBodyProps = _ref.getTableBodyProps,
|
44
44
|
headerGroups = _ref.headerGroups,
|
45
|
+
setCurrentColumns = _ref.setCurrentColumns,
|
45
46
|
id = _ref.id,
|
46
47
|
onDataUpdate = _ref.onDataUpdate,
|
47
48
|
renderRowHeader = _ref.renderRowHeader,
|
@@ -318,7 +319,11 @@ var DataSpreadsheetBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
318
319
|
};
|
319
320
|
buildEmptyRows();
|
320
321
|
}
|
321
|
-
|
322
|
+
if (headerGroups !== null && headerGroups !== void 0 && headerGroups[0] && typeof setCurrentColumns === 'function') {
|
323
|
+
var headers = headerGroups[0].headers;
|
324
|
+
setCurrentColumns(headers);
|
325
|
+
}
|
326
|
+
}, [rows, headerGroups, defaultEmptyRowCount, onDataUpdate, setCurrentColumns]);
|
322
327
|
var RenderEmptyRows = function RenderEmptyRows() {
|
323
328
|
return _div || (_div = /*#__PURE__*/React__default["default"].createElement("div", null));
|
324
329
|
};
|
@@ -522,6 +527,10 @@ DataSpreadsheetBody.propTypes = {
|
|
522
527
|
* Setter fn for containerHasFocus state value
|
523
528
|
*/
|
524
529
|
setContainerHasFocus: index["default"].func,
|
530
|
+
/**
|
531
|
+
* Set current columns after drag drop
|
532
|
+
*/
|
533
|
+
setCurrentColumns: index["default"].func,
|
525
534
|
/**
|
526
535
|
* Setter fn for currentMatcher state value
|
527
536
|
*/
|
package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsTearsheet.js
CHANGED
@@ -81,15 +81,39 @@ var CustomizeColumnsTearsheet = function CustomizeColumnsTearsheet(_ref) {
|
|
81
81
|
onSaveColumnPrefs(updatedColumns);
|
82
82
|
};
|
83
83
|
var onCheckboxCheck = function onCheckboxCheck(col, value) {
|
84
|
+
// Update the visibility of columns based on a single column or an array of columns
|
84
85
|
var changedDefinitions = columnObjects.map(function (definition) {
|
85
|
-
|
86
|
-
|
86
|
+
// If select all is clicked
|
87
|
+
if (Array.isArray(col)) {
|
88
|
+
return col.includes(definition) && definition.canFilter && !definition.disabled ? _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, definition), {}, {
|
87
89
|
isVisible: value
|
88
|
-
});
|
90
|
+
}) : definition;
|
89
91
|
}
|
90
|
-
return
|
92
|
+
// If a single checkbox is clicked which is written below as a default return
|
93
|
+
return col.id === definition.id ? _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, definition), {}, {
|
94
|
+
isVisible: value
|
95
|
+
}) : definition;
|
91
96
|
});
|
92
|
-
|
97
|
+
|
98
|
+
// Count the number of visible columns excluding certain IDs after 1st mutation
|
99
|
+
var selectedColumnsCount = changedDefinitions.filter(function (definition) {
|
100
|
+
return definition.isVisible && !['datagridSelection', 'actions'].includes(definition.id);
|
101
|
+
}).length;
|
102
|
+
|
103
|
+
// Ensure special columns are visible if any other columns are visible
|
104
|
+
var finalDefinitions = changedDefinitions.map(function (definition) {
|
105
|
+
// If at least 1 column is visible after mutation, we add selection column and actions column (coming from various extensions)
|
106
|
+
if (selectedColumnsCount > 0) {
|
107
|
+
return ['datagridSelection', 'actions'].includes(definition.id) ? _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, definition), {}, {
|
108
|
+
isVisible: true
|
109
|
+
}) : definition;
|
110
|
+
}
|
111
|
+
// Else we remove selection column and actions column
|
112
|
+
return ['datagridSelection', 'actions'].includes(definition.id) ? _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, definition), {}, {
|
113
|
+
isVisible: false
|
114
|
+
}) : definition;
|
115
|
+
});
|
116
|
+
setColumnObjects(finalDefinitions);
|
93
117
|
setDirty();
|
94
118
|
};
|
95
119
|
var setDirty = function setDirty() {
|
@@ -104,14 +128,14 @@ var CustomizeColumnsTearsheet = function CustomizeColumnsTearsheet(_ref) {
|
|
104
128
|
}, [columnObjects]);
|
105
129
|
var string = searchText.trim().toLowerCase();
|
106
130
|
React.useEffect(function () {
|
107
|
-
var notFilterableCount = columnObjects.filter(function (col) {
|
108
|
-
return !col.canFilter;
|
109
|
-
}).length;
|
110
131
|
var actionCount = columnObjects.filter(function (col) {
|
111
132
|
return col.id === 'actions';
|
112
133
|
}).length;
|
113
|
-
|
114
|
-
|
134
|
+
var datagridSelectionCount = columnObjects.filter(function (col) {
|
135
|
+
return col.id === 'datagridSelection';
|
136
|
+
}).length;
|
137
|
+
setVisibleColumnsCount(getVisibleColumnsCount() - actionCount - datagridSelectionCount < 0 ? 0 : getVisibleColumnsCount() - actionCount - datagridSelectionCount);
|
138
|
+
setTotalColumns(columnObjects.length - actionCount - datagridSelectionCount);
|
115
139
|
}, [getVisibleColumnsCount, columnObjects]);
|
116
140
|
return /*#__PURE__*/React__default["default"].createElement(TearsheetNarrow.TearsheetNarrow, {
|
117
141
|
className: "".concat(blockClass, "__customize-columns-tearsheet"),
|
package/package.json
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
{
|
2
2
|
"name": "@carbon/ibm-products",
|
3
3
|
"description": "Carbon for IBM Products",
|
4
|
-
"version": "2.43.2-canary.
|
4
|
+
"version": "2.43.2-canary.75+566a33062",
|
5
5
|
"license": "Apache-2.0",
|
6
6
|
"main": "lib/index.js",
|
7
7
|
"module": "es/index.js",
|
@@ -120,5 +120,5 @@
|
|
120
120
|
"react": "^16.8.6 || ^17.0.1 || ^18.2.0",
|
121
121
|
"react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
|
122
122
|
},
|
123
|
-
"gitHead": "
|
123
|
+
"gitHead": "566a33062126c93ee66c72b3d89454569e46ae9a"
|
124
124
|
}
|