canner/lib/hocs/title.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.Label = Label;
exports.default = withTitleAndDescription;

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

var _row = _interopRequireDefault(require("antd/lib/row"));

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

var _alert = _interopRequireDefault(require("antd/lib/alert"));

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

var _col = _interopRequireDefault(require("antd/lib/col"));

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"));

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

var _tooltip = _interopRequireDefault(require("antd/lib/tooltip"));

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

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

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

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

var _antd = require("antd");

var _context = require("./context");

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

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

var _lodash = require("lodash");

function _templateObject2() {
  var data = (0, _taggedTemplateLiteral2.default)(["\n  color: red;\n  font-size: 14px;\n"]);

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

  return data;
}

function _templateObject() {
  var data = (0, _taggedTemplateLiteral2.default)(["\n  color: rgba(0, 0, 0, 0.85);\n  padding: ", "\n\n  & > span:before {\n    content: ", ";\n    color: red;\n  }\n"]);

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

  return data;
}

var Title = _styledComponents.default.div(_templateObject(), function (props) {
  return props.layout === 'horizontal' ? 0 : '0 0 8px';
}, function (props) {
  return props.required && props.title ? '"* "' : '""';
});

var ErrorMessage = _styledComponents.default.div(_templateObject2());

function Label(_ref) {
  var required = _ref.required,
      description = _ref.description,
      title = _ref.title,
      layout = _ref.layout;
  return React.createElement(Title, {
    required: required,
    title: title,
    layout: layout
  }, React.createElement("span", null, title), title && description && React.createElement(_tooltip.default, {
    placement: "top",
    title: description
  }, React.createElement(_icon.default, {
    type: "info-circle-o",
    style: {
      marginLeft: 12,
      color: '#aaa'
    }
  })));
} // $FlowFixMe


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

      function ComponentWithTitleAndDescription() {
        (0, _classCallCheck2.default)(this, ComponentWithTitleAndDescription);
        return (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(ComponentWithTitleAndDescription).apply(this, arguments));
      }

      (0, _createClass2.default)(ComponentWithTitleAndDescription, [{
        key: "shouldComponentUpdate",
        value: function shouldComponentUpdate(nextProps) {
          if (!(0, _lodash.isEqual)(nextProps.value, this.props.value) || !(0, _lodash.isEqual)(nextProps.relationValue, this.props.relationValue) || !(0, _lodash.isEqual)(nextProps.isRelationFetching, this.props.isRelationFetching) || nextProps.error !== this.props.error || nextProps.disabled !== this.props.disabled) {
            return true;
          }

          return false;
        }
      }, {
        key: "render",
        value: function render() {
          var _this$props = this.props,
              title = _this$props.title,
              layout = _this$props.layout,
              description = _this$props.description,
              hideTitle = _this$props.hideTitle,
              fetch = _this$props.fetch,
              subscribe = _this$props.subscribe,
              request = _this$props.request,
              deploy = _this$props.deploy,
              reset = _this$props.reset,
              query = _this$props.query,
              renderChildren = _this$props.renderChildren,
              renderComponent = _this$props.renderComponent,
              renderConfirmButton = _this$props.renderConfirmButton,
              renderCancelButton = _this$props.renderCancelButton,
              refId = _this$props.refId,
              routes = _this$props.routes,
              updateQuery = _this$props.updateQuery,
              type = _this$props.type,
              imageStorage = _this$props.imageStorage,
              onDeploy = _this$props.onDeploy,
              removeOnDeploy = _this$props.removeOnDeploy,
              required = _this$props.required,
              dataChanged = _this$props.dataChanged,
              error = _this$props.error,
              errorInfo = _this$props.errorInfo,
              beforeFetch = _this$props.beforeFetch;
          var labelCol = layout === 'horizontal' ? this.props.labelCol || {
            span: 6
          } : null;
          var itemCol = layout === 'horizontal' ? this.props.itemCol || {
            span: 14
          } : null; // $FlowFixMe: default funcitons in HOCContext only throw error, so they don't have any arguments

          return React.createElement(_context.HOCContext.Provider, {
            value: {
              fetch: fetch,
              subscribe: subscribe,
              request: request,
              deploy: deploy,
              reset: reset,
              query: query,
              updateQuery: updateQuery,
              onDeploy: onDeploy,
              removeOnDeploy: removeOnDeploy,
              dataChanged: dataChanged,
              beforeFetch: beforeFetch
            }
          }, React.createElement(_cannerHelpers.Context.Provider, {
            value: {
              renderChildren: renderChildren,
              renderComponent: renderComponent,
              renderConfirmButton: renderConfirmButton,
              renderCancelButton: renderCancelButton,
              refId: refId,
              routes: routes
            }
          }, React.createElement(_row.default, {
            type: layout === 'horizontal' ? 'flex' : '',
            style: {
              marginBottom: 24
            }
          }, React.createElement(_col.default, labelCol, React.createElement(Label, {
            required: required,
            type: type,
            layout: layout,
            description: description,
            title: hideTitle ? '' : title
          })), React.createElement(_col.default, itemCol, type === 'image' && (0, _lodash.isEmpty)(imageStorage) && React.createElement(_alert.default, {
            style: {
              margin: '16px 0'
            },
            message: "There is no storage config so you can't upload image. Checkout the storage section to know more",
            type: "warning"
          }), React.createElement(Com, this.props), error && React.createElement(ErrorMessage, null, errorInfo[0].message)))));
        }
      }]);
      return ComponentWithTitleAndDescription;
    }(React.Component)
  );
}