UnderlineInput.js

var React = require('react'),
    Base = require('newforms').TextInput,
    classnames = require('classnames');

var UnderlineInput = Base.extend({
    constructor: function UnderlineInput(kwargs) {
        if(!(this instanceof UnderlineInput)) {
            return new UnderlineInput(kwargs);
        }

        Base.call(this, kwargs);
    }
});

let Wrapper = React.createClass({
    getDefaultProps: function() {
        return {
            onBlur: function(e) {},
            onFocus: function(e) {}
        };
    },
    getInitialState: function() {
        return { focused: false };
    },
    onBlur: function(e) {
        this.setState({ focused: false });
        this.props.onBlur(e);
    },
    onFocus: function(e) {
        this.setState({ focused: true });
        this.props.onFocus(e);
    },
    render: function() {
        const classes = classnames({
            'underline-input': true,
            'focus': this.state.focused
        });
        return <div className={classes}>
            <label>{this.props.prefix}
                <input {...this.props} onBlur={this.onBlur} onFocus={this.onFocus} />
            </label>
        </div>;
    }
})

UnderlineInput.prototype.render = function(name, value, kwargs) {
    var finalAttrs = this.buildAttrs(kwargs.attrs, {
        name: name,
        type: this.inputType
    });

    var prefix = finalAttrs.prefix ? finalAttrs.prefix : "";
    
    var valueAttr = kwargs.controlled ? 'value' : 'defaultValue';
    finalAttrs[valueAttr] = value;

    return (<Wrapper {...finalAttrs} prefix={prefix} />);
};

module.exports = UnderlineInput;