diff --git a/src/Field.tsx b/src/Field.tsx index 9b229ba0..25cd9eea 100644 --- a/src/Field.tsx +++ b/src/Field.tsx @@ -26,6 +26,7 @@ import { getNamePath, getValue, } from './utils/valueUtil'; +import PrefixContext from './PrefixContext'; const EMPTY_ERRORS: any[] = []; @@ -88,6 +89,8 @@ export interface InternalFieldProps { /** @private Pass context as prop instead of context api * since class component can not get context in constructor */ fieldContext?: InternalFormInstance; + + prefixName?: InternalNamePath; } export interface FieldProps @@ -151,6 +154,7 @@ class Field extends React.Component implements F initEntityValue(this); } } + props: { name?: NamePath; rules?: Rule[]; dependencies?: NamePath[]; initialValue?: any; }; public componentDidMount() { const { shouldUpdate, fieldContext } = this.props; @@ -187,8 +191,7 @@ class Field extends React.Component implements F // ================================== Utils ================================== public getNamePath = (): InternalNamePath => { - const { name, fieldContext } = this.props; - const { prefixName = [] }: InternalFormInstance = fieldContext; + const { name, prefixName = [] } = this.props; return name !== undefined ? [...prefixName, ...name] : []; }; @@ -624,6 +627,7 @@ class Field extends React.Component implements F function WrapperField({ name, ...restProps }: FieldProps) { const fieldContext = React.useContext(FieldContext); + const prefixName = React.useContext(PrefixContext); const namePath = name !== undefined ? getNamePath(name) : undefined; @@ -643,7 +647,7 @@ function WrapperField({ name, ...restProps }: FieldProps) warning(false, '`preserve` should not apply on Form.List fields.'); } - return ; + return ; } export default WrapperField; diff --git a/src/List.tsx b/src/List.tsx index 7a2ae9a5..ab566d7c 100644 --- a/src/List.tsx +++ b/src/List.tsx @@ -2,6 +2,7 @@ import * as React from 'react'; import warning from 'rc-util/lib/warning'; import type { InternalNamePath, NamePath, StoreValue, ValidatorRule, Meta } from './interface'; import FieldContext from './FieldContext'; +import PrefixContext from './PrefixContext'; import Field from './Field'; import { move, getNamePath } from './utils/valueUtil'; import type { ListContextProps } from './ListContext'; @@ -45,12 +46,11 @@ const List: React.FunctionComponent = ({ }); const keyManager = keyRef.current; + const prefixNameContext = React.useContext(PrefixContext); const prefixName: InternalNamePath = React.useMemo(() => { - const parentPrefixName = getNamePath(context.prefixName) || []; + const parentPrefixName = getNamePath(prefixNameContext) || []; return [...parentPrefixName, ...getNamePath(name)]; - }, [context.prefixName, name]); - - const fieldContext = React.useMemo(() => ({ ...context, prefixName }), [context, prefixName]); + }, [prefixNameContext, name]); // List context const listContext = React.useMemo( @@ -79,7 +79,7 @@ const List: React.FunctionComponent = ({ return ( - + = ({ ); }} - + ); }; diff --git a/src/PrefixContext.ts b/src/PrefixContext.ts new file mode 100644 index 00000000..fa73e1e7 --- /dev/null +++ b/src/PrefixContext.ts @@ -0,0 +1,7 @@ + +import * as React from 'react'; +import { InternalNamePath } from './interface'; + +const Context = React.createContext([]); + +export default Context; diff --git a/src/index.tsx b/src/index.tsx index a726fb8f..727501bc 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -7,6 +7,7 @@ import type { FormProps } from './Form'; import FieldForm from './Form'; import { FormProvider } from './FormContext'; import FieldContext from './FieldContext'; +import PrefixContext from './PrefixContext'; import ListContext from './ListContext'; import useWatch from './useWatch'; @@ -31,7 +32,7 @@ RefForm.List = List; RefForm.useForm = useForm; RefForm.useWatch = useWatch; -export { FormInstance, Field, List, useForm, FormProvider, FieldContext, ListContext, useWatch }; +export { FormInstance, Field, List, useForm, FormProvider, FieldContext, ListContext, PrefixContext, useWatch }; export type { FormProps }; diff --git a/src/interface.ts b/src/interface.ts index c01f0839..6bed3750 100644 --- a/src/interface.ts +++ b/src/interface.ts @@ -247,11 +247,6 @@ export interface FormInstance { export type InternalFormInstance = Omit & { validateFields: InternalValidateFields; - /** - * Passed by field context props - */ - prefixName?: InternalNamePath; - validateTrigger?: string | string[] | false; /**