@cloudbase/weda-ui 3.5.3 → 3.6.0

package/dist/web/components/wd-menu-base-layout/index.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from '../../utils/classnames';
+export default function WdMenuBaseLayout({ children, className, style, id, }) {
+    return (_jsx("div", { role: "container", id: id, style: style, className: classNames({ 'weda-ui': true, [className]: className }), children: children }));
+}

package/dist/web/components/wd-menu-horizontal-layout/index.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import type { CommonPropsType } from '../../types';
+export default function WdMenuHorizontalLayout({ children, className, style, id, }: PropsType): JSX.Element;
+export interface PropsType extends CommonPropsType {
+    title?: string;
+}

package/dist/web/components/wd-menu-horizontal-layout/index.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from '../../utils/classnames';
+export default function WdMenuHorizontalLayout({ children, className, style, id, }) {
+    return (_jsx("div", { role: "container", id: id, style: style, className: classNames({ 'weda-ui': true, [className]: className }), children: children }));
+}

package/dist/web/components/wd-menu-layout/components/H5Menu.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { WdMenuLayoutProps } from '../wd-menu-layout';
+export declare const H5Menu: React.ForwardRefExoticComponent<WdMenuLayoutProps & React.RefAttributes<unknown>>;

package/dist/web/components/wd-menu-layout/components/H5Menu.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, forwardRef, useMemo } from 'react';
+import { useConfig } from '../../../utils/config-context';
+import { WdIcon, WdMenuList } from '../../index';
+import { Drawer, ConfigProvider } from 'tea-component';
+import { slotDiv, MenuLayoutContext } from '../utils';
+export const H5Menu = forwardRef(function H5Menu(props, ref) {
+    const { classPrefix } = useConfig();
+    const [visible, setVisible] = useState(false);
+    const provider = useMemo(() => {
+        return {
+            setMenuSlotVisible: (visible) => {
+                setVisible(visible);
+            },
+        };
+    }, [setVisible]);
+    return (_jsxs(MenuLayoutContext.Provider, { value: provider, children: [_jsxs("div", { className: `${classPrefix}-menulayout__bar-wrap`, children: [_jsx("div", { className: `${classPrefix}-menulayout__bar-logo`, children: slotDiv(props.headSlot) }), _jsx("div", { className: `${classPrefix}-menulayout__bar-content`, children: slotDiv(props.headRightSlot, { justifyContent: 'flex-end' }) }), _jsx("div", { className: `${classPrefix}-menulayout__bar-extra`, children: !visible ? (_jsx(WdIcon, { name: "td:view-list", size: "md", onClick: () => setVisible(true) })) : (_jsx(WdIcon, { name: "td:close", size: "md", onClick: () => setVisible(false) })) }), _jsx(ConfigProvider, { classPrefix: "wedatea2td", children: _jsxs(Drawer, { style: { visibility: visible ? 'visible' : 'hidden' }, size: 'm', placement: 'right', disableAnimation: true, outerClickClosable: false, showMask: visible, visible: true, onClose: () => setVisible(false), className: `${classPrefix}-menulayout-h5__drawer ${classPrefix}-menulayout__menu`, children: [_jsx(WdMenuList, { ...props, className: "", id: "", style: {}, ref: ref }), _jsx("div", { className: `${classPrefix}-menulayout-h5__drawer-slot ${classPrefix}-menulayout-body__footer`, children: slotDiv(props.footerSlot) })] }) })] }), _jsx("div", { className: `${classPrefix}-menulayout-body`, children: _jsx("div", { className: `${classPrefix}-menulayout-body__content ${classPrefix}-menulayout__body`, children: props.contentSlot }) })] }));
+});

package/dist/web/components/wd-menu-layout/components/HorizontalMenu.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { WdMenuLayoutProps } from '../wd-menu-layout';
+export declare const HorizontalMenu: React.ForwardRefExoticComponent<WdMenuLayoutProps & React.RefAttributes<unknown>>;

package/dist/web/components/wd-menu-layout/components/HorizontalMenu.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { useConfig } from '../../../utils/config-context';
+import { slotDiv } from '../utils';
+import { WdMenuList } from '../../index';
+export const HorizontalMenu = forwardRef(function HorizontalMenu(props, ref) {
+    const { classPrefix } = useConfig();
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: `${classPrefix}-menulayout-header`, children: [_jsx("div", { className: `${classPrefix}-menulayout-header__logo-wrap`, children: slotDiv(props.headSlot) }), _jsx("div", { className: `${classPrefix}-menulayout-header__slot`, children: _jsx(WdMenuList, { ...props, className: "", id: "", style: {}, ref: ref }) }), _jsx("div", { className: `${classPrefix}-menulayout-header__right-wrap`, children: slotDiv(props.headRightSlot, { justifyContent: 'flex-end' }) })] }), _jsx("div", { className: `${classPrefix}-menulayout-body`, children: _jsx("div", { className: `${classPrefix}-menulayout-body__content ${classPrefix}-menulayout__body`, children: props.contentSlot }) })] }));
+});

package/dist/web/components/wd-menu-layout/components/NavMenu.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { WdMenuLayoutProps } from '../wd-menu-layout';
+export declare const NavMenu: React.ForwardRefExoticComponent<WdMenuLayoutProps & React.RefAttributes<unknown>>;

package/dist/web/components/wd-menu-layout/components/NavMenu.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { useConfig } from '../../../utils/config-context';
+export const NavMenu = forwardRef(function NavMenu(props) {
+    const { classPrefix } = useConfig();
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: `${classPrefix}-menulayout-header`, children: props.headRightSlot }), _jsx("div", { className: `${classPrefix}-menulayout-body__content ${classPrefix}-menulayout__body`, children: props.contentSlot })] }));
+});

package/dist/web/components/wd-menu-layout/components/PlantMenu.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { WdMenuLayoutProps } from '../wd-menu-layout';
+export declare const PlantMenu: React.ForwardRefExoticComponent<WdMenuLayoutProps & React.RefAttributes<unknown>>;

package/dist/web/components/wd-menu-layout/components/PlantMenu.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { useConfig } from '../../../utils/config-context';
+import { slotDiv } from '../utils';
+import { WdMenuList } from '../../index';
+export const PlantMenu = forwardRef(function PlantMenu(props, ref) {
+    const { classPrefix } = useConfig();
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: `${classPrefix}-menulayout-header ${classPrefix}-menulayout-header--plant`, children: [_jsx("div", { className: `${classPrefix}-menulayout-header__logo-wrap is-not-content`, children: slotDiv(props.headSlot) }), _jsx("div", { className: `${classPrefix}-menulayout-header__right-wrap is-not-content`, children: slotDiv(props.headRightSlot, { justifyContent: 'flex-end' }) })] }), _jsxs("div", { className: `${classPrefix}-menulayout-body ${classPrefix}-menulayout-body--plant`, children: [_jsxs("div", { className: `${classPrefix}-menulayout-body__left`, children: [_jsx("div", { className: `${classPrefix}-menulayout-body__left-menu ${classPrefix}-menulayout__menu`, children: _jsx(WdMenuList, { ...props, className: "", id: "", style: {}, ref: ref }) }), _jsx("div", { className: `${classPrefix}-menulayout-body__left-slot is-not-content ${classPrefix}-menulayout-body__footer`, children: slotDiv(props.footerSlot) })] }), _jsx("div", { className: `${classPrefix}-menulayout-body__content ${classPrefix}-menulayout__body`, children: props.contentSlot })] })] }));
+});

package/dist/web/components/wd-menu-layout/components/TabMenu.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { WdMenuLayoutProps } from '../wd-menu-layout';
+export declare const TabMenu: React.ForwardRefExoticComponent<WdMenuLayoutProps & React.RefAttributes<unknown>>;

package/dist/web/components/wd-menu-layout/components/TabMenu.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { useConfig } from '../../../utils/config-context';
+export const TabMenu = forwardRef(function TabMenu(props) {
+    const { classPrefix } = useConfig();
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: `${classPrefix}-menulayout-body__content ${classPrefix}-menulayout__body`, children: props.contentSlot }), _jsx("div", { className: `${classPrefix}-menulayout-body__left-slot ${classPrefix}-menulayout-body__footer`, children: props.footerSlot })] }));
+});

package/dist/web/components/wd-menu-layout/components/VerticalMenu.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { WdMenuLayoutProps } from '../wd-menu-layout';
+export declare const VerticalMenu: React.ForwardRefExoticComponent<WdMenuLayoutProps & React.RefAttributes<unknown>>;

package/dist/web/components/wd-menu-layout/components/VerticalMenu.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { useConfig } from '../../../utils/config-context';
+import { slotDiv } from '../utils';
+import { WdMenuList } from '../../index';
+export const VerticalMenu = forwardRef(function VerticalMenu(props, ref) {
+    const { classPrefix } = useConfig();
+    return (_jsx(_Fragment, { children: _jsxs("div", { className: `${classPrefix}-menulayout-body ${classPrefix}-menulayout-body--vertical`, children: [_jsxs("div", { className: `${classPrefix}-menulayout-body__left`, children: [_jsx("div", { className: `${classPrefix}-menulayout-header__logo-wrap is-not-content`, children: slotDiv(props.headSlot) }), _jsx("div", { className: `${classPrefix}-menulayout-body__left-menu ${classPrefix}-menulayout__menu`, children: _jsx(WdMenuList, { ...props, className: "", id: "", style: {}, ref: ref }) }), _jsx("div", { className: `${classPrefix}-menulayout-body__left-slot is-not-content ${classPrefix}-menulayout-body__footer`, children: slotDiv(props.footerSlot) })] }), _jsx("div", { className: `${classPrefix}-menulayout-body__content ${classPrefix}-menulayout__body`, children: props.contentSlot })] }) }));
+});

package/dist/web/components/wd-menu-layout/index.d.ts

@@ -0,0 +1,3 @@
+import { WdMenuLayout } from './wd-menu-layout';
+export { WdMenuLayout, type WdMenuLayoutProps } from './wd-menu-layout';
+export default WdMenuLayout;

package/dist/web/components/wd-menu-layout/index.js

@@ -0,0 +1,3 @@
+import { WdMenuLayout } from './wd-menu-layout';
+export { WdMenuLayout } from './wd-menu-layout';
+export default WdMenuLayout;

package/dist/web/components/wd-menu-layout/utils/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare const slotDiv: (slot: any, style?: {}) => JSX.Element;
+export interface IMenuLayoutContext {
+    setMenuSlotVisible?: (visible: boolean) => void;
+}
+export declare const MenuLayoutContext: React.Context<IMenuLayoutContext>;

package/dist/web/components/wd-menu-layout/utils/index.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext } from '../../../utils/global-context';
+// 插槽站位DOM 开发使用插槽组件代替
+export const slotDiv = (slot, style = {}) => {
+    return (_jsx("div", { style: {
+            width: '100%',
+            height: '100%',
+            display: 'flex',
+            alignItems: 'center',
+            ...style,
+        }, children: slot }));
+};
+export const MenuLayoutContext = createContext({}, 'MenuLayoutContext');

package/dist/web/components/wd-menu-layout/wd-menu-layout.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { CommonPropsType } from '../../types';
+import type { DataType } from '../../../configs/components/wd-menu-layout';
+import { WdMenuListProps } from '../wd-menu-list';
+export declare const WdMenuLayout: React.ForwardRefExoticComponent<WdMenuLayoutProps & React.RefAttributes<unknown>>;
+export interface WdMenuLayoutProps extends CommonPropsType, DataType {
+    setSelectedInfo: (item: WdMenuListProps['menu']['menuData']['0'], isNavigate: boolean) => void;
+}

package/dist/web/components/wd-menu-layout/wd-menu-layout.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { HorizontalMenu } from './components/HorizontalMenu';
+import { PlantMenu } from './components/PlantMenu';
+import { VerticalMenu } from './components/VerticalMenu';
+import { TabMenu } from './components/TabMenu';
+import { NavMenu } from './components/NavMenu';
+import { H5Menu } from './components/H5Menu';
+import { useConfig } from '../../utils/config-context';
+import classNames from '../../utils/classnames';
+import { usePlatform } from '../../utils/platform';
+// const type = 'horizontal'; // 顶导航: horizontal  侧导航: vertical  厂子形状：plant h5
+export const WdMenuLayout = forwardRef(function WdMenuLayout(props, ref) {
+    const { classPrefix } = useConfig();
+    const platform = usePlatform();
+    const _type = props.type || props.template;
+    const type = platform === 'h5' && !['tab', 'nav'].includes(_type) ? 'h5' : _type;
+    return (
+    // 1024px 800px为方便测试  开发时去掉
+    _jsxs("div", { id: props.id, style: props.style, className: classNames(props.className, `${classPrefix}-menulayout`, `${classPrefix}-menulayout-root`, ['h5'].includes(type) ? `${classPrefix}-menulayout-h5-root` : '', `${classPrefix}-menulayout--${type}`), children: [['horizontal'].includes(type) && (_jsx(HorizontalMenu, { ...props, ref: ref })), ['vertical'].includes(type) && (_jsx(VerticalMenu, { ...props, ref: ref })), ['plant'].includes(type) && _jsx(PlantMenu, { ...props, ref: ref }), ['h5'].includes(type) && _jsx(H5Menu, { ...props, ref: ref }), ['tab'].includes(type) && _jsx(TabMenu, { ...props, ref: ref }), ['nav'].includes(type) && _jsx(NavMenu, { ...props, ref: ref })] }));
+});

package/dist/web/components/wd-menu-list/CommonMenuList.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { WdMenuListProps } from './index';
+export declare const CommonMenuList: React.ForwardRefExoticComponent<WdMenuListProps & React.RefAttributes<unknown>>;

package/dist/web/components/wd-menu-list/CommonMenuList.js

@@ -0,0 +1,128 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useState, useContext, useCallback, useMemo, } from 'react';
+import classNames from '../../utils/classnames';
+import { useConfig } from '../../utils/config-context';
+import { usePlatform } from '../../utils/platform';
+import { Menu, ConfigProvider } from 'tea-component';
+import WdIcon from '../wd-icon';
+import WdLink from '../wd-link';
+import { findSelectItem, navigateTo, getMenuList, hasChildSelected, } from './utils';
+import { MenuLayoutContext } from '../wd-menu-layout/utils';
+export const CommonMenuList = forwardRef(function CommonMenuList(props, ref) {
+    const { className = '', style, id } = props;
+    const [selected, setSelected] = useState('');
+    const [openStatus, setOpenStatus] = useState({});
+    const platform = usePlatform();
+    const menuLayoutContext = useContext(MenuLayoutContext);
+    // 样式
+    const { classPrefix } = useConfig();
+    // 响应式css api
+    const classes = {
+        [`${classPrefix}-menulist`]: true,
+        [`${classPrefix}-${platform}-menulist`]: true,
+    };
+    const menuData = useMemo(() => {
+        return getMenuList(props.menu);
+    }, [props.menu]);
+    const setSelectedInfo = useCallback((params = {}, isNavigate = false) => {
+        const { key, item } = params || {};
+        let selectItem = item;
+        if (key || !item) {
+            selectItem = findSelectItem(menuData || [], key);
+        }
+        if ((selectItem === null || selectItem === void 0 ? void 0 : selectItem.key) && selected === (selectItem === null || selectItem === void 0 ? void 0 : selectItem.key))
+            return;
+        setSelected(selectItem === null || selectItem === void 0 ? void 0 : selectItem.key);
+        isNavigate && navigateTo(selectItem);
+    }, [menuData, selected]);
+    // Widget API，挂载组件只读属性和组件方法
+    useImperativeHandle(ref, () => {
+        return {
+            setSelectedInfo,
+        };
+    }, [setSelectedInfo]);
+    useEffect(() => {
+        setSelectedInfo();
+    }, [setSelectedInfo]);
+    // 默认展开状态变化后删掉之前的状态缓存
+    useEffect(() => {
+        const status = JSON.parse(JSON.stringify(openStatus));
+        Object.keys(status).forEach((v) => {
+            if (v.endsWith(`_${!props.defaultOpened}`)) {
+                delete status[v];
+            }
+        });
+        setOpenStatus(status);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [props.defaultOpened]);
+    const getIconShow = (item, selectedKey) => {
+        var _a;
+        if (!item.iconUrl && !item.selectedIconPath && !item.iconPath)
+            return null;
+        // 预置图标
+        if (item.iconUrl) {
+            // 工厂模式下 如果没有配置icon 保留${classPrefix}-menulayout-menu__item-icon盒子  只删除图标内容
+            return (_jsx("div", { className: `${classPrefix}-menulayout-menu__item-icon`, children: _jsx(WdIcon, { name: item.iconUrl, src: item.iconUrl, type: ((_a = item.iconUrl) === null || _a === void 0 ? void 0 : _a.startsWith('http')) ? 'custom' : 'inner', size: "xs" }) }));
+        }
+        return (_jsx("div", { className: `${classPrefix}-menulayout-menu__item-icon`, children: _jsx(WdIcon, { name: selectedKey === item.key ? item.selectedIconPath : item.iconPath, src: selectedKey === item.key ? item.selectedIconPath : item.iconPath, type: 'custom', size: "xs" }) }));
+    };
+    // 渲染菜单
+    const renderMenuTitle = (item, useLink = false) => {
+        var _a;
+        const show = (_jsxs("div", { className: `${classPrefix}-menulayout-menu__item`, children: [getIconShow(item, selected), _jsx("div", { className: `${classPrefix}-menulayout-menu__item-text`, children: item.title })] }));
+        const url = (item === null || item === void 0 ? void 0 : item.type) === 'link' && item.linkUrl
+            ? item.linkUrl
+            : (_a = item === null || item === void 0 ? void 0 : item.path) === null || _a === void 0 ? void 0 : _a.replace('/', '');
+        return useLink && url ? (_jsx(WdLink, { style: { width: '100%', color: 'unset', fontSize: 'unset' }, packageName: item === null || item === void 0 ? void 0 : item.subPackageName, url: url, params: [], disabled: true, contentSlot: show, content: '' })) : (show);
+    };
+    // 渲染MenuItem
+    const renderMenuItem = (item, level) => {
+        const { key, disabled } = item;
+        return (_jsx(Menu.Item, { className: classNames({
+                [`${classPrefix}-menulayout__submenu-stair`]: ['1'].includes(level),
+                [`${classPrefix}-menulayout__submenu-second`]: ['2'].includes(level),
+                [`${classPrefix}-menulayout__submenu-three`]: ['3'].includes(level),
+                'is-selected': selected === key,
+                'is-disabled': !!disabled,
+            }), title: renderMenuTitle(item, true), onClick: () => {
+                var _a, _b;
+                if (disabled || selected === item.key)
+                    return;
+                setSelected(item.key);
+                (_a = props.events) === null || _a === void 0 ? void 0 : _a.menuClick({ item });
+                (_b = menuLayoutContext === null || menuLayoutContext === void 0 ? void 0 : menuLayoutContext.setMenuSlotVisible) === null || _b === void 0 ? void 0 : _b.call(menuLayoutContext, false);
+                navigateTo(item);
+            } }, key));
+    };
+    // 渲染subMenu
+    const renderSubMenu = (item, hasThereNode = false, level = '1') => {
+        const { key, children, disabled } = item;
+        // 缓存key带上默认菜单展开状态，以区分不同的默认🚉开情况
+        const itemKey = `${key}_${props.defaultOpened}`;
+        let isOpened = openStatus[itemKey];
+        // 默认不展开菜单时进行判断
+        if (!props.defaultOpened) {
+            isOpened =
+                openStatus[itemKey] === undefined
+                    ? hasChildSelected(item, selected)
+                    : openStatus[itemKey];
+            if (openStatus[itemKey] === undefined && isOpened) {
+                setOpenStatus((prev) => ({ ...prev, [itemKey]: isOpened }));
+            }
+        }
+        return (children === null || children === void 0 ? void 0 : children.length) > 0 ? (_jsx(Menu.SubMenu, { className: classNames({
+                [`${classPrefix}-menulayout__submenu`]: hasThereNode,
+                [`${classPrefix}-menulayout__submenu-stair`]: ['1'].includes(level),
+                [`${classPrefix}-menulayout__submenu-second`]: ['2'].includes(level),
+                'is-disabled': !!disabled,
+            }), title: renderMenuTitle(item), defaultOpened: props.defaultOpened, opened: isOpened, onOpenedChange: (isOpened) => {
+                setOpenStatus((prev) => ({ ...prev, [itemKey]: isOpened }));
+            }, children: children === null || children === void 0 ? void 0 : children.map((el) => renderSubMenu(el, true, String(Number(level) + Number('1')))) }, itemKey)) : (renderMenuItem(item, level));
+    };
+    return (_jsx(ConfigProvider, { classPrefix: "wedatea2td", children: _jsx("div", { id: id, className: classNames(classes, className), style: style, children: _jsx(Menu, { children: menuData === null || menuData === void 0 ? void 0 : menuData.map((item) => {
+                    var _a;
+                    return ((_a = item === null || item === void 0 ? void 0 : item.children) === null || _a === void 0 ? void 0 : _a.length) > 0
+                        ? renderSubMenu(item)
+                        : renderMenuItem(item, '1');
+                }) }) }) }));
+});

package/dist/web/components/wd-menu-list/HorizontalMenuList.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { WdMenuListProps } from './index';
+export declare const HorizontalMenuList: React.ForwardRefExoticComponent<WdMenuListProps & React.RefAttributes<unknown>>;

package/dist/web/components/wd-menu-list/HorizontalMenuList.js

@@ -0,0 +1,152 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useCallback, useRef, useEffect, forwardRef, useImperativeHandle, useMemo, } from 'react';
+import classNames from '../../utils/classnames';
+import { useConfig } from '../../utils/config-context';
+import { List, Dropdown, ConfigProvider } from 'tea-component';
+import { usePlatform } from '../../utils/platform';
+import WdIcon from '../wd-icon';
+import WdLink from '../wd-link';
+import { findSelectItem, navigateTo, getMenuList } from './utils';
+export const HorizontalMenuList = forwardRef(function HorizontalMenuList(props, ref) {
+    const { className = '', style, id } = props;
+    const { classPrefix } = useConfig();
+    const platform = usePlatform();
+    // 横向导航， 判断是否出现右侧的滚动按钮
+    const [showButton, setShowButton] = useState(true);
+    // 横行导航移动
+    const [position, setPosition] = useState({ index: 0, offset: 0 });
+    const [menuOffset, setMenuOffset] = useState({});
+    const navWrapRef = useRef();
+    const [selected, setSelected] = useState('');
+    // 响应式css api
+    const classes = {
+        [`${classPrefix}-menulist`]: true,
+        [`${classPrefix}-${platform}-menulist`]: true,
+    };
+    const menuData = useMemo(() => {
+        return getMenuList(props.menu);
+    }, [props.menu]);
+    const setSelectedInfo = useCallback((params = {}, isNavigate = false) => {
+        const { key, item } = params || {};
+        let selectItem = item;
+        if (key || !item) {
+            selectItem = findSelectItem(menuData || [], key);
+        }
+        if ((selectItem === null || selectItem === void 0 ? void 0 : selectItem.key) && selected === (selectItem === null || selectItem === void 0 ? void 0 : selectItem.key))
+            return;
+        setSelected(selectItem === null || selectItem === void 0 ? void 0 : selectItem.key);
+        isNavigate && navigateTo(selectItem);
+    }, [menuData, selected]);
+    // Widget API，挂载组件只读属性和组件方法
+    useImperativeHandle(ref, () => {
+        return {
+            setSelectedInfo,
+        };
+    }, [setSelectedInfo]);
+    // 导航移动逻辑
+    const getMenuOffset = useCallback(() => {
+        var _a, _b, _c, _d;
+        const parentWidth = (_b = (_a = navWrapRef === null || navWrapRef === void 0 ? void 0 : navWrapRef.current) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.clientWidth;
+        const contentWidth = (_c = navWrapRef === null || navWrapRef === void 0 ? void 0 : navWrapRef.current) === null || _c === void 0 ? void 0 : _c.clientWidth;
+        const menuItem = (_d = navWrapRef === null || navWrapRef === void 0 ? void 0 : navWrapRef.current) === null || _d === void 0 ? void 0 : _d.children;
+        const data = { 0: 0, 1: 0 };
+        let index = 1;
+        for (const i of menuItem) {
+            if (data[index] + (i === null || i === void 0 ? void 0 : i.clientWidth) + Number('24') > parentWidth) {
+                index = index + Number('1');
+                data[index] = (i === null || i === void 0 ? void 0 : i.clientWidth) + Number('24');
+            }
+            else {
+                data[index] += (i === null || i === void 0 ? void 0 : i.clientWidth) + Number('24');
+            }
+        }
+        setMenuOffset(data);
+        const showButton = contentWidth > parentWidth;
+        setShowButton(showButton);
+    }, [navWrapRef]);
+    useEffect(() => {
+        var _a, _b;
+        if (platform !== 'h5' && ((_b = (_a = navWrapRef === null || navWrapRef === void 0 ? void 0 : navWrapRef.current) === null || _a === void 0 ? void 0 : _a.children) === null || _b === void 0 ? void 0 : _b.length)) {
+            getMenuOffset();
+        }
+    }, [platform, navWrapRef, getMenuOffset]);
+    useEffect(() => {
+        setSelectedInfo();
+    }, [setSelectedInfo]);
+    const getIconShow = (item, selectedKey) => {
+        var _a;
+        if (!item.iconUrl && !item.selectedIconPath && !item.iconPath)
+            return null;
+        // 预置图标
+        if (item.iconUrl) {
+            // 水平模式下 如果没有配置icon 连同${classPrefix}-menulayout-menu__item-icon盒子直接删除
+            return (_jsx("div", { className: `${classPrefix}-menulayout-menu__item-icon`, children: _jsx(WdIcon, { name: item.iconUrl, src: item.iconUrl, type: ((_a = item.iconUrl) === null || _a === void 0 ? void 0 : _a.startsWith('http')) ? 'custom' : 'inner', size: "xs" }) }));
+        }
+        return (_jsx("div", { className: `${classPrefix}-menulayout-menu__item-icon`, children: _jsx(WdIcon, { name: selectedKey === item.key ? item.selectedIconPath : item.iconPath, src: selectedKey === item.key ? item.selectedIconPath : item.iconPath, type: 'custom', size: "xs" }) }));
+    };
+    // 渲染菜单
+    const RenderMenu = (item, hasDownIcon) => {
+        return (_jsxs("div", { className: `${classPrefix}-menulayout-menu__item`, onClick: () => {
+                var _a, _b;
+                if (!!((_a = item.children) === null || _a === void 0 ? void 0 : _a.length) || item.disabled || selected === item.key)
+                    return;
+                setSelected(item.key);
+                (_b = props.events) === null || _b === void 0 ? void 0 : _b.menuClick({ item });
+                navigateTo(item);
+            }, children: [getIconShow(item, selected), _jsx("div", { className: `${classPrefix}-menulayout-menu__item-text`, children: item.title }), hasDownIcon && (_jsx("div", { className: `${classPrefix}-menulayout-menu__item-down is-not-content`, children: _jsx(WdIcon, { name: "td:chevron-down", size: "xs" }) }))] }));
+    };
+    const getShowItem = (item, useLink = false) => {
+        var _a;
+        const show = (_jsxs(_Fragment, { children: [getIconShow(item, selected), _jsx("span", { className: `${classPrefix}-menulayout-menu__list-text`, children: item.title })] }));
+        const url = (item === null || item === void 0 ? void 0 : item.type) === 'link' && item.linkUrl
+            ? item.linkUrl
+            : (_a = item === null || item === void 0 ? void 0 : item.path) === null || _a === void 0 ? void 0 : _a.replace('/', '');
+        return useLink && url ? (_jsx(WdLink, { style: { width: '100%', color: 'unset', fontSize: 'unset' }, packageName: item === null || item === void 0 ? void 0 : item.subPackageName, url: url, params: [], disabled: true, contentSlot: show, content: '' })) : (show);
+    };
+    // 渲染下拉菜单
+    const RenderMenuList = (menu, isDisabled = false, isChild = false) => {
+        return (_jsx(ConfigProvider, { classPrefix: "wedatea2td", children: _jsx(List, { type: "option", className: classNames(`${isChild
+                    ? `${classPrefix}-menulayout__submenu-second`
+                    : `${classPrefix}-menulayout-menu__list`}`, `${isDisabled ? 'is-disabled' : ''}`), children: menu === null || menu === void 0 ? void 0 : menu.map((v) => {
+                    var _a;
+                    if ((_a = v.children) === null || _a === void 0 ? void 0 : _a.length) {
+                        return (_jsx(List.SubMenu, { label: getShowItem(v), children: RenderMenuList(v.children, v.disabled, true) }, v.key));
+                    }
+                    return (_jsx(List.Item, { onClick: () => {
+                            var _a;
+                            if (v.disabled || selected === v.key)
+                                return;
+                            setSelected(v.key);
+                            (_a = props.events) === null || _a === void 0 ? void 0 : _a.menuClick({ item: v });
+                            navigateTo(v);
+                        }, className: `${isChild
+                            ? `${classPrefix}-menulayout__submenu-second`
+                            : `${classPrefix}-menulayout__submenu-stair`} ${selected === v.key ? 'is-selected' : ''}`, children: getShowItem(v, true) }, v.key));
+                }) }) }));
+    };
+    return (_jsxs("div", { id: id, style: style, className: classNames(classes, className), children: [showButton && position.index > 0 && (_jsx("div", { className: `${classPrefix}-menulayout-header__nav-left`, onClick: () => {
+                    const result = position.offset + menuOffset[position.index];
+                    setPosition({
+                        index: position.index - Number('1'),
+                        offset: result,
+                    });
+                } })), _jsx("div", { className: `${classPrefix}-menulayout-header__nav-wrap`, children: _jsx("div", { ref: navWrapRef, className: `${classPrefix}-menulayout-header__nav-content`, style: {
+                        transform: `translate(${position.offset}px, 0px)`,
+                    }, children: menuData === null || menuData === void 0 ? void 0 : menuData.map((item, index) => {
+                        var _a;
+                        return (
+                        //  当前是哪个菜单添加 `is-active`类
+                        _jsx("div", { className: classNames(`${classPrefix}-menulayout-menu__wrap`, `${selected === item.key ? 'is-selected' : ''}`, `${item.disabled ? 'is-disabled' : ''}`), children: ((_a = item === null || item === void 0 ? void 0 : item.children) === null || _a === void 0 ? void 0 : _a.length) ? (_jsx(Dropdown
+                            // trigger={'hover'}
+                            , { 
+                                // trigger={'hover'}
+                                trigger: 'click', overlayClassName: `${classPrefix}-menulayout__dropdown`, button: RenderMenu(item, true), children: RenderMenuList(item.children, item.disabled) })) : (RenderMenu(item, false)) }, index));
+                    }) }) }), showButton &&
+                position.index + Number('2') < Object.keys(menuOffset).length && (_jsx("div", { className: `${classPrefix}-menulayout-header__nav-right`, onClick: () => {
+                    const result = position.offset - menuOffset[position.index + Number('1')];
+                    setPosition({
+                        index: position.index + Number('1'),
+                        offset: result,
+                    });
+                } }))] }));
+});

package/dist/web/components/wd-menu-list/index.d.ts

@@ -0,0 +1,3 @@
+import { WdMenuList } from './wd-menu-list';
+export { WdMenuList, type WdMenuListProps } from './wd-menu-list';
+export default WdMenuList;

package/dist/web/components/wd-menu-list/index.js

@@ -0,0 +1,3 @@
+import { WdMenuList } from './wd-menu-list';
+export { WdMenuList } from './wd-menu-list';
+export default WdMenuList;

package/dist/web/components/wd-menu-list/utils/index.d.ts

@@ -0,0 +1,12 @@
+import { WdMenuListProps } from '../wd-menu-list';
+export declare const findSelectItem: (menu: WdMenuListProps['menu']['menuData'], selectedKey?: string) => any;
+export declare const navigateTo: (menu: WdMenuListProps['menu']['menuData']['0'], routeType?: string) => void;
+export declare const filterMenuData: (menu: WdMenuListProps['menu']['menuData']) => any[];
+export declare const getMenuList: (menu: WdMenuListProps['menu']) => any[];
+/**
+ * 查询是否有子节点倍选中
+ * @param menu
+ * @param selectedKey
+ * @returns
+ */
+export declare const hasChildSelected: (menu: WdMenuListProps['menu']['menuData']['0'], selectedKey: string) => boolean;

package/dist/web/components/wd-menu-list/utils/index.js

@@ -0,0 +1,109 @@
+import { usePlatform } from '../../../utils/platform';
+const getQuery = (path) => {
+    var _a, _b, _c;
+    const params = {};
+    (_c = (_b = (_a = path === null || path === void 0 ? void 0 : path.split(/(?:\?|#)+/)) === null || _a === void 0 ? void 0 : _a[1]) === null || _b === void 0 ? void 0 : _b.match(/([^&=]+)=?([^&]*)/g)) === null || _c === void 0 ? void 0 : _c.forEach((v) => {
+        const [key, value] = v.split('=');
+        params[key] = value;
+    });
+    return params;
+};
+/**
+ * 判断菜单的query是否和当前页面的query一致
+ * @param path
+ * @returns
+ */
+const judgeMenuPathAndCurrentPath = (path) => {
+    var _a;
+    const query = ((_a = window === null || window === void 0 ? void 0 : window.$w) === null || _a === void 0 ? void 0 : _a.page.dataset.params) || {};
+    const menuQuery = getQuery(path);
+    return Object.keys(menuQuery).reduce((res, v) => res && menuQuery[v] === query[v], true);
+};
+export const findSelectItem = (menu, selectedKey) => {
+    var _a, _b, _c, _d, _e;
+    const len = menu === null || menu === void 0 ? void 0 : menu.length;
+    // 默认高亮当前路由对应的菜单
+    const currentPath = `/${((_b = (_a = window === null || window === void 0 ? void 0 : window.$w) === null || _a === void 0 ? void 0 : _a.page) === null || _b === void 0 ? void 0 : _b.uuid) || ((_d = (_c = window === null || window === void 0 ? void 0 : window.$w) === null || _c === void 0 ? void 0 : _c.page) === null || _d === void 0 ? void 0 : _d.id)}`;
+    for (let i = 0; i < len; i++) {
+        if ((_e = menu[i].children) === null || _e === void 0 ? void 0 : _e.length) {
+            const selectItem = findSelectItem(menu[i].children, selectedKey);
+            if (selectItem)
+                return selectItem;
+        }
+        const menuPath = `${menu[i].subPackageName ? `/${menu[i].subPackageName}` : ''}${menu[i].path}`;
+        if (menu[i].key === selectedKey ||
+            (currentPath === menuPath.split('?')[0] &&
+                judgeMenuPathAndCurrentPath(menuPath)))
+            return menu[i];
+    }
+    return null;
+};
+// 页面跳转
+export const navigateTo = (menu, routeType = 'redirectTo') => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    const { linkTargetBlank, linkUrl, type, path, subPackageName } = menu || {};
+    const currentPath = `/${((_b = (_a = window === null || window === void 0 ? void 0 : window.$w) === null || _a === void 0 ? void 0 : _a.page) === null || _b === void 0 ? void 0 : _b.uuid) || ((_d = (_c = window === null || window === void 0 ? void 0 : window.$w) === null || _c === void 0 ? void 0 : _c.page) === null || _d === void 0 ? void 0 : _d.id)}`;
+    const menuPath = `${subPackageName ? `/${subPackageName}` : ''}${path || ''}`;
+    if (linkUrl && type === 'link') {
+        if (linkTargetBlank) {
+            window.open(linkUrl);
+        }
+        else if (routeType === 'redirectTo') {
+            window.location.replace(linkUrl);
+        }
+        else {
+            window.location.href = linkUrl;
+        }
+    }
+    else if (menuPath &&
+        path &&
+        (menuPath.split('?')[0] !== currentPath ||
+            !judgeMenuPathAndCurrentPath(menuPath))) {
+        (_g = (((_e = window.app) === null || _e === void 0 ? void 0 : _e[routeType]) || ((_f = window.app) === null || _f === void 0 ? void 0 : _f.navigateTo))) === null || _g === void 0 ? void 0 : _g({
+            pageId: (_j = (_h = path === null || path === void 0 ? void 0 : path.replace('/', '')) === null || _h === void 0 ? void 0 : _h.split('?')) === null || _j === void 0 ? void 0 : _j[0],
+            packageName: subPackageName || '',
+            mode: 'weDa',
+            params: getQuery(path),
+        });
+    }
+};
+export const filterMenuData = (menu) => {
+    const res = [];
+    menu === null || menu === void 0 ? void 0 : menu.forEach((item) => {
+        var _a;
+        if ((_a = item.children) === null || _a === void 0 ? void 0 : _a.length) {
+            item.children = filterMenuData(item.children);
+        }
+        if (item.visible !== false) {
+            res.push(item);
+        }
+    });
+    return res;
+};
+export const getMenuList = (menu) => {
+    if (!menu)
+        return [];
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const platform = usePlatform();
+    return filterMenuData((platform === 'h5' && menu.isMultiTerminal
+        ? menu.mobileMenuData
+        : menu.menuData) || []);
+};
+/**
+ * 查询是否有子节点倍选中
+ * @param menu
+ * @param selectedKey
+ * @returns
+ */
+export const hasChildSelected = (menu, selectedKey) => {
+    var _a;
+    if (!selectedKey)
+        return false;
+    if ((menu === null || menu === void 0 ? void 0 : menu.key) === selectedKey)
+        return true;
+    for (let i = 0; i < ((_a = menu === null || menu === void 0 ? void 0 : menu.children) === null || _a === void 0 ? void 0 : _a.length); i++) {
+        if (hasChildSelected(menu.children[i], selectedKey))
+            return true;
+    }
+    return false;
+};

package/dist/web/components/wd-menu-list/wd-menu-list.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { CommonPropsType } from '../../types';
+import type { DataType } from '../../../configs/components/wd-menu-list';
+export declare const WdMenuList: React.ForwardRefExoticComponent<WdMenuListProps & React.RefAttributes<unknown>>;
+export interface WdMenuListProps extends CommonPropsType, DataType {
+    template: any;
+}