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
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;