mobx-react-hook-form 1.0.12 → 2.0.0

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.
Files changed (6) hide show
  1. package/mobx-form/mobx-form.d.ts +6 -5
  2. package/mobx-form/mobx-form.d.ts.map +1 -1
  3. package/mobx-form/mobx-form.js +38 -18
  4. package/mobx-form/mobx-form.types.d.ts +2 -2
  5. package/mobx-form/mobx-form.types.d.ts.map +1 -1
  6. package/package.json +1 -1
package/mobx-form/mobx-form.d.ts CHANGED
@@ -1,17 +1,18 @@
1
1
  import type { Disposable } from 'disposer-util';
2
- import { FormState, UseFormProps, UseFormReturn } from 'react-hook-form';
2
+ import { FormState, SubmitErrorHandler, SubmitHandler, UseFormProps, UseFormReturn } from 'react-hook-form';
3
3
  import type { AnyObject, Maybe } from 'yammies/utils/types';
4
4
  import { ConnectedMobxForm, MobxFormParams } from './mobx-form.types';
5
5
  export declare class MobxForm<TFieldValues extends AnyObject, TContext = any> implements Disposable {
6
+ private config;
6
7
  protected abortController: AbortController;
7
8
  /**
8
9
  * Real react-hook-form params
9
10
  * Needed to connect real react-hook-form to this mobx wrapper
10
11
  */
11
12
  params: UseFormProps<TFieldValues, TContext>;
12
- protected submitHandler?: MobxFormParams<TFieldValues, TContext>['onSubmit'];
13
- protected submitErrorHandler?: MobxFormParams<TFieldValues, TContext>['onSubmitFailed'];
14
- protected resetHandler?: MobxFormParams<TFieldValues, TContext>['onReset'];
13
+ protected handleSubmit(...args: Parameters<SubmitHandler<TFieldValues>>): void | Promise<void>;
14
+ protected handleSubmitFailed(...args: Parameters<SubmitErrorHandler<TFieldValues>>): void | Promise<void>;
15
+ protected handleReset(): void;
15
16
  /**
16
17
  * Original react-hook-form form
17
18
  */
@@ -25,7 +26,7 @@ export declare class MobxForm<TFieldValues extends AnyObject, TContext = any> im
25
26
  */
26
27
  data: Maybe<TFieldValues>;
27
28
  protected isConnected: boolean;
28
- constructor({ disposer, abortSignal, onSubmit, onSubmitFailed, onReset, getParams, ...params }: MobxFormParams<TFieldValues, TContext>);
29
+ constructor(config: MobxFormParams<TFieldValues, TContext>);
29
30
  /**
30
31
  * Allows to modify real react-hook-form useForm() payload
31
32
  */
package/mobx-form/mobx-form.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"mobx-form.d.ts","sourceRoot":"","sources":["../../src/mobx-form/mobx-form.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAUhD,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AACzE,OAAO,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAE5D,OAAO,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAEtE,qBAAa,QAAQ,CAAC,YAAY,SAAS,SAAS,EAAE,QAAQ,GAAG,GAAG,CAClE,YAAW,UAAU;IAErB,SAAS,CAAC,eAAe,EAAE,eAAe,CAAC;IAE3C;;;OAGG;IACH,MAAM,EAAE,YAAY,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC;IAE7C,SAAS,CAAC,aAAa,CAAC,EAAE,cAAc,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC,UAAU,CAAC,CAAC;IAC7E,SAAS,CAAC,kBAAkB,CAAC,EAAE,cAAc,CAC3C,YAAY,EACZ,QAAQ,CACT,CAAC,gBAAgB,CAAC,CAAC;IACpB,SAAS,CAAC,YAAY,CAAC,EAAE,cAAc,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC,SAAS,CAAC,CAAC;IAE3E;;OAEG;IACH,IAAI,EAAE,KAAK,CAAC,aAAa,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEnD;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC,YAAY,CAAC,CAAC;IAE/B;;OAEG;IACH,IAAI,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC;IAE1B,SAAS,CAAC,WAAW,UAAS;gBAElB,EAEV,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,cAAc,EACd,OAAO,EACP,SAAS,EACT,GAAG,MAAM,EACV,EAAE,cAAc,CAAC,YAAY,EAAE,QAAQ,CAAC;IAsDzC;;OAEG;IACH,SAAS,CAAC,MAAM,EAAE,YAAY,CAAC,YAAY,EAAE,QAAQ,CAAC;IAItD;;OAEG;IACH,YAAY,CAAC,MAAM,EAAE,OAAO,CAAC,YAAY,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC;IAIlE;;;;OAIG;IACH,SAAS,CAAC,OAAO,CACf,UAAU,EAAE,aAAa,CAAC,YAAY,EAAE,QAAQ,CAAC,GAChD,iBAAiB,CAAC,YAAY,EAAE,QAAQ,CAAC;IAkC5C,OAAO,IAAI,IAAI;CAGhB"}
1
+ {"version":3,"file":"mobx-form.d.ts","sourceRoot":"","sources":["../../src/mobx-form/mobx-form.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAShD,OAAO,EACL,SAAS,EACT,kBAAkB,EAClB,aAAa,EACb,YAAY,EACZ,aAAa,EACd,MAAM,iBAAiB,CAAC;AACzB,OAAO,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAE5D,OAAO,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAEtE,qBAAa,QAAQ,CAAC,YAAY,SAAS,SAAS,EAAE,QAAQ,GAAG,GAAG,CAClE,YAAW,UAAU;IAgDT,OAAO,CAAC,MAAM;IA9C1B,SAAS,CAAC,eAAe,EAAE,eAAe,CAAC;IAE3C;;;OAGG;IACH,MAAM,EAAE,YAAY,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC;IAE7C,SAAS,CAAC,YAAY,CAEpB,GAAG,IAAI,EAAE,UAAU,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC,GAC/C,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC;IAKvB,SAAS,CAAC,kBAAkB,CAE1B,GAAG,IAAI,EAAE,UAAU,CAAC,kBAAkB,CAAC,YAAY,CAAC,CAAC,GACpD,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC;IAKvB,SAAS,CAAC,WAAW;IAKrB;;OAEG;IACH,IAAI,EAAE,KAAK,CAAC,aAAa,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEnD;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC,YAAY,CAAC,CAAC;IAE/B;;OAEG;IACH,IAAI,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC;IAE1B,SAAS,CAAC,WAAW,UAAS;gBAEV,MAAM,EAAE,cAAc,CAAC,YAAY,EAAE,QAAQ,CAAC;IAsDlE;;OAEG;IACH,SAAS,CAAC,MAAM,EAAE,YAAY,CAAC,YAAY,EAAE,QAAQ,CAAC;IAItD;;OAEG;IACH,YAAY,CAAC,MAAM,EAAE,OAAO,CAAC,YAAY,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC;IAIlE;;;;OAIG;IACH,SAAS,CAAC,OAAO,CACf,UAAU,EAAE,aAAa,CAAC,YAAY,EAAE,QAAQ,CAAC,GAChD,iBAAiB,CAAC,YAAY,EAAE,QAAQ,CAAC;IA8C5C,OAAO,IAAI,IAAI;CAGhB"}
package/mobx-form/mobx-form.js CHANGED
@@ -1,16 +1,29 @@
1
1
  import { LinkedAbortController } from 'linked-abort-controller';
2
- import noop from 'lodash-es/noop';
3
2
  import { action, makeObservable, observable, reaction, runInAction, } from 'mobx';
4
3
  export class MobxForm {
4
+ config;
5
5
  abortController;
6
6
  /**
7
7
  * Real react-hook-form params
8
8
  * Needed to connect real react-hook-form to this mobx wrapper
9
9
  */
10
10
  params;
11
- submitHandler;
12
- submitErrorHandler;
13
- resetHandler;
11
+ handleSubmit(
12
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
13
+ ...args) {
14
+ this.config.onSubmit?.(...args);
15
+ // used to override
16
+ }
17
+ handleSubmitFailed(
18
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
19
+ ...args) {
20
+ this.config.onSubmitFailed?.(...args);
21
+ // used to override
22
+ }
23
+ handleReset() {
24
+ this.config.onReset?.();
25
+ // used to override
26
+ }
14
27
  /**
15
28
  * Original react-hook-form form
16
29
  */
@@ -24,12 +37,13 @@ export class MobxForm {
24
37
  */
25
38
  data;
26
39
  isConnected = false;
27
- constructor({
28
- // eslint-disable-next-line sonarjs/deprecation
29
- disposer, abortSignal, onSubmit, onSubmitFailed, onReset, getParams, ...params }) {
30
- this.abortController = new LinkedAbortController(abortSignal);
31
- if (disposer) {
32
- disposer.add(() => this.dispose());
40
+ constructor(config) {
41
+ this.config = config;
42
+ this.abortController = new LinkedAbortController(config.abortSignal);
43
+ // eslint-disable-next-line sonarjs/deprecation
44
+ if (config.disposer) {
45
+ // eslint-disable-next-line sonarjs/deprecation
46
+ config.disposer.add(() => this.dispose());
33
47
  }
34
48
  this.abortController.signal.addEventListener('abort', () => {
35
49
  this.form = null;
@@ -51,10 +65,7 @@ export class MobxForm {
51
65
  dirtyFields: {},
52
66
  validatingFields: {},
53
67
  };
54
- this.submitHandler = onSubmit;
55
- this.submitErrorHandler = onSubmitFailed;
56
- this.resetHandler = onReset;
57
- this.params = params;
68
+ this.params = config;
58
69
  makeObservable(this, {
59
70
  state: observable.deep,
60
71
  data: observable.deep,
@@ -62,8 +73,8 @@ export class MobxForm {
62
73
  setParams: action.bound,
63
74
  updateParams: action.bound,
64
75
  });
65
- if (getParams) {
66
- reaction(getParams, (params) => {
76
+ if (config.getParams) {
77
+ reaction(config.getParams, (params) => {
67
78
  this.updateParams(params);
68
79
  }, {
69
80
  signal: this.abortController.signal,
@@ -106,8 +117,17 @@ export class MobxForm {
106
117
  }
107
118
  return {
108
119
  ...formResult,
109
- onReset: this.resetHandler ?? noop,
110
- onSubmit: formResult.handleSubmit(this.submitHandler ?? noop, this.submitErrorHandler),
120
+ onReset: () => this.handleReset(),
121
+ onSubmit: formResult.handleSubmit((...args) => this.handleSubmit(...args), (...args) => this.handleSubmitFailed(...args)),
122
+ handleSubmit: (onValid, onInvalid) => {
123
+ return formResult.handleSubmit(async (...args) => {
124
+ await this.handleSubmit(...args);
125
+ await onValid(...args);
126
+ }, async (...args) => {
127
+ await this.handleSubmitFailed(...args);
128
+ await onInvalid?.(...args);
129
+ });
130
+ },
111
131
  };
112
132
  }
113
133
  dispose() {
package/mobx-form/mobx-form.types.d.ts CHANGED
@@ -34,9 +34,9 @@ export interface MobxFormParams<TFieldValues extends AnyObject, TContext = any>
34
34
  /**
35
35
  * Interface for a connected Mobx form.
36
36
  * Extends the properties of react-hook-form's UseFormReturn,
37
- * excluding the 'handleSubmit' method, and adds custom form handlers.
37
+ * Adds custom form handlers.
38
38
  */
39
- export interface ConnectedMobxForm<TFieldValues extends AnyObject, TContext = any> extends Omit<UseFormReturn<TFieldValues, TContext>, 'handleSubmit'> {
39
+ export interface ConnectedMobxForm<TFieldValues extends AnyObject, TContext = any> extends UseFormReturn<TFieldValues, TContext> {
40
40
  /**
41
41
  * Handler to reset the form.
42
42
  */
package/mobx-form/mobx-form.types.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"mobx-form.types.d.ts","sourceRoot":"","sources":["../../src/mobx-form/mobx-form.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EACL,kBAAkB,EAClB,aAAa,EACb,YAAY,EACZ,aAAa,EACd,MAAM,iBAAiB,CAAC;AACzB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAErD;;GAEG;AACH,MAAM,WAAW,cAAc,CAAC,YAAY,SAAS,SAAS,EAAE,QAAQ,GAAG,GAAG,CAC5E,SAAQ,YAAY,CAAC,YAAY,EAAE,QAAQ,CAAC;IAC5C;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;OAEG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;IACvC;;OAEG;IACH,cAAc,CAAC,EAAE,kBAAkB,CAAC,YAAY,CAAC,CAAC;IAClD;;OAEG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,OAAO,CAAC,YAAY,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC;CACjE;AAED;;;;GAIG;AACH,MAAM,WAAW,iBAAiB,CAChC,YAAY,SAAS,SAAS,EAC9B,QAAQ,GAAG,GAAG,CACd,SAAQ,IAAI,CAAC,aAAa,CAAC,YAAY,EAAE,QAAQ,CAAC,EAAE,cAAc,CAAC;IACnE;;OAEG;IACH,OAAO,EAAE,YAAY,CAAC;IACtB;;OAEG;IACH,QAAQ,EAAE,YAAY,CAAC;CACxB"}
1
+ {"version":3,"file":"mobx-form.types.d.ts","sourceRoot":"","sources":["../../src/mobx-form/mobx-form.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EACL,kBAAkB,EAClB,aAAa,EACb,YAAY,EACZ,aAAa,EACd,MAAM,iBAAiB,CAAC;AACzB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAErD;;GAEG;AACH,MAAM,WAAW,cAAc,CAAC,YAAY,SAAS,SAAS,EAAE,QAAQ,GAAG,GAAG,CAC5E,SAAQ,YAAY,CAAC,YAAY,EAAE,QAAQ,CAAC;IAC5C;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;OAEG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;IACvC;;OAEG;IACH,cAAc,CAAC,EAAE,kBAAkB,CAAC,YAAY,CAAC,CAAC;IAClD;;OAEG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,OAAO,CAAC,YAAY,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC;CACjE;AAED;;;;GAIG;AACH,MAAM,WAAW,iBAAiB,CAChC,YAAY,SAAS,SAAS,EAC9B,QAAQ,GAAG,GAAG,CACd,SAAQ,aAAa,CAAC,YAAY,EAAE,QAAQ,CAAC;IAC7C;;OAEG;IACH,OAAO,EAAE,YAAY,CAAC;IACtB;;OAEG;IACH,QAAQ,EAAE,YAAY,CAAC;CACxB"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "mobx-react-hook-form",
3
- "version": "1.0.12",
3
+ "version": "2.0.0",
4
4
  "description": "",
5
5
  "keywords": [],
6
6
  "author": "js2me",