diff --git a/CHANGELOG.md b/CHANGELOG.md index ae8506851..d558c7212 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,6 +9,16 @@ timeline: true --- +## 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 - 升级 rc-collapse 修复一个性能问题。 diff --git a/components/form/FormItem.jsx b/components/form/FormItem.jsx index 6eb7567ba..c9f769134 100644 --- a/components/form/FormItem.jsx +++ b/components/form/FormItem.jsx @@ -82,7 +82,7 @@ export default class FormItem extends React.Component { renderExtra() { const { prefixCls, extra } = this.props; - return
{extra}
; + return {extra}; } getValidateStatus() { diff --git a/components/menu/demo/switch-mode.md b/components/menu/demo/switch-mode.md new file mode 100644 index 000000000..99ad3b8e8 --- /dev/null +++ b/components/menu/demo/switch-mode.md @@ -0,0 +1,64 @@ +--- +order: 5 +title: 切换菜单类型 +--- + +展示动态切换模式。 + +````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 ( +
+ +
+
+ + 导航一}> + + 选项1 + 选项2 + + + 选项3 + 选项4 + + + 导航二}> + 选项5 + 选项6 + + 选项7 + 选项8 + + + 导航三}> + 选项9 + 选项10 + 选项11 + 选项12 + + +
+ ); + } +}); +ReactDOM.render(, mountNode); +```` diff --git a/components/menu/index.jsx b/components/menu/index.jsx index e90926b20..943e489fc 100644 --- a/components/menu/index.jsx +++ b/components/menu/index.jsx @@ -24,6 +24,12 @@ export default class Menu extends React.Component { openKeys: [] }; } + componentWillReceiveProps(nextProps) { + if (this.props.mode === 'inline' && + nextProps.mode !== 'inline') { + this.switchModeFromInline = true; + } + } handleClick = (e) => { this.setState({ openKeys: [] @@ -50,7 +56,14 @@ export default class Menu extends React.Component { openAnimation = 'slide-up'; break; 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; case 'inline': openAnimation = animation; diff --git a/components/menu/index.md b/components/menu/index.md index f39bfa68f..8f570d541 100644 --- a/components/menu/index.md +++ b/components/menu/index.md @@ -30,7 +30,7 @@ english: Menu | 参数 | 说明 | 类型 | 默认值 | |----------|----------------|----------|--------------| | theme | 主题颜色 | enum: `light` `dark` | 'light' | -| mode | 菜单类型 | enum: `vertical` `horizontal` `inline` | vertical | +| mode | 菜单类型,现在支持垂直、水平、和内嵌模式三种 | enum: `vertical` `horizontal` `inline` | vertical | | selectedKeys | 当前选中的菜单项 key 数组 | | | | defaultSelectedKeys | 初始选中的菜单项 key 数组 | | | | openKeys | 当前展开的菜单项 key 数组 | | | diff --git a/style/components/menu.less b/style/components/menu.less index 2f334fbc0..4faa00a32 100644 --- a/style/components/menu.less +++ b/style/components/menu.less @@ -87,6 +87,13 @@ } } + &-vertical &-sub { + border-right: 0; + .@{menu-prefix-cls}-item { + border-right: 0; + } + } + &-inline { .@{menu-prefix-cls}-selected, .@{menu-prefix-cls}-item-selected {