@itcase/forms 1.0.76 → 1.0.78

package/dist/itcase-forms.cjs.js

@@ -36,6 +36,7 @@ var Button = require('@itcase/ui/components/Button');
 var Group$1 = require('@itcase/ui/components/Group');
 var Notification = require('@itcase/ui/components/Notification');
 var createDecorator = require('final-form-focus');
+var apisauce = require('apisauce');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -830,13 +831,22 @@ function DatePickerField(props) {
      * custom React Hook function.
      */
 
-    const onChangeField = React.useCallback((firstDate, secondDate) => {
-      input.onChange(firstDate);
+    const onChangeField = React.useCallback((startDate, endDate) => {
+      if (!datePickerProps.selectsRange) {
+        // When we need to save single date, value is date
+        // TODO: make object with one date? need to check all forms with DatePickerField
+        input.onChange(startDate);
+      } else {
+        // When we need to save range, value is object with two date
+        input.onChange({
+          startDate,
+          endDate
+        });
+      }
       if (onChange) {
-        // TODO: check all DatePickerField's pn all project to change variable places
-        onChange(firstDate, input.name, secondDate);
+        onChange(startDate, endDate);
       }
-    }, [onChange, input.onChange]);
+    }, [input.onChange, onChange]);
     const {
       isErrorState,
       isValidState,
@@ -870,7 +880,8 @@ function DatePickerField(props) {
       inputProps: updatedInputProps,
       isDisabled: isDisabled,
       name: input.name,
-      value: input.value || '',
+      value: datePickerProps.selectsRange ? input.value.startDate : input.value,
+      endValue: datePickerProps.selectsRange ? input.value.endDate : null,
       onBlur: input.onBlur,
       onChange: onChangeField,
       onFocus: input.onFocus
@@ -1675,8 +1686,8 @@ InputField.propTypes = {
   iconFillHover: PropTypes__default.default.string,
   iconRevealableHide: PropTypes__default.default.oneOfType([PropTypes__default.default.elementType, PropTypes__default.default.func, PropTypes__default.default.object]),
   iconRevealableShow: PropTypes__default.default.oneOfType([PropTypes__default.default.elementType, PropTypes__default.default.func, PropTypes__default.default.object]),
-  iconShape: PropTypes__default.default.string,
-  iconSize: PropTypes__default.default.string,
+  // iconShape: PropTypes.oneOf(shapeProps),
+  // iconSize: PropTypes.oneOf(iconSizeProps),
   initialValue: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.number]),
   inputProps: PropTypes__default.default.object,
   name: PropTypes__default.default.string.isRequired,
@@ -3139,6 +3150,67 @@ const DEFAULT_MESSAGES_FIELDS = {
   }
 };
 
+const parseNumericField = value => {
+  const numberValue = value.slice(0, 10).replace(/,/g, '.').replace(/[^\d.]/g, '');
+  const parsedValue = parseFloat(numberValue);
+  if (parsedValue || parsedValue === 0) {
+    if (numberValue.endsWith('.')) {
+      if ((numberValue.match(/\./g) || []).length > 1) {
+        return numberValue.slice(0, -1);
+      }
+      return numberValue;
+    }
+    return numberValue;
+  }
+  return '';
+};
+const getErrorsForFinalForm = errorData => {
+  /*
+   * errorData - its an "axios" error
+   */
+
+  const formErrors = {};
+  const responseErrorMessage = errorData.toJSON ? errorData.toJSON().message : errorData.message;
+
+  // const status = (errorData.response && errorData.response.status) || null
+  const problemError = apisauce.getProblemFromError(errorData);
+  // const problemStatus = getProblemFromStatus(status)
+
+  if (problemError === apisauce.NETWORK_ERROR || problemError === apisauce.CONNECTION_ERROR) {
+    // Say to "react-final-form" that we have general error
+    formErrors[finalForm.FORM_ERROR] = 'Проблемы с подключением к сервису';
+  } else if (errorData.response?.data) {
+    // Collect errors for some fields, which in the response from server
+    const serverErrors = errorData.response.data;
+    if (typeof serverErrors === 'string') {
+      if (errorData.response.status === 500) {
+        formErrors[finalForm.FORM_ERROR] = 'Во время обработки запроса произошла ошибка, попробуйте повторить запрос';
+      }
+      // formErrors[FORM_ERROR] = responseErrorMessage
+    } else {
+      if (errorData.response.status === 500) {
+        formErrors[finalForm.FORM_ERROR] = 'Во время обработки запроса произошла ошибка, попробуйте повторить запрос';
+      }
+      for (const key in serverErrors) {
+        // TODO: what is forms has "detail" field? show as form error is well?
+        const errorFieldKey = key === 'non_field_errors' || key === 'detail' ? finalForm.FORM_ERROR : key;
+        // Say to "react-final-form" that we have some fields errors
+        formErrors[errorFieldKey] = castArray__default.default(serverErrors[key])[0];
+      }
+    }
+  } else if (typeof errorData === 'object' && Object.keys(errorData).length) {
+    for (const key in errorData) {
+      const errorFieldKey = key === 'non_field_errors' || key === 'detail' ? finalForm.FORM_ERROR : key;
+      // Say to "react-final-form" that we have some fields errors
+      formErrors[errorFieldKey] = castArray__default.default(errorData[key])[0];
+    }
+  } else {
+    // Say to "react-final-form" that we have general error
+    formErrors[finalForm.FORM_ERROR] = responseErrorMessage || 'Произошла ошибка';
+  }
+  return formErrors;
+};
+
 Object.defineProperty(exports, "Field", {
   enumerable: true,
   get: function () { return reactFinalForm.Field; }
@@ -3176,6 +3248,8 @@ exports.focusOnError = focusOnError;
 exports.focusOnErrorDecorator = focusOnErrorDecorator;
 exports.formTypes = formTypes;
 exports.generateField = generateField;
+exports.getErrorsForFinalForm = getErrorsForFinalForm;
+exports.parseNumericField = parseNumericField;
 exports.phoneValidation = phoneValidation;
 exports.sendFormDataToServer = sendFormDataToServer;
 exports.setErrorsMutator = setErrorsMutator;

package/dist/itcase-forms.esm.js

@@ -35,6 +35,7 @@ import { Button } from '@itcase/ui/components/Button';
 import { Group as Group$1 } from '@itcase/ui/components/Group';
 import { NotificationItem } from '@itcase/ui/components/Notification';
 import createDecorator from 'final-form-focus';
+import { getProblemFromError, NETWORK_ERROR, CONNECTION_ERROR } from 'apisauce';
 
 const phoneValidation = (value, context) => {
   if (!value) {
@@ -818,13 +819,22 @@ function DatePickerField(props) {
      * custom React Hook function.
      */
 
-    const onChangeField = useCallback((firstDate, secondDate) => {
-      input.onChange(firstDate);
+    const onChangeField = useCallback((startDate, endDate) => {
+      if (!datePickerProps.selectsRange) {
+        // When we need to save single date, value is date
+        // TODO: make object with one date? need to check all forms with DatePickerField
+        input.onChange(startDate);
+      } else {
+        // When we need to save range, value is object with two date
+        input.onChange({
+          startDate,
+          endDate
+        });
+      }
       if (onChange) {
-        // TODO: check all DatePickerField's pn all project to change variable places
-        onChange(firstDate, input.name, secondDate);
+        onChange(startDate, endDate);
       }
-    }, [onChange, input.onChange]);
+    }, [input.onChange, onChange]);
     const {
       isErrorState,
       isValidState,
@@ -858,7 +868,8 @@ function DatePickerField(props) {
       inputProps: updatedInputProps,
       isDisabled: isDisabled,
       name: input.name,
-      value: input.value || '',
+      value: datePickerProps.selectsRange ? input.value.startDate : input.value,
+      endValue: datePickerProps.selectsRange ? input.value.endDate : null,
       onBlur: input.onBlur,
       onChange: onChangeField,
       onFocus: input.onFocus
@@ -1663,8 +1674,8 @@ InputField.propTypes = {
   iconFillHover: PropTypes.string,
   iconRevealableHide: PropTypes.oneOfType([PropTypes.elementType, PropTypes.func, PropTypes.object]),
   iconRevealableShow: PropTypes.oneOfType([PropTypes.elementType, PropTypes.func, PropTypes.object]),
-  iconShape: PropTypes.string,
-  iconSize: PropTypes.string,
+  // iconShape: PropTypes.oneOf(shapeProps),
+  // iconSize: PropTypes.oneOf(iconSizeProps),
   initialValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   inputProps: PropTypes.object,
   name: PropTypes.string.isRequired,
@@ -3127,4 +3138,65 @@ const DEFAULT_MESSAGES_FIELDS = {
   }
 };
 
-export { CheckboxField as Checkbox, ChipsField, ChoiceField, CodeField, CustomField, DEFAULT_MESSAGES_FIELDS, DatePickerField, FieldWrapper, FieldWrapperBase, FileInput, FinalForm, Group, InputField, MaskedInputField, RadioGroup, SegmentedField, SelectField, SwitchField as Switch, TextareaField as Textarea, addRequiredFieldsParamToSchema, emailValidation, focusOnError, focusOnErrorDecorator, formTypes, generateField, phoneValidation, sendFormDataToServer, setErrorsMutator, useYupValidationSchema };
+const parseNumericField = value => {
+  const numberValue = value.slice(0, 10).replace(/,/g, '.').replace(/[^\d.]/g, '');
+  const parsedValue = parseFloat(numberValue);
+  if (parsedValue || parsedValue === 0) {
+    if (numberValue.endsWith('.')) {
+      if ((numberValue.match(/\./g) || []).length > 1) {
+        return numberValue.slice(0, -1);
+      }
+      return numberValue;
+    }
+    return numberValue;
+  }
+  return '';
+};
+const getErrorsForFinalForm = errorData => {
+  /*
+   * errorData - its an "axios" error
+   */
+
+  const formErrors = {};
+  const responseErrorMessage = errorData.toJSON ? errorData.toJSON().message : errorData.message;
+
+  // const status = (errorData.response && errorData.response.status) || null
+  const problemError = getProblemFromError(errorData);
+  // const problemStatus = getProblemFromStatus(status)
+
+  if (problemError === NETWORK_ERROR || problemError === CONNECTION_ERROR) {
+    // Say to "react-final-form" that we have general error
+    formErrors[FORM_ERROR] = 'Проблемы с подключением к сервису';
+  } else if (errorData.response?.data) {
+    // Collect errors for some fields, which in the response from server
+    const serverErrors = errorData.response.data;
+    if (typeof serverErrors === 'string') {
+      if (errorData.response.status === 500) {
+        formErrors[FORM_ERROR] = 'Во время обработки запроса произошла ошибка, попробуйте повторить запрос';
+      }
+      // formErrors[FORM_ERROR] = responseErrorMessage
+    } else {
+      if (errorData.response.status === 500) {
+        formErrors[FORM_ERROR] = 'Во время обработки запроса произошла ошибка, попробуйте повторить запрос';
+      }
+      for (const key in serverErrors) {
+        // TODO: what is forms has "detail" field? show as form error is well?
+        const errorFieldKey = key === 'non_field_errors' || key === 'detail' ? FORM_ERROR : key;
+        // Say to "react-final-form" that we have some fields errors
+        formErrors[errorFieldKey] = castArray(serverErrors[key])[0];
+      }
+    }
+  } else if (typeof errorData === 'object' && Object.keys(errorData).length) {
+    for (const key in errorData) {
+      const errorFieldKey = key === 'non_field_errors' || key === 'detail' ? FORM_ERROR : key;
+      // Say to "react-final-form" that we have some fields errors
+      formErrors[errorFieldKey] = castArray(errorData[key])[0];
+    }
+  } else {
+    // Say to "react-final-form" that we have general error
+    formErrors[FORM_ERROR] = responseErrorMessage || 'Произошла ошибка';
+  }
+  return formErrors;
+};
+
+export { CheckboxField as Checkbox, ChipsField, ChoiceField, CodeField, CustomField, DEFAULT_MESSAGES_FIELDS, DatePickerField, FieldWrapper, FieldWrapperBase, FileInput, FinalForm, Group, InputField, MaskedInputField, RadioGroup, SegmentedField, SelectField, SwitchField as Switch, TextareaField as Textarea, addRequiredFieldsParamToSchema, emailValidation, focusOnError, focusOnErrorDecorator, formTypes, generateField, getErrorsForFinalForm, parseNumericField, phoneValidation, sendFormDataToServer, setErrorsMutator, useYupValidationSchema };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/forms",
-  "version": "1.0.76",
+  "version": "1.0.78",
   "description": "Forms fields, inputs, etc.",
   "keywords": [],
   "license": "MIT",
@@ -31,7 +31,7 @@
   },
   "dependencies": {
     "@itcase/common": "^1.2.17",
-    "@itcase/ui": "^1.3.14",
+    "@itcase/ui": "^1.3.15",
     "axios": "^1.7.9",
     "clsx": "^2.1.1",
     "final-form": "^4.20.10",