feat: update spin

Author: tangjinzhou

build/config.js

@@ -1,5 +1,5 @@
 module.exports = {
   dev: {
-    componentName: 'form', // dev components
+    componentName: 'spin', // dev components
   },
 };

components/spin/Spin.jsx

@@ -30,12 +30,12 @@ function shouldDelay(spinning, delay) {
   return !!spinning && !!delay && !isNaN(Number(delay));
 }
 
-export function setDefaultIndicator(content) {
+export function setDefaultIndicator(Content) {
   defaultIndicator =
-    typeof content.indicator === 'function'
-      ? content.indicator
+    typeof Content.indicator === 'function'
+      ? Content.indicator
       : h => {
-          return <content.indicator />;
+          return <Content.indicator />;
         };
 }
 
@@ -69,14 +69,13 @@ export default {
     });
   },
   beforeDestroy() {
-    if (this.updateSpinning && this.updateSpinning.cancel) {
-      this.updateSpinning.cancel();
-    }
+    this.cancelExistingSpin();
   },
   methods: {
     debouncifyUpdateSpinning(props) {
       const { delay } = props || this.$props;
       if (delay) {
+        this.cancelExistingSpin();
         this.updateSpinning = debounce(this.originalUpdateSpinning, delay);
       }
     },
@@ -86,6 +85,12 @@ export default {
         this.setState({ sSpinning: spinning });
       }
     },
+    cancelExistingSpin() {
+      const { updateSpinning } = this;
+      if (updateSpinning && updateSpinning.cancel) {
+        updateSpinning.cancel();
+      }
+    },
     getChildren() {
       if (this.$slots && this.$slots.default) {
         return filterEmpty(this.$slots.default);
@@ -96,6 +101,10 @@ export default {
       // const h = this.$createElement
       const dotClassName = `${prefixCls}-dot`;
       let indicator = getComponentFromProp(this, 'indicator');
+      // should not be render default indicator when indicator value is null
+      if (indicator === null) {
+        return null;
+      }
       if (Array.isArray(indicator)) {
         indicator = filterEmpty(indicator);
         indicator = indicator.length === 1 ? indicator[0] : indicator;
@@ -110,10 +119,10 @@ export default {
 
       return (
         <span class={`${dotClassName} ${prefixCls}-dot-spin`}>
-          <i />
-          <i />
-          <i />
-          <i />
+          <i class={`${prefixCls}-dot-item`} />
+          <i class={`${prefixCls}-dot-item`} />
+          <i class={`${prefixCls}-dot-item`} />
+          <i class={`${prefixCls}-dot-item`} />
         </span>
       );
     },

components/spin/__tests__/__snapshots__/demo.test.js.snap

@@ -2,7 +2,7 @@
 
 exports[`renders ./components/spin/demo/basic.md correctly 1`] = `
 <div>
-  <div class="ant-spin ant-spin-spinning"><span class="ant-spin-dot ant-spin-dot-spin"><i></i><i></i><i></i><i></i></span></div>
+  <div class="ant-spin ant-spin-spinning"><span class="ant-spin-dot ant-spin-dot-spin"><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i></span></div>
 </div>
 `;
 
@@ -33,7 +33,7 @@ exports[`renders ./components/spin/demo/delayAndDebounce.md correctly 1`] = `
 
 exports[`renders ./components/spin/demo/inside.md correctly 1`] = `
 <div class="example">
-  <div class="ant-spin ant-spin-spinning"><span class="ant-spin-dot ant-spin-dot-spin"><i></i><i></i><i></i><i></i></span></div>
+  <div class="ant-spin ant-spin-spinning"><span class="ant-spin-dot ant-spin-dot-spin"><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i></span></div>
 </div>
 `;
 
@@ -52,17 +52,17 @@ exports[`renders ./components/spin/demo/nested.md correctly 1`] = `
 
 exports[`renders ./components/spin/demo/size.md correctly 1`] = `
 <div>
-  <div class="ant-spin ant-spin-sm ant-spin-spinning"><span class="ant-spin-dot ant-spin-dot-spin"><i></i><i></i><i></i><i></i></span></div>
-  <div class="ant-spin ant-spin-spinning"><span class="ant-spin-dot ant-spin-dot-spin"><i></i><i></i><i></i><i></i></span></div>
-  <div class="ant-spin ant-spin-lg ant-spin-spinning"><span class="ant-spin-dot ant-spin-dot-spin"><i></i><i></i><i></i><i></i></span></div>
+  <div class="ant-spin ant-spin-sm ant-spin-spinning"><span class="ant-spin-dot ant-spin-dot-spin"><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i></span></div>
+  <div class="ant-spin ant-spin-spinning"><span class="ant-spin-dot ant-spin-dot-spin"><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i></span></div>
+  <div class="ant-spin ant-spin-lg ant-spin-spinning"><span class="ant-spin-dot ant-spin-dot-spin"><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i></span></div>
 </div>
 `;
 
 exports[`renders ./components/spin/demo/tip.md correctly 1`] = `
 <div>
   <div class="ant-spin-nested-loading">
     <div>
-      <div class="ant-spin ant-spin-spinning ant-spin-show-text"><span class="ant-spin-dot ant-spin-dot-spin"><i></i><i></i><i></i><i></i></span>
+      <div class="ant-spin ant-spin-spinning ant-spin-show-text"><span class="ant-spin-dot ant-spin-dot-spin"><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i></span>
         <div class="ant-spin-text">Loading...</div>
       </div>
     </div>

components/spin/__tests__/__snapshots__/index.test.js.snap

@@ -3,7 +3,7 @@
 exports[`Spin should only affect the spin element when set style to a nested <Spin>xx</Spin> 1`] = `
 <div class="ant-spin-nested-loading" style="background: red;">
   <div>
-    <div class="ant-spin ant-spin-spinning"><span class="ant-spin-dot ant-spin-dot-spin"><i></i><i></i><i></i><i></i></span></div>
+    <div class="ant-spin ant-spin-spinning"><span class="ant-spin-dot ant-spin-dot-spin"><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i></span></div>
   </div>
   <div class="ant-spin-container ant-spin-blur">
     <div>content</div>