Merge remote-tracking branch 'origin/master' into antd-3.0

2024-11-28 21:19:37 +08:00 · 2017-08-15 00:13:40 +08:00 · 2017-08-15 00:13:40 +08:00 · 314c095fbf
commit 314c095fbf
parent cd6b017ce5 57e3be2c32
33 changed files with 129 additions and 53 deletions
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@ -17,6 +17,27 @@ If you want to read change logs before `2.0.0`, please visit [GitHub](https://gi

 ---

+## 2.12.6
+
+`2017-08-11`
+
+- Fix Collapse arrow position in IE9/10/11. [af9dc73](https://github.com/ant-design/ant-design/commit/af9dc73eef2aac3e68fdfc99f9231153437f5068)
+- Fix empty Table scrollBar's position. [#7142](https://github.com/ant-design/ant-design/issues/7142)
+- Fix RangePicker Input's style of height. [47c5de2](https://github.com/ant-design/ant-design/commit/47c5de29f370a77fc19a6a8eda8ac57476f312a6)
+- Card
+  - Improve Card.Grid style of collapse border. [807b573](https://github.com/ant-design/ant-design/commit/807b573bff43bc71115afeb086f565561807a32d)
+  - Fix the `no-animation` type's className. [#7185](https://github.com/ant-design/ant-design/issues/7185)
+- Fix Input Safari text align. [#7135](https://github.com/ant-design/ant-design/issues/7135)
+- Layout
+  - Fix stretched layout by content. [500b222](https://github.com/ant-design/ant-design/commit/500b2225567f03397d9faec5f4e60a8f35fc4d28)
+  - Fix the collapse trigger's position. [f689ede](https://github.com/ant-design/ant-design/commit/f689ede0fa836dd0d99f4e4d96e0c43d0ff19742)
+- Fix Upload doesn't handle some error scenarios which response is not a string. [#6818](https://github.com/ant-design/ant-design/issues/6818)
+- Form
+  - Add `validateFirst` prop of docs. [#6959](https://github.com/ant-design/ant-design/issues/6959)
+  - Fix `wrappedComponentRef`. [#6545](https://github.com/ant-design/ant-design/issues/6545)
+  - Add FormCreateOption's generic type. [#7119](https://github.com/ant-design/ant-design/pull/7119) [@djyde](https://github.com/djyde)
+  - Fix `square` font size to `@form-feedback-icon-size`. [9bcde59](https://github.com/ant-design/ant-design/commit/9bcde590015855a12fdee851cf4e4836d0195cd7)
+
 ## 2.12.5

 `2017-08-07`
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@ -17,6 +17,27 @@ timeline: true

 ---

+## 2.12.6
+
+`2017-08-11`
+
+- 修复了在 IE9/10/11 下 Collapse 的箭头位置不正确的问题。[af9dc73](https://github.com/ant-design/ant-design/commit/af9dc73eef2aac3e68fdfc99f9231153437f5068)
+- 修复了 Table 为空表格时滚动条展示位置不正确的问题。[#7142](https://github.com/ant-design/ant-design/issues/7142)
+- 修复了 RangePicker Input 的高度。[47c5de2](https://github.com/ant-design/ant-design/commit/47c5de29f370a77fc19a6a8eda8ac57476f312a6)
+- Card
+  - 优化了 Card.Grid 边框覆盖的样式。[807b573](https://github.com/ant-design/ant-design/commit/807b573bff43bc71115afeb086f565561807a32d)
+  - 修复了对应 `no-animation` 类型的 className。[#7185](https://github.com/ant-design/ant-design/issues/7185)
+- 修复了 Input Safari 下文本对齐的问题。[#7135](https://github.com/ant-design/ant-design/issues/7135)
+- Layout
+  - 修复了组件的拉伸展示问题。[500b222](https://github.com/ant-design/ant-design/commit/500b2225567f03397d9faec5f4e60a8f35fc4d28)
+  - 修复了折叠箭头的位置。[f689ede](https://github.com/ant-design/ant-design/commit/f689ede0fa836dd0d99f4e4d96e0c43d0ff19742)
+- 修复了 Upload 的 response 不是 string 的情况下没有处理错误提示信息的问题。[#6818](https://github.com/ant-design/ant-design/issues/6818)
+- Form
+  - 补充了文档中缺少的 `validateFirst` 属性描述。[#6959](https://github.com/ant-design/ant-design/issues/6959)
+  - 修复了 `wrappedComponentRef`。[#6545](https://github.com/ant-design/ant-design/issues/6545)
+  - 补充了 FormCreateOption 的 `generic type`。[#7119](https://github.com/ant-design/ant-design/pull/7119) [@djyde](https://github.com/djyde)
+  - 修改了 `square` 的字体大小为 `@form-feedback-icon-size`。[9bcde59](https://github.com/ant-design/ant-design/commit/9bcde590015855a12fdee851cf4e4836d0195cd7)
+
 ## 2.12.5

 `2017-08-07`
--- a/README-zh_CN.md
+++ b/README-zh_CN.md
@ -56,7 +56,7 @@ ReactDOM.render(<DatePicker />, mountNode);
 import 'antd/dist/antd.css';  // or 'antd/dist/antd.less'
 ```

-按需加载可通过此写法 `import DatePicker from 'antd/lib/date-picker'` 或使用插件 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import)。
+按需加载可通过此写法 `import DatePicker from 'antd/lib/date-picker'` 或使用 Babel 插件 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import)，或使用 TypeScript 插件 [ts-import-plugin](https://github.com/Brooooooklyn/ts-import-plugin)。

 ## TypeScript

--- a/README.md
+++ b/README.md
@ -35,7 +35,7 @@ An enterprise-class UI design language and React-based implementation.

 ## Let's build a better antd together [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)

-`antd` is an open source project, improvements are welcomed. If you are interested in contributing to `antd`, you can watch this repository, join in [discussion](https://github.com/ant-design/ant-design/issues?q=is%3Aopen+is%3Aissue+label%3ADiscussion), or try to implement some [features which have been accepted](https://github.com/ant-design/ant-design/issues?q=is%3Aopen+is%3Aissue+label%3A%22PR+welcome%22). Actually, there are [many ways](https://opensource.guide/how-to-contribute/) to contribute. And we are always happy to [offer collaborator permission](https://github.com/ant-design/ant-design/issues/3222) for some active contributors.
+`antd` is an open source project; improvements are welcomed. If you are interested in contributing to `antd`, you can watch this repository, join in [discussion](https://github.com/ant-design/ant-design/issues?q=is%3Aopen+is%3Aissue+label%3ADiscussion), or try to implement some [features which have been accepted](https://github.com/ant-design/ant-design/issues?q=is%3Aopen+is%3Aissue+label%3A%22PR+welcome%22). Actually, there are [many ways](https://opensource.guide/how-to-contribute/) to contribute. And we are always happy to [offer collaborator permission](https://github.com/ant-design/ant-design/issues/3222) for some active contributors.

 ## Install

@ -101,6 +101,19 @@ import 'antd/dist/antd.css';  // or 'antd/dist/antd.less'
 > - set `allowSyntheticDefaultImports` to prevent `error TS1192: Module 'react' has no default export`.
 > - Don't use @types/antd, antd provide a built-in ts definition already.

+#### Use [ts-import-plugin](https://github.com/Brooooooklyn/ts-import-plugin) with modularized antd
+
+  ```js
+  {
+    loader: "ts-loader", // or awesome-typescript-loader
+    options {
+      getCustomTransformers: () => ({
+        before: [ tsImportPluginFactory({ libraryName: "antd", style: "css" }) ]
+      })
+    }
+  }
+  ```
+
 ## Internationalization

 See [i18n](http://ant.design/docs/react/i18n).
@ -135,4 +148,4 @@ Open your browser and visit http://127.0.0.1:8001 , see more at https://github.c

 ## Contributing

-We welcome all contributions, please read our [CONTRIBUTING.md](https://github.com/ant-design/ant-design/blob/master/.github/CONTRIBUTING.md) first. You can submit any ideas as [pull requests](https://github.com/ant-design/ant-design/pulls) or as [GitHub issues](https://github.com/ant-design/ant-design/issues). If you'd like to improve code, check out the [Development Instructions](https://github.com/ant-design/ant-design/wiki/Development) and have a good time! :)
+We welcome all contributions. Please read our [CONTRIBUTING.md](https://github.com/ant-design/ant-design/blob/master/.github/CONTRIBUTING.md) first. You can submit any ideas as [pull requests](https://github.com/ant-design/ant-design/pulls) or as [GitHub issues](https://github.com/ant-design/ant-design/issues). If you'd like to improve code, check out the [Development Instructions](https://github.com/ant-design/ant-design/wiki/Development) and have a good time! :)
--- a/components/button/button.tsx
+++ b/components/button/button.tsx
@ -122,13 +122,6 @@ export default class Button extends React.Component<ButtonProps, any> {
    }
  }

-  // Handle auto focus when click button in Chrome
-  handleMouseUp = (e: React.MouseEvent<HTMLButtonElement>) => {
-    if (this.props.onMouseUp) {
-      this.props.onMouseUp(e);
-    }
-  }
-
  render() {
    const {
      type, shape, size = '', className, htmlType, children, icon, prefixCls, ghost, ...others,
@ -169,7 +162,6 @@ export default class Button extends React.Component<ButtonProps, any> {
        {...omit(others, ['loading', 'clicked'])}
        type={htmlType || 'button'}
        className={classes}
-        onMouseUp={this.handleMouseUp}
        onClick={this.handleClick}
      >
        {iconNode}{kids}
--- a/components/card/index.tsx
+++ b/components/card/index.tsx
@ -33,7 +33,7 @@ export interface CardProps {
  onTabChange?: (key: string) => void;
 }

-export default class Card extends Component<CardProps> {
+export default class Card extends Component<CardProps, {}> {
  static Grid: typeof Grid = Grid;
  static Meta: typeof Meta = Meta;
  container: HTMLDivElement;
--- a/components/carousel/tests/index.test.js
+++ b/components/carousel/tests/index.test.js
@ -0,0 +1,13 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import Carousel from '..';
+
+describe('Carousel', () => {
+  it('should has innerSlider', () => {
+    const wrapper = mount(<Carousel><div /></Carousel>);
+    const innerSlider = wrapper.node.innerSlider;
+    const innerSliderFromRefs = wrapper.node.refs.slick.innerSlider;
+    expect(innerSlider).toBe(innerSliderFromRefs);
+    expect(typeof innerSlider.slickNext).toBe('function');
+  });
+});
--- a/components/carousel/index.tsx
+++ b/components/carousel/index.tsx
@ -75,6 +75,8 @@ export default class Carousel extends React.Component<CarouselProps, any> {
    slick: any,
  };

+  innerSlider: any;
+
  constructor() {
    super();
    this.onWindowResized = debounce(this.onWindowResized, 500, {
@ -87,6 +89,9 @@ export default class Carousel extends React.Component<CarouselProps, any> {
    if (autoplay) {
      window.addEventListener('resize', this.onWindowResized);
    }
+    const { slick } = this.refs;
+    // https://github.com/ant-design/ant-design/issues/7191
+    this.innerSlider = slick && slick.innerSlider;
  }

  componentWillUnmount() {
--- a/components/cascader/index.en-US.md
+++ b/components/cascader/index.en-US.md
@ -25,6 +25,7 @@ Cascade selection box.
 | defaultValue | initial selected value | [CascaderOptionType](https://git.io/vMMoK)[]  |[] |
 | value | selected value | [CascaderOptionType](https://git.io/vMMoK)[] | - |
 | onChange | callback when finishing cascader select | `(value, selectedOptions) => void` | - |
+| onPopupVisibleChange | callback when popup shown or hidden | `(value) => void` | - |
 | displayRender | render function of displaying selected options | `(label, selectedOptions) => ReactNode` | `label => label.join(' / ')` |
 | style | additional style | string | - |
 | className | additional css class | string | - |
--- a/components/cascader/index.zh-CN.md
+++ b/components/cascader/index.zh-CN.md
@ -26,6 +26,7 @@ subtitle: 级联选择
 | defaultValue | 默认的选中项 | [CascaderOptionType](https://git.io/vMMoK)[]  |[] |
 | value | 指定选中项 | [CascaderOptionType](https://git.io/vMMoK)[] | - |
 | onChange | 选择完成后的回调 | `(value, selectedOptions) => void` | - |
+| onPopupVisibleChange | 显示/隐藏浮层的回调 | `(value) => void` | - |
 | displayRender | 选择后展示的渲染函数 | `(label, selectedOptions) => ReactNode` | `label => label.join(' / ')` |
 | style | 自定义样式 | string | - |
 | className | 自定义类名 | string | - |
--- a/components/collapse/style/index.less
+++ b/components/collapse/style/index.less
@ -49,10 +49,6 @@
        transition: transform 0.24s;
        top: 0;
        left: 16px;
-        /* stylelint-disable declaration-block-no-duplicate-properties */
-        top: ~"16px \9";
-        left: ~"0 \9";
-        /* stylelint-enable declaration-block-no-duplicate-properties */
        &:before {
          content: "\E61F";
        }
--- a/components/grid/index.en-US.md
+++ b/components/grid/index.en-US.md
@ -110,4 +110,4 @@ Ant Design layout component if it can not meet your needs, you can use the excel
 | lg       | `≥1200px`, could be a `span` value or a object contain above props | number\|object | - |
 | xl       | `≥1600px`, could be a `span` value or a object contain above props | number\|object | - |

-The breakpoints of responsive grid follow [BootStrap 3 media queries rules](http://getbootstrap.com/css/#grid-media-queries)(not contain `occasionally part`).
+The breakpoints of responsive grid follow [BootStrap 3 media queries rules](https://getbootstrap.com/docs/3.3/css/#responsive-utilities-classes)(not contain `occasionally part`).
--- a/components/grid/index.zh-CN.md
+++ b/components/grid/index.zh-CN.md
@ -109,4 +109,4 @@ Ant Design 的布局组件若不能满足你的需求，你也可以直接使用
 | lg       | `≥1200px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - |
 | xl       | `≥1600px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - |

-响应式栅格的断点遵循了 [BootStrap 3 的规则](http://getbootstrap.com/css/#grid-media-queries)（不包含链接里 `occasionally` 的部分)。
+响应式栅格的断点遵循了 [BootStrap 3 的规则](https://getbootstrap.com/docs/3.3/css/#responsive-utilities-classes)（不包含链接里 `occasionally` 的部分)。
--- a/components/layout/Sider.tsx
+++ b/components/layout/Sider.tsx
@ -161,7 +161,7 @@ export default class Sider extends React.Component<SiderProps, any> {
    const triggerDom = (
      trigger !== null ?
      zeroWidthTrigger || (
-        <div className={`${prefixCls}-trigger`} onClick={this.toggle}>
+        <div className={`${prefixCls}-trigger`} onClick={this.toggle} style={{ width: siderWidth }}>
          {trigger || defaultTrigger}
        </div>
      ) : null
--- a/components/layout/tests/snapshots/demo.test.js.snap
+++ b/components/layout/tests/snapshots/demo.test.js.snap
@ -785,6 +785,7 @@ exports[`renders ./components/layout/demo/side.md correctly 1`] = `
    </div>
    <div
      class="ant-layout-sider-trigger"
+      style="width:200px;"
    >
      <i
        class="anticon anticon-left"
--- a/components/layout/demo/side.md
+++ b/components/layout/demo/side.md
@ -1,5 +1,6 @@
 ---
 order: 3
+iframe: 360
 title:
  zh-CN: 侧边布局
  en-US: Sider
@ -65,7 +66,7 @@ class SiderDemo extends React.Component {
              <Menu.Item key="6">Team 1</Menu.Item>
              <Menu.Item key="8">Team 2</Menu.Item>
            </SubMenu>
-            <Menu.Item key="8">
+            <Menu.Item key="9">
              <Icon type="file" />
              <span>File</span>
            </Menu.Item>
--- a/components/layout/style/index.less
+++ b/components/layout/style/index.less
@ -56,15 +56,15 @@
    }

    &-trigger {
-      position: absolute;
+      position: fixed;
      text-align: center;
-      width: 100%;
      bottom: 0;
      cursor: pointer;
      height: @layout-trigger-height;
      line-height: @layout-trigger-height;
-      background: @layout-trigger-background;
      color: @layout-trigger-color;
+      background: fade(@layout-trigger-background, 100);
+      z-index: 1;
    }

    &-zero-width {
--- a/components/select/tests/snapshots/demo.test.js.snap
+++ b/components/select/tests/snapshots/demo.test.js.snap
@ -848,6 +848,13 @@ exports[`renders ./components/select/demo/tags.md correctly 1`] = `
    <div
      class="ant-select-selection__rendered"
    >
+      <div
+        class="ant-select-selection__placeholder"
+        style="display:block;user-select:none;-webkit-user-select:none;"
+        unselectable="unselectable"
+      >
+        标签模式
+      </div>
      <ul>
        <li
          class="ant-select-search ant-select-search--inline"
--- a/components/select/demo/tags.md
+++ b/components/select/demo/tags.md
@ -30,7 +30,7 @@ ReactDOM.render(
  <Select
    mode="tags"
    style={{ width: '100%' }}
-    searchPlaceholder="标签模式"
+    placeholder="标签模式"
    onChange={handleChange}
  >
    {children}
--- a/components/select/index.zh-CN.md
+++ b/components/select/index.zh-CN.md
@ -53,6 +53,8 @@ title: Select
 | labelInValue | 是否把每个选项的 label 包装到 value 中，会把 Select 的 value 类型从 `string` 变为 `{key: string, label: ReactNode}` 的格式 | boolean | false |
 | tokenSeparators | 在 tags 和 multiple 模式下自动分词的分隔符 | string[] |  |

+> 注意，如果发现下拉菜单跟随页面滚动，或者需要在其他弹层中触发 Select，请尝试使用 `getPopupContainer={triggerNode => triggerNode.parentNode}` 将下拉弹层渲染节点固定在触发器的父元素中。
+
 ### Option props

 | 参数     | 说明           | 类型     | 默认值       |
--- a/components/table/index.en-US.md
+++ b/components/table/index.en-US.md
@ -87,7 +87,7 @@ One of Property `columns` for describing column, Column has the same API.
 | title      | title of this column        | string\|ReactNode | - |
 | key        | key of this column, you can ignore this prop if you've set a unique `dataIndex` | string          | - |
 | dataIndex  | display field of the data record, could be set like `a.b.c` | string | - |
-| render     | renderer of table cell, has three params: text, record and index of this row. The render value should be a ReactNode, or a object for [colSpan/rowSpan config](#demo-colspan-rowspan) | Function(text, record, index) {} | - |
+| render     | renderer of table cell, has three params: text, record and index of this row. The render value should be a ReactNode, or a object for [colSpan/rowSpan config](#components-table-demo-colspan-rowspan) | Function(text, record, index) {} | - |
 | filters    | filter menu config        | object[]       | - |
 | onFilter   | callback that is called when when click confirm filter button | Function | - |
 | filterMultiple | whether to select multiple filtered item | boolean    | true    |
--- a/components/table/index.zh-CN.md
+++ b/components/table/index.zh-CN.md
@ -87,7 +87,7 @@ const columns = [{
 | title      | 列头显示文字               | string\|ReactNode | - |
 | key        | React 需要的 key，如果已经设置了唯一的 `dataIndex`，可以忽略这个属性 | string          | - |
 | dataIndex  | 列数据在数据项中对应的 key，支持 `a.b.c` 的嵌套写法 | string | - |
-| render     | 生成复杂数据的渲染函数，参数分别为当前行的值，当前行数据，行索引，@return里面可以设置表格[行/列合并](#demo-colspan-rowspan) | Function(text, record, index) {} | - |
+| render     | 生成复杂数据的渲染函数，参数分别为当前行的值，当前行数据，行索引，@return里面可以设置表格[行/列合并](#components-table-demo-colspan-rowspan) | Function(text, record, index) {} | - |
 | filters    | 表头的筛选菜单项           | object[]           | - |
 | onFilter   | 本地模式下，确定筛选的运行函数 | Function    | - |
 | filterMultiple | 是否多选 | boolean    | true    |
--- a/components/tabs/tests/snapshots/demo.test.js.snap
+++ b/components/tabs/tests/snapshots/demo.test.js.snap
@ -96,7 +96,7 @@ exports[`renders ./components/tabs/demo/basic.md correctly 1`] = `

 exports[`renders ./components/tabs/demo/card.md correctly 1`] = `
 <div
-  class="ant-tabs ant-tabs-top ant-tabs-card"
+  class="ant-tabs ant-tabs-top ant-tabs-card ant-tabs-no-animation"
 >
  <div
    class="ant-tabs-bar"
@ -192,7 +192,7 @@ exports[`renders ./components/tabs/demo/card-top.md correctly 1`] = `
  class="card-container"
 >
  <div
-    class="ant-tabs ant-tabs-top ant-tabs-card"
+    class="ant-tabs ant-tabs-top ant-tabs-card ant-tabs-no-animation"
  >
    <div
      class="ant-tabs-bar"
@ -307,7 +307,7 @@ exports[`renders ./components/tabs/demo/custom-add-trigger.md correctly 1`] = `
    </button>
  </div>
  <div
-    class="ant-tabs ant-tabs-top ant-tabs-card ant-tabs-editable-card"
+    class="ant-tabs ant-tabs-top ant-tabs-card ant-tabs-editable-card ant-tabs-no-animation"
  >
    <div
      class="ant-tabs-bar"
@ -492,7 +492,7 @@ exports[`renders ./components/tabs/demo/disabled.md correctly 1`] = `

 exports[`renders ./components/tabs/demo/editable-card.md correctly 1`] = `
 <div
-  class="ant-tabs ant-tabs-top ant-tabs-card ant-tabs-editable-card"
+  class="ant-tabs ant-tabs-top ant-tabs-card ant-tabs-editable-card ant-tabs-no-animation"
 >
  <div
    class="ant-tabs-bar"
--- a/components/tabs/index.en-US.md
+++ b/components/tabs/index.en-US.md
@ -34,7 +34,7 @@ Ant Design has 3 types Tabs for different situation.
 | tabPosition  | Position of tabs. Options: top, right, bottom & left | string | top |
 | onEdit       | Callback when tab is added or removed, which is executing when set type as editable-card | (targetKey, action): void | - |
 | hideAdd      | Hide plus icon or not, which is effective when set type as editable-card | boolean | false |
-| animated | Whether to change tabs with animation, this property only works with `tabPosition=top|bottom` | boolean \| {inkBar:boolean, tabPane:boolean} | true |
+| animated | Whether to change tabs with animation, this property only works with `tabPosition=top|bottom` | boolean \| {inkBar:boolean, tabPane:boolean} | true, false when type="card" |

 ### Tabs.TabPane
 | Property     | Description           | Type     | Default      |
--- a/components/tabs/index.tsx
+++ b/components/tabs/index.tsx
@ -120,7 +120,7 @@ export default class Tabs extends React.Component<TabsProps, any> {
      [`${prefixCls}-vertical`]: tabPosition === 'left' || tabPosition === 'right',
      [`${prefixCls}-card`]: type.indexOf('card') >= 0,
      [`${prefixCls}-${type}`]: true,
-      [`${prefixCls}-no-animation`]: !animated,
+      [`${prefixCls}-no-animation`]: !tabPaneAnimated,
    });
    // only card type tabs can be added and closed
    let childrenWithClose;
--- a/components/tabs/index.zh-CN.md
+++ b/components/tabs/index.zh-CN.md
@ -37,7 +37,7 @@ Ant Design 依次提供了三级选项卡，分别用于不同的场景。
 | tabPosition | 页签位置，可选值有 `top` `right` `bottom` `left`  | string   | 'top'      |
 | onEdit | 新增和删除页签的回调，在 `type="editable-card"` 时有效 | (targetKey, action): void | 无 |
 | hideAdd | 是否隐藏加号图标，在 `type="editable-card"` 时有效 | boolean   | false    |
-| animated | 是否使用动画切换 Tabs，在 `tabPosition=top|bottom` 时有效 | boolean \| {inkBar:boolean, tabPane:boolean} | true |
+| animated | 是否使用动画切换 Tabs，在 `tabPosition=top|bottom` 时有效 | boolean \| {inkBar:boolean, tabPane:boolean} | true, 当 type="card" 时为 false |

 ### Tabs.TabPane

--- a/components/tag/CheckableTag.tsx
+++ b/components/tag/CheckableTag.tsx
@ -5,7 +5,7 @@ export interface CheckableTagProps {
  prefixCls?: string;
  className?: string;
  checked: boolean;
-  onChange?: (checked: Boolean) => void;
+  onChange?: (checked: boolean) => void;
 }

 export default class CheckableTag extends React.Component<CheckableTagProps> {
--- a/components/upload/UploadList.tsx
+++ b/components/upload/UploadList.tsx
@ -4,10 +4,10 @@ import Icon from '../icon';
 import Tooltip from '../tooltip';
 import Progress from '../progress';
 import classNames from 'classnames';
-import { UploadListProps } from './interface';
+import { UploadListProps, UploadFile } from './interface';

 // https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL
-const previewFile = (file, callback) => {
+const previewFile = (file: File, callback: Function) => {
  const reader = new FileReader();
  reader.onloadend = () => callback(reader.result);
  reader.readAsDataURL(file);
@ -25,14 +25,14 @@ export default class UploadList extends React.Component<UploadListProps, any> {
    showPreviewIcon: true,
  };

-  handleClose = (file) => {
+  handleClose = (file: UploadFile) => {
    const onRemove = this.props.onRemove;
    if (onRemove) {
      onRemove(file);
    }
  }

-  handlePreview = (file, e) => {
+  handlePreview = (file: UploadFile, e) => {
    const { onPreview } = this.props;
    if (!onPreview) {
      return;
--- a/components/upload/index.en-US.md
+++ b/components/upload/index.en-US.md
@ -32,7 +32,7 @@ Uploading is the process of publishing information (web pages, text, pictures, v
 | beforeUpload | Hook function which will be executed before uploading. Uploading will be stopped with `false` or a rejected Promise returned. **Warning：this function is not supported by old IE**。 | (file, fileList) => `boolean | Promise`    | -    |
 | customRequest | override for the default xhr behavior allowing for additional customization and ability to implement your own XMLHttpRequest | Function | - |
 | onChange   | A callback function, can be executed when uploading state is changing. See [onChange](#onChange)                | Function    | -   |
-| listType   | Built-in stylesheets, support for two types: `text` or `picture`     | string      | 'text'|
+| listType   | Built-in stylesheets, support for three types: `text`, `picture` or `picture-card`     | string      | 'text'|
 | onPreview  | A callback function, will be executed when file link or preview icon is clicked.  | Function(file) | -  |
 | onRemove   | A callback function, will be executed when removing file button is clicked, remove event will be prevented when return value is `false` or a Promise which resolve(false) or reject. | Function(file): `boolean | Promise` | -   |
 | supportServerRender | Need to be turned on while the server side is rendering.| boolean | false    |
--- a/components/upload/index.zh-CN.md
+++ b/components/upload/index.zh-CN.md
@ -32,8 +32,8 @@ title: Upload
 | accept     | 接受上传的文件类型, 详见 [input accept Attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept)    | string      | 无    |
 | beforeUpload | 上传文件之前的钩子，参数为上传的文件，若返回 `false` 则停止上传。支持返回一个 Promise 对象，Promise 对象 reject 时则停止上传，resolve 时开始上传。**注意：该方法不支持老 IE**。 | (file, fileList) => `boolean | Promise`    | 无    |
 | customRequest | 通过覆盖默认的上传行为，可以自定义自己的上传实现 | Function | 无 |
-| onChange   | 上传文件改变时的状态，详见 onChange                | Function    | 无    |
-| listType   | 上传列表的内建样式，支持两种基本样式 `text` or `picture`     | string      | 'text'|
+| onChange   | 上传文件改变时的状态，详见 [onChange](#onChange)                | Function    | 无    |
+| listType   | 上传列表的内建样式，支持三种基本样式 `text`, `picture` 和 `picture-card`     | string      | 'text'|
 | onPreview  | 点击文件链接或预览图标时的回调                              | Function(file) | 无    |
 | onRemove   | 点击移除文件时的回调，返回值为 false 时不移除。支持返回一个 Promise 对象，Promise 对象 resolve(false) 或 reject 时不移除。                | Function(file): `boolean | Promise` | 无   |
 | supportServerRender | 服务端渲染时需要打开这个                           | boolean | false    |
--- a/components/upload/interface.tsx
+++ b/components/upload/interface.tsx
@ -6,7 +6,7 @@ export interface HttpRequestHeader {
  [key: string]: string;
 }

-export interface File {
+export interface UploadFile {
  uid: number;
  size: number;
  name: string;
@ -21,8 +21,8 @@ export interface File {
 }

 export interface UploadChangeParam {
-  file: File;
-  fileList: Array<File>;
+  file: UploadFile;
+  fileList: Array<UploadFile>;
  event?: { percent: number };
 }

@ -41,20 +41,20 @@ export interface UploadLocale {
 export interface UploadProps {
  type?: 'drag' | 'select';
  name?: string;
-  defaultFileList?: Array<File>;
-  fileList?: Array<File>;
+  defaultFileList?: Array<UploadFile>;
+  fileList?: Array<UploadFile>;
  action?: string;
-  data?: Object | ((file: File) => any);
+  data?: Object | ((file: UploadFile) => any);
  headers?: HttpRequestHeader;
  showUploadList?: boolean | ShowUploadListInterface;
  multiple?: boolean;
  accept?: string;
-  beforeUpload?: (file: File, FileList: File[]) => boolean | PromiseLike<any>;
+  beforeUpload?: (file: UploadFile, FileList: UploadFile[]) => boolean | PromiseLike<any>;
  onChange?: (info: UploadChangeParam) => void;
  listType?: 'text' | 'picture' | 'picture-card';
  className?: string;
-  onPreview?: (file: File) => void;
-  onRemove?: (file: File) => void | boolean;
+  onPreview?: (file: UploadFile) => void;
+  onRemove?: (file: UploadFile) => void | boolean;
  supportServerRender?: boolean;
  style?: React.CSSProperties;
  disabled?: boolean;
@ -66,9 +66,9 @@ export interface UploadProps {

 export interface UploadListProps {
  listType?: 'text' | 'picture' | 'picture-card';
-  onPreview?: (file: File) => void;
-  onRemove?: (file: File) => void | boolean;
-  items?: Array<File>;
+  onPreview?: (file: UploadFile) => void;
+  onRemove?: (file: UploadFile) => void | boolean;
+  items?: Array<UploadFile>;
  progressAttr?: Object;
  prefixCls?: string;
  showRemoveIcon?: boolean;
--- a/docs/react/use-with-create-react-app.en-US.md
+++ b/docs/react/use-with-create-react-app.en-US.md
@ -246,5 +246,6 @@ Finally, we used antd with create-react-app successfully, you can learn these pr
 There are a lot of great boilerplates like create-react-app in React community. There are some source code samples of importing antd in them if you encounter some problems.

 - [create-react-app-antd](https://github.com/ant-design/create-react-app-antd)
+- [comerc/cra-ts-antd](https://github.com/comerc/cra-ts-antd)
 - [react-boilerplate/react-boilerplate](https://github.com/ant-design/react-boilerplate)
 - [kriasoft/react-starter-kit](https://github.com/ant-design/react-starter-kit)
--- a/site/theme/template/Layout/Header.jsx
+++ b/site/theme/template/Layout/Header.jsx
@ -152,6 +152,7 @@ export default class Header extends React.Component {
        dropdownMatchSelectWidth={false}
        defaultValue={antdVersion}
        onChange={this.handleVersionChange}
+        getPopupContainer={trigger => trigger.parentNode}
      >
        {versionOptions}
      </Select>,