mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-05 05:28:20 +08:00
a2305aa291
* chore(deps): update dependency scroll-into-view-if-needed to v3 * fix: ts error Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: afc163 <afc163@gmail.com>
66 lines
2.2 KiB
TypeScript
66 lines
2.2 KiB
TypeScript
import type { FormInstance as RcFormInstance } from 'rc-field-form';
|
|
import { useForm as useRcForm } from 'rc-field-form';
|
|
import * as React from 'react';
|
|
import scrollIntoView from 'scroll-into-view-if-needed';
|
|
import type { InternalNamePath, NamePath, ScrollOptions } from '../interface';
|
|
import { getFieldId, toArray } from '../util';
|
|
|
|
export interface FormInstance<Values = any> extends RcFormInstance<Values> {
|
|
scrollToField: (name: NamePath, options?: ScrollOptions) => void;
|
|
/** @internal: This is an internal usage. Do not use in your prod */
|
|
__INTERNAL__: {
|
|
/** No! Do not use this in your code! */
|
|
name?: string;
|
|
/** No! Do not use this in your code! */
|
|
itemRef: (name: InternalNamePath) => (node: React.ReactElement) => void;
|
|
};
|
|
getFieldInstance: (name: NamePath) => any;
|
|
}
|
|
|
|
function toNamePathStr(name: NamePath) {
|
|
const namePath = toArray(name);
|
|
return namePath.join('_');
|
|
}
|
|
|
|
export default function useForm<Values = any>(form?: FormInstance<Values>): [FormInstance<Values>] {
|
|
const [rcForm] = useRcForm();
|
|
const itemsRef = React.useRef<Record<string, React.ReactElement>>({});
|
|
|
|
const wrapForm: FormInstance<Values> = React.useMemo(
|
|
() =>
|
|
form ?? {
|
|
...rcForm,
|
|
__INTERNAL__: {
|
|
itemRef: (name: InternalNamePath) => (node: React.ReactElement) => {
|
|
const namePathStr = toNamePathStr(name);
|
|
if (node) {
|
|
itemsRef.current[namePathStr] = node;
|
|
} else {
|
|
delete itemsRef.current[namePathStr];
|
|
}
|
|
},
|
|
},
|
|
scrollToField: (name: NamePath, options: ScrollOptions = {}) => {
|
|
const namePath = toArray(name);
|
|
const fieldId = getFieldId(namePath, wrapForm.__INTERNAL__.name);
|
|
const node: HTMLElement | null = fieldId ? document.getElementById(fieldId) : null;
|
|
|
|
if (node) {
|
|
scrollIntoView(node, {
|
|
scrollMode: 'if-needed',
|
|
block: 'nearest',
|
|
...options,
|
|
} as any);
|
|
}
|
|
},
|
|
getFieldInstance: (name: NamePath) => {
|
|
const namePathStr = toNamePathStr(name);
|
|
return itemsRef.current[namePathStr];
|
|
},
|
|
},
|
|
[form, rcForm],
|
|
);
|
|
|
|
return [wrapForm];
|
|
}
|