zy-react-library 1.0.2 → 1.0.4

package/components/FormBuilder/FormBuilder.d.ts

@@ -1,6 +1,6 @@
 import type { FormInstance, FormProps } from "antd/es/form";
 import type { Gutter } from "antd/es/grid/row";
-import type { FC } from "react";
+import type { FC, ReactNode } from "react";
 import type { FormOption, FormValues } from "./FormItemsRenderer";
 
 /**
@@ -16,11 +16,23 @@ export interface FormBuilderProps extends Omit<FormProps, "form"> {
   /** 占据栅格列数，默认 12 */
   span?: number | string;
   /** 表单实例（通过 Form.useForm() 创建） */
-  form: FormInstance;
+  form?: FormInstance;
   /** 自动生成必填规则，默认 true */
   useAutoGenerateRequired?: boolean;
   /** 表单提交回调 */
-  onFinish?: (values: any) => void;
+  onFinish?: (values: FormValues) => void;
+  /** 是否显示操作按钮区域，默认 true */
+  showActionButtons?: boolean;
+  /** 提交按钮文字，默认为"提交" */
+  submitButtonText?: string;
+  /** 重置按钮文字，默认为"重置" */
+  resetButtonText?: string;
+  /** 是否显示提交按钮，默认 true */
+  showSubmitButton?: boolean;
+  /** 是否显示重置按钮，默认 true */
+  showResetButton?: boolean;
+  /** 自定义操作按钮组 */
+  customActionButtons?: ReactNode;
 }
 
 /**

package/components/FormBuilder/FormBuilder.js

@@ -1,4 +1,4 @@
-import { Form, Row } from "antd";
+import { Button, Col, Form, Row, Space } from "antd";
 import FormItemsRenderer from "./FormItemsRenderer";
 
 /**
@@ -13,9 +13,23 @@ const FormBuilder = (props) => {
     labelCol = { span: 4 },
     onFinish,
     useAutoGenerateRequired = true,
+    showActionButtons = true,
+    submitButtonText = "提交",
+    resetButtonText = "重置",
+    showSubmitButton = true,
+    showResetButton = true,
+    customActionButtons,
+    form: externalForm,
     ...restProps
   } = props;
 
+  const [internalForm] = Form.useForm();
+  const form = externalForm || internalForm;
+
+  const handleReset = () => {
+    form.resetFields();
+  };
+
   return (
     <Form
       labelCol={labelCol}
@@ -23,6 +37,7 @@ const FormBuilder = (props) => {
       wrapperCol={{ span: 24 - labelCol.span }}
       onFinish={onFinish}
       initialValues={values}
+      form={form}
       {...restProps}
     >
       <Row gutter={gutter}>
@@ -32,6 +47,26 @@ const FormBuilder = (props) => {
           useAutoGenerateRequired={useAutoGenerateRequired}
         />
       </Row>
+      {showActionButtons && (
+        <Row gutter={gutter} style={{ marginTop: 24 }}>
+          <Col span={24} style={{ textAlign: "center" }}>
+            {customActionButtons || (
+              <Space>
+                {showSubmitButton && (
+                  <Button type="primary" htmlType="submit">
+                    {submitButtonText}
+                  </Button>
+                )}
+                {showResetButton && (
+                  <Button onClick={handleReset} style={{ marginRight: 8 }}>
+                    {resetButtonText}
+                  </Button>
+                )}
+              </Space>
+            )}
+          </Col>
+        </Row>
+      )}
     </Form>
   );
 };

package/components/FormBuilder/FormItemsRenderer.js

@@ -90,7 +90,7 @@ const FormItemsRenderer = ({
     // 支持动态计算 required
     const required = typeof option.required === "function"
       ? option.required(form.getFieldsValue())
-      : (option.required || true);
+      : (option.required ?? true);
 
     if (required) {
       const isBlurTrigger = !option.render || [
@@ -274,7 +274,7 @@ const FormItemsRenderer = ({
         }
 
         // 如果配置了 shouldUpdate 或 dependencies，使用 Form.Item 的联动机制
-        if (option.shouldUpdate || option.dependencies || option?.componentProps?.shouldUpdate || option?.componentProps?.dependencies) {
+        if ((option.shouldUpdate ?? option.dependencies) || (option?.componentProps?.shouldUpdate ?? option?.componentProps?.dependencies)) {
           return (
             option.customizeRender
               ? (renderFormControl(option))
@@ -282,14 +282,14 @@ const FormItemsRenderer = ({
                   <Col key={option.name || index} span={itemSpan} style={style}>
                     <Form.Item
                       noStyle
-                      shouldUpdate={option.shouldUpdate || option?.componentProps?.shouldUpdate}
+                      shouldUpdate={option.shouldUpdate ?? option?.componentProps?.shouldUpdate}
                       dependencies={option.dependencies || option?.componentProps?.dependencies}
                     >
                       {(form) => {
                       // 支持动态计算 hidden
                         const hidden = typeof option.hidden === "function"
                           ? option.hidden(form.getFieldsValue())
-                          : (option.hidden || false);
+                          : (option.hidden ?? false);
 
                         if (hidden)
                           return null;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "zy-react-library",
   "private": false,
-  "version": "1.0.2",
+  "version": "1.0.4",
   "type": "module",
   "description": "",
   "author": "LiuJiaNan",