MaterialUi FormInput

"use strict";
const React = require('react');
const assign = require('object-assign');

const FormInput = React.createClass({
    propTypes: {
        size: React.PropTypes.oneOf(['small', 'normal']),
        highlight_color: React.PropTypes.string,
        placeholder: React.PropTypes.string,
    },
    getDefaultProps: function () {
        return {
            size: 'normal',
            highlight_color: 'rgb(200, 85, 34)',
            placeholder: '',
        };
    },
    getInitialState: function () {
        return {
            focus: false,
        }
    },
    handleOnFocus: function () {
        this.setState({
            focus: true,
        });
    },
    handleOnBlur: function () {
        this.setState({
            focus: false,
        });
    },
    render: function () {
        const styles = this.getStyles();
        let style = (this.state.focus === true) ? assign(styles.input, styles.input_focus) : styles.input;

        return (<input placeholder={this.props.placeholder} style={style} onFocus={this.handleOnFocus} onBlur={this.handleOnBlur} type="text"/>);
    },
    getStyles: function () {
        let styles = {
            input: {
                backgroundImage: 'linear-gradient(' + this.props.highlight_color + ', ' + this.props.highlight_color + '), linear-gradient(#d2d2d2, #d2d2d2)',
                border: 0,
                backgroundSize: '0 2px, 100% 1px',
                backgroundRepeat: 'no-repeat',
                backgroundPosition: 'center bottom, center calc(100% - 1px)',
                backgroundColor: 'rgba(0, 0, 0, 0)',
                transition: 'background 0s ease-out',
                display: 'block',
                width: '100%',
                height: (this.props.size === 'normal') ? 34 : 24,
                fontSize: (this.props.size === 'normal') ? 14 : 12,
                lineHeight: (this.props.size === 'normal') ? 1.42857143 : 1.2,
                color: '#555',
            },
            input_focus: {
                outline: 'none',
                backgroundSize: '100% 2px, 100% 1px',
                boxShadow: 'none',
                transitionDuration: '0.3s',
            }
        };

        return styles;
    }
});

module.exports = FormInput;