@cloudbase/weda-ui 0.2.13 → 0.2.16

package/src/web/components/form/uploaderFile/{uploadFile.h5.jsx → uploadFile.h5.tsx}

@@ -1,8 +1,9 @@
 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 { CommonFormPropsType } from '../types';
+import SparkMD5 from 'spark-md5';
+
 import {
   Upload,
   ConfigProvider,
@@ -21,6 +22,7 @@ import {
   isHttpFileID,
   transSize,
   downloadFile,
+  transFileCloudidToName
 } from '../../../utils/platform';
 import { getCloudInstance, getTempFileURL } from '../../../utils/tcb';
 import classNames from '../../../utils/classnames';
@@ -67,13 +69,13 @@ export function UploadFileH5({
   deleteVisible = true,
   downloadVisible = true,
   value = [], // 需要兼容 cloud:和https: 协议，需要兼容字符串和字符串数组
-  events,
+  events = { success: null, error: null, change: null },
   defaultValue,
   uploadPath = 'weda-uploader',
   single = true,
   onChange = null,
-}) {
-  //const [inputValue, setInputValue] = useSyncValue(defaultValue, isObjectEqual);
+  isEdit = true,
+}: IUploadFileH5) {
   const [fileIDList, setfileIDList] = React.useState(
     filterStrList([].concat(defaultValue, value))
   ); // 上传成功文件ID列表，fileID[]
@@ -140,74 +142,81 @@ export function UploadFileH5({
           downloadVisible,
           deleteVisible,
           onChange: handleChange,
+          isEdit,
           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
+            {isEdit && (
+              <div className={classNames(`${CLASS_PREFIX}__hd`, layout)}>
+                <div>
+                  {btnDisabled ? (
+                    <Button
                       type="weak"
-                      className="wedatea2td-btn wedatea2td-btn--weak"
+                      className={classNames(`${CLASS_PREFIX}__btn--weak`)}
+                      disabled={btnDisabled}
                     >
-                      点击上传
-                    </a>
-                    {!single && (
-                      <Text className={`${CLASS_PREFIX}__tips`}>
-                        支持批量上传
-                      </Text>
-                    )}
-                  </div>
-                )}
+                      {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>
+            )}
             <div className={`${CLASS_PREFIX}__bd`}>
               <List>
                 {fileIDList.map((d) => (
@@ -230,9 +239,6 @@ export function UploadFileH5({
                         file={item}
                         downloadVisible={downloadVisible}
                         deleteVisible={deleteVisible}
-                        uploadPath={uploadPath}
-                        events={events}
-                        onChange={handleChange}
                       />
                     }
                   </List.Item>
@@ -253,25 +259,24 @@ export function UploadFileH5({
     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 受控使用
-};
+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 文件回显组件
@@ -282,7 +287,7 @@ const TcbFileEcho = ({
   onChange,
   deleteVisible,
   downloadVisible,
-}) => {
+}: ITcbFileEcho) => {
   const [src, setSrc] = React.useState('');
   const { fileSizeObj } = React.useContext(FileContext) || {};
   const size = '--';
@@ -302,11 +307,7 @@ const TcbFileEcho = ({
   //上传文件名称
   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;
+      return transFileCloudidToName(fileID);
     } else {
       return fileID;
     }
@@ -322,26 +323,33 @@ const TcbFileEcho = ({
           status="UPLOAD_STATUS_SUCCESS"
           fileID={fileID}
           src={src}
-          downloadVisible={downloadVisible}
-          deleteVisible={deleteVisible}
-          onChange={onChange}
         />
       </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,
-  uploadPath,
-  onChange,
   downloadVisible,
   deleteVisible,
-  events,
-}) => {
+}: 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
@@ -363,20 +371,25 @@ const TcbFileUpload = ({
     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');
+      const fileReader = new FileReader();
+      fileReader.readAsBinaryString(file);
+      fileReader.onload = async function (e) {
+        const md5Path = SparkMD5.hashBinary(e.target.result);
+        const { fileID } = await tcb.uploadFile({
+          cloudPath: `${uploadPath}/${md5Path}-${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);
@@ -399,9 +412,6 @@ const TcbFileUpload = ({
           file={file}
           uuid={file?._uuid}
           status={status}
-          downloadVisible={downloadVisible}
-          deleteVisible={deleteVisible}
-          onChange={onChange}
           onCancel={(uuid) => {
             cancleRef.current = uuid;
             onChange?.({ type: 'delete', uuid });
@@ -413,6 +423,13 @@ const TcbFileUpload = ({
   );
 };
 
+interface IUploadFileStatus {
+  status?: string;
+  percent?: number;
+  size?: any;
+  title?: string;
+  percentSize?: number;
+}
 /**
  * 上传文件状态组件
  */
@@ -422,7 +439,8 @@ const UploadFileStatus = ({
   size,
   title = null,
   percentSize = 0,
-}) => {
+}: IUploadFileStatus) => {
+  const { isEdit } = React.useContext(FileContext) || {};
   //上传中、待上传状态
   if (
     status == 'UPLOAD_STATUS_LOADING' ||
@@ -463,6 +481,7 @@ const UploadFileStatus = ({
         <Tooltip title={title}>
           <Text className={`${CLASS_PREFIX}__file-name`}>{title}</Text>
         </Tooltip>
+        {isEdit && 
         <div className={`${CLASS_PREFIX}__file-status`}>
           <Icon
             type={
@@ -473,17 +492,27 @@ const UploadFileStatus = ({
             {statusMap[status]?.title ||
               statusMap['UPLOAD_STATUS_PENDING'].title}
           </Text>
-        </div>
+        </div>}
       </div>
-      <div className={`${CLASS_PREFIX}__file-foot`}>
+      {isEdit && <div className={`${CLASS_PREFIX}__file-foot`}>
         <div>
           <Text>{size}</Text>
         </div>
-      </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 }
@@ -493,41 +522,43 @@ const UploadFileAction = ({
   fileID = '',
   uuid = '',
   src = '',
-  downloadVisible = true,
-  deleteVisible = true,
   file = null,
-  onChange = null,
   onReLoad = null,
   onCancel = null,
-}) => {
+}: IUploadFileAction) => {
+  const { onChange, downloadVisible, deleteVisible, isEdit } =
+    React.useContext(FileContext) || {};
   // 操作列按钮-删除
-  const renderDelete = () => (
-    <Icon
-      type="delete"
-      style={{ cursor: 'pointer' }}
-      onClick={() => onChange?.({ fileID, uuid, type: 'delete' })}
-    />
-  );
+  const renderDelete = () =>
+    isEdit && (
+      <Icon
+        type="delete"
+        style={{ cursor: 'pointer' }}
+        onClick={() => onChange?.({ fileID, uuid, type: 'delete' })}
+      />
+    );
 
   // 操作列按钮-取消
-  const renderCancel = () => (
-    <Icon
-      type="dismiss"
-      style={{ cursor: 'pointer' }}
-      onClick={() => onCancel?.(uuid)}
-    />
-  );
+  const renderCancel = () =>
+    isEdit && (
+      <Icon
+        type="dismiss"
+        style={{ cursor: 'pointer' }}
+        onClick={() => onCancel?.(uuid)}
+      />
+    );
 
   // 操作列按钮-重新上传
-  const renderReLoad = () => (
-    <Icon
-      type="refresh"
-      style={{ cursor: 'pointer' }}
-      onClick={() => {
-        onReLoad?.(file);
-      }}
-    />
-  );
+  const renderReLoad = () =>
+    isEdit && (
+      <Icon
+        type="refresh"
+        style={{ cursor: 'pointer' }}
+        onClick={() => {
+          onReLoad?.(file);
+        }}
+      />
+    );
 
   // 操作列按钮-下载
   const renderDownLoad = () => (