Add spin dot className to custom indicator

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

@@ -364,7 +364,7 @@ exports[`renders ./components/list/demo/infinite-virtualized-load.md correctly 1
       class="ant-spin"
     >
       <span
-        class="ant-spin-dot"
+        class="ant-spin-dot ant-spin-dot-spin"
       >
         <i />
         <i />
@@ -389,7 +389,7 @@ exports[`renders ./components/list/demo/loadmore.md correctly 1`] = `
           class="ant-spin ant-spin-spinning"
         >
           <span
-            class="ant-spin-dot"
+            class="ant-spin-dot ant-spin-dot-spin"
           >
             <i />
             <i />

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

@@ -5,7 +5,7 @@ exports[`renders ./components/spin/demo/basic.md correctly 1`] = `
   class="ant-spin ant-spin-spinning"
 >
   <span
-    class="ant-spin-dot"
+    class="ant-spin-dot ant-spin-dot-spin"
   >
     <i />
     <i />
@@ -20,7 +20,7 @@ exports[`renders ./components/spin/demo/custom-indicator.md correctly 1`] = `
   class="ant-spin ant-spin-spinning"
 >
   <i
-    class="anticon anticon-spin anticon-loading"
+    class="anticon anticon-spin anticon-loading ant-spin-dot"
     style="font-size:24px"
   />
 </div>
@@ -75,7 +75,7 @@ exports[`renders ./components/spin/demo/inside.md correctly 1`] = `
     class="ant-spin ant-spin-spinning"
   >
     <span
-      class="ant-spin-dot"
+      class="ant-spin-dot ant-spin-dot-spin"
     >
       <i />
       <i />
@@ -133,7 +133,7 @@ exports[`renders ./components/spin/demo/size.md correctly 1`] = `
     class="ant-spin ant-spin-sm ant-spin-spinning"
   >
     <span
-      class="ant-spin-dot"
+      class="ant-spin-dot ant-spin-dot-spin"
     >
       <i />
       <i />
@@ -145,7 +145,7 @@ exports[`renders ./components/spin/demo/size.md correctly 1`] = `
     class="ant-spin ant-spin-spinning"
   >
     <span
-      class="ant-spin-dot"
+      class="ant-spin-dot ant-spin-dot-spin"
     >
       <i />
       <i />
@@ -157,7 +157,7 @@ exports[`renders ./components/spin/demo/size.md correctly 1`] = `
     class="ant-spin ant-spin-lg ant-spin-spinning"
   >
     <span
-      class="ant-spin-dot"
+      class="ant-spin-dot ant-spin-dot-spin"
     >
       <i />
       <i />
@@ -177,7 +177,7 @@ exports[`renders ./components/spin/demo/tip.md correctly 1`] = `
       class="ant-spin ant-spin-spinning ant-spin-show-text"
     >
       <span
-        class="ant-spin-dot"
+        class="ant-spin-dot ant-spin-dot-spin"
       >
         <i />
         <i />

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

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+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>
+`;

components/spin/__tests__/index.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow, render } from 'enzyme';
 import Spin from '..';
 
 describe('Spin', () => {
@@ -15,9 +15,9 @@ describe('Spin', () => {
 
   it('should render custom indicator when it\'s set', () => {
     const customIndicator = <div className="custom-indicator" />;
-    const wrapper = shallow(
+    const wrapper = render(
       <Spin indicator={customIndicator} />
     );
-    expect(wrapper.contains(customIndicator)).toEqual(true);
+    expect(wrapper).toMatchSnapshot();
   });
 });

components/spin/index.en-US.md

@@ -15,7 +15,7 @@ When part of the page is waiting for asynchronous data or during a rendering pro
 | Property | Description | Type | Default Value |
 | -------- | ----------- | ---- | ------------- |
 | delay | specifies a delay in milliseconds for loading state (prevent flush) | number (milliseconds) | - |
-| indicator | React node of the spinning indicator | ReactNode | - |
+| indicator | React node of the spinning indicator | ReactElement | - |
 | size | size of Spin, options: `small`, `default` and `large` | string | `default` |
 | spinning | whether Spin is spinning | boolean | true |
 | tip | customize description content when Spin has children | string | - |

components/spin/index.tsx

@@ -5,6 +5,8 @@ import Animate from 'rc-animate';
 import isCssAnimationSupported from '../_util/isCssAnimationSupported';
 import omit from 'omit.js';
 
+export type SpinIndicator = React.ReactElement<any>;
+
 export interface SpinProps {
   prefixCls?: string;
   className?: string;
@@ -14,7 +16,7 @@ export interface SpinProps {
   tip?: string;
   delay?: number;
   wrapperClassName?: string;
-  indicator?: React.ReactNode;
+  indicator?: SpinIndicator;
 }
 
 export interface SpinState {
@@ -96,8 +98,27 @@ export default class Spin extends React.Component<SpinProps, SpinState> {
       }
     }
   }
+
+  renderIndicator() {
+    const { prefixCls, indicator } = this.props;
+    const dotClassName = `${prefixCls}-dot`;
+    if (React.isValidElement(indicator)) {
+      return React.cloneElement((indicator as SpinIndicator), {
+        className: classNames((indicator as SpinIndicator).props.className, dotClassName),
+      });
+    }
+    return (
+      <span className={classNames(dotClassName, `${prefixCls}-dot-spin`)}>
+        <i />
+        <i />
+        <i />
+        <i />
+      </span>
+    );
+  }
+
   render() {
-    const { className, size, prefixCls, tip, wrapperClassName, indicator, ...restProps } = this.props;
+    const { className, size, prefixCls, tip, wrapperClassName, ...restProps } = this.props;
     const { spinning, notCssAnimationSupported } = this.state;
 
     const spinClassName = classNames(prefixCls, {
@@ -111,20 +132,12 @@ export default class Spin extends React.Component<SpinProps, SpinState> {
     const divProps = omit(restProps, [
       'spinning',
       'delay',
+      'indicator',
     ]);
 
-    const spinIndicator = indicator ? indicator : (
-      <span className={`${prefixCls}-dot`}>
-        <i />
-        <i />
-        <i />
-        <i />
-      </span>
-    );
-
     const spinElement = (
       <div {...divProps} className={spinClassName} >
-        {spinIndicator}
+        {this.renderIndicator()}
         {tip ? <div className={`${prefixCls}-text`}>{tip}</div> : null}
       </div>
     );

components/spin/index.zh-CN.md

@@ -16,7 +16,7 @@ subtitle: 加载中
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | delay | 延迟显示加载效果的时间（防止闪烁） | number (毫秒) | - |
-| indicator | 加载指示符 | ReactNode | - |
+| indicator | 加载指示符 | ReactElement | - |
 | size | 组件大小，可选值为 `small` `default` `large` | string | 'default' |
 | spinning | 是否旋转 | boolean | true |
 | tip | 当作为包裹元素时，可以自定义描述文案 | string | - |

components/spin/style/index.less

@@ -115,8 +115,7 @@
     position: relative;
     display: inline-block;
     .square(@spin-dot-size);
-    transform: rotate(45deg);
-    animation: antRotate 1.2s infinite linear;
+
     i {
       width: 9px;
       height: 9px;
@@ -148,6 +147,11 @@
         animation-delay: 1.2s;
       }
     }
+
+    &-spin {
+      transform: rotate(45deg);
+      animation: antRotate 1.2s infinite linear;
+    }
   }
 
   // Sizes

components/table/__tests__/__snapshots__/empty.test.js.snap

@@ -465,7 +465,7 @@ exports[`Table renders empty table without emptyText when loading 1`] = `
         class="ant-spin ant-spin-spinning ant-table-without-pagination ant-table-spin-holder"
       >
         <span
-          class="ant-spin-dot"
+          class="ant-spin-dot ant-spin-dot-spin"
         >
           <i />
           <i />