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

This commit is contained in:
偏右 2016-05-05 17:24:25 +08:00
commit a2f40306b8
13 changed files with 121 additions and 13 deletions

View File

@ -4,6 +4,21 @@
--- ---
## 0.12.17
- 修复 FormItem 校验时表单项高度跳动的问题。[#1557](https://github.com/ant-design/ant-design/issues/1557)
- 修复一个 Table 圆角样式的小问题。
## 0.12.16
- 修复 Collapse 在 safari 中切换动画异常的问题。[#1494](https://github.com/ant-design/ant-design/issues/1494)
- 修复 Table 的 selectedRowKeys 在初次渲染时失效的问题。[#1501](https://github.com/ant-design/ant-design/issues/1501)
- Table 现在点击选择框时将不再触发 `onRowClick`。[#1470](https://github.com/ant-design/ant-design/issues/1470)
- 修复一个 Calender 服务端渲染时提示 `Option is not defined` 的问题。[#1521](https://github.com/ant-design/ant-design/issues/1521)
- 修复 Menu 动态切换模式时的一些细节问题。
- 优化了 export 导出图标。
- 修复 Form 的一些样式细节。
## 0.12.15 ## 0.12.15
- 升级 rc-collapse 修复一个性能问题。 - 升级 rc-collapse 修复一个性能问题。

View File

@ -83,7 +83,7 @@ export default class Button extends React.Component {
Button.propTypes = { Button.propTypes = {
type: React.PropTypes.oneOf(['primary', 'ghost', 'dashed']), type: React.PropTypes.oneOf(['primary', 'ghost', 'dashed']),
shape: React.PropTypes.oneOf(['circle', 'circle-outline']), shape: React.PropTypes.oneOf(['circle', 'circle-outline']),
size: React.PropTypes.oneOf(['large', 'small']), size: React.PropTypes.oneOf(['large', 'default', 'small']),
htmlType: React.PropTypes.oneOf(['submit', 'button', 'reset']), htmlType: React.PropTypes.oneOf(['submit', 'button', 'reset']),
onClick: React.PropTypes.func, onClick: React.PropTypes.func,
loading: React.PropTypes.bool, loading: React.PropTypes.bool,

View File

@ -2,6 +2,7 @@ import React, { PropTypes, Component } from 'react';
import { PREFIX_CLS } from './Constants'; import { PREFIX_CLS } from './Constants';
import Select from '../select'; import Select from '../select';
import { Group, Button } from '../radio'; import { Group, Button } from '../radio';
const Option = Select.Option;
function noop() {} function noop() {}

View File

@ -9,6 +9,7 @@ function animate(node, show, transitionName, done) {
function complete() { function complete() {
if (!ok) { if (!ok) {
ok = true; ok = true;
node.style.display = '';
done(); done();
} }
} }

View File

@ -40,16 +40,16 @@ class FormItem extends React.Component {
const props = this.props; const props = this.props;
const prefixCls = props.prefixCls; const prefixCls = props.prefixCls;
const help = this.getHelpMsg(); const help = this.getHelpMsg();
return ( return help ? (
<div className={!!help ? prefixClsFn(prefixCls, 'explain') : ''} key="help"> <div className={prefixClsFn(prefixCls, 'explain')} key="help">
{ help } {help}
</div> </div>
); ) : null;
} }
renderExtra() { renderExtra() {
const { prefixCls, extra } = this.props; const { prefixCls, extra } = this.props;
return <div className={prefixClsFn(prefixCls, 'extra')}>{extra}</div>; return <span className={prefixClsFn(prefixCls, 'extra')}>{extra}</span>;
} }
getValidateStatus() { getValidateStatus() {

View File

@ -0,0 +1,65 @@
# 切换
- order: 5
展示动态切换模式。
---
````jsx
import { Menu, Icon, Switch } from 'antd';
const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;
const Sider = React.createClass({
getInitialState() {
return {
mode: 'inline',
};
},
changeMode(value) {
this.setState({
mode: value ? 'vertical' : 'inline',
});
},
render() {
return (
<div>
<Switch onChange={this.changeMode} />
<br />
<br />
<Menu
style={{ width: 240 }}
defaultOpenKeys={['sub1']}
mode={this.state.mode}>
<SubMenu key="sub1" title={<span><Icon type="mail" /><span>导航一</span></span>}>
<MenuItemGroup title="分组1">
<Menu.Item key="1">选项1</Menu.Item>
<Menu.Item key="2">选项2</Menu.Item>
</MenuItemGroup>
<MenuItemGroup title="分组2">
<Menu.Item key="3">选项3</Menu.Item>
<Menu.Item key="4">选项4</Menu.Item>
</MenuItemGroup>
</SubMenu>
<SubMenu key="sub2" title={<span><Icon type="appstore" /><span>导航二</span></span>}>
<Menu.Item key="5">选项5</Menu.Item>
<Menu.Item key="6">选项6</Menu.Item>
<SubMenu key="sub3" title="三级导航">
<Menu.Item key="7">选项7</Menu.Item>
<Menu.Item key="8">选项8</Menu.Item>
</SubMenu>
</SubMenu>
<SubMenu key="sub4" title={<span><Icon type="setting" /><span>导航三</span></span>}>
<Menu.Item key="9">选项9</Menu.Item>
<Menu.Item key="10">选项10</Menu.Item>
<Menu.Item key="11">选项11</Menu.Item>
<Menu.Item key="12">选项12</Menu.Item>
</SubMenu>
</Menu>
</div>
);
}
});
ReactDOM.render(<Sider />, mountNode);
````

View File

@ -21,6 +21,12 @@ const AntMenu = React.createClass({
openKeys: [] openKeys: []
}; };
}, },
componentWillReceiveProps(nextProps) {
if (this.props.mode === 'inline' &&
nextProps.mode !== 'inline') {
this.switchModeFromInline = true;
}
},
handleClick(e) { handleClick(e) {
this.setState({ this.setState({
openKeys: [] openKeys: []
@ -47,7 +53,14 @@ const AntMenu = React.createClass({
openAnimation = 'slide-up'; openAnimation = 'slide-up';
break; break;
case 'vertical': case 'vertical':
openAnimation = 'zoom-big'; // When mode switch from inline
// submenu should hide without animation
if (this.switchModeFromInline) {
openAnimation = '';
this.switchModeFromInline = false;
} else {
openAnimation = 'zoom-big';
}
break; break;
case 'inline': case 'inline':
openAnimation = animation; openAnimation = animation;

View File

@ -31,7 +31,7 @@
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|----------|----------------|----------|--------------| |----------|----------------|----------|--------------|
| theme | 主题颜色 | enum: `light` `dark` | 'light' | | theme | 主题颜色 | enum: `light` `dark` | 'light' |
| mode | 菜单类型 | enum: `vertical` `horizontal` `inline` | vertical | | mode | 菜单类型,现在支持垂直、水平、和内嵌模式三种 | enum: `vertical` `horizontal` `inline` | vertical |
| selectedKeys | 当前选中的菜单项 key 数组 | | | | selectedKeys | 当前选中的菜单项 key 数组 | | |
| defaultSelectedKeys | 初始选中的菜单项 key 数组 | | | | defaultSelectedKeys | 初始选中的菜单项 key 数组 | | |
| openKeys | 当前展开的菜单项 key 数组 | | | | openKeys | 当前展开的菜单项 key 数组 | | |

View File

@ -38,7 +38,7 @@
我们将常见的导航模式分为:侧栏导航和顶部导航,两者各有优缺点,设计者可以根据各自的业务需求进行选择。 我们将常见的导航模式分为:侧栏导航和顶部导航,两者各有优缺点,设计者可以根据各自的业务需求进行选择。
前端实现代码可以参考 [常用布局](/docs/spec/layout#layout-demo-top)。 前端实现代码可以参考 [常用布局](/docs/spec/layout/#layout-demo-top)。
## 侧栏导航 ## 侧栏导航

View File

@ -1,6 +1,6 @@
{ {
"name": "antd", "name": "antd",
"version": "0.12.15", "version": "0.12.17",
"title": "Ant Design", "title": "Ant Design",
"description": "一个 UI 设计语言", "description": "一个 UI 设计语言",
"homepage": "http://ant.design/", "homepage": "http://ant.design/",
@ -58,7 +58,7 @@
"rc-slider": "~3.3.0", "rc-slider": "~3.3.0",
"rc-steps": "~1.4.1", "rc-steps": "~1.4.1",
"rc-switch": "~1.3.2", "rc-switch": "~1.3.2",
"rc-table": "~3.11.1", "rc-table": "~3.11.4",
"rc-tabs": "~5.8.0", "rc-tabs": "~5.8.0",
"rc-time-picker": "~1.1.0", "rc-time-picker": "~1.1.0",
"rc-tooltip": "~3.3.1", "rc-tooltip": "~3.3.1",

View File

@ -77,7 +77,7 @@ input[type="checkbox"] {
} }
&.@{css-prefix}form-item-with-help { &.@{css-prefix}form-item-with-help {
margin-bottom: @form-item-margin-bottom - @font-size-base * @line-height-base; margin-bottom: @form-item-margin-bottom - @font-size-base * @line-height-base - 3;
} }
> label { > label {
@ -367,7 +367,7 @@ form {
} }
// ant-timepicker // ant-timepicker
.@{timepicker-prefix-cls}-picker-icon:after { .@{timepicker-prefix-cls}-icon:after {
color: @warning-color; color: @warning-color;
} }

View File

@ -87,6 +87,13 @@
} }
} }
&-vertical &-sub {
border-right: 0;
.@{menu-prefix-cls}-item {
border-right: 0;
}
}
&-inline { &-inline {
.@{menu-prefix-cls}-selected, .@{menu-prefix-cls}-selected,
.@{menu-prefix-cls}-item-selected { .@{menu-prefix-cls}-item-selected {

View File

@ -19,6 +19,8 @@
max-width: 100%; max-width: 100%;
border-collapse: separate; border-collapse: separate;
text-align: left; text-align: left;
border-radius: @border-radius-base;
overflow: hidden;
} }
th { th {
@ -71,6 +73,10 @@
} }
} }
&.@{table-prefix-cls}-bordered tfoot tr {
top: 0;
}
tr.@{table-prefix-cls}-row-selected { tr.@{table-prefix-cls}-row-selected {
background: #fafafa; background: #fafafa;
} }