@mui/x-tree-view 7.0.0-beta.3 → 7.0.0-beta.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +357 -22
- package/RichTreeView/RichTreeView.js +8 -0
- package/RichTreeView/RichTreeView.types.d.ts +7 -1
- package/SimpleTreeView/SimpleTreeView.js +8 -0
- package/SimpleTreeView/SimpleTreeView.types.d.ts +7 -1
- package/TreeItem/TreeItem.js +1 -1
- package/TreeItem/TreeItem.types.d.ts +1 -1
- package/TreeView/TreeView.js +8 -0
- package/hooks/index.d.ts +1 -0
- package/hooks/index.js +1 -0
- package/hooks/package.json +6 -0
- package/hooks/useTreeViewApiRef.d.ts +6 -0
- package/hooks/useTreeViewApiRef.js +5 -0
- package/index.d.ts +1 -0
- package/index.js +3 -2
- package/internals/TreeViewProvider/DescendantProvider.js +1 -11
- package/internals/hooks/useTimeout.d.ts +5 -3
- package/internals/hooks/useTimeout.js +13 -5
- package/internals/models/helpers.d.ts +1 -0
- package/internals/models/plugin.d.ts +12 -0
- package/internals/models/treeView.d.ts +1 -0
- package/internals/plugins/useTreeViewFocus/useTreeViewFocus.js +40 -22
- package/internals/plugins/useTreeViewFocus/useTreeViewFocus.types.d.ts +5 -0
- package/internals/useTreeView/useTreeView.d.ts +2 -0
- package/internals/useTreeView/useTreeView.js +12 -0
- package/internals/useTreeView/useTreeView.types.d.ts +2 -1
- package/internals/useTreeView/useTreeView.utils.d.ts +2 -1
- package/internals/useTreeView/useTreeView.utils.js +3 -0
- package/internals/utils/extractPluginParamsFromProps.d.ts +3 -2
- package/internals/utils/extractPluginParamsFromProps.js +5 -3
- package/internals/utils/utils.d.ts +1 -0
- package/internals/utils/utils.js +10 -0
- package/modern/RichTreeView/RichTreeView.js +8 -0
- package/modern/SimpleTreeView/SimpleTreeView.js +8 -0
- package/modern/TreeItem/TreeItem.js +1 -1
- package/modern/TreeView/TreeView.js +8 -0
- package/modern/hooks/index.js +1 -0
- package/modern/hooks/useTreeViewApiRef.js +5 -0
- package/modern/index.js +3 -2
- package/modern/internals/TreeViewProvider/DescendantProvider.js +1 -11
- package/modern/internals/hooks/useTimeout.js +13 -5
- package/modern/internals/plugins/useTreeViewFocus/useTreeViewFocus.js +40 -22
- package/modern/internals/useTreeView/useTreeView.js +12 -0
- package/modern/internals/useTreeView/useTreeView.utils.js +3 -0
- package/modern/internals/utils/extractPluginParamsFromProps.js +5 -3
- package/modern/internals/utils/utils.js +10 -0
- package/node/RichTreeView/RichTreeView.js +8 -0
- package/node/SimpleTreeView/SimpleTreeView.js +8 -0
- package/node/TreeItem/TreeItem.js +1 -1
- package/node/TreeView/TreeView.js +8 -0
- package/node/hooks/index.js +12 -0
- package/node/hooks/useTreeViewApiRef.js +14 -0
- package/node/index.js +13 -1
- package/node/internals/TreeViewProvider/DescendantProvider.js +1 -10
- package/node/internals/hooks/useTimeout.js +13 -4
- package/node/internals/plugins/useTreeViewFocus/useTreeViewFocus.js +39 -21
- package/node/internals/useTreeView/useTreeView.js +13 -0
- package/node/internals/useTreeView/useTreeView.utils.js +6 -2
- package/node/internals/utils/extractPluginParamsFromProps.js +5 -3
- package/node/internals/utils/utils.js +17 -0
- package/package.json +1 -1
- package/legacy/RichTreeView/RichTreeView.js +0 -255
- package/legacy/RichTreeView/RichTreeView.types.js +0 -1
- package/legacy/RichTreeView/index.js +0 -3
- package/legacy/RichTreeView/richTreeViewClasses.js +0 -6
- package/legacy/SimpleTreeView/SimpleTreeView.js +0 -190
- package/legacy/SimpleTreeView/SimpleTreeView.plugins.js +0 -6
- package/legacy/SimpleTreeView/SimpleTreeView.types.js +0 -1
- package/legacy/SimpleTreeView/index.js +0 -3
- package/legacy/SimpleTreeView/simpleTreeViewClasses.js +0 -6
- package/legacy/TreeItem/TreeItem.js +0 -360
- package/legacy/TreeItem/TreeItem.types.js +0 -1
- package/legacy/TreeItem/TreeItemContent.js +0 -95
- package/legacy/TreeItem/index.js +0 -4
- package/legacy/TreeItem/treeItemClasses.js +0 -6
- package/legacy/TreeItem/useTreeItemState.js +0 -58
- package/legacy/TreeView/TreeView.js +0 -165
- package/legacy/TreeView/TreeView.types.js +0 -1
- package/legacy/TreeView/index.js +0 -3
- package/legacy/TreeView/treeViewClasses.js +0 -6
- package/legacy/icons/icons.js +0 -9
- package/legacy/icons/index.js +0 -1
- package/legacy/index.js +0 -14
- package/legacy/internals/TreeViewProvider/DescendantProvider.js +0 -199
- package/legacy/internals/TreeViewProvider/TreeViewContext.js +0 -8
- package/legacy/internals/TreeViewProvider/TreeViewProvider.js +0 -19
- package/legacy/internals/TreeViewProvider/TreeViewProvider.types.js +0 -1
- package/legacy/internals/TreeViewProvider/index.js +0 -1
- package/legacy/internals/TreeViewProvider/useTreeViewContext.js +0 -9
- package/legacy/internals/corePlugins/corePlugins.js +0 -6
- package/legacy/internals/corePlugins/index.js +0 -1
- package/legacy/internals/corePlugins/useTreeViewInstanceEvents/index.js +0 -1
- package/legacy/internals/corePlugins/useTreeViewInstanceEvents/useTreeViewInstanceEvents.js +0 -40
- package/legacy/internals/corePlugins/useTreeViewInstanceEvents/useTreeViewInstanceEvents.types.js +0 -1
- package/legacy/internals/hooks/useInstanceEventHandler.js +0 -87
- package/legacy/internals/hooks/useLazyRef.js +0 -11
- package/legacy/internals/hooks/useOnMount.js +0 -7
- package/legacy/internals/hooks/useTimeout.js +0 -38
- package/legacy/internals/index.js +0 -4
- package/legacy/internals/models/MuiCancellableEvent.js +0 -1
- package/legacy/internals/models/events.js +0 -1
- package/legacy/internals/models/helpers.js +0 -1
- package/legacy/internals/models/index.js +0 -3
- package/legacy/internals/models/plugin.js +0 -1
- package/legacy/internals/models/treeView.js +0 -1
- package/legacy/internals/plugins/defaultPlugins.js +0 -10
- package/legacy/internals/plugins/index.js +0 -1
- package/legacy/internals/plugins/useTreeViewExpansion/index.js +0 -1
- package/legacy/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.js +0 -81
- package/legacy/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.types.js +0 -1
- package/legacy/internals/plugins/useTreeViewFocus/index.js +0 -1
- package/legacy/internals/plugins/useTreeViewFocus/useTreeViewFocus.js +0 -103
- package/legacy/internals/plugins/useTreeViewFocus/useTreeViewFocus.types.js +0 -1
- package/legacy/internals/plugins/useTreeViewIcons/index.js +0 -1
- package/legacy/internals/plugins/useTreeViewIcons/useTreeViewIcons.js +0 -21
- package/legacy/internals/plugins/useTreeViewIcons/useTreeViewIcons.types.js +0 -1
- package/legacy/internals/plugins/useTreeViewId/index.js +0 -1
- package/legacy/internals/plugins/useTreeViewId/useTreeViewId.js +0 -24
- package/legacy/internals/plugins/useTreeViewId/useTreeViewId.types.js +0 -1
- package/legacy/internals/plugins/useTreeViewJSXNodes/index.js +0 -1
- package/legacy/internals/plugins/useTreeViewJSXNodes/useTreeViewJSXNodes.js +0 -130
- package/legacy/internals/plugins/useTreeViewJSXNodes/useTreeViewJSXNodes.types.js +0 -1
- package/legacy/internals/plugins/useTreeViewKeyboardNavigation/index.js +0 -1
- package/legacy/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.js +0 -284
- package/legacy/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.types.js +0 -1
- package/legacy/internals/plugins/useTreeViewNodes/index.js +0 -1
- package/legacy/internals/plugins/useTreeViewNodes/useTreeViewNodes.js +0 -161
- package/legacy/internals/plugins/useTreeViewNodes/useTreeViewNodes.types.js +0 -1
- package/legacy/internals/plugins/useTreeViewSelection/index.js +0 -1
- package/legacy/internals/plugins/useTreeViewSelection/useTreeViewSelection.js +0 -219
- package/legacy/internals/plugins/useTreeViewSelection/useTreeViewSelection.types.js +0 -1
- package/legacy/internals/plugins/useTreeViewSelection/useTreeViewSelection.utils.js +0 -55
- package/legacy/internals/useTreeView/index.js +0 -1
- package/legacy/internals/useTreeView/useTreeView.js +0 -111
- package/legacy/internals/useTreeView/useTreeView.types.js +0 -1
- package/legacy/internals/useTreeView/useTreeView.utils.js +0 -46
- package/legacy/internals/useTreeView/useTreeViewModels.js +0 -75
- package/legacy/internals/utils/EventManager.js +0 -91
- package/legacy/internals/utils/cleanupTracking/CleanupTracking.js +0 -1
- package/legacy/internals/utils/cleanupTracking/FinalizationRegistryBasedCleanupTracking.js +0 -29
- package/legacy/internals/utils/cleanupTracking/TimerBasedCleanupTracking.js +0 -52
- package/legacy/internals/utils/extractPluginParamsFromProps.js +0 -36
- package/legacy/internals/utils/publishTreeViewEvent.js +0 -3
- package/legacy/internals/utils/warning.js +0 -15
- package/legacy/models/index.js +0 -1
- package/legacy/models/items.js +0 -1
- package/legacy/themeAugmentation/index.js +0 -3
package/legacy/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.js
DELETED
|
@@ -1,284 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import { useTheme } from '@mui/material/styles';
|
|
3
|
-
import useEventCallback from '@mui/utils/useEventCallback';
|
|
4
|
-
import { getFirstNode, getLastNode, getNextNode, getPreviousNode, populateInstance } from '../../useTreeView/useTreeView.utils';
|
|
5
|
-
function isPrintableCharacter(string) {
|
|
6
|
-
return !!string && string.length === 1 && !!string.match(/\S/);
|
|
7
|
-
}
|
|
8
|
-
function findNextFirstChar(firstChars, startIndex, char) {
|
|
9
|
-
for (var i = startIndex; i < firstChars.length; i += 1) {
|
|
10
|
-
if (char === firstChars[i]) {
|
|
11
|
-
return i;
|
|
12
|
-
}
|
|
13
|
-
}
|
|
14
|
-
return -1;
|
|
15
|
-
}
|
|
16
|
-
export var useTreeViewKeyboardNavigation = function useTreeViewKeyboardNavigation(_ref) {
|
|
17
|
-
var instance = _ref.instance,
|
|
18
|
-
params = _ref.params,
|
|
19
|
-
state = _ref.state;
|
|
20
|
-
var theme = useTheme();
|
|
21
|
-
var isRTL = theme.direction === 'rtl';
|
|
22
|
-
var firstCharMap = React.useRef({});
|
|
23
|
-
var hasFirstCharMapBeenUpdatedImperatively = React.useRef(false);
|
|
24
|
-
var updateFirstCharMap = useEventCallback(function (callback) {
|
|
25
|
-
hasFirstCharMapBeenUpdatedImperatively.current = true;
|
|
26
|
-
firstCharMap.current = callback(firstCharMap.current);
|
|
27
|
-
});
|
|
28
|
-
React.useEffect(function () {
|
|
29
|
-
if (hasFirstCharMapBeenUpdatedImperatively.current) {
|
|
30
|
-
return;
|
|
31
|
-
}
|
|
32
|
-
var newFirstCharMap = {};
|
|
33
|
-
var processItem = function processItem(item) {
|
|
34
|
-
var _item$children;
|
|
35
|
-
var getItemId = params.getItemId;
|
|
36
|
-
var nodeId = getItemId ? getItemId(item) : item.id;
|
|
37
|
-
newFirstCharMap[nodeId] = instance.getNode(nodeId).label.substring(0, 1).toLowerCase();
|
|
38
|
-
(_item$children = item.children) == null || _item$children.forEach(processItem);
|
|
39
|
-
};
|
|
40
|
-
params.items.forEach(processItem);
|
|
41
|
-
firstCharMap.current = newFirstCharMap;
|
|
42
|
-
}, [params.items, params.getItemId, instance]);
|
|
43
|
-
populateInstance(instance, {
|
|
44
|
-
updateFirstCharMap: updateFirstCharMap
|
|
45
|
-
});
|
|
46
|
-
var getFirstMatchingNode = function getFirstMatchingNode(nodeId, firstChar) {
|
|
47
|
-
var start;
|
|
48
|
-
var index;
|
|
49
|
-
var lowercaseChar = firstChar.toLowerCase();
|
|
50
|
-
var firstCharIds = [];
|
|
51
|
-
var firstChars = [];
|
|
52
|
-
// This really only works since the ids are strings
|
|
53
|
-
Object.keys(firstCharMap.current).forEach(function (mapNodeId) {
|
|
54
|
-
var map = instance.getNode(mapNodeId);
|
|
55
|
-
var visible = map.parentId ? instance.isNodeExpanded(map.parentId) : true;
|
|
56
|
-
var shouldBeSkipped = params.disabledItemsFocusable ? false : instance.isNodeDisabled(mapNodeId);
|
|
57
|
-
if (visible && !shouldBeSkipped) {
|
|
58
|
-
firstCharIds.push(mapNodeId);
|
|
59
|
-
firstChars.push(firstCharMap.current[mapNodeId]);
|
|
60
|
-
}
|
|
61
|
-
});
|
|
62
|
-
|
|
63
|
-
// Get start index for search based on position of currentItem
|
|
64
|
-
start = firstCharIds.indexOf(nodeId) + 1;
|
|
65
|
-
if (start >= firstCharIds.length) {
|
|
66
|
-
start = 0;
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
// Check remaining slots in the menu
|
|
70
|
-
index = findNextFirstChar(firstChars, start, lowercaseChar);
|
|
71
|
-
|
|
72
|
-
// If not found in remaining slots, check from beginning
|
|
73
|
-
if (index === -1) {
|
|
74
|
-
index = findNextFirstChar(firstChars, 0, lowercaseChar);
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
// If a match was found...
|
|
78
|
-
if (index > -1) {
|
|
79
|
-
return firstCharIds[index];
|
|
80
|
-
}
|
|
81
|
-
return null;
|
|
82
|
-
};
|
|
83
|
-
var canToggleNodeSelection = function canToggleNodeSelection(nodeId) {
|
|
84
|
-
return !params.disableSelection && !instance.isNodeDisabled(nodeId);
|
|
85
|
-
};
|
|
86
|
-
var canToggleNodeExpansion = function canToggleNodeExpansion(nodeId) {
|
|
87
|
-
return !instance.isNodeDisabled(nodeId) && instance.isNodeExpandable(nodeId);
|
|
88
|
-
};
|
|
89
|
-
|
|
90
|
-
// ARIA specification: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/#keyboardinteraction
|
|
91
|
-
var createHandleKeyDown = function createHandleKeyDown(otherHandlers) {
|
|
92
|
-
return function (event) {
|
|
93
|
-
var _otherHandlers$onKeyD;
|
|
94
|
-
(_otherHandlers$onKeyD = otherHandlers.onKeyDown) == null || _otherHandlers$onKeyD.call(otherHandlers, event);
|
|
95
|
-
if (event.defaultMuiPrevented) {
|
|
96
|
-
return;
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
// If the tree is empty there will be no focused node
|
|
100
|
-
if (event.altKey || event.currentTarget !== event.target || state.focusedNodeId == null) {
|
|
101
|
-
return;
|
|
102
|
-
}
|
|
103
|
-
var ctrlPressed = event.ctrlKey || event.metaKey;
|
|
104
|
-
var key = event.key;
|
|
105
|
-
|
|
106
|
-
// eslint-disable-next-line default-case
|
|
107
|
-
switch (true) {
|
|
108
|
-
// Select the node when pressing "Space"
|
|
109
|
-
case key === ' ' && canToggleNodeSelection(state.focusedNodeId):
|
|
110
|
-
{
|
|
111
|
-
event.preventDefault();
|
|
112
|
-
if (params.multiSelect && event.shiftKey) {
|
|
113
|
-
instance.selectRange(event, {
|
|
114
|
-
end: state.focusedNodeId
|
|
115
|
-
});
|
|
116
|
-
} else if (params.multiSelect) {
|
|
117
|
-
instance.selectNode(event, state.focusedNodeId, true);
|
|
118
|
-
} else {
|
|
119
|
-
instance.selectNode(event, state.focusedNodeId);
|
|
120
|
-
}
|
|
121
|
-
break;
|
|
122
|
-
}
|
|
123
|
-
|
|
124
|
-
// If the focused node has children, we expand it.
|
|
125
|
-
// If the focused node has no children, we select it.
|
|
126
|
-
case key === 'Enter':
|
|
127
|
-
{
|
|
128
|
-
if (canToggleNodeExpansion(state.focusedNodeId)) {
|
|
129
|
-
instance.toggleNodeExpansion(event, state.focusedNodeId);
|
|
130
|
-
event.preventDefault();
|
|
131
|
-
} else if (canToggleNodeSelection(state.focusedNodeId)) {
|
|
132
|
-
if (params.multiSelect) {
|
|
133
|
-
event.preventDefault();
|
|
134
|
-
instance.selectNode(event, state.focusedNodeId, true);
|
|
135
|
-
} else if (!instance.isNodeSelected(state.focusedNodeId)) {
|
|
136
|
-
instance.selectNode(event, state.focusedNodeId);
|
|
137
|
-
event.preventDefault();
|
|
138
|
-
}
|
|
139
|
-
}
|
|
140
|
-
break;
|
|
141
|
-
}
|
|
142
|
-
|
|
143
|
-
// Focus the next focusable node
|
|
144
|
-
case key === 'ArrowDown':
|
|
145
|
-
{
|
|
146
|
-
var nextNode = getNextNode(instance, state.focusedNodeId);
|
|
147
|
-
if (nextNode) {
|
|
148
|
-
event.preventDefault();
|
|
149
|
-
instance.focusNode(event, nextNode);
|
|
150
|
-
|
|
151
|
-
// Multi select behavior when pressing Shift + ArrowDown
|
|
152
|
-
// Toggles the selection state of the next node
|
|
153
|
-
if (params.multiSelect && event.shiftKey && canToggleNodeSelection(nextNode)) {
|
|
154
|
-
instance.selectRange(event, {
|
|
155
|
-
end: nextNode,
|
|
156
|
-
current: state.focusedNodeId
|
|
157
|
-
}, true);
|
|
158
|
-
}
|
|
159
|
-
}
|
|
160
|
-
break;
|
|
161
|
-
}
|
|
162
|
-
|
|
163
|
-
// Focuses the previous focusable node
|
|
164
|
-
case key === 'ArrowUp':
|
|
165
|
-
{
|
|
166
|
-
var previousNode = getPreviousNode(instance, state.focusedNodeId);
|
|
167
|
-
if (previousNode) {
|
|
168
|
-
event.preventDefault();
|
|
169
|
-
instance.focusNode(event, previousNode);
|
|
170
|
-
|
|
171
|
-
// Multi select behavior when pressing Shift + ArrowUp
|
|
172
|
-
// Toggles the selection state of the previous node
|
|
173
|
-
if (params.multiSelect && event.shiftKey && canToggleNodeSelection(previousNode)) {
|
|
174
|
-
instance.selectRange(event, {
|
|
175
|
-
end: previousNode,
|
|
176
|
-
current: state.focusedNodeId
|
|
177
|
-
}, true);
|
|
178
|
-
}
|
|
179
|
-
}
|
|
180
|
-
break;
|
|
181
|
-
}
|
|
182
|
-
|
|
183
|
-
// If the focused node is expanded, we move the focus to its first child
|
|
184
|
-
// If the focused node is collapsed and has children, we expand it
|
|
185
|
-
case key === 'ArrowRight' && !isRTL || key === 'ArrowLeft' && isRTL:
|
|
186
|
-
{
|
|
187
|
-
if (instance.isNodeExpanded(state.focusedNodeId)) {
|
|
188
|
-
instance.focusNode(event, getNextNode(instance, state.focusedNodeId));
|
|
189
|
-
event.preventDefault();
|
|
190
|
-
} else if (canToggleNodeExpansion(state.focusedNodeId)) {
|
|
191
|
-
instance.toggleNodeExpansion(event, state.focusedNodeId);
|
|
192
|
-
event.preventDefault();
|
|
193
|
-
}
|
|
194
|
-
break;
|
|
195
|
-
}
|
|
196
|
-
|
|
197
|
-
// If the focused node is expanded, we collapse it
|
|
198
|
-
// If the focused node is collapsed and has a parent, we move the focus to this parent
|
|
199
|
-
case key === 'ArrowLeft' && !isRTL || key === 'ArrowRight' && isRTL:
|
|
200
|
-
{
|
|
201
|
-
if (canToggleNodeExpansion(state.focusedNodeId) && instance.isNodeExpanded(state.focusedNodeId)) {
|
|
202
|
-
instance.toggleNodeExpansion(event, state.focusedNodeId);
|
|
203
|
-
event.preventDefault();
|
|
204
|
-
} else {
|
|
205
|
-
var parent = instance.getNode(state.focusedNodeId).parentId;
|
|
206
|
-
if (parent) {
|
|
207
|
-
instance.focusNode(event, parent);
|
|
208
|
-
event.preventDefault();
|
|
209
|
-
}
|
|
210
|
-
}
|
|
211
|
-
break;
|
|
212
|
-
}
|
|
213
|
-
|
|
214
|
-
// Focuses the first node in the tree
|
|
215
|
-
case key === 'Home':
|
|
216
|
-
{
|
|
217
|
-
instance.focusNode(event, getFirstNode(instance));
|
|
218
|
-
|
|
219
|
-
// Multi select behavior when pressing Ctrl + Shift + Home
|
|
220
|
-
// Selects the focused node and all nodes up to the first node.
|
|
221
|
-
if (canToggleNodeSelection(state.focusedNodeId) && params.multiSelect && ctrlPressed && event.shiftKey) {
|
|
222
|
-
instance.rangeSelectToFirst(event, state.focusedNodeId);
|
|
223
|
-
}
|
|
224
|
-
event.preventDefault();
|
|
225
|
-
break;
|
|
226
|
-
}
|
|
227
|
-
|
|
228
|
-
// Focuses the last node in the tree
|
|
229
|
-
case key === 'End':
|
|
230
|
-
{
|
|
231
|
-
instance.focusNode(event, getLastNode(instance));
|
|
232
|
-
|
|
233
|
-
// Multi select behavior when pressing Ctrl + Shirt + End
|
|
234
|
-
// Selects the focused node and all the nodes down to the last node.
|
|
235
|
-
if (canToggleNodeSelection(state.focusedNodeId) && params.multiSelect && ctrlPressed && event.shiftKey) {
|
|
236
|
-
instance.rangeSelectToLast(event, state.focusedNodeId);
|
|
237
|
-
}
|
|
238
|
-
event.preventDefault();
|
|
239
|
-
break;
|
|
240
|
-
}
|
|
241
|
-
|
|
242
|
-
// Expand all siblings that are at the same level as the focused node
|
|
243
|
-
case key === '*':
|
|
244
|
-
{
|
|
245
|
-
instance.expandAllSiblings(event, state.focusedNodeId);
|
|
246
|
-
event.preventDefault();
|
|
247
|
-
break;
|
|
248
|
-
}
|
|
249
|
-
|
|
250
|
-
// Multi select behavior when pressing Ctrl + a
|
|
251
|
-
// Selects all the nodes
|
|
252
|
-
case key === 'a' && ctrlPressed && params.multiSelect && !params.disableSelection:
|
|
253
|
-
{
|
|
254
|
-
instance.selectRange(event, {
|
|
255
|
-
start: getFirstNode(instance),
|
|
256
|
-
end: getLastNode(instance)
|
|
257
|
-
});
|
|
258
|
-
event.preventDefault();
|
|
259
|
-
break;
|
|
260
|
-
}
|
|
261
|
-
|
|
262
|
-
// Type-ahead
|
|
263
|
-
// TODO: Support typing multiple characters
|
|
264
|
-
case !ctrlPressed && !event.shiftKey && isPrintableCharacter(key):
|
|
265
|
-
{
|
|
266
|
-
var matchingNode = getFirstMatchingNode(state.focusedNodeId, key);
|
|
267
|
-
if (matchingNode != null) {
|
|
268
|
-
instance.focusNode(event, matchingNode);
|
|
269
|
-
event.preventDefault();
|
|
270
|
-
}
|
|
271
|
-
break;
|
|
272
|
-
}
|
|
273
|
-
}
|
|
274
|
-
};
|
|
275
|
-
};
|
|
276
|
-
return {
|
|
277
|
-
getRootProps: function getRootProps(otherHandlers) {
|
|
278
|
-
return {
|
|
279
|
-
onKeyDown: createHandleKeyDown(otherHandlers)
|
|
280
|
-
};
|
|
281
|
-
}
|
|
282
|
-
};
|
|
283
|
-
};
|
|
284
|
-
useTreeViewKeyboardNavigation.params = {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { useTreeViewNodes } from './useTreeViewNodes';
|
|
@@ -1,161 +0,0 @@
|
|
|
1
|
-
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
|
-
import * as React from 'react';
|
|
3
|
-
import useEventCallback from '@mui/utils/useEventCallback';
|
|
4
|
-
import { populateInstance } from '../../useTreeView/useTreeView.utils';
|
|
5
|
-
import { publishTreeViewEvent } from '../../utils/publishTreeViewEvent';
|
|
6
|
-
var updateState = function updateState(_ref) {
|
|
7
|
-
var items = _ref.items,
|
|
8
|
-
isItemDisabled = _ref.isItemDisabled,
|
|
9
|
-
getItemLabel = _ref.getItemLabel,
|
|
10
|
-
getItemId = _ref.getItemId;
|
|
11
|
-
var nodeMap = {};
|
|
12
|
-
var processItem = function processItem(item, index, parentId) {
|
|
13
|
-
var _item$children, _item$children2;
|
|
14
|
-
var id = getItemId ? getItemId(item) : item.id;
|
|
15
|
-
if (id == null) {
|
|
16
|
-
throw new Error(['MUI X: The Tree View component requires all items to have a unique `id` property.', 'Alternatively, you can use the `getItemId` prop to specify a custom id for each item.', 'An item was provided without id in the `items` prop:', JSON.stringify(item)].join('\n'));
|
|
17
|
-
}
|
|
18
|
-
if (nodeMap[id] != null) {
|
|
19
|
-
throw new Error(['MUI X: The Tree View component requires all items to have a unique `id` property.', 'Alternatively, you can use the `getItemId` prop to specify a custom id for each item.', "Tow items were provided with the same id in the `items` prop: \"".concat(id, "\"")].join('\n'));
|
|
20
|
-
}
|
|
21
|
-
var label = getItemLabel ? getItemLabel(item) : item.label;
|
|
22
|
-
if (label == null) {
|
|
23
|
-
throw new Error(['MUI X: The Tree View component requires all items to have a `label` property.', 'Alternatively, you can use the `getItemLabel` prop to specify a custom label for each item.', 'An item was provided without label in the `items` prop:', JSON.stringify(item)].join('\n'));
|
|
24
|
-
}
|
|
25
|
-
nodeMap[id] = {
|
|
26
|
-
id: id,
|
|
27
|
-
label: label,
|
|
28
|
-
index: index,
|
|
29
|
-
parentId: parentId,
|
|
30
|
-
idAttribute: id,
|
|
31
|
-
expandable: !!((_item$children = item.children) != null && _item$children.length),
|
|
32
|
-
disabled: isItemDisabled ? isItemDisabled(item) : false
|
|
33
|
-
};
|
|
34
|
-
return {
|
|
35
|
-
id: id,
|
|
36
|
-
children: (_item$children2 = item.children) == null ? void 0 : _item$children2.map(function (child, childIndex) {
|
|
37
|
-
return processItem(child, childIndex, id);
|
|
38
|
-
})
|
|
39
|
-
};
|
|
40
|
-
};
|
|
41
|
-
var nodeTree = items.map(function (item, itemIndex) {
|
|
42
|
-
return processItem(item, itemIndex, null);
|
|
43
|
-
});
|
|
44
|
-
return {
|
|
45
|
-
nodeMap: nodeMap,
|
|
46
|
-
nodeTree: nodeTree
|
|
47
|
-
};
|
|
48
|
-
};
|
|
49
|
-
export var useTreeViewNodes = function useTreeViewNodes(_ref2) {
|
|
50
|
-
var instance = _ref2.instance,
|
|
51
|
-
params = _ref2.params,
|
|
52
|
-
state = _ref2.state,
|
|
53
|
-
setState = _ref2.setState;
|
|
54
|
-
var getNode = React.useCallback(function (nodeId) {
|
|
55
|
-
return state.nodeMap[nodeId];
|
|
56
|
-
}, [state.nodeMap]);
|
|
57
|
-
var isNodeDisabled = React.useCallback(function (nodeId) {
|
|
58
|
-
if (nodeId == null) {
|
|
59
|
-
return false;
|
|
60
|
-
}
|
|
61
|
-
var node = instance.getNode(nodeId);
|
|
62
|
-
|
|
63
|
-
// This can be called before the node has been added to the node map.
|
|
64
|
-
if (!node) {
|
|
65
|
-
return false;
|
|
66
|
-
}
|
|
67
|
-
if (node.disabled) {
|
|
68
|
-
return true;
|
|
69
|
-
}
|
|
70
|
-
while (node.parentId != null) {
|
|
71
|
-
node = instance.getNode(node.parentId);
|
|
72
|
-
if (node.disabled) {
|
|
73
|
-
return true;
|
|
74
|
-
}
|
|
75
|
-
}
|
|
76
|
-
return false;
|
|
77
|
-
}, [instance]);
|
|
78
|
-
var getChildrenIds = useEventCallback(function (nodeId) {
|
|
79
|
-
return Object.values(state.nodeMap).filter(function (node) {
|
|
80
|
-
return node.parentId === nodeId;
|
|
81
|
-
}).sort(function (a, b) {
|
|
82
|
-
return a.index - b.index;
|
|
83
|
-
}).map(function (child) {
|
|
84
|
-
return child.id;
|
|
85
|
-
});
|
|
86
|
-
});
|
|
87
|
-
var getNavigableChildrenIds = function getNavigableChildrenIds(nodeId) {
|
|
88
|
-
var childrenIds = instance.getChildrenIds(nodeId);
|
|
89
|
-
if (!params.disabledItemsFocusable) {
|
|
90
|
-
childrenIds = childrenIds.filter(function (node) {
|
|
91
|
-
return !instance.isNodeDisabled(node);
|
|
92
|
-
});
|
|
93
|
-
}
|
|
94
|
-
return childrenIds;
|
|
95
|
-
};
|
|
96
|
-
React.useEffect(function () {
|
|
97
|
-
setState(function (prevState) {
|
|
98
|
-
var newState = updateState({
|
|
99
|
-
items: params.items,
|
|
100
|
-
isItemDisabled: params.isItemDisabled,
|
|
101
|
-
getItemId: params.getItemId,
|
|
102
|
-
getItemLabel: params.getItemLabel
|
|
103
|
-
});
|
|
104
|
-
Object.values(prevState.nodeMap).forEach(function (node) {
|
|
105
|
-
if (!newState.nodeMap[node.id]) {
|
|
106
|
-
publishTreeViewEvent(instance, 'removeNode', {
|
|
107
|
-
id: node.id
|
|
108
|
-
});
|
|
109
|
-
}
|
|
110
|
-
});
|
|
111
|
-
return _extends({}, prevState, newState);
|
|
112
|
-
});
|
|
113
|
-
}, [instance, setState, params.items, params.isItemDisabled, params.getItemId, params.getItemLabel]);
|
|
114
|
-
var getNodesToRender = useEventCallback(function () {
|
|
115
|
-
var getPropsFromNodeId = function getPropsFromNodeId(_ref3) {
|
|
116
|
-
var id = _ref3.id,
|
|
117
|
-
children = _ref3.children;
|
|
118
|
-
var node = state.nodeMap[id];
|
|
119
|
-
return {
|
|
120
|
-
label: node.label,
|
|
121
|
-
nodeId: node.id,
|
|
122
|
-
id: node.idAttribute,
|
|
123
|
-
children: children == null ? void 0 : children.map(getPropsFromNodeId)
|
|
124
|
-
};
|
|
125
|
-
};
|
|
126
|
-
return state.nodeTree.map(getPropsFromNodeId);
|
|
127
|
-
});
|
|
128
|
-
populateInstance(instance, {
|
|
129
|
-
getNode: getNode,
|
|
130
|
-
getNodesToRender: getNodesToRender,
|
|
131
|
-
getChildrenIds: getChildrenIds,
|
|
132
|
-
getNavigableChildrenIds: getNavigableChildrenIds,
|
|
133
|
-
isNodeDisabled: isNodeDisabled
|
|
134
|
-
});
|
|
135
|
-
return {
|
|
136
|
-
contextValue: {
|
|
137
|
-
disabledItemsFocusable: params.disabledItemsFocusable
|
|
138
|
-
}
|
|
139
|
-
};
|
|
140
|
-
};
|
|
141
|
-
useTreeViewNodes.getInitialState = function (params) {
|
|
142
|
-
return updateState({
|
|
143
|
-
items: params.items,
|
|
144
|
-
isItemDisabled: params.isItemDisabled,
|
|
145
|
-
getItemId: params.getItemId,
|
|
146
|
-
getItemLabel: params.getItemLabel
|
|
147
|
-
});
|
|
148
|
-
};
|
|
149
|
-
useTreeViewNodes.getDefaultizedParams = function (params) {
|
|
150
|
-
var _params$disabledItems;
|
|
151
|
-
return _extends({}, params, {
|
|
152
|
-
disabledItemsFocusable: (_params$disabledItems = params.disabledItemsFocusable) != null ? _params$disabledItems : false
|
|
153
|
-
});
|
|
154
|
-
};
|
|
155
|
-
useTreeViewNodes.params = {
|
|
156
|
-
disabledItemsFocusable: true,
|
|
157
|
-
items: true,
|
|
158
|
-
isItemDisabled: true,
|
|
159
|
-
getItemLabel: true,
|
|
160
|
-
getItemId: true
|
|
161
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { useTreeViewSelection } from './useTreeViewSelection';
|
|
@@ -1,219 +0,0 @@
|
|
|
1
|
-
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
|
-
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
|
3
|
-
import * as React from 'react';
|
|
4
|
-
import { populateInstance, getNextNode, getFirstNode, getLastNode } from '../../useTreeView/useTreeView.utils';
|
|
5
|
-
import { findOrderInTremauxTree } from './useTreeViewSelection.utils';
|
|
6
|
-
export var useTreeViewSelection = function useTreeViewSelection(_ref) {
|
|
7
|
-
var instance = _ref.instance,
|
|
8
|
-
params = _ref.params,
|
|
9
|
-
models = _ref.models;
|
|
10
|
-
var lastSelectedNode = React.useRef(null);
|
|
11
|
-
var lastSelectionWasRange = React.useRef(false);
|
|
12
|
-
var currentRangeSelection = React.useRef([]);
|
|
13
|
-
var setSelectedNodes = function setSelectedNodes(event, newSelectedNodes) {
|
|
14
|
-
if (params.onNodeSelectionToggle) {
|
|
15
|
-
if (params.multiSelect) {
|
|
16
|
-
var addedNodes = newSelectedNodes.filter(function (nodeId) {
|
|
17
|
-
return !instance.isNodeSelected(nodeId);
|
|
18
|
-
});
|
|
19
|
-
var removedNodes = models.selectedNodes.value.filter(function (nodeId) {
|
|
20
|
-
return !newSelectedNodes.includes(nodeId);
|
|
21
|
-
});
|
|
22
|
-
addedNodes.forEach(function (nodeId) {
|
|
23
|
-
params.onNodeSelectionToggle(event, nodeId, true);
|
|
24
|
-
});
|
|
25
|
-
removedNodes.forEach(function (nodeId) {
|
|
26
|
-
params.onNodeSelectionToggle(event, nodeId, false);
|
|
27
|
-
});
|
|
28
|
-
} else if (newSelectedNodes !== models.selectedNodes.value) {
|
|
29
|
-
if (models.selectedNodes.value != null) {
|
|
30
|
-
params.onNodeSelectionToggle(event, models.selectedNodes.value, false);
|
|
31
|
-
}
|
|
32
|
-
if (newSelectedNodes != null) {
|
|
33
|
-
params.onNodeSelectionToggle(event, newSelectedNodes, true);
|
|
34
|
-
}
|
|
35
|
-
}
|
|
36
|
-
}
|
|
37
|
-
if (params.onSelectedNodesChange) {
|
|
38
|
-
params.onSelectedNodesChange(event, newSelectedNodes);
|
|
39
|
-
}
|
|
40
|
-
models.selectedNodes.setControlledValue(newSelectedNodes);
|
|
41
|
-
};
|
|
42
|
-
var isNodeSelected = function isNodeSelected(nodeId) {
|
|
43
|
-
return Array.isArray(models.selectedNodes.value) ? models.selectedNodes.value.indexOf(nodeId) !== -1 : models.selectedNodes.value === nodeId;
|
|
44
|
-
};
|
|
45
|
-
var selectNode = function selectNode(event, nodeId) {
|
|
46
|
-
var multiple = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
|
|
47
|
-
if (params.disableSelection) {
|
|
48
|
-
return;
|
|
49
|
-
}
|
|
50
|
-
if (multiple) {
|
|
51
|
-
if (Array.isArray(models.selectedNodes.value)) {
|
|
52
|
-
var newSelected;
|
|
53
|
-
if (models.selectedNodes.value.indexOf(nodeId) !== -1) {
|
|
54
|
-
newSelected = models.selectedNodes.value.filter(function (id) {
|
|
55
|
-
return id !== nodeId;
|
|
56
|
-
});
|
|
57
|
-
} else {
|
|
58
|
-
newSelected = [nodeId].concat(models.selectedNodes.value);
|
|
59
|
-
}
|
|
60
|
-
setSelectedNodes(event, newSelected);
|
|
61
|
-
}
|
|
62
|
-
} else {
|
|
63
|
-
var _newSelected = params.multiSelect ? [nodeId] : nodeId;
|
|
64
|
-
setSelectedNodes(event, _newSelected);
|
|
65
|
-
}
|
|
66
|
-
lastSelectedNode.current = nodeId;
|
|
67
|
-
lastSelectionWasRange.current = false;
|
|
68
|
-
currentRangeSelection.current = [];
|
|
69
|
-
};
|
|
70
|
-
var getNodesInRange = function getNodesInRange(nodeAId, nodeBId) {
|
|
71
|
-
var _findOrderInTremauxTr = findOrderInTremauxTree(instance, nodeAId, nodeBId),
|
|
72
|
-
_findOrderInTremauxTr2 = _slicedToArray(_findOrderInTremauxTr, 2),
|
|
73
|
-
first = _findOrderInTremauxTr2[0],
|
|
74
|
-
last = _findOrderInTremauxTr2[1];
|
|
75
|
-
var nodes = [first];
|
|
76
|
-
var current = first;
|
|
77
|
-
while (current !== last) {
|
|
78
|
-
current = getNextNode(instance, current);
|
|
79
|
-
nodes.push(current);
|
|
80
|
-
}
|
|
81
|
-
return nodes;
|
|
82
|
-
};
|
|
83
|
-
var handleRangeArrowSelect = function handleRangeArrowSelect(event, nodes) {
|
|
84
|
-
var base = models.selectedNodes.value.slice();
|
|
85
|
-
var start = nodes.start,
|
|
86
|
-
next = nodes.next,
|
|
87
|
-
current = nodes.current;
|
|
88
|
-
if (!next || !current) {
|
|
89
|
-
return;
|
|
90
|
-
}
|
|
91
|
-
if (currentRangeSelection.current.indexOf(current) === -1) {
|
|
92
|
-
currentRangeSelection.current = [];
|
|
93
|
-
}
|
|
94
|
-
if (lastSelectionWasRange.current) {
|
|
95
|
-
if (currentRangeSelection.current.indexOf(next) !== -1) {
|
|
96
|
-
base = base.filter(function (id) {
|
|
97
|
-
return id === start || id !== current;
|
|
98
|
-
});
|
|
99
|
-
currentRangeSelection.current = currentRangeSelection.current.filter(function (id) {
|
|
100
|
-
return id === start || id !== current;
|
|
101
|
-
});
|
|
102
|
-
} else {
|
|
103
|
-
base.push(next);
|
|
104
|
-
currentRangeSelection.current.push(next);
|
|
105
|
-
}
|
|
106
|
-
} else {
|
|
107
|
-
base.push(next);
|
|
108
|
-
currentRangeSelection.current.push(current, next);
|
|
109
|
-
}
|
|
110
|
-
setSelectedNodes(event, base);
|
|
111
|
-
};
|
|
112
|
-
var handleRangeSelect = function handleRangeSelect(event, nodes) {
|
|
113
|
-
var base = models.selectedNodes.value.slice();
|
|
114
|
-
var start = nodes.start,
|
|
115
|
-
end = nodes.end;
|
|
116
|
-
// If last selection was a range selection ignore nodes that were selected.
|
|
117
|
-
if (lastSelectionWasRange.current) {
|
|
118
|
-
base = base.filter(function (id) {
|
|
119
|
-
return currentRangeSelection.current.indexOf(id) === -1;
|
|
120
|
-
});
|
|
121
|
-
}
|
|
122
|
-
var range = getNodesInRange(start, end);
|
|
123
|
-
range = range.filter(function (node) {
|
|
124
|
-
return !instance.isNodeDisabled(node);
|
|
125
|
-
});
|
|
126
|
-
currentRangeSelection.current = range;
|
|
127
|
-
var newSelected = base.concat(range);
|
|
128
|
-
newSelected = newSelected.filter(function (id, i) {
|
|
129
|
-
return newSelected.indexOf(id) === i;
|
|
130
|
-
});
|
|
131
|
-
setSelectedNodes(event, newSelected);
|
|
132
|
-
};
|
|
133
|
-
var selectRange = function selectRange(event, nodes) {
|
|
134
|
-
var stacked = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
|
|
135
|
-
if (params.disableSelection) {
|
|
136
|
-
return;
|
|
137
|
-
}
|
|
138
|
-
var _nodes$start = nodes.start,
|
|
139
|
-
start = _nodes$start === void 0 ? lastSelectedNode.current : _nodes$start,
|
|
140
|
-
end = nodes.end,
|
|
141
|
-
current = nodes.current;
|
|
142
|
-
if (stacked) {
|
|
143
|
-
handleRangeArrowSelect(event, {
|
|
144
|
-
start: start,
|
|
145
|
-
next: end,
|
|
146
|
-
current: current
|
|
147
|
-
});
|
|
148
|
-
} else if (start != null && end != null) {
|
|
149
|
-
handleRangeSelect(event, {
|
|
150
|
-
start: start,
|
|
151
|
-
end: end
|
|
152
|
-
});
|
|
153
|
-
}
|
|
154
|
-
lastSelectionWasRange.current = true;
|
|
155
|
-
};
|
|
156
|
-
var rangeSelectToFirst = function rangeSelectToFirst(event, nodeId) {
|
|
157
|
-
if (!lastSelectedNode.current) {
|
|
158
|
-
lastSelectedNode.current = nodeId;
|
|
159
|
-
}
|
|
160
|
-
var start = lastSelectionWasRange.current ? lastSelectedNode.current : nodeId;
|
|
161
|
-
instance.selectRange(event, {
|
|
162
|
-
start: start,
|
|
163
|
-
end: getFirstNode(instance)
|
|
164
|
-
});
|
|
165
|
-
};
|
|
166
|
-
var rangeSelectToLast = function rangeSelectToLast(event, nodeId) {
|
|
167
|
-
if (!lastSelectedNode.current) {
|
|
168
|
-
lastSelectedNode.current = nodeId;
|
|
169
|
-
}
|
|
170
|
-
var start = lastSelectionWasRange.current ? lastSelectedNode.current : nodeId;
|
|
171
|
-
instance.selectRange(event, {
|
|
172
|
-
start: start,
|
|
173
|
-
end: getLastNode(instance)
|
|
174
|
-
});
|
|
175
|
-
};
|
|
176
|
-
populateInstance(instance, {
|
|
177
|
-
isNodeSelected: isNodeSelected,
|
|
178
|
-
selectNode: selectNode,
|
|
179
|
-
selectRange: selectRange,
|
|
180
|
-
rangeSelectToLast: rangeSelectToLast,
|
|
181
|
-
rangeSelectToFirst: rangeSelectToFirst
|
|
182
|
-
});
|
|
183
|
-
return {
|
|
184
|
-
getRootProps: function getRootProps() {
|
|
185
|
-
return {
|
|
186
|
-
'aria-multiselectable': params.multiSelect
|
|
187
|
-
};
|
|
188
|
-
},
|
|
189
|
-
contextValue: {
|
|
190
|
-
selection: {
|
|
191
|
-
multiSelect: params.multiSelect
|
|
192
|
-
}
|
|
193
|
-
}
|
|
194
|
-
};
|
|
195
|
-
};
|
|
196
|
-
useTreeViewSelection.models = {
|
|
197
|
-
selectedNodes: {
|
|
198
|
-
getDefaultValue: function getDefaultValue(params) {
|
|
199
|
-
return params.defaultSelectedNodes;
|
|
200
|
-
}
|
|
201
|
-
}
|
|
202
|
-
};
|
|
203
|
-
var DEFAULT_SELECTED_NODES = [];
|
|
204
|
-
useTreeViewSelection.getDefaultizedParams = function (params) {
|
|
205
|
-
var _params$disableSelect, _params$multiSelect, _params$defaultSelect;
|
|
206
|
-
return _extends({}, params, {
|
|
207
|
-
disableSelection: (_params$disableSelect = params.disableSelection) != null ? _params$disableSelect : false,
|
|
208
|
-
multiSelect: (_params$multiSelect = params.multiSelect) != null ? _params$multiSelect : false,
|
|
209
|
-
defaultSelectedNodes: (_params$defaultSelect = params.defaultSelectedNodes) != null ? _params$defaultSelect : params.multiSelect ? DEFAULT_SELECTED_NODES : null
|
|
210
|
-
});
|
|
211
|
-
};
|
|
212
|
-
useTreeViewSelection.params = {
|
|
213
|
-
disableSelection: true,
|
|
214
|
-
multiSelect: true,
|
|
215
|
-
defaultSelectedNodes: true,
|
|
216
|
-
selectedNodes: true,
|
|
217
|
-
onSelectedNodesChange: true,
|
|
218
|
-
onNodeSelectionToggle: true
|
|
219
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|