feat(lab): support visible and hidden switching of side tab content area

weavefox · Jan 23, 2024 · d2ea7f1 · d2ea7f1
1 parent 2087e7b
commit d2ea7f1
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 1 deletion.
diff --git a/packages/libro-lab/src/layout/layout-service.ts b/packages/libro-lab/src/layout/layout-service.ts
@@ -1,5 +1,6 @@
 import { LibroNavigatableView, LibroService } from '@difizen/libro-jupyter';
 import type { View, ViewOpenHandlerOptions, ViewOpenOption } from '@difizen/mana-app';
+import { SideTabView } from '@difizen/mana-app';
 import { observable } from '@difizen/mana-app';
 import {
   DefaultSlotView,
@@ -32,6 +33,7 @@ export class LayoutService {
 
   @prop()
   serverSatus: StatusType = 'loading';
+
   @prop()
   visibilityMap: VisibilityMap = {
     [LibroLabLayoutSlots.header]: true,
@@ -96,6 +98,17 @@ export class LayoutService {
     return undefined;
   }
 
+  shouldRenderNavigatorContent(): boolean {
+    if (!this.visibilityMap[LibroLabLayoutSlots.navigator]) {
+      return false;
+    }
+    const slotView = this.slotViewManager.getSlotView(LibroLabLayoutSlots.navigator);
+    if (slotView instanceof SideTabView) {
+      return !!slotView.showTabContent;
+    }
+    return false;
+  }
+
   async onOpenSlotActiveChange() {
     if (this.isAreaVisible(LibroLabLayoutSlots.content)) {
       const slotView = await this.slotViewManager.getOrCreateSlotView(

diff --git a/packages/libro-lab/src/layout/main.tsx b/packages/libro-lab/src/layout/main.tsx
@@ -10,14 +10,26 @@ import { LibroLabLayoutSlots } from './protocol.js';
 export const LibroLabLayoutMainComponent = forwardRef(
   function LibroLabLayoutMainComponent() {
     const layoutService = useInject(LayoutService);
+    const navigatorSize = layoutService.shouldRenderNavigatorContent()
+      ? {
+          minSize: 40,
+          defaultSize: 300,
+          maxSize: undefined,
+        }
+      : {
+          minSize: 40,
+          defaultSize: 40,
+          maxSize: 40,
+          noResize: true,
+        };
 
     return (
       <SplitPanel id="libro-lab-content-layout">
         {layoutService.isAreaVisible(LibroLabLayoutSlots.navigator) && (
           <SplitPanel.Pane
             id="libro-lab-content-layout-left"
             className="libro-lab-content-layout-left"
-            defaultSize={300}
+            {...navigatorSize}
           >
             <Slot name={LibroLabLayoutSlots.navigator} />
           </SplitPanel.Pane>

diff --git a/packages/libro-lab/src/module.tsx b/packages/libro-lab/src/module.tsx
@@ -71,6 +71,7 @@ export const LibroLabModule = ManaModule.create()
       slot: LibroLabLayoutSlots.navigator,
       options: {
         sort: true,
+        contentToggable: true,
       },
     }),
     createViewPreference({