fix: rename data backfill

rename data backfill

Author: zhangtengjin

src/components/menu/menu.tsx

@@ -8,7 +8,7 @@ import {
     verticalMenuClassName,
 } from './base';
 
-export interface IMenu extends ISubMenu { }
+export interface IMenu extends ISubMenu {}
 
 export function Menu(props: React.PropsWithChildren<IMenu>) {
     const {

src/components/toolbar/index.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { prefixClaName, classNames } from 'mo/common/className';
 import ActionBar, { IActionBar } from 'mo/components/actionBar';
 
-export interface IToolBar<T = any> extends IActionBar { }
+export interface IToolBar<T = any> extends IActionBar {}
 
 const rootClassName = 'tool-bar';
 

src/components/tree/index.tsx

@@ -52,11 +52,11 @@ export interface ITreeProps {
     expandedKeys?: Key[];
     defaultCheckedKeys?: Key[];
     checkedKeys?:
-        | Key[]
-        | {
-              checked: Key[];
-              halfChecked: Key[];
-          };
+    | Key[]
+    | {
+        checked: Key[];
+        halfChecked: Key[];
+    };
     defaultSelectedKeys?: Key[];
     selectedKeys?: Key[];
     titleRender?: (node: DataNode) => React.ReactNode;
@@ -119,7 +119,7 @@ export interface ITreeProps {
     draggable?: boolean;
 
     data?: ITreeNodeItem[];
-    onSelectFile?: (IMenuItem) => void;
+    onSelectFile?: (IMenuItem, isAuto?) => void;
     onSelectTree?: (id) => void;
     renderTitle?: (node, index) => React.ReactDOM | string;
     onDropTree?(treeNode): void;

src/controller/explorer/explorer.tsx

@@ -13,7 +13,10 @@ import { IActionBarItem } from 'mo/components/actionBar';
 // TODO: 自依赖问题 connect 失效，暂时手动引入 Controller 往 View 层传递
 import { folderTreeController, explorerController } from 'mo/controller';
 export interface IExplorerController {
-    onHeaderToolbarContextMenuClick?: (e: React.MouseEvent, item: IActionBarItem) => void;
+    onHeaderToolbarContextMenuClick?: (
+        e: React.MouseEvent,
+        item: IActionBarItem
+    ) => void;
 }
 
 @singleton()
@@ -108,9 +111,7 @@ export class ExplorerController
             },
         };
 
-        explorerService.addPanel([
-            sampleFolderPanel,
-        ]);
+        explorerService.addPanel([sampleFolderPanel]);
     }
 
     private createFile = (e, type) => {

src/controller/explorer/folderTree.tsx

@@ -10,14 +10,14 @@ import Modal from 'mo/components/dialog';
 const confirm = Modal.confirm;
 
 export interface IFolderTreeController {
-    readonly onSelectFile?: (file: ITreeNodeItem) => void;
+    readonly onSelectFile?: (file: ITreeNodeItem, isAuto?: boolean) => void;
     readonly onSelectTree?: (id: number) => void;
     readonly onDropTree?: (treeNode: ITreeNodeItem[]) => void;
     readonly onClickContextMenu?: (
         e: React.MouseEvent,
         item: IMenuItem,
         node: ITreeNodeItem,
-        callback?: Function
+        events?: Object
     ) => void;
     readonly filterContextMenu?: (
         menus: IMenuItem[],
@@ -36,7 +36,7 @@ export class FolderTreeController
 
     private initView() { }
 
-    public readonly onSelectFile = (file: ITreeNodeItem) => {
+    public readonly onSelectFile = (file: ITreeNodeItem, isAuto?: boolean) => {
         const tabData = {
             ...file,
             id: `${file.id}`,
@@ -48,7 +48,21 @@ export class FolderTreeController
             },
             breadcrumb: [{ id: `${file.id}`, name: 'editor.js' }],
         };
-        editorService.open(tabData);
+        if (isAuto) {
+            // 更新文件自动回调
+            const editorState = editorService.getState();
+
+            const { id, data = [] } = editorState?.current || {};
+            const tabId = file.id;
+            const index = data?.findIndex(tab => tab.id == tabId);
+            if (index > -1) {
+                if (id) editorService.updateTab(tabData, id)
+            } else {
+                editorService.open(tabData);
+            }
+        } else {
+            editorService.open(tabData);
+        }
     };
 
     public onSelectTree = (id: number) => {
@@ -63,14 +77,15 @@ export class FolderTreeController
         e: React.MouseEvent,
         item: IMenuItem,
         node: ITreeNodeItem,
-        callback?: Function
+        events?: Object
     ) => {
         const menuId = item.id;
         const { id: nodeId, name } = node as any;
         switch (menuId) {
             case 'rename': {
                 explorerService.rename(nodeId, () => {
-                    if (callback) callback();
+                    events?.['setValue'](name);
+                    events?.['onFocus']();
                 });
                 break;
             }
@@ -91,13 +106,13 @@ export class FolderTreeController
             }
             case 'newFile': {
                 explorerService.newFile(nodeId, () => {
-                    if (callback) callback();
+                    events?.['onFocus']();
                 });
                 break;
             }
             case 'newFolder': {
                 explorerService.newFolder(nodeId, () => {
-                    if (callback) callback();
+                    events?.['onFocus']();
                 });
                 break;
             }

src/model/workbench/explorer.tsx

@@ -24,29 +24,31 @@ export interface IExplorer {
     folderTree?: IFolderTree;
 }
 
-const builtInHeaderToolbar: IActivityBarItem[] = [{
-    id: 'explorer-more',
-    name: 'View and More Actions...',
-    iconName: 'codicon-ellipsis',
-    type: 'global',
-    contextMenu: [
-        {
-            id: 'OpenEditors',
-            name: 'Open Editors',
-            icon: 'check'
-        },
-        {
-            id: 'Folders',
-            name: 'Folders',
-            icon: 'check'
-        },
-        {
-            id: 'Outline',
-            name: 'Outline',
-            icon: 'check'
-        },
-    ],
-}]
+const builtInHeaderToolbar: IActivityBarItem[] = [
+    {
+        id: 'explorer-more',
+        name: 'View and More Actions...',
+        iconName: 'codicon-ellipsis',
+        type: 'global',
+        contextMenu: [
+            {
+                id: 'OpenEditors',
+                name: 'Open Editors',
+                icon: 'check',
+            },
+            {
+                id: 'Folders',
+                name: 'Folders',
+                icon: 'check',
+            },
+            {
+                id: 'Outline',
+                name: 'Outline',
+                icon: 'check',
+            },
+        ],
+    },
+];
 
 const commonContextMenu = [
     {

src/services/workbench/explorerService.ts

@@ -5,9 +5,7 @@ import {
     IExplorer,
     IExplorerModel,
 } from 'mo/model/workbench/explorer';
-import {
-    DEFAULT_PANELS
-} from 'mo/model/workbench/explorer';
+import { DEFAULT_PANELS } from 'mo/model/workbench/explorer';
 import { TreeViewUtil, searchById } from '../helper';
 import { ITreeNodeItem, FileTypes, FileType } from 'mo/components/tree';
 import { editorService } from 'mo';
@@ -65,11 +63,11 @@ export class ExplorerService
         const next = [...data!];
         const index = next.findIndex(searchById(id));
         if (index > -1) {
-            this.remove(id)
+            this.remove(id);
         } else {
-            const existPanel = DEFAULT_PANELS.find(searchById(id))
+            const existPanel = DEFAULT_PANELS.find(searchById(id));
             if (!existPanel) return;
-            this.addPanel(existPanel)
+            this.addPanel(existPanel);
         }
     }
 

src/workbench/activityBar/activityBarItem.tsx

@@ -24,7 +24,7 @@ function ActivityBarItem(props: IActivityBarItem & IActivityBarController) {
         id,
         onClick,
         contextMenu = [],
-        className
+        className,
     } = props;
     let content: React.ReactNode = '';
     if (render) {
@@ -33,10 +33,13 @@ function ActivityBarItem(props: IActivityBarItem & IActivityBarController) {
 
     let contextViewMenu;
 
-    const onClickMenuItem = useCallback((e, item) => {
-        if (onClick) onClick(e, item);
-        contextViewMenu?.dispose();
-    }, [contextMenu]);
+    const onClickMenuItem = useCallback(
+        (e, item) => {
+            if (onClick) onClick(e, item);
+            contextViewMenu?.dispose();
+        },
+        [contextMenu]
+    );
     const renderContextMenu = () => (
         <Menu onClick={onClickMenuItem} data={contextMenu} />
     );

src/workbench/sidebar/explore/base.ts

@@ -1,11 +1,15 @@
-import { getBEMElement, getBEMModifier, prefixClaName } from 'mo/common/className';
+import {
+    getBEMElement,
+    getBEMModifier,
+    prefixClaName,
+} from 'mo/common/className';
 import { ID_ACTIVITY_BAR, ID_SIDE_BAR, ID_EXPLORER } from 'mo/common/id';
 
 export const defaultClassName = prefixClaName(ID_SIDE_BAR);
 const defaultExplorerClassName = prefixClaName(ID_EXPLORER, defaultClassName);
-const activityBarItemFloatClassName = getBEMModifier(getBEMElement(defaultExplorerClassName, ID_ACTIVITY_BAR), 'float')
+const activityBarItemFloatClassName = getBEMModifier(
+    getBEMElement(defaultExplorerClassName, ID_ACTIVITY_BAR),
+    'float'
+);
 
-export {
-    defaultExplorerClassName,
-    activityBarItemFloatClassName
-}
+export { defaultExplorerClassName, activityBarItemFloatClassName };

src/workbench/sidebar/explore/explore.tsx

@@ -7,13 +7,17 @@ import ActivityBarItem from 'mo/workbench/activityBar/activityBarItem';
 import { IActivityBarItem } from 'mo/model/workbench/activityBar';
 import {
     defaultExplorerClassName,
-    activityBarItemFloatClassName
+    activityBarItemFloatClassName,
 } from './base';
 
 export const Explorer: React.FunctionComponent<IExplorer> = (
     props: IExplorer & IExplorerController
 ) => {
-    const { data = [], headerToolBar = [], onHeaderToolbarContextMenuClick } = props;
+    const {
+        data = [],
+        headerToolBar = [],
+        onHeaderToolbarContextMenuClick,
+    } = props;
     const renderItems = (item: IActivityBarItem, index: number) => {
         return (
             <ActivityBarItem

src/workbench/sidebar/explore/folderTree.tsx

@@ -26,25 +26,38 @@ const FolderTree: React.FunctionComponent<IFolderTree> = (
 
     const contextView = useContextView();
 
+    const onFocus = () => {
+        setTimeout(() => {
+            if (inputRef.current) {
+                inputRef.current.focus();
+            }
+        });
+    };
+
+    const setInputVal = (val) => {
+        setTimeout(() => {
+            if (inputRef.current) {
+                inputRef.current.value = val
+            }
+        });
+    }
+
+    const inputEvents = {
+        onFocus,
+        setValue: (val) => setInputVal(val)
+    }
+
     const handleRightClick = ({ event, node }) => {
         const menuItems = filterContextMenu?.(contextMenu, node.data);
         const handleOnMenuClick = (e: React.MouseEvent, item) => {
-            onClickContextMenu?.(e, item, node.data, onFocus);
+            onClickContextMenu?.(e, item, node.data, inputEvents);
             contextView.hide();
         };
         contextView?.show(getEventPosition(event), () => (
             <Menu onClick={handleOnMenuClick} data={menuItems} />
         ));
     };
 
-    const onFocus = () => {
-        setTimeout(() => {
-            if (inputRef.current) {
-                inputRef.current.focus();
-            }
-        });
-    };
-
     const handleUpdateFile = (e, node) => {
         const newName = (e.target as HTMLInputElement).value;
         explorerService.updateFile(
@@ -57,7 +70,7 @@ const FolderTree: React.FunctionComponent<IFolderTree> = (
                     onSelectFile?.({
                         ...node,
                         name: newName,
-                    });
+                    }, true);
                 }
             }
         );