@hzab/list-render 1.11.0 → 1.12.1

package/src/FormModal/index.tsx

@@ -1,210 +1,210 @@
-import { forwardRef, useEffect, useImperativeHandle, useRef, useState, useMemo } from "react";
-import _ from "lodash";
-
-import { Modal, Drawer, Button, message } from "antd";
-
-import FormRender from "@hzab/form-render";
-
-import "./index.less";
-
-let _formData = null;
-
-export interface IFormRender {
-  setValues: Function;
-  reset: Function;
-  validate: Function;
-  values: Object;
-}
-export interface IFormRef {
-  formRender: IFormRender;
-}
-
-/**
- * 表单弹层，包含弹窗、抽屉两种模式
- * @param props
- * @param parentRef
- * @returns
- */
-export function FormModal(props, parentRef) {
-  const { modalMode, Slots = {}, modalConf = {}, modalProps = {} } = props;
-  const [loading, setLoading] = useState(false);
-  const [title, setTitle] = useState("新增");
-  const [open, setOpen] = useState(false);
-  const formRef = useRef<IFormRef>();
-  const scenarioRef = useRef<string>("create");
-
-  const FormSlot = useMemo(() => props.Slots?.FormSlot, [props.Slots?.FormSlot]);
-
-  function show(formData = props.formInitialValues, title, scenario = "create") {
-    scenarioRef.current = scenario || "create";
-    setOpen(true);
-    // 处理 formRef.current 为 undefined 的问题
-    if (formRef.current?.formRender?.setValues) {
-      formRef.current?.formRender?.setValues(formData);
-      _formData = null;
-    } else {
-      _formData = formData;
-    }
-    setTitle(title || "新增");
-  }
-
-  function close() {
-    props.onClose && props.onClose();
-    setOpen(false);
-    formRef.current?.formRender?.reset();
-  }
-
-  useImperativeHandle(parentRef, () => ({
-    show,
-    close,
-    cancel: close,
-    onOk,
-    formRef,
-  }));
-
-  // Hack: 解决 FormModal DetailModal 相互影响的问题
-  if (!open) {
-    return null;
-  }
-
-  function onOk() {
-    validate().then(async () => {
-      const submitForm = _.cloneDeep(await formRef.current?.formRender?.values);
-      if (modalConf.beforeSubmit) {
-        const isContinue = await modalConf.beforeSubmit(submitForm, {
-          cancel: close,
-          formRef,
-          scenario: scenarioRef.current,
-        });
-        if (isContinue === false) {
-          return;
-        }
-      }
-
-      try {
-        setLoading(true);
-        await (props.onSubmit && props.onSubmit(submitForm));
-        close();
-      } catch (error) {
-        console.error(error);
-      }
-      setLoading(false);
-    });
-  }
-
-  /**
-   * 校验表单
-   * @returns
-   */
-  function validate(hideMessage = false) {
-    return new Promise((resolve, reject) => {
-      formRef.current?.formRender
-        ?.validate()
-        .then((values) => {
-          resolve(values);
-        })
-        .catch((err) => {
-          reject(err);
-          console.error("Error validate: ", err);
-          !hideMessage && message.error("输入有误！");
-        });
-    });
-  }
-
-  let footer = undefined;
-  const options = {
-    cancel: close,
-    onOk,
-    close,
-    formRef,
-    validate,
-    scenario: scenarioRef.current,
-  };
-  if (modalConf?.footer) {
-    footer = typeof modalConf?.footer === "function" ? modalConf.footer({ ...options, options }) : modalConf?.footer;
-  } else {
-    footer = [];
-
-    if (Slots.modalFooterPre) {
-      footer.push(<Slots.modalFooterPre key="pre" options={options} />);
-    }
-
-    footer.push(
-      <Button key="cancel" onClick={close}>
-        {modalConf.cancelText || "取 消"}
-      </Button>,
-    );
-
-    if (Slots.modalFooterCenter) {
-      footer.push(<Slots.modalFooterCenter key="center" options={options} />);
-    }
-
-    footer.push(
-      <Button key="confirm" type="primary" onClick={onOk} loading={loading}>
-        {modalConf.okText || "确 定"}
-      </Button>,
-    );
-
-    if (Slots.modalFooterSuffix) {
-      footer.push(<Slots.modalFooterSuffix key="suffix" options={options} />);
-    }
-  }
-
-  /**
-   * 解决 show 函数中 formRef.current 为 undefined 的问题
-   */
-  function didMount() {
-    props.modalFormMount && props.modalFormMount();
-    if (_formData) {
-      formRef.current?.formRender?.setValues(_formData);
-      _formData = null;
-    }
-  }
-
-  const CModal = modalMode === "drawer" ? Drawer : Modal;
-  const _modalProps = {
-    className: "form-modal",
-    wrapClassName: "form-modal",
-    title: title,
-    visible: open,
-    open: open,
-    onClose: close,
-    onCancel: close,
-    onOk: onOk,
-    footer: footer,
-    maskClosable: modalProps.maskClosable || false,
-    width: modalConf?.width ?? 720,
-    // 解决弹窗不销毁，表单远程数据没有更新的问题
-    destroyOnClose: true,
-    ...modalProps,
-  };
-
-  return (
-    <CModal {..._modalProps}>
-      {FormSlot ? (
-        <FormSlot {...props} formRef={formRef} scenario={scenarioRef.current} schema={props.schema} />
-      ) : (
-        <FormRender
-          {...props.formProps}
-          ref={formRef}
-          schema={props.schema}
-          schemaScope={{
-            scenario: scenarioRef.current,
-            ...(props.schemaScope || {}),
-          }}
-          components={props.components}
-        ></FormRender>
-      )}
-      <DidMount didMount={didMount} />
-    </CModal>
-  );
-}
-
-function DidMount(props) {
-  useEffect(() => {
-    props.didMount();
-  }, []);
-  return null;
-}
-
-export default forwardRef(FormModal);
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState, useMemo } from "react";
+import _ from "lodash";
+
+import { Modal, Drawer, Button, message } from "antd";
+
+import FormRender from "@hzab/form-render";
+
+import "./index.less";
+
+let _formData = null;
+
+export interface IFormRender {
+  setValues: Function;
+  reset: Function;
+  validate: Function;
+  values: Object;
+}
+export interface IFormRef {
+  formRender: IFormRender;
+}
+
+/**
+ * 表单弹层，包含弹窗、抽屉两种模式
+ * @param props
+ * @param parentRef
+ * @returns
+ */
+export function FormModal(props, parentRef) {
+  const { modalMode, Slots = {}, modalConf = {}, modalProps = {} } = props;
+  const [loading, setLoading] = useState(false);
+  const [title, setTitle] = useState("新增");
+  const [open, setOpen] = useState(false);
+  const formRef = useRef<IFormRef>();
+  const scenarioRef = useRef<string>("create");
+
+  const FormSlot = useMemo(() => props.Slots?.FormSlot, [props.Slots?.FormSlot]);
+
+  function show(formData = props.formInitialValues, title, scenario = "create") {
+    scenarioRef.current = scenario || "create";
+    setOpen(true);
+    // 处理 formRef.current 为 undefined 的问题
+    if (formRef.current?.formRender?.setValues) {
+      formRef.current?.formRender?.setValues(formData);
+      _formData = null;
+    } else {
+      _formData = formData;
+    }
+    setTitle(title || "新增");
+  }
+
+  function close() {
+    props.onClose && props.onClose();
+    setOpen(false);
+    formRef.current?.formRender?.reset();
+  }
+
+  useImperativeHandle(parentRef, () => ({
+    show,
+    close,
+    cancel: close,
+    onOk,
+    formRef,
+  }));
+
+  // Hack: 解决 FormModal DetailModal 相互影响的问题
+  if (!open) {
+    return null;
+  }
+
+  function onOk() {
+    validate().then(async () => {
+      const submitForm = _.cloneDeep(await formRef.current?.formRender?.values);
+      if (modalConf.beforeSubmit) {
+        const isContinue = await modalConf.beforeSubmit(submitForm, {
+          cancel: close,
+          formRef,
+          scenario: scenarioRef.current,
+        });
+        if (isContinue === false) {
+          return;
+        }
+      }
+
+      try {
+        setLoading(true);
+        await (props.onSubmit && props.onSubmit(submitForm));
+        close();
+      } catch (error) {
+        console.error(error);
+      }
+      setLoading(false);
+    });
+  }
+
+  /**
+   * 校验表单
+   * @returns
+   */
+  function validate(hideMessage = false) {
+    return new Promise((resolve, reject) => {
+      formRef.current?.formRender
+        ?.validate()
+        .then((values) => {
+          resolve(values);
+        })
+        .catch((err) => {
+          reject(err);
+          console.error("Error validate: ", err);
+          !hideMessage && message.error("输入有误！");
+        });
+    });
+  }
+
+  let footer = undefined;
+  const options = {
+    cancel: close,
+    onOk,
+    close,
+    formRef,
+    validate,
+    scenario: scenarioRef.current,
+  };
+  if (modalConf?.footer) {
+    footer = typeof modalConf?.footer === "function" ? modalConf.footer({ ...options, options }) : modalConf?.footer;
+  } else {
+    footer = [];
+
+    if (Slots.modalFooterPre) {
+      footer.push(<Slots.modalFooterPre key="pre" options={options} />);
+    }
+
+    footer.push(
+      <Button key="cancel" onClick={close}>
+        {modalConf.cancelText || "取 消"}
+      </Button>,
+    );
+
+    if (Slots.modalFooterCenter) {
+      footer.push(<Slots.modalFooterCenter key="center" options={options} />);
+    }
+
+    footer.push(
+      <Button key="confirm" type="primary" onClick={onOk} loading={loading}>
+        {modalConf.okText || "确 定"}
+      </Button>,
+    );
+
+    if (Slots.modalFooterSuffix) {
+      footer.push(<Slots.modalFooterSuffix key="suffix" options={options} />);
+    }
+  }
+
+  /**
+   * 解决 show 函数中 formRef.current 为 undefined 的问题
+   */
+  function didMount() {
+    props.modalFormMount && props.modalFormMount();
+    if (_formData) {
+      formRef.current?.formRender?.setValues(_formData);
+      _formData = null;
+    }
+  }
+
+  const CModal = modalMode === "drawer" ? Drawer : Modal;
+  const _modalProps = {
+    className: "form-modal",
+    wrapClassName: "form-modal",
+    title: title,
+    visible: open,
+    open: open,
+    onClose: close,
+    onCancel: close,
+    onOk: onOk,
+    footer: footer,
+    maskClosable: modalProps.maskClosable || false,
+    width: modalConf?.width ?? 720,
+    // 解决弹窗不销毁，表单远程数据没有更新的问题
+    destroyOnClose: true,
+    ...modalProps,
+  };
+
+  return (
+    <CModal {..._modalProps}>
+      {FormSlot ? (
+        <FormSlot {...props} formRef={formRef} scenario={scenarioRef.current} schema={props.schema} />
+      ) : (
+        <FormRender
+          {...props.formProps}
+          ref={formRef}
+          schema={props.schema}
+          schemaScope={{
+            scenario: scenarioRef.current,
+            ...(props.schemaScope || {}),
+          }}
+          components={props.components}
+        ></FormRender>
+      )}
+      <DidMount didMount={didMount} />
+    </CModal>
+  );
+}
+
+function DidMount(props) {
+  useEffect(() => {
+    props.didMount();
+  }, []);
+  return null;
+}
+
+export default forwardRef(FormModal);

package/src/card-render/index.jsx

@@ -1,123 +1,127 @@
-import { useEffect, useState, useMemo, useCallback, useRef } from "react";
-import { Table, Button, Popconfirm, Tooltip, Checkbox, Popover } from "antd";
-import { QuestionCircleOutlined, FilterOutlined, SettingOutlined } from "@ant-design/icons";
-import _ from "lodash";
-import DetailRender from "@hzab/schema-descriptions";
-import { removeInTableFalseFields } from "../common/utils";
-import "./index.less";
-import { use } from "react";
-
-const scenario = "table-render";
-
-function CardRender(props) {
-  const [schema, setSchema] = useState({});
-
-  const { config = {}, cardProps = {}, query = {}, i18n, onEdit, onDel, onSearch, getList, Slots = {} } = props;
-  const { tableDel = "删除", tableEdit = "编辑", tableDelTip = "确认删除该项?", tableDetail = "详情" } = i18n || {};
-  const { columns = 3, CardItemRender, hasEdit, hasDel, hasDelTips, hasDetail = false } = config || {};
-
-  const functionProps = { onEdit: onEdit, onDel: onDel, onSearch, getList };
-
-  useEffect(() => {
-    const schemas = removeInTableFalseFields(props?.schema);
-    setSchema(schemas);
-  }, [props?.schema, props?.schema?.schema]);
-
-  const getColRender = (record, index) => {
-    const _colConf = props.config?.colConf?._$actions || {};
-
-    const slotProps = { record, index, ...functionProps };
-
-    if (Slots?.tableActionsSlot) {
-      return <Slots.tableActionsSlot {...slotProps} />;
-    }
-
-    //编辑按钮权限
-    const _hasEdit = hasEdit && typeof hasEdit === "function" ? hasEdit(record, index) : hasEdit !== false;
-
-    //详情按钮权限
-    const _hasDetail = hasDetail && typeof hasDetail === "function" ? hasDetail(record, index) : hasDetail !== false;
-
-    //删除按钮权限
-    const _hasDel = hasDel && typeof hasDel === "function" ? hasDel(record, index) : hasDel !== false;
-
-    //删除按钮提示
-    const delTips =
-      hasDelTips && typeof hasDelTips === "function" ? hasDelTips(record, index) : hasDelTips || tableDelTip;
-
-    return (
-      <div style={{ width: _colConf?.width, maxWidth: "100%" }}>
-        {Slots?.actionPrefixSlot && <Slots.actionPrefixSlot {...slotProps} />}
-        {_hasDetail ? (
-          <Button
-            type="link"
-            onClick={() => {
-              props.onDetail && props.onDetail(record, index);
-            }}
-          >
-            {tableDetail}
-          </Button>
-        ) : null}
-        {_hasEdit ? (
-          <Button
-            type="link"
-            onClick={() => {
-              props.onEdit && props.onEdit(record, index);
-            }}
-          >
-            {tableEdit}
-          </Button>
-        ) : null}
-        {Slots?.actionCenterSlot && <Slots.actionCenterSlot {...slotProps} />}
-        {_hasDel ? (
-          <Popconfirm
-            placement="topRight"
-            title={delTips}
-            onConfirm={() => {
-              props.onDel && props.onDel(record, index);
-            }}
-          >
-            <Button type="link" danger>
-              {tableDel}
-            </Button>
-          </Popconfirm>
-        ) : null}
-        {Slots?.actionSuffixSlot && <Slots.actionSuffixSlot {...slotProps} />}
-      </div>
-    );
-  };
-
-  const ItemRender = ({ item, index }) => {
-    return CardItemRender ? (
-      <CardItemRender item={item} index={index} functionProps={functionProps} />
-    ) : (
-      <DetailRender
-        config={props.config}
-        schema={schema}
-        bordered={false}
-        data={item}
-        schemaScope={{ scenario: "table-render", ...props.schemaScope }}
-        components={props.components}
-        {...cardProps}
-      />
-    );
-  };
-  return (
-    <div className="card-render-wrap" style={{ gridTemplateColumns: `repeat(${columns}, 1fr` }}>
-      {props.list?.map((item, index) => {
-        return (
-          <div key={item["id"]} className="item-render-card">
-            {props.hasAction !== false ? (
-              <div className="item-render-card-title">{getColRender(item, index)}</div>
-            ) : null}
-            <div className="item-render-card-content">
-              <ItemRender item={item} index={index} />
-            </div>
-          </div>
-        );
-      })}
-    </div>
-  );
-}
-
-export default CardRender;
+import { useEffect, useState, useMemo, useCallback, useRef } from "react";
+import { Table, Button, Popconfirm, Tooltip, Checkbox, Popover, Spin } from "antd";
+import { QuestionCircleOutlined, FilterOutlined, SettingOutlined } from "@ant-design/icons";
+import _ from "lodash";
+import DetailRender from "@hzab/schema-descriptions";
+import { removeInTableFalseFields } from "../common/utils";
+import "./index.less";
+import { use } from "react";
+
+const scenario = "table-render";
+
+function CardRender(props) {
+  const [schema, setSchema] = useState({});
+
+  const { config = {}, cardProps = {}, query = {}, i18n, onEdit, onDel, onSearch, getList, Slots = {}, loading } = props;
+  const { tableDel = "删除", tableEdit = "编辑", tableDelTip = "确认删除该项?", tableDetail = "详情" } = i18n || {};
+  const { columns = 3, CardItemRender, hasEdit, hasDel, hasDelTips, hasDetail = false } = config || {};
+
+  const functionProps = { onEdit: onEdit, onDel: onDel, onSearch, getList };
+
+  useEffect(() => {
+    const schemas = removeInTableFalseFields(props?.schema);
+    setSchema(schemas);
+  }, [props?.schema, props?.schema?.schema]);
+
+  const getColRender = (record, index) => {
+    const _colConf = props.config?.colConf?._$actions || {};
+
+    const slotProps = { record, index, ...functionProps };
+
+    if (Slots?.tableActionsSlot) {
+      return <Slots.tableActionsSlot {...slotProps} />;
+    }
+
+    //编辑按钮权限
+    const _hasEdit = hasEdit && typeof hasEdit === "function" ? hasEdit(record, index) : hasEdit !== false;
+
+    //详情按钮权限
+    const _hasDetail = hasDetail && typeof hasDetail === "function" ? hasDetail(record, index) : hasDetail !== false;
+
+    //删除按钮权限
+    const _hasDel = hasDel && typeof hasDel === "function" ? hasDel(record, index) : hasDel !== false;
+
+    //删除按钮提示
+    const delTips =
+      hasDelTips && typeof hasDelTips === "function" ? hasDelTips(record, index) : hasDelTips || tableDelTip;
+
+    return (
+      <div style={{ width: _colConf?.width, maxWidth: "100%" }}>
+        {Slots?.actionPrefixSlot && <Slots.actionPrefixSlot {...slotProps} />}
+        {_hasDetail ? (
+          <Button
+            type="link"
+            onClick={() => {
+              props.onDetail && props.onDetail(record, index);
+            }}
+          >
+            {tableDetail}
+          </Button>
+        ) : null}
+        {_hasEdit ? (
+          <Button
+            type="link"
+            onClick={() => {
+              props.onEdit && props.onEdit(record, index);
+            }}
+          >
+            {tableEdit}
+          </Button>
+        ) : null}
+        {Slots?.actionCenterSlot && <Slots.actionCenterSlot {...slotProps} />}
+        {_hasDel ? (
+          <Popconfirm
+            placement="topRight"
+            title={delTips}
+            onConfirm={() => {
+              props.onDel && props.onDel(record, index);
+            }}
+          >
+            <Button type="link" danger>
+              {tableDel}
+            </Button>
+          </Popconfirm>
+        ) : null}
+        {Slots?.actionSuffixSlot && <Slots.actionSuffixSlot {...slotProps} />}
+      </div>
+    );
+  };
+
+  const ItemRender = ({ item, index }) => {
+    return CardItemRender ? (
+      <CardItemRender item={item} index={index} functionProps={functionProps} />
+    ) : (
+      <DetailRender
+        config={props.config}
+        schema={schema}
+        bordered={false}
+        data={item}
+        schemaScope={{ scenario: "table-render", ...props.schemaScope }}
+        components={props.components}
+        {...cardProps}
+      />
+    );
+  };
+
+  return (
+    <Spin spinning={loading}>
+      <div className="card-render-wrap" style={{ gridTemplateColumns: `repeat(${columns}, 1fr` }}>
+        {props.list?.map((item, index) => {
+          return (
+            <div key={item["id"]} className="item-render-card">
+              {props.hasAction !== false ? (
+                <div className="item-render-card-title">{getColRender(item, index)}</div>
+              ) : null}
+              <div className="item-render-card-content">
+                <ItemRender item={item} index={index} />
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </Spin>
+
+  );
+}
+
+export default CardRender;