@hzab/form-render 0.0.2 → 0.1.0

package/src/components/Upload/README.md

@@ -0,0 +1,41 @@
+# Uploader
+
+上传组件——使用 antd upload 组件封装而成
+
+- 支持 oss 上传
+- 支持限制文件大小
+- 支持预览
+- 支持配置下载模板
+
+### InfoPanel Attributes
+
+- 参数参考 antd upload 组件
+
+| 参数                 | 类型     | 必填 | 默认值   | 说明                                                               |
+| -------------------- | -------- | ---- | -------- | ------------------------------------------------------------------ |
+| name                 | string   | 否   | file     | 文件名                                                             |
+| accept               | string   | 否   | -        | 接受上传的文件类型, 详见 input accept Attribute                    |
+| listType             | string   | 否   | text     | 上传列表的内建样式，支持三种基本样式 text, picture 和 picture-card |
+| maxCount             | number   | 否   | 1        | 限制上传数量。当为 1 时，始终用最新上传的文件代替当前文件          |
+| maxSize              | number   | 否   | 1        | 限制上传的文件大小。                                               |
+| multiple             | boolean  | 否   | -        | 是否支持多选文件，ie10+ 支持。开启后按住 ctrl 可选择多个文件       |
+| disabled             | boolean  | 否   | false    | 禁用状态                                                           |
+| readOnly             | boolean  | 否   | false    | 只读状态                                                           |
+| isResRemoveArr       | boolean  | 否   | false    | maxCount === 1 时，结果是否自动去除数组嵌套                        |
+| isOssUpload          | boolean  | 否   | false    | 是否使用 oss 上传                                                  |
+| ossUrl               | string   | 否   | -        | 获取 oss 参数的接口，默认 /api/v1/user/oss/getWebOssConfig         |
+| ossOpt               | Object   | 否   | -        | oss 上传的配置参数                                                 |
+| isStrRes             | boolean  | 否   | false    | 是否使用字符串结果（表单中得到的一直是 oss URl 字符串）            |
+| onCountExceed        | Function | 否   | -        | 数量超出 maxCount 时的回调                                         |
+| uploadProps          | Object   | 否   | -        | antd upload 组件的 props 参数，可覆盖组件已有配置项                |
+| templateUrl          | string   | 否   | -        | 模板下载的地址                                                     |
+| templateDownloadText | string   | 否   | 模板下载 | 模板下载按钮的文案                                                 |
+
+### ossOpt
+
+| 参数            | 类型   | 必填 | 默认值 | 说明                                                           |
+| --------------- | ------ | ---- | ------ | -------------------------------------------------------------- |
+| axios           | Object | 否   | -      | 发起请求的 axios                                               |
+| axiosConf       | Object | 否   | -      | axios 配置                                                     |
+| signatureParams | Object | 否   | -      | 请求 oss 上传地址接口的入参                                    |
+| serverUrl       | string | 否   | -      | 请求 oss 上传地址的接口，默认 /api/v1/user/oss/getWebOssConfig |

package/src/components/Upload/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/Upload/common/ossUpload.js

@@ -0,0 +1,155 @@
+import { axios } from "@hzab/data-model";
+import { nanoid } from "nanoid";
+
+export function getSignature(opt = {}) {
+  const { serverUrl = "/api/v1/user/oss/getWebOssConfig" } = opt;
+  // 减 10 秒，避免发起请求时 刚好过期的情况
+  if (
+    window.__ossSignatureRes &&
+    serverUrl === window.__ossSignatureRes.serverUrl &&
+    Date.now() - window.__ossSignatureRes.__saveTime < window.__ossSignatureRes.expireTimeMillis - 10000
+  ) {
+    return Promise.resolve(window.__ossSignatureRes);
+  }
+  const { axios: _ax = axios, params = {}, axiosConf } = opt;
+  return _ax
+    .get(serverUrl, {
+      ...axiosConf,
+      params: {
+        isPublic: 1,
+        ...params,
+      },
+    })
+    .then((res) => {
+      window.__ossSignatureRes = res?.data?.data;
+      if (window.__ossSignatureRes) {
+        window.__ossSignatureRes.__saveTime = Date.now();
+        window.__ossSignatureRes.serverUrl = serverUrl;
+      }
+      return window.__ossSignatureRes;
+    });
+}
+
+class OssUpload {
+  constructor(props = {}) {
+    this.axios = props.axios || axios;
+    this.axiosConf = props.axiosConf || {};
+    this.serverUrl = props.serverUrl || "/api/v1/user/oss/getWebOssConfig";
+    this.signatureParams = props.signatureParams || {};
+  }
+
+  getSignature(serverUrl = this.serverUrl, opt) {
+    return getSignature({
+      ...opt,
+      serverUrl,
+      axios: opt?.axios || this.axios,
+      axiosConf: { ...this.axiosConf, ...opt?.axiosConf },
+    });
+  }
+
+  upload(file, opt = {}) {
+    return new Promise(async (resolve, reject) => {
+      const ossParams = await this.getSignature(opt.serverUrl || this.serverUrl, {
+        ...opt,
+        params: { ...this.signatureParams, ...opt.signatureParams },
+      });
+
+      const { ossParams: propOssParams } = opt || {};
+      const formData = new FormData();
+      // key 表示上传到 Bucket 内的 Object 的完整路径，例如 exampledir/exampleobject.txtObject，完整路径中不能包含 Bucket 名称。
+      // filename 表示待上传的本地文件名称。
+      let filename = file?.name;
+      if (file?.name) {
+        const nameArr = file?.name.match(/^(.+)\.(.+)$/);
+        if (nameArr && nameArr.length > 2) {
+          filename = `${nameArr[1]}_${Date.now()}_${nanoid()}.${nameArr[2]}`;
+        }
+      }
+      if (!filename) {
+        filename = `${Date.now()}_${nanoid()}.${file.type?.replace(/\w+\/, ''/)}`;
+      }
+      const key = `${ossParams?.dir}${filename}`;
+      formData.set("key", key);
+      formData.set("OSSAccessKeyId", ossParams.accessid);
+      formData.set("policy", ossParams.policy);
+      formData.set("Signature", ossParams.signature);
+      if (ossParams.callback) {
+        formData.set("callback", ossParams.callback);
+      }
+      formData.set("success_action_status", 200);
+      formData.set("file", file);
+
+      if (propOssParams) {
+        for (const key in propOssParams) {
+          if (Object.hasOwnProperty.call(propOssParams, key)) {
+            formData.set(key, propOssParams[key]);
+          }
+        }
+      }
+
+      const _axios = opt?.axios || this.axios;
+
+      return _axios
+        .post(ossParams.host, formData, { ...this.axiosConf, ...opt?.axiosConf })
+        .then((res) => {
+          resolve(res);
+          return res;
+        })
+        .catch((err) => {
+          console.error("oss upload err", err);
+          reject(err);
+          return Promise.reject(err);
+        });
+    });
+  }
+}
+
+/**
+ * 处理文件上传逻辑
+ * @param {Array} files
+ * @param {Object} opt
+ * @returns
+ */
+export async function handleOssUpload(files, opt) {
+  const _files = files;
+  const { ossUrl, signatureParams, ossParams, axiosConf } = opt || {};
+  const ossUpload = new OssUpload({
+    axios: opt.axios,
+    axiosConf: axiosConf,
+    serverUrl: ossUrl || "/api/v1/user/oss/getWebOssConfig",
+  });
+
+  const promise = [];
+  _files?.forEach((file) => {
+    // 数据已经是 url 的情况
+    if (typeof file === "string" || file.ossUrl) {
+      promise.push(Promise.resolve(file));
+    } else {
+      promise.push(
+        ossUpload
+          .upload(file, {
+            signatureParams: {
+              isPublic: 1,
+              ...(signatureParams || {}),
+            },
+            ossParams,
+            axiosConf,
+          })
+          .then((res) => {
+            return Promise.resolve(res?.data?.data?.fileUrl);
+          }),
+      );
+    }
+  });
+
+  return Promise.all(promise).then((filePromises) => {
+    filePromises?.forEach((fileUrl, idx) => {
+      _files[idx].ossUrl = fileUrl;
+    });
+    return Promise.resolve(_files);
+  });
+}
+
+export { axios };
+
+export default OssUpload;

package/src/components/Upload/common/utils.js

@@ -0,0 +1,177 @@
+import { nanoid } from "nanoid";
+
+/**
+ *  建立一个可以存取该 file 的 url
+ * @param {Object} file 文件
+ * @returns {string} url
+ * blob:http://localhost:8000/c9950644-5118-4231-9be7-8183bde1fdc7
+ */
+export function getFileURL(file) {
+  let url = file.url || null;
+
+  try {
+    // 下面函数执行的效果是一样的，只是需要针对不同的浏览器执行不同的 js 函数而已
+    if (window.createObjectURL != undefined) {
+      // basic
+      url = window.createObjectURL(file);
+    } else if (window.URL != undefined) {
+      // mozilla(firefox)
+      url = window.URL.createObjectURL(file);
+    } else if (window.webkitURL != undefined) {
+      // webkit or chrome
+      url = window.webkitURL.createObjectURL(file);
+    }
+  } catch (error) {
+    console.warn("getFileURL Error: ", error);
+  }
+
+  return url;
+}
+
+/**
+ * 判断 url 是否带有指定图片后缀
+ * @param {string} url
+ * @returns
+ */
+export function checkImageUrl(url) {
+  const imgTypes = [
+    "apng",
+    "avif",
+    "bmp",
+    "gif",
+    "ico",
+    "cur",
+    "jpg",
+    "jpeg",
+    "jfif",
+    "pjpeg",
+    "pjp",
+    "png",
+    "svg",
+    "tif",
+    "tiff",
+    "webp",
+  ];
+  return checkUrlSuffix(url, imgTypes);
+}
+
+/**
+ * 判断 url 是否带有指定视频后缀
+ * @param {string} url
+ * @returns
+ */
+export function checkVideoUrl(url) {
+  const imgTypes = ["3gp", "mpg", "mpeg", "mp4", "m4v", "m4p", "ogv", "ogg", "mov", "webm"];
+  return checkUrlSuffix(url, imgTypes);
+}
+
+/**
+ * 判断 url 是否带有指定音频后缀
+ * @param {string} url
+ * @returns
+ */
+export function checkAudioUrl(url) {
+  const imgTypes = ["3gp", "adts", "mpeg", "mp3", "mp4", "ogg", "mov", "webm", "rtp", "amr", "wav"];
+  return checkUrlSuffix(url, imgTypes);
+}
+
+/**
+ * 检查 url 是否带有指定后缀
+ * @param {string} url url 地址
+ * @param {Array} types 后缀数组
+ * @returns
+ */
+export function checkUrlSuffix(url, types = [], caseSensitive) {
+  if (!url) {
+    return false;
+  }
+  let _url = url?.replace(/\?.+/, "");
+  const reg = new RegExp(`\.(${types.join("|")})$`, caseSensitive ? undefined : "i");
+  if (reg.test(_url)) {
+    return true;
+  }
+}
+
+export function getFileName(fileUrl) {
+  const res = fileUrl?.match(/[^\/]+?\.[^\/]+$/);
+  if (res && res.length > 0) {
+    return res[0];
+  }
+  return fileUrl;
+}
+
+export function getFileType(file) {
+  if (typeof file === "object" && file?.type) {
+    return file?.type;
+  }
+  if (typeof file === "string") {
+    let type = null;
+    if (checkVideoUrl(file)) {
+      type = "video/mp4";
+    } else if (checkImageUrl(file)) {
+      type = "image/jpeg";
+    } else if (checkAudioUrl(file)) {
+      type = "audio/3gpp";
+    } else if (checkUrlSuffix(file, ["pdf"])) {
+      type = "application/pdf";
+    } else if (checkUrlSuffix(file, ["pdf"])) {
+      type = "application/pdf";
+    } else if (checkUrlSuffix(file, ["xlsx", "xls", "csv", "xlsm", "xlsb"])) {
+      type = "application/vnd.ms-excel";
+    } else if (checkUrlSuffix(file, ["doc", "docx"])) {
+      type = "application/msword";
+    } else if (checkUrlSuffix(file, ["ppt", "pptx"])) {
+      type = "application/vnd.ms-powerpoint";
+    }
+    return type;
+  }
+}
+
+function getArr(value) {
+  return Array.isArray(value) ? value : (value && [value]) || [];
+}
+
+export function handleMaxCount(fileList, maxCount) {
+  let list = getArr(fileList);
+  if (maxCount > 0 && list.length > maxCount) {
+    list = list.slice(0, maxCount);
+  }
+  return list;
+}
+
+/**
+ * 处理传入的数据，数据格式统一转成 Array<fileObject>
+ * @param {Array} fileList Array<fileObject|string>
+ * @param {number} maxCount
+ * @returns Array<fileObject>
+ */
+export function handleInputFileList(_fileList, maxCount = 1) {
+  const fileList = handleMaxCount(getArr(_fileList), maxCount);
+  if (fileList.length === 0) {
+    return fileList;
+  }
+  let resList = fileList;
+  if (!Array.isArray(resList)) {
+    resList = [resList];
+  }
+  resList = fileList.map((file, i) => {
+    if (typeof file === "string") {
+      const uid = nanoid();
+      return {
+        name: uid,
+        uid: uid,
+        ossUrl: file,
+        url: file,
+        // size: Infinity,
+      };
+    }
+    if (file && !file.uid) {
+      file.uid = nanoid();
+    }
+    if (file && !file.name) {
+      file.name = file.uid;
+    }
+    return file;
+  });
+  return resList;
+}

package/src/components/Upload/components/Image/index.less

@@ -0,0 +1,16 @@
+.uploader-image-previewer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  border: 1px solid #eee;
+  color: #fff;
+  border-radius: 4px;
+  cursor: pointer;
+
+  .uploader-image-previewer-img {
+    max-width: 100%;
+    max-height: 100%;
+  }
+}

package/src/components/Upload/components/Image/index.tsx

@@ -0,0 +1,33 @@
+import { useState } from "react";
+import { Modal } from "antd";
+
+import "./index.less";
+
+function ImagePreviewer(props) {
+  const [modalVisible, setMaskVisible] = useState(false);
+
+  function onPreview() {
+    setMaskVisible(true);
+  }
+
+  return (
+    <>
+      <div className={`uploader-image-previewer ${props.className || ""}`} onClick={onPreview}>
+        <img className="uploader-image-previewer-img" src={props.src} alt={props.alt} />
+      </div>
+      <Modal
+        className="formily-uploader-previewer-modal"
+        title="预览"
+        width={800}
+        visible={modalVisible}
+        destroyOnClose
+        onCancel={(e) => setMaskVisible(false)}
+        footer={null}
+      >
+        <img className="previewer-content" src={props.src} alt={props.alt} />
+      </Modal>
+    </>
+  );
+}
+
+export default ImagePreviewer;

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

@@ -0,0 +1,22 @@
+import { CloseCircleOutlined } from "@ant-design/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);
+          }}
+        >
+          <CloseCircleOutlined />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ItemRender;

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

@@ -0,0 +1,53 @@
+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 = (
+          <div className="file-item-view" title={it?.name}>
+            {it?.name}
+          </div>
+        );
+
+        const fileType = checkFileType(it);
+        if (fileType === TYPE_IMG) {
+          content = <Image 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/Upload/components/video/index.jsx

@@ -0,0 +1,39 @@
+import { useState } from "react";
+import { Modal } from "antd";
+import { PlayCircleOutlined } from "@ant-design/icons";
+
+import "./index.less";
+
+function Video({ src, href }) {
+  const [modalVisible, setMaskVisible] = useState(false);
+
+  function onPreview() {
+    setMaskVisible(true);
+  }
+
+  return (
+    <>
+      <div className="uploader-video-wrap" onClick={onPreview}>
+        <PlayCircleOutlined className="uploader-video-play-icon" />
+      </div>
+
+      <Modal
+        className="formily-uploader-previewer-modal"
+        title="预览"
+        width={800}
+        visible={modalVisible}
+        destroyOnClose
+        onCancel={() => setMaskVisible(false)}
+        footer={null}
+      >
+        <video className="previewer-content" src={src} controls>
+          抱歉，您的浏览器不支持内嵌视频，不过不用担心，你可以
+          <a href={href || src}>下载</a>
+          并用你喜欢的播放器观看！
+        </video>
+      </Modal>
+    </>
+  );
+}
+
+export default Video;

package/src/components/Upload/components/video/index.less

@@ -0,0 +1,14 @@
+.uploader-video-wrap {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  border: 1px solid #eee;
+  color: #999;
+  border-radius: 4px;
+  cursor: pointer;
+  .uploader-video-play-icon {
+    font-size: 30px;
+  }
+}

package/src/components/Upload/index.tsx

@@ -0,0 +1,38 @@
+import UploaderCom from "./uploader";
+import { useGlobalPropsContext } from "../../common/global-props-context";
+
+export const Upload = (props) => {
+  // 组件外部传入的 props
+  const globalProps = useGlobalPropsContext() || {};
+  const { field = {}, onChange, value } = props;
+  const { name, mode, componentProps = {} } = field;
+  const { multiple } = componentProps;
+
+  async function onUploadChange(files) {
+    let _files = files;
+    if (field?.autoUpload && props.fieldsConf[name]?.onUpload) {
+      _files = await props.fieldsConf[name]?.onUpload(files);
+      if (!_files) {
+        return;
+      }
+    }
+    // 若单选模式，默认只返回对应数据，而非嵌套一层数组
+    if (!multiple && _files && _files.length === 1) {
+      _files = _files[0];
+    }
+    onChange && onChange(_files);
+  }
+
+  const _props = {
+    mode: mode,
+    ...props,
+    value: typeof value === "string" ? [value] : value,
+    axios: globalProps?.axios,
+    axiosConf: globalProps?.axiosConf,
+    ...componentProps,
+  };
+
+  return <UploaderCom {..._props} onChange={onUploadChange} />;
+};
+
+export default Upload;