@tanstack/form-core 0.0.11 → 0.0.13
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/build/{cjs/FieldApi.js → lib/FieldApi.cjs} +80 -113
- package/build/lib/FieldApi.cjs.map +1 -0
- package/build/lib/FieldApi.d.ts +112 -0
- package/build/lib/FieldApi.d.ts.map +1 -0
- package/build/lib/FieldApi.js +305 -0
- package/build/lib/FieldApi.js.map +1 -0
- package/build/lib/FieldApi.legacy.cjs +307 -0
- package/build/lib/FieldApi.legacy.cjs.map +1 -0
- package/build/lib/FieldApi.legacy.js +305 -0
- package/build/lib/FieldApi.legacy.js.map +1 -0
- package/build/{cjs/FormApi.js → lib/FormApi.cjs} +66 -78
- package/build/lib/FormApi.cjs.map +1 -0
- package/build/{types → lib}/FormApi.d.ts +3 -2
- package/build/lib/FormApi.d.ts.map +1 -0
- package/build/lib/FormApi.js +246 -0
- package/build/lib/FormApi.js.map +1 -0
- package/build/lib/FormApi.legacy.cjs +248 -0
- package/build/lib/FormApi.legacy.cjs.map +1 -0
- package/build/lib/FormApi.legacy.js +246 -0
- package/build/lib/FormApi.legacy.js.map +1 -0
- package/build/{cjs/_virtual/_rollupPluginBabelHelpers.js → lib/_virtual/_rollupPluginBabelHelpers.cjs} +18 -45
- package/build/lib/_virtual/_rollupPluginBabelHelpers.cjs.map +1 -0
- package/build/lib/_virtual/_rollupPluginBabelHelpers.js +56 -0
- package/build/{cjs → lib}/_virtual/_rollupPluginBabelHelpers.js.map +1 -1
- package/build/lib/_virtual/_rollupPluginBabelHelpers.legacy.cjs +65 -0
- package/build/lib/_virtual/_rollupPluginBabelHelpers.legacy.cjs.map +1 -0
- package/build/lib/_virtual/_rollupPluginBabelHelpers.legacy.js +56 -0
- package/build/lib/_virtual/_rollupPluginBabelHelpers.legacy.js.map +1 -0
- package/build/lib/index.cjs +14 -0
- package/build/lib/index.cjs.map +1 -0
- package/build/{types → lib}/index.d.ts +1 -0
- package/build/lib/index.d.ts.map +1 -0
- package/build/lib/index.js +4 -0
- package/build/{cjs → lib}/index.js.map +1 -1
- package/build/lib/index.legacy.cjs +14 -0
- package/build/lib/index.legacy.cjs.map +1 -0
- package/build/lib/index.legacy.js +4 -0
- package/build/lib/index.legacy.js.map +1 -0
- package/build/lib/tests/FieldApi.spec.d.ts +2 -0
- package/build/lib/tests/FieldApi.spec.d.ts.map +1 -0
- package/build/lib/tests/FieldApi.test-d.d.ts +2 -0
- package/build/lib/tests/FieldApi.test-d.d.ts.map +1 -0
- package/build/lib/tests/FormApi.spec.d.ts +2 -0
- package/build/lib/tests/FormApi.spec.d.ts.map +1 -0
- package/build/{cjs/utils.js → lib/utils.cjs} +18 -27
- package/build/lib/utils.cjs.map +1 -0
- package/build/{types → lib}/utils.d.ts +10 -0
- package/build/lib/utils.d.ts.map +1 -0
- package/build/lib/utils.js +77 -0
- package/build/lib/utils.js.map +1 -0
- package/build/lib/utils.legacy.cjs +81 -0
- package/build/lib/utils.legacy.cjs.map +1 -0
- package/build/lib/utils.legacy.js +77 -0
- package/build/lib/utils.legacy.js.map +1 -0
- package/package.json +22 -9
- package/src/FieldApi.ts +101 -46
- package/src/FormApi.ts +34 -14
- package/src/tests/FieldApi.spec.ts +169 -0
- package/src/tests/FieldApi.test-d.ts +41 -0
- package/src/tests/FormApi.spec.ts +216 -0
- package/src/utils.ts +10 -1
- package/build/cjs/FieldApi.js.map +0 -1
- package/build/cjs/FormApi.js.map +0 -1
- package/build/cjs/index.js +0 -26
- package/build/cjs/utils.js.map +0 -1
- package/build/esm/index.js +0 -716
- package/build/esm/index.js.map +0 -1
- package/build/stats-html.html +0 -2689
- package/build/stats-react.json +0 -196
- package/build/types/FieldApi.d.ts +0 -85
- package/build/types/tests/test.test.d.ts +0 -0
- package/build/umd/index.development.js +0 -779
- package/build/umd/index.development.js.map +0 -1
- package/build/umd/index.production.js +0 -22
- package/build/umd/index.production.js.map +0 -1
- package/src/tests/test.test.tsx +0 -5
package/build/esm/index.js
DELETED
|
@@ -1,716 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* form-core
|
|
3
|
-
*
|
|
4
|
-
* Copyright (c) TanStack
|
|
5
|
-
*
|
|
6
|
-
* This source code is licensed under the MIT license found in the
|
|
7
|
-
* LICENSE.md file in the root directory of this source tree.
|
|
8
|
-
*
|
|
9
|
-
* @license MIT
|
|
10
|
-
*/
|
|
11
|
-
import { Store } from '@tanstack/store';
|
|
12
|
-
|
|
13
|
-
function _defineProperty(obj, key, value) {
|
|
14
|
-
if (key in obj) {
|
|
15
|
-
Object.defineProperty(obj, key, {
|
|
16
|
-
value: value,
|
|
17
|
-
enumerable: true,
|
|
18
|
-
configurable: true,
|
|
19
|
-
writable: true
|
|
20
|
-
});
|
|
21
|
-
} else {
|
|
22
|
-
obj[key] = value;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
return obj;
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
function _classPrivateFieldGet(receiver, privateMap) {
|
|
29
|
-
var descriptor = _classExtractFieldDescriptor(receiver, privateMap, "get");
|
|
30
|
-
|
|
31
|
-
return _classApplyDescriptorGet(receiver, descriptor);
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
function _classPrivateFieldSet(receiver, privateMap, value) {
|
|
35
|
-
var descriptor = _classExtractFieldDescriptor(receiver, privateMap, "set");
|
|
36
|
-
|
|
37
|
-
_classApplyDescriptorSet(receiver, descriptor, value);
|
|
38
|
-
|
|
39
|
-
return value;
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
function _classExtractFieldDescriptor(receiver, privateMap, action) {
|
|
43
|
-
if (!privateMap.has(receiver)) {
|
|
44
|
-
throw new TypeError("attempted to " + action + " private field on non-instance");
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
return privateMap.get(receiver);
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
function _classApplyDescriptorGet(receiver, descriptor) {
|
|
51
|
-
if (descriptor.get) {
|
|
52
|
-
return descriptor.get.call(receiver);
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
return descriptor.value;
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
function _classApplyDescriptorSet(receiver, descriptor, value) {
|
|
59
|
-
if (descriptor.set) {
|
|
60
|
-
descriptor.set.call(receiver, value);
|
|
61
|
-
} else {
|
|
62
|
-
if (!descriptor.writable) {
|
|
63
|
-
throw new TypeError("attempted to set read only private field");
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
descriptor.value = value;
|
|
67
|
-
}
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
function _checkPrivateRedeclaration(obj, privateCollection) {
|
|
71
|
-
if (privateCollection.has(obj)) {
|
|
72
|
-
throw new TypeError("Cannot initialize the same private elements twice on an object");
|
|
73
|
-
}
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
function _classPrivateFieldInitSpec(obj, privateMap, value) {
|
|
77
|
-
_checkPrivateRedeclaration(obj, privateMap);
|
|
78
|
-
|
|
79
|
-
privateMap.set(obj, value);
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
function functionalUpdate(updater, input) {
|
|
83
|
-
return typeof updater === 'function' ? updater(input) : updater;
|
|
84
|
-
}
|
|
85
|
-
function getBy(obj, path) {
|
|
86
|
-
const pathArray = makePathArray(path);
|
|
87
|
-
const pathObj = pathArray;
|
|
88
|
-
return pathObj.reduce((current, pathPart) => {
|
|
89
|
-
if (typeof current !== 'undefined') {
|
|
90
|
-
return current[pathPart];
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
return undefined;
|
|
94
|
-
}, obj);
|
|
95
|
-
}
|
|
96
|
-
function setBy(obj, _path, updater) {
|
|
97
|
-
const path = makePathArray(_path);
|
|
98
|
-
|
|
99
|
-
function doSet(parent) {
|
|
100
|
-
if (!path.length) {
|
|
101
|
-
return functionalUpdate(updater, parent);
|
|
102
|
-
}
|
|
103
|
-
|
|
104
|
-
const key = path.shift();
|
|
105
|
-
|
|
106
|
-
if (typeof key === 'string') {
|
|
107
|
-
if (typeof parent === 'object') {
|
|
108
|
-
return { ...parent,
|
|
109
|
-
[key]: doSet(parent[key])
|
|
110
|
-
};
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
return {
|
|
114
|
-
[key]: doSet()
|
|
115
|
-
};
|
|
116
|
-
}
|
|
117
|
-
|
|
118
|
-
if (typeof key === 'number') {
|
|
119
|
-
if (Array.isArray(parent)) {
|
|
120
|
-
const prefix = parent.slice(0, key);
|
|
121
|
-
return [...(prefix.length ? prefix : new Array(key)), doSet(parent[key]), ...parent.slice(key + 1)];
|
|
122
|
-
}
|
|
123
|
-
|
|
124
|
-
return [...new Array(key), doSet()];
|
|
125
|
-
}
|
|
126
|
-
|
|
127
|
-
throw new Error('Uh oh!');
|
|
128
|
-
}
|
|
129
|
-
|
|
130
|
-
return doSet(obj);
|
|
131
|
-
}
|
|
132
|
-
const reFindNumbers0 = /^(\d*)$/gm;
|
|
133
|
-
const reFindNumbers1 = /\.(\d*)\./gm;
|
|
134
|
-
const reFindNumbers2 = /^(\d*)\./gm;
|
|
135
|
-
const reFindNumbers3 = /\.(\d*$)/gm;
|
|
136
|
-
const reFindMultiplePeriods = /\.{2,}/gm;
|
|
137
|
-
const intPrefix = '__int__';
|
|
138
|
-
const intReplace = intPrefix + "$1";
|
|
139
|
-
|
|
140
|
-
function makePathArray(str) {
|
|
141
|
-
if (typeof str !== 'string') {
|
|
142
|
-
throw new Error();
|
|
143
|
-
}
|
|
144
|
-
|
|
145
|
-
return str.replace('[', '.').replace(']', '').replace(reFindNumbers0, intReplace).replace(reFindNumbers1, "." + intReplace + ".").replace(reFindNumbers2, intReplace + ".").replace(reFindNumbers3, "." + intReplace).replace(reFindMultiplePeriods, '.').split('.').map(d => {
|
|
146
|
-
if (d.indexOf(intPrefix) === 0) {
|
|
147
|
-
return parseInt(d.substring(intPrefix.length), 10);
|
|
148
|
-
}
|
|
149
|
-
|
|
150
|
-
return d;
|
|
151
|
-
});
|
|
152
|
-
}
|
|
153
|
-
|
|
154
|
-
function getDefaultFormState(defaultState) {
|
|
155
|
-
return {
|
|
156
|
-
values: {},
|
|
157
|
-
fieldMeta: {},
|
|
158
|
-
canSubmit: true,
|
|
159
|
-
isFieldsValid: false,
|
|
160
|
-
isFieldsValidating: false,
|
|
161
|
-
isFormValid: false,
|
|
162
|
-
isFormValidating: false,
|
|
163
|
-
isSubmitted: false,
|
|
164
|
-
isSubmitting: false,
|
|
165
|
-
isTouched: false,
|
|
166
|
-
isValid: false,
|
|
167
|
-
isValidating: false,
|
|
168
|
-
submissionAttempts: 0,
|
|
169
|
-
formValidationCount: 0,
|
|
170
|
-
...defaultState
|
|
171
|
-
};
|
|
172
|
-
}
|
|
173
|
-
|
|
174
|
-
class FormApi {
|
|
175
|
-
// // This carries the context for nested fields
|
|
176
|
-
// Do not use __state directly, as it is not reactive.
|
|
177
|
-
// Please use form.useStore() utility to subscribe to state
|
|
178
|
-
constructor(_opts) {
|
|
179
|
-
var _opts$defaultValues, _opts$defaultState;
|
|
180
|
-
|
|
181
|
-
_defineProperty(this, "options", {});
|
|
182
|
-
|
|
183
|
-
_defineProperty(this, "store", void 0);
|
|
184
|
-
|
|
185
|
-
_defineProperty(this, "state", void 0);
|
|
186
|
-
|
|
187
|
-
_defineProperty(this, "fieldInfo", {});
|
|
188
|
-
|
|
189
|
-
_defineProperty(this, "fieldName", void 0);
|
|
190
|
-
|
|
191
|
-
_defineProperty(this, "validationMeta", {});
|
|
192
|
-
|
|
193
|
-
_defineProperty(this, "update", options => {
|
|
194
|
-
if (!options) return;
|
|
195
|
-
this.store.batch(() => {
|
|
196
|
-
if (options.defaultState && options.defaultState !== this.options.defaultState) {
|
|
197
|
-
this.store.setState(prev => ({ ...prev,
|
|
198
|
-
...options.defaultState
|
|
199
|
-
}));
|
|
200
|
-
}
|
|
201
|
-
|
|
202
|
-
if (options.defaultValues !== this.options.defaultValues) {
|
|
203
|
-
this.store.setState(() => getDefaultFormState(options.defaultValues));
|
|
204
|
-
}
|
|
205
|
-
});
|
|
206
|
-
this.options = options;
|
|
207
|
-
});
|
|
208
|
-
|
|
209
|
-
_defineProperty(this, "reset", () => this.store.setState(() => getDefaultFormState(this.options.defaultValues)));
|
|
210
|
-
|
|
211
|
-
_defineProperty(this, "validateAllFields", async cause => {
|
|
212
|
-
const fieldValidationPromises = [];
|
|
213
|
-
this.store.batch(() => {
|
|
214
|
-
void Object.values(this.fieldInfo).forEach(field => {
|
|
215
|
-
Object.values(field.instances).forEach(instance => {
|
|
216
|
-
// If any fields are not touched
|
|
217
|
-
if (!instance.state.meta.isTouched) {
|
|
218
|
-
// Mark them as touched
|
|
219
|
-
instance.setMeta(prev => ({ ...prev,
|
|
220
|
-
isTouched: true
|
|
221
|
-
})); // Validate the field
|
|
222
|
-
|
|
223
|
-
fieldValidationPromises.push(Promise.resolve().then(() => instance.validate(cause)));
|
|
224
|
-
}
|
|
225
|
-
});
|
|
226
|
-
});
|
|
227
|
-
});
|
|
228
|
-
return Promise.all(fieldValidationPromises);
|
|
229
|
-
});
|
|
230
|
-
|
|
231
|
-
_defineProperty(this, "handleSubmit", async e => {
|
|
232
|
-
e.preventDefault();
|
|
233
|
-
e.stopPropagation(); // Check to see that the form and all fields have been touched
|
|
234
|
-
// If they have not, touch them all and run validation
|
|
235
|
-
// Run form validation
|
|
236
|
-
// Submit the form
|
|
237
|
-
|
|
238
|
-
this.store.setState(old => ({ ...old,
|
|
239
|
-
// Submittion attempts mark the form as not submitted
|
|
240
|
-
isSubmitted: false,
|
|
241
|
-
// Count submission attempts
|
|
242
|
-
submissionAttempts: old.submissionAttempts + 1
|
|
243
|
-
})); // Don't let invalid forms submit
|
|
244
|
-
|
|
245
|
-
if (!this.state.canSubmit) return;
|
|
246
|
-
this.store.setState(d => ({ ...d,
|
|
247
|
-
isSubmitting: true
|
|
248
|
-
}));
|
|
249
|
-
|
|
250
|
-
const done = () => {
|
|
251
|
-
this.store.setState(prev => ({ ...prev,
|
|
252
|
-
isSubmitting: false
|
|
253
|
-
}));
|
|
254
|
-
}; // Validate all fields
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
await this.validateAllFields('submit'); // Fields are invalid, do not submit
|
|
258
|
-
|
|
259
|
-
if (!this.state.isFieldsValid) {
|
|
260
|
-
var _this$options$onSubmi, _this$options;
|
|
261
|
-
|
|
262
|
-
done();
|
|
263
|
-
(_this$options$onSubmi = (_this$options = this.options).onSubmitInvalid) == null ? void 0 : _this$options$onSubmi.call(_this$options, this.state.values, this);
|
|
264
|
-
return;
|
|
265
|
-
} // Run validation for the form
|
|
266
|
-
// await this.validateForm()
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
if (!this.state.isValid) {
|
|
270
|
-
var _this$options$onSubmi2, _this$options2;
|
|
271
|
-
|
|
272
|
-
done();
|
|
273
|
-
(_this$options$onSubmi2 = (_this$options2 = this.options).onSubmitInvalid) == null ? void 0 : _this$options$onSubmi2.call(_this$options2, this.state.values, this);
|
|
274
|
-
return;
|
|
275
|
-
}
|
|
276
|
-
|
|
277
|
-
try {
|
|
278
|
-
var _this$options$onSubmi3, _this$options3;
|
|
279
|
-
|
|
280
|
-
// Run the submit code
|
|
281
|
-
await ((_this$options$onSubmi3 = (_this$options3 = this.options).onSubmit) == null ? void 0 : _this$options$onSubmi3.call(_this$options3, this.state.values, this));
|
|
282
|
-
this.store.batch(() => {
|
|
283
|
-
this.store.setState(prev => ({ ...prev,
|
|
284
|
-
isSubmitted: true
|
|
285
|
-
}));
|
|
286
|
-
done();
|
|
287
|
-
});
|
|
288
|
-
} catch (err) {
|
|
289
|
-
done();
|
|
290
|
-
throw err;
|
|
291
|
-
}
|
|
292
|
-
});
|
|
293
|
-
|
|
294
|
-
_defineProperty(this, "getFieldValue", field => getBy(this.state.values, field));
|
|
295
|
-
|
|
296
|
-
_defineProperty(this, "getFieldMeta", field => {
|
|
297
|
-
return this.state.fieldMeta[field];
|
|
298
|
-
});
|
|
299
|
-
|
|
300
|
-
_defineProperty(this, "getFieldInfo", field => {
|
|
301
|
-
var _this$fieldInfo;
|
|
302
|
-
|
|
303
|
-
return (_this$fieldInfo = this.fieldInfo)[field] || (_this$fieldInfo[field] = {
|
|
304
|
-
instances: {}
|
|
305
|
-
});
|
|
306
|
-
});
|
|
307
|
-
|
|
308
|
-
_defineProperty(this, "setFieldMeta", (field, updater) => {
|
|
309
|
-
this.store.setState(prev => {
|
|
310
|
-
return { ...prev,
|
|
311
|
-
fieldMeta: { ...prev.fieldMeta,
|
|
312
|
-
[field]: functionalUpdate(updater, prev.fieldMeta[field])
|
|
313
|
-
}
|
|
314
|
-
};
|
|
315
|
-
});
|
|
316
|
-
});
|
|
317
|
-
|
|
318
|
-
_defineProperty(this, "setFieldValue", (field, updater, opts) => {
|
|
319
|
-
const touch = opts == null ? void 0 : opts.touch;
|
|
320
|
-
this.store.batch(() => {
|
|
321
|
-
if (touch) {
|
|
322
|
-
this.setFieldMeta(field, prev => ({ ...prev,
|
|
323
|
-
isTouched: true
|
|
324
|
-
}));
|
|
325
|
-
}
|
|
326
|
-
|
|
327
|
-
this.store.setState(prev => {
|
|
328
|
-
return { ...prev,
|
|
329
|
-
values: setBy(prev.values, field, updater)
|
|
330
|
-
};
|
|
331
|
-
});
|
|
332
|
-
});
|
|
333
|
-
});
|
|
334
|
-
|
|
335
|
-
_defineProperty(this, "pushFieldValue", (field, value, opts) => {
|
|
336
|
-
return this.setFieldValue(field, prev => [...(Array.isArray(prev) ? prev : []), value], opts);
|
|
337
|
-
});
|
|
338
|
-
|
|
339
|
-
_defineProperty(this, "insertFieldValue", (field, index, value, opts) => {
|
|
340
|
-
this.setFieldValue(field, prev => {
|
|
341
|
-
return prev.map((d, i) => i === index ? value : d);
|
|
342
|
-
}, opts);
|
|
343
|
-
});
|
|
344
|
-
|
|
345
|
-
_defineProperty(this, "removeFieldValue", (field, index, opts) => {
|
|
346
|
-
this.setFieldValue(field, prev => {
|
|
347
|
-
return prev.filter((_d, i) => i !== index);
|
|
348
|
-
}, opts);
|
|
349
|
-
});
|
|
350
|
-
|
|
351
|
-
_defineProperty(this, "swapFieldValues", (field, index1, index2) => {
|
|
352
|
-
this.setFieldValue(field, prev => {
|
|
353
|
-
const prev1 = prev[index1];
|
|
354
|
-
const prev2 = prev[index2];
|
|
355
|
-
return setBy(setBy(prev, [index1], prev2), [index2], prev1);
|
|
356
|
-
});
|
|
357
|
-
});
|
|
358
|
-
|
|
359
|
-
this.store = new Store(getDefaultFormState({ ...(_opts == null ? void 0 : _opts.defaultState),
|
|
360
|
-
values: (_opts$defaultValues = _opts == null ? void 0 : _opts.defaultValues) != null ? _opts$defaultValues : _opts == null ? void 0 : (_opts$defaultState = _opts.defaultState) == null ? void 0 : _opts$defaultState.values,
|
|
361
|
-
isFormValid: true
|
|
362
|
-
}), {
|
|
363
|
-
onUpdate: () => {
|
|
364
|
-
let {
|
|
365
|
-
state
|
|
366
|
-
} = this.store; // Computed state
|
|
367
|
-
|
|
368
|
-
const fieldMetaValues = Object.values(state.fieldMeta);
|
|
369
|
-
const isFieldsValidating = fieldMetaValues.some(field => field == null ? void 0 : field.isValidating);
|
|
370
|
-
const isFieldsValid = !fieldMetaValues.some(field => field == null ? void 0 : field.error);
|
|
371
|
-
const isTouched = fieldMetaValues.some(field => field == null ? void 0 : field.isTouched);
|
|
372
|
-
const isValidating = isFieldsValidating || state.isFormValidating;
|
|
373
|
-
const isFormValid = !state.formError;
|
|
374
|
-
const isValid = isFieldsValid && isFormValid;
|
|
375
|
-
const canSubmit = state.submissionAttempts === 0 && !isTouched || !isValidating && !state.isSubmitting && isValid;
|
|
376
|
-
state = { ...state,
|
|
377
|
-
isFieldsValidating,
|
|
378
|
-
isFieldsValid,
|
|
379
|
-
isFormValid,
|
|
380
|
-
isValid,
|
|
381
|
-
canSubmit,
|
|
382
|
-
isTouched
|
|
383
|
-
};
|
|
384
|
-
this.store.state = state;
|
|
385
|
-
this.state = state;
|
|
386
|
-
}
|
|
387
|
-
});
|
|
388
|
-
this.state = this.store.state;
|
|
389
|
-
this.update(_opts || {});
|
|
390
|
-
}
|
|
391
|
-
|
|
392
|
-
}
|
|
393
|
-
|
|
394
|
-
let uid = 0;
|
|
395
|
-
|
|
396
|
-
var _prevState = /*#__PURE__*/new WeakMap();
|
|
397
|
-
|
|
398
|
-
var _leaseValidateAsync = /*#__PURE__*/new WeakMap();
|
|
399
|
-
|
|
400
|
-
class FieldApi {
|
|
401
|
-
constructor(_opts) {
|
|
402
|
-
var _this$getMeta;
|
|
403
|
-
|
|
404
|
-
_defineProperty(this, "uid", void 0);
|
|
405
|
-
|
|
406
|
-
_defineProperty(this, "form", void 0);
|
|
407
|
-
|
|
408
|
-
_defineProperty(this, "name", void 0);
|
|
409
|
-
|
|
410
|
-
_defineProperty(this, "store", void 0);
|
|
411
|
-
|
|
412
|
-
_defineProperty(this, "state", void 0);
|
|
413
|
-
|
|
414
|
-
_classPrivateFieldInitSpec(this, _prevState, {
|
|
415
|
-
writable: true,
|
|
416
|
-
value: void 0
|
|
417
|
-
});
|
|
418
|
-
|
|
419
|
-
_defineProperty(this, "options", {});
|
|
420
|
-
|
|
421
|
-
_defineProperty(this, "mount", () => {
|
|
422
|
-
var _this$options$onMount, _this$options;
|
|
423
|
-
|
|
424
|
-
const info = this.getInfo();
|
|
425
|
-
info.instances[this.uid] = this;
|
|
426
|
-
const unsubscribe = this.form.store.subscribe(() => {
|
|
427
|
-
this.store.batch(() => {
|
|
428
|
-
const nextValue = this.getValue();
|
|
429
|
-
const nextMeta = this.getMeta();
|
|
430
|
-
|
|
431
|
-
if (nextValue !== this.state.value) {
|
|
432
|
-
this.store.setState(prev => ({ ...prev,
|
|
433
|
-
value: nextValue
|
|
434
|
-
}));
|
|
435
|
-
}
|
|
436
|
-
|
|
437
|
-
if (nextMeta !== this.state.meta) {
|
|
438
|
-
this.store.setState(prev => ({ ...prev,
|
|
439
|
-
meta: nextMeta
|
|
440
|
-
}));
|
|
441
|
-
}
|
|
442
|
-
});
|
|
443
|
-
});
|
|
444
|
-
(_this$options$onMount = (_this$options = this.options).onMount) == null ? void 0 : _this$options$onMount.call(_this$options, this);
|
|
445
|
-
return () => {
|
|
446
|
-
unsubscribe();
|
|
447
|
-
delete info.instances[this.uid];
|
|
448
|
-
|
|
449
|
-
if (!Object.keys(info.instances).length) {
|
|
450
|
-
delete this.form.fieldInfo[this.name];
|
|
451
|
-
}
|
|
452
|
-
};
|
|
453
|
-
});
|
|
454
|
-
|
|
455
|
-
_defineProperty(this, "update", opts => {
|
|
456
|
-
var _this$form$options$as, _this$form$options$on, _this$form$options$on2;
|
|
457
|
-
|
|
458
|
-
this.options = {
|
|
459
|
-
asyncDebounceMs: (_this$form$options$as = this.form.options.asyncDebounceMs) != null ? _this$form$options$as : 0,
|
|
460
|
-
onChangeAsyncDebounceMs: (_this$form$options$on = this.form.options.onChangeAsyncDebounceMs) != null ? _this$form$options$on : 0,
|
|
461
|
-
onBlurAsyncDebounceMs: (_this$form$options$on2 = this.form.options.onBlurAsyncDebounceMs) != null ? _this$form$options$on2 : 0,
|
|
462
|
-
...opts
|
|
463
|
-
}; // Default Value
|
|
464
|
-
|
|
465
|
-
if (this.state.value === undefined && this.options.defaultValue !== undefined) {
|
|
466
|
-
this.setValue(this.options.defaultValue);
|
|
467
|
-
} // Default Meta
|
|
468
|
-
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
if (this.getMeta() === undefined) {
|
|
472
|
-
this.setMeta(this.state.meta);
|
|
473
|
-
}
|
|
474
|
-
});
|
|
475
|
-
|
|
476
|
-
_defineProperty(this, "getValue", () => {
|
|
477
|
-
return this.form.getFieldValue(this.name);
|
|
478
|
-
});
|
|
479
|
-
|
|
480
|
-
_defineProperty(this, "setValue", (updater, options) => this.form.setFieldValue(this.name, updater, options));
|
|
481
|
-
|
|
482
|
-
_defineProperty(this, "getMeta", () => this.form.getFieldMeta(this.name));
|
|
483
|
-
|
|
484
|
-
_defineProperty(this, "setMeta", updater => this.form.setFieldMeta(this.name, updater));
|
|
485
|
-
|
|
486
|
-
_defineProperty(this, "getInfo", () => this.form.getFieldInfo(this.name));
|
|
487
|
-
|
|
488
|
-
_defineProperty(this, "pushValue", value => this.form.pushFieldValue(this.name, value));
|
|
489
|
-
|
|
490
|
-
_defineProperty(this, "insertValue", (index, value) => this.form.insertFieldValue(this.name, index, value));
|
|
491
|
-
|
|
492
|
-
_defineProperty(this, "removeValue", index => this.form.removeFieldValue(this.name, index));
|
|
493
|
-
|
|
494
|
-
_defineProperty(this, "swapValues", (aIndex, bIndex) => this.form.swapFieldValues(this.name, aIndex, bIndex));
|
|
495
|
-
|
|
496
|
-
_defineProperty(this, "getSubField", name => new FieldApi({
|
|
497
|
-
name: this.name + "." + name,
|
|
498
|
-
form: this.form
|
|
499
|
-
}));
|
|
500
|
-
|
|
501
|
-
_defineProperty(this, "validateSync", async (value = this.state.value, cause) => {
|
|
502
|
-
const {
|
|
503
|
-
onChange,
|
|
504
|
-
onBlur
|
|
505
|
-
} = this.options;
|
|
506
|
-
const validate = cause === 'submit' ? undefined : cause === 'change' ? onChange : onBlur;
|
|
507
|
-
if (!validate) return; // Use the validationCount for all field instances to
|
|
508
|
-
// track freshness of the validation
|
|
509
|
-
|
|
510
|
-
const validationCount = (this.getInfo().validationCount || 0) + 1;
|
|
511
|
-
this.getInfo().validationCount = validationCount;
|
|
512
|
-
const error = normalizeError(validate(value, this));
|
|
513
|
-
|
|
514
|
-
if (this.state.meta.error !== error) {
|
|
515
|
-
this.setMeta(prev => ({ ...prev,
|
|
516
|
-
error
|
|
517
|
-
}));
|
|
518
|
-
} // If a sync error is encountered, cancel any async validation
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
if (this.state.meta.error) {
|
|
522
|
-
this.cancelValidateAsync();
|
|
523
|
-
}
|
|
524
|
-
});
|
|
525
|
-
|
|
526
|
-
_classPrivateFieldInitSpec(this, _leaseValidateAsync, {
|
|
527
|
-
writable: true,
|
|
528
|
-
value: () => {
|
|
529
|
-
const count = (this.getInfo().validationAsyncCount || 0) + 1;
|
|
530
|
-
this.getInfo().validationAsyncCount = count;
|
|
531
|
-
return count;
|
|
532
|
-
}
|
|
533
|
-
});
|
|
534
|
-
|
|
535
|
-
_defineProperty(this, "cancelValidateAsync", () => {
|
|
536
|
-
// Lease a new validation count to ignore any pending validations
|
|
537
|
-
_classPrivateFieldGet(this, _leaseValidateAsync).call(this); // Cancel any pending validation state
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
this.setMeta(prev => ({ ...prev,
|
|
541
|
-
isValidating: false
|
|
542
|
-
}));
|
|
543
|
-
});
|
|
544
|
-
|
|
545
|
-
_defineProperty(this, "validateAsync", async (value = this.state.value, cause) => {
|
|
546
|
-
var _ref, _ref2;
|
|
547
|
-
|
|
548
|
-
const {
|
|
549
|
-
onChangeAsync,
|
|
550
|
-
onBlurAsync,
|
|
551
|
-
onSubmitAsync,
|
|
552
|
-
asyncDebounceMs,
|
|
553
|
-
onBlurAsyncDebounceMs,
|
|
554
|
-
onChangeAsyncDebounceMs
|
|
555
|
-
} = this.options;
|
|
556
|
-
const validate = cause === 'change' ? onChangeAsync : cause === 'submit' ? onSubmitAsync : onBlurAsync;
|
|
557
|
-
if (!validate) return;
|
|
558
|
-
const debounceMs = cause === 'submit' ? 0 : (_ref = (_ref2 = cause === 'change' ? onChangeAsyncDebounceMs : onBlurAsyncDebounceMs) != null ? _ref2 : asyncDebounceMs) != null ? _ref : 500;
|
|
559
|
-
if (this.state.meta.isValidating !== true) this.setMeta(prev => ({ ...prev,
|
|
560
|
-
isValidating: true
|
|
561
|
-
})); // Use the validationCount for all field instances to
|
|
562
|
-
// track freshness of the validation
|
|
563
|
-
|
|
564
|
-
const validationAsyncCount = _classPrivateFieldGet(this, _leaseValidateAsync).call(this);
|
|
565
|
-
|
|
566
|
-
const checkLatest = () => validationAsyncCount === this.getInfo().validationAsyncCount;
|
|
567
|
-
|
|
568
|
-
if (!this.getInfo().validationPromise) {
|
|
569
|
-
this.getInfo().validationPromise = new Promise((resolve, reject) => {
|
|
570
|
-
this.getInfo().validationResolve = resolve;
|
|
571
|
-
this.getInfo().validationReject = reject;
|
|
572
|
-
});
|
|
573
|
-
}
|
|
574
|
-
|
|
575
|
-
if (debounceMs > 0) {
|
|
576
|
-
await new Promise(r => setTimeout(r, debounceMs));
|
|
577
|
-
} // Only kick off validation if this validation is the latest attempt
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
if (checkLatest()) {
|
|
581
|
-
try {
|
|
582
|
-
const rawError = await validate(value, this);
|
|
583
|
-
|
|
584
|
-
if (checkLatest()) {
|
|
585
|
-
var _this$getInfo$validat, _this$getInfo;
|
|
586
|
-
|
|
587
|
-
const error = normalizeError(rawError);
|
|
588
|
-
this.setMeta(prev => ({ ...prev,
|
|
589
|
-
isValidating: false,
|
|
590
|
-
error
|
|
591
|
-
}));
|
|
592
|
-
(_this$getInfo$validat = (_this$getInfo = this.getInfo()).validationResolve) == null ? void 0 : _this$getInfo$validat.call(_this$getInfo, error);
|
|
593
|
-
}
|
|
594
|
-
} catch (error) {
|
|
595
|
-
if (checkLatest()) {
|
|
596
|
-
var _this$getInfo$validat2, _this$getInfo2;
|
|
597
|
-
|
|
598
|
-
(_this$getInfo$validat2 = (_this$getInfo2 = this.getInfo()).validationReject) == null ? void 0 : _this$getInfo$validat2.call(_this$getInfo2, error);
|
|
599
|
-
throw error;
|
|
600
|
-
}
|
|
601
|
-
} finally {
|
|
602
|
-
if (checkLatest()) {
|
|
603
|
-
this.setMeta(prev => ({ ...prev,
|
|
604
|
-
isValidating: false
|
|
605
|
-
}));
|
|
606
|
-
delete this.getInfo().validationPromise;
|
|
607
|
-
}
|
|
608
|
-
}
|
|
609
|
-
} // Always return the latest validation promise to the caller
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
return this.getInfo().validationPromise;
|
|
613
|
-
});
|
|
614
|
-
|
|
615
|
-
_defineProperty(this, "validate", (cause, value) => {
|
|
616
|
-
// If the field is pristine and validatePristine is false, do not validate
|
|
617
|
-
if (!this.state.meta.isTouched) return; // Attempt to sync validate first
|
|
618
|
-
|
|
619
|
-
this.validateSync(value, cause); // If there is an error, return it, do not attempt async validation
|
|
620
|
-
|
|
621
|
-
if (this.state.meta.error) {
|
|
622
|
-
if (!this.options.asyncAlways) {
|
|
623
|
-
return this.state.meta.error;
|
|
624
|
-
}
|
|
625
|
-
} // No error? Attempt async validation
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
return this.validateAsync(value, cause);
|
|
629
|
-
});
|
|
630
|
-
|
|
631
|
-
_defineProperty(this, "getChangeProps", (props = {}) => {
|
|
632
|
-
return { ...props,
|
|
633
|
-
value: this.state.value,
|
|
634
|
-
onChange: value => {
|
|
635
|
-
this.setValue(value);
|
|
636
|
-
props.onChange == null ? void 0 : props.onChange(value);
|
|
637
|
-
},
|
|
638
|
-
onBlur: e => {
|
|
639
|
-
const prevTouched = this.state.meta.isTouched;
|
|
640
|
-
this.setMeta(prev => ({ ...prev,
|
|
641
|
-
isTouched: true
|
|
642
|
-
}));
|
|
643
|
-
|
|
644
|
-
if (!prevTouched) {
|
|
645
|
-
this.validate('change');
|
|
646
|
-
}
|
|
647
|
-
|
|
648
|
-
this.validate('blur');
|
|
649
|
-
}
|
|
650
|
-
};
|
|
651
|
-
});
|
|
652
|
-
|
|
653
|
-
_defineProperty(this, "getInputProps", (props = {}) => {
|
|
654
|
-
return { ...props,
|
|
655
|
-
value: String(this.state.value),
|
|
656
|
-
onChange: e => {
|
|
657
|
-
this.setValue(e.target.value);
|
|
658
|
-
props.onChange == null ? void 0 : props.onChange(e.target.value);
|
|
659
|
-
},
|
|
660
|
-
onBlur: this.getChangeProps(props).onBlur
|
|
661
|
-
};
|
|
662
|
-
});
|
|
663
|
-
|
|
664
|
-
this.form = _opts.form;
|
|
665
|
-
this.uid = uid++; // Support field prefixing from FieldScope
|
|
666
|
-
// let fieldPrefix = ''
|
|
667
|
-
// if (this.form.fieldName) {
|
|
668
|
-
// fieldPrefix = `${this.form.fieldName}.`
|
|
669
|
-
// }
|
|
670
|
-
|
|
671
|
-
this.name = _opts.name;
|
|
672
|
-
this.store = new Store({
|
|
673
|
-
value: this.getValue(),
|
|
674
|
-
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
|
|
675
|
-
meta: (_this$getMeta = this.getMeta()) != null ? _this$getMeta : {
|
|
676
|
-
isValidating: false,
|
|
677
|
-
isTouched: false,
|
|
678
|
-
...this.options.defaultMeta
|
|
679
|
-
}
|
|
680
|
-
}, {
|
|
681
|
-
onUpdate: () => {
|
|
682
|
-
const state = this.store.state;
|
|
683
|
-
state.meta.touchedError = state.meta.isTouched ? state.meta.error : undefined;
|
|
684
|
-
|
|
685
|
-
if (state.value !== _classPrivateFieldGet(this, _prevState).value) {
|
|
686
|
-
this.validate('change', state.value);
|
|
687
|
-
}
|
|
688
|
-
|
|
689
|
-
_classPrivateFieldSet(this, _prevState, state);
|
|
690
|
-
|
|
691
|
-
this.state = state;
|
|
692
|
-
}
|
|
693
|
-
});
|
|
694
|
-
this.state = this.store.state;
|
|
695
|
-
|
|
696
|
-
_classPrivateFieldSet(this, _prevState, this.state);
|
|
697
|
-
|
|
698
|
-
this.update(_opts);
|
|
699
|
-
}
|
|
700
|
-
|
|
701
|
-
}
|
|
702
|
-
|
|
703
|
-
function normalizeError(rawError) {
|
|
704
|
-
if (rawError) {
|
|
705
|
-
if (typeof rawError !== 'string') {
|
|
706
|
-
return 'Invalid Form Values';
|
|
707
|
-
}
|
|
708
|
-
|
|
709
|
-
return rawError;
|
|
710
|
-
}
|
|
711
|
-
|
|
712
|
-
return undefined;
|
|
713
|
-
}
|
|
714
|
-
|
|
715
|
-
export { FieldApi, FormApi, functionalUpdate, getBy, setBy };
|
|
716
|
-
//# sourceMappingURL=index.js.map
|