Skip to content

Commit

Permalink
optimize_container_left_top_button (#2678)
Browse files Browse the repository at this point in the history
  • Loading branch information
zackyoungh authored Dec 18, 2023
1 parent 6edf22b commit f1ef316
Show file tree
Hide file tree
Showing 9 changed files with 193 additions and 88 deletions.
126 changes: 126 additions & 0 deletions dinky-web/src/pages/DataStudio/LeftContainer/BtnContext/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,126 @@
/*
*
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright ownership.
* The ASF licenses this file to You under the Apache License, Version 2.0
* (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

import {CircleDataStudioButtonProps} from "@/components/CallBackButton/CircleBtn";
import {
ArrowsAltOutlined,
EnvironmentOutlined,
PlusCircleOutlined,
PlusOutlined,
ReloadOutlined,
ShrinkOutlined
} from "@ant-design/icons";
import {l} from "@/utils/intl";
import React, {createContext, useContext, useReducer} from "react";

export const BtnRoute: { [c: string]: CircleDataStudioButtonProps[] } = {
'menu.datastudio.datasource': [
{
icon: <PlusOutlined/>,
title: l('button.create'),
onClick: () => {
}
},
{
icon: <ReloadOutlined/>,
title: l('button.refresh'),
onClick: () => {
}
}
],
'menu.datastudio.catalog': [
{
icon: <ReloadOutlined/>,
title: l('button.refresh'),
onClick: () => {
}
}
],
'menu.datastudio.project': [
{
icon: <PlusCircleOutlined/>,
title: l('right.menu.createRoot'),
key: 'right.menu.createRoot',
onClick: () => {
}
},
{
icon: <ArrowsAltOutlined/>,
title: l('button.expand-all'),
key: 'button.expand-all',
onClick: () => {
}
},
{
icon: <ShrinkOutlined/>,
title: l('button.collapse-all'),
key: 'button.collapse-all',
onClick: () => {
}
},
{
icon: <EnvironmentOutlined/>,
title: l('button.position'),
key: 'button.position',
onClick: () => {
}
}
]
};

type BtnAction = {
type: 'change',
selectKey: string,
payload: CircleDataStudioButtonProps[]
}

export const BtnContext = createContext(BtnRoute);

const BtnDispatchContext = createContext((params: BtnAction) => {
});

export function useTasksDispatch() {
return useContext(BtnDispatchContext);
}

function BtnReducer(state = BtnRoute, action: BtnAction) {
switch (action.type) {
case 'change': {
return {...state, [action.selectKey]: action.payload}
}
default:
return {...state}
}
}

// @ts-ignore
export function BtnProvider({children}) {
const [btn, dispatch] = useReducer(
BtnReducer,
BtnRoute
);

return (
<BtnContext.Provider value={btn}>
<BtnDispatchContext.Provider value={dispatch}>
{children}
</BtnDispatchContext.Provider>
</BtnContext.Provider>
);
}
14 changes: 11 additions & 3 deletions dinky-web/src/pages/DataStudio/LeftContainer/Catalog/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,6 @@ import { getCurrentData } from '@/pages/DataStudio/function';
import { isSql } from '@/pages/DataStudio/HeaderContainer/service';
import { TableDataNode } from '@/pages/DataStudio/LeftContainer/Catalog/data';
import { StateType } from '@/pages/DataStudio/model';
import { BtnRoute } from '@/pages/DataStudio/route';
import ColumnInfo from '@/pages/RegCenter/DataSource/components/DataSourceDetail/RightTagsRouter/SchemaDesc/ColumnInfo';
import TableInfo from '@/pages/RegCenter/DataSource/components/DataSourceDetail/RightTagsRouter/SchemaDesc/TableInfo';
import { DIALECT } from '@/services/constants';
Expand All @@ -39,8 +38,9 @@ import { Button, Col, Empty, Modal, Row, Select, Spin, Tabs } from 'antd';
import { DataNode } from 'antd/es/tree';
import DirectoryTree from 'antd/es/tree/DirectoryTree';
import { DefaultOptionType } from 'rc-select/lib/Select';
import React, { useEffect, useState } from 'react';
import React, {useEffect, useState} from 'react';
import { getMSCatalogs, getMSColumns, getMSSchemaInfo } from './service';
import {BtnRoute, useTasksDispatch} from "@/pages/DataStudio/LeftContainer/BtnContext";

const Catalog: React.FC = (props: connect) => {
const { tabs } = props;
Expand Down Expand Up @@ -75,10 +75,18 @@ const Catalog: React.FC = (props: connect) => {
const [row, setRow] = useState<TableDataNode>();
const [loading, setLoading] = useState<boolean>(false);
const [columnData, setColumnData] = useState([]);
const btnDispatch = useTasksDispatch();
const currentTabName = 'menu.datastudio.catalog';
const btnEvent = [...BtnRoute[currentTabName]];

BtnRoute['menu.datastudio.catalog'][0].onClick = () => {
btnEvent[0].onClick = () => {
refreshMetaStoreTables();
};
btnDispatch({
type: 'change',
selectKey: currentTabName,
payload: btnEvent
})

useEffect(() => {
getCatalogs();
Expand Down
15 changes: 12 additions & 3 deletions dinky-web/src/pages/DataStudio/LeftContainer/DataSource/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@
*/

import { TagAlignLeft } from '@/components/StyledComponents';
import { BtnRoute } from '@/pages/DataStudio/route';
import SchemaTree from '@/pages/RegCenter/DataSource/components/DataSourceDetail/SchemaTree';
import DataSourceModal from '@/pages/RegCenter/DataSource/components/DataSourceModal';
import { handleTest, saveOrUpdateHandle } from '@/pages/RegCenter/DataSource/service';
Expand All @@ -31,6 +30,7 @@ import { Spin, Tag } from 'antd';
import { useEffect, useState } from 'react';
import { StateType, STUDIO_MODEL } from '../../model';
import { clearDataSourceTable, getDataSourceList, showDataSourceTable } from './service';
import {BtnRoute, useTasksDispatch} from "@/pages/DataStudio/LeftContainer/BtnContext";

const DataSource = (props: any) => {
const {
Expand All @@ -42,6 +42,7 @@ const DataSource = (props: any) => {
const [isLoadingDatabase, setIsLoadingDatabase] = useState(false);
const [showCreate, setShowCreate] = useState(false);
const selectDb = (dbData as DataSources.DataSource[]).filter((x) => x.id === selectDatabaseId)[0];
const btnDispatch = useTasksDispatch();

/**
* @description: 刷新树数据
Expand Down Expand Up @@ -87,17 +88,25 @@ const DataSource = (props: any) => {
const onChangeDataBase = (value: number) => {
onRefreshTreeData(value);
};
const currentTabName = 'menu.datastudio.datasource';

BtnRoute['menu.datastudio.datasource'][0].onClick = () => {
const btnEvent = [...BtnRoute[currentTabName]];

btnEvent[0].onClick = () => {
setShowCreate(true);
};
BtnRoute['menu.datastudio.datasource'][1].onClick = () => {
btnEvent[1].onClick = () => {
if (!selectDatabaseId) return;
setIsLoadingDatabase(true);
clearDataSourceTable(selectDatabaseId).then(() => {
onChangeDataBase(selectDatabaseId);
});
};
btnDispatch({
type: 'change',
selectKey: currentTabName,
payload: btnEvent
})

/**
* 构建数据库列表 下拉框
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -25,13 +25,13 @@ import {
getParentKey
} from '@/pages/DataStudio/LeftContainer/Project/function';
import { StateType, STUDIO_MODEL, TabsItemType } from '@/pages/DataStudio/model';
import { BtnRoute } from '@/pages/DataStudio/route';
import { l } from '@/utils/intl';
import { connect } from '@@/exports';
import { Key } from '@ant-design/pro-components';
import { Empty, Tree } from 'antd';
import Search from 'antd/es/input/Search';
import React, { useEffect, useState } from 'react';
import {BtnRoute, useTasksDispatch} from '../../BtnContext';

const { DirectoryTree } = Tree;

Expand Down Expand Up @@ -60,6 +60,8 @@ const JobTree: React.FC<TreeProps & connect> = (props) => {

const [searchValue, setSearchValueValue] = useState('');
const [data, setData] = useState<any[]>(buildProjectTree(projectData, searchValue));
const btnDispatch = useTasksDispatch();


useEffect(() => {
setData(buildProjectTree(projectData, searchValue));
Expand Down Expand Up @@ -101,7 +103,8 @@ const JobTree: React.FC<TreeProps & connect> = (props) => {
});
};

const btn = BtnRoute['menu.datastudio.project'];
const currentTabName = 'menu.datastudio.project';
const btnEvent = [...BtnRoute[currentTabName]];
const positionKey = (panes: TabsItemType[], activeKey: string) => {
const treeKey = getCurrentTab(panes, activeKey)?.treeKey;
if (treeKey) {
Expand All @@ -123,14 +126,19 @@ const JobTree: React.FC<TreeProps & connect> = (props) => {
}
};

btn[1].onClick = expandAll;
btnEvent[1].onClick = expandAll;

btn[2].onClick = () =>
btnEvent[2].onClick = () =>
dispatch({
type: STUDIO_MODEL.updateProjectExpandKey,
payload: []
});
btn[3].onClick = positionKey;
btnEvent[3].onClick = positionKey;
btnDispatch({
type: 'change',
selectKey: currentTabName,
payload: btnEvent
})

return (
<>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,14 +20,14 @@
import Title from '@/components/Front/Title';
import FolderModal from '@/pages/DataStudio/LeftContainer/Project/FolderModal';
import { StateType, STUDIO_MODEL_ASYNC } from '@/pages/DataStudio/model';
import { BtnRoute } from '@/pages/DataStudio/route';
import { handleAddOrUpdate } from '@/services/BusinessCrud';
import { API_CONSTANTS } from '@/services/endpoints';
import { Catalogue } from '@/types/Studio/data';
import { l } from '@/utils/intl';
import { connect } from '@umijs/max';
import { Space } from 'antd';
import React, { useState } from 'react';
import {BtnRoute, useTasksDispatch} from "@/pages/DataStudio/LeftContainer/BtnContext";

const ProjectTitle: React.FC<StateType & connect> = (props) => {
const {
Expand All @@ -36,6 +36,7 @@ const ProjectTitle: React.FC<StateType & connect> = (props) => {
} = props;

const [createModalVisible, handleModalVisible] = useState<boolean>(false);
const btnDispatch = useTasksDispatch();

const handleCancelCreate = async () => {
handleModalVisible(false);
Expand Down Expand Up @@ -66,15 +67,21 @@ const ProjectTitle: React.FC<StateType & connect> = (props) => {
);
};

const btn = BtnRoute['menu.datastudio.project'];
const currentTabName = 'menu.datastudio.project';
const btn = BtnRoute[currentTabName];
btn[0].onClick = () => handleCreateClick();
btnDispatch({
type: 'change',
selectKey:currentTabName,
payload: btn
})

/**
* 渲染侧边栏标题
* @returns {JSX.Element}
*/
const renderTitle = () => {
if (selectKey && selectKey === 'menu.datastudio.project') {
if (selectKey && selectKey === currentTabName) {
return (
<Space>
<Title>{l(selectKey)}</Title>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@ import { Modal, Typography } from 'antd';
import { MenuInfo } from 'rc-menu/es/interface';
import React, { Key, useEffect, useState } from 'react';
import { connect } from 'umi';
import {useTasksDispatch} from "@/pages/DataStudio/LeftContainer/BtnContext";

const { Text } = Typography;

Expand All @@ -64,6 +65,8 @@ const Project: React.FC = (props: connect) => {
} = props;

const [projectState, setProjectState] = useState<ProjectState>(InitProjectState);
const btnDispatch = useTasksDispatch();


useEffect(() => {
setProjectState((prevState) => ({
Expand Down
10 changes: 6 additions & 4 deletions dinky-web/src/pages/DataStudio/LeftContainer/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,10 +22,11 @@ import MovableSidebar, { MovableSidebarProps } from '@/components/Sidebar/Movabl
import useThemeValue from '@/hooks/useThemeValue';
import ProjectTitle from '@/pages/DataStudio/LeftContainer/Project/ProjectTitle';
import { StateType, STUDIO_MODEL, VIEW } from '@/pages/DataStudio/model';
import { BtnRoute, LeftSide } from '@/pages/DataStudio/route';
import { LeftSide } from '@/pages/DataStudio/route';
import { connect } from '@@/exports';
import { Tabs } from 'antd';
import React from 'react';
import React, {useContext} from 'react';
import {BtnContext} from "@/pages/DataStudio/LeftContainer/BtnContext";

export type LeftContainerProps = {
size: number;
Expand All @@ -41,6 +42,7 @@ const LeftContainer: React.FC<LeftContainerProps> = (props: any) => {
rightContainer,
tabs: { panes, activeKey }
} = props;
const btn = useContext(BtnContext);
const themeValue = useThemeValue();
const MAX_WIDTH = size.width - 2 * VIEW.leftToolWidth - rightContainer.width - 700;
/**
Expand Down Expand Up @@ -87,8 +89,8 @@ const LeftContainer: React.FC<LeftContainerProps> = (props: any) => {
minWidth: 160,
maxWidth: MAX_WIDTH,
enable: { right: true },
btnGroup: BtnRoute[leftContainer.selectKey]
? BtnRoute[leftContainer.selectKey].map((item: CircleDataStudioButtonProps) => (
btnGroup: btn[leftContainer.selectKey]
? btn[leftContainer.selectKey].map((item: CircleDataStudioButtonProps) => (
<CircleBtn
title={item.title}
icon={item.icon}
Expand Down
Loading

0 comments on commit f1ef316

Please sign in to comment.