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

Comparing version 0.1.3 to 0.1.4

example/App.js

 import React, { Component } from 'react';
 import { Form } from 'formsy-react';
-import { Button, Label } from 'semantic-ui-react';
+import { Button, Label, Divider } from 'semantic-ui-react';
 import { Input, Checkbox, Radio, RadioGroup, Dropdown } from '../src/';
@@ -150,16 +150,15 @@
 
-            <br/>
+            <Divider/>
             <Button
-              type="submit"
               content="Submit"
               style={ styles.formElement }
-              size="big"
               color="orange"
             />
+            <Button
+              type="button"
+              onClick={ () => this.form.reset() }
+              content="Reset"
+              color="black"
+            />
           </Form>
-          <Button
-            onClick={ () => this.form.reset() }
-            content="Reset"
-            color="black"
-          />
         </div>
@@ -166,0 +165,0 @@ </div>

example/webpack.config.js

 const webpack = require('webpack');
 const path = require('path');
 
-const PATHS = {
-  node_modules: path.resolve(__dirname, 'node_modules'),
-  src: path.resolve(__dirname, 'src'),
-  app: path.join(__dirname, 'src/app/index.js'),
-  dist: path.resolve(__dirname, 'dist'),
-};
-
-const config = {
+module.exports = {
   entry: [
@@ -27,3 +20,3 @@ 'webpack/hot/dev-server',
   output: {
-    path: PATHS.dist,
+    path: path.resolve(__dirname, 'dist'),
     filename: 'bundle.js',
@@ -33,7 +26,3 @@ },
   plugins: [
-    new webpack.DefinePlugin({
-      'process.env': {
-        'NODE_ENV': JSON.stringify('development'),
-      },
-    }),
+    new webpack.DefinePlugin({ 'process.env': { 'NODE_ENV': JSON.stringify('production') } }),
     new webpack.NoErrorsPlugin(),
@@ -44,12 +33,8 @@ new webpack.HotModuleReplacementPlugin(),
   module: {
-    loaders: [
-      {
-        test: /\.js$/,
-        loaders: ['react-hot', 'babel-loader'],
-        exclude: [path.resolve(__dirname, 'node_modules')],
-      },
-    ],
+    loaders: [{
+      test: /\.js$/,
+      loaders: ['react-hot', 'babel-loader'],
+      exclude: [path.resolve(__dirname, 'node_modules')],
+    }],
   },
 };
-
-module.exports = config;

lib/FormsyDropdown.js

@@ -60,2 +60,3 @@ 'use strict';
             getErrorMessage = _props.getErrorMessage,
+            getValue = _props.getValue,
             rootClassName = _props.rootClassName,
@@ -68,3 +69,2 @@ rootStyle = _props.rootStyle,
             resetValue = _props.resetValue,
-            getValue = _props.getValue,
             hasValue = _props.hasValue,
@@ -81,3 +81,3 @@ getErrorMessages = _props.getErrorMessages,
             validationErrors = _props.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']);
+            otherProps = _objectWithoutProperties(_props, ['as', 'isValid', 'isPristine', 'errorLabel', 'getErrorMessage', 'getValue', 'rootClassName', 'rootStyle', 'className', 'style', 'setValidations', 'setValue', 'resetValue', 'hasValue', 'getErrorMessages', 'isFormDisabled', 'isFormSubmitted', 'isRequired', 'showRequired', 'showError', 'isValidValue', 'validations', 'validationError', 'validationErrors']);
 
@@ -88,2 +88,3 @@ var error = !isValid() && !isPristine();
           onChange: this.handleChange.bind(this),
+          value: getValue() || '',
           error: error,
@@ -113,2 +114,3 @@ className: className,
   setValue: _react.PropTypes.func.isRequired,
+  getValue: _react.PropTypes.func.isRequired,
   errorLabel: _react.PropTypes.element,
@@ -115,0 +117,0 @@ getErrorMessage: _react.PropTypes.func.isRequired,

lib/FormsyInput.js

@@ -98,6 +98,6 @@ 'use strict';
             inputStyle = _props.inputStyle,
+            getValue = _props.getValue,
             setValidations = _props.setValidations,
             setValue = _props.setValue,
             resetValue = _props.resetValue,
-            getValue = _props.getValue,
             hasValue = _props.hasValue,
@@ -115,3 +115,3 @@ getErrorMessages = _props.getErrorMessages,
             validationErrors = _props.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']);
+            otherProps = _objectWithoutProperties(_props, ['as', 'isValid', 'errorLabel', 'getErrorMessage', 'rootClassName', 'rootStyle', 'inputClassName', 'inputStyle', 'getValue', 'setValidations', 'setValue', 'resetValue', 'hasValue', 'getErrorMessages', 'isFormDisabled', 'isPristine', 'isFormSubmitted', 'isRequired', 'showRequired', 'showError', 'isValidValue', 'validations', 'validationError', 'validationErrors']);
 
@@ -126,4 +126,4 @@ var allowError = this.state.allowError;
           onChange: this.handleChange.bind(this),
+          className: inputClassName,
           value: getValue() || '',
-          className: inputClassName,
           style: inputStyle
@@ -130,0 +130,0 @@ }, otherProps);

package.json

 {
   "name": "formsy-semantic-ui-react",
-  "version" : "0.1.3",
+  "version" : "0.1.4",
   "description": "Formsy wrappers for Semantic-Ui-React form elements",
@@ -48,2 +48,3 @@ "repository" : {
     "bundle-loader": "^0.5.4",
+    "react-hot-loader": "1.3.1",
     "chai": "^3.5.0",
@@ -50,0 +51,0 @@ "enzyme": "^2.4.1",

README.md

@@ -61,3 +61,3 @@ # 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)
 
-To display error messages, pass an element through the ``` errorLabel ``` prop.
+You can quickly display error messages by passing an element to the ``` errorLabel ``` prop.
 
@@ -74,16 +74,10 @@ Example: You can display Semaintic-UI-React's ``` <Label/> ``` compnent:
 
+
 ## 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
-```
+``` npm install ``` & ``` npm run example-app ``` Then go to  ```localhost:8080 ```
 
 ## Tests
 Tests are done using Mocha, chai and enzyme on jsdom.
-
 To run the tests,
@@ -93,7 +87,5 @@ ```
 ```
-then
+then ``` npm run test ``` or ``` npm run test:watch ``` for single-run or watch-mode, respectively.
 
-``` npm run test ``` or ``` npm run test:watch ``` for single-run or watch-mode, respectively.
 
-
 License: [MIT](/LICENSE)

src/FormsyDropdown.js

@@ -13,2 +13,3 @@ import React, { Component, PropTypes, cloneElement } from 'react';
     setValue: PropTypes.func.isRequired,
+    getValue: PropTypes.func.isRequired,
     errorLabel: PropTypes.element,
@@ -42,2 +43,3 @@ getErrorMessage: PropTypes.func.isRequired,
       getErrorMessage,
+      getValue,
       rootClassName,
@@ -50,3 +52,2 @@ rootStyle,
       resetValue, // eslint-disable-line
-      getValue, // eslint-disable-line
       hasValue, // eslint-disable-line
@@ -70,2 +71,3 @@ getErrorMessages, // eslint-disable-line
       onChange: ::this.handleChange,
+      value: getValue() || '',
       error: error,
@@ -72,0 +74,0 @@ className: className,

src/FormsyInput.js

@@ -59,6 +59,6 @@ import React, { Component, PropTypes, cloneElement } from 'react';
       inputStyle,
+      getValue,
       setValidations, // eslint-disable-line
       setValue, // eslint-disable-line
       resetValue, // eslint-disable-line
-      getValue,
       hasValue, // eslint-disable-line
@@ -86,4 +86,4 @@ getErrorMessages, // eslint-disable-line
       onChange: ::this.handleChange,
+      className: inputClassName,
       value: getValue() || '',
-      className: inputClassName,
       style: inputStyle,
@@ -90,0 +90,0 @@ ...otherProps,

test/FormsyCheckbox.spec.js

@@ -9,2 +9,4 @@ import React from 'react';
 const validationError = 'Please check this';
+const errorLabel = <div className="error-label"/>;
+
 const TestForm = () => {
@@ -16,3 +18,3 @@ return (
         validations="isTrue"
-        errorLabel={ <div className="error-label"/> }
+        errorLabel={ errorLabel }
         validationErrors = {{
@@ -50,2 +52,7 @@ isTrue: validationError,
 
+    it('Shows the errorLabel component passed to it', () => {
+      submitForm();
+      assert.ok(wrapper.find(errorLabel));
+    });
+
     it('Shows error text when form is submitted', () => {
@@ -52,0 +59,0 @@ submitForm();

test/FormsyDropdown.spec.js

@@ -9,2 +9,4 @@ import React from 'react';
 const validationError = 'Please select something';
+const errorLabel = <div className="error-label"/>;
+
 const TestForm = () => {
@@ -28,3 +30,3 @@ return (
         required
-        errorLabel={ <div className="error-label"/> }
+        errorLabel={ errorLabel }
         validationErrors = {{
@@ -61,2 +63,7 @@ isDefaultRequiredValue: validationError,
 
+    it('Shows the errorLabel component passed to it', () => {
+      submitForm();
+      assert.ok(wrapper.find(errorLabel));
+    });
+
     it('Shows error text when form is submitted', () => {
@@ -63,0 +70,0 @@ submitForm();

test/FormsyInput.spec.js

@@ -11,2 +11,3 @@ import React from 'react';
 const validationError = 'This is not a valid email';
+const errorLabel = <div className="error-label"/>;
 
@@ -19,3 +20,3 @@ const TestForm = () => {
         validations="isEmail"
-        errorLabel={ <div className="error-label"/> }
+        errorLabel={ errorLabel }
         validationErrors = {{
@@ -51,3 +52,2 @@ isEmail: validationError,
       assert.notOk(input.props().isValid());
-      assert.notOk(input.find('Input').props().error);
       assert.equal(wrapper.find('.error-label').length, 0);
@@ -59,8 +59,16 @@ });
       assert.equal(wrapper.find('.error-label').length, 1);
-      assert.equal(wrapper.find('.error-label').props().children, validationError);
     });
 
+    it('Shows the errorLabel component passed to it', () => {
+      submitForm();
+      assert.ok(wrapper.find(errorLabel));
+    });
+
     it('Shows error when user clicks away', () => {
       input.find('Input').props().onBlur();
       assert.equal(wrapper.find('.error-label').length, 1);
+    });
+
+    it('Shows error text passed to it', () => {
+      submitForm();
       assert.equal(wrapper.find('.error-label').props().children, validationError);
@@ -75,3 +83,2 @@ });
       assert.ok(input.props().isValid());
-      assert.notOk(input.find('Input').props().error);
       assert.equal(wrapper.find('.error-label').length, 0);
@@ -83,3 +90,2 @@ });
       assert.ok(input.props().isValid());
-      assert.notOk(input.find('Input').props().error);
       assert.equal(wrapper.find('.error-label').length, 0);
@@ -86,0 +92,0 @@ });

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

1412723

increased by0.02%

Lines of code

1261

increased by0.32%

Worsened metrics

Dev dependency count

29

increased by3.57%

Number of lines in readme file

89

decreased by-8.25%

No dependency changes