choerodon-ui/lib/skeleton/Skeleton.js

An enterprise-class UI design language and React-based implementation

"use strict";

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

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

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

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

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

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

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

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

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

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

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

var _classnames = _interopRequireDefault(require("classnames"));

var _Title = _interopRequireDefault(require("./Title"));

var _Grid = _interopRequireDefault(require("./Grid"));

var _Paragraph = _interopRequireDefault(require("./Paragraph"));

var _Element = _interopRequireDefault(require("./Element"));

var _ConfigContext = _interopRequireDefault(require("../config-provider/ConfigContext"));

function getComponentProps(prop) {
  if (prop && (0, _typeof2["default"])(prop) === 'object') {
    return prop;
  }

  return {};
}

function getAvatarBasicProps(hasTitle, hasParagraph) {
  if (hasTitle && !hasParagraph) {
    // Square avatar
    return {
      size: 'large',
      shape: 'square'
    };
  }

  return {
    size: 'large',
    shape: 'circle'
  };
}

function getTitleBasicProps(hasAvatar, hasParagraph) {
  if (!hasAvatar && hasParagraph) {
    return {
      width: '38%'
    };
  }

  if (hasAvatar && hasParagraph) {
    return {
      width: '50%'
    };
  }

  return {};
}

function getParagraphBasicProps(hasAvatar, hasTitle) {
  var basicProps = {}; // Width

  if (!hasAvatar || !hasTitle) {
    basicProps.width = '61%';
  } // Rows


  if (!hasAvatar && hasTitle) {
    basicProps.rows = 3;
  } else {
    basicProps.rows = 2;
  }

  return basicProps;
}

var Skeleton = /*#__PURE__*/function (_React$Component) {
  (0, _inherits2["default"])(Skeleton, _React$Component);

  var _super = (0, _createSuper2["default"])(Skeleton);

  function Skeleton() {
    var _this;

    (0, _classCallCheck2["default"])(this, Skeleton);
    _this = _super.apply(this, arguments);

    _this.renderSkeleton = function () {
      var _this$props = _this.props,
          customizePrefixCls = _this$props.prefixCls,
          loading = _this$props.loading,
          className = _this$props.className,
          children = _this$props.children,
          avatar = _this$props.avatar,
          title = _this$props.title,
          paragraph = _this$props.paragraph,
          active = _this$props.active,
          grid = _this$props.grid;
      var getPrefixCls = _this.context.getPrefixCls;
      var prefixCls = getPrefixCls('skeleton', customizePrefixCls);

      if (loading || !('loading' in _this.props)) {
        var _classNames;

        var hasAvatar = !!avatar;
        var hasTitle = !!title;
        var hasParagraph = !!paragraph;
        var hasGrid = !!grid; // Avatar

        var avatarNode;

        if (hasAvatar) {
          var avatarProps = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
            prefixCls: "".concat(prefixCls, "-avatar")
          }, getAvatarBasicProps(hasTitle, hasParagraph)), getComponentProps(avatar)); // We direct use SkeletonElement as avatar in skeleton internal.

          avatarNode = /*#__PURE__*/React.createElement("div", {
            className: "".concat(prefixCls, "-header")
          }, /*#__PURE__*/React.createElement(_Element["default"], (0, _extends2["default"])({}, avatarProps)));
        }

        var contentNode;

        if (hasTitle || hasParagraph || hasGrid) {
          // Title
          var $title;

          if (hasTitle) {
            var titleProps = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
              prefixCls: "".concat(prefixCls, "-title")
            }, getTitleBasicProps(hasAvatar, hasParagraph || hasGrid)), getComponentProps(title));
            $title = /*#__PURE__*/React.createElement(_Title["default"], (0, _extends2["default"])({}, titleProps));
          } // Paragraph


          var paragraphNode;

          if (hasParagraph) {
            var paragraphProps = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
              prefixCls: "".concat(prefixCls, "-paragraph")
            }, getParagraphBasicProps(hasAvatar, hasTitle)), getComponentProps(paragraph));
            paragraphNode = /*#__PURE__*/React.createElement(_Paragraph["default"], (0, _extends2["default"])({}, paragraphProps));
          } // Grid


          var gridNode;

          if (hasGrid) {
            var gridProps = (0, _objectSpread2["default"])({
              prefixCls: "".concat(prefixCls, "-grid")
            }, getComponentProps(grid));
            gridNode = /*#__PURE__*/React.createElement(_Grid["default"], (0, _extends2["default"])({}, gridProps));
          }

          contentNode = /*#__PURE__*/React.createElement("div", {
            className: "".concat(prefixCls, "-content")
          }, $title, paragraphNode, gridNode);
        }

        var cls = (0, _classnames["default"])(prefixCls, className, (_classNames = {}, (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-with-avatar"), hasAvatar), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-active"), active), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-rtl"), false), _classNames));
        return /*#__PURE__*/React.createElement("div", {
          className: cls
        }, avatarNode, contentNode);
      }

      return children;
    };

    return _this;
  }

  (0, _createClass2["default"])(Skeleton, [{
    key: "render",
    value: function render() {
      return /*#__PURE__*/React.createElement(React.Fragment, null, this.renderSkeleton());
    }
  }], [{
    key: "contextType",
    get: function get() {
      return _ConfigContext["default"];
    }
  }]);
  return Skeleton;
}(React.Component);

Skeleton.defaultProps = {
  avatar: false,
  title: true,
  paragraph: true
};
var _default = Skeleton;
exports["default"] = _default;
//# sourceMappingURL=Skeleton.js.map