All files / src/components/TextInput TextInput.jsx

0% Statements 0/58
0% Branches 0/47
0% Functions 0/12
0% Lines 0/25
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89                                                                                                                                                                                 
import styles from './style.postcss';
 
import React, { PureComponent } from 'react';
import classnames from 'classnames';
import PropTypes from 'prop-types';
 
class TextInput extends PureComponent {
  constructor(props) {
    super(props);
 
    this.handleChange = this.handleChange.bind(this);
  }
 
  handleChange(e) {
    if (this.props.acceptedChars) {
      if (this.props.acceptedChars.type === 'number' &&
          e.target.value.match(/\D/g)
          ) {
        return;
      }
      if (this.props.acceptedChars.length > 0 &&
          this.props.acceptedChars.length < e.target.value.length) {
        return;
      }
    }
    this.props.onChange(e);
  }
 
  render() {
    const { suffix } = this.props;
    const _this = this;
    const classes = classnames(styles.TextInput, this.props.className);
    const inputClasses = ! suffix ?
      classnames(styles.TextInput_input, this.props.inputClassName) :
      classnames(styles.TextInput_input, this.props.inputClassName, styles.TextInput_suffixInput);
    return <div className={classes} style={this.props.myStyle}>
      <span className={styles.TextInput_name}>{this.props.labelName}</span>
      {renderInputText()}
    </div>;
 
    function renderInputText() {
      if (suffix) {
        return <div className={styles.TextInput_suffixWrapper}>
          <input type="text"
              style={_this.props.inputStyle}
              className={inputClasses}
              name={_this.props.name}
              disabled={_this.props.disabled}
              required={_this.props.required}
              value={_this.props.value}
              placeholder={_this.props.placeholder}
              onBlur={_this.handleChange}
              onChange={_this.handleChange} />
          <span className={styles.TextInput_suffixWrapper_suffix}>{suffix}</span>
        </div>;
      }
 
      return <input type="text"
          style={_this.props.inputStyle}
          className={inputClasses}
          name={_this.props.name}
          disabled={_this.props.disabled}
          required={_this.props.required}
          value={_this.props.value}
          placeholder={_this.props.placeholder}
          onBlur={_this.handleChange}
          onChange={_this.handleChange} />;
    }
  }
}
 
TextInput.propTypes = {
  myStyle: PropTypes.object,
  inputStyle: PropTypes.object,
  value: PropTypes.string,
  placeholder: PropTypes.string,
  labelName: PropTypes.string,
  name: PropTypes.string,
  disabled: PropTypes.bool,
  required: PropTypes.bool,
  onChange: PropTypes.func,
  suffix: PropTypes.string,
  className: PropTypes.string,
  inputClassName: PropTypes.string,
  acceptedChars: PropTypes.object,
};
 
export default TextInput;