canner/lib/hocs/validation.js

Build CMS in few lines of code for different data sources

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = withValidation;
exports.splitRefId = splitRefId;
exports.getValueAndPaths = getValueAndPaths;

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf3 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var React = _interopRequireWildcard(require("react"));

var _cannerRefId = _interopRequireDefault(require("canner-ref-id"));

var _ajv = _interopRequireDefault(require("ajv"));

var _lodash = require("lodash");

function withValidation(Com) {
  return (
    /*#__PURE__*/
    function (_React$Component) {
      (0, _inherits2.default)(ComponentWithValition, _React$Component);

      function ComponentWithValition() {
        var _getPrototypeOf2;

        var _this;

        (0, _classCallCheck2.default)(this, ComponentWithValition);

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

        _this = (0, _possibleConstructorReturn2.default)(this, (_getPrototypeOf2 = (0, _getPrototypeOf3.default)(ComponentWithValition)).call.apply(_getPrototypeOf2, [this].concat(args)));
        (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "key", void 0);
        (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "id", void 0);
        (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "callbackId", void 0);
        (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "state", {
          error: false,
          errorInfo: []
        });
        (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "validate", function (result) {
          var _this$props = _this.props,
              refId = _this$props.refId,
              _this$props$validatio = _this$props.validation,
              validation = _this$props$validatio === void 0 ? {} : _this$props$validatio,
              _this$props$required = _this$props.required,
              required = _this$props$required === void 0 ? false : _this$props$required; // required

          var paths = refId.getPathArr().slice(1);

          var _getValueAndPaths = getValueAndPaths(result.data, paths),
              value = _getValueAndPaths.value;

          var isRequiredValid = required ? Boolean(value) : true; // Ajv validation

          var ajv = new _ajv.default();
          var validate = ajv.compile(validation); // custom validator

          var validator = validation.validator,
              errorMessage = validation.errorMessage;

          var reject = function reject(message) {
            return {
              error: true,
              message: message
            };
          };

          var validatorResult = validator && validator(value, reject);
          var customValid = !(validatorResult && validatorResult.error); // if value is empty, should not validate with ajv

          if (customValid && isRequiredValid && (!value || validate(value))) {
            _this.setState({
              error: false,
              errorInfo: []
            });

            return result;
          }

          var errorInfo = [].concat(isRequiredValid ? [] : {
            message: 'should be required'
          }).concat(validate.errors ? errorMessage ? {
            message: errorMessage
          } : validate.errors : []).concat(customValid ? [] : validatorResult);

          _this.setState({
            error: true,
            errorInfo: errorInfo
          });

          return (0, _objectSpread2.default)({}, result, {
            error: true,
            errorInfo: errorInfo
          });
        });
        (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "removeOnDeploy", function () {
          var _this$props2 = _this.props,
              refId = _this$props2.refId,
              removeOnDeploy = _this$props2.removeOnDeploy;

          if (_this.callbackId) {
            removeOnDeploy(refId.getPathArr()[0], _this.callbackId || '');
          }
        });
        return _this;
      }

      (0, _createClass2.default)(ComponentWithValition, [{
        key: "componentDidMount",
        value: function componentDidMount() {
          var _this$props3 = this.props,
              refId = _this$props3.refId,
              _this$props3$validati = _this$props3.validation,
              validation = _this$props3$validati === void 0 ? {} : _this$props3$validati,
              onDeploy = _this$props3.onDeploy,
              _this$props3$required = _this$props3.required,
              required = _this$props3$required === void 0 ? false : _this$props3$required;

          if ((0, _lodash.isEmpty)(validation) && !required) {
            // no validation
            return;
          }

          var key = refId.getPathArr()[0];
          this.callbackId = onDeploy(key, this.validate);
        }
      }, {
        key: "componentWillUnmount",
        value: function componentWillUnmount() {
          this.removeOnDeploy();
        }
      }, {
        key: "render",
        value: function render() {
          var _this$state = this.state,
              error = _this$state.error,
              errorInfo = _this$state.errorInfo;
          return React.createElement(React.Fragment, null, React.createElement(Com, (0, _extends2.default)({}, this.props, {
            error: error,
            errorInfo: errorInfo || []
          })));
        }
      }]);
      return ComponentWithValition;
    }(React.Component)
  );
}

function splitRefId(_ref) {
  var refId = _ref.refId,
      rootValue = _ref.rootValue,
      pattern = _ref.pattern;

  var _refId$getPathArr = refId.getPathArr(),
      _refId$getPathArr2 = (0, _slicedToArray2.default)(_refId$getPathArr, 2),
      key = _refId$getPathArr2[0],
      index = _refId$getPathArr2[1];

  var id;

  if (pattern.startsWith('array')) {
    id = (0, _lodash.get)(rootValue, [key, index, 'id']);
  }

  return {
    key: key,
    id: id
  };
}

function getValueAndPaths(value, idPathArr) {
  return idPathArr.reduce(function (result, key) {
    var v = result.value;
    var paths = result.paths;

    if ((0, _lodash.isPlainObject)(v)) {
      if ('edges' in v && 'pageInfo' in v) {
        v = (0, _lodash.get)(v, ['edges', key, 'node']);
        paths = paths.concat(['edges', key, 'node']);
      } else {
        v = v[key];
        paths = paths.concat(key);
      }
    } else if ((0, _lodash.isArray)(v)) {
      v = v[key];
      paths = paths.concat(key);
    }

    return {
      value: v,
      paths: paths
    };
  }, {
    value: value,
    paths: []
  });
}