2022-01-19 22:21:20 +08:00
|
|
|
import React, { createContext, useContext } from 'react';
|
2022-01-20 10:45:00 +08:00
|
|
|
import { Menu, Space, Tooltip, MenuItemProps } from 'antd';
|
2022-01-19 15:14:00 +08:00
|
|
|
import { SettingOutlined, MoreOutlined, DesktopOutlined } from '@ant-design/icons';
|
|
|
|
import { get } from 'lodash';
|
2022-01-20 10:45:00 +08:00
|
|
|
import { PluginManagerContext } from './context';
|
|
|
|
import cls from 'classnames';
|
|
|
|
import { ConfigProvider } from 'antd';
|
2022-01-19 15:14:00 +08:00
|
|
|
|
2022-01-20 10:45:00 +08:00
|
|
|
export const usePrefixCls = (
|
|
|
|
tag?: string,
|
|
|
|
props?: {
|
|
|
|
prefixCls?: string;
|
|
|
|
},
|
|
|
|
) => {
|
|
|
|
const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
|
|
|
|
return getPrefixCls(tag, props?.prefixCls);
|
|
|
|
};
|
|
|
|
|
|
|
|
type PluginManagerType = {
|
|
|
|
Toolbar?: React.FC<ToolbarProps> & {
|
|
|
|
Item?: React.FC<MenuItemProps & { selected?: boolean }>;
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
export const PluginManager: PluginManagerType = () => null;
|
|
|
|
|
|
|
|
const ToolbarItemContext = createContext<ToolbarItemProps>(null);
|
2022-01-19 15:14:00 +08:00
|
|
|
|
2022-01-20 10:45:00 +08:00
|
|
|
interface ToolbarProps {
|
|
|
|
items?: ToolbarItemProps[];
|
|
|
|
}
|
2022-01-19 15:14:00 +08:00
|
|
|
|
2022-01-20 10:45:00 +08:00
|
|
|
interface ToolbarItemProps {
|
|
|
|
component: string;
|
|
|
|
pin?: boolean;
|
|
|
|
}
|
2022-01-19 22:21:20 +08:00
|
|
|
|
2022-01-20 10:45:00 +08:00
|
|
|
PluginManager.Toolbar = (props: ToolbarProps) => {
|
2022-01-19 22:21:20 +08:00
|
|
|
const { components } = useContext(PluginManagerContext);
|
|
|
|
const { items = [] } = props;
|
2022-01-19 15:14:00 +08:00
|
|
|
return (
|
2022-01-19 22:21:20 +08:00
|
|
|
<div style={{ display: 'inline-block' }}>
|
|
|
|
<Menu style={{ width: '100%' }} selectable={false} mode={'horizontal'} theme={'dark'}>
|
2022-01-19 15:14:00 +08:00
|
|
|
{items
|
2022-01-19 22:21:20 +08:00
|
|
|
.filter((item) => item.pin)
|
2022-01-21 14:04:15 +08:00
|
|
|
.map((item, index) => {
|
2022-01-19 22:21:20 +08:00
|
|
|
const Action = get(components, item.component);
|
|
|
|
return (
|
|
|
|
Action && (
|
2022-01-21 14:04:15 +08:00
|
|
|
<ToolbarItemContext.Provider key={index} value={item}>
|
2022-01-19 22:21:20 +08:00
|
|
|
<Action />
|
|
|
|
</ToolbarItemContext.Provider>
|
|
|
|
)
|
|
|
|
);
|
2022-01-19 15:14:00 +08:00
|
|
|
})}
|
2022-01-19 22:21:20 +08:00
|
|
|
<Menu.SubMenu key={'more'} title={<MoreOutlined />}>
|
|
|
|
{items
|
|
|
|
.filter((item) => !item.pin)
|
2022-01-21 14:04:15 +08:00
|
|
|
.map((item, index) => {
|
2022-01-19 22:21:20 +08:00
|
|
|
const Action = get(components, item.component);
|
|
|
|
return (
|
|
|
|
Action && (
|
2022-01-21 14:04:15 +08:00
|
|
|
<ToolbarItemContext.Provider key={index} value={item}>
|
2022-01-19 22:21:20 +08:00
|
|
|
<Action />
|
|
|
|
</ToolbarItemContext.Provider>
|
|
|
|
)
|
|
|
|
);
|
|
|
|
})}
|
2022-01-21 14:04:15 +08:00
|
|
|
<Menu.Divider key={'divider'}></Menu.Divider>
|
|
|
|
<Menu.Item key={'plugins'} disabled icon={<SettingOutlined />}>
|
2022-01-20 10:45:00 +08:00
|
|
|
管理插件
|
|
|
|
</Menu.Item>
|
2022-01-19 22:21:20 +08:00
|
|
|
</Menu.SubMenu>
|
|
|
|
</Menu>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
PluginManager.Toolbar.Item = (props) => {
|
|
|
|
const item = useContext(ToolbarItemContext);
|
2022-01-20 10:45:00 +08:00
|
|
|
const { selected, icon, title, ...others } = props;
|
|
|
|
const prefix = usePrefixCls();
|
|
|
|
const className = cls({ [`${prefix}-menu-item-selected`]: selected });
|
2022-01-19 22:21:20 +08:00
|
|
|
if (item.pin) {
|
|
|
|
return (
|
|
|
|
<Tooltip title={title}>
|
2022-01-20 10:45:00 +08:00
|
|
|
<Menu.Item {...others} className={className} eventKey={item.component}>
|
2022-01-19 22:21:20 +08:00
|
|
|
{icon}
|
|
|
|
</Menu.Item>
|
|
|
|
</Tooltip>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
return (
|
2022-01-20 10:45:00 +08:00
|
|
|
<Menu.Item {...others} className={className} eventKey={item.component} icon={icon}>
|
2022-01-19 22:21:20 +08:00
|
|
|
{title}
|
|
|
|
</Menu.Item>
|
2022-01-19 15:14:00 +08:00
|
|
|
);
|
|
|
|
};
|