Merge branch 'RaoHai-spinDebounce' into develop-1.0.0

components/spin/demo/nested.md

@@ -10,14 +10,10 @@ import { Spin, Switch, Alert } from 'antd';
 
 const Card = React.createClass({
   getInitialState() {
-    return {
+    return { loading: false };
-      loading: false
-    };
   },
   toggle(value) {
-    this.setState({
+    this.setState({ loading: value });
-      loading: value
-    });
   },
   render() {
     const container = (
@@ -36,15 +32,3 @@ const Card = React.createClass({
 
 ReactDOM.render(<Card />, mountNode);
 ````
-
-````css
-.card-example {
-  border-radius: 4px;
-  padding: 24px;
-  height: 100px;
-  border: 1px solid #e9e9e9;
-  background: url(https://t.alipayobjects.com/images/rmsweb/T10_NiXeRcXXXXXXXX.png);
-  margin-bottom: 16px;
-}
-````
-

components/spin/index.jsx

@@ -10,6 +10,13 @@ export default class Spin extends React.Component {
     spinning: true,
   }
 
+  constructor(props) {
+    super(props);
+    const spinning = this.getSpinning(props);
+    this.state = {
+      spinning,
+    };
+  }
   static propTypes = {
     className: React.PropTypes.string,
     size: React.PropTypes.oneOf(['small', 'default', 'large']),
@@ -26,10 +33,29 @@ export default class Spin extends React.Component {
       findDOMNode(this).className += ` ${this.props.prefixCls}-show-text`;
     }
   }
-
+  getSpinning(props) {
+    warning(!('spining' in this.props), '`spining` property of Spin is a spell mistake, use `spinning` instead.');
+    const { spinning, spining } = props;
+    // Backwards support
+    if (spining !== undefined) {
+      return spining;
+    }
+    return spinning;
+  }
+  componentWillReceiveProps(nextProps) {
+    const spinning = this.getSpinning(nextProps);
+    if (this.debounceTimeout) {
+      clearTimeout(this.debounceTimeout);
+    }
+    if (spinning) {
+      this.debounceTimeout = setTimeout(() => this.setState({ spinning }), 250);
+    } else {
+      this.setState({ spinning });
+    }
+  }
   render() {
-    const { className, size, prefixCls, tip, spining = true } = this.props;
+    const { className, size, prefixCls, tip } = this.props;
-    const spinning = this.props.spinning && spining;  // Backwards support
+    const { spinning } = this.state;
 
     const spinClassName = classNames({
       [prefixCls]: true,

components/table/index.jsx

@@ -709,18 +709,16 @@ export default class Table extends React.Component {
           {emptyText}
       </div>
     );
-    if (this.props.loading) {
+    // if there is no pagination or no data,
-      // if there is no pagination or no data,
+    // the height of spin should decrease by half of pagination
-      // the height of spin should decrease by half of pagination
+    const paginationPatchClass = (this.hasPagination() && data && data.length !== 0)
-      const paginationPatchClass = (this.hasPagination() && data && data.length !== 0)
+            ? 'ant-table-with-pagination'
-              ? 'ant-table-with-pagination'
+            : 'ant-table-without-pagination';
-              : 'ant-table-without-pagination';
+    const spinClassName = this.props.loading ? `${paginationPatchClass} ant-table-spin-holder` : '';
-      const spinClassName = `${paginationPatchClass} ant-table-spin-holder`;
+    table = <Spin className={spinClassName} spinning={this.props.loading}>{table}</Spin>;
-      table = <Spin className={spinClassName}>{table}</Spin>;
-    }
     return (
       <div className={`clearfix${emptyClass}`}>
-        {table}
+        {<Spin className={spinClassName} spinning={this.props.loading}>{table}</Spin>}
         {this.renderPagination(data)}
       </div>
     );