mobx-react-hook-form 5.0.0 → 5.1.1

package/README.md

@@ -1,8 +1,8 @@
 # [mobx-react-hook-form](https://github.com/js2me/mobx-react-hook-form)
 
-Simple [react-hook-form](https://react-hook-form.com/) wrapper for [MobX](https://mobx.js.org/).  
+Simple [react-hook-form](https://react-hook-form.com/) wrapper for [MobX](https://mobx.js.org/).
 
-## Usage  
+## Usage
 
 ```tsx
 import { reaction } from "mobx";
@@ -36,3 +36,66 @@ const YourView = observer(() => {
 })
 
 ```
+
+## API
+
+This library uses [`createFormControl`](https://react-hook-form.com/docs/createFormControl).  
+So API is almost identical with result of `createFormControl` function call.
+
+Differences:
+
+- `reset` method renamed to `resetForm`
+
+## Additional API
+
+### `changeField(name, value, opts)`
+
+The same as [`setValue`](https://react-hook-form.com/docs/useform/setvalue), but will trigger validation if form was submitted  
+It should work the same as `field.onChange` from `react-hook-form`'s Controller
+
+Example:
+
+```tsx
+// Update a single field
+changeField("name", "value");
+
+/** form submitted **/
+
+changeField("name", "value"); // will call setValue('name', 'value', { shouldValidate: true })
+```
+
+### `submit()`
+
+This method is needed to pass into `<form />` as `onSubmit` prop, or you can call this method if you want to submit form
+
+Example:
+
+```tsx
+const form = new Form();
+
+const Component = () => {
+  return (
+    <form onSubmit={form.submit} onReset={form.reset}>
+      ...
+    </form>
+  );
+};
+```
+
+### `reset()`
+
+This method is needed to pass into `<form />` as `onReset` prop, or you can call this method if you want to reset form
+
+Example:
+
+```tsx
+const form = new Form();
+
+const Component = () => {
+  return (
+    <form onSubmit={form.submit} onReset={form.reset}>
+      ...
+    </form>
+  );
+};
+```

package/mobx-form/mobx-form.d.ts

@@ -258,6 +258,25 @@ export declare class Form<TFieldValues extends FieldValues = FieldValues, TConte
     originalForm: ReturnType<typeof createFormControl<TFieldValues, TContext, TTransformedValues>>;
     private _observableStruct;
     constructor(config: FormParams<TFieldValues, TContext, TTransformedValues>);
+    /**
+     * The same as setValue, but will trigger validation if form was submitted
+     * It should work the same as field.onChange from react-hook-form's Controller
+     *
+     * @param name - the path name to the form field value.
+     * @param value - field value
+     * @param options - should validate or update form state
+     *
+     * @example
+     * ```tsx
+     * // Update a single field
+     * changeField('name', 'value');
+     *
+     * ** form submitted **
+     *
+     * changeField('name', 'value'); // will call setValue('name', 'value', { shouldValidate: true })
+     * ```
+     */
+    changeField: UseFormSetValue<TFieldValues>;
     /**
      * Method to manually submit form.
      * Used to attach this method to <form /> element
@@ -277,7 +296,6 @@ export declare class Form<TFieldValues extends FieldValues = FieldValues, TConte
      */
     reset(e?: BaseSyntheticEvent): void;
     private updateFormState;
-    protected lastRafId: number | undefined;
     protected lastTimeoutId: number | undefined;
     private stopScheduledFormStateUpdate;
     private scheduleUpdateFormState;

package/mobx-form/mobx-form.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mobx-form.d.ts","sourceRoot":"","sources":["../../src/mobx-form/mobx-form.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"mobx-form.d.ts","sourceRoot":"","sources":["../../src/mobx-form/mobx-form.ts"],"names":[],"mappings":"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"}

package/mobx-form/mobx-form.js

@@ -354,6 +354,30 @@ export class Form {
             this.data = null;
         });
     }
+    /**
+     * The same as setValue, but will trigger validation if form was submitted
+     * It should work the same as field.onChange from react-hook-form's Controller
+     *
+     * @param name - the path name to the form field value.
+     * @param value - field value
+     * @param options - should validate or update form state
+     *
+     * @example
+     * ```tsx
+     * // Update a single field
+     * changeField('name', 'value');
+     *
+     * ** form submitted **
+     *
+     * changeField('name', 'value'); // will call setValue('name', 'value', { shouldValidate: true })
+     * ```
+     */
+    changeField = (name, value, opts) => {
+        this.setValue(name, value, {
+            ...opts,
+            shouldValidate: opts?.shouldValidate ?? this.isSubmitted,
+        });
+    };
     /**
      * Method to manually submit form.
      * Used to attach this method to <form /> element
@@ -400,13 +424,8 @@ export class Form {
             values,
         });
     }
-    lastRafId;
     lastTimeoutId;
     stopScheduledFormStateUpdate = () => {
-        if (this.lastRafId !== undefined) {
-            cancelAnimationFrame(this.lastRafId);
-            this.lastRafId = undefined;
-        }
         if (this.lastTimeoutId !== undefined) {
             clearTimeout(this.lastTimeoutId);
             this.lastTimeoutId = undefined;
@@ -415,12 +434,9 @@ export class Form {
     scheduleUpdateFormState = (rawFormState) => {
         this.stopScheduledFormStateUpdate();
         this.lastTimeoutId = setTimeout(() => {
-            this.lastRafId = requestAnimationFrame(() => {
-                this.updateFormState(rawFormState);
-                this.lastTimeoutId = undefined;
-                this.lastRafId = undefined;
-            });
-        }, this.config.lazyUpdatesTimer ?? 50);
+            this.updateFormState(rawFormState);
+            this.lastTimeoutId = undefined;
+        }, this.config.lazyUpdatesTimer ?? 0);
     };
     destroy() {
         this.abortController.abort();

package/mobx-form/mobx-form.types.d.ts

@@ -36,7 +36,7 @@ export interface FormParams<TFieldValues extends FieldValues = FieldValues, TCon
     lazyUpdates?: boolean;
     /**
      * lazy mobx form state updates timer in ms
-     * @defaults `50`
+     * @defaults `0`
      */
     lazyUpdatesTimer?: number;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mobx-react-hook-form",
-  "version": "5.0.0",
+  "version": "5.1.1",
   "description": "",
   "type": "module",
   "keywords": [],