@mui/x-tree-view-pro 8.23.0 → 8.24.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 +111 -1
- package/RichTreeViewPro/RichTreeViewPro.js +32 -29
- package/RichTreeViewPro/RichTreeViewPro.types.d.ts +6 -5
- package/RichTreeViewPro/index.d.ts +1 -2
- package/RichTreeViewPro/useExtractRichTreeViewProParameters.d.ts +294 -0
- package/RichTreeViewPro/useExtractRichTreeViewProParameters.js +107 -0
- package/esm/RichTreeViewPro/RichTreeViewPro.js +32 -29
- package/esm/RichTreeViewPro/RichTreeViewPro.types.d.ts +6 -5
- package/esm/RichTreeViewPro/index.d.ts +1 -2
- package/esm/RichTreeViewPro/useExtractRichTreeViewProParameters.d.ts +294 -0
- package/esm/RichTreeViewPro/useExtractRichTreeViewProParameters.js +99 -0
- package/esm/hooks/useRichTreeViewProApiRef.d.ts +2 -2
- package/esm/index.d.ts +0 -1
- package/esm/index.js +1 -2
- package/esm/internals/RichTreeViewProStore/RichTreeViewProStore.d.ts +49 -0
- package/esm/internals/RichTreeViewProStore/RichTreeViewProStore.js +15 -0
- package/esm/internals/RichTreeViewProStore/RichTreeViewProStore.types.d.ts +69 -0
- package/esm/internals/RichTreeViewProStore/RichTreeViewProStore.utils.d.ts +3 -0
- package/esm/internals/RichTreeViewProStore/RichTreeViewProStore.utils.js +18 -0
- package/esm/internals/RichTreeViewProStore/index.d.ts +2 -0
- package/esm/internals/RichTreeViewProStore/index.js +2 -0
- package/esm/internals/plugins/itemsReordering/TreeViewItemsReorderingPlugin.d.ts +53 -0
- package/esm/internals/plugins/itemsReordering/TreeViewItemsReorderingPlugin.js +180 -0
- package/esm/internals/plugins/itemsReordering/index.d.ts +3 -0
- package/esm/internals/plugins/itemsReordering/index.js +3 -0
- package/esm/internals/plugins/{useTreeViewItemsReordering → itemsReordering}/itemPlugin.js +6 -7
- package/esm/internals/plugins/itemsReordering/selectors.d.ts +29 -0
- package/esm/internals/plugins/{useTreeViewItemsReordering/useTreeViewItemsReordering.selectors.js → itemsReordering/selectors.js} +4 -4
- package/esm/internals/plugins/itemsReordering/types.d.ts +6 -0
- package/{internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.utils.d.ts → esm/internals/plugins/itemsReordering/utils.d.ts} +7 -7
- package/esm/internals/plugins/{useTreeViewItemsReordering/useTreeViewItemsReordering.utils.js → itemsReordering/utils.js} +2 -2
- package/esm/internals/plugins/lazyLoading/TreeViewLazyLoadingPlugin.d.ts +51 -0
- package/esm/internals/plugins/lazyLoading/TreeViewLazyLoadingPlugin.js +230 -0
- package/esm/internals/plugins/lazyLoading/index.d.ts +2 -0
- package/esm/internals/plugins/lazyLoading/index.js +2 -0
- package/esm/internals/plugins/lazyLoading/types.d.ts +21 -0
- package/esm/internals/plugins/lazyLoading/types.js +1 -0
- package/{internals/plugins/useTreeViewLazyLoading → esm/internals/plugins/lazyLoading}/utils.d.ts +3 -7
- package/esm/internals/plugins/{useTreeViewLazyLoading → lazyLoading}/utils.js +3 -11
- package/hooks/useRichTreeViewProApiRef.d.ts +2 -2
- package/index.d.ts +0 -1
- package/index.js +1 -23
- package/internals/RichTreeViewProStore/RichTreeViewProStore.d.ts +49 -0
- package/internals/RichTreeViewProStore/RichTreeViewProStore.js +23 -0
- package/internals/RichTreeViewProStore/RichTreeViewProStore.types.d.ts +69 -0
- package/internals/RichTreeViewProStore/RichTreeViewProStore.utils.d.ts +3 -0
- package/internals/RichTreeViewProStore/RichTreeViewProStore.utils.js +25 -0
- package/internals/RichTreeViewProStore/index.d.ts +2 -0
- package/internals/RichTreeViewProStore/index.js +27 -0
- package/internals/plugins/itemsReordering/TreeViewItemsReorderingPlugin.d.ts +53 -0
- package/internals/plugins/itemsReordering/TreeViewItemsReorderingPlugin.js +188 -0
- package/internals/plugins/itemsReordering/index.d.ts +3 -0
- package/internals/plugins/itemsReordering/index.js +27 -0
- package/internals/plugins/{useTreeViewItemsReordering → itemsReordering}/itemPlugin.js +9 -10
- package/internals/plugins/itemsReordering/selectors.d.ts +29 -0
- package/internals/plugins/{useTreeViewItemsReordering/useTreeViewItemsReordering.selectors.js → itemsReordering/selectors.js} +4 -4
- package/internals/plugins/itemsReordering/types.d.ts +6 -0
- package/{esm/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.utils.d.ts → internals/plugins/itemsReordering/utils.d.ts} +7 -7
- package/internals/plugins/{useTreeViewItemsReordering/useTreeViewItemsReordering.utils.js → itemsReordering/utils.js} +2 -2
- package/internals/plugins/lazyLoading/TreeViewLazyLoadingPlugin.d.ts +51 -0
- package/internals/plugins/lazyLoading/TreeViewLazyLoadingPlugin.js +238 -0
- package/internals/plugins/lazyLoading/index.d.ts +2 -0
- package/internals/plugins/lazyLoading/index.js +27 -0
- package/internals/plugins/lazyLoading/types.d.ts +21 -0
- package/internals/plugins/lazyLoading/types.js +5 -0
- package/{esm/internals/plugins/useTreeViewLazyLoading → internals/plugins/lazyLoading}/utils.d.ts +3 -7
- package/internals/plugins/{useTreeViewLazyLoading → lazyLoading}/utils.js +3 -9
- package/package.json +4 -4
- package/RichTreeViewPro/RichTreeViewPro.plugins.d.ts +0 -5
- package/RichTreeViewPro/RichTreeViewPro.plugins.js +0 -12
- package/esm/RichTreeViewPro/RichTreeViewPro.plugins.d.ts +0 -5
- package/esm/RichTreeViewPro/RichTreeViewPro.plugins.js +0 -6
- package/esm/internals/index.d.ts +0 -1
- package/esm/internals/plugins/useTreeViewItemsReordering/index.d.ts +0 -3
- package/esm/internals/plugins/useTreeViewItemsReordering/index.js +0 -2
- package/esm/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.d.ts +0 -3
- package/esm/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.js +0 -196
- package/esm/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.selectors.d.ts +0 -30
- package/esm/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.types.d.ts +0 -107
- package/esm/internals/plugins/useTreeViewLazyLoading/index.d.ts +0 -1
- package/esm/internals/plugins/useTreeViewLazyLoading/index.js +0 -1
- package/esm/internals/plugins/useTreeViewLazyLoading/useTreeViewLazyLoading.d.ts +0 -2
- package/esm/internals/plugins/useTreeViewLazyLoading/useTreeViewLazyLoading.js +0 -251
- package/internals/index.d.ts +0 -1
- package/internals/plugins/useTreeViewItemsReordering/index.d.ts +0 -3
- package/internals/plugins/useTreeViewItemsReordering/index.js +0 -19
- package/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.d.ts +0 -3
- package/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.js +0 -205
- package/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.selectors.d.ts +0 -30
- package/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.types.d.ts +0 -107
- package/internals/plugins/useTreeViewLazyLoading/index.d.ts +0 -1
- package/internals/plugins/useTreeViewLazyLoading/index.js +0 -12
- package/internals/plugins/useTreeViewLazyLoading/useTreeViewLazyLoading.d.ts +0 -2
- package/internals/plugins/useTreeViewLazyLoading/useTreeViewLazyLoading.js +0 -259
- /package/esm/internals/{index.js → RichTreeViewProStore/RichTreeViewProStore.types.js} +0 -0
- /package/esm/internals/plugins/{useTreeViewItemsReordering → itemsReordering}/itemPlugin.d.ts +0 -0
- /package/esm/internals/plugins/{useTreeViewItemsReordering/useTreeViewItemsReordering.types.js → itemsReordering/types.js} +0 -0
- /package/internals/{index.js → RichTreeViewProStore/RichTreeViewProStore.types.js} +0 -0
- /package/internals/plugins/{useTreeViewItemsReordering → itemsReordering}/itemPlugin.d.ts +0 -0
- /package/internals/plugins/{useTreeViewItemsReordering/useTreeViewItemsReordering.types.js → itemsReordering/types.js} +0 -0
package/esm/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.types.d.ts
DELETED
|
@@ -1,107 +0,0 @@
|
|
|
1
|
-
import { DefaultizedProps } from '@mui/x-internals/types';
|
|
2
|
-
import { TreeViewPluginSignature, UseTreeViewItemsSignature } from '@mui/x-tree-view/internals';
|
|
3
|
-
import { TreeViewItemId, TreeViewItemsReorderingAction } from '@mui/x-tree-view/models';
|
|
4
|
-
export interface UseTreeViewItemsReorderingInstance {
|
|
5
|
-
/**
|
|
6
|
-
* Get the valid reordering action if a given item is the target of the ongoing reordering.
|
|
7
|
-
* @param {TreeViewItemId} itemId The id of the item to get the action of.
|
|
8
|
-
* @returns {TreeViewItemItemReorderingValidActions} The valid actions for the item.
|
|
9
|
-
*/
|
|
10
|
-
getDroppingTargetValidActions: (itemId: TreeViewItemId) => TreeViewItemItemReorderingValidActions;
|
|
11
|
-
/**
|
|
12
|
-
* Start a reordering for the given item.
|
|
13
|
-
* @param {TreeViewItemId} itemId The id of the item to start the reordering for.
|
|
14
|
-
*/
|
|
15
|
-
startDraggingItem: (itemId: TreeViewItemId) => void;
|
|
16
|
-
/**
|
|
17
|
-
* Complete the reordering of a given item.
|
|
18
|
-
* @param {TreeViewItemId} itemId The id of the item to complete the reordering for.
|
|
19
|
-
*/
|
|
20
|
-
completeDraggingItem: (itemId: TreeViewItemId) => void;
|
|
21
|
-
/**
|
|
22
|
-
* Cancel the current reordering operation and reset the state.
|
|
23
|
-
*/
|
|
24
|
-
cancelDraggingItem: () => void;
|
|
25
|
-
/**
|
|
26
|
-
* Set the new target item for the ongoing reordering.
|
|
27
|
-
* The action will be determined based on the position of the cursor inside the target and the valid actions for this target.
|
|
28
|
-
* @param {object} params The params describing the new target item.
|
|
29
|
-
* @param {TreeViewItemId} params.itemId The id of the new target item.
|
|
30
|
-
* @param {TreeViewItemItemReorderingValidActions} params.validActions The valid actions for the new target item.
|
|
31
|
-
* @param {number} params.targetHeight The height of the target item.
|
|
32
|
-
* @param {number} params.cursorY The Y coordinate of the mouse cursor.
|
|
33
|
-
* @param {number} params.cursorX The X coordinate of the mouse cursor.
|
|
34
|
-
* @param {HTMLDivElement} params.contentElement The DOM element rendered for the content slot.
|
|
35
|
-
*/
|
|
36
|
-
setDragTargetItem: (params: {
|
|
37
|
-
itemId: TreeViewItemId;
|
|
38
|
-
validActions: TreeViewItemItemReorderingValidActions;
|
|
39
|
-
targetHeight: number;
|
|
40
|
-
cursorY: number;
|
|
41
|
-
cursorX: number;
|
|
42
|
-
contentElement: HTMLDivElement;
|
|
43
|
-
}) => void;
|
|
44
|
-
}
|
|
45
|
-
export interface TreeViewItemReorderPosition {
|
|
46
|
-
parentId: TreeViewItemId | null;
|
|
47
|
-
index: number;
|
|
48
|
-
}
|
|
49
|
-
export type TreeViewItemItemReorderingValidActions = { [key in TreeViewItemsReorderingAction]?: TreeViewItemReorderPosition };
|
|
50
|
-
export interface UseTreeViewItemsReorderingParameters {
|
|
51
|
-
/**
|
|
52
|
-
* If `true`, the reordering of items is enabled.
|
|
53
|
-
* @default false
|
|
54
|
-
*/
|
|
55
|
-
itemsReordering?: boolean;
|
|
56
|
-
/**
|
|
57
|
-
* Determine if a given item can be reordered.
|
|
58
|
-
* @param {TreeViewItemId} itemId The id of the item to check.
|
|
59
|
-
* @returns {boolean} `true` if the item can be reordered.
|
|
60
|
-
* @default () => true
|
|
61
|
-
*/
|
|
62
|
-
isItemReorderable?: (itemId: TreeViewItemId) => boolean;
|
|
63
|
-
/**
|
|
64
|
-
* Used to determine if a given item can move to some new position.
|
|
65
|
-
* @param {object} parameters The params describing the item re-ordering.
|
|
66
|
-
* @param {TreeViewItemId} parameters.itemId The id of the item that is being moved to a new position.
|
|
67
|
-
* @param {TreeViewItemReorderPosition} parameters.oldPosition The old position of the item.
|
|
68
|
-
* @param {TreeViewItemReorderPosition} parameters.newPosition The new position of the item.
|
|
69
|
-
* @returns {boolean} `true` if the item can move to the new position.
|
|
70
|
-
*/
|
|
71
|
-
canMoveItemToNewPosition?: (parameters: {
|
|
72
|
-
itemId: TreeViewItemId;
|
|
73
|
-
oldPosition: TreeViewItemReorderPosition;
|
|
74
|
-
newPosition: TreeViewItemReorderPosition;
|
|
75
|
-
}) => boolean;
|
|
76
|
-
/**
|
|
77
|
-
* Callback fired when a Tree Item is moved in the tree.
|
|
78
|
-
* @param {object} parameters The params describing the item re-ordering.
|
|
79
|
-
* @param {TreeViewItemId} parameters.itemId The id of the item moved.
|
|
80
|
-
* @param {TreeViewItemReorderPosition} parameters.oldPosition The old position of the item.
|
|
81
|
-
* @param {TreeViewItemReorderPosition} parameters.newPosition The new position of the item.
|
|
82
|
-
*/
|
|
83
|
-
onItemPositionChange?: (parameters: {
|
|
84
|
-
itemId: TreeViewItemId;
|
|
85
|
-
oldPosition: TreeViewItemReorderPosition;
|
|
86
|
-
newPosition: TreeViewItemReorderPosition;
|
|
87
|
-
}) => void;
|
|
88
|
-
}
|
|
89
|
-
export type UseTreeViewItemsReorderingParametersWithDefaults = DefaultizedProps<UseTreeViewItemsReorderingParameters, 'itemsReordering'>;
|
|
90
|
-
export interface UseTreeViewItemsReorderingState {
|
|
91
|
-
itemsReordering: {
|
|
92
|
-
isItemReorderable: (itemId: TreeViewItemId) => boolean;
|
|
93
|
-
currentReorder: {
|
|
94
|
-
draggedItemId: TreeViewItemId;
|
|
95
|
-
targetItemId: TreeViewItemId;
|
|
96
|
-
newPosition: TreeViewItemReorderPosition | null;
|
|
97
|
-
action: TreeViewItemsReorderingAction | null;
|
|
98
|
-
} | null;
|
|
99
|
-
};
|
|
100
|
-
}
|
|
101
|
-
export type UseTreeViewItemsReorderingSignature = TreeViewPluginSignature<{
|
|
102
|
-
params: UseTreeViewItemsReorderingParameters;
|
|
103
|
-
paramsWithDefaults: UseTreeViewItemsReorderingParametersWithDefaults;
|
|
104
|
-
instance: UseTreeViewItemsReorderingInstance;
|
|
105
|
-
state: UseTreeViewItemsReorderingState;
|
|
106
|
-
dependencies: [UseTreeViewItemsSignature];
|
|
107
|
-
}>;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { useTreeViewLazyLoading } from "./useTreeViewLazyLoading.js";
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { useTreeViewLazyLoading } from "./useTreeViewLazyLoading.js";
|
|
@@ -1,251 +0,0 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
|
|
3
|
-
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
4
|
-
import * as React from 'react';
|
|
5
|
-
import { useRefWithInit } from '@base-ui/utils/useRefWithInit';
|
|
6
|
-
import { useStableCallback } from '@base-ui/utils/useStableCallback';
|
|
7
|
-
import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
|
|
8
|
-
import { itemsSelectors, expansionSelectors, selectionSelectors, lazyLoadingSelectors, useInstanceEventHandler, TREE_VIEW_ROOT_PARENT_ID } from '@mui/x-tree-view/internals';
|
|
9
|
-
import { DataSourceCacheDefault } from '@mui/x-tree-view/utils';
|
|
10
|
-
import { NestedDataManager } from "./utils.js";
|
|
11
|
-
const INITIAL_STATE = {
|
|
12
|
-
loading: {},
|
|
13
|
-
errors: {}
|
|
14
|
-
};
|
|
15
|
-
export const useTreeViewLazyLoading = ({
|
|
16
|
-
instance,
|
|
17
|
-
params,
|
|
18
|
-
store
|
|
19
|
-
}) => {
|
|
20
|
-
const nestedDataManager = useRefWithInit(() => new NestedDataManager(instance)).current;
|
|
21
|
-
const cache = useRefWithInit(() => params.dataSourceCache ?? new DataSourceCacheDefault({})).current;
|
|
22
|
-
const setDataSourceLoading = useStableCallback((itemId, isLoading) => {
|
|
23
|
-
if (!params.dataSource) {
|
|
24
|
-
return;
|
|
25
|
-
}
|
|
26
|
-
const itemIdWithDefault = itemId ?? TREE_VIEW_ROOT_PARENT_ID;
|
|
27
|
-
if (lazyLoadingSelectors.isItemLoading(store.state, itemIdWithDefault) === isLoading) {
|
|
28
|
-
return;
|
|
29
|
-
}
|
|
30
|
-
const loading = _extends({}, store.state.lazyLoading.dataSource.loading);
|
|
31
|
-
if (isLoading === false) {
|
|
32
|
-
delete loading[itemIdWithDefault];
|
|
33
|
-
} else {
|
|
34
|
-
loading[itemIdWithDefault] = isLoading;
|
|
35
|
-
}
|
|
36
|
-
store.set('lazyLoading', _extends({}, store.state.lazyLoading, {
|
|
37
|
-
dataSource: _extends({}, store.state.lazyLoading.dataSource, {
|
|
38
|
-
loading
|
|
39
|
-
})
|
|
40
|
-
}));
|
|
41
|
-
});
|
|
42
|
-
const setDataSourceError = useStableCallback((itemId, error) => {
|
|
43
|
-
if (!params.dataSource) {
|
|
44
|
-
return;
|
|
45
|
-
}
|
|
46
|
-
if (lazyLoadingSelectors.itemError(store.state, itemId) === error) {
|
|
47
|
-
return;
|
|
48
|
-
}
|
|
49
|
-
const stateId = itemId ?? TREE_VIEW_ROOT_PARENT_ID;
|
|
50
|
-
const errors = _extends({}, store.state.lazyLoading.dataSource.errors);
|
|
51
|
-
if (error === null && errors[stateId] !== undefined) {
|
|
52
|
-
delete errors[stateId];
|
|
53
|
-
} else {
|
|
54
|
-
errors[stateId] = error;
|
|
55
|
-
}
|
|
56
|
-
store.set('lazyLoading', _extends({}, store.state.lazyLoading, {
|
|
57
|
-
dataSource: _extends({}, store.state.lazyLoading.dataSource, {
|
|
58
|
-
errors
|
|
59
|
-
})
|
|
60
|
-
}));
|
|
61
|
-
});
|
|
62
|
-
const fetchItems = useStableCallback(async parentIds => nestedDataManager.queue(parentIds));
|
|
63
|
-
const fetchItemChildren = useStableCallback(async ({
|
|
64
|
-
itemId,
|
|
65
|
-
forceRefresh
|
|
66
|
-
}) => {
|
|
67
|
-
if (!params.dataSource) {
|
|
68
|
-
return;
|
|
69
|
-
}
|
|
70
|
-
const {
|
|
71
|
-
getChildrenCount,
|
|
72
|
-
getTreeItems
|
|
73
|
-
} = params.dataSource;
|
|
74
|
-
// clear the request if the item is not in the tree
|
|
75
|
-
if (itemId != null && !itemsSelectors.itemMeta(store.state, itemId)) {
|
|
76
|
-
nestedDataManager.clearPendingRequest(itemId);
|
|
77
|
-
return;
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
// reset the state if we are fetching the root items
|
|
81
|
-
if (itemId == null && lazyLoadingSelectors.dataSource(store.state) !== INITIAL_STATE) {
|
|
82
|
-
store.set('lazyLoading', _extends({}, store.state.lazyLoading, {
|
|
83
|
-
dataSource: INITIAL_STATE
|
|
84
|
-
}));
|
|
85
|
-
}
|
|
86
|
-
const cacheKey = itemId ?? TREE_VIEW_ROOT_PARENT_ID;
|
|
87
|
-
if (!forceRefresh) {
|
|
88
|
-
// reads from the value from the cache
|
|
89
|
-
const cachedData = cache.get(cacheKey);
|
|
90
|
-
if (cachedData !== undefined && cachedData !== -1) {
|
|
91
|
-
if (itemId != null) {
|
|
92
|
-
nestedDataManager.setRequestSettled(itemId);
|
|
93
|
-
}
|
|
94
|
-
instance.setItemChildren({
|
|
95
|
-
items: cachedData,
|
|
96
|
-
parentId: itemId,
|
|
97
|
-
getChildrenCount
|
|
98
|
-
});
|
|
99
|
-
instance.setDataSourceLoading(itemId, false);
|
|
100
|
-
return;
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
// set the item loading status to true
|
|
104
|
-
instance.setDataSourceLoading(itemId, true);
|
|
105
|
-
if (cachedData === -1) {
|
|
106
|
-
instance.removeChildren(itemId);
|
|
107
|
-
}
|
|
108
|
-
}
|
|
109
|
-
|
|
110
|
-
// reset existing error if any
|
|
111
|
-
if (lazyLoadingSelectors.itemError(store.state, itemId)) {
|
|
112
|
-
instance.setDataSourceError(itemId, null);
|
|
113
|
-
}
|
|
114
|
-
try {
|
|
115
|
-
let response;
|
|
116
|
-
if (itemId == null) {
|
|
117
|
-
response = await getTreeItems();
|
|
118
|
-
} else {
|
|
119
|
-
response = await getTreeItems(itemId);
|
|
120
|
-
nestedDataManager.setRequestSettled(itemId);
|
|
121
|
-
}
|
|
122
|
-
// save the response in the cache
|
|
123
|
-
cache.set(cacheKey, response);
|
|
124
|
-
// update the items in the state
|
|
125
|
-
instance.setItemChildren({
|
|
126
|
-
items: response,
|
|
127
|
-
parentId: itemId,
|
|
128
|
-
getChildrenCount
|
|
129
|
-
});
|
|
130
|
-
} catch (error) {
|
|
131
|
-
const childrenFetchError = error;
|
|
132
|
-
// set the item error in the state
|
|
133
|
-
instance.setDataSourceError(itemId, childrenFetchError);
|
|
134
|
-
if (forceRefresh) {
|
|
135
|
-
instance.removeChildren(itemId);
|
|
136
|
-
}
|
|
137
|
-
} finally {
|
|
138
|
-
// set the item loading status to false
|
|
139
|
-
instance.setDataSourceLoading(itemId, false);
|
|
140
|
-
if (itemId != null) {
|
|
141
|
-
nestedDataManager.setRequestSettled(itemId);
|
|
142
|
-
}
|
|
143
|
-
}
|
|
144
|
-
});
|
|
145
|
-
const updateItemChildren = useStableCallback(itemId => {
|
|
146
|
-
return instance.fetchItemChildren({
|
|
147
|
-
itemId,
|
|
148
|
-
forceRefresh: true
|
|
149
|
-
});
|
|
150
|
-
});
|
|
151
|
-
useInstanceEventHandler(instance, 'beforeItemToggleExpansion', async eventParameters => {
|
|
152
|
-
if (!params.dataSource || !eventParameters.shouldBeExpanded) {
|
|
153
|
-
return;
|
|
154
|
-
}
|
|
155
|
-
|
|
156
|
-
// prevent the default expansion behavior
|
|
157
|
-
eventParameters.isExpansionPrevented = true;
|
|
158
|
-
await instance.fetchItems([eventParameters.itemId]);
|
|
159
|
-
const hasError = lazyLoadingSelectors.itemHasError(store.state, eventParameters.itemId);
|
|
160
|
-
if (!hasError) {
|
|
161
|
-
instance.applyItemExpansion({
|
|
162
|
-
itemId: eventParameters.itemId,
|
|
163
|
-
shouldBeExpanded: true,
|
|
164
|
-
event: eventParameters.event
|
|
165
|
-
});
|
|
166
|
-
if (selectionSelectors.isItemSelected(store.state, eventParameters.itemId)) {
|
|
167
|
-
// make sure selection propagation works correctly
|
|
168
|
-
instance.setItemSelection({
|
|
169
|
-
event: eventParameters.event,
|
|
170
|
-
itemId: eventParameters.itemId,
|
|
171
|
-
keepExistingSelection: true,
|
|
172
|
-
shouldBeSelected: true
|
|
173
|
-
});
|
|
174
|
-
}
|
|
175
|
-
}
|
|
176
|
-
});
|
|
177
|
-
useLazyLoadOnMount({
|
|
178
|
-
instance,
|
|
179
|
-
params,
|
|
180
|
-
store
|
|
181
|
-
});
|
|
182
|
-
if (params.dataSource) {
|
|
183
|
-
instance.preventItemUpdates();
|
|
184
|
-
}
|
|
185
|
-
return {
|
|
186
|
-
instance: {
|
|
187
|
-
fetchItemChildren,
|
|
188
|
-
fetchItems,
|
|
189
|
-
updateItemChildren,
|
|
190
|
-
setDataSourceLoading,
|
|
191
|
-
setDataSourceError
|
|
192
|
-
},
|
|
193
|
-
publicAPI: {
|
|
194
|
-
updateItemChildren
|
|
195
|
-
}
|
|
196
|
-
};
|
|
197
|
-
};
|
|
198
|
-
useTreeViewLazyLoading.getInitialState = () => ({
|
|
199
|
-
lazyLoading: {
|
|
200
|
-
enabled: false,
|
|
201
|
-
dataSource: INITIAL_STATE
|
|
202
|
-
}
|
|
203
|
-
});
|
|
204
|
-
useTreeViewLazyLoading.params = {
|
|
205
|
-
dataSource: true,
|
|
206
|
-
dataSourceCache: true
|
|
207
|
-
};
|
|
208
|
-
function useLazyLoadOnMount({
|
|
209
|
-
instance,
|
|
210
|
-
params,
|
|
211
|
-
store
|
|
212
|
-
}) {
|
|
213
|
-
const firstRenderRef = React.useRef(true);
|
|
214
|
-
useEnhancedEffect(() => {
|
|
215
|
-
if (!params.dataSource || !firstRenderRef.current) {
|
|
216
|
-
return;
|
|
217
|
-
}
|
|
218
|
-
firstRenderRef.current = false;
|
|
219
|
-
store.set('lazyLoading', _extends({}, store.state.lazyLoading, {
|
|
220
|
-
enabled: true
|
|
221
|
-
}));
|
|
222
|
-
async function fetchAllExpandedItems() {
|
|
223
|
-
async function fetchChildrenIfExpanded(parentIds) {
|
|
224
|
-
const expandedItems = parentIds.filter(id => expansionSelectors.isItemExpanded(store.state, id));
|
|
225
|
-
if (expandedItems.length > 0) {
|
|
226
|
-
const itemsToLazyLoad = expandedItems.filter(id => itemsSelectors.itemOrderedChildrenIds(store.state, id).length === 0);
|
|
227
|
-
if (itemsToLazyLoad.length > 0) {
|
|
228
|
-
await instance.fetchItems(itemsToLazyLoad);
|
|
229
|
-
}
|
|
230
|
-
const childrenIds = expandedItems.flatMap(id => itemsSelectors.itemOrderedChildrenIds(store.state, id));
|
|
231
|
-
await fetchChildrenIfExpanded(childrenIds);
|
|
232
|
-
}
|
|
233
|
-
}
|
|
234
|
-
if (params.items.length) {
|
|
235
|
-
const newlyExpandableItems = getExpandableItemsFromDataSource(store, params.dataSource);
|
|
236
|
-
if (newlyExpandableItems.length > 0) {
|
|
237
|
-
instance.addExpandableItems(newlyExpandableItems);
|
|
238
|
-
}
|
|
239
|
-
} else {
|
|
240
|
-
await instance.fetchItemChildren({
|
|
241
|
-
itemId: null
|
|
242
|
-
});
|
|
243
|
-
}
|
|
244
|
-
await fetchChildrenIfExpanded(itemsSelectors.itemOrderedChildrenIds(store.state, null));
|
|
245
|
-
}
|
|
246
|
-
fetchAllExpandedItems();
|
|
247
|
-
}, [instance, params.items, params.dataSource, store]);
|
|
248
|
-
}
|
|
249
|
-
function getExpandableItemsFromDataSource(store, dataSource) {
|
|
250
|
-
return Object.values(store.state.items.itemMetaLookup).filter(itemMeta => !itemMeta.expandable && dataSource.getChildrenCount(store.state.items.itemModelLookup[itemMeta.id]) !== 0).map(item => item.id);
|
|
251
|
-
}
|
package/internals/index.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export type { UseTreeViewItemsReorderingSignature } from "./plugins/useTreeViewItemsReordering/index.js";
|
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
export { useTreeViewItemsReordering } from "./useTreeViewItemsReordering.js";
|
|
2
|
-
export type { UseTreeViewItemsReorderingSignature, UseTreeViewItemsReorderingParameters, UseTreeViewItemsReorderingParametersWithDefaults, TreeViewItemReorderPosition } from "./useTreeViewItemsReordering.types.js";
|
|
3
|
-
export { itemsReorderingSelectors } from "./useTreeViewItemsReordering.selectors.js";
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
Object.defineProperty(exports, "itemsReorderingSelectors", {
|
|
7
|
-
enumerable: true,
|
|
8
|
-
get: function () {
|
|
9
|
-
return _useTreeViewItemsReordering2.itemsReorderingSelectors;
|
|
10
|
-
}
|
|
11
|
-
});
|
|
12
|
-
Object.defineProperty(exports, "useTreeViewItemsReordering", {
|
|
13
|
-
enumerable: true,
|
|
14
|
-
get: function () {
|
|
15
|
-
return _useTreeViewItemsReordering.useTreeViewItemsReordering;
|
|
16
|
-
}
|
|
17
|
-
});
|
|
18
|
-
var _useTreeViewItemsReordering = require("./useTreeViewItemsReordering");
|
|
19
|
-
var _useTreeViewItemsReordering2 = require("./useTreeViewItemsReordering.selectors");
|
|
@@ -1,205 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
|
4
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
5
|
-
Object.defineProperty(exports, "__esModule", {
|
|
6
|
-
value: true
|
|
7
|
-
});
|
|
8
|
-
exports.useTreeViewItemsReordering = void 0;
|
|
9
|
-
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
10
|
-
var React = _interopRequireWildcard(require("react"));
|
|
11
|
-
var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
|
|
12
|
-
var _internals = require("@mui/x-tree-view/internals");
|
|
13
|
-
var _useTreeViewItemsReordering = require("./useTreeViewItemsReordering.utils");
|
|
14
|
-
var _itemPlugin = require("./itemPlugin");
|
|
15
|
-
var _useTreeViewItemsReordering2 = require("./useTreeViewItemsReordering.selectors");
|
|
16
|
-
const useTreeViewItemsReordering = ({
|
|
17
|
-
params,
|
|
18
|
-
store
|
|
19
|
-
}) => {
|
|
20
|
-
const getDroppingTargetValidActions = React.useCallback(itemId => {
|
|
21
|
-
const currentReorder = _useTreeViewItemsReordering2.itemsReorderingSelectors.currentReorder(store.state);
|
|
22
|
-
if (!currentReorder) {
|
|
23
|
-
throw new Error('There is no ongoing reordering.');
|
|
24
|
-
}
|
|
25
|
-
if (itemId === currentReorder.draggedItemId) {
|
|
26
|
-
return {};
|
|
27
|
-
}
|
|
28
|
-
const canMoveItemToNewPosition = params.canMoveItemToNewPosition;
|
|
29
|
-
const targetItemMeta = _internals.itemsSelectors.itemMeta(store.state, itemId);
|
|
30
|
-
const targetItemIndex = _internals.itemsSelectors.itemIndex(store.state, targetItemMeta.id);
|
|
31
|
-
const draggedItemMeta = _internals.itemsSelectors.itemMeta(store.state, currentReorder.draggedItemId);
|
|
32
|
-
const draggedItemIndex = _internals.itemsSelectors.itemIndex(store.state, draggedItemMeta.id);
|
|
33
|
-
const isTargetLastSibling = targetItemIndex === _internals.itemsSelectors.itemOrderedChildrenIds(store.state, targetItemMeta.parentId).length - 1;
|
|
34
|
-
const oldPosition = {
|
|
35
|
-
parentId: draggedItemMeta.parentId,
|
|
36
|
-
index: draggedItemIndex
|
|
37
|
-
};
|
|
38
|
-
const checkIfPositionIsValid = positionAfterAction => {
|
|
39
|
-
let isValid;
|
|
40
|
-
// If the new position is equal to the old one, we don't want to show any dropping UI.
|
|
41
|
-
if (positionAfterAction.parentId === oldPosition.parentId && positionAfterAction.index === oldPosition.index) {
|
|
42
|
-
isValid = false;
|
|
43
|
-
} else if (canMoveItemToNewPosition) {
|
|
44
|
-
isValid = canMoveItemToNewPosition({
|
|
45
|
-
itemId: currentReorder.draggedItemId,
|
|
46
|
-
oldPosition,
|
|
47
|
-
newPosition: positionAfterAction
|
|
48
|
-
});
|
|
49
|
-
} else {
|
|
50
|
-
isValid = true;
|
|
51
|
-
}
|
|
52
|
-
return isValid;
|
|
53
|
-
};
|
|
54
|
-
const positionsAfterAction = {
|
|
55
|
-
'make-child': {
|
|
56
|
-
parentId: targetItemMeta.id,
|
|
57
|
-
index: 0
|
|
58
|
-
},
|
|
59
|
-
'reorder-above': {
|
|
60
|
-
parentId: targetItemMeta.parentId,
|
|
61
|
-
index: targetItemMeta.parentId === draggedItemMeta.parentId && targetItemIndex > draggedItemIndex ? targetItemIndex - 1 : targetItemIndex
|
|
62
|
-
},
|
|
63
|
-
'reorder-below': !targetItemMeta.expandable || isTargetLastSibling ? {
|
|
64
|
-
parentId: targetItemMeta.parentId,
|
|
65
|
-
index: targetItemMeta.parentId === draggedItemMeta.parentId && targetItemIndex > draggedItemIndex ? targetItemIndex : targetItemIndex + 1
|
|
66
|
-
} : null,
|
|
67
|
-
'move-to-parent': targetItemMeta.parentId == null ? null : {
|
|
68
|
-
parentId: targetItemMeta.parentId,
|
|
69
|
-
index: _internals.itemsSelectors.itemOrderedChildrenIds(store.state, targetItemMeta.parentId).length
|
|
70
|
-
}
|
|
71
|
-
};
|
|
72
|
-
const validActions = {};
|
|
73
|
-
Object.keys(positionsAfterAction).forEach(action => {
|
|
74
|
-
const positionAfterAction = positionsAfterAction[action];
|
|
75
|
-
if (positionAfterAction != null && checkIfPositionIsValid(positionAfterAction)) {
|
|
76
|
-
validActions[action] = positionAfterAction;
|
|
77
|
-
}
|
|
78
|
-
});
|
|
79
|
-
return validActions;
|
|
80
|
-
}, [store, params.canMoveItemToNewPosition]);
|
|
81
|
-
const startDraggingItem = React.useCallback(itemId => {
|
|
82
|
-
const isItemBeingEdited = _internals.labelSelectors.isItemBeingEdited(store.state, itemId);
|
|
83
|
-
if (isItemBeingEdited) {
|
|
84
|
-
return;
|
|
85
|
-
}
|
|
86
|
-
store.set('itemsReordering', (0, _extends2.default)({}, store.state.itemsReordering, {
|
|
87
|
-
currentReorder: {
|
|
88
|
-
targetItemId: itemId,
|
|
89
|
-
draggedItemId: itemId,
|
|
90
|
-
action: null,
|
|
91
|
-
newPosition: null
|
|
92
|
-
}
|
|
93
|
-
}));
|
|
94
|
-
}, [store]);
|
|
95
|
-
const cancelDraggingItem = React.useCallback(() => {
|
|
96
|
-
const currentReorder = _useTreeViewItemsReordering2.itemsReorderingSelectors.currentReorder(store.state);
|
|
97
|
-
if (currentReorder == null) {
|
|
98
|
-
return;
|
|
99
|
-
}
|
|
100
|
-
store.set('itemsReordering', (0, _extends2.default)({}, store.state.itemsReordering, {
|
|
101
|
-
currentReorder: null
|
|
102
|
-
}));
|
|
103
|
-
}, [store]);
|
|
104
|
-
const completeDraggingItem = React.useCallback(itemId => {
|
|
105
|
-
const currentReorder = _useTreeViewItemsReordering2.itemsReorderingSelectors.currentReorder(store.state);
|
|
106
|
-
if (currentReorder == null || currentReorder.draggedItemId !== itemId) {
|
|
107
|
-
return;
|
|
108
|
-
}
|
|
109
|
-
if (currentReorder.draggedItemId === currentReorder.targetItemId || currentReorder.action == null || currentReorder.newPosition == null) {
|
|
110
|
-
store.set('itemsReordering', (0, _extends2.default)({}, store.state.itemsReordering, {
|
|
111
|
-
currentReorder: null
|
|
112
|
-
}));
|
|
113
|
-
return;
|
|
114
|
-
}
|
|
115
|
-
const draggedItemMeta = _internals.itemsSelectors.itemMeta(store.state, currentReorder.draggedItemId);
|
|
116
|
-
const oldPosition = {
|
|
117
|
-
parentId: draggedItemMeta.parentId,
|
|
118
|
-
index: _internals.itemsSelectors.itemIndex(store.state, draggedItemMeta.id)
|
|
119
|
-
};
|
|
120
|
-
const newPosition = currentReorder.newPosition;
|
|
121
|
-
store.update({
|
|
122
|
-
itemsReordering: (0, _extends2.default)({}, store.state.itemsReordering, {
|
|
123
|
-
currentReorder: null
|
|
124
|
-
}),
|
|
125
|
-
items: (0, _useTreeViewItemsReordering.moveItemInTree)({
|
|
126
|
-
itemToMoveId: itemId,
|
|
127
|
-
newPosition,
|
|
128
|
-
oldPosition,
|
|
129
|
-
prevState: store.state.items
|
|
130
|
-
})
|
|
131
|
-
});
|
|
132
|
-
const onItemPositionChange = params.onItemPositionChange;
|
|
133
|
-
onItemPositionChange?.({
|
|
134
|
-
itemId,
|
|
135
|
-
newPosition,
|
|
136
|
-
oldPosition
|
|
137
|
-
});
|
|
138
|
-
}, [store, params.onItemPositionChange]);
|
|
139
|
-
const setDragTargetItem = React.useCallback(({
|
|
140
|
-
itemId,
|
|
141
|
-
validActions,
|
|
142
|
-
targetHeight,
|
|
143
|
-
cursorY,
|
|
144
|
-
cursorX,
|
|
145
|
-
contentElement
|
|
146
|
-
}) => {
|
|
147
|
-
const prevItemReorder = store.state.itemsReordering.currentReorder;
|
|
148
|
-
if (prevItemReorder == null || (0, _useTreeViewItemsReordering.isAncestor)(store, itemId, prevItemReorder.draggedItemId)) {
|
|
149
|
-
return;
|
|
150
|
-
}
|
|
151
|
-
const action = (0, _useTreeViewItemsReordering.chooseActionToApply)({
|
|
152
|
-
itemChildrenIndentation: params.itemChildrenIndentation,
|
|
153
|
-
validActions,
|
|
154
|
-
targetHeight,
|
|
155
|
-
targetDepth: store.state.items.itemMetaLookup[itemId].depth,
|
|
156
|
-
cursorY,
|
|
157
|
-
cursorX,
|
|
158
|
-
contentElement
|
|
159
|
-
});
|
|
160
|
-
const newPosition = action == null ? null : validActions[action];
|
|
161
|
-
if (prevItemReorder.targetItemId === itemId && prevItemReorder.action === action && prevItemReorder.newPosition?.parentId === newPosition?.parentId && prevItemReorder.newPosition?.index === newPosition?.index) {
|
|
162
|
-
return;
|
|
163
|
-
}
|
|
164
|
-
store.set('itemsReordering', (0, _extends2.default)({}, store.state.itemsReordering, {
|
|
165
|
-
currentReorder: (0, _extends2.default)({}, prevItemReorder, {
|
|
166
|
-
targetItemId: itemId,
|
|
167
|
-
newPosition,
|
|
168
|
-
action
|
|
169
|
-
})
|
|
170
|
-
}));
|
|
171
|
-
}, [store, params.itemChildrenIndentation]);
|
|
172
|
-
(0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
|
|
173
|
-
store.set('itemsReordering', (0, _extends2.default)({}, store.state.itemsReordering, {
|
|
174
|
-
isItemReorderable: params.itemsReordering ? params.isItemReorderable ?? (() => true) : () => false
|
|
175
|
-
}));
|
|
176
|
-
}, [store, params.itemsReordering, params.isItemReorderable]);
|
|
177
|
-
return {
|
|
178
|
-
instance: {
|
|
179
|
-
getDroppingTargetValidActions,
|
|
180
|
-
startDraggingItem,
|
|
181
|
-
cancelDraggingItem,
|
|
182
|
-
completeDraggingItem,
|
|
183
|
-
setDragTargetItem
|
|
184
|
-
}
|
|
185
|
-
};
|
|
186
|
-
};
|
|
187
|
-
exports.useTreeViewItemsReordering = useTreeViewItemsReordering;
|
|
188
|
-
useTreeViewItemsReordering.itemPlugin = _itemPlugin.useTreeViewItemsReorderingItemPlugin;
|
|
189
|
-
useTreeViewItemsReordering.applyDefaultValuesToParams = ({
|
|
190
|
-
params
|
|
191
|
-
}) => (0, _extends2.default)({}, params, {
|
|
192
|
-
itemsReordering: params.itemsReordering ?? false
|
|
193
|
-
});
|
|
194
|
-
useTreeViewItemsReordering.getInitialState = params => ({
|
|
195
|
-
itemsReordering: {
|
|
196
|
-
currentReorder: null,
|
|
197
|
-
isItemReorderable: params.itemsReordering ? params.isItemReorderable ?? (() => true) : () => false
|
|
198
|
-
}
|
|
199
|
-
});
|
|
200
|
-
useTreeViewItemsReordering.params = {
|
|
201
|
-
itemsReordering: true,
|
|
202
|
-
isItemReorderable: true,
|
|
203
|
-
canMoveItemToNewPosition: true,
|
|
204
|
-
onItemPositionChange: true
|
|
205
|
-
};
|
package/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.selectors.d.ts
DELETED
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
import { TreeViewState } from '@mui/x-tree-view/internals';
|
|
2
|
-
import { TreeViewItemId } from '@mui/x-tree-view/models';
|
|
3
|
-
import { UseTreeViewItemsReorderingSignature } from "./useTreeViewItemsReordering.types.js";
|
|
4
|
-
export declare const itemsReorderingSelectors: {
|
|
5
|
-
/**
|
|
6
|
-
* Gets the properties of the current reordering.
|
|
7
|
-
*/
|
|
8
|
-
currentReorder: (state: TreeViewState<[UseTreeViewItemsReorderingSignature]>) => {
|
|
9
|
-
draggedItemId: TreeViewItemId;
|
|
10
|
-
targetItemId: TreeViewItemId;
|
|
11
|
-
newPosition: import("./useTreeViewItemsReordering.types.js").TreeViewItemReorderPosition | null;
|
|
12
|
-
action: import("@mui/x-tree-view").TreeViewItemsReorderingAction | null;
|
|
13
|
-
} | null;
|
|
14
|
-
/**
|
|
15
|
-
* Gets the properties of the dragged item.
|
|
16
|
-
*/
|
|
17
|
-
draggedItemProperties: (args_0: 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<{}>, itemId: string) => {
|
|
18
|
-
newPosition: import("./useTreeViewItemsReordering.types.js").TreeViewItemReorderPosition | null;
|
|
19
|
-
action: import("@mui/x-tree-view").TreeViewItemsReorderingAction;
|
|
20
|
-
targetDepth: number;
|
|
21
|
-
} | null;
|
|
22
|
-
/**
|
|
23
|
-
* Checks whether an item is being dragged.
|
|
24
|
-
*/
|
|
25
|
-
isDragging: (state: TreeViewState<[UseTreeViewItemsReorderingSignature]>) => boolean;
|
|
26
|
-
/**
|
|
27
|
-
* Checks whether an item can be reordered.
|
|
28
|
-
*/
|
|
29
|
-
canItemBeReordered: (args_0: import("@mui/x-tree-view/internals/corePlugins/useTreeViewId/useTreeViewId.types").UseTreeViewIdState & import("./useTreeViewItemsReordering.types.js").UseTreeViewItemsReorderingState & Partial<{}>, itemId: string) => boolean;
|
|
30
|
-
};
|