You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
113 lines
3.0 KiB
113 lines
3.0 KiB
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>
|
|
);
|
|
}
|