Skip to content

Commit

Permalink
refactor: tab type and update method (DataLinkDC#2244)
Browse files Browse the repository at this point in the history
  • Loading branch information
@leechor
leechor authored Aug 18, 2023
1 parent 2c644be commit 5fbaeab
Show file tree
Hide file tree
Showing 5 changed files with 56 additions and 93 deletions.
2 changes: 2 additions & 0 deletions dinky-web/src/pages/DataStudio/BottomContainer/Result/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,9 +121,11 @@ const Result = (props: any) => {
if (!currentTabs) {
return;
}

if (currentTabs.type !== TabsPageType.project) {
return;
}

if ((currentTabs?.params as DataStudioParams).resultData && !isRefresh) {
setData((currentTabs?.params as DataStudioParams).resultData);
} else {
Expand Down
2 changes: 0 additions & 2 deletions dinky-web/src/pages/DataStudio/FooterContainer/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,8 +111,6 @@ const FooterContainer: React.FC<FooterContainerProps & StateType> = (props) => {

/**
* render footer right info
* @param {ButtonRoute[]} routes
* @returns {JSX.Element[]}
*/
const renderFooterRightInfo = (routes: ButtonRoute[]) => {
return routes
Expand Down
106 changes: 35 additions & 71 deletions dinky-web/src/pages/DataStudio/MiddleContainer/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,33 +52,25 @@ const MiddleContainer = (props: any) => {
const [includeTab, setIncludeTab] = useState({});

const updateRightKey = (key: string) => {
let oldPane: TabsItemType;
let newPane: TabsItemType;

panes.forEach((pane: TabsItemType) => {
if (pane.key === key) {
newPane = pane;
}

if (pane.key === activeKey) {
oldPane = pane;
}
});
const oldPane = panes.find((pane: TabsItemType) => pane.key === activeKey);
const newPane = panes.find((pane: TabsItemType) => pane.key === key);

let oldRightSideAvailableKey: string[] = [];
let newRightSideAvailableKey: string[] = [];

RightSide.forEach((x) => {
if (x.isShow) {
if (x.isShow(oldPane.type, oldPane.subType)) {
oldRightSideAvailableKey.push(x.key);
}
if (x.isShow(newPane.type, newPane.subType)) {
newRightSideAvailableKey.push(x.key);
}
} else {
if (!x.isShow) {
oldRightSideAvailableKey.push(x.key);
newRightSideAvailableKey.push(x.key);
return;
}

if (x.isShow(oldPane.type, oldPane.subType)) {
oldRightSideAvailableKey.push(x.key);
}

if (x.isShow(newPane.type, newPane.subType)) {
newRightSideAvailableKey.push(x.key);
}
});

Expand Down Expand Up @@ -109,20 +101,9 @@ const MiddleContainer = (props: any) => {
payload: selectKey,
});
};
/**
* 更新当前激活的tab
* @param {string} key
* @param eInfo
*/
const updateActiveKey = (key: string, eInfo: any) => {
if (key === activeKey) {
return;
}

const {
target: { innerText },
} = eInfo;
if (!innerText) {
const updateActiveKey = (key: string, value: string) => {
if (key === activeKey) {
return;
}

Expand All @@ -135,12 +116,12 @@ const MiddleContainer = (props: any) => {
});

// 替换掉 . 为 /, 因为再 tree 里选中的 key 是 / 分割的
const replaceLabel = innerText.toString().replace('.', '/');
const name = value.toString().replace('.', '/');
dispatch({
type: STUDIO_MODEL.updateDatabaseSelectKey,
payload: [replaceLabel],
payload: [name],
});
};
}

/**
* 关闭所有标签
Expand All @@ -165,20 +146,11 @@ const MiddleContainer = (props: any) => {

/**
* the right click event
* @param info
* @param item
*/
const handleRightClick = (info: any, item: any) => {
const handleRightClick = (info: React.MouseEvent<HTMLDivElement>, item: TabsItemType) => {
// 阻止默认右键事件
info.preventDefault();
updateActiveKey(item.key, info);

// 替换掉 . 为 /, 因为再 tree 里选中的 key 是 / 分割的
const replaceLabel = item.label.toString().replace('.', '/');
dispatch({
type: STUDIO_MODEL.updateDatabaseSelectKey,
payload: [replaceLabel],
});
updateActiveKey(item.key, item.label);

// 设置选中的值
setIncludeTab(item);
Expand Down Expand Up @@ -212,7 +184,6 @@ const MiddleContainer = (props: any) => {

/**
* 右键菜单
* @returns {JSX.Element}
*/
const renderRightClickMenu = () => {
return (
Expand Down Expand Up @@ -262,9 +233,7 @@ const MiddleContainer = (props: any) => {
key: item.key,
label: (
<Space
onClick={() =>
updateActiveKey(item.key, { target: { innerText: item.label } })
}
onClick={(e) => updateActiveKey(item.key, item.label) }
size={0}
onContextMenu={(e) => handleRightClick(e, item)}
key={item.key}
Expand Down Expand Up @@ -303,7 +272,6 @@ const MiddleContainer = (props: any) => {

/**
* render middle content
* @returns {JSX.Element}
*/
const renderMiddleContent = () => {
if (tabItems?.length === 0) {
Expand All @@ -320,30 +288,26 @@ const MiddleContainer = (props: any) => {
}

return (
<>
<ConfigProvider
theme={{
components: {
Tabs: {
margin: 0,
borderRadiusLG: 0,
theme={{
components: {
Tabs: {
margin: 0,
borderRadiusLG: 0,
},
},
},
}}
>
}}>
<Tabs
className={'data-studio-tabs'}
tabBarStyle={{ borderBlock: `1px solid ${themeValue.borderColor}` }}
hideAdd
onTabClick={(active, e) => updateActiveKey(active, e)}
activeKey={activeKey}
type="editable-card"
onEdit={closeTab}
items={tabItems}
/>
className={'data-studio-tabs'}
tabBarStyle={{borderBlock: `1px solid ${themeValue.borderColor}`}}
hideAdd
// onTabClick={(active, e) => {updateActiveKey(active, tabItems[active].label)}}
activeKey={activeKey}
type="editable-card"
onEdit={closeTab}
items={tabItems}/>
{renderRightClickMenu()}
</ConfigProvider>
</>
);
};

Expand Down
27 changes: 13 additions & 14 deletions dinky-web/src/pages/DataStudio/model.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,16 +105,19 @@ export enum TabsPageType {
None = '',
metadata = 'metadata',
project = 'project',
}

export enum TabsPageSubType {
flinkSql = 'flinksql',
}

export type TabsItemType = {
id: string;
label: string;
breadcrumbLabel: string;
params: number | string | object | MetadataParams | DataStudioParams;
params: MetadataParams | DataStudioParams;
type: TabsPageType;
subType?: TabsPageType;
subType?: TabsPageSubType;
key: string;
value: string;
icon: any;
Expand Down Expand Up @@ -442,25 +445,21 @@ const Model: ModelType = {
let toolContentHeight = 0;
if (payload === '') {
centerContentHeight =
(state.centerContentHeight as number) +
(state.bottomContainer.height as number);
state.centerContentHeight + (state.bottomContainer.height as number);
toolContentHeight =
(state.toolContentHeight as number) +
(state.bottomContainer.height as number);
state.toolContentHeight + (state.bottomContainer.height as number);
console.log(2);
} else if (
state.bottomContainer.selectKey !== '' &&
payload !== state.bottomContainer.selectKey
state.bottomContainer.selectKey !== '' &&
payload !== state.bottomContainer.selectKey
) {
centerContentHeight = state.centerContentHeight as number;
toolContentHeight = state.toolContentHeight as number;
centerContentHeight = state.centerContentHeight;
toolContentHeight = state.toolContentHeight;
} else {
centerContentHeight =
(state.centerContentHeight as number) -
(state.bottomContainer.height as number);
state.centerContentHeight - (state.bottomContainer.height as number);
toolContentHeight =
(state.toolContentHeight as number) -
(state.bottomContainer.height as number);
state.toolContentHeight - (state.bottomContainer.height as number);
console.log(3);
}

Expand Down
12 changes: 6 additions & 6 deletions dinky-web/src/pages/DataStudio/route.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ import Console from '@/pages/DataStudio/BottomContainer/Console';
import Result from '@/pages/DataStudio/BottomContainer/Result';
import MetaData from '@/pages/DataStudio/LeftContainer/MetaData';
import Project from '@/pages/DataStudio/LeftContainer/Project';
import { TabsPageType } from '@/pages/DataStudio/model';
import {TabsPageSubType, TabsPageType} from '@/pages/DataStudio/model';
import ExecuteConfig from '@/pages/DataStudio/RightContainer/ExecuteConfig';
import HistoryVersion from '@/pages/DataStudio/RightContainer/HistoryVersion';
import JobConfig from '@/pages/DataStudio/RightContainer/JobConfig';
Expand Down Expand Up @@ -81,31 +81,31 @@ export const RightSide: TabProp[] = [
label: l('menu.datastudio.jobConfig'),
children: <JobConfig />,
isShow: (type, subType) =>
type === TabsPageType.project && TabsPageType.flinkSql === subType,
type === TabsPageType.project && TabsPageSubType.flinkSql === subType,
},
{
key: 'menu.datastudio.executeConfig',
icon: <PlayCircleOutlined />,
label: l('menu.datastudio.executeConfig'),
children: <ExecuteConfig />,
isShow: (type, subType) =>
type === TabsPageType.project && TabsPageType.flinkSql === subType,
type === TabsPageType.project && TabsPageSubType.flinkSql === subType,
},
{
key: 'menu.datastudio.savePoint',
icon: <FolderOutlined />,
label: l('menu.datastudio.savePoint'),
children: <SavePoints />,
isShow: (type, subType) =>
type === TabsPageType.project && TabsPageType.flinkSql === subType,
type === TabsPageType.project && TabsPageSubType.flinkSql === subType,
},
{
key: 'menu.datastudio.historyVision',
icon: <HistoryOutlined />,
label: l('menu.datastudio.historyVision'),
children: <HistoryVersion />,
isShow: (type, subType) =>
type === TabsPageType.project && TabsPageType.flinkSql === subType,
type === TabsPageType.project && TabsPageSubType.flinkSql === subType,
},
{
key: 'menu.datastudio.jobInfo',
Expand Down Expand Up @@ -262,5 +262,5 @@ export type TabProp = {
icon: ReactNode;
label: string;
children: ReactNode;
isShow?: (type: TabsPageType, subType?: string) => boolean;
isShow?: (type: TabsPageType, subType?: TabsPageSubType) => boolean;
};

0 comments on commit 5fbaeab

Please sign in to comment.