2022-03-18 15:20:35 +08:00
|
|
|
import { ItemGroup } from 'rc-menu';
|
|
|
|
import type {
|
|
|
|
MenuDividerType as RcMenuDividerType,
|
|
|
|
MenuItemGroupType as RcMenuItemGroupType,
|
2022-06-10 17:17:54 +08:00
|
|
|
MenuItemType as RcMenuItemType,
|
|
|
|
SubMenuType as RcSubMenuType,
|
2022-03-18 15:20:35 +08:00
|
|
|
} from 'rc-menu/lib/interface';
|
2022-06-10 17:17:54 +08:00
|
|
|
import * as React from 'react';
|
2022-03-18 15:20:35 +08:00
|
|
|
import MenuDivider from '../MenuDivider';
|
|
|
|
import MenuItem from '../MenuItem';
|
2022-06-10 17:17:54 +08:00
|
|
|
import SubMenu from '../SubMenu';
|
2022-03-18 15:20:35 +08:00
|
|
|
|
|
|
|
interface MenuItemType extends RcMenuItemType {
|
|
|
|
danger?: boolean;
|
|
|
|
icon?: React.ReactNode;
|
|
|
|
title?: string;
|
|
|
|
}
|
|
|
|
|
|
|
|
interface SubMenuType extends Omit<RcSubMenuType, 'children'> {
|
|
|
|
icon?: React.ReactNode;
|
|
|
|
theme?: 'dark' | 'light';
|
|
|
|
children: ItemType[];
|
|
|
|
}
|
|
|
|
|
|
|
|
interface MenuItemGroupType extends Omit<RcMenuItemGroupType, 'children'> {
|
2022-06-08 10:25:49 +08:00
|
|
|
children?: ItemType[];
|
2022-03-18 15:20:35 +08:00
|
|
|
key?: React.Key;
|
|
|
|
}
|
|
|
|
|
|
|
|
interface MenuDividerType extends RcMenuDividerType {
|
|
|
|
dashed?: boolean;
|
|
|
|
key?: React.Key;
|
|
|
|
}
|
|
|
|
|
|
|
|
export type ItemType = MenuItemType | SubMenuType | MenuItemGroupType | MenuDividerType | null;
|
|
|
|
|
|
|
|
function convertItemsToNodes(list: ItemType[]) {
|
|
|
|
return (list || [])
|
|
|
|
.map((opt, index) => {
|
|
|
|
if (opt && typeof opt === 'object') {
|
|
|
|
const { label, children, key, type, ...restProps } = opt as any;
|
|
|
|
const mergedKey = key ?? `tmp-${index}`;
|
|
|
|
|
|
|
|
// MenuItemGroup & SubMenuItem
|
|
|
|
if (children || type === 'group') {
|
|
|
|
if (type === 'group') {
|
|
|
|
// Group
|
|
|
|
return (
|
|
|
|
<ItemGroup key={mergedKey} {...restProps} title={label}>
|
|
|
|
{convertItemsToNodes(children)}
|
|
|
|
</ItemGroup>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
// Sub Menu
|
|
|
|
return (
|
|
|
|
<SubMenu key={mergedKey} {...restProps} title={label}>
|
|
|
|
{convertItemsToNodes(children)}
|
|
|
|
</SubMenu>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
// MenuItem & Divider
|
|
|
|
if (type === 'divider') {
|
|
|
|
return <MenuDivider key={mergedKey} {...restProps} />;
|
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
|
|
<MenuItem key={mergedKey} {...restProps}>
|
|
|
|
{label}
|
|
|
|
</MenuItem>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
return null;
|
|
|
|
})
|
|
|
|
.filter(opt => opt);
|
|
|
|
}
|
|
|
|
|
|
|
|
// FIXME: Move logic here in v5
|
|
|
|
/**
|
|
|
|
* We simply convert `items` to ReactNode for reuse origin component logic. But we need move all the
|
|
|
|
* logic from component into this hooks when in v5
|
|
|
|
*/
|
|
|
|
export default function useItems(items?: ItemType[]) {
|
|
|
|
return React.useMemo(() => {
|
|
|
|
if (!items) {
|
|
|
|
return items;
|
|
|
|
}
|
|
|
|
|
|
|
|
return convertItemsToNodes(items);
|
|
|
|
}, [items]);
|
|
|
|
}
|