feat: FR 增加 footer 透传 actionBtns

alibaba · Feb 21, 2024 · 7a172b3 · 7a172b3
2 parents e22e631 + f5fa160
commit 7a172b3
Show file tree

Hide file tree

Showing 6 changed files with 55 additions and 27 deletions.
diff --git a/docs/form-render/advanced-layout.md b/docs/form-render/advanced-layout.md
@@ -343,4 +343,27 @@ export default () => {
     />
   );
 }
-```
+```
+
+- `footer` dom 元素透传
+```jsx
+import React, { useState } from 'react';
+import { Button, Space, Form, Radio } from 'antd';
+import FormRender, { useForm } from 'form-render';
+import schema from './schema/simple';
+
+export default () => {
+  const form = useForm();
+
+  return (
+    <FormRender
+      schema={schema}
+      form={form}
+      maxWidth={360}
+      footer={(dom) => (
+        <Space>{dom}</Space>
+      )}
+    />
+  );
+}
+```
diff --git a/package.json b/package.json
@@ -60,7 +60,7 @@
     "@vitest/coverage-c8": "^0.25.8",
     "@vitest/ui": "^0.25.7",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.7",
-    "antd": "^4.x",
+    "antd": "^5.x",
     "babel-jest": "^27.4.4",
     "babel-plugin-import": "^1.13.0",
     "babel-plugin-no-debugger": "^0.0.1",

diff --git a/packages/form-render/CHANGELOG.md b/packages/form-render/CHANGELOG.md
@@ -1,5 +1,8 @@
 # 更新日志
 
+### 2.4.0 
+- [+] FR 增加 footer 透传 actionBtns 
+
 ### 2.3.9
 - [+] TableList 增加 hideEmptyTable 属性
 

diff --git a/packages/form-render/package.json b/packages/form-render/package.json
@@ -1,6 +1,6 @@
 {
   "name": "form-render",
-  "version": "2.3.10",
+  "version": "2.4.0",
   "description": "通过 JSON Schema 生成标准 Form，常用于自定义搭建配置界面生成",
   "keywords": [
     "Form",

diff --git a/packages/form-render/src/form-core/index.tsx b/packages/form-render/src/form-core/index.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useContext, FC } from 'react';
+import React, { useEffect, useContext, FC, useMemo } from 'react';
 import { Form, Row, Col, Button, Space, ConfigProvider } from 'antd';
 import classNames from 'classnames';
 import { cloneDeep } from 'lodash-es';
@@ -195,6 +195,26 @@ const FormCore:FC<FRProps> = (props) => {
   };
 
   const operlabelCol = getFormItemLayout(column, {}, { labelWidth })?.labelCol;
+
+  const actionBtns = useMemo(() => {
+    const result: React.JSX.Element[] = [];
+    if (!footer?.reset?.hide) {
+      result.push(
+        <Button {...footer?.reset} onClick={() => form.resetFields()}>
+          {footer?.reset?.text || t('reset')}
+        </Button>
+      );
+    }
+    if (!footer?.submit?.hide) {
+      result.push(
+        <Button type='primary' onClick={form.submit} {...footer?.submit}>
+          {footer?.submit?.text || t('submit')}
+        </Button>
+      );
+    }
+    return result;
+  }, []);
+
   return (
     <Form
       className={classNames('fr-form', { [className]: !!className } )}
@@ -218,28 +238,10 @@ const FormCore:FC<FRProps> = (props) => {
               labelCol={operlabelCol}
               className='fr-hide-label'
             >
-              {isFunction(footer) ? ( 
-                <Space>{footer()}</Space>
-              ): (
-                <Space>
-                  {!footer?.reset?.hide && (
-                    <Button 
-                      {...footer?.reset} 
-                      onClick={() => form.resetFields()}
-                    >
-                      {footer?.reset?.text || t('reset')}
-                    </Button>
-                  )}
-                  {!footer?.submit?.hide && (
-                    <Button
-                      type='primary'
-                      onClick={form.submit}
-                      {...footer?.submit}
-                    >
-                      {footer?.submit?.text || t('submit')}
-                    </Button>
-                  )}
-                </Space>
+               {isFunction(footer) ? (
+                <Space>{footer(actionBtns)}</Space>
+              ) : (
+                <Space>{actionBtns}</Space>
               )}
             </Form.Item>
           </Col>

diff --git a/packages/form-render/src/type.ts b/packages/form-render/src/type.ts
@@ -403,7 +403,7 @@ export interface FRProps extends Omit<AntdFormProps, 'form'> {
   methods?: Record<string, Function>;
   operateExtra?: React.ReactNode;
   maxWidth?: number | string;
-  footer?: boolean | (() => React.ReactNode) | Partial<ActionProps> ;
+  footer?: boolean | ((dom: React.JSX.Element[]) => React.ReactNode) | Partial<ActionProps> ;
 }
 
 export interface SearchProps<RecordType> extends Omit<FRProps, 'form'> {