meditmoblibrary/src/ADFComponents/CTextField/CTextField.js

MedIT ADF Mobile Library

import React, { useState } from 'react'
import {
  StyleSheet,
  Text,
  TextInput,
  TouchableOpacity,
  View,
} from 'react-native'
import Icon from 'react-native-vector-icons/FontAwesome'

const CTextField = ({
  iconName,
  inputRef,
  width = '100%',
  showClear = false,
  onClear,
  label,
  labelStyles,
  pass,
  ...rest
}) => {
  const [secureText, setSecureText] = useState(true)

  const icon = () => {
    if (iconName) {
      return (
        <Icon
          style={{ paddingLeft: 20 }}
          name={iconName}
          size={16}
          color='#BABBBB'
        />
      )
    }
  }
  const ShowClear = () => {
    if (showClear) {
      return (
        <TouchableOpacity onPress={onClear}>
          <Icon
            style={{ marginRight: 20 }}
            name='times-circle'
            size={17}
            color='#BABBBB'
          />
        </TouchableOpacity>
      )
    }
  }
  const ShowPass = () => {
    if (pass) {
      return (
        <TouchableOpacity onPress={() => setSecureText((old) => !old)}>
          <Icon
            style={{ marginRight: 20 }}
            name={secureText ? 'eye' : 'eye-slash'}
            size={17}
            color='#BABBBB'
          />
        </TouchableOpacity>
      )
    }
  }

  return (
    <View style={{ width: width }}>
      <Text style={styles.labelStyles}>{label}</Text>
      <View style={{ ...styles.container }}>
        {icon()}
        <TextInput
          style={styles.input}
          underlineColorAndroid='transparent'
          returnKeyType='done'
          ref={inputRef}
          {...rest}
          secureTextEntry={pass ? secureText : false}
        />
        {ShowPass()}
        {ShowClear()}
      </View>
    </View>
  )
}

export default CTextField

const styles = StyleSheet.create({
  container: {
    height: 45,
    backgroundColor: 'white',
    borderWidth: 1,
    borderRadius: 5,
    borderColor: '#ACC5D7',
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
  },

  input: {
    flex: 1,
    paddingLeft: 16,
    paddingRight: 10,
    backgroundColor: '#FFFFFF',
    color: '#424242',
    fontSize: 16,
  },
  labelStyles: {
    fontSize: 16,
    fontWeight: 'bold',
    paddingBottom: 4,
    textAlign: 'left',
    color: '#656565',
  }
})