@elliemae/ds-treeview 2.2.0-alpha.1 → 2.2.0-alpha.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/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
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/useInstanceRefActions.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useEffect, useMemo, useState, useRef, useCallback } from 'react';\nimport { focusItem } from './tree-helpers';\nimport { toggleExpandAllHelper } from './group-expands-helpers';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\nimport type { DSTreeviewInternalsT } from '../sharedTypes';\n\ninterface PromisesRefT {\n expandResolve?: null | ((value: DSTreeviewT.Item[] | PromiseLike<DSTreeviewT.Item[]>) => void);\n scrollTo?: null | ((value: DSTreeviewT.Item[] | PromiseLike<DSTreeviewT.Item[]>) => void);\n}\n\nexport const useInstanceRefActions = ({ actions }: DSTreeviewT.InstanceRef, ctx: DSTreeviewInternalsT.CTX) => {\n const {\n props: { onItemFocus },\n virtualListHelpers,\n treeRoot,\n visibleItems,\n triggerTreeRerender,\n updateUserExpandedState,\n setSelectedItem,\n setFocusedItem,\n setLatestToggledItem,\n } = ctx;\n const { current: promises } = useRef<PromisesRefT>({});\n const { scrollToIndex } = useMemo(() => virtualListHelpers, [virtualListHelpers]);\n const [expandPromise, setPromise] = useState<Promise<DSTreeviewT.Item[]> | undefined | null>();\n\n useEffect(() => {\n if (expandPromise && promises.expandResolve) {\n promises.expandResolve(visibleItems);\n promises.expandResolve = null;\n setPromise(null);\n }\n }, [visibleItems, expandPromise, promises]);\n\n actions.toggleExpandAll = useCallback(\n (isExpand) => {\n const p = new Promise<DSTreeviewT.Item[]>((resolve) => {\n promises.expandResolve = resolve;\n if (treeRoot)\n toggleExpandAllHelper(isExpand, treeRoot, triggerTreeRerender, setLatestToggledItem, updateUserExpandedState);\n });\n setPromise(p);\n return p;\n },\n [promises, treeRoot, triggerTreeRerender, setLatestToggledItem, updateUserExpandedState],\n );\n actions.scrollTo = useCallback(\n (indx, opts = { align: 'start' }) => {\n if (scrollToIndex) scrollToIndex(indx, opts);\n },\n [scrollToIndex],\n );\n\n actions.setSelectedItemByVirtualIndex = useCallback(\n (index) => {\n const itemByIndex = visibleItems[index];\n setSelectedItem(itemByIndex);\n },\n [visibleItems, setSelectedItem],\n );\n\n actions.setFocusedItemByVirtualIndex = useCallback(\n (index, opts = { align: 'start', withScroll: false }) => {\n const itemByIndex = visibleItems[index];\n const onItemFocusParams = {\n itemIndex: itemByIndex.virtualIndex as number,\n scrollToItem: () => scrollToIndex(index, opts),\n item: itemByIndex,\n };\n\n if (opts.withScroll && scrollToIndex) {\n scrollToIndex(index, opts);\n setTimeout(() => {\n setFocusedItem(itemByIndex);\n focusItem(itemByIndex);\n onItemFocus(onItemFocusParams);\n }, 300);\n } else {\n setFocusedItem(itemByIndex);\n focusItem(itemByIndex);\n onItemFocus(onItemFocusParams);\n }\n },\n [visibleItems, scrollToIndex, setFocusedItem, onItemFocus],\n );\n\n return actions;\n};\n"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AACA;AACA;AASO,MAAM,wBAAwB,CAAC,EAAE,WAAoC,QAAkC;AAC5G,QAAM;AAAA,IACJ,OAAO,EAAE;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE;AACJ,QAAM,EAAE,SAAS,aAAa,OAAqB;AACnD,QAAM,EAAE,kBAAkB,QAAQ,MAAM,oBAAoB,CAAC;AAC7D,QAAM,CAAC,eAAe,cAAc;AAEpC,YAAU,MAAM;AACd,QAAI,iBAAiB,SAAS,eAAe;AAC3C,eAAS,cAAc;AACvB,eAAS,gBAAgB;AACzB,iBAAW;AAAA;AAAA,KAEZ,CAAC,cAAc,eAAe;AAEjC,UAAQ,kBAAkB,YACxB,CAAC,aAAa;AACZ,UAAM,IAAI,IAAI,QAA4B,CAAC,YAAY;AACrD,eAAS,gBAAgB;AACzB,UAAI;AACF,8BAAsB,UAAU,UAAU,qBAAqB,sBAAsB;AAAA;AAEzF,eAAW;AACX,WAAO;AAAA,KAET,CAAC,UAAU,UAAU,qBAAqB,sBAAsB;AAElE,UAAQ,WAAW,YACjB,CAAC,MAAM,OAAO,EAAE,OAAO,cAAc;AACnC,QAAI;AAAe,oBAAc,MAAM;AAAA,KAEzC,CAAC;AAGH,UAAQ,gCAAgC,YACtC,CAAC,UAAU;AACT,UAAM,cAAc,aAAa;AACjC,oBAAgB;AAAA,KAElB,CAAC,cAAc;AAGjB,UAAQ,+BAA+B,YACrC,CAAC,OAAO,OAAO,EAAE,OAAO,SAAS,YAAY,YAAY;AACvD,UAAM,cAAc,aAAa;AACjC,UAAM,oBAAoB;AAAA,MACxB,WAAW,YAAY;AAAA,MACvB,cAAc,MAAM,cAAc,OAAO;AAAA,MACzC,MAAM;AAAA;AAGR,QAAI,KAAK,cAAc,eAAe;AACpC,oBAAc,OAAO;AACrB,iBAAW,MAAM;AACf,uBAAe;AACf,kBAAU;AACV,oBAAY;AAAA,SACX;AAAA,WACE;AACL,qBAAe;AACf,gBAAU;AACV,kBAAY;AAAA;AAAA,KAGhB,CAAC,cAAc,eAAe,gBAAgB;AAGhD,SAAO;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/esm/utils/useTree.js
CHANGED
|
@@ -1,88 +1,64 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import 'core-js/modules/web.dom-collections.iterator.js';
|
|
8
|
-
import { useMemo, useState, useEffect, useCallback } from 'react';
|
|
9
|
-
import TreeModel from 'tree-model';
|
|
10
|
-
import { cloneDeep } from 'lodash';
|
|
11
|
-
import { enrichNodeModelInPlace, walkVisibles } from './tree-helpers.js';
|
|
12
|
-
import { updateExpandedState } from './group-expands-helpers.js';
|
|
13
|
-
|
|
14
|
-
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; }
|
|
15
|
-
|
|
16
|
-
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; }
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { useState, useCallback, useMemo, useEffect } from "react";
|
|
3
|
+
import TreeModel from "tree-model";
|
|
4
|
+
import { cloneDeep } from "lodash";
|
|
5
|
+
import { walkVisibles, enrichNodeModelInPlace } from "./tree-helpers";
|
|
6
|
+
import { updateExpandedState } from "./group-expands-helpers";
|
|
17
7
|
const useTree = (data, props, states) => {
|
|
18
|
-
const {
|
|
19
|
-
|
|
20
|
-
} = states;
|
|
21
|
-
const unfrozenData = useMemo(() => cloneDeep(data), [data]); // convert data into a TreeModel with extra isExpanded prop
|
|
22
|
-
// root element type is an exception, children model is based on what the dev passed on
|
|
23
|
-
// since root is an excepcion we must typecast
|
|
24
|
-
|
|
8
|
+
const { setExpandedGroups } = states;
|
|
9
|
+
const unfrozenData = useMemo(() => cloneDeep(data), [data]);
|
|
25
10
|
const tree = useMemo(() => new TreeModel(), []);
|
|
26
11
|
const [treeData, setTreeData] = useState({
|
|
27
|
-
id:
|
|
28
|
-
name:
|
|
12
|
+
id: "__ds_tree_root",
|
|
13
|
+
name: "__root",
|
|
29
14
|
isExpanded: true,
|
|
30
15
|
children: unfrozenData
|
|
31
16
|
});
|
|
32
17
|
useEffect(() => {
|
|
33
18
|
setTreeData({
|
|
34
|
-
id:
|
|
35
|
-
name:
|
|
19
|
+
id: "__ds_tree_root",
|
|
20
|
+
name: "__root",
|
|
36
21
|
isExpanded: true,
|
|
37
22
|
children: unfrozenData
|
|
38
23
|
});
|
|
39
|
-
}, [unfrozenData]);
|
|
40
|
-
// used for expand functionality
|
|
41
|
-
|
|
24
|
+
}, [unfrozenData]);
|
|
42
25
|
const [rerenderItems, setRerenderItems] = useState({});
|
|
43
26
|
const triggerTreeRerender = useCallback(() => {
|
|
44
27
|
setRerenderItems({});
|
|
45
|
-
}, []);
|
|
46
|
-
|
|
28
|
+
}, []);
|
|
47
29
|
const [treeRoot, setTreeRoot] = useState(tree.parse(treeData));
|
|
48
30
|
useEffect(() => {
|
|
49
31
|
setTreeRoot(tree.parse(treeData));
|
|
50
32
|
}, [treeData, rerenderItems, tree]);
|
|
51
33
|
const [visibleItems, setVisibleItems] = useState([]);
|
|
52
|
-
const {
|
|
53
|
-
searchQuery,
|
|
54
|
-
highlightOnlyQuery,
|
|
55
|
-
onVisibleItemsChange,
|
|
56
|
-
selection,
|
|
57
|
-
expanded,
|
|
58
|
-
onExpandChange
|
|
59
|
-
} = props;
|
|
34
|
+
const { searchQuery, highlightOnlyQuery, onVisibleItemsChange, selection, expanded, onExpandChange } = props;
|
|
60
35
|
const updateUserExpandedState = useCallback(() => {
|
|
61
36
|
updateExpandedState(treeRoot, onExpandChange);
|
|
62
|
-
}, [treeRoot, onExpandChange]);
|
|
63
|
-
// not the best of the patterns, but it works
|
|
64
|
-
// this is where we convert "SimpleItems" to "Items"
|
|
65
|
-
// this was done to avoid breaking changes back in v1
|
|
66
|
-
|
|
37
|
+
}, [treeRoot, onExpandChange]);
|
|
67
38
|
useEffect(() => {
|
|
68
39
|
const parsedVisibleItems = [];
|
|
69
40
|
const newExpandedHashMap = {};
|
|
70
|
-
treeRoot.walk(node => {
|
|
71
|
-
const shouldContinueWalking = true;
|
|
72
|
-
|
|
41
|
+
treeRoot.walk((node) => {
|
|
42
|
+
const shouldContinueWalking = true;
|
|
73
43
|
enrichNodeModelInPlace(node, searchQuery, selection, expanded);
|
|
74
|
-
if (node.model.id && node.model.isGroup && node.model.isExpanded)
|
|
44
|
+
if (node.model.id && node.model.isGroup && node.model.isExpanded)
|
|
45
|
+
newExpandedHashMap[node.model.id] = true;
|
|
75
46
|
return shouldContinueWalking;
|
|
76
47
|
});
|
|
77
|
-
walkVisibles(treeRoot, node => {
|
|
78
|
-
parsedVisibleItems.push(
|
|
79
|
-
node
|
|
80
|
-
}));
|
|
48
|
+
walkVisibles(treeRoot, (node) => {
|
|
49
|
+
parsedVisibleItems.push({ ...node.model, node });
|
|
81
50
|
}, true, highlightOnlyQuery);
|
|
82
51
|
setVisibleItems(parsedVisibleItems);
|
|
83
52
|
onVisibleItemsChange(parsedVisibleItems);
|
|
84
|
-
setExpandedGroups(newExpandedHashMap);
|
|
85
|
-
}, [
|
|
53
|
+
setExpandedGroups(newExpandedHashMap);
|
|
54
|
+
}, [
|
|
55
|
+
treeRoot,
|
|
56
|
+
rerenderItems,
|
|
57
|
+
searchQuery,
|
|
58
|
+
highlightOnlyQuery,
|
|
59
|
+
selection,
|
|
60
|
+
expanded,
|
|
61
|
+
setExpandedGroups
|
|
86
62
|
]);
|
|
87
63
|
return {
|
|
88
64
|
visibleItems,
|
|
@@ -93,5 +69,7 @@ const useTree = (data, props, states) => {
|
|
|
93
69
|
updateUserExpandedState
|
|
94
70
|
};
|
|
95
71
|
};
|
|
96
|
-
|
|
97
|
-
|
|
72
|
+
export {
|
|
73
|
+
useTree
|
|
74
|
+
};
|
|
75
|
+
//# sourceMappingURL=useTree.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/useTree.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AACA;AACA;AAEA;AAGA;AAEO,MAAM,UAAU,CACrB,MACA,OACA,WAGG;AACH,QAAM,EAAE,sBAAsB;AAC9B,QAAM,eAAe,QAAQ,MAAM,UAAU,OAAO,CAAC;AAKrD,QAAM,OAAO,QAAQ,MAAM,IAAI,aAAa;AAC5C,QAAM,CAAC,UAAU,eAAe,SAAS;AAAA,IACvC,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,UAAU;AAAA;AAGZ,YAAU,MAAM;AACd,gBAAY;AAAA,MACV,IAAI;AAAA,MACJ,MAAM;AAAA,MACN,YAAY;AAAA,MACZ,UAAU;AAAA;AAAA,KAEX,CAAC;AAIJ,QAAM,CAAC,eAAe,oBAAoB,SAAS;AACnD,QAAM,sBAAsB,YAAY,MAAM;AAC5C,qBAAiB;AAAA,KAChB;AAGH,QAAM,CAAC,UAAU,eAAe,SAAS,KAAK,MAAM;AACpD,YAAU,MAAM;AACd,gBAAY,KAAK,MAAM;AAAA,KACtB,CAAC,UAAU,eAAe;AAE7B,QAAM,CAAC,cAAc,mBAAmB,SAA6B;AAErE,QAAM,EAAE,aAAa,oBAAoB,sBAAsB,WAAW,UAAU,mBAAmB;AAEvG,QAAM,0BAA0B,YAAY,MAAM;AAChD,wBAAoB,UAAU;AAAA,KAC7B,CAAC,UAAU;AAKd,YAAU,MAAM;AACd,UAAM,qBAAyC;AAC/C,UAAM,qBAAgD;AACtD,aAAS,KAAK,CAAC,SAAS;AACtB,YAAM,wBAAwB;AAC9B,6BAAuB,MAAM,aAAa,WAAW;AACrD,UAAI,KAAK,MAAM,MAAM,KAAK,MAAM,WAAW,KAAK,MAAM;AAAY,2BAAmB,KAAK,MAAM,MAAM;AACtG,aAAO;AAAA;AAGT,iBACE,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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-treeview",
|
|
3
|
-
"version": "2.2.0-alpha.
|
|
3
|
+
"version": "2.2.0-alpha.5",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Tree View",
|
|
6
6
|
"module": "./esm/index.js",
|
|
@@ -211,15 +211,15 @@
|
|
|
211
211
|
"generateSubmodules": true
|
|
212
212
|
},
|
|
213
213
|
"dependencies": {
|
|
214
|
-
"@elliemae/ds-button": "2.2.0-alpha.
|
|
215
|
-
"@elliemae/ds-circular-progress-indicator": "2.2.0-alpha.
|
|
216
|
-
"@elliemae/ds-classnames": "2.2.0-alpha.
|
|
217
|
-
"@elliemae/ds-form": "2.2.0-alpha.
|
|
218
|
-
"@elliemae/ds-icons": "2.2.0-alpha.
|
|
219
|
-
"@elliemae/ds-props-helpers": "2.2.0-alpha.
|
|
220
|
-
"@elliemae/ds-shared": "2.2.0-alpha.
|
|
221
|
-
"@elliemae/ds-truncated-tooltip-text": "2.2.0-alpha.
|
|
222
|
-
"@elliemae/ds-utilities": "2.2.0-alpha.
|
|
214
|
+
"@elliemae/ds-button": "2.2.0-alpha.5",
|
|
215
|
+
"@elliemae/ds-circular-progress-indicator": "2.2.0-alpha.5",
|
|
216
|
+
"@elliemae/ds-classnames": "2.2.0-alpha.5",
|
|
217
|
+
"@elliemae/ds-form": "2.2.0-alpha.5",
|
|
218
|
+
"@elliemae/ds-icons": "2.2.0-alpha.5",
|
|
219
|
+
"@elliemae/ds-props-helpers": "2.2.0-alpha.5",
|
|
220
|
+
"@elliemae/ds-shared": "2.2.0-alpha.5",
|
|
221
|
+
"@elliemae/ds-truncated-tooltip-text": "2.2.0-alpha.5",
|
|
222
|
+
"@elliemae/ds-utilities": "2.2.0-alpha.5",
|
|
223
223
|
"@elliemae/react-sortable-hoc": "^1.0.0",
|
|
224
224
|
"react-desc": "~4.1.3",
|
|
225
225
|
"react-highlight-words": "~0.17.0",
|