@hzab/form-render 1.6.17 → 1.6.19

package/src/components/Upload/index.tsx

@@ -1,17 +1,17 @@
-import UploaderCom from "./uploader";
-import { useGlobalPropsContext } from "../../common/global-props-context";
-
-export const Upload = (props) => {
-  // 组件外部传入的 props
-  const globalProps = useGlobalPropsContext() || {};
-
-  const _props = {
-    axios: globalProps?.axios,
-    axiosConf: globalProps?.axiosConf,
-    ...props,
-  };
-
-  return <UploaderCom {..._props} />;
-};
-
-export default Upload;
+import UploaderCom from "./uploader";
+import { useGlobalPropsContext } from "../../common/global-props-context";
+
+export const Upload = (props) => {
+  // 组件外部传入的 props
+  const globalProps = useGlobalPropsContext() || {};
+
+  const _props = {
+    axios: globalProps?.axios,
+    axiosConf: globalProps?.axiosConf,
+    ...props,
+  };
+
+  return <UploaderCom {..._props} />;
+};
+
+export default Upload;

package/src/components/Upload/uploader-input.jsx

@@ -1,187 +1,187 @@
-import { useState, useRef, useEffect, useMemo } from "react";
-import { Button, Modal, message } from "antd";
-
-import ItemList from "./components/ItemList";
-
-import { handleMaxCount } from "./common/utils";
-import { handleInputFileList, handleOutputFileList } from "./common/handleIOFileList";
-import { handleOssUpload } from "./common/ossUpload";
-
-import "./uploader.less";
-
-const _ = require("lodash");
-
-function Uploader(props) {
-  const {
-    name,
-    multiple,
-    // 模式字符串: all | select | image | video 或 数组 select | image | video 组合：如：['select', 'image']
-    mode = "select",
-    /** 上传模式
-     * 阿里云 oss: oss
-     * 内部定制私有化部署: offline
-     * 自定义: custom
-     * 文件: file
-     */
-    uploadMode: _uploadMode = "oss",
-    /**
-     * 数据格式配置
-     */
-    fileListConf = {
-      /** 列表数据模式 "array" | "jsonStr" | "splitStr" */
-      listMode: "array",
-      /** 字符串列表数据模式下的分隔符 */
-      split: ", ",
-      /** 子项数据模式 "object" | "file" | "url" | "jsonStr" */
-      itemMode: "url",
-      /** 预览配置参数 */
-      previewConfig: {},
-    },
-    onChange,
-    accept,
-    disabled,
-    readOnly,
-    value,
-    baseUrl = "",
-    // 文件大小限制
-    maxSize,
-    maxCount = 1,
-    // 是否使用 oss 上传文件
-    isOssUpload = true,
-    // 是否使用字符串结果
-    isStrRes,
-    // maxCount === 1 时，结果是否自动去除数组嵌套
-    isResRemoveArr = true,
-    ossUrl,
-    ossOpt,
-    onCountExceed,
-    isFileJson,
-    isFileObj,
-  } = props;
-
-  // 参数归一化，兼容老参数
-  const uploadMode = isOssUpload === true ? "oss" : _uploadMode;
-  if (isStrRes === true && isFileObj === false) {
-    fileListConf.itemMode = "url";
-  }
-  if (isFileJson === true) {
-    fileListConf.listMode = "jsonStr";
-  }
-  if (isFileObj === true) {
-    fileListConf.itemMode = "object";
-  }
-
-  const [loading, setLoading] = useState(false);
-  const [fileList, setFileList] = useState([]);
-  useEffect(() => {
-    setFileList(handleInputFileList(value, maxCount));
-  }, [value]);
-
-  async function onFileChange(e) {
-    e.persist();
-    const { files: rawFiles } = e.target;
-    let files = [...fileList, ...[].slice.call(rawFiles)];
-    // 超出个数限制只保留前面的 maxCount 个
-    if (maxCount > 0 && files.length > maxCount) {
-      onCountExceed && onCountExceed(files.length - maxCount);
-      files.length = maxCount;
-      message.error("文件个数超出限制");
-    }
-    files = files.filter((it) => {
-      if (maxSize && it.size > maxSize) {
-        message.error("文件大小超出限制：" + it.size);
-        return false;
-      }
-      return it;
-    });
-    // 处理 oss 逻辑
-    if (uploadMode === "oss") {
-      setLoading(true);
-      files = await handleOssUpload(files, {
-        axios: props.axios,
-        axiosConf: props?.axiosConf,
-        ...ossOpt,
-        ossUrl,
-      });
-      setLoading(false);
-    }
-
-    e.target.value = ""; // HACK: fix the same file doesn't trigger onChange
-    handleChange(files);
-  }
-
-  function handleChange(files, optType) {
-    let _files = files;
-    if (optType !== "del" && maxCount > 1) {
-      _files = [...fileList, ..._files];
-    }
-    _files = handleMaxCount(files, maxCount);
-    setFileList(_files);
-
-    // 处理出参格式
-    _files = handleOutputFileList(_files, {
-      ...fileListConf,
-    });
-
-    if (isResRemoveArr && maxCount === 1) {
-      // maxCount 为1的时候返回结果去除数组
-      _files = _files[0];
-    }
-
-    onChange && onChange(_files);
-  }
-
-  const uploaderRef = useRef();
-
-  function onItemDel(idx) {
-    Modal.confirm({
-      content: "确认删除？",
-      onOk: () => {
-        const middleValue = _.cloneDeep(fileList);
-        middleValue.splice(idx, 1);
-        handleChange(middleValue, "del");
-        setFileList(middleValue);
-      },
-    });
-  }
-
-  const inputProps = {
-    className: "aria-hidden",
-    style: { display: "none" },
-    id: name,
-    onChange: onFileChange,
-    type: "file",
-    name: name,
-    multiple: multiple,
-    accept: accept,
-    capture: props.capture,
-  };
-
-  return (
-    <div className="uploader">
-      <input {...inputProps} ref={uploaderRef}></input>
-      <ItemList
-        fileList={fileList}
-        baseUrl={uploadMode === "oss" ? baseUrl : ""}
-        disabled={disabled}
-        readOnly={readOnly}
-        onItemDel={onItemDel}
-      />
-      {disabled || readOnly || (maxCount > 0 && fileList.length >= maxCount) ? null : (
-        <>
-          <Button
-            className="uploader-add-btn"
-            onClick={() => {
-              uploaderRef.current.click();
-            }}
-            loading={loading}
-          >
-            {loading ? "" : "+"}
-          </Button>
-        </>
-      )}
-    </div>
-  );
-}
-
-export default Uploader;
+import { useState, useRef, useEffect, useMemo } from "react";
+import { Button, Modal, message } from "antd";
+
+import ItemList from "./components/ItemList";
+
+import { handleMaxCount } from "./common/utils";
+import { handleInputFileList, handleOutputFileList } from "./common/handleIOFileList";
+import { handleOssUpload } from "./common/ossUpload";
+
+import "./uploader.less";
+
+const _ = require("lodash");
+
+function Uploader(props) {
+  const {
+    name,
+    multiple,
+    // 模式字符串: all | select | image | video 或 数组 select | image | video 组合：如：['select', 'image']
+    mode = "select",
+    /** 上传模式
+     * 阿里云 oss: oss
+     * 内部定制私有化部署: offline
+     * 自定义: custom
+     * 文件: file
+     */
+    uploadMode: _uploadMode = "oss",
+    /**
+     * 数据格式配置
+     */
+    fileListConf = {
+      /** 列表数据模式 "array" | "jsonStr" | "splitStr" */
+      listMode: "array",
+      /** 字符串列表数据模式下的分隔符 */
+      split: ", ",
+      /** 子项数据模式 "object" | "file" | "url" | "jsonStr" */
+      itemMode: "url",
+      /** 预览配置参数 */
+      previewConfig: {},
+    },
+    onChange,
+    accept,
+    disabled,
+    readOnly,
+    value,
+    baseUrl = "",
+    // 文件大小限制
+    maxSize,
+    maxCount = 1,
+    // 是否使用 oss 上传文件
+    isOssUpload = true,
+    // 是否使用字符串结果
+    isStrRes,
+    // maxCount === 1 时，结果是否自动去除数组嵌套
+    isResRemoveArr = true,
+    ossUrl,
+    ossOpt,
+    onCountExceed,
+    isFileJson,
+    isFileObj,
+  } = props;
+
+  // 参数归一化，兼容老参数
+  const uploadMode = isOssUpload === true ? "oss" : _uploadMode;
+  if (isStrRes === true && isFileObj === false) {
+    fileListConf.itemMode = "url";
+  }
+  if (isFileJson === true) {
+    fileListConf.listMode = "jsonStr";
+  }
+  if (isFileObj === true) {
+    fileListConf.itemMode = "object";
+  }
+
+  const [loading, setLoading] = useState(false);
+  const [fileList, setFileList] = useState([]);
+  useEffect(() => {
+    setFileList(handleInputFileList(value, maxCount));
+  }, [value]);
+
+  async function onFileChange(e) {
+    e.persist();
+    const { files: rawFiles } = e.target;
+    let files = [...fileList, ...[].slice.call(rawFiles)];
+    // 超出个数限制只保留前面的 maxCount 个
+    if (maxCount > 0 && files.length > maxCount) {
+      onCountExceed && onCountExceed(files.length - maxCount);
+      files.length = maxCount;
+      message.error("文件个数超出限制");
+    }
+    files = files.filter((it) => {
+      if (maxSize && it.size > maxSize) {
+        message.error("文件大小超出限制：" + it.size);
+        return false;
+      }
+      return it;
+    });
+    // 处理 oss 逻辑
+    if (uploadMode === "oss") {
+      setLoading(true);
+      files = await handleOssUpload(files, {
+        axios: props.axios,
+        axiosConf: props?.axiosConf,
+        ...ossOpt,
+        ossUrl,
+      });
+      setLoading(false);
+    }
+
+    e.target.value = ""; // HACK: fix the same file doesn't trigger onChange
+    handleChange(files);
+  }
+
+  function handleChange(files, optType) {
+    let _files = files;
+    if (optType !== "del" && maxCount > 1) {
+      _files = [...fileList, ..._files];
+    }
+    _files = handleMaxCount(files, maxCount);
+    setFileList(_files);
+
+    // 处理出参格式
+    _files = handleOutputFileList(_files, {
+      ...fileListConf,
+    });
+
+    if (isResRemoveArr && maxCount === 1) {
+      // maxCount 为1的时候返回结果去除数组
+      _files = _files[0];
+    }
+
+    onChange && onChange(_files);
+  }
+
+  const uploaderRef = useRef();
+
+  function onItemDel(idx) {
+    Modal.confirm({
+      content: "确认删除？",
+      onOk: () => {
+        const middleValue = _.cloneDeep(fileList);
+        middleValue.splice(idx, 1);
+        handleChange(middleValue, "del");
+        setFileList(middleValue);
+      },
+    });
+  }
+
+  const inputProps = {
+    className: "aria-hidden",
+    style: { display: "none" },
+    id: name,
+    onChange: onFileChange,
+    type: "file",
+    name: name,
+    multiple: multiple,
+    accept: accept,
+    capture: props.capture,
+  };
+
+  return (
+    <div className="uploader">
+      <input {...inputProps} ref={uploaderRef}></input>
+      <ItemList
+        fileList={fileList}
+        baseUrl={uploadMode === "oss" ? baseUrl : ""}
+        disabled={disabled}
+        readOnly={readOnly}
+        onItemDel={onItemDel}
+      />
+      {disabled || readOnly || (maxCount > 0 && fileList.length >= maxCount) ? null : (
+        <>
+          <Button
+            className="uploader-add-btn"
+            onClick={() => {
+              uploaderRef.current.click();
+            }}
+            loading={loading}
+          >
+            {loading ? "" : "+"}
+          </Button>
+        </>
+      )}
+    </div>
+  );
+}
+
+export default Uploader;