@cloudbase/weda-ui 2.0.28 → 3.1.2

package/src/web/components/form/uploaderFile/uploadFile.h5.tsx

@@ -1,606 +0,0 @@
-import * as React from 'react';
-import weui from '../../../utils/weui';
-import type { CommonFormPropsType } from '../types';
-import isObjectEqual from '../../../utils/isObjectEqual';
-import {
-  ConfigProvider,
-  Button,
-  Icon,
-  Text,
-  List,
-  Progress,
-  Tooltip,
-} from 'tea-component';
-import {
-  filterStrList,
-  isCloudFileID,
-  isHttpFileID,
-  transSize,
-  downloadFile,
-  transFileCloudidToName,
-  randomUuid,
-} from '../../../utils/platform';
-import { getCloudInstance, getTempFileURL } from '../../../utils/tcb';
-import classNames from '../../../utils/classnames';
-import { renderDecorator } from '../renderDecorator';
-// 默认组件类前缀
-const CLASS_PREFIX = 'weda-upload-file-mobile';
-// 默认图片类型
-export const FILES_TYPES = [
-  '.doc',
-  '.docx',
-  '.xml',
-  'application/msword',
-  'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
-];
-// 上传状态字典
-const statusMap = {
-  UPLOAD_STATUS_PENDING: { title: '等待上传', icon: 'pending' },
-  UPLOAD_STATUS_LOADING: { title: '上传中', icon: 'loading' },
-  UPLOAD_STATUS_SUCCESS: { title: '上传成功', icon: 'success' },
-  UPLOAD_STATUS_ERROR: { title: '上传失败', icon: 'error' },
-};
-// 上传文件Context
-const FileContext = React.createContext(null);
-/**
- * 上传文件 H5 版本
- */
-export function UploadFileH5({
-  // 系统属性
-  layout,
-  id = '',
-  style = { margin: '0,-5px' },
-  labelVisible = true,
-  label = '上传文件',
-  requiredFlag = false,
-  disabled = false,
-  className = '',
-  acceptTypes = [],
-  // 组件属性
-  tips = '',
-  btnTitle = '点击上传',
-  maxUploadCount = 9,
-  maxSize = 10,
-  deleteVisible = true,
-  downloadVisible = true,
-  value = [], // 需要兼容 cloud:和https: 协议，需要兼容字符串和字符串数组
-  events = { success: null, error: null, change: null },
-  defaultValue,
-  uploadPath = 'weda-uploader',
-  single = true,
-  onChange = null,
-  isEdit = true,
-}: IUploadFileH5) {
-  const [fileIDList, setfileIDList] = React.useState(
-    filterStrList([].concat(defaultValue, value))
-  ); // 上传成功文件ID列表，fileID[]
-  const [fileList, setFileList] = React.useState([]); // 上传中的文件列表，file[]，file为原始文件 + uuid属性
-  const [fileSizeObj, setFileSizeObj] = React.useState({}); // 管理上传文件大小 {uuid:size}
-  // 两次默认值不同, 需要刷新
-  const prevDefaultRef = React.useRef<any>([]);
-  const fileRef = React.useRef(fileIDList);
-  React.useMemo(() => {
-    //有有效默认值时不刷新，解决初次渲染默认值不显示问题
-    if (
-      defaultValue &&
-      !isObjectEqual(prevDefaultRef.current, defaultValue) &&
-      (JSON.stringify(prevDefaultRef.current) == '[]' ||
-        !prevDefaultRef.current)
-    ) {
-      prevDefaultRef.current = defaultValue;
-      setfileIDList(filterStrList([].concat(defaultValue)));
-    }
-  }, [defaultValue]);
-  React.useEffect(() => {
-    // 外部 onChange 事件
-    const pureFileIDList = fileIDList.filter(
-      (d) => isCloudFileID(d) || isHttpFileID(d)
-    );
-    if (single) {
-      const file = pureFileIDList[0] || '';
-      file && onChange && onChange(file);
-      events?.change?.({ value: file });
-    } else {
-      onChange && onChange(pureFileIDList);
-      events?.change?.({ value: pureFileIDList });
-    }
-    if (!isObjectEqual(fileRef.current, fileIDList)) {
-      events?.success?.({ value: pureFileIDList });
-      fileRef.current = fileIDList;
-    }
-  }, [fileIDList]);
-
-  // 外层组件类
-  const cls = classNames({
-    'weda-ui': true,
-    //'weui-cells': true,
-    //'weui-cells_form': true,
-    'weui-cells_checkbox': true,
-    [className]: className,
-  });
-  const accepts = React.useMemo(() => {
-    return acceptTypes.includes('*') || acceptTypes.length === 0
-      ? ['*']
-      : Array.from(new Set(acceptTypes));
-  }, [acceptTypes]);
-
-  // 上传后文件列表 fileIDList 改变事件，'add'|'delete'
-  const handleChange = ({ fileID, uuid, type, size }) => {
-    // 上传时新增事件
-    if (type === 'add') {
-      fileID && setFileSizeObj((obj) => ({ ...obj, [fileID]: size }));
-      fileID && setfileIDList([...fileIDList, fileID]);
-    } else {
-      fileID && setfileIDList(fileIDList.filter((f) => f !== fileID));
-    }
-    uuid && setFileList((list) => list.filter((item) => uuid !== item?._uuid));
-  };
-
-  // 上传组件属性
-  const uploadProps = {
-    multiple: !single,
-  };
-  tips && (uploadProps['label'] = tips);
-  maxSize && (uploadProps['maxSize'] = maxSize * 1024 * 1024);
-  const btnDisabled =
-    fileIDList.length >= maxUploadCount ||
-    (single && fileIDList.length > 0) ||
-    disabled;
-
-  return renderDecorator(
-    <ConfigProvider classPrefix="wedatea2td">
-      <FileContext.Provider
-        value={{
-          uploadPath,
-          downloadVisible,
-          deleteVisible,
-          onChange: handleChange,
-          isEdit,
-          events,
-          fileSizeObj,
-        }}
-      >
-        <div data-testid="uploadFileH5" className={cls} id={id} style={style}>
-          <div className={classNames(`${CLASS_PREFIX}`)}>
-            {isEdit && (
-              <div className={classNames(`${CLASS_PREFIX}__hd`, layout)}>
-                <div>
-                  {btnDisabled ? (
-                    <Button
-                      type="weak"
-                      className={classNames(`${CLASS_PREFIX}__btn--weak`)}
-                      disabled={btnDisabled}
-                    >
-                      {btnTitle}
-                    </Button>
-                  ) : (
-                    <div>
-                      <input
-                        id="uploaderInput"
-                        type="file"
-                        data-testid="button-up"
-                        className="weui-uploader-mobile__input"
-                        accept={accepts.join(',')}
-                        multiple={!single}
-                        onChange={(e) => {
-                          const fileList = [...e.target.files];
-                          if (single && fileList.length > 1) {
-                            weui.alert(`上传文件总数不能超过1个`);
-                            return false;
-                          }
-                          if (
-                            fileList.length + fileIDList.length >
-                            maxUploadCount
-                          ) {
-                            weui.alert(
-                              `上传文件总数不能超过${maxUploadCount}个`
-                            );
-                            return false;
-                          }
-                          if (
-                            maxSize &&
-                            fileList.some((f) => f.size > maxSize * 1024 * 1024)
-                          ) {
-                            weui.alert(`请上传不超过${maxSize}M的文件`);
-                            return false;
-                          }
-                          if (
-                            fileList.some((f) => f.size > 1024 * 1024 * 1024)
-                          ) {
-                            weui.alert(`请上传不超过1024M的文件`);
-                            return false;
-                          }
-                          fileList.forEach((f) => (f['_uuid'] = randomUuid()));
-                          setFileList((list) => [...list, ...fileList]);
-                        }}
-                      />
-                      <a
-                        type="weak"
-                        className="wedatea2td-btn wedatea2td-btn--weak"
-                        style={{ fontSize: '1em' }}
-                      >
-                        点击上传
-                      </a>
-                      {!single && (
-                        <Text className={`${CLASS_PREFIX}__tips`}>
-                          支持批量上传
-                        </Text>
-                      )}
-                    </div>
-                  )}
-                </div>
-              </div>
-            )}
-            <div className={`${CLASS_PREFIX}__bd`}>
-              <List>
-                {fileIDList.map((d) => (
-                  <List.Item key={d}>
-                    {
-                      <TcbFileEcho
-                        fileID={d}
-                        fileList={fileList}
-                        onChange={handleChange}
-                        deleteVisible={deleteVisible}
-                        downloadVisible={downloadVisible}
-                      />
-                    }
-                  </List.Item>
-                ))}
-                {fileList.map((item) => (
-                  <List.Item key={item?._uuid}>
-                    {
-                      <TcbFileUpload
-                        file={item}
-                        downloadVisible={downloadVisible}
-                        deleteVisible={deleteVisible}
-                      />
-                    }
-                  </List.Item>
-                ))}
-              </List>
-            </div>
-          </div>
-        </div>
-      </FileContext.Provider>
-    </ConfigProvider>
-  )({
-    id,
-    className: cls,
-    style,
-    label: labelVisible ? label : null,
-    layout,
-    multiCell: false,
-    requiredFlag,
-  });
-}
-export interface IUploadFileH5 extends CommonFormPropsType {
-  className?: string; // 传入类
-  label?: string; // 官方属性：标题
-  tips?: string; // 官方属性：提示
-  btnTitle?: string; // 官方属性：上传按钮标题
-  maxUploadCount?: number; // 官方属性：上传文件最大数量，作用于 数组，用 single 控制数组还是单个对象
-  deleteVisible?: boolean;
-  downloadVisible?: boolean;
-  acceptTypes?: any[];
-  disabled?: boolean;
-  defaultValue?: string | string[];
-  maxSize?: number; // 官方属性：单个图片大小限制，单位是M
-  value?: string | string[]; // 官方属性：值
-  uploadPath?: string; // 上传路径
-  single?: boolean; // 单张上传还是多张上传，对应 onChange 参数为字符串还是字符串数组，value 在处理过程统一转为字符串数组
-  onChange?: (v: any) => void; // 配合 fomily 受控使用
-  isEdit: boolean; // 当前是编辑态还是展示态，展示态会去掉删除等按钮
-}
-
-/**
- * 基于 FileID 文件回显组件
- */
-const TcbFileEcho = ({
-  fileID,
-  fileList,
-  onChange,
-  deleteVisible,
-  downloadVisible,
-}: ITcbFileEcho) => {
-  const [src, setSrc] = React.useState('');
-  const { fileSizeObj } = React.useContext(FileContext) || {};
-  const size = '--';
-  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 label = React.useMemo(() => {
-    if (isCloudFileID(fileID)) {
-      return transFileCloudidToName(fileID);
-    } else {
-      return fileID;
-    }
-  }, [fileID]);
-  //上传文件列表展示
-  return (
-    <div className={`${CLASS_PREFIX}__item`}>
-      <div className={`${CLASS_PREFIX}__item-left`}>
-        <UploadFileStatus title={label} size={fileSizeObj[fileID] || '--'} />
-      </div>
-      <div className={`${CLASS_PREFIX}__btn-group`}>
-        <UploadFileAction
-          status="UPLOAD_STATUS_SUCCESS"
-          fileID={fileID}
-          src={src}
-        />
-      </div>
-    </div>
-  );
-};
-interface ITcbFileEcho {
-  fileID?: string;
-  fileList?: any;
-  file?: any;
-  onChange?: Function;
-  deleteVisible?: boolean;
-  downloadVisible?: boolean;
-}
-interface ITcbFileUpload {
-  file?: any;
-  downloadVisible?: boolean;
-  deleteVisible?: boolean;
-}
-/**
- * 基于 File 上传文件过程组件
- */
-const TcbFileUpload = ({
-  file,
-  downloadVisible,
-  deleteVisible,
-}: ITcbFileUpload) => {
-  const { uploadPath, onChange, events } = React.useContext(FileContext) || {};
-  const [percent, setPercent] = React.useState(0); // 上传进度
-  const [status, setStatus] = React.useState('UPLOAD_STATUS_PENDING'); // 上传状态
-  const cancleRef = React.useRef(''); // 取消的uuid
-
-  // 上传文件相关属性
-  const { size, title, uuid } = React.useMemo(() => {
-    const size = transSize(file?.size);
-    const title = file?.name || '';
-    const uuid = file?._uuid;
-    return { size, title, uuid };
-  }, [file?._uuid]);
-
-  React.useEffect(() => {
-    const test = handleUpload(file);
-  }, [file?._uuid]);
-
-  // 上传过程
-  const handleUpload = async (file) => {
-    const tcb = await getCloudInstance();
-    try {
-      setStatus('UPLOAD_STATUS_PENDING');
-      const { fileID } = await tcb.uploadFile({
-        cloudPath: `${uploadPath}/${randomUuid()}-${file?.name}`,
-        filePath: file,
-        onUploadProgress: (progressEvent) => {
-          let percent = 0;
-          percent = Math.round(
-            (progressEvent.loaded * 100) / progressEvent.total
-          );
-          setStatus('UPLOAD_STATUS_LOADING');
-          setPercent(percent < 100 ? percent : 100);
-        },
-      });
-      !cancleRef.current && onChange?.({ fileID, type: 'add', uuid, size });
-      setStatus('UPLOAD_STATUS_SUCCESS');
-    } catch (err) {
-      setStatus('UPLOAD_STATUS_ERROR');
-      events?.error?.(err);
-    }
-  };
-
-  return (
-    <div className={`${CLASS_PREFIX}__item`} role="TcbFileUpload">
-      <div className={`${CLASS_PREFIX}__item-left`}>
-        <UploadFileStatus
-          status={status}
-          percent={percent}
-          size={size}
-          title={title}
-          percentSize={((file?.size / 1024) * percent) / 100}
-        />
-      </div>
-      <div className={`${CLASS_PREFIX}__btn-group`}>
-        <UploadFileAction
-          file={file}
-          uuid={file?._uuid}
-          status={status}
-          onCancel={(uuid) => {
-            cancleRef.current = uuid;
-            onChange?.({ type: 'delete', uuid });
-          }}
-          onReLoad={handleUpload}
-        />
-      </div>
-    </div>
-  );
-};
-
-interface IUploadFileStatus {
-  status?: string;
-  percent?: number;
-  size?: any;
-  title?: string;
-  percentSize?: number;
-}
-/**
- * 上传文件状态组件
- */
-const UploadFileStatus = ({
-  status = 'UPLOAD_STATUS_SUCCESS',
-  percent = 0,
-  size,
-  title = null,
-  percentSize = 0,
-}: IUploadFileStatus) => {
-  const { isEdit } = React.useContext(FileContext) || {};
-  //上传中、待上传状态
-  if (
-    status == 'UPLOAD_STATUS_LOADING' ||
-    (status == 'UPLOAD_STATUS_PENDING' && percent)
-  ) {
-    return (
-      <>
-        <div className={`${CLASS_PREFIX}__file-detail`}>
-          <Text className={`${CLASS_PREFIX}__file-name`}>{title}</Text>
-          <div className={`${CLASS_PREFIX}__file-status`}>
-            <div className={`${CLASS_PREFIX}__file-status`}>
-              <Progress
-                percent={percent}
-                theme="default"
-                strokeColor={'#0052D9'}
-                className={`${CLASS_PREFIX}__file-progress`}
-              />
-            </div>
-          </div>
-        </div>
-        <div className={`${CLASS_PREFIX}__file-foot`}>
-          <div>
-            <Text>{`${Math.floor(percentSize)}K/`}</Text>
-
-            <Text>{size}</Text>
-          </div>
-          <Text>
-            {status === 'UPLOAD_STATUS_PENDING' ? '等待上传' : '上传中'}
-          </Text>
-        </div>
-      </>
-    );
-  }
-
-  return (
-    <>
-      <div className={`${CLASS_PREFIX}__file-detail`}>
-        <Tooltip title={title}>
-          <Text className={`${CLASS_PREFIX}__file-name`}>{title}</Text>
-        </Tooltip>
-        {isEdit && (
-          <div className={`${CLASS_PREFIX}__file-status`}>
-            <Icon
-              type={
-                statusMap[status]?.icon ||
-                statusMap['UPLOAD_STATUS_PENDING'].icon
-              }
-            ></Icon>
-            <Text className={`${CLASS_PREFIX}__file-status--msg`}>
-              {statusMap[status]?.title ||
-                statusMap['UPLOAD_STATUS_PENDING'].title}
-            </Text>
-          </div>
-        )}
-      </div>
-      {isEdit && (
-        <div className={`${CLASS_PREFIX}__file-foot`}>
-          <div>
-            <Text>{size}</Text>
-          </div>
-        </div>
-      )}
-    </>
-  );
-};
-
-interface IUploadFileAction {
-  status?: string;
-  fileID?: string;
-  uuid?: string;
-  src?: string;
-  file?: any;
-  onReLoad?: any;
-  onCancel?: any;
-}
-
-/**
- * 操作列组件, onChange 从最外层 UploadFilePc 传进来
- * props: { status, fileID, uuid, src, onChange }
- */
-const UploadFileAction = ({
-  status = 'UPLOAD_STATUS_PENDING',
-  fileID = '',
-  uuid = '',
-  src = '',
-  file = null,
-  onReLoad = null,
-  onCancel = null,
-}: IUploadFileAction) => {
-  const { onChange, downloadVisible, deleteVisible, isEdit } =
-    React.useContext(FileContext) || {};
-  // 操作列按钮-删除
-  const renderDelete = () =>
-    isEdit && (
-      <Icon
-        type="delete"
-        style={{ cursor: 'pointer' }}
-        onClick={() => onChange?.({ fileID, uuid, type: 'delete' })}
-      />
-    );
-
-  // 操作列按钮-取消
-  const renderCancel = () =>
-    isEdit && (
-      <Icon
-        type="dismiss"
-        style={{ cursor: 'pointer' }}
-        onClick={() => onCancel?.(uuid)}
-      />
-    );
-
-  // 操作列按钮-重新上传
-  const renderReLoad = () =>
-    isEdit && (
-      <Icon
-        type="refresh"
-        style={{ cursor: 'pointer' }}
-        onClick={() => {
-          onReLoad?.(file);
-        }}
-      />
-    );
-
-  // 操作列按钮-下载
-  const renderDownLoad = () => (
-    <Icon
-      type="download"
-      style={{ cursor: 'pointer' }}
-      onClick={() => downloadFile(src)}
-    />
-  );
-
-  switch (status) {
-    case 'UPLOAD_STATUS_PENDING':
-      return renderCancel();
-    case 'UPLOAD_STATUS_LOADING':
-      return renderCancel();
-    case 'UPLOAD_STATUS_SUCCESS':
-      return (
-        <>
-          {deleteVisible && renderDelete()}{' '}
-          {downloadVisible && renderDownLoad()}
-        </>
-      );
-    case 'UPLOAD_STATUS_ERROR':
-      return (
-        <>
-          {deleteVisible && renderDelete()} {renderReLoad()}
-        </>
-      );
-    default:
-      return null;
-  }
-};