@itcase/forms 1.1.1 → 1.1.2
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 +565 -750
- package/dist/itcase-forms.esm.js +637 -830
- package/package.json +1 -2
- package/dist/css/form/Field/Dadata/Textarea.css +0 -20
package/dist/itcase-forms.cjs.js
CHANGED
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var libphonenumberJs = require('libphonenumber-js');
|
|
4
|
-
var React = require('react');
|
|
4
|
+
var React$1 = require('react');
|
|
5
5
|
var finalForm = require('final-form');
|
|
6
6
|
var reactFinalForm = require('react-final-form');
|
|
7
|
-
var PropTypes = require('prop-types');
|
|
8
7
|
var clsx = require('clsx');
|
|
9
8
|
var Checkbox = require('@itcase/ui/components/Checkbox');
|
|
10
9
|
var Divider = require('@itcase/ui/components/Divider');
|
|
@@ -17,6 +16,7 @@ var Choice = require('@itcase/ui/components/Choice');
|
|
|
17
16
|
var Icon = require('@itcase/ui/components/Icon');
|
|
18
17
|
var Code = require('@itcase/ui/components/Code');
|
|
19
18
|
var DatePicker = require('@itcase/ui/components/DatePicker');
|
|
19
|
+
require('prop-types');
|
|
20
20
|
var axios = require('axios');
|
|
21
21
|
var fileSelector = require('file-selector');
|
|
22
22
|
var castArray = require('lodash/castArray');
|
|
@@ -28,6 +28,7 @@ var Input = require('@itcase/ui/components/Input');
|
|
|
28
28
|
var Radio = require('@itcase/ui/components/Radio');
|
|
29
29
|
var Segmented = require('@itcase/ui/components/Segmented');
|
|
30
30
|
var Select = require('@itcase/ui/components/Select');
|
|
31
|
+
var icons = require('src/icons');
|
|
31
32
|
var Switch = require('@itcase/ui/components/Switch');
|
|
32
33
|
var Textarea = require('@itcase/ui/components/Textarea');
|
|
33
34
|
var reactImask = require('react-imask');
|
|
@@ -40,8 +41,7 @@ require('apisauce');
|
|
|
40
41
|
|
|
41
42
|
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
42
43
|
|
|
43
|
-
var React__default = /*#__PURE__*/_interopDefault(React);
|
|
44
|
-
var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
|
|
44
|
+
var React__default = /*#__PURE__*/_interopDefault(React$1);
|
|
45
45
|
var clsx__default = /*#__PURE__*/_interopDefault(clsx);
|
|
46
46
|
var camelCase__default = /*#__PURE__*/_interopDefault(camelCase);
|
|
47
47
|
var snakeCase__default = /*#__PURE__*/_interopDefault(snakeCase);
|
|
@@ -125,63 +125,84 @@ const makeValidate = schema => {
|
|
|
125
125
|
};
|
|
126
126
|
};
|
|
127
127
|
function useYupValidationSchema(schema, language) {
|
|
128
|
-
const validate = React.useMemo(() => schema && makeValidate(schema), [schema, language]);
|
|
128
|
+
const validate = React$1.useMemo(() => schema && makeValidate(schema), [schema, language]);
|
|
129
129
|
return validate;
|
|
130
130
|
}
|
|
131
131
|
|
|
132
|
+
const defaultFieldProps = {
|
|
133
|
+
width: 'fill',
|
|
134
|
+
direction: 'vertical',
|
|
135
|
+
dividerFill: 'errorPrimary',
|
|
136
|
+
errorMessageTextColor: 'errorTextPrimary',
|
|
137
|
+
// error
|
|
138
|
+
errorMessageTextSize: 's',
|
|
139
|
+
fill: 'surfacePrimary',
|
|
140
|
+
helpTextColor: 'surfaceTextQuaternary',
|
|
141
|
+
// messageTextSize: 's',
|
|
142
|
+
// messageTextColor: 'surfaceTextSecondary',
|
|
143
|
+
helpTextSize: 's',
|
|
144
|
+
labelTextColor: 'surfaceTextPrimary',
|
|
145
|
+
labelTextSize: 'm',
|
|
146
|
+
requiredMessageTextColor: 'warningTextPrimary',
|
|
147
|
+
// appearance depending on the type of error
|
|
148
|
+
// required
|
|
149
|
+
requiredMessageTextSize: 's',
|
|
150
|
+
showMessage: true
|
|
151
|
+
};
|
|
152
|
+
|
|
132
153
|
function FieldWrapperBase(props) {
|
|
133
154
|
const {
|
|
134
155
|
id,
|
|
135
|
-
children,
|
|
136
|
-
isDisabled,
|
|
137
|
-
isErrorState,
|
|
138
|
-
isHidden,
|
|
139
|
-
isRequired,
|
|
140
|
-
isValidState,
|
|
141
|
-
after,
|
|
142
|
-
afterItem,
|
|
143
|
-
before,
|
|
144
|
-
beforeItem,
|
|
145
156
|
className,
|
|
146
|
-
|
|
157
|
+
type = 'normal',
|
|
158
|
+
label,
|
|
159
|
+
labelHidden,
|
|
160
|
+
labelTextColor,
|
|
161
|
+
labelTextSize,
|
|
162
|
+
labelTextSizeMobile,
|
|
163
|
+
labelTextSizeTablet,
|
|
164
|
+
labelTextWeight,
|
|
147
165
|
desc,
|
|
148
166
|
descTextColor,
|
|
149
167
|
descTextSize,
|
|
150
168
|
descTextWeight,
|
|
169
|
+
errorKey,
|
|
170
|
+
errorMessage,
|
|
171
|
+
isErrorState,
|
|
172
|
+
metaError,
|
|
173
|
+
helpTextColorSuccess,
|
|
174
|
+
isDisabled,
|
|
175
|
+
afterItem,
|
|
176
|
+
beforeItem,
|
|
177
|
+
dataTour,
|
|
151
178
|
dividerDirection,
|
|
152
179
|
dividerFill,
|
|
153
180
|
dividerSize,
|
|
154
181
|
dividerWidth,
|
|
155
|
-
errorKey,
|
|
156
|
-
errorMessage,
|
|
157
182
|
fieldClassName,
|
|
158
183
|
helpText,
|
|
159
184
|
helpTextColor,
|
|
160
|
-
helpTextColorSuccess,
|
|
161
185
|
helpTextSize,
|
|
162
186
|
helpTextSizeMobile,
|
|
163
187
|
helpTextWeight,
|
|
164
188
|
inputName,
|
|
165
189
|
inputValue,
|
|
166
|
-
label,
|
|
167
|
-
labelHidden,
|
|
168
|
-
labelTextColor,
|
|
169
|
-
labelTextSize,
|
|
170
|
-
labelTextSizeMobile,
|
|
171
|
-
labelTextSizeTablet,
|
|
172
|
-
labelTextWeight,
|
|
173
190
|
messageTextSize,
|
|
174
191
|
metaActive,
|
|
175
|
-
metaError,
|
|
176
|
-
set,
|
|
177
192
|
showDivider,
|
|
178
193
|
showMessage,
|
|
179
|
-
tag: Tag,
|
|
180
|
-
|
|
194
|
+
tag: Tag = 'div',
|
|
195
|
+
before,
|
|
196
|
+
after,
|
|
197
|
+
isHidden,
|
|
198
|
+
isRequired,
|
|
199
|
+
isValidState,
|
|
200
|
+
set,
|
|
201
|
+
children
|
|
181
202
|
} = props;
|
|
182
|
-
const formFieldClass = React.useMemo(() => 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}`), [className, isErrorState, isValidState, isRequired, metaActive, inputValue, isDisabled, metaError]);
|
|
183
|
-
const fieldClass = React.useMemo(() => clsx__default.default(fieldClassName, isValidState && `${fieldClassName}_state_success`, metaActive && `${fieldClassName}_state_focus`, inputValue && `${fieldClassName}_state_filled`, isDisabled && `${fieldClassName}_state_disabled`, isErrorState && `${fieldClassName}_state_${errorKey}`), [fieldClassName, isErrorState, isValidState, metaActive, inputValue, isDisabled, metaError]);
|
|
184
|
-
const validationAppearance = React.useMemo(() => {
|
|
203
|
+
const formFieldClass = React$1.useMemo(() => 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}`), [className, isErrorState, isValidState, isRequired, metaActive, inputValue, isDisabled, metaError]);
|
|
204
|
+
const fieldClass = React$1.useMemo(() => clsx__default.default(fieldClassName, isValidState && `${fieldClassName}_state_success`, metaActive && `${fieldClassName}_state_focus`, inputValue && `${fieldClassName}_state_filled`, isDisabled && `${fieldClassName}_state_disabled`, isErrorState && `${fieldClassName}_state_${errorKey}`), [fieldClassName, isErrorState, isValidState, metaActive, inputValue, isDisabled, metaError]);
|
|
205
|
+
const validationAppearance = React$1.useMemo(() => {
|
|
185
206
|
return {
|
|
186
207
|
textColor: props[`${errorKey}MessageTextColor`],
|
|
187
208
|
textSize: props[`${errorKey}MessageTextSize`],
|
|
@@ -230,10 +251,10 @@ function FieldWrapperBase(props) {
|
|
|
230
251
|
htmlFor: id
|
|
231
252
|
}, /*#__PURE__*/React__default.default.createElement(Text.Text, {
|
|
232
253
|
size: labelTextSize,
|
|
233
|
-
sizeMobile: labelTextSizeMobile,
|
|
234
|
-
sizeTablet: labelTextSizeTablet,
|
|
235
254
|
textColor: labelTextColor,
|
|
236
|
-
textWeight: labelTextWeight
|
|
255
|
+
textWeight: labelTextWeight,
|
|
256
|
+
sizeMobile: labelTextSizeMobile,
|
|
257
|
+
sizeTablet: labelTextSizeTablet
|
|
237
258
|
}, label, labelHidden && '\u00A0')), desc && /*#__PURE__*/React__default.default.createElement("div", {
|
|
238
259
|
className: "form-field__desc",
|
|
239
260
|
"data-test-id": `${inputName}FieldDesc`
|
|
@@ -248,86 +269,32 @@ function FieldWrapperBase(props) {
|
|
|
248
269
|
}, beforeItem, children, afterItem), showDivider && /*#__PURE__*/React__default.default.createElement(Divider.Divider, {
|
|
249
270
|
className: "form-field__item-divider",
|
|
250
271
|
width: dividerWidth,
|
|
251
|
-
fill: dividerFill,
|
|
252
272
|
direction: dividerDirection,
|
|
253
|
-
size: dividerSize
|
|
273
|
+
size: dividerSize,
|
|
274
|
+
fill: dividerFill
|
|
254
275
|
})), showMessage && /*#__PURE__*/React__default.default.createElement("div", {
|
|
255
276
|
className: "form-field__message",
|
|
256
277
|
"data-test-id": `${inputName}FieldMessage`
|
|
257
278
|
}, isErrorState && errorMessage && /*#__PURE__*/React__default.default.createElement(Text.Text, {
|
|
258
|
-
className: "form-field__message-item form-field__message-item_type-error",
|
|
259
|
-
dataTestId: `${inputName}FieldMessageError`,
|
|
260
279
|
id: `${inputName}-error`,
|
|
280
|
+
className: "form-field__message-item form-field__message-item_type-error",
|
|
261
281
|
size: validationAppearance?.textSize,
|
|
262
282
|
textColor: validationAppearance?.textColor,
|
|
263
|
-
textWeight: validationAppearance?.textWeight
|
|
283
|
+
textWeight: validationAppearance?.textWeight,
|
|
284
|
+
dataTestId: `${inputName}FieldMessageError`
|
|
264
285
|
}, errorMessage), Boolean(helpText) && (!isErrorState || !errorMessage) && /*#__PURE__*/React__default.default.createElement(Text.Text, {
|
|
265
286
|
className: "form-field__message-item form-field__message-item_type_help-text",
|
|
266
|
-
dataTestId: `${inputName}FieldMessageHelpText`,
|
|
267
287
|
size: helpTextSize,
|
|
268
|
-
sizeMobile: helpTextSizeMobile,
|
|
269
288
|
textColor: isValidState ? helpTextColorSuccess : helpTextColor,
|
|
270
|
-
textWeight: helpTextWeight
|
|
289
|
+
textWeight: helpTextWeight,
|
|
290
|
+
dataTestId: `${inputName}FieldMessageHelpText`,
|
|
291
|
+
sizeMobile: helpTextSizeMobile
|
|
271
292
|
}, helpText), (!isErrorState && !helpText || isErrorState && !helpText && !errorMessage) && /*#__PURE__*/React__default.default.createElement(Text.Text, {
|
|
272
293
|
className: "form-field__message-item form-field__message-item_type_help-text",
|
|
273
|
-
|
|
274
|
-
|
|
294
|
+
size: messageTextSize,
|
|
295
|
+
dataTestId: `${inputName}FieldMessageHelpText`
|
|
275
296
|
}, '\u00A0')), after);
|
|
276
297
|
}
|
|
277
|
-
FieldWrapperBase.defaultProps = {
|
|
278
|
-
errorMessageTextColor: 'errorTextPrimary',
|
|
279
|
-
errorMessageTextSize: 's',
|
|
280
|
-
requiredMessageTextColor: 'warningTextPrimary',
|
|
281
|
-
requiredMessageTextSize: 's',
|
|
282
|
-
tag: 'div',
|
|
283
|
-
type: 'normal'
|
|
284
|
-
};
|
|
285
|
-
FieldWrapperBase.propTypes = {
|
|
286
|
-
id: PropTypes__default.default.string,
|
|
287
|
-
children: PropTypes__default.default.any,
|
|
288
|
-
isDisabled: PropTypes__default.default.bool,
|
|
289
|
-
isHidden: PropTypes__default.default.bool,
|
|
290
|
-
isRequired: PropTypes__default.default.bool,
|
|
291
|
-
after: PropTypes__default.default.any,
|
|
292
|
-
afterItem: PropTypes__default.default.any,
|
|
293
|
-
autoComplete: PropTypes__default.default.string,
|
|
294
|
-
before: PropTypes__default.default.any,
|
|
295
|
-
beforeItem: PropTypes__default.default.any,
|
|
296
|
-
className: PropTypes__default.default.string,
|
|
297
|
-
dataTour: PropTypes__default.default.string,
|
|
298
|
-
desc: PropTypes__default.default.string,
|
|
299
|
-
descTextColor: PropTypes__default.default.string,
|
|
300
|
-
descTextSize: PropTypes__default.default.string,
|
|
301
|
-
descTextWeight: PropTypes__default.default.string,
|
|
302
|
-
dividerDirection: PropTypes__default.default.string,
|
|
303
|
-
dividerFill: PropTypes__default.default.string,
|
|
304
|
-
dividerSize: PropTypes__default.default.string,
|
|
305
|
-
dividerWidth: PropTypes__default.default.string,
|
|
306
|
-
fieldClassName: PropTypes__default.default.string,
|
|
307
|
-
inputName: PropTypes__default.default.string,
|
|
308
|
-
inputOnBlur: PropTypes__default.default.func,
|
|
309
|
-
inputOnChange: PropTypes__default.default.func,
|
|
310
|
-
inputOnFocus: PropTypes__default.default.func,
|
|
311
|
-
inputValue: PropTypes__default.default.any,
|
|
312
|
-
itemType: PropTypes__default.default.string,
|
|
313
|
-
label: PropTypes__default.default.any,
|
|
314
|
-
labelHidden: PropTypes__default.default.bool,
|
|
315
|
-
labelTextColor: PropTypes__default.default.string,
|
|
316
|
-
labelTextSize: PropTypes__default.default.string,
|
|
317
|
-
labelTextWeight: PropTypes__default.default.string,
|
|
318
|
-
message: PropTypes__default.default.string,
|
|
319
|
-
messageSize: PropTypes__default.default.string,
|
|
320
|
-
messageTextColor: PropTypes__default.default.string,
|
|
321
|
-
messageTextSize: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.number]),
|
|
322
|
-
messageTextWeight: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.number]),
|
|
323
|
-
metaActive: PropTypes__default.default.bool,
|
|
324
|
-
metaError: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.bool]),
|
|
325
|
-
set: PropTypes__default.default.string,
|
|
326
|
-
showDivider: PropTypes__default.default.bool,
|
|
327
|
-
showMessage: PropTypes__default.default.bool,
|
|
328
|
-
tag: PropTypes__default.default.oneOfType([PropTypes__default.default.elementType, PropTypes__default.default.string]),
|
|
329
|
-
type: PropTypes__default.default.string
|
|
330
|
-
};
|
|
331
298
|
function FieldWrapper(props) {
|
|
332
299
|
const {
|
|
333
300
|
inputName
|
|
@@ -336,14 +303,13 @@ function FieldWrapper(props) {
|
|
|
336
303
|
change
|
|
337
304
|
} = reactFinalForm.useForm(); // , mutators
|
|
338
305
|
|
|
339
|
-
React.useEffect(() => {
|
|
306
|
+
React$1.useEffect(() => {
|
|
340
307
|
return () => {
|
|
341
308
|
change(inputName, undefined);
|
|
342
309
|
};
|
|
343
310
|
}, []);
|
|
344
311
|
return /*#__PURE__*/React__default.default.createElement(FieldWrapperBase, props);
|
|
345
312
|
}
|
|
346
|
-
FieldWrapper.propTypes = FieldWrapperBase.propTypes;
|
|
347
313
|
|
|
348
314
|
// Whether to display an error message based on "fieldProps" and meta-objects
|
|
349
315
|
function useFieldValidationState(props) {
|
|
@@ -360,7 +326,7 @@ function useFieldValidationState(props) {
|
|
|
360
326
|
const successKey = 'success';
|
|
361
327
|
|
|
362
328
|
// Determines if the field is in an error state based on various conditions.
|
|
363
|
-
const isErrorState = React.useMemo(() => {
|
|
329
|
+
const isErrorState = React$1.useMemo(() => {
|
|
364
330
|
if (fieldProps.showErrorsOnSubmit) {
|
|
365
331
|
return Boolean(meta.submitFailed && meta.touched && (meta.error || submitError));
|
|
366
332
|
} else {
|
|
@@ -369,12 +335,12 @@ function useFieldValidationState(props) {
|
|
|
369
335
|
}, [fieldProps.showErrorsOnSubmit, meta.submitFailed, meta.touched, meta.error, submitError]);
|
|
370
336
|
|
|
371
337
|
// Determines if the field's input state is valid
|
|
372
|
-
const isValidState = React.useMemo(() => {
|
|
338
|
+
const isValidState = React$1.useMemo(() => {
|
|
373
339
|
const hasValue = Array.isArray(input?.value) ? input?.value.length : input?.value;
|
|
374
340
|
const isModifiedAfterSubmit = meta.modifiedSinceLastSubmit && !meta.error && submitError;
|
|
375
341
|
return Boolean(hasValue && (meta.valid || isModifiedAfterSubmit));
|
|
376
342
|
}, [input?.value, meta.valid, meta.error, submitError, meta.modifiedSinceLastSubmit]);
|
|
377
|
-
const errorMessage = React.useMemo(() => {
|
|
343
|
+
const errorMessage = React$1.useMemo(() => {
|
|
378
344
|
// If final-form field has error in "meta" render-property.
|
|
379
345
|
// If field not modified after last form submit - use submit error
|
|
380
346
|
const error = meta.error || submitError || false;
|
|
@@ -412,7 +378,7 @@ function useValidationAppearanceInputProps(props) {
|
|
|
412
378
|
} = props;
|
|
413
379
|
|
|
414
380
|
// TODO: need to add props that can change during errors in this field
|
|
415
|
-
const validationAppearanceInputProps = React.useMemo(() => {
|
|
381
|
+
const validationAppearanceInputProps = React$1.useMemo(() => {
|
|
416
382
|
// const resultAppearanceProps = {
|
|
417
383
|
// messageTextColor: props.errorMessageTextColor,
|
|
418
384
|
// messageTextSize: props.errorMessageTextSize,
|
|
@@ -454,20 +420,20 @@ function useValidationAppearanceInputProps(props) {
|
|
|
454
420
|
|
|
455
421
|
const CheckboxField = /*#__PURE__*/React__default.default.memo(function CheckboxField(props) {
|
|
456
422
|
const {
|
|
457
|
-
|
|
458
|
-
fieldProps,
|
|
423
|
+
name,
|
|
459
424
|
initialValue,
|
|
460
|
-
inputProps,
|
|
461
425
|
isDisabled,
|
|
462
|
-
|
|
463
|
-
|
|
426
|
+
classNameGroupItem,
|
|
427
|
+
fieldProps = {},
|
|
428
|
+
inputProps = {},
|
|
464
429
|
showMessage,
|
|
430
|
+
isRequired,
|
|
465
431
|
onChange
|
|
466
432
|
} = props;
|
|
467
433
|
return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Field, {
|
|
468
|
-
|
|
434
|
+
type: "checkbox",
|
|
469
435
|
name: name,
|
|
470
|
-
|
|
436
|
+
initialValue: initialValue
|
|
471
437
|
}, function Render({
|
|
472
438
|
input,
|
|
473
439
|
meta
|
|
@@ -479,67 +445,74 @@ const CheckboxField = /*#__PURE__*/React__default.default.memo(function Checkbox
|
|
|
479
445
|
* custom React Hook function.
|
|
480
446
|
*/
|
|
481
447
|
|
|
482
|
-
const onChangeField = React.useCallback(event => {
|
|
448
|
+
const onChangeField = React$1.useCallback(event => {
|
|
483
449
|
input.onChange(event);
|
|
484
450
|
if (onChange) {
|
|
485
451
|
onChange(event.target.checked, input.name);
|
|
486
452
|
}
|
|
487
453
|
}, [onChange, input.onChange]);
|
|
488
454
|
const {
|
|
489
|
-
isErrorState,
|
|
490
|
-
isValidState,
|
|
491
455
|
errorKey,
|
|
492
|
-
errorMessage
|
|
456
|
+
errorMessage,
|
|
457
|
+
isErrorState,
|
|
458
|
+
isValidState
|
|
493
459
|
} = useFieldValidationState({
|
|
494
460
|
fieldProps: fieldProps,
|
|
495
461
|
input: input,
|
|
496
462
|
meta: meta
|
|
497
463
|
});
|
|
498
464
|
const updatedInputProps = useValidationAppearanceInputProps({
|
|
499
|
-
|
|
500
|
-
|
|
465
|
+
inputProps: inputProps,
|
|
466
|
+
validationStateKey: isErrorState ? errorKey : 'success'
|
|
501
467
|
});
|
|
502
468
|
return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
|
|
503
469
|
className: clsx__default.default('form-field_type_checkbox', 'form__item_type_checkbox', classNameGroupItem),
|
|
504
470
|
errorKey: errorKey,
|
|
505
471
|
errorMessage: errorMessage,
|
|
472
|
+
isErrorState: isErrorState,
|
|
473
|
+
metaError: meta.error,
|
|
474
|
+
isDisabled: isDisabled,
|
|
506
475
|
fieldClassName: "form-checkbox",
|
|
507
476
|
inputName: input.name,
|
|
508
477
|
inputValue: input.checked,
|
|
509
|
-
isDisabled: isDisabled,
|
|
510
|
-
isErrorState: isErrorState,
|
|
511
|
-
isRequired: isRequired,
|
|
512
|
-
isValidState: isValidState,
|
|
513
478
|
metaActive: meta.active,
|
|
514
|
-
metaError: meta.error,
|
|
515
479
|
showMessage: showMessage,
|
|
516
|
-
tag: "label"
|
|
480
|
+
tag: "label",
|
|
481
|
+
isRequired: isRequired,
|
|
482
|
+
isValidState: isValidState
|
|
517
483
|
}, fieldProps), /*#__PURE__*/React__default.default.createElement(Checkbox.Checkbox, Object.assign({
|
|
484
|
+
type: "checkbox",
|
|
485
|
+
name: input.name,
|
|
486
|
+
isDisabled: isDisabled,
|
|
518
487
|
autoComplete: "nope",
|
|
519
488
|
checked: input.checked,
|
|
520
|
-
isDisabled: isDisabled,
|
|
521
|
-
name: input.name,
|
|
522
|
-
type: "checkbox",
|
|
523
489
|
onBlur: input.onBlur,
|
|
524
490
|
onChange: onChangeField,
|
|
525
491
|
onFocus: input.onFocus
|
|
526
492
|
}, updatedInputProps)));
|
|
527
493
|
});
|
|
528
494
|
});
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
495
|
+
|
|
496
|
+
const defaultChoiceProps = {
|
|
497
|
+
width: 'fill',
|
|
498
|
+
borderColor: 'surfaceBorderTertiary',
|
|
499
|
+
// error
|
|
500
|
+
errorBorderColor: 'errorBorderPrimary',
|
|
501
|
+
fill: 'surfaceSecondary',
|
|
502
|
+
fillActive: 'accentPrimary',
|
|
503
|
+
fillActiveDisabled: 'surfaceTertiary',
|
|
504
|
+
fillHover: 'surfacePrimaryHover',
|
|
505
|
+
indicatorFill: 'accentPrimary',
|
|
506
|
+
labelTextActiveColor: 'accentTextPrimary',
|
|
507
|
+
labelTextActiveColorDisabled: 'surfaceTextDisabled',
|
|
508
|
+
labelTextColor: 'surfaceTextPrimary',
|
|
509
|
+
labelTextColorDisabled: 'surfaceTextDisabled',
|
|
510
|
+
labelTextSize: 'm',
|
|
511
|
+
// appearance depending on the type of error
|
|
512
|
+
// required
|
|
513
|
+
requiredBorderColor: 'warningBorderPrimary',
|
|
514
|
+
shape: 'rounded',
|
|
515
|
+
size: 'normal'
|
|
543
516
|
};
|
|
544
517
|
|
|
545
518
|
const ChoiceField = /*#__PURE__*/React__default.default.memo(function ChoiceField(props) {
|
|
@@ -562,7 +535,7 @@ const ChoiceField = /*#__PURE__*/React__default.default.memo(function ChoiceFiel
|
|
|
562
535
|
const {
|
|
563
536
|
change
|
|
564
537
|
} = reactFinalForm.useForm();
|
|
565
|
-
const setActiveSegment = React.useCallback((option, isChecked) => {
|
|
538
|
+
const setActiveSegment = React$1.useCallback((option, isChecked) => {
|
|
566
539
|
change(name, isChecked && option.value);
|
|
567
540
|
if (onChange) {
|
|
568
541
|
onChange(option.value, name, isChecked);
|
|
@@ -581,7 +554,7 @@ const ChoiceField = /*#__PURE__*/React__default.default.memo(function ChoiceFiel
|
|
|
581
554
|
* React Hooks must be called in a React function component or a
|
|
582
555
|
* custom React Hook function.
|
|
583
556
|
*/
|
|
584
|
-
const activeOption = React.useMemo(() => {
|
|
557
|
+
const activeOption = React$1.useMemo(() => {
|
|
585
558
|
const emptyOption = {
|
|
586
559
|
value: null,
|
|
587
560
|
label: null
|
|
@@ -636,25 +609,6 @@ const ChoiceField = /*#__PURE__*/React__default.default.memo(function ChoiceFiel
|
|
|
636
609
|
}, updatedInputProps)));
|
|
637
610
|
});
|
|
638
611
|
});
|
|
639
|
-
ChoiceField.propTypes = {
|
|
640
|
-
classNameGroupItem: PropTypes__default.default.string,
|
|
641
|
-
fieldProps: PropTypes__default.default.object,
|
|
642
|
-
initialValue: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.number, PropTypes__default.default.bool]),
|
|
643
|
-
inputProps: PropTypes__default.default.object,
|
|
644
|
-
isCheckbox: PropTypes__default.default.bool,
|
|
645
|
-
isDisabled: PropTypes__default.default.bool,
|
|
646
|
-
isRequired: PropTypes__default.default.bool,
|
|
647
|
-
label: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.element]),
|
|
648
|
-
messageType: PropTypes__default.default.string,
|
|
649
|
-
name: PropTypes__default.default.string,
|
|
650
|
-
options: PropTypes__default.default.arrayOf(PropTypes__default.default.shape({
|
|
651
|
-
label: PropTypes__default.default.string,
|
|
652
|
-
value: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.number])
|
|
653
|
-
})),
|
|
654
|
-
placeholder: PropTypes__default.default.string,
|
|
655
|
-
showMessage: PropTypes__default.default.bool,
|
|
656
|
-
onChange: PropTypes__default.default.func
|
|
657
|
-
};
|
|
658
612
|
|
|
659
613
|
const CustomField = /*#__PURE__*/React__default.default.memo(function CustomField(props) {
|
|
660
614
|
const {
|
|
@@ -663,7 +617,7 @@ const CustomField = /*#__PURE__*/React__default.default.memo(function CustomFiel
|
|
|
663
617
|
isRequired,
|
|
664
618
|
name,
|
|
665
619
|
initialValue,
|
|
666
|
-
fieldProps,
|
|
620
|
+
fieldProps = {},
|
|
667
621
|
classNameGroupItem,
|
|
668
622
|
showMessage,
|
|
669
623
|
clearIcon,
|
|
@@ -732,32 +686,17 @@ const CustomField = /*#__PURE__*/React__default.default.memo(function CustomFiel
|
|
|
732
686
|
}));
|
|
733
687
|
});
|
|
734
688
|
});
|
|
735
|
-
CustomField.defaultProps = {
|
|
736
|
-
inputProps: {},
|
|
737
|
-
fieldProps: {}
|
|
738
|
-
};
|
|
739
|
-
CustomField.propTypes = {
|
|
740
|
-
name: PropTypes__default.default.string.isRequired,
|
|
741
|
-
classNameGroupItem: PropTypes__default.default.string,
|
|
742
|
-
Component: PropTypes__default.default.element,
|
|
743
|
-
fieldProps: PropTypes__default.default.object,
|
|
744
|
-
initialValue: PropTypes__default.default.any,
|
|
745
|
-
inputProps: PropTypes__default.default.object,
|
|
746
|
-
isDisabled: PropTypes__default.default.bool,
|
|
747
|
-
isRequired: PropTypes__default.default.bool,
|
|
748
|
-
showMessage: PropTypes__default.default.bool
|
|
749
|
-
};
|
|
750
689
|
|
|
751
690
|
const CodeField = /*#__PURE__*/React__default.default.memo(function CodeField(props) {
|
|
752
691
|
const {
|
|
753
|
-
isRequired,
|
|
754
|
-
isDisabled,
|
|
755
692
|
name,
|
|
756
|
-
fieldProps,
|
|
757
693
|
initialValue,
|
|
758
|
-
|
|
694
|
+
isDisabled,
|
|
759
695
|
classNameGroupItem,
|
|
760
|
-
|
|
696
|
+
fieldProps = {},
|
|
697
|
+
inputProps = {},
|
|
698
|
+
showMessage,
|
|
699
|
+
isRequired
|
|
761
700
|
} = props;
|
|
762
701
|
return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Field, {
|
|
763
702
|
name: name,
|
|
@@ -812,34 +751,38 @@ const CodeField = /*#__PURE__*/React__default.default.memo(function CodeField(pr
|
|
|
812
751
|
}, updatedInputProps)));
|
|
813
752
|
});
|
|
814
753
|
});
|
|
815
|
-
|
|
816
|
-
|
|
817
|
-
|
|
818
|
-
|
|
819
|
-
|
|
820
|
-
|
|
821
|
-
|
|
822
|
-
|
|
823
|
-
|
|
824
|
-
|
|
825
|
-
|
|
826
|
-
|
|
827
|
-
|
|
754
|
+
|
|
755
|
+
const defaultDatepickerProps = {
|
|
756
|
+
daySize: 'xs',
|
|
757
|
+
dayTextColor: 'surfaceTextPrimary',
|
|
758
|
+
dayTextShape: 'rounded',
|
|
759
|
+
dayTextSize: 'm',
|
|
760
|
+
iconFillSize: 24,
|
|
761
|
+
iconItemFill: 'surfaceItemPrimary',
|
|
762
|
+
iconSize: 14,
|
|
763
|
+
monthTextColor: 'surfaceTextPrimary',
|
|
764
|
+
monthTextSize: 'm',
|
|
765
|
+
monthTextWeight: 400,
|
|
766
|
+
placeholderTextColor: 'surfaceTextSecondary',
|
|
767
|
+
size: 'normal',
|
|
768
|
+
yearTextColor: 'surfaceTextPrimary',
|
|
769
|
+
yearTextSize: 'm',
|
|
770
|
+
yearTextWeight: 400
|
|
828
771
|
};
|
|
829
772
|
|
|
830
773
|
function DatePickerField(props) {
|
|
831
774
|
const {
|
|
832
775
|
classNameGroupItem,
|
|
833
776
|
datePickerProps,
|
|
834
|
-
fieldProps,
|
|
835
|
-
inputProps,
|
|
777
|
+
fieldProps = {},
|
|
778
|
+
inputProps = {},
|
|
836
779
|
isDisabled,
|
|
837
780
|
isRequired,
|
|
838
781
|
name,
|
|
839
782
|
showMessage,
|
|
840
783
|
onChange
|
|
841
784
|
} = props;
|
|
842
|
-
return /*#__PURE__*/
|
|
785
|
+
return /*#__PURE__*/React.createElement(reactFinalForm.Field, {
|
|
843
786
|
name: name
|
|
844
787
|
}, function Render({
|
|
845
788
|
input,
|
|
@@ -852,7 +795,7 @@ function DatePickerField(props) {
|
|
|
852
795
|
* custom React Hook function.
|
|
853
796
|
*/
|
|
854
797
|
|
|
855
|
-
const onChangeField = React.useCallback((startDate, endDate) => {
|
|
798
|
+
const onChangeField = React$1.useCallback((startDate, endDate) => {
|
|
856
799
|
if (!datePickerProps.selectsRange) {
|
|
857
800
|
// When we need to save single date, value is date
|
|
858
801
|
// TODO: make object with one date? need to check all forms with DatePickerField
|
|
@@ -882,7 +825,7 @@ function DatePickerField(props) {
|
|
|
882
825
|
validationStateKey: isErrorState ? errorKey : 'success',
|
|
883
826
|
inputProps: inputProps
|
|
884
827
|
});
|
|
885
|
-
return /*#__PURE__*/
|
|
828
|
+
return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
|
|
886
829
|
className: clsx__default.default('form-field_type_datepicker', 'form__item_type_datepicker', classNameGroupItem),
|
|
887
830
|
errorKey: errorKey,
|
|
888
831
|
errorMessage: errorMessage,
|
|
@@ -896,7 +839,7 @@ function DatePickerField(props) {
|
|
|
896
839
|
metaActive: meta.active,
|
|
897
840
|
metaError: meta.error,
|
|
898
841
|
showMessage: showMessage
|
|
899
|
-
}, fieldProps), /*#__PURE__*/
|
|
842
|
+
}, fieldProps), /*#__PURE__*/React.createElement(DatePicker.DatePickerInput, {
|
|
900
843
|
datePickerProps: datePickerProps,
|
|
901
844
|
inputProps: updatedInputProps,
|
|
902
845
|
isDisabled: isDisabled,
|
|
@@ -909,20 +852,28 @@ function DatePickerField(props) {
|
|
|
909
852
|
}));
|
|
910
853
|
});
|
|
911
854
|
}
|
|
912
|
-
|
|
913
|
-
|
|
914
|
-
|
|
915
|
-
|
|
916
|
-
|
|
917
|
-
|
|
918
|
-
|
|
919
|
-
|
|
920
|
-
|
|
921
|
-
|
|
922
|
-
|
|
923
|
-
|
|
924
|
-
|
|
925
|
-
|
|
855
|
+
|
|
856
|
+
const defaultDropzoneProps = {
|
|
857
|
+
width: 'fill',
|
|
858
|
+
borderColor: 'surfaceBorderTertiary',
|
|
859
|
+
isPreviews: true,
|
|
860
|
+
borderColorHover: 'surfaceBorderQuaternary',
|
|
861
|
+
fill: 'surfacePrimary',
|
|
862
|
+
hintTitle: 'Перетащите изображение или выберите файл с компьютера',
|
|
863
|
+
hintTitleTextColor: 'surfaceTextPrimary',
|
|
864
|
+
hintTitleTextSize: 'm',
|
|
865
|
+
removeThumbText: 'удалить',
|
|
866
|
+
removeThumbTextColor: 'errorTextPrimary',
|
|
867
|
+
removeThumbTextHoverColor: 'errorTextPrimaryHover',
|
|
868
|
+
removeThumbTextSize: 's',
|
|
869
|
+
shape: 'rounded',
|
|
870
|
+
showFilename: true,
|
|
871
|
+
size: 'normal',
|
|
872
|
+
thumbBorderColor: 'surfaceBorderTertiary',
|
|
873
|
+
thumbBorderColorHover: 'surfaceBorderQuaternary',
|
|
874
|
+
thumbBorderWidth: 1,
|
|
875
|
+
thumbNameTextColor: 'surfaceTextPrimary',
|
|
876
|
+
thumbNameTextSize: 's'
|
|
926
877
|
};
|
|
927
878
|
|
|
928
879
|
/* globals File, FileReader, URL, console */
|
|
@@ -970,10 +921,10 @@ const FileInputDropzone = /*#__PURE__*/React__default.default.memo(function File
|
|
|
970
921
|
const {
|
|
971
922
|
change
|
|
972
923
|
} = reactFinalForm.useForm();
|
|
973
|
-
const [fileError, setFileError] = React.useState('');
|
|
974
|
-
const [fileIsLoading, setFileIsLoading] = React.useState(false);
|
|
975
|
-
const filesList = React.useMemo(() => inputValue ? castArray__default.default(inputValue) : [], [inputValue]);
|
|
976
|
-
const changeFormState = React.useCallback(newFiles => {
|
|
924
|
+
const [fileError, setFileError] = React$1.useState('');
|
|
925
|
+
const [fileIsLoading, setFileIsLoading] = React$1.useState(false);
|
|
926
|
+
const filesList = React$1.useMemo(() => inputValue ? castArray__default.default(inputValue) : [], [inputValue]);
|
|
927
|
+
const changeFormState = React$1.useCallback(newFiles => {
|
|
977
928
|
// If max files in dropzone is 1 - return file as it self, else as array of files
|
|
978
929
|
// ps: for old projects compatibility
|
|
979
930
|
const toSave = dropzoneProps.maxFiles == 1 ? newFiles[0] : newFiles;
|
|
@@ -985,7 +936,7 @@ const FileInputDropzone = /*#__PURE__*/React__default.default.memo(function File
|
|
|
985
936
|
[dropzoneProps, change]);
|
|
986
937
|
|
|
987
938
|
//
|
|
988
|
-
const convertFiledValueAndSaveAsFiles = React.useCallback(async currentFilesList => {
|
|
939
|
+
const convertFiledValueAndSaveAsFiles = React$1.useCallback(async currentFilesList => {
|
|
989
940
|
setFileIsLoading(true);
|
|
990
941
|
const newFiles = [];
|
|
991
942
|
for (const fileItem of currentFilesList) {
|
|
@@ -1003,7 +954,7 @@ const FileInputDropzone = /*#__PURE__*/React__default.default.memo(function File
|
|
|
1003
954
|
}, [isPreviews, changeFormState]);
|
|
1004
955
|
|
|
1005
956
|
// Delete file from dropzone
|
|
1006
|
-
const removeFile = React.useCallback((event, index) => {
|
|
957
|
+
const removeFile = React$1.useCallback((event, index) => {
|
|
1007
958
|
event.stopPropagation();
|
|
1008
959
|
event.preventDefault();
|
|
1009
960
|
const newFiles = [...filesList];
|
|
@@ -1078,7 +1029,7 @@ const FileInputDropzone = /*#__PURE__*/React__default.default.memo(function File
|
|
|
1078
1029
|
}
|
|
1079
1030
|
}
|
|
1080
1031
|
});
|
|
1081
|
-
React.useEffect(() => {
|
|
1032
|
+
React$1.useEffect(() => {
|
|
1082
1033
|
const currentFilesList = castArray__default.default(inputValue);
|
|
1083
1034
|
const isNeedToConvert = currentFilesList.some(fileItem => typeof fileItem === 'string');
|
|
1084
1035
|
if (isNeedToConvert) {
|
|
@@ -1229,25 +1180,11 @@ const FileInputDropzone = /*#__PURE__*/React__default.default.memo(function File
|
|
|
1229
1180
|
textWeight: errorMessageTextWeight
|
|
1230
1181
|
}, fileError)));
|
|
1231
1182
|
});
|
|
1232
|
-
FileInputDropzone.propTypes = {
|
|
1233
|
-
isPreviews: PropTypes__default.default.bool,
|
|
1234
|
-
dropzoneProps: PropTypes__default.default.object,
|
|
1235
|
-
hintDescription: PropTypes__default.default.string,
|
|
1236
|
-
hintTitle: PropTypes__default.default.string,
|
|
1237
|
-
inputName: PropTypes__default.default.string,
|
|
1238
|
-
inputValue: PropTypes__default.default.any,
|
|
1239
|
-
metaError: PropTypes__default.default.string,
|
|
1240
|
-
metaTouched: PropTypes__default.default.bool,
|
|
1241
|
-
removeThumbText: PropTypes__default.default.string,
|
|
1242
|
-
showFilename: PropTypes__default.default.bool,
|
|
1243
|
-
onAddFiles: PropTypes__default.default.func,
|
|
1244
|
-
onDeleteFile: PropTypes__default.default.func
|
|
1245
|
-
};
|
|
1246
1183
|
async function getFileByURL(url) {
|
|
1247
1184
|
try {
|
|
1248
1185
|
const response = await axios__default.default({
|
|
1249
|
-
|
|
1250
|
-
|
|
1186
|
+
url: url,
|
|
1187
|
+
responseType: 'blob'
|
|
1251
1188
|
});
|
|
1252
1189
|
const blobObject = response.data;
|
|
1253
1190
|
const dirtyFilename = response.headers['content-disposition']?.split('filename=')[1];
|
|
@@ -1317,22 +1254,26 @@ function setFileDataURL(file, resolve) {
|
|
|
1317
1254
|
|
|
1318
1255
|
const FileInput = /*#__PURE__*/React__default.default.memo(function FileInput(props) {
|
|
1319
1256
|
const {
|
|
1257
|
+
className,
|
|
1258
|
+
name,
|
|
1320
1259
|
width,
|
|
1321
|
-
|
|
1322
|
-
|
|
1323
|
-
|
|
1260
|
+
maxFiles,
|
|
1261
|
+
maxSize,
|
|
1262
|
+
size,
|
|
1263
|
+
fill,
|
|
1264
|
+
fillHover,
|
|
1265
|
+
label,
|
|
1266
|
+
labelTextColor,
|
|
1324
1267
|
borderColorHover,
|
|
1325
1268
|
borderType,
|
|
1326
|
-
|
|
1327
|
-
classNameGroupItem,
|
|
1328
|
-
dropzoneProps,
|
|
1269
|
+
borderWidth,
|
|
1329
1270
|
errorMessageTextColor = 'errorTextPrimary',
|
|
1330
1271
|
errorMessageTextSize = 's',
|
|
1331
1272
|
errorMessageTextWeight,
|
|
1332
|
-
fieldProps,
|
|
1333
1273
|
fileErrorText,
|
|
1334
|
-
|
|
1335
|
-
|
|
1274
|
+
classNameGroupItem,
|
|
1275
|
+
dropzoneProps,
|
|
1276
|
+
fieldProps,
|
|
1336
1277
|
hintDescription,
|
|
1337
1278
|
hintDescriptionTextColor,
|
|
1338
1279
|
hintDescriptionTextSize,
|
|
@@ -1343,11 +1284,6 @@ const FileInput = /*#__PURE__*/React__default.default.memo(function FileInput(pr
|
|
|
1343
1284
|
hintTitleTextSize,
|
|
1344
1285
|
hintTitleTextWeight,
|
|
1345
1286
|
hintTitleTextWrap,
|
|
1346
|
-
label,
|
|
1347
|
-
labelTextColor,
|
|
1348
|
-
maxFiles,
|
|
1349
|
-
maxSize,
|
|
1350
|
-
name,
|
|
1351
1287
|
removeThumbText,
|
|
1352
1288
|
removeThumbTextColor,
|
|
1353
1289
|
removeThumbTextHoverColor,
|
|
@@ -1356,7 +1292,6 @@ const FileInput = /*#__PURE__*/React__default.default.memo(function FileInput(pr
|
|
|
1356
1292
|
shape,
|
|
1357
1293
|
showFilename,
|
|
1358
1294
|
showMessage,
|
|
1359
|
-
size,
|
|
1360
1295
|
thumbBorderColor,
|
|
1361
1296
|
thumbBorderColorHover,
|
|
1362
1297
|
thumbBorderType,
|
|
@@ -1367,6 +1302,8 @@ const FileInput = /*#__PURE__*/React__default.default.memo(function FileInput(pr
|
|
|
1367
1302
|
thumbNameTextSize,
|
|
1368
1303
|
thumbNameTextWeight,
|
|
1369
1304
|
thumbNameTextWrap,
|
|
1305
|
+
isPreviews,
|
|
1306
|
+
isRequired,
|
|
1370
1307
|
onAddFiles,
|
|
1371
1308
|
onDeleteFile
|
|
1372
1309
|
} = props;
|
|
@@ -1384,10 +1321,10 @@ const FileInput = /*#__PURE__*/React__default.default.memo(function FileInput(pr
|
|
|
1384
1321
|
*/
|
|
1385
1322
|
|
|
1386
1323
|
const {
|
|
1387
|
-
isErrorState,
|
|
1388
|
-
isValidState,
|
|
1389
1324
|
errorKey,
|
|
1390
|
-
errorMessage
|
|
1325
|
+
errorMessage,
|
|
1326
|
+
isErrorState,
|
|
1327
|
+
isValidState
|
|
1391
1328
|
} = useFieldValidationState({
|
|
1392
1329
|
fieldProps: fieldProps,
|
|
1393
1330
|
input: input,
|
|
@@ -1404,33 +1341,37 @@ const FileInput = /*#__PURE__*/React__default.default.memo(function FileInput(pr
|
|
|
1404
1341
|
return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
|
|
1405
1342
|
className: clsx__default.default('form-field_type_dropzone', 'form__item_type_dropzone', classNameGroupItem),
|
|
1406
1343
|
width: width,
|
|
1344
|
+
label: label,
|
|
1407
1345
|
labelTextColor: labelTextColor,
|
|
1408
1346
|
errorKey: errorKey,
|
|
1409
1347
|
errorMessage: errorMessage,
|
|
1348
|
+
isErrorState: isErrorState,
|
|
1349
|
+
metaError: meta.error,
|
|
1410
1350
|
fieldClassName: "form-dropzone",
|
|
1411
1351
|
inputName: input.name,
|
|
1412
1352
|
inputValue: input.value,
|
|
1413
|
-
label: label,
|
|
1414
1353
|
metaActive: meta.active,
|
|
1415
|
-
metaError: meta.error,
|
|
1416
1354
|
metaTouched: meta.touched,
|
|
1417
1355
|
showMessage: showMessage,
|
|
1418
|
-
isErrorState: isErrorState,
|
|
1419
1356
|
isRequired: isRequired,
|
|
1420
1357
|
isValidState: isValidState
|
|
1421
1358
|
}, fieldProps), /*#__PURE__*/React__default.default.createElement(FileInputDropzone, {
|
|
1422
1359
|
className: className,
|
|
1360
|
+
maxFiles: maxFiles,
|
|
1361
|
+
maxSize: maxSize,
|
|
1362
|
+
size: size,
|
|
1423
1363
|
fill: fill,
|
|
1424
1364
|
fillHover: fillHover,
|
|
1425
|
-
borderWidth: borderWidth,
|
|
1426
1365
|
borderColor: updatedInputProps.borderColor,
|
|
1427
1366
|
borderColorHover: borderColorHover,
|
|
1428
1367
|
borderType: borderType,
|
|
1429
|
-
|
|
1368
|
+
borderWidth: borderWidth,
|
|
1430
1369
|
errorMessageTextColor: errorMessageTextColor,
|
|
1431
1370
|
errorMessageTextSize: errorMessageTextSize,
|
|
1432
1371
|
errorMessageWeight: errorMessageTextWeight,
|
|
1433
1372
|
fileErrorText: fileErrorText,
|
|
1373
|
+
metaError: meta.error,
|
|
1374
|
+
dropzoneProps: dropzoneProps,
|
|
1434
1375
|
hintDescription: hintDescription,
|
|
1435
1376
|
hintDescriptionTextColor: hintDescriptionTextColor,
|
|
1436
1377
|
hintDescriptionTextSize: hintDescriptionTextSize,
|
|
@@ -1443,9 +1384,6 @@ const FileInput = /*#__PURE__*/React__default.default.memo(function FileInput(pr
|
|
|
1443
1384
|
hintTitleTextWrap: hintTitleTextWrap,
|
|
1444
1385
|
inputName: input.name,
|
|
1445
1386
|
inputValue: input.value,
|
|
1446
|
-
maxFiles: maxFiles,
|
|
1447
|
-
maxSize: maxSize,
|
|
1448
|
-
metaError: meta.error,
|
|
1449
1387
|
metaTouched: meta.touched,
|
|
1450
1388
|
removeThumbText: removeThumbText,
|
|
1451
1389
|
removeThumbTextColor: removeThumbTextColor,
|
|
@@ -1454,7 +1392,6 @@ const FileInput = /*#__PURE__*/React__default.default.memo(function FileInput(pr
|
|
|
1454
1392
|
removeThumbTextWeight: removeThumbTextWeight,
|
|
1455
1393
|
shape: shape,
|
|
1456
1394
|
showFilename: showFilename,
|
|
1457
|
-
size: size,
|
|
1458
1395
|
thumbBorderColor: thumbBorderColor,
|
|
1459
1396
|
thumbBorderColorHover: thumbBorderColorHover,
|
|
1460
1397
|
thumbBorderType: thumbBorderType,
|
|
@@ -1471,43 +1408,25 @@ const FileInput = /*#__PURE__*/React__default.default.memo(function FileInput(pr
|
|
|
1471
1408
|
}));
|
|
1472
1409
|
});
|
|
1473
1410
|
});
|
|
1474
|
-
FileInput.propTypes = {
|
|
1475
|
-
isPreviews: PropTypes__default.default.bool,
|
|
1476
|
-
isRequired: PropTypes__default.default.bool,
|
|
1477
|
-
className: PropTypes__default.default.string,
|
|
1478
|
-
classNameGroupItem: PropTypes__default.default.string,
|
|
1479
|
-
classNameInput: PropTypes__default.default.string,
|
|
1480
|
-
classNameInputWrapper: PropTypes__default.default.string,
|
|
1481
|
-
dropzoneProps: PropTypes__default.default.object,
|
|
1482
|
-
hintDescription: PropTypes__default.default.string,
|
|
1483
|
-
hintTitle: PropTypes__default.default.string,
|
|
1484
|
-
inputClass: PropTypes__default.default.string,
|
|
1485
|
-
label: PropTypes__default.default.any,
|
|
1486
|
-
name: PropTypes__default.default.string.isRequired,
|
|
1487
|
-
removeThumbText: PropTypes__default.default.string,
|
|
1488
|
-
showFilename: PropTypes__default.default.bool,
|
|
1489
|
-
onAddFiles: PropTypes__default.default.func,
|
|
1490
|
-
onDeleteFile: PropTypes__default.default.func
|
|
1491
|
-
};
|
|
1492
1411
|
|
|
1493
1412
|
const Group = /*#__PURE__*/React__default.default.memo(function Group(props) {
|
|
1494
1413
|
const {
|
|
1495
|
-
children,
|
|
1496
|
-
isHidden,
|
|
1497
|
-
after,
|
|
1498
|
-
before,
|
|
1499
1414
|
className,
|
|
1500
|
-
|
|
1415
|
+
name,
|
|
1501
1416
|
label,
|
|
1502
1417
|
labelTextColor,
|
|
1503
1418
|
labelTextSize,
|
|
1504
1419
|
labelTextWeight,
|
|
1505
1420
|
message,
|
|
1506
|
-
|
|
1507
|
-
|
|
1421
|
+
dataTour,
|
|
1422
|
+
messageTextColor = 'surfaceTextTertiary',
|
|
1423
|
+
messageTextSize = 's',
|
|
1508
1424
|
messageTextWeight,
|
|
1509
|
-
|
|
1510
|
-
|
|
1425
|
+
showGroupMessage,
|
|
1426
|
+
before,
|
|
1427
|
+
after,
|
|
1428
|
+
isHidden,
|
|
1429
|
+
children
|
|
1511
1430
|
} = props;
|
|
1512
1431
|
return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Field, {
|
|
1513
1432
|
name: name
|
|
@@ -1565,20 +1484,22 @@ const Group = /*#__PURE__*/React__default.default.memo(function Group(props) {
|
|
|
1565
1484
|
}, '\u00A0')));
|
|
1566
1485
|
});
|
|
1567
1486
|
});
|
|
1568
|
-
|
|
1569
|
-
|
|
1570
|
-
|
|
1571
|
-
|
|
1572
|
-
|
|
1573
|
-
|
|
1574
|
-
|
|
1575
|
-
|
|
1576
|
-
|
|
1577
|
-
|
|
1578
|
-
|
|
1579
|
-
|
|
1580
|
-
|
|
1581
|
-
|
|
1487
|
+
|
|
1488
|
+
const defaultInputProps = {
|
|
1489
|
+
width: 'fill',
|
|
1490
|
+
borderColor: 'surfaceBorderTertiary',
|
|
1491
|
+
caret: 'secondaryItemSecondary',
|
|
1492
|
+
// error
|
|
1493
|
+
errorBorderColor: 'errorBorderPrimary',
|
|
1494
|
+
placeholderTextColor: 'surfaceTextQuaternary',
|
|
1495
|
+
// appearance depending on the type of error
|
|
1496
|
+
// required
|
|
1497
|
+
requiredBorderColor: 'warningBorderPrimary',
|
|
1498
|
+
shape: 'rounded',
|
|
1499
|
+
size: 'm',
|
|
1500
|
+
textColor: 'surfaceTextPrimary',
|
|
1501
|
+
textColorDisabled: 'surfaceTextDisabled',
|
|
1502
|
+
textSize: 'm'
|
|
1582
1503
|
};
|
|
1583
1504
|
|
|
1584
1505
|
const InputField = /*#__PURE__*/React__default.default.memo(function InputField(props) {
|
|
@@ -1596,7 +1517,8 @@ const InputField = /*#__PURE__*/React__default.default.memo(function InputField(
|
|
|
1596
1517
|
clearIconFillHover,
|
|
1597
1518
|
clearIconShape,
|
|
1598
1519
|
clearIconSize,
|
|
1599
|
-
fieldProps,
|
|
1520
|
+
fieldProps = {},
|
|
1521
|
+
inputProps = {},
|
|
1600
1522
|
iconFill,
|
|
1601
1523
|
iconFillHover,
|
|
1602
1524
|
iconRevealableHide,
|
|
@@ -1604,22 +1526,21 @@ const InputField = /*#__PURE__*/React__default.default.memo(function InputField(
|
|
|
1604
1526
|
iconShape,
|
|
1605
1527
|
iconSize,
|
|
1606
1528
|
initialValue,
|
|
1607
|
-
inputProps,
|
|
1608
1529
|
name,
|
|
1609
1530
|
parse,
|
|
1610
1531
|
showMessage,
|
|
1611
1532
|
onChange,
|
|
1612
1533
|
onClickClearIcon
|
|
1613
1534
|
} = props;
|
|
1614
|
-
const [isRevealed, setIsRevealed] = React.useState(false);
|
|
1615
|
-
const inputType = React.useMemo(() => {
|
|
1535
|
+
const [isRevealed, setIsRevealed] = React$1.useState(false);
|
|
1536
|
+
const inputType = React$1.useMemo(() => {
|
|
1616
1537
|
if (isPassword) {
|
|
1617
1538
|
return isRevealed ? 'text' : 'password';
|
|
1618
1539
|
} else {
|
|
1619
1540
|
return 'text';
|
|
1620
1541
|
}
|
|
1621
1542
|
}, [isRevealed, isPassword]);
|
|
1622
|
-
const onClickIconReveal = React.useCallback(event => {
|
|
1543
|
+
const onClickIconReveal = React$1.useCallback(event => {
|
|
1623
1544
|
event.preventDefault();
|
|
1624
1545
|
setIsRevealed(prev => !prev);
|
|
1625
1546
|
}, []);
|
|
@@ -1638,7 +1559,7 @@ const InputField = /*#__PURE__*/React__default.default.memo(function InputField(
|
|
|
1638
1559
|
* custom React Hook function.
|
|
1639
1560
|
*/
|
|
1640
1561
|
|
|
1641
|
-
const onChangeField = React.useCallback(event => {
|
|
1562
|
+
const onChangeField = React$1.useCallback(event => {
|
|
1642
1563
|
input.onChange(event);
|
|
1643
1564
|
if (onChange) {
|
|
1644
1565
|
onChange(event.target.value, input.name);
|
|
@@ -1704,113 +1625,65 @@ const InputField = /*#__PURE__*/React__default.default.memo(function InputField(
|
|
|
1704
1625
|
}));
|
|
1705
1626
|
});
|
|
1706
1627
|
});
|
|
1707
|
-
InputField.defaultProps = {
|
|
1708
|
-
fieldProps: {},
|
|
1709
|
-
inputProps: {}
|
|
1710
|
-
};
|
|
1711
|
-
InputField.propTypes = {
|
|
1712
|
-
isDisabled: PropTypes__default.default.bool,
|
|
1713
|
-
isPassword: PropTypes__default.default.bool,
|
|
1714
|
-
isRequired: PropTypes__default.default.bool,
|
|
1715
|
-
isRevealable: PropTypes__default.default.bool,
|
|
1716
|
-
classNameGroupItem: PropTypes__default.default.string,
|
|
1717
|
-
dataTestId: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.number]),
|
|
1718
|
-
fieldProps: PropTypes__default.default.object,
|
|
1719
|
-
iconBorder: PropTypes__default.default.string,
|
|
1720
|
-
iconBorderHover: PropTypes__default.default.string,
|
|
1721
|
-
iconFill: PropTypes__default.default.string,
|
|
1722
|
-
iconFillHover: PropTypes__default.default.string,
|
|
1723
|
-
iconRevealableHide: PropTypes__default.default.oneOfType([PropTypes__default.default.elementType, PropTypes__default.default.func, PropTypes__default.default.object]),
|
|
1724
|
-
iconRevealableShow: PropTypes__default.default.oneOfType([PropTypes__default.default.elementType, PropTypes__default.default.func, PropTypes__default.default.object]),
|
|
1725
|
-
// iconShape: PropTypes.oneOf(shapeProps),
|
|
1726
|
-
// iconSize: PropTypes.oneOf(iconSizeProps),
|
|
1727
|
-
initialValue: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.number]),
|
|
1728
|
-
inputProps: PropTypes__default.default.object,
|
|
1729
|
-
name: PropTypes__default.default.string.isRequired,
|
|
1730
|
-
parse: PropTypes__default.default.func,
|
|
1731
|
-
showMessage: PropTypes__default.default.bool,
|
|
1732
|
-
onChange: PropTypes__default.default.func
|
|
1733
|
-
};
|
|
1734
1628
|
|
|
1735
|
-
function
|
|
1629
|
+
function RadioGroupInput(props) {
|
|
1736
1630
|
const {
|
|
1737
1631
|
input,
|
|
1738
|
-
|
|
1739
|
-
onChange
|
|
1740
|
-
inputProps
|
|
1632
|
+
value,
|
|
1633
|
+
onChange
|
|
1741
1634
|
} = props;
|
|
1742
|
-
const onChangeField = React.useCallback(event =>
|
|
1743
|
-
|
|
1744
|
-
onChange(option.value);
|
|
1745
|
-
}
|
|
1746
|
-
}, [onChange]);
|
|
1747
|
-
return /*#__PURE__*/React__default.default.createElement(Radio.Radio, Object.assign({
|
|
1748
|
-
className: "form-radio__item",
|
|
1749
|
-
checked: option.value === input.value,
|
|
1635
|
+
const onChangeField = React$1.useCallback(event => onChange(event.target.value), [onChange]);
|
|
1636
|
+
return /*#__PURE__*/React.createElement(Input.Input, Object.assign({
|
|
1750
1637
|
name: input.name,
|
|
1751
|
-
|
|
1752
|
-
value:
|
|
1638
|
+
autoComplete: "nope",
|
|
1639
|
+
value: value,
|
|
1753
1640
|
onBlur: input.onBlur,
|
|
1754
1641
|
onChange: onChangeField,
|
|
1755
|
-
onFocus: input.onFocus
|
|
1756
|
-
|
|
1757
|
-
}, inputProps));
|
|
1642
|
+
onFocus: input.onFocus
|
|
1643
|
+
}, props));
|
|
1758
1644
|
}
|
|
1759
|
-
RadioGroupItem.propTypes = {
|
|
1760
|
-
inputProps: PropTypes__default.default.object,
|
|
1761
|
-
onChange: PropTypes__default.default.func,
|
|
1762
|
-
option: PropTypes__default.default.shape({
|
|
1763
|
-
label: PropTypes__default.default.string,
|
|
1764
|
-
value: PropTypes__default.default.string
|
|
1765
|
-
}),
|
|
1766
|
-
input: PropTypes__default.default.shape({
|
|
1767
|
-
name: PropTypes__default.default.string,
|
|
1768
|
-
value: PropTypes__default.default.string,
|
|
1769
|
-
onBlur: PropTypes__default.default.func,
|
|
1770
|
-
onFocus: PropTypes__default.default.func,
|
|
1771
|
-
onChange: PropTypes__default.default.func
|
|
1772
|
-
})
|
|
1773
|
-
};
|
|
1774
1645
|
|
|
1775
|
-
function
|
|
1646
|
+
function RadioGroupItem(props) {
|
|
1776
1647
|
const {
|
|
1777
1648
|
input,
|
|
1778
|
-
|
|
1649
|
+
inputProps,
|
|
1650
|
+
option,
|
|
1779
1651
|
onChange
|
|
1780
1652
|
} = props;
|
|
1781
|
-
const onChangeField = React.useCallback(event =>
|
|
1782
|
-
|
|
1783
|
-
|
|
1653
|
+
const onChangeField = React$1.useCallback(event => {
|
|
1654
|
+
if (event.target.checked) {
|
|
1655
|
+
onChange(option.value);
|
|
1656
|
+
}
|
|
1657
|
+
}, [onChange]);
|
|
1658
|
+
return /*#__PURE__*/React.createElement(Radio.Radio, Object.assign({
|
|
1659
|
+
className: "form-radio__item",
|
|
1660
|
+
type: "radio",
|
|
1784
1661
|
name: input.name,
|
|
1662
|
+
label: option.label,
|
|
1663
|
+
checked: option.value === input.value,
|
|
1664
|
+
value: option.value,
|
|
1785
1665
|
onBlur: input.onBlur,
|
|
1786
1666
|
onChange: onChangeField,
|
|
1787
|
-
onFocus: input.onFocus
|
|
1788
|
-
|
|
1789
|
-
}, props));
|
|
1667
|
+
onFocus: input.onFocus
|
|
1668
|
+
}, inputProps));
|
|
1790
1669
|
}
|
|
1791
|
-
RadioGroupInput.propTypes = {
|
|
1792
|
-
input: PropTypes__default.default.string,
|
|
1793
|
-
value: PropTypes__default.default.string,
|
|
1794
|
-
editableProps: PropTypes__default.default.object,
|
|
1795
|
-
onChange: PropTypes__default.default.func
|
|
1796
|
-
};
|
|
1797
1670
|
|
|
1798
1671
|
function RadioGroupList(props) {
|
|
1799
1672
|
const {
|
|
1673
|
+
editableProps,
|
|
1800
1674
|
input,
|
|
1675
|
+
inputProps,
|
|
1801
1676
|
options,
|
|
1802
|
-
|
|
1803
|
-
onChange,
|
|
1804
|
-
inputProps
|
|
1677
|
+
onChange
|
|
1805
1678
|
} = props;
|
|
1806
|
-
const [editableValue, setEditableValue] = React.useState(() => {
|
|
1679
|
+
const [editableValue, setEditableValue] = React$1.useState(() => {
|
|
1807
1680
|
const isRadioValue = options.find(option => option.value === input.value);
|
|
1808
1681
|
if (!isRadioValue) {
|
|
1809
1682
|
return input.value;
|
|
1810
1683
|
}
|
|
1811
1684
|
return '';
|
|
1812
1685
|
});
|
|
1813
|
-
React.useEffect(() => {
|
|
1686
|
+
React$1.useEffect(() => {
|
|
1814
1687
|
// When a new value from outside enters the form
|
|
1815
1688
|
if (input.value) {
|
|
1816
1689
|
// Check value for radio type
|
|
@@ -1824,7 +1697,7 @@ function RadioGroupList(props) {
|
|
|
1824
1697
|
}, [input.value]);
|
|
1825
1698
|
|
|
1826
1699
|
// Callback for value changes
|
|
1827
|
-
const onChangeSomeInput = React.useCallback(value => {
|
|
1700
|
+
const onChangeSomeInput = React$1.useCallback(value => {
|
|
1828
1701
|
// Save to form values
|
|
1829
1702
|
input.onChange(value);
|
|
1830
1703
|
if (onChange) {
|
|
@@ -1834,53 +1707,43 @@ function RadioGroupList(props) {
|
|
|
1834
1707
|
}, [input, onChange]);
|
|
1835
1708
|
|
|
1836
1709
|
// Handle for radio inputs
|
|
1837
|
-
const onChangeRadio = React.useCallback(value => {
|
|
1710
|
+
const onChangeRadio = React$1.useCallback(value => {
|
|
1838
1711
|
setEditableValue('');
|
|
1839
1712
|
onChangeSomeInput(value);
|
|
1840
1713
|
}, [onChangeSomeInput]);
|
|
1841
1714
|
|
|
1842
1715
|
// Handle for text input
|
|
1843
|
-
const onChangeEditable = React.useCallback(value => {
|
|
1716
|
+
const onChangeEditable = React$1.useCallback(value => {
|
|
1844
1717
|
setEditableValue(value);
|
|
1845
1718
|
onChangeSomeInput(value);
|
|
1846
1719
|
}, [onChangeSomeInput]);
|
|
1847
1720
|
return /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, options.map(option => option.editable ? /*#__PURE__*/React__default.default.createElement(RadioGroupInput, {
|
|
1848
1721
|
key: option.label,
|
|
1722
|
+
editableProps: editableProps,
|
|
1849
1723
|
input: input,
|
|
1850
|
-
|
|
1724
|
+
inputProps: inputProps,
|
|
1851
1725
|
option: option,
|
|
1852
|
-
|
|
1853
|
-
|
|
1854
|
-
inputProps: inputProps
|
|
1726
|
+
value: editableValue,
|
|
1727
|
+
onChange: onChangeEditable
|
|
1855
1728
|
}) : /*#__PURE__*/React__default.default.createElement(RadioGroupItem, {
|
|
1856
1729
|
key: option.value,
|
|
1857
1730
|
input: input,
|
|
1731
|
+
inputProps: inputProps,
|
|
1858
1732
|
option: option,
|
|
1859
|
-
onChange: onChangeRadio
|
|
1860
|
-
inputProps: inputProps
|
|
1733
|
+
onChange: onChangeRadio
|
|
1861
1734
|
})));
|
|
1862
1735
|
}
|
|
1863
|
-
RadioGroupList.propTypes = {
|
|
1864
|
-
editableProps: PropTypes__default.default.object,
|
|
1865
|
-
input: PropTypes__default.default.object,
|
|
1866
|
-
inputProps: PropTypes__default.default.object,
|
|
1867
|
-
options: PropTypes__default.default.arrayOf(PropTypes__default.default.shape({
|
|
1868
|
-
value: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.number, PropTypes__default.default.bool]),
|
|
1869
|
-
label: PropTypes__default.default.string
|
|
1870
|
-
})),
|
|
1871
|
-
onChange: PropTypes__default.default.func
|
|
1872
|
-
};
|
|
1873
1736
|
|
|
1874
1737
|
const RadioGroup = /*#__PURE__*/React__default.default.memo(function RadioGroup(props) {
|
|
1875
1738
|
const {
|
|
1876
|
-
|
|
1877
|
-
fieldProps,
|
|
1878
|
-
inputProps,
|
|
1739
|
+
name,
|
|
1879
1740
|
isDisabled,
|
|
1880
|
-
|
|
1881
|
-
|
|
1882
|
-
|
|
1741
|
+
editableProps = {},
|
|
1742
|
+
fieldProps = {},
|
|
1743
|
+
inputProps = {},
|
|
1744
|
+
options = [],
|
|
1883
1745
|
showMessage,
|
|
1746
|
+
isRequired,
|
|
1884
1747
|
onChange
|
|
1885
1748
|
} = props;
|
|
1886
1749
|
return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Field, {
|
|
@@ -1914,42 +1777,42 @@ const RadioGroup = /*#__PURE__*/React__default.default.memo(function RadioGroup(
|
|
|
1914
1777
|
className: "form__item_type_radio",
|
|
1915
1778
|
errorKey: errorKey,
|
|
1916
1779
|
errorMessage: errorMessage,
|
|
1780
|
+
isErrorState: isErrorState,
|
|
1781
|
+
metaError: meta.error,
|
|
1782
|
+
isDisabled: isDisabled,
|
|
1917
1783
|
fieldClassName: 'form-radio',
|
|
1918
1784
|
inputName: input.name,
|
|
1919
1785
|
inputValue: input.value || '',
|
|
1920
|
-
isDisabled: isDisabled,
|
|
1921
|
-
isErrorState: isErrorState,
|
|
1922
|
-
isRequired: isRequired,
|
|
1923
|
-
isValidState: isValidState,
|
|
1924
1786
|
metaActive: meta.active,
|
|
1925
|
-
|
|
1926
|
-
|
|
1787
|
+
showMessage: showMessage,
|
|
1788
|
+
isRequired: isRequired,
|
|
1789
|
+
isValidState: isValidState
|
|
1927
1790
|
}, fieldProps), /*#__PURE__*/React__default.default.createElement(RadioGroupList, {
|
|
1791
|
+
isDisabled: isDisabled,
|
|
1928
1792
|
editableProps: editableProps,
|
|
1929
1793
|
input: input,
|
|
1930
1794
|
inputProps: updatedInputProps,
|
|
1931
|
-
isDisabled: isDisabled,
|
|
1932
1795
|
options: options,
|
|
1933
1796
|
onChange: onChange
|
|
1934
1797
|
}));
|
|
1935
1798
|
});
|
|
1936
1799
|
});
|
|
1937
|
-
|
|
1938
|
-
|
|
1939
|
-
|
|
1940
|
-
|
|
1941
|
-
|
|
1942
|
-
|
|
1943
|
-
|
|
1944
|
-
|
|
1945
|
-
|
|
1946
|
-
|
|
1947
|
-
|
|
1948
|
-
|
|
1949
|
-
|
|
1950
|
-
|
|
1951
|
-
|
|
1952
|
-
|
|
1800
|
+
|
|
1801
|
+
const defaultSegmentedProps = {
|
|
1802
|
+
width: 'fill',
|
|
1803
|
+
// error
|
|
1804
|
+
errorLabelTextColor: 'errorTextPrimary',
|
|
1805
|
+
fill: 'surfaceSecondary',
|
|
1806
|
+
fillHover: 'surfacePrimaryHover',
|
|
1807
|
+
indicatorFill: 'accentPrimary',
|
|
1808
|
+
labelTextActiveColor: 'accentTextPrimary',
|
|
1809
|
+
labelTextColor: 'surfaceTextPrimary',
|
|
1810
|
+
labelTextSize: 'm',
|
|
1811
|
+
// appearance depending on the type of error
|
|
1812
|
+
// required
|
|
1813
|
+
requiredLabelTextColor: 'warningTextPrimary',
|
|
1814
|
+
shape: 'rounded',
|
|
1815
|
+
size: 'normal'
|
|
1953
1816
|
};
|
|
1954
1817
|
|
|
1955
1818
|
function SegmentedField(props) {
|
|
@@ -1965,7 +1828,7 @@ function SegmentedField(props) {
|
|
|
1965
1828
|
const {
|
|
1966
1829
|
change
|
|
1967
1830
|
} = reactFinalForm.useForm();
|
|
1968
|
-
const setActiveSegment = React.useCallback(option => {
|
|
1831
|
+
const setActiveSegment = React$1.useCallback(option => {
|
|
1969
1832
|
change(name, option.value);
|
|
1970
1833
|
}, [change]);
|
|
1971
1834
|
return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Field, {
|
|
@@ -1981,7 +1844,7 @@ function SegmentedField(props) {
|
|
|
1981
1844
|
* custom React Hook function.
|
|
1982
1845
|
*/
|
|
1983
1846
|
|
|
1984
|
-
const activeOption = React.useMemo(() => {
|
|
1847
|
+
const activeOption = React$1.useMemo(() => {
|
|
1985
1848
|
const emptyOption = {
|
|
1986
1849
|
value: null,
|
|
1987
1850
|
label: null
|
|
@@ -2028,18 +1891,73 @@ function SegmentedField(props) {
|
|
|
2028
1891
|
}, updatedInputProps)));
|
|
2029
1892
|
});
|
|
2030
1893
|
}
|
|
2031
|
-
|
|
2032
|
-
|
|
2033
|
-
|
|
2034
|
-
|
|
2035
|
-
|
|
2036
|
-
|
|
2037
|
-
|
|
2038
|
-
|
|
2039
|
-
|
|
2040
|
-
|
|
2041
|
-
|
|
2042
|
-
|
|
1894
|
+
|
|
1895
|
+
const defaultSelectProps = {
|
|
1896
|
+
elevation: 8,
|
|
1897
|
+
isClearable: true,
|
|
1898
|
+
isSearchable: true,
|
|
1899
|
+
badgeAppearance: 'accent',
|
|
1900
|
+
badgeSize: 'm',
|
|
1901
|
+
badgeTextSize: 'm',
|
|
1902
|
+
clearIcon: icons.icon24.Clear,
|
|
1903
|
+
clearIconFill: 'surfaceItemPrimary',
|
|
1904
|
+
closeMenuOnSelect: true,
|
|
1905
|
+
// optionSelected: <Icon iconFill="surfaceItemAccent" SvgImage={icon24.Check} />,
|
|
1906
|
+
|
|
1907
|
+
dividerDirection: 'horizontal',
|
|
1908
|
+
dividerFill: 'surfaceTertiary',
|
|
1909
|
+
dividerSize: 'xxs',
|
|
1910
|
+
dropdownIcon: icons.icon24.ChevronDownSmall,
|
|
1911
|
+
dropdownIconFill: 'surfaceItemPrimary',
|
|
1912
|
+
// error
|
|
1913
|
+
errorInputBorderColor: 'errorBorderPrimary',
|
|
1914
|
+
headingFill: 'surfaceSecondary',
|
|
1915
|
+
headingTextColor: 'surfaceTextPrimary',
|
|
1916
|
+
headingTextSize: 'm',
|
|
1917
|
+
headingTextWeight: '600',
|
|
1918
|
+
inputBorderColor: 'surfaceBorderTertiary',
|
|
1919
|
+
inputBorderColorHover: 'surfaceBorderQuaternary',
|
|
1920
|
+
inputCaretColor: 'secondaryItemPrimary',
|
|
1921
|
+
inputFill: 'surfacePrimary',
|
|
1922
|
+
inputShape: 'rounded',
|
|
1923
|
+
inputTextColor: 'surfaceTextPrimary',
|
|
1924
|
+
inputTextSize: 'm',
|
|
1925
|
+
loadingMessage: /*#__PURE__*/React__default.default.createElement(Loader.Loader, {
|
|
1926
|
+
width: "fill",
|
|
1927
|
+
height: "fill",
|
|
1928
|
+
fill: "surfacePrimary",
|
|
1929
|
+
position: "absolute",
|
|
1930
|
+
left: "0px",
|
|
1931
|
+
right: "0px",
|
|
1932
|
+
zIndex: "1",
|
|
1933
|
+
itemFill: "surfaceItemAccent",
|
|
1934
|
+
set: "simple"
|
|
1935
|
+
}),
|
|
1936
|
+
multipleItemFill: 'accentPrimary',
|
|
1937
|
+
multipleItemFillHover: 'accentPrimaryHover',
|
|
1938
|
+
multipleItemIcon: icons.icon14.Remove,
|
|
1939
|
+
multipleItemIconFill: 'accentItemPrimary',
|
|
1940
|
+
multipleItemTextColor: 'accentTextPrimary',
|
|
1941
|
+
multipleItemTextSize: 'm',
|
|
1942
|
+
noOptionsSearchText: 'Ничего не найдено...',
|
|
1943
|
+
noOptionsText: 'Список пуст',
|
|
1944
|
+
noOptionsTextColor: 'surfaceTextPrimary',
|
|
1945
|
+
noOptionsTextSize: 'm',
|
|
1946
|
+
optionBorder: 'none',
|
|
1947
|
+
optionFill: 'surfacePrimary',
|
|
1948
|
+
optionFillHover: 'surfacePrimaryHover',
|
|
1949
|
+
optionShape: 'rounded',
|
|
1950
|
+
optionTextColor: 'surfaceTextPrimary',
|
|
1951
|
+
optionTextSize: 'm',
|
|
1952
|
+
placeholder: 'Выбрать...',
|
|
1953
|
+
placeholderTextColor: 'surfaceTextQuaternary',
|
|
1954
|
+
placeholderTextSize: 'm',
|
|
1955
|
+
// appearance depending on the type of error
|
|
1956
|
+
// required
|
|
1957
|
+
requiredInputBorderColor: 'warningBorderPrimary',
|
|
1958
|
+
showBadge: false,
|
|
1959
|
+
showDivider: true,
|
|
1960
|
+
size: 'm'
|
|
2043
1961
|
};
|
|
2044
1962
|
|
|
2045
1963
|
function getDefaultValue(options, selectValue) {
|
|
@@ -2088,8 +2006,8 @@ const SelectField = /*#__PURE__*/React__default.default.memo(function SelectFiel
|
|
|
2088
2006
|
* React Hooks must be called in a React function component or a
|
|
2089
2007
|
* custom React Hook function.
|
|
2090
2008
|
*/
|
|
2091
|
-
const [selectedOptions, setSelectedOptions] = React.useState(null);
|
|
2092
|
-
const defaultValue = React.useMemo(() => {
|
|
2009
|
+
const [selectedOptions, setSelectedOptions] = React$1.useState(null);
|
|
2010
|
+
const defaultValue = React$1.useMemo(() => {
|
|
2093
2011
|
const optionsValues = getDefaultValue(options, input.value);
|
|
2094
2012
|
if (!optionsValues.length && input.value?.length) {
|
|
2095
2013
|
optionsValues.push({
|
|
@@ -2099,18 +2017,18 @@ const SelectField = /*#__PURE__*/React__default.default.memo(function SelectFiel
|
|
|
2099
2017
|
}
|
|
2100
2018
|
return optionsValues;
|
|
2101
2019
|
}, [input.value]);
|
|
2102
|
-
const onChangeField = React.useCallback(value => {
|
|
2020
|
+
const onChangeField = React$1.useCallback(value => {
|
|
2103
2021
|
input.onChange(value);
|
|
2104
2022
|
if (onChange) {
|
|
2105
2023
|
onChange(value, input.name);
|
|
2106
2024
|
}
|
|
2107
2025
|
}, [onChange, input.onChange]);
|
|
2108
|
-
const onChangeValue = React.useCallback((option, actionMeta) => {
|
|
2026
|
+
const onChangeValue = React$1.useCallback((option, actionMeta) => {
|
|
2109
2027
|
const value = Array.isArray(option) ? option.map(o => o.value) : option?.value || null;
|
|
2110
2028
|
setSelectedOptions(option);
|
|
2111
2029
|
onChangeField(value);
|
|
2112
2030
|
}, [onChangeField]);
|
|
2113
|
-
React.useEffect(() => {
|
|
2031
|
+
React$1.useEffect(() => {
|
|
2114
2032
|
setSelectedOptions(defaultValue);
|
|
2115
2033
|
}, [defaultValue]);
|
|
2116
2034
|
const {
|
|
@@ -2131,48 +2049,34 @@ const SelectField = /*#__PURE__*/React__default.default.memo(function SelectFiel
|
|
|
2131
2049
|
className: clsx__default.default('form-field_type_select', 'form__item_type_select', classNameGroupItem),
|
|
2132
2050
|
errorKey: errorKey,
|
|
2133
2051
|
errorMessage: errorMessage,
|
|
2052
|
+
isErrorState: isErrorState,
|
|
2053
|
+
metaError: meta.error,
|
|
2054
|
+
isDisabled: isDisabled,
|
|
2134
2055
|
fieldClassName: 'form-select',
|
|
2135
2056
|
inputName: input.name,
|
|
2136
2057
|
inputValue: input.value,
|
|
2137
2058
|
metaActive: meta.active,
|
|
2138
|
-
metaError: meta.error,
|
|
2139
2059
|
showMessage: showMessage,
|
|
2140
|
-
isDisabled: isDisabled,
|
|
2141
|
-
isErrorState: isErrorState,
|
|
2142
2060
|
isRequired: isRequired,
|
|
2143
2061
|
isValidState: isValidState
|
|
2144
2062
|
}, fieldProps), /*#__PURE__*/React__default.default.createElement(Select.Select, Object.assign({
|
|
2145
2063
|
className: "form-select-item",
|
|
2146
|
-
|
|
2064
|
+
isDisabled: isDisabled,
|
|
2147
2065
|
instanceId: `id_${input.name}`,
|
|
2148
2066
|
options: options,
|
|
2067
|
+
ref: selectRef,
|
|
2149
2068
|
value: selectedOptions,
|
|
2150
|
-
isDisabled: isDisabled,
|
|
2151
2069
|
onChange: onChangeValue,
|
|
2152
2070
|
onInputChange: onInputChange
|
|
2153
2071
|
}, updatedSelectProps)));
|
|
2154
2072
|
});
|
|
2155
2073
|
});
|
|
2156
|
-
SelectField.propTypes = {
|
|
2157
|
-
isDisabled: PropTypes__default.default.bool,
|
|
2158
|
-
isRequired: PropTypes__default.default.bool,
|
|
2159
|
-
classNameGroupItem: PropTypes__default.default.string,
|
|
2160
|
-
fieldProps: PropTypes__default.default.object,
|
|
2161
|
-
label: PropTypes__default.default.any,
|
|
2162
|
-
messageType: PropTypes__default.default.string,
|
|
2163
|
-
name: PropTypes__default.default.string.isRequired,
|
|
2164
|
-
options: PropTypes__default.default.array,
|
|
2165
|
-
selectProps: PropTypes__default.default.object,
|
|
2166
|
-
selectRef: PropTypes__default.default.any,
|
|
2167
|
-
showMessage: PropTypes__default.default.bool,
|
|
2168
|
-
onChange: PropTypes__default.default.func
|
|
2169
|
-
};
|
|
2170
2074
|
|
|
2171
2075
|
const SwitchField = /*#__PURE__*/React__default.default.memo(function SwitchField(props) {
|
|
2172
2076
|
const {
|
|
2173
2077
|
classNameGroupItem,
|
|
2174
|
-
fieldProps,
|
|
2175
|
-
inputProps,
|
|
2078
|
+
fieldProps = {},
|
|
2079
|
+
inputProps = {},
|
|
2176
2080
|
isDisabled,
|
|
2177
2081
|
isRequired,
|
|
2178
2082
|
name,
|
|
@@ -2193,7 +2097,7 @@ const SwitchField = /*#__PURE__*/React__default.default.memo(function SwitchFiel
|
|
|
2193
2097
|
* custom React Hook function.
|
|
2194
2098
|
*/
|
|
2195
2099
|
|
|
2196
|
-
const onChangeField = React.useCallback(event => {
|
|
2100
|
+
const onChangeField = React$1.useCallback(event => {
|
|
2197
2101
|
input.onChange(event);
|
|
2198
2102
|
if (onChange) {
|
|
2199
2103
|
onChange(event.target.checked, input.name);
|
|
@@ -2240,30 +2144,32 @@ const SwitchField = /*#__PURE__*/React__default.default.memo(function SwitchFiel
|
|
|
2240
2144
|
}, updatedInputProps)));
|
|
2241
2145
|
});
|
|
2242
2146
|
});
|
|
2243
|
-
|
|
2244
|
-
|
|
2245
|
-
|
|
2246
|
-
|
|
2247
|
-
|
|
2248
|
-
|
|
2249
|
-
|
|
2250
|
-
|
|
2251
|
-
|
|
2252
|
-
|
|
2253
|
-
|
|
2254
|
-
|
|
2255
|
-
|
|
2147
|
+
|
|
2148
|
+
const defaultTextareaProps = {
|
|
2149
|
+
width: 'fill',
|
|
2150
|
+
borderColor: 'surfaceBorderTertiary',
|
|
2151
|
+
borderHover: 'surfaceBorderQuaternary',
|
|
2152
|
+
caret: 'secondaryItemSecondary',
|
|
2153
|
+
// error
|
|
2154
|
+
errorBorderColor: 'errorBorderPrimary',
|
|
2155
|
+
placeholderTextColor: 'surfaceTextSecondary',
|
|
2156
|
+
// appearance depending on the type of error
|
|
2157
|
+
// required
|
|
2158
|
+
requiredBorderColor: 'warningBorderPrimary',
|
|
2159
|
+
shape: 'rounded',
|
|
2160
|
+
textColor: 'surfaceTextPrimary',
|
|
2161
|
+
textSize: 's'
|
|
2256
2162
|
};
|
|
2257
2163
|
|
|
2258
2164
|
const TextareaField = /*#__PURE__*/React__default.default.memo(function TextareaField(props) {
|
|
2259
2165
|
const {
|
|
2260
|
-
isRequired,
|
|
2261
|
-
isDisabled,
|
|
2262
2166
|
name,
|
|
2263
|
-
|
|
2264
|
-
inputProps,
|
|
2167
|
+
isDisabled,
|
|
2265
2168
|
classNameGroupItem,
|
|
2266
|
-
|
|
2169
|
+
fieldProps = {},
|
|
2170
|
+
inputProps = {},
|
|
2171
|
+
showMessage,
|
|
2172
|
+
isRequired
|
|
2267
2173
|
} = props;
|
|
2268
2174
|
return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Field, {
|
|
2269
2175
|
name: name
|
|
@@ -2279,37 +2185,37 @@ const TextareaField = /*#__PURE__*/React__default.default.memo(function Textarea
|
|
|
2279
2185
|
*/
|
|
2280
2186
|
|
|
2281
2187
|
const {
|
|
2282
|
-
isErrorState,
|
|
2283
|
-
isValidState,
|
|
2284
2188
|
errorKey,
|
|
2285
|
-
errorMessage
|
|
2189
|
+
errorMessage,
|
|
2190
|
+
isErrorState,
|
|
2191
|
+
isValidState
|
|
2286
2192
|
} = useFieldValidationState({
|
|
2287
2193
|
fieldProps: fieldProps,
|
|
2288
2194
|
input: input,
|
|
2289
2195
|
meta: meta
|
|
2290
2196
|
});
|
|
2291
2197
|
const updatedInputProps = useValidationAppearanceInputProps({
|
|
2292
|
-
|
|
2293
|
-
|
|
2198
|
+
inputProps: inputProps,
|
|
2199
|
+
validationStateKey: isErrorState ? errorKey : 'success'
|
|
2294
2200
|
});
|
|
2295
2201
|
return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
|
|
2296
2202
|
className: clsx__default.default('form-field_type_textarea', 'form__item_type_textarea', classNameGroupItem),
|
|
2297
2203
|
errorKey: errorKey,
|
|
2298
2204
|
errorMessage: errorMessage,
|
|
2205
|
+
isErrorState: isErrorState,
|
|
2206
|
+
metaError: meta.error,
|
|
2207
|
+
isDisabled: isDisabled,
|
|
2299
2208
|
fieldClassName: 'form-textarea',
|
|
2300
2209
|
inputName: input.name,
|
|
2301
2210
|
inputValue: input.value,
|
|
2302
|
-
isDisabled: isDisabled,
|
|
2303
|
-
isErrorState: isErrorState,
|
|
2304
|
-
isRequired: isRequired,
|
|
2305
|
-
isValidState: isValidState,
|
|
2306
2211
|
metaActive: meta.active,
|
|
2307
|
-
|
|
2308
|
-
|
|
2212
|
+
showMessage: showMessage,
|
|
2213
|
+
isRequired: isRequired,
|
|
2214
|
+
isValidState: isValidState
|
|
2309
2215
|
}, fieldProps), /*#__PURE__*/React__default.default.createElement(Textarea.Textarea, Object.assign({
|
|
2310
|
-
autoComplete: "nope",
|
|
2311
|
-
isDisabled: isDisabled,
|
|
2312
2216
|
name: input.name,
|
|
2217
|
+
isDisabled: isDisabled,
|
|
2218
|
+
autoComplete: "nope",
|
|
2313
2219
|
value: input.value,
|
|
2314
2220
|
onBlur: input.onBlur,
|
|
2315
2221
|
onChange: input.onChange,
|
|
@@ -2317,42 +2223,29 @@ const TextareaField = /*#__PURE__*/React__default.default.memo(function Textarea
|
|
|
2317
2223
|
}, updatedInputProps)));
|
|
2318
2224
|
});
|
|
2319
2225
|
});
|
|
2320
|
-
TextareaField.defaultProps = {
|
|
2321
|
-
inputProps: {},
|
|
2322
|
-
fieldProps: {}
|
|
2323
|
-
};
|
|
2324
|
-
TextareaField.propTypes = {
|
|
2325
|
-
name: PropTypes__default.default.string.isRequired,
|
|
2326
|
-
classNameGroupItem: PropTypes__default.default.string,
|
|
2327
|
-
fieldProps: PropTypes__default.default.object,
|
|
2328
|
-
inputProps: PropTypes__default.default.object,
|
|
2329
|
-
isDisabled: PropTypes__default.default.bool,
|
|
2330
|
-
isRequired: PropTypes__default.default.bool,
|
|
2331
|
-
showMessage: PropTypes__default.default.bool
|
|
2332
|
-
};
|
|
2333
2226
|
|
|
2334
2227
|
const MaskedInputField = /*#__PURE__*/React__default.default.memo(function MaskedInputField(props) {
|
|
2335
2228
|
const {
|
|
2336
|
-
isDisabled,
|
|
2337
|
-
isRequired,
|
|
2338
2229
|
name,
|
|
2339
2230
|
initialValue,
|
|
2340
|
-
|
|
2231
|
+
isDisabled,
|
|
2341
2232
|
classNameGroupItem,
|
|
2342
|
-
showMessage,
|
|
2343
|
-
inputProps,
|
|
2344
|
-
optionsMask,
|
|
2345
|
-
unmasked,
|
|
2346
2233
|
clearIcon,
|
|
2347
2234
|
clearIconFill,
|
|
2348
2235
|
clearIconFillHover,
|
|
2349
2236
|
clearIconShape,
|
|
2350
2237
|
clearIconSize,
|
|
2238
|
+
fieldProps = {},
|
|
2239
|
+
inputProps = {},
|
|
2240
|
+
optionsMask,
|
|
2241
|
+
showMessage,
|
|
2242
|
+
unmasked,
|
|
2243
|
+
isRequired,
|
|
2351
2244
|
onClickClearIcon
|
|
2352
2245
|
} = props;
|
|
2353
2246
|
return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Field, {
|
|
2354
|
-
|
|
2355
|
-
|
|
2247
|
+
name: name,
|
|
2248
|
+
initialValue: initialValue
|
|
2356
2249
|
}, function Render({
|
|
2357
2250
|
input,
|
|
2358
2251
|
meta
|
|
@@ -2366,8 +2259,8 @@ const MaskedInputField = /*#__PURE__*/React__default.default.memo(function Maske
|
|
|
2366
2259
|
|
|
2367
2260
|
const {
|
|
2368
2261
|
ref,
|
|
2369
|
-
value,
|
|
2370
2262
|
unmaskedValue,
|
|
2263
|
+
value,
|
|
2371
2264
|
setUnmaskedValue
|
|
2372
2265
|
} = reactImask.useIMask(optionsMask, {
|
|
2373
2266
|
onAccept: (newValue, event, element) => {
|
|
@@ -2376,39 +2269,39 @@ const MaskedInputField = /*#__PURE__*/React__default.default.memo(function Maske
|
|
|
2376
2269
|
}
|
|
2377
2270
|
}
|
|
2378
2271
|
});
|
|
2379
|
-
React.useEffect(() => {
|
|
2272
|
+
React$1.useEffect(() => {
|
|
2380
2273
|
if (input.value !== unmaskedValue) {
|
|
2381
2274
|
setUnmaskedValue(input.value.replace(unmasked, ''));
|
|
2382
2275
|
}
|
|
2383
2276
|
}, [input.value]);
|
|
2384
2277
|
const {
|
|
2385
|
-
isErrorState,
|
|
2386
|
-
isValidState,
|
|
2387
2278
|
errorKey,
|
|
2388
|
-
errorMessage
|
|
2279
|
+
errorMessage,
|
|
2280
|
+
isErrorState,
|
|
2281
|
+
isValidState
|
|
2389
2282
|
} = useFieldValidationState({
|
|
2390
2283
|
fieldProps: fieldProps,
|
|
2391
2284
|
input: input,
|
|
2392
2285
|
meta: meta
|
|
2393
2286
|
});
|
|
2394
2287
|
const updatedInputProps = useValidationAppearanceInputProps({
|
|
2395
|
-
|
|
2396
|
-
|
|
2288
|
+
inputProps: inputProps,
|
|
2289
|
+
validationStateKey: isErrorState ? errorKey : 'success'
|
|
2397
2290
|
});
|
|
2398
2291
|
return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
|
|
2399
2292
|
className: clsx__default.default('form-field_type_maskedInput', 'form__item_type_maskedInput', classNameGroupItem),
|
|
2400
2293
|
errorKey: errorKey,
|
|
2401
2294
|
errorMessage: errorMessage,
|
|
2295
|
+
isErrorState: isErrorState,
|
|
2296
|
+
metaError: meta.error,
|
|
2297
|
+
isDisabled: isDisabled,
|
|
2402
2298
|
fieldClassName: 'form-maskedInput',
|
|
2403
2299
|
inputName: input.name,
|
|
2404
2300
|
inputValue: input.value,
|
|
2405
|
-
isDisabled: isDisabled,
|
|
2406
|
-
isErrorState: isErrorState,
|
|
2407
|
-
isRequired: isRequired,
|
|
2408
|
-
isValidState: isValidState,
|
|
2409
2301
|
metaActive: meta.active,
|
|
2410
|
-
|
|
2411
|
-
|
|
2302
|
+
showMessage: showMessage,
|
|
2303
|
+
isRequired: isRequired,
|
|
2304
|
+
isValidState: isValidState
|
|
2412
2305
|
}, fieldProps), /*#__PURE__*/React__default.default.createElement(Input.Input, Object.assign({
|
|
2413
2306
|
className: clsx__default.default(meta.active && 'input_state_focus', meta.error && meta.touched && `input_state_${errorKey}`),
|
|
2414
2307
|
ref: ref,
|
|
@@ -2417,31 +2310,42 @@ const MaskedInputField = /*#__PURE__*/React__default.default.memo(function Maske
|
|
|
2417
2310
|
onFocus: input.onFocus
|
|
2418
2311
|
}, updatedInputProps)), clearIcon && /*#__PURE__*/React__default.default.createElement(Icon.Icon, {
|
|
2419
2312
|
className: "form-field__icon",
|
|
2313
|
+
size: clearIconSize,
|
|
2420
2314
|
iconFill: clearIconFill,
|
|
2421
2315
|
iconFillHover: clearIconFillHover,
|
|
2422
2316
|
imageSrc: clearIcon,
|
|
2423
2317
|
shape: clearIconShape,
|
|
2424
|
-
size: clearIconSize,
|
|
2425
2318
|
SvgImage: clearIcon,
|
|
2426
2319
|
onClick: onClickClearIcon
|
|
2427
2320
|
}));
|
|
2428
2321
|
});
|
|
2429
2322
|
});
|
|
2430
|
-
|
|
2431
|
-
|
|
2432
|
-
|
|
2433
|
-
|
|
2434
|
-
|
|
2435
|
-
|
|
2436
|
-
|
|
2437
|
-
|
|
2438
|
-
|
|
2439
|
-
|
|
2440
|
-
|
|
2441
|
-
|
|
2442
|
-
|
|
2443
|
-
|
|
2444
|
-
|
|
2323
|
+
|
|
2324
|
+
const defaultChipsProps = {
|
|
2325
|
+
width: 'fill',
|
|
2326
|
+
borderColor: 'surfaceBorderTertiary',
|
|
2327
|
+
activeIconItemFill: 'surfaceItemSecondary',
|
|
2328
|
+
appearance: 'surfacePrimary',
|
|
2329
|
+
// error
|
|
2330
|
+
errorBorderColor: 'errorBorderPrimary',
|
|
2331
|
+
fill: 'surfacePrimary',
|
|
2332
|
+
fillActive: 'accentPrimary',
|
|
2333
|
+
fillActiveDisabled: 'surfaceTertiary',
|
|
2334
|
+
fillActiveHover: 'errorPrimary',
|
|
2335
|
+
fillHover: 'surfacePrimaryHover',
|
|
2336
|
+
iconItemFill: 'surfaceItemPrimary',
|
|
2337
|
+
iconSize: 14,
|
|
2338
|
+
indicatorFill: 'accentPrimary',
|
|
2339
|
+
labelSize: 's',
|
|
2340
|
+
labelTextActiveColor: 'accentTextPrimary',
|
|
2341
|
+
labelTextActiveColorDisabled: 'surfaceTextDisabled',
|
|
2342
|
+
labelTextColor: 'surfaceTextPrimary',
|
|
2343
|
+
labelTextColorDisabled: 'surfaceTextDisabled',
|
|
2344
|
+
// appearance depending on the type of error
|
|
2345
|
+
// required
|
|
2346
|
+
requiredBorderColor: 'warningBorderPrimary',
|
|
2347
|
+
shape: 'rounded',
|
|
2348
|
+
size: 'm'
|
|
2445
2349
|
};
|
|
2446
2350
|
|
|
2447
2351
|
function ChipsField(props) {
|
|
@@ -2462,12 +2366,12 @@ function ChipsField(props) {
|
|
|
2462
2366
|
} = reactFinalForm.useForm();
|
|
2463
2367
|
|
|
2464
2368
|
// Callback for value changes
|
|
2465
|
-
const onChangeSomeInput = React.useCallback((inputValue, newOptionValue) => {
|
|
2369
|
+
const onChangeSomeInput = React$1.useCallback((inputValue, newOptionValue) => {
|
|
2466
2370
|
const updatedValues = inputValue.includes(newOptionValue) ? inputValue.filter(selectedValue => selectedValue !== newOptionValue) : [...inputValue, newOptionValue];
|
|
2467
2371
|
change(name, updatedValues);
|
|
2468
2372
|
onChange && onChange(updatedValues);
|
|
2469
2373
|
}, [change, name, onChange]);
|
|
2470
|
-
React.useEffect(() => {
|
|
2374
|
+
React$1.useEffect(() => {
|
|
2471
2375
|
initialValue && change(name, initialValue);
|
|
2472
2376
|
// update the form value only when the initialValue changes, so use disable eslint to ignore the warning
|
|
2473
2377
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
@@ -2493,7 +2397,7 @@ function ChipsField(props) {
|
|
|
2493
2397
|
inputProps: inputProps,
|
|
2494
2398
|
validationStateKey: isErrorState ? errorKey : 'success'
|
|
2495
2399
|
});
|
|
2496
|
-
const activeOptionsList = React.useMemo(() => {
|
|
2400
|
+
const activeOptionsList = React$1.useMemo(() => {
|
|
2497
2401
|
const emptyOptionsList = [{
|
|
2498
2402
|
label: null,
|
|
2499
2403
|
value: null
|
|
@@ -2529,22 +2433,6 @@ function ChipsField(props) {
|
|
|
2529
2433
|
}, updatedInputProps))));
|
|
2530
2434
|
});
|
|
2531
2435
|
}
|
|
2532
|
-
ChipsField.propTypes = {
|
|
2533
|
-
name: PropTypes__default.default.string,
|
|
2534
|
-
initialValue: PropTypes__default.default.array,
|
|
2535
|
-
classNameGroupItem: PropTypes__default.default.string,
|
|
2536
|
-
fieldProps: PropTypes__default.default.object,
|
|
2537
|
-
input: PropTypes__default.default.object,
|
|
2538
|
-
inputProps: PropTypes__default.default.object,
|
|
2539
|
-
options: PropTypes__default.default.arrayOf(PropTypes__default.default.shape({
|
|
2540
|
-
label: PropTypes__default.default.string,
|
|
2541
|
-
value: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.number, PropTypes__default.default.bool])
|
|
2542
|
-
})),
|
|
2543
|
-
showMessage: PropTypes__default.default.bool,
|
|
2544
|
-
isDisabled: PropTypes__default.default.bool,
|
|
2545
|
-
isRequired: PropTypes__default.default.bool,
|
|
2546
|
-
onChange: PropTypes__default.default.func
|
|
2547
|
-
};
|
|
2548
2436
|
|
|
2549
2437
|
const formTypes = {
|
|
2550
2438
|
code: 'code',
|
|
@@ -2780,48 +2668,19 @@ const sendFormDataToServer = async (url, data) => {
|
|
|
2780
2668
|
|
|
2781
2669
|
const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalForm(props, ref) {
|
|
2782
2670
|
const {
|
|
2783
|
-
isLoading,
|
|
2784
|
-
additionalProps,
|
|
2785
|
-
after,
|
|
2786
|
-
before,
|
|
2787
|
-
buttonDirection,
|
|
2788
|
-
buttonFill,
|
|
2789
|
-
buttonGap,
|
|
2790
|
-
buttonJustifyContent,
|
|
2791
|
-
buttonPadding,
|
|
2792
2671
|
className,
|
|
2672
|
+
type,
|
|
2673
|
+
initialValues,
|
|
2674
|
+
initialValuesEqual,
|
|
2793
2675
|
config,
|
|
2794
|
-
|
|
2795
|
-
|
|
2796
|
-
|
|
2797
|
-
|
|
2798
|
-
dataTestIdTertiaryButton,
|
|
2799
|
-
dataTour,
|
|
2800
|
-
dataTourButtons,
|
|
2801
|
-
dataTourPrimaryButton,
|
|
2802
|
-
dataTourSecondaryButton,
|
|
2803
|
-
dataTourTertiaryButton,
|
|
2676
|
+
title,
|
|
2677
|
+
titleTextColor,
|
|
2678
|
+
titleTextSize,
|
|
2679
|
+
titleTextWeight,
|
|
2804
2680
|
description,
|
|
2805
2681
|
descriptionSize,
|
|
2806
2682
|
descriptionTextColor,
|
|
2807
2683
|
descriptionTextWeight,
|
|
2808
|
-
disableFieldsAutoComplete,
|
|
2809
|
-
fieldsGap,
|
|
2810
|
-
formName,
|
|
2811
|
-
groupGap,
|
|
2812
|
-
initialValues,
|
|
2813
|
-
initialValuesEqual,
|
|
2814
|
-
language,
|
|
2815
|
-
loader,
|
|
2816
|
-
loaderFill,
|
|
2817
|
-
loaderItemFill,
|
|
2818
|
-
loaderShape,
|
|
2819
|
-
loaderSize,
|
|
2820
|
-
loaderText,
|
|
2821
|
-
loaderType,
|
|
2822
|
-
mutators,
|
|
2823
|
-
notificationCloseButton,
|
|
2824
|
-
notificationType,
|
|
2825
2684
|
primaryButton,
|
|
2826
2685
|
primaryButtonFill,
|
|
2827
2686
|
primaryButtonFillHover,
|
|
@@ -2830,7 +2689,6 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
|
|
|
2830
2689
|
primaryButtonLabelTextColor,
|
|
2831
2690
|
primaryButtonLabelTextWeight,
|
|
2832
2691
|
primaryButtonSize,
|
|
2833
|
-
renderFieldsWrapper = wrapperChildren => wrapperChildren,
|
|
2834
2692
|
secondaryButton,
|
|
2835
2693
|
secondaryButtonFill,
|
|
2836
2694
|
secondaryButtonFillHover,
|
|
@@ -2839,7 +2697,6 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
|
|
|
2839
2697
|
secondaryButtonLabelTextColor,
|
|
2840
2698
|
secondaryButtonLabelTextWeight,
|
|
2841
2699
|
secondaryButtonSize,
|
|
2842
|
-
set,
|
|
2843
2700
|
tertiaryButton,
|
|
2844
2701
|
tertiaryButtonFill,
|
|
2845
2702
|
tertiaryButtonFillHover,
|
|
@@ -2848,19 +2705,50 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
|
|
|
2848
2705
|
tertiaryButtonLabelTextColor,
|
|
2849
2706
|
tertiaryButtonLabelTextWeight,
|
|
2850
2707
|
tertiaryButtonSize,
|
|
2851
|
-
|
|
2852
|
-
|
|
2853
|
-
|
|
2854
|
-
|
|
2855
|
-
type,
|
|
2856
|
-
validationSchema,
|
|
2857
|
-
onChangeFormValues,
|
|
2708
|
+
dataTestIdPrimaryButton,
|
|
2709
|
+
dataTourPrimaryButton,
|
|
2710
|
+
dataTestIdSecondaryButton,
|
|
2711
|
+
dataTourSecondaryButton,
|
|
2858
2712
|
onClickSecondaryButton,
|
|
2713
|
+
dataTestIdTertiaryButton,
|
|
2714
|
+
dataTourTertiaryButton,
|
|
2859
2715
|
onClickTertiaryButton,
|
|
2716
|
+
additionalProps = {},
|
|
2717
|
+
buttonDirection = 'vertical',
|
|
2718
|
+
buttonFill,
|
|
2719
|
+
buttonGap,
|
|
2720
|
+
buttonJustifyContent,
|
|
2721
|
+
buttonPadding,
|
|
2722
|
+
dataTestId,
|
|
2723
|
+
dataTestIdButtons,
|
|
2724
|
+
dataTour,
|
|
2725
|
+
dataTourButtons,
|
|
2726
|
+
disableFieldsAutoComplete = false,
|
|
2727
|
+
fieldsGap,
|
|
2728
|
+
formName,
|
|
2729
|
+
groupGap,
|
|
2730
|
+
language,
|
|
2731
|
+
loader,
|
|
2732
|
+
loaderFill,
|
|
2733
|
+
loaderItemFill,
|
|
2734
|
+
loaderShape,
|
|
2735
|
+
loaderSize,
|
|
2736
|
+
loaderText,
|
|
2737
|
+
loaderType,
|
|
2738
|
+
mutators,
|
|
2739
|
+
notificationCloseButton,
|
|
2740
|
+
notificationType,
|
|
2741
|
+
renderFieldsWrapper = wrapperChildren => wrapperChildren,
|
|
2742
|
+
validationSchema,
|
|
2743
|
+
before,
|
|
2744
|
+
after,
|
|
2745
|
+
isLoading,
|
|
2746
|
+
set,
|
|
2747
|
+
onChangeFormValues,
|
|
2860
2748
|
onSubmit
|
|
2861
2749
|
} = props;
|
|
2862
2750
|
const validate = useYupValidationSchema(validationSchema, language);
|
|
2863
|
-
const onRefFormInstance = React.useCallback(formInstance => {
|
|
2751
|
+
const onRefFormInstance = React$1.useCallback(formInstance => {
|
|
2864
2752
|
if (ref) {
|
|
2865
2753
|
ref.current = formInstance;
|
|
2866
2754
|
}
|
|
@@ -2886,28 +2774,25 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
|
|
|
2886
2774
|
wrapper: wrapperStyles
|
|
2887
2775
|
} = useStyles.useStyles(props);
|
|
2888
2776
|
return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Form, {
|
|
2889
|
-
decorators: [focusOnErrorDecorator],
|
|
2890
2777
|
initialValues: initialValues,
|
|
2891
2778
|
initialValuesEqual: initialValuesEqual,
|
|
2892
|
-
mutators: mutators,
|
|
2893
|
-
validate: validate,
|
|
2894
2779
|
render: ({
|
|
2780
|
+
submitError,
|
|
2895
2781
|
form,
|
|
2896
2782
|
handleSubmit,
|
|
2897
|
-
modifiedSinceLastSubmit
|
|
2898
|
-
submitError
|
|
2783
|
+
modifiedSinceLastSubmit
|
|
2899
2784
|
}) => {
|
|
2900
2785
|
return /*#__PURE__*/React__default.default.createElement("form", {
|
|
2901
|
-
className: clsx__default.default(className, 'form', set && `form_set_${set}`, type && `form_type_${type}`, directionClass, fillClass, shapeClass, elevationClass)
|
|
2902
|
-
// We no need set reference to html element, we need reference to "final-form" instance
|
|
2903
|
-
,
|
|
2904
|
-
ref: () => onRefFormInstance(form),
|
|
2786
|
+
className: clsx__default.default(className, 'form', set && `form_set_${set}`, type && `form_type_${type}`, directionClass, fillClass, shapeClass, elevationClass),
|
|
2905
2787
|
name: formName,
|
|
2906
2788
|
autoCapitalize: disableFieldsAutoComplete ? 'off' : undefined,
|
|
2907
2789
|
autoComplete: disableFieldsAutoComplete ? 'off' : undefined,
|
|
2908
2790
|
autoCorrect: disableFieldsAutoComplete ? 'off' : undefined,
|
|
2909
2791
|
"data-test-id": dataTestId,
|
|
2910
|
-
"data-tour": dataTour
|
|
2792
|
+
"data-tour": dataTour
|
|
2793
|
+
// We no need set reference to html element, we need reference to "final-form" instance
|
|
2794
|
+
,
|
|
2795
|
+
ref: () => onRefFormInstance(form),
|
|
2911
2796
|
spellCheck: disableFieldsAutoComplete ? 'false' : undefined,
|
|
2912
2797
|
style: formStyles,
|
|
2913
2798
|
onSubmit: handleSubmit
|
|
@@ -2925,10 +2810,10 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
|
|
|
2925
2810
|
className: clsx__default.default('notification', 'form-notification', notificationType ? `form-notification_type_${notificationType}` : 'form-notification_type_global')
|
|
2926
2811
|
}, /*#__PURE__*/React__default.default.createElement(Notification.NotificationItem, {
|
|
2927
2812
|
className: "form-notification__item",
|
|
2928
|
-
closeButton: notificationCloseButton,
|
|
2929
|
-
status: "error",
|
|
2930
2813
|
title: form.getState().submitError,
|
|
2931
2814
|
titleTextSize: "h6",
|
|
2815
|
+
status: "error",
|
|
2816
|
+
closeButton: notificationCloseButton,
|
|
2932
2817
|
set: "form"
|
|
2933
2818
|
})), onChangeFormValues && /*#__PURE__*/React__default.default.createElement(reactFinalForm.FormSpy, {
|
|
2934
2819
|
subscription: {
|
|
@@ -2944,154 +2829,75 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
|
|
|
2944
2829
|
key
|
|
2945
2830
|
}, additionalProps[config[key].name])), isLoading && (loader || /*#__PURE__*/React__default.default.createElement(Loader.Loader, {
|
|
2946
2831
|
className: "form__loader",
|
|
2947
|
-
|
|
2948
|
-
itemFill: loaderItemFill,
|
|
2949
|
-
shape: loaderShape,
|
|
2832
|
+
type: loaderType,
|
|
2950
2833
|
size: loaderSize,
|
|
2834
|
+
fill: loaderFill,
|
|
2951
2835
|
text: loaderText,
|
|
2952
|
-
|
|
2836
|
+
itemFill: loaderItemFill,
|
|
2837
|
+
shape: loaderShape
|
|
2953
2838
|
}))))), (primaryButtonLabel || primaryButton || secondaryButtonLabel || secondaryButton || tertiaryButton || tertiaryButtonLabel) && /*#__PURE__*/React__default.default.createElement(Group$1.Group, {
|
|
2954
2839
|
className: "form__button",
|
|
2840
|
+
direction: buttonDirection,
|
|
2841
|
+
justifyContent: buttonJustifyContent,
|
|
2955
2842
|
fill: buttonFill,
|
|
2956
2843
|
padding: buttonPadding,
|
|
2957
|
-
dataTestId: dataTestIdButtons,
|
|
2958
|
-
dataTour: dataTourButtons,
|
|
2959
|
-
direction: buttonDirection,
|
|
2960
2844
|
gap: buttonGap,
|
|
2961
|
-
|
|
2845
|
+
dataTestId: dataTestIdButtons,
|
|
2846
|
+
dataTour: dataTourButtons
|
|
2962
2847
|
}, primaryButtonLabel ? /*#__PURE__*/React__default.default.createElement(Button.Button, {
|
|
2963
2848
|
className: "form__button-item",
|
|
2964
2849
|
width: "fill",
|
|
2965
|
-
|
|
2966
|
-
labelTextSize: primaryButtonLabelSize,
|
|
2850
|
+
size: primaryButtonSize,
|
|
2967
2851
|
fill: primaryButtonFill,
|
|
2968
2852
|
fillHover: primaryButtonFillHover,
|
|
2969
|
-
dataTestId: dataTestIdPrimaryButton,
|
|
2970
|
-
dataTour: dataTourPrimaryButton,
|
|
2971
2853
|
label: primaryButtonLabel,
|
|
2854
|
+
labelTextColor: primaryButtonLabelTextColor,
|
|
2855
|
+
labelTextSize: primaryButtonLabelSize,
|
|
2972
2856
|
labelTextWeight: primaryButtonLabelTextWeight,
|
|
2973
|
-
|
|
2857
|
+
dataTestId: dataTestIdPrimaryButton,
|
|
2858
|
+
dataTour: dataTourPrimaryButton
|
|
2974
2859
|
}) : primaryButton, secondaryButtonLabel ? /*#__PURE__*/React__default.default.createElement(Button.Button, {
|
|
2975
2860
|
className: "form__button-item",
|
|
2976
2861
|
width: "fill",
|
|
2977
|
-
|
|
2978
|
-
labelTextSize: secondaryButtonLabelSize,
|
|
2862
|
+
size: secondaryButtonSize,
|
|
2979
2863
|
fill: secondaryButtonFill,
|
|
2980
2864
|
fillHover: secondaryButtonFillHover,
|
|
2981
|
-
dataTestId: dataTestIdSecondaryButton,
|
|
2982
|
-
dataTour: dataTourSecondaryButton,
|
|
2983
2865
|
label: secondaryButtonLabel,
|
|
2866
|
+
labelTextColor: secondaryButtonLabelTextColor,
|
|
2867
|
+
labelTextSize: secondaryButtonLabelSize,
|
|
2984
2868
|
labelTextWeight: secondaryButtonLabelTextWeight,
|
|
2985
|
-
|
|
2869
|
+
dataTestId: dataTestIdSecondaryButton,
|
|
2870
|
+
dataTour: dataTourSecondaryButton,
|
|
2986
2871
|
onClick: onClickSecondaryButton
|
|
2987
2872
|
}) : secondaryButton, tertiaryButtonLabel ? /*#__PURE__*/React__default.default.createElement(Button.Button, {
|
|
2988
2873
|
className: "form__button-item",
|
|
2989
2874
|
width: "fill",
|
|
2990
|
-
|
|
2991
|
-
labelTextSize: tertiaryButtonLabelSize,
|
|
2875
|
+
size: tertiaryButtonSize,
|
|
2992
2876
|
fill: tertiaryButtonFill,
|
|
2993
2877
|
fillHover: tertiaryButtonFillHover,
|
|
2994
|
-
dataTestId: dataTestIdTertiaryButton,
|
|
2995
|
-
dataTour: dataTourTertiaryButton,
|
|
2996
2878
|
label: tertiaryButtonLabel,
|
|
2879
|
+
labelTextColor: tertiaryButtonLabelTextColor,
|
|
2880
|
+
labelTextSize: tertiaryButtonLabelSize,
|
|
2997
2881
|
labelTextWeight: tertiaryButtonLabelTextWeight,
|
|
2998
|
-
|
|
2882
|
+
dataTestId: dataTestIdTertiaryButton,
|
|
2883
|
+
dataTour: dataTourTertiaryButton,
|
|
2999
2884
|
onClick: onClickTertiaryButton
|
|
3000
2885
|
}) : tertiaryButton), after);
|
|
3001
2886
|
},
|
|
2887
|
+
decorators: [focusOnErrorDecorator],
|
|
2888
|
+
mutators: mutators,
|
|
3002
2889
|
subscription: {
|
|
2890
|
+
submitError: true,
|
|
3003
2891
|
modifiedSinceLastSubmit: true,
|
|
3004
2892
|
pristine: true,
|
|
3005
|
-
submitError: true,
|
|
3006
2893
|
submitting: true
|
|
3007
2894
|
},
|
|
2895
|
+
validate: validate,
|
|
3008
2896
|
onSubmit: onSubmit
|
|
3009
2897
|
});
|
|
3010
2898
|
});
|
|
3011
|
-
FinalForm.propTypes = {
|
|
3012
|
-
isLoading: PropTypes__default.default.bool,
|
|
3013
|
-
additionalProps: PropTypes__default.default.object,
|
|
3014
|
-
after: PropTypes__default.default.any,
|
|
3015
|
-
before: PropTypes__default.default.any,
|
|
3016
|
-
buttonDirection: PropTypes__default.default.string,
|
|
3017
|
-
buttonFill: PropTypes__default.default.string,
|
|
3018
|
-
buttonGap: PropTypes__default.default.string,
|
|
3019
|
-
buttonJustifyContent: PropTypes__default.default.string,
|
|
3020
|
-
buttonPadding: PropTypes__default.default.string,
|
|
3021
|
-
className: PropTypes__default.default.string,
|
|
3022
|
-
config: PropTypes__default.default.object,
|
|
3023
|
-
dataTour: PropTypes__default.default.string,
|
|
3024
|
-
dataTourButtons: PropTypes__default.default.string,
|
|
3025
|
-
dataTourPrimaryButton: PropTypes__default.default.string,
|
|
3026
|
-
dataTourSecondaryButton: PropTypes__default.default.string,
|
|
3027
|
-
dataTourTertiaryButton: PropTypes__default.default.string,
|
|
3028
|
-
description: PropTypes__default.default.string,
|
|
3029
|
-
descriptionSize: PropTypes__default.default.string,
|
|
3030
|
-
descriptionTextColor: PropTypes__default.default.string,
|
|
3031
|
-
descriptionTextWeight: PropTypes__default.default.string,
|
|
3032
|
-
disableFieldsAutoComplete: PropTypes__default.default.bool,
|
|
3033
|
-
fieldsGap: PropTypes__default.default.string,
|
|
3034
|
-
formName: PropTypes__default.default.string,
|
|
3035
|
-
groupGap: PropTypes__default.default.string,
|
|
3036
|
-
initialValues: PropTypes__default.default.any,
|
|
3037
|
-
initialValuesEqual: PropTypes__default.default.any,
|
|
3038
|
-
language: PropTypes__default.default.string,
|
|
3039
|
-
loader: PropTypes__default.default.element,
|
|
3040
|
-
loaderFill: PropTypes__default.default.string,
|
|
3041
|
-
loaderItemFill: PropTypes__default.default.string,
|
|
3042
|
-
loaderSet: PropTypes__default.default.string,
|
|
3043
|
-
loaderText: PropTypes__default.default.string,
|
|
3044
|
-
mutators: PropTypes__default.default.any,
|
|
3045
|
-
notificationCloseButton: PropTypes__default.default.element,
|
|
3046
|
-
notificationType: PropTypes__default.default.string,
|
|
3047
|
-
primaryButton: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.element]),
|
|
3048
|
-
primaryButtonFill: PropTypes__default.default.string,
|
|
3049
|
-
primaryButtonFillHover: PropTypes__default.default.string,
|
|
3050
|
-
primaryButtonLabel: PropTypes__default.default.string,
|
|
3051
|
-
primaryButtonLabelSize: PropTypes__default.default.string,
|
|
3052
|
-
primaryButtonLabelTextColor: PropTypes__default.default.string,
|
|
3053
|
-
primaryButtonLabelTextWeight: PropTypes__default.default.string,
|
|
3054
|
-
primaryButtonSize: PropTypes__default.default.string,
|
|
3055
|
-
secondaryButton: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.element]),
|
|
3056
|
-
secondaryButtonFill: PropTypes__default.default.string,
|
|
3057
|
-
secondaryButtonFillHover: PropTypes__default.default.string,
|
|
3058
|
-
secondaryButtonLabel: PropTypes__default.default.string,
|
|
3059
|
-
secondaryButtonLabelSize: PropTypes__default.default.string,
|
|
3060
|
-
secondaryButtonLabelTextColor: PropTypes__default.default.string,
|
|
3061
|
-
secondaryButtonLabelTextWeight: PropTypes__default.default.string,
|
|
3062
|
-
secondaryButtonSize: PropTypes__default.default.string,
|
|
3063
|
-
set: PropTypes__default.default.string,
|
|
3064
|
-
tertiaryButton: PropTypes__default.default.element,
|
|
3065
|
-
tertiaryButtonFill: PropTypes__default.default.string,
|
|
3066
|
-
tertiaryButtonFillHover: PropTypes__default.default.string,
|
|
3067
|
-
tertiaryButtonLabel: PropTypes__default.default.string,
|
|
3068
|
-
tertiaryButtonLabelSize: PropTypes__default.default.string,
|
|
3069
|
-
tertiaryButtonLabelTextColor: PropTypes__default.default.string,
|
|
3070
|
-
tertiaryButtonLabelTextWeight: PropTypes__default.default.string,
|
|
3071
|
-
tertiaryButtonSize: PropTypes__default.default.string,
|
|
3072
|
-
title: PropTypes__default.default.string,
|
|
3073
|
-
titleSize: PropTypes__default.default.string,
|
|
3074
|
-
titleTextColor: PropTypes__default.default.string,
|
|
3075
|
-
titleTextSize: PropTypes__default.default.string,
|
|
3076
|
-
titleTextWeight: PropTypes__default.default.string,
|
|
3077
|
-
type: PropTypes__default.default.string,
|
|
3078
|
-
validationSchema: PropTypes__default.default.object,
|
|
3079
|
-
onChangeFormValues: PropTypes__default.default.func,
|
|
3080
|
-
onClickSecondaryButton: PropTypes__default.default.func,
|
|
3081
|
-
onClickTertiaryButton: PropTypes__default.default.func,
|
|
3082
|
-
onSubmit: PropTypes__default.default.func
|
|
3083
|
-
};
|
|
3084
2899
|
FinalForm.defaultProps = {
|
|
3085
|
-
direction: 'vertical'
|
|
3086
|
-
isLoading: false,
|
|
3087
|
-
additionalProps: {},
|
|
3088
|
-
buttonDirection: 'vertical',
|
|
3089
|
-
disableFieldsAutoComplete: false,
|
|
3090
|
-
language: 'en',
|
|
3091
|
-
loaderFill: 'surfacePrimary',
|
|
3092
|
-
loaderItemFill: 'surfaceItemAccent',
|
|
3093
|
-
loaderSet: 'simple',
|
|
3094
|
-
titleSize: 'h1'
|
|
2900
|
+
direction: 'vertical'
|
|
3095
2901
|
};
|
|
3096
2902
|
|
|
3097
2903
|
const DEFAULT_MESSAGES_FIELDS = {
|
|
@@ -3316,7 +3122,7 @@ Object.defineProperty(exports, "useFormState", {
|
|
|
3316
3122
|
enumerable: true,
|
|
3317
3123
|
get: function () { return reactFinalForm.useFormState; }
|
|
3318
3124
|
});
|
|
3319
|
-
exports.
|
|
3125
|
+
exports.CheckboxField = CheckboxField;
|
|
3320
3126
|
exports.ChipsField = ChipsField;
|
|
3321
3127
|
exports.ChoiceField = ChoiceField;
|
|
3322
3128
|
exports.CodeField = CodeField;
|
|
@@ -3333,10 +3139,19 @@ exports.MaskedInputField = MaskedInputField;
|
|
|
3333
3139
|
exports.RadioGroup = RadioGroup;
|
|
3334
3140
|
exports.SegmentedField = SegmentedField;
|
|
3335
3141
|
exports.SelectField = SelectField;
|
|
3336
|
-
exports.
|
|
3337
|
-
exports.
|
|
3142
|
+
exports.SwitchField = SwitchField;
|
|
3143
|
+
exports.TextareaField = TextareaField;
|
|
3338
3144
|
exports.addRequiredFieldsParamToSchema = addRequiredFieldsParamToSchema;
|
|
3339
3145
|
exports.dateValidation = dateValidation;
|
|
3146
|
+
exports.defaultChipsProps = defaultChipsProps;
|
|
3147
|
+
exports.defaultChoiceProps = defaultChoiceProps;
|
|
3148
|
+
exports.defaultDatepickerProps = defaultDatepickerProps;
|
|
3149
|
+
exports.defaultDropzoneProps = defaultDropzoneProps;
|
|
3150
|
+
exports.defaultFieldProps = defaultFieldProps;
|
|
3151
|
+
exports.defaultInputProps = defaultInputProps;
|
|
3152
|
+
exports.defaultSegmentedProps = defaultSegmentedProps;
|
|
3153
|
+
exports.defaultSelectProps = defaultSelectProps;
|
|
3154
|
+
exports.defaultTextareaProps = defaultTextareaProps;
|
|
3340
3155
|
exports.emailValidation = emailValidation;
|
|
3341
3156
|
exports.focusOnError = focusOnError;
|
|
3342
3157
|
exports.focusOnErrorDecorator = focusOnErrorDecorator;
|