Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

Reject parameters in a function that have specific type in a prop

$
0
0

I have a component that is prepaired to receive a parameter called type that can be one of four options email, mobileNumber, cep, password'. If the property type value is password the properties icon and onPressIcon should'nt be parsed. I have typed this props as follow:

type TextInputT = {  type: 'email' | 'mobileNumber' | 'cep' | 'password';  name: string;  label: string;  onPressIcon: () => void;  icon: string;};

How can I do to make the props icon and onPressIcon invalid if the type of textinput is password?

I already tried

type TextInput = {  type: 'password';  name: string;  label: string;};type CustomTextInput = {  type: 'email' | 'mobileNumber' | 'cep';  name: string;  label: string;  onPressIcon: () => void;  icon: string;};export type TextInputT = TextInput | CustomTextInput;

But in component props type asignment throw the errors as follow

enter image description here

EDIT1: My TextInput.tsx

const TextInput: React.FC<TextInputT> = ({  type,  name,  label,  onPressIcon,  icon,}) => {  const inputValueRef = React.useRef(null);  const [isFocused, setIsFocused] = React.useState<boolean>(false);  const [valueShown, setValueShown] = React.useState<boolean>(false);  const [field, meta, helpers] = useField(name);  const hasError: boolean = meta.touched && typeof meta.error !== 'undefined';  const error: string = meta.touched && meta.error;  return (<Container><Content        active={isFocused}        error={hasError}        disabled={false}        onPress={() => inputValueRef?.current?.focus()}        activeOpacity={1}>        {(isFocused || meta.touched) && (<Label active={isFocused} error={hasError} disabled={false}>            {label}</Label>        )}<InputBox><InputValue            ref={inputValueRef}            secureTextEntry={type === 'password'&& !valueShown}            onFocus={() => setIsFocused(true)}            placeholder={!isFocused ? label : ''}            value={getFormattedValue({              value: field.value,              mask: type,            })}            onChangeText={field.onChange(name)}            onBlur={() => [setIsFocused(false), helpers.setTouched(true)]}          />          {type === 'password'&& (<IconBox onPress={() => setValueShown(!valueShown)}><IconDynamic                name={`${valueShown ? 'EyeClosed' : 'Eye'}`}                width={24}                height={24}                fill={colors.C.default}              /></IconBox>          )}          {icon && onPressIcon && (<IconBox onPress={onPressIcon}><IconDynamic                name={icon}                width={24}                height={24}                fill={colors.C.default}              /></IconBox>          )}</InputBox></Content>      {hasError && (<ErrorBox><TextError>{error}</TextError></ErrorBox>      )}</Container>  );};export default TextInput;

Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>