fix: spin classname undefined

antdv-demo

@@ -1 +1 @@
-Subproject commit e03b6665dabc7b2d464ab9c7f44de66702ca1727
+Subproject commit d76dd882c7b266a479533515b428c90b5630a92a

components/spin/Spin.jsx

@@ -2,7 +2,7 @@ import { inject, cloneVNode, isVNode } from 'vue';
 import debounce from 'lodash/debounce';
 import PropTypes from '../_util/vue-types';
 import BaseMixin from '../_util/BaseMixin';
-import { filterEmpty, initDefaultProps, getComponent } from '../_util/props-util';
+import { initDefaultProps, getComponent, getSlot } from '../_util/props-util';
 import { ConfigConsumerProps } from '../config-provider';
 
 export const SpinSize = PropTypes.oneOf(['small', 'default', 'large']);
@@ -89,13 +89,7 @@ export default {
         updateSpinning.cancel();
       }
     },
-    getChildren() {
-      if (this.$slots && this.$slots.default) {
-        return filterEmpty(this.$slots.default());
-      }
-      return null;
-    },
-    renderIndicator(h, prefixCls) {
+    renderIndicator(prefixCls) {
       const dotClassName = `${prefixCls}-dot`;
       let indicator = getComponent(this, 'indicator');
       // should not be render default indicator when indicator value is null
@@ -103,15 +97,14 @@ export default {
         return null;
       }
       if (Array.isArray(indicator)) {
-        indicator = filterEmpty(indicator);
         indicator = indicator.length === 1 ? indicator[0] : indicator;
       }
       if (isVNode(indicator)) {
         return cloneVNode(indicator, { class: dotClassName });
       }
 
-      if (defaultIndicator && isVNode(defaultIndicator(h))) {
-        return cloneVNode(defaultIndicator(h), { class: dotClassName });
+      if (defaultIndicator && isVNode(defaultIndicator())) {
+        return cloneVNode(defaultIndicator(), { class: dotClassName });
       }
 
       return (
@@ -124,7 +117,7 @@ export default {
       );
     },
   },
-  render(h) {
+  render() {
     const { size, prefixCls: customizePrefixCls, tip, wrapperClassName } = this.$props;
     const { class: cls, style, ...divProps } = this.$attrs;
     const getPrefixCls = this.configProvider.getPrefixCls;
@@ -137,17 +130,17 @@ export default {
       [`${prefixCls}-lg`]: size === 'large',
       [`${prefixCls}-spinning`]: sSpinning,
       [`${prefixCls}-show-text`]: !!tip,
-      [cls]: true,
+      [cls]: !!cls,
     };
 
     const spinElement = (
       <div {...divProps} style={style} class={spinClassName}>
-        {this.renderIndicator(h, prefixCls)}
+        {this.renderIndicator(prefixCls)}
         {tip ? <div class={`${prefixCls}-text`}>{tip}</div> : null}
       </div>
     );
-    const children = this.getChildren();
-    if (children) {
+    const children = getSlot(this);
+    if (children && children.length) {
       const containerClassName = {
         [`${prefixCls}-container`]: true,
         [`${prefixCls}-blur`]: sSpinning,

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

@@ -1,9 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 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 class="ant-spin-nested-loading">
   <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 style="background: red;" 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>
@@ -14,5 +16,6 @@ exports[`Spin should only affect the spin element when set style to a nested <Sp
 exports[`Spin should render custom indicator when it's set 1`] = `
 <div class="ant-spin ant-spin-spinning">
   <div class="custom-indicator ant-spin-dot"></div>
+  <!---->
 </div>
 `;

components/spin/__tests__/delay.test.js

@@ -34,8 +34,7 @@ describe('delay spinning', () => {
 
     expect(
       wrapper
-        .findAll('.ant-spin')
-        .at(0)
+        .findAll('.ant-spin')[0]
         .classes()
         .includes('ant-spin-spinning'),
     ).toEqual(false);
@@ -46,8 +45,7 @@ describe('delay spinning', () => {
 
     expect(
       wrapper
-        .findAll('.ant-spin')
-        .at(0)
+        .findAll('.ant-spin')[0]
         .classes()
         .includes('ant-spin-spinning'),
     ).toEqual(true);

components/spin/__tests__/index.test.js

@@ -22,11 +22,7 @@ describe('Spin', () => {
     // const customIndicator = <div className='custom-indicator' />
     const wrapper = mount({
       render() {
-        return (
-          <Spin>
-            <div slot="indicator" class="custom-indicator" />
-          </Spin>
-        );
+        return <Spin indicator={<div class="custom-indicator" />}></Spin>;
       },
     });
     expect(wrapper.html()).toMatchSnapshot();

examples/App.vue

@@ -4,7 +4,7 @@
   </div>
 </template>
 <script>
-import demo from '../antdv-demo/docs/skeleton/demo/index';
+import demo from '../antdv-demo/docs/spin/demo/index';
 
 export default {
   components: {