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

Comparing version 0.1.6 to 0.2.0

example/App.js

 import React, { Component } from 'react';
 import { Container, Menu } from 'semantic-ui-react';
+import FormExamples from './FormExamples';
 import InputExamples from './InputExamples';
@@ -16,3 +17,4 @@ import CheckboxExamples from './CheckboxExamples';
 const tabs = {
-  Inputs: <InputExamples/>,
+  Form: <FormExamples/>,
+  Input: <InputExamples/>,
   Checkbox: <CheckboxExamples/>,
@@ -24,3 +26,3 @@ RadioGroup: <RadioGroupExamples/>,
 export default class App extends Component {
-  state = { selectedTab: 'Inputs' }
+  state = { selectedTab: 'Form' }
 
@@ -41,5 +43,11 @@ handleChangeTab = (e, { name }) => {
           <Menu pointing secondary>
+            <Menu.Item
+              name="Form"
+              active={selectedTab === 'Form'}
+              onClick={this.handleChangeTab}
+            />
+
            <Menu.Item
-             name="Inputs"
-             active={selectedTab === 'Inputs'}
+             name="Input"
+             active={selectedTab === 'Input'}
              onClick={this.handleChangeTab}
@@ -46,0 +54,0 @@ />

example/CheckboxExamples.js

@@ -12,21 +12,10 @@ import React, { Component } from 'react';
   },
-
-  customErrorLabel: {
-    color: '#f00',
-    textAling: 'center',
-  },
 };
 
 export default class CheckboxExamples extends Component {
-  state = { formData: null }
+  onValidSubmit = (formData) => alert(JSON.stringify(formData));   // eslint-disable-line
 
-  onSubmit = (formData) => {
-    this.setState({ formData });
-  }
-
   render() {
     const errorLabel = <Label color="red" pointing="left"/>;
 
-    const { formData } = this.state;
-
     const requiredCheckbox = (
@@ -67,3 +56,3 @@ <Checkbox
           noValidate
-          onSubmit={ this.onSubmit }
+          onValidSubmit={ this.onValidSubmit }
           ref={ref => this.form = ref }
@@ -95,8 +84,2 @@ >
         </Form>
-
-        <Segment>
-          <h5> Form Data </h5>
-          { JSON.stringify(formData) }
-        </Segment>
-
       </Container>
@@ -103,0 +86,0 @@ );

example/DropdownExamples.js

@@ -6,4 +6,2 @@ import React, { Component } from 'react';
 
-// <Radio/> has similar behavior and props
-
 const styles = {
@@ -13,7 +11,2 @@ root: {
   },
-
-  customErrorLabel: {
-    color: '#f00',
-    textAling: 'center',
-  },
 };
@@ -35,11 +28,5 @@
 export default class CheckboxExamples extends Component {
-  state = { formData: null }
+  onValidSubmit = (formData) => alert(JSON.stringify(formData)) // eslint-disable-line
 
-  onSubmit = (formData) => {
-    this.setState({ formData });
-  }
-
   render() {
-    const { formData } = this.state;
-
     const errorLabel = <Label color="red" pointing="left"/>;
@@ -119,3 +106,3 @@
           noValidate
-          onSubmit={ this.onSubmit }
+          onValidSubmit={ this.onValidSubmit }
           ref={ref => this.form = ref }
@@ -158,8 +145,2 @@ >
         </Form>
-
-        <Segment>
-          <h5> Form Data </h5>
-          { JSON.stringify(formData) }
-        </Segment>
-
       </Container>
@@ -166,0 +147,0 @@ );

example/InputExamples.js

@@ -6,7 +6,6 @@ import React, { Component } from 'react';
 
-// <TextArea/> has similar behavior and props
-
 const styles = {
   root: {
     marginTop: 18,
+    // padding: '0 24px 24px 24px',
   },
@@ -18,6 +17,2 @@
   },
-
-  toolbar: {
-    float: 'right',
-  },
 };
@@ -28,9 +23,5 @@
 
-  onSubmit = (formData) => {
-    this.setState({ formData });
-  }
+  onValidSubmit = (formData) => alert(JSON.stringify(formData));   // eslint-disable-line
 
   render() {
-    const { formData } = this.state;
-
     const errorLabel = <Label color="red" pointing="left"/>;
@@ -44,2 +35,3 @@
         icon="mail"
+        instantValidation
         iconPosition="left"
@@ -78,3 +70,3 @@ required
         name="inputWithCustomErrorLabel"
-        placeholder="Some Value"
+        placeholder="Password"
         icon="lock"
@@ -97,3 +89,3 @@ iconPosition="left"
           noValidate
-          onSubmit={ this.onSubmit }
+          onValidSubmit={ this.onValidSubmit }
           ref={ref => this.form = ref }
@@ -132,8 +124,2 @@ >
         </Form>
-
-        <Segment>
-          <h5> Form Data </h5>
-          { JSON.stringify(formData) }
-        </Segment>
-
       </Container>
@@ -140,0 +126,0 @@ );

example/RadioGroupExamples.js

@@ -11,3 +11,3 @@ import React, { Component } from 'react';
 
-  adioGroup: {
+  radioGroup: {
     display: 'flex',
@@ -24,11 +24,5 @@ marginBottom: 18,
 export default class RadioGroupExamples extends Component {
-  state = { formData: null }
+  onValidSubmit = (formData) => alert(JSON.stringify(formData)) // eslint-disable-line
 
-  onSubmit = (formData) => {
-    this.setState({ formData });
-  }
-
   render() {
-    const { formData } = this.state;
-
     const errorLabel = <Label color="red" pointing="left"/>;
@@ -109,3 +103,3 @@
           noValidate
-          onSubmit={ this.onSubmit }
+          onValidSubmit={ this.onValidSubmit }
           ref={ref => this.form = ref }
@@ -148,7 +142,2 @@ >
 
-        <Segment>
-          <h5> Form Data </h5>
-          { JSON.stringify(formData) }
-        </Segment>
-
       </Container>
@@ -155,0 +144,0 @@ );

example/webpack.config.js

@@ -12,3 +12,3 @@ const webpack = require('webpack');
   devServer: {
-    contentBase: 'example/static',
+    contentBase: 'example',
     devtool: 'eval',
@@ -15,0 +15,0 @@ hot: true,

lib/FormsyCheckbox.js

@@ -22,6 +22,6 @@ 'use strict';
 
+var _utils = require('./utils');
+
 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"); } }
@@ -46,3 +46,7 @@
       function componentDidMount() {
-        if (this.props.defaultChecked) this.props.setValue(true);
+        var _props = this.props,
+            defaultChecked = _props.defaultChecked,
+            setValue = _props.setValue;
+
+        if (defaultChecked) setValue(true);
       }
@@ -55,5 +59,6 @@
     value: function () {
-      function handleChange(e, input) {
-        this.props.setValue(input.checked);
-        this.setState({ allowErrors: true });
+      function handleChange(e, _ref) {
+        var checked = _ref.checked;
+
+        this.props.setValue(checked);
       }
@@ -67,42 +72,27 @@
       function render() {
-        var _props = this.props,
-            as = _props.as,
-            isValid = _props.isValid,
-            isPristine = _props.isPristine,
-            errorLabel = _props.errorLabel,
-            getErrorMessage = _props.getErrorMessage,
-            rootClassName = _props.rootClassName,
-            rootStyle = _props.rootStyle,
-            className = _props.className,
-            style = _props.style,
-            getValue = _props.getValue,
-            defaultChecked = _props.defaultChecked,
-            setValidations = _props.setValidations,
-            setValue = _props.setValue,
-            resetValue = _props.resetValue,
-            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, ['as', 'isValid', 'isPristine', 'errorLabel', 'getErrorMessage', 'rootClassName', 'rootStyle', 'className', 'style', 'getValue', 'defaultChecked', 'setValidations', 'setValue', 'resetValue', 'hasValue', 'getErrorMessages', 'isFormDisabled', 'isFormSubmitted', 'isRequired', 'showRequired', 'showError', 'isValidValue', 'validations', 'validationError', 'validationErrors']);
+        var _props2 = this.props,
+            as = _props2.as,
+            isValid = _props2.isValid,
+            isPristine = _props2.isPristine,
+            errorLabel = _props2.errorLabel,
+            getErrorMessage = _props2.getErrorMessage,
+            getValue = _props2.getValue;
 
-        var props = _extends({
+
+        var error = !isPristine() && !isValid();
+
+        var checkboxProps = _extends({
           checked: getValue(),
-          onChange: this.handleChange.bind(this),
-          className: className,
-          style: style
-        }, otherProps);
+          onChange: this.handleChange.bind(this)
+        }, (0, _utils.filterSuirElementProps)(this.props));
 
+        if (as === _semanticUiReact.Form.Checkbox || as === _semanticUiReact.Form.Radio) {
+          checkboxProps.error = error;
+        }
+
         return _react2['default'].createElement(
-          'div',
-          { 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() })
+          _semanticUiReact.Form.Field,
+          null,
+          (0, _react.createElement)(as, _extends({}, checkboxProps)),
+          error && errorLabel && (0, _react.cloneElement)(errorLabel, {}, getErrorMessage())
         );
@@ -118,3 +108,3 @@ }
   name: _react.PropTypes.string.isRequired,
-  as: _react.PropTypes.oneOf(['checkbox', 'radio']),
+  as: _react.PropTypes.oneOf([_semanticUiReact.Form.Checkbox, _semanticUiReact.Form.Radio, _semanticUiReact.Checkbox, _semanticUiReact.Radio]),
   defaultChecked: _react.PropTypes.bool,
@@ -126,11 +116,7 @@ setValue: _react.PropTypes.func.isRequired,
   required: _react.PropTypes.bool,
-  rootClassName: _react.PropTypes.string,
-  rootStyle: _react.PropTypes.object,
-  className: _react.PropTypes.string,
-  style: _react.PropTypes.object,
   getErrorMessage: _react.PropTypes.func.isRequired,
   errorLabel: _react.PropTypes.element
 }, _class2.defaultProps = {
-  as: 'checkbox'
+  as: _semanticUiReact.Checkbox
 }, _temp)) || _class);
 exports['default'] = FormsyCheckbox;

lib/FormsyDropdown.js

@@ -22,6 +22,6 @@ 'use strict';
 
+var _utils = require('./utils');
+
 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"); } }
@@ -47,5 +47,15 @@
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = FormsyDropdown.__proto__ || Object.getPrototypeOf(FormsyDropdown)).call.apply(_ref, [this].concat(args))), _this), _this.state = { allowError: false }, _this.handleBlur = function () {
-      _this.setState({ allowError: true });
-      if (_this.props.onBlur) _this.props.onBlur();
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = FormsyDropdown.__proto__ || Object.getPrototypeOf(FormsyDropdown)).call.apply(_ref, [this].concat(args))), _this), _this.state = { allowError: false }, _this.handleChange = function (e, _ref2) {
+      var value = _ref2.value;
+      var _this$props = _this.props,
+          multiple = _this$props.multiple,
+          getValue = _this$props.getValue,
+          setValue = _this$props.setValue;
+
+      if (multiple && getValue() && getValue().length > value.length) _this.showError();
+      setValue(value);
+    }, _this.showError = function () {
+      return _this.setState({ allowError: true });
+    }, _this.handleClose = function () {
+      return _this.showError();
     }, _temp), _possibleConstructorReturn(_this, _ret);
@@ -58,3 +68,7 @@ }
       function componentDidMount() {
-        if (this.props.defaultValue) this.props.setValue(this.props.defaultValue);
+        var _props = this.props,
+            defaultValue = _props.defaultValue,
+            setValue = _props.setValue;
+
+        if (defaultValue) setValue(defaultValue);
       }
@@ -67,4 +81,4 @@
     value: function () {
-      function componentWillReceiveProps() {
-        if (this.props.isFormSubmitted()) this.setState({ allowError: true });
+      function componentWillReceiveProps(nextProps) {
+        if (nextProps.isFormSubmitted()) this.showError();
       }
@@ -75,64 +89,31 @@
   }, {
-    key: 'handleChange',
-    value: function () {
-      function handleChange(e, input) {
-        this.props.setValue(input.value);
-        if (!this.props.multiple) this.setState({ allowError: true });
-      }
-
-      return handleChange;
-    }()
-  }, {
     key: 'render',
     value: function () {
       function render() {
-        var _props = this.props,
-            as = _props.as,
-            isValid = _props.isValid,
-            isPristine = _props.isPristine,
-            errorLabel = _props.errorLabel,
-            getErrorMessage = _props.getErrorMessage,
-            getValue = _props.getValue,
-            defaultValue = _props.defaultValue,
-            multiple = _props.multiple,
-            rootClassName = _props.rootClassName,
-            rootStyle = _props.rootStyle,
-            className = _props.className,
-            style = _props.style,
-            setValidations = _props.setValidations,
-            setValue = _props.setValue,
-            resetValue = _props.resetValue,
-            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, ['as', 'isValid', 'isPristine', 'errorLabel', 'getErrorMessage', 'getValue', 'defaultValue', 'multiple', 'rootClassName', 'rootStyle', 'className', 'style', 'setValidations', 'setValue', 'resetValue', 'hasValue', 'getErrorMessages', 'isFormDisabled', 'isFormSubmitted', 'isRequired', 'showRequired', 'showError', 'isValidValue', 'validations', 'validationError', 'validationErrors']);
+        var _props2 = this.props,
+            as = _props2.as,
+            getValue = _props2.getValue,
+            defaultValue = _props2.defaultValue,
+            multiple = _props2.multiple,
+            errorLabel = _props2.errorLabel,
+            getErrorMessage = _props2.getErrorMessage,
+            isValid = _props2.isValid,
+            isPristine = _props2.isPristine;
 
-        var allowError = this.state.allowError;
 
+        var error = !isPristine() && !isValid() && this.state.allowError;
 
-        var error = !isValid() && !isPristine() && allowError;
-
-        var props = _extends({
-          onChange: this.handleChange.bind(this),
-          value: getValue() || defaultValue || multiple && [] || '',
-          error: error,
-          className: className,
-          multiple: multiple,
+        var dropdownProps = _extends({
+          onChange: this.handleChange,
           onBlur: this.handleBlur,
-          style: style
-        }, otherProps);
+          onClose: this.handleClose,
+          value: getValue() || defaultValue || multiple && [],
+          error: error
+        }, (0, _utils.filterSuirElementProps)(this.props));
 
         return _react2['default'].createElement(
-          'div',
-          { 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() })
+          _semanticUiReact.Form.Field,
+          null,
+          (0, _react.createElement)(as, _extends({}, dropdownProps)),
+          error && errorLabel && (0, _react.cloneElement)(errorLabel, {}, getErrorMessage())
         );
@@ -148,3 +129,5 @@ }
   name: _react.PropTypes.string.isRequired,
-  as: _react.PropTypes.oneOf(['dropdown', 'select']),
+  as: _react.PropTypes.oneOf([_semanticUiReact.Dropdown, _semanticUiReact.Select, _semanticUiReact.Form.Dropdown, _semanticUiReact.Form.Select]),
+  defaultValue: _react.PropTypes.oneOfType([_react.PropTypes.number, _react.PropTypes.string, _react.PropTypes.arrayOf(_react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.number]))]),
+  errorLabel: _react.PropTypes.element,
   isValid: _react.PropTypes.func.isRequired,
@@ -154,12 +137,6 @@ isPristine: _react.PropTypes.func.isRequired,
   onBlur: _react.PropTypes.func,
-  defaultValue: _react.PropTypes.oneOfType([_react.PropTypes.number, _react.PropTypes.string, _react.PropTypes.arrayOf(_react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.number]))]),
   getValue: _react.PropTypes.func.isRequired,
   multiple: _react.PropTypes.bool,
-  errorLabel: _react.PropTypes.element,
   isFormSubmitted: _react.PropTypes.func.isRequired,
   getErrorMessage: _react.PropTypes.func.isRequired,
-  rootClassName: _react.PropTypes.string,
-  rootStyle: _react.PropTypes.object,
-  className: _react.PropTypes.string,
-  style: _react.PropTypes.object,
   validationError: _react.PropTypes.string,
@@ -169,4 +146,5 @@ validationErrors: _react.PropTypes.object,
 }, _class2.defaultProps = {
-  as: 'dropdown'
+  as: _semanticUiReact.Dropdown,
+  rootElement: _semanticUiReact.Form.Field
 }, _temp2)) || _class);
 exports['default'] = FormsyDropdown;

lib/FormsyInput.js

@@ -26,6 +26,6 @@ 'use strict';
 
+var _utils = require('./utils');
+
 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"); } }
@@ -51,5 +51,16 @@
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = FormsyInput.__proto__ || Object.getPrototypeOf(FormsyInput)).call.apply(_ref, [this].concat(args))), _this), _this.state = { allowError: false, currentValue: null }, _this.setInputValue = (0, _lodash2['default'])(function (value) {
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = FormsyInput.__proto__ || Object.getPrototypeOf(FormsyInput)).call.apply(_ref, [this].concat(args))), _this), _this.state = { allowError: false, value: null }, _this.setInputValue = (0, _lodash2['default'])(function (value) {
       return _this.props.setValue(value);
-    }, 100), _temp), _possibleConstructorReturn(_this, _ret);
+    }, 100), _this.handleChange = function (e, _ref2) {
+      var value = _ref2.value;
+
+      _this.setState({ value: value });
+      _this.setInputValue(value);
+      if (_this.props.instantValidation) _this.showError();
+    }, _this.handleBlur = function () {
+      _this.showError();
+      if (_this.props.onBlur) _this.props.onBlur();
+    }, _this.showError = function () {
+      return _this.setState({ allowError: true });
+    }, _temp), _possibleConstructorReturn(_this, _ret);
   }
@@ -61,4 +72,7 @@
       function componentDidMount() {
-        this.setState({ currentValue: this.props.defaultValue });
-        this.props.setValue(this.props.defaultValue);
+        var _props = this.props,
+            defaultValue = _props.defaultValue,
+            setValue = _props.setValue;
+
+        if (defaultValue) setValue(defaultValue);
       }
@@ -72,6 +86,4 @@
       function componentWillReceiveProps(nextProps) {
-        if (nextProps.isFormSubmitted()) this.setState({ allowError: true });
-        if (nextProps.getValue() !== this.state.currentValue) {
-          this.setState({ currentValue: this.props.getValue() });
-        }
+        if (nextProps.isFormSubmitted()) this.showError();
+        this.setState({ value: this.props.getValue() });
       }
@@ -82,86 +94,30 @@
   }, {
-    key: 'componentWillUpdate',
-    value: function () {
-      function componentWillUpdate(nextProps) {
-        if (!this.props.isPristine() && nextProps.isPristine()) {
-          this.setState({ currentValue: this.props.getValue() });
-        }
-      }
-
-      return componentWillUpdate;
-    }()
-  }, {
-    key: 'handleChange',
-    value: function () {
-      function handleChange(e, _ref2) {
-        var value = _ref2.value;
-
-        this.setState({ currentValue: value });
-        this.setInputValue(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,
-            as = _props.as,
-            isValid = _props.isValid,
-            errorLabel = _props.errorLabel,
-            getErrorMessage = _props.getErrorMessage,
-            rootClassName = _props.rootClassName,
-            rootStyle = _props.rootStyle,
-            inputClassName = _props.inputClassName,
-            inputStyle = _props.inputStyle,
-            defaultValue = _props.defaultValue,
-            isPristine = _props.isPristine,
-            getValue = _props.getValue,
-            setValidations = _props.setValidations,
-            setValue = _props.setValue,
-            resetValue = _props.resetValue,
-            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, ['as', 'isValid', 'errorLabel', 'getErrorMessage', 'rootClassName', 'rootStyle', 'inputClassName', 'inputStyle', 'defaultValue', 'isPristine', 'getValue', 'setValidations', 'setValue', 'resetValue', 'hasValue', 'getErrorMessages', 'isFormDisabled', 'isFormSubmitted', 'isRequired', 'showRequired', 'showError', 'isValidValue', 'validations', 'validationError', 'validationErrors']);
-
+        var _props2 = this.props,
+            as = _props2.as,
+            defaultValue = _props2.defaultValue,
+            isValid = _props2.isValid,
+            isPristine = _props2.isPristine,
+            getErrorMessage = _props2.getErrorMessage,
+            errorLabel = _props2.errorLabel;
         var _state = this.state,
             allowError = _state.allowError,
-            currentValue = _state.currentValue;
+            value = _state.value;
 
-        var error = !isValid() && !isPristine() && allowError;
+        var error = !isPristine() && !isValid() && allowError;
 
-        var props = _extends({
-          error: error,
-          onBlur: this.handleBlur.bind(this),
-          onChange: this.handleChange.bind(this),
-          className: inputClassName,
-          value: currentValue || isPristine() && defaultValue || '',
-          style: inputStyle
-        }, otherProps);
+        var inputProps = _extends({
+          value: value || isPristine() && defaultValue || '',
+          onChange: this.handleChange,
+          onBlur: this.handleBlur,
+          error: error
+        }, (0, _utils.filterSuirElementProps)(this.props));
 
         return _react2['default'].createElement(
-          'div',
-          { 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() })
+          _semanticUiReact.Form.Field,
+          null,
+          (0, _react.createElement)(as, _extends({}, inputProps)),
+          error && errorLabel && (0, _react.cloneElement)(errorLabel, {}, getErrorMessage())
         );
@@ -177,14 +133,11 @@ }
   name: _react.PropTypes.string.isRequired,
+  as: _react.PropTypes.oneOf([_semanticUiReact.Input, _semanticUiReact.TextArea, _semanticUiReact.Form.Input, _semanticUiReact.Form.TextArea]),
+  errorLabel: _react.PropTypes.element,
+  instantValidation: _react.PropTypes.bool,
+  defaultValue: _react.PropTypes.string,
+  onBlur: _react.PropTypes.func,
   isValid: _react.PropTypes.func.isRequired,
-  as: _react.PropTypes.oneOf(['input', 'textarea']),
   setValue: _react.PropTypes.func.isRequired,
   getValue: _react.PropTypes.func.isRequired,
   isPristine: _react.PropTypes.func.isRequired,
-  defaultValue: _react.PropTypes.string,
-  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,
@@ -194,6 +147,3 @@ validationError: _react.PropTypes.string,
   validations: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.object])
-}, _class2.defaultProps = {
-  as: 'input',
-  defaultValue: ''
-}, _temp2)) || _class);
+}, _class2.defaultProps = { as: _semanticUiReact.Input }, _temp2)) || _class);
 exports['default'] = FormsyInput;

lib/FormsyRadio.js

@@ -17,6 +17,8 @@ 'use strict';
 
+var _semanticUiReact = require('semantic-ui-react');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
 
 exports['default'] = function (props) {
-  return _react2['default'].createElement(_FormsyCheckbox2['default'], _extends({ as: 'radio' }, props));
+  return _react2['default'].createElement(_FormsyCheckbox2['default'], _extends({ as: _semanticUiReact.Radio }, props));
 };

lib/FormsyRadioGroup.js

@@ -8,5 +8,7 @@ 'use strict';
 
+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 _dec, _class, _class2, _temp2;
 
@@ -19,2 +21,4 @@ var _react = require('react');
 
+var _semanticUiReact = require('semantic-ui-react');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
@@ -28,9 +32,19 @@
 
-var FormsyRadioGroup = (_dec = (0, _formsyReact.Decorator)(), _dec(_class = (_temp = _class2 = function (_Component) {
+var FormsyRadioGroup = (_dec = (0, _formsyReact.Decorator)(), _dec(_class = (_temp2 = _class2 = function (_Component) {
   _inherits(FormsyRadioGroup, _Component);
 
   function FormsyRadioGroup() {
+    var _ref;
+
+    var _temp, _this, _ret;
+
     _classCallCheck(this, FormsyRadioGroup);
 
-    return _possibleConstructorReturn(this, (FormsyRadioGroup.__proto__ || Object.getPrototypeOf(FormsyRadioGroup)).apply(this, arguments));
+    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.handleChange = function (e, input) {
+      _this.props.setValue(input.value);
+    }, _temp), _possibleConstructorReturn(_this, _ret);
   }
@@ -42,3 +56,7 @@
       function componentDidMount() {
-        if (this.props.defaultSelected) this.props.setValue(this.props.defaultSelected);
+        var _props = this.props,
+            defaultSelected = _props.defaultSelected,
+            setValue = _props.setValue;
+
+        if (defaultSelected) setValue(defaultSelected);
       }
@@ -49,13 +67,2 @@
   }, {
-    key: 'handleChange',
-    value: function () {
-      function handleChange(e, _ref) {
-        var value = _ref.value;
-
-        this.props.setValue(value);
-      }
-
-      return handleChange;
-    }()
-  }, {
     key: 'render',
@@ -66,25 +73,29 @@ value: function () {
 
-        var _props = this.props,
-            children = _props.children,
-            getValue = _props.getValue,
-            errorLabel = _props.errorLabel,
-            isValid = _props.isValid,
-            isPristine = _props.isPristine,
-            getErrorMessage = _props.getErrorMessage,
-            className = _props.className,
-            style = _props.style;
+        var _props2 = this.props,
+            label = _props2.label,
+            required = _props2.required,
+            formRadioGroup = _props2.formRadioGroup,
+            children = _props2.children,
+            getValue = _props2.getValue,
+            errorLabel = _props2.errorLabel,
+            isValid = _props2.isValid,
+            isPristine = _props2.isPristine,
+            getErrorMessage = _props2.getErrorMessage;
 
 
-        var clonedChildren = _react.Children.map(children, function (radio) {
-          return (0, _react.cloneElement)(radio, {
-            checked: getValue() === radio.props.value,
-            onChange: _this2.handleChange.bind(_this2)
-          });
-        });
+        var error = !isPristine() && !isValid();
+        var formFieldProps = { required: required, label: label, error: error };
 
         return _react2['default'].createElement(
-          'div',
-          { className: className, style: style },
-          clonedChildren,
-          !isValid() && !isPristine() && errorLabel && (0, _react.cloneElement)(errorLabel, { children: getErrorMessage() })
+          _semanticUiReact.Form.Group,
+          null,
+          label && _react2['default'].createElement(_semanticUiReact.Form.Field, formFieldProps),
+          _react.Children.map(children, function (radio) {
+            var props = {
+              checked: getValue() === radio.props.value,
+              onChange: _this2.handleChange
+            };if (formRadioGroup) props.error = error;
+            return (0, _react.cloneElement)(radio, _extends({}, props));
+          }),
+          error && errorLabel && (0, _react.cloneElement)(errorLabel, {}, getErrorMessage())
         );
@@ -100,2 +111,5 @@ }
   name: _react.PropTypes.string.isRequired,
+  formRadioGroup: _react.PropTypes.bool,
+  required: _react.PropTypes.bool,
+  label: _react.PropTypes.string,
   setValue: _react.PropTypes.func.isRequired,
@@ -108,4 +122,2 @@ getValue: _react.PropTypes.func.isRequired,
   getErrorMessage: _react.PropTypes.func.isRequired,
-  className: _react.PropTypes.string,
-  style: _react.PropTypes.object,
   children: _react.PropTypes.node,
@@ -115,3 +127,5 @@ validationError: _react.PropTypes.string,
   validations: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.object])
-}, _temp)) || _class);
+}, _class2.defaultProps = {
+  rootElement: _semanticUiReact.Form.Field
+}, _temp2)) || _class);
 exports['default'] = FormsyRadioGroup;

lib/FormsyTextArea.js

@@ -17,6 +17,8 @@ 'use strict';
 
+var _semanticUiReact = require('semantic-ui-react');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
 
 exports['default'] = function (props) {
-  return _react2['default'].createElement(_FormsyInput2['default'], _extends({ as: 'textarea' }, props));
+  return _react2['default'].createElement(_FormsyInput2['default'], _extends({ as: _semanticUiReact.TextArea }, props));
 };

lib/index.js

@@ -6,94 +6,45 @@ 'use strict';
 });
+exports.Dropdown = exports.Select = exports.RadioGroup = exports.Radio = exports.Checkbox = exports.TextArea = exports.Input = exports.Form = undefined;
 
+var _Form2 = require('./Form');
+
+var _Form3 = _interopRequireDefault(_Form2);
+
 var _FormsyInput = require('./FormsyInput');
 
-Object.defineProperty(exports, 'Input', {
-  enumerable: true,
-  get: function () {
-    function get() {
-      return _interopRequireDefault(_FormsyInput)['default'];
-    }
+var _FormsyInput2 = _interopRequireDefault(_FormsyInput);
 
-    return get;
-  }()
-});
-
 var _FormsyTextArea = require('./FormsyTextArea');
 
-Object.defineProperty(exports, 'TextArea', {
-  enumerable: true,
-  get: function () {
-    function get() {
-      return _interopRequireDefault(_FormsyTextArea)['default'];
-    }
+var _FormsyTextArea2 = _interopRequireDefault(_FormsyTextArea);
 
-    return get;
-  }()
-});
-
 var _FormsyCheckbox = require('./FormsyCheckbox');
 
-Object.defineProperty(exports, 'Checkbox', {
-  enumerable: true,
-  get: function () {
-    function get() {
-      return _interopRequireDefault(_FormsyCheckbox)['default'];
-    }
+var _FormsyCheckbox2 = _interopRequireDefault(_FormsyCheckbox);
 
-    return get;
-  }()
-});
-
 var _FormsyRadio = require('./FormsyRadio');
 
-Object.defineProperty(exports, 'Radio', {
-  enumerable: true,
-  get: function () {
-    function get() {
-      return _interopRequireDefault(_FormsyRadio)['default'];
-    }
+var _FormsyRadio2 = _interopRequireDefault(_FormsyRadio);
 
-    return get;
-  }()
-});
-
 var _FormsyRadioGroup = require('./FormsyRadioGroup');
 
-Object.defineProperty(exports, 'RadioGroup', {
-  enumerable: true,
-  get: function () {
-    function get() {
-      return _interopRequireDefault(_FormsyRadioGroup)['default'];
-    }
+var _FormsyRadioGroup2 = _interopRequireDefault(_FormsyRadioGroup);
 
-    return get;
-  }()
-});
-
 var _FormsySelect = require('./FormsySelect');
 
-Object.defineProperty(exports, 'Select', {
-  enumerable: true,
-  get: function () {
-    function get() {
-      return _interopRequireDefault(_FormsySelect)['default'];
-    }
+var _FormsySelect2 = _interopRequireDefault(_FormsySelect);
 
-    return get;
-  }()
-});
-
 var _FormsyDropdown = require('./FormsyDropdown');
 
-Object.defineProperty(exports, 'Dropdown', {
-  enumerable: true,
-  get: function () {
-    function get() {
-      return _interopRequireDefault(_FormsyDropdown)['default'];
-    }
+var _FormsyDropdown2 = _interopRequireDefault(_FormsyDropdown);
 
-    return get;
-  }()
-});
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+exports.Form = _Form3['default'];
+exports.Input = _FormsyInput2['default'];
+exports.TextArea = _FormsyTextArea2['default'];
+exports.Checkbox = _FormsyCheckbox2['default'];
+exports.Radio = _FormsyRadio2['default'];
+exports.RadioGroup = _FormsyRadioGroup2['default'];
+exports.Select = _FormsySelect2['default'];
+exports.Dropdown = _FormsyDropdown2['default'];

package.json

 {
   "name": "formsy-semantic-ui-react",
-  "version" : "0.1.6",
-  "description": "Formsy wrappers for Semantic-Ui-React's form elements",
-  "repository" : {
+  "version": "0.2.0",
+  "description": "Formsy-React wrappers for Semantic-Ui-React's form Components",
+  "repository": {
     "type": "git",
@@ -21,3 +21,3 @@ "url": "https://github.com/zabute/formsy-semantic-ui-react"
     "build": "babel ./src -d ./lib",
-    "lint": "eslint src example test --color && echo \"eslint: no errors\"",
+    "lint": "eslint src example test --color",
     "test": "mocha test/**/*.spec.js",
@@ -30,3 +30,3 @@ "test:watch": "npm run test -- --watch",
     "formsy-react": "^0.19.0",
-    "semantic-ui-react": "^0.63.6",
+    "semantic-ui-react": "^0.67.0",
     "react": "^0.14.0 || ^15.0.0",
@@ -50,3 +50,2 @@ "react-dom": "^0.14.0 || ^15.0.0"
     "bundle-loader": "^0.5.4",
-    "react-hot-loader": "1.3.1",
     "chai": "^3.5.0",
@@ -58,14 +57,15 @@ "enzyme": "^2.4.1",
     "eslint-plugin-react": "^3.13.0",
+    "formsy-react": "^0.19.0",
     "ignore-styles": "^5.0.1",
     "jsdom": "^9.5.0",
     "mocha": "^2.5.3",
+    "react": "^0.14.0 || ^15.0.0",
     "react-addons-test-utils": "^15.0.0",
+    "react-dom": "^0.14.0 || ^15.0.0",
+    "react-hot-loader": "1.3.1",
     "rimraf": "^2.5.4",
-    "sinon": "^1.17.4",
+    "semantic-ui-react": "^0.67.0",
+    "sinon": "^1.17.7",
     "webpack": "1.12.9",
-    "webpack-dev-server": "1.14.0",
-    "formsy-react": "^0.19.0",
-    "semantic-ui-react": "^0.63.6",
-    "react": "^0.14.0 || ^15.0.0",
-    "react-dom": "^0.14.0 || ^15.0.0"
+    "webpack-dev-server": "1.14.0"
   },
@@ -72,0 +72,0 @@ "dependencies": {

README.md

@@ -1,82 +0,58 @@
-# 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) [![npm version](https://badge.fury.io/js/formsy-semantic-ui-react.svg)](https://badge.fury.io/js/formsy-semantic-ui-react)
+# 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) [![npm version](https://badge.fury.io/js/formsy-semantic-ui-react.svg)](https://badge.fury.io/js/formsy-semantic-ui-react)
 
-Quicky create  [formsy-react](https://github.com/christianalfoni/formsy-react) forms with [Semantic-Ui-React's](https://github.com/Semantic-Org/Semantic-UI-React) form components.
 
+Quicky create  [formsy-react](https://github.com/christianalfoni/formsy-react) forms with [Semantic-Ui-React's](https://github.com/Semantic-Org/Semantic-UI-React) Form Components.
+
 ## Installation
 
-```npm i formsy-semantic-ui-react```
-or
-```yarn add formsy-semantic-ui-react```
+```
+npm install (or yarn add) formsy-semantic-ui-react
+```
 
 You will also need formsy-react
 
-```npm install formsy-react```
+```
+npm install (or yarn add) formsy-react
+```
 
 ## Usage
-
-Using ES6 imports:
 ```js
-import {
-  Input,
-  TextArea,
-  Checkbox,
-  Radio,
-  RadioGroup,
-  Dropdown,
-  Select
-} from 'formsy-semantic-ui-react';
-```
+// ES6 imports
+import { Form, Input, TextArea, Checkbox,
+  Radio, RadioGroup, Dropdown, Select } from 'formsy-semantic-ui-react';
 
-ES5:
-```js
+// ES5
 var Input = require('formsy-semantic-ui-react').Input;
-```
+/** and so on for the rest of the Components **/
 
-## Validation
-
-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';
-import { Input } from 'formsy-semantic-ui-react';
-
-<Form
-  noValidate
-  onValidSubmit={ onSubmit }
-  onInvalidSubmit={ onInvalidSubmit }
->
-  <Input
-    name="email"
-    placeholder="Email"
-    icon="at"
-    iconPosition="left"
-    required
-    validations="isEmail"
-    validationErrors={{
-      isEmail: 'This is not a valid Email',
-      isDefaultRequiredValue: 'Email is required',
-    }}
-  />
-  </Form>
+const App = props => {
+  return (
+    <Form onValidSubmit={ onValidSubmit } loading={ props.isLoading }>
+      <Form.Input
+        name="email"
+        label="Email"
+        validations={isEmail}
+        validationErrors={{ isEmail: 'Not a valid email' }}
+      />
+    </Form>
+  )
+}
 ```
 
-### Displaying Error Messages
+## Props
+These props give you more control over behavior/markup
 
-You can quickly display error messages by passing a component to the ``` errorLabel ``` prop.
-Example: You can display Semaintic-UI-React's ``` <Label/> ``` compnent:
-```jsx
-<Checkbox
-  ...
-  errorLabel={ <Label basic color="orange" pointing="left"/> }
-/>
-```
-You can also pass in a custom component with the desired styles.
+| Prop | Description | Type | Default | Available on | Required |
+| ------ | ----------- | ------ | ------ | ------ | ------ |
+| ```errorLabel```| Used to Show input errors next to inputs. Any ```children``` get replaced by ```getErrorMessage()```  | ```string``` or ```class/func``` | ``none`` | All except ```Form``` | No
+| ```InstantValidation```   | Whether or not to show Validation Errors as soon as user starts interacting with input | ```bool```| ```false```| ```Input``` | No
 
+## Examples
+Go to the [example](/example) folder to see some examples of how the components are used.
+For more information on building and validating ```formsy-react``` forms, take a look at [Formsy-React's Dcoumentaion](https://github.com/christianalfoni/formsy-react/blob/master/API.md)
 
-## 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:
+To run the example app, clone this repo and run:
 ```
-npm install
-npm run example-app
+npm/yarn install
+npm/yarn run example-app
 ```
@@ -86,9 +62,9 @@ Then go to ```localhost:8080```
 ## Tests
-Tests are done using Mocha, chai and enzyme on jsdom.
+Tests are done using Mocha, chai, sinon, and enzyme on jsdom.
 To run the tests,
 ```
-npm install
-npm run test // or npm run test:watch
+npm/yarn install
+npm/yarn run test // or npm run test:watch
 ```
 
 License: [MIT](/LICENSE)

src/FormsyCheckbox.js

@@ -1,4 +0,5 @@
-import React, { Component, PropTypes, cloneElement } from 'react';
+import React, { Component, PropTypes, createElement, cloneElement } from 'react';
 import { Decorator as formsy } from 'formsy-react';
-import { Checkbox, Radio } from 'semantic-ui-react';
+import { Form, Checkbox, Radio } from 'semantic-ui-react';
+import { filterSuirElementProps } from './utils';
 
@@ -9,3 +10,3 @@ @formsy()
     name: PropTypes.string.isRequired,
-    as: PropTypes.oneOf(['checkbox', 'radio']),
+    as: PropTypes.oneOf([Form.Checkbox, Form.Radio, Checkbox, Radio]),
     defaultChecked: PropTypes.bool,
@@ -17,6 +18,2 @@ setValue: PropTypes.func.isRequired,
     required: PropTypes.bool,
-    rootClassName: PropTypes.string,
-    rootStyle: PropTypes.object,
-    className: PropTypes.string,
-    style: PropTypes.object,
     getErrorMessage: PropTypes.func.isRequired,
@@ -27,12 +24,12 @@ errorLabel: PropTypes.element,
   static defaultProps = {
-    as: 'checkbox',
+    as: Checkbox,
   }
 
   componentDidMount() {
-    if (this.props.defaultChecked) this.props.setValue(true);
+    const { defaultChecked, setValue } = this.props;
+    if (defaultChecked) setValue(true);
   }
 
-  handleChange(e, input) {
-    this.props.setValue(input.checked);
-    this.setState({ allowErrors: true });
+  handleChange(e, { checked }) {
+    this.props.setValue(checked);
   }
@@ -47,43 +44,24 @@
       getErrorMessage,
-      rootClassName,
-      rootStyle,
-      className,
-      style,
       getValue,
-      defaultChecked, // eslint-disable-line
-      setValidations, // eslint-disable-line
-      setValue, // eslint-disable-line
-      resetValue, // 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 props = {
+    const error = !isPristine() && !isValid();
+
+    const checkboxProps = {
       checked: getValue(),
       onChange: ::this.handleChange,
-      className: className,
-      style: style,
-      ...otherProps,
+      ...filterSuirElementProps(this.props),
     };
 
+    if (as === Form.Checkbox || as === Form.Radio) {
+      checkboxProps.error = error;
+    }
+
     return (
-      <div className={ rootClassName } style={ rootStyle }>
-        { cloneElement(as === 'checkbox' ? <Checkbox/> : <Radio/>, { ...props }) }
-        {
-          !isValid() && !isPristine() && errorLabel &&
-            cloneElement(errorLabel, { children: getErrorMessage() })
-        }
-      </div>
+      <Form.Field>
+        { createElement(as, { ...checkboxProps }) }
+        { error && errorLabel && cloneElement(errorLabel, {}, getErrorMessage()) }
+      </Form.Field>
     );
   }
 }

src/FormsyDropdown.js

@@ -1,4 +0,5 @@
-import React, { Component, PropTypes, cloneElement } from 'react';
+import React, { Component, PropTypes, createElement, cloneElement } from 'react';
 import { Decorator as formsy } from 'formsy-react';
-import { Dropdown, Select } from 'semantic-ui-react';
+import { Form, Dropdown, Select } from 'semantic-ui-react';
+import { filterSuirElementProps } from './utils';
 
@@ -9,7 +10,5 @@ @formsy()
     name: PropTypes.string.isRequired,
-    as: PropTypes.oneOf(['dropdown', 'select']),
-    isValid: PropTypes.func.isRequired,
-    isPristine: PropTypes.func.isRequired,
-    setValue: PropTypes.func.isRequired,
-    onBlur: PropTypes.func,
+    as: PropTypes.oneOf([
+      Dropdown, Select, Form.Dropdown, Form.Select,
+    ]),
     defaultValue: PropTypes.oneOfType([
@@ -23,11 +22,11 @@ PropTypes.number,
     ]),
+    errorLabel: PropTypes.element,
+    isValid: PropTypes.func.isRequired,
+    isPristine: PropTypes.func.isRequired,
+    setValue: PropTypes.func.isRequired,
+    onBlur: PropTypes.func,
     getValue: PropTypes.func.isRequired,
     multiple: PropTypes.bool,
-    errorLabel: PropTypes.element,
     isFormSubmitted: PropTypes.func.isRequired,
     getErrorMessage: PropTypes.func.isRequired,
-    rootClassName: PropTypes.string,
-    rootStyle: PropTypes.object,
-    className: PropTypes.string,
-    style: PropTypes.object,
     validationError: PropTypes.string,
@@ -41,3 +40,4 @@ validationErrors: PropTypes.object,
   static defaultProps = {
-    as: 'dropdown',
+    as: Dropdown,
+    rootElement: Form.Field,
   }
@@ -48,18 +48,18 @@
   componentDidMount() {
-    if (this.props.defaultValue) this.props.setValue(this.props.defaultValue);
+    const { defaultValue, setValue } = this.props;
+    if (defaultValue) setValue(defaultValue);
   }
 
-  componentWillReceiveProps() {
-    if (this.props.isFormSubmitted()) this.setState({ allowError: true });
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.isFormSubmitted()) this.showError();
   }
 
-  handleChange(e, input) {
-    this.props.setValue(input.value);
-    if (!this.props.multiple) this.setState({ allowError: true });
+  handleChange = (e, { value }) => {
+    const { multiple, getValue, setValue } = this.props;
+    if (multiple && getValue() && getValue().length > value.length) this.showError();
+    setValue(value);
   }
 
-  handleBlur = () => {
-    this.setState({ allowError: true });
-    if (this.props.onBlur) this.props.onBlur();
-  }
+  showError = () => this.setState({ allowError: true });
+  handleClose = () => this.showError();
 
@@ -69,55 +69,29 @@ render() {
       as,
-      isValid,
-      isPristine,
-      errorLabel,
-      getErrorMessage,
       getValue,
       defaultValue,
       multiple,
-      rootClassName,
-      rootStyle,
-      className,
-      style,
-      setValidations, // eslint-disable-line
-      setValue, // eslint-disable-line
-      resetValue, // 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,
+      errorLabel,
+      getErrorMessage,
+      isValid,
+      isPristine,
     } = this.props;
 
-    const { allowError } = this.state;
+    const error = !isPristine() && !isValid() && this.state.allowError;
 
-    const error = !isValid() && !isPristine() && allowError;
-
-    const props = {
-      onChange: ::this.handleChange,
-      value: getValue() || defaultValue || multiple && [] || '',
-      error: error,
-      className: className,
-      multiple: multiple,
+    const dropdownProps = {
+      onChange: this.handleChange,
       onBlur: this.handleBlur,
-      style: style,
-      ...otherProps,
+      onClose: this.handleClose,
+      value: getValue() || defaultValue || multiple && [],
+      error,
+      ...filterSuirElementProps(this.props),
     };
 
     return (
-      <div className={ rootClassName } style={ rootStyle }>
-        { cloneElement(as === 'dropdown' ? <Dropdown/> : <Select/>, { ...props }) }
-        {
-          error && errorLabel &&
-          cloneElement(errorLabel, { children: getErrorMessage() })
-        }
-      </div>
+      <Form.Field>
+        { createElement(as, { ...dropdownProps }) }
+        { error && errorLabel && cloneElement(errorLabel, {}, getErrorMessage()) }
+      </Form.Field>
     );
   }
 }

src/FormsyInput.js

@@ -1,5 +0,6 @@
-import React, { Component, PropTypes, cloneElement } from 'react';
+import React, { Component, PropTypes, createElement, cloneElement } from 'react';
 import { Decorator as formsy } from 'formsy-react';
-import { Input, TextArea } from 'semantic-ui-react';
+import { Form, Input, TextArea } from 'semantic-ui-react';
 import debounce from 'lodash.debounce';
+import { filterSuirElementProps } from './utils';
 
@@ -10,14 +11,13 @@ @formsy()
     name: PropTypes.string.isRequired,
+    as: PropTypes.oneOf([
+      Input, TextArea, Form.Input, Form.TextArea,
+    ]),
+    errorLabel: PropTypes.element,
+    instantValidation: PropTypes.bool,
+    defaultValue: PropTypes.string,
+    onBlur: PropTypes.func,
     isValid: PropTypes.func.isRequired,
-    as: PropTypes.oneOf(['input', 'textarea']),
     setValue: PropTypes.func.isRequired,
     getValue: PropTypes.func.isRequired,
     isPristine: PropTypes.func.isRequired,
-    defaultValue: PropTypes.string,
-    errorLabel: PropTypes.element,
-    onBlur: PropTypes.func,
-    rootClassName: PropTypes.string,
-    rootStyle: PropTypes.object,
-    inputClassName: PropTypes.string,
-    inputStyle: PropTypes.object,
     getErrorMessage: PropTypes.func.isRequired,
@@ -31,89 +31,59 @@ validationError: PropTypes.string,
 
-  static defaultProps = {
-    as: 'input',
-    defaultValue: '',
-  }
+  static defaultProps = { as: Input }
 
-  state = { allowError: false, currentValue: null };
+  state = { allowError: false, value: null };
 
   componentDidMount() {
-    this.setState({ currentValue: this.props.defaultValue });
-    this.props.setValue(this.props.defaultValue);
+    const { defaultValue, setValue } = this.props;
+    if (defaultValue) setValue(defaultValue);
   }
 
   componentWillReceiveProps(nextProps) {
-    if (nextProps.isFormSubmitted()) this.setState({ allowError: true });
-    if (nextProps.getValue() !== this.state.currentValue) {
-      this.setState({ currentValue: this.props.getValue() });
-    }
+    if (nextProps.isFormSubmitted()) this.showError();
+    this.setState({ value: this.props.getValue() });
   }
 
-  componentWillUpdate(nextProps) {
-    if (!this.props.isPristine() && nextProps.isPristine()) {
-      this.setState({ currentValue: this.props.getValue() });
-    }
-  }
-
   setInputValue = debounce(value => this.props.setValue(value), 100);
 
-  handleChange(e, { value }) {
-    this.setState({ currentValue: value });
+  handleChange = (e, { value }) => {
+    this.setState({ value });
     this.setInputValue(value);
+    if (this.props.instantValidation) this.showError();
   }
 
-  handleBlur() {
-    this.setState({ allowError: true });
+  handleBlur = () => {
+    this.showError();
     if (this.props.onBlur) this.props.onBlur();
   }
 
+  showError = () => this.setState({ allowError: true });
+
   render() {
     const {
       as,
+      defaultValue,
       isValid,
+      isPristine,
+      getErrorMessage,
       errorLabel,
-      getErrorMessage,
-      rootClassName,
-      rootStyle,
-      inputClassName,
-      inputStyle,
-      defaultValue,
-      isPristine,
-      getValue, // eslint-disable-line
-      setValidations, // eslint-disable-line
-      setValue, // eslint-disable-line
-      resetValue, // 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 { allowError, currentValue } = this.state;
-    const error = !isValid() && !isPristine() && allowError;
+    const { allowError, value } = this.state;
+    const error = !isPristine() && !isValid() && allowError;
 
-    const props = {
-      error: error,
-      onBlur: ::this.handleBlur,
-      onChange: ::this.handleChange,
-      className: inputClassName,
-      value: currentValue || (isPristine() && defaultValue) || '',
-      style: inputStyle,
-      ...otherProps,
+    const inputProps = {
+      value: value || isPristine() && defaultValue || '',
+      onChange: this.handleChange,
+      onBlur: this.handleBlur,
+      error,
+      ...filterSuirElementProps(this.props),
     };
 
     return (
-      <div className={ rootClassName } style={ rootStyle }>
-        { cloneElement(as === 'input' ? <Input/> : <TextArea/>, { ...props }) }
-        {error && errorLabel && cloneElement(errorLabel, { children: getErrorMessage() }) }
-      </div>
+      <Form.Field>
+        { createElement(as, { ...inputProps }) }
+        { error && errorLabel && cloneElement(errorLabel, {}, getErrorMessage()) }
+      </Form.Field>
     );
   }
 }

src/FormsyRadio.js

 import React from 'react';
 import Checkbox from './FormsyCheckbox';
-export default (props) => <Checkbox as="radio" { ...props }/>;
+import { Radio } from 'semantic-ui-react';
+export default (props) => <Checkbox as={ Radio } { ...props }/>;

src/FormsyRadioGroup.js

 import React, { Component, PropTypes, Children, cloneElement } from 'react';
 import { Decorator as formsy } from 'formsy-react';
+import { Form } from 'semantic-ui-react';
 
@@ -8,2 +9,5 @@ @formsy()
     name: PropTypes.string.isRequired,
+    formRadioGroup: PropTypes.bool,
+    required: PropTypes.bool,
+    label: PropTypes.string,
     setValue: PropTypes.func.isRequired,
@@ -16,4 +20,2 @@ getValue: PropTypes.func.isRequired,
     getErrorMessage: PropTypes.func.isRequired,
-    className: PropTypes.string,
-    style: PropTypes.object,
     children: PropTypes.node,
@@ -27,8 +29,13 @@ validationError: PropTypes.string,
 
+  static defaultProps = {
+    rootElement: Form.Field,
+  }
+
   componentDidMount() {
-    if (this.props.defaultSelected) this.props.setValue(this.props.defaultSelected);
+    const { defaultSelected, setValue } = this.props;
+    if (defaultSelected) setValue(defaultSelected);
   }
 
-  handleChange(e, { value }) {
-    this.props.setValue(value);
+  handleChange = (e, input) => {
+    this.props.setValue(input.value);
   }
@@ -38,2 +45,5 @@
     const {
+      label,
+      required,
+      formRadioGroup,
       children,
@@ -45,23 +55,23 @@ getValue,
       getErrorMessage,
-      className,
-      style,
     } = this.props;
 
-    const clonedChildren = Children.map(children, radio => {
-      return cloneElement(radio, {
-        checked: getValue() === radio.props.value,
-        onChange: ::this.handleChange,
-      });
-    });
+    const error = !isPristine() && !isValid();
+    const formFieldProps = { required, label, error };
 
     return (
-      <div className={ className } style={ style }>
-        { clonedChildren }
+      <Form.Group>
+        { label && <Form.Field { ...formFieldProps }/> }
         {
-          !isValid() && !isPristine() && errorLabel &&
-          cloneElement(errorLabel, { children: getErrorMessage() })
+          Children.map(children, radio => {
+            const props = {
+              checked: getValue() === radio.props.value,
+              onChange: this.handleChange,
+            }; if (formRadioGroup) props.error = error;
+            return cloneElement(radio, { ...props });
+          })
         }
-      </div>
+        { error && errorLabel && cloneElement(errorLabel, {}, getErrorMessage()) }
+      </Form.Group>
     );
   }
 }

src/FormsyTextArea.js

 import React from 'react';
 import Input from './FormsyInput';
-export default (props) => <Input as="textarea" { ...props }/>;
+import { TextArea } from 'semantic-ui-react';
+export default (props) => <Input as={ TextArea } { ...props }/>;

src/index.js

@@ -1,7 +0,8 @@
-export { default as Input } from './FormsyInput';
-export { default as TextArea } from './FormsyTextArea';
-export { default as Checkbox } from './FormsyCheckbox';
-export { default as Radio } from './FormsyRadio';
-export { default as RadioGroup } from './FormsyRadioGroup';
-export { default as Select } from './FormsySelect';
-export { default as Dropdown } from './FormsyDropdown';
+export Form from './Form';
+export Input from './FormsyInput';
+export TextArea from './FormsyTextArea';
+export Checkbox from './FormsyCheckbox';
+export Radio from './FormsyRadio';
+export RadioGroup from './FormsyRadioGroup';
+export Select from './FormsySelect';
+export Dropdown from './FormsyDropdown';

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

Lines of code

2102

increased by17.04%

Worsened metrics

Total package byte prevSize

241580

decreased by-88.6%

Number of package files

44

decreased by-4.35%

Number of lines in readme file

70

decreased by-25.53%

No dependency changes