@trendmicro/react-validation/lib/createFormControl.js

React Validation

'use strict';

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

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

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 _shallowEqualArrays = require('./utils/shallow-equal-arrays');

var _shallowEqualArrays2 = _interopRequireDefault(_shallowEqualArrays);

var _shallowEqualObjects = require('./utils/shallow-equal-objects');

var _shallowEqualObjects2 = _interopRequireDefault(_shallowEqualObjects);

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

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

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 createFormControl = function createFormControl(options) {
    return function (WrappedComponent) {
        var _class, _temp2;

        return _temp2 = _class = function (_Component) {
            _inherits(FormControl, _Component);

            function FormControl() {
                var _ref;

                var _temp, _this, _ret;

                _classCallCheck(this, FormControl);

                for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
                    args[_key] = arguments[_key];
                }

                return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = FormControl.__proto__ || Object.getPrototypeOf(FormControl)).call.apply(_ref, [this].concat(args))), _this), _this.handleChange = function (event) {
                    event.persist();

                    _this.props.onChange && _this.props.onChange(event);

                    _this.context.$validation.setProps(_this, {
                        checked: event.target.checked,
                        value: event.target.value,
                        changed: true
                    });
                }, _this.handleBlur = function (event) {
                    event.persist();

                    _this.props.onBlur && _this.props.onBlur(event);

                    _this.context.$validation.setProps(_this, {
                        value: event.target.value,
                        blurred: true
                    });
                }, _temp), _possibleConstructorReturn(_this, _ret);
            }

            _createClass(FormControl, [{
                key: 'componentDidMount',
                value: function componentDidMount() {
                    this.context.$validation.register(this);
                }
            }, {
                key: 'componentWillUnmount',
                value: function componentWillUnmount() {
                    this.context.$validation.unregister(this);
                }
            }, {
                key: 'componentWillReceiveProps',
                value: function componentWillReceiveProps(nextProps) {
                    var _props = this.props,
                        validations = _props.validations,
                        props = _objectWithoutProperties(_props, ['validations']);

                    var nextValidations = nextProps.validations,
                        otherProps = _objectWithoutProperties(nextProps, ['validations']);

                    if (!(0, _shallowEqualObjects2.default)(props, otherProps) || !(0, _shallowEqualArrays2.default)(validations, nextValidations)) {
                        this.context.$validation.setProps(this, nextProps);
                    }
                }
            }, {
                key: 'shouldComponentUpdate',
                value: function shouldComponentUpdate(nextProps, nextState, nextContent) {
                    return nextContent !== this.context;
                }
            }, {
                key: 'render',
                value: function render() {
                    var props = this.context.$validation.getProps(this);

                    if (!props) {
                        return null;
                    }

                    props = _extends({}, props);
                    delete props.validations;

                    return _react2.default.createElement(WrappedComponent, _extends({}, props, {
                        onChange: this.handleChange,
                        onBlur: this.handleBlur
                    }));
                }
            }, {
                key: 'checked',
                get: function get() {
                    var _context$$validation$ = _extends({}, this.context.$validation.getProps(this)),
                        checked = _context$$validation$.checked;

                    return !!checked;
                }
            }, {
                key: 'value',
                get: function get() {
                    var _context$$validation$2 = _extends({}, this.context.$validation.getProps(this)),
                        value = _context$$validation$2.value;

                    return value || '';
                }
            }, {
                key: 'blurred',
                get: function get() {
                    var _context$$validation$3 = _extends({}, this.context.$validation.getProps(this)),
                        blurred = _context$$validation$3.blurred;

                    return !!blurred;
                }
            }, {
                key: 'changed',
                get: function get() {
                    var _context$$validation$4 = _extends({}, this.context.$validation.getProps(this)),
                        changed = _context$$validation$4.changed;

                    return !!changed;
                }
            }, {
                key: 'error',
                get: function get() {
                    var _context$$validation$5 = _extends({}, this.context.$validation.getProps(this)),
                        error = _context$$validation$5.error;

                    return error;
                }
            }]);

            return FormControl;
        }(_react.Component), _class.displayName = 'FormControl(' + WrappedComponent.name + ')', _class.contextTypes = {
            $validation: _propTypes2.default.shape({
                register: _propTypes2.default.func.isRequired,
                unregister: _propTypes2.default.func.isRequired,
                setProps: _propTypes2.default.func.isRequired,
                getProps: _propTypes2.default.func.isRequired
            })
        }, _class.propTypes = {
            validations: _propTypes2.default.arrayOf(_propTypes2.default.func),
            onChange: _propTypes2.default.func,
            onBlur: _propTypes2.default.func
        }, _class.defaultProps = {
            validations: []
        }, _temp2;
    };
};

exports.default = createFormControl;