formsy-semantic-ui-react - npm Package Compare versions

Comparing version 0.1.2 to 0.1.3

lib/FormsyCheckbox.js

@@ -56,2 +56,3 @@ 'use strict';
         var _props = this.props,
+            as = _props.as,
             isValid = _props.isValid,
@@ -63,8 +64,8 @@ isPristine = _props.isPristine,
             rootStyle = _props.rootStyle,
-            checkboxClassName = _props.checkboxClassName,
-            checkboxStyle = _props.checkboxStyle,
+            className = _props.className,
+            style = _props.style,
+            getValue = _props.getValue,
             setValidations = _props.setValidations,
             setValue = _props.setValue,
             resetValue = _props.resetValue,
-            getValue = _props.getValue,
             hasValue = _props.hasValue,
@@ -81,16 +82,15 @@ getErrorMessages = _props.getErrorMessages,
             validationErrors = _props.validationErrors,
-            otherProps = _objectWithoutProperties(_props, ['isValid', 'isPristine', 'errorLabel', 'getErrorMessage', 'rootClassName', 'rootStyle', 'checkboxClassName', 'checkboxStyle', 'setValidations', 'setValue', 'resetValue', 'getValue', 'hasValue', 'getErrorMessages', 'isFormDisabled', 'isFormSubmitted', 'isRequired', 'showRequired', 'showError', 'isValidValue', 'validations', 'validationError', 'validationErrors']);
+            otherProps = _objectWithoutProperties(_props, ['as', 'isValid', 'isPristine', 'errorLabel', 'getErrorMessage', 'rootClassName', 'rootStyle', 'className', 'style', 'getValue', 'setValidations', 'setValue', 'resetValue', 'hasValue', 'getErrorMessages', 'isFormDisabled', 'isFormSubmitted', 'isRequired', 'showRequired', 'showError', 'isValidValue', 'validations', 'validationError', 'validationErrors']);
 
+        var props = _extends({
+          checked: getValue(),
+          onChange: this.handleChange.bind(this),
+          className: className,
+          style: style
+        }, otherProps);
+
         return _react2['default'].createElement(
           'div',
-          {
-            className: rootClassName,
-            style: rootStyle
-          },
-          _react2['default'].createElement(_semanticUiReact.Checkbox, _extends({
-            checked: this.props.getValue(),
-            onChange: this.handleChange.bind(this),
-            className: checkboxClassName,
-            style: checkboxStyle
-          }, otherProps)),
+          { className: rootClassName, style: rootStyle },
+          (0, _react.cloneElement)(as === 'checkbox' ? _react2['default'].createElement(_semanticUiReact.Checkbox, null) : _react2['default'].createElement(_semanticUiReact.Radio, null), _extends({}, props)),
           !isValid() && !isPristine() && errorLabel && (0, _react.cloneElement)(errorLabel, { children: getErrorMessage() })
@@ -107,2 +107,3 @@ );
   name: _react.PropTypes.string.isRequired,
+  as: _react.PropTypes.oneOf(['checkbox', 'radio']),
   setValue: _react.PropTypes.func.isRequired,
@@ -115,7 +116,9 @@ isValid: _react.PropTypes.func.isRequired,
   rootStyle: _react.PropTypes.object,
-  checkoxClassName: _react.PropTypes.string,
-  checkBoxStyle: _react.PropTypes.object,
+  className: _react.PropTypes.string,
+  style: _react.PropTypes.object,
   getErrorMessage: _react.PropTypes.func.isRequired,
   errorLabel: _react.PropTypes.element
+}, _class2.defaultProps = {
+  as: 'checkbox'
 }, _temp)) || _class);
 exports['default'] = FormsyCheckbox;

lib/FormsyDropdown.js

@@ -55,2 +55,3 @@ 'use strict';
         var _props = this.props,
+            as = _props.as,
             isValid = _props.isValid,
@@ -62,4 +63,4 @@ isPristine = _props.isPristine,
             rootStyle = _props.rootStyle,
-            dropdownClassName = _props.dropdownClassName,
-            dropdownStyle = _props.dropdownStyle,
+            className = _props.className,
+            style = _props.style,
             setValidations = _props.setValidations,
@@ -80,18 +81,17 @@ setValue = _props.setValue,
             validationErrors = _props.validationErrors,
-            otherProps = _objectWithoutProperties(_props, ['isValid', 'isPristine', 'errorLabel', 'getErrorMessage', 'rootClassName', 'rootStyle', 'dropdownClassName', 'dropdownStyle', 'setValidations', 'setValue', 'resetValue', 'getValue', 'hasValue', 'getErrorMessages', 'isFormDisabled', 'isFormSubmitted', 'isRequired', 'showRequired', 'showError', 'isValidValue', 'validations', 'validationError', 'validationErrors']);
+            otherProps = _objectWithoutProperties(_props, ['as', 'isValid', 'isPristine', 'errorLabel', 'getErrorMessage', 'rootClassName', 'rootStyle', 'className', 'style', 'setValidations', 'setValue', 'resetValue', 'getValue', 'hasValue', 'getErrorMessages', 'isFormDisabled', 'isFormSubmitted', 'isRequired', 'showRequired', 'showError', 'isValidValue', 'validations', 'validationError', 'validationErrors']);
 
         var error = !isValid() && !isPristine();
 
+        var props = _extends({
+          onChange: this.handleChange.bind(this),
+          error: error,
+          className: className,
+          style: style
+        }, otherProps);
+
         return _react2['default'].createElement(
           'div',
-          {
-            className: rootClassName,
-            style: rootStyle
-          },
-          _react2['default'].createElement(_semanticUiReact.Dropdown, _extends({
-            onChange: this.handleChange.bind(this),
-            error: error,
-            className: dropdownClassName,
-            style: dropdownStyle
-          }, otherProps)),
+          { className: rootClassName, style: rootStyle },
+          (0, _react.cloneElement)(as === 'dropdown' ? _react2['default'].createElement(_semanticUiReact.Dropdown, null) : _react2['default'].createElement(_semanticUiReact.Select, null), _extends({}, props)),
           error && errorLabel && (0, _react.cloneElement)(errorLabel, { children: getErrorMessage() })
@@ -108,2 +108,3 @@ );
   name: _react.PropTypes.string.isRequired,
+  as: _react.PropTypes.oneOf(['dropdown', 'select']),
   isValid: _react.PropTypes.func.isRequired,
@@ -116,8 +117,10 @@ isPristine: _react.PropTypes.func.isRequired,
   rootStyle: _react.PropTypes.object,
-  dropdownClassName: _react.PropTypes.string,
-  dropdownStyle: _react.PropTypes.object,
+  className: _react.PropTypes.string,
+  style: _react.PropTypes.object,
   validationError: _react.PropTypes.string,
   validationErrors: _react.PropTypes.object,
   validations: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.object])
+}, _class2.defaultProps = {
+  as: 'dropdown'
 }, _temp)) || _class);
 exports['default'] = FormsyDropdown;

lib/FormsyInput.js

@@ -52,3 +52,3 @@ 'use strict';
       return _this.props.setValue(value);
-    }, 50), _temp), _possibleConstructorReturn(_this, _ret);
+    }), _temp), _possibleConstructorReturn(_this, _ret);
   }
@@ -68,4 +68,6 @@
     value: function () {
-      function handleChange(e, input) {
-        this.setInputValue(input.value);
+      function handleChange(e, _ref2) {
+        var value = _ref2.value;
+
+        this.setInputValue(value);
       }
@@ -90,2 +92,3 @@
         var _props = this.props,
+            as = _props.as,
             isValid = _props.isValid,
@@ -114,22 +117,21 @@ errorLabel = _props.errorLabel,
             validationErrors = _props.validationErrors,
-            otherProps = _objectWithoutProperties(_props, ['isValid', 'errorLabel', 'getErrorMessage', 'rootClassName', 'rootStyle', 'inputClassName', 'inputStyle', 'setValidations', 'setValue', 'resetValue', 'getValue', 'hasValue', 'getErrorMessages', 'isFormDisabled', 'isPristine', 'isFormSubmitted', 'isRequired', 'showRequired', 'showError', 'isValidValue', 'validations', 'validationError', 'validationErrors']);
+            otherProps = _objectWithoutProperties(_props, ['as', 'isValid', 'errorLabel', 'getErrorMessage', 'rootClassName', 'rootStyle', 'inputClassName', 'inputStyle', 'setValidations', 'setValue', 'resetValue', 'getValue', 'hasValue', 'getErrorMessages', 'isFormDisabled', 'isPristine', 'isFormSubmitted', 'isRequired', 'showRequired', 'showError', 'isValidValue', 'validations', 'validationError', 'validationErrors']);
 
         var allowError = this.state.allowError;
 
+        var error = !isValid() && !isPristine() && allowError;
 
-        var error = !isValid() && allowError;
+        var props = _extends({
+          error: error,
+          onBlur: this.handleBlur.bind(this),
+          onChange: this.handleChange.bind(this),
+          value: getValue() || '',
+          className: inputClassName,
+          style: inputStyle
+        }, otherProps);
 
         return _react2['default'].createElement(
           'div',
-          {
-            className: rootClassName,
-            style: rootStyle
-          },
-          _react2['default'].createElement(_semanticUiReact.Input, _extends({
-            error: error,
-            onBlur: this.handleBlur.bind(this),
-            onChange: this.handleChange.bind(this),
-            className: inputClassName,
-            style: inputStyle
-          }, otherProps)),
+          { className: rootClassName, style: rootStyle },
+          (0, _react.cloneElement)(as === 'input' ? _react2['default'].createElement(_semanticUiReact.Input, null) : _react2['default'].createElement(_semanticUiReact.TextArea, null), _extends({}, props)),
           error && errorLabel && (0, _react.cloneElement)(errorLabel, { children: getErrorMessage() })
@@ -147,3 +149,5 @@ );
   isValid: _react.PropTypes.func.isRequired,
+  as: _react.PropTypes.oneOf(['input', 'textarea']),
   setValue: _react.PropTypes.func.isRequired,
+  getValue: _react.PropTypes.func.isRequired,
   errorLabel: _react.PropTypes.element,
@@ -159,3 +163,5 @@ onBlur: _react.PropTypes.func,
   validations: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.object])
+}, _class2.defaultProps = {
+  as: 'input'
 }, _temp2)) || _class);
 exports['default'] = FormsyInput;

lib/FormsyRadio.js

@@ -6,10 +6,5 @@ 'use strict';
 });
-exports['default'] = undefined;
 
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _dec, _class, _class2, _temp;
-
 var _react = require('react');
@@ -19,103 +14,10 @@
 
-var _formsyReact = require('formsy-react');
+var _FormsyCheckbox = require('./FormsyCheckbox');
 
-var _semanticUiReact = require('semantic-ui-react');
+var _FormsyCheckbox2 = _interopRequireDefault(_FormsyCheckbox);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
 
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var FormsyCheckbox = (_dec = (0, _formsyReact.Decorator)(), _dec(_class = (_temp = _class2 = function (_Component) {
-  _inherits(FormsyCheckbox, _Component);
-
-  function FormsyCheckbox() {
-    _classCallCheck(this, FormsyCheckbox);
-
-    return _possibleConstructorReturn(this, (FormsyCheckbox.__proto__ || Object.getPrototypeOf(FormsyCheckbox)).apply(this, arguments));
-  }
-
-  _createClass(FormsyCheckbox, [{
-    key: 'handleChange',
-    value: function () {
-      function handleChange(e, input) {
-        this.props.setValue(input.checked);
-        this.setState({ allowErrors: true });
-      }
-
-      return handleChange;
-    }()
-  }, {
-    key: 'render',
-    value: function () {
-      function render() {
-        var _props = this.props,
-            isValid = _props.isValid,
-            isPristine = _props.isPristine,
-            errorLabel = _props.errorLabel,
-            getErrorMessage = _props.getErrorMessage,
-            rootClassName = _props.rootClassName,
-            rootStyle = _props.rootStyle,
-            radioClassName = _props.radioClassName,
-            radioStyle = _props.radioStyle,
-            setValidations = _props.setValidations,
-            setValue = _props.setValue,
-            resetValue = _props.resetValue,
-            getValue = _props.getValue,
-            hasValue = _props.hasValue,
-            getErrorMessages = _props.getErrorMessages,
-            isFormDisabled = _props.isFormDisabled,
-            isFormSubmitted = _props.isFormSubmitted,
-            isRequired = _props.isRequired,
-            showRequired = _props.showRequired,
-            showError = _props.showError,
-            isValidValue = _props.isValidValue,
-            validations = _props.validations,
-            validationError = _props.validationError,
-            validationErrors = _props.validationErrors,
-            otherProps = _objectWithoutProperties(_props, ['isValid', 'isPristine', 'errorLabel', 'getErrorMessage', 'rootClassName', 'rootStyle', 'radioClassName', 'radioStyle', 'setValidations', 'setValue', 'resetValue', 'getValue', 'hasValue', 'getErrorMessages', 'isFormDisabled', 'isFormSubmitted', 'isRequired', 'showRequired', 'showError', 'isValidValue', 'validations', 'validationError', 'validationErrors']);
-
-        return _react2['default'].createElement(
-          'div',
-          {
-            className: rootClassName,
-            style: rootStyle
-          },
-          _react2['default'].createElement(_semanticUiReact.Radio, _extends({
-            checked: this.props.getValue(),
-            onChange: this.handleChange.bind(this),
-            className: radioClassName,
-            style: radioStyle
-          }, otherProps)),
-          !isValid() && !isPristine() && errorLabel && (0, _react.cloneElement)(errorLabel, { children: getErrorMessage() })
-        );
-      }
-
-      return render;
-    }()
-  }]);
-
-  return FormsyCheckbox;
-}(_react.Component), _class2.propTypes = {
-  name: _react.PropTypes.string.isRequired,
-  setValue: _react.PropTypes.func.isRequired,
-  isValid: _react.PropTypes.func.isRequired,
-  getValue: _react.PropTypes.func.isRequired,
-  isPristine: _react.PropTypes.func.isRequired,
-  required: _react.PropTypes.bool,
-  getErrorMessage: _react.PropTypes.func.isRequired,
-  rootClassName: _react.PropTypes.string,
-  rootStyle: _react.PropTypes.object,
-  radioClassName: _react.PropTypes.string,
-  radioStyle: _react.PropTypes.object,
-  errorLabel: _react.PropTypes.element,
-  validationError: _react.PropTypes.string,
-  validationErrors: _react.PropTypes.object,
-  validations: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.object])
-}, _temp)) || _class);
-exports['default'] = FormsyCheckbox;
+exports['default'] = function (props) {
+  return _react2['default'].createElement(_FormsyCheckbox2['default'], _extends({ as: 'radio' }, props));
+};

lib/FormsyRadioGroup.js

@@ -10,3 +10,3 @@ 'use strict';
 
-var _dec, _class, _class2, _temp2;
+var _dec, _class, _class2, _temp;
 
@@ -27,33 +27,16 @@ var _react = require('react');
 
-var FormsyRadioGroup = (_dec = (0, _formsyReact.Decorator)(), _dec(_class = (_temp2 = _class2 = function (_Component) {
+var FormsyRadioGroup = (_dec = (0, _formsyReact.Decorator)(), _dec(_class = (_temp = _class2 = function (_Component) {
   _inherits(FormsyRadioGroup, _Component);
 
   function FormsyRadioGroup() {
-    var _ref;
-
-    var _temp, _this, _ret;
-
     _classCallCheck(this, FormsyRadioGroup);
 
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = FormsyRadioGroup.__proto__ || Object.getPrototypeOf(FormsyRadioGroup)).call.apply(_ref, [this].concat(args))), _this), _this.state = { allowError: false }, _temp), _possibleConstructorReturn(_this, _ret);
+    return _possibleConstructorReturn(this, (FormsyRadioGroup.__proto__ || Object.getPrototypeOf(FormsyRadioGroup)).apply(this, arguments));
   }
 
   _createClass(FormsyRadioGroup, [{
-    key: 'componentWillReceiveProps',
-    value: function () {
-      function componentWillReceiveProps(nextProps) {
-        if (nextProps.isFormSubmitted()) this.setState({ allowError: true });
-      }
-
-      return componentWillReceiveProps;
-    }()
-  }, {
     key: 'handleChange',
     value: function () {
-      function handleChange(e, _ref2) {
-        var value = _ref2.value;
+      function handleChange(e, _ref) {
+        var value = _ref.value;
 
@@ -76,6 +59,6 @@ this.props.setValue(value);
             isValid = _props.isValid,
+            isPristine = _props.isPristine,
             getErrorMessage = _props.getErrorMessage,
             className = _props.className,
             style = _props.style;
-        var allowError = this.state.allowError;
 
@@ -92,8 +75,5 @@
           'div',
-          {
-            className: className,
-            style: style
-          },
+          { className: className, style: style },
           clonedChildren,
-          !isValid() && allowError && errorLabel && (0, _react.cloneElement)(errorLabel, { children: getErrorMessage() })
+          !isValid() && !isPristine() && errorLabel && (0, _react.cloneElement)(errorLabel, { children: getErrorMessage() })
         );
@@ -112,2 +92,3 @@ }
   isValid: _react.PropTypes.func.isRequired,
+  isPristine: _react.PropTypes.func.isRequired,
   errorLabel: _react.PropTypes.element,
@@ -121,3 +102,3 @@ getErrorMessage: _react.PropTypes.func.isRequired,
   validations: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.object])
-}, _temp2)) || _class);
+}, _temp)) || _class);
 exports['default'] = FormsyRadioGroup;

lib/FormsySelect.js

@@ -6,10 +6,5 @@ 'use strict';
 });
-exports['default'] = undefined;
 
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _dec, _class, _class2, _temp;
-
 var _react = require('react');
@@ -19,102 +14,10 @@
 
-var _formsyReact = require('formsy-react');
+var _FormsyDropdown = require('./FormsyDropdown');
 
-var _semanticUiReact = require('semantic-ui-react');
+var _FormsyDropdown2 = _interopRequireDefault(_FormsyDropdown);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
 
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var FormsySelect = (_dec = (0, _formsyReact.Decorator)(), _dec(_class = (_temp = _class2 = function (_Component) {
-  _inherits(FormsySelect, _Component);
-
-  function FormsySelect() {
-    _classCallCheck(this, FormsySelect);
-
-    return _possibleConstructorReturn(this, (FormsySelect.__proto__ || Object.getPrototypeOf(FormsySelect)).apply(this, arguments));
-  }
-
-  _createClass(FormsySelect, [{
-    key: 'handleChange',
-    value: function () {
-      function handleChange(e, input) {
-        this.props.setValue(input.value);
-      }
-
-      return handleChange;
-    }()
-  }, {
-    key: 'render',
-    value: function () {
-      function render() {
-        var _props = this.props,
-            isValid = _props.isValid,
-            isPristine = _props.isPristine,
-            errorLabel = _props.errorLabel,
-            getErrorMessage = _props.getErrorMessage,
-            rootClassName = _props.rootClassName,
-            rootStyle = _props.rootStyle,
-            selectClassName = _props.selectClassName,
-            selectStyle = _props.selectStyle,
-            setValidations = _props.setValidations,
-            setValue = _props.setValue,
-            resetValue = _props.resetValue,
-            getValue = _props.getValue,
-            hasValue = _props.hasValue,
-            getErrorMessages = _props.getErrorMessages,
-            isFormDisabled = _props.isFormDisabled,
-            isFormSubmitted = _props.isFormSubmitted,
-            isRequired = _props.isRequired,
-            showRequired = _props.showRequired,
-            showError = _props.showError,
-            isValidValue = _props.isValidValue,
-            validations = _props.validations,
-            validationError = _props.validationError,
-            validationErrors = _props.validationErrors,
-            otherProps = _objectWithoutProperties(_props, ['isValid', 'isPristine', 'errorLabel', 'getErrorMessage', 'rootClassName', 'rootStyle', 'selectClassName', 'selectStyle', 'setValidations', 'setValue', 'resetValue', 'getValue', 'hasValue', 'getErrorMessages', 'isFormDisabled', 'isFormSubmitted', 'isRequired', 'showRequired', 'showError', 'isValidValue', 'validations', 'validationError', 'validationErrors']);
-
-        var error = !isValid() && !isPristine();
-
-        return _react2['default'].createElement(
-          'div',
-          {
-            className: rootClassName,
-            style: rootStyle
-          },
-          _react2['default'].createElement(_semanticUiReact.Select, _extends({
-            onChange: this.handleChange.bind(this),
-            error: error,
-            className: selectClassName,
-            style: selectStyle
-          }, otherProps)),
-          error && errorLabel && (0, _react.cloneElement)(errorLabel, { children: getErrorMessage() })
-        );
-      }
-
-      return render;
-    }()
-  }]);
-
-  return FormsySelect;
-}(_react.Component), _class2.propTypes = {
-  name: _react.PropTypes.string.isRequired,
-  isValid: _react.PropTypes.func.isRequired,
-  isPristine: _react.PropTypes.func.isRequired,
-  setValue: _react.PropTypes.func.isRequired,
-  errorLabel: _react.PropTypes.element,
-  rootClassName: _react.PropTypes.string,
-  rootStyle: _react.PropTypes.object,
-  selectClassName: _react.PropTypes.string,
-  selectStyle: _react.PropTypes.object,
-  getErrorMessage: _react.PropTypes.func.isRequired,
-  validationError: _react.PropTypes.string,
-  validationErrors: _react.PropTypes.object,
-  validations: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.object])
-}, _temp)) || _class);
-exports['default'] = FormsySelect;
+exports['default'] = function (props) {
+  return _react2['default'].createElement(_FormsyDropdown2['default'], _extends({ as: 'select' }, props));
+};

lib/FormsyTextArea.js

@@ -6,10 +6,5 @@ 'use strict';
 });
-exports['default'] = undefined;
 
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _dec, _class, _class2, _temp2;
-
 var _react = require('react');
@@ -19,139 +14,10 @@
 
-var _formsyReact = require('formsy-react');
+var _FormsyInput = require('./FormsyInput');
 
-var _semanticUiReact = require('semantic-ui-react');
+var _FormsyInput2 = _interopRequireDefault(_FormsyInput);
 
-var _lodash = require('lodash.debounce');
-
-var _lodash2 = _interopRequireDefault(_lodash);
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
 
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var FormsyInput = (_dec = (0, _formsyReact.Decorator)(), _dec(_class = (_temp2 = _class2 = function (_Component) {
-  _inherits(FormsyInput, _Component);
-
-  function FormsyInput() {
-    var _ref;
-
-    var _temp, _this, _ret;
-
-    _classCallCheck(this, FormsyInput);
-
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = FormsyInput.__proto__ || Object.getPrototypeOf(FormsyInput)).call.apply(_ref, [this].concat(args))), _this), _this.state = { allowError: false }, _this.setInputValue = (0, _lodash2['default'])(function (value) {
-      return _this.props.setValue(value);
-    }, 50), _temp), _possibleConstructorReturn(_this, _ret);
-  }
-
-  _createClass(FormsyInput, [{
-    key: 'componentWillReceiveProps',
-    value: function () {
-      function componentWillReceiveProps(nextProps) {
-        if (nextProps.isFormSubmitted()) this.setState({ allowError: true });
-      }
-
-      return componentWillReceiveProps;
-    }()
-  }, {
-    key: 'handleChange',
-    value: function () {
-      function handleChange(e, input) {
-        this.setInputValue(input.value);
-      }
-
-      return handleChange;
-    }()
-  }, {
-    key: 'handleBlur',
-    value: function () {
-      function handleBlur() {
-        this.setState({ allowError: true });
-        if (this.props.onBlur) this.props.onBlur();
-      }
-
-      return handleBlur;
-    }()
-  }, {
-    key: 'render',
-    value: function () {
-      function render() {
-        var _props = this.props,
-            isValid = _props.isValid,
-            errorLabel = _props.errorLabel,
-            getErrorMessage = _props.getErrorMessage,
-            rootClassName = _props.rootClassName,
-            rootStyle = _props.rootStyle,
-            inputClassName = _props.inputClassName,
-            inputStyle = _props.inputStyle,
-            setValidations = _props.setValidations,
-            setValue = _props.setValue,
-            resetValue = _props.resetValue,
-            getValue = _props.getValue,
-            hasValue = _props.hasValue,
-            getErrorMessages = _props.getErrorMessages,
-            isFormDisabled = _props.isFormDisabled,
-            isPristine = _props.isPristine,
-            isFormSubmitted = _props.isFormSubmitted,
-            isRequired = _props.isRequired,
-            showRequired = _props.showRequired,
-            showError = _props.showError,
-            isValidValue = _props.isValidValue,
-            validations = _props.validations,
-            validationError = _props.validationError,
-            validationErrors = _props.validationErrors,
-            otherProps = _objectWithoutProperties(_props, ['isValid', 'errorLabel', 'getErrorMessage', 'rootClassName', 'rootStyle', 'inputClassName', 'inputStyle', 'setValidations', 'setValue', 'resetValue', 'getValue', 'hasValue', 'getErrorMessages', 'isFormDisabled', 'isPristine', 'isFormSubmitted', 'isRequired', 'showRequired', 'showError', 'isValidValue', 'validations', 'validationError', 'validationErrors']);
-
-        var allowError = this.state.allowError;
-
-
-        var error = !isValid() && allowError;
-
-        return _react2['default'].createElement(
-          'div',
-          {
-            className: rootClassName,
-            style: rootStyle
-          },
-          _react2['default'].createElement(_semanticUiReact.TextArea, _extends({
-            error: error,
-            onBlur: this.handleBlur.bind(this),
-            onChange: this.handleChange.bind(this),
-            className: inputClassName,
-            style: inputStyle
-          }, otherProps)),
-          error && errorLabel && (0, _react.cloneElement)(errorLabel, { children: getErrorMessage() })
-        );
-      }
-
-      return render;
-    }()
-  }]);
-
-  return FormsyInput;
-}(_react.Component), _class2.propTypes = {
-  name: _react.PropTypes.string.isRequired,
-  isValid: _react.PropTypes.func.isRequired,
-  setValue: _react.PropTypes.func.isRequired,
-  errorLabel: _react.PropTypes.element,
-  onBlur: _react.PropTypes.func,
-  rootClassName: _react.PropTypes.string,
-  rootStyle: _react.PropTypes.object,
-  inputClassName: _react.PropTypes.string,
-  inputStyle: _react.PropTypes.object,
-  getErrorMessage: _react.PropTypes.func.isRequired,
-  validationError: _react.PropTypes.string,
-  validationErrors: _react.PropTypes.object,
-  validations: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.object])
-}, _temp2)) || _class);
-exports['default'] = FormsyInput;
+exports['default'] = function (props) {
+  return _react2['default'].createElement(_FormsyInput2['default'], _extends({ as: 'textarea' }, props));
+};

package.json

 {
   "name": "formsy-semantic-ui-react",
-  "version" : "0.1.2",
+  "version" : "0.1.3",
   "description": "Formsy wrappers for Semantic-Ui-React form elements",
@@ -21,5 +21,7 @@ "repository" : {
     "build": "babel ./src -d ./lib",
-    "lint": "eslint src test --color && echo \"eslint: no errors\"",
+    "lint": "eslint src example test --color && echo \"eslint: no errors\"",
     "test": "mocha test/**/*.spec.js",
-    "test:watch": "npm run test -- --watch"
+    "test:watch": "npm run test -- --watch",
+    "example-app": "webpack-dev-server --config example/webpack.config.js --inline --progress --colors",
+    "prepublish": "npm run build"
   },
@@ -58,3 +60,5 @@ "peerDependencies": {
     "rimraf": "^2.5.4",
-    "sinon": "^1.17.4"
+    "sinon": "^1.17.4",
+    "webpack": "1.12.9",
+    "webpack-dev-server": "1.14.0"
   },
@@ -61,0 +65,0 @@ "dependencies": {

README.md

@@ -1,7 +0,9 @@
-Lets you create [formsy-react](https://github.com/christianalfoni/formsy-react) forms with [Semantic-Ui-React](https://github.com/Semantic-Org/Semantic-UI-React) components.
+# formsy-semantic-ui-react  [![Build Status](https://travis-ci.org/zabute/formsy-semantic-ui-react.svg?branch=master)](https://travis-ci.org/zabute/formsy-semantic-ui-react)
 
+Lets you quicky create and validate [formsy-react](https://github.com/christianalfoni/formsy-react) forms built with [Semantic-Ui-React](https://github.com/Semantic-Org/Semantic-UI-React) components.
+
 ## Installation
 
 ```
-$ npm install formsy-semantic-ui-react --save
+npm install formsy-semantic-ui-react --save
 ```
@@ -12,3 +14,3 @@
 ```
-$ npm install formsy-react --save
+npm install formsy-react --save
 ```
@@ -18,25 +20,22 @@
 
-The Components:
-
+Using ES6 imports:
 ```js
-import { Input } from 'formsy-semantic-ui-react';
-import { TextArea } from 'formsy-semantic-ui-react';
-import { Checkbox } from 'formsy-semantic-ui-react';
-import { Radio } from 'formsy-semantic-ui-react';
-import { RadioGroup } from 'formsy-semantic-ui-react';
-import { Dropdown } from 'formsy-semantic-ui-react';
-import { Select } from 'formsy-semantic-ui-react';
+import {
+  Input,
+  TextArea,
+  Checkbox,
+  Radio,
+  RadioGroup,
+  Dropdown,
+  Select
+} from 'formsy-semantic-ui-react';
 ```
 
-You'll need to wrap them with Formsy.Form
+## Validation
 
-```js
+For more information on validation, take a look at [Formsy-React's Dcoumentaion](https://github.com/christianalfoni/formsy-react/blob/master/API.md)
+
+```jsx
 import { Form } from 'formsy-react';
-```
 
-## validation
-
-For more information on validation, check out [Formsy-React's Dcoumentaion](https://github.com/christianalfoni/formsy-react/blob/master/API.md)
-
-```jsx
 <Form
@@ -76,2 +75,25 @@ noValidate
 
+## Examples
+Go to the [example](/example) folder to see more examples of how the components are used.
+To see the validation in action clone this repo and run
+```
+npm install
+```
+then
+```
+npm run example-app
+```
+
+## Tests
+Tests are done using Mocha, chai and enzyme on jsdom.
+
+To run the tests,
+```
+npm install
+```
+then
+
+``` npm run test ``` or ``` npm run test:watch ``` for single-run or watch-mode, respectively.
+
+
 License: [MIT](/LICENSE)

src/FormsyCheckbox.js

 import React, { Component, PropTypes, cloneElement } from 'react';
 import { Decorator as Formsy } from 'formsy-react';
-import { Checkbox } from 'semantic-ui-react';
+import { Checkbox, Radio } from 'semantic-ui-react';
 
@@ -9,2 +9,3 @@ @Formsy()
     name: PropTypes.string.isRequired,
+    as: PropTypes.oneOf(['checkbox', 'radio']),
     setValue: PropTypes.func.isRequired,
@@ -17,4 +18,4 @@ isValid: PropTypes.func.isRequired,
     rootStyle: PropTypes.object,
-    checkoxClassName: PropTypes.string,
-    checkBoxStyle: PropTypes.object,
+    className: PropTypes.string,
+    style: PropTypes.object,
     getErrorMessage: PropTypes.func.isRequired,
@@ -24,2 +25,6 @@ errorLabel: PropTypes.element,
 
+  static defaultProps = {
+    as: 'checkbox',
+  }
+
   handleChange(e, input) {
@@ -32,2 +37,3 @@ this.props.setValue(input.checked);
     const {
+      as,
       isValid,
@@ -39,8 +45,8 @@ isPristine,
       rootStyle,
-      checkboxClassName,
-      checkboxStyle,
+      className,
+      style,
+      getValue,
       setValidations, // eslint-disable-line
       setValue, // eslint-disable-line
       resetValue, // eslint-disable-line
-      getValue, // eslint-disable-line
       hasValue, // eslint-disable-line
@@ -60,15 +66,13 @@ getErrorMessages, // eslint-disable-line
 
+    const props = {
+      checked: getValue(),
+      onChange: ::this.handleChange,
+      className: className,
+      style: style,
+      ...otherProps,
+    };
+
     return (
-      <div
-        className={ rootClassName }
-        style={ rootStyle }
-      >
-        <Checkbox
-          checked={this.props.getValue()}
-          onChange={::this.handleChange}
-          className={ checkboxClassName }
-          style={ checkboxStyle }
-          { ...otherProps }
-        />
-
+      <div className={ rootClassName } style={ rootStyle }>
+        { cloneElement(as === 'checkbox' ? <Checkbox/> : <Radio/>, { ...props }) }
         {
@@ -75,0 +79,0 @@ !isValid() && !isPristine() && errorLabel &&

src/FormsyDropdown.js

 import React, { Component, PropTypes, cloneElement } from 'react';
 import { Decorator as Formsy } from 'formsy-react';
-import { Dropdown } from 'semantic-ui-react';
+import { Dropdown, Select } from 'semantic-ui-react';
 
@@ -9,2 +9,3 @@ @Formsy()
     name: PropTypes.string.isRequired,
+    as: PropTypes.oneOf(['dropdown', 'select']),
     isValid: PropTypes.func.isRequired,
@@ -17,4 +18,4 @@ isPristine: PropTypes.func.isRequired,
     rootStyle: PropTypes.object,
-    dropdownClassName: PropTypes.string,
-    dropdownStyle: PropTypes.object,
+    className: PropTypes.string,
+    style: PropTypes.object,
     validationError: PropTypes.string,
@@ -27,2 +28,6 @@ validationErrors: PropTypes.object,
 
+  static defaultProps = {
+    as: 'dropdown',
+  }
+
   handleChange(e, input) {
@@ -34,2 +39,3 @@ this.props.setValue(input.value);
     const {
+      as,
       isValid,
@@ -41,4 +47,4 @@ isPristine,
       rootStyle,
-      dropdownClassName,
-      dropdownStyle,
+      className,
+      style,
       setValidations, // eslint-disable-line
@@ -64,15 +70,13 @@ setValue, // eslint-disable-line
 
+    const props = {
+      onChange: ::this.handleChange,
+      error: error,
+      className: className,
+      style: style,
+      ...otherProps,
+    };
+
     return (
-      <div
-        className={ rootClassName }
-        style={ rootStyle }
-      >
-        <Dropdown
-          onChange={ ::this.handleChange }
-          error={ error }
-          className={ dropdownClassName }
-          style={ dropdownStyle }
-          { ...otherProps }
-        />
-
+      <div className={ rootClassName } style={ rootStyle }>
+        { cloneElement(as === 'dropdown' ? <Dropdown/> : <Select/>, { ...props }) }
         {
@@ -79,0 +83,0 @@ error && errorLabel &&

src/FormsyInput.js

 import React, { Component, PropTypes, cloneElement } from 'react';
 import { Decorator as Formsy } from 'formsy-react';
-import { Input } from 'semantic-ui-react';
+import { Input, TextArea } from 'semantic-ui-react';
 import debounce from 'lodash.debounce';
@@ -11,3 +11,5 @@
     isValid: PropTypes.func.isRequired,
+    as: PropTypes.oneOf(['input', 'textarea']),
     setValue: PropTypes.func.isRequired,
+    getValue: PropTypes.func.isRequired,
     errorLabel: PropTypes.element,
@@ -27,2 +29,6 @@ onBlur: PropTypes.func,
 
+  static defaultProps = {
+    as: 'input',
+  }
+
   state = { allowError: false };
@@ -34,6 +40,6 @@
 
-  setInputValue = debounce(value => this.props.setValue(value), 50);
+  setInputValue = debounce(value => this.props.setValue(value));
 
-  handleChange(e, input) {
-    this.setInputValue(input.value);
+  handleChange(e, { value }) {
+    this.setInputValue(value);
   }
@@ -48,2 +54,3 @@
     const {
+      as,
       isValid,
@@ -59,3 +66,3 @@ errorLabel,
       resetValue, // eslint-disable-line
-      getValue, // eslint-disable-line
+      getValue,
       hasValue, // eslint-disable-line
@@ -77,23 +84,18 @@ getErrorMessages, // eslint-disable-line
     const { allowError } = this.state;
+    const error = !isValid() && !isPristine() && allowError;
 
-    const error = !isValid() && allowError;
+    const props = {
+      error: error,
+      onBlur: ::this.handleBlur,
+      onChange: ::this.handleChange,
+      value: getValue() || '',
+      className: inputClassName,
+      style: inputStyle,
+      ...otherProps,
+    };
 
     return (
-      <div
-        className={ rootClassName }
-        style={ rootStyle }
-      >
-        <Input
-          error={ error }
-          onBlur={::this.handleBlur}
-          onChange={::this.handleChange}
-          className={ inputClassName }
-          style={ inputStyle }
-          { ...otherProps }
-        />
-
-        {
-          error && errorLabel &&
-          cloneElement(errorLabel, { children: getErrorMessage() })
-        }
+      <div className={ rootClassName } style={ rootStyle }>
+        { cloneElement(as === 'input' ? <Input/> : <TextArea/>, { ...props }) }
+        {error && errorLabel && cloneElement(errorLabel, { children: getErrorMessage() }) }
       </div>
@@ -100,0 +102,0 @@ );

src/FormsyRadio.js

@@ -1,80 +0,3 @@
-import React, { Component, PropTypes, cloneElement } from 'react';
-import { Decorator as Formsy } from 'formsy-react';
-import { Radio } from 'semantic-ui-react';
-
-@Formsy()
-export default class FormsyCheckbox extends Component {
-  static propTypes = {
-    name: PropTypes.string.isRequired,
-    setValue: PropTypes.func.isRequired,
-    isValid: PropTypes.func.isRequired,
-    getValue: PropTypes.func.isRequired,
-    isPristine: PropTypes.func.isRequired,
-    required: PropTypes.bool,
-    getErrorMessage: PropTypes.func.isRequired,
-    rootClassName: PropTypes.string,
-    rootStyle: PropTypes.object,
-    radioClassName: PropTypes.string,
-    radioStyle: PropTypes.object,
-    errorLabel: PropTypes.element,
-    validationError: PropTypes.string,
-    validationErrors: PropTypes.object,
-    validations: PropTypes.oneOfType(
-      [PropTypes.string, PropTypes.object]
-    ),
-  }
-
-  handleChange(e, input) {
-    this.props.setValue(input.checked);
-    this.setState({ allowErrors: true });
-  }
-
-  render() {
-    const {
-      isValid,
-      isPristine,
-      errorLabel,
-      getErrorMessage,
-      rootClassName,
-      rootStyle,
-      radioClassName,
-      radioStyle,
-      setValidations, // eslint-disable-line
-      setValue, // eslint-disable-line
-      resetValue, // eslint-disable-line
-      getValue, // eslint-disable-line
-      hasValue, // eslint-disable-line
-      getErrorMessages, // eslint-disable-line
-      isFormDisabled, // eslint-disable-line
-      isFormSubmitted, // eslint-disable-line
-      isRequired, // eslint-disable-line
-      showRequired, // eslint-disable-line
-      showError, // eslint-disable-line
-      isValidValue, // eslint-disable-line
-      validations, // eslint-disable-line
-      validationError, // eslint-disable-line
-      validationErrors, // eslint-disable-line
-      ...otherProps,
-    } = this.props;
-
-    return (
-      <div
-        className={ rootClassName }
-        style={ rootStyle }
-      >
-        <Radio
-          checked={this.props.getValue()}
-          onChange={::this.handleChange}
-          className={ radioClassName }
-          style={ radioStyle }
-          { ...otherProps }
-        />
-
-        {
-          !isValid() && !isPristine() && errorLabel &&
-            cloneElement(errorLabel, { children: getErrorMessage() })
-        }
-      </div>
-    );
-  }
-}
+import React from 'react';
+import Checkbox from './FormsyCheckbox';
+export default (props) => <Checkbox as="radio" { ...props }/>;

src/FormsyRadioGroup.js

@@ -11,2 +11,3 @@ import React, { Component, PropTypes, Children, cloneElement } from 'react';
     isValid: PropTypes.func.isRequired,
+    isPristine: PropTypes.func.isRequired,
     errorLabel: PropTypes.element,
@@ -24,8 +25,2 @@ getErrorMessage: PropTypes.func.isRequired,
 
-  state = { allowError: false }
-
-  componentWillReceiveProps(nextProps) {
-    if (nextProps.isFormSubmitted()) this.setState({ allowError: true });
-  }
-
   handleChange(e, { value }) {
@@ -41,2 +36,3 @@ this.props.setValue(value);
       isValid,
+      isPristine,
       getErrorMessage,
@@ -47,4 +43,2 @@ className,
 
-    const { allowError } = this.state;
-
     const clonedChildren = Children.map(children, radio => {
@@ -58,9 +52,6 @@ return cloneElement(radio, {
     return (
-      <div
-        className={ className }
-        style={ style }
-      >
+      <div className={ className } style={ style }>
         { clonedChildren }
         {
-          !isValid() && allowError && errorLabel &&
+          !isValid() && !isPristine() && errorLabel &&
           cloneElement(errorLabel, { children: getErrorMessage() })
@@ -67,0 +58,0 @@ }

src/FormsySelect.js

@@ -1,79 +0,3 @@
-import React, { Component, PropTypes, cloneElement } from 'react';
-import { Decorator as Formsy } from 'formsy-react';
-import { Select } from 'semantic-ui-react';
-
-@Formsy()
-export default class FormsySelect extends Component {
-  static propTypes = {
-    name: PropTypes.string.isRequired,
-    isValid: PropTypes.func.isRequired,
-    isPristine: PropTypes.func.isRequired,
-    setValue: PropTypes.func.isRequired,
-    errorLabel: PropTypes.element,
-    rootClassName: PropTypes.string,
-    rootStyle: PropTypes.object,
-    selectClassName: PropTypes.string,
-    selectStyle: PropTypes.object,
-    getErrorMessage: PropTypes.func.isRequired,
-    validationError: PropTypes.string,
-    validationErrors: PropTypes.object,
-    validations: PropTypes.oneOfType(
-      [PropTypes.string, PropTypes.object]
-    ),
-  }
-
-  handleChange(e, input) {
-    this.props.setValue(input.value);
-  }
-
-  render() {
-    const {
-      isValid,
-      isPristine,
-      errorLabel,
-      getErrorMessage,
-      rootClassName,
-      rootStyle,
-      selectClassName,
-      selectStyle,
-      setValidations, // eslint-disable-line
-      setValue, // eslint-disable-line
-      resetValue, // eslint-disable-line
-      getValue, // eslint-disable-line
-      hasValue, // eslint-disable-line
-      getErrorMessages, // eslint-disable-line
-      isFormDisabled, // eslint-disable-line
-      isFormSubmitted, // eslint-disable-line
-      isRequired, // eslint-disable-line
-      showRequired, // eslint-disable-line
-      showError, // eslint-disable-line
-      isValidValue, // eslint-disable-line
-      validations, // eslint-disable-line
-      validationError, // eslint-disable-line
-      validationErrors, // eslint-disable-line
-      ...otherProps,
-    } = this.props;
-
-    const error = !isValid() && !isPristine();
-
-    return (
-      <div
-        className={ rootClassName }
-        style={ rootStyle }
-      >
-        <Select
-          onChange={ ::this.handleChange }
-          error={ error }
-          className={ selectClassName }
-          style={ selectStyle }
-          { ...otherProps }
-        />
-
-        {
-          error && errorLabel &&
-          cloneElement(errorLabel, { children: getErrorMessage() })
-        }
-      </div>
-    );
-  }
-}
+import React from 'react';
+import FormsyDropdown from './FormsyDropdown';
+export default (props) => <FormsyDropdown as="select" { ...props }/>;

src/FormsyTextArea.js

@@ -1,96 +0,3 @@
-import React, { Component, PropTypes, cloneElement } from 'react';
-import { Decorator as Formsy } from 'formsy-react';
-import { TextArea } from 'semantic-ui-react';
-import debounce from 'lodash.debounce';
-
-@Formsy()
-export default class FormsyInput extends Component {
-  static propTypes = {
-    name: PropTypes.string.isRequired,
-    isValid: PropTypes.func.isRequired,
-    setValue: PropTypes.func.isRequired,
-    errorLabel: PropTypes.element,
-    onBlur: PropTypes.func,
-    rootClassName: PropTypes.string,
-    rootStyle: PropTypes.object,
-    inputClassName: PropTypes.string,
-    inputStyle: PropTypes.object,
-    getErrorMessage: PropTypes.func.isRequired,
-    validationError: PropTypes.string,
-    validationErrors: PropTypes.object,
-    validations: PropTypes.oneOfType(
-      [PropTypes.string, PropTypes.object]
-    ),
-  }
-
-  state = { allowError: false };
-
-  componentWillReceiveProps(nextProps) {
-    if (nextProps.isFormSubmitted()) this.setState({ allowError: true });
-  }
-
-  setInputValue = debounce(value => this.props.setValue(value), 50);
-
-  handleChange(e, input) {
-    this.setInputValue(input.value);
-  }
-
-  handleBlur() {
-    this.setState({ allowError: true });
-    if (this.props.onBlur) this.props.onBlur();
-  }
-
-  render() {
-    const {
-      isValid,
-      errorLabel,
-      getErrorMessage,
-      rootClassName,
-      rootStyle,
-      inputClassName,
-      inputStyle,
-      setValidations, // eslint-disable-line
-      setValue, // eslint-disable-line
-      resetValue, // eslint-disable-line
-      getValue, // eslint-disable-line
-      hasValue, // eslint-disable-line
-      getErrorMessages, // eslint-disable-line
-      isFormDisabled, // eslint-disable-line
-      isPristine, // eslint-disable-line
-      isFormSubmitted, // eslint-disable-line
-      isRequired, // eslint-disable-line
-      showRequired, // eslint-disable-line
-      showError, // eslint-disable-line
-      isValidValue, // eslint-disable-line
-      validations, // eslint-disable-line
-      validationError, // eslint-disable-line
-      validationErrors, // eslint-disable-line
-      ...otherProps,
-    } = this.props;
-
-    const { allowError } = this.state;
-
-    const error = !isValid() && allowError;
-
-    return (
-      <div
-        className={ rootClassName }
-        style={ rootStyle }
-      >
-        <TextArea
-          error={ error }
-          onBlur={::this.handleBlur}
-          onChange={::this.handleChange}
-          className={ inputClassName }
-          style={ inputStyle }
-          { ...otherProps }
-        />
-
-        {
-          error && errorLabel &&
-          cloneElement(errorLabel, { children: getErrorMessage() })
-        }
-      </div>
-    );
-  }
-}
+import React from 'react';
+import Input from './FormsyInput';
+export default (props) => <Input as="textarea" { ...props }/>;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1412451

increased by1982%

Number of package files

39

increased by62.5%

Number of lines in readme file

97

increased by29.33%

Worsened metrics

Dev dependency count

28

increased by7.69%

Lines of code

1257

decreased by-7.84%

No dependency changes