mki-formsy-react - npm Package Compare versions

Comparing version 0.20.0 to 0.21.0

API.md

 # API
 
-- [Formsy.defaults - DEPRECATED](#formsydefaults)
 - [Formsy.Form](#formsyform)
@@ -27,3 +26,2 @@ - [className](#classname)
   - [setValue()](#setvalue)
-  - [hasValue() - DEPRECATED](#hasvalue)
   - [resetValue()](#resetvalue)
@@ -46,4 +44,2 @@ - [getErrorMessage()](#geterrormessage)
 
-### <a name="formsydefaults">Formsy.defaults(options) - DEPRECATED</a>
-
 ### <a name="formsyform">Formsy.Form</a>
@@ -327,21 +323,2 @@
 
-#### <a name="hasvalue">hasValue() - DEPRECATED</a>
-```jsx
-var MyInput = React.createClass({
-  mixins: [Formsy.Mixin],
-  changeValue: function (event) {
-    this.setValue(event.currentTarget.value);
-  },
-  render: function () {
-    return (
-      <div>
-        <input type="text" onChange={this.changeValue} value={this.getValue()}/>
-        {this.hasValue() ? 'There is a value here' : 'No value entered yet'}
-      </div>
-    );
-  }
-});
-```
-The hasValue() method helps you identify if there actually is a value or not. The only invalid value in Formsy is an empty string, "". All other values are valid as they could be something you want to send to the server. F.ex. the number zero (0), or false.
-
 #### <a name="resetvalue">resetValue()</a>
@@ -769,3 +746,4 @@ ```jsx
 ```
-Return true if the value is more or equal to argument
+Return true if the value is more or equal to argument.
+**Also returns true for an empty value.** If you want to get false, then you should use [`required`](#required) additionally.
 
@@ -772,0 +750,0 @@ **maxLength:length**

lib/main.js

@@ -5,2 +5,4 @@ 'use strict';
 
+var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof 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; }
@@ -95,3 +97,3 @@
 
-    if (this.props.validationErrors && typeof this.props.validationErrors === 'object' && Object.keys(this.props.validationErrors).length > 0) {
+    if (this.props.validationErrors && _typeof(this.props.validationErrors) === 'object' && Object.keys(this.props.validationErrors).length > 0) {
       this.setInputValidationErrors(this.props.validationErrors);
@@ -133,3 +135,3 @@ }
     } else {
-      return formDataToObject(Object.keys(model).reduce(function (mappedModel, key) {
+      return formDataToObject.toObj(Object.keys(model).reduce(function (mappedModel, key) {
 
@@ -157,3 +159,3 @@ var keyArray = key.split('.');
       var name = component.props.name;
-      if (data && data[name]) {
+      if (data && data.hasOwnProperty(name)) {
         component.setValue(data[name]);
@@ -282,3 +284,3 @@ } else {
       isValid: isRequired ? false : isValid,
-      error: (function () {
+      error: function () {
 
@@ -310,3 +312,3 @@ if (isValid && !isRequired) {
         }
-      }).call(this)
+      }.call(this)
     };
@@ -369,3 +371,3 @@ },
     // run when the last component has set its state
-    var onValidationComplete = (function () {
+    var onValidationComplete = function () {
       var allIsValid = this.inputs.every(function (component) {
@@ -389,3 +391,3 @@ return component.state._isValid;
       });
-    }).bind(this);
+    }.bind(this);
 
@@ -392,0 +394,0 @@ // Run validation again in case affected by other inputs. The

lib/Mixin.js

@@ -62,3 +62,3 @@ 'use strict';
   componentWillMount: function componentWillMount() {
-    var configure = (function () {
+    var configure = function () {
       this.setValidations(this.props.validations, this.props.required);
@@ -69,3 +69,3 @@
       //this.props._attachToForm(this);
-    }).bind(this);
+    }.bind(this);
 
@@ -127,6 +127,6 @@ if (!this.props.name) {
       _isPristine: false
-    }, (function () {
+    }, function () {
       this.context.formsy.validate(this);
       //this.props._validate(this);
-    }).bind(this));
+    }.bind(this));
   },
@@ -133,0 +133,0 @@ resetValue: function resetValue() {

lib/utils.js

 'use strict';
 
+var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj; };
+
 module.exports = {
@@ -33,7 +35,7 @@ arraysDiffer: function arraysDiffer(a, b) {
   isSame: function isSame(a, b) {
-    if (typeof a !== typeof b) {
+    if ((typeof a === 'undefined' ? 'undefined' : _typeof(a)) !== (typeof b === 'undefined' ? 'undefined' : _typeof(b))) {
       return false;
     } else if (Array.isArray(a)) {
       return !this.arraysDiffer(a, b);
-    } else if (typeof a === 'object' && a !== null && b !== null) {
+    } else if ((typeof a === 'undefined' ? 'undefined' : _typeof(a)) === 'object' && a !== null && b !== null) {
       return !this.objectsDiffer(a, b);
@@ -40,0 +42,0 @@ }

package.json

 {
   "name": "mki-formsy-react",
-  "version": "0.20.0",
+  "version": "0.21.0",
   "description": "A form input builder and validator for React JS",
@@ -11,3 +11,2 @@ "repository": {
   "scripts": {
-    "start": "webpack-dev-server --content-base build",
     "deploy": "NODE_ENV=production webpack -p --config webpack.production.config.js",
@@ -32,22 +31,23 @@ "test": "babel-node testrunner",
   "dependencies": {
-    "form-data-to-object": "^0.1.0"
+    "form-data-to-object": "^0.2.0"
   },
   "devDependencies": {
-    "babel": "^5.6.4",
-    "babel-core": "^5.1.11",
-    "babel-loader": "^5.0.0",
+    "babel-cli": "^6.6.5",
+    "babel-loader": "^6.2.4",
+    "babel-preset-es2015": "^6.6.0",
+    "babel-preset-react": "^6.5.0",
+    "babel-preset-stage-2": "^6.5.0",
     "jsdom": "^6.5.1",
-    "lolex": "^1.3.2",
     "nodeunit": "^0.9.1",
-    "react": "^0.14.7",
-    "react-addons-pure-render-mixin": "^0.14.7",
-    "react-addons-test-utils": "^0.14.7",
-    "react-dom": "^0.14.7",
-    "sinon": "^1.17.1",
-    "webpack": "^1.7.3",
-    "webpack-dev-server": "^1.7.0"
+    "react": "^15.0.0",
+    "react-addons-pure-render-mixin": "^15.0.0",
+    "react-addons-test-utils": "^15.0.0",
+    "react-dom": "^15.0.0",
+    "sinon": "^1.17.3",
+    "webpack": "^1.12.14",
+    "webpack-dev-server": "^1.14.1"
   },
   "peerDependencies": {
-    "react": "^0.14.7"
+    "react": "^0.14.0 || ^15.0.0"
   }
 }

README.md

@@ -9,4 +9,2 @@ mki-formsy-react  [![GitHub release](https://img.shields.io/npm/v/mki-formsy-react.svg)](https://www.npmjs.com/package/mki-formsy-react)
 
-### From version 0.12.0 Formsy only supports React 0.13.1 and up
-
 ## <a name="background">Background</a>
@@ -52,7 +50,7 @@ I wrote an article on forms and validation with React JS, [Nailing that validation with React JS](http://christianalfoni.github.io/javascript/2014/10/22/nailing-that-validation-with-reactjs.html), the result of that was this extension.
 
-```javascript
-  /** @jsx React.DOM */
-  var Formsy = require('formsy-react');
-  var MyAppForm = React.createClass({
-    getInitialState: function () {
+```jsx
+  import Formsy from 'formsy-react';
+
+  const MyAppForm = React.createClass({
+    getInitialState() {
       return {
@@ -62,3 +60,3 @@ canSubmit: false
     },
-    enableButton: function () {
+    enableButton() {
       this.setState({
@@ -68,3 +66,3 @@ canSubmit: true
     },
-    disableButton: function () {
+    disableButton() {
       this.setState({
@@ -74,6 +72,6 @@ canSubmit: false
     },
-    submit: function (model) {
+    submit(model) {
       someDep.saveEmail(model.email);
     },
-    render: function () {
+    render() {
       return (
@@ -92,7 +90,7 @@ <Formsy.Form onValidSubmit={this.submit} onValid={this.enableButton} onInvalid={this.disableButton}>
 #### Building a form element (required)
-```javascript
-  /** @jsx React.DOM */
-  var Formsy = require('formsy-react');
-  var MyOwnInput = React.createClass({
+```jsx
+  import Formsy from 'formsy-react';
 
+  const MyOwnInput = React.createClass({
+
     // Add the Formsy Mixin
@@ -103,7 +101,7 @@ mixins: [Formsy.Mixin],
     // turn will validate it and the rest of the form
-    changeValue: function (event) {
+    changeValue(event) {
       this.setValue(event.currentTarget.value);
     },
-    render: function () {
 
+    render() {
       // Set a specific className based on the validation
@@ -114,7 +112,7 @@ // state of this component. showRequired() is true
       // value typed is invalid
-      var className = this.showRequired() ? 'required' : this.showError() ? 'error' : null;
+      const className = this.showRequired() ? 'required' : this.showError() ? 'error' : null;
 
       // An error message is returned ONLY if the component is invalid
       // or the server has returned an error message
-      var errorMessage = this.getErrorMessage();
+      const errorMessage = this.getErrorMessage();
 
@@ -141,30 +139,7 @@ return (
 - `npm install`
-- `npm start` runs the development server on `localhost:8080`
+- `npm run examples` runs the development server on `localhost:8080`
 - `npm test` runs the tests
 
-License
--------
+## License
 
-formsy-react is licensed under the [MIT license](LICENSE).
-
-> The MIT License (MIT)
->
-> Copyright (c) 2015 Gloppens EDB Lag
->
-> Permission is hereby granted, free of charge, to any person obtaining a copy
-> of this software and associated documentation files (the "Software"), to deal
-> in the Software without restriction, including without limitation the rights
-> to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-> copies of the Software, and to permit persons to whom the Software is
-> furnished to do so, subject to the following conditions:
->
-> The above copyright notice and this permission notice shall be included in
-> all copies or substantial portions of the Software.
->
-> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-> IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-> FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-> AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-> LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-> OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-> THE SOFTWARE.
+[MIT](/LICENSE)

src/main.js

@@ -121,3 +121,3 @@ var React = global.React || require('react');
     } else {
-      return formDataToObject(Object.keys(model).reduce((mappedModel, key) => {
+      return formDataToObject.toObj(Object.keys(model).reduce((mappedModel, key) => {
 
@@ -146,3 +146,3 @@ var keyArray = key.split('.');
       var name = component.props.name;
-      if (data && data[name]) {
+      if (data && data.hasOwnProperty(name)) {
         component.setValue(data[name]);
@@ -149,0 +149,0 @@ } else {

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Number of low quality alerts

2

decreased by-50%

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

90966

decreased by-70.94%

Dev dependency count

14

increased by7.69%

Number of package files

19

decreased by-71.21%

Lines of code

1489

decreased by-66.7%

Number of lines in readme file

137

decreased by-15.43%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedcreate-react-class@15.7.0(transitive)

• + Addedencoding@0.1.13(transitive)

• + Addedfbjs@0.8.18(transitive)

• + Addedform-data-to-object@0.2.0(transitive)

• + Addediconv-lite@0.6.3(transitive)

• + Addedis-stream@1.1.0(transitive)

• + Addedisomorphic-fetch@2.2.1(transitive)

• + Addednode-fetch@1.7.3(transitive)

• + Addedobject-assign@4.1.1(transitive)

• + Addedprop-types@15.8.1(transitive)

• + Addedreact@15.7.0(transitive)

• + Addedreact-is@16.13.1(transitive)

• + Addedsetimmediate@1.0.5(transitive)

• + Addedwhatwg-fetch@3.6.20(transitive)

• - Removedacorn@5.7.4(transitive)

• - Removedamdefine@1.0.1(transitive)

• - Removedast-types@0.9.6(transitive)

• - Removedbalanced-match@1.0.2(transitive)

• - Removedbase62@1.2.8(transitive)

• - Removedbrace-expansion@1.1.11(transitive)

• - Removedcommander@2.20.3(transitive)

• - Removedcommoner@0.10.8(transitive)

• - Removedconcat-map@0.0.1(transitive)

• - Removeddefined@1.0.1(transitive)

• - Removeddetective@4.7.1(transitive)

• - Removedenvify@3.4.1(transitive)

• - Removedesprima@3.1.3(transitive)

• - Removedesprima-fb@15001.1.0-dev-harmony-fb(transitive)

• - Removedfbjs@0.6.1(transitive)

• - Removedform-data-to-object@0.1.0(transitive)

• - Removedglob@5.0.15(transitive)

• - Removedgraceful-fs@4.2.11(transitive)

• - Removediconv-lite@0.4.24(transitive)

• - Removedinflight@1.0.6(transitive)

• - Removedinherits@2.0.4(transitive)

• - Removedjstransform@11.0.3(transitive)

• - Removedminimatch@3.1.2(transitive)

• - Removedminimist@1.2.8(transitive)

• - Removedmkdirp@0.5.6(transitive)

• - Removedobject-assign@2.1.1(transitive)

• - Removedonce@1.4.0(transitive)

• - Removedpath-is-absolute@1.0.1(transitive)

• - Removedprivate@0.1.8(transitive)

• - Removedq@1.5.1(transitive)

• - Removedreact@0.14.10(transitive)

• - Removedrecast@0.11.23(transitive)

• - Removedsource-map@0.4.40.5.7(transitive)

• - Removedthrough@2.3.8(transitive)

• - Removedwhatwg-fetch@0.9.0(transitive)

• - Removedwrappy@1.0.2(transitive)

• Updatedform-data-to-object@^0.2.0