@mui/x-tree-view-pro 8.0.0-beta.0 → 8.0.0-beta.1
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 +77 -0
- package/esm/index.js +1 -1
- package/esm/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.itemPlugin.js +6 -6
- package/esm/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.js +51 -38
- package/esm/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.selectors.d.ts +244 -10
- package/esm/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.selectors.js +23 -8
- package/esm/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.types.d.ts +8 -13
- package/esm/internals/utils/releaseInfo.js +1 -1
- package/index.js +1 -1
- package/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.itemPlugin.js +5 -5
- package/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.js +50 -37
- package/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.selectors.d.ts +244 -10
- package/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.selectors.js +23 -9
- package/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.types.d.ts +8 -13
- package/internals/utils/releaseInfo.js +1 -1
- package/modern/index.js +1 -1
- package/modern/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.itemPlugin.js +6 -6
- package/modern/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.js +51 -38
- package/modern/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.selectors.d.ts +244 -10
- package/modern/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.selectors.js +23 -8
- package/modern/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.types.d.ts +8 -13
- package/modern/internals/utils/releaseInfo.js +1 -1
- package/package.json +2 -2
- package/tsconfig.build.tsbuildinfo +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -5,6 +5,83 @@
|
|
|
5
5
|
All notable changes to this project will be documented in this file.
|
|
6
6
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
7
7
|
|
|
8
|
+
## 8.0.0-beta.1
|
|
9
|
+
|
|
10
|
+
_Mar 21, 2025_
|
|
11
|
+
|
|
12
|
+
We'd like to offer a big thanks to the 6 contributors who made this release possible. Here are some highlights ✨:
|
|
13
|
+
|
|
14
|
+
- 🐞 Bugfixes
|
|
15
|
+
|
|
16
|
+
Special thanks go out to the community members for their valuable contributions:
|
|
17
|
+
@jyash97.
|
|
18
|
+
Following are all team members who have contributed to this release:
|
|
19
|
+
@alexfauquette, @arminmeh, @flaviendelangle, @JCQuintas, @KenanYusuf.
|
|
20
|
+
|
|
21
|
+
<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
|
|
22
|
+
|
|
23
|
+
### Data Grid
|
|
24
|
+
|
|
25
|
+
#### `@mui/x-data-grid@8.0.0-beta.1`
|
|
26
|
+
|
|
27
|
+
- [DataGrid] Fix error caused by `forwardRef` to `ClickAwayListener` (#17049) @arminmeh
|
|
28
|
+
- [DataGrid] Fix error while editing rows with custom id (#17048) @arminmeh
|
|
29
|
+
|
|
30
|
+
#### `@mui/x-data-grid-pro@8.0.0-beta.1` [](https://mui.com/r/x-pro-svg-link 'Pro plan')
|
|
31
|
+
|
|
32
|
+
Same changes as in `@mui/x-data-grid@8.0.0-beta.1`, plus:
|
|
33
|
+
|
|
34
|
+
- [DataGridPro] Fix header select checkbox state with `checkboxSelectionVisibleOnly` and `paginationMode="server"` (#17026) @arminmeh
|
|
35
|
+
|
|
36
|
+
#### `@mui/x-data-grid-premium@8.0.0-beta.1` [](https://mui.com/r/x-premium-svg-link 'Premium plan')
|
|
37
|
+
|
|
38
|
+
Same changes as in `@mui/x-data-grid-pro@8.0.0-beta.1`, plus:
|
|
39
|
+
|
|
40
|
+
- [DataGridPremium] Update column state correctly when grouping mode is updated with one grouping column (#17069) @arminmeh
|
|
41
|
+
|
|
42
|
+
### Date and Time Pickers
|
|
43
|
+
|
|
44
|
+
#### `@mui/x-date-pickers@8.0.0-beta.1`
|
|
45
|
+
|
|
46
|
+
- [fields] Clean the `useField` hook (part 1) (#16944) @flaviendelangle
|
|
47
|
+
- [fields] Improve the check for year in `doesSectionFormatHaveLeadingZeros` (#17051) @flaviendelangle
|
|
48
|
+
- [pickers] Deprecate the `disableOpenPicker` prop (#17040) @flaviendelangle
|
|
49
|
+
- [pickers] Simplify the `cleanLeadingZeros` method (#17063) @flaviendelangle
|
|
50
|
+
- [pickers] Use the new `ownerState` in `PickersDay` and `DateRangePickerDay` (#17035) @flaviendelangle
|
|
51
|
+
|
|
52
|
+
#### `@mui/x-date-pickers-pro@8.0.0-beta.1` [](https://mui.com/r/x-pro-svg-link 'Pro plan')
|
|
53
|
+
|
|
54
|
+
Same changes as in `@mui/x-date-pickers@8.0.0-beta.1`, plus:
|
|
55
|
+
|
|
56
|
+
- [DateRangePicker] Use desktop media query constant on range pickers (#17052) @flaviendelangle
|
|
57
|
+
|
|
58
|
+
### Charts
|
|
59
|
+
|
|
60
|
+
#### `@mui/x-charts@8.0.0-beta.1`
|
|
61
|
+
|
|
62
|
+
- [charts] Fix horizontal bar with multiple axes (#17059) @alexfauquette
|
|
63
|
+
|
|
64
|
+
#### `@mui/x-charts-pro@8.0.0-beta.1` [](https://mui.com/r/x-pro-svg-link 'Pro plan')
|
|
65
|
+
|
|
66
|
+
Same changes as in `@mui/x-charts@8.0.0-beta.1`, plus:
|
|
67
|
+
|
|
68
|
+
- [charts-pro] Allow disabling Heatmap tooltip (#17060) @JCQuintas
|
|
69
|
+
|
|
70
|
+
### Tree View
|
|
71
|
+
|
|
72
|
+
#### `@mui/x-tree-view@8.0.0-beta.1`
|
|
73
|
+
|
|
74
|
+
Internal changes.
|
|
75
|
+
|
|
76
|
+
#### `@mui/x-tree-view-pro@8.0.0-beta.1` [](https://mui.com/r/x-pro-svg-link 'Pro plan')
|
|
77
|
+
|
|
78
|
+
Same changes as in `@mui/x-tree-view@8.0.0-beta.1`.
|
|
79
|
+
|
|
80
|
+
### Docs
|
|
81
|
+
|
|
82
|
+
- [docs] Fix 404 (#17033) @alexfauquette
|
|
83
|
+
- [docs] Fix Data Grid advanced list view demo (#17064) @KenanYusuf
|
|
84
|
+
|
|
8
85
|
## 8.0.0-beta.0
|
|
9
86
|
|
|
10
87
|
<img width="100%" alt="MUI X v8 Beta is live" src="https://github.com/user-attachments/assets/61ec4dd8-c946-456b-8b45-d51de8772f5d">
|
package/esm/index.js
CHANGED
package/esm/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.itemPlugin.js
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { useTreeViewContext, isTargetInDescendants, useSelector } from '@mui/x-tree-view/internals';
|
|
3
|
-
import {
|
|
3
|
+
import { selectorCanItemBeReordered, selectorDraggedItemProperties, selectorIsItemValidReorderingTarget } from "./useTreeViewItemsReordering.selectors.js";
|
|
4
4
|
export const isAndroid = () => navigator.userAgent.toLowerCase().includes('android');
|
|
5
5
|
export const useTreeViewItemsReorderingItemPlugin = ({
|
|
6
6
|
props
|
|
7
7
|
}) => {
|
|
8
8
|
const {
|
|
9
9
|
instance,
|
|
10
|
-
store
|
|
11
|
-
itemsReordering
|
|
10
|
+
store
|
|
12
11
|
} = useTreeViewContext();
|
|
13
12
|
const {
|
|
14
13
|
itemId
|
|
15
14
|
} = props;
|
|
16
15
|
const validActionsRef = React.useRef(null);
|
|
17
|
-
const draggedItemProperties = useSelector(store,
|
|
18
|
-
const
|
|
16
|
+
const draggedItemProperties = useSelector(store, selectorDraggedItemProperties, itemId);
|
|
17
|
+
const canItemBeReordered = useSelector(store, selectorCanItemBeReordered);
|
|
18
|
+
const isValidTarget = useSelector(store, selectorIsItemValidReorderingTarget, itemId);
|
|
19
19
|
return {
|
|
20
20
|
propsEnhancers: {
|
|
21
21
|
root: ({
|
|
@@ -23,7 +23,7 @@ export const useTreeViewItemsReorderingItemPlugin = ({
|
|
|
23
23
|
contentRefObject,
|
|
24
24
|
externalEventHandlers
|
|
25
25
|
}) => {
|
|
26
|
-
if (!
|
|
26
|
+
if (!canItemBeReordered) {
|
|
27
27
|
return {};
|
|
28
28
|
}
|
|
29
29
|
const handleDragStart = event => {
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
2
|
import * as React from 'react';
|
|
3
|
+
import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
|
|
3
4
|
import { selectorItemIndex, selectorItemMeta, selectorItemOrderedChildrenIds } from '@mui/x-tree-view/internals';
|
|
4
5
|
import { chooseActionToApply, isAncestor, moveItemInTree } from "./useTreeViewItemsReordering.utils.js";
|
|
5
6
|
import { useTreeViewItemsReorderingItemPlugin } from "./useTreeViewItemsReordering.itemPlugin.js";
|
|
6
|
-
import {
|
|
7
|
+
import { selectorCurrentItemReordering } from "./useTreeViewItemsReordering.selectors.js";
|
|
7
8
|
export const useTreeViewItemsReordering = ({
|
|
8
9
|
params,
|
|
9
10
|
store
|
|
@@ -19,18 +20,19 @@ export const useTreeViewItemsReordering = ({
|
|
|
19
20
|
return true;
|
|
20
21
|
}, [params.itemsReordering, params.isItemReorderable]);
|
|
21
22
|
const getDroppingTargetValidActions = React.useCallback(itemId => {
|
|
22
|
-
const
|
|
23
|
-
if (!
|
|
23
|
+
const currentReorder = selectorCurrentItemReordering(store.value);
|
|
24
|
+
if (!currentReorder) {
|
|
24
25
|
throw new Error('There is no ongoing reordering.');
|
|
25
26
|
}
|
|
26
|
-
if (itemId ===
|
|
27
|
+
if (itemId === currentReorder.draggedItemId) {
|
|
27
28
|
return {};
|
|
28
29
|
}
|
|
29
30
|
const canMoveItemToNewPosition = params.canMoveItemToNewPosition;
|
|
30
31
|
const targetItemMeta = selectorItemMeta(store.value, itemId);
|
|
31
32
|
const targetItemIndex = selectorItemIndex(store.value, targetItemMeta.id);
|
|
32
|
-
const draggedItemMeta = selectorItemMeta(store.value,
|
|
33
|
+
const draggedItemMeta = selectorItemMeta(store.value, currentReorder.draggedItemId);
|
|
33
34
|
const draggedItemIndex = selectorItemIndex(store.value, draggedItemMeta.id);
|
|
35
|
+
const isTargetLastSibling = targetItemIndex === selectorItemOrderedChildrenIds(store.value, targetItemMeta.parentId).length - 1;
|
|
34
36
|
const oldPosition = {
|
|
35
37
|
parentId: draggedItemMeta.parentId,
|
|
36
38
|
index: draggedItemIndex
|
|
@@ -42,7 +44,7 @@ export const useTreeViewItemsReordering = ({
|
|
|
42
44
|
isValid = false;
|
|
43
45
|
} else if (canMoveItemToNewPosition) {
|
|
44
46
|
isValid = canMoveItemToNewPosition({
|
|
45
|
-
itemId:
|
|
47
|
+
itemId: currentReorder.draggedItemId,
|
|
46
48
|
oldPosition,
|
|
47
49
|
newPosition: positionAfterAction
|
|
48
50
|
});
|
|
@@ -60,10 +62,10 @@ export const useTreeViewItemsReordering = ({
|
|
|
60
62
|
parentId: targetItemMeta.parentId,
|
|
61
63
|
index: targetItemMeta.parentId === draggedItemMeta.parentId && targetItemIndex > draggedItemIndex ? targetItemIndex - 1 : targetItemIndex
|
|
62
64
|
},
|
|
63
|
-
'reorder-below': targetItemMeta.expandable
|
|
65
|
+
'reorder-below': !targetItemMeta.expandable || isTargetLastSibling ? {
|
|
64
66
|
parentId: targetItemMeta.parentId,
|
|
65
67
|
index: targetItemMeta.parentId === draggedItemMeta.parentId && targetItemIndex > draggedItemIndex ? targetItemIndex : targetItemIndex + 1
|
|
66
|
-
},
|
|
68
|
+
} : null,
|
|
67
69
|
'move-to-parent': targetItemMeta.parentId == null ? null : {
|
|
68
70
|
parentId: targetItemMeta.parentId,
|
|
69
71
|
index: selectorItemOrderedChildrenIds(store.value, targetItemMeta.parentId).length
|
|
@@ -80,33 +82,39 @@ export const useTreeViewItemsReordering = ({
|
|
|
80
82
|
}, [store, params.canMoveItemToNewPosition]);
|
|
81
83
|
const startDraggingItem = React.useCallback(itemId => {
|
|
82
84
|
store.update(prevState => _extends({}, prevState, {
|
|
83
|
-
itemsReordering: {
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
85
|
+
itemsReordering: _extends({}, prevState.itemsReordering, {
|
|
86
|
+
currentReorder: {
|
|
87
|
+
targetItemId: itemId,
|
|
88
|
+
draggedItemId: itemId,
|
|
89
|
+
action: null,
|
|
90
|
+
newPosition: null
|
|
91
|
+
}
|
|
92
|
+
})
|
|
89
93
|
}));
|
|
90
94
|
}, [store]);
|
|
91
95
|
const stopDraggingItem = React.useCallback(itemId => {
|
|
92
|
-
const
|
|
93
|
-
if (
|
|
96
|
+
const currentReorder = selectorCurrentItemReordering(store.value);
|
|
97
|
+
if (currentReorder == null || currentReorder.draggedItemId !== itemId) {
|
|
94
98
|
return;
|
|
95
99
|
}
|
|
96
|
-
if (
|
|
100
|
+
if (currentReorder.draggedItemId === currentReorder.targetItemId || currentReorder.action == null || currentReorder.newPosition == null) {
|
|
97
101
|
store.update(prevState => _extends({}, prevState, {
|
|
98
|
-
itemsReordering:
|
|
102
|
+
itemsReordering: _extends({}, prevState.itemsReordering, {
|
|
103
|
+
currentReorder: null
|
|
104
|
+
})
|
|
99
105
|
}));
|
|
100
106
|
return;
|
|
101
107
|
}
|
|
102
|
-
const draggedItemMeta = selectorItemMeta(store.value,
|
|
108
|
+
const draggedItemMeta = selectorItemMeta(store.value, currentReorder.draggedItemId);
|
|
103
109
|
const oldPosition = {
|
|
104
110
|
parentId: draggedItemMeta.parentId,
|
|
105
111
|
index: selectorItemIndex(store.value, draggedItemMeta.id)
|
|
106
112
|
};
|
|
107
|
-
const newPosition =
|
|
113
|
+
const newPosition = currentReorder.newPosition;
|
|
108
114
|
store.update(prevState => _extends({}, prevState, {
|
|
109
|
-
itemsReordering:
|
|
115
|
+
itemsReordering: _extends({}, prevState.itemsReordering, {
|
|
116
|
+
currentReorder: null
|
|
117
|
+
}),
|
|
110
118
|
items: moveItemInTree({
|
|
111
119
|
itemToMoveId: itemId,
|
|
112
120
|
newPosition,
|
|
@@ -130,8 +138,8 @@ export const useTreeViewItemsReordering = ({
|
|
|
130
138
|
contentElement
|
|
131
139
|
}) => {
|
|
132
140
|
store.update(prevState => {
|
|
133
|
-
const
|
|
134
|
-
if (
|
|
141
|
+
const prevItemReorder = prevState.itemsReordering.currentReorder;
|
|
142
|
+
if (prevItemReorder == null || isAncestor(store, itemId, prevItemReorder.draggedItemId)) {
|
|
135
143
|
return prevState;
|
|
136
144
|
}
|
|
137
145
|
const action = chooseActionToApply({
|
|
@@ -144,24 +152,27 @@ export const useTreeViewItemsReordering = ({
|
|
|
144
152
|
contentElement
|
|
145
153
|
});
|
|
146
154
|
const newPosition = action == null ? null : validActions[action];
|
|
147
|
-
if (
|
|
155
|
+
if (prevItemReorder.targetItemId === itemId && prevItemReorder.action === action && prevItemReorder.newPosition?.parentId === newPosition?.parentId && prevItemReorder.newPosition?.index === newPosition?.index) {
|
|
148
156
|
return prevState;
|
|
149
157
|
}
|
|
150
158
|
return _extends({}, prevState, {
|
|
151
|
-
itemsReordering: _extends({},
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
159
|
+
itemsReordering: _extends({}, prevState.itemsReordering, {
|
|
160
|
+
currentReorder: _extends({}, prevItemReorder, {
|
|
161
|
+
targetItemId: itemId,
|
|
162
|
+
newPosition,
|
|
163
|
+
action
|
|
164
|
+
})
|
|
155
165
|
})
|
|
156
166
|
});
|
|
157
167
|
});
|
|
158
168
|
}, [store, params.itemChildrenIndentation]);
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
169
|
+
useEnhancedEffect(() => {
|
|
170
|
+
store.update(prevState => _extends({}, prevState, {
|
|
171
|
+
itemsReordering: _extends({}, prevState.itemsReordering, {
|
|
172
|
+
isItemReorderable: params.itemsReordering ? params.isItemReorderable ?? (() => true) : () => false
|
|
173
|
+
})
|
|
174
|
+
}));
|
|
175
|
+
}, [store, params.itemsReordering, params.isItemReorderable]);
|
|
165
176
|
return {
|
|
166
177
|
instance: {
|
|
167
178
|
canItemBeDragged,
|
|
@@ -169,8 +180,7 @@ export const useTreeViewItemsReordering = ({
|
|
|
169
180
|
startDraggingItem,
|
|
170
181
|
stopDraggingItem,
|
|
171
182
|
setDragTargetItem
|
|
172
|
-
}
|
|
173
|
-
contextValue: pluginContextValue
|
|
183
|
+
}
|
|
174
184
|
};
|
|
175
185
|
};
|
|
176
186
|
useTreeViewItemsReordering.itemPlugin = useTreeViewItemsReorderingItemPlugin;
|
|
@@ -179,8 +189,11 @@ useTreeViewItemsReordering.getDefaultizedParams = ({
|
|
|
179
189
|
}) => _extends({}, params, {
|
|
180
190
|
itemsReordering: params.itemsReordering ?? false
|
|
181
191
|
});
|
|
182
|
-
useTreeViewItemsReordering.getInitialState =
|
|
183
|
-
itemsReordering:
|
|
192
|
+
useTreeViewItemsReordering.getInitialState = params => ({
|
|
193
|
+
itemsReordering: {
|
|
194
|
+
currentReorder: null,
|
|
195
|
+
isItemReorderable: params.itemsReordering ? params.isItemReorderable ?? (() => true) : () => false
|
|
196
|
+
}
|
|
184
197
|
});
|
|
185
198
|
useTreeViewItemsReordering.params = {
|
|
186
199
|
itemsReordering: true,
|
package/esm/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.selectors.d.ts
CHANGED
|
@@ -1,23 +1,84 @@
|
|
|
1
1
|
import { TreeViewState } from '@mui/x-tree-view/internals';
|
|
2
2
|
import { UseTreeViewItemsReorderingSignature } from "./useTreeViewItemsReordering.types.js";
|
|
3
3
|
/**
|
|
4
|
-
* Get the
|
|
4
|
+
* Get the properties of the current reordering.
|
|
5
5
|
* @param {TreeViewState<[UseTreeViewItemsReorderingSignature]>} state The state of the tree view.
|
|
6
|
-
* @returns {TreeViewItemsReorderingState
|
|
6
|
+
* @returns {TreeViewItemsReorderingState['currentReorder']} The properties of the current reordering.
|
|
7
7
|
*/
|
|
8
|
-
export declare const
|
|
8
|
+
export declare const selectorCurrentItemReordering: ((state: import("@mui/x-tree-view/internals/corePlugins/useTreeViewId/useTreeViewId.types").UseTreeViewIdState & import("./useTreeViewItemsReordering.types").UseTreeViewItemsReorderingState & Partial<{}> & {
|
|
9
|
+
cacheKey: import("@mui/x-tree-view/internals/models").TreeViewStateCacheKey;
|
|
10
|
+
}) => {
|
|
9
11
|
draggedItemId: string;
|
|
10
12
|
targetItemId: string;
|
|
11
13
|
newPosition: import("./useTreeViewItemsReordering.types").TreeViewItemReorderPosition | null;
|
|
12
14
|
action: import("@mui/x-tree-view").TreeViewItemsReorderingAction | null;
|
|
13
|
-
} | null
|
|
15
|
+
} | null) & {
|
|
16
|
+
clearCache: () => void;
|
|
17
|
+
resultsCount: () => number;
|
|
18
|
+
resetResultsCount: () => void;
|
|
19
|
+
} & {
|
|
20
|
+
resultFunc: (resultFuncArgs_0: {
|
|
21
|
+
isItemReorderable: (itemId: string) => boolean;
|
|
22
|
+
currentReorder: {
|
|
23
|
+
draggedItemId: string;
|
|
24
|
+
targetItemId: string;
|
|
25
|
+
newPosition: import("./useTreeViewItemsReordering.types").TreeViewItemReorderPosition | null;
|
|
26
|
+
action: import("@mui/x-tree-view").TreeViewItemsReorderingAction | null;
|
|
27
|
+
} | null;
|
|
28
|
+
}) => {
|
|
29
|
+
draggedItemId: string;
|
|
30
|
+
targetItemId: string;
|
|
31
|
+
newPosition: import("./useTreeViewItemsReordering.types").TreeViewItemReorderPosition | null;
|
|
32
|
+
action: import("@mui/x-tree-view").TreeViewItemsReorderingAction | null;
|
|
33
|
+
} | null;
|
|
34
|
+
memoizedResultFunc: ((resultFuncArgs_0: {
|
|
35
|
+
isItemReorderable: (itemId: string) => boolean;
|
|
36
|
+
currentReorder: {
|
|
37
|
+
draggedItemId: string;
|
|
38
|
+
targetItemId: string;
|
|
39
|
+
newPosition: import("./useTreeViewItemsReordering.types").TreeViewItemReorderPosition | null;
|
|
40
|
+
action: import("@mui/x-tree-view").TreeViewItemsReorderingAction | null;
|
|
41
|
+
} | null;
|
|
42
|
+
}) => {
|
|
43
|
+
draggedItemId: string;
|
|
44
|
+
targetItemId: string;
|
|
45
|
+
newPosition: import("./useTreeViewItemsReordering.types").TreeViewItemReorderPosition | null;
|
|
46
|
+
action: import("@mui/x-tree-view").TreeViewItemsReorderingAction | null;
|
|
47
|
+
} | null) & {
|
|
48
|
+
clearCache: () => void;
|
|
49
|
+
resultsCount: () => number;
|
|
50
|
+
resetResultsCount: () => void;
|
|
51
|
+
};
|
|
52
|
+
lastResult: () => {
|
|
53
|
+
draggedItemId: string;
|
|
54
|
+
targetItemId: string;
|
|
55
|
+
newPosition: import("./useTreeViewItemsReordering.types").TreeViewItemReorderPosition | null;
|
|
56
|
+
action: import("@mui/x-tree-view").TreeViewItemsReorderingAction | null;
|
|
57
|
+
} | null;
|
|
58
|
+
dependencies: [(state: TreeViewState<[UseTreeViewItemsReorderingSignature]>) => {
|
|
59
|
+
isItemReorderable: (itemId: string) => boolean;
|
|
60
|
+
currentReorder: {
|
|
61
|
+
draggedItemId: string;
|
|
62
|
+
targetItemId: string;
|
|
63
|
+
newPosition: import("./useTreeViewItemsReordering.types").TreeViewItemReorderPosition | null;
|
|
64
|
+
action: import("@mui/x-tree-view").TreeViewItemsReorderingAction | null;
|
|
65
|
+
} | null;
|
|
66
|
+
}];
|
|
67
|
+
recomputations: () => number;
|
|
68
|
+
resetRecomputations: () => void;
|
|
69
|
+
dependencyRecomputations: () => number;
|
|
70
|
+
resetDependencyRecomputations: () => void;
|
|
71
|
+
} & {
|
|
72
|
+
argsMemoize: typeof import("reselect").weakMapMemoize;
|
|
73
|
+
memoize: typeof import("reselect").weakMapMemoize;
|
|
74
|
+
};
|
|
14
75
|
/**
|
|
15
76
|
* Get the properties of the dragged item.
|
|
16
77
|
* @param {TreeViewState<[UseTreeViewItemsSignature, UseTreeViewItemsReorderingSignature]>} state The state of the tree view.
|
|
17
78
|
* @param {string} itemId The id of the item.
|
|
18
79
|
* @returns {TreeViewItemDraggedItemProperties | null} The properties of the dragged item if the current item is being dragged, `null` otherwise.
|
|
19
80
|
*/
|
|
20
|
-
export declare const
|
|
81
|
+
export declare const selectorDraggedItemProperties: ((state: any, itemId: string) => {
|
|
21
82
|
newPosition: import("./useTreeViewItemsReordering.types").TreeViewItemReorderPosition | null;
|
|
22
83
|
action: import("@mui/x-tree-view").TreeViewItemsReorderingAction;
|
|
23
84
|
targetDepth: number;
|
|
@@ -59,12 +120,73 @@ export declare const selectorItemsReorderingDraggedItemProperties: ((state: any,
|
|
|
59
120
|
action: import("@mui/x-tree-view").TreeViewItemsReorderingAction;
|
|
60
121
|
targetDepth: number;
|
|
61
122
|
} | null;
|
|
62
|
-
dependencies: [(state:
|
|
123
|
+
dependencies: [((state: import("@mui/x-tree-view/internals/corePlugins/useTreeViewId/useTreeViewId.types").UseTreeViewIdState & import("./useTreeViewItemsReordering.types").UseTreeViewItemsReorderingState & Partial<{}> & {
|
|
124
|
+
cacheKey: import("@mui/x-tree-view/internals/models").TreeViewStateCacheKey;
|
|
125
|
+
}) => {
|
|
63
126
|
draggedItemId: string;
|
|
64
127
|
targetItemId: string;
|
|
65
128
|
newPosition: import("./useTreeViewItemsReordering.types").TreeViewItemReorderPosition | null;
|
|
66
129
|
action: import("@mui/x-tree-view").TreeViewItemsReorderingAction | null;
|
|
67
|
-
} | null
|
|
130
|
+
} | null) & {
|
|
131
|
+
clearCache: () => void;
|
|
132
|
+
resultsCount: () => number;
|
|
133
|
+
resetResultsCount: () => void;
|
|
134
|
+
} & {
|
|
135
|
+
resultFunc: (resultFuncArgs_0: {
|
|
136
|
+
isItemReorderable: (itemId: string) => boolean;
|
|
137
|
+
currentReorder: {
|
|
138
|
+
draggedItemId: string;
|
|
139
|
+
targetItemId: string;
|
|
140
|
+
newPosition: import("./useTreeViewItemsReordering.types").TreeViewItemReorderPosition | null;
|
|
141
|
+
action: import("@mui/x-tree-view").TreeViewItemsReorderingAction | null;
|
|
142
|
+
} | null;
|
|
143
|
+
}) => {
|
|
144
|
+
draggedItemId: string;
|
|
145
|
+
targetItemId: string;
|
|
146
|
+
newPosition: import("./useTreeViewItemsReordering.types").TreeViewItemReorderPosition | null;
|
|
147
|
+
action: import("@mui/x-tree-view").TreeViewItemsReorderingAction | null;
|
|
148
|
+
} | null;
|
|
149
|
+
memoizedResultFunc: ((resultFuncArgs_0: {
|
|
150
|
+
isItemReorderable: (itemId: string) => boolean;
|
|
151
|
+
currentReorder: {
|
|
152
|
+
draggedItemId: string;
|
|
153
|
+
targetItemId: string;
|
|
154
|
+
newPosition: import("./useTreeViewItemsReordering.types").TreeViewItemReorderPosition | null;
|
|
155
|
+
action: import("@mui/x-tree-view").TreeViewItemsReorderingAction | null;
|
|
156
|
+
} | null;
|
|
157
|
+
}) => {
|
|
158
|
+
draggedItemId: string;
|
|
159
|
+
targetItemId: string;
|
|
160
|
+
newPosition: import("./useTreeViewItemsReordering.types").TreeViewItemReorderPosition | null;
|
|
161
|
+
action: import("@mui/x-tree-view").TreeViewItemsReorderingAction | null;
|
|
162
|
+
} | null) & {
|
|
163
|
+
clearCache: () => void;
|
|
164
|
+
resultsCount: () => number;
|
|
165
|
+
resetResultsCount: () => void;
|
|
166
|
+
};
|
|
167
|
+
lastResult: () => {
|
|
168
|
+
draggedItemId: string;
|
|
169
|
+
targetItemId: string;
|
|
170
|
+
newPosition: import("./useTreeViewItemsReordering.types").TreeViewItemReorderPosition | null;
|
|
171
|
+
action: import("@mui/x-tree-view").TreeViewItemsReorderingAction | null;
|
|
172
|
+
} | null;
|
|
173
|
+
dependencies: [(state: TreeViewState<[UseTreeViewItemsReorderingSignature]>) => {
|
|
174
|
+
isItemReorderable: (itemId: string) => boolean;
|
|
175
|
+
currentReorder: {
|
|
176
|
+
draggedItemId: string;
|
|
177
|
+
targetItemId: string;
|
|
178
|
+
newPosition: import("./useTreeViewItemsReordering.types").TreeViewItemReorderPosition | null;
|
|
179
|
+
action: import("@mui/x-tree-view").TreeViewItemsReorderingAction | null;
|
|
180
|
+
} | null;
|
|
181
|
+
}];
|
|
182
|
+
recomputations: () => number;
|
|
183
|
+
resetRecomputations: () => void;
|
|
184
|
+
dependencyRecomputations: () => number;
|
|
185
|
+
resetDependencyRecomputations: () => void;
|
|
186
|
+
} & {
|
|
187
|
+
argsMemoize: typeof import("reselect").weakMapMemoize;
|
|
188
|
+
memoize: typeof import("reselect").weakMapMemoize;
|
|
189
|
+
}, ((state: import("@mui/x-tree-view/internals/corePlugins/useTreeViewId/useTreeViewId.types").UseTreeViewIdState & import("@mui/x-tree-view/internals").UseTreeViewItemsState<import("@mui/x-tree-view").TreeViewDefaultItemModelProperties> & Partial<{}> & {
|
|
68
190
|
cacheKey: import("@mui/x-tree-view/internals/models").TreeViewStateCacheKey;
|
|
69
191
|
}) => {
|
|
70
192
|
[itemId: string]: import("@mui/x-tree-view/internals").TreeViewItemMeta;
|
|
@@ -145,7 +267,7 @@ export declare const selectorItemsReorderingDraggedItemProperties: ((state: any,
|
|
|
145
267
|
* @param {string} itemId The id of the item.
|
|
146
268
|
* @returns {boolean} `true` if the current item is a valid target for the dragged item, `false` otherwise.
|
|
147
269
|
*/
|
|
148
|
-
export declare const
|
|
270
|
+
export declare const selectorIsItemValidReorderingTarget: ((state: any, itemId: string) => boolean | null) & {
|
|
149
271
|
clearCache: () => void;
|
|
150
272
|
resultsCount: () => number;
|
|
151
273
|
resetResultsCount: () => void;
|
|
@@ -167,12 +289,124 @@ export declare const selectorItemsReorderingIsValidTarget: ((state: any, itemId:
|
|
|
167
289
|
resetResultsCount: () => void;
|
|
168
290
|
};
|
|
169
291
|
lastResult: () => boolean | null;
|
|
170
|
-
dependencies: [(state:
|
|
292
|
+
dependencies: [((state: import("@mui/x-tree-view/internals/corePlugins/useTreeViewId/useTreeViewId.types").UseTreeViewIdState & import("./useTreeViewItemsReordering.types").UseTreeViewItemsReorderingState & Partial<{}> & {
|
|
293
|
+
cacheKey: import("@mui/x-tree-view/internals/models").TreeViewStateCacheKey;
|
|
294
|
+
}) => {
|
|
171
295
|
draggedItemId: string;
|
|
172
296
|
targetItemId: string;
|
|
173
297
|
newPosition: import("./useTreeViewItemsReordering.types").TreeViewItemReorderPosition | null;
|
|
174
298
|
action: import("@mui/x-tree-view").TreeViewItemsReorderingAction | null;
|
|
175
|
-
} | null
|
|
299
|
+
} | null) & {
|
|
300
|
+
clearCache: () => void;
|
|
301
|
+
resultsCount: () => number;
|
|
302
|
+
resetResultsCount: () => void;
|
|
303
|
+
} & {
|
|
304
|
+
resultFunc: (resultFuncArgs_0: {
|
|
305
|
+
isItemReorderable: (itemId: string) => boolean;
|
|
306
|
+
currentReorder: {
|
|
307
|
+
draggedItemId: string;
|
|
308
|
+
targetItemId: string;
|
|
309
|
+
newPosition: import("./useTreeViewItemsReordering.types").TreeViewItemReorderPosition | null;
|
|
310
|
+
action: import("@mui/x-tree-view").TreeViewItemsReorderingAction | null;
|
|
311
|
+
} | null;
|
|
312
|
+
}) => {
|
|
313
|
+
draggedItemId: string;
|
|
314
|
+
targetItemId: string;
|
|
315
|
+
newPosition: import("./useTreeViewItemsReordering.types").TreeViewItemReorderPosition | null;
|
|
316
|
+
action: import("@mui/x-tree-view").TreeViewItemsReorderingAction | null;
|
|
317
|
+
} | null;
|
|
318
|
+
memoizedResultFunc: ((resultFuncArgs_0: {
|
|
319
|
+
isItemReorderable: (itemId: string) => boolean;
|
|
320
|
+
currentReorder: {
|
|
321
|
+
draggedItemId: string;
|
|
322
|
+
targetItemId: string;
|
|
323
|
+
newPosition: import("./useTreeViewItemsReordering.types").TreeViewItemReorderPosition | null;
|
|
324
|
+
action: import("@mui/x-tree-view").TreeViewItemsReorderingAction | null;
|
|
325
|
+
} | null;
|
|
326
|
+
}) => {
|
|
327
|
+
draggedItemId: string;
|
|
328
|
+
targetItemId: string;
|
|
329
|
+
newPosition: import("./useTreeViewItemsReordering.types").TreeViewItemReorderPosition | null;
|
|
330
|
+
action: import("@mui/x-tree-view").TreeViewItemsReorderingAction | null;
|
|
331
|
+
} | null) & {
|
|
332
|
+
clearCache: () => void;
|
|
333
|
+
resultsCount: () => number;
|
|
334
|
+
resetResultsCount: () => void;
|
|
335
|
+
};
|
|
336
|
+
lastResult: () => {
|
|
337
|
+
draggedItemId: string;
|
|
338
|
+
targetItemId: string;
|
|
339
|
+
newPosition: import("./useTreeViewItemsReordering.types").TreeViewItemReorderPosition | null;
|
|
340
|
+
action: import("@mui/x-tree-view").TreeViewItemsReorderingAction | null;
|
|
341
|
+
} | null;
|
|
342
|
+
dependencies: [(state: TreeViewState<[UseTreeViewItemsReorderingSignature]>) => {
|
|
343
|
+
isItemReorderable: (itemId: string) => boolean;
|
|
344
|
+
currentReorder: {
|
|
345
|
+
draggedItemId: string;
|
|
346
|
+
targetItemId: string;
|
|
347
|
+
newPosition: import("./useTreeViewItemsReordering.types").TreeViewItemReorderPosition | null;
|
|
348
|
+
action: import("@mui/x-tree-view").TreeViewItemsReorderingAction | null;
|
|
349
|
+
} | null;
|
|
350
|
+
}];
|
|
351
|
+
recomputations: () => number;
|
|
352
|
+
resetRecomputations: () => void;
|
|
353
|
+
dependencyRecomputations: () => number;
|
|
354
|
+
resetDependencyRecomputations: () => void;
|
|
355
|
+
} & {
|
|
356
|
+
argsMemoize: typeof import("reselect").weakMapMemoize;
|
|
357
|
+
memoize: typeof import("reselect").weakMapMemoize;
|
|
358
|
+
}, (_: any, itemId: string) => string];
|
|
359
|
+
recomputations: () => number;
|
|
360
|
+
resetRecomputations: () => void;
|
|
361
|
+
dependencyRecomputations: () => number;
|
|
362
|
+
resetDependencyRecomputations: () => void;
|
|
363
|
+
} & {
|
|
364
|
+
argsMemoize: typeof import("reselect").weakMapMemoize;
|
|
365
|
+
memoize: typeof import("reselect").weakMapMemoize;
|
|
366
|
+
};
|
|
367
|
+
/**
|
|
368
|
+
* Check if the items can be reordered.
|
|
369
|
+
* @param {TreeViewState<[UseTreeViewItemsReorderingSignature]>} state The state of the tree view.
|
|
370
|
+
* @param {string} itemId The id of the item.
|
|
371
|
+
* @returns {boolean} `true` if the items can be reordered, `false` otherwise.
|
|
372
|
+
*/
|
|
373
|
+
export declare const selectorCanItemBeReordered: ((state: any, itemId: string) => boolean) & {
|
|
374
|
+
clearCache: () => void;
|
|
375
|
+
resultsCount: () => number;
|
|
376
|
+
resetResultsCount: () => void;
|
|
377
|
+
} & {
|
|
378
|
+
resultFunc: (resultFuncArgs_0: {
|
|
379
|
+
isItemReorderable: (itemId: string) => boolean;
|
|
380
|
+
currentReorder: {
|
|
381
|
+
draggedItemId: string;
|
|
382
|
+
targetItemId: string;
|
|
383
|
+
newPosition: import("./useTreeViewItemsReordering.types").TreeViewItemReorderPosition | null;
|
|
384
|
+
action: import("@mui/x-tree-view").TreeViewItemsReorderingAction | null;
|
|
385
|
+
} | null;
|
|
386
|
+
}, resultFuncArgs_1: string) => boolean;
|
|
387
|
+
memoizedResultFunc: ((resultFuncArgs_0: {
|
|
388
|
+
isItemReorderable: (itemId: string) => boolean;
|
|
389
|
+
currentReorder: {
|
|
390
|
+
draggedItemId: string;
|
|
391
|
+
targetItemId: string;
|
|
392
|
+
newPosition: import("./useTreeViewItemsReordering.types").TreeViewItemReorderPosition | null;
|
|
393
|
+
action: import("@mui/x-tree-view").TreeViewItemsReorderingAction | null;
|
|
394
|
+
} | null;
|
|
395
|
+
}, resultFuncArgs_1: string) => boolean) & {
|
|
396
|
+
clearCache: () => void;
|
|
397
|
+
resultsCount: () => number;
|
|
398
|
+
resetResultsCount: () => void;
|
|
399
|
+
};
|
|
400
|
+
lastResult: () => boolean;
|
|
401
|
+
dependencies: [(state: TreeViewState<[UseTreeViewItemsReorderingSignature]>) => {
|
|
402
|
+
isItemReorderable: (itemId: string) => boolean;
|
|
403
|
+
currentReorder: {
|
|
404
|
+
draggedItemId: string;
|
|
405
|
+
targetItemId: string;
|
|
406
|
+
newPosition: import("./useTreeViewItemsReordering.types").TreeViewItemReorderPosition | null;
|
|
407
|
+
action: import("@mui/x-tree-view").TreeViewItemsReorderingAction | null;
|
|
408
|
+
} | null;
|
|
409
|
+
}, (_: any, itemId: string) => string];
|
|
176
410
|
recomputations: () => number;
|
|
177
411
|
resetRecomputations: () => void;
|
|
178
412
|
dependencyRecomputations: () => number;
|
package/esm/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.selectors.js
CHANGED
|
@@ -2,9 +2,16 @@ import { createSelector, selectorItemMetaLookup } from '@mui/x-tree-view/interna
|
|
|
2
2
|
/**
|
|
3
3
|
* Get the items reordering state.
|
|
4
4
|
* @param {TreeViewState<[UseTreeViewItemsReorderingSignature]>} state The state of the tree view.
|
|
5
|
-
* @returns {TreeViewItemsReorderingState
|
|
5
|
+
* @returns {TreeViewItemsReorderingState} The items reordering state.
|
|
6
6
|
*/
|
|
7
|
-
|
|
7
|
+
const selectorItemsReordering = state => state.itemsReordering;
|
|
8
|
+
|
|
9
|
+
/**
|
|
10
|
+
* Get the properties of the current reordering.
|
|
11
|
+
* @param {TreeViewState<[UseTreeViewItemsReorderingSignature]>} state The state of the tree view.
|
|
12
|
+
* @returns {TreeViewItemsReorderingState['currentReorder']} The properties of the current reordering.
|
|
13
|
+
*/
|
|
14
|
+
export const selectorCurrentItemReordering = createSelector([selectorItemsReordering], itemsReordering => itemsReordering.currentReorder);
|
|
8
15
|
|
|
9
16
|
/**
|
|
10
17
|
* Get the properties of the dragged item.
|
|
@@ -12,16 +19,16 @@ export const selectorItemsReordering = state => state.itemsReordering;
|
|
|
12
19
|
* @param {string} itemId The id of the item.
|
|
13
20
|
* @returns {TreeViewItemDraggedItemProperties | null} The properties of the dragged item if the current item is being dragged, `null` otherwise.
|
|
14
21
|
*/
|
|
15
|
-
export const
|
|
16
|
-
if (!
|
|
22
|
+
export const selectorDraggedItemProperties = createSelector([selectorCurrentItemReordering, selectorItemMetaLookup, (_, itemId) => itemId], (currentReorder, itemMetaLookup, itemId) => {
|
|
23
|
+
if (!currentReorder || currentReorder.targetItemId !== itemId || currentReorder.action == null) {
|
|
17
24
|
return null;
|
|
18
25
|
}
|
|
19
|
-
const targetDepth =
|
|
26
|
+
const targetDepth = currentReorder.newPosition?.parentId == null ? 0 :
|
|
20
27
|
// The depth is always defined because drag&drop is only usable with Rich Tree View components.
|
|
21
28
|
itemMetaLookup[itemId].depth + 1;
|
|
22
29
|
return {
|
|
23
|
-
newPosition:
|
|
24
|
-
action:
|
|
30
|
+
newPosition: currentReorder.newPosition,
|
|
31
|
+
action: currentReorder.action,
|
|
25
32
|
targetDepth
|
|
26
33
|
};
|
|
27
34
|
});
|
|
@@ -32,4 +39,12 @@ export const selectorItemsReorderingDraggedItemProperties = createSelector([sele
|
|
|
32
39
|
* @param {string} itemId The id of the item.
|
|
33
40
|
* @returns {boolean} `true` if the current item is a valid target for the dragged item, `false` otherwise.
|
|
34
41
|
*/
|
|
35
|
-
export const
|
|
42
|
+
export const selectorIsItemValidReorderingTarget = createSelector([selectorCurrentItemReordering, (_, itemId) => itemId], (currentReorder, itemId) => currentReorder && currentReorder.draggedItemId !== itemId);
|
|
43
|
+
|
|
44
|
+
/**
|
|
45
|
+
* Check if the items can be reordered.
|
|
46
|
+
* @param {TreeViewState<[UseTreeViewItemsReorderingSignature]>} state The state of the tree view.
|
|
47
|
+
* @param {string} itemId The id of the item.
|
|
48
|
+
* @returns {boolean} `true` if the items can be reordered, `false` otherwise.
|
|
49
|
+
*/
|
|
50
|
+
export const selectorCanItemBeReordered = createSelector([selectorItemsReordering, (_, itemId) => itemId], (itemsReordering, itemId) => itemsReordering.isItemReorderable(itemId));
|