All files / input Input.js

55.56% Statements 5/9
25% Branches 2/8
20% Functions 1/5
55.56% Lines 5/9
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108            1x                                                 4x   4x                                                                     1x                         1x                                                    
import PropTypes from 'prop-types';
import React, { Component } from 'react';
 
import { StyleSheet, Text, View, TextInput, Dimensions } from 'react-native';
 
import ViewPropTypes from '../config/ViewPropTypes';
const SCREEN_WIDTH = Dimensions.get('window').width;
 
class Input extends Component {
  focus() {
    this.input.focus();
  }
 
  blur() {
    this.input.blur();
  }
 
  clear() {
    this.input.clear();
  }
 
  render() {
    const {
      containerStyle,
      icon,
      iconContainerStyle,
      inputStyle,
      displayError,
      errorStyle,
      errorMessage,
      ...attributes
    } = this.props;
 
    return (
      <View>
        <View
          style={[
            styles.container,
            { width: SCREEN_WIDTH - 100, height: 40 },
            containerStyle,
          ]}
        >
          {icon &&
            <View
              style={[styles.iconContainer, { height: 40 }, iconContainerStyle]}
            >
              {icon}
            </View>}
          <TextInput
            ref={input => (this.input = input)}
            underlineColorAndroid="transparent"
            style={[
              styles.input,
              { width: SCREEN_WIDTH - 100, height: 40 },
              inputStyle,
            ]}
            {...attributes}
          />
        </View>
        {displayError &&
          <Text style={[styles.error, errorStyle && errorStyle]}>
            {errorMessage || 'Error!'}
          </Text>}
      </View>
    );
  }
}
 
Input.propTypes = {
  containerStyle: ViewPropTypes.style,
 
  icon: PropTypes.object,
  iconContainerStyle: ViewPropTypes.style,
 
  inputStyle: PropTypes.object,
 
  displayError: PropTypes.bool,
  errorStyle: PropTypes.object,
  errorMessage: PropTypes.string,
};
 
const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    borderBottomWidth: 1,
    borderColor: 'rgba(171, 189, 219, 1)',
    alignItems: 'center',
  },
  iconContainer: {
    justifyContent: 'center',
    alignItems: 'center',
    marginLeft: 15,
  },
  input: {
    alignSelf: 'center',
    color: 'black',
    fontSize: 18,
    marginLeft: 10,
  },
  error: {
    color: '#FF2D00',
    margin: 5,
    fontSize: 12,
  },
});
 
export default Input;