@cloudbase/weda-ui 2.0.27 → 3.1.1

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

@@ -1,520 +0,0 @@
-import * as React from 'react';
-import {
-  Upload,
-  ConfigProvider,
-  Button,
-  message,
-  Icon,
-  Text,
-  List,
-} from 'tea-component';
-import {
-  filterStrList,
-  isCloudFileID,
-  isHttpFileID,
-  transSize,
-  downloadFile,
-  cutFileTitle,
-  transFileCloudidToName,
-  randomUuid,
-} from '../../../utils/platform';
-import { getCloudInstance, getTempFileURL } from '../../../utils/tcb';
-import classNames from '../../../utils/classnames';
-import { renderDecorator } from '../renderDecorator';
-import type { CommonFormPropsType } from '../types';
-import isObjectEqual from '../../../utils/isObjectEqual';
-
-// 默认组件类前缀
-const CLASS_PREFIX = 'weda-upload-file-pc';
-
-// 上传状态字典
-const statusMap = {
-  0: { title: '待上传', icon: 'pending-gray' },
-  1: { title: '上传 ...', icon: 'loading' },
-  2: { title: '上传成功', icon: 'success' },
-  3: { title: '上传失败', icon: 'error' },
-};
-
-// 上传文件Context
-const FileContext = React.createContext(null);
-
-/**
- * 上传文件 PC 版本
- */
-export function UploadFilePc({
-  // 系统属性
-  layout,
-  id = '',
-  style = {},
-  labelVisible = true,
-  label = '上传文件',
-  requiredFlag = false,
-  disabled = false,
-  className = '',
-  events = { success: null, error: null, change: null },
-  // 组件属性
-  decorator,
-  tips = '',
-  btnTitle = '点击上传',
-  maxUploadCount = 9,
-  maxSize = 1024,
-  single = true,
-  defaultValue = [], // 组件默认初始化值
-  value = [], // 用于模型组件中 formily 的值管理
-  acceptTypes = [],
-  downloadVisible = true,
-  deleteVisible = true,
-  uploadPath = 'weda-uploader',
-  onChange = null,
-  isEdit = true,
-}: IUploaderFilePc) {
-  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] || '';
-      onChange?.(file);
-      events?.change?.({ value: file });
-    } else {
-      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,
-    [className]: className,
-  });
-
-  // 批量上传文件前置事件
-  const handleBefore = (file, fileList, isAccepted, error) => {
-    if (fileList.length + fileIDList.length > maxUploadCount) {
-      message.warning({ content: `上传文件总数不能超过${maxUploadCount}个` });
-      return false;
-    }
-    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;
-    }
-    file['_uuid'] = randomUuid();
-    setFileList((list) => [...list, file]);
-    return false;
-  };
-
-  // 上传后文件列表 fileIDList 改变事件，'add'|'delete'
-  const handleChange = ({ fileID, uuid, type, size }) => {
-    // 上传时新增事件
-    if (type === 'add') {
-      fileID && setFileSizeObj((obj) => ({ ...obj, [fileID]: size }));
-      fileID && setfileIDList((list) => [...list, fileID]);
-    } else {
-      fileID && setfileIDList((list) => list.filter((d) => d !== fileID));
-    }
-    uuid && setFileList((list) => list.filter((item) => uuid !== item?._uuid));
-  };
-
-  // 上传组件属性
-  const uploadProps = { multiple: !single };
-  if (
-    !(
-      !acceptTypes?.length ||
-      acceptTypes?.includes('*') ||
-      acceptTypes?.includes('')
-    )
-  ) {
-    uploadProps['accept'] = Array.from(new Set(acceptTypes));
-  }
-  tips && (uploadProps['title'] = tips);
-  maxSize && (uploadProps['maxSize'] = maxSize * 1024 * 1024);
-  const btnDisabled =
-    fileIDList.length >= maxUploadCount || (single && fileIDList.length > 0);
-
-  return renderDecorator(
-    <ConfigProvider classPrefix="wedatea2td">
-      <FileContext.Provider
-        value={{
-          uploadPath,
-          downloadVisible,
-          deleteVisible,
-          onChange: handleChange,
-          isEdit,
-          events,
-          fileSizeObj,
-        }}
-      >
-        <div className={`${CLASS_PREFIX}`}>
-          {isEdit && (
-            <div className={`${CLASS_PREFIX}__input-box`}>
-              {disabled || btnDisabled ? (
-                <Button type="weak" disabled={true}>
-                  {btnTitle}
-                </Button>
-              ) : (
-                <Upload {...uploadProps} beforeUpload={handleBefore}>
-                  <Button type="weak" className={`${CLASS_PREFIX}__btn--weak`}>
-                    {btnTitle}
-                  </Button>
-                  {!single && (
-                    <Text
-                      theme="weak"
-                      className={`${CLASS_PREFIX}__btn-descripe`}
-                    >
-                      支持批量上传
-                    </Text>
-                  )}
-                </Upload>
-              )}
-            </div>
-          )}
-          <List split="divide">
-            <List.Item>
-              <div
-                className={`${CLASS_PREFIX}--item ${CLASS_PREFIX}--item-header`}
-              >
-                <div
-                  className={`${CLASS_PREFIX}--item-title ${CLASS_PREFIX}--item-label`}
-                >
-                  文件名
-                </div>
-                <div
-                  className={`${CLASS_PREFIX}--item-size ${CLASS_PREFIX}--item-label`}
-                >
-                  大小
-                </div>
-                <div
-                  className={`${CLASS_PREFIX}--item-status ${CLASS_PREFIX}--item-label`}
-                >
-                  状态
-                </div>
-                <div className={`${CLASS_PREFIX}--item-action`}>操作</div>
-              </div>
-            </List.Item>
-
-            {fileIDList.map((d) => (
-              <List.Item key={d}>{<TcbFileEcho fileID={d} />}</List.Item>
-            ))}
-
-            {fileList.map((item) => (
-              <List.Item key={item?._uuid}>
-                {<TcbFileUpload file={item} />}
-              </List.Item>
-            ))}
-
-            {isEdit && fileIDList.length === 0 && fileList.length === 0 && (
-              <List.Item className={`${CLASS_PREFIX}--item-empty`}>
-                <div className={`${CLASS_PREFIX}--item`}>
-                  点击上方“{btnTitle}”按钮
-                </div>
-              </List.Item>
-            )}
-          </List>
-        </div>
-      </FileContext.Provider>
-    </ConfigProvider>,
-    decorator
-  )({
-    id,
-    className: cls,
-    style,
-    label: labelVisible ? label : null,
-    layout,
-    multiCell: false,
-    requiredFlag,
-  });
-}
-
-export interface IUploaderFilePc extends CommonFormPropsType {
-  btnTitle?: string;
-  maxUploadCount?: number;
-  downloadVisible?: boolean;
-  deleteVisible?: boolean;
-  defaultValue?: string | string[];
-  maxSize?: number;
-  single?: boolean;
-  acceptTypes?: any[];
-  tips?: string;
-  value?: string | string[];
-  uploadPath?: string;
-  isEdit?: boolean;
-  onChange?: Function;
-}
-
-interface ITcbFileEcho {
-  fileID?: string;
-}
-
-/**
- * 基于 FileID 回显文件表格行组件
- */
-const TcbFileEcho = ({ fileID }: ITcbFileEcho) => {
-  const [src, setSrc] = React.useState('');
-  const { fileSizeObj } = React.useContext(FileContext) || {};
-  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 (
-    <div className={`${CLASS_PREFIX}--item ${CLASS_PREFIX}--item-body`}>
-      <div className={`${CLASS_PREFIX}--item-title`} title={title}>
-        {cutFileTitle(title)}
-      </div>
-      <div className={`${CLASS_PREFIX}--item-size`}>
-        {fileSizeObj[fileID] || '--'}
-      </div>
-      <div className={`${CLASS_PREFIX}--item-status`}>
-        <UploadFileStatus />
-      </div>
-      <div className={`${CLASS_PREFIX}--item-action`}>
-        <UploadFileAction status="2" fileID={fileID} src={src} />
-      </div>
-    </div>
-  );
-};
-
-interface ITcbFileUpload {
-  file?: any;
-}
-
-/**
- * 基于 File 上传文件过程表格行组件
- */
-const TcbFileUpload = ({ file }: ITcbFileUpload) => {
-  const { uploadPath, onChange, events } = React.useContext(FileContext) || {};
-  const [percent, setPercent] = React.useState(0); // 上传进度
-  const [status, setStatus] = React.useState('0'); // 上传状态
-  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(() => {
-    handleUpload(file);
-  }, [file?._uuid]);
-
-  // 上传过程
-  const handleUpload = async (file) => {
-    const tcb = await getCloudInstance();
-    try {
-      setStatus('0');
-      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('1');
-          setPercent(percent < 100 ? percent : 100);
-        },
-      });
-      !cancleRef.current && onChange?.({ fileID, type: 'add', uuid, size });
-      setStatus('2');
-    } catch (e) {
-      setStatus('3');
-      events.error && events.error(e);
-    }
-  };
-
-  return (
-    <div className={`${CLASS_PREFIX}--item ${CLASS_PREFIX}--item-body`}>
-      <div className={`${CLASS_PREFIX}--item-title`} title={title}>
-        {cutFileTitle(title)}
-      </div>
-      <div className={`${CLASS_PREFIX}--item-size`}>{size}</div>
-      <div className={`${CLASS_PREFIX}--item-status`}>
-        <UploadFileStatus status={status} percent={percent} />
-      </div>
-      <div className={`${CLASS_PREFIX}--item-action`}>
-        <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;
-}
-
-/**
- * 上传文件状态组件
- */
-const UploadFileStatus = ({ status = '2', percent = 0 }: IUploadFileStatus) => {
-  if (status == '1' && percent) {
-    return (
-      <>
-        <Icon type="loading" />
-        上传{percent}% ...
-      </>
-    );
-  }
-  return (
-    <>
-      <Icon type={statusMap[status]?.icon || statusMap['0'].icon} />
-      {statusMap[status]?.title || statusMap['0'].title}
-    </>
-  );
-};
-
-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 = '0',
-  fileID = '',
-  uuid = '',
-  src = '',
-  file = null,
-  onReLoad = null,
-  onCancel = null,
-}: IUploadFileAction) => {
-  const { onChange, downloadVisible, deleteVisible, isEdit } =
-    React.useContext(FileContext) || {};
-
-  // 操作列按钮-删除
-  const renderDelete = () =>
-    isEdit &&
-    deleteVisible && (
-      <Button
-        type="link"
-        onClick={() => onChange?.({ fileID, uuid, type: 'delete' })}
-      >
-        删除
-      </Button>
-    );
-
-  // 操作列按钮-取消
-  const renderCancel = () =>
-    isEdit && (
-      <Button onClick={() => onCancel?.(uuid)} type="link">
-        取消
-      </Button>
-    );
-
-  // 操作列按钮-重新上传
-  const renderReLoad = () =>
-    isEdit && (
-      <Button
-        type="link"
-        onClick={() => {
-          onReLoad?.(file);
-        }}
-      >
-        重新上传
-      </Button>
-    );
-
-  // 操作列按钮-下载
-  const renderDownLoad = () =>
-    downloadVisible && (
-      <Button
-        type="link"
-        title="点击下载文件"
-        onClick={() => downloadFile(src)}
-      >
-        下载
-      </Button>
-    );
-
-  switch (status) {
-    case '0':
-      return renderCancel();
-    case '1':
-      return renderCancel();
-    case '2':
-      return (
-        <>
-          {renderDelete()}
-          {renderDownLoad()}
-        </>
-      );
-    case '3':
-      return (
-        <>
-          {renderDelete()}
-          {renderReLoad()}
-        </>
-      );
-    default:
-      return null;
-  }
-};