refactor validation: inject validation status

src/client/Elements/InputNumber.jsx

@@ -2,9 +2,16 @@ import { Form, InputNumber as AntInputNumber } from 'antd';
 import { Status } from 'core/types/statuses';
 import React from 'react';
 
-const InputNumber = ({ value, setCurrentValue, status, ...props }) => {
+const InputNumber = ({
+  value,
+  setCurrentValue,
+  status,
+  validateStatus,
+  message,
+  ...props
+}) => {
   return (
-    <Form.Item>
+    <Form.Item validateStatus={validateStatus} help={message}>
       <AntInputNumber
         {...props}
         disabled={status === Status.Disabled}

src/client/Elements/Radio.jsx

@@ -6,12 +6,14 @@ const Radio = ({
   value,
   setCurrentValue,
   status,
+  validateStatus,
+  message,
   options,
   style,
   ...props
 }) => {
   return (
-    <Form.Item>
+    <Form.Item validateStatus={validateStatus} help={message}>
       <AntRadio.Group
         {...props}
         disabled={status === Status.Disabled}

src/client/Elements/Select.jsx

@@ -2,9 +2,17 @@ import { Form, Select as AntSelect } from 'antd';
 import { Status } from 'core/types/statuses';
 import React from 'react';
 
-const Select = ({ value, setCurrentValue, status, options, ...props }) => {
+const Select = ({
+  value,
+  setCurrentValue,
+  status,
+  validateStatus,
+  message,
+  options,
+  ...props
+}) => {
   return (
-    <Form.Item>
+    <Form.Item validateStatus={validateStatus} help={message}>
       <AntSelect
         {...props}
         disabled={status === Status.Disabled || status === Status.Loading}

src/client/Elements/Switch.jsx

@@ -2,9 +2,16 @@ import { Form, Switch as AntSwitch } from 'antd';
 import { Status } from 'core/types/statuses';
 import React from 'react';
 
-const Switch = ({ value, setCurrentValue, status, ...props }) => {
+const Switch = ({
+  value,
+  setCurrentValue,
+  status,
+  validateStatus,
+  message,
+  ...props
+}) => {
   return (
-    <Form.Item>
+    <Form.Item validateStatus={validateStatus} help={message}>
       <AntSwitch
         {...props}
         disabled={status === Status.Disabled}

src/client/hocs/withStore.js

@@ -25,10 +25,7 @@ export const withStoreValue = Component => ({
     const { isValid, validateStatus, message } = useValidation({
       elementName: name,
       value: debouncedValue,
-      validation: validation || {
-        errorMessage: '',
-        validator: () => {},
-      },
+      validation,
     });
     const { options } = useOptions(name);
 

src/client/hooks/useValidation.ts

@@ -1,4 +1,5 @@
 import { ValidateStatus } from 'antd/lib/form/FormItem';
+import { INVALID_INPUT as INVALID_INPUT_MESSAGE } from 'core/constants/errorMessages';
 import { ElementsNames } from 'core/types/elements';
 import { useEffect, useState } from 'react';
 import { useStores } from './useStores';
@@ -12,30 +13,46 @@ interface IUseValidationArgs {
 export const useValidation = ({
   elementName,
   value,
-  validation: { validator, errorMessage },
+  validation,
 }: IUseValidationArgs) => {
-  const [isValid, setIsValid] = useState(false);
+  const { validator, errorMessage } = validation || {
+    validator: undefined,
+    errorMessage: undefined,
+  };
+  const [isValid, setValidation] = useState<boolean | undefined>(undefined);
   const { calculationStore } = useStores();
 
+  // inject value from store
+  const validationStatus = calculationStore.validations[elementName];
   useEffect(() => {
-    const validationResult = validator(value);
-    setIsValid(validationResult);
-    calculationStore.setValidation(elementName, validationResult);
-  }, [value, validator, calculationStore, elementName]);
+    setValidation(validationStatus);
+  }, [validationStatus]);
+
+  // inner validation && set validation status to store
+  useEffect(() => {
+    if (!validator) {
+      return;
+    }
+    if (!value) {
+      setValidation(undefined);
+      calculationStore.setValidation(elementName, undefined);
+    } else {
+      const validationResult = validator(value);
+      setValidation(validationResult);
+      calculationStore.setValidation(elementName, validationResult);
+    }
+  }, [value, validator, elementName]);
 
   const getValidateStatus = (): ValidateStatus | undefined => {
-    if (!value) {
+    if (isValid === undefined) {
       return undefined;
     }
     return isValid === false ? 'error' : 'success';
   };
 
   const getMessage = (): string | undefined => {
-    if (!value) {
-      return undefined;
-    }
     if (isValid === false) {
-      return errorMessage;
+      return errorMessage || INVALID_INPUT_MESSAGE;
     }
   };
 

src/core/constants/errorMessages.js

@@ -0,0 +1 @@
+export const INVALID_INPUT = 'Некорректные данные';

src/core/types/stores.ts

@@ -34,7 +34,10 @@ export interface ICalculationStore {
 
   validations: TElements<boolean>;
   getValidation: (elementName: ElementsNames) => boolean;
-  setValidation: (elementName: ElementsNames, validation: boolean) => void;
+  setValidation: (
+    elementName: ElementsNames,
+    validation: boolean | undefined,
+  ) => void;
 
   tables: IStoreTable;
   setTableRow: (