tachybase_todo/packages/client/src/plugin-manager/PluginManager.tsx

72 lines
2.2 KiB
TypeScript
Raw Normal View History

import React, { createContext, useContext } from 'react';
import { Menu, Space, Tooltip } from 'antd';
2022-01-19 15:14:00 +08:00
import { SettingOutlined, MoreOutlined, DesktopOutlined } from '@ant-design/icons';
import { CurrentUser, DesignableSwitch, CollectionManagerAction, ACLAction, SystemSettings } from '../';
import { get } from 'lodash';
import { PluginManagerContext, PluginManagerProvider } from '.';
2022-01-19 15:14:00 +08:00
// TODO
export const PluginManager: any = () => null;
2022-01-19 15:14:00 +08:00
PluginManager.Provider = PluginManagerProvider;
const ToolbarItemContext = createContext(null);
2022-01-19 15:14:00 +08:00
PluginManager.Toolbar = (props: any) => {
const { components } = useContext(PluginManagerContext);
const { items = [] } = props;
2022-01-19 15:14:00 +08:00
return (
<div style={{ display: 'inline-block' }}>
<Menu style={{ width: '100%' }} selectable={false} mode={'horizontal'} theme={'dark'}>
2022-01-19 15:14:00 +08:00
{items
.filter((item) => item.pin)
2022-01-19 15:14:00 +08:00
.map((item) => {
const Action = get(components, item.component);
return (
Action && (
<ToolbarItemContext.Provider value={item}>
<Action />
</ToolbarItemContext.Provider>
)
);
2022-01-19 15:14:00 +08:00
})}
<Menu.SubMenu key={'more'} title={<MoreOutlined />}>
{items
.filter((item) => !item.pin)
.map((item) => {
const Action = get(components, item.component);
return (
Action && (
<ToolbarItemContext.Provider value={item}>
<Action />
</ToolbarItemContext.Provider>
)
);
})}
<Menu.Divider></Menu.Divider>
<Menu.Item icon={<SettingOutlined />}></Menu.Item>
</Menu.SubMenu>
</Menu>
</div>
);
};
PluginManager.Toolbar.Item = (props) => {
const item = useContext(ToolbarItemContext);
const { icon, title, ...others } = props;
if (item.pin) {
return (
<Tooltip title={title}>
<Menu.Item {...others} eventKey={item.component}>
{icon}
</Menu.Item>
</Tooltip>
);
}
return (
<Menu.Item {...others} eventKey={item.component} icon={icon}>
{title}
</Menu.Item>
2022-01-19 15:14:00 +08:00
);
};