essentory-login-test/components/ETextInput.tsx

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