@carbon/ibm-products 2.43.1-canary.1 → 2.43.1-canary.3
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/Datagrid/types/index.d.ts +1 -0
- package/es/components/Datagrid/useNestedRows.d.ts +8 -1
- package/es/components/Datagrid/useNestedRows.js +12 -27
- package/es/components/ScrollGradient/ScrollGradient.js +2 -1
- package/lib/components/Datagrid/types/index.d.ts +1 -0
- package/lib/components/Datagrid/useNestedRows.d.ts +8 -1
- package/lib/components/Datagrid/useNestedRows.js +12 -27
- package/lib/components/ScrollGradient/ScrollGradient.js +2 -1
- package/package.json +2 -2
|
@@ -192,6 +192,7 @@ export interface DataGridState<T extends object = any> extends TableCommonProps,
|
|
|
192
192
|
onVirtualScroll?: (evt?: boolean) => void;
|
|
193
193
|
fetchMoreData?: () => void;
|
|
194
194
|
loadMoreThreshold?: number;
|
|
195
|
+
expandedRowIds?: object;
|
|
195
196
|
onRowClick?: (row: any, event: any) => void;
|
|
196
197
|
onSort?: boolean;
|
|
197
198
|
}
|
|
@@ -1,2 +1,9 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright IBM Corp. 2020, 2024
|
|
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 { Hooks } from 'react-table';
|
|
8
|
+
declare const useNestedRows: (hooks: Hooks) => void;
|
|
1
9
|
export default useNestedRows;
|
|
2
|
-
declare function useNestedRows(hooks: any): void;
|
|
@@ -15,48 +15,33 @@ var blockClass = "".concat(pkg.prefix, "--datagrid");
|
|
|
15
15
|
var useNestedRows = function useNestedRows(hooks) {
|
|
16
16
|
useNestedRowExpander(hooks);
|
|
17
17
|
var useInstance = function useInstance(instance) {
|
|
18
|
-
useEffect(function () {
|
|
19
|
-
var rows = instance.rows;
|
|
20
|
-
var defaultExpandedRows = rows.filter(function (row) {
|
|
21
|
-
var _row$original;
|
|
22
|
-
return row === null || row === void 0 || (_row$original = row.original) === null || _row$original === void 0 ? void 0 : _row$original.defaultExpanded;
|
|
23
|
-
});
|
|
24
|
-
if (defaultExpandedRows !== null && defaultExpandedRows !== void 0 && defaultExpandedRows.length) {
|
|
25
|
-
defaultExpandedRows.map(function (defaultExpandedRow) {
|
|
26
|
-
if (!defaultExpandedRow.isExpanded && !defaultExpandedRow.hasExpanded) {
|
|
27
|
-
var _defaultExpandedRow$t;
|
|
28
|
-
defaultExpandedRow === null || defaultExpandedRow === void 0 || (_defaultExpandedRow$t = defaultExpandedRow.toggleRowExpanded) === null || _defaultExpandedRow$t === void 0 || _defaultExpandedRow$t.call(defaultExpandedRow);
|
|
29
|
-
defaultExpandedRow.hasExpanded = true;
|
|
30
|
-
return;
|
|
31
|
-
}
|
|
32
|
-
});
|
|
33
|
-
}
|
|
34
|
-
}, [instance, instance.rows]);
|
|
35
18
|
// This useEffect will expand rows if they exist in the initialState obj
|
|
36
19
|
useEffect(function () {
|
|
37
20
|
var rows = instance.rows,
|
|
38
21
|
initialState = instance.initialState;
|
|
39
|
-
var
|
|
22
|
+
var _ref = initialState,
|
|
23
|
+
expandedRowIds = _ref.expandedRowIds;
|
|
40
24
|
if (expandedRowIds) {
|
|
41
25
|
Object.keys(expandedRowIds).forEach(function (key) {
|
|
42
26
|
var row = rows.filter(function (r) {
|
|
43
27
|
return r.id.toString() === key.toString();
|
|
44
28
|
});
|
|
45
|
-
if (row.length && key.toString() === row[0].id.toString()) {
|
|
46
|
-
|
|
29
|
+
if (row !== null && row !== void 0 && row.length && key.toString() === row[0].id.toString()) {
|
|
30
|
+
var _row$;
|
|
31
|
+
(_row$ = row[0]) === null || _row$ === void 0 || _row$.toggleRowExpanded();
|
|
47
32
|
}
|
|
48
33
|
});
|
|
49
34
|
}
|
|
50
35
|
}, [instance]);
|
|
51
36
|
var marginLeft = 24;
|
|
52
|
-
var getRowProps = function getRowProps(props,
|
|
53
|
-
var row =
|
|
37
|
+
var getRowProps = function getRowProps(props, _ref2) {
|
|
38
|
+
var row = _ref2.row;
|
|
54
39
|
return [props, {
|
|
55
40
|
className: cx(_defineProperty(_defineProperty({}, "".concat(blockClass, "__carbon-nested-row"), row.depth > 0), "".concat(blockClass, "__carbon-row-expanded"), row.isExpanded))
|
|
56
41
|
}];
|
|
57
42
|
};
|
|
58
|
-
var getRowStyles = function getRowStyles(props,
|
|
59
|
-
var row =
|
|
43
|
+
var getRowStyles = function getRowStyles(props, _ref3) {
|
|
44
|
+
var row = _ref3.row;
|
|
60
45
|
return [props, {
|
|
61
46
|
style: {
|
|
62
47
|
paddingLeft: "".concat(row.depth > 1 ? marginLeft * 2 + (row.depth - 1) * (marginLeft + marginLeft / 3) : row.depth === 1 ? marginLeft * 2 : 0, "px")
|
|
@@ -66,9 +51,9 @@ var useNestedRows = function useNestedRows(hooks) {
|
|
|
66
51
|
var getIndentation = function getIndentation(depth) {
|
|
67
52
|
return 32 * depth + 16;
|
|
68
53
|
}; // row indentation padding
|
|
69
|
-
var getCellProps = function getCellProps(props,
|
|
70
|
-
var cell =
|
|
71
|
-
instance =
|
|
54
|
+
var getCellProps = function getCellProps(props, _ref4) {
|
|
55
|
+
var cell = _ref4.cell,
|
|
56
|
+
instance = _ref4.instance;
|
|
72
57
|
// we add a dynamic -ve margin right only if the cell is resized below minimum width i.e 50px, else we set the width based on indentation at different levels
|
|
73
58
|
var isFirstCell = instance.columns.findIndex(function (c) {
|
|
74
59
|
return c.id === cell.column.id;
|
|
@@ -81,7 +81,8 @@ var ScrollGradient = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
|
|
|
81
81
|
}, getDevtoolsProps(componentName)), /*#__PURE__*/React__default.createElement("div", {
|
|
82
82
|
onScroll: scrollHandler,
|
|
83
83
|
ref: setRefs,
|
|
84
|
-
className: cx("".concat(blockClass, "__content"), scrollElementClassName)
|
|
84
|
+
className: cx("".concat(blockClass, "__content"), scrollElementClassName),
|
|
85
|
+
tabIndex: 0
|
|
85
86
|
}, /*#__PURE__*/React__default.createElement("div", {
|
|
86
87
|
ref: contentChildrenContainer,
|
|
87
88
|
className: "".concat(blockClass, "__content-children")
|
|
@@ -192,6 +192,7 @@ export interface DataGridState<T extends object = any> extends TableCommonProps,
|
|
|
192
192
|
onVirtualScroll?: (evt?: boolean) => void;
|
|
193
193
|
fetchMoreData?: () => void;
|
|
194
194
|
loadMoreThreshold?: number;
|
|
195
|
+
expandedRowIds?: object;
|
|
195
196
|
onRowClick?: (row: any, event: any) => void;
|
|
196
197
|
onSort?: boolean;
|
|
197
198
|
}
|
|
@@ -1,2 +1,9 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright IBM Corp. 2020, 2024
|
|
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 { Hooks } from 'react-table';
|
|
8
|
+
declare const useNestedRows: (hooks: Hooks) => void;
|
|
1
9
|
export default useNestedRows;
|
|
2
|
-
declare function useNestedRows(hooks: any): void;
|
|
@@ -23,48 +23,33 @@ var blockClass = "".concat(settings.pkg.prefix, "--datagrid");
|
|
|
23
23
|
var useNestedRows = function useNestedRows(hooks) {
|
|
24
24
|
useNestedRowExpander["default"](hooks);
|
|
25
25
|
var useInstance = function useInstance(instance) {
|
|
26
|
-
React.useEffect(function () {
|
|
27
|
-
var rows = instance.rows;
|
|
28
|
-
var defaultExpandedRows = rows.filter(function (row) {
|
|
29
|
-
var _row$original;
|
|
30
|
-
return row === null || row === void 0 || (_row$original = row.original) === null || _row$original === void 0 ? void 0 : _row$original.defaultExpanded;
|
|
31
|
-
});
|
|
32
|
-
if (defaultExpandedRows !== null && defaultExpandedRows !== void 0 && defaultExpandedRows.length) {
|
|
33
|
-
defaultExpandedRows.map(function (defaultExpandedRow) {
|
|
34
|
-
if (!defaultExpandedRow.isExpanded && !defaultExpandedRow.hasExpanded) {
|
|
35
|
-
var _defaultExpandedRow$t;
|
|
36
|
-
defaultExpandedRow === null || defaultExpandedRow === void 0 || (_defaultExpandedRow$t = defaultExpandedRow.toggleRowExpanded) === null || _defaultExpandedRow$t === void 0 || _defaultExpandedRow$t.call(defaultExpandedRow);
|
|
37
|
-
defaultExpandedRow.hasExpanded = true;
|
|
38
|
-
return;
|
|
39
|
-
}
|
|
40
|
-
});
|
|
41
|
-
}
|
|
42
|
-
}, [instance, instance.rows]);
|
|
43
26
|
// This useEffect will expand rows if they exist in the initialState obj
|
|
44
27
|
React.useEffect(function () {
|
|
45
28
|
var rows = instance.rows,
|
|
46
29
|
initialState = instance.initialState;
|
|
47
|
-
var
|
|
30
|
+
var _ref = initialState,
|
|
31
|
+
expandedRowIds = _ref.expandedRowIds;
|
|
48
32
|
if (expandedRowIds) {
|
|
49
33
|
Object.keys(expandedRowIds).forEach(function (key) {
|
|
50
34
|
var row = rows.filter(function (r) {
|
|
51
35
|
return r.id.toString() === key.toString();
|
|
52
36
|
});
|
|
53
|
-
if (row.length && key.toString() === row[0].id.toString()) {
|
|
54
|
-
|
|
37
|
+
if (row !== null && row !== void 0 && row.length && key.toString() === row[0].id.toString()) {
|
|
38
|
+
var _row$;
|
|
39
|
+
(_row$ = row[0]) === null || _row$ === void 0 || _row$.toggleRowExpanded();
|
|
55
40
|
}
|
|
56
41
|
});
|
|
57
42
|
}
|
|
58
43
|
}, [instance]);
|
|
59
44
|
var marginLeft = 24;
|
|
60
|
-
var getRowProps = function getRowProps(props,
|
|
61
|
-
var row =
|
|
45
|
+
var getRowProps = function getRowProps(props, _ref2) {
|
|
46
|
+
var row = _ref2.row;
|
|
62
47
|
return [props, {
|
|
63
48
|
className: cx__default["default"](_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__carbon-nested-row"), row.depth > 0), "".concat(blockClass, "__carbon-row-expanded"), row.isExpanded))
|
|
64
49
|
}];
|
|
65
50
|
};
|
|
66
|
-
var getRowStyles = function getRowStyles(props,
|
|
67
|
-
var row =
|
|
51
|
+
var getRowStyles = function getRowStyles(props, _ref3) {
|
|
52
|
+
var row = _ref3.row;
|
|
68
53
|
return [props, {
|
|
69
54
|
style: {
|
|
70
55
|
paddingLeft: "".concat(row.depth > 1 ? marginLeft * 2 + (row.depth - 1) * (marginLeft + marginLeft / 3) : row.depth === 1 ? marginLeft * 2 : 0, "px")
|
|
@@ -74,9 +59,9 @@ var useNestedRows = function useNestedRows(hooks) {
|
|
|
74
59
|
var getIndentation = function getIndentation(depth) {
|
|
75
60
|
return 32 * depth + 16;
|
|
76
61
|
}; // row indentation padding
|
|
77
|
-
var getCellProps = function getCellProps(props,
|
|
78
|
-
var cell =
|
|
79
|
-
instance =
|
|
62
|
+
var getCellProps = function getCellProps(props, _ref4) {
|
|
63
|
+
var cell = _ref4.cell,
|
|
64
|
+
instance = _ref4.instance;
|
|
80
65
|
// we add a dynamic -ve margin right only if the cell is resized below minimum width i.e 50px, else we set the width based on indentation at different levels
|
|
81
66
|
var isFirstCell = instance.columns.findIndex(function (c) {
|
|
82
67
|
return c.id === cell.column.id;
|
|
@@ -90,7 +90,8 @@ exports.ScrollGradient = /*#__PURE__*/React__default["default"].forwardRef(funct
|
|
|
90
90
|
}, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
91
91
|
onScroll: scrollHandler,
|
|
92
92
|
ref: setRefs,
|
|
93
|
-
className: cx__default["default"]("".concat(blockClass, "__content"), scrollElementClassName)
|
|
93
|
+
className: cx__default["default"]("".concat(blockClass, "__content"), scrollElementClassName),
|
|
94
|
+
tabIndex: 0
|
|
94
95
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
95
96
|
ref: contentChildrenContainer,
|
|
96
97
|
className: "".concat(blockClass, "__content-children")
|
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.1-canary.
|
|
4
|
+
"version": "2.43.1-canary.3+8929392ba",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "lib/index.js",
|
|
7
7
|
"module": "es/index.js",
|
|
@@ -121,5 +121,5 @@
|
|
|
121
121
|
"react": "^16.8.6 || ^17.0.1 || ^18.2.0",
|
|
122
122
|
"react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
|
|
123
123
|
},
|
|
124
|
-
"gitHead": "
|
|
124
|
+
"gitHead": "8929392ba3157e6621cadf2add03b78913a55318"
|
|
125
125
|
}
|