Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

easy-react-form

Package Overview
Dependencies
Maintainers
1
Versions
56
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

easy-react-form - npm Package Compare versions

Comparing version 2.0.5 to 2.0.6

commonjs/useFormState.js
commonjs/useFormState.js.map
modules/useFormState.js
modules/useFormState.js.map

7

CHANGELOG.md
<!-- pass through `required` property even when the field is not empty: maybe add some `passThroughRequiredWhenNotEmpty` configuration option. -->
2.0.6 / 10.02.2023
==================
* Removed `<Field error/>` property. "Validation error"s are now called just "error"s.
* Added `useFormState()` hook.
2.0.0 / 31.01.2023

@@ -4,0 +11,0 @@ ==================

28

commonjs/actions.immutable.js

@@ -6,3 +6,3 @@ "use strict";

});
exports.unregisterField = exports.showFieldError = exports.setFormSubmitting = exports.setFormSubmitAttempted = exports.setFieldValue = exports.setFieldValidationError = exports.setFieldError = exports.removeField = exports.registerField = exports.fieldFocused = void 0;
exports.unregisterField = exports.showFieldError = exports.setFormSubmitting = exports.setFormSubmitAttempted = exports.setFieldValue = exports.setFieldError = exports.removeField = exports.registerField = exports.fieldFocused = void 0;
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }

@@ -20,4 +20,3 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

value = _ref.value,
validate = _ref.validate,
error = _ref.error;
validate = _ref.validate;
return function (state) {

@@ -35,9 +34,8 @@ // Uses a numerical counter instead of a boolean.

if (state.fields[field] === undefined) {
var validationError = validate(value);
var error = validate(value);
return _objectSpread(_objectSpread({}, state), {}, {
fields: _objectSpread(_objectSpread({}, state.fields), {}, _defineProperty({}, field, 1)),
values: _objectSpread(_objectSpread({}, state.values), {}, _defineProperty({}, field, value)),
validationErrors: _objectSpread(_objectSpread({}, state.validationErrors), {}, _defineProperty({}, field, validationError)),
errors: _objectSpread(_objectSpread({}, state.errors), {}, _defineProperty({}, field, error)),
showErrors: _objectSpread(_objectSpread({}, state.showErrors), {}, _defineProperty({}, field, Boolean(validationError || error)))
showErrors: _objectSpread(_objectSpread({}, state.showErrors), {}, _defineProperty({}, field, Boolean(error)))
});

@@ -103,26 +101,13 @@ }

// Sets field externally-set `error`.
// Sets field `error`.
exports.setFieldValue = setFieldValue;
var setFieldError = function setFieldError(field, error) {
return function (state) {
var validationError = state.validationErrors[field];
return _objectSpread(_objectSpread({}, state), {}, {
errors: _objectSpread(_objectSpread({}, state.errors), {}, _defineProperty({}, field, error)),
showErrors: _objectSpread(_objectSpread({}, state.showErrors), {}, _defineProperty({}, field, Boolean(validationError || error)))
showErrors: _objectSpread(_objectSpread({}, state.showErrors), {}, _defineProperty({}, field, Boolean(error)))
});
};
};
// Sets field validation `error`.
exports.setFieldError = setFieldError;
var setFieldValidationError = function setFieldValidationError(field, validationError) {
return function (state) {
var error = state.errors[field];
return _objectSpread(_objectSpread({}, state), {}, {
validationErrors: _objectSpread(_objectSpread({}, state.validationErrors), {}, _defineProperty({}, field, validationError)),
showErrors: _objectSpread(_objectSpread({}, state.showErrors), {}, _defineProperty({}, field, Boolean(validationError || error)))
});
};
};
exports.setFieldValidationError = setFieldValidationError;
var fieldFocused = function fieldFocused(field) {

@@ -166,3 +151,2 @@ return function (state) {

errors: _objectSpread(_objectSpread({}, state.errors), {}, _defineProperty({}, field, undefined)),
validationErrors: _objectSpread(_objectSpread({}, state.validationErrors), {}, _defineProperty({}, field, undefined)),
showErrors: _objectSpread(_objectSpread({}, state.showErrors), {}, _defineProperty({}, field, undefined)),

@@ -169,0 +153,0 @@ latestFocusedField: state.latestFocusedField === field ? undefined : state.latestFocusedField

26

commonjs/actions.js

@@ -6,3 +6,3 @@ "use strict";

});
exports.unregisterField = exports.showFieldError = exports.setFormSubmitting = exports.setFormSubmitAttempted = exports.setFieldValue = exports.setFieldValidationError = exports.setFieldError = exports.removeField = exports.registerField = exports.fieldFocused = void 0;
exports.unregisterField = exports.showFieldError = exports.setFormSubmitting = exports.setFormSubmitAttempted = exports.setFieldValue = exports.setFieldError = exports.removeField = exports.registerField = exports.fieldFocused = void 0;
// With the current implementation, actions "mutate" the original `state` object

@@ -25,4 +25,3 @@ // instead of creating a new one every time.

value = _ref.value,
validate = _ref.validate,
error = _ref.error;
validate = _ref.validate;
return function (state) {

@@ -41,3 +40,2 @@ // Uses a numerical counter instead of a boolean.

state.fields[field] = 1;
var validationError = validate(value);

@@ -47,5 +45,5 @@ // Only initializes the field with its default `value`

state.values[field] = value;
state.validationErrors[field] = validationError;
var error = validate(value);
state.errors[field] = error;
state.showErrors[field] = Boolean(error || validationError);
state.showErrors[field] = Boolean(error);
} else {

@@ -105,22 +103,11 @@ state.fields[field]++;

// Sets field externally-set `error`.
// Sets field `error`.
exports.setFieldValue = setFieldValue;
var setFieldError = function setFieldError(field, error) {
return function (state) {
var validationError = state.validationErrors[field];
state.errors[field] = error;
state.showErrors[field] = Boolean(validationError || error);
state.showErrors[field] = Boolean(error);
};
};
// Sets field validation `error`.
exports.setFieldError = setFieldError;
var setFieldValidationError = function setFieldValidationError(field, validationError) {
return function (state) {
var error = state.errors[field];
state.validationErrors[field] = validationError;
state.showErrors[field] = Boolean(validationError || error);
};
};
exports.setFieldValidationError = setFieldValidationError;
var fieldFocused = function fieldFocused(field) {

@@ -155,3 +142,2 @@ return function (state) {

delete state.errors[field];
delete state.validationErrors[field];
delete state.showErrors[field];

@@ -158,0 +144,0 @@ if (state.latestFocusedField === field) {

135

commonjs/field.js

@@ -10,6 +10,6 @@ "use strict";

var _propTypes = _interopRequireDefault(require("prop-types"));
var _form = require("./form");
var _list = require("./list");
var _utility = require("./utility");
var _actions = require("./actions");
var _form = require("./form.js");
var _list = require("./list.js");
var _utility = require("./utility.js");
var _actions = require("./actions.js");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

@@ -79,9 +79,9 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

// Perhaps that results in a slightly less unneeded CPU load or something like that.
var validationError = validateOnChange ? _this.validate(value) : undefined;
var error = validateOnChange ? _this.validate(value) : undefined;
if (onChange) {
onChange(value);
}
_this.onValidationError(validationError);
_this.onError(error);
context.dispatch((0, _actions.setFieldValue)(_this.getName(), value));
context.dispatch((0, _actions.setFieldValidationError)(_this.getName(), validationError));
context.dispatch((0, _actions.setFieldError)(_this.getName(), error));
});

@@ -101,6 +101,7 @@ _defineProperty(_assertThisInitialized(_this), "onFocus", function (event) {

onBlur = _this$props3.onBlur;
var validationError = _this.validate(context.state.values[_this.getName()]);
if (validationError) {
_this.onValidationError(validationError);
context.dispatch((0, _actions.setFieldValidationError)(_this.getName(), validationError));
var error = _this.validate(context.state.values[_this.getName()]);
// The `error` was `undefined` while the field was focused.
if (error) {
_this.onError(error);
context.dispatch((0, _actions.setFieldError)(_this.getName(), error));
}

@@ -111,3 +112,2 @@ if (onBlur) {

});
_defineProperty(_assertThisInitialized(_this), "onValidationError", function (validationError) {});
_defineProperty(_assertThisInitialized(_this), "focus", function () {

@@ -189,3 +189,2 @@ // `.focus()` could theoretically maybe potentially be called in a timeout,

listContext = _this$props5.listContext,
error = _this$props5.error,
name = _this$props5.name,

@@ -204,4 +203,3 @@ value = _this$props5.value,

onChange: onChange,
error: error,
onValidationError: this.onValidationError,
onError: this.onError,
validate: this.validate,

@@ -241,4 +239,3 @@ scroll: this.scroll,

context = _this$props6.context,
value = _this$props6.value,
error = _this$props6.error;
value = _this$props6.value;

@@ -259,102 +256,27 @@ // If React reused one `<Field/>` element for another form field

if (value !== prevProps.value && !this.hasBeenEdited) {
var validationError = this.validate(value);
this.onValidationError(validationError);
var error = this.validate(value);
this.onError(error);
context.dispatch((0, _actions.setFieldValue)(this.getName(), value));
context.dispatch((0, _actions.setFieldValidationError)(this.getName(), validationError));
context.dispatch((0, _actions.setFieldError)(this.getName(), error));
}
// If an externally set `error` property is updated,
// then update invalid indication for this field accordingly.
// If the same error happened once again,
// then it should have been reset
// before sending form data to the server,
// and in that case it will be shown once again.
if (prevProps.error !== error) {
this.showOrHideExternallySetError(error);
}
}
}
}, {
key: "showOrHideExternallySetError",
value: function showOrHideExternallySetError(error) {
var context = this.props.context;
var value = context.state.values[this.getName()];
var showError = context.state.showErrors[this.getName()];
this.onError(error);
// If the `error` is set then indicate this field as being invalid.
if (error) {
context.dispatch((0, _actions.setFieldError)(this.getName(), error));
// `setFieldError()` action also automatically sets `showErrors[field]` property.
// context.dispatch(showFieldError(this.getName()))
this.scroll();
this.focus();
}
// If the `error` is reset and the field is valid
// then reset invalid indication.
else {
var validationError = this.validate(value);
context.dispatch((0, _actions.setFieldError)(this.getName(), validationError));
}
}
}, {
key: "onError",
value: function onError(error) {}
}, {
key: "getNode",
value:
// onError(newError) {
// const { context, onErrorChange } = this.props
// if (!onErrorChange) {
// return
// }
// const error = context.state.errors[this.getName()]
// const validationError = context.state.validationErrors[this.getName()]
// // const showError = context.state.showErrors[this.getName()]
// if (newError === error) {
// // No changes.
// // If the error is present and didn't change then no changes.
// // If the error wasn't present then the validation error should be shown,
// // if present, but since it didn't change either, there's no need to call
// // `onErrorChange()`.
// return
// }
// // If the external error is being reset.
// if (error && !newError) {
// // Then use the validaton error, if it's any different
// // from the argument of the previous call of `onErrorChange()`.
// if (error !== validationError) {
// onErrorChange(validationError)
// } else {
// // Otherwise, no changes.
// if (onErrorChange) {
// const error = context.state.errors[this.getName()]
// // If validation error is being reset then show no error.
// // Otherwise, show the new validation error, if it has changed.
// if (newError !== error) {
// onErrorChange(newError)
// }
// return
// }
// // `newError` is defined and `error` is not:
// // an external error is being set.
// onErrorChange(newError)
// }
// onValidationError(newValidationError) {
// const { context, onErrorChange } = this.props
// if (!onErrorChange) {
// return
// }
// const error = context.state.errors[this.getName()]
// const validationError = context.state.validationErrors[this.getName()]
// // const showError = context.state.showErrors[this.getName()]
// // An externally set error overrides a validation error.
// // And the externally set error hasn't been changed,
// // so no need to call `onErrorChange()`.
// if (error) {
// return
// }
// // If validation error is being reset and there's no external error
// // then show no error.
// // Otherwise, show new validation error, if it has changed.
// if (newValidationError !== validationError) {
// onErrorChange(newValidationError)
// }
// }
function getNode() {
}, {
key: "getNode",
value: function getNode() {
return this.field.current;

@@ -385,3 +307,3 @@ }

var value = context.state.values[this.getName()];
var error = context.state.validationErrors[this.getName()] || context.state.errors[this.getName()];
var error = context.state.errors[this.getName()];
var showError = context.state.showErrors[this.getName()];

@@ -407,3 +329,2 @@ return /*#__PURE__*/_react["default"].createElement(component, _objectSpread(_objectSpread({}, (0, _utility.getPassThroughProps)(this.props, FormField.propTypes)), {}, {

value: _propTypes["default"].any,
error: _propTypes["default"].string,
validate: _propTypes["default"].func,

@@ -410,0 +331,0 @@ // This property is currently not used.

54

commonjs/form.js

@@ -9,7 +9,7 @@ "use strict";

var _propTypes = _interopRequireDefault(require("prop-types"));
var _getInitialState2 = _interopRequireDefault(require("./getInitialState"));
var _OnAbandonPlugin = _interopRequireDefault(require("./plugins/OnAbandonPlugin"));
var _ListPlugin = _interopRequireDefault(require("./plugins/ListPlugin"));
var _utility = require("./utility");
var _actions = require("./actions");
var _getInitialState2 = _interopRequireDefault(require("./getInitialState.js"));
var _OnAbandonPlugin = _interopRequireDefault(require("./plugins/OnAbandonPlugin.js"));
var _ListPlugin = _interopRequireDefault(require("./plugins/ListPlugin.js"));
var _utility = require("./utility.js");
var _actions = require("./actions.js");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

@@ -65,3 +65,2 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

validate = _ref.validate,
error = _ref.error,
scroll = _ref.scroll,

@@ -101,4 +100,3 @@ focus = _ref.focus;

value: value,
validate: validate,
error: error
validate: validate
}));

@@ -253,5 +251,5 @@ });

// Otherwise, assume the value is valid because there's no validation function available.
var validationError = _this.fields[name] ? _this.fields[name].validate(initialValue) : undefined;
var error = _this.fields[name] ? _this.fields[name].validate(initialValue) : undefined;
_this.dispatch((0, _actions.setFieldValue)(name, initialValue));
_this.dispatch((0, _actions.setFieldValidationError)(name, validationError));
_this.dispatch((0, _actions.setFieldError)(name, error));
// Trigger the `<Field/>`'s `onChange()` handler.

@@ -262,3 +260,3 @@ // If the field is still mounted.

onChange = _this$fields$name.onChange,
onValidationError = _this$fields$name.onValidationError,
onError = _this$fields$name.onError,
_initialValue = _this$fields$name.initialValue;

@@ -268,4 +266,4 @@ if (onChange) {

}
if (onValidationError) {
onValidationError(validationError);
if (onError) {
onError(error);
}

@@ -361,4 +359,4 @@ }

// Validate field value.
var validationError = _this.fields[field].validate(value);
_this.dispatch((0, _actions.setFieldValidationError)(field, validationError));
var error = _this.fields[field].validate(value);
_this.dispatch((0, _actions.setFieldError)(field, error));
// Trigger the `<Field/>`'s `onChange()` handler.

@@ -368,8 +366,8 @@ if (changed !== false) {

onChange = _this$fields$field.onChange,
onValidationError = _this$fields$field.onValidationError;
onError = _this$fields$field.onError;
if (onChange) {
onChange(value);
}
if (onValidationError) {
onValidationError(validationError);
if (onError) {
onError(error);
}

@@ -586,13 +584,3 @@ }

if (onStateDidChange) {
onStateDidChange(_this3.getState(), undefined, {
getValidationError: function getValidationError(fieldName) {
return _this3.getState().validationErrors[fieldName];
},
getError: function getError(fieldName) {
return _this3.getState().errors[fieldName];
},
getValue: function getValue(fieldName) {
return _this3.getState().values[fieldName];
}
});
onStateDidChange(_this3.getState());
}

@@ -631,4 +619,3 @@ if (callback) {

fields = _this$getState5.fields,
values = _this$getState5.values,
errors = _this$getState5.errors;
values = _this$getState5.values;

@@ -648,6 +635,2 @@ // Re-run `validate()` for each field.

}
// Check for an externally set `error`.
if (errors[field] !== undefined) {
return field;
}
// If the field's `value` is not valid,

@@ -948,3 +931,2 @@ // `validate(value)` returns a validation error message (or `true`).

errors: _propTypes["default"].object.isRequired,
validationErrors: _propTypes["default"].object.isRequired,
showErrors: _propTypes["default"].object.isRequired,

@@ -951,0 +933,0 @@ latestFocusedField: _propTypes["default"].string,

4

commonjs/getInitialState.js

@@ -16,7 +16,5 @@ "use strict";

initialValues: initialValues,
// Externally set `error`s on form fields.
errors: {},
// The results of `validate()` functions called on
// the corresponding form field `value`s.
validationErrors: {},
errors: {},
// Whether should show field errors.

@@ -23,0 +21,0 @@ showErrors: {},

6

commonjs/list.js

@@ -12,4 +12,4 @@ "use strict";

var _propTypes = _interopRequireDefault(require("prop-types"));
var _form = require("./form");
var _ListPlugin = require("./plugins/ListPlugin.utility");
var _form = require("./form.js");
var _ListPluginUtility = require("./plugins/ListPlugin.utility.js");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

@@ -51,3 +51,3 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

}
return (0, _ListPlugin.getFieldName)(_this.props.name, itemId, name);
return (0, _ListPluginUtility.getFieldName)(_this.props.name, itemId, name);
});

@@ -54,0 +54,0 @@ _defineProperty(_assertThisInitialized(_this), "onRegisterField", function (name) {

4

commonjs/submit.js

@@ -9,4 +9,4 @@ "use strict";

var _propTypes = _interopRequireDefault(require("prop-types"));
var _form = require("./form");
var _utility = require("./utility");
var _form = require("./form.js");
var _utility = require("./utility.js");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

@@ -13,0 +13,0 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }

9

index.commonjs.js
'use strict'
exports.Form = require('./commonjs/form').default
exports.Field = require('./commonjs/field').default
exports.List = require('./commonjs/list').default
exports.Submit = require('./commonjs/submit').default
exports.Form = require('./commonjs/form.js').default
exports.Field = require('./commonjs/field.js').default
exports.List = require('./commonjs/list.js').default
exports.Submit = require('./commonjs/submit.js').default
exports.useFormState = require('./commonjs/useFormState.js').default

9

index.js

@@ -1,4 +0,5 @@

export { default as Form } from './modules/form'
export { default as Field } from './modules/field'
export { default as List } from './modules/list'
export { default as Submit } from './modules/submit'
export { default as Form } from './modules/form.js'
export { default as Field } from './modules/field.js'
export { default as List } from './modules/list.js'
export { default as Submit } from './modules/submit.js'
export { default as useFormState } from './modules/useFormState.js'

25

modules/actions.immutable.js

@@ -13,4 +13,3 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }

value = _ref.value,
validate = _ref.validate,
error = _ref.error;
validate = _ref.validate;
return function (state) {

@@ -28,9 +27,8 @@ // Uses a numerical counter instead of a boolean.

if (state.fields[field] === undefined) {
var validationError = validate(value);
var error = validate(value);
return _objectSpread(_objectSpread({}, state), {}, {
fields: _objectSpread(_objectSpread({}, state.fields), {}, _defineProperty({}, field, 1)),
values: _objectSpread(_objectSpread({}, state.values), {}, _defineProperty({}, field, value)),
validationErrors: _objectSpread(_objectSpread({}, state.validationErrors), {}, _defineProperty({}, field, validationError)),
errors: _objectSpread(_objectSpread({}, state.errors), {}, _defineProperty({}, field, error)),
showErrors: _objectSpread(_objectSpread({}, state.showErrors), {}, _defineProperty({}, field, Boolean(validationError || error)))
showErrors: _objectSpread(_objectSpread({}, state.showErrors), {}, _defineProperty({}, field, Boolean(error)))
});

@@ -94,23 +92,11 @@ }

// Sets field externally-set `error`.
// Sets field `error`.
export var setFieldError = function setFieldError(field, error) {
return function (state) {
var validationError = state.validationErrors[field];
return _objectSpread(_objectSpread({}, state), {}, {
errors: _objectSpread(_objectSpread({}, state.errors), {}, _defineProperty({}, field, error)),
showErrors: _objectSpread(_objectSpread({}, state.showErrors), {}, _defineProperty({}, field, Boolean(validationError || error)))
showErrors: _objectSpread(_objectSpread({}, state.showErrors), {}, _defineProperty({}, field, Boolean(error)))
});
};
};
// Sets field validation `error`.
export var setFieldValidationError = function setFieldValidationError(field, validationError) {
return function (state) {
var error = state.errors[field];
return _objectSpread(_objectSpread({}, state), {}, {
validationErrors: _objectSpread(_objectSpread({}, state.validationErrors), {}, _defineProperty({}, field, validationError)),
showErrors: _objectSpread(_objectSpread({}, state.showErrors), {}, _defineProperty({}, field, Boolean(validationError || error)))
});
};
};
export var fieldFocused = function fieldFocused(field) {

@@ -150,3 +136,2 @@ return function (state) {

errors: _objectSpread(_objectSpread({}, state.errors), {}, _defineProperty({}, field, undefined)),
validationErrors: _objectSpread(_objectSpread({}, state.validationErrors), {}, _defineProperty({}, field, undefined)),
showErrors: _objectSpread(_objectSpread({}, state.showErrors), {}, _defineProperty({}, field, undefined)),

@@ -153,0 +138,0 @@ latestFocusedField: state.latestFocusedField === field ? undefined : state.latestFocusedField

23

modules/actions.js

@@ -18,4 +18,3 @@ // With the current implementation, actions "mutate" the original `state` object

value = _ref.value,
validate = _ref.validate,
error = _ref.error;
validate = _ref.validate;
return function (state) {

@@ -34,3 +33,2 @@ // Uses a numerical counter instead of a boolean.

state.fields[field] = 1;
var validationError = validate(value);

@@ -40,5 +38,5 @@ // Only initializes the field with its default `value`

state.values[field] = value;
state.validationErrors[field] = validationError;
var error = validate(value);
state.errors[field] = error;
state.showErrors[field] = Boolean(error || validationError);
state.showErrors[field] = Boolean(error);
} else {

@@ -96,19 +94,9 @@ state.fields[field]++;

// Sets field externally-set `error`.
// Sets field `error`.
export var setFieldError = function setFieldError(field, error) {
return function (state) {
var validationError = state.validationErrors[field];
state.errors[field] = error;
state.showErrors[field] = Boolean(validationError || error);
state.showErrors[field] = Boolean(error);
};
};
// Sets field validation `error`.
export var setFieldValidationError = function setFieldValidationError(field, validationError) {
return function (state) {
var error = state.errors[field];
state.validationErrors[field] = validationError;
state.showErrors[field] = Boolean(validationError || error);
};
};
export var fieldFocused = function fieldFocused(field) {

@@ -139,3 +127,2 @@ return function (state) {

delete state.errors[field];
delete state.validationErrors[field];
delete state.showErrors[field];

@@ -142,0 +129,0 @@ if (state.latestFocusedField === field) {

137

modules/field.js

@@ -20,8 +20,8 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }

import PropTypes from 'prop-types';
import { Context, contextPropType } from './form';
import { ListContext, listContextPropType } from './list';
import { getPassThroughProps, scrollTo } from './utility';
import { setFieldValue, setFieldError, setFieldValidationError,
import { Context, contextPropType } from './form.js';
import { ListContext, listContextPropType } from './list.js';
import { getPassThroughProps, scrollTo } from './utility.js';
import { setFieldValue, setFieldError,
// showFieldError,
fieldFocused } from './actions';
fieldFocused } from './actions.js';
export default function Field(props) {

@@ -72,9 +72,9 @@ return /*#__PURE__*/React.createElement(Context.Consumer, null, function (context) {

// Perhaps that results in a slightly less unneeded CPU load or something like that.
var validationError = validateOnChange ? _this.validate(value) : undefined;
var error = validateOnChange ? _this.validate(value) : undefined;
if (onChange) {
onChange(value);
}
_this.onValidationError(validationError);
_this.onError(error);
context.dispatch(setFieldValue(_this.getName(), value));
context.dispatch(setFieldValidationError(_this.getName(), validationError));
context.dispatch(setFieldError(_this.getName(), error));
});

@@ -94,6 +94,7 @@ _defineProperty(_assertThisInitialized(_this), "onFocus", function (event) {

onBlur = _this$props3.onBlur;
var validationError = _this.validate(context.state.values[_this.getName()]);
if (validationError) {
_this.onValidationError(validationError);
context.dispatch(setFieldValidationError(_this.getName(), validationError));
var error = _this.validate(context.state.values[_this.getName()]);
// The `error` was `undefined` while the field was focused.
if (error) {
_this.onError(error);
context.dispatch(setFieldError(_this.getName(), error));
}

@@ -104,3 +105,2 @@ if (onBlur) {

});
_defineProperty(_assertThisInitialized(_this), "onValidationError", function (validationError) {});
_defineProperty(_assertThisInitialized(_this), "focus", function () {

@@ -182,3 +182,2 @@ // `.focus()` could theoretically maybe potentially be called in a timeout,

listContext = _this$props5.listContext,
error = _this$props5.error,
name = _this$props5.name,

@@ -197,4 +196,3 @@ value = _this$props5.value,

onChange: onChange,
error: error,
onValidationError: this.onValidationError,
onError: this.onError,
validate: this.validate,

@@ -234,4 +232,3 @@ scroll: this.scroll,

context = _this$props6.context,
value = _this$props6.value,
error = _this$props6.error;
value = _this$props6.value;

@@ -252,102 +249,27 @@ // If React reused one `<Field/>` element for another form field

if (value !== prevProps.value && !this.hasBeenEdited) {
var validationError = this.validate(value);
this.onValidationError(validationError);
var error = this.validate(value);
this.onError(error);
context.dispatch(setFieldValue(this.getName(), value));
context.dispatch(setFieldValidationError(this.getName(), validationError));
context.dispatch(setFieldError(this.getName(), error));
}
// If an externally set `error` property is updated,
// then update invalid indication for this field accordingly.
// If the same error happened once again,
// then it should have been reset
// before sending form data to the server,
// and in that case it will be shown once again.
if (prevProps.error !== error) {
this.showOrHideExternallySetError(error);
}
}
}
}, {
key: "showOrHideExternallySetError",
value: function showOrHideExternallySetError(error) {
var context = this.props.context;
var value = context.state.values[this.getName()];
var showError = context.state.showErrors[this.getName()];
this.onError(error);
// If the `error` is set then indicate this field as being invalid.
if (error) {
context.dispatch(setFieldError(this.getName(), error));
// `setFieldError()` action also automatically sets `showErrors[field]` property.
// context.dispatch(showFieldError(this.getName()))
this.scroll();
this.focus();
}
// If the `error` is reset and the field is valid
// then reset invalid indication.
else {
var validationError = this.validate(value);
context.dispatch(setFieldError(this.getName(), validationError));
}
}
}, {
key: "onError",
value: function onError(error) {}
}, {
key: "getNode",
value:
// onError(newError) {
// const { context, onErrorChange } = this.props
// if (!onErrorChange) {
// return
// }
// const error = context.state.errors[this.getName()]
// const validationError = context.state.validationErrors[this.getName()]
// // const showError = context.state.showErrors[this.getName()]
// if (newError === error) {
// // No changes.
// // If the error is present and didn't change then no changes.
// // If the error wasn't present then the validation error should be shown,
// // if present, but since it didn't change either, there's no need to call
// // `onErrorChange()`.
// return
// }
// // If the external error is being reset.
// if (error && !newError) {
// // Then use the validaton error, if it's any different
// // from the argument of the previous call of `onErrorChange()`.
// if (error !== validationError) {
// onErrorChange(validationError)
// } else {
// // Otherwise, no changes.
// if (onErrorChange) {
// const error = context.state.errors[this.getName()]
// // If validation error is being reset then show no error.
// // Otherwise, show the new validation error, if it has changed.
// if (newError !== error) {
// onErrorChange(newError)
// }
// return
// }
// // `newError` is defined and `error` is not:
// // an external error is being set.
// onErrorChange(newError)
// }
// onValidationError(newValidationError) {
// const { context, onErrorChange } = this.props
// if (!onErrorChange) {
// return
// }
// const error = context.state.errors[this.getName()]
// const validationError = context.state.validationErrors[this.getName()]
// // const showError = context.state.showErrors[this.getName()]
// // An externally set error overrides a validation error.
// // And the externally set error hasn't been changed,
// // so no need to call `onErrorChange()`.
// if (error) {
// return
// }
// // If validation error is being reset and there's no external error
// // then show no error.
// // Otherwise, show new validation error, if it has changed.
// if (newValidationError !== validationError) {
// onErrorChange(newValidationError)
// }
// }
function getNode() {
}, {
key: "getNode",
value: function getNode() {
return this.field.current;

@@ -378,3 +300,3 @@ }

var value = context.state.values[this.getName()];
var error = context.state.validationErrors[this.getName()] || context.state.errors[this.getName()];
var error = context.state.errors[this.getName()];
var showError = context.state.showErrors[this.getName()];

@@ -400,3 +322,2 @@ return /*#__PURE__*/React.createElement(component, _objectSpread(_objectSpread({}, getPassThroughProps(this.props, FormField.propTypes)), {}, {

value: PropTypes.any,
error: PropTypes.string,
validate: PropTypes.func,

@@ -403,0 +324,0 @@ // This property is currently not used.

54

modules/form.js

@@ -23,7 +23,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }

import PropTypes from 'prop-types';
import getInitialState from './getInitialState';
import OnAbandonPlugin from './plugins/OnAbandonPlugin';
import ListPlugin from './plugins/ListPlugin';
import { getPassThroughProps, getValues, getValue, getNext, NOT_FOUND } from './utility';
import { setFormSubmitAttempted, setFormSubmitting as _setFormSubmitting, setFieldValue, setFieldValidationError, registerField, unregisterField, removeField } from './actions';
import getInitialState from './getInitialState.js';
import OnAbandonPlugin from './plugins/OnAbandonPlugin.js';
import ListPlugin from './plugins/ListPlugin.js';
import { getPassThroughProps, getValues, getValue, getNext, NOT_FOUND } from './utility.js';
import { setFormSubmitAttempted, setFormSubmitting as _setFormSubmitting, setFieldValue, setFieldError, registerField, unregisterField, removeField } from './actions.js';
export var Context = /*#__PURE__*/React.createContext();

@@ -55,3 +55,2 @@ var EMPTY_VALUE = null;

validate = _ref.validate,
error = _ref.error,
scroll = _ref.scroll,

@@ -91,4 +90,3 @@ focus = _ref.focus;

value: value,
validate: validate,
error: error
validate: validate
}));

@@ -243,5 +241,5 @@ });

// Otherwise, assume the value is valid because there's no validation function available.
var validationError = _this.fields[name] ? _this.fields[name].validate(initialValue) : undefined;
var error = _this.fields[name] ? _this.fields[name].validate(initialValue) : undefined;
_this.dispatch(setFieldValue(name, initialValue));
_this.dispatch(setFieldValidationError(name, validationError));
_this.dispatch(setFieldError(name, error));
// Trigger the `<Field/>`'s `onChange()` handler.

@@ -252,3 +250,3 @@ // If the field is still mounted.

onChange = _this$fields$name.onChange,
onValidationError = _this$fields$name.onValidationError,
onError = _this$fields$name.onError,
_initialValue = _this$fields$name.initialValue;

@@ -258,4 +256,4 @@ if (onChange) {

}
if (onValidationError) {
onValidationError(validationError);
if (onError) {
onError(error);
}

@@ -351,4 +349,4 @@ }

// Validate field value.
var validationError = _this.fields[field].validate(value);
_this.dispatch(setFieldValidationError(field, validationError));
var error = _this.fields[field].validate(value);
_this.dispatch(setFieldError(field, error));
// Trigger the `<Field/>`'s `onChange()` handler.

@@ -358,8 +356,8 @@ if (changed !== false) {

onChange = _this$fields$field.onChange,
onValidationError = _this$fields$field.onValidationError;
onError = _this$fields$field.onError;
if (onChange) {
onChange(value);
}
if (onValidationError) {
onValidationError(validationError);
if (onError) {
onError(error);
}

@@ -576,13 +574,3 @@ }

if (onStateDidChange) {
onStateDidChange(_this3.getState(), undefined, {
getValidationError: function getValidationError(fieldName) {
return _this3.getState().validationErrors[fieldName];
},
getError: function getError(fieldName) {
return _this3.getState().errors[fieldName];
},
getValue: function getValue(fieldName) {
return _this3.getState().values[fieldName];
}
});
onStateDidChange(_this3.getState());
}

@@ -621,4 +609,3 @@ if (callback) {

fields = _this$getState5.fields,
values = _this$getState5.values,
errors = _this$getState5.errors;
values = _this$getState5.values;

@@ -638,6 +625,2 @@ // Re-run `validate()` for each field.

}
// Check for an externally set `error`.
if (errors[field] !== undefined) {
return field;
}
// If the field's `value` is not valid,

@@ -938,3 +921,2 @@ // `validate(value)` returns a validation error message (or `true`).

errors: PropTypes.object.isRequired,
validationErrors: PropTypes.object.isRequired,
showErrors: PropTypes.object.isRequired,

@@ -941,0 +923,0 @@ latestFocusedField: PropTypes.string,

4

modules/getInitialState.js

@@ -10,7 +10,5 @@ export default function getInitialState() {

initialValues: initialValues,
// Externally set `error`s on form fields.
errors: {},
// The results of `validate()` functions called on
// the corresponding form field `value`s.
validationErrors: {},
errors: {},
// Whether should show field errors.

@@ -17,0 +15,0 @@ showErrors: {},

4

modules/list.js

@@ -18,4 +18,4 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }

import PropTypes from 'prop-types';
import { Context } from './form';
import { getFieldName } from './plugins/ListPlugin.utility';
import { Context } from './form.js';
import { getFieldName } from './plugins/ListPlugin.utility.js';
export default function List_(props) {

@@ -22,0 +22,0 @@ return /*#__PURE__*/React.createElement(Context.Consumer, null, function (context) {

4

modules/submit.js

@@ -9,4 +9,4 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }

import PropTypes from 'prop-types';
import { Context } from './form';
import { getPassThroughProps } from './utility';
import { Context } from './form.js';
import { getPassThroughProps } from './utility.js';
export default function Submit(props) {

@@ -13,0 +13,0 @@ return /*#__PURE__*/React.createElement(Context.Consumer, null, function (context) {

2

package.json
{
"name": "easy-react-form",
"version": "2.0.5",
"version": "2.0.6",
"description": "Simple, fast and easy-to-use React Form.",

@@ -5,0 +5,0 @@ "main": "index.commonjs.js",

2

plugins/on-abandon.js

@@ -1,4 +0,4 @@

var Plugin = require('./commonjs/plugins/OnAbandonPlugin').default
var Plugin = require('./commonjs/plugins/OnAbandonPlugin.js').default
exports = module.exports = Plugin
exports['default'] = Plugin

87

README.md

@@ -92,4 +92,6 @@ # easy-react-form

<div>
<input type="text" { ...rest }/>
{ error && <div className="error">{ error }</div> }
<input type="text" {...rest}/>
{error &&
<div className="error">{error}</div>
}
</div>

@@ -131,8 +133,4 @@ )

* `onStateDidChange(newState : object, undefined, helpers : object)` — Will get called whenever a form's state has changed.
* There's no `prevState : object?` argument currently because the state object is mutated "in place" instead of creating an "immutable" copy of it every time it changes. Instead, the second argument is always `undefined`.
* The `helpers` object provides functions:
* `getValidationError: (fieldName : string) => string?` — Returns validation error for a field.
* `getError: (fieldName : string) => string?` — Returns an externally set `error` property value for a field.
* `getValue: (fieldName : string) => any?` — Returns field value.
* `onStateDidChange(newState : object)` — Will get called whenever a form's state has changed.
* There's no `prevState : object?` argument currently because the state object is mutated "in place" instead of creating an "immutable" copy of it every time it changes.

@@ -199,4 +197,2 @@ * `onBeforeSubmit : Function`

* `error : String` - an error message which can be set outside of the `validate()` function. Can be used for some hypothetical advanced use cases.
* `required : String or Boolean` — adds "this field is required" validation for the `<Field/>` with the `error` message equal to `required` property value if it's a `String` defaulting to `"Required"` otherwise. Note that `value={false}` is valid in case of `required` because `false` is a non-empty value (e.g. "Yes"/"No" dropdown), therefore use `validate` function instead of `required` for checkboxes that are required to be checked, otherwise an unchecked checkbox will have `value={false}` and will pass the `required` check.

@@ -222,5 +218,5 @@

The `error` display algorythm is as follows:
The `error` display algorithm is as follows:
* Initially `error` for a field is not passed.
* Initially, if `validate()` returns an error for a field's default `value`, that `error` is shown.

@@ -233,3 +229,3 @@ * Whenever the user submits the form, `error`s are displayed for all invalid form fields.

* Whenever a new `error` property is manually set on the `<Field/>` component that `error` is displayed.
* By default, `required` errors are only displayed after the user has attempted submitting the form.

@@ -273,67 +269,2 @@ 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).

## Field errors
An `error` property can be set on a `<Field/>` if this field was the reason form submission failed on the server side.
This must not be a simple client-side validation error because for validation errors there already is `validate` property. Everything that can be validated up-front (i.e. before sending form data to the server) should be validated inside `validate` function. All other validity checks which can not be performed without submitting form data to the server are performed on the server side and if an error occurs then this error goes to the `error` property of the relevant `<Field/>`.
For example, consider a login form. Username and password `<Field/>`s both have `validate` properties set to the corresponding basic validation functions (e.g. checking that the values aren't empty). That's as much as can be validated before sending form data to the server. When the form data is sent to the server, server-side validation takes place: the server checks if the username exists and that the password matches. If the username doesn't exist then an error is returned from the HTTP POST request and the `error` property of the username `<Field/>` should be set to `"User not found"` error message. Otherwise, if the username does exist, but, say, the password doesn't match, then the `error` property of the password `<Field/>` should be set to `"Wrong password"` error message.
One thing to note about `<Field/>` `error`s is that they must be reset before form data is sent to the server: otherwise it would always say `"Wrong password"` even if the password is correct this time. Another case is when the `error` is set to the same value again (e.g. the entered password is wrong once again) which will not trigger showing that error because the `error` is shown only when its value changes: `nextProps.error !== this.props.error`. This is easily solved too by simply resetting `error`s before form data is sent to the server.
```js
import { connect } from 'react-redux'
import { Form, Field, Submit } from 'easy-react-form'
@connect(state => ({ loginError: state.loginForm.error }))
class LoginForm extends Component {
validateNotEmpty(value) {
if (!value) {
return 'Required'
}
}
submit(values) {
// Clears `state.loginForm.error`
dispatch({ type: 'LOGIN_FORM_CLEAR_ERROR' })
// Sends form data to the server
return dispatch(sendHTTPLoginRequest(values))
}
render() {
const { loginError } = this.props
return (
<Form onSubmit={this.submit}>
<Field
name="username"
component={Input}
validate={this.validateNotEmpty}
error={loginError === 'User not found' ? loginError : undefined} />
<Field
name="password"
component={Input}
validate={this.validateNotEmpty}
error={loginError === 'Wrong password' ? loginError : undefined} />
<Submit component={SubmitButton}>
Log In
</Submit>
</Form>
)
}
}
function Input({ error, ...rest }) {
return (
<div>
<input {...rest}/>
{ error && <div className="error">{ error }</div> }
</div>
)
}
```
## Lists

@@ -340,0 +271,0 @@ 

commonjs/actions.immutable.js.map

Sorry, the diff of this file is not supported yet

commonjs/actions.js.map

Sorry, the diff of this file is not supported yet

commonjs/field.js.map

Sorry, the diff of this file is not supported yet

commonjs/form.js.map

Sorry, the diff of this file is not supported yet

commonjs/getInitialState.js.map

Sorry, the diff of this file is not supported yet

commonjs/list.js.map

Sorry, the diff of this file is not supported yet

commonjs/submit.js.map

Sorry, the diff of this file is not supported yet

modules/actions.immutable.js.map

Sorry, the diff of this file is not supported yet

modules/actions.js.map

Sorry, the diff of this file is not supported yet

modules/field.js.map

Sorry, the diff of this file is not supported yet

modules/form.js.map

Sorry, the diff of this file is not supported yet

modules/getInitialState.js.map

Sorry, the diff of this file is not supported yet

modules/list.js.map

Sorry, the diff of this file is not supported yet

modules/submit.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc