Spin.js 7.1 KB

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