@cloudbase/weda-ui 2.0.27 → 3.1.1

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

@@ -1,60 +0,0 @@
-import * as React from 'react';
-import { Modal, Button, ModalProps, ConfigProvider } from 'tea-component';
-import type { unknownFunction } from '../../types';
-import classNames from '../../utils/classnames';
-
-export interface PropTypes extends ModalProps {
-  content: string;
-  customButton: React.ReactNode;
-  customContent: React.ReactNode;
-  isDefaultButton: boolean;
-  emit?: unknownFunction;
-  events: Record<string, unknownFunction>;
-  size: ModalProps['size'];
-}
-
-export default function WeDaModal(_props: PropTypes) {
-  const {
-    className,
-    content,
-    visible,
-    customButton,
-    customContent,
-    isDefaultButton,
-    emit,
-    size,
-    events,
-    ...props
-  } = _props;
-
-  return (
-    <ConfigProvider classPrefix="wedatea2td">
-      <Modal
-        size={size}
-        className={classNames('weda-ui', 'lcap-modal', 'container', className)}
-        visible={visible}
-        onClose={() => {
-          emit('close', {});
-        }}
-        {...props}
-      >
-        <Modal.Body>{content ? content : customContent}</Modal.Body>
-        <Modal.Footer>
-          {isDefaultButton ? (
-            <Button
-              type="primary"
-              onClick={() => {
-                emit('confirm', {});
-                // events.confirm();
-              }}
-            >
-              确定
-            </Button>
-          ) : (
-            customButton
-          )}
-        </Modal.Footer>
-      </Modal>
-    </ConfigProvider>
-  );
-}

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

@@ -1,247 +0,0 @@
-import React from 'react';
-import type { CommonPropsType } from '../../types';
-import classNames from '../../utils/classnames';
-import { Row, Col, ConfigProvider } from 'tea-component';
-import { usePlatform } from '../../utils/platform';
-import weui from './../../utils/weui';
-import './index.css';
-import { IconFont } from 'tdesign-icons-react';
-
-/**
- * Web端
- */
-const CLASS_PREFIX = 'weda-grid-navigation';
-
-export default function NavLayout({
-  navOption,
-  mobileCol,
-  pcCol,
-  iconSize,
-  textColor,
-  fontSize,
-  lineHeight,
-  fontWeight,
-  maxLines,
-  className,
-  style,
-}: H5NavLayoutProps) {
-  const platform = usePlatform();
-  // 等分列占比
-  const [colCount, setColCount] = React.useState(4);
-  const cls = classNames({
-    [CLASS_PREFIX]: true,
-    [className]: className,
-    [`${CLASS_PREFIX}-mobile`]: platform === 'h5',
-  });
-
-  const navList = React.useMemo(() => {
-    let list = [];
-    list.length = Math.floor(navOption.length / colCount);
-    list.forEach((item, index) => {
-      list[index] = [];
-    });
-    navOption.forEach((item, index) => {
-      const _index = Math.floor(index / colCount);
-      if (!list[_index] || list[_index].length <= 0) {
-        // 保证每个col 的数据都是有的，列入总共7个数据，那么第二行的3， 4，5数据是undefined, 占位
-        list[_index] = Array.apply(null, Array(colCount));
-      }
-      const paramObj = {};
-      if (item?.params) {
-        for (let info of item.params) {
-          paramObj[info.key] = info.value;
-        }
-      }
-      item.paramObj = paramObj;
-      list[_index][index - _index * colCount] = item;
-    });
-    return list;
-  }, [colCount, navOption]);
-
-  React.useEffect(() => {
-    setColCount(platform === 'h5' ? mobileCol : pcCol);
-  }, [mobileCol, pcCol]);
-
-  // 每个col的宽度百分比
-  const colStyle: React.CSSProperties = {
-    width: `${(1 / colCount) * 100}%`,
-  };
-  const mutiLabelStyle: React.CSSProperties = {
-    width: '100%',
-    display: '-webkit-box',
-    WebkitLineClamp: `${maxLines ? maxLines : 'inherit'}`,
-    overflow: 'hidden',
-    color: `${textColor}`,
-    fontWeight: `${fontWeight}`,
-    fontSize: `${fontSize}` + 'px',
-    lineHeight: `${lineHeight == 'auto' ? 'normal' : lineHeight}`,
-  };
-
-  const navTap = (colInfo = navOption[0]) => {
-    switch (colInfo?.tapStatus) {
-      case 'tap':
-        return null;
-      case 'inside':
-        if (colInfo.insideUrl) {
-          app.navigateTo({
-            mode: 'weDa',
-            pageId: colInfo.insideUrl,
-            params:
-              colInfo?.withParams && colInfo?.params.length > 0
-                ? colInfo.paramObj
-                : null,
-          });
-        } else {
-          return;
-        }
-        break;
-      case 'outer':
-        if (colInfo.newPage) {
-          colInfo.outerUrl ? window.open(colInfo.outerUrl) : false;
-        } else {
-          colInfo.outerUrl ? (window.location.href = colInfo.outerUrl) : false;
-        }
-        break;
-      default:
-        return null;
-    }
-  };
-  return (
-    <ConfigProvider classPrefix="wedatea2td">
-      <div className={cls} data-testid="navLayout" style={style}>
-        <div className={`${CLASS_PREFIX}__wrapper`}>
-          {navList.map((row, rowIndex) => {
-            return (
-              <Row className={`${CLASS_PREFIX}__row`} key={rowIndex}>
-                <>
-                  {row &&
-                    row.map(
-                      (
-                        colInfo: {
-                          tapStatus;
-                          title;
-                          iconSrc;
-                          icon: string;
-                          insideUrl;
-                          withParams;
-                          params;
-                          paramObj;
-                          newPage;
-                          outerUrl;
-                        },
-                        colIndex
-                      ) => {
-                        return (
-                          <Col
-                            style={{
-                              ...colStyle,
-                              cursor:
-                                colInfo?.tapStatus != 'tap'
-                                  ? 'pointer'
-                                  : 'auto',
-                            }}
-                            className={`${CLASS_PREFIX}__col ${CLASS_PREFIX}__col--${iconSize}`}
-                            key={colIndex}
-                          >
-                            <div
-                              data-testid={`${colIndex}_click`}
-                              onClick={() => navTap(colInfo)}
-                            >
-                              {!colInfo?.iconSrc ? (
-                                <IconShow onIcon={colInfo?.icon} />
-                              ) : (
-                                <div className={`${CLASS_PREFIX}__img`}>
-                                  <img
-                                    src={colInfo?.iconSrc}
-                                    className={`${CLASS_PREFIX}__icon`}
-                                  />
-                                </div>
-                              )}
-                              {colInfo?.title && (
-                                <div
-                                  className={`${CLASS_PREFIX}__text`}
-                                  style={mutiLabelStyle}
-                                >
-                                  {colInfo?.title}
-                                </div>
-                              )}
-                            </div>
-                          </Col>
-                        );
-                      }
-                    )}
-                </>
-              </Row>
-            );
-          })}
-        </div>
-      </div>
-    </ConfigProvider>
-  );
-}
-export interface H5NavLayoutProps extends CommonPropsType {
-  /**
-   * 导航配置
-   */
-  navOption?: Array<any>;
-  /**
-   * 移动端每行列数
-   */
-  mobileCol?: number;
-  /**
-   * PC端每行列数
-   */
-  pcCol?: number;
-  /**
-   * icon尺寸
-   */
-  iconSize?: 'medium' | 'samll' | 'big';
-  /**
-   * 标题颜色
-   */
-  textColor?: string;
-  /**
-   * 标题字重
-   */
-  fontWeight?: 'lighter' | 'normal' | 'bolder';
-  /**
-   * 最大行数
-   */
-  maxLines?: number;
-  /**
-   * 字号
-   */
-  fontSize?: number;
-  /**
-   * 行高
-   */
-  lineHeight: string;
-  /**
-   * 点击事件
-   */
-  navTap?: (colInfo) => void;
-}
-interface IIconShow {
-  onIcon?: String;
-}
-/**
- * icon回显组件
- */
-const IconShow = ({ onIcon }: IIconShow) => {
-  return (
-    <>
-      {onIcon?.includes('td:') ? (
-        <div>
-          <IconFont
-            name={onIcon?.split(':')[1]}
-            className={`${CLASS_PREFIX}__fonticon`}
-          />
-        </div>
-      ) : (
-        <div
-          className={`${CLASS_PREFIX}__fonticon lcap-icon lcap-icon-${onIcon}`}
-        ></div>
-      )}
-    </>
-  );
-};

package/src/web/components/navigationBar/chevron-right--double.svg

@@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M2.95898 11.5405L3.87822 12.4597L8.33784 8.0001L3.87822 3.54048L2.95898 4.45972L6.49936 8.0001L2.95898 11.5405ZM7.95892 11.5405L8.87815 12.4597L13.3378 8.0001L8.87815 3.54048L7.95892 4.45972L11.4993 8.0001L7.95892 11.5405Z" fill="black" fill-opacity="0.26"/>
-</svg>

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

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

@@ -1,179 +0,0 @@
-/* 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;