@tachybase/client 0.23.8 → 0.23.16

package/es/schema-component/antd/menu/Menu.mjs

@@ -0,0 +1,591 @@
+import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__ from "react/jsx-runtime";
+import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
+import * as __WEBPACK_EXTERNAL_MODULE__tachybase_schema__ from "@tachybase/schema";
+import * as __WEBPACK_EXTERNAL_MODULE__tachybase_utils_client__ from "@tachybase/utils/client";
+import * as __WEBPACK_EXTERNAL_MODULE_antd__ from "antd";
+import * as __WEBPACK_EXTERNAL_MODULE_react_dom__ from "react-dom";
+import * as __WEBPACK_EXTERNAL_MODULE_react_i18next__ from "react-i18next";
+import * as __WEBPACK_EXTERNAL_MODULE__index_mjs__ from "../../index.mjs";
+import * as __WEBPACK_EXTERNAL_MODULE__index_mjs__ from "../../../index.mjs";
+import * as __WEBPACK_EXTERNAL_MODULE__hooks_useMenuItem_mjs__ from "../../../hooks/useMenuItem.mjs";
+import * as __WEBPACK_EXTERNAL_MODULE__hooks_useProps_mjs__ from "../../hooks/useProps.mjs";
+import * as __WEBPACK_EXTERNAL_MODULE__locale_mjs__ from "./locale.mjs";
+import * as __WEBPACK_EXTERNAL_MODULE__Menu_Designer_mjs__ from "./Menu.Designer.mjs";
+import * as __WEBPACK_EXTERNAL_MODULE__Menu_styles_mjs__ from "./Menu.styles.mjs";
+import * as __WEBPACK_EXTERNAL_MODULE__util_mjs__ from "./util.mjs";
+function _tagged_template_literal(strings, raw) {
+    if (!raw) raw = strings.slice(0);
+    return Object.freeze(Object.defineProperties(strings, {
+        raw: {
+            value: Object.freeze(raw)
+        }
+    }));
+}
+function _templateObject() {
+    const data = _tagged_template_literal([
+        "\n          .iconButton {\n            border: 0;\n            height: var(--tb-header-height);\n            width: 46px;\n            border-radius: 0;\n            background: none;\n            color: rgba(255, 255, 255, 0.65);\n            &:hover {\n              background: rgba(255, 255, 255, 0.1) !important;\n            }\n          }\n        "
+    ]);
+    _templateObject = function() {
+        return data;
+    };
+    return data;
+}
+function _templateObject1() {
+    const data = _tagged_template_literal([
+        "\n                  border: none;\n                  max-width: 21rem;\n                "
+    ]);
+    _templateObject1 = function() {
+        return data;
+    };
+    return data;
+}
+function _templateObject2() {
+    const data = _tagged_template_literal([
+        "\n                                  display: block;\n                                  color: inherit;\n                                  &:hover {\n                                    color: inherit;\n                                  }\n                                "
+    ]);
+    _templateObject2 = function() {
+        return data;
+    };
+    return data;
+}
+const HeaderMenu = (param)=>{
+    let { others, schema, mode, onSelect, setLoading, setDefaultSelectedKeys, defaultSelectedKeys, defaultOpenKeys, selectedKeys, designable, render, children } = param;
+    const { Component, getMenuItems } = (0, __WEBPACK_EXTERNAL_MODULE__hooks_useMenuItem_mjs__.useMenuItem)();
+    const { token } = (0, __WEBPACK_EXTERNAL_MODULE__index_mjs__.useToken)();
+    const [items, setItems] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)([]);
+    const { t } = (0, __WEBPACK_EXTERNAL_MODULE_react_i18next__.useTranslation)();
+    const { styles: itemStyle } = (0, __WEBPACK_EXTERNAL_MODULE__Menu_styles_mjs__.useStyles)();
+    const result = getMenuItems(()=>children);
+    (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
+        setItems(getItem());
+    }, [
+        children,
+        designable,
+        getMenuItems
+    ]);
+    const getItem = ()=>{
+        const designerBtn = {
+            key: 'x-designer-button',
+            label: render({
+                'data-testid': 'schema-initializer-Menu-header',
+                style: {
+                    background: 'none',
+                    height: '100%'
+                }
+            }),
+            notdelete: true,
+            disabled: true
+        };
+        if (designable) result.push(designerBtn);
+        return result;
+    };
+    const onClick = (info)=>{
+        var _schema_properties;
+        const s = null === (_schema_properties = schema.properties) || void 0 === _schema_properties ? void 0 : _schema_properties[info.key];
+        if (!s) return;
+        if ('mix' === mode) {
+            if ('Menu.SubMenu' !== s['x-component']) null == onSelect || onSelect({
+                item: {
+                    props: info
+                }
+            });
+            else {
+                const menuItemSchema = (0, __WEBPACK_EXTERNAL_MODULE__util_mjs__.findMenuItem)(s);
+                if (!menuItemSchema) return null == onSelect ? void 0 : onSelect({
+                    item: {
+                        props: info
+                    }
+                });
+                setLoading(true);
+                const keys = (0, __WEBPACK_EXTERNAL_MODULE__util_mjs__.findKeysByUid)(schema, menuItemSchema['x-uid']);
+                setDefaultSelectedKeys(keys);
+                setTimeout(()=>{
+                    setLoading(false);
+                }, 100);
+                null == onSelect || onSelect({
+                    key: menuItemSchema.name,
+                    item: {
+                        props: {
+                            schema: menuItemSchema
+                        }
+                    }
+                });
+            }
+        } else null == onSelect || onSelect({
+            item: {
+                props: info
+            }
+        });
+    };
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsxs)("div", {
+        style: {
+            display: 'flex'
+        },
+        children: [
+            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)("div", {
+                style: {
+                    flex: 1
+                }
+            }),
+            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsxs)("div", {
+                className: (0, __WEBPACK_EXTERNAL_MODULE__index_mjs__.css)(_templateObject()),
+                children: [
+                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(__WEBPACK_EXTERNAL_MODULE_antd__.Popover, {
+                        placement: "bottomRight",
+                        arrow: false,
+                        content: ()=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(__WEBPACK_EXTERNAL_MODULE_antd__.Card, {
+                                className: (0, __WEBPACK_EXTERNAL_MODULE__index_mjs__.css)(_templateObject1()),
+                                children: null == items ? void 0 : items.map((item)=>{
+                                    const { icon, field, Designer, schema, styles } = (null == item ? void 0 : item.menu) || {};
+                                    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(__WEBPACK_EXTERNAL_MODULE_antd__.Card.Grid, {
+                                        style: {
+                                            display: 'block',
+                                            color: 'inherit',
+                                            padding: token.marginSM,
+                                            boxShadow: 'none',
+                                            width: '7rem',
+                                            height: '5rem'
+                                        },
+                                        className: itemStyle.menuItem,
+                                        onClick: ()=>{
+                                            onClick(item);
+                                        },
+                                        children: item.menu ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(__WEBPACK_EXTERNAL_MODULE__tachybase_schema__.SchemaContext.Provider, {
+                                            value: schema,
+                                            children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(__WEBPACK_EXTERNAL_MODULE__tachybase_schema__.FieldContext.Provider, {
+                                                value: field,
+                                                children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsxs)(__WEBPACK_EXTERNAL_MODULE__index_mjs__.SortableItem, {
+                                                    role: "button",
+                                                    "aria-label": t(field.title),
+                                                    className: styles.designerCss,
+                                                    removeParentsIfNoChildren: false,
+                                                    style: {
+                                                        position: 'revert'
+                                                    },
+                                                    children: [
+                                                        /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsxs)("a", {
+                                                            role: "button",
+                                                            "aria-label": t(field.title),
+                                                            title: t(field.title),
+                                                            className: (0, __WEBPACK_EXTERNAL_MODULE__index_mjs__.css)(_templateObject2()),
+                                                            children: [
+                                                                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)("div", {
+                                                                    style: {
+                                                                        fontSize: '1.2rem',
+                                                                        textAlign: 'center',
+                                                                        marginBottom: '0.3rem'
+                                                                    },
+                                                                    children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(__WEBPACK_EXTERNAL_MODULE__index_mjs__.Icon, {
+                                                                        type: icon || 'QuestionCircleOutlined'
+                                                                    })
+                                                                }),
+                                                                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)("div", {
+                                                                    style: {
+                                                                        textAlign: 'center',
+                                                                        whiteSpace: 'nowrap',
+                                                                        overflow: 'hidden',
+                                                                        textOverflow: 'ellipsis',
+                                                                        fontSize: token.fontSizeSM
+                                                                    },
+                                                                    children: t(field.title)
+                                                                })
+                                                            ]
+                                                        }),
+                                                        /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(Designer, {})
+                                                    ]
+                                                })
+                                            })
+                                        }) : /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.Fragment, {
+                                            children: item.label
+                                        })
+                                    }, item.key);
+                                })
+                            }),
+                        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(__WEBPACK_EXTERNAL_MODULE_antd__.Button, {
+                            className: "iconButton",
+                            icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(__WEBPACK_EXTERNAL_MODULE__index_mjs__.Icon, {
+                                type: "apps",
+                                style: {
+                                    color: token.colorTextHeaderMenu
+                                }
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(Component, {})
+                ]
+            })
+        ]
+    });
+};
+const SideMenu = (param)=>{
+    let { loading, mode, sideMenuSchema, sideMenuRef, defaultOpenKeys, defaultSelectedKeys, onSelect, render, t, api, refresh, designable } = param;
+    var _sideMenuRef_current;
+    const { Component, getMenuItems } = (0, __WEBPACK_EXTERNAL_MODULE__hooks_useMenuItem_mjs__.useMenuItem)();
+    const { styles } = (0, __WEBPACK_EXTERNAL_MODULE__Menu_styles_mjs__.useStyles)();
+    const sideMenuSchemaRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(sideMenuSchema);
+    sideMenuSchemaRef.current = sideMenuSchema;
+    const items = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>{
+        const result = getMenuItems(()=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(__WEBPACK_EXTERNAL_MODULE__tachybase_schema__.RecursionField, {
+                schema: sideMenuSchema,
+                onlyRenderProperties: true
+            }, (0, __WEBPACK_EXTERNAL_MODULE__tachybase_schema__.uid)()));
+        if (designable) result.push({
+            key: 'x-designer-button',
+            disabled: true,
+            label: render({
+                'data-testid': 'schema-initializer-Menu-side',
+                insert: (s)=>{
+                    const dn = (0, __WEBPACK_EXTERNAL_MODULE__index_mjs__.createDesignable)({
+                        t,
+                        api,
+                        refresh,
+                        current: sideMenuSchemaRef.current
+                    });
+                    dn.loadAPIClientEvents();
+                    dn.insertAdjacent('beforeEnd', s);
+                }
+            }),
+            order: 1,
+            notdelete: true
+        });
+        return result;
+    }, [
+        getMenuItems,
+        designable,
+        sideMenuSchema,
+        render,
+        t,
+        api,
+        refresh
+    ]);
+    if (loading) return null;
+    return 'mix' === mode && (null == sideMenuSchema ? void 0 : sideMenuSchema['x-component']) === 'Menu.SubMenu' && (null == sideMenuRef ? void 0 : null === (_sideMenuRef_current = sideMenuRef.current) || void 0 === _sideMenuRef_current ? void 0 : _sideMenuRef_current.firstChild) && /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_dom__.createPortal)(/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsxs)(MenuModeContext.Provider, {
+        value: 'inline',
+        children: [
+            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(Component, {}),
+            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(__WEBPACK_EXTERNAL_MODULE_antd__.Menu, {
+                mode: 'inline',
+                defaultOpenKeys: defaultOpenKeys,
+                defaultSelectedKeys: defaultSelectedKeys,
+                onSelect: (info)=>{
+                    null == onSelect || onSelect(info);
+                },
+                className: styles.sideMenuClass,
+                items: items
+            })
+        ]
+    }), sideMenuRef.current.firstChild);
+};
+const MenuModeContext = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.createContext)(null);
+MenuModeContext.displayName = 'MenuModeContext';
+const useSideMenuRef = ()=>{
+    var _schema_xcomponentprops;
+    const schema = (0, __WEBPACK_EXTERNAL_MODULE__tachybase_schema__.useFieldSchema)();
+    const scope = (0, __WEBPACK_EXTERNAL_MODULE_react__.useContext)(__WEBPACK_EXTERNAL_MODULE__tachybase_schema__.SchemaExpressionScopeContext);
+    const scopeKey = null == schema ? void 0 : null === (_schema_xcomponentprops = schema['x-component-props']) || void 0 === _schema_xcomponentprops ? void 0 : _schema_xcomponentprops['sideMenuRefScopeKey'];
+    if (!scopeKey) return;
+    return scope[scopeKey];
+};
+const MenuItemDesignerContext = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.createContext)(null);
+MenuItemDesignerContext.displayName = 'MenuItemDesignerContext';
+const Menu = (0, __WEBPACK_EXTERNAL_MODULE__tachybase_schema__.observer)((props)=>{
+    const { onSelect, mode, selectedUid, defaultSelectedUid, sideMenuRefScopeKey, defaultSelectedKeys: dSelectedKeys, defaultOpenKeys: dOpenKeys, children, ...others } = (0, __WEBPACK_EXTERNAL_MODULE__hooks_useProps_mjs__.useProps)(props);
+    const { t } = (0, __WEBPACK_EXTERNAL_MODULE_react_i18next__.useTranslation)();
+    const Designer = (0, __WEBPACK_EXTERNAL_MODULE__index_mjs__.useDesigner)();
+    const schema = (0, __WEBPACK_EXTERNAL_MODULE__tachybase_schema__.useFieldSchema)();
+    const { refresh } = (0, __WEBPACK_EXTERNAL_MODULE__index_mjs__.useDesignable)();
+    const api = (0, __WEBPACK_EXTERNAL_MODULE__index_mjs__.useAPIClient)();
+    const { render } = (0, __WEBPACK_EXTERNAL_MODULE__index_mjs__.useSchemaInitializerRender)(schema['x-initializer'], schema['x-initializer-props']);
+    const sideMenuRef = useSideMenuRef();
+    const [selectedKeys, setSelectedKeys] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)();
+    const [defaultSelectedKeys, setDefaultSelectedKeys] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(()=>{
+        if (dSelectedKeys) return dSelectedKeys;
+        if (defaultSelectedUid) return (0, __WEBPACK_EXTERNAL_MODULE__util_mjs__.findKeysByUid)(schema, defaultSelectedUid);
+        return [];
+    });
+    const [loading, setLoading] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(false);
+    const [defaultOpenKeys, setDefaultOpenKeys] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(()=>{
+        if ([
+            'inline',
+            'mix'
+        ].includes(mode)) return dOpenKeys || defaultSelectedKeys;
+        return dOpenKeys;
+    });
+    const sideMenuSchema = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>{
+        let key;
+        if (selectedUid) {
+            const keys = (0, __WEBPACK_EXTERNAL_MODULE__util_mjs__.findKeysByUid)(schema, selectedUid);
+            key = (null == keys ? void 0 : keys[0]) || null;
+        } else key = (null == defaultSelectedKeys ? void 0 : defaultSelectedKeys[0]) || null;
+        if ('mix' === mode && key) {
+            var _schema_properties;
+            const s = null === (_schema_properties = schema.properties) || void 0 === _schema_properties ? void 0 : _schema_properties[key];
+            if ((null == s ? void 0 : s['x-component']) === 'Menu.SubMenu') return s;
+        }
+        return null;
+    }, [
+        defaultSelectedKeys,
+        mode,
+        schema,
+        selectedUid
+    ]);
+    (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
+        if (!selectedUid) {
+            setSelectedKeys(void 0);
+            return;
+        }
+        const keys = (0, __WEBPACK_EXTERNAL_MODULE__util_mjs__.findKeysByUid)(schema, selectedUid);
+        setSelectedKeys(keys);
+        if ([
+            'inline',
+            'mix'
+        ].includes(mode)) setDefaultOpenKeys(dOpenKeys || keys);
+    }, [
+        selectedUid
+    ]);
+    (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
+        if ([
+            'inline',
+            'mix'
+        ].includes(mode)) setDefaultOpenKeys(defaultSelectedKeys);
+    }, [
+        defaultSelectedKeys
+    ]);
+    const { designable } = (0, __WEBPACK_EXTERNAL_MODULE__index_mjs__.useDesignable)();
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(__WEBPACK_EXTERNAL_MODULE__index_mjs__.DndContext, {
+        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(MenuItemDesignerContext.Provider, {
+            value: Designer,
+            children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsxs)(MenuModeContext.Provider, {
+                value: mode,
+                children: [
+                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(HeaderMenu, {
+                        others: others,
+                        schema: schema,
+                        mode: mode,
+                        onSelect: onSelect,
+                        setLoading: setLoading,
+                        setDefaultSelectedKeys: setDefaultSelectedKeys,
+                        defaultSelectedKeys: defaultSelectedKeys,
+                        defaultOpenKeys: defaultOpenKeys,
+                        selectedKeys: selectedKeys,
+                        designable: designable,
+                        render: render,
+                        children: children
+                    }),
+                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(SideMenu, {
+                        loading: loading,
+                        mode: mode,
+                        sideMenuSchema: sideMenuSchema,
+                        sideMenuRef: sideMenuRef,
+                        defaultOpenKeys: defaultOpenKeys,
+                        defaultSelectedKeys: defaultSelectedKeys,
+                        onSelect: onSelect,
+                        render: render,
+                        t: t,
+                        api: api,
+                        refresh: refresh,
+                        designable: designable
+                    })
+                ]
+            })
+        })
+    });
+}, {
+    displayName: 'Menu'
+});
+Menu.Item = (0, __WEBPACK_EXTERNAL_MODULE__tachybase_schema__.observer)((props)=>{
+    const { t } = (0, __WEBPACK_EXTERNAL_MODULE__locale_mjs__.useMenuTranslation)();
+    const { pushMenuItem } = (0, __WEBPACK_EXTERNAL_MODULE__hooks_useMenuItem_mjs__.useCollectMenuItems)();
+    const { icon, children, ...others } = props;
+    const schema = (0, __WEBPACK_EXTERNAL_MODULE__tachybase_schema__.useFieldSchema)();
+    const { styles } = (0, __WEBPACK_EXTERNAL_MODULE__Menu_styles_mjs__.useStyles)();
+    const field = (0, __WEBPACK_EXTERNAL_MODULE__tachybase_schema__.useField)();
+    const Designer = (0, __WEBPACK_EXTERNAL_MODULE_react__.useContext)(MenuItemDesignerContext);
+    const item = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>({
+            ...others,
+            className: styles.menuItemClass,
+            key: schema.name,
+            eventKey: schema.name,
+            schema,
+            menu: {
+                icon,
+                field,
+                Designer,
+                schema,
+                styles
+            },
+            label: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(__WEBPACK_EXTERNAL_MODULE__tachybase_schema__.SchemaContext.Provider, {
+                value: schema,
+                children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(__WEBPACK_EXTERNAL_MODULE__tachybase_schema__.FieldContext.Provider, {
+                    value: field,
+                    children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsxs)(__WEBPACK_EXTERNAL_MODULE__index_mjs__.SortableItem, {
+                        role: "button",
+                        "aria-label": t(field.title),
+                        className: styles.designerCss,
+                        removeParentsIfNoChildren: false,
+                        children: [
+                            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(__WEBPACK_EXTERNAL_MODULE__index_mjs__.Icon, {
+                                type: icon
+                            }),
+                            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)("span", {
+                                style: {
+                                    overflow: 'hidden',
+                                    textOverflow: 'ellipsis',
+                                    display: 'inline-block',
+                                    width: '100%',
+                                    verticalAlign: 'middle'
+                                },
+                                children: t(field.title)
+                            }),
+                            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(Designer, {})
+                        ]
+                    })
+                })
+            })
+        }), [
+        field.title,
+        icon,
+        schema,
+        Designer
+    ]);
+    if (!pushMenuItem) {
+        (0, __WEBPACK_EXTERNAL_MODULE__tachybase_utils_client__.error)('Menu.Item must be wrapped by GetMenuItemsContext.Provider');
+        return null;
+    }
+    pushMenuItem(item);
+    return null;
+}, {
+    displayName: 'Menu.Item'
+});
+Menu.URL = (0, __WEBPACK_EXTERNAL_MODULE__tachybase_schema__.observer)((props)=>{
+    const { t } = (0, __WEBPACK_EXTERNAL_MODULE__locale_mjs__.useMenuTranslation)();
+    const { pushMenuItem } = (0, __WEBPACK_EXTERNAL_MODULE__hooks_useMenuItem_mjs__.useCollectMenuItems)();
+    const { icon, children, ...others } = props;
+    const schema = (0, __WEBPACK_EXTERNAL_MODULE__tachybase_schema__.useFieldSchema)();
+    const field = (0, __WEBPACK_EXTERNAL_MODULE__tachybase_schema__.useField)();
+    const Designer = (0, __WEBPACK_EXTERNAL_MODULE_react__.useContext)(MenuItemDesignerContext);
+    const { styles } = (0, __WEBPACK_EXTERNAL_MODULE__Menu_styles_mjs__.useStyles)();
+    if (!pushMenuItem) {
+        (0, __WEBPACK_EXTERNAL_MODULE__tachybase_utils_client__.error)('Menu.URL must be wrapped by GetMenuItemsContext.Provider');
+        return null;
+    }
+    const item = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>({
+            ...others,
+            className: styles.menuItemClass,
+            key: schema.name,
+            eventKey: schema.name,
+            schema,
+            onClick: ()=>{
+                window.open(props.href, '_blank');
+            },
+            menu: {
+                icon,
+                field,
+                Designer,
+                schema,
+                styles
+            },
+            label: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(__WEBPACK_EXTERNAL_MODULE__tachybase_schema__.SchemaContext.Provider, {
+                value: schema,
+                children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(__WEBPACK_EXTERNAL_MODULE__tachybase_schema__.FieldContext.Provider, {
+                    value: field,
+                    children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsxs)(__WEBPACK_EXTERNAL_MODULE__index_mjs__.SortableItem, {
+                        className: styles.designerCss,
+                        removeParentsIfNoChildren: false,
+                        "aria-label": t(field.title),
+                        children: [
+                            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(__WEBPACK_EXTERNAL_MODULE__index_mjs__.Icon, {
+                                type: icon
+                            }),
+                            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)("span", {
+                                style: {
+                                    overflow: 'hidden',
+                                    textOverflow: 'ellipsis',
+                                    display: 'inline-block',
+                                    width: '100%',
+                                    verticalAlign: 'middle'
+                                },
+                                children: t(field.title)
+                            }),
+                            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(Designer, {})
+                        ]
+                    })
+                })
+            })
+        }), [
+        field.title,
+        icon,
+        props.href,
+        schema,
+        Designer
+    ]);
+    pushMenuItem(item);
+    return null;
+}, {
+    displayName: 'MenuURL'
+});
+Menu.SubMenu = (0, __WEBPACK_EXTERNAL_MODULE__tachybase_schema__.observer)((props)=>{
+    const { t } = (0, __WEBPACK_EXTERNAL_MODULE__locale_mjs__.useMenuTranslation)();
+    const { Component, getMenuItems } = (0, __WEBPACK_EXTERNAL_MODULE__hooks_useMenuItem_mjs__.useMenuItem)();
+    const { pushMenuItem } = (0, __WEBPACK_EXTERNAL_MODULE__hooks_useMenuItem_mjs__.useCollectMenuItems)();
+    const { icon, children, ...others } = props;
+    const schema = (0, __WEBPACK_EXTERNAL_MODULE__tachybase_schema__.useFieldSchema)();
+    const field = (0, __WEBPACK_EXTERNAL_MODULE__tachybase_schema__.useField)();
+    const mode = (0, __WEBPACK_EXTERNAL_MODULE_react__.useContext)(MenuModeContext);
+    const Designer = (0, __WEBPACK_EXTERNAL_MODULE_react__.useContext)(MenuItemDesignerContext);
+    const { styles } = (0, __WEBPACK_EXTERNAL_MODULE__Menu_styles_mjs__.useStyles)();
+    const submenu = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>({
+            ...others,
+            className: styles.menuItemClass,
+            key: schema.name,
+            eventKey: schema.name,
+            menu: {
+                icon,
+                field,
+                Designer,
+                schema,
+                styles
+            },
+            label: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(__WEBPACK_EXTERNAL_MODULE__tachybase_schema__.SchemaContext.Provider, {
+                value: schema,
+                children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(__WEBPACK_EXTERNAL_MODULE__tachybase_schema__.FieldContext.Provider, {
+                    value: field,
+                    children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsxs)(__WEBPACK_EXTERNAL_MODULE__index_mjs__.SortableItem, {
+                        className: styles.subMenuDesignerCss,
+                        removeParentsIfNoChildren: false,
+                        "aria-label": t(field.title),
+                        children: [
+                            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(__WEBPACK_EXTERNAL_MODULE__index_mjs__.Icon, {
+                                type: icon
+                            }),
+                            t(field.title),
+                            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(Designer, {})
+                        ]
+                    })
+                })
+            }),
+            children: getMenuItems(()=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(__WEBPACK_EXTERNAL_MODULE__tachybase_schema__.RecursionField, {
+                    schema: schema,
+                    onlyRenderProperties: true
+                }))
+        }), [
+        field.title,
+        icon,
+        schema,
+        children,
+        Designer
+    ]);
+    if (!pushMenuItem) {
+        (0, __WEBPACK_EXTERNAL_MODULE__tachybase_utils_client__.error)('Menu.SubMenu must be wrapped by GetMenuItemsContext.Provider');
+        return null;
+    }
+    if ('mix' === mode) return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(Menu.Item, {
+        ...props
+    });
+    pushMenuItem(submenu);
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(Component, {});
+}, {
+    displayName: 'Menu.SubMenu'
+});
+Menu.Designer = __WEBPACK_EXTERNAL_MODULE__Menu_Designer_mjs__.MenuDesigner;
+export { Menu };

package/es/schema-component/antd/menu/Menu.styles.mjs

@@ -0,0 +1,77 @@
+import * as __WEBPACK_EXTERNAL_MODULE_antd_style__ from "antd-style";
+function _tagged_template_literal(strings, raw) {
+    if (!raw) raw = strings.slice(0);
+    return Object.freeze(Object.defineProperties(strings, {
+        raw: {
+            value: Object.freeze(raw)
+        }
+    }));
+}
+function _templateObject() {
+    const data = _tagged_template_literal([
+        "\n      position: relative;\n      display: inline-block;\n      margin-left: -24px;\n      margin-right: -34px;\n      padding: 0 34px 0 24px;\n      width: calc(100% + 58px);\n      height: 100%;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      &:hover {\n        > .general-schema-designer {\n          display: block;\n        }\n      }\n      &.tb-action-link {\n        > .general-schema-designer {\n          top: -10px;\n          bottom: -10px;\n          left: -10px;\n          right: -10px;\n        }\n      }\n      > .general-schema-designer {\n        position: absolute;\n        z-index: 999;\n        top: 0;\n        bottom: 0;\n        left: 0;\n        right: 0;\n        display: none;\n        background: var(--colorBgSettingsHover);\n        border: 0;\n        pointer-events: none;\n        > .general-schema-designer-icons {\n          position: absolute;\n          right: 2px;\n          top: 2px;\n          line-height: 16px;\n          pointer-events: all;\n          .ant-space-item {\n            background-color: var(--colorSettings);\n            color: #fff;\n            line-height: 16px;\n            width: 16px;\n            padding-left: 1px;\n            align-self: stretch;\n          }\n        }\n      }\n    "
+    ]);
+    _templateObject = function() {
+        return data;
+    };
+    return data;
+}
+function _templateObject1() {
+    const data = _tagged_template_literal([
+        "\n      position: relative;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      margin-left: -20px;\n      margin-right: -20px;\n      padding: 0 20px;\n      width: calc(100% + 40px);\n      height: 100%;\n      &:hover {\n        > .general-schema-designer {\n          display: block;\n        }\n      }\n      &.tb-action-link {\n        > .general-schema-designer {\n          top: -10px;\n          bottom: -10px;\n          left: -10px;\n          right: -10px;\n        }\n      }\n      > .general-schema-designer {\n        position: absolute;\n        z-index: 999;\n        top: 0;\n        bottom: 0;\n        left: 0;\n        right: 0;\n        display: none;\n        background: var(--colorBgSettingsHover);\n        border: 0;\n        pointer-events: none;\n        > .general-schema-designer-icons {\n          position: absolute;\n          right: 2px;\n          top: 2px;\n          line-height: 16px;\n          pointer-events: all;\n          .ant-space-item {\n            background-color: var(--colorSettings);\n            color: #fff;\n            line-height: 16px;\n            width: 16px;\n            padding-left: 1px;\n            align-self: stretch;\n          }\n        }\n      }\n    "
+    ]);
+    _templateObject1 = function() {
+        return data;
+    };
+    return data;
+}
+function _templateObject2() {
+    const data = _tagged_template_literal([
+        "\n      .ant-menu-item:hover {\n        > .ant-menu-title-content > div {\n          .general-schema-designer {\n            display: block;\n          }\n        }\n      }\n    "
+    ]);
+    _templateObject2 = function() {
+        return data;
+    };
+    return data;
+}
+function _templateObject3() {
+    const data = _tagged_template_literal([
+        "\n      height: 100%;\n      overflow-y: auto;\n      overflow-x: hidden;\n      .ant-menu-item {\n        > .ant-menu-title-content {\n          height: 100%;\n          margin-left: -24px;\n          margin-right: -16px;\n          padding: 0 16px 0 24px;\n          > div {\n            > .general-schema-designer {\n              right: 6px !important;\n            }\n          }\n        }\n      }\n      .ant-menu-submenu-title {\n        .ant-menu-title-content {\n          height: 100%;\n          margin-left: -24px;\n          margin-right: -34px;\n          padding: 0 34px 0 24px;\n          > div {\n            > .general-schema-designer {\n              right: 6px !important;\n            }\n            > span.anticon {\n              margin-right: 10px;\n            }\n          }\n        }\n      }\n    "
+    ]);
+    _templateObject3 = function() {
+        return data;
+    };
+    return data;
+}
+function _templateObject4() {
+    const data = _tagged_template_literal([
+        "\n      :active {\n        background: inherit;\n      }\n    "
+    ]);
+    _templateObject4 = function() {
+        return data;
+    };
+    return data;
+}
+function _templateObject5() {
+    const data = _tagged_template_literal([
+        "\n      &:hover {\n        border-radius: ",
+        "px;\n        background: rgba(0, 0, 0, 0.045);\n        overflow: hidden;\n      }\n      .ant-btn {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        border: none;\n        box-shadow: none;\n        padding-left: 0;\n        padding-right: 0;\n        width: 100%;\n        span {\n          display: block;\n          text-align: center;\n          font-size: ",
+        "px;\n        }\n        .anticon {\n          font-size: 1.2rem;\n          margin-bottom: 0.3rem;\n          text-align: center;\n        }\n      }\n      .ant-btn-default {\n        box-shadow: none;\n      }\n      .general-schema-designer {\n        background: none;\n      }\n    "
+    ]);
+    _templateObject5 = function() {
+        return data;
+    };
+    return data;
+}
+const useStyles = (0, __WEBPACK_EXTERNAL_MODULE_antd_style__.createStyles)((param)=>{
+    let { css, token } = param;
+    return {
+        subMenuDesignerCss: css(_templateObject()),
+        designerCss: css(_templateObject1()),
+        headerMenuClass: css(_templateObject2()),
+        sideMenuClass: css(_templateObject3()),
+        menuItemClass: css(_templateObject4()),
+        menuItem: css(_templateObject5(), token.borderRadius, token.fontSizeSM)
+    };
+});
+export { useStyles };