Inserted responsiviness to prop rule change

src/lib/components/inputs/basic/Input.stories.tsx

@@ -1,5 +1,5 @@
 import { Story } from '@storybook/react'
-import React, { FormEvent, FormEventHandler, SyntheticEvent } from 'react'
+import React, { FormEvent, FormEventHandler, SyntheticEvent, useState } from 'react'
 import { Input } from './Input'
 import { InputProps } from './shared'
 
@@ -184,3 +184,39 @@ AutoComplete.args = {
   placeholder: 'Type your search',
   autoComplete: 'email'
 }
+
+export const Conditional: Story<InputProps> = (args: InputProps) => {
+  const [isChecked, setIsChecked] = useState(false)
+  return (
+    <>
+      <input
+        type="checkbox"
+        onChange={(e) => setIsChecked(e.target.checked)}
+        defaultChecked={isChecked}
+      />
+      <Input
+        {...args}
+        criteria={[
+          {
+            invalidMessage: 'Display name is already taken',
+            invalidResponseType: 'error',
+            validMessage: 'Display name is available',
+            validResponseType: 'success',
+            condition: {
+              type: 'condition',
+              rule: isChecked
+            },
+            nonBlocking: false
+          }
+        ]}
+      />
+    </>
+  )
+}
+Conditional.args = {
+  type: 'text',
+  id: 'none',
+  label: 'text',
+  placeholder: 'Type your search',
+  autoComplete: 'email'
+}

src/lib/components/inputs/basic/Input.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import React from 'react'
 import { isEmpty } from '../../../helpers/general'
 import { InputProps } from './shared'
 import { Checkbox } from '../Checkbox'
@@ -31,6 +31,7 @@ const InputVariant: React.FC<InputProps> = (props) => {
 }
 
 export const Input = (props: InputProps) => {
+  verifyRequiredProps(props)
   const theme = useTheme()
 
   const styles = {
@@ -81,13 +82,7 @@ export const Input = (props: InputProps) => {
     }
   }
 
-  verifyRequiredProps(props)
-
-  const [inputProps, setInputProps] = useState<InputProps>({ ...props, inputStyles: styles })
-
-  useEffect(() => {
-    setInputProps({ ...props, inputStyles: styles })
-  }, [props])
+  const inputProps: InputProps = { ...props, inputStyles: styles }
 
   return (
     <FormGroup>

src/lib/components/inputs/basic/shared/types.ts

@@ -72,7 +72,7 @@ export const criteriaRule = (
     case 'regex':
       return (rule as RegExp).test(value as string)
     case 'condition':
-      return value as boolean
+      return rule as boolean
     case 'function':
       return (rule as ValidationFunction)?.(value)
     default:

src/lib/components/inputs/basic/text/Text.tsx

@@ -21,8 +21,7 @@ export const Text = (props: InputProps) => {
   }, [validationResponse])
 
   useEffect(() => {
-    console.log({ log: 'roso', props })
-    setValidationResponse(props.value)
+    setValidationResponse(props.value, props.criteria)
   }, [props])
 
   return (

src/lib/hooks/useInputValidation.ts

@@ -98,63 +98,70 @@ const getCriteriaSet = (props: InputProps) => {
 
 export const useInputValidation = (props: InputProps) => {
   const [response, setResponse] = useState(undefined)
-  const criteriaSet = getCriteriaSet(props)
+  let criteriaSet = getCriteriaSet(props)
 
-  const setValidationResponse = useCallback((value: string) => {
-    if (!props.multipleCriteriaInfo) {
-      for (const key in criteriaSet) {
-        const crit = criteriaSet[key]
-        let isValid = criteriaRule(crit.condition.type, value, crit.condition?.rule)
+  const setValidationResponse = useCallback(
+    (value: string, criterias?: InputValidation | InputValidation[]) => {
+      if (criterias) {
+        criteriaSet = getCriteriaSet({ ...props, criteria: criterias })
+      }
 
-        if (!isValid) {
-          setResponse(
-            handleResponse(
-              crit.invalidMessage,
-              crit.validMessage,
-              crit.invalidResponseType,
-              crit.nonBlocking,
-              isValid,
-              false
+      if (!props.multipleCriteriaInfo) {
+        for (const key in criteriaSet) {
+          const crit = criteriaSet[key]
+          let isValid = criteriaRule(crit.condition.type, value, crit.condition?.rule)
+
+          if (!isValid) {
+            setResponse(
+              handleResponse(
+                crit.invalidMessage,
+                crit.validMessage,
+                crit.invalidResponseType,
+                crit.nonBlocking,
+                isValid,
+                false
+              )
             )
-          )
-          break
-        } else {
-          setResponse(
+            break
+          } else {
+            setResponse(
+              handleResponse(
+                crit.invalidMessage,
+                crit.validMessage,
+                crit.validResponseType,
+                crit.nonBlocking,
+                isValid,
+                false
+              )
+            )
+          }
+        }
+      } else {
+        let validations: InputCriteriaResponse[] = []
+        for (const key in criteriaSet) {
+          const crit = criteriaSet[key]
+          let isValid = criteriaRule(crit.condition.type, value, crit.condition?.rule)
+
+          const respType = isValid ? crit.validResponseType : crit.invalidResponseType
+
+          validations = [
+            ...validations,
             handleResponse(
               crit.invalidMessage,
               crit.validMessage,
-              crit.validResponseType,
+              respType,
               crit.nonBlocking,
               isValid,
-              false
+              true
             )
-          )
+          ]
         }
-      }
-    } else {
-      let validations: InputCriteriaResponse[] = []
-      for (const key in criteriaSet) {
-        const crit = criteriaSet[key]
-        let isValid = criteriaRule(crit.condition.type, value, crit.condition?.rule)
-
-        const respType = isValid ? crit.validResponseType : crit.invalidResponseType
-
-        validations = [
-          ...validations,
-          handleResponse(
-            crit.invalidMessage,
-            crit.validMessage,
-            respType,
-            crit.nonBlocking,
-            isValid,
-            true
-          )
-        ]
-      }
 
-      setResponse(validations)
-    }
-  }, [])
+        setResponse(validations)
+      }
+    },
+    []
+  )
 
   return [response, setValidationResponse]
 }