choerodon-ui/es/skeleton/Skeleton.js

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

import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _extends from "@babel/runtime/helpers/extends";
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _inherits from "@babel/runtime/helpers/inherits";
import _createSuper from "@babel/runtime/helpers/createSuper";
import _typeof from "@babel/runtime/helpers/typeof";
import * as React from 'react';
import classNames from 'classnames';
import Title from './Title';
import Grid from './Grid';
import Paragraph from './Paragraph';
import Element from './Element';
import ConfigContext from '../config-provider/ConfigContext';

function getComponentProps(prop) {
  if (prop && _typeof(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) {
  _inherits(Skeleton, _React$Component);

  var _super = _createSuper(Skeleton);

  function Skeleton() {
    var _this;

    _classCallCheck(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 = _objectSpread(_objectSpread({
            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, _extends({}, avatarProps)));
        }

        var contentNode;

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

          if (hasTitle) {
            var titleProps = _objectSpread(_objectSpread({
              prefixCls: "".concat(prefixCls, "-title")
            }, getTitleBasicProps(hasAvatar, hasParagraph || hasGrid)), getComponentProps(title));

            $title = /*#__PURE__*/React.createElement(Title, _extends({}, titleProps));
          } // Paragraph


          var paragraphNode;

          if (hasParagraph) {
            var paragraphProps = _objectSpread(_objectSpread({
              prefixCls: "".concat(prefixCls, "-paragraph")
            }, getParagraphBasicProps(hasAvatar, hasTitle)), getComponentProps(paragraph));

            paragraphNode = /*#__PURE__*/React.createElement(Paragraph, _extends({}, paragraphProps));
          } // Grid


          var gridNode;

          if (hasGrid) {
            var gridProps = _objectSpread({
              prefixCls: "".concat(prefixCls, "-grid")
            }, getComponentProps(grid));

            gridNode = /*#__PURE__*/React.createElement(Grid, _extends({}, gridProps));
          }

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

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

      return children;
    };

    return _this;
  }

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

  return Skeleton;
}(React.Component);

Skeleton.defaultProps = {
  avatar: false,
  title: true,
  paragraph: true
};
export default Skeleton;
//# sourceMappingURL=Skeleton.js.map