@hzab/form-render 1.6.18 → 1.6.19

package/src/components/RichEditor/index.less

@@ -1,39 +1,39 @@
-.wang-editor-warpper {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    position: relative;
-
-    .spin-content {
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        z-index: 1000;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        background: rgba(255, 255, 255, .6);
-    }
-
-    .wang-editor-container {
-        flex: 1;
-        width: 100%;
-        position: relative;
-
-        .wang-editor-scroll {
-            position: absolute;
-            top: 0;
-            left: 0;
-            bottom: 0;
-            right: 0;
-            overflow-x: hidden;
-            overflow-y: scroll;
-
-            .w-e-text-container {
-                min-height: 100%;
-            }
-        }
-    }
+.wang-editor-warpper {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    position: relative;
+
+    .spin-content {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: 1000;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: rgba(255, 255, 255, .6);
+    }
+
+    .wang-editor-container {
+        flex: 1;
+        width: 100%;
+        position: relative;
+
+        .wang-editor-scroll {
+            position: absolute;
+            top: 0;
+            left: 0;
+            bottom: 0;
+            right: 0;
+            overflow-x: hidden;
+            overflow-y: scroll;
+
+            .w-e-text-container {
+                min-height: 100%;
+            }
+        }
+    }
 }

package/src/components/RichEditor/index.tsx

@@ -1,238 +1,238 @@
-import "@wangeditor/editor/dist/css/style.css"; // 引入 css
-import React, { useState, useEffect, useImperativeHandle, forwardRef } from "react";
-import { Editor as WangEditor, Toolbar } from "@wangeditor/editor-for-react";
-import { IDomEditor, IEditorConfig, IToolbarConfig } from "@wangeditor/editor";
-import { getOssUploadRequest, getOfflineUploadRequest } from "../Upload/common/customRequest";
-import { handlePreviewUrls } from "../Upload/common/OfflineUpload";
-import "./index.less";
-import { Spin, message } from "antd";
-import { connect, mapProps, observer, useField } from "@formily/react";
-import { merge } from "lodash";
-interface AnyObject {
-  [key: string]: any;
-}
-
-interface PropsType {
-  toolbarConfig?: Partial<IToolbarConfig>;
-  editorConfig?: Partial<IEditorConfig>;
-  ossOpt: AnyObject;
-  uploadParams: AnyObject;
-  height: string;
-  ossServerUrl: string;
-  ossUrl: string;
-  offlinePreviewUrl: string;
-  offlineServerUrl: string;
-  value: string;
-  onChange: any;
-  customRequest: any;
-  uploadMode: string;
-  zIndex: number;
-}
-
-export const RichEditor = observer(function (props: PropsType, parentRef) {
-  const {
-    toolbarConfig, // 工具栏配置
-    editorConfig, // 编辑器配置
-    height,
-    onChange,
-    value,
-    ossOpt,
-    uploadMode = "oss",
-    offlinePreviewUrl = "",
-    offlineServerUrl = "",
-    uploadParams = {},
-    // ossUrl = "https://test-abt.hzabjt.com:18091/api/v1/user/oss/getWebOssConfig",
-    ossServerUrl = "/api/v1/user/oss/getWebOssConfig",
-    ossUrl = "/api/v1/user/oss/getWebOssConfig",
-    zIndex = 9999,
-  } = props;
-  const isPrivateStore =
-    props.uploadParams?.fileAcl === "private" || props.ossOpt?.signatureParams?.fileAcl === "private";
-
-  useImperativeHandle(parentRef, () => ({
-    setEditorContent,
-    getEditorContent,
-  }));
-
-  const field = useField<any>();
-
-  // editor 实例
-  const [editor, setEditor] = useState<IDomEditor | null>(null); // TS 语法
-
-  // 编辑器内容
-  const [html, setHtml] = useState<string>("");
-
-  const [isLoading, setIsLoading] = useState<boolean>(false);
-
-  const setEditorContent = (content) => {
-    setHtml(content);
-  };
-
-  const getEditorContent = () => {
-    return html;
-  };
-
-  const customUpload = async (file: File, insertFn) => {
-    let customRequest = props.customRequest;
-    if (uploadMode === "oss") {
-      customRequest = getOssUploadRequest({
-        ...props,
-        isPrivateStore,
-        params: uploadParams,
-        ossServerUrl: ossServerUrl || ossUrl,
-      });
-    } else if (uploadMode === "offline") {
-      customRequest = getOfflineUploadRequest({
-        ...props,
-        isPrivateStore,
-        params: uploadParams,
-        offlineServerUrl: offlineServerUrl || ossUrl,
-        offlinePreviewUrl: offlinePreviewUrl,
-      });
-    }
-    setIsLoading(true);
-    customRequest({
-      file,
-      onSuccess: (res) => {
-        setIsLoading(false);
-        console.log(res);
-        insertFn(res.url, "", "");
-      },
-      onError: () => {
-        setIsLoading(false);
-        message.error(`${file.name} 上传失败`);
-      },
-    });
-  };
-
-  const config: Partial<IEditorConfig> = {
-    // TS 语法
-    placeholder: "请输入内容...",
-    MENU_CONF: {
-      uploadImage: {
-        // form-data fieldName ，默认值 'wangeditor-uploaded-image'
-        fieldName: "wangeditor-uploaded-image",
-        // 单个文件的最大体积限制，默认为 2M
-        maxFileSize: 1 * 1024 * 1024, // 1M
-        // 最多可上传几个文件，默认为 100
-        maxNumberOfFiles: 1,
-        // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
-        allowedFileTypes: ["image/*"],
-        // 跨域是否传递 cookie ，默认为 false
-        withCredentials: false,
-        // 超时时间，默认为 10 秒
-        timeout: 5 * 1000, // 5 秒
-        customUpload,
-      },
-      uploadVideo: {
-        // form-data fieldName ，默认值 'wangeditor-uploaded-image'
-        fieldName: "wangeditor-uploaded-video",
-        // 最多可上传几个文件，默认为 100
-        maxNumberOfFiles: 1,
-        // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
-        allowedFileTypes: ["video/*"],
-        // 跨域是否传递 cookie ，默认为 false
-        withCredentials: false,
-        customUpload,
-      },
-    },
-    ...merge(editorConfig, {
-      MENU_CONF: {
-        uploadImage: {
-          // form-data fieldName ，默认值 'wangeditor-uploaded-image'
-          fieldName: "wangeditor-uploaded-image",
-          // 单个文件的最大体积限制，默认为 2M
-          maxFileSize: 1 * 1024 * 1024, // 1M
-          // 最多可上传几个文件，默认为 100
-          maxNumberOfFiles: 1,
-          // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
-          allowedFileTypes: ["image/*"],
-          // 跨域是否传递 cookie ，默认为 false
-          withCredentials: false,
-          // 超时时间，默认为 10 秒
-          timeout: 5 * 1000, // 5 秒
-          customUpload,
-        },
-        uploadVideo: {
-          // form-data fieldName ，默认值 'wangeditor-uploaded-image'
-          fieldName: "wangeditor-uploaded-video",
-          // 最多可上传几个文件，默认为 100
-          maxNumberOfFiles: 1,
-          // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
-          allowedFileTypes: ["video/*"],
-          // 跨域是否传递 cookie ，默认为 false
-          withCredentials: false,
-          customUpload,
-        },
-      },
-    }),
-  };
-  const onEditorChange = (e) => {
-    const content = e.getHtml();
-    setHtml(content);
-    onChange && onChange(content);
-  };
-
-  // 及时销毁 editor ，重要！
-  useEffect(() => {
-    return () => {
-      if (editor == null) return;
-      editor.destroy();
-      setEditor(null);
-    };
-  }, [editor]);
-
-  useEffect(() => {
-    setEditorContent(value);
-  }, [value]);
-
-  return (
-    <>
-      <div className="wang-editor-warpper" style={{ zIndex }}>
-        {isLoading && (
-          <div className="spin-content">
-            <Spin tip="Loading..." />
-          </div>
-        )}
-        <Toolbar
-          editor={editor}
-          defaultConfig={toolbarConfig}
-          mode="default"
-          style={{ borderBottom: "1px solid #ccc" }}
-        />
-        <WangEditor
-          defaultConfig={config}
-          value={html}
-          onCreated={(e) => {
-            setEditor(e);
-            field.editor = e;
-          }}
-          onChange={(e) => onEditorChange(e)}
-          mode="default"
-          style={{ height }}
-        />
-        {/* <div className="wang-editor-container">
-          <div className="wang-editor-scroll">
-            <WangEditor
-              defaultConfig={config}
-              value={html}
-              onCreated={setEditor}
-              onChange={(editor) => setHtml(editor.getHtml())}
-              mode="default"
-              style={{ height }}
-            />
-          </div>
-        </div> */}
-      </div>
-    </>
-  );
-});
-
-export default connect(
-  RichEditor,
-  mapProps((props: any, field) => {
-    return { ...props, form: field.form, field };
-  }),
-);
-
-export const Editor = WangEditor;
+import "@wangeditor/editor/dist/css/style.css"; // 引入 css
+import React, { useState, useEffect, useImperativeHandle, forwardRef } from "react";
+import { Editor as WangEditor, Toolbar } from "@wangeditor/editor-for-react";
+import { IDomEditor, IEditorConfig, IToolbarConfig } from "@wangeditor/editor";
+import { getOssUploadRequest, getOfflineUploadRequest } from "../Upload/common/customRequest";
+import { handlePreviewUrls } from "../Upload/common/OfflineUpload";
+import "./index.less";
+import { Spin, message } from "antd";
+import { connect, mapProps, observer, useField } from "@formily/react";
+import { merge } from "lodash";
+interface AnyObject {
+  [key: string]: any;
+}
+
+interface PropsType {
+  toolbarConfig?: Partial<IToolbarConfig>;
+  editorConfig?: Partial<IEditorConfig>;
+  ossOpt: AnyObject;
+  uploadParams: AnyObject;
+  height: string;
+  ossServerUrl: string;
+  ossUrl: string;
+  offlinePreviewUrl: string;
+  offlineServerUrl: string;
+  value: string;
+  onChange: any;
+  customRequest: any;
+  uploadMode: string;
+  zIndex: number;
+}
+
+export const RichEditor = observer(function (props: PropsType, parentRef) {
+  const {
+    toolbarConfig, // 工具栏配置
+    editorConfig, // 编辑器配置
+    height,
+    onChange,
+    value,
+    ossOpt,
+    uploadMode = "oss",
+    offlinePreviewUrl = "",
+    offlineServerUrl = "",
+    uploadParams = {},
+    // ossUrl = "https://test-abt.hzabjt.com:18091/api/v1/user/oss/getWebOssConfig",
+    ossServerUrl = "/api/v1/user/oss/getWebOssConfig",
+    ossUrl = "/api/v1/user/oss/getWebOssConfig",
+    zIndex = 9999,
+  } = props;
+  const isPrivateStore =
+    props.uploadParams?.fileAcl === "private" || props.ossOpt?.signatureParams?.fileAcl === "private";
+
+  useImperativeHandle(parentRef, () => ({
+    setEditorContent,
+    getEditorContent,
+  }));
+
+  const field = useField<any>();
+
+  // editor 实例
+  const [editor, setEditor] = useState<IDomEditor | null>(null); // TS 语法
+
+  // 编辑器内容
+  const [html, setHtml] = useState<string>("");
+
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+
+  const setEditorContent = (content) => {
+    setHtml(content);
+  };
+
+  const getEditorContent = () => {
+    return html;
+  };
+
+  const customUpload = async (file: File, insertFn) => {
+    let customRequest = props.customRequest;
+    if (uploadMode === "oss") {
+      customRequest = getOssUploadRequest({
+        ...props,
+        isPrivateStore,
+        params: uploadParams,
+        ossServerUrl: ossServerUrl || ossUrl,
+      });
+    } else if (uploadMode === "offline") {
+      customRequest = getOfflineUploadRequest({
+        ...props,
+        isPrivateStore,
+        params: uploadParams,
+        offlineServerUrl: offlineServerUrl || ossUrl,
+        offlinePreviewUrl: offlinePreviewUrl,
+      });
+    }
+    setIsLoading(true);
+    customRequest({
+      file,
+      onSuccess: (res) => {
+        setIsLoading(false);
+        console.log(res);
+        insertFn(res.url, "", "");
+      },
+      onError: () => {
+        setIsLoading(false);
+        message.error(`${file.name} 上传失败`);
+      },
+    });
+  };
+
+  const config: Partial<IEditorConfig> = {
+    // TS 语法
+    placeholder: "请输入内容...",
+    MENU_CONF: {
+      uploadImage: {
+        // form-data fieldName ，默认值 'wangeditor-uploaded-image'
+        fieldName: "wangeditor-uploaded-image",
+        // 单个文件的最大体积限制，默认为 2M
+        maxFileSize: 1 * 1024 * 1024, // 1M
+        // 最多可上传几个文件，默认为 100
+        maxNumberOfFiles: 1,
+        // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
+        allowedFileTypes: ["image/*"],
+        // 跨域是否传递 cookie ，默认为 false
+        withCredentials: false,
+        // 超时时间，默认为 10 秒
+        timeout: 5 * 1000, // 5 秒
+        customUpload,
+      },
+      uploadVideo: {
+        // form-data fieldName ，默认值 'wangeditor-uploaded-image'
+        fieldName: "wangeditor-uploaded-video",
+        // 最多可上传几个文件，默认为 100
+        maxNumberOfFiles: 1,
+        // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
+        allowedFileTypes: ["video/*"],
+        // 跨域是否传递 cookie ，默认为 false
+        withCredentials: false,
+        customUpload,
+      },
+    },
+    ...merge(editorConfig, {
+      MENU_CONF: {
+        uploadImage: {
+          // form-data fieldName ，默认值 'wangeditor-uploaded-image'
+          fieldName: "wangeditor-uploaded-image",
+          // 单个文件的最大体积限制，默认为 2M
+          maxFileSize: 1 * 1024 * 1024, // 1M
+          // 最多可上传几个文件，默认为 100
+          maxNumberOfFiles: 1,
+          // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
+          allowedFileTypes: ["image/*"],
+          // 跨域是否传递 cookie ，默认为 false
+          withCredentials: false,
+          // 超时时间，默认为 10 秒
+          timeout: 5 * 1000, // 5 秒
+          customUpload,
+        },
+        uploadVideo: {
+          // form-data fieldName ，默认值 'wangeditor-uploaded-image'
+          fieldName: "wangeditor-uploaded-video",
+          // 最多可上传几个文件，默认为 100
+          maxNumberOfFiles: 1,
+          // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
+          allowedFileTypes: ["video/*"],
+          // 跨域是否传递 cookie ，默认为 false
+          withCredentials: false,
+          customUpload,
+        },
+      },
+    }),
+  };
+  const onEditorChange = (e) => {
+    const content = e.getHtml();
+    setHtml(content);
+    onChange && onChange(content);
+  };
+
+  // 及时销毁 editor ，重要！
+  useEffect(() => {
+    return () => {
+      if (editor == null) return;
+      editor.destroy();
+      setEditor(null);
+    };
+  }, [editor]);
+
+  useEffect(() => {
+    setEditorContent(value);
+  }, [value]);
+
+  return (
+    <>
+      <div className="wang-editor-warpper" style={{ zIndex }}>
+        {isLoading && (
+          <div className="spin-content">
+            <Spin tip="Loading..." />
+          </div>
+        )}
+        <Toolbar
+          editor={editor}
+          defaultConfig={toolbarConfig}
+          mode="default"
+          style={{ borderBottom: "1px solid #ccc" }}
+        />
+        <WangEditor
+          defaultConfig={config}
+          value={html}
+          onCreated={(e) => {
+            setEditor(e);
+            field.editor = e;
+          }}
+          onChange={(e) => onEditorChange(e)}
+          mode="default"
+          style={{ height }}
+        />
+        {/* <div className="wang-editor-container">
+          <div className="wang-editor-scroll">
+            <WangEditor
+              defaultConfig={config}
+              value={html}
+              onCreated={setEditor}
+              onChange={(editor) => setHtml(editor.getHtml())}
+              mode="default"
+              style={{ height }}
+            />
+          </div>
+        </div> */}
+      </div>
+    </>
+  );
+});
+
+export default connect(
+  RichEditor,
+  mapProps((props: any, field) => {
+    return { ...props, form: field.form, field };
+  }),
+);
+
+export const Editor = WangEditor;

package/src/components/TreeCheckbox/components/CheckboxTable/index.tsx

@@ -1,55 +1,55 @@
-import { Checkbox } from "antd";
-
-export const CheckboxTable = (props) => {
-  const { data, onChange } = props;
-  return (
-    <table className="tree-checkbox-table">
-      <tbody>
-        {data?.map((row, rowIdx) => {
-          return (
-            <tr className={`tree-checkbox-row tree-checkbox-row-${rowIdx}`} key={rowIdx}>
-              {row?.map((col, colIdx) => {
-                // 隐藏合并项
-                if (col === false) {
-                  return null;
-                }
-                // 注意：col 存在 undefined 的情况
-                const colKey = col?.value;
-                return (
-                  <td
-                    className={`tree-checkbox-col tree-checkbox-col-${colIdx}`}
-                    key={colIdx}
-                    rowSpan={col?._maxRow > 1 ? col?._maxRow : null}
-                  >
-                    {Array.isArray(col) ? (
-                      <>
-                        {col?.map((it, itIdx) => {
-                          const itKey = it?.value;
-                          return (
-                            it && (
-                              <Checkbox onChange={onChange} value={itKey} key={itKey}>
-                                {it.label}
-                              </Checkbox>
-                            )
-                          );
-                        })}
-                      </>
-                    ) : (
-                      col && (
-                        <Checkbox onChange={onChange} value={colKey} key={colKey}>
-                          {col.label}
-                        </Checkbox>
-                      )
-                    )}
-                  </td>
-                );
-              })}
-            </tr>
-          );
-        })}
-      </tbody>
-    </table>
-  );
-};
-
-export default CheckboxTable;
+import { Checkbox } from "antd";
+
+export const CheckboxTable = (props) => {
+  const { data, onChange } = props;
+  return (
+    <table className="tree-checkbox-table">
+      <tbody>
+        {data?.map((row, rowIdx) => {
+          return (
+            <tr className={`tree-checkbox-row tree-checkbox-row-${rowIdx}`} key={rowIdx}>
+              {row?.map((col, colIdx) => {
+                // 隐藏合并项
+                if (col === false) {
+                  return null;
+                }
+                // 注意：col 存在 undefined 的情况
+                const colKey = col?.value;
+                return (
+                  <td
+                    className={`tree-checkbox-col tree-checkbox-col-${colIdx}`}
+                    key={colIdx}
+                    rowSpan={col?._maxRow > 1 ? col?._maxRow : null}
+                  >
+                    {Array.isArray(col) ? (
+                      <>
+                        {col?.map((it, itIdx) => {
+                          const itKey = it?.value;
+                          return (
+                            it && (
+                              <Checkbox onChange={onChange} value={itKey} key={itKey}>
+                                {it.label}
+                              </Checkbox>
+                            )
+                          );
+                        })}
+                      </>
+                    ) : (
+                      col && (
+                        <Checkbox onChange={onChange} value={colKey} key={colKey}>
+                          {col.label}
+                        </Checkbox>
+                      )
+                    )}
+                  </td>
+                );
+              })}
+            </tr>
+          );
+        })}
+      </tbody>
+    </table>
+  );
+};
+
+export default CheckboxTable;