From 12e35fd64c2a6d8cf48e1a91bf45a41360fb9204 Mon Sep 17 00:00:00 2001 From: Wroud Date: Thu, 27 Jan 2022 13:33:14 +0300 Subject: [PATCH] feat(core-blocks): CB-1405 folders automatic opening --- .../src/NavigationTree/ElementsTree.tsx | 44 +++++++++++++++++-- .../src/NavigationTree/useElementsTree.ts | 15 ++----- .../FolderExplorer/FolderExplorerContext.ts | 5 +++ .../src/FolderExplorer/useFolderExplorer.ts | 6 ++- .../src/Tree/TreeNode/TreeNodeExpand.tsx | 7 ++- 5 files changed, 58 insertions(+), 19 deletions(-) diff --git a/webapp/packages/core-app/src/NavigationTree/ElementsTree.tsx b/webapp/packages/core-app/src/NavigationTree/ElementsTree.tsx index 3091f76a9c..0857b5cd45 100644 --- a/webapp/packages/core-app/src/NavigationTree/ElementsTree.tsx +++ b/webapp/packages/core-app/src/NavigationTree/ElementsTree.tsx @@ -89,8 +89,45 @@ export const ElementsTree = observer(function ElementsTree({ const navNodeInfoResource = useService(NavNodeInfoResource); const navigationTreeService = useService(NavigationTreeService); + const autoOpenFolders = useCallback(async function autoOpenFolders(nodeId: string, path: string[]) { + path = [...path]; + + if (!tree.foldersTree) { + return; + } + + while (folderExplorer.options.expandFoldersWithSingleElement) { + const children = navigationTreeService.getChildren(nodeId); + + if (children?.length === 1) { + const nextNodeId = children[0]; + const loaded = await navigationTreeService.loadNestedNodes(nextNodeId, false); + + if (!loaded) { + break; + } + + path.push(nodeId); + nodeId = nextNodeId; + } else { + break; + } + } + + folderExplorer.open(path, nodeId); + + }, []); + const children = useMapResource(ElementsTree, NavTreeResource, root, { - onLoad: async resource => !(await resource.preloadNodeParents(fullPath)), + onLoad: async resource => { + const preload = await resource.preloadNodeParents(fullPath); + + if (!preload) { + return false; + } + + await autoOpenFolders(root, folderExplorer.path); + }, }); const nameFilter = useMemo(() => elementsTreeNameFilter(navNodeInfoResource), [navNodeInfoResource]); @@ -125,10 +162,11 @@ export const ElementsTree = observer(function ElementsTree({ await onClick?.(node); if (!leaf && tree.foldersTree) { - const loaded = await navigationTreeService.loadNestedNodes(node.id, true); + const nodeId = node.id; + const loaded = await navigationTreeService.loadNestedNodes(nodeId, true); if (loaded) { - folderExplorer.open(path, node.id); + await autoOpenFolders(nodeId, path); } } }, diff --git a/webapp/packages/core-app/src/NavigationTree/useElementsTree.ts b/webapp/packages/core-app/src/NavigationTree/useElementsTree.ts index 88bb5cfe8a..30625243ff 100644 --- a/webapp/packages/core-app/src/NavigationTree/useElementsTree.ts +++ b/webapp/packages/core-app/src/NavigationTree/useElementsTree.ts @@ -36,8 +36,6 @@ export interface ITreeNodeState { } interface IElementsTreeUserState { - foldersTree: boolean; - showFolderExplorerPath: boolean; nodeState: Array<[string, ITreeNodeState]>; } @@ -90,14 +88,12 @@ export function useElementsTree(options: IOptions): IElementsTree { expanded: false, }))); const state = options.localState || localTreeNodesState; - let foldersTree = options.foldersTree; - let showFolderExplorerPath = options.showFolderExplorerPath; + const foldersTree = options.foldersTree; + const showFolderExplorerPath = options.showFolderExplorerPath; - const userState = useUserData( + useUserData( `elements-tree-${options.baseRoot}`, () => observable({ - foldersTree, - showFolderExplorerPath, nodeState: [], }), async data => { @@ -115,14 +111,9 @@ export function useElementsTree(options: IOptions): IElementsTree { data => ( typeof data === 'object' && Array.isArray(data.nodeState) - && typeof data.foldersTree === 'boolean' - && typeof data.showFolderExplorerPath === 'boolean' ) ); - foldersTree = userState.foldersTree; - showFolderExplorerPath = userState.showFolderExplorerPath; - async function loadTree(nodeId: string) { const preloaded = await navTreeResource.preloadNodeParents(options.folderExplorer.fullPath); diff --git a/webapp/packages/core-blocks/src/FolderExplorer/FolderExplorerContext.ts b/webapp/packages/core-blocks/src/FolderExplorer/FolderExplorerContext.ts index 38ffc7888f..f0a67508ac 100644 --- a/webapp/packages/core-blocks/src/FolderExplorer/FolderExplorerContext.ts +++ b/webapp/packages/core-blocks/src/FolderExplorer/FolderExplorerContext.ts @@ -8,11 +8,16 @@ import { createContext } from 'react'; +export interface IFolderExplorerOptions { + expandFoldersWithSingleElement?: boolean; +} + export interface IFolderExplorerContext { root: string; path: string[]; fullPath: string[]; folder: string; + options: IFolderExplorerOptions; open: (path: string[], folder: string) => void; } diff --git a/webapp/packages/core-blocks/src/FolderExplorer/useFolderExplorer.ts b/webapp/packages/core-blocks/src/FolderExplorer/useFolderExplorer.ts index 26c8f1643b..da716dd659 100644 --- a/webapp/packages/core-blocks/src/FolderExplorer/useFolderExplorer.ts +++ b/webapp/packages/core-blocks/src/FolderExplorer/useFolderExplorer.ts @@ -10,9 +10,9 @@ import { action, observable } from 'mobx'; import { useContext } from 'react'; import { useObservableRef } from '../useObservableRef'; -import { FolderExplorerContext, IFolderExplorerContext } from './FolderExplorerContext'; +import { FolderExplorerContext, IFolderExplorerContext, IFolderExplorerOptions } from './FolderExplorerContext'; -export function useFolderExplorer(root: string): IFolderExplorerContext { +export function useFolderExplorer(root: string, options: IFolderExplorerOptions = {}): IFolderExplorerContext { const context = useContext(FolderExplorerContext); const state = useObservableRef(() => ({ @@ -20,6 +20,7 @@ export function useFolderExplorer(root: string): IFolderExplorerContext { path: [], fullPath: [root], folder: root, + options, open(path: string[], folder: string) { this.path = path.slice(); this.fullPath = [...path, folder]; @@ -30,6 +31,7 @@ export function useFolderExplorer(root: string): IFolderExplorerContext { path: observable, fullPath: observable, folder: observable, + options: observable.ref, open: action.bound, }, false); diff --git a/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeExpand.tsx b/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeExpand.tsx index 9f522d2aa8..1876e832de 100644 --- a/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeExpand.tsx +++ b/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeExpand.tsx @@ -64,8 +64,11 @@ export const TreeNodeExpand = observer(function TreeNodeExpand({ return styled(styles)( {loading && } - {!loading && (!leaf || context.externalExpanded) && big && } - {!loading && (!leaf || context.externalExpanded) && !big && } + {!loading && (!leaf || context.externalExpanded) && ( + big + ? + : + )} ); });