@cloudbase/weda-ui 0.2.16 → 1.0.24

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

@@ -0,0 +1,231 @@
+/* eslint-disable react/jsx-key */
+import React, { useState, useEffect } from 'react';
+import { 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 { 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,
+    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

@@ -0,0 +1,111 @@
+export interface IMenuItem {
+  /**
+   * 节点的 id
+   */
+  key: string;
+
+  /**
+   * 菜单标题
+   */
+  title?: string | any;
+
+  /**
+   * 菜单类型
+   * group 分组
+   * link 外链菜单
+   * basemenu 无链接菜单
+   * route 内链菜单
+   */
+  type?: string;
+
+  /**
+   * 是否外跳
+   */
+  linkTargetBlank?: boolean;
+  /**
+   * 路由路径
+   */
+  path?: string;
+  /**
+   * 外部链接
+   */
+  linkUrl?: string;
+  /**
+   * 图标链接
+   */
+  iconUrl?: 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;
+  /**
+   * 标题字号
+   */
+  titleFontSize: number;
+  /**
+   * 标题颜色
+   */
+  titleColor: string;
+  /**
+   * 图标宽度
+   */
+  logoWidth: number;
+  /**
+   * 图标高度
+   */
+  logoHeight: number;
+}

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

@@ -0,0 +1,81 @@
+import React from 'react';
+import { Menu } from 'tea-component';
+import { 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

@@ -0,0 +1,22 @@
+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

@@ -0,0 +1,22 @@
+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;

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

@@ -4,6 +4,7 @@ import { getTempFileURL } from '../../utils/tcb';
 import './index.css';
 import { LOAD_ERR_IMG_BASE64 } from '../../utils/constant';
 import { CommonPropsType } from '../../types';
+import destr from 'destr';
 
 export interface PropsType extends CommonPropsType {
     value: string
@@ -15,10 +16,7 @@ export default function RichTextView({
   style,
   id
 }: PropsType) {
-  let parseValue = value;
-  try {
-    parseValue = JSON.parse(value);
-  } catch (e) {}
+  let parseValue = destr(value);
   const cls = classNames({
     'weda-ui': true,
     'weda-RichTextView': true,
@@ -64,4 +62,4 @@ export default function RichTextView({
       </div>
     )
   );
-}
+}

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

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import Button from '../../components/button';
+import { CommonPropsType } from '../../types';
+
+const Share = (props: PropsType) => <Button {...props} />;
+
+export interface PropsType extends CommonPropsType {
+  /**
+   * 按钮标题
+   */
+  text?: string;
+  /**
+   * 按钮风格
+   */
+  type?: 'primary' | 'warn' | 'wechat' | 'default';
+  /**
+   * 按钮大小
+   */
+  size?: 'default' | 'mini' | 'large';
+  /**
+   * 分享标题
+   */
+  title?: string;
+  /**
+   * 选择页面
+   */
+  path?: string;
+  /**
+   * 携带参数
+   */
+  withParams?: boolean;
+  /**
+   * 参数
+   */
+  params?: any;
+}
+
+export default Share;

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

@@ -12,11 +12,13 @@ import TabsPc from './tabs.pc';
 export interface PropsType extends CommonPropsType {
   tabs: {
     title: string;
+    value: string;
 
     // @deprecated
     name?: string;
   }[];
   selectedIndex: number|string
+  isMultipleSlot: boolean
   [key: string]: React.ReactNode
   // [panel: `panel${number}`]: React.ReactNode; // require typescript@4.4
 }

package/src/web/components/tabs/tabs.h5.tsx

@@ -4,13 +4,16 @@ import './index.css';
 import classNames from '../../utils/classnames';
 import { useSyncValue } from '../../utils/useSyncValue';
 import {PropsType} from './index';
+import { useCustomCompareEffect, usePrevious, useSyncedRef } from '@react-hookz/web';
+import isObjectEqual from '../../utils/isObjectEqual';
 
 export default function TabsH5({
-  tabs,
+  tabs = [],
   selectedIndex,
   events,
   className,
   style,
+  isMultipleSlot = true,
   ...restProps
 }: PropsType) {
   const [currentIndex, setCurrentIndex] = useSyncValue(
@@ -25,44 +28,51 @@ export default function TabsH5({
     };
   }, [tabs, currentIndex]);
 
+  const eventRef = useSyncedRef(events);
+  useCustomCompareEffect(() => {
+    eventRef.current.change(
+      {
+        id: currentIndex,
+        label: tabs[currentIndex]?.title,
+        value: tabs[currentIndex]?.value,
+      },
+    );
+  }, [currentIndex, tabs], isObjectEqual);
   return (
-    <div data-testid="tabs" className={classNames("weda-tabs weda-ui", {
-      [className]: className
-    })} style={style}>
+    <div
+      data-testid="tabs"
+      className={classNames('weda-tabs weda-ui', {
+        [className]: className,
+      })}
+      style={style}
+    >
       <div className="weda-tabs__nav">
-        {
-          tabs?.map(({ name, title }, index) => (
-            <div
-              className={
-                classNames(
-                  'weda-tabs__nav-cell',
-                  {
-                    'active': currentIndex === index,
-                    'scroll': currentIndex > 5
-                  }
-                )
-              }
-              key={name || index}
-              onClick={(event) => {
-                setCurrentIndex(index);
-                events && events.change({id: index, label: title}, { event });
-              }}
-            >
+        {tabs?.map(({ name, title }, index) => (
+          <div
+            className={classNames('weda-tabs__nav-cell', {
+              active: currentIndex === index,
+              scroll: currentIndex > 5,
+            })}
+            key={name || index}
+            onClick={() => {
+              setCurrentIndex(index);
+            }}
+          >
             {title}
-            </div>
-          ))
-        }
+          </div>
+        ))}
 
-        <div
-          className="weda-tabs__nav-sticky"
-          style={stickyStyle}
-          ></div>
+        <div className="weda-tabs__nav-sticky" style={stickyStyle}></div>
       </div>
 
-      <div className={classNames({
-        'weda-tabs__panel': true,
-      })}>
-        {restProps[`panel${currentIndex + 1}`]}
+      <div
+        className={classNames({
+          'weda-tabs__panel': true,
+        })}
+      >
+        {isMultipleSlot
+          ? restProps[`panel${currentIndex + 1}`]
+          : restProps['panel1']}
       </div>
     </div>
   );