refactor: optimized naming

packages/editor/src/components/ComponentWrapper.tsx

@@ -7,6 +7,7 @@ import { ComponentWrapperType } from '@sunmao-ui/runtime';
 
 import { genOperation } from '../operations';
 import { EditorServices } from '../types';
+import { ExploreMenuTabs } from '../services/enum';
 
 type ComponentEditorState = 'drag' | 'select' | 'hover' | 'idle';
 
@@ -125,8 +126,7 @@ export function useComponentWrapper(services: EditorServices): ComponentWrapperT
       setHoverComponentId,
       dragOverComponentId,
       setDragOverComponentId,
-      setLeftTabIdx,
-      setRightTabIdx
+      setExploreMenuTab,
     } = editorStore;
 
     const [slots, isDroppable] = useMemo(() => {
@@ -158,7 +158,6 @@ export function useComponentWrapper(services: EditorServices): ComponentWrapperT
 
     const onClickWrapper = (e: React.MouseEvent<HTMLElement>) => {
       e.stopPropagation();
-      setRightTabIdx(0);
       setSelectedComponentId(component.id);
     };
     const onMouseEnterWrapper = (e: React.MouseEvent<HTMLElement>) => {
@@ -225,7 +224,7 @@ export function useComponentWrapper(services: EditorServices): ComponentWrapperT
       e.preventDefault();
       setDragOverComponentId('');
       setCurrentSlot(undefined);
-      setLeftTabIdx(1);
+      setExploreMenuTab(ExploreMenuTabs.UI_TREE);
       const creatingComponent = e.dataTransfer?.getData('component') || '';
       eventBus.send(
         'operation',

packages/editor/src/components/Editor.tsx

@@ -33,10 +33,10 @@ export const Editor: React.FC<Props> = observer(
       components,
       selectedComponentId,
       modules,
-      setLeftTabIdx,
-      setRightTabIdx,
-      leftTabIdx,
-      rightTabIdx,
+      toolMenuTab,
+      exploreMenuTab,
+      setToolMenuTab,
+      setExploreMenuTab
     } = editorStore;
 
     const [scale, setScale] = useState(100);
@@ -162,9 +162,9 @@ export const Editor: React.FC<Props> = observer(
               flexDirection="column"
               textAlign="left"
               isLazy
-              index={leftTabIdx}
-              onChange={idx => {
-                setLeftTabIdx(idx);
+              index={exploreMenuTab}
+              onChange={activatedTab => {
+                setExploreMenuTab(activatedTab);
               }}
             >
               <TabList background="gray.50">
@@ -204,9 +204,9 @@ export const Editor: React.FC<Props> = observer(
               height="100%"
               display="flex"
               flexDirection="column"
-              index={rightTabIdx}
-              onChange={idx => {
-                setRightTabIdx(idx);
+              index={toolMenuTab}
+              onChange={activatedTab => {
+                setToolMenuTab(activatedTab);
               }}
             >
               <TabList background="gray.50">

packages/editor/src/services/EditorStore.ts

@@ -6,6 +6,7 @@ import { EventBusType } from './eventBus';
 import { AppStorage } from './AppStorage';
 import { SchemaValidator } from '../validator';
 import { removeModuleId } from '../utils/addModuleId';
+import { ExploreMenuTabs, ToolMenuTabs } from './enum';
 
 type EditingTarget = {
   kind: 'app' | 'module';
@@ -19,10 +20,8 @@ export class EditorStore {
   _selectedComponentId = '';
   _hoverComponentId = '';
   _dragOverComponentId = '';
-  // default left tab: Explorer
-  _leftTabIdx = 0;
-  // default right tab: Insert
-  _rightTabIdx = 1;
+  exploreMenuTab = ExploreMenuTabs.EXPLORE;
+  toolMenuTab = ToolMenuTabs.INSERT;
   // current editor editing target(app or module)
   currentEditingTarget: EditingTarget = {
     kind: 'app',
@@ -75,6 +74,12 @@ export class EditorStore {
       }
     );
 
+    reaction(
+      () => this.selectedComponentId,
+      () => {
+        this.setToolMenuTab(ToolMenuTabs.INSPECT);
+      });
+
     this.updateCurrentEditingTarget('app', this.app.version, this.app.metadata.name);
   }
 
@@ -111,14 +116,6 @@ export class EditorStore {
     return this.currentComponentsVersion === this.lastSavedComponentsVersion;
   }
 
-  get leftTabIdx() {
-    return this._leftTabIdx;
-  }
-
-  get rightTabIdx() {
-    return this._rightTabIdx;
-  }
-
   // origin components of app of module
   // when switch app or module, components should refresh
   get originComponents(): ComponentSchema[] {
@@ -193,11 +190,11 @@ export class EditorStore {
     this.lastSavedComponentsVersion = val;
   };
 
-  setLeftTabIdx = (val: number) => {
-    this._leftTabIdx = val;
+  setExploreMenuTab = (val: ExploreMenuTabs) => {
+    this.exploreMenuTab = val;
   }
 
-  setRightTabIdx = (val: number) => {
-    this._rightTabIdx = val;
+  setToolMenuTab = (val: ToolMenuTabs) => {
+    this.toolMenuTab = val;
   }
 }

packages/editor/src/services/enum.ts

@@ -0,0 +1,13 @@
+/* eslint-disable no-unused-vars */
+enum ExploreMenuTabs {
+    EXPLORE = 0,
+    UI_TREE = 1,
+    STATE = 2
+}
+
+enum ToolMenuTabs {
+    INSPECT = 0,
+    INSERT = 1
+}
+
+export { ExploreMenuTabs, ToolMenuTabs };