npmchenwei111/app/views/bindcard/FormInputSelectView.js

test1111

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

import React, { Component } from 'react'
import { StyleSheet, Text, View } from 'react-native'
import Button from '../../common/views/Button'
import ArrowRight from '../../common/views/ArrowRight'
import YTShowSelectedMenu from '../../../src/native/YTShowSelectedMenu'
import { px2dp } from '../../utils/Px2dp'
import R from '../../assets/R'

class FormInputSelectView extends Component {
  constructor (props) {
    super(props)
    this.state = {
      contentIndex: 0,
      content: ''
    }
  }

  handleSelect () {
    let bankNames = []
    let options = this.props.options || []
    options.forEach((value, index) => {
      bankNames.push(value.bankName)
    })
    YTShowSelectedMenu.show('请选择银行开户行', bankNames, this.state.contentIndex).then(position => {
        this.setState({
          contentIndex: position,
          content: bankNames[position] ? bankNames[position] : ''
        }, () => {
          this.props.changeSelect(position)
        })
      }
    )
  }

  componentDidMount () {

  }

  render () {
    return (
      <View style={styles.formControl}>
        <Text style={styles.formLabel}>{this.props.title}</Text>
        <Button style={{flex: 1}} onPress={() => { this.handleSelect() }}>
          <View style={{flexDirection: 'row', justifyContent: 'flex-end'}}>
            {
              this.state.content
                ? <Text
                style={{
                  fontSize: px2dp(16),
                  color: R.color.bar_color,
                  textAlignVertical: 'center',
                  paddingTop: 0,
                  paddingBottom: 0,
                }}> {this.state.content} </Text>
                : <Text
                style={{
                  fontSize: px2dp(16),
                  color: R.color.font_input_hint,
                  textAlignVertical: 'center',
                  paddingTop: 0,
                  paddingBottom: 0,
                }}> {this.props.placeholder} </Text>
            }
            <View style={{justifyContent: 'center', paddingLeft: px2dp(5)}}>
              <ArrowRight />
            </View>
          </View>
        </Button>

      </View>
    )
  }
}

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

export default FormInputSelectView