refactor: rc-component/form (#747)

* refactor: rc-component/form

* fix: fix

* fix: fix

* fix: fix

* fix: fix

* fix: fix

* chore: bump father plugin

---------

Co-authored-by: 二货机器人 <smith3816@gmail.com>

Author: li-jia-nan

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "rc-field-form",
-  "version": "2.7.0",
+  "name": "@rc-component/form",
+  "version": "1.0.0-0",
   "description": "React Form Component",
   "typings": "es/index.d.ts",
   "engines": {
@@ -49,18 +49,17 @@
     "react-dom": ">=16.9.0"
   },
   "dependencies": {
-    "@babel/runtime": "^7.18.0",
     "@rc-component/async-validator": "^5.0.3",
-    "rc-util": "^5.32.2"
+    "@rc-component/util": "^1.1.0"
   },
   "devDependencies": {
-    "@rc-component/father-plugin": "^1.0.0",
+    "@rc-component/father-plugin": "^2.0.1",
     "@testing-library/jest-dom": "^6.1.4",
     "@testing-library/react": "^16.0.0",
     "@types/jest": "^29.2.5",
     "@types/lodash": "^4.14.135",
     "@types/node": "^22.0.2",
-    "@types/react": "^18.0.0",
+    "@types/react": "^19.0.6",
     "@types/react-dom": "^19.0.1",
     "@umijs/fabric": "^4.0.1",
     "dumi": "^2.0.0",

src/Field.tsx

@@ -1,6 +1,6 @@
-import toChildrenArray from 'rc-util/lib/Children/toArray';
-import isEqual from 'rc-util/lib/isEqual';
-import warning from 'rc-util/lib/warning';
+import toChildrenArray from '@rc-component/util/lib/Children/toArray';
+import isEqual from '@rc-component/util/lib/isEqual';
+import warning from '@rc-component/util/lib/warning';
 import * as React from 'react';
 import FieldContext, { HOOK_MARK } from './FieldContext';
 import type {
@@ -112,11 +112,6 @@ export interface FieldState {
 class Field extends React.Component<InternalFieldProps, FieldState> implements FieldEntity {
   public static contextType = FieldContext;
 
-  public static defaultProps = {
-    trigger: 'onChange',
-    valuePropName: 'value',
-  };
-
   public state = {
     resetCount: 0,
   };
@@ -548,9 +543,10 @@ class Field extends React.Component<InternalFieldProps, FieldState> implements F
     }
 
     // Filed element only
-    const childList = toChildrenArray(children);
+    const childList = toChildrenArray(children as any);
+
     if (childList.length !== 1 || !React.isValidElement(childList[0])) {
-      return { child: childList, isFunction: false };
+      return { child: childList as React.ReactNode, isFunction: false };
     }
 
     return { child: childList[0], isFunction: false };
@@ -566,11 +562,11 @@ class Field extends React.Component<InternalFieldProps, FieldState> implements F
   public getControlled = (childProps: ChildProps = {}) => {
     const {
       name,
-      trigger,
+      trigger = 'onChange',
       validateTrigger,
       getValueFromEvent,
       normalize,
-      valuePropName,
+      valuePropName = 'value',
       getValueProps,
       fieldContext,
     } = this.props;

src/FieldContext.ts

@@ -1,4 +1,4 @@
-import warning from 'rc-util/lib/warning';
+import warning from '@rc-component/util/lib/warning';
 import * as React from 'react';
 import type { InternalFormInstance } from './interface';
 

src/Form.tsx

@@ -17,7 +17,7 @@ import ListContext from './ListContext';
 
 type BaseFormProps = Omit<React.FormHTMLAttributes<HTMLFormElement>, 'onSubmit' | 'children'>;
 
-type RenderProps = (values: Store, form: FormInstance) => JSX.Element | React.ReactNode;
+type RenderProps = (values: Store, form: FormInstance) => React.ReactNode;
 
 export interface FormProps<Values = any> extends BaseFormProps {
   initialValues?: Store;
@@ -138,7 +138,7 @@ const Form: React.ForwardRefRenderFunction<FormRef, FormProps> = (
   useSubscribe(!childrenRenderProps);
 
   // Listen if fields provided. We use ref to save prev data here to avoid additional render
-  const prevFieldsRef = React.useRef<FieldData[] | undefined>();
+  const prevFieldsRef = React.useRef<FieldData[] | undefined>(null);
   React.useEffect(() => {
     if (!isSimilar(prevFieldsRef.current || [], fields || [])) {
       formInstance.setFields(fields || []);

src/List.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import warning from 'rc-util/lib/warning';
+import warning from '@rc-component/util/lib/warning';
 import type { InternalNamePath, NamePath, StoreValue, ValidatorRule, Meta } from './interface';
 import FieldContext from './FieldContext';
 import Field from './Field';
@@ -24,11 +24,7 @@ export interface ListProps<Values = any> {
   rules?: ValidatorRule[];
   validateTrigger?: string | string[] | false;
   initialValue?: any[];
-  children?: (
-    fields: ListField[],
-    operations: ListOperations,
-    meta: Meta,
-  ) => JSX.Element | React.ReactNode;
+  children?: (fields: ListField[], operations: ListOperations, meta: Meta) => React.ReactNode;
 
   /** @private Passed by Form.List props. Do not use since it will break by path check. */
   isListField?: boolean;

src/useForm.ts

@@ -1,5 +1,5 @@
-import { merge } from 'rc-util/lib/utils/set';
-import warning from 'rc-util/lib/warning';
+import { merge } from '@rc-component/util/lib/utils/set';
+import warning from '@rc-component/util/lib/warning';
 import * as React from 'react';
 import { HOOK_MARK } from './FieldContext';
 import type {
@@ -1027,7 +1027,7 @@ export class FormStore {
 }
 
 function useForm<Values = any>(form?: FormInstance<Values>): [FormInstance<Values>] {
-  const formRef = React.useRef<FormInstance>();
+  const formRef = React.useRef<FormInstance>(null);
   const [, forceUpdate] = React.useState({});
 
   if (!formRef.current) {

src/useWatch.ts

@@ -1,4 +1,4 @@
-import warning from 'rc-util/lib/warning';
+import warning from '@rc-component/util/lib/warning';
 import { useContext, useEffect, useMemo, useRef, useState } from 'react';
 import FieldContext, { HOOK_MARK } from './FieldContext';
 import type {

src/utils/validateUtil.ts

@@ -1,6 +1,6 @@
 import RawAsyncValidator from '@rc-component/async-validator';
 import * as React from 'react';
-import warning from 'rc-util/lib/warning';
+import warning from '@rc-component/util/lib/warning';
 import type {
   InternalNamePath,
   InternalValidateOptions,
@@ -9,7 +9,7 @@ import type {
   RuleError,
 } from '../interface';
 import { defaultValidateMessages } from './messages';
-import { merge } from 'rc-util/lib/utils/set';
+import { merge } from '@rc-component/util/lib/utils/set';
 
 // Remove incorrect original ts define
 const AsyncValidator: any = RawAsyncValidator;

src/utils/valueUtil.ts

@@ -1,5 +1,5 @@
-import getValue from 'rc-util/lib/utils/get';
-import setValue from 'rc-util/lib/utils/set';
+import getValue from '@rc-component/util/lib/utils/get';
+import setValue from '@rc-component/util/lib/utils/set';
 import type { InternalNamePath, NamePath, Store, EventArgs } from '../interface';
 import { toArray } from './typeUtil';
 

tests/index.test.tsx

@@ -1,5 +1,5 @@
 import { act, fireEvent, render } from '@testing-library/react';
-import { resetWarned } from 'rc-util/lib/warning';
+import { resetWarned } from '@rc-component/util/lib/warning';
 import React from 'react';
 import type { FormInstance } from '../src';
 import Form, { Field, useForm } from '../src';

tests/initialValue.test.tsx

@@ -1,5 +1,5 @@
 import { act, fireEvent, render } from '@testing-library/react';
-import { resetWarned } from 'rc-util/lib/warning';
+import { resetWarned } from '@rc-component/util/lib/warning';
 import React, { useState } from 'react';
 import Form, { Field, List, useForm, type FormInstance } from '../src';
 import { changeValue, getInput } from './common';

tests/list.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { fireEvent, render, act } from '@testing-library/react';
-import { resetWarned } from 'rc-util/lib/warning';
+import { resetWarned } from '@rc-component/util/lib/warning';
 import Form, { Field, List } from '../src';
 import type { FormProps } from '../src';
 import type { ListField, ListOperations, ListProps } from '../src/List';

tests/useWatch.test.tsx

@@ -288,9 +288,13 @@ describe('useWatch', () => {
       const more = Form.useWatch(['age', 'name', 'gender'], form);
       const demo = Form.useWatch<string>(['demo']);
 
-      const values2 = Form.useWatch(values => ({ newName: values.name, newAge: values.age }), form);
-      const values3 = Form.useWatch<FieldType, { newName?: string }>(values => ({
-        newName: values.name,
+      const values2 = Form.useWatch(
+        _values => ({ newName: _values.name, newAge: _values.age }),
+        form,
+      );
+
+      const values3 = Form.useWatch<FieldType, { newName?: string }>(_values => ({
+        newName: _values.name,
       }));
 
       return (
@@ -393,7 +397,7 @@ describe('useWatch', () => {
   it('first undefined', () => {
     const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
     const Demo: React.FC = () => {
-      const formRef = useRef<FormInstance>();
+      const formRef = useRef<FormInstance>(undefined);
       const name = Form.useWatch('name', formRef.current);
       const [, setUpdate] = useState({});
       return (