🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more
Socket
Book a DemoInstallSign in
Socket

simple-forms-react

Package Overview
Dependencies
Maintainers
1
Versions
11
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

simple-forms-react - npm Package Compare versions

Comparing version

to
1.1.2

README.md

438

dist/simple-forms-react.cjs.js
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

@@ -141,15 +143,15 @@

var compose = function compose() {
for (var _len = arguments.length, fns = Array(_len), _key = 0; _key < _len; _key++) {
fns[_key] = arguments[_key];
for (var _len = arguments.length, fns = Array(_len), _key = 0; _key < _len; _key++) {
fns[_key] = arguments[_key];
}
return function () {
for (var _len2 = arguments.length, args = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
args[_key2] = arguments[_key2];
}
return function () {
for (var _len2 = arguments.length, args = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
args[_key2] = arguments[_key2];
}
return fns.forEach(function (fn) {
return fn && fn.apply(undefined, args);
});
};
return fns.forEach(function (fn) {
return fn && fn.apply(undefined, args);
});
};
};

@@ -159,249 +161,267 @@

var update = function update(type) {
return function (object, key, value) {
return _extends({}, object, defineProperty({}, type, _extends({}, object[type], defineProperty({}, key, value))));
};
return function (object, key, value) {
return _extends({}, object, defineProperty({}, type, _extends({}, object[type], defineProperty({}, key, value))));
};
};
var Form = function (_React$Component) {
inherits(Form, _React$Component);
inherits(Form, _React$Component);
function Form(props) {
classCallCheck(this, Form);
function Form(props) {
classCallCheck(this, Form);
var _this = possibleConstructorReturn(this, (Form.__proto__ || Object.getPrototypeOf(Form)).call(this, props));
var _this = possibleConstructorReturn(this, (Form.__proto__ || Object.getPrototypeOf(Form)).call(this, props));
_this.onBlur = function (e) {
e.persist();
var _e$target = e.target,
id = _e$target.id,
name = _e$target.name;
_this.onBlur = function (e) {
e.persist();
var _e$target = e.target,
id = _e$target.id,
name = _e$target.name;
var inputName = name || id;
_this.validate(inputName);
};
var inputName = name || id;
_this.validate(inputName);
};
_this.onChange = function (e) {
e.persist();
var _e$target2 = e.target,
id = _e$target2.id,
name = _e$target2.name,
type = _e$target2.type;
_this.onChange = function (e) {
e.persist();
var _e$target2 = e.target,
id = _e$target2.id,
name = _e$target2.name,
type = _e$target2.type;
var inputName = name || id;
if (!id) throw new Error('Elements should have an attribute id', e.target.outerHTML);
var value = type === 'checkbox' ? e.target.checked : e.target.value;
_this.setState(function (oldState) {
return update('touched')(update('values')(oldState, inputName, value), inputName, true);
});
var inputName = name || id;
if (!id) {
throw new Error('Elements should have an attribute id', e.target.outerHTML);
}
var value = type === 'checkbox' ? e.target.checked : e.target.value;
_this.setState(function (oldState) {
return update('touched')(update('values')(oldState, inputName, value), inputName, true);
});
// check if any validations need to be run
if (type === 'radio' || e.target.dataset.validateOnChange) _this.validate(inputName);
};
// check if any validations need to be run
if (type === 'radio' || e.target.dataset.validateOnChange) {
_this.validate(inputName);
}
};
_this.setSubmitting = function (val) {
return _this.setState({ isSubmitting: val });
};
_this.setSubmitting = function (val) {
return _this.setState({ isSubmitting: val });
};
_this.fieldProps = function () {
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
_this.setValues = function (values) {
return _this.setState(function (old) {
return _extends({}, old, {
values: _extends({}, old.values, values)
});
});
};
var onChange = _ref.onChange,
onBlur = _ref.onBlur,
rest = objectWithoutProperties(_ref, ['onChange', 'onBlur']);
return _extends({
onChange: compose(_this.onChange, onChange),
onBlur: compose(_this.onBlur, onBlur)
}, rest);
};
_this.fieldProps = function () {
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
_this.state = {
values: _this.props.initialValues || {},
touched: {},
errors: {},
valid: {},
isSubmitting: false
};
_this.validate = _this.validate.bind(_this);
_this.handleSubmit = _this.handleSubmit.bind(_this);
return _this;
}
var onChange = _ref.onChange,
onBlur = _ref.onBlur,
rest = objectWithoutProperties(_ref, ['onChange', 'onBlur']);
return _extends({
onChange: compose(_this.onChange, onChange),
onBlur: compose(_this.onBlur, onBlur)
}, rest);
};
createClass(Form, [{
key: 'validate',
value: function () {
var _ref2 = asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2(inputName) {
var _this2 = this;
_this.state = {
values: _this.props.initialValues || {},
touched: {},
errors: {},
valid: {},
isSubmitting: false
};
_this.validate = _this.validate.bind(_this);
_this.handleSubmit = _this.handleSubmit.bind(_this);
return _this;
}
var validators, error;
return regeneratorRuntime.wrap(function _callee2$(_context2) {
while (1) {
switch (_context2.prev = _context2.next) {
case 0:
validators = this.props.validators[inputName] || [];
_context2.next = 3;
return validators.reduce(function () {
var _ref3 = asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(acc, validator) {
var lastError, result;
return regeneratorRuntime.wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
_context.next = 2;
return acc;
createClass(Form, [{
key: 'validate',
value: function () {
var _ref2 = asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2(inputName) {
var _this2 = this;
case 2:
lastError = _context.sent;
var validators, error;
return regeneratorRuntime.wrap(function _callee2$(_context2) {
while (1) {
switch (_context2.prev = _context2.next) {
case 0:
validators = this.props.validators[inputName] || [];
_context2.next = 3;
return validators.reduce(function () {
var _ref3 = asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(acc, validator) {
var lastError, result;
return regeneratorRuntime.wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
_context.next = 2;
return acc;
if (!(lastError && !lastError.valid)) {
_context.next = 5;
break;
}
case 2:
lastError = _context.sent;
return _context.abrupt('return', lastError);
if (!(lastError && !lastError.valid)) {
_context.next = 5;
break;
}
case 5:
_this2.setState(function (oldState) {
return update('valid')(oldState, inputName, true);
});
_context.next = 8;
return Promise.resolve(validator(_this2.state.values[inputName]));
return _context.abrupt('return', lastError);
case 8:
result = _context.sent;
case 5:
_this2.setState(function (oldState) {
return update('valid')(oldState, inputName, true);
});
_context.next = 8;
return Promise.resolve(validator(_this2.state.values[inputName]));
_this2.setState(function (oldState) {
return update('valid')(oldState, inputName, false);
});
return _context.abrupt('return', result);
case 8:
result = _context.sent;
case 11:
case 'end':
return _context.stop();
}
}
}, _callee, _this2);
}));
_this2.setState(function (oldState) {
return update('valid')(oldState, inputName, false);
});
return _context.abrupt('return', result);
return function (_x3, _x4) {
return _ref3.apply(this, arguments);
};
}(), null);
case 11:
case 'end':
return _context.stop();
}
}
}, _callee, _this2);
}));
case 3:
error = _context2.sent;
return function (_x3, _x4) {
return _ref3.apply(this, arguments);
};
}(), null);
case 3:
error = _context2.sent;
error && this.setState(function (oldState) {
return update('errors')(oldState, inputName, error.message);
});
return _context2.abrupt('return', error);
error && this.setState(function (oldState) {
return update('errors')(oldState, inputName, error.message);
});
case 6:
case 'end':
return _context2.stop();
}
}
}, _callee2, this);
}));
return _context2.abrupt('return', error);
function validate(_x2) {
return _ref2.apply(this, arguments);
case 6:
case 'end':
return _context2.stop();
}
}
}, _callee2, this);
}));
return validate;
}()
}, {
key: 'handleSubmit',
value: function () {
var _ref4 = asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3(e) {
var _this3 = this;
function validate(_x2) {
return _ref2.apply(this, arguments);
}
var allInputs, errors, isValid;
return regeneratorRuntime.wrap(function _callee3$(_context3) {
while (1) {
switch (_context3.prev = _context3.next) {
case 0:
e.preventDefault();
this.setSubmitting(true);
allInputs = Object.keys(this.props.initialValues);
// touch all fields so that errors are visible
return validate;
}()
}, {
key: 'handleSubmit',
value: function () {
var _ref4 = asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3(e) {
var _this3 = this;
this.setState({
touched: allInputs.reduce(function (result, k) {
return _extends({}, result, defineProperty({}, k, true));
}, {})
});
// run validations
_context3.next = 6;
return Promise.all(allInputs.map(function (k) {
return _this3.validate(k);
}));
var allInputs, errors, isValid;
return regeneratorRuntime.wrap(function _callee3$(_context3) {
while (1) {
switch (_context3.prev = _context3.next) {
case 0:
e.preventDefault();
this.setSubmitting(true);
allInputs = Object.keys(this.props.initialValues);
// touch all fields so that errors are visible
case 6:
errors = _context3.sent;
isValid = !errors.filter(function (err) {
return err && !err.valid;
}).length;
this.setState({
touched: allInputs.reduce(function (result, k) {
return _extends({}, result, defineProperty({}, k, true));
}, {})
});
// run validations
_context3.next = 6;
return Promise.all(allInputs.map(function (k) {
return _this3.validate(k);
}));
if (!isValid) {
_context3.next = 11;
break;
}
case 6:
errors = _context3.sent;
isValid = !errors.filter(function (err) {
return err && !err.valid;
}).length;
if (typeof this.props.onSubmit === 'function') {
this.props.onSubmit({
setSubmitting: this.setSubmitting,
values: this.state.values,
isValid: isValid
});
}
return _context3.abrupt('return');
if (!isValid) {
_context3.next = 11;
break;
}
case 11:
// else don't submit
this.setSubmitting(false);
if (typeof this.props.onSubmit === 'function') {
this.props.onSubmit({
setSubmitting: this.setSubmitting,
values: this.state.values,
isValid: isValid
});
}
return _context3.abrupt('return');
case 12:
case 'end':
return _context3.stop();
}
}
}, _callee3, this);
}));
case 11:
// else don't submit
this.setSubmitting(false);
function handleSubmit(_x5) {
return _ref4.apply(this, arguments);
case 12:
case 'end':
return _context3.stop();
}
}
}, _callee3, this);
}));
return handleSubmit;
}()
}, {
key: 'render',
value: function render() {
return this.props.children({
values: this.state.values,
touched: this.state.touched,
errors: this.state.errors,
valid: this.state.valid,
isSubmitting: this.state.isSubmitting,
fieldProps: this.fieldProps,
handleSubmit: this.handleSubmit
});
}
}]);
return Form;
function handleSubmit(_x5) {
return _ref4.apply(this, arguments);
}
return handleSubmit;
}()
}, {
key: 'render',
value: function render() {
return this.props.children({
values: this.state.values,
touched: this.state.touched,
errors: this.state.errors,
valid: this.state.valid,
isSubmitting: this.state.isSubmitting,
fieldProps: this.fieldProps,
handleSubmit: this.handleSubmit,
setValues: this.setValues,
setSubmitting: this.setSubmitting
});
}
}]);
return Form;
}(React.Component);
Form.propTypes = {
initialValues: PropTypes.object.isRequired,
onSubmit: PropTypes.func.isRequired,
children: PropTypes.func.isRequired,
validators: PropTypes.object
initialValues: PropTypes.object.isRequired,
onSubmit: PropTypes.func.isRequired,
children: PropTypes.func.isRequired,
validators: PropTypes.object
};
Form.defaultProps = {
validators: {}
validators: {}
};
var emptyValidator = function emptyValidator(val) {
return val ? { valid: true } : { valid: false, message: 'Cannot be empty' };
};
module.exports = Form;
exports['default'] = Form;
exports.emptyValidator = emptyValidator;
//# sourceMappingURL=simple-forms-react.cjs.js.map

@@ -137,15 +137,15 @@ import React from 'react';

var compose = function compose() {
for (var _len = arguments.length, fns = Array(_len), _key = 0; _key < _len; _key++) {
fns[_key] = arguments[_key];
for (var _len = arguments.length, fns = Array(_len), _key = 0; _key < _len; _key++) {
fns[_key] = arguments[_key];
}
return function () {
for (var _len2 = arguments.length, args = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
args[_key2] = arguments[_key2];
}
return function () {
for (var _len2 = arguments.length, args = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
args[_key2] = arguments[_key2];
}
return fns.forEach(function (fn) {
return fn && fn.apply(undefined, args);
});
};
return fns.forEach(function (fn) {
return fn && fn.apply(undefined, args);
});
};
};

@@ -155,249 +155,267 @@

var update = function update(type) {
return function (object, key, value) {
return _extends({}, object, defineProperty({}, type, _extends({}, object[type], defineProperty({}, key, value))));
};
return function (object, key, value) {
return _extends({}, object, defineProperty({}, type, _extends({}, object[type], defineProperty({}, key, value))));
};
};
var Form = function (_React$Component) {
inherits(Form, _React$Component);
inherits(Form, _React$Component);
function Form(props) {
classCallCheck(this, Form);
function Form(props) {
classCallCheck(this, Form);
var _this = possibleConstructorReturn(this, (Form.__proto__ || Object.getPrototypeOf(Form)).call(this, props));
var _this = possibleConstructorReturn(this, (Form.__proto__ || Object.getPrototypeOf(Form)).call(this, props));
_this.onBlur = function (e) {
e.persist();
var _e$target = e.target,
id = _e$target.id,
name = _e$target.name;
_this.onBlur = function (e) {
e.persist();
var _e$target = e.target,
id = _e$target.id,
name = _e$target.name;
var inputName = name || id;
_this.validate(inputName);
};
var inputName = name || id;
_this.validate(inputName);
};
_this.onChange = function (e) {
e.persist();
var _e$target2 = e.target,
id = _e$target2.id,
name = _e$target2.name,
type = _e$target2.type;
_this.onChange = function (e) {
e.persist();
var _e$target2 = e.target,
id = _e$target2.id,
name = _e$target2.name,
type = _e$target2.type;
var inputName = name || id;
if (!id) throw new Error('Elements should have an attribute id', e.target.outerHTML);
var value = type === 'checkbox' ? e.target.checked : e.target.value;
_this.setState(function (oldState) {
return update('touched')(update('values')(oldState, inputName, value), inputName, true);
});
var inputName = name || id;
if (!id) {
throw new Error('Elements should have an attribute id', e.target.outerHTML);
}
var value = type === 'checkbox' ? e.target.checked : e.target.value;
_this.setState(function (oldState) {
return update('touched')(update('values')(oldState, inputName, value), inputName, true);
});
// check if any validations need to be run
if (type === 'radio' || e.target.dataset.validateOnChange) _this.validate(inputName);
};
// check if any validations need to be run
if (type === 'radio' || e.target.dataset.validateOnChange) {
_this.validate(inputName);
}
};
_this.setSubmitting = function (val) {
return _this.setState({ isSubmitting: val });
};
_this.setSubmitting = function (val) {
return _this.setState({ isSubmitting: val });
};
_this.fieldProps = function () {
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
_this.setValues = function (values) {
return _this.setState(function (old) {
return _extends({}, old, {
values: _extends({}, old.values, values)
});
});
};
var onChange = _ref.onChange,
onBlur = _ref.onBlur,
rest = objectWithoutProperties(_ref, ['onChange', 'onBlur']);
return _extends({
onChange: compose(_this.onChange, onChange),
onBlur: compose(_this.onBlur, onBlur)
}, rest);
};
_this.fieldProps = function () {
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
_this.state = {
values: _this.props.initialValues || {},
touched: {},
errors: {},
valid: {},
isSubmitting: false
};
_this.validate = _this.validate.bind(_this);
_this.handleSubmit = _this.handleSubmit.bind(_this);
return _this;
}
var onChange = _ref.onChange,
onBlur = _ref.onBlur,
rest = objectWithoutProperties(_ref, ['onChange', 'onBlur']);
return _extends({
onChange: compose(_this.onChange, onChange),
onBlur: compose(_this.onBlur, onBlur)
}, rest);
};
createClass(Form, [{
key: 'validate',
value: function () {
var _ref2 = asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2(inputName) {
var _this2 = this;
_this.state = {
values: _this.props.initialValues || {},
touched: {},
errors: {},
valid: {},
isSubmitting: false
};
_this.validate = _this.validate.bind(_this);
_this.handleSubmit = _this.handleSubmit.bind(_this);
return _this;
}
var validators, error;
return regeneratorRuntime.wrap(function _callee2$(_context2) {
while (1) {
switch (_context2.prev = _context2.next) {
case 0:
validators = this.props.validators[inputName] || [];
_context2.next = 3;
return validators.reduce(function () {
var _ref3 = asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(acc, validator) {
var lastError, result;
return regeneratorRuntime.wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
_context.next = 2;
return acc;
createClass(Form, [{
key: 'validate',
value: function () {
var _ref2 = asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2(inputName) {
var _this2 = this;
case 2:
lastError = _context.sent;
var validators, error;
return regeneratorRuntime.wrap(function _callee2$(_context2) {
while (1) {
switch (_context2.prev = _context2.next) {
case 0:
validators = this.props.validators[inputName] || [];
_context2.next = 3;
return validators.reduce(function () {
var _ref3 = asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(acc, validator) {
var lastError, result;
return regeneratorRuntime.wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
_context.next = 2;
return acc;
if (!(lastError && !lastError.valid)) {
_context.next = 5;
break;
}
case 2:
lastError = _context.sent;
return _context.abrupt('return', lastError);
if (!(lastError && !lastError.valid)) {
_context.next = 5;
break;
}
case 5:
_this2.setState(function (oldState) {
return update('valid')(oldState, inputName, true);
});
_context.next = 8;
return Promise.resolve(validator(_this2.state.values[inputName]));
return _context.abrupt('return', lastError);
case 8:
result = _context.sent;
case 5:
_this2.setState(function (oldState) {
return update('valid')(oldState, inputName, true);
});
_context.next = 8;
return Promise.resolve(validator(_this2.state.values[inputName]));
_this2.setState(function (oldState) {
return update('valid')(oldState, inputName, false);
});
return _context.abrupt('return', result);
case 8:
result = _context.sent;
case 11:
case 'end':
return _context.stop();
}
}
}, _callee, _this2);
}));
_this2.setState(function (oldState) {
return update('valid')(oldState, inputName, false);
});
return _context.abrupt('return', result);
return function (_x3, _x4) {
return _ref3.apply(this, arguments);
};
}(), null);
case 11:
case 'end':
return _context.stop();
}
}
}, _callee, _this2);
}));
case 3:
error = _context2.sent;
return function (_x3, _x4) {
return _ref3.apply(this, arguments);
};
}(), null);
case 3:
error = _context2.sent;
error && this.setState(function (oldState) {
return update('errors')(oldState, inputName, error.message);
});
return _context2.abrupt('return', error);
error && this.setState(function (oldState) {
return update('errors')(oldState, inputName, error.message);
});
case 6:
case 'end':
return _context2.stop();
}
}
}, _callee2, this);
}));
return _context2.abrupt('return', error);
function validate(_x2) {
return _ref2.apply(this, arguments);
case 6:
case 'end':
return _context2.stop();
}
}
}, _callee2, this);
}));
return validate;
}()
}, {
key: 'handleSubmit',
value: function () {
var _ref4 = asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3(e) {
var _this3 = this;
function validate(_x2) {
return _ref2.apply(this, arguments);
}
var allInputs, errors, isValid;
return regeneratorRuntime.wrap(function _callee3$(_context3) {
while (1) {
switch (_context3.prev = _context3.next) {
case 0:
e.preventDefault();
this.setSubmitting(true);
allInputs = Object.keys(this.props.initialValues);
// touch all fields so that errors are visible
return validate;
}()
}, {
key: 'handleSubmit',
value: function () {
var _ref4 = asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3(e) {
var _this3 = this;
this.setState({
touched: allInputs.reduce(function (result, k) {
return _extends({}, result, defineProperty({}, k, true));
}, {})
});
// run validations
_context3.next = 6;
return Promise.all(allInputs.map(function (k) {
return _this3.validate(k);
}));
var allInputs, errors, isValid;
return regeneratorRuntime.wrap(function _callee3$(_context3) {
while (1) {
switch (_context3.prev = _context3.next) {
case 0:
e.preventDefault();
this.setSubmitting(true);
allInputs = Object.keys(this.props.initialValues);
// touch all fields so that errors are visible
case 6:
errors = _context3.sent;
isValid = !errors.filter(function (err) {
return err && !err.valid;
}).length;
this.setState({
touched: allInputs.reduce(function (result, k) {
return _extends({}, result, defineProperty({}, k, true));
}, {})
});
// run validations
_context3.next = 6;
return Promise.all(allInputs.map(function (k) {
return _this3.validate(k);
}));
if (!isValid) {
_context3.next = 11;
break;
}
case 6:
errors = _context3.sent;
isValid = !errors.filter(function (err) {
return err && !err.valid;
}).length;
if (typeof this.props.onSubmit === 'function') {
this.props.onSubmit({
setSubmitting: this.setSubmitting,
values: this.state.values,
isValid: isValid
});
}
return _context3.abrupt('return');
if (!isValid) {
_context3.next = 11;
break;
}
case 11:
// else don't submit
this.setSubmitting(false);
if (typeof this.props.onSubmit === 'function') {
this.props.onSubmit({
setSubmitting: this.setSubmitting,
values: this.state.values,
isValid: isValid
});
}
return _context3.abrupt('return');
case 12:
case 'end':
return _context3.stop();
}
}
}, _callee3, this);
}));
case 11:
// else don't submit
this.setSubmitting(false);
function handleSubmit(_x5) {
return _ref4.apply(this, arguments);
case 12:
case 'end':
return _context3.stop();
}
}
}, _callee3, this);
}));
return handleSubmit;
}()
}, {
key: 'render',
value: function render() {
return this.props.children({
values: this.state.values,
touched: this.state.touched,
errors: this.state.errors,
valid: this.state.valid,
isSubmitting: this.state.isSubmitting,
fieldProps: this.fieldProps,
handleSubmit: this.handleSubmit
});
}
}]);
return Form;
function handleSubmit(_x5) {
return _ref4.apply(this, arguments);
}
return handleSubmit;
}()
}, {
key: 'render',
value: function render() {
return this.props.children({
values: this.state.values,
touched: this.state.touched,
errors: this.state.errors,
valid: this.state.valid,
isSubmitting: this.state.isSubmitting,
fieldProps: this.fieldProps,
handleSubmit: this.handleSubmit,
setValues: this.setValues,
setSubmitting: this.setSubmitting
});
}
}]);
return Form;
}(React.Component);
Form.propTypes = {
initialValues: PropTypes.object.isRequired,
onSubmit: PropTypes.func.isRequired,
children: PropTypes.func.isRequired,
validators: PropTypes.object
initialValues: PropTypes.object.isRequired,
onSubmit: PropTypes.func.isRequired,
children: PropTypes.func.isRequired,
validators: PropTypes.object
};
Form.defaultProps = {
validators: {}
validators: {}
};
var emptyValidator = function emptyValidator(val) {
return val ? { valid: true } : { valid: false, message: 'Cannot be empty' };
};
export { emptyValidator };
export default Form;
//# sourceMappingURL=simple-forms-react.esm.js.map
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react'), require('prop-types')) :
typeof define === 'function' && define.amd ? define(['react', 'prop-types'], factory) :
(global.SimpleFormsReact = factory(global.React,global.PropTypes));
}(this, (function (React,PropTypes) { 'use strict';
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('prop-types')) :
typeof define === 'function' && define.amd ? define(['exports', 'react', 'prop-types'], factory) :
(factory((global.SimpleFormsReact = {}),global.React,global.PropTypes));
}(this, (function (exports,React,PropTypes) { 'use strict';

@@ -143,15 +143,15 @@ React = React && React.hasOwnProperty('default') ? React['default'] : React;

var compose = function compose() {
for (var _len = arguments.length, fns = Array(_len), _key = 0; _key < _len; _key++) {
fns[_key] = arguments[_key];
for (var _len = arguments.length, fns = Array(_len), _key = 0; _key < _len; _key++) {
fns[_key] = arguments[_key];
}
return function () {
for (var _len2 = arguments.length, args = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
args[_key2] = arguments[_key2];
}
return function () {
for (var _len2 = arguments.length, args = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
args[_key2] = arguments[_key2];
}
return fns.forEach(function (fn) {
return fn && fn.apply(undefined, args);
});
};
return fns.forEach(function (fn) {
return fn && fn.apply(undefined, args);
});
};
};

@@ -161,251 +161,271 @@

var update = function update(type) {
return function (object, key, value) {
return _extends({}, object, defineProperty({}, type, _extends({}, object[type], defineProperty({}, key, value))));
};
return function (object, key, value) {
return _extends({}, object, defineProperty({}, type, _extends({}, object[type], defineProperty({}, key, value))));
};
};
var Form = function (_React$Component) {
inherits(Form, _React$Component);
inherits(Form, _React$Component);
function Form(props) {
classCallCheck(this, Form);
function Form(props) {
classCallCheck(this, Form);
var _this = possibleConstructorReturn(this, (Form.__proto__ || Object.getPrototypeOf(Form)).call(this, props));
var _this = possibleConstructorReturn(this, (Form.__proto__ || Object.getPrototypeOf(Form)).call(this, props));
_this.onBlur = function (e) {
e.persist();
var _e$target = e.target,
id = _e$target.id,
name = _e$target.name;
_this.onBlur = function (e) {
e.persist();
var _e$target = e.target,
id = _e$target.id,
name = _e$target.name;
var inputName = name || id;
_this.validate(inputName);
};
var inputName = name || id;
_this.validate(inputName);
};
_this.onChange = function (e) {
e.persist();
var _e$target2 = e.target,
id = _e$target2.id,
name = _e$target2.name,
type = _e$target2.type;
_this.onChange = function (e) {
e.persist();
var _e$target2 = e.target,
id = _e$target2.id,
name = _e$target2.name,
type = _e$target2.type;
var inputName = name || id;
if (!id) throw new Error('Elements should have an attribute id', e.target.outerHTML);
var value = type === 'checkbox' ? e.target.checked : e.target.value;
_this.setState(function (oldState) {
return update('touched')(update('values')(oldState, inputName, value), inputName, true);
});
var inputName = name || id;
if (!id) {
throw new Error('Elements should have an attribute id', e.target.outerHTML);
}
var value = type === 'checkbox' ? e.target.checked : e.target.value;
_this.setState(function (oldState) {
return update('touched')(update('values')(oldState, inputName, value), inputName, true);
});
// check if any validations need to be run
if (type === 'radio' || e.target.dataset.validateOnChange) _this.validate(inputName);
};
// check if any validations need to be run
if (type === 'radio' || e.target.dataset.validateOnChange) {
_this.validate(inputName);
}
};
_this.setSubmitting = function (val) {
return _this.setState({ isSubmitting: val });
};
_this.setSubmitting = function (val) {
return _this.setState({ isSubmitting: val });
};
_this.fieldProps = function () {
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
_this.setValues = function (values) {
return _this.setState(function (old) {
return _extends({}, old, {
values: _extends({}, old.values, values)
});
});
};
var onChange = _ref.onChange,
onBlur = _ref.onBlur,
rest = objectWithoutProperties(_ref, ['onChange', 'onBlur']);
return _extends({
onChange: compose(_this.onChange, onChange),
onBlur: compose(_this.onBlur, onBlur)
}, rest);
};
_this.fieldProps = function () {
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
_this.state = {
values: _this.props.initialValues || {},
touched: {},
errors: {},
valid: {},
isSubmitting: false
};
_this.validate = _this.validate.bind(_this);
_this.handleSubmit = _this.handleSubmit.bind(_this);
return _this;
}
var onChange = _ref.onChange,
onBlur = _ref.onBlur,
rest = objectWithoutProperties(_ref, ['onChange', 'onBlur']);
return _extends({
onChange: compose(_this.onChange, onChange),
onBlur: compose(_this.onBlur, onBlur)
}, rest);
};
createClass(Form, [{
key: 'validate',
value: function () {
var _ref2 = asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2(inputName) {
var _this2 = this;
_this.state = {
values: _this.props.initialValues || {},
touched: {},
errors: {},
valid: {},
isSubmitting: false
};
_this.validate = _this.validate.bind(_this);
_this.handleSubmit = _this.handleSubmit.bind(_this);
return _this;
}
var validators, error;
return regeneratorRuntime.wrap(function _callee2$(_context2) {
while (1) {
switch (_context2.prev = _context2.next) {
case 0:
validators = this.props.validators[inputName] || [];
_context2.next = 3;
return validators.reduce(function () {
var _ref3 = asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(acc, validator) {
var lastError, result;
return regeneratorRuntime.wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
_context.next = 2;
return acc;
createClass(Form, [{
key: 'validate',
value: function () {
var _ref2 = asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2(inputName) {
var _this2 = this;
case 2:
lastError = _context.sent;
var validators, error;
return regeneratorRuntime.wrap(function _callee2$(_context2) {
while (1) {
switch (_context2.prev = _context2.next) {
case 0:
validators = this.props.validators[inputName] || [];
_context2.next = 3;
return validators.reduce(function () {
var _ref3 = asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(acc, validator) {
var lastError, result;
return regeneratorRuntime.wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
_context.next = 2;
return acc;
if (!(lastError && !lastError.valid)) {
_context.next = 5;
break;
}
case 2:
lastError = _context.sent;
return _context.abrupt('return', lastError);
if (!(lastError && !lastError.valid)) {
_context.next = 5;
break;
}
case 5:
_this2.setState(function (oldState) {
return update('valid')(oldState, inputName, true);
});
_context.next = 8;
return Promise.resolve(validator(_this2.state.values[inputName]));
return _context.abrupt('return', lastError);
case 8:
result = _context.sent;
case 5:
_this2.setState(function (oldState) {
return update('valid')(oldState, inputName, true);
});
_context.next = 8;
return Promise.resolve(validator(_this2.state.values[inputName]));
_this2.setState(function (oldState) {
return update('valid')(oldState, inputName, false);
});
return _context.abrupt('return', result);
case 8:
result = _context.sent;
case 11:
case 'end':
return _context.stop();
}
}
}, _callee, _this2);
}));
_this2.setState(function (oldState) {
return update('valid')(oldState, inputName, false);
});
return _context.abrupt('return', result);
return function (_x3, _x4) {
return _ref3.apply(this, arguments);
};
}(), null);
case 11:
case 'end':
return _context.stop();
}
}
}, _callee, _this2);
}));
case 3:
error = _context2.sent;
return function (_x3, _x4) {
return _ref3.apply(this, arguments);
};
}(), null);
case 3:
error = _context2.sent;
error && this.setState(function (oldState) {
return update('errors')(oldState, inputName, error.message);
});
return _context2.abrupt('return', error);
error && this.setState(function (oldState) {
return update('errors')(oldState, inputName, error.message);
});
case 6:
case 'end':
return _context2.stop();
}
}
}, _callee2, this);
}));
return _context2.abrupt('return', error);
function validate(_x2) {
return _ref2.apply(this, arguments);
case 6:
case 'end':
return _context2.stop();
}
}
}, _callee2, this);
}));
return validate;
}()
}, {
key: 'handleSubmit',
value: function () {
var _ref4 = asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3(e) {
var _this3 = this;
function validate(_x2) {
return _ref2.apply(this, arguments);
}
var allInputs, errors, isValid;
return regeneratorRuntime.wrap(function _callee3$(_context3) {
while (1) {
switch (_context3.prev = _context3.next) {
case 0:
e.preventDefault();
this.setSubmitting(true);
allInputs = Object.keys(this.props.initialValues);
// touch all fields so that errors are visible
return validate;
}()
}, {
key: 'handleSubmit',
value: function () {
var _ref4 = asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3(e) {
var _this3 = this;
this.setState({
touched: allInputs.reduce(function (result, k) {
return _extends({}, result, defineProperty({}, k, true));
}, {})
});
// run validations
_context3.next = 6;
return Promise.all(allInputs.map(function (k) {
return _this3.validate(k);
}));
var allInputs, errors, isValid;
return regeneratorRuntime.wrap(function _callee3$(_context3) {
while (1) {
switch (_context3.prev = _context3.next) {
case 0:
e.preventDefault();
this.setSubmitting(true);
allInputs = Object.keys(this.props.initialValues);
// touch all fields so that errors are visible
case 6:
errors = _context3.sent;
isValid = !errors.filter(function (err) {
return err && !err.valid;
}).length;
this.setState({
touched: allInputs.reduce(function (result, k) {
return _extends({}, result, defineProperty({}, k, true));
}, {})
});
// run validations
_context3.next = 6;
return Promise.all(allInputs.map(function (k) {
return _this3.validate(k);
}));
if (!isValid) {
_context3.next = 11;
break;
}
case 6:
errors = _context3.sent;
isValid = !errors.filter(function (err) {
return err && !err.valid;
}).length;
if (typeof this.props.onSubmit === 'function') {
this.props.onSubmit({
setSubmitting: this.setSubmitting,
values: this.state.values,
isValid: isValid
});
}
return _context3.abrupt('return');
if (!isValid) {
_context3.next = 11;
break;
}
case 11:
// else don't submit
this.setSubmitting(false);
if (typeof this.props.onSubmit === 'function') {
this.props.onSubmit({
setSubmitting: this.setSubmitting,
values: this.state.values,
isValid: isValid
});
}
return _context3.abrupt('return');
case 12:
case 'end':
return _context3.stop();
}
}
}, _callee3, this);
}));
case 11:
// else don't submit
this.setSubmitting(false);
function handleSubmit(_x5) {
return _ref4.apply(this, arguments);
case 12:
case 'end':
return _context3.stop();
}
}
}, _callee3, this);
}));
return handleSubmit;
}()
}, {
key: 'render',
value: function render() {
return this.props.children({
values: this.state.values,
touched: this.state.touched,
errors: this.state.errors,
valid: this.state.valid,
isSubmitting: this.state.isSubmitting,
fieldProps: this.fieldProps,
handleSubmit: this.handleSubmit
});
}
}]);
return Form;
function handleSubmit(_x5) {
return _ref4.apply(this, arguments);
}
return handleSubmit;
}()
}, {
key: 'render',
value: function render() {
return this.props.children({
values: this.state.values,
touched: this.state.touched,
errors: this.state.errors,
valid: this.state.valid,
isSubmitting: this.state.isSubmitting,
fieldProps: this.fieldProps,
handleSubmit: this.handleSubmit,
setValues: this.setValues,
setSubmitting: this.setSubmitting
});
}
}]);
return Form;
}(React.Component);
Form.propTypes = {
initialValues: PropTypes.object.isRequired,
onSubmit: PropTypes.func.isRequired,
children: PropTypes.func.isRequired,
validators: PropTypes.object
initialValues: PropTypes.object.isRequired,
onSubmit: PropTypes.func.isRequired,
children: PropTypes.func.isRequired,
validators: PropTypes.object
};
Form.defaultProps = {
validators: {}
validators: {}
};
var emptyValidator = function emptyValidator(val) {
return val ? { valid: true } : { valid: false, message: 'Cannot be empty' };
};
return Form;
exports['default'] = Form;
exports.emptyValidator = emptyValidator;
Object.defineProperty(exports, '__esModule', { value: true });
})));
//# sourceMappingURL=simple-forms-react.js.map

@@ -8,7 +8,7 @@ import React from 'react';

const update = type => (object, key, value) => ({
...object,
[type]: {
...object[type],
[key]: value
}
...object,
[type]: {
...object[type],
[key]: value,
},
});

@@ -18,74 +18,55 @@

static propTypes = {
initialValues: PropTypes.object.isRequired,
onSubmit: PropTypes.func.isRequired,
children: PropTypes.func.isRequired,
validators: PropTypes.object
initialValues: PropTypes.object.isRequired,
onSubmit: PropTypes.func.isRequired,
children: PropTypes.func.isRequired,
validators: PropTypes.object,
};
static defaultProps = {
validators: {}
validators: {},
};
constructor(props) {
super(props);
this.state = {
values: this.props.initialValues || {},
touched: {},
errors: {},
valid: {},
isSubmitting: false
};
this.validate = this.validate.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
super(props);
this.state = {
values: this.props.initialValues || {},
touched: {},
errors: {},
valid: {},
isSubmitting: false,
};
this.validate = this.validate.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
async validate(inputName) {
const validators = this.props.validators[inputName] || [];
const error = await validators.reduce(async (acc, validator) => {
const lastError = await acc;
if (lastError && !lastError.valid) return lastError;
this.setState(oldState => update('valid')(oldState, inputName, true));
const result = await Promise.resolve(
validator(this.state.values[inputName])
);
this.setState(oldState => update('valid')(oldState, inputName, false));
return result;
}, null);
error &&
this.setState(oldState =>
update('errors')(oldState, inputName, error.message)
);
return error;
}
onBlur = e => {
e.persist();
const { id, name } = e.target;
const inputName = name || id;
this.validate(inputName);
e.persist();
const { id, name } = e.target;
const inputName = name || id;
this.validate(inputName);
};
onChange = e => {
e.persist();
const { id, name, type } = e.target;
const inputName = name || id;
if (!id)
throw new Error(
'Elements should have an attribute id',
e.target.outerHTML
);
const value = type === 'checkbox' ? e.target.checked : e.target.value;
this.setState(oldState =>
update('touched')(
update('values')(oldState, inputName, value),
inputName,
true
)
e.persist();
const { id, name, type } = e.target;
const inputName = name || id;
if (!id) {
throw new Error(
'Elements should have an attribute id',
e.target.outerHTML,
);
}
const value = type === 'checkbox' ? e.target.checked : e.target.value;
this.setState(oldState =>
update('touched')(
update('values')(oldState, inputName, value),
inputName,
true,
),
);
// check if any validations need to be run
if (type === 'radio' || e.target.dataset.validateOnChange)
this.validate(inputName);
// check if any validations need to be run
if (type === 'radio' || e.target.dataset.validateOnChange) {
this.validate(inputName);
}
};

@@ -95,45 +76,80 @@

setValues = values =>
this.setState(old => ({
...old,
values: {
...old.values,
...values,
},
}));
fieldProps = ({ onChange, onBlur, ...rest } = {}) => ({
onChange: compose(this.onChange, onChange),
onBlur: compose(this.onBlur, onBlur),
...rest
onChange: compose(this.onChange, onChange),
onBlur: compose(this.onBlur, onBlur),
...rest,
});
async validate(inputName) {
const validators = this.props.validators[inputName] || [];
const error = await validators.reduce(async (acc, validator) => {
const lastError = await acc;
if (lastError && !lastError.valid) return lastError;
this.setState(oldState => update('valid')(oldState, inputName, true));
const result = await Promise.resolve(
validator(this.state.values[inputName]),
);
this.setState(oldState => update('valid')(oldState, inputName, false));
return result;
}, null);
error &&
this.setState(oldState =>
update('errors')(oldState, inputName, error.message),
);
return error;
}
async handleSubmit(e) {
e.preventDefault();
this.setSubmitting(true);
const allInputs = Object.keys(this.props.initialValues);
// touch all fields so that errors are visible
this.setState({
touched: allInputs.reduce((result, k) => ({ ...result, [k]: true }), {})
});
// run validations
const errors = await Promise.all(allInputs.map(k => this.validate(k)));
const isValid = !errors.filter(err => err && !err.valid).length;
e.preventDefault();
this.setSubmitting(true);
const allInputs = Object.keys(this.props.initialValues);
// touch all fields so that errors are visible
this.setState({
touched: allInputs.reduce((result, k) => ({ ...result, [k]: true }), {}),
});
// run validations
const errors = await Promise.all(allInputs.map(k => this.validate(k)));
const isValid = !errors.filter(err => err && !err.valid).length;
if (isValid) {
if (typeof this.props.onSubmit === 'function') {
this.props.onSubmit({
setSubmitting: this.setSubmitting,
values: this.state.values,
isValid
});
}
return;
if (isValid) {
if (typeof this.props.onSubmit === 'function') {
this.props.onSubmit({
setSubmitting: this.setSubmitting,
values: this.state.values,
isValid,
});
}
// else don't submit
this.setSubmitting(false);
return;
}
// else don't submit
this.setSubmitting(false);
}
render() {
return this.props.children({
values: this.state.values,
touched: this.state.touched,
errors: this.state.errors,
valid: this.state.valid,
isSubmitting: this.state.isSubmitting,
fieldProps: this.fieldProps,
handleSubmit: this.handleSubmit
});
return this.props.children({
values: this.state.values,
touched: this.state.touched,
errors: this.state.errors,
valid: this.state.valid,
isSubmitting: this.state.isSubmitting,
fieldProps: this.fieldProps,
handleSubmit: this.handleSubmit,
setValues: this.setValues,
setSubmitting: this.setSubmitting,
});
}
}
export const emptyValidator = val =>
val ? { valid: true } : { valid: false, message: 'Cannot be empty' };
{
"name": "simple-forms-react",
"version": "1.1.0",
"version": "1.1.2",
"description": "An awesome Form for React!",

@@ -66,2 +66,3 @@ "main": "dist/simple-forms-react.js",

"lint-staged": "^6.0.0",
"prettier": "^1.10.2",
"prop-types": "^15.6.0",

@@ -68,0 +69,0 @@ "react": "^16.2.0",

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet