@hzab/form-render-mobile 0.0.15 → 0.0.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hzab/form-render-mobile",
-  "version": "0.0.15",
+  "version": "0.0.16",
   "description": "formily-form-render-mobile",
   "main": "lib",
   "scripts": {

package/src/components/Uploader/common/checkFileType.ts

@@ -0,0 +1,39 @@
+import { checkImageUrl, checkVideoUrl, checkAudioUrl } from "./utils";
+
+export const TYPE_VIDEO = "video";
+export const TYPE_IMG = "img";
+export const TYPE_AUDIO = "audio";
+
+export function checkFileType(file) {
+  const { type, url = file?.ossUrl } = file || {};
+  let fileType = "";
+  // 判断文件类型，获取对应展示的数据
+  if (url) {
+    // 图片
+    if (url.startsWith("data:image/") || checkImageUrl(url)) {
+      fileType = TYPE_IMG;
+    } else if (checkVideoUrl(url)) {
+      // 视频
+      fileType = TYPE_VIDEO;
+    } else if (checkAudioUrl(url)) {
+      // 音频
+      fileType = TYPE_AUDIO;
+    }
+  } else if (type) {
+    // 图片
+    if (type?.startsWith("image/")) {
+      fileType = TYPE_IMG;
+    }
+
+    // 视频
+    if (type?.startsWith("video/")) {
+      fileType = TYPE_VIDEO;
+    }
+
+    // 音频
+    if (type?.startsWith("audio/")) {
+      fileType = TYPE_AUDIO;
+    }
+  }
+  return fileType;
+}

package/src/components/Uploader/{Image → components/Image}/index.less

@@ -22,15 +22,13 @@
   max-width: 100vw;
   max-height: 100vh;
   background-color: #000 !important;
+  overflow: auto;
   .image-previewer-mask-img {
-    max-width: 100vw;
-    max-height: 100vh;
-    width: 100vw;
   }
   .image-previewer-mask-close-btn {
-    position: absolute;
-    right: 2vw;
-    top: 1vh;
+    position: fixed;
+    right: 4vw;
+    top: 2vh;
     width: 5vw;
     height: 5vw;
     line-height: 5vw;

package/src/components/Uploader/components/ItemList/ItemRender.tsx

@@ -0,0 +1,22 @@
+import { CloseCircleFill } from "antd-mobile-icons";
+
+export const ItemRender = (props) => {
+  const { index, disabled, readOnly, onItemDel } = props;
+  return (
+    <div className="file-item">
+      {props.children}
+      {disabled || readOnly ? null : (
+        <div
+          className="file-item-del"
+          onClick={() => {
+            onItemDel(index);
+          }}
+        >
+          <CloseCircleFill fontSize={14} />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ItemRender;

package/src/components/Uploader/components/ItemList/index.tsx

@@ -0,0 +1,49 @@
+import { getFileURL } from "../../common/utils";
+
+import { TYPE_VIDEO, TYPE_IMG, TYPE_AUDIO, checkFileType } from "../../common/checkFileType";
+
+import Video from "../video";
+import Image from "../Image";
+import ItemRender from "./ItemRender";
+
+export const ItemList = (props) => {
+  const { fileList, baseUrl, disabled, readOnly, onItemDel } = props || {};
+
+  return (
+    <>
+      {fileList.map((it, idx) => {
+        if (!it) {
+          return null;
+        }
+        const { name, url = it?.ossUrl } = it || {};
+
+        let src = url || getFileURL(it);
+
+        if (baseUrl) {
+          src = baseUrl + src;
+        }
+
+        let content = it?.name;
+
+        const fileType = checkFileType(it);
+        if (fileType === TYPE_IMG) {
+          content = <Image className="file-item-view" src={src} alt={name} />;
+        }
+        if (fileType === TYPE_VIDEO) {
+          content = <Video src={src} href={src} />;
+        }
+        if (fileType === TYPE_AUDIO) {
+          content = <audio src={src} controls></audio>;
+        }
+
+        return (
+          <ItemRender index={idx} key={name + "_" + idx} disabled={disabled} readOnly={readOnly} onItemDel={onItemDel}>
+            {content}
+          </ItemRender>
+        );
+      })}
+    </>
+  );
+};
+
+export default ItemList;

package/src/components/Uploader/{video → components/video}/index.less

@@ -23,8 +23,8 @@
   }
   .video-mask-close-btn {
     position: absolute;
-    right: 2vw;
-    top: 1vh;
+    right: 4vw;
+    top: 2vh;
     width: 5vw;
     height: 5vw;
     line-height: 5vw;

package/src/components/Uploader/uploader.jsx

@@ -1,28 +1,17 @@
 import { useState, useRef, useEffect, useMemo } from "react";
 import { Button, Dialog, ActionSheet, Toast } from "antd-mobile";
-import { CloseCircleFill } from "antd-mobile-icons";
 import { nanoid } from "nanoid";
 
-import Video from "./video";
-import Image from "./Image";
+import Video from "./components/video";
+import Image from "./components/Image";
+import ItemList from "./components/ItemList";
 
 import { getImage, getVideo, getAudio } from "./common/cordova-camera";
-import {
-  getFileURL,
-  checkImageUrl,
-  checkVideoUrl,
-  checkAudioUrl,
-  handleMaxCount,
-  handleInputFileList,
-} from "./common/utils";
+import { handleMaxCount, handleInputFileList } from "./common/utils";
 import { handleOssUpload } from "./common/ossUpload";
 
 import "./uploader.less";
 
-const TYPE_VIDEO = "video";
-const TYPE_IMG = "img";
-const TYPE_AUDIO = "audio";
-
 const _ = require("lodash");
 
 function Uploader(props) {
@@ -50,6 +39,7 @@ function Uploader(props) {
     ossOpt,
     onCountExceed,
   } = props;
+  const [loading, setLoading] = useState(false);
   const [fileList, setFileList] = useState(handleInputFileList(value, maxCount));
   const [actionSheetVisible, setActionSheetVisible] = useState(false);
   useEffect(() => {
@@ -84,7 +74,9 @@ function Uploader(props) {
     });
     // 处理 oss 逻辑
     if (isOssUpload) {
+      setLoading(true);
       files = await handleOssUpload(files, { ...ossOpt, ossUrl });
+      setLoading(false);
     }
 
     e.target.value = ""; // HACK: fix the same file doesn't trigger onChange
@@ -182,11 +174,6 @@ function Uploader(props) {
     Dialog.confirm({
       content: "确认删除？",
       onConfirm: () => {
-        // setFileList((files) => {
-        //   files.splice(idx, 1);
-        //   handleChange(files, "del");
-        //   return files;
-        // });
         const middleValue = _.cloneDeep(fileList);
         middleValue.splice(idx, 1);
         handleChange(middleValue, "del");
@@ -195,25 +182,6 @@ function Uploader(props) {
     });
   }
 
-  function ItemRender(props) {
-    const { index } = props;
-    return (
-      <div className="file-item">
-        {props.children}
-        {disabled || readOnly ? null : (
-          <div
-            className="file-item-del"
-            onClick={() => {
-              onItemDel(index);
-            }}
-          >
-            <CloseCircleFill fontSize={14} />
-          </div>
-        )}
-      </div>
-    );
-  }
-
   const inputProps = {
     className: "aria-hidden",
     style: { display: "none" },
@@ -230,83 +198,13 @@ function Uploader(props) {
     <div className="uploader">
       <input {...inputProps} ref={uploaderRef}></input>
       <input {...inputProps} ref={audioUploaderRef} id={name + "-audio"} accept="audio/*"></input>
-      {fileList.map((it, idx) => {
-        if (!it) {
-          return null;
-        }
-        const { type, name, url = it?.ossUrl } = it || {};
-        let src = "";
-        let fileType = "";
-        let downLoadUrl = undefined;
-
-        // 判断文件类型，获取对应展示的数据
-        if (url) {
-          src = url;
-          // 图片
-          const isImg = checkImageUrl(src);
-          if (src.startsWith("data:image/") || isImg) {
-            fileType = TYPE_IMG;
-          } else if (checkVideoUrl(src)) {
-            // 视频
-            fileType = TYPE_VIDEO;
-          } else if (checkAudioUrl(src)) {
-            // 音频
-            fileType = TYPE_AUDIO;
-          }
-        } else {
-          // 图片
-          if (type?.startsWith("image/")) {
-            src = getFileURL(it);
-            fileType = TYPE_IMG;
-          }
-
-          // 视频
-          if (type?.startsWith("video/")) {
-            src = getFileURL(it);
-            fileType = TYPE_VIDEO;
-            // TODO: 确认下载逻辑
-            downLoadUrl = src;
-          }
-          if (type?.startsWith("audio/")) {
-            src = getFileURL(it);
-            fileType = TYPE_AUDIO;
-            // TODO: 确认下载逻辑
-            downLoadUrl = src;
-          }
-        }
-
-        if (baseUrl) {
-          src = baseUrl + src;
-        }
-
-        if (fileType === TYPE_IMG) {
-          return (
-            <ItemRender index={idx} key={name + "_" + idx}>
-              <Image className="file-item-view" src={src} alt={name} />
-            </ItemRender>
-          );
-        }
-        if (fileType === TYPE_VIDEO) {
-          return (
-            <ItemRender index={idx} key={name + "_" + idx}>
-              <Video src={src} href={downLoadUrl} />
-            </ItemRender>
-          );
-        }
-        if (fileType === TYPE_AUDIO) {
-          return (
-            <ItemRender index={idx} key={name + "_" + idx}>
-              <audio src={src} controls></audio>
-            </ItemRender>
-          );
-        }
-
-        return (
-          <ItemRender index={idx} key={name + "_" + idx}>
-            {it?.name}
-          </ItemRender>
-        );
-      })}
+      <ItemList
+        fileList={fileList}
+        baseUrl={isOssUpload ? baseUrl : ""}
+        disabled={disabled}
+        readOnly={readOnly}
+        onItemDel={onItemDel}
+      />
       {disabled || readOnly || (maxCount > 0 && fileList.length >= maxCount) ? null : (
         <>
           <Button
@@ -314,6 +212,7 @@ function Uploader(props) {
             onClick={() => {
               setActionSheetVisible(true);
             }}
+            loading={loading}
           >
             +
           </Button>