feat(plugins/mpa): active tab when click the project files tree

Power-Playground · Nov 12, 2023 · ec0f0c6 · ec0f0c6
1 parent f304351
commit ec0f0c6
Showing 2 changed files with 22 additions and 0 deletions.
diff --git a/core/src/plugins/mpa/atoms.ts b/core/src/plugins/mpa/atoms.ts
@@ -15,6 +15,9 @@ export const useTabs = () => {
   const [tabs, setTabs] = useAtom(tabsAtom, { store: useStore() })
   return {
     tabs,
+    includeTab: useCallback((id: string) => {
+      return tabs.some(tab => tab.id === id)
+    }, [tabs]),
     setActiveTab: useCallback((id: string) => {
       setTabs(tabs => tabs.map(tab => ({ ...tab, active: tab.id === id })))
     }, [setTabs]),

diff --git a/core/src/plugins/mpa/drawerPanels/Project.tsx b/core/src/plugins/mpa/drawerPanels/Project.tsx
@@ -9,6 +9,7 @@ import type { DrawerPanelProps } from '../../../components/drawerPanelCreator'
 import { NotImplemented } from '../../../components/NotImplemented'
 import { useMenu } from '../../../hooks/useMenu'
 import { useVFiles } from '../../../virtual-files'
+import { useTabs } from '../atoms'
 
 const prefix = 'ppd-drawer-panel--project'
 
@@ -87,13 +88,31 @@ export default function Project({ template, setOnKeydown }: DrawerPanelProps) {
       ? prefix + '--dir-type__external'
       : undefined
   })), [vFiles])
+
+  const { includeTab, setActiveTab, addTab } = useTabs()
   return <>
     {viewModeSwitcherMenuPopper}
     <List
       ref={listRef}
       selectable
       items={filesForListItem}
       defaultFoldedIds={['/node_modules']}
+      onClickItem={(e, item, type) => {
+        switch (type) {
+          case 'click':
+            if (includeTab(item.id)) {
+              setActiveTab(item.id)
+            } else {
+              addTab({
+                id: item.id,
+                title: item.label,
+                icon: item.icon,
+                active: true
+              })
+            }
+            break
+        }
+      }}
     />
   </>
 }