Skip to content

Commit 13f3a02

Browse files
GerilLetoGerilLeto
authored
Merge pull request #1133 from merico-dev/1131-tab-list-of-tab-view-could-be-fixed-to-screen
1131 tab list of tab view could be fixed to screen
2 parents cedbcc0 + 647b2e9 commit 13f3a02

File tree

11 files changed

+111
-105
lines changed

11 files changed

+111
-105
lines changed

‎api/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@devtable/api",
3-
"version": "10.19.0",
3+
"version": "10.20.0",
44
"description": "",
55
"main": "index.js",
66
"scripts": {

‎dashboard/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@devtable/dashboard",
3-
"version": "10.19.0",
3+
"version": "10.20.0",
44
"license": "Apache-2.0",
55
"publishConfig": {
66
"access": "public",

‎dashboard/src/components/view/view-component/preview/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export const PreviewViewComponent = observer(({ view, children }: { view: ViewMe
1010
case EViewComponentType.Modal:
1111
return <PreviewViewModal view={view}>{children}</PreviewViewModal>;
1212
case EViewComponentType.Tabs:
13-
return <PreviewViewTabs view={view}>{children}</PreviewViewTabs>;
13+
return <PreviewViewTabs view={view} />;
1414
case EViewComponentType.Division:
1515
default:
1616
return <PreviewViewDivision view={view}>{children}</PreviewViewDivision>;

‎dashboard/src/components/view/view-component/preview/tabs.tsx‎

Lines changed: 61 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,17 @@ import { Box, Button, ColorInput, Overlay, Select, Stack, Sx, Tabs, TextInput }
22
import { useModals } from '@mantine/modals';
33
import { IconArrowsLeftRight, IconTrash } from '@tabler/icons-react';
44
import { observer } from 'mobx-react-lite';
5-
import { ReactNode, useMemo } from 'react';
5+
import { useMemo } from 'react';
66
import { Plus } from 'tabler-icons-react';
77
import { DashboardViewRender } from '~/components/view';
88
import { useEditContentModelContext } from '~/contexts';
99
import { EViewComponentType, TabModelInstance, ViewMetaInstance, ViewTabsConfigInstance } from '~/model';
1010

1111
const getStyles = ({ variant, orientation }: ViewTabsConfigInstance) => {
1212
const ret: Record<string, any> = {
13+
root: {
14+
height: '100%',
15+
},
1316
tab: {},
1417
panel: {
1518
padding: '16px',
@@ -40,7 +43,7 @@ const getTabSX = (t: TabModelInstance): Sx => {
4043
return {};
4144
};
4245

43-
export const PreviewViewTabs = observer(({ children, view }: { children: ReactNode; view: ViewMetaInstance }) => {
46+
export const PreviewViewTabs = observer(({ view }: { view: ViewMetaInstance }) => {
4447
const modals = useModals();
4548
const model = useEditContentModelContext();
4649
const options = useMemo(
@@ -64,71 +67,69 @@ export const PreviewViewTabs = observer(({ children, view }: { children: ReactNo
6467

6568
const onlyOneTabLeft = config.tabs.length === 0;
6669
return (
67-
<Box className="preview-view-tabs">
68-
<Tabs
69-
variant={config.variant}
70-
orientation={config.orientation}
71-
defaultValue={config.tabs.length > 0 ? config.tabs[0].id : '0'}
72-
styles={getStyles(config)}
73-
>
74-
<Tabs.List grow={config.grow}>
75-
{config.tabs.map((t) => (
76-
<Tabs.Tab key={t.id} value={t.id} sx={getTabSX(t)}>
77-
{t.name ?? t.id}
78-
</Tabs.Tab>
79-
))}
80-
<Tabs.Tab onClick={config.addTab} value="add" className="add-a-tab">
81-
<Plus size={18} color="#228be6" />
70+
<Tabs
71+
className="preview-view-tabs"
72+
variant={config.variant}
73+
orientation={config.orientation}
74+
defaultValue={config.tabs.length > 0 ? config.tabs[0].id : '0'}
75+
styles={getStyles(config)}
76+
>
77+
<Tabs.List grow={config.grow}>
78+
{config.tabs.map((t) => (
79+
<Tabs.Tab key={t.id} value={t.id} sx={getTabSX(t)}>
80+
{t.name ?? t.id}
8281
</Tabs.Tab>
83-
</Tabs.List>
84-
{config.tabs.map((t, i) => {
85-
const tabView = model.views.findByID(t.view_id);
86-
return (
87-
<Tabs.Panel key={t.id} value={t.id} sx={{ position: 'relative' }}>
88-
<Box sx={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, zIndex: 200 }}>
89-
<Overlay opacity={0.8} color="#FFF" blur={10} zIndex={100} />
90-
91-
<Stack mx="auto" mt={100} sx={{ width: '300px', position: 'relative', zIndex: 200 }}>
92-
<TextInput label="Tab Name" value={t.name} onChange={(e) => t.setName(e.currentTarget.value)} />
93-
<Select label="View" value={t.view_id} onChange={t.setViewID} data={options} />
94-
<ColorInput
95-
label="Color"
96-
value={t.color}
97-
onChange={t.setColor}
98-
disabled={config.variant !== 'default'}
99-
/>
82+
))}
83+
<Tabs.Tab onClick={config.addTab} value="add" className="add-a-tab">
84+
<Plus size={18} color="#228be6" />
85+
</Tabs.Tab>
86+
</Tabs.List>
87+
{config.tabs.map((t, i) => {
88+
const tabView = model.views.findByID(t.view_id);
89+
return (
90+
<Tabs.Panel key={t.id} value={t.id} sx={{ position: 'relative' }}>
91+
<Box sx={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, zIndex: 200 }}>
92+
<Overlay opacity={0.8} color="#FFF" blur={10} zIndex={100} />
10093

101-
{tabView && (
102-
<Button
103-
mt={20}
104-
variant="gradient"
105-
leftIcon={<IconArrowsLeftRight size={18} />}
106-
gradient={{ from: 'cyan', to: 'indigo' }}
107-
onClick={() => model.views.setIDOfVIE(tabView.id)}
108-
>
109-
Swith to View: {tabView.name}
110-
</Button>
111-
)}
94+
<Stack mx="auto" mt={100} sx={{ width: '300px', position: 'relative', zIndex: 200 }}>
95+
<TextInput label="Tab Name" value={t.name} onChange={(e) => t.setName(e.currentTarget.value)} />
96+
<Select label="View" value={t.view_id} onChange={t.setViewID} data={options} />
97+
<ColorInput
98+
label="Color"
99+
value={t.color}
100+
onChange={t.setColor}
101+
disabled={config.variant !== 'default'}
102+
/>
112103

104+
{tabView && (
113105
<Button
114106
mt={20}
115-
variant="subtle"
116-
color="red"
117-
onClick={() => remove(i)}
118-
disabled={onlyOneTabLeft}
119-
leftIcon={<IconTrash size={14} />}
107+
variant="gradient"
108+
leftIcon={<IconArrowsLeftRight size={18} />}
109+
gradient={{ from: 'cyan', to: 'indigo' }}
110+
onClick={() => model.views.setIDOfVIE(tabView.id)}
120111
>
121-
Delete This Tab
112+
Swith to View: {tabView.name}
122113
</Button>
123-
</Stack>
124-
</Box>
114+
)}
115+
116+
<Button
117+
mt={20}
118+
variant="subtle"
119+
color="red"
120+
onClick={() => remove(i)}
121+
disabled={onlyOneTabLeft}
122+
leftIcon={<IconTrash size={14} />}
123+
>
124+
Delete This Tab
125+
</Button>
126+
</Stack>
127+
</Box>
125128

126-
{tabView && <DashboardViewRender view={tabView} />}
127-
</Tabs.Panel>
128-
);
129-
})}
130-
</Tabs>
131-
{children}
132-
</Box>
129+
{tabView && <DashboardViewRender view={tabView} />}
130+
</Tabs.Panel>
131+
);
132+
})}
133+
</Tabs>
133134
);
134135
});

‎dashboard/src/components/view/view-component/render/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export const RenderViewComponent = observer(({ view, children }: { view: ViewMet
1010
case EViewComponentType.Modal:
1111
return <RenderViewModal view={view}>{children}</RenderViewModal>;
1212
case EViewComponentType.Tabs:
13-
return <RenderViewTabs view={view}>{children}</RenderViewTabs>;
13+
return <RenderViewTabs view={view} />;
1414
case EViewComponentType.Division:
1515
default:
1616
return <RenderViewDivision view={view}>{children}</RenderViewDivision>;

‎dashboard/src/components/view/view-component/render/tabs.tsx‎

Lines changed: 38 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
1-
import { Box, Sx, Tabs } from '@mantine/core';
1+
import { Sx, Tabs } from '@mantine/core';
22
import { observer } from 'mobx-react-lite';
3-
import { ReactNode } from 'react';
43
import { DashboardViewRender } from '~/components/view';
54
import { useRenderContentModelContext } from '~/contexts';
65
import { TabModelInstance, ViewMetaInstance, ViewTabsConfigInstance } from '~/model';
@@ -12,42 +11,45 @@ const getTabSX = (t: TabModelInstance): Sx => {
1211
return {};
1312
};
1413

15-
export const RenderViewTabs = observer(({ children, view }: { children: ReactNode; view: ViewMetaInstance }) => {
14+
export const RenderViewTabs = observer(({ view }: { view: ViewMetaInstance }) => {
1615
const model = useRenderContentModelContext();
1716
const config = view.config as ViewTabsConfigInstance;
1817
return (
19-
<Box className="render-view-tabs">
20-
<Tabs
21-
variant={config.variant}
22-
orientation={config.orientation}
23-
defaultValue={config.tabs.length > 0 ? config.tabs[0].id : '0'}
24-
styles={{
25-
panel: {
26-
padding: config.orientation === 'horizontal' ? '16px 0px' : '0',
27-
},
28-
}}
29-
keepMounted={false}
30-
>
31-
<Tabs.List grow={config.grow}>
32-
{config.tabs.map((t) => (
33-
<Tabs.Tab key={t.id} value={t.id} sx={getTabSX(t)} disabled={!t.view_id}>
34-
{t.name ?? t.id}
35-
</Tabs.Tab>
36-
))}
37-
</Tabs.List>
38-
{config.tabs.map((t) => {
39-
const tabView = model.views.findByID(t.view_id);
40-
if (!tabView) {
41-
return null;
42-
}
43-
return (
44-
<Tabs.Panel key={t.id} value={t.id}>
45-
<DashboardViewRender view={tabView} />
46-
</Tabs.Panel>
47-
);
48-
})}
49-
</Tabs>
50-
{children}
51-
</Box>
18+
<Tabs
19+
className="render-view-tabs"
20+
variant={config.variant}
21+
orientation={config.orientation}
22+
defaultValue={config.tabs.length > 0 ? config.tabs[0].id : '0'}
23+
styles={{
24+
root: {
25+
height: '100%',
26+
},
27+
panel: {
28+
padding: config.orientation === 'horizontal' ? '16px 0px' : '0',
29+
height: '100%',
30+
overflow: 'auto',
31+
},
32+
}}
33+
keepMounted={false}
34+
>
35+
<Tabs.List grow={config.grow}>
36+
{config.tabs.map((t) => (
37+
<Tabs.Tab key={t.id} value={t.id} sx={getTabSX(t)} disabled={!t.view_id}>
38+
{t.name ?? t.id}
39+
</Tabs.Tab>
40+
))}
41+
</Tabs.List>
42+
{config.tabs.map((t) => {
43+
const tabView = model.views.findByID(t.view_id);
44+
if (!tabView) {
45+
return null;
46+
}
47+
return (
48+
<Tabs.Panel key={t.id} value={t.id}>
49+
<DashboardViewRender view={tabView} />
50+
</Tabs.Panel>
51+
);
52+
})}
53+
</Tabs>
5254
);
5355
});

‎dashboard/src/dashboard-editor/ui/header/sub-header.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { Box, Button, Group, Sx } from '@mantine/core';
22
import { IconPlaylistAdd } from '@tabler/icons-react';
33
import { observer } from 'mobx-react-lite';
44
import { useEditContentModelContext } from '~/contexts';
5+
import { EViewComponentType } from '~/model';
56

67
const SubHeaderSx: Sx = {
78
position: 'fixed',
@@ -16,6 +17,7 @@ const SubHeaderSx: Sx = {
1617

1718
export const SubHeader = observer(() => {
1819
const model = useEditContentModelContext();
20+
const cant = model.views.VIE?.type === EViewComponentType.Tabs;
1921
return (
2022
<Box sx={SubHeaderSx} pl={{ base: 200, xs: 200, sm: 200, md: 220, lg: 240, xl: 260 }}>
2123
<Group position="apart" align="center" sx={{ height: '30px' }} pr={16}>
@@ -24,7 +26,7 @@ export const SubHeader = observer(() => {
2426
color="blue"
2527
radius={0}
2628
size="xs"
27-
disabled={!model.views.VIE}
29+
disabled={!model.views.VIE || cant}
2830
onClick={() => model.addANewPanel(model.views.idOfVIE)}
2931
leftIcon={<IconPlaylistAdd size={20} />}
3032
sx={{

‎dashboard/src/dashboard-editor/ui/settings/navbar/add-item-button/add-a-panel.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { Button } from '@mantine/core';
22
import { IconPlus } from '@tabler/icons-react';
33
import { observer } from 'mobx-react-lite';
44
import { useEditContentModelContext } from '~/contexts';
5+
import { EViewComponentType } from '~/model';
56

67
interface IAddAPanel {
78
parentID?: string;
@@ -13,7 +14,7 @@ export const AddAPanel = observer(({ parentID }: IAddAPanel) => {
1314
return null;
1415
}
1516
const view = model.views.findByID(parentID);
16-
if (!view) {
17+
if (!view || view.type === EViewComponentType.Tabs) {
1718
return null;
1819
}
1920
return (

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@devtable/root",
3-
"version": "10.19.0",
3+
"version": "10.20.0",
44
"private": true,
55
"workspaces": [
66
"api",

‎settings-form/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@devtable/settings-form",
3-
"version": "10.19.0",
3+
"version": "10.20.0",
44
"license": "Apache-2.0",
55
"publishConfig": {
66
"access": "public",

0 commit comments

Comments
 (0)