index.js 5.6 KB

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