Spin.js 7.3 KB

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