Merge pull request #1133 from merico-dev/1131-tab-list-of-tab-view-co…

…uld-be-fixed-to-screen 1131 tab list of tab view could be fixed to screen
merico-dev · Aug 16, 2023 · 13f3a02 · 13f3a02
2 parents cedbcc0 + 647b2e9
commit 13f3a02
Show file tree

Hide file tree

Showing 11 changed files with 111 additions and 105 deletions.
diff --git a/api/package.json b/api/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@devtable/api",
-  "version": "10.19.0",
+  "version": "10.20.0",
   "description": "",
   "main": "index.js",
   "scripts": {

diff --git a/dashboard/package.json b/dashboard/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@devtable/dashboard",
-  "version": "10.19.0",
+  "version": "10.20.0",
   "license": "Apache-2.0",
   "publishConfig": {
     "access": "public",

diff --git a/dashboard/src/components/view/view-component/preview/index.tsx b/dashboard/src/components/view/view-component/preview/index.tsx
@@ -10,7 +10,7 @@ export const PreviewViewComponent = observer(({ view, children }: { view: ViewMe
     case EViewComponentType.Modal:
       return <PreviewViewModal view={view}>{children}</PreviewViewModal>;
     case EViewComponentType.Tabs:
-      return <PreviewViewTabs view={view}>{children}</PreviewViewTabs>;
+      return <PreviewViewTabs view={view} />;
     case EViewComponentType.Division:
     default:
       return <PreviewViewDivision view={view}>{children}</PreviewViewDivision>;

diff --git a/dashboard/src/components/view/view-component/preview/tabs.tsx b/dashboard/src/components/view/view-component/preview/tabs.tsx
@@ -2,14 +2,17 @@ import { Box, Button, ColorInput, Overlay, Select, Stack, Sx, Tabs, TextInput }
 import { useModals } from '@mantine/modals';
 import { IconArrowsLeftRight, IconTrash } from '@tabler/icons-react';
 import { observer } from 'mobx-react-lite';
-import { ReactNode, useMemo } from 'react';
+import { useMemo } from 'react';
 import { Plus } from 'tabler-icons-react';
 import { DashboardViewRender } from '~/components/view';
 import { useEditContentModelContext } from '~/contexts';
 import { EViewComponentType, TabModelInstance, ViewMetaInstance, ViewTabsConfigInstance } from '~/model';
 
 const getStyles = ({ variant, orientation }: ViewTabsConfigInstance) => {
   const ret: Record<string, any> = {
+    root: {
+      height: '100%',
+    },
     tab: {},
     panel: {
       padding: '16px',
@@ -40,7 +43,7 @@ const getTabSX = (t: TabModelInstance): Sx => {
   return {};
 };
 
-export const PreviewViewTabs = observer(({ children, view }: { children: ReactNode; view: ViewMetaInstance }) => {
+export const PreviewViewTabs = observer(({ view }: { view: ViewMetaInstance }) => {
   const modals = useModals();
   const model = useEditContentModelContext();
   const options = useMemo(
@@ -64,71 +67,69 @@ export const PreviewViewTabs = observer(({ children, view }: { children: ReactNo
 
   const onlyOneTabLeft = config.tabs.length === 0;
   return (
-    <Box className="preview-view-tabs">
-      <Tabs
-        variant={config.variant}
-        orientation={config.orientation}
-        defaultValue={config.tabs.length > 0 ? config.tabs[0].id : '0'}
-        styles={getStyles(config)}
-      >
-        <Tabs.List grow={config.grow}>
-          {config.tabs.map((t) => (
-            <Tabs.Tab key={t.id} value={t.id} sx={getTabSX(t)}>
-              {t.name ?? t.id}
-            </Tabs.Tab>
-          ))}
-          <Tabs.Tab onClick={config.addTab} value="add" className="add-a-tab">
-            <Plus size={18} color="#228be6" />
+    <Tabs
+      className="preview-view-tabs"
+      variant={config.variant}
+      orientation={config.orientation}
+      defaultValue={config.tabs.length > 0 ? config.tabs[0].id : '0'}
+      styles={getStyles(config)}
+    >
+      <Tabs.List grow={config.grow}>
+        {config.tabs.map((t) => (
+          <Tabs.Tab key={t.id} value={t.id} sx={getTabSX(t)}>
+            {t.name ?? t.id}
           </Tabs.Tab>
-        </Tabs.List>
-        {config.tabs.map((t, i) => {
-          const tabView = model.views.findByID(t.view_id);
-          return (
-            <Tabs.Panel key={t.id} value={t.id} sx={{ position: 'relative' }}>
-              <Box sx={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, zIndex: 200 }}>
-                <Overlay opacity={0.8} color="#FFF" blur={10} zIndex={100} />
-
-                <Stack mx="auto" mt={100} sx={{ width: '300px', position: 'relative', zIndex: 200 }}>
-                  <TextInput label="Tab Name" value={t.name} onChange={(e) => t.setName(e.currentTarget.value)} />
-                  <Select label="View" value={t.view_id} onChange={t.setViewID} data={options} />
-                  <ColorInput
-                    label="Color"
-                    value={t.color}
-                    onChange={t.setColor}
-                    disabled={config.variant !== 'default'}
-                  />
+        ))}
+        <Tabs.Tab onClick={config.addTab} value="add" className="add-a-tab">
+          <Plus size={18} color="#228be6" />
+        </Tabs.Tab>
+      </Tabs.List>
+      {config.tabs.map((t, i) => {
+        const tabView = model.views.findByID(t.view_id);
+        return (
+          <Tabs.Panel key={t.id} value={t.id} sx={{ position: 'relative' }}>
+            <Box sx={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, zIndex: 200 }}>
+              <Overlay opacity={0.8} color="#FFF" blur={10} zIndex={100} />
 
-                  {tabView && (
-                    <Button
-                      mt={20}
-                      variant="gradient"
-                      leftIcon={<IconArrowsLeftRight size={18} />}
-                      gradient={{ from: 'cyan', to: 'indigo' }}
-                      onClick={() => model.views.setIDOfVIE(tabView.id)}
-                    >
-                      Swith to View: {tabView.name}
-                    </Button>
-                  )}
+              <Stack mx="auto" mt={100} sx={{ width: '300px', position: 'relative', zIndex: 200 }}>
+                <TextInput label="Tab Name" value={t.name} onChange={(e) => t.setName(e.currentTarget.value)} />
+                <Select label="View" value={t.view_id} onChange={t.setViewID} data={options} />
+                <ColorInput
+                  label="Color"
+                  value={t.color}
+                  onChange={t.setColor}
+                  disabled={config.variant !== 'default'}
+                />
 
+                {tabView && (
                   <Button
                     mt={20}
-                    variant="subtle"
-                    color="red"
-                    onClick={() => remove(i)}
-                    disabled={onlyOneTabLeft}
-                    leftIcon={<IconTrash size={14} />}
+                    variant="gradient"
+                    leftIcon={<IconArrowsLeftRight size={18} />}
+                    gradient={{ from: 'cyan', to: 'indigo' }}
+                    onClick={() => model.views.setIDOfVIE(tabView.id)}
                   >
-                    Delete This Tab
+                    Swith to View: {tabView.name}
                   </Button>
-                </Stack>
-              </Box>
+                )}
+
+                <Button
+                  mt={20}
+                  variant="subtle"
+                  color="red"
+                  onClick={() => remove(i)}
+                  disabled={onlyOneTabLeft}
+                  leftIcon={<IconTrash size={14} />}
+                >
+                  Delete This Tab
+                </Button>
+              </Stack>
+            </Box>
 
-              {tabView && <DashboardViewRender view={tabView} />}
-            </Tabs.Panel>
-          );
-        })}
-      </Tabs>
-      {children}
-    </Box>
+            {tabView && <DashboardViewRender view={tabView} />}
+          </Tabs.Panel>
+        );
+      })}
+    </Tabs>
   );
 });
diff --git a/dashboard/src/components/view/view-component/render/index.tsx b/dashboard/src/components/view/view-component/render/index.tsx
@@ -10,7 +10,7 @@ export const RenderViewComponent = observer(({ view, children }: { view: ViewMet
     case EViewComponentType.Modal:
       return <RenderViewModal view={view}>{children}</RenderViewModal>;
     case EViewComponentType.Tabs:
-      return <RenderViewTabs view={view}>{children}</RenderViewTabs>;
+      return <RenderViewTabs view={view} />;
     case EViewComponentType.Division:
     default:
       return <RenderViewDivision view={view}>{children}</RenderViewDivision>;

diff --git a/dashboard/src/components/view/view-component/render/tabs.tsx b/dashboard/src/components/view/view-component/render/tabs.tsx
@@ -1,6 +1,5 @@
-import { Box, Sx, Tabs } from '@mantine/core';
+import { Sx, Tabs } from '@mantine/core';
 import { observer } from 'mobx-react-lite';
-import { ReactNode } from 'react';
 import { DashboardViewRender } from '~/components/view';
 import { useRenderContentModelContext } from '~/contexts';
 import { TabModelInstance, ViewMetaInstance, ViewTabsConfigInstance } from '~/model';
@@ -12,42 +11,45 @@ const getTabSX = (t: TabModelInstance): Sx => {
   return {};
 };
 
-export const RenderViewTabs = observer(({ children, view }: { children: ReactNode; view: ViewMetaInstance }) => {
+export const RenderViewTabs = observer(({ view }: { view: ViewMetaInstance }) => {
   const model = useRenderContentModelContext();
   const config = view.config as ViewTabsConfigInstance;
   return (
-    <Box className="render-view-tabs">
-      <Tabs
-        variant={config.variant}
-        orientation={config.orientation}
-        defaultValue={config.tabs.length > 0 ? config.tabs[0].id : '0'}
-        styles={{
-          panel: {
-            padding: config.orientation === 'horizontal' ? '16px 0px' : '0',
-          },
-        }}
-        keepMounted={false}
-      >
-        <Tabs.List grow={config.grow}>
-          {config.tabs.map((t) => (
-            <Tabs.Tab key={t.id} value={t.id} sx={getTabSX(t)} disabled={!t.view_id}>
-              {t.name ?? t.id}
-            </Tabs.Tab>
-          ))}
-        </Tabs.List>
-        {config.tabs.map((t) => {
-          const tabView = model.views.findByID(t.view_id);
-          if (!tabView) {
-            return null;
-          }
-          return (
-            <Tabs.Panel key={t.id} value={t.id}>
-              <DashboardViewRender view={tabView} />
-            </Tabs.Panel>
-          );
-        })}
-      </Tabs>
-      {children}
-    </Box>
+    <Tabs
+      className="render-view-tabs"
+      variant={config.variant}
+      orientation={config.orientation}
+      defaultValue={config.tabs.length > 0 ? config.tabs[0].id : '0'}
+      styles={{
+        root: {
+          height: '100%',
+        },
+        panel: {
+          padding: config.orientation === 'horizontal' ? '16px 0px' : '0',
+          height: '100%',
+          overflow: 'auto',
+        },
+      }}
+      keepMounted={false}
+    >
+      <Tabs.List grow={config.grow}>
+        {config.tabs.map((t) => (
+          <Tabs.Tab key={t.id} value={t.id} sx={getTabSX(t)} disabled={!t.view_id}>
+            {t.name ?? t.id}
+          </Tabs.Tab>
+        ))}
+      </Tabs.List>
+      {config.tabs.map((t) => {
+        const tabView = model.views.findByID(t.view_id);
+        if (!tabView) {
+          return null;
+        }
+        return (
+          <Tabs.Panel key={t.id} value={t.id}>
+            <DashboardViewRender view={tabView} />
+          </Tabs.Panel>
+        );
+      })}
+    </Tabs>
   );
 });
diff --git a/dashboard/src/dashboard-editor/ui/header/sub-header.tsx b/dashboard/src/dashboard-editor/ui/header/sub-header.tsx
@@ -2,6 +2,7 @@ import { Box, Button, Group, Sx } from '@mantine/core';
 import { IconPlaylistAdd } from '@tabler/icons-react';
 import { observer } from 'mobx-react-lite';
 import { useEditContentModelContext } from '~/contexts';
+import { EViewComponentType } from '~/model';
 
 const SubHeaderSx: Sx = {
   position: 'fixed',
@@ -16,6 +17,7 @@ const SubHeaderSx: Sx = {
 
 export const SubHeader = observer(() => {
   const model = useEditContentModelContext();
+  const cant = model.views.VIE?.type === EViewComponentType.Tabs;
   return (
     <Box sx={SubHeaderSx} pl={{ base: 200, xs: 200, sm: 200, md: 220, lg: 240, xl: 260 }}>
       <Group position="apart" align="center" sx={{ height: '30px' }} pr={16}>
@@ -24,7 +26,7 @@ export const SubHeader = observer(() => {
           color="blue"
           radius={0}
           size="xs"
-          disabled={!model.views.VIE}
+          disabled={!model.views.VIE || cant}
           onClick={() => model.addANewPanel(model.views.idOfVIE)}
           leftIcon={<IconPlaylistAdd size={20} />}
           sx={{

diff --git a/dashboard/src/dashboard-editor/ui/settings/navbar/add-item-button/add-a-panel.tsx b/dashboard/src/dashboard-editor/ui/settings/navbar/add-item-button/add-a-panel.tsx
@@ -2,6 +2,7 @@ import { Button } from '@mantine/core';
 import { IconPlus } from '@tabler/icons-react';
 import { observer } from 'mobx-react-lite';
 import { useEditContentModelContext } from '~/contexts';
+import { EViewComponentType } from '~/model';
 
 interface IAddAPanel {
   parentID?: string;
@@ -13,7 +14,7 @@ export const AddAPanel = observer(({ parentID }: IAddAPanel) => {
     return null;
   }
   const view = model.views.findByID(parentID);
-  if (!view) {
+  if (!view || view.type === EViewComponentType.Tabs) {
     return null;
   }
   return (

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@devtable/root",
-  "version": "10.19.0",
+  "version": "10.20.0",
   "private": true,
   "workspaces": [
     "api",

diff --git a/settings-form/package.json b/settings-form/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@devtable/settings-form",
-  "version": "10.19.0",
+  "version": "10.20.0",
   "license": "Apache-2.0",
   "publishConfig": {
     "access": "public",

diff --git a/website/package.json b/website/package.json
@@ -2,7 +2,7 @@
   "name": "@devtable/website",
   "private": true,
   "license": "Apache-2.0",
-  "version": "10.19.0",
+  "version": "10.20.0",
   "scripts": {
     "dev": "vite",
     "preview": "vite preview"