import React, { createContext, useContext } from 'react'; import { Menu, Space, Tooltip, MenuItemProps } from 'antd'; import { SettingOutlined, MoreOutlined, DesktopOutlined } from '@ant-design/icons'; import { get } from 'lodash'; import { PluginManagerContext } from './context'; import cls from 'classnames'; import { ConfigProvider } from 'antd'; 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; } PluginManager.Toolbar = (props: ToolbarProps) => { const { components } = useContext(PluginManagerContext); const { items = [] } = props; return (
{items .filter((item) => item.pin) .map((item) => { const Action = get(components, item.component); return ( Action && ( ) ); })} }> {items .filter((item) => !item.pin) .map((item) => { const Action = get(components, item.component); return ( Action && ( ) ); })} }> 管理插件
); }; 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} ); };