diff --git a/components/form/Form.jsx b/components/form/Form.jsx index b01377f9a1..eac1920453 100644 --- a/components/form/Form.jsx +++ b/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 ( -
+ {this.props.children}
); diff --git a/components/form/FormItem.jsx b/components/form/FormItem.jsx index db90cddde3..52d41e801b 100644 --- a/components/form/FormItem.jsx +++ b/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 ( -
+
{children}
); diff --git a/components/input-number/index.jsx b/components/input-number/index.jsx index 7e630a5220..a8d03bd3f1 100644 --- a/components/input-number/index.jsx +++ b/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', - 'ant-input-number-sm': size === 'small', + [`${this.props.prefixCls}-lg`]: size === 'large', + [`${this.props.prefixCls}-sm`]: size === 'small', [className]: !!className, }); diff --git a/components/queue-anim/demo/form.md b/components/queue-anim/demo/form.md index 2b82e8210a..c44e3e2092 100644 --- a/components/queue-anim/demo/form.md +++ b/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 (

- + {this.state.show ? [ -
- -
-

大眼萌 minion

-
-
, -
- -
- -
-
, -
- -
- - 男的 - 女的 - -
-
, -
- -
- -

随便写点什么

-
-
, -
-
- -
-
, -
-
- -
-
+ +

大眼萌 minion

+
, + + + , + + + 男的 + 女的 + + , + + + , + + + + + , ] : null}
diff --git a/components/queue-anim/demo/simple.md b/components/queue-anim/demo/simple.md index c278890fee..57c74c2475 100644 --- a/components/queue-anim/demo/simple.md +++ b/components/queue-anim/demo/simple.md @@ -10,7 +10,7 @@ import { QueueAnim } from 'antd'; ReactDOM.render( - +
依次进场
依次进场
依次进场
diff --git a/components/table/demo/paging.md b/components/table/demo/paging.md index 2affb816db..5a46e3cc24 100644 --- a/components/table/demo/paging.md +++ b/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); diff --git a/components/table/index.jsx b/components/table/index.jsx index d87df967ab..5810373593 100644 --- a/components/table/index.jsx +++ b/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) { diff --git a/docs/spec/motion.md b/docs/spec/motion.md index db351fcc66..e998550642 100644 --- a/docs/spec/motion.md +++ b/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) 属性来给任意元素指定动画。 + +> 示例延长了动画时长以便展示。 +
-通过设置组件的 `transitionName` 指定组件动画。 - | 组件 | 中文名 | 采用动画 | -|--------------|---------------------|-------------------------------------------------| -| popover | 气泡浮出 | `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` | -| modal | 弹出框 | `zoom` | -| confirm | 弹出确认框 | `zoom` | +|--------------|--------------------|-------------------------------------------------| +| Popover | 气泡浮出 | `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` | +| Modal | 弹出框 | `zoom` | +| Badge | 徽标数 | `zoom` | | message | 信息提示条 | `move-up` | | notification | 通知框 | `move-right` & `slide-up` | -| dropdown | 下拉菜单 | `slide-up` | -| select | 选择框 | `slide-up` | -| datepicker | 日期选择框 | `slide-up` | -| alert | 警告提示 | `slide-up` | -| menu | 导航菜单 | `slide-up` | -| datepicker | 日期选择框 | `slide-up` | +| Dropdown | 下拉菜单 | `slide-up` | +| Select | 选择框 | `slide-up` | +| Cascader | 级联选择框 | `slide-up` | +| TreeSelect | 树选择框 | `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){ - this.demoNode.style.visibility=''; + if (value) { + this.demoNode.style.visibility = ''; cssAnimation(this.demoNode, value, () => { - if(value.slice(-leave.length)===leave){ - this.demoNode.style.visibility='hidden'; + if (value.slice(-leave.length) === leave) { + this.demoNode.style.visibility = 'hidden'; } }); } @@ -218,7 +221,6 @@ var Test = React.createClass({
-
; } }); @@ -227,6 +229,11 @@ ReactDOM.render(, document.getElementById('components-motion-demo-basic') `````