@mui/x-tree-view-pro 8.0.0-alpha.8 → 8.0.0-beta.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 +2566 -687
- package/README.md +1 -1
- package/RichTreeViewPro/RichTreeViewPro.d.ts +5 -5
- package/RichTreeViewPro/RichTreeViewPro.js +101 -89
- package/RichTreeViewPro/RichTreeViewPro.plugins.d.ts +4 -5
- package/RichTreeViewPro/RichTreeViewPro.plugins.js +10 -3
- package/RichTreeViewPro/RichTreeViewPro.types.d.ts +38 -38
- package/RichTreeViewPro/RichTreeViewPro.types.js +5 -1
- package/RichTreeViewPro/index.d.ts +3 -3
- package/RichTreeViewPro/index.js +27 -3
- package/RichTreeViewPro/richTreeViewProClasses.d.ts +3 -3
- package/RichTreeViewPro/richTreeViewProClasses.js +13 -5
- package/esm/RichTreeViewPro/RichTreeViewPro.d.ts +20 -0
- package/{node → esm}/RichTreeViewPro/RichTreeViewPro.js +95 -95
- package/esm/RichTreeViewPro/RichTreeViewPro.plugins.d.ts +7 -0
- package/esm/RichTreeViewPro/RichTreeViewPro.plugins.js +6 -0
- package/esm/RichTreeViewPro/RichTreeViewPro.types.d.ts +51 -0
- package/esm/RichTreeViewPro/RichTreeViewPro.types.js +1 -0
- package/esm/RichTreeViewPro/index.d.ts +3 -0
- package/esm/RichTreeViewPro/index.js +3 -0
- package/esm/RichTreeViewPro/richTreeViewProClasses.d.ts +7 -0
- package/esm/RichTreeViewPro/richTreeViewProClasses.js +6 -0
- package/esm/index.d.ts +12 -0
- package/esm/index.js +22 -0
- package/esm/internals/index.d.ts +1 -0
- package/esm/internals/index.js +1 -0
- package/esm/internals/plugins/useTreeViewItemsReordering/index.d.ts +2 -0
- package/esm/internals/plugins/useTreeViewItemsReordering/index.js +1 -0
- package/esm/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.d.ts +3 -0
- package/esm/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.itemPlugin.d.ts +3 -0
- package/{node → esm}/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.itemPlugin.js +10 -19
- package/{node → esm}/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.js +29 -48
- package/esm/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.selectors.d.ts +183 -0
- package/{node → esm}/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.selectors.js +4 -11
- package/esm/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.types.d.ts +132 -0
- package/esm/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.types.js +1 -0
- package/esm/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.utils.d.ts +37 -0
- package/{node → esm}/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.utils.js +21 -31
- package/esm/internals/plugins/useTreeViewLazyLoading/index.d.ts +1 -0
- package/esm/internals/plugins/useTreeViewLazyLoading/index.js +1 -0
- package/esm/internals/plugins/useTreeViewLazyLoading/useTreeViewLazyLoading.d.ts +3 -0
- package/esm/internals/plugins/useTreeViewLazyLoading/useTreeViewLazyLoading.js +288 -0
- package/esm/internals/plugins/useTreeViewLazyLoading/utils.d.ts +32 -0
- package/esm/internals/plugins/useTreeViewLazyLoading/utils.js +85 -0
- package/esm/internals/utils/releaseInfo.d.ts +1 -0
- package/esm/internals/utils/releaseInfo.js +13 -0
- package/esm/internals/zero-styled/index.d.ts +3 -0
- package/esm/internals/zero-styled/index.js +7 -0
- package/esm/package.json +1 -0
- package/esm/themeAugmentation/components.d.ts +11 -0
- package/esm/themeAugmentation/index.d.ts +3 -0
- package/esm/themeAugmentation/index.js +0 -0
- package/esm/themeAugmentation/overrides.d.ts +12 -0
- package/esm/themeAugmentation/props.d.ts +10 -0
- package/index.d.ts +2 -2
- package/index.js +147 -15
- package/internals/index.d.ts +1 -1
- package/internals/index.js +12 -1
- package/internals/plugins/useTreeViewItemsReordering/index.d.ts +2 -2
- package/internals/plugins/useTreeViewItemsReordering/index.js +12 -1
- package/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.d.ts +2 -2
- package/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.itemPlugin.d.ts +1 -1
- package/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.itemPlugin.js +19 -10
- package/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.js +38 -39
- package/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.selectors.d.ts +138 -134
- package/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.selectors.js +11 -4
- package/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.types.d.ts +108 -117
- package/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.types.js +5 -1
- package/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.utils.d.ts +28 -15
- package/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.utils.js +31 -21
- package/internals/plugins/useTreeViewLazyLoading/index.d.ts +1 -0
- package/internals/plugins/useTreeViewLazyLoading/index.js +12 -0
- package/internals/plugins/useTreeViewLazyLoading/useTreeViewLazyLoading.d.ts +3 -0
- package/internals/plugins/useTreeViewLazyLoading/useTreeViewLazyLoading.js +297 -0
- package/internals/plugins/useTreeViewLazyLoading/utils.d.ts +32 -0
- package/internals/plugins/useTreeViewLazyLoading/utils.js +89 -0
- package/internals/utils/releaseInfo.d.ts +1 -1
- package/internals/utils/releaseInfo.js +13 -5
- package/internals/zero-styled/index.d.ts +1 -1
- package/internals/zero-styled/index.js +14 -4
- package/modern/RichTreeViewPro/RichTreeViewPro.d.ts +20 -0
- package/modern/RichTreeViewPro/RichTreeViewPro.js +21 -15
- package/modern/RichTreeViewPro/RichTreeViewPro.plugins.d.ts +7 -0
- package/modern/RichTreeViewPro/RichTreeViewPro.plugins.js +2 -1
- package/modern/RichTreeViewPro/RichTreeViewPro.types.d.ts +51 -0
- package/modern/RichTreeViewPro/index.d.ts +3 -0
- package/modern/RichTreeViewPro/richTreeViewProClasses.d.ts +7 -0
- package/modern/index.d.ts +12 -0
- package/modern/index.js +1 -1
- package/modern/internals/index.d.ts +1 -0
- package/modern/internals/plugins/useTreeViewItemsReordering/index.d.ts +2 -0
- package/modern/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.d.ts +3 -0
- package/modern/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.itemPlugin.d.ts +3 -0
- package/modern/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.js +4 -14
- package/modern/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.selectors.d.ts +183 -0
- package/modern/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.types.d.ts +132 -0
- package/modern/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.utils.d.ts +37 -0
- package/modern/internals/plugins/useTreeViewLazyLoading/index.d.ts +1 -0
- package/modern/internals/plugins/useTreeViewLazyLoading/index.js +1 -0
- package/modern/internals/plugins/useTreeViewLazyLoading/useTreeViewLazyLoading.d.ts +3 -0
- package/modern/internals/plugins/useTreeViewLazyLoading/useTreeViewLazyLoading.js +288 -0
- package/modern/internals/plugins/useTreeViewLazyLoading/utils.d.ts +32 -0
- package/modern/internals/plugins/useTreeViewLazyLoading/utils.js +85 -0
- package/modern/internals/utils/releaseInfo.d.ts +1 -0
- package/modern/internals/utils/releaseInfo.js +1 -1
- package/modern/internals/zero-styled/index.d.ts +3 -0
- package/modern/package.json +1 -0
- package/modern/themeAugmentation/components.d.ts +11 -0
- package/modern/themeAugmentation/index.d.ts +3 -0
- package/modern/themeAugmentation/overrides.d.ts +12 -0
- package/modern/themeAugmentation/props.d.ts +10 -0
- package/package.json +43 -10
- package/themeAugmentation/components.d.ts +1 -3
- package/themeAugmentation/index.d.ts +1 -1
- package/themeAugmentation/index.js +1 -0
- package/themeAugmentation/overrides.d.ts +2 -3
- package/themeAugmentation/props.d.ts +2 -4
- package/tsconfig.build.tsbuildinfo +1 -0
- package/RichTreeViewPro/package.json +0 -6
- package/internals/package.json +0 -6
- package/node/RichTreeViewPro/RichTreeViewPro.plugins.js +0 -11
- package/node/RichTreeViewPro/RichTreeViewPro.types.js +0 -5
- package/node/RichTreeViewPro/index.js +0 -27
- package/node/RichTreeViewPro/richTreeViewProClasses.js +0 -14
- package/node/index.js +0 -154
- package/node/internals/index.js +0 -12
- package/node/internals/plugins/useTreeViewItemsReordering/index.js +0 -12
- package/node/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.types.js +0 -5
- package/node/internals/utils/releaseInfo.js +0 -21
- package/node/internals/zero-styled/index.js +0 -17
- package/node/themeAugmentation/index.js +0 -1
- package/themeAugmentation/package.json +0 -6
package/{node → esm}/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.js
RENAMED
|
@@ -1,19 +1,10 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
exports.useTreeViewItemsReordering = void 0;
|
|
9
|
-
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
10
|
-
var React = _interopRequireWildcard(require("react"));
|
|
11
|
-
var _internals = require("@mui/x-tree-view/internals");
|
|
12
|
-
var _warning = require("@mui/x-internals/warning");
|
|
13
|
-
var _useTreeViewItemsReordering = require("./useTreeViewItemsReordering.utils");
|
|
14
|
-
var _useTreeViewItemsReordering2 = require("./useTreeViewItemsReordering.itemPlugin");
|
|
15
|
-
var _useTreeViewItemsReordering3 = require("./useTreeViewItemsReordering.selectors");
|
|
16
|
-
const useTreeViewItemsReordering = ({
|
|
1
|
+
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import { selectorItemIndex, selectorItemMeta, selectorItemOrderedChildrenIds } from '@mui/x-tree-view/internals';
|
|
4
|
+
import { chooseActionToApply, isAncestor, moveItemInTree } from "./useTreeViewItemsReordering.utils.js";
|
|
5
|
+
import { useTreeViewItemsReorderingItemPlugin } from "./useTreeViewItemsReordering.itemPlugin.js";
|
|
6
|
+
import { selectorItemsReordering } from "./useTreeViewItemsReordering.selectors.js";
|
|
7
|
+
export const useTreeViewItemsReordering = ({
|
|
17
8
|
params,
|
|
18
9
|
store
|
|
19
10
|
}) => {
|
|
@@ -28,7 +19,7 @@ const useTreeViewItemsReordering = ({
|
|
|
28
19
|
return true;
|
|
29
20
|
}, [params.itemsReordering, params.isItemReorderable]);
|
|
30
21
|
const getDroppingTargetValidActions = React.useCallback(itemId => {
|
|
31
|
-
const itemsReordering =
|
|
22
|
+
const itemsReordering = selectorItemsReordering(store.value);
|
|
32
23
|
if (!itemsReordering) {
|
|
33
24
|
throw new Error('There is no ongoing reordering.');
|
|
34
25
|
}
|
|
@@ -36,10 +27,10 @@ const useTreeViewItemsReordering = ({
|
|
|
36
27
|
return {};
|
|
37
28
|
}
|
|
38
29
|
const canMoveItemToNewPosition = params.canMoveItemToNewPosition;
|
|
39
|
-
const targetItemMeta =
|
|
40
|
-
const targetItemIndex =
|
|
41
|
-
const draggedItemMeta =
|
|
42
|
-
const draggedItemIndex =
|
|
30
|
+
const targetItemMeta = selectorItemMeta(store.value, itemId);
|
|
31
|
+
const targetItemIndex = selectorItemIndex(store.value, targetItemMeta.id);
|
|
32
|
+
const draggedItemMeta = selectorItemMeta(store.value, itemsReordering.draggedItemId);
|
|
33
|
+
const draggedItemIndex = selectorItemIndex(store.value, draggedItemMeta.id);
|
|
43
34
|
const oldPosition = {
|
|
44
35
|
parentId: draggedItemMeta.parentId,
|
|
45
36
|
index: draggedItemIndex
|
|
@@ -75,7 +66,7 @@ const useTreeViewItemsReordering = ({
|
|
|
75
66
|
},
|
|
76
67
|
'move-to-parent': targetItemMeta.parentId == null ? null : {
|
|
77
68
|
parentId: targetItemMeta.parentId,
|
|
78
|
-
index:
|
|
69
|
+
index: selectorItemOrderedChildrenIds(store.value, targetItemMeta.parentId).length
|
|
79
70
|
}
|
|
80
71
|
};
|
|
81
72
|
const validActions = {};
|
|
@@ -88,7 +79,7 @@ const useTreeViewItemsReordering = ({
|
|
|
88
79
|
return validActions;
|
|
89
80
|
}, [store, params.canMoveItemToNewPosition]);
|
|
90
81
|
const startDraggingItem = React.useCallback(itemId => {
|
|
91
|
-
store.update(prevState => (
|
|
82
|
+
store.update(prevState => _extends({}, prevState, {
|
|
92
83
|
itemsReordering: {
|
|
93
84
|
targetItemId: itemId,
|
|
94
85
|
draggedItemId: itemId,
|
|
@@ -98,25 +89,25 @@ const useTreeViewItemsReordering = ({
|
|
|
98
89
|
}));
|
|
99
90
|
}, [store]);
|
|
100
91
|
const stopDraggingItem = React.useCallback(itemId => {
|
|
101
|
-
const itemsReordering =
|
|
92
|
+
const itemsReordering = selectorItemsReordering(store.value);
|
|
102
93
|
if (itemsReordering == null || itemsReordering.draggedItemId !== itemId) {
|
|
103
94
|
return;
|
|
104
95
|
}
|
|
105
96
|
if (itemsReordering.draggedItemId === itemsReordering.targetItemId || itemsReordering.action == null || itemsReordering.newPosition == null) {
|
|
106
|
-
store.update(prevState => (
|
|
97
|
+
store.update(prevState => _extends({}, prevState, {
|
|
107
98
|
itemsReordering: null
|
|
108
99
|
}));
|
|
109
100
|
return;
|
|
110
101
|
}
|
|
111
|
-
const draggedItemMeta =
|
|
102
|
+
const draggedItemMeta = selectorItemMeta(store.value, itemsReordering.draggedItemId);
|
|
112
103
|
const oldPosition = {
|
|
113
104
|
parentId: draggedItemMeta.parentId,
|
|
114
|
-
index:
|
|
105
|
+
index: selectorItemIndex(store.value, draggedItemMeta.id)
|
|
115
106
|
};
|
|
116
107
|
const newPosition = itemsReordering.newPosition;
|
|
117
|
-
store.update(prevState => (
|
|
108
|
+
store.update(prevState => _extends({}, prevState, {
|
|
118
109
|
itemsReordering: null,
|
|
119
|
-
items:
|
|
110
|
+
items: moveItemInTree({
|
|
120
111
|
itemToMoveId: itemId,
|
|
121
112
|
newPosition,
|
|
122
113
|
oldPosition,
|
|
@@ -140,10 +131,10 @@ const useTreeViewItemsReordering = ({
|
|
|
140
131
|
}) => {
|
|
141
132
|
store.update(prevState => {
|
|
142
133
|
const prevSubState = prevState.itemsReordering;
|
|
143
|
-
if (prevSubState == null ||
|
|
134
|
+
if (prevSubState == null || isAncestor(store, itemId, prevSubState.draggedItemId)) {
|
|
144
135
|
return prevState;
|
|
145
136
|
}
|
|
146
|
-
const action =
|
|
137
|
+
const action = chooseActionToApply({
|
|
147
138
|
itemChildrenIndentation: params.itemChildrenIndentation,
|
|
148
139
|
validActions,
|
|
149
140
|
targetHeight,
|
|
@@ -156,8 +147,8 @@ const useTreeViewItemsReordering = ({
|
|
|
156
147
|
if (prevSubState.targetItemId === itemId && prevSubState.action === action && prevSubState.newPosition?.parentId === newPosition?.parentId && prevSubState.newPosition?.index === newPosition?.index) {
|
|
157
148
|
return prevState;
|
|
158
149
|
}
|
|
159
|
-
return (
|
|
160
|
-
itemsReordering: (
|
|
150
|
+
return _extends({}, prevState, {
|
|
151
|
+
itemsReordering: _extends({}, prevSubState, {
|
|
161
152
|
targetItemId: itemId,
|
|
162
153
|
newPosition,
|
|
163
154
|
action
|
|
@@ -182,22 +173,12 @@ const useTreeViewItemsReordering = ({
|
|
|
182
173
|
contextValue: pluginContextValue
|
|
183
174
|
};
|
|
184
175
|
};
|
|
185
|
-
|
|
186
|
-
useTreeViewItemsReordering.itemPlugin = _useTreeViewItemsReordering2.useTreeViewItemsReorderingItemPlugin;
|
|
176
|
+
useTreeViewItemsReordering.itemPlugin = useTreeViewItemsReorderingItemPlugin;
|
|
187
177
|
useTreeViewItemsReordering.getDefaultizedParams = ({
|
|
188
|
-
params
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
if (process.env.NODE_ENV !== 'production') {
|
|
193
|
-
if (params.itemsReordering && !canUseFeature) {
|
|
194
|
-
(0, _warning.warnOnce)(['MUI X: The items reordering feature requires the `itemsReordering` experimental feature to be enabled.', 'You can do it by passing `experimentalFeatures={{ itemsReordering: true }}` to the `<RichTreeViewPro />`component.', 'Check the documentation for more details: https://mui.com/x/react-tree-view/rich-tree-view/items/']);
|
|
195
|
-
}
|
|
196
|
-
}
|
|
197
|
-
return (0, _extends2.default)({}, params, {
|
|
198
|
-
itemsReordering: canUseFeature ? params.itemsReordering ?? false : false
|
|
199
|
-
});
|
|
200
|
-
};
|
|
178
|
+
params
|
|
179
|
+
}) => _extends({}, params, {
|
|
180
|
+
itemsReordering: params.itemsReordering ?? false
|
|
181
|
+
});
|
|
201
182
|
useTreeViewItemsReordering.getInitialState = () => ({
|
|
202
183
|
itemsReordering: null
|
|
203
184
|
});
|
package/esm/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.selectors.d.ts
ADDED
|
@@ -0,0 +1,183 @@
|
|
|
1
|
+
import { TreeViewState } from '@mui/x-tree-view/internals';
|
|
2
|
+
import { UseTreeViewItemsReorderingSignature } from "./useTreeViewItemsReordering.types.js";
|
|
3
|
+
/**
|
|
4
|
+
* Get the items reordering state.
|
|
5
|
+
* @param {TreeViewState<[UseTreeViewItemsReorderingSignature]>} state The state of the tree view.
|
|
6
|
+
* @returns {TreeViewItemsReorderingState | null} The items reordering state.
|
|
7
|
+
*/
|
|
8
|
+
export declare const selectorItemsReordering: (state: TreeViewState<[UseTreeViewItemsReorderingSignature]>) => {
|
|
9
|
+
draggedItemId: string;
|
|
10
|
+
targetItemId: string;
|
|
11
|
+
newPosition: import("./useTreeViewItemsReordering.types").TreeViewItemReorderPosition | null;
|
|
12
|
+
action: import("@mui/x-tree-view").TreeViewItemsReorderingAction | null;
|
|
13
|
+
} | null;
|
|
14
|
+
/**
|
|
15
|
+
* Get the properties of the dragged item.
|
|
16
|
+
* @param {TreeViewState<[UseTreeViewItemsSignature, UseTreeViewItemsReorderingSignature]>} state The state of the tree view.
|
|
17
|
+
* @param {string} itemId The id of the item.
|
|
18
|
+
* @returns {TreeViewItemDraggedItemProperties | null} The properties of the dragged item if the current item is being dragged, `null` otherwise.
|
|
19
|
+
*/
|
|
20
|
+
export declare const selectorItemsReorderingDraggedItemProperties: ((state: any, itemId: string) => {
|
|
21
|
+
newPosition: import("./useTreeViewItemsReordering.types").TreeViewItemReorderPosition | null;
|
|
22
|
+
action: import("@mui/x-tree-view").TreeViewItemsReorderingAction;
|
|
23
|
+
targetDepth: number;
|
|
24
|
+
} | null) & {
|
|
25
|
+
clearCache: () => void;
|
|
26
|
+
resultsCount: () => number;
|
|
27
|
+
resetResultsCount: () => void;
|
|
28
|
+
} & {
|
|
29
|
+
resultFunc: (resultFuncArgs_0: {
|
|
30
|
+
draggedItemId: string;
|
|
31
|
+
targetItemId: string;
|
|
32
|
+
newPosition: import("./useTreeViewItemsReordering.types").TreeViewItemReorderPosition | null;
|
|
33
|
+
action: import("@mui/x-tree-view").TreeViewItemsReorderingAction | null;
|
|
34
|
+
} | null, resultFuncArgs_1: {
|
|
35
|
+
[itemId: string]: import("@mui/x-tree-view/internals").TreeViewItemMeta;
|
|
36
|
+
}, resultFuncArgs_2: string) => {
|
|
37
|
+
newPosition: import("./useTreeViewItemsReordering.types").TreeViewItemReorderPosition | null;
|
|
38
|
+
action: import("@mui/x-tree-view").TreeViewItemsReorderingAction;
|
|
39
|
+
targetDepth: number;
|
|
40
|
+
} | null;
|
|
41
|
+
memoizedResultFunc: ((resultFuncArgs_0: {
|
|
42
|
+
draggedItemId: string;
|
|
43
|
+
targetItemId: string;
|
|
44
|
+
newPosition: import("./useTreeViewItemsReordering.types").TreeViewItemReorderPosition | null;
|
|
45
|
+
action: import("@mui/x-tree-view").TreeViewItemsReorderingAction | null;
|
|
46
|
+
} | null, resultFuncArgs_1: {
|
|
47
|
+
[itemId: string]: import("@mui/x-tree-view/internals").TreeViewItemMeta;
|
|
48
|
+
}, resultFuncArgs_2: string) => {
|
|
49
|
+
newPosition: import("./useTreeViewItemsReordering.types").TreeViewItemReorderPosition | null;
|
|
50
|
+
action: import("@mui/x-tree-view").TreeViewItemsReorderingAction;
|
|
51
|
+
targetDepth: number;
|
|
52
|
+
} | null) & {
|
|
53
|
+
clearCache: () => void;
|
|
54
|
+
resultsCount: () => number;
|
|
55
|
+
resetResultsCount: () => void;
|
|
56
|
+
};
|
|
57
|
+
lastResult: () => {
|
|
58
|
+
newPosition: import("./useTreeViewItemsReordering.types").TreeViewItemReorderPosition | null;
|
|
59
|
+
action: import("@mui/x-tree-view").TreeViewItemsReorderingAction;
|
|
60
|
+
targetDepth: number;
|
|
61
|
+
} | null;
|
|
62
|
+
dependencies: [(state: TreeViewState<[UseTreeViewItemsReorderingSignature]>) => {
|
|
63
|
+
draggedItemId: string;
|
|
64
|
+
targetItemId: string;
|
|
65
|
+
newPosition: import("./useTreeViewItemsReordering.types").TreeViewItemReorderPosition | null;
|
|
66
|
+
action: import("@mui/x-tree-view").TreeViewItemsReorderingAction | null;
|
|
67
|
+
} | null, ((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
|
+
cacheKey: import("@mui/x-tree-view/internals/models").TreeViewStateCacheKey;
|
|
69
|
+
}) => {
|
|
70
|
+
[itemId: string]: import("@mui/x-tree-view/internals").TreeViewItemMeta;
|
|
71
|
+
}) & {
|
|
72
|
+
clearCache: () => void;
|
|
73
|
+
resultsCount: () => number;
|
|
74
|
+
resetResultsCount: () => void;
|
|
75
|
+
} & {
|
|
76
|
+
resultFunc: (resultFuncArgs_0: {
|
|
77
|
+
disabledItemsFocusable: boolean;
|
|
78
|
+
itemModelLookup: {
|
|
79
|
+
[itemId: string]: import("@mui/x-tree-view").TreeViewBaseItem<import("@mui/x-tree-view").TreeViewDefaultItemModelProperties>;
|
|
80
|
+
};
|
|
81
|
+
itemMetaLookup: {
|
|
82
|
+
[itemId: string]: import("@mui/x-tree-view/internals").TreeViewItemMeta;
|
|
83
|
+
};
|
|
84
|
+
itemOrderedChildrenIdsLookup: {
|
|
85
|
+
[parentItemId: string]: string[];
|
|
86
|
+
};
|
|
87
|
+
itemChildrenIndexesLookup: {
|
|
88
|
+
[parentItemId: string]: {
|
|
89
|
+
[itemId: string]: number;
|
|
90
|
+
};
|
|
91
|
+
};
|
|
92
|
+
loading: boolean;
|
|
93
|
+
error: Error | null;
|
|
94
|
+
}) => {
|
|
95
|
+
[itemId: string]: import("@mui/x-tree-view/internals").TreeViewItemMeta;
|
|
96
|
+
};
|
|
97
|
+
memoizedResultFunc: ((resultFuncArgs_0: {
|
|
98
|
+
disabledItemsFocusable: boolean;
|
|
99
|
+
itemModelLookup: {
|
|
100
|
+
[itemId: string]: import("@mui/x-tree-view").TreeViewBaseItem<import("@mui/x-tree-view").TreeViewDefaultItemModelProperties>;
|
|
101
|
+
};
|
|
102
|
+
itemMetaLookup: {
|
|
103
|
+
[itemId: string]: import("@mui/x-tree-view/internals").TreeViewItemMeta;
|
|
104
|
+
};
|
|
105
|
+
itemOrderedChildrenIdsLookup: {
|
|
106
|
+
[parentItemId: string]: string[];
|
|
107
|
+
};
|
|
108
|
+
itemChildrenIndexesLookup: {
|
|
109
|
+
[parentItemId: string]: {
|
|
110
|
+
[itemId: string]: number;
|
|
111
|
+
};
|
|
112
|
+
};
|
|
113
|
+
loading: boolean;
|
|
114
|
+
error: Error | null;
|
|
115
|
+
}) => {
|
|
116
|
+
[itemId: string]: import("@mui/x-tree-view/internals").TreeViewItemMeta;
|
|
117
|
+
}) & {
|
|
118
|
+
clearCache: () => void;
|
|
119
|
+
resultsCount: () => number;
|
|
120
|
+
resetResultsCount: () => void;
|
|
121
|
+
};
|
|
122
|
+
lastResult: () => {
|
|
123
|
+
[itemId: string]: import("@mui/x-tree-view/internals").TreeViewItemMeta;
|
|
124
|
+
};
|
|
125
|
+
dependencies: [import("@mui/x-tree-view/internals/utils/selectors").TreeViewRootSelector<import("@mui/x-tree-view/internals").UseTreeViewItemsSignature>];
|
|
126
|
+
recomputations: () => number;
|
|
127
|
+
resetRecomputations: () => void;
|
|
128
|
+
dependencyRecomputations: () => number;
|
|
129
|
+
resetDependencyRecomputations: () => void;
|
|
130
|
+
} & {
|
|
131
|
+
argsMemoize: typeof import("reselect").weakMapMemoize;
|
|
132
|
+
memoize: typeof import("reselect").weakMapMemoize;
|
|
133
|
+
}, (_: any, itemId: string) => string];
|
|
134
|
+
recomputations: () => number;
|
|
135
|
+
resetRecomputations: () => void;
|
|
136
|
+
dependencyRecomputations: () => number;
|
|
137
|
+
resetDependencyRecomputations: () => void;
|
|
138
|
+
} & {
|
|
139
|
+
argsMemoize: typeof import("reselect").weakMapMemoize;
|
|
140
|
+
memoize: typeof import("reselect").weakMapMemoize;
|
|
141
|
+
};
|
|
142
|
+
/**
|
|
143
|
+
* Check if the current item is a valid target for the dragged item.
|
|
144
|
+
* @param {TreeViewState<[UseTreeViewItemsReorderingSignature]>} state The state of the tree view.
|
|
145
|
+
* @param {string} itemId The id of the item.
|
|
146
|
+
* @returns {boolean} `true` if the current item is a valid target for the dragged item, `false` otherwise.
|
|
147
|
+
*/
|
|
148
|
+
export declare const selectorItemsReorderingIsValidTarget: ((state: any, itemId: string) => boolean | null) & {
|
|
149
|
+
clearCache: () => void;
|
|
150
|
+
resultsCount: () => number;
|
|
151
|
+
resetResultsCount: () => void;
|
|
152
|
+
} & {
|
|
153
|
+
resultFunc: (resultFuncArgs_0: {
|
|
154
|
+
draggedItemId: string;
|
|
155
|
+
targetItemId: string;
|
|
156
|
+
newPosition: import("./useTreeViewItemsReordering.types").TreeViewItemReorderPosition | null;
|
|
157
|
+
action: import("@mui/x-tree-view").TreeViewItemsReorderingAction | null;
|
|
158
|
+
} | null, resultFuncArgs_1: string) => boolean | null;
|
|
159
|
+
memoizedResultFunc: ((resultFuncArgs_0: {
|
|
160
|
+
draggedItemId: string;
|
|
161
|
+
targetItemId: string;
|
|
162
|
+
newPosition: import("./useTreeViewItemsReordering.types").TreeViewItemReorderPosition | null;
|
|
163
|
+
action: import("@mui/x-tree-view").TreeViewItemsReorderingAction | null;
|
|
164
|
+
} | null, resultFuncArgs_1: string) => boolean | null) & {
|
|
165
|
+
clearCache: () => void;
|
|
166
|
+
resultsCount: () => number;
|
|
167
|
+
resetResultsCount: () => void;
|
|
168
|
+
};
|
|
169
|
+
lastResult: () => boolean | null;
|
|
170
|
+
dependencies: [(state: TreeViewState<[UseTreeViewItemsReorderingSignature]>) => {
|
|
171
|
+
draggedItemId: string;
|
|
172
|
+
targetItemId: string;
|
|
173
|
+
newPosition: import("./useTreeViewItemsReordering.types").TreeViewItemReorderPosition | null;
|
|
174
|
+
action: import("@mui/x-tree-view").TreeViewItemsReorderingAction | null;
|
|
175
|
+
} | null, (_: any, itemId: string) => string];
|
|
176
|
+
recomputations: () => number;
|
|
177
|
+
resetRecomputations: () => void;
|
|
178
|
+
dependencyRecomputations: () => number;
|
|
179
|
+
resetDependencyRecomputations: () => void;
|
|
180
|
+
} & {
|
|
181
|
+
argsMemoize: typeof import("reselect").weakMapMemoize;
|
|
182
|
+
memoize: typeof import("reselect").weakMapMemoize;
|
|
183
|
+
};
|
|
@@ -1,16 +1,10 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.selectorItemsReorderingIsValidTarget = exports.selectorItemsReorderingDraggedItemProperties = exports.selectorItemsReordering = void 0;
|
|
7
|
-
var _internals = require("@mui/x-tree-view/internals");
|
|
1
|
+
import { createSelector, selectorItemMetaLookup } from '@mui/x-tree-view/internals';
|
|
8
2
|
/**
|
|
9
3
|
* Get the items reordering state.
|
|
10
4
|
* @param {TreeViewState<[UseTreeViewItemsReorderingSignature]>} state The state of the tree view.
|
|
11
5
|
* @returns {TreeViewItemsReorderingState | null} The items reordering state.
|
|
12
6
|
*/
|
|
13
|
-
const selectorItemsReordering = state => state.itemsReordering;
|
|
7
|
+
export const selectorItemsReordering = state => state.itemsReordering;
|
|
14
8
|
|
|
15
9
|
/**
|
|
16
10
|
* Get the properties of the dragged item.
|
|
@@ -18,8 +12,7 @@ const selectorItemsReordering = state => state.itemsReordering;
|
|
|
18
12
|
* @param {string} itemId The id of the item.
|
|
19
13
|
* @returns {TreeViewItemDraggedItemProperties | null} The properties of the dragged item if the current item is being dragged, `null` otherwise.
|
|
20
14
|
*/
|
|
21
|
-
|
|
22
|
-
const selectorItemsReorderingDraggedItemProperties = exports.selectorItemsReorderingDraggedItemProperties = (0, _internals.createSelector)([selectorItemsReordering, _internals.selectorItemMetaLookup, (_, itemId) => itemId], (itemsReordering, itemMetaLookup, itemId) => {
|
|
15
|
+
export const selectorItemsReorderingDraggedItemProperties = createSelector([selectorItemsReordering, selectorItemMetaLookup, (_, itemId) => itemId], (itemsReordering, itemMetaLookup, itemId) => {
|
|
23
16
|
if (!itemsReordering || itemsReordering.targetItemId !== itemId || itemsReordering.action == null) {
|
|
24
17
|
return null;
|
|
25
18
|
}
|
|
@@ -39,4 +32,4 @@ const selectorItemsReorderingDraggedItemProperties = exports.selectorItemsReorde
|
|
|
39
32
|
* @param {string} itemId The id of the item.
|
|
40
33
|
* @returns {boolean} `true` if the current item is a valid target for the dragged item, `false` otherwise.
|
|
41
34
|
*/
|
|
42
|
-
const selectorItemsReorderingIsValidTarget =
|
|
35
|
+
export const selectorItemsReorderingIsValidTarget = createSelector([selectorItemsReordering, (_, itemId) => itemId], (itemsReordering, itemId) => itemsReordering && itemsReordering.draggedItemId !== itemId);
|
package/esm/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.types.d.ts
ADDED
|
@@ -0,0 +1,132 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { DefaultizedProps } from '@mui/x-internals/types';
|
|
3
|
+
import { TreeViewPluginSignature, UseTreeViewItemsSignature } from '@mui/x-tree-view/internals';
|
|
4
|
+
import { TreeViewItemId, TreeViewItemsReorderingAction, TreeViewCancellableEventHandler } from '@mui/x-tree-view/models';
|
|
5
|
+
import { TreeItemDragAndDropOverlayProps } from '@mui/x-tree-view/TreeItemDragAndDropOverlay';
|
|
6
|
+
export interface UseTreeViewItemsReorderingInstance {
|
|
7
|
+
/**
|
|
8
|
+
* Check if a given item can be dragged.
|
|
9
|
+
* @param {TreeViewItemId} itemId The id of the item to check.
|
|
10
|
+
* @returns {boolean} `true` if the item can be dragged, `false` otherwise.
|
|
11
|
+
*/
|
|
12
|
+
canItemBeDragged: (itemId: TreeViewItemId) => boolean;
|
|
13
|
+
/**
|
|
14
|
+
* Get the valid reordering action if a given item is the target of the ongoing reordering.
|
|
15
|
+
* @param {TreeViewItemId} itemId The id of the item to get the action of.
|
|
16
|
+
* @returns {TreeViewItemItemReorderingValidActions} The valid actions for the item.
|
|
17
|
+
*/
|
|
18
|
+
getDroppingTargetValidActions: (itemId: TreeViewItemId) => TreeViewItemItemReorderingValidActions;
|
|
19
|
+
/**
|
|
20
|
+
* Start a reordering for the given item.
|
|
21
|
+
* @param {TreeViewItemId} itemId The id of the item to start the reordering for.
|
|
22
|
+
*/
|
|
23
|
+
startDraggingItem: (itemId: TreeViewItemId) => void;
|
|
24
|
+
/**
|
|
25
|
+
* Stop the reordering of a given item.
|
|
26
|
+
* @param {TreeViewItemId} itemId The id of the item to stop the reordering for.
|
|
27
|
+
*/
|
|
28
|
+
stopDraggingItem: (itemId: TreeViewItemId) => void;
|
|
29
|
+
/**
|
|
30
|
+
* Set the new target item for the ongoing reordering.
|
|
31
|
+
* The action will be determined based on the position of the cursor inside the target and the valid actions for this target.
|
|
32
|
+
* @param {object} params The params describing the new target item.
|
|
33
|
+
* @param {TreeViewItemId} params.itemId The id of the new target item.
|
|
34
|
+
* @param {TreeViewItemItemReorderingValidActions} params.validActions The valid actions for the new target item.
|
|
35
|
+
* @param {number} params.targetHeight The height of the target item.
|
|
36
|
+
* @param {number} params.cursorY The Y coordinate of the mouse cursor.
|
|
37
|
+
* @param {number} params.cursorX The X coordinate of the mouse cursor.
|
|
38
|
+
* @param {HTMLDivElement} params.contentElement The DOM element rendered for the content slot.
|
|
39
|
+
*/
|
|
40
|
+
setDragTargetItem: (params: {
|
|
41
|
+
itemId: TreeViewItemId;
|
|
42
|
+
validActions: TreeViewItemItemReorderingValidActions;
|
|
43
|
+
targetHeight: number;
|
|
44
|
+
cursorY: number;
|
|
45
|
+
cursorX: number;
|
|
46
|
+
contentElement: HTMLDivElement;
|
|
47
|
+
}) => void;
|
|
48
|
+
}
|
|
49
|
+
export interface TreeViewItemReorderPosition {
|
|
50
|
+
parentId: string | null;
|
|
51
|
+
index: number;
|
|
52
|
+
}
|
|
53
|
+
export type TreeViewItemItemReorderingValidActions = { [key in TreeViewItemsReorderingAction]?: TreeViewItemReorderPosition };
|
|
54
|
+
export interface UseTreeViewItemsReorderingParameters {
|
|
55
|
+
/**
|
|
56
|
+
* If `true`, the reordering of items is enabled.
|
|
57
|
+
* @default false
|
|
58
|
+
*/
|
|
59
|
+
itemsReordering?: boolean;
|
|
60
|
+
/**
|
|
61
|
+
* Determine if a given item can be reordered.
|
|
62
|
+
* @param {string} itemId The id of the item to check.
|
|
63
|
+
* @returns {boolean} `true` if the item can be reordered.
|
|
64
|
+
* @default () => true
|
|
65
|
+
*/
|
|
66
|
+
isItemReorderable?: (itemId: string) => boolean;
|
|
67
|
+
/**
|
|
68
|
+
* Used to determine if a given item can move to some new position.
|
|
69
|
+
* @param {object} params The params describing the item re-ordering.
|
|
70
|
+
* @param {string} params.itemId The id of the item that is being moved to a new position.
|
|
71
|
+
* @param {TreeViewItemReorderPosition} params.oldPosition The old position of the item.
|
|
72
|
+
* @param {TreeViewItemReorderPosition} params.newPosition The new position of the item.
|
|
73
|
+
* @returns {boolean} `true` if the item can move to the new position.
|
|
74
|
+
*/
|
|
75
|
+
canMoveItemToNewPosition?: (params: {
|
|
76
|
+
itemId: string;
|
|
77
|
+
oldPosition: TreeViewItemReorderPosition;
|
|
78
|
+
newPosition: TreeViewItemReorderPosition;
|
|
79
|
+
}) => boolean;
|
|
80
|
+
/**
|
|
81
|
+
* Callback fired when a Tree Item is moved in the tree.
|
|
82
|
+
* @param {object} params The params describing the item re-ordering.
|
|
83
|
+
* @param {string} params.itemId The id of the item moved.
|
|
84
|
+
* @param {TreeViewItemReorderPosition} params.oldPosition The old position of the item.
|
|
85
|
+
* @param {TreeViewItemReorderPosition} params.newPosition The new position of the item.
|
|
86
|
+
*/
|
|
87
|
+
onItemPositionChange?: (params: {
|
|
88
|
+
itemId: string;
|
|
89
|
+
oldPosition: TreeViewItemReorderPosition;
|
|
90
|
+
newPosition: TreeViewItemReorderPosition;
|
|
91
|
+
}) => void;
|
|
92
|
+
}
|
|
93
|
+
export type UseTreeViewItemsReorderingDefaultizedParameters = DefaultizedProps<UseTreeViewItemsReorderingParameters, 'itemsReordering'>;
|
|
94
|
+
export interface UseTreeViewItemsReorderingState {
|
|
95
|
+
itemsReordering: {
|
|
96
|
+
draggedItemId: string;
|
|
97
|
+
targetItemId: string;
|
|
98
|
+
newPosition: TreeViewItemReorderPosition | null;
|
|
99
|
+
action: TreeViewItemsReorderingAction | null;
|
|
100
|
+
} | null;
|
|
101
|
+
}
|
|
102
|
+
interface UseTreeViewItemsReorderingContextValue {
|
|
103
|
+
itemsReordering: {
|
|
104
|
+
enabled: boolean;
|
|
105
|
+
isItemReorderable: ((itemId: string) => boolean) | undefined;
|
|
106
|
+
};
|
|
107
|
+
}
|
|
108
|
+
export type UseTreeViewItemsReorderingSignature = TreeViewPluginSignature<{
|
|
109
|
+
params: UseTreeViewItemsReorderingParameters;
|
|
110
|
+
defaultizedParams: UseTreeViewItemsReorderingDefaultizedParameters;
|
|
111
|
+
instance: UseTreeViewItemsReorderingInstance;
|
|
112
|
+
state: UseTreeViewItemsReorderingState;
|
|
113
|
+
contextValue: UseTreeViewItemsReorderingContextValue;
|
|
114
|
+
dependencies: [UseTreeViewItemsSignature];
|
|
115
|
+
}>;
|
|
116
|
+
export interface UseTreeItemRootSlotPropsFromItemsReordering {
|
|
117
|
+
draggable?: true;
|
|
118
|
+
onDragStart?: TreeViewCancellableEventHandler<React.DragEvent>;
|
|
119
|
+
onDragOver?: TreeViewCancellableEventHandler<React.DragEvent>;
|
|
120
|
+
onDragEnd?: TreeViewCancellableEventHandler<React.DragEvent>;
|
|
121
|
+
}
|
|
122
|
+
export interface UseTreeItemContentSlotPropsFromItemsReordering {
|
|
123
|
+
onDragEnter?: TreeViewCancellableEventHandler<React.DragEvent>;
|
|
124
|
+
onDragOver?: TreeViewCancellableEventHandler<React.DragEvent>;
|
|
125
|
+
}
|
|
126
|
+
export interface UseTreeItemDragAndDropOverlaySlotPropsFromItemsReordering extends TreeItemDragAndDropOverlayProps {}
|
|
127
|
+
declare module '@mui/x-tree-view/useTreeItem' {
|
|
128
|
+
interface UseTreeItemRootSlotOwnProps extends UseTreeItemRootSlotPropsFromItemsReordering {}
|
|
129
|
+
interface UseTreeItemContentSlotOwnProps extends UseTreeItemContentSlotPropsFromItemsReordering {}
|
|
130
|
+
interface UseTreeItemDragAndDropOverlaySlotOwnProps extends UseTreeItemDragAndDropOverlaySlotPropsFromItemsReordering {}
|
|
131
|
+
}
|
|
132
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/esm/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.utils.d.ts
ADDED
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import { TreeViewUsedStore, UseTreeViewItemsState } from '@mui/x-tree-view/internals';
|
|
2
|
+
import { TreeViewItemId, TreeViewItemsReorderingAction } from '@mui/x-tree-view/models';
|
|
3
|
+
import { TreeViewItemItemReorderingValidActions, TreeViewItemReorderPosition, UseTreeViewItemsReorderingSignature } from "./useTreeViewItemsReordering.types.js";
|
|
4
|
+
/**
|
|
5
|
+
* Checks if the item with the id itemIdB is an ancestor of the item with the id itemIdA.
|
|
6
|
+
*/
|
|
7
|
+
export declare const isAncestor: (store: TreeViewUsedStore<UseTreeViewItemsReorderingSignature>, itemIdA: string, itemIdB: string) => boolean;
|
|
8
|
+
interface GetNewPositionParams {
|
|
9
|
+
itemChildrenIndentation: string | number;
|
|
10
|
+
validActions: TreeViewItemItemReorderingValidActions;
|
|
11
|
+
targetHeight: number;
|
|
12
|
+
targetDepth: number;
|
|
13
|
+
cursorY: number;
|
|
14
|
+
cursorX: number;
|
|
15
|
+
contentElement: HTMLDivElement;
|
|
16
|
+
}
|
|
17
|
+
export declare const chooseActionToApply: ({
|
|
18
|
+
itemChildrenIndentation,
|
|
19
|
+
validActions,
|
|
20
|
+
targetHeight,
|
|
21
|
+
targetDepth,
|
|
22
|
+
cursorX,
|
|
23
|
+
cursorY,
|
|
24
|
+
contentElement
|
|
25
|
+
}: GetNewPositionParams) => TreeViewItemsReorderingAction | null;
|
|
26
|
+
export declare const moveItemInTree: <R extends {}>({
|
|
27
|
+
itemToMoveId,
|
|
28
|
+
oldPosition,
|
|
29
|
+
newPosition,
|
|
30
|
+
prevState
|
|
31
|
+
}: {
|
|
32
|
+
itemToMoveId: TreeViewItemId;
|
|
33
|
+
oldPosition: TreeViewItemReorderPosition;
|
|
34
|
+
newPosition: TreeViewItemReorderPosition;
|
|
35
|
+
prevState: UseTreeViewItemsState<R>["items"];
|
|
36
|
+
}) => UseTreeViewItemsState<R>["items"];
|
|
37
|
+
export {};
|