@bookinglab/booking-ui-react 1.12.0 → 1.13.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/dist/index.d.cts +3 -1
- package/dist/index.d.ts +3 -1
- package/dist/index.js +233 -188
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +152 -111
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -1,18 +1,138 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var React = require('react');
|
|
4
4
|
var jsxRuntime = require('react/jsx-runtime');
|
|
5
5
|
|
|
6
|
+
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
7
|
+
|
|
8
|
+
var React__default = /*#__PURE__*/_interopDefault(React);
|
|
9
|
+
|
|
6
10
|
var __defProp = Object.defineProperty;
|
|
7
11
|
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
8
12
|
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
9
13
|
var cx = (...classes) => classes.filter(Boolean).join(" ");
|
|
14
|
+
function DateInputGroup({
|
|
15
|
+
question,
|
|
16
|
+
value,
|
|
17
|
+
onChange,
|
|
18
|
+
inputId,
|
|
19
|
+
hasError,
|
|
20
|
+
errorId,
|
|
21
|
+
fieldsetCls,
|
|
22
|
+
legendCls,
|
|
23
|
+
groupCls,
|
|
24
|
+
itemCls,
|
|
25
|
+
sublabelCls,
|
|
26
|
+
dateInputCls,
|
|
27
|
+
helpTextAbove,
|
|
28
|
+
helpTextBelow,
|
|
29
|
+
renderError
|
|
30
|
+
}) {
|
|
31
|
+
const parseValue = (raw) => {
|
|
32
|
+
const m = raw.match(/^(\d{4})-(\d{2})-(\d{2})$/);
|
|
33
|
+
if (!m) return { day: "", month: "", year: "" };
|
|
34
|
+
return { year: m[1], month: String(Number(m[2])), day: String(Number(m[3])) };
|
|
35
|
+
};
|
|
36
|
+
const [parts, setParts] = React.useState(() => parseValue(value));
|
|
37
|
+
const lastEmittedRef = React__default.default.useRef(value);
|
|
38
|
+
React.useEffect(() => {
|
|
39
|
+
if (value !== lastEmittedRef.current) {
|
|
40
|
+
setParts(parseValue(value));
|
|
41
|
+
lastEmittedRef.current = value;
|
|
42
|
+
}
|
|
43
|
+
}, [value]);
|
|
44
|
+
const buildValue = (d, m, y) => {
|
|
45
|
+
if (!/^\d{1,2}$/.test(d) || !/^\d{1,2}$/.test(m) || !/^\d{4}$/.test(y)) return "";
|
|
46
|
+
const dn = Number(d), mn = Number(m), yn = Number(y);
|
|
47
|
+
const date = new Date(yn, mn - 1, dn);
|
|
48
|
+
if (date.getFullYear() !== yn || date.getMonth() !== mn - 1 || date.getDate() !== dn) return "";
|
|
49
|
+
return `${String(yn).padStart(4, "0")}-${String(mn).padStart(2, "0")}-${String(dn).padStart(2, "0")}`;
|
|
50
|
+
};
|
|
51
|
+
const handleSubChange = (part, v) => {
|
|
52
|
+
const sanitized = v.replace(/[^\d]/g, "");
|
|
53
|
+
const max = part === "year" ? 4 : 2;
|
|
54
|
+
const next = { ...parts, [part]: sanitized.slice(0, max) };
|
|
55
|
+
setParts(next);
|
|
56
|
+
const combined = buildValue(next.day, next.month, next.year);
|
|
57
|
+
lastEmittedRef.current = combined;
|
|
58
|
+
onChange(combined);
|
|
59
|
+
};
|
|
60
|
+
const dayId = `${inputId}-day`;
|
|
61
|
+
const monthId = `${inputId}-month`;
|
|
62
|
+
const yearId = `${inputId}-year`;
|
|
63
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("fieldset", { className: fieldsetCls, "aria-describedby": hasError ? errorId : void 0, children: [
|
|
64
|
+
/* @__PURE__ */ jsxRuntime.jsxs("legend", { className: legendCls, children: [
|
|
65
|
+
question.name,
|
|
66
|
+
question.required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-red-500 ml-1", "aria-hidden": "true", children: "*" })
|
|
67
|
+
] }),
|
|
68
|
+
helpTextAbove,
|
|
69
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: groupCls, role: "group", children: [
|
|
70
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: itemCls, children: [
|
|
71
|
+
/* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: dayId, className: sublabelCls, children: "Day" }),
|
|
72
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
73
|
+
"input",
|
|
74
|
+
{
|
|
75
|
+
id: dayId,
|
|
76
|
+
type: "text",
|
|
77
|
+
inputMode: "numeric",
|
|
78
|
+
pattern: "[0-9]*",
|
|
79
|
+
maxLength: 2,
|
|
80
|
+
value: parts.day,
|
|
81
|
+
onChange: (e) => handleSubChange("day", e.target.value),
|
|
82
|
+
className: cx(dateInputCls, "w-16"),
|
|
83
|
+
"aria-invalid": hasError ? true : void 0,
|
|
84
|
+
"aria-required": question.required || void 0
|
|
85
|
+
}
|
|
86
|
+
)
|
|
87
|
+
] }),
|
|
88
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: itemCls, children: [
|
|
89
|
+
/* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: monthId, className: sublabelCls, children: "Month" }),
|
|
90
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
91
|
+
"input",
|
|
92
|
+
{
|
|
93
|
+
id: monthId,
|
|
94
|
+
type: "text",
|
|
95
|
+
inputMode: "numeric",
|
|
96
|
+
pattern: "[0-9]*",
|
|
97
|
+
maxLength: 2,
|
|
98
|
+
value: parts.month,
|
|
99
|
+
onChange: (e) => handleSubChange("month", e.target.value),
|
|
100
|
+
className: cx(dateInputCls, "w-16"),
|
|
101
|
+
"aria-invalid": hasError ? true : void 0,
|
|
102
|
+
"aria-required": question.required || void 0
|
|
103
|
+
}
|
|
104
|
+
)
|
|
105
|
+
] }),
|
|
106
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: itemCls, children: [
|
|
107
|
+
/* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: yearId, className: sublabelCls, children: "Year" }),
|
|
108
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
109
|
+
"input",
|
|
110
|
+
{
|
|
111
|
+
id: yearId,
|
|
112
|
+
type: "text",
|
|
113
|
+
inputMode: "numeric",
|
|
114
|
+
pattern: "[0-9]*",
|
|
115
|
+
maxLength: 4,
|
|
116
|
+
value: parts.year,
|
|
117
|
+
onChange: (e) => handleSubChange("year", e.target.value),
|
|
118
|
+
className: cx(dateInputCls, "w-24"),
|
|
119
|
+
"aria-invalid": hasError ? true : void 0,
|
|
120
|
+
"aria-required": question.required || void 0
|
|
121
|
+
}
|
|
122
|
+
)
|
|
123
|
+
] })
|
|
124
|
+
] }),
|
|
125
|
+
helpTextBelow,
|
|
126
|
+
renderError()
|
|
127
|
+
] });
|
|
128
|
+
}
|
|
10
129
|
function FormField({
|
|
11
130
|
question,
|
|
12
131
|
value,
|
|
13
132
|
error,
|
|
14
133
|
onChange,
|
|
15
|
-
classNames
|
|
134
|
+
classNames,
|
|
135
|
+
displayHelpTextBelowLabel = false
|
|
16
136
|
}) {
|
|
17
137
|
const inputId = `question-${question.id}`;
|
|
18
138
|
const errorId = `${inputId}-error`;
|
|
@@ -45,6 +165,8 @@ function FormField({
|
|
|
45
165
|
}
|
|
46
166
|
);
|
|
47
167
|
};
|
|
168
|
+
const helpTextAbove = displayHelpTextBelowLabel ? renderHelpText() : null;
|
|
169
|
+
const helpTextBelow = displayHelpTextBelowLabel ? null : renderHelpText();
|
|
48
170
|
const renderError = () => {
|
|
49
171
|
if (!error) return null;
|
|
50
172
|
return /* @__PURE__ */ jsxRuntime.jsx("p", { id: errorId, className: classNames?.errorText ?? defaultErrorText, role: "alert", children: error });
|
|
@@ -63,6 +185,7 @@ function FormField({
|
|
|
63
185
|
case "text_field":
|
|
64
186
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classNames?.fieldWrapper ?? defaultFieldWrapper, children: [
|
|
65
187
|
renderLabel(),
|
|
188
|
+
helpTextAbove,
|
|
66
189
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
67
190
|
"input",
|
|
68
191
|
{
|
|
@@ -75,12 +198,13 @@ function FormField({
|
|
|
75
198
|
...ariaProps
|
|
76
199
|
}
|
|
77
200
|
),
|
|
78
|
-
|
|
201
|
+
helpTextBelow,
|
|
79
202
|
renderError()
|
|
80
203
|
] });
|
|
81
204
|
case "text_area":
|
|
82
205
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classNames?.fieldWrapper ?? defaultFieldWrapper, children: [
|
|
83
206
|
renderLabel(),
|
|
207
|
+
helpTextAbove,
|
|
84
208
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
85
209
|
"textarea",
|
|
86
210
|
{
|
|
@@ -93,12 +217,13 @@ function FormField({
|
|
|
93
217
|
...ariaProps
|
|
94
218
|
}
|
|
95
219
|
),
|
|
96
|
-
|
|
220
|
+
helpTextBelow,
|
|
97
221
|
renderError()
|
|
98
222
|
] });
|
|
99
223
|
case "select":
|
|
100
224
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classNames?.fieldWrapper ?? defaultFieldWrapper, children: [
|
|
101
225
|
renderLabel(),
|
|
226
|
+
helpTextAbove,
|
|
102
227
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
103
228
|
"select",
|
|
104
229
|
{
|
|
@@ -113,12 +238,13 @@ function FormField({
|
|
|
113
238
|
]
|
|
114
239
|
}
|
|
115
240
|
),
|
|
116
|
-
|
|
241
|
+
helpTextBelow,
|
|
117
242
|
renderError()
|
|
118
243
|
] });
|
|
119
244
|
case "radio":
|
|
120
245
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classNames?.fieldWrapper ?? defaultFieldWrapper, children: [
|
|
121
246
|
renderLabel(),
|
|
247
|
+
helpTextAbove,
|
|
122
248
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
123
249
|
"div",
|
|
124
250
|
{
|
|
@@ -146,34 +272,10 @@ function FormField({
|
|
|
146
272
|
})
|
|
147
273
|
}
|
|
148
274
|
),
|
|
149
|
-
|
|
275
|
+
helpTextBelow,
|
|
150
276
|
renderError()
|
|
151
277
|
] });
|
|
152
278
|
case "date": {
|
|
153
|
-
const raw = typeof value === "string" ? value : "";
|
|
154
|
-
const match2 = raw.match(/^(\d{0,4})-?(\d{0,2})-?(\d{0,2})$/);
|
|
155
|
-
const yearPart = match2?.[1] ?? "";
|
|
156
|
-
const monthPart = match2?.[2] ? String(Number(match2[2])) : "";
|
|
157
|
-
const dayPart = match2?.[3] ? String(Number(match2[3])) : "";
|
|
158
|
-
const dayId = `${inputId}-day`;
|
|
159
|
-
const monthId = `${inputId}-month`;
|
|
160
|
-
const yearId = `${inputId}-year`;
|
|
161
|
-
const buildValue = (d, m, y) => {
|
|
162
|
-
const dt = d.trim();
|
|
163
|
-
const mt = m.trim();
|
|
164
|
-
const yt = y.trim();
|
|
165
|
-
if (!dt && !mt && !yt) return "";
|
|
166
|
-
if (/^\d{1,2}$/.test(dt) && /^\d{1,2}$/.test(mt) && /^\d{4}$/.test(yt)) {
|
|
167
|
-
const dn = Number(dt);
|
|
168
|
-
const mn = Number(mt);
|
|
169
|
-
const yn = Number(yt);
|
|
170
|
-
const date = new Date(yn, mn - 1, dn);
|
|
171
|
-
if (date.getFullYear() === yn && date.getMonth() === mn - 1 && date.getDate() === dn) {
|
|
172
|
-
return `${String(yn).padStart(4, "0")}-${String(mn).padStart(2, "0")}-${String(dn).padStart(2, "0")}`;
|
|
173
|
-
}
|
|
174
|
-
}
|
|
175
|
-
return "";
|
|
176
|
-
};
|
|
177
279
|
const dateInputBase = classNames?.dateInput ?? classNames?.input ?? defaultInput;
|
|
178
280
|
const dateInputCls = hasError ? cx(dateInputBase, classNames?.inputError ?? defaultInputError) : dateInputBase;
|
|
179
281
|
const sublabelCls = classNames?.dateInputLabel ?? "block text-xs font-medium mb-1 text-gray-700";
|
|
@@ -181,91 +283,31 @@ function FormField({
|
|
|
181
283
|
const groupCls = classNames?.dateInputGroup ?? "flex flex-row gap-3 items-end";
|
|
182
284
|
const legendCls = classNames?.dateLegend ?? labelClasses;
|
|
183
285
|
const fieldsetCls = classNames?.dateFieldset ?? (classNames?.fieldWrapper ?? defaultFieldWrapper);
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
const next = {
|
|
187
|
-
day: part === "day" ? sanitized : dayPart,
|
|
188
|
-
month: part === "month" ? sanitized : monthPart,
|
|
189
|
-
year: part === "year" ? sanitized : yearPart
|
|
190
|
-
};
|
|
191
|
-
const combined = buildValue(next.day, next.month, next.year);
|
|
192
|
-
onChange(combined);
|
|
193
|
-
};
|
|
194
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
195
|
-
"fieldset",
|
|
286
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
287
|
+
DateInputGroup,
|
|
196
288
|
{
|
|
197
|
-
|
|
198
|
-
"
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
inputMode: "numeric",
|
|
213
|
-
pattern: "[0-9]*",
|
|
214
|
-
maxLength: 2,
|
|
215
|
-
value: dayPart,
|
|
216
|
-
onChange: (e) => handleSubChange("day", e.target.value),
|
|
217
|
-
className: cx(dateInputCls, "w-16"),
|
|
218
|
-
"aria-invalid": hasError ? true : void 0,
|
|
219
|
-
"aria-required": question.required || void 0
|
|
220
|
-
}
|
|
221
|
-
)
|
|
222
|
-
] }),
|
|
223
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: itemCls, children: [
|
|
224
|
-
/* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: monthId, className: sublabelCls, children: "Month" }),
|
|
225
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
226
|
-
"input",
|
|
227
|
-
{
|
|
228
|
-
id: monthId,
|
|
229
|
-
type: "text",
|
|
230
|
-
inputMode: "numeric",
|
|
231
|
-
pattern: "[0-9]*",
|
|
232
|
-
maxLength: 2,
|
|
233
|
-
value: monthPart,
|
|
234
|
-
onChange: (e) => handleSubChange("month", e.target.value),
|
|
235
|
-
className: cx(dateInputCls, "w-16"),
|
|
236
|
-
"aria-invalid": hasError ? true : void 0,
|
|
237
|
-
"aria-required": question.required || void 0
|
|
238
|
-
}
|
|
239
|
-
)
|
|
240
|
-
] }),
|
|
241
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: itemCls, children: [
|
|
242
|
-
/* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: yearId, className: sublabelCls, children: "Year" }),
|
|
243
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
244
|
-
"input",
|
|
245
|
-
{
|
|
246
|
-
id: yearId,
|
|
247
|
-
type: "text",
|
|
248
|
-
inputMode: "numeric",
|
|
249
|
-
pattern: "[0-9]*",
|
|
250
|
-
maxLength: 4,
|
|
251
|
-
value: yearPart,
|
|
252
|
-
onChange: (e) => handleSubChange("year", e.target.value),
|
|
253
|
-
className: cx(dateInputCls, "w-24"),
|
|
254
|
-
"aria-invalid": hasError ? true : void 0,
|
|
255
|
-
"aria-required": question.required || void 0
|
|
256
|
-
}
|
|
257
|
-
)
|
|
258
|
-
] })
|
|
259
|
-
] }),
|
|
260
|
-
renderHelpText(),
|
|
261
|
-
renderError()
|
|
262
|
-
]
|
|
289
|
+
question,
|
|
290
|
+
value: typeof value === "string" ? value : "",
|
|
291
|
+
onChange,
|
|
292
|
+
inputId,
|
|
293
|
+
hasError,
|
|
294
|
+
errorId,
|
|
295
|
+
fieldsetCls,
|
|
296
|
+
legendCls,
|
|
297
|
+
groupCls,
|
|
298
|
+
itemCls,
|
|
299
|
+
sublabelCls,
|
|
300
|
+
dateInputCls,
|
|
301
|
+
helpTextAbove,
|
|
302
|
+
helpTextBelow,
|
|
303
|
+
renderError
|
|
263
304
|
}
|
|
264
305
|
);
|
|
265
306
|
}
|
|
266
307
|
case "number":
|
|
267
308
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classNames?.fieldWrapper ?? defaultFieldWrapper, children: [
|
|
268
309
|
renderLabel(),
|
|
310
|
+
helpTextAbove,
|
|
269
311
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
270
312
|
"input",
|
|
271
313
|
{
|
|
@@ -280,11 +322,12 @@ function FormField({
|
|
|
280
322
|
...ariaProps
|
|
281
323
|
}
|
|
282
324
|
),
|
|
283
|
-
|
|
325
|
+
helpTextBelow,
|
|
284
326
|
renderError()
|
|
285
327
|
] });
|
|
286
328
|
case "check":
|
|
287
329
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classNames?.fieldWrapper ?? defaultFieldWrapper, children: [
|
|
330
|
+
helpTextAbove,
|
|
288
331
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2", children: [
|
|
289
332
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
290
333
|
"input",
|
|
@@ -302,7 +345,7 @@ function FormField({
|
|
|
302
345
|
question.required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-red-500 ml-1", "aria-hidden": "true", children: "*" })
|
|
303
346
|
] })
|
|
304
347
|
] }),
|
|
305
|
-
|
|
348
|
+
helpTextBelow,
|
|
306
349
|
renderError()
|
|
307
350
|
] });
|
|
308
351
|
default:
|
|
@@ -314,6 +357,7 @@ function BookingForm({
|
|
|
314
357
|
onSubmit,
|
|
315
358
|
submitLabel = "Submit",
|
|
316
359
|
isAdmin = false,
|
|
360
|
+
displayHelpTextBelowLabel = false,
|
|
317
361
|
className = "",
|
|
318
362
|
labelClassName,
|
|
319
363
|
classNames: classNamesProp
|
|
@@ -322,10 +366,10 @@ function BookingForm({
|
|
|
322
366
|
...classNamesProp,
|
|
323
367
|
label: classNamesProp?.label ?? labelClassName
|
|
324
368
|
};
|
|
325
|
-
const [values, setValues] =
|
|
326
|
-
const [errors, setErrors] =
|
|
327
|
-
const [touched, setTouched] =
|
|
328
|
-
const isQuestionVisible =
|
|
369
|
+
const [values, setValues] = React.useState({});
|
|
370
|
+
const [errors, setErrors] = React.useState({});
|
|
371
|
+
const [touched, setTouched] = React.useState({});
|
|
372
|
+
const isQuestionVisible = React.useCallback(
|
|
329
373
|
(question) => {
|
|
330
374
|
const { settings } = question;
|
|
331
375
|
if (!settings?.conditional_answers) {
|
|
@@ -418,7 +462,7 @@ function BookingForm({
|
|
|
418
462
|
[values, questions]
|
|
419
463
|
);
|
|
420
464
|
const visibleQuestions = questions.filter((q) => isAdmin || !q.admin_only).filter(isQuestionVisible);
|
|
421
|
-
const validateField =
|
|
465
|
+
const validateField = React.useCallback((question, value) => {
|
|
422
466
|
if (question.detail_type === "heading") return null;
|
|
423
467
|
if (question.required) {
|
|
424
468
|
if (value === void 0 || value === "" || value === null) {
|
|
@@ -439,7 +483,7 @@ function BookingForm({
|
|
|
439
483
|
}
|
|
440
484
|
return null;
|
|
441
485
|
}, []);
|
|
442
|
-
const validateAll =
|
|
486
|
+
const validateAll = React.useCallback(() => {
|
|
443
487
|
const newErrors = {};
|
|
444
488
|
let isValid2 = true;
|
|
445
489
|
visibleQuestions.forEach((question) => {
|
|
@@ -452,7 +496,7 @@ function BookingForm({
|
|
|
452
496
|
setErrors(newErrors);
|
|
453
497
|
return isValid2;
|
|
454
498
|
}, [visibleQuestions, values, validateField]);
|
|
455
|
-
|
|
499
|
+
React.useEffect(() => {
|
|
456
500
|
const visibleIds = new Set(visibleQuestions.map((q) => q.id));
|
|
457
501
|
setErrors((prev) => {
|
|
458
502
|
let changed = false;
|
|
@@ -510,7 +554,8 @@ function BookingForm({
|
|
|
510
554
|
value: values[question.id],
|
|
511
555
|
error: touched[question.id] ? errors[question.id] : void 0,
|
|
512
556
|
onChange: (value) => handleChange(question.id, value),
|
|
513
|
-
classNames
|
|
557
|
+
classNames,
|
|
558
|
+
displayHelpTextBelowLabel
|
|
514
559
|
},
|
|
515
560
|
question.id
|
|
516
561
|
)),
|
|
@@ -655,7 +700,7 @@ var DEFAULT_FIELDS = [
|
|
|
655
700
|
}
|
|
656
701
|
];
|
|
657
702
|
var HIDEABLE_FIELDS = ["address1", "address2", "city", "postcode"];
|
|
658
|
-
var RegistrationForm =
|
|
703
|
+
var RegistrationForm = React.forwardRef(
|
|
659
704
|
({
|
|
660
705
|
fields = DEFAULT_FIELDS,
|
|
661
706
|
additionalFields,
|
|
@@ -667,10 +712,10 @@ var RegistrationForm = react.forwardRef(
|
|
|
667
712
|
classNames = {},
|
|
668
713
|
fieldSettings = {}
|
|
669
714
|
}, ref) => {
|
|
670
|
-
const formId =
|
|
671
|
-
const [values, setValues] =
|
|
672
|
-
const [errors, setErrors] =
|
|
673
|
-
const [touched, setTouched] =
|
|
715
|
+
const formId = React.useId();
|
|
716
|
+
const [values, setValues] = React.useState({});
|
|
717
|
+
const [errors, setErrors] = React.useState({});
|
|
718
|
+
const [touched, setTouched] = React.useState({});
|
|
674
719
|
const visibleFields = fields.filter((field) => {
|
|
675
720
|
if (HIDEABLE_FIELDS.includes(field.name)) {
|
|
676
721
|
const setting = fieldSettings[field.name];
|
|
@@ -679,7 +724,7 @@ var RegistrationForm = react.forwardRef(
|
|
|
679
724
|
return true;
|
|
680
725
|
});
|
|
681
726
|
const allFields = additionalFields ? [...visibleFields, ...additionalFields] : visibleFields;
|
|
682
|
-
const validateMatching =
|
|
727
|
+
const validateMatching = React.useCallback(
|
|
683
728
|
(fieldName, value, currentValues) => {
|
|
684
729
|
if (fieldName === "verifyEmail") {
|
|
685
730
|
if (value && currentValues.email && value !== currentValues.email) {
|
|
@@ -695,7 +740,7 @@ var RegistrationForm = react.forwardRef(
|
|
|
695
740
|
},
|
|
696
741
|
[]
|
|
697
742
|
);
|
|
698
|
-
const validateField =
|
|
743
|
+
const validateField = React.useCallback(
|
|
699
744
|
(field, value, currentValues) => {
|
|
700
745
|
if (field.required && (!value || value.trim() === "")) {
|
|
701
746
|
return "This field is required";
|
|
@@ -710,7 +755,7 @@ var RegistrationForm = react.forwardRef(
|
|
|
710
755
|
},
|
|
711
756
|
[validateMatching]
|
|
712
757
|
);
|
|
713
|
-
const validateAll =
|
|
758
|
+
const validateAll = React.useCallback(() => {
|
|
714
759
|
const newErrors = {};
|
|
715
760
|
let isValid2 = true;
|
|
716
761
|
for (const field of allFields) {
|
|
@@ -724,7 +769,7 @@ var RegistrationForm = react.forwardRef(
|
|
|
724
769
|
setErrors(newErrors);
|
|
725
770
|
return isValid2;
|
|
726
771
|
}, [allFields, values, validateField]);
|
|
727
|
-
const checkIsValid =
|
|
772
|
+
const checkIsValid = React.useCallback(
|
|
728
773
|
(currentValues) => {
|
|
729
774
|
for (const field of allFields) {
|
|
730
775
|
const value = currentValues[field.name] || "";
|
|
@@ -735,7 +780,7 @@ var RegistrationForm = react.forwardRef(
|
|
|
735
780
|
},
|
|
736
781
|
[allFields, validateField]
|
|
737
782
|
);
|
|
738
|
-
const handleChange =
|
|
783
|
+
const handleChange = React.useCallback(
|
|
739
784
|
(fieldName, value) => {
|
|
740
785
|
const newValues = { ...values, [fieldName]: value };
|
|
741
786
|
setValues(newValues);
|
|
@@ -789,14 +834,14 @@ var RegistrationForm = react.forwardRef(
|
|
|
789
834
|
},
|
|
790
835
|
[values, touched, allFields, validateField, onChange, checkIsValid]
|
|
791
836
|
);
|
|
792
|
-
const handleCheckboxChange =
|
|
837
|
+
const handleCheckboxChange = React.useCallback(
|
|
793
838
|
(fieldName, checked) => {
|
|
794
839
|
const value = checked ? "true" : "";
|
|
795
840
|
handleChange(fieldName, value);
|
|
796
841
|
},
|
|
797
842
|
[handleChange]
|
|
798
843
|
);
|
|
799
|
-
const handleBlur =
|
|
844
|
+
const handleBlur = React.useCallback(
|
|
800
845
|
(fieldName) => {
|
|
801
846
|
setTouched((prev) => ({ ...prev, [fieldName]: true }));
|
|
802
847
|
if (validateOnBlur) {
|
|
@@ -818,7 +863,7 @@ var RegistrationForm = react.forwardRef(
|
|
|
818
863
|
},
|
|
819
864
|
[validateOnBlur, allFields, values, validateField]
|
|
820
865
|
);
|
|
821
|
-
const handleSubmit =
|
|
866
|
+
const handleSubmit = React.useCallback(
|
|
822
867
|
(e) => {
|
|
823
868
|
e.preventDefault();
|
|
824
869
|
const allTouched = {};
|
|
@@ -832,7 +877,7 @@ var RegistrationForm = react.forwardRef(
|
|
|
832
877
|
},
|
|
833
878
|
[allFields, validateAll, onSubmit, values]
|
|
834
879
|
);
|
|
835
|
-
|
|
880
|
+
React.useImperativeHandle(
|
|
836
881
|
ref,
|
|
837
882
|
() => ({
|
|
838
883
|
reset: () => {
|
|
@@ -948,7 +993,7 @@ var RegistrationForm = react.forwardRef(
|
|
|
948
993
|
);
|
|
949
994
|
RegistrationForm.displayName = "RegistrationForm";
|
|
950
995
|
var cx2 = (...classes) => classes.filter(Boolean).join(" ");
|
|
951
|
-
var ContactDetailsForm =
|
|
996
|
+
var ContactDetailsForm = React.forwardRef(
|
|
952
997
|
({
|
|
953
998
|
questions = [],
|
|
954
999
|
onSubmit,
|
|
@@ -962,13 +1007,13 @@ var ContactDetailsForm = react.forwardRef(
|
|
|
962
1007
|
hideSubmitButton = false,
|
|
963
1008
|
isSubmitted = false
|
|
964
1009
|
}, ref) => {
|
|
965
|
-
const formId =
|
|
966
|
-
const [firstName, setFirstName] =
|
|
967
|
-
const [lastName, setLastName] =
|
|
968
|
-
const [emailValue, setEmailValue] =
|
|
969
|
-
const [contactErrors, setContactErrors] =
|
|
970
|
-
const [contactTouched, setContactTouched] =
|
|
971
|
-
const [questionValues, setQuestionValues] =
|
|
1010
|
+
const formId = React.useId();
|
|
1011
|
+
const [firstName, setFirstName] = React.useState(initialValues?.firstName || "");
|
|
1012
|
+
const [lastName, setLastName] = React.useState(initialValues?.lastName || "");
|
|
1013
|
+
const [emailValue, setEmailValue] = React.useState(initialValues?.email || "");
|
|
1014
|
+
const [contactErrors, setContactErrors] = React.useState({});
|
|
1015
|
+
const [contactTouched, setContactTouched] = React.useState({});
|
|
1016
|
+
const [questionValues, setQuestionValues] = React.useState(() => {
|
|
972
1017
|
if (!initialValues?.questions) return {};
|
|
973
1018
|
const init = {};
|
|
974
1019
|
for (const [key, val] of Object.entries(initialValues.questions)) {
|
|
@@ -976,8 +1021,8 @@ var ContactDetailsForm = react.forwardRef(
|
|
|
976
1021
|
}
|
|
977
1022
|
return init;
|
|
978
1023
|
});
|
|
979
|
-
const [questionErrors, setQuestionErrors] =
|
|
980
|
-
const [questionTouched, setQuestionTouched] =
|
|
1024
|
+
const [questionErrors, setQuestionErrors] = React.useState({});
|
|
1025
|
+
const [questionTouched, setQuestionTouched] = React.useState({});
|
|
981
1026
|
const getFieldRequired = (name) => {
|
|
982
1027
|
const s = fieldSettings[name];
|
|
983
1028
|
return s?.required !== void 0 ? s.required : true;
|
|
@@ -991,7 +1036,7 @@ var ContactDetailsForm = react.forwardRef(
|
|
|
991
1036
|
{ name: "lastName", label: "Last name", value: lastName, setter: setLastName },
|
|
992
1037
|
{ name: "email", label: "Email", value: emailValue, setter: setEmailValue }
|
|
993
1038
|
];
|
|
994
|
-
const validateContactField =
|
|
1039
|
+
const validateContactField = React.useCallback((name, value) => {
|
|
995
1040
|
const isRequired = getFieldRequired(name);
|
|
996
1041
|
if (name === "email") {
|
|
997
1042
|
const validators = isRequired ? compose(required, email) : email;
|
|
@@ -999,7 +1044,7 @@ var ContactDetailsForm = react.forwardRef(
|
|
|
999
1044
|
}
|
|
1000
1045
|
return isRequired ? required(value) : null;
|
|
1001
1046
|
}, [fieldSettings]);
|
|
1002
|
-
const validateQuestionField =
|
|
1047
|
+
const validateQuestionField = React.useCallback((question, value) => {
|
|
1003
1048
|
if (question.detail_type === "heading") return null;
|
|
1004
1049
|
if (question.disabled) return null;
|
|
1005
1050
|
if (question.required) {
|
|
@@ -1021,7 +1066,7 @@ var ContactDetailsForm = react.forwardRef(
|
|
|
1021
1066
|
}
|
|
1022
1067
|
return null;
|
|
1023
1068
|
}, []);
|
|
1024
|
-
const validateAllContacts =
|
|
1069
|
+
const validateAllContacts = React.useCallback(() => {
|
|
1025
1070
|
const errs = {};
|
|
1026
1071
|
let valid = true;
|
|
1027
1072
|
for (const f of contactFields) {
|
|
@@ -1035,7 +1080,7 @@ var ContactDetailsForm = react.forwardRef(
|
|
|
1035
1080
|
setContactErrors(errs);
|
|
1036
1081
|
return valid;
|
|
1037
1082
|
}, [firstName, lastName, emailValue, validateContactField, fieldSettings]);
|
|
1038
|
-
const validateAllQuestions =
|
|
1083
|
+
const validateAllQuestions = React.useCallback(() => {
|
|
1039
1084
|
const errs = {};
|
|
1040
1085
|
let valid = true;
|
|
1041
1086
|
for (const q of questions) {
|
|
@@ -1048,7 +1093,7 @@ var ContactDetailsForm = react.forwardRef(
|
|
|
1048
1093
|
setQuestionErrors(errs);
|
|
1049
1094
|
return valid;
|
|
1050
1095
|
}, [questions, questionValues, validateQuestionField]);
|
|
1051
|
-
const buildOutput =
|
|
1096
|
+
const buildOutput = React.useCallback(() => {
|
|
1052
1097
|
const q = {};
|
|
1053
1098
|
const answers = [];
|
|
1054
1099
|
for (const question of questions) {
|
|
@@ -1072,7 +1117,7 @@ var ContactDetailsForm = react.forwardRef(
|
|
|
1072
1117
|
}
|
|
1073
1118
|
return { firstName, lastName, email: emailValue, q, answers };
|
|
1074
1119
|
}, [firstName, lastName, emailValue, questions, questionValues]);
|
|
1075
|
-
const handleContactChange =
|
|
1120
|
+
const handleContactChange = React.useCallback((name, value) => {
|
|
1076
1121
|
const setter = name === "firstName" ? setFirstName : name === "lastName" ? setLastName : setEmailValue;
|
|
1077
1122
|
setter(value);
|
|
1078
1123
|
if (contactTouched[name]) {
|
|
@@ -1084,7 +1129,7 @@ var ContactDetailsForm = react.forwardRef(
|
|
|
1084
1129
|
});
|
|
1085
1130
|
}
|
|
1086
1131
|
}, [contactTouched, validateContactField]);
|
|
1087
|
-
const handleContactBlur =
|
|
1132
|
+
const handleContactBlur = React.useCallback((name, value) => {
|
|
1088
1133
|
setContactTouched((prev) => ({ ...prev, [name]: true }));
|
|
1089
1134
|
if (validateOnBlur) {
|
|
1090
1135
|
const err = validateContactField(name, value);
|
|
@@ -1095,7 +1140,7 @@ var ContactDetailsForm = react.forwardRef(
|
|
|
1095
1140
|
});
|
|
1096
1141
|
}
|
|
1097
1142
|
}, [validateOnBlur, validateContactField]);
|
|
1098
|
-
const handleQuestionChange =
|
|
1143
|
+
const handleQuestionChange = React.useCallback((questionId, value) => {
|
|
1099
1144
|
setQuestionValues((prev) => ({ ...prev, [questionId]: value }));
|
|
1100
1145
|
setQuestionTouched((prev) => ({ ...prev, [questionId]: true }));
|
|
1101
1146
|
if (questionTouched[questionId]) {
|
|
@@ -1110,7 +1155,7 @@ var ContactDetailsForm = react.forwardRef(
|
|
|
1110
1155
|
}
|
|
1111
1156
|
}
|
|
1112
1157
|
}, [questionTouched, questions, validateQuestionField]);
|
|
1113
|
-
const handleQuestionBlur =
|
|
1158
|
+
const handleQuestionBlur = React.useCallback((questionId) => {
|
|
1114
1159
|
setQuestionTouched((prev) => ({ ...prev, [questionId]: true }));
|
|
1115
1160
|
if (validateOnBlur) {
|
|
1116
1161
|
const question = questions.find((q) => q.id === questionId);
|
|
@@ -1124,7 +1169,7 @@ var ContactDetailsForm = react.forwardRef(
|
|
|
1124
1169
|
}
|
|
1125
1170
|
}
|
|
1126
1171
|
}, [validateOnBlur, questions, questionValues, validateQuestionField]);
|
|
1127
|
-
const handleSubmit =
|
|
1172
|
+
const handleSubmit = React.useCallback((e) => {
|
|
1128
1173
|
e.preventDefault();
|
|
1129
1174
|
const allContactTouched = {};
|
|
1130
1175
|
for (const f of contactFields) allContactTouched[f.name] = true;
|
|
@@ -1138,7 +1183,7 @@ var ContactDetailsForm = react.forwardRef(
|
|
|
1138
1183
|
onSubmit(buildOutput());
|
|
1139
1184
|
}
|
|
1140
1185
|
}, [contactFields, questions, validateAllContacts, validateAllQuestions, onSubmit, buildOutput]);
|
|
1141
|
-
|
|
1186
|
+
React.useImperativeHandle(ref, () => ({
|
|
1142
1187
|
reset: () => {
|
|
1143
1188
|
setFirstName(initialValues?.firstName || "");
|
|
1144
1189
|
setLastName(initialValues?.lastName || "");
|
|
@@ -1367,13 +1412,13 @@ var ContactDetailsForm = react.forwardRef(
|
|
|
1367
1412
|
return null;
|
|
1368
1413
|
}
|
|
1369
1414
|
};
|
|
1370
|
-
|
|
1415
|
+
React.useEffect(() => {
|
|
1371
1416
|
if (isSubmitted) {
|
|
1372
1417
|
validateAllContacts();
|
|
1373
1418
|
validateAllQuestions();
|
|
1374
1419
|
}
|
|
1375
1420
|
}, [isSubmitted]);
|
|
1376
|
-
|
|
1421
|
+
React.useEffect(() => {
|
|
1377
1422
|
if (hideSubmitButton && _onChange) {
|
|
1378
1423
|
const contactValid = !contactFields.some((f) => {
|
|
1379
1424
|
if (getFieldDisabled(f.name)) return false;
|
|
@@ -1400,7 +1445,7 @@ var FIELDS = [
|
|
|
1400
1445
|
{ name: "newPassword", label: "New Password" },
|
|
1401
1446
|
{ name: "confirmNewPassword", label: "Confirm New Password" }
|
|
1402
1447
|
];
|
|
1403
|
-
var ResetPasswordForm =
|
|
1448
|
+
var ResetPasswordForm = React.forwardRef(
|
|
1404
1449
|
({
|
|
1405
1450
|
onSubmit,
|
|
1406
1451
|
onChange,
|
|
@@ -1409,15 +1454,15 @@ var ResetPasswordForm = react.forwardRef(
|
|
|
1409
1454
|
className = "",
|
|
1410
1455
|
classNames = {}
|
|
1411
1456
|
}, ref) => {
|
|
1412
|
-
const formId =
|
|
1413
|
-
const [values, setValues] =
|
|
1457
|
+
const formId = React.useId();
|
|
1458
|
+
const [values, setValues] = React.useState({
|
|
1414
1459
|
currentPassword: "",
|
|
1415
1460
|
newPassword: "",
|
|
1416
1461
|
confirmNewPassword: ""
|
|
1417
1462
|
});
|
|
1418
|
-
const [errors, setErrors] =
|
|
1419
|
-
const [touched, setTouched] =
|
|
1420
|
-
const validateField =
|
|
1463
|
+
const [errors, setErrors] = React.useState({});
|
|
1464
|
+
const [touched, setTouched] = React.useState({});
|
|
1465
|
+
const validateField = React.useCallback(
|
|
1421
1466
|
(name, val, allValues) => {
|
|
1422
1467
|
if (!val || val.trim() === "") return "This field is required";
|
|
1423
1468
|
if (name === "confirmNewPassword" && val !== allValues.newPassword) {
|
|
@@ -1427,7 +1472,7 @@ var ResetPasswordForm = react.forwardRef(
|
|
|
1427
1472
|
},
|
|
1428
1473
|
[]
|
|
1429
1474
|
);
|
|
1430
|
-
const checkIsValid =
|
|
1475
|
+
const checkIsValid = React.useCallback(
|
|
1431
1476
|
(v) => {
|
|
1432
1477
|
for (const field of FIELDS) {
|
|
1433
1478
|
if (validateField(field.name, v[field.name], v)) return false;
|
|
@@ -1436,7 +1481,7 @@ var ResetPasswordForm = react.forwardRef(
|
|
|
1436
1481
|
},
|
|
1437
1482
|
[validateField]
|
|
1438
1483
|
);
|
|
1439
|
-
const handleChange =
|
|
1484
|
+
const handleChange = React.useCallback(
|
|
1440
1485
|
(name, val) => {
|
|
1441
1486
|
const newValues = { ...values, [name]: val };
|
|
1442
1487
|
setValues(newValues);
|
|
@@ -1466,7 +1511,7 @@ var ResetPasswordForm = react.forwardRef(
|
|
|
1466
1511
|
},
|
|
1467
1512
|
[values, touched, validateField, onChange, checkIsValid]
|
|
1468
1513
|
);
|
|
1469
|
-
const handleBlur =
|
|
1514
|
+
const handleBlur = React.useCallback(
|
|
1470
1515
|
(name) => {
|
|
1471
1516
|
setTouched((prev) => ({ ...prev, [name]: true }));
|
|
1472
1517
|
if (validateOnBlur) {
|
|
@@ -1484,7 +1529,7 @@ var ResetPasswordForm = react.forwardRef(
|
|
|
1484
1529
|
},
|
|
1485
1530
|
[validateOnBlur, values, validateField]
|
|
1486
1531
|
);
|
|
1487
|
-
const handleSubmit =
|
|
1532
|
+
const handleSubmit = React.useCallback(
|
|
1488
1533
|
(e) => {
|
|
1489
1534
|
e.preventDefault();
|
|
1490
1535
|
const allTouched = {};
|
|
@@ -1509,7 +1554,7 @@ var ResetPasswordForm = react.forwardRef(
|
|
|
1509
1554
|
},
|
|
1510
1555
|
[values, validateField, onSubmit]
|
|
1511
1556
|
);
|
|
1512
|
-
|
|
1557
|
+
React.useImperativeHandle(ref, () => ({
|
|
1513
1558
|
reset: () => {
|
|
1514
1559
|
setValues({ currentPassword: "", newPassword: "", confirmNewPassword: "" });
|
|
1515
1560
|
setErrors({});
|
|
@@ -4462,30 +4507,30 @@ function SchemaFormBuilder(props) {
|
|
|
4462
4507
|
onVenueSet,
|
|
4463
4508
|
onProcessing
|
|
4464
4509
|
} = props;
|
|
4465
|
-
const [formValues, setFormValues] =
|
|
4466
|
-
const [formFields, setFormFields] =
|
|
4467
|
-
const [schema, setSchema] =
|
|
4468
|
-
const [showSubmit, setShowSubmit] =
|
|
4469
|
-
const [loading, setLoading] =
|
|
4470
|
-
const [suggestions, setSuggestions] =
|
|
4471
|
-
const [, _setSearching] =
|
|
4472
|
-
const [searchText, setSearchText] =
|
|
4473
|
-
const [touchedFields, setTouchedFields] =
|
|
4474
|
-
const [dirtyFields, setDirtyFields] =
|
|
4475
|
-
const formServicesRef =
|
|
4476
|
-
const extraItemsRef =
|
|
4477
|
-
const pendingExtraItemFetchesRef =
|
|
4478
|
-
const venueSearchTimerRef =
|
|
4479
|
-
const activeFormIdRef =
|
|
4480
|
-
const initialisedRef =
|
|
4481
|
-
const validatorMapRef =
|
|
4482
|
-
|
|
4510
|
+
const [formValues, setFormValues] = React.useState({});
|
|
4511
|
+
const [formFields, setFormFields] = React.useState([]);
|
|
4512
|
+
const [schema, setSchema] = React.useState(null);
|
|
4513
|
+
const [showSubmit, setShowSubmit] = React.useState(showSubmitProp ?? false);
|
|
4514
|
+
const [loading, setLoading] = React.useState(true);
|
|
4515
|
+
const [suggestions, setSuggestions] = React.useState([]);
|
|
4516
|
+
const [, _setSearching] = React.useState(false);
|
|
4517
|
+
const [searchText, setSearchText] = React.useState("");
|
|
4518
|
+
const [touchedFields, setTouchedFields] = React.useState(/* @__PURE__ */ new Set());
|
|
4519
|
+
const [dirtyFields, setDirtyFields] = React.useState(/* @__PURE__ */ new Set());
|
|
4520
|
+
const formServicesRef = React.useRef({});
|
|
4521
|
+
const extraItemsRef = React.useRef([]);
|
|
4522
|
+
const pendingExtraItemFetchesRef = React.useRef(/* @__PURE__ */ new Set());
|
|
4523
|
+
const venueSearchTimerRef = React.useRef(null);
|
|
4524
|
+
const activeFormIdRef = React.useRef("");
|
|
4525
|
+
const initialisedRef = React.useRef(false);
|
|
4526
|
+
const validatorMapRef = React.useRef(/* @__PURE__ */ new Map());
|
|
4527
|
+
React.useEffect(() => {
|
|
4483
4528
|
if (initialisedRef.current && formUpdateId === activeFormIdRef.current && !initialSchema) return;
|
|
4484
4529
|
initialisedRef.current = true;
|
|
4485
4530
|
activeFormIdRef.current = formUpdateId ?? formId;
|
|
4486
4531
|
initialiseForm(formUpdateId ?? formId);
|
|
4487
4532
|
}, [formId, formUpdateId, initialSchema]);
|
|
4488
|
-
|
|
4533
|
+
React.useEffect(() => {
|
|
4489
4534
|
if (formFields.length > 0) {
|
|
4490
4535
|
refreshVisibility();
|
|
4491
4536
|
}
|
|
@@ -4512,7 +4557,7 @@ function SchemaFormBuilder(props) {
|
|
|
4512
4557
|
});
|
|
4513
4558
|
}
|
|
4514
4559
|
}, [formValues]);
|
|
4515
|
-
|
|
4560
|
+
React.useEffect(() => {
|
|
4516
4561
|
if (!formFields.length) return;
|
|
4517
4562
|
const visibleFieldsWithExtraItems = formFields.filter(
|
|
4518
4563
|
(f) => f.page === currentPage && (f.visible || f.is_visible) && (f["extra-item"] || f.resource_ids)
|
|
@@ -4521,14 +4566,14 @@ function SchemaFormBuilder(props) {
|
|
|
4521
4566
|
void setExtraItems(field);
|
|
4522
4567
|
}
|
|
4523
4568
|
}, [formFields, formValues]);
|
|
4524
|
-
|
|
4569
|
+
React.useEffect(() => {
|
|
4525
4570
|
return () => {
|
|
4526
4571
|
if (venueSearchTimerRef.current) {
|
|
4527
4572
|
clearTimeout(venueSearchTimerRef.current);
|
|
4528
4573
|
}
|
|
4529
4574
|
};
|
|
4530
4575
|
}, []);
|
|
4531
|
-
const setFieldValue =
|
|
4576
|
+
const setFieldValue = React.useCallback(
|
|
4532
4577
|
(fieldName, value, _options) => {
|
|
4533
4578
|
setFormValues((prev) => ({ ...prev, [fieldName]: value }));
|
|
4534
4579
|
persistAnswer(formId, fieldName, value);
|