From 8383ca01e2fcf9a8c0702ecc5bafa7b6cea2a413 Mon Sep 17 00:00:00 2001 From: Pedro Guerrato Date: Fri, 18 Feb 2022 18:02:53 -0300 Subject: [PATCH] Inserted responsiviness to prop rule change --- .../components/inputs/basic/Input.stories.tsx | 38 ++++++- src/lib/components/inputs/basic/Input.tsx | 11 +-- .../components/inputs/basic/shared/types.ts | 2 +- src/lib/components/inputs/basic/text/Text.tsx | 3 +- src/lib/hooks/useInputValidation.ts | 99 ++++++++++--------- 5 files changed, 95 insertions(+), 58 deletions(-) diff --git a/src/lib/components/inputs/basic/Input.stories.tsx b/src/lib/components/inputs/basic/Input.stories.tsx index fb89eadc..4963228b 100644 --- a/src/lib/components/inputs/basic/Input.stories.tsx +++ b/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 = (args: InputProps) => { + const [isChecked, setIsChecked] = useState(false) + return ( + <> + setIsChecked(e.target.checked)} + defaultChecked={isChecked} + /> + + + ) +} +Conditional.args = { + type: 'text', + id: 'none', + label: 'text', + placeholder: 'Type your search', + autoComplete: 'email' +} diff --git a/src/lib/components/inputs/basic/Input.tsx b/src/lib/components/inputs/basic/Input.tsx index d0d49c49..112324ca 100644 --- a/src/lib/components/inputs/basic/Input.tsx +++ b/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 = (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({ ...props, inputStyles: styles }) - - useEffect(() => { - setInputProps({ ...props, inputStyles: styles }) - }, [props]) + const inputProps: InputProps = { ...props, inputStyles: styles } return ( diff --git a/src/lib/components/inputs/basic/shared/types.ts b/src/lib/components/inputs/basic/shared/types.ts index b29c9b78..6bfe1d35 100644 --- a/src/lib/components/inputs/basic/shared/types.ts +++ b/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: diff --git a/src/lib/components/inputs/basic/text/Text.tsx b/src/lib/components/inputs/basic/text/Text.tsx index a9b3914f..f627c9ca 100644 --- a/src/lib/components/inputs/basic/text/Text.tsx +++ b/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 ( diff --git a/src/lib/hooks/useInputValidation.ts b/src/lib/hooks/useInputValidation.ts index 0b009cbf..f3bc5f82 100644 --- a/src/lib/hooks/useInputValidation.ts +++ b/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] }