occ-mobile/app/components/input/index.js

import React, { Children } from 'react'
import {
  StyleSheet,
  TouchableOpacity,
  View,
  TextInput,
  Dimensions,
  Text,
} from 'react-native'
import PropTypes from 'prop-types'
import Icon from '../Iconfont/Iconfont'

const { width, height } = Dimensions.get('window')

export default class InputText extends React.Component {
  constructor(props) {
    super(props)
    this.state = { text: '' }
  }
  static propTypes = {
    style: PropTypes.object,
    textStyle: PropTypes.object,
    placeholder: PropTypes.string,
    placeholderTextColor: PropTypes.string,
    iconColor: PropTypes.string,
    textInputBacg: PropTypes.string,
    iconName: PropTypes.string,
    iconSize: PropTypes.number,
    placeholderSize: PropTypes.number,
    onchangeFn: PropTypes.func,
    onFocusFn: PropTypes.func,
    touchInput: PropTypes.func,
    autoFocus: PropTypes.bool,
    touchBool: PropTypes.bool,
    isICon: PropTypes.bool,
    keyboardType: PropTypes.string,
    isBlurTrue: PropTypes.bool,
    defaultValue: PropTypes.string,
  }
  static defaultProps = {
    style: {
      height: 28,
      width: Dimensions.get('window').width / 1.36,

      marginTop: 20,
      borderRadius: Dimensions.get('window').width / 2,
      alignSelf: 'center',
      paddingLeft: 14,
    },
    textStyle: {
      paddingLeft: 10,
      height: 32,
      fontSize: 13,
      padding: 0,
      //   color: "#FFF"
      //   fontSize: 11
    },
    keyboardType: 'default',
    placeholder: '请输入商品名称或商品编码',
    placeholderTextColor: '#FFF',
    placeholderSize: 11,
    iconColor: '#FFF',
    textInputBacg: '#CCC',
    iconName: 'icon-icon-sousuo',
    iconSize: 18,
    onchangeFn: () => {},
    onFocusFn: () => {},
    touchInput: () => {},
    touchBool: false,
    autoFocus: false,
    isICon: true,
    isBlurTrue: true,
  }

  setClear() {
    this.setState({ text: '' })
  }

  render() {
    if (this.props.touchBool) {
      return (
        <TouchableOpacity
          onPress={() => this.props.touchInput()}
          activeOpacity={1}
          style={[
            this.props.style,
            {
              backgroundColor: this.props.textInputBacg,
              flexDirection: 'row',
            },
          ]}
        >
          <Icon
            name={this.props.iconName}
            size={this.props.iconSize}
            color={this.props.iconColor}
            style={{ marginTop: 7 }}
          />
          <Text
            style={{
              alignSelf: 'center',
              fontSize: this.props.placeholderSize,
              marginLeft: 10,
              color: this.props.placeholderTextColor,
            }}
          >
            {this.props.placeholder}
          </Text>
        </TouchableOpacity>
      )
    } else {
      return (
        <View
          style={[
            this.props.style,
            {
              backgroundColor: this.props.textInputBacg,
              flexDirection: 'row',
            },
          ]}
        >
          {this.props.isICon ? (
            <Icon
              name={this.props.iconName}
              size={this.props.iconSize}
              color={this.props.iconColor}
              style={{ marginTop: 7 }}
            />
          ) : null}
          <TextInput
            style={[
              this.props.textStyle,
              {
                flex: 1,
              },
            ]}
            defaultValue={this.props.defaultValue + ''}
            keyboardType={this.props.keyboardType}
            placeholder={this.props.placeholder}
            placeholderTextColor={this.props.placeholderTextColor}
            onChangeText={text => {
              this.setState({
                text: parseFloat(this.props.maxNum)
                  ? parseFloat(text) >= parseFloat(this.props.maxNum)
                    ? this.props.maxNum
                    : text
                  : text,
              })
            }}
            value={this.state.text + ''}
            defaultValue={this.props.defaultValue}
            multiline={false}
            onBlur={() => {
              this.props.isBlurTrue
                ? this.props.onchangeFn(this.state.text)
                : {}
            }}
            onSubmitEditing={() => {
              this.props.onchangeFn(this.state.text)
            }}
            onFocus={() => {
              this.props.onFocusFn()
            }}
            underlineColorAndroid="transparent"
            blurOnSubmit={true}
            autoFocus={this.props.autoFocus}
            autoCorrect={false}
            clearButtonMode={'while-editing'}
          />
        </View>
      )
    }
  }
}