Formsy React Addons

gistfile1.js

var React = require('react/addons')
  , cx = require('classnames')
  , Formsy = require('formsy-react')
  ;

Formsy.AddonMixin = {
  
  propTypes: {
    groupClassName: React.PropTypes.oneOfType([
      React.PropTypes.array,
      React.PropTypes.string,
      React.PropTypes.object
    ]),
    label: React.PropTypes.string
  },

  getDefaultProps: function() {
    return {
      groupClassName: "form-group"
    };
  },

  getInitialState: function () {
    return {
      showValidation: true,
      lastError: null
    }
  },

  getPropsForRender: function() {
    var renderProps = {};
    // special handler if we have focus and an old error. (prevents error flickering when focus changes)
    if (!this.state.showValidation && this.state.lastError) {
      renderProps.hasError = true;
      renderProps.errorMessage = this.state.lastError;
    } else {
      // only add error class if input is not valid and user has modified the value or the form has been submitted.
      renderProps.hasError = this.state.showValidation && (!this.isValid() && (this.isFormSubmitted() || !this.isPristine()));
      renderProps.errorMessage = renderProps.hasError ? this.getErrorMessage() : null;
    }
    renderProps.groupClassName = cx((renderProps.hasError ? "has-error" : null), this.props.groupClassName);
    return renderProps;
  },

  _onChange: function (event) {
    this.setValue(event.target.value);
  },

  _onBlur: function (event) {
    this.setState({
      showValidation: true,
      lastError: null
    });
  },

  _onFocus: function () {
    this.setState({
      showValidation: false,
      lastError: this.getErrorMessage()
    });
  }

};


Formsy.Input = React.createClass({
  mixins: [Formsy.Mixin, Formsy.AddonMixin],

  render: function () {
    var renderProps = this.getPropsForRender();

    //console.log('render', groupClassName, 'valid', this.isValid(), 'error', this.showError(), 'req', this.showRequired(), 'prist', this.isPristine(), 'subbed', this.isFormSubmitted());
    return (
      <div className={renderProps.groupClassName}>
        {
          this.props.label ? (
            <label htmlFor={this.props.name}>{this.props.label}</label>
          ) : null
        }
        <input {...this.props} ref="input" onChange={this._onChange} onBlur={this._onBlur} onFocus={this._onFocus} value={this.getValue()} />
        {
          renderProps.errorMessage ? (
            <span className="help-block">{renderProps.errorMessage}</span>
          ) : null
        }
      </div>
    );
  }

});

Formsy.Textarea = React.createClass({
  mixins: [Formsy.Mixin, Formsy.AddonMixin],

  render: function () {
    var renderProps = this.getPropsForRender();

    return (
      <div className={renderProps.groupClassName}>
        {
          this.props.label ? (
            <label htmlFor={this.props.name}>{this.props.label}</label>
          ) : null
        }
        <textarea {...this.props} ref="input" onChange={this._onChange} onBlur={this._onBlur} onFocus={this._onFocus} value={this.getValue()}></textarea>
        {
          renderProps.errorMessage ? (
            <span className="help-block">{renderProps.errorMessage}</span>
          ) : null
        }
      </div>
    );
  }

});

// custom isRequired because the html5 required attribute sucks (custom events don't fire, etc)
Formsy.addValidationRule('isRequired', function (values, value) {
  return value !== null && value !== undefined && value !== '';
});

module.exports = Formsy;