gigachanger.js

import React from "react";
import { Row, Col, ButtonGroup, Button } from 'react-bootstrap';
import moment from "moment";
import { List } from 'immutable';
import EmployeeName from './EmployeeName';

const emptySelection = '-- Valitse --';


export default React.createClass({

    megaChanger(from, field) {

        return {
            value: from[field],
            onChange: (e) => {
                this.setState({
                    [field]: e.target.value
                });
            }
        }
    },

    getInitialState() {
        const {initialValues} = this.props;
        return initialValues;
    },

    render() {

        const fields = {
            ...this.state
        };

        const { employees } = this.props;

        return (
           <div className="row login-box" id="form">
                <div className="col-md-12 login_control">
                    <div className="control">
                        <div className="label">Nimi</div>
                        <select disabled={!this.props.enabled} ref="name" className="form-control workers" {...this.megaChanger(fields, 'name')}>
                            <option value="">{emptySelection}</option>
                            {employees.map(employee => {
                                return <option key={employee.name} value={employee.name}><EmployeeName name={employee.name}/></option>;
                            })}
                        </select>
                    </div>
                    <div className="control">
                        <div className="label">Mitä teet?</div>
                        <input disabled={!this.props.enabled} type="text" ref="description" className="form-control" {...this.megaChanger(fields, 'description')} />
                    </div>
                    <div className="control panic">
                        <div className="label status-label">Fiilis</div>

                        <ButtonGroup>
                            <Button disabled={!this.props.enabled} onClick={this.changeColor.bind(this, 'green')} active={fields.color === 'green'} bsStyle="success" title="Sopivasti töitä">Laulattaa</Button>
                            <Button disabled={!this.props.enabled} onClick={this.changeColor.bind(this, 'yellow')} active={fields.color === 'yellow'} bsStyle="warning" title="Jonnin verran liikaa töitä">Närästää</Button>
                            <Button disabled={!this.props.enabled} onClick={this.changeColor.bind(this, 'red')} active={fields.color === 'red'} bsStyle="danger" title="En nuku öisin">Ahdistaa</Button>
                            <Button disabled={!this.props.enabled} onClick={this.changeColor.bind(this, 'blue')} active={fields.color === 'blue'} bsStyle="primary" title="Liian vähän laskutettavaa">Ei laskutettavaa :( </Button>
                        </ButtonGroup>

                    </div>
                    <div align="center" className="bottom_btns">
                        <button disabled={!this.isSubmittable()} id="submitter" className="btn btn-orange" onClick={this.submitStatus}>LÄHETÄ</button>
                        <a href="/#/matrix" className="btn btn-info btn-matrix">MATRIX</a>
                    </div>
                </div>
                <div className="col-md-12 send-section">
                    <div className="line"><h3 id="status-text"></h3></div>
                </div>
            </div>
        );
    },

    changeName(evt) {
        this.setState({
            'name': evt.target.value
        });
    },

    changeDescription(evt) {
        this.setState({
            'description': evt.target.value
        });
    },

    changeColor(color) {
        this.setState({
            'color': color
        });
    },

    submitStatus(evt) {

        this.props.onSubmit({
            ...this.state
        });

        this.setState({
            'description': ''
        });

    },

    handleEmployeeSelectChange(event) {
        this.changeName(event);
    },

    isSubmittable() {
        return this.state.name && this.props.enabled && this.state.description;
    }
});