Merge branch '1.x-stable'

CHANGELOG.md

@@ -1,6 +1,6 @@
 ---
 order: 3
-chinese: 更新日志
+title: 更新日志
 toc: false
 timeline: true
 ---
@@ -9,6 +9,23 @@ timeline: true
 
 ---
 
+## 1.6.5
+
+`2016-07-16`
+
+- 修复 Input 的 `value prop on input should not be null` 警告并且导致在表单中无法重置的问题。[#2335](https://github.com/ant-design/ant-design/issues/2335)
+- 优化 FormItem 的布局实现，修复表单布局不支持响应式布局的问题。[#2305](https://github.com/ant-design/ant-design/issues/2305)
+- 修复带时间的 DatePicker 的 onChange 触发逻辑。[#2399](https://github.com/ant-design/ant-design/issues/2399#issuecomment-232893146)
+- 修复 Transfer 搜索后全选的问题。[#2396](https://github.com/ant-design/ant-design/issues/2396)
+- 修复 Cascader 样式会被 ant-input 样式覆盖的问题。[#2400](https://github.com/ant-design/ant-design/issues/2400)
+- 修复 Table 删除数据时导致当前页数溢出的问题。[#2301](https://github.com/ant-design/ant-design/pull/2301)
+- 修复 Table 删除数据时导致当前页数溢出的问题。[#2301](https://github.com/ant-design/ant-design/pull/2301)
+- 修复 resize 浏览器时 Affix 元素没有和原来的位置同步的问题。[#1987](https://github.com/ant-design/ant-design/issues/1987)
+- 给 Affix 元素添加占位，修复固定时页面跳动的问题。
+- 修复 Select combobox 模式会导致页面出现横向滚动条的问题。[#2353](https://github.com/ant-design/ant-design/issues/2353)
+- 修复 Upload 组件已上传文件链接点击无效的问题。[#2331](https://github.com/ant-design/ant-design/issues/2331)
+- 修复 Upload 上传过程中删除图片后的报错问题。[#2342](https://github.com/ant-design/ant-design/issues/2342)
+
 ## 1.6.4
 
 `2016-07-08`

README-zh_CN.md

@@ -11,9 +11,8 @@
 ## 特性
 
 - 提炼和服务企业级中后台产品的交互语言和视觉风格。
-- [React Component](http://react-component.github.io/badgeboard/) 上精心封装的高质量 UI 库。
+- [React Component](http://react-component.github.io/badgeboard/) 基础上精心封装的高质量 UI 组件。
-- 基于 npm + webpack + babel 的工作流，支持 ES2015。
+- 基于 npm + webpack + babel 的工作流，支持 ES2015 和 TypeScript。
-
 
 ## 安装
 

components/breadcrumb/demo/router.md

@@ -1,7 +1,7 @@
 ---
 order: 2
 iframe: true
-title: 
+title:
   zh-CN: 路由
   en-US: React Router Integration
 ---
@@ -44,7 +44,7 @@ const Home = (props) => (
         borderBottom: '1px dashed #ccc',
       }}
     >
-      Click the navigation above to switch the page,breadcrumb is right here:
+      Click the navigation above to switch:
     </div>
     <Breadcrumb {...props} />
   </div>

components/breadcrumb/demo/withIcon.md

@@ -23,7 +23,7 @@ ReactDOM.render(
     </Breadcrumb.Item>
     <Breadcrumb.Item href="">
       <Icon type="user" />
-      Application List
+      <span>Application List</span>
     </Breadcrumb.Item>
     <Breadcrumb.Item>
       Application
@@ -31,4 +31,3 @@ ReactDOM.render(
   </Breadcrumb>
 , mountNode);
 ````
-

components/breadcrumb/style/index.less

@@ -8,6 +8,10 @@
 
   a {
     color: @text-color;
+    transition: all .3s;
+    &:hover {
+      color: tint(@primary-color, 20%);
+    }
   }
 
   & > span:last-child {
@@ -24,7 +28,9 @@
     color: @border-color-base;
   }
 
-  .anticon + span {
+  &-link {
-    margin-left: 4px;
+    > .anticon + span {
+      margin-left: 4px;
+    }
   }
 }

components/cascader/index.tsx

@@ -150,6 +150,10 @@ export default class Cascader extends React.Component<CascaderProps, any> {
       'onPopupVisibleChange',
       'changeOnSelect',
       'expandTrigger',
+      'popupVisible',
+      'getPopupContainer',
+      'loadData',
+      'popupClassName',
     ]);
 
     return (

components/date-picker/style/Calendar.less

@@ -38,7 +38,7 @@
     position: absolute;
     top: 0;
     color: #999;
-    font-family: Arial,"Hiragino Sans GB","Microsoft Yahei","Microsoft Sans Serif",sans-serif;
+    font-family: Arial, "Hiragino Sans GB", "Microsoft Yahei", "Microsoft Sans Serif", sans-serif;
     padding: 0 5px;
     font-size: 16px;
     display: inline-block;

components/form/style/mixin.less

@@ -86,7 +86,7 @@
   input[type="radio"]:focus,
   input[type="checkbox"]:focus {
     outline: thin dotted;
-    outline: 5px auto -webkit-focus-ring-color;
+    outline: 5px auto -webkit-focus-ring-color; // lesshint spaceAroundOperator: false
     outline-offset: -2px;
   }
 

components/input/style/mixin.less

@@ -161,7 +161,7 @@
 
     // Reset Select's style in addon
     .ant-select {
-      margin: -(@input-padding-vertical-base + 1) (-@input-padding-horizontal);
+      margin: -(@input-padding-vertical-base + 1) (-@input-padding-horizontal);  // lesshint spaceAroundOperator: false
 
       .ant-select-selection {
         background-color: inherit;

components/menu/style/index.less

@@ -151,6 +151,7 @@
     &.@{menu-prefix-cls}-submenu-disabled {
       color: #999 !important;
       cursor: not-allowed;
+      background: none;
       > a {
         color: #999 !important;
         pointer-events: none;

components/popover/style/index.less

@@ -4,22 +4,22 @@
 @popover-prefix-cls: ant-popover;
 
 //** Popover body background color
-@popover-bg:                          #fff;
+@popover-bg: #fff;
 //** Popover maximum width
-@popover-min-width:                   177px;
+@popover-min-width: 177px;
 //** Popover border color
-@popover-border-color:                @border-color-base;
+@popover-border-color: @border-color-base;
 
 //** Popover arrow width
-@popover-arrow-width:                 4px;
+@popover-arrow-width: 4px;
 
 //** Popover arrow color
-@popover-arrow-color:                 @popover-bg;
+@popover-arrow-color: @popover-bg;
 
 //** Popover outer arrow width
-@popover-arrow-outer-width:           (@popover-arrow-width + 1);
+@popover-arrow-outer-width: (@popover-arrow-width + 1);
 //** Popover outer arrow color
-@popover-arrow-outer-color:           fadein(@popover-border-color, 5%);
+@popover-arrow-outer-color: fadein(@popover-border-color, 5%);
 
 .@{popover-prefix-cls} {
   position: absolute;

components/progress/style/index.less

@@ -34,7 +34,7 @@
   &-bg {
     border-radius: 100px;
     background-color: @info-color;
-    transition: all 0.3s linear 0s;
+    transition: all .4s @ease-out-circ 0s;
     position: relative;
   }
 

components/steps/demo/error.md

@@ -9,19 +9,12 @@ title: 步骤运行错误
 import { Steps } from 'antd';
 const Step = Steps.Step;
 
-const steps = [{
+ReactDOM.render(
-  title: '已完成',
+  <Steps current={1} status="error">
-  description: '这里是多信息的描述啊',
+    <Step title="已完成" description="这里是多信息的描述" />
-}, {
+    <Step title="进行中" description="这里是多信息的描述" />
-  title: '错误示例',
+    <Step title="待运行" description="这里是多信息的描述" />
-  description: '这里是多信息的耶哦耶哦哦耶哦耶',
+    <Step title="待运行" description="这里是多信息的描述" />
-}, {
+  </Steps>
-  title: '又一个待运行',
+, mountNode);
-  description: '描述啊描述啊',
-}, {
-  title: '待运行',
-  description: '这里是多信息的描述啊',
-}].map((s, i) => <Step key={i} title={s.title} description={s.description} />);
-
-ReactDOM.render(<Steps current={1} status="error">{steps}</Steps>, mountNode);
 ````

components/steps/demo/icon.md

@@ -9,9 +9,11 @@ title: 带图标的步骤条
 import { Steps } from 'antd';
 const Step = Steps.Step;
 
-ReactDOM.render(<Steps>
+ReactDOM.render(
-  <Step status="finish" title="步骤1" icon="cloud" />
+  <Steps>
-  <Step status="process" title="步骤2" icon="apple" />
+    <Step status="finish" title="步骤1" icon="cloud" />
-  <Step status="wait" title="步骤3" icon="github" />
+    <Step status="process" title="步骤2" icon="apple" />
-</Steps>, mountNode);
+    <Step status="wait" title="步骤3" icon="github" />
+  </Steps>
+, mountNode);
 ````

components/steps/demo/simple.md

@@ -9,19 +9,12 @@ title: 基本用法
 import { Steps } from 'antd';
 const Step = Steps.Step;
 
-const steps = [{
+ReactDOM.render(
-  title: '已完成',
+  <Steps current={1}>
-  description: '这里是多信息的描述啊',
+    <Step title="已完成" description="这里是多信息的描述" />
-}, {
+    <Step title="进行中" description="这里是多信息的描述" />
-  title: '进行中',
+    <Step title="待运行" description="这里是多信息的描述" />
-  description: '这里是多信息的耶哦耶哦哦耶哦耶',
+    <Step title="待运行" description="这里是多信息的描述" />
-}, {
+  </Steps>
-  title: '又一个待运行',
+, mountNode);
-  description: '描述啊描述啊',
-}, {
-  title: '待运行',
-  description: '这里是多信息的描述啊',
-}].map((s, i) => <Step key={i} title={s.title} description={s.description} />);
-
-ReactDOM.render(<Steps current={1}>{steps}</Steps>, mountNode);
 ````

components/steps/demo/small-size.md

@@ -9,19 +9,12 @@ title: 迷你版
 import { Steps } from 'antd';
 const Step = Steps.Step;
 
-const steps = [{
+ReactDOM.render(
-  status: 'finish',
+  <Steps size="small" current={1}>
-  title: '已完成',
+    <Step title="已完成" />
-}, {
+    <Step title="进行中" />
-  status: 'process',
+    <Step title="待运行" />
-  title: '进行中',
+    <Step title="待运行" />
-}, {
+  </Steps>
-  status: 'wait',
+, mountNode);
-  title: '待运行',
-}, {
-  status: 'wait',
-  title: '待运行',
-}].map((s, i) => <Step key={i} title={s.title} description={s.description} />);
-
-ReactDOM.render(<Steps size="small" current={1}>{steps}</Steps>, mountNode);
 ````

components/steps/demo/step-next.md

@@ -5,43 +5,33 @@ title: 切换到下一步
 
 随机生成 3~6 个步骤，初始随机进行到其中一个步骤。
 
-````css
-#components-steps-demo-step-next > div > div {
-  margin-bottom: 30px;
-}
-````
-
 ````jsx
 import { Steps, Button } from 'antd';
 const Step = Steps.Step;
 const array = Array.apply(null, Array(Math.floor(Math.random() * 3) + 3));
-const steps = array.map((item, i) => {
+const steps = array.map((item, i) => ({
-  return {
+  title: `步骤${i + 1}`,
-    title: `步骤${i + 1}`,
+}));
-  };
-});
 
 const App = React.createClass({
   getInitialState() {
     return {
-      currentStep: Math.floor(Math.random() * steps.length),
+      current: Math.floor(Math.random() * steps.length),
     };
   },
   next() {
-    let s = this.state.currentStep + 1;
+    let current = this.state.current + 1;
-    if (s === steps.length) {
+    if (current === steps.length) {
-      s = 0;
+      current = 0;
     }
-    this.setState({
+    this.setState({ current });
-      currentStep: s,
-    });
   },
   render() {
-    const cs = this.state.currentStep;
+    const { current } = this.state;
     return (
       <div>
-        <div style={{ marginBottom: 24 }}>当前正在执行第 {cs + 1} 步</div>
+        <div style={{ marginBottom: 24 }}>当前正在执行第 {current + 1} 步</div>
-        <Steps current={cs}>
+        <Steps current={current}>
           {steps.map((s, i) => <Step key={i} title={s.title} description={s.description} />)}
         </Steps>
         <div style={{ marginTop: 24 }}>

components/steps/demo/vertical-small.md

@@ -9,17 +9,12 @@ title: 竖直方向的小型步骤条
 import { Steps } from 'antd';
 const Step = Steps.Step;
 
-const steps = [{
+ReactDOM.render(
-  title: '已完成',
+  <Steps direction="vertical" size="small" current={1}>
-  description: '这里是信息的描述',
+    <Step title="已完成" description="这里是多信息的描述" />
-}, {
+    <Step title="进行中" description="这里是多信息的描述" />
-  title: '进行中',
+    <Step title="待运行" description="这里是多信息的描述" />
-  description: '这里是信息的描述',
+    <Step title="待运行" description="这里是多信息的描述" />
-}, {
+  </Steps>
-  title: '待运行',
+, mountNode);
-  description: '这里是信息的描述',
-}].map((s, i) => <Step key={i} title={s.title} description={s.description} />);
-
-ReactDOM.render(<Steps size="small" direction="vertical" current={1}>{steps}</Steps>,
-  mountNode);
 ````

components/steps/demo/vertical.md

@@ -9,20 +9,12 @@ title: 竖直方向的步骤条
 import { Steps } from 'antd';
 const Step = Steps.Step;
 
-const steps = [{
+ReactDOM.render(
-  title: '已完成',
+  <Steps direction="vertical" current={1}>
-  description: '这里是信息的描述',
+    <Step title="已完成" description="这里是多信息的描述" />
-}, {
+    <Step title="进行中" description="这里是多信息的描述" />
-  title: '进行中',
+    <Step title="待运行" description="这里是多信息的描述" />
-  description: '这里是信息的描述',
+    <Step title="待运行" description="这里是多信息的描述" />
-}, {
+  </Steps>
-  title: '待运行',
+, mountNode);
-  description: '这里是信息的描述',
-}, {
-  title: '又一个待运行',
-  description: '这里是信息的描述',
-}].map((s, i) => <Step key={i} title={s.title} description={s.description} />);
-
-ReactDOM.render(<Steps direction="vertical" current={1}>{steps}</Steps>,
-  mountNode);
 ````

docs/react/introduce.md

@@ -28,8 +28,8 @@ english: Ant Design of React
 ## 特性
 
 - Designed as Ant Design，提炼和服务企业级中后台产品的交互语言和视觉风格。
-- [React Component](http://react-component.github.io/badgeboard/) 上精心封装的高质量 UI 库。
+- [React Component](http://react-component.github.io/badgeboard/) 基础上精心封装的高质量 UI 组件。
-- 基于 npm + webpack + babel 的工作流，支持 ES2015。
+- 基于 npm + webpack + babel 的工作流，支持 ES2015 和 TypeScript。
 
 ## 安装
 

docs/spec/introduce.md

@@ -4,7 +4,7 @@ english: Ant Design
 ---
 
 <div style="text-align:center;background:#FBFBFB;margin:40px 0;">
-  <img align="middle" width="600" src="https://os.alipayobjects.com/rmsportal/mgesTPFxodmIwpi.png">
+  <img width="600" src="https://os.alipayobjects.com/rmsportal/mgesTPFxodmIwpi.png">
 </div>
 
 在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，给设计师和工程师带来很多困扰和重复建设，大大降低了产品的研发效率。我们（蚂蚁金服体验技术部）经过大量的项目实践和总结，沉淀出一个中台设计语言 Ant Design。旨在统一中台项目的前端 UI 设计，屏蔽不必要的设计差异和实现成本，解放设计和前端的研发资源。

docs/spec/transition.md

@@ -77,4 +77,4 @@ english: 巧用过渡
 
 ## 自然运动
 
-参加 [Ant Motion 动画语言](http://motion.ant.design/#/language/)。
+参见 [Ant Motion 动画语言](http://motion.ant.design/#/language/)。

package.json

@@ -1,6 +1,6 @@
 {
   "name": "antd",
-  "version": "1.6.4",
+  "version": "1.6.5",
   "title": "Ant Design",
   "description": "一个 UI 设计语言",
   "homepage": "http://ant.design/",
@@ -101,7 +101,7 @@
     "jsonml-to-react-component": "~0.2.0",
     "jsonml.js": "^0.1.0",
     "jsonp": "^0.2.0",
-    "lesshint": "^1.2.1",
+    "lesshint": "^2.0.0",
     "lodash.debounce": "^4.0.6",
     "nunjucks": "^2.4.2",
     "pre-commit": "1.x",

scripts/lesshint-report.js

@@ -1,5 +1,5 @@
 /* eslint-disable */
-var originReport = require('lesshint/lib/reporters/stylish').report;
+var originReport = require('lesshint/lib/reporters/default').report;
 
 module.exports = {
   report: function (errors) {

site/theme/static/highlight.less

@@ -75,7 +75,7 @@ pre[class*="language-"] {
 
 :not(pre) > code[class*="language-"],
 pre[class*="language-"] {
-  background: #f5f2f0;
+  background: #f7f7f7;
 }
 
 /* Inline code */

site/theme/static/markdown.less

@@ -15,7 +15,7 @@
 
 .markdown h1 {
   color: #404040;
-  font-weight: bold;
+  font-weight: 500;
   line-height: 40px;
   margin-bottom: 24px;
   margin-top: 8px;
@@ -34,6 +34,7 @@
 .markdown h5,
 .markdown h6 {
   color: #404040;
+  font-family: lato,Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Arial,sans-serif;
   margin: 1.6em 0 0.6em 0;
   font-weight: 500;
   clear: both;

site/theme/template/Content/Article.jsx

@@ -14,12 +14,15 @@ export default class Article extends React.Component {
       return;
     }
     const checkImgUrl = 'http://alipay-rmsdeploy-dev-image.oss-cn-hangzhou-zmf.aliyuncs.com/rmsportal/JdVaTbZzPxEldUi.png';
-    utils.ping(checkImgUrl, status => {
+    this.pingTimer = utils.ping(checkImgUrl, status => {
       if (status === 'responded') {
         links.forEach(link => (link.style.display = 'block'));
       }
     });
   }
+  componentWillUnmount() {
+    clearTimeout(this.pingTimer);
+  }
   getArticle(article) {
     const { content } = this.props;
     const { meta } = content;
@@ -45,6 +48,7 @@ export default class Article extends React.Component {
 
     const { meta, description } = content;
     const { title, subtitle, chinese, english } = meta;
+
     return (
       <DocumentTitle title={`${title || chinese || english} - Ant Design`}>
         <article className="markdown">
@@ -62,7 +66,7 @@ export default class Article extends React.Component {
               )
           }
           {
-            !(content.toc && meta.toc) ? null :
+            (!content.toc || content.toc.length <= 1 || meta.toc === false) ? null :
               <section className="toc">{props.utils.toReactComponent(content.toc)}</section>
           }
           {

site/theme/template/Content/MainContent.jsx

@@ -138,10 +138,9 @@ export default class MainContent extends React.Component {
 
     const locale = this.context.intl.locale;
     const moduleData = this.props.moduleData;
-    const localizedPageData = moduleData.filter((page) => {
+    const localizedPageData = moduleData.filter(
-      return page.meta.filename.toLowerCase()
+      page => page.meta.filename.toLowerCase().startsWith(props.location.pathname)
-        .startsWith(props.location.pathname);
+    )[0];
-    })[0];
 
     return (
       <div className="main-wrapper">

site/theme/template/utils.jsx

@@ -17,9 +17,9 @@ export function collectDocs(docs) {
 export function getMenuItems(data) {
   const menuMeta = data.map((item) => item.meta);
   const menuItems = {};
-  menuMeta.sort((a, b) => {
+  menuMeta.sort(
-    return parseInt(a.order, 10) - parseInt(b.order, 10);
+    (a, b) => (a.order || 0) - (b.order || 0)
-  }).forEach((meta) => {
+  ).forEach((meta) => {
     const category = meta.category || 'topLevel';
     if (!menuItems[category]) {
       menuItems[category] = {};
@@ -49,5 +49,5 @@ export function ping(url, callback) {
   img.onload = () => finish('responded');
   img.onerror = () => finish('error');
   img.src = url;
-  setTimeout(() => finish('timeout'), 1500);
+  return setTimeout(() => finish('timeout'), 1500);
 }