update spin component

components/spin/demo/basic.md

@@ -0,0 +1,15 @@
+# 基本用法
+
+- order: 0
+
+一个简单的 loading 状态。
+
+---
+
+````jsx
+import { Spin } from 'antd';
+
+ReactDOM.render(
+  <Spin />
+, document.getElementById('components-spin-demo-basic'));
+````

components/spin/demo/full-page-load.md

@@ -1,50 +0,0 @@
-# 基本用法
-
-- order: 2
-
-当有内容内嵌在Spin中时，通过添加loading属性，可以进入加载状态。
-
----
-
-````jsx
-import { Spin, Button } from 'antd';
-
-let App = React.createClass({
-  getInitialState() {
-    return {
-      loading: false
-    };
-  },
-  enterLoading() {
-    this.setState({
-      loading: !this.state.loading
-    });
-  },
-  render() {
-    let childEl = (
-        <div className="inner-content">
-          <img src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg" width="200px" height="200px" />
-          <div>我是一张图片</div>
-        </div>
-    );
-    let spinEl = this.state.loading ? (<Spin size="large"> { childEl } </Spin>) : childEl;
-    return (
-      <div>
-        { spinEl }
-        <Button type="primary" onClick={this.enterLoading}>点击切换</Button>
-      </div>
-    );
-  }
-});
-
-ReactDOM.render(<App />, document.getElementById('components-spin-demo-full-page-load'));
-
-````
-<style>
-  .inner-content {
-    height: 300px;
-    padding-bottom: 60px;
-    padding-top: 60px;
-    text-align: center;
-  }
-</style>

components/spin/demo/inside.md

@@ -0,0 +1,28 @@
+# 容器
+
+- order: 2
+
+放入一个容器中。
+
+---
+
+````jsx
+import { Spin } from 'antd';
+
+ReactDOM.render(
+  <div className="example">
+    <Spin />
+  </div>
+, document.getElementById('components-spin-demo-inside'));
+````
+
+````css
+.example {
+  text-align: center;
+  background: rgba(0,0,0,0.05);
+  border-radius: 4px;
+  margin-bottom: 20px;
+  padding: 30px 50px;
+  margin: 20px 0;
+}
+````

components/spin/demo/nested.md

@@ -0,0 +1,45 @@
+# 卡片加载中
+
+- order: 3
+
+可以直接把内容内嵌到 `Spin` 中，将现有容器变为加载状态。
+
+---
+
+````jsx
+import { Spin, Switch } from 'antd';
+
+const Card = React.createClass({
+  getInitialState() {
+    return {
+      loading: false
+    };
+  },
+  toggle(value) {
+    this.setState({
+      loading: value
+    });
+  },
+  render() {
+    const card = <div className="card-example" />;
+    return <div>
+      {this.state.loading ? <Spin>{card}</Spin> : card}
+      切换加载状态：<Switch checked={this.state.loading} onChange={this.toggle} />
+    </div>;
+  }
+});
+
+ReactDOM.render(<Card />, document.getElementById('components-spin-demo-nested'));
+````
+
+````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/demo/page-element.md

@@ -1,30 +0,0 @@
-# 基本用法
-
-- order: 0
-
-作为页面元素使用。
-
----
-
-````jsx
-import { Spin } from 'antd';
-
-ReactDOM.render(
-  <div>
-    <div className="example">
-      <Spin />
-    </div>
-  </div>, document.getElementById('components-spin-demo-page-element'));
-
-````
-<style>
-  .example {
-    text-align: center;
-    width: 100%;
-    background: rgba(0,0,0,0.05);
-    border-radius: 4px;
-    margin-bottom: 20px;
-    padding: 30px 50px;
-    margin: 20px 0;
-  }
-</style>

components/spin/demo/size.md

@@ -0,0 +1,21 @@
+# 各种大小
+
+- order: 1
+
+小的用于文本加载，默认用于卡片容器级加载，大的用于**页面级**加载。
+
+---
+
+````jsx
+import { Spin } from 'antd';
+
+ReactDOM.render(
+  <div>
+    <Spin size="small" />
+    <br />
+    <Spin />
+    <br />
+    <Spin size="large" />
+  </div>
+, document.getElementById('components-spin-demo-size'));
+````

components/spin/index.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { classSet } from 'rc-util';
 import { isCssAnimationSupported } from 'css-animation';
+
 const AntSpin = React.createClass({
   getDefaultProps() {
     return {
@@ -14,57 +15,45 @@ const AntSpin = React.createClass({
   },
 
   isNestedPattern() {
-    return this.props.children ? true : false;
+    return !!(this.props && this.props.children);
   },
 
   render() {
-    const prefix = 'ant-spin';
-    const nestedStatus = this.isNestedPattern();
     const { className, size, ...others } = this.props;
-    const sizeCls = ({
-      'large': 'lg',
-      'small': 'sm'
-    })[size] || '';
 
-    let loadingClassName = classSet({
-      'ant-spin-nested-loading': nestedStatus
-    });
     let spinClassName = classSet({
       'ant-spin': true,
+      [`ant-spin-${size}`]: size,
       [className]: !!className
     });
 
-    let spinEl;
+    let spinElement;
     if (!isCssAnimationSupported) {
       // not support for animation, just use text instead
-      spinEl = <div className={ spinClassName }>加载中...</div>;
+      spinElement = <div className={spinClassName}>加载中...</div>;
-    }else {
+    } else {
-      let spinWrapperClassName = classSet({
+      spinElement = (
-        'ant-spin-wrapper': true,
+        <div className={spinClassName}>
-        [`${prefix}-${sizeCls}`]: sizeCls
+          <span className="ant-spin-dot ant-spin-dot-first" />
-      });
+          <span className="ant-spin-dot ant-spin-dot-second" />
-      spinEl = (<div className={ spinWrapperClassName }>
+          <span className="ant-spin-dot ant-spin-dot-third" />
-                  <div className={ spinClassName }>
+        </div>
-                    <span className="ant-spin-dot ant-spin-dot-first" />
+      );
-                    <span className="ant-spin-dot ant-spin-dot-second" />
-                    <span className="ant-spin-dot ant-spin-dot-third" />
-                  </div>
-                </div>);
     }
 
-    let spinContainerEl = nestedStatus ?
+    if (this.isNestedPattern()) {
-        <div className="ant-spin-container">
+      return (
-          { this.props.children }
+        <div className="ant-spin-nested-loading">
-        </div> : null;
+          {spinElement}
-
+          <div className="ant-spin-container">
-    return (
+            {this.props.children}
-      <div {...this.props} className={ loadingClassName }>
+          </div>
-        { spinEl }
+        </div>
-        { spinContainerEl }
+      );
-      </div>
+    } else {
-    );
+      return spinElement;
+    }
   }
 });
 
 export default AntSpin;
-

components/spin/index.md

@@ -1,19 +1,21 @@
 # Spin
 
 - category: Components
-- chinese: 加载动画
+- chinese: 加载中
 - type: 展示
 
 ---
 
-用于页面和区块的loading状态。
+用于页面和区块的加载中状态。
 
 ## 何时使用
 
-页面局部处于等待数据渲染时。
+页面局部处于等待异步数据或正在渲染过程时，合适的加载的动效会有效缓解用户的焦虑。
+
 
 ## API
 
-| 参数       | 类型            | 默认值       |说明           |
+
-|-----------|----------------|-------------|--------------|
+| 参数       | 类型           | 默认值      | 说明        |
-| size        | enum      | default       | spin组件中点的大小，可选值为small default large
+|------------|----------------|-------------|--------------|
+| size       | enum           | default     | spin组件中点的大小，可选值为 small default large

style/components/spin.less

@@ -10,17 +10,12 @@
   display: inline-block;
   font-size: 1em;
   text-align: center;
-  vertical-align: middle;
 
   &-nested-loading {
     position: relative;
   }
 
-  &-wrapper {
+  &-nested-loading & {
-    font-size: @spin-dot-size;  
-  }
-
-  &-nested-loading .ant-spin {
     position: absolute;
     top: 50%;
     left: 50%;
@@ -29,14 +24,14 @@
     z-index: 4;
   }
 
-  &-nested-loading > &-container {
+  &-container {
-    -webkit-filter: blur(10px); /* Chrome, Opera */
+    transition: all 0.5s ease;
-    -moz-filter: blur(10px);
+  }
-    -ms-filter: blur(10px);    
-    filter: blur(10px);
 
-    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false); /* IE6~IE9 */
+  &-nested-loading > &-container {
-    z-index: 19;
+    opacity: 0.7;
+    filter: blur(1px);
+    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=1, MakeShadow=false); /* IE6~IE9 */
   }
 
   // dots
@@ -47,7 +42,6 @@
     .square(1em);
     border-radius: 50%;
     display: inline-block;
-    vertical-align: middle;
     background-color: @primary-color;
   }
   &-dot-second {
@@ -61,14 +55,17 @@
 
   // Sizes
   // ------------------------------
+  &-default {
+    font-size: @spin-dot-size;
+  }
 
   // small
-  &-nested-loading > &-sm, &-not-nested-loading > &-sm {
+  &-small {
     font-size: @spin-dot-size-sm;
   }
 
   // large
-  &-nested-loading > &-lg, &-not-nested-loading > &-lg {
+  &-large {
     font-size: @spin-dot-size-lg;
   }
 }