Feature antd 3.0/spinning indicator (#7977)

* Added indicator props to Spin component

* Added indicator props to Spin component

* update snapshots

* fix defautl props

* revert some snapshot files

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

@@ -15,6 +15,26 @@ exports[`renders ./components/spin/demo/basic.md correctly 1`] = `
 </div>
 `;
 
+exports[`renders ./components/spin/demo/custom-indicator.md correctly 1`] = `
+<div>
+  <div
+    class="ant-spin ant-spin-spinning"
+  >
+    <i
+      class="anticon anticon-spin anticon-loading-3-quarters"
+      style="font-size:24px"
+    />
+  </div>
+  <div
+    class="ant-spin ant-spin-spinning"
+  >
+    <div
+      class="square-loader"
+    />
+  </div>
+</div>
+`;
+
 exports[`renders ./components/spin/demo/delayAndDebounce.md correctly 1`] = `
 <div>
   <div

components/spin/__tests__/index.test.js

@@ -12,4 +12,12 @@ describe('Spin', () => {
     expect(wrapper.find('.ant-spin-nested-loading').at(0).prop('style')).toBe(null);
     expect(wrapper.find('.ant-spin').at(0).prop('style').background).toBe('red');
   });
+
+  it('should render custom indicator when it\'s set', () => {
+    const customIndicator = <div className="custom-indicator" />;
+    const wrapper = shallow(
+      <Spin indicator={customIndicator} />
+    );
+    expect(wrapper.contains(customIndicator)).toEqual(true);
+  });
 });

components/spin/demo/custom-indicator.md

@@ -0,0 +1,56 @@
+---
+order: 0
+title:
+  zh-CN: 自定义指示符
+  en-US: Custom spinning indicator
+---
+
+## zh-CN
+
+使用自定义指示符。
+
+## en-US
+
+Use custom loading indicator.
+
+````jsx
+import { Spin, Icon } from 'antd';
+
+const antIcon = <Icon type="loading-3-quarters" style={{ fontSize: 24 }} spin />;
+const squareLoader = <div className="square-loader" />;
+
+ReactDOM.render(
+  <div>
+    <Spin indicator={antIcon} />
+    <Spin indicator={squareLoader} />
+  </div>, mountNode);
+````
+
+```css
+.square-loader {
+  width: 24px;
+  height: 24px;
+  background-color: #108ee9;
+  -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
+  animation: sk-rotateplane 1.2s infinite ease-in-out;
+}
+
+@-webkit-keyframes sk-rotateplane {
+  0% { -webkit-transform: perspective(120px) }
+  50% { -webkit-transform: perspective(120px) rotateY(180deg) }
+  100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
+}
+
+@keyframes sk-rotateplane {
+  0% {
+    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
+    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
+  } 50% {
+    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
+    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
+  } 100% {
+    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
+    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
+  }
+}
+```

components/spin/index.en-US.md

@@ -15,6 +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 | - |
 | 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

@@ -13,6 +13,7 @@ export interface SpinProps {
   tip?: string;
   delay?: number;
   wrapperClassName?: string;
+  indicator?: React.ReactNode;
 }
 
 export default class Spin extends React.Component<SpinProps, any> {
@@ -29,6 +30,7 @@ export default class Spin extends React.Component<SpinProps, any> {
     spinning: PropTypes.bool,
     size: PropTypes.oneOf(['small', 'default', 'large']),
     wrapperClassName: PropTypes.string,
+    indicator: PropTypes.node,
   };
 
   debounceTimeout: number;
@@ -89,7 +91,7 @@ export default class Spin extends React.Component<SpinProps, any> {
     }
   }
   render() {
-    const { className, size, prefixCls, tip, wrapperClassName, ...restProps } = this.props;
+    const { className, size, prefixCls, tip, wrapperClassName, indicator, ...restProps } = this.props;
     const { spinning, notCssAnimationSupported } = this.state;
 
     const spinClassName = classNames(prefixCls, {
@@ -105,14 +107,18 @@ export default class Spin extends React.Component<SpinProps, any> {
       'delay',
     ]);
 
+    const spinIndicator = indicator ? indicator : (
+      <span className={`${prefixCls}-dot`}>
+        <i />
+        <i />
+        <i />
+        <i />
+      </span>
+    );
+
     const spinElement = (
       <div {...divProps} className={spinClassName} >
-        <span className={`${prefixCls}-dot`}>
-          <i />
-          <i />
-          <i />
-          <i />
-        </span>
+        {spinIndicator}
         {tip ? <div className={`${prefixCls}-text`}>{tip}</div> : null}
       </div>
     );

components/spin/index.zh-CN.md

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