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