@carbon/ibm-products 2.15.1 → 2.15.2
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/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,
|