diff --git a/build/test.js b/build/test.js index d39fe80..39c8722 100644 --- a/build/test.js +++ b/build/test.js @@ -3,21 +3,21 @@ var ReactDOM = require('react-dom'); var Formsy = require('./../src/main.js'); var Input = React.createClass({ - - mixins: [Formsy.Mixin], onChange: function (event) { - this.setValue(event.currentTarget.value); + this.props.setValue(event.currentTarget.value); }, render: function () { return (
- {this.showRequired() ? 'required' : ''} - + {this.props.showRequired() ? 'required' : ''} +
); } }); +Input = Formsy.HOC(Input); + var SomeComp = React.createClass({ getInitialState: function () { return { diff --git a/src/Decorator.js b/src/Decorator.js new file mode 100644 index 0000000..e4c61cc --- /dev/null +++ b/src/Decorator.js @@ -0,0 +1,28 @@ +var React = global.React || require('react'); +var Mixin = require('./Mixin.js'); +module.exports = function () { + return function (Component) { + return React.createClass({ + mixins: [Mixin], + render: function () { + return React.createElement(Component, { + setValidations: this.setValidations, + setValue: this.setValue, + resetValue: this.resetValue, + getValue: this.getValue, + hasValue: this.hasValue, + getErrorMessage: this.getErrorMessage, + getErrorMessages: this.getErrorMessages, + isFormDisabled: this.isFormDisabled, + isValid: this.isValid, + isPristine: this.isPristine, + isFormSubmitted: this.isFormSubmitted, + isRequired: this.isRequired, + showRequired: this.showRequired, + showError: this.showError, + isValidValue: this.isValidValue + }); + } + }); + }; +}; diff --git a/src/HOC.js b/src/HOC.js new file mode 100644 index 0000000..acbffa9 --- /dev/null +++ b/src/HOC.js @@ -0,0 +1,26 @@ +var React = global.React || require('react'); +var Mixin = require('./Mixin.js'); +module.exports = function (Component) { + return React.createClass({ + mixins: [Mixin], + render: function () { + return React.createElement(Component, { + setValidations: this.setValidations, + setValue: this.setValue, + resetValue: this.resetValue, + getValue: this.getValue, + hasValue: this.hasValue, + getErrorMessage: this.getErrorMessage, + getErrorMessages: this.getErrorMessages, + isFormDisabled: this.isFormDisabled, + isValid: this.isValid, + isPristine: this.isPristine, + isFormSubmitted: this.isFormSubmitted, + isRequired: this.isRequired, + showRequired: this.showRequired, + showError: this.showError, + isValidValue: this.isValidValue + }); + } + }); +}; diff --git a/src/main.js b/src/main.js index b37165d..4218979 100644 --- a/src/main.js +++ b/src/main.js @@ -4,9 +4,13 @@ var validationRules = require('./validationRules.js'); var formDataToObject = require('form-data-to-object'); var utils = require('./utils.js'); var Mixin = require('./Mixin.js'); +var HOC = require('./HOC.js'); +var Decorator = require('./Decorator.js'); var options = {}; Formsy.Mixin = Mixin; +Formsy.HOC = HOC; +Formsy.Decorator = Decorator; Formsy.defaults = function (passedOptions) { options = passedOptions;