fv-react-form/build/Form/index.js

Flexible React form with validation.

"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; }; }();

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _propTypes = require("prop-types");

var _propTypes2 = _interopRequireDefault(_propTypes);

var _fvValidation = require("fv-validation");

var _fvValidation2 = _interopRequireDefault(_fvValidation);

var _fvEvent = require("fv-event");

var _fvEvent2 = _interopRequireDefault(_fvEvent);

var _Util = require("./Util");

var _Util2 = _interopRequireDefault(_Util);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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 (_Component) {
    _inherits(Form, _Component);

    function Form(props) {
        _classCallCheck(this, Form);

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

        _this.validation = new _fvValidation2.default();
        _this.ID = "form-" + _Util2.default.guid();
        _this.state = {
            errors: [],
            fields: {}
        };
        return _this;
    }

    _createClass(Form, [{
        key: "reset",
        value: function reset() {
            if (this.props.reset) {
                this.props.reset();
            }
        }
    }, {
        key: "handleFieldChange",
        value: function handleFieldChange(field) {
            var fields = this.state.fields;


            if (['checkbox', 'radio'].indexOf(field.type) > -1) {
                fields[field.name] = field.checked;
            }

            if (field.type === 'file') {
                fields[field.name] = field.files;
            }

            if (['checkbox', 'file'].indexOf(field.type) === -1) {
                fields[field.name] = field.value;
            }

            this.setState({ fields: fields });

            if (this.props.onChange) {
                this.props.onChange(this.state.fields);
            }

            _fvEvent2.default.emit('field.change', field);
            _fvEvent2.default.emit('form.change', { name: this.props.name, fields: fields });
        }
    }, {
        key: "getErrors",
        value: function getErrors() {
            var field = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;

            if (field !== null) {
                return this.validation.getErrors(field);
            }
            return this.validation.errors;
        }
    }, {
        key: "getData",
        value: function getData() {
            var field = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;

            if (field !== null) {
                return this.state.fields[field];
            }
            return this.state.fields;
        }
    }, {
        key: "getForm",
        value: function getForm() {
            return {
                name: this.props.name,
                id: this.ID,
                fields: this.state.fields,
                validation: this.validation,
                errors: this.state.errors
            };
        }
    }, {
        key: "getValidation",
        value: function getValidation() {
            if (!this.props.rules) {
                return null;
            }
            return this.validation.validate(this.state.fields, this.props.rules, this.props.messages);
        }
    }, {
        key: "submit",
        value: function submit() {
            var _this2 = this;

            var form = this.getForm();

            if (this.props.rules) {
                this.validation.validate(this.state.fields, this.props.rules, this.props.messages);
                var errors = this.validation.getErrors();
                form.errors = errors;

                if (this.props.onSubmit) {
                    this.props.onSubmit(form);
                }

                this.setState({ errors: errors });

                if (errors.length > 0) {
                    _fvEvent2.default.emit('form.submit', form);
                    return;
                }
            }

            _fvEvent2.default.emit('form.submit', form);

            requestAnimationFrame(function () {
                if (_this2.props.action && typeof _this2.props.action === 'function') {
                    _this2.props.action(form);
                }

                if (_this2.props.action && typeof _this2.props.action === 'string') {
                    _this2.refs.form.submit();
                }
            });
        }
    }, {
        key: "getChildContext",
        value: function getChildContext() {
            return {
                form: {
                    handleChange: this.handleFieldChange.bind(this),
                    submit: this.submit.bind(this),
                    id: this.ID,
                    getData: this.getData.bind(this)
                }
            };
        }
    }, {
        key: "handleSubmit",
        value: function handleSubmit(event) {
            event.preventDefault();

            if (this.state.errors.length === 0 && this.props.synchronous) {
                this.refs.form.submit();
            }
        }
    }, {
        key: "render",
        value: function render() {
            var _this3 = this;

            return _react2.default.createElement(
                "form",
                {
                    className: "Form " + this.props.className,
                    ref: "form",
                    method: this.props.method,
                    noValidate: this.props.noValidate,
                    autoComplete: this.props.autoComplete ? 'on' : 'off',
                    onSubmit: function onSubmit(event) {
                        return _this3.handleSubmit(event);
                    }
                },
                this.props.children
            );
        }
    }]);

    return Form;
}(_react.Component);

exports.default = Form;


Form.defaultProps = {
    noValidate: false,
    autoComplete: true,
    synchronous: false,
    method: 'GET',
    className: ''
};

Form.propTypes = {
    name: _propTypes2.default.string,
    rules: _propTypes2.default.object,
    messages: _propTypes2.default.object,
    onSubmit: _propTypes2.default.func,
    onChange: _propTypes2.default.func,
    action: _propTypes2.default.oneOfType([_propTypes2.default.func, _propTypes2.default.string]),
    noValidate: _propTypes2.default.bool,
    autoComplete: _propTypes2.default.bool,
    className: _propTypes2.default.string,
    reset: _propTypes2.default.func
};

Form.childContextTypes = {
    form: _propTypes2.default.object.isRequired
};