mobx-react-hook-form 2.0.6 → 2.0.7
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,8 +1,7 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { FormState, SubmitErrorHandler, SubmitHandler, UseFormProps, UseFormReturn } from 'react-hook-form';
|
|
1
|
+
import { DeepPartial, FormState, SubmitErrorHandler, SubmitHandler, UseFormProps, UseFormReturn } from 'react-hook-form';
|
|
3
2
|
import type { AnyObject, Maybe } from 'yummies/utils/types';
|
|
4
3
|
import { ConnectedMobxForm, MobxFormParams } from './mobx-form.types';
|
|
5
|
-
export declare class MobxForm<TFieldValues extends AnyObject, TContext = any, TFieldOutputValues extends AnyObject = TFieldValues>
|
|
4
|
+
export declare class MobxForm<TFieldValues extends AnyObject, TContext = any, TFieldOutputValues extends AnyObject = TFieldValues> {
|
|
6
5
|
private config;
|
|
7
6
|
protected abortController: AbortController;
|
|
8
7
|
/**
|
|
@@ -16,7 +15,7 @@ export declare class MobxForm<TFieldValues extends AnyObject, TContext = any, TF
|
|
|
16
15
|
/**
|
|
17
16
|
* Original react-hook-form form
|
|
18
17
|
*/
|
|
19
|
-
form: Maybe<UseFormReturn<TFieldValues, TContext>>;
|
|
18
|
+
form: Maybe<UseFormReturn<TFieldValues, TContext, TFieldOutputValues>>;
|
|
20
19
|
/**
|
|
21
20
|
* form state received from form.formState
|
|
22
21
|
*/
|
|
@@ -24,7 +23,7 @@ export declare class MobxForm<TFieldValues extends AnyObject, TContext = any, TF
|
|
|
24
23
|
/**
|
|
25
24
|
* Raw data received from form.getValues()
|
|
26
25
|
*/
|
|
27
|
-
data: Maybe<TFieldValues
|
|
26
|
+
data: Maybe<DeepPartial<TFieldValues>>;
|
|
28
27
|
protected isConnected: boolean;
|
|
29
28
|
constructor(config: MobxFormParams<TFieldValues, TContext, TFieldOutputValues>);
|
|
30
29
|
/**
|
|
@@ -35,12 +34,16 @@ export declare class MobxForm<TFieldValues extends AnyObject, TContext = any, TF
|
|
|
35
34
|
* Allows to modify real react-hook-form useForm() payload
|
|
36
35
|
*/
|
|
37
36
|
updateParams(params: Partial<UseFormProps<TFieldValues, TContext>>): void;
|
|
37
|
+
protected syncForm(formResult: UseFormReturn<TFieldValues, TContext, TFieldOutputValues>, data?: DeepPartial<TFieldValues>): void;
|
|
38
38
|
/**
|
|
39
39
|
* Needed to connect real react-hook-form to this mobx wrapper
|
|
40
40
|
*
|
|
41
41
|
* This is used in useMobxForm
|
|
42
42
|
*/
|
|
43
|
-
protected connect(formResult: UseFormReturn<TFieldValues, TContext>): ConnectedMobxForm<TFieldValues, TContext>;
|
|
43
|
+
protected connect(formResult: UseFormReturn<TFieldValues, TContext, TFieldOutputValues>): ConnectedMobxForm<TFieldValues, TContext, TFieldOutputValues>;
|
|
44
|
+
/**
|
|
45
|
+
* @deprecated use destroy();
|
|
46
|
+
*/
|
|
44
47
|
dispose(): void;
|
|
45
48
|
}
|
|
46
49
|
//# 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":"
|
|
1
|
+
{"version":3,"file":"mobx-form.d.ts","sourceRoot":"","sources":["../../src/mobx-form/mobx-form.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,WAAW,EACX,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,CACnB,YAAY,SAAS,SAAS,EAC9B,QAAQ,GAAG,GAAG,EACd,kBAAkB,SAAS,SAAS,GAAG,YAAY;IAiDjD,OAAO,CAAC,MAAM;IA/ChB,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,kBAAkB,CAAC,CAAC,GACrD,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,EAAE,kBAAkB,CAAC,CAAC,CAAC;IAEvE;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC,YAAY,CAAC,CAAC;IAE/B;;OAEG;IACH,IAAI,EAAE,KAAK,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC,CAAC;IAEvC,SAAS,CAAC,WAAW,UAAS;gBAGpB,MAAM,EAAE,cAAc,CAAC,YAAY,EAAE,QAAQ,EAAE,kBAAkB,CAAC;IAwD5E;;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,SAAS,CAAC,QAAQ,CAChB,UAAU,EAAE,aAAa,CAAC,YAAY,EAAE,QAAQ,EAAE,kBAAkB,CAAC,EACrE,IAAI,GAAE,WAAW,CAAC,YAAY,CAAiC;IAOjE;;;;OAIG;IACH,SAAS,CAAC,OAAO,CACf,UAAU,EAAE,aAAa,CAAC,YAAY,EAAE,QAAQ,EAAE,kBAAkB,CAAC,GACpE,iBAAiB,CAAC,YAAY,EAAE,QAAQ,EAAE,kBAAkB,CAAC;IA4ChE;;OAEG;IACH,OAAO,IAAI,IAAI;CAGhB"}
|
package/mobx-form/mobx-form.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { LinkedAbortController } from 'linked-abort-controller';
|
|
2
|
-
import { action, makeObservable, observable, reaction
|
|
2
|
+
import { action, makeObservable, observable, reaction } from 'mobx';
|
|
3
3
|
export class MobxForm {
|
|
4
4
|
config;
|
|
5
5
|
abortController;
|
|
@@ -66,13 +66,13 @@ export class MobxForm {
|
|
|
66
66
|
validatingFields: {},
|
|
67
67
|
};
|
|
68
68
|
this.params = config;
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
69
|
+
observable.deep(this, 'state');
|
|
70
|
+
observable.deep(this, 'data');
|
|
71
|
+
observable.ref(this, 'params');
|
|
72
|
+
action.bound(this, 'setParams');
|
|
73
|
+
action.bound(this, 'updateParams');
|
|
74
|
+
action.bound(this, 'syncForm');
|
|
75
|
+
makeObservable(this);
|
|
76
76
|
if (config.getParams) {
|
|
77
77
|
reaction(config.getParams, (params) => {
|
|
78
78
|
this.updateParams(params);
|
|
@@ -93,6 +93,11 @@ export class MobxForm {
|
|
|
93
93
|
updateParams(params) {
|
|
94
94
|
this.setParams({ ...this.params, ...params });
|
|
95
95
|
}
|
|
96
|
+
syncForm(formResult, data = formResult.getValues()) {
|
|
97
|
+
this.form = formResult;
|
|
98
|
+
this.state = formResult.formState;
|
|
99
|
+
this.data = data;
|
|
100
|
+
}
|
|
96
101
|
/**
|
|
97
102
|
* Needed to connect real react-hook-form to this mobx wrapper
|
|
98
103
|
*
|
|
@@ -101,26 +106,26 @@ export class MobxForm {
|
|
|
101
106
|
connect(formResult) {
|
|
102
107
|
if (!this.isConnected) {
|
|
103
108
|
this.isConnected = true;
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
this.
|
|
107
|
-
this.data = formResult.getValues();
|
|
108
|
-
});
|
|
109
|
-
const formWatchSubscription = formResult.watch(() => {
|
|
110
|
-
runInAction(() => {
|
|
111
|
-
this.form = formResult;
|
|
112
|
-
this.state = formResult.formState;
|
|
113
|
-
this.data = formResult.getValues();
|
|
114
|
-
});
|
|
109
|
+
this.syncForm(formResult);
|
|
110
|
+
const formWatchSubscription = formResult.watch((values) => {
|
|
111
|
+
this.syncForm(formResult, values);
|
|
115
112
|
});
|
|
116
113
|
this.abortController.signal.addEventListener('abort', formWatchSubscription.unsubscribe);
|
|
117
114
|
}
|
|
118
115
|
return {
|
|
119
116
|
...formResult,
|
|
120
117
|
onReset: () => this.handleReset(),
|
|
121
|
-
onSubmit: formResult.handleSubmit(
|
|
118
|
+
onSubmit: formResult.handleSubmit(
|
|
119
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
120
|
+
// @ts-expect-error
|
|
121
|
+
(...args) => this.handleSubmit(...args), (...args) => this.handleSubmitFailed(...args)),
|
|
122
122
|
handleSubmit: (onValid, onInvalid) => {
|
|
123
|
-
return formResult.handleSubmit(
|
|
123
|
+
return formResult.handleSubmit(
|
|
124
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
125
|
+
// @ts-expect-error
|
|
126
|
+
async (...args) => {
|
|
127
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
128
|
+
// @ts-expect-error
|
|
124
129
|
await this.handleSubmit(...args);
|
|
125
130
|
await onValid(...args);
|
|
126
131
|
}, async (...args) => {
|
|
@@ -130,6 +135,9 @@ export class MobxForm {
|
|
|
130
135
|
},
|
|
131
136
|
};
|
|
132
137
|
}
|
|
138
|
+
/**
|
|
139
|
+
* @deprecated use destroy();
|
|
140
|
+
*/
|
|
133
141
|
dispose() {
|
|
134
142
|
this.abortController.abort();
|
|
135
143
|
}
|
|
@@ -37,7 +37,7 @@ export interface MobxFormParams<TFieldValues extends AnyObject, TContext = any,
|
|
|
37
37
|
* Extends the properties of react-hook-form's UseFormReturn,
|
|
38
38
|
* Adds custom form handlers.
|
|
39
39
|
*/
|
|
40
|
-
export interface ConnectedMobxForm<TFieldValues extends AnyObject, TContext = any> extends UseFormReturn<TFieldValues, TContext> {
|
|
40
|
+
export interface ConnectedMobxForm<TFieldValues extends AnyObject, TContext = any, TFieldOutputValues extends AnyObject = TFieldValues> extends UseFormReturn<TFieldValues, TContext, TFieldOutputValues> {
|
|
41
41
|
/**
|
|
42
42
|
* Handler to reset the form.
|
|
43
43
|
*/
|
|
@@ -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,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAE5C;;GAEG;AACH,MAAM,WAAW,cAAc,CAC7B,YAAY,SAAS,SAAS,EAC9B,QAAQ,GAAG,GAAG,EACd,kBAAkB,SAAS,SAAS,GAAG,YAAY,CACnD,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,kBAAkB,CAAC,CAAC;IAC7C;;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,
|
|
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,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAE5C;;GAEG;AACH,MAAM,WAAW,cAAc,CAC7B,YAAY,SAAS,SAAS,EAC9B,QAAQ,GAAG,GAAG,EACd,kBAAkB,SAAS,SAAS,GAAG,YAAY,CACnD,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,kBAAkB,CAAC,CAAC;IAC7C;;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,EACd,kBAAkB,SAAS,SAAS,GAAG,YAAY,CACnD,SAAQ,aAAa,CAAC,YAAY,EAAE,QAAQ,EAAE,kBAAkB,CAAC;IACjE;;OAEG;IACH,OAAO,EAAE,YAAY,CAAC;IACtB;;OAEG;IACH,QAAQ,EAAE,YAAY,CAAC;CACxB;AAED,MAAM,MAAM,sBAAsB,CAAC,CAAC,SAAS,QAAQ,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,IAAI,OAAO,CAC7E,CAAC,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,EACrB,SAAS,GAAG,IAAI,CACjB,CAAC;AAEF,MAAM,MAAM,kBAAkB,CAAC,CAAC,SAAS,QAAQ,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,IAAI,OAAO,CACzE,CAAC,CAAC,QAAQ,CAAC,CAAC,SAAS,CAAC,EACtB,SAAS,GAAG,IAAI,CACjB,CAAC;AAEF,MAAM,MAAM,4BAA4B,CAAC,CAAC,SAAS,QAAQ,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,IACxE,CAAC,SAAS,QAAQ,CAAC,GAAG,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC,GAClD,kBAAkB,GAClB,KAAK,CAAC"}
|