canner/lib/hocs/route.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 = withRoute;
exports.getRenderType = getRenderType;
exports.isCompleteContain = isCompleteContain;
exports.genPaths = genPaths;
exports.RENDER_NULL = exports.RENDER_COMPONENT = exports.RENDER_CHILDREN = void 0;

require("antd/lib/spin/style");

var _spin = _interopRequireDefault(require("antd/lib/spin"));

require("antd/lib/button/style");

var _button = _interopRequireDefault(require("antd/lib/button"));

require("antd/lib/icon/style");

var _icon = _interopRequireDefault(require("antd/lib/icon"));

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 _getPrototypeOf2 = _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 _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));

require("antd/lib/modal/style");

var _modal = _interopRequireDefault(require("antd/lib/modal"));

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

var _antd = require("antd");

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _reactIntl = require("react-intl");

function _templateObject() {
  var data = (0, _taggedTemplateLiteral2.default)(["\n  text-align: right;\n"]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}

var confirm = _modal.default.confirm;
var RENDER_CHILDREN = 0;
exports.RENDER_CHILDREN = RENDER_CHILDREN;
var RENDER_COMPONENT = 1;
exports.RENDER_COMPONENT = RENDER_COMPONENT;
var RENDER_NULL = 2;
exports.RENDER_NULL = RENDER_NULL;

var ButtonWrapper = _styledComponents.default.div(_templateObject());

function withRoute(Com) {
  var _class;

  return (0, _reactIntl.injectIntl)(_class =
  /*#__PURE__*/
  function (_React$Component) {
    (0, _inherits2.default)(ComWithRoute, _React$Component);

    function ComWithRoute(props) {
      var _this;

      (0, _classCallCheck2.default)(this, ComWithRoute);
      _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(ComWithRoute).call(this, props));
      (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "deploy", function () {
        var _this$props = _this.props,
            refId = _this$props.refId,
            deploy = _this$props.deploy,
            intl = _this$props.intl;

        _this.setState({
          loading: true,
          loadingTip: intl.formatMessage({
            id: 'hocs.route.deployingTip'
          })
        });

        deploy(refId.getPathArr()[0]).then(_this.success).catch(_this.fail);
      });
      (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "reset", function () {
        var _this$props2 = _this.props,
            refId = _this$props2.refId,
            reset = _this$props2.reset,
            intl = _this$props2.intl;

        _this.setState({
          loading: true,
          loadingTip: intl.formatMessage({
            id: 'hocs.route.resetingTip'
          })
        });

        reset(refId.getPathArr()[0]).then(_this.success).catch(_this.fail);
      });
      (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "success", function () {
        var _this$props3 = _this.props,
            goTo = _this$props3.goTo,
            routes = _this$props3.routes,
            hideBackButton = _this$props3.hideBackButton;
        setTimeout(function () {
          _this.setState({
            loading: false
          }, function () {
            !hideBackButton && goTo({
              pathname: routes[0]
            });
          });
        }, 400);
      });
      (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "fail", function () {
        _this.setState({
          loading: false
        });
      });
      (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "discard", function () {
        var _this$props4 = _this.props,
            goTo = _this$props4.goTo,
            routes = _this$props4.routes,
            routerParams = _this$props4.routerParams,
            reset = _this$props4.reset,
            refId = _this$props4.refId,
            dataChanged = _this$props4.dataChanged,
            intl = _this$props4.intl,
            hideBackButton = _this$props4.hideBackButton;

        var resetCondFn = function resetCondFn() {
          if (routerParams.operator === 'create') {
            reset(refId.getPathArr()[0]).then(function () {
              return !hideBackButton && goTo({
                pathname: routes.join('/')
              });
            });
          } else {
            reset(refId.getPathArr()[0]).then(function () {
              return !hideBackButton && goTo({
                pathname: routes.slice(0, -1).join('/')
              });
            });
          }
        };

        if (dataChanged && Object.keys(dataChanged).length > 0) {
          confirm({
            title: intl.formatMessage({
              id: 'hocs.route.confirm.title'
            }),
            content: intl.formatMessage({
              id: 'hocs.route.confirm.content'
            }),
            okText: intl.formatMessage({
              id: 'hocs.route.confirm.okText'
            }),
            cancelText: intl.formatMessage({
              id: 'hocs.route.confirm.cancelText'
            }),
            onOk: function onOk() {
              return new Promise(function (resolve) {
                setTimeout(resolve, 200);
              }).then().then(function () {
                resetCondFn();
              });
            },
            onCancel: function onCancel() {}
          });
        } else {
          resetCondFn();
        }
      });
      var _intl = props.intl;
      _this.state = {
        loading: false,
        loadingTip: _intl.formatMessage({
          id: 'hocs.route.loadingTip'
        })
      };
      return _this;
    }

    (0, _createClass2.default)(ComWithRoute, [{
      key: "render",
      value: function render() {
        var _this$state = this.state,
            loading = _this$state.loading,
            loadingTip = _this$state.loadingTip;
        var _this$props5 = this.props,
            routes = _this$props5.routes,
            pattern = _this$props5.pattern,
            path = _this$props5.path,
            intl = _this$props5.intl,
            routerParams = _this$props5.routerParams,
            refId = _this$props5.refId,
            renderChildren = _this$props5.renderChildren,
            hideButtons = _this$props5.hideButtons,
            hideBackButton = _this$props5.hideBackButton,
            uiParams = _this$props5.uiParams;
        var renderType = getRenderType({
          pattern: pattern,
          routes: routes,
          path: path,
          routerParams: routerParams
        });
        var pathArrLength = refId.getPathArr().length;
        var routesLength = routes.length;
        var operator = routerParams.operator;
        var renderKeys = uiParams && uiParams.updateKeys; // render all

        if (operator === 'create') {
          renderKeys = uiParams && uiParams.createKeys;
        }

        return React.createElement(_spin.default, {
          tip: loadingTip,
          spinning: loading
        }, // quick fix for route array's children
        // need to find a stable way to control route
        renderType === RENDER_CHILDREN && !hideBackButton && pattern === 'array' && (routesLength === pathArrLength || routesLength + 1 === pathArrLength && operator === 'create') && React.createElement(_button.default, {
          onClick: this.discard,
          style: {
            marginBottom: 16
          },
          "data-testid": "back-button"
        }, React.createElement(_icon.default, {
          type: "arrow-left"
        }), " ", intl.formatMessage({
          id: 'hocs.route.backText'
        })), renderType === RENDER_CHILDREN && renderChildren(function (node) {
          return {
            hidden: renderKeys && renderKeys.indexOf(node.keyName) === -1,
            refId: refId
          };
        }), // quick fix for route array's children
        // need to find a stable way to control route
        renderType === RENDER_CHILDREN && pattern === 'array' && !hideButtons && (routesLength === pathArrLength || routesLength + 1 === pathArrLength && operator === 'create') && React.createElement(ButtonWrapper, null, React.createElement(_button.default, {
          style: {
            marginRight: 16
          },
          type: "primary",
          onClick: this.deploy,
          "data-testid": "confirm-button"
        }, intl.formatMessage({
          id: 'hocs.route.confirmText'
        })), React.createElement(_button.default, {
          onClick: this.reset,
          "data-testid": "reset-button"
        }, intl.formatMessage({
          id: 'hocs.route.resetText'
        }))), renderType === RENDER_COMPONENT && React.createElement(Com, this.props));
      }
    }]);
    return ComWithRoute;
  }(React.Component)) || _class;
}

function getRenderType(_ref) {
  var routes = _ref.routes,
      path = _ref.path,
      pattern = _ref.pattern,
      routerParams = _ref.routerParams;
  var paths = genPaths(path, pattern);
  var pathsLength = paths.length;
  var routesLength = routes.length;

  if (routes[0] !== paths[0]) {
    return RENDER_NULL;
  }

  var type = pattern.split('.').slice(-1)[0];
  var operator = routerParams.operator;

  if (type === 'object') {
    if (routesLength === pathsLength && isCompleteContain(paths, routes)) {
      return RENDER_COMPONENT;
    }

    if (routesLength < pathsLength) {
      return RENDER_COMPONENT;
    }

    if (routesLength > pathsLength) {
      return RENDER_CHILDREN;
    }

    return RENDER_NULL;
  } else if (type === 'array') {
    if (routesLength === pathsLength && isCompleteContain(paths, routes)) {
      return RENDER_CHILDREN;
    }

    if (routesLength < pathsLength) {
      if (routesLength === pathsLength - 1 && operator === 'create') {
        return RENDER_CHILDREN;
      }

      return RENDER_COMPONENT;
    }

    if (routesLength > pathsLength) {
      return RENDER_COMPONENT;
    }

    return RENDER_NULL;
  } else {
    if (routesLength === pathsLength && isCompleteContain(paths, routes)) {
      return RENDER_NULL;
    }

    if (routesLength < pathsLength) {
      return RENDER_COMPONENT;
    }

    if (routesLength > pathsLength) {
      return RENDER_COMPONENT;
    }

    return RENDER_NULL;
  }
}

function isCompleteContain(paths, routes) {
  return paths.map(function (key, i) {
    return routes[i] === key || key === '__ARRAY_INDEX__';
  }).reduce(function (result, curr) {
    return result && curr;
  });
}

function genPaths(path, pattern) {
  var patterns = pattern.split('.');
  var indexs = patterns.map(function (type, i) {
    return type === 'array' ? i : -1;
  }).filter(function (index) {
    return index !== -1;
  });
  var paths = path.split('/').map(function (route, i) {
    return indexs.indexOf(i) === -1 ? route : [].concat(route, '__ARRAY_INDEX__');
  }).reduce(function (result, curr) {
    return result.concat(curr);
  }, []);
  return paths;
}