basic-react-form - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

commonjs/actions.js

@@ -56,18 +56,13 @@ "use strict";
 
-// The user edits field value.
-var updateFieldValue = exports.updateFieldValue = function updateFieldValue(field, value, error) {
+// Manually set field value.
+// (e.g. `this.form.set(field, value)`).
+var setFieldValue = exports.setFieldValue = function setFieldValue(field, value) {
 	return function (state) {
 		state.values[field] = value;
-		state.errors[field] = error;
-		// The user is currently editing this field
-		// so don't show the validation error yet.
-		state.indicateInvalid[field] = false;
 	};
 };
 
-// Manually set field value.
-// (e.g. `this.form.set(field, value)`).
-var setFieldValue = exports.setFieldValue = function setFieldValue(field, value, error) {
+// Manually set field `error`.
+var setFieldError = exports.setFieldError = function setFieldError(field, error) {
 	return function (state) {
-		state.values[field] = value;
 		state.errors[field] = error;
@@ -84,8 +79,2 @@ state.indicateInvalid[field] = error ? true : false;
 
-var setFieldIndicateInvalid = exports.setFieldIndicateInvalid = function setFieldIndicateInvalid(field, indicateInvalid) {
-	return function (state) {
-		state.indicateInvalid[field] = indicateInvalid;
-	};
-};
-
 var resetFormInvalidIndication = exports.resetFormInvalidIndication = function resetFormInvalidIndication() {
@@ -92,0 +81,0 @@ return function (state) {

commonjs/field.js

@@ -32,5 +32,5 @@ 'use strict';
 
-var _createRef = require('./createRef');
+var _reactCreateRef = require('react-create-ref');
 
-var _createRef2 = _interopRequireDefault(_createRef);
+var _reactCreateRef2 = _interopRequireDefault(_reactCreateRef);
 
@@ -75,3 +75,3 @@ var _form = require('./form');
 
-		return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = FormField.__proto__ || Object.getPrototypeOf(FormField)).call.apply(_ref, [this].concat(args))), _this), _this.field = (0, _createRef2.default)(), _this.onChange = function (event) {
+		return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = FormField.__proto__ || Object.getPrototypeOf(FormField)).call.apply(_ref, [this].concat(args))), _this), _this.field = (0, _reactCreateRef2.default)(), _this.onChange = function (event) {
 			var _this$props = _this.props,
@@ -93,3 +93,4 @@ context = _this$props.context,
 
-			context.dispatch((0, _actions.updateFieldValue)(name, value, _this.validate(value)));
+			context.dispatch((0, _actions.setFieldValue)(name, value));
+			context.dispatch((0, _actions.setFieldError)(name, undefined));
 
@@ -118,4 +119,6 @@ if (onChange) {
 
-			if (context.errors[name]) {
-				context.dispatch((0, _actions.setFieldIndicateInvalid)(name, true));
+			var error = _this.validate(context.values[name]);
+
+			if (error) {
+				context.dispatch((0, _actions.setFieldError)(name, error));
 			}
@@ -233,3 +236,3 @@
 					if (value !== prevProps.value && !this.hasBeenEdited) {
-						context.dispatch((0, _actions.updateFieldValue)(name, value, this.validate(value)));
+						context.dispatch((0, _actions.setFieldValue)(name, value));
 					}
@@ -250,3 +253,3 @@
 		key: 'showOrHideExternallySetError',
-		value: function showOrHideExternallySetError() {
+		value: function showOrHideExternallySetError(error) {
 			var _this2 = this;
@@ -260,3 +263,2 @@
 			var value = context.values[name];
-			var error = context.errors[name];
 			var indicateInvalid = context.indicateInvalid[name];
@@ -266,3 +268,3 @@
 			if (error && !indicateInvalid) {
-				context.dispatch((0, _actions.setFieldIndicateInvalid)(name, true));
+				context.dispatch((0, _actions.setFieldError)(name, error));
 
@@ -293,3 +295,3 @@ // Scroll to field and focus after React rerenders the component.
 			else if (!error && indicateInvalid && !this.validate(value)) {
-					context.dispatch((0, _actions.setFieldIndicateInvalid)(name, false));
+					context.dispatch((0, _actions.setFieldError)(name, undefined));
 				}
@@ -315,23 +317,2 @@ }
 
-			// If the form validation doesn't pass
-			// then don't show externally set `error` property for this field
-			// (reset the `error` to the form validation one),
-			// i.e. the user must first correct the form field values
-			// so that the form validation passes
-			// and after that can he resubmit the form
-			// and deal with those externally set `error`s.
-			//
-			// (`indicateInvalid` is set to `true`
-			//  the moment `error` property is set externally;
-			//  this is achieved using "when component props change" hook)
-			//
-			if (indicateInvalid && !context.valid) {
-				error = this.validate(value);
-				indicateInvalid = error ? true : false;
-			}
-			// Else, don't override the externally set `error` (if it has been set).
-			else {
-					error = error || this.validate(value);
-				}
-
 			return _react2.default.createElement(component, _extends({}, (0, _utility.getPassThroughProps)(this.props, FormField.propTypes), {
@@ -338,0 +319,0 @@ ref: isStateless(component) ? undefined : this.field,

commonjs/form.js

@@ -204,3 +204,4 @@ 'use strict';
 		_this.set = function (field, value) {
-			return _this.dispatch((0, _actions.setFieldValue)(field, value, _this.fields[field].validate(value, _this.props.values)));
+			_this.dispatch((0, _actions.setFieldValue)(field, value));
+			_this.dispatch((0, _actions.setFieldError)(field, _this.fields[field].validate(value)));
 		};
@@ -392,3 +393,3 @@
 					// so that `errors` is updated inside form state.
-					// (if it's mounted)
+					// (if the field is still mounted)
 					if (fields[_field]) {
@@ -399,5 +400,2 @@ this.set(_field, values[_field]);
 
-				// Indicate that the field is invalid.
-				this.dispatch((0, _actions.setFieldIndicateInvalid)(field, true));
-
 				// Scroll to the invalid field.
@@ -404,0 +402,0 @@ this.scroll(field);

modules/actions.js

@@ -56,18 +56,13 @@ "use strict";
 
-// The user edits field value.
-var updateFieldValue = exports.updateFieldValue = function updateFieldValue(field, value, error) {
+// Manually set field value.
+// (e.g. `this.form.set(field, value)`).
+var setFieldValue = exports.setFieldValue = function setFieldValue(field, value) {
 	return function (state) {
 		state.values[field] = value;
-		state.errors[field] = error;
-		// The user is currently editing this field
-		// so don't show the validation error yet.
-		state.indicateInvalid[field] = false;
 	};
 };
 
-// Manually set field value.
-// (e.g. `this.form.set(field, value)`).
-var setFieldValue = exports.setFieldValue = function setFieldValue(field, value, error) {
+// Manually set field `error`.
+var setFieldError = exports.setFieldError = function setFieldError(field, error) {
 	return function (state) {
-		state.values[field] = value;
 		state.errors[field] = error;
@@ -84,8 +79,2 @@ state.indicateInvalid[field] = error ? true : false;
 
-var setFieldIndicateInvalid = exports.setFieldIndicateInvalid = function setFieldIndicateInvalid(field, indicateInvalid) {
-	return function (state) {
-		state.indicateInvalid[field] = indicateInvalid;
-	};
-};
-
 var resetFormInvalidIndication = exports.resetFormInvalidIndication = function resetFormInvalidIndication() {
@@ -92,0 +81,0 @@ return function (state) {

modules/field.js

@@ -32,5 +32,5 @@ 'use strict';
 
-var _createRef = require('./createRef');
+var _reactCreateRef = require('react-create-ref');
 
-var _createRef2 = _interopRequireDefault(_createRef);
+var _reactCreateRef2 = _interopRequireDefault(_reactCreateRef);
 
@@ -75,3 +75,3 @@ var _form = require('./form');
 
-		return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = FormField.__proto__ || Object.getPrototypeOf(FormField)).call.apply(_ref, [this].concat(args))), _this), _this.field = (0, _createRef2.default)(), _this.onChange = function (event) {
+		return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = FormField.__proto__ || Object.getPrototypeOf(FormField)).call.apply(_ref, [this].concat(args))), _this), _this.field = (0, _reactCreateRef2.default)(), _this.onChange = function (event) {
 			var _this$props = _this.props,
@@ -93,3 +93,4 @@ context = _this$props.context,
 
-			context.dispatch((0, _actions.updateFieldValue)(name, value, _this.validate(value)));
+			context.dispatch((0, _actions.setFieldValue)(name, value));
+			context.dispatch((0, _actions.setFieldError)(name, undefined));
 
@@ -118,4 +119,6 @@ if (onChange) {
 
-			if (context.errors[name]) {
-				context.dispatch((0, _actions.setFieldIndicateInvalid)(name, true));
+			var error = _this.validate(context.values[name]);
+
+			if (error) {
+				context.dispatch((0, _actions.setFieldError)(name, error));
 			}
@@ -233,3 +236,3 @@
 					if (value !== prevProps.value && !this.hasBeenEdited) {
-						context.dispatch((0, _actions.updateFieldValue)(name, value, this.validate(value)));
+						context.dispatch((0, _actions.setFieldValue)(name, value));
 					}
@@ -250,3 +253,3 @@
 		key: 'showOrHideExternallySetError',
-		value: function showOrHideExternallySetError() {
+		value: function showOrHideExternallySetError(error) {
 			var _this2 = this;
@@ -260,3 +263,2 @@
 			var value = context.values[name];
-			var error = context.errors[name];
 			var indicateInvalid = context.indicateInvalid[name];
@@ -266,3 +268,3 @@
 			if (error && !indicateInvalid) {
-				context.dispatch((0, _actions.setFieldIndicateInvalid)(name, true));
+				context.dispatch((0, _actions.setFieldError)(name, error));
 
@@ -293,3 +295,3 @@ // Scroll to field and focus after React rerenders the component.
 			else if (!error && indicateInvalid && !this.validate(value)) {
-					context.dispatch((0, _actions.setFieldIndicateInvalid)(name, false));
+					context.dispatch((0, _actions.setFieldError)(name, undefined));
 				}
@@ -315,23 +317,2 @@ }
 
-			// If the form validation doesn't pass
-			// then don't show externally set `error` property for this field
-			// (reset the `error` to the form validation one),
-			// i.e. the user must first correct the form field values
-			// so that the form validation passes
-			// and after that can he resubmit the form
-			// and deal with those externally set `error`s.
-			//
-			// (`indicateInvalid` is set to `true`
-			//  the moment `error` property is set externally;
-			//  this is achieved using "when component props change" hook)
-			//
-			if (indicateInvalid && !context.valid) {
-				error = this.validate(value);
-				indicateInvalid = error ? true : false;
-			}
-			// Else, don't override the externally set `error` (if it has been set).
-			else {
-					error = error || this.validate(value);
-				}
-
 			return _react2.default.createElement(component, _extends({}, (0, _utility.getPassThroughProps)(this.props, FormField.propTypes), {
@@ -338,0 +319,0 @@ ref: isStateless(component) ? undefined : this.field,

modules/form.js

@@ -204,3 +204,4 @@ 'use strict';
 		_this.set = function (field, value) {
-			return _this.dispatch((0, _actions.setFieldValue)(field, value, _this.fields[field].validate(value, _this.props.values)));
+			_this.dispatch((0, _actions.setFieldValue)(field, value));
+			_this.dispatch((0, _actions.setFieldError)(field, _this.fields[field].validate(value)));
 		};
@@ -392,3 +393,3 @@
 					// so that `errors` is updated inside form state.
-					// (if it's mounted)
+					// (if the field is still mounted)
 					if (fields[_field]) {
@@ -399,5 +400,2 @@ this.set(_field, values[_field]);
 
-				// Indicate that the field is invalid.
-				this.dispatch((0, _actions.setFieldIndicateInvalid)(field, true));
-
 				// Scroll to the invalid field.
@@ -404,0 +402,0 @@ this.scroll(field);

package.json

 {
   "name": "basic-react-form",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "React Form",
@@ -17,2 +17,3 @@ "main": "index.commonjs.js",
     "prop-types": "^15.5.6",
+    "react-create-ref": "^1.0.0",
     "scroll-into-view-if-needed": "^2.2.16"
@@ -23,2 +24,3 @@ },
     "babel-core": "^6.7.2",
+    "babel-plugin-istanbul": "^4.1.6",
     "babel-plugin-transform-class-properties": "^6.24.1",
@@ -31,5 +33,6 @@ "babel-plugin-transform-decorators-legacy": "^1.3.5",
     "chai": "^3.5.0",
-    "istanbul": "^1.0.0-alpha.2",
-    "mocha": "^2.4.5",
+    "cross-env": "^5.2.0",
+    "mocha": "^5.2.0",
     "npm-run-all": "^1.4.0",
+    "nyc": "^12.0.2",
     "react": "^15.2.1",
@@ -40,5 +43,5 @@ "react-dom": "^15.2.1",
   "scripts": {
-    "test": "mocha --compilers js:babel-core/register --colors --bail --reporter spec --require test/setup \"./{,!(node_modules|commonjs|modules)/**/}*.test.js\" --recursive",
-    "test-coverage": "istanbul cover node_modules/mocha/bin/_mocha -- --compilers js:babel-core/register --colors --reporter dot \"./{,!(node_modules|commonjs|modules)/**/}*.test.js\" --recursive",
-    "test-travis": "istanbul cover node_modules/mocha/bin/_mocha --report lcovonly -- --compilers js:babel-core/register --colors --reporter spec \"./{,!(node_modules|commonjs|modules)/**/}*.test.js\" --recursive",
+    "test": "mocha --bail --require babel-core/register --require ./test/setup.js \"source/**/*.test.js\" \"test/**/*.test.js\"",
+    "test-coverage": "cross-env NODE_ENV=test nyc mocha --bail --require ./test/setup.js \"source/**/*.test.js\" \"test/**/*.test.js\"",
+    "coveralls": "nyc report --reporter=text-lcov | coveralls",
     "clean-for-build": "rimraf ./modules/**/* ./commonjs/**/*",
@@ -45,0 +48,0 @@ "build-commonjs-modules": "better-npm-run build-commonjs-modules",

README.md

 # basic-react-form
 
 [![npm version](https://img.shields.io/npm/v/basic-react-form.svg?style=flat-square)](https://www.npmjs.com/package/basic-react-form)
+<!--
 [![npm downloads](https://img.shields.io/npm/dm/basic-react-form.svg?style=flat-square)](https://www.npmjs.com/package/basic-react-form)
+-->
+<!--
 [![coverage](https://img.shields.io/coveralls/catamphetamine/basic-react-form/master.svg?style=flat-square)](https://coveralls.io/r/catamphetamine/basic-react-form?branch=master)
+-->
 
@@ -22,3 +26,4 @@ ## Install
 
-  // Returns a `Promise`.
+  // Can be `async/await`.
+  // Can return a `Promise`.
   submit = (values) => {
@@ -30,3 +35,3 @@ console.log(values)
   render() {
-    const { phone, submit, submitAction } = this.props
+    const { user } = this.props
 
@@ -40,4 +45,4 @@ return (
           placeholder="Enter phone number"
-          // Initial value for this field
-          value={ phone }
+          // Initial value for this field.
+          value={ user.phone }
           validate={ this.validatePhone } />
@@ -53,2 +58,3 @@
 
+// `error` is passed if the field is invalid.
 function TextInput({ error, ...rest }) {
@@ -83,9 +89,9 @@ return (
 
-  * `trim : boolean` – Set to `false` to disable field value trimming. Defaults to `true`.
+  * `trim : Boolean` – Set to `false` to disable trimming strings. Defaults to `true`.
 
   * `requiredMessage : String` – The default `error` message for `<Field required/>`. Is `"Required"` by default.
 
-  * `onError : Function(Error)` — Submit error handler. E.g. can show a popup with error details.
+  * `onError : Function(Error)` — Submit error handler. E.g. can show a popup with error message.
 
-  * `autoFocus : boolean` — Can automatically focus on the first form field when the form is mounted. Defauls to `true`.
+  * `autoFocus : Boolean` — If `true` will automatically focus on the first form field when the form is mounted. Defauls to `true`.
 
@@ -96,2 +102,4 @@ * `onBeforeSubmit : Function`
 
+  * `onAbandon : Function(fieldName, fieldValue)` — If a form field was focused but then the form wasn't submitted and was unmounted then this function is called meaning that the user possibly tried to fill out the form but then decided to move on for some reason (e.g. didn't know what to enter in a particular form field).
+
 The `<Form/>` component instance (`ref`) provides the following methods:
@@ -113,3 +121,3 @@
 
-Upon form submission, if any of its fields is invalid, then that field will be automatically scrolled to and focused, and the actual form submission won't happen.
+Upon form submission, if any one of its fields is invalid, then that field will be automatically scrolled to and focused, and the actual form submission won't happen.
 
@@ -122,5 +130,5 @@ ### Field
 
-  * `component : class|function|string` — the field React component (can also be a string like `input`).
+  * `component : (React.Component|Function|String)` — React component (can also be a string like `input`).
 
-And also `<Field/>` takes the following optional properties:
+`<Field/>` takes the following optional properties:
 
@@ -157,10 +165,12 @@ * `value` - the initial value of the field.
 
-  * Whenever the user submits the form, `error` is displayed for the first found invalid form field.
+  * Whenever the user submits the form, `error`s are displayed for all invalid form fields.
 
-  * Whenever the user edits a field's value, `error` becomes `undefined` for that field.
+  * Whenever the user edits a field's value, `error` becomes `undefined` for that field while the user is focused on the field.
 
-  * Whenever the new `error` property is manually set on the `<Field/>` component, `error` is passed to that field.
+  * Whenever the user focuses out of a field it is re-validated and `error` is passed if it's invalid.
 
-Therefore, the `error` message is only shown when it makes sense. For example, while the user is inputting a phone number that phone number is invalid until the used inputs it fully, but it wouldn't make sense to show the "Invalid phone number" error to the user while he is in the process of inputting the phone number.
+  * Whenever a new `error` property is manually set on the `<Field/>` component that `error` is displayed.
 
+Therefore, the `error` message is only shown when the user is not editing the field. For example, while the user is typing a phone number that phone number is invalid until the used inputs it fully, but it wouldn't make sense to show the "Invalid phone number" error to the user while he is in the process of inputting the phone number (it would just be an annoying distraction).
+
 ### Submit
@@ -170,7 +180,7 @@
 
-  * `component : class|function|string` — the field React component (can also be a string like `input`).
+  * `component : (React.Component|Function|String)` — React component (can also be a string like `button`).
 
 `<Submit/>` passes the following properties to the `component`:
 
-  * `busy : boolean` — indicates if the form is currently being submitted.
+  * `busy : Boolean` — indicates if the form is currently being submitted.
 
@@ -182,3 +192,3 @@ * All other properties are passed through.
   return (
-    <Form onSubmit={ submit(...) }>
+    <Form onSubmit={ ... }>
       <Field name="text" component={ Input } />
@@ -270,16 +280,2 @@
 
-<!--
-### Abandoned forms
-
-One day marketing department asked me if I could make it track abandoned forms via Google Analytics. For this reason form component instance has `.getLatestFocusedField()` method to find out which exact form field the user got confused by. `getLatestFocusedField` property function is also passed to the decorated form component.
-
-Also the following `@Form()` decorator options are available:
-
-  * `onSubmitted(props)` — is called after the form is submitted (if submit function returns a `Promise` then `onSubmitted()` is called after this `Promise` is resolved)
-
-  * `onAbandoned(props, field, value)` — is called if the form was focued but was then abandoned (if the form was focused and then either the page is closed, or `react-router` route is changed, or the form is unmounted), can be used for Google Analytics. Requires `router` configuration parameter being set to a `react-router@3` instance.
-
-Alternatively the corresponding `props` may be passed directly to the decorated form component.
--->
-
 <!-- ## Contributing
@@ -286,0 +282,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

Worsened metrics

Total package byte prevSize

180505

decreased by-4.65%

Dependency count

6

increased by20%

Dev dependency count

17

increased by13.33%

Lines of code

1847

decreased by-4.55%

Number of lines in readme file

307

decreased by-1.29%

Dependency changes

• + Addedreact-create-ref@^1.0.0

• + Addedreact-create-ref@1.0.1(transitive)