Merge pull request #1478 from leshalv/master

支持 footer 透传dom元素
alibaba · Feb 21, 2024 · f5fa160 · f5fa160
2 parents f692511 + 084aefc
commit f5fa160
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 24 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/packages/form-render/src/form-core/index.tsx b/packages/form-render/src/form-core/index.tsx
@@ -195,6 +195,23 @@ const FormCore:FC<FRProps> = (props) => {
   };
 
   const operlabelCol = getFormItemLayout(column, {}, { labelWidth })?.labelCol;
+
+  const footerDom: React.JSX.Element[] = [];
+  if (!footer?.reset?.hide) {
+    footerDom.push(
+      <Button {...footer?.reset} onClick={() => form.resetFields()}>
+        {footer?.reset?.text || t('reset')}
+      </Button>
+    );
+  }
+  if (!footer?.submit?.hide) {
+    footerDom.push(
+      <Button type="primary" onClick={form.submit} {...footer?.submit}>
+        {footer?.submit?.text || t('submit')}
+      </Button>
+    );
+  }
+
   return (
     <Form
       className={classNames('fr-form', { [className]: !!className } )}
@@ -218,28 +235,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(footerDom)}</Space>
+              ) : (
+                <Space>{footerDom}</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'> {