Added eye and input container to TextInput

Added onFocus and disabled states
Added __container __icon and __textInput pseudoprops

Author: lfernandezs

src/components/hooks/useIsFocused.ts

@@ -1,9 +1,9 @@
 import { useCallback, useState } from 'react';
-import type { PressableProps, NativeSyntheticEvent, TargetedEvent } from 'react-native';
+import type { PressableProps, TextInputProps } from 'react-native';
 
 interface IUseIsFocusedState {
-	onFocus?: PressableProps[ 'onFocus' ],
-	onBlur?: PressableProps[ 'onBlur' ]
+	onFocus?: PressableProps[ 'onFocus' ] | TextInputProps[ 'onFocus' ],
+	onBlur?: PressableProps[ 'onBlur' ] | TextInputProps[ 'onBlur' ]
 }
 
 const useIsFocused = ( {
@@ -12,12 +12,12 @@ const useIsFocused = ( {
 }: IUseIsFocusedState ) => {
 	const [ isFocused, setIsFocused ] = useState( false );
 
-	const onFocus = useCallback( ( event: NativeSyntheticEvent<TargetedEvent> ) => {
+	const onFocus = useCallback( ( event ) => {
 		onFocusProp?.( event );
 		setIsFocused( true );
 	}, [ setIsFocused ] );
 
-	const onBlur = useCallback( ( event: NativeSyntheticEvent<TargetedEvent> ) => {
+	const onBlur = useCallback( ( event ) => {
 		onBlurProp?.( event );
 		setIsFocused( false );
 	}, [ setIsFocused ] );

src/components/main/TextInput/hooks.ts

@@ -0,0 +1,38 @@
+import { useMemo } from 'react';
+import { useIsFocused } from '../../hooks';
+import { useComponentPropsResolver } from '../../../hooks';
+import type { ITextInputProps } from './types';
+
+interface IUseTextInputPropsResolverType {
+	containerProps: ITextInputProps['__container'],
+	iconProps: ITextInputProps['__icon'],
+	textInputProps: ITextInputProps['__textInput'],
+	restProps: Omit<ITextInputProps, '__icon' | '__container' | 'textInput'>
+}
+
+const useTextInputPropsResolver = ( props: ITextInputProps ): IUseTextInputPropsResolverType => {
+	const { disabled } = props;
+	const { isFocused, onFocus, onBlur } = useIsFocused( props );
+
+	const state = useMemo( () => ( {
+		isDisabled: disabled || false,
+		isFocused
+	} ), [ disabled, isFocused ] );
+
+	const {
+		__container: containerProps,
+		__icon: iconProps,
+		__textInput: textInputProps,
+		...restProps
+	} = useComponentPropsResolver( 'TextInput', props, state ) as ITextInputProps;
+
+	restProps.onFocus = onFocus;
+	restProps.onBlur = onBlur;
+	restProps.editable = !disabled;
+
+	return {
+		containerProps, iconProps, textInputProps, restProps
+	};
+};
+
+export default useTextInputPropsResolver;

src/components/main/TextInput/index.tsx

@@ -1,12 +1,26 @@
 import React from 'react';
 import { TextInput as TextInputRN } from 'react-native';
-import { useComponentPropsResolver, useStyleFromPropsResolver } from '../../../hooks';
+import UIKitIcon from '../../../icons/UIKitIcon';
+import { useStyleFromPropsResolver } from '../../../hooks';
+import { HStack } from '../Stack';
+import useTextInputPropsResolver from './hooks';
 import type { ITextInputProps } from './types';
+import IconButton from '../IconButton';
+
+const passwordIcon = <IconButton name='eye' as={UIKitIcon} />;
 
 const TextInput = ( props: ITextInputProps ) => {
-	const resolvedProps = useComponentPropsResolver( 'TextInput', props );
-	const [ style, restProps ] = useStyleFromPropsResolver( 'TextInput', resolvedProps );
-	return <TextInputRN style={style} {...restProps}/>;
+	const {
+		containerProps, textInputProps, iconProps, restProps
+	} = useTextInputPropsResolver( props );
+	const [ style ] = useStyleFromPropsResolver( 'TextInput', textInputProps || {} );
+	return (
+		<HStack {...containerProps} height={56}>
+			<TextInputRN style={style} {...restProps}/>
+			{props.isPassword && React.cloneElement( props.passwordIcon || passwordIcon, iconProps )}
+		</HStack>
+
+	);
 };
 
 export default TextInput;

src/components/main/TextInput/types.ts

@@ -1,4 +1,10 @@
+import type { ReactElement } from 'react';
 import type { TextInputProps } from 'react-native';
 import type { ComponentStyledProps } from '../../../core/components/types';
+import type { IIconProps } from '../Icon/types';
 
-export interface ITextInputProps extends Omit<ComponentStyledProps<'TextInput'>, 'textAlign'>, TextInputProps {}
+export interface ITextInputProps extends Omit<ComponentStyledProps<'TextInput'>, 'textAlign'>, TextInputProps {
+    disabled?: boolean,
+    passwordIcon?: ReactElement<IIconProps>
+    isPassword?: boolean
+}

src/core/components/types/pseudoProps.ts

@@ -49,13 +49,21 @@ interface IFormControlPseudoProps {
 	__errorIcon: ComponentBaseStyledProps<'Icon'>
 }
 
+// TextInput pseudoprops
+interface ITextInputPseudoProps {
+	__icon: ComponentBaseStyledProps<'Icon'>
+	__container: ComponentBaseStyledProps<'Box'>
+	__textInput: ComponentBaseStyledProps<'TextInput'>
+}
+
 // Pseudoprops config for all components
 interface ComponentsPseudoPropsConfig {
 	Button: IButtonPseudoProps,
 	Checkbox: ICheckboxPseudoProps,
 	IconButton: IIconButtonPseudoProps,
 	Radio: IRadioPseudoProps
-	FormControl: IFormControlPseudoProps
+	FormControl: IFormControlPseudoProps,
+	TextInput: ITextInputPseudoProps
 }
 
 // Template type to get pseudoprops for a given component