Support Hidden Tabs

Author: ioedeveloper

apps/remix-ide/src/app/panels/tab-proxy.js

@@ -186,7 +186,8 @@ export default class TabProxy extends Plugin {
             this.call('manager', 'deactivatePlugin', name)
           },
           icon,
-          description
+          description,
+          show
         )
         show && this.switchTab(name)
       }
@@ -210,6 +211,7 @@ export default class TabProxy extends Plugin {
 
   focus (name) {
     this.emit('switchApp', name)
+    this.loadedTabs.find(tab => tab.name === name).show = true
     this.tabsApi.activateTab(name)
   }
 
@@ -259,7 +261,7 @@ export default class TabProxy extends Plugin {
    * @param {string} description
    * @returns
    */
-  addTab (name, title, switchTo, close, icon, description = '') {
+  addTab (name, title, switchTo, close, icon, description = '', show = true) {
     if (this._handlers[name]) return this.renderComponent()
 
     if ((name.endsWith('.vy') && icon === undefined) || title.includes('Vyper')) {
@@ -290,7 +292,8 @@ export default class TabProxy extends Plugin {
             title,
             icon,
             tooltip: name,
-            iconClass: getPathIcon(name)
+            iconClass: getPathIcon(name),
+            show
           })
           formatPath.shift()
           if (formatPath.length > 0) {
@@ -307,7 +310,8 @@ export default class TabProxy extends Plugin {
                 title: duplicateTabTitle,
                 icon,
                 tooltip: duplicateTabTooltip || duplicateTabTitle,
-                iconClass: getPathIcon(duplicateTabName)
+                iconClass: getPathIcon(duplicateTabName),
+                show
               }
             }
           }
@@ -321,7 +325,8 @@ export default class TabProxy extends Plugin {
         title,
         icon,
         tooltip: description || title,
-        iconClass: getPathIcon(name)
+        iconClass: getPathIcon(name),
+        show
       })
     }
 

libs/remix-ui/tabs/src/lib/remix-ui-tabs.tsx

@@ -34,6 +34,7 @@ export interface Tab {
   name: string
   title: string
   tooltip: string
+  show: boolean
 }
 export interface TabsUIApi {
   activateTab: (name: string) => void
@@ -95,7 +96,7 @@ export const TabsUI = (props: TabsUIProps) => {
   const [compileState, setCompileState] = useState<'idle' | 'compiling' | 'compiled'>('idle')
 
   useEffect(() => {
-    if (props.tabs[tabsState.selectedIndex]) {
+    if (props.tabs[tabsState.selectedIndex] && props.tabs[tabsState.selectedIndex].show) {
       tabsRef.current[tabsState.selectedIndex].scrollIntoView({
         behavior: 'smooth',
         block: 'center'
@@ -614,14 +615,14 @@ export const TabsUI = (props: TabsUIProps) => {
         >
           <TabList className="d-flex flex-row align-items-center">
             {props.tabs.map((tab, i) => (
-              <Tab className="" key={tab.name} data-id={tab.id}>
+              tab.show && <Tab className="" key={tab.name} data-id={tab.id}>
                 {renderTab(tab, i)}
               </Tab>
             ))}
             <div style={{ minWidth: '4rem', height: '1rem' }} id="dummyElForLastXVisibility"></div>
           </TabList>
           {props.tabs.map((tab) => (
-            <TabPanel key={tab.name}></TabPanel>
+            tab.show && <TabPanel key={tab.name}></TabPanel>
           ))}
         </Tabs>