@cloudbase/weda-ui 2.0.26 → 3.1.0

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

@@ -1,84 +0,0 @@
-import React, { useEffect, useMemo } from 'react';
-
-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 = [],
-  selectedIndex,
-  events,
-  className,
-  style,
-  isMultipleSlot = true,
-  ...restProps
-}: PropsType) {
-  const [currentIndex, setCurrentIndex] = useSyncValue(
-    typeof selectedIndex === 'string' ? parseInt(selectedIndex) : selectedIndex
-  );
-  const stickyStyle = useMemo(() => {
-    const length = tabs.length;
-    return {
-      width: `${(1 / length) * 100}%`,
-      transform: `translate3d( ${currentIndex * 100}%, 0, 0)`,
-    };
-  }, [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 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={() => {
-              setCurrentIndex(index);
-            }}
-          >
-            {title}
-          </div>
-        ))}
-
-        <div className="weda-tabs__nav-sticky" style={stickyStyle}></div>
-      </div>
-
-      <div
-        className={classNames({
-          'weda-tabs__panel': true,
-        })}
-      >
-        {isMultipleSlot
-          ? restProps[`panel${currentIndex + 1}`]
-          : restProps['panel1']}
-      </div>
-    </div>
-  );
-}

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

@@ -1,74 +0,0 @@
-import {
-  useCustomCompareEffect,
-  useMountEffect,
-  useSyncedRef,
-} from '@react-hookz/web';
-import * as React from 'react';
-import { Tabs as TeaTabs, TabPanel, ConfigProvider } from 'tea-component';
-import classNames from '../../utils/classnames';
-import isObjectEqual from '../../utils/isObjectEqual';
-import { useSyncValue } from '../../utils/useSyncValue';
-import { PropsType } from './index';
-
-export default function TabsPc({
-  tabs = [],
-  selectedIndex,
-  events,
-  className,
-  style,
-  isMultipleSlot = true,
-  ...restProps
-}: PropsType) {
-  const [activeIndex, setActiveIndex] = useSyncValue(selectedIndex);
-  const _tabs = React.useMemo(() => {
-    return (
-      Array.isArray(tabs) &&
-      tabs.length &&
-      tabs.map((item, index) => {
-        return {
-          id: index.toString(),
-          label: item.title,
-          value: item.value,
-        };
-      })
-    );
-  }, [tabs]);
-
-  const eventsRef = useSyncedRef(events);
-  useCustomCompareEffect(
-    () => {
-      eventsRef.current &&
-        eventsRef.current.change({
-          id: _tabs[activeIndex]?.id,
-          label: _tabs[activeIndex]?.label,
-          value: _tabs[activeIndex]?.value,
-        });
-    },
-    [activeIndex, _tabs],
-    isObjectEqual
-  );
-  const onActive = (e) => {
-    setActiveIndex(e.id);
-  };
-  return (
-    <ConfigProvider classPrefix="wedatea2td">
-      <TeaTabs
-        style={style}
-        tabs={_tabs}
-        activeId={String(activeIndex)}
-        onActive={onActive}
-        className={classNames('weda-tabs_pc', {
-          [className]: className,
-        })}
-      >
-        {_tabs?.map((item, index) => (
-          <TabPanel key={item.id} id={item.id}>
-            {isMultipleSlot
-              ? restProps[`panel${index + 1}`]
-              : restProps['panel1']}
-          </TabPanel>
-        ))}
-      </TeaTabs>
-    </ConfigProvider>
-  );
-}

package/src/web/components/text/index.css

@@ -1,26 +0,0 @@
-.weda-text {
-  text-overflow: ellipsis;
-  overflow: hidden;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  /* -webkit-line-clamp: 1;
-  white-space: pre-line; */
-}
-.weda-text.level_1 {
-  font-size: 64px !important;
-}
-.weda-text.level_2 {
-  font-size: 56px !important;
-}
-.weda-text.level_3 {
-  font-size: 48px !important;
-}
-.weda-text.level_4 {
-  font-size: 40px !important;
-}
-.weda-text.level_5 {
-  font-size: 32px !important;
-}
-.weda-text.level_6 {
-  font-size: 24px !important;
-}

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

@@ -1,60 +0,0 @@
-import * as React from 'react';
-import classNames from '../../utils/classnames';
-import type { CommonPropsType, unknownFunction } from '../../types';
-import './index.css';
-
-export interface PropsType extends CommonPropsType {
-  text: string;
-  level: string;
-  maxLines: number;
-  space: boolean;
-  userSelect: boolean;
-  textAlign: string;
-  textColor: string;
-  contenteditable: HTMLParagraphElement['contentEditable'];
-  onInput: unknownFunction;
-  onBlur: unknownFunction;
-}
-export default function Text({
-  text,
-  maxLines,
-  space,
-  userSelect,
-  style = {},
-  className,
-  events,
-  id,
-  level,
-  contenteditable,
-  onInput,
-  onBlur,
-}: PropsType) {
-  const textStyle: React.CSSProperties = {
-    WebkitLineClamp: maxLines,
-    whiteSpace: space ? 'pre-wrap' : 'pre-line',
-  };
-
-  if (!userSelect) {
-    textStyle.userSelect = 'none';
-  }
-  const levelName = level === '0' || !level ? '' : `level_${level}`;
-
-  const inlineStyle = React.useMemo(
-    () => ({ ...textStyle, ...style }),
-    [textStyle, style]
-  );
-  return (
-    <p
-      //@ts-expect-error contentEditable type def sucks
-      contentEditable={contenteditable}
-      onInput={onInput}
-      onBlur={onBlur}
-      style={inlineStyle}
-      className={classNames('weda-text', 'weda-ui', className, levelName)}
-      id={id}
-      onClick={(e) => events.tap({}, { originEvent: e })}
-    >
-      {text}
-    </p>
-  );
-}

package/src/web/components/uploaderFileView/index.css

@@ -1,11 +0,0 @@
-a.weda-uploader-file-view__single {
-  display: inline-block;
-  vertical-align: middle;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 100%;
-}
-a.weda-uploader-file-view__single:hover {
-  text-decoration: underline;
-}

package/src/web/components/uploaderFileView/index.jsx

@@ -1,84 +0,0 @@
-import * as React from 'react';
-import { UploadFilePc } from '../form/uploaderFile/uploadFile.pc';
-import { UploadFileH5 } from '../form/uploaderFile/uploadFile.h5';
-import {
-  filterStrList,
-  isCloudFileID,
-  downloadFile,
-  usePlatform,
-  transFileCloudidToName,
-} from '../../utils/platform';
-import { getTempFileURL } from '../../utils/tcb';
-import './index.css';
-
-const CLASS_PREFIX = 'weda-uploader-file-view';
-
-/**
- * 上传文件回显，传showType强制展示某端样式，否则根据平台自动判断
- */
-export default function UploaderFileView({
-  value,
-  className,
-  single = true, // 展示为单行 a 标签
-  showType, // 展示端为 pc 还是 h5 样式
-  ...rest
-}) {
-  const fileIDList = filterStrList(value);
-  if (single) {
-    return <FileView fileID={fileIDList[0]} />;
-  } else {
-    const platform = usePlatform();
-    const showTypeMix = showType ? (showType === 'h5' ? 'h5' : 'pc') : platform;
-    const uploadFileProps = {
-      ...rest,
-      className: `${CLASS_PREFIX} ${className}`,
-      decorator: null,
-      labelVisible: false,
-      value: fileIDList,
-      isEdit: false,
-    };
-    return showTypeMix === 'pc' ? (
-      <UploadFilePc {...uploadFileProps} />
-    ) : (
-      <UploadFileH5 {...uploadFileProps} />
-    );
-  }
-}
-
-/**
- * 单个文件回显，用在表格里面
- */
-const FileView = ({ fileID }) => {
-  const [src, setSrc] = React.useState('');
-
-  React.useEffect(() => {
-    const fetchFileId = async (id) => {
-      if (isCloudFileID(id)) {
-        try {
-          const fileSrc = await getTempFileURL(id);
-          setSrc(fileSrc);
-        } catch (e) {}
-      } else {
-        setSrc(id);
-      }
-    };
-    fetchFileId(fileID);
-  }, [fileID]);
-
-  const title = React.useMemo(() => {
-    if (isCloudFileID(fileID)) {
-      return transFileCloudidToName(fileID);
-    } else {
-      return fileID;
-    }
-  }, [fileID]);
-  return (
-    <a
-      title={title}
-      onClick={() => downloadFile(src)}
-      className={`${CLASS_PREFIX}__single`}
-    >
-      {title}
-    </a>
-  );
-};

package/src/web/components/uploaderView/index.css

@@ -1,31 +0,0 @@
-.g-uploader-view {
-  margin: 0;
-  padding: 0;
-}
-
-.g-uploader-view .g-uploader-view__image-list {
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.g-uploader-view .g-uploader-view__image-box {
-  height: 100px;
-  width: 100px;
-  margin-right: 8px;
-  margin-bottom: 8px;
-  background: #f2f2f2;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.g-uploader-view .g-uploader-view__empty {
-  padding: 8px;
-  background-image: url('https://main.qcloudimg.com/raw/c85c9a875e9754545ee19f20438b2caa.svg');
-}
-
-.g-uploader-view .g-uploader-view__image {
-  width: 100%;
-  height: auto;
-  max-height: 100%;
-}

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

@@ -1,92 +0,0 @@
-import * as React from 'react';
-import * as PropTypes from 'prop-types';
-import { TcbImage } from '../form/uploader/uploader.pc';
-import classNames from '../../utils/classnames';
-import './index.css';
-import { CommonPropsType } from '../../types';
-
-const CLASS_PREFIX = 'g-uploader-view';
-
-/**
- * 图片上传-展示组件
- */
-export default function UploaderView({
-  srcList, // 兼容 cloud:和https: 协议，兼容 字符串和字符串数组
-  alt = '[加载失败]',
-  gutter = 8,
-  height = 100,
-  width = 100,
-  events = {},
-  isZoom = true,
-  isEmptyPlace = true,
-  className,
-  id,
-  style,
-}: PropsType) {
-  const cls = classNames({
-    [CLASS_PREFIX]: true,
-    [className]: className,
-  });
-
-  // 成功事件，返回加载成功的链接
-  const [successList, setSuccessList] = React.useState([]);
-  // 失败事件，返回加载失败的链接
-  const [errorList, setErrorList] = React.useState([]);
-
-  React.useEffect(() => {
-    events.load && events.load({ success: successList, error: errorList });
-  }, [successList, errorList]);
-
-  const boxStyle = {
-    marginRight: gutter,
-    marginBottom: gutter,
-    height: height,
-    width: width,
-  };
-
-  const values = []
-    .concat(srcList)
-    .filter((d) => typeof d === 'string' && d !== '');
-
-  return (
-    <div className={cls} id={id} style={style}>
-      <div className={`${CLASS_PREFIX}__image-list`}>
-        {values.map((d, i) => {
-          const imgProps = {
-            fileID: d,
-            className: `${CLASS_PREFIX}__image`,
-            alt: alt,
-            isZoom,
-            onLoad: () => setSuccessList((list) => [...list, d]),
-            onError: () => setErrorList((list) => [...list, d]),
-          };
-          return (
-            <div
-              className={`${CLASS_PREFIX}__image-box`}
-              key={`${d}-${i}`}
-              style={boxStyle}
-              title={d}
-            >
-              <TcbImage {...imgProps} />
-            </div>
-          );
-        })}
-        {values.length === 0 && isEmptyPlace && (
-          <div className={`${CLASS_PREFIX}__image-box`} style={boxStyle}>
-            <img className={`${CLASS_PREFIX}__image`} alt="暂无图片" />
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
-
-export interface PropsType extends CommonPropsType {
-  srcList?: string[] | string;
-  alt?: string; // 替代文字
-  isZoom?: boolean; // 能否点击放大
-  gutter?: number; // 图片间距
-  height?: number; // 图片最大高度
-  width?: number; // 图片最大宽度
-  isEmptyPlace?: boolean; // 是否显示空值
-}

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

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

package/src/web/components/wedaVideo/index.css

@@ -1,42 +0,0 @@
-.weda-ui_video {
-  height: 500px;
-  overflow: hidden;
-  background-color: #000;
-  position: relative;
-}
-
-.weda-ui_video-h5 {
-  height: 250px;
-}
-
-.weda-ui_video_control .vjs-control-bar {
-  background: none !important;
-}
-
-.weda-ui_video__video-wrap {
-  padding-top: 0 !important;
-  height: 100% !important;
-}
-
-.vjs-paused .vjs-big-play-button,
-.vjs-paused.vjs-has-started .vjs-big-play-button {
-  display: block;
-}
-
-.vjs-slider-vertical .vjs-volume-level:before {
-  left: -0.5em !important;
-}
-
-.weda-ui_video__video-loading {
-  position: absolute;
-  z-index: 100;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  background-color: #000;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #fff;
-}