fix: update foldertree new folder (#247)

Author: mortalYoung

src/components/tree/index.tsx

@@ -168,6 +168,31 @@ const TreeView = ({
         onRightClick?.(info);
     };
 
+    React.useLayoutEffect(() => {
+        const cache: { path: string; data: ITreeNodeItemProps }[] = [];
+        data.forEach((item) => {
+            cache.push({ path: `${item.id}`, data: item });
+        });
+
+        while (cache.length) {
+            const { path, data } = cache.pop()!;
+            const editableChild = data.children?.find(
+                (child) => child.isEditable
+            );
+            if (editableChild) {
+                treeRef.current?.setExpandedKeys(path.split('-'));
+                break;
+            } else {
+                const children =
+                    data.children?.map((child) => ({
+                        path: `${path}-${child.id}`,
+                        data: child,
+                    })) || [];
+                cache.push(...children);
+            }
+        }
+    }, [data]);
+
     return (
         <div className={classNames(prefixClaName('tree'), className)}>
             <div className={prefixClaName('tree', 'sidebar')}>

src/extensions/folderTree/index.tsx

@@ -48,6 +48,7 @@ export const ExtendsFolderTree: IExtension = {
                     id: `${file.id}`?.split('_')?.[0],
                     modified: false,
                     data: {
+                        ...(file.data || {}),
                         value: file.content,
                         path: file.location,
                         language: extName,
@@ -92,12 +93,29 @@ export const ExtendsFolderTree: IExtension = {
                     isEditable: false,
                 });
             } else {
-                tree.remove(id);
+                // TODO: improve tree helper types
+                const node = (tree.get(id) as unknown) as ITreeNodeItemProps;
+                if (node.name) {
+                    tree.update(id, {
+                        isEditable: false,
+                    });
+                } else {
+                    tree.remove(id);
+                }
             }
+
             if (index > -1) cloneData[index] = tree.obj;
             molecule.folderTree.setState({
                 folderTree: { ...folderTree, data: cloneData },
             });
+
+            const isOpened = molecule.editor.isOpened(id.toString());
+            if (isOpened) {
+                molecule.editor.updateTab({
+                    id: id.toString(),
+                    name,
+                });
+            }
             if (file?.fileType === FileTypes.File && file.name) {
                 // emit onSelectFile
             }

src/model/workbench/explorer/folderTree.tsx

@@ -102,12 +102,15 @@ export class TreeNodeModel implements ITreeNodeItemProps {
     id?: number;
     name?: string;
     location?: string;
+    isLeaf?: boolean;
     fileType?: FileType;
     children?: ITreeNodeItemProps[];
     icon?: string | React.ReactNode;
     isEditable?: boolean;
     content?: string;
 
+    data?: any;
+
     constructor(props: ITreeNodeItemProps = {}) {
         const {
             id,
@@ -118,6 +121,8 @@ export class TreeNodeModel implements ITreeNodeItemProps {
             icon = '',
             isEditable = false,
             content = '',
+            isLeaf = true,
+            data,
         } = props;
         this.fileType = fileType;
         this.isEditable = isEditable;
@@ -127,6 +132,8 @@ export class TreeNodeModel implements ITreeNodeItemProps {
         this.children = children;
         this.icon = icon;
         this.content = content;
+        this.data = data;
+        this.isLeaf = isLeaf;
     }
 }
 

src/services/workbench/editorService.ts

@@ -26,11 +26,19 @@ export interface IEditorService extends Component<IEditor> {
         tabId: string,
         group: IEditorGroup
     ): IEditorTab<T> | undefined;
-    updateTab(tab: IEditorTab, groupId: number): IEditorTab;
+    /**
+     *
+     * @param groupId If not provided, molecule will update in all group
+     */
+    updateTab(tab: IEditorTab, groupId?: number): IEditorTab;
     /**
      * Specify a entry page for editor
      */
     setEntry(component: React.ReactNode): void;
+    /**
+     * Returns whether a specific tab exists
+     */
+    isOpened(tabId: string): boolean;
     closeTab(tabId: string, groupId: number): void;
     closeOthers(tab: IEditorTab, groupId: number): void;
     closeToRight(tab: IEditorTab, groupId: number): void;
@@ -91,6 +99,11 @@ export class EditorService
         });
     }
 
+    public isOpened(tabId: string): boolean {
+        const { groups = [] } = this.state;
+        return groups.some((group) => this.getTabById(tabId, group));
+    }
+
     public updateGroupActions(actions: IMenuItemProps[]): void {
         this.groupActions = actions;
     }
@@ -112,24 +125,47 @@ export class EditorService
         return this.state.current?.editorInstance;
     }
 
-    public updateTab(tab: IEditorTab, groupId: number): IEditorTab {
-        const { groups = [] } = this.state;
-        const index = this.getGroupIndexById(groupId);
+    public updateTab(tab: IEditorTab, groupId?: number): IEditorTab {
+        if (groupId) {
+            const group = this.getGroupById(groupId);
 
-        if (index > -1) {
-            const group = groups[index];
+            if (group?.data?.length) {
+                const tabData = group.data.find(searchById(tab.id));
 
-            if (group.data && group.data.length > 0) {
-                const tabIndex = group.data!.findIndex(searchById(tab.id));
+                if (tabData) {
+                    Object.assign(tabData, tab);
+                }
 
-                if (tabIndex > -1) {
-                    const tabData = group.data![tabIndex];
-                    const newTab = Object.assign({}, tabData, tab);
-                    group.data![tabIndex] = newTab;
+                if (group.activeTab === tab.id) {
+                    Object.assign(group.tab, tab);
+                }
+                this.updateGroup(groupId, group);
 
-                    this.render();
+                if (groupId === this.state.current?.id) {
+                    this.updateCurrentGroup(group);
                 }
             }
+        } else {
+            const { groups = [], current } = this.state;
+            groups.forEach((group) => {
+                const tabData = this.getTabById(tab.id!, group);
+                if (tabData) {
+                    Object.assign(tabData, tab);
+                }
+
+                if (group.activeTab === tab.id) {
+                    Object.assign(group.tab, tab);
+                }
+            });
+
+            if (current?.activeTab === tab.id) {
+                Object.assign(current!.tab, tab);
+            }
+
+            this.setState({
+                current,
+                groups,
+            });
         }
         return tab;
     }

src/services/workbench/explorer/folderTreeService.ts

@@ -1,5 +1,6 @@
 import 'reflect-metadata';
 import { singleton, container } from 'tsyringe';
+import cloneDeep from 'lodash/cloneDeep';
 import { Component } from 'mo/react/component';
 import {
     FileTypes,
@@ -91,7 +92,10 @@ export class FolderTreeService
             }
             cloneData[index] = tree.obj;
             this.setState({
-                folderTree: { ...this.state.folderTree, data: cloneData },
+                folderTree: {
+                    ...this.state.folderTree,
+                    data: cloneDeep(cloneData),
+                },
             });
         } else {
             console.warn('Please check id again, there is not folder tree');

stories/extensions/test/index.tsx

@@ -106,6 +106,7 @@ export const ExtendTestPane: IExtension = {
                     id: randomId(),
                     name: '',
                     fileType: FileTypes.Folder,
+                    isLeaf: false,
                     isEditable: true,
                 })
             );