mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-27 20:49:53 +08:00
Code Issues Actions 39 Packages Projects Releases Wiki Activity

feat: Form ref adding nativeElement (#48841)

Browse Source 
* feat: ref adding nativeForm

* feat: optimized code

* feat: optimized code

* fix: update type

* feat: optimized code

* feat: update rc-field-form

* feat: update

* feat: update

* feat: update

---------

Signed-off-by: Wanpan <wanpan96@163.com>
This commit is contained in:
Wanpan 2024-05-15 15:19:27 +08:00 committed by GitHub
parent 7cdeecfe1e
commit 1d138e999c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 19 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
components/form/Form.tsx
View File

@ -3,7 +3,7 @@ import { useMemo } from 'react';
import classNames from 'classnames';
import FieldForm, { List, useWatch } from 'rc-field-form';
import type { FormProps as RcFormProps } from 'rc-field-form/lib/Form';
import type { InternalNamePath, ValidateErrorEntity } from 'rc-field-form/lib/interface';
import type { FormRef, InternalNamePath, ValidateErrorEntity } from 'rc-field-form/lib/interface';
import type { Options } from 'scroll-into-view-if-needed';
import { ConfigContext } from '../config-provider';
@ -51,7 +51,7 @@ export interface FormProps<Values = any> extends Omit<RcFormProps<Values>, 'form
variant?: Variant;
}
const InternalForm: React.ForwardRefRenderFunction<FormInstance, FormProps> = (props, ref) => {
const InternalForm: React.ForwardRefRenderFunction<FormRef, FormProps> = (props, ref) => {
const contextDisabled = React.useContext(DisabledContext);
const { getPrefixCls, direction, form: contextForm } = React.useContext(ConfigContext);
@ -159,7 +159,11 @@ const InternalForm: React.ForwardRefRenderFunction<FormInstance, FormProps> = (p
],
);
React.useImperativeHandle(ref, () => wrapForm);
const nativeElementRef = React.useRef<FormRef>(null);
React.useImperativeHandle(ref, () => ({
...wrapForm,
nativeElement: nativeElementRef.current?.nativeElement,
}));
const scrollToField = (options: boolean | Options, fieldName: InternalNamePath) => {
if (options) {
@ -203,6 +207,7 @@ const InternalForm: React.ForwardRefRenderFunction<FormInstance, FormProps> = (p
name={name}
onFinishFailed={onInternalFinishFailed}
form={wrapForm}
ref={nativeElementRef}
style={{ ...contextForm?.style, ...style }}
className={formClassName}
/>
@ -214,8 +219,8 @@ const InternalForm: React.ForwardRefRenderFunction<FormInstance, FormProps> = (p
);
};
const Form = React.forwardRef<FormInstance, FormProps>(InternalForm) as (<Values = any>(
props: React.PropsWithChildren<FormProps<Values>> & React.RefAttributes<FormInstance<Values>>,
const Form = React.forwardRef<FormRef, FormProps>(InternalForm) as (<Values = any>(
props: React.PropsWithChildren<FormProps<Values>> & React.RefAttributes<FormRef<Values>>,
) => React.ReactElement) &
Pick<React.FC, 'displayName'>;

8
components/form/__tests__/ref.test.tsx
View File

@ -1,4 +1,5 @@
import React from 'react';
import type { FormRef } from 'rc-field-form/lib/interface';
import Form from '..';
import { fireEvent, render } from '../../../tests/utils';
@ -86,4 +87,11 @@ describe('Form.Ref', () => {
fireEvent.click(container.querySelector('.ref-remove')!);
expect(onRef).toHaveBeenCalledWith(undefined, null);
});
it('should have nativeForm', () => {
const formRef = React.createRef<FormRef>();
const { container } = render(<Form ref={formRef} />);
expect(container.querySelector('.ant-form')).toBe(formRef.current?.nativeElement);
});
});

2
package.json
View File

@ -136,7 +136,7 @@
"rc-dialog": "~9.4.0",
"rc-drawer": "~7.1.0",
"rc-dropdown": "~4.2.0",
"rc-field-form": "~2.1.0",
"rc-field-form": "~2.2.0",
"rc-image": "~7.7.0",
"rc-input": "~1.4.5",
"rc-input-number": "~9.0.0",