@mui/x-data-grid-pro 8.19.0 → 8.20.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/CHANGELOG.md +62 -0
- package/DataGridPro/DataGridPro.js +29 -2
- package/components/GridRowReorderCell.js +15 -3
- package/components/headerFiltering/GridHeaderFilterCell.js +2 -3
- package/esm/DataGridPro/DataGridPro.js +29 -2
- package/esm/components/GridRowReorderCell.js +15 -3
- package/esm/components/headerFiltering/GridHeaderFilterCell.js +2 -3
- package/esm/hooks/features/dataSource/useGridDataSourceBasePro.js +1 -1
- package/esm/hooks/features/rowReorder/commonReorderConditions.d.ts +30 -0
- package/esm/hooks/features/rowReorder/commonReorderConditions.js +78 -0
- package/esm/hooks/features/rowReorder/index.d.ts +2 -1
- package/esm/hooks/features/rowReorder/index.js +2 -1
- package/esm/hooks/features/rowReorder/models.d.ts +17 -0
- package/esm/hooks/features/rowReorder/models.js +1 -0
- package/esm/hooks/features/rowReorder/reorderExecutor.d.ts +27 -0
- package/esm/hooks/features/rowReorder/reorderExecutor.js +29 -0
- package/esm/hooks/features/rowReorder/reorderValidator.d.ts +12 -0
- package/esm/hooks/features/rowReorder/reorderValidator.js +14 -0
- package/esm/hooks/features/rowReorder/types.d.ts +25 -0
- package/esm/hooks/features/rowReorder/types.js +1 -0
- package/esm/hooks/features/rowReorder/useGridRowReorder.d.ts +1 -1
- package/esm/hooks/features/rowReorder/useGridRowReorder.js +167 -80
- package/esm/hooks/features/rowReorder/utils.d.ts +82 -0
- package/esm/hooks/features/rowReorder/utils.js +259 -0
- package/esm/hooks/features/rows/useGridRowsOverridableMethods.d.ts +7 -0
- package/esm/hooks/features/rows/useGridRowsOverridableMethods.js +59 -0
- package/esm/hooks/features/treeData/treeDataReorderExecutor.d.ts +11 -0
- package/esm/hooks/features/treeData/treeDataReorderExecutor.js +534 -0
- package/esm/hooks/features/treeData/treeDataReorderValidator.d.ts +2 -0
- package/esm/hooks/features/treeData/treeDataReorderValidator.js +35 -0
- package/esm/hooks/features/treeData/useGridTreeData.d.ts +3 -3
- package/esm/hooks/features/treeData/useGridTreeData.js +49 -4
- package/esm/hooks/features/treeData/utils.d.ts +8 -0
- package/esm/hooks/features/treeData/utils.js +96 -0
- package/esm/index.js +1 -1
- package/esm/internals/index.d.ts +8 -0
- package/esm/internals/index.js +6 -0
- package/esm/models/dataGridProProps.d.ts +32 -4
- package/esm/models/gridRowOrderChangeParams.d.ts +29 -5
- package/hooks/features/dataSource/useGridDataSourceBasePro.js +1 -1
- package/hooks/features/rowReorder/commonReorderConditions.d.ts +30 -0
- package/hooks/features/rowReorder/commonReorderConditions.js +84 -0
- package/hooks/features/rowReorder/index.d.ts +2 -1
- package/hooks/features/rowReorder/models.d.ts +17 -0
- package/hooks/features/rowReorder/models.js +5 -0
- package/hooks/features/rowReorder/reorderExecutor.d.ts +27 -0
- package/hooks/features/rowReorder/reorderExecutor.js +37 -0
- package/hooks/features/rowReorder/reorderValidator.d.ts +12 -0
- package/hooks/features/rowReorder/reorderValidator.js +21 -0
- package/hooks/features/rowReorder/types.d.ts +25 -0
- package/hooks/features/rowReorder/types.js +5 -0
- package/hooks/features/rowReorder/useGridRowReorder.d.ts +1 -1
- package/hooks/features/rowReorder/useGridRowReorder.js +168 -81
- package/hooks/features/rowReorder/utils.d.ts +82 -0
- package/hooks/features/rowReorder/utils.js +286 -0
- package/hooks/features/rows/useGridRowsOverridableMethods.d.ts +7 -0
- package/hooks/features/rows/useGridRowsOverridableMethods.js +67 -0
- package/hooks/features/treeData/treeDataReorderExecutor.d.ts +11 -0
- package/hooks/features/treeData/treeDataReorderExecutor.js +541 -0
- package/hooks/features/treeData/treeDataReorderValidator.d.ts +2 -0
- package/hooks/features/treeData/treeDataReorderValidator.js +41 -0
- package/hooks/features/treeData/useGridTreeData.d.ts +3 -3
- package/hooks/features/treeData/useGridTreeData.js +48 -3
- package/hooks/features/treeData/utils.d.ts +8 -0
- package/hooks/features/treeData/utils.js +109 -0
- package/index.js +1 -1
- package/internals/index.d.ts +8 -0
- package/internals/index.js +53 -1
- package/models/dataGridProProps.d.ts +32 -4
- package/models/gridRowOrderChangeParams.d.ts +29 -5
- package/package.json +2 -2
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
|
+
import { GRID_ROOT_GROUP_ID, gridRowsLookupSelector, gridRowTreeSelector } from '@mui/x-data-grid';
|
|
3
|
+
import { warnOnce } from '@mui/x-internals/warning';
|
|
4
|
+
import { BatchRowUpdater, collectAllDescendants, updateDescendantDepths } from "../rowReorder/utils.js";
|
|
5
|
+
export const buildTreeDataPath = (node, tree) => {
|
|
6
|
+
const path = [];
|
|
7
|
+
let current = node;
|
|
8
|
+
while (current && current.id !== GRID_ROOT_GROUP_ID) {
|
|
9
|
+
if ((current.type === 'leaf' || current.type === 'group') && current.groupingKey !== null) {
|
|
10
|
+
path.unshift(String(current.groupingKey));
|
|
11
|
+
}
|
|
12
|
+
current = tree[current.parent];
|
|
13
|
+
}
|
|
14
|
+
return path;
|
|
15
|
+
};
|
|
16
|
+
export function displaySetTreeDataPathWarning(operationName) {
|
|
17
|
+
warnOnce(`MUI X: ${operationName} requires \`setTreeDataPath()\` prop to update row data paths. ` + 'Please provide a `setTreeDataPath()` function to enable this feature.', 'warning');
|
|
18
|
+
}
|
|
19
|
+
export function removeNodeFromSourceParent(updatedTree, sourceNode) {
|
|
20
|
+
const sourceParent = updatedTree[sourceNode.parent];
|
|
21
|
+
const sourceChildren = sourceParent.children.filter(id => id !== sourceNode.id);
|
|
22
|
+
if (sourceChildren.length === 0) {
|
|
23
|
+
updatedTree[sourceNode.parent] = _extends({}, sourceParent, {
|
|
24
|
+
type: 'leaf',
|
|
25
|
+
children: undefined
|
|
26
|
+
});
|
|
27
|
+
} else {
|
|
28
|
+
updatedTree[sourceNode.parent] = _extends({}, sourceParent, {
|
|
29
|
+
children: sourceChildren
|
|
30
|
+
});
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
export async function updateLeafPath(sourceNode, targetPath, ctx) {
|
|
34
|
+
const {
|
|
35
|
+
apiRef,
|
|
36
|
+
setTreeDataPath,
|
|
37
|
+
processRowUpdate,
|
|
38
|
+
onProcessRowUpdateError
|
|
39
|
+
} = ctx;
|
|
40
|
+
const dataRowIdToModelLookup = gridRowsLookupSelector(apiRef);
|
|
41
|
+
const leafKey = sourceNode.type === 'leaf' ? sourceNode.groupingKey : null;
|
|
42
|
+
const newPath = leafKey !== null ? [...targetPath, String(leafKey)] : targetPath;
|
|
43
|
+
const originalRow = dataRowIdToModelLookup[sourceNode.id];
|
|
44
|
+
const updatedRow = setTreeDataPath(newPath, originalRow);
|
|
45
|
+
const updater = new BatchRowUpdater(apiRef, processRowUpdate, onProcessRowUpdateError);
|
|
46
|
+
updater.queueUpdate(sourceNode.id, originalRow, updatedRow);
|
|
47
|
+
const {
|
|
48
|
+
successful,
|
|
49
|
+
updates
|
|
50
|
+
} = await updater.executeAll();
|
|
51
|
+
if (successful.length === 0) {
|
|
52
|
+
return null;
|
|
53
|
+
}
|
|
54
|
+
return updates[0];
|
|
55
|
+
}
|
|
56
|
+
export async function updateGroupHierarchyPaths(sourceNode, sourceBasePath, targetPath, ctx) {
|
|
57
|
+
const {
|
|
58
|
+
apiRef,
|
|
59
|
+
setTreeDataPath,
|
|
60
|
+
processRowUpdate,
|
|
61
|
+
onProcessRowUpdateError
|
|
62
|
+
} = ctx;
|
|
63
|
+
const rowTree = gridRowTreeSelector(apiRef);
|
|
64
|
+
const dataRowIdToModelLookup = gridRowsLookupSelector(apiRef);
|
|
65
|
+
const nodesToUpdate = collectAllDescendants(sourceNode, rowTree);
|
|
66
|
+
nodesToUpdate.unshift(sourceNode); // Include the group itself
|
|
67
|
+
|
|
68
|
+
const sourceDepth = sourceBasePath.length;
|
|
69
|
+
const updater = new BatchRowUpdater(apiRef, processRowUpdate, onProcessRowUpdateError);
|
|
70
|
+
for (const node of nodesToUpdate) {
|
|
71
|
+
const originalRow = dataRowIdToModelLookup[node.id];
|
|
72
|
+
const currentPath = buildTreeDataPath(node, rowTree);
|
|
73
|
+
const relativePath = currentPath.slice(sourceDepth);
|
|
74
|
+
const newPath = [...targetPath, ...relativePath];
|
|
75
|
+
const updatedRow = setTreeDataPath(newPath, originalRow);
|
|
76
|
+
updater.queueUpdate(node.id, originalRow, updatedRow);
|
|
77
|
+
}
|
|
78
|
+
const {
|
|
79
|
+
successful,
|
|
80
|
+
updates
|
|
81
|
+
} = await updater.executeAll();
|
|
82
|
+
if (successful.length === 0) {
|
|
83
|
+
return [];
|
|
84
|
+
}
|
|
85
|
+
return updates;
|
|
86
|
+
}
|
|
87
|
+
export function updateNodeParentAndDepth(updatedTree, node, newParentId, newDepth) {
|
|
88
|
+
updatedTree[node.id] = _extends({}, node, {
|
|
89
|
+
parent: newParentId,
|
|
90
|
+
depth: newDepth
|
|
91
|
+
});
|
|
92
|
+
if (node.type === 'group') {
|
|
93
|
+
const depthDiff = newDepth - node.depth;
|
|
94
|
+
updateDescendantDepths(node, updatedTree, depthDiff);
|
|
95
|
+
}
|
|
96
|
+
}
|
package/esm/index.js
CHANGED
package/esm/internals/index.d.ts
CHANGED
|
@@ -12,6 +12,7 @@ export { useGridDetailPanel, detailPanelStateInitializer } from "../hooks/featur
|
|
|
12
12
|
export { useGridDetailPanelPreProcessors } from "../hooks/features/detailPanel/useGridDetailPanelPreProcessors.js";
|
|
13
13
|
export { useGridInfiniteLoader } from "../hooks/features/infiniteLoader/useGridInfiniteLoader.js";
|
|
14
14
|
export { useGridRowReorder, rowReorderStateInitializer } from "../hooks/features/rowReorder/useGridRowReorder.js";
|
|
15
|
+
export { useGridRowsOverridableMethods as useGridRowsOverridableMethodsPro } from "../hooks/features/rows/useGridRowsOverridableMethods.js";
|
|
15
16
|
export { useGridRowReorderPreProcessors } from "../hooks/features/rowReorder/useGridRowReorderPreProcessors.js";
|
|
16
17
|
export type { GridRowReorderPrivateApi } from "../models/gridRowReorderApi.js";
|
|
17
18
|
export { useGridTreeData } from "../hooks/features/treeData/useGridTreeData.js";
|
|
@@ -38,4 +39,11 @@ export declare enum RowGroupingStrategy {
|
|
|
38
39
|
Default = "grouping-columns",
|
|
39
40
|
DataSource = "grouping-columns-data-source",
|
|
40
41
|
}
|
|
42
|
+
export { RowReorderValidator } from "../hooks/features/rowReorder/reorderValidator.js";
|
|
43
|
+
export type { ValidationRule } from "../hooks/features/rowReorder/reorderValidator.js";
|
|
44
|
+
export { RowReorderExecutor, BaseReorderOperation } from "../hooks/features/rowReorder/reorderExecutor.js";
|
|
45
|
+
export { SameParentSwapOperation } from "../hooks/features/treeData/treeDataReorderExecutor.js";
|
|
46
|
+
export type { ReorderExecutionContext, ReorderOperation, ReorderOperationType } from "../hooks/features/rowReorder/types.js";
|
|
47
|
+
export { commonReorderConditions } from "../hooks/features/rowReorder/commonReorderConditions.js";
|
|
48
|
+
export * as rowReorderUtils from "../hooks/features/rowReorder/utils.js";
|
|
41
49
|
export * from "./propValidation.js";
|
package/esm/internals/index.js
CHANGED
|
@@ -16,6 +16,7 @@ export { useGridDetailPanel, detailPanelStateInitializer } from "../hooks/featur
|
|
|
16
16
|
export { useGridDetailPanelPreProcessors } from "../hooks/features/detailPanel/useGridDetailPanelPreProcessors.js";
|
|
17
17
|
export { useGridInfiniteLoader } from "../hooks/features/infiniteLoader/useGridInfiniteLoader.js";
|
|
18
18
|
export { useGridRowReorder, rowReorderStateInitializer } from "../hooks/features/rowReorder/useGridRowReorder.js";
|
|
19
|
+
export { useGridRowsOverridableMethods as useGridRowsOverridableMethodsPro } from "../hooks/features/rows/useGridRowsOverridableMethods.js";
|
|
19
20
|
export { useGridRowReorderPreProcessors } from "../hooks/features/rowReorder/useGridRowReorderPreProcessors.js";
|
|
20
21
|
export { useGridTreeData } from "../hooks/features/treeData/useGridTreeData.js";
|
|
21
22
|
export { useGridTreeDataPreProcessors } from "../hooks/features/treeData/useGridTreeDataPreProcessors.js";
|
|
@@ -39,4 +40,9 @@ export let RowGroupingStrategy = /*#__PURE__*/function (RowGroupingStrategy) {
|
|
|
39
40
|
RowGroupingStrategy["DataSource"] = "grouping-columns-data-source";
|
|
40
41
|
return RowGroupingStrategy;
|
|
41
42
|
}({});
|
|
43
|
+
export { RowReorderValidator } from "../hooks/features/rowReorder/reorderValidator.js";
|
|
44
|
+
export { RowReorderExecutor, BaseReorderOperation } from "../hooks/features/rowReorder/reorderExecutor.js";
|
|
45
|
+
export { SameParentSwapOperation } from "../hooks/features/treeData/treeDataReorderExecutor.js";
|
|
46
|
+
export { commonReorderConditions } from "../hooks/features/rowReorder/commonReorderConditions.js";
|
|
47
|
+
export * as rowReorderUtils from "../hooks/features/rowReorder/utils.js";
|
|
42
48
|
export * from "./propValidation.js";
|
|
@@ -3,12 +3,14 @@ import { RefObject } from '@mui/x-internals/types';
|
|
|
3
3
|
import { GridEventListener, GridCallbackDetails, GridRowParams, GridRowId, GridValidRowModel, GridGroupNode, GridFeatureMode, GridListViewColDef, GridGetRowsError, GridUpdateRowError } from '@mui/x-data-grid';
|
|
4
4
|
import type { GridExperimentalFeatures, DataGridPropsWithoutDefaultValue, DataGridPropsWithDefaultValues, DataGridPropsWithComplexDefaultValueAfterProcessing, DataGridPropsWithComplexDefaultValueBeforeProcessing, GridPinnedColumnFields, DataGridProSharedPropsWithDefaultValue, DataGridProSharedPropsWithoutDefaultValue } from '@mui/x-data-grid/internals';
|
|
5
5
|
import type { GridPinnedRowsProp } from "../hooks/features/rowPinning/index.js";
|
|
6
|
-
import { GridApiPro } from "./gridApiPro.js";
|
|
6
|
+
import type { GridApiPro } from "./gridApiPro.js";
|
|
7
7
|
import { GridGroupingColDefOverride, GridGroupingColDefOverrideParams } from "./gridGroupingColDefOverride.js";
|
|
8
|
-
import { GridInitialStatePro } from "./gridStatePro.js";
|
|
9
|
-
import { GridProSlotsComponent } from "./gridProSlotsComponent.js";
|
|
8
|
+
import type { GridInitialStatePro } from "./gridStatePro.js";
|
|
9
|
+
import type { GridProSlotsComponent } from "./gridProSlotsComponent.js";
|
|
10
10
|
import type { GridProSlotProps } from "./gridProSlotProps.js";
|
|
11
|
-
import { GridDataSourcePro as GridDataSource, GridGetRowsParamsPro as GridGetRowsParams } from "../hooks/features/dataSource/models.js";
|
|
11
|
+
import type { GridDataSourcePro as GridDataSource, GridGetRowsParamsPro as GridGetRowsParams } from "../hooks/features/dataSource/models.js";
|
|
12
|
+
import type { ReorderValidationContext } from "../hooks/features/rowReorder/models.js";
|
|
13
|
+
import type { IsRowReorderableParams } from "../hooks/features/rowReorder/index.js";
|
|
12
14
|
export interface GridExperimentalProFeatures extends GridExperimentalFeatures {}
|
|
13
15
|
interface DataGridProPropsWithComplexDefaultValueBeforeProcessing extends Omit<DataGridPropsWithComplexDefaultValueBeforeProcessing, 'components'> {
|
|
14
16
|
/**
|
|
@@ -127,6 +129,15 @@ interface DataGridProRegularProps<R extends GridValidRowModel> {
|
|
|
127
129
|
* @returns {string[]} The path to the row.
|
|
128
130
|
*/
|
|
129
131
|
getTreeDataPath?: (row: R) => readonly string[];
|
|
132
|
+
/**
|
|
133
|
+
* Updates the tree path in a row model.
|
|
134
|
+
* Used when reordering rows across different parents in tree data.
|
|
135
|
+
* @template R
|
|
136
|
+
* @param {string[]} path The new path for the row.
|
|
137
|
+
* @param {R} row The row model to update.
|
|
138
|
+
* @returns {R} The updated row model with the new path.
|
|
139
|
+
*/
|
|
140
|
+
setTreeDataPath?: (path: string[], row: R) => R;
|
|
130
141
|
}
|
|
131
142
|
export interface DataGridProPropsWithoutDefaultValue<R extends GridValidRowModel = any> extends Omit<DataGridPropsWithoutDefaultValue<R>, 'initialState' | 'componentsProps' | 'slotProps' | 'dataSource' | 'onDataSourceError'>, DataGridProRegularProps<R>, DataGridProSharedPropsWithoutDefaultValue {
|
|
132
143
|
/**
|
|
@@ -218,5 +229,22 @@ export interface DataGridProPropsWithoutDefaultValue<R extends GridValidRowModel
|
|
|
218
229
|
* @param {GridGetRowsError | GridUpdateRowError} error The data source error object.
|
|
219
230
|
*/
|
|
220
231
|
onDataSourceError?: (error: GridGetRowsError<GridGetRowsParams> | GridUpdateRowError) => void;
|
|
232
|
+
/**
|
|
233
|
+
* Indicates whether a row is reorderable.
|
|
234
|
+
* @param {object} params With all properties from the row.
|
|
235
|
+
* @param {R} params.row The row model of the row that the current cell belongs to.
|
|
236
|
+
* @param {GridTreeNode} params.rowNode The node of the row that the current cell belongs to.
|
|
237
|
+
* @returns {boolean} A boolean indicating if the row is reorderable.
|
|
238
|
+
*/
|
|
239
|
+
isRowReorderable?: (params: IsRowReorderableParams) => boolean;
|
|
240
|
+
/**
|
|
241
|
+
* Indicates if a row reorder attempt is valid.
|
|
242
|
+
* Can be used to disable certain row reorder operations based on the context.
|
|
243
|
+
* The internal validation is still applied, preventing unsupported use-cases.
|
|
244
|
+
* Use `isValidRowReorder()` to add additional validation rules to the default ones.
|
|
245
|
+
* @param {ReorderValidationContext} context The context object containing all information about the reorder operation.
|
|
246
|
+
* @returns {boolean} A boolean indicating if the reorder operation should go through.
|
|
247
|
+
*/
|
|
248
|
+
isValidRowReorder?: (context: ReorderValidationContext) => boolean;
|
|
221
249
|
}
|
|
222
250
|
export {};
|
|
@@ -1,18 +1,42 @@
|
|
|
1
|
-
import { GridRowModel } from '@mui/x-data-grid';
|
|
1
|
+
import { GridRowModel, GridRowId } from '@mui/x-data-grid';
|
|
2
2
|
/**
|
|
3
3
|
* Object passed as parameter of the row order change event.
|
|
4
|
+
* @demos
|
|
5
|
+
* - [Flat row reordering](/x/react-data-grid/row-ordering/#implementing-row-reordering)
|
|
6
|
+
* - [Tree data reordering](/x/react-data-grid/tree-data/#drag-and-drop-tree-data-reordering)
|
|
7
|
+
* - [Row grouping reordering](/x/react-data-grid/row-grouping/#drag-and-drop-group-reordering)
|
|
4
8
|
*/
|
|
5
9
|
export interface GridRowOrderChangeParams {
|
|
6
10
|
/**
|
|
7
|
-
* The row data.
|
|
11
|
+
* The row data of the primary row being moved.
|
|
12
|
+
* For group moves, this represents the group row itself.
|
|
13
|
+
* Descendants move should be handled as data updates. e.g. using `processRowUpdate()`
|
|
8
14
|
*/
|
|
9
15
|
row: GridRowModel;
|
|
10
16
|
/**
|
|
11
|
-
* The
|
|
17
|
+
* The old index of the row.
|
|
18
|
+
* - For flat data: Position in the flat array.
|
|
19
|
+
* - For nested data: Position within oldParent's children array (0-based).
|
|
20
|
+
*/
|
|
21
|
+
oldIndex: number;
|
|
22
|
+
/**
|
|
23
|
+
* The target index of the row.
|
|
24
|
+
* - For flat data: New position in the flat array.
|
|
25
|
+
* - For nested data: Position within newParent's children array (0-based).
|
|
12
26
|
*/
|
|
13
27
|
targetIndex: number;
|
|
14
28
|
/**
|
|
15
|
-
* The
|
|
29
|
+
* The parent row ID before the move.
|
|
30
|
+
* - For flat data: `null`
|
|
31
|
+
* - For nested row at root level: `null`.
|
|
32
|
+
* - For nested row at levels below root: Parent row's ID.
|
|
16
33
|
*/
|
|
17
|
-
|
|
34
|
+
oldParent: GridRowId | null;
|
|
35
|
+
/**
|
|
36
|
+
* The parent row ID after the move.
|
|
37
|
+
* - For flat data: `null`.
|
|
38
|
+
* - For nested row at root level: `null`.
|
|
39
|
+
* - For nested row at levels below root: Parent row's ID.
|
|
40
|
+
*/
|
|
41
|
+
newParent: GridRowId | null;
|
|
18
42
|
}
|
|
@@ -141,7 +141,7 @@ const useGridDataSourceBasePro = (apiRef, props, options = {}) => {
|
|
|
141
141
|
params: fetchParams,
|
|
142
142
|
cause: childrenFetchError
|
|
143
143
|
}));
|
|
144
|
-
} else
|
|
144
|
+
} else {
|
|
145
145
|
(0, _warning.warnOnce)(['MUI X: A call to `dataSource.getRows()` threw an error which was not handled because `onDataSourceError()` is missing.', 'To handle the error pass a callback to the `onDataSourceError` prop, for example `<DataGrid onDataSourceError={(error) => ...} />`.', 'For more detail, see https://mui.com/x/react-data-grid/server-side-data/#error-handling.'], 'error');
|
|
146
146
|
}
|
|
147
147
|
} finally {
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import type { ReorderValidationContext as Ctx } from "./models.js";
|
|
2
|
+
/**
|
|
3
|
+
* Reusable validation conditions for row reordering validation
|
|
4
|
+
*/
|
|
5
|
+
export declare const commonReorderConditions: {
|
|
6
|
+
isGroupToGroup: (ctx: Ctx) => boolean;
|
|
7
|
+
isLeafToLeaf: (ctx: Ctx) => boolean;
|
|
8
|
+
isLeafToGroup: (ctx: Ctx) => boolean;
|
|
9
|
+
isGroupToLeaf: (ctx: Ctx) => boolean;
|
|
10
|
+
isDropAbove: (ctx: Ctx) => boolean;
|
|
11
|
+
isDropBelow: (ctx: Ctx) => boolean;
|
|
12
|
+
sameDepth: (ctx: Ctx) => boolean;
|
|
13
|
+
sourceDepthGreater: (ctx: Ctx) => boolean;
|
|
14
|
+
targetDepthIsSourceMinusOne: (ctx: Ctx) => boolean;
|
|
15
|
+
sameParent: (ctx: Ctx) => boolean;
|
|
16
|
+
targetGroupExpanded: (ctx: Ctx) => boolean;
|
|
17
|
+
targetGroupCollapsed: (ctx: Ctx) => boolean;
|
|
18
|
+
hasPrevNode: (ctx: Ctx) => boolean;
|
|
19
|
+
hasNextNode: (ctx: Ctx) => boolean;
|
|
20
|
+
prevIsLeaf: (ctx: Ctx) => boolean;
|
|
21
|
+
prevIsGroup: (ctx: Ctx) => boolean;
|
|
22
|
+
nextIsLeaf: (ctx: Ctx) => boolean;
|
|
23
|
+
nextIsGroup: (ctx: Ctx) => boolean;
|
|
24
|
+
prevDepthEquals: (ctx: Ctx, depth: number) => boolean;
|
|
25
|
+
prevDepthEqualsSource: (ctx: Ctx) => boolean;
|
|
26
|
+
prevBelongsToSource: (ctx: Ctx) => boolean;
|
|
27
|
+
isAdjacentPosition: (ctx: Ctx) => boolean;
|
|
28
|
+
targetFirstChildIsGroupWithSourceDepth: (ctx: Ctx) => boolean;
|
|
29
|
+
targetFirstChildDepthEqualsSource: (ctx: Ctx) => boolean;
|
|
30
|
+
};
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.commonReorderConditions = void 0;
|
|
7
|
+
var _xDataGrid = require("@mui/x-data-grid");
|
|
8
|
+
/**
|
|
9
|
+
* Reusable validation conditions for row reordering validation
|
|
10
|
+
*/
|
|
11
|
+
const commonReorderConditions = exports.commonReorderConditions = {
|
|
12
|
+
// Node type checks
|
|
13
|
+
isGroupToGroup: ctx => ctx.sourceNode.type === 'group' && ctx.targetNode.type === 'group',
|
|
14
|
+
isLeafToLeaf: ctx => ctx.sourceNode.type === 'leaf' && ctx.targetNode.type === 'leaf',
|
|
15
|
+
isLeafToGroup: ctx => ctx.sourceNode.type === 'leaf' && ctx.targetNode.type === 'group',
|
|
16
|
+
isGroupToLeaf: ctx => ctx.sourceNode.type === 'group' && ctx.targetNode.type === 'leaf',
|
|
17
|
+
// Drop position checks
|
|
18
|
+
isDropAbove: ctx => ctx.dropPosition === 'above',
|
|
19
|
+
isDropBelow: ctx => ctx.dropPosition === 'below',
|
|
20
|
+
// Depth checks
|
|
21
|
+
sameDepth: ctx => ctx.sourceNode.depth === ctx.targetNode.depth,
|
|
22
|
+
sourceDepthGreater: ctx => ctx.sourceNode.depth > ctx.targetNode.depth,
|
|
23
|
+
targetDepthIsSourceMinusOne: ctx => ctx.targetNode.depth === ctx.sourceNode.depth - 1,
|
|
24
|
+
// Parent checks
|
|
25
|
+
sameParent: ctx => ctx.sourceNode.parent === ctx.targetNode.parent,
|
|
26
|
+
// Node state checks
|
|
27
|
+
targetGroupExpanded: ctx => (ctx.targetNode.type === 'group' && ctx.targetNode.childrenExpanded) ?? false,
|
|
28
|
+
targetGroupCollapsed: ctx => ctx.targetNode.type === 'group' && !ctx.targetNode.childrenExpanded,
|
|
29
|
+
// Previous/Next node checks
|
|
30
|
+
hasPrevNode: ctx => ctx.prevNode !== null,
|
|
31
|
+
hasNextNode: ctx => ctx.nextNode !== null,
|
|
32
|
+
prevIsLeaf: ctx => ctx.prevNode?.type === 'leaf',
|
|
33
|
+
prevIsGroup: ctx => ctx.prevNode?.type === 'group',
|
|
34
|
+
nextIsLeaf: ctx => ctx.nextNode?.type === 'leaf',
|
|
35
|
+
nextIsGroup: ctx => ctx.nextNode?.type === 'group',
|
|
36
|
+
prevDepthEquals: (ctx, depth) => ctx.prevNode?.depth === depth,
|
|
37
|
+
prevDepthEqualsSource: ctx => ctx.prevNode?.depth === ctx.sourceNode.depth,
|
|
38
|
+
// Complex checks
|
|
39
|
+
prevBelongsToSource: ctx => {
|
|
40
|
+
if (!ctx.prevNode) {
|
|
41
|
+
return false;
|
|
42
|
+
}
|
|
43
|
+
// Check if prevNode.parent OR any of its ancestors === sourceNode.id
|
|
44
|
+
let currentId = ctx.prevNode.parent;
|
|
45
|
+
while (currentId) {
|
|
46
|
+
if (currentId === ctx.sourceNode.id) {
|
|
47
|
+
return true;
|
|
48
|
+
}
|
|
49
|
+
const node = (0, _xDataGrid.gridRowTreeSelector)(ctx.apiRef)[currentId];
|
|
50
|
+
if (!node) {
|
|
51
|
+
break;
|
|
52
|
+
}
|
|
53
|
+
currentId = node.parent;
|
|
54
|
+
}
|
|
55
|
+
return false;
|
|
56
|
+
},
|
|
57
|
+
// Position checks
|
|
58
|
+
isAdjacentPosition: ctx => {
|
|
59
|
+
const expandedSortedRowIndexLookup = (0, _xDataGrid.gridExpandedSortedRowIndexLookupSelector)(ctx.apiRef);
|
|
60
|
+
const sourceRowIndex = expandedSortedRowIndexLookup[ctx.sourceNode.id];
|
|
61
|
+
const targetRowIndex = expandedSortedRowIndexLookup[ctx.targetNode.id];
|
|
62
|
+
const dropPosition = ctx.dropPosition;
|
|
63
|
+
return dropPosition === 'above' && targetRowIndex === sourceRowIndex + 1 || dropPosition === 'below' && targetRowIndex === sourceRowIndex - 1;
|
|
64
|
+
},
|
|
65
|
+
// First child check
|
|
66
|
+
targetFirstChildIsGroupWithSourceDepth: ctx => {
|
|
67
|
+
if (ctx.targetNode.type !== 'group') {
|
|
68
|
+
return false;
|
|
69
|
+
}
|
|
70
|
+
const rowTree = (0, _xDataGrid.gridRowTreeSelector)(ctx.apiRef);
|
|
71
|
+
const targetGroup = ctx.targetNode;
|
|
72
|
+
const firstChild = targetGroup.children?.[0] ? rowTree[targetGroup.children[0]] : null;
|
|
73
|
+
return firstChild?.type === 'group' && firstChild.depth === ctx.sourceNode.depth;
|
|
74
|
+
},
|
|
75
|
+
targetFirstChildDepthEqualsSource: ctx => {
|
|
76
|
+
if (ctx.targetNode.type !== 'group') {
|
|
77
|
+
return false;
|
|
78
|
+
}
|
|
79
|
+
const rowTree = (0, _xDataGrid.gridRowTreeSelector)(ctx.apiRef);
|
|
80
|
+
const targetGroup = ctx.targetNode;
|
|
81
|
+
const firstChild = targetGroup.children?.[0] ? rowTree[targetGroup.children[0]] : null;
|
|
82
|
+
return firstChild ? firstChild.depth === ctx.sourceNode.depth : false;
|
|
83
|
+
}
|
|
84
|
+
};
|
|
@@ -1 +1,2 @@
|
|
|
1
|
-
export * from "./gridRowReorderColDef.js";
|
|
1
|
+
export * from "./gridRowReorderColDef.js";
|
|
2
|
+
export type { ReorderValidationContext, IsRowReorderableParams } from "./models.js";
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { GridTreeNode, GridValidRowModel } from '@mui/x-data-grid';
|
|
2
|
+
import type { RefObject } from '@mui/x-internals/types';
|
|
3
|
+
import type { RowReorderDropPosition, RowReorderDragDirection } from '@mui/x-data-grid/internals';
|
|
4
|
+
import type { GridPrivateApiPro } from "../../../models/gridApiPro.js";
|
|
5
|
+
export type IsRowReorderableParams<R extends GridValidRowModel = any> = {
|
|
6
|
+
row: R;
|
|
7
|
+
rowNode: GridTreeNode;
|
|
8
|
+
};
|
|
9
|
+
export type ReorderValidationContext = {
|
|
10
|
+
apiRef: RefObject<GridPrivateApiPro>;
|
|
11
|
+
sourceNode: GridTreeNode;
|
|
12
|
+
targetNode: GridTreeNode;
|
|
13
|
+
prevNode: GridTreeNode | null;
|
|
14
|
+
nextNode: GridTreeNode | null;
|
|
15
|
+
dropPosition: RowReorderDropPosition;
|
|
16
|
+
dragDirection: RowReorderDragDirection;
|
|
17
|
+
};
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import type { ReorderExecutionContext, ReorderOperation } from "./types.js";
|
|
2
|
+
/**
|
|
3
|
+
* Base class for all reorder operations.
|
|
4
|
+
* Provides abstract methods for operation detection and execution.
|
|
5
|
+
*/
|
|
6
|
+
export declare abstract class BaseReorderOperation {
|
|
7
|
+
abstract readonly operationType: string;
|
|
8
|
+
/**
|
|
9
|
+
* Detects if this operation can handle the given context.
|
|
10
|
+
*/
|
|
11
|
+
abstract detectOperation(ctx: ReorderExecutionContext): ReorderOperation | null;
|
|
12
|
+
/**
|
|
13
|
+
* Executes the detected operation.
|
|
14
|
+
*/
|
|
15
|
+
abstract executeOperation(operation: ReorderOperation, ctx: ReorderExecutionContext): Promise<void> | void;
|
|
16
|
+
}
|
|
17
|
+
/**
|
|
18
|
+
* Executor class for handling row reorder operations in grouped data grids.
|
|
19
|
+
*
|
|
20
|
+
* This class coordinates the execution of different reorder operation types,
|
|
21
|
+
* trying each operation in order until one succeeds or all fail.
|
|
22
|
+
*/
|
|
23
|
+
export declare class RowReorderExecutor {
|
|
24
|
+
private operations;
|
|
25
|
+
constructor(operations: BaseReorderOperation[]);
|
|
26
|
+
execute(ctx: ReorderExecutionContext): Promise<void>;
|
|
27
|
+
}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.RowReorderExecutor = exports.BaseReorderOperation = void 0;
|
|
7
|
+
var _warning = require("@mui/x-internals/warning");
|
|
8
|
+
/**
|
|
9
|
+
* Base class for all reorder operations.
|
|
10
|
+
* Provides abstract methods for operation detection and execution.
|
|
11
|
+
*/
|
|
12
|
+
class BaseReorderOperation {}
|
|
13
|
+
|
|
14
|
+
/**
|
|
15
|
+
* Executor class for handling row reorder operations in grouped data grids.
|
|
16
|
+
*
|
|
17
|
+
* This class coordinates the execution of different reorder operation types,
|
|
18
|
+
* trying each operation in order until one succeeds or all fail.
|
|
19
|
+
*/
|
|
20
|
+
exports.BaseReorderOperation = BaseReorderOperation;
|
|
21
|
+
class RowReorderExecutor {
|
|
22
|
+
constructor(operations) {
|
|
23
|
+
this.operations = operations;
|
|
24
|
+
}
|
|
25
|
+
async execute(ctx) {
|
|
26
|
+
for (const operation of this.operations) {
|
|
27
|
+
const detectedOperation = operation.detectOperation(ctx);
|
|
28
|
+
if (detectedOperation) {
|
|
29
|
+
// eslint-disable-next-line no-await-in-loop
|
|
30
|
+
await operation.executeOperation(detectedOperation, ctx);
|
|
31
|
+
return;
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
(0, _warning.warnOnce)(['MUI X: The parameters provided to the API method resulted in a no-op.', 'Consider looking at the documentation at https://mui.com/x/react-data-grid/row-ordering/'], 'warning');
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
exports.RowReorderExecutor = RowReorderExecutor;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { ReorderValidationContext } from "./models.js";
|
|
2
|
+
export interface ValidationRule {
|
|
3
|
+
name: string;
|
|
4
|
+
applies: (ctx: ReorderValidationContext) => boolean;
|
|
5
|
+
isInvalid: (ctx: ReorderValidationContext) => boolean;
|
|
6
|
+
message?: string;
|
|
7
|
+
}
|
|
8
|
+
export declare class RowReorderValidator {
|
|
9
|
+
private rules;
|
|
10
|
+
constructor(rules: ValidationRule[]);
|
|
11
|
+
validate(context: ReorderValidationContext): boolean;
|
|
12
|
+
}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.RowReorderValidator = void 0;
|
|
7
|
+
class RowReorderValidator {
|
|
8
|
+
constructor(rules) {
|
|
9
|
+
this.rules = rules;
|
|
10
|
+
}
|
|
11
|
+
validate(context) {
|
|
12
|
+
// Check all validation rules
|
|
13
|
+
for (const rule of this.rules) {
|
|
14
|
+
if (rule.applies(context) && rule.isInvalid(context)) {
|
|
15
|
+
return false;
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
return true;
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
exports.RowReorderValidator = RowReorderValidator;
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import type { GridRowId, GridTreeNode, GridRowTreeConfig } from '@mui/x-data-grid';
|
|
2
|
+
import type { RefObject } from '@mui/x-internals/types';
|
|
3
|
+
import type { RowReorderDropPosition } from '@mui/x-data-grid/internals';
|
|
4
|
+
import type { GridPrivateApiPro } from "../../../models/gridApiPro.js";
|
|
5
|
+
import type { DataGridProProcessedProps } from "../../../models/dataGridProProps.js";
|
|
6
|
+
export type ReorderOperationType = 'same-parent-swap' | 'cross-parent-leaf' | 'cross-parent-group' | 'drop-on-leaf' | 'drop-on-group';
|
|
7
|
+
export interface ReorderExecutionContext<ApiRef extends GridPrivateApiPro = GridPrivateApiPro> {
|
|
8
|
+
sourceRowId: GridRowId;
|
|
9
|
+
dropPosition: RowReorderDropPosition;
|
|
10
|
+
placeholderIndex: number;
|
|
11
|
+
sortedFilteredRowIds: GridRowId[];
|
|
12
|
+
sortedFilteredRowIndexLookup: Record<GridRowId, number>;
|
|
13
|
+
rowTree: GridRowTreeConfig;
|
|
14
|
+
apiRef: RefObject<ApiRef>;
|
|
15
|
+
processRowUpdate?: DataGridProProcessedProps['processRowUpdate'];
|
|
16
|
+
onProcessRowUpdateError?: DataGridProProcessedProps['onProcessRowUpdateError'];
|
|
17
|
+
setTreeDataPath?: DataGridProProcessedProps['setTreeDataPath'];
|
|
18
|
+
}
|
|
19
|
+
export interface ReorderOperation {
|
|
20
|
+
sourceNode: GridTreeNode;
|
|
21
|
+
targetNode: GridTreeNode;
|
|
22
|
+
actualTargetIndex: number;
|
|
23
|
+
isLastChild: boolean;
|
|
24
|
+
operationType: ReorderOperationType;
|
|
25
|
+
}
|
|
@@ -7,4 +7,4 @@ export declare const rowReorderStateInitializer: GridStateInitializer;
|
|
|
7
7
|
* Hook for row reordering (Pro package)
|
|
8
8
|
* @requires useGridRows (method)
|
|
9
9
|
*/
|
|
10
|
-
export declare const useGridRowReorder: (apiRef: RefObject<GridPrivateApiPro>, props: Pick<DataGridProProcessedProps, "rowReordering" | "onRowOrderChange" | "classes" | "treeData" | "dataSource">) => void;
|
|
10
|
+
export declare const useGridRowReorder: (apiRef: RefObject<GridPrivateApiPro>, props: Pick<DataGridProProcessedProps, "rowReordering" | "onRowOrderChange" | "classes" | "treeData" | "dataSource" | "isValidRowReorder">) => void;
|