canner/lib/components/index.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.genClient = genClient;
exports.default = void 0;

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

var _notification2 = _interopRequireDefault(require("antd/lib/notification"));

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

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

var _Provider = _interopRequireDefault(require("./Provider"));

var _Generator = _interopRequireDefault(require("./Generator"));

var _antd = require("antd");

var _cannerHelpers = require("canner-helpers");

var _cannerCompiler = require("canner-compiler");

var _cannerGraphqlInterface = require("canner-graphql-interface");

var _lodash = require("lodash");

var _en = _interopRequireDefault(require("react-intl/locale-data/en"));

var _zh = _interopRequireDefault(require("react-intl/locale-data/zh"));

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

var _locale = _interopRequireDefault(require("./locale"));

var _antdLocales = _interopRequireDefault(require("@canner/antd-locales"));

// i18n
(0, _reactIntl.addLocaleData)((0, _toConsumableArray2.default)(_en.default).concat((0, _toConsumableArray2.default)(_zh.default))); // type

var CannerCMS =
/*#__PURE__*/
function (_React$Component) {
  (0, _inherits2.default)(CannerCMS, _React$Component);

  function CannerCMS(props) {
    var _this;

    (0, _classCallCheck2.default)(this, CannerCMS);
    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(CannerCMS).call(this, props));
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "imageServiceConfigs", void 0);
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "client", void 0);
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "provider", void 0);
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "componentTree", void 0);
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "schema", void 0);
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "dataDidChange", function (dataChanged) {
      var dataDidChange = _this.props.dataDidChange;

      if (dataDidChange) {
        dataDidChange(dataChanged);
      }
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "deploy", function (key, id) {
      if (_this.provider) {
        return _this.provider.deploy(key, id);
      }

      return Promise.resolve();
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "reset", function (key, id) {
      if (_this.provider) {
        return _this.provider.reset(key, id);
      }

      return Promise.resolve();
    });
    var _props$schema = props.schema,
        schema = _props$schema.schema,
        visitors = _props$schema.visitors,
        pageSchema = _props$schema.pageSchema;
    var uiSchema = (0, _objectSpread2.default)({}, pageSchema, (0, _lodash.pickBy)(schema, function (v) {
      return !v.defOnly;
    }));
    _this.componentTree = compile(uiSchema, visitors);
    _this.schema = Object.keys(schema).reduce(function (result, key) {
      var v = (0, _objectSpread2.default)({}, schema[key]);

      if (v.type === 'array') {
        // v.items = v.items.items;
        v.items.id = {
          type: 'id'
        };
      }

      result[key] = v;
      return result;
    }, {});
    _this.client = genClient((0, _objectSpread2.default)({}, props.schema, {
      schema: schema
    }));
    return _this;
  }

  (0, _createClass2.default)(CannerCMS, [{
    key: "componentDidCatch",
    value: function componentDidCatch(error) {
      var errorHandler = this.props.errorHandler;
      errorHandler && errorHandler(error);
    }
  }, {
    key: "render",
    value: function render() {
      var _this2 = this;

      var _this$props = this.props,
          baseUrl = _this$props.baseUrl,
          routes = _this$props.routes,
          routerParams = _this$props.routerParams,
          goTo = _this$props.goTo,
          afterDeploy = _this$props.afterDeploy,
          beforeDeploy = _this$props.beforeDeploy,
          beforeFetch = _this$props.beforeFetch,
          _this$props$intl = _this$props.intl,
          intl = _this$props$intl === void 0 ? {} : _this$props$intl,
          hideButtons = _this$props.hideButtons,
          errorHandler = _this$props.errorHandler,
          _this$props$schema = _this$props.schema,
          imageStorages = _this$props$schema.imageStorages,
          fileStorages = _this$props$schema.fileStorages,
          _this$props$schema$di = _this$props$schema.dict,
          dict = _this$props$schema$di === void 0 ? {} : _this$props$schema$di,
          defaultKey = _this$props.defaultKey;
      var currentLocale = intl.locale || 'en';
      return React.createElement(_reactIntl.IntlProvider, {
        locale: currentLocale,
        key: currentLocale,
        defaultLocale: intl.defaultLocale || currentLocale,
        messages: (0, _objectSpread2.default)({}, _antdLocales.default[currentLocale] || {}, _locale.default[currentLocale] || {}, dict[currentLocale] || {}, (intl.messages || {})[currentLocale] || {})
      }, React.createElement(_Provider.default, {
        ref: function ref(provider) {
          return _this2.provider = provider;
        },
        client: this.client,
        schema: this.schema,
        dataDidChange: this.dataDidChange,
        afterDeploy: afterDeploy,
        beforeDeploy: beforeDeploy,
        beforeFetch: beforeFetch,
        rootKey: routes[0],
        routes: routes,
        routerParams: routerParams || {},
        errorHandler: errorHandler || defaultErrorHandler
      }, React.createElement(_Generator.default, {
        imageStorages: imageStorages,
        fileStorages: fileStorages,
        schema: this.schema,
        componentTree: this.componentTree || {},
        goTo: goTo,
        baseUrl: baseUrl,
        routes: routes,
        routerParams: routerParams || {},
        hideButtons: hideButtons,
        defaultKey: defaultKey
      })));
    }
  }]);
  return CannerCMS;
}(React.Component);

(0, _defineProperty2.default)(CannerCMS, "defaultProps", {
  schema: {
    schema: {}
  },
  dataDidChange: function dataDidChange() {},
  afterDeploy: function afterDeploy() {},
  baseUrl: '/',
  intl: {
    locale: 'en',
    defaultLocale: 'en',
    messages: {
      'en': {}
    }
  },
  routerParams: {},
  routes: []
});

function compile(schema, visitors) {
  var parser = new _cannerCompiler.Parser();
  var tree = parser.parse(schema);
  var traverser = new _cannerCompiler.Traverser(tree);
  visitors.forEach(function (visitor) {
    traverser.addVisitor(visitor);
  });
  var componentTree = traverser.traverse();
  return componentTree;
}

function genClient(schema) {
  var resolvers = schema.resolvers,
      connector = schema.connector,
      graphqlClient = schema.graphqlClient;
  var options = {
    schema: schema.schema
  };

  if (connector) {
    if ((0, _lodash.isPlainObject)(connector)) {
      if (!(0, _lodash.isEmpty)(connector)) {
        options.connectors = connector;
      }
    } else {
      options.connector = connector;
    }
  }

  if (graphqlClient) {
    if ((0, _lodash.isPlainObject)(graphqlClient)) {
      if (!(0, _lodash.isEmpty)(connector)) {
        options.graphqlClients = graphqlClient;
      }
    } else {
      options.graphqlClient = graphqlClient;
    }
  }

  if ((0, _lodash.isEmpty)(connector) && (0, _lodash.isEmpty)(graphqlClient)) {
    options.connector = new _cannerGraphqlInterface.MemoryConnector({
      defaultData: (0, _cannerHelpers.createFakeData)(schema.schema, 10)
    });
  }

  if (!(0, _lodash.isEmpty)(resolvers)) {
    options.resolvers = resolvers;
  }

  return (0, _cannerGraphqlInterface.createClient)(options);
}

function defaultErrorHandler(e) {
  return _notification2.default.error({
    message: e.message,
    placement: 'bottomRight'
  });
}

var _default = CannerCMS;
exports.default = _default;