mobx-react-hook-form 3.0.0 → 3.0.1
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
|
@@ -218,12 +218,12 @@ export declare class MobxForm<TFieldValues extends FieldValues = FieldValues, TC
|
|
|
218
218
|
*/
|
|
219
219
|
resetForm: UseFormReset<TFieldValues>;
|
|
220
220
|
protected abortController: AbortController;
|
|
221
|
+
protected lastRafId: number | undefined;
|
|
221
222
|
/**
|
|
222
223
|
* Original react-hook-form form
|
|
223
224
|
*/
|
|
224
225
|
originalForm: ReturnType<typeof createFormControl<TFieldValues, TContext, TTransformedValues>>;
|
|
225
226
|
constructor(config: MobxFormParams<TFieldValues, TContext, TTransformedValues>);
|
|
226
|
-
destroy(): void;
|
|
227
227
|
/**
|
|
228
228
|
* Method to manually submit form.
|
|
229
229
|
* Used to attach this method to <form /> element
|
|
@@ -243,6 +243,7 @@ export declare class MobxForm<TFieldValues extends FieldValues = FieldValues, TC
|
|
|
243
243
|
*/
|
|
244
244
|
reset(e?: BaseSyntheticEvent): void;
|
|
245
245
|
private updateFormState;
|
|
246
|
+
destroy(): void;
|
|
246
247
|
}
|
|
247
248
|
export {};
|
|
248
249
|
//# sourceMappingURL=mobx-form.d.ts.map
|
|
@@ -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,EACX,WAAW,EACX,WAAW,EACX,SAAS,EACT,kBAAkB,EAClB,eAAe,EACf,YAAY,EACZ,iBAAiB,EACjB,eAAe,EACf,eAAe,EACf,cAAc,EACd,iBAAiB,EAClB,MAAM,iBAAiB,CAAC;AAEzB,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAEtD,KAAK,aAAa,CAAC,YAAY,SAAS,WAAW,IACjD,SAAS,CAAC,YAAY,CAAC,GAAG;IACxB,MAAM,EAAE,YAAY,CAAC;CACtB,CAAC;AAEJ,qBAAa,QAAQ,CACnB,YAAY,SAAS,WAAW,GAAG,WAAW,EAC9C,QAAQ,GAAG,GAAG,EACd,kBAAkB,GAAG,YAAY,CACjC,YAAW,aAAa,CAAC,YAAY,CAAC;
|
|
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, makeObservable, observable } from 'mobx';
|
|
3
|
+
import { action, comparer, makeObservable, observable } from 'mobx';
|
|
4
4
|
import { createFormControl, } from 'react-hook-form';
|
|
5
5
|
export class MobxForm {
|
|
6
6
|
config;
|
|
@@ -216,6 +216,7 @@ export class MobxForm {
|
|
|
216
216
|
*/
|
|
217
217
|
resetForm;
|
|
218
218
|
abortController;
|
|
219
|
+
lastRafId;
|
|
219
220
|
/**
|
|
220
221
|
* Original react-hook-form form
|
|
221
222
|
*/
|
|
@@ -249,7 +250,19 @@ export class MobxForm {
|
|
|
249
250
|
validatingFields: true,
|
|
250
251
|
},
|
|
251
252
|
callback: (rawFormState) => {
|
|
252
|
-
this.
|
|
253
|
+
if (this.config.lazyUpdates === false) {
|
|
254
|
+
this.updateFormState(rawFormState);
|
|
255
|
+
}
|
|
256
|
+
else {
|
|
257
|
+
if (this.lastRafId !== undefined) {
|
|
258
|
+
cancelAnimationFrame(this.lastRafId);
|
|
259
|
+
this.lastRafId = undefined;
|
|
260
|
+
}
|
|
261
|
+
this.lastRafId = requestAnimationFrame(() => {
|
|
262
|
+
this.updateFormState(rawFormState);
|
|
263
|
+
this.lastRafId = undefined;
|
|
264
|
+
});
|
|
265
|
+
}
|
|
253
266
|
},
|
|
254
267
|
});
|
|
255
268
|
observable.deep(this, 'values');
|
|
@@ -281,9 +294,6 @@ export class MobxForm {
|
|
|
281
294
|
this.data = null;
|
|
282
295
|
});
|
|
283
296
|
}
|
|
284
|
-
destroy() {
|
|
285
|
-
this.abortController.abort();
|
|
286
|
-
}
|
|
287
297
|
/**
|
|
288
298
|
* Method to manually submit form.
|
|
289
299
|
* Used to attach this method to <form /> element
|
|
@@ -322,14 +332,17 @@ export class MobxForm {
|
|
|
322
332
|
this[key] = value;
|
|
323
333
|
}
|
|
324
334
|
});
|
|
335
|
+
console.info('update form state', errors);
|
|
325
336
|
if (errors) {
|
|
326
337
|
const currentErrorsSet = new Set(Object.keys(this.errors));
|
|
327
338
|
const newErrors = Object.keys(errors);
|
|
328
339
|
for (const errorField of newErrors) {
|
|
329
340
|
if (currentErrorsSet.has(errorField)) {
|
|
330
341
|
currentErrorsSet.delete(errorField);
|
|
331
|
-
|
|
332
|
-
|
|
342
|
+
if (!comparer.structural(this.errors[errorField], errors[errorField])) {
|
|
343
|
+
// @ts-ignore
|
|
344
|
+
Object.assign(this.errors[errorField], errors[errorField]);
|
|
345
|
+
}
|
|
333
346
|
}
|
|
334
347
|
else {
|
|
335
348
|
// @ts-ignore
|
|
@@ -347,4 +360,10 @@ export class MobxForm {
|
|
|
347
360
|
// @ts-ignore
|
|
348
361
|
this.values = values ?? {};
|
|
349
362
|
}
|
|
363
|
+
destroy() {
|
|
364
|
+
this.abortController.abort();
|
|
365
|
+
if (this.lastRafId !== undefined) {
|
|
366
|
+
cancelAnimationFrame(this.lastRafId);
|
|
367
|
+
}
|
|
368
|
+
}
|
|
350
369
|
}
|
|
@@ -21,6 +21,11 @@ export interface MobxFormParams<TFieldValues extends FieldValues = FieldValues,
|
|
|
21
21
|
* Form reset handler
|
|
22
22
|
*/
|
|
23
23
|
onReset?: (event: any) => void;
|
|
24
|
+
/**
|
|
25
|
+
* lazy mobx form state updates using requestAnimationFrame
|
|
26
|
+
* @default - {true}
|
|
27
|
+
*/
|
|
28
|
+
lazyUpdates?: boolean;
|
|
24
29
|
}
|
|
25
30
|
export type ExtractFormFieldValues<T extends AnyMobxForm> = Exclude<T['values'], undefined | null>;
|
|
26
31
|
export type ExtractFormFieldOutputValues<T extends AnyMobxForm> = T extends MobxForm<any, any, infer TFieldOutputValues> ? TFieldOutputValues : never;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mobx-form.types.d.ts","sourceRoot":"","sources":["../../src/mobx-form/mobx-form.types.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,WAAW,EACX,kBAAkB,EAClB,aAAa,EACb,YAAY,EACb,MAAM,iBAAiB,CAAC;AAEzB,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE/C,MAAM,MAAM,WAAW,GAAG,QAAQ,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;AAElD;;GAEG;AACH,MAAM,WAAW,cAAc,CAC7B,YAAY,SAAS,WAAW,GAAG,WAAW,EAC9C,QAAQ,GAAG,GAAG,EACd,kBAAkB,GAAG,YAAY,CACjC,SAAQ,YAAY,CAAC,YAAY,EAAE,QAAQ,EAAE,kBAAkB,CAAC;IAChE;;OAEG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,aAAa,CAAC,kBAAkB,CAAC,CAAC;IAC7C;;OAEG;IACH,cAAc,CAAC,EAAE,kBAAkB,CAAC,YAAY,CAAC,CAAC;IAClD;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;
|
|
1
|
+
{"version":3,"file":"mobx-form.types.d.ts","sourceRoot":"","sources":["../../src/mobx-form/mobx-form.types.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,WAAW,EACX,kBAAkB,EAClB,aAAa,EACb,YAAY,EACb,MAAM,iBAAiB,CAAC;AAEzB,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE/C,MAAM,MAAM,WAAW,GAAG,QAAQ,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;AAElD;;GAEG;AACH,MAAM,WAAW,cAAc,CAC7B,YAAY,SAAS,WAAW,GAAG,WAAW,EAC9C,QAAQ,GAAG,GAAG,EACd,kBAAkB,GAAG,YAAY,CACjC,SAAQ,YAAY,CAAC,YAAY,EAAE,QAAQ,EAAE,kBAAkB,CAAC;IAChE;;OAEG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,aAAa,CAAC,kBAAkB,CAAC,CAAC;IAC7C;;OAEG;IACH,cAAc,CAAC,EAAE,kBAAkB,CAAC,YAAY,CAAC,CAAC;IAClD;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IAC/B;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,MAAM,sBAAsB,CAAC,CAAC,SAAS,WAAW,IAAI,OAAO,CACjE,CAAC,CAAC,QAAQ,CAAC,EACX,SAAS,GAAG,IAAI,CACjB,CAAC;AAEF,MAAM,MAAM,4BAA4B,CAAC,CAAC,SAAS,WAAW,IAC5D,CAAC,SAAS,QAAQ,CAAC,GAAG,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC,GAClD,kBAAkB,GAClB,KAAK,CAAC"}
|