npmchenwei111/app/views/loanapply/BorrowAmountItemView.js

test1111

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

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

class BorrowAmountItemView extends Component {
  constructor (props) {
    super(props)
    this.state = {
      amountValue: '',
    }
  }

  componentDidMount () {
  }

  handleChange (text) {
    this.setState({
      amountValue: text
    })
  }

  handleBlurText () {
    let z = /^[1-9]\d*$/
    if (!z.test(this.state.amountValue)) {
      YTShowToast.show('请输入正确的金额')
      return false
    }
    let amountValue = Math.round(parseFloat(this.state.amountValue) / 100) * 100
    console.log(amountValue, 'amountValue')
    if (amountValue > parseFloat(this.props.amount.maxAmount)) {
      this._refreshAmount(this.props.amount.maxAmount, () => {
        YTShowToast.show('金额过大')
      })
    } else if (amountValue < parseFloat(this.props.amount.minAmount)) {
      this._refreshAmount(this.props.amount.minAmount, () => {
        YTShowToast.show('金额过小')
      })
    } else {
      this._refreshAmount(amountValue)
    }
  }

  _refreshAmount (amountValue, callback) {
    if (isNaN(amountValue)) {
      amountValue = ''
    } else {
      amountValue = parseInt(amountValue).toString()
    }
    this.setState({
      amountValue: amountValue
    }, () => {
      if (typeof this.props.changeSelectAmount === 'function') {
        this.props.changeSelectAmount(this.state.amountValue)
      }
      if (typeof callback === 'function') {
        callback()
      }
    })
  }

  _rendTextInput (txt) {
    return (
      <YTTextInput editable={true}
                   digits={'.0123456789'}
                   maxLength={12}
                   keyboardType="numeric" underlineColorAndroid='transparent' value={txt} placeholder={'请输入金额'}
                   onChangeText={(text) => {this.handleChange(text) }} onBlur={() => {this.handleBlurText()}}
                   placeholderTextColor={R.color.font_input_hint}
                   style={{
                     color: txt ? R.color.bar_color : R.color.font_input_hint,
                     fontSize: 16,
                     textAlign: 'right',
                     flex: 1,
                     paddingTop: 0,
                     paddingBottom: 0,
                     marginRight: px2dp(8),
                   }}/>
    )
  }

  render () {
    let amount = this.props.amount
    console.log(amount, 'amount1')
    return (
      <View style={styles.borrowItem}>
        <View style={{justifyContent: 'center', marginRight: px2dp(10)}}>
          <Image style={styles.borrowItemIcon} source={R.img.ic_money_limit}/>
        </View>
        <View style={styles.borrowContent}>
          <Text style={styles.amonutText}>{amount.amountStr}</Text>
          {
            this._rendTextInput(this.state.amountValue)
          }
        </View>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  borrowItem: {
    paddingHorizontal: px2dp(16),
    flexDirection: 'row',
    backgroundColor: '#fff'
  },
  borrowItemIcon: {
    width: px2dp(22),
    height: px2dp(22),
    justifyContent: 'center',
    resizeMode: Image.resizeMode.contain
  },
  borrowContent: {
    position: 'relative',
    borderBottomWidth: px2dp(1),
    borderBottomColor: '#EFEFF4',
    borderStyle: 'solid',
    paddingTop: px2dp(25),
    paddingBottom: px2dp(25),
    flexDirection: 'row',
    flex: 1,
    marginLeft: px2dp(10),
    alignItems: 'center'
  },
  amonutText: {
    color: R.color.bar_color,
    fontSize: 16,
    paddingTop: 0,
    paddingBottom: 0
  },
})

export default BorrowAmountItemView