@carbon/ibm-products 2.15.1 → 2.15.2
Sign up to get free protection for your applications and to get access to all the features.
- package/css/index-full-carbon.css +22 -8
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +1 -1
- package/css/index-full-carbon.min.css.map +1 -1
- package/css/index-without-carbon.css +22 -8
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +1 -1
- package/css/index-without-carbon.min.css.map +1 -1
- package/css/index.css +22 -8
- package/css/index.css.map +1 -1
- package/css/index.min.css +1 -1
- package/css/index.min.css.map +1 -1
- package/es/components/Datagrid/Datagrid/DatagridExpandedRow.js +1 -1
- package/es/components/Datagrid/Datagrid/DatagridHeaderRow.js +4 -3
- package/es/components/Datagrid/Datagrid/DatagridRefBody.js +4 -1
- package/es/components/Datagrid/Datagrid/DatagridRow.js +5 -2
- package/es/components/Datagrid/Datagrid/DatagridSimpleBody.js +4 -1
- package/es/components/Datagrid/Datagrid/DatagridVirtualBody.js +14 -18
- package/es/components/Datagrid/Datagrid.docs-page.js +7 -1
- package/es/components/Datagrid/useActionsColumn.js +7 -5
- package/es/components/Datagrid/useDatagrid.js +8 -0
- package/es/components/Datagrid/useInfiniteScroll.js +10 -9
- package/es/components/Datagrid/useParentDimensions.js +6 -6
- package/es/components/Datagrid/useResizeTable.js +7 -7
- package/es/components/Datagrid/useSkeletonRows.js +6 -6
- package/es/components/Datagrid/useStickyColumn.js +13 -6
- package/lib/components/Datagrid/Datagrid/DatagridExpandedRow.js +1 -1
- package/lib/components/Datagrid/Datagrid/DatagridHeaderRow.js +4 -3
- package/lib/components/Datagrid/Datagrid/DatagridRefBody.js +4 -1
- package/lib/components/Datagrid/Datagrid/DatagridRow.js +5 -2
- package/lib/components/Datagrid/Datagrid/DatagridSimpleBody.js +4 -1
- package/lib/components/Datagrid/Datagrid/DatagridVirtualBody.js +13 -18
- package/lib/components/Datagrid/Datagrid.docs-page.js +7 -1
- package/lib/components/Datagrid/useActionsColumn.js +7 -5
- package/lib/components/Datagrid/useDatagrid.js +8 -0
- package/lib/components/Datagrid/useInfiniteScroll.js +9 -9
- package/lib/components/Datagrid/useParentDimensions.js +5 -6
- package/lib/components/Datagrid/useResizeTable.js +6 -7
- package/lib/components/Datagrid/useSkeletonRows.js +6 -6
- package/lib/components/Datagrid/useStickyColumn.js +13 -6
- package/package.json +2 -2
- package/scss/components/Datagrid/styles/_datagrid.scss +26 -5
@@ -41,12 +41,13 @@ var useActionsColumn = function useActionsColumn(hooks) {
|
|
41
41
|
column = cell.column;
|
42
42
|
if (column.isAction) {
|
43
43
|
var _cx3;
|
44
|
+
var isColumnSticky = !!column.sticky;
|
44
45
|
return [props, {
|
45
46
|
children: /*#__PURE__*/React.createElement("div", {
|
46
47
|
className: "".concat(blockClass, "__actions-column-contents")
|
47
48
|
}, isFetching && /*#__PURE__*/React.createElement(IconSkeleton, {
|
48
49
|
className: "".concat(blockClass, "__actions-column-loading")
|
49
|
-
}), !isFetching && rowActions.length <= 2 && /*#__PURE__*/React.createElement("div", {
|
50
|
+
}), !isFetching && rowActions.length <= 2 && !isColumnSticky && /*#__PURE__*/React.createElement("div", {
|
50
51
|
className: "".concat(blockClass, "_actions-column"),
|
51
52
|
style: {
|
52
53
|
display: 'flex'
|
@@ -81,7 +82,7 @@ var useActionsColumn = function useActionsColumn(hooks) {
|
|
81
82
|
_onClick(id, row, e);
|
82
83
|
}
|
83
84
|
})));
|
84
|
-
})), !isFetching && rowActions.length > 2 && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(OverflowMenu, {
|
85
|
+
})), !isFetching && (rowActions.length > 2 || isColumnSticky) && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(OverflowMenu, {
|
85
86
|
align: "left",
|
86
87
|
size: "sm",
|
87
88
|
flipped: true,
|
@@ -111,9 +112,9 @@ var useActionsColumn = function useActionsColumn(hooks) {
|
|
111
112
|
key: id
|
112
113
|
}));
|
113
114
|
})))),
|
114
|
-
className: cx((_cx3 = {}, _defineProperty(_cx3, "".concat(blockClass, "__actions-column-cell"), true), _defineProperty(_cx3, "".concat(blockClass, "__cell"), true), _cx3)),
|
115
|
+
className: cx((_cx3 = {}, _defineProperty(_cx3, "".concat(blockClass, "__actions-column-cell"), true), _defineProperty(_cx3, "".concat(blockClass, "__cell"), true), _defineProperty(_cx3, "".concat(blockClass, "__actions-column-cell-non-sticky"), !isColumnSticky), _cx3)),
|
115
116
|
style: {
|
116
|
-
width: rowActions.length > 2 ? 48 : 96
|
117
|
+
width: rowActions.length > 2 || isColumnSticky ? 48 : 96
|
117
118
|
}
|
118
119
|
}];
|
119
120
|
}
|
@@ -128,9 +129,10 @@ var useActionsColumn = function useActionsColumn(hooks) {
|
|
128
129
|
var addHeaderWidth = function addHeaderWidth(props, cellData) {
|
129
130
|
var column = cellData.column;
|
130
131
|
if (column.isAction) {
|
132
|
+
var isColumnSticky = !!column.sticky;
|
131
133
|
return [props, {
|
132
134
|
style: _objectSpread(_objectSpread({}, props.style), {}, {
|
133
|
-
width: rowActions.length > 2 ? 48 : 96 // set header width based on action length
|
135
|
+
width: rowActions.length > 2 || isColumnSticky ? 48 : 96 // set header width based on action length
|
134
136
|
})
|
135
137
|
}];
|
136
138
|
}
|
@@ -22,6 +22,14 @@ import useFloatingScroll from './useFloatingScroll';
|
|
22
22
|
import { stateReducer } from './Datagrid/addons/stateReducer';
|
23
23
|
var useDatagrid = function useDatagrid(params) {
|
24
24
|
var defaultPlugins = [useFlexLayout, useHeaderRow, useSkeletonRows, useResizeColumns, useRowRenderer, useDefaultStringRenderer, useRowSize, useFilters, useGlobalFilter, useSortBy, useExpanded];
|
25
|
+
|
26
|
+
// Disable resizing
|
27
|
+
if (params.disableResizing) {
|
28
|
+
var resizeIndex = defaultPlugins.findIndex(function (p) {
|
29
|
+
return p.pluginName === 'useResizeColumns';
|
30
|
+
});
|
31
|
+
defaultPlugins.splice(resizeIndex, 1);
|
32
|
+
}
|
25
33
|
var defaultEndPlugins = [usePagination, useRowSelect, useFlexResize, useFloatingScroll];
|
26
34
|
var clientEndPlugins = params.endPlugins || [];
|
27
35
|
var tableId = useMemo(function () {
|
@@ -1,10 +1,10 @@
|
|
1
|
-
|
2
|
-
*
|
3
|
-
*
|
4
|
-
*
|
5
|
-
*
|
6
|
-
* restricted by GSA ADP Schedule Contract with IBM Corp.
|
1
|
+
/**
|
2
|
+
* Copyright IBM Corp. 2020, 2023
|
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.
|
7
6
|
*/
|
7
|
+
|
8
8
|
import { useCallback, useEffect } from 'react';
|
9
9
|
import debounce from 'lodash/debounce';
|
10
10
|
import useParentDimensions from './useParentDimensions';
|
@@ -21,10 +21,11 @@ var useInfiniteScroll = function useInfiniteScroll(hooks) {
|
|
21
21
|
tableHeight = instance.tableHeight,
|
22
22
|
innerListRef = instance.innerListRef,
|
23
23
|
fetchMoreData = instance.fetchMoreData,
|
24
|
-
tableId = instance.tableId
|
24
|
+
tableId = instance.tableId,
|
25
|
+
loadMoreThreshold = instance.loadMoreThreshold;
|
25
26
|
var tableElement = document.querySelector("#".concat(tableId));
|
26
27
|
var totalTableHeight = tableHeight || (tableElement === null || tableElement === void 0 ? void 0 : tableElement.clientHeight);
|
27
|
-
var
|
28
|
+
var loadMoreThresholdValue = typeof loadMoreThreshold === 'number' ? loadMoreThreshold : 200;
|
28
29
|
var emptyFetchData = function emptyFetchData() {};
|
29
30
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
30
31
|
var fetchMore = useCallback(debounce(fetchMoreData || emptyFetchData, 3000, {
|
@@ -35,7 +36,7 @@ var useInfiniteScroll = function useInfiniteScroll(hooks) {
|
|
35
36
|
var scrollDirection = _ref.scrollDirection,
|
36
37
|
scrollOffset = _ref.scrollOffset;
|
37
38
|
if (innerListRef && innerListRef.current) {
|
38
|
-
if (!isFetching && scrollDirection === 'forward' && scrollOffset + totalTableHeight >= innerListRef.current.clientHeight -
|
39
|
+
if (!isFetching && scrollDirection === 'forward' && scrollOffset + totalTableHeight >= innerListRef.current.clientHeight - loadMoreThresholdValue) {
|
39
40
|
if (fetchMoreData) {
|
40
41
|
fetchMore();
|
41
42
|
}
|
@@ -1,11 +1,11 @@
|
|
1
1
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
2
|
-
|
3
|
-
*
|
4
|
-
*
|
5
|
-
*
|
6
|
-
*
|
7
|
-
* restricted by GSA ADP Schedule Contract with IBM Corp.
|
2
|
+
/**
|
3
|
+
* Copyright IBM Corp. 2020, 2023
|
4
|
+
*
|
5
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
6
|
+
* LICENSE file in the root directory of this source tree.
|
8
7
|
*/
|
8
|
+
|
9
9
|
import { useRef, useState } from 'react';
|
10
10
|
var useParentDimensions = function useParentDimensions(hooks) {
|
11
11
|
var rootRef = useRef();
|
@@ -1,10 +1,10 @@
|
|
1
|
-
|
2
|
-
*
|
3
|
-
*
|
4
|
-
*
|
5
|
-
*
|
6
|
-
* restricted by GSA ADP Schedule Contract with IBM Corp.
|
1
|
+
/**
|
2
|
+
* Copyright IBM Corp. 2020, 2023
|
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.
|
7
6
|
*/
|
7
|
+
|
8
8
|
import { useLayoutEffect } from 'react';
|
9
9
|
var useResizeTable = function useResizeTable(hooks) {
|
10
10
|
var useInstanceBeforeDimensions = function useInstanceBeforeDimensions(instance) {
|
@@ -26,7 +26,7 @@ var useResizeTable = function useResizeTable(hooks) {
|
|
26
26
|
resizeObserver = null;
|
27
27
|
};
|
28
28
|
}
|
29
|
-
return console.error('
|
29
|
+
return console.error('Could not resize table, no support for ResizeObserver');
|
30
30
|
}, [handleResize, parent]);
|
31
31
|
};
|
32
32
|
hooks.useInstanceBeforeDimensions.push(useInstanceBeforeDimensions);
|
@@ -1,11 +1,11 @@
|
|
1
1
|
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
|
2
|
-
|
3
|
-
*
|
4
|
-
*
|
5
|
-
*
|
6
|
-
*
|
7
|
-
* restricted by GSA ADP Schedule Contract with IBM Corp.
|
2
|
+
/**
|
3
|
+
* Copyright IBM Corp. 2020, 2023
|
4
|
+
*
|
5
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
6
|
+
* LICENSE file in the root directory of this source tree.
|
8
7
|
*/
|
8
|
+
|
9
9
|
var useSkeletons = function useSkeletons(hooks) {
|
10
10
|
var useInstance = function useInstance(instance) {
|
11
11
|
var isFetching = instance.isFetching,
|
@@ -2,12 +2,11 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
2
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
3
3
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
4
4
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
5
|
-
|
6
|
-
*
|
7
|
-
*
|
8
|
-
*
|
9
|
-
*
|
10
|
-
* restricted by GSA ADP Schedule Contract with IBM Corp.
|
5
|
+
/**
|
6
|
+
* Copyright IBM Corp. 2021, 2023
|
7
|
+
*
|
8
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
9
|
+
* LICENSE file in the root directory of this source tree.
|
11
10
|
*/
|
12
11
|
|
13
12
|
import { useEffect, useRef, useLayoutEffect, useState } from 'react';
|
@@ -29,9 +28,11 @@ var useStickyColumn = function useStickyColumn(hooks) {
|
|
29
28
|
setWindowSize(window.innerWidth);
|
30
29
|
}, []);
|
31
30
|
useLayoutEffect(function () {
|
31
|
+
/* istanbul ignore next */
|
32
32
|
function updateSize() {
|
33
33
|
setWindowSize(window.innerWidth);
|
34
34
|
}
|
35
|
+
/* istanbul ignore next */
|
35
36
|
window.addEventListener('resize', updateSize);
|
36
37
|
return function () {
|
37
38
|
return window.removeEventListener('resize', updateSize);
|
@@ -52,14 +53,17 @@ var useStickyColumn = function useStickyColumn(hooks) {
|
|
52
53
|
useEffect(function () {
|
53
54
|
var tableBodyElement = tableBodyRef.current;
|
54
55
|
var headerCellElement = stickyHeaderCellRef.current;
|
56
|
+
/* istanbul ignore next */
|
55
57
|
if (hasVertScroll(tableBodyElement) && headerCellElement) {
|
56
58
|
headerCellElement.classList.add(OFFSET_SCROLL_CLASS);
|
57
59
|
}
|
58
60
|
var boundListener = debounce(onBodyResize.bind(null, tableBodyElement, headerCellElement), 250);
|
61
|
+
/* istanbul ignore next */
|
59
62
|
if (typeof window !== 'undefined') {
|
60
63
|
window.addEventListener('resize', boundListener);
|
61
64
|
}
|
62
65
|
return function () {
|
66
|
+
/* istanbul ignore next */
|
63
67
|
if (typeof window !== 'undefined') {
|
64
68
|
window.removeEventListener('resize', boundListener);
|
65
69
|
}
|
@@ -158,6 +162,7 @@ var changeProps = function changeProps(elementName, headerCellRef, windowSize, p
|
|
158
162
|
};
|
159
163
|
var onBodyResize = function onBodyResize(tableBodyEle, headerCellEle) {
|
160
164
|
if (headerCellEle) {
|
165
|
+
/* istanbul ignore next */
|
161
166
|
if (hasVertScroll(tableBodyEle)) {
|
162
167
|
headerCellEle.classList.add(OFFSET_SCROLL_CLASS);
|
163
168
|
} else {
|
@@ -167,6 +172,7 @@ var onBodyResize = function onBodyResize(tableBodyEle, headerCellEle) {
|
|
167
172
|
}
|
168
173
|
};
|
169
174
|
var toggleStickyShadow = function toggleStickyShadow(tableBodyEle, headerCellEle) {
|
175
|
+
/* istanbul ignore next */
|
170
176
|
if (tableBodyEle && headerCellEle) {
|
171
177
|
var isScrolledToRight = tableBodyEle.scrollLeft + tableBodyEle.clientWidth === tableBodyEle.scrollWidth;
|
172
178
|
if (isScrolledToRight) {
|
@@ -179,6 +185,7 @@ var toggleStickyShadow = function toggleStickyShadow(tableBodyEle, headerCellEle
|
|
179
185
|
}
|
180
186
|
};
|
181
187
|
var hasVertScroll = function hasVertScroll(element) {
|
188
|
+
/* istanbul ignore next */
|
182
189
|
if (!element) {
|
183
190
|
return false;
|
184
191
|
}
|
@@ -46,7 +46,7 @@ var DatagridExpandedRow = function DatagridExpandedRow(ExpandedRowContentCompone
|
|
46
46
|
style: {
|
47
47
|
height: expandedContentHeight ? expandedContentHeight : null
|
48
48
|
}
|
49
|
-
}, ExpandedRowContentComponent
|
49
|
+
}, /*#__PURE__*/_react.default.createElement(ExpandedRowContentComponent, datagridState)));
|
50
50
|
};
|
51
51
|
};
|
52
52
|
var _default = exports.default = DatagridExpandedRow;
|
@@ -88,13 +88,14 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
|
|
88
88
|
dispatch = datagridState.dispatch,
|
89
89
|
onColResizeEnd = datagridState.onColResizeEnd;
|
90
90
|
var columnResizing = state.columnResizing;
|
91
|
-
var
|
91
|
+
var _ref4 = columnResizing || {},
|
92
|
+
columnWidths = _ref4.columnWidths;
|
92
93
|
var originalCol = visibleColumns[index];
|
93
94
|
return /*#__PURE__*/_react.default.createElement(_react2.TableHeader, (0, _extends2.default)({}, header.getHeaderProps(), {
|
94
|
-
className: (0, _classnames.default)((_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__resizableColumn"), header.getResizerProps), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__isResizing"), header.isResizing), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__sortableColumn"), datagridState.isTableSortable && header.id !== 'spacer'), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__isSorted"), header.isSorted), _cx), header.getHeaderProps().className),
|
95
|
+
className: (0, _classnames.default)((_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__resizableColumn"), header.getResizerProps), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__isResizing"), header.isResizing), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__sortableColumn"), datagridState.isTableSortable && header.id !== 'spacer'), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__isSorted"), header.isSorted), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__header-actions-column"), header.isAction), _cx), header.getHeaderProps().className),
|
95
96
|
key: header.id,
|
96
97
|
"aria-hidden": header.id === 'spacer' && 'true'
|
97
|
-
}, getAccessibilityProps(header)), header.render('Header'), header.getResizerProps && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({}, header.getResizerProps(), {
|
98
|
+
}, getAccessibilityProps(header)), header.render('Header'), header.getResizerProps && !header.isAction && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({}, header.getResizerProps(), {
|
98
99
|
onKeyDown: function onKeyDown(event) {
|
99
100
|
var key = event.key;
|
100
101
|
if (key === 'ArrowLeft' || key === 'ArrowRight') {
|
@@ -32,8 +32,11 @@ var DatagridRefBody = function DatagridRefBody(datagridState) {
|
|
32
32
|
className: (0, _classnames.default)("".concat(blockClass, "__simple-body"), getTableBodyProps().className)
|
33
33
|
}), rows.map(function (row) {
|
34
34
|
prepareRow(row);
|
35
|
+
var _row$getRowProps = row.getRowProps(),
|
36
|
+
key = _row$getRowProps.key;
|
35
37
|
return row.RowRenderer(_objectSpread(_objectSpread({}, datagridState), {}, {
|
36
|
-
row: row
|
38
|
+
row: row,
|
39
|
+
key: key
|
37
40
|
}));
|
38
41
|
}));
|
39
42
|
};
|
@@ -37,7 +37,8 @@ var DatagridRow = function DatagridRow(datagridState) {
|
|
37
37
|
var row = datagridState.row,
|
38
38
|
rowSize = datagridState.rowSize,
|
39
39
|
withNestedRows = datagridState.withNestedRows,
|
40
|
-
prepareRow = datagridState.prepareRow
|
40
|
+
prepareRow = datagridState.prepareRow,
|
41
|
+
key = datagridState.key;
|
41
42
|
var getVisibleNestedRowCount = function getVisibleNestedRowCount(_ref) {
|
42
43
|
var isExpanded = _ref.isExpanded,
|
43
44
|
subRows = _ref.subRows;
|
@@ -95,7 +96,9 @@ var DatagridRow = function DatagridRow(datagridState) {
|
|
95
96
|
}
|
96
97
|
};
|
97
98
|
var rowClassNames = (0, _classnames.default)("".concat(blockClass, "__carbon-row"), (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__carbon-row-expanded"), row.isExpanded), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__carbon-row-expandable"), row.canExpand), (0, _defineProperty2.default)(_cx, "".concat(_settings.carbon.prefix, "--data-table--selected"), row.isSelected), _cx));
|
98
|
-
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment,
|
99
|
+
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
|
100
|
+
key: key
|
101
|
+
}, /*#__PURE__*/_react.default.createElement(_react2.TableRow, (0, _extends2.default)({
|
99
102
|
className: rowClassNames
|
100
103
|
}, row.getRowProps(), {
|
101
104
|
key: row.id,
|
@@ -28,8 +28,11 @@ var DatagridSimpleBody = function DatagridSimpleBody(datagridState) {
|
|
28
28
|
className: (0, _classnames.default)("".concat(blockClass, "__simple-body"), getTableBodyProps().className)
|
29
29
|
}), rows.map(function (row) {
|
30
30
|
prepareRow(row);
|
31
|
+
var _row$getRowProps = row.getRowProps(),
|
32
|
+
key = _row$getRowProps.key;
|
31
33
|
return row.RowRenderer(_objectSpread(_objectSpread({}, datagridState), {}, {
|
32
|
-
row: row
|
34
|
+
row: row,
|
35
|
+
key: key
|
33
36
|
}));
|
34
37
|
}));
|
35
38
|
};
|
@@ -18,12 +18,11 @@ var _useResizeObserver = require("../../../global/js/hooks/useResizeObserver");
|
|
18
18
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
19
19
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
20
20
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
21
|
-
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
22
|
-
*
|
23
|
-
*
|
24
|
-
*
|
25
|
-
*
|
26
|
-
* restricted by GSA ADP Schedule Contract with IBM Corp.
|
21
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /**
|
22
|
+
* Copyright IBM Corp. 2020, 2023
|
23
|
+
*
|
24
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
25
|
+
* LICENSE file in the root directory of this source tree.
|
27
26
|
*/
|
28
27
|
var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
|
29
28
|
var rowSizeMap = {
|
@@ -31,12 +30,7 @@ var rowSizeMap = {
|
|
31
30
|
sm: 32,
|
32
31
|
md: 40,
|
33
32
|
lg: 48,
|
34
|
-
xl: 64
|
35
|
-
// TODO: deprecate the below values in next major release (v8) on carbon-components-react
|
36
|
-
short: 32,
|
37
|
-
compact: 24,
|
38
|
-
normal: 48,
|
39
|
-
tall: 64
|
33
|
+
xl: 64
|
40
34
|
};
|
41
35
|
var defaultRowHeight = rowSizeMap.lg;
|
42
36
|
var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
|
@@ -60,8 +54,8 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
|
|
60
54
|
gridRefElement.style.width = gridRefElement === null || gridRefElement === void 0 ? void 0 : gridRefElement.clientWidth;
|
61
55
|
};
|
62
56
|
(0, _useResizeObserver.useResizeObserver)(gridRef, handleVirtualGridResize);
|
63
|
-
var syncScroll = function syncScroll(
|
64
|
-
var virtualBody =
|
57
|
+
var syncScroll = function syncScroll(event) {
|
58
|
+
var virtualBody = event.target;
|
65
59
|
document.querySelector(".".concat(blockClass, "__head-wrap")).scrollLeft = virtualBody.scrollLeft;
|
66
60
|
var spacerColumn = document.querySelector(".".concat(blockClass, "__head-wrap thead th:last-child"));
|
67
61
|
spacerColumn.style.width = (0, _layout.px)(32 + (virtualBody.offsetWidth - virtualBody.clientWidth)); // scrollbar width to header column to fix header alignment
|
@@ -82,9 +76,7 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
|
|
82
76
|
overflow: 'hidden'
|
83
77
|
}
|
84
78
|
}, /*#__PURE__*/_react.default.createElement(_DatagridHead.default, datagridState)), /*#__PURE__*/_react.default.createElement(_react2.TableBody, (0, _extends2.default)({}, getTableBodyProps(), {
|
85
|
-
onScroll:
|
86
|
-
return syncScroll(e);
|
87
|
-
}
|
79
|
+
onScroll: syncScroll
|
88
80
|
}), /*#__PURE__*/_react.default.createElement(_reactWindow.VariableSizeList, {
|
89
81
|
height: virtualHeight || tableHeight,
|
90
82
|
itemCount: visibleRows.length,
|
@@ -104,10 +96,13 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
|
|
104
96
|
style = _ref.style;
|
105
97
|
var row = visibleRows[index];
|
106
98
|
prepareRow(row);
|
99
|
+
var _row$getRowProps = row.getRowProps(),
|
100
|
+
key = _row$getRowProps.key;
|
107
101
|
return /*#__PURE__*/_react.default.createElement("div", {
|
108
102
|
style: _objectSpread({}, style)
|
109
103
|
}, row.RowRenderer(_objectSpread(_objectSpread({}, datagridState), {}, {
|
110
|
-
row: row
|
104
|
+
row: row,
|
105
|
+
key: key
|
111
106
|
})));
|
112
107
|
})));
|
113
108
|
};
|
@@ -57,6 +57,12 @@ var DocsPage = exports.DocsPage = function DocsPage() {
|
|
57
57
|
language: 'jsx',
|
58
58
|
code: "\nuseDatagrid({\n columns,\n data,\n onColResizeEnd: (currentColumn, allColumns) =>\n console.log(currentColumn, allColumns),\n});\n "
|
59
59
|
}
|
60
|
+
}, {
|
61
|
+
description: 'Disabling the resizable columns is possible by specifying `disableResizing: true` within the `useDatagrid` hook.',
|
62
|
+
source: {
|
63
|
+
language: 'jsx',
|
64
|
+
code: "\nuseDatagrid({\n columns,\n data,\n disableResizing: true,\n});\n "
|
65
|
+
}
|
60
66
|
}, {
|
61
67
|
title: 'Rendering the table toolbar',
|
62
68
|
image: /*#__PURE__*/_react.default.createElement("img", {
|
@@ -90,7 +96,7 @@ var DocsPage = exports.DocsPage = function DocsPage() {
|
|
90
96
|
}, {
|
91
97
|
description: "Infinite scroll:\n- Include `useInfiniteScroll` hook\n- Add `fetchMoreData` property to `useDatagrid`, this will be a function that is called when the scroll threshold is met. Optionally change the height of the grid with the `virtualHeight` property.",
|
92
98
|
source: {
|
93
|
-
code: "\nconst datagridState = useDatagrid(\n {\n columns,\n data,\n isFetching,\n fetchMoreData: fetchData,\n virtualHeight: 540,\n emptyStateTitle: 'Empty state title',\n emptyStateDescription: 'Description explaining why the table is empty',\n },\n useInfiniteScroll\n);"
|
99
|
+
code: "\nconst datagridState = useDatagrid(\n {\n columns,\n data,\n isFetching,\n fetchMoreData: fetchData,\n virtualHeight: 540,\n loadMoreThreshold: 200,\n emptyStateTitle: 'Empty state title',\n emptyStateDescription: 'Description explaining why the table is empty',\n },\n useInfiniteScroll\n);"
|
94
100
|
}
|
95
101
|
}, {
|
96
102
|
description: "Virtualized data:\n- Include `useInfiniteScroll` hook\n- The Datagrid will know to use virtualized data just by providing the `useInfiniteScroll` hook\n ",
|
@@ -50,12 +50,13 @@ var useActionsColumn = function useActionsColumn(hooks) {
|
|
50
50
|
column = cell.column;
|
51
51
|
if (column.isAction) {
|
52
52
|
var _cx3;
|
53
|
+
var isColumnSticky = !!column.sticky;
|
53
54
|
return [props, {
|
54
55
|
children: /*#__PURE__*/_react.default.createElement("div", {
|
55
56
|
className: "".concat(blockClass, "__actions-column-contents")
|
56
57
|
}, isFetching && /*#__PURE__*/_react.default.createElement(_react2.IconSkeleton, {
|
57
58
|
className: "".concat(blockClass, "__actions-column-loading")
|
58
|
-
}), !isFetching && rowActions.length <= 2 && /*#__PURE__*/_react.default.createElement("div", {
|
59
|
+
}), !isFetching && rowActions.length <= 2 && !isColumnSticky && /*#__PURE__*/_react.default.createElement("div", {
|
59
60
|
className: "".concat(blockClass, "_actions-column"),
|
60
61
|
style: {
|
61
62
|
display: 'flex'
|
@@ -90,7 +91,7 @@ var useActionsColumn = function useActionsColumn(hooks) {
|
|
90
91
|
_onClick(id, row, e);
|
91
92
|
}
|
92
93
|
})));
|
93
|
-
})), !isFetching && rowActions.length > 2 && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_react2.OverflowMenu, {
|
94
|
+
})), !isFetching && (rowActions.length > 2 || isColumnSticky) && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_react2.OverflowMenu, {
|
94
95
|
align: "left",
|
95
96
|
size: "sm",
|
96
97
|
flipped: true,
|
@@ -120,9 +121,9 @@ var useActionsColumn = function useActionsColumn(hooks) {
|
|
120
121
|
key: id
|
121
122
|
}));
|
122
123
|
})))),
|
123
|
-
className: (0, _classnames.default)((_cx3 = {}, (0, _defineProperty2.default)(_cx3, "".concat(blockClass, "__actions-column-cell"), true), (0, _defineProperty2.default)(_cx3, "".concat(blockClass, "__cell"), true), _cx3)),
|
124
|
+
className: (0, _classnames.default)((_cx3 = {}, (0, _defineProperty2.default)(_cx3, "".concat(blockClass, "__actions-column-cell"), true), (0, _defineProperty2.default)(_cx3, "".concat(blockClass, "__cell"), true), (0, _defineProperty2.default)(_cx3, "".concat(blockClass, "__actions-column-cell-non-sticky"), !isColumnSticky), _cx3)),
|
124
125
|
style: {
|
125
|
-
width: rowActions.length > 2 ? 48 : 96
|
126
|
+
width: rowActions.length > 2 || isColumnSticky ? 48 : 96
|
126
127
|
}
|
127
128
|
}];
|
128
129
|
}
|
@@ -137,9 +138,10 @@ var useActionsColumn = function useActionsColumn(hooks) {
|
|
137
138
|
var addHeaderWidth = function addHeaderWidth(props, cellData) {
|
138
139
|
var column = cellData.column;
|
139
140
|
if (column.isAction) {
|
141
|
+
var isColumnSticky = !!column.sticky;
|
140
142
|
return [props, {
|
141
143
|
style: _objectSpread(_objectSpread({}, props.style), {}, {
|
142
|
-
width: rowActions.length > 2 ? 48 : 96 // set header width based on action length
|
144
|
+
width: rowActions.length > 2 || isColumnSticky ? 48 : 96 // set header width based on action length
|
143
145
|
})
|
144
146
|
}];
|
145
147
|
}
|
@@ -28,6 +28,14 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
|
|
28
28
|
*/
|
29
29
|
var useDatagrid = function useDatagrid(params) {
|
30
30
|
var defaultPlugins = [_reactTable.useFlexLayout, _DatagridHeaderRow.default, _useSkeletonRows.default, _reactTable.useResizeColumns, _useRowRenderer.default, _useDefaultStringRenderer.default, _useRowSize.default, _reactTable.useFilters, _reactTable.useGlobalFilter, _reactTable.useSortBy, _reactTable.useExpanded];
|
31
|
+
|
32
|
+
// Disable resizing
|
33
|
+
if (params.disableResizing) {
|
34
|
+
var resizeIndex = defaultPlugins.findIndex(function (p) {
|
35
|
+
return p.pluginName === 'useResizeColumns';
|
36
|
+
});
|
37
|
+
defaultPlugins.splice(resizeIndex, 1);
|
38
|
+
}
|
31
39
|
var defaultEndPlugins = [_reactTable.usePagination, _reactTable.useRowSelect, _useFlexResize.default, _useFloatingScroll.default];
|
32
40
|
var clientEndPlugins = params.endPlugins || [];
|
33
41
|
var tableId = (0, _react.useMemo)(function () {
|
@@ -10,12 +10,11 @@ var _debounce = _interopRequireDefault(require("lodash/debounce"));
|
|
10
10
|
var _useParentDimensions = _interopRequireDefault(require("./useParentDimensions"));
|
11
11
|
var _useResizeTable = _interopRequireDefault(require("./useResizeTable"));
|
12
12
|
var _settings = require("../../settings");
|
13
|
-
|
14
|
-
*
|
15
|
-
*
|
16
|
-
*
|
17
|
-
*
|
18
|
-
* restricted by GSA ADP Schedule Contract with IBM Corp.
|
13
|
+
/**
|
14
|
+
* Copyright IBM Corp. 2020, 2023
|
15
|
+
*
|
16
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
17
|
+
* LICENSE file in the root directory of this source tree.
|
19
18
|
*/
|
20
19
|
|
21
20
|
var useInfiniteScroll = function useInfiniteScroll(hooks) {
|
@@ -29,10 +28,11 @@ var useInfiniteScroll = function useInfiniteScroll(hooks) {
|
|
29
28
|
tableHeight = instance.tableHeight,
|
30
29
|
innerListRef = instance.innerListRef,
|
31
30
|
fetchMoreData = instance.fetchMoreData,
|
32
|
-
tableId = instance.tableId
|
31
|
+
tableId = instance.tableId,
|
32
|
+
loadMoreThreshold = instance.loadMoreThreshold;
|
33
33
|
var tableElement = document.querySelector("#".concat(tableId));
|
34
34
|
var totalTableHeight = tableHeight || (tableElement === null || tableElement === void 0 ? void 0 : tableElement.clientHeight);
|
35
|
-
var
|
35
|
+
var loadMoreThresholdValue = typeof loadMoreThreshold === 'number' ? loadMoreThreshold : 200;
|
36
36
|
var emptyFetchData = function emptyFetchData() {};
|
37
37
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
38
38
|
var fetchMore = (0, _react.useCallback)((0, _debounce.default)(fetchMoreData || emptyFetchData, 3000, {
|
@@ -43,7 +43,7 @@ var useInfiniteScroll = function useInfiniteScroll(hooks) {
|
|
43
43
|
var scrollDirection = _ref.scrollDirection,
|
44
44
|
scrollOffset = _ref.scrollOffset;
|
45
45
|
if (innerListRef && innerListRef.current) {
|
46
|
-
if (!isFetching && scrollDirection === 'forward' && scrollOffset + totalTableHeight >= innerListRef.current.clientHeight -
|
46
|
+
if (!isFetching && scrollDirection === 'forward' && scrollOffset + totalTableHeight >= innerListRef.current.clientHeight - loadMoreThresholdValue) {
|
47
47
|
if (fetchMoreData) {
|
48
48
|
fetchMore();
|
49
49
|
}
|
@@ -7,12 +7,11 @@ Object.defineProperty(exports, "__esModule", {
|
|
7
7
|
exports.default = void 0;
|
8
8
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
9
9
|
var _react = require("react");
|
10
|
-
|
11
|
-
*
|
12
|
-
*
|
13
|
-
*
|
14
|
-
*
|
15
|
-
* restricted by GSA ADP Schedule Contract with IBM Corp.
|
10
|
+
/**
|
11
|
+
* Copyright IBM Corp. 2020, 2023
|
12
|
+
*
|
13
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
14
|
+
* LICENSE file in the root directory of this source tree.
|
16
15
|
*/
|
17
16
|
|
18
17
|
var useParentDimensions = function useParentDimensions(hooks) {
|
@@ -5,12 +5,11 @@ Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
});
|
6
6
|
exports.default = void 0;
|
7
7
|
var _react = require("react");
|
8
|
-
|
9
|
-
*
|
10
|
-
*
|
11
|
-
*
|
12
|
-
*
|
13
|
-
* restricted by GSA ADP Schedule Contract with IBM Corp.
|
8
|
+
/**
|
9
|
+
* Copyright IBM Corp. 2020, 2023
|
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.
|
14
13
|
*/
|
15
14
|
|
16
15
|
var useResizeTable = function useResizeTable(hooks) {
|
@@ -33,7 +32,7 @@ var useResizeTable = function useResizeTable(hooks) {
|
|
33
32
|
resizeObserver = null;
|
34
33
|
};
|
35
34
|
}
|
36
|
-
return console.error('
|
35
|
+
return console.error('Could not resize table, no support for ResizeObserver');
|
37
36
|
}, [handleResize, parent]);
|
38
37
|
};
|
39
38
|
hooks.useInstanceBeforeDimensions.push(useInstanceBeforeDimensions);
|
@@ -6,13 +6,13 @@ Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
});
|
7
7
|
exports.default = void 0;
|
8
8
|
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
9
|
-
|
10
|
-
*
|
11
|
-
*
|
12
|
-
*
|
13
|
-
*
|
14
|
-
* restricted by GSA ADP Schedule Contract with IBM Corp.
|
9
|
+
/**
|
10
|
+
* Copyright IBM Corp. 2020, 2023
|
11
|
+
*
|
12
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
13
|
+
* LICENSE file in the root directory of this source tree.
|
15
14
|
*/
|
15
|
+
|
16
16
|
var useSkeletons = function useSkeletons(hooks) {
|
17
17
|
var useInstance = function useInstance(instance) {
|
18
18
|
var isFetching = instance.isFetching,
|