Spin.js 6.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173
  1. import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
  2. import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
  3. import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
  4. var _excluded = ["class", "style"];
  5. import { createVNode as _createVNode } from "vue";
  6. import { inject, cloneVNode, isVNode, defineComponent, nextTick } from 'vue';
  7. import debounce from 'lodash-es/debounce';
  8. import PropTypes from '../_util/vue-types';
  9. import { getComponent, getSlot } from '../_util/props-util';
  10. import initDefaultProps from '../_util/props-util/initDefaultProps';
  11. import { defaultConfigProvider } from '../config-provider';
  12. export var spinProps = function spinProps() {
  13. return {
  14. prefixCls: String,
  15. spinning: {
  16. type: Boolean,
  17. default: undefined
  18. },
  19. size: String,
  20. wrapperClassName: String,
  21. tip: PropTypes.any,
  22. delay: Number,
  23. indicator: PropTypes.any
  24. };
  25. };
  26. // Render indicator
  27. var defaultIndicator = null;
  28. function shouldDelay(spinning, delay) {
  29. return !!spinning && !!delay && !isNaN(Number(delay));
  30. }
  31. export function setDefaultIndicator(Content) {
  32. var Indicator = Content.indicator;
  33. defaultIndicator = typeof Indicator === 'function' ? Indicator : function () {
  34. return _createVNode(Indicator, null, null);
  35. };
  36. }
  37. export default defineComponent({
  38. compatConfig: {
  39. MODE: 3
  40. },
  41. name: 'ASpin',
  42. inheritAttrs: false,
  43. props: initDefaultProps(spinProps(), {
  44. size: 'default',
  45. spinning: true,
  46. wrapperClassName: ''
  47. }),
  48. setup: function setup() {
  49. return {
  50. originalUpdateSpinning: null,
  51. configProvider: inject('configProvider', defaultConfigProvider)
  52. };
  53. },
  54. data: function data() {
  55. var spinning = this.spinning,
  56. delay = this.delay;
  57. var shouldBeDelayed = shouldDelay(spinning, delay);
  58. return {
  59. sSpinning: spinning && !shouldBeDelayed
  60. };
  61. },
  62. created: function created() {
  63. this.originalUpdateSpinning = this.updateSpinning;
  64. this.debouncifyUpdateSpinning(this.$props);
  65. },
  66. mounted: function mounted() {
  67. this.updateSpinning();
  68. },
  69. updated: function updated() {
  70. var _this = this;
  71. nextTick(function () {
  72. _this.debouncifyUpdateSpinning();
  73. _this.updateSpinning();
  74. });
  75. },
  76. beforeUnmount: function beforeUnmount() {
  77. this.cancelExistingSpin();
  78. },
  79. methods: {
  80. debouncifyUpdateSpinning: function debouncifyUpdateSpinning(props) {
  81. var _ref = props || this.$props,
  82. delay = _ref.delay;
  83. if (delay) {
  84. this.cancelExistingSpin();
  85. this.updateSpinning = debounce(this.originalUpdateSpinning, delay);
  86. }
  87. },
  88. updateSpinning: function updateSpinning() {
  89. var spinning = this.spinning,
  90. sSpinning = this.sSpinning;
  91. if (sSpinning !== spinning) {
  92. this.sSpinning = spinning;
  93. }
  94. },
  95. cancelExistingSpin: function cancelExistingSpin() {
  96. var updateSpinning = this.updateSpinning;
  97. if (updateSpinning && updateSpinning.cancel) {
  98. updateSpinning.cancel();
  99. }
  100. },
  101. renderIndicator: function renderIndicator(prefixCls) {
  102. var dotClassName = "".concat(prefixCls, "-dot");
  103. var indicator = getComponent(this, 'indicator');
  104. // should not be render default indicator when indicator value is null
  105. if (indicator === null) {
  106. return null;
  107. }
  108. if (Array.isArray(indicator)) {
  109. indicator = indicator.length === 1 ? indicator[0] : indicator;
  110. }
  111. if (isVNode(indicator)) {
  112. return cloneVNode(indicator, {
  113. class: dotClassName
  114. });
  115. }
  116. if (defaultIndicator && isVNode(defaultIndicator())) {
  117. return cloneVNode(defaultIndicator(), {
  118. class: dotClassName
  119. });
  120. }
  121. return _createVNode("span", {
  122. "class": "".concat(dotClassName, " ").concat(prefixCls, "-dot-spin")
  123. }, [_createVNode("i", {
  124. "class": "".concat(prefixCls, "-dot-item")
  125. }, null), _createVNode("i", {
  126. "class": "".concat(prefixCls, "-dot-item")
  127. }, null), _createVNode("i", {
  128. "class": "".concat(prefixCls, "-dot-item")
  129. }, null), _createVNode("i", {
  130. "class": "".concat(prefixCls, "-dot-item")
  131. }, null)]);
  132. }
  133. },
  134. render: function render() {
  135. var _this$$slots$tip, _this$$slots, _spinClassName;
  136. var _this$$props = this.$props,
  137. size = _this$$props.size,
  138. customizePrefixCls = _this$$props.prefixCls,
  139. _this$$props$tip = _this$$props.tip,
  140. tip = _this$$props$tip === void 0 ? (_this$$slots$tip = (_this$$slots = this.$slots).tip) === null || _this$$slots$tip === void 0 ? void 0 : _this$$slots$tip.call(_this$$slots) : _this$$props$tip,
  141. wrapperClassName = _this$$props.wrapperClassName;
  142. var _this$$attrs = this.$attrs,
  143. cls = _this$$attrs.class,
  144. style = _this$$attrs.style,
  145. divProps = _objectWithoutProperties(_this$$attrs, _excluded);
  146. var _this$configProvider = this.configProvider,
  147. getPrefixCls = _this$configProvider.getPrefixCls,
  148. direction = _this$configProvider.direction;
  149. var prefixCls = getPrefixCls('spin', customizePrefixCls);
  150. var sSpinning = this.sSpinning;
  151. var spinClassName = (_spinClassName = {}, _defineProperty(_spinClassName, prefixCls, true), _defineProperty(_spinClassName, "".concat(prefixCls, "-sm"), size === 'small'), _defineProperty(_spinClassName, "".concat(prefixCls, "-lg"), size === 'large'), _defineProperty(_spinClassName, "".concat(prefixCls, "-spinning"), sSpinning), _defineProperty(_spinClassName, "".concat(prefixCls, "-show-text"), !!tip), _defineProperty(_spinClassName, "".concat(prefixCls, "-rtl"), direction === 'rtl'), _defineProperty(_spinClassName, cls, !!cls), _spinClassName);
  152. var spinElement = _createVNode("div", _objectSpread(_objectSpread({}, divProps), {}, {
  153. "style": style,
  154. "class": spinClassName
  155. }), [this.renderIndicator(prefixCls), tip ? _createVNode("div", {
  156. "class": "".concat(prefixCls, "-text")
  157. }, [tip]) : null]);
  158. var children = getSlot(this);
  159. if (children && children.length) {
  160. var _containerClassName;
  161. var containerClassName = (_containerClassName = {}, _defineProperty(_containerClassName, "".concat(prefixCls, "-container"), true), _defineProperty(_containerClassName, "".concat(prefixCls, "-blur"), sSpinning), _containerClassName);
  162. return _createVNode("div", {
  163. "class": ["".concat(prefixCls, "-nested-loading"), wrapperClassName]
  164. }, [sSpinning && _createVNode("div", {
  165. "key": "loading"
  166. }, [spinElement]), _createVNode("div", {
  167. "class": containerClassName,
  168. "key": "container"
  169. }, [children])]);
  170. }
  171. return spinElement;
  172. }
  173. });