Merge branch '0.8.0' into design-spec

components/datepicker/index.jsx

@@ -42,7 +42,8 @@ export default React.createClass({
       format: 'yyyy-MM-dd',
       placeholder: '请选择日期',
       transitionName: 'slide-up',
-      onSelect: function () {}
+      onSelect() {
+      }
     };
   },
   handleChange(v) {
@@ -69,7 +70,10 @@ export default React.createClass({
         disabled={this.props.disabled}
         trigger={<span className="ant-calendar-picker-icon" />}
         calendar={calendar}
-        adjustOrientOnCalendarOverflow={true}
+        adjustOrientOnCalendarOverflow={{
+          x: true,
+          y: false
+        }}
         formatter={new DateTimeFormat(this.props.format)}
         value={this.state.value}
         prefixCls="ant-calendar-picker"

components/enter-animation/demo/basic.md

@@ -4,6 +4,8 @@
 
 默认子节点进场动画。为避免与本站页面的进场冲突，所以 `EnterAnimation` 里延时 1 秒，递增 `interval` 为 0.3。
 
+刷新页面看效果。
+
 ---
 
 ````jsx

components/enter-animation/demo/enter-data.md

@@ -4,6 +4,8 @@
 
 通过加上 `enter-data` 属性来指定需要动画进场的元素，并且可以定义每个元素的动画效果，用到的参数有 `type` `queueId` `delay`。
 
+刷新页面看效果。
+
 ---
 
 ````jsx

components/table/demo/ajax.md

@@ -10,6 +10,7 @@
 
 ````jsx
 var Table = antd.Table;
+
 var columns = [{
   title: '姓名',
   dataIndex: 'name',
@@ -33,7 +34,7 @@ function resolve(result) {
   return result.data;
 }
 
-var dataSource = {
+var dataSource = new Table.DataSource({
   url: "/components/table/demo/data.json",
   resolve: function(result) {
     return result.data;
@@ -61,8 +62,16 @@ var dataSource = {
     console.log('请求参数：', params);
     return params;
   }
-};
+});
 
-React.render(<Table columns={columns} dataSource={dataSource} />
-, document.getElementById('components-table-demo-ajax'));
+function fetch() {
+  dataSource.fetch().then(function() {
+    console.log('fetch done');
+  });
+}
+
+React.render(<div>
+  <Table columns={columns} dataSource={dataSource} />
+  <button className="ant-btn ant-btn-primary" onClick={fetch}>外部重新加载数据</button>
+</div>, document.getElementById('components-table-demo-ajax'));
 ````

components/table/demo/nopagination.md

@@ -1,6 +1,6 @@
 # 不显示分页
 
-- order: 8
+- order: 9
 
 传入 pagination 为 false 即可。
 

components/table/index.jsx

@@ -15,7 +15,18 @@ function defaultResolve(data) {
   return data || [];
 }
 
-export default React.createClass({
+class DataSource {
+  constructor(config) {
+    this.url = config.url || '';
+    this.resolve = config.resolve || defaultResolve;
+    this.getParams = config.getParams || noop;
+    this.getPagination = config.getPagination || noop;
+    this.headers = config.headers || {};
+    this.fetch = noop;
+  }
+}
+
+var AntTable = React.createClass({
   getInitialState() {
     return {
       // 减少状态
@@ -42,6 +53,10 @@ export default React.createClass({
     };
   },
 
+  propTypes: {
+    dataSource: React.PropTypes.instanceOf(DataSource)
+  },
+
   componentWillReceiveProps(nextProps) {
     if (('pagination' in nextProps) && nextProps.pagination !== false) {
       this.setState({
@@ -75,11 +90,9 @@ export default React.createClass({
   },
 
   getRemoteDataSource() {
-    return objectAssign({
-      resolve: defaultResolve,
-      getParams: noop,
-      getPagination: noop
-    }, this.props.dataSource);
+    let dataSource = this.props.dataSource;
+    dataSource.fetch = this.fetch;
+    return dataSource;
   },
 
   toggleSortOrder(order, column) {
@@ -336,7 +349,7 @@ export default React.createClass({
       }
       // remote 模式使用 this.dataSource
       let dataSource = this.getRemoteDataSource();
-      jQuery.ajax({
+      return jQuery.ajax({
         url: dataSource.url,
         data: dataSource.getParams.apply(this, this.prepareParamsArguments(state)) || {},
         headers: dataSource.headers,
@@ -450,3 +463,7 @@ export default React.createClass({
     </div>;
   }
 });
+
+AntTable.DataSource = DataSource;
+
+export default AntTable;

components/table/index.md

@@ -38,17 +38,18 @@ var dataSource = [{
 
 **远程数据模式**是更常见的业务场景，是一次只从服务端读取一页的数据放在前端，执行筛选、排序、切换页码等操作时均向后台发送请求，后台返回当页的数据和相关分页信息。
 
-通过指定表格的数据源 `dataSource` 为一个对象如下。
+通过指定表格的数据源 `dataSource` 为一个 DataSource 的实例如下。
 
 ```jsx
-var dataSource = {
+var dataSource = new Table.DataSource({
   url: '/api/users',
   resolve: function(result) {
     return result.data;
   },
   getPagination: function(result) {}
   getParams: function(pagination, filters, sorter) {}
-};
+});
+
 <Table dataSource={dataSource} />
 ```
 

package.json

@@ -36,8 +36,8 @@
     "gregorian-calendar": "~3.0.0",
     "gregorian-calendar-format": "~3.0.1",
     "is-equal-shallow": "~0.1.3",
-    "object-assign": "~3.0.0",
-    "rc-calendar": "~3.11.0",
+    "object-assign": "3.x",
+    "rc-calendar": "~3.12.3",
     "rc-checkbox": "~1.0.6",
     "rc-collapse": "~1.2.3",
     "rc-dialog": "~4.4.0",

style/components/datepicker/Calendar.less

@@ -4,7 +4,6 @@
   line-height: 34px;
   text-align: center;
   user-select: none;
-  -webkit-user-select: none;
   border-bottom: 1px solid #e9e9e9;
 
   a:hover {
@@ -209,6 +208,7 @@
   &-footer-btn {
     text-align: center;
     display: block;
+    line-height: 42px;
   }
 
   &-footer > div {

style/components/datepicker/Picker.less

@@ -11,6 +11,10 @@
   position: relative;
   display: inline-block;
 
+  &-input {
+    outline: none;
+  }
+
   &-icon {
     position: absolute;
     -webkit-user-select: none;