@itcase/forms 1.1.32 → 1.1.34

package/dist/itcase-forms.esm.js

@@ -218,8 +218,10 @@ function useValidationAppearanceInputProps(props) {
           updatedInputProps[propKey] = propValue;
         }
       });
+      return updatedInputProps;
+    } else {
+      return inputProps;
     }
-    return updatedInputProps;
   }, [validationStateKey, inputProps]);
   return validationAppearanceInputProps;
 }
@@ -373,8 +375,8 @@ function FieldWrapperBase(props) {
     sizeMobile: labelTextSizeMobile,
     sizeTablet: labelTextSizeTablet
   }, label, labelHidden && '\u00A0')), desc && /*#__PURE__*/React.createElement("div", {
-    className: "form-field__desc",
-    dataTestId: `${inputName}FieldDesc`
+    dataTestId: `${inputName}FieldDesc`,
+    className: "form-field__desc"
   }, /*#__PURE__*/React.createElement(Text, {
     size: descTextSize,
     textColor: descTextColor,
@@ -1093,6 +1095,7 @@ const FormFieldCheckbox = /*#__PURE__*/React.memo(function FormFieldCheckbox(pro
       errorKey,
       errorMessage,
       isErrorState,
+      successKey,
       isValidState
     } = useFieldValidationState({
       fieldProps: fieldProps,
@@ -1101,7 +1104,7 @@ const FormFieldCheckbox = /*#__PURE__*/React.memo(function FormFieldCheckbox(pro
     });
     const updatedInputProps = useValidationAppearanceInputProps({
       inputProps: inputProps,
-      validationStateKey: isErrorState ? errorKey : 'success'
+      validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
     });
     return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
       className: clsx('form-field-checkbox', 'form__item_checkbox', classNameGroupItem),
@@ -1140,6 +1143,8 @@ const defaultChipsProps = {
   errorAppearance: 'errorPrimary sizeM solid rounded',
   // Required
   requiredAppearance: 'requirePrimary sizeM solid rounded'
+  // Success
+  // successAppearance: 'successPrimary sizeM solid rounded',
 };
 
 function FormFieldChips(props) {
@@ -1184,6 +1189,7 @@ function FormFieldChips(props) {
       errorKey,
       errorMessage,
       isErrorState,
+      successKey,
       isValidState
     } = useFieldValidationState({
       fieldProps: fieldProps,
@@ -1192,7 +1198,7 @@ function FormFieldChips(props) {
     });
     const updatedInputProps = useValidationAppearanceInputProps({
       inputProps: inputProps,
-      validationStateKey: isErrorState ? errorKey : 'success'
+      validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
     });
     const activeOptionsList = useMemo(() => {
       const emptyOptionsList = [{
@@ -1253,11 +1259,11 @@ const FormFieldChoice = /*#__PURE__*/React.memo(function FormFieldChoice(props)
     name,
     initialValue,
     label,
+    messageType,
     isDisabled,
     classNameGroupItem,
     fieldProps,
     inputProps,
-    messageType,
     options,
     placeholder,
     showMessage,
@@ -1299,10 +1305,11 @@ const FormFieldChoice = /*#__PURE__*/React.memo(function FormFieldChoice(props)
       return emptyOption;
     }, [input.value]);
     const {
-      isErrorState,
-      isValidState,
       errorKey,
-      errorMessage
+      errorMessage,
+      isErrorState,
+      successKey,
+      isValidState
     } = useFieldValidationState({
       fieldProps: fieldProps,
       input: input,
@@ -1310,7 +1317,7 @@ const FormFieldChoice = /*#__PURE__*/React.memo(function FormFieldChoice(props)
     });
     const updatedInputProps = useValidationAppearanceInputProps({
       inputProps: inputProps,
-      validationStateKey: isErrorState ? errorKey : 'success'
+      validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
     });
     return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
       className: clsx('form-field_choice', 'form__item_choice', classNameGroupItem),
@@ -1336,9 +1343,9 @@ const FormFieldChoice = /*#__PURE__*/React.memo(function FormFieldChoice(props)
       inputValue: input.value || [],
       options: options,
       placeholder: placeholder,
+      setActiveSegment: setActiveSegment,
       isCheckbox: isCheckbox,
-      isRequired: isRequired,
-      setActiveSegment: setActiveSegment
+      isRequired: isRequired
     }, updatedInputProps)));
   });
 });
@@ -1356,6 +1363,8 @@ const FormFieldCode = /*#__PURE__*/React.memo(function FormFieldCode(props) {
   const {
     name,
     initialValue,
+    messageType,
+    label,
     isDisabled,
     classNameGroupItem,
     fieldProps = {},
@@ -1378,19 +1387,27 @@ const FormFieldCode = /*#__PURE__*/React.memo(function FormFieldCode(props) {
      */
 
     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.createElement(FieldWrapper, Object.assign({
       className: clsx('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,
@@ -1545,6 +1562,7 @@ function FormFieldDatePicker(props) {
       errorKey,
       errorMessage,
       isErrorState,
+      successKey,
       isValidState
     } = useFieldValidationState({
       fieldProps: fieldProps,
@@ -1553,7 +1571,7 @@ function FormFieldDatePicker(props) {
     });
     const updatedInputProps = useValidationAppearanceInputProps({
       inputProps: inputProps,
-      validationStateKey: isErrorState ? errorKey : 'success'
+      validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
     });
     return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
       className: clsx('form-field_datepicker', 'form__item_datepicker', classNameGroupItem),
@@ -1590,7 +1608,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.memo(function FormFieldInput(props) {
@@ -1640,6 +1660,7 @@ const FormFieldInput = /*#__PURE__*/React.memo(function FormFieldInput(props) {
       errorKey,
       errorMessage,
       isErrorState,
+      successKey,
       isValidState
     } = useFieldValidationState({
       fieldProps: fieldProps,
@@ -1648,7 +1669,7 @@ const FormFieldInput = /*#__PURE__*/React.memo(function FormFieldInput(props) {
     });
     const updatedInputProps = useValidationAppearanceInputProps({
       inputProps: inputProps,
-      validationStateKey: isErrorState ? errorKey : 'success'
+      validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
     });
     return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
       className: clsx('form-field_input', 'form__item_input', classNameGroupItem),
@@ -1745,6 +1766,7 @@ const FormFieldPassword = /*#__PURE__*/React.memo(function FormFieldPassword(pro
       errorKey,
       errorMessage,
       isErrorState,
+      successKey,
       isValidState
     } = useFieldValidationState({
       fieldProps: fieldProps,
@@ -1753,7 +1775,7 @@ const FormFieldPassword = /*#__PURE__*/React.memo(function FormFieldPassword(pro
     });
     const updatedInputProps = useValidationAppearanceInputProps({
       inputProps: inputProps,
-      validationStateKey: isErrorState ? errorKey : 'success'
+      validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
     });
     return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
       className: clsx('form-field_input', 'form__item_input', classNameGroupItem),
@@ -1844,6 +1866,7 @@ function FormFieldSegmented(props) {
       errorKey,
       errorMessage,
       isErrorState,
+      successKey,
       isValidState
     } = useFieldValidationState({
       fieldProps: fieldProps,
@@ -1852,7 +1875,7 @@ function FormFieldSegmented(props) {
     });
     const updatedInputProps = useValidationAppearanceInputProps({
       inputProps: inputProps,
-      validationStateKey: isErrorState ? errorKey : 'success'
+      validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
     });
     return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
       className: clsx('form-field_segmented', 'form__item_segmented'),
@@ -1958,10 +1981,11 @@ const FormFieldSelect = /*#__PURE__*/React.memo(function FormFieldSelect(props)
       setSelectedOptions(defaultValue);
     }, [defaultValue]);
     const {
-      isErrorState,
-      isValidState,
       errorKey,
-      errorMessage
+      errorMessage,
+      isErrorState,
+      successKey,
+      isValidState
     } = useFieldValidationState({
       fieldProps: fieldProps,
       input: input,
@@ -1969,7 +1993,7 @@ const FormFieldSelect = /*#__PURE__*/React.memo(function FormFieldSelect(props)
     });
     const updatedSelectProps = useValidationAppearanceInputProps({
       inputProps: selectProps,
-      validationStateKey: isErrorState ? errorKey : 'success'
+      validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
     });
     return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
       className: clsx('form-field_select', 'form__item_select', classNameGroupItem),
@@ -2042,6 +2066,7 @@ const FormFieldSwitch = /*#__PURE__*/React.memo(function FormFieldSwitch(props)
       errorKey,
       errorMessage,
       isErrorState,
+      successKey,
       isValidState
     } = useFieldValidationState({
       fieldProps: fieldProps,
@@ -2050,7 +2075,7 @@ const FormFieldSwitch = /*#__PURE__*/React.memo(function FormFieldSwitch(props)
     });
     const updatedInputProps = useValidationAppearanceInputProps({
       inputProps: inputProps,
-      validationStateKey: isErrorState ? errorKey : 'success'
+      validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
     });
     return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
       className: clsx('form-field-switch', 'form__item_switch', classNameGroupItem),
@@ -2116,6 +2141,7 @@ const FormFieldTextarea = /*#__PURE__*/React.memo(function FormFieldTextarea(pro
       errorKey,
       errorMessage,
       isErrorState,
+      successKey,
       isValidState
     } = useFieldValidationState({
       fieldProps: fieldProps,
@@ -2124,7 +2150,7 @@ const FormFieldTextarea = /*#__PURE__*/React.memo(function FormFieldTextarea(pro
     });
     const updatedInputProps = useValidationAppearanceInputProps({
       inputProps: inputProps,
-      validationStateKey: isErrorState ? errorKey : 'success'
+      validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
     });
     return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
       className: clsx('form-field_textarea', 'form__item_textarea', classNameGroupItem),
@@ -2208,6 +2234,7 @@ const FormFieldMaskedInput = /*#__PURE__*/React.memo(function FormFieldMaskedInp
       errorKey,
       errorMessage,
       isErrorState,
+      successKey,
       isValidState
     } = useFieldValidationState({
       fieldProps: fieldProps,
@@ -2216,10 +2243,10 @@ const FormFieldMaskedInput = /*#__PURE__*/React.memo(function FormFieldMaskedInp
     });
     const updatedInputProps = useValidationAppearanceInputProps({
       inputProps: inputProps,
-      validationStateKey: isErrorState ? errorKey : 'success'
+      validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
     });
     return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
-      className: clsx('form-field_maskedInput', 'form__item_maskedInput', classNameGroupItem),
+      className: clsx('form-field-masked-input', 'form__item_masked-input', classNameGroupItem),
       errorKey: errorKey,
       errorMessage: errorMessage,
       isErrorState: isErrorState,
@@ -2255,75 +2282,13 @@ const defaultRadioProps = {
   appearance: 'defaultPrimary sizeM solid circular'
 };
 
-function RadioGroupInput(props) {
-  const {
-    input,
-    value,
-    onChange
-  } = props;
-  const onChangeField = useCallback(event => onChange(event.target.value), [onChange]);
-  return /*#__PURE__*/React.createElement(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 = useCallback(event => {
-    if (event.target.checked) {
-      onChange(option.value);
-    }
-  }, [onChange]);
-  return /*#__PURE__*/React.createElement(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] = useState(() => {
-    const isRadioValue = options.find(option => option.value === input.value);
-    if (!isRadioValue) {
-      return input.value;
-    }
-    return '';
-  });
-  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 = useCallback(value => {
@@ -2336,31 +2301,23 @@ function RadioGroupList(props) {
   }, [input, onChange]);
 
   // Handle for radio inputs
-  const onChangeRadio = useCallback(value => {
-    setEditableValue('');
-    onChangeSomeInput(value);
-  }, [onChangeSomeInput]);
-
-  // Handle for text input
-  const onChangeEditable = useCallback(value => {
-    setEditableValue(value);
-    onChangeSomeInput(value);
-  }, [onChangeSomeInput]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, options.map(option => option.editable ? /*#__PURE__*/React.createElement(RadioGroupInput, {
-    key: option.label,
-    editableProps: editableProps,
-    input: input,
-    inputProps: inputProps,
-    option: option,
-    value: editableValue,
-    onChange: onChangeEditable
-  }) : /*#__PURE__*/React.createElement(RadioGroupItem, {
+  const onChangeRadio = useCallback(event => {
+    if (event.target.checked) {
+      onChangeSomeInput(event.target.value);
+    }
+  }, [onChange]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, options.map(option => /*#__PURE__*/React.createElement(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.memo(function RadioGroup(props) {
@@ -2429,6 +2386,7 @@ const RadioGroup = /*#__PURE__*/React.memo(function RadioGroup(props) {
 });
 
 const formTypes = {
+  password: 'password',
   code: 'code',
   text: 'text',
   textarea: 'textarea',
@@ -2448,6 +2406,12 @@ const formTypes = {
 };
 function generateField(field, config, props) {
   switch (field.type) {
+    case formTypes.password:
+      {
+        return /*#__PURE__*/React.createElement(FormFieldPassword, Object.assign({
+          key: config.key
+        }, field, props));
+      }
     case formTypes.checkbox:
       {
         return /*#__PURE__*/React.createElement(FormFieldCheckbox, Object.assign({
@@ -2460,15 +2424,15 @@ function generateField(field, config, props) {
           key: config.key
         }, field, props));
       }
-    case formTypes.chips:
+    case formTypes.code:
       {
-        return /*#__PURE__*/React.createElement(FormFieldChips, Object.assign({
+        return /*#__PURE__*/React.createElement(FormFieldCode, Object.assign({
           key: config.key
         }, field, props));
       }
-    case formTypes.code:
+    case formTypes.chips:
       {
-        return /*#__PURE__*/React.createElement(FormFieldCode, Object.assign({
+        return /*#__PURE__*/React.createElement(FormFieldChips, Object.assign({
           key: config.key
         }, field, props));
       }
@@ -2514,12 +2478,6 @@ function generateField(field, config, props) {
           key: config.key
         }, field, props));
       }
-    case formTypes.password:
-      {
-        return /*#__PURE__*/React.createElement(FormFieldPassword, Object.assign({
-          key: config.key
-        }, field, props));
-      }
     case formTypes.textarea:
       {
         return /*#__PURE__*/React.createElement(FormFieldTextarea, Object.assign({
@@ -2756,6 +2714,7 @@ const FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
     onChangeFormValues,
     onSubmit
   } = props;
+  console.log(buttonJustifyContent);
   const validate = useYupValidationSchema(validationSchema, language);
   const onRefFormInstance = useCallback(formInstance => {
     if (ref) {
@@ -2908,116 +2867,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 => {