@cloudbase/weda-ui 2.0.26 → 3.1.0

package/src/web/components/form/uploader/uploader.pc.tsx

@@ -1,287 +0,0 @@
-import * as React from 'react';
-import {
-  Upload,
-  Button,
-  Icon,
-  message,
-  ErrorTip,
-  ImagePreview,
-  ConfigProvider,
-} from 'tea-component';
-import classNames from '../../../utils/classnames';
-import { getCloudInstance, getTempFileURL } from '../../../utils/tcb';
-import { isCloudFileID, randomUuid } from '../../../utils/platform';
-import isObjectEqual from '../../../utils/isObjectEqual';
-import { H5UploaderProps } from './uploader.h5';
-// 默认组件类前缀
-export const CLASS_PREFIX = 'weda-uploader-pc';
-// 默认图片类型
-export const IMAGE_TYPES = [
-  'image/jpg',
-  'image/png',
-  'image/tif',
-  'image/bmp',
-  'image/jpeg',
-  'image/tiff',
-];
-
-/**
- * 上传图片-官方组件
- */
-// eslint-disable-next-line react/prop-types
-export function UploaderPC({
-  layout,
-  className,
-  id,
-  style,
-  title,
-  tips,
-  ...props
-}) {
-  const cls = classNames({
-    'weda-ui': true,
-    [CLASS_PREFIX]: true,
-    [layout]: layout,
-    [className]: className,
-  });
-  return (
-    <div className={cls} id={id} style={style}>
-      <div className={`${CLASS_PREFIX}__header`}>
-        {title && <div className={`${CLASS_PREFIX}__title`}>{title}</div>}
-        {tips && (
-          <div className={`${CLASS_PREFIX}__description`}>{tips || ''}</div>
-        )}
-      </div>
-      <UploaderPCInner {...props} />
-    </div>
-  );
-}
-
-export function UploaderPCInner(props) {
-  let {
-    tips = '',
-    btnTitle = '上传图片',
-    maxUploadCount = 9,
-    maxSize = 10,
-    value: defaultValue, // 需要兼容 cloud:和https: 协议，需要兼容 字符串和字符串数组
-    acceptTypes = IMAGE_TYPES,
-    uploadPath = 'weda-uploader',
-    uploadFileName = 'image',
-    events = {},
-    single = false,
-    onChange,
-  } = props;
-
-  // 上传中
-  const [uploading, setUploading] = React.useState(false);
-  //上传进度
-  const [progress, setProgress] = React.useState(0);
-  // 文件列表
-  const [fileIDList, setfileIDList] = React.useState([]);
-  const fileRef = React.useRef(['']);
-  React.useEffect(() => {
-    let initialValue = []
-      .concat(defaultValue)
-      .filter((d) => typeof d === 'string' && d !== '');
-    if (single) {
-      initialValue = initialValue[0] ? [initialValue[0]] : [];
-    }
-    setfileIDList(initialValue);
-  }, [defaultValue]);
-
-  // 值变化事件
-  React.useEffect(() => {
-    if (!isObjectEqual(fileRef.current, fileIDList)) {
-      if (single) {
-        const file = fileIDList[0] || '';
-        onChange && onChange(file);
-        events.change && events.change({ value: file });
-      } else {
-        onChange && onChange(fileIDList);
-        events.change && events.change({ value: fileIDList });
-      }
-      fileRef.current = fileIDList;
-    }
-  });
-
-  // 方法：上传前，判断图片大小、数量是否满足，取消默认组件的上传事件，用自定义的 tcb 上传方法
-  const beforeHandle = (file, fileList, isAccepted, error) => {
-    if (!isAccepted) {
-      try {
-        const errorList = [];
-        if (error.find((item) => item?.code === 'file-invalid-type')) {
-          errorList.push('上传图片类型错误');
-        }
-        if (error.find((item) => item?.code === 'file-too-large')) {
-          errorList.push(`上传图片大小不能超过${maxSize}M`);
-        }
-        message.error({ content: errorList.join(', ') });
-      } catch (e) {}
-      return false;
-    }
-    uploadTcb(file);
-    return false;
-  };
-
-  // 自定义上传到 Tcb 的 COS
-  const uploadTcb = (file) => {
-    setUploading(true);
-    getCloudInstance().then(async (tcb) => {
-      try {
-        const fileType = file.type.split('/')?.[1];
-        const cloudPath = `${uploadPath}/${randomUuid()}-${file?.name}`;
-        const { fileID } = await tcb.uploadFile({
-          cloudPath,
-          filePath: file,
-          onUploadProgress: onProgress,
-        });
-        fileID && setfileIDList((list) => [...list, fileID]);
-        fileID && events.success && events.success({ value: fileID, file });
-      } catch (err) {
-        message.error({ content: `${err}` || '上传失败' });
-        events.error && events.error(err);
-      } finally {
-        setUploading(false);
-        setProgress(0);
-      }
-    });
-  };
-
-  // 计算上传进度
-  const onProgress = (progressEvent) => {
-    let percentCompleted = 0;
-    try {
-      percentCompleted = Math.round(
-        (progressEvent.loaded * 100) / progressEvent.total
-      );
-      percentCompleted < 100 ? percentCompleted : 100;
-    } catch (e) {}
-    setProgress(percentCompleted);
-  };
-
-  // 删除图片
-  const deleteHandle = (fileID) => {
-    setfileIDList((list) => list.filter((d) => d !== fileID));
-  };
-
-  // 转换后的属性
-  const extraProps = {};
-  extraProps['accept'] =
-    acceptTypes.includes('image/*') || acceptTypes.length === 0
-      ? IMAGE_TYPES
-      : Array.from(new Set(acceptTypes));
-  tips && (extraProps['title'] = tips);
-  maxSize && (extraProps['maxSize'] = maxSize * 1024 * 1024);
-
-  return (
-    <ConfigProvider classPrefix="wedatea2td">
-      <div className="_weda-fn-upload-result">
-        {fileIDList.map((d) => (
-          <div className="_weda-fn-upload-result__item" key={d}>
-            <TcbImage fileID={d} />
-            <div className="_weda-fn-upload-result__op">
-              <Button
-                onClick={() => deleteHandle(d)}
-                className={`${CLASS_PREFIX}__btn`}
-              >
-                删除
-              </Button>
-            </div>
-          </div>
-        ))}
-        {uploading && (
-          <div className="_weda-fn-upload-result__item">
-            <div className="_weda-fn-upload-result__status" key="_place_image">
-              <Icon type="loading" />
-              {!!progress && (
-                <span className="wedatea2td-mt-1n wedatea2td-text-label wedatea2td-fz-reset">
-                  上传{progress}%...
-                </span>
-              )}
-            </div>
-          </div>
-        )}
-        <div className={`${CLASS_PREFIX}__input-box`}>
-          {(fileIDList.length < maxUploadCount ||
-            (single && fileIDList.length < 1)) && ( // single 模式时，仅当数组为空时显示
-            <Upload {...extraProps} beforeUpload={beforeHandle}>
-              <li className="_weda-fn-upload-result__item _weda-fn-upload-result__item--upload">
-                <div className="_weda-fn-upload-result__status">
-                  <i
-                    className="wedatea2td-icon wedatea2td-icon-plus"
-                    role="img"
-                    aria-label="plus"
-                  ></i>
-                  <span className="wedatea2td-mt-1n wedatea2td-text-label wedatea2td-fz-reset">
-                    {btnTitle}
-                  </span>
-                </div>
-              </li>
-            </Upload>
-          )}
-        </div>
-      </div>
-    </ConfigProvider>
-  );
-}
-
-export interface TcbImageProps {
-  fileID?: string; // 云存储id
-  isZoom?: boolean; // 是否点击放大
-  onError?: (e: any) => void; // 图片显示错误事件
-}
-export const TcbImage = (props: TcbImageProps) => {
-  const { fileID, isZoom, ...rest } = props;
-  const [src, setSrc] = React.useState('');
-  const [isError, setIsError] = React.useState(false);
-  React.useEffect(() => {
-    const getSrc = async () => {
-      try {
-        const _src = await getTempFileURL(fileID);
-        _src ? setSrc(_src) : setIsError(true);
-      } catch (e) {
-        message.error({ content: '图片加载失败' });
-      }
-    };
-    isCloudFileID(fileID) ? getSrc() : setSrc(fileID);
-  }, [fileID]);
-
-  return isError ? (
-    <ErrorTip />
-  ) : src ? (
-    isZoom ? (
-      <ImagePreview
-        key={fileID}
-        className={`${CLASS_PREFIX}__image`}
-        {...rest}
-        src={src}
-        previewSrc={src}
-        /** @ts-expect-error tea imagepreview onError */
-        onError={(e) => {
-          setIsError(true);
-          props?.onError && props.onError(e);
-        }}
-      />
-    ) : (
-      <img
-        key={fileID}
-        className={`${CLASS_PREFIX}__image`}
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        {...rest}
-        src={src}
-        onError={(e) => {
-          setIsError(true);
-          props?.onError && props.onError(e);
-        }}
-      />
-    )
-  ) : null;
-};
-
-export interface PropsType extends H5UploaderProps {
-  tips?: string;
-  value: string | string[];
-  btnTitle?: string;
-  uploadPath?: string;
-  uploadFileName?: string;
-}

package/src/web/components/form/uploaderFile/fail.svg

@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="16px" height="16px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>1.Bace基础/3.Icon图标/操作/move</title>
-    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="画板" transform="translate(-104.000000, -210.000000)">
-            <g id="1.Bace基础/3.Icon图标/操作/move" transform="translate(103.000000, 209.000000)">
-                <path d="M0,0 L16,0 L16,16 L0,16 L0,0 Z" id="close-circle-filled-(Background)"></path>
-                <path d="M8,1 C4.13400912,1 1,4.13400483 1,8 C1,11.8659916 4.13400483,15 8,15 C11.8659916,15 15,11.8659954 15,8 C15,4.13400912 11.8659954,1 8,1 Z M8.00001192,7.29075146 L10.3291178,4.94753814 L11.0383558,5.65250731 L8.70499325,8 L11.0383472,10.3474894 L10.3291082,11.0524578 L8.00001144,8.70925426 L5.6709156,11.0524578 L4.9616766,10.3474884 L7.29503059,8 L4.96166778,5.65250683 L5.67090654,4.94753814 L8.00001192,7.29075146 Z" id="close-circle-filled" fill="#E34D59"></path>
-            </g>
-        </g>
-    </g>
-</svg>

package/src/web/components/form/uploaderFile/index.css

@@ -1,422 +0,0 @@
-.weda-uploader-pc {
-  margin: 0;
-  padding: 0;
-}
-
-.weda-uploader-pc .weda-uploader-pc__title {
-  color: #000000;
-  line-height: 20px;
-  font-weight: 400;
-  margin-bottom: 4px;
-}
-
-/* 单张图片回显 */
-.weda-uploader-pc .weda-uploader-pc__image-box {
-  height: 100px;
-  width: 100px;
-  margin-right: 8px;
-  margin-bottom: 8px;
-  background: #f2f2f2;
-  position: relative;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-}
-
-.weda-uploader-pc .weda-uploader-pc__body {
-  margin-bottom: 8px;
-}
-
-.weda-uploader-pc .weda-uploader-pc__input-box {
-  margin-bottom: 8px;
-}
-.weda-uploader-pc.cloudbase_standard .weda-uploader-pc__body {
-  margin-bottom: 0px;
-}
-
-.weda-uploader-pc.cloudbase_standard .weda-uploader-pc__input-box {
-  margin-bottom: 0px;
-}
-.weda-uploader-pc.cloudbase_standard .weda-uploader-pc__image-list {
-  margin-left: 8px;
-}
-
-.weda-uploader-pc .weda-uploader-pc__image-box:hover .weda-uploader-pc__action {
-  display: flex;
-}
-
-.weda-uploader-pc .weda-uploader-pc__image {
-  max-height: 100%;
-  height: auto;
-  width: 100%;
-  cursor: zoom-in;
-}
-
-.weda-uploader-pc .weda-uploader-pc__action {
-  display: none;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  justify-content: center;
-  align-items: center;
-  background-color: rgba(0, 0, 0, 0.6);
-}
-
-.weui-uploader.horizontal {
-  display: flex;
-}
-.weui-uploader.horizontal .weui-uploader__hd {
-  display: inline-block;
-  align-self: center;
-}
-.weda-uploader-pc.horizontal {
-  display: flex;
-  justify-content: space-between;
-}
-
-/* ----上传文件----  pc */
-.weda-upload-file-pc .weda-upload-file-pc__file-item {
-  display: flex;
-  flex-wrap: nowrap;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.weda-upload-file-pc .weda-upload-file-pc__btn-descripe {
-  margin-left: 16px;
-  font-size: 0.75em;
-  line-height: 20px;
-  color: rgba(0, 0, 0, 0.4);
-}
-
-.weda-upload-file-pc .wedatea2td-list--divider > li {
-  padding: 0 !important;
-}
-
-.weda-upload-file-pc .wedatea2td-list--divider > li:nth-child(n + 2) {
-  border-top: 0;
-  border-bottom: 1px solid #e7e7e7;
-}
-
-.weda-upload-file-pc .weda-upload-file-pc--item {
-  display: flex;
-  font-size: 0.875em;
-}
-
-.weda-upload-file-pc .weda-upload-file-pc--item-header {
-  border: 1px solid #e7e7e7;
-  font-size: 0.875em;
-  line-height: 1.375em;
-  color: rgba(0, 0, 0, 0.4);
-  margin-top: 16px;
-}
-
-.weda-upload-file-pc .weda-upload-file-pc--item-body {
-  border-left: 1px dashed #e7e7e7;
-  border-right: 1px dashed #e7e7e7;
-  font-size: 0.875em;
-  line-height: 1.375em;
-  color: rgba(0, 0, 0, 0.9);
-}
-
-.weda-upload-file-pc
-  .weda-upload-file-pc--item-header
-  .weda-upload-file-pc--item-label {
-  border-right: 1px solid #e7e7e7;
-}
-
-.weda-upload-file-pc
-  .weda-upload-file-pc--item
-  .weda-upload-file-pc--item-title {
-  width: 220px;
-  padding: 10px 12px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.weda-upload-file-pc
-  .weda-upload-file-pc--item
-  .weda-upload-file-pc--item-size {
-  width: 100px;
-  padding: 10px 12px;
-}
-
-.weda-upload-file-pc
-  .weda-upload-file-pc--item
-  .weda-upload-file-pc--item-status {
-  width: 150px;
-  padding: 10px 12px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.weda-upload-file-pc
-  .weda-upload-file-pc--item
-  .weda-upload-file-pc--item-action {
-  width: 160px;
-  padding: 10px 12px;
-}
-
-.weda-upload-file-pc .weda-upload-file-pc__btn--weak {
-  border-color: #dcdcdc;
-  color: rgba(0, 0, 0, 0.9);
-  width: 88px;
-  font-size: 0.875em;
-}
-
-.weda-upload-file-pc
-  .weda-upload-file-pc--item
-  .weda-upload-file-pc--item-status
-  .wedatea2td-icon {
-  margin-right: 8px;
-}
-
-.weda-upload-file-pc
-  .weda-upload-file-pc--item
-  .weda-upload-file-pc--item-status
-  .wedatea2td-icon.wedatea2td-icon-pending-gray {
-  background-image: url(./pending.svg);
-}
-
-.weda-upload-file-pc
-  .weda-upload-file-pc--item
-  .weda-upload-file-pc--item-action
-  .wedatea2td-btn {
-  font-size: 0.875em;
-  line-height: 1.375em;
-  color: #0052d9;
-  margin-right: 12px;
-}
-
-.weda-upload-file-pc
-  .weda-upload-file-pc--item
-  .weda-upload-file-pc--item-action
-  .wedatea2td-btn:last-child {
-  margin-right: 0;
-}
-
-.weda-upload-file-pc .weda-upload-file-pc--item-empty {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 169px;
-  background: #ffffff;
-  border: 1px dashed #dcdcdc !important;
-  border-top: none !important;
-  border-radius: 0 0 2px 2px;
-}
-
-.weda-upload-file-pc
-  .weda-upload-file-pc--item-empty
-  .weda-upload-file-pc--item {
-  font-size: 0.875em;
-  color: rgba(0, 0, 0, 0.4);
-  line-height: 1.375em;
-}
-
-/* ----上传文件----  h5 */
-.weda-upload-file-mobile {
-  width: 90%;
-  background-color: #f6f6f6;
-}
-
-.weda-upload-file-mobile .weda-upload-file-mobile__hd {
-  width: 100%;
-  padding: 16px;
-  padding-left: 0;
-  display: flex;
-  background-color: #fff;
-}
-.weda-upload-file-mobile .vertical {
-  padding: 0 20px 8px 20px;
-}
-.weda-upload-file-mobile .weda-upload-file-mobile__title {
-  font-size: 0.875em;
-  line-height: 1.25em;
-  color: #000;
-  margin-right: 20px;
-  padding-top: 6px;
-}
-
-.weda-upload-file-mobile .weda-upload-file-mobile__btn--weak {
-  width: 88px;
-  padding: 0 16px;
-  font-size: 0.875em;
-  color: rgba(0, 0, 0, 0.9);
-  border: 1px solid #dcdcdc;
-  border-radius: 3px;
-  line-height: 1.375em;
-}
-
-.weda-upload-file-mobile .weda-upload-file-mobile__tips {
-  display: block;
-  margin-top: 8px;
-  font-size: 0.75em;
-  line-height: 1.25em;
-  color: rgba(0, 0, 0, 0.4);
-}
-
-.weda-upload-file-mobile .weda-upload-file-mobile__bd {
-  margin-top: 8px;
-}
-
-.weda-upload-file-mobile .weda-upload-file-mobile__bd .wedatea2td-list > li {
-  margin-bottom: 8px;
-}
-
-.weda-upload-file-mobile .weda-upload-file-mobile__item {
-  width: 100%;
-  padding: 16px;
-  background-color: #fff;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  box-sizing: border-box;
-}
-
-.weda-upload-file-mobile .weda-upload-file-mobile__btn-group {
-  display: flex;
-}
-
-.weda-upload-file-mobile .weda-upload-file-mobile__item .wedatea2td-icon {
-  width: 24px;
-  height: 24px;
-  margin-right: 16px;
-}
-
-.weda-upload-file-mobile
-  .weda-upload-file-mobile__btn-group
-  .wedatea2td-icon:last-child {
-  margin-right: 0;
-}
-
-.weda-upload-file-mobile
-  .weda-upload-file-mobile__item
-  .wedatea2td-icon.wedatea2td-icon-delete {
-  background-image: url('https://imgcache.qq.com/qcloud/tcloud_dtc/static/static_source_business/2372f6a8-2f6a-4f30-92bf-73c62a5c0ae7.svg');
-}
-
-.weda-upload-file-mobile
-  .weda-upload-file-mobile__item
-  .wedatea2td-icon.wedatea2td-icon-download {
-  background-image: url('https://imgcache.qq.com/qcloud/tcloud_dtc/static/static_source_business/4cba5da1-cde4-40c6-a075-86eff22858a4.svg');
-}
-
-.weda-upload-file-mobile
-  .weda-upload-file-mobile__item
-  .wedatea2td-icon.wedatea2td-icon-refresh {
-  background-image: url('https://imgcache.qq.com/qcloud/tcloud_dtc/static/static_source_business/af5486eb-65e0-4536-8e51-6c68a17b71ac.svg');
-}
-
-.weda-upload-file-mobile
-  .weda-upload-file-mobile__item
-  .weda-upload-file-mobile__item-left {
-  flex: 1;
-  margin-right: 16px;
-  width: 70%;
-}
-
-.weda-upload-file-mobile
-  .weda-upload-file-mobile__item
-  .weda-upload-file-mobile__file-detail {
-  display: flex;
-  align-items: center;
-}
-
-.weda-upload-file-mobile
-  .weda-upload-file-mobile__item
-  .weda-upload-file-mobile__file-name {
-  font-size: 0.875em;
-  line-height: 1.375em;
-  color: rgba(0, 0, 0, 0.9);
-  max-width: 6.5rem;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.weda-upload-file-mobile
-  .weda-upload-file-mobile__item
-  .weda-upload-file-mobile__file-status {
-  margin-left: 24px;
-  display: flex;
-}
-
-.weda-upload-file-mobile
-  .weda-upload-file-mobile__item
-  .weda-upload-file-mobile__file-status
-  .wedatea2td-icon {
-  width: 16px;
-  height: 16px;
-  background-size: 100% 100%;
-  margin-right: 0;
-}
-.weda-upload-file-mobile
-  .weda-upload-file-mobile__item
-  .weda-upload-file-mobile__file-status
-  .wedatea2td-icon.wedatea2td-icon-fail {
-  background-image: url(./fail.svg);
-}
-.weda-upload-file-mobile
-  .weda-upload-file-mobile__item
-  .weda-upload-file-mobile__file-status
-  .wedatea2td-icon.wedatea2td-icon-success {
-  background-image: url(./success.svg);
-}
-.weda-upload-file-mobile
-  .weda-upload-file-mobile__item
-  .weda-upload-file-mobile__file-status--msg {
-  width: 4.2rem;
-  margin-left: 4px;
-  font-size: 0.75em;
-  line-height: 1.25em;
-  color: rgba(0, 0, 0, 0.9);
-}
-
-.weda-upload-file-mobile
-  .weda-upload-file-mobile__item
-  .weda-upload-file-mobile__file-foot {
-  font-size: 0.75em;
-  line-height: 1.25em;
-  color: rgba(0, 0, 0, 0.4);
-  margin-top: 8px;
-  display: flex;
-  justify-content: space-between;
-}
-
-.weda-upload-file-mobile
-  .weda-upload-file-mobile__item
-  .weda-upload-file-mobile__file-progress {
-  margin-top: 4px;
-  border-radius: 0;
-  background-color: #e7e7e7;
-  height: 3px !important;
-  margin-bottom: 0;
-}
-
-.weda-upload-file-mobile
-  .weda-upload-file-mobile__item
-  .weda-upload-file-mobile__file-progress
-  .wedatea2td-progress__value {
-  border-radius: 0;
-  height: 3px !important;
-}
-
-.weda-upload-file-mobile
-  .weda-upload-file-mobile__item
-  .weda-upload-file-mobile__file-progress
-  .wedatea2td-progress__text {
-  display: none;
-}
-.weda-upload-file-mobile .weui-uploader-mobile__input {
-  position: absolute;
-  font-size: 1em;
-  opacity: 0;
-  width: 92px;
-  height: 32px;
-}