changelog for 2.2.1

Fix controlled DatePicker[showTime] not working, close #3665
fix: should check undefined value, close: #3665
2026-02-15 05:49:19 +08:00 · 2016-11-02 13:38:37 +08:00 · 2016-11-02 13:34:52 +08:00 · 2016-11-02 13:34:42 +08:00
1078 changed files with 15542 additions and 86198 deletions
--- a/.babelrc
+++ b/.babelrc
@@ -1,10 +1,3 @@
 {
-  "env": {
-    "test": {
-      "presets": ["es2015", "react", "stage-0"],
-      "plugins": [
-        "add-module-exports"
-      ]
-    }
-  }
+  "presets": ["es2015", "react", "stage-0"]
 }
--- a/.codecov.yml
+++ b/.codecov.yml
@@ -1,2 +0,0 @@
-codecov:
-  branch: master
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,6 +0,0 @@
-components/**/*.js
-components/**/*.jsx
-components/*/__tests__/type.tsx
-!.eslintrc.js
-!components/*/__tests__/**/*.js
-!components/*/demo/*
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -3,7 +3,7 @@ const eslintrc = {
  env: {
    browser: true,
    node: true,
-    jasmine: true,
+    mocha: true,
    jest: true,
    es6: true,
  },
@@ -27,7 +27,6 @@ const eslintrc = {
    'react/prop-types': 0,
    'react/jsx-first-prop-new-line': 0,
    'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx', '.md'] }],
-    'import/extensions': 0,
    'import/no-unresolved': 0,
    'import/no-extraneous-dependencies': 0,
    'no-param-reassign': 0,
@@ -36,10 +35,10 @@ const eslintrc = {
    'consistent-return': 0,
    'no-redeclare': 0,
    'react/require-extension': 0,
+    'react/jsx-indent': 0,
    'jsx-a11y/no-static-element-interactions': 0,
    'jsx-a11y/anchor-has-content': 0,
    'react/no-danger': 0,
-    'comma-dangle': ['error', 'always-multiline'],
  },
 };

@@ -56,6 +55,7 @@ if (process.env.RUN_ENV === 'DEMO') {
    'eol-last': 0,
    'prefer-rest-params': 0,
    'react/no-multi-comp': 0,
+    'react/prefer-es6-class': 0,
    'jsx-a11y/href-no-hash': 0,
    'import/newline-after-import': 0,
  });
--- a/.github/CONTRIBUTING.md
+++ b/.github/CONTRIBUTING.md
@@ -19,7 +19,7 @@ Tips: choose the corresponding documentation with versions selector which in the

 ### 2. Make sure that your question is about Ant Design, not React

-Someone may think all of the questions that he/she meets in developing are about Ant Design, but it's not true. So, please read [React's documentation](http://facebook.github.io/react/docs/getting-started.html) or just Google (not Baidu, seriously) your questions with keyword *React* first. If you are sure that your question is about Ant Design, go ahead.
+Someone may think all of the questions that he/she meets in developing are about Ant Design, but it's not true. So, please read [React's documentaion](http://facebook.github.io/react/docs/getting-started.html) or just Google(not Baidu, seriously) your questions with keywork *React* first. If you are sure that your question is about Ant Design, go ahead.

 ### 3. Read the FAQ and search the issues list of Ant Design

@@ -48,11 +48,9 @@ If you believe that Ant Design should provide some features, but it does not. Yo

 ## Tips about Pull Request

-**Working on your first Pull Request?** You can learn how from this *free* series [How to Contribute to an Open Source Project on GitHub](https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github)
-
 It's welcomed to pull request. And there are some tips about that:

-1. It is a good habit to create a feature request issue to discuss whether the feature is necessary before you implement it. However, it's unnecessary to create an issue to claim that you found a typo or improved the readability of documentation, just create a pull request.
+1. It is a good habit to create a feature request issue to disscuss whether the feature is necessary before you implement it. However, it's unnecessary to create an issue to claim that you found a typo or improved the readability of documentaion, just create a pull request.
 1. Run `npm run lint` and fix those errors before committing in order to keep consistent code style.
 1. Rebase before creating a PR to keep commit history clear.
 1. Add some descriptions and refer relative issues for you PR.
--- a/.github/ISSUE_TEMPLATE.md
+++ b/.github/ISSUE_TEMPLATE.md
@@ -1,15 +1,35 @@
-<!--
-IMPORTANT: Please use the following link to create a new issue:
-
-  http://new-issue.ant.design
-
-If your issue was not created using the app above, it will be closed immediately.
-->
+<!-- Issue Template -->

 <!--
-注意：请使用下面的链接来新建 issue：
+antd 的用法咨询，建议通过以下渠道，官方 issues 目前没有足够精力提供此类咨询服务：

-  http://new-issue.ant.design
+1. [Stack Overflow](http://stackoverflow.com/questions/tagged/antd)
+2. [Segment Fault](https://segmentfault.com/t/antd)（中文）
+3. [Gitter](https://gitter.im/ant-design/ant-design)

-不是用上面的链接创建的 issue 会被立即关闭。
+如果是报告 bug，请按照下列格式书写，并务必提供复现步骤，否则恕难解决，感谢您的支持。
 -->
+
+#### 发生问题的环境是：
+
+<!-- 务必提供 -->
+
+- antd 版本:
+- 操作系统及其版本:
+- 浏览器及其版本:
+
+#### 您做了什么？请提供尽可能详细的重现步骤。
+
+<!-- 如：引入 antd 了 Button -->
+
+#### 您期待的结果是:
+
+<!-- 如：像官网一样正常显示 -->
+
+#### 实际上的结果是:
+
+<!-- 如：样式错位了，最好提供截图 -->
+
+#### 可重现的在线演示
+
+<!-- 请修改并 Fork http://codepen.io/benjycui/pen/KgPZrE?editors=001 -->
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -1,22 +1,8 @@
-First of all, thank you for your contribution! :-)
+First of all, thanks for your contribution! :-)

-Please makes sure that these checkboxes are checked before submitting your PR, thank you!
+Please makes sure these boxes are checked before submitting your PR, thank you!

-* [ ] Make sure that you propose PR to right branch: bugfix for `master`, feature for latest active branch `feature-x.x`.
-* [ ] Make sure that you follow antd's [code convention](https://github.com/ant-design/ant-design/wiki/Code-convention-for-antd).
+* [ ] Make sure you follow antd's [code convention](https://github.com/ant-design/ant-design/wiki/Code-convention-for-antd).
 * [ ] Run `npm run lint` and fix those errors before submitting in order to keep consistent code style.
 * [ ] Rebase before creating a PR to keep commit history clear.
 * [ ] Add some descriptions and refer relative issues for you PR.
-
-Extra checklist:
-
-**if** *isBugFix* **:**
-
-  * [ ] Make sure that you add at least one unit test for the bug which you had fixed.
-
-**elif** *isNewFeature* **:**
-
-  * [ ] Update API docs for the component.
-  * [ ] Update/Add demo to demonstrate new feature.
-  * [ ] Update TypeScript definition for the component.
-  * [ ] Add unit tests for the feature.
--- a/.gitignore
+++ b/.gitignore
@@ -15,7 +15,6 @@ Thumbs.db
 *.swp
 *.swo
 *.log
-*.log.*
 *.json.gzip
 node_modules/
 .buildpath
@@ -26,14 +25,8 @@ _site
 _data
 dist
 /lib
-/es
 elasticsearch-*
 config/base.yaml
-/.vscode/
-/coverage
-yarn.lock
 components/**/*.js
 components/**/*.jsx
-!components/**/__tests__/*.js
-!components/**/__tests__/*.js.snap
-/.history
+/.vscode/
--- a/.jest.js
+++ b/.jest.js
@@ -1,45 +0,0 @@
-const libDir = process.env.LIB_DIR;
-
-const transformIgnorePatterns = [
-  '/dist/',
-  'node_modules\/[^/]+?\/(?!(es|node_modules)\/)', // Ignore modules without es dir
-];
-
-module.exports = {
-  setupFiles: [
-    './tests/setup.js',
-  ],
-  moduleFileExtensions: [
-    'ts',
-    'tsx',
-    'js',
-    'jsx',
-    'json',
-    'md',
-  ],
-  modulePathIgnorePatterns: [
-    '/_site/',
-  ],
-  testPathIgnorePatterns: [
-    '/node_modules/',
-    'dekko',
-    'node',
-  ],
-  transform: {
-    '\\.tsx?$': './node_modules/antd-tools/lib/jest/codePreprocessor',
-    '\\.js$': './node_modules/antd-tools/lib/jest/codePreprocessor',
-    '\\.md$': './node_modules/antd-tools/lib/jest/demoPreprocessor',
-  },
-  testRegex: libDir === 'dist' ? 'demo\\.test\\.js$' : '.*\\.test\\.js$',
-  collectCoverageFrom: [
-    'components/**/*.{ts,tsx}',
-    '!components/*/style/index.tsx',
-    '!components/style/index.tsx',
-    '!components/*/locale/index.tsx',
-    '!components/*/__tests__/**/type.tsx',
-  ],
-  transformIgnorePatterns,
-  snapshotSerializers: [
-    'enzyme-to-json/serializer',
-  ],
-};
--- a/.jest.node.js
+++ b/.jest.node.js
@@ -1,21 +0,0 @@
-module.exports = {
-  setupFiles: [
-    './tests/setup.js',
-  ],
-  moduleFileExtensions: [
-    'ts',
-    'tsx',
-    'js',
-    'md',
-  ],
-  transform: {
-    '\\.tsx?$': './node_modules/antd-tools/lib/jest/codePreprocessor',
-    '\\.js$': './node_modules/antd-tools/lib/jest/codePreprocessor',
-    '\\.md$': './node_modules/antd-tools/lib/jest/demoPreprocessor',
-  },
-  testRegex: 'demo\\.test\\.js$',
-  testEnvironment: 'node',
-  snapshotSerializers: [
-    'enzyme-to-json/serializer'
-  ],
-};
--- a/.lesshintrc
+++ b/.lesshintrc
@@ -0,0 +1,21 @@
+{
+  "propertyOrdering": false,
+  "hexLength": "short",
+  "stringQuotes": false,
+  "decimalZero": false,
+  "importantRule": false,
+  "zeroUnit": "no_unit",
+  "qualifyingElement": false,
+  "duplicateProperty": false,
+  "importPath": false,
+  "finalNewline": false,
+  "newlineAfterBlock": false,
+  "maxCharPerLine": false,
+  "excludedFiles": [
+    "components/layout/style/mixin.less",
+    "components/style/core/base.less",
+    "components/style/core/iconfont.less",
+    "components/style/core/normalize.less",
+    "components/style/mixins/compatibility.less"
+  ]
+}
--- a/.stylelintrc
+++ b/.stylelintrc
@@ -1,21 +0,0 @@
-{
-  "extends": "stylelint-config-standard",
-  "rules": {
-    "comment-empty-line-before": null,
-    "declaration-empty-line-before": null,
-    "function-comma-newline-after": null,
-    "function-name-case": null,
-    "function-parentheses-newline-inside": null,
-    "function-max-empty-lines": null,
-    "function-whitespace-after": null,
-    "indentation": null,
-    "number-leading-zero": null,
-    "number-no-trailing-zeros": null,
-    "rule-empty-line-before": null,
-    "selector-combinator-space-after": null,
-    "selector-list-comma-newline-after": null,
-    "selector-pseudo-element-colon-notation": null,
-    "unit-no-unknown": null,
-    "value-list-max-empty-lines": null
-  }
-}
--- a/.travis.yml
+++ b/.travis.yml
@@ -4,33 +4,3 @@ language: node_js

 node_js:
  - "6"
-
-env:
-  matrix:
-    - TEST_TYPE=lint
-    - TEST_TYPE=dist
-    - TEST_TYPE=compile
-    - TEST_TYPE=test:dom
-    - TEST_TYPE=test:node
-
-script:
-  - |
-    if [ "$TEST_TYPE" = lint ]; then
-      npm run lint
-    elif [ "$TEST_TYPE" = dist ]; then
-      npm run dist && \
-      node ./tests/dekko/dist.test.js && \
-      LIB_DIR=dist npm test -- --coverage -w 2
-    elif [ "$TEST_TYPE" = compile ]; then
-      npm run dist && \
-      npm run compile && \
-      node ./tests/dekko/lib.test.js && \
-      LIB_DIR=es npm test -- --coverage -w 2 && \
-      LIB_DIR=lib npm test -- --coverage -w 2
-    elif [ "$TEST_TYPE" = test:dom ]; then
-      npm run dist && \
-      npm test -- --coverage -w 2 && \
-      bash <(curl -s https://codecov.io/bash)
-    elif [ "$TEST_TYPE" = test:node ]; then
-      npm run test-node -- -w 2
-    fi
--- a/AUTHORS.txt
+++ b/AUTHORS.txt
@@ -1,280 +1,107 @@
-Aaron Planell López <aaronplanell@gmail.com>
-Adrian Dimitrov <dimitrov.adrian@gmail.com>
-Albert Zheng <lisong.zheng@gmail.com>
-Albert 理斯特 <shuaizhexu@gmail.com>
-Alexander <labriko@yandex.ru>
-Alexandre Kirszenberg <a.kirszenberg@gmail.com>
-Anas Tawfeek <anas.tawfeek@outlook.com>
 Andrew Murray <radarhere@gmail.com>
-Andrey G <plandem@gmail.com>
-Arthur Denner Oliveira Santos <arthurdenner7@gmail.com>
-BK Heleth <bon.hoo@hotmail.com>
-Babajide Fowotade <jide.b.tade@gmail.com>
-Benjamin Kniffler <bkniffler@me.com>
 Benjy Cui <benjytrys@gmail.com>
 Bernie <bernie.wangbj@gmail.com>
-Bill Sheikh <bilawals22@gmail.com>
-Bo Chen <bochen2014@yahoo.com>
 Bozhao <yubz86@gmail.com>
-Brett Lamy <bel423@me.com>
-Brook Shi <iwxiaot@gmail.com>
 Bruce Mitchener <bruce.mitchener@gmail.com>
 Bruno Maia <bruno.mm.maia@gmail.com>
-C <4019980@qq.com>
 Cam Song <neosoyn@gmail.com>
-Catalin Miron <mironcatalin@gmail.com>
 Cee Cirno <i@cee.moe>
-Chikara Chan <chenhongtu@51xianqu.net>
-Chris Kelly <cjke.7777@gmail.com>
-ChrisFan <chris.fan.dev@gmail.com>
-Cody Chan <int64ago@gmail.com>
-Colton Pierson <colton@coltonpierson.com>
-Conway Anderson <hello@conwayanderson.com>
-Cordaro <elvis07@163.com>
-D & R <jdz321@qq.com>
-Damian Green <damian.green@microlease.com>
-Danny Hoower Antonio Viasus Avila <danjavia@gmail.com>
 Daqi Song <dqaria@gmail.com>
-Darren Poon <dyhpoon@gmail.com>
 DengYun <tdzl2003@gmail.com>
-Dorian <dorian@doma.io>
-Edd Hannay <accounts@edd.fm>
 Eddie Xie <oeddyo@gmail.com>
-Eden Wang <yociduo@vip.qq.com>
-Egor Yurtaev <yurtaev.egor@gmail.com>
 Emma <sima.zhang1990@gmail.com>
 Eric <84263800@qq.com>
-Erwann Mest <m+github@kud.io>
-Evgeny Kuznetsov <jackk@ya.ru>
 Eward Song <eward.song@gmail.com>
-Graeme Yeates <gyeates@clearpath.ai>
-Graeme Yeates <yeatesgraeme@gmail.com>
 Gray Choi <gray.choi.1988@gmail.com>
 Guan Hao <raptium@gmail.com>
-HJin.me <hjin.me@gmail.com>
-Hai Phan Nguyen <pnghai@gmail.com>
 Haibin Yu <haibin.yu@oceanwing.com>
 Hanai <ihanai1991@gmail.com>
-Haroen Viaene <fingebimus@me.com>
-Harshit Mehrotra <harshitmehrotra@hotmail.com>
-Hubert Argasinski <argasinski.hubert@gmail.com>
-Hugo LEHMANN <shogi31@gmail.com>
-Igor G <i.gaidai4uk@gmail.com>
-ImJoeHs <865439601@qq.com>
-Inclined.Z <zjq0717@163.com>
 Infinity <305870677@qq.com>
-Ivo Stratev <ivo.stratev.tues@gmail.com>
 James <james@schoolshape.com>
 Jerry Bendy <jerry@icewingcc.com>
-Jesper We <jesper@journeyman.se>
-Jialei <jialeicui@126.com>
-Jieraaa <842533841@qq.com>
-Joe <qiaolibo@126.com>
-Joe Hsu <jhsu.x1@gmail.com>
-Jonatas Walker <jonataswalker@gmail.com>
-Jordan Hornblow <jordan@jch254.com>
-Junyu Zhan <irrigator@yeah.net>
-Kenaniah Cerny <kenaniah@gmail.com>
-Kenneth Truong <kenneth.e.truong@gmail.com>
-Kevin Ivan <info@kevinivan.com>
 KgTong <kgtong1992@gmail.com>
-Kimmo Saari <kimmo.saari@revolt.fi>
-Knacktus <knacktus@gmail.com>
-Kyle Rosenberg <kyle.rosenberg@gmail.com>
-Larry Laski <larry.laski@gmail.com>
-LeeHarlan <709886167@qq.com>
-Leo <clinyong@gmail.com>
 Leon Shi <superRaytin@163.com>
 Leon Shi <superRaytin@gmail.com>
 Liu Yang <zation1@gmail.com>
-LongYinan <lynweklm@gmail.com>
 MG12 <wuzhao.mail@gmail.com>
 Ma Tianxiao <matx2215@outlook.com>
-Madis Väin <madisvain@gmail.com>
-Manjit Kumar <manjit1727@gmail.com>
 Marius Ileana <visvadw@gmail.com>
 Marshall Chen <Juniors.fei@gmail.com>
-Martin Litvaj <kamahl19@gmail.com>
-Martin Novák <martinnovak@outlook.com>
-Meck <yesmeck@gmail.com>
-MeiLin <postget.me@gmail.com>
-Min <dicklwm@163.com>
-Minqi Pan <pmq2001@gmail.com>
-Minsung Ryu <ryums0227@gmail.com>
-Mitchell Demler <mitchell.demler@harcourts.net>
 Mr.Tone <vector@malubei.com>
-Nathan Tavares Nascimento <nathan.tnascimento@gmail.com>
-Nathan Wells <nwwells@gmail.com>
 Neverland <chenjiahan@buaa.edu.cn>
-Nico <nicolas@freddelacompta.com>
-Nimo <nimo.jser@gmail.com>
-Nishant Arora <na.nishantarora@gmail.com>
-OAwan <georgio.wan@gmail.com>
-Panjie Setiawan Wicaksono <panjie@panjiesw.com>
-Patrick Gidich <patrick.gidich@simnova.com>
-Patryk <longer44@gmail.com>
-Peter Berg <atticusberg@gmail.com>
-Pierre <pierre@bazoge.com>
-Piper Chester <piperchester@gmail.com>
-Pixy Yuan <pixy.bupt@gmail.com>
 Pyiner <lijiuyang1992@gmail.com>
 Qiaosen Huang <joesonw@gmail.com>
-Qingrong Ke <keqingrong1992@gmail.com>
-Rafael Cosman <rafaelcosman@alumni.stanford.edu>
 RaoHai <surgesoft@gmail.com>
-Rex <zhangzilong.zzl@163.com>
-Richard D. Worth <rdworth@gmail.com>
-Robert Wilkinson <wilkinson.robert.a@gmail.com>
 Rrrandom <emanonhere@gmail.com>
-Sakol Assawasagool <koobitor@gmail.com>
-Sanjay Kumar <sk@tectusdreamlab.com>
 Sean Lin <sean@ejoy.com>
-Sean Sun <pinggodstudio@gmail.com>
 Sebastian Blade <blade254353074@hotmail.com>
-Sergio Crisostomo <sergiosbox@gmail.com>
 Shawn Sit <xueqingxiao@gmail.com>
 ShiTengFei <shitengfei@goyoo.com>
 SimaQ <sima.zhang1990@gmail.com>
-Tao Zhang <windse7en@gmail.com>
 The Rock <zhoguoxin@126.com>
-Tino D <ginodeis@gmail.com>
-Tyler <chaotyler@gmail.com>
 Vadim Macagon <vadim.macagon@gmail.com>
-Valentin Vichnal <valentin@vichnal.com>
-Vemund Santi <veund@santi.no>
 Vincent Zhang <vxzhong@qq.com>
-Walter Barbagallo <turbometalskater@gmail.com>
-Warren Seymour <warren@fountainhead.tech>
 Wei Zhu <yesmeck@gmail.com>
-Will Chen <willchen90@gmail.com>
-Xie Guanglei <xieguanglei@hotmail.com>
-Yiming <ymjrcc@qq.com>
-Yogesh <yogeshkumar180592@gmail.com>
-Yusuke Ito <novi.mad@gmail.com>
 Yuwei Ba <i@xiaoba.me>
-YuyingWu <wuyuying1128@gmail.com>
-Zack Craig <zack@zack6849.com>
 Zap <a124116186@qq.com>
 afc163 <afc163@gmail.com>
-ashishg-qburst <ashishg@qburst.com>
 bang <sqibang@gmail.com>
 bang88 <sqibang@gmail.com>
-blankzust <450811238@qq.com>
-caoyi <caoyi0905@mail.hfut.edu.cn>
-cathayandy <wzm_andy@126.com>
-chchen <cc272309126@gmail.com>
 chencheng (云谦) <sorrycc@gmail.com>
-clinyong <clinyong@gmail.com>
-corneyl <cornieljoosse@gmail.com>
 ddcat1115 <ddcat1115@gmail.com>
-denzw <denzw@21cn.com>
 detailyang <detailyang@gmail.com>
 devqin <devqin@gmail.com>
 djorkaeff <djorkae55@gmail.com>
-duzliang <duzliang@gmail.com>
 ecofe <150641329@qq.com>
-edgji <j.edgji@gmail.com>
-elios <elios264@hotmail.com>
 elrrrrrrr <elrrrrrrr@gmail.com>
 ezpub <ez.foro@gmail.com>
 feng zhi hao <fzhihao@outlook.com>
 fengmk2 <m@fengmk2.com>
-flashback313 <windmark2012@gmail.com>
 genie <genie88@163.com>
-handycode <lihandi@gmail.com>
-hansnow <hansnow2012@gmail.com>
 haoxin <coderhaoxin@outlook.com>
-hardfist <yangjianzju@gmail.com>
 hi-caicai <hi@cai-cai.me>
-iamcastelli <sowed@cyberdude.com>
 ioldfish <fish.wangl@gmail.com>
 jasonslyvia <jasonslyvia@gmail.com>
 jiang <155259966@qq.com>
-jinouwuque <ee2win@gmail.com>
-kacjay <45483388@qq.com>
 kagawagao <kingsongao1221@gmail.com>
 kaifei <150641329@qq.com>
 kasinooya <kasinooya@gmail.com>
-kayw <kayw@outlook.com>
-kdenz <ksnz93@gmail.com>
-keng <keng@renderinghouse.com>
-ko <git@yaksok.net>
-kossel <lis.yichao@gmail.com>
-kun sam <kunsam624@icloud.com>
-leadream <857098475@qq.com>
-lehug <zcszuo5811@126.com>
 leon.shi <superRaytin@163.com>
 lgmcolin <gengmin.lgm@gmail.com>
 lgmcolin <lgmcolin@gmail.com>
-liekkas <zjq0717@163.com>
 lixiaochou077 <qi.liqi07@gmail.com>
-lixiaoyang <lixiaoyang2345@gmail.com>
 lizhaocai <lzc09008@gmail.com>
-loganpowell <loganp@tepper.cmu.edu>
-mArker <252133226@qq.com>
-mitchell.demler <mitchell.demler@harcourts.net>
 muzuiget <muzuiget@gmail.com>
-natergj <nater_nater@me.com>
-paranoidjk <hust2012jiangkai@gmail.com>
-parlop <parlop@gmail.com>
-pd4d10 <pd4d10@gmail.com>
-peiming <hyrijk@gmail.com>
-pinggod <pinggodstudio@gmail.com>
 pizn <pizner@gmail.com>
 plandem <plandem@gmail.com>
 popomore <sakura9515@gmail.com>
 qubaoming <qubaoming@didichuxing.com>
 ryangun <ryangun@foxmail.com>
-sadmark <zhoubin@laidian360.com>
 shelwin <wxfans@gmail.com>
-shenlin192@gmail.com <shenlin192@gmail.com>
-shlice <licesh@gmail.com>
 shouyong <enlangs@163.com>
 simaQ <sima.zhang1990@gmail.com>
-slientcloud <rjmuqiang@gmail.com>
 snadn <snadn@snadn.cn>
-sojournerc <cmeyer@zvelo.com>
 sorrycc <sorrycc@gmail.com>
 swindme <swindme@163.com>
 tianli.zhao <275287902@qq.com>
 tom <caolvchong@gmail.com>
 ustccjw <317713370@qq.com>
-wangtao0101 <yuecjn@gmail.com>
 warmhug <hualei5280@gmail.com>
-whtang906 <whtang906@gmail.com>
 wizawu <wizawu@gmail.com>
-wonyun <wy393767068@163.com>
-xiaofan2406 <xiaofan2406@gmail.com>
 yeliex <yeliex@yeliex.com>
 yiminghe <yiminghe@gmail.com>
 yubozhao <yubz86@gmail.com>
 yuche <i@yuche.me>
 z <haig8@msn.com>
 zack <zxyah@126.com>
-zerob4wl <zerob4wl@gmail.com>
 zhangpc <zhangpc@tenxcloud.com>
 zhaocai <lzc09008@gmail.com>
 zhujun24 <zhujun87654321@gmail.com>
 zilong <jzlxiaohei@163.com>
 zinkey <yaya@uloveit.com.cn>
-zollero <corona7@163.com>
-zuiidea <zuiiidea@gmail.com>
-一喵呜 <hyb628@gmail.com>
-乔奕轩 <qiao_yixuan@163.com>
-低位 <zhujun87654321@gmail.com>
 偏右 <afc163@gmail.com>
-可乐 <zaxlct@foxmail.com>
-吕立青 <jimmy.jinglv@gmail.com>
-广彬-梁 <326741518@qq.com>
-柚子男 <yozman@sina.com>
-白羊座小葛 <abeyuhang@gmail.com>
-英布 <chaoren1641@gmail.com>
-蔡伦 <sliuqin@gmail.com>
 逸达 <dqaria@gmail.com>
-邦 <sqibang@gmail.com>
-闲耘™ <hotoo.cn@gmail.com>
 陆离 <surgesoft@gmail.com>
-陈帅 <wasd2144@hotmail.com>
-马斯特 <sd4399340@126.com>
-马金花儿 <o.o@mug.dog>
-黄子毅 <576625322@qq.com>
+低位 <zhujun87654321@gmail.com>
+闲耘™ <hotoo.cn@gmail.com>
+白羊座小葛 <abeyuhang@gmail.com>
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
--- a/CODE_OF_CONDUCT.md
+++ b/CODE_OF_CONDUCT.md
@@ -1,46 +0,0 @@
-# Contributor Covenant Code of Conduct
-
-## Our Pledge
-
-In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation.
-
-## Our Standards
-
-Examples of behavior that contributes to creating a positive environment include:
-
-* Using welcoming and inclusive language
-* Being respectful of differing viewpoints and experiences
-* Gracefully accepting constructive criticism
-* Focusing on what is best for the community
-* Showing empathy towards other community members
-
-Examples of unacceptable behavior by participants include:
-
-* The use of sexualized language or imagery and unwelcome sexual attention or advances
-* Trolling, insulting/derogatory comments, and personal or political attacks
-* Public or private harassment
-* Publishing others' private information, such as a physical or electronic address, without explicit permission
-* Other conduct which could reasonably be considered inappropriate in a professional setting
-
-## Our Responsibilities
-
-Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.
-
-Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
-
-## Scope
-
-This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.
-
-## Enforcement
-
-Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at xingmin.zhu@alipay.com. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
-
-Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.
-
-## Attribution
-
-This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version]
-
-[homepage]: http://contributor-covenant.org
-[version]: http://contributor-covenant.org/version/1/4/
--- a/README-zh_CN.md
+++ b/README-zh_CN.md
@@ -5,37 +5,21 @@
 </p>

 # Ant Design
-
 [![](https://img.shields.io/travis/ant-design/ant-design.svg?style=flat-square)](https://travis-ci.org/ant-design/ant-design)
-[![Codecov](https://img.shields.io/codecov/c/github/ant-design/ant-design/master.svg?style=flat-square)](https://codecov.io/gh/ant-design/ant-design/branch/master)
-[![Dependency Status](https://img.shields.io/gemnasium/react-component/trigger.svg?style=flat-square)](https://gemnasium.com/ant-design/ant-design)
-
 [![npm package](https://img.shields.io/npm/v/antd.svg?style=flat-square)](https://www.npmjs.org/package/antd)
 [![NPM downloads](http://img.shields.io/npm/dm/antd.svg?style=flat-square)](https://npmjs.org/package/antd)
-[![Percentage of issues still open](http://isitmaintained.com/badge/open/ant-design/ant-design.svg)](http://isitmaintained.com/project/ant-design/ant-design "Percentage of issues still open")
-[![Gitter](https://badges.gitter.im/ant-design/ant-design-english.svg)](https://gitter.im/ant-design/ant-design-english?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) (English)
-[![Join the chat at https://gitter.im/ant-design/ant-design](https://img.shields.io/gitter/room/ant-design/ant-design.svg?style=flat-square)](https://gitter.im/ant-design/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)（中文）
+[![CDNJS](https://img.shields.io/cdnjs/v/antd.svg?style=flat-square)](https://cdnjs.com/libraries/antd)
+[![Dependency Status](https://david-dm.org/ant-design/ant-design.svg?style=flat-square)](https://david-dm.org/ant-design/ant-design)
+[![Join the chat at https://gitter.im/ant-design/ant-design](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/ant-design/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)

 一套企业级的 UI 设计语言和 React 实现。

-[README in English](README.md)
-
 ## 特性

- 提炼自企业级中后台产品的交互语言和视觉风格。
- 开箱即用的高质量 React 组件。
+- 提炼和服务企业级中后台产品的交互语言和视觉风格。
+- [React Component](http://react-component.github.io/badgeboard/) 基础上精心封装的高质量 UI 组件。
 - 使用 TypeScript 构建，提供完整的类型定义文件。
- 基于 npm + webpack + [dva](https://github.com/dvajs/dva) 的企业级开发框架。
-
-## 支持环境
-
-* 现代浏览器和 IE9 及以上。
-* 支持服务端渲染。
-* [Electron](http://electron.atom.io/)
-
-## 参与共建 [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
-
-`antd` 是一个开源项目，我们欢迎社区参与共建。如果你对此项目感兴趣，有 [很多方式](https://opensource.guide/how-to-contribute/) 进行参与。你可以 watch 这个仓库，加入 [issue 中的讨论](https://github.com/ant-design/ant-design/issues?q=is%3Aopen+is%3Aissue+label%3ADiscussion)，以及尝试实现一些 [已接受的特性](https://github.com/ant-design/ant-design/issues?q=is%3Aopen+is%3Aissue+label%3A%22PR+welcome%22)。我们会给予有活跃贡献的社区成员 [collaborator 权限](https://github.com/ant-design/ant-design/issues/3222)。
+- 基于 npm + webpack + babel + [dora](https://github.com/dora-js/dora) + [dva](https://github.com/dvajs/dva) 的企业级业务开发框架。

 ## 安装

@@ -56,12 +40,20 @@ ReactDOM.render(<DatePicker />, mountNode);
 import 'antd/dist/antd.css';  // or 'antd/dist/antd.less'
 ```

-按需加载可通过此写法 `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)。
+按需加载可通过此写法 `import DatePicker from 'antd/lib/date-picker'` 或使用插件 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import)。
+
+
+## 浏览器支持
+
+现代浏览器和 IE9 及以上。
+
+> [IE8 issues](https://github.com/xcatliu/react-ie8)

 ## TypeScript

-```js
-// tsconfig.json
+tsconfig.json
+
+```
 {
  "compilerOptions": {
    "moduleResolution": "node",
@@ -71,55 +63,24 @@ import 'antd/dist/antd.css';  // or 'antd/dist/antd.less'
 }
 ```

-> 注意：
-> - 设置 `allowSyntheticDefaultImports` 避免 `error TS1192: Module 'react' has no default export` 的错误。
-> - 不要使用 @types/antd, antd 已经自带了 TypeScript 定义。
-
-## 国际化
-
-参考 [国际化文档](http://ant.design/docs/react/i18n)。
-
 ## 链接

- [首页](http://ant.design/index-cn)
- [UI 组件库](http://ant.design/docs/react/introduce-cn)
- [更新日志](CHANGELOG.en-US.md)
- [官方脚手架](https://github.com/dvajs/dva-cli)
+- [首页](http://ant.design/)
+- [React 实现](http://ant.design/docs/react/introduce)
+- [修改记录](CHANGELOG.zh-CN.md)
+- [开发脚手架](https://github.com/ant-design/antd-init/)
 - [开发工具文档](http://ant-tool.github.io/)
- [脚手架市场](http://scaffold.ant.design)
- [React 底层基础组件](http://react-component.github.io/)
+- [React 基础组件](http://react-component.github.io/)
 - [移动端组件](http://mobile.ant.design)
- [动效](https://motion.ant.design)
- [设计规范速查手册](https://github.com/ant-design/ant-design/wiki/Ant-Design-%E8%AE%BE%E8%AE%A1%E5%9F%BA%E7%A1%80%E7%AE%80%E7%89%88)
- [开发者说明](https://github.com/ant-design/ant-design/wiki/Development)
- [版本发布规则](https://github.com/ant-design/ant-design/wiki/%E8%BD%AE%E5%80%BC%E8%A7%84%E5%88%99%E5%92%8C%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B)
+- [React 代码规范](https://github.com/react-component/react-component.github.io/blob/master/docs/zh-cn/component-code-style.md)
+- [组件设计原则](https://github.com/react-component/react-component.github.io/blob/master/docs/zh-cn/component-design.md)
+- [网站和组件开发说明](https://github.com/ant-design/ant-design/wiki/%E7%BD%91%E7%AB%99%E5%92%8C%E7%BB%84%E4%BB%B6%E5%BC%80%E5%8F%91%E8%AF%B4%E6%98%8E)
+- [版本发布手册](https://github.com/ant-design/ant-design/wiki/%E8%BD%AE%E5%80%BC%E8%A7%84%E5%88%99%E5%92%8C%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B)
+- [社区贡献脚手架和范例](https://github.com/ant-design/ant-design/issues/129)
 - [常见问题](https://github.com/ant-design/ant-design/wiki/FAQ)
- [CodePen 模板](http://codepen.io/benjycui/pen/KgPZrE?editors=001) for bug reports
+- [CodePen 模板](http://codepen.io/benjycui/pen/KgPZrE?editors=001)
 - [Awesome Ant Design](https://github.com/websemantics/awesome-ant-design)
- [定制主题](http://ant.design/docs/react/customize-theme-cn)
-
-## 本地开发
-
-```bash
-$ git clone git@github.com:ant-design/ant-design.git
-$ npm install
-$ npm start
-```
-
-打开浏览器访问 http://127.0.0.1:8001 ，更多本地开发文档参见: https://github.com/ant-design/ant-design/wiki/Development 。

 ## 如何贡献

-在任何形式的参与前，请先阅读 [贡献者文档](https://github.com/ant-design/ant-design/blob/master/.github/CONTRIBUTING.md)。如果你希望参与贡献，欢迎 [Pull Request](https://github.com/ant-design/ant-design/pulls)，或给我们 [报告 Bug](http://new-issue.ant.design/)。
-
-> 强烈推荐阅读 [《提问的智慧》](https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way)、[《如何向开源社区提问题》](https://github.com/seajs/seajs/issues/545) 和 [《如何有效地报告 Bug》](http://www.chiark.greenend.org.uk/%7Esgtatham/bugs-cn.html)、[《如何向开源项目提交无法解答的问题》](https://zhuanlan.zhihu.com/p/25795393)，更好的问题更容易获得帮助。
-
-## 社区互助
-
-如果您在使用的过程中碰到问题，可以通过下面几个途径寻求帮助，同时我们也鼓励资深用户通过下面的途径给新人提供帮助。
-
-通过 Stack Overflow 或者 Segment Fault 提问时，建议加上 `antd` 标签。
-
-1. [Stack Overflow](http://stackoverflow.com/questions/tagged/antd)（英文）
-2. [Segment Fault](https://segmentfault.com/t/antd)（中文）
-3. [![Join the chat at https://gitter.im/ant-design/ant-design](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/ant-design/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
+我们欢迎任何形式的贡献，有任何建议或意见您可以进行 [Pull Request](https://github.com/ant-design/ant-design/pulls)，或者给我们 [提问](https://github.com/ant-design/ant-design/issues)。
--- a/README.md
+++ b/README.md
@@ -5,37 +5,21 @@
 </p>

 # Ant Design
-
 [![](https://img.shields.io/travis/ant-design/ant-design.svg?style=flat-square)](https://travis-ci.org/ant-design/ant-design)
-[![Codecov](https://img.shields.io/codecov/c/github/ant-design/ant-design/master.svg?style=flat-square)](https://codecov.io/gh/ant-design/ant-design/branch/master)
-[![Dependency Status](https://img.shields.io/gemnasium/react-component/trigger.svg?style=flat-square)](https://gemnasium.com/ant-design/ant-design)
-
 [![npm package](https://img.shields.io/npm/v/antd.svg?style=flat-square)](https://www.npmjs.org/package/antd)
 [![NPM downloads](http://img.shields.io/npm/dm/antd.svg?style=flat-square)](https://npmjs.org/package/antd)
-[![Percentage of issues still open](http://isitmaintained.com/badge/open/ant-design/ant-design.svg)](http://isitmaintained.com/project/ant-design/ant-design "Percentage of issues still open")
-[![Gitter](https://badges.gitter.im/ant-design/ant-design-english.svg)](https://gitter.im/ant-design/ant-design-english?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) (English)
-[![Join the chat at https://gitter.im/ant-design/ant-design](https://img.shields.io/gitter/room/ant-design/ant-design.svg?style=flat-square)](https://gitter.im/ant-design/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)（中文）
+[![CDNJS](https://img.shields.io/cdnjs/v/antd.svg?style=flat-square)](https://cdnjs.com/libraries/antd)
+[![Dependency Status](https://david-dm.org/ant-design/ant-design.svg?style=flat-square)](https://david-dm.org/ant-design/ant-design)
+[![Join the chat at https://gitter.im/ant-design/ant-design](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/ant-design/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)

 An enterprise-class UI design language and React-based implementation.

-[中文 README](README-zh_CN.md)
-
 ## Features

- An enterprise-class UI design language for web applications.
- A set of high-quality React components out of the box.
- Written in TypeScript with complete define types.
- A npm + webpack + [dva](https://github.com/dvajs/dva) front-end development workflow.
-
-## Environment Support
-
-* Modern browsers and Internet Explorer 9+ (with [polyfills](https://ant.design/docs/react/getting-started#Compatibility))
-* Server-side Rendering
-* [Electron](http://electron.atom.io/)
-
-## 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.
+- An enterprise-class design language and high quality UI.
+- Graceful UI components out of the box, base on [React Component](http://react-component.github.io/badgeboard/).
+- Writen in TypeScript with complete define types.
+- A npm + webpack + babel + [dora](https://github.com/dora-js/dora) + [dva](https://github.com/dvajs/dva) development framework.

 ## Install

@@ -45,6 +29,8 @@ npm install antd

 ## Usage

+### Use prebuilt bundle
+
 ```jsx
 import { DatePicker } from 'antd';
 ReactDOM.render(<DatePicker />, mountNode);
@@ -58,36 +44,41 @@ import 'antd/dist/antd.css';  // or 'antd/dist/antd.less'

 ### Use modularized antd

- Manually import
-
-   ```jsx
-   import DatePicker from 'antd/lib/date-picker';  // for js
-   import 'antd/lib/date-picker/style/css';        // for css
-   // import 'antd/lib/date-picker/style';         // that will import less
-   ```
-
- Use [babel-plugin-import](https://github.com/ant-design/babel-plugin-import)
+- Use [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) (Recommended)

   ```js
-   // .babelrc or babel-loader option
+   // .babelrc
   {
-     "plugins": [
-       ["import", { libraryName: "antd", style: "css" }] // `style: true` for less
-     ]
+     "plugins": [["import", { libraryName: "antd", style: "css" }]]
   }
   ```

-   Then you can import components from antd, equivalent to import manually below.
+   Then you can import components from antd directly.

   ```jsx
   // import js and css modularly, parsed by babel-plugin-import
   import { DatePicker } from 'antd';
   ```

-### TypeScript
+- Manually import

-```js
-// tsconfig.json
+   ```jsx
+   import DatePicker from 'antd/lib/date-picker';  // just for js
+   import 'antd/lib/date-picker/style/css';  // with style
+   ```
+
+
+## Browser Support
+
+Normal browsers and Internet Explorer 9+.
+
+> [IE8 issues](https://github.com/xcatliu/react-ie8)
+
+## TypeScript
+
+tsconfig.json
+
+```
 {
  "compilerOptions": {
    "moduleResolution": "node",
@@ -97,55 +88,24 @@ import 'antd/dist/antd.css';  // or 'antd/dist/antd.less'
 }
 ```

-> Note:
-> - 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).
-
 ## Links

 - [Home page](http://ant.design/)
 - [UI library](http://ant.design/docs/react/introduce)
- [Change Log](CHANGELOG.en-US.md)
- [Official Scaffold Tool](https://github.com/dvajs/dva-cli/)
- [Development Tool](http://ant-tool.github.io/)
- [Scaffold Market](http://scaffold.ant.design)
- [rc-components](http://react-component.github.io/)
+- [ChangeLog](CHANGELOG.en-US.md)
+- [Scaffold tool](https://github.com/ant-design/antd-init/)
+- [Development tool](http://ant-tool.github.io/)
+- [React components](http://react-component.github.io/)
 - [Mobile UI](http://mobile.ant.design)
- [Motion](https://motion.ant.design)
+- [React style guide](https://github.com/react-component/react-component.github.io/blob/master/docs/zh-cn/component-code-style.md)
+- [React component design guide](https://github.com/react-component/react-component.github.io/blob/master/docs/zh-cn/component-design.md)
 - [Developer Instruction](https://github.com/ant-design/ant-design/wiki/Development)
 - [Versioning Release Note](https://github.com/ant-design/ant-design/wiki/%E8%BD%AE%E5%80%BC%E8%A7%84%E5%88%99%E5%92%8C%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B)
+- [Boilerplates](https://github.com/ant-design/ant-design/issues/129)
 - [FAQ](https://github.com/ant-design/ant-design/wiki/FAQ)
 - [CodePen boilerplate](http://codepen.io/benjycui/pen/KgPZrE?editors=001) for bug reports
 - [Awesome Ant Design](https://github.com/websemantics/awesome-ant-design)
- [Customize Theme](http://ant.design/docs/react/customize-theme)
-
-## Development
-
-```bash
-$ git clone git@github.com:ant-design/ant-design.git
-$ npm install
-$ npm start
-```
-
-Open your browser and visit http://127.0.0.1:8001 , see more at https://github.com/ant-design/ant-design/wiki/Development .

 ## 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 a [GitHub issue](https://github.com/ant-design/ant-design/issues). If you'd like to improve code, check out the [Development Instruction](https://github.com/ant-design/ant-design/wiki/Development) and have a good time! :)
--- a/components/tests/snapshots/index.test.js.snap
+++ b/components/tests/snapshots/index.test.js.snap
@@ -1,58 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`antd exports modules correctly 1`] = `
-Array [
-  "Affix",
-  "Anchor",
-  "AutoComplete",
-  "Alert",
-  "Avatar",
-  "BackTop",
-  "Badge",
-  "Breadcrumb",
-  "Button",
-  "Calendar",
-  "Card",
-  "Collapse",
-  "Carousel",
-  "Cascader",
-  "Checkbox",
-  "Col",
-  "DatePicker",
-  "Dropdown",
-  "Form",
-  "Icon",
-  "Input",
-  "InputNumber",
-  "Layout",
-  "LocaleProvider",
-  "message",
-  "Menu",
-  "Modal",
-  "notification",
-  "Pagination",
-  "Popconfirm",
-  "Popover",
-  "Progress",
-  "Radio",
-  "Rate",
-  "Row",
-  "Select",
-  "Slider",
-  "Spin",
-  "Steps",
-  "Switch",
-  "Table",
-  "Transfer",
-  "Tree",
-  "TreeSelect",
-  "Tabs",
-  "Tag",
-  "TimePicker",
-  "Timeline",
-  "Tooltip",
-  "Mention",
-  "Upload",
-  "version",
-]
-`;
--- a/components/tests/index.test.js
+++ b/components/tests/index.test.js
@@ -1,7 +0,0 @@
-import * as antd from '..';
-
-describe('antd', () => {
-  it('exports modules correctly', () => {
-    expect(Object.keys(antd)).toMatchSnapshot();
-  });
-});
--- a/components/_util/tests/util.test.js
+++ b/components/_util/tests/util.test.js
@@ -1,29 +0,0 @@
-import throttleByAnimationFrame from '../throttleByAnimationFrame';
-
-jest.useFakeTimers();
-
-describe('Test utils function', () => {
-  it('throttle function should work', () => {
-    const callback = jest.fn();
-    const throttled = throttleByAnimationFrame(callback);
-    expect(callback).not.toBeCalled();
-
-    throttled();
-    throttled();
-
-    jest.runAllTimers();
-    expect(callback).toBeCalled();
-    expect(callback.mock.calls.length).toBe(1);
-  });
-
-  it('throttle function should be canceled', () => {
-    const callback = jest.fn();
-    const throttled = throttleByAnimationFrame(callback);
-
-    throttled();
-    throttled.cancel();
-
-    jest.runAllTimers();
-    expect(callback).not.toBeCalled();
-  });
-});
--- a/components/_util/getLocale.tsx
+++ b/components/_util/getLocale.tsx
@@ -1,30 +1,10 @@
-export function getComponentLocale(props, context, componentName, getDefaultLocale) {
-  let locale: any = {};
-  if (context && context.antLocale && context.antLocale[componentName]) {
-    locale = context.antLocale[componentName];
-  } else {
-    const defaultLocale = getDefaultLocale();
-    // TODO: make default lang of antd be English
-    // https://github.com/ant-design/ant-design/issues/6334
-    locale = defaultLocale.default || defaultLocale;
-  }
+import assign from 'object-assign';

-  const result = {
-    ...locale,
-    ...props.locale,
-  };
-  result.lang = {
-    ...locale.lang,
-    ...props.locale.lang,
-  };
+export default function getLocale(props, context, componentName, getDefaultLocale) {
+  const locale = context && context.antLocale && context.antLocale[componentName] ?
+    context.antLocale[componentName] : getDefaultLocale();
+
+  const result = assign({}, locale, props.locale);
+  result.lang = assign({}, locale.lang, props.locale.lang);
  return result;
 }
-
-export function getLocaleCode(context) {
-  const localeCode = context.antLocale && context.antLocale.locale;
-  // Had use LocaleProvide but didn't set locale
-  if (context.antLocale && context.antLocale.exist && !localeCode) {
-    return 'zh-cn';
-  }
-  return localeCode;
-}
--- a/components/_util/getRequestAnimationFrame.tsx
+++ b/components/_util/getRequestAnimationFrame.tsx
@@ -1,44 +1,12 @@
-const availablePrefixs = ['moz', 'ms', 'webkit'];
-
-function requestAnimationFramePolyfill() {
-  let lastTime = 0;
-  return function(callback) {
-    const currTime = new Date().getTime();
-    const timeToCall = Math.max(0, 16 - (currTime - lastTime));
-    const id = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall);
-    lastTime = currTime + timeToCall;
-    return id;
-  };
-}
-
 export default function getRequestAnimationFrame() {
  if (typeof window === 'undefined') {
    return () => {};
  }
  if (window.requestAnimationFrame) {
-    // https://github.com/vuejs/vue/issues/4465
-    return window.requestAnimationFrame.bind(window);
+    return window.requestAnimationFrame;
  }
-
-  const prefix = availablePrefixs.filter(key => `${key}RequestAnimationFrame` in window)[0];
-
+  const prefix = ['moz', 'ms', 'webkit'].filter(key => `${key}RequestAnimationFrame` in window)[0];
  return prefix
    ? window[`${prefix}RequestAnimationFrame`]
-    : requestAnimationFramePolyfill();
-}
-
-export function cancelRequestAnimationFrame(id) {
-  if (typeof window === 'undefined') {
-    return null;
-  }
-  if (window.cancelAnimationFrame) {
-    return window.cancelAnimationFrame(id);
-  }
-  const prefix = availablePrefixs.filter(key =>
-    `${key}CancelAnimationFrame` in window || `${key}CancelRequestAnimationFrame` in window,
-  )[0];
-
-  return prefix ?
-    (window[`${prefix}CancelAnimationFrame`] || window[`${prefix}CancelRequestAnimationFrame`]).call(this, id)
-    : clearTimeout(id);
+    : callback => setTimeout(callback, 1000 / 60);
 }
--- a/components/_util/isFlexSupported.tsx
+++ b/components/_util/isFlexSupported.tsx
@@ -1,10 +0,0 @@
-export default function isFlexSupported() {
-  if (typeof window !== 'undefined' && window.document && window.document.documentElement) {
-    const { documentElement } = window.document;
-    return 'flex' in documentElement.style ||
-      'webkitFlex' in documentElement.style ||
-      'Flex' in documentElement.style ||
-      'msFlex' in documentElement.style;
-  }
-  return false;
-}
--- a/components/_util/openAnimation.tsx
+++ b/components/_util/openAnimation.tsx
@@ -1,37 +1,21 @@
 import cssAnimation from 'css-animation';
-import getRequestAnimationFrame, { cancelRequestAnimationFrame } from './getRequestAnimationFrame';
-
-const reqAnimFrame = getRequestAnimationFrame();

 function animate(node, show, done) {
  let height;
-  let requestAnimationFrameId;
  return cssAnimation(node, 'ant-motion-collapse', {
    start() {
      if (!show) {
        node.style.height = `${node.offsetHeight}px`;
-        node.style.opacity = 1;
      } else {
        height = node.offsetHeight;
        node.style.height = 0;
-        node.style.opacity = 0;
      }
    },
    active() {
-      if (requestAnimationFrameId) {
-        cancelRequestAnimationFrame(requestAnimationFrameId);
-      }
-      requestAnimationFrameId = reqAnimFrame(() => {
-        node.style.height = `${show ? height : 0}px`;
-        node.style.opacity = show ? 1 : 0;
-      });
+      node.style.height = `${show ? height : 0}px`;
    },
    end() {
-      if (requestAnimationFrameId) {
-        cancelRequestAnimationFrame(requestAnimationFrameId);
-      }
      node.style.height = '';
-      node.style.opacity = '';
      done();
    },
  });
--- a/components/_util/splitObject.tsx
+++ b/components/_util/splitObject.tsx
@@ -0,0 +1,12 @@
+export default function splitObject(obj, parts): Array<any> {
+  const left = {};
+  const right = {};
+  Object.keys(obj).forEach((k) => {
+    if (parts.indexOf(k) !== -1) {
+      left[k] = obj[k];
+    } else {
+      right[k] = obj[k];
+    }
+  });
+  return [left, right];
+}
--- a/components/_util/throttleByAnimationFrame.tsx
+++ b/components/_util/throttleByAnimationFrame.tsx
@@ -1,47 +0,0 @@
-import getRequestAnimationFrame, { cancelRequestAnimationFrame } from '../_util/getRequestAnimationFrame';
-
-const reqAnimFrame = getRequestAnimationFrame();
-
-export default function throttleByAnimationFrame(fn) {
-  let requestId;
-
-  const later = args => () => {
-    requestId = null;
-    fn(...args);
-  };
-
-  const throttled = (...args) => {
-    if (requestId == null) {
-      requestId = reqAnimFrame(later(args));
-    }
-  };
-
-  (throttled as any).cancel = () => cancelRequestAnimationFrame(requestId);
-
-  return throttled;
-}
-
-export function throttleByAnimationFrameDecorator() {
-  return function(target, key, descriptor) {
-    let fn = descriptor.value;
-    let definingProperty = false;
-    return {
-      configurable: true,
-      get() {
-        if (definingProperty || this === target.prototype || this.hasOwnProperty(key)) {
-          return fn;
-        }
-
-        let boundFn = throttleByAnimationFrame(fn.bind(this));
-        definingProperty = true;
-        Object.defineProperty(this, key, {
-          value: boundFn,
-          configurable: true,
-          writable: true,
-        });
-        definingProperty = false;
-        return boundFn;
-      },
-    };
-  };
-}
--- a/components/_util/triggerEvent.tsx
+++ b/components/_util/triggerEvent.tsx
@@ -1,8 +0,0 @@
-export default function triggerEvent(el, type) {
-  if ('createEvent' in document) {
-    // modern browsers, IE9+
-    const e = document.createEvent('HTMLEvents');
-    e.initEvent(type, false, true);
-    el.dispatchEvent(e);
-  }
-}
--- a/components/_util/warning.tsx
+++ b/components/_util/warning.tsx
@@ -1,9 +0,0 @@
-import warning from 'warning';
-
-const warned: { [msg: string]: boolean} = {};
-export default (valid: boolean, message: string): void => {
-  if (!valid && !warned[message]) {
-    warning(false, message);
-    warned[message] = true;
-  }
-};
--- a/components/affix/tests/Affix.test.js
+++ b/components/affix/tests/Affix.test.js
@@ -1,68 +0,0 @@
-import React from 'react';
-import { mount } from 'enzyme';
-import Affix from '..';
-import Button from '../../button';
-
-jest.useFakeTimers();
-
-const events = {};
-
-class AffixMounter extends React.Component {
-  componentDidMount() {
-    this.container.scrollTop = 100;
-    this.container.addEventListener = jest.fn().mockImplementation((event, cb) => {
-      events[event] = cb;
-    });
-  }
-  getTarget = () => {
-    return this.container;
-  }
-  render() {
-    return (<div
-      style={{
-        height: 100,
-        overflowY: 'scroll',
-      }}
-      ref={(node) => { this.container = node; }}
-    >
-      <div
-        className="background"
-        style={{
-          paddingTop: 60,
-          height: 300,
-        }}
-      >
-        <Affix
-          target={() => this.container}
-          ref={ele => this.affix = ele}
-        >
-          <Button type="primary" >
-            Fixed at the top of container
-          </Button>
-        </Affix>
-      </div>
-    </div>);
-  }
-}
-
-describe('Affix Render', () => {
-  it('Anchor render perfectly', () => {
-    document.body.innerHTML = '<div id="mounter" />';
-
-    const wrapper = mount(<AffixMounter />, { attachTo: document.getElementById('mounter') });
-    jest.runAllTimers();
-
-    wrapper.node.affix.refs.fixedNode.parentNode.getBoundingClientRect = jest.fn(() => {
-      return {
-        bottom: 100, height: 28, left: 0, right: 0, top: -50, width: 195,
-      };
-    });
-
-    events.scroll({
-      type: 'scroll',
-    });
-
-    jest.runAllTimers();
-    expect(wrapper.node.affix.state.affixStyle).not.toBe(null);
-  });
-});
--- a/components/affix/tests/snapshots/demo.test.js.snap
+++ b/components/affix/tests/snapshots/demo.test.js.snap
@@ -1,77 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders ./components/affix/demo/basic.md correctly 1`] = `
-<div>
-  <div>
-    <div
-      class=""
-    >
-      <button
-        class="ant-btn ant-btn-primary"
-        type="button"
-      >
-        <span>
-          Affix top
-        </span>
-      </button>
-    </div>
-  </div>
-  <br />
-  <div>
-    <div
-      class=""
-    >
-      <button
-        class="ant-btn ant-btn-primary"
-        type="button"
-      >
-        <span>
-          Affix bottom
-        </span>
-      </button>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`renders ./components/affix/demo/on-change.md correctly 1`] = `
-<div>
-  <div
-    class=""
-  >
-    <button
-      class="ant-btn"
-      type="button"
-    >
-      <span>
-        120px to affix top
-      </span>
-    </button>
-  </div>
-</div>
-`;
-
-exports[`renders ./components/affix/demo/target.md correctly 1`] = `
-<div
-  class="scrollable-container"
->
-  <div
-    class="background"
-  >
-    <div>
-      <div
-        class=""
-      >
-        <button
-          class="ant-btn ant-btn-primary"
-          type="button"
-        >
-          <span>
-            Fixed at the top of container
-          </span>
-        </button>
-      </div>
-    </div>
-  </div>
-</div>
-`;
--- a/components/affix/tests/demo.test.js
+++ b/components/affix/tests/demo.test.js
@@ -1,3 +0,0 @@
-import demoTest from '../../../tests/shared/demoTest';
-
-demoTest('affix');
--- a/components/affix/demo/basic.md
+++ b/components/affix/demo/basic.md
@@ -17,15 +17,8 @@ The simplest usage.
 import { Affix, Button } from 'antd';

 ReactDOM.render(
-  <div>
-    <Affix>
-      <Button type="primary">Affix top</Button>
-    </Affix>
-    <br />
-    <Affix offsetBottom={0}>
-      <Button type="primary">Affix bottom</Button>
-    </Affix>
-  </div>,
-  mountNode
-);
+  <Affix>
+    <Button type="primary">Affix top</Button>
+  </Affix>
+, mountNode);
 ````
--- a/components/affix/demo/bottom.md
+++ b/components/affix/demo/bottom.md
@@ -0,0 +1,24 @@
+---
+order: 2
+title:
+  zh-CN: 下方固定
+  en-US: Bottom
+---
+
+## zh-CN
+
+固定在屏幕下方。
+
+## en-US
+
+Affix to bottom.
+
+````jsx
+import { Affix, Button } from 'antd';
+
+ReactDOM.render(
+  <Affix offsetBottom={20}>
+    <Button type="primary">20px to affix bottom</Button>
+  </Affix>
+, mountNode);
+````
--- a/components/affix/demo/offset.md
+++ b/components/affix/demo/offset.md
@@ -0,0 +1,24 @@
+---
+order: 1
+title:
+  zh-CN: 偏移
+  en-US: Offset
+---
+
+## zh-CN
+
+达到一定的偏移量才触发。
+
+## en-US
+
+Affix element according to offset value.
+
+````jsx
+import { Affix, Button } from 'antd';
+
+ReactDOM.render(
+  <Affix offsetTop={75}>
+    <Button type="primary">75px to affix top</Button>
+  </Affix>
+, mountNode);
+````
--- a/components/affix/demo/on-change.md
+++ b/components/affix/demo/on-change.md
@@ -1,5 +1,5 @@
 ---
-order: 1
+order: 3
 title:
  zh-CN: 固定状态改变的回调
  en-US: Callback
@@ -19,7 +19,6 @@ import { Affix, Button } from 'antd';
 ReactDOM.render(
  <Affix offsetTop={120} onChange={affixed => console.log(affixed)}>
    <Button>120px to affix top</Button>
-  </Affix>,
-  mountNode
-);
+  </Affix>
+, mountNode);
 ````
--- a/components/affix/demo/target.md
+++ b/components/affix/demo/target.md
@@ -1,5 +1,5 @@
 ---
-order: 2
+order: 4
 title:
  zh-CN: 滚动容器
  en-US: Container to scroll.
@@ -11,38 +11,27 @@ title:

 ## en-US

-Set a `target` for 'Affix', which is listen to scroll event of target element (default is `window`).
+Set a `target` for 'Affix', which is listen to scroll event of target element (default is `window`). 

 ````jsx
 import { Affix, Button } from 'antd';

-class Demo extends React.Component {
-  render() {
-    return (
-      <div className="scrollable-container" ref={(node) => { this.container = node; }}>
-        <div className="background">
-          <Affix target={() => this.container}>
-            <Button type="primary">
-              Fixed at the top of container
-            </Button>
+const Demo = () => {
+  return (
+    <div style={{ height: 100, overflow: 'hidden' }}>
+      <div style={{ height: '100%', overflowY: 'scroll' }} id="affix-target">
+        <div style={{ height: 300, backgroundImage: 'url(https://zos.alipayobjects.com/rmsportal/RmjwQiJorKyobvI.jpg)' }}>
+          <br />
+          <br />
+          <br />
+          <Affix target={() => document.getElementById('affix-target')} offsetTop={20}>
+            <Button type="primary">Fixed at the top of container</Button>
          </Affix>
        </div>
      </div>
-    );
-  }
-}
+    </div>
+  );
+};

 ReactDOM.render(<Demo />, mountNode);
 ````
-
-<style>
-#components-affix-demo-target .scrollable-container {
-  height: 100px;
-  overflow-y: scroll;
-}
-#components-affix-demo-target .background {
-  padding-top: 60px;
-  height: 300px;
-  background-image: url('https://zos.alipayobjects.com/rmsportal/RmjwQiJorKyobvI.jpg');
-}
-</style>
--- a/components/affix/index.en-US.md
+++ b/components/affix/index.en-US.md
@@ -1,25 +1,24 @@
 ---
 category: Components
-type: Navigation
+type: Other
 title: Affix
 ---

-Make an element stick to viewport.
+Make an element sticky to viewport.

 ## When To Use

-When user browses a long web page, some content need to stick to the viewport. This is common for menus and actions.
+When user browses a long web page, some content need to sticky to viewport. It is common for menus and actions.

-Please note that Affix should not cover other content on the page, especially when the size of the viewport is small.
+Please note that Affix should not cover other content in page, especially when the size of viewport is small.

 ## API

 | Property     | Description           | Type     | Default      |
 |--------------|-----------------------|----------|--------------|
-| offsetTop    | Pixels to offset from top when calculating position of scroll | number | 0 |
-| offsetBottom | Pixels to offset from bottom when calculating position of scroll | number | - |
-| target | specifies the scrollable area dom node | () => HTMLElement | () => window |
-| onChange     | Callback for when affix state is changed | Function(affixed) | - |
+| offsetTop    | Pixels to offset from top when calculating position of scroll | Number | 0 |
+| offsetBottom | Pixels to offset from bottom when calculating position of scroll | Number | - |
+| onChange     | Callback when affix state is changed | Function(affixed) | - |

 **Note:** Children of `Affix` can not be `position: absolute`, but you can set `Affix` as `position: absolute`:

--- a/components/affix/index.tsx
+++ b/components/affix/index.tsx
@@ -1,12 +1,10 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import PropTypes from 'prop-types';
 import addEventListener from 'rc-util/lib/Dom/addEventListener';
 import classNames from 'classnames';
 import shallowequal from 'shallowequal';
 import omit from 'omit.js';
 import getScroll from '../_util/getScroll';
-import { throttleByAnimationFrameDecorator } from '../_util/throttleByAnimationFrame';

 function getTargetRect(target): ClientRect {
  return target !== window ?
@@ -30,8 +28,6 @@ function getOffset(element: HTMLElement, target) {
      scrollTop - clientTop,
    left: elemRect.left - targetRect.left +
      scrollLeft - clientLeft,
-    width: elemRect.width,
-    height: elemRect.height,
  };
 }

@@ -40,7 +36,7 @@ function noop() {}
 function getDefaultTarget() {
  return typeof window !== 'undefined' ?
    window : null;
-}
+};

 // Affix
 export interface AffixProps {
@@ -61,30 +57,17 @@ export interface AffixProps {

 export default class Affix extends React.Component<AffixProps, any> {
  static propTypes = {
-    offsetTop: PropTypes.number,
-    offsetBottom: PropTypes.number,
-    target: PropTypes.func,
+    offsetTop: React.PropTypes.number,
+    offsetBottom: React.PropTypes.number,
+    target: React.PropTypes.func,
  };

  scrollEvent: any;
  resizeEvent: any;
-  timeout: any;
  refs: {
    fixedNode: HTMLElement;
  };

-  events = [
-    'resize',
-    'scroll',
-    'touchstart',
-    'touchmove',
-    'touchend',
-    'pageshow',
-    'load',
-  ];
-
-  eventHandlers = {};
-
  constructor(props) {
    super(props);
    this.state = {
@@ -112,16 +95,18 @@ export default class Affix extends React.Component<AffixProps, any> {
    });
  }

-  setPlaceholderStyle(placeholderStyle) {
+  setPlaceholderStyle(e, placeholderStyle) {
    const originalPlaceholderStyle = this.state.placeholderStyle;
+    if (e.type === 'resize') {
+      return;
+    }
    if (shallowequal(placeholderStyle, originalPlaceholderStyle)) {
      return;
    }
    this.setState({ placeholderStyle });
  }

-  @throttleByAnimationFrameDecorator()
-  updatePosition(e) {
+  updatePosition = (e) => {
    let { offsetTop, offsetBottom, offset, target = getDefaultTarget } = this.props;
    const targetNode = target();

@@ -151,58 +136,48 @@ export default class Affix extends React.Component<AffixProps, any> {
    const targetRect = getTargetRect(targetNode);
    const targetInnerHeight =
      (targetNode as Window).innerHeight || (targetNode as HTMLElement).clientHeight;
-    if (scrollTop > elemOffset.top - (offsetTop as number) && offsetMode.top) {
+    if (scrollTop > elemOffset.top - offsetTop && offsetMode.top) {
      // Fixed Top
-      const width = elemOffset.width;
      this.setAffixStyle(e, {
        position: 'fixed',
-        top: targetRect.top + (offsetTop as number),
+        top: targetRect.top + offsetTop,
        left: targetRect.left + elemOffset.left,
-        width,
+        width: affixNode.offsetWidth,
      });
-      this.setPlaceholderStyle({
-        width,
-        height: elemSize.height,
+      this.setPlaceholderStyle(e, {
+        width: affixNode.offsetWidth,
+        height: affixNode.offsetHeight,
      });
    } else if (
-      scrollTop < elemOffset.top + elemSize.height + (offsetBottom as number) - targetInnerHeight &&
+      scrollTop < elemOffset.top + elemSize.height + offsetBottom - targetInnerHeight &&
        offsetMode.bottom
    ) {
      // Fixed Bottom
      const targetBottomOffet = targetNode === window ? 0 : (window.innerHeight - targetRect.bottom);
-      const width = elemOffset.width;
      this.setAffixStyle(e, {
        position: 'fixed',
-        bottom: targetBottomOffet + (offsetBottom as number),
+        bottom: targetBottomOffet + offsetBottom,
        left: targetRect.left + elemOffset.left,
-        width,
+        width: affixNode.offsetWidth,
      });
-      this.setPlaceholderStyle({
-        width,
-        height: elemOffset.height,
+      this.setPlaceholderStyle(e, {
+        width: affixNode.offsetWidth,
+        height: affixNode.offsetHeight,
      });
    } else {
-      const { affixStyle } = this.state;
-      if (e.type === 'resize' && affixStyle && affixStyle.position === 'fixed' && affixNode.offsetWidth) {
-        this.setAffixStyle(e, { ...affixStyle, width: affixNode.offsetWidth });
-      } else {
-        this.setAffixStyle(e, null);
-      }
-      this.setPlaceholderStyle(null);
+      this.setAffixStyle(e, null);
+      this.setPlaceholderStyle(e, null);
    }
  }

  componentDidMount() {
    const target = this.props.target || getDefaultTarget;
-    // Wait for parent component ref has its value
-    this.timeout = setTimeout(() => {
-      this.setTargetEventListeners(target);
-    });
+    this.setTargetEventListeners(target);
  }

  componentWillReceiveProps(nextProps) {
    if (this.props.target !== nextProps.target) {
-      this.clearEventListeners();
+      this.clearScrollEventListeners();
      this.setTargetEventListeners(nextProps.target);

      // Mock Event object.
@@ -211,28 +186,19 @@ export default class Affix extends React.Component<AffixProps, any> {
  }

  componentWillUnmount() {
-    this.clearEventListeners();
-    clearTimeout(this.timeout);
-    (this.updatePosition as any).cancel();
+    this.clearScrollEventListeners();
  }

  setTargetEventListeners(getTarget) {
    const target = getTarget();
-    if (!target) {
-      return;
-    }
-    this.clearEventListeners();
-
-    this.events.forEach(eventName => {
-      this.eventHandlers[eventName] = addEventListener(target, eventName, this.updatePosition);
-    });
+    this.scrollEvent = addEventListener(target, 'scroll', this.updatePosition);
+    this.resizeEvent = addEventListener(target, 'resize', this.updatePosition);
  }

-  clearEventListeners() {
-    this.events.forEach(eventName => {
-      const handler = this.eventHandlers[eventName];
-      if (handler && handler.remove) {
-        handler.remove();
+  clearScrollEventListeners() {
+    ['scrollEvent', 'resizeEvent'].forEach((name) => {
+      if (this[name]) {
+        this[name].remove();
      }
    });
  }
@@ -242,10 +208,10 @@ export default class Affix extends React.Component<AffixProps, any> {
      [this.props.prefixCls || 'ant-affix']: this.state.affixStyle,
    });

-    const props = omit(this.props, ['prefixCls', 'offsetTop', 'offsetBottom', 'target', 'onChange']);
-    const placeholderStyle = { ...this.state.placeholderStyle, ...this.props.style };
+    const props = omit(this.props, ['prefixCls', 'offsetTop', 'offsetBottom', 'target']);
+
    return (
-      <div {...props} style={placeholderStyle}>
+      <div {...props} style={this.state.placeholderStyle}>
        <div className={className} ref="fixedNode" style={this.state.affixStyle}>
          {this.props.children}
        </div>
--- a/components/affix/index.zh-CN.md
+++ b/components/affix/index.zh-CN.md
@@ -1,7 +1,7 @@
 ---
 category: Components
 subtitle: 固钉
-type: Navigation
+type: Other
 title: Affix
 ---

@@ -17,9 +17,9 @@ title: Affix

 | 成员        | 说明           | 类型               | 默认值       |
 |-------------|----------------|--------------------|--------------|
-| offsetTop    | 距离窗口顶部达到指定偏移量后触发   | number |         |
-| offsetBottom | 距离窗口底部达到指定偏移量后触发   | number |         |
-| target | 设置 `Affix` 需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数 | () => HTMLElement | () => window |
+| offsetTop    | 距离窗口顶部达到指定偏移量后触发   | Number |         |
+| offsetBottom | 距离窗口底部达到指定偏移量后触发   | Number |         |
+| target | 设置 `Affix` 需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数 | Function | () => window |
 | onChange | 固定状态改变时触发的回调函数   | Function(affixed) | 无        |

 **注意：**`Affix` 内的元素不要使用绝对定位，如需要绝对定位的效果，可以直接设置 `Affix` 为绝对定位：
--- a/components/alert/tests/snapshots/demo.test.js.snap
+++ b/components/alert/tests/snapshots/demo.test.js.snap
@@ -1,424 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders ./components/alert/demo/banner.md correctly 1`] = `
-<div>
-  <div
-    class="ant-alert ant-alert-warning ant-alert-banner"
-    data-show="true"
-  >
-    <i
-      class="anticon anticon-exclamation-circle ant-alert-icon"
-    />
-    <span
-      class="ant-alert-message"
-    >
-      Warning text
-    </span>
-    <span
-      class="ant-alert-description"
-    />
-  </div>
-  <br />
-  <div
-    class="ant-alert ant-alert-warning ant-alert-banner"
-    data-show="true"
-  >
-    <i
-      class="anticon anticon-exclamation-circle ant-alert-icon"
-    />
-    <span
-      class="ant-alert-message"
-    >
-      Very long warning text warning text text text text text text text
-    </span>
-    <span
-      class="ant-alert-description"
-    />
-    <a
-      class="ant-alert-close-icon"
-    >
-      <i
-        class="anticon anticon-cross"
-      />
-    </a>
-  </div>
-  <br />
-  <div
-    class="ant-alert ant-alert-warning ant-alert-no-icon ant-alert-banner"
-    data-show="true"
-  >
-    <span
-      class="ant-alert-message"
-    >
-      Warning text without icon
-    </span>
-    <span
-      class="ant-alert-description"
-    />
-  </div>
-  <br />
-  <div
-    class="ant-alert ant-alert-error ant-alert-banner"
-    data-show="true"
-  >
-    <i
-      class="anticon anticon-cross-circle ant-alert-icon"
-    />
-    <span
-      class="ant-alert-message"
-    >
-      Error text
-    </span>
-    <span
-      class="ant-alert-description"
-    />
-  </div>
-</div>
-`;
-
-exports[`renders ./components/alert/demo/basic.md correctly 1`] = `
-<div
-  class="ant-alert ant-alert-success ant-alert-no-icon"
-  data-show="true"
->
-  <span
-    class="ant-alert-message"
-  >
-    Success Text
-  </span>
-  <span
-    class="ant-alert-description"
-  />
-</div>
-`;
-
-exports[`renders ./components/alert/demo/closable.md correctly 1`] = `
-<div>
-  <div
-    class="ant-alert ant-alert-warning ant-alert-no-icon"
-    data-show="true"
-  >
-    <span
-      class="ant-alert-message"
-    >
-      Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text
-    </span>
-    <span
-      class="ant-alert-description"
-    />
-    <a
-      class="ant-alert-close-icon"
-    >
-      <i
-        class="anticon anticon-cross"
-      />
-    </a>
-  </div>
-  <div
-    class="ant-alert ant-alert-error ant-alert-with-description ant-alert-no-icon"
-    data-show="true"
-  >
-    <span
-      class="ant-alert-message"
-    >
-      Error Text
-    </span>
-    <span
-      class="ant-alert-description"
-    >
-      Error Description Error Description Error Description Error Description Error Description Error Description
-    </span>
-    <a
-      class="ant-alert-close-icon"
-    >
-      <i
-        class="anticon anticon-cross"
-      />
-    </a>
-  </div>
-</div>
-`;
-
-exports[`renders ./components/alert/demo/close-text.md correctly 1`] = `
-<div
-  class="ant-alert ant-alert-info ant-alert-no-icon"
-  data-show="true"
->
-  <span
-    class="ant-alert-message"
-  >
-    Info Text
-  </span>
-  <span
-    class="ant-alert-description"
-  />
-  <a
-    class="ant-alert-close-icon"
-  >
-    Close Now
-  </a>
-</div>
-`;
-
-exports[`renders ./components/alert/demo/description.md correctly 1`] = `
-<div>
-  <div
-    class="ant-alert ant-alert-success ant-alert-with-description ant-alert-no-icon"
-    data-show="true"
-  >
-    <span
-      class="ant-alert-message"
-    >
-      Success Text
-    </span>
-    <span
-      class="ant-alert-description"
-    >
-      Success Description Success Description Success Description
-    </span>
-  </div>
-  <div
-    class="ant-alert ant-alert-info ant-alert-with-description ant-alert-no-icon"
-    data-show="true"
-  >
-    <span
-      class="ant-alert-message"
-    >
-      Info Text
-    </span>
-    <span
-      class="ant-alert-description"
-    >
-      Info Description Info Description Info Description Info Description
-    </span>
-  </div>
-  <div
-    class="ant-alert ant-alert-warning ant-alert-with-description ant-alert-no-icon"
-    data-show="true"
-  >
-    <span
-      class="ant-alert-message"
-    >
-      Warning Text
-    </span>
-    <span
-      class="ant-alert-description"
-    >
-      Warning Description Warning Description Warning Description Warning Description
-    </span>
-  </div>
-  <div
-    class="ant-alert ant-alert-error ant-alert-with-description ant-alert-no-icon"
-    data-show="true"
-  >
-    <span
-      class="ant-alert-message"
-    >
-      Error Text
-    </span>
-    <span
-      class="ant-alert-description"
-    >
-      Error Description Error Description Error Description Error Description
-    </span>
-  </div>
-</div>
-`;
-
-exports[`renders ./components/alert/demo/icon.md correctly 1`] = `
-<div>
-  <div
-    class="ant-alert ant-alert-success"
-    data-show="true"
-  >
-    <i
-      class="anticon anticon-check-circle ant-alert-icon"
-    />
-    <span
-      class="ant-alert-message"
-    >
-      Success Tips
-    </span>
-    <span
-      class="ant-alert-description"
-    />
-  </div>
-  <div
-    class="ant-alert ant-alert-info"
-    data-show="true"
-  >
-    <i
-      class="anticon anticon-info-circle ant-alert-icon"
-    />
-    <span
-      class="ant-alert-message"
-    >
-      Informational Notes
-    </span>
-    <span
-      class="ant-alert-description"
-    />
-  </div>
-  <div
-    class="ant-alert ant-alert-warning"
-    data-show="true"
-  >
-    <i
-      class="anticon anticon-exclamation-circle ant-alert-icon"
-    />
-    <span
-      class="ant-alert-message"
-    >
-      Warning
-    </span>
-    <span
-      class="ant-alert-description"
-    />
-  </div>
-  <div
-    class="ant-alert ant-alert-error"
-    data-show="true"
-  >
-    <i
-      class="anticon anticon-cross-circle ant-alert-icon"
-    />
-    <span
-      class="ant-alert-message"
-    >
-      Error
-    </span>
-    <span
-      class="ant-alert-description"
-    />
-  </div>
-  <div
-    class="ant-alert ant-alert-success ant-alert-with-description"
-    data-show="true"
-  >
-    <i
-      class="anticon anticon-check-circle-o ant-alert-icon"
-    />
-    <span
-      class="ant-alert-message"
-    >
-      success tips
-    </span>
-    <span
-      class="ant-alert-description"
-    >
-      Detailed description and advices about successful copywriting.
-    </span>
-  </div>
-  <div
-    class="ant-alert ant-alert-info ant-alert-with-description"
-    data-show="true"
-  >
-    <i
-      class="anticon anticon-info-circle-o ant-alert-icon"
-    />
-    <span
-      class="ant-alert-message"
-    >
-      Informational Notes
-    </span>
-    <span
-      class="ant-alert-description"
-    >
-      Additional description and informations about copywriting.
-    </span>
-  </div>
-  <div
-    class="ant-alert ant-alert-warning ant-alert-with-description"
-    data-show="true"
-  >
-    <i
-      class="anticon anticon-exclamation-circle-o ant-alert-icon"
-    />
-    <span
-      class="ant-alert-message"
-    >
-      Warning
-    </span>
-    <span
-      class="ant-alert-description"
-    >
-      This is a warning notice about copywriting.
-    </span>
-  </div>
-  <div
-    class="ant-alert ant-alert-error ant-alert-with-description"
-    data-show="true"
-  >
-    <i
-      class="anticon anticon-cross-circle-o ant-alert-icon"
-    />
-    <span
-      class="ant-alert-message"
-    >
-      Error
-    </span>
-    <span
-      class="ant-alert-description"
-    >
-      This is an error message about copywriting.
-    </span>
-  </div>
-</div>
-`;
-
-exports[`renders ./components/alert/demo/style.md correctly 1`] = `
-<div>
-  <div
-    class="ant-alert ant-alert-success ant-alert-no-icon"
-    data-show="true"
-  >
-    <span
-      class="ant-alert-message"
-    >
-      Success Text
-    </span>
-    <span
-      class="ant-alert-description"
-    />
-  </div>
-  <div
-    class="ant-alert ant-alert-info ant-alert-no-icon"
-    data-show="true"
-  >
-    <span
-      class="ant-alert-message"
-    >
-      Info Text
-    </span>
-    <span
-      class="ant-alert-description"
-    />
-  </div>
-  <div
-    class="ant-alert ant-alert-warning ant-alert-no-icon"
-    data-show="true"
-  >
-    <span
-      class="ant-alert-message"
-    >
-      Warning Text
-    </span>
-    <span
-      class="ant-alert-description"
-    />
-  </div>
-  <div
-    class="ant-alert ant-alert-error ant-alert-no-icon"
-    data-show="true"
-  >
-    <span
-      class="ant-alert-message"
-    >
-      Error Text
-    </span>
-    <span
-      class="ant-alert-description"
-    />
-  </div>
-</div>
-`;
--- a/components/alert/tests/demo.test.js
+++ b/components/alert/tests/demo.test.js
@@ -1,3 +0,0 @@
-import demoTest from '../../../tests/shared/demoTest';
-
-demoTest('alert');
--- a/components/alert/demo/banner.md
+++ b/components/alert/demo/banner.md
@@ -1,6 +1,5 @@
 ---
 order: 6
-iframe: 250
 title:
  zh-CN: 顶部公告
  en-US: Banner
@@ -8,11 +7,11 @@ title:

 ## zh-CN

-页面顶部通告形式，默认有图标且`type` 为 'warning'。
+用作顶部公告时，默认有图标，`type` 为 'warning'，并有特殊样式。

 ## en-US

-Display Alert as a banner at top of page.
+When `Alert` is used as banner, it has particular style, Icon and `type`(warning) are specified by default.

 ````jsx
 import { Alert } from 'antd';
@@ -22,10 +21,6 @@ ReactDOM.render(
    <Alert message="Warning text" banner />
    <br />
    <Alert message="Very long warning text warning text text text text text text text" banner closable />
-    <br />
-    <Alert showIcon={false} message="Warning text without icon" banner />
-    <br />
-    <Alert type="error" message="Error text" banner />
  </div>
 , mountNode);
 ````
--- a/components/alert/demo/basic.md
+++ b/components/alert/demo/basic.md
@@ -20,9 +20,3 @@ ReactDOM.render(
  <Alert message="Success Text" type="success" />
 , mountNode);
 ````
-
-<style>
-.ant-alert {
-  margin-bottom: 16px;
-}
-</style>
--- a/components/alert/index.en-US.md
+++ b/components/alert/index.en-US.md
@@ -1,6 +1,6 @@
 ---
 category: Components
-type: Feedback
+type: Views
 title: Alert
 ---

@@ -8,18 +8,18 @@ Alert component for feedback.

 ## When To Use

- When you need to show alert messages to users.
- When you need a persistent static container which is closable by user actions.
+- When you need to show alert messages for users.
+- When you need a persist static container, and closable by user actions.

 ## API

 | Property   | Description                                               | Type       | Default |
 |----------- |---------------------------------------------------------  | ---------- |-------|
-| type       | Type of Alert styles, options: `success`, `info`, `warning`, `error` | string | `info`, in `banner` mode default is `warning` |
-| closable   | Whether Alert can be closed | boolean | - |
-| closeText  | Close text to show | string\|ReactNode | - |
-| message    | Content of Alert | string\|ReactNode | - |
-| description | Additional content of Alert | string\|ReactNode | - |
-| onClose    | Callback when Alert is closed | Function | - |
-| showIcon   | Whether to show icon | boolean | false, in `banner` mode default is true |
-| banner   | Whether to show as banner | boolean | false |
+| type       | Type of Alert styles, options:`success`, `info`, `warning`, `error` | String | `info` |
+| closable   | Whether Alert can be closed | Boolean | - |
+| closeText  | Close text to show | React.Node | - |
+| message    | Content of Alert | React.Node | - |
+| description | Additional content of Alert | React.Node | - |
+| onClose    | Callback when close Alert | Function | - |
+| showIcon   | Whether to show icon | Boolean | false |
+| banner   | Whether to show as banner | Boolean | false |
--- a/components/alert/index.tsx
+++ b/components/alert/index.tsx
@@ -4,7 +4,7 @@ import Animate from 'rc-animate';
 import Icon from '../icon';
 import classNames from 'classnames';

-function noop() { }
+function noop() {}

 export interface AlertProps {
  /**
@@ -20,7 +20,7 @@ export interface AlertProps {
  /** Additional content of Alert */
  description?: React.ReactNode;
  /** Callback when close Alert */
-  onClose?: React.MouseEventHandler<HTMLAnchorElement>;
+  onClose?: React.MouseEventHandler<any>;
  /** Whether to show icon */
  showIcon?: boolean;
  style?: React.CSSProperties;
@@ -30,14 +30,17 @@ export interface AlertProps {
 }

 export default class Alert extends React.Component<AlertProps, any> {
-  constructor(props: AlertProps) {
+  static defaultProps = {
+    type: 'info',
+  };
+  constructor(props) {
    super(props);
    this.state = {
      closing: true,
      closed: false,
    };
  }
-  handleClose = (e: React.MouseEvent<HTMLAnchorElement>) => {
+  handleClose = (e) => {
    e.preventDefault();
    let dom = ReactDOM.findDOMNode(this) as HTMLElement;
    dom.style.height = `${dom.offsetHeight}px`;
@@ -63,9 +66,9 @@ export default class Alert extends React.Component<AlertProps, any> {
    } = this.props;

    // banner模式默认有 Icon
-    showIcon = banner && showIcon === undefined ? true : showIcon;
+    showIcon = showIcon || banner;
    // banner模式默认为警告
-    type = banner && type === undefined ? 'warning' : type || 'info';
+    type = banner ? 'warning' : type;

    let iconType = '';
    switch (type) {
@@ -90,25 +93,21 @@ export default class Alert extends React.Component<AlertProps, any> {
      iconType += '-o';
    }

-    let alertCls = classNames(prefixCls, {
+    let alertCls = classNames({
+      [prefixCls]: true,
      [`${prefixCls}-${type}`]: true,
      [`${prefixCls}-close`]: !this.state.closing,
      [`${prefixCls}-with-description`]: !!description,
      [`${prefixCls}-no-icon`]: !showIcon,
      [`${prefixCls}-banner`]: !!banner,
-    }, className);
+      [className]: !!className,
+    });

    // closeable when closeText is assigned
    if (closeText) {
      closable = true;
    }

-    const closeIcon = closable ? (
-      <a onClick={this.handleClose} className={`${prefixCls}-close-icon`}>
-        {closeText || <Icon type="cross" />}
-      </a>
-    ) : null;
-
    return this.state.closed ? null : (
      <Animate
        component=""
@@ -120,7 +119,9 @@ export default class Alert extends React.Component<AlertProps, any> {
          {showIcon ? <Icon className={`${prefixCls}-icon`} type={iconType} /> : null}
          <span className={`${prefixCls}-message`}>{message}</span>
          <span className={`${prefixCls}-description`}>{description}</span>
-          {closeIcon}
+          {closable ? <a onClick={this.handleClose} className={`${prefixCls}-close-icon`}>
+            {closeText || <Icon type="cross" />}
+          </a> : null}
        </div>
      </Animate>
    );
--- a/components/alert/index.zh-CN.md
+++ b/components/alert/index.zh-CN.md
@@ -1,7 +1,7 @@
 ---
 category: Components
 subtitle: 警告提示
-type: Feedback
+type: Views
 title: Alert
 ---

@@ -16,11 +16,12 @@ title: Alert

 | 参数        | 说明                                                      | 类型        | 默认值 |
 |----------- |---------------------------------------------------------  | ---------- |-------|
-| type       | 指定警告提示的样式，有四种选择 `success`、`info`、`warning`、`error`   | string     | `info`，`banner` 模式下默认值为 `warning`    |
-| closable   | 默认不显示关闭按钮                                  | boolean   | 无    |
-| closeText  | 自定义关闭按钮                                     | string\|ReactNode   | 无    |
-| message    | 警告提示内容                                       | string\|ReactNode   | 无    |
-| description | 警告提示的辅助性文字介绍                            | string\|ReactNode   | 无    |
+| type       | 指定警告提示的样式，有四种选择 `success`、`info`、`warning`、`error`   | String     | `info`    |
+| closable   | 默认不显示关闭按钮                                  | Boolean   | 无    |
+| closeText  | 自定义关闭按钮                                     | React.Node   | 无    |
+| message    | 警告提示内容                                       | React.Node   | 无    |
+| description | 警告提示的辅助性文字介绍                            | React.Node   | 无    |
 | onClose     | 关闭时触发的回调函数                                | Function   | 无    |
-| showIcon   | 是否显示辅助图标                                 | boolean   | false，`banner` 模式下默认值为 true    |
-| banner   | 是否用作顶部公告                                 | boolean   | false    |
+| showIcon   | 是否显示辅助图标                                 | Boolean   | false    |
+| banner   | 是否用作顶部公告                                 | Boolean   | false    |
+
--- a/components/alert/style/index.less
+++ b/components/alert/style/index.less
@@ -2,24 +2,22 @@

@alert-prefix-cls: ~"@{ant-prefix}-alert";

-@alert-message-color: @heading-color;
-@alert-text-color: @text-color;
-
 .@{alert-prefix-cls} {
  position: relative;
  padding: 8px 48px 8px 38px;
  border-radius: @border-radius-base;
-  color: @alert-text-color;
+  color: @text-color;
  font-size: @font-size-base;
-  line-height: @line-height-base;
+  line-height: 16px;
+  margin-bottom: 10px;

  &&-no-icon {
    padding: 8px 48px 8px 16px;
  }

  &-icon {
-    font-size: @font-size-lg;
-    top: 8px + @font-size-base * @line-height-base / 2 - @font-size-lg / 2;
+    font-size: 14px;
+    top: 9px;
    left: 16px;
    position: absolute;
  }
@@ -31,32 +29,32 @@
  }

  &-success {
-    border: @border-width-base @border-style-base @green-2;
-    background-color: @green-1;
+    border: 1px solid tint(@success-color, 80%);
+    background-color: tint(@success-color, 90%);
    .@{alert-prefix-cls}-icon {
      color: @success-color;
    }
  }

  &-info {
-    border: @border-width-base @border-style-base @primary-2;
-    background-color: @primary-1;
+    border: 1px solid tint(@primary-color, 80%);
+    background-color: tint(@primary-color, 90%);
    .@{alert-prefix-cls}-icon {
-      color: @info-color;
+      color: @primary-color;
    }
  }

  &-warning {
-    border: @border-width-base @border-style-base @yellow-2;
-    background-color: @yellow-1;
+    border: 1px solid tint(@warning-color, 80%);
+    background-color: tint(@warning-color, 90%);
    .@{alert-prefix-cls}-icon {
      color: @warning-color;
    }
  }

  &-error {
-    border: @border-width-base @border-style-base @red-2;
-    background-color: @red-1;
+    border: 1px solid tint(@error-color, 80%);
+    background-color: tint(@error-color, 90%);
    .@{alert-prefix-cls}-icon {
      color: @error-color;
    }
@@ -73,7 +71,7 @@
    cursor: pointer;

    .@{iconfont-css-prefix}-cross {
-      color: @text-color-secondary;
+      color: @legend-color;
      transition: color .3s ease;
      &:hover {
        color: #404040;
@@ -90,6 +88,7 @@
    padding: 16px 16px 16px 60px;
    position: relative;
    border-radius: @border-radius-base;
+    margin-bottom: 10px;
    color: @text-color;
    line-height: 1.5;
  }
@@ -114,8 +113,8 @@
  }

  &-with-description &-message {
-    font-size: @font-size-lg;
-    color: @alert-message-color;
+    font-size: 14px;
+    color: @heading-color;
    display: block;
    margin-bottom: 4px;
  }
--- a/components/anchor/Anchor.tsx
+++ b/components/anchor/Anchor.tsx
@@ -1,244 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import addEventListener from 'rc-util/lib/Dom/addEventListener';
-import Affix from '../affix';
-import AnchorLink from './AnchorLink';
-import getScroll from '../_util/getScroll';
-import getRequestAnimationFrame from '../_util/getRequestAnimationFrame';
-
-function getDefaultTarget() {
-  return window;
-}
-
-function getOffsetTop(element: HTMLElement): number {
-  if (!element) {
-    return 0;
-  }
-
-  if (!element.getClientRects().length) {
-    return 0;
-  }
-
-  const rect = element.getBoundingClientRect();
-
-  if (rect.width || rect.height) {
-    const doc = element.ownerDocument;
-    const docElem = doc.documentElement;
-    return rect.top - docElem.clientTop;
-  }
-
-  return rect.top;
-}
-
-function easeInOutCubic(t: number, b: number, c: number, d: number) {
-  const cc = c - b;
-  t /= d / 2;
-  if (t < 1) {
-    return cc / 2 * t * t * t + b;
-  }
-  return cc / 2 * ((t -= 2) * t * t + 2) + b;
-}
-
-const reqAnimFrame = getRequestAnimationFrame();
-function scrollTo(href: string, offsetTop = 0, target, callback = () => { }) {
-  const scrollTop = getScroll(target(), true);
-  const targetElement = document.getElementById(href.substring(1));
-  if (!targetElement) {
-    return;
-  }
-  const eleOffsetTop = getOffsetTop(targetElement);
-  const targetScrollTop = scrollTop + eleOffsetTop - offsetTop;
-  const startTime = Date.now();
-  const frameFunc = () => {
-    const timestamp = Date.now();
-    const time = timestamp - startTime;
-    window.scrollTo(window.pageXOffset, easeInOutCubic(time, scrollTop, targetScrollTop, 450));
-    if (time < 450) {
-      reqAnimFrame(frameFunc);
-    } else {
-      callback();
-    }
-  };
-  reqAnimFrame(frameFunc);
-  history.pushState(null, '', href);
-}
-
-type Section = {
-  link: String;
-  top: number;
-};
-
-export interface AnchorProps {
-  prefixCls?: string;
-  className?: string;
-  style?: React.CSSProperties;
-  children?: React.ReactNode;
-  offsetTop?: number;
-  bounds?: number;
-  affix?: boolean;
-  showInkInFixed?: boolean;
-  target?: () => HTMLElement | Window;
-}
-
-export default class Anchor extends React.Component<AnchorProps, any> {
-  static Link: typeof AnchorLink;
-
-  static defaultProps = {
-    prefixCls: 'ant-anchor',
-    affix: true,
-    showInkInFixed: false,
-  };
-
-  static childContextTypes = {
-    antAnchor: PropTypes.object,
-  };
-
-  refs: {
-    ink?: any;
-  };
-
-  private links: String[];
-  private scrollEvent: any;
-  private animating: boolean;
-
-  constructor(props: AnchorProps) {
-    super(props);
-    this.state = {
-      activeLink: null,
-    };
-    this.links = [];
-  }
-
-  getChildContext() {
-    return {
-      antAnchor: {
-        registerLink: (link: String) => {
-          if (!this.links.includes(link)) {
-            this.links.push(link);
-          }
-        },
-        unregisterLink: (link: String) => {
-          const index = this.links.indexOf(link);
-          if (index !== -1) {
-            this.links.splice(index, 1);
-          }
-        },
-        activeLink: this.state.activeLink,
-        scrollTo: this.handleScrollTo,
-      },
-    };
-  }
-
-  componentDidMount() {
-    const getTarget = this.props.target || getDefaultTarget;
-    this.scrollEvent = addEventListener(getTarget(), 'scroll', this.handleScroll);
-    this.handleScroll();
-  }
-
-  componentWillUnmount() {
-    if (this.scrollEvent) {
-      this.scrollEvent.remove();
-    }
-  }
-
-  componentDidUpdate() {
-    this.updateInk();
-  }
-
-  handleScroll = () => {
-    if (this.animating) {
-      return;
-    }
-    const { offsetTop, bounds } = this.props;
-    this.setState({
-      activeLink: this.getCurrentAnchor(offsetTop, bounds),
-    });
-  }
-
-  handleScrollTo = (link) => {
-    const { offsetTop, target = getDefaultTarget } = this.props;
-    this.animating = true;
-    this.setState({ activeLink: link });
-    scrollTo(link, offsetTop, target, () => {
-      this.animating = false;
-    });
-  }
-
-  getCurrentAnchor(offsetTop = 0, bounds = 5) {
-    let activeLink = '';
-    if (typeof document === 'undefined') {
-      return activeLink;
-    }
-
-    const linkSections: Array<Section> = [];
-    this.links.forEach(link => {
-      const target = document.getElementById(link.substring(1));
-      if (target && getOffsetTop(target) < offsetTop + bounds) {
-        const top = getOffsetTop(target);
-        linkSections.push({
-          link,
-          top,
-        });
-      }
-    });
-
-    if (linkSections.length) {
-      const maxSection = linkSections.reduce((prev, curr) => curr.top > prev.top ? curr : prev);
-      return maxSection.link;
-    }
-    return '';
-  }
-
-  updateInk = () => {
-    if (typeof document === 'undefined') {
-      return;
-    }
-    const { prefixCls } = this.props;
-    const linkNode = ReactDOM.findDOMNode(this as any).getElementsByClassName(`${prefixCls}-link-title-active`)[0];
-    if (linkNode) {
-      this.refs.ink.style.top = `${(linkNode as any).offsetTop + linkNode.clientHeight / 2 - 4.5}px`;
-    }
-  }
-
-  render() {
-    const {
-      prefixCls,
-      className = '',
-      style,
-      offsetTop,
-      affix,
-      showInkInFixed,
-      children,
-    } = this.props;
-    const { activeLink } = this.state;
-
-    const inkClass = classNames(`${prefixCls}-ink-ball`, {
-      visible: activeLink,
-    });
-
-    const wrapperClass = classNames(className, `${prefixCls}-wrapper`);
-
-    const anchorClass = classNames(prefixCls, {
-      'fixed': !affix && !showInkInFixed,
-    });
-
-    const anchorContent = (
-      <div className={wrapperClass} style={style}>
-        <div className={anchorClass}>
-          <div className={`${prefixCls}-ink`} >
-            <span className={inkClass} ref="ink" />
-          </div>
-          {children}
-        </div>
-      </div>
-    );
-
-    return !affix ? anchorContent : (
-      <Affix offsetTop={offsetTop}>
-        {anchorContent}
-      </Affix>
-    );
-  }
-}
--- a/components/anchor/AnchorLink.tsx
+++ b/components/anchor/AnchorLink.tsx
@@ -1,66 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-export interface AnchorLinkProps {
-  prefixCls?: string;
-  href: string;
-  title: React.ReactNode;
-  children?: any;
-}
-
-export default class AnchorLink extends React.Component<AnchorLinkProps, any> {
-  static defaultProps = {
-    prefixCls: 'ant-anchor',
-    href: '#',
-  };
-
-  static contextTypes = {
-    antAnchor: PropTypes.object,
-  };
-
-  context: {
-    antAnchor: any;
-  };
-
-  componentDidMount() {
-    this.context.antAnchor.registerLink(this.props.href);
-  }
-
-  componentWillUnmount() {
-    this.context.antAnchor.unregisterLink(this.props.href);
-  }
-
-  handleClick = () => {
-    this.context.antAnchor.scrollTo(this.props.href);
-  }
-
-  render() {
-    const {
-      prefixCls,
-      href,
-      title,
-      children,
-    } = this.props;
-    const active = this.context.antAnchor.activeLink === href;
-    const wrapperClassName = classNames(`${prefixCls}-link`, {
-      [`${prefixCls}-link-active`]: active,
-    });
-    const titleClassName = classNames(`${prefixCls}-link-title`, {
-      [`${prefixCls}-link-title-active`]: active,
-    });
-    return (
-      <div className={wrapperClassName}>
-        <a
-          className={titleClassName}
-          href={href}
-          title={typeof title === 'string' ? title : ''}
-          onClick={this.handleClick}
-        >
-          {title}
-        </a>
-        {children}
-      </div>
-    );
-  }
-}
--- a/components/anchor/tests/Anchor.test.js
+++ b/components/anchor/tests/Anchor.test.js
@@ -1,20 +0,0 @@
-import React from 'react';
-import { mount } from 'enzyme';
-import Anchor from '..';
-
-const { Link } = Anchor;
-
-describe('Anchor Render', () => {
-  it('Anchor render perfectly', () => {
-    const wrapper = mount(
-      <Anchor>
-        <Link href="#API" title="API" />
-      </Anchor>
-    );
-
-    wrapper.find('a[href="#API"]').simulate('click');
-
-    wrapper.node.handleScroll();
-    expect(wrapper.node.state).not.toBe(null);
-  });
-});
--- a/components/anchor/tests/snapshots/demo.test.js.snap
+++ b/components/anchor/tests/snapshots/demo.test.js.snap
@@ -1,153 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders ./components/anchor/demo/basic.md correctly 1`] = `
-<div>
-  <div
-    class=""
-  >
-    <div
-      class="ant-anchor-wrapper"
-    >
-      <div
-        class="ant-anchor"
-      >
-        <div
-          class="ant-anchor-ink"
-        >
-          <span
-            class="ant-anchor-ink-ball"
-          />
-        </div>
-        <div
-          class="ant-anchor-link"
-        >
-          <a
-            class="ant-anchor-link-title"
-            href="#components-anchor-demo-basic"
-            title="Basic demo"
-          >
-            Basic demo
-          </a>
-        </div>
-        <div
-          class="ant-anchor-link"
-        >
-          <a
-            class="ant-anchor-link-title"
-            href="#components-anchor-demo-fixed"
-            title="Fixed demo"
-          >
-            Fixed demo
-          </a>
-        </div>
-        <div
-          class="ant-anchor-link"
-        >
-          <a
-            class="ant-anchor-link-title"
-            href="#API"
-            title="API"
-          >
-            API
-          </a>
-          <div
-            class="ant-anchor-link"
-          >
-            <a
-              class="ant-anchor-link-title"
-              href="#Anchor-Props"
-              title="Anchor Props"
-            >
-              Anchor Props
-            </a>
-          </div>
-          <div
-            class="ant-anchor-link"
-          >
-            <a
-              class="ant-anchor-link-title"
-              href="#Link-Props"
-              title="Link Props"
-            >
-              Link Props
-            </a>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`renders ./components/anchor/demo/fixed.md correctly 1`] = `
-<div
-  class="ant-anchor-wrapper"
->
-  <div
-    class="ant-anchor fixed"
-  >
-    <div
-      class="ant-anchor-ink"
-    >
-      <span
-        class="ant-anchor-ink-ball"
-      />
-    </div>
-    <div
-      class="ant-anchor-link"
-    >
-      <a
-        class="ant-anchor-link-title"
-        href="#components-anchor-demo-basic"
-        title="Basic demo"
-      >
-        Basic demo
-      </a>
-    </div>
-    <div
-      class="ant-anchor-link"
-    >
-      <a
-        class="ant-anchor-link-title"
-        href="#components-anchor-demo-fixed"
-        title="Fixed demo"
-      >
-        Fixed demo
-      </a>
-    </div>
-    <div
-      class="ant-anchor-link"
-    >
-      <a
-        class="ant-anchor-link-title"
-        href="#API"
-        title="API"
-      >
-        API
-      </a>
-      <div
-        class="ant-anchor-link"
-      >
-        <a
-          class="ant-anchor-link-title"
-          href="#Anchor-Props"
-          title="Anchor Props"
-        >
-          Anchor Props
-        </a>
-      </div>
-      <div
-        class="ant-anchor-link"
-      >
-        <a
-          class="ant-anchor-link-title"
-          href="#Link-Props"
-          title="Link Props"
-        >
-          Link Props
-        </a>
-      </div>
-    </div>
-  </div>
-</div>
-`;
--- a/components/anchor/tests/demo.test.js
+++ b/components/anchor/tests/demo.test.js
@@ -1,3 +0,0 @@
-import demoTest from '../../../tests/shared/demoTest';
-
-demoTest('anchor');
--- a/components/anchor/demo/basic.md
+++ b/components/anchor/demo/basic.md
@@ -1,36 +0,0 @@
---
-order: 0
-title:
-  zh-CN: 基本
-  en-US: Basic
---
-
-## zh-CN
-
-最简单的用法。
-
-## en-US
-
-The simplest usage.
-
-```jsx
-import { Anchor } from 'antd';
-const { Link } = Anchor;
-
-ReactDOM.render(
-  <Anchor>
-    <Link href="#components-anchor-demo-basic" title="Basic demo" />
-    <Link href="#components-anchor-demo-fixed" title="Fixed demo" />
-    <Link href="#API" title="API">
-      <Link href="#Anchor-Props" title="Anchor Props" />
-      <Link href="#Link-Props" title="Link Props" />
-    </Link>
-  </Anchor>
-, mountNode);
-```
-
-<style>
-.code-box-demo .ant-affix {
-  z-index: 11;
-}
-</style>
--- a/components/anchor/demo/fixed.md
+++ b/components/anchor/demo/fixed.md
@@ -1,30 +0,0 @@
---
-order: 2
-title:
-  zh-CN: 固定
-  en-US: Fixed Anchor
---
-
-## zh-CN
-
-不浮动，状态不随页面滚动变化。
-
-## en-US
-
-Do not change state when page is scrolling.
-
-```jsx
-import { Anchor } from 'antd';
-const { Link } = Anchor;
-
-ReactDOM.render(
-  <Anchor affix={false}>
-    <Link href="#components-anchor-demo-basic" title="Basic demo" />
-    <Link href="#components-anchor-demo-fixed" title="Fixed demo" />
-    <Link href="#API" title="API">
-      <Link href="#Anchor-Props" title="Anchor Props" />
-      <Link href="#Link-Props" title="Link Props" />
-    </Link>
-  </Anchor>
-, mountNode);
-```
--- a/components/anchor/index.en-US.md
+++ b/components/anchor/index.en-US.md
@@ -1,31 +0,0 @@
---
-category: Components
-type: Other
-cols: 2
-title: Anchor
---
-
-Hyperlinks to scroll on one page.
-
-## When To Use
-
-For displaying anchor hyperlinks on page and jumping between them.
-
-## API
-
-### Anchor Props
-
-| Property     | Description           | Type     | Default      |
-|--------------|-----------------------|----------|--------------|
-| offsetTop    | Pixels to offset from top when calculating position of scroll | number | 0 |
-| offsetBottom | Pixels to offset from bottom when calculating position of scroll | number | - |
-| bounds     | Bounding distance of anchor area | number | 5(px) |
-| affix | Fixed mode of Anchor | boolean | false |
-| showInkInFixed | Whether show ink-balls in Fixed mode | boolean | false |
-
-### Link Props
-
-| Property        | Description           | Type               | Default       |
-|-------------|----------------|--------------------|--------------|
-| href    | target of hyperlink  | string |         |
-| title | content of  hyperlink | string\|ReactNode |         |
--- a/components/anchor/index.tsx
+++ b/components/anchor/index.tsx
@@ -1,5 +0,0 @@
-import Anchor from './Anchor';
-import AnchorLink from './AnchorLink';
-
-Anchor.Link = AnchorLink;
-export default Anchor;
--- a/components/anchor/index.zh-CN.md
+++ b/components/anchor/index.zh-CN.md
@@ -1,32 +0,0 @@
---
-category: Components
-subtitle: 锚点
-cols: 2
-type: Other
-title: Anchor
---
-
-用于跳转到页面指定位置。
-
-## 何时使用
-
-需要展现当前页面上可供跳转的锚点链接，以及快速在锚点之间跳转。
-
-## API
-
-### Anchor Props
-
-| 成员        | 说明           | 类型               | 默认值       |
-|-------------|----------------|--------------------|--------------|
-| offsetTop    | 距离窗口顶部达到指定偏移量后触发   | number |         |
-| offsetBottom | 距离窗口底部达到指定偏移量后触发   | number |         |
-| bounds | 锚点区域边界 | number | 5(px) |
-| affix | 固定模式 | boolean | false |
-| showInkInFixed | 固定模式是否显示小圆点 | boolean | false |
-
-### Link Props
-
-| 成员        | 说明           | 类型               | 默认值       |
-|-------------|----------------|--------------------|--------------|
-| href    | 锚点链接   | string |         |
-| title | 文字内容   | string\|ReactNode |         |
--- a/components/anchor/style/index.less
+++ b/components/anchor/style/index.less
@@ -1,72 +0,0 @@
-@import "../../style/themes/default";
-
-.@{ant-prefix}-anchor {
-  position: relative;
-  &-wrapper {
-    background-color: @component-background;
-  }
-
-  &-ink {
-    position: absolute;
-    height: 100%;
-    left: 0;
-    top: 0;
-    &:before {
-      content: ' ';
-      position: relative;
-      width: 2px;
-      height: 100%;
-      display: block;
-      background-color: @border-color-split;
-      margin: 0 auto;
-    }
-    &-ball {
-      display: none;
-      position: absolute;
-      width: 9px;
-      height: 9px;
-      border-radius: 9px;
-      border: 3px solid @primary-color;
-      background-color: @component-background;
-      left: 50%;
-      transition: top .3s ease-in-out;
-      transform: translateX(-50%);
-      &.visible {
-        display: inline-block;
-      }
-    }
-  }
-
-  &.fixed &-ink &-ink-ball {
-    display: none;
-  }
-
-  &-link {
-    padding: 8px 0 8px 18px;
-    line-height: 1;
-
-    &-title {
-      display: block;
-      position: relative;
-      transition: all .3s;
-      color: @text-color;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      margin-bottom: 8px;
-
-      &:only-child {
-        margin-bottom: 0;
-      }
-    }
-
-    &-active > &-title {
-      color: @primary-color;
-    }
-  }
-
-  &-link &-link {
-    padding-top: 6px;
-    padding-bottom: 6px;
-  }
-}
--- a/components/anchor/style/index.tsx
+++ b/components/anchor/style/index.tsx
@@ -1,2 +0,0 @@
-import '../../style/index.less';
-import './index.less';
--- a/components/auto-complete/InputElement.tsx
+++ b/components/auto-complete/InputElement.tsx
@@ -1,26 +0,0 @@
-import React from 'react';
-import { findDOMNode } from 'react-dom';
-
-export default class InputElement extends React.Component<any, any> {
-  private ele: HTMLInputElement;
-
-  focus = () => {
-    this.ele.focus ? this.ele.focus() : (findDOMNode(this.ele) as HTMLInputElement).focus();
-  }
-  blur = () => {
-    this.ele.blur ? this.ele.blur() : (findDOMNode(this.ele) as HTMLInputElement).blur();
-  }
-  saveRef = (ele: HTMLInputElement) => {
-    this.ele = ele;
-    const childRef = this.props.children.ref;
-    if (typeof childRef === 'function') {
-      childRef(ele);
-    }
-  }
-  render() {
-    return React.cloneElement(this.props.children, {
-      ...this.props,
-      ref: this.saveRef,
-    }, null);
-  }
-}
--- a/components/auto-complete/tests/snapshots/demo.test.js.snap
+++ b/components/auto-complete/tests/snapshots/demo.test.js.snap
@@ -1,367 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders ./components/auto-complete/demo/antd.md correctly 1`] = `
-<div
-  class="ant-select-show-search ant-select-auto-complete ant-select ant-select-combobox ant-select-enabled"
-  style="width:200px;height:50px;"
->
-  <div
-    aria-autocomplete="list"
-    aria-expanded="false"
-    aria-haspopup="true"
-    class="ant-select-selection
-              ant-select-selection--single"
-    role="combobox"
-  >
-    <div
-      class="ant-select-selection__rendered"
-    >
-      <div
-        class="ant-select-selection__placeholder"
-        style="display:block;user-select:none;-webkit-user-select:none;"
-        unselectable="unselectable"
-      >
-        input here
-      </div>
-      <ul>
-        <li
-          class="ant-select-search ant-select-search--inline"
-        >
-          <div
-            class="ant-select-search__field__wrap"
-          >
-            <textarea
-              class="ant-input ant-select-search__field"
-              style="height:50px;"
-            />
-            <span
-              class="ant-select-search__field__mirror"
-            >
-               
-            </span>
-          </div>
-        </li>
-      </ul>
-    </div>
-    <span
-      class="ant-select-arrow"
-      style="user-select:none;-webkit-user-select:none;"
-      unselectable="unselectable"
-    >
-      <b />
-    </span>
-  </div>
-</div>
-`;
-
-exports[`renders ./components/auto-complete/demo/basic.md correctly 1`] = `
-<div
-  class="ant-select-show-search ant-select-auto-complete ant-select ant-select-combobox ant-select-enabled"
-  style="width:200px;"
->
-  <div
-    aria-autocomplete="list"
-    aria-expanded="false"
-    aria-haspopup="true"
-    class="ant-select-selection
-              ant-select-selection--single"
-    role="combobox"
-  >
-    <div
-      class="ant-select-selection__rendered"
-    >
-      <div
-        class="ant-select-selection__placeholder"
-        style="display:block;user-select:none;-webkit-user-select:none;"
-        unselectable="unselectable"
-      >
-        input here
-      </div>
-      <ul>
-        <li
-          class="ant-select-search ant-select-search--inline"
-        >
-          <div
-            class="ant-select-search__field__wrap"
-          >
-            <input
-              class="ant-input ant-select-search__field"
-              type="text"
-              value=""
-            />
-            <span
-              class="ant-select-search__field__mirror"
-            >
-               
-            </span>
-          </div>
-        </li>
-      </ul>
-    </div>
-    <span
-      class="ant-select-arrow"
-      style="user-select:none;-webkit-user-select:none;"
-      unselectable="unselectable"
-    >
-      <b />
-    </span>
-  </div>
-</div>
-`;
-
-exports[`renders ./components/auto-complete/demo/certain-category.md correctly 1`] = `
-<div
-  class="certain-category-search-wrapper"
-  style="width:250px;"
->
-  <div
-    class="ant-select-lg ant-select-lg certain-category-search ant-select-show-search ant-select-auto-complete ant-select ant-select-combobox ant-select-enabled"
-    style="width:100%;"
-  >
-    <div
-      aria-autocomplete="list"
-      aria-expanded="false"
-      aria-haspopup="true"
-      class="ant-select-selection
-                ant-select-selection--single"
-      role="combobox"
-    >
-      <div
-        class="ant-select-selection__rendered"
-      >
-        <div
-          class="ant-select-selection__placeholder"
-          style="display:block;user-select:none;-webkit-user-select:none;"
-          unselectable="unselectable"
-        >
-          input here
-        </div>
-        <ul>
-          <li
-            class="ant-select-search ant-select-search--inline"
-          >
-            <div
-              class="ant-select-search__field__wrap"
-            >
-              <span
-                class="ant-select-search__field ant-input-affix-wrapper"
-              >
-                <input
-                  class="ant-input"
-                  type="text"
-                  value=""
-                />
-                <span
-                  class="ant-input-suffix"
-                >
-                  <i
-                    class="anticon anticon-search certain-category-icon"
-                  />
-                </span>
-              </span>
-              <span
-                class="ant-select-search__field__mirror"
-              >
-                 
-              </span>
-            </div>
-          </li>
-        </ul>
-      </div>
-      <span
-        class="ant-select-arrow"
-        style="user-select:none;-webkit-user-select:none;"
-        unselectable="unselectable"
-      >
-        <b />
-      </span>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`renders ./components/auto-complete/demo/non-case-sensitive.md correctly 1`] = `
-<div
-  class="ant-select-show-search ant-select-auto-complete ant-select ant-select-combobox ant-select-enabled"
-  style="width:200px;"
->
-  <div
-    aria-autocomplete="list"
-    aria-expanded="false"
-    aria-haspopup="true"
-    class="ant-select-selection
-              ant-select-selection--single"
-    role="combobox"
-  >
-    <div
-      class="ant-select-selection__rendered"
-    >
-      <div
-        class="ant-select-selection__placeholder"
-        style="display:block;user-select:none;-webkit-user-select:none;"
-        unselectable="unselectable"
-      >
-        try to type \`b\`
-      </div>
-      <ul>
-        <li
-          class="ant-select-search ant-select-search--inline"
-        >
-          <div
-            class="ant-select-search__field__wrap"
-          >
-            <input
-              class="ant-input ant-select-search__field"
-              type="text"
-              value=""
-            />
-            <span
-              class="ant-select-search__field__mirror"
-            >
-               
-            </span>
-          </div>
-        </li>
-      </ul>
-    </div>
-    <span
-      class="ant-select-arrow"
-      style="user-select:none;-webkit-user-select:none;"
-      unselectable="unselectable"
-    >
-      <b />
-    </span>
-  </div>
-</div>
-`;
-
-exports[`renders ./components/auto-complete/demo/options.md correctly 1`] = `
-<div
-  class="ant-select-show-search ant-select-auto-complete ant-select ant-select-combobox ant-select-enabled"
-  style="width:200px;"
->
-  <div
-    aria-autocomplete="list"
-    aria-expanded="false"
-    aria-haspopup="true"
-    class="ant-select-selection
-              ant-select-selection--single"
-    role="combobox"
-  >
-    <div
-      class="ant-select-selection__rendered"
-    >
-      <div
-        class="ant-select-selection__placeholder"
-        style="display:block;user-select:none;-webkit-user-select:none;"
-        unselectable="unselectable"
-      >
-        input here
-      </div>
-      <ul>
-        <li
-          class="ant-select-search ant-select-search--inline"
-        >
-          <div
-            class="ant-select-search__field__wrap"
-          >
-            <input
-              class="ant-input ant-select-search__field"
-              type="text"
-              value=""
-            />
-            <span
-              class="ant-select-search__field__mirror"
-            >
-               
-            </span>
-          </div>
-        </li>
-      </ul>
-    </div>
-    <span
-      class="ant-select-arrow"
-      style="user-select:none;-webkit-user-select:none;"
-      unselectable="unselectable"
-    >
-      <b />
-    </span>
-  </div>
-</div>
-`;
-
-exports[`renders ./components/auto-complete/demo/uncertain-category.md correctly 1`] = `
-<div
-  class="global-search-wrapper"
-  style="width:300px;"
->
-  <div
-    class="ant-select-lg ant-select-lg global-search ant-select-show-search ant-select-auto-complete ant-select ant-select-combobox ant-select-enabled"
-    style="width:100%;"
-  >
-    <div
-      aria-autocomplete="list"
-      aria-expanded="false"
-      aria-haspopup="true"
-      class="ant-select-selection
-                ant-select-selection--single"
-      role="combobox"
-    >
-      <div
-        class="ant-select-selection__rendered"
-      >
-        <div
-          class="ant-select-selection__placeholder"
-          style="display:block;user-select:none;-webkit-user-select:none;"
-          unselectable="unselectable"
-        >
-          input here
-        </div>
-        <ul>
-          <li
-            class="ant-select-search ant-select-search--inline"
-          >
-            <div
-              class="ant-select-search__field__wrap"
-            >
-              <span
-                class="ant-select-search__field ant-input-affix-wrapper"
-              >
-                <input
-                  class="ant-input"
-                  type="text"
-                  value=""
-                />
-                <span
-                  class="ant-input-suffix"
-                >
-                  <button
-                    class="ant-btn search-btn ant-btn-primary ant-btn-lg"
-                    type="button"
-                  >
-                    <i
-                      class="anticon anticon-search"
-                    />
-                  </button>
-                </span>
-              </span>
-              <span
-                class="ant-select-search__field__mirror"
-              >
-                 
-              </span>
-            </div>
-          </li>
-        </ul>
-      </div>
-      <span
-        class="ant-select-arrow"
-        style="user-select:none;-webkit-user-select:none;"
-        unselectable="unselectable"
-      >
-        <b />
-      </span>
-    </div>
-  </div>
-</div>
-`;
--- a/components/auto-complete/tests/ac.test.js
+++ b/components/auto-complete/tests/ac.test.js
@@ -1,30 +0,0 @@
-import React from 'react';
-import { mount } from 'enzyme';
-import AutoComplete from '..';
-
-describe('AutoComplete with Custom Input Element Render', () => {
-  it('AutoComplete with custom Input render perfectly', () => {
-    const wrapper = mount(
-      <AutoComplete dataSource={['12345', '23456', '34567']}>
-        <textarea />
-      </AutoComplete>
-    );
-
-    expect(wrapper.find('textarea').length).toBe(1);
-    wrapper.find('textarea').simulate('change', { target: { value: '123' } });
-    const dropdownWrapper = mount(wrapper.find('Trigger').node.getComponent());
-
-    // should not filter data source defaultly
-    expect(dropdownWrapper.find('MenuItem').length).toBe(3);
-  });
-
-  it('child.ref should work', () => {
-    const mockRef = jest.fn();
-    mount(
-      <AutoComplete dataSource={[]}>
-        <input ref={mockRef} />
-      </AutoComplete>
-    );
-    expect(mockRef).toHaveBeenCalled();
-  });
-});
--- a/components/auto-complete/tests/demo.test.js
+++ b/components/auto-complete/tests/demo.test.js
@@ -1,3 +0,0 @@
-import demoTest from '../../../tests/shared/demoTest';
-
-demoTest('auto-complete');
--- a/components/auto-complete/demo/antd.md
+++ b/components/auto-complete/demo/antd.md
@@ -1,60 +0,0 @@
---
-order: 3
-title:
-  zh-CN: 自定义输入组件
-  en-US: Customize Input Component
---
-
-## zh-CN
-
-自定义输入组件。
-
-## en-US
-
-Customize Input Component
-
-````jsx
-import { AutoComplete, Input } from 'antd';
-const { TextArea } = Input;
-
-function onSelect(value) {
-  console.log('onSelect', value);
-}
-
-class Complete extends React.Component {
-  state = {
-    dataSource: [],
-  }
-
-  handleSearch = (value) => {
-    this.setState({
-      dataSource: !value ? [] : [
-        value,
-        value + value,
-        value + value + value,
-      ],
-    });
-  }
-
-  handleKeyPress = (ev) => {
-    console.log('handleKeyPress', ev);
-  }
-
-  render() {
-    const { dataSource } = this.state;
-    return (
-      <AutoComplete
-        dataSource={dataSource}
-        style={{ width: 200, height: 50 }}
-        onSelect={onSelect}
-        onSearch={this.handleSearch}
-        placeholder="input here"
-      >
-        <TextArea onKeyPress={this.handleKeyPress} style={{ height: 50 }} />
-      </AutoComplete>
-    );
-  }
-}
-
-ReactDOM.render(<Complete />, mountNode);
-````
--- a/components/auto-complete/demo/basic.md
+++ b/components/auto-complete/demo/basic.md
@@ -20,12 +20,13 @@ function onSelect(value) {
  console.log('onSelect', value);
 }

-class Complete extends React.Component {
-  state = {
-    dataSource: [],
-  }
-
-  handleSearch = (value) => {
+const Complete = React.createClass({
+  getInitialState() {
+    return {
+      dataSource: [],
+    };
+  },
+  handleChange(value) {
    this.setState({
      dataSource: !value ? [] : [
        value,
@@ -33,8 +34,7 @@ class Complete extends React.Component {
        value + value + value,
      ],
    });
-  }
-
+  },
  render() {
    const { dataSource } = this.state;
    return (
@@ -42,12 +42,11 @@ class Complete extends React.Component {
        dataSource={dataSource}
        style={{ width: 200 }}
        onSelect={onSelect}
-        onSearch={this.handleSearch}
-        placeholder="input here"
+        onChange={this.handleChange}
      />
    );
-  }
-}
+  },
+});

 ReactDOM.render(<Complete />, mountNode);
 ````
--- a/components/auto-complete/demo/certain-category.md
+++ b/components/auto-complete/demo/certain-category.md
@@ -1,152 +0,0 @@
---
-order: 4
-title:
-  zh-CN: 查询模式 - 确定类目
-  en-US: Lookup-Patterns - Certain Category
---
-
-## zh-CN
-
-[查询模式: 确定类目](https://ant.design/docs/spec/reaction#Lookup-Patterns) 示例。
-
-## en-US
-
-Demonstration of [Lookup Patterns: Certain Category](https://ant.design/docs/spec/reaction#Lookup-Patterns).
-Basic Usage, set datasource of autocomplete with `dataSource` property.
-
-````jsx
-import { Icon, Input, AutoComplete } from 'antd';
-const Option = AutoComplete.Option;
-const OptGroup = AutoComplete.OptGroup;
-
-const dataSource = [{
-  title: '话题',
-  children: [{
-    title: 'AntDesign',
-    count: 10000,
-  }, {
-    title: 'AntDesign UI',
-    count: 10600,
-  }],
-}, {
-  title: '问题',
-  children: [{
-    title: 'AntDesign UI 有多好',
-    count: 60100,
-  }, {
-    title: 'AntDesign 是啥',
-    count: 30010,
-  }],
-}, {
-  title: '文章',
-  children: [{
-    title: 'AntDesign 是一个设计语言',
-    count: 100000,
-  }],
-}];
-
-function renderTitle(title) {
-  return (
-    <span>
-      {title}
-      <a
-        style={{ float: 'right' }}
-        href="https://www.google.com/search?q=antd"
-        target="_blank"
-        rel="noopener noreferrer"
-      >更多
-      </a>
-    </span>
-  );
-}
-
-const options = dataSource.map(group => (
-  <OptGroup
-    key={group.title}
-    label={renderTitle(group.title)}
-  >
-    {group.children.map(opt => (
-      <Option key={opt.title} value={opt.title}>
-        {opt.title}
-        <span className="certain-search-item-count">{opt.count} 人 关注</span>
-      </Option>
-    ))}
-  </OptGroup>
-)).concat([
-  <Option disabled key="all" className="show-all">
-    <a
-      href="https://www.google.com/search?q=antd"
-      target="_blank"
-      rel="noopener noreferrer"
-    >
-      查看所有结果
-    </a>
-  </Option>,
-]);
-
-function Complete() {
-  return (
-    <div className="certain-category-search-wrapper" style={{ width: 250 }}>
-      <AutoComplete
-        className="certain-category-search"
-        dropdownClassName="certain-category-search-dropdown"
-        dropdownMatchSelectWidth={false}
-        dropdownStyle={{ width: 300 }}
-        size="large"
-        style={{ width: '100%' }}
-        dataSource={options}
-        placeholder="input here"
-        optionLabelProp="value"
-      >
-        <Input suffix={<Icon type="search" className="certain-category-icon" />} />
-      </AutoComplete>
-    </div>
-  );
-}
-
-ReactDOM.render(<Complete />, mountNode);
-````
-
-````css
-.certain-category-search.ant-select-auto-complete .ant-input-affix-wrapper .ant-input-suffix {
-  right: 12px;
-}
-
-.certain-category-search-dropdown .ant-select-dropdown-menu-item-group-title {
-  color: #666;
-  font-weight: bold;
-}
-
-.certain-category-search-dropdown .ant-select-dropdown-menu-item-group {
-  border-bottom: 1px solid #F6F6F6;
-}
-
-.certain-category-search-dropdown .ant-select-dropdown-menu-item {
-  padding-left: 16px;
-}
-
-.certain-category-search-dropdown .ant-select-dropdown-menu-item.show-all {
-  text-align: center;
-  cursor: default;
-}
-
-.certain-category-search-dropdown .ant-select-dropdown-menu {
-  max-height: 300px;
-}
-
-.certain-search-item-count {
- position: absolute;
- color: #999;
- right: 16px;
-}
-
-.certain-category-search.ant-select-focused .certain-category-icon {
-  color: #108ee9;
-}
-
-.certain-category-icon {
-  color: #6E6E6E;
-  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
-  font-size: 16px;
-}
-````
--- a/components/auto-complete/demo/non-case-sensitive.md
+++ b/components/auto-complete/demo/non-case-sensitive.md
@@ -1,33 +0,0 @@
---
-order: 3
-title:
-  zh-CN: 不区分大小写
-  en-US: Non-case-sensitive AutoComplete
---
-
-## zh-CN
-
-不区分大小写的 AutoComplete
-
-## en-US
-
-A non-case-sensitive AutoComplete
-
-````jsx
-import { AutoComplete } from 'antd';
-
-const dataSource = ['Burns Bay Road', 'Downing Street', 'Wall Street'];
-
-function Complete() {
-  return (
-    <AutoComplete
-      style={{ width: 200 }}
-      dataSource={dataSource}
-      placeholder="try to type `b`"
-      filterOption={(inputValue, option) => option.props.children.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1}
-    />
-  );
-}
-
-ReactDOM.render(<Complete />, mountNode);
-````
--- a/components/auto-complete/demo/options.md
+++ b/components/auto-complete/demo/options.md
@@ -18,12 +18,13 @@ import { AutoComplete } from 'antd';

 const Option = AutoComplete.Option;

-class Complete extends React.Component {
-  state = {
-    result: [],
-  }
-
-  handleSearch = (value) => {
+const Complete = React.createClass({
+  getInitialState() {
+    return {
+      result: [],
+    };
+  },
+  handleChange(value) {
    let result;
    if (!value || value.indexOf('@') >= 0) {
      result = [];
@@ -31,8 +32,7 @@ class Complete extends React.Component {
      result = ['gmail.com', '163.com', 'qq.com'].map(domain => `${value}@${domain}`);
    }
    this.setState({ result });
-  }
-
+  },
  render() {
    const { result } = this.state;
    const children = result.map((email) => {
@@ -41,14 +41,13 @@ class Complete extends React.Component {
    return (
      <AutoComplete
        style={{ width: 200 }}
-        onSearch={this.handleSearch}
-        placeholder="input here"
+        onChange={this.handleChange}
      >
        {children}
      </AutoComplete>
    );
-  }
-}
+  },
+});

 ReactDOM.render(<Complete />, mountNode);
 ````
--- a/components/auto-complete/demo/uncertain-category.md
+++ b/components/auto-complete/demo/uncertain-category.md
@@ -1,126 +0,0 @@
---
-order: 5
-title:
-  zh-CN: 查询模式 - 不确定类目
-  en-US: Lookup-Patterns - Uncertain Category
---
-
-## zh-CN
-
-[查询模式: 不确定类目](https://ant.design/docs/spec/reaction#Lookup-Patterns) 示例。
-
-## en-US
-
-Demonstration of [Lookup Patterns: Uncertain Category](https://ant.design/docs/spec/reaction#Lookup-Patterns).
-Basic Usage, set datasource of autocomplete with `dataSource` property.
-
-````jsx
-import { Icon, Button, Input, AutoComplete } from 'antd';
-const Option = AutoComplete.Option;
-
-function onSelect(value) {
-  console.log('onSelect', value);
-}
-
-function getRandomInt(max, min = 0) {
-  return Math.floor(Math.random() * (max - min + 1)) + min; // eslint-disable-line no-mixed-operators
-}
-
-function searchResult(query) {
-  return (new Array(getRandomInt(5))).join('.').split('.')
-    .map((item, idx) => ({
-      query,
-      category: `${query}${idx}`,
-      count: getRandomInt(200, 100),
-    }));
-}
-
-function renderOption(item) {
-  return (
-    <Option key={item.category} text={item.category}>
-      {item.query} 在
-      <a
-        href={`https://s.taobao.com/search?q=${item.query}`}
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        {item.category}
-      </a>
-      区块中
-      <span className="global-search-item-count">约 {item.count} 个结果</span>
-    </Option>
-  );
-}
-
-class Complete extends React.Component {
-  state = {
-    dataSource: [],
-  }
-
-  handleSearch = (value) => {
-    this.setState({
-      dataSource: value ? searchResult(value) : [],
-    });
-  }
-
-  render() {
-    const { dataSource } = this.state;
-    return (
-      <div className="global-search-wrapper" style={{ width: 300 }}>
-        <AutoComplete
-          className="global-search"
-          size="large"
-          style={{ width: '100%' }}
-          dataSource={dataSource.map(renderOption)}
-          onSelect={onSelect}
-          onSearch={this.handleSearch}
-          placeholder="input here"
-          optionLabelProp="text"
-        >
-          <Input
-            suffix={(
-              <Button className="search-btn" size="large" type="primary">
-                <Icon type="search" />
-              </Button>
-            )}
-          />
-        </AutoComplete>
-      </div>
-    );
-  }
-}
-
-ReactDOM.render(<Complete />, mountNode);
-````
-
-````css
-.global-search-wrapper {
-  padding-right: 50px;
-}
-
-.global-search {
-  width: 100%;
-}
-
-.global-search.ant-select-auto-complete .ant-select-selection--single {
-  margin-right: -46px;
-}
-
-.global-search.ant-select-auto-complete .ant-input-affix-wrapper .ant-input:not(:last-child) {
-  padding-right: 62px;
-}
-
-.global-search.ant-select-auto-complete .ant-input-affix-wrapper .ant-input-suffix {
-  right: 0;
-}
-
-.global-search.ant-select-auto-complete .ant-input-affix-wrapper .ant-input-suffix button {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
-
-.global-search-item-count {
-  position: absolute;
-  right: 16px;
-}
-````
--- a/components/auto-complete/index.en-US.md
+++ b/components/auto-complete/index.en-US.md
@@ -1,7 +1,7 @@
 ---
 category: Components
-type: Data Entry
-cols: 2
+type: Form Controls
+cols: 1
 title: AutoComplete
 ---

@@ -9,7 +9,7 @@ Autocomplete function of input field.

 ## When To Use

-When there is a need for autocomplete functionality.
+When need to use autocomplete function.

 ## API

@@ -18,20 +18,13 @@ const dataSource = ['12345', '23456', '34567'];
 <AutoComplete dataSource={dataSource} />
 ```

+
 | Property           | Description                             |  Type | Default |
 |----------------|----------------------------------|------------|--------|
-| dataSource          | Data source for autocomplete | [DataSourceItemType](https://git.io/vMMKF)[]     |      |
-| value    | selected option | string\|string[]\|{ key: string, label: string\|ReactNode }\|Array<{ key: string, label: string\|ReactNode }>   |  -  |
-| defaultValue | Initial selected option. | string\|string[]\|{ key: string, label: string\|ReactNode }\|Array<{ key: string, label: string\|ReactNode }> |  -  |
+| dataSource          | Data source for autocomplete | Array     |      |
+| value    | selected option | String/Array<String>/{key: String, label: React.Node}/Array<{key, label}>   |  -  |
+| defaultValue | Initial selected option. | string/Array<String>   |  -  |
 | allowClear   | Show clear button, effective in multiple mode only. | boolean | false |
 | onChange | Called when select an option or input value change, or value of input is changed | function(value, label) | - |
 | onSelect | Called when a option is selected. param is option's value and option instance. | function(value, option) | -   |
-| onSearch | Called when searching items. | function(value) | - |
 | disabled | Whether disabled select | boolean | false |
-| defaultActiveFirstOption | Whether active first option by default | boolean | true |
-| placeholder | placeholder of input | string | - |
-| children (for dataSource) | Data source for autocomplet | React.ReactElement<OptionProps> /  Array<React.ReactElement<OptionProps>> | - |
-| children (for customize input element) | customize input element | HTMLInputElement / HTMLTextAreaElement / React.ReactElement<InputProps> | `<Input />` |
-| optionLabelProp | Which prop value of option will render as content of select. | string | `children` |
-| filterOption | If true, filter options by input, if function, filter options against it. The function will receive two arguments, `inputValue` and `option`, if the function returns `true`, the option will be included in the filtered set; Otherwise, it will be excluded. | boolean or function(inputValue, option) | true     |
-| backfill | backfill selected item the input when using keyboard  | boolean | false |
--- a/components/auto-complete/index.tsx
+++ b/components/auto-complete/index.tsx
@@ -1,37 +1,31 @@
 import React from 'react';
+import Select, { OptionProps, OptGroupProps } from '../select';
 import { Option, OptGroup } from 'rc-select';
 import classNames from 'classnames';
-import Select, { AbstractSelectProps, SelectValue, OptionProps, OptGroupProps } from '../select';
-import Input from '../input';
-import InputElement from './InputElement';

-export interface DataSourceItemObject { value: string; text: string; }
+export interface SelectedValue {
+  key: string;
+  label: React.ReactNode;
+}
+
+export interface DataSourceItemObject { value: string; text: string; };
 export type DataSourceItemType = string | DataSourceItemObject;

-export interface InputProps {
-  onChange?: React.FormEventHandler<any>;
-  value: any;
-}
-
-export type ValidInputElement =
-  HTMLInputElement |
-  HTMLTextAreaElement |
-  React.ReactElement<InputProps>;
-
-export interface AutoCompleteProps extends AbstractSelectProps {
-  value?: SelectValue;
-  defaultValue?: SelectValue;
+export interface AutoCompleteProps {
+  size?: 'large' | 'small' | 'default';
+  className?: string;
+  notFoundContent?: Element;
  dataSource: DataSourceItemType[];
+  prefixCls?: string;
+  transitionName?: string;
  optionLabelProp?: string;
-  onChange?: (value: SelectValue) => void;
-  onSelect?: (value: SelectValue, option: Object) => any;
-  children?: ValidInputElement |
-    React.ReactElement<OptionProps> |
-    Array<React.ReactElement<OptionProps>>;
-}
-
-function isSelectOptionOrSelectOptGroup(child: any): Boolean {
-  return child && child.type && (child.type.isSelectOption || child.type.isSelectOptGroup);
+  choiceTransitionName?: string;
+  showSearch?: boolean;
+  defaultValue?: string | Array<any> | SelectedValue | Array<SelectedValue>;
+  value?: string | Array<any> | SelectedValue | Array<SelectedValue>;
+  allowClear?: boolean;
+  onChange?: (value: string | Array<any> | SelectedValue | Array<SelectedValue>) => void;
+  disabled?: boolean;
 }

 export default class AutoComplete extends React.Component<AutoCompleteProps, any> {
@@ -44,17 +38,11 @@ export default class AutoComplete extends React.Component<AutoCompleteProps, any
    optionLabelProp: 'children',
    choiceTransitionName: 'zoom',
    showSearch: false,
-    filterOption: false,
  };

-  getInputElement = () => {
-    const { children } = this.props;
-    const element = children && React.isValidElement(children) && children.type !== Option ?
-      React.Children.only(this.props.children) : <Input />;
-    return (
-      <InputElement>{element}</InputElement>
-    );
-  }
+  static contextTypes = {
+    antLocale: React.PropTypes.object,
+  };

  render() {
    let {
@@ -66,44 +54,29 @@ export default class AutoComplete extends React.Component<AutoCompleteProps, any
      [`${prefixCls}-sm`]: size === 'small',
      [className]: !!className,
      [`${prefixCls}-show-search`]: true,
-      [`${prefixCls}-auto-complete`]: true,
    });

-    let options;
-    const childArray = React.Children.toArray(children);
-    if (childArray.length &&
-        isSelectOptionOrSelectOptGroup(childArray[0])
-      ) {
-      options = children;
-    } else {
-      options = dataSource ? dataSource.map((item) => {
-        if (React.isValidElement(item)) {
-          return item;
-        }
-        switch (typeof item) {
-          case 'string':
-            return <Option key={item}>{item}</Option>;
-          case 'object':
-            return (
-              <Option key={(item as DataSourceItemObject).value}>
-                {(item as DataSourceItemObject).text}
-              </Option>
-            );
-          default:
-            throw new Error('AutoComplete[dataSource] only supports type `string[] | Object[]`.');
-        }
-      }) : [];
-    }
+    const options = children || (dataSource ? dataSource.map((item) => {
+      switch (typeof item) {
+        case 'string':
+          return <Option key={item}>{item}</Option>;
+        case 'object':
+          return (
+            <Option key={(item as DataSourceItemObject).value}>
+              {(item as DataSourceItemObject).text}
+            </Option>
+          );
+        default:
+          throw new Error('AutoComplete[dataSource] only supports type `string[] | Object[]`.');
+      }
+    }) : []);

    return (
-      <Select
-        {...this.props}
+      <Select {...this.props}
        className={cls}
-        mode="combobox"
        optionLabelProp={optionLabelProp}
-        getInputElement={this.getInputElement}
-        notFoundContent={notFoundContent}
-      >
+        combobox
+        notFoundContent={notFoundContent} >
        {options}
      </Select>
    );
--- a/components/auto-complete/index.zh-CN.md
+++ b/components/auto-complete/index.zh-CN.md
@@ -1,8 +1,8 @@
 ---
 category: Components
 subtitle: 自动完成
-type: Data Entry
-cols: 2
+type: Form Controls
+cols: 1
 title: AutoComplete
 ---

@@ -19,20 +19,13 @@ const dataSource = ['12345', '23456', '34567'];
 <AutoComplete dataSource={dataSource} />
 ```

+
 | 参数           | 说明                             | 类型        | 默认值 |
 |----------------|----------------------------------|------------|---------|
-| dataSource          | 自动完成的数据源 | [DataSourceItemType](https://git.io/vMMKF)[]     |         |
-| value    | 指定当前选中的条目 | string\|string[]\|{ key: string, label: string\|ReactNode }\|Array<{ key: string, label: string\|ReactNode }>   |  无  |
-| defaultValue | 指定默认选中的条目 | string\|string[]\|{ key: string, label: string\|ReactNode }\|Array<{ key: string, label: string\|ReactNode}>   |  无  |
+| dataSource          | 自动完成的数据源 | Array     |         |
+| value    | 指定当前选中的条目 | String/Array<String>/{key: String, label: React.Node}/Array<{key, label}>   |  无  |
+| defaultValue | 指定默认选中的条目 | String/Array<String>/{key: String, label: React.Node}/Array<{key, label}>   |  无  |
 | allowClear   | 支持清除, 单选模式有效 | boolean | false |
 | onChange | 选中 option，或 input 的 value 变化时，调用此函数 | function(value) | 无 |
 | onSelect | 被选中时调用，参数为选中项的 value 值	| function(value, option)	| 无 |
-| onSearch | 搜索补全项的时候调用 | function(value) | 无 |
 | disabled | 是否禁用 | boolean | false |
-| defaultActiveFirstOption | 是否默认高亮第一个选项。 | boolean | true
-| placeholder | 输入框提示 | string | - |
-| children (自动完成的数据源) | 自动完成的数据源 | React.ReactElement<OptionProps> / Array<React.ReactElement<OptionProps>> | - |
-| children (自定义输入框) | 自定义输入框 |  HTMLInputElement / HTMLTextAreaElement / React.ReactElement<InputProps> | `<Input />` |
-| optionLabelProp | 回填到选择框的 Option 的属性值，默认是 Option 的子元素。比如在子元素需要高亮效果时，此值可以设为 `value`。 | string | `children` |
-| filterOption | 是否根据输入项进行筛选。当其为一个函数时，会接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 `true`，反之则返回 `false`。 | boolean or function(inputValue, option) | true     |
-| backfill | 使用键盘选择选项的时候把选中项回填到输入框中 | boolean | false |
--- a/components/auto-complete/style/index.less
+++ b/components/auto-complete/style/index.less
@@ -1,62 +0,0 @@
-@import "../../style/themes/default";
-@import "../../style/mixins/index";
-@import "../../input/style/mixin";
-
-@input-prefix-cls: ~"@{ant-prefix}-input";
-@select-prefix-cls: ~"@{ant-prefix}-select";
-@autocomplete-prefix-cls: ~"@{select-prefix-cls}-auto-complete";
-
-.@{autocomplete-prefix-cls} {
-  &.@{select-prefix-cls} {
-    .@{select-prefix-cls} {
-      &-selection {
-        border: 0;
-        box-shadow: none;
-        &__rendered {
-          margin-left: 0;
-          margin-right: 0;
-          height: 100%;
-          line-height: @input-height-base;
-        }
-        &__placeholder {
-          margin-left: (@input-padding-horizontal + 1px);
-          margin-right: (@input-padding-horizontal + 1px);
-        }
-      }
-    }
-
-    &-allow-clear {
-      .@{select-prefix-cls}-selection:hover .@{select-prefix-cls}-selection__rendered {
-        margin-right: 0 !important;
-      }
-    }
-
-    .@{input-prefix-cls} {
-      background: transparent;
-      border-width: @border-width-base;
-      line-height: @line-height-base;
-      &:focus,
-      &:hover {
-        .hover;
-      }
-    }
-
-    &-lg {
-      .@{select-prefix-cls}-selection__rendered {
-        line-height: @input-height-lg;
-      }
-      .@{input-prefix-cls} {
-        .input-lg();
-      }
-    }
-
-    &-sm {
-      .@{select-prefix-cls}-selection__rendered {
-        line-height: @input-height-sm;
-      }
-      .@{input-prefix-cls} {
-        .input-sm();
-      }
-    }
-  }
-}
--- a/components/avatar/tests/Avatar.test.js
+++ b/components/avatar/tests/Avatar.test.js
@@ -1,11 +0,0 @@
-import React from 'react';
-import { mount } from 'enzyme';
-import Avatar from '..';
-
-describe('Avatar Render', () => {
-  it('Render long string correctly', () => {
-    const wrapper = mount(<Avatar>TestString</Avatar>);
-    const children = wrapper.find('.ant-avatar-string');
-    expect(children.length).toBe(1);
-  });
-});
--- a/components/avatar/tests/snapshots/demo.test.js.snap
+++ b/components/avatar/tests/snapshots/demo.test.js.snap
@@ -1,329 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders ./components/avatar/demo/badge.md correctly 1`] = `
-<div>
-  <span
-    style="margin-right:24px;"
-  >
-    <span
-      class="ant-badge"
-    >
-      <span
-        class="ant-avatar ant-avatar-square ant-avatar-icon"
-      >
-        <i
-          class="anticon anticon-user"
-        />
-      </span>
-      <sup
-        class="ant-scroll-number ant-badge-count"
-        data-show="true"
-        title="1"
-      >
-        <span
-          class="ant-scroll-number-only"
-          style="transition:none;-ms-transform:translateY(-1100%);-webkit-transform:translateY(-1100%);transform:translateY(-1100%);"
-        >
-          <p
-            class=""
-          >
-            0
-          </p>
-          <p
-            class=""
-          >
-            1
-          </p>
-          <p
-            class=""
-          >
-            2
-          </p>
-          <p
-            class=""
-          >
-            3
-          </p>
-          <p
-            class=""
-          >
-            4
-          </p>
-          <p
-            class=""
-          >
-            5
-          </p>
-          <p
-            class=""
-          >
-            6
-          </p>
-          <p
-            class=""
-          >
-            7
-          </p>
-          <p
-            class=""
-          >
-            8
-          </p>
-          <p
-            class=""
-          >
-            9
-          </p>
-          <p
-            class=""
-          >
-            0
-          </p>
-          <p
-            class="current"
-          >
-            1
-          </p>
-          <p
-            class=""
-          >
-            2
-          </p>
-          <p
-            class=""
-          >
-            3
-          </p>
-          <p
-            class=""
-          >
-            4
-          </p>
-          <p
-            class=""
-          >
-            5
-          </p>
-          <p
-            class=""
-          >
-            6
-          </p>
-          <p
-            class=""
-          >
-            7
-          </p>
-          <p
-            class=""
-          >
-            8
-          </p>
-          <p
-            class=""
-          >
-            9
-          </p>
-          <p
-            class=""
-          >
-            0
-          </p>
-          <p
-            class=""
-          >
-            1
-          </p>
-          <p
-            class=""
-          >
-            2
-          </p>
-          <p
-            class=""
-          >
-            3
-          </p>
-          <p
-            class=""
-          >
-            4
-          </p>
-          <p
-            class=""
-          >
-            5
-          </p>
-          <p
-            class=""
-          >
-            6
-          </p>
-          <p
-            class=""
-          >
-            7
-          </p>
-          <p
-            class=""
-          >
-            8
-          </p>
-          <p
-            class=""
-          >
-            9
-          </p>
-        </span>
-      </sup>
-    </span>
-  </span>
-  <span>
-    <span
-      class="ant-badge"
-    >
-      <span
-        class="ant-avatar ant-avatar-square ant-avatar-icon"
-      >
-        <i
-          class="anticon anticon-user"
-        />
-      </span>
-      <sup
-        class="ant-scroll-number ant-badge-dot"
-        data-show="true"
-      />
-    </span>
-  </span>
-</div>
-`;
-
-exports[`renders ./components/avatar/demo/basic.md correctly 1`] = `
-<div>
-  <div>
-    <span
-      class="ant-avatar ant-avatar-lg ant-avatar-circle ant-avatar-icon"
-    >
-      <i
-        class="anticon anticon-user"
-      />
-    </span>
-    <span
-      class="ant-avatar ant-avatar-circle ant-avatar-icon"
-    >
-      <i
-        class="anticon anticon-user"
-      />
-    </span>
-    <span
-      class="ant-avatar ant-avatar-sm ant-avatar-circle ant-avatar-icon"
-    >
-      <i
-        class="anticon anticon-user"
-      />
-    </span>
-  </div>
-  <div>
-    <span
-      class="ant-avatar ant-avatar-lg ant-avatar-square ant-avatar-icon"
-    >
-      <i
-        class="anticon anticon-user"
-      />
-    </span>
-    <span
-      class="ant-avatar ant-avatar-square ant-avatar-icon"
-    >
-      <i
-        class="anticon anticon-user"
-      />
-    </span>
-    <span
-      class="ant-avatar ant-avatar-sm ant-avatar-square ant-avatar-icon"
-    >
-      <i
-        class="anticon anticon-user"
-      />
-    </span>
-  </div>
-</div>
-`;
-
-exports[`renders ./components/avatar/demo/dynamic.md correctly 1`] = `
-<div>
-  <span
-    class="ant-avatar ant-avatar-lg ant-avatar-circle"
-    style="background-color:#f56a00;"
-  >
-    <span
-      class="ant-avatar-string"
-    >
-      U
-    </span>
-  </span>
-  <button
-    class="ant-btn ant-btn-sm"
-    style="margin-left:16px;"
-    type="button"
-  >
-    <span>
-      Change
-    </span>
-  </button>
-</div>
-`;
-
-exports[`renders ./components/avatar/demo/type.md correctly 1`] = `
-<div>
-  <span
-    class="ant-avatar ant-avatar-circle ant-avatar-icon"
-  >
-    <i
-      class="anticon anticon-user"
-    />
-  </span>
-  <span
-    class="ant-avatar ant-avatar-circle"
-  >
-    <span
-      class="ant-avatar-string"
-    >
-      U
-    </span>
-  </span>
-  <span
-    class="ant-avatar ant-avatar-circle"
-  >
-    <span
-      class="ant-avatar-string"
-    >
-      USER
-    </span>
-  </span>
-  <span
-    class="ant-avatar ant-avatar-circle ant-avatar-image"
-  >
-    <img
-      src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
-    />
-  </span>
-  <span
-    class="ant-avatar ant-avatar-circle"
-    style="color:#f56a00;background-color:#fde3cf;"
-  >
-    <span
-      class="ant-avatar-string"
-    >
-      U
-    </span>
-  </span>
-  <span
-    class="ant-avatar ant-avatar-circle ant-avatar-icon"
-    style="background-color:#87d068;"
-  >
-    <i
-      class="anticon anticon-user"
-    />
-  </span>
-</div>
-`;
--- a/components/avatar/tests/demo.test.js
+++ b/components/avatar/tests/demo.test.js
@@ -1,3 +0,0 @@
-import demoTest from '../../../tests/shared/demoTest';
-
-demoTest('avatar');
--- a/components/avatar/demo/badge.md
+++ b/components/avatar/demo/badge.md
@@ -1,29 +0,0 @@
---
-order: 3
-title:
-  zh-CN: 带徽标的头像
-  en-US: With Badge
---
-
-## zh-CN
-
-通常用于消息提示。
-
-## en-US
-
-Usually used for messages remind.
-
-````jsx
-import { Avatar, Badge } from 'antd';
-
-ReactDOM.render(
-  <div>
-    <span style={{ marginRight: 24 }}>
-      <Badge count={1}><Avatar shape="square" icon="user" /></Badge>
-    </span>
-    <span>
-      <Badge dot><Avatar shape="square" icon="user" /></Badge>
-    </span>
-  </div>
-, mountNode);
-````
--- a/components/avatar/demo/basic.md
+++ b/components/avatar/demo/basic.md
@@ -1,40 +0,0 @@
---
-order: 0
-title:
-  zh-CN: 基本
-  en-US: Basic
---
-
-## zh-CN
-
-头像有三种尺寸，两种形状可选。
-
-## en-US
-
-Three sizes and two shapes are available.
-
-````jsx
-import { Avatar } from 'antd';
-
-ReactDOM.render(
-  <div>
-    <div>
-      <Avatar size="large" icon="user" />
-      <Avatar icon="user" />
-      <Avatar size="small" icon="user" />
-    </div>
-    <div>
-      <Avatar shape="square" size="large" icon="user" />
-      <Avatar shape="square" icon="user" />
-      <Avatar shape="square" size="small" icon="user" />
-    </div>
-  </div>
-, mountNode);
-````
-
-<style>
-#components-avatar-demo-basic .ant-avatar {
-  margin-top: 16px;
-  margin-right: 16px;
-}
-</style>
--- a/components/avatar/demo/dynamic.md
+++ b/components/avatar/demo/dynamic.md
@@ -1,49 +0,0 @@
---
-order: 2
-title:
-  zh-CN: 自动调整字符大小
-  en-US: Autoset Font Size
---
-
-## zh-CN
-
-对于字符型的头像，当字符串较长时，字体大小可以根据头像宽度自动调整。
-
-## en-US
-
-For letter type Avatar, when the letters are too long to display, the font size can be automatically adjusted according to the width of the Avatar.
-
-````jsx
-import { Avatar, Button } from 'antd';
-
-const UserList = ['U', 'Lucy', 'Tom', 'Edward'];
-const colorList = ['#f56a00', '#7265e6', '#ffbf00', '#00a2ae'];
-
-class Autoset extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      user: UserList[0],
-      color: colorList[0],
-    };
-  }
-  changeUser = () => {
-    const index = UserList.indexOf(this.state.user);
-    this.setState({
-      user: index < UserList.length - 1 ? UserList[index + 1] : UserList[0],
-      color: index < colorList.length - 1 ? colorList[index + 1] : colorList[0],
-    });
-  }
-  render() {
-    return (
-      <div>
-        <Avatar style={{ backgroundColor: this.state.color }} size="large">{this.state.user}</Avatar>
-        <Button size="small" style={{ marginLeft: 16 }} onClick={this.changeUser}>Change</Button>
-      </div>
-    );
-  }
-}
-
-ReactDOM.render(<Autoset />
-, mountNode);
-````
--- a/components/avatar/demo/type.md
+++ b/components/avatar/demo/type.md
@@ -1,36 +0,0 @@
---
-order: 1
-title:
-  zh-CN: 类型
-  en-US: Type
---
-
-## zh-CN
-
-支持三种类型：图片、Icon 以及字符，其中 Icon 和字符型可以自定义图标颜色及背景色。
-
-## en-US
-
-Image, Icon and letter are supported, and the latter two kinds avatar can have custom colors and background colors.
-
-````jsx
-import { Avatar } from 'antd';
-
-ReactDOM.render(
-  <div>
-    <Avatar icon="user" />
-    <Avatar>U</Avatar>
-    <Avatar>USER</Avatar>
-    <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
-    <Avatar style={{ color: '#f56a00', backgroundColor: '#fde3cf' }}>U</Avatar>
-    <Avatar style={{ backgroundColor: '#87d068' }} icon="user" />
-  </div>
-, mountNode);
-````
-
-<style>
-#components-avatar-demo-type .ant-avatar {
-  margin-top: 16px;
-  margin-right: 16px;
-}
-</style>
--- a/components/avatar/index.en-US.md
+++ b/components/avatar/index.en-US.md
@@ -1,16 +0,0 @@
---
-category: Components
-type: Data Display
-title: Avatar
---
-
-Avatars can be used to represent people or objects. It supports images, `Icon`s, or letters.
-
-## API
-
-| Property   | Description                                               | Type       | Default |
-|----------- |---------------------------------------------------------  | ---------- |-------|
-| shape       | the shape of avatar                            | `circle` \| `square` | `circle` |
-| size   | the size of the avatar                  | `large` \| `small` \| `default` | `default` |
-| src  | the address of the image for an image avatar                       | string | - |
-| icon    | the `Icon` type for an icon avatar, see `Icon` Component        | string | - |
--- a/components/avatar/index.tsx
+++ b/components/avatar/index.tsx
@@ -1,137 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import Icon from '../icon';
-import classNames from 'classnames';
-
-export interface AvatarProps {
-  /** Shape of avatar, options:`circle`, `square` */
-  shape?: 'circle' | 'square';
-  /** Size of avatar, options:`large`, `small`, `default` */
-  size?: 'large' | 'small' | 'default';
-  /** Src of image avatar */
-  src?: string;
-  /** Type of the Icon to be used in avatar */
-  icon?: string;
-  style?: React.CSSProperties;
-  prefixCls?: string;
-  className?: string;
-  children?: any;
-}
-
-export interface AvatarState {
-  scale: number;
-  isImgExist: boolean;
-}
-
-export default class Avatar extends React.Component<AvatarProps, AvatarState> {
-  static defaultProps = {
-    prefixCls: 'ant-avatar',
-    shape: 'circle',
-    size: 'default',
-  };
-
-  private avatarChildren: any;
-
-  constructor(props: AvatarProps) {
-    super(props);
-    this.state = {
-      scale: 1,
-      isImgExist: true,
-    };
-  }
-
-  componentDidMount() {
-    this.setScale();
-  }
-
-  componentDidUpdate(prevProps: AvatarProps, prevState: AvatarState) {
-    if (prevProps.children !== this.props.children
-        || (prevState.scale !== this.state.scale && this.state.scale === 1)) {
-      this.setScale();
-    }
-  }
-
-  setScale = () => {
-    const childrenNode = this.avatarChildren;
-    if (childrenNode) {
-      const childrenWidth = childrenNode.offsetWidth;
-      const avatarWidth = ReactDOM.findDOMNode(this).getBoundingClientRect().width;
-      // add 4px gap for each side to get better performance
-      if (avatarWidth - 8 < childrenWidth) {
-        this.setState({
-          scale: (avatarWidth - 8) / childrenWidth,
-        });
-      } else {
-        this.setState({
-          scale: 1,
-        });
-      }
-    }
-  }
-
-  handleImgLoadError = () => this.setState({ isImgExist: false });
-
-  render() {
-    const {
-      prefixCls, shape, size, src, icon, className, ...others,
-    } = this.props;
-
-    const sizeCls = classNames({
-      [`${prefixCls}-lg`]: size === 'large',
-      [`${prefixCls}-sm`]: size === 'small',
-    });
-
-    const classString = classNames(prefixCls, className, sizeCls, {
-      [`${prefixCls}-${shape}`]: shape,
-      [`${prefixCls}-image`]: src,
-      [`${prefixCls}-icon`]: icon,
-    });
-
-    let children = this.props.children;
-    if (src && this.state.isImgExist) {
-      children = (
-        <img
-          src={src}
-          onError={this.handleImgLoadError}
-        />
-      );
-    } else if (icon) {
-      children = <Icon type={icon} />;
-    } else {
-      const childrenNode = this.avatarChildren;
-      if (childrenNode || this.state.scale !== 1) {
-        const childrenStyle: React.CSSProperties = {
-          msTransform: `scale(${this.state.scale})`,
-          WebkitTransform: `scale(${this.state.scale})`,
-          transform: `scale(${this.state.scale})`,
-          position: 'absolute',
-          display: 'inline-block',
-          left: `calc(50% - ${Math.round(childrenNode.offsetWidth / 2)}px)`,
-        };
-        children = (
-          <span
-            className={`${prefixCls}-string`}
-            ref={span => this.avatarChildren = span}
-            style={childrenStyle}
-          >
-            {children}
-          </span>
-        );
-      } else {
-        children = (
-          <span
-            className={`${prefixCls}-string`}
-            ref={span => this.avatarChildren = span}
-          >
-            {children}
-          </span>
-        );
-      }
-    }
-    return (
-      <span {...others} className={classString}>
-        {children}
-      </span>
-    );
-  }
-}
--- a/components/avatar/index.zh-CN.md
+++ b/components/avatar/index.zh-CN.md
@@ -1,17 +0,0 @@
---
-category: Components
-subtitle: 头像
-type: Data Display
-title: Avatar
---
-
-用来代表用户或事物，支持图片、图标或字符展示。
-
-## API
-
-| 参数        | 说明                                                      | 类型        | 默认值 |
-|----------- |--------------------------------------------------------- | ----------  | ------- |
-| shape       | 指定头像的形状                          | Enum{ 'circle', 'square' }     | `circle`  |
-| size       | 设置头像的大小                           | Enum{ 'large', 'small', 'default' }       | `default` |
-| src  | 图片类头像的资源地址                                     | string   | -    |
-| icon    | 设置头像的图标类型，参考 `Icon` 组件                                       | string   | -    |
--- a/components/avatar/style/index.less
+++ b/components/avatar/style/index.less
@@ -1,47 +0,0 @@
-@import "../../style/themes/default";
-
-@avatar-prefix-cls: ~"@{ant-prefix}-avatar";
-
-.@{avatar-prefix-cls} {
-  display: inline-block;
-  text-align: center;
-  background: @avatar-bg;
-  color: @avatar-color;
-  white-space: nowrap;
-  position: relative;
-  overflow: hidden;
-
-  .avatar-size(@avatar-size-base, @avatar-font-size-base);
-
-  &-lg {
-    .avatar-size(@avatar-size-lg, @avatar-font-size-lg);
-  }
-
-  &-sm {
-    .avatar-size(@avatar-size-sm, @avatar-font-size-sm);
-  }
-
-  &-square {
-    border-radius: @avatar-border-radius;
-  }
-
-  & > img {
-    width: 100%;
-    height: 100%;
-  }
-}
-
-.avatar-size(@size, @font-size) {
-  width: @size;
-  height: @size;
-  line-height: @size;
-  border-radius: @size / 2;
-
-  & > * {
-    line-height: @size;
-  }
-
-  &.@{avatar-prefix-cls}-icon {
-    font-size: @font-size;
-  }
-}
--- a/components/avatar/style/index.tsx
+++ b/components/avatar/style/index.tsx
@@ -1,2 +0,0 @@
-import '../../style/index.less';
-import './index.less';
--- a/components/back-top/tests/snapshots/demo.test.js.snap
+++ b/components/back-top/tests/snapshots/demo.test.js.snap
@@ -1,25 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders ./components/back-top/demo/basic.md correctly 1`] = `
-<div>
-  Scroll down to see the bottom-right
-  <strong
-    style="color:rgba(64, 64, 64, 0.6);"
-  >
-     gray 
-  </strong>
-  button.
-</div>
-`;
-
-exports[`renders ./components/back-top/demo/custom.md correctly 1`] = `
-<div>
-  Scroll down to see the bottom-right
-  <strong
-    style="color:#1088e9;"
-  >
-     blue 
-  </strong>
-  button.
-</div>
-`;
--- a/components/back-top/tests/demo.test.js
+++ b/components/back-top/tests/demo.test.js
@@ -1,3 +0,0 @@
-import demoTest from '../../../tests/shared/demoTest';
-
-demoTest('back-top');
--- a/components/back-top/tests/index.test.js
+++ b/components/back-top/tests/index.test.js
@@ -1,18 +0,0 @@
-import React from 'react';
-import { mount } from 'enzyme';
-import BackTop from '..';
-
-const delay = timeout => new Promise(resolve => setTimeout(resolve, timeout));
-
-describe('BackTop', () => {
-  it('should scroll to top after click it', async () => {
-    const wrapper = mount(<BackTop visibilityHeight={-1} />);
-    document.documentElement.scrollTop = 400;
-    // trigger scroll manually
-    wrapper.node.handleScroll();
-    await delay(500);
-    wrapper.find('.ant-back-top').simulate('click');
-    await delay(500);
-    expect(Math.round(document.documentElement.scrollTop)).toBe(0);
-  });
-});
--- a/components/back-top/demo/basic.md
+++ b/components/back-top/demo/basic.md
@@ -19,10 +19,7 @@ import { BackTop } from 'antd';
 ReactDOM.render(
  <div>
    <BackTop />
-    Scroll down to see the bottom-right
-    <strong style={{ color: 'rgba(64, 64, 64, 0.6)' }}> gray </strong>
-    button.
-  </div>,
-  mountNode
-);
+    Scroll down to see the bottom right gray button.
+  </div>
+, mountNode);
 ````
--- a/components/back-top/demo/custom.md
+++ b/components/back-top/demo/custom.md
@@ -17,31 +17,23 @@ You can customize the style of the button, just note the size limit: no more tha
 ````jsx
 import { BackTop } from 'antd';

+const style = {
+  height: 40,
+  width: 40,
+  lineHeight: '40px',
+  borderRadius: 4,
+  backgroundColor: '#57c5f7',
+  color: '#fff',
+  textAlign: 'center',
+  fontSize: 20,
+};
+
 ReactDOM.render(
  <div>
-    <BackTop>
-      <div className="ant-back-top-inner">UP</div>
+    <BackTop style={{ bottom: 100 }}>
+      <div style={style}>UP</div>
    </BackTop>
-    Scroll down to see the bottom-right
-    <strong style={{ color: '#1088e9' }}> blue </strong>
-    button.
-  </div>,
-  mountNode
-);
-````
-
-````css
-#components-back-top-demo-custom .ant-back-top {
-  bottom: 100px;
-}
-#components-back-top-demo-custom .ant-back-top-inner {
-  height: 40px;
-  width: 40px;
-  line-height: 40px;
-  border-radius: 4px;
-  background-color: #1088e9;
-  color: #fff;
-  text-align: center;
-  font-size: 20px;
-}
+    Scroll down to see the bottom right blue button.
+  </div>
+, mountNode);
 ````
--- a/components/back-top/index.en-US.md
+++ b/components/back-top/index.en-US.md
@@ -20,6 +20,6 @@ title: BackTop

 Property | Description | Type | Default
 -----|-----|-----|------
-visibilityHeight | the `BackTop` button will not show until the scroll height reaches this value | number | 400
+visibilityHeight | the `BackTop` button will not show until the scroll height reaches this value | Number | 400
 onClick | a callback function, which can be executed when you click the button | Function | -
-target | specifies the scrollable area dom node | () => HTMLElement | () => window
+
--- a/components/back-top/index.tsx
+++ b/components/back-top/index.tsx
@@ -9,7 +9,11 @@ import getRequestAnimationFrame from '../_util/getRequestAnimationFrame';

 const reqAnimFrame = getRequestAnimationFrame();

-const easeInOutCubic = (t: number, b: number, c: number, d: number) => {
+const currentScrollTop = () => {
+  return window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;
+};
+
+const easeInOutCubic = (t, b, c, d) => {
  const cc = c - b;
  t /= d / 2;
  if (t < 1) {
@@ -19,10 +23,11 @@ const easeInOutCubic = (t: number, b: number, c: number, d: number) => {
  }
 };

-function noop() { }
+function noop() {}

 function getDefaultTarget() {
-  return window;
+  return typeof window !== 'undefined' ?
+    window : null;
 }

 export interface BackTopProps {
@@ -41,24 +46,15 @@ export default class BackTop extends React.Component<BackTopProps, any> {

  scrollEvent: any;

-  constructor(props: BackTopProps) {
+  constructor(props) {
    super(props);
    this.state = {
      visible: false,
    };
  }

-  getCurrentScrollTop = () => {
-    const getTarget = this.props.target || getDefaultTarget;
-    const targetNode = getTarget();
-    if (targetNode === window) {
-      return window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;
-    }
-    return (targetNode as HTMLElement).scrollTop;
-  }
-
-  scrollToTop = (e: React.MouseEvent<HTMLDivElement>) => {
-    const scrollTop = this.getCurrentScrollTop();
+  scrollToTop = (e) => {
+    const scrollTop = currentScrollTop();
    const startTime = Date.now();
    const frameFunc = () => {
      const timestamp = Date.now();
@@ -72,9 +68,8 @@ export default class BackTop extends React.Component<BackTopProps, any> {
    (this.props.onClick || noop)(e);
  }

-  setScrollTop(value: number) {
-    const getTarget = this.props.target || getDefaultTarget;
-    const targetNode = getTarget();
+  setScrollTop(value) {
+    const targetNode = (this.props.target || getDefaultTarget)();
    if (targetNode === window) {
      document.body.scrollTop = value;
      document.documentElement.scrollTop = value;
@@ -87,14 +82,13 @@ export default class BackTop extends React.Component<BackTopProps, any> {
    const { visibilityHeight, target = getDefaultTarget } = this.props;
    const scrollTop = getScroll(target(), true);
    this.setState({
-      visible: scrollTop > (visibilityHeight as number),
+      visible: scrollTop > visibilityHeight,
    });
  }

  componentDidMount() {
-    const getTarget = this.props.target || getDefaultTarget;
-    this.scrollEvent = addEventListener(getTarget(), 'scroll', this.handleScroll);
    this.handleScroll();
+    this.scrollEvent = addEventListener((this.props.target || getDefaultTarget)(), 'scroll', this.handleScroll);
  }

  componentWillUnmount() {
@@ -105,7 +99,10 @@ export default class BackTop extends React.Component<BackTopProps, any> {

  render() {
    const { prefixCls = 'ant-back-top', className = '', children } = this.props;
-    const classString = classNames(prefixCls, className);
+    const classString = classNames({
+      [prefixCls]: true,
+      [className]: !!className,
+    });

    const defaultElement = (
      <div className={`${prefixCls}-content`}>
@@ -121,15 +118,15 @@ export default class BackTop extends React.Component<BackTopProps, any> {
      'visibilityHeight',
    ]);

-    const backTopBtn = this.state.visible ? (
-      <div {...divProps} className={classString} onClick={this.scrollToTop}>
-        {children || defaultElement}
-      </div>
-    ) : null;
-
    return (
      <Animate component="" transitionName="fade">
-        {backTopBtn}
+        {
+          this.state.visible ?
+            <div {...divProps} className={classString} onClick={this.scrollToTop}>
+              {children || defaultElement}
+            </div>
+          : null
+        }
      </Animate>
    );
  }
--- a/components/back-top/index.zh-CN.md
+++ b/components/back-top/index.zh-CN.md
@@ -20,6 +20,5 @@ title: BackTop

 | 参数        | 说明           | 类型               | 默认值       |
 |-------------|----------------|--------------------|--------------|
-| visibilityHeight    | 滚动高度达到此参数值才出现 `BackTop`   | number | 400        |
+| visibilityHeight    | 滚动高度达到此参数值才出现 `BackTop`   | Number | 400        |
 | onClick | 点击按钮的回调函数   | Function | -        |
-| target | 设置需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数 | Function | () => window |
--- a/components/back-top/style/index.less
+++ b/components/back-top/style/index.less
@@ -15,13 +15,13 @@
    height: 40px;
    width: 40px;
    border-radius: 20px;
-    background-color: @back-top-bg;
-    color: @back-top-color;
+    background-color: rgba(64, 64, 64, 0.4);
+    color: #fff;
    text-align: center;
    transition: all .3s @ease-in-out;

    &:hover {
-      background-color: @back-top-hover-bg;
+      background-color: rgba(64, 64, 64, 0.6);
      transition: all .3s @ease-in-out;
    }
  }
--- a/components/badge/ScrollNumber.tsx
+++ b/components/badge/ScrollNumber.tsx
@@ -1,7 +1,9 @@
 import React from 'react';
 import { createElement, Component } from 'react';
+import {findDOMNode} from 'react-dom';
+import isCssAnimationSupported from '../_util/isCssAnimationSupported';
+import assign from 'object-assign';
 import omit from 'omit.js';
-import classNames from 'classnames';

 function getNumberArray(num) {
  return num ?
@@ -17,8 +19,8 @@ export interface ScrollNumberProps {
  count?: string | number;
  component?: string;
  onAnimated?: Function;
-  style?: React.CSSProperties;
-  title?: string | number;
+  height?: number;
+  style: React.CSSProperties;
 }

 export default class ScrollNumber extends Component<ScrollNumberProps, any> {
@@ -27,6 +29,7 @@ export default class ScrollNumber extends Component<ScrollNumberProps, any> {
    count: null,
    onAnimated() {
    },
+    height: 18,
  };

  lastCount: any;
@@ -39,6 +42,12 @@ export default class ScrollNumber extends Component<ScrollNumberProps, any> {
    };
  }

+  componentDidMount() {
+    if (!isCssAnimationSupported()) {
+      findDOMNode(this).className += ' not-support-css-animation';
+    }
+  }
+
  getPositionByNum(num, i) {
    if (this.state.animateStarted) {
      return 10 + num;
@@ -96,15 +105,16 @@ export default class ScrollNumber extends Component<ScrollNumberProps, any> {

  renderCurrentNumber(num, i) {
    const position = this.getPositionByNum(num, i);
+    const height = this.props.height;
    const removeTransition = this.state.animateStarted ||
      (getNumberArray(this.lastCount)[i] === undefined);
    return createElement('span', {
      className: `${this.props.prefixCls}-only`,
      style: {
        transition: removeTransition && 'none',
-        msTransform: `translateY(${-position * 100}%)`,
-        WebkitTransform: `translateY(${-position * 100}%)`,
-        transform: `translateY(${-position * 100}%)`,
+        WebkitTransform: `translateY(${-position * height}px)`,
+        transform: `translateY(${-position * height}px)`,
+        height,
      },
      key: i,
    }, this.renderNumberList(position));
@@ -120,29 +130,19 @@ export default class ScrollNumber extends Component<ScrollNumberProps, any> {
  }

  render() {
-    const { prefixCls, className, style, title, component = 'sup' } = this.props;
    // fix https://fb.me/react-unknown-prop
-    const restProps = omit(this.props, [
+    const props = assign({}, omit(this.props, [
      'count',
      'onAnimated',
      'component',
      'prefixCls',
-    ]);
-    const newProps = {
-      ...restProps,
-      className: classNames(prefixCls, className),
-      title: title as string,
-    };
-    // allow specify the border
-    // mock border-color by box-shadow for compatible with old usage:
-    // <Badge count={4} style={{ backgroundColor: '#fff', color: '#999', borderColor: '#d9d9d9' }} />
-    if (style && style.borderColor) {
-      newProps.style.boxShadow = `0 0 0 1px ${style.borderColor} inset`;
-    }
+    ]), {
+      className: `${this.props.prefixCls} ${this.props.className}`,
+    });
    return createElement(
-      component as any,
-      newProps,
-      this.renderNumberElement(),
+      this.props.component || 'sup',
+      props,
+      this.renderNumberElement()
    );
  }
 }
--- a/components/badge/tests/snapshots/demo.test.js.snap
+++ b/components/badge/tests/snapshots/demo.test.js.snap
--- a/components/badge/tests/demo.test.js
+++ b/components/badge/tests/demo.test.js
@@ -1,3 +0,0 @@
-import demoTest from '../../../tests/shared/demoTest';
-
-demoTest('badge');
--- a/components/badge/demo/99plus.md
+++ b/components/badge/demo/99plus.md
@@ -0,0 +1,27 @@
+---
+order: 1
+title:
+  zh-CN: 大数字
+  en-US: Overflowed count
+---
+
+## zh-CN
+
+超过 99 的会显示为 `99+`。
+
+## en-US
+
+`99+` is displayed when count is larger than `99`.
+
+````jsx
+import { Badge } from 'antd';
+
+ReactDOM.render(<div>
+  <Badge count={99}>
+    <a href="#" className="head-example" />
+  </Badge>
+  <Badge count={200}>
+    <a href="#" className="head-example" />
+  </Badge>
+</div>, mountNode);
+````
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
afc163	bd8016f236	changelog for 2.2.1	2016-11-02 13:38:37 +08:00
afc163	137de1aebf	Fix controlled DatePicker[showTime] not working, close #3665	2016-11-02 13:34:52 +08:00
Benjy Cui	463b9800a4	fix: should check undefined value, close: #3665	2016-11-02 13:34:42 +08:00