feat: demonstration of adding "reset"

Author: Ohh-889

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

@@ -0,0 +1,74 @@
+'use client';
+
+import React from 'react';
+import { Button, ButtonGroup, Card, Form, FormField, Input, useForm } from 'soybean-react-ui';
+
+type Inputs = {
+  info: { city: string; company: string };
+  password: string;
+  username: string;
+};
+
+const initialValues = {
+  info: {
+    city: 'Beijing'
+  },
+  password: '22333'
+};
+
+const Reset = () => {
+  const [form] = useForm<Inputs>();
+
+  const handleReset = () => {
+    form.resetFields();
+  };
+
+  const handleResetUsername = () => {
+    form.resetFields('password');
+  };
+
+  return (
+    <Card title="Reset">
+      <Form
+        className="w-[480px] max-sm:w-full space-y-4"
+        form={form}
+        initialValues={initialValues}
+      >
+        <FormField
+          label="Username"
+          name="username"
+        >
+          <Input placeholder="Enter username" />
+        </FormField>
+
+        <FormField
+          label="Password"
+          name="password"
+        >
+          <Input placeholder="Enter password" />
+        </FormField>
+
+        <FormField
+          label="Info&City"
+          name="info.city"
+        >
+          <Input placeholder="Enter info.city" />
+        </FormField>
+
+        <FormField
+          label="Info&Company"
+          name="info.company"
+        >
+          <Input placeholder="Enter info.company" />
+        </FormField>
+
+        <div className="flex gap-x-1">
+          <Button onClick={handleReset}>Reset All</Button>
+          <Button onClick={handleResetUsername}>Reset Username</Button>
+        </div>
+      </Form>
+    </Card>
+  );
+};
+
+export default Reset;

playground/src/app/(demo)/form/page.tsx

@@ -1,5 +1,6 @@
 import Default from './modules/Default';
 import FieldChange from './modules/FieldChange';
+import Reset from './modules/Reset';
 import UseWatch from './modules/UseWatch';
 import Validate from './modules/validate';
 import ValidateWarning from './modules/validateWaring';
@@ -16,6 +17,8 @@ const FormPage = () => {
       <ValidateWarning />
 
       <UseWatch />
+
+      <Reset />
     </div>
   );
 };

primitives/filed-form /src/Field.tsx

@@ -3,10 +3,11 @@
 
 import { Slot } from '@radix-ui/react-slot';
 import { useEffect, useId, useRef, useState } from 'react';
-import { capitalize, getEventValue, isEqual, omitUndefined, toArray } from 'skyroc-utils';
+import { capitalize, getEventValue, isEqual, isNil, omitUndefined, toArray } from 'skyroc-utils';
 
 import type { InternalFormInstance } from './FieldContext';
 import { useFieldContext } from './FieldContext';
+import { ChangeTag } from './form-core/event';
 import type { InternalFieldProps } from './types/field';
 import type { StoreValue } from './types/formStore';
 
@@ -120,8 +121,8 @@ function Field<Values = any>(props: InternalFieldProps<Values>) {
 
   useEffect(() => {
     const unregister = registerField({
-      changeValue: newValue => {
-        if (!normalizedChangedRef.current) return;
+      changeValue: (newValue, __, ___, mask) => {
+        if (!normalizedChangedRef.current && mask === ChangeTag.Value) return;
 
         normalizedChangedRef.current = false;
 
@@ -138,7 +139,7 @@ function Field<Values = any>(props: InternalFieldProps<Values>) {
             if (unControlledValueChange) {
               unControlledValueChange(cref.current, newValue);
             } else {
-              cref.current.value = newValue as any;
+              cref.current.value = isNil(newValue) ? '' : (newValue as any);
             }
           }
         }

primitives/filed-form /src/FieldContext.ts

@@ -3,7 +3,7 @@
 
 import { createContext, useContext, useEffect, useState } from 'react';
 import { flushSync } from 'react-dom';
-import type { AllPaths, AllPathsKeys, PathToDeepType, ShapeFromPaths } from 'skyroc-type-utils';
+import type { AllPaths, AllPathsKeys, DeepPartial, PathToDeepType, ShapeFromPaths } from 'skyroc-type-utils';
 import { isArray, toArray } from 'skyroc-utils';
 
 import type { ChangeMask, SubscribeMaskOptions } from './form-core/event';
@@ -90,7 +90,7 @@ export interface RegisterCallbackOptions<Values = any> {
 export interface InternalCallbacks<Values = any> {
   destroyForm: (clearOnDestroy?: boolean) => void;
   setCallbacks: (callbacks: RegisterCallbackOptions<Values>) => void;
-  setInitialValues: (values: Partial<Values>) => void;
+  setInitialValues: (values: DeepPartial<Values>) => void;
   setPreserve: (preserve: boolean) => void;
   setValidateMessages: (messages: ValidateMessages) => void;
 }

primitives/filed-form /src/Form.tsx

@@ -8,12 +8,13 @@ import type { FormInstance, InternalFormContext, InternalFormInstance, RegisterC
 import { FieldContextProvider } from './FieldContext';
 import type { ValidateMessages } from './form-core/validate';
 import useForm from './useForm';
+import { DeepPartial } from 'skyroc-type-utils';
 
 interface FormBaseProps<Values = any> extends RegisterCallbackOptions<Values> {
   children?: React.ReactNode;
   clearOnDestroy?: boolean;
   form?: FormInstance<Values>;
-  initialValues?: Partial<Values>;
+  initialValues?: DeepPartial<Values>;
   preserve?: boolean;
   validateMessages?: ValidateMessages;
   validateTrigger?: string | string[];

primitives/filed-form /src/createStore.ts

@@ -254,16 +254,18 @@ class FormStore {
       this._errors.clear();
       this._warnings.clear();
       this._validating.clear();
-      this.enqueueNotify();
+      this.enqueueNotify([], ChangeTag.Reset | ChangeTag.Value);
       return;
     }
 
     const keys: string[] = [];
+
+    let resetValue: Store = {};
+
     for (const n of names) {
       const key = keyOfName(n);
 
-      const initV = get(this._initial, key);
-      this.updateStore(set(this._store, key, initV));
+      resetValue = set(resetValue, key, get(this._initial, key));
 
       this._touched.delete(key);
       this._dirty.delete(key);
@@ -272,7 +274,10 @@ class FormStore {
       this._validating.delete(key);
       keys.push(key);
     }
-    this.enqueueNotify(keys);
+
+    this.updateStore(resetValue);
+
+    this.enqueueNotify(keys, ChangeTag.Reset | ChangeTag.Value);
   };
 
   // ------------------------------------------------
@@ -1030,7 +1035,7 @@ class FormStore {
   };
 
   private enqueueNotify = (names?: NamePath[] | string[], mask: ChangeMask = ChangeTag.All) => {
-    if (!names) this.markPending('*', ChangeTag.All);
+    if (!names || names.length === 0) this.markPending('*', mask);
     else for (const n of names) this.markPending(keyOfName(n), mask);
 
     this.scheduleFlush();

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

@@ -1,6 +1,7 @@
 // src/form-core/types.ts
 
 import type { NamePath } from '../utils/util';
+import { ChangeMask } from './event';
 
 export type Store = Record<string, any>;
 export type StoreValue = any;
@@ -23,7 +24,7 @@ export interface Rule {
 }
 
 export interface FieldEntity {
-  changeValue: (value: any, isShouldUpdate: boolean) => void;
+  changeValue: (value: StoreValue, key: string, all: Store, fired: ChangeMask) => void;
   initialValue?: any;
   name: NamePath;
   preserve?: boolean;