AppStateESS/InternshipInventory

View on GitHub
javascript/createInterface/InternationalDropDown.jsx

Summary

Maintainability
B
5 hrs
Test Coverage
import React from 'react';
import classNames from 'classnames';

class InternationalDropDown extends React.Component {
    constructor(props){
      super(props);

      this.state = {hasError: false};
      this.handleDrop = this.handleDrop.bind(this);
    }
    handleDrop(e){
        this.props.onChange(e.target.value);
    }
    setError(status){
        this.setState({hasError: status});
    }
    render() {
        var fgClasses = classNames({
                        'form-group': true,
                        'has-error': this.state.hasError
                    });

        var countries = this.props.countries;

        var output = null;

        if(this.props.formStyle === 'vertical' || this.props.formStyle === undefined){
            output = (
                <div className="row">
                    <div className="col-sm-12 col-md-4 col-md-push-3">
                        <div className={fgClasses} id="country">
                            <label htmlFor="country" className="control-label">Country</label>
                            <select id="country" onChange={this.handleDrop} name="country" className="form-control">
                                {Object.keys(countries).map(function(key) {
                                    return <option key={key} value={key}>{countries[key]}</option>;
                                })}
                            </select>
                        </div>
                    </div>
                </div>
            );
        } else if(this.props.formStyle === 'horizontal') {
            output = (
                <div className="form-group">
                    <label htmlFor="country" className="col-lg-3 control-label">Country</label>
                    <div className="col-lg-8">
                        <select id="country" name="country" className="form-control">
                            {Object.keys(countries).map(function(key) {
                                return <option key={key} value={key}>{countries[key]}</option>;
                            })}
                        </select>
                    </div>
                </div>
            );
        }

        return output;
    }
}

export default InternationalDropDown;