@cloudbase/weda-ui 3.1.0 → 3.1.3

package/dist/web/components/navigationBar/common.js

@@ -0,0 +1,127 @@
+import React from 'react';
+import { isUrl, resolveStaticResourceUrl } from '../../utils/platform';
+import { IconFont } from 'tdesign-icons-react';
+const CLASS_PREFIX = 'weda-menu';
+// 标题
+export const renderTitle = (navigationStyle) => {
+    const { title, titleColor, showTitle, titleFontSize } = navigationStyle;
+    return (showTitle && (React.createElement("span", { "data-testid": "navigationBar-title", style: {
+            display: 'inline-block',
+            color: titleColor,
+            fontSize: titleFontSize,
+        } }, title)));
+};
+// 菜单
+export const renderMenuTitle = (navigationStyle, item, hasIcon) => {
+    const { menuColor, menuFontSize, showMenuIcon } = navigationStyle;
+    const { title, level, iconUrl, iconPath } = item;
+    return (React.createElement("span", { className: "menu-text", style: {
+            color: menuColor,
+            fontSize: menuFontSize,
+        }, "data-testid": "navigationBar-menu" },
+        showMenuIcon &&
+            level === 0 &&
+            hasIcon &&
+            renderMenuIcon(iconUrl, iconPath, navigationStyle),
+        title));
+};
+// 默认logo
+const defaultLogoUrl = 'https://imgcache.qq.com/qcloud/tcloud_dtc/static/static_source_business/43d3b2b7-445c-4858-8eb0-50ac5d5cc08e.svg';
+// logo
+export const renderLogo = (navigationStyle, className) => {
+    const { showLogo, logoHeight, logoWidth, logoUrl, logoPath } = navigationStyle;
+    const src = resolveStaticResourceUrl(logoPath) || logoUrl;
+    return (showLogo && (React.createElement("img", { "data-testid": "navigationBar-logo", className: className, style: { width: `${logoWidth}px`, height: `${logoHeight}px` }, src: src || defaultLogoUrl, alt: "logo" })));
+};
+// icon回显
+export const IconShow = ({ onIcon, menuColor, menuFontSize }) => {
+    return (React.createElement(React.Fragment, null, (onIcon === null || onIcon === void 0 ? void 0 : onIcon.includes('td:')) ? (React.createElement(IconFont, { name: onIcon === null || onIcon === void 0 ? void 0 : onIcon.split(':')[1], className: `${CLASS_PREFIX}__fonticon`, style: { color: menuColor, fontSize: menuFontSize } })) : (React.createElement("div", { className: `${CLASS_PREFIX}__fonticon lcap-icon lcap-icon-${onIcon}`, style: { color: menuColor, fontSize: menuFontSize } }))));
+};
+// 菜单图标
+export const renderMenuIcon = (iconUrl, iconPath, navigationStyle) => {
+    const { menuColor, menuFontSize } = navigationStyle;
+    let icon = iconUrl || 'td:view-module';
+    if (iconUrl && isUrl(iconUrl)) {
+        icon = resolveStaticResourceUrl(iconPath) || iconUrl;
+        return (React.createElement("img", { className: `${CLASS_PREFIX}__item-icon`, style: { width: 16, height: 16, marginRight: 4 }, src: icon, alt: "logo" }));
+    }
+    else {
+        return (React.createElement(IconShow, { onIcon: icon, menuColor: menuColor, menuFontSize: menuFontSize }));
+    }
+};
+// 页面跳转
+export const navigateTo = (menu) => {
+    const { path, linkTargetBlank, linkUrl, type, key } = menu;
+    localStorage.setItem('selectedKey', key);
+    // 存储跳转页面的id
+    if (linkUrl && type === 'link') {
+        if (linkTargetBlank) {
+            window.open(linkUrl);
+        }
+        else {
+            window.location.href = linkUrl;
+        }
+    }
+    else {
+        app.navigateTo({
+            pageId: path === null || path === void 0 ? void 0 : path.replace('/', ''),
+            packageName: '',
+            mode: 'weDa',
+        });
+    }
+};
+// 菜单是否展开
+export const hasSelectedMenu = (menu, selectedkey) => {
+    var _a;
+    let opened = false;
+    if (menu.key === selectedkey) {
+        return true;
+    }
+    (_a = menu === null || menu === void 0 ? void 0 : menu.children) === null || _a === void 0 ? void 0 : _a.forEach((i) => {
+        var _a;
+        if (i.key === selectedkey) {
+            opened = true;
+        }
+        if ((_a = i === null || i === void 0 ? void 0 : i.children) === null || _a === void 0 ? void 0 : _a.length) {
+            opened = hasSelectedMenu(i, selectedkey);
+        }
+    });
+    return opened;
+};
+// 点击展开/收起菜单
+export const expandMenu = (menuData, menuItem, init = false) => {
+    const menus = JSON.parse(JSON.stringify(menuData));
+    return menus.map((i) => {
+        if (init) {
+            i.opened = hasSelectedMenu(i, menuItem.key);
+        }
+        else if (i.key === menuItem.key) {
+            i.opened = menuItem.opened;
+        }
+        if (i.children) {
+            return { ...i, children: expandMenu(i === null || i === void 0 ? void 0 : i.children, menuItem, init) };
+        }
+        return i;
+    });
+};
+// 根据path查找菜单
+export const findMenuItemByPath = (menus, targetPath) => {
+    var _a;
+    const queue = [];
+    let targetNode = null;
+    menus.forEach((node) => queue.push(node));
+    while (queue.length) {
+        const node = queue.shift();
+        if (!node)
+            return null;
+        if (node.path === targetPath) {
+            // 添加节点
+            targetNode = node;
+            break;
+        }
+        else {
+            (_a = node.children) === null || _a === void 0 ? void 0 : _a.forEach((node) => queue.push(node));
+        }
+    }
+    return targetNode;
+};

package/dist/web/components/navigationBar/h5Menu.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { IMenuItem, INavigationStyle } from './type';
+/**
+ * 移动端导航
+ */
+declare const H5Menu: React.FC<{
+    menuData: IMenuItem[];
+    navigationStyle: INavigationStyle;
+    setMenuData: (menus: IMenuItem[]) => void;
+    className: string;
+    selected: string;
+    setSelected: (selectedKey: string) => void;
+}>;
+export default H5Menu;

package/dist/web/components/navigationBar/h5Menu.js

@@ -0,0 +1,72 @@
+/* eslint-disable react/jsx-key */
+import React, { useState } from 'react';
+import { Menu, Drawer } from 'tea-component';
+import classNames from '../../utils/classnames';
+import { renderMenuTitle, renderLogo, renderTitle, navigateTo, expandMenu, } from './common';
+const CLASS_PREFIX = 'weda-menu';
+/**
+ * 移动端导航
+ */
+const H5Menu = ({ menuData, navigationStyle, setMenuData, className, selected, setSelected, }) => {
+    // 平台
+    const cls = classNames({
+        [CLASS_PREFIX]: true,
+        [className]: className,
+        [`${CLASS_PREFIX}-mobile`]: true,
+    });
+    // h5 弹框
+    const [visible, setVisible] = useState(false);
+    // 菜单背景色
+    const menuStyle = {
+        background: navigationStyle.menuBackgroundColor || '#fff',
+    };
+    // 渲染subMenu
+    const renderSubMenu = (item, hasThereNode = false) => {
+        const { key, children, opened } = item;
+        return children.length > 0 ? (React.createElement(Menu.SubMenu, { className: hasThereNode ? `${CLASS_PREFIX}__submenu` : '', key: key, title: renderMenuTitle(navigationStyle, item, true), opened: opened, onOpenedChange: (opened) => {
+                const menus = expandMenu(menuData, { ...item, opened });
+                setMenuData(menus);
+            } }, children === null || children === void 0 ? void 0 : children.map((el) => renderSubMenu(el, true)))) : (renderMenuItem(item));
+    };
+    // 渲染MenuItem
+    const renderMenuItem = (item) => {
+        const { key } = item;
+        return (React.createElement(Menu.Item, { key: key, title: renderMenuTitle(navigationStyle, item, true), selected: item.key === selected, onClick: () => {
+                if (item.key !== selected) {
+                    setSelected(item.key);
+                    navigateTo(item);
+                }
+                setVisible(false);
+            } }));
+    };
+    const renderH5Title = (navigationStyle) => (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: `${CLASS_PREFIX}__bar-main` },
+            React.createElement("span", { className: `${CLASS_PREFIX}__main-logo` },
+                renderLogo(navigationStyle, `${CLASS_PREFIX}__main-icon`),
+                renderTitle(navigationStyle))),
+        React.createElement("div", { className: `${CLASS_PREFIX}__bar-extra` },
+            !visible && (React.createElement("i", { className: `${CLASS_PREFIX}__bar-btn`, onClick: () => setVisible(true) },
+                React.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+                    React.createElement("path", { d: "M3 4H21V6H3V4ZM3 11H21V13H3V11ZM3 18H21V20H3V18Z", fill: navigationStyle.titleColor, fillOpacity: "0.9" })))),
+            visible && (React.createElement("i", { className: `${CLASS_PREFIX}__bar-btn--close`, onClick: () => setVisible(false) },
+                React.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+                    React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10.6219 11.9998L3.88672 5.2646L5.26558 3.88574L12.0008 10.6209L18.736 3.88574L20.1148 5.2646L13.3796 11.9998L20.1148 18.735L18.736 20.1138L12.0008 13.3786L5.26558 20.1138L3.88672 18.735L10.6219 11.9998Z", fill: navigationStyle.titleColor, fillOpacity: "0.9" })))))));
+    return (React.createElement(React.Fragment, null,
+        renderH5Title(navigationStyle),
+        React.createElement(Drawer, { size: 'm', placement: 'left', disableAnimation: true, outerClickClosable: false, visible: visible, onClose: () => setVisible(false), className: `${CLASS_PREFIX}__drawer` },
+            React.createElement("div", { className: cls, style: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    position: 'relative',
+                } },
+                React.createElement("div", { className: `${CLASS_PREFIX}__wrapper`, style: {
+                        background: (navigationStyle === null || navigationStyle === void 0 ? void 0 : navigationStyle.menuBackgroundColor) || '#fff',
+                    } }, renderH5Title(navigationStyle))),
+            React.createElement(Menu, { className: `${CLASS_PREFIX}__drawer-menu`, style: menuStyle }, 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);
+            })))));
+};
+export default H5Menu;

package/dist/web/components/navigationBar/horizontalMenu.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { IMenuItem, INavigationStyle } from './type';
+/**
+ * pc端横向导航
+ */
+declare const HorizontalMenu: React.FC<{
+    menuData: IMenuItem[];
+    navigationStyle: INavigationStyle;
+    selected: string;
+    setSelected: (selectedKey: string) => void;
+}>;
+export default HorizontalMenu;

package/dist/web/components/navigationBar/horizontalMenu.js

@@ -0,0 +1,99 @@
+/* eslint-disable react/jsx-key */
+import React, { useState, useRef, useEffect, useCallback } from 'react';
+import { NavMenu, List, Dropdown } from 'tea-component';
+import { usePlatform } from '../../utils/platform';
+import classNames from '../../utils/classnames';
+import { renderMenuTitle, renderMenuIcon, renderLogo, renderTitle, navigateTo, } from './common';
+const CLASS_PREFIX = 'weda-menu';
+/**
+ * pc端横向导航
+ */
+const HorizontalMenu = ({ menuData, navigationStyle, selected, setSelected }) => {
+    // 导航样式
+    const { isHorizontal = false, showMenuIcon } = navigationStyle;
+    // 菜单背景色
+    const menuStyle = {
+        background: navigationStyle.menuBackgroundColor || '#fff',
+    };
+    // 平台
+    const platform = usePlatform();
+    // 横向导航， 判断是否出现右侧的滚动按钮
+    const [showButton, setShowButton] = useState(true);
+    // 横行导航移动
+    const [position, setPosition] = useState({ index: 0, offset: 0 });
+    const [menuOffset, setMenuOffset] = useState({});
+    const navWrapRef = useRef();
+    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) + 8 > parentWidth) {
+                index = index + 1;
+                data[index] = (i === null || i === void 0 ? void 0 : i.clientWidth) + 8;
+            }
+            else {
+                data[index] += (i === null || i === void 0 ? void 0 : i.clientWidth) + 8;
+            }
+        }
+        setMenuOffset(data);
+        const showButton = contentWidth > parentWidth;
+        setShowButton(showButton);
+    }, [navWrapRef]);
+    useEffect(() => {
+        var _a;
+        if (platform !== 'h5' && isHorizontal && ((_a = navWrapRef === null || navWrapRef === void 0 ? void 0 : navWrapRef.current) === null || _a === void 0 ? void 0 : _a.children)) {
+            getMenuOffset();
+        }
+    }, [platform, isHorizontal, navWrapRef]);
+    // 渲染下拉菜单
+    const renderMenuList = (item, navigationStyle) => {
+        return (React.createElement(List, { type: "option", className: `${CLASS_PREFIX}__dropdown-menu-list`, style: { background: navigationStyle.menuBackgroundColor } }, item === null || item === void 0 ? void 0 : item.map((menu) => {
+            const { title, children, key } = menu;
+            return !(children === null || children === void 0 ? void 0 : children.length) ? (React.createElement(List.Item, { key: key, className: `${CLASS_PREFIX}__dropdown-list-item`, selected: key === selected, onClick: () => {
+                    if (key !== selected) {
+                        setSelected(key);
+                        navigateTo(menu);
+                    }
+                } }, renderMenuTitle(navigationStyle, { title }, false))) : (React.createElement(List.SubMenu, { key: key, className: `${CLASS_PREFIX}__dropdown-list-item`, label: renderMenuTitle(navigationStyle, { title }, false) }, renderMenuList(children, navigationStyle)));
+        })));
+    };
+    return (React.createElement(NavMenu, { style: menuStyle, className: `${CLASS_PREFIX}__nav`, left: React.createElement(React.Fragment, null,
+            React.createElement(NavMenu.Item, { type: "logo", className: `${CLASS_PREFIX}__nav-logo` }, renderLogo(navigationStyle, `${CLASS_PREFIX}__nav-logo--img`)),
+            React.createElement(NavMenu.Item, { className: `${CLASS_PREFIX}__nav-title` },
+                React.createElement("span", { className: `${CLASS_PREFIX}__title` }, renderTitle(navigationStyle)))), right: React.createElement("div", { className: `${CLASS_PREFIX}__nav-wrap` },
+            showButton && position.index > 0 && (React.createElement("div", { className: `${CLASS_PREFIX}__nav-shadow leftButton`, onClick: () => {
+                    const result = position.offset + menuOffset[position.index];
+                    setPosition({ index: position.index - 1, offset: result });
+                } },
+                React.createElement("div", { className: `${CLASS_PREFIX}__shadow--icon` }),
+                React.createElement("div", { className: `${CLASS_PREFIX}__shadow` }),
+                React.createElement("div", { className: `${CLASS_PREFIX}__shadow--white` }))),
+            React.createElement("div", { className: `${CLASS_PREFIX}__nav-content box` },
+                React.createElement("div", { ref: navWrapRef, className: `${CLASS_PREFIX}__nav-content`, style: { transform: `translate(${position.offset}px, 0px)` } }, menuData === null || menuData === void 0 ? void 0 : menuData.map((i) => {
+                    var _a;
+                    return (React.createElement("div", { className: classNames(`${CLASS_PREFIX}__nav-item`, i.key === selected && i.level === 0
+                            ? `${CLASS_PREFIX}__item-open`
+                            : ''), key: i.key, onClick: () => {
+                            var _a;
+                            if (!((_a = i === null || i === void 0 ? void 0 : i.children) === null || _a === void 0 ? void 0 : _a.length) && i.key !== selected) {
+                                setSelected(i.key);
+                                navigateTo(i);
+                            }
+                        } },
+                        showMenuIcon &&
+                            renderMenuIcon(i === null || i === void 0 ? void 0 : i.iconUrl, i === null || i === void 0 ? void 0 : i.iconPath, navigationStyle),
+                        ((_a = i === null || i === void 0 ? void 0 : i.children) === null || _a === void 0 ? void 0 : _a.length) ? (React.createElement(Dropdown, { trigger: 'hover', overlayClassName: `${CLASS_PREFIX}__dropdown`, button: renderMenuTitle(navigationStyle, i, false) }, renderMenuList(i.children, navigationStyle))) : (React.createElement(NavMenu.Item, { className: `${CLASS_PREFIX}__item-val`, selected: i.key === selected }, renderMenuTitle(navigationStyle, i, false)))));
+                }))),
+            showButton && position.index + 2 < Object.keys(menuOffset).length && (React.createElement("div", { className: `${CLASS_PREFIX}__nav-shadow`, onClick: () => {
+                    const result = position.offset - menuOffset[position.index + 1];
+                    setPosition({ index: position.index + 1, offset: result });
+                } },
+                React.createElement("div", { className: `${CLASS_PREFIX}__shadow` }),
+                React.createElement("div", { className: `${CLASS_PREFIX}__shadow--white` }),
+                React.createElement("div", { className: `${CLASS_PREFIX}__shadow--icon` })))) }));
+};
+export default HorizontalMenu;