npmchenwei111/app/views/bindcard/FormInputText.js

test1111

/**
 * Created by ziyu on 2017/6/20.
 */

import React, { Component } from 'react'
import { StyleSheet, Text, View } from 'react-native'
import YTTextInput from '../../../src/components/YTTextInput'
import { px2dp, sp } from '../../utils/Px2dp'
import R from '../../assets/R'

class FormInputText extends Component {
  constructor (props) {
    super(props)
    this.state = {}
  }

  componentDidMount () {
  }

  handleChange (text) {
    if (typeof this.props.onInputChange === 'function') {
      this.props.onInputChange(text)
    }
  }

  render () {
    return (
      <View style={this.props.noBorder ? styles.formControlNoBorder : styles.formControl}>
        <Text style={styles.formLabel}>{this.props.title}</Text>
        <YTTextInput keyboardType={this.props.keyboardType}
                     onChangeText={(text) => { this.handleChange(text) }}
                     underlineColorAndroid='transparent'
                     style={styles.formText}
                     defaultValue={this.props.defaultValue}
                     maxLength={this.props.maxLength}
                     placeholder={this.props.placeholder}
                     placeholderTextColor={this.props.placeholderTextColor}
                     digits={this.props.digits}
        />
      </View>
    )
  }
}

const styles = StyleSheet.create({
  formControl: {
    flexDirection: 'row',
    borderBottomWidth: 1,
    borderBottomColor: '#e2e2e2',
    borderStyle: 'solid',
    marginHorizontal: px2dp(10),
    paddingVertical: px2dp(20)
  },
  formControlNoBorder: {
    flexDirection: 'row',
    marginHorizontal: px2dp(10),
    paddingVertical: px2dp(20)
  },
  formLabel: {
    color: R.color.bar_color,
    fontSize: sp(16),
    textAlignVertical: 'center',
    paddingTop: 0,
    paddingBottom: 0,
  },
  formText: {
    textAlign: 'right',
    textAlignVertical: 'center',
    paddingTop: 0,
    paddingBottom: 0,
    fontSize: sp(16),
    flex: 1,
    color: R.color.bar_color,
    backgroundColor: R.color.transparent
  }
})

export default FormInputText