From f79c8c028b8d48a5be290e4ad372d35a71041f87 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 29 Mar 2016 20:29:41 +0800 Subject: [PATCH 1/6] Fix QueueAnim demo --- components/queue-anim/demo/form.md | 70 +++++++++++----------------- components/queue-anim/demo/simple.md | 2 +- 2 files changed, 28 insertions(+), 44 deletions(-) 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( - +
依次进场
依次进场
依次进场
From c10fbaed6fcef7557c6d237cf0d977df44c73a6d Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 30 Mar 2016 10:58:37 +0800 Subject: [PATCH 2/6] fix some className issues --- components/form/Form.jsx | 2 +- components/input-number/index.jsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/components/form/Form.jsx b/components/form/Form.jsx index b01377f9a1..e1e436fe73 100644 --- a/components/form/Form.jsx +++ b/components/form/Form.jsx @@ -11,9 +11,9 @@ class Form extends React.Component { render() { const { prefixCls, className } = this.props; const formClassName = classNames({ - [className]: !!className, [`${prefixCls}-horizontal`]: this.props.horizontal, [`${prefixCls}-inline`]: this.props.inline, + [className]: !!className, }); return ( 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, }); From 1d1d0bac0df866ad6a7225d967cc0a3f979f7370 Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 30 Mar 2016 11:01:09 +0800 Subject: [PATCH 3/6] Add style for Form & FormItem close #1290 --- components/form/Form.jsx | 4 ++-- components/form/FormItem.jsx | 3 ++- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/components/form/Form.jsx b/components/form/Form.jsx index e1e436fe73..eac1920453 100644 --- a/components/form/Form.jsx +++ b/components/form/Form.jsx @@ -9,7 +9,7 @@ class Form extends React.Component { } render() { - const { prefixCls, className } = this.props; + const { prefixCls, className, style } = this.props; const formClassName = classNames({ [`${prefixCls}-horizontal`]: this.props.horizontal, [`${prefixCls}-inline`]: this.props.inline, @@ -17,7 +17,7 @@ class Form extends React.Component { }); 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}
); From 88531eeab2b546f580cdc900cad54c63c03dfb90 Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 30 Mar 2016 11:33:41 +0800 Subject: [PATCH 4/6] update motion.md --- docs/spec/motion.md | 50 ++++++++++++++++++++++++++------------------- 1 file changed, 29 insertions(+), 21 deletions(-) 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') `````