import { MoreOutlined, SettingOutlined } from '@ant-design/icons'; import { ConfigProvider, Menu, MenuItemProps, Tooltip } from 'antd'; import cls from 'classnames'; import { get } from 'lodash'; import React, { createContext, useContext } from 'react'; import { PluginManagerContext } from './context'; export const usePrefixCls = ( tag?: string, props?: { prefixCls?: string; }, ) => { const { getPrefixCls } = useContext(ConfigProvider.ConfigContext); return getPrefixCls(tag, props?.prefixCls); }; type PluginManagerType = { Toolbar?: React.FC & { Item?: React.FC; }; }; export const PluginManager: PluginManagerType = () => null; const ToolbarItemContext = createContext(null); interface ToolbarProps { items?: ToolbarItemProps[]; } interface ToolbarItemProps { component: string; pin?: boolean; } 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; const [pinned, unpinned] = splitItems(items); return (
{pinned.map((item, index) => { const Action = get(components, item.component); return ( Action && ( ) ); })} {unpinned.length > 0 && ( }> {unpinned.map((item, index) => { const Action = get(components, item.component); return ( Action && ( ) ); })} {unpinned.length > 0 && } }> 管理插件 )}
); }; 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 ( {icon} ); } return ( {title} ); };