From 8607178d51dacf5d6b6a9660b067b0074a3eab5a Mon Sep 17 00:00:00 2001 From: ChenJiYuan <447334358@qq.com> Date: Mon, 11 Mar 2024 07:39:22 +0000 Subject: [PATCH] feat: support scoped form instance - add hook Form.useFormInstance - Form.useWatch add param "scoped: true" --- docs/demo/scopedForm.md | 3 + docs/examples/scopedForm.tsx | 163 ++++++++++++ src/FieldContext.ts | 3 + src/Form.tsx | 1 + src/index.tsx | 7 +- src/interface.ts | 13 +- src/useForm.ts | 3 + src/useFormInstance.ts | 270 ++++++++++++++++++++ src/useWatch.ts | 19 +- tests/scopedForm.test.tsx | 477 +++++++++++++++++++++++++++++++++++ 10 files changed, 950 insertions(+), 9 deletions(-) create mode 100644 docs/demo/scopedForm.md create mode 100644 docs/examples/scopedForm.tsx create mode 100644 src/useFormInstance.ts create mode 100644 tests/scopedForm.test.tsx diff --git a/docs/demo/scopedForm.md b/docs/demo/scopedForm.md new file mode 100644 index 00000000..f3db51fc --- /dev/null +++ b/docs/demo/scopedForm.md @@ -0,0 +1,3 @@ +## scopedForm + + diff --git a/docs/examples/scopedForm.tsx b/docs/examples/scopedForm.tsx new file mode 100644 index 00000000..6fa72479 --- /dev/null +++ b/docs/examples/scopedForm.tsx @@ -0,0 +1,163 @@ +import React from 'react'; +import Form from 'rc-field-form'; +import Input from './components/Input'; +import { isEqual } from 'lodash'; + +const ChildrenContent = (props: { name: number }) => { + + const { name } = props; + + const scopedForm = Form.useFormInstance({ scope: true }); + const college = Form.useWatch([name, 'college'], scopedForm); + const location = Form.useWatch([name, 'location'], { scope: true }); + const [, forceUpdate] = React.useState({}); + + React.useEffect(() => { + scopedForm.setFieldValue([name, 'nonexistent'], 'nonexistent'); + }, [scopedForm, name]); + + return ( +
+
+ + + + {college} +
+
+ + + + {location} +
+
+ + + + Checked +
+
+ + { + () => { + if (scopedForm.getFieldValue([name, 'field0'])) { + return ( + + + + ); + } + return null; + } + } + +
+
+ + +
+
+ {`scopedForm.getFieldsValue({strict: true })：`} + {`${JSON.stringify(scopedForm.getFieldsValue({ strict: true }))}`} +
+
+ scopedForm.getFieldsValue()： + {`${JSON.stringify(scopedForm.getFieldsValue())}`} +
+
+ {`scopedForm.getFieldValue([name, 'location'])：`} + {`${JSON.stringify(scopedForm.getFieldValue([name, 'location']))}`} +
+
+ {`scopedForm.getFieldValue([name, 'nonexistent'])：`} + {`${JSON.stringify(scopedForm.getFieldValue([name, 'nonexistent']))}`} +
+
+ {`scopedForm.getFieldsValue({ strict: true, filter: meta => isEqual(meta.name, [name, 'location']) })：`} + {`${JSON.stringify(scopedForm.getFieldsValue({ strict: true, filter: meta => isEqual(meta.name, [name, 'location']) }))}`} +
+
+ {`scopedForm.getFieldsValue(true, meta => isEqual(meta.name, [name, 'location']))：`} + {`${JSON.stringify(scopedForm.getFieldsValue(true, meta => isEqual(meta.name, [name, 'location'])))}`} +
+
+ {`scopedForm.isFieldsTouched(true)：`} + {`${JSON.stringify(scopedForm.isFieldsTouched(true))}`} +
+
+ {`scopedForm.isFieldsTouched()：`} + {`${JSON.stringify(scopedForm.isFieldsTouched())}`} +
+
+ ); +}; + +export default () => { + const [form] = Form.useForm(); + console.log('rootForm', form); + + return ( +
+
+ <> + + + + + + + + { + (fields, { add }) => ( +
+

Colleges

+ { + fields.map(field => { + return ( + + ); + }) + } + +
+ ) + } + + +
+
+ ); +}; diff --git a/src/FieldContext.ts b/src/FieldContext.ts index dbe08038..e8edb286 100644 --- a/src/FieldContext.ts +++ b/src/FieldContext.ts @@ -25,6 +25,7 @@ const Context = React.createContext({ setFieldsValue: warningFunc, validateFields: warningFunc, submit: warningFunc, + getScopeName: warningFunc, getInternalHooks: () => { warningFunc(); @@ -42,6 +43,8 @@ const Context = React.createContext({ setValidateMessages: warningFunc, setPreserve: warningFunc, getInitialValue: warningFunc, + getFieldEntities: warningFunc, + getFormStore: warningFunc, }; }, }); diff --git a/src/Form.tsx b/src/Form.tsx index 370185cb..af92837b 100644 --- a/src/Form.tsx +++ b/src/Form.tsx @@ -142,6 +142,7 @@ const Form: React.ForwardRefRenderFunction = ( const formContextValue = React.useMemo( () => ({ ...(formInstance as InternalFormInstance), + formInstance, validateTrigger, }), [formInstance, validateTrigger], diff --git a/src/index.tsx b/src/index.tsx index 3c6c6e5d..7631b3a5 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { FormInstance } from './interface'; +import type { FormInstance } from './interface'; import Field from './Field'; import List from './List'; import useForm from './useForm'; @@ -9,6 +9,7 @@ import { FormProvider } from './FormContext'; import FieldContext from './FieldContext'; import ListContext from './ListContext'; import useWatch from './useWatch'; +import useFormInstance from './useFormInstance'; const InternalForm = React.forwardRef(FieldForm) as ( props: FormProps & { ref?: React.Ref> }, @@ -21,6 +22,7 @@ interface RefFormType extends InternalFormType { List: typeof List; useForm: typeof useForm; useWatch: typeof useWatch; + useFormInstance: typeof useFormInstance; } const RefForm: RefFormType = InternalForm as RefFormType; @@ -30,8 +32,9 @@ RefForm.Field = Field; RefForm.List = List; RefForm.useForm = useForm; RefForm.useWatch = useWatch; +RefForm.useFormInstance = useFormInstance; -export { Field, List, useForm, FormProvider, FieldContext, ListContext, useWatch }; +export { Field, List, useForm, FormProvider, FieldContext, ListContext, useWatch, useFormInstance }; export type { FormProps, FormInstance }; diff --git a/src/interface.ts b/src/interface.ts index 723998a6..abde1ab7 100644 --- a/src/interface.ts +++ b/src/interface.ts @@ -1,6 +1,6 @@ import type { ReactElement } from 'react'; import type { DeepNamePath } from './namePathType'; -import type { ReducerAction } from './useForm'; +import type { FormStore, ReducerAction } from './useForm'; export type InternalNamePath = (string | number)[]; export type NamePath = DeepNamePath; @@ -217,6 +217,12 @@ export type WatchCallBack = ( export interface WatchOptions
{ form?: Form; preserve?: boolean; + scope?: boolean; +} + +export interface FormInstanceOptions { + form?: Form; + scope?: boolean; } export interface InternalHooks { @@ -232,6 +238,8 @@ export interface InternalHooks { setValidateMessages: (validateMessages: ValidateMessages) => void; setPreserve: (preserve?: boolean) => void; getInitialValue: (namePath: InternalNamePath) => StoreValue; + getFieldEntities: (prue: boolean) => FieldEntity[]; + getFormStore: () => FormStore; } /** Only return partial when type is not any */ @@ -271,6 +279,7 @@ export interface FormInstance { // New API submit: () => void; + getScopeName: () => InternalNamePath | undefined; } export type InternalFormInstance = Omit & { @@ -283,6 +292,8 @@ export type InternalFormInstance = Omit & { validateTrigger?: string | string[] | false; + formInstance?: FormInstance; + /** * Form component should register some content into store. * We pass the `HOOK_MARK` as key to avoid user call the function. diff --git a/src/useForm.ts b/src/useForm.ts index 2fdd233c..494a6490 100644 --- a/src/useForm.ts +++ b/src/useForm.ts @@ -96,6 +96,7 @@ export class FormStore { setFieldsValue: this.setFieldsValue, validateFields: this.validateFields, submit: this.submit, + getScopeName: () => undefined, _init: true, getInternalHooks: this.getInternalHooks, @@ -119,6 +120,8 @@ export class FormStore { setPreserve: this.setPreserve, getInitialValue: this.getInitialValue, registerWatch: this.registerWatch, + getFieldEntities: this.getFieldEntities, + getFormStore: () => this, }; } diff --git a/src/useFormInstance.ts b/src/useFormInstance.ts new file mode 100644 index 00000000..3774d8ca --- /dev/null +++ b/src/useFormInstance.ts @@ -0,0 +1,270 @@ +import * as React from 'react'; +import type { + FieldData, + FieldError, + FilterFunc, + FormInstance, + FormInstanceOptions, + InternalFormInstance, + InternalNamePath, + Meta, + NamePath, +} from './interface'; +import FieldContext, { HOOK_MARK } from './FieldContext'; +import { getNamePath, getValue, setValue, matchNamePath } from './utils/valueUtil'; + +class ScopedFormStore { + + private form: InternalFormInstance; + + private getScopeName: FormInstance['getScopeName'] = () => undefined; + + private get scopeName() { + return this.getScopeName(); + } + + constructor(form: InternalFormInstance, getScopeName: FormInstance['getScopeName']) { + this.form = form; + this.getScopeName = getScopeName; + } + + private scopedNamePath = (name?: NamePath) => { + return [ + ...getNamePath(this.scopeName), + ...getNamePath(name), + ]; + } + + private scopedNameList = (nameList?: NamePath[]) => { + if (nameList) { + return nameList?.map(this.scopedNamePath); + } + return [this.scopeName]; + } + + private dropScopeName = (name: InternalNamePath) => { + return name.slice(this.scopeName.length); + }; + + private preCheck = any>(fn: T, originFn: T) => { + return ((...args: Parameters) => { + if (this.scopeName) { + return fn(...args); + } + return originFn(...args); + }) as T; + }; + + getForm() { + return { + ...this.form, + getFieldValue: this.preCheck( + this.getFieldValue, + this.form.getFieldValue, + ), + getFieldsValue: this.preCheck( + this.getFieldsValue, + this.form.getFieldsValue, + ), + getFieldError: this.preCheck( + this.getFieldError, + this.form.getFieldError, + ), + getFieldWarning: this.preCheck( + this.getFieldWarning, + this.form.getFieldWarning, + ), + getFieldsError: this.preCheck( + this.getFieldsError, + this.form.getFieldsError, + ), + isFieldsTouched: this.preCheck( + this.isFieldsTouched, + this.form.isFieldsTouched, + ), + isFieldTouched: this.preCheck( + this.isFieldTouched, + this.form.isFieldTouched, + ), + isFieldValidating: this.preCheck( + this.isFieldValidating, + this.form.isFieldValidating, + ), + isFieldsValidating: this.preCheck( + this.isFieldsValidating, + this.form.isFieldsValidating, + ), + resetFields: this.preCheck( + this.resetFields, + this.form.resetFields, + ), + setFields: this.preCheck( + this.setFields, + this.form.setFields, + ), + setFieldValue: this.preCheck( + this.setFieldValue, + this.form.setFieldValue, + ), + setFieldsValue: this.preCheck( + this.setFieldsValue, + this.form.setFieldsValue, + ), + validateFields: this.preCheck( + this.validateFields, + this.form.validateFields, + ), + getScopeName: this.getScopeName, + } as InternalFormInstance; + } + + private getFieldValue = (name: NamePath) => { + return this.form.getFieldValue( + this.scopedNamePath(name), + ); + } + + private getFieldsValue = ( + nameList?: any, + filterFunc?: any, + ) => { + if (nameList === true && !filterFunc) { + return getValue( + this.form.getFieldsValue(true), + this.scopeName, + ); + } + + const mergedFilterFunc = (filter?: FilterFunc): FilterFunc => { + return (meta: Meta) => { + if (meta) { + return matchNamePath(meta.name, this.scopeName, true) + && (!filter || filter({ ...meta, name: this.dropScopeName(meta.name) })); + } + return !filter || filter(meta); + }; + }; + + if (nameList && typeof nameList === 'object' && !Array.isArray(nameList)) { + return getValue( + this.form.getFieldsValue({ + ...nameList, + filter: mergedFilterFunc(nameList.filter), + }), + this.scopeName, + ); + } + + return getValue( + this.form.getFieldsValue( + Array.isArray(nameList) ? this.scopedNameList(nameList) : nameList, + mergedFilterFunc(filterFunc), + ), + this.scopeName, + ); + } + + private getFieldError = (name: NamePath) => this.form.getFieldError(this.scopedNamePath(name)); + + private getFieldWarning = (name: NamePath) => this.form.getFieldWarning(this.scopedNamePath(name)); + + private getFieldsError = (nameList?: NamePath) => { + const fieldErrors = nameList + ? this.form.getFieldsError(this.scopedNameList(nameList)) + : this.form.getFieldsError().filter(field => matchNamePath(field.name, this.scopeName, true)); + return fieldErrors.map(field => ({ ...field, name: this.dropScopeName(field.name) })); + }; + + private isFieldsTouched = (...args: any[]) => { + const [arg0, arg1] = args; + + // this first param is array; eg: isFieldsTouched([['field0'], ['field1']]) + if (Array.isArray(arg0)) { + return this.form.isFieldsTouched(this.scopedNameList(arg0), arg1); + } + + // the params are only true; eg: isFieldsTouched(true) + if (args.length === 1 && arg0 === true) { + const internalHooks = this.form.getInternalHooks(HOOK_MARK); + const fieldEntities = internalHooks.getFieldEntities(true); + return fieldEntities.every(entity => { + return !matchNamePath(entity.getNamePath(), this.scopeName, true) || entity.isFieldTouched() || entity.isList(); + }); + } + + // no params; eg: isFieldsTouched() + return this.form.isFieldsTouched([this.scopeName], false); + }; + + private isFieldTouched = (name: NamePath) => this.form.isFieldTouched(this.scopedNamePath(name)); + + private isFieldValidating = (name: NamePath) => this.form.isFieldValidating(this.scopedNamePath(name)); + + private isFieldsValidating = (nameList?: NamePath[]) => this.form.isFieldsValidating(this.scopedNameList(nameList)); + + private resetFields = (nameList?: NamePath[]) => this.form.resetFields(this.scopedNameList(nameList)); + + private setFields = (fields: FieldData[]) => this.form.setFields(fields.map(field => ({ ...field, name: this.scopedNamePath(field.name) }))); + + private setFieldValue = (name: NamePath, value: any) => this.form.setFieldValue(this.scopedNamePath(name), value); + + private setFieldsValue = (values: any) => { + return this.form.setFieldsValue( + setValue(this.form.getFieldsValue(true), this.scopeName, values), + ); + }; + + private validateFields = (arg1?: any, arg2?: any) => { + + const promiseWrap = async (promise: Promise) => { + return promise.then(res => getValue(res, this.scopeName)).catch((err: any) => { + return Promise.reject({ + ...err, + errorFields: (err.errorFields as FieldError[]).map(field => ({ ...field, name: this.dropScopeName(field.name) })), + values: getValue(err.values, this.scopeName), + }); + }); + }; + // this first param is array; eg: validateFields([['field0'], ['field1']]) + if (Array.isArray(arg1)) { + return promiseWrap( + this.form.validateFields(this.scopedNameList(arg1), arg2), + ); + } + // the first param is object, or no params; eg: validateFields() or validateFields({ validateOnly: true, dirty: true }) + return promiseWrap( + this.form.validateFields([this.scopeName], { ...arg1, recursive: true }), + ); + }; + +} + +function useFormInstance(options?: FormInstanceOptions): FormInstance | undefined { + const { form, scope } = options || {}; + const fieldContext = React.useContext(FieldContext); + const mergedForm = (form || fieldContext.formInstance) as InternalFormInstance; + + const prefixNameRef = React.useRef(fieldContext.prefixName); + prefixNameRef.current = fieldContext.prefixName; + + return React.useMemo(() => { + if (!mergedForm || !mergedForm._init) { + return; + } + + if (scope) { + const internalHooks = mergedForm.getInternalHooks(HOOK_MARK); + const scopedFormStore = new ScopedFormStore( + // get non-scoped formInstance + internalHooks.getFormStore().getForm(), + () => prefixNameRef.current, + ); + return scopedFormStore.getForm(); + } + + return mergedForm; + }, [mergedForm, scope]); + +} + +export default useFormInstance; diff --git a/src/useWatch.ts b/src/useWatch.ts index 127c04d5..a4100f14 100644 --- a/src/useWatch.ts +++ b/src/useWatch.ts @@ -1,6 +1,6 @@ import warning from 'rc-util/lib/warning'; -import { useContext, useEffect, useMemo, useRef, useState } from 'react'; -import FieldContext, { HOOK_MARK } from './FieldContext'; +import { useEffect, useMemo, useRef, useState } from 'react'; +import { HOOK_MARK } from './FieldContext'; import type { FormInstance, InternalFormInstance, @@ -11,6 +11,7 @@ import type { } from './interface'; import { isFormInstance } from './utils/typeUtil'; import { getNamePath, getValue } from './utils/valueUtil'; +import useFormInstance from './useFormInstance'; type ReturnPromise = T extends Promise ? ValueType : never; type GetGeneric = ReturnPromise>; @@ -111,8 +112,10 @@ function useWatch( const valueStrRef = useRef(valueStr); valueStrRef.current = valueStr; - const fieldContext = useContext(FieldContext); - const formInstance = (form as InternalFormInstance) || fieldContext; + const formInstance = useFormInstance({ + form, + scope: options.scope, + }) as InternalFormInstance; const isValidForm = formInstance && formInstance._init; // Warning if not exist form instance @@ -136,7 +139,7 @@ function useWatch( return; } - const { getFieldsValue, getInternalHooks } = formInstance; + const { getFieldsValue, getInternalHooks, getScopeName } = formInstance; const { registerWatch } = getInternalHooks(HOOK_MARK); const getWatchValue = (values: any, allValues: any) => { @@ -147,7 +150,11 @@ function useWatch( }; const cancelRegister = registerWatch((values, allValues) => { - const newValue = getWatchValue(values, allValues); + const scopeName = getScopeName() ?? []; + const newValue = getWatchValue( + getValue(values, scopeName), + getValue(allValues, scopeName), + ); const nextValueStr = stringify(newValue); // Compare stringify in case it's nest object diff --git a/tests/scopedForm.test.tsx b/tests/scopedForm.test.tsx new file mode 100644 index 00000000..b6c32085 --- /dev/null +++ b/tests/scopedForm.test.tsx @@ -0,0 +1,477 @@ +import React, { forwardRef } from 'react'; +import type { ForwardedRef, PropsWithChildren } from 'react'; +import { act, renderHook } from '@testing-library/react'; +import Form from '../src'; +import type { FormInstance } from '../src'; +import { isEqual } from 'lodash'; +import timeout from './common/timeout'; + +const CreateForm = forwardRef((props: PropsWithChildren, ref: ForwardedRef) => { + const { children } = props; + return ( + + + + + + + + + + + + { + (fields, { add }) => ( + <> + { + fields.map(field => { + return ( + + + + + + + + + + + + ); + }) + } + + {children} + + ) + } + + + ); +}); + +describe('Form.useFormInstance', () => { + + it('useFormInstance returns undefined', () => { + const { result } = renderHook(() => Form.useFormInstance()); + + expect(result.current).toBeUndefined(); + }); + + it('useFormInstance returns FormInstance', () => { + const formRef = React.createRef(); + const { result } = renderHook(() => Form.useFormInstance(), { + wrapper({ children }) { + return ( +
{children}
+ ); + }, + }); + + expect(result.current).toBeTruthy(); + expect(formRef.current).toBe(result.current); + }); + + it('useFormInstance({ scope: true }) returns new FormInstance', () => { + const formRef = React.createRef(); + const { result } = renderHook(() => Form.useFormInstance({ scope: true }), { + wrapper({ children }) { + return ( +
{children}
+ ); + }, + }); + + expect(result.current).toBeTruthy(); + expect(formRef.current).not.toBe(result.current); + }); + + it('useFormInstance({ scope: true }) works fine in top level', () => { + const formRef = React.createRef(); + const { result } = renderHook(() => Form.useFormInstance({ scope: true }), { + wrapper({ children }) { + return ( +
+ + + + + + + {children} +
+ ); + }, + }); + + expect(result.current.getScopeName()).toBeUndefined(); + expect(formRef.current.getScopeName()).toBeUndefined(); + + expect(result.current.getFieldsValue()).toEqual(formRef.current.getFieldsValue()); + expect(result.current.getFieldsValue(true)).toBe(formRef.current.getFieldsValue(true)); + expect(result.current.getFieldsValue(['field0'])).toEqual(formRef.current.getFieldsValue(['field0'])); + expect(result.current.getFieldValue(['field0'])).toEqual(formRef.current.getFieldValue(['field0'])); + + }); + + const renderScopedForm = () => { + const formRef = React.createRef(); + const { result } = renderHook(() => Form.useFormInstance({ scope: true }), { + wrapper({ children }) { + return ( + {children} + ); + }, + }); + return { formRef, result }; + }; + + it('useFormInstance({ scope: true }).getFieldsValue works fine in sub level', async () => { + + const { result } = renderScopedForm(); + + expect(result.current.getScopeName()).toEqual(['list']); + + act(() => { + result.current.setFieldValue([0, 'nonexistent'], 'nonexistent'); + }); + + // getFieldsValue + expect(result.current.getFieldsValue({ strict: true })).toEqual( + [ + { + listfield0: 'listfield0', + }, + ] + ); + expect(result.current.getFieldsValue(true)).toBe(result.current.getFieldsValue(true)); + expect(result.current.getFieldsValue(true)).toEqual( + [ + { + listfield0: 'listfield0', + nonexistent: 'nonexistent', + }, + ] + ); + expect(result.current.getFieldsValue({ + strict: true, + filter: (meta) => { + return isEqual(meta.name, [0, 'listfield0']); + }, + })).toEqual([{ listfield0: 'listfield0' }]); + expect(result.current.getFieldsValue([ + [0, 'listfield0'], + [0, 'listfield1'], + ], (meta) => { + return isEqual(meta.name, [0, 'listfield0']); + })).toEqual([{ listfield0: 'listfield0' }]); + + const mock = jest.fn(); + const values = result.current.getFieldsValue([ + [0, 'listfield0'], + [0, 'notexistfield'], + ], (meta) => { + if (!meta) { + mock(); + } + return true; + }); + expect(mock).toHaveBeenCalled(); + expect(values).toEqual([{ listfield0: 'listfield0' }]); + + }); + + it('useFormInstance({ scope: true }).(get|set)FieldValue works fine in sub level', async () => { + const { result } = renderScopedForm(); + expect(result.current.getFieldValue([0, 'listfield0'])).toBe('listfield0'); + expect(result.current.getFieldValue([0, 'listfield1'])).toBeUndefined(); + act(() => { + result.current.setFieldValue([0, 'listfield1'], 'modifiedlistfield1'); + result.current.setFieldValue([0, 'nonexistent'], 'nonexistent'); + }); + expect(result.current.getFieldValue([0, 'listfield1'])).toBe('modifiedlistfield1'); + expect(result.current.getFieldValue([0, 'nonexistent'])).toBe('nonexistent'); + }); + + it('useFormInstance({ scope: true }).setFieldsValue() works fine in sub level', () => { + const { result } = renderScopedForm(); + act(() => { + result.current.setFieldsValue([{ + listfield1: 'listfield1', + }]); + }); + expect(result.current.getFieldsValue()).toEqual([{ listfield1: 'listfield1' }]); + }); + + it('useFormInstance({ scope: true }).getFieldError() works fine in sub level', async () => { + const { result, formRef } = renderScopedForm(); + + await act(async () => { + result.current.setFieldValue([0, 'listfield0'], 'Capital'); + await result.current.validateFields().catch(e => e); + }); + expect(result.current.getFieldError([0, 'listfield1'])).toEqual(['listfield1 is required']); + expect(result.current.getFieldWarning([0, 'listfield0'])).toEqual(['Capital letters are not recommended']); + const fieldsError = result.current.getFieldsError(); + expect(fieldsError.find(field => isEqual(field.name, [0, 'listfield0']))?.warnings).toEqual(['Capital letters are not recommended']); + expect(fieldsError.find(field => isEqual(field.name, [0, 'listfield1']))?.errors).toEqual(['listfield1 is required']); + expect(result.current.getFieldsError([ + [0, 'listfield1'], + ])[0]?.errors).toEqual(['listfield1 is required']); + expect(formRef.current.getFieldError(['field0'])).toEqual([]); + + await act(async () => { + result.current.setFieldsValue([]); + await result.current.validateFields().catch(e => e); + }); + expect(result.current.getFieldError([])).toEqual(['At least one is required']); + + }); + + it('useFormInstance({ scope: true }).validateFields() works fine in sub level', async () => { + const { result, formRef } = renderScopedForm(); + let values: any; + let errors: any; + act(() => { + result.current.setFieldsValue([ + { + listfield0: 'Capital', + }, + {}, + ]); + }); + await act(async () => { + try { + values = await result.current.validateFields(); + } catch (e) { + errors = e; + } + }); + expect(values).toBeUndefined(); + expect(errors?.errorFields).toEqual([ + { name: [0, 'listfield1'], errors: ['listfield1 is required'], warnings: [] }, + { name: [1, 'listfield1'], errors: ['listfield1 is required'], warnings: [] }, + ]); + expect(errors?.values).toEqual([{ listfield0: 'Capital', }, {}]); + expect(formRef.current.getFieldError('field0')).toEqual([]); + + await act(async () => { + await formRef.current.validateFields().catch(e => e); + }); + expect(formRef.current.getFieldError('field2')).toEqual(['field2 is required']); + + act(() => { + formRef.current.resetFields(); + }); + await act(async () => { + await result.current.validateFields([ + [0, 'listfield0'] + ]).catch(e => e); + }); + expect(result.current.getFieldError([0, 'listfield1'])).toEqual([]); + + await act(async () => { + await result.current.validateFields([ + [0, 'listfield1'] + ]).catch(e => e); + }); + expect(result.current.getFieldError([0, 'listfield1'])).toEqual(['listfield1 is required']); + + }); + + it('useFormInstance({ scope: true }).isFieldTouched() works fine in sub level', () => { + const { result } = renderScopedForm(); + act(() => { + result.current.setFields([ + { + name: [0, 'listfield0'], + touched: true, + }, + ]); + }); + expect(result.current.isFieldTouched([0, 'listfield0'])).toBe(true); + expect(result.current.isFieldTouched([0, 'listfield1'])).toBe(false); + expect(result.current.isFieldsTouched([0])).toBe(true); + expect( + result.current.isFieldsTouched([ + [0, 'listfield0'], + [0, 'listfield1'], + ]), + ).toBe(true); + expect( + result.current.isFieldsTouched([ + [0, 'listfield0'], + [0, 'listfield1'], + ], true), + ).toBe(false); + expect(result.current.isFieldsTouched(true)).toBe(false); + expect(result.current.isFieldsTouched()).toBe(true); + + act(() => { + result.current.setFields([ + { + name: [0, 'listfield1'], + touched: true, + }, + { + name: [0, 'listfield2'], + touched: true, + }, + ]); + }); + expect(result.current.isFieldsTouched(true)).toBe(true); + + }); + + it('useFormInstance({ scope: true }).isFieldValidating() works fine in sub level', async () => { + const { result, formRef } = renderScopedForm(); + + act(() => { + formRef.current.validateFields(['field2']).catch(e => e); + }); + + expect(formRef.current.isFieldsValidating()).toBe(true); + expect(result.current.isFieldsValidating()).toBe(false); + + await timeout(); + + act(() => { + result.current.validateFields().catch(e => e); + }); + + expect(result.current.isFieldValidating([0, 'listfield0'])).toBe(true); + expect(result.current.isFieldValidating([0, 'listfield2'])).toBe(false); + + expect(result.current.isFieldsValidating()).toBe(true); + expect(result.current.isFieldsValidating([ + [0, 'listfield0'], + [0, 'listfield1'], + [0, 'listfield2'], + ])).toBe(true); + expect(result.current.isFieldsValidating([ + [0, 'listfield2'], + ])).toBe(false); + + }); + + it('useFormInstance({ scope: true }).resetFields() works fine in sub level', () => { + const { result, formRef } = renderScopedForm(); + + act(() => { + formRef.current.setFields([ + { + name: 'field2', + touched: true, + }, + { + name: ['list', 0, 'listfield0'], + touched: true, + }, + { + name: ['list', 0, 'listfield1'], + touched: true, + }, + ]); + }); + expect(formRef.current.isFieldTouched('field2')).toBe(true); + expect(result.current.isFieldsTouched()).toBe(true); + expect(result.current.isFieldsTouched(true)).toBe(false); + expect(result.current.isFieldsTouched([ + [0, 'listfield0'], + ])).toBe(true); + + act(() => { + result.current.resetFields([ + [0, 'listfield0'], + ]); + }); + expect(formRef.current.isFieldTouched('field2')).toBe(true); + expect(result.current.isFieldsTouched([ + [0, 'listfield0'], + ])).toBe(false); + + act(() => { + result.current.resetFields(); + }); + expect(formRef.current.isFieldTouched('field2')).toBe(true); + expect(result.current.isFieldsTouched()).toBe(false); + }); + +}); + +describe('Form.useWatch', () => { + it('Form.useWatch({ scope: true })', () => { + const formRef = React.createRef(); + const { result } = renderHook(() => Form.useWatch([0, 'listfield0'], { scope: true }), { + wrapper({ children }) { + return ( + {children} + ); + }, + }); + + expect(result.current).toBe('listfield0'); + act(() => { + formRef.current.setFieldValue(['list', 0, 'listfield0'], 'modified'); + }); + expect(result.current).toBe('modified'); + + }); +});