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

110 lines
3.1 KiB
TypeScript
Raw Normal View History

2022-01-30 19:31:00 +08:00
import { MoreOutlined, SettingOutlined } from '@ant-design/icons';
import { ConfigProvider, Menu, MenuItemProps, Tooltip } from 'antd';
import cls from 'classnames';
2022-01-19 15:14:00 +08:00
import { get } from 'lodash';
2022-01-30 19:31:00 +08:00
import React, { createContext, useContext } from 'react';
import { PluginManagerContext } from './context';
2022-01-19 15:14: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
interface ToolbarProps {
items?: ToolbarItemProps[];
}
2022-01-19 15:14:00 +08:00
interface ToolbarItemProps {
component: string;
pin?: boolean;
}
2022-02-05 17:06:33 +08:00
const splitItems = (items: ToolbarItemProps[]) => {
const pinned = [];
const unpinned = [];
for (const item of items) {
if (item.pin) {
pinned.push(item);
} else {
unpinned.push(item);
}
}
return [pinned, unpinned];
};
PluginManager.Toolbar = (props: ToolbarProps) => {
const { components } = useContext(PluginManagerContext);
const { items = [] } = props;
2022-02-05 17:06:33 +08:00
const [pinned, unpinned] = splitItems(items);
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-02-05 17:06:33 +08:00
{pinned.map((item, index) => {
const Action = get(components, item.component);
return (
Action && (
<ToolbarItemContext.Provider key={index} value={item}>
<Action />
</ToolbarItemContext.Provider>
)
);
})}
{unpinned.length > 0 && (
<Menu.SubMenu popupClassName={'pm-sub-menu'} key={'more'} title={<MoreOutlined />}>
{unpinned.map((item, index) => {
const Action = get(components, item.component);
return (
Action && (
2022-01-21 14:04:15 +08:00
<ToolbarItemContext.Provider key={index} value={item}>
<Action />
</ToolbarItemContext.Provider>
)
);
})}
2022-02-05 17:06:33 +08:00
{unpinned.length > 0 && <Menu.Divider key={'divider'}></Menu.Divider>}
<Menu.Item key={'plugins'} disabled icon={<SettingOutlined />}>
</Menu.Item>
</Menu.SubMenu>
)}
</Menu>
</div>
);
};
PluginManager.Toolbar.Item = (props) => {
const item = useContext(ToolbarItemContext);
const { selected, icon, title, ...others } = props;
const prefix = usePrefixCls();
const className = cls({ [`${prefix}-menu-item-selected`]: selected });
if (item.pin) {
return (
<Tooltip title={title}>
<Menu.Item {...others} className={className} eventKey={item.component}>
{icon}
</Menu.Item>
</Tooltip>
);
}
return (
<Menu.Item {...others} className={className} eventKey={item.component} icon={icon}>
{title}
</Menu.Item>
2022-01-19 15:14:00 +08:00
);
};