8000 feat(Form): FormRef support forward nativeElement by Wxh16144 · Pull Request #8632 · ant-design/pro-components · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

feat(Form): FormRef support forward nativeElement #8632

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Aug 13, 2024
Merged

feat(Form): FormRef support forward nativeElement #8632

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
3d76974
deps: update
Wxh16144 Aug 6, 2024
0fa8c26
feat(Form): `FormRef` support forward nativeElement
Wxh16144 Aug 6, 2024
686d6bb
chore(TS): fix type
Wxh16144 Aug 6, 2024
9b645c6
Update packages/form/src/BaseForm/BaseForm.tsx
Wxh16144 Aug 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,7 +132,7 @@
"prettier-plugin-packagejson": "^2.5.1",
"pretty-quick": "^3.3.1",
"query-string": "^6.14.1",
"rc-field-form": "^1.44.0",
"rc-field-form": "^2.2.1",
"rc-footer": "^0.6.8",
"rc-resize-observer": "^1.4.0",
"rc-steps": "^6.0.1",
Expand Down
2 changes: 1 addition & 1 deletion packages/form/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@
"peerDependencies": {
"@types/lodash-es": "^4.17.12",
"antd": "^4.24.15 || ^5.11.2",
"rc-field-form": "^1.22.0",
"rc-field-form": ">=1.22.0",
"react": ">=17.0.0",
"react-dom": ">=17.0.0"
},
Expand Down
12 changes: 9 additions & 3 deletions packages/form/src/BaseForm/BaseForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ import type { FormInstance, FormItemProps, FormProps } from 'antd';
import { ConfigProvider, Form, Spin } from 'antd';

import type { NamePath } from 'antd/lib/form/interface';
import type { FormRef as RcFormRef } from 'rc-field-form/lib/interface';
import classNames from 'classnames';
import type dayjs from 'dayjs';
import omit from 'omit.js';
Expand Down Expand Up @@ -99,10 +100,12 @@ export type CommonFormProps<
*
* @example 获取 name 的值 formRef.current.getFieldValue("name");
* @example 获取所有的表单值 formRef.current.getFieldsValue(true);
*
* - formRef.current.nativeElement => `2.29.1+`
*/
formRef?:
| React.MutableRefObject<ProFormInstance<T> | undefined>
| React.RefObject<ProFormInstance<T> | undefined>;
| React.MutableRefObject<ProFormRef<T> | undefined>
| React.RefObject<ProFormRef<T> | undefined>;

/**
* @name 同步结果到 url 中
Expand Down Expand Up @@ -219,6 +222,7 @@ const genParams = (
};

type ProFormInstance<T = any> = FormInstance<T> & ProFormInstanceType<T>;
type ProFormRef<T = any> = ProFormInstanceType<T> & RcFormRef;

/**
* It takes a name path and converts it to an array.
Expand Down Expand Up @@ -526,7 +530,7 @@ function BaseForm<T = Record<string, any>, U = Record<string, any>>(
loading: propsLoading,
...propRest
} = props;
const formRef = useRef<ProFormInstance<any>>({} as any);
const formRef = useRef<ProFormRef<any>>({} as any);
const [loading, setLoading] = useMountMergeState<boolean>(false, {
onChange: onLoadingChange,
value: propsLoading,
Expand Down Expand Up @@ -777,9 +781,11 @@ function BaseForm<T = Record<string, any>, U = Record<string, any>>(
autoComplete="off"
form={form}
{...omit(propRest, [
'ref',
'labelWidth',
'autoFocusFirstInput',
] as any[])}
ref={(instance) => formRef.current.nativeElement = instance?.nativeElement}
// 组合 urlSearch 和 initialValues
initialValues={
syncToUrlAsImportant
Expand Down
2 changes: 1 addition & 1 deletion packages/form/src/layouts/StepsForm/StepForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ function StepForm<T = Record<string, any>>(stepNativeProps: StepFormProps<T>) {
}

return (
<BaseForm
<BaseForm<T>
formRef={formRef}
(values) => {
if (restProps.name) {
Expand Down
2 changes: 1 addition & 1 deletion packages/table/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@
},
"peerDependencies": {
"antd": "^4.24.15 || ^5.11.2",
"rc-field-form": "^1.22.0",
"rc-field-form": ">=1.22.0",
"react": ">=17.0.0",
"react-dom": ">=17.0.0"
},
Expand Down
24 changes: 2 additions & 22 deletions pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

13 changes: 13 additions & 0 deletions tests/form/base.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -427,6 +427,19 @@
wrapper.unmount();
});

// https://github.com/ant-design/pro-components/issues/8471
it('📦 support formRef nativeElement', async () => {
const formRef = React.createRef<any>();
const wrapper = render(
<ProForm formRef={formRef}>
<ProFormText name="test" />
</ProForm>,
);

expect(await wrapper.container.querySelector('form'))
.toBe(formRef.current?.nativeElement);
})

Check notice

Code scanning / CodeQL

Semicolon insertion Note test

Avoid automated semicolon insertion (98% of all statements in
the enclosing function
Loading
have an explicit semicolon).

it('📦 ProForm support namePath is array', async () => {
const fn = vi.fn();
const wrapper = render(
Expand Down
Loading
0