@cloudbase/weda-ui 0.2.11 → 0.2.12

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

@@ -0,0 +1,562 @@
+import * as React from 'react';
+import * as PropTypes from 'prop-types';
+import { useSyncValue } from '../../../utils/useSyncValue';
+import isObjectEqual from '../../../utils/isObjectEqual';
+import weui from '../../../utils/weui';
+import {
+  Upload,
+  ConfigProvider,
+  Button,
+  message,
+  Icon,
+  Text,
+  List,
+  Progress,
+  Tooltip,
+} from 'tea-component';
+import { v4 } from 'uuid';
+import {
+  filterStrList,
+  isCloudFileID,
+  isHttpFileID,
+  transSize,
+  downloadFile,
+} 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,
+  defaultValue,
+  uploadPath = 'weda-uploader',
+  single = true,
+  onChange = null,
+}) {
+  //const [inputValue, setInputValue] = useSyncValue(defaultValue, isObjectEqual);
+  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}
+  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 });
+    }
+    events?.success?.({ value: pureFileIDList });
+  }, [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((list) => [...list, fileID]);
+    } else {
+      fileID && setfileIDList((list) => list.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,
+          events,
+          fileSizeObj,
+        }}
+      >
+        <div data-testid="uploadFileH5" className={cls} id={id} style={style}>
+          <div className={classNames(`${CLASS_PREFIX}`)}>
+            <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'] = v4()));
+                        setFileList((list) => [...list, ...fileList]);
+                      }}
+                    />
+                    <a
+                      type="weak"
+                      className="wedatea2td-btn wedatea2td-btn--weak"
+                    >
+                      点击上传
+                    </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}
+                        uploadPath={uploadPath}
+                        events={events}
+                        onChange={handleChange}
+                      />
+                    }
+                  </List.Item>
+                ))}
+              </List>
+            </div>
+          </div>
+        </div>
+      </FileContext.Provider>
+    </ConfigProvider>
+  )({
+    id,
+    className: cls,
+    style,
+    label: labelVisible ? label : null,
+    layout,
+    multiCell: false,
+    requiredFlag,
+  });
+}
+
+UploadFileH5.propTypes = {
+  layout: PropTypes.oneOf(['horizontal', 'vertical']),
+  className: PropTypes.string, // 传入类
+  label: PropTypes.string, // 官方属性：标题
+  tips: PropTypes.string, // 官方属性：提示
+  btnTitle: PropTypes.string, // 官方属性：上传按钮标题
+  maxUploadCount: PropTypes.number, // 官方属性：上传文件最大数量，作用于 数组，用 single 控制数组还是单个对象
+  deleteVisible: PropTypes.bool,
+  downloadVisible: PropTypes.bool,
+  disabled: PropTypes.bool,
+  defaultValue: PropTypes.oneOfType([PropTypes.array, PropTypes.string]),
+  maxSize: PropTypes.number, // 官方属性：单个图片大小限制，单位是M
+  value: PropTypes.oneOfType([PropTypes.array, PropTypes.string]), // 官方属性：值
+  events: PropTypes.objectOf(PropTypes.func), // 事件
+  uploadPath: PropTypes.string, // 上传路径
+  single: PropTypes.bool, // 单张上传还是多张上传，对应 onChange 参数为字符串还是字符串数组，value 在处理过程统一转为字符串数组
+  onChange: PropTypes.objectOf(PropTypes.func), // 配合 fomily 受控使用
+};
+
+/**
+ * 基于 FileID 文件回显组件
+ */
+const TcbFileEcho = ({
+  fileID,
+  fileList,
+  onChange,
+  deleteVisible,
+  downloadVisible,
+}) => {
+  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)) {
+      const uuidReg = /file-[0-9a-f]{8}(-[0-9a-f]{4}){3}-[0-9a-f]{12}-/;
+      const lastIndex = `${fileID}`.lastIndexOf('/');
+      const name = `${fileID}`.slice(lastIndex + 1);
+      const label = name.replace(uuidReg, '');
+      return label;
+    } 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}
+          downloadVisible={downloadVisible}
+          deleteVisible={deleteVisible}
+          onChange={onChange}
+        />
+      </div>
+    </div>
+  );
+};
+
+/**
+ * 基于 File 上传文件过程组件
+ */
+const TcbFileUpload = ({
+  file,
+  uploadPath,
+  onChange,
+  downloadVisible,
+  deleteVisible,
+  events,
+}) => {
+  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}/${`file-${uuid}-${title}`}`,
+        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}
+          downloadVisible={downloadVisible}
+          deleteVisible={deleteVisible}
+          onChange={onChange}
+          onCancel={(uuid) => {
+            cancleRef.current = uuid;
+            onChange?.({ type: 'delete', uuid });
+          }}
+          onReLoad={handleUpload}
+        />
+      </div>
+    </div>
+  );
+};
+
+/**
+ * 上传文件状态组件
+ */
+const UploadFileStatus = ({
+  status = 'UPLOAD_STATUS_SUCCESS',
+  percent = 0,
+  size,
+  title = null,
+  percentSize = 0,
+}) => {
+  //上传中、待上传状态
+  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>
+        <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>
+      <div className={`${CLASS_PREFIX}__file-foot`}>
+        <div>
+          <Text>{size}</Text>
+        </div>
+      </div>
+    </>
+  );
+};
+
+/**
+ * 操作列组件, onChange 从最外层 UploadFilePc 传进来
+ * props: { status, fileID, uuid, src, onChange }
+ */
+const UploadFileAction = ({
+  status = 'UPLOAD_STATUS_PENDING',
+  fileID = '',
+  uuid = '',
+  src = '',
+  downloadVisible = true,
+  deleteVisible = true,
+  file = null,
+  onChange = null,
+  onReLoad = null,
+  onCancel = null,
+}) => {
+  // 操作列按钮-删除
+  const renderDelete = () => (
+    <Icon
+      type="delete"
+      style={{ cursor: 'pointer' }}
+      onClick={() => onChange?.({ fileID, uuid, type: 'delete' })}
+    />
+  );
+
+  // 操作列按钮-取消
+  const renderCancel = () => (
+    <Icon
+      type="dismiss"
+      style={{ cursor: 'pointer' }}
+      onClick={() => onCancel?.(uuid)}
+    />
+  );
+
+  // 操作列按钮-重新上传
+  const renderReLoad = () => (
+    <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;
+  }
+};