occ-mobile/app/components/CountNum.js

import React, { Component } from 'react'
import {
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
  TextInput,
} from 'react-native'
import PropTypes from 'prop-types'

export default class CountNum extends Component {
  //初始化
  constructor(props) {
    super(props)
    let defaultValue = 1
    if (this.props.defaultValue && this.props.defaultValue > 0) {
      defaultValue = this.props.defaultValue
    }
    this.state = {
      totalnum: defaultValue,
    }
    this._callback = this._callback.bind(this)

    this.maxValue = props.maxValue
    this.minValue = props.minValue

    // this.unitScale = props.unitScale
  }
  static propTypes = {
    size: PropTypes.number,
    touchSpan: PropTypes.number,
    touchDisabledAdd: PropTypes.bool,
    touchDisabledSub: PropTypes.bool,
  }
  static defaultProps = {
    size: 25,
    touchSpan: 1,
    touchDisabledAdd: false,
    touchDisabledSub: false,
  }

  componentWillReceiveProps(nextProps) {
    // if ((nextProps.maxValue !== this.props.maxValue) || (nextProps.minValue !== this.props.minValue)) {
    this.maxValue = nextProps.maxValue
    this.minValue = nextProps.minValue
    // this.state.totalnum = nextProps.defaultValue

    this.setState({
      totalnum: nextProps.defaultValue,
    })
    // }
  }

  _callback(totalnum) {
    if (this.props.callback) {
      this.props.callback(totalnum)
    }
  }

  //处理数量和金额变化
  _changeNumAndSum(totalnum) {
    this.setState({
      totalnum: totalnum,
    })
    this._callback(totalnum)
  }

  //数量输入框处理
  _getInputContent(InputText) {
    // if (!InputText) {
    //     return this.setState({ totalnum: InputText })
    // }
    if (parseFloat(InputText) > this.maxValue) {
      InputText = this.minValue || 1
    }

    // this.setState({
    //   totalnum : InputText
    // })
    this._changeNumAndSum(InputText);
  }

  //点击加号
  _onPressIncrease(totalnum) {
    let num = parseFloat(totalnum) + this.props.touchSpan
    if (num > 999999) {
      num = 999999
    }
    if (num > this.maxValue) {
      num = this.maxValue
    }
    this._changeNumAndSum(num)
  }
  //点击减号
  _onPressDecrease(totalnum) {
    let num = parseFloat(totalnum) - this.props.touchSpan
    if (this.minValue != null || this.minValue != undefined) {
      if (num < this.minValue) {
        num = this.minValue
      }
    } else {
      if (num < 1) {
        num = 1
      }
    }

    this._changeNumAndSum(num)
  }

  _handlerNull() {
    if (!this.state.totalnum) {
      return this._changeNumAndSum(this.minValue || 1)
    }

    this._changeNumAndSum(this.state.totalnum)
  }

  render() {
    let fontSize
    this.props.size >= 30 ? (fontSize = 14) : (fontSize = 12)
    return (
      <View
        style={[
          {
            flexDirection: 'row',
            // position: "absolute",
            height: this.props.size,
            width: this.props.size * 4.2,
            // height: 25,
            // width: this.props.defaultScale ? 110 : 100,
            top: this.props.top ? this.props.top : 0,
            backgroundColor: '#FFF',
            borderRadius: 3,
            borderColor: '#DDDDDD',
            borderWidth: 0,
          },
          this.props.left ? { left: this.props.left } : null,
          this.props.right ? { right: this.props.right } : null,
        ]}
      >
        {/* 减号 */}
        <TouchableOpacity
          disabled={this.props.touchDisabledSub}
          onPress={() => this._onPressDecrease(this.state.totalnum)}
          style={{
            justifyContent: 'center',
            height: this.props.size,
            width: this.props.size,
            backgroundColor: '#FFF',
            // flex: 1,
            borderWidth: 1,
            borderColor: '#DDDDDD',
            borderTopLeftRadius: 3,
            borderBottomLeftRadius: 3,
          }}
        >
          <Text
            style={{
              textAlign: 'center',
              color: '#666',
              fontWeight: 'bold',
              fontSize: this.props.fontSize || fontSize,
            }}
          >
            -
          </Text>
        </TouchableOpacity>
        {/* 输入框 */}
        <View
          style={{
            flex: 2,
            borderTopWidth: 1,
            borderTopColor: '#DDDDDD',
            borderBottomWidth: 1,
            borderBottomColor: '#DDDDDD',
            justifyContent: 'center',
          }}
        >
          <TextInput
            ref={ip => (this._ip = ip)}
            style={{
              fontSize: fontSize,
              color: '#333333',
              padding: 0,
              backgroundColor: '#FFF',
              textAlign: 'center',
              height: 20,
            }}
            // defaultValue={1.toString()}
            // maxLength={6}
            underlineColorAndroid="transparent"
            keyboardType="numeric"
            blurOnSubmit={true}
            onBlur={() => this._handlerNull()}
            onChangeText={text => this._getInputContent(text)}
            //onChange={this._getInputContent}
            //加个空的字符串以便将数字转换成字符串显示
            //defaultValue={this.state.totalnum + ''}
            defaultValue={this.props.defaultValue?(this.props.defaultValue + ''):1}
            //value={this.state.totalnum+""}
            editable={this.props.editable}
          />
        </View>

        {/* 加号 */}
        <TouchableOpacity
          disabled={this.props.touchDisabledAdd}
          onPress={() => this._onPressIncrease(this.state.totalnum)}
          style={{
            justifyContent: 'center',
            height: this.props.size,
            width: this.props.size,
            backgroundColor: '#FFF',
            // flex: 1,
            borderWidth: 1,
            borderColor: '#DDDDDD',
            borderTopRightRadius: 3,
            borderBottomRightRadius: 3,
          }}
        >
          <Text
            style={{
              textAlign: 'center',
              color: '#666',
              fontWeight: 'bold',
              fontSize: this.props.fontSize || fontSize,
            }}
          >
            +
          </Text>
        </TouchableOpacity>
        {this.props.defaultScale ? (
          <Text
            style={{
              textAlign: 'center',
              alignSelf: 'center',
              fontSize: 12,
              color: '#999999',
              marginLeft: 4,
            }}
          >
            {this.props.defaultScale}
          </Text>
        ) : null}
      </View>
    )
  }
}