feat: adapt the demo to the new return method.

Author: Ohh-889

playground/src/app/(demo)/form/modules/Preserve.tsx

@@ -3,6 +3,8 @@
 import { useState } from 'react';
 import { Button, Card, Form, FormField, Input, useForm } from 'soybean-react-ui';
 
+import { showToastCode } from './toast';
+
 const Preserve = () => {
   const [form] = useForm();
 
@@ -24,6 +26,12 @@ const Preserve = () => {
         <Form
           className="w-[480px] max-sm:w-full space-y-4"
           form={form}
+          onFinish={values => {
+            showToastCode('You submitted the following values', values);
+          }}
+          onFinishFailed={errors => {
+            showToastCode('You failed to submit the form', errors);
+          }}
         >
           {show && (
             <FormField
@@ -44,16 +52,11 @@ const Preserve = () => {
 
           <div className="flex gap-x-2">
             <Button onClick={toggle}>Toggle</Button>
-            <Button type="submit">Reset</Button>
+            <Button type="submit">Submit</Button>
+            <Button onClick={toggleLoad}>Toggle Load</Button>
           </div>
         </Form>
       )}
-      <Button
-        className="mt-4"
-        onClick={toggleLoad}
-      >
-        Toggle Load
-      </Button>
     </Card>
   );
 };

playground/src/app/(demo)/form/modules/Reset.tsx

@@ -24,7 +24,7 @@ const Reset = () => {
   };
 
   const handleResetUsername = () => {
-    form.resetFields(['password']);
+    form.resetFields(['username']);
   };
 
   return (

playground/src/app/(demo)/form/modules/UseWatch.tsx

@@ -12,6 +12,14 @@ type Inputs = {
   username: string;
 };
 
+const EffectWatch = () => {
+  const values = useWatch<Inputs>();
+
+  console.log('values', values);
+
+  return null;
+};
+
 export default function WatchDemo() {
   const [form] = useForm<Inputs>();
 
@@ -24,7 +32,7 @@ export default function WatchDemo() {
   // 3) Watch nested fields
   const info = useWatch('info', { form, includeChildren: true });
 
-  const { age: NewAge, password: NewPassword, username: NewUsername } = useWatch([], { form });
+  const { age: NewAge, password: NewPassword, username: NewUsername } = useWatch(form);
 
   useEffect(() => {
     showToastCode('NewValues', { NewAge, NewPassword, NewUsername });
@@ -72,6 +80,8 @@ export default function WatchDemo() {
           >
             <Input placeholder="Enter info.company" />
           </FormField>
+
+          <EffectWatch />
         </Form>
 
         {/* 4) Dynamic rendering */}

primitives/filed-form /src/form-core/createStore.ts

@@ -7,6 +7,7 @@ import { assign, isArray, isEqual, isNil, toArray } from 'skyroc-utils';
 
 import type { FieldEntity } from '../types/field';
 import type { Callbacks, Store, StoreValue } from '../types/formStore';
+import type { Meta } from '../types/shared-types';
 import { get } from '../utils/get';
 import { set, unset } from '../utils/set';
 import type { NamePath, PathTuple } from '../utils/util';
@@ -37,7 +38,7 @@ const matchTrigger = (rule: Rule, trig?: string | string[]) => {
 function getValueByNames<T>(source: Map<string, T>, names?: NamePath[]): Record<string, T> {
   const keys = names?.length ? names.map(keyOfName) : Array.from(source.keys());
 
-  return Object.fromEntries(keys.map(k => [k, source.get(k)!]).filter(([, v]) => v !== undefined));
+  return Object.fromEntries(keys.map(k => [k, source.get(k)!]));
 }
 
 function getFlag(bucket: Set<string>, names?: NamePath[]) {
@@ -596,11 +597,19 @@ class FormStore {
   // Fields State (errors/touched/validating/warnings, selectors)
   // ------------------------------------------------
   private getFields = (names?: NamePath[]) => {
+    let acc: Record<string, Meta<string, any>> = {};
+
     if (names && names.length !== 0) {
-      return names.map(name => this.getField(name));
+      for (const name of names) {
+        acc = set(acc, keyOfName(name), this.getField(name));
+      }
+    } else {
+      for (const entity of this._fieldEntities) {
+        acc = set(acc, keyOfName(entity.name), this.getField(entity.name));
+      }
     }
 
-    return this._fieldEntities.map(entity => this.getField(entity.name));
+    return acc;
   };
 
   private getField = (name: NamePath) => {
@@ -906,11 +915,11 @@ class FormStore {
     if (this._callbacks?.onFieldsChange) {
       const fields = this.getFields();
 
-      const changedFields = fields.filter(field => {
+      const changedFields = Object.values(fields).filter(field => {
         return nameList.includes(field.name);
       });
 
-      this._callbacks?.onFieldsChange?.(changedFields, fields);
+      this._callbacks?.onFieldsChange?.(changedFields, Object.values(fields));
     }
   };
 

primitives/filed-form /src/react/hooks/FieldContext.ts

@@ -2,7 +2,7 @@
 /* eslint-disable no-bitwise */
 
 import { createContext, useContext } from 'react';
-import type { AllPathsKeys, DeepPartial, PathToDeepType, ShapeFromPaths } from 'skyroc-type-utils';
+import type { AllPathsKeys, DeepPartial, KeysToNestedObject, PathToDeepType, ShapeFromPaths } from 'skyroc-type-utils';
 
 import type { ChangeMask } from '../../form-core/event';
 import type { Action, Middleware } from '../../form-core/middleware';
@@ -25,7 +25,10 @@ export interface StateOptions<Values = any> {
   getFieldError: (name: AllPathsKeys<Values>) => string[];
   getFields: (
     names?: AllPathsKeys<Values>[]
-  ) => Meta<AllPathsKeys<Values>, PathToDeepType<Values, AllPathsKeys<Values>>>[];
+  ) => KeysToNestedObject<
+    AllPathsKeys<Values>[],
+    Meta<AllPathsKeys<Values>, PathToDeepType<Values, AllPathsKeys<Values>>>
+  >;
   getFieldsError: (names?: AllPathsKeys<Values>[]) => Record<AllPathsKeys<Values>, string[]>;
   getFieldsTouched: (names?: AllPathsKeys<Values>[]) => boolean;
   getFieldsValidated: (names?: AllPathsKeys<Values>[]) => boolean;

primitives/filed-form /src/react/hooks/useFieldState.ts

@@ -3,12 +3,13 @@
 /* eslint-disable react/hook-use-state */
 import { useEffect, useState } from 'react';
 import { flushSync } from 'react-dom';
-import type { AllPathsKeys, PathToDeepType } from 'skyroc-type-utils';
+import type { AllPathsKeys, KeysToNestedObject, PathToDeepType } from 'skyroc-type-utils';
 import { isArray, isNil, isObject } from 'skyroc-utils';
 
 import type { SubscribeMaskOptions } from '../../form-core/event';
 import { toMask } from '../../form-core/event';
 import type { Meta } from '../../types/shared-types';
+import { get } from '../../utils/get';
 
 import type { FormInstance, InternalFormInstance } from './FieldContext';
 import { useFieldContext } from './FieldContext';
@@ -19,16 +20,12 @@ type UseFormFieldsStateOpts<Values> = {
   mask?: SubscribeMaskOptions;
 };
 
-export type MetaShape<
+export type MetaShapeNested<
   Values,
   Names extends readonly AllPathsKeys<Values>[] | undefined = undefined
 > = Names extends readonly AllPathsKeys<Values>[]
-  ? {
-      [K in Names[number]]: Meta<K, PathToDeepType<Values, K>>;
-    }
-  : {
-      [K in AllPathsKeys<Values>]: Meta<K, PathToDeepType<Values, K>>;
-    };
+  ? KeysToNestedObject<Names, Meta<any, any>> // 多字段/全字段 → 嵌套对象
+  : KeysToNestedObject<AllPathsKeys<Values>[], Meta<any, any>>; // 默认全量
 
 function useFieldState<Values = any, T extends AllPathsKeys<Values> = AllPathsKeys<Values>>(
   names: T,
@@ -38,11 +35,13 @@ function useFieldState<Values = any, T extends AllPathsKeys<Values> = AllPathsKe
 function useFieldState<Values = any, T extends AllPathsKeys<Values> = AllPathsKeys<Values>>(
   names: T[],
   opts?: UseFormFieldsStateOpts<Values>
-): MetaShape<Values, T[]>;
+): MetaShapeNested<Values, T[]>;
 
-function useFieldState<Values = any>(): MetaShape<Values, AllPathsKeys<Values>[]>;
+// 无参数：全量嵌套对象
+function useFieldState<Values = any>(): MetaShapeNested<Values, AllPathsKeys<Values>[]>;
 
-function useFieldState<Values = any>(form: FormInstance<Values>): MetaShape<Values, AllPathsKeys<Values>[]>;
+// form 参数：全量嵌套对象
+function useFieldState<Values = any>(form: FormInstance<Values>): MetaShapeNested<Values, AllPathsKeys<Values>[]>;
 
 function useFieldState<Values = any>(
   names?: AllPathsKeys<Values> | AllPathsKeys<Values>[] | FormInstance<Values>,
@@ -88,6 +87,8 @@ function useFieldState<Values = any>(
     warnings: true
   };
 
+  const includeChildren = opts?.includeChildren ?? isFormInstance;
+
   const [_, forceUpdate] = useState({});
 
   useEffect(() => {
@@ -97,7 +98,7 @@ function useFieldState<Values = any>(
         flushSync(() => forceUpdate({}));
       },
       {
-        includeChildren: opts?.includeChildren,
+        includeChildren,
         mask: toMask(mask)
       }
     );
@@ -106,14 +107,14 @@ function useFieldState<Values = any>(
 
   if (!subscribeNames) {
     // names 为空 → 返回 Map 形式
-    return Object.fromEntries(state.map(item => [item.name, item]));
+    return state;
   }
   if (subscribeNames.length === 1) {
     // 单字段 → 直接返回该字段的 meta
-    return state[0];
+    return get(state, subscribeNames[0]);
   }
   // 多字段 → 返回对象
-  return Object.fromEntries(state.map(item => [item.name, item]));
+  return state;
 }
 
 export { useFieldState };