canner/lib/hocs/query.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 = withQuery;
exports.shouldUpdate = shouldUpdate;

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

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

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

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

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

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

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 React = _interopRequireWildcard(require("react"));

var _reactContentLoader = require("react-content-loader");

var _index = _interopRequireDefault(require("../components/toolbar/index"));

var _antd = require("antd");

var _lodash = require("lodash");

var _utils = require("./utils");

var _reactApollo = require("react-apollo");

function withQuery(Com) {
  var _class;

  return (0, _reactApollo.withApollo)(_class =
  /*#__PURE__*/
  function (_React$PureComponent) {
    (0, _inherits2.default)(ComponentWithQuery, _React$PureComponent);

    function ComponentWithQuery(_props) {
      var _this;

      (0, _classCallCheck2.default)(this, ComponentWithQuery);
      _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(ComponentWithQuery).call(this, _props));
      (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "key", void 0);
      (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "subscription", void 0);
      (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "unsubscribe", function () {
        if (_this.subscription) {
          _this.subscription.unsubscribe();
        }
      });
      (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "subscribe", function () {
        var subscribe = _this.props.subscribe;
        var subscription = subscribe(_this.key, function (data) {
          _this.updateData(data);
        });
        _this.subscription = subscription;
      });
      (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "queryData", function (props) {
        var _ref = props || _this.props,
            fetch = _ref.fetch;

        _this.setState({
          isFetching: true
        });

        return fetch(_this.key).then(_this.updateData);
      });
      (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "updateData", function (data) {
        var refId = _this.props.refId;

        _this.setState({
          originRootValue: data,
          rootValue: (0, _utils.parseConnectionToNormal)(data),
          value: (0, _utils.getValue)(data, refId.getPathArr()),
          isFetching: false
        });
      });
      (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "updateQuery", function (paths, args) {
        var updateQuery = _this.props.updateQuery;
        updateQuery(paths, args).then(function (rewatch) {
          if (rewatch) {
            _this.unsubscribe();

            _this.queryData();

            _this.subscribe();
          } else {
            _this.queryData();
          }
        });
      });
      _this.state = {
        value: null,
        rootValue: null,
        originRootValue: null,
        isFetching: true
      };
      _this.key = _props.refId.getPathArr()[0];
      return _this;
    }

    (0, _createClass2.default)(ComponentWithQuery, [{
      key: "componentDidMount",
      value: function componentDidMount() {
        var _this2 = this;

        this.queryData().then(function () {
          _this2.subscribe();
        });
      }
    }, {
      key: "componentWillUnmount",
      value: function componentWillUnmount() {
        this.unsubscribe();
      }
    }, {
      key: "componentDidUpdate",
      value: function componentDidUpdate(prevProps) {
        var _this3 = this;

        var refId = prevProps.refId;

        if (refId.toString() !== this.props.refId.toString()) {
          // refetch when route change
          this.unsubscribe();
          this.queryData(this.props).then(function () {
            _this3.subscribe();
          });
        }
      }
    }, {
      key: "render",
      value: function render() {
        var _this$state = this.state,
            value = _this$state.value,
            isFetching = _this$state.isFetching,
            rootValue = _this$state.rootValue,
            originRootValue = _this$state.originRootValue;
        var _this$props = this.props,
            toolbar = _this$props.toolbar,
            query = _this$props.query,
            refId = _this$props.refId,
            items = _this$props.items,
            type = _this$props.type,
            path = _this$props.path,
            relation = _this$props.relation,
            pattern = _this$props.pattern,
            keyName = _this$props.keyName,
            request = _this$props.request,
            deploy = _this$props.deploy,
            nullable = _this$props.nullable;

        if (!originRootValue) {
          return React.createElement(_reactContentLoader.List, {
            style: {
              maxWidth: '600px'
            }
          });
        }

        if (pattern === 'array') {
          var queries = query.getQueries(path.split('/')).args || {
            pagination: {
              first: 10
            }
          };
          var variables = query.getVairables();
          var args = (0, _lodash.mapValues)(queries, function (v) {
            return variables[v.substr(1)];
          });
          return React.createElement(_index.default, {
            items: items,
            toolbar: toolbar,
            args: args,
            query: query,
            refId: refId,
            keyName: keyName,
            originRootValue: originRootValue,
            parseConnectionToNormal: _utils.parseConnectionToNormal,
            getValue: _utils.getValue,
            defaultValue: _utils.defaultValue,
            updateQuery: this.updateQuery,
            request: request,
            deploy: deploy
          }, React.createElement(SpinWrapper, {
            isFetching: isFetching
          }, React.createElement(Com, this.props)));
        } else if (type === 'relation' && relation.type === 'toOne') {
          return React.createElement(Com, (0, _extends2.default)({}, this.props, {
            showPagination: true,
            rootValue: rootValue,
            value: value && value.id ? value : (0, _utils.defaultValue)(type, relation)
          }));
        } else if (type === 'relation' && relation.type === 'toMany') {
          return React.createElement(Com, (0, _extends2.default)({}, this.props, {
            showPagination: true,
            rootValue: rootValue,
            value: (0, _lodash.isNil)(value) ? (0, _utils.defaultValue)('array', undefined, nullable) : value
          }));
        }

        return React.createElement(Com, (0, _extends2.default)({}, this.props, {
          showPagination: true,
          rootValue: rootValue,
          value: (0, _lodash.isNil)(value) ? (0, _utils.defaultValue)(type, relation, nullable) : value
        }));
      }
    }]);
    return ComponentWithQuery;
  }(React.PureComponent)) || _class;
}

var antIcon = React.createElement(_icon.default, {
  type: "loading",
  style: {
    fontSize: 24
  },
  spin: true
});

function SpinWrapper(_ref2) {
  var isFetching = _ref2.isFetching,
      children = _ref2.children,
      props = (0, _objectWithoutProperties2.default)(_ref2, ["isFetching", "children"]);
  return React.createElement(_spin.default, {
    indicator: antIcon,
    spinning: isFetching
  }, React.cloneElement(children, props));
}

function shouldUpdate(value, newValue) {
  return value != newValue;
}