@itcase/forms 1.1.32 → 1.1.34

package/dist/itcase-forms.cjs.js

@@ -229,8 +229,10 @@ function useValidationAppearanceInputProps(props) {
           updatedInputProps[propKey] = propValue;
         }
       });
+      return updatedInputProps;
+    } else {
+      return inputProps;
     }
-    return updatedInputProps;
   }, [validationStateKey, inputProps]);
   return validationAppearanceInputProps;
 }
@@ -384,8 +386,8 @@ function FieldWrapperBase(props) {
     sizeMobile: labelTextSizeMobile,
     sizeTablet: labelTextSizeTablet
   }, label, labelHidden && '\u00A0')), desc && /*#__PURE__*/React__default.default.createElement("div", {
-    className: "form-field__desc",
-    dataTestId: `${inputName}FieldDesc`
+    dataTestId: `${inputName}FieldDesc`,
+    className: "form-field__desc"
   }, /*#__PURE__*/React__default.default.createElement(Text.Text, {
     size: descTextSize,
     textColor: descTextColor,
@@ -1104,6 +1106,7 @@ const FormFieldCheckbox = /*#__PURE__*/React__default.default.memo(function Form
       errorKey,
       errorMessage,
       isErrorState,
+      successKey,
       isValidState
     } = useFieldValidationState({
       fieldProps: fieldProps,
@@ -1112,7 +1115,7 @@ const FormFieldCheckbox = /*#__PURE__*/React__default.default.memo(function Form
     });
     const updatedInputProps = useValidationAppearanceInputProps({
       inputProps: inputProps,
-      validationStateKey: isErrorState ? errorKey : 'success'
+      validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
     });
     return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
       className: clsx__default.default('form-field-checkbox', 'form__item_checkbox', classNameGroupItem),
@@ -1151,6 +1154,8 @@ const defaultChipsProps = {
   errorAppearance: 'errorPrimary sizeM solid rounded',
   // Required
   requiredAppearance: 'requirePrimary sizeM solid rounded'
+  // Success
+  // successAppearance: 'successPrimary sizeM solid rounded',
 };
 
 function FormFieldChips(props) {
@@ -1195,6 +1200,7 @@ function FormFieldChips(props) {
       errorKey,
       errorMessage,
       isErrorState,
+      successKey,
       isValidState
     } = useFieldValidationState({
       fieldProps: fieldProps,
@@ -1203,7 +1209,7 @@ function FormFieldChips(props) {
     });
     const updatedInputProps = useValidationAppearanceInputProps({
       inputProps: inputProps,
-      validationStateKey: isErrorState ? errorKey : 'success'
+      validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
     });
     const activeOptionsList = React.useMemo(() => {
       const emptyOptionsList = [{
@@ -1264,11 +1270,11 @@ const FormFieldChoice = /*#__PURE__*/React__default.default.memo(function FormFi
     name,
     initialValue,
     label,
+    messageType,
     isDisabled,
     classNameGroupItem,
     fieldProps,
     inputProps,
-    messageType,
     options,
     placeholder,
     showMessage,
@@ -1310,10 +1316,11 @@ const FormFieldChoice = /*#__PURE__*/React__default.default.memo(function FormFi
       return emptyOption;
     }, [input.value]);
     const {
-      isErrorState,
-      isValidState,
       errorKey,
-      errorMessage
+      errorMessage,
+      isErrorState,
+      successKey,
+      isValidState
     } = useFieldValidationState({
       fieldProps: fieldProps,
       input: input,
@@ -1321,7 +1328,7 @@ const FormFieldChoice = /*#__PURE__*/React__default.default.memo(function FormFi
     });
     const updatedInputProps = useValidationAppearanceInputProps({
       inputProps: inputProps,
-      validationStateKey: isErrorState ? errorKey : 'success'
+      validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
     });
     return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
       className: clsx__default.default('form-field_choice', 'form__item_choice', classNameGroupItem),
@@ -1347,9 +1354,9 @@ const FormFieldChoice = /*#__PURE__*/React__default.default.memo(function FormFi
       inputValue: input.value || [],
       options: options,
       placeholder: placeholder,
+      setActiveSegment: setActiveSegment,
       isCheckbox: isCheckbox,
-      isRequired: isRequired,
-      setActiveSegment: setActiveSegment
+      isRequired: isRequired
     }, updatedInputProps)));
   });
 });
@@ -1367,6 +1374,8 @@ const FormFieldCode = /*#__PURE__*/React__default.default.memo(function FormFiel
   const {
     name,
     initialValue,
+    messageType,
+    label,
     isDisabled,
     classNameGroupItem,
     fieldProps = {},
@@ -1389,19 +1398,27 @@ const FormFieldCode = /*#__PURE__*/React__default.default.memo(function FormFiel
      */
 
     const {
+      errorKey,
+      errorMessage,
       isErrorState,
-      isValidState,
-      errorKey} = useFieldValidationState({
+      successKey,
+      isValidState
+    } = useFieldValidationState({
       fieldProps: fieldProps,
       input: input,
       meta: meta
     });
     const updatedInputProps = useValidationAppearanceInputProps({
       inputProps: inputProps,
-      validationStateKey: isErrorState ? errorKey : 'success'
+      validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
     });
     return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
       className: clsx__default.default('form-field-code', 'form__item_code', classNameGroupItem),
+      label: label,
+      messageType: messageType,
+      errorKey: errorKey,
+      errorMessage: errorMessage,
+      isErrorState: isErrorState,
       fieldClassName: 'form-code',
       inputName: input.name,
       inputValue: input.value,
@@ -1556,6 +1573,7 @@ function FormFieldDatePicker(props) {
       errorKey,
       errorMessage,
       isErrorState,
+      successKey,
       isValidState
     } = useFieldValidationState({
       fieldProps: fieldProps,
@@ -1564,7 +1582,7 @@ function FormFieldDatePicker(props) {
     });
     const updatedInputProps = useValidationAppearanceInputProps({
       inputProps: inputProps,
-      validationStateKey: isErrorState ? errorKey : 'success'
+      validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
     });
     return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
       className: clsx__default.default('form-field_datepicker', 'form__item_datepicker', classNameGroupItem),
@@ -1601,7 +1619,9 @@ const defaultInputProps = {
   // Error
   errorAppearance: 'errorPrimary sizeM solid rounded',
   // Required
-  requiredAppearance: 'requirePrimary sizeM solid rounded'
+  requiredAppearance: 'requirePrimary sizeM solid rounded',
+  // Success
+  successAppearance: 'successPrimary sizeM solid rounded'
 };
 
 const FormFieldInput = /*#__PURE__*/React__default.default.memo(function FormFieldInput(props) {
@@ -1651,6 +1671,7 @@ const FormFieldInput = /*#__PURE__*/React__default.default.memo(function FormFie
       errorKey,
       errorMessage,
       isErrorState,
+      successKey,
       isValidState
     } = useFieldValidationState({
       fieldProps: fieldProps,
@@ -1659,7 +1680,7 @@ const FormFieldInput = /*#__PURE__*/React__default.default.memo(function FormFie
     });
     const updatedInputProps = useValidationAppearanceInputProps({
       inputProps: inputProps,
-      validationStateKey: isErrorState ? errorKey : 'success'
+      validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
     });
     return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
       className: clsx__default.default('form-field_input', 'form__item_input', classNameGroupItem),
@@ -1756,6 +1777,7 @@ const FormFieldPassword = /*#__PURE__*/React__default.default.memo(function Form
       errorKey,
       errorMessage,
       isErrorState,
+      successKey,
       isValidState
     } = useFieldValidationState({
       fieldProps: fieldProps,
@@ -1764,7 +1786,7 @@ const FormFieldPassword = /*#__PURE__*/React__default.default.memo(function Form
     });
     const updatedInputProps = useValidationAppearanceInputProps({
       inputProps: inputProps,
-      validationStateKey: isErrorState ? errorKey : 'success'
+      validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
     });
     return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
       className: clsx__default.default('form-field_input', 'form__item_input', classNameGroupItem),
@@ -1855,6 +1877,7 @@ function FormFieldSegmented(props) {
       errorKey,
       errorMessage,
       isErrorState,
+      successKey,
       isValidState
     } = useFieldValidationState({
       fieldProps: fieldProps,
@@ -1863,7 +1886,7 @@ function FormFieldSegmented(props) {
     });
     const updatedInputProps = useValidationAppearanceInputProps({
       inputProps: inputProps,
-      validationStateKey: isErrorState ? errorKey : 'success'
+      validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
     });
     return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
       className: clsx__default.default('form-field_segmented', 'form__item_segmented'),
@@ -1969,10 +1992,11 @@ const FormFieldSelect = /*#__PURE__*/React__default.default.memo(function FormFi
       setSelectedOptions(defaultValue);
     }, [defaultValue]);
     const {
-      isErrorState,
-      isValidState,
       errorKey,
-      errorMessage
+      errorMessage,
+      isErrorState,
+      successKey,
+      isValidState
     } = useFieldValidationState({
       fieldProps: fieldProps,
       input: input,
@@ -1980,7 +2004,7 @@ const FormFieldSelect = /*#__PURE__*/React__default.default.memo(function FormFi
     });
     const updatedSelectProps = useValidationAppearanceInputProps({
       inputProps: selectProps,
-      validationStateKey: isErrorState ? errorKey : 'success'
+      validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
     });
     return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
       className: clsx__default.default('form-field_select', 'form__item_select', classNameGroupItem),
@@ -2053,6 +2077,7 @@ const FormFieldSwitch = /*#__PURE__*/React__default.default.memo(function FormFi
       errorKey,
       errorMessage,
       isErrorState,
+      successKey,
       isValidState
     } = useFieldValidationState({
       fieldProps: fieldProps,
@@ -2061,7 +2086,7 @@ const FormFieldSwitch = /*#__PURE__*/React__default.default.memo(function FormFi
     });
     const updatedInputProps = useValidationAppearanceInputProps({
       inputProps: inputProps,
-      validationStateKey: isErrorState ? errorKey : 'success'
+      validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
     });
     return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
       className: clsx__default.default('form-field-switch', 'form__item_switch', classNameGroupItem),
@@ -2127,6 +2152,7 @@ const FormFieldTextarea = /*#__PURE__*/React__default.default.memo(function Form
       errorKey,
       errorMessage,
       isErrorState,
+      successKey,
       isValidState
     } = useFieldValidationState({
       fieldProps: fieldProps,
@@ -2135,7 +2161,7 @@ const FormFieldTextarea = /*#__PURE__*/React__default.default.memo(function Form
     });
     const updatedInputProps = useValidationAppearanceInputProps({
       inputProps: inputProps,
-      validationStateKey: isErrorState ? errorKey : 'success'
+      validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
     });
     return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
       className: clsx__default.default('form-field_textarea', 'form__item_textarea', classNameGroupItem),
@@ -2219,6 +2245,7 @@ const FormFieldMaskedInput = /*#__PURE__*/React__default.default.memo(function F
       errorKey,
       errorMessage,
       isErrorState,
+      successKey,
       isValidState
     } = useFieldValidationState({
       fieldProps: fieldProps,
@@ -2227,10 +2254,10 @@ const FormFieldMaskedInput = /*#__PURE__*/React__default.default.memo(function F
     });
     const updatedInputProps = useValidationAppearanceInputProps({
       inputProps: inputProps,
-      validationStateKey: isErrorState ? errorKey : 'success'
+      validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
     });
     return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
-      className: clsx__default.default('form-field_maskedInput', 'form__item_maskedInput', classNameGroupItem),
+      className: clsx__default.default('form-field-masked-input', 'form__item_masked-input', classNameGroupItem),
       errorKey: errorKey,
       errorMessage: errorMessage,
       isErrorState: isErrorState,
@@ -2266,75 +2293,13 @@ const defaultRadioProps = {
   appearance: 'defaultPrimary sizeM solid circular'
 };
 
-function RadioGroupInput(props) {
-  const {
-    input,
-    value,
-    onChange
-  } = props;
-  const onChangeField = React.useCallback(event => onChange(event.target.value), [onChange]);
-  return /*#__PURE__*/React__default.default.createElement(Input.Input, Object.assign({
-    name: input.name,
-    autoComplete: "nope",
-    value: value,
-    onBlur: input.onBlur,
-    onChange: onChangeField,
-    onFocus: input.onFocus
-  }, props));
-}
-
-function RadioGroupItem(props) {
-  const {
-    input,
-    inputProps,
-    option,
-    onChange
-  } = props;
-  const onChangeField = React.useCallback(event => {
-    if (event.target.checked) {
-      onChange(option.value);
-    }
-  }, [onChange]);
-  return /*#__PURE__*/React__default.default.createElement(Radio.Radio, Object.assign({
-    className: "form-radio__item",
-    type: "radio",
-    name: input.name,
-    label: option.label,
-    checked: option.value === input.value,
-    value: option.value,
-    onBlur: input.onBlur,
-    onChange: onChangeField,
-    onFocus: input.onFocus
-  }, inputProps));
-}
-
 function RadioGroupList(props) {
   const {
-    editableProps,
     input,
     inputProps,
     options,
     onChange
   } = props;
-  const [editableValue, setEditableValue] = React.useState(() => {
-    const isRadioValue = options.find(option => option.value === input.value);
-    if (!isRadioValue) {
-      return input.value;
-    }
-    return '';
-  });
-  React.useEffect(() => {
-    // When a new value from outside enters the form
-    if (input.value) {
-      // Check value for radio type
-      const isRadioValue = options.find(option => option.value === input.value && !option.editable);
-      // If new value not in radio list - set to editable input
-      setEditableValue(isRadioValue ? '' : input.value);
-    } else {
-      // If new value is empty - clear editable input
-      setEditableValue('');
-    }
-  }, [input.value]);
 
   // Callback for value changes
   const onChangeSomeInput = React.useCallback(value => {
@@ -2347,31 +2312,23 @@ function RadioGroupList(props) {
   }, [input, onChange]);
 
   // Handle for radio inputs
-  const onChangeRadio = React.useCallback(value => {
-    setEditableValue('');
-    onChangeSomeInput(value);
-  }, [onChangeSomeInput]);
-
-  // Handle for text input
-  const onChangeEditable = React.useCallback(value => {
-    setEditableValue(value);
-    onChangeSomeInput(value);
-  }, [onChangeSomeInput]);
-  return /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, options.map(option => option.editable ? /*#__PURE__*/React__default.default.createElement(RadioGroupInput, {
-    key: option.label,
-    editableProps: editableProps,
-    input: input,
-    inputProps: inputProps,
-    option: option,
-    value: editableValue,
-    onChange: onChangeEditable
-  }) : /*#__PURE__*/React__default.default.createElement(RadioGroupItem, {
+  const onChangeRadio = React.useCallback(event => {
+    if (event.target.checked) {
+      onChangeSomeInput(event.target.value);
+    }
+  }, [onChange]);
+  return /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, options.map(option => /*#__PURE__*/React__default.default.createElement(Radio.Radio, Object.assign({
+    className: "form-radio__item",
     key: option.value,
-    input: input,
-    inputProps: inputProps,
-    option: option,
-    onChange: onChangeRadio
-  })));
+    type: "radio",
+    name: input.name,
+    label: option.label,
+    checked: option.value === input.value,
+    value: option.value,
+    onBlur: input.onBlur,
+    onChange: onChangeRadio,
+    onFocus: input.onFocus
+  }, inputProps))));
 }
 
 const RadioGroup = /*#__PURE__*/React__default.default.memo(function RadioGroup(props) {
@@ -2440,6 +2397,7 @@ const RadioGroup = /*#__PURE__*/React__default.default.memo(function RadioGroup(
 });
 
 const formTypes = {
+  password: 'password',
   code: 'code',
   text: 'text',
   textarea: 'textarea',
@@ -2459,6 +2417,12 @@ const formTypes = {
 };
 function generateField(field, config, props) {
   switch (field.type) {
+    case formTypes.password:
+      {
+        return /*#__PURE__*/React__default.default.createElement(FormFieldPassword, Object.assign({
+          key: config.key
+        }, field, props));
+      }
     case formTypes.checkbox:
       {
         return /*#__PURE__*/React__default.default.createElement(FormFieldCheckbox, Object.assign({
@@ -2471,15 +2435,15 @@ function generateField(field, config, props) {
           key: config.key
         }, field, props));
       }
-    case formTypes.chips:
+    case formTypes.code:
       {
-        return /*#__PURE__*/React__default.default.createElement(FormFieldChips, Object.assign({
+        return /*#__PURE__*/React__default.default.createElement(FormFieldCode, Object.assign({
           key: config.key
         }, field, props));
       }
-    case formTypes.code:
+    case formTypes.chips:
       {
-        return /*#__PURE__*/React__default.default.createElement(FormFieldCode, Object.assign({
+        return /*#__PURE__*/React__default.default.createElement(FormFieldChips, Object.assign({
           key: config.key
         }, field, props));
       }
@@ -2525,12 +2489,6 @@ function generateField(field, config, props) {
           key: config.key
         }, field, props));
       }
-    case formTypes.password:
-      {
-        return /*#__PURE__*/React__default.default.createElement(FormFieldPassword, Object.assign({
-          key: config.key
-        }, field, props));
-      }
     case formTypes.textarea:
       {
         return /*#__PURE__*/React__default.default.createElement(FormFieldTextarea, Object.assign({
@@ -2767,6 +2725,7 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
     onChangeFormValues,
     onSubmit
   } = props;
+  console.log(buttonJustifyContent);
   const validate = useYupValidationSchema(validationSchema, language);
   const onRefFormInstance = React.useCallback(formInstance => {
     if (ref) {
@@ -2919,116 +2878,152 @@ FinalForm.defaultProps = {
   direction: 'vertical'
 };
 
-const DEFAULT_MESSAGES_FIELDS = {
-  /*
-   !!! it also works without props simply based on the class and key as before `input_state_${meta.error.key}`
-   the KEY is needed for example for border color
-   the name of the key is anything you want, the main thing is that there is a props with the same KEY and color in FieldProps
+const DEFAULT_MESSAGES_REQUIRED = {
+  required: {
+    key: 'required',
+    message: 'Обязательное поле'
+  }
+};
+const DEFAULT_MESSAGES_ERROR = {
+  invalid_value: {
+    key: 'error',
+    message: 'Некорректное значение'
+  }
+};
+const DEFAULT_MESSAGES_URL = {
+  url: {
+    key: 'error',
+    message: 'Введите корректный URL-адрес'
+  }
+};
+const DEFAULT_MESSAGES_PASSWORD = {
+  password_required: {
+    key: 'required',
+    message: 'Введите пароль'
+  }
+};
+const DEFAULT_MESSAGES_NUMBER = {
+  matches: {
+    key: 'error',
+    message: 'Допускается ввод только цифр от 0 до 9'
+  },
+  numeric_value: {
+    key: 'error',
+    message: 'Только числовое значение'
+  }
+};
+const DEFAULT_MESSAGES_MIN_MAX = {
+  min: {
+    key: 'error',
+    message: ({
+      min
+    }) => `Значение должно быть не менее ${min} символов`
+  },
+  max: {
+    key: 'error',
+    message: ({
+      max
+    }) => `Значение должно быть не менее ${max} символов`
+  }
+};
+const DEFAULT_MESSAGES_PHONE = {
+  phone_error: {
+    key: 'error',
+    message: 'Введите корректный номер телефона'
+  },
+  phone_or_email_required: {
+    key: 'required',
+    message: 'Введите телефон или адрес эл. почты'
+  },
+  phone_required: {
+    key: 'required',
+    message: 'Укажите номер телефона'
+  }
+};
+const DEFAULT_MESSAGES_EMAIL = {
+  email_error: {
+    key: 'error',
+    message: 'Введите корректный адрес электронной почты'
+  },
+  email_required: {
+    key: 'required',
+    message: 'Укажите адрес электронной почты'
+  }
+};
+
+/*
+
+  !!! It also works without props simply based on the class and key as before `input_state_${meta.error.key}`
+
+  The KEY is needed for example for border color
+
+  The name of the key is anything you want, the main thing is that there is a props with the same KEY and color in FieldProps
   ...example
-         required - KEY for yellow color
+
+        required - KEY for yellow color
         error - KEY for red color
         custom or blue - KEY blue or other color
-          requiredBorderColor: 'warningBorderPrimary',
+
+        requiredBorderColor: 'warningBorderPrimary',
         errorBorderColor: 'errorBorderPrimary',
         customBorderColor: 'customBorderPrimary',
         blueBorderColor: 'blueBorderPrimary',
-         const defaultFieldProps = {
-           messageTextSize: 's',
+
+        const defaultFieldProps = {
+
+          messageTextSize: 's',
           messageTextColor: 'surfaceTextSecondary',
-           requiredMessageTextSize: 's',
+
+          requiredMessageTextSize: 's',
           requiredMessageTextColor: 'warningTextPrimary',
-           errorMessageTextSize: 's',
+
+          errorMessageTextSize: 's',
           errorMessageTextColor: 'errorTextPrimary',
         }
-           // INPUT
+
+         // INPUT
         const defaultInputProps = {
         ... other
-         stateBorderColor: 'surfaceBorderTertiary',
+
+        stateBorderColor: 'surfaceBorderTertiary',
         requiredStateBorderColor: 'warningBorderPrimary',
         errorStateBorderColor: 'errorBorderPrimary',
         }
-         // RADIO
+
+        // RADIO
         const defaultRadioProps = {
         ... other
-         stateBorderColor: 'surfaceBorderTertiary',
+
+        stateBorderColor: 'surfaceBorderTertiary',
         requiredStateBorderColor: 'warningBorderPrimary',
         errorStateBorderColor: 'errorBorderPrimary',
         }
-         // SELECT
+
+        // SELECT
         const defaultSelectProps = {
         ... other
-         borderColor: 'surfaceBorderTertiary',
+
+        borderColor: 'surfaceBorderTertiary',
         requiredBorderColor: 'warningBorderPrimary',
         errorBorderColor: 'errorBorderPrimary',
-         inputBorderColor: 'surfaceBorderTertiary',
+
+        inputBorderColor: 'surfaceBorderTertiary',
         requiredInputBorderColor: 'warningBorderPrimary',
         errorInputBorderColor: 'errorBorderPrimary',
         }
-         ... etc
-  */
 
-  // DEFAULT
-  // required - KEY for yellow color
-  // error - KEY for red color
+        ... etc
+  */
 
-  min: {
-    key: 'error',
-    message: ({
-      min
-    }) => `Значение должно быть не менее ${min} символов`
-  },
-  max: {
-    key: 'error',
-    message: ({
-      max
-    }) => `Значение должно быть не менее ${max} символов`
-  },
-  url: {
-    key: 'error',
-    message: 'Введите корректный URL-адрес'
-  },
-  email_error: {
-    key: 'error',
-    message: 'Введите корректный адрес электронной почты'
-  },
-  phone_error: {
-    key: 'error',
-    message: 'Введите корректный номер телефона'
-  },
-  email_required: {
-    key: 'required',
-    message: 'Укажите адрес электронной почты'
-  },
-  invalid_value: {
-    key: 'error',
-    message: 'Некорректное значение'
-  },
-  // key: 'error'
-  matches: {
-    key: 'error',
-    message: 'Допускается ввод только цифр от 0 до 9'
-  },
-  numeric_value: {
-    key: 'error',
-    message: 'Только числовое значение'
-  },
-  password_required: {
-    key: 'required',
-    message: 'Введите пароль'
-  },
-  phone_or_email_required: {
-    key: 'required',
-    message: 'Введите телефон или адрес эл. почты'
-  },
-  phone_required: {
-    key: 'required',
-    message: 'Укажите номер телефона'
-  },
-  // key: 'required'
-  required: {
-    key: 'required',
-    message: 'Обязательное поле'
-  }
+const DEFAULT_MESSAGES_FIELDS = {
+  ...DEFAULT_MESSAGES_EMAIL,
+  ...DEFAULT_MESSAGES_ERROR,
+  ...DEFAULT_MESSAGES_MIN_MAX,
+  ...DEFAULT_MESSAGES_NUMBER,
+  ...DEFAULT_MESSAGES_PASSWORD,
+  ...DEFAULT_MESSAGES_PHONE,
+  ...DEFAULT_MESSAGES_REQUIRED,
+  ...DEFAULT_MESSAGES_URL
 };
 
 const parseNumericField = value => {