Merge pull request #1046 from ant-design/feat-spin-tip

Feat spin tip

components/spin/demo/tip.md

@@ -0,0 +1,19 @@
+# 自定义描述文案
+
+- order: 4
+
+自定义描述文案，指定的 tip 文案会直接代替 `...`。
+
+---
+
+````jsx
+import { Spin, Alert } from 'antd';
+
+ReactDOM.render(
+  <Spin tip="正在读取数据...">
+    <Alert message="消息提示的文案"
+      description="消息提示的辅助性文字介绍消息提示的辅助性文字介绍消息提示的辅助性文字介绍"
+      type="info" />
+  </Spin>
+, mountNode);
+````

components/spin/index.jsx

@@ -6,13 +6,13 @@ const AntSpin = React.createClass({
   getDefaultProps() {
     return {
       prefixCls: 'ant-spin',
-      spining: true
+      spining: true,
     };
   },
 
   propTypes: {
     className: React.PropTypes.string,
-    size: React.PropTypes.oneOf(['small', 'default', 'large'])
+    size: React.PropTypes.oneOf(['small', 'default', 'large']),
   },
 
   isNestedPattern() {
@@ -20,7 +20,7 @@ const AntSpin = React.createClass({
   },
 
   render() {
-    const { className, size, prefixCls } = this.props;
+    const { className, size, prefixCls, tip } = this.props;
 
     let spinClassName = classNames({
       [prefixCls]: true,
@@ -31,9 +31,9 @@ const AntSpin = React.createClass({
     });
 
     let spinElement;
-    if (!isCssAnimationSupported) {
+    if (!isCssAnimationSupported || 'tip' in this.props) {
       // not support for animation, just use text instead
-      spinElement = <div className={spinClassName}>加载中...</div>;
+      spinElement = <div className={spinClassName}>{tip || '加载中...'}</div>;
     } else {
       spinElement = (
         <div className={spinClassName}>

components/spin/index.md

@@ -19,3 +19,4 @@
 |------------|----------------|-------------|--------------|
 | size       | enum           | default     | spin组件中点的大小，可选值为 small default large |
 | spining    | boolean        | true        | 用于内嵌其他组件的模式，可以关闭 loading 效果    |
+| tip    | string        | 无        | 自定义描述文案 |

style/components/spin.less

@@ -51,6 +51,12 @@
     pointer-events: none;
   }
 
+  // tip
+  // ------------------------------
+  &-tip {
+    color: @spin-dot-default;
+  }
+
   // dots
   // ------------------------------