text: import React, { Component } from 'react';
  import classnames from 'classnames';
  import PropTypes from 'prop-types';
  import styles from './AddPlayerInputGroup.module.css'
  
  const playerTypes = [
    'PG',
    // 'SG',
    'SF',
    // 'PF',
    // 'C'
  ]
  
  class AddPlayerInputGroup extends Component {
    constructor(props) {
      super(props);
  
      this.state = {
        name: '',
        position: 'PG'
      }
  
      this.handleChange = this.handleChange.bind(this)
      this.handleSubmit = this.handleSubmit.bind(this)
      this.handleTypeChoose = this.handleTypeChoose.bind(this)
    }
  
    shouldComponentUpdate(nextProps, nextState) {
      return nextState.name !== this.state.name || nextState.position !== this.state.position
    }
    
  
    handleChange(e) {
      this.setState({
        name: e.target.value
      })
    }
  
    handleSubmit(e) {
      const { name, position } = this.state
      if (e.which === 13 && name.trim().length) {
        this.props.addPlayer({ name: name.trim(), position })
        this.setState({
          name: ''
        })
      }
    }
  
    handleTypeChoose(type) {
      this.setState({
        position: type
      })
    }
  
    render() {
      const { name, position } = this.state
      return (
        <div>
          <div className="input-group">
            <div className="input-group-btn">
              <button
                type="button"
                className={classnames("btn btn-default dropdown-toggle", styles.inputBtn)}
                data-toggle="dropdown"
                aria-haspopup="true"
                aria-expanded="false"
              >
                {position}
                <span className="caret"></span>
              </button>
              <ul className="dropdown-menu">
                {
                  playerTypes.map((type, index) => <li key={index}><a href="/#" onClick={() => this.handleTypeChoose(type)}>{type}</a></li>)
                }
              </ul>
            </div>
            <input
              type="text"
              className={ classnames("form-control", styles.rightInput) }
              aria-label="..."
              autoFocus
              value={name}
              onChange={this.handleChange}
              onKeyDown={this.handleSubmit}
            />
          </div>
        </div>
      )
    }
  }
  
  AddPlayerInputGroup.propTypes = {
    addPlayer: PropTypes.func.isRequired,
  };
  
  export default AddPlayerInputGroup;
  