|
|
import React, {useState} from 'react'; import {StyleProp, Text, TextInput, View, ViewStyle} from 'react-native'; import {ColorScheme} from './Design'; import {CrossIcon, EyeIcon, FailIcon, SuccessIcon} from './EIcons';
export enum ETextInputBorder { Nothing = 0, Border = 1, Success = 2, Fail = 3, }
const borderColorScheme = [ 'rgba(0,0,0,0)', ColorScheme.fill[30], ColorScheme.success.fill, ColorScheme.critical.fill, ];
export default function ETextInput(props: { placeholder: string; value: string; setValue: any; passwordHidden?: boolean; setPasswordHidden?: (newState: boolean) => void; checkFailStatus?: boolean; border?: ETextInputBorder; style?: StyleProp<ViewStyle>; onChange?: (value: string) => void; }) { const border = props.border === undefined ? ETextInputBorder.Nothing : props.border; const [focused, setFocused] = useState(false);
const clear = () => { props.setValue(''); props.onChange !== undefined && props.onChange(''); };
const sideIcon = () => { if (props.setPasswordHidden !== undefined) { return ( <EyeIcon fill={ props.passwordHidden ? ColorScheme.fill[20] : ColorScheme.fill[10] } onPress={() => props.setPasswordHidden && props.setPasswordHidden(!props.passwordHidden) } /> ); } else if (props.checkFailStatus !== undefined) { return props.checkFailStatus ? ( <SuccessIcon fill={ColorScheme.success.text} /> ) : ( <FailIcon fill={ColorScheme.critical.text} /> ); } else { return ( props.value && <CrossIcon fill={ColorScheme.fill[20]} onPress={clear} /> ); } };
return ( <View style={[ props.style, { borderColor: borderColorScheme[ focused && border == ETextInputBorder.Nothing ? ETextInputBorder.Border : border ], borderWidth: 1, borderRadius: 8, backgroundColor: ColorScheme.frostedfill.black[20], paddingHorizontal: 16, paddingVertical: 12, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', // these two are sketch.
shadowRadius: 30, shadowColor: '#000000', }, ]}> <TextInput onFocus={() => setFocused(true)} onBlur={() => setFocused(false)} onChangeText={text => { props.setValue(text); props.onChange !== undefined && props.onChange(text); }} value={props.value} placeholder={props.placeholder} placeholderTextColor={ColorScheme.fill[30]} secureTextEntry={props.passwordHidden} style={{ fontFamily: 'Pretendard-SemiBold', fontSize: 17, fontWeight: '300', color: ColorScheme.fill[10], margin: 0, padding: 0, flex: 1, }}></TextInput> {sideIcon()} </View> ); }
|