From a08b3d7d3201a1cbc32e7b4f3afcb7a2665f9451 Mon Sep 17 00:00:00 2001 From: mortalYoung Date: Thu, 15 Jul 2021 15:25:28 +0800 Subject: [PATCH] fix: update foldertree new folder --- src/components/tree/index.tsx | 25 ++++++++ src/extensions/folderTree/index.tsx | 20 +++++- src/model/workbench/explorer/folderTree.tsx | 7 +++ src/services/workbench/editorService.ts | 62 +++++++++++++++---- .../workbench/explorer/folderTreeService.ts | 6 +- stories/extensions/test/index.tsx | 1 + 6 files changed, 106 insertions(+), 15 deletions(-) diff --git a/src/components/tree/index.tsx b/src/components/tree/index.tsx index 046510f18..38f9caea7 100644 --- a/src/components/tree/index.tsx +++ b/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 (
diff --git a/src/extensions/folderTree/index.tsx b/src/extensions/folderTree/index.tsx index 2119fa5eb..88b1afa61 100644 --- a/src/extensions/folderTree/index.tsx +++ b/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 } diff --git a/src/model/workbench/explorer/folderTree.tsx b/src/model/workbench/explorer/folderTree.tsx index f16c3cfda..44f099ad9 100644 --- a/src/model/workbench/explorer/folderTree.tsx +++ b/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; } } diff --git a/src/services/workbench/editorService.ts b/src/services/workbench/editorService.ts index 3f4fe0fc1..d71e62860 100644 --- a/src/services/workbench/editorService.ts +++ b/src/services/workbench/editorService.ts @@ -26,11 +26,19 @@ export interface IEditorService extends Component { tabId: string, group: IEditorGroup ): IEditorTab | 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; } diff --git a/src/services/workbench/explorer/folderTreeService.ts b/src/services/workbench/explorer/folderTreeService.ts index b1b706719..00d9a9c5c 100644 --- a/src/services/workbench/explorer/folderTreeService.ts +++ b/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'); diff --git a/stories/extensions/test/index.tsx b/stories/extensions/test/index.tsx index c0fdbc587..e32fce3a7 100644 --- a/stories/extensions/test/index.tsx +++ b/stories/extensions/test/index.tsx @@ -106,6 +106,7 @@ export const ExtendTestPane: IExtension = { id: randomId(), name: '', fileType: FileTypes.Folder, + isLeaf: false, isEditable: true, }) );