index.js 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166
  1. import _defineProperty from 'babel-runtime/helpers/defineProperty';
  2. import _extends from 'babel-runtime/helpers/extends';
  3. import _typeof from 'babel-runtime/helpers/typeof';
  4. import classNames from 'classnames';
  5. import PropTypes from '../_util/vue-types';
  6. import { initDefaultProps, hasProp } from '../_util/props-util';
  7. import { ConfigConsumerProps } from '../config-provider/configConsumerProps';
  8. import Avatar, { SkeletonAvatarProps } from './Avatar';
  9. import Title, { SkeletonTitleProps } from './Title';
  10. import Paragraph, { SkeletonParagraphProps } from './Paragraph';
  11. import Base from '../base';
  12. export var SkeletonProps = {
  13. active: PropTypes.bool,
  14. loading: PropTypes.bool,
  15. prefixCls: PropTypes.string,
  16. children: PropTypes.any,
  17. avatar: PropTypes.oneOfType([PropTypes.string, SkeletonAvatarProps, PropTypes.bool]),
  18. title: PropTypes.oneOfType([PropTypes.bool, PropTypes.string, SkeletonTitleProps]),
  19. paragraph: PropTypes.oneOfType([PropTypes.bool, PropTypes.string, SkeletonParagraphProps])
  20. };
  21. function getComponentProps(prop) {
  22. if (prop && (typeof prop === 'undefined' ? 'undefined' : _typeof(prop)) === 'object') {
  23. return prop;
  24. }
  25. return {};
  26. }
  27. function getAvatarBasicProps(hasTitle, hasParagraph) {
  28. if (hasTitle && !hasParagraph) {
  29. return { shape: 'square' };
  30. }
  31. return { shape: 'circle' };
  32. }
  33. function getTitleBasicProps(hasAvatar, hasParagraph) {
  34. if (!hasAvatar && hasParagraph) {
  35. return { width: '38%' };
  36. }
  37. if (hasAvatar && hasParagraph) {
  38. return { width: '50%' };
  39. }
  40. return {};
  41. }
  42. function getParagraphBasicProps(hasAvatar, hasTitle) {
  43. var basicProps = {};
  44. // Width
  45. if (!hasAvatar || !hasTitle) {
  46. basicProps.width = '61%';
  47. }
  48. // Rows
  49. if (!hasAvatar && hasTitle) {
  50. basicProps.rows = 3;
  51. } else {
  52. basicProps.rows = 2;
  53. }
  54. return basicProps;
  55. }
  56. var Skeleton = {
  57. name: 'ASkeleton',
  58. props: initDefaultProps(SkeletonProps, {
  59. avatar: false,
  60. title: true,
  61. paragraph: true
  62. }),
  63. inject: {
  64. configProvider: { 'default': function _default() {
  65. return ConfigConsumerProps;
  66. } }
  67. },
  68. render: function render() {
  69. var h = arguments[0];
  70. var _$props = this.$props,
  71. customizePrefixCls = _$props.prefixCls,
  72. loading = _$props.loading,
  73. avatar = _$props.avatar,
  74. title = _$props.title,
  75. paragraph = _$props.paragraph,
  76. active = _$props.active;
  77. var getPrefixCls = this.configProvider.getPrefixCls;
  78. var prefixCls = getPrefixCls('skeleton', customizePrefixCls);
  79. if (loading || !hasProp(this, 'loading')) {
  80. var _classNames;
  81. var hasAvatar = !!avatar || avatar === '';
  82. var hasTitle = !!title;
  83. var hasParagraph = !!paragraph;
  84. // Avatar
  85. var avatarNode = void 0;
  86. if (hasAvatar) {
  87. var avatarProps = {
  88. props: _extends({
  89. prefixCls: prefixCls + '-avatar'
  90. }, getAvatarBasicProps(hasTitle, hasParagraph), getComponentProps(avatar))
  91. };
  92. avatarNode = h(
  93. 'div',
  94. { 'class': prefixCls + '-header' },
  95. [h(Avatar, avatarProps)]
  96. );
  97. }
  98. var contentNode = void 0;
  99. if (hasTitle || hasParagraph) {
  100. // Title
  101. var $title = void 0;
  102. if (hasTitle) {
  103. var titleProps = {
  104. props: _extends({
  105. prefixCls: prefixCls + '-title'
  106. }, getTitleBasicProps(hasAvatar, hasParagraph), getComponentProps(title))
  107. };
  108. $title = h(Title, titleProps);
  109. }
  110. // Paragraph
  111. var paragraphNode = void 0;
  112. if (hasParagraph) {
  113. var paragraphProps = {
  114. props: _extends({
  115. prefixCls: prefixCls + '-paragraph'
  116. }, getParagraphBasicProps(hasAvatar, hasTitle), getComponentProps(paragraph))
  117. };
  118. paragraphNode = h(Paragraph, paragraphProps);
  119. }
  120. contentNode = h(
  121. 'div',
  122. { 'class': prefixCls + '-content' },
  123. [$title, paragraphNode]
  124. );
  125. }
  126. var cls = classNames(prefixCls, (_classNames = {}, _defineProperty(_classNames, prefixCls + '-with-avatar', hasAvatar), _defineProperty(_classNames, prefixCls + '-active', active), _classNames));
  127. return h(
  128. 'div',
  129. { 'class': cls },
  130. [avatarNode, contentNode]
  131. );
  132. }
  133. var children = this.$slots['default'];
  134. return children && children.length === 1 ? children[0] : h('span', [children]);
  135. }
  136. };
  137. /* istanbul ignore next */
  138. Skeleton.install = function (Vue) {
  139. Vue.use(Base);
  140. Vue.component(Skeleton.name, Skeleton);
  141. };
  142. export default Skeleton;