@fluentui/react-tree 9.0.0-beta.6 → 9.0.0-beta.8
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.json +16 -1
- package/CHANGELOG.md +11 -2
- package/dist/index.d.ts +42 -23
- package/lib/components/Tree/Tree.types.js.map +1 -1
- package/lib/components/TreeItem/TreeItem.js +10 -1
- package/lib/components/TreeItem/TreeItem.js.map +1 -1
- package/lib/components/TreeItem/TreeItem.types.js.map +1 -1
- package/lib/components/TreeItemLayout/TreeItemLayout.js +3 -1
- package/lib/components/TreeItemLayout/TreeItemLayout.js.map +1 -1
- package/lib/components/TreeItemPersonaLayout/TreeItemPersonaLayout.js +3 -1
- package/lib/components/TreeItemPersonaLayout/TreeItemPersonaLayout.js.map +1 -1
- package/lib/contexts/treeContext.js.map +1 -1
- package/lib/hooks/useFlatTree.js +42 -20
- package/lib/hooks/useFlatTree.js.map +1 -1
- package/lib/hooks/useFlatTreeNavigation.js +7 -7
- package/lib/hooks/useFlatTreeNavigation.js.map +1 -1
- package/lib/hooks/useOpenItemsState.js.map +1 -1
- package/lib/index.js.map +1 -1
- package/lib/utils/{createUnfilteredFlatTree.js → createFlatTreeItems.js} +47 -14
- package/lib/utils/createFlatTreeItems.js.map +1 -0
- package/lib-commonjs/components/TreeItem/TreeItem.js.map +1 -1
- package/lib-commonjs/components/TreeItemLayout/TreeItemLayout.js.map +1 -1
- package/lib-commonjs/components/TreeItemPersonaLayout/TreeItemPersonaLayout.js.map +1 -1
- package/lib-commonjs/hooks/useFlatTree.js +51 -23
- package/lib-commonjs/hooks/useFlatTree.js.map +1 -1
- package/lib-commonjs/hooks/useFlatTreeNavigation.js +6 -6
- package/lib-commonjs/hooks/useFlatTreeNavigation.js.map +1 -1
- package/lib-commonjs/utils/{createUnfilteredFlatTree.js → createFlatTreeItems.js} +50 -17
- package/lib-commonjs/utils/createFlatTreeItems.js.map +1 -0
- package/package.json +6 -6
- package/lib/utils/createUnfilteredFlatTree.js.map +0 -1
- package/lib/utils/createVisibleFlatTree.js +0 -83
- package/lib/utils/createVisibleFlatTree.js.map +0 -1
- package/lib-commonjs/utils/createUnfilteredFlatTree.js.map +0 -1
- package/lib-commonjs/utils/createVisibleFlatTree.js +0 -86
- package/lib-commonjs/utils/createVisibleFlatTree.js.map +0 -1
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* creates a list of flat tree items
|
|
3
3
|
* and provides a map to access each item by id
|
|
4
|
-
*/export function
|
|
5
|
-
const root =
|
|
6
|
-
const itemsPerId = new Map([[
|
|
4
|
+
*/export function createFlatTreeItems(flatTreeItemProps) {
|
|
5
|
+
const root = createFlatTreeRootItem();
|
|
6
|
+
const itemsPerId = new Map([[flatTreeRootId, root]]);
|
|
7
7
|
const items = [];
|
|
8
8
|
for (let index = 0; index < flatTreeItemProps.length; index++) {
|
|
9
9
|
const {
|
|
10
|
-
parentId =
|
|
10
|
+
parentId = flatTreeRootId,
|
|
11
11
|
...treeItemProps
|
|
12
12
|
} = flatTreeItemProps[index];
|
|
13
13
|
const nextItemProps = flatTreeItemProps[index + 1];
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
if (!currentParent) {
|
|
16
16
|
if (process.env.NODE_ENV === 'development') {
|
|
17
17
|
// eslint-disable-next-line no-console
|
|
18
|
-
console.error(`useFlatTree: item ${flatTreeItemProps[index].id}
|
|
18
|
+
console.error(`useFlatTree: item ${flatTreeItemProps[index].id} is wrongly positioned, did you properly ordered provided item props? make sure provided items are organized`);
|
|
19
19
|
}
|
|
20
20
|
break;
|
|
21
21
|
}
|
|
@@ -41,21 +41,24 @@
|
|
|
41
41
|
items.push(flatTreeItem);
|
|
42
42
|
}
|
|
43
43
|
return {
|
|
44
|
-
|
|
45
|
-
|
|
44
|
+
root,
|
|
45
|
+
size: items.length,
|
|
46
|
+
getByIndex: index => items[index],
|
|
47
|
+
get: id => itemsPerId.get(id),
|
|
48
|
+
set: (id, value) => itemsPerId.set(id, value)
|
|
46
49
|
};
|
|
47
50
|
}
|
|
48
|
-
export const
|
|
49
|
-
function
|
|
51
|
+
export const flatTreeRootId = '__fuiFlatTreeRoot';
|
|
52
|
+
function createFlatTreeRootItem() {
|
|
50
53
|
return {
|
|
51
|
-
id:
|
|
54
|
+
id: flatTreeRootId,
|
|
52
55
|
getTreeItemProps: () => {
|
|
53
|
-
if (process.env.NODE_ENV
|
|
56
|
+
if (process.env.NODE_ENV !== 'production') {
|
|
54
57
|
// eslint-disable-next-line no-console
|
|
55
58
|
console.error('useFlatTree: internal error, trying to access treeitem props from invalid root element');
|
|
56
59
|
}
|
|
57
60
|
return {
|
|
58
|
-
id:
|
|
61
|
+
id: flatTreeRootId,
|
|
59
62
|
'aria-setsize': -1,
|
|
60
63
|
'aria-level': -1,
|
|
61
64
|
'aria-posinset': -1,
|
|
@@ -64,7 +67,7 @@ function createRootFlatTreeItem() {
|
|
|
64
67
|
},
|
|
65
68
|
childrenSize: 0,
|
|
66
69
|
get index() {
|
|
67
|
-
if (process.env.NODE_ENV
|
|
70
|
+
if (process.env.NODE_ENV !== 'production') {
|
|
68
71
|
// eslint-disable-next-line no-console
|
|
69
72
|
console.error('useFlatTree: internal error, trying to access treeitem props from invalid root element');
|
|
70
73
|
}
|
|
@@ -73,4 +76,34 @@ function createRootFlatTreeItem() {
|
|
|
73
76
|
level: 0
|
|
74
77
|
};
|
|
75
78
|
}
|
|
76
|
-
|
|
79
|
+
// eslint-disable-next-line @typescript-eslint/naming-convention
|
|
80
|
+
export function* VisibleFlatTreeItemGenerator(openItems, flatTreeItems) {
|
|
81
|
+
for (let index = 0, visibleIndex = 0; index < flatTreeItems.size; index++) {
|
|
82
|
+
const item = flatTreeItems.getByIndex(index);
|
|
83
|
+
var _flatTreeItems_get;
|
|
84
|
+
const parent = item.parentId ? (_flatTreeItems_get = flatTreeItems.get(item.parentId)) !== null && _flatTreeItems_get !== void 0 ? _flatTreeItems_get : flatTreeItems.root : flatTreeItems.root;
|
|
85
|
+
if (isItemVisible(item, openItems, flatTreeItems)) {
|
|
86
|
+
item.index = visibleIndex++;
|
|
87
|
+
yield item;
|
|
88
|
+
} else {
|
|
89
|
+
index += parent.childrenSize - 1 + item.childrenSize;
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
function isItemVisible(item, openItems, flatTreeItems) {
|
|
94
|
+
if (item.level === 1) {
|
|
95
|
+
return true;
|
|
96
|
+
}
|
|
97
|
+
while (item.parentId && item.parentId !== flatTreeItems.root.id) {
|
|
98
|
+
if (!openItems.has(item.parentId)) {
|
|
99
|
+
return false;
|
|
100
|
+
}
|
|
101
|
+
const parent = flatTreeItems.get(item.parentId);
|
|
102
|
+
if (!parent) {
|
|
103
|
+
return false;
|
|
104
|
+
}
|
|
105
|
+
item = parent;
|
|
106
|
+
}
|
|
107
|
+
return true;
|
|
108
|
+
}
|
|
109
|
+
//# sourceMappingURL=createFlatTreeItems.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["createFlatTreeItems","flatTreeItemProps","root","createFlatTreeRootItem","itemsPerId","Map","flatTreeRootId","items","index","length","parentId","treeItemProps","nextItemProps","currentParent","get","process","env","NODE_ENV","console","error","id","isLeaf","_currentParent_level","currentLevel","level","currentChildrenSize","childrenSize","flatTreeItem","getTreeItemProps","leaf","set","push","size","getByIndex","value","VisibleFlatTreeItemGenerator","openItems","flatTreeItems","visibleIndex","item","_flatTreeItems_get","parent","isItemVisible","has"],"sources":["../../src/utils/createFlatTreeItems.ts"],"sourcesContent":["import type { TreeItemId } from '../TreeItem';\nimport type { ImmutableSet } from './ImmutableSet';\nimport type { FlatTreeItem, FlatTreeItemProps, MutableFlatTreeItem } from '../hooks/useFlatTree';\n\n/**\n * @internal\n */\nexport type FlatTreeItems = {\n size: number;\n root: FlatTreeItem;\n get(id: string): FlatTreeItem | undefined;\n set(id: string, value: FlatTreeItem): void;\n getByIndex(index: number): FlatTreeItem;\n};\n\n/**\n * creates a list of flat tree items\n * and provides a map to access each item by id\n */\nexport function createFlatTreeItems(flatTreeItemProps: FlatTreeItemProps[]): FlatTreeItems {\n const root = createFlatTreeRootItem();\n const itemsPerId = new Map<string, MutableFlatTreeItem>([[flatTreeRootId, root]]);\n const items: MutableFlatTreeItem[] = [];\n\n for (let index = 0; index < flatTreeItemProps.length; index++) {\n const { parentId = flatTreeRootId, ...treeItemProps } = flatTreeItemProps[index];\n\n const nextItemProps: FlatTreeItemProps | undefined = flatTreeItemProps[index + 1];\n const currentParent = itemsPerId.get(parentId);\n if (!currentParent) {\n if (process.env.NODE_ENV === 'development') {\n // eslint-disable-next-line no-console\n console.error(\n `useFlatTree: item ${flatTreeItemProps[index].id} is wrongly positioned, did you properly ordered provided item props? make sure provided items are organized`,\n );\n }\n break;\n }\n const isLeaf = nextItemProps?.parentId !== treeItemProps.id;\n const currentLevel = (currentParent.level ?? 0) + 1;\n const currentChildrenSize = ++currentParent.childrenSize;\n\n const flatTreeItem: FlatTreeItem = {\n id: treeItemProps.id,\n getTreeItemProps: () => ({\n ...treeItemProps,\n 'aria-level': currentLevel,\n 'aria-posinset': currentChildrenSize,\n 'aria-setsize': currentParent.childrenSize,\n leaf: isLeaf,\n }),\n level: currentLevel,\n parentId,\n childrenSize: 0,\n index: -1,\n };\n itemsPerId.set(flatTreeItem.id, flatTreeItem);\n items.push(flatTreeItem);\n }\n\n return {\n root,\n size: items.length,\n getByIndex: index => items[index],\n get: id => itemsPerId.get(id),\n set: (id, value) => itemsPerId.set(id, value),\n };\n}\n\nexport const flatTreeRootId = '__fuiFlatTreeRoot';\n\nfunction createFlatTreeRootItem(): FlatTreeItem {\n return {\n id: flatTreeRootId,\n getTreeItemProps: () => {\n if (process.env.NODE_ENV !== 'production') {\n // eslint-disable-next-line no-console\n console.error('useFlatTree: internal error, trying to access treeitem props from invalid root element');\n }\n return { id: flatTreeRootId, 'aria-setsize': -1, 'aria-level': -1, 'aria-posinset': -1, leaf: true };\n },\n childrenSize: 0,\n get index() {\n if (process.env.NODE_ENV !== 'production') {\n // eslint-disable-next-line no-console\n console.error('useFlatTree: internal error, trying to access treeitem props from invalid root element');\n }\n return -1;\n },\n level: 0,\n };\n}\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport function* VisibleFlatTreeItemGenerator(openItems: ImmutableSet<TreeItemId>, flatTreeItems: FlatTreeItems) {\n for (let index = 0, visibleIndex = 0; index < flatTreeItems.size; index++) {\n const item: MutableFlatTreeItem = flatTreeItems.getByIndex(index);\n const parent = item.parentId ? flatTreeItems.get(item.parentId) ?? flatTreeItems.root : flatTreeItems.root;\n if (isItemVisible(item, openItems, flatTreeItems)) {\n item.index = visibleIndex++;\n yield item;\n } else {\n index += parent.childrenSize - 1 + item.childrenSize;\n }\n }\n}\n\nfunction isItemVisible(item: FlatTreeItem, openItems: ImmutableSet<TreeItemId>, flatTreeItems: FlatTreeItems) {\n if (item.level === 1) {\n return true;\n }\n while (item.parentId && item.parentId !== flatTreeItems.root.id) {\n if (!openItems.has(item.parentId)) {\n return false;\n }\n const parent = flatTreeItems.get(item.parentId);\n if (!parent) {\n return false;\n }\n item = parent;\n }\n return true;\n}\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../lib/components/TreeItem/TreeItem.js"],"sourcesContent":["import * as React from 'react';\nimport { useTreeItem_unstable } from './useTreeItem';\nimport { renderTreeItem_unstable } from './renderTreeItem';\nimport { useTreeItemStyles_unstable } from './useTreeItemStyles';\nimport { useTreeItemContextValues_unstable } from './useTreeItemContextValues';\n/**\n * TreeItem component
|
|
1
|
+
{"version":3,"sources":["../../../lib/components/TreeItem/TreeItem.js"],"sourcesContent":["import * as React from 'react';\nimport { useTreeItem_unstable } from './useTreeItem';\nimport { renderTreeItem_unstable } from './renderTreeItem';\nimport { useTreeItemStyles_unstable } from './useTreeItemStyles';\nimport { useTreeItemContextValues_unstable } from './useTreeItemContextValues';\n/**\n * The `TreeItem` component represents a single item in a tree.\n * It expects a certain order of children to work properly: the first child should be the node itself,\n * and the second child should be a nested subtree in the form of another Tree component or a standalone TreeItem.\n * This order follows the same order as document traversal for the TreeWalker API in JavaScript:\n * https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker.\n * The content and layout of a TreeItem can be defined using the TreeItemLayout or TreeItemPersonaLayout component,\n * which should be used as a direct child of TreeItem.\n *\n * When a TreeItem has nsted child subtree, an expand/collapse control is displayed,\n * allowing the user to show or hide the children.\n */\nexport const TreeItem = /*#__PURE__*/React.forwardRef((props, ref) => {\n const state = useTreeItem_unstable(props, ref);\n useTreeItemStyles_unstable(state);\n const contextValues = useTreeItemContextValues_unstable(state);\n return renderTreeItem_unstable(state, contextValues);\n});\nTreeItem.displayName = 'TreeItem';\n//# sourceMappingURL=TreeItem.js.map"],"names":["TreeItem","React","forwardRef","props","ref","state","useTreeItem_unstable","useTreeItemStyles_unstable","contextValues","useTreeItemContextValues_unstable","renderTreeItem_unstable","displayName"],"mappings":";;;;+BAiBaA;;aAAAA;;;6DAjBU;6BACc;gCACG;mCACG;0CACO;AAa3C,MAAMA,WAAW,WAAW,GAAEC,OAAMC,UAAU,CAAC,CAACC,OAAOC,MAAQ;IACpE,MAAMC,QAAQC,IAAAA,iCAAoB,EAACH,OAAOC;IAC1CG,IAAAA,6CAA0B,EAACF;IAC3B,MAAMG,gBAAgBC,IAAAA,2DAAiC,EAACJ;IACxD,OAAOK,IAAAA,uCAAuB,EAACL,OAAOG;AACxC;AACAR,SAASW,WAAW,GAAG,YACvB,oCAAoC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../lib/components/TreeItemLayout/TreeItemLayout.js"],"sourcesContent":["import * as React from 'react';\nimport { useTreeItemLayout_unstable } from './useTreeItemLayout';\nimport { renderTreeItemLayout_unstable } from './renderTreeItemLayout';\nimport { useTreeItemLayoutStyles_unstable } from './useTreeItemLayoutStyles';\n/**\n * TreeItemLayout component
|
|
1
|
+
{"version":3,"sources":["../../../lib/components/TreeItemLayout/TreeItemLayout.js"],"sourcesContent":["import * as React from 'react';\nimport { useTreeItemLayout_unstable } from './useTreeItemLayout';\nimport { renderTreeItemLayout_unstable } from './renderTreeItemLayout';\nimport { useTreeItemLayoutStyles_unstable } from './useTreeItemLayoutStyles';\n/**\n * The `TreeItemLayout` component is used as a child of `TreeItem` to define the content and layout of a tree item.\n * It provides a consistent visual structure for tree items in a `Tree` component.\n * This component should only be used as a direct child of `TreeItem`.\n */\nexport const TreeItemLayout = /*#__PURE__*/React.forwardRef((props, ref) => {\n const state = useTreeItemLayout_unstable(props, ref);\n useTreeItemLayoutStyles_unstable(state);\n return renderTreeItemLayout_unstable(state);\n});\nTreeItemLayout.displayName = 'TreeItemLayout';\n//# sourceMappingURL=TreeItemLayout.js.map"],"names":["TreeItemLayout","React","forwardRef","props","ref","state","useTreeItemLayout_unstable","useTreeItemLayoutStyles_unstable","renderTreeItemLayout_unstable","displayName"],"mappings":";;;;+BASaA;;aAAAA;;;6DATU;mCACoB;sCACG;yCACG;AAM1C,MAAMA,iBAAiB,WAAW,GAAEC,OAAMC,UAAU,CAAC,CAACC,OAAOC,MAAQ;IAC1E,MAAMC,QAAQC,IAAAA,6CAA0B,EAACH,OAAOC;IAChDG,IAAAA,yDAAgC,EAACF;IACjC,OAAOG,IAAAA,mDAA6B,EAACH;AACvC;AACAL,eAAeS,WAAW,GAAG,kBAC7B,0CAA0C"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../lib/components/TreeItemPersonaLayout/TreeItemPersonaLayout.js"],"sourcesContent":["import * as React from 'react';\nimport { useTreeItemPersonaLayout_unstable } from './useTreeItemPersonaLayout';\nimport { renderTreeItemPersonaLayout_unstable } from './renderTreeItemPersonaLayout';\nimport { useTreeItemPersonaLayoutStyles_unstable } from './useTreeItemPersonaLayoutStyles';\nimport { useTreeItemPersonaLayoutContextValues_unstable } from './useTreeItemPersonaLayoutContextValues';\n/**\n * TreeItemPersonaLayout component
|
|
1
|
+
{"version":3,"sources":["../../../lib/components/TreeItemPersonaLayout/TreeItemPersonaLayout.js"],"sourcesContent":["import * as React from 'react';\nimport { useTreeItemPersonaLayout_unstable } from './useTreeItemPersonaLayout';\nimport { renderTreeItemPersonaLayout_unstable } from './renderTreeItemPersonaLayout';\nimport { useTreeItemPersonaLayoutStyles_unstable } from './useTreeItemPersonaLayoutStyles';\nimport { useTreeItemPersonaLayoutContextValues_unstable } from './useTreeItemPersonaLayoutContextValues';\n/**\n * The `TreeItemPersonaLayout` component is used as a child of `TreeItem` to display a `TreeItem` with a media (typically an avatar) and a description.\n * It provides a more visually appealing representation of a `TreeItem` and is typically used to display a list of people or topics.\n * This component should only be used as a direct child of `TreeItem`.\n */\nexport const TreeItemPersonaLayout = /*#__PURE__*/React.forwardRef((props, ref) => {\n const state = useTreeItemPersonaLayout_unstable(props, ref);\n useTreeItemPersonaLayoutStyles_unstable(state);\n const contextValues = useTreeItemPersonaLayoutContextValues_unstable(state);\n return renderTreeItemPersonaLayout_unstable(state, contextValues);\n});\nTreeItemPersonaLayout.displayName = 'TreeItemPersonaLayout';\n//# sourceMappingURL=TreeItemPersonaLayout.js.map"],"names":["TreeItemPersonaLayout","React","forwardRef","props","ref","state","useTreeItemPersonaLayout_unstable","useTreeItemPersonaLayoutStyles_unstable","contextValues","useTreeItemPersonaLayoutContextValues_unstable","renderTreeItemPersonaLayout_unstable","displayName"],"mappings":";;;;+BAUaA;;aAAAA;;;6DAVU;0CAC2B;6CACG;gDACG;uDACO;AAMxD,MAAMA,wBAAwB,WAAW,GAAEC,OAAMC,UAAU,CAAC,CAACC,OAAOC,MAAQ;IACjF,MAAMC,QAAQC,IAAAA,2DAAiC,EAACH,OAAOC;IACvDG,IAAAA,uEAAuC,EAACF;IACxC,MAAMG,gBAAgBC,IAAAA,qFAA8C,EAACJ;IACrE,OAAOK,IAAAA,iEAAoC,EAACL,OAAOG;AACrD;AACAR,sBAAsBW,WAAW,GAAG,yBACpC,iDAAiD"}
|
|
@@ -9,20 +9,16 @@ Object.defineProperty(exports, "useFlatTree_unstable", {
|
|
|
9
9
|
const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
|
|
10
10
|
const _reactUtilities = require("@fluentui/react-utilities");
|
|
11
11
|
const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
|
|
12
|
-
const
|
|
13
|
-
const
|
|
12
|
+
const _createFlatTreeItems = require("../utils/createFlatTreeItems");
|
|
13
|
+
const _tokens = require("../utils/tokens");
|
|
14
14
|
const _useFlatTreeNavigation = require("./useFlatTreeNavigation");
|
|
15
15
|
const _useOpenItemsState = require("./useOpenItemsState");
|
|
16
|
-
function useFlatTree_unstable(
|
|
16
|
+
function useFlatTree_unstable(flatTreeItemProps, options = {}) {
|
|
17
17
|
const [openItems, updateOpenItems] = (0, _useOpenItemsState.useOpenItemsState)(options);
|
|
18
|
-
const
|
|
19
|
-
|
|
20
|
-
]);
|
|
21
|
-
const [navigate, navigationRef] = (0, _useFlatTreeNavigation.useFlatTreeNavigation)(unfilteredFlatTree);
|
|
22
|
-
const visibleFlatTree = _react.useMemo(()=>(0, _createVisibleFlatTree.createVisibleFlatTree)(unfilteredFlatTree, openItems), [
|
|
23
|
-
unfilteredFlatTree,
|
|
24
|
-
openItems
|
|
18
|
+
const flatTreeItems = _react.useMemo(()=>(0, _createFlatTreeItems.createFlatTreeItems)(flatTreeItemProps), [
|
|
19
|
+
flatTreeItemProps
|
|
25
20
|
]);
|
|
21
|
+
const [navigate, navigationRef] = (0, _useFlatTreeNavigation.useFlatTreeNavigation)(flatTreeItems);
|
|
26
22
|
const handleOpenChange = (0, _reactUtilities.useEventCallback)((event, data)=>{
|
|
27
23
|
event.preventDefault();
|
|
28
24
|
updateOpenItems(data);
|
|
@@ -31,20 +27,52 @@ function useFlatTree_unstable(items, options = {}) {
|
|
|
31
27
|
event.preventDefault();
|
|
32
28
|
navigate(data);
|
|
33
29
|
});
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
30
|
+
const getNextNavigableItem = (0, _reactUtilities.useEventCallback)((visibleItems, data)=>{
|
|
31
|
+
const item = flatTreeItems.get(data.target.id);
|
|
32
|
+
if (item) {
|
|
33
|
+
switch(data.type){
|
|
34
|
+
case _tokens.treeDataTypes.typeAhead:
|
|
35
|
+
return item;
|
|
36
|
+
case _tokens.treeDataTypes.arrowLeft:
|
|
37
|
+
return flatTreeItems.get(item.parentId);
|
|
38
|
+
case _tokens.treeDataTypes.arrowRight:
|
|
39
|
+
return visibleItems[item.index + 1];
|
|
40
|
+
case _tokens.treeDataTypes.end:
|
|
41
|
+
return visibleItems[visibleItems.length - 1];
|
|
42
|
+
case _tokens.treeDataTypes.home:
|
|
43
|
+
return visibleItems[0];
|
|
44
|
+
case _tokens.treeDataTypes.arrowDown:
|
|
45
|
+
return visibleItems[item.index + 1];
|
|
46
|
+
case _tokens.treeDataTypes.arrowUp:
|
|
47
|
+
return visibleItems[item.index - 1];
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
});
|
|
51
|
+
const getTreeProps = _react.useCallback(()=>({
|
|
52
|
+
ref: navigationRef,
|
|
53
|
+
openItems,
|
|
54
|
+
onOpenChange: handleOpenChange,
|
|
55
|
+
// eslint-disable-next-line @typescript-eslint/naming-convention
|
|
56
|
+
onNavigation_unstable: handleNavigation
|
|
57
|
+
}), // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
58
|
+
[
|
|
59
|
+
openItems
|
|
60
|
+
]);
|
|
61
|
+
const items = _react.useCallback(()=>(0, _createFlatTreeItems.VisibleFlatTreeItemGenerator)(openItems, flatTreeItems), [
|
|
62
|
+
openItems,
|
|
63
|
+
flatTreeItems
|
|
64
|
+
]);
|
|
65
|
+
return _react.useMemo(()=>({
|
|
66
|
+
navigate,
|
|
67
|
+
getTreeProps,
|
|
68
|
+
getNextNavigableItem,
|
|
69
|
+
items
|
|
70
|
+
}), [
|
|
44
71
|
navigate,
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
72
|
+
getTreeProps,
|
|
73
|
+
getNextNavigableItem,
|
|
74
|
+
items
|
|
75
|
+
]);
|
|
48
76
|
} //# sourceMappingURL=useFlatTree.js.map
|
|
49
77
|
|
|
50
78
|
//# sourceMappingURL=useFlatTree.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../lib/hooks/useFlatTree.js"],"sourcesContent":["import { useEventCallback } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport {
|
|
1
|
+
{"version":3,"sources":["../../lib/hooks/useFlatTree.js"],"sourcesContent":["import { useEventCallback } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { createFlatTreeItems, VisibleFlatTreeItemGenerator } from '../utils/createFlatTreeItems';\nimport { treeDataTypes } from '../utils/tokens';\nimport { useFlatTreeNavigation } from './useFlatTreeNavigation';\nimport { useOpenItemsState } from './useOpenItemsState';\n/**\n * this hook provides FlatTree API to manage all required mechanisms to convert a list of items into renderable TreeItems\n * in multiple scenarios including virtualization.\n *\n * !!A flat tree is an unofficial spec for tree!!\n *\n * It should be used on cases where more complex interactions with a Tree is required.\n * On simple scenarios it is advised to simply use a nested structure instead.\n *\n * @param flatTreeItemProps - a list of tree items\n * @param options - in case control over the internal openItems is required\n */\nexport function useFlatTree_unstable(flatTreeItemProps, options = {}) {\n const [openItems, updateOpenItems] = useOpenItemsState(options);\n const flatTreeItems = React.useMemo(() => createFlatTreeItems(flatTreeItemProps), [flatTreeItemProps]);\n const [navigate, navigationRef] = useFlatTreeNavigation(flatTreeItems);\n const handleOpenChange = useEventCallback((event, data) => {\n event.preventDefault();\n updateOpenItems(data);\n });\n const handleNavigation = useEventCallback((event, data) => {\n event.preventDefault();\n navigate(data);\n });\n const getNextNavigableItem = useEventCallback((visibleItems, data) => {\n const item = flatTreeItems.get(data.target.id);\n if (item) {\n switch (data.type) {\n case treeDataTypes.typeAhead:\n return item;\n case treeDataTypes.arrowLeft:\n return flatTreeItems.get(item.parentId);\n case treeDataTypes.arrowRight:\n return visibleItems[item.index + 1];\n case treeDataTypes.end:\n return visibleItems[visibleItems.length - 1];\n case treeDataTypes.home:\n return visibleItems[0];\n case treeDataTypes.arrowDown:\n return visibleItems[item.index + 1];\n case treeDataTypes.arrowUp:\n return visibleItems[item.index - 1];\n }\n }\n });\n const getTreeProps = React.useCallback(() => ({\n ref: navigationRef,\n openItems,\n onOpenChange: handleOpenChange,\n // eslint-disable-next-line @typescript-eslint/naming-convention\n onNavigation_unstable: handleNavigation\n }),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [openItems]);\n const items = React.useCallback(() => VisibleFlatTreeItemGenerator(openItems, flatTreeItems), [openItems, flatTreeItems]);\n return React.useMemo(() => ({\n navigate,\n getTreeProps,\n getNextNavigableItem,\n items\n }), [navigate, getTreeProps, getNextNavigableItem, items]);\n}\n//# sourceMappingURL=useFlatTree.js.map"],"names":["useFlatTree_unstable","flatTreeItemProps","options","openItems","updateOpenItems","useOpenItemsState","flatTreeItems","React","useMemo","createFlatTreeItems","navigate","navigationRef","useFlatTreeNavigation","handleOpenChange","useEventCallback","event","data","preventDefault","handleNavigation","getNextNavigableItem","visibleItems","item","get","target","id","type","treeDataTypes","typeAhead","arrowLeft","parentId","arrowRight","index","end","length","home","arrowDown","arrowUp","getTreeProps","useCallback","ref","onOpenChange","onNavigation_unstable","items","VisibleFlatTreeItemGenerator"],"mappings":";;;;+BAkBgBA;;aAAAA;;;gCAlBiB;6DACV;qCAC2C;wBACpC;uCACQ;mCACJ;AAa3B,SAASA,qBAAqBC,iBAAiB,EAAEC,UAAU,CAAC,CAAC,EAAE;IACpE,MAAM,CAACC,WAAWC,gBAAgB,GAAGC,IAAAA,oCAAiB,EAACH;IACvD,MAAMI,gBAAgBC,OAAMC,OAAO,CAAC,IAAMC,IAAAA,wCAAmB,EAACR,oBAAoB;QAACA;KAAkB;IACrG,MAAM,CAACS,UAAUC,cAAc,GAAGC,IAAAA,4CAAqB,EAACN;IACxD,MAAMO,mBAAmBC,IAAAA,gCAAgB,EAAC,CAACC,OAAOC,OAAS;QACzDD,MAAME,cAAc;QACpBb,gBAAgBY;IAClB;IACA,MAAME,mBAAmBJ,IAAAA,gCAAgB,EAAC,CAACC,OAAOC,OAAS;QACzDD,MAAME,cAAc;QACpBP,SAASM;IACX;IACA,MAAMG,uBAAuBL,IAAAA,gCAAgB,EAAC,CAACM,cAAcJ,OAAS;QACpE,MAAMK,OAAOf,cAAcgB,GAAG,CAACN,KAAKO,MAAM,CAACC,EAAE;QAC7C,IAAIH,MAAM;YACR,OAAQL,KAAKS,IAAI;gBACf,KAAKC,qBAAa,CAACC,SAAS;oBAC1B,OAAON;gBACT,KAAKK,qBAAa,CAACE,SAAS;oBAC1B,OAAOtB,cAAcgB,GAAG,CAACD,KAAKQ,QAAQ;gBACxC,KAAKH,qBAAa,CAACI,UAAU;oBAC3B,OAAOV,YAAY,CAACC,KAAKU,KAAK,GAAG,EAAE;gBACrC,KAAKL,qBAAa,CAACM,GAAG;oBACpB,OAAOZ,YAAY,CAACA,aAAaa,MAAM,GAAG,EAAE;gBAC9C,KAAKP,qBAAa,CAACQ,IAAI;oBACrB,OAAOd,YAAY,CAAC,EAAE;gBACxB,KAAKM,qBAAa,CAACS,SAAS;oBAC1B,OAAOf,YAAY,CAACC,KAAKU,KAAK,GAAG,EAAE;gBACrC,KAAKL,qBAAa,CAACU,OAAO;oBACxB,OAAOhB,YAAY,CAACC,KAAKU,KAAK,GAAG,EAAE;YACvC;QACF,CAAC;IACH;IACA,MAAMM,eAAe9B,OAAM+B,WAAW,CAAC,IAAO,CAAA;YAC5CC,KAAK5B;YACLR;YACAqC,cAAc3B;YACd,gEAAgE;YAChE4B,uBAAuBvB;QACzB,CAAA,GACA,uDAAuD;IACvD;QAACf;KAAU;IACX,MAAMuC,QAAQnC,OAAM+B,WAAW,CAAC,IAAMK,IAAAA,iDAA4B,EAACxC,WAAWG,gBAAgB;QAACH;QAAWG;KAAc;IACxH,OAAOC,OAAMC,OAAO,CAAC,IAAO,CAAA;YAC1BE;YACA2B;YACAlB;YACAuB;QACF,CAAA,GAAI;QAAChC;QAAU2B;QAAclB;QAAsBuB;KAAM;AAC3D,EACA,uCAAuC"}
|
|
@@ -13,7 +13,7 @@ const _tokens = require("../utils/tokens");
|
|
|
13
13
|
const _treeItemFilter = require("../utils/treeItemFilter");
|
|
14
14
|
const _useHTMLElementWalker = require("./useHTMLElementWalker");
|
|
15
15
|
const _useRovingTabIndexes = require("./useRovingTabIndexes");
|
|
16
|
-
function useFlatTreeNavigation(
|
|
16
|
+
function useFlatTreeNavigation(flatTreeItems) {
|
|
17
17
|
const { targetDocument } = (0, _reactSharedContexts.useFluent_unstable)();
|
|
18
18
|
const [treeItemWalkerRef, treeItemWalkerRootRef] = (0, _useHTMLElementWalker.useHTMLElementWalkerRef)(_treeItemFilter.treeItemFilter);
|
|
19
19
|
const [{ rove }, rovingRootRef] = (0, _useRovingTabIndexes.useRovingTabIndex)(_treeItemFilter.treeItemFilter);
|
|
@@ -29,7 +29,7 @@ function useFlatTreeNavigation(flatTree) {
|
|
|
29
29
|
treeItemWalker.currentElement = data.target;
|
|
30
30
|
return (0, _nextTypeAheadElement.nextTypeAheadElement)(treeItemWalker, data.event.key);
|
|
31
31
|
case _tokens.treeDataTypes.arrowLeft:
|
|
32
|
-
return parentElement(
|
|
32
|
+
return parentElement(flatTreeItems, data.target, targetDocument);
|
|
33
33
|
case _tokens.treeDataTypes.arrowRight:
|
|
34
34
|
treeItemWalker.currentElement = data.target;
|
|
35
35
|
return firstChild(data.target, treeItemWalker);
|
|
@@ -47,12 +47,12 @@ function useFlatTreeNavigation(flatTree) {
|
|
|
47
47
|
return treeItemWalker.previousElement();
|
|
48
48
|
}
|
|
49
49
|
}
|
|
50
|
-
|
|
50
|
+
const navigate = (0, _reactUtilities.useEventCallback)((data)=>{
|
|
51
51
|
const nextElement = getNextElement(data);
|
|
52
52
|
if (nextElement) {
|
|
53
53
|
rove(nextElement);
|
|
54
54
|
}
|
|
55
|
-
}
|
|
55
|
+
});
|
|
56
56
|
return [
|
|
57
57
|
navigate,
|
|
58
58
|
(0, _reactUtilities.useMergedRefs)(treeItemWalkerRootRef, rovingRootRef)
|
|
@@ -71,8 +71,8 @@ function firstChild(target, treeWalker) {
|
|
|
71
71
|
}
|
|
72
72
|
return null;
|
|
73
73
|
}
|
|
74
|
-
function parentElement(
|
|
75
|
-
const flatTreeItem =
|
|
74
|
+
function parentElement(flatTreeItems, target, document) {
|
|
75
|
+
const flatTreeItem = flatTreeItems.get(target.id);
|
|
76
76
|
if (flatTreeItem && flatTreeItem.parentId) {
|
|
77
77
|
return document.getElementById(flatTreeItem.parentId);
|
|
78
78
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../lib/hooks/useFlatTreeNavigation.js"],"sourcesContent":["import { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport { useMergedRefs } from '@fluentui/react-utilities';\nimport { nextTypeAheadElement } from '../utils/nextTypeAheadElement';\nimport { treeDataTypes } from '../utils/tokens';\nimport { treeItemFilter } from '../utils/treeItemFilter';\nimport { useHTMLElementWalkerRef } from './useHTMLElementWalker';\nimport { useRovingTabIndex } from './useRovingTabIndexes';\nexport function useFlatTreeNavigation(
|
|
1
|
+
{"version":3,"sources":["../../lib/hooks/useFlatTreeNavigation.js"],"sourcesContent":["import { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { nextTypeAheadElement } from '../utils/nextTypeAheadElement';\nimport { treeDataTypes } from '../utils/tokens';\nimport { treeItemFilter } from '../utils/treeItemFilter';\nimport { useHTMLElementWalkerRef } from './useHTMLElementWalker';\nimport { useRovingTabIndex } from './useRovingTabIndexes';\nexport function useFlatTreeNavigation(flatTreeItems) {\n const {\n targetDocument\n } = useFluent_unstable();\n const [treeItemWalkerRef, treeItemWalkerRootRef] = useHTMLElementWalkerRef(treeItemFilter);\n const [{\n rove\n }, rovingRootRef] = useRovingTabIndex(treeItemFilter);\n function getNextElement(data) {\n if (!targetDocument || !treeItemWalkerRef.current) {\n return null;\n }\n const treeItemWalker = treeItemWalkerRef.current;\n switch (data.type) {\n case treeDataTypes.click:\n return data.target;\n case treeDataTypes.typeAhead:\n treeItemWalker.currentElement = data.target;\n return nextTypeAheadElement(treeItemWalker, data.event.key);\n case treeDataTypes.arrowLeft:\n return parentElement(flatTreeItems, data.target, targetDocument);\n case treeDataTypes.arrowRight:\n treeItemWalker.currentElement = data.target;\n return firstChild(data.target, treeItemWalker);\n case treeDataTypes.end:\n treeItemWalker.currentElement = treeItemWalker.root;\n return treeItemWalker.lastChild();\n case treeDataTypes.home:\n treeItemWalker.currentElement = treeItemWalker.root;\n return treeItemWalker.firstChild();\n case treeDataTypes.arrowDown:\n treeItemWalker.currentElement = data.target;\n return treeItemWalker.nextElement();\n case treeDataTypes.arrowUp:\n treeItemWalker.currentElement = data.target;\n return treeItemWalker.previousElement();\n }\n }\n const navigate = useEventCallback(data => {\n const nextElement = getNextElement(data);\n if (nextElement) {\n rove(nextElement);\n }\n });\n return [navigate, useMergedRefs(treeItemWalkerRootRef, rovingRootRef)];\n}\nfunction firstChild(target, treeWalker) {\n const nextElement = treeWalker.nextElement();\n if (!nextElement) {\n return null;\n }\n const nextElementAriaPosInSet = nextElement.getAttribute('aria-posinset');\n const nextElementAriaLevel = nextElement.getAttribute('aria-level');\n const targetAriaLevel = target.getAttribute('aria-level');\n if (nextElementAriaPosInSet === '1' && Number(nextElementAriaLevel) === Number(targetAriaLevel) + 1) {\n return nextElement;\n }\n return null;\n}\nfunction parentElement(flatTreeItems, target, document) {\n const flatTreeItem = flatTreeItems.get(target.id);\n if (flatTreeItem && flatTreeItem.parentId) {\n return document.getElementById(flatTreeItem.parentId);\n }\n return null;\n}\n//# sourceMappingURL=useFlatTreeNavigation.js.map"],"names":["useFlatTreeNavigation","flatTreeItems","targetDocument","useFluent_unstable","treeItemWalkerRef","treeItemWalkerRootRef","useHTMLElementWalkerRef","treeItemFilter","rove","rovingRootRef","useRovingTabIndex","getNextElement","data","current","treeItemWalker","type","treeDataTypes","click","target","typeAhead","currentElement","nextTypeAheadElement","event","key","arrowLeft","parentElement","arrowRight","firstChild","end","root","lastChild","home","arrowDown","nextElement","arrowUp","previousElement","navigate","useEventCallback","useMergedRefs","treeWalker","nextElementAriaPosInSet","getAttribute","nextElementAriaLevel","targetAriaLevel","Number","document","flatTreeItem","get","id","parentId","getElementById"],"mappings":";;;;+BAOgBA;;aAAAA;;qCAPmB;gCACa;sCACX;wBACP;gCACC;sCACS;qCACN;AAC3B,SAASA,sBAAsBC,aAAa,EAAE;IACnD,MAAM,EACJC,eAAc,EACf,GAAGC,IAAAA,uCAAkB;IACtB,MAAM,CAACC,mBAAmBC,sBAAsB,GAAGC,IAAAA,6CAAuB,EAACC,8BAAc;IACzF,MAAM,CAAC,EACLC,KAAI,EACL,EAAEC,cAAc,GAAGC,IAAAA,sCAAiB,EAACH,8BAAc;IACpD,SAASI,eAAeC,IAAI,EAAE;QAC5B,IAAI,CAACV,kBAAkB,CAACE,kBAAkBS,OAAO,EAAE;YACjD,OAAO,IAAI;QACb,CAAC;QACD,MAAMC,iBAAiBV,kBAAkBS,OAAO;QAChD,OAAQD,KAAKG,IAAI;YACf,KAAKC,qBAAa,CAACC,KAAK;gBACtB,OAAOL,KAAKM,MAAM;YACpB,KAAKF,qBAAa,CAACG,SAAS;gBAC1BL,eAAeM,cAAc,GAAGR,KAAKM,MAAM;gBAC3C,OAAOG,IAAAA,0CAAoB,EAACP,gBAAgBF,KAAKU,KAAK,CAACC,GAAG;YAC5D,KAAKP,qBAAa,CAACQ,SAAS;gBAC1B,OAAOC,cAAcxB,eAAeW,KAAKM,MAAM,EAAEhB;YACnD,KAAKc,qBAAa,CAACU,UAAU;gBAC3BZ,eAAeM,cAAc,GAAGR,KAAKM,MAAM;gBAC3C,OAAOS,WAAWf,KAAKM,MAAM,EAAEJ;YACjC,KAAKE,qBAAa,CAACY,GAAG;gBACpBd,eAAeM,cAAc,GAAGN,eAAee,IAAI;gBACnD,OAAOf,eAAegB,SAAS;YACjC,KAAKd,qBAAa,CAACe,IAAI;gBACrBjB,eAAeM,cAAc,GAAGN,eAAee,IAAI;gBACnD,OAAOf,eAAea,UAAU;YAClC,KAAKX,qBAAa,CAACgB,SAAS;gBAC1BlB,eAAeM,cAAc,GAAGR,KAAKM,MAAM;gBAC3C,OAAOJ,eAAemB,WAAW;YACnC,KAAKjB,qBAAa,CAACkB,OAAO;gBACxBpB,eAAeM,cAAc,GAAGR,KAAKM,MAAM;gBAC3C,OAAOJ,eAAeqB,eAAe;QACzC;IACF;IACA,MAAMC,WAAWC,IAAAA,gCAAgB,EAACzB,CAAAA,OAAQ;QACxC,MAAMqB,cAActB,eAAeC;QACnC,IAAIqB,aAAa;YACfzB,KAAKyB;QACP,CAAC;IACH;IACA,OAAO;QAACG;QAAUE,IAAAA,6BAAa,EAACjC,uBAAuBI;KAAe;AACxE;AACA,SAASkB,WAAWT,MAAM,EAAEqB,UAAU,EAAE;IACtC,MAAMN,cAAcM,WAAWN,WAAW;IAC1C,IAAI,CAACA,aAAa;QAChB,OAAO,IAAI;IACb,CAAC;IACD,MAAMO,0BAA0BP,YAAYQ,YAAY,CAAC;IACzD,MAAMC,uBAAuBT,YAAYQ,YAAY,CAAC;IACtD,MAAME,kBAAkBzB,OAAOuB,YAAY,CAAC;IAC5C,IAAID,4BAA4B,OAAOI,OAAOF,0BAA0BE,OAAOD,mBAAmB,GAAG;QACnG,OAAOV;IACT,CAAC;IACD,OAAO,IAAI;AACb;AACA,SAASR,cAAcxB,aAAa,EAAEiB,MAAM,EAAE2B,QAAQ,EAAE;IACtD,MAAMC,eAAe7C,cAAc8C,GAAG,CAAC7B,OAAO8B,EAAE;IAChD,IAAIF,gBAAgBA,aAAaG,QAAQ,EAAE;QACzC,OAAOJ,SAASK,cAAc,CAACJ,aAAaG,QAAQ;IACtD,CAAC;IACD,OAAO,IAAI;AACb,EACA,iDAAiD"}
|
|
@@ -12,26 +12,27 @@ function _export(target, all) {
|
|
|
12
12
|
});
|
|
13
13
|
}
|
|
14
14
|
_export(exports, {
|
|
15
|
-
|
|
16
|
-
|
|
15
|
+
createFlatTreeItems: ()=>createFlatTreeItems,
|
|
16
|
+
flatTreeRootId: ()=>flatTreeRootId,
|
|
17
|
+
VisibleFlatTreeItemGenerator: ()=>VisibleFlatTreeItemGenerator
|
|
17
18
|
});
|
|
18
|
-
function
|
|
19
|
-
const root =
|
|
19
|
+
function createFlatTreeItems(flatTreeItemProps) {
|
|
20
|
+
const root = createFlatTreeRootItem();
|
|
20
21
|
const itemsPerId = new Map([
|
|
21
22
|
[
|
|
22
|
-
|
|
23
|
+
flatTreeRootId,
|
|
23
24
|
root
|
|
24
25
|
]
|
|
25
26
|
]);
|
|
26
27
|
const items = [];
|
|
27
28
|
for(let index = 0; index < flatTreeItemProps.length; index++){
|
|
28
|
-
const { parentId =
|
|
29
|
+
const { parentId =flatTreeRootId , ...treeItemProps } = flatTreeItemProps[index];
|
|
29
30
|
const nextItemProps = flatTreeItemProps[index + 1];
|
|
30
31
|
const currentParent = itemsPerId.get(parentId);
|
|
31
32
|
if (!currentParent) {
|
|
32
33
|
if (process.env.NODE_ENV === 'development') {
|
|
33
34
|
// eslint-disable-next-line no-console
|
|
34
|
-
console.error(`useFlatTree: item ${flatTreeItemProps[index].id}
|
|
35
|
+
console.error(`useFlatTree: item ${flatTreeItemProps[index].id} is wrongly positioned, did you properly ordered provided item props? make sure provided items are organized`);
|
|
35
36
|
}
|
|
36
37
|
break;
|
|
37
38
|
}
|
|
@@ -57,21 +58,24 @@ function createUnfilteredFlatTree(flatTreeItemProps) {
|
|
|
57
58
|
items.push(flatTreeItem);
|
|
58
59
|
}
|
|
59
60
|
return {
|
|
60
|
-
|
|
61
|
-
|
|
61
|
+
root,
|
|
62
|
+
size: items.length,
|
|
63
|
+
getByIndex: (index)=>items[index],
|
|
64
|
+
get: (id)=>itemsPerId.get(id),
|
|
65
|
+
set: (id, value)=>itemsPerId.set(id, value)
|
|
62
66
|
};
|
|
63
67
|
}
|
|
64
|
-
const
|
|
65
|
-
function
|
|
68
|
+
const flatTreeRootId = '__fuiFlatTreeRoot';
|
|
69
|
+
function createFlatTreeRootItem() {
|
|
66
70
|
return {
|
|
67
|
-
id:
|
|
71
|
+
id: flatTreeRootId,
|
|
68
72
|
getTreeItemProps: ()=>{
|
|
69
|
-
if (process.env.NODE_ENV
|
|
73
|
+
if (process.env.NODE_ENV !== 'production') {
|
|
70
74
|
// eslint-disable-next-line no-console
|
|
71
75
|
console.error('useFlatTree: internal error, trying to access treeitem props from invalid root element');
|
|
72
76
|
}
|
|
73
77
|
return {
|
|
74
|
-
id:
|
|
78
|
+
id: flatTreeRootId,
|
|
75
79
|
'aria-setsize': -1,
|
|
76
80
|
'aria-level': -1,
|
|
77
81
|
'aria-posinset': -1,
|
|
@@ -80,7 +84,7 @@ function createRootFlatTreeItem() {
|
|
|
80
84
|
},
|
|
81
85
|
childrenSize: 0,
|
|
82
86
|
get index () {
|
|
83
|
-
if (process.env.NODE_ENV
|
|
87
|
+
if (process.env.NODE_ENV !== 'production') {
|
|
84
88
|
// eslint-disable-next-line no-console
|
|
85
89
|
console.error('useFlatTree: internal error, trying to access treeitem props from invalid root element');
|
|
86
90
|
}
|
|
@@ -88,6 +92,35 @@ function createRootFlatTreeItem() {
|
|
|
88
92
|
},
|
|
89
93
|
level: 0
|
|
90
94
|
};
|
|
91
|
-
}
|
|
95
|
+
}
|
|
96
|
+
function* VisibleFlatTreeItemGenerator(openItems, flatTreeItems) {
|
|
97
|
+
for(let index = 0, visibleIndex = 0; index < flatTreeItems.size; index++){
|
|
98
|
+
const item = flatTreeItems.getByIndex(index);
|
|
99
|
+
var _flatTreeItems_get;
|
|
100
|
+
const parent = item.parentId ? (_flatTreeItems_get = flatTreeItems.get(item.parentId)) !== null && _flatTreeItems_get !== void 0 ? _flatTreeItems_get : flatTreeItems.root : flatTreeItems.root;
|
|
101
|
+
if (isItemVisible(item, openItems, flatTreeItems)) {
|
|
102
|
+
item.index = visibleIndex++;
|
|
103
|
+
yield item;
|
|
104
|
+
} else {
|
|
105
|
+
index += parent.childrenSize - 1 + item.childrenSize;
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
function isItemVisible(item, openItems, flatTreeItems) {
|
|
110
|
+
if (item.level === 1) {
|
|
111
|
+
return true;
|
|
112
|
+
}
|
|
113
|
+
while(item.parentId && item.parentId !== flatTreeItems.root.id){
|
|
114
|
+
if (!openItems.has(item.parentId)) {
|
|
115
|
+
return false;
|
|
116
|
+
}
|
|
117
|
+
const parent = flatTreeItems.get(item.parentId);
|
|
118
|
+
if (!parent) {
|
|
119
|
+
return false;
|
|
120
|
+
}
|
|
121
|
+
item = parent;
|
|
122
|
+
}
|
|
123
|
+
return true;
|
|
124
|
+
} //# sourceMappingURL=createFlatTreeItems.js.map
|
|
92
125
|
|
|
93
|
-
//# sourceMappingURL=
|
|
126
|
+
//# sourceMappingURL=createFlatTreeItems.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../lib/utils/createFlatTreeItems.js"],"sourcesContent":["/**\n * creates a list of flat tree items\n * and provides a map to access each item by id\n */export function createFlatTreeItems(flatTreeItemProps) {\n const root = createFlatTreeRootItem();\n const itemsPerId = new Map([[flatTreeRootId, root]]);\n const items = [];\n for (let index = 0; index < flatTreeItemProps.length; index++) {\n const {\n parentId = flatTreeRootId,\n ...treeItemProps\n } = flatTreeItemProps[index];\n const nextItemProps = flatTreeItemProps[index + 1];\n const currentParent = itemsPerId.get(parentId);\n if (!currentParent) {\n if (process.env.NODE_ENV === 'development') {\n // eslint-disable-next-line no-console\n console.error(`useFlatTree: item ${flatTreeItemProps[index].id} is wrongly positioned, did you properly ordered provided item props? make sure provided items are organized`);\n }\n break;\n }\n const isLeaf = (nextItemProps === null || nextItemProps === void 0 ? void 0 : nextItemProps.parentId) !== treeItemProps.id;\n var _currentParent_level;\n const currentLevel = ((_currentParent_level = currentParent.level) !== null && _currentParent_level !== void 0 ? _currentParent_level : 0) + 1;\n const currentChildrenSize = ++currentParent.childrenSize;\n const flatTreeItem = {\n id: treeItemProps.id,\n getTreeItemProps: () => ({\n ...treeItemProps,\n 'aria-level': currentLevel,\n 'aria-posinset': currentChildrenSize,\n 'aria-setsize': currentParent.childrenSize,\n leaf: isLeaf\n }),\n level: currentLevel,\n parentId,\n childrenSize: 0,\n index: -1\n };\n itemsPerId.set(flatTreeItem.id, flatTreeItem);\n items.push(flatTreeItem);\n }\n return {\n root,\n size: items.length,\n getByIndex: index => items[index],\n get: id => itemsPerId.get(id),\n set: (id, value) => itemsPerId.set(id, value)\n };\n}\nexport const flatTreeRootId = '__fuiFlatTreeRoot';\nfunction createFlatTreeRootItem() {\n return {\n id: flatTreeRootId,\n getTreeItemProps: () => {\n if (process.env.NODE_ENV !== 'production') {\n // eslint-disable-next-line no-console\n console.error('useFlatTree: internal error, trying to access treeitem props from invalid root element');\n }\n return {\n id: flatTreeRootId,\n 'aria-setsize': -1,\n 'aria-level': -1,\n 'aria-posinset': -1,\n leaf: true\n };\n },\n childrenSize: 0,\n get index() {\n if (process.env.NODE_ENV !== 'production') {\n // eslint-disable-next-line no-console\n console.error('useFlatTree: internal error, trying to access treeitem props from invalid root element');\n }\n return -1;\n },\n level: 0\n };\n}\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport function* VisibleFlatTreeItemGenerator(openItems, flatTreeItems) {\n for (let index = 0, visibleIndex = 0; index < flatTreeItems.size; index++) {\n const item = flatTreeItems.getByIndex(index);\n var _flatTreeItems_get;\n const parent = item.parentId ? (_flatTreeItems_get = flatTreeItems.get(item.parentId)) !== null && _flatTreeItems_get !== void 0 ? _flatTreeItems_get : flatTreeItems.root : flatTreeItems.root;\n if (isItemVisible(item, openItems, flatTreeItems)) {\n item.index = visibleIndex++;\n yield item;\n } else {\n index += parent.childrenSize - 1 + item.childrenSize;\n }\n }\n}\nfunction isItemVisible(item, openItems, flatTreeItems) {\n if (item.level === 1) {\n return true;\n }\n while (item.parentId && item.parentId !== flatTreeItems.root.id) {\n if (!openItems.has(item.parentId)) {\n return false;\n }\n const parent = flatTreeItems.get(item.parentId);\n if (!parent) {\n return false;\n }\n item = parent;\n }\n return true;\n}\n//# sourceMappingURL=createFlatTreeItems.js.map"],"names":["createFlatTreeItems","flatTreeRootId","VisibleFlatTreeItemGenerator","flatTreeItemProps","root","createFlatTreeRootItem","itemsPerId","Map","items","index","length","parentId","treeItemProps","nextItemProps","currentParent","get","process","env","NODE_ENV","console","error","id","isLeaf","_currentParent_level","currentLevel","level","currentChildrenSize","childrenSize","flatTreeItem","getTreeItemProps","leaf","set","push","size","getByIndex","value","openItems","flatTreeItems","visibleIndex","item","_flatTreeItems_get","parent","isItemVisible","has"],"mappings":"AAAA;;;CAGC;;;;;;;;;;;IAAkBA,mBAAmB,MAAnBA;IA+CNC,cAAc,MAAdA;IA6BIC,4BAA4B,MAA5BA;;AA5EP,SAASF,oBAAoBG,iBAAiB,EAAE;IACxD,MAAMC,OAAOC;IACb,MAAMC,aAAa,IAAIC,IAAI;QAAC;YAACN;YAAgBG;SAAK;KAAC;IACnD,MAAMI,QAAQ,EAAE;IAChB,IAAK,IAAIC,QAAQ,GAAGA,QAAQN,kBAAkBO,MAAM,EAAED,QAAS;QAC7D,MAAM,EACJE,UAAWV,eAAc,EACzB,GAAGW,eACJ,GAAGT,iBAAiB,CAACM,MAAM;QAC5B,MAAMI,gBAAgBV,iBAAiB,CAACM,QAAQ,EAAE;QAClD,MAAMK,gBAAgBR,WAAWS,GAAG,CAACJ;QACrC,IAAI,CAACG,eAAe;YAClB,IAAIE,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;gBAC1C,sCAAsC;gBACtCC,QAAQC,KAAK,CAAC,CAAC,kBAAkB,EAAEjB,iBAAiB,CAACM,MAAM,CAACY,EAAE,CAAC,4GAA4G,CAAC;YAC9K,CAAC;YACD,KAAM;QACR,CAAC;QACD,MAAMC,SAAS,AAACT,CAAAA,kBAAkB,IAAI,IAAIA,kBAAkB,KAAK,IAAI,KAAK,IAAIA,cAAcF,QAAQ,AAAD,MAAOC,cAAcS,EAAE;QAC1H,IAAIE;QACJ,MAAMC,eAAe,AAAC,CAAA,AAACD,CAAAA,uBAAuBT,cAAcW,KAAK,AAAD,MAAO,IAAI,IAAIF,yBAAyB,KAAK,IAAIA,uBAAuB,CAAC,AAAD,IAAK;QAC7I,MAAMG,sBAAsB,EAAEZ,cAAca,YAAY;QACxD,MAAMC,eAAe;YACnBP,IAAIT,cAAcS,EAAE;YACpBQ,kBAAkB,IAAO,CAAA;oBACvB,GAAGjB,aAAa;oBAChB,cAAcY;oBACd,iBAAiBE;oBACjB,gBAAgBZ,cAAca,YAAY;oBAC1CG,MAAMR;gBACR,CAAA;YACAG,OAAOD;YACPb;YACAgB,cAAc;YACdlB,OAAO,CAAC;QACV;QACAH,WAAWyB,GAAG,CAACH,aAAaP,EAAE,EAAEO;QAChCpB,MAAMwB,IAAI,CAACJ;IACb;IACA,OAAO;QACLxB;QACA6B,MAAMzB,MAAME,MAAM;QAClBwB,YAAYzB,CAAAA,QAASD,KAAK,CAACC,MAAM;QACjCM,KAAKM,CAAAA,KAAMf,WAAWS,GAAG,CAACM;QAC1BU,KAAK,CAACV,IAAIc,QAAU7B,WAAWyB,GAAG,CAACV,IAAIc;IACzC;AACF;AACO,MAAMlC,iBAAiB;AAC9B,SAASI,yBAAyB;IAChC,OAAO;QACLgB,IAAIpB;QACJ4B,kBAAkB,IAAM;YACtB,IAAIb,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;gBACzC,sCAAsC;gBACtCC,QAAQC,KAAK,CAAC;YAChB,CAAC;YACD,OAAO;gBACLC,IAAIpB;gBACJ,gBAAgB,CAAC;gBACjB,cAAc,CAAC;gBACf,iBAAiB,CAAC;gBAClB6B,MAAM,IAAI;YACZ;QACF;QACAH,cAAc;QACd,IAAIlB,SAAQ;YACV,IAAIO,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;gBACzC,sCAAsC;gBACtCC,QAAQC,KAAK,CAAC;YAChB,CAAC;YACD,OAAO,CAAC;QACV;QACAK,OAAO;IACT;AACF;AAEO,UAAUvB,6BAA6BkC,SAAS,EAAEC,aAAa,EAAE;IACtE,IAAK,IAAI5B,QAAQ,GAAG6B,eAAe,GAAG7B,QAAQ4B,cAAcJ,IAAI,EAAExB,QAAS;QACzE,MAAM8B,OAAOF,cAAcH,UAAU,CAACzB;QACtC,IAAI+B;QACJ,MAAMC,SAASF,KAAK5B,QAAQ,GAAG,AAAC6B,CAAAA,qBAAqBH,cAActB,GAAG,CAACwB,KAAK5B,QAAQ,CAAA,MAAO,IAAI,IAAI6B,uBAAuB,KAAK,IAAIA,qBAAqBH,cAAcjC,IAAI,GAAGiC,cAAcjC,IAAI;QAC/L,IAAIsC,cAAcH,MAAMH,WAAWC,gBAAgB;YACjDE,KAAK9B,KAAK,GAAG6B;YACb,MAAMC;QACR,OAAO;YACL9B,SAASgC,OAAOd,YAAY,GAAG,IAAIY,KAAKZ,YAAY;QACtD,CAAC;IACH;AACF;AACA,SAASe,cAAcH,IAAI,EAAEH,SAAS,EAAEC,aAAa,EAAE;IACrD,IAAIE,KAAKd,KAAK,KAAK,GAAG;QACpB,OAAO,IAAI;IACb,CAAC;IACD,MAAOc,KAAK5B,QAAQ,IAAI4B,KAAK5B,QAAQ,KAAK0B,cAAcjC,IAAI,CAACiB,EAAE,CAAE;QAC/D,IAAI,CAACe,UAAUO,GAAG,CAACJ,KAAK5B,QAAQ,GAAG;YACjC,OAAO,KAAK;QACd,CAAC;QACD,MAAM8B,SAASJ,cAActB,GAAG,CAACwB,KAAK5B,QAAQ;QAC9C,IAAI,CAAC8B,QAAQ;YACX,OAAO,KAAK;QACd,CAAC;QACDF,OAAOE;IACT;IACA,OAAO,IAAI;AACb,EACA,+CAA+C"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-tree",
|
|
3
|
-
"version": "9.0.0-beta.
|
|
3
|
+
"version": "9.0.0-beta.8",
|
|
4
4
|
"description": "React components for building web experiences",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -37,13 +37,13 @@
|
|
|
37
37
|
"dependencies": {
|
|
38
38
|
"@fluentui/keyboard-keys": "^9.0.2",
|
|
39
39
|
"@fluentui/react-aria": "^9.3.15",
|
|
40
|
-
"@fluentui/react-avatar": "^9.4.
|
|
41
|
-
"@fluentui/react-button": "^9.3.
|
|
40
|
+
"@fluentui/react-avatar": "^9.4.6",
|
|
41
|
+
"@fluentui/react-button": "^9.3.6",
|
|
42
42
|
"@fluentui/react-context-selector": "^9.1.15",
|
|
43
43
|
"@fluentui/react-icons": "^2.0.196",
|
|
44
|
-
"@fluentui/react-portal": "^9.2.
|
|
45
|
-
"@fluentui/react-shared-contexts": "^9.3.
|
|
46
|
-
"@fluentui/react-tabster": "^9.6.
|
|
44
|
+
"@fluentui/react-portal": "^9.2.3",
|
|
45
|
+
"@fluentui/react-shared-contexts": "^9.3.3",
|
|
46
|
+
"@fluentui/react-tabster": "^9.6.2",
|
|
47
47
|
"@fluentui/react-theme": "^9.1.7",
|
|
48
48
|
"@fluentui/react-utilities": "^9.7.2",
|
|
49
49
|
"@griffel/react": "^1.5.2",
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["createUnfilteredFlatTree","flatTreeItemProps","root","createRootFlatTreeItem","itemsPerId","Map","id","items","index","length","parentId","flatTreeRootParentId","treeItemProps","nextItemProps","currentParent","get","process","env","NODE_ENV","console","error","isLeaf","_currentParent_level","currentLevel","level","currentChildrenSize","childrenSize","flatTreeItem","getTreeItemProps","leaf","set","push"],"sources":["../../src/utils/createUnfilteredFlatTree.ts"],"sourcesContent":["import { FlatTreeItem, FlatTreeItemProps } from '../hooks/useFlatTree';\n\n/**\n * @internal\n */\nexport type UnfilteredFlatTree = {\n items: FlatTreeItem[];\n itemsPerId: Map<string, FlatTreeItem>;\n};\n\n/**\n * creates a list of flat tree items\n * and provides a map to access each item by id\n */\nexport function createUnfilteredFlatTree(flatTreeItemProps: FlatTreeItemProps[]): UnfilteredFlatTree {\n const root = createRootFlatTreeItem();\n const itemsPerId = new Map<string, FlatTreeItem>([[root.id, root]]);\n const items: FlatTreeItem[] = [];\n\n for (let index = 0; index < flatTreeItemProps.length; index++) {\n const { parentId = flatTreeRootParentId, ...treeItemProps } = flatTreeItemProps[index];\n\n const nextItemProps = flatTreeItemProps[index + 1] as FlatTreeItemProps | undefined;\n const currentParent = itemsPerId.get(parentId);\n if (!currentParent) {\n if (process.env.NODE_ENV === 'development') {\n // eslint-disable-next-line no-console\n console.error(\n `useFlatTree: item ${flatTreeItemProps[index].id} not properly initialized, make sure provided items are organized`,\n );\n }\n break;\n }\n const isLeaf = nextItemProps?.parentId !== treeItemProps.id;\n const currentLevel = (currentParent.level ?? 0) + 1;\n const currentChildrenSize = ++currentParent.childrenSize;\n\n const flatTreeItem: FlatTreeItem = {\n id: treeItemProps.id,\n getTreeItemProps: () => ({\n ...treeItemProps,\n 'aria-level': currentLevel,\n 'aria-posinset': currentChildrenSize,\n 'aria-setsize': currentParent.childrenSize,\n leaf: isLeaf,\n }),\n level: currentLevel,\n parentId,\n childrenSize: 0,\n index: -1,\n };\n itemsPerId.set(flatTreeItem.id, flatTreeItem);\n items.push(flatTreeItem);\n }\n\n return { items, itemsPerId };\n}\n\nexport const flatTreeRootParentId = '__fuiFlatTreeRoot';\n\nfunction createRootFlatTreeItem(): FlatTreeItem {\n return {\n id: flatTreeRootParentId,\n getTreeItemProps: () => {\n if (process.env.NODE_ENV === 'development') {\n // eslint-disable-next-line no-console\n console.error('useFlatTree: internal error, trying to access treeitem props from invalid root element');\n }\n return { id: flatTreeRootParentId, 'aria-setsize': -1, 'aria-level': -1, 'aria-posinset': -1, leaf: true };\n },\n childrenSize: 0,\n get index() {\n if (process.env.NODE_ENV === 'development') {\n // eslint-disable-next-line no-console\n console.error('useFlatTree: internal error, trying to access treeitem props from invalid root element');\n }\n return -1;\n },\n level: 0,\n };\n}\n"],"mappings":"AAUA;;;GAIA,OAAO,SAASA,yBAAyBC,iBAAsC,EAAsB;EACnG,MAAMC,IAAA,GAAOC,sBAAA;EACb,MAAMC,UAAA,GAAa,IAAIC,GAAA,CAA0B,CAAC,CAACH,IAAA,CAAKI,EAAE,EAAEJ,IAAA,CAAK,CAAC;EAClE,MAAMK,KAAA,GAAwB,EAAE;EAEhC,KAAK,IAAIC,KAAA,GAAQ,GAAGA,KAAA,GAAQP,iBAAA,CAAkBQ,MAAM,EAAED,KAAA,IAAS;IAC7D,MAAM;MAAEE,QAAA,GAAWC,oBAAA;MAAsB,GAAGC;IAAA,CAAe,GAAGX,iBAAiB,CAACO,KAAA,CAAM;IAEtF,MAAMK,aAAA,GAAgBZ,iBAAiB,CAACO,KAAA,GAAQ,EAAE;IAClD,MAAMM,aAAA,GAAgBV,UAAA,CAAWW,GAAG,CAACL,QAAA;IACrC,IAAI,CAACI,aAAA,EAAe;MAClB,IAAIE,OAAA,CAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C;QACAC,OAAA,CAAQC,KAAK,CACV,qBAAoBnB,iBAAiB,CAACO,KAAA,CAAM,CAACF,EAAG,mEAAkE;MAEvH;MACA;IACF;IACA,MAAMe,MAAA,GAAS,CAAAR,aAAA,aAAAA,aAAA,uBAAAA,aAAA,CAAeH,QAAQ,MAAKE,aAAA,CAAcN,EAAE;QACrCgB,oBAAA;IAAtB,MAAMC,YAAA,GAAe,CAAC,CAAAD,oBAAA,GAAAR,aAAA,CAAcU,KAAK,cAAnBF,oBAAA,cAAAA,oBAAA,GAAuB,CAAC,IAAI;IAClD,MAAMG,mBAAA,GAAsB,EAAEX,aAAA,CAAcY,YAAY;IAExD,MAAMC,YAAA,GAA6B;MACjCrB,EAAA,EAAIM,aAAA,CAAcN,EAAE;MACpBsB,gBAAA,EAAkBA,CAAA,MAAO;QACvB,GAAGhB,aAAa;QAChB,cAAcW,YAAA;QACd,iBAAiBE,mBAAA;QACjB,gBAAgBX,aAAA,CAAcY,YAAY;QAC1CG,IAAA,EAAMR;MACR;MACAG,KAAA,EAAOD,YAAA;MACPb,QAAA;MACAgB,YAAA,EAAc;MACdlB,KAAA,EAAO,CAAC;IACV;IACAJ,UAAA,CAAW0B,GAAG,CAACH,YAAA,CAAarB,EAAE,EAAEqB,YAAA;IAChCpB,KAAA,CAAMwB,IAAI,CAACJ,YAAA;EACb;EAEA,OAAO;IAAEpB,KAAA;IAAOH;EAAW;AAC7B;AAEA,OAAO,MAAMO,oBAAA,GAAuB;AAEpC,SAASR,uBAAA,EAAuC;EAC9C,OAAO;IACLG,EAAA,EAAIK,oBAAA;IACJiB,gBAAA,EAAkBA,CAAA,KAAM;MACtB,IAAIZ,OAAA,CAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C;QACAC,OAAA,CAAQC,KAAK,CAAC;MAChB;MACA,OAAO;QAAEd,EAAA,EAAIK,oBAAA;QAAsB,gBAAgB,CAAC;QAAG,cAAc,CAAC;QAAG,iBAAiB,CAAC;QAAGkB,IAAA,EAAM;MAAK;IAC3G;IACAH,YAAA,EAAc;IACd,IAAIlB,MAAA,EAAQ;MACV,IAAIQ,OAAA,CAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C;QACAC,OAAA,CAAQC,KAAK,CAAC;MAChB;MACA,OAAO,CAAC;IACV;IACAI,KAAA,EAAO;EACT;AACF"}
|
|
@@ -1,83 +0,0 @@
|
|
|
1
|
-
import { flatTreeRootParentId } from './createUnfilteredFlatTree';
|
|
2
|
-
import { treeDataTypes } from './tokens';
|
|
3
|
-
/**
|
|
4
|
-
* creates methods that depend on the unfilteredFlatTree and the current available openItems
|
|
5
|
-
*/
|
|
6
|
-
export function createVisibleFlatTree(unfilteredFlatTree, openItems) {
|
|
7
|
-
let visibleItems = null;
|
|
8
|
-
const getNextNavigableItem = data => {
|
|
9
|
-
const item = unfilteredFlatTree.itemsPerId.get(data.target.id);
|
|
10
|
-
if (!item || !visibleItems) {
|
|
11
|
-
return null;
|
|
12
|
-
}
|
|
13
|
-
switch (data.type) {
|
|
14
|
-
case treeDataTypes.arrowLeft:
|
|
15
|
-
var _unfilteredFlatTree_itemsPerId_get;
|
|
16
|
-
return item.parentId ? (_unfilteredFlatTree_itemsPerId_get = unfilteredFlatTree.itemsPerId.get(item.parentId)) !== null && _unfilteredFlatTree_itemsPerId_get !== void 0 ? _unfilteredFlatTree_itemsPerId_get : null : null;
|
|
17
|
-
case treeDataTypes.arrowRight:
|
|
18
|
-
var _visibleItems_;
|
|
19
|
-
return (_visibleItems_ = visibleItems[item.index + 1]) !== null && _visibleItems_ !== void 0 ? _visibleItems_ : null;
|
|
20
|
-
case treeDataTypes.end:
|
|
21
|
-
return visibleItems[visibleItems.length - 1];
|
|
22
|
-
case treeDataTypes.home:
|
|
23
|
-
return visibleItems[0];
|
|
24
|
-
case treeDataTypes.arrowDown:
|
|
25
|
-
var _visibleItems_1;
|
|
26
|
-
return (_visibleItems_1 = visibleItems[item.index + 1]) !== null && _visibleItems_1 !== void 0 ? _visibleItems_1 : null;
|
|
27
|
-
case treeDataTypes.arrowUp:
|
|
28
|
-
var _visibleItems_2;
|
|
29
|
-
return (_visibleItems_2 = visibleItems[item.index - 1]) !== null && _visibleItems_2 !== void 0 ? _visibleItems_2 : null;
|
|
30
|
-
default:
|
|
31
|
-
return null;
|
|
32
|
-
}
|
|
33
|
-
};
|
|
34
|
-
function* makeVisibleItemsGenerator() {
|
|
35
|
-
visibleItems = [];
|
|
36
|
-
for (let index = 0, visibleIndex = 0; index < unfilteredFlatTree.items.length; index++) {
|
|
37
|
-
const item = unfilteredFlatTree.items[index];
|
|
38
|
-
var _item_parentId;
|
|
39
|
-
const parent = unfilteredFlatTree.itemsPerId.get((_item_parentId = item.parentId) !== null && _item_parentId !== void 0 ? _item_parentId : flatTreeRootParentId);
|
|
40
|
-
if (!parent) {
|
|
41
|
-
break;
|
|
42
|
-
}
|
|
43
|
-
if (isFlatTreeItemVisible(item, {
|
|
44
|
-
openItems,
|
|
45
|
-
unfilteredFlatTree
|
|
46
|
-
})) {
|
|
47
|
-
item.index = visibleIndex++;
|
|
48
|
-
visibleItems.push({
|
|
49
|
-
...item
|
|
50
|
-
});
|
|
51
|
-
yield item;
|
|
52
|
-
} else {
|
|
53
|
-
index += parent.childrenSize - 1 + item.childrenSize;
|
|
54
|
-
}
|
|
55
|
-
}
|
|
56
|
-
}
|
|
57
|
-
return {
|
|
58
|
-
getNextNavigableItem,
|
|
59
|
-
items: () => {
|
|
60
|
-
return visibleItems || makeVisibleItemsGenerator();
|
|
61
|
-
}
|
|
62
|
-
};
|
|
63
|
-
}
|
|
64
|
-
function isFlatTreeItemVisible(item, {
|
|
65
|
-
openItems,
|
|
66
|
-
unfilteredFlatTree: flatTree
|
|
67
|
-
}) {
|
|
68
|
-
if (item.level === 1) {
|
|
69
|
-
return true;
|
|
70
|
-
}
|
|
71
|
-
while (item.parentId && item.parentId !== flatTreeRootParentId) {
|
|
72
|
-
if (!openItems.has(item.parentId)) {
|
|
73
|
-
return false;
|
|
74
|
-
}
|
|
75
|
-
const parent = flatTree.itemsPerId.get(item.parentId);
|
|
76
|
-
if (!parent) {
|
|
77
|
-
return false;
|
|
78
|
-
}
|
|
79
|
-
item = parent;
|
|
80
|
-
}
|
|
81
|
-
return true;
|
|
82
|
-
}
|
|
83
|
-
//# sourceMappingURL=createVisibleFlatTree.js.map
|