update radio

components/radio/index.md

@@ -20,4 +20,3 @@
 |  checked | 指定当前是否选中 | boolean  |   | false    |
 |  defaultChecked | 初始是否选中 | boolean |  | false |
 |  onChange | 组合时必须 | Function(e:Event) |  |  | |
-|   r|

components/steps/index.md

@@ -15,9 +15,17 @@
 
 ## API
 
+```jsx
+<Steps>
+  <Steps.Step title="第一步"></Steps.Step>
+  <Steps.Step title="第二步"></Steps.Step>
+  <Steps.Step title="第三步"></Steps.Step>
+</Steps>
+```
+
 ### Steps
 
-步骤条的整体
+步骤条。
 
 | 参数      | 说明                                     | 类型       |  可选值 |默认值 |
 |-----------|------------------------------------------|------------|-------|--------|
@@ -26,7 +34,7 @@
 
 ### Steps.Step
 
-步骤条的每一个步
+每一步。
 
 | 参数      | 说明                                     | 类型       |  可选值 |默认值 |
 |-----------|------------------------------------------|------------|-------|--------|
@@ -37,4 +45,4 @@
 
 ## Todo
 
-* 竖状步进条
+* 竖状步骤条

components/table/demo/ajax.md

@@ -4,7 +4,7 @@
 
 远程读取的表格是**更为常见的模式**，下面的表格使用了 `dataSource` 对象和远程数据源绑定和适配，并具有筛选、排序等功能以及页面 loading 效果。
 
-此示例是静态数据模拟，数据可能不准确，请打开网络面板查看请求。
+**注意，此示例是静态数据模拟，数据并不准确，请打开网络面板查看请求。**
 
 ---
 

components/table/demo/basic.md

@@ -12,7 +12,7 @@ var columns = [{
   title: '姓名',
   dataIndex: 'name',
   render: function(text) {
-    return <a href="#">{text}</a>;
+    return <a href="javascript:;">{text}</a>;
   }
 }, {
   title: '年龄',
@@ -25,11 +25,11 @@ var columns = [{
   dataIndex: '',
   render: function(text, record) {
     return <span>
-      <a href="#">删除</a>
-      <span className="ant-divider">|</span>
-      <a href="#">操作</a>
-      <span className="ant-divider">|</span>
-      <a href="#" className="ant-dropdown-link">
+      <a href="javascript:;">操作一</a>
+      <span className="ant-divider"></span>
+      <a href="javascript:;">操作二</a>
+      <span className="ant-divider"></span>
+      <a href="javascript:;" className="ant-dropdown-link">
         更多 <i className="anticon anticon-down"></i>
       </a>
     </span>;

components/table/demo/head.md

@@ -24,6 +24,9 @@ var columns = [{
   // 这里是名字中第一个字是 value
   onFilter: function(value, record) {
     return record.name.indexOf(value) === 0;
+  },
+  sorter: function(a, b) {
+    return a.name.length - b.name.length;
   }
 }, {
   title: '年龄',
@@ -40,7 +43,7 @@ var columns = [{
 }];
 
 var data = [{
-  name: '胡彦斌',
+  name: '胡斌',
   age: 32,
   address: '西湖区湖底公园1号'
 }, {
@@ -51,6 +54,10 @@ var data = [{
   name: '李大嘴',
   age: 32,
   address: '西湖区湖底公园123号'
+}, {
+  name: '李秀莲大嘴哥',
+  age: 32,
+  address: '西湖区湖底公园123号'
 }];
 
 React.render(<Table columns={columns} dataSource={data} />

components/table/demo/paging.md

@@ -13,7 +13,7 @@ var columns = [{
   title: '姓名',
   dataIndex: 'name',
   render: function(text) {
-    return <a href="#">{text}</a>;
+    return <a href="javascript:;">{text}</a>;
   }
 }, {
   title: '年龄',

components/table/demo/row-selection.md

@@ -12,7 +12,7 @@ var columns = [{
   title: '姓名',
   dataIndex: 'name',
   render: function(text) {
-    return <a href="#">{text}</a>;
+    return <a href="javascript:;">{text}</a>;
   }
 }, {
   title: '年龄',

components/table/index.jsx

@@ -53,6 +53,7 @@ let AntTable = React.createClass({
   toggleSortOrder(order, column) {
     let sortColumn = this.state.sortColumn;
     let sortOrder = this.state.sortOrder;
+    let sorter;
     // 同时允许一列进行排序，否则会导致排序顺序的逻辑问题
     if (sortColumn) {
       sortColumn.className = '';
@@ -71,7 +72,7 @@ let AntTable = React.createClass({
       }
     }
     if (this.mode === 'local') {
-      let sorter = function() {
+      sorter = function() {
         let result = column.sorter.apply(this, arguments);
         if (sortOrder === 'ascend') {
           return result;
@@ -79,29 +80,29 @@ let AntTable = React.createClass({
           return -result;
         }
       };
-      if (sortOrder) {
-        this.props.dataSource = this.props.dataSource.sort(sorter);
-      } else {
-        this.props.dataSource = this.originDataSource.slice();
-      }
     }
     this.setState({
       sortOrder: sortOrder,
-      sortColumn: sortColumn
+      sortColumn: sortColumn,
+      sorter: sorter
     }, this.fetch);
   },
   handleFilter(column) {
+    let columnIndex = this.props.columns.indexOf(column);
+    let filterFns = [];
     if (this.mode === 'local') {
-      this.props.dataSource = this.originDataSource.slice().filter(function(record) {
+      filterFns[columnIndex] = function(record) {
         if (column.selectedFilters.length === 0) {
           return true;
         }
         return column.selectedFilters.some(function(value) {
           return column.onFilter.call(this, value, record);
         });
-      });
+      };
     }
-    this.fetch();
+    this.setState({
+      filterFns: filterFns
+    }, this.fetch);
   },
   handleSelect(rowIndex, e) {
     let checked = e.target.checked;
@@ -285,15 +286,33 @@ let AntTable = React.createClass({
         }
       });
     } else {
-      let pageSize = this.state.pagination.pageSize;
-      let current = this.state.pagination.current;
-      this.setState({
-        data: this.props.dataSource.filter(function(item, i) {
-          if (i >= (current - 1) * pageSize &&
-              i < current * pageSize) {
-            return item;
+      var data = this.props.dataSource;
+      var pageSize = this.state.pagination.pageSize;
+      var current = this.state.pagination.current;
+      // 排序
+      if (this.state.sortOrder && this.state.sorter) {
+        data = data.sort(this.state.sorter);
+      } else {
+        data = this.originDataSource.slice();
+      }
+      // 筛选
+      if (this.state.filterFns) {
+        this.state.filterFns.forEach(function(filterFn) {
+          if (typeof filterFn === 'function') {
+            data = data.filter(filterFn);
           }
-        })
+        });
+      }
+      // 分页
+      data = data.filter(function(item, i) {
+        if (i >= (current - 1) * pageSize &&
+            i < current * pageSize) {
+          return item;
+        }
+      });
+      // 完成数据
+      this.setState({
+        data: data
       });
     }
   },

components/table/index.md

@@ -13,7 +13,7 @@
 - 当有大量结构化的数据需要展现时；
 - 当需要对数据进行排序、搜索、分页、自定义操作等复杂行为时。
 
-## API
+## 如何使用
 
 Table 有两种模式，本地数据和远程数据模式。
 
@@ -45,12 +45,14 @@ var dataSource = {
   resolve: function(result) {
     return result.data;
   },
-  getParams: function(column) {},
   getPagination: function(result) {}
+  getParams: function(pagination, filters, sorter) {}
 };
 <Table dataSource={dataSource} />
 ```
 
+## API
+
 ### Table
 
 | 参数          | 说明                     | 类型            |  可选值             | 默认值  |

index.js

@@ -22,7 +22,7 @@ var antd = {
   Collapse: require('./components/Collapse'),
   message: require('./components/message'),
   Slider: require('./components/slider'),
-  Radio:require('./components/radio')
+  Radio: require('./components/radio')
 };
 
 module.exports = antd;

style/components/divider.less

@@ -2,5 +2,7 @@
   margin: 0 4px;
   color: #999;
   display: inline-block;
-  .scale(0.8);
+  height: 8px;
+  width: 1px;
+  background: #ccc;
 }

style/components/table.less

@@ -8,6 +8,7 @@
   color: @text-color;
   border-radius: 6px;
   transition: opacity 0.3s ease;
+  min-height: 200px;
 
   table {
     width: 100%;
@@ -22,7 +23,9 @@
     transition: background .3s ease;
 
     .anticon-bars {
-      margin-left: 8px;
+      margin-left: 4px;
+      position: relative;
+      top: -1px;
       font-size: ~"10px \9"; // ie8-9
       .scale(0.83);
       cursor: pointer;
@@ -35,6 +38,7 @@
 
     .@{tablePrefixClass}-filter-dropdown {
       min-width: 88px;
+      margin-left: -8px;
       .ant-dropdown-menu-item {
         overflow: hidden;
         padding: 7px 8px;
@@ -107,7 +111,26 @@
   }
 
   &-loading {
-    opacity: 0.42;
+    .ant-table-body {
+      opacity: 0.42;
+    }
+    position: relative;
+    &:after {
+      position: absolute;
+      display: inline-block;
+      .animation(loadingCircle 1.5s infinite linear);
+      content:"\e610";
+      top: 50%;
+      left: 50%;
+      margin-top: -10px;
+      margin-left: -10px;
+      font-family: anticon;
+      width: 20px;
+      height: 20px;
+      line-height: 20px;
+      font-size: 20px;
+      color: @primary-color;
+    }
   }
 
   &-small {
@@ -129,7 +152,7 @@
   }
 
   &-column-sorter {
-    margin-left: 8px;
+    margin-left: 4px;
     display: inline-block;
     width: 12px;
     height: 14px;