@cloudbase/weda-ui 0.2.17 → 0.2.21-alpha.1

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

@@ -1,255 +0,0 @@
-import * as React from 'react';
-import weui from '../../../utils/weui';
-import classNames from '../../../utils/classnames';
-import { getCloudInstance, getTempFileURL } from '../../../utils/tcb';
-import isObjectEqual from '../../../utils/isObjectEqual';
-import { useSyncValue } from '../../../utils/useSyncValue';
-import { isCloudFileID } from '../../../utils/platform';
-import { IMAGE_TYPES } from './uploader.pc';
-import { CommonFormPropsType } from '../types';
-import { v4 } from 'uuid';
-
-const uploadPath = 'weda-uploader';
-/**
- * H5端
- */
-export function ImageUploaderH5({
-  title,
-  maxUploadCount,
-  maxSize = 10,
-  acceptTypes,
-  className,
-  id,
-  events,
-  layout,
-  defaultValue,
-  single = false,
-  requiredFlag = false,
-  onChange,
-  style,
-}: H5UploaderProps) {
-  const cls = classNames({
-    'weda-ui': true,
-    'weui-cells': true,
-    'weui-cells_form': true,
-    [className]: className,
-  });
-
-  // 上传中
-  const [uploading, setUploading] = React.useState(false);
-  //上传进度
-  const [progress, setProgress] = React.useState(0);
-  const [inputValue, setInputValue] = useSyncValue(defaultValue, isObjectEqual);
-
-  const fileIdList = React.useMemo(() => {
-    //兼容h5默认值为空时情况
-    if (inputValue === null) {
-      setInputValue('');
-    }
-    if (typeof inputValue === 'string') {
-      // single = true 传入的是字符串
-      return [inputValue].filter((i) => i.length > 0); // 排除空串
-    }
-    if (Array.isArray(inputValue)) {
-      return inputValue;
-    }
-    return [];
-  }, [inputValue]);
-
-  const finalMaxImgCount = React.useMemo(() => {
-    if (single) return 1;
-    return maxUploadCount;
-  }, [single, maxUploadCount]);
-
-  const deleteFile = (url) => {
-    if (single) {
-      setInputValue('');
-      return;
-    }
-    // @ts-expect-error list should be array in not single mode
-    setInputValue((list: string[]) => list.filter((f) => f !== url));
-  };
-  React.useEffect(() => {
-    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 });
-    }
-  }, [fileIdList]);
-  const onProgress = (progressEvent) => {
-    let percentCompleted = 0;
-    try {
-      percentCompleted = Math.round(
-        (progressEvent.loaded * 100) / progressEvent.total
-      );
-      percentCompleted < 100 ? percentCompleted : 100;
-    } catch (e) {}
-    setProgress(percentCompleted);
-  };
-  const uploadToTcb = (file) => {
-    setUploading(true);
-    getCloudInstance().then(async (tcb) => {
-      try {
-        const fileType = file.type.split('/')?.[1];
-        const cloudPath = `${uploadPath}/${v4().replaceAll('-', '')}-${
-          file?.name
-        }`;
-        const { fileID } = await tcb.uploadFile({
-          cloudPath,
-          filePath: file,
-          onUploadProgress: onProgress,
-        });
-        // @ts-expect-error TODO
-        fileID && setInputValue((list) => [...list, fileID]);
-        fileID && events.success && events.success({ value: fileID, file });
-      } catch (err) {
-        events.error && events.error(err);
-      } finally {
-        setUploading(false);
-        setProgress(0);
-      }
-    });
-  };
-
-  const accepts = React.useMemo(() => {
-    return acceptTypes.includes('image/*') || acceptTypes.length === 0
-      ? IMAGE_TYPES
-      : Array.from(new Set(acceptTypes));
-  }, [acceptTypes]);
-
-  return (
-    <div className={cls} id={id} style={style}>
-      <div className="weui-cell">
-        <div className="weui-cell__bd">
-          <div className={classNames('weui-uploader', layout)}>
-            <div className={classNames('weui-uploader__hd', layout)}>
-              {requiredFlag && (
-                <label className="weda-formcells__flag">*</label>
-              )}
-              <p className="weui-uploader__title">{title}</p>
-              <div className="weui-uploader__info">
-                <span id="uploadCount">{fileIdList.length}</span>
-                {`/${finalMaxImgCount}`}
-              </div>
-            </div>
-            <div className="weui-uploader__bd">
-              <ul className="weui-uploader__files" id="uploaderFiles">
-                {(fileIdList ?? []).map((f) => (
-                  <SingleImage key={f} src={f} deleteBySrc={deleteFile} />
-                ))}
-                {uploading && (
-                  <li className="weui-uploader__file weui-uploader__file_status">
-                    <div className="weui-uploader__file-content">
-                      {progress}%
-                    </div>
-                  </li>
-                )}
-              </ul>
-              {(fileIdList.length < maxUploadCount ||
-                (single && fileIdList.length < 1)) && ( // single 模式时，仅当数组为空时显示
-                <div className="weui-uploader__input-box">
-                  <input
-                    id="uploaderInput"
-                    className="weui-uploader__input"
-                    type="file"
-                    accept={accepts.join(',')}
-                    multiple
-                    onChange={(e) => {
-                      const files = [...e.target.files];
-                      if (files.some((f) => f.size > maxSize * 1024 * 1024)) {
-                        weui.alert('请上传不超过10M的图片');
-                        return false;
-                      }
-
-                      if (files.length > finalMaxImgCount) {
-                        // 防止一下子选择过多文件
-                        weui.alert(
-                          `最多只能上传${finalMaxImgCount}张图片，请重新选择`
-                        );
-                        return false;
-                      }
-                      if (fileIdList.length + files.length > finalMaxImgCount) {
-                        weui.alert(`最多只能上传${finalMaxImgCount}张图片`);
-                        return false;
-                      }
-                      files.forEach((f) => uploadToTcb(f));
-                    }}
-                  />
-                </div>
-              )}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export interface SingleImageProps {
-  src: string;
-  deleteBySrc: (url: string) => void;
-}
-
-function SingleImage({ src, deleteBySrc }: SingleImageProps) {
-  const [error, setError] = React.useState(false);
-  const cls = classNames({
-    'weui-uploader__file': true,
-  });
-  const [realSrc, setRealSrc] = React.useState('');
-  React.useEffect(() => {
-    const getSrc = async () => {
-      try {
-        const _src = await getTempFileURL(src);
-        setRealSrc(_src);
-        return _src;
-      } catch (e) {
-        setError(true);
-        console.error('图片加载失败');
-      }
-    };
-    if (isCloudFileID(src)) {
-      getSrc();
-    } else {
-      setRealSrc(src);
-    }
-  }, [src]);
-  const imgStyle = {
-    backgroundImage: `url(${realSrc})`,
-  };
-  const showGallery = () => {
-    const gallery = weui.gallery(realSrc, {
-      onDelete: function () {
-        deleteBySrc(src);
-        gallery.hide();
-      },
-    });
-  };
-
-  return (
-    <li className={cls} style={imgStyle} onClick={showGallery}>
-      {error || status ? (
-        <div className="weui-uploader__file-content">
-          {error ? (
-            <i role="img" aria-label="错误" className="weui-icon-warn"></i>
-          ) : (
-            <i className="weui-loading" style={{ width: 30, height: 30 }}></i>
-          )}
-        </div>
-      ) : (
-        false
-      )}
-    </li>
-  );
-}
-export interface H5UploaderProps extends CommonFormPropsType {
-  title?: string;
-  maxSize?: number;
-  acceptTypes?: unknown[];
-  maxUploadCount?: number;
-  defaultValue?: string[] | string; // 初始值，该参数需配合 formily 使用;
-  single?: boolean; // 单张上传还是多张上传，对应 onChange 参数为字符串还是字符串数组，value 在处理过程统一转为字符串数组;
-  onChange?: (v: any) => void;
-}

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

@@ -1,290 +0,0 @@
-import * as React from 'react';
-import {
-  Upload,
-  Button,
-  Icon,
-  message,
-  ErrorTip,
-  ImagePreview,
-  ConfigProvider,
-} from 'tea-component';
-import { v4 } from 'uuid';
-import classNames from '../../../utils/classnames';
-import { getCloudInstance, getTempFileURL } from '../../../utils/tcb';
-import { isCloudFileID } 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(fileIDList);
-
-  React.useEffect(() => {
-    let initialValue = []
-      .concat(defaultValue)
-      .filter((d) => typeof d === 'string' && d !== '');
-    if (single) {
-      initialValue = initialValue[0] ? [initialValue[0]] : [];
-    }
-    setfileIDList(initialValue);
-  }, []);
-
-  // 值变化事件
-  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}/${v4().replaceAll('-', '')}-${
-          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 (e) {
-        events.error && events.error({ value: e, file });
-      } 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>