components/AInput.tsx - master - Muip/ProBody

components/AInput.tsx
101 строка3 KB
chmerev
new
14 авг 2024, 12:02
14 авг 2024, 12:02595f266
import * as React from 'react';
import {
	View,
	TextInput,
	Text,
	StyleSheet,
	ViewStyle,
	TextStyle,
	TextInputProps,
	TouchableOpacity,
} from 'react-native';
import AppStyle from '../constants/AppStyle';
import Colors from '../constants/Colors';
import { SvgProps } from 'react-native-svg';
import AText from './AText';
import { useRouter } from 'expo-router';

interface Props extends TextInputProps {
	name: string;
	containerStyle?: ViewStyle;
	label?: string;
	labelStyle?: TextStyle;
	error?: string | undefined;
	icon?: React.ReactElement<SvgProps>;
	itsPassword?: boolean;
}

// eslint-disable-next-line @typescript-eslint/no-explicit-any
export default React.forwardRef<any, Props>(
	(props, ref): React.ReactElement => {
		const { label, containerStyle, labelStyle, error, icon, itsPassword, ...inputProps } = props;
		const [focus, setFocus] = React.useState(false);
		const router = useRouter();

		const onFocus = () => {
			setFocus(true);
		}

		const onBlur = () => {
			setFocus(false);
		}

		const borderColor = error ? '#fc6d47' : focus ? styles.focus.borderColor : styles.input.borderColor;

		return <View style={{...styles.container}}>
			<View style={[styles.container, containerStyle, {position: 'relative', display: 'flex', justifyContent: 'center'}]}>
				{label && <Text style={[styles.label, labelStyle]}>{label}</Text>}
				{icon && <View style={{position: 'absolute', zIndex: 2, left: 20}}>{icon}</View>}
				<TextInput
					onFocus={onFocus}
					onBlur={onBlur}
					autoCapitalize="none"
					ref={ref}
					placeholderTextColor={'#999DB7'}
					style={[styles.input, { borderColor: borderColor, paddingLeft: icon? 45 : 15 }]}
					{...inputProps}
				/>
			</View>
			{error && <Text style={styles.textError}>{error}</Text>}
			{itsPassword &&
				<TouchableOpacity onPress={() => router.push('/forgot')} >
					<AText style={{ color: '#838383', fontWeight: '600', fontSize: 16, textAlign: 'right', width: '100%', marginTop: 5 }}>Восстановить пароль</AText>
				</TouchableOpacity>
			}
		</View>
	}
);

const styles = StyleSheet.create({
	container: {
		width: '100%'
	},
	input: {
		borderStyle: 'solid',
		borderWidth: 2,
		borderRadius: 6,
		borderColor: '#E4E4E4',
		paddingVertical: 10,
		paddingLeft: 10,
		fontSize: 20,
		height: 70,
		color: '#3D3D3D',
		backgroundColor: '#fff',
		fontFamily: AppStyle.fontFamily,
		width: '100%',
	},
	focus: {
		borderColor: Colors.accent
	},
	label: {
		paddingVertical: 5,
		fontSize: 16,
		fontWeight: 'bold',
		color: '#3D3D3D',
	},
	textError: {
		color: '#fc6d47',
		fontSize: 14,
		marginTop: 3
	},
});