@cloudbase/weda-ui 2.0.28 → 3.1.2

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;

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

@@ -1,231 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import type { CommonPropsType } from '../../types';
-import classNames from '../../utils/classnames';
-import { ConfigProvider } from 'tea-component';
-import { usePlatform, isInIde } from '../../utils/platform';
-import { getAppCustomNav } from '../../utils/tcb';
-import type { IMenuItem, INavigationStyle } from './type';
-import './index.css';
-import VerticalMenu from './verticalMenu';
-import HorizontalMenu from './horizontalMenu';
-import H5Menu from './h5Menu';
-import { expandMenu, findMenuItemByPath } from './common';
-import destr from 'destr';
-/**
- * Web端
- */
-const CLASS_PREFIX = 'weda-menu';
-
-// 默认导航数据
-const defaultNavigationBar: {
-  navigationStyle: INavigationStyle;
-  menuData: IMenuItem[];
-} = {
-  menuData: [],
-  navigationStyle: {
-    isHorizontal: false,
-    showMenuIcon: true,
-    menuFontSize: 16,
-    menuBackgroundColor: '#fff',
-    menuColor: '#000',
-    menuHoverColor: '#f3f3f3',
-    showTitle: true,
-    title: '菜单标题',
-    showLogo: true,
-    logoPath: '',
-    logoUrl:
-      'https://imgcache.qq.com/qcloud/tcloud_dtc/static/static_source_business/43d3b2b7-445c-4858-8eb0-50ac5d5cc08e.svg',
-    titleFontSize: 18,
-    titleColor: '#000',
-    logoWidth: 32,
-    logoHeight: 32,
-  },
-};
-// 默认高亮当前路由对应的菜单
-const defaultSelectedMenu = (menu: IMenuItem[]) => {
-  try {
-    const url = window.location.href;
-    let selectedKey = url.substring(url.lastIndexOf('/'));
-    const targetMenu = findMenuItemByPath(menu, selectedKey);
-    if (targetMenu) {
-      selectedKey = targetMenu.key;
-    }
-    return selectedKey;
-  } catch (error) {
-    return '';
-  }
-};
-/**
- * 导航菜单
- */
-export default function NavigationBar({
-  navigationbar,
-  contentSlot,
-  className,
-  style,
-  callApi = { getAppCustomNav },
-}: PropsType) {
-  const platform = usePlatform();
-  const [menuData, setMenuData] = useState<IMenuItem[]>([]);
-  const [mobileMenuData, setMobileMenuData] = useState<IMenuItem[]>([]);
-  // 是否启用多端
-  const [isMultiTerminal, setIsMultiTerminal] = useState(false);
-  const [navigationStyle, setNavigationStyle] = useState<INavigationStyle>(
-    defaultNavigationBar.navigationStyle
-  );
-  // 菜单选中
-  const [selected, setSelected] = useState<string>('');
-  // 导航样式
-  const { isHorizontal = false } = navigationStyle;
-  const cls = classNames({
-    [CLASS_PREFIX]: true,
-    [className]: className,
-    [`${CLASS_PREFIX}-mobile`]: platform === 'h5',
-    [`${CLASS_PREFIX}-horizontal`]: isHorizontal,
-  });
-  // 导航容器样式
-  const navigationWrapStyle: React.CSSProperties = {
-    display: 'flex',
-    height: '100vh',
-    flexDirection: isHorizontal || platform === 'h5' ? 'column' : 'row',
-    position: 'relative',
-    ...style,
-  };
-
-  // 更新导航菜单
-  const updateNavigationData = () => {
-    callApi
-      .getAppCustomNav()
-      .then((res) => {
-        const { Content } = res;
-        const navigationData = destr(Content);
-        if (navigationData?.navigationStyle) {
-          // 设置默认选中
-          let selectedKey = '';
-          if (navigationData?.menuData?.length) {
-            selectedKey = defaultSelectedMenu(navigationData?.menuData);
-          }
-          setSelected(selectedKey);
-
-          // 设置默认展开状态
-          let menus = navigationData?.menuData || [];
-          menus = expandMenu(menus, { key: selectedKey }, true);
-          setMenuData(menus);
-          setNavigationStyle({
-            ...defaultNavigationBar.navigationStyle,
-            ...navigationData?.navigationStyle,
-          });
-          // 如果启用多端独立菜单导航，则设置移动端数据
-          if (navigationData?.isMultiTerminal) {
-            let mobileMenus = navigationData?.mobileMenuData || [];
-            mobileMenus = expandMenu(mobileMenus, { key: selectedKey }, true);
-            setMobileMenuData(mobileMenus);
-            setIsMultiTerminal(true);
-          }
-        }
-      })
-      .catch((error) => {
-        console.log(error);
-      });
-  };
-  /**
-   * 每次渲染组件通过接口拉取数据
-   */
-  useEffect(() => {
-    updateNavigationData();
-  }, []);
-  useEffect(() => {
-    if (isInIde()) {
-      // setMenuData(navigationbar?.menuData);
-      // setNavigationStyle(navigationbar?.navigationStyle);
-      updateNavigationData();
-    }
-  }, [navigationbar]);
-
-  // 初始化css变量
-  useEffect(() => {
-    if (navigationStyle.menuHoverColor) {
-      const body = document.getElementsByTagName('body')[0];
-      if (body) {
-        body.style.setProperty(
-          '--weda-navigation-menu-hover-color',
-          navigationStyle.menuHoverColor
-        );
-        body.style.setProperty(
-          '--weda-navigation-menu-selected-color',
-          navigationStyle.menuHoverColor
-        );
-        body.style.setProperty(
-          '--weda-navigation-menu-background-color',
-          navigationStyle.menuBackgroundColor
-        );
-      }
-    }
-  }, [navigationStyle.menuHoverColor, navigationStyle.menuBackgroundColor]);
-
-  const renderMenu = () => {
-    return (
-      <>
-        <div
-          className={cls}
-          style={navigationWrapStyle}
-          data-testid="navigationBar"
-        >
-          <div
-            className={`${CLASS_PREFIX}__wrapper`}
-            style={{
-              background: navigationStyle?.menuBackgroundColor || '#fff',
-            }}
-          >
-            {platform !== 'h5' && !isHorizontal && (
-              <VerticalMenu
-                menuData={menuData}
-                navigationStyle={navigationStyle}
-                setMenuData={setMenuData}
-                selected={selected}
-                setSelected={setSelected}
-              />
-            )}
-            {platform !== 'h5' && isHorizontal && (
-              <HorizontalMenu
-                menuData={menuData}
-                navigationStyle={navigationStyle}
-                selected={selected}
-                setSelected={setSelected}
-              />
-            )}
-            {platform === 'h5' && (
-              <H5Menu
-                menuData={isMultiTerminal ? mobileMenuData : menuData}
-                navigationStyle={navigationStyle}
-                setMenuData={setMenuData}
-                className={className}
-                selected={selected}
-                setSelected={setSelected}
-              />
-            )}
-          </div>
-          <div className="menu-solt">{contentSlot}</div>
-        </div>
-      </>
-    );
-  };
-
-  return (
-    <ConfigProvider classPrefix="wedatea2td">
-      {!isInIde() &&
-        (menuData?.length > 0 || mobileMenuData?.length > 0) &&
-        renderMenu()}
-      {isInIde() && renderMenu()}
-    </ConfigProvider>
-  );
-}
-
-export interface PropsType extends CommonPropsType {
-  contentSlot?: string;
-  navigationbar: {
-    navigationStyle: INavigationStyle;
-    menuData: IMenuItem[];
-  };
-  callApi: any;
-}

package/src/web/components/navigationBar/type.d.ts

@@ -1,118 +0,0 @@
-export interface IMenuItem {
-  /**
-   * 节点的 id
-   */
-  key: string;
-
-  /**
-   * 菜单标题
-   */
-  title?: string | any;
-
-  /**
-   * 菜单类型
-   * group 分组
-   * link 外链菜单
-   * basemenu 无链接菜单
-   * route 内链菜单
-   */
-  type?: string;
-
-  /**
-   * 是否外跳
-   */
-  linkTargetBlank?: boolean;
-  /**
-   * 路由路径
-   */
-  path?: string;
-  /**
-   * 外部链接
-   */
-  linkUrl?: string;
-  /**
-   * 图标链接
-   */
-  iconUrl?: string;
-  /**
-   * 图标path
-   */
-  iconPath?: string;
-  /**
-   * 子菜单
-   */
-  children?: IMenuItem[];
-
-  /**
-   * 层级
-   */
-  level: number;
-
-  /**
-   * 展开状态
-   */
-  opened?: boolean;
-}
-
-export interface INavigationStyle {
-  /**
-   * 是否横向菜单
-   */
-  isHorizontal: boolean;
-  /**
-   * 是否展示菜单图标
-   */
-  showMenuIcon: boolean;
-  /**
-   * 菜单字号
-   */
-  menuFontSize: number;
-  /**
-   * 菜单背景色
-   */
-  menuBackgroundColor: string;
-  /**
-   * 菜单字体颜色
-   */
-  menuColor: string;
-  /**
-   * 菜单选中颜色
-   */
-  menuHoverColor: string;
-  /**
-   * 标题
-   */
-  showTitle: boolean;
-  /**
-   * 名称
-   */
-  title: string;
-  /**
-   * 是否展示图标
-   */
-  showLogo: boolean;
-  /**
-   * 图标地址
-   */
-  logoUrl: string;
-  /**
-   * 图标path
-   */
-  logoPath: string;
-  /**
-   * 标题字号
-   */
-  titleFontSize: number;
-  /**
-   * 标题颜色
-   */
-  titleColor: string;
-  /**
-   * 图标宽度
-   */
-  logoWidth: number;
-  /**
-   * 图标高度
-   */
-  logoHeight: number;
-}

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

@@ -1,81 +0,0 @@
-import React from 'react';
-import { Menu } from 'tea-component';
-import type { IMenuItem, INavigationStyle } from './type';
-import {
-  renderMenuTitle,
-  renderLogo,
-  renderTitle,
-  navigateTo,
-  expandMenu,
-} from './common';
-const CLASS_PREFIX = 'weda-menu';
-
-/**
- * pc端纵向导航
- */
-const VerticalMenu: React.FC<{
-  menuData: IMenuItem[];
-  navigationStyle: INavigationStyle;
-  setMenuData: (menus: IMenuItem[]) => void;
-  selected: string;
-  setSelected: (selectedKey: string) => void;
-}> = ({ menuData, navigationStyle, setMenuData, selected, setSelected }) => {
-  // 菜单背景色
-  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);
-          }
-        }}
-      />
-    );
-  };
-
-  return (
-    <Menu
-      style={menuStyle}
-      className={`${CLASS_PREFIX}__menu-content`}
-      title={renderTitle(navigationStyle) || ' '}
-      icon={renderLogo(navigationStyle, `${CLASS_PREFIX}__main-icon`)}
-    >
-      {menuData?.map((item: any) => {
-        return item?.children?.length > 0
-          ? renderSubMenu(item)
-          : renderMenuItem(item);
-      })}
-    </Menu>
-  );
-};
-
-export default VerticalMenu;

package/src/web/components/phone/index.tsx

@@ -1,22 +0,0 @@
-import * as React from 'react';
-import Button from '../../components/button';
-import { CommonPropsType } from '../../types';
-
-const Phone = (props: PropsType) => <Button {...props} />;
-
-export interface PropsType extends CommonPropsType {
-  /**
-   * 按钮标题
-   */
-  text?: string;
-  /**
-   * 按钮风格
-   */
-  type?: 'primary' | 'warn' | 'wechat' | 'default';
-  /**
-   * 按钮大小
-   */
-  size?: 'default' | 'mini' | 'large';
-}
-
-export default Phone;

package/src/web/components/phoneCode/index.tsx

@@ -1,22 +0,0 @@
-import * as React from 'react';
-import Button from '../../components/button';
-import { CommonPropsType } from '../../types';
-
-const PhoneCode = (props: PropsType) => <Button {...props} />;
-
-export interface PropsType extends CommonPropsType {
-  /**
-   * 按钮标题
-   */
-  text?: string;
-  /**
-   * 按钮风格
-   */
-  type?: 'primary' | 'warn' | 'wechat' | 'default';
-  /**
-   * 按钮大小
-   */
-  size?: 'default' | 'mini' | 'large';
-}
-
-export default PhoneCode;