@carbon/ibm-products 1.40.0 → 1.41.0
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 +18 -0
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +2 -2
- package/css/index-full-carbon.min.css.map +1 -1
- package/css/index-without-carbon.css +18 -0
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +2 -2
- package/css/index-without-carbon.min.css.map +1 -1
- package/css/index.css +18 -0
- package/css/index.css.map +1 -1
- package/css/index.min.css +2 -2
- package/css/index.min.css.map +1 -1
- package/es/components/DataSpreadsheet/DataSpreadsheet.js +1 -3
- package/es/components/DataSpreadsheet/utils/handleCellDeletion.js +5 -4
- package/es/components/Datagrid/Datagrid/DatagridContent.js +8 -3
- package/es/components/Datagrid/Datagrid/DatagridEmptyBody.js +9 -3
- package/es/components/Datagrid/Datagrid/DatagridRow.js +2 -8
- package/es/components/Datagrid/Datagrid/DatagridVirtualBody.js +27 -8
- package/es/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +26 -36
- package/es/components/Datagrid/Datagrid.stories/index.js +1 -1
- package/es/components/Datagrid/useFiltering.js +0 -2
- package/es/components/Datagrid/useParentDimensions.js +3 -1
- package/es/components/Datagrid/utils/getArgTypes.js +5 -0
- package/es/components/Datagrid/utils/getInlineEditColumns.js +6 -1
- package/lib/components/DataSpreadsheet/DataSpreadsheet.js +1 -3
- package/lib/components/DataSpreadsheet/utils/handleCellDeletion.js +5 -4
- package/lib/components/Datagrid/Datagrid/DatagridContent.js +8 -3
- package/lib/components/Datagrid/Datagrid/DatagridEmptyBody.js +9 -3
- package/lib/components/Datagrid/Datagrid/DatagridRow.js +2 -11
- package/lib/components/Datagrid/Datagrid/DatagridVirtualBody.js +27 -8
- package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +26 -36
- package/lib/components/Datagrid/Datagrid.stories/index.js +1 -1
- package/lib/components/Datagrid/useFiltering.js +0 -2
- package/lib/components/Datagrid/useParentDimensions.js +3 -1
- package/lib/components/Datagrid/utils/getArgTypes.js +5 -0
- package/lib/components/Datagrid/utils/getInlineEditColumns.js +6 -1
- package/package.json +2 -2
- package/scss/components/Datagrid/_storybook-styles.scss +7 -0
- package/scss/components/Datagrid/styles/_datagrid.scss +17 -0
- package/scss/components/FilterSummary/_filter-summary.scss +1 -0
@@ -22,7 +22,9 @@ var DatagridEmptyBody = function DatagridEmptyBody(datagridState) {
|
|
22
22
|
emptyStateSize = datagridState.emptyStateSize,
|
23
23
|
_datagridState$emptyS = datagridState.emptyStateType,
|
24
24
|
emptyStateType = _datagridState$emptyS === void 0 ? 'noData' : _datagridState$emptyS,
|
25
|
-
illustrationTheme = datagridState.illustrationTheme
|
25
|
+
illustrationTheme = datagridState.illustrationTheme,
|
26
|
+
emptyStateAction = datagridState.emptyStateAction,
|
27
|
+
emptyStateLink = datagridState.emptyStateLink;
|
26
28
|
return /*#__PURE__*/React.createElement(TableBody, _extends({}, getTableBodyProps(), {
|
27
29
|
className: "".concat(blockClass, "__empty-state-body")
|
28
30
|
}), /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableCell, {
|
@@ -31,12 +33,16 @@ var DatagridEmptyBody = function DatagridEmptyBody(datagridState) {
|
|
31
33
|
illustrationTheme: illustrationTheme,
|
32
34
|
size: emptyStateSize,
|
33
35
|
title: emptyStateTitle,
|
34
|
-
subtitle: emptyStateDescription
|
36
|
+
subtitle: emptyStateDescription,
|
37
|
+
action: emptyStateAction,
|
38
|
+
link: emptyStateLink
|
35
39
|
}), emptyStateType === 'noData' && /*#__PURE__*/React.createElement(NoDataEmptyState, {
|
36
40
|
illustrationTheme: illustrationTheme,
|
37
41
|
size: emptyStateSize,
|
38
42
|
title: emptyStateTitle,
|
39
|
-
subtitle: emptyStateDescription
|
43
|
+
subtitle: emptyStateDescription,
|
44
|
+
action: emptyStateAction,
|
45
|
+
link: emptyStateLink
|
40
46
|
}))));
|
41
47
|
};
|
42
48
|
export default DatagridEmptyBody;
|
@@ -10,14 +10,12 @@ var _excluded = ["children"];
|
|
10
10
|
* restricted by GSA ADP Schedule Contract with IBM Corp.
|
11
11
|
*/
|
12
12
|
// @flow
|
13
|
-
import React
|
13
|
+
import React from 'react';
|
14
14
|
import { DataTable, SkeletonText } from 'carbon-components-react';
|
15
15
|
import { px } from '@carbon/layout';
|
16
16
|
import cx from 'classnames';
|
17
17
|
import { selectionColumnId } from '../common-column-ids';
|
18
18
|
import { pkg, carbon } from '../../../settings';
|
19
|
-
import { InlineEditContext } from './addons/InlineEdit/InlineEditContext/InlineEditContext';
|
20
|
-
import { getCellIdAsObject } from './addons/InlineEdit/InlineEditContext/getCellIdAsObject';
|
21
19
|
var blockClass = "".concat(pkg.prefix, "--datagrid");
|
22
20
|
var TableRow = DataTable.TableRow,
|
23
21
|
TableCell = DataTable.TableCell;
|
@@ -35,10 +33,6 @@ var DatagridRow = function DatagridRow(datagridState) {
|
|
35
33
|
var row = datagridState.row,
|
36
34
|
rowSize = datagridState.rowSize,
|
37
35
|
withNestedRows = datagridState.withNestedRows;
|
38
|
-
var _useContext = useContext(InlineEditContext),
|
39
|
-
state = _useContext.state;
|
40
|
-
var activeCellId = state.activeCellId;
|
41
|
-
var activeCellObject = activeCellId && getCellIdAsObject(activeCellId);
|
42
36
|
var getVisibleNestedRowCount = function getVisibleNestedRowCount(_ref) {
|
43
37
|
var isExpanded = _ref.isExpanded,
|
44
38
|
subRows = _ref.subRows;
|
@@ -52,7 +46,7 @@ var DatagridRow = function DatagridRow(datagridState) {
|
|
52
46
|
return size;
|
53
47
|
};
|
54
48
|
return /*#__PURE__*/React.createElement(TableRow, _extends({
|
55
|
-
className: cx("".concat(blockClass, "__carbon-row"), (_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__carbon-row-expanded"), row.isExpanded), _defineProperty(_cx, "".concat(blockClass, "__carbon-row-expandable"), row.canExpand), _defineProperty(_cx, "".concat(carbon.prefix, "--data-table--selected"), row.isSelected),
|
49
|
+
className: cx("".concat(blockClass, "__carbon-row"), (_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__carbon-row-expanded"), row.isExpanded), _defineProperty(_cx, "".concat(blockClass, "__carbon-row-expandable"), row.canExpand), _defineProperty(_cx, "".concat(carbon.prefix, "--data-table--selected"), row.isSelected), _cx))
|
56
50
|
}, row.getRowProps(), {
|
57
51
|
key: row.id,
|
58
52
|
onMouseEnter: function onMouseEnter(event) {
|
@@ -13,6 +13,8 @@ import React, { useEffect } from 'react';
|
|
13
13
|
import { VariableSizeList } from 'react-window';
|
14
14
|
import { DataTable } from 'carbon-components-react';
|
15
15
|
import { pkg } from '../../../settings';
|
16
|
+
import DatagridHead from './DatagridHead';
|
17
|
+
import { px } from '@carbon/layout';
|
16
18
|
var blockClass = "".concat(pkg.prefix, "--datagrid");
|
17
19
|
var TableBody = DataTable.TableBody;
|
18
20
|
var rowSizeMap = {
|
@@ -29,6 +31,7 @@ var rowSizeMap = {
|
|
29
31
|
};
|
30
32
|
var defaultRowHeight = rowSizeMap.lg;
|
31
33
|
var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
|
34
|
+
var _gridRef$current, _gridRef$current2;
|
32
35
|
var getTableBodyProps = datagridState.getTableBodyProps,
|
33
36
|
rows = datagridState.rows,
|
34
37
|
prepareRow = datagridState.prepareRow,
|
@@ -42,7 +45,14 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
|
|
42
45
|
DatagridPagination = datagridState.DatagridPagination,
|
43
46
|
page = datagridState.page,
|
44
47
|
handleResize = datagridState.handleResize,
|
45
|
-
|
48
|
+
gridRef = datagridState.gridRef;
|
49
|
+
var syncScroll = function syncScroll(e) {
|
50
|
+
var virtualBody = e.target;
|
51
|
+
document.querySelector(".".concat(blockClass, "__head-warp")).scrollLeft = virtualBody.scrollLeft;
|
52
|
+
var spacerColumn = document.querySelector(".".concat(blockClass, "__head-warp thead th:last-child"));
|
53
|
+
spacerColumn.style.width = px(32 + (virtualBody.offsetWidth - virtualBody.clientWidth)); // scrollbar width to header column to fix header alignment
|
54
|
+
};
|
55
|
+
|
46
56
|
useEffect(function () {
|
47
57
|
handleResize();
|
48
58
|
}, [handleResize]);
|
@@ -51,8 +61,16 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
|
|
51
61
|
listRef.current.resetAfterIndex(0);
|
52
62
|
}
|
53
63
|
var visibleRows = DatagridPagination && page || rows;
|
54
|
-
return /*#__PURE__*/React.createElement(
|
55
|
-
|
64
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
|
65
|
+
className: "".concat(blockClass, "__head-warp"),
|
66
|
+
style: {
|
67
|
+
width: (_gridRef$current = gridRef.current) === null || _gridRef$current === void 0 ? void 0 : _gridRef$current.clientWidth,
|
68
|
+
overflow: 'hidden'
|
69
|
+
}
|
70
|
+
}, /*#__PURE__*/React.createElement(DatagridHead, datagridState)), /*#__PURE__*/React.createElement(TableBody, _extends({}, getTableBodyProps(), {
|
71
|
+
onScroll: function onScroll(e) {
|
72
|
+
return syncScroll(e);
|
73
|
+
}
|
56
74
|
}), /*#__PURE__*/React.createElement(VariableSizeList, {
|
57
75
|
height: virtualHeight || tableHeight,
|
58
76
|
itemCount: visibleRows.length,
|
@@ -63,19 +81,20 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
|
|
63
81
|
onScroll: onScroll,
|
64
82
|
innerRef: innerListRef,
|
65
83
|
ref: listRef,
|
66
|
-
className: "".concat(blockClass, "__virtual-scrollbar")
|
84
|
+
className: "".concat(blockClass, "__virtual-scrollbar"),
|
85
|
+
style: {
|
86
|
+
width: (_gridRef$current2 = gridRef.current) === null || _gridRef$current2 === void 0 ? void 0 : _gridRef$current2.clientWidth
|
87
|
+
}
|
67
88
|
}, function (_ref) {
|
68
89
|
var index = _ref.index,
|
69
90
|
style = _ref.style;
|
70
91
|
var row = visibleRows[index];
|
71
92
|
prepareRow(row);
|
72
93
|
return /*#__PURE__*/React.createElement("div", {
|
73
|
-
style: _objectSpread(
|
74
|
-
overflow: withOverflowRow ? 'visible' : 'hidden'
|
75
|
-
})
|
94
|
+
style: _objectSpread({}, style)
|
76
95
|
}, row.RowRenderer(_objectSpread(_objectSpread({}, datagridState), {}, {
|
77
96
|
row: row
|
78
97
|
})));
|
79
|
-
}));
|
98
|
+
})));
|
80
99
|
};
|
81
100
|
export default DatagridVirtualBody;
|
@@ -48,12 +48,9 @@ var FilterFlyout = function FilterFlyout(_ref) {
|
|
48
48
|
onApply = _ref$onApply === void 0 ? function () {} : _ref$onApply,
|
49
49
|
_ref$onCancel = _ref.onCancel,
|
50
50
|
onCancel = _ref$onCancel === void 0 ? function () {} : _ref$onCancel,
|
51
|
-
_ref$shouldClickOutsi = _ref.shouldClickOutsideToClose,
|
52
|
-
shouldClickOutsideToClose = _ref$shouldClickOutsi === void 0 ? false : _ref$shouldClickOutsi,
|
53
51
|
_ref$secondaryActionL = _ref.secondaryActionLabel,
|
54
52
|
secondaryActionLabel = _ref$secondaryActionL === void 0 ? 'Cancel' : _ref$secondaryActionL,
|
55
|
-
setAllFilters = _ref.setAllFilters
|
56
|
-
setFilter = _ref.setFilter;
|
53
|
+
setAllFilters = _ref.setAllFilters;
|
57
54
|
/** Context state and methods */
|
58
55
|
var _useContext = useContext(FilterContext),
|
59
56
|
EventEmitter = _useContext.EventEmitter;
|
@@ -100,8 +97,11 @@ var FilterFlyout = function FilterFlyout(_ref) {
|
|
100
97
|
prevFiltersObjectArrayRef.current = JSON.stringify(filtersObjectArray);
|
101
98
|
};
|
102
99
|
var cancel = function cancel() {
|
103
|
-
|
104
|
-
|
100
|
+
// Reverting to previous filters only applies when using batch actions
|
101
|
+
if (updateMethod === BATCH) {
|
102
|
+
revertToPreviousFilters();
|
103
|
+
onCancel();
|
104
|
+
}
|
105
105
|
closeFlyout();
|
106
106
|
};
|
107
107
|
var reset = function reset() {
|
@@ -133,34 +133,32 @@ var FilterFlyout = function FilterFlyout(_ref) {
|
|
133
133
|
if (type === DATE && !value[1]) {
|
134
134
|
return;
|
135
135
|
}
|
136
|
-
|
137
|
-
|
138
|
-
|
139
|
-
|
140
|
-
|
136
|
+
var filtersObjectArrayCopy = _toConsumableArray(filtersObjectArray);
|
137
|
+
// check if the filter already exists in the array
|
138
|
+
var filter = filtersObjectArrayCopy.find(function (item) {
|
139
|
+
return item.id === column;
|
140
|
+
});
|
141
|
+
|
142
|
+
// if filter exists in array then update the filter's new value
|
143
|
+
if (filter) {
|
144
|
+
filter.value = value;
|
145
|
+
} else {
|
146
|
+
filtersObjectArrayCopy.push({
|
147
|
+
id: column,
|
148
|
+
value: value,
|
149
|
+
type: type
|
141
150
|
});
|
151
|
+
}
|
152
|
+
setFiltersObjectArray(filtersObjectArrayCopy);
|
142
153
|
|
143
|
-
|
144
|
-
|
145
|
-
|
146
|
-
} else {
|
147
|
-
filtersObjectArrayCopy.push({
|
148
|
-
id: column,
|
149
|
-
value: value,
|
150
|
-
type: type
|
151
|
-
});
|
152
|
-
}
|
153
|
-
setFiltersObjectArray(filtersObjectArrayCopy);
|
154
|
-
} else if (updateMethod === INSTANT) {
|
155
|
-
setFilter(column, value);
|
154
|
+
// Automatically apply the filters if the updateMethod is instant
|
155
|
+
if (updateMethod === INSTANT) {
|
156
|
+
setAllFilters(filtersObjectArrayCopy);
|
156
157
|
}
|
157
|
-
}, [
|
158
|
+
}, [setAllFilters, updateMethod, filtersObjectArray]);
|
158
159
|
|
159
160
|
/** Effects */
|
160
161
|
useClickOutside(filterFlyoutRef, function (target) {
|
161
|
-
if (shouldClickOutsideToClose === false) {
|
162
|
-
return;
|
163
|
-
}
|
164
162
|
var hasClickedOnDatePicker = target.closest('.flatpickr-calendar');
|
165
163
|
if (!open || hasClickedOnDatePicker) {
|
166
164
|
return;
|
@@ -361,14 +359,6 @@ FilterFlyout.propTypes = {
|
|
361
359
|
* Function that sets all the filters, this comes from the datagridState
|
362
360
|
*/
|
363
361
|
setAllFilters: PropTypes.func.isRequired,
|
364
|
-
/**
|
365
|
-
* Function that sets an individual filter, this comes from the datagridState
|
366
|
-
*/
|
367
|
-
setFilter: PropTypes.func.isRequired,
|
368
|
-
/**
|
369
|
-
* Boolean if you want the flyout to close when clicked outside of the parent
|
370
|
-
*/
|
371
|
-
shouldClickOutsideToClose: PropTypes.bool,
|
372
362
|
/**
|
373
363
|
* Title of the filter flyout
|
374
364
|
*/
|
@@ -2,4 +2,4 @@ export { story as CustomizeColumnStory } from './CustomizeColumnStory';
|
|
2
2
|
export { default as StickyActionsColumn } from './StickyActionsColumnStory';
|
3
3
|
export { story as RowSizeDropdownStory } from './RowSizeDropdownStory';
|
4
4
|
export { story as LeftPanelStory } from './LeftPanelStory';
|
5
|
-
export { story as
|
5
|
+
export { story as SelectAllWithToggle } from './SelectAllWithToggleStory';
|
@@ -61,7 +61,6 @@ var useFiltering = function useFiltering(hooks) {
|
|
61
61
|
hooks.useInstance.push(function (instance) {
|
62
62
|
var filterProps = instance.filterProps,
|
63
63
|
setAllFilters = instance.setAllFilters,
|
64
|
-
setFilter = instance.setFilter,
|
65
64
|
headers = instance.headers;
|
66
65
|
var defaultProps = {
|
67
66
|
variation: 'flyout'
|
@@ -69,7 +68,6 @@ var useFiltering = function useFiltering(hooks) {
|
|
69
68
|
var getFilterFlyoutProps = function getFilterFlyoutProps() {
|
70
69
|
return _objectSpread(_objectSpread(_objectSpread({}, defaultProps), filterProps), {}, {
|
71
70
|
setAllFilters: setAllFilters,
|
72
|
-
setFilter: setFilter,
|
73
71
|
headers: headers
|
74
72
|
});
|
75
73
|
};
|
@@ -12,6 +12,7 @@ var useParentDimensions = function useParentDimensions(hooks) {
|
|
12
12
|
var headRef = useRef();
|
13
13
|
var innerListRef = useRef();
|
14
14
|
var listRef = useRef();
|
15
|
+
var gridRef = useRef();
|
15
16
|
var _useState = useState(),
|
16
17
|
_useState2 = _slicedToArray(_useState, 2),
|
17
18
|
tableHeight = _useState2[0],
|
@@ -47,7 +48,8 @@ var useParentDimensions = function useParentDimensions(hooks) {
|
|
47
48
|
headRef: headRef,
|
48
49
|
innerListRef: innerListRef,
|
49
50
|
handleResize: handleResize,
|
50
|
-
listRef: listRef
|
51
|
+
listRef: listRef,
|
52
|
+
gridRef: gridRef
|
51
53
|
});
|
52
54
|
};
|
53
55
|
hooks.useInstance.push(useInstance);
|
@@ -90,5 +90,10 @@ export var ARG_TYPES = {
|
|
90
90
|
customizeColumnsProps: {
|
91
91
|
control: 'object',
|
92
92
|
description: 'This is an object containing all of the props used with the column customization extension. _This value is set/passed inside of the `datagridState` object._'
|
93
|
+
},
|
94
|
+
filterProps: {
|
95
|
+
name: 'Filter props',
|
96
|
+
control: 'object',
|
97
|
+
description: 'This is an object for all the props passed into the filter flyout and filter panel'
|
93
98
|
}
|
94
99
|
};
|
@@ -74,8 +74,13 @@ export var getInlineEditColumns = function getInlineEditColumns() {
|
|
74
74
|
accessor: 'visits',
|
75
75
|
width: 120,
|
76
76
|
inlineEdit: {
|
77
|
+
validator: function validator(n) {
|
78
|
+
return n && n < 10;
|
79
|
+
},
|
77
80
|
type: 'number',
|
78
|
-
inputProps: {
|
81
|
+
inputProps: {
|
82
|
+
invalidText: 'Invalid number, must be 10 or greater'
|
83
|
+
} // These props are passed to the Carbon component used for inline editing
|
79
84
|
}
|
80
85
|
}, {
|
81
86
|
Header: 'Active since',
|
@@ -186,9 +186,7 @@ var DataSpreadsheet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
|
|
186
186
|
// Removes the active cell element
|
187
187
|
var removeActiveCell = (0, _react.useCallback)(function () {
|
188
188
|
var activeCellHighlight = spreadsheetRef.current.querySelector(".".concat(blockClass, "__active-cell--highlight"));
|
189
|
-
|
190
|
-
activeCellHighlight.style.display = 'none';
|
191
|
-
}
|
189
|
+
activeCellHighlight.style.display = 'none';
|
192
190
|
}, [spreadsheetRef]);
|
193
191
|
var removeCellEditor = (0, _react.useCallback)(function () {
|
194
192
|
setCellEditorValue('');
|
@@ -14,6 +14,7 @@ var _rangeWithCallback = require("../../../global/js/utils/rangeWithCallback");
|
|
14
14
|
*/
|
15
15
|
|
16
16
|
var handleCellDeletion = function handleCellDeletion(_ref) {
|
17
|
+
var _selectionAreaToEmpty, _selectionAreaToEmpty2, _selectionAreaToEmpty3, _selectionAreaToEmpty4, _selectionAreaToEmpty5, _selectionAreaToEmpty6, _selectionAreaToEmpty7, _selectionAreaToEmpty8;
|
17
18
|
var activeCellCoordinates = _ref.activeCellCoordinates,
|
18
19
|
selectionAreas = _ref.selectionAreas,
|
19
20
|
currentMatcher = _ref.currentMatcher,
|
@@ -31,10 +32,10 @@ var handleCellDeletion = function handleCellDeletion(_ref) {
|
|
31
32
|
return item.matcher === currentMatcher;
|
32
33
|
});
|
33
34
|
var selectionAreaToEmptyContents = selectionAreaClone[indexOfCurrentSelectionArea];
|
34
|
-
var lowestColumnIndex = Math.min(selectionAreaToEmptyContents.point1.column, selectionAreaToEmptyContents.point2.column);
|
35
|
-
var greatestColumnIndex = Math.max(selectionAreaToEmptyContents.point1.column, selectionAreaToEmptyContents.point2.column);
|
36
|
-
var lowestRowIndex = Math.min(selectionAreaToEmptyContents.point1.row, selectionAreaToEmptyContents.point2.row);
|
37
|
-
var greatestRowIndex = Math.max(selectionAreaToEmptyContents.point1.row, selectionAreaToEmptyContents.point2.row);
|
35
|
+
var lowestColumnIndex = Math.min(selectionAreaToEmptyContents === null || selectionAreaToEmptyContents === void 0 ? void 0 : (_selectionAreaToEmpty = selectionAreaToEmptyContents.point1) === null || _selectionAreaToEmpty === void 0 ? void 0 : _selectionAreaToEmpty.column, selectionAreaToEmptyContents === null || selectionAreaToEmptyContents === void 0 ? void 0 : (_selectionAreaToEmpty2 = selectionAreaToEmptyContents.point2) === null || _selectionAreaToEmpty2 === void 0 ? void 0 : _selectionAreaToEmpty2.column);
|
36
|
+
var greatestColumnIndex = Math.max(selectionAreaToEmptyContents === null || selectionAreaToEmptyContents === void 0 ? void 0 : (_selectionAreaToEmpty3 = selectionAreaToEmptyContents.point1) === null || _selectionAreaToEmpty3 === void 0 ? void 0 : _selectionAreaToEmpty3.column, selectionAreaToEmptyContents === null || selectionAreaToEmptyContents === void 0 ? void 0 : (_selectionAreaToEmpty4 = selectionAreaToEmptyContents.point2) === null || _selectionAreaToEmpty4 === void 0 ? void 0 : _selectionAreaToEmpty4.column);
|
37
|
+
var lowestRowIndex = Math.min(selectionAreaToEmptyContents === null || selectionAreaToEmptyContents === void 0 ? void 0 : (_selectionAreaToEmpty5 = selectionAreaToEmptyContents.point1) === null || _selectionAreaToEmpty5 === void 0 ? void 0 : _selectionAreaToEmpty5.row, selectionAreaToEmptyContents === null || selectionAreaToEmptyContents === void 0 ? void 0 : (_selectionAreaToEmpty6 = selectionAreaToEmptyContents.point2) === null || _selectionAreaToEmpty6 === void 0 ? void 0 : _selectionAreaToEmpty6.row);
|
38
|
+
var greatestRowIndex = Math.max(selectionAreaToEmptyContents === null || selectionAreaToEmptyContents === void 0 ? void 0 : (_selectionAreaToEmpty7 = selectionAreaToEmptyContents.point1) === null || _selectionAreaToEmpty7 === void 0 ? void 0 : _selectionAreaToEmpty7.row, selectionAreaToEmptyContents === null || selectionAreaToEmptyContents === void 0 ? void 0 : (_selectionAreaToEmpty8 = selectionAreaToEmptyContents.point2) === null || _selectionAreaToEmpty8 === void 0 ? void 0 : _selectionAreaToEmpty8.row);
|
38
39
|
(0, _rangeWithCallback.rangeWithCallback)(lowestColumnIndex, greatestColumnIndex, function (columnIndex) {
|
39
40
|
(0, _rangeWithCallback.rangeWithCallback)(lowestRowIndex, greatestRowIndex, function (rowIndex) {
|
40
41
|
var cellProps = rows[rowIndex].cells[columnIndex];
|
@@ -51,7 +51,8 @@ var DatagridContent = function DatagridContent(_ref) {
|
|
51
51
|
withInlineEdit = datagridState.withInlineEdit,
|
52
52
|
tableId = datagridState.tableId,
|
53
53
|
DatagridActions = datagridState.DatagridActions,
|
54
|
-
totalColumnsWidth = datagridState.totalColumnsWidth
|
54
|
+
totalColumnsWidth = datagridState.totalColumnsWidth,
|
55
|
+
gridRef = datagridState.gridRef;
|
55
56
|
var rows = DatagridPagination && datagridState.page || datagridState.rows;
|
56
57
|
var gridActive = state.gridActive,
|
57
58
|
editId = state.editId;
|
@@ -91,7 +92,7 @@ var DatagridContent = function DatagridContent(_ref) {
|
|
91
92
|
onFocus: withInlineEdit ? function () {
|
92
93
|
return (0, _handleGridFocus.handleGridFocus)(state, dispatch);
|
93
94
|
} : null
|
94
|
-
}), /*#__PURE__*/_react.default.createElement(_DatagridHead.default, datagridState), /*#__PURE__*/_react.default.createElement(_DatagridBody.default, (0, _extends2.default)({}, datagridState, {
|
95
|
+
}), !withVirtualScroll ? /*#__PURE__*/_react.default.createElement(_DatagridHead.default, datagridState) : null, /*#__PURE__*/_react.default.createElement(_DatagridBody.default, (0, _extends2.default)({}, datagridState, {
|
95
96
|
rows: rows
|
96
97
|
})));
|
97
98
|
};
|
@@ -126,6 +127,9 @@ var DatagridContent = function DatagridContent(_ref) {
|
|
126
127
|
className: "".concat(blockClass, "__datagridLeftPanel")
|
127
128
|
}, leftPanel.panelContent), withInlineEdit ? /*#__PURE__*/_react.default.createElement("div", {
|
128
129
|
ref: multiKeyTrackingRef
|
130
|
+
}, renderTable()) : withVirtualScroll ? /*#__PURE__*/_react.default.createElement("div", {
|
131
|
+
className: "".concat(blockClass, "__virtualScrollContainer"),
|
132
|
+
ref: gridRef
|
129
133
|
}, renderTable()) : renderTable())), (rows === null || rows === void 0 ? void 0 : rows.length) > 0 && !isFetching && DatagridPagination && /*#__PURE__*/_react.default.createElement(DatagridPagination, datagridState), CustomizeColumnsModal && /*#__PURE__*/_react.default.createElement(CustomizeColumnsModal, {
|
130
134
|
instance: datagridState
|
131
135
|
}));
|
@@ -150,6 +154,7 @@ DatagridContent.propTypes = {
|
|
150
154
|
page: _propTypes.default.arrayOf(_propTypes.default.object),
|
151
155
|
rows: _propTypes.default.arrayOf(_propTypes.default.object),
|
152
156
|
tableId: _propTypes.default.string,
|
153
|
-
totalColumnsWidth: _propTypes.default.number
|
157
|
+
totalColumnsWidth: _propTypes.default.number,
|
158
|
+
gridRef: _propTypes.default.object
|
154
159
|
})
|
155
160
|
};
|
@@ -30,7 +30,9 @@ var DatagridEmptyBody = function DatagridEmptyBody(datagridState) {
|
|
30
30
|
emptyStateSize = datagridState.emptyStateSize,
|
31
31
|
_datagridState$emptyS = datagridState.emptyStateType,
|
32
32
|
emptyStateType = _datagridState$emptyS === void 0 ? 'noData' : _datagridState$emptyS,
|
33
|
-
illustrationTheme = datagridState.illustrationTheme
|
33
|
+
illustrationTheme = datagridState.illustrationTheme,
|
34
|
+
emptyStateAction = datagridState.emptyStateAction,
|
35
|
+
emptyStateLink = datagridState.emptyStateLink;
|
34
36
|
return /*#__PURE__*/_react.default.createElement(TableBody, (0, _extends2.default)({}, getTableBodyProps(), {
|
35
37
|
className: "".concat(blockClass, "__empty-state-body")
|
36
38
|
}), /*#__PURE__*/_react.default.createElement(TableRow, null, /*#__PURE__*/_react.default.createElement(TableCell, {
|
@@ -39,12 +41,16 @@ var DatagridEmptyBody = function DatagridEmptyBody(datagridState) {
|
|
39
41
|
illustrationTheme: illustrationTheme,
|
40
42
|
size: emptyStateSize,
|
41
43
|
title: emptyStateTitle,
|
42
|
-
subtitle: emptyStateDescription
|
44
|
+
subtitle: emptyStateDescription,
|
45
|
+
action: emptyStateAction,
|
46
|
+
link: emptyStateLink
|
43
47
|
}), emptyStateType === 'noData' && /*#__PURE__*/_react.default.createElement(_EmptyStates.NoDataEmptyState, {
|
44
48
|
illustrationTheme: illustrationTheme,
|
45
49
|
size: emptyStateSize,
|
46
50
|
title: emptyStateTitle,
|
47
|
-
subtitle: emptyStateDescription
|
51
|
+
subtitle: emptyStateDescription,
|
52
|
+
action: emptyStateAction,
|
53
|
+
link: emptyStateLink
|
48
54
|
}))));
|
49
55
|
};
|
50
56
|
var _default = DatagridEmptyBody;
|
@@ -1,7 +1,6 @@
|
|
1
1
|
"use strict";
|
2
2
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
4
|
-
var _typeof = require("@babel/runtime/helpers/typeof");
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
6
5
|
value: true
|
7
6
|
});
|
@@ -9,17 +8,13 @@ exports.default = void 0;
|
|
9
8
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
10
9
|
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
11
10
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
12
|
-
var _react =
|
11
|
+
var _react = _interopRequireDefault(require("react"));
|
13
12
|
var _carbonComponentsReact = require("carbon-components-react");
|
14
13
|
var _layout = require("@carbon/layout");
|
15
14
|
var _classnames = _interopRequireDefault(require("classnames"));
|
16
15
|
var _commonColumnIds = require("../common-column-ids");
|
17
16
|
var _settings = require("../../../settings");
|
18
|
-
var _InlineEditContext = require("./addons/InlineEdit/InlineEditContext/InlineEditContext");
|
19
|
-
var _getCellIdAsObject = require("./addons/InlineEdit/InlineEditContext/getCellIdAsObject");
|
20
17
|
var _excluded = ["children"];
|
21
|
-
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
22
|
-
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
23
18
|
var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
|
24
19
|
var TableRow = _carbonComponentsReact.DataTable.TableRow,
|
25
20
|
TableCell = _carbonComponentsReact.DataTable.TableCell;
|
@@ -37,10 +32,6 @@ var DatagridRow = function DatagridRow(datagridState) {
|
|
37
32
|
var row = datagridState.row,
|
38
33
|
rowSize = datagridState.rowSize,
|
39
34
|
withNestedRows = datagridState.withNestedRows;
|
40
|
-
var _useContext = (0, _react.useContext)(_InlineEditContext.InlineEditContext),
|
41
|
-
state = _useContext.state;
|
42
|
-
var activeCellId = state.activeCellId;
|
43
|
-
var activeCellObject = activeCellId && (0, _getCellIdAsObject.getCellIdAsObject)(activeCellId);
|
44
35
|
var getVisibleNestedRowCount = function getVisibleNestedRowCount(_ref) {
|
45
36
|
var isExpanded = _ref.isExpanded,
|
46
37
|
subRows = _ref.subRows;
|
@@ -54,7 +45,7 @@ var DatagridRow = function DatagridRow(datagridState) {
|
|
54
45
|
return size;
|
55
46
|
};
|
56
47
|
return /*#__PURE__*/_react.default.createElement(TableRow, (0, _extends2.default)({
|
57
|
-
className: (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),
|
48
|
+
className: (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))
|
58
49
|
}, row.getRowProps(), {
|
59
50
|
key: row.id,
|
60
51
|
onMouseEnter: function onMouseEnter(event) {
|
@@ -12,6 +12,8 @@ var _react = _interopRequireWildcard(require("react"));
|
|
12
12
|
var _reactWindow = require("react-window");
|
13
13
|
var _carbonComponentsReact = require("carbon-components-react");
|
14
14
|
var _settings = require("../../../settings");
|
15
|
+
var _DatagridHead = _interopRequireDefault(require("./DatagridHead"));
|
16
|
+
var _layout = require("@carbon/layout");
|
15
17
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
16
18
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
17
19
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
@@ -32,6 +34,7 @@ var rowSizeMap = {
|
|
32
34
|
};
|
33
35
|
var defaultRowHeight = rowSizeMap.lg;
|
34
36
|
var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
|
37
|
+
var _gridRef$current, _gridRef$current2;
|
35
38
|
var getTableBodyProps = datagridState.getTableBodyProps,
|
36
39
|
rows = datagridState.rows,
|
37
40
|
prepareRow = datagridState.prepareRow,
|
@@ -45,7 +48,14 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
|
|
45
48
|
DatagridPagination = datagridState.DatagridPagination,
|
46
49
|
page = datagridState.page,
|
47
50
|
handleResize = datagridState.handleResize,
|
48
|
-
|
51
|
+
gridRef = datagridState.gridRef;
|
52
|
+
var syncScroll = function syncScroll(e) {
|
53
|
+
var virtualBody = e.target;
|
54
|
+
document.querySelector(".".concat(blockClass, "__head-warp")).scrollLeft = virtualBody.scrollLeft;
|
55
|
+
var spacerColumn = document.querySelector(".".concat(blockClass, "__head-warp thead th:last-child"));
|
56
|
+
spacerColumn.style.width = (0, _layout.px)(32 + (virtualBody.offsetWidth - virtualBody.clientWidth)); // scrollbar width to header column to fix header alignment
|
57
|
+
};
|
58
|
+
|
49
59
|
(0, _react.useEffect)(function () {
|
50
60
|
handleResize();
|
51
61
|
}, [handleResize]);
|
@@ -54,8 +64,16 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
|
|
54
64
|
listRef.current.resetAfterIndex(0);
|
55
65
|
}
|
56
66
|
var visibleRows = DatagridPagination && page || rows;
|
57
|
-
return /*#__PURE__*/_react.default.createElement(
|
58
|
-
|
67
|
+
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
|
68
|
+
className: "".concat(blockClass, "__head-warp"),
|
69
|
+
style: {
|
70
|
+
width: (_gridRef$current = gridRef.current) === null || _gridRef$current === void 0 ? void 0 : _gridRef$current.clientWidth,
|
71
|
+
overflow: 'hidden'
|
72
|
+
}
|
73
|
+
}, /*#__PURE__*/_react.default.createElement(_DatagridHead.default, datagridState)), /*#__PURE__*/_react.default.createElement(TableBody, (0, _extends2.default)({}, getTableBodyProps(), {
|
74
|
+
onScroll: function onScroll(e) {
|
75
|
+
return syncScroll(e);
|
76
|
+
}
|
59
77
|
}), /*#__PURE__*/_react.default.createElement(_reactWindow.VariableSizeList, {
|
60
78
|
height: virtualHeight || tableHeight,
|
61
79
|
itemCount: visibleRows.length,
|
@@ -66,20 +84,21 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
|
|
66
84
|
onScroll: onScroll,
|
67
85
|
innerRef: innerListRef,
|
68
86
|
ref: listRef,
|
69
|
-
className: "".concat(blockClass, "__virtual-scrollbar")
|
87
|
+
className: "".concat(blockClass, "__virtual-scrollbar"),
|
88
|
+
style: {
|
89
|
+
width: (_gridRef$current2 = gridRef.current) === null || _gridRef$current2 === void 0 ? void 0 : _gridRef$current2.clientWidth
|
90
|
+
}
|
70
91
|
}, function (_ref) {
|
71
92
|
var index = _ref.index,
|
72
93
|
style = _ref.style;
|
73
94
|
var row = visibleRows[index];
|
74
95
|
prepareRow(row);
|
75
96
|
return /*#__PURE__*/_react.default.createElement("div", {
|
76
|
-
style: _objectSpread(
|
77
|
-
overflow: withOverflowRow ? 'visible' : 'hidden'
|
78
|
-
})
|
97
|
+
style: _objectSpread({}, style)
|
79
98
|
}, row.RowRenderer(_objectSpread(_objectSpread({}, datagridState), {}, {
|
80
99
|
row: row
|
81
100
|
})));
|
82
|
-
}));
|
101
|
+
})));
|
83
102
|
};
|
84
103
|
var _default = DatagridVirtualBody;
|
85
104
|
exports.default = _default;
|
@@ -48,12 +48,9 @@ var FilterFlyout = function FilterFlyout(_ref) {
|
|
48
48
|
onApply = _ref$onApply === void 0 ? function () {} : _ref$onApply,
|
49
49
|
_ref$onCancel = _ref.onCancel,
|
50
50
|
onCancel = _ref$onCancel === void 0 ? function () {} : _ref$onCancel,
|
51
|
-
_ref$shouldClickOutsi = _ref.shouldClickOutsideToClose,
|
52
|
-
shouldClickOutsideToClose = _ref$shouldClickOutsi === void 0 ? false : _ref$shouldClickOutsi,
|
53
51
|
_ref$secondaryActionL = _ref.secondaryActionLabel,
|
54
52
|
secondaryActionLabel = _ref$secondaryActionL === void 0 ? 'Cancel' : _ref$secondaryActionL,
|
55
|
-
setAllFilters = _ref.setAllFilters
|
56
|
-
setFilter = _ref.setFilter;
|
53
|
+
setAllFilters = _ref.setAllFilters;
|
57
54
|
/** Context state and methods */
|
58
55
|
var _useContext = (0, _react.useContext)(_FilterProvider.FilterContext),
|
59
56
|
EventEmitter = _useContext.EventEmitter;
|
@@ -100,8 +97,11 @@ var FilterFlyout = function FilterFlyout(_ref) {
|
|
100
97
|
prevFiltersObjectArrayRef.current = JSON.stringify(filtersObjectArray);
|
101
98
|
};
|
102
99
|
var cancel = function cancel() {
|
103
|
-
|
104
|
-
|
100
|
+
// Reverting to previous filters only applies when using batch actions
|
101
|
+
if (updateMethod === _constants.BATCH) {
|
102
|
+
revertToPreviousFilters();
|
103
|
+
onCancel();
|
104
|
+
}
|
105
105
|
closeFlyout();
|
106
106
|
};
|
107
107
|
var reset = function reset() {
|
@@ -133,34 +133,32 @@ var FilterFlyout = function FilterFlyout(_ref) {
|
|
133
133
|
if (type === _constants.DATE && !value[1]) {
|
134
134
|
return;
|
135
135
|
}
|
136
|
-
|
137
|
-
|
138
|
-
|
139
|
-
|
140
|
-
|
136
|
+
var filtersObjectArrayCopy = (0, _toConsumableArray2.default)(filtersObjectArray);
|
137
|
+
// check if the filter already exists in the array
|
138
|
+
var filter = filtersObjectArrayCopy.find(function (item) {
|
139
|
+
return item.id === column;
|
140
|
+
});
|
141
|
+
|
142
|
+
// if filter exists in array then update the filter's new value
|
143
|
+
if (filter) {
|
144
|
+
filter.value = value;
|
145
|
+
} else {
|
146
|
+
filtersObjectArrayCopy.push({
|
147
|
+
id: column,
|
148
|
+
value: value,
|
149
|
+
type: type
|
141
150
|
});
|
151
|
+
}
|
152
|
+
setFiltersObjectArray(filtersObjectArrayCopy);
|
142
153
|
|
143
|
-
|
144
|
-
|
145
|
-
|
146
|
-
} else {
|
147
|
-
filtersObjectArrayCopy.push({
|
148
|
-
id: column,
|
149
|
-
value: value,
|
150
|
-
type: type
|
151
|
-
});
|
152
|
-
}
|
153
|
-
setFiltersObjectArray(filtersObjectArrayCopy);
|
154
|
-
} else if (updateMethod === _constants.INSTANT) {
|
155
|
-
setFilter(column, value);
|
154
|
+
// Automatically apply the filters if the updateMethod is instant
|
155
|
+
if (updateMethod === _constants.INSTANT) {
|
156
|
+
setAllFilters(filtersObjectArrayCopy);
|
156
157
|
}
|
157
|
-
}, [
|
158
|
+
}, [setAllFilters, updateMethod, filtersObjectArray]);
|
158
159
|
|
159
160
|
/** Effects */
|
160
161
|
(0, _hooks.useClickOutside)(filterFlyoutRef, function (target) {
|
161
|
-
if (shouldClickOutsideToClose === false) {
|
162
|
-
return;
|
163
|
-
}
|
164
162
|
var hasClickedOnDatePicker = target.closest('.flatpickr-calendar');
|
165
163
|
if (!open || hasClickedOnDatePicker) {
|
166
164
|
return;
|
@@ -361,14 +359,6 @@ FilterFlyout.propTypes = {
|
|
361
359
|
* Function that sets all the filters, this comes from the datagridState
|
362
360
|
*/
|
363
361
|
setAllFilters: _propTypes.default.func.isRequired,
|
364
|
-
/**
|
365
|
-
* Function that sets an individual filter, this comes from the datagridState
|
366
|
-
*/
|
367
|
-
setFilter: _propTypes.default.func.isRequired,
|
368
|
-
/**
|
369
|
-
* Boolean if you want the flyout to close when clicked outside of the parent
|
370
|
-
*/
|
371
|
-
shouldClickOutsideToClose: _propTypes.default.bool,
|
372
362
|
/**
|
373
363
|
* Title of the filter flyout
|
374
364
|
*/
|