@cloudbase/weda-ui 2.0.28 → 3.1.0

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

@@ -1,203 +0,0 @@
-import React from 'react';
-import type { IMenuItem, INavigationStyle } from './type';
-import { isUrl, resolveStaticResourceUrl } 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, iconPath } = item;
-  return (
-    <span
-      className="menu-text"
-      style={{
-        color: menuColor,
-        fontSize: menuFontSize,
-      }}
-      data-testid="navigationBar-menu"
-    >
-      {showMenuIcon &&
-        level === 0 &&
-        hasIcon &&
-        renderMenuIcon(iconUrl, iconPath, 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, logoPath } =
-    navigationStyle;
-  const src = resolveStaticResourceUrl(logoPath) || logoUrl;
-  return (
-    showLogo && (
-      <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 (
-    <>
-      {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,
-  iconPath: string,
-  navigationStyle: INavigationStyle
-) => {
-  const { menuColor, menuFontSize } = navigationStyle;
-  let icon = iconUrl || 'td:view-module';
-
-  if (iconUrl && isUrl(iconUrl)) {
-    icon = resolveStaticResourceUrl(iconPath) || 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

@@ -1,179 +0,0 @@
-/* eslint-disable react/jsx-key */
-import React, { useState } from 'react';
-import { Menu, Drawer } from 'tea-component';
-import type { 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

@@ -1,201 +0,0 @@
-/* eslint-disable react/jsx-key */
-import React, { useState, useRef, useEffect, useCallback } from 'react';
-import { NavMenu, List, Dropdown } from 'tea-component';
-import type { 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, i?.iconPath, 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;