changelog for 2.2.1

.antd-tools.config.js

@@ -1,70 +0,0 @@
-const fs = require('fs');
-const path = require('path');
-const packageInfo = require('./package.json');
-
-// We need compile additional content for antd user
-function finalizeCompile() {
-  if (fs.existsSync(path.join(__dirname, './lib'))) {
-    // Build package.json version to lib/version/index.js
-    // prevent json-loader needing in user-side
-    const versionFilePath = path.join(process.cwd(), 'lib', 'version', 'index.js');
-    const versionFileContent = fs.readFileSync(versionFilePath).toString();
-    fs.writeFileSync(
-      versionFilePath,
-      versionFileContent.replace(
-        /require\(('|")\.\.\/\.\.\/package\.json('|")\)/,
-        `{ version: '${packageInfo.version}' }`,
-      ),
-    );
-    // eslint-disable-next-line
-    console.log('Wrote version into lib/version/index.js');
-
-    // Build package.json version to lib/version/index.d.ts
-    // prevent https://github.com/ant-design/ant-design/issues/4935
-    const versionDefPath = path.join(process.cwd(), 'lib', 'version', 'index.d.ts');
-    fs.writeFileSync(
-      versionDefPath,
-      `declare var _default: "${packageInfo.version}";\nexport default _default;\n`,
-    );
-    // eslint-disable-next-line
-    console.log('Wrote version into lib/version/index.d.ts');
-
-    // Build a entry less file to dist/antd.less
-    const componentsPath = path.join(process.cwd(), 'components');
-    let componentsLessContent = '';
-    // Build components in one file: lib/style/components.less
-    fs.readdir(componentsPath, (err, files) => {
-      files.forEach(file => {
-        if (fs.existsSync(path.join(componentsPath, file, 'style', 'index.less'))) {
-          componentsLessContent += `@import "../${path.join(file, 'style', 'index.less')}";\n`;
-        }
-      });
-      fs.writeFileSync(
-        path.join(process.cwd(), 'lib', 'style', 'components.less'),
-        componentsLessContent,
-      );
-    });
-  }
-}
-
-function finalizeDist() {
-  if (fs.existsSync(path.join(__dirname, './dist'))) {
-    // Build less entry file: dist/antd.less
-    fs.writeFileSync(
-      path.join(process.cwd(), 'dist', 'antd.less'),
-      '@import "../lib/style/index.less";\n@import "../lib/style/components.less";',
-    );
-
-    // eslint-disable-next-line
-    console.log('Built a entry less file to dist/antd.less');
-  }
-}
-
-module.exports = {
-  compile: {
-    finalize: finalizeCompile,
-  },
-  dist: {
-    finalize: finalizeDist,
-  },
-};

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["es2015", "react", "stage-0"]
+}

.circleci/config.yml

@@ -1,258 +0,0 @@
-version: 2
-
-references:
-  container_config: &container_config
-    docker:
-      - image: circleci/node:lts
-    working_directory: ~/ant-design
-
-  attach_workspace: &attach_workspace
-    attach_workspace:
-      at: ~/ant-design
-
-  install_react: &install_react
-    run: REACT=15 ./scripts/install-react.sh
-
-  react_15: &react_15
-    environment:
-      REACT: 15
-
-  react_16: &react_16
-    environment:
-      REACT: 16
-
-  workflow: &workflow
-    jobs:
-      - setup:
-          filters:
-            branches:
-              ignore: gh-pages
-      - dist:
-          requires:
-          - setup
-      - compile:
-          requires:
-          - setup
-      - lint:
-          requires:
-            - setup
-      - test_dist:
-          requires:
-            - dist
-      - test_lib:
-          requires:
-            - compile
-      - test_es:
-          requires:
-            - compile
-      - test_dom:
-          requires:
-            - setup
-      - test_node:
-          requires:
-            - setup
-      - test_dist_15:
-          requires:
-            - dist
-      - test_lib_15:
-          requires:
-            - compile
-      - test_es_15:
-          requires:
-            - compile
-      - test_dom_15:
-          requires:
-            - setup
-      - test_node_15:
-          requires:
-            - setup
-      - check_metadata:
-          requires:
-            - setup
-
-jobs:
-  setup:
-    <<: *container_config
-    steps:
-      - checkout
-      - run: node -v
-      - run: npm -v
-      - run: npm install
-      - run:
-          command: |
-            set +eo
-            npm ls
-            true
-      - persist_to_workspace:
-          root: ~/ant-design
-          paths:
-            - node_modules
-      - store_artifacts:
-          path: package-lock.json
-
-  dist:
-    <<: *container_config
-    steps:
-      - checkout
-      - *attach_workspace
-      - run: npm run dist
-      - run: node ./tests/dekko/dist.test.js
-      - run: npm run bundlesize
-      - persist_to_workspace:
-          root: ~/ant-design
-          paths:
-            - dist
-
-  compile:
-    <<: *container_config
-    steps:
-      - checkout
-      - *attach_workspace
-      - run: npm run compile
-      - run: node ./tests/dekko/lib.test.js
-      - persist_to_workspace:
-          root: ~/ant-design
-          paths:
-            - lib
-            - es
-
-  lint:
-    <<: *container_config
-    steps:
-      - checkout
-      - *attach_workspace
-      - run: npm run lint
-
-  test_dist:
-    <<: *container_config
-    <<: *react_16
-    steps:
-      - checkout
-      - *attach_workspace
-      - run:
-          command: npm test -- -w 1
-          environment:
-            LIB_DIR: dist
-
-  test_lib:
-    <<: *container_config
-    <<: *react_16
-    steps:
-      - checkout
-      - *attach_workspace
-      - run:
-          command: npm test -- -w 1
-          environment:
-            LIB_DIR: lib
-
-  test_es:
-    <<: *container_config
-    <<: *react_16
-    steps:
-      - checkout
-      - *attach_workspace
-      - run:
-          command: npm test -- -w 1
-          environment:
-            LIB_DIR: es
-
-  test_dom:
-    <<: *container_config
-    <<: *react_16
-    steps:
-      - checkout
-      - *attach_workspace
-      - run: npm test -- -w 1 --coverage
-      - run: bash <(curl -s https://codecov.io/bash)
-
-  test_node:
-    <<: *container_config
-    <<: *react_16
-    steps:
-      - checkout
-      - *attach_workspace
-      - run: npm run test-node -- -w 1
-
-  test_dist_15:
-    <<: *container_config
-    <<: *react_15
-    steps:
-      - checkout
-      - *attach_workspace
-      - *install_react
-      - run:
-          command: npm test -- -w 1 -u
-          environment:
-            LIB_DIR: dist
-            REACT: 15
-
-  test_lib_15:
-    <<: *container_config
-    <<: *react_15
-    steps:
-      - checkout
-      - *attach_workspace
-      - *install_react
-      - run:
-          command: npm test -- -w 1 -u
-          environment:
-            LIB_DIR: lib
-            REACT: 15
-
-  test_es_15:
-    <<: *container_config
-    <<: *react_15
-    steps:
-      - checkout
-      - *attach_workspace
-      - *install_react
-      - run:
-          command: npm test -- -w 1 -u
-          environment:
-            LIB_DIR: es
-            REACT: 15
-
-  test_dom_15:
-    <<: *container_config
-    <<: *react_15
-    steps:
-      - checkout
-      - *attach_workspace
-      - *install_react
-      - run:
-          command: npm test -- -w 1 -u
-          environment:
-            REACT: 15
-
-  test_node_15:
-    <<: *container_config
-    <<: *react_15
-    steps:
-      - checkout
-      - *attach_workspace
-      - *install_react
-      - run:
-          command: npm run test-node -- -w 1 -u
-          environment:
-            REACT: 15
-
-  check_metadata:
-    <<: *container_config
-    steps:
-      - checkout
-      - *attach_workspace
-      - run: node ./scripts/check-demo.js
-
-workflows:
-  version: 2
-  build_test:
-    <<: *workflow
-  nightly:
-    <<: *workflow
-    triggers:
-      - schedule:
-          cron: "0 0 * * *"
-          filters:
-            branches:
-              only:
-                - master

.codecov.yml

@@ -1,9 +0,0 @@
-codecov:
-  branch: master
-
-coverage:
-  status:
-    project:
-      default:
-        # Fail the status if coverage drops by >= 0.1%
-        threshold: 0.1

.codesandbox/ci.json

@@ -1,3 +0,0 @@
-{
-  "sandboxes": ["antd-reproduction-template-6e93z"]
-}

.depslintrc.js

@@ -1,18 +0,0 @@
-module.exports = {
-  ignore: [
-    '**/~*/**',
-    '**/_*/**',
-    '**/icon/**',
-    '**/__tests__/**',
-    '**/style/**',
-    '**/locale/**',
-    '**/*-provider/**',
-    '**/*.json',
-  ],
-  modulePattern: [
-    {
-      pattern: /ConfigConsumer.*renderEmpty/ms,
-      module: '../empty',
-    },
-  ],
-};

.editorconfig

@@ -1,4 +1,4 @@
-# 🎨 editorconfig.org
+# editorconfig.org
 
 root = true
 

.eslintignore

@@ -1,15 +0,0 @@
-components/**/*.js
-components/**/*.jsx
-!components/*/__tests__/**/*.js
-!components/*/demo/*
-!.*.js
-# Docs templates
-site/theme/template/IconDisplay/*.js
-site/theme/template/IconDisplay/*.jsx
-typings
-es/**/*
-lib/**/*
-node_modules
-_site
-dist
-**/*.d.ts

.eslintrc.js

@@ -1,120 +1,63 @@
 const eslintrc = {
-  extends: [
-    'airbnb',
-    'prettier',
-    'plugin:jest/recommended',
-    'plugin:react/recommended',
-    'plugin:import/typescript',
-    'prettier/react',
-  ],
+  extends: ['eslint-config-airbnb'],
   env: {
     browser: true,
     node: true,
-    jasmine: true,
+    mocha: true,
     jest: true,
     es6: true,
   },
-  settings: {
-    react: {
-      version: '16.9',
+  parser: 'babel-eslint',
+  parserOptions: {
+    ecmaVersion: 6,
+    ecmaFeatures: {
+      jsx: true,
+      experimentalObjectRestSpread: true,
     },
   },
-  parser: '@typescript-eslint/parser',
-  plugins: ['markdown', 'react', 'babel', 'jest', '@typescript-eslint'],
-  // https://github.com/typescript-eslint/typescript-eslint/issues/46#issuecomment-470486034
-  overrides: [
-    {
-      files: ['*.ts', '*.tsx'],
-      rules: {
-        '@typescript-eslint/no-unused-vars': [2, { args: 'none' }],
-      },
-    },
+  plugins: [
+    'markdown',
+    'react',
+    'babel',
   ],
   rules: {
-    camelcase: 0,
-    'react/jsx-one-expression-per-line': 0,
+    'func-names': 0,
+    'arrow-body-style': 0,
+    'react/sort-comp': 0,
     'react/prop-types': 0,
-    'react/forbid-prop-types': 0,
+    'react/jsx-first-prop-new-line': 0,
+    'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx', '.md'] }],
+    'import/no-unresolved': 0,
+    'import/no-extraneous-dependencies': 0,
+    'no-param-reassign': 0,
+    'no-return-assign': 0,
+    'max-len': 0,
+    'consistent-return': 0,
+    'no-redeclare': 0,
+    'react/require-extension': 0,
     'react/jsx-indent': 0,
-    'react/jsx-wrap-multilines': ['error', { declaration: false, assignment: false }],
-    'import/no-extraneous-dependencies': [
-      'error',
-      {
-        devDependencies: [
-          'site/**',
-          'tests/**',
-          'scripts/**',
-          '**/*.test.js',
-          '**/__tests__/*',
-          '*.config.js',
-          '**/*.md',
-        ],
-      },
-    ],
     'jsx-a11y/no-static-element-interactions': 0,
     'jsx-a11y/anchor-has-content': 0,
-    'jsx-a11y/click-events-have-key-events': 0,
-    'jsx-a11y/anchor-is-valid': 0,
-    'jsx-a11y/no-noninteractive-element-interactions': 0,
-    'comma-dangle': ['error', 'always-multiline'],
-    'react/jsx-filename-extension': 0,
-    'react/state-in-constructor': 0,
-    'react/jsx-props-no-spreading': 0,
-    'prefer-destructuring': 0, // TODO: remove later
-    'consistent-return': 0, // TODO: remove later
-    'no-return-assign': 0, // TODO: remove later
-    'no-param-reassign': 0, // TODO: remove later
-    'react/destructuring-assignment': 0, // TODO: remove later
-    'react/no-did-update-set-state': 0, // TODO: remove later
-    'react/require-default-props': 0,
-    'react/default-props-match-prop-types': 0,
-    'import/no-cycle': 0,
-    'react/no-find-dom-node': 0,
-    'no-underscore-dangle': 0,
-    'react/sort-comp': 0,
-    // label-has-for has been deprecated
-    // https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/label-has-for.md
-    'jsx-a11y/label-has-for': 0,
-    // for (let i = 0; i < len; i++)
-    'no-plusplus': 0,
-    // https://eslint.org/docs/rules/no-continue
-    // labeledLoop is conflicted with `eslint . --fix`
-    'no-continue': 0,
-    'react/display-name': 0,
-    // ban this for Number.isNaN needs polyfill
-    'no-restricted-globals': 0,
-    'max-classes-per-file': 0,
-    'react/static-property-placement': 0,
-    'jest/no-test-callback': 0,
-    'jest/expect-expect': 0,
-    'import/extensions': 0,
-  },
-  globals: {
-    gtag: true,
+    'react/no-danger': 0,
   },
 };
 
 if (process.env.RUN_ENV === 'DEMO') {
-  eslintrc.globals = Object.assign(eslintrc.globals, {
+  eslintrc.globals = {
     React: true,
     ReactDOM: true,
     mountNode: true,
-  });
+  };
 
   Object.assign(eslintrc.rules, {
-    indent: 0,
     'no-console': 0,
     'no-plusplus': 0,
     'eol-last': 0,
-    'no-script-url': 0,
     'prefer-rest-params': 0,
-    'react/no-access-state-in-setstate': 0,
-    'react/destructuring-assignment': 0,
     'react/no-multi-comp': 0,
+    'react/prefer-es6-class': 0,
     'jsx-a11y/href-no-hash': 0,
-    'import/no-extraneous-dependencies': 0,
-    'import/no-unresolved': 0,
-    'jsx-a11y/control-has-associated-label': 0,
+    'import/newline-after-import': 0,
   });
 }
 

.github/CONTRIBUTING.md

@@ -1,13 +1,56 @@
 # Contributing to Ant Design
 
-Want to contribute to Ant Design? There are a few things you need to know.
+The following is a set of guidelines for contributing to Ant Design. Please spend several minutes in reading these guidelines before you create an issue or pull request.
 
-We wrote a **[contribution guide](https://ant.design/docs/react/contributing)** to help you get started.
+Anyway, these are just guidelines, not rules, use your best judgment and feel free to propose changes to this document in a pull request.
 
----
 
-# 参与共建
+## Do your homework before asking a question
 
-想要给 Ant Design 贡献自己的一份力量？
+It's a great idea to read Eric Steven Raymond's [How To Ask Questions The Smart Way](http://www.catb.org/esr/faqs/smart-questions.html) twice before asking a question. But if you are busy now, I recommend to read [Don't post homework questions](http://www.catb.org/esr/faqs/smart-questions.html#homework) first.
 
-我们写了一份 **[贡献指南](https://ant.design/docs/react/contributing-cn)** 来帮助你开始。
+The following guidelines are about *How to avoid Homework Questions*.
+
+### 1. Read the documentation.
+
+It sad but true that someone just glance(not read) [Ant Design's documentation](http://ant.design/). Please read the documentation closely. What's more, you can modify and run our demo with [CodePen](http://codepen.io/benjycui/pen/KgPZrE?editors=001). It's helpful to understand our documentation.
+
+Tips: choose the corresponding documentation with versions selector which in the bottom-right corner.
+
+### 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 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
+
+Your questions may be asked and solved by others. So please spend several minutes on searching. Remember [DRY](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself), both code and questions.
+
+P.S.
+
+1. [FAQ](https://github.com/ant-design/ant-design/wiki/FAQ)
+1. [Issues list](https://github.com/ant-design/ant-design/issues)
+
+## Close your issue if it's solved
+
+It is a good habit which will save maintainers' time. Thank you!
+
+## Providing a demo while reporting a bug
+
+It would be helpful to provide a demo which can re-produce the bug 100%. Please fork this [CodePen](http://codepen.io/benjycui/pen/KgPZrE?editors=001) and re-produce the bug you met. Then, create an issue. The most important thing is: double check before claiming that you have found a bug.
+
+
+## Tips about Feature Request
+
+If you believe that Ant Design should provide some features, but it does not. You could create an issue to discuss. However, Ant Design is not Swiss Army Knife, there are some features which Ant Design will not support:
+
+1. Request or operate data
+
+
+## Tips about Pull Request
+
+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 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.

.github/FUNDING.yml

@@ -1,8 +0,0 @@
-# These are supported funding model platforms
-
-github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
-open_collective: ant-design
-patreon: ant_design
-ko_fi: # Replace with a single Ko-fi username
-tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
-custom: # Replace with a single custom sponsorship URL

.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 -->

.github/ISSUE_TEMPLATE/----please-use-new-issue-ant-design---.md

@@ -1,11 +0,0 @@
----
-name: '⚠️  Please use new-issue.ant.design ⚠️'
-about: The issue which is not created via http://new-issue.ant.design will be closed immediately.
-labels:
----
-
-The issue which is not created via http://new-issue.ant.design will be closed immediately.
-
----
-
-注意：不是用 http://new-issue.ant.design 创建的 issue 会被立即关闭。

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,54 +1,8 @@
-<!--
-First of all, thank you for your contribution! 😄
+First of all, thanks for your contribution! :-)
 
-New feature please send pull request to feature branch, and rest to master branch.
-Pull request will be merged after one of collaborators approve.
-Please makes sure that these form are filled before submitting your pull request, thank you!
+Please makes sure these boxes are checked before submitting your PR, thank you!
 
-[[中文版模板 / Chinese template](https://github.com/ant-design/ant-design/blob/master/.github/PULL_REQUEST_TEMPLATE/pr_cn.md)]
--->
-
-### 🤔 This is a ...
-
-- [ ] New feature
-- [ ] Bug fix
-- [ ] Site / document update
-- [ ] Component style update
-- [ ] TypeScript definition update
-- [ ] Refactoring
-- [ ] Code style optimization
-- [ ] Test Case
-- [ ] Branch merge
-- [ ] Other (about what?)
-
-### 🔗 Related issue link
-
-<!--
-1. Describe the source of requirement, like related issue link.
--->
-
-### 💡 Background and solution
-
-<!--
-1. Describe the problem and the scenario.
-2. GIF or snapshot should be provided if includes UI/interactive modification.
-3. How to fix the problem, and list final API implementation and usage sample if that is an new feature.
--->
-
-### 📝 Changelog
-
-<!--
-Describe changes from userside, and list all potential break changes or other risks.
---->
-
-| Language   | Changelog |
-| ---------- | --------- |
-| 🇺🇸 English |           |
-| 🇨🇳 Chinese |           |
-
-### ☑️ Self Check before Merge
-
-- [ ] Doc is updated/provided or not needed
-- [ ] Demo is updated/provided or not needed
-- [ ] TypeScript definition is updated/provided or not needed
-- [ ] Changelog is provided or not needed
+* [ ] 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.

.github/PULL_REQUEST_TEMPLATE/pr_cn.md

@@ -1,56 +0,0 @@
-<!--
-首先，感谢你的贡献！😄
-
-新特性请提交至 feature 分支，其余可提交至 master 分支。
-在一个维护者审核通过后合并。
-请确保填写以下 pull request 的信息，谢谢！~
-
-[[English Template / 英文模板](?expand=1)]
--->
-
-### 🤔 这个变动的性质是？
-
-- [ ] 新特性提交
-- [ ] 日常 bug 修复
-- [ ] 站点、文档改进
-- [ ] 组件样式改进
-- [ ] TypeScript 定义更新
-- [ ] 重构
-- [ ] 代码风格优化
-- [ ] 测试用例
-- [ ] 分支合并
-- [ ] 其他改动（是关于什么的改动？）
-
-### 🔗 相关 Issue
-
-<!--
-1. 描述相关需求的来源，如相关的 issue 讨论链接。
--->
-
-### 💡 需求背景和解决方案
-
-<!--
-1. 要解决的具体问题。
-2. 列出最终的 API 实现和用法。
-3. 涉及UI/交互变动需要有截图或 GIF。
--->
-
-### 📝 更新日志怎么写？
-
-<!--
-> 从用户角度描述具体变化，以及可能的 breaking change 和其他风险？
--->
-
-| 语言    | 更新描述 |
-| ------- | -------- |
-| 🇺🇸 英文 |          |
-| 🇨🇳 中文 |          |
-
-- 中文（可选）:
-
-### ☑️ 请求合并前的自查清单
-
-- [ ] 文档已补充或无须补充
-- [ ] 代码演示已提供或无须提供
-- [ ] TypeScript 定义已补充或无须补充
-- [ ] Changelog 已提供或无须提供

.github/config.yml

@@ -1,10 +0,0 @@
-# Configuration for request-info - https://github.com/behaviorbot/request-info
-
-# *Required* Comment to reply with
-requestInfoReplyComment: >
-  We would appreciate it if you could provide us with more info about this issue/pr!
-  Please provide a online reproduction by forking this link https://u.ant.design/codesandbox-repro or a minimal GitHub repository.
-  Issues labeled by Need Reproduce will be closed if no activities in 7 days.
-
-# *OPTIONAL* Label to be added to Issues and Pull Requests with insufficient information given
-requestInfoLabelToAdd: needs-more-info

.github/lock.yml

@@ -1,14 +0,0 @@
-# Configuration for lock-threads - https://github.com/dessant/lock-threads
-
-# Number of days of inactivity before a closed issue or pull request is locked
-daysUntilLock: 365
-# Comment to post before locking. Set to `false` to disable
-lockComment: >
-  This thread has been automatically locked because it has not had recent
-  activity. Please open a new issue for related bugs and link to relevant
-  comments in this thread.
-# Issues or pull requests with these labels will not be locked
-# exemptLabels:
-#   - no-locking
-# Limit to only `issues` or `pulls`
-only: issues

.github/weekly-digest.yml

@@ -1,7 +0,0 @@
-# Configuration for weekly-digest - https://github.com/apps/weekly-digest
-publishDay: sun
-canPublishIssues: true
-canPublishPullRequests: true
-canPublishContributors: true
-canPublishStargazers: true
-canPublishCommits: true

.github/workflows/deploy-site.yml

@@ -1,30 +0,0 @@
-name: Deploy website
-on:
-  release:
-    types: [published]
-    branches:
-      - 3.x-stable
-
-jobs:
-  build-and-deploy:
-    runs-on: ubuntu-latest
-    steps:
-    - name: checkout
-      uses: actions/checkout@master
-
-    - name: install
-      run: npm install
-
-    - name: build
-      run: npm run predeploy
-
-    - name: deploy
-      uses: peaceiris/actions-gh-pages@v2
-      env:
-        ACTIONS_DEPLOY_KEY: ${{ secrets.ACTIONS_DEPLOY_KEY }}
-        # PERSONAL_TOKEN: ${{ secrets.PERSONAL_TOKEN }}
-        # GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        PUBLISH_BRANCH: gh-pages
-        PUBLISH_DIR: ./_site
-      with:
-        emptyCommits: false

.github/workflows/lighthouse-ci.yml

@@ -1,19 +0,0 @@
-name: Lighthouse
-on: push
-jobs:
-  lighthouse:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v1
-      - name: Audit URLs using Lighthouse
-        uses: treosh/lighthouse-ci-action@v2
-        with:
-          urls: |
-            https://ant.design
-            https://ant.design/docs/react/introduce-cn
-            https://ant.design/components/button-cn
-      - name: Save results
-        uses: actions/upload-artifact@v1
-        with:
-          name: lighthouse-results
-          path: '.lighthouseci' # This will save the Lighthouse results as .json files

.github/workflows/rebase.yml

@@ -1,14 +0,0 @@
-on:
-  issue_comment:
-    types: [created]
-name: Automatic Rebase
-jobs:
-  rebase:
-    name: Rebase
-    runs-on: ubuntu-latest
-    steps:
-    - uses: actions/checkout@master
-    - name: Automatic Rebase
-      uses: cirrus-actions/rebase@master
-      env:
-        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/test.yml

@@ -1,208 +0,0 @@
-name: test
-
-on: [push]
-
-jobs:
-  setup:
-    runs-on: ubuntu-latest
-    steps:
-      - name: checkout
-        uses: actions/checkout@master
-
-      - name: cache package-lock.json
-        uses: actions/cache@v1
-        with:
-          path: package-temp-dir
-          key: lock-${{ github.sha }}
-
-      - name: create package-lock.json
-        run: npm i --package-lock-only
-
-      - name: hack for singe file
-        run: |
-          if [ ! -d "package-temp-dir" ]; then
-            mkdir package-temp-dir
-          fi
-          cp package-lock.json package-temp-dir
-
-      - name: cache node_modules
-        id: node_modules_cache_id
-        uses: actions/cache@v1
-        with:
-          path: node_modules
-          key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
-
-      - name: install
-        if: steps.node_modules_cache_id.outputs.cache-hit != 'true'
-        run: npm ci
-
-  compile:
-    runs-on: ubuntu-latest
-    steps:
-      - name: checkout
-        uses: actions/checkout@master
-
-      - name: restore cache from package-lock.json
-        uses: actions/cache@v1
-        with:
-          path: package-temp-dir
-          key: lock-${{ github.sha }}
-
-      - name: restore cache from node_modules
-        uses: actions/cache@v1
-        with:
-          path: node_modules
-          key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
-
-      - name: cache lib
-        uses: actions/cache@v1
-        with:
-          path: lib
-          key: lib-${{ github.sha }}
-
-      - name: cache es
-        uses: actions/cache@v1
-        with:
-          path: es
-          key: es-${{ github.sha }}
-
-      - name: compile
-        run: npm run compile
-
-      - name: check
-        run: node ./tests/dekko/lib.test.js
-    needs: setup
-
-  dist:
-    runs-on: ubuntu-latest
-    steps:
-      - name: checkout
-        uses: actions/checkout@master
-
-      - name: restore cache from package-lock.json
-        uses: actions/cache@v1
-        with:
-          path: package-temp-dir
-          key: lock-${{ github.sha }}
-
-      - name: restore cache from node_modules
-        uses: actions/cache@v1
-        with:
-          path: node_modules
-          key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
-
-      - name: dist
-        run: npm run dist
-
-      - name: check
-        run: node ./tests/dekko/dist.test.js
-
-      - name: test
-        run: npm test
-        env:
-          LIB_DIR: dist
-    needs: setup
-
-  lint:
-    runs-on: ubuntu-latest
-    steps:
-      - name: checkout
-        uses: actions/checkout@master
-
-      - name: restore cache from package-lock.json
-        uses: actions/cache@v1
-        with:
-          path: package-temp-dir
-          key: lock-${{ github.sha }}
-
-      - name: restore cache from node_modules
-        uses: actions/cache@v1
-        with:
-          path: node_modules
-          key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
-
-      - name: lint
-        run: npm run lint
-    needs: setup
-
-  node:
-    runs-on: ubuntu-latest
-    steps:
-      - name: checkout
-        uses: actions/checkout@master
-
-      - name: restore cache from package-lock.json
-        uses: actions/cache@v1
-        with:
-          path: package-temp-dir
-          key: lock-${{ github.sha }}
-
-      - name: restore cache from node_modules
-        uses: actions/cache@v1
-        with:
-          path: node_modules
-          key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
-
-      - name: test
-        run: npm test
-    needs: setup
-
-  lib:
-    runs-on: ubuntu-latest
-    steps:
-      - name: checkout
-        uses: actions/checkout@master
-
-      - name: restore cache from package-lock.json
-        uses: actions/cache@v1
-        with:
-          path: package-temp-dir
-          key: lock-${{ github.sha }}
-
-      - name: restore cache from node_modules
-        uses: actions/cache@v1
-        with:
-          path: node_modules
-          key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
-
-      - name: restore cache from lib
-        uses: actions/cache@v1
-        with:
-          path: lib
-          key: lib-${{ github.sha }}
-
-      - name: test
-        run: npm test
-        env:
-          LIB_DIR: lib
-    needs: compile
-
-  es:
-    runs-on: ubuntu-latest
-    steps:
-      - name: checkout
-        uses: actions/checkout@master
-
-      - name: restore cache from package-lock.json
-        uses: actions/cache@v1
-        with:
-          path: package-temp-dir
-          key: lock-${{ github.sha }}
-
-      - name: restore cache from node_modules
-        uses: actions/cache@v1
-        with:
-          path: node_modules
-          key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
-
-      - name: restore cache from es
-        uses: actions/cache@v1
-        with:
-          path: es
-          key: es-${{ github.sha }}
-
-      - name: test
-        run: npm test
-        env:
-          LIB_DIR: es
-    needs: compile

.gitignore

@@ -15,7 +15,6 @@ Thumbs.db
 *.swp
 *.swo
 *.log
-*.log.*
 *.json.gzip
 node_modules/
 .buildpath
@@ -26,20 +25,8 @@ _site
 _data
 dist
 /lib
-/es
 elasticsearch-*
 config/base.yaml
-/.vscode/
-/coverage
-yarn.lock
-package-lock.json
 components/**/*.js
 components/**/*.jsx
-!components/**/__tests__/**/*.js
-!components/**/__tests__/**/*.js.snap
-/.history
-# Docs templates
-site/theme/template/IconDisplay/*.js
-site/theme/template/IconDisplay/*.jsx
-site/theme/template/IconDisplay/fields.js
-*.tmp
+/.vscode/

.gitpod.yml

@@ -1,8 +0,0 @@
-ports:
-- port: 8001
-  onOpen: open-preview
-tasks:
-- before: >
-    export DEV_HOST=$(gp url 8001)
-  init: npm install
-  command: npm start

.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 = {
-  verbose: true,
-  setupFiles: ['./tests/setup.js'],
-  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'md'],
-  modulePathIgnorePatterns: ['/_site/'],
-  moduleNameMapper: {
-    '^dnd-core$': 'dnd-core/dist/cjs',
-    '^react-dnd$': 'react-dnd/dist/cjs',
-    '^react-dnd-html5-backend$': 'react-dnd-html5-backend/dist/cjs',
-    '^react-dnd-touch-backend$': 'react-dnd-touch-backend/dist/cjs',
-    '^react-dnd-test-backend$': 'react-dnd-test-backend/dist/cjs',
-    '^react-dnd-test-utils$': 'react-dnd-test-utils/dist/cjs',
-  },
-  testPathIgnorePatterns: ['/node_modules/', 'dekko', 'node'],
-  transform: {
-    '\\.tsx?$': './node_modules/@ant-design/tools/lib/jest/codePreprocessor',
-    '\\.js$': './node_modules/@ant-design/tools/lib/jest/codePreprocessor',
-    '\\.md$': './node_modules/@ant-design/tools/lib/jest/demoPreprocessor',
-    '\\.(jpg|png|gif|svg)$': './node_modules/@ant-design/tools/lib/jest/imagePreprocessor',
-  },
-  testRegex: `${libDir === 'dist' ? 'demo' : '.*'}\\.test\\.js$`,
-  collectCoverageFrom: [
-    'components/**/*.{ts,tsx}',
-    '!components/*/style/index.tsx',
-    '!components/style/index.tsx',
-    '!components/*/locale/index.tsx',
-    '!components/*/__tests__/type.test.tsx',
-    '!components/**/*/interface.{ts,tsx}',
-  ],
-  transformIgnorePatterns,
-  snapshotSerializers: ['enzyme-to-json/serializer'],
-  globals: {
-    'ts-jest': {
-      tsConfig: './tsconfig.test.json',
-    },
-  },
-  testURL: 'http://localhost',
-};

.jest.node.js

@@ -1,23 +0,0 @@
-const { moduleNameMapper, transformIgnorePatterns } = require('./.jest');
-
-// jest config for server render environment
-module.exports = {
-  setupFiles: ['./tests/setup.js'],
-  moduleFileExtensions: ['ts', 'tsx', 'js', 'md'],
-  moduleNameMapper,
-  transform: {
-    '\\.tsx?$': './node_modules/@ant-design/tools/lib/jest/codePreprocessor',
-    '\\.js$': './node_modules/@ant-design/tools/lib/jest/codePreprocessor',
-    '\\.md$': './node_modules/@ant-design/tools/lib/jest/demoPreprocessor',
-    '\\.(jpg|png|gif|svg)$': './node_modules/@ant-design/tools/lib/jest/imagePreprocessor',
-  },
-  testRegex: 'demo\\.test\\.js$',
-  testEnvironment: 'node',
-  transformIgnorePatterns,
-  snapshotSerializers: ['enzyme-to-json/serializer'],
-  globals: {
-    'ts-jest': {
-      tsConfigFile: './tsconfig.test.json',
-    },
-  },
-};

.jest.site.js

@@ -1,22 +0,0 @@
-const { moduleNameMapper, transformIgnorePatterns } = require('./.jest');
-
-// jest config for server render environment
-module.exports = {
-  moduleFileExtensions: ['ts', 'tsx', 'js', 'md'],
-  moduleNameMapper,
-  transform: {
-    '\\.tsx?$': './node_modules/@ant-design/tools/lib/jest/codePreprocessor',
-    '\\.js$': './node_modules/@ant-design/tools/lib/jest/codePreprocessor',
-    '\\.md$': './node_modules/@ant-design/tools/lib/jest/demoPreprocessor',
-    '\\.(jpg|png|gif|svg)$': './node_modules/@ant-design/tools/lib/jest/imagePreprocessor',
-  },
-  testRegex: 'check-site\\.js$',
-  testEnvironment: 'node',
-  transformIgnorePatterns,
-  snapshotSerializers: ['enzyme-to-json/serializer'],
-  globals: {
-    'ts-jest': {
-      tsConfigFile: './tsconfig.test.json',
-    },
-  },
-};

.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"
+  ]
+}

.npmignore

@@ -1 +0,0 @@
-~*

.prettierignore

@@ -1,27 +0,0 @@
-**/*.svg
-package.json
-.umi
-.umi-production
-AUTHORS.txt
-lib/
-es/
-dist/
-_site/
-coverage/
-CNAME
-LICENSE
-yarn.lock
-netlify.toml
-yarn-error.log
-*.sh
-*.snap
-components/*/*.js
-components/*/*.jsx
-.gitignore
-.npmignore
-.prettierignore
-.DS_Store
-.editorconfig
-.eslintignore
-**/*.yml
-components/style/color/*.less

.prettierrc

@@ -1,14 +0,0 @@
-{
-  "singleQuote": true,
-  "trailingComma": "all",
-  "printWidth": 100,
-  "proseWrap": "never",
-  "overrides": [
-    {
-      "files": ".prettierrc",
-      "options": {
-        "parser": "json"
-      }
-    }
-  ]
-}

.stylelintrc.json

@@ -1,16 +0,0 @@
-{
-  "extends": [
-    "stylelint-config-standard",
-    "stylelint-config-rational-order",
-    "stylelint-config-prettier"
-  ],
-  "plugins": ["stylelint-order", "stylelint-declaration-block-no-ignored-properties"],
-  "rules": {
-    "comment-empty-line-before": null,
-    "function-name-case": ["lower", { "ignoreFunctions": ["/colorPalette/"] }],
-    "no-invalid-double-slash-comments": null,
-    "no-descending-specificity": null,
-    "declaration-empty-line-before": null
-  },
-  "ignoreFiles": ["components/style/color/{bezierEasing,colorPalette,tinyColor}.less"]
-}

.travis.yml

@@ -3,29 +3,4 @@ sudo: false
 language: node_js
 
 node_js:
-  - 11
-
-cache:
-  directories:
-    - $HOME/.npm
-
-matrix:
-  fast_finish: true
-  include:
-    - env: TEST_TYPE=lint
-    - env: REACT=16 TEST_TYPE=test:dist
-    - env: REACT=16 TEST_TYPE=test:lib
-    - env: REACT=16 TEST_TYPE=test:es
-    - env: REACT=16 TEST_TYPE=test:dom
-    - env: REACT=16 TEST_TYPE=test:node
-    - env: REACT=15 TEST_TYPE=test:dist
-    - env: REACT=15 TEST_TYPE=test:lib
-    - env: REACT=15 TEST_TYPE=test:es
-    - env: REACT=15 TEST_TYPE=test:dom
-    - env: REACT=15 TEST_TYPE=test:node
-
-before_script:
-  - scripts/install-react.sh
-
-script:
-  - scripts/travis-script.sh
+  - "6"

CNAME

@@ -1 +0,0 @@
-ant.design

CODEOWNERS

@@ -1,12 +0,0 @@
-# CODEOWNERS syntax
-# A CODEOWNERS file uses a pattern that follows the same rules used in gitignore files.
-# The pattern is followed by one or more GitHub usernames or team names using the standard @username or @org/team-name format.
-# You can also refer to a user by an email address that has been added to their GitHub account, for example user@example.com.
-
-# no default file owner
-#/*                               @afc163
-/components/tree/*                @zombieJ
-/components/tree-select/*         @zombieJ
-
-# ...
-# other components

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/

LICENSE

@@ -1,6 +1,6 @@
 MIT LICENSE
 
-Copyright (c) 2015-present Ant UED, https://xtech.antfin.com/
+Copyright (c) 2015-present Alipay.com, https://www.alipay.com/
 
 Permission is hereby granted, free of charge, to any person obtaining
 a copy of this software and associated documentation files (the

README-zh_CN.md

@@ -1,145 +1,86 @@
 <p align="center">
   <a href="http://ant.design">
-    <img width="200" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg">
+    <img width="320" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg">
   </a>
 </p>
 
-<h1 align="center">Ant Design</h1>
+# Ant Design
+[![](https://img.shields.io/travis/ant-design/ant-design.svg?style=flat-square)](https://travis-ci.org/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)
+[![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)
 
-<div align="center">
+一套企业级的 UI 设计语言和 React 实现。
 
-一套企业级 UI 设计语言和 React 组件库。
+## 特性
 
-[![CircleCI branch](https://img.shields.io/circleci/project/github/ant-design/ant-design/master.svg?style=flat-square)](https://circleci.com/gh/ant-design/ant-design) ![CI Status](https://github.com/ant-design/ant-design/workflows/Node%20CI/badge.svg) [![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) [![](https://flat.badgen.net/npm/v/antd?icon=npm)](https://www.npmjs.com/package/antd) [![](https://badgen.net/npm/v/antd/next)](https://www.npmjs.com/package/antd) [![NPM downloads](http://img.shields.io/npm/dm/antd.svg?style=flat-square)](http://npmjs.com/antd)
+- 提炼和服务企业级中后台产品的交互语言和视觉风格。
+- [React Component](http://react-component.github.io/badgeboard/) 基础上精心封装的高质量 UI 组件。
+- 使用 TypeScript 构建，提供完整的类型定义文件。
+- 基于 npm + webpack + babel + [dora](https://github.com/dora-js/dora) + [dva](https://github.com/dvajs/dva) 的企业级业务开发框架。
 
-[![Dependencies](https://img.shields.io/david/ant-design/ant-design.svg?style=flat-square)](https://david-dm.org/ant-design/ant-design) [![DevDependencies](https://img.shields.io/david/dev/ant-design/ant-design.svg?style=flat-square)](https://david-dm.org/ant-design/ant-design?type=dev) [![Total alerts](https://flat.badgen.net/lgtm/alerts/g/ant-design/ant-design)](https://lgtm.com/projects/g/ant-design/ant-design/alerts/) [![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Fant-design%2Fant-design.svg?type=shield)](https://app.fossa.io/projects/git%2Bgithub.com%2Fant-design%2Fant-design?ref=badge_shield) [![Issues need help](https://flat.badgen.net/github/label-issues/ant-design/ant-design/help%20wanted/open)](https://github.com/ant-design/ant-design/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22)
-
-[![](https://img.shields.io/twitter/follow/AntDesignUI.svg?label=Ant%20Design&style=social)](https://twitter.com/AntDesignUI) [![Gitter](https://img.shields.io/gitter/room/ant-design/ant-design-english.svg?style=flat-square&logoWidth=20&logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjEyMzUiIGhlaWdodD0iNjUwIiB2aWV3Qm94PSIwIDAgNzQxMCAzOTAwIj4NCjxyZWN0IHdpZHRoPSI3NDEwIiBoZWlnaHQ9IjM5MDAiIGZpbGw9IiNiMjIyMzQiLz4NCjxwYXRoIGQ9Ik0wLDQ1MEg3NDEwbTAsNjAwSDBtMCw2MDBINzQxMG0wLDYwMEgwbTAsNjAwSDc0MTBtMCw2MDBIMCIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjMwMCIvPg0KPHJlY3Qgd2lkdGg9IjI5NjQiIGhlaWdodD0iMjEwMCIgZmlsbD0iIzNjM2I2ZSIvPg0KPGcgZmlsbD0iI2ZmZiI%2BDQo8ZyBpZD0iczE4Ij4NCjxnIGlkPSJzOSI%2BDQo8ZyBpZD0iczUiPg0KPGcgaWQ9InM0Ij4NCjxwYXRoIGlkPSJzIiBkPSJNMjQ3LDkwIDMxNy41MzQyMzAsMzA3LjA4MjAzOSAxMzIuODczMjE4LDE3Mi45MTc5NjFIMzYxLjEyNjc4MkwxNzYuNDY1NzcwLDMwNy4wODIwMzl6Ii8%2BDQo8dXNlIHhsaW5rOmhyZWY9IiNzIiB5PSI0MjAiLz4NCjx1c2UgeGxpbms6aHJlZj0iI3MiIHk9Ijg0MCIvPg0KPHVzZSB4bGluazpocmVmPSIjcyIgeT0iMTI2MCIvPg0KPC9nPg0KPHVzZSB4bGluazpocmVmPSIjcyIgeT0iMTY4MCIvPg0KPC9nPg0KPHVzZSB4bGluazpocmVmPSIjczQiIHg9IjI0NyIgeT0iMjEwIi8%2BDQo8L2c%2BDQo8dXNlIHhsaW5rOmhyZWY9IiNzOSIgeD0iNDk0Ii8%2BDQo8L2c%2BDQo8dXNlIHhsaW5rOmhyZWY9IiNzMTgiIHg9Ijk4OCIvPg0KPHVzZSB4bGluazpocmVmPSIjczkiIHg9IjE5NzYiLz4NCjx1c2UgeGxpbms6aHJlZj0iI3M1IiB4PSIyNDcwIi8%2BDQo8L2c%2BDQo8L3N2Zz4%3D)](https://gitter.im/ant-design/ant-design-english?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) [![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&logoWidth=20&logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjkwMCIgaGVpZ2h0PSI2MDAiIHZpZXdCb3g9IjAgMCAzMCAyMCI%2BDQo8ZGVmcz4NCjxwYXRoIGlkPSJzIiBkPSJNMCwtMSAwLjU4Nzc4NSwwLjgwOTAxNyAtMC45NTEwNTcsLTAuMzA5MDE3SDAuOTUxMDU3TC0wLjU4Nzc4NSwwLjgwOTAxN3oiIGZpbGw9IiNmZmRlMDAiLz4NCjwvZGVmcz4NCjxyZWN0IHdpZHRoPSIzMCIgaGVpZ2h0PSIyMCIgZmlsbD0iI2RlMjkxMCIvPg0KPHVzZSB4bGluazpocmVmPSIjcyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNSw1KSBzY2FsZSgzKSIvPg0KPHVzZSB4bGluazpocmVmPSIjcyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAsMikgcm90YXRlKDIzLjAzNjI0MykiLz4NCjx1c2UgeGxpbms6aHJlZj0iI3MiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEyLDQpIHJvdGF0ZSg0NS44Njk4OTgpIi8%2BDQo8dXNlIHhsaW5rOmhyZWY9IiNzIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMiw3KSByb3RhdGUoNjkuOTQ1Mzk2KSIvPg0KPHVzZSB4bGluazpocmVmPSIjcyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAsOSkgcm90YXRlKDIwLjY1OTgwOCkiLz4NCjwvc3ZnPg%3D%3D)](https://gitter.im/ant-design/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
-
-</div>
-
-[![](https://cdn-images-1.medium.com/max/2000/1*NIlj0-TdLMbo_hzSBP8tmg.png)](http://ant.design/index-cn)
-
-[English](./README.md) | 简体中文
-
-## ✨ 特性
-
-- 🌈 提炼自企业级中后台产品的交互语言和视觉风格。
-- 📦 开箱即用的高质量 React 组件。
-- 🛡 使用 TypeScript 开发，提供完整的类型定义文件。
-- ⚙️ 全链路开发和设计工具体系。
-- 🌍 数十个国际化语言支持。
-- 🎨 深入每个细节的主题定制能力。
-
-## 🖥 支持环境
-
-- 现代浏览器和 IE9 及以上。
-- 支持服务端渲染。
-- [Electron](http://electron.atom.io/)
-
-| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Opera | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png" alt="Electron" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Electron |
-| --- | --- | --- | --- | --- | --- |
-| IE9, IE10, IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
-
-## 📦 安装
+## 安装
 
 ```bash
-npm install antd --save
+npm install antd
 ```
 
-```bash
-yarn add antd
+## 示例
+
+```jsx
+import { DatePicker } from 'antd';
+ReactDOM.render(<DatePicker />, mountNode);
 ```
 
-## 🔨 示例
-
-````jsx
-import { Button, DatePicker } from 'antd';
-
-const App = () => (
-  <>
-    <Button type="primary">PRESS ME</Button>
-    <DatePicker />
-  </>
-);
-
 引入样式：
 
 ```jsx
-import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
-````
-
-你也可以使用 [babel-plugin-import](https://ant.design/docs/react/getting-started-cn#按需加载)。
-
-### 🛡 TypeScript
-
-参考 [在 TypeScript 中使用](https://ant.design/docs/react/use-in-typescript-cn)
-
-## 🌍 国际化
-
-参考 [国际化文档](http://ant.design/docs/react/i18n-cn)。
-
-## 🔗 链接
-
-- [首页](http://ant.design/)
-- [组件库](http://ant.design/docs/react/introduce)
-- [Ant Design Pro](http://pro.ant.design/)
-- [更新日志](CHANGELOG.en-US.md)
-- [React 底层基础组件](http://react-component.github.io/)
-- [移动端组件](http://mobile.ant.design)
-- [Ant Design 图标](https://github.com/ant-design/ant-design-icons)
-- [Ant Design 色彩](https://github.com/ant-design/ant-design-colors)
-- [Ant Design Pro 布局组件](https://github.com/ant-design/ant-design-pro-layout)
-- [Ant Design Pro 区块集](https://github.com/ant-design/pro-blocks)
-- [Dark Theme](https://github.com/ant-design/ant-design-dark-theme)
-- [首页模板集](https://landing.ant.design)
-- [动效](https://motion.ant.design)
-- [脚手架市场](http://scaffold.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)
-- [常见问题](https://ant.design/docs/react/faq-cn)
-- [CodeSandbox 模板](https://u.ant.design/codesandbox-repro) for bug reports
-- [Awesome Ant Design](https://github.com/websemantics/awesome-ant-design)
-- [定制主题](http://ant.design/docs/react/customize-theme-cn)
-
-## ⌨️ 本地开发
-
-你可以使用 Gitpod 进行在线开发：
-
-[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/ant-design/ant-design)
-
-或者克隆到本地开发:
-
-```bash
-$ git clone git@github.com:ant-design/ant-design.git
-$ cd ant-design
-$ npm install
-$ npm start
+import 'antd/dist/antd.css';  // or 'antd/dist/antd.less'
 ```
 
-打开浏览器访问 http://127.0.0.1:8001 ，更多[本地开发文档](https://github.com/ant-design/ant-design/wiki/Development)。
+按需加载可通过此写法 `import DatePicker from 'antd/lib/date-picker'` 或使用插件 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import)。
 
-## 🤝 参与共建 [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
 
-请参考[贡献指南](https://ant.design/docs/react/contributing-cn).
+## 浏览器支持
 
-> 强烈推荐阅读 [《提问的智慧》](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)，更好的问题更容易获得帮助。
+现代浏览器和 IE9 及以上。
 
-[![Let's fund issues in this repository](https://issuehunt.io/static/embed/issuehunt-button-v1.svg)](https://issuehunt.io/repos/34526884)
+> [IE8 issues](https://github.com/xcatliu/react-ie8)
 
-## 👥 社区互助
+## TypeScript
 
-如果您在使用的过程中碰到问题，可以通过下面几个途径寻求帮助，同时我们也鼓励资深用户通过下面的途径给新人提供帮助。
+tsconfig.json
 
-通过 Stack Overflow 或者 Segment Fault 提问时，建议加上 `antd` 标签。
+```
+{
+  "compilerOptions": {
+    "moduleResolution": "node",
+    "jsx": "preserve",
+    "allowSyntheticDefaultImports": true
+  }
+}
+```
 
-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)
+## 链接
 
-## ❤️ 赞助者 ![](https://opencollective.com/ant-design/tiers/backers/badge.svg?label=Backers&color=brightgreen) ![](https://opencollective.com/ant-design/tiers/sponsors/badge.svg?label=Sponsors&color=brightgreen)
+- [首页](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/)
+- [React 基础组件](http://react-component.github.io/)
+- [移动端组件](http://mobile.ant.design)
+- [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)
+- [Awesome Ant Design](https://github.com/websemantics/awesome-ant-design)
 
-[![](https://opencollective.com/ant-design/tiers/backers.svg?avatarHeight=36)](https://opencollective.com/ant-design#support)
+## 如何贡献
 
-[![](https://opencollective.com/ant-design/tiers/sponsors.svg?avatarHeight=36)](https://opencollective.com/ant-design#support)
+我们欢迎任何形式的贡献，有任何建议或意见您可以进行 [Pull Request](https://github.com/ant-design/ant-design/pulls)，或者给我们 [提问](https://github.com/ant-design/ant-design/issues)。

README.md

@@ -1,137 +1,111 @@
 <p align="center">
   <a href="http://ant.design">
-    <img width="200" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg">
+    <img width="320" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg">
   </a>
 </p>
 
-<h1 align="center">Ant Design</h1>
+# Ant Design
+[![](https://img.shields.io/travis/ant-design/ant-design.svg?style=flat-square)](https://travis-ci.org/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)
+[![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)
 
-<div align="center">
+An enterprise-class UI design language and React-based implementation.
 
-An enterprise-class UI design language and React UI library.
+## Features
 
-[![CircleCI branch](https://img.shields.io/circleci/project/github/ant-design/ant-design/master.svg?style=flat-square)](https://circleci.com/gh/ant-design/ant-design) ![CI Status](https://github.com/ant-design/ant-design/workflows/test/badge.svg) [![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) [![](https://flat.badgen.net/npm/v/antd?icon=npm)](https://www.npmjs.com/package/antd) [![](https://badgen.net/npm/v/antd/next)](https://www.npmjs.com/package/antd) [![NPM downloads](http://img.shields.io/npm/dm/antd.svg?style=flat-square)](http://npmjs.com/antd)
+- 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.
 
-[![Dependencies](https://img.shields.io/david/ant-design/ant-design.svg?style=flat-square)](https://david-dm.org/ant-design/ant-design) [![DevDependencies](https://img.shields.io/david/dev/ant-design/ant-design.svg?style=flat-square)](https://david-dm.org/ant-design/ant-design?type=dev) [![Total alerts](https://flat.badgen.net/lgtm/alerts/g/ant-design/ant-design)](https://lgtm.com/projects/g/ant-design/ant-design/alerts/) [![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Fant-design%2Fant-design.svg?type=shield)](https://app.fossa.io/projects/git%2Bgithub.com%2Fant-design%2Fant-design?ref=badge_shield) [![Issues need help](https://flat.badgen.net/github/label-issues/ant-design/ant-design/help%20wanted/open)](https://github.com/ant-design/ant-design/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22)
-
-[![](https://img.shields.io/twitter/follow/AntDesignUI.svg?label=Ant%20Design&style=social)](https://twitter.com/AntDesignUI) [![Gitter](https://img.shields.io/gitter/room/ant-design/ant-design-english.svg?style=flat-square&logoWidth=20&logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjEyMzUiIGhlaWdodD0iNjUwIiB2aWV3Qm94PSIwIDAgNzQxMCAzOTAwIj4NCjxyZWN0IHdpZHRoPSI3NDEwIiBoZWlnaHQ9IjM5MDAiIGZpbGw9IiNiMjIyMzQiLz4NCjxwYXRoIGQ9Ik0wLDQ1MEg3NDEwbTAsNjAwSDBtMCw2MDBINzQxMG0wLDYwMEgwbTAsNjAwSDc0MTBtMCw2MDBIMCIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjMwMCIvPg0KPHJlY3Qgd2lkdGg9IjI5NjQiIGhlaWdodD0iMjEwMCIgZmlsbD0iIzNjM2I2ZSIvPg0KPGcgZmlsbD0iI2ZmZiI%2BDQo8ZyBpZD0iczE4Ij4NCjxnIGlkPSJzOSI%2BDQo8ZyBpZD0iczUiPg0KPGcgaWQ9InM0Ij4NCjxwYXRoIGlkPSJzIiBkPSJNMjQ3LDkwIDMxNy41MzQyMzAsMzA3LjA4MjAzOSAxMzIuODczMjE4LDE3Mi45MTc5NjFIMzYxLjEyNjc4MkwxNzYuNDY1NzcwLDMwNy4wODIwMzl6Ii8%2BDQo8dXNlIHhsaW5rOmhyZWY9IiNzIiB5PSI0MjAiLz4NCjx1c2UgeGxpbms6aHJlZj0iI3MiIHk9Ijg0MCIvPg0KPHVzZSB4bGluazpocmVmPSIjcyIgeT0iMTI2MCIvPg0KPC9nPg0KPHVzZSB4bGluazpocmVmPSIjcyIgeT0iMTY4MCIvPg0KPC9nPg0KPHVzZSB4bGluazpocmVmPSIjczQiIHg9IjI0NyIgeT0iMjEwIi8%2BDQo8L2c%2BDQo8dXNlIHhsaW5rOmhyZWY9IiNzOSIgeD0iNDk0Ii8%2BDQo8L2c%2BDQo8dXNlIHhsaW5rOmhyZWY9IiNzMTgiIHg9Ijk4OCIvPg0KPHVzZSB4bGluazpocmVmPSIjczkiIHg9IjE5NzYiLz4NCjx1c2UgeGxpbms6aHJlZj0iI3M1IiB4PSIyNDcwIi8%2BDQo8L2c%2BDQo8L3N2Zz4%3D)](https://gitter.im/ant-design/ant-design-english?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) [![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&logoWidth=20&logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjkwMCIgaGVpZ2h0PSI2MDAiIHZpZXdCb3g9IjAgMCAzMCAyMCI%2BDQo8ZGVmcz4NCjxwYXRoIGlkPSJzIiBkPSJNMCwtMSAwLjU4Nzc4NSwwLjgwOTAxNyAtMC45NTEwNTcsLTAuMzA5MDE3SDAuOTUxMDU3TC0wLjU4Nzc4NSwwLjgwOTAxN3oiIGZpbGw9IiNmZmRlMDAiLz4NCjwvZGVmcz4NCjxyZWN0IHdpZHRoPSIzMCIgaGVpZ2h0PSIyMCIgZmlsbD0iI2RlMjkxMCIvPg0KPHVzZSB4bGluazpocmVmPSIjcyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNSw1KSBzY2FsZSgzKSIvPg0KPHVzZSB4bGluazpocmVmPSIjcyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAsMikgcm90YXRlKDIzLjAzNjI0MykiLz4NCjx1c2UgeGxpbms6aHJlZj0iI3MiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEyLDQpIHJvdGF0ZSg0NS44Njk4OTgpIi8%2BDQo8dXNlIHhsaW5rOmhyZWY9IiNzIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMiw3KSByb3RhdGUoNjkuOTQ1Mzk2KSIvPg0KPHVzZSB4bGluazpocmVmPSIjcyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAsOSkgcm90YXRlKDIwLjY1OTgwOCkiLz4NCjwvc3ZnPg%3D%3D)](https://gitter.im/ant-design/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
-
-</div>
-
-[![](https://cdn-images-1.medium.com/max/2000/1*NIlj0-TdLMbo_hzSBP8tmg.png)](http://ant.design)
-
-English | [简体中文](./README-zh_CN.md)
-
-## ✨ Features
-
-- 🌈 Enterprise-class UI designed for web applications.
-- 📦 A set of high-quality React components out of the box.
-- 🛡 Written in TypeScript with predictable static types.
-- ⚙️ Whole package of design resources and development tools.
-- 🌍 Internationalization support for dozens of languages.
-- 🎨 Powerful theme customization in every detail.
-
-## 🖥 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/)
-
-| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Opera | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png" alt="Electron" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Electron |
-| --- | --- | --- | --- | --- | --- |
-| IE9, IE10, IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
-
-## 📦 Install
+## Install
 
 ```bash
 npm install antd
 ```
 
-```bash
-yarn add antd
-```
+## Usage
 
-## 🔨 Usage
+### Use prebuilt bundle
 
 ```jsx
-import { Button, DatePicker } from 'antd';
-
-const App = () => (
-  <>
-    <Button type="primary">PRESS ME</Button>
-    <DatePicker />
-  </>
-);
+import { DatePicker } from 'antd';
+ReactDOM.render(<DatePicker />, mountNode);
 ```
 
 And import style manually:
 
 ```jsx
-import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
+import 'antd/dist/antd.css';  // or 'antd/dist/antd.less'
 ```
 
-Or use [babel-plugin-import](https://ant.design/docs/react/getting-started#Import-on-Demand).
+### Use modularized antd
 
-### TypeScript
+- Use [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) (Recommended)
 
-See [Use in TypeScript](https://ant.design/docs/react/use-in-typescript).
+   ```js
+   // .babelrc
+   {
+     "plugins": [["import", { libraryName: "antd", style: "css" }]]
+   }
+   ```
 
-## 🌍 Internationalization
+   Then you can import components from antd directly.
 
-See [i18n](http://ant.design/docs/react/i18n).
+   ```jsx
+   // import js and css modularly, parsed by babel-plugin-import
+   import { DatePicker } from 'antd';
+   ```
 
-## 🔗 Links
+- Manually import
+
+   ```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",
+    "jsx": "preserve",
+    "allowSyntheticDefaultImports": true
+  }
+}
+```
+
+## Links
 
 - [Home page](http://ant.design/)
-- [Components](http://ant.design/docs/react/introduce)
-- [Ant Design Pro](http://pro.ant.design/)
-- [Change Log](CHANGELOG.en-US.md)
-- [rc-components](http://react-component.github.io/)
+- [UI library](http://ant.design/docs/react/introduce)
+- [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)
-- [Ant Design Icons](https://github.com/ant-design/ant-design-icons)
-- [Ant Design Colors](https://github.com/ant-design/ant-design-colors)
-- [Ant Design Pro Layout](https://github.com/ant-design/ant-design-pro-layout)
-- [Ant Design Pro Blocks](https://github.com/ant-design/pro-blocks)
-- [Dark Theme](https://github.com/ant-design/ant-design-dark-theme)
-- [Landing Pages](https://landing.ant.design)
-- [Motion](https://motion.ant.design)
-- [Scaffold Market](http://scaffold.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)
-- [FAQ](https://ant.design/docs/react/faq)
-- [CodeSandbox Template](https://u.ant.design/codesandbox-repro) for bug reports
+- [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
+## Contributing
 
-Use Gitpod, a free online dev environment for GitHub.
-
-[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/ant-design/ant-design)
-
-Or clone locally:
-
-```bash
-$ git clone git@github.com:ant-design/ant-design.git
-$ cd ant-design
-$ npm install
-$ npm start
-```
-
-Open your browser and visit http://127.0.0.1:8001 , see more at [Development](https://github.com/ant-design/ant-design/wiki/Development).
-
-## 🤝 Contributing [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
-
-Read our [contributing guide](https://ant.design/docs/react/contributing) and let's build a better antd together.
-
-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! :)
-
-If you are a collaborator, please follow our [Pull Request principle](https://github.com/ant-design/ant-design/wiki/PR-principle) to create a Pull Request by [collaborator template](https://github.com/ant-design/ant-design/compare?expand=1&template=collaborator.md).
-
-[![Let's fund issues in this repository](https://issuehunt.io/static/embed/issuehunt-button-v1.svg)](https://issuehunt.io/repos/34526884)
-
-## ❤️ Sponsors and Backers [![](https://opencollective.com/ant-design/tiers/sponsors/badge.svg?label=Sponsors&color=brightgreen)](https://opencollective.com/ant-design#support) [![](https://opencollective.com/ant-design/tiers/backers/badge.svg?label=Backers&color=brightgreen)](https://opencollective.com/ant-design#support)
-
-[![](https://opencollective.com/ant-design/tiers/sponsors.svg?avatarHeight=36)](https://opencollective.com/ant-design#support)
-
-[![](https://opencollective.com/ant-design/tiers/backers.svg?avatarHeight=36)](https://opencollective.com/ant-design#support)
+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! :)

azure-pipelines.yml

@@ -1,69 +0,0 @@
-# Node.js
-# Build a general Node.js project with npm.
-# Add steps that analyze code, save build artifacts, deploy, and more:
-# https://docs.microsoft.com/azure/devops/pipelines/languages/javascript
-name: ant design
-
-trigger:
-  batch: true
-  branches:
-    exclude:
-      - gh-pages
-
-jobs:
-  - job: test_
-    pool:
-      vmImage: 'Ubuntu-16.04'
-    strategy:
-      matrix:
-        Lint:
-          TEST_TYPE: lint
-        dist-react@16:
-          REACT: 16
-          TEST_TYPE: test:dist
-        lib-react@16:
-          REACT: 16
-          TEST_TYPE: test:lib
-        es-react@16:
-          REACT: 16
-          TEST_TYPE: test:es
-        dom-react@16:
-          REACT: 16
-          TEST_TYPE: test:dom
-        node-react@16:
-          REACT: 16
-          TEST_TYPE: test:node
-        dist-react@15:
-          REACT: 15
-          TEST_TYPE: test:dist
-        lib-react@15:
-          REACT: 15
-          TEST_TYPE: test:lib
-        es-react@15:
-          REACT: 15
-          TEST_TYPE: test:es
-        dom-react@15:
-          REACT: 15
-          TEST_TYPE: test:dom
-        node-react@15:
-          REACT: 15
-          TEST_TYPE: test:node
-    steps:
-      - checkout: self
-        fetchDepth: 1
-        clean: false
-      - task: NodeTool@0
-        inputs:
-          versionSpec: '10.x'
-      - script: npm install
-        displayName: install
-      - script: scripts/install-react.sh
-        displayName: install-react
-      - script: scripts/travis-script.sh
-        displayName: test
-      - task: PublishBuildArtifacts@1
-        # 主分支，并且运行成功
-        condition: and(succeeded(), eq(variables['Build.SourceBranch'], 'refs/heads/master'))
-        inputs:
-          pathtoPublish: './package-lock.json'
-          artifactName: lock

components/__tests__/__snapshots__/index.test.js.snap

@@ -1,71 +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",
-  "Comment",
-  "ConfigProvider",
-  "DatePicker",
-  "Descriptions",
-  "Divider",
-  "Dropdown",
-  "Drawer",
-  "Empty",
-  "Form",
-  "Icon",
-  "Input",
-  "InputNumber",
-  "Layout",
-  "List",
-  "LocaleProvider",
-  "message",
-  "Menu",
-  "Mentions",
-  "Modal",
-  "Statistic",
-  "notification",
-  "PageHeader",
-  "Pagination",
-  "Popconfirm",
-  "Popover",
-  "Progress",
-  "Radio",
-  "Rate",
-  "Result",
-  "Row",
-  "Select",
-  "Skeleton",
-  "Slider",
-  "Spin",
-  "Steps",
-  "Switch",
-  "Table",
-  "Transfer",
-  "Tree",
-  "TreeSelect",
-  "Tabs",
-  "Tag",
-  "TimePicker",
-  "Timeline",
-  "Tooltip",
-  "Typography",
-  "Mention",
-  "Upload",
-  "version",
-]
-`;

components/__tests__/index.test.js

@@ -1,21 +0,0 @@
-const OLD_NODE_ENV = process.env.NODE_ENV;
-process.env.NODE_ENV = 'development';
-const warnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
-const antd = require('..');
-
-describe('antd', () => {
-  afterAll(() => {
-    process.env.NODE_ENV = OLD_NODE_ENV;
-  });
-
-  it('exports modules correctly', () => {
-    expect(Object.keys(antd)).toMatchSnapshot();
-  });
-
-  it('should hint when import all components in dev mode', () => {
-    expect(warnSpy).toHaveBeenCalledWith(
-      'You are using a whole package of antd, please use https://www.npmjs.com/package/babel-plugin-import to reduce app bundle size.',
-    );
-    warnSpy.mockRestore();
-  });
-});

components/__tests__/util/domHook.js

@@ -1,58 +0,0 @@
-const __NULL__ = { notExist: true };
-
-export function spyElementPrototypes(Element, properties) {
-  const propNames = Object.keys(properties);
-  const originDescriptors = {};
-
-  propNames.forEach(propName => {
-    const originDescriptor = Object.getOwnPropertyDescriptor(Element.prototype, propName);
-    originDescriptors[propName] = originDescriptor || __NULL__;
-
-    const spyProp = properties[propName];
-
-    if (typeof spyProp === 'function') {
-      // If is a function
-      Element.prototype[propName] = function spyFunc(...args) {
-        return spyProp.call(this, originDescriptor, ...args);
-      };
-    } else {
-      // Otherwise tread as a property
-      Object.defineProperty(Element.prototype, propName, {
-        ...spyProp,
-        set(value) {
-          if (spyProp.set) {
-            return spyProp.set.call(this, originDescriptor, value);
-          }
-          return originDescriptor.set(value);
-        },
-        get() {
-          if (spyProp.get) {
-            return spyProp.get.call(this, originDescriptor);
-          }
-          return originDescriptor.get();
-        },
-      });
-    }
-  });
-
-  return {
-    mockRestore() {
-      propNames.forEach(propName => {
-        const originDescriptor = originDescriptors[propName];
-        if (originDescriptor === __NULL__) {
-          delete Element.prototype[propName];
-        } else if (typeof originDescriptor === 'function') {
-          Element.prototype[propName] = originDescriptor;
-        } else {
-          Object.defineProperty(Element.prototype, propName, originDescriptor);
-        }
-      });
-    },
-  };
-}
-
-export function spyElementPrototype(Element, propName, property) {
-  return spyElementPrototypes(Element, {
-    [propName]: property,
-  });
-}

components/_util/__tests__/easings.test.js

@@ -1,13 +0,0 @@
-import { easeInOutCubic } from '../easings';
-
-describe('Test easings', () => {
-  it('easeInOutCubic return value', () => {
-    const nums = [];
-    // eslint-disable-next-line no-plusplus
-    for (let index = 0; index < 5; index++) {
-      nums.push(easeInOutCubic(index, 1, 5, 4));
-    }
-
-    expect(nums).toEqual([1, 1.25, 3, 4.75, 5]);
-  });
-});

components/_util/__tests__/scrollTo.test.js

@@ -1,56 +0,0 @@
-import scrollTo from '../scrollTo';
-
-describe('Test ScrollTo function', () => {
-  let dateNowMock;
-
-  beforeAll(() => {
-    jest.useFakeTimers();
-  });
-
-  afterAll(() => {
-    jest.useRealTimers();
-  });
-
-  beforeEach(() => {
-    dateNowMock = jest
-      .spyOn(Date, 'now')
-      .mockImplementationOnce(() => 0)
-      .mockImplementationOnce(() => 1000);
-  });
-
-  afterEach(() => {
-    dateNowMock.mockRestore();
-  });
-
-  it('test scrollTo', async () => {
-    const scrollToSpy = jest.spyOn(window, 'scrollTo').mockImplementation((x, y) => {
-      window.scrollY = y;
-      window.pageYOffset = y;
-    });
-
-    scrollTo(1000);
-
-    jest.runAllTimers();
-    expect(window.pageYOffset).toBe(1000);
-
-    scrollToSpy.mockRestore();
-  });
-
-  it('test callback - option', async () => {
-    const cbMock = jest.fn();
-    scrollTo(1000, {
-      callback: cbMock,
-    });
-    jest.runAllTimers();
-    expect(cbMock).toHaveBeenCalledTimes(1);
-  });
-
-  it('test getContainer - option', async () => {
-    const div = document.createElement('div');
-    scrollTo(1000, {
-      getContainer: () => div,
-    });
-    jest.runAllTimers();
-    expect(div.scrollTop).toBe(1000);
-  });
-});

components/_util/__tests__/util.test.js

@@ -1,227 +0,0 @@
-import raf from 'raf';
-import React from 'react';
-import { mount } from 'enzyme';
-import KeyCode from 'rc-util/lib/KeyCode';
-import delayRaf from '../raf';
-import throttleByAnimationFrame from '../throttleByAnimationFrame';
-import getDataOrAriaProps from '../getDataOrAriaProps';
-import triggerEvent from '../triggerEvent';
-import Wave from '../wave';
-import TransButton from '../transButton';
-import openAnimation from '../openAnimation';
-
-describe('Test utils function', () => {
-  beforeAll(() => {
-    jest.useFakeTimers();
-  });
-
-  afterAll(() => {
-    jest.useRealTimers();
-  });
-
-  it('throttle function should work', () => {
-    const callback = jest.fn();
-    const throttled = throttleByAnimationFrame(callback);
-    expect(callback).not.toHaveBeenCalled();
-
-    throttled();
-    throttled();
-
-    jest.runAllTimers();
-    expect(callback).toHaveBeenCalled();
-    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.toHaveBeenCalled();
-  });
-
-  describe('getDataOrAriaProps', () => {
-    it('returns all data-* properties from an object', () => {
-      const props = {
-        onClick: () => {},
-        isOpen: true,
-        'data-test': 'test-id',
-        'data-id': 1234,
-      };
-      const results = getDataOrAriaProps(props);
-      expect(results).toEqual({
-        'data-test': 'test-id',
-        'data-id': 1234,
-      });
-    });
-
-    it('does not return data-__ properties from an object', () => {
-      const props = {
-        onClick: () => {},
-        isOpen: true,
-        'data-__test': 'test-id',
-        'data-__id': 1234,
-      };
-      const results = getDataOrAriaProps(props);
-      expect(results).toEqual({});
-    });
-
-    it('returns all aria-* properties from an object', () => {
-      const props = {
-        onClick: () => {},
-        isOpen: true,
-        'aria-labelledby': 'label-id',
-        'aria-label': 'some-label',
-      };
-      const results = getDataOrAriaProps(props);
-      expect(results).toEqual({
-        'aria-labelledby': 'label-id',
-        'aria-label': 'some-label',
-      });
-    });
-
-    it('returns role property from an object', () => {
-      const props = {
-        onClick: () => {},
-        isOpen: true,
-        role: 'search',
-      };
-      const results = getDataOrAriaProps(props);
-      expect(results).toEqual({ role: 'search' });
-    });
-  });
-
-  it('delayRaf', done => {
-    jest.useRealTimers();
-
-    let bamboo = false;
-    delayRaf(() => {
-      bamboo = true;
-    }, 3);
-
-    // Do nothing, but insert in the frame
-    // https://github.com/ant-design/ant-design/issues/16290
-    delayRaf(() => {}, 3);
-
-    // Variable bamboo should be false in frame 2 but true in frame 4
-    raf(() => {
-      expect(bamboo).toBe(false);
-
-      // Frame 2
-      raf(() => {
-        expect(bamboo).toBe(false);
-
-        // Frame 3
-        raf(() => {
-          // Frame 4
-          raf(() => {
-            expect(bamboo).toBe(true);
-            done();
-          });
-        });
-      });
-    });
-  });
-
-  it('triggerEvent', () => {
-    const button = document.createElement('button');
-    button.addEventListener(
-      'click',
-      () => {
-        button.style.width = '100px';
-      },
-      true,
-    );
-    triggerEvent(button, 'click');
-    expect(button.style.width).toBe('100px');
-  });
-
-  describe('wave', () => {
-    it('bindAnimationEvent should return when node is null', () => {
-      const wrapper = mount(
-        <Wave>
-          <button type="button" disabled>
-            button
-          </button>
-        </Wave>,
-      ).instance();
-      expect(wrapper.bindAnimationEvent()).toBe(undefined);
-    });
-
-    it('bindAnimationEvent.onClick should return when children is hidden', () => {
-      const wrapper = mount(
-        <Wave>
-          <button type="button" style={{ display: 'none' }}>
-            button
-          </button>
-        </Wave>,
-      ).instance();
-      expect(wrapper.bindAnimationEvent()).toBe(undefined);
-    });
-
-    it('bindAnimationEvent.onClick should return when children is input', () => {
-      const wrapper = mount(
-        <Wave>
-          <input />
-        </Wave>,
-      ).instance();
-      expect(wrapper.bindAnimationEvent()).toBe(undefined);
-    });
-
-    it('should not throw when click it', () => {
-      expect(() => {
-        const wrapper = mount(
-          <Wave>
-            <div />
-          </Wave>,
-        );
-        wrapper.simulate('click');
-      }).not.toThrow();
-    });
-
-    it('should not throw when no children', () => {
-      if (process.env.REACT === '15') {
-        return;
-      }
-      expect(() => mount(<Wave />)).not.toThrow();
-    });
-  });
-
-  describe('TransButton', () => {
-    it('can be focus/blur', () => {
-      const wrapper = mount(<TransButton>TransButton</TransButton>);
-      expect(typeof wrapper.instance().focus).toBe('function');
-      expect(typeof wrapper.instance().blur).toBe('function');
-    });
-
-    it('should trigger onClick when press enter', () => {
-      const onClick = jest.fn();
-      const preventDefault = jest.fn();
-      const wrapper = mount(<TransButton onClick={onClick}>TransButton</TransButton>);
-      wrapper.simulate('keyUp', { keyCode: KeyCode.ENTER });
-      expect(onClick).toHaveBeenCalled();
-      wrapper.simulate('keyDown', { keyCode: KeyCode.ENTER, preventDefault });
-      expect(preventDefault).toHaveBeenCalled();
-    });
-  });
-
-  describe('openAnimation', () => {
-    it('should support openAnimation', () => {
-      const done = jest.fn();
-      const domNode = document.createElement('div');
-      expect(typeof openAnimation.enter).toBe('function');
-      expect(typeof openAnimation.leave).toBe('function');
-      expect(typeof openAnimation.appear).toBe('function');
-      const appear = openAnimation.appear(domNode, done);
-      const enter = openAnimation.enter(domNode, done);
-      const leave = openAnimation.leave(domNode, done);
-      expect(typeof appear.stop).toBe('function');
-      expect(typeof enter.stop).toBe('function');
-      expect(typeof leave.stop).toBe('function');
-      expect(done).toHaveBeenCalled();
-    });
-  });
-});

components/_util/colors.ts

@@ -1,20 +0,0 @@
-import { tuple } from './type';
-
-// eslint-disable-next-line import/prefer-default-export
-export const PresetColorTypes = tuple(
-  'pink',
-  'red',
-  'yellow',
-  'orange',
-  'cyan',
-  'green',
-  'blue',
-  'purple',
-  'geekblue',
-  'magenta',
-  'volcano',
-  'gold',
-  'lime',
-);
-
-export type PresetColorType = (typeof PresetColorTypes)[number];

components/_util/easings.ts

@@ -1,9 +0,0 @@
-// eslint-disable-next-line import/prefer-default-export
-export 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;
-}

components/_util/getDataOrAriaProps.ts

@@ -1,11 +0,0 @@
-export default function getDataOrAriaProps(props: any) {
-  return Object.keys(props).reduce((prev: any, key: string) => {
-    if (
-      (key.substr(0, 5) === 'data-' || key.substr(0, 5) === 'aria-' || key === 'role') &&
-      key.substr(0, 7) !== 'data-__'
-    ) {
-      prev[key] = props[key];
-    }
-    return prev;
-  }, {});
-}

components/_util/getLocale.tsx

@@ -0,0 +1,10 @@
+import assign from 'object-assign';
+
+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;
+}

components/_util/getRequestAnimationFrame.tsx

@@ -0,0 +1,12 @@
+export default function getRequestAnimationFrame() {
+  if (typeof window === 'undefined') {
+    return () => {};
+  }
+  if (window.requestAnimationFrame) {
+    return window.requestAnimationFrame;
+  }
+  const prefix = ['moz', 'ms', 'webkit'].filter(key => `${key}RequestAnimationFrame` in window)[0];
+  return prefix
+    ? window[`${prefix}RequestAnimationFrame`]
+    : callback => setTimeout(callback, 1000 / 60);
+}

components/_util/getScroll.tsx

@@ -1,4 +1,4 @@
-export default function getScroll(target: HTMLElement | Window | null, top: boolean): number {
+export default function getScroll(target, top): number {
   if (typeof window === 'undefined') {
     return 0;
   }
@@ -7,10 +7,10 @@ export default function getScroll(target: HTMLElement | Window | null, top: bool
   const method = top ? 'scrollTop' : 'scrollLeft';
   const isWindow = target === window;
 
-  let ret = isWindow ? (target as Window)[prop] : (target as HTMLElement)[method];
+  let ret = isWindow ? target[prop] : target[method];
   // ie6,7,8 standard mode
   if (isWindow && typeof ret !== 'number') {
-    ret = (document.documentElement as HTMLElement)[method];
+    ret = window.document.documentElement[method];
   }
 
   return ret;

components/_util/interopDefault.ts

@@ -1,5 +0,0 @@
-// https://github.com/moment/moment/issues/3650
-// since we are using ts 3.5.1, it should be safe to remove.
-export default function interopDefault(m: any) {
-  return m.default || m;
-}

components/_util/isCssAnimationSupported.tsx

@@ -0,0 +1,24 @@
+let animation;
+
+function isCssAnimationSupported() {
+  if (animation !== undefined) {
+    return animation;
+  }
+  const domPrefixes = 'Webkit Moz O ms Khtml'.split(' ');
+  const elm = document.createElement('div');
+  if (elm.style.animationName !== undefined) {
+    animation = true;
+  }
+  if (animation !== undefined) {
+    for (let i = 0; i < domPrefixes.length; i++) {
+      if (elm.style[`${domPrefixes[i]}AnimationName`] !== undefined) {
+        animation = true;
+        break;
+      }
+    }
+  }
+  animation = animation || false;
+  return animation;
+}
+
+export default isCssAnimationSupported;

components/_util/isNumeric.ts

@@ -1,5 +0,0 @@
-const isNumeric = (value: any): boolean => {
-  return !isNaN(parseFloat(value)) && isFinite(value);
-};
-
-export default isNumeric;

components/_util/motion.tsx

@@ -1,40 +0,0 @@
-import * as React from 'react';
-
-type MotionFunc = (element: HTMLElement) => React.CSSProperties;
-
-interface Motion {
-  visible?: boolean;
-  motionName?: string; // It also support object, but we only use string here.
-  motionAppear?: boolean;
-  motionEnter?: boolean;
-  motionLeave?: boolean;
-  motionLeaveImmediately?: boolean; // Trigger leave motion immediately
-  removeOnLeave?: boolean;
-  leavedClassName?: string;
-  onAppearStart?: MotionFunc;
-  onAppearActive?: MotionFunc;
-  onAppearEnd?: MotionFunc;
-  onEnterStart?: MotionFunc;
-  onEnterActive?: MotionFunc;
-  onEnterEnd?: MotionFunc;
-  onLeaveStart?: MotionFunc;
-  onLeaveActive?: MotionFunc;
-  onLeaveEnd?: MotionFunc;
-}
-
-// ================== Collapse Motion ==================
-const getCollapsedHeight: MotionFunc = () => ({ height: 0, opacity: 0 });
-const getRealHeight: MotionFunc = node => ({ height: node.scrollHeight, opacity: 1 });
-const getCurrentHeight: MotionFunc = node => ({ height: node.offsetHeight });
-
-const collapseMotion: Motion = {
-  motionName: 'ant-motion-collapse',
-  onAppearStart: getCollapsedHeight,
-  onEnterStart: getCollapsedHeight,
-  onAppearActive: getRealHeight,
-  onEnterActive: getRealHeight,
-  onLeaveStart: getCurrentHeight,
-  onLeaveActive: getCollapsedHeight,
-};
-
-export default collapseMotion;

components/_util/openAnimation.tsx

@@ -1,52 +1,34 @@
-/**
- * Deprecated. We should replace the animation with pure react motion instead of modify style directly.
- * If you are creating new component with animation, please use `./motion`.
- */
 import cssAnimation from 'css-animation';
-import raf from 'raf';
 
-function animate(node: HTMLElement, show: boolean, done: () => void) {
-  let height: number;
-  let requestAnimationFrameId: number;
-  return cssAnimation(node, 'ant-motion-collapse-legacy', {
+function animate(node, show, done) {
+  let height;
+  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 = '0px';
-        node.style.opacity = '0';
+        node.style.height = 0;
       }
     },
     active() {
-      if (requestAnimationFrameId) {
-        raf.cancel(requestAnimationFrameId);
-      }
-      requestAnimationFrameId = raf(() => {
-        node.style.height = `${show ? height : 0}px`;
-        node.style.opacity = show ? '1' : '0';
-      });
+      node.style.height = `${show ? height : 0}px`;
     },
     end() {
-      if (requestAnimationFrameId) {
-        raf.cancel(requestAnimationFrameId);
-      }
       node.style.height = '';
-      node.style.opacity = '';
       done();
     },
   });
 }
 
 const animation = {
-  enter(node: HTMLElement, done: () => void) {
+  enter(node, done) {
     return animate(node, true, done);
   },
-  leave(node: HTMLElement, done: () => void) {
+  leave(node, done) {
     return animate(node, false, done);
   },
-  appear(node: HTMLElement, done: () => void) {
+  appear(node, done) {
     return animate(node, true, done);
   },
 };

components/_util/raf.ts

@@ -1,38 +0,0 @@
-import raf from 'raf';
-
-interface RafMap {
-  [id: number]: number;
-}
-
-let id: number = 0;
-const ids: RafMap = {};
-
-// Support call raf with delay specified frame
-export default function wrapperRaf(callback: () => void, delayFrames: number = 1): number {
-  const myId: number = id++;
-  let restFrames: number = delayFrames;
-
-  function internalCallback() {
-    restFrames -= 1;
-
-    if (restFrames <= 0) {
-      callback();
-      delete ids[myId];
-    } else {
-      ids[myId] = raf(internalCallback);
-    }
-  }
-
-  ids[myId] = raf(internalCallback);
-
-  return myId;
-}
-
-wrapperRaf.cancel = function cancel(pid?: number) {
-  if (pid === undefined) return;
-
-  raf.cancel(ids[pid]);
-  delete ids[pid];
-};
-
-wrapperRaf.ids = ids; // export this for test usage

components/_util/reactNode.ts

@@ -1,8 +0,0 @@
-import * as React from 'react';
-
-// eslint-disable-next-line import/prefer-default-export
-export function cloneElement(element: React.ReactNode, ...restArgs: any[]) {
-  if (!React.isValidElement(element)) return element;
-
-  return React.cloneElement(element, ...restArgs);
-}

components/_util/ref.ts

@@ -1,17 +0,0 @@
-import React from 'react';
-
-export function fillRef<T>(ref: React.Ref<T>, node: T) {
-  if (typeof ref === 'function') {
-    ref(node);
-  } else if (typeof ref === 'object' && ref && 'current' in ref) {
-    (ref as any).current = node;
-  }
-}
-
-export function composeRef<T>(...refs: React.Ref<T>[]): React.Ref<T> {
-  return (node: T) => {
-    refs.forEach(ref => {
-      fillRef(ref, node);
-    });
-  };
-}

components/_util/responsiveObserve.ts

@@ -1,104 +0,0 @@
-// matchMedia polyfill for
-// https://github.com/WickyNilliams/enquire.js/issues/82
-let enquire: any;
-
-// TODO: Will be removed in antd 4.0 because we will no longer support ie9
-if (typeof window !== 'undefined') {
-  const matchMediaPolyfill = (mediaQuery: string) => {
-    return {
-      media: mediaQuery,
-      matches: false,
-      addListener() {},
-      removeListener() {},
-    };
-  };
-  // ref: https://github.com/ant-design/ant-design/issues/18774
-  if (!window.matchMedia) window.matchMedia = matchMediaPolyfill as any;
-  // eslint-disable-next-line global-require
-  enquire = require('enquire.js');
-}
-
-export type Breakpoint = 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs';
-export type BreakpointMap = Partial<Record<Breakpoint, string>>;
-
-export const responsiveArray: Breakpoint[] = ['xxl', 'xl', 'lg', 'md', 'sm', 'xs'];
-
-export const responsiveMap: BreakpointMap = {
-  xs: '(max-width: 575px)',
-  sm: '(min-width: 576px)',
-  md: '(min-width: 768px)',
-  lg: '(min-width: 992px)',
-  xl: '(min-width: 1200px)',
-  xxl: '(min-width: 1600px)',
-};
-
-type SubscribeFunc = (screens: BreakpointMap) => void;
-
-let subscribers: Array<{
-  token: string;
-  func: SubscribeFunc;
-}> = [];
-let subUid = -1;
-let screens = {};
-
-const responsiveObserve = {
-  dispatch(pointMap: BreakpointMap) {
-    screens = pointMap;
-    if (subscribers.length < 1) {
-      return false;
-    }
-
-    subscribers.forEach(item => {
-      item.func(screens);
-    });
-
-    return true;
-  },
-  subscribe(func: SubscribeFunc) {
-    if (subscribers.length === 0) {
-      this.register();
-    }
-    const token = (++subUid).toString();
-    subscribers.push({
-      token,
-      func,
-    });
-    func(screens);
-    return token;
-  },
-  unsubscribe(token: string) {
-    subscribers = subscribers.filter(item => item.token !== token);
-    if (subscribers.length === 0) {
-      this.unregister();
-    }
-  },
-  unregister() {
-    Object.keys(responsiveMap).map((screen: Breakpoint) =>
-      enquire.unregister(responsiveMap[screen]),
-    );
-  },
-  register() {
-    Object.keys(responsiveMap).map((screen: Breakpoint) =>
-      enquire.register(responsiveMap[screen], {
-        match: () => {
-          const pointMap = {
-            ...screens,
-            [screen]: true,
-          };
-          this.dispatch(pointMap);
-        },
-        unmatch: () => {
-          const pointMap = {
-            ...screens,
-            [screen]: false,
-          };
-          this.dispatch(pointMap);
-        },
-        // Keep a empty destory to avoid triggering unmatch when unregister
-        destroy() {},
-      }),
-    );
-  },
-};
-
-export default responsiveObserve;

components/_util/scrollTo.ts

@@ -1,37 +0,0 @@
-import raf from 'raf';
-import getScroll from './getScroll';
-import { easeInOutCubic } from './easings';
-
-interface ScrollToOptions {
-  /** Scroll container, default as window */
-  getContainer?: () => HTMLElement | Window;
-  /** Scroll end callback */
-  callback?: () => any;
-  /** Animation duration, default as 450 */
-  duration?: number;
-}
-
-export default function scrollTo(y: number, options: ScrollToOptions = {}) {
-  const { getContainer = () => window, callback, duration = 450 } = options;
-
-  const container = getContainer();
-  const scrollTop = getScroll(container, true);
-  const startTime = Date.now();
-
-  const frameFunc = () => {
-    const timestamp = Date.now();
-    const time = timestamp - startTime;
-    const nextScrollTop = easeInOutCubic(time > duration ? duration : time, scrollTop, y, duration);
-    if (container === window) {
-      window.scrollTo(window.pageXOffset, nextScrollTop);
-    } else {
-      (container as HTMLElement).scrollTop = nextScrollTop;
-    }
-    if (time < duration) {
-      raf(frameFunc);
-    } else if (typeof callback === 'function') {
-      callback();
-    }
-  };
-  raf(frameFunc);
-}

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];
+}

components/_util/styleChecker.tsx

@@ -1,13 +0,0 @@
-const isStyleSupport = (styleName: string | Array<string>): boolean => {
-  if (typeof window !== 'undefined' && window.document && window.document.documentElement) {
-    const styleNameList = Array.isArray(styleName) ? styleName : [styleName];
-    const { documentElement } = window.document;
-
-    return styleNameList.some(name => name in documentElement.style);
-  }
-  return false;
-};
-
-export const isFlexSupported = isStyleSupport(['flex', 'webkitFlex', 'Flex', 'msFlex']);
-
-export default isStyleSupport;

components/_util/throttleByAnimationFrame.tsx

@@ -1,47 +0,0 @@
-import raf from 'raf';
-
-export default function throttleByAnimationFrame(fn: (...args: any[]) => void) {
-  let requestId: number | null;
-
-  const later = (args: any[]) => () => {
-    requestId = null;
-    fn(...args);
-  };
-
-  const throttled = (...args: any[]) => {
-    if (requestId == null) {
-      requestId = raf(later(args));
-    }
-  };
-
-  (throttled as any).cancel = () => raf.cancel(requestId!);
-
-  return throttled;
-}
-
-export function throttleByAnimationFrameDecorator() {
-  // eslint-disable-next-line func-names
-  return function(target: any, key: string, descriptor: any) {
-    const fn = descriptor.value;
-    let definingProperty = false;
-    return {
-      configurable: true,
-      get() {
-        // eslint-disable-next-line no-prototype-builtins
-        if (definingProperty || this === target.prototype || this.hasOwnProperty(key)) {
-          return fn;
-        }
-
-        const boundFn = throttleByAnimationFrame(fn.bind(this));
-        definingProperty = true;
-        Object.defineProperty(this, key, {
-          value: boundFn,
-          configurable: true,
-          writable: true,
-        });
-        definingProperty = false;
-        return boundFn;
-      },
-    };
-  };
-}

components/_util/transButton.tsx

@@ -1,74 +0,0 @@
-/**
- * Wrap of sub component which need use as Button capacity (like Icon component).
- * This helps accessibility reader to tread as a interactive button to operation.
- */
-import * as React from 'react';
-import KeyCode from 'rc-util/lib/KeyCode';
-
-interface TransButtonProps extends React.HTMLAttributes<HTMLDivElement> {
-  onClick?: (e?: React.MouseEvent<HTMLDivElement>) => void;
-  noStyle?: boolean;
-}
-
-const inlineStyle: React.CSSProperties = {
-  border: 0,
-  background: 'transparent',
-  padding: 0,
-  lineHeight: 'inherit',
-  display: 'inline-block',
-};
-
-class TransButton extends React.Component<TransButtonProps> {
-  div?: HTMLDivElement;
-
-  lastKeyCode?: number;
-
-  onKeyDown: React.KeyboardEventHandler<HTMLDivElement> = event => {
-    const { keyCode } = event;
-    if (keyCode === KeyCode.ENTER) {
-      event.preventDefault();
-    }
-  };
-
-  onKeyUp: React.KeyboardEventHandler<HTMLDivElement> = event => {
-    const { keyCode } = event;
-    const { onClick } = this.props;
-    if (keyCode === KeyCode.ENTER && onClick) {
-      onClick();
-    }
-  };
-
-  setRef = (btn: HTMLDivElement) => {
-    this.div = btn;
-  };
-
-  focus() {
-    if (this.div) {
-      this.div.focus();
-    }
-  }
-
-  blur() {
-    if (this.div) {
-      this.div.blur();
-    }
-  }
-
-  render() {
-    const { style, noStyle, ...restProps } = this.props;
-
-    return (
-      <div
-        role="button"
-        tabIndex={0}
-        ref={this.setRef}
-        {...restProps}
-        onKeyDown={this.onKeyDown}
-        onKeyUp={this.onKeyUp}
-        style={{ ...(!noStyle ? inlineStyle : null), ...style }}
-      />
-    );
-  }
-}
-
-export default TransButton;

components/_util/triggerEvent.tsx

@@ -1,8 +0,0 @@
-export default function triggerEvent(el: Element, type: string) {
-  if ('createEvent' in document) {
-    // modern browsers, IE9+
-    const e = document.createEvent('HTMLEvents');
-    e.initEvent(type, false, true);
-    el.dispatchEvent(e);
-  }
-}

components/_util/type.ts

@@ -1,5 +0,0 @@
-export type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
-// https://stackoverflow.com/questions/46176165/ways-to-get-string-literal-type-of-array-values-without-enum-overhead
-export const tuple = <T extends string[]>(...args: T) => args;
-
-export const tupleNum = <T extends number[]>(...args: T) => args;

components/_util/warning.ts

@@ -1,7 +0,0 @@
-import warning, { resetWarned } from 'rc-util/lib/warning';
-
-export { resetWarned };
-
-export default (valid: boolean, component: string, message: string): void => {
-  warning(valid, `[antd: ${component}] ${message}`);
-};

components/_util/wave.tsx

@@ -1,195 +0,0 @@
-import * as React from 'react';
-import { findDOMNode } from 'react-dom';
-import TransitionEvents from 'css-animation/lib/Event';
-import raf from './raf';
-import { ConfigConsumer, ConfigConsumerProps, CSPConfig } from '../config-provider';
-
-let styleForPesudo: HTMLStyleElement | null;
-
-// Where el is the DOM element you'd like to test for visibility
-function isHidden(element: HTMLElement) {
-  if (process.env.NODE_ENV === 'test') {
-    return false;
-  }
-  return !element || element.offsetParent === null;
-}
-
-function isNotGrey(color: string) {
-  // eslint-disable-next-line no-useless-escape
-  const match = (color || '').match(/rgba?\((\d*), (\d*), (\d*)(, [\.\d]*)?\)/);
-  if (match && match[1] && match[2] && match[3]) {
-    return !(match[1] === match[2] && match[2] === match[3]);
-  }
-  return true;
-}
-
-export default class Wave extends React.Component<{ insertExtraNode?: boolean }> {
-  private instance?: {
-    cancel: () => void;
-  };
-
-  private extraNode: HTMLDivElement;
-
-  private clickWaveTimeoutId: number;
-
-  private animationStartId: number;
-
-  private animationStart: boolean = false;
-
-  private destroy: boolean = false;
-
-  private csp?: CSPConfig;
-
-  componentDidMount() {
-    const node = findDOMNode(this) as HTMLElement;
-    if (!node || node.nodeType !== 1) {
-      return;
-    }
-    this.instance = this.bindAnimationEvent(node);
-  }
-
-  componentWillUnmount() {
-    if (this.instance) {
-      this.instance.cancel();
-    }
-    if (this.clickWaveTimeoutId) {
-      clearTimeout(this.clickWaveTimeoutId);
-    }
-
-    this.destroy = true;
-  }
-
-  onClick = (node: HTMLElement, waveColor: string) => {
-    if (!node || isHidden(node) || node.className.indexOf('-leave') >= 0) {
-      return;
-    }
-    const { insertExtraNode } = this.props;
-    this.extraNode = document.createElement('div');
-    const { extraNode } = this;
-    extraNode.className = 'ant-click-animating-node';
-    const attributeName = this.getAttributeName();
-    node.setAttribute(attributeName, 'true');
-    // Not white or transparnt or grey
-    styleForPesudo = styleForPesudo || document.createElement('style');
-    if (
-      waveColor &&
-      waveColor !== '#ffffff' &&
-      waveColor !== 'rgb(255, 255, 255)' &&
-      isNotGrey(waveColor) &&
-      !/rgba\(\d*, \d*, \d*, 0\)/.test(waveColor) && // any transparent rgba color
-      waveColor !== 'transparent'
-    ) {
-      // Add nonce if CSP exist
-      if (this.csp && this.csp.nonce) {
-        styleForPesudo.nonce = this.csp.nonce;
-      }
-
-      extraNode.style.borderColor = waveColor;
-      styleForPesudo.innerHTML = `
-      [ant-click-animating-without-extra-node='true']::after, .ant-click-animating-node {
-        --antd-wave-shadow-color: ${waveColor};
-      }`;
-      if (!document.body.contains(styleForPesudo)) {
-        document.body.appendChild(styleForPesudo);
-      }
-    }
-    if (insertExtraNode) {
-      node.appendChild(extraNode);
-    }
-    TransitionEvents.addStartEventListener(node, this.onTransitionStart);
-    TransitionEvents.addEndEventListener(node, this.onTransitionEnd);
-  };
-
-  onTransitionStart = (e: AnimationEvent) => {
-    if (this.destroy) return;
-
-    const node = findDOMNode(this) as HTMLElement;
-    if (!e || e.target !== node) {
-      return;
-    }
-
-    if (!this.animationStart) {
-      this.resetEffect(node);
-    }
-  };
-
-  onTransitionEnd = (e: AnimationEvent) => {
-    if (!e || e.animationName !== 'fadeEffect') {
-      return;
-    }
-    this.resetEffect(e.target as HTMLElement);
-  };
-
-  getAttributeName() {
-    const { insertExtraNode } = this.props;
-    return insertExtraNode ? 'ant-click-animating' : 'ant-click-animating-without-extra-node';
-  }
-
-  bindAnimationEvent = (node: HTMLElement) => {
-    if (
-      !node ||
-      !node.getAttribute ||
-      node.getAttribute('disabled') ||
-      node.className.indexOf('disabled') >= 0
-    ) {
-      return;
-    }
-    const onClick = (e: MouseEvent) => {
-      // Fix radio button click twice
-      if ((e.target as HTMLElement).tagName === 'INPUT' || isHidden(e.target as HTMLElement)) {
-        return;
-      }
-      this.resetEffect(node);
-      // Get wave color from target
-      const waveColor =
-        getComputedStyle(node).getPropertyValue('border-top-color') || // Firefox Compatible
-        getComputedStyle(node).getPropertyValue('border-color') ||
-        getComputedStyle(node).getPropertyValue('background-color');
-      this.clickWaveTimeoutId = window.setTimeout(() => this.onClick(node, waveColor), 0);
-
-      raf.cancel(this.animationStartId);
-      this.animationStart = true;
-
-      // Render to trigger transition event cost 3 frames. Let's delay 10 frames to reset this.
-      this.animationStartId = raf(() => {
-        this.animationStart = false;
-      }, 10);
-    };
-    node.addEventListener('click', onClick, true);
-    return {
-      cancel: () => {
-        node.removeEventListener('click', onClick, true);
-      },
-    };
-  };
-
-  resetEffect(node: HTMLElement) {
-    if (!node || node === this.extraNode || !(node instanceof Element)) {
-      return;
-    }
-    const { insertExtraNode } = this.props;
-    const attributeName = this.getAttributeName();
-    node.setAttribute(attributeName, 'false'); // edge has bug on `removeAttribute` #14466
-
-    if (styleForPesudo) {
-      styleForPesudo.innerHTML = '';
-    }
-
-    if (insertExtraNode && this.extraNode && node.contains(this.extraNode)) {
-      node.removeChild(this.extraNode);
-    }
-    TransitionEvents.removeStartEventListener(node, this.onTransitionStart);
-    TransitionEvents.removeEndEventListener(node, this.onTransitionEnd);
-  }
-
-  renderWave = ({ csp }: ConfigConsumerProps) => {
-    const { children } = this.props;
-    this.csp = csp;
-
-    return children;
-  };
-
-  render() {
-    return <ConfigConsumer>{this.renderWave}</ConfigConsumer>;
-  }
-}

components/affix/__tests__/Affix.test.js

@@ -1,198 +0,0 @@
-import React from 'react';
-import { mount } from 'enzyme';
-import Affix from '..';
-import { getObserverEntities } from '../utils';
-import Button from '../../button';
-import { spyElementPrototype } from '../../__tests__/util/domHook';
-
-const events = {};
-
-class AffixMounter extends React.Component {
-  componentDidMount() {
-    this.container.addEventListener = jest.fn().mockImplementation((event, cb) => {
-      events[event] = cb;
-    });
-  }
-
-  getTarget = () => this.container;
-
-  render() {
-    return (
-      <div
-        ref={node => {
-          this.container = node;
-        }}
-        className="container"
-      >
-        <Affix
-          className="fixed"
-          target={this.getTarget}
-          ref={ele => {
-            this.affix = ele;
-          }}
-          {...this.props}
-        >
-          <Button type="primary">Fixed at the top of container</Button>
-        </Affix>
-      </div>
-    );
-  }
-}
-
-describe('Affix Render', () => {
-  let wrapper;
-  let domMock;
-
-  const classRect = {
-    container: {
-      top: 0,
-      bottom: 100,
-    },
-  };
-
-  beforeAll(() => {
-    jest.useFakeTimers();
-    domMock = spyElementPrototype(HTMLElement, 'getBoundingClientRect', function mockBounding() {
-      return (
-        classRect[this.className] || {
-          top: 0,
-          bottom: 0,
-        }
-      );
-    });
-  });
-
-  afterAll(() => {
-    jest.useRealTimers();
-    domMock.mockRestore();
-  });
-  const movePlaceholder = top => {
-    classRect.fixed = {
-      top,
-      bottom: top,
-    };
-    events.scroll({
-      type: 'scroll',
-    });
-    jest.runAllTimers();
-  };
-
-  it('Anchor render perfectly', () => {
-    document.body.innerHTML = '<div id="mounter" />';
-
-    wrapper = mount(<AffixMounter />, { attachTo: document.getElementById('mounter') });
-    jest.runAllTimers();
-
-    movePlaceholder(0);
-    expect(wrapper.instance().affix.state.affixStyle).toBeFalsy();
-
-    movePlaceholder(-100);
-    expect(wrapper.instance().affix.state.affixStyle).toBeTruthy();
-
-    movePlaceholder(0);
-    expect(wrapper.instance().affix.state.affixStyle).toBeFalsy();
-  });
-
-  it('support offsetBottom', () => {
-    document.body.innerHTML = '<div id="mounter" />';
-
-    wrapper = mount(<AffixMounter offsetBottom={0} />, {
-      attachTo: document.getElementById('mounter'),
-    });
-
-    jest.runAllTimers();
-
-    movePlaceholder(300);
-    expect(wrapper.instance().affix.state.affixStyle).toBeTruthy();
-
-    movePlaceholder(0);
-    expect(wrapper.instance().affix.state.affixStyle).toBeFalsy();
-
-    movePlaceholder(300);
-    expect(wrapper.instance().affix.state.affixStyle).toBeTruthy();
-  });
-
-  it('updatePosition when offsetTop changed', () => {
-    document.body.innerHTML = '<div id="mounter" />';
-
-    wrapper = mount(<AffixMounter offsetTop={0} />, {
-      attachTo: document.getElementById('mounter'),
-    });
-    jest.runAllTimers();
-
-    movePlaceholder(-100);
-    expect(wrapper.instance().affix.state.affixStyle.top).toBe(0);
-    wrapper.setProps({
-      offsetTop: 10,
-    });
-    jest.runAllTimers();
-    expect(wrapper.instance().affix.state.affixStyle.top).toBe(10);
-  });
-
-  describe('updatePosition when target changed', () => {
-    it('function change', () => {
-      document.body.innerHTML = '<div id="mounter" />';
-      const container = document.querySelector('#id');
-      const getTarget = () => container;
-      wrapper = mount(<Affix target={getTarget} />);
-      wrapper.setProps({ target: null });
-      expect(wrapper.instance().state.status).toBe(0);
-      expect(wrapper.instance().state.affixStyle).toBe(undefined);
-      expect(wrapper.instance().state.placeholderStyle).toBe(undefined);
-    });
-
-    it('instance change', () => {
-      const getObserverLength = () => Object.keys(getObserverEntities()).length;
-
-      const container = document.createElement('div');
-      document.body.appendChild(container);
-      let target = container;
-
-      const originLength = getObserverLength();
-      const getTarget = () => target;
-      wrapper = mount(<Affix target={getTarget} />);
-      jest.runAllTimers();
-
-      expect(getObserverLength()).toBe(originLength + 1);
-      target = null;
-      wrapper.setProps({});
-      wrapper.update();
-      jest.runAllTimers();
-      expect(getObserverLength()).toBe(originLength);
-    });
-  });
-
-  describe('updatePosition when size changed', () => {
-    function test(name, index) {
-      it(name, () => {
-        document.body.innerHTML = '<div id="mounter" />';
-
-        const updateCalled = jest.fn();
-        wrapper = mount(<AffixMounter offsetBottom={0} onTestUpdatePosition={updateCalled} />, {
-          attachTo: document.getElementById('mounter'),
-        });
-
-        jest.runAllTimers();
-
-        movePlaceholder(300);
-        expect(wrapper.instance().affix.state.affixStyle).toBeTruthy();
-        jest.runAllTimers();
-        wrapper.update();
-
-        // Mock trigger resize
-        updateCalled.mockReset();
-        wrapper
-          .find('ResizeObserver')
-          .at(index)
-          .instance()
-          .onResize([{ target: { getBoundingClientRect: () => ({ width: 99, height: 99 }) } }]);
-        jest.runAllTimers();
-
-        expect(updateCalled).toHaveBeenCalled();
-      });
-    }
-
-    test('inner', 0);
-    test('outer', 1);
-  });
-});

components/affix/__tests__/__snapshots__/demo.test.js.snap

@@ -1,108 +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/debug.md correctly 1`] = `
-<div
-  style="height:10000px"
->
-  <div>
-    Top
-  </div>
-  <div>
-    <div
-      class=""
-    >
-      <div
-        style="background:red"
-      >
-        <button
-          class="ant-btn ant-btn-primary"
-          type="button"
-        >
-          <span>
-            Affix top
-          </span>
-        </button>
-      </div>
-    </div>
-  </div>
-  <div>
-    Bottom
-  </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>
-`;

components/affix/__tests__/demo.test.js

@@ -1,3 +0,0 @@
-import demoTest from '../../../tests/shared/demoTest';
-
-demoTest('affix');

components/affix/demo/basic.md

@@ -13,47 +13,12 @@ title:
 
 The simplest usage.
 
-```jsx
+````jsx
 import { Affix, Button } from 'antd';
 
-class Demo extends React.Component {
-  state = {
-    top: 10,
-    bottom: 10,
-  };
-
-  render() {
-    return (
-      <div>
-        <Affix offsetTop={this.state.top}>
-          <Button
-            type="primary"
-            onClick={() => {
-              this.setState({
-                top: this.state.top + 10,
-              });
-            }}
-          >
-            Affix top
-          </Button>
-        </Affix>
-        <br />
-        <Affix offsetBottom={this.state.bottom}>
-          <Button
-            type="primary"
-            onClick={() => {
-              this.setState({
-                bottom: this.state.bottom + 10,
-              });
-            }}
-          >
-            Affix bottom
-          </Button>
-        </Affix>
-      </div>
-    );
-  }
-}
-
-ReactDOM.render(<Demo />, mountNode);
-```
+ReactDOM.render(
+  <Affix>
+    <Button type="primary">Affix top</Button>
+  </Affix>
+, mountNode);
+````

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

components/affix/demo/debug.md

@@ -1,50 +0,0 @@
----
-order: 99
-title:
-  zh-CN: 调试
-  en-US: Debug
-debug: true
----
-
-## zh-CN
-
-DEBUG
-
-## en-US
-
-DEBUG
-
-```jsx
-import { Affix, Button } from 'antd';
-
-class Demo extends React.Component {
-  state = {
-    top: 10,
-  };
-
-  render() {
-    return (
-      <div style={{ height: 10000 }}>
-        <div>Top</div>
-        <Affix offsetTop={this.state.top}>
-          <div style={{ background: 'red' }}>
-            <Button
-              type="primary"
-              onClick={() => {
-                this.setState({
-                  top: this.state.top + 10,
-                });
-              }}
-            >
-              Affix top
-            </Button>
-          </div>
-        </Affix>
-        <div>Bottom</div>
-      </div>
-    );
-  }
-}
-
-ReactDOM.render(<Demo />, mountNode);
-```

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

components/affix/demo/on-change.md

@@ -1,5 +1,5 @@
 ---
-order: 1
+order: 3
 title:
   zh-CN: 固定状态改变的回调
   en-US: Callback
@@ -13,13 +13,12 @@ title:
 
 Callback with affixed state.
 
-```jsx
+````jsx
 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);
+````

components/affix/demo/target.md

@@ -1,5 +1,5 @@
 ---
-order: 2
+order: 4
 title:
   zh-CN: 滚动容器
   en-US: Container to scroll.
@@ -11,41 +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
+````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}>
+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>
+````

components/affix/index.en-US.md

@@ -1,36 +1,29 @@
 ---
 category: Components
-type: Navigation
+type: Other
 title: Affix
 ---
 
-Wrap Affix around another component to make it stick the viewport.
+Make an element sticky to viewport.
 
 ## When To Use
 
-On longer web pages, its helpful for some content 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 | Version |
-| --- | --- | --- | --- | --- |
-| offsetBottom | Offset from the bottom of the viewport (in pixels) | number | - |  |
-| offsetTop | Offset from the top of the viewport (in pixels) | number | 0 |  |
-| target | Specifies the scrollable area DOM node | () => HTMLElement | () => window |  |
-| onChange | Callback for when Affix state is changed | Function(affixed) | - |  |
+| 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 | - |
+| onChange     | Callback when affix state is changed | Function(affixed) | - |
 
-**Note:** Children of `Affix` must not have the property `position: absolute`, but you can set `position: absolute` on `Affix` itself:
+**Note:** Children of `Affix` can not be `position: absolute`, but you can set `Affix` as `position: absolute`:
 
 ```jsx
-<Affix style={{ position: 'absolute', top: y, left: x }}>...</Affix>
+<Affix style={{ position: 'absolute', top: y, left: x}}>
+  ...
+</Affix>
 ```
-
-## FAQ
-
-### Affix bind container with `target`, sometime move out of container.
-
-We don't listen window scroll for performance consideration. You can add listener if you still want: <https://codesandbox.io/s/2xyj5zr85p>
-
-Related issues：[#3938](https://github.com/ant-design/ant-design/issues/3938) [#5642](https://github.com/ant-design/ant-design/issues/5642) [#16120](https://github.com/ant-design/ant-design/issues/16120)

components/affix/index.tsx

@@ -1,23 +1,42 @@
-import * as React from 'react';
-import { polyfill } from 'react-lifecycles-compat';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import addEventListener from 'rc-util/lib/Dom/addEventListener';
 import classNames from 'classnames';
+import shallowequal from 'shallowequal';
 import omit from 'omit.js';
-import ResizeObserver from 'rc-resize-observer';
-import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
-import { throttleByAnimationFrameDecorator } from '../_util/throttleByAnimationFrame';
+import getScroll from '../_util/getScroll';
 
-import warning from '../_util/warning';
-import {
-  addObserveTarget,
-  removeObserveTarget,
-  getTargetRect,
-  getFixedTop,
-  getFixedBottom,
-} from './utils';
+function getTargetRect(target): ClientRect {
+  return target !== window ?
+    target.getBoundingClientRect() :
+    { top: 0, left: 0, bottom: 0 };
+}
+
+function getOffset(element: HTMLElement, target) {
+  const elemRect = element.getBoundingClientRect();
+  const targetRect = getTargetRect(target);
+
+  const scrollTop = getScroll(target, true);
+  const scrollLeft = getScroll(target, false);
+
+  const docElem = window.document.body;
+  const clientTop = docElem.clientTop || 0;
+  const clientLeft = docElem.clientLeft || 0;
+
+  return {
+    top: elemRect.top - targetRect.top +
+      scrollTop - clientTop,
+    left: elemRect.left - targetRect.left +
+      scrollLeft - clientLeft,
+  };
+}
+
+function noop() {}
 
 function getDefaultTarget() {
-  return typeof window !== 'undefined' ? window : null;
-}
+  return typeof window !== 'undefined' ?
+    window : null;
+};
 
 // Affix
 export interface AffixProps {
@@ -32,273 +51,171 @@ export interface AffixProps {
   /** 固定状态改变时触发的回调函数 */
   onChange?: (affixed?: boolean) => void;
   /** 设置 Affix 需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数 */
-  target?: () => Window | HTMLElement | null;
+  target?: () => Window | HTMLElement;
   prefixCls?: string;
-  className?: string;
-  children: React.ReactElement;
 }
 
-enum AffixStatus {
-  None,
-  Prepare,
-}
-
-export interface AffixState {
-  affixStyle?: React.CSSProperties;
-  placeholderStyle?: React.CSSProperties;
-  status: AffixStatus;
-  lastAffix: boolean;
-
-  prevTarget: Window | HTMLElement | null;
-}
-
-class Affix extends React.Component<AffixProps, AffixState> {
-  static defaultProps = {
-    target: getDefaultTarget,
+export default class Affix extends React.Component<AffixProps, any> {
+  static propTypes = {
+    offsetTop: React.PropTypes.number,
+    offsetBottom: React.PropTypes.number,
+    target: React.PropTypes.func,
   };
 
-  state: AffixState = {
-    status: AffixStatus.None,
-    lastAffix: false,
-    prevTarget: null,
+  scrollEvent: any;
+  resizeEvent: any;
+  refs: {
+    fixedNode: HTMLElement;
   };
 
-  placeholderNode: HTMLDivElement;
+  constructor(props) {
+    super(props);
+    this.state = {
+      affixStyle: null,
+      placeholderStyle: null,
+    };
+  }
 
-  fixedNode: HTMLDivElement;
+  setAffixStyle(e, affixStyle) {
+    const { onChange = noop, target = getDefaultTarget } = this.props;
+    const originalAffixStyle = this.state.affixStyle;
+    const isWindow = target() === window;
+    if (e.type === 'scroll' && originalAffixStyle && affixStyle && isWindow) {
+      return;
+    }
+    if (shallowequal(affixStyle, originalAffixStyle)) {
+      return;
+    }
+    this.setState({ affixStyle }, () => {
+      const affixed = !!this.state.affixStyle;
+      if ((affixStyle && !originalAffixStyle) ||
+          (!affixStyle && originalAffixStyle)) {
+        onChange(affixed);
+      }
+    });
+  }
 
-  private timeout: number;
+  setPlaceholderStyle(e, placeholderStyle) {
+    const originalPlaceholderStyle = this.state.placeholderStyle;
+    if (e.type === 'resize') {
+      return;
+    }
+    if (shallowequal(placeholderStyle, originalPlaceholderStyle)) {
+      return;
+    }
+    this.setState({ placeholderStyle });
+  }
 
-  // Event handler
-  componentDidMount() {
-    const { target } = this.props;
-    if (target) {
-      // [Legacy] Wait for parent component ref has its value.
-      // We should use target as directly element instead of function which makes element check hard.
-      this.timeout = setTimeout(() => {
-        addObserveTarget(target(), this);
-        // Mock Event object.
-        this.updatePosition();
+  updatePosition = (e) => {
+    let { offsetTop, offsetBottom, offset, target = getDefaultTarget } = this.props;
+    const targetNode = target();
+
+    // Backwards support
+    offsetTop = offsetTop || offset;
+    const scrollTop = getScroll(targetNode, true);
+    const affixNode = ReactDOM.findDOMNode(this) as HTMLElement;
+    const elemOffset = getOffset(affixNode, targetNode);
+    const elemSize = {
+      width: this.refs.fixedNode.offsetWidth,
+      height: this.refs.fixedNode.offsetHeight,
+    };
+
+    const offsetMode = {
+      top: false,
+      bottom: false,
+    };
+    // Default to `offsetTop=0`.
+    if (typeof offsetTop !== 'number' && typeof offsetBottom !== 'number') {
+      offsetMode.top = true;
+      offsetTop = 0;
+    } else {
+      offsetMode.top = typeof offsetTop === 'number';
+      offsetMode.bottom = typeof offsetBottom === 'number';
+    }
+
+    const targetRect = getTargetRect(targetNode);
+    const targetInnerHeight =
+      (targetNode as Window).innerHeight || (targetNode as HTMLElement).clientHeight;
+    if (scrollTop > elemOffset.top - offsetTop && offsetMode.top) {
+      // Fixed Top
+      this.setAffixStyle(e, {
+        position: 'fixed',
+        top: targetRect.top + offsetTop,
+        left: targetRect.left + elemOffset.left,
+        width: affixNode.offsetWidth,
       });
+      this.setPlaceholderStyle(e, {
+        width: affixNode.offsetWidth,
+        height: affixNode.offsetHeight,
+      });
+    } else if (
+      scrollTop < elemOffset.top + elemSize.height + offsetBottom - targetInnerHeight &&
+        offsetMode.bottom
+    ) {
+      // Fixed Bottom
+      const targetBottomOffet = targetNode === window ? 0 : (window.innerHeight - targetRect.bottom);
+      this.setAffixStyle(e, {
+        position: 'fixed',
+        bottom: targetBottomOffet + offsetBottom,
+        left: targetRect.left + elemOffset.left,
+        width: affixNode.offsetWidth,
+      });
+      this.setPlaceholderStyle(e, {
+        width: affixNode.offsetWidth,
+        height: affixNode.offsetHeight,
+      });
+    } else {
+      this.setAffixStyle(e, null);
+      this.setPlaceholderStyle(e, null);
     }
   }
 
-  componentDidUpdate(prevProps: AffixProps) {
-    const { prevTarget } = this.state;
-    const { target } = this.props;
-    let newTarget = null;
-    if (target) {
-      newTarget = target() || null;
+  componentDidMount() {
+    const target = this.props.target || getDefaultTarget;
+    this.setTargetEventListeners(target);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (this.props.target !== nextProps.target) {
+      this.clearScrollEventListeners();
+      this.setTargetEventListeners(nextProps.target);
+
+      // Mock Event object.
+      this.updatePosition({});
     }
-
-    if (prevTarget !== newTarget) {
-      removeObserveTarget(this);
-      if (newTarget) {
-        addObserveTarget(newTarget, this);
-        // Mock Event object.
-        this.updatePosition();
-      }
-
-      this.setState({ prevTarget: newTarget });
-    }
-
-    if (
-      prevProps.offsetTop !== this.props.offsetTop ||
-      prevProps.offsetBottom !== this.props.offsetBottom
-    ) {
-      this.updatePosition();
-    }
-
-    this.measure();
   }
 
   componentWillUnmount() {
-    clearTimeout(this.timeout);
-    removeObserveTarget(this);
-    (this.updatePosition as any).cancel();
+    this.clearScrollEventListeners();
   }
 
-  getOffsetTop = () => {
-    const { offset, offsetBottom } = this.props;
-    let { offsetTop } = this.props;
-    if (typeof offsetTop === 'undefined') {
-      offsetTop = offset;
-      warning(
-        typeof offset === 'undefined',
-        'Affix',
-        '`offset` is deprecated. Please use `offsetTop` instead.',
-      );
-    }
+  setTargetEventListeners(getTarget) {
+    const target = getTarget();
+    this.scrollEvent = addEventListener(target, 'scroll', this.updatePosition);
+    this.resizeEvent = addEventListener(target, 'resize', this.updatePosition);
+  }
 
-    if (offsetBottom === undefined && offsetTop === undefined) {
-      offsetTop = 0;
-    }
-    return offsetTop;
-  };
-
-  getOffsetBottom = () => {
-    return this.props.offsetBottom;
-  };
-
-  savePlaceholderNode = (node: HTMLDivElement) => {
-    this.placeholderNode = node;
-  };
-
-  saveFixedNode = (node: HTMLDivElement) => {
-    this.fixedNode = node;
-  };
-
-  // =================== Measure ===================
-  measure = () => {
-    const { status, lastAffix } = this.state;
-    const { target, onChange } = this.props;
-    if (status !== AffixStatus.Prepare || !this.fixedNode || !this.placeholderNode || !target) {
-      return;
-    }
-
-    const offsetTop = this.getOffsetTop();
-    const offsetBottom = this.getOffsetBottom();
-
-    const targetNode = target();
-    if (!targetNode) {
-      return;
-    }
-
-    const newState: Partial<AffixState> = {
-      status: AffixStatus.None,
-    };
-    const targetRect = getTargetRect(targetNode);
-    const placeholderReact = getTargetRect(this.placeholderNode);
-    const fixedTop = getFixedTop(placeholderReact, targetRect, offsetTop);
-    const fixedBottom = getFixedBottom(placeholderReact, targetRect, offsetBottom);
-
-    if (fixedTop !== undefined) {
-      newState.affixStyle = {
-        position: 'fixed',
-        top: fixedTop,
-        width: placeholderReact.width,
-        height: placeholderReact.height,
-      };
-      newState.placeholderStyle = {
-        width: placeholderReact.width,
-        height: placeholderReact.height,
-      };
-    } else if (fixedBottom !== undefined) {
-      newState.affixStyle = {
-        position: 'fixed',
-        bottom: fixedBottom,
-        width: placeholderReact.width,
-        height: placeholderReact.height,
-      };
-      newState.placeholderStyle = {
-        width: placeholderReact.width,
-        height: placeholderReact.height,
-      };
-    }
-
-    newState.lastAffix = !!newState.affixStyle;
-    if (onChange && lastAffix !== newState.lastAffix) {
-      onChange(newState.lastAffix);
-    }
-
-    this.setState(newState as AffixState);
-  };
-
-  // @ts-ignore TS6133
-  prepareMeasure = () => {
-    // event param is used before. Keep compatible ts define here.
-    this.setState({
-      status: AffixStatus.Prepare,
-      affixStyle: undefined,
-      placeholderStyle: undefined,
-    });
-
-    // Test if `updatePosition` called
-    if (process.env.NODE_ENV === 'test') {
-      const { onTestUpdatePosition } = this.props as any;
-      if (onTestUpdatePosition) {
-        onTestUpdatePosition();
+  clearScrollEventListeners() {
+    ['scrollEvent', 'resizeEvent'].forEach((name) => {
+      if (this[name]) {
+        this[name].remove();
       }
-    }
-  };
-
-  // Handle realign logic
-  @throttleByAnimationFrameDecorator()
-  updatePosition() {
-    this.prepareMeasure();
-  }
-
-  @throttleByAnimationFrameDecorator()
-  lazyUpdatePosition() {
-    const { target } = this.props;
-    const { affixStyle } = this.state;
-
-    // Check position change before measure to make Safari smooth
-    if (target && affixStyle) {
-      const offsetTop = this.getOffsetTop();
-      const offsetBottom = this.getOffsetBottom();
-
-      const targetNode = target();
-      if (targetNode) {
-        const targetRect = getTargetRect(targetNode);
-        const placeholderReact = getTargetRect(this.placeholderNode);
-        const fixedTop = getFixedTop(placeholderReact, targetRect, offsetTop);
-        const fixedBottom = getFixedBottom(placeholderReact, targetRect, offsetBottom);
-
-        if (
-          (fixedTop !== undefined && affixStyle.top === fixedTop) ||
-          (fixedBottom !== undefined && affixStyle.bottom === fixedBottom)
-        ) {
-          return;
-        }
-      }
-    }
-
-    // Directly call prepare measure since it's already throttled.
-    this.prepareMeasure();
-  }
-
-  // =================== Render ===================
-  renderAffix = ({ getPrefixCls }: ConfigConsumerProps) => {
-    const { affixStyle, placeholderStyle } = this.state;
-    const { prefixCls, children } = this.props;
-    const className = classNames({
-      [getPrefixCls('affix', prefixCls)]: affixStyle,
     });
-
-    let props = omit(this.props, ['prefixCls', 'offsetTop', 'offsetBottom', 'target', 'onChange']);
-    // Omit this since `onTestUpdatePosition` only works on test.
-    if (process.env.NODE_ENV === 'test') {
-      props = omit(props, ['onTestUpdatePosition']);
-    }
-
-    return (
-      <ResizeObserver
-        onResize={() => {
-          this.updatePosition();
-        }}
-      >
-        <div {...props} ref={this.savePlaceholderNode}>
-          {affixStyle && <div style={placeholderStyle} aria-hidden="true" />}
-          <div className={className} ref={this.saveFixedNode} style={affixStyle}>
-            <ResizeObserver
-              onResize={() => {
-                this.updatePosition();
-              }}
-            >
-              {children}
-            </ResizeObserver>
-          </div>
-        </div>
-      </ResizeObserver>
-    );
-  };
+  }
 
   render() {
-    return <ConfigConsumer>{this.renderAffix}</ConfigConsumer>;
+    const className = classNames({
+      [this.props.prefixCls || 'ant-affix']: this.state.affixStyle,
+    });
+
+    const props = omit(this.props, ['prefixCls', 'offsetTop', 'offsetBottom', 'target']);
+
+    return (
+      <div {...props} style={this.state.placeholderStyle}>
+        <div className={className} ref="fixedNode" style={this.state.affixStyle}>
+          {this.props.children}
+        </div>
+      </div>
+    );
   }
 }
-
-polyfill(Affix);
-
-export default Affix;

components/affix/index.zh-CN.md

@@ -1,7 +1,7 @@
 ---
 category: Components
 subtitle: 固钉
-type: 导航
+type: Other
 title: Affix
 ---
 
@@ -15,23 +15,17 @@ title: Affix
 
 ## API
 
-| 成员 | 说明 | 类型 | 默认值 | 版本 |
-| --- | --- | --- | --- | --- |
-| offsetBottom | 距离窗口底部达到指定偏移量后触发 | number |  |  |
-| offsetTop | 距离窗口顶部达到指定偏移量后触发 | number |  |  |
-| target | 设置 `Affix` 需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数 | () => HTMLElement | () => window |  |
-| onChange | 固定状态改变时触发的回调函数 | Function(affixed) | 无 |  |
+| 成员        | 说明           | 类型               | 默认值       |
+|-------------|----------------|--------------------|--------------|
+| offsetTop    | 距离窗口顶部达到指定偏移量后触发   | Number |         |
+| offsetBottom | 距离窗口底部达到指定偏移量后触发   | Number |         |
+| target | 设置 `Affix` 需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数 | Function | () => window |
+| onChange | 固定状态改变时触发的回调函数   | Function(affixed) | 无        |
 
 **注意：**`Affix` 内的元素不要使用绝对定位，如需要绝对定位的效果，可以直接设置 `Affix` 为绝对定位：
 
 ```jsx
-<Affix style={{ position: 'absolute', top: y, left: x }}>...</Affix>
+<Affix style={{ position: 'absolute', top: y, left: x}}>
+  ...
+</Affix>
 ```
-
-## FAQ
-
-### Affix 使用 `target` 绑定容器时，元素会跑到容器外。
-
-从性能角度考虑，我们只监听容器滚动事件。如果希望任意滚动，你可以在窗体添加滚动监听：<https://codesandbox.io/s/2xyj5zr85p>
-
-相关 issue：[#3938](https://github.com/ant-design/ant-design/issues/3938) [#5642](https://github.com/ant-design/ant-design/issues/5642) [#16120](https://github.com/ant-design/ant-design/issues/16120)

components/affix/style/index.less

@@ -1,4 +1,4 @@
-@import '../../style/themes/index';
+@import "../../style/themes/default";
 
 .@{ant-prefix}-affix {
   position: fixed;

components/affix/utils.ts

@@ -1,106 +0,0 @@
-import addEventListener from 'rc-util/lib/Dom/addEventListener';
-import Affix from '.';
-
-export type BindElement = HTMLElement | Window | null | undefined;
-export type Rect = ClientRect | DOMRect;
-
-export function getTargetRect(target: BindElement): ClientRect {
-  return target !== window
-    ? (target as HTMLElement).getBoundingClientRect()
-    : ({ top: 0, bottom: window.innerHeight } as ClientRect);
-}
-
-export function getFixedTop(
-  placeholderReact: Rect,
-  targetRect: Rect,
-  offsetTop: number | undefined,
-) {
-  if (offsetTop !== undefined && targetRect.top > placeholderReact.top - offsetTop) {
-    return offsetTop + targetRect.top;
-  }
-  return undefined;
-}
-
-export function getFixedBottom(
-  placeholderReact: Rect,
-  targetRect: Rect,
-  offsetBottom: number | undefined,
-) {
-  if (offsetBottom !== undefined && targetRect.bottom < placeholderReact.bottom + offsetBottom) {
-    const targetBottomOffset = window.innerHeight - targetRect.bottom;
-    return offsetBottom + targetBottomOffset;
-  }
-  return undefined;
-}
-
-// ======================== Observer ========================
-const TRIGGER_EVENTS = [
-  'resize',
-  'scroll',
-  'touchstart',
-  'touchmove',
-  'touchend',
-  'pageshow',
-  'load',
-];
-
-interface ObserverEntity {
-  target: HTMLElement | Window;
-  affixList: Affix[];
-  eventHandlers: { [eventName: string]: any };
-}
-
-let observerEntities: ObserverEntity[] = [];
-
-export function getObserverEntities() {
-  // Only used in test env. Can be removed if refactor.
-  return observerEntities;
-}
-
-export function addObserveTarget(target: HTMLElement | Window | null, affix: Affix): void {
-  if (!target) return;
-
-  let entity: ObserverEntity | undefined = observerEntities.find(item => item.target === target);
-
-  if (entity) {
-    entity.affixList.push(affix);
-  } else {
-    entity = {
-      target,
-      affixList: [affix],
-      eventHandlers: {},
-    };
-    observerEntities.push(entity);
-
-    // Add listener
-    TRIGGER_EVENTS.forEach(eventName => {
-      entity!.eventHandlers[eventName] = addEventListener(target, eventName, () => {
-        entity!.affixList.forEach(targetAffix => {
-          targetAffix.lazyUpdatePosition();
-        });
-      });
-    });
-  }
-}
-
-export function removeObserveTarget(affix: Affix): void {
-  const observerEntity = observerEntities.find(oriObserverEntity => {
-    const hasAffix = oriObserverEntity.affixList.some(item => item === affix);
-    if (hasAffix) {
-      oriObserverEntity.affixList = oriObserverEntity.affixList.filter(item => item !== affix);
-    }
-    return hasAffix;
-  });
-
-  if (observerEntity && observerEntity.affixList.length === 0) {
-    observerEntities = observerEntities.filter(item => item !== observerEntity);
-
-    // Remove listener
-    TRIGGER_EVENTS.forEach(eventName => {
-      const handler = observerEntity.eventHandlers[eventName];
-      if (handler && handler.remove) {
-        handler.remove();
-      }
-    });
-  }
-}

components/alert/__tests__/demo.test.js

@@ -1,3 +0,0 @@
-import demoTest from '../../../tests/shared/demoTest';
-
-demoTest('alert');

components/alert/__tests__/index.test.js

@@ -1,67 +0,0 @@
-import React from 'react';
-import { mount } from 'enzyme';
-import Alert from '..';
-
-describe('Alert', () => {
-  beforeAll(() => {
-    jest.useFakeTimers();
-  });
-
-  afterAll(() => {
-    jest.useRealTimers();
-  });
-
-  it('could be closed', () => {
-    const onClose = jest.fn();
-    const afterClose = jest.fn();
-    const wrapper = mount(
-      <Alert
-        message="Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text"
-        type="warning"
-        closable
-        onClose={onClose}
-        afterClose={afterClose}
-      />,
-    );
-    wrapper.find('.ant-alert-close-icon').simulate('click');
-    expect(onClose).toHaveBeenCalled();
-    jest.runAllTimers();
-    expect(afterClose).toHaveBeenCalled();
-  });
-
-  describe('data and aria props', () => {
-    it('sets data attributes on input', () => {
-      const wrapper = mount(<Alert data-test="test-id" data-id="12345" />);
-      const input = wrapper.find('.ant-alert').getDOMNode();
-      expect(input.getAttribute('data-test')).toBe('test-id');
-      expect(input.getAttribute('data-id')).toBe('12345');
-    });
-
-    it('sets aria attributes on input', () => {
-      const wrapper = mount(<Alert aria-describedby="some-label" />);
-      const input = wrapper.find('.ant-alert').getDOMNode();
-      expect(input.getAttribute('aria-describedby')).toBe('some-label');
-    });
-
-    it('sets role attribute on input', () => {
-      const wrapper = mount(<Alert role="status" />);
-      const input = wrapper.find('.ant-alert').getDOMNode();
-      expect(input.getAttribute('role')).toBe('status');
-    });
-  });
-
-  it('warning for props#iconType', () => {
-    const warnSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
-    mount(
-      <Alert
-        message="Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text"
-        type="warning"
-        iconType="up"
-      />,
-    );
-    expect(warnSpy).toHaveBeenCalledWith(
-      'Warning: [antd: Alert] `iconType` is deprecated. Please use `icon` instead.',
-    );
-    warnSpy.mockRestore();
-  });
-});

components/alert/demo/banner.md

@@ -1,6 +1,5 @@
 ---
 order: 6
-iframe: 250
 title:
   zh-CN: 顶部公告
   en-US: Banner
@@ -8,29 +7,20 @@ 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
+````jsx
 import { Alert } from 'antd';
 
 ReactDOM.render(
   <div>
     <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,
-);
-```
+    <Alert message="Very long warning text warning text text text text text text text" banner closable />
+  </div>
+, mountNode);
+````

components/alert/demo/basic.md

@@ -13,14 +13,10 @@ title:
 
 The simplest usage for short messages.
 
-```jsx
+````jsx
 import { Alert } from 'antd';
 
-ReactDOM.render(<Alert message="Success Text" type="success" />, mountNode);
-```
-
-<style>
-.ant-alert {
-  margin-bottom: 16px;
-}
-</style>
+ReactDOM.render(
+  <Alert message="Success Text" type="success" />
+, mountNode);
+````

components/alert/demo/closable.md

@@ -13,29 +13,24 @@ title:
 
 To show close button.
 
-```jsx
+````jsx
 import { Alert } from 'antd';
 
-const onClose = e => {
+const onClose = function (e) {
   console.log(e, 'I was closed.');
 };
 
-ReactDOM.render(
-  <div>
-    <Alert
-      message="Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text"
-      type="warning"
-      closable
-      onClose={onClose}
-    />
-    <Alert
-      message="Error Text"
-      description="Error Description Error Description Error Description Error Description Error Description Error Description"
-      type="error"
-      closable
-      onClose={onClose}
-    />
-  </div>,
-  mountNode,
-);
-```
+ReactDOM.render(<div>
+  <Alert message="Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text"
+    type="warning"
+    closable
+    onClose={onClose}
+  />
+  <Alert message="Error Text"
+    description="Error Description Error Description Error Description Error Description Error Description Error Description"
+    type="error"
+    closable
+    onClose={onClose}
+  />
+</div>, mountNode);
+````

components/alert/demo/close-text.md

@@ -13,8 +13,10 @@ title:
 
 Replace the default icon with customized text.
 
-```jsx
+````jsx
 import { Alert } from 'antd';
 
-ReactDOM.render(<Alert message="Info Text" type="info" closeText="Close Now" />, mountNode);
-```
+ReactDOM.render(
+  <Alert message="Info Text" type="info" closeText="Close Now" />
+, mountNode);
+````

components/alert/demo/custom-icon.md

@@ -1,60 +0,0 @@
----
-order: 12
-debug: true
-title:
-  zh-CN: 自定义图标
-  en-US: Custom Icon
----
-
-## zh-CN
-
-可口的图标让信息类型更加醒目。
-
-## en-US
-
-A relevant icon makes information clearer and more friendly.
-
-```jsx
-import { Alert, Icon } from 'antd';
-
-const icon = <Icon type="smile" />;
-
-ReactDOM.render(
-  <div>
-    <Alert icon={icon} message="showIcon = false" type="success" />
-    <Alert icon={icon} message="Success Tips" type="success" showIcon />
-    <Alert icon={icon} message="Informational Notes" type="info" showIcon />
-    <Alert icon={icon} message="Warning" type="warning" showIcon />
-    <Alert icon={icon} message="Error" type="error" showIcon />
-    <Alert
-      icon={icon}
-      message="Success Tips"
-      description="Detailed description and advices about successful copywriting."
-      type="success"
-      showIcon
-    />
-    <Alert
-      icon={icon}
-      message="Informational Notes"
-      description="Additional description and informations about copywriting."
-      type="info"
-      showIcon
-    />
-    <Alert
-      icon={icon}
-      message="Warning"
-      description="This is a warning notice about copywriting."
-      type="warning"
-      showIcon
-    />
-    <Alert
-      icon={icon}
-      message="Error"
-      description="This is an error message about copywriting."
-      type="error"
-      showIcon
-    />
-  </div>,
-  mountNode,
-);
-```

components/alert/demo/description.md

@@ -13,32 +13,29 @@ title:
 
 Additional description for alert message.
 
-```jsx
+````jsx
 import { Alert } from 'antd';
 
-ReactDOM.render(
-  <div>
-    <Alert
-      message="Success Text"
-      description="Success Description Success Description Success Description"
-      type="success"
-    />
-    <Alert
-      message="Info Text"
-      description="Info Description Info Description Info Description Info Description"
-      type="info"
-    />
-    <Alert
-      message="Warning Text"
-      description="Warning Description Warning Description Warning Description Warning Description"
-      type="warning"
-    />
-    <Alert
-      message="Error Text"
-      description="Error Description Error Description Error Description Error Description"
-      type="error"
-    />
-  </div>,
-  mountNode,
-);
-```
+ReactDOM.render(<div>
+  <Alert
+    message="Success Text"
+    description="Success Description Success Description Success Description"
+    type="success"
+  />
+  <Alert
+    message="Info Text"
+    description="Info Description Info Description Info Description Info Description"
+    type="info"
+  />
+  <Alert
+    message="Warning Text"
+    description="Warning Description Warning Description Warning Description Warning Description"
+    type="warning"
+  />
+  <Alert
+    message="Error Text"
+    description="Error Description Error Description Error Description Error Description"
+    type="error"
+  />
+</div>, mountNode);
+````

components/alert/demo/icon.md

@@ -11,42 +11,39 @@ title:
 
 ## en-US
 
-A relevant icon will make information clearer and more friendly.
+Decent icon make information more clear and more friendly.
 
-```jsx
+````jsx
 import { Alert } from 'antd';
 
-ReactDOM.render(
-  <div>
-    <Alert message="Success Tips" type="success" showIcon />
-    <Alert message="Informational Notes" type="info" showIcon />
-    <Alert message="Warning" type="warning" showIcon />
-    <Alert message="Error" type="error" showIcon />
-    <Alert
-      message="Success Tips"
-      description="Detailed description and advice about successful copywriting."
-      type="success"
-      showIcon
-    />
-    <Alert
-      message="Informational Notes"
-      description="Additional description and information about copywriting."
-      type="info"
-      showIcon
-    />
-    <Alert
-      message="Warning"
-      description="This is a warning notice about copywriting."
-      type="warning"
-      showIcon
-    />
-    <Alert
-      message="Error"
-      description="This is an error message about copywriting."
-      type="error"
-      showIcon
-    />
-  </div>,
-  mountNode,
-);
-```
+ReactDOM.render(<div>
+  <Alert message="Success Tips" type="success" showIcon />
+  <Alert message="Informational Notes" type="info" showIcon />
+  <Alert message="Warning" type="warning" showIcon />
+  <Alert message="Error" type="error" showIcon />
+  <Alert
+    message="success tips"
+    description="Detailed description and advices about successful copywriting."
+    type="success"
+    showIcon
+  />
+  <Alert
+    message="Informational Notes"
+    description="Additional description and informations about copywriting."
+    type="info"
+    showIcon
+  />
+  <Alert
+    message="Warning"
+    description="This is a warning notice about copywriting."
+    type="warning"
+    showIcon
+  />
+  <Alert
+    message="Error"
+    description="This is an error message about copywriting."
+    type="error"
+    showIcon
+  />
+</div>, mountNode);
+````

components/alert/demo/smooth-closed.md

@@ -1,46 +0,0 @@
----
-order: 7
-title:
-  zh-CN: 平滑地卸载
-  en-US: Smoothly Unmount
----
-
-## zh-CN
-
-平滑、自然的卸载提示。
-
-## en-US
-
-Smoothly unmount Alert upon close.
-
-```jsx
-import { Alert } from 'antd';
-
-class App extends React.Component {
-  state = {
-    visible: true,
-  };
-
-  handleClose = () => {
-    this.setState({ visible: false });
-  };
-
-  render() {
-    return (
-      <div>
-        {this.state.visible ? (
-          <Alert
-            message="Alert Message Text"
-            type="success"
-            closable
-            afterClose={this.handleClose}
-          />
-        ) : null}
-        <p>placeholder text here</p>
-      </div>
-    );
-  }
-}
-
-ReactDOM.render(<App />, mountNode);
-```

components/alert/demo/style.md

@@ -13,16 +13,13 @@ title:
 
 There are 4 types of Alert: `success`, `info`, `warning`, `error`.
 
-```jsx
+````jsx
 import { Alert } from 'antd';
 
-ReactDOM.render(
-  <div>
-    <Alert message="Success Text" type="success" />
-    <Alert message="Info Text" type="info" />
-    <Alert message="Warning Text" type="warning" />
-    <Alert message="Error Text" type="error" />
-  </div>,
-  mountNode,
-);
-```
+ReactDOM.render(<div>
+  <Alert message="Success Text" type="success" />
+  <Alert message="Info Text" type="info" />
+  <Alert message="Warning Text" type="warning" />
+  <Alert message="Error Text" type="error" />
+</div>, mountNode);
+````

components/alert/index.en-US.md

@@ -1,6 +1,6 @@
 ---
 category: Components
-type: Feedback
+type: Views
 title: Alert
 ---
 
@@ -8,20 +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 | Version |
-| --- | --- | --- | --- | --- |
-| afterClose | Called when close animation is finished | () => void | - | 3.3.1 |
-| banner | Whether to show as banner | boolean | false |  |
-| closable | Whether Alert can be closed | boolean | - |  |
-| closeText | Close text to show | string\|ReactNode | - |  |
-| description | Additional content of Alert | string\|ReactNode | - |  |
-| icon | Custom icon, effective when `showIcon` is `true` | ReactNode | - | 3.10.0 |
-| message | Content of Alert | string\|ReactNode | - |  |
-| showIcon | Whether to show icon | boolean | false, in `banner` mode default is true |  |
-| type | Type of Alert styles, options: `success`, `info`, `warning`, `error` | string | `info`, in `banner` mode default is `warning` |  |
-| onClose | Callback when Alert is closed | (e: MouseEvent) => void | - |  |
+| Property   | Description                                               | Type       | Default |
+|----------- |---------------------------------------------------------  | ---------- |-------|
+| 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 |