Merge branch 'master' of github.com:ant-design/ant-design

components/form/Form.jsx

@@ -9,15 +9,15 @@ class Form extends React.Component {
   }
 
   render() {
-    const { prefixCls, className } = this.props;
+    const { prefixCls, className, style } = this.props;
     const formClassName = classNames({
-      [className]: !!className,
       [`${prefixCls}-horizontal`]: this.props.horizontal,
       [`${prefixCls}-inline`]: this.props.inline,
+      [className]: !!className,
     });
 
     return (
-      <form {...this.props} className={formClassName}>
+      <form {...this.props} className={formClassName} style={style}>
         {this.props.children}
       </form>
     );

components/form/FormItem.jsx

@@ -151,6 +151,7 @@ class FormItem extends React.Component {
   renderFormItem(children) {
     const props = this.props;
     const prefixCls = props.prefixCls;
+    const style = props.style;
     const itemClassName = {
       [`${prefixCls}-item`]: true,
       [`${prefixCls}-item-with-help`]: !!this.getHelpMsg(),
@@ -158,7 +159,7 @@ class FormItem extends React.Component {
     };
 
     return (
-      <div className={classNames(itemClassName)}>
+      <div className={classNames(itemClassName)} style={style}>
         {children}
       </div>
     );

components/input-number/index.jsx

@@ -12,8 +12,8 @@ export default React.createClass({
   render() {
     const { className, size, ...other } = this.props;
     const inputNumberClass = classNames({
-      'ant-input-number-lg': size === 'large',
+      [`${this.props.prefixCls}-lg`]: size === 'large',
-      'ant-input-number-sm': size === 'small',
+      [`${this.props.prefixCls}-sm`]: size === 'small',
       [className]: !!className,
     });
 

components/queue-anim/demo/form.md

@@ -7,7 +7,8 @@
 ---
 
 ````jsx
-import { QueueAnim, Button, Checkbox, Radio } from 'antd';
+import { QueueAnim, Button, Radio, Input, Form, Row, Col } from 'antd';
+const FormItem = Form.Item;
 const RadioGroup = Radio.Group;
 
 const Test = React.createClass({
@@ -22,54 +23,37 @@ const Test = React.createClass({
     });
   },
   render() {
+    const formItemLayout = {
+      labelCol: { span: 6 },
+      wrapperCol: { span: 14 },
+    };
     return (
       <div>
         <p className="buttons">
           <Button type="primary" onClick={this.onClick}>切换</Button>
         </p>
-        <QueueAnim component="form" className="ant-form-horizontal" type="bottom" leaveReverse>
+        <QueueAnim component={Form} className="ant-form ant-form-horizontal" type="bottom" leaveReverse>
           {this.state.show ? [
-            <div className="ant-form-item ant-form-item-compact" key="name">
+            <FormItem key="item1" {...formItemLayout} label="用户名：">
-              <label htmlFor="userName" className="col-6" required>用户名：</label>
+              <p className="ant-form-text">大眼萌 minion</p>
-              <div className="col-6">
+            </FormItem>,
-                <p className="ant-form-text">大眼萌 minion</p>
+            <FormItem key="item2" {...formItemLayout} label="密码：">
-              </div>
+              <Input type="password" placeholder="请输入密码" />
-            </div>,
+            </FormItem>,
-            <div className="ant-form-item" key="password">
+            <FormItem key="item3" {...formItemLayout} label="您的性别：">
-              <label htmlFor="password" className="col-6" required>密码：</label>
+              <RadioGroup>
-              <div className="col-14">
+                <Radio value="male">男的</Radio>
-                <input className="ant-input" type="password" id="password" placeholder="请输入密码" />
+                <Radio value="female">女的</Radio>
-              </div>
+              </RadioGroup>
-            </div>,
+            </FormItem>,
-            <div className="ant-form-item ant-form-item-compact" key="sex">
+            <FormItem key="item4" {...formItemLayout} label="备注：">
-              <label className="col-6" required>您的性别：</label>
+              <Input type="textarea" placeholder="随便写" />
-              <div className="col-14">
+            </FormItem>,
-                <RadioGroup value="male">
+            <Row key="submit">
-                  <Radio value="male">男的</Radio>
+              <Col span="16" offset="6">
-                  <Radio value="female">女的</Radio>
+                <Button type="primary" htmlType="submit">确定</Button>
-                </RadioGroup>
+              </Col>
-              </div>
+            </Row>,
-            </div>,
-            <div className="ant-form-item" key="remark">
-              <label htmlFor="remark" className="col-6" required>备注：</label>
-              <div className="col-14">
-                <textarea className="ant-input" id="remark" placeholder="随便写"></textarea>
-                <p className="ant-form-explain">随便写点什么</p>
-              </div>
-            </div>,
-            <div className="ant-form-item ant-form-item-compact" key="checkbox">
-              <div className="col-14 col-offset-6">
-                <label>
-                  <Checkbox />
-                  同意
-                </label>
-              </div>
-            </div>,
-            <div className="row" key="btn">
-              <div className="col-16 col-offset-6">
-                <Button type="primary">确定</Button>
-              </div>
-            </div>
           ] : null}
         </QueueAnim>
       </div>

components/queue-anim/demo/simple.md

@@ -10,7 +10,7 @@
 import { QueueAnim } from 'antd';
 
 ReactDOM.render(
-  <QueueAnim delay={500}>
+  <QueueAnim delay={500} style={{ height: 150 }}>
     <div key="a">依次进场</div>
     <div key="b">依次进场</div>
     <div key="c">依次进场</div>

components/table/demo/paging.md

@@ -35,7 +35,6 @@ for (let i = 0; i < 46; i++) {
 
 const pagination = {
   total: data.length,
-  current: 1,
   showSizeChanger: true,
   onShowSizeChange(current, pageSize) {
     console.log('Current: ', current, '; PageSize: ', pageSize);

components/table/index.jsx

@@ -264,6 +264,7 @@ let AntTable = React.createClass({
   },
 
   handlePageChange(current) {
+    const props = this.props;
     let pagination = objectAssign({}, this.state.pagination);
     if (current) {
       pagination.current = current;
@@ -274,10 +275,22 @@ let AntTable = React.createClass({
 
     const newState = {
       selectionDirty: false,
-      pagination
+      pagination,
     };
+    // Controlled current prop will not respond user interaction
+    if (props.pagination && 'current' in props.pagination) {
+      newState.pagination = {
+        ...pagination,
+        current: this.state.pagination.current,
+      };
+    }
     this.setState(newState);
-    this.props.onChange(...this.prepareParamsArguments({ ...this.state, ...newState }));
+
+    this.props.onChange(...this.prepareParamsArguments({
+      ...this.state,
+      selectionDirty: false,
+      pagination,
+    }));
   },
 
   onRadioChange(ev) {

docs/spec/motion.md

@@ -7,25 +7,29 @@
 
 Ant Design 提供了一些预设的组件动画样式。
 
+可以使用 [rc-animate](https://github.com/react-component/animate) 的 [transitionName](http://react-component.github.io/animate/examples/simple.html) 属性来给任意元素指定动画。
+
+> 示例延长了动画时长以便展示。
+
 <div id="components-motion-demo-basic"></div>
 
-通过设置组件的 `transitionName` 指定组件动画。
-
 | 组件         | 中文名              | 采用动画                                        |
-|--------------|---------------------|-------------------------------------------------|
+|--------------|--------------------|-------------------------------------------------|
-| popover      | 气泡浮出            | `zoom-up` `zoom-down` `zoom-left` `zoom-right`  |
+| Popover      | 气泡浮出            | `zoom-up` `zoom-down` `zoom-left` `zoom-right`  |
-| popconfirm   | 气泡确认            | `zoom-up` `zoom-down` `zoom-left` `zoom-right`  |
+| Popconfirm   | 气泡确认            | `zoom-up` `zoom-down` `zoom-left` `zoom-right`  |
-| tooltip      | 文字提示            | `zoom-up` `zoom-down` `zoom-left` `zoom-right`  |
+| Tooltip      | 文字提示            | `zoom-up` `zoom-down` `zoom-left` `zoom-right`  |
-| modal        | 弹出框              | `zoom`                                          |
+| Modal        | 弹出框              | `zoom`                                          |
-| confirm      | 弹出确认框          | `zoom`                                          |
+| Badge        | 徽标数              | `zoom`                                          |
 | message      | 信息提示条          | `move-up`                                       |
 | notification | 通知框              | `move-right` & `slide-up`                       |
-| dropdown     | 下拉菜单            | `slide-up`                                      |
+| Dropdown     | 下拉菜单            | `slide-up`                                      |
-| select       | 选择框              | `slide-up`                                      |
+| Select       | 选择框              | `slide-up`                                      |
-| datepicker   | 日期选择框          | `slide-up`                                      |
+| Cascader     | 级联选择框          | `slide-up`                                      |
-| alert        | 警告提示            | `slide-up`                                      |
+| TreeSelect   | 树选择框            | `slide-up`                                      |
-| menu         | 导航菜单            | `slide-up`                                      |
+| DatePicker   | 日期选择框          | `slide-up`                                      |
-| datepicker   | 日期选择框          | `slide-up`                                      |
+| TatePicker   | 日期选择框          | `slide-up`                                      |
+| Alert        | 警告提示            | `slide-up`                                      |
+| Menu         | 导航菜单            | `slide-up`                                      |
 
 
 `````jsx
@@ -34,7 +38,6 @@ var Select = antd.Select;
 var Option = Select.Option;
 var OptGroup = Select.OptGroup;
 
-
 var motions = [];
 motions = motions.concat([[{
   name: '淡入',
@@ -186,15 +189,15 @@ motions = motions.concat([[{
   direction: 'enter',
   type: '其他'
 }]]);
-var leave='-leave';
+var leave = '-leave';
 var Test = React.createClass({
   handleChange(e) {
     var value = e;
-    if(value){
+    if (value) {
-      this.demoNode.style.visibility='';
+      this.demoNode.style.visibility = '';
       cssAnimation(this.demoNode, value, () => {
-        if(value.slice(-leave.length)===leave){
+        if (value.slice(-leave.length) === leave) {
-          this.demoNode.style.visibility='hidden';
+          this.demoNode.style.visibility = 'hidden';
         }
       });
     }
@@ -218,7 +221,6 @@ var Test = React.createClass({
       <div className="motion-select-wrapper">
         <Select value="" className='motion-select' onChange={this.handleChange}>{options}</Select>
       </div>
-
     </div>;
   }
 });
@@ -227,6 +229,11 @@ ReactDOM.render(<Test/>, document.getElementById('components-motion-demo-basic')
 `````
 
 <style>
+#components-motion-demo-basic {
+  margin: 40px 0;
+  width: 80%;
+}
+
 .motion-container {
   height: 190px;
   line-height: 190px;
@@ -243,6 +250,7 @@ ReactDOM.render(<Test/>, document.getElementById('components-motion-demo-basic')
   display: inline-block !important;
   border-radius: 8px;
   font-weight: bold;
+  animation-duration: 0.5s!important;
   background: url(https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg) center/230px;
 }
 .motion-select-wrapper{

webpack.config.js

@@ -58,7 +58,11 @@ module.exports = {
     }]
   },
 
-  postcss: [autoprefixer],
+  postcss: [
+    autoprefixer({
+      browsers: ['last 2 versions', 'Firefox ESR', '> 1%', 'ie >= 8']
+    })
+  ],
 
   plugins: [
     new ExtractTextPlugin('[name].css'),