@mui/x-data-grid 7.0.0-beta.4 → 7.0.0-beta.5
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/CHANGELOG.md +138 -14
- package/DataGrid/DataGrid.js +2 -0
- package/colDef/gridBooleanOperators.js +1 -1
- package/components/GridRow.d.ts +7 -9
- package/components/GridRow.js +36 -47
- package/components/cell/GridCell.d.ts +2 -1
- package/components/cell/GridCell.js +7 -3
- package/components/cell/GridSkeletonCell.d.ts +3 -2
- package/components/cell/GridSkeletonCell.js +14 -6
- package/components/columnSelection/GridCellCheckboxRenderer.js +6 -4
- package/components/columnsManagement/GridColumnsManagement.js +1 -1
- package/components/containers/GridRootStyles.js +9 -2
- package/components/virtualization/GridBottomContainer.js +1 -1
- package/components/virtualization/GridTopContainer.js +1 -1
- package/components/virtualization/GridVirtualScroller.js +2 -2
- package/components/virtualization/GridVirtualScrollerRenderZone.js +9 -3
- package/hooks/features/columnHeaders/useGridColumnHeaders.js +11 -8
- package/hooks/features/columns/gridColumnsSelector.d.ts +6 -0
- package/hooks/features/columns/gridColumnsSelector.js +8 -1
- package/hooks/features/columns/useGridColumns.js +4 -0
- package/hooks/features/editing/useGridRowEditing.js +1 -2
- package/hooks/features/filter/useGridFilter.js +2 -2
- package/hooks/features/rows/useGridRows.js +8 -4
- package/hooks/features/rows/useGridRowsMeta.js +5 -13
- package/hooks/features/sorting/gridSortingUtils.js +9 -1
- package/hooks/features/virtualization/gridVirtualizationSelectors.d.ts +0 -9
- package/hooks/features/virtualization/gridVirtualizationSelectors.js +0 -7
- package/hooks/features/virtualization/useGridVirtualScroller.d.ts +3 -0
- package/hooks/features/virtualization/useGridVirtualScroller.js +82 -138
- package/hooks/features/virtualization/useGridVirtualization.d.ts +0 -8
- package/hooks/features/virtualization/useGridVirtualization.js +1 -6
- package/hooks/utils/useTimeout.d.ts +5 -3
- package/hooks/utils/useTimeout.js +13 -5
- package/index.js +1 -1
- package/models/colDef/gridColDef.d.ts +7 -0
- package/modern/DataGrid/DataGrid.js +2 -0
- package/modern/colDef/gridBooleanOperators.js +1 -1
- package/modern/components/GridRow.js +35 -46
- package/modern/components/cell/GridCell.js +7 -3
- package/modern/components/cell/GridSkeletonCell.js +14 -6
- package/modern/components/columnSelection/GridCellCheckboxRenderer.js +6 -4
- package/modern/components/columnsManagement/GridColumnsManagement.js +1 -1
- package/modern/components/containers/GridRootStyles.js +9 -2
- package/modern/components/virtualization/GridBottomContainer.js +1 -1
- package/modern/components/virtualization/GridTopContainer.js +1 -1
- package/modern/components/virtualization/GridVirtualScroller.js +2 -2
- package/modern/components/virtualization/GridVirtualScrollerRenderZone.js +8 -3
- package/modern/hooks/features/columnHeaders/useGridColumnHeaders.js +11 -8
- package/modern/hooks/features/columns/gridColumnsSelector.js +8 -1
- package/modern/hooks/features/columns/useGridColumns.js +2 -0
- package/modern/hooks/features/editing/useGridRowEditing.js +1 -2
- package/modern/hooks/features/filter/useGridFilter.js +2 -2
- package/modern/hooks/features/rows/useGridRows.js +8 -4
- package/modern/hooks/features/rows/useGridRowsMeta.js +5 -13
- package/modern/hooks/features/sorting/gridSortingUtils.js +9 -1
- package/modern/hooks/features/virtualization/gridVirtualizationSelectors.js +0 -7
- package/modern/hooks/features/virtualization/useGridVirtualScroller.js +80 -136
- package/modern/hooks/features/virtualization/useGridVirtualization.js +1 -6
- package/modern/hooks/utils/useTimeout.js +13 -5
- package/modern/index.js +1 -1
- package/modern/utils/utils.js +9 -0
- package/node/DataGrid/DataGrid.js +1 -0
- package/node/colDef/gridBooleanOperators.js +1 -1
- package/node/components/GridRow.js +35 -46
- package/node/components/cell/GridCell.js +7 -3
- package/node/components/cell/GridSkeletonCell.js +15 -7
- package/node/components/columnSelection/GridCellCheckboxRenderer.js +6 -4
- package/node/components/columnsManagement/GridColumnsManagement.js +1 -1
- package/node/components/containers/GridRootStyles.js +9 -2
- package/node/components/virtualization/GridBottomContainer.js +1 -1
- package/node/components/virtualization/GridTopContainer.js +1 -1
- package/node/components/virtualization/GridVirtualScroller.js +2 -2
- package/node/components/virtualization/GridVirtualScrollerRenderZone.js +7 -2
- package/node/hooks/features/columnHeaders/useGridColumnHeaders.js +8 -5
- package/node/hooks/features/columns/gridColumnsSelector.js +9 -2
- package/node/hooks/features/columns/useGridColumns.js +2 -0
- package/node/hooks/features/editing/useGridRowEditing.js +1 -2
- package/node/hooks/features/filter/useGridFilter.js +2 -2
- package/node/hooks/features/rows/useGridRows.js +8 -4
- package/node/hooks/features/rows/useGridRowsMeta.js +5 -13
- package/node/hooks/features/sorting/gridSortingUtils.js +9 -1
- package/node/hooks/features/virtualization/gridVirtualizationSelectors.js +1 -8
- package/node/hooks/features/virtualization/useGridVirtualScroller.js +81 -136
- package/node/hooks/features/virtualization/useGridVirtualization.js +2 -7
- package/node/hooks/utils/useTimeout.js +13 -4
- package/node/index.js +1 -1
- package/node/utils/utils.js +12 -1
- package/package.json +1 -1
- package/utils/utils.d.ts +4 -0
- package/utils/utils.js +9 -0
|
@@ -4,19 +4,22 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
|
-
exports.GridSkeletonCell =
|
|
7
|
+
exports.GridSkeletonCell = void 0;
|
|
8
8
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
9
9
|
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
|
|
10
10
|
var React = _interopRequireWildcard(require("react"));
|
|
11
11
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
12
12
|
var _Skeleton = _interopRequireDefault(require("@mui/material/Skeleton"));
|
|
13
13
|
var _utils = require("@mui/utils");
|
|
14
|
+
var _fastMemo = require("../../utils/fastMemo");
|
|
15
|
+
var _utils2 = require("../../utils/utils");
|
|
14
16
|
var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
|
|
15
17
|
var _gridClasses = require("../../constants/gridClasses");
|
|
16
18
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
17
|
-
const _excluded = ["field", "align", "width", "
|
|
19
|
+
const _excluded = ["field", "align", "width", "height"];
|
|
18
20
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
19
21
|
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; }
|
|
22
|
+
const randomWidth = (0, _utils2.randomNumberBetween)(10000, 20, 80);
|
|
20
23
|
const useUtilityClasses = ownerState => {
|
|
21
24
|
const {
|
|
22
25
|
align,
|
|
@@ -31,7 +34,7 @@ function GridSkeletonCell(props) {
|
|
|
31
34
|
const {
|
|
32
35
|
align,
|
|
33
36
|
width,
|
|
34
|
-
|
|
37
|
+
height
|
|
35
38
|
} = props,
|
|
36
39
|
other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
|
|
37
40
|
const rootProps = (0, _useGridRootProps.useGridRootProps)();
|
|
@@ -40,14 +43,18 @@ function GridSkeletonCell(props) {
|
|
|
40
43
|
align
|
|
41
44
|
};
|
|
42
45
|
const classes = useUtilityClasses(ownerState);
|
|
46
|
+
const contentWidth = Math.round(randomWidth());
|
|
43
47
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", (0, _extends2.default)({
|
|
44
48
|
className: classes.root,
|
|
45
49
|
style: {
|
|
46
|
-
|
|
50
|
+
height,
|
|
51
|
+
maxWidth: width,
|
|
52
|
+
minWidth: width
|
|
47
53
|
}
|
|
48
54
|
}, other, {
|
|
49
55
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.default, {
|
|
50
|
-
width: `${contentWidth}
|
|
56
|
+
width: `${contentWidth}%`,
|
|
57
|
+
height: 25
|
|
51
58
|
})
|
|
52
59
|
}));
|
|
53
60
|
}
|
|
@@ -57,7 +64,8 @@ process.env.NODE_ENV !== "production" ? GridSkeletonCell.propTypes = {
|
|
|
57
64
|
// | To update them edit the TypeScript types and run "yarn proptypes" |
|
|
58
65
|
// ----------------------------------------------------------------------
|
|
59
66
|
align: _propTypes.default.string.isRequired,
|
|
60
|
-
contentWidth: _propTypes.default.number.isRequired,
|
|
61
67
|
field: _propTypes.default.string.isRequired,
|
|
68
|
+
height: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number]).isRequired,
|
|
62
69
|
width: _propTypes.default.number.isRequired
|
|
63
|
-
} : void 0;
|
|
70
|
+
} : void 0;
|
|
71
|
+
const Memoized = exports.GridSkeletonCell = (0, _fastMemo.fastMemo)(GridSkeletonCell);
|
|
@@ -45,7 +45,6 @@ const GridCellCheckboxForwardRef = exports.GridCellCheckboxForwardRef = /*#__PUR
|
|
|
45
45
|
const checkboxElement = React.useRef(null);
|
|
46
46
|
const rippleRef = React.useRef(null);
|
|
47
47
|
const handleRef = (0, _utils.unstable_useForkRef)(checkboxElement, ref);
|
|
48
|
-
const element = apiRef.current.getCellElement(id, field);
|
|
49
48
|
const handleChange = event => {
|
|
50
49
|
const params = {
|
|
51
50
|
value: event.target.checked,
|
|
@@ -54,10 +53,13 @@ const GridCellCheckboxForwardRef = exports.GridCellCheckboxForwardRef = /*#__PUR
|
|
|
54
53
|
apiRef.current.publishEvent('rowSelectionCheckboxChange', params, event);
|
|
55
54
|
};
|
|
56
55
|
React.useLayoutEffect(() => {
|
|
57
|
-
if (tabIndex === 0
|
|
58
|
-
element
|
|
56
|
+
if (tabIndex === 0) {
|
|
57
|
+
const element = apiRef.current.getCellElement(id, field);
|
|
58
|
+
if (element) {
|
|
59
|
+
element.tabIndex = -1;
|
|
60
|
+
}
|
|
59
61
|
}
|
|
60
|
-
}, [
|
|
62
|
+
}, [apiRef, tabIndex, id, field]);
|
|
61
63
|
React.useEffect(() => {
|
|
62
64
|
if (hasFocus) {
|
|
63
65
|
const input = checkboxElement.current?.querySelector('input');
|
|
@@ -161,7 +161,7 @@ function GridColumnsManagement(props) {
|
|
|
161
161
|
ownerState: rootProps,
|
|
162
162
|
children: apiRef.current.getLocaleText('columnsManagementNoColumns')
|
|
163
163
|
})]
|
|
164
|
-
}), !disableShowHideToggle
|
|
164
|
+
}), (!disableShowHideToggle || !disableResetButton) && currentColumns.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(GridColumnsManagementFooter, {
|
|
165
165
|
ownerState: rootProps,
|
|
166
166
|
className: classes.footer,
|
|
167
167
|
children: [!disableShowHideToggle ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormControlLabel.default, {
|
|
@@ -348,7 +348,7 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
|
|
|
348
348
|
[`& .${_gridClasses.gridClasses.columnSeparator}`]: {
|
|
349
349
|
visibility: 'hidden',
|
|
350
350
|
position: 'absolute',
|
|
351
|
-
zIndex:
|
|
351
|
+
zIndex: 3,
|
|
352
352
|
display: 'flex',
|
|
353
353
|
flexDirection: 'column',
|
|
354
354
|
justifyContent: 'center',
|
|
@@ -469,7 +469,8 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
|
|
|
469
469
|
lineHeight: 'inherit'
|
|
470
470
|
},
|
|
471
471
|
[`& .${_gridClasses.gridClasses.cellEmpty}`]: {
|
|
472
|
-
padding: 0
|
|
472
|
+
padding: 0,
|
|
473
|
+
height: 'unset'
|
|
473
474
|
},
|
|
474
475
|
[`& .${_gridClasses.gridClasses.cell}.${_gridClasses.gridClasses['cell--selectionMode']}`]: {
|
|
475
476
|
cursor: 'default'
|
|
@@ -585,6 +586,12 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
|
|
|
585
586
|
flex: '0 0 auto',
|
|
586
587
|
display: 'inline-block'
|
|
587
588
|
},
|
|
589
|
+
[`& .${_gridClasses.gridClasses.cellSkeleton}`]: {
|
|
590
|
+
flex: '0 0 auto',
|
|
591
|
+
height: '100%',
|
|
592
|
+
display: 'inline-flex',
|
|
593
|
+
alignItems: 'center'
|
|
594
|
+
},
|
|
588
595
|
[`& .${_gridClasses.gridClasses.columnHeaderDraggableContainer}`]: {
|
|
589
596
|
display: 'flex',
|
|
590
597
|
width: '100%',
|
|
@@ -22,7 +22,7 @@ const useUtilityClasses = () => {
|
|
|
22
22
|
};
|
|
23
23
|
const Element = (0, _system.styled)('div')({
|
|
24
24
|
position: 'sticky',
|
|
25
|
-
zIndex:
|
|
25
|
+
zIndex: 4,
|
|
26
26
|
bottom: 'calc(var(--DataGrid-hasScrollX) * var(--DataGrid-scrollbarSize))'
|
|
27
27
|
});
|
|
28
28
|
function GridBottomContainer(props) {
|
|
@@ -93,9 +93,9 @@ function GridVirtualScroller(props) {
|
|
|
93
93
|
virtualScroller: virtualScroller
|
|
94
94
|
})
|
|
95
95
|
})]
|
|
96
|
-
})), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridVirtualScrollbar.GridVirtualScrollbar, (0, _extends2.default)({
|
|
96
|
+
})), dimensions.hasScrollY && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridVirtualScrollbar.GridVirtualScrollbar, (0, _extends2.default)({
|
|
97
97
|
position: "vertical"
|
|
98
|
-
}, getScrollbarVerticalProps())), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridVirtualScrollbar.GridVirtualScrollbar, (0, _extends2.default)({
|
|
98
|
+
}, getScrollbarVerticalProps())), dimensions.hasScrollX && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridVirtualScrollbar.GridVirtualScrollbar, (0, _extends2.default)({
|
|
99
99
|
position: "horizontal"
|
|
100
100
|
}, getScrollbarHorizontalProps())), props.children]
|
|
101
101
|
}));
|
|
@@ -13,6 +13,7 @@ var _system = require("@mui/system");
|
|
|
13
13
|
var _utils = require("@mui/utils");
|
|
14
14
|
var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
|
|
15
15
|
var _useGridSelector = require("../../hooks/utils/useGridSelector");
|
|
16
|
+
var _rows = require("../../hooks/features/rows");
|
|
16
17
|
var _virtualization = require("../../hooks/features/virtualization");
|
|
17
18
|
var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
|
|
18
19
|
var _gridClasses = require("../../constants/gridClasses");
|
|
@@ -47,13 +48,17 @@ const GridVirtualScrollerRenderZone = exports.GridVirtualScrollerRenderZone = /*
|
|
|
47
48
|
const apiRef = (0, _useGridApiContext.useGridApiContext)();
|
|
48
49
|
const rootProps = (0, _useGridRootProps.useGridRootProps)();
|
|
49
50
|
const classes = useUtilityClasses(rootProps);
|
|
50
|
-
const
|
|
51
|
+
const offsetTop = (0, _useGridSelector.useGridSelector)(apiRef, () => {
|
|
52
|
+
const renderContext = (0, _virtualization.gridRenderContextSelector)(apiRef);
|
|
53
|
+
const rowsMeta = (0, _rows.gridRowsMetaSelector)(apiRef.current.state);
|
|
54
|
+
return rowsMeta.positions[renderContext.firstRowIndex] ?? 0;
|
|
55
|
+
});
|
|
51
56
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(VirtualScrollerRenderZoneRoot, (0, _extends2.default)({
|
|
52
57
|
ref: ref,
|
|
53
58
|
className: (0, _clsx.default)(classes.root, className),
|
|
54
59
|
ownerState: rootProps,
|
|
55
60
|
style: {
|
|
56
|
-
transform: `translate3d(0, ${
|
|
61
|
+
transform: `translate3d(0, ${offsetTop}px, 0)`
|
|
57
62
|
}
|
|
58
63
|
}, other));
|
|
59
64
|
});
|
|
@@ -16,6 +16,7 @@ var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
|
|
|
16
16
|
var _GridColumnHeaderItem = require("../../../components/columnHeaders/GridColumnHeaderItem");
|
|
17
17
|
var _dimensions = require("../dimensions");
|
|
18
18
|
var _virtualization = require("../virtualization");
|
|
19
|
+
var _useGridVirtualScroller = require("../virtualization/useGridVirtualScroller");
|
|
19
20
|
var _GridColumnGroupHeader = require("../../../components/columnHeaders/GridColumnGroupHeader");
|
|
20
21
|
var _columns = require("../columns");
|
|
21
22
|
var _GridScrollbarFillerCell = require("../../../components/GridScrollbarFillerCell");
|
|
@@ -25,7 +26,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
|
|
|
25
26
|
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; }
|
|
26
27
|
const SpaceFiller = (0, _styles.styled)('div')({
|
|
27
28
|
/* GridRootStyles conflict */
|
|
28
|
-
'
|
|
29
|
+
'&&&': {
|
|
29
30
|
padding: 0,
|
|
30
31
|
width: 'calc(var(--DataGrid-width) - var(--DataGrid-columnsTotalWidth))'
|
|
31
32
|
}
|
|
@@ -57,14 +58,16 @@ const useGridColumnHeaders = props => {
|
|
|
57
58
|
const [dragCol, setDragCol] = React.useState('');
|
|
58
59
|
const [resizeCol, setResizeCol] = React.useState('');
|
|
59
60
|
const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
|
|
61
|
+
const theme = (0, _styles.useTheme)();
|
|
60
62
|
const rootProps = (0, _useGridRootProps.useGridRootProps)();
|
|
61
63
|
const hasVirtualization = (0, _utils2.useGridSelector)(apiRef, _virtualization.gridVirtualizationColumnEnabledSelector);
|
|
62
64
|
const innerRef = React.useRef(null);
|
|
63
65
|
const handleInnerRef = (0, _utils.unstable_useForkRef)(innerRefProp, innerRef);
|
|
64
66
|
const dimensions = (0, _utils2.useGridSelector)(apiRef, _dimensions.gridDimensionsSelector);
|
|
65
|
-
const
|
|
67
|
+
const columnPositions = (0, _utils2.useGridSelector)(apiRef, _columns.gridColumnPositionsSelector);
|
|
66
68
|
const renderContext = (0, _utils2.useGridSelector)(apiRef, _virtualization.gridRenderContextColumnsSelector);
|
|
67
|
-
const
|
|
69
|
+
const pinnedColumns = (0, _utils2.useGridSelector)(apiRef, _columns.gridVisiblePinnedColumnDefinitionsSelector);
|
|
70
|
+
const offsetLeft = (0, _useGridVirtualScroller.computeOffsetLeft)(columnPositions, renderContext, theme.direction, pinnedColumns.left.length);
|
|
68
71
|
React.useEffect(() => {
|
|
69
72
|
apiRef.current.columnHeadersContainerElementRef.current.scrollLeft = 0;
|
|
70
73
|
}, [apiRef]);
|
|
@@ -96,8 +99,8 @@ const useGridColumnHeaders = props => {
|
|
|
96
99
|
const getFillers = (params, children, leftOverflow, borderTop = false) => {
|
|
97
100
|
const isPinnedRight = params?.position === _columns.GridPinnedColumnPosition.RIGHT;
|
|
98
101
|
const isNotPinned = params?.position === undefined;
|
|
99
|
-
const hasScrollbarFiller =
|
|
100
|
-
const leftOffsetWidth =
|
|
102
|
+
const hasScrollbarFiller = pinnedColumns.right.length > 0 && isPinnedRight || pinnedColumns.right.length === 0 && isNotPinned;
|
|
103
|
+
const leftOffsetWidth = offsetLeft - leftOverflow;
|
|
101
104
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
|
|
102
105
|
children: [isNotPinned && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
103
106
|
role: "presentation",
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.gridVisiblePinnedColumnDefinitionsSelector = exports.gridVisibleColumnFieldsSelector = exports.gridVisibleColumnDefinitionsSelector = exports.gridPinnedColumnsSelector = exports.gridFilterableColumnLookupSelector = exports.gridFilterableColumnDefinitionsSelector = exports.gridColumnsTotalWidthSelector = exports.gridColumnsStateSelector = exports.gridColumnVisibilityModelSelector = exports.gridColumnPositionsSelector = exports.gridColumnLookupSelector = exports.gridColumnFieldsSelector = exports.gridColumnDefinitionsSelector = void 0;
|
|
6
|
+
exports.gridVisiblePinnedColumnDefinitionsSelector = exports.gridVisibleColumnFieldsSelector = exports.gridVisibleColumnDefinitionsSelector = exports.gridPinnedColumnsSelector = exports.gridHasColSpanSelector = exports.gridFilterableColumnLookupSelector = exports.gridFilterableColumnDefinitionsSelector = exports.gridColumnsTotalWidthSelector = exports.gridColumnsStateSelector = exports.gridColumnVisibilityModelSelector = exports.gridColumnPositionsSelector = exports.gridColumnLookupSelector = exports.gridColumnFieldsSelector = exports.gridColumnDefinitionsSelector = void 0;
|
|
7
7
|
var _createSelector = require("../../../utils/createSelector");
|
|
8
8
|
var _gridColumnsInterfaces = require("./gridColumnsInterfaces");
|
|
9
9
|
var _gridCoreSelector = require("../../core/gridCoreSelector");
|
|
@@ -141,4 +141,11 @@ const gridFilterableColumnLookupSelector = exports.gridFilterableColumnLookupSel
|
|
|
141
141
|
acc[col.field] = col;
|
|
142
142
|
}
|
|
143
143
|
return acc;
|
|
144
|
-
}, {}));
|
|
144
|
+
}, {}));
|
|
145
|
+
|
|
146
|
+
/**
|
|
147
|
+
* Checks if some column has a colSpan field.
|
|
148
|
+
* @category Columns
|
|
149
|
+
* @ignore - Do not document
|
|
150
|
+
*/
|
|
151
|
+
const gridHasColSpanSelector = exports.gridHasColSpanSelector = (0, _createSelector.createSelectorMemoized)(gridColumnDefinitionsSelector, columns => columns.some(column => column.colSpan !== undefined));
|
|
@@ -55,6 +55,7 @@ function useGridColumns(apiRef, props) {
|
|
|
55
55
|
logger.debug('Updating columns state.');
|
|
56
56
|
apiRef.current.setState(mergeColumnsState(columnsState));
|
|
57
57
|
apiRef.current.publishEvent('columnsChange', columnsState.orderedFields);
|
|
58
|
+
apiRef.current.updateRenderContext?.();
|
|
58
59
|
apiRef.current.forceUpdate();
|
|
59
60
|
}, [logger, apiRef]);
|
|
60
61
|
|
|
@@ -84,6 +85,7 @@ function useGridColumns(apiRef, props) {
|
|
|
84
85
|
keepOnlyColumnsToUpsert: false
|
|
85
86
|
})
|
|
86
87
|
}));
|
|
88
|
+
apiRef.current.updateRenderContext?.();
|
|
87
89
|
apiRef.current.forceUpdate();
|
|
88
90
|
}
|
|
89
91
|
}, [apiRef]);
|
|
@@ -30,7 +30,7 @@ const useGridRowEditing = (apiRef, props) => {
|
|
|
30
30
|
const [rowModesModel, setRowModesModel] = React.useState({});
|
|
31
31
|
const rowModesModelRef = React.useRef(rowModesModel);
|
|
32
32
|
const prevRowModesModel = React.useRef({});
|
|
33
|
-
const focusTimeout = React.useRef(
|
|
33
|
+
const focusTimeout = React.useRef();
|
|
34
34
|
const nextFocusedCell = React.useRef(null);
|
|
35
35
|
const {
|
|
36
36
|
processRowUpdate,
|
|
@@ -85,7 +85,6 @@ const useGridRowEditing = (apiRef, props) => {
|
|
|
85
85
|
// focus we check if the next cell that received focus is from a different row.
|
|
86
86
|
nextFocusedCell.current = null;
|
|
87
87
|
focusTimeout.current = setTimeout(() => {
|
|
88
|
-
focusTimeout.current = null;
|
|
89
88
|
if (nextFocusedCell.current?.id !== params.id) {
|
|
90
89
|
// The row might have been deleted during the click
|
|
91
90
|
if (!apiRef.current.getRow(params.id)) {
|
|
@@ -115,7 +115,7 @@ const useGridFilter = (apiRef, props) => {
|
|
|
115
115
|
const filterModel = (0, _gridFilterSelector.gridFilterModelSelector)(apiRef);
|
|
116
116
|
const existingItems = [...filterModel.items];
|
|
117
117
|
items.forEach(item => {
|
|
118
|
-
const itemIndex =
|
|
118
|
+
const itemIndex = existingItems.findIndex(filterItem => filterItem.id === item.id);
|
|
119
119
|
if (itemIndex === -1) {
|
|
120
120
|
existingItems.push(item);
|
|
121
121
|
} else {
|
|
@@ -123,7 +123,7 @@ const useGridFilter = (apiRef, props) => {
|
|
|
123
123
|
}
|
|
124
124
|
});
|
|
125
125
|
apiRef.current.setFilterModel((0, _extends2.default)({}, filterModel, {
|
|
126
|
-
items
|
|
126
|
+
items: existingItems
|
|
127
127
|
}), 'upsertFilterItems');
|
|
128
128
|
}, [apiRef]);
|
|
129
129
|
const deleteFilterItem = React.useCallback(itemToDelete => {
|
|
@@ -270,13 +270,16 @@ const useGridRows = (apiRef, props) => {
|
|
|
270
270
|
const dataRowIdToIdLookup = (0, _extends2.default)({}, (0, _gridRowsSelector.gridRowsDataRowIdToIdLookupSelector)(apiRef));
|
|
271
271
|
const rootGroup = tree[_gridRowsUtils.GRID_ROOT_GROUP_ID];
|
|
272
272
|
const rootGroupChildren = [...rootGroup.children];
|
|
273
|
+
const seenIds = new Set();
|
|
273
274
|
for (let i = 0; i < newRows.length; i += 1) {
|
|
274
275
|
const rowModel = newRows[i];
|
|
275
276
|
const rowId = (0, _gridRowsUtils.getRowIdFromRowModel)(rowModel, props.getRowId, 'A row was provided without id when calling replaceRows().');
|
|
276
|
-
const [
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
277
|
+
const [removedRowId] = rootGroupChildren.splice(firstRowToRender + i, 1, rowId);
|
|
278
|
+
if (!seenIds.has(removedRowId)) {
|
|
279
|
+
delete dataRowIdToModelLookup[removedRowId];
|
|
280
|
+
delete dataRowIdToIdLookup[removedRowId];
|
|
281
|
+
delete tree[removedRowId];
|
|
282
|
+
}
|
|
280
283
|
const rowTreeNodeConfig = {
|
|
281
284
|
id: rowId,
|
|
282
285
|
depth: 0,
|
|
@@ -287,6 +290,7 @@ const useGridRows = (apiRef, props) => {
|
|
|
287
290
|
dataRowIdToModelLookup[rowId] = rowModel;
|
|
288
291
|
dataRowIdToIdLookup[rowId] = rowId;
|
|
289
292
|
tree[rowId] = rowTreeNodeConfig;
|
|
293
|
+
seenIds.add(rowId);
|
|
290
294
|
}
|
|
291
295
|
tree[_gridRowsUtils.GRID_ROOT_GROUP_ID] = (0, _extends2.default)({}, rootGroup, {
|
|
292
296
|
children: rootGroupChildren
|
|
@@ -115,14 +115,9 @@ const useGridRowsMeta = (apiRef, props) => {
|
|
|
115
115
|
} else {
|
|
116
116
|
rowsHeightLookup.current[row.id].needsFirstMeasurement = false;
|
|
117
117
|
}
|
|
118
|
-
const initialHeights = {
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
if (/^base[A-Z]/.test(key)) {
|
|
122
|
-
initialHeights[key] = sizes[key];
|
|
123
|
-
}
|
|
124
|
-
}
|
|
125
|
-
initialHeights.baseCenter = baseRowHeight;
|
|
118
|
+
const initialHeights = {
|
|
119
|
+
baseCenter: baseRowHeight
|
|
120
|
+
};
|
|
126
121
|
if (getRowSpacing) {
|
|
127
122
|
const indexRelativeToCurrentPage = apiRef.current.getRowIndexRelativeToVisibleRows(row.id);
|
|
128
123
|
const spacing = getRowSpacing((0, _extends2.default)({}, row, {
|
|
@@ -140,19 +135,16 @@ const useGridRowsMeta = (apiRef, props) => {
|
|
|
140
135
|
const positions = [];
|
|
141
136
|
const currentPageTotalHeight = currentPage.rows.reduce((acc, row) => {
|
|
142
137
|
positions.push(acc);
|
|
143
|
-
let maximumBaseSize = 0;
|
|
144
138
|
let otherSizes = 0;
|
|
145
139
|
const processedSizes = calculateRowProcessedSizes(row);
|
|
146
140
|
/* eslint-disable-next-line no-restricted-syntax, guard-for-in */
|
|
147
141
|
for (const key in processedSizes) {
|
|
148
142
|
const value = processedSizes[key];
|
|
149
|
-
if (
|
|
150
|
-
maximumBaseSize = value > maximumBaseSize ? value : maximumBaseSize;
|
|
151
|
-
} else {
|
|
143
|
+
if (key !== 'baseCenter') {
|
|
152
144
|
otherSizes += value;
|
|
153
145
|
}
|
|
154
146
|
}
|
|
155
|
-
return acc +
|
|
147
|
+
return acc + processedSizes.baseCenter + otherSizes;
|
|
156
148
|
}, 0);
|
|
157
149
|
pinnedRows?.top?.forEach(row => {
|
|
158
150
|
calculateRowProcessedSizes(row);
|
|
@@ -37,7 +37,15 @@ const parseSortItem = (sortItem, apiRef) => {
|
|
|
37
37
|
if (!column || sortItem.sort === null) {
|
|
38
38
|
return null;
|
|
39
39
|
}
|
|
40
|
-
|
|
40
|
+
let comparator;
|
|
41
|
+
if (column.getSortComparator) {
|
|
42
|
+
comparator = column.getSortComparator(sortItem.sort);
|
|
43
|
+
} else {
|
|
44
|
+
comparator = isDesc(sortItem.sort) ? (...args) => -1 * column.sortComparator(...args) : column.sortComparator;
|
|
45
|
+
}
|
|
46
|
+
if (!comparator) {
|
|
47
|
+
return null;
|
|
48
|
+
}
|
|
41
49
|
const getSortCellParams = id => ({
|
|
42
50
|
id,
|
|
43
51
|
field: column.field,
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.gridVirtualizationSelector = exports.gridVirtualizationEnabledSelector = exports.gridVirtualizationColumnEnabledSelector = exports.gridRenderContextSelector = exports.gridRenderContextColumnsSelector =
|
|
6
|
+
exports.gridVirtualizationSelector = exports.gridVirtualizationEnabledSelector = exports.gridVirtualizationColumnEnabledSelector = exports.gridRenderContextSelector = exports.gridRenderContextColumnsSelector = void 0;
|
|
7
7
|
var _createSelector = require("../../../utils/createSelector");
|
|
8
8
|
/**
|
|
9
9
|
* Get the columns state
|
|
@@ -31,13 +31,6 @@ const gridVirtualizationColumnEnabledSelector = exports.gridVirtualizationColumn
|
|
|
31
31
|
*/
|
|
32
32
|
const gridRenderContextSelector = exports.gridRenderContextSelector = (0, _createSelector.createSelector)(gridVirtualizationSelector, state => state.renderContext);
|
|
33
33
|
|
|
34
|
-
/**
|
|
35
|
-
* Get the offsets
|
|
36
|
-
* @category Virtualization
|
|
37
|
-
* @ignore - do not document.
|
|
38
|
-
*/
|
|
39
|
-
const gridOffsetsSelector = exports.gridOffsetsSelector = (0, _createSelector.createSelector)(gridVirtualizationSelector, state => state.offsets);
|
|
40
|
-
|
|
41
34
|
/**
|
|
42
35
|
* Get the render context, with only columns filled in.
|
|
43
36
|
* This is cached, so it can be used to only re-render when the column interval changes.
|