@arturton/react-form-constructor 0.1.3 → 0.2.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 +1718 -87
- package/dist/index.d.mts +222 -27
- package/dist/index.d.ts +222 -27
- package/dist/index.js +999 -60
- package/dist/index.mjs +973 -60
- package/package.json +1 -4
package/dist/index.mjs
CHANGED
|
@@ -1,8 +1,324 @@
|
|
|
1
|
-
// src/FormLayout.tsx
|
|
2
|
-
import { useForm } from "react-hook-form";
|
|
1
|
+
// src/JsonMethod/FormLayout.tsx
|
|
2
|
+
import { useForm, Controller } from "react-hook-form";
|
|
3
|
+
import { PatternFormat } from "react-number-format";
|
|
4
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
5
|
+
function FieldRenderer({
|
|
6
|
+
field,
|
|
7
|
+
register,
|
|
8
|
+
control,
|
|
9
|
+
errors,
|
|
10
|
+
globalClasses
|
|
11
|
+
}) {
|
|
12
|
+
const fieldName = String(field.key);
|
|
13
|
+
const error = errors[fieldName];
|
|
14
|
+
const errorMessage = error?.message;
|
|
15
|
+
const hasError = !!error;
|
|
16
|
+
const labelFieldClassName = field.labelClass || globalClasses.label;
|
|
17
|
+
const inputFieldClassName = `${field.inputClass || globalClasses.input || ""} ${hasError ? field.classNameError || "" : ""}`.trim();
|
|
18
|
+
const errorFieldClassName = field.errorClass || globalClasses.error;
|
|
19
|
+
if (field.render) {
|
|
20
|
+
return field.render({
|
|
21
|
+
register,
|
|
22
|
+
control,
|
|
23
|
+
errors,
|
|
24
|
+
field
|
|
25
|
+
});
|
|
26
|
+
}
|
|
27
|
+
const renderField = () => {
|
|
28
|
+
switch (field.type) {
|
|
29
|
+
// Text inputs
|
|
30
|
+
case "text":
|
|
31
|
+
case "email":
|
|
32
|
+
case "password":
|
|
33
|
+
return /* @__PURE__ */ jsx(
|
|
34
|
+
"input",
|
|
35
|
+
{
|
|
36
|
+
...register(fieldName, {
|
|
37
|
+
required: field.required,
|
|
38
|
+
minLength: field.minLength,
|
|
39
|
+
maxLength: field.maxLength,
|
|
40
|
+
pattern: field.pattern,
|
|
41
|
+
validate: field.validate
|
|
42
|
+
}),
|
|
43
|
+
type: field.type,
|
|
44
|
+
placeholder: field.placeholder,
|
|
45
|
+
className: inputFieldClassName,
|
|
46
|
+
disabled: field.disabled
|
|
47
|
+
}
|
|
48
|
+
);
|
|
49
|
+
// Number input
|
|
50
|
+
case "number":
|
|
51
|
+
return /* @__PURE__ */ jsx(
|
|
52
|
+
"input",
|
|
53
|
+
{
|
|
54
|
+
...register(fieldName, {
|
|
55
|
+
required: field.required,
|
|
56
|
+
minLength: field.minLength,
|
|
57
|
+
maxLength: field.maxLength,
|
|
58
|
+
validate: field.validate
|
|
59
|
+
}),
|
|
60
|
+
type: "number",
|
|
61
|
+
min: field.min,
|
|
62
|
+
max: field.max,
|
|
63
|
+
step: field.step || 1,
|
|
64
|
+
placeholder: field.placeholder,
|
|
65
|
+
className: inputFieldClassName,
|
|
66
|
+
disabled: field.disabled
|
|
67
|
+
}
|
|
68
|
+
);
|
|
69
|
+
// Date input
|
|
70
|
+
case "date":
|
|
71
|
+
return /* @__PURE__ */ jsx(
|
|
72
|
+
"input",
|
|
73
|
+
{
|
|
74
|
+
...register(fieldName, {
|
|
75
|
+
required: field.required,
|
|
76
|
+
validate: field.validate
|
|
77
|
+
}),
|
|
78
|
+
type: "date",
|
|
79
|
+
className: inputFieldClassName,
|
|
80
|
+
disabled: field.disabled
|
|
81
|
+
}
|
|
82
|
+
);
|
|
83
|
+
// Textarea
|
|
84
|
+
case "textarea":
|
|
85
|
+
return /* @__PURE__ */ jsx(
|
|
86
|
+
"textarea",
|
|
87
|
+
{
|
|
88
|
+
...register(fieldName, {
|
|
89
|
+
required: field.required,
|
|
90
|
+
minLength: field.minLength,
|
|
91
|
+
maxLength: field.maxLength,
|
|
92
|
+
validate: field.validate
|
|
93
|
+
}),
|
|
94
|
+
placeholder: field.placeholder,
|
|
95
|
+
className: inputFieldClassName,
|
|
96
|
+
disabled: field.disabled,
|
|
97
|
+
rows: field.rows || 4
|
|
98
|
+
}
|
|
99
|
+
);
|
|
100
|
+
// Select
|
|
101
|
+
case "select":
|
|
102
|
+
return /* @__PURE__ */ jsxs(
|
|
103
|
+
"select",
|
|
104
|
+
{
|
|
105
|
+
...register(fieldName, {
|
|
106
|
+
required: field.required,
|
|
107
|
+
validate: field.validate
|
|
108
|
+
}),
|
|
109
|
+
className: inputFieldClassName,
|
|
110
|
+
disabled: field.disabled,
|
|
111
|
+
multiple: field.multiple,
|
|
112
|
+
children: [
|
|
113
|
+
field.placeholder && /* @__PURE__ */ jsx("option", { value: "", children: field.placeholder }),
|
|
114
|
+
field.options?.map((option) => /* @__PURE__ */ jsx("option", { value: option.value, children: option.label }, option.value))
|
|
115
|
+
]
|
|
116
|
+
}
|
|
117
|
+
);
|
|
118
|
+
// Masked input
|
|
119
|
+
case "mask":
|
|
120
|
+
return field.maska ? /* @__PURE__ */ jsx(
|
|
121
|
+
Controller,
|
|
122
|
+
{
|
|
123
|
+
name: fieldName,
|
|
124
|
+
control,
|
|
125
|
+
rules: {
|
|
126
|
+
required: field.maska.required || field.required,
|
|
127
|
+
minLength: field.minLength,
|
|
128
|
+
maxLength: field.maxLength,
|
|
129
|
+
validate: field.validate
|
|
130
|
+
},
|
|
131
|
+
render: ({ field: fieldProps }) => /* @__PURE__ */ jsx(
|
|
132
|
+
PatternFormat,
|
|
133
|
+
{
|
|
134
|
+
...fieldProps,
|
|
135
|
+
format: field.maska.format,
|
|
136
|
+
mask: field.maska.mask,
|
|
137
|
+
placeholder: field.placeholder,
|
|
138
|
+
className: inputFieldClassName,
|
|
139
|
+
disabled: field.disabled
|
|
140
|
+
}
|
|
141
|
+
)
|
|
142
|
+
}
|
|
143
|
+
) : null;
|
|
144
|
+
// File input
|
|
145
|
+
case "file":
|
|
146
|
+
return /* @__PURE__ */ jsx(
|
|
147
|
+
"input",
|
|
148
|
+
{
|
|
149
|
+
...register(fieldName, {
|
|
150
|
+
required: field.required,
|
|
151
|
+
validate: field.validate
|
|
152
|
+
}),
|
|
153
|
+
type: "file",
|
|
154
|
+
accept: field.accept,
|
|
155
|
+
className: inputFieldClassName,
|
|
156
|
+
disabled: field.disabled,
|
|
157
|
+
multiple: field.multiple
|
|
158
|
+
}
|
|
159
|
+
);
|
|
160
|
+
// Checkbox
|
|
161
|
+
case "checkbox":
|
|
162
|
+
return /* @__PURE__ */ jsxs("div", { className: field.containerClass, children: [
|
|
163
|
+
/* @__PURE__ */ jsx(
|
|
164
|
+
"input",
|
|
165
|
+
{
|
|
166
|
+
...register(fieldName, {
|
|
167
|
+
required: field.required,
|
|
168
|
+
validate: field.validate
|
|
169
|
+
}),
|
|
170
|
+
type: "checkbox",
|
|
171
|
+
id: fieldName,
|
|
172
|
+
className: inputFieldClassName,
|
|
173
|
+
disabled: field.disabled,
|
|
174
|
+
defaultChecked: field.defaultChecked
|
|
175
|
+
}
|
|
176
|
+
),
|
|
177
|
+
field.label && /* @__PURE__ */ jsx("label", { htmlFor: fieldName, className: labelFieldClassName, children: field.label })
|
|
178
|
+
] });
|
|
179
|
+
// Radio buttons
|
|
180
|
+
case "radio":
|
|
181
|
+
return /* @__PURE__ */ jsx("div", { className: field.containerClass, children: field.radioOptions?.map((option) => /* @__PURE__ */ jsxs("label", { className: labelFieldClassName, children: [
|
|
182
|
+
/* @__PURE__ */ jsx(
|
|
183
|
+
"input",
|
|
184
|
+
{
|
|
185
|
+
...register(fieldName, {
|
|
186
|
+
required: field.required,
|
|
187
|
+
validate: field.validate
|
|
188
|
+
}),
|
|
189
|
+
type: "radio",
|
|
190
|
+
value: option.value,
|
|
191
|
+
className: inputFieldClassName,
|
|
192
|
+
disabled: field.disabled,
|
|
193
|
+
defaultChecked: field.defaultChecked
|
|
194
|
+
}
|
|
195
|
+
),
|
|
196
|
+
option.label
|
|
197
|
+
] }, option.value)) });
|
|
198
|
+
// Range/Slider
|
|
199
|
+
case "range":
|
|
200
|
+
return /* @__PURE__ */ jsxs("div", { className: field.containerClass, children: [
|
|
201
|
+
/* @__PURE__ */ jsx(
|
|
202
|
+
"input",
|
|
203
|
+
{
|
|
204
|
+
...register(fieldName, {
|
|
205
|
+
required: field.required,
|
|
206
|
+
validate: field.validate
|
|
207
|
+
}),
|
|
208
|
+
type: "range",
|
|
209
|
+
min: field.min || 0,
|
|
210
|
+
max: field.max || 100,
|
|
211
|
+
step: field.step || 1,
|
|
212
|
+
className: inputFieldClassName,
|
|
213
|
+
disabled: field.disabled
|
|
214
|
+
}
|
|
215
|
+
),
|
|
216
|
+
field.showValue && /* @__PURE__ */ jsx("span", { children: errors[fieldName]?.message || "Value" })
|
|
217
|
+
] });
|
|
218
|
+
default:
|
|
219
|
+
return /* @__PURE__ */ jsx(
|
|
220
|
+
"input",
|
|
221
|
+
{
|
|
222
|
+
...register(fieldName, {
|
|
223
|
+
required: field.required,
|
|
224
|
+
minLength: field.minLength,
|
|
225
|
+
maxLength: field.maxLength,
|
|
226
|
+
pattern: field.pattern,
|
|
227
|
+
validate: field.validate
|
|
228
|
+
}),
|
|
229
|
+
type: "text",
|
|
230
|
+
placeholder: field.placeholder,
|
|
231
|
+
className: inputFieldClassName,
|
|
232
|
+
disabled: field.disabled
|
|
233
|
+
}
|
|
234
|
+
);
|
|
235
|
+
}
|
|
236
|
+
};
|
|
237
|
+
return renderField();
|
|
238
|
+
}
|
|
239
|
+
function FormLayout({
|
|
240
|
+
formData,
|
|
241
|
+
funSubmit,
|
|
242
|
+
defaultValues,
|
|
243
|
+
onError,
|
|
244
|
+
formClass,
|
|
245
|
+
containerClass,
|
|
246
|
+
buttonClass,
|
|
247
|
+
buttonName = "Submit",
|
|
248
|
+
labelClass,
|
|
249
|
+
inputClass,
|
|
250
|
+
errorClass,
|
|
251
|
+
submitButtonProps,
|
|
252
|
+
disabledOnError = false
|
|
253
|
+
}) {
|
|
254
|
+
const {
|
|
255
|
+
register,
|
|
256
|
+
handleSubmit,
|
|
257
|
+
control,
|
|
258
|
+
formState: { errors }
|
|
259
|
+
} = useForm({
|
|
260
|
+
mode: "onChange",
|
|
261
|
+
defaultValues
|
|
262
|
+
});
|
|
263
|
+
const onSubmit = (data) => {
|
|
264
|
+
funSubmit(data);
|
|
265
|
+
};
|
|
266
|
+
const onSubmitError = (formErrors) => {
|
|
267
|
+
onError?.(formErrors);
|
|
268
|
+
};
|
|
269
|
+
const globalClasses = {
|
|
270
|
+
label: labelClass,
|
|
271
|
+
input: inputClass,
|
|
272
|
+
error: errorClass
|
|
273
|
+
};
|
|
274
|
+
const hasErrors = Object.keys(errors).length > 0;
|
|
275
|
+
return /* @__PURE__ */ jsxs(
|
|
276
|
+
"form",
|
|
277
|
+
{
|
|
278
|
+
onSubmit: handleSubmit(onSubmit, onSubmitError),
|
|
279
|
+
className: formClass,
|
|
280
|
+
children: [
|
|
281
|
+
/* @__PURE__ */ jsx("div", { className: containerClass, children: formData.map((field) => /* @__PURE__ */ jsxs("div", { className: field.containerClass, children: [
|
|
282
|
+
field.type !== "checkbox" && field.label && /* @__PURE__ */ jsxs(
|
|
283
|
+
"label",
|
|
284
|
+
{
|
|
285
|
+
htmlFor: String(field.key),
|
|
286
|
+
className: field.labelClass || globalClasses.label,
|
|
287
|
+
children: [
|
|
288
|
+
field.label,
|
|
289
|
+
field.required && /* @__PURE__ */ jsx("span", { className: "text-red-500", children: "*" })
|
|
290
|
+
]
|
|
291
|
+
}
|
|
292
|
+
),
|
|
293
|
+
/* @__PURE__ */ jsx(
|
|
294
|
+
FieldRenderer,
|
|
295
|
+
{
|
|
296
|
+
field,
|
|
297
|
+
register,
|
|
298
|
+
control,
|
|
299
|
+
errors,
|
|
300
|
+
globalClasses
|
|
301
|
+
}
|
|
302
|
+
),
|
|
303
|
+
errors[String(field.key)] && /* @__PURE__ */ jsx("span", { className: field.errorClass || globalClasses.error, children: errors[String(field.key)]?.message })
|
|
304
|
+
] }, String(field.key))) }),
|
|
305
|
+
/* @__PURE__ */ jsx(
|
|
306
|
+
"button",
|
|
307
|
+
{
|
|
308
|
+
type: "submit",
|
|
309
|
+
className: buttonClass,
|
|
310
|
+
disabled: disabledOnError && hasErrors,
|
|
311
|
+
...submitButtonProps,
|
|
312
|
+
children: buttonName
|
|
313
|
+
}
|
|
314
|
+
)
|
|
315
|
+
]
|
|
316
|
+
}
|
|
317
|
+
);
|
|
318
|
+
}
|
|
3
319
|
|
|
4
320
|
// src/InputForm/layouts/mainLayout.tsx
|
|
5
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
321
|
+
import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
6
322
|
function MainLayout({
|
|
7
323
|
children,
|
|
8
324
|
label,
|
|
@@ -12,22 +328,22 @@ function MainLayout({
|
|
|
12
328
|
labelClass,
|
|
13
329
|
errorClass
|
|
14
330
|
}) {
|
|
15
|
-
return /* @__PURE__ */
|
|
16
|
-
/* @__PURE__ */
|
|
331
|
+
return /* @__PURE__ */ jsxs2("div", { children: [
|
|
332
|
+
label && /* @__PURE__ */ jsxs2("label", { className: labelClass, children: [
|
|
17
333
|
label,
|
|
18
334
|
" ",
|
|
19
|
-
required ? /* @__PURE__ */
|
|
335
|
+
required ? /* @__PURE__ */ jsx2("span", { children: "*" }) : null
|
|
20
336
|
] }),
|
|
21
337
|
children,
|
|
22
|
-
error?.[name] && /* @__PURE__ */
|
|
338
|
+
error?.[name] && /* @__PURE__ */ jsx2("span", { className: errorClass, children: error?.[name]?.message })
|
|
23
339
|
] });
|
|
24
340
|
}
|
|
25
341
|
var mainLayout_default = MainLayout;
|
|
26
342
|
|
|
27
343
|
// src/InputForm/components/MaskedField.tsx
|
|
28
|
-
import { Controller } from "react-hook-form";
|
|
29
|
-
import { PatternFormat } from "react-number-format";
|
|
30
|
-
import { jsx as
|
|
344
|
+
import { Controller as Controller2 } from "react-hook-form";
|
|
345
|
+
import { PatternFormat as PatternFormat2 } from "react-number-format";
|
|
346
|
+
import { jsx as jsx3 } from "react/jsx-runtime";
|
|
31
347
|
function MaskedField({
|
|
32
348
|
placeholder,
|
|
33
349
|
name,
|
|
@@ -35,14 +351,14 @@ function MaskedField({
|
|
|
35
351
|
maska,
|
|
36
352
|
inputClass
|
|
37
353
|
}) {
|
|
38
|
-
return /* @__PURE__ */
|
|
39
|
-
|
|
354
|
+
return /* @__PURE__ */ jsx3(
|
|
355
|
+
Controller2,
|
|
40
356
|
{
|
|
41
357
|
name: name || "",
|
|
42
358
|
control,
|
|
43
359
|
rules: { required: maska.required },
|
|
44
|
-
render: ({ field }) => /* @__PURE__ */
|
|
45
|
-
|
|
360
|
+
render: ({ field }) => /* @__PURE__ */ jsx3(
|
|
361
|
+
PatternFormat2,
|
|
46
362
|
{
|
|
47
363
|
...field,
|
|
48
364
|
format: maska.format,
|
|
@@ -57,7 +373,7 @@ function MaskedField({
|
|
|
57
373
|
var MaskedField_default = MaskedField;
|
|
58
374
|
|
|
59
375
|
// src/InputForm/components/InputField.tsx
|
|
60
|
-
import { jsx as
|
|
376
|
+
import { jsx as jsx4 } from "react/jsx-runtime";
|
|
61
377
|
function InputField({
|
|
62
378
|
register,
|
|
63
379
|
type,
|
|
@@ -65,7 +381,7 @@ function InputField({
|
|
|
65
381
|
inputClass,
|
|
66
382
|
name
|
|
67
383
|
}) {
|
|
68
|
-
return /* @__PURE__ */
|
|
384
|
+
return /* @__PURE__ */ jsx4(
|
|
69
385
|
"input",
|
|
70
386
|
{
|
|
71
387
|
id: name,
|
|
@@ -79,7 +395,7 @@ function InputField({
|
|
|
79
395
|
var InputField_default = InputField;
|
|
80
396
|
|
|
81
397
|
// src/InputForm/InputForm.tsx
|
|
82
|
-
import { jsx as
|
|
398
|
+
import { jsx as jsx5 } from "react/jsx-runtime";
|
|
83
399
|
function InputForm({
|
|
84
400
|
register,
|
|
85
401
|
type,
|
|
@@ -96,7 +412,7 @@ function InputForm({
|
|
|
96
412
|
}) {
|
|
97
413
|
const renderChildren = () => {
|
|
98
414
|
if (maska) {
|
|
99
|
-
return /* @__PURE__ */
|
|
415
|
+
return /* @__PURE__ */ jsx5(
|
|
100
416
|
MaskedField_default,
|
|
101
417
|
{
|
|
102
418
|
name,
|
|
@@ -107,7 +423,7 @@ function InputForm({
|
|
|
107
423
|
}
|
|
108
424
|
);
|
|
109
425
|
} else {
|
|
110
|
-
return /* @__PURE__ */
|
|
426
|
+
return /* @__PURE__ */ jsx5(
|
|
111
427
|
InputField_default,
|
|
112
428
|
{
|
|
113
429
|
name,
|
|
@@ -119,7 +435,7 @@ function InputForm({
|
|
|
119
435
|
);
|
|
120
436
|
}
|
|
121
437
|
};
|
|
122
|
-
return /* @__PURE__ */
|
|
438
|
+
return /* @__PURE__ */ jsx5(
|
|
123
439
|
mainLayout_default,
|
|
124
440
|
{
|
|
125
441
|
label,
|
|
@@ -134,66 +450,663 @@ function InputForm({
|
|
|
134
450
|
}
|
|
135
451
|
var InputForm_default = InputForm;
|
|
136
452
|
|
|
137
|
-
// src/
|
|
138
|
-
import {
|
|
139
|
-
|
|
140
|
-
|
|
453
|
+
// src/ProviderMethod/layouts/FormProvider.tsx
|
|
454
|
+
import { useForm as useForm2, useWatch } from "react-hook-form";
|
|
455
|
+
|
|
456
|
+
// src/ProviderMethod/context/FormContext.tsx
|
|
457
|
+
import React from "react";
|
|
458
|
+
var FormContext = React.createContext(void 0);
|
|
141
459
|
function useFormContext() {
|
|
142
|
-
const context = useContext(FormContext);
|
|
460
|
+
const context = React.useContext(FormContext);
|
|
143
461
|
if (!context) {
|
|
144
|
-
throw new Error("useFormContext
|
|
462
|
+
throw new Error("useFormContext \u0434\u043E\u043B\u0436\u0435\u043D \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u044C\u0441\u044F \u0432\u043D\u0443\u0442\u0440\u0438 FormProvider");
|
|
145
463
|
}
|
|
146
464
|
return context;
|
|
147
465
|
}
|
|
148
466
|
|
|
149
|
-
// src/
|
|
150
|
-
import {
|
|
151
|
-
|
|
152
|
-
|
|
467
|
+
// src/ProviderMethod/layouts/FormProvider.tsx
|
|
468
|
+
import { useEffect } from "react";
|
|
469
|
+
import { jsx as jsx6 } from "react/jsx-runtime";
|
|
470
|
+
function FormProvider({
|
|
471
|
+
setFormApi,
|
|
472
|
+
children,
|
|
153
473
|
funSubmit,
|
|
154
|
-
|
|
155
|
-
buttonClass,
|
|
156
|
-
children
|
|
474
|
+
className
|
|
157
475
|
}) {
|
|
158
476
|
const {
|
|
159
477
|
control,
|
|
160
478
|
register,
|
|
161
479
|
handleSubmit,
|
|
162
480
|
formState: { errors }
|
|
163
|
-
} =
|
|
481
|
+
} = useForm2();
|
|
164
482
|
const onSubmit = (data) => {
|
|
165
483
|
funSubmit(data);
|
|
166
484
|
};
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
485
|
+
const values = useWatch({ control });
|
|
486
|
+
const contextValue = {
|
|
487
|
+
register,
|
|
488
|
+
errors,
|
|
489
|
+
control,
|
|
490
|
+
values
|
|
491
|
+
};
|
|
492
|
+
useEffect(() => {
|
|
493
|
+
setFormApi && setFormApi({ control, register, errors, values });
|
|
494
|
+
}, [setFormApi, control, register, errors, values]);
|
|
495
|
+
return /* @__PURE__ */ jsx6(FormContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx6("form", { onSubmit: handleSubmit(onSubmit), className, children }) });
|
|
496
|
+
}
|
|
497
|
+
|
|
498
|
+
// src/ProviderMethod/layouts/FormInputLayout.tsx
|
|
499
|
+
import React2 from "react";
|
|
500
|
+
import { jsx as jsx7 } from "react/jsx-runtime";
|
|
501
|
+
var FormInputLayoutContext = React2.createContext(void 0);
|
|
502
|
+
function useInputLayoutContext() {
|
|
503
|
+
const context = React2.useContext(FormInputLayoutContext);
|
|
504
|
+
if (!context) {
|
|
505
|
+
throw new Error(
|
|
506
|
+
"useInputLayoutContext \u0434\u043E\u043B\u0436\u0435\u043D \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u044C\u0441\u044F \u0432\u043D\u0443\u0442\u0440\u0438 FormInputLayout"
|
|
507
|
+
);
|
|
508
|
+
}
|
|
509
|
+
return context;
|
|
510
|
+
}
|
|
511
|
+
function useOptionalInputLayoutContext() {
|
|
512
|
+
return React2.useContext(FormInputLayoutContext);
|
|
513
|
+
}
|
|
514
|
+
function FormInputLayout({
|
|
515
|
+
name,
|
|
516
|
+
minLength,
|
|
517
|
+
maxLength,
|
|
518
|
+
pattern,
|
|
519
|
+
required,
|
|
520
|
+
validate,
|
|
521
|
+
children,
|
|
522
|
+
className,
|
|
523
|
+
maska
|
|
524
|
+
}) {
|
|
525
|
+
const contextValue = {
|
|
526
|
+
name,
|
|
527
|
+
minLength,
|
|
528
|
+
maxLength,
|
|
529
|
+
pattern,
|
|
530
|
+
required,
|
|
531
|
+
validate,
|
|
532
|
+
maska
|
|
533
|
+
};
|
|
534
|
+
return /* @__PURE__ */ jsx7(FormInputLayoutContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx7("div", { className, children }) });
|
|
535
|
+
}
|
|
536
|
+
var FormInputLayout_default = FormInputLayout;
|
|
537
|
+
|
|
538
|
+
// src/ProviderMethod/components/FormInput.tsx
|
|
539
|
+
import { jsx as jsx8 } from "react/jsx-runtime";
|
|
540
|
+
function FormInput({
|
|
541
|
+
placeholder,
|
|
542
|
+
className,
|
|
543
|
+
classNameError,
|
|
544
|
+
type
|
|
545
|
+
}) {
|
|
546
|
+
const { register, errors } = useFormContext();
|
|
547
|
+
const { name, required, minLength, maxLength, pattern, validate } = useInputLayoutContext();
|
|
548
|
+
const isErrorMessage = !!errors[name]?.message;
|
|
549
|
+
return /* @__PURE__ */ jsx8(
|
|
550
|
+
"input",
|
|
551
|
+
{
|
|
552
|
+
id: name,
|
|
553
|
+
...register(name, {
|
|
554
|
+
required,
|
|
555
|
+
minLength,
|
|
556
|
+
maxLength,
|
|
557
|
+
pattern,
|
|
558
|
+
validate
|
|
559
|
+
}),
|
|
560
|
+
type: type ? type : "text",
|
|
561
|
+
placeholder: placeholder ? placeholder : "",
|
|
562
|
+
className: `${className} ${isErrorMessage ? classNameError : ""}`
|
|
563
|
+
}
|
|
564
|
+
);
|
|
565
|
+
}
|
|
566
|
+
var FormInput_default = FormInput;
|
|
567
|
+
|
|
568
|
+
// src/ProviderMethod/components/FormPasswordInput.tsx
|
|
569
|
+
import { useState } from "react";
|
|
570
|
+
import { jsx as jsx9, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
571
|
+
var EyeIcon = ({ className }) => /* @__PURE__ */ jsxs3(
|
|
572
|
+
"svg",
|
|
573
|
+
{
|
|
574
|
+
width: "20",
|
|
575
|
+
height: "20",
|
|
576
|
+
viewBox: "0 0 24 24",
|
|
577
|
+
fill: "none",
|
|
578
|
+
stroke: "currentColor",
|
|
579
|
+
strokeWidth: "2",
|
|
580
|
+
strokeLinecap: "round",
|
|
581
|
+
strokeLinejoin: "round",
|
|
582
|
+
className,
|
|
583
|
+
children: [
|
|
584
|
+
/* @__PURE__ */ jsx9("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" }),
|
|
585
|
+
/* @__PURE__ */ jsx9("circle", { cx: "12", cy: "12", r: "3" })
|
|
586
|
+
]
|
|
587
|
+
}
|
|
588
|
+
);
|
|
589
|
+
var EyeOffIcon = ({ className }) => /* @__PURE__ */ jsxs3(
|
|
590
|
+
"svg",
|
|
591
|
+
{
|
|
592
|
+
width: "20",
|
|
593
|
+
height: "20",
|
|
594
|
+
viewBox: "0 0 24 24",
|
|
595
|
+
fill: "none",
|
|
596
|
+
stroke: "currentColor",
|
|
597
|
+
strokeWidth: "2",
|
|
598
|
+
strokeLinecap: "round",
|
|
599
|
+
strokeLinejoin: "round",
|
|
600
|
+
className,
|
|
601
|
+
children: [
|
|
602
|
+
/* @__PURE__ */ jsx9("path", { d: "M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" }),
|
|
603
|
+
/* @__PURE__ */ jsx9("line", { x1: "1", y1: "1", x2: "23", y2: "23" })
|
|
604
|
+
]
|
|
605
|
+
}
|
|
606
|
+
);
|
|
607
|
+
function FormPasswordInput({
|
|
608
|
+
placeholder,
|
|
609
|
+
className,
|
|
610
|
+
inputClassName,
|
|
611
|
+
classNameError,
|
|
612
|
+
visibleIcon = /* @__PURE__ */ jsx9(EyeIcon, {}),
|
|
613
|
+
hiddenIcon = /* @__PURE__ */ jsx9(EyeOffIcon, {}),
|
|
614
|
+
iconClassName,
|
|
615
|
+
iconWrapperClassName = "cursor-pointer"
|
|
616
|
+
}) {
|
|
617
|
+
const [isVisible, setIsVisible] = useState(false);
|
|
618
|
+
const { register, errors } = useFormContext();
|
|
619
|
+
const { name, required, minLength, maxLength, pattern, validate } = useInputLayoutContext();
|
|
620
|
+
const isErrorMessage = !!errors[name]?.message;
|
|
621
|
+
const toggleVisibility = () => {
|
|
622
|
+
setIsVisible(!isVisible);
|
|
623
|
+
};
|
|
624
|
+
return /* @__PURE__ */ jsxs3(
|
|
625
|
+
"div",
|
|
626
|
+
{
|
|
627
|
+
className,
|
|
628
|
+
style: { display: "flex", alignItems: "center", gap: "8px" },
|
|
629
|
+
children: [
|
|
630
|
+
/* @__PURE__ */ jsx9(
|
|
631
|
+
"input",
|
|
632
|
+
{
|
|
633
|
+
id: name,
|
|
634
|
+
...register(name, {
|
|
635
|
+
required,
|
|
636
|
+
minLength,
|
|
637
|
+
maxLength,
|
|
638
|
+
pattern,
|
|
639
|
+
validate
|
|
640
|
+
}),
|
|
641
|
+
type: isVisible ? "text" : "password",
|
|
642
|
+
placeholder: placeholder ? placeholder : "",
|
|
643
|
+
className: `${inputClassName} ${isErrorMessage ? classNameError : ""}`,
|
|
644
|
+
style: { flex: 1 }
|
|
645
|
+
}
|
|
646
|
+
),
|
|
647
|
+
/* @__PURE__ */ jsx9(
|
|
648
|
+
"div",
|
|
649
|
+
{
|
|
650
|
+
onClick: toggleVisibility,
|
|
651
|
+
className: `${iconClassName ? iconClassName : iconWrapperClassName}`,
|
|
652
|
+
style: {
|
|
653
|
+
cursor: "pointer",
|
|
654
|
+
userSelect: "none",
|
|
655
|
+
display: "flex",
|
|
656
|
+
alignItems: "center"
|
|
657
|
+
},
|
|
658
|
+
title: isVisible ? "\u0421\u043A\u0440\u044B\u0442\u044C \u043F\u0430\u0440\u043E\u043B\u044C" : "\u041F\u043E\u043A\u0430\u0437\u0430\u0442\u044C \u043F\u0430\u0440\u043E\u043B\u044C",
|
|
659
|
+
children: isVisible ? visibleIcon : hiddenIcon
|
|
660
|
+
}
|
|
661
|
+
)
|
|
662
|
+
]
|
|
663
|
+
}
|
|
664
|
+
);
|
|
665
|
+
}
|
|
666
|
+
var FormPasswordInput_default = FormPasswordInput;
|
|
667
|
+
|
|
668
|
+
// src/ProviderMethod/components/FormTextarea.tsx
|
|
669
|
+
import { jsx as jsx10 } from "react/jsx-runtime";
|
|
670
|
+
function FormTextarea({
|
|
671
|
+
placeholder,
|
|
672
|
+
className,
|
|
673
|
+
classNameError,
|
|
674
|
+
rows,
|
|
675
|
+
cols
|
|
676
|
+
}) {
|
|
677
|
+
const { register, errors } = useFormContext();
|
|
678
|
+
const { name, required, minLength, maxLength, pattern, validate } = useInputLayoutContext();
|
|
679
|
+
const isErrorMessage = !!errors[name]?.message;
|
|
680
|
+
return /* @__PURE__ */ jsx10(
|
|
681
|
+
"textarea",
|
|
682
|
+
{
|
|
683
|
+
id: name,
|
|
684
|
+
...register(name, {
|
|
685
|
+
required,
|
|
686
|
+
minLength,
|
|
687
|
+
maxLength,
|
|
688
|
+
pattern,
|
|
689
|
+
validate
|
|
690
|
+
}),
|
|
691
|
+
placeholder: placeholder ? placeholder : "",
|
|
692
|
+
className: `${className} ${isErrorMessage ? classNameError : ""}`,
|
|
693
|
+
rows,
|
|
694
|
+
cols
|
|
695
|
+
}
|
|
696
|
+
);
|
|
697
|
+
}
|
|
698
|
+
var FormTextarea_default = FormTextarea;
|
|
699
|
+
|
|
700
|
+
// src/ProviderMethod/components/FormMaskedInput.tsx
|
|
701
|
+
import { Controller as Controller3 } from "react-hook-form";
|
|
702
|
+
import { PatternFormat as PatternFormat3 } from "react-number-format";
|
|
703
|
+
import { jsx as jsx11 } from "react/jsx-runtime";
|
|
704
|
+
function FormMaskedInput({
|
|
705
|
+
placeholder,
|
|
706
|
+
className,
|
|
707
|
+
classNameError
|
|
708
|
+
}) {
|
|
709
|
+
const { control, errors } = useFormContext();
|
|
710
|
+
const { name, required, minLength, maxLength, pattern, validate, maska } = useInputLayoutContext();
|
|
711
|
+
const isErrorMessage = !!errors[name]?.message;
|
|
712
|
+
if (!maska) {
|
|
713
|
+
return null;
|
|
714
|
+
}
|
|
715
|
+
return /* @__PURE__ */ jsx11(
|
|
716
|
+
Controller3,
|
|
717
|
+
{
|
|
718
|
+
name: name || "",
|
|
719
|
+
control,
|
|
720
|
+
rules: {
|
|
721
|
+
required: maska.required ?? required,
|
|
722
|
+
minLength,
|
|
723
|
+
maxLength,
|
|
724
|
+
pattern,
|
|
725
|
+
validate
|
|
189
726
|
},
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
727
|
+
render: ({ field }) => /* @__PURE__ */ jsx11(
|
|
728
|
+
PatternFormat3,
|
|
729
|
+
{
|
|
730
|
+
...field,
|
|
731
|
+
format: maska.format,
|
|
732
|
+
mask: maska.mask,
|
|
733
|
+
placeholder: placeholder ? placeholder : "",
|
|
734
|
+
className: `${className} ${isErrorMessage ? classNameError : ""}`
|
|
735
|
+
}
|
|
736
|
+
)
|
|
737
|
+
}
|
|
738
|
+
);
|
|
739
|
+
}
|
|
740
|
+
var FormMaskedInput_default = FormMaskedInput;
|
|
741
|
+
|
|
742
|
+
// src/ProviderMethod/components/FormSelect.tsx
|
|
743
|
+
import { jsx as jsx12, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
744
|
+
function FormSelect({
|
|
745
|
+
options,
|
|
746
|
+
className,
|
|
747
|
+
classNameError,
|
|
748
|
+
multiple,
|
|
749
|
+
placeholder
|
|
750
|
+
}) {
|
|
751
|
+
const { register, errors } = useFormContext();
|
|
752
|
+
const { name, required, validate } = useInputLayoutContext();
|
|
753
|
+
const isErrorMessage = !!errors[name]?.message;
|
|
754
|
+
return /* @__PURE__ */ jsxs4(
|
|
755
|
+
"select",
|
|
756
|
+
{
|
|
757
|
+
id: name,
|
|
758
|
+
...register(name, {
|
|
759
|
+
required,
|
|
760
|
+
validate
|
|
761
|
+
}),
|
|
762
|
+
className: `${className} ${isErrorMessage ? classNameError : ""}`,
|
|
763
|
+
multiple,
|
|
764
|
+
children: [
|
|
765
|
+
placeholder && /* @__PURE__ */ jsx12("option", { value: "", children: placeholder }),
|
|
766
|
+
options.map((option) => /* @__PURE__ */ jsx12("option", { value: option.value, children: option.label }, option.value))
|
|
767
|
+
]
|
|
768
|
+
}
|
|
769
|
+
);
|
|
770
|
+
}
|
|
771
|
+
var FormSelect_default = FormSelect;
|
|
772
|
+
|
|
773
|
+
// src/ProviderMethod/components/FormNumber.tsx
|
|
774
|
+
import { jsx as jsx13 } from "react/jsx-runtime";
|
|
775
|
+
function FormNumber({
|
|
776
|
+
placeholder,
|
|
777
|
+
className,
|
|
778
|
+
classNameError,
|
|
779
|
+
min,
|
|
780
|
+
max,
|
|
781
|
+
step
|
|
782
|
+
}) {
|
|
783
|
+
const { register, errors } = useFormContext();
|
|
784
|
+
const { name, required, validate } = useInputLayoutContext();
|
|
785
|
+
const isErrorMessage = !!errors[name]?.message;
|
|
786
|
+
return /* @__PURE__ */ jsx13(
|
|
787
|
+
"input",
|
|
788
|
+
{
|
|
789
|
+
id: name,
|
|
790
|
+
type: "number",
|
|
791
|
+
...register(name, {
|
|
792
|
+
required,
|
|
793
|
+
validate,
|
|
794
|
+
valueAsNumber: true
|
|
795
|
+
}),
|
|
796
|
+
placeholder: placeholder ? placeholder : "",
|
|
797
|
+
className: `${className} ${isErrorMessage ? classNameError : ""}`,
|
|
798
|
+
min,
|
|
799
|
+
max,
|
|
800
|
+
step
|
|
801
|
+
}
|
|
802
|
+
);
|
|
803
|
+
}
|
|
804
|
+
var FormNumber_default = FormNumber;
|
|
805
|
+
|
|
806
|
+
// src/ProviderMethod/components/FormDate.tsx
|
|
807
|
+
import { jsx as jsx14 } from "react/jsx-runtime";
|
|
808
|
+
function FormDate({
|
|
809
|
+
placeholder,
|
|
810
|
+
className,
|
|
811
|
+
classNameError,
|
|
812
|
+
min,
|
|
813
|
+
max,
|
|
814
|
+
type = "date"
|
|
815
|
+
}) {
|
|
816
|
+
const { register, errors } = useFormContext();
|
|
817
|
+
const { name, required, validate } = useInputLayoutContext();
|
|
818
|
+
const isErrorMessage = !!errors[name]?.message;
|
|
819
|
+
return /* @__PURE__ */ jsx14(
|
|
820
|
+
"input",
|
|
821
|
+
{
|
|
822
|
+
id: name,
|
|
823
|
+
type,
|
|
824
|
+
...register(name, {
|
|
825
|
+
required,
|
|
826
|
+
validate
|
|
827
|
+
}),
|
|
828
|
+
placeholder: placeholder ? placeholder : "",
|
|
829
|
+
className: `${className} ${isErrorMessage ? classNameError : ""}`,
|
|
830
|
+
min,
|
|
831
|
+
max
|
|
832
|
+
}
|
|
833
|
+
);
|
|
834
|
+
}
|
|
835
|
+
var FormDate_default = FormDate;
|
|
836
|
+
|
|
837
|
+
// src/ProviderMethod/components/FormRange.tsx
|
|
838
|
+
import { useState as useState2 } from "react";
|
|
839
|
+
import { jsx as jsx15, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
840
|
+
function FormRange({
|
|
841
|
+
className,
|
|
842
|
+
classNameError,
|
|
843
|
+
min = 0,
|
|
844
|
+
max = 100,
|
|
845
|
+
step = 1,
|
|
846
|
+
range = "single",
|
|
847
|
+
showValue,
|
|
848
|
+
containerClassName
|
|
849
|
+
}) {
|
|
850
|
+
const { register, control, errors } = useFormContext();
|
|
851
|
+
const { name, required, validate } = useInputLayoutContext();
|
|
852
|
+
const [value, setValue] = useState2(min);
|
|
853
|
+
const [maxValue, setMaxValue] = useState2(max);
|
|
854
|
+
const isErrorMessage = !!errors[name]?.message;
|
|
855
|
+
return /* @__PURE__ */ jsx15("div", { className: containerClassName, children: /* @__PURE__ */ jsxs5(
|
|
856
|
+
"div",
|
|
857
|
+
{
|
|
858
|
+
style: {
|
|
859
|
+
display: "flex",
|
|
860
|
+
gap: "16px",
|
|
861
|
+
alignItems: "flex-start",
|
|
862
|
+
flexWrap: "wrap"
|
|
863
|
+
},
|
|
864
|
+
children: [
|
|
865
|
+
range === "single" && /* @__PURE__ */ jsxs5("div", { style: { flex: 1, minWidth: "200px" }, children: [
|
|
866
|
+
/* @__PURE__ */ jsx15(
|
|
867
|
+
"input",
|
|
868
|
+
{
|
|
869
|
+
id: name,
|
|
870
|
+
type: "range",
|
|
871
|
+
...register(name, {
|
|
872
|
+
required,
|
|
873
|
+
validate
|
|
874
|
+
}),
|
|
875
|
+
className: `${className} w-full ${isErrorMessage ? classNameError : ""}`,
|
|
876
|
+
min,
|
|
877
|
+
max,
|
|
878
|
+
step,
|
|
879
|
+
onChange: (e) => setValue(Number(e.target.value)),
|
|
880
|
+
style: { cursor: "pointer" }
|
|
881
|
+
}
|
|
882
|
+
),
|
|
883
|
+
showValue && /* @__PURE__ */ jsx15("div", { style: { marginTop: "8px", fontSize: "14px" }, children: value })
|
|
884
|
+
] }),
|
|
885
|
+
range === "double" && /* @__PURE__ */ jsx15("div", { style: { flex: 1, minWidth: "200px" }, children: /* @__PURE__ */ jsxs5(
|
|
886
|
+
"div",
|
|
887
|
+
{
|
|
888
|
+
style: {
|
|
889
|
+
display: "flex",
|
|
890
|
+
flexDirection: "column",
|
|
891
|
+
gap: "12px"
|
|
892
|
+
},
|
|
893
|
+
children: [
|
|
894
|
+
/* @__PURE__ */ jsxs5("div", { children: [
|
|
895
|
+
/* @__PURE__ */ jsx15("label", { style: { fontSize: "12px", marginRight: "8px" }, children: "\u041E\u0442:" }),
|
|
896
|
+
/* @__PURE__ */ jsx15(
|
|
897
|
+
"input",
|
|
898
|
+
{
|
|
899
|
+
type: "range",
|
|
900
|
+
...register(`${name}_min`, {
|
|
901
|
+
required,
|
|
902
|
+
validate
|
|
903
|
+
}),
|
|
904
|
+
className: `${className} w-full ${isErrorMessage ? classNameError : ""}`,
|
|
905
|
+
min,
|
|
906
|
+
max: maxValue,
|
|
907
|
+
step,
|
|
908
|
+
onChange: (e) => setValue(Number(e.target.value)),
|
|
909
|
+
style: { cursor: "pointer" }
|
|
910
|
+
}
|
|
911
|
+
),
|
|
912
|
+
showValue && /* @__PURE__ */ jsx15("div", { style: { marginTop: "4px", fontSize: "12px" }, children: value })
|
|
913
|
+
] }),
|
|
914
|
+
/* @__PURE__ */ jsxs5("div", { children: [
|
|
915
|
+
/* @__PURE__ */ jsx15("label", { style: { fontSize: "12px", marginRight: "8px" }, children: "\u0414\u043E:" }),
|
|
916
|
+
/* @__PURE__ */ jsx15(
|
|
917
|
+
"input",
|
|
918
|
+
{
|
|
919
|
+
type: "range",
|
|
920
|
+
...register(`${name}_max`, {
|
|
921
|
+
required,
|
|
922
|
+
validate
|
|
923
|
+
}),
|
|
924
|
+
className: `${className} w-full ${isErrorMessage ? classNameError : ""}`,
|
|
925
|
+
min: value,
|
|
926
|
+
max,
|
|
927
|
+
step,
|
|
928
|
+
onChange: (e) => setMaxValue(Number(e.target.value)),
|
|
929
|
+
style: { cursor: "pointer" }
|
|
930
|
+
}
|
|
931
|
+
),
|
|
932
|
+
showValue && /* @__PURE__ */ jsx15("div", { style: { marginTop: "4px", fontSize: "12px" }, children: maxValue })
|
|
933
|
+
] }),
|
|
934
|
+
showValue && /* @__PURE__ */ jsxs5("div", { style: { fontSize: "14px", fontWeight: "bold" }, children: [
|
|
935
|
+
"\u0414\u0438\u0430\u043F\u0430\u0437\u043E\u043D: ",
|
|
936
|
+
value,
|
|
937
|
+
" - ",
|
|
938
|
+
maxValue
|
|
939
|
+
] })
|
|
940
|
+
]
|
|
941
|
+
}
|
|
942
|
+
) })
|
|
943
|
+
]
|
|
944
|
+
}
|
|
945
|
+
) });
|
|
946
|
+
}
|
|
947
|
+
var FormRange_default = FormRange;
|
|
948
|
+
|
|
949
|
+
// src/ProviderMethod/components/FormFileInput.tsx
|
|
950
|
+
import { jsx as jsx16 } from "react/jsx-runtime";
|
|
951
|
+
function FormFileInput({
|
|
952
|
+
className,
|
|
953
|
+
classNameError,
|
|
954
|
+
accept,
|
|
955
|
+
multiple
|
|
956
|
+
}) {
|
|
957
|
+
const { register, errors } = useFormContext();
|
|
958
|
+
const { name, required, validate } = useInputLayoutContext();
|
|
959
|
+
const isErrorMessage = !!errors[name]?.message;
|
|
960
|
+
return /* @__PURE__ */ jsx16(
|
|
961
|
+
"input",
|
|
962
|
+
{
|
|
963
|
+
id: name,
|
|
964
|
+
type: "file",
|
|
965
|
+
...register(name, {
|
|
966
|
+
required,
|
|
967
|
+
validate
|
|
968
|
+
}),
|
|
969
|
+
className: `${className} ${isErrorMessage ? classNameError : ""}`,
|
|
970
|
+
accept,
|
|
971
|
+
multiple
|
|
972
|
+
}
|
|
973
|
+
);
|
|
974
|
+
}
|
|
975
|
+
var FormFileInput_default = FormFileInput;
|
|
976
|
+
|
|
977
|
+
// src/ProviderMethod/components/FormCheckbox.tsx
|
|
978
|
+
import { jsx as jsx17 } from "react/jsx-runtime";
|
|
979
|
+
function FormCheckbox({
|
|
980
|
+
className,
|
|
981
|
+
classNameError,
|
|
982
|
+
value,
|
|
983
|
+
defaultChecked,
|
|
984
|
+
disabled
|
|
985
|
+
}) {
|
|
986
|
+
const { register, errors } = useFormContext();
|
|
987
|
+
const { name, required, validate } = useInputLayoutContext();
|
|
988
|
+
const isErrorMessage = !!errors[name]?.message;
|
|
989
|
+
return /* @__PURE__ */ jsx17(
|
|
990
|
+
"input",
|
|
991
|
+
{
|
|
992
|
+
id: name,
|
|
993
|
+
type: "checkbox",
|
|
994
|
+
...register(name, {
|
|
995
|
+
required,
|
|
996
|
+
validate
|
|
997
|
+
}),
|
|
998
|
+
className: `${className} ${isErrorMessage ? classNameError : ""}`,
|
|
999
|
+
value,
|
|
1000
|
+
defaultChecked,
|
|
1001
|
+
disabled
|
|
1002
|
+
}
|
|
1003
|
+
);
|
|
1004
|
+
}
|
|
1005
|
+
var FormCheckbox_default = FormCheckbox;
|
|
1006
|
+
|
|
1007
|
+
// src/ProviderMethod/components/FormRadio.tsx
|
|
1008
|
+
import { jsx as jsx18 } from "react/jsx-runtime";
|
|
1009
|
+
function FormRadio({
|
|
1010
|
+
className,
|
|
1011
|
+
classNameError,
|
|
1012
|
+
value,
|
|
1013
|
+
defaultChecked,
|
|
1014
|
+
disabled
|
|
1015
|
+
}) {
|
|
1016
|
+
const { register, errors } = useFormContext();
|
|
1017
|
+
const { name, required, validate } = useInputLayoutContext();
|
|
1018
|
+
const isErrorMessage = !!errors[name]?.message;
|
|
1019
|
+
return /* @__PURE__ */ jsx18(
|
|
1020
|
+
"input",
|
|
1021
|
+
{
|
|
1022
|
+
id: `${name}-${value}`,
|
|
1023
|
+
type: "radio",
|
|
1024
|
+
...register(name, {
|
|
1025
|
+
required,
|
|
1026
|
+
validate
|
|
1027
|
+
}),
|
|
1028
|
+
className: `${className} ${isErrorMessage ? classNameError : ""}`,
|
|
1029
|
+
value,
|
|
1030
|
+
defaultChecked,
|
|
1031
|
+
disabled
|
|
1032
|
+
}
|
|
1033
|
+
);
|
|
1034
|
+
}
|
|
1035
|
+
var FormRadio_default = FormRadio;
|
|
1036
|
+
|
|
1037
|
+
// src/ProviderMethod/components/FormButton.tsx
|
|
1038
|
+
import { jsx as jsx19 } from "react/jsx-runtime";
|
|
1039
|
+
function FormButton({
|
|
1040
|
+
children,
|
|
1041
|
+
className,
|
|
1042
|
+
disabledError,
|
|
1043
|
+
...props
|
|
1044
|
+
}) {
|
|
1045
|
+
const { errors } = useFormContext();
|
|
1046
|
+
const errorMessage = errors && Object.keys(errors).length > 0;
|
|
1047
|
+
return /* @__PURE__ */ jsx19(
|
|
1048
|
+
"button",
|
|
1049
|
+
{
|
|
1050
|
+
type: "submit",
|
|
1051
|
+
className: `${className}`,
|
|
1052
|
+
...props,
|
|
1053
|
+
disabled: errorMessage && disabledError,
|
|
1054
|
+
children
|
|
1055
|
+
}
|
|
1056
|
+
);
|
|
1057
|
+
}
|
|
1058
|
+
var FormButton_default = FormButton;
|
|
1059
|
+
|
|
1060
|
+
// src/ProviderMethod/components/FormError.tsx
|
|
1061
|
+
import { jsx as jsx20 } from "react/jsx-runtime";
|
|
1062
|
+
function FormError({ ...props }) {
|
|
1063
|
+
const { errors } = useFormContext();
|
|
1064
|
+
const { name } = useInputLayoutContext();
|
|
1065
|
+
const layout = useOptionalInputLayoutContext();
|
|
1066
|
+
const resolvedName = name ?? layout?.name;
|
|
1067
|
+
if (!resolvedName) {
|
|
1068
|
+
return null;
|
|
1069
|
+
}
|
|
1070
|
+
const errorMessage = errors[resolvedName]?.message;
|
|
1071
|
+
return /* @__PURE__ */ jsx20("span", { ...props, children: typeof errorMessage === "string" ? errorMessage : null });
|
|
1072
|
+
}
|
|
1073
|
+
var FormError_default = FormError;
|
|
1074
|
+
|
|
1075
|
+
// src/ProviderMethod/components/FormLabel.tsx
|
|
1076
|
+
import { jsxs as jsxs6 } from "react/jsx-runtime";
|
|
1077
|
+
function FormLabel({
|
|
1078
|
+
children,
|
|
1079
|
+
className,
|
|
1080
|
+
classNameError
|
|
1081
|
+
}) {
|
|
1082
|
+
const { required } = useInputLayoutContext();
|
|
1083
|
+
const { errors } = useFormContext();
|
|
1084
|
+
const { name } = useInputLayoutContext();
|
|
1085
|
+
const isErrorMessage = !!errors[name]?.message;
|
|
1086
|
+
return /* @__PURE__ */ jsxs6("label", { className: `${className} ${isErrorMessage ? classNameError : ""}`, children: [
|
|
1087
|
+
children,
|
|
1088
|
+
!!required && "*"
|
|
1089
|
+
] });
|
|
194
1090
|
}
|
|
1091
|
+
var FormLabel_default = FormLabel;
|
|
195
1092
|
export {
|
|
1093
|
+
FormButton_default as FormButton,
|
|
1094
|
+
FormCheckbox_default as FormCheckbox,
|
|
1095
|
+
FormDate_default as FormDate,
|
|
1096
|
+
FormError_default as FormError,
|
|
1097
|
+
FormFileInput_default as FormFileInput,
|
|
1098
|
+
FormInput_default as FormInput,
|
|
1099
|
+
FormInputLayout_default as FormInputLayout,
|
|
1100
|
+
FormLabel_default as FormLabel,
|
|
196
1101
|
FormLayout,
|
|
1102
|
+
FormMaskedInput_default as FormMaskedInput,
|
|
1103
|
+
FormNumber_default as FormNumber,
|
|
1104
|
+
FormPasswordInput_default as FormPasswordInput,
|
|
1105
|
+
FormProvider,
|
|
1106
|
+
FormRadio_default as FormRadio,
|
|
1107
|
+
FormRange_default as FormRange,
|
|
1108
|
+
FormSelect_default as FormSelect,
|
|
1109
|
+
FormTextarea_default as FormTextarea,
|
|
197
1110
|
InputForm_default as InputForm,
|
|
198
1111
|
useFormContext
|
|
199
1112
|
};
|