@hzab/form-render 0.0.2 → 0.1.0

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

@@ -0,0 +1,151 @@
+import { useState, useRef, useEffect, useMemo } from "react";
+import { Button, Modal, message } from "antd";
+
+import ItemList from "./components/ItemList";
+
+import { handleMaxCount, handleInputFileList } from "./common/utils";
+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",
+    onChange,
+    accept,
+    disabled,
+    readOnly,
+    value,
+    baseUrl = "",
+    // 文件大小限制
+    maxSize,
+    maxCount = 1,
+    // 是否使用 oss 上传文件
+    isOssUpload,
+    // 是否使用字符串结果
+    isStrRes,
+    // maxCount === 1 时，结果是否自动去除数组嵌套
+    isResRemoveArr = true,
+    ossUrl,
+    ossOpt,
+    onCountExceed,
+  } = props;
+  const [loading, setLoading] = useState(false);
+  const [fileList, setFileList] = useState(handleInputFileList(value, maxCount));
+  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 (isOssUpload) {
+      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);
+    if (isOssUpload && isStrRes) {
+      _files = _files?.map((file) => {
+        return file.url || file.ossUrl;
+      });
+    }
+    if (!_files || _files.length <= 0) {
+      _files = undefined;
+    } else 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={isOssUpload ? 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;

package/src/components/Upload/uploader.jsx

@@ -0,0 +1,200 @@
+import {
+  UploadOutlined,
+  PaperClipOutlined,
+  FilePdfTwoTone,
+  VideoCameraTwoTone,
+  FileExcelTwoTone,
+  FileWordTwoTone,
+} from "@ant-design/icons";
+import { Button, Upload as AUpload, message } from "antd";
+import React, { useEffect, useState } from "react";
+import { nanoid } from "nanoid";
+
+import { handleInputFileList, getFileName, getFileType } from "./common/utils";
+import UploadOss from "./common/ossUpload";
+
+import "./uploader.less";
+
+export function Uploader({ onChange, ...props }) {
+  const {
+    name = "file",
+    multiple = false,
+    accept,
+    value,
+    maxCount = 1,
+    // 文件大小限制
+    maxSize,
+    listType = "text",
+    disabled = false,
+    readOnly = false,
+    ossUrl = "/api/v1/user/oss/getWebOssConfig",
+    // 是否使用 oss 上传文件
+    isOssUpload,
+    // 是否使用字符串结果
+    isStrRes,
+    // maxCount === 1 时，结果是否自动去除数组嵌套
+    isResRemoveArr = true,
+    ossOpt,
+    onCountExceed,
+    templateUrl,
+    templateDownloadText = "模板下载",
+  } = props;
+
+  const [fileList, setFileList] = useState([]);
+
+  const handleChange = async ({ fileList }) => {
+    setFileList(fileList);
+    let _files = [...fileList];
+    // 处理提交结果为字符串的情况
+    if (isOssUpload && isStrRes) {
+      for (let i = 0; i < _files.length; i++) {
+        let _file = _files[i];
+        if (_file?.originFileObj) {
+          _file = _file?.originFileObj;
+        }
+        // 从文件对象中获取 url，ossPromise 为上传中的文件，兼容 file 为字符串的情况
+        let str = (await _file.ossPromise) || _file.url || _file.ossUrl || _file;
+        _files[i] = str;
+      }
+    }
+    // 处理空数据情况
+    if (!_files || _files.length <= 0) {
+      _files = undefined;
+    } else if (isResRemoveArr && maxCount === 1) {
+      // maxCount 为 1 的时候返回结果去除数组
+      _files = _files[0];
+    }
+    onChange && onChange?.(_files);
+  };
+
+  useEffect(() => {
+    if (!value) {
+      return;
+    }
+    let _list = value;
+    if (typeof _list === "string") {
+      _list = value.split(",");
+    }
+    if (Array.isArray(_list)) {
+      _list = _list.map((res) => {
+        if (typeof res === "string") {
+          return {
+            name: getFileName(res),
+            status: "done",
+            uid: `rc-upload-${Date.now()}-${nanoid()}`,
+            url: res,
+            type: getFileType(res),
+          };
+        }
+        return res;
+      });
+    }
+    setFileList(handleInputFileList(_list, maxCount));
+  }, [value]);
+
+  const onRemove = (file) => {
+    const files = (fileList || []).filter((v) => v.url !== file.url);
+    onChange && onChange(files);
+  };
+
+  const _uploadProps = {
+    iconRender: (e) => {
+      if (e?.type == "application/pdf") {
+        return <FilePdfTwoTone twoToneColor={"#DD4B43"} />;
+      } else if (e?.type?.startsWith("video/")) {
+        return <VideoCameraTwoTone twoToneColor={"#3C87F7"} />;
+      } else if (
+        e?.type == "application/vnd.ms-excel" ||
+        e?.type == "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
+      ) {
+        return <FileExcelTwoTone twoToneColor={"#68B27C"} />;
+      } else if (
+        e?.type == "application/vnd.openxmlformats-officedocument.wordprocessingml.document" ||
+        e?.type == "application/msword"
+      ) {
+        return <FileWordTwoTone twoToneColor={"#88CCF5"} />;
+      } else {
+        return <PaperClipOutlined />;
+      }
+    },
+    name: name,
+    accept: accept,
+    multiple: multiple,
+    listType: listType,
+    maxCount: maxCount,
+    fileList: fileList,
+    onChange: handleChange,
+    disabled,
+    readOnly,
+    onRemove,
+    beforeUpload(file, _fileList) {
+      // 文件大小限制
+      let hasOverSize = false;
+      let overSizeTips = "";
+      _fileList.forEach((it) => {
+        if (maxSize && it.size > maxSize) {
+          message.error(`${it.name} 文件大小超出限制：${it.size}`);
+          overSizeTips += `${it.name} 文件大小超出限制：${it.size}; `;
+          hasOverSize = true;
+        }
+      });
+      if (hasOverSize) {
+        return AUpload.LIST_IGNORE;
+      }
+
+      // 超出个数限制只保留前面的 maxCount 个
+      if (maxCount > 0 && fileList.length >= maxCount) {
+        onCountExceed && onCountExceed(fileList.length - maxCount);
+        fileList.length = maxCount;
+        message.error("文件个数超出限制");
+        return AUpload.LIST_IGNORE;
+      }
+      return true;
+    },
+    customRequest: isOssUpload
+      ? function customRequest({ action, data, file, filename, headers, method, onSuccess, onProgress, onError }) {
+          const ossUpload = new UploadOss({
+            serverUrl: ossUrl,
+            ...ossOpt,
+          });
+          file.ossPromise = ossUpload
+            .upload(file, {
+              params: {
+                isPublic: 1,
+                ...(props.params || {}),
+              },
+            })
+            .then((res) => {
+              file.url = res?.data?.data?.fileUrl;
+              file.ossUrl = file.url;
+              onSuccess(file);
+              return file.ossUrl;
+            })
+            .catch(onError);
+          return;
+        }
+      : null,
+    ...(props || {}),
+  };
+
+  return (
+    <>
+      <AUpload className="oss-uploader" {..._uploadProps}>
+        {maxCount && maxCount > fileList.length ? (
+          listType === "picture-card" ? (
+            props.btnText || "上传"
+          ) : (
+            <Button icon={<UploadOutlined />}>{props.btnText || "上传"}</Button>
+          )
+        ) : null}
+      </AUpload>
+      {templateUrl ? (
+        <a className="uploader-template-download-btn" href={templateUrl}>
+          {templateDownloadText}
+        </a>
+      ) : null}
+    </>
+  );
+}
+
+export default Uploader;

package/src/components/Upload/uploader.less

@@ -0,0 +1,3 @@
+.uploader-template-download-btn {
+  color: #1890ff;
+}

package/src/components/index.tsx

@@ -1,3 +1,5 @@
 import Text from "./Text";
 
+export * from "./Upload";
+
 export { Text };

package/src/index.tsx

@@ -21,7 +21,7 @@ import {
   TimePicker,
   Transfer,
   TreeSelect,
-  Upload,
+  // Upload,
   FormGrid,
   FormLayout,
   FormTab,
@@ -32,6 +32,7 @@ import {
 import { Card, Slider, Rate } from "antd";
 // 自定义组件
 import * as customComponents from "./components/index";
+import { GlobalPropsContext } from "./common/global-props-context";
 
 import "./index.less";
 
@@ -63,7 +64,7 @@ const FormRender = forwardRef((props: any, parentRef) => {
         TimePicker,
         Transfer,
         TreeSelect,
-        Upload,
+        // Upload,
         Card,
         Slider,
         Rate,
@@ -102,19 +103,37 @@ const FormRender = forwardRef((props: any, parentRef) => {
     props.init && props.init(formRender);
   }, []);
 
+  const footer = useMemo(() => {
+    const { Slots } = props;
+    if (typeof Slots === "function") {
+      return <Slots />;
+    }
+    if (typeof Slots?.footer === "function") {
+      return <Slots.footer />;
+    }
+  }, [props.Slots]);
+
+  const formLayoutProps = {
+    ...props.schema?.form,
+  };
+
   return (
-    <Form
-      className={`form-render ${props.className}`}
-      layout={props.layout}
-      form={formRender}
-      labelCol={props.schema.form.labelCol}
-      wrapperCol={props.schema.form.wrapperCol}
-      onAutoSubmit={autoSubmit}
-      onAutoSubmitFailed={autoSubmitFailed}
-    >
-      <SchemaField schema={props.schema.schema}></SchemaField>
-      <div className="form-render-footer xxm">{props.Slots && <props.Slots />}</div>
-    </Form>
+    <GlobalPropsContext.Provider value={props}>
+      <Form
+        className={`form-render ${props.className}`}
+        layout={props.layout}
+        form={formRender}
+        labelCol={props.schema.form.labelCol}
+        wrapperCol={props.schema.form.wrapperCol}
+        onAutoSubmit={autoSubmit}
+        onAutoSubmitFailed={autoSubmitFailed}
+      >
+        <FormLayout {...formLayoutProps}>
+          <SchemaField schema={props.schema.schema}></SchemaField>
+          <div className="form-render-footer xxm">{footer}</div>
+        </FormLayout>
+      </Form>
+    </GlobalPropsContext.Provider>
   );
 });
 

package/CHANGELOG

@@ -1,2 +0,0 @@
-# @hzab/form-render0.0.1
-组件初始化