@conform-to/react 0.5.1 → 0.6.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.
- package/README.md +182 -214
- package/_virtual/_rollupPluginBabelHelpers.js +17 -0
- package/helpers.d.ts +11 -11
- package/helpers.js +57 -63
- package/hooks.d.ts +24 -58
- package/hooks.js +126 -204
- package/index.d.ts +2 -2
- package/index.js +8 -17
- package/module/_virtual/_rollupPluginBabelHelpers.js +16 -1
- package/module/helpers.js +45 -63
- package/module/hooks.js +128 -205
- package/module/index.js +2 -2
- package/package.json +2 -2
- package/base.d.ts +0 -17
- package/base.js +0 -112
- package/module/base.js +0 -107
package/hooks.js
CHANGED
|
@@ -5,7 +5,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
var _rollupPluginBabelHelpers = require('./_virtual/_rollupPluginBabelHelpers.js');
|
|
6
6
|
var dom = require('@conform-to/dom');
|
|
7
7
|
var react = require('react');
|
|
8
|
-
var helpers = require('./helpers.js');
|
|
9
8
|
|
|
10
9
|
/**
|
|
11
10
|
* Returns properties required to hook into form events.
|
|
@@ -14,30 +13,34 @@ var helpers = require('./helpers.js');
|
|
|
14
13
|
* @see https://conform.guide/api/react#useform
|
|
15
14
|
*/
|
|
16
15
|
function useForm() {
|
|
16
|
+
var _config$lastSubmissio;
|
|
17
17
|
var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
18
18
|
var configRef = react.useRef(config);
|
|
19
19
|
var ref = react.useRef(null);
|
|
20
|
-
var [
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
return message !== null && message !== void 0 ? message : '';
|
|
20
|
+
var [lastSubmission, setLastSubmission] = react.useState((_config$lastSubmissio = config.lastSubmission) !== null && _config$lastSubmissio !== void 0 ? _config$lastSubmissio : null);
|
|
21
|
+
var [errors, setErrors] = react.useState(() => {
|
|
22
|
+
if (!config.lastSubmission) {
|
|
23
|
+
return [];
|
|
24
|
+
}
|
|
25
|
+
return [].concat(config.lastSubmission.error['']);
|
|
27
26
|
});
|
|
28
27
|
var [uncontrolledState, setUncontrolledState] = react.useState(() => {
|
|
29
|
-
var submission = config.
|
|
28
|
+
var submission = config.lastSubmission;
|
|
30
29
|
if (!submission) {
|
|
31
30
|
return {
|
|
32
31
|
defaultValue: config.defaultValue
|
|
33
32
|
};
|
|
34
33
|
}
|
|
34
|
+
var scope = dom.getScope(submission.intent);
|
|
35
35
|
return {
|
|
36
|
-
defaultValue: submission.
|
|
37
|
-
initialError: submission.error.
|
|
38
|
-
var [name] =
|
|
39
|
-
|
|
40
|
-
|
|
36
|
+
defaultValue: submission.payload,
|
|
37
|
+
initialError: Object.entries(submission.error).reduce((result, _ref) => {
|
|
38
|
+
var [name, message] = _ref;
|
|
39
|
+
if (name !== '' && (scope === null || scope === name)) {
|
|
40
|
+
result[name] = message;
|
|
41
|
+
}
|
|
42
|
+
return result;
|
|
43
|
+
}, {})
|
|
41
44
|
};
|
|
42
45
|
});
|
|
43
46
|
var fieldsetConfig = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, uncontrolledState), {}, {
|
|
@@ -54,11 +57,25 @@ function useForm() {
|
|
|
54
57
|
}, []);
|
|
55
58
|
react.useEffect(() => {
|
|
56
59
|
var form = ref.current;
|
|
57
|
-
|
|
60
|
+
var submission = config.lastSubmission;
|
|
61
|
+
if (!form || !submission) {
|
|
62
|
+
return;
|
|
63
|
+
}
|
|
64
|
+
var listCommand = dom.parseListCommand(submission.intent);
|
|
65
|
+
if (listCommand) {
|
|
66
|
+
form.dispatchEvent(new CustomEvent('conform/list', {
|
|
67
|
+
detail: submission.intent
|
|
68
|
+
}));
|
|
69
|
+
}
|
|
70
|
+
setLastSubmission(submission);
|
|
71
|
+
}, [config.lastSubmission]);
|
|
72
|
+
react.useEffect(() => {
|
|
73
|
+
var form = ref.current;
|
|
74
|
+
if (!form || !lastSubmission) {
|
|
58
75
|
return;
|
|
59
76
|
}
|
|
60
|
-
dom.reportSubmission(
|
|
61
|
-
}, [
|
|
77
|
+
dom.reportSubmission(ref.current, lastSubmission);
|
|
78
|
+
}, [lastSubmission]);
|
|
62
79
|
react.useEffect(() => {
|
|
63
80
|
// Revalidate the form when input value is changed
|
|
64
81
|
var handleInput = event => {
|
|
@@ -69,7 +86,7 @@ function useForm() {
|
|
|
69
86
|
return;
|
|
70
87
|
}
|
|
71
88
|
if (field.dataset.conformTouched || formConfig.initialReport === 'onChange') {
|
|
72
|
-
dom.
|
|
89
|
+
dom.requestIntent(form, dom.validate(field.name));
|
|
73
90
|
}
|
|
74
91
|
};
|
|
75
92
|
var handleBlur = event => {
|
|
@@ -80,18 +97,18 @@ function useForm() {
|
|
|
80
97
|
return;
|
|
81
98
|
}
|
|
82
99
|
if (formConfig.initialReport === 'onBlur' && !field.dataset.conformTouched) {
|
|
83
|
-
dom.
|
|
100
|
+
dom.requestIntent(form, dom.validate(field.name));
|
|
84
101
|
}
|
|
85
102
|
};
|
|
86
103
|
var handleInvalid = event => {
|
|
87
104
|
var form = dom.getFormElement(ref.current);
|
|
88
105
|
var field = event.target;
|
|
89
|
-
if (!form || !dom.isFieldElement(field) || field.form !== form || field.name !==
|
|
106
|
+
if (!form || !dom.isFieldElement(field) || field.form !== form || field.name !== dom.FORM_ERROR_ELEMENT_NAME) {
|
|
90
107
|
return;
|
|
91
108
|
}
|
|
92
109
|
event.preventDefault();
|
|
93
110
|
if (field.dataset.conformTouched) {
|
|
94
|
-
|
|
111
|
+
setErrors(dom.getErrors(field.validationMessage));
|
|
95
112
|
}
|
|
96
113
|
};
|
|
97
114
|
var handleReset = event => {
|
|
@@ -105,14 +122,12 @@ function useForm() {
|
|
|
105
122
|
for (var field of form.elements) {
|
|
106
123
|
if (dom.isFieldElement(field)) {
|
|
107
124
|
delete field.dataset.conformTouched;
|
|
108
|
-
field.setAttribute('aria-invalid', 'false');
|
|
109
125
|
field.setCustomValidity('');
|
|
110
126
|
}
|
|
111
127
|
}
|
|
112
|
-
|
|
128
|
+
setErrors([]);
|
|
113
129
|
setUncontrolledState({
|
|
114
|
-
defaultValue: formConfig.defaultValue
|
|
115
|
-
initialError: []
|
|
130
|
+
defaultValue: formConfig.defaultValue
|
|
116
131
|
});
|
|
117
132
|
};
|
|
118
133
|
|
|
@@ -134,77 +149,69 @@ function useForm() {
|
|
|
134
149
|
};
|
|
135
150
|
}, []);
|
|
136
151
|
var form = {
|
|
137
|
-
id: config.id,
|
|
138
152
|
ref,
|
|
139
|
-
error,
|
|
153
|
+
error: errors[0],
|
|
154
|
+
errors,
|
|
140
155
|
props: {
|
|
141
156
|
ref,
|
|
142
|
-
id: config.id,
|
|
143
157
|
noValidate,
|
|
144
158
|
onSubmit(event) {
|
|
145
159
|
var form = event.currentTarget;
|
|
146
160
|
var nativeEvent = event.nativeEvent;
|
|
147
161
|
var submitter = nativeEvent.submitter;
|
|
148
|
-
|
|
149
|
-
/**
|
|
150
|
-
* It checks defaultPrevented to confirm if the submission is intentional
|
|
151
|
-
* This is utilized by `useFieldList` to modify the list state when the submit
|
|
152
|
-
* event is captured and revalidate the form with new fields without triggering
|
|
153
|
-
* a form submission at the same time.
|
|
154
|
-
*/
|
|
155
162
|
if (event.defaultPrevented) {
|
|
156
163
|
return;
|
|
157
164
|
}
|
|
158
165
|
try {
|
|
159
|
-
var
|
|
166
|
+
var _config$onValidate;
|
|
160
167
|
var formData = dom.getFormData(form, submitter);
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
element.setCustomValidity('');
|
|
179
|
-
submission.error.push([element.name, element.validationMessage]);
|
|
180
|
-
}
|
|
181
|
-
}
|
|
168
|
+
var getSubmission = (_config$onValidate = config.onValidate) !== null && _config$onValidate !== void 0 ? _config$onValidate : context => dom.parse(context.formData);
|
|
169
|
+
var submission = getSubmission({
|
|
170
|
+
form,
|
|
171
|
+
formData
|
|
172
|
+
});
|
|
173
|
+
if (!config.noValidate && !(submitter !== null && submitter !== void 0 && submitter.formNoValidate) && Object.entries(submission.error).some(_ref2 => {
|
|
174
|
+
var [, message] = _ref2;
|
|
175
|
+
return message !== '' && ![].concat(message).includes(dom.VALIDATION_UNDEFINED);
|
|
176
|
+
}) || typeof config.onValidate !== 'undefined' && (submission.intent.startsWith('validate') || submission.intent.startsWith('list')) && Object.entries(submission.error).every(_ref3 => {
|
|
177
|
+
var [, message] = _ref3;
|
|
178
|
+
return ![].concat(message).includes(dom.VALIDATION_UNDEFINED);
|
|
179
|
+
})) {
|
|
180
|
+
var listCommand = dom.parseListCommand(submission.intent);
|
|
181
|
+
if (listCommand) {
|
|
182
|
+
form.dispatchEvent(new CustomEvent('conform/list', {
|
|
183
|
+
detail: submission.intent
|
|
184
|
+
}));
|
|
182
185
|
}
|
|
183
|
-
|
|
184
|
-
if (!config.noValidate && !(submitter !== null && submitter !== void 0 && submitter.formNoValidate) && dom.hasError(submission.error) || submission.type === 'validate' && config.mode !== 'server-validation') {
|
|
186
|
+
setLastSubmission(submission);
|
|
185
187
|
event.preventDefault();
|
|
186
188
|
} else {
|
|
187
189
|
var _config$onSubmit;
|
|
188
|
-
(_config$onSubmit = config.onSubmit) === null || _config$onSubmit === void 0 ? void 0 : _config$onSubmit.call(config, event, {
|
|
190
|
+
(_config$onSubmit = config.onSubmit) === null || _config$onSubmit === void 0 ? void 0 : _config$onSubmit.call(config, event, _rollupPluginBabelHelpers.objectSpread2({
|
|
189
191
|
formData,
|
|
190
192
|
submission
|
|
191
|
-
});
|
|
192
|
-
}
|
|
193
|
-
if (event.defaultPrevented) {
|
|
194
|
-
dom.reportSubmission(form, submission);
|
|
193
|
+
}, dom.getFormAttributes(form, submitter)));
|
|
195
194
|
}
|
|
196
195
|
} catch (e) {
|
|
197
196
|
console.warn(e);
|
|
198
197
|
}
|
|
199
198
|
}
|
|
200
|
-
}
|
|
201
|
-
config: fieldsetConfig
|
|
199
|
+
}
|
|
202
200
|
};
|
|
201
|
+
if (config.id) {
|
|
202
|
+
form.id = config.id;
|
|
203
|
+
form.errorId = "".concat(config.id, "-error");
|
|
204
|
+
form.props.id = form.id;
|
|
205
|
+
form.props['aria-describedby'] = form.errorId;
|
|
206
|
+
}
|
|
207
|
+
if (form.errorId && form.errors.length > 0) {
|
|
208
|
+
form.props['aria-invalid'] = 'true';
|
|
209
|
+
}
|
|
203
210
|
return [form, fieldset];
|
|
204
211
|
}
|
|
205
212
|
|
|
206
213
|
/**
|
|
207
|
-
*
|
|
214
|
+
* A set of field configuration
|
|
208
215
|
*/
|
|
209
216
|
|
|
210
217
|
function useFieldset(ref, config) {
|
|
@@ -214,18 +221,14 @@ function useFieldset(ref, config) {
|
|
|
214
221
|
() => {
|
|
215
222
|
var _config$defaultValue;
|
|
216
223
|
var initialError = {};
|
|
217
|
-
for (var [name, message] of (_config$initialError = config === null || config === void 0 ? void 0 : config.initialError) !== null && _config$initialError !== void 0 ? _config$initialError :
|
|
224
|
+
for (var [name, message] of Object.entries((_config$initialError = config === null || config === void 0 ? void 0 : config.initialError) !== null && _config$initialError !== void 0 ? _config$initialError : {})) {
|
|
218
225
|
var _config$initialError;
|
|
219
226
|
var [key, ...paths] = dom.getPaths(name);
|
|
220
227
|
if (typeof key === 'string') {
|
|
221
|
-
var _initialError$key;
|
|
222
228
|
var scopedName = dom.getName(paths);
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
} else {
|
|
227
|
-
initialError[key] = [...entries, [scopedName, message]];
|
|
228
|
-
}
|
|
229
|
+
initialError[key] = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, initialError[key]), {}, {
|
|
230
|
+
[scopedName]: message
|
|
231
|
+
});
|
|
229
232
|
}
|
|
230
233
|
}
|
|
231
234
|
return {
|
|
@@ -235,12 +238,9 @@ function useFieldset(ref, config) {
|
|
|
235
238
|
});
|
|
236
239
|
var [error, setError] = react.useState(() => {
|
|
237
240
|
var result = {};
|
|
238
|
-
for (var [key,
|
|
239
|
-
var
|
|
240
|
-
|
|
241
|
-
if (name === '') {
|
|
242
|
-
result[key] = message !== null && message !== void 0 ? message : '';
|
|
243
|
-
}
|
|
241
|
+
for (var [key, _error] of Object.entries(uncontrolledState.initialError)) {
|
|
242
|
+
var _error$;
|
|
243
|
+
result[key] = [].concat((_error$ = _error === null || _error === void 0 ? void 0 : _error['']) !== null && _error$ !== void 0 ? _error$ : []);
|
|
244
244
|
}
|
|
245
245
|
return result;
|
|
246
246
|
});
|
|
@@ -261,18 +261,13 @@ function useFieldset(ref, config) {
|
|
|
261
261
|
// Update the error only if the field belongs to the fieldset
|
|
262
262
|
if (typeof key === 'string' && paths.length === 0) {
|
|
263
263
|
if (field.dataset.conformTouched) {
|
|
264
|
-
// Update the aria attribute only if it is set
|
|
265
|
-
if (field.getAttribute('aria-invalid')) {
|
|
266
|
-
field.setAttribute('aria-invalid', field.validationMessage !== '' ? 'true' : 'false');
|
|
267
|
-
}
|
|
268
264
|
setError(prev => {
|
|
269
|
-
var
|
|
270
|
-
var prevMessage = (_prev$key = prev === null || prev === void 0 ? void 0 : prev[key]) !== null && _prev$key !== void 0 ? _prev$key : '';
|
|
265
|
+
var prevMessage = dom.getValidationMessage(prev === null || prev === void 0 ? void 0 : prev[key]);
|
|
271
266
|
if (prevMessage === field.validationMessage) {
|
|
272
267
|
return prev;
|
|
273
268
|
}
|
|
274
269
|
return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, prev), {}, {
|
|
275
|
-
[key]: field.validationMessage
|
|
270
|
+
[key]: dom.getErrors(field.validationMessage)
|
|
276
271
|
});
|
|
277
272
|
});
|
|
278
273
|
}
|
|
@@ -310,24 +305,24 @@ function useFieldset(ref, config) {
|
|
|
310
305
|
*/
|
|
311
306
|
return new Proxy({}, {
|
|
312
307
|
get(_target, key) {
|
|
313
|
-
var _fieldsetConfig$const
|
|
308
|
+
var _fieldsetConfig$const;
|
|
314
309
|
if (typeof key !== 'string') {
|
|
315
310
|
return;
|
|
316
311
|
}
|
|
317
312
|
var fieldsetConfig = config !== null && config !== void 0 ? config : {};
|
|
318
313
|
var constraint = (_fieldsetConfig$const = fieldsetConfig.constraint) === null || _fieldsetConfig$const === void 0 ? void 0 : _fieldsetConfig$const[key];
|
|
319
|
-
var
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
};
|
|
314
|
+
var errors = error === null || error === void 0 ? void 0 : error[key];
|
|
315
|
+
var field = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, constraint), {}, {
|
|
316
|
+
name: fieldsetConfig.name ? "".concat(fieldsetConfig.name, ".").concat(key) : key,
|
|
317
|
+
defaultValue: uncontrolledState.defaultValue[key],
|
|
318
|
+
initialError: uncontrolledState.initialError[key],
|
|
319
|
+
error: errors === null || errors === void 0 ? void 0 : errors[0],
|
|
320
|
+
errors
|
|
321
|
+
});
|
|
327
322
|
if (fieldsetConfig.form) {
|
|
328
|
-
field.
|
|
329
|
-
field.
|
|
330
|
-
field.
|
|
323
|
+
field.form = fieldsetConfig.form;
|
|
324
|
+
field.id = "".concat(fieldsetConfig.form, "-").concat(field.name);
|
|
325
|
+
field.errorId = "".concat(field.id, "-error");
|
|
331
326
|
}
|
|
332
327
|
return field;
|
|
333
328
|
}
|
|
@@ -345,18 +340,14 @@ function useFieldList(ref, config) {
|
|
|
345
340
|
var [uncontrolledState, setUncontrolledState] = react.useState(() => {
|
|
346
341
|
var _config$defaultValue2;
|
|
347
342
|
var initialError = [];
|
|
348
|
-
for (var [name, message] of (_config$initialError2 = config === null || config === void 0 ? void 0 : config.initialError) !== null && _config$initialError2 !== void 0 ? _config$initialError2 :
|
|
343
|
+
for (var [name, message] of Object.entries((_config$initialError2 = config === null || config === void 0 ? void 0 : config.initialError) !== null && _config$initialError2 !== void 0 ? _config$initialError2 : {})) {
|
|
349
344
|
var _config$initialError2;
|
|
350
345
|
var [index, ...paths] = dom.getPaths(name);
|
|
351
346
|
if (typeof index === 'number') {
|
|
352
|
-
var _initialError$index;
|
|
353
347
|
var scopedName = dom.getName(paths);
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
} else {
|
|
358
|
-
initialError[index] = [..._entries, [scopedName, message]];
|
|
359
|
-
}
|
|
348
|
+
initialError[index] = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, initialError[index]), {}, {
|
|
349
|
+
[scopedName]: message
|
|
350
|
+
});
|
|
360
351
|
}
|
|
361
352
|
}
|
|
362
353
|
return {
|
|
@@ -364,7 +355,10 @@ function useFieldList(ref, config) {
|
|
|
364
355
|
initialError
|
|
365
356
|
};
|
|
366
357
|
});
|
|
367
|
-
var [error, setError] = react.useState(() => uncontrolledState.initialError.map(error =>
|
|
358
|
+
var [error, setError] = react.useState(() => uncontrolledState.initialError.map(error => {
|
|
359
|
+
var _error$2;
|
|
360
|
+
return [].concat((_error$2 = error === null || error === void 0 ? void 0 : error['']) !== null && _error$2 !== void 0 ? _error$2 : []);
|
|
361
|
+
}));
|
|
368
362
|
var [entries, setEntries] = react.useState(() => {
|
|
369
363
|
var _config$defaultValue3;
|
|
370
364
|
return Object.entries((_config$defaultValue3 = config.defaultValue) !== null && _config$defaultValue3 !== void 0 ? _config$defaultValue3 : [undefined]);
|
|
@@ -387,24 +381,23 @@ function useFieldList(ref, config) {
|
|
|
387
381
|
if (typeof index === 'number' && paths.length === 0) {
|
|
388
382
|
if (field.dataset.conformTouched) {
|
|
389
383
|
setError(prev => {
|
|
390
|
-
var
|
|
391
|
-
var prevMessage = (_prev$index = prev === null || prev === void 0 ? void 0 : prev[index]) !== null && _prev$index !== void 0 ? _prev$index : '';
|
|
384
|
+
var prevMessage = dom.getValidationMessage(prev === null || prev === void 0 ? void 0 : prev[index]);
|
|
392
385
|
if (prevMessage === field.validationMessage) {
|
|
393
386
|
return prev;
|
|
394
387
|
}
|
|
395
|
-
return [...prev.slice(0, index), field.validationMessage, ...prev.slice(index + 1)];
|
|
388
|
+
return [...prev.slice(0, index), dom.getErrors(field.validationMessage), ...prev.slice(index + 1)];
|
|
396
389
|
});
|
|
397
390
|
}
|
|
398
391
|
event.preventDefault();
|
|
399
392
|
}
|
|
400
393
|
};
|
|
401
|
-
var
|
|
394
|
+
var listHandler = event => {
|
|
402
395
|
var form = dom.getFormElement(ref.current);
|
|
403
|
-
if (!form || event.target !== form
|
|
396
|
+
if (!form || event.target !== form) {
|
|
404
397
|
return;
|
|
405
398
|
}
|
|
406
|
-
var command = dom.parseListCommand(event.
|
|
407
|
-
if (command.scope !== configRef.current.name) {
|
|
399
|
+
var command = dom.parseListCommand(event.detail);
|
|
400
|
+
if ((command === null || command === void 0 ? void 0 : command.scope) !== configRef.current.name) {
|
|
408
401
|
// Ensure the scope of the listener are limited to specific field name
|
|
409
402
|
return;
|
|
410
403
|
}
|
|
@@ -415,7 +408,9 @@ function useFieldList(ref, config) {
|
|
|
415
408
|
case 'replace':
|
|
416
409
|
return dom.updateList([...(entries !== null && entries !== void 0 ? entries : [])], _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, command), {}, {
|
|
417
410
|
payload: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, command.payload), {}, {
|
|
418
|
-
defaultValue: ["".concat(Date.now()),
|
|
411
|
+
defaultValue: ["".concat(Date.now()),
|
|
412
|
+
// @ts-expect-error unknown type as it is sent through network
|
|
413
|
+
command.payload.defaultValue]
|
|
419
414
|
})
|
|
420
415
|
}));
|
|
421
416
|
default:
|
|
@@ -440,7 +435,6 @@ function useFieldList(ref, config) {
|
|
|
440
435
|
}
|
|
441
436
|
}
|
|
442
437
|
});
|
|
443
|
-
event.preventDefault();
|
|
444
438
|
};
|
|
445
439
|
var resetHandler = event => {
|
|
446
440
|
var _fieldConfig$defaultV, _fieldConfig$defaultV2;
|
|
@@ -456,108 +450,37 @@ function useFieldList(ref, config) {
|
|
|
456
450
|
setEntries(Object.entries((_fieldConfig$defaultV2 = fieldConfig.defaultValue) !== null && _fieldConfig$defaultV2 !== void 0 ? _fieldConfig$defaultV2 : [undefined]));
|
|
457
451
|
setError([]);
|
|
458
452
|
};
|
|
459
|
-
|
|
453
|
+
|
|
454
|
+
// @ts-expect-error Custom event: conform/list
|
|
455
|
+
document.addEventListener('conform/list', listHandler, true);
|
|
460
456
|
document.addEventListener('invalid', invalidHandler, true);
|
|
461
457
|
document.addEventListener('reset', resetHandler);
|
|
462
458
|
return () => {
|
|
463
|
-
|
|
459
|
+
// @ts-expect-error Custom event: conform/list
|
|
460
|
+
document.removeEventListener('conform/list', listHandler, true);
|
|
464
461
|
document.removeEventListener('invalid', invalidHandler, true);
|
|
465
462
|
document.removeEventListener('reset', resetHandler);
|
|
466
463
|
};
|
|
467
464
|
}, [ref]);
|
|
468
|
-
return entries.map((
|
|
469
|
-
var [key, defaultValue] =
|
|
465
|
+
return entries.map((_ref4, index) => {
|
|
466
|
+
var [key, defaultValue] = _ref4;
|
|
467
|
+
var errors = error[index];
|
|
470
468
|
var fieldConfig = {
|
|
471
469
|
name: "".concat(config.name, "[").concat(index, "]"),
|
|
472
470
|
defaultValue: defaultValue !== null && defaultValue !== void 0 ? defaultValue : uncontrolledState.defaultValue[index],
|
|
473
|
-
initialError: uncontrolledState.initialError[index]
|
|
471
|
+
initialError: uncontrolledState.initialError[index],
|
|
472
|
+
error: errors === null || errors === void 0 ? void 0 : errors[0],
|
|
473
|
+
errors
|
|
474
474
|
};
|
|
475
475
|
if (config.form) {
|
|
476
476
|
fieldConfig.form = config.form;
|
|
477
477
|
fieldConfig.id = "".concat(config.form, "-").concat(config.name);
|
|
478
478
|
fieldConfig.errorId = "".concat(fieldConfig.id, "-error");
|
|
479
479
|
}
|
|
480
|
-
return {
|
|
481
|
-
key
|
|
482
|
-
|
|
483
|
-
config: fieldConfig
|
|
484
|
-
};
|
|
485
|
-
});
|
|
486
|
-
}
|
|
487
|
-
/**
|
|
488
|
-
* Returns the properties required to configure a shadow input for validation.
|
|
489
|
-
* This is particular useful when integrating dropdown and datepicker whichs
|
|
490
|
-
* introduces custom input mode.
|
|
491
|
-
*
|
|
492
|
-
* @deprecated Please use the `useInputEvent` hook instead
|
|
493
|
-
* @see https://conform.guide/api/react#usecontrolledinput
|
|
494
|
-
*/
|
|
495
|
-
function useControlledInput(config) {
|
|
496
|
-
var _config$defaultValue4;
|
|
497
|
-
var ref = react.useRef(null);
|
|
498
|
-
var inputRef = react.useRef(null);
|
|
499
|
-
var configRef = react.useRef(config);
|
|
500
|
-
var [uncontrolledState, setUncontrolledState] = react.useState({
|
|
501
|
-
defaultValue: config.defaultValue,
|
|
502
|
-
initialError: config.initialError
|
|
503
|
-
});
|
|
504
|
-
var [value, setValue] = react.useState("".concat((_config$defaultValue4 = config.defaultValue) !== null && _config$defaultValue4 !== void 0 ? _config$defaultValue4 : ''));
|
|
505
|
-
var handleChange = eventOrValue => {
|
|
506
|
-
if (!ref.current) {
|
|
507
|
-
return;
|
|
508
|
-
}
|
|
509
|
-
var newValue = typeof eventOrValue === 'string' ? eventOrValue : eventOrValue.target.value;
|
|
510
|
-
ref.current.value = newValue;
|
|
511
|
-
ref.current.dispatchEvent(new InputEvent('input', {
|
|
512
|
-
bubbles: true
|
|
513
|
-
}));
|
|
514
|
-
setValue(newValue);
|
|
515
|
-
};
|
|
516
|
-
var handleBlur = () => {
|
|
517
|
-
var _ref$current;
|
|
518
|
-
(_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.dispatchEvent(new FocusEvent('blur', {
|
|
519
|
-
bubbles: true
|
|
520
|
-
}));
|
|
521
|
-
};
|
|
522
|
-
var handleInvalid = event => {
|
|
523
|
-
event.preventDefault();
|
|
524
|
-
};
|
|
525
|
-
react.useEffect(() => {
|
|
526
|
-
configRef.current = config;
|
|
480
|
+
return _rollupPluginBabelHelpers.objectSpread2({
|
|
481
|
+
key
|
|
482
|
+
}, fieldConfig);
|
|
527
483
|
});
|
|
528
|
-
react.useEffect(() => {
|
|
529
|
-
var resetHandler = event => {
|
|
530
|
-
var _configRef$current$de;
|
|
531
|
-
var form = dom.getFormElement(ref.current);
|
|
532
|
-
if (!form || event.target !== form) {
|
|
533
|
-
return;
|
|
534
|
-
}
|
|
535
|
-
setUncontrolledState({
|
|
536
|
-
defaultValue: configRef.current.defaultValue,
|
|
537
|
-
initialError: configRef.current.initialError
|
|
538
|
-
});
|
|
539
|
-
setValue("".concat((_configRef$current$de = configRef.current.defaultValue) !== null && _configRef$current$de !== void 0 ? _configRef$current$de : ''));
|
|
540
|
-
};
|
|
541
|
-
document.addEventListener('reset', resetHandler);
|
|
542
|
-
return () => {
|
|
543
|
-
document.removeEventListener('reset', resetHandler);
|
|
544
|
-
};
|
|
545
|
-
}, []);
|
|
546
|
-
return [_rollupPluginBabelHelpers.objectSpread2({
|
|
547
|
-
ref,
|
|
548
|
-
onFocus() {
|
|
549
|
-
var _inputRef$current;
|
|
550
|
-
(_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
|
|
551
|
-
}
|
|
552
|
-
}, helpers.input(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, config), uncontrolledState), {
|
|
553
|
-
hidden: true
|
|
554
|
-
})), {
|
|
555
|
-
ref: inputRef,
|
|
556
|
-
value,
|
|
557
|
-
onChange: handleChange,
|
|
558
|
-
onBlur: handleBlur,
|
|
559
|
-
onInvalid: handleInvalid
|
|
560
|
-
}];
|
|
561
484
|
}
|
|
562
485
|
|
|
563
486
|
/**
|
|
@@ -735,7 +658,6 @@ function useInputEvent(options) {
|
|
|
735
658
|
return [ref, control];
|
|
736
659
|
}
|
|
737
660
|
|
|
738
|
-
exports.useControlledInput = useControlledInput;
|
|
739
661
|
exports.useFieldList = useFieldList;
|
|
740
662
|
exports.useFieldset = useFieldset;
|
|
741
663
|
exports.useForm = useForm;
|
package/index.d.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
export { type FieldConfig, type FieldsetConstraint, type Submission,
|
|
2
|
-
export
|
|
1
|
+
export { type FieldConfig, type FieldsetConstraint, type Submission, parse, validateConstraint, list, validate, requestIntent, isFieldElement, } from '@conform-to/dom';
|
|
2
|
+
export { type Fieldset, type FieldsetConfig, type FormConfig, useForm, useFieldset, useFieldList, useInputEvent, } from './hooks';
|
|
3
3
|
export * as conform from './helpers';
|
package/index.js
CHANGED
|
@@ -8,13 +8,9 @@ var helpers = require('./helpers.js');
|
|
|
8
8
|
|
|
9
9
|
|
|
10
10
|
|
|
11
|
-
Object.defineProperty(exports, '
|
|
11
|
+
Object.defineProperty(exports, 'isFieldElement', {
|
|
12
12
|
enumerable: true,
|
|
13
|
-
get: function () { return dom.
|
|
14
|
-
});
|
|
15
|
-
Object.defineProperty(exports, 'hasError', {
|
|
16
|
-
enumerable: true,
|
|
17
|
-
get: function () { return dom.hasError; }
|
|
13
|
+
get: function () { return dom.isFieldElement; }
|
|
18
14
|
});
|
|
19
15
|
Object.defineProperty(exports, 'list', {
|
|
20
16
|
enumerable: true,
|
|
@@ -24,23 +20,18 @@ Object.defineProperty(exports, 'parse', {
|
|
|
24
20
|
enumerable: true,
|
|
25
21
|
get: function () { return dom.parse; }
|
|
26
22
|
});
|
|
27
|
-
Object.defineProperty(exports, '
|
|
28
|
-
enumerable: true,
|
|
29
|
-
get: function () { return dom.requestCommand; }
|
|
30
|
-
});
|
|
31
|
-
Object.defineProperty(exports, 'requestSubmit', {
|
|
23
|
+
Object.defineProperty(exports, 'requestIntent', {
|
|
32
24
|
enumerable: true,
|
|
33
|
-
get: function () { return dom.
|
|
34
|
-
});
|
|
35
|
-
Object.defineProperty(exports, 'shouldValidate', {
|
|
36
|
-
enumerable: true,
|
|
37
|
-
get: function () { return dom.shouldValidate; }
|
|
25
|
+
get: function () { return dom.requestIntent; }
|
|
38
26
|
});
|
|
39
27
|
Object.defineProperty(exports, 'validate', {
|
|
40
28
|
enumerable: true,
|
|
41
29
|
get: function () { return dom.validate; }
|
|
42
30
|
});
|
|
43
|
-
exports
|
|
31
|
+
Object.defineProperty(exports, 'validateConstraint', {
|
|
32
|
+
enumerable: true,
|
|
33
|
+
get: function () { return dom.validateConstraint; }
|
|
34
|
+
});
|
|
44
35
|
exports.useFieldList = hooks.useFieldList;
|
|
45
36
|
exports.useFieldset = hooks.useFieldset;
|
|
46
37
|
exports.useForm = hooks.useForm;
|
|
@@ -20,6 +20,7 @@ function _objectSpread2(target) {
|
|
|
20
20
|
return target;
|
|
21
21
|
}
|
|
22
22
|
function _defineProperty(obj, key, value) {
|
|
23
|
+
key = _toPropertyKey(key);
|
|
23
24
|
if (key in obj) {
|
|
24
25
|
Object.defineProperty(obj, key, {
|
|
25
26
|
value: value,
|
|
@@ -32,5 +33,19 @@ function _defineProperty(obj, key, value) {
|
|
|
32
33
|
}
|
|
33
34
|
return obj;
|
|
34
35
|
}
|
|
36
|
+
function _toPrimitive(input, hint) {
|
|
37
|
+
if (typeof input !== "object" || input === null) return input;
|
|
38
|
+
var prim = input[Symbol.toPrimitive];
|
|
39
|
+
if (prim !== undefined) {
|
|
40
|
+
var res = prim.call(input, hint || "default");
|
|
41
|
+
if (typeof res !== "object") return res;
|
|
42
|
+
throw new TypeError("@@toPrimitive must return a primitive value.");
|
|
43
|
+
}
|
|
44
|
+
return (hint === "string" ? String : Number)(input);
|
|
45
|
+
}
|
|
46
|
+
function _toPropertyKey(arg) {
|
|
47
|
+
var key = _toPrimitive(arg, "string");
|
|
48
|
+
return typeof key === "symbol" ? key : String(key);
|
|
49
|
+
}
|
|
35
50
|
|
|
36
|
-
export { _defineProperty as defineProperty, _objectSpread2 as objectSpread2 };
|
|
51
|
+
export { _defineProperty as defineProperty, _objectSpread2 as objectSpread2, _toPrimitive as toPrimitive, _toPropertyKey as toPropertyKey };
|