@itcase/forms 1.1.53 → 1.1.54
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/itcase-forms.cjs.js +1571 -1318
- package/dist/itcase-forms.esm.js +1571 -1318
- package/package.json +23 -23
package/dist/itcase-forms.cjs.js
CHANGED
|
@@ -50,31 +50,34 @@ var axios__default = /*#__PURE__*/_interopDefault(axios);
|
|
|
50
50
|
var castArray__default = /*#__PURE__*/_interopDefault(castArray);
|
|
51
51
|
var createDecorator__default = /*#__PURE__*/_interopDefault(createDecorator);
|
|
52
52
|
|
|
53
|
-
|
|
53
|
+
var phoneValidation = function phoneValidation(value) {
|
|
54
54
|
if (!value) {
|
|
55
55
|
return true;
|
|
56
56
|
}
|
|
57
57
|
return libphonenumberJs.isPossiblePhoneNumber(value, 'RU');
|
|
58
58
|
};
|
|
59
|
-
|
|
59
|
+
var emailValidation = function emailValidation(value) {
|
|
60
60
|
// from https://emailregex.com/
|
|
61
61
|
if (!value) {
|
|
62
62
|
return true;
|
|
63
63
|
}
|
|
64
64
|
|
|
65
65
|
// from https://www.regular-expressions.info/email.html
|
|
66
|
-
|
|
66
|
+
var regexp = /^[a-za-яёЁ0-9_-]+(?:\.[a-za-яёЁ0-9_-]+)*@(?:[a-za-яёЁ0-9](?:[a-za-яёЁ0-9-]*[a-za-яёЁ0-9])?\.)+[a-za-яёЁ0-9]+$/;
|
|
67
67
|
return regexp.test(String(value).toLowerCase());
|
|
68
68
|
};
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
69
|
+
var dateValidation = function dateValidation(value) {
|
|
70
|
+
var valueDate = value instanceof Date ? value : new Date(value);
|
|
71
|
+
var isDateValid = !isNaN(valueDate.getTime());
|
|
72
72
|
return isDateValid;
|
|
73
73
|
};
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
schema.requiredFields = fields.reduce((list,
|
|
77
|
-
|
|
74
|
+
var addRequiredFieldsParamToSchema = function addRequiredFieldsParamToSchema(schema) {
|
|
75
|
+
var fields = Object.entries(schema.fields);
|
|
76
|
+
schema.requiredFields = fields.reduce(function (list, _ref) {
|
|
77
|
+
var _validationProps$excl;
|
|
78
|
+
var fieldName = _ref[0],
|
|
79
|
+
validationProps = _ref[1];
|
|
80
|
+
if ((_validationProps$excl = validationProps.exclusiveTests) != null && _validationProps$excl.required) {
|
|
78
81
|
list.push(fieldName);
|
|
79
82
|
}
|
|
80
83
|
return list;
|
|
@@ -82,6 +85,169 @@ const addRequiredFieldsParamToSchema = schema => {
|
|
|
82
85
|
return schema;
|
|
83
86
|
};
|
|
84
87
|
|
|
88
|
+
function _arrayLikeToArray(r, a) {
|
|
89
|
+
(null == a || a > r.length) && (a = r.length);
|
|
90
|
+
for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
|
|
91
|
+
return n;
|
|
92
|
+
}
|
|
93
|
+
function asyncGeneratorStep(n, t, e, r, o, a, c) {
|
|
94
|
+
try {
|
|
95
|
+
var i = n[a](c),
|
|
96
|
+
u = i.value;
|
|
97
|
+
} catch (n) {
|
|
98
|
+
return void e(n);
|
|
99
|
+
}
|
|
100
|
+
i.done ? t(u) : Promise.resolve(u).then(r, o);
|
|
101
|
+
}
|
|
102
|
+
function _asyncToGenerator(n) {
|
|
103
|
+
return function () {
|
|
104
|
+
var t = this,
|
|
105
|
+
e = arguments;
|
|
106
|
+
return new Promise(function (r, o) {
|
|
107
|
+
var a = n.apply(t, e);
|
|
108
|
+
function _next(n) {
|
|
109
|
+
asyncGeneratorStep(a, r, o, _next, _throw, "next", n);
|
|
110
|
+
}
|
|
111
|
+
function _throw(n) {
|
|
112
|
+
asyncGeneratorStep(a, r, o, _next, _throw, "throw", n);
|
|
113
|
+
}
|
|
114
|
+
_next(void 0);
|
|
115
|
+
});
|
|
116
|
+
};
|
|
117
|
+
}
|
|
118
|
+
function _createForOfIteratorHelperLoose(r, e) {
|
|
119
|
+
var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
|
|
120
|
+
if (t) return (t = t.call(r)).next.bind(t);
|
|
121
|
+
if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e) {
|
|
122
|
+
t && (r = t);
|
|
123
|
+
var o = 0;
|
|
124
|
+
return function () {
|
|
125
|
+
return o >= r.length ? {
|
|
126
|
+
done: true
|
|
127
|
+
} : {
|
|
128
|
+
done: false,
|
|
129
|
+
value: r[o++]
|
|
130
|
+
};
|
|
131
|
+
};
|
|
132
|
+
}
|
|
133
|
+
throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
134
|
+
}
|
|
135
|
+
function _regenerator() {
|
|
136
|
+
/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */
|
|
137
|
+
var e,
|
|
138
|
+
t,
|
|
139
|
+
r = "function" == typeof Symbol ? Symbol : {},
|
|
140
|
+
n = r.iterator || "@@iterator",
|
|
141
|
+
o = r.toStringTag || "@@toStringTag";
|
|
142
|
+
function i(r, n, o, i) {
|
|
143
|
+
var c = n && n.prototype instanceof Generator ? n : Generator,
|
|
144
|
+
u = Object.create(c.prototype);
|
|
145
|
+
return _regeneratorDefine(u, "_invoke", function (r, n, o) {
|
|
146
|
+
var i,
|
|
147
|
+
c,
|
|
148
|
+
u,
|
|
149
|
+
f = 0,
|
|
150
|
+
p = o || [],
|
|
151
|
+
y = false,
|
|
152
|
+
G = {
|
|
153
|
+
p: 0,
|
|
154
|
+
n: 0,
|
|
155
|
+
v: e,
|
|
156
|
+
a: d,
|
|
157
|
+
f: d.bind(e, 4),
|
|
158
|
+
d: function (t, r) {
|
|
159
|
+
return i = t, c = 0, u = e, G.n = r, a;
|
|
160
|
+
}
|
|
161
|
+
};
|
|
162
|
+
function d(r, n) {
|
|
163
|
+
for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) {
|
|
164
|
+
var o,
|
|
165
|
+
i = p[t],
|
|
166
|
+
d = G.p,
|
|
167
|
+
l = i[2];
|
|
168
|
+
r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0));
|
|
169
|
+
}
|
|
170
|
+
if (o || r > 1) return a;
|
|
171
|
+
throw y = true, n;
|
|
172
|
+
}
|
|
173
|
+
return function (o, p, l) {
|
|
174
|
+
if (f > 1) throw TypeError("Generator is already running");
|
|
175
|
+
for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) {
|
|
176
|
+
i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u);
|
|
177
|
+
try {
|
|
178
|
+
if (f = 2, i) {
|
|
179
|
+
if (c || (o = "next"), t = i[o]) {
|
|
180
|
+
if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object");
|
|
181
|
+
if (!t.done) return t;
|
|
182
|
+
u = t.value, c < 2 && (c = 0);
|
|
183
|
+
} else 1 === c && (t = i.return) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1);
|
|
184
|
+
i = e;
|
|
185
|
+
} else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break;
|
|
186
|
+
} catch (t) {
|
|
187
|
+
i = e, c = 1, u = t;
|
|
188
|
+
} finally {
|
|
189
|
+
f = 1;
|
|
190
|
+
}
|
|
191
|
+
}
|
|
192
|
+
return {
|
|
193
|
+
value: t,
|
|
194
|
+
done: y
|
|
195
|
+
};
|
|
196
|
+
};
|
|
197
|
+
}(r, o, i), true), u;
|
|
198
|
+
}
|
|
199
|
+
var a = {};
|
|
200
|
+
function Generator() {}
|
|
201
|
+
function GeneratorFunction() {}
|
|
202
|
+
function GeneratorFunctionPrototype() {}
|
|
203
|
+
t = Object.getPrototypeOf;
|
|
204
|
+
var c = [][n] ? t(t([][n]())) : (_regeneratorDefine(t = {}, n, function () {
|
|
205
|
+
return this;
|
|
206
|
+
}), t),
|
|
207
|
+
u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c);
|
|
208
|
+
function f(e) {
|
|
209
|
+
return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e;
|
|
210
|
+
}
|
|
211
|
+
return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine(u), _regeneratorDefine(u, o, "Generator"), _regeneratorDefine(u, n, function () {
|
|
212
|
+
return this;
|
|
213
|
+
}), _regeneratorDefine(u, "toString", function () {
|
|
214
|
+
return "[object Generator]";
|
|
215
|
+
}), (_regenerator = function () {
|
|
216
|
+
return {
|
|
217
|
+
w: i,
|
|
218
|
+
m: f
|
|
219
|
+
};
|
|
220
|
+
})();
|
|
221
|
+
}
|
|
222
|
+
function _regeneratorDefine(e, r, n, t) {
|
|
223
|
+
var i = Object.defineProperty;
|
|
224
|
+
try {
|
|
225
|
+
i({}, "", {});
|
|
226
|
+
} catch (e) {
|
|
227
|
+
i = 0;
|
|
228
|
+
}
|
|
229
|
+
_regeneratorDefine = function (e, r, n, t) {
|
|
230
|
+
function o(r, n) {
|
|
231
|
+
_regeneratorDefine(e, r, function (e) {
|
|
232
|
+
return this._invoke(r, n, e);
|
|
233
|
+
});
|
|
234
|
+
}
|
|
235
|
+
r ? i ? i(e, r, {
|
|
236
|
+
value: n,
|
|
237
|
+
enumerable: !t,
|
|
238
|
+
configurable: !t,
|
|
239
|
+
writable: !t
|
|
240
|
+
}) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2));
|
|
241
|
+
}, _regeneratorDefine(e, r, n, t);
|
|
242
|
+
}
|
|
243
|
+
function _unsupportedIterableToArray(r, a) {
|
|
244
|
+
if (r) {
|
|
245
|
+
if ("string" == typeof r) return _arrayLikeToArray(r, a);
|
|
246
|
+
var t = {}.toString.call(r).slice(8, -1);
|
|
247
|
+
return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
|
|
248
|
+
}
|
|
249
|
+
}
|
|
250
|
+
|
|
85
251
|
/**
|
|
86
252
|
* Sets the `innerError.message` in an `errors` object at the key
|
|
87
253
|
* defined by `innerError.path`.
|
|
@@ -89,7 +255,7 @@ const addRequiredFieldsParamToSchema = schema => {
|
|
|
89
255
|
* @param {{ path: string, message: string }} innerError A `yup` field error.
|
|
90
256
|
* @returns {Object} The result of setting the new error message onto `errors`.
|
|
91
257
|
*/
|
|
92
|
-
|
|
258
|
+
var setInError = function setInError(errors, innerError) {
|
|
93
259
|
return finalForm.setIn(errors, innerError.path, innerError.message);
|
|
94
260
|
};
|
|
95
261
|
|
|
@@ -98,7 +264,7 @@ const setInError = (errors, innerError) => {
|
|
|
98
264
|
* value for reducing the `err.inner` array of errors
|
|
99
265
|
* from a `yup~ValidationError`.
|
|
100
266
|
*/
|
|
101
|
-
|
|
267
|
+
var emptyObj = Object.create(null);
|
|
102
268
|
|
|
103
269
|
/**
|
|
104
270
|
* Takes a `yup` validation schema and returns a function that expects
|
|
@@ -110,27 +276,50 @@ const emptyObj = Object.create(null);
|
|
|
110
276
|
* and resolves to either `undefined` or a map of field names to error messages.
|
|
111
277
|
*/
|
|
112
278
|
|
|
113
|
-
|
|
114
|
-
return
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
279
|
+
var makeValidate = function makeValidate(schema) {
|
|
280
|
+
return /*#__PURE__*/function () {
|
|
281
|
+
var _validate = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(values) {
|
|
282
|
+
var _t;
|
|
283
|
+
return _regenerator().w(function (_context) {
|
|
284
|
+
while (1) switch (_context.p = _context.n) {
|
|
285
|
+
case 0:
|
|
286
|
+
_context.p = 0;
|
|
287
|
+
_context.n = 1;
|
|
288
|
+
return schema.validate(values, {
|
|
289
|
+
abortEarly: false
|
|
290
|
+
});
|
|
291
|
+
case 1:
|
|
292
|
+
_context.n = 4;
|
|
293
|
+
break;
|
|
294
|
+
case 2:
|
|
295
|
+
_context.p = 2;
|
|
296
|
+
_t = _context.v;
|
|
297
|
+
if (!_t.inner) {
|
|
298
|
+
_context.n = 3;
|
|
299
|
+
break;
|
|
300
|
+
}
|
|
301
|
+
return _context.a(2, _t.inner.reduce(setInError, emptyObj));
|
|
302
|
+
case 3:
|
|
303
|
+
console.warn('itcase-forms schema.validate error: An error not related to the form occurred during validation. Validation ignored.');
|
|
304
|
+
case 4:
|
|
305
|
+
return _context.a(2);
|
|
306
|
+
}
|
|
307
|
+
}, _callee, null, [[0, 2]]);
|
|
308
|
+
}));
|
|
309
|
+
function validate(_x) {
|
|
310
|
+
return _validate.apply(this, arguments);
|
|
125
311
|
}
|
|
126
|
-
|
|
312
|
+
return validate;
|
|
313
|
+
}();
|
|
127
314
|
};
|
|
128
315
|
function useYupValidationSchema(schema, language) {
|
|
129
|
-
|
|
316
|
+
var validate = React.useMemo(function () {
|
|
317
|
+
return schema && makeValidate(schema);
|
|
318
|
+
}, [schema, language]);
|
|
130
319
|
return validate;
|
|
131
320
|
}
|
|
132
321
|
|
|
133
|
-
|
|
322
|
+
var defaultCheckboxProps = {
|
|
134
323
|
appearance: 'defaultPrimary sizeL solid',
|
|
135
324
|
width: 'fill',
|
|
136
325
|
// useValidationAppearanceInputProps
|
|
@@ -142,20 +331,22 @@ const defaultCheckboxProps = {
|
|
|
142
331
|
|
|
143
332
|
// Whether to display an error message based on "fieldProps" and meta-objects
|
|
144
333
|
function useFieldValidationState(props) {
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
334
|
+
var _meta$error;
|
|
335
|
+
var _props$fieldProps = props.fieldProps,
|
|
336
|
+
fieldProps = _props$fieldProps === void 0 ? {} : _props$fieldProps,
|
|
337
|
+
_props$input = props.input,
|
|
338
|
+
input = _props$input === void 0 ? {} : _props$input,
|
|
339
|
+
_props$meta = props.meta,
|
|
340
|
+
meta = _props$meta === void 0 ? {} : _props$meta;
|
|
150
341
|
// Determines if there's a submission error that hasn't been rectified since the last submission.
|
|
151
|
-
|
|
342
|
+
var submitError = !meta.modifiedSinceLastSubmit && meta.submitError;
|
|
152
343
|
|
|
153
344
|
// Determines a key for the error, defaulting to 'error' if no specific key is found.
|
|
154
|
-
|
|
155
|
-
|
|
345
|
+
var errorKey = ((_meta$error = meta.error) == null ? void 0 : _meta$error.key) || 'error';
|
|
346
|
+
var successKey = 'success';
|
|
156
347
|
|
|
157
348
|
// Determines if the field is in an error state based on various conditions.
|
|
158
|
-
|
|
349
|
+
var isErrorState = React.useMemo(function () {
|
|
159
350
|
if (fieldProps.showErrorsOnSubmit) {
|
|
160
351
|
return Boolean(meta.submitFailed && meta.touched && (meta.error || submitError));
|
|
161
352
|
} else {
|
|
@@ -164,15 +355,15 @@ function useFieldValidationState(props) {
|
|
|
164
355
|
}, [fieldProps.showErrorsOnSubmit, meta.submitFailed, meta.touched, meta.error, submitError]);
|
|
165
356
|
|
|
166
357
|
// Determines if the field's input state is valid
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
358
|
+
var isValidState = React.useMemo(function () {
|
|
359
|
+
var hasValue = Array.isArray(input == null ? void 0 : input.value) ? input == null ? void 0 : input.value.length : input == null ? void 0 : input.value;
|
|
360
|
+
var isModifiedAfterSubmit = meta.modifiedSinceLastSubmit && !meta.error && submitError;
|
|
170
361
|
return Boolean(hasValue && (meta.valid || isModifiedAfterSubmit));
|
|
171
|
-
}, [input
|
|
172
|
-
|
|
362
|
+
}, [input == null ? void 0 : input.value, meta.valid, meta.error, submitError, meta.modifiedSinceLastSubmit]);
|
|
363
|
+
var errorMessage = React.useMemo(function () {
|
|
173
364
|
// If final-form field has error in "meta" render-property.
|
|
174
365
|
// If field not modified after last form submit - use submit error
|
|
175
|
-
|
|
366
|
+
var error = meta.error || submitError || false;
|
|
176
367
|
if (error) {
|
|
177
368
|
// And error in "meta" is string
|
|
178
369
|
if (typeof error === 'string') {
|
|
@@ -190,24 +381,22 @@ function useFieldValidationState(props) {
|
|
|
190
381
|
return '';
|
|
191
382
|
}, [meta.error, submitError]);
|
|
192
383
|
return {
|
|
193
|
-
errorKey,
|
|
194
|
-
errorMessage,
|
|
195
|
-
isErrorState,
|
|
196
|
-
successKey,
|
|
197
|
-
isValidState
|
|
384
|
+
errorKey: errorKey,
|
|
385
|
+
errorMessage: errorMessage,
|
|
386
|
+
isErrorState: isErrorState,
|
|
387
|
+
successKey: successKey,
|
|
388
|
+
isValidState: isValidState
|
|
198
389
|
};
|
|
199
390
|
}
|
|
200
391
|
|
|
201
392
|
// This hook changes the props of the child component depending on the type of error,
|
|
202
393
|
// looks at what props were in initialProps, if they are there then changes
|
|
203
394
|
function useValidationAppearanceInputProps(props) {
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
validationStateKey
|
|
207
|
-
} = props;
|
|
395
|
+
var inputProps = props.inputProps,
|
|
396
|
+
validationStateKey = props.validationStateKey;
|
|
208
397
|
|
|
209
398
|
// TODO: need to add props that can change during errors in this field
|
|
210
|
-
|
|
399
|
+
var validationAppearanceInputProps = React.useMemo(function () {
|
|
211
400
|
// const resultAppearanceProps = {
|
|
212
401
|
// messageTextColor: props.errorMessageTextColor,
|
|
213
402
|
// messageTextSize: props.errorMessageTextSize,
|
|
@@ -215,24 +404,26 @@ function useValidationAppearanceInputProps(props) {
|
|
|
215
404
|
// // Override appearance(styled) props for child input
|
|
216
405
|
// inputProps: {},
|
|
217
406
|
// }
|
|
218
|
-
|
|
407
|
+
var updatedInputProps = {};
|
|
219
408
|
if (validationStateKey) {
|
|
220
|
-
Object.entries(inputProps || {}).forEach((
|
|
409
|
+
Object.entries(inputProps || {}).forEach(function (_ref) {
|
|
410
|
+
var propKey = _ref[0],
|
|
411
|
+
propValue = _ref[1];
|
|
221
412
|
// Convert the input property key to "snake_case" format.
|
|
222
413
|
// e.g. "requiredBorderColor" -> "required_border_color".
|
|
223
|
-
|
|
414
|
+
var propKeySnake = snakeCase__default.default(propKey);
|
|
224
415
|
// Check if this property is for appearance.
|
|
225
416
|
// Key maybe starts with: "error", "required", "success", etc from validation config.
|
|
226
|
-
|
|
417
|
+
var isPropForValidationState = propKeySnake.startsWith(validationStateKey + "_");
|
|
227
418
|
|
|
228
419
|
// If property is for appearance
|
|
229
420
|
if (isPropForValidationState) {
|
|
230
421
|
// Remove validation state part from begin of property key, to make clean appearance property.
|
|
231
422
|
// e.g. "required_border_color" -> "border_color".
|
|
232
|
-
|
|
423
|
+
var stateTargetKeySnake = propKeySnake.replace(validationStateKey + "_", '');
|
|
233
424
|
// Convert clean appearance property key to "camelCase" format.
|
|
234
425
|
// e.g. "border_color" -> "borderColor"
|
|
235
|
-
|
|
426
|
+
var stateTargetKey = camelCase__default.default(stateTargetKeySnake);
|
|
236
427
|
// And save the value with a new clean property key
|
|
237
428
|
updatedInputProps[stateTargetKey] = propValue;
|
|
238
429
|
// Else if not already added earlier
|
|
@@ -249,7 +440,7 @@ function useValidationAppearanceInputProps(props) {
|
|
|
249
440
|
return validationAppearanceInputProps;
|
|
250
441
|
}
|
|
251
442
|
|
|
252
|
-
|
|
443
|
+
var defaultFieldProps = {
|
|
253
444
|
width: 'fill',
|
|
254
445
|
direction: 'vertical',
|
|
255
446
|
labelTextColor: 'surfaceTextPrimary',
|
|
@@ -260,136 +451,134 @@ const defaultFieldProps = {
|
|
|
260
451
|
requiredMessageTextColor: 'warningTextSecondary',
|
|
261
452
|
showMessage: true
|
|
262
453
|
};
|
|
263
|
-
|
|
454
|
+
var defaultFieldSizeS = Object.assign({
|
|
264
455
|
size: 's',
|
|
265
456
|
labelTextSize: 's',
|
|
266
457
|
messageTextSize: 's',
|
|
267
458
|
errorMessageTextSize: 's',
|
|
268
459
|
helpTextSize: 's',
|
|
269
|
-
requiredMessageTextSize: 's'
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
const defaultFieldSizeM = {
|
|
460
|
+
requiredMessageTextSize: 's'
|
|
461
|
+
}, defaultFieldProps);
|
|
462
|
+
var defaultFieldSizeM = Object.assign({
|
|
273
463
|
size: 'm',
|
|
274
464
|
labelTextSize: 's',
|
|
275
465
|
messageTextSize: 's',
|
|
276
466
|
errorMessageTextSize: 's',
|
|
277
467
|
helpTextSize: 's',
|
|
278
|
-
requiredMessageTextSize: 's'
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
const defaultFieldSizeL = {
|
|
468
|
+
requiredMessageTextSize: 's'
|
|
469
|
+
}, defaultFieldProps);
|
|
470
|
+
var defaultFieldSizeL = Object.assign({
|
|
282
471
|
size: 'l',
|
|
283
472
|
labelTextSize: 's',
|
|
284
473
|
messageTextSize: 's',
|
|
285
474
|
errorMessageTextSize: 's',
|
|
286
475
|
helpTextSize: 's',
|
|
287
|
-
requiredMessageTextSize: 's'
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
const defaultFieldSizeXL = {
|
|
476
|
+
requiredMessageTextSize: 's'
|
|
477
|
+
}, defaultFieldProps);
|
|
478
|
+
var defaultFieldSizeXL = Object.assign({
|
|
291
479
|
size: 'xl',
|
|
292
480
|
labelTextSize: 's',
|
|
293
481
|
messageTextSize: 's',
|
|
294
482
|
errorMessageTextSize: 's',
|
|
295
483
|
helpTextSize: 's',
|
|
296
|
-
requiredMessageTextSize: 's'
|
|
297
|
-
|
|
298
|
-
};
|
|
484
|
+
requiredMessageTextSize: 's'
|
|
485
|
+
}, defaultFieldProps);
|
|
299
486
|
|
|
300
487
|
function FieldWrapperBase(props) {
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
before,
|
|
341
|
-
after,
|
|
342
|
-
isDisabled,
|
|
343
|
-
isErrorState,
|
|
344
|
-
isHidden,
|
|
345
|
-
isRequired,
|
|
346
|
-
isValidState,
|
|
347
|
-
children
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
488
|
+
var id = props.id,
|
|
489
|
+
className = props.className,
|
|
490
|
+
dataTour = props.dataTour,
|
|
491
|
+
type = props.type,
|
|
492
|
+
label = props.label,
|
|
493
|
+
labelHidden = props.labelHidden,
|
|
494
|
+
labelTextColor = props.labelTextColor,
|
|
495
|
+
labelTextSize = props.labelTextSize,
|
|
496
|
+
labelTextSizeMobile = props.labelTextSizeMobile,
|
|
497
|
+
labelTextSizeTablet = props.labelTextSizeTablet,
|
|
498
|
+
labelTextWeight = props.labelTextWeight,
|
|
499
|
+
messageTextSize = props.messageTextSize,
|
|
500
|
+
desc = props.desc,
|
|
501
|
+
descTextColor = props.descTextColor,
|
|
502
|
+
descTextSize = props.descTextSize,
|
|
503
|
+
descTextWeight = props.descTextWeight,
|
|
504
|
+
afterItem = props.afterItem,
|
|
505
|
+
beforeItem = props.beforeItem,
|
|
506
|
+
dividerDirection = props.dividerDirection,
|
|
507
|
+
dividerFill = props.dividerFill,
|
|
508
|
+
dividerSize = props.dividerSize,
|
|
509
|
+
dividerWidth = props.dividerWidth,
|
|
510
|
+
errorKey = props.errorKey,
|
|
511
|
+
errorMessage = props.errorMessage,
|
|
512
|
+
fieldClassName = props.fieldClassName,
|
|
513
|
+
helpText = props.helpText,
|
|
514
|
+
helpTextColor = props.helpTextColor,
|
|
515
|
+
helpTextColorSuccess = props.helpTextColorSuccess,
|
|
516
|
+
helpTextSize = props.helpTextSize,
|
|
517
|
+
helpTextSizeMobile = props.helpTextSizeMobile,
|
|
518
|
+
helpTextWeight = props.helpTextWeight,
|
|
519
|
+
inputName = props.inputName,
|
|
520
|
+
inputValue = props.inputValue,
|
|
521
|
+
metaActive = props.metaActive,
|
|
522
|
+
metaError = props.metaError,
|
|
523
|
+
showDivider = props.showDivider,
|
|
524
|
+
showMessage = props.showMessage,
|
|
525
|
+
_props$tag = props.tag,
|
|
526
|
+
Tag = _props$tag === void 0 ? 'div' : _props$tag,
|
|
527
|
+
before = props.before,
|
|
528
|
+
after = props.after,
|
|
529
|
+
isDisabled = props.isDisabled,
|
|
530
|
+
isErrorState = props.isErrorState,
|
|
531
|
+
isHidden = props.isHidden,
|
|
532
|
+
isRequired = props.isRequired,
|
|
533
|
+
isValidState = props.isValidState,
|
|
534
|
+
children = props.children;
|
|
535
|
+
var formFieldClass = React.useMemo(function () {
|
|
536
|
+
return clsx__default.default(className, isValidState && 'form__item_state_success', isRequired && 'form__item_state_required', isDisabled && 'form__item_state_disabled', metaActive && 'form__item_state_focus', inputValue && 'form__item_state_filled', isErrorState && "form__item_state_" + errorKey);
|
|
537
|
+
}, [className, isErrorState, isValidState, isRequired, metaActive, inputValue, isDisabled, metaError]);
|
|
538
|
+
var fieldClass = React.useMemo(function () {
|
|
539
|
+
return clsx__default.default(fieldClassName, isValidState && fieldClassName + "_state_success", metaActive && fieldClassName + "_state_focus", inputValue && fieldClassName + "_state_filled", isDisabled && fieldClassName + "_state_disabled", isErrorState && fieldClassName + "_state_" + errorKey);
|
|
540
|
+
}, [fieldClassName, isErrorState, isValidState, metaActive, inputValue, isDisabled, metaError]);
|
|
541
|
+
var sizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
|
|
352
542
|
prefix: 'form-field_size_',
|
|
353
543
|
propsKey: 'size'
|
|
354
544
|
});
|
|
355
|
-
|
|
545
|
+
var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
|
|
356
546
|
prefix: 'fill_',
|
|
357
547
|
propsKey: 'fill'
|
|
358
548
|
});
|
|
359
|
-
|
|
549
|
+
var inputFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
|
|
360
550
|
prefix: 'fill_',
|
|
361
551
|
propsKey: 'inputFill'
|
|
362
552
|
});
|
|
363
|
-
|
|
553
|
+
var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
|
|
364
554
|
prefix: 'form-field_shape_',
|
|
365
555
|
propsKey: 'shape'
|
|
366
556
|
});
|
|
367
|
-
|
|
557
|
+
var inputShapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
|
|
368
558
|
prefix: 'form-field__item-value_shape_',
|
|
369
559
|
propsKey: 'inputShape'
|
|
370
560
|
});
|
|
371
|
-
|
|
561
|
+
var directionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
|
|
372
562
|
prefix: 'direction_',
|
|
373
563
|
propsKey: 'direction'
|
|
374
564
|
});
|
|
375
|
-
|
|
565
|
+
var widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
|
|
376
566
|
prefix: 'width_',
|
|
377
567
|
propsKey: 'width'
|
|
378
568
|
});
|
|
379
|
-
|
|
380
|
-
styles
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
const errorTextWeight = props[`${errorKey}MessageTextWeight`];
|
|
569
|
+
var _useStyles = useStyles.useStyles(props),
|
|
570
|
+
formFieldStyles = _useStyles.styles;
|
|
571
|
+
var errorTextSize = props[errorKey + "MessageTextSize"];
|
|
572
|
+
var errorTextColor = props[errorKey + "MessageTextColor"];
|
|
573
|
+
var errorTextWeight = props[errorKey + "MessageTextWeight"];
|
|
385
574
|
return /*#__PURE__*/React__default.default.createElement(Tag, {
|
|
386
|
-
className: clsx__default.default(formFieldClass, 'form__item', 'form-field', type &&
|
|
387
|
-
"data-testid":
|
|
575
|
+
className: clsx__default.default(formFieldClass, 'form__item', 'form-field', type && "form-field_type_" + type, sizeClass, fillClass, shapeClass, isDisabled && "form-field_state_disabled", isHidden && "form-field_state_hidden", directionClass, widthClass),
|
|
576
|
+
"data-testid": inputName + "-field",
|
|
388
577
|
"data-tour": dataTour,
|
|
389
578
|
style: formFieldStyles
|
|
390
579
|
}, before, (label || labelHidden) && /*#__PURE__*/React__default.default.createElement("div", {
|
|
391
580
|
className: clsx__default.default('form-field__label'),
|
|
392
|
-
"data-testid":
|
|
581
|
+
"data-testid": inputName + "-field-label",
|
|
393
582
|
htmlFor: id
|
|
394
583
|
}, /*#__PURE__*/React__default.default.createElement(Text.Text, {
|
|
395
584
|
size: labelTextSize,
|
|
@@ -397,9 +586,9 @@ function FieldWrapperBase(props) {
|
|
|
397
586
|
textWeight: labelTextWeight,
|
|
398
587
|
sizeMobile: labelTextSizeMobile,
|
|
399
588
|
sizeTablet: labelTextSizeTablet
|
|
400
|
-
}, label, labelHidden &&
|
|
589
|
+
}, label, labelHidden && "\xA0")), desc && /*#__PURE__*/React__default.default.createElement("div", {
|
|
401
590
|
className: "form-field__desc",
|
|
402
|
-
"data-testid":
|
|
591
|
+
"data-testid": inputName + "-field-desc"
|
|
403
592
|
}, /*#__PURE__*/React__default.default.createElement(Text.Text, {
|
|
404
593
|
size: descTextSize,
|
|
405
594
|
textColor: descTextColor,
|
|
@@ -416,63 +605,59 @@ function FieldWrapperBase(props) {
|
|
|
416
605
|
fill: dividerFill
|
|
417
606
|
})), showMessage && /*#__PURE__*/React__default.default.createElement("div", {
|
|
418
607
|
className: "form-field__message",
|
|
419
|
-
"data-testid":
|
|
608
|
+
"data-testid": inputName + "-field-message"
|
|
420
609
|
}, isErrorState && errorMessage && /*#__PURE__*/React__default.default.createElement(Text.Text, {
|
|
421
|
-
id:
|
|
610
|
+
id: inputName + "-error",
|
|
422
611
|
className: "form-field__message-item form-field__message-item_type-error",
|
|
423
|
-
dataTestId:
|
|
612
|
+
dataTestId: inputName + "-field-message-error",
|
|
424
613
|
size: errorTextSize,
|
|
425
614
|
textColor: errorTextColor,
|
|
426
615
|
textWeight: errorTextWeight
|
|
427
616
|
}, errorMessage), Boolean(helpText) && (!isErrorState || !errorMessage) && /*#__PURE__*/React__default.default.createElement(Text.Text, {
|
|
428
617
|
className: "form-field__message-item form-field__message-item_type_help-text",
|
|
429
|
-
dataTestId:
|
|
618
|
+
dataTestId: inputName + "-field-message-help-text",
|
|
430
619
|
size: helpTextSize,
|
|
431
620
|
textColor: isValidState ? helpTextColorSuccess : helpTextColor,
|
|
432
621
|
textWeight: helpTextWeight,
|
|
433
622
|
sizeMobile: helpTextSizeMobile
|
|
434
623
|
}, helpText), (!isErrorState && !helpText || isErrorState && !helpText && !errorMessage) && /*#__PURE__*/React__default.default.createElement(Text.Text, {
|
|
435
624
|
className: "form-field__message-item form-field__message-item_type_help-text",
|
|
436
|
-
dataTestId:
|
|
625
|
+
dataTestId: inputName + "field-message-help-text",
|
|
437
626
|
size: messageTextSize
|
|
438
|
-
},
|
|
627
|
+
}, "\xA0")), after);
|
|
439
628
|
}
|
|
440
629
|
function FieldWrapper(props) {
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
React.useEffect(() => {
|
|
449
|
-
return () => {
|
|
630
|
+
var inputName = props.inputName;
|
|
631
|
+
var _useForm = reactFinalForm.useForm(),
|
|
632
|
+
change = _useForm.change; // , mutators
|
|
633
|
+
|
|
634
|
+
React.useEffect(function () {
|
|
635
|
+
return function () {
|
|
450
636
|
change(inputName, undefined);
|
|
451
637
|
};
|
|
452
638
|
}, []);
|
|
453
639
|
return /*#__PURE__*/React__default.default.createElement(FieldWrapperBase, props);
|
|
454
640
|
}
|
|
455
641
|
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
fieldProps = {},
|
|
463
|
-
inputProps =
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
642
|
+
var FormFieldCheckbox = /*#__PURE__*/React__default.default.memo(function FormFieldCheckbox(props) {
|
|
643
|
+
var name = props.name,
|
|
644
|
+
initialValue = props.initialValue,
|
|
645
|
+
isDisabled = props.isDisabled,
|
|
646
|
+
classNameGroupItem = props.classNameGroupItem,
|
|
647
|
+
_props$fieldProps = props.fieldProps,
|
|
648
|
+
fieldProps = _props$fieldProps === void 0 ? {} : _props$fieldProps,
|
|
649
|
+
_props$inputProps = props.inputProps,
|
|
650
|
+
inputProps = _props$inputProps === void 0 ? {} : _props$inputProps,
|
|
651
|
+
showMessage = props.showMessage,
|
|
652
|
+
isRequired = props.isRequired,
|
|
653
|
+
onChange = props.onChange;
|
|
468
654
|
return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Field, {
|
|
469
655
|
type: "checkbox",
|
|
470
656
|
name: name,
|
|
471
657
|
initialValue: initialValue
|
|
472
|
-
}, function Render({
|
|
473
|
-
input,
|
|
474
|
-
|
|
475
|
-
}) {
|
|
658
|
+
}, function Render(_ref) {
|
|
659
|
+
var input = _ref.input,
|
|
660
|
+
meta = _ref.meta;
|
|
476
661
|
/** Note:
|
|
477
662
|
* Create "Render" function by "eslint-react-hooks/rules-of-hooks":
|
|
478
663
|
* React Hooks cannot be called inside a callback.
|
|
@@ -480,24 +665,23 @@ const FormFieldCheckbox = /*#__PURE__*/React__default.default.memo(function Form
|
|
|
480
665
|
* custom React Hook function.
|
|
481
666
|
*/
|
|
482
667
|
|
|
483
|
-
|
|
668
|
+
var onChangeField = React.useCallback(function (event) {
|
|
484
669
|
input.onChange(event);
|
|
485
670
|
if (onChange) {
|
|
486
671
|
onChange(event.target.checked, input.name);
|
|
487
672
|
}
|
|
488
673
|
}, [onChange, input.onChange]);
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
const updatedInputProps = useValidationAppearanceInputProps({
|
|
674
|
+
var _useFieldValidationSt = useFieldValidationState({
|
|
675
|
+
fieldProps: fieldProps,
|
|
676
|
+
input: input,
|
|
677
|
+
meta: meta
|
|
678
|
+
}),
|
|
679
|
+
errorKey = _useFieldValidationSt.errorKey,
|
|
680
|
+
errorMessage = _useFieldValidationSt.errorMessage,
|
|
681
|
+
isErrorState = _useFieldValidationSt.isErrorState,
|
|
682
|
+
successKey = _useFieldValidationSt.successKey,
|
|
683
|
+
isValidState = _useFieldValidationSt.isValidState;
|
|
684
|
+
var updatedInputProps = useValidationAppearanceInputProps({
|
|
501
685
|
inputProps: inputProps,
|
|
502
686
|
validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
|
|
503
687
|
});
|
|
@@ -530,7 +714,7 @@ const FormFieldCheckbox = /*#__PURE__*/React__default.default.memo(function Form
|
|
|
530
714
|
});
|
|
531
715
|
});
|
|
532
716
|
|
|
533
|
-
|
|
717
|
+
var defaultChipsProps = {
|
|
534
718
|
appearance: 'surfacePrimary sizeM rounded',
|
|
535
719
|
width: 'fill',
|
|
536
720
|
// useValidationAppearanceInputProps
|
|
@@ -543,32 +727,31 @@ const defaultChipsProps = {
|
|
|
543
727
|
};
|
|
544
728
|
|
|
545
729
|
function FormFieldChips(props) {
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
const {
|
|
562
|
-
change
|
|
563
|
-
} = reactFinalForm.useForm();
|
|
730
|
+
var name = props.name,
|
|
731
|
+
initialValue = props.initialValue,
|
|
732
|
+
classNameGroupItem = props.classNameGroupItem,
|
|
733
|
+
emptyMessage = props.emptyMessage,
|
|
734
|
+
emptyMessageTextColor = props.emptyMessageTextColor,
|
|
735
|
+
emptyMessageTextSize = props.emptyMessageTextSize,
|
|
736
|
+
fieldProps = props.fieldProps,
|
|
737
|
+
inputProps = props.inputProps,
|
|
738
|
+
options = props.options,
|
|
739
|
+
showMessage = props.showMessage,
|
|
740
|
+
isDisabled = props.isDisabled,
|
|
741
|
+
isRequired = props.isRequired,
|
|
742
|
+
onChange = props.onChange;
|
|
743
|
+
var _useForm = reactFinalForm.useForm(),
|
|
744
|
+
change = _useForm.change;
|
|
564
745
|
|
|
565
746
|
// Callback for value changes
|
|
566
|
-
|
|
567
|
-
|
|
747
|
+
var onChangeSomeInput = React.useCallback(function (inputValue, newOptionValue) {
|
|
748
|
+
var updatedValues = inputValue.includes(newOptionValue) ? inputValue.filter(function (selectedValue) {
|
|
749
|
+
return selectedValue !== newOptionValue;
|
|
750
|
+
}) : [].concat(inputValue, [newOptionValue]);
|
|
568
751
|
change(name, updatedValues);
|
|
569
752
|
onChange && onChange(updatedValues);
|
|
570
753
|
}, [change, name, onChange]);
|
|
571
|
-
React.useEffect(()
|
|
754
|
+
React.useEffect(function () {
|
|
572
755
|
initialValue && change(name, initialValue);
|
|
573
756
|
// update the form value only when the initialValue changes, so use disable eslint to ignore the warning
|
|
574
757
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
@@ -576,32 +759,33 @@ function FormFieldChips(props) {
|
|
|
576
759
|
return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Field, {
|
|
577
760
|
name: name,
|
|
578
761
|
initialValue: initialValue
|
|
579
|
-
}, function Render({
|
|
580
|
-
input,
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
});
|
|
594
|
-
const updatedInputProps = useValidationAppearanceInputProps({
|
|
762
|
+
}, function Render(_ref) {
|
|
763
|
+
var input = _ref.input,
|
|
764
|
+
meta = _ref.meta;
|
|
765
|
+
var _useFieldValidationSt = useFieldValidationState({
|
|
766
|
+
fieldProps: fieldProps,
|
|
767
|
+
input: input,
|
|
768
|
+
meta: meta
|
|
769
|
+
}),
|
|
770
|
+
errorKey = _useFieldValidationSt.errorKey,
|
|
771
|
+
errorMessage = _useFieldValidationSt.errorMessage,
|
|
772
|
+
successKey = _useFieldValidationSt.successKey,
|
|
773
|
+
isErrorState = _useFieldValidationSt.isErrorState,
|
|
774
|
+
isValidState = _useFieldValidationSt.isValidState;
|
|
775
|
+
var updatedInputProps = useValidationAppearanceInputProps({
|
|
595
776
|
inputProps: inputProps,
|
|
596
777
|
validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
|
|
597
778
|
});
|
|
598
|
-
|
|
599
|
-
|
|
779
|
+
var activeOptionsList = React.useMemo(function () {
|
|
780
|
+
var emptyOptionsList = [{
|
|
600
781
|
label: null,
|
|
601
782
|
value: null
|
|
602
783
|
}];
|
|
603
|
-
if (input
|
|
604
|
-
|
|
784
|
+
if (input != null && input.value) {
|
|
785
|
+
var currentOptions = options.filter(function (option) {
|
|
786
|
+
var _input$value;
|
|
787
|
+
return (_input$value = input.value) == null ? void 0 : _input$value.includes(option.value);
|
|
788
|
+
});
|
|
605
789
|
return currentOptions || emptyOptionsList;
|
|
606
790
|
}
|
|
607
791
|
return emptyOptionsList;
|
|
@@ -624,22 +808,28 @@ function FormFieldChips(props) {
|
|
|
624
808
|
direction: "horizontal",
|
|
625
809
|
gap: "1m",
|
|
626
810
|
wrap: "wrap"
|
|
627
|
-
}, options.map(
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
811
|
+
}, options.map(function (option) {
|
|
812
|
+
return /*#__PURE__*/React__default.default.createElement(Chips.Chips, Object.assign({
|
|
813
|
+
className: clsx__default.default(meta.active && 'form-chips_state_focus', meta.error && meta.touched && "form-chips_state_" + errorKey),
|
|
814
|
+
key: option.value,
|
|
815
|
+
label: option.label,
|
|
816
|
+
value: option.value,
|
|
817
|
+
isActive: activeOptionsList.some(function (activeOption) {
|
|
818
|
+
return activeOption.value === option.value;
|
|
819
|
+
}),
|
|
820
|
+
isDisabled: option.isDisabled,
|
|
821
|
+
onClick: function onClick() {
|
|
822
|
+
return onChangeSomeInput(input.value, option.value);
|
|
823
|
+
}
|
|
824
|
+
}, updatedInputProps));
|
|
825
|
+
})) : /*#__PURE__*/React__default.default.createElement(Text.Text, {
|
|
636
826
|
size: emptyMessageTextSize,
|
|
637
827
|
textColor: emptyMessageTextColor
|
|
638
828
|
}, emptyMessage));
|
|
639
829
|
});
|
|
640
830
|
}
|
|
641
831
|
|
|
642
|
-
|
|
832
|
+
var defaultChoiceProps = {
|
|
643
833
|
appearance: 'defaultPrimary sizeM solid rounded',
|
|
644
834
|
width: 'fill',
|
|
645
835
|
// useValidationAppearanceInputProps
|
|
@@ -649,27 +839,24 @@ const defaultChoiceProps = {
|
|
|
649
839
|
requiredAppearance: 'requirePrimary sizeM solid rounded'
|
|
650
840
|
};
|
|
651
841
|
|
|
652
|
-
|
|
653
|
-
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
|
|
662
|
-
|
|
663
|
-
|
|
664
|
-
|
|
665
|
-
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
|
|
669
|
-
|
|
670
|
-
change
|
|
671
|
-
} = reactFinalForm.useForm();
|
|
672
|
-
const setActiveSegment = React.useCallback((option, isChecked) => {
|
|
842
|
+
var FormFieldChoice = /*#__PURE__*/React__default.default.memo(function FormFieldChoice(props) {
|
|
843
|
+
var name = props.name,
|
|
844
|
+
initialValue = props.initialValue,
|
|
845
|
+
label = props.label,
|
|
846
|
+
messageType = props.messageType,
|
|
847
|
+
isDisabled = props.isDisabled,
|
|
848
|
+
classNameGroupItem = props.classNameGroupItem,
|
|
849
|
+
fieldProps = props.fieldProps,
|
|
850
|
+
inputProps = props.inputProps,
|
|
851
|
+
options = props.options,
|
|
852
|
+
placeholder = props.placeholder,
|
|
853
|
+
showMessage = props.showMessage,
|
|
854
|
+
isCheckbox = props.isCheckbox,
|
|
855
|
+
isRequired = props.isRequired,
|
|
856
|
+
onChange = props.onChange;
|
|
857
|
+
var _useForm = reactFinalForm.useForm(),
|
|
858
|
+
change = _useForm.change;
|
|
859
|
+
var setActiveSegment = React.useCallback(function (option, isChecked) {
|
|
673
860
|
change(name, isChecked && option.value);
|
|
674
861
|
if (onChange) {
|
|
675
862
|
onChange(option.value, name, isChecked);
|
|
@@ -678,39 +865,39 @@ const FormFieldChoice = /*#__PURE__*/React__default.default.memo(function FormFi
|
|
|
678
865
|
return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Field, {
|
|
679
866
|
initialValue: initialValue,
|
|
680
867
|
name: name
|
|
681
|
-
}, function Render({
|
|
682
|
-
input,
|
|
683
|
-
|
|
684
|
-
}) {
|
|
868
|
+
}, function Render(_ref) {
|
|
869
|
+
var input = _ref.input,
|
|
870
|
+
meta = _ref.meta;
|
|
685
871
|
/** Note:
|
|
686
872
|
* Create "Render" function by "eslint-react-hooks/rules-of-hooks":
|
|
687
873
|
* React Hooks cannot be called inside a callback.
|
|
688
874
|
* React Hooks must be called in a React function component or a
|
|
689
875
|
* custom React Hook function.
|
|
690
876
|
*/
|
|
691
|
-
|
|
692
|
-
|
|
877
|
+
var activeOption = React.useMemo(function () {
|
|
878
|
+
var emptyOption = {
|
|
693
879
|
value: null,
|
|
694
880
|
label: null
|
|
695
881
|
};
|
|
696
882
|
if (input.value) {
|
|
697
|
-
|
|
883
|
+
var currentOption = options.find(function (option) {
|
|
884
|
+
return option.value === input.value;
|
|
885
|
+
});
|
|
698
886
|
return currentOption || emptyOption;
|
|
699
887
|
}
|
|
700
888
|
return emptyOption;
|
|
701
889
|
}, [input.value]);
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
|
|
706
|
-
|
|
707
|
-
|
|
708
|
-
|
|
709
|
-
|
|
710
|
-
|
|
711
|
-
|
|
712
|
-
|
|
713
|
-
const updatedInputProps = useValidationAppearanceInputProps({
|
|
890
|
+
var _useFieldValidationSt = useFieldValidationState({
|
|
891
|
+
fieldProps: fieldProps,
|
|
892
|
+
input: input,
|
|
893
|
+
meta: meta
|
|
894
|
+
}),
|
|
895
|
+
errorKey = _useFieldValidationSt.errorKey,
|
|
896
|
+
errorMessage = _useFieldValidationSt.errorMessage,
|
|
897
|
+
isErrorState = _useFieldValidationSt.isErrorState,
|
|
898
|
+
successKey = _useFieldValidationSt.successKey,
|
|
899
|
+
isValidState = _useFieldValidationSt.isValidState;
|
|
900
|
+
var updatedInputProps = useValidationAppearanceInputProps({
|
|
714
901
|
inputProps: inputProps,
|
|
715
902
|
validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
|
|
716
903
|
});
|
|
@@ -731,7 +918,7 @@ const FormFieldChoice = /*#__PURE__*/React__default.default.memo(function FormFi
|
|
|
731
918
|
isRequired: isRequired,
|
|
732
919
|
isValidState: isValidState
|
|
733
920
|
}, fieldProps), /*#__PURE__*/React__default.default.createElement(Choice.Choice, Object.assign({
|
|
734
|
-
className: clsx__default.default(meta.active && 'form-choice_state_focus', meta.error && meta.touched &&
|
|
921
|
+
className: clsx__default.default(meta.active && 'form-choice_state_focus', meta.error && meta.touched && "form-choice_state_" + errorKey),
|
|
735
922
|
name: input.name,
|
|
736
923
|
isDisabled: isDisabled,
|
|
737
924
|
active: activeOption,
|
|
@@ -745,7 +932,7 @@ const FormFieldChoice = /*#__PURE__*/React__default.default.memo(function FormFi
|
|
|
745
932
|
});
|
|
746
933
|
});
|
|
747
934
|
|
|
748
|
-
|
|
935
|
+
var defaultCodeProps = {
|
|
749
936
|
appearance: 'defaultPrimary sizeL solid rounded',
|
|
750
937
|
// useValidationAppearanceInputProps
|
|
751
938
|
// Error
|
|
@@ -754,26 +941,25 @@ const defaultCodeProps = {
|
|
|
754
941
|
requiredAppearance: 'requirePrimary sizeM solid rounded'
|
|
755
942
|
};
|
|
756
943
|
|
|
757
|
-
|
|
758
|
-
|
|
759
|
-
|
|
760
|
-
|
|
761
|
-
|
|
762
|
-
|
|
763
|
-
|
|
764
|
-
|
|
765
|
-
fieldProps = {},
|
|
766
|
-
inputProps =
|
|
767
|
-
|
|
768
|
-
|
|
769
|
-
|
|
944
|
+
var FormFieldCode = /*#__PURE__*/React__default.default.memo(function FormFieldCode(props) {
|
|
945
|
+
var name = props.name,
|
|
946
|
+
initialValue = props.initialValue,
|
|
947
|
+
label = props.label,
|
|
948
|
+
messageType = props.messageType,
|
|
949
|
+
isDisabled = props.isDisabled,
|
|
950
|
+
classNameGroupItem = props.classNameGroupItem,
|
|
951
|
+
_props$fieldProps = props.fieldProps,
|
|
952
|
+
fieldProps = _props$fieldProps === void 0 ? {} : _props$fieldProps,
|
|
953
|
+
_props$inputProps = props.inputProps,
|
|
954
|
+
inputProps = _props$inputProps === void 0 ? {} : _props$inputProps,
|
|
955
|
+
showMessage = props.showMessage,
|
|
956
|
+
isRequired = props.isRequired;
|
|
770
957
|
return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Field, {
|
|
771
958
|
name: name,
|
|
772
959
|
initialValue: initialValue
|
|
773
|
-
}, function Render({
|
|
774
|
-
input,
|
|
775
|
-
|
|
776
|
-
}) {
|
|
960
|
+
}, function Render(_ref) {
|
|
961
|
+
var input = _ref.input,
|
|
962
|
+
meta = _ref.meta;
|
|
777
963
|
/** Note:
|
|
778
964
|
* Create "Render" function by "eslint-react-hooks/rules-of-hooks":
|
|
779
965
|
* React Hooks cannot be called inside a callback.
|
|
@@ -781,18 +967,17 @@ const FormFieldCode = /*#__PURE__*/React__default.default.memo(function FormFiel
|
|
|
781
967
|
* custom React Hook function.
|
|
782
968
|
*/
|
|
783
969
|
|
|
784
|
-
|
|
785
|
-
|
|
786
|
-
|
|
787
|
-
|
|
788
|
-
|
|
789
|
-
|
|
790
|
-
|
|
791
|
-
|
|
792
|
-
|
|
793
|
-
|
|
794
|
-
|
|
795
|
-
const updatedInputProps = useValidationAppearanceInputProps({
|
|
970
|
+
var _useFieldValidationSt = useFieldValidationState({
|
|
971
|
+
fieldProps: fieldProps,
|
|
972
|
+
input: input,
|
|
973
|
+
meta: meta
|
|
974
|
+
}),
|
|
975
|
+
errorKey = _useFieldValidationSt.errorKey,
|
|
976
|
+
errorMessage = _useFieldValidationSt.errorMessage,
|
|
977
|
+
isErrorState = _useFieldValidationSt.isErrorState,
|
|
978
|
+
successKey = _useFieldValidationSt.successKey,
|
|
979
|
+
isValidState = _useFieldValidationSt.isValidState;
|
|
980
|
+
var updatedInputProps = useValidationAppearanceInputProps({
|
|
796
981
|
inputProps: inputProps,
|
|
797
982
|
validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
|
|
798
983
|
});
|
|
@@ -822,30 +1007,28 @@ const FormFieldCode = /*#__PURE__*/React__default.default.memo(function FormFiel
|
|
|
822
1007
|
});
|
|
823
1008
|
});
|
|
824
1009
|
|
|
825
|
-
|
|
826
|
-
|
|
827
|
-
|
|
828
|
-
|
|
829
|
-
|
|
830
|
-
|
|
831
|
-
|
|
832
|
-
fieldProps = {},
|
|
833
|
-
classNameGroupItem,
|
|
834
|
-
showMessage,
|
|
835
|
-
clearIcon,
|
|
836
|
-
clearIconFill,
|
|
837
|
-
clearIconFillHover,
|
|
838
|
-
clearIconShape,
|
|
839
|
-
clearIconSize,
|
|
840
|
-
onClickClearIcon
|
|
841
|
-
} = props;
|
|
1010
|
+
var FormFieldCustom = /*#__PURE__*/React__default.default.memo(function FormFieldCustom(props) {
|
|
1011
|
+
var Component = props.Component,
|
|
1012
|
+
isDisabled = props.isDisabled,
|
|
1013
|
+
isRequired = props.isRequired,
|
|
1014
|
+
name = props.name,
|
|
1015
|
+
initialValue = props.initialValue,
|
|
1016
|
+
_props$fieldProps = props.fieldProps,
|
|
1017
|
+
fieldProps = _props$fieldProps === void 0 ? {} : _props$fieldProps,
|
|
1018
|
+
classNameGroupItem = props.classNameGroupItem,
|
|
1019
|
+
showMessage = props.showMessage,
|
|
1020
|
+
clearIcon = props.clearIcon,
|
|
1021
|
+
clearIconFill = props.clearIconFill,
|
|
1022
|
+
clearIconFillHover = props.clearIconFillHover,
|
|
1023
|
+
clearIconShape = props.clearIconShape,
|
|
1024
|
+
clearIconSize = props.clearIconSize,
|
|
1025
|
+
onClickClearIcon = props.onClickClearIcon;
|
|
842
1026
|
return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Field, {
|
|
843
1027
|
initialValue: initialValue,
|
|
844
1028
|
name: name
|
|
845
|
-
}, function Render({
|
|
846
|
-
input,
|
|
847
|
-
|
|
848
|
-
}) {
|
|
1029
|
+
}, function Render(_ref) {
|
|
1030
|
+
var input = _ref.input,
|
|
1031
|
+
meta = _ref.meta;
|
|
849
1032
|
/** Note:
|
|
850
1033
|
* Create "Render" function by "eslint-react-hooks/rules-of-hooks":
|
|
851
1034
|
* React Hooks cannot be called inside a callback.
|
|
@@ -853,17 +1036,16 @@ const FormFieldCustom = /*#__PURE__*/React__default.default.memo(function FormFi
|
|
|
853
1036
|
* custom React Hook function.
|
|
854
1037
|
*/
|
|
855
1038
|
|
|
856
|
-
|
|
857
|
-
|
|
858
|
-
|
|
859
|
-
|
|
860
|
-
|
|
861
|
-
|
|
862
|
-
|
|
863
|
-
|
|
864
|
-
|
|
865
|
-
|
|
866
|
-
const updatedInputProps = useValidationAppearanceInputProps({
|
|
1039
|
+
var _useFieldValidationSt = useFieldValidationState({
|
|
1040
|
+
fieldProps: fieldProps,
|
|
1041
|
+
input: input,
|
|
1042
|
+
meta: meta
|
|
1043
|
+
}),
|
|
1044
|
+
isErrorState = _useFieldValidationSt.isErrorState,
|
|
1045
|
+
isValidState = _useFieldValidationSt.isValidState,
|
|
1046
|
+
errorKey = _useFieldValidationSt.errorKey,
|
|
1047
|
+
errorMessage = _useFieldValidationSt.errorMessage;
|
|
1048
|
+
var updatedInputProps = useValidationAppearanceInputProps({
|
|
867
1049
|
validationStateKey: isErrorState ? errorKey : 'success',
|
|
868
1050
|
// For "Custom" field we pass all props. Can contain some special props, we don't known.
|
|
869
1051
|
inputProps: props
|
|
@@ -899,7 +1081,7 @@ const FormFieldCustom = /*#__PURE__*/React__default.default.memo(function FormFi
|
|
|
899
1081
|
});
|
|
900
1082
|
});
|
|
901
1083
|
|
|
902
|
-
|
|
1084
|
+
var defaultDadataInputProps = {
|
|
903
1085
|
appearance: 'defaultPrimary sizeM solid rounded',
|
|
904
1086
|
// useValidationAppearanceInputProps
|
|
905
1087
|
// Error
|
|
@@ -910,39 +1092,36 @@ const defaultDadataInputProps = {
|
|
|
910
1092
|
requiredAppearance: 'requirePrimary sizeM solid rounded'
|
|
911
1093
|
};
|
|
912
1094
|
|
|
913
|
-
|
|
914
|
-
|
|
915
|
-
|
|
916
|
-
|
|
917
|
-
|
|
918
|
-
|
|
919
|
-
|
|
920
|
-
|
|
921
|
-
|
|
922
|
-
|
|
923
|
-
|
|
924
|
-
|
|
925
|
-
onDadataAutocomplete
|
|
926
|
-
} = props;
|
|
1095
|
+
var FormFieldDadataInput = /*#__PURE__*/React__default.default.memo(function FormFieldDadataInput(props) {
|
|
1096
|
+
var name = props.name,
|
|
1097
|
+
initialValue = props.initialValue,
|
|
1098
|
+
isDisabled = props.isDisabled,
|
|
1099
|
+
classNameGroupItem = props.classNameGroupItem,
|
|
1100
|
+
fieldProps = props.fieldProps,
|
|
1101
|
+
inputProps = props.inputProps,
|
|
1102
|
+
parse = props.parse,
|
|
1103
|
+
showMessage = props.showMessage,
|
|
1104
|
+
token = props.token,
|
|
1105
|
+
isRequired = props.isRequired,
|
|
1106
|
+
onDadataAutocomplete = props.onDadataAutocomplete;
|
|
927
1107
|
if (process.env.NODE_ENV === 'development') {
|
|
928
|
-
|
|
1108
|
+
var hint = "Check your form config at field \"" + name + "\".";
|
|
929
1109
|
if (!token) {
|
|
930
|
-
|
|
1110
|
+
var message = "FormFieldDadataInput: 'token' prop is missing, instead got " + token + ".";
|
|
931
1111
|
throw new Error(message + '\n' + hint);
|
|
932
1112
|
}
|
|
933
1113
|
if (!onDadataAutocomplete) {
|
|
934
|
-
|
|
935
|
-
throw new Error(
|
|
1114
|
+
var _message = "FormFieldDadataInput: 'onDadataAutocomplete' prop is missing, instead got " + onDadataAutocomplete + ".";
|
|
1115
|
+
throw new Error(_message + '\n' + hint);
|
|
936
1116
|
}
|
|
937
1117
|
}
|
|
938
1118
|
return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Field, {
|
|
939
1119
|
name: name,
|
|
940
1120
|
initialValue: initialValue,
|
|
941
1121
|
parse: parse
|
|
942
|
-
}, function Render({
|
|
943
|
-
input,
|
|
944
|
-
|
|
945
|
-
}) {
|
|
1122
|
+
}, function Render(_ref) {
|
|
1123
|
+
var input = _ref.input,
|
|
1124
|
+
meta = _ref.meta;
|
|
946
1125
|
/** Note:
|
|
947
1126
|
* Create "Render" function by "eslint-react-hooks/rules-of-hooks":
|
|
948
1127
|
* React Hooks cannot be called inside a callback.
|
|
@@ -950,18 +1129,17 @@ const FormFieldDadataInput = /*#__PURE__*/React__default.default.memo(function F
|
|
|
950
1129
|
* custom React Hook function.
|
|
951
1130
|
*/
|
|
952
1131
|
|
|
953
|
-
|
|
954
|
-
|
|
955
|
-
|
|
956
|
-
|
|
957
|
-
|
|
958
|
-
|
|
959
|
-
|
|
960
|
-
|
|
961
|
-
|
|
962
|
-
|
|
963
|
-
|
|
964
|
-
const updatedInputProps = useValidationAppearanceInputProps({
|
|
1132
|
+
var _useFieldValidationSt = useFieldValidationState({
|
|
1133
|
+
fieldProps: fieldProps,
|
|
1134
|
+
input: input,
|
|
1135
|
+
meta: meta
|
|
1136
|
+
}),
|
|
1137
|
+
errorKey = _useFieldValidationSt.errorKey,
|
|
1138
|
+
errorMessage = _useFieldValidationSt.errorMessage,
|
|
1139
|
+
isErrorState = _useFieldValidationSt.isErrorState,
|
|
1140
|
+
successKey = _useFieldValidationSt.successKey,
|
|
1141
|
+
isValidState = _useFieldValidationSt.isValidState;
|
|
1142
|
+
var updatedInputProps = useValidationAppearanceInputProps({
|
|
965
1143
|
inputProps: inputProps,
|
|
966
1144
|
validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
|
|
967
1145
|
});
|
|
@@ -995,7 +1173,7 @@ const FormFieldDadataInput = /*#__PURE__*/React__default.default.memo(function F
|
|
|
995
1173
|
});
|
|
996
1174
|
});
|
|
997
1175
|
|
|
998
|
-
|
|
1176
|
+
var defaultDatepickerProps = {
|
|
999
1177
|
appearance: 'surfacePrimary sizeS',
|
|
1000
1178
|
dateFormat: 'dd/MM/yyyy - HH:mm',
|
|
1001
1179
|
readOnly: false,
|
|
@@ -1009,23 +1187,22 @@ const defaultDatepickerProps = {
|
|
|
1009
1187
|
};
|
|
1010
1188
|
|
|
1011
1189
|
function FormFieldDatePicker(props) {
|
|
1012
|
-
|
|
1013
|
-
|
|
1014
|
-
|
|
1015
|
-
|
|
1016
|
-
|
|
1017
|
-
fieldProps = {},
|
|
1018
|
-
inputProps =
|
|
1019
|
-
|
|
1020
|
-
|
|
1021
|
-
|
|
1022
|
-
|
|
1190
|
+
var name = props.name,
|
|
1191
|
+
isDisabled = props.isDisabled,
|
|
1192
|
+
classNameGroupItem = props.classNameGroupItem,
|
|
1193
|
+
datePickerProps = props.datePickerProps,
|
|
1194
|
+
_props$fieldProps = props.fieldProps,
|
|
1195
|
+
fieldProps = _props$fieldProps === void 0 ? {} : _props$fieldProps,
|
|
1196
|
+
_props$inputProps = props.inputProps,
|
|
1197
|
+
inputProps = _props$inputProps === void 0 ? {} : _props$inputProps,
|
|
1198
|
+
showMessage = props.showMessage,
|
|
1199
|
+
isRequired = props.isRequired,
|
|
1200
|
+
onChange = props.onChange;
|
|
1023
1201
|
return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Field, {
|
|
1024
1202
|
name: name
|
|
1025
|
-
}, function Render({
|
|
1026
|
-
input,
|
|
1027
|
-
|
|
1028
|
-
}) {
|
|
1203
|
+
}, function Render(_ref) {
|
|
1204
|
+
var input = _ref.input,
|
|
1205
|
+
meta = _ref.meta;
|
|
1029
1206
|
/** Note:
|
|
1030
1207
|
* Create "Render" function by "eslint-react-hooks/rules-of-hooks":
|
|
1031
1208
|
* React Hooks cannot be called inside a callback.
|
|
@@ -1033,7 +1210,7 @@ function FormFieldDatePicker(props) {
|
|
|
1033
1210
|
* custom React Hook function.
|
|
1034
1211
|
*/
|
|
1035
1212
|
|
|
1036
|
-
|
|
1213
|
+
var onChangeField = React.useCallback(function (startDate, endDate) {
|
|
1037
1214
|
if (!datePickerProps.selectsRange) {
|
|
1038
1215
|
// When we need to save single date, value is date
|
|
1039
1216
|
// TODO: make object with one date? need to check all forms with FormFieldDatePicker
|
|
@@ -1041,26 +1218,25 @@ function FormFieldDatePicker(props) {
|
|
|
1041
1218
|
} else {
|
|
1042
1219
|
// When we need to save range, value is object with two date
|
|
1043
1220
|
input.onChange({
|
|
1044
|
-
endDate,
|
|
1045
|
-
startDate
|
|
1221
|
+
endDate: endDate,
|
|
1222
|
+
startDate: startDate
|
|
1046
1223
|
});
|
|
1047
1224
|
}
|
|
1048
1225
|
if (onChange) {
|
|
1049
1226
|
onChange(startDate, endDate);
|
|
1050
1227
|
}
|
|
1051
1228
|
}, [input.onChange, onChange]);
|
|
1052
|
-
|
|
1053
|
-
|
|
1054
|
-
|
|
1055
|
-
|
|
1056
|
-
|
|
1057
|
-
|
|
1058
|
-
|
|
1059
|
-
|
|
1060
|
-
|
|
1061
|
-
|
|
1062
|
-
|
|
1063
|
-
const updatedInputProps = useValidationAppearanceInputProps({
|
|
1229
|
+
var _useFieldValidationSt = useFieldValidationState({
|
|
1230
|
+
fieldProps: fieldProps,
|
|
1231
|
+
input: input,
|
|
1232
|
+
meta: meta
|
|
1233
|
+
}),
|
|
1234
|
+
errorKey = _useFieldValidationSt.errorKey,
|
|
1235
|
+
errorMessage = _useFieldValidationSt.errorMessage,
|
|
1236
|
+
isErrorState = _useFieldValidationSt.isErrorState,
|
|
1237
|
+
successKey = _useFieldValidationSt.successKey,
|
|
1238
|
+
isValidState = _useFieldValidationSt.isValidState;
|
|
1239
|
+
var updatedInputProps = useValidationAppearanceInputProps({
|
|
1064
1240
|
inputProps: inputProps,
|
|
1065
1241
|
validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
|
|
1066
1242
|
});
|
|
@@ -1092,7 +1268,7 @@ function FormFieldDatePicker(props) {
|
|
|
1092
1268
|
});
|
|
1093
1269
|
}
|
|
1094
1270
|
|
|
1095
|
-
|
|
1271
|
+
var defaultDropzoneProps = {
|
|
1096
1272
|
fill: 'surfaceSecondary',
|
|
1097
1273
|
fillHover: 'surfaceTertiary',
|
|
1098
1274
|
// borderColor: 'surfaceBorderTertiary',
|
|
@@ -1114,45 +1290,45 @@ const defaultDropzoneProps = {
|
|
|
1114
1290
|
isPreviews: true
|
|
1115
1291
|
};
|
|
1116
1292
|
|
|
1117
|
-
|
|
1118
|
-
|
|
1119
|
-
|
|
1120
|
-
|
|
1121
|
-
|
|
1122
|
-
|
|
1123
|
-
|
|
1124
|
-
|
|
1125
|
-
|
|
1126
|
-
|
|
1127
|
-
|
|
1128
|
-
|
|
1129
|
-
|
|
1130
|
-
|
|
1131
|
-
|
|
1132
|
-
|
|
1133
|
-
onClickPreview,
|
|
1134
|
-
onDeleteFile
|
|
1135
|
-
} = props;
|
|
1293
|
+
var FileInputDropzone = /*#__PURE__*/React__default.default.memo(function FileInputDropzone(props) {
|
|
1294
|
+
var maxFiles = props.maxFiles,
|
|
1295
|
+
maxSize = props.maxSize,
|
|
1296
|
+
fileErrorText = props.fileErrorText,
|
|
1297
|
+
_props$dropzoneProps = props.dropzoneProps,
|
|
1298
|
+
dropzoneProps = _props$dropzoneProps === void 0 ? {} : _props$dropzoneProps,
|
|
1299
|
+
hintDescription = props.hintDescription,
|
|
1300
|
+
hintTitle = props.hintTitle,
|
|
1301
|
+
inputName = props.inputName,
|
|
1302
|
+
inputValue = props.inputValue,
|
|
1303
|
+
showFilename = props.showFilename,
|
|
1304
|
+
thumbColumn = props.thumbColumn,
|
|
1305
|
+
isPreviews = props.isPreviews,
|
|
1306
|
+
onAddFiles = props.onAddFiles,
|
|
1307
|
+
onClickPreview = props.onClickPreview,
|
|
1308
|
+
onDeleteFile = props.onDeleteFile;
|
|
1136
1309
|
|
|
1137
1310
|
// TODO: delete react-final-form things out of here?
|
|
1138
|
-
|
|
1139
|
-
change
|
|
1140
|
-
|
|
1141
|
-
|
|
1142
|
-
|
|
1143
|
-
|
|
1144
|
-
|
|
1145
|
-
|
|
1311
|
+
var _useForm = reactFinalForm.useForm(),
|
|
1312
|
+
change = _useForm.change;
|
|
1313
|
+
var _useState = React.useState(''),
|
|
1314
|
+
fileError = _useState[0],
|
|
1315
|
+
setFileError = _useState[1];
|
|
1316
|
+
var _useState2 = React.useState(false),
|
|
1317
|
+
fileIsLoading = _useState2[0],
|
|
1318
|
+
setFileIsLoading = _useState2[1];
|
|
1319
|
+
var prevFilesListRef = React.useRef(null);
|
|
1320
|
+
var filesList = React.useMemo(function () {
|
|
1321
|
+
var newFilesList = inputValue ? castArray__default.default(inputValue) : [];
|
|
1146
1322
|
if (prevFilesListRef.current === null) {
|
|
1147
1323
|
prevFilesListRef.current = newFilesList;
|
|
1148
1324
|
return newFilesList;
|
|
1149
1325
|
}
|
|
1150
1326
|
// keep track of previous state and revoke unused object urls
|
|
1151
|
-
prevFilesListRef.current.forEach(prevFile
|
|
1327
|
+
prevFilesListRef.current.forEach(function (prevFile) {
|
|
1152
1328
|
if (!prevFile.preview) {
|
|
1153
1329
|
return;
|
|
1154
1330
|
}
|
|
1155
|
-
|
|
1331
|
+
var isFileDeleted = !newFilesList.some(function (newFile) {
|
|
1156
1332
|
return newFile.preview === prevFile.preview;
|
|
1157
1333
|
});
|
|
1158
1334
|
if (isFileDeleted) {
|
|
@@ -1162,10 +1338,10 @@ const FileInputDropzone = /*#__PURE__*/React__default.default.memo(function File
|
|
|
1162
1338
|
prevFilesListRef.current = newFilesList;
|
|
1163
1339
|
return newFilesList;
|
|
1164
1340
|
}, [inputValue]);
|
|
1165
|
-
|
|
1341
|
+
var changeFormState = React.useCallback(function (newFiles) {
|
|
1166
1342
|
// If max files in dropzone is 1 - return file as it self, else as array of files
|
|
1167
1343
|
// ps: for old projects compatibility
|
|
1168
|
-
|
|
1344
|
+
var toSave = dropzoneProps.maxFiles == 1 ? newFiles[0] : newFiles;
|
|
1169
1345
|
change(inputName, toSave);
|
|
1170
1346
|
return toSave;
|
|
1171
1347
|
},
|
|
@@ -1174,28 +1350,57 @@ const FileInputDropzone = /*#__PURE__*/React__default.default.memo(function File
|
|
|
1174
1350
|
[dropzoneProps, change]);
|
|
1175
1351
|
|
|
1176
1352
|
//
|
|
1177
|
-
|
|
1178
|
-
|
|
1179
|
-
|
|
1180
|
-
|
|
1181
|
-
|
|
1182
|
-
|
|
1183
|
-
|
|
1184
|
-
|
|
1353
|
+
var convertFiledValueAndSaveAsFiles = React.useCallback(/*#__PURE__*/function () {
|
|
1354
|
+
var _ref = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(currentFilesList) {
|
|
1355
|
+
var newFiles, _iterator, _step, fileItem, newFile;
|
|
1356
|
+
return _regenerator().w(function (_context) {
|
|
1357
|
+
while (1) switch (_context.n) {
|
|
1358
|
+
case 0:
|
|
1359
|
+
setFileIsLoading(true);
|
|
1360
|
+
newFiles = [];
|
|
1361
|
+
_iterator = _createForOfIteratorHelperLoose(currentFilesList);
|
|
1362
|
+
case 1:
|
|
1363
|
+
if ((_step = _iterator()).done) {
|
|
1364
|
+
_context.n = 5;
|
|
1365
|
+
break;
|
|
1366
|
+
}
|
|
1367
|
+
fileItem = _step.value;
|
|
1368
|
+
if (!(typeof fileItem === 'string')) {
|
|
1369
|
+
_context.n = 3;
|
|
1370
|
+
break;
|
|
1371
|
+
}
|
|
1372
|
+
_context.n = 2;
|
|
1373
|
+
return convertToFile(fileItem, isPreviews);
|
|
1374
|
+
case 2:
|
|
1375
|
+
newFile = _context.v;
|
|
1376
|
+
if (newFile) {
|
|
1377
|
+
newFiles.push(newFile);
|
|
1378
|
+
}
|
|
1379
|
+
_context.n = 4;
|
|
1380
|
+
break;
|
|
1381
|
+
case 3:
|
|
1382
|
+
newFiles.push(fileItem);
|
|
1383
|
+
case 4:
|
|
1384
|
+
_context.n = 1;
|
|
1385
|
+
break;
|
|
1386
|
+
case 5:
|
|
1387
|
+
changeFormState(newFiles);
|
|
1388
|
+
setFileIsLoading(false);
|
|
1389
|
+
case 6:
|
|
1390
|
+
return _context.a(2);
|
|
1185
1391
|
}
|
|
1186
|
-
}
|
|
1187
|
-
|
|
1188
|
-
|
|
1189
|
-
|
|
1190
|
-
|
|
1191
|
-
|
|
1192
|
-
}, [isPreviews, changeFormState]);
|
|
1392
|
+
}, _callee);
|
|
1393
|
+
}));
|
|
1394
|
+
return function (_x) {
|
|
1395
|
+
return _ref.apply(this, arguments);
|
|
1396
|
+
};
|
|
1397
|
+
}(), [isPreviews, changeFormState]);
|
|
1193
1398
|
|
|
1194
1399
|
// Delete file from dropzone
|
|
1195
|
-
|
|
1400
|
+
var removeFile = React.useCallback(function (event, index) {
|
|
1196
1401
|
event.stopPropagation();
|
|
1197
1402
|
event.preventDefault();
|
|
1198
|
-
|
|
1403
|
+
var newFiles = [].concat(filesList);
|
|
1199
1404
|
newFiles.splice(index, 1);
|
|
1200
1405
|
if (onDeleteFile) {
|
|
1201
1406
|
onDeleteFile(filesList[index], inputName);
|
|
@@ -1207,165 +1412,184 @@ const FileInputDropzone = /*#__PURE__*/React__default.default.memo(function File
|
|
|
1207
1412
|
[filesList, changeFormState, onDeleteFile]);
|
|
1208
1413
|
|
|
1209
1414
|
// Create dropzone options
|
|
1210
|
-
|
|
1211
|
-
|
|
1212
|
-
|
|
1213
|
-
|
|
1214
|
-
|
|
1215
|
-
|
|
1216
|
-
|
|
1217
|
-
|
|
1218
|
-
|
|
1219
|
-
|
|
1220
|
-
|
|
1221
|
-
|
|
1222
|
-
|
|
1223
|
-
|
|
1224
|
-
|
|
1225
|
-
|
|
1226
|
-
|
|
1227
|
-
|
|
1228
|
-
|
|
1229
|
-
|
|
1230
|
-
|
|
1231
|
-
|
|
1415
|
+
var _useDropzone = reactDropzone.useDropzone(Object.assign({
|
|
1416
|
+
maxFiles: maxFiles || 5,
|
|
1417
|
+
maxSize: maxSize || 10485760
|
|
1418
|
+
}, dropzoneProps, {
|
|
1419
|
+
getFilesFromEvent: function () {
|
|
1420
|
+
var _getFilesFromEvent = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2(event) {
|
|
1421
|
+
var result, newFiles;
|
|
1422
|
+
return _regenerator().w(function (_context2) {
|
|
1423
|
+
while (1) switch (_context2.n) {
|
|
1424
|
+
case 0:
|
|
1425
|
+
_context2.n = 1;
|
|
1426
|
+
return fileSelector.fromEvent(event);
|
|
1427
|
+
case 1:
|
|
1428
|
+
result = _context2.v;
|
|
1429
|
+
newFiles = result.filter(function (item) {
|
|
1430
|
+
return item instanceof File;
|
|
1431
|
+
}); // Add exists and new files to accepted(or rejected)
|
|
1432
|
+
return _context2.a(2, [].concat(filesList, newFiles));
|
|
1433
|
+
}
|
|
1434
|
+
}, _callee2);
|
|
1435
|
+
}));
|
|
1436
|
+
function getFilesFromEvent(_x2) {
|
|
1437
|
+
return _getFilesFromEvent.apply(this, arguments);
|
|
1438
|
+
}
|
|
1439
|
+
return getFilesFromEvent;
|
|
1440
|
+
}(),
|
|
1441
|
+
onDropAccepted: function onDropAccepted(acceptedFiles) {
|
|
1442
|
+
// If dropped files has accepted and we need a previews
|
|
1443
|
+
if (isPreviews) {
|
|
1444
|
+
// Add preview to every file
|
|
1445
|
+
acceptedFiles.forEach(function (file) {
|
|
1446
|
+
if (!file.error && !file.preview) {
|
|
1447
|
+
file.preview = URL.createObjectURL(file);
|
|
1448
|
+
}
|
|
1449
|
+
});
|
|
1450
|
+
}
|
|
1451
|
+
// Save to form data (including empty when files are not valid)
|
|
1452
|
+
var filesToSave = changeFormState(acceptedFiles);
|
|
1453
|
+
setFileError('');
|
|
1454
|
+
|
|
1455
|
+
// Save DataURL for all files
|
|
1456
|
+
var readerPromisesList = acceptedFiles.map(function (file) {
|
|
1457
|
+
return new Promise(function (resolve) {
|
|
1458
|
+
return setFileDataURL(file, resolve);
|
|
1459
|
+
});
|
|
1460
|
+
});
|
|
1461
|
+
// Save files to form values
|
|
1462
|
+
Promise.all(readerPromisesList).then(function () {
|
|
1463
|
+
if (onAddFiles) {
|
|
1464
|
+
onAddFiles(filesToSave, inputName);
|
|
1232
1465
|
}
|
|
1233
1466
|
});
|
|
1234
|
-
}
|
|
1235
|
-
|
|
1236
|
-
|
|
1237
|
-
|
|
1238
|
-
|
|
1239
|
-
|
|
1240
|
-
|
|
1241
|
-
|
|
1242
|
-
|
|
1243
|
-
|
|
1244
|
-
|
|
1245
|
-
|
|
1246
|
-
onAddFiles(filesToSave, inputName);
|
|
1247
|
-
}
|
|
1248
|
-
});
|
|
1249
|
-
},
|
|
1250
|
-
onDropRejected: rejectedFiles => {
|
|
1251
|
-
// If dropped files has rejected
|
|
1252
|
-
if (rejectedFiles.length) {
|
|
1253
|
-
let fileErrorMessage = 'Ошибка при добавлении файла';
|
|
1254
|
-
const firstFileErrorItem = rejectedFiles[0].errors[0];
|
|
1255
|
-
if (firstFileErrorItem) {
|
|
1256
|
-
if (firstFileErrorItem.code === reactDropzone.ErrorCode.TooManyFiles) {
|
|
1257
|
-
fileErrorMessage = `Максимальное количество файлов: ${maxFiles}`;
|
|
1258
|
-
} else {
|
|
1259
|
-
fileErrorMessage = firstFileErrorItem.message;
|
|
1467
|
+
},
|
|
1468
|
+
onDropRejected: function onDropRejected(rejectedFiles) {
|
|
1469
|
+
// If dropped files has rejected
|
|
1470
|
+
if (rejectedFiles.length) {
|
|
1471
|
+
var fileErrorMessage = 'Ошибка при добавлении файла';
|
|
1472
|
+
var firstFileErrorItem = rejectedFiles[0].errors[0];
|
|
1473
|
+
if (firstFileErrorItem) {
|
|
1474
|
+
if (firstFileErrorItem.code === reactDropzone.ErrorCode.TooManyFiles) {
|
|
1475
|
+
fileErrorMessage = "\u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u043E\u0435 \u043A\u043E\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u043E \u0444\u0430\u0439\u043B\u043E\u0432: " + maxFiles;
|
|
1476
|
+
} else {
|
|
1477
|
+
fileErrorMessage = firstFileErrorItem.message;
|
|
1478
|
+
}
|
|
1260
1479
|
}
|
|
1480
|
+
// Show error
|
|
1481
|
+
setFileError(fileErrorMessage);
|
|
1482
|
+
} else {
|
|
1483
|
+
// Else clean error
|
|
1484
|
+
setFileError('');
|
|
1261
1485
|
}
|
|
1262
|
-
// Show error
|
|
1263
|
-
setFileError(fileErrorMessage);
|
|
1264
|
-
} else {
|
|
1265
|
-
// Else clean error
|
|
1266
|
-
setFileError('');
|
|
1267
1486
|
}
|
|
1268
|
-
}
|
|
1269
|
-
|
|
1270
|
-
|
|
1271
|
-
|
|
1272
|
-
|
|
1487
|
+
})),
|
|
1488
|
+
getInputProps = _useDropzone.getInputProps,
|
|
1489
|
+
getRootProps = _useDropzone.getRootProps;
|
|
1490
|
+
React.useEffect(function () {
|
|
1491
|
+
var currentFilesList = castArray__default.default(inputValue);
|
|
1492
|
+
var isNeedToConvert = currentFilesList.some(function (fileItem) {
|
|
1493
|
+
return typeof fileItem === 'string';
|
|
1494
|
+
});
|
|
1273
1495
|
if (isNeedToConvert) {
|
|
1274
1496
|
// First time convert value to Files and save to local and form state
|
|
1275
1497
|
convertFiledValueAndSaveAsFiles(currentFilesList);
|
|
1276
1498
|
}
|
|
1277
1499
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
1278
1500
|
}, [inputValue]);
|
|
1279
|
-
React.useEffect(()
|
|
1501
|
+
React.useEffect(function () {
|
|
1280
1502
|
// Make sure to revoke the data uris to avoid memory leaks, will run on unmount
|
|
1281
|
-
return ()
|
|
1282
|
-
prevFilesListRef.current.forEach(file
|
|
1503
|
+
return function () {
|
|
1504
|
+
prevFilesListRef.current.forEach(function (file) {
|
|
1283
1505
|
if (file.preview) {
|
|
1284
1506
|
URL.revokeObjectURL(file.preview);
|
|
1285
1507
|
}
|
|
1286
1508
|
});
|
|
1287
1509
|
};
|
|
1288
1510
|
}, []);
|
|
1289
|
-
|
|
1290
|
-
|
|
1291
|
-
|
|
1292
|
-
|
|
1293
|
-
|
|
1294
|
-
|
|
1295
|
-
|
|
1296
|
-
|
|
1297
|
-
|
|
1298
|
-
|
|
1299
|
-
|
|
1300
|
-
|
|
1301
|
-
|
|
1302
|
-
|
|
1303
|
-
|
|
1304
|
-
|
|
1305
|
-
|
|
1306
|
-
|
|
1307
|
-
|
|
1308
|
-
|
|
1309
|
-
|
|
1310
|
-
|
|
1311
|
-
|
|
1312
|
-
|
|
1313
|
-
|
|
1314
|
-
|
|
1315
|
-
|
|
1316
|
-
|
|
1317
|
-
|
|
1318
|
-
|
|
1319
|
-
|
|
1320
|
-
|
|
1321
|
-
thumbNameTextWrap
|
|
1322
|
-
} = propsGenerator;
|
|
1511
|
+
var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props);
|
|
1512
|
+
var fillClass = propsGenerator.fillClass,
|
|
1513
|
+
fillHoverClass = propsGenerator.fillHoverClass,
|
|
1514
|
+
borderColorClass = propsGenerator.borderColorClass,
|
|
1515
|
+
borderColorHoverClass = propsGenerator.borderColorHoverClass,
|
|
1516
|
+
borderTypeClass = propsGenerator.borderTypeClass,
|
|
1517
|
+
borderWidthClass = propsGenerator.borderWidthClass,
|
|
1518
|
+
errorMessageTextColor = propsGenerator.errorMessageTextColor,
|
|
1519
|
+
errorMessageTextSize = propsGenerator.errorMessageTextSize,
|
|
1520
|
+
errorMessageTextWeight = propsGenerator.errorMessageTextWeight,
|
|
1521
|
+
hintDescriptionTextColor = propsGenerator.hintDescriptionTextColor,
|
|
1522
|
+
hintDescriptionTextSize = propsGenerator.hintDescriptionTextSize,
|
|
1523
|
+
hintDescriptionTextWeight = propsGenerator.hintDescriptionTextWeight,
|
|
1524
|
+
hintDescriptionTextWrap = propsGenerator.hintDescriptionTextWrap,
|
|
1525
|
+
hintTitleTextColor = propsGenerator.hintTitleTextColor,
|
|
1526
|
+
hintTitleTextSize = propsGenerator.hintTitleTextSize,
|
|
1527
|
+
hintTitleTextWeight = propsGenerator.hintTitleTextWeight,
|
|
1528
|
+
hintTitleTextWrap = propsGenerator.hintTitleTextWrap,
|
|
1529
|
+
removeThumbAppearance = propsGenerator.removeThumbAppearance,
|
|
1530
|
+
removeThumbShape = propsGenerator.removeThumbShape,
|
|
1531
|
+
removeThumbText = propsGenerator.removeThumbText,
|
|
1532
|
+
removeThumbTextWeight = propsGenerator.removeThumbTextWeight,
|
|
1533
|
+
shapeClass = propsGenerator.shapeClass,
|
|
1534
|
+
thumbBorderColorClass = propsGenerator.thumbBorderColorClass,
|
|
1535
|
+
thumbBorderColorHoverClass = propsGenerator.thumbBorderColorHoverClass,
|
|
1536
|
+
thumbBorderTypeClass = propsGenerator.thumbBorderTypeClass,
|
|
1537
|
+
thumbBorderWidthClass = propsGenerator.thumbBorderWidthClass,
|
|
1538
|
+
thumbDirectionClass = propsGenerator.thumbDirectionClass,
|
|
1539
|
+
thumbNameTextColor = propsGenerator.thumbNameTextColor,
|
|
1540
|
+
thumbNameTextSize = propsGenerator.thumbNameTextSize,
|
|
1541
|
+
thumbNameTextWeight = propsGenerator.thumbNameTextWeight,
|
|
1542
|
+
thumbNameTextWrap = propsGenerator.thumbNameTextWrap;
|
|
1323
1543
|
return /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, /*#__PURE__*/React__default.default.createElement("div", getRootProps({
|
|
1324
1544
|
// className: `form-dropzone__dropzone dropzone ${className} form-dropzone__dropzone_size_${size} ${shapeClass}`,
|
|
1325
|
-
className:
|
|
1545
|
+
className: "form-dropzone__dropzone dropzone"
|
|
1326
1546
|
}), /*#__PURE__*/React__default.default.createElement("input", Object.assign({}, getInputProps(), {
|
|
1327
1547
|
name: inputName
|
|
1328
1548
|
})), /*#__PURE__*/React__default.default.createElement("div", {
|
|
1329
|
-
className: clsx__default.default('form-dropzone__dropzone-wrapper', thumbColumn &&
|
|
1330
|
-
}, filesList.map((file, index)
|
|
1331
|
-
|
|
1332
|
-
|
|
1333
|
-
|
|
1334
|
-
|
|
1335
|
-
|
|
1336
|
-
|
|
1337
|
-
|
|
1338
|
-
|
|
1339
|
-
|
|
1340
|
-
|
|
1341
|
-
|
|
1342
|
-
|
|
1343
|
-
|
|
1344
|
-
|
|
1345
|
-
|
|
1346
|
-
|
|
1347
|
-
|
|
1348
|
-
|
|
1349
|
-
|
|
1350
|
-
|
|
1351
|
-
|
|
1352
|
-
|
|
1353
|
-
|
|
1354
|
-
|
|
1355
|
-
|
|
1356
|
-
|
|
1357
|
-
|
|
1358
|
-
|
|
1359
|
-
|
|
1360
|
-
|
|
1361
|
-
|
|
1362
|
-
|
|
1363
|
-
|
|
1364
|
-
|
|
1365
|
-
|
|
1366
|
-
|
|
1367
|
-
|
|
1368
|
-
|
|
1549
|
+
className: clsx__default.default('form-dropzone__dropzone-wrapper', thumbColumn && "form-dropzone__dropzone-wrapper_column_" + thumbColumn, fillClass && "fill_" + fillClass, fillHoverClass && "fill_hover_" + fillHoverClass, borderWidthClass && "border-width_" + borderWidthClass, borderColorClass && "border-color_" + borderColorClass, borderColorHoverClass && "border-color_hover_" + borderColorHoverClass, borderTypeClass && "border_type_" + borderTypeClass, shapeClass && "shape_" + shapeClass)
|
|
1550
|
+
}, filesList.map(function (file, index) {
|
|
1551
|
+
return /*#__PURE__*/React__default.default.createElement("aside", {
|
|
1552
|
+
className: clsx__default.default('form-dropzone__thumb', fillClass, thumbDirectionClass, thumbBorderWidthClass, thumbBorderColorClass, thumbBorderColorHoverClass, thumbBorderTypeClass),
|
|
1553
|
+
key: file.id || file.name + "_" + index
|
|
1554
|
+
}, isPreviews && !file.error && /*#__PURE__*/React__default.default.createElement("div", {
|
|
1555
|
+
className: "form-dropzone__thumb-image"
|
|
1556
|
+
}, /*#__PURE__*/React__default.default.createElement("img", {
|
|
1557
|
+
className: "form-dropzone__thumb-image-inner",
|
|
1558
|
+
src: file.preview || file.image,
|
|
1559
|
+
onClick: function onClick(event) {
|
|
1560
|
+
onClickPreview && onClickPreview(file, event);
|
|
1561
|
+
}
|
|
1562
|
+
})), file.error && /*#__PURE__*/React__default.default.createElement("div", null, /*#__PURE__*/React__default.default.createElement(Text.Text, {
|
|
1563
|
+
size: thumbNameTextSize,
|
|
1564
|
+
textColor: thumbNameTextColor,
|
|
1565
|
+
textWeight: thumbNameTextWeight,
|
|
1566
|
+
textWrap: thumbNameTextWrap
|
|
1567
|
+
}, fileErrorText || file.error)), showFilename && /*#__PURE__*/React__default.default.createElement("div", {
|
|
1568
|
+
className: "form-dropzone__thumb-name"
|
|
1569
|
+
}, /*#__PURE__*/React__default.default.createElement(Text.Text, {
|
|
1570
|
+
className: "form-dropzone__thumb-name-inner",
|
|
1571
|
+
size: thumbNameTextSize,
|
|
1572
|
+
textColor: thumbNameTextColor,
|
|
1573
|
+
textWeight: thumbNameTextWeight,
|
|
1574
|
+
textWrap: thumbNameTextWrap
|
|
1575
|
+
}, file.name)), fileIsLoading && /*#__PURE__*/React__default.default.createElement("div", {
|
|
1576
|
+
className: "form-dropzone__thumb-loader"
|
|
1577
|
+
}, /*#__PURE__*/React__default.default.createElement(Loader.Loader, {
|
|
1578
|
+
width: "fill",
|
|
1579
|
+
height: "fill"
|
|
1580
|
+
})), /*#__PURE__*/React__default.default.createElement("div", {
|
|
1581
|
+
className: clsx__default.default('form-dropzone__thumb-remove')
|
|
1582
|
+
}, /*#__PURE__*/React__default.default.createElement(Button.Button, {
|
|
1583
|
+
className: "form-dropzone__thumb-remove-text",
|
|
1584
|
+
appearance: removeThumbAppearance,
|
|
1585
|
+
label: removeThumbText || 'Удалить',
|
|
1586
|
+
labelTextWeight: removeThumbTextWeight,
|
|
1587
|
+
shape: removeThumbShape,
|
|
1588
|
+
onClick: function onClick(event) {
|
|
1589
|
+
return removeFile(event, index);
|
|
1590
|
+
}
|
|
1591
|
+
})));
|
|
1592
|
+
}), !filesList.length ? /*#__PURE__*/React__default.default.createElement("div", {
|
|
1369
1593
|
className: "form-dropzone__hint"
|
|
1370
1594
|
}, /*#__PURE__*/React__default.default.createElement(Text.Text, {
|
|
1371
1595
|
className: "form-dropzone__hint-title",
|
|
@@ -1402,67 +1626,101 @@ const FileInputDropzone = /*#__PURE__*/React__default.default.memo(function File
|
|
|
1402
1626
|
textWeight: errorMessageTextWeight
|
|
1403
1627
|
}, fileError)));
|
|
1404
1628
|
});
|
|
1405
|
-
|
|
1406
|
-
|
|
1407
|
-
const response = await axios__default.default({
|
|
1408
|
-
url: url,
|
|
1409
|
-
responseType: 'blob'
|
|
1410
|
-
});
|
|
1411
|
-
const blobObject = response.data;
|
|
1412
|
-
const dirtyFilename = response.headers['content-disposition']?.split('filename=')[1];
|
|
1413
|
-
// Remove double quotes
|
|
1414
|
-
let filename = dirtyFilename?.substring(1).slice(0, -1);
|
|
1415
|
-
if (!filename) {
|
|
1416
|
-
filename = url.split('/').at(-1);
|
|
1417
|
-
// const typeParts = blobObject.type.split('/')
|
|
1418
|
-
// const fileType = typeParts[typeParts.length - 1]
|
|
1419
|
-
// filename = `${new Date().getTime()}.${fileType}`
|
|
1420
|
-
}
|
|
1421
|
-
return new File([blobObject], filename, {
|
|
1422
|
-
type: blobObject.type
|
|
1423
|
-
});
|
|
1424
|
-
} catch (error) {
|
|
1425
|
-
console.log('error: ', error);
|
|
1426
|
-
return null;
|
|
1427
|
-
}
|
|
1629
|
+
function getFileByURL(_x3) {
|
|
1630
|
+
return _getFileByURL.apply(this, arguments);
|
|
1428
1631
|
}
|
|
1429
|
-
|
|
1430
|
-
|
|
1431
|
-
|
|
1432
|
-
|
|
1433
|
-
|
|
1434
|
-
|
|
1435
|
-
|
|
1436
|
-
|
|
1437
|
-
|
|
1438
|
-
|
|
1439
|
-
|
|
1440
|
-
|
|
1441
|
-
|
|
1442
|
-
|
|
1443
|
-
|
|
1444
|
-
|
|
1445
|
-
|
|
1632
|
+
function _getFileByURL() {
|
|
1633
|
+
_getFileByURL = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3(url) {
|
|
1634
|
+
var _response$headers$con, response, blobObject, dirtyFilename, filename, _t;
|
|
1635
|
+
return _regenerator().w(function (_context3) {
|
|
1636
|
+
while (1) switch (_context3.p = _context3.n) {
|
|
1637
|
+
case 0:
|
|
1638
|
+
_context3.p = 0;
|
|
1639
|
+
_context3.n = 1;
|
|
1640
|
+
return axios__default.default({
|
|
1641
|
+
url: url,
|
|
1642
|
+
responseType: 'blob'
|
|
1643
|
+
});
|
|
1644
|
+
case 1:
|
|
1645
|
+
response = _context3.v;
|
|
1646
|
+
blobObject = response.data;
|
|
1647
|
+
dirtyFilename = (_response$headers$con = response.headers['content-disposition']) == null ? void 0 : _response$headers$con.split('filename=')[1]; // Remove double quotes
|
|
1648
|
+
filename = dirtyFilename == null ? void 0 : dirtyFilename.substring(1).slice(0, -1);
|
|
1649
|
+
if (!filename) {
|
|
1650
|
+
filename = url.split('/').at(-1);
|
|
1651
|
+
// const typeParts = blobObject.type.split('/')
|
|
1652
|
+
// const fileType = typeParts[typeParts.length - 1]
|
|
1653
|
+
// filename = `${new Date().getTime()}.${fileType}`
|
|
1654
|
+
}
|
|
1655
|
+
return _context3.a(2, new File([blobObject], filename, {
|
|
1656
|
+
type: blobObject.type
|
|
1657
|
+
}));
|
|
1658
|
+
case 2:
|
|
1659
|
+
_context3.p = 2;
|
|
1660
|
+
_t = _context3.v;
|
|
1661
|
+
console.log('error: ', _t);
|
|
1662
|
+
return _context3.a(2, null);
|
|
1663
|
+
}
|
|
1664
|
+
}, _callee3, null, [[0, 2]]);
|
|
1665
|
+
}));
|
|
1666
|
+
return _getFileByURL.apply(this, arguments);
|
|
1667
|
+
}
|
|
1668
|
+
function convertToFile(_x4, _x5) {
|
|
1669
|
+
return _convertToFile.apply(this, arguments);
|
|
1670
|
+
}
|
|
1671
|
+
function _convertToFile() {
|
|
1672
|
+
_convertToFile = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee4(inputValue, isPreviews) {
|
|
1673
|
+
var newFile, isURL;
|
|
1674
|
+
return _regenerator().w(function (_context4) {
|
|
1675
|
+
while (1) switch (_context4.n) {
|
|
1676
|
+
case 0:
|
|
1677
|
+
newFile = null; // Download image by url and save as File instance
|
|
1678
|
+
isURL = typeof inputValue === 'string' && inputValue.includes('/');
|
|
1679
|
+
if (!(inputValue.image || isURL)) {
|
|
1680
|
+
_context4.n = 2;
|
|
1681
|
+
break;
|
|
1682
|
+
}
|
|
1683
|
+
_context4.n = 1;
|
|
1684
|
+
return getFileByURL(inputValue.image || inputValue);
|
|
1685
|
+
case 1:
|
|
1686
|
+
newFile = _context4.v;
|
|
1687
|
+
if (newFile) {
|
|
1688
|
+
setFileDataURL(newFile);
|
|
1689
|
+
}
|
|
1690
|
+
case 2:
|
|
1691
|
+
// Convert dataURL to File instance
|
|
1692
|
+
if (inputValue.dataURL) {
|
|
1693
|
+
newFile = common.createFileFromDataURL(inputValue.name || inputValue.path, inputValue.dataURL);
|
|
1694
|
+
newFile.dataURL = inputValue.dataURL;
|
|
1695
|
+
}
|
|
1446
1696
|
|
|
1447
|
-
|
|
1448
|
-
|
|
1449
|
-
|
|
1450
|
-
|
|
1451
|
-
|
|
1452
|
-
|
|
1453
|
-
|
|
1454
|
-
|
|
1697
|
+
// Save new File to state
|
|
1698
|
+
if (newFile) {
|
|
1699
|
+
newFile.id = inputValue.id;
|
|
1700
|
+
if (isPreviews) {
|
|
1701
|
+
newFile.preview = URL.createObjectURL(newFile);
|
|
1702
|
+
}
|
|
1703
|
+
}
|
|
1704
|
+
return _context4.a(2, newFile);
|
|
1705
|
+
}
|
|
1706
|
+
}, _callee4);
|
|
1707
|
+
}));
|
|
1708
|
+
return _convertToFile.apply(this, arguments);
|
|
1455
1709
|
}
|
|
1456
1710
|
function setFileDataURL(file, resolve) {
|
|
1457
|
-
resolve = resolve || (
|
|
1711
|
+
resolve = resolve || function () {};
|
|
1458
1712
|
// Init reader and save his file
|
|
1459
|
-
|
|
1713
|
+
var reader = new FileReader();
|
|
1460
1714
|
reader._readedFile = file;
|
|
1461
1715
|
|
|
1462
1716
|
// Set handlers
|
|
1463
|
-
reader.onabort = ()
|
|
1464
|
-
|
|
1465
|
-
|
|
1717
|
+
reader.onabort = function () {
|
|
1718
|
+
return resolve();
|
|
1719
|
+
};
|
|
1720
|
+
reader.onerror = function () {
|
|
1721
|
+
return resolve();
|
|
1722
|
+
};
|
|
1723
|
+
reader.onload = function (event) {
|
|
1466
1724
|
event.target._readedFile.dataURL = reader.result;
|
|
1467
1725
|
resolve();
|
|
1468
1726
|
};
|
|
@@ -1474,70 +1732,67 @@ function setFileDataURL(file, resolve) {
|
|
|
1474
1732
|
}
|
|
1475
1733
|
}
|
|
1476
1734
|
|
|
1477
|
-
|
|
1478
|
-
|
|
1479
|
-
|
|
1480
|
-
|
|
1481
|
-
|
|
1482
|
-
|
|
1483
|
-
|
|
1484
|
-
|
|
1485
|
-
|
|
1486
|
-
|
|
1487
|
-
|
|
1488
|
-
|
|
1489
|
-
|
|
1490
|
-
|
|
1491
|
-
|
|
1492
|
-
|
|
1493
|
-
|
|
1494
|
-
|
|
1495
|
-
|
|
1496
|
-
|
|
1497
|
-
|
|
1498
|
-
|
|
1499
|
-
|
|
1500
|
-
|
|
1501
|
-
|
|
1502
|
-
|
|
1503
|
-
|
|
1504
|
-
|
|
1505
|
-
|
|
1506
|
-
|
|
1507
|
-
|
|
1508
|
-
|
|
1509
|
-
|
|
1510
|
-
|
|
1511
|
-
|
|
1512
|
-
|
|
1513
|
-
|
|
1514
|
-
|
|
1515
|
-
|
|
1516
|
-
|
|
1517
|
-
|
|
1518
|
-
|
|
1519
|
-
|
|
1520
|
-
|
|
1521
|
-
|
|
1522
|
-
|
|
1523
|
-
|
|
1524
|
-
|
|
1525
|
-
|
|
1526
|
-
|
|
1527
|
-
|
|
1528
|
-
|
|
1529
|
-
|
|
1530
|
-
|
|
1531
|
-
|
|
1532
|
-
|
|
1533
|
-
thumbNameTextWrap
|
|
1534
|
-
} = propsGenerator;
|
|
1735
|
+
var FormFieldFileInput = /*#__PURE__*/React__default.default.memo(function FormFieldFileInput(props) {
|
|
1736
|
+
var className = props.className,
|
|
1737
|
+
name = props.name,
|
|
1738
|
+
width = props.width,
|
|
1739
|
+
maxFiles = props.maxFiles,
|
|
1740
|
+
maxSize = props.maxSize,
|
|
1741
|
+
label = props.label,
|
|
1742
|
+
fileErrorText = props.fileErrorText,
|
|
1743
|
+
classNameGroupItem = props.classNameGroupItem,
|
|
1744
|
+
dropzoneProps = props.dropzoneProps,
|
|
1745
|
+
fieldProps = props.fieldProps,
|
|
1746
|
+
hintDescription = props.hintDescription,
|
|
1747
|
+
hintTitle = props.hintTitle,
|
|
1748
|
+
showFilename = props.showFilename,
|
|
1749
|
+
showMessage = props.showMessage,
|
|
1750
|
+
isPreviews = props.isPreviews,
|
|
1751
|
+
isRequired = props.isRequired,
|
|
1752
|
+
onAddFiles = props.onAddFiles,
|
|
1753
|
+
onClickPreview = props.onClickPreview,
|
|
1754
|
+
onDeleteFile = props.onDeleteFile;
|
|
1755
|
+
var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props);
|
|
1756
|
+
var size = propsGenerator.size,
|
|
1757
|
+
fill = propsGenerator.fill,
|
|
1758
|
+
fillHover = propsGenerator.fillHover,
|
|
1759
|
+
labelTextColor = propsGenerator.labelTextColor,
|
|
1760
|
+
borderColorHover = propsGenerator.borderColorHover,
|
|
1761
|
+
borderType = propsGenerator.borderType,
|
|
1762
|
+
borderWidth = propsGenerator.borderWidth,
|
|
1763
|
+
errorMessageTextColor = propsGenerator.errorMessageTextColor,
|
|
1764
|
+
errorMessageTextSize = propsGenerator.errorMessageTextSize,
|
|
1765
|
+
errorMessageTextWeight = propsGenerator.errorMessageTextWeight,
|
|
1766
|
+
hintDescriptionTextColor = propsGenerator.hintDescriptionTextColor,
|
|
1767
|
+
hintDescriptionTextSize = propsGenerator.hintDescriptionTextSize,
|
|
1768
|
+
hintDescriptionTextWeight = propsGenerator.hintDescriptionTextWeight,
|
|
1769
|
+
hintDescriptionTextWrap = propsGenerator.hintDescriptionTextWrap,
|
|
1770
|
+
hintTitleTextColor = propsGenerator.hintTitleTextColor,
|
|
1771
|
+
hintTitleTextSize = propsGenerator.hintTitleTextSize,
|
|
1772
|
+
hintTitleTextWeight = propsGenerator.hintTitleTextWeight,
|
|
1773
|
+
hintTitleTextWrap = propsGenerator.hintTitleTextWrap,
|
|
1774
|
+
removeThumbAppearance = propsGenerator.removeThumbAppearance,
|
|
1775
|
+
removeThumbShape = propsGenerator.removeThumbShape,
|
|
1776
|
+
removeThumbText = propsGenerator.removeThumbText,
|
|
1777
|
+
removeThumbTextWeight = propsGenerator.removeThumbTextWeight,
|
|
1778
|
+
shape = propsGenerator.shape,
|
|
1779
|
+
thumbBorderColor = propsGenerator.thumbBorderColor,
|
|
1780
|
+
thumbBorderColorHover = propsGenerator.thumbBorderColorHover,
|
|
1781
|
+
thumbBorderType = propsGenerator.thumbBorderType,
|
|
1782
|
+
thumbBorderWidth = propsGenerator.thumbBorderWidth,
|
|
1783
|
+
_propsGenerator$thumb = propsGenerator.thumbColumn,
|
|
1784
|
+
thumbColumn = _propsGenerator$thumb === void 0 ? 1 : _propsGenerator$thumb,
|
|
1785
|
+
_propsGenerator$thumb2 = propsGenerator.thumbDirection,
|
|
1786
|
+
thumbDirection = _propsGenerator$thumb2 === void 0 ? 'vertical' : _propsGenerator$thumb2,
|
|
1787
|
+
thumbNameTextColor = propsGenerator.thumbNameTextColor,
|
|
1788
|
+
thumbNameTextSize = propsGenerator.thumbNameTextSize,
|
|
1789
|
+
thumbNameTextWeight = propsGenerator.thumbNameTextWeight,
|
|
1790
|
+
thumbNameTextWrap = propsGenerator.thumbNameTextWrap;
|
|
1535
1791
|
return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Field, {
|
|
1536
1792
|
name: name
|
|
1537
|
-
}, function Render({
|
|
1538
|
-
input,
|
|
1539
|
-
|
|
1540
|
-
}) {
|
|
1793
|
+
}, function Render(_ref) {
|
|
1794
|
+
var input = _ref.input,
|
|
1795
|
+
meta = _ref.meta;
|
|
1541
1796
|
/** Note:
|
|
1542
1797
|
* Create "Render" function by "eslint-react-hooks/rules-of-hooks":
|
|
1543
1798
|
* React Hooks cannot be called inside a callback.
|
|
@@ -1545,17 +1800,16 @@ const FormFieldFileInput = /*#__PURE__*/React__default.default.memo(function For
|
|
|
1545
1800
|
* custom React Hook function.
|
|
1546
1801
|
*/
|
|
1547
1802
|
|
|
1548
|
-
|
|
1549
|
-
|
|
1550
|
-
|
|
1551
|
-
|
|
1552
|
-
|
|
1553
|
-
|
|
1554
|
-
|
|
1555
|
-
|
|
1556
|
-
|
|
1557
|
-
|
|
1558
|
-
const updatedInputProps = useValidationAppearanceInputProps({
|
|
1803
|
+
var _useFieldValidationSt = useFieldValidationState({
|
|
1804
|
+
fieldProps: fieldProps,
|
|
1805
|
+
input: input,
|
|
1806
|
+
meta: meta
|
|
1807
|
+
}),
|
|
1808
|
+
errorKey = _useFieldValidationSt.errorKey,
|
|
1809
|
+
errorMessage = _useFieldValidationSt.errorMessage,
|
|
1810
|
+
isErrorState = _useFieldValidationSt.isErrorState,
|
|
1811
|
+
isValidState = _useFieldValidationSt.isValidState;
|
|
1812
|
+
var updatedInputProps = useValidationAppearanceInputProps({
|
|
1559
1813
|
inputProps: props,
|
|
1560
1814
|
validationStateKey: isErrorState ? errorKey : 'success'
|
|
1561
1815
|
});
|
|
@@ -1634,7 +1888,7 @@ const FormFieldFileInput = /*#__PURE__*/React__default.default.memo(function For
|
|
|
1634
1888
|
});
|
|
1635
1889
|
});
|
|
1636
1890
|
|
|
1637
|
-
|
|
1891
|
+
var defaultGroupProps = {
|
|
1638
1892
|
width: 'fill',
|
|
1639
1893
|
labelTextSize: 's',
|
|
1640
1894
|
messageTextColor: 'surfaceTextPrimary',
|
|
@@ -1646,63 +1900,58 @@ const defaultGroupProps = {
|
|
|
1646
1900
|
requiredMessageTextSize: 's'
|
|
1647
1901
|
};
|
|
1648
1902
|
|
|
1649
|
-
|
|
1650
|
-
|
|
1651
|
-
|
|
1652
|
-
|
|
1653
|
-
|
|
1654
|
-
|
|
1655
|
-
|
|
1656
|
-
|
|
1657
|
-
|
|
1658
|
-
|
|
1659
|
-
|
|
1660
|
-
|
|
1661
|
-
|
|
1662
|
-
|
|
1663
|
-
|
|
1664
|
-
|
|
1665
|
-
|
|
1666
|
-
|
|
1667
|
-
|
|
1668
|
-
|
|
1669
|
-
|
|
1670
|
-
|
|
1671
|
-
children
|
|
1672
|
-
} = props;
|
|
1903
|
+
var FormBlockGroup = /*#__PURE__*/React__default.default.memo(function Group(props) {
|
|
1904
|
+
var dataTour = props.dataTour,
|
|
1905
|
+
className = props.className,
|
|
1906
|
+
name = props.name,
|
|
1907
|
+
title = props.title,
|
|
1908
|
+
titleTextColor = props.titleTextColor,
|
|
1909
|
+
titleTextSize = props.titleTextSize,
|
|
1910
|
+
titleTextWeight = props.titleTextWeight,
|
|
1911
|
+
label = props.label,
|
|
1912
|
+
labelTextColor = props.labelTextColor,
|
|
1913
|
+
labelTextSize = props.labelTextSize,
|
|
1914
|
+
labelTextWeight = props.labelTextWeight,
|
|
1915
|
+
message = props.message,
|
|
1916
|
+
messageTextColor = props.messageTextColor,
|
|
1917
|
+
messageTextSize = props.messageTextSize,
|
|
1918
|
+
messageTextWeight = props.messageTextWeight,
|
|
1919
|
+
column = props.column,
|
|
1920
|
+
showGroupMessage = props.showGroupMessage,
|
|
1921
|
+
before = props.before,
|
|
1922
|
+
after = props.after,
|
|
1923
|
+
isHidden = props.isHidden,
|
|
1924
|
+
children = props.children;
|
|
1673
1925
|
|
|
1674
1926
|
// @ts-expect-error
|
|
1675
|
-
|
|
1676
|
-
styles
|
|
1677
|
-
} = useStyles.useStyles(props);
|
|
1927
|
+
var _useStyles = useStyles.useStyles(props),
|
|
1928
|
+
styles = _useStyles.styles;
|
|
1678
1929
|
return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Field, {
|
|
1679
1930
|
name: name
|
|
1680
|
-
}, function Render({
|
|
1681
|
-
input,
|
|
1682
|
-
|
|
1683
|
-
}) {
|
|
1931
|
+
}, function Render(_ref) {
|
|
1932
|
+
var input = _ref.input,
|
|
1933
|
+
meta = _ref.meta;
|
|
1684
1934
|
/** Note:
|
|
1685
1935
|
* Create "Render" function by "eslint-react-hooks/rules-of-hooks":
|
|
1686
1936
|
* React Hooks cannot be called inside a callback.
|
|
1687
1937
|
* React Hooks must be called in a React function component or a
|
|
1688
1938
|
* custom React Hook function.
|
|
1689
1939
|
*/
|
|
1690
|
-
|
|
1691
|
-
|
|
1692
|
-
|
|
1693
|
-
|
|
1694
|
-
|
|
1695
|
-
|
|
1696
|
-
|
|
1697
|
-
|
|
1698
|
-
|
|
1699
|
-
|
|
1700
|
-
const updatedProps = useValidationAppearanceInputProps({
|
|
1940
|
+
var _useFieldValidationSt = useFieldValidationState({
|
|
1941
|
+
fieldProps: props,
|
|
1942
|
+
// or fieldProps?
|
|
1943
|
+
input: input,
|
|
1944
|
+
meta: meta
|
|
1945
|
+
}),
|
|
1946
|
+
errorKey = _useFieldValidationSt.errorKey,
|
|
1947
|
+
errorMessage = _useFieldValidationSt.errorMessage,
|
|
1948
|
+
isErrorState = _useFieldValidationSt.isErrorState;
|
|
1949
|
+
var updatedProps = useValidationAppearanceInputProps({
|
|
1701
1950
|
inputProps: props,
|
|
1702
1951
|
validationStateKey: isErrorState ? errorKey : 'success'
|
|
1703
1952
|
});
|
|
1704
1953
|
return /*#__PURE__*/React__default.default.createElement("div", {
|
|
1705
|
-
className: clsx__default.default('form__group', className, isHidden && 'form__group_hidden', column &&
|
|
1954
|
+
className: clsx__default.default('form__group', className, isHidden && 'form__group_hidden', column && "form__group_column_" + column),
|
|
1706
1955
|
"data-tour": dataTour,
|
|
1707
1956
|
style: styles
|
|
1708
1957
|
}, /*#__PURE__*/React__default.default.createElement("div", {
|
|
@@ -1722,8 +1971,8 @@ const FormBlockGroup = /*#__PURE__*/React__default.default.memo(function Group(p
|
|
|
1722
1971
|
}, label)), /*#__PURE__*/React__default.default.createElement("div", {
|
|
1723
1972
|
className: "form__group-items"
|
|
1724
1973
|
}, children), after), showGroupMessage && /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, isErrorState && errorMessage && /*#__PURE__*/React__default.default.createElement(Text.Text, {
|
|
1725
|
-
id:
|
|
1726
|
-
className:
|
|
1974
|
+
id: name + "-error",
|
|
1975
|
+
className: "form__group-message form__group-message_type-" + errorKey,
|
|
1727
1976
|
size: updatedProps.messageTextSize,
|
|
1728
1977
|
textColor: updatedProps.messageTextColor,
|
|
1729
1978
|
textWeight: updatedProps.messageTextWeight
|
|
@@ -1735,11 +1984,11 @@ const FormBlockGroup = /*#__PURE__*/React__default.default.memo(function Group(p
|
|
|
1735
1984
|
}, message), !isErrorState && !message && /*#__PURE__*/React__default.default.createElement(Text.Text, {
|
|
1736
1985
|
className: "form__group-message",
|
|
1737
1986
|
size: messageTextSize
|
|
1738
|
-
},
|
|
1987
|
+
}, "\xA0")));
|
|
1739
1988
|
});
|
|
1740
1989
|
});
|
|
1741
1990
|
|
|
1742
|
-
|
|
1991
|
+
var defaultInputProps = {
|
|
1743
1992
|
appearance: 'defaultPrimary sizeM solid rounded',
|
|
1744
1993
|
width: 'fill',
|
|
1745
1994
|
// useValidationAppearanceInputProps
|
|
@@ -1751,33 +2000,32 @@ const defaultInputProps = {
|
|
|
1751
2000
|
successAppearance: 'successPrimary sizeM solid rounded'
|
|
1752
2001
|
};
|
|
1753
2002
|
|
|
1754
|
-
|
|
1755
|
-
|
|
1756
|
-
|
|
1757
|
-
|
|
1758
|
-
|
|
1759
|
-
|
|
1760
|
-
|
|
1761
|
-
|
|
1762
|
-
|
|
1763
|
-
|
|
1764
|
-
fieldProps = {},
|
|
1765
|
-
inputProps =
|
|
1766
|
-
|
|
1767
|
-
|
|
1768
|
-
|
|
1769
|
-
|
|
1770
|
-
|
|
1771
|
-
|
|
1772
|
-
|
|
2003
|
+
var FormFieldInput = /*#__PURE__*/React__default.default.memo(function FormFieldInput(props) {
|
|
2004
|
+
var name = props.name,
|
|
2005
|
+
initialValue = props.initialValue,
|
|
2006
|
+
classNameGroupItem = props.classNameGroupItem,
|
|
2007
|
+
clearIcon = props.clearIcon,
|
|
2008
|
+
clearIconFill = props.clearIconFill,
|
|
2009
|
+
clearIconFillHover = props.clearIconFillHover,
|
|
2010
|
+
clearIconShape = props.clearIconShape,
|
|
2011
|
+
clearIconSize = props.clearIconSize,
|
|
2012
|
+
_props$fieldProps = props.fieldProps,
|
|
2013
|
+
fieldProps = _props$fieldProps === void 0 ? {} : _props$fieldProps,
|
|
2014
|
+
_props$inputProps = props.inputProps,
|
|
2015
|
+
inputProps = _props$inputProps === void 0 ? {} : _props$inputProps,
|
|
2016
|
+
parse = props.parse,
|
|
2017
|
+
showMessage = props.showMessage,
|
|
2018
|
+
isDisabled = props.isDisabled,
|
|
2019
|
+
isRequired = props.isRequired,
|
|
2020
|
+
onClickClearIcon = props.onClickClearIcon,
|
|
2021
|
+
onChange = props.onChange;
|
|
1773
2022
|
return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Field, {
|
|
1774
2023
|
name: name,
|
|
1775
2024
|
initialValue: initialValue,
|
|
1776
2025
|
parse: parse
|
|
1777
|
-
}, function Render({
|
|
1778
|
-
input,
|
|
1779
|
-
|
|
1780
|
-
}) {
|
|
2026
|
+
}, function Render(_ref) {
|
|
2027
|
+
var input = _ref.input,
|
|
2028
|
+
meta = _ref.meta;
|
|
1781
2029
|
/** Note:
|
|
1782
2030
|
* Create "Render" function by "eslint-react-hooks/rules-of-hooks":
|
|
1783
2031
|
* React Hooks cannot be called inside a callback.
|
|
@@ -1785,24 +2033,23 @@ const FormFieldInput = /*#__PURE__*/React__default.default.memo(function FormFie
|
|
|
1785
2033
|
* custom React Hook function.
|
|
1786
2034
|
*/
|
|
1787
2035
|
|
|
1788
|
-
|
|
2036
|
+
var onChangeField = React.useCallback(function (event) {
|
|
1789
2037
|
input.onChange(event);
|
|
1790
2038
|
if (onChange) {
|
|
1791
2039
|
onChange(event.target.value, input.name);
|
|
1792
2040
|
}
|
|
1793
2041
|
}, [onChange, input.onChange]);
|
|
1794
|
-
|
|
1795
|
-
|
|
1796
|
-
|
|
1797
|
-
|
|
1798
|
-
|
|
1799
|
-
|
|
1800
|
-
|
|
1801
|
-
|
|
1802
|
-
|
|
1803
|
-
|
|
1804
|
-
|
|
1805
|
-
const updatedInputProps = useValidationAppearanceInputProps({
|
|
2042
|
+
var _useFieldValidationSt = useFieldValidationState({
|
|
2043
|
+
fieldProps: fieldProps,
|
|
2044
|
+
input: input,
|
|
2045
|
+
meta: meta
|
|
2046
|
+
}),
|
|
2047
|
+
errorKey = _useFieldValidationSt.errorKey,
|
|
2048
|
+
errorMessage = _useFieldValidationSt.errorMessage,
|
|
2049
|
+
successKey = _useFieldValidationSt.successKey,
|
|
2050
|
+
isErrorState = _useFieldValidationSt.isErrorState,
|
|
2051
|
+
isValidState = _useFieldValidationSt.isValidState;
|
|
2052
|
+
var updatedInputProps = useValidationAppearanceInputProps({
|
|
1806
2053
|
inputProps: inputProps,
|
|
1807
2054
|
validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
|
|
1808
2055
|
});
|
|
@@ -1821,8 +2068,8 @@ const FormFieldInput = /*#__PURE__*/React__default.default.memo(function FormFie
|
|
|
1821
2068
|
isRequired: isRequired,
|
|
1822
2069
|
isValidState: isValidState
|
|
1823
2070
|
}, fieldProps), /*#__PURE__*/React__default.default.createElement(Input.Input, Object.assign({
|
|
1824
|
-
className: clsx__default.default(meta.active && 'input_state_focus', meta.error && meta.touched &&
|
|
1825
|
-
dataTestId:
|
|
2071
|
+
className: clsx__default.default(meta.active && 'input_state_focus', meta.error && meta.touched && "input_state_" + errorKey),
|
|
2072
|
+
dataTestId: input.name + "-field-input",
|
|
1826
2073
|
type: "text",
|
|
1827
2074
|
name: input.name,
|
|
1828
2075
|
autoComplete: "nope",
|
|
@@ -1844,50 +2091,49 @@ const FormFieldInput = /*#__PURE__*/React__default.default.memo(function FormFie
|
|
|
1844
2091
|
});
|
|
1845
2092
|
});
|
|
1846
2093
|
|
|
1847
|
-
|
|
2094
|
+
var defaultInputNumberProps = {
|
|
1848
2095
|
appearance: 'surfaceSecondary sizeM solid rounded',
|
|
1849
2096
|
width: 'fill'
|
|
1850
2097
|
};
|
|
1851
2098
|
|
|
1852
|
-
|
|
1853
|
-
|
|
1854
|
-
type = 'custom',
|
|
1855
|
-
name,
|
|
1856
|
-
initialValue,
|
|
1857
|
-
classNameGroupItem,
|
|
1858
|
-
fieldProps =
|
|
1859
|
-
|
|
1860
|
-
|
|
1861
|
-
|
|
1862
|
-
|
|
1863
|
-
|
|
1864
|
-
|
|
1865
|
-
|
|
2099
|
+
var FormFieldInputNumber = /*#__PURE__*/React__default.default.memo(function FormFieldInputNumber(props) {
|
|
2100
|
+
var _props$type = props.type,
|
|
2101
|
+
type = _props$type === void 0 ? 'custom' : _props$type,
|
|
2102
|
+
name = props.name,
|
|
2103
|
+
initialValue = props.initialValue,
|
|
2104
|
+
classNameGroupItem = props.classNameGroupItem,
|
|
2105
|
+
_props$fieldProps = props.fieldProps,
|
|
2106
|
+
fieldProps = _props$fieldProps === void 0 ? {} : _props$fieldProps,
|
|
2107
|
+
_props$inputProps = props.inputProps,
|
|
2108
|
+
inputProps = _props$inputProps === void 0 ? {} : _props$inputProps,
|
|
2109
|
+
parse = props.parse,
|
|
2110
|
+
showMessage = props.showMessage,
|
|
2111
|
+
isDisabled = props.isDisabled,
|
|
2112
|
+
isRequired = props.isRequired,
|
|
2113
|
+
onChange = props.onChange;
|
|
1866
2114
|
return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Field, {
|
|
1867
2115
|
name: name,
|
|
1868
2116
|
initialValue: initialValue,
|
|
1869
2117
|
parse: parse
|
|
1870
|
-
}, function Render({
|
|
1871
|
-
input,
|
|
1872
|
-
|
|
1873
|
-
|
|
1874
|
-
const onChangeField = React.useCallback(event => {
|
|
2118
|
+
}, function Render(_ref) {
|
|
2119
|
+
var input = _ref.input,
|
|
2120
|
+
meta = _ref.meta;
|
|
2121
|
+
var onChangeField = React.useCallback(function (event) {
|
|
1875
2122
|
input.onChange(event);
|
|
1876
2123
|
if (onChange) {
|
|
1877
2124
|
onChange(event.target.value);
|
|
1878
2125
|
}
|
|
1879
2126
|
}, [onChange, input.onChange]);
|
|
1880
|
-
|
|
1881
|
-
|
|
1882
|
-
|
|
1883
|
-
|
|
1884
|
-
|
|
1885
|
-
|
|
1886
|
-
|
|
1887
|
-
|
|
1888
|
-
|
|
1889
|
-
|
|
1890
|
-
const updatedInputProps = useValidationAppearanceInputProps({
|
|
2127
|
+
var _useFieldValidationSt = useFieldValidationState({
|
|
2128
|
+
fieldProps: fieldProps,
|
|
2129
|
+
input: input,
|
|
2130
|
+
meta: meta
|
|
2131
|
+
}),
|
|
2132
|
+
errorKey = _useFieldValidationSt.errorKey,
|
|
2133
|
+
errorMessage = _useFieldValidationSt.errorMessage,
|
|
2134
|
+
isErrorState = _useFieldValidationSt.isErrorState,
|
|
2135
|
+
isValidState = _useFieldValidationSt.isValidState;
|
|
2136
|
+
var updatedInputProps = useValidationAppearanceInputProps({
|
|
1891
2137
|
inputProps: inputProps
|
|
1892
2138
|
});
|
|
1893
2139
|
return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
|
|
@@ -1905,8 +2151,8 @@ const FormFieldInputNumber = /*#__PURE__*/React__default.default.memo(function F
|
|
|
1905
2151
|
isRequired: isRequired,
|
|
1906
2152
|
isValidState: isValidState
|
|
1907
2153
|
}, fieldProps), /*#__PURE__*/React__default.default.createElement(InputNumber.InputNumber, Object.assign({
|
|
1908
|
-
className: clsx__default.default(meta.active && 'input_state_focus', (meta.submitFailed || meta.touched) && meta.error &&
|
|
1909
|
-
dataTestId:
|
|
2154
|
+
className: clsx__default.default(meta.active && 'input_state_focus', (meta.submitFailed || meta.touched) && meta.error && "input_state_" + errorKey),
|
|
2155
|
+
dataTestId: input.name + "FieldInputNumber",
|
|
1910
2156
|
type: type,
|
|
1911
2157
|
name: input.name,
|
|
1912
2158
|
value: input.value || 0,
|
|
@@ -1915,32 +2161,31 @@ const FormFieldInputNumber = /*#__PURE__*/React__default.default.memo(function F
|
|
|
1915
2161
|
});
|
|
1916
2162
|
});
|
|
1917
2163
|
|
|
1918
|
-
|
|
1919
|
-
|
|
1920
|
-
|
|
1921
|
-
|
|
1922
|
-
|
|
1923
|
-
|
|
1924
|
-
|
|
1925
|
-
|
|
1926
|
-
|
|
1927
|
-
|
|
1928
|
-
fieldProps = {},
|
|
1929
|
-
inputProps =
|
|
1930
|
-
|
|
1931
|
-
|
|
1932
|
-
|
|
1933
|
-
|
|
1934
|
-
|
|
1935
|
-
|
|
1936
|
-
|
|
2164
|
+
var FormFieldMaskedInput = /*#__PURE__*/React__default.default.memo(function FormFieldMaskedInput(props) {
|
|
2165
|
+
var name = props.name,
|
|
2166
|
+
initialValue = props.initialValue,
|
|
2167
|
+
classNameGroupItem = props.classNameGroupItem,
|
|
2168
|
+
clearIcon = props.clearIcon,
|
|
2169
|
+
clearIconFill = props.clearIconFill,
|
|
2170
|
+
clearIconFillHover = props.clearIconFillHover,
|
|
2171
|
+
clearIconShape = props.clearIconShape,
|
|
2172
|
+
clearIconSize = props.clearIconSize,
|
|
2173
|
+
_props$fieldProps = props.fieldProps,
|
|
2174
|
+
fieldProps = _props$fieldProps === void 0 ? {} : _props$fieldProps,
|
|
2175
|
+
_props$inputProps = props.inputProps,
|
|
2176
|
+
inputProps = _props$inputProps === void 0 ? {} : _props$inputProps,
|
|
2177
|
+
optionsMask = props.optionsMask,
|
|
2178
|
+
showMessage = props.showMessage,
|
|
2179
|
+
unmasked = props.unmasked,
|
|
2180
|
+
isDisabled = props.isDisabled,
|
|
2181
|
+
isRequired = props.isRequired,
|
|
2182
|
+
onClickClearIcon = props.onClickClearIcon;
|
|
1937
2183
|
return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Field, {
|
|
1938
2184
|
name: name,
|
|
1939
2185
|
initialValue: initialValue
|
|
1940
|
-
}, function Render({
|
|
1941
|
-
input,
|
|
1942
|
-
|
|
1943
|
-
}) {
|
|
2186
|
+
}, function Render(_ref) {
|
|
2187
|
+
var input = _ref.input,
|
|
2188
|
+
meta = _ref.meta;
|
|
1944
2189
|
/** Note:
|
|
1945
2190
|
* Create "Render" function by "eslint-react-hooks/rules-of-hooks":
|
|
1946
2191
|
* React Hooks cannot be called inside a callback.
|
|
@@ -1948,36 +2193,34 @@ const FormFieldMaskedInput = /*#__PURE__*/React__default.default.memo(function F
|
|
|
1948
2193
|
* custom React Hook function.
|
|
1949
2194
|
*/
|
|
1950
2195
|
|
|
1951
|
-
|
|
1952
|
-
|
|
1953
|
-
|
|
1954
|
-
|
|
1955
|
-
|
|
1956
|
-
|
|
1957
|
-
defaultValue: initialValue,
|
|
1958
|
-
onAccept: (_newValue, event, element) => {
|
|
1959
|
-
if (element) {
|
|
1960
|
-
input.onChange(event._unmaskedValue);
|
|
2196
|
+
var _useIMask = reactImask.useIMask(optionsMask, {
|
|
2197
|
+
defaultValue: initialValue,
|
|
2198
|
+
onAccept: function onAccept(_newValue, event, element) {
|
|
2199
|
+
if (element) {
|
|
2200
|
+
input.onChange(event._unmaskedValue);
|
|
2201
|
+
}
|
|
1961
2202
|
}
|
|
1962
|
-
}
|
|
1963
|
-
|
|
1964
|
-
|
|
2203
|
+
}),
|
|
2204
|
+
ref = _useIMask.ref,
|
|
2205
|
+
unmaskedValue = _useIMask.unmaskedValue,
|
|
2206
|
+
value = _useIMask.value,
|
|
2207
|
+
setUnmaskedValue = _useIMask.setUnmaskedValue;
|
|
2208
|
+
React.useEffect(function () {
|
|
1965
2209
|
if (input.value !== unmaskedValue) {
|
|
1966
2210
|
setUnmaskedValue(input.value.replace(unmasked, ''));
|
|
1967
2211
|
}
|
|
1968
2212
|
}, [input.value]);
|
|
1969
|
-
|
|
1970
|
-
|
|
1971
|
-
|
|
1972
|
-
|
|
1973
|
-
|
|
1974
|
-
|
|
1975
|
-
|
|
1976
|
-
|
|
1977
|
-
|
|
1978
|
-
|
|
1979
|
-
|
|
1980
|
-
const updatedInputProps = useValidationAppearanceInputProps({
|
|
2213
|
+
var _useFieldValidationSt = useFieldValidationState({
|
|
2214
|
+
fieldProps: fieldProps,
|
|
2215
|
+
input: input,
|
|
2216
|
+
meta: meta
|
|
2217
|
+
}),
|
|
2218
|
+
errorKey = _useFieldValidationSt.errorKey,
|
|
2219
|
+
errorMessage = _useFieldValidationSt.errorMessage,
|
|
2220
|
+
successKey = _useFieldValidationSt.successKey,
|
|
2221
|
+
isErrorState = _useFieldValidationSt.isErrorState,
|
|
2222
|
+
isValidState = _useFieldValidationSt.isValidState;
|
|
2223
|
+
var updatedInputProps = useValidationAppearanceInputProps({
|
|
1981
2224
|
inputProps: inputProps,
|
|
1982
2225
|
validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
|
|
1983
2226
|
});
|
|
@@ -1996,7 +2239,7 @@ const FormFieldMaskedInput = /*#__PURE__*/React__default.default.memo(function F
|
|
|
1996
2239
|
isRequired: isRequired,
|
|
1997
2240
|
isValidState: isValidState
|
|
1998
2241
|
}, fieldProps), /*#__PURE__*/React__default.default.createElement(Input.Input, Object.assign({
|
|
1999
|
-
className: clsx__default.default(meta.active && 'input_state_focus', meta.error && meta.touched &&
|
|
2242
|
+
className: clsx__default.default(meta.active && 'input_state_focus', meta.error && meta.touched && "input_state_" + errorKey),
|
|
2000
2243
|
ref: ref,
|
|
2001
2244
|
value: value,
|
|
2002
2245
|
onBlur: input.onBlur,
|
|
@@ -2014,7 +2257,7 @@ const FormFieldMaskedInput = /*#__PURE__*/React__default.default.memo(function F
|
|
|
2014
2257
|
});
|
|
2015
2258
|
});
|
|
2016
2259
|
|
|
2017
|
-
|
|
2260
|
+
var defaultPasswordProps = {
|
|
2018
2261
|
appearance: 'defaultPrimary sizeM solid rounded',
|
|
2019
2262
|
// useValidationAppearanceInputProps
|
|
2020
2263
|
// Error
|
|
@@ -2025,27 +2268,24 @@ const defaultPasswordProps = {
|
|
|
2025
2268
|
successAppearance: 'successPrimary sizeM solid rounded'
|
|
2026
2269
|
};
|
|
2027
2270
|
|
|
2028
|
-
|
|
2029
|
-
|
|
2030
|
-
|
|
2031
|
-
|
|
2032
|
-
|
|
2033
|
-
|
|
2034
|
-
|
|
2035
|
-
|
|
2036
|
-
|
|
2037
|
-
|
|
2038
|
-
|
|
2039
|
-
onChange
|
|
2040
|
-
} = props;
|
|
2271
|
+
var FormFieldPassword = /*#__PURE__*/React__default.default.memo(function FormFieldPassword(props) {
|
|
2272
|
+
var name = props.name,
|
|
2273
|
+
initialValue = props.initialValue,
|
|
2274
|
+
classNameGroupItem = props.classNameGroupItem,
|
|
2275
|
+
fieldProps = props.fieldProps,
|
|
2276
|
+
inputProps = props.inputProps,
|
|
2277
|
+
parse = props.parse,
|
|
2278
|
+
showMessage = props.showMessage,
|
|
2279
|
+
isDisabled = props.isDisabled,
|
|
2280
|
+
isRequired = props.isRequired,
|
|
2281
|
+
onChange = props.onChange;
|
|
2041
2282
|
return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Field, {
|
|
2042
2283
|
name: name,
|
|
2043
2284
|
initialValue: initialValue,
|
|
2044
2285
|
parse: parse
|
|
2045
|
-
}, function Render({
|
|
2046
|
-
input,
|
|
2047
|
-
|
|
2048
|
-
}) {
|
|
2286
|
+
}, function Render(_ref) {
|
|
2287
|
+
var input = _ref.input,
|
|
2288
|
+
meta = _ref.meta;
|
|
2049
2289
|
/** Note:
|
|
2050
2290
|
* Create "Render" function by "eslint-react-hooks/rules-of-hooks":
|
|
2051
2291
|
* React Hooks cannot be called inside a callback.
|
|
@@ -2053,24 +2293,23 @@ const FormFieldPassword = /*#__PURE__*/React__default.default.memo(function Form
|
|
|
2053
2293
|
* custom React Hook function.
|
|
2054
2294
|
*/
|
|
2055
2295
|
|
|
2056
|
-
|
|
2296
|
+
var onChangeField = React.useCallback(function (event) {
|
|
2057
2297
|
input.onChange(event);
|
|
2058
2298
|
if (onChange) {
|
|
2059
2299
|
onChange(event.target.value, input.name);
|
|
2060
2300
|
}
|
|
2061
2301
|
}, [onChange, input.onChange]);
|
|
2062
|
-
|
|
2063
|
-
|
|
2064
|
-
|
|
2065
|
-
|
|
2066
|
-
|
|
2067
|
-
|
|
2068
|
-
|
|
2069
|
-
|
|
2070
|
-
|
|
2071
|
-
|
|
2072
|
-
|
|
2073
|
-
const updatedInputProps = useValidationAppearanceInputProps({
|
|
2302
|
+
var _useFieldValidationSt = useFieldValidationState({
|
|
2303
|
+
fieldProps: fieldProps,
|
|
2304
|
+
input: input,
|
|
2305
|
+
meta: meta
|
|
2306
|
+
}),
|
|
2307
|
+
errorKey = _useFieldValidationSt.errorKey,
|
|
2308
|
+
errorMessage = _useFieldValidationSt.errorMessage,
|
|
2309
|
+
successKey = _useFieldValidationSt.successKey,
|
|
2310
|
+
isErrorState = _useFieldValidationSt.isErrorState,
|
|
2311
|
+
isValidState = _useFieldValidationSt.isValidState;
|
|
2312
|
+
var updatedInputProps = useValidationAppearanceInputProps({
|
|
2074
2313
|
inputProps: inputProps,
|
|
2075
2314
|
validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
|
|
2076
2315
|
});
|
|
@@ -2089,8 +2328,8 @@ const FormFieldPassword = /*#__PURE__*/React__default.default.memo(function Form
|
|
|
2089
2328
|
isRequired: isRequired,
|
|
2090
2329
|
isValidState: isValidState
|
|
2091
2330
|
}, fieldProps), /*#__PURE__*/React__default.default.createElement(InputPassword.InputPassword, Object.assign({
|
|
2092
|
-
className: clsx__default.default(meta.active && 'input-password_state_focus', meta.error && meta.touched &&
|
|
2093
|
-
dataTestId:
|
|
2331
|
+
className: clsx__default.default(meta.active && 'input-password_state_focus', meta.error && meta.touched && "input-password_state_" + errorKey),
|
|
2332
|
+
dataTestId: input.name + "-field-input-password",
|
|
2094
2333
|
name: input.name,
|
|
2095
2334
|
autoComplete: "nope",
|
|
2096
2335
|
value: input.value || '',
|
|
@@ -2102,20 +2341,18 @@ const FormFieldPassword = /*#__PURE__*/React__default.default.memo(function Form
|
|
|
2102
2341
|
});
|
|
2103
2342
|
});
|
|
2104
2343
|
|
|
2105
|
-
|
|
2344
|
+
var defaultRadioProps = {
|
|
2106
2345
|
appearance: 'defaultPrimary sizeM solid circular'
|
|
2107
2346
|
};
|
|
2108
2347
|
|
|
2109
2348
|
function FormFieldRadioGroupList(props) {
|
|
2110
|
-
|
|
2111
|
-
|
|
2112
|
-
|
|
2113
|
-
|
|
2114
|
-
onChange
|
|
2115
|
-
} = props;
|
|
2349
|
+
var input = props.input,
|
|
2350
|
+
inputProps = props.inputProps,
|
|
2351
|
+
options = props.options,
|
|
2352
|
+
onChange = props.onChange;
|
|
2116
2353
|
|
|
2117
2354
|
// Callback for value changes
|
|
2118
|
-
|
|
2355
|
+
var onChangeSomeInput = React.useCallback(function (value) {
|
|
2119
2356
|
// Save to form values
|
|
2120
2357
|
input.onChange(value);
|
|
2121
2358
|
if (onChange) {
|
|
@@ -2125,44 +2362,47 @@ function FormFieldRadioGroupList(props) {
|
|
|
2125
2362
|
}, [input, onChange]);
|
|
2126
2363
|
|
|
2127
2364
|
// Handle for radio inputs
|
|
2128
|
-
|
|
2365
|
+
var onChangeRadio = React.useCallback(function (event) {
|
|
2129
2366
|
if (event.target.checked) {
|
|
2130
2367
|
onChangeSomeInput(event.target.value);
|
|
2131
2368
|
}
|
|
2132
2369
|
}, [onChange]);
|
|
2133
|
-
return /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, options.map(
|
|
2134
|
-
|
|
2135
|
-
|
|
2136
|
-
|
|
2137
|
-
|
|
2138
|
-
|
|
2139
|
-
|
|
2140
|
-
|
|
2141
|
-
|
|
2142
|
-
|
|
2143
|
-
|
|
2144
|
-
|
|
2370
|
+
return /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, options.map(function (option) {
|
|
2371
|
+
return /*#__PURE__*/React__default.default.createElement(Radio.Radio, Object.assign({
|
|
2372
|
+
className: "form-radio__item",
|
|
2373
|
+
key: option.value,
|
|
2374
|
+
type: "radio",
|
|
2375
|
+
name: input.name,
|
|
2376
|
+
label: option.label,
|
|
2377
|
+
checked: option.value === input.value,
|
|
2378
|
+
value: option.value,
|
|
2379
|
+
onBlur: input.onBlur,
|
|
2380
|
+
onChange: onChangeRadio,
|
|
2381
|
+
onFocus: input.onFocus
|
|
2382
|
+
}, inputProps));
|
|
2383
|
+
}));
|
|
2145
2384
|
}
|
|
2146
2385
|
|
|
2147
|
-
|
|
2148
|
-
|
|
2149
|
-
|
|
2150
|
-
|
|
2151
|
-
editableProps = {},
|
|
2152
|
-
fieldProps =
|
|
2153
|
-
|
|
2154
|
-
|
|
2155
|
-
|
|
2156
|
-
|
|
2157
|
-
|
|
2158
|
-
|
|
2159
|
-
|
|
2386
|
+
var FormFieldRadioGroup = /*#__PURE__*/React__default.default.memo(function FormFieldRadioGroup(props) {
|
|
2387
|
+
var name = props.name,
|
|
2388
|
+
isDisabled = props.isDisabled,
|
|
2389
|
+
_props$editableProps = props.editableProps,
|
|
2390
|
+
editableProps = _props$editableProps === void 0 ? {} : _props$editableProps,
|
|
2391
|
+
_props$fieldProps = props.fieldProps,
|
|
2392
|
+
fieldProps = _props$fieldProps === void 0 ? {} : _props$fieldProps,
|
|
2393
|
+
_props$inputProps = props.inputProps,
|
|
2394
|
+
inputProps = _props$inputProps === void 0 ? {} : _props$inputProps,
|
|
2395
|
+
_props$options = props.options,
|
|
2396
|
+
options = _props$options === void 0 ? [] : _props$options,
|
|
2397
|
+
classNameGroupItem = props.classNameGroupItem,
|
|
2398
|
+
showMessage = props.showMessage,
|
|
2399
|
+
isRequired = props.isRequired,
|
|
2400
|
+
onChange = props.onChange;
|
|
2160
2401
|
return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Field, {
|
|
2161
2402
|
name: name
|
|
2162
|
-
}, function Render({
|
|
2163
|
-
input,
|
|
2164
|
-
|
|
2165
|
-
}) {
|
|
2403
|
+
}, function Render(_ref) {
|
|
2404
|
+
var input = _ref.input,
|
|
2405
|
+
meta = _ref.meta;
|
|
2166
2406
|
/** Note:
|
|
2167
2407
|
* Create "Render" function by "eslint-react-hooks/rules-of-hooks":
|
|
2168
2408
|
* React Hooks cannot be called inside a callback.
|
|
@@ -2170,17 +2410,16 @@ const FormFieldRadioGroup = /*#__PURE__*/React__default.default.memo(function Fo
|
|
|
2170
2410
|
* custom React Hook function.
|
|
2171
2411
|
*/
|
|
2172
2412
|
|
|
2173
|
-
|
|
2174
|
-
|
|
2175
|
-
|
|
2176
|
-
|
|
2177
|
-
|
|
2178
|
-
|
|
2179
|
-
|
|
2180
|
-
|
|
2181
|
-
|
|
2182
|
-
|
|
2183
|
-
const updatedInputProps = useValidationAppearanceInputProps({
|
|
2413
|
+
var _useFieldValidationSt = useFieldValidationState({
|
|
2414
|
+
fieldProps: fieldProps,
|
|
2415
|
+
input: input,
|
|
2416
|
+
meta: meta
|
|
2417
|
+
}),
|
|
2418
|
+
errorKey = _useFieldValidationSt.errorKey,
|
|
2419
|
+
errorMessage = _useFieldValidationSt.errorMessage,
|
|
2420
|
+
isErrorState = _useFieldValidationSt.isErrorState,
|
|
2421
|
+
isValidState = _useFieldValidationSt.isValidState;
|
|
2422
|
+
var updatedInputProps = useValidationAppearanceInputProps({
|
|
2184
2423
|
inputProps: inputProps,
|
|
2185
2424
|
validationStateKey: isErrorState ? errorKey : 'success'
|
|
2186
2425
|
});
|
|
@@ -2209,7 +2448,7 @@ const FormFieldRadioGroup = /*#__PURE__*/React__default.default.memo(function Fo
|
|
|
2209
2448
|
});
|
|
2210
2449
|
});
|
|
2211
2450
|
|
|
2212
|
-
|
|
2451
|
+
var defaultSegmentedProps = {
|
|
2213
2452
|
appearance: 'defaultPrimary sizeM solid rounded',
|
|
2214
2453
|
width: 'fill',
|
|
2215
2454
|
// useValidationAppearanceInputProps
|
|
@@ -2220,27 +2459,23 @@ const defaultSegmentedProps = {
|
|
|
2220
2459
|
};
|
|
2221
2460
|
|
|
2222
2461
|
function FormFieldSegmented(props) {
|
|
2223
|
-
|
|
2224
|
-
|
|
2225
|
-
|
|
2226
|
-
|
|
2227
|
-
|
|
2228
|
-
|
|
2229
|
-
|
|
2230
|
-
|
|
2231
|
-
|
|
2232
|
-
|
|
2233
|
-
change
|
|
2234
|
-
} = reactFinalForm.useForm();
|
|
2235
|
-
const setActiveSegment = React.useCallback(option => {
|
|
2462
|
+
var name = props.name,
|
|
2463
|
+
isDisabled = props.isDisabled,
|
|
2464
|
+
fieldProps = props.fieldProps,
|
|
2465
|
+
inputProps = props.inputProps,
|
|
2466
|
+
options = props.options,
|
|
2467
|
+
showMessage = props.showMessage,
|
|
2468
|
+
isRequired = props.isRequired;
|
|
2469
|
+
var _useForm = reactFinalForm.useForm(),
|
|
2470
|
+
change = _useForm.change;
|
|
2471
|
+
var setActiveSegment = React.useCallback(function (option) {
|
|
2236
2472
|
change(name, option.value);
|
|
2237
2473
|
}, [change]);
|
|
2238
2474
|
return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Field, {
|
|
2239
2475
|
name: name
|
|
2240
|
-
}, function Render({
|
|
2241
|
-
input,
|
|
2242
|
-
|
|
2243
|
-
}) {
|
|
2476
|
+
}, function Render(_ref) {
|
|
2477
|
+
var input = _ref.input,
|
|
2478
|
+
meta = _ref.meta;
|
|
2244
2479
|
/** Note:
|
|
2245
2480
|
* Create "Render" function by "eslint-react-hooks/rules-of-hooks":
|
|
2246
2481
|
* React Hooks cannot be called inside a callback.
|
|
@@ -2248,29 +2483,30 @@ function FormFieldSegmented(props) {
|
|
|
2248
2483
|
* custom React Hook function.
|
|
2249
2484
|
*/
|
|
2250
2485
|
|
|
2251
|
-
|
|
2252
|
-
|
|
2486
|
+
var activeOption = React.useMemo(function () {
|
|
2487
|
+
var emptyOption = {
|
|
2253
2488
|
label: null,
|
|
2254
2489
|
value: null
|
|
2255
2490
|
};
|
|
2256
2491
|
if (input.value) {
|
|
2257
|
-
|
|
2492
|
+
var currentOption = options.find(function (option) {
|
|
2493
|
+
return option.value === input.value;
|
|
2494
|
+
});
|
|
2258
2495
|
return currentOption || emptyOption;
|
|
2259
2496
|
}
|
|
2260
2497
|
return emptyOption;
|
|
2261
2498
|
}, [input.value]);
|
|
2262
|
-
|
|
2263
|
-
|
|
2264
|
-
|
|
2265
|
-
|
|
2266
|
-
|
|
2267
|
-
|
|
2268
|
-
|
|
2269
|
-
|
|
2270
|
-
|
|
2271
|
-
|
|
2272
|
-
|
|
2273
|
-
const updatedInputProps = useValidationAppearanceInputProps({
|
|
2499
|
+
var _useFieldValidationSt = useFieldValidationState({
|
|
2500
|
+
fieldProps: fieldProps,
|
|
2501
|
+
input: input,
|
|
2502
|
+
meta: meta
|
|
2503
|
+
}),
|
|
2504
|
+
errorKey = _useFieldValidationSt.errorKey,
|
|
2505
|
+
errorMessage = _useFieldValidationSt.errorMessage,
|
|
2506
|
+
isErrorState = _useFieldValidationSt.isErrorState,
|
|
2507
|
+
successKey = _useFieldValidationSt.successKey,
|
|
2508
|
+
isValidState = _useFieldValidationSt.isValidState;
|
|
2509
|
+
var updatedInputProps = useValidationAppearanceInputProps({
|
|
2274
2510
|
inputProps: inputProps,
|
|
2275
2511
|
validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
|
|
2276
2512
|
});
|
|
@@ -2297,7 +2533,7 @@ function FormFieldSegmented(props) {
|
|
|
2297
2533
|
});
|
|
2298
2534
|
}
|
|
2299
2535
|
|
|
2300
|
-
|
|
2536
|
+
var defaultSelectProps = {
|
|
2301
2537
|
appearance: 'defaultPrimary sizeM solid rounded',
|
|
2302
2538
|
// useValidationAppearanceInputProps
|
|
2303
2539
|
// Error
|
|
@@ -2309,12 +2545,12 @@ const defaultSelectProps = {
|
|
|
2309
2545
|
};
|
|
2310
2546
|
|
|
2311
2547
|
function getDefaultValue(options, selectValue) {
|
|
2312
|
-
|
|
2313
|
-
|
|
2314
|
-
options.forEach(item
|
|
2315
|
-
|
|
2316
|
-
|
|
2317
|
-
|
|
2548
|
+
var selectValues = Array.isArray(selectValue) ? selectValue : [selectValue];
|
|
2549
|
+
var result = [];
|
|
2550
|
+
options.forEach(function (item) {
|
|
2551
|
+
var isValue = selectValues.includes(item.value);
|
|
2552
|
+
var isLabel = selectValues.includes(item.label);
|
|
2553
|
+
var childOptions = [];
|
|
2318
2554
|
if (item.options) {
|
|
2319
2555
|
childOptions = getDefaultValue(item.options, selectValue);
|
|
2320
2556
|
}
|
|
@@ -2326,38 +2562,39 @@ function getDefaultValue(options, selectValue) {
|
|
|
2326
2562
|
});
|
|
2327
2563
|
return result;
|
|
2328
2564
|
}
|
|
2329
|
-
|
|
2330
|
-
|
|
2331
|
-
|
|
2332
|
-
|
|
2333
|
-
|
|
2334
|
-
|
|
2335
|
-
|
|
2336
|
-
|
|
2337
|
-
options = [],
|
|
2338
|
-
selectProps,
|
|
2339
|
-
selectRef,
|
|
2340
|
-
showMessage,
|
|
2341
|
-
onChange,
|
|
2342
|
-
onInputChange
|
|
2343
|
-
} = props;
|
|
2565
|
+
var FormFieldSelect = /*#__PURE__*/React__default.default.memo(function FormFieldSelect(props) {
|
|
2566
|
+
var isDisabled = props.isDisabled,
|
|
2567
|
+
isRequired = props.isRequired,
|
|
2568
|
+
classNameGroupItem = props.classNameGroupItem,
|
|
2569
|
+
fieldProps = props.fieldProps,
|
|
2570
|
+
initialValue = props.initialValue,
|
|
2571
|
+
name = props.name,
|
|
2572
|
+
_props$options = props.options,
|
|
2573
|
+
options = _props$options === void 0 ? [] : _props$options,
|
|
2574
|
+
selectProps = props.selectProps,
|
|
2575
|
+
selectRef = props.selectRef,
|
|
2576
|
+
showMessage = props.showMessage,
|
|
2577
|
+
onChange = props.onChange,
|
|
2578
|
+
onInputChange = props.onInputChange;
|
|
2344
2579
|
return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Field, {
|
|
2345
2580
|
name: name,
|
|
2346
2581
|
initialValue: initialValue
|
|
2347
|
-
}, function Render({
|
|
2348
|
-
input,
|
|
2349
|
-
|
|
2350
|
-
}) {
|
|
2582
|
+
}, function Render(_ref) {
|
|
2583
|
+
var input = _ref.input,
|
|
2584
|
+
meta = _ref.meta;
|
|
2351
2585
|
/** Note:
|
|
2352
2586
|
* Create "Render" function by "eslint-react-hooks/rules-of-hooks":
|
|
2353
2587
|
* React Hooks cannot be called inside a callback.
|
|
2354
2588
|
* React Hooks must be called in a React function component or a
|
|
2355
2589
|
* custom React Hook function.
|
|
2356
2590
|
*/
|
|
2357
|
-
|
|
2358
|
-
|
|
2359
|
-
|
|
2360
|
-
|
|
2591
|
+
var _useState = React.useState(null),
|
|
2592
|
+
selectedOptions = _useState[0],
|
|
2593
|
+
setSelectedOptions = _useState[1];
|
|
2594
|
+
var defaultValue = React.useMemo(function () {
|
|
2595
|
+
var _input$value;
|
|
2596
|
+
var optionsValues = getDefaultValue(options, input.value);
|
|
2597
|
+
if (!optionsValues.length && (_input$value = input.value) != null && _input$value.length) {
|
|
2361
2598
|
optionsValues.push({
|
|
2362
2599
|
label: input.value,
|
|
2363
2600
|
value: input.value
|
|
@@ -2365,32 +2602,33 @@ const FormFieldSelect = /*#__PURE__*/React__default.default.memo(function FormFi
|
|
|
2365
2602
|
}
|
|
2366
2603
|
return optionsValues;
|
|
2367
2604
|
}, [input.value]);
|
|
2368
|
-
|
|
2605
|
+
var onChangeField = React.useCallback(function (value) {
|
|
2369
2606
|
input.onChange(value);
|
|
2370
2607
|
if (onChange) {
|
|
2371
2608
|
onChange(value, input.name);
|
|
2372
2609
|
}
|
|
2373
2610
|
}, [onChange, input.onChange]);
|
|
2374
|
-
|
|
2375
|
-
|
|
2611
|
+
var onChangeValue = React.useCallback(function (option, actionMeta) {
|
|
2612
|
+
var value = Array.isArray(option) ? option.map(function (o) {
|
|
2613
|
+
return o.value;
|
|
2614
|
+
}) : (option == null ? void 0 : option.value) || null;
|
|
2376
2615
|
setSelectedOptions(option);
|
|
2377
2616
|
onChangeField(value);
|
|
2378
2617
|
}, [onChangeField]);
|
|
2379
|
-
React.useEffect(()
|
|
2618
|
+
React.useEffect(function () {
|
|
2380
2619
|
setSelectedOptions(defaultValue);
|
|
2381
2620
|
}, [defaultValue]);
|
|
2382
|
-
|
|
2383
|
-
|
|
2384
|
-
|
|
2385
|
-
|
|
2386
|
-
|
|
2387
|
-
|
|
2388
|
-
|
|
2389
|
-
|
|
2390
|
-
|
|
2391
|
-
|
|
2392
|
-
|
|
2393
|
-
const updatedSelectProps = useValidationAppearanceInputProps({
|
|
2621
|
+
var _useFieldValidationSt = useFieldValidationState({
|
|
2622
|
+
fieldProps: fieldProps,
|
|
2623
|
+
input: input,
|
|
2624
|
+
meta: meta
|
|
2625
|
+
}),
|
|
2626
|
+
errorKey = _useFieldValidationSt.errorKey,
|
|
2627
|
+
errorMessage = _useFieldValidationSt.errorMessage,
|
|
2628
|
+
isErrorState = _useFieldValidationSt.isErrorState,
|
|
2629
|
+
successKey = _useFieldValidationSt.successKey,
|
|
2630
|
+
isValidState = _useFieldValidationSt.isValidState;
|
|
2631
|
+
var updatedSelectProps = useValidationAppearanceInputProps({
|
|
2394
2632
|
inputProps: selectProps,
|
|
2395
2633
|
validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
|
|
2396
2634
|
});
|
|
@@ -2412,7 +2650,7 @@ const FormFieldSelect = /*#__PURE__*/React__default.default.memo(function FormFi
|
|
|
2412
2650
|
className: "form-select-item",
|
|
2413
2651
|
ref: selectRef,
|
|
2414
2652
|
isDisabled: isDisabled,
|
|
2415
|
-
instanceId:
|
|
2653
|
+
instanceId: "id_" + input.name,
|
|
2416
2654
|
options: options,
|
|
2417
2655
|
value: selectedOptions,
|
|
2418
2656
|
onChange: onChangeValue,
|
|
@@ -2421,31 +2659,30 @@ const FormFieldSelect = /*#__PURE__*/React__default.default.memo(function FormFi
|
|
|
2421
2659
|
});
|
|
2422
2660
|
});
|
|
2423
2661
|
|
|
2424
|
-
|
|
2662
|
+
var defaultSwitchProps = {
|
|
2425
2663
|
appearance: 'defaultPrimary sizeL solid rounded',
|
|
2426
2664
|
errorAppearance: 'errorPrimary sizeL solid rounded',
|
|
2427
2665
|
successAppearance: 'successPrimary sizeL solid rounded',
|
|
2428
2666
|
requiredAppearance: 'requirePrimary sizeL solid rounded'
|
|
2429
2667
|
};
|
|
2430
2668
|
|
|
2431
|
-
|
|
2432
|
-
|
|
2433
|
-
|
|
2434
|
-
|
|
2435
|
-
|
|
2436
|
-
fieldProps = {},
|
|
2437
|
-
inputProps =
|
|
2438
|
-
|
|
2439
|
-
|
|
2440
|
-
|
|
2441
|
-
|
|
2669
|
+
var FormFieldSwitch = /*#__PURE__*/React__default.default.memo(function FormFieldSwitch(props) {
|
|
2670
|
+
var name = props.name,
|
|
2671
|
+
isDisabled = props.isDisabled,
|
|
2672
|
+
classNameGroupItem = props.classNameGroupItem,
|
|
2673
|
+
_props$fieldProps = props.fieldProps,
|
|
2674
|
+
fieldProps = _props$fieldProps === void 0 ? {} : _props$fieldProps,
|
|
2675
|
+
_props$inputProps = props.inputProps,
|
|
2676
|
+
inputProps = _props$inputProps === void 0 ? {} : _props$inputProps,
|
|
2677
|
+
showMessage = props.showMessage,
|
|
2678
|
+
isRequired = props.isRequired,
|
|
2679
|
+
onChange = props.onChange;
|
|
2442
2680
|
return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Field, {
|
|
2443
2681
|
type: "checkbox",
|
|
2444
2682
|
name: name
|
|
2445
|
-
}, function Render({
|
|
2446
|
-
input,
|
|
2447
|
-
|
|
2448
|
-
}) {
|
|
2683
|
+
}, function Render(_ref) {
|
|
2684
|
+
var input = _ref.input,
|
|
2685
|
+
meta = _ref.meta;
|
|
2449
2686
|
/** Note:
|
|
2450
2687
|
* Create "Render" function by "eslint-react-hooks/rules-of-hooks":
|
|
2451
2688
|
* React Hooks cannot be called inside a callback.
|
|
@@ -2453,24 +2690,23 @@ const FormFieldSwitch = /*#__PURE__*/React__default.default.memo(function FormFi
|
|
|
2453
2690
|
* custom React Hook function.
|
|
2454
2691
|
*/
|
|
2455
2692
|
|
|
2456
|
-
|
|
2693
|
+
var onChangeField = React.useCallback(function (event) {
|
|
2457
2694
|
input.onChange(event);
|
|
2458
2695
|
if (onChange) {
|
|
2459
2696
|
onChange(event.target.checked, input.name);
|
|
2460
2697
|
}
|
|
2461
2698
|
}, [onChange, input.onChange]);
|
|
2462
|
-
|
|
2463
|
-
|
|
2464
|
-
|
|
2465
|
-
|
|
2466
|
-
|
|
2467
|
-
|
|
2468
|
-
|
|
2469
|
-
|
|
2470
|
-
|
|
2471
|
-
|
|
2472
|
-
|
|
2473
|
-
const updatedInputProps = useValidationAppearanceInputProps({
|
|
2699
|
+
var _useFieldValidationSt = useFieldValidationState({
|
|
2700
|
+
fieldProps: fieldProps,
|
|
2701
|
+
input: input,
|
|
2702
|
+
meta: meta
|
|
2703
|
+
}),
|
|
2704
|
+
errorKey = _useFieldValidationSt.errorKey,
|
|
2705
|
+
errorMessage = _useFieldValidationSt.errorMessage,
|
|
2706
|
+
isErrorState = _useFieldValidationSt.isErrorState,
|
|
2707
|
+
successKey = _useFieldValidationSt.successKey,
|
|
2708
|
+
isValidState = _useFieldValidationSt.isValidState;
|
|
2709
|
+
var updatedInputProps = useValidationAppearanceInputProps({
|
|
2474
2710
|
inputProps: inputProps,
|
|
2475
2711
|
validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
|
|
2476
2712
|
});
|
|
@@ -2502,7 +2738,7 @@ const FormFieldSwitch = /*#__PURE__*/React__default.default.memo(function FormFi
|
|
|
2502
2738
|
});
|
|
2503
2739
|
});
|
|
2504
2740
|
|
|
2505
|
-
|
|
2741
|
+
var defaultTextareaProps = {
|
|
2506
2742
|
appearance: 'defaultPrimary sizeM solid rounded',
|
|
2507
2743
|
// useValidationAppearanceInputProps
|
|
2508
2744
|
// Error
|
|
@@ -2513,22 +2749,21 @@ const defaultTextareaProps = {
|
|
|
2513
2749
|
requiredAppearance: 'requirePrimary sizeM solid rounded'
|
|
2514
2750
|
};
|
|
2515
2751
|
|
|
2516
|
-
|
|
2517
|
-
|
|
2518
|
-
|
|
2519
|
-
|
|
2520
|
-
fieldProps = {},
|
|
2521
|
-
inputProps =
|
|
2522
|
-
|
|
2523
|
-
|
|
2524
|
-
|
|
2525
|
-
|
|
2752
|
+
var FormFieldTextarea = /*#__PURE__*/React__default.default.memo(function FormFieldTextarea(props) {
|
|
2753
|
+
var name = props.name,
|
|
2754
|
+
classNameGroupItem = props.classNameGroupItem,
|
|
2755
|
+
_props$fieldProps = props.fieldProps,
|
|
2756
|
+
fieldProps = _props$fieldProps === void 0 ? {} : _props$fieldProps,
|
|
2757
|
+
_props$inputProps = props.inputProps,
|
|
2758
|
+
inputProps = _props$inputProps === void 0 ? {} : _props$inputProps,
|
|
2759
|
+
showMessage = props.showMessage,
|
|
2760
|
+
isDisabled = props.isDisabled,
|
|
2761
|
+
isRequired = props.isRequired;
|
|
2526
2762
|
return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Field, {
|
|
2527
2763
|
name: name
|
|
2528
|
-
}, function Render({
|
|
2529
|
-
input,
|
|
2530
|
-
|
|
2531
|
-
}) {
|
|
2764
|
+
}, function Render(_ref) {
|
|
2765
|
+
var input = _ref.input,
|
|
2766
|
+
meta = _ref.meta;
|
|
2532
2767
|
/** Note:
|
|
2533
2768
|
* Create "Render" function by "eslint-react-hooks/rules-of-hooks":
|
|
2534
2769
|
* React Hooks cannot be called inside a callback.
|
|
@@ -2536,18 +2771,17 @@ const FormFieldTextarea = /*#__PURE__*/React__default.default.memo(function Form
|
|
|
2536
2771
|
* custom React Hook function.
|
|
2537
2772
|
*/
|
|
2538
2773
|
|
|
2539
|
-
|
|
2540
|
-
|
|
2541
|
-
|
|
2542
|
-
|
|
2543
|
-
|
|
2544
|
-
|
|
2545
|
-
|
|
2546
|
-
|
|
2547
|
-
|
|
2548
|
-
|
|
2549
|
-
|
|
2550
|
-
const updatedInputProps = useValidationAppearanceInputProps({
|
|
2774
|
+
var _useFieldValidationSt = useFieldValidationState({
|
|
2775
|
+
fieldProps: fieldProps,
|
|
2776
|
+
input: input,
|
|
2777
|
+
meta: meta
|
|
2778
|
+
}),
|
|
2779
|
+
errorKey = _useFieldValidationSt.errorKey,
|
|
2780
|
+
errorMessage = _useFieldValidationSt.errorMessage,
|
|
2781
|
+
successKey = _useFieldValidationSt.successKey,
|
|
2782
|
+
isErrorState = _useFieldValidationSt.isErrorState,
|
|
2783
|
+
isValidState = _useFieldValidationSt.isValidState;
|
|
2784
|
+
var updatedInputProps = useValidationAppearanceInputProps({
|
|
2551
2785
|
inputProps: inputProps,
|
|
2552
2786
|
validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
|
|
2553
2787
|
});
|
|
@@ -2566,8 +2800,8 @@ const FormFieldTextarea = /*#__PURE__*/React__default.default.memo(function Form
|
|
|
2566
2800
|
isRequired: isRequired,
|
|
2567
2801
|
isValidState: isValidState
|
|
2568
2802
|
}, fieldProps), /*#__PURE__*/React__default.default.createElement(Textarea.Textarea, Object.assign({
|
|
2569
|
-
className: clsx__default.default(meta.active && 'textarea_state_focus', meta.error && meta.touched &&
|
|
2570
|
-
dataTestId:
|
|
2803
|
+
className: clsx__default.default(meta.active && 'textarea_state_focus', meta.error && meta.touched && "textarea_state_" + errorKey),
|
|
2804
|
+
dataTestId: input.name + "-field-textarea",
|
|
2571
2805
|
name: input.name,
|
|
2572
2806
|
autoComplete: "nope",
|
|
2573
2807
|
value: input.value || '',
|
|
@@ -2579,7 +2813,7 @@ const FormFieldTextarea = /*#__PURE__*/React__default.default.memo(function Form
|
|
|
2579
2813
|
});
|
|
2580
2814
|
});
|
|
2581
2815
|
|
|
2582
|
-
|
|
2816
|
+
var formTypes = {
|
|
2583
2817
|
custom: 'custom',
|
|
2584
2818
|
password: 'password',
|
|
2585
2819
|
code: 'code',
|
|
@@ -2598,7 +2832,7 @@ const formTypes = {
|
|
|
2598
2832
|
radioGroup: 'radioGroup',
|
|
2599
2833
|
segmented: 'segmented',
|
|
2600
2834
|
select: 'select',
|
|
2601
|
-
switch: 'switch'
|
|
2835
|
+
"switch": 'switch'
|
|
2602
2836
|
};
|
|
2603
2837
|
function generateField(field, config, props) {
|
|
2604
2838
|
switch (field.type) {
|
|
@@ -2632,7 +2866,7 @@ function generateField(field, config, props) {
|
|
|
2632
2866
|
key: config.key
|
|
2633
2867
|
}, field, props));
|
|
2634
2868
|
}
|
|
2635
|
-
case formTypes
|
|
2869
|
+
case formTypes["switch"]:
|
|
2636
2870
|
{
|
|
2637
2871
|
return /*#__PURE__*/React__default.default.createElement(FormFieldSwitch, Object.assign({
|
|
2638
2872
|
key: config.key
|
|
@@ -2708,12 +2942,13 @@ function generateField(field, config, props) {
|
|
|
2708
2942
|
{
|
|
2709
2943
|
return /*#__PURE__*/React__default.default.createElement(FormBlockGroup, Object.assign({
|
|
2710
2944
|
key: config.key
|
|
2711
|
-
}, field, props), Object.entries(field.group).map((
|
|
2712
|
-
|
|
2713
|
-
|
|
2945
|
+
}, field, props), Object.entries(field.group).map(function (_ref) {
|
|
2946
|
+
var key = _ref[0],
|
|
2947
|
+
value = _ref[1];
|
|
2948
|
+
var groupProps = Object.assign({}, value, {
|
|
2714
2949
|
classNameGroupItem: value.classNameGroupItem || 'form__group-item',
|
|
2715
2950
|
showMessage: field.showMessage
|
|
2716
|
-
};
|
|
2951
|
+
});
|
|
2717
2952
|
return generateField(groupProps, {
|
|
2718
2953
|
key: key + '_form_group'
|
|
2719
2954
|
}, props);
|
|
@@ -2722,32 +2957,32 @@ function generateField(field, config, props) {
|
|
|
2722
2957
|
}
|
|
2723
2958
|
}
|
|
2724
2959
|
|
|
2725
|
-
|
|
2726
|
-
|
|
2960
|
+
var focusOnError = function focusOnError(formElementsList, errors) {
|
|
2961
|
+
var selectsIds = Object.keys(errors).map(function (fieldName) {
|
|
2727
2962
|
if (fieldName === finalForm.FORM_ERROR) {
|
|
2728
2963
|
// TODO: get from somewhere
|
|
2729
2964
|
return 'notification__item_status_error';
|
|
2730
2965
|
}
|
|
2731
|
-
return
|
|
2966
|
+
return "react-select-id_" + fieldName + "-input";
|
|
2732
2967
|
});
|
|
2733
|
-
|
|
2968
|
+
var errorFieldElement = formElementsList.find(function (element) {
|
|
2734
2969
|
if (element.name) {
|
|
2735
2970
|
return finalForm.getIn(errors, element.name);
|
|
2736
2971
|
} else {
|
|
2737
2972
|
return selectsIds.includes(element.id);
|
|
2738
2973
|
}
|
|
2739
2974
|
});
|
|
2740
|
-
|
|
2975
|
+
var errorsList = Object.keys(errors);
|
|
2741
2976
|
if (!errorFieldElement && errorsList.length) {
|
|
2742
|
-
|
|
2977
|
+
var errorElement;
|
|
2743
2978
|
try {
|
|
2744
|
-
|
|
2979
|
+
var fieldName = errorsList[0];
|
|
2745
2980
|
if (fieldName === finalForm.FORM_ERROR) {
|
|
2746
2981
|
errorElement = document.querySelector('notification__item_status_error');
|
|
2747
2982
|
} else {
|
|
2748
|
-
errorElement = document.querySelector(
|
|
2983
|
+
errorElement = document.querySelector("#" + fieldName + "-error");
|
|
2749
2984
|
if (!errorElement) {
|
|
2750
|
-
errorElement = document.querySelector(
|
|
2985
|
+
errorElement = document.querySelector("#id_" + fieldName);
|
|
2751
2986
|
}
|
|
2752
2987
|
}
|
|
2753
2988
|
} catch (err) {
|
|
@@ -2769,11 +3004,12 @@ const focusOnError = (formElementsList, errors) => {
|
|
|
2769
3004
|
}
|
|
2770
3005
|
return null;
|
|
2771
3006
|
};
|
|
2772
|
-
|
|
2773
|
-
|
|
2774
|
-
|
|
2775
|
-
|
|
2776
|
-
|
|
3007
|
+
var focusOnErrorDecorator = createDecorator__default.default(null, focusOnError);
|
|
3008
|
+
var setErrorsMutator = function setErrorsMutator(args, state) {
|
|
3009
|
+
var fieldName = args[0],
|
|
3010
|
+
data = args[1];
|
|
3011
|
+
var submitError = data.submitError;
|
|
3012
|
+
var fieldError = data.error;
|
|
2777
3013
|
if (fieldName === 'non_field_errors' || fieldName === finalForm.FORM_ERROR) {
|
|
2778
3014
|
// state.formState.invalid = true
|
|
2779
3015
|
// state.formState.valid = false
|
|
@@ -2784,18 +3020,16 @@ const setErrorsMutator = (args, state) => {
|
|
|
2784
3020
|
|
|
2785
3021
|
// TODO: make clear error not by empty string check
|
|
2786
3022
|
if (fieldError || fieldError === '') {
|
|
2787
|
-
|
|
2788
|
-
|
|
2789
|
-
});
|
|
3023
|
+
var _Object$assign;
|
|
3024
|
+
var errorsState = Object.assign({}, state.formState.errors, (_Object$assign = {}, _Object$assign[fieldName] = fieldError, _Object$assign));
|
|
2790
3025
|
state.fields[fieldName].error = fieldError;
|
|
2791
3026
|
state.formState.errors = errorsState;
|
|
2792
3027
|
}
|
|
2793
3028
|
|
|
2794
3029
|
// TODO: make clear error not by empty string check
|
|
2795
3030
|
if (submitError || submitError === '') {
|
|
2796
|
-
|
|
2797
|
-
|
|
2798
|
-
});
|
|
3031
|
+
var _Object$assign2;
|
|
3032
|
+
var submitErrorsState = Object.assign({}, state.formState.submitErrors, (_Object$assign2 = {}, _Object$assign2[fieldName] = submitError, _Object$assign2));
|
|
2799
3033
|
state.fields[fieldName].submitFailed = true;
|
|
2800
3034
|
state.fields[fieldName].submitSucceeded = false;
|
|
2801
3035
|
state.fields[fieldName].submitError = submitError;
|
|
@@ -2806,163 +3040,186 @@ const setErrorsMutator = (args, state) => {
|
|
|
2806
3040
|
}
|
|
2807
3041
|
}
|
|
2808
3042
|
};
|
|
2809
|
-
|
|
2810
|
-
|
|
2811
|
-
|
|
2812
|
-
|
|
2813
|
-
|
|
2814
|
-
|
|
2815
|
-
|
|
2816
|
-
|
|
2817
|
-
|
|
2818
|
-
|
|
2819
|
-
|
|
2820
|
-
|
|
2821
|
-
|
|
2822
|
-
|
|
2823
|
-
|
|
2824
|
-
|
|
2825
|
-
|
|
2826
|
-
|
|
2827
|
-
|
|
2828
|
-
|
|
2829
|
-
|
|
2830
|
-
|
|
2831
|
-
|
|
2832
|
-
|
|
2833
|
-
|
|
2834
|
-
|
|
2835
|
-
|
|
2836
|
-
|
|
2837
|
-
|
|
2838
|
-
|
|
2839
|
-
|
|
2840
|
-
|
|
2841
|
-
|
|
2842
|
-
|
|
2843
|
-
|
|
2844
|
-
|
|
2845
|
-
|
|
2846
|
-
|
|
2847
|
-
|
|
2848
|
-
|
|
2849
|
-
|
|
2850
|
-
|
|
2851
|
-
|
|
2852
|
-
|
|
2853
|
-
|
|
2854
|
-
|
|
2855
|
-
|
|
2856
|
-
|
|
2857
|
-
|
|
2858
|
-
|
|
2859
|
-
|
|
2860
|
-
|
|
2861
|
-
|
|
2862
|
-
|
|
2863
|
-
|
|
2864
|
-
|
|
2865
|
-
|
|
2866
|
-
|
|
2867
|
-
|
|
2868
|
-
|
|
2869
|
-
|
|
2870
|
-
|
|
2871
|
-
|
|
2872
|
-
|
|
2873
|
-
|
|
2874
|
-
|
|
2875
|
-
|
|
2876
|
-
|
|
2877
|
-
|
|
2878
|
-
|
|
2879
|
-
|
|
2880
|
-
|
|
2881
|
-
|
|
2882
|
-
|
|
2883
|
-
|
|
2884
|
-
|
|
2885
|
-
|
|
2886
|
-
|
|
2887
|
-
|
|
2888
|
-
|
|
2889
|
-
|
|
2890
|
-
|
|
2891
|
-
|
|
2892
|
-
|
|
2893
|
-
|
|
2894
|
-
|
|
2895
|
-
|
|
2896
|
-
|
|
2897
|
-
|
|
2898
|
-
|
|
2899
|
-
|
|
2900
|
-
|
|
2901
|
-
|
|
2902
|
-
|
|
2903
|
-
|
|
2904
|
-
|
|
2905
|
-
|
|
2906
|
-
|
|
2907
|
-
|
|
2908
|
-
|
|
2909
|
-
|
|
2910
|
-
|
|
2911
|
-
|
|
2912
|
-
|
|
2913
|
-
|
|
2914
|
-
|
|
2915
|
-
|
|
2916
|
-
|
|
2917
|
-
|
|
2918
|
-
|
|
2919
|
-
|
|
2920
|
-
|
|
2921
|
-
|
|
2922
|
-
|
|
2923
|
-
|
|
2924
|
-
|
|
2925
|
-
|
|
2926
|
-
|
|
2927
|
-
|
|
2928
|
-
|
|
2929
|
-
|
|
2930
|
-
|
|
2931
|
-
|
|
2932
|
-
|
|
2933
|
-
|
|
2934
|
-
|
|
2935
|
-
|
|
3043
|
+
var sendFormDataToServer = /*#__PURE__*/function () {
|
|
3044
|
+
var _ref = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(url, data) {
|
|
3045
|
+
var response, _error$response, _error$response2, formErrors, _t;
|
|
3046
|
+
return _regenerator().w(function (_context) {
|
|
3047
|
+
while (1) switch (_context.p = _context.n) {
|
|
3048
|
+
case 0:
|
|
3049
|
+
_context.p = 0;
|
|
3050
|
+
_context.n = 1;
|
|
3051
|
+
return axios__default.default({
|
|
3052
|
+
url: url,
|
|
3053
|
+
method: 'POST',
|
|
3054
|
+
data: data
|
|
3055
|
+
});
|
|
3056
|
+
case 1:
|
|
3057
|
+
response = _context.v;
|
|
3058
|
+
return _context.a(2, {
|
|
3059
|
+
success: true,
|
|
3060
|
+
response: response
|
|
3061
|
+
});
|
|
3062
|
+
case 2:
|
|
3063
|
+
_context.p = 2;
|
|
3064
|
+
_t = _context.v;
|
|
3065
|
+
formErrors = {};
|
|
3066
|
+
if (typeof ((_error$response = _t.response) == null ? void 0 : _error$response.data) === 'string') {
|
|
3067
|
+
formErrors[finalForm.FORM_ERROR] = 'Something went wrong';
|
|
3068
|
+
}
|
|
3069
|
+
if (typeof ((_error$response2 = _t.response) == null ? void 0 : _error$response2.data) === 'object') {
|
|
3070
|
+
Object.entries(_t.response.data).forEach(function (_ref2) {
|
|
3071
|
+
var fieldName = _ref2[0],
|
|
3072
|
+
errorsList = _ref2[1];
|
|
3073
|
+
formErrors[fieldName] = errorsList[0];
|
|
3074
|
+
});
|
|
3075
|
+
}
|
|
3076
|
+
return _context.a(2, {
|
|
3077
|
+
error: _t,
|
|
3078
|
+
success: false,
|
|
3079
|
+
formErrors: formErrors
|
|
3080
|
+
});
|
|
3081
|
+
}
|
|
3082
|
+
}, _callee, null, [[0, 2]]);
|
|
3083
|
+
}));
|
|
3084
|
+
return function sendFormDataToServer(_x, _x2) {
|
|
3085
|
+
return _ref.apply(this, arguments);
|
|
3086
|
+
};
|
|
3087
|
+
}();
|
|
3088
|
+
|
|
3089
|
+
var FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalForm(props, ref) {
|
|
3090
|
+
var className = props.className,
|
|
3091
|
+
dataTestId = props.dataTestId,
|
|
3092
|
+
dataTour = props.dataTour,
|
|
3093
|
+
type = props.type,
|
|
3094
|
+
name = props.name,
|
|
3095
|
+
initialValues = props.initialValues,
|
|
3096
|
+
initialValuesEqual = props.initialValuesEqual,
|
|
3097
|
+
config = props.config,
|
|
3098
|
+
validationSchema = props.validationSchema,
|
|
3099
|
+
title = props.title,
|
|
3100
|
+
titleFill = props.titleFill,
|
|
3101
|
+
titlePosition = props.titlePosition,
|
|
3102
|
+
titleTextColor = props.titleTextColor,
|
|
3103
|
+
titleTextSize = props.titleTextSize,
|
|
3104
|
+
titleTextWeight = props.titleTextWeight,
|
|
3105
|
+
desc = props.desc,
|
|
3106
|
+
descSize = props.descSize,
|
|
3107
|
+
descTextColor = props.descTextColor,
|
|
3108
|
+
descTextWeight = props.descTextWeight,
|
|
3109
|
+
buttonGap = props.buttonGap,
|
|
3110
|
+
_props$additionalProp = props.additionalProps,
|
|
3111
|
+
additionalProps = _props$additionalProp === void 0 ? {} : _props$additionalProp,
|
|
3112
|
+
_props$buttonDirectio = props.buttonDirection,
|
|
3113
|
+
buttonDirection = _props$buttonDirectio === void 0 ? 'vertical' : _props$buttonDirectio,
|
|
3114
|
+
buttonFill = props.buttonFill,
|
|
3115
|
+
buttonJustifyContent = props.buttonJustifyContent,
|
|
3116
|
+
buttonPadding = props.buttonPadding,
|
|
3117
|
+
buttonPosition = props.buttonPosition,
|
|
3118
|
+
dataTestIdButtons = props.dataTestIdButtons,
|
|
3119
|
+
dataTestIdPrimaryButton = props.dataTestIdPrimaryButton,
|
|
3120
|
+
dataTestIdSecondaryButton = props.dataTestIdSecondaryButton,
|
|
3121
|
+
dataTestIdTertiaryButton = props.dataTestIdTertiaryButton,
|
|
3122
|
+
dataTourButtons = props.dataTourButtons,
|
|
3123
|
+
dataTourPrimaryButton = props.dataTourPrimaryButton,
|
|
3124
|
+
dataTourSecondaryButton = props.dataTourSecondaryButton,
|
|
3125
|
+
dataTourTertiaryButton = props.dataTourTertiaryButton,
|
|
3126
|
+
_props$disableFieldsA = props.disableFieldsAutoComplete,
|
|
3127
|
+
disableFieldsAutoComplete = _props$disableFieldsA === void 0 ? false : _props$disableFieldsA,
|
|
3128
|
+
fieldsGap = props.fieldsGap,
|
|
3129
|
+
formName = props.formName,
|
|
3130
|
+
groupGap = props.groupGap,
|
|
3131
|
+
heightClass = props.heightClass,
|
|
3132
|
+
language = props.language,
|
|
3133
|
+
loader = props.loader,
|
|
3134
|
+
loaderAppearance = props.loaderAppearance,
|
|
3135
|
+
_props$loaderFill = props.loaderFill,
|
|
3136
|
+
loaderFill = _props$loaderFill === void 0 ? 'surfacePrimary' : _props$loaderFill,
|
|
3137
|
+
_props$loaderItemFill = props.loaderItemFill,
|
|
3138
|
+
loaderItemFill = _props$loaderItemFill === void 0 ? 'accentItemSecondary' : _props$loaderItemFill,
|
|
3139
|
+
loaderShape = props.loaderShape,
|
|
3140
|
+
_props$loaderSize = props.loaderSize,
|
|
3141
|
+
loaderSize = _props$loaderSize === void 0 ? 'l' : _props$loaderSize,
|
|
3142
|
+
loaderText = props.loaderText,
|
|
3143
|
+
_props$loaderType = props.loaderType,
|
|
3144
|
+
loaderType = _props$loaderType === void 0 ? 'simple' : _props$loaderType,
|
|
3145
|
+
mutators = props.mutators,
|
|
3146
|
+
notificationCloseButton = props.notificationCloseButton,
|
|
3147
|
+
notificationType = props.notificationType,
|
|
3148
|
+
primaryButton = props.primaryButton,
|
|
3149
|
+
primaryButtonAppearance = props.primaryButtonAppearance,
|
|
3150
|
+
primaryButtonFill = props.primaryButtonFill,
|
|
3151
|
+
primaryButtonFillHover = props.primaryButtonFillHover,
|
|
3152
|
+
primaryButtonHtmlType = props.primaryButtonHtmlType,
|
|
3153
|
+
primaryButtonIsDisabled = props.primaryButtonIsDisabled,
|
|
3154
|
+
primaryButtonIsLoading = props.primaryButtonIsLoading,
|
|
3155
|
+
primaryButtonLabel = props.primaryButtonLabel,
|
|
3156
|
+
primaryButtonLabelSize = props.primaryButtonLabelSize,
|
|
3157
|
+
primaryButtonLabelTextColor = props.primaryButtonLabelTextColor,
|
|
3158
|
+
primaryButtonLabelTextWeight = props.primaryButtonLabelTextWeight,
|
|
3159
|
+
primaryButtonSize = props.primaryButtonSize,
|
|
3160
|
+
primarySecondaryHtmlType = props.primarySecondaryHtmlType,
|
|
3161
|
+
_props$renderFieldsWr = props.renderFieldsWrapper,
|
|
3162
|
+
renderFieldsWrapper = _props$renderFieldsWr === void 0 ? function (wrapperChildren) {
|
|
3163
|
+
return wrapperChildren;
|
|
3164
|
+
} : _props$renderFieldsWr,
|
|
3165
|
+
secondaryButton = props.secondaryButton,
|
|
3166
|
+
secondaryButtonAppearance = props.secondaryButtonAppearance,
|
|
3167
|
+
secondaryButtonFill = props.secondaryButtonFill,
|
|
3168
|
+
secondaryButtonFillHover = props.secondaryButtonFillHover,
|
|
3169
|
+
secondaryButtonIsDisabled = props.secondaryButtonIsDisabled,
|
|
3170
|
+
secondaryButtonIsLoading = props.secondaryButtonIsLoading,
|
|
3171
|
+
secondaryButtonLabel = props.secondaryButtonLabel,
|
|
3172
|
+
secondaryButtonLabelSize = props.secondaryButtonLabelSize,
|
|
3173
|
+
secondaryButtonLabelTextColor = props.secondaryButtonLabelTextColor,
|
|
3174
|
+
secondaryButtonLabelTextWeight = props.secondaryButtonLabelTextWeight,
|
|
3175
|
+
secondaryButtonSize = props.secondaryButtonSize,
|
|
3176
|
+
shapeStrengthClass = props.shapeStrengthClass,
|
|
3177
|
+
tertiaryButton = props.tertiaryButton,
|
|
3178
|
+
tertiaryButtonFill = props.tertiaryButtonFill,
|
|
3179
|
+
tertiaryButtonFillHover = props.tertiaryButtonFillHover,
|
|
3180
|
+
tertiaryButtonLabel = props.tertiaryButtonLabel,
|
|
3181
|
+
tertiaryButtonLabelSize = props.tertiaryButtonLabelSize,
|
|
3182
|
+
tertiaryButtonLabelTextColor = props.tertiaryButtonLabelTextColor,
|
|
3183
|
+
tertiaryButtonLabelTextWeight = props.tertiaryButtonLabelTextWeight,
|
|
3184
|
+
tertiaryButtonSize = props.tertiaryButtonSize,
|
|
3185
|
+
widthClass = props.widthClass,
|
|
3186
|
+
before = props.before,
|
|
3187
|
+
after = props.after,
|
|
3188
|
+
isLoading = props.isLoading,
|
|
3189
|
+
onClickSecondaryButton = props.onClickSecondaryButton,
|
|
3190
|
+
onClickTertiaryButton = props.onClickTertiaryButton,
|
|
3191
|
+
onChangeFormValues = props.onChangeFormValues,
|
|
3192
|
+
onSubmit = props.onSubmit;
|
|
3193
|
+
var validate = useYupValidationSchema(validationSchema, language);
|
|
3194
|
+
var onRefFormInstance = React.useCallback(function (formInstance) {
|
|
2936
3195
|
if (ref) {
|
|
2937
3196
|
ref.current = formInstance;
|
|
2938
3197
|
}
|
|
2939
3198
|
}, [ref]);
|
|
2940
|
-
|
|
2941
|
-
|
|
2942
|
-
|
|
2943
|
-
|
|
2944
|
-
|
|
2945
|
-
|
|
2946
|
-
|
|
2947
|
-
|
|
2948
|
-
styles: formStyles,
|
|
2949
|
-
wrapper: wrapperStyles
|
|
2950
|
-
} = useStyles.useStyles(props);
|
|
3199
|
+
var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props);
|
|
3200
|
+
var directionClass = propsGenerator.directionClass,
|
|
3201
|
+
fillClass = propsGenerator.fillClass,
|
|
3202
|
+
elevationClass = propsGenerator.elevationClass,
|
|
3203
|
+
shapeClass = propsGenerator.shapeClass;
|
|
3204
|
+
var _useStyles = useStyles.useStyles(props),
|
|
3205
|
+
formStyles = _useStyles.styles,
|
|
3206
|
+
wrapperStyles = _useStyles.wrapper;
|
|
2951
3207
|
return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Form, {
|
|
2952
3208
|
initialValues: initialValues,
|
|
2953
3209
|
initialValuesEqual: initialValuesEqual,
|
|
2954
|
-
render: ({
|
|
2955
|
-
form,
|
|
2956
|
-
|
|
2957
|
-
|
|
2958
|
-
|
|
2959
|
-
}) => {
|
|
3210
|
+
render: function render(_ref) {
|
|
3211
|
+
var form = _ref.form,
|
|
3212
|
+
handleSubmit = _ref.handleSubmit,
|
|
3213
|
+
modifiedSinceLastSubmit = _ref.modifiedSinceLastSubmit,
|
|
3214
|
+
submitError = _ref.submitError;
|
|
2960
3215
|
return /*#__PURE__*/React__default.default.createElement("form", {
|
|
2961
|
-
className: clsx__default.default(className, 'form', type &&
|
|
3216
|
+
className: clsx__default.default(className, 'form', type && "form_type_" + type, widthClass && "width_" + widthClass, heightClass && "height_" + heightClass, titlePosition && "form_title-position_" + titlePosition, buttonPosition && "form_button-position_" + buttonPosition, directionClass && "direction_" + directionClass, fillClass && "fill_" + fillClass, shapeClass && "shape_" + shapeClass, shapeStrengthClass && "shape-strength_" + shapeStrengthClass, elevationClass && "elevation_" + elevationClass),
|
|
2962
3217
|
name: formName || 'form'
|
|
2963
3218
|
// We no need set reference to html element, we need reference to "final-form" instance
|
|
2964
3219
|
,
|
|
2965
|
-
ref: ()
|
|
3220
|
+
ref: function ref() {
|
|
3221
|
+
return onRefFormInstance(form);
|
|
3222
|
+
},
|
|
2966
3223
|
autoCapitalize: disableFieldsAutoComplete ? 'off' : undefined,
|
|
2967
3224
|
autoComplete: disableFieldsAutoComplete ? 'off' : undefined,
|
|
2968
3225
|
autoCorrect: disableFieldsAutoComplete ? 'off' : undefined,
|
|
@@ -2983,7 +3240,7 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
|
|
|
2983
3240
|
textColor: descTextColor,
|
|
2984
3241
|
textWeight: descTextWeight
|
|
2985
3242
|
}, desc), submitError && !modifiedSinceLastSubmit && /*#__PURE__*/React__default.default.createElement("div", {
|
|
2986
|
-
className: clsx__default.default('notification', 'form-notification', notificationType ?
|
|
3243
|
+
className: clsx__default.default('notification', 'form-notification', notificationType ? "form-notification_" + notificationType : 'form-notification_global')
|
|
2987
3244
|
}, /*#__PURE__*/React__default.default.createElement(Notification.Notification, {
|
|
2988
3245
|
appearance: "errorPrimary sizeM solid rounded",
|
|
2989
3246
|
type: "global",
|
|
@@ -3000,9 +3257,11 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
|
|
|
3000
3257
|
direction: "vertical",
|
|
3001
3258
|
gap: fieldsGap || groupGap,
|
|
3002
3259
|
style: wrapperStyles
|
|
3003
|
-
}, Object.keys(config).map(
|
|
3004
|
-
key
|
|
3005
|
-
|
|
3260
|
+
}, Object.keys(config).map(function (key) {
|
|
3261
|
+
return generateField(config[key], {
|
|
3262
|
+
key: key
|
|
3263
|
+
}, additionalProps[config[key].name]);
|
|
3264
|
+
}), isLoading && (loader || /*#__PURE__*/React__default.default.createElement(Loader.Loader, {
|
|
3006
3265
|
appearance: loaderAppearance,
|
|
3007
3266
|
className: "form__loader",
|
|
3008
3267
|
type: loaderType,
|
|
@@ -3023,7 +3282,7 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
|
|
|
3023
3282
|
}, primaryButtonLabel ? /*#__PURE__*/React__default.default.createElement(Button.Button, {
|
|
3024
3283
|
appearance: primaryButtonAppearance,
|
|
3025
3284
|
className: "form__button-item",
|
|
3026
|
-
dataTestId: dataTestIdPrimaryButton || (name ?
|
|
3285
|
+
dataTestId: dataTestIdPrimaryButton || (name ? name + "-primary" : 'form-primary'),
|
|
3027
3286
|
dataTour: dataTourPrimaryButton,
|
|
3028
3287
|
width: "fill",
|
|
3029
3288
|
size: primaryButtonSize,
|
|
@@ -3039,7 +3298,7 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
|
|
|
3039
3298
|
}) : primaryButton, secondaryButtonLabel ? /*#__PURE__*/React__default.default.createElement(Button.Button, {
|
|
3040
3299
|
appearance: secondaryButtonAppearance,
|
|
3041
3300
|
className: "form__button-item",
|
|
3042
|
-
dataTestId: dataTestIdSecondaryButton || (name ?
|
|
3301
|
+
dataTestId: dataTestIdSecondaryButton || (name ? name + "-secondary" : 'form-secondary'),
|
|
3043
3302
|
dataTour: dataTourSecondaryButton,
|
|
3044
3303
|
width: "fill",
|
|
3045
3304
|
size: secondaryButtonSize,
|
|
@@ -3084,31 +3343,31 @@ FinalForm.defaultProps = {
|
|
|
3084
3343
|
direction: 'vertical'
|
|
3085
3344
|
};
|
|
3086
3345
|
|
|
3087
|
-
|
|
3346
|
+
var DEFAULT_MESSAGES_REQUIRED = {
|
|
3088
3347
|
required: {
|
|
3089
3348
|
key: 'required',
|
|
3090
3349
|
message: 'Обязательное поле'
|
|
3091
3350
|
}
|
|
3092
3351
|
};
|
|
3093
|
-
|
|
3352
|
+
var DEFAULT_MESSAGES_ERROR = {
|
|
3094
3353
|
invalid_value: {
|
|
3095
3354
|
key: 'error',
|
|
3096
3355
|
message: 'Некорректное значение'
|
|
3097
3356
|
}
|
|
3098
3357
|
};
|
|
3099
|
-
|
|
3358
|
+
var DEFAULT_MESSAGES_URL = {
|
|
3100
3359
|
url: {
|
|
3101
3360
|
key: 'error',
|
|
3102
3361
|
message: 'Введите корректный URL-адрес'
|
|
3103
3362
|
}
|
|
3104
3363
|
};
|
|
3105
|
-
|
|
3364
|
+
var DEFAULT_MESSAGES_PASSWORD = {
|
|
3106
3365
|
password_required: {
|
|
3107
3366
|
key: 'required',
|
|
3108
3367
|
message: 'Введите пароль'
|
|
3109
3368
|
}
|
|
3110
3369
|
};
|
|
3111
|
-
|
|
3370
|
+
var DEFAULT_MESSAGES_NUMBER = {
|
|
3112
3371
|
matches: {
|
|
3113
3372
|
key: 'error',
|
|
3114
3373
|
message: 'Допускается ввод только цифр от 0 до 9'
|
|
@@ -3118,21 +3377,23 @@ const DEFAULT_MESSAGES_NUMBER = {
|
|
|
3118
3377
|
message: 'Только числовое значение'
|
|
3119
3378
|
}
|
|
3120
3379
|
};
|
|
3121
|
-
|
|
3380
|
+
var DEFAULT_MESSAGES_MIN_MAX = {
|
|
3122
3381
|
min: {
|
|
3123
3382
|
key: 'error',
|
|
3124
|
-
message: ({
|
|
3125
|
-
min
|
|
3126
|
-
|
|
3383
|
+
message: function message(_ref) {
|
|
3384
|
+
var min = _ref.min;
|
|
3385
|
+
return "\u0417\u043D\u0430\u0447\u0435\u043D\u0438\u0435 \u0434\u043E\u043B\u0436\u043D\u043E \u0431\u044B\u0442\u044C \u043D\u0435 \u043C\u0435\u043D\u0435\u0435 " + min + " \u0441\u0438\u043C\u0432\u043E\u043B\u043E\u0432";
|
|
3386
|
+
}
|
|
3127
3387
|
},
|
|
3128
3388
|
max: {
|
|
3129
3389
|
key: 'error',
|
|
3130
|
-
message: ({
|
|
3131
|
-
max
|
|
3132
|
-
|
|
3390
|
+
message: function message(_ref2) {
|
|
3391
|
+
var max = _ref2.max;
|
|
3392
|
+
return "\u0417\u043D\u0430\u0447\u0435\u043D\u0438\u0435 \u0434\u043E\u043B\u0436\u043D\u043E \u0431\u044B\u0442\u044C \u043D\u0435 \u043C\u0435\u043D\u0435\u0435 " + max + " \u0441\u0438\u043C\u0432\u043E\u043B\u043E\u0432";
|
|
3393
|
+
}
|
|
3133
3394
|
}
|
|
3134
3395
|
};
|
|
3135
|
-
|
|
3396
|
+
var DEFAULT_MESSAGES_PHONE = {
|
|
3136
3397
|
phone_error: {
|
|
3137
3398
|
key: 'error',
|
|
3138
3399
|
message: 'Введите корректный номер телефона'
|
|
@@ -3146,7 +3407,7 @@ const DEFAULT_MESSAGES_PHONE = {
|
|
|
3146
3407
|
message: 'Укажите номер телефона'
|
|
3147
3408
|
}
|
|
3148
3409
|
};
|
|
3149
|
-
|
|
3410
|
+
var DEFAULT_MESSAGES_EMAIL = {
|
|
3150
3411
|
email_error: {
|
|
3151
3412
|
key: 'error',
|
|
3152
3413
|
message: 'Введите корректный адрес электронной почты'
|
|
@@ -3221,20 +3482,11 @@ const DEFAULT_MESSAGES_EMAIL = {
|
|
|
3221
3482
|
... etc
|
|
3222
3483
|
*/
|
|
3223
3484
|
|
|
3224
|
-
|
|
3225
|
-
...DEFAULT_MESSAGES_EMAIL,
|
|
3226
|
-
...DEFAULT_MESSAGES_ERROR,
|
|
3227
|
-
...DEFAULT_MESSAGES_MIN_MAX,
|
|
3228
|
-
...DEFAULT_MESSAGES_NUMBER,
|
|
3229
|
-
...DEFAULT_MESSAGES_PASSWORD,
|
|
3230
|
-
...DEFAULT_MESSAGES_PHONE,
|
|
3231
|
-
...DEFAULT_MESSAGES_REQUIRED,
|
|
3232
|
-
...DEFAULT_MESSAGES_URL
|
|
3233
|
-
};
|
|
3485
|
+
var DEFAULT_MESSAGES_FIELDS = Object.assign({}, DEFAULT_MESSAGES_EMAIL, DEFAULT_MESSAGES_ERROR, DEFAULT_MESSAGES_MIN_MAX, DEFAULT_MESSAGES_NUMBER, DEFAULT_MESSAGES_PASSWORD, DEFAULT_MESSAGES_PHONE, DEFAULT_MESSAGES_REQUIRED, DEFAULT_MESSAGES_URL);
|
|
3234
3486
|
|
|
3235
|
-
|
|
3236
|
-
|
|
3237
|
-
|
|
3487
|
+
var parseNumericField = function parseNumericField(value) {
|
|
3488
|
+
var numberValue = value.slice(0, 10).replace(/,/g, '.').replace(/[^\d.]/g, '');
|
|
3489
|
+
var parsedValue = parseFloat(numberValue);
|
|
3238
3490
|
if (parsedValue || parsedValue === 0) {
|
|
3239
3491
|
if (numberValue.endsWith('.')) {
|
|
3240
3492
|
if ((numberValue.match(/\./g) || []).length > 1) {
|
|
@@ -3298,22 +3550,23 @@ const parseNumericField = value => {
|
|
|
3298
3550
|
// return formErrors
|
|
3299
3551
|
// }
|
|
3300
3552
|
|
|
3301
|
-
|
|
3553
|
+
var getErrorsForFinalForm = function getErrorsForFinalForm(error) {
|
|
3554
|
+
var _error$response;
|
|
3302
3555
|
/*
|
|
3303
3556
|
* error - its an "axios" error in many cases
|
|
3304
3557
|
*/
|
|
3305
3558
|
|
|
3306
|
-
|
|
3307
|
-
|
|
3559
|
+
var formErrors = {};
|
|
3560
|
+
var serverErrors = ((_error$response = error.response) == null ? void 0 : _error$response.data) || error;
|
|
3308
3561
|
if (serverErrors) {
|
|
3309
3562
|
// Collect errors for some fields, which in the response from server
|
|
3310
3563
|
if (typeof serverErrors === 'string') {
|
|
3311
3564
|
// Server may send an html page as error data
|
|
3312
3565
|
formErrors[finalForm.FORM_ERROR] = 'Во время обработки запроса произошла ошибка, попробуйте повторить запрос';
|
|
3313
3566
|
} else {
|
|
3314
|
-
for (
|
|
3567
|
+
for (var key in serverErrors) {
|
|
3315
3568
|
// "non_field_errors" and "detail" is special keys in django to mark errors not for fields
|
|
3316
|
-
|
|
3569
|
+
var errorFieldKey = key === 'non_field_errors' || key === 'detail' ? finalForm.FORM_ERROR : key;
|
|
3317
3570
|
|
|
3318
3571
|
// Say to "react-final-form" that we have some fields errors
|
|
3319
3572
|
formErrors[errorFieldKey] = castArray__default.default(serverErrors[key])[0];
|