refactor: remove main-layout mobx

opensumi · Nov 1, 2024 · d6ff3ea · d6ff3ea
1 parent 01cd2c5
commit d6ff3ea
Show file tree

Hide file tree

Showing 12 changed files with 318 additions and 314 deletions.
diff --git a/packages/ai-native/src/browser/layout/tabbar.view.tsx b/packages/ai-native/src/browser/layout/tabbar.view.tsx
@@ -1,7 +1,13 @@
 import cls from 'classnames';
 import React, { useCallback, useEffect, useMemo } from 'react';
 
-import { ComponentRegistryInfo, SlotLocation, useContextMenus, useInjectable } from '@opensumi/ide-core-browser';
+import {
+  ComponentRegistryInfo,
+  SlotLocation,
+  useAutorun,
+  useContextMenus,
+  useInjectable,
+} from '@opensumi/ide-core-browser';
 import { EDirection } from '@opensumi/ide-core-browser/lib/components';
 import {
   EnhanceIcon,
@@ -102,25 +108,26 @@ export const AILeftTabRenderer = ({
 }) => <DesignLeftTabRenderer className={className} components={components} tabbarView={AILeftTabbarRenderer} />;
 
 const AILeftTabbarRenderer: React.FC = () => {
-  const tabbarService: TabbarService = useInjectable(TabbarServiceFactory)(SlotLocation.right);
   const layoutService = useInjectable<IMainLayoutService>(IMainLayoutService);
 
+  const tabbarService: TabbarService = useInjectable(TabbarServiceFactory)(SlotLocation.right);
+  const currentContainerId = useAutorun(tabbarService.currentContainerId);
+
   const extraMenus = React.useMemo(() => layoutService.getExtraMenu(), [layoutService]);
   const [navMenu] = useContextMenus(extraMenus);
 
   const renderOtherVisibleContainers = useCallback(
     ({ renderContainers }) => {
-      const { currentContainerId, handleTabClick } = tabbarService;
       const visibleContainers = tabbarService.visibleContainers.filter((container) => !container.options?.hideTab);
 
       return (
         <>
           {visibleContainers.length > 0 && <HorizontalVertical margin={'8px auto 0px'} width={'60%'} />}
-          {visibleContainers.map((component) => renderContainers(component, handleTabClick, currentContainerId))}
+          {visibleContainers.map((component) => renderContainers(component, currentContainerId))}
         </>
       );
     },
-    [tabbarService],
+    [currentContainerId, tabbarService],
   );
 
   return (

diff --git a/packages/design/src/browser/menu-bar/menu-bar.view.tsx b/packages/design/src/browser/menu-bar/menu-bar.view.tsx
@@ -121,7 +121,7 @@ export const DesignMenuBarView = () => {
 
   const isVisiable = React.useCallback(() => {
     const tabbarService = mainLayoutService.getTabbarService(SlotLocation.left);
-    return !!tabbarService.currentContainerId;
+    return !!tabbarService.currentContainerId.get();
   }, [mainLayoutService]);
 
   return (

diff --git a/packages/main-layout/package.json b/packages/main-layout/package.json
@@ -24,6 +24,7 @@
     "@opensumi/ide-theme": "workspace:*"
   },
   "devDependencies": {
+    "@opensumi/ide-monaco": "workspace:*",
     "@opensumi/ide-dev-tool": "workspace:*"
   }
 }