chore: merge master

Author: zombieJ

.gitignore

@@ -6,6 +6,7 @@
 /yarn-error.log
 /yarn.lock
 /package-lock.json
+pnpm-lock.yaml
 
 # production
 /dist
@@ -29,4 +30,4 @@
 .dumi/
 package-lock.json
 
-bun.lockb
+bun.lockb

docs/examples/useWatch-selector.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-shadow */
 import React from 'react';
 import Form, { Field } from 'rc-field-form';
 import Input from './components/Input';
@@ -10,11 +11,15 @@ type FieldType = {
 
 export default () => {
   const [form] = Form.useForm<FieldType>();
+  const firstEmptyObject = Form.useWatch(values => ({ newName: values.name }), form);
+  console.log('firstEmptyObject', firstEmptyObject);
+
   const values = Form.useWatch(
     values => ({ init: values.init, newName: values.name, newAge: values.age }),
     { form, preserve: true },
   );
   console.log('values', values);
+
   return (
     <>
       <Form form={form} initialValues={{ init: 'init', name: 'aaa' }}>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rc-component/form",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "description": "React Form Component",
   "typings": "es/index.d.ts",
   "engines": {
@@ -50,7 +50,8 @@
   },
   "dependencies": {
     "@rc-component/async-validator": "^5.0.3",
-    "@rc-component/util": "^1.1.0"
+    "@rc-component/util": "^1.3.0",
+    "clsx": "^2.1.1"
   },
   "devDependencies": {
     "@rc-component/father-plugin": "^2.0.1",

src/Form.tsx

@@ -14,7 +14,8 @@ import type { FormContextProps } from './FormContext';
 import FormContext from './FormContext';
 import { isSimilar } from './utils/valueUtil';
 import ListContext from './ListContext';
-import BatchUpdate, { type BatchTask, type BatchUpdateRef } from './BatchUpdate';
+import type { BatchTask, BatchUpdateRef } from './BatchUpdate';
+import BatchUpdate from './BatchUpdate';
 
 type BaseFormProps = Omit<React.FormHTMLAttributes<HTMLFormElement>, 'onSubmit' | 'children'>;
 
@@ -185,7 +186,7 @@ const Form: React.ForwardRefRenderFunction<FormRef, FormProps> = (
   }, [fields, formInstance]);
 
   // =========================== Render ===========================
-  const formContextValue = React.useMemo(
+  const formContextValue = React.useMemo<InternalFormInstance>(
     () => ({
       ...(formInstance as InternalFormInstance),
       validateTrigger,

src/List.tsx

@@ -1,6 +1,13 @@
 import * as React from 'react';
 import warning from '@rc-component/util/lib/warning';
-import type { InternalNamePath, NamePath, StoreValue, ValidatorRule, Meta } from './interface';
+import type {
+  InternalNamePath,
+  NamePath,
+  StoreValue,
+  ValidatorRule,
+  Meta,
+  InternalFormInstance,
+} from './interface';
 import FieldContext from './FieldContext';
 import Field from './Field';
 import { move, getNamePath } from './utils/valueUtil';
@@ -40,18 +47,19 @@ function List<Values = any>({
 }: ListProps<Values>) {
   const context = React.useContext(FieldContext);
   const wrapperListContext = React.useContext(ListContext);
-  const keyRef = React.useRef({
-    keys: [],
-    id: 0,
-  });
+  const keyRef = React.useRef({ keys: [], id: 0 });
+
   const keyManager = keyRef.current;
 
-  const prefixName: InternalNamePath = React.useMemo(() => {
+  const prefixName = React.useMemo<InternalNamePath>(() => {
     const parentPrefixName = getNamePath(context.prefixName) || [];
     return [...parentPrefixName, ...getNamePath(name)];
   }, [context.prefixName, name]);
 
-  const fieldContext = React.useMemo(() => ({ ...context, prefixName }), [context, prefixName]);
+  const fieldContext = React.useMemo<InternalFormInstance>(
+    () => ({ ...context, prefixName }),
+    [context, prefixName],
+  );
 
   // List context
   const listContext = React.useMemo<ListContextProps>(
@@ -62,7 +70,7 @@ function List<Values = any>({
         return [keyManager.keys[pathName], namePath.slice(len + 1)];
       },
     }),
-    [prefixName],
+    [keyManager, prefixName],
   );
 
   // User should not pass `children` as other type.

src/useWatch.ts

@@ -18,7 +18,7 @@ type GetGeneric<TForm extends FormInstance> = ReturnPromise<ReturnType<TForm['va
 export function stringify(value: any) {
   try {
     return JSON.stringify(value);
-  } catch (err) {
+  } catch {
     return Math.random();
   }
 }
@@ -92,7 +92,9 @@ function useWatch(
   const options = isFormInstance(_form) ? { form: _form } : _form;
   const form = options.form;
 
-  const [value, setValue] = useState<any>();
+  const [value, setValue] = useState<any>(() =>
+    typeof dependencies === 'function' ? dependencies({}) : undefined,
+  );
 
   const valueStr = useMemo(() => stringify(value), [value]);
   const valueStrRef = useRef(valueStr);

src/utils/validateUtil.ts

@@ -90,7 +90,7 @@ async function validateRule(
     }
   }
 
-  if (!result.length && subRuleField) {
+  if (!result.length && subRuleField && Array.isArray(value) && value.length > 0) {
     const subResults: string[][] = await Promise.all(
       (value as StoreValue[]).map((subValue: StoreValue, i: number) =>
         validateRule(`${name}.${i}`, subValue, subRuleField, options, messageVariables),

tests/common/InfoField.tsx

@@ -17,18 +17,17 @@ const InfoField: React.FC<InfoFieldProps> = ({ children, ...props }) => (
   <Field {...props}>
     {(control, info) => {
       const { errors, warnings, validating } = info;
-
       return (
-        <div className='field'>
+        <div className="field">
           {children ? React.cloneElement(children, control) : <Input {...control} />}
           <ul className="errors">
             {errors.map((error, index) => (
-              <li key={index}>{error}</li>
+              <li key={`error-${index}`}>{error}</li>
             ))}
           </ul>
           <ul className="warnings">
             {warnings.map((warning, index) => (
-              <li key={index}>{warning}</li>
+              <li key={`warning-${index}`}>{warning}</li>
             ))}
           </ul>
           {validating && <span className="validating" />}

tests/useWatch.test.tsx

@@ -518,4 +518,22 @@ describe('useWatch', () => {
     await changeValue(input[0], 'bamboo2');
     expect(container.querySelector<HTMLDivElement>('.values')?.textContent).toEqual('bamboo2');
   });
+  it('selector by first no undefined', async () => {
+    const list: any[] = [];
+    const Demo = () => {
+      const [form] = Form.useForm<{ name?: string }>();
+      const data = Form.useWatch(values => values, form);
+      list.push(data);
+      return (
+        <Form form={form}>
+          <Field name="name" initialValue="bamboo">
+            <Input />
+          </Field>
+        </Form>
+      );
+    };
+    render(<Demo />);
+    expect(list[0]).toEqual({});
+    expect(list[1]).toEqual({ name: 'bamboo' });
+  });
 });