Spin.js 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185
  1. import _mergeJSXProps from 'babel-helper-vue-jsx-merge-props';
  2. import _defineProperty from 'babel-runtime/helpers/defineProperty';
  3. import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
  4. import debounce from 'lodash/debounce';
  5. import PropTypes from '../_util/vue-types';
  6. import BaseMixin from '../_util/BaseMixin';
  7. import { filterEmpty, initDefaultProps, isValidElement, getComponentFromProp, getListeners } from '../_util/props-util';
  8. import { cloneElement } from '../_util/vnode';
  9. import { ConfigConsumerProps } from '../config-provider/configConsumerProps';
  10. export var SpinSize = PropTypes.oneOf(['small', 'default', 'large']);
  11. export var SpinProps = function SpinProps() {
  12. return {
  13. prefixCls: PropTypes.string,
  14. spinning: PropTypes.bool,
  15. size: SpinSize,
  16. wrapperClassName: PropTypes.string,
  17. tip: PropTypes.string,
  18. delay: PropTypes.number,
  19. indicator: PropTypes.any
  20. };
  21. };
  22. // Render indicator
  23. var defaultIndicator = void 0;
  24. function shouldDelay(spinning, delay) {
  25. return !!spinning && !!delay && !isNaN(Number(delay));
  26. }
  27. export function setDefaultIndicator(Content) {
  28. defaultIndicator = typeof Content.indicator === 'function' ? Content.indicator : function (h) {
  29. return h(Content.indicator);
  30. };
  31. }
  32. export default {
  33. name: 'ASpin',
  34. mixins: [BaseMixin],
  35. props: initDefaultProps(SpinProps(), {
  36. size: 'default',
  37. spinning: true,
  38. wrapperClassName: ''
  39. }),
  40. inject: {
  41. configProvider: { 'default': function _default() {
  42. return ConfigConsumerProps;
  43. } }
  44. },
  45. data: function data() {
  46. var spinning = this.spinning,
  47. delay = this.delay;
  48. var shouldBeDelayed = shouldDelay(spinning, delay);
  49. this.originalUpdateSpinning = this.updateSpinning;
  50. this.debouncifyUpdateSpinning(this.$props);
  51. return {
  52. sSpinning: spinning && !shouldBeDelayed
  53. };
  54. },
  55. mounted: function mounted() {
  56. this.updateSpinning();
  57. },
  58. updated: function updated() {
  59. var _this = this;
  60. this.$nextTick(function () {
  61. _this.debouncifyUpdateSpinning();
  62. _this.updateSpinning();
  63. });
  64. },
  65. beforeDestroy: function beforeDestroy() {
  66. this.cancelExistingSpin();
  67. },
  68. methods: {
  69. debouncifyUpdateSpinning: function debouncifyUpdateSpinning(props) {
  70. var _ref = props || this.$props,
  71. delay = _ref.delay;
  72. if (delay) {
  73. this.cancelExistingSpin();
  74. this.updateSpinning = debounce(this.originalUpdateSpinning, delay);
  75. }
  76. },
  77. updateSpinning: function updateSpinning() {
  78. var spinning = this.spinning,
  79. sSpinning = this.sSpinning;
  80. if (sSpinning !== spinning) {
  81. this.setState({ sSpinning: spinning });
  82. }
  83. },
  84. cancelExistingSpin: function cancelExistingSpin() {
  85. var updateSpinning = this.updateSpinning;
  86. if (updateSpinning && updateSpinning.cancel) {
  87. updateSpinning.cancel();
  88. }
  89. },
  90. getChildren: function getChildren() {
  91. if (this.$slots && this.$slots['default']) {
  92. return filterEmpty(this.$slots['default']);
  93. }
  94. return null;
  95. },
  96. renderIndicator: function renderIndicator(h, prefixCls) {
  97. // const h = this.$createElement
  98. var dotClassName = prefixCls + '-dot';
  99. var indicator = getComponentFromProp(this, 'indicator');
  100. // should not be render default indicator when indicator value is null
  101. if (indicator === null) {
  102. return null;
  103. }
  104. if (Array.isArray(indicator)) {
  105. indicator = filterEmpty(indicator);
  106. indicator = indicator.length === 1 ? indicator[0] : indicator;
  107. }
  108. if (isValidElement(indicator)) {
  109. return cloneElement(indicator, { 'class': dotClassName });
  110. }
  111. if (defaultIndicator && isValidElement(defaultIndicator(h))) {
  112. return cloneElement(defaultIndicator(h), { 'class': dotClassName });
  113. }
  114. return h(
  115. 'span',
  116. { 'class': dotClassName + ' ' + prefixCls + '-dot-spin' },
  117. [h('i', { 'class': prefixCls + '-dot-item' }), h('i', { 'class': prefixCls + '-dot-item' }), h('i', { 'class': prefixCls + '-dot-item' }), h('i', { 'class': prefixCls + '-dot-item' })]
  118. );
  119. }
  120. },
  121. render: function render(h) {
  122. var _spinClassName;
  123. var _$props = this.$props,
  124. size = _$props.size,
  125. customizePrefixCls = _$props.prefixCls,
  126. tip = _$props.tip,
  127. wrapperClassName = _$props.wrapperClassName,
  128. restProps = _objectWithoutProperties(_$props, ['size', 'prefixCls', 'tip', 'wrapperClassName']);
  129. var getPrefixCls = this.configProvider.getPrefixCls;
  130. var prefixCls = getPrefixCls('spin', customizePrefixCls);
  131. var sSpinning = this.sSpinning;
  132. var spinClassName = (_spinClassName = {}, _defineProperty(_spinClassName, prefixCls, true), _defineProperty(_spinClassName, prefixCls + '-sm', size === 'small'), _defineProperty(_spinClassName, prefixCls + '-lg', size === 'large'), _defineProperty(_spinClassName, prefixCls + '-spinning', sSpinning), _defineProperty(_spinClassName, prefixCls + '-show-text', !!tip), _spinClassName);
  133. var spinElement = h(
  134. 'div',
  135. _mergeJSXProps([restProps, { 'class': spinClassName }]),
  136. [this.renderIndicator(h, prefixCls), tip ? h(
  137. 'div',
  138. { 'class': prefixCls + '-text' },
  139. [tip]
  140. ) : null]
  141. );
  142. var children = this.getChildren();
  143. if (children) {
  144. var _containerClassName;
  145. var containerClassName = (_containerClassName = {}, _defineProperty(_containerClassName, prefixCls + '-container', true), _defineProperty(_containerClassName, prefixCls + '-blur', sSpinning), _containerClassName);
  146. return h(
  147. 'div',
  148. _mergeJSXProps([{ on: getListeners(this) }, {
  149. 'class': [prefixCls + '-nested-loading', wrapperClassName]
  150. }]),
  151. [sSpinning && h(
  152. 'div',
  153. { key: 'loading' },
  154. [spinElement]
  155. ), h(
  156. 'div',
  157. { 'class': containerClassName, key: 'container' },
  158. [children]
  159. )]
  160. );
  161. }
  162. return spinElement;
  163. }
  164. };