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

CHANGELOG.md

@@ -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
 
 - 升级 rc-collapse 修复一个性能问题。

components/button/button.jsx

@@ -83,7 +83,7 @@ export default class Button extends React.Component {
 Button.propTypes = {
   type: React.PropTypes.oneOf(['primary', 'ghost', 'dashed']),
   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']),
   onClick: React.PropTypes.func,
   loading: React.PropTypes.bool,

components/calendar/Header.jsx

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

components/common/openAnimation.js

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

components/form/FormItem.jsx

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

components/menu/demo/switch-mode.md

@@ -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);
+````

components/menu/index.jsx

@@ -21,6 +21,12 @@ const AntMenu = React.createClass({
       openKeys: []
     };
   },
+  componentWillReceiveProps(nextProps) {
+    if (this.props.mode === 'inline' &&
+        nextProps.mode !== 'inline') {
+      this.switchModeFromInline = true;
+    }
+  },
   handleClick(e) {
     this.setState({
       openKeys: []
@@ -47,7 +53,14 @@ const AntMenu = React.createClass({
           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;

components/menu/index.md

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

docs/pattern/navigation.md

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

package.json

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

style/components/form.less

@@ -77,7 +77,7 @@ input[type="checkbox"] {
   }
 
   &.@{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 {
@@ -367,7 +367,7 @@ form {
   }
 
   // ant-timepicker
-  .@{timepicker-prefix-cls}-picker-icon:after {
+  .@{timepicker-prefix-cls}-icon:after {
     color: @warning-color;
   }
 

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 {

style/components/table.less

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