react-form-in-second/dist/form/index.js

make form easily, no more painful

'use strict';

Object.defineProperty(exports, "__esModule", {
	value: true
});

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

require('babel-polyfill');

function _asyncToGenerator(fn) { return function () { var gen = fn.apply(this, arguments); return new Promise(function (resolve, reject) { function step(key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { return Promise.resolve(value).then(function (value) { step("next", value); }, function (err) { step("throw", err); }); } } return step("next"); }); }; }

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

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var Form = function (_React$Component) {
	_inherits(Form, _React$Component);

	function Form(props) {
		var _this2 = this;

		_classCallCheck(this, Form);

		var _this = _possibleConstructorReturn(this, (Form.__proto__ || Object.getPrototypeOf(Form)).call(this, props));

		_this.onSubmit = function (evt) {

			if (evt && evt.preventDefault) evt.preventDefault();

			_this.setState({ clickedSubmit: true });

			var pass = _this.validateData();

			if (pass && typeof _this.props.onSubmit === 'function') _this.props.onSubmit(im.fromJS(_this.state.data).toJS());
		};

		_this.onInputChange = function () {
			var _ref = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(field, value, inputOnChange) {
				var data;
				return regeneratorRuntime.wrap(function _callee$(_context) {
					while (1) {
						switch (_context.prev = _context.next) {
							case 0:
								data = im.fromJS(_this.state.data).toJS();


								data[field] = value;

								_context.next = 4;
								return _this.setState({ data: data });

							case 4:

								if (_this.state.clickedSubmit) _this.validateData();

								if (typeof inputOnChange === 'function') inputOnChange(data, function (newData) {
									return _this.setState({ data: newData });
								});

								if (typeof _this.props.onChange === 'function') _this.props.onChange(data, function (newData) {
									return _this.setState({ data: newData });
								});

							case 7:
							case 'end':
								return _context.stop();
						}
					}
				}, _callee, _this2);
			}));

			return function (_x, _x2, _x3) {
				return _ref.apply(this, arguments);
			};
		}();

		_this.collectValidatiors = function () {

			var validators = [];

			React.Children.forEach(_this.props.children, function (child) {

				if (child.props.validator) validators.push({
					rule: child.props.validator,
					errMsg: child.props.errMsg,
					name: child.props.name
				});
			});

			_this.setState({ validators: validators });
		};

		_this.state = {
			data: props.initalData || {},
			errors: {},
			clickedSubmit: false
		};
		return _this;
	}

	// filterInitalData = (props) => {

	// 	const { initalData } = props

	// 	if (initalData && typeof initalData === 'object') {

	// 		for (let key in initalData) {

	// 		}
	// 	}
	// }

	_createClass(Form, [{
		key: 'validateData',
		value: function validateData() {
			var validators = this.state.validators,
			    errors = {},
			    formData = im.fromJS(this.state.data).toJS();
			var _iteratorNormalCompletion = true;
			var _didIteratorError = false;
			var _iteratorError = undefined;

			try {

				for (var _iterator = validators[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
					var validator = _step.value;
					var rule = validator.rule,
					    errMsg = validator.errMsg,
					    name = validator.name;


					if (typeof rule !== 'function') {

						errors[name] = errMsg;
					} else {

						var pass = rule(formData[name], formData);

						if (!pass) {

							errors[name] = errMsg;
						}
					}
				}
			} catch (err) {
				_didIteratorError = true;
				_iteratorError = err;
			} finally {
				try {
					if (!_iteratorNormalCompletion && _iterator.return) {
						_iterator.return();
					}
				} finally {
					if (_didIteratorError) {
						throw _iteratorError;
					}
				}
			}

			this.setState({ errors: errors });

			if (Object.keys(errors).length) return false;

			return true;
		}
	}, {
		key: 'passValidationToChildren',
		value: function passValidationToChildren() {
			var _this3 = this;

			return React.Children.map(this.props.children, function (child) {

				if (typeof child.type !== 'string') {

					var inputOnChange = child.props.onChange;

					var newChild = React.cloneElement(child, {

						onChange: function onChange(field, value) {
							return _this3.onInputChange(field, value, inputOnChange);
						},
						error: _this3.state.errors[child.props.name],
						getFormData: function getFormData() {
							return im.fromJS(_this3.state).toJS();
						},
						value: _this3.state.data[child.props.name]
					});

					return newChild;
				}

				return child;
			});
		}
	}, {
		key: 'componentWillMount',
		value: function componentWillMount() {

			this.collectValidatiors();
		}
	}, {
		key: 'render',
		value: function render() {
			var _props = this.props,
			    className = _props.className,
			    title = _props.title;


			return React.createElement(
				'form',
				{ onSubmit: this.onSubmit, className: className || '' },
				title && React.createElement(
					'div',
					{ className: 'form-title' },
					title
				),
				this.passValidationToChildren()
			);
		}
	}]);

	return Form;
}(React.Component);

exports.default = Form;