feffery_antd_components 0.4.3-rc6 → 0.4.3

package/src/lib/components/navigation/AntdMenu.react.js

@@ -1,650 +1,574 @@
-// react核心
-import React, { Component, useEffect, useMemo } from 'react';
-import PropTypes from 'prop-types';
-// antd核心
-import { Menu, Button } from 'antd';
-import AntdIcon from "../general/AntdIcon.react";
-import {
-    MenuUnfoldOutlined,
-    MenuFoldOutlined,
-} from '@ant-design/icons';
-// 辅助库
-import { get, has, isArray, isUndefined, isNull, isString, cloneDeep } from 'lodash';
-import { pickBy } from 'ramda';
-import isAbsoluteUrl from 'is-absolute-url';
-import { useLoading } from '../utils';
-// 自定义hooks
-import useCss from '../../hooks/useCss';
-
-const { SubMenu, Item, ItemGroup, Divider } = Menu;
-
-// 自定义UtilsLink
-function CustomEvent(event, params) {
-    params = params || {
-        bubbles: false,
-        cancelable: false,
-        detail: undefined
-    };
-    const evt = document.createEvent('CustomEvent');
-    evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
-    return evt;
-}
-CustomEvent.prototype = window.Event.prototype;
-
-function isExternalLink(external_link, href) {
-    if (isUndefined(external_link) || isNull(external_link)) {
-        return isAbsoluteUrl(href);
-    }
-    return external_link;
-}
-
-function findByKey(array, key) {
-    for (let item of array) {
-        if (get(item, 'props.key') === key) {
-            return item;
-        }
-        if (get(item, 'children') && isArray(get(item, 'children'))) {
-            const result = findByKey(item.children, key);
-            if (result) {
-                return result;
-            }
-        }
-    }
-    return null;
-}
-
-function findKeyPath(array, key, path = []) {
-    for (let item of array) {
-        if (item?.props?.key) {
-            let currentPath = [...path, item.props.key];
-            if (get(item, 'props.key') === key) {
-                return currentPath;
-            }
-            if (get(item, 'children') && isArray(get(item, 'children'))) {
-                const result = findKeyPath(item.children, key, currentPath);
-                if (result) {
-                    return result;
-                }
-            }
-        }
-    }
-    return null;
-}
-
-const getLevelKeys = (items1) => {
-    const key = {};
-    const func = (items2, level = 1) => {
-        items2.forEach((item) => {
-            if (item?.props?.key) {
-                key[item.props.key] = level;
-            }
-            if (item?.children) {
-                func(item.children, level + 1);
-            }
-        });
-    };
-    func(items1);
-    return key;
-};
-
-class UtilsLink extends Component {
-
-    constructor(props) {
-        super(props);
-        this.updateLocation = this.updateLocation.bind(this);
-    }
-
-    updateLocation(e) {
-        const hasModifiers = e.metaKey || e.shiftKey || e.altKey || e.ctrlKey;
-        if (hasModifiers) {
-            return;
-        }
-        if (this.props.disabled) {
-            e.preventDefault();
-            return;
-        }
-        if (this.props.preOnClick) {
-            this.props.preOnClick();
-        }
-        const { external_link, href } = this.props;
-        if (href && !isExternalLink(external_link, href)) {
-            // prevent anchor from updating location
-            e.preventDefault();
-            const { href } = this.props;
-            window.history.pushState({}, '', href);
-            window.dispatchEvent(new CustomEvent('_dashprivate_pushstate'));
-            // scroll back to top
-            window.scrollTo(0, 0);
-        }
-    }
-
-    render() {
-        const {
-            children,
-            external_link,
-            preOnClick,
-            target,
-            href,
-            download,
-            ...otherProps
-        } = this.props;
-        const linkIsExternal = href && isExternalLink(external_link, href);
-
-        return (
-            <a
-                href={href}
-                target={linkIsExternal ? target : null}
-                download={download && linkIsExternal ? download : null}
-                {...otherProps}
-                onClick={e => this.updateLocation(e)}
-            >
-                {children}
-            </a>
-        );
-    }
-}
-
-// 字符串 -> 组件
-const str2Jsx = new Map([
-    ['SubMenu', SubMenu],
-    ['Item', Item],
-    ['ItemGroup', ItemGroup],
-    ['Divider', Divider]
-])
-
-// 递归推导多层菜单结构
-const raw2Jsx = (obj, str2Jsx, menuItemKeyToTitle, menuItemKeyToIcon) => {
-    // 若obj为数组
-    if (Array.isArray(obj)) {
-        // 若obj为数组，则针对数组中每个对象向下递归
-        obj = obj.map(obj_ => raw2Jsx(obj_, str2Jsx, menuItemKeyToTitle, menuItemKeyToIcon))
-
-    } else if (obj.hasOwnProperty('component')) {
-        // 若obj包含children属性，则向下递归处理
-        if (obj.hasOwnProperty('children')) {
-            Object.assign(obj, { children: obj.children.map(obj_ => raw2Jsx(obj_, str2Jsx, menuItemKeyToTitle, menuItemKeyToIcon)) })
-            if (obj.component === 'SubMenu') {
-                obj = <SubMenu
-                    key={obj.props.key}
-                    title={menuItemKeyToTitle[obj.props.key] || obj.props.title}
-                    disabled={obj.props.disabled}
-                    icon={
-                        menuItemKeyToIcon[obj.props.key] ||
-                        (
-                            obj.props.iconRenderer === 'fontawesome' ?
-                                (
-                                    React.createElement(
-                                        'i',
-                                        {
-                                            className: obj.props.icon
-                                        }
-                                    )
-                                ) :
-                                (
-                                    <AntdIcon icon={obj.props.icon} />
-                                )
-                        )
-                    }>
-                    {obj.children}
-                </SubMenu>
-            } else {
-                obj = <ItemGroup
-                    key={obj.props.key}
-                    title={menuItemKeyToTitle[obj.props.key] || obj.props.title}
-                    disabled={obj.props.disabled}
-                    icon={
-                        menuItemKeyToIcon[obj.props.key] ||
-                        (
-                            obj.props.iconRenderer === 'fontawesome' ?
-                                (
-                                    React.createElement(
-                                        'i',
-                                        {
-                                            className: obj.props.icon
-                                        }
-                                    )
-                                ) :
-                                (
-                                    <AntdIcon icon={obj.props.icon} />
-                                )
-                        )
-                    }>
-                    {obj.children}
-                </ItemGroup>
-            }
-        } else {
-            // 检查obj.component是否为Divider
-            if (obj.component === 'Divider') {
-                obj = <Divider dashed={obj.props && obj.props.dashed} />
-            } else if (obj.props.href) {
-                // 生成Item对应的jsx
-                obj = <Item
-                    key={obj.props.key}
-                    title={menuItemKeyToTitle[obj.props.key] || obj.props.title}
-                    disabled={obj.props.disabled}
-                    danger={obj.props.danger}
-                    icon={
-                        menuItemKeyToIcon[obj.props.key] ||
-                        (
-                            obj.props.iconRenderer === 'fontawesome' ?
-                                (
-                                    React.createElement(
-                                        'i',
-                                        {
-                                            className: obj.props.icon
-                                        }
-                                    )
-                                ) :
-                                (
-                                    <AntdIcon icon={obj.props.icon} />
-                                )
-                        )
-                    }
-                    name={obj.props && obj.props.name}
-                >
-                    <UtilsLink href={obj.props.href} target={obj.props.target}>{menuItemKeyToTitle[obj.props.key] || obj.props.title}</UtilsLink>
-                </Item>
-            } else {
-                obj = <Item
-                    key={obj.props.key}
-                    title={menuItemKeyToTitle[obj.props.key] || obj.props.title}
-                    disabled={obj.props.disabled}
-                    danger={obj.props.danger}
-                    icon={
-                        menuItemKeyToIcon[obj.props.key] ||
-                        (
-                            obj.props.iconRenderer === 'fontawesome' ?
-                                (
-                                    React.createElement(
-                                        'i',
-                                        {
-                                            className: obj.props.icon
-                                        }
-                                    )
-                                ) :
-                                (
-                                    <AntdIcon icon={obj.props.icon} />
-                                )
-                        )
-                    }
-                    name={obj.props && obj.props.name}
-                >
-                    {menuItemKeyToTitle[obj.props.key] || obj.props.title}
-                </Item>
-            }
-        }
-    }
-    return obj;
-}
-
-/**
- * 导航菜单组件AntdMenu
- */
-const AntdMenu = ({
-    id,
-    className,
-    style,
-    key,
-    expandIcon,
-    menuItems,
-    menuItemKeyToTitle,
-    menuItemKeyToIcon,
-    mode = 'vertical',
-    theme = 'light',
-    defaultOpenKeys,
-    currentKey,
-    openKeys,
-    onlyExpandCurrentSubMenu = false,
-    defaultSelectedKey,
-    renderCollapsedButton = false,
-    popupContainer = 'body',
-    inlineCollapsed,
-    inlineIndent = 24,
-    triggerSubMenuAction = 'hover',
-    setProps,
-    persistence,
-    persisted_props,
-    persistence_type,
-    ...others
-}) => {
-
-    const levelKeys = useMemo(() => {
-        return getLevelKeys(menuItems);
-    }, [menuItems]);
-
-    const onOpenChange = (keys) => {
-        if (onlyExpandCurrentSubMenu) {
-            if (isUndefined(openKeys) || isNull(openKeys)) {
-                openKeys = [];
-            }
-            const currentOpenKey = keys.find((key) => openKeys.indexOf(key) === -1);
-            if (!isUndefined(currentOpenKey)) {
-                const repeatIndex = keys
-                    .filter((key) => key !== currentOpenKey)
-                    .findIndex((key) => levelKeys[key] === levelKeys[currentOpenKey]);
-                setProps({
-                    openKeys: keys
-                        .filter((_, index) => index !== repeatIndex)
-                        .filter((key) => levelKeys[key] <= levelKeys[currentOpenKey]),
-                });
-            } else {
-                setProps({ openKeys: keys });
-            }
-        } else {
-            setProps({ openKeys: keys });
-        }
-    };
-
-    useEffect(() => {
-        // 初始化currentKey
-        if (defaultSelectedKey && !currentKey) {
-            // 当defaultSelectedKey不为空且currentKey为空时
-            // 为currentKey初始化defaultSelectedKey对应的key值
-            setProps({ currentKey: defaultSelectedKey })
-        }
-
-        // 初始化openKeys
-        if (defaultOpenKeys) {
-            // 当defaultOpenKeys不为空且openKeys为空时
-            // 为openKeys初始化defaultOpenKeys对应的key值
-            setProps({ openKeys: defaultOpenKeys })
-        }
-    }, [])
-
-    useEffect(() => {
-        // 当currentKey发生变化时，自动查找currentKey对应的菜单信息
-        let currentItem = findByKey(menuItems, currentKey)
-        // 当currentKey发生变化时，自动查找currentKey对应的key路径信息和菜单路径信息
-        let currentKeyPath = findKeyPath(menuItems, currentKey)
-        let currentItemPath = currentKeyPath?.map(item => findByKey(menuItems, item))
-        setProps({
-            currentItem: currentItem,
-            currentKeyPath: currentKeyPath,
-            currentItemPath: currentItemPath
-        })
-    }, [currentKey])
-
-    // 基于menuItems推导jsx数据结构
-    let _menuItems = raw2Jsx(cloneDeep(menuItems), str2Jsx, menuItemKeyToTitle || {}, menuItemKeyToIcon || {});
-
-    // 监听Item的点击事件
-    const listenSelected = (item) => {
-        // 将当前选中的key值赋给currentKey
-        setProps({ currentKey: item.key })
-    }
-
-    if (renderCollapsedButton) {
-        return (
-            <div style={{ width: '100%' }}>
-                <Button type="primary" onClick={() => setProps({ inlineCollapsed: !inlineCollapsed })}>
-                    {React.createElement(inlineCollapsed ? MenuUnfoldOutlined : MenuFoldOutlined)}
-                </Button>
-                <Menu
-                    // 提取具有data-*或aria-*通配格式的属性
-                    {...pickBy((_, k) => k.startsWith('data-') || k.startsWith('aria-'), others)}
-                    id={id}
-                    className={
-                        isString(className) ?
-                            className :
-                            (className ? useCss(className) : undefined)
-                    }
-                    style={style}
-                    key={key}
-                    expandIcon={
-                        has(expandIcon, 'collapse') && has(expandIcon, 'expand')
-                            ? (props) => props.isSubMenu
-                                ? (props.isOpen
-                                    ? expandIcon.collapse
-                                    : expandIcon.expand)
-                                : undefined
-                            : expandIcon
-                    }
-                    mode={mode}
-                    theme={theme}
-                    selectedKeys={[currentKey]}
-                    openKeys={openKeys}
-                    defaultOpenKeys={defaultOpenKeys}
-                    defaultSelectedKeys={defaultSelectedKey ? [defaultSelectedKey] : defaultSelectedKey}
-                    onSelect={listenSelected}
-                    onOpenChange={onOpenChange}
-                    getPopupContainer={
-                        popupContainer === 'parent' ?
-                            (triggerNode) => triggerNode.parentNode :
-                            undefined
-                    }
-                    inlineCollapsed={inlineCollapsed}
-                    inlineIndent={inlineIndent}
-                    triggerSubMenuAction={triggerSubMenuAction}
-                    data-dash-is-loading={useLoading()}
-                >
-                    {_menuItems}
-                </Menu>
-            </div>
-        );
-    } else {
-        return (
-            <Menu
-                // 提取具有data-*或aria-*通配格式的属性
-                {...pickBy((_, k) => k.startsWith('data-') || k.startsWith('aria-'), others)}
-                id={id}
-                className={
-                    isString(className) ?
-                        className :
-                        (className ? useCss(className) : undefined)
-                }
-                style={style}
-                key={key}
-                expandIcon={
-                    has(expandIcon, 'collapse') && has(expandIcon, 'expand')
-                        ? (props) => props.isSubMenu
-                            ? (props.isOpen
-                                ? expandIcon.collapse
-                                : expandIcon.expand)
-                            : undefined
-                        : expandIcon
-                }
-                mode={mode}
-                theme={theme}
-                selectedKeys={[currentKey]}
-                openKeys={openKeys}
-                defaultOpenKeys={defaultOpenKeys}
-                defaultSelectedKeys={defaultSelectedKey ? [defaultSelectedKey] : defaultSelectedKey}
-                onSelect={listenSelected}
-                onOpenChange={onOpenChange}
-                getPopupContainer={
-                    popupContainer === 'parent' ?
-                        (triggerNode) => triggerNode.parentNode :
-                        undefined
-                }
-                inlineCollapsed={inlineCollapsed}
-                inlineIndent={inlineIndent}
-                triggerSubMenuAction={triggerSubMenuAction}
-                data-dash-is-loading={useLoading()}
-            >
-                {_menuItems}
-            </Menu>
-        );
-    }
-}
-
-AntdMenu.propTypes = {
-    /**
-     * 组件唯一id
-     */
-    id: PropTypes.string,
-
-    /**
-     * 对当前组件的`key`值进行更新，可实现强制重绘当前组件的效果
-     */
-    key: PropTypes.string,
-
-    /**
-     * 当前组件css样式
-     */
-    style: PropTypes.object,
-
-    /**
-     * 当前组件css类名，支持[动态css](/advanced-classname)
-     */
-    className: PropTypes.oneOfType([
-        PropTypes.string,
-        PropTypes.object
-    ]),
-
-    /**
-     * 自定义展开图标，建议仅在`mode='inline'`时使用字典类型
-     */
-    expandIcon: PropTypes.oneOfType([
-        PropTypes.node,
-        PropTypes.exact({
-            /**
-             * 展开图标
-             */
-            expand: PropTypes.node,
-            /**
-             * 收起图标
-             */
-            collapse: PropTypes.node
-        })
-    ]),
-
-    /**
-     * 导航菜单数据结构
-     */
-    menuItems: PropTypes.array,
-
-    /**
-     * 为指定节点定义组件型菜单项标题，优先级高于menuItems中对应节点的title属性
-     */
-    menuItemKeyToTitle: PropTypes.objectOf(PropTypes.node),
-
-    /**
-     * 为指定节点定义组件型菜单项图标元素，优先级高于menuItems中对应节点的icon属性
-     */
-    menuItemKeyToIcon: PropTypes.objectOf(PropTypes.node),
-
-    /**
-     * 显示模式，可选项有`'vertical'`、`'horizontal'`、`'inline'`
-     * 默认值：`'vertical'`
-     */
-    mode: PropTypes.oneOf(['vertical', 'horizontal', 'inline']),
-
-    /**
-     * 主题，可选项有`'light'`、`'dark'`
-     * 默认值：`'light'`
-     */
-    theme: PropTypes.oneOf(['light', 'dark']),
-
-    /**
-     * 监听或设置当前已选中菜单项key值
-     */
-    currentKey: PropTypes.string,
-
-    /**
-     * 监听当前已选中菜单项信息
-     */
-    currentItem: PropTypes.object,
-
-    /**
-     * 监听当前已选中菜单项key值路径信息
-     */
-    currentKeyPath: PropTypes.array,
-
-    /**
-     * 监听当前已选中菜单项路径信息
-     */
-    currentItemPath: PropTypes.array,
-
-    /**
-     * 监听或设置当前已展开子菜单项key值
-     */
-    openKeys: PropTypes.arrayOf(PropTypes.string),
-
-    /**
-     * 是否只展开当前选中项的父级菜单
-     * 默认值：`false`
-     */
-    onlyExpandCurrentSubMenu: PropTypes.bool,
-
-    /**
-     * 默认展开的菜单项key值
-     */
-    defaultOpenKeys: PropTypes.arrayOf(PropTypes.string),
-
-    // 默认选中的菜单项对应key
-    defaultSelectedKey: PropTypes.string,
-
-    /**
-     * 是否渲染菜单折叠状态控制按钮
-     * 默认值：`false`
-     */
-    renderCollapsedButton: PropTypes.bool,
-
-    /**
-     * 菜单展开层锚定策略，可选项有`'parent'`、`'body'`
-     * 默认值：`'body'`
-     */
-    popupContainer: PropTypes.oneOf(['parent', 'body']),
-
-    /**
-     * 当前菜单是否折叠，仅inline模式下有效
-     * 默认值：`false`
-     */
-    inlineCollapsed: PropTypes.bool,
-
-    /**
-     * inline模式下，子菜单相对上一级的像素缩进宽度
-     * 默认值：`24`
-     */
-    inlineIndent: PropTypes.number,
-
-    /**
-     * `SubMenu`展开/关闭的触发行为，可选项有`'hover'`、`'click'`，`mode='inline'`下无效
-     * 默认值：`'hover'`
-     */
-    triggerSubMenuAction: PropTypes.oneOf(['hover', 'click']),
-
-    /**
-     * `data-*`格式属性通配
-     */
-    'data-*': PropTypes.string,
-
-    /**
-     * `aria-*`格式属性通配
-     */
-    'aria-*': PropTypes.string,
-
-    /**
-     * Dash-assigned callback that should be called to report property changes
-     * to Dash, to make them available for callbacks.
-     */
-    setProps: PropTypes.func,
-
-    /**
-     * 是否为当前组件开启持久化功能
-     */
-    persistence: PropTypes.oneOfType([
-        PropTypes.bool,
-        PropTypes.string,
-        PropTypes.number
-    ]),
-
-    /**
-     * 当前组件启用持久化的属性值数组，可选项有`'currentKey'`、`'openKeys'`
-     * 默认值：`['currentKey', 'openKeys']`
-     */
-    persisted_props: PropTypes.arrayOf(PropTypes.oneOf(['currentKey', 'openKeys'])),
-
-    /**
-     * 当前组件的属性持久化存储类型
-     * 默认值：`'local'`
-     */
-    persistence_type: PropTypes.oneOf(['local', 'session', 'memory'])
-};
-
-AntdMenu.dashPersistence = {
-    persisted_props: ['currentKey', 'openKeys'],
-    persistence_type: 'local'
-}
-
+// react核心
+import React, { useEffect, useMemo } from 'react';
+import PropTypes from 'prop-types';
+// antd核心
+import { Menu, Button } from 'antd';
+import AntdIcon from "../general/AntdIcon.react";
+import {
+    MenuUnfoldOutlined,
+    MenuFoldOutlined,
+} from '@ant-design/icons';
+// 辅助库
+import { get, has, isArray, isUndefined, isNull, isString, cloneDeep } from 'lodash';
+import { pickBy } from 'ramda';
+import { useLoading } from '../utils';
+// 自定义hooks
+import useCss from '../../hooks/useCss';
+// 内部组件
+import { UtilsLink } from '../../internal_components/UtilsLink.react';
+
+const { SubMenu, Item, ItemGroup, Divider } = Menu;
+
+function findByKey(array, key) {
+    for (let item of array) {
+        if (get(item, 'props.key') === key) {
+            return item;
+        }
+        if (get(item, 'children') && isArray(get(item, 'children'))) {
+            const result = findByKey(item.children, key);
+            if (result) {
+                return result;
+            }
+        }
+    }
+    return null;
+}
+
+function findKeyPath(array, key, path = []) {
+    for (let item of array) {
+        if (item?.props?.key) {
+            let currentPath = [...path, item.props.key];
+            if (get(item, 'props.key') === key) {
+                return currentPath;
+            }
+            if (get(item, 'children') && isArray(get(item, 'children'))) {
+                const result = findKeyPath(item.children, key, currentPath);
+                if (result) {
+                    return result;
+                }
+            }
+        }
+    }
+    return null;
+}
+
+const getLevelKeys = (items1) => {
+    const key = {};
+    const func = (items2, level = 1) => {
+        items2.forEach((item) => {
+            if (item?.props?.key) {
+                key[item.props.key] = level;
+            }
+            if (item?.children) {
+                func(item.children, level + 1);
+            }
+        });
+    };
+    func(items1);
+    return key;
+};
+
+// 字符串 -> 组件
+const str2Jsx = new Map([
+    ['SubMenu', SubMenu],
+    ['Item', Item],
+    ['ItemGroup', ItemGroup],
+    ['Divider', Divider]
+])
+
+// 递归推导多层菜单结构
+const raw2Jsx = (obj, str2Jsx, menuItemKeyToTitle, menuItemKeyToIcon) => {
+    // 若obj为数组
+    if (Array.isArray(obj)) {
+        // 若obj为数组，则针对数组中每个对象向下递归
+        obj = obj.map(obj_ => raw2Jsx(obj_, str2Jsx, menuItemKeyToTitle, menuItemKeyToIcon))
+
+    } else if (obj.hasOwnProperty('component')) {
+        // 若obj包含children属性，则向下递归处理
+        if (obj.hasOwnProperty('children')) {
+            Object.assign(obj, { children: obj.children.map(obj_ => raw2Jsx(obj_, str2Jsx, menuItemKeyToTitle, menuItemKeyToIcon)) })
+            if (obj.component === 'SubMenu') {
+                obj = <SubMenu
+                    key={obj.props.key}
+                    title={menuItemKeyToTitle[obj.props.key] || obj.props.title}
+                    disabled={obj.props.disabled}
+                    icon={
+                        menuItemKeyToIcon[obj.props.key] ||
+                        (
+                            obj.props.iconRenderer === 'fontawesome' ?
+                                (
+                                    React.createElement(
+                                        'i',
+                                        {
+                                            className: obj.props.icon
+                                        }
+                                    )
+                                ) :
+                                (
+                                    <AntdIcon icon={obj.props.icon} />
+                                )
+                        )
+                    }>
+                    {obj.children}
+                </SubMenu>
+            } else {
+                obj = <ItemGroup
+                    key={obj.props.key}
+                    title={menuItemKeyToTitle[obj.props.key] || obj.props.title}
+                    disabled={obj.props.disabled}
+                    icon={
+                        menuItemKeyToIcon[obj.props.key] ||
+                        (
+                            obj.props.iconRenderer === 'fontawesome' ?
+                                (
+                                    React.createElement(
+                                        'i',
+                                        {
+                                            className: obj.props.icon
+                                        }
+                                    )
+                                ) :
+                                (
+                                    <AntdIcon icon={obj.props.icon} />
+                                )
+                        )
+                    }>
+                    {obj.children}
+                </ItemGroup>
+            }
+        } else {
+            // 检查obj.component是否为Divider
+            if (obj.component === 'Divider') {
+                obj = <Divider dashed={obj.props && obj.props.dashed} />
+            } else if (obj.props.href) {
+                // 生成Item对应的jsx
+                obj = <Item
+                    key={obj.props.key}
+                    title={menuItemKeyToTitle[obj.props.key] || obj.props.title}
+                    disabled={obj.props.disabled}
+                    danger={obj.props.danger}
+                    icon={
+                        menuItemKeyToIcon[obj.props.key] ||
+                        (
+                            obj.props.iconRenderer === 'fontawesome' ?
+                                (
+                                    React.createElement(
+                                        'i',
+                                        {
+                                            className: obj.props.icon
+                                        }
+                                    )
+                                ) :
+                                (
+                                    <AntdIcon icon={obj.props.icon} />
+                                )
+                        )
+                    }
+                    name={obj.props && obj.props.name}
+                >
+                    <UtilsLink href={obj.props.href} target={obj.props.target}>{menuItemKeyToTitle[obj.props.key] || obj.props.title}</UtilsLink>
+                </Item>
+            } else {
+                obj = <Item
+                    key={obj.props.key}
+                    title={menuItemKeyToTitle[obj.props.key] || obj.props.title}
+                    disabled={obj.props.disabled}
+                    danger={obj.props.danger}
+                    icon={
+                        menuItemKeyToIcon[obj.props.key] ||
+                        (
+                            obj.props.iconRenderer === 'fontawesome' ?
+                                (
+                                    React.createElement(
+                                        'i',
+                                        {
+                                            className: obj.props.icon
+                                        }
+                                    )
+                                ) :
+                                (
+                                    <AntdIcon icon={obj.props.icon} />
+                                )
+                        )
+                    }
+                    name={obj.props && obj.props.name}
+                >
+                    {menuItemKeyToTitle[obj.props.key] || obj.props.title}
+                </Item>
+            }
+        }
+    }
+    return obj;
+}
+
+/**
+ * 导航菜单组件AntdMenu
+ */
+const AntdMenu = ({
+    id,
+    className,
+    style,
+    key,
+    expandIcon,
+    menuItems,
+    menuItemKeyToTitle,
+    menuItemKeyToIcon,
+    mode = 'vertical',
+    theme = 'light',
+    defaultOpenKeys,
+    currentKey,
+    openKeys,
+    onlyExpandCurrentSubMenu = false,
+    defaultSelectedKey,
+    renderCollapsedButton = false,
+    popupContainer = 'body',
+    inlineCollapsed,
+    inlineIndent = 24,
+    triggerSubMenuAction = 'hover',
+    setProps,
+    persistence,
+    persisted_props,
+    persistence_type,
+    ...others
+}) => {
+
+    const levelKeys = useMemo(() => {
+        return getLevelKeys(menuItems);
+    }, [menuItems]);
+
+    const onOpenChange = (keys) => {
+        if (onlyExpandCurrentSubMenu) {
+            if (isUndefined(openKeys) || isNull(openKeys)) {
+                openKeys = [];
+            }
+            const currentOpenKey = keys.find((key) => openKeys.indexOf(key) === -1);
+            if (!isUndefined(currentOpenKey)) {
+                const repeatIndex = keys
+                    .filter((key) => key !== currentOpenKey)
+                    .findIndex((key) => levelKeys[key] === levelKeys[currentOpenKey]);
+                setProps({
+                    openKeys: keys
+                        .filter((_, index) => index !== repeatIndex)
+                        .filter((key) => levelKeys[key] <= levelKeys[currentOpenKey]),
+                });
+            } else {
+                setProps({ openKeys: keys });
+            }
+        } else {
+            setProps({ openKeys: keys });
+        }
+    };
+
+    useEffect(() => {
+        // 初始化currentKey
+        if (defaultSelectedKey && !currentKey) {
+            // 当defaultSelectedKey不为空且currentKey为空时
+            // 为currentKey初始化defaultSelectedKey对应的key值
+            setProps({ currentKey: defaultSelectedKey })
+        }
+
+        // 初始化openKeys
+        if (defaultOpenKeys) {
+            // 当defaultOpenKeys不为空且openKeys为空时
+            // 为openKeys初始化defaultOpenKeys对应的key值
+            setProps({ openKeys: defaultOpenKeys })
+        }
+    }, [])
+
+    useEffect(() => {
+        // 当currentKey发生变化时，自动查找currentKey对应的菜单信息
+        let currentItem = findByKey(menuItems, currentKey)
+        // 当currentKey发生变化时，自动查找currentKey对应的key路径信息和菜单路径信息
+        let currentKeyPath = findKeyPath(menuItems, currentKey)
+        let currentItemPath = currentKeyPath?.map(item => findByKey(menuItems, item))
+        setProps({
+            currentItem: currentItem,
+            currentKeyPath: currentKeyPath,
+            currentItemPath: currentItemPath
+        })
+    }, [currentKey])
+
+    // 基于menuItems推导jsx数据结构
+    let _menuItems = raw2Jsx(cloneDeep(menuItems), str2Jsx, menuItemKeyToTitle || {}, menuItemKeyToIcon || {});
+
+    // 监听Item的点击事件
+    const listenSelected = (item) => {
+        // 将当前选中的key值赋给currentKey
+        setProps({ currentKey: item.key })
+    }
+
+    if (renderCollapsedButton) {
+        return (
+            <div style={{ width: '100%' }}>
+                <Button type="primary" onClick={() => setProps({ inlineCollapsed: !inlineCollapsed })}>
+                    {React.createElement(inlineCollapsed ? MenuUnfoldOutlined : MenuFoldOutlined)}
+                </Button>
+                <Menu
+                    // 提取具有data-*或aria-*通配格式的属性
+                    {...pickBy((_, k) => k.startsWith('data-') || k.startsWith('aria-'), others)}
+                    id={id}
+                    className={
+                        isString(className) ?
+                            className :
+                            (className ? useCss(className) : undefined)
+                    }
+                    style={style}
+                    key={key}
+                    expandIcon={
+                        has(expandIcon, 'collapse') && has(expandIcon, 'expand')
+                            ? (props) => props.isSubMenu
+                                ? (props.isOpen
+                                    ? expandIcon.collapse
+                                    : expandIcon.expand)
+                                : undefined
+                            : expandIcon
+                    }
+                    mode={mode}
+                    theme={theme}
+                    selectedKeys={[currentKey]}
+                    openKeys={openKeys}
+                    defaultOpenKeys={defaultOpenKeys}
+                    defaultSelectedKeys={defaultSelectedKey ? [defaultSelectedKey] : defaultSelectedKey}
+                    onSelect={listenSelected}
+                    onOpenChange={onOpenChange}
+                    getPopupContainer={
+                        popupContainer === 'parent' ?
+                            (triggerNode) => triggerNode.parentNode :
+                            undefined
+                    }
+                    inlineCollapsed={inlineCollapsed}
+                    inlineIndent={inlineIndent}
+                    triggerSubMenuAction={triggerSubMenuAction}
+                    data-dash-is-loading={useLoading()}
+                >
+                    {_menuItems}
+                </Menu>
+            </div>
+        );
+    } else {
+        return (
+            <Menu
+                // 提取具有data-*或aria-*通配格式的属性
+                {...pickBy((_, k) => k.startsWith('data-') || k.startsWith('aria-'), others)}
+                id={id}
+                className={
+                    isString(className) ?
+                        className :
+                        (className ? useCss(className) : undefined)
+                }
+                style={style}
+                key={key}
+                expandIcon={
+                    has(expandIcon, 'collapse') && has(expandIcon, 'expand')
+                        ? (props) => props.isSubMenu
+                            ? (props.isOpen
+                                ? expandIcon.collapse
+                                : expandIcon.expand)
+                            : undefined
+                        : expandIcon
+                }
+                mode={mode}
+                theme={theme}
+                selectedKeys={[currentKey]}
+                openKeys={openKeys}
+                defaultOpenKeys={defaultOpenKeys}
+                defaultSelectedKeys={defaultSelectedKey ? [defaultSelectedKey] : defaultSelectedKey}
+                onSelect={listenSelected}
+                onOpenChange={onOpenChange}
+                getPopupContainer={
+                    popupContainer === 'parent' ?
+                        (triggerNode) => triggerNode.parentNode :
+                        undefined
+                }
+                inlineCollapsed={inlineCollapsed}
+                inlineIndent={inlineIndent}
+                triggerSubMenuAction={triggerSubMenuAction}
+                data-dash-is-loading={useLoading()}
+            >
+                {_menuItems}
+            </Menu>
+        );
+    }
+}
+
+AntdMenu.propTypes = {
+    /**
+     * 组件唯一id
+     */
+    id: PropTypes.string,
+
+    /**
+     * 对当前组件的`key`值进行更新，可实现强制重绘当前组件的效果
+     */
+    key: PropTypes.string,
+
+    /**
+     * 当前组件css样式
+     */
+    style: PropTypes.object,
+
+    /**
+     * 当前组件css类名，支持[动态css](/advanced-classname)
+     */
+    className: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.object
+    ]),
+
+    /**
+     * 自定义展开图标，建议仅在`mode='inline'`时使用字典类型
+     */
+    expandIcon: PropTypes.oneOfType([
+        PropTypes.node,
+        PropTypes.exact({
+            /**
+             * 展开图标
+             */
+            expand: PropTypes.node,
+            /**
+             * 收起图标
+             */
+            collapse: PropTypes.node
+        })
+    ]),
+
+    /**
+     * 导航菜单数据结构
+     */
+    menuItems: PropTypes.array,
+
+    /**
+     * 为指定节点定义组件型菜单项标题，优先级高于menuItems中对应节点的title属性
+     */
+    menuItemKeyToTitle: PropTypes.objectOf(PropTypes.node),
+
+    /**
+     * 为指定节点定义组件型菜单项图标元素，优先级高于menuItems中对应节点的icon属性
+     */
+    menuItemKeyToIcon: PropTypes.objectOf(PropTypes.node),
+
+    /**
+     * 显示模式，可选项有`'vertical'`、`'horizontal'`、`'inline'`
+     * 默认值：`'vertical'`
+     */
+    mode: PropTypes.oneOf(['vertical', 'horizontal', 'inline']),
+
+    /**
+     * 主题，可选项有`'light'`、`'dark'`
+     * 默认值：`'light'`
+     */
+    theme: PropTypes.oneOf(['light', 'dark']),
+
+    /**
+     * 监听或设置当前已选中菜单项key值
+     */
+    currentKey: PropTypes.string,
+
+    /**
+     * 监听当前已选中菜单项信息
+     */
+    currentItem: PropTypes.object,
+
+    /**
+     * 监听当前已选中菜单项key值路径信息
+     */
+    currentKeyPath: PropTypes.array,
+
+    /**
+     * 监听当前已选中菜单项路径信息
+     */
+    currentItemPath: PropTypes.array,
+
+    /**
+     * 监听或设置当前已展开子菜单项key值
+     */
+    openKeys: PropTypes.arrayOf(PropTypes.string),
+
+    /**
+     * 是否只展开当前选中项的父级菜单
+     * 默认值：`false`
+     */
+    onlyExpandCurrentSubMenu: PropTypes.bool,
+
+    /**
+     * 默认展开的菜单项key值
+     */
+    defaultOpenKeys: PropTypes.arrayOf(PropTypes.string),
+
+    // 默认选中的菜单项对应key
+    defaultSelectedKey: PropTypes.string,
+
+    /**
+     * 是否渲染菜单折叠状态控制按钮
+     * 默认值：`false`
+     */
+    renderCollapsedButton: PropTypes.bool,
+
+    /**
+     * 菜单展开层锚定策略，可选项有`'parent'`、`'body'`
+     * 默认值：`'body'`
+     */
+    popupContainer: PropTypes.oneOf(['parent', 'body']),
+
+    /**
+     * 当前菜单是否折叠，仅inline模式下有效
+     * 默认值：`false`
+     */
+    inlineCollapsed: PropTypes.bool,
+
+    /**
+     * inline模式下，子菜单相对上一级的像素缩进宽度
+     * 默认值：`24`
+     */
+    inlineIndent: PropTypes.number,
+
+    /**
+     * `SubMenu`展开/关闭的触发行为，可选项有`'hover'`、`'click'`，`mode='inline'`下无效
+     * 默认值：`'hover'`
+     */
+    triggerSubMenuAction: PropTypes.oneOf(['hover', 'click']),
+
+    /**
+     * `data-*`格式属性通配
+     */
+    'data-*': PropTypes.string,
+
+    /**
+     * `aria-*`格式属性通配
+     */
+    'aria-*': PropTypes.string,
+
+    /**
+     * Dash-assigned callback that should be called to report property changes
+     * to Dash, to make them available for callbacks.
+     */
+    setProps: PropTypes.func,
+
+    /**
+     * 是否为当前组件开启持久化功能
+     */
+    persistence: PropTypes.oneOfType([
+        PropTypes.bool,
+        PropTypes.string,
+        PropTypes.number
+    ]),
+
+    /**
+     * 当前组件启用持久化的属性值数组，可选项有`'currentKey'`、`'openKeys'`
+     * 默认值：`['currentKey', 'openKeys']`
+     */
+    persisted_props: PropTypes.arrayOf(PropTypes.oneOf(['currentKey', 'openKeys'])),
+
+    /**
+     * 当前组件的属性持久化存储类型
+     * 默认值：`'local'`
+     */
+    persistence_type: PropTypes.oneOf(['local', 'session', 'memory'])
+};
+
+AntdMenu.dashPersistence = {
+    persisted_props: ['currentKey', 'openKeys'],
+    persistence_type: 'local'
+}
+
 export default AntdMenu;