occ-mobile/app/components/CountNum_new.js

import React, { Component } from 'react'
import {
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
  TextInput,
  Image,
} from 'react-native'
import PropTypes from 'prop-types'
import countNumSubRed from './countNumSubRed.png'
import countNumAddRed from './countNumAddRed.png'
import countNumSubGray from './countNumSubGray.png'

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 (InputText == this.state.totalnum) return
    if (parseFloat(InputText) > this.maxValue) {
      InputText = this.minValue || 1
    }
    this.state.totalnum = InputText
    // this._changeNumAndSum(InputText);
  }

  //点击加号
  _onPressIncrease(totalnum) {
    let num =
      (totalnum
        ? parseFloat(totalnum)
        : parseFloat(this.props.defaultValue || 1)) + this.props.touchSpan
    if (num > 999999) {
      num = 999999
    }
    if (num > this.maxValue) {
      num = this.maxValue
    }
    this._changeNumAndSum(num)
  }
  //点击减号
  _onPressDecrease(totalnum) {
    let num =
      (totalnum
        ? parseFloat(totalnum)
        : parseFloat(this.props.defaultValue || 1)) - 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)
      return
    }

    this._changeNumAndSum(this.state.totalnum)
  }

  render() {
    let fontSize
    this.props.size >= 30 ? (fontSize = 14) : (fontSize = 12)
    if (this.props.isDesign) {
      return (
        <View
          style={[
            {
              flexDirection: 'row',
              // position: "absolute",
              height: this.props.size,
              width: this.props.size * 3.1,
              // height: 25,
              // width: this.props.defaultScale ? 110 : 100,
              top: this.props.top ? this.props.top : 0,
              backgroundColor: '#FFF',
            },
            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,
              // flex: 1,
            }}
          >
            <Image
              style={{ width: 20, height: 20 }}
              source={
                this.props.orderNum && this.props.orderNum > 1
                  ? countNumSubRed
                  : countNumSubGray
              }
              resizeMode="cover"
            />
          </TouchableOpacity>
          {/* 输入框 */}
          <View
            style={{
              flex: 2,
              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)}
              //加个空的字符串以便将数字转换成字符串显示
              defaultValue={this.state.totalnum + ''}
              // 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,
            }}
          >
            <Image
              style={{ width: 20, height: 20 }}
              source={countNumAddRed}
              resizeMode="cover"
            />
          </TouchableOpacity>
          {this.props.defaultScale ? (
            <Text
              style={{
                textAlign: 'center',
                alignSelf: 'center',
                fontSize: 12,
                color: '#999999',
                marginLeft: 4,
              }}
            >
              {this.props.defaultScale}
            </Text>
          ) : null}
        </View>
      )
    } else {
      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)}
              //加个空的字符串以便将数字转换成字符串显示
              defaultValue={this.state.totalnum + ''}
              // 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>
      )
    }
  }
}