@elliemae/ds-treeview 2.1.0 → 2.2.0-alpha.3
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/cjs/TreeView.js +49 -31
- package/cjs/TreeView.js.map +7 -0
- package/cjs/TreeViewContext.js +53 -35
- package/cjs/TreeViewContext.js.map +7 -0
- package/cjs/config/cssClassesConstants.js +41 -13
- package/cjs/config/cssClassesConstants.js.map +7 -0
- package/cjs/config/useTreeview.js +108 -80
- package/cjs/config/useTreeview.js.map +7 -0
- package/cjs/index.js +37 -27
- package/cjs/index.js.map +7 -0
- package/cjs/parts/CheckboxSelectable.js +70 -59
- package/cjs/parts/CheckboxSelectable.js.map +7 -0
- package/cjs/parts/ChildrenCountDisplayer.js +45 -28
- package/cjs/parts/ChildrenCountDisplayer.js.map +7 -0
- package/cjs/parts/ExpandCaret.js +85 -83
- package/cjs/parts/ExpandCaret.js.map +7 -0
- package/cjs/parts/Icon.js +46 -31
- package/cjs/parts/Icon.js.map +7 -0
- package/cjs/parts/NestingSpace.js +43 -35
- package/cjs/parts/NestingSpace.js.map +7 -0
- package/cjs/parts/RadioSelectable.js +52 -37
- package/cjs/parts/RadioSelectable.js.map +7 -0
- package/cjs/parts/TreeItem.js +128 -147
- package/cjs/parts/TreeItem.js.map +7 -0
- package/cjs/parts/TreeItemText.js +88 -95
- package/cjs/parts/TreeItemText.js.map +7 -0
- package/cjs/parts/TreeList.js +117 -130
- package/cjs/parts/TreeList.js.map +7 -0
- package/cjs/plugins/dnd/TreeDndPlugin.js +51 -36
- package/cjs/plugins/dnd/TreeDndPlugin.js.map +7 -0
- package/cjs/plugins/dnd/index.js +28 -10
- package/cjs/plugins/dnd/index.js.map +7 -0
- package/cjs/plugins/index.js +34 -22
- package/cjs/plugins/index.js.map +7 -0
- package/cjs/plugins/roving/TreeRovingPlugin.js +35 -7
- package/cjs/plugins/roving/TreeRovingPlugin.js.map +7 -0
- package/cjs/plugins/roving/index.js +28 -9
- package/cjs/plugins/roving/index.js.map +7 -0
- package/cjs/plugins/searchable/SearchableTreePlugin.js +35 -7
- package/cjs/plugins/searchable/SearchableTreePlugin.js.map +7 -0
- package/cjs/plugins/searchable/index.js +28 -9
- package/cjs/plugins/searchable/index.js.map +7 -0
- package/cjs/plugins/selectable/SelectablePluginTree.js +35 -7
- package/cjs/plugins/selectable/SelectablePluginTree.js.map +7 -0
- package/cjs/plugins/selectable/index.js +28 -9
- package/cjs/plugins/selectable/index.js.map +7 -0
- package/cjs/plugins/toolbar/TreeToolbarPlugin.js +35 -7
- package/cjs/plugins/toolbar/TreeToolbarPlugin.js.map +7 -0
- package/cjs/plugins/toolbar/index.js +28 -9
- package/cjs/plugins/toolbar/index.js.map +7 -0
- package/cjs/plugins/tree/TreeDataPlugin.js +35 -7
- package/cjs/plugins/tree/TreeDataPlugin.js.map +7 -0
- package/cjs/plugins/tree/index.js +28 -9
- package/cjs/plugins/tree/index.js.map +7 -0
- package/cjs/plugins/virtualization/TreeVirtualizationPlugin.js +35 -7
- package/cjs/plugins/virtualization/TreeVirtualizationPlugin.js.map +7 -0
- package/cjs/plugins/virtualization/index.js +28 -9
- package/cjs/plugins/virtualization/index.js.map +7 -0
- package/cjs/react-desc-prop-types.js +82 -53
- package/cjs/react-desc-prop-types.js.map +7 -0
- package/cjs/related-components/TreeViewSearchBar.js +42 -40
- package/cjs/related-components/TreeViewSearchBar.js.map +7 -0
- package/cjs/sharedTypes.js +27 -2
- package/cjs/sharedTypes.js.map +7 -0
- package/cjs/utils/array-helpers.js +35 -11
- package/cjs/utils/array-helpers.js.map +7 -0
- package/cjs/utils/dnd-helpers.js +90 -84
- package/cjs/utils/dnd-helpers.js.map +7 -0
- package/cjs/utils/group-expands-helpers.js +86 -59
- package/cjs/utils/group-expands-helpers.js.map +7 -0
- package/cjs/utils/keyboard-helpers.js +84 -88
- package/cjs/utils/keyboard-helpers.js.map +7 -0
- package/cjs/utils/object-helpers.js +43 -36
- package/cjs/utils/object-helpers.js.map +7 -0
- package/cjs/utils/refs-helpers.js +43 -22
- package/cjs/utils/refs-helpers.js.map +7 -0
- package/cjs/utils/selectable-helper.js +61 -53
- package/cjs/utils/selectable-helper.js.map +7 -0
- package/cjs/utils/string-helpers.js +35 -7
- package/cjs/utils/string-helpers.js.map +7 -0
- package/cjs/utils/tree-helpers.js +105 -135
- package/cjs/utils/tree-helpers.js.map +7 -0
- package/cjs/utils/useDnDHelpers.js +97 -118
- package/cjs/utils/useDnDHelpers.js.map +7 -0
- package/cjs/utils/useInstanceRefActions.js +54 -43
- package/cjs/utils/useInstanceRefActions.js.map +7 -0
- package/cjs/utils/useTree.js +76 -78
- package/cjs/utils/useTree.js.map +7 -0
- package/esm/TreeView.js +18 -20
- package/esm/TreeView.js.map +7 -0
- package/esm/TreeViewContext.js +24 -29
- package/esm/TreeViewContext.js.map +7 -0
- package/esm/config/cssClassesConstants.js +12 -6
- package/esm/config/cssClassesConstants.js.map +7 -0
- package/esm/config/useTreeview.js +61 -54
- package/esm/config/useTreeview.js.map +7 -0
- package/esm/index.js +8 -9
- package/esm/index.js.map +7 -0
- package/esm/parts/CheckboxSelectable.js +36 -46
- package/esm/parts/CheckboxSelectable.js.map +7 -0
- package/esm/parts/ChildrenCountDisplayer.js +16 -20
- package/esm/parts/ChildrenCountDisplayer.js.map +7 -0
- package/esm/parts/ExpandCaret.js +54 -72
- package/esm/parts/ExpandCaret.js.map +7 -0
- package/esm/parts/Icon.js +16 -22
- package/esm/parts/Icon.js.map +7 -0
- package/esm/parts/NestingSpace.js +14 -27
- package/esm/parts/NestingSpace.js.map +7 -0
- package/esm/parts/RadioSelectable.js +20 -28
- package/esm/parts/RadioSelectable.js.map +7 -0
- package/esm/parts/TreeItem.js +91 -127
- package/esm/parts/TreeItem.js.map +7 -0
- package/esm/parts/TreeItemText.js +58 -85
- package/esm/parts/TreeItemText.js.map +7 -0
- package/esm/parts/TreeList.js +88 -117
- package/esm/parts/TreeList.js.map +7 -0
- package/esm/plugins/dnd/TreeDndPlugin.js +21 -26
- package/esm/plugins/dnd/TreeDndPlugin.js.map +7 -0
- package/esm/plugins/dnd/index.js +3 -1
- package/esm/plugins/dnd/index.js.map +7 -0
- package/esm/plugins/index.js +9 -7
- package/esm/plugins/index.js.map +7 -0
- package/esm/plugins/roving/TreeRovingPlugin.js +6 -3
- package/esm/plugins/roving/TreeRovingPlugin.js.map +7 -0
- package/esm/plugins/roving/index.js +3 -1
- package/esm/plugins/roving/index.js.map +7 -0
- package/esm/plugins/searchable/SearchableTreePlugin.js +6 -3
- package/esm/plugins/searchable/SearchableTreePlugin.js.map +7 -0
- package/esm/plugins/searchable/index.js +3 -1
- package/esm/plugins/searchable/index.js.map +7 -0
- package/esm/plugins/selectable/SelectablePluginTree.js +6 -3
- package/esm/plugins/selectable/SelectablePluginTree.js.map +7 -0
- package/esm/plugins/selectable/index.js +3 -1
- package/esm/plugins/selectable/index.js.map +7 -0
- package/esm/plugins/toolbar/TreeToolbarPlugin.js +6 -3
- package/esm/plugins/toolbar/TreeToolbarPlugin.js.map +7 -0
- package/esm/plugins/toolbar/index.js +3 -1
- package/esm/plugins/toolbar/index.js.map +7 -0
- package/esm/plugins/tree/TreeDataPlugin.js +6 -3
- package/esm/plugins/tree/TreeDataPlugin.js.map +7 -0
- package/esm/plugins/tree/index.js +3 -1
- package/esm/plugins/tree/index.js.map +7 -0
- package/esm/plugins/virtualization/TreeVirtualizationPlugin.js +6 -3
- package/esm/plugins/virtualization/TreeVirtualizationPlugin.js.map +7 -0
- package/esm/plugins/virtualization/index.js +3 -1
- package/esm/plugins/virtualization/index.js.map +7 -0
- package/esm/react-desc-prop-types.js +47 -43
- package/esm/react-desc-prop-types.js.map +7 -0
- package/esm/related-components/TreeViewSearchBar.js +13 -32
- package/esm/related-components/TreeViewSearchBar.js.map +7 -0
- package/esm/sharedTypes.js +2 -1
- package/esm/sharedTypes.js.map +7 -0
- package/esm/utils/array-helpers.js +6 -6
- package/esm/utils/array-helpers.js.map +7 -0
- package/esm/utils/dnd-helpers.js +58 -73
- package/esm/utils/dnd-helpers.js.map +7 -0
- package/esm/utils/group-expands-helpers.js +56 -46
- package/esm/utils/group-expands-helpers.js.map +7 -0
- package/esm/utils/keyboard-helpers.js +45 -72
- package/esm/utils/keyboard-helpers.js.map +7 -0
- package/esm/utils/object-helpers.js +14 -31
- package/esm/utils/object-helpers.js.map +7 -0
- package/esm/utils/refs-helpers.js +15 -19
- package/esm/utils/refs-helpers.js.map +7 -0
- package/esm/utils/selectable-helper.js +32 -43
- package/esm/utils/selectable-helper.js.map +7 -0
- package/esm/utils/string-helpers.js +6 -3
- package/esm/utils/string-helpers.js.map +7 -0
- package/esm/utils/tree-helpers.js +74 -119
- package/esm/utils/tree-helpers.js.map +7 -0
- package/esm/utils/useDnDHelpers.js +60 -106
- package/esm/utils/useDnDHelpers.js.map +7 -0
- package/esm/utils/useInstanceRefActions.js +21 -35
- package/esm/utils/useInstanceRefActions.js.map +7 -0
- package/esm/utils/useTree.js +35 -57
- package/esm/utils/useTree.js.map +7 -0
- package/package.json +10 -10
package/cjs/utils/useTree.js
CHANGED
|
@@ -1,97 +1,95 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
var
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
var
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
var
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __reExport = (target, module2, copyDefault, desc) => {
|
|
13
|
+
if (module2 && typeof module2 === "object" || typeof module2 === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(module2))
|
|
15
|
+
if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
|
|
16
|
+
__defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return target;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (module2, isNodeMode) => {
|
|
21
|
+
return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
|
|
22
|
+
};
|
|
23
|
+
var __toCommonJS = /* @__PURE__ */ ((cache) => {
|
|
24
|
+
return (module2, temp) => {
|
|
25
|
+
return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
|
|
26
|
+
};
|
|
27
|
+
})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
|
|
28
|
+
var useTree_exports = {};
|
|
29
|
+
__export(useTree_exports, {
|
|
30
|
+
useTree: () => useTree
|
|
31
|
+
});
|
|
32
|
+
var React = __toESM(require("react"));
|
|
33
|
+
var import_react = __toESM(require("react"));
|
|
34
|
+
var import_tree_model = __toESM(require("tree-model"));
|
|
35
|
+
var import_lodash = __toESM(require("lodash"));
|
|
36
|
+
var import_tree_helpers = __toESM(require("./tree-helpers"));
|
|
37
|
+
var import_group_expands_helpers = __toESM(require("./group-expands-helpers"));
|
|
26
38
|
const useTree = (data, props, states) => {
|
|
27
|
-
const {
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
const
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
const tree = React.useMemo(() => new TreeModel__default["default"](), []);
|
|
35
|
-
const [treeData, setTreeData] = React.useState({
|
|
36
|
-
id: '__ds_tree_root',
|
|
37
|
-
name: '__root',
|
|
39
|
+
const { setExpandedGroups } = states;
|
|
40
|
+
const unfrozenData = (0, import_react.useMemo)(() => (0, import_lodash.cloneDeep)(data), [data]);
|
|
41
|
+
const tree = (0, import_react.useMemo)(() => new import_tree_model.default(), []);
|
|
42
|
+
const [treeData, setTreeData] = (0, import_react.useState)({
|
|
43
|
+
id: "__ds_tree_root",
|
|
44
|
+
name: "__root",
|
|
38
45
|
isExpanded: true,
|
|
39
46
|
children: unfrozenData
|
|
40
47
|
});
|
|
41
|
-
|
|
48
|
+
(0, import_react.useEffect)(() => {
|
|
42
49
|
setTreeData({
|
|
43
|
-
id:
|
|
44
|
-
name:
|
|
50
|
+
id: "__ds_tree_root",
|
|
51
|
+
name: "__root",
|
|
45
52
|
isExpanded: true,
|
|
46
53
|
children: unfrozenData
|
|
47
54
|
});
|
|
48
|
-
}, [unfrozenData]);
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
const [rerenderItems, setRerenderItems] = React.useState({});
|
|
52
|
-
const triggerTreeRerender = React.useCallback(() => {
|
|
55
|
+
}, [unfrozenData]);
|
|
56
|
+
const [rerenderItems, setRerenderItems] = (0, import_react.useState)({});
|
|
57
|
+
const triggerTreeRerender = (0, import_react.useCallback)(() => {
|
|
53
58
|
setRerenderItems({});
|
|
54
|
-
}, []);
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
React.useEffect(() => {
|
|
59
|
+
}, []);
|
|
60
|
+
const [treeRoot, setTreeRoot] = (0, import_react.useState)(tree.parse(treeData));
|
|
61
|
+
(0, import_react.useEffect)(() => {
|
|
58
62
|
setTreeRoot(tree.parse(treeData));
|
|
59
63
|
}, [treeData, rerenderItems, tree]);
|
|
60
|
-
const [visibleItems, setVisibleItems] =
|
|
61
|
-
const {
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
expanded,
|
|
67
|
-
onExpandChange
|
|
68
|
-
} = props;
|
|
69
|
-
const updateUserExpandedState = React.useCallback(() => {
|
|
70
|
-
groupExpandsHelpers.updateExpandedState(treeRoot, onExpandChange);
|
|
71
|
-
}, [treeRoot, onExpandChange]); // we add missing properties to the received Items
|
|
72
|
-
// not the best of the patterns, but it works
|
|
73
|
-
// this is where we convert "SimpleItems" to "Items"
|
|
74
|
-
// this was done to avoid breaking changes back in v1
|
|
75
|
-
|
|
76
|
-
React.useEffect(() => {
|
|
64
|
+
const [visibleItems, setVisibleItems] = (0, import_react.useState)([]);
|
|
65
|
+
const { searchQuery, highlightOnlyQuery, onVisibleItemsChange, selection, expanded, onExpandChange } = props;
|
|
66
|
+
const updateUserExpandedState = (0, import_react.useCallback)(() => {
|
|
67
|
+
(0, import_group_expands_helpers.updateExpandedState)(treeRoot, onExpandChange);
|
|
68
|
+
}, [treeRoot, onExpandChange]);
|
|
69
|
+
(0, import_react.useEffect)(() => {
|
|
77
70
|
const parsedVisibleItems = [];
|
|
78
71
|
const newExpandedHashMap = {};
|
|
79
|
-
treeRoot.walk(node => {
|
|
80
|
-
const shouldContinueWalking = true;
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
72
|
+
treeRoot.walk((node) => {
|
|
73
|
+
const shouldContinueWalking = true;
|
|
74
|
+
(0, import_tree_helpers.enrichNodeModelInPlace)(node, searchQuery, selection, expanded);
|
|
75
|
+
if (node.model.id && node.model.isGroup && node.model.isExpanded)
|
|
76
|
+
newExpandedHashMap[node.model.id] = true;
|
|
84
77
|
return shouldContinueWalking;
|
|
85
78
|
});
|
|
86
|
-
|
|
87
|
-
parsedVisibleItems.push(
|
|
88
|
-
node
|
|
89
|
-
}));
|
|
79
|
+
(0, import_tree_helpers.walkVisibles)(treeRoot, (node) => {
|
|
80
|
+
parsedVisibleItems.push({ ...node.model, node });
|
|
90
81
|
}, true, highlightOnlyQuery);
|
|
91
82
|
setVisibleItems(parsedVisibleItems);
|
|
92
83
|
onVisibleItemsChange(parsedVisibleItems);
|
|
93
|
-
setExpandedGroups(newExpandedHashMap);
|
|
94
|
-
}, [
|
|
84
|
+
setExpandedGroups(newExpandedHashMap);
|
|
85
|
+
}, [
|
|
86
|
+
treeRoot,
|
|
87
|
+
rerenderItems,
|
|
88
|
+
searchQuery,
|
|
89
|
+
highlightOnlyQuery,
|
|
90
|
+
selection,
|
|
91
|
+
expanded,
|
|
92
|
+
setExpandedGroups
|
|
95
93
|
]);
|
|
96
94
|
return {
|
|
97
95
|
visibleItems,
|
|
@@ -102,5 +100,5 @@ const useTree = (data, props, states) => {
|
|
|
102
100
|
updateUserExpandedState
|
|
103
101
|
};
|
|
104
102
|
};
|
|
105
|
-
|
|
106
|
-
|
|
103
|
+
module.exports = __toCommonJS(useTree_exports);
|
|
104
|
+
//# sourceMappingURL=useTree.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/utils/useTree.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
+
"sourcesContent": ["import { useState, useCallback, useMemo, useEffect } from 'react';\nimport TreeModel from 'tree-model';\nimport { cloneDeep } from 'lodash';\n\nimport { walkVisibles, enrichNodeModelInPlace } from './tree-helpers';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\nimport type { DSTreeviewInternalsT } from '../sharedTypes';\nimport { updateExpandedState } from './group-expands-helpers';\n\nexport const useTree = (\n data: DSTreeviewT.SimpleItem[],\n props: DSTreeviewT.Props,\n states: {\n setExpandedGroups: DSTreeviewInternalsT.StateSetter<DSTreeviewT.ExpandedItems>;\n },\n) => {\n const { setExpandedGroups } = states;\n const unfrozenData = useMemo(() => cloneDeep(data), [data]);\n\n // convert data into a TreeModel with extra isExpanded prop\n // root element type is an exception, children model is based on what the dev passed on\n // since root is an excepcion we must typecast\n const tree = useMemo(() => new TreeModel(), []);\n const [treeData, setTreeData] = useState({\n id: '__ds_tree_root',\n name: '__root',\n isExpanded: true,\n children: unfrozenData,\n } as unknown as DSTreeviewT.Item);\n\n useEffect(() => {\n setTreeData({\n id: '__ds_tree_root',\n name: '__root',\n isExpanded: true,\n children: unfrozenData,\n } as unknown as DSTreeviewT.Item);\n }, [unfrozenData]);\n\n // expose a way to rerender the tree\n // used for expand functionality\n const [rerenderItems, setRerenderItems] = useState({});\n const triggerTreeRerender = useCallback(() => {\n setRerenderItems({});\n }, []);\n\n // when re-rendering we re-parse the list\n const [treeRoot, setTreeRoot] = useState(tree.parse(treeData));\n useEffect(() => {\n setTreeRoot(tree.parse(treeData));\n }, [treeData, rerenderItems, tree]);\n\n const [visibleItems, setVisibleItems] = useState<DSTreeviewT.Item[]>([]);\n\n const { searchQuery, highlightOnlyQuery, onVisibleItemsChange, selection, expanded, onExpandChange } = props;\n\n const updateUserExpandedState = useCallback(() => {\n updateExpandedState(treeRoot, onExpandChange);\n }, [treeRoot, onExpandChange]);\n // we add missing properties to the received Items\n // not the best of the patterns, but it works\n // this is where we convert \"SimpleItems\" to \"Items\"\n // this was done to avoid breaking changes back in v1\n useEffect(() => {\n const parsedVisibleItems: DSTreeviewT.Item[] = [];\n const newExpandedHashMap: DSTreeviewT.ExpandedItems = {};\n treeRoot.walk((node) => {\n const shouldContinueWalking = true; // tree-model ask we return true if we want to continue walking\n enrichNodeModelInPlace(node, searchQuery, selection, expanded);\n if (node.model.id && node.model.isGroup && node.model.isExpanded) newExpandedHashMap[node.model.id] = true;\n return shouldContinueWalking;\n });\n\n walkVisibles(\n treeRoot,\n (node) => {\n parsedVisibleItems.push({ ...node.model, node });\n },\n true,\n highlightOnlyQuery,\n );\n setVisibleItems(parsedVisibleItems);\n onVisibleItemsChange(parsedVisibleItems);\n\n setExpandedGroups(newExpandedHashMap);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [\n treeRoot,\n rerenderItems,\n searchQuery,\n highlightOnlyQuery,\n selection,\n expanded,\n setExpandedGroups,\n // onVisibleItemsChange // evaluate potential performance hit?\n ]);\n\n return {\n visibleItems,\n tree,\n treeRoot,\n rerenderItems,\n triggerTreeRerender,\n updateUserExpandedState,\n };\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA0D;AAC1D,wBAAsB;AACtB,oBAA0B;AAE1B,0BAAqD;AAGrD,mCAAoC;AAE7B,MAAM,UAAU,CACrB,MACA,OACA,WAGG;AACH,QAAM,EAAE,sBAAsB;AAC9B,QAAM,eAAe,0BAAQ,MAAM,6BAAU,OAAO,CAAC;AAKrD,QAAM,OAAO,0BAAQ,MAAM,IAAI,6BAAa;AAC5C,QAAM,CAAC,UAAU,eAAe,2BAAS;AAAA,IACvC,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,UAAU;AAAA;AAGZ,8BAAU,MAAM;AACd,gBAAY;AAAA,MACV,IAAI;AAAA,MACJ,MAAM;AAAA,MACN,YAAY;AAAA,MACZ,UAAU;AAAA;AAAA,KAEX,CAAC;AAIJ,QAAM,CAAC,eAAe,oBAAoB,2BAAS;AACnD,QAAM,sBAAsB,8BAAY,MAAM;AAC5C,qBAAiB;AAAA,KAChB;AAGH,QAAM,CAAC,UAAU,eAAe,2BAAS,KAAK,MAAM;AACpD,8BAAU,MAAM;AACd,gBAAY,KAAK,MAAM;AAAA,KACtB,CAAC,UAAU,eAAe;AAE7B,QAAM,CAAC,cAAc,mBAAmB,2BAA6B;AAErE,QAAM,EAAE,aAAa,oBAAoB,sBAAsB,WAAW,UAAU,mBAAmB;AAEvG,QAAM,0BAA0B,8BAAY,MAAM;AAChD,0DAAoB,UAAU;AAAA,KAC7B,CAAC,UAAU;AAKd,8BAAU,MAAM;AACd,UAAM,qBAAyC;AAC/C,UAAM,qBAAgD;AACtD,aAAS,KAAK,CAAC,SAAS;AACtB,YAAM,wBAAwB;AAC9B,sDAAuB,MAAM,aAAa,WAAW;AACrD,UAAI,KAAK,MAAM,MAAM,KAAK,MAAM,WAAW,KAAK,MAAM;AAAY,2BAAmB,KAAK,MAAM,MAAM;AACtG,aAAO;AAAA;AAGT,0CACE,UACA,CAAC,SAAS;AACR,yBAAmB,KAAK,KAAK,KAAK,OAAO;AAAA,OAE3C,MACA;AAEF,oBAAgB;AAChB,yBAAqB;AAErB,sBAAkB;AAAA,KAEjB;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAIF,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/esm/TreeView.js
CHANGED
|
@@ -1,25 +1,23 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import { describe } from
|
|
4
|
-
import { TreeViewPropTypes } from
|
|
5
|
-
import TreeViewContext from
|
|
6
|
-
import {
|
|
7
|
-
import { useTreeview } from
|
|
8
|
-
import { TreeList } from
|
|
9
|
-
|
|
10
|
-
var _TreeDnD, _TreeList;
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import React2 from "react";
|
|
3
|
+
import { describe } from "react-desc";
|
|
4
|
+
import { TreeViewPropTypes } from "./react-desc-prop-types";
|
|
5
|
+
import TreeViewContext from "./TreeViewContext";
|
|
6
|
+
import { TreeDnD, TreeDndPlugin } from "./plugins/dnd";
|
|
7
|
+
import { useTreeview } from "./config/useTreeview";
|
|
8
|
+
import { TreeList } from "./parts/TreeList";
|
|
11
9
|
function TreeView(props) {
|
|
12
|
-
const {
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
const {
|
|
16
|
-
ctx
|
|
17
|
-
} = useTreeview(props);
|
|
18
|
-
return /*#__PURE__*/_jsx(TreeViewContext.Provider, {
|
|
10
|
+
const { plugins } = props;
|
|
11
|
+
const { ctx } = useTreeview(props);
|
|
12
|
+
return /* @__PURE__ */ React2.createElement(TreeViewContext.Provider, {
|
|
19
13
|
value: ctx
|
|
20
|
-
},
|
|
14
|
+
}, plugins?.includes(TreeDndPlugin) ? /* @__PURE__ */ React2.createElement(TreeDnD, null) : /* @__PURE__ */ React2.createElement(TreeList, null));
|
|
21
15
|
}
|
|
16
|
+
TreeView.propTypes = TreeViewPropTypes;
|
|
22
17
|
const TreeViewWithSchema = describe(TreeView);
|
|
23
18
|
TreeViewWithSchema.propTypes = TreeViewPropTypes;
|
|
24
|
-
|
|
25
|
-
|
|
19
|
+
export {
|
|
20
|
+
TreeView,
|
|
21
|
+
TreeViewWithSchema
|
|
22
|
+
};
|
|
23
|
+
//# sourceMappingURL=TreeView.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/TreeView.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable max-statements */\nimport React, { WeakValidationMap } from 'react';\n\nimport { describe } from 'react-desc';\nimport { TreeViewPropTypes } from './react-desc-prop-types';\nimport TreeViewContext from './TreeViewContext';\nimport { TreeDnD, TreeDndPlugin } from './plugins/dnd';\nimport { useTreeview } from './config/useTreeview';\nimport { TreeList } from './parts/TreeList';\nimport type { DSTreeviewT } from './react-desc-prop-types';\nexport function TreeView(props: DSTreeviewT.Props) {\n const { plugins } = props;\n\n const { ctx } = useTreeview(props);\n\n return (\n <TreeViewContext.Provider value={ctx}>\n {plugins?.includes(TreeDndPlugin) ? <TreeDnD /> : <TreeList />}\n </TreeViewContext.Provider>\n );\n}\n\nTreeView.propTypes = TreeViewPropTypes as WeakValidationMap<unknown>;\nconst TreeViewWithSchema = describe(TreeView);\nTreeViewWithSchema.propTypes = TreeViewPropTypes;\n\nexport { TreeViewWithSchema };\n"],
|
|
5
|
+
"mappings": "AAAA;ACEA;AAEA;AACA;AACA;AACA;AACA;AACA;AAEO,kBAAkB,OAA0B;AACjD,QAAM,EAAE,YAAY;AAEpB,QAAM,EAAE,QAAQ,YAAY;AAE5B,SACE,qCAAC,gBAAgB,UAAjB;AAAA,IAA0B,OAAO;AAAA,KAC9B,SAAS,SAAS,iBAAiB,qCAAC,SAAD,QAAc,qCAAC,UAAD;AAAA;AAKxD,SAAS,YAAY;AACrB,MAAM,qBAAqB,SAAS;AACpC,mBAAmB,YAAY;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/esm/TreeViewContext.js
CHANGED
|
@@ -1,14 +1,11 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
6
|
-
function noop() {}
|
|
7
|
-
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { createContext, createRef } from "react";
|
|
3
|
+
function noop(..._args) {
|
|
4
|
+
}
|
|
8
5
|
const defaultProps = {
|
|
9
6
|
plugins: [],
|
|
10
7
|
selection: {},
|
|
11
|
-
instanceRef:
|
|
8
|
+
instanceRef: createRef(),
|
|
12
9
|
isItemDisabled: () => false,
|
|
13
10
|
disableIcons: false,
|
|
14
11
|
fluid: false,
|
|
@@ -26,20 +23,15 @@ const defaultProps = {
|
|
|
26
23
|
onSelectionChange: noop,
|
|
27
24
|
onExpandChange: noop,
|
|
28
25
|
onInstanceRefInitialized: noop,
|
|
29
|
-
rowSize:
|
|
30
|
-
labelOverflow:
|
|
31
|
-
noItemsPlaceholder:
|
|
32
|
-
nameKey:
|
|
33
|
-
width:
|
|
34
|
-
height:
|
|
26
|
+
rowSize: "normal",
|
|
27
|
+
labelOverflow: "wrap",
|
|
28
|
+
noItemsPlaceholder: "No items found",
|
|
29
|
+
nameKey: "name",
|
|
30
|
+
width: "100%",
|
|
31
|
+
height: "100%",
|
|
35
32
|
groupIcon: null,
|
|
36
33
|
itemIcon: null,
|
|
37
|
-
searchQuery:
|
|
38
|
-
// when we instantiate the context we can't have all the props
|
|
39
|
-
// we only have a part of them but the final typings will include missing props
|
|
40
|
-
// this is safe to do because
|
|
41
|
-
// we will "mergeWithDefaults" + "validatePropTypes" when we do instantiate the context
|
|
42
|
-
|
|
34
|
+
searchQuery: ""
|
|
43
35
|
};
|
|
44
36
|
const defaultRelativeMouseCoord = {
|
|
45
37
|
isBefore: false,
|
|
@@ -60,22 +52,22 @@ const defaultContext = {
|
|
|
60
52
|
relativeMouseCord: defaultRelativeMouseCoord,
|
|
61
53
|
setRelativeMouseCord: noop,
|
|
62
54
|
triggerTreeRerender: noop,
|
|
63
|
-
tree:
|
|
64
|
-
treeRoot:
|
|
55
|
+
tree: void 0,
|
|
56
|
+
treeRoot: void 0,
|
|
65
57
|
virtualListHelpers: {
|
|
66
58
|
virtualItems: [],
|
|
67
59
|
totalSize: 0,
|
|
68
60
|
scrollToOffset: noop,
|
|
69
61
|
scrollToIndex: noop
|
|
70
62
|
},
|
|
71
|
-
virtualListRef:
|
|
63
|
+
virtualListRef: void 0,
|
|
72
64
|
isDragging: false,
|
|
73
65
|
setIsDragging: noop,
|
|
74
66
|
isKeyboardDragging: false,
|
|
75
67
|
setIsKeyboardDragging: noop,
|
|
76
68
|
draggedItem: null,
|
|
77
69
|
setDraggedItem: noop,
|
|
78
|
-
uniqueTreeViewUUID:
|
|
70
|
+
uniqueTreeViewUUID: "",
|
|
79
71
|
selectedItem: null,
|
|
80
72
|
setSelectedItem: noop,
|
|
81
73
|
focusedItem: null,
|
|
@@ -91,8 +83,11 @@ const defaultContext = {
|
|
|
91
83
|
handleExpandGroup: noop,
|
|
92
84
|
updateUserExpandedState: noop
|
|
93
85
|
};
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
86
|
+
const TreeViewContext = createContext(defaultContext);
|
|
87
|
+
var TreeViewContext_default = TreeViewContext;
|
|
88
|
+
export {
|
|
89
|
+
TreeViewContext_default as default,
|
|
90
|
+
defaultProps,
|
|
91
|
+
defaultRelativeMouseCoord
|
|
92
|
+
};
|
|
93
|
+
//# sourceMappingURL=TreeViewContext.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/TreeViewContext.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-unused-vars */\nimport { createContext, createRef } from 'react';\nimport type { DSTreeviewT } from './react-desc-prop-types';\nimport type { DSTreeviewInternalsT } from './sharedTypes';\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nfunction noop<T extends unknown[]>(..._args: T): void {}\n\nexport const defaultProps = {\n plugins: [],\n selection: {},\n instanceRef: createRef(),\n isItemDisabled: () => false,\n disableIcons: false,\n fluid: false,\n isMultiSelect: false,\n isSingleSelect: false,\n restrictDragAndDrop: false,\n showChildrenAmount: false,\n sortable: false,\n isLoading: false,\n highlightOnlyQuery: false,\n onItemClick: noop,\n onItemFocus: noop,\n onVisibleItemsChange: noop,\n onOrderChange: noop,\n onSelectionChange: noop,\n onExpandChange: noop,\n onInstanceRefInitialized: noop,\n rowSize: 'normal',\n labelOverflow: 'wrap',\n noItemsPlaceholder: 'No items found',\n nameKey: 'name',\n width: '100%',\n height: '100%',\n groupIcon: null,\n itemIcon: null,\n searchQuery: '',\n // workaround on the typings over the fact that\n // when we instantiate the context we can't have all the props\n // we only have a part of them but the final typings will include missing props\n // this is safe to do because\n // we will \"mergeWithDefaults\" + \"validatePropTypes\" when we do instantiate the context\n} as unknown as DSTreeviewT.Props;\n\nexport const defaultRelativeMouseCoord = {\n isBefore: false,\n isAfter: false,\n isValid: true,\n item: null,\n x: null,\n y: null,\n relativeElementDOMRect: null,\n relativeElementIndex: null,\n};\n\nconst defaultContext: DSTreeviewInternalsT.CTX = {\n props: defaultProps,\n visibleItems: [],\n withRadioChecks: false,\n withCheckboxChecks: false,\n withDragAndDrop: false,\n relativeMouseCord: defaultRelativeMouseCoord,\n setRelativeMouseCord: noop,\n triggerTreeRerender: noop,\n tree: undefined,\n treeRoot: undefined,\n virtualListHelpers: {\n virtualItems: [],\n totalSize: 0,\n scrollToOffset: noop,\n scrollToIndex: noop,\n },\n virtualListRef: undefined,\n isDragging: false,\n setIsDragging: noop,\n isKeyboardDragging: false,\n setIsKeyboardDragging: noop,\n draggedItem: null,\n setDraggedItem: noop,\n uniqueTreeViewUUID: '',\n selectedItem: null,\n setSelectedItem: noop,\n focusedItem: null,\n setFocusedItem: noop,\n selectedCheckboxes: {},\n setSelectedCheckboxes: noop,\n expandedGroups: {},\n setExpandedGroups: noop,\n latestToggledItem: null,\n setLatestToggledItem: noop,\n hoverItem: null,\n setHoverItem: noop,\n handleExpandGroup: noop,\n updateUserExpandedState: noop,\n};\n\n/** Context for cross component communication */\nconst TreeViewContext = createContext(defaultContext);\n\nexport default TreeViewContext;\n"],
|
|
5
|
+
"mappings": "AAAA;ACCA;AAKA,iBAAsC,OAAgB;AAAA;AAE/C,MAAM,eAAe;AAAA,EAC1B,SAAS;AAAA,EACT,WAAW;AAAA,EACX,aAAa;AAAA,EACb,gBAAgB,MAAM;AAAA,EACtB,cAAc;AAAA,EACd,OAAO;AAAA,EACP,eAAe;AAAA,EACf,gBAAgB;AAAA,EAChB,qBAAqB;AAAA,EACrB,oBAAoB;AAAA,EACpB,UAAU;AAAA,EACV,WAAW;AAAA,EACX,oBAAoB;AAAA,EACpB,aAAa;AAAA,EACb,aAAa;AAAA,EACb,sBAAsB;AAAA,EACtB,eAAe;AAAA,EACf,mBAAmB;AAAA,EACnB,gBAAgB;AAAA,EAChB,0BAA0B;AAAA,EAC1B,SAAS;AAAA,EACT,eAAe;AAAA,EACf,oBAAoB;AAAA,EACpB,SAAS;AAAA,EACT,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,UAAU;AAAA,EACV,aAAa;AAAA;AAQR,MAAM,4BAA4B;AAAA,EACvC,UAAU;AAAA,EACV,SAAS;AAAA,EACT,SAAS;AAAA,EACT,MAAM;AAAA,EACN,GAAG;AAAA,EACH,GAAG;AAAA,EACH,wBAAwB;AAAA,EACxB,sBAAsB;AAAA;AAGxB,MAAM,iBAA2C;AAAA,EAC/C,OAAO;AAAA,EACP,cAAc;AAAA,EACd,iBAAiB;AAAA,EACjB,oBAAoB;AAAA,EACpB,iBAAiB;AAAA,EACjB,mBAAmB;AAAA,EACnB,sBAAsB;AAAA,EACtB,qBAAqB;AAAA,EACrB,MAAM;AAAA,EACN,UAAU;AAAA,EACV,oBAAoB;AAAA,IAClB,cAAc;AAAA,IACd,WAAW;AAAA,IACX,gBAAgB;AAAA,IAChB,eAAe;AAAA;AAAA,EAEjB,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,eAAe;AAAA,EACf,oBAAoB;AAAA,EACpB,uBAAuB;AAAA,EACvB,aAAa;AAAA,EACb,gBAAgB;AAAA,EAChB,oBAAoB;AAAA,EACpB,cAAc;AAAA,EACd,iBAAiB;AAAA,EACjB,aAAa;AAAA,EACb,gBAAgB;AAAA,EAChB,oBAAoB;AAAA,EACpB,uBAAuB;AAAA,EACvB,gBAAgB;AAAA,EAChB,mBAAmB;AAAA,EACnB,mBAAmB;AAAA,EACnB,sBAAsB;AAAA,EACtB,WAAW;AAAA,EACX,cAAc;AAAA,EACd,mBAAmB;AAAA,EACnB,yBAAyB;AAAA;AAI3B,MAAM,kBAAkB,cAAc;AAEtC,IAAO,0BAAQ;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,6 +1,12 @@
|
|
|
1
|
-
|
|
2
|
-
const
|
|
3
|
-
const
|
|
4
|
-
const
|
|
5
|
-
|
|
6
|
-
export {
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
const DSTreeViewPrefix = "em-ds";
|
|
3
|
+
const treeItemBlockName = "tree-item";
|
|
4
|
+
const treeListBlockName = "tree-list";
|
|
5
|
+
const treeListNoItemsBn = `${treeListBlockName}-no-items`;
|
|
6
|
+
export {
|
|
7
|
+
DSTreeViewPrefix,
|
|
8
|
+
treeItemBlockName,
|
|
9
|
+
treeListBlockName,
|
|
10
|
+
treeListNoItemsBn
|
|
11
|
+
};
|
|
12
|
+
//# sourceMappingURL=cssClassesConstants.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/cssClassesConstants.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const DSTreeViewPrefix = 'em-ds';\nexport const treeItemBlockName = 'tree-item';\nexport const treeListBlockName = 'tree-list';\nexport const treeListNoItemsBn = `${treeListBlockName}-no-items`;\n"],
|
|
5
|
+
"mappings": "AAAA;ACAO,MAAM,mBAAmB;AACzB,MAAM,oBAAoB;AAC1B,MAAM,oBAAoB;AAC1B,MAAM,oBAAoB,GAAG;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,34 +1,28 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
import {
|
|
9
|
-
import {
|
|
10
|
-
import {
|
|
11
|
-
import {
|
|
12
|
-
import {
|
|
13
|
-
|
|
14
|
-
import { TreeDndPlugin } from '../plugins/dnd/TreeDndPlugin.js';
|
|
15
|
-
import { useTree } from '../utils/useTree.js';
|
|
16
|
-
import { toggleItemExpand, useNotifyExpandedChange } from '../utils/group-expands-helpers.js';
|
|
17
|
-
import { useInstanceRefActions } from '../utils/useInstanceRefActions.js';
|
|
18
|
-
import { useGlobalToggleAllExpandShortcut } from '../utils/keyboard-helpers.js';
|
|
19
|
-
|
|
20
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
21
|
-
|
|
22
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
23
|
-
const useTreeview = props => {
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { useState, useRef, useEffect, useMemo, useCallback } from "react";
|
|
3
|
+
import { useVirtual } from "react-virtual";
|
|
4
|
+
import { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from "@elliemae/ds-props-helpers";
|
|
5
|
+
import { v4 as uuidv4 } from "uuid";
|
|
6
|
+
import { TreeViewPropTypes } from "../react-desc-prop-types";
|
|
7
|
+
import { defaultRelativeMouseCoord, defaultProps } from "../TreeViewContext";
|
|
8
|
+
import { TreeDndPlugin } from "../plugins/dnd";
|
|
9
|
+
import { useTree } from "../utils/useTree";
|
|
10
|
+
import { useNotifyExpandedChange, toggleItemExpand } from "../utils/group-expands-helpers";
|
|
11
|
+
import { useInstanceRefActions } from "../utils/useInstanceRefActions";
|
|
12
|
+
import { useGlobalToggleAllExpandShortcut } from "../utils/keyboard-helpers";
|
|
13
|
+
const useTreeview = (props) => {
|
|
24
14
|
const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
|
|
25
15
|
useValidateTypescriptPropTypes(propsWithDefault, TreeViewPropTypes);
|
|
26
16
|
const defaultActions = {
|
|
27
17
|
actions: {
|
|
28
|
-
toggleExpandAll: () => {
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
18
|
+
toggleExpandAll: () => {
|
|
19
|
+
},
|
|
20
|
+
scrollTo: () => {
|
|
21
|
+
},
|
|
22
|
+
setSelectedItemByVirtualIndex: () => {
|
|
23
|
+
},
|
|
24
|
+
setFocusedItemByVirtualIndex: () => {
|
|
25
|
+
}
|
|
32
26
|
}
|
|
33
27
|
};
|
|
34
28
|
const treeRef = useRef(defaultActions);
|
|
@@ -45,32 +39,26 @@ const useTreeview = props => {
|
|
|
45
39
|
const [isDragging, setIsDragging] = useState(false);
|
|
46
40
|
const [isKeyboardDragging, setIsKeyboardDragging] = useState(false);
|
|
47
41
|
const [relativeMouseCord, setRelativeMouseCord] = useState(defaultRelativeMouseCoord);
|
|
48
|
-
const [uniqueTreeViewUUID] = useState(
|
|
42
|
+
const [uniqueTreeViewUUID] = useState(uuidv4());
|
|
49
43
|
const [draggedItem, setDraggedItem] = useState(null);
|
|
50
44
|
const [hoverItem, setHoverItem] = useState(null);
|
|
51
45
|
const [latestToggledItem, setLatestToggledItem] = useState(null);
|
|
52
46
|
const [selectedItem, setSelectedItem] = useState(null);
|
|
53
47
|
const [focusedItem, setFocusedItem] = useState(null);
|
|
54
|
-
const [selectedCheckboxes, setSelectedCheckboxes] = useState(
|
|
48
|
+
const [selectedCheckboxes, setSelectedCheckboxes] = useState({
|
|
49
|
+
...selection
|
|
50
|
+
});
|
|
55
51
|
const [expandedGroups, setExpandedGroups] = useState({});
|
|
56
|
-
const {
|
|
57
|
-
visibleItems,
|
|
58
|
-
tree,
|
|
59
|
-
treeRoot,
|
|
60
|
-
triggerTreeRerender,
|
|
61
|
-
updateUserExpandedState
|
|
62
|
-
} = useTree(data, propsWithDefault, {
|
|
52
|
+
const { visibleItems, tree, treeRoot, triggerTreeRerender, updateUserExpandedState } = useTree(data, propsWithDefault, {
|
|
63
53
|
setExpandedGroups
|
|
64
54
|
});
|
|
65
|
-
const virtualListRef = useRef();
|
|
66
|
-
// https://github.com/tannerlinsley/react-virtual/issues/23
|
|
67
|
-
|
|
55
|
+
const virtualListRef = useRef();
|
|
68
56
|
const virtualListHelpers = useVirtual({
|
|
69
57
|
size: visibleItems.length,
|
|
70
58
|
parentRef: virtualListRef,
|
|
71
59
|
overscan: 15
|
|
72
60
|
});
|
|
73
|
-
const withDragAndDrop = !!(plugins
|
|
61
|
+
const withDragAndDrop = !!(plugins?.includes(TreeDndPlugin) && onOrderChange);
|
|
74
62
|
const withRadioChecks = isSingleSelect && !isMultiSelect;
|
|
75
63
|
const withCheckboxChecks = !isSingleSelect && isMultiSelect;
|
|
76
64
|
const handleExpandGroup = useCallback(toggleItemExpand, []);
|
|
@@ -108,22 +96,41 @@ const useTreeview = props => {
|
|
|
108
96
|
setHoverItem,
|
|
109
97
|
handleExpandGroup,
|
|
110
98
|
updateUserExpandedState
|
|
111
|
-
}), [
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
99
|
+
}), [
|
|
100
|
+
draggedItem,
|
|
101
|
+
expandedGroups,
|
|
102
|
+
focusedItem,
|
|
103
|
+
handleExpandGroup,
|
|
104
|
+
hoverItem,
|
|
105
|
+
isDragging,
|
|
106
|
+
isKeyboardDragging,
|
|
107
|
+
latestToggledItem,
|
|
108
|
+
propsWithDefault,
|
|
109
|
+
relativeMouseCord,
|
|
110
|
+
selectedCheckboxes,
|
|
111
|
+
selectedItem,
|
|
112
|
+
tree,
|
|
113
|
+
treeRoot,
|
|
114
|
+
triggerTreeRerender,
|
|
115
|
+
uniqueTreeViewUUID,
|
|
116
|
+
virtualListHelpers,
|
|
117
|
+
visibleItems,
|
|
118
|
+
withCheckboxChecks,
|
|
119
|
+
withDragAndDrop,
|
|
120
|
+
withRadioChecks,
|
|
121
|
+
updateUserExpandedState
|
|
122
|
+
]);
|
|
123
|
+
if (instanceRef)
|
|
124
|
+
instanceRef.current = treeRef.current;
|
|
115
125
|
useInstanceRefActions(treeRef.current, ctx);
|
|
116
126
|
useGlobalToggleAllExpandShortcut(treeRoot, triggerTreeRerender, setLatestToggledItem, updateUserExpandedState);
|
|
117
|
-
useNotifyExpandedChange(propsWithDefault, ctx);
|
|
118
|
-
// this is required because there is no "on rendered" react-way to check if every children has finished rendering
|
|
119
|
-
// this should be working for now, in the future we may want to review this for a better solution
|
|
120
|
-
|
|
127
|
+
useNotifyExpandedChange(propsWithDefault, ctx);
|
|
121
128
|
useEffect(() => {
|
|
122
|
-
setTimeout(() => onInstanceRefInitialized(treeRef), 100);
|
|
129
|
+
setTimeout(() => onInstanceRefInitialized(treeRef), 100);
|
|
123
130
|
}, []);
|
|
124
|
-
return useMemo(() => ({
|
|
125
|
-
|
|
126
|
-
|
|
131
|
+
return useMemo(() => ({ ctx }), [ctx]);
|
|
132
|
+
};
|
|
133
|
+
export {
|
|
134
|
+
useTreeview
|
|
127
135
|
};
|
|
128
|
-
|
|
129
|
-
export { useTreeview };
|
|
136
|
+
//# sourceMappingURL=useTreeview.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useTreeview.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable max-statements */\nimport { useState, useRef, useEffect, useMemo, useCallback } from 'react';\nimport { useVirtual } from 'react-virtual';\nimport { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport { TreeViewPropTypes } from '../react-desc-prop-types';\nimport { defaultRelativeMouseCoord, defaultProps } from '../TreeViewContext';\nimport { TreeDndPlugin } from '../plugins/dnd';\nimport { useTree } from '../utils/useTree';\nimport { useNotifyExpandedChange, toggleItemExpand } from '../utils/group-expands-helpers';\nimport { useInstanceRefActions } from '../utils/useInstanceRefActions';\nimport { useGlobalToggleAllExpandShortcut } from '../utils/keyboard-helpers';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\nimport type { DSTreeviewInternalsT } from '../sharedTypes';\n\ntype UseTreeviewT = (props: DSTreeviewT.Props) => { ctx: DSTreeviewInternalsT.CTX };\n\nexport const useTreeview: UseTreeviewT = (props) => {\n const propsWithDefault = useMemoMergePropsWithDefault<DSTreeviewT.Props>(props, defaultProps);\n useValidateTypescriptPropTypes<DSTreeviewT.Props>(propsWithDefault, TreeViewPropTypes);\n const defaultActions = {\n actions: {\n toggleExpandAll: () => {},\n scrollTo: () => {},\n setSelectedItemByVirtualIndex: () => {},\n setFocusedItemByVirtualIndex: () => {},\n },\n } as unknown as DSTreeviewT.InstanceRef;\n const treeRef = useRef(defaultActions);\n const {\n data,\n plugins,\n onOrderChange,\n isMultiSelect,\n isSingleSelect,\n instanceRef,\n selection,\n onInstanceRefInitialized,\n } = propsWithDefault;\n const [isDragging, setIsDragging] = useState(false);\n const [isKeyboardDragging, setIsKeyboardDragging] = useState(false);\n const [relativeMouseCord, setRelativeMouseCord] =\n useState<DSTreeviewInternalsT.MouseCoord>(defaultRelativeMouseCoord);\n const [uniqueTreeViewUUID] = useState(uuidv4());\n const [draggedItem, setDraggedItem] = useState<DSTreeviewT.Item | null>(null);\n const [hoverItem, setHoverItem] = useState<DSTreeviewT.Item | null>(null);\n const [latestToggledItem, setLatestToggledItem] = useState<DSTreeviewT.Item | null>(null);\n const [selectedItem, setSelectedItem] = useState<DSTreeviewT.Item | null>(null);\n const [focusedItem, setFocusedItem] = useState<DSTreeviewT.Item | null>(null);\n const [selectedCheckboxes, setSelectedCheckboxes] = useState({\n ...selection,\n });\n const [expandedGroups, setExpandedGroups] = useState<DSTreeviewT.ExpandedItems>({});\n const { visibleItems, tree, treeRoot, triggerTreeRerender, updateUserExpandedState } = useTree(\n data,\n propsWithDefault,\n {\n setExpandedGroups,\n },\n );\n\n const virtualListRef = useRef<HTMLUListElement>();\n // estimateSize should not be really required given what was stated on\n // https://github.com/tannerlinsley/react-virtual/issues/23\n\n const virtualListHelpers = useVirtual({\n size: visibleItems.length,\n parentRef: virtualListRef,\n overscan: 15,\n });\n\n const withDragAndDrop = !!(plugins?.includes(TreeDndPlugin) && onOrderChange);\n const withRadioChecks = isSingleSelect && !isMultiSelect;\n const withCheckboxChecks = !isSingleSelect && isMultiSelect;\n\n const handleExpandGroup = useCallback(toggleItemExpand, []);\n\n const ctx: DSTreeviewInternalsT.CTX = useMemo(\n () => ({\n props: propsWithDefault,\n setRelativeMouseCord,\n relativeMouseCord,\n virtualListHelpers,\n virtualListRef,\n tree,\n treeRoot,\n visibleItems,\n triggerTreeRerender,\n isDragging,\n setIsDragging,\n isKeyboardDragging,\n setIsKeyboardDragging,\n draggedItem,\n setDraggedItem,\n withRadioChecks,\n withCheckboxChecks,\n withDragAndDrop,\n uniqueTreeViewUUID,\n selectedCheckboxes,\n setSelectedCheckboxes,\n selectedItem,\n setSelectedItem,\n expandedGroups,\n setExpandedGroups,\n latestToggledItem,\n setLatestToggledItem,\n focusedItem,\n setFocusedItem,\n hoverItem,\n setHoverItem,\n handleExpandGroup,\n updateUserExpandedState,\n }),\n [\n draggedItem,\n expandedGroups,\n focusedItem,\n handleExpandGroup,\n hoverItem,\n isDragging,\n isKeyboardDragging,\n latestToggledItem,\n propsWithDefault,\n relativeMouseCord,\n selectedCheckboxes,\n selectedItem,\n tree,\n treeRoot,\n triggerTreeRerender,\n uniqueTreeViewUUID,\n virtualListHelpers,\n visibleItems,\n withCheckboxChecks,\n withDragAndDrop,\n withRadioChecks,\n updateUserExpandedState,\n ],\n );\n // this hooks can't use the context because the context provider doesn't wrap this\n // as such we manually pass the second parameter as fit\n if (instanceRef) instanceRef.current = treeRef.current;\n useInstanceRefActions(treeRef.current, ctx);\n useGlobalToggleAllExpandShortcut(treeRoot, triggerTreeRerender, setLatestToggledItem, updateUserExpandedState);\n useNotifyExpandedChange(propsWithDefault, ctx);\n\n // this is an horrible hack.\n // this is required because there is no \"on rendered\" react-way to check if every children has finished rendering\n // this should be working for now, in the future we may want to review this for a better solution\n useEffect(() => {\n setTimeout(() => onInstanceRefInitialized(treeRef), 100);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n return useMemo(() => ({ ctx }), [ctx]);\n};\n"],
|
|
5
|
+
"mappings": "AAAA;ACEA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AAMO,MAAM,cAA4B,CAAC,UAAU;AAClD,QAAM,mBAAmB,6BAAgD,OAAO;AAChF,iCAAkD,kBAAkB;AACpE,QAAM,iBAAiB;AAAA,IACrB,SAAS;AAAA,MACP,iBAAiB,MAAM;AAAA;AAAA,MACvB,UAAU,MAAM;AAAA;AAAA,MAChB,+BAA+B,MAAM;AAAA;AAAA,MACrC,8BAA8B,MAAM;AAAA;AAAA;AAAA;AAGxC,QAAM,UAAU,OAAO;AACvB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE;AACJ,QAAM,CAAC,YAAY,iBAAiB,SAAS;AAC7C,QAAM,CAAC,oBAAoB,yBAAyB,SAAS;AAC7D,QAAM,CAAC,mBAAmB,wBACxB,SAA0C;AAC5C,QAAM,CAAC,sBAAsB,SAAS;AACtC,QAAM,CAAC,aAAa,kBAAkB,SAAkC;AACxE,QAAM,CAAC,WAAW,gBAAgB,SAAkC;AACpE,QAAM,CAAC,mBAAmB,wBAAwB,SAAkC;AACpF,QAAM,CAAC,cAAc,mBAAmB,SAAkC;AAC1E,QAAM,CAAC,aAAa,kBAAkB,SAAkC;AACxE,QAAM,CAAC,oBAAoB,yBAAyB,SAAS;AAAA,OACxD;AAAA;AAEL,QAAM,CAAC,gBAAgB,qBAAqB,SAAoC;AAChF,QAAM,EAAE,cAAc,MAAM,UAAU,qBAAqB,4BAA4B,QACrF,MACA,kBACA;AAAA,IACE;AAAA;AAIJ,QAAM,iBAAiB;AAIvB,QAAM,qBAAqB,WAAW;AAAA,IACpC,MAAM,aAAa;AAAA,IACnB,WAAW;AAAA,IACX,UAAU;AAAA;AAGZ,QAAM,kBAAkB,CAAC,CAAE,UAAS,SAAS,kBAAkB;AAC/D,QAAM,kBAAkB,kBAAkB,CAAC;AAC3C,QAAM,qBAAqB,CAAC,kBAAkB;AAE9C,QAAM,oBAAoB,YAAY,kBAAkB;AAExD,QAAM,MAAgC,QACpC,MAAO;AAAA,IACL,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MAEF;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAKJ,MAAI;AAAa,gBAAY,UAAU,QAAQ;AAC/C,wBAAsB,QAAQ,SAAS;AACvC,mCAAiC,UAAU,qBAAqB,sBAAsB;AACtF,0BAAwB,kBAAkB;AAK1C,YAAU,MAAM;AACd,eAAW,MAAM,yBAAyB,UAAU;AAAA,KAEnD;AAEH,SAAO,QAAQ,MAAO,GAAE,QAAQ,CAAC;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/esm/index.js
CHANGED
|
@@ -1,9 +1,8 @@
|
|
|
1
|
-
|
|
2
|
-
export
|
|
3
|
-
export
|
|
4
|
-
|
|
5
|
-
export {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
export { TreeViewSearchBar } from './related-components/TreeViewSearchBar.js';
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
export * from "./TreeView";
|
|
3
|
+
export * from "./plugins";
|
|
4
|
+
import { TreeViewSearchBar } from "./related-components/TreeViewSearchBar";
|
|
5
|
+
export {
|
|
6
|
+
TreeViewSearchBar
|
|
7
|
+
};
|
|
8
|
+
//# sourceMappingURL=index.js.map
|
package/esm/index.js.map
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './TreeView';\nexport * from './plugins';\n\nexport { TreeViewSearchBar } from './related-components/TreeViewSearchBar';\n"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AACA;AAEA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|