Merge remote-tracking branch 'ant/develop-0.10.0' into feature-spin

CHANGELOG.md

@@ -4,6 +4,11 @@
 
 ---
 
+## 0.10.0 `developing`
+
+计划和推进：https://github.com/ant-design/ant-design/issues/276
+
+
 ## 0.9.2 `2015-10-26`
 
 * Tooltip 的 title 为空时不展示浮层。[9b53117](9b5311791e73270c7c16a602ac74dd59719a5f76)

README-zh_CN.md

@@ -19,11 +19,21 @@
 
 ## 示例
 
+### 使用全部组件
+
 ```jsx
 import { Datepicker } from 'antd';
 ReactDOM.render(<Datepicker />, mountNode);
 ```
 
+### 按需使用
+
+```jsx
+import "antd/lib/index.css"; // 只需在页面入口模块引用一次
+import Datepicker from 'antd/lib/datepicker';
+ReactDOM.render(<Datepicker />, mountNode);
+```
+
 ## 链接
 
 - [首页](http://ant.design/)

README.md

@@ -15,11 +15,21 @@ An enterprise-class UI design language and React-based implementation.
 
 ## Usage example
 
+### Use all components
+
 ```jsx
 import { Datepicker } from 'antd';
 ReactDOM.render(<Datepicker />, mountNode);
 ```
 
+### Use on demand
+
+```jsx
+import "antd/lib/index.css"; // only need to import once in entry module
+import Datepicker from 'antd/lib/datepicker';
+ReactDOM.render(<Datepicker />, mountNode);
+```
+
 ## Links
 
 - [Home page](http://ant.design/)

components/badge/index.jsx

@@ -4,10 +4,6 @@ const prefixCls = 'ant-badge';
 class AntBadge extends React.Component {
   constructor(props) {
     super(props);
-
-    this.state = {
-      count: props.count
-    };
   }
 
   render() {
@@ -17,13 +13,13 @@ class AntBadge extends React.Component {
         <sup className={prefixCls + '-dot'}></sup>
       </span>;
     }
-    let count = this.state.count;
+    let count = this.props.count;
     if (!count) {
       return cloneElement(this.props.children);
     } else {
       count = count >= 100 ? '99+' : count;
       return (
-        <span className={prefixCls} title={this.state.count} {...this.props}>
+        <span className={prefixCls} title={count} {...this.props}>
           {this.props.children}
           <sup className={prefixCls + '-count'}>{count}</sup>
         </span>

components/button/button.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import rcUtil from 'rc-util';
+import { findDOMNode } from 'react-dom';
 
 const rxTwoCNChar = /^[\u4e00-\u9fa5]{2,2}$/;
 const isTwoCNChar = rxTwoCNChar.test.bind(rxTwoCNChar);
@@ -24,6 +25,11 @@ function insertSpace(child) {
 }
 
 export default class Button extends React.Component {
+  componentDidMount() {
+    if (window && window.PIE) {
+      window.PIE.attach(findDOMNode(this));
+    }
+  }
   render() {
     const props = this.props;
     const {type, shape, size, onClick, className, htmlType, children, ...others} = props;
@@ -51,6 +57,17 @@ export default class Button extends React.Component {
     </button>;
   }
 }
+
+Button.propTypes = {
+  type: React.PropTypes.string,
+  shape: React.PropTypes.string,
+  size: React.PropTypes.string,
+  htmlType: React.PropTypes.string,
+  onClick: React.PropTypes.func,
+  loading: React.PropTypes.bool,
+  className: React.PropTypes.string,
+};
+
 Button.defaultProps = {
   onClick() {},
 };

components/button/demo/loading.md

@@ -22,13 +22,13 @@ var App = React.createClass({
   },
   render() {
     return <div>
-      <Button type="primary" size="large" loading>
+      <Button type="primary" size="large" loading={true}>
         加载中
       </Button>
-      <Button type="primary" loading="true">
+      <Button type="primary" loading={true}>
         加载中
       </Button>
-      <Button type="primary" size="small" loading>
+      <Button type="primary" size="small" loading={true}>
         加载中
       </Button>
       <br />

components/button/index.md

@@ -29,3 +29,17 @@ loading | 设置按钮载入状态，存在为 `true`，不存在为 `false`，
 onClick | `click` 事件的 handler | Function | `function() {}`
 
 - `<Button>Hello world!</Button>` 最终会被渲染为 `<button>Hello world!</button>`，并且除了上表中的属性，其它属性都会直接传到 `<button></button>`
+
+
+### IE8 border radius support
+
+Ant Design 视觉上采用渐进降级的方案，在 IE8 下圆角按钮将降级为直角。
+如果强烈需要圆角按钮，我们提供了 [css3pie](http://css3pie.com/) 的兼容方案。
+
+使用时只需在 html 头部加入以下代码即可。
+
+```html
+<!--[if IE 8]>
+<script src="https://t.alipayobjects.com/images/rmsweb/T1q8JiXftaXXXXXXXX.js"></script>
+<![endif]-->
+```

components/modal/demo/async.md

@@ -2,7 +2,7 @@
 
 - order: 1
 
-点击确定后异步关闭对话框。
+点击确定后异步关闭对话框，例如提交表单。
 
 ---
 
@@ -26,11 +26,13 @@ var Test = React.createClass({
   },
   handleOk() {
     this.setState({
-      ModalText: '对话框将在两秒后关闭'
+      ModalText: '对话框将在两秒后关闭',
+      confirmLoading: true
     });
     setTimeout(() => {
       this.setState({
-        visible: false
+        visible: false,
+        confirmLoading: false
       });
     }, 2000);
   },
@@ -46,6 +48,7 @@ var Test = React.createClass({
       <Modal title="对话框标题"
         visible={this.state.visible}
         onOk={this.handleOk}
+        confirmLoading={this.state.confirmLoading}
         onCancel={this.handleCancel}>
         <p>{this.state.ModalText}</p>
       </Modal>
@@ -53,5 +56,5 @@ var Test = React.createClass({
   }
 });
 
-ReactDOM.render(<Test/> , document.getElementById('components-modal-demo-custom'));
+ReactDOM.render(<Test/> , document.getElementById('components-modal-demo-async'));
 ````

components/modal/demo/basic.md

@@ -22,7 +22,6 @@ var App = React.createClass({
   handleOk() {
     console.log('点击了确定');
     this.setState({
-      confirmLoading: false,
       visible: false
     });
   },
@@ -35,7 +34,7 @@ var App = React.createClass({
     return <div>
       <Button type="primary" onClick={this.showModal}>显示对话框</Button>
       <Modal title="第一个 Modal" visible={this.state.visible}
-        confirmLoading={this.state.confirmLoading} onOk={this.handleOk} onCancel={this.handleCancel}>
+        onOk={this.handleOk} onCancel={this.handleCancel}>
         <p>对话框的内容</p>
         <p>对话框的内容</p>
         <p>对话框的内容</p>

components/modal/index.jsx

@@ -4,8 +4,7 @@ import { Dom } from 'rc-util';
 import confirm from './confirm';
 import { Button } from '../button';
 
-function noop() {
+function noop() {}
-}
 
 let mousePosition;
 let mousePositionEventBinded;
@@ -18,14 +17,9 @@ let AntModal = React.createClass({
       onCancel: noop,
       width: 520,
       transitionName: 'zoom',
-      maskAnimation: 'fade'
+      maskAnimation: 'fade',
-    };
-  },
-
-  getInitialState() {
-    return {
       confirmLoading: false,
-      visible: this.props.visible
+      visible: false
     };
   },
 
@@ -34,27 +28,9 @@ let AntModal = React.createClass({
   },
 
   handleOk() {
-    this.setState({
-      confirmLoading: true
-    });
     this.props.onOk();
   },
 
-  componentWillReceiveProps(nextProps) {
-    let newState = {};
-    if ('visible' in nextProps) {
-      newState.visible = nextProps.visible;
-      // 隐藏后默认去除按钮 loading 效果
-      if (!nextProps.visible) {
-        newState.confirmLoading = false;
-      }
-    }
-    if ('confirmLoading' in nextProps) {
-      newState.confirmLoading = !!nextProps.confirmLoading;
-    }
-    this.setState(newState);
-  },
-
   componentDidMount() {
     if (mousePositionEventBinded) {
       return;
@@ -85,15 +61,14 @@ let AntModal = React.createClass({
       <Button key="confirm"
         type="primary"
         size="large"
-        loading={this.state.confirmLoading}
+        loading={props.confirmLoading}
         onClick={this.handleOk}>
         确定
       </Button>
     ];
     let footer = props.footer || defaultFooter;
-    let visible = this.state.visible;
     return <Dialog onClose={this.handleCancel} footer={footer} {...props}
-      visible={visible} mousePosition={mousePosition} />;
+      visible={props.visible} mousePosition={mousePosition} />;
   }
 });
 

components/table/demo/ajax-props.md

@@ -1,117 +0,0 @@
-# 配置动态加载数据
-
-- order: 7
-
-远程读取的表格是**更为常见的模式**，下面的表格使用了 `dataSource` 对象和远程数据源绑定和适配，并具有筛选、排序等功能以及页面 loading 效果。
-
-**注意，此示例是静态数据模拟，数据并不准确，请打开网络面板查看请求。**
-
----
-
-````jsx
-var Table = antd.Table;
-
-var columns = [{
-  title: '姓名',
-  dataIndex: 'name',
-  filters: [{
-    text: '姓李的',
-    value: '李'
-  }, {
-    text: '姓胡的',
-    value: '胡'
-  }]
-}, {
-  title: '年龄',
-  dataIndex: 'age',
-  sorter: true
-}, {
-  title: '住址',
-  dataIndex: 'address'
-}];
-
-var dataSource = new Table.DataSource({
-  url: "/components/table/demo/data.json",
-  resolve: function(result) {
-    return result.data;
-  },
-  data: {},
-  // 和后台接口返回的分页数据进行适配
-  getPagination: function(result) {
-    return {
-      total: result.totalCount,
-      pageSize: result.pageSize
-    }
-  },
-  // 和后台接口接收的参数进行适配
-  // 参数里提供了分页、筛选、排序的信息
-  getParams: function(pagination, filters, sorter) {
-    console.log('getParams 的参数是：', pagination, filters, sorter);
-    var params = {
-      pageSize: pagination.pageSize,
-      currentPage: pagination.current,
-      sortField: sorter.field,
-      sortOrder: sorter.order
-    };
-    for (var key in filters) {
-      params[key] = filters[key];
-    }
-    console.log('请求参数：', params);
-    return params;
-  }
-});
-
-
-var rowSelection = {
-  getCheckboxProps: function (value) {
-    return {
-      defaultValue: value.name === '胡彦祖ajax2', // 配置默认勾选的列
-      disabled: value.name === '李大嘴ajax3'    // 配置无法勾选的列
-    }
-  },
-  onSelect: function(record, selected, selectedRows) {
-    console.log(record, selected, selectedRows);
-  },
-  onSelectAll: function(selected, selectedRows) {
-    console.log(selected, selectedRows);
-  }
-};
-
-var Test = React.createClass({
-  getInitialState() {
-    return {
-      dataSource: dataSource
-    };
-  },
-  refresh() {
-    this.setState({
-      dataSource: dataSource.clone()
-    });
-  },
-  changeAndRefresh() {
-    // 可以修改原来的 dataSource 再发请求
-    this.setState({
-      dataSource: dataSource.clone({
-        data: {
-          city: 'hz'
-        }
-      })
-    });
-  },
-  render() {
-    return <div>
-      <Table rowSelection={rowSelection} columns={columns} dataSource={this.state.dataSource} />
-      <button className="ant-btn ant-btn-primary" onClick={this.refresh}>
-        重新加载数据
-      </button>
-      &nbsp;
-      <button className="ant-btn" onClick={this.changeAndRefresh}>
-        加载 city=hz 的数据
-      </button>
-    </div>;
-  }
-});
-
-
-ReactDOM.render(<Test />, document.getElementById('components-table-demo-ajax-props'));
-````

components/table/demo/ajax.md

@@ -80,12 +80,15 @@ var Test = React.createClass({
         data: {
           city: 'hz'
         }
-      })
+      }),
+      pagination: {
+        current: 1
+      }
     });
   },
   render() {
     return <div>
-      <Table columns={columns} dataSource={this.state.dataSource} />
+      <Table columns={columns} dataSource={this.state.dataSource} pagination={this.state.pagination} />
       <Button type="primary" onClick={this.refresh}>
         重新加载数据
       </Button>

components/table/demo/expand.md

@@ -25,9 +25,9 @@ var columns = [
 ];
 
 var data = [
-  {name: '胡彦斌', age: 32, address: '西湖区湖底公园1号', description: '我是胡彦斌，今年32岁，住在西湖区湖底公园1号。'},
+  {key: 1, name: '胡彦斌', age: 32, address: '西湖区湖底公园1号', description: '我是胡彦斌，今年32岁，住在西湖区湖底公园1号。'},
-  {name: '吴彦祖', age: 42, address: '西湖区湖底公园2号', description: '我是吴彦祖，今年42岁，住在西湖区湖底公园2号。'},
+  {key: 2, name: '吴彦祖', age: 42, address: '西湖区湖底公园2号', description: '我是吴彦祖，今年42岁，住在西湖区湖底公园2号。'},
-  {name: '李大嘴', age: 32, address: '西湖区湖底公园3号', description: '我是李大嘴，今年32岁，住在西湖区湖底公园3号。'}
+  {key: 3, name: '李大嘴', age: 32, address: '西湖区湖底公园3号', description: '我是李大嘴，今年32岁，住在西湖区湖底公园3号。'}
 ];
 
 ReactDOM.render(

package.json

@@ -34,17 +34,17 @@
   "license": "MIT",
   "dependencies": {
     "css-animation": "1.1.x",
-    "gregorian-calendar": "~3.0.0",
+    "gregorian-calendar": "~3.1.0",
     "gregorian-calendar-format": "~3.0.1",
     "object-assign": "~4.0.1",
-    "rc-animate": "2.0.x",
+    "rc-animate": "~2.0.0",
     "rc-calendar": "4.0.0-alpha6",
     "rc-checkbox": "~1.1.1",
-    "rc-collapse": "~1.3.0",
+    "rc-collapse": "~1.4.0",
     "rc-dialog": "~5.1.0",
     "rc-dropdown": "~1.4.0",
     "rc-form-validation": "~2.4.7",
-    "rc-input-number": "~2.1.2",
+    "rc-input-number": "~2.3.0",
     "rc-menu": "~4.6.2",
     "rc-notification": "~1.1.0",
     "rc-pagination": "~1.1.0",
@@ -53,9 +53,9 @@
     "rc-radio": "~2.0.0",
     "rc-select": "~5.0.0",
     "rc-slider": "~1.5.0",
-    "rc-steps": "~1.3.2",
+    "rc-steps": "~1.4.0",
     "rc-switch": "~1.2.0",
-    "rc-table": "~3.2.0",
+    "rc-table": "~3.3.0",
     "rc-tabs": "~5.4.3",
     "rc-tooltip": "~3.0.1",
     "rc-tree": "~0.16.2",

site/templates/layout.html

@@ -15,6 +15,9 @@
     <link rel="stylesheet" href="{{static_url('../dist/demo.css')}}">
     <link rel="stylesheet" href="{{static_url('style.css')}}">
     <link rel="stylesheet" href="{{static_url('tomorrow.css')}}">
+    <!--[if IE 8]>
+    <script src="https://t.alipayobjects.com/images/rmsweb/T1q8JiXftaXXXXXXXX.js"></script>
+    <![endif]-->
     <script>
       (function (con) {
         'use strict';

spec/colors.md

@@ -257,7 +257,7 @@ let TintShadeTool = React.createClass({
         <span>加黑</span>
         <div style={{width: 360, display: 'inline-block', verticalAlign: 'middle', position: 'relative', top: -1, margin: '0 8px'}}>
           <Slider value={this.state.value} onChange={this.handleChangeValue} min={-100} max={100} step={5} />
-          <div style={{backgroundColor:'#81D4F9', width: 2, height: 4, position: 'absolute', top: 10, fontSize: 12, textAlign: 'center', left: 200}}></div>
+          <div style={{backgroundColor:'#81D4F9', width: 2, height: 4, position: 'absolute', top: 10, fontSize: 12, textAlign: 'center', left: 180}}></div>
         </div>
         <span>加白</span>
       </div>

style/components/button.less

@@ -47,6 +47,7 @@
     content: "\e610";
     position: absolute;
     opacity: 0;
+    visibility: hidden;
     transition: opacity 0.5s ease;
   }
 
@@ -62,6 +63,7 @@
       top: 50%;
       margin-top: -6px;
       opacity: 1;
+      visibility: visible;
     }
   }
 

style/components/datepicker/Calendar.less

@@ -83,10 +83,11 @@
 
   &-input-wrap {
     padding: 8px;
+    border-bottom: 1px solid #e9e9e9;
   }
 
   &-input {
-    .input();
+    border: 0;
     width: 100%;
     cursor: auto;
   }
@@ -230,11 +231,6 @@
     display: inline-block;
     text-align: center;
     margin: 0 10px;
-
-    &:hover {
-      cursor: pointer;
-      color: #23c0fa;
-    }
   }
 
   .@{calendar-prefix-cls}-ok-btn {

style/components/datepicker/Picker.less

@@ -43,7 +43,4 @@
   &-container-open .@{calendar-prefix-cls} {
     display: block;
   }
-  &-open &-input {
-    .active();
-  }
 }

style/mixins/button.less

@@ -86,6 +86,9 @@
   .user-select(none);
   .transition(all .3s @ease-in-out);
   transform: translate3d(0, 0, 0);
+  // Fix for ie8 border-radius
+  // http://css3pie.com/documentation/known-issues/#z-index
+  position: relative\0;
 
   > .@{iconfont-css-prefix} {
     line-height: 1;