@cloudbase/weda-ui 0.2.15 → 1.0.21

package/src/web/components/navigationBar/common.tsx

@@ -0,0 +1,198 @@
+import React from 'react';
+import { IMenuItem, INavigationStyle } from './type';
+import { isUrl } from '../../utils/platform';
+import { IconFont } from 'tdesign-icons-react';
+const CLASS_PREFIX = 'weda-menu';
+
+// 标题
+export const renderTitle = (navigationStyle: INavigationStyle) => {
+  const { title, titleColor, showTitle, titleFontSize } = navigationStyle;
+  return (
+    showTitle && (
+      <span
+        data-testid="navigationBar-title"
+        style={{
+          display: 'inline-block',
+          color: titleColor,
+          fontSize: titleFontSize,
+        }}
+      >
+        {title}
+      </span>
+    )
+  );
+};
+
+// 菜单
+export const renderMenuTitle = (
+  navigationStyle: INavigationStyle,
+  item: Partial<IMenuItem>,
+  hasIcon: boolean
+) => {
+  const { menuColor, menuFontSize, showMenuIcon } = navigationStyle;
+  const { title, level, iconUrl } = item;
+  return (
+    <span
+      className="menu-text"
+      style={{
+        color: menuColor,
+        fontSize: menuFontSize,
+      }}
+      data-testid="navigationBar-menu"
+    >
+      {showMenuIcon &&
+        level === 0 &&
+        hasIcon &&
+        renderMenuIcon(iconUrl, navigationStyle)}
+      {title}
+    </span>
+  );
+};
+// 默认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: INavigationStyle,
+  className: string
+) => {
+  const { showLogo, logoHeight, logoWidth, logoUrl } = navigationStyle;
+  return (
+    showLogo && (
+      <img
+        data-testid="navigationBar-logo"
+        className={className}
+        style={{ width: `${logoWidth}px`, height: `${logoHeight}px` }}
+        src={logoUrl || defaultLogoUrl}
+        alt="logo"
+      />
+    )
+  );
+};
+
+// icon回显
+export const IconShow = ({ onIcon, menuColor, menuFontSize }) => {
+  return (
+    <>
+      {onIcon?.includes('td:') ? (
+        <IconFont
+          name={onIcon?.split(':')[1]}
+          className={`${CLASS_PREFIX}__fonticon`}
+          style={{ color: menuColor, fontSize: menuFontSize }}
+        />
+      ) : (
+        <div
+          className={`${CLASS_PREFIX}__fonticon lcap-icon lcap-icon-${onIcon}`}
+          style={{ color: menuColor, fontSize: menuFontSize }}
+        ></div>
+      )}
+    </>
+  );
+};
+// 菜单图标
+export const renderMenuIcon = (
+  iconUrl: string,
+  navigationStyle: INavigationStyle
+) => {
+  const { menuColor, menuFontSize } = navigationStyle;
+  let icon = iconUrl || 'td:view-module';
+  if (iconUrl && isUrl(iconUrl)) {
+    return (
+      <img
+        className={`${CLASS_PREFIX}__item-icon`}
+        style={{ width: 16, height: 16, marginRight: 4 }}
+        src={icon}
+        alt="logo"
+      />
+    );
+  } else {
+    return (
+      <IconShow
+        onIcon={icon}
+        menuColor={menuColor}
+        menuFontSize={menuFontSize}
+      />
+    );
+  }
+};
+
+// 页面跳转
+export const navigateTo = (menu: IMenuItem) => {
+  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?.replace('/', ''),
+      packageName: '',
+      mode: 'weDa',
+    });
+  }
+};
+// 菜单是否展开
+export const hasSelectedMenu = (menu: IMenuItem, selectedkey: string) => {
+  let opened = false;
+  if (menu.key === selectedkey) {
+    return true;
+  }
+  menu?.children?.forEach((i) => {
+    if (i.key === selectedkey) {
+      opened = true;
+    }
+    if (i?.children?.length) {
+      opened = hasSelectedMenu(i, selectedkey);
+    }
+  });
+  return opened;
+};
+// 点击展开/收起菜单
+export const expandMenu = (
+  menuData: IMenuItem[],
+  menuItem: Partial<IMenuItem>,
+  init = false
+) => {
+  let 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?.children, menuItem, init) };
+    }
+    return i;
+  });
+};
+
+// 根据path查找菜单
+export const findMenuItemByPath = (
+  menus: IMenuItem[],
+  targetPath: string
+): IMenuItem | null => {
+  const queue: IMenuItem[] = [];
+  let targetNode: IMenuItem | null = 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 {
+      node.children?.forEach((node) => queue.push(node));
+    }
+  }
+
+  return targetNode;
+};

package/src/web/components/navigationBar/h5Menu.tsx

@@ -0,0 +1,179 @@
+/* eslint-disable react/jsx-key */
+import React, { useState } from 'react';
+import { Menu, Drawer } from 'tea-component';
+import { IMenuItem, INavigationStyle } from './type';
+import classNames from '../../utils/classnames';
+import {
+  renderMenuTitle,
+  renderLogo,
+  renderTitle,
+  navigateTo,
+  expandMenu,
+} from './common';
+const CLASS_PREFIX = 'weda-menu';
+
+/**
+ * 移动端导航
+ */
+
+const H5Menu: React.FC<{
+  menuData: IMenuItem[];
+  navigationStyle: INavigationStyle;
+  setMenuData: (menus: IMenuItem[]) => void;
+  className: string;
+  selected: string;
+  setSelected: (selectedKey: string) => void;
+}> = ({
+  menuData,
+  navigationStyle,
+  setMenuData,
+  className,
+  selected,
+  setSelected,
+}) => {
+  // 平台
+  const cls = classNames({
+    [CLASS_PREFIX]: true,
+    [className]: className,
+    [`${CLASS_PREFIX}-mobile`]: true,
+  });
+  // h5 弹框
+  const [visible, setVisible] = useState<boolean>(false);
+  // 菜单背景色
+  const menuStyle: React.CSSProperties = {
+    background: navigationStyle.menuBackgroundColor || '#fff',
+  };
+  // 渲染subMenu
+  const renderSubMenu = (item: IMenuItem, hasThereNode = false) => {
+    const { key, children, opened } = item;
+    return children.length > 0 ? (
+      <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?.map((el: any) => renderSubMenu(el, true))}
+      </Menu.SubMenu>
+    ) : (
+      renderMenuItem(item)
+    );
+  };
+  // 渲染MenuItem
+  const renderMenuItem = (item: IMenuItem) => {
+    const { key } = item;
+    return (
+      <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: INavigationStyle) => (
+    <>
+      <div className={`${CLASS_PREFIX}__bar-main`}>
+        <span className={`${CLASS_PREFIX}__main-logo`}>
+          {renderLogo(navigationStyle, `${CLASS_PREFIX}__main-icon`)}
+          {renderTitle(navigationStyle)}
+        </span>
+      </div>
+      <div className={`${CLASS_PREFIX}__bar-extra`}>
+        {!visible && (
+          <i
+            className={`${CLASS_PREFIX}__bar-btn`}
+            onClick={() => setVisible(true)}
+          >
+            <svg
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M3 4H21V6H3V4ZM3 11H21V13H3V11ZM3 18H21V20H3V18Z"
+                fill={navigationStyle.titleColor}
+                fillOpacity="0.9"
+              />
+            </svg>
+          </i>
+        )}
+        {visible && (
+          <i
+            className={`${CLASS_PREFIX}__bar-btn--close`}
+            onClick={() => setVisible(false)}
+          >
+            <svg
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <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"
+              />
+            </svg>
+          </i>
+        )}
+      </div>
+    </>
+  );
+  return (
+    <>
+      {renderH5Title(navigationStyle)}
+      <Drawer
+        size={'m'}
+        placement={'left'}
+        disableAnimation={true}
+        outerClickClosable={false}
+        visible={visible}
+        onClose={() => setVisible(false)}
+        className={`${CLASS_PREFIX}__drawer`}
+      >
+        <div
+          className={cls}
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            position: 'relative',
+          }}
+        >
+          <div
+            className={`${CLASS_PREFIX}__wrapper`}
+            style={{
+              background: navigationStyle?.menuBackgroundColor || '#fff',
+            }}
+          >
+            {renderH5Title(navigationStyle)}
+          </div>
+        </div>
+        <Menu className={`${CLASS_PREFIX}__drawer-menu`} style={menuStyle}>
+          {menuData?.map((item: any) => {
+            return item?.children?.length > 0
+              ? renderSubMenu(item)
+              : renderMenuItem(item);
+          })}
+        </Menu>
+      </Drawer>
+    </>
+  );
+};
+
+export default H5Menu;

package/src/web/components/navigationBar/horizontalMenu.tsx

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