mobx-react-hook-form 3.0.2 → 3.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/mobx-form/mobx-form.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { BaseSyntheticEvent } from 'react';
|
|
2
|
-
import { Control, createFormControl, DeepMap, DeepPartial, FieldErrors, FieldValues, FormState, UseFormClearErrors, UseFormRegister, UseFormReset, UseFormResetField, UseFormSetError, UseFormSetFocus, UseFormTrigger, UseFormUnregister } from 'react-hook-form';
|
|
2
|
+
import { Control, createFormControl, DeepMap, DeepPartial, FieldErrors, FieldValues, FormState, UseFormClearErrors, UseFormRegister, UseFormReset, UseFormResetField, UseFormSetError, UseFormSetFocus, UseFormSetValue, UseFormTrigger, UseFormUnregister } from 'react-hook-form';
|
|
3
3
|
import { MobxFormParams } from './mobx-form.types.js';
|
|
4
4
|
type FormFullState<TFieldValues extends FieldValues> = FormState<TFieldValues> & {
|
|
5
5
|
values: TFieldValues;
|
|
@@ -182,6 +182,36 @@ export declare class MobxForm<TFieldValues extends FieldValues = FieldValues, TC
|
|
|
182
182
|
* ```
|
|
183
183
|
*/
|
|
184
184
|
setFocus: UseFormSetFocus<TFieldValues>;
|
|
185
|
+
/**
|
|
186
|
+
* Set a single field value, or a group of fields value.
|
|
187
|
+
*
|
|
188
|
+
* @remarks
|
|
189
|
+
* [API](https://react-hook-form.com/docs/useform/setvalue) • [Demo](https://codesandbox.io/s/react-hook-form-v7-ts-setvalue-8z9hx) • [Video](https://www.youtube.com/watch?v=qpv51sCH3fI)
|
|
190
|
+
*
|
|
191
|
+
* @param name - the path name to the form field value.
|
|
192
|
+
* @param value - field value
|
|
193
|
+
* @param options - should validate or update form state
|
|
194
|
+
*
|
|
195
|
+
* @example
|
|
196
|
+
* ```tsx
|
|
197
|
+
* // Update a single field
|
|
198
|
+
* setValue('name', 'value', {
|
|
199
|
+
* shouldValidate: true, // trigger validation
|
|
200
|
+
* shouldTouch: true, // update touched fields form state
|
|
201
|
+
* shouldDirty: true, // update dirty and dirty fields form state
|
|
202
|
+
* });
|
|
203
|
+
*
|
|
204
|
+
* // Update a group fields
|
|
205
|
+
* setValue('root', {
|
|
206
|
+
* a: 'test', // setValue('root.a', 'data')
|
|
207
|
+
* b: 'test1', // setValue('root.b', 'data')
|
|
208
|
+
* });
|
|
209
|
+
*
|
|
210
|
+
* // Update a nested object field
|
|
211
|
+
* setValue('select', { label: 'test', value: 'Test' });
|
|
212
|
+
* ```
|
|
213
|
+
*/
|
|
214
|
+
setValue: UseFormSetValue<TFieldValues>;
|
|
185
215
|
/**
|
|
186
216
|
* Reset at the entire form state.
|
|
187
217
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mobx-form.d.ts","sourceRoot":"","sources":["../../src/mobx-form/mobx-form.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,kBAAkB,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,EACL,OAAO,EACP,iBAAiB,EACjB,OAAO,EACP,WAAW,
|
|
1
|
+
{"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
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/* eslint-disable @typescript-eslint/ban-ts-comment */
|
|
2
2
|
import { LinkedAbortController } from 'linked-abort-controller';
|
|
3
|
-
import { action, comparer, makeObservable, observable } from 'mobx';
|
|
3
|
+
import { action, comparer, makeObservable, observable, reaction } from 'mobx';
|
|
4
4
|
import { createFormControl, } from 'react-hook-form';
|
|
5
5
|
export class MobxForm {
|
|
6
6
|
config;
|
|
@@ -180,6 +180,36 @@ export class MobxForm {
|
|
|
180
180
|
* ```
|
|
181
181
|
*/
|
|
182
182
|
setFocus;
|
|
183
|
+
/**
|
|
184
|
+
* Set a single field value, or a group of fields value.
|
|
185
|
+
*
|
|
186
|
+
* @remarks
|
|
187
|
+
* [API](https://react-hook-form.com/docs/useform/setvalue) • [Demo](https://codesandbox.io/s/react-hook-form-v7-ts-setvalue-8z9hx) • [Video](https://www.youtube.com/watch?v=qpv51sCH3fI)
|
|
188
|
+
*
|
|
189
|
+
* @param name - the path name to the form field value.
|
|
190
|
+
* @param value - field value
|
|
191
|
+
* @param options - should validate or update form state
|
|
192
|
+
*
|
|
193
|
+
* @example
|
|
194
|
+
* ```tsx
|
|
195
|
+
* // Update a single field
|
|
196
|
+
* setValue('name', 'value', {
|
|
197
|
+
* shouldValidate: true, // trigger validation
|
|
198
|
+
* shouldTouch: true, // update touched fields form state
|
|
199
|
+
* shouldDirty: true, // update dirty and dirty fields form state
|
|
200
|
+
* });
|
|
201
|
+
*
|
|
202
|
+
* // Update a group fields
|
|
203
|
+
* setValue('root', {
|
|
204
|
+
* a: 'test', // setValue('root.a', 'data')
|
|
205
|
+
* b: 'test1', // setValue('root.b', 'data')
|
|
206
|
+
* });
|
|
207
|
+
*
|
|
208
|
+
* // Update a nested object field
|
|
209
|
+
* setValue('select', { label: 'test', value: 'Test' });
|
|
210
|
+
* ```
|
|
211
|
+
*/
|
|
212
|
+
setValue;
|
|
183
213
|
/**
|
|
184
214
|
* Reset at the entire form state.
|
|
185
215
|
*
|
|
@@ -233,6 +263,7 @@ export class MobxForm {
|
|
|
233
263
|
this.control = this.originalForm.control;
|
|
234
264
|
this.register = this.originalForm.register;
|
|
235
265
|
this.setFocus = this.originalForm.setFocus;
|
|
266
|
+
this.setValue = this.originalForm.setValue;
|
|
236
267
|
this.resetForm = this.originalForm.reset;
|
|
237
268
|
Object.assign(this, {
|
|
238
269
|
values: this.originalForm.getValues(),
|
|
@@ -285,6 +316,13 @@ export class MobxForm {
|
|
|
285
316
|
observable.ref(this, 'originalForm');
|
|
286
317
|
action.bound(this, 'submit');
|
|
287
318
|
action.bound(this, 'reset');
|
|
319
|
+
reaction(() => this.defaultValues, (newDefaultValues) => {
|
|
320
|
+
if (newDefaultValues) {
|
|
321
|
+
this.resetForm(newDefaultValues);
|
|
322
|
+
}
|
|
323
|
+
}, {
|
|
324
|
+
signal: this.abortController.signal,
|
|
325
|
+
});
|
|
288
326
|
makeObservable(this);
|
|
289
327
|
this.abortController.signal.addEventListener('abort', () => {
|
|
290
328
|
subscription();
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "mobx-react-hook-form",
|
|
3
|
-
"version": "3.0.
|
|
3
|
+
"version": "3.0.4",
|
|
4
4
|
"description": "",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"keywords": [],
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
"mobx": "^6.12.4",
|
|
19
19
|
"mobx-react-lite": "^4.0.7",
|
|
20
20
|
"react": "^18.3.1",
|
|
21
|
-
"react-hook-form": "^7.56.
|
|
21
|
+
"react-hook-form": "^7.56.4"
|
|
22
22
|
},
|
|
23
23
|
"dependencies": {
|
|
24
24
|
"disposer-util": "^2.0.0",
|