fromsy-addons.js

gistfile1.js

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

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

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

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

  render: function () {

    // only add error class if input is not valid and user has modified the value or the form has been submitted.
    var hasError = (!this.isValid() && (this.isFormSubmitted() || !this.isPristine()));
    var groupClassName = cx((hasError ? "has-error" : null), this.props.groupClassName);
    var errorMessage = hasError ? this.getErrorMessage() : null;

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

  getValue: function(defaultValue) {
    var value = this.refs.input ? this.refs.input.getDOMNode().value : null;
    return value || (typeof defaultValue !== "undefined" ? defaultValue : '');
  },

  // run validation on blur
  _onBlur: function (event) {
    this.props.validate(this);
  }

});

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

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

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

  render: function () {

    // only add error class if input is not valid and user has modified the value or the form has been submitted.
    var hasError = (!this.isValid() && (this.isFormSubmitted() || !this.isPristine()));
    var groupClassName = cx((hasError ? "has-error" : null), this.props.groupClassName);

    return (
      <div className={groupClassName}>
        <textarea {...this.props} ref="input" onBlur={this._onBlur}></textarea>
      </div>
    );
  },

  getValue: function(defaultValue) {
    var value = this.refs.input ? this.refs.input.getDOMNode().value : null;
    return value || (typeof defaultValue !== "undefined" ? defaultValue : '');
  },

  // run validation on blur
  _onBlur: function (event) {
    this.props.validate(this);
  }
  
});

module.exports = Formsy;