lock @types version

This reverts commit 00aebeb975.

.antd-tools.config.js

@@ -1,132 +0,0 @@
-const fs = require('fs');
-const path = require('path');
-const defaultVars = require('./scripts/default-vars');
-const darkVars = require('./scripts/dark-vars');
-const compactVars = require('./scripts/compact-vars');
-
-function generateThemeFileContent(theme) {
-  return `const { ${theme}ThemeSingle } = require('./theme');\nconst defaultTheme = require('./default-theme');\n
-module.exports = {
-  ...defaultTheme,
-  ...${theme}ThemeSingle
-}`;
-}
-
-// We need compile additional content for antd user
-function finalizeCompile() {
-  if (fs.existsSync(path.join(__dirname, './lib'))) {
-    // 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 buildThemeFile(theme, vars) {
-  // Build less entry file: dist/antd.${theme}.less
-  if (theme !== 'default') {
-    fs.writeFileSync(
-      path.join(process.cwd(), 'dist', `antd.${theme}.less`),
-      `@import "../lib/style/${theme}.less";\n@import "../lib/style/components.less";`,
-    );
-    // eslint-disable-next-line no-console
-    console.log(`Built a entry less file to dist/antd.${theme}.less`);
-  } else {
-    fs.writeFileSync(
-      path.join(process.cwd(), 'dist', `default-theme.js`),
-      `module.exports = ${JSON.stringify(vars, null, 2)};\n`,
-    );
-    return;
-  }
-
-  // Build ${theme}.js: dist/${theme}-theme.js, for less-loader
-
-  fs.writeFileSync(
-    path.join(process.cwd(), 'dist', `theme.js`),
-    `const ${theme}ThemeSingle = ${JSON.stringify(vars, null, 2)};\n`,
-    {
-      flag: 'a',
-    },
-  );
-
-  fs.writeFileSync(
-    path.join(process.cwd(), 'dist', `${theme}-theme.js`),
-    generateThemeFileContent(theme),
-  );
-
-  // eslint-disable-next-line no-console
-  console.log(`Built a ${theme} theme js file to dist/${theme}-theme.js`);
-}
-
-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 no-console
-    fs.writeFileSync(
-      path.join(process.cwd(), 'dist', 'theme.js'),
-      `const defaultTheme = require('./default-theme.js');\n`,
-    );
-    // eslint-disable-next-line no-console
-    console.log('Built a entry less file to dist/antd.less');
-    buildThemeFile('default', defaultVars);
-    buildThemeFile('dark', darkVars);
-    buildThemeFile('compact', compactVars);
-    fs.writeFileSync(
-      path.join(process.cwd(), 'dist', `theme.js`),
-      `
-function getThemeVariables(options = {}) {
-  let themeVar = {
-    'hack': \`true;@import "\${require.resolve('antd/lib/style/color/colorPalette.less')}";\`,
-    ...defaultTheme
-  };
-  if(options.dark) {
-    themeVar = {
-      ...themeVar,
-      ...darkThemeSingle
-    }
-  }
-  if(options.compact){
-    themeVar = {
-      ...themeVar,
-      ...compactThemeSingle
-    }
-  }
-  return themeVar;
-}
-
-module.exports = {
-  darkThemeSingle,
-  compactThemeSingle,
-  getThemeVariables
-}`,
-      {
-        flag: 'a',
-      },
-    );
-  }
-}
-
-module.exports = {
-  compile: {
-    finalize: finalizeCompile,
-  },
-  dist: {
-    finalize: finalizeDist,
-  },
-  generateThemeFileContent,
-};

.circleci/config.yml

@@ -3,13 +3,20 @@ version: 2
 references:
   container_config: &container_config
     docker:
-      - image: circleci/node:lts
+      - image: circleci/node:8
     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
@@ -44,7 +51,19 @@ references:
       - test_node:
           requires:
             - setup
-      - check_metadata:
+      - 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
 
@@ -65,8 +84,6 @@ jobs:
           root: ~/ant-design
           paths:
             - node_modules
-      - store_artifacts:
-          path: package-lock.json
 
   dist:
     <<: *container_config
@@ -75,7 +92,6 @@ jobs:
       - *attach_workspace
       - run: npm run dist
       - run: node ./tests/dekko/dist.test.js
-      - run: npm run bundlesize
       - persist_to_workspace:
           root: ~/ant-design
           paths:
@@ -151,12 +167,59 @@ jobs:
       - *attach_workspace
       - run: npm run test-node -- -w 1
 
-  check_metadata:
+  test_dist_15:
     <<: *container_config
+    <<: *react_15
     steps:
       - checkout
       - *attach_workspace
-      - run: node ./scripts/check-demo.js
+      - *install_react
+      - run:
+          command: npm test -- -w 1 -u
+          environment:
+            LIB_DIR: dist
+
+  test_lib_15:
+    <<: *container_config
+    <<: *react_15
+    steps:
+      - checkout
+      - *attach_workspace
+      - *install_react
+      - run:
+          command: npm test -- -w 1 -u
+          environment:
+            LIB_DIR: lib
+
+  test_es_15:
+    <<: *container_config
+    <<: *react_15
+    steps:
+      - checkout
+      - *attach_workspace
+      - *install_react
+      - run:
+          command: npm test -- -w 1 -u
+          environment:
+            LIB_DIR: es
+
+  test_dom_15:
+    <<: *container_config
+    <<: *react_15
+    steps:
+      - checkout
+      - *attach_workspace
+      - *install_react
+      - run: npm test -- -w 1 -u
+
+  test_node_15:
+    <<: *container_config
+    <<: *react_15
+    steps:
+      - checkout
+      - *attach_workspace
+      - *install_react
+      - run: npm run test-node -- -w 1 -u
 
 workflows:
   version: 2

.codecov.yml

@@ -1,9 +1,2 @@
 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,26 +0,0 @@
-module.exports = {
-  ignore: [
-    '**/~*/**',
-    '**/_*/**',
-    '**/icon/**',
-    '**/__tests__/**',
-    '**/style/**',
-    '**/locale/**',
-    '**/*-provider/**',
-    '**/*.json',
-  ],
-  modulePattern: [
-    {
-      pattern: /ConfigContext.*renderEmpty/ms,
-      module: '../empty',
-    },
-    {
-      pattern: /ConfigConsumer.*renderEmpty/ms,
-      module: '../empty',
-    },
-    {
-      pattern: /config-provider\/context.*renderEmpty/ms,
-      module: '../empty',
-    },
-  ],
-};

.editorconfig

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

.eslintignore

@@ -1,28 +1,10 @@
 components/**/*.js
 components/**/*.jsx
+components/*/__tests__/type.tsx
 !components/*/__tests__/**/*.js
 !components/*/demo/*
 !.*.js
+
 # Docs templates
-site/theme/template/Color/ColorPicker.jsx
 site/theme/template/IconDisplay/*.js
 site/theme/template/IconDisplay/*.jsx
-site/theme/template/IconDisplay/fields.js
-site/theme/template/Home/**/*.jsx
-site/theme/template/utils.jsx
-site/theme/template/Layout/**/*.jsx
-site/theme/template/Layout/Footer.jsx
-site/theme/template/Content/Article.jsx
-site/theme/template/Content/EditButton.jsx
-site/theme/template/Resources/*.jsx
-site/theme/template/Resources/**/*.jsx
-site/theme/template/NotFound.jsx
-typings
-es/**/*
-lib/**/*
-node_modules
-_site
-dist
-**/*.d.ts
-# Scripts
-scripts/previewEditor/**/*

.eslintrc.js

@@ -1,12 +1,5 @@
-module.exports = {
-  extends: [
-    'airbnb',
-    'prettier',
-    'plugin:jest/recommended',
-    'plugin:react/recommended',
-    'plugin:import/typescript',
-    'prettier/react',
-  ],
+const eslintrc = {
+  extends: ['eslint-config-airbnb'],
   env: {
     browser: true,
     node: true,
@@ -14,112 +7,64 @@ module.exports = {
     jest: true,
     es6: true,
   },
-  settings: {
-    react: {
-      version: '16.9',
-    },
-  },
-  parser: '@typescript-eslint/parser',
-  plugins: ['markdown', 'react', 'babel', 'jest', '@typescript-eslint', 'react-hooks', 'unicorn'],
-  // https://github.com/typescript-eslint/typescript-eslint/issues/46#issuecomment-470486034
-  overrides: [
-    {
-      files: ['*.ts', '*.tsx'],
-      rules: {
-        '@typescript-eslint/no-unused-vars': [2, { args: 'none' }],
-        'no-unused-expressions': 'off',
-        '@typescript-eslint/no-unused-expressions': 2,
-      },
-    },
-    {
-      files: ['*.md'],
-      globals: {
-        React: true,
-        ReactDOM: true,
-        mountNode: true,
-      },
-      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,
-        'jsx-a11y/href-no-hash': 0,
-        'import/no-extraneous-dependencies': 0,
-        'import/no-unresolved': 0,
-        'jsx-a11y/control-has-associated-label': 0,
-      },
-    },
+  parser: 'babel-eslint',
+  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/jsx-first-prop-new-line': 0,
+    'react/jsx-one-expression-per-line': 0,
     'react/forbid-prop-types': 0,
-    'react/jsx-indent': 0,
-    'react/jsx-wrap-multilines': ['error', { declaration: false, assignment: false }],
+    'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx', '.md'] }],
     'import/extensions': 0,
-    'import/no-extraneous-dependencies': [
-      'error',
-      {
-        devDependencies: [
-          'site/**',
-          'tests/**',
-          'scripts/**',
-          '**/*.test.js',
-          '**/__tests__/*',
-          '*.config.js',
-          '**/*.md',
-        ],
-      },
-    ],
+    'import/no-unresolved': 0,
+    'import/no-extraneous-dependencies': 0,
+    'prefer-destructuring': 0,
+    'no-param-reassign': 0,
+    'no-return-assign': 0,
+    'max-len': 0,
+    'consistent-return': 0,
+    'no-redeclare': 0,
+    'react/require-extension': 0,
     '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,
+    'react/no-danger': 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
+    'function-paren-newline': 0,
+    'object-curly-newline': 0,
     'no-restricted-globals': 0,
-    'max-classes-per-file': 0,
-    'react/static-property-placement': 0,
-    'jest/no-test-callback': 0,
-    'jest/expect-expect': 0,
-    'react-hooks/rules-of-hooks': 2, // Checks rules of Hooks
-    'unicorn/better-regex': 2,
-    'unicorn/prefer-trim-start-end': 2,
-    'unicorn/expiring-todo-comments': 2,
-    'unicorn/no-abusive-eslint-disable': 2,
-  },
-  globals: {
-    gtag: true,
   },
 };
+
+if (process.env.RUN_ENV === 'DEMO') {
+  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-stateless-function': 0,
+    'jsx-a11y/href-no-hash': 0,
+    'import/newline-after-import': 0,
+  });
+}
+
+module.exports = eslintrc;

.github/FUNDING.yml

@@ -1,9 +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
-issuehunt: ant-design/ant-design
-tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
-custom: https://www.buymeacoffee.com/antdesign

.github/ISSUE_TEMPLATE.md

@@ -1,5 +1,5 @@
 <!--
- ⚠️ ⚠️ ⚠️  IMPORTANT: Please use the following link to create a new issue: ⚠️ ⚠️ ⚠️
+IMPORTANT: Please use the following link to create a new issue:
 
   http://new-issue.ant.design
 
@@ -7,7 +7,7 @@ If your issue was not created using the app above, it will be closed immediately
 -->
 
 <!--
- ⚠️ ⚠️ ⚠️  注意：请使用下面的链接来新建 issue： ⚠️ ⚠️ ⚠️
+注意：请使用下面的链接来新建 issue：
 
   http://new-issue.ant.design
 

.github/ISSUE_TEMPLATE/config.yml

@@ -1,5 +0,0 @@
-blank_issues_enabled: true
-contact_links:
-  - name: Create new issue
-    url: http://new-issue.ant.design
-    about: The issue which is not created via http://new-issue.ant.design will be closed immediately.

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,59 +1,22 @@
-<!--
-First of all, thank you for your contribution! 😄
+First of all, thank you 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 that these checkboxes 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)]
+* [ ] Make sure that you propose PR to right branch: bugfix for `master`, feature for branch `feature`.
+* [ ] Make sure that 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.
 
-### 🤔 This is a ...
+Extra checklist:
 
-- [ ] New feature
-- [ ] Bug fix
-- [ ] Site / documentation update
-- [ ] Demo update
-- [ ] Component style update
-- [ ] TypeScript definition update
-- [ ] Bundle size optimization
-- [ ] Perfermance optimization
-- [ ] Refactoring
-- [ ] Code style optimization
-- [ ] Test Case
-- [ ] Branch merge
-- [ ] Other (about what?)
+**if** *isBugFix* **:**
 
-### 🔗 Related issue link
+  * [ ] Make sure that you add at least one unit test for the bug which you had fixed.
 
-<!--
-1. Describe the source of requirement, like related issue link.
--->
+**elif** *isNewFeature* **:**
 
-### 💡 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
-
-⚠️ Please check all items below before review. ⚠️
-
-- [ ] 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
+  * [ ] Update API docs for the component.
+  * [ ] Update/Add demo to demonstrate new feature.
+  * [ ] Update TypeScript definition for the component.
+  * [ ] Add unit tests for the feature.

.github/PULL_REQUEST_TEMPLATE/pr_cn.md

@@ -1,59 +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/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:
-      - master
-
-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/gitleaks.yml

@@ -1,17 +0,0 @@
-name: gitleaks
-
-on: [push,pull_request]
-
-jobs:
-  gitleaks:
-    runs-on: ubuntu-latest
-    steps:
-    - uses: actions/checkout@v2
-      with:
-        fetch-depth: '1'
-    - name: wget
-      uses: wei/wget@v1
-      with:
-        args: -O .gitleaks.toml https://raw.githubusercontent.com/ycjcl868/gitleaks/master/.gitleaks.toml
-    - name: gitleaks-action
-      uses: zricethezav/gitleaks-action@master

.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/mirror.yml

@@ -1,15 +0,0 @@
-name: Mirror
-
-on: [push]
-
-jobs:
-  to_gitee:
-    runs-on: ubuntu-latest
-    steps:
-    - uses: actions/checkout@v1
-    - uses: pixta-dev/repository-mirroring-action@v1
-      with:
-        target_repo_url:
-          git@gitee.com:ant-design/ant-design.git
-        ssh_private_key:
-          ${{ secrets.GITEE_SSH_PRIVATE_KEY }}

.github/workflows/rebase.yml

@@ -1,17 +0,0 @@
-on: 
-  issue_comment:
-    types: [created]
-name: Automatic Rebase
-jobs:
-  rebase:
-    name: Rebase
-    if: github.event.issue.pull_request != '' && contains(github.event.comment.body, '/rebase')
-    runs-on: ubuntu-latest
-    steps:
-    - uses: actions/checkout@master
-      with:
-        fetch-depth: 0
-    - name: Automatic Rebase
-      uses: cirrus-actions/rebase@1.3
-      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

@@ -25,7 +25,6 @@ nohup.out
 _site
 _data
 dist
-report.html
 /lib
 /es
 elasticsearch-*
@@ -36,25 +35,11 @@ yarn.lock
 package-lock.json
 components/**/*.js
 components/**/*.jsx
-!components/**/__tests__/**/*.js
-!components/**/__tests__/**/*.js.snap
+!components/**/__tests__/*.js
+!components/**/__tests__/*.js.snap
 /.history
-*.tmp
 
 # Docs templates
-site/theme/template/Color/ColorPicker.jsx
 site/theme/template/IconDisplay/*.js
 site/theme/template/IconDisplay/*.jsx
 site/theme/template/IconDisplay/fields.js
-site/theme/template/Home/**/*.jsx
-site/theme/template/utils.jsx
-site/theme/template/Layout/Footer.jsx
-site/theme/template/Layout/Header/**/*.jsx
-site/theme/template/Layout/SiteContext.jsx
-site/theme/template/Content/Article.jsx
-site/theme/template/Content/EditButton.jsx
-site/theme/template/Resources/*.jsx
-site/theme/template/Resources/**/*.jsx
-site/theme/template/NotFound.jsx
-scripts/previewEditor/index.html
-components/version/version.tsx

.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,52 +1,52 @@
+const libDir = process.env.LIB_DIR;
+
 const transformIgnorePatterns = [
   '/dist/',
-  // Ignore modules without es dir.
-  // Update: @babel/runtime should also be transformed
-  'node_modules/(?!.*@(babel|ant-design))[^/]+?/(?!(es|node_modules)/)',
+  'node_modules/[^/]+?/(?!(es|node_modules)/)', // Ignore modules without es dir
 ];
 
-function getTestRegex(libDir) {
-  if (libDir === 'dist') {
-    return 'demo\\.test\\.js$';
-  }
-  return '.*\\.test\\.(j|t)sx?$';
-}
-
 module.exports = {
   verbose: true,
-  setupFiles: ['./tests/setup.js'],
-  setupFilesAfterEnv: ['./tests/setupAfterEnv.ts'],
-  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'],
+  setupFiles: [
+    './tests/setup.js',
+  ],
+  moduleFileExtensions: [
+    'ts',
+    'tsx',
+    'js',
+    'jsx',
+    'json',
+    'md',
+  ],
+  modulePathIgnorePatterns: [
+    '/_site/',
+  ],
+  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',
+    '\\.tsx?$': './node_modules/antd-tools/lib/jest/codePreprocessor',
+    '\\.js$': './node_modules/antd-tools/lib/jest/codePreprocessor',
+    '\\.md$': './node_modules/antd-tools/lib/jest/demoPreprocessor',
   },
-  testRegex: getTestRegex(process.env.LIB_DIR),
+  testRegex: libDir === 'dist' ? 'demo\\.test\\.js$' : '.*\\.test\\.js$',
   collectCoverageFrom: [
     'components/**/*.{ts,tsx}',
     '!components/*/style/index.tsx',
     '!components/style/index.tsx',
     '!components/*/locale/index.tsx',
-    '!components/*/__tests__/type.test.tsx',
+    '!components/*/__tests__/**/type.tsx',
     '!components/**/*/interface.{ts,tsx}',
   ],
   transformIgnorePatterns,
-  snapshotSerializers: ['enzyme-to-json/serializer'],
+  snapshotSerializers: [
+    'enzyme-to-json/serializer',
+  ],
   globals: {
     'ts-jest': {
-      tsConfig: './tsconfig.test.json',
+      tsConfigFile: './tsconfig.test.json',
     },
   },
   testURL: 'http://localhost',

.jest.node.js

@@ -1,21 +1,23 @@
-const { moduleNameMapper, transformIgnorePatterns } = require('./.jest');
-
-// jest config for server render environment
 module.exports = {
-  setupFiles: ['./tests/setup.js'],
-  setupFilesAfterEnv: ['./tests/setupAfterEnv.ts'],
-  moduleFileExtensions: ['ts', 'tsx', 'js', 'md'],
-  moduleNameMapper,
+  setupFiles: [
+    './tests/setup.js',
+  ],
+  moduleFileExtensions: [
+    'ts',
+    'tsx',
+    'js',
+    'md',
+  ],
   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',
+    '\\.tsx?$': './node_modules/antd-tools/lib/jest/codePreprocessor',
+    '\\.js$': './node_modules/antd-tools/lib/jest/codePreprocessor',
+    '\\.md$': './node_modules/antd-tools/lib/jest/demoPreprocessor',
   },
-  testRegex: 'demo\\.test\\.(j|t)s$',
+  testRegex: 'demo\\.test\\.js$',
   testEnvironment: 'node',
-  transformIgnorePatterns,
-  snapshotSerializers: ['enzyme-to-json/serializer'],
+  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',
-    },
-  },
-};

.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,15 +0,0 @@
-{
-  "singleQuote": true,
-  "trailingComma": "all",
-  "printWidth": 100,
-  "proseWrap": "never",
-  "arrowParens": "avoid",
-  "overrides": [
-    {
-      "files": ".prettierrc",
-      "options": {
-        "parser": "json"
-      }
-    }
-  ]
-}

.remarkrc.js

@@ -1,9 +0,0 @@
-const config = {
-  plugins: [
-    'remark-preset-lint-recommended',
-    ['remark-lint-list-item-indent', 'space'],
-    ['remark-lint-no-literal-urls', false],
-  ],
-};
-
-module.exports = config;

.stylelintrc

@@ -0,0 +1,23 @@
+{
+  "extends": "stylelint-config-standard",
+  "rules": {
+    "comment-empty-line-before": null,
+    "declaration-empty-line-before": null,
+    "function-comma-newline-after": null,
+    "function-name-case": null,
+    "function-parentheses-newline-inside": null,
+    "function-max-empty-lines": null,
+    "function-whitespace-after": null,
+    "indentation": null,
+    "number-leading-zero": null,
+    "number-no-trailing-zeros": null,
+    "rule-empty-line-before": null,
+    "selector-combinator-space-after": null,
+    "selector-list-comma-newline-after": null,
+    "selector-pseudo-element-colon-notation": null,
+    "unit-no-unknown": null,
+    "value-list-max-empty-lines": null,
+    "font-family-no-missing-generic-family-keyword": null,
+    "no-descending-specificity": null
+  }
+}

.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,7 +3,7 @@ sudo: false
 language: node_js
 
 node_js:
-  - 11
+  - 8
 
 cache:
   directories:
@@ -13,11 +13,19 @@ matrix:
   fast_finish: true
   include:
     - env: TEST_TYPE=lint
-    - env: TEST_TYPE=test:dist
-    - env: TEST_TYPE=test:lib
-    - env: TEST_TYPE=test:es
-    - env: TEST_TYPE=test:dom
-    - env: TEST_TYPE=test:node
+    - 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

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

@@ -8,19 +8,19 @@ In the interest of fostering an open and welcoming environment, we as contributo
 
 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
+* 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
+* 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
 
@@ -34,13 +34,13 @@ This Code of Conduct applies both within project spaces and in public spaces whe
 
 ## Enforcement
 
-Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at [xingmin.zhu@alipay.com.](mailto: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.
+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].
+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-pt_BR.md

@@ -1,165 +0,0 @@
-<p align="center">
-  <a href="https://ant.design">
-    <img width="200" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg">
-  </a>
-</p>
-
-<h1 align="center">Ant Design</h1>
-
-<div align="center">
-
-Uma solução empresarial de design e biblioteca UI para React.
-
-[![CircleCI status][circleci-image]][circleci-url] [![CI status][github-action-image]][github-action-url] [![codecov][codecov-image]][codecov-url] [![NPM version][npm-image]][npm-url] [![NPM downloads][download-image]][download-url]
-
-[![david deps][david-image]][david-url] [![david devDeps][david-dev-image]][david-dev-url] [![Total alerts][lgtm-image]][lgtm-url] [![FOSSA Status][fossa-image]][fossa-url] [![Issues need help][help-wanted-image]][help-wanted-url]
-
-[![Follow Twitter][twitter-image]][twitter-url] [![Gitter][gitter-english-image]][gitter-english-url] [![Gitter][gitter-chinese-image]][gitter-chinese-url] [![[SemVer stability]][semver-stability-image]][semver-stability-url]
-
-[npm-image]: http://img.shields.io/npm/v/antd.svg?style=flat-square
-[npm-url]: http://npmjs.org/package/antd
-[circleci-image]: https://img.shields.io/travis/com/ant-design/ant-design.svg?style=flat-square
-[circleci-url]: https://travis-ci.com/ant-design/ant-design
-[github-action-image]: https://github.com/ant-design/ant-design/workflows/test/badge.svg
-[github-action-url]: https://github.com/ant-design/ant-design/actions?query=workflow%3Atest
-[codecov-image]: https://img.shields.io/codecov/c/github/ant-design/ant-design/master.svg?style=flat-square
-[codecov-url]: https://codecov.io/gh/ant-design/ant-design/branch/master
-[david-image]: https://img.shields.io/david/ant-design/ant-design?style=flat-square
-[david-dev-url]: https://david-dm.org/ant-design/ant-design?type=dev
-[david-dev-image]: https://img.shields.io/david/dev/ant-design/ant-design?style=flat-square
-[david-url]: https://david-dm.org/ant-design/ant-design
-[download-image]: https://img.shields.io/npm/dm/antd.svg?style=flat-square
-[download-url]: https://npmjs.org/package/antd
-[lgtm-image]: https://flat.badgen.net/lgtm/alerts/g/ant-design/ant-design
-[lgtm-url]: https://lgtm.com/projects/g/ant-design/ant-design/alerts/
-[fossa-image]: https://app.fossa.io/api/projects/git%2Bgithub.com%2Fant-design%2Fant-design.svg?type=shield
-[fossa-url]: https://app.fossa.io/projects/git%2Bgithub.com%2Fant-design%2Fant-design?ref=badge_shield
-[help-wanted-image]: https://flat.badgen.net/github/label-issues/ant-design/ant-design/help%20wanted/open
-[help-wanted-url]: https://github.com/ant-design/ant-design/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22
-[twitter-image]: https://img.shields.io/twitter/follow/AntDesignUI.svg?label=Ant%20Design&style=social
-[twitter-url]: https://twitter.com/AntDesignUI
-[gitter-english-image]: https://img.shields.io/gitter/room/ant-design/ant-design-english.svg?style=flat-square&logoWidth=18&logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjEyMzUiIGhlaWdodD0iNjUwIiB2aWV3Qm94PSIwIDAgNzQxMCAzOTAwIj4NCjxyZWN0IHdpZHRoPSI3NDEwIiBoZWlnaHQ9IjM5MDAiIGZpbGw9IiNiMjIyMzQiLz4NCjxwYXRoIGQ9Ik0wLDQ1MEg3NDEwbTAsNjAwSDBtMCw2MDBINzQxMG0wLDYwMEgwbTAsNjAwSDc0MTBtMCw2MDBIMCIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjMwMCIvPg0KPHJlY3Qgd2lkdGg9IjI5NjQiIGhlaWdodD0iMjEwMCIgZmlsbD0iIzNjM2I2ZSIvPg0KPGcgZmlsbD0iI2ZmZiI%2BDQo8ZyBpZD0iczE4Ij4NCjxnIGlkPSJzOSI%2BDQo8ZyBpZD0iczUiPg0KPGcgaWQ9InM0Ij4NCjxwYXRoIGlkPSJzIiBkPSJNMjQ3LDkwIDMxNy41MzQyMzAsMzA3LjA4MjAzOSAxMzIuODczMjE4LDE3Mi45MTc5NjFIMzYxLjEyNjc4MkwxNzYuNDY1NzcwLDMwNy4wODIwMzl6Ii8%2BDQo8dXNlIHhsaW5rOmhyZWY9IiNzIiB5PSI0MjAiLz4NCjx1c2UgeGxpbms6aHJlZj0iI3MiIHk9Ijg0MCIvPg0KPHVzZSB4bGluazpocmVmPSIjcyIgeT0iMTI2MCIvPg0KPC9nPg0KPHVzZSB4bGluazpocmVmPSIjcyIgeT0iMTY4MCIvPg0KPC9nPg0KPHVzZSB4bGluazpocmVmPSIjczQiIHg9IjI0NyIgeT0iMjEwIi8%2BDQo8L2c%2BDQo8dXNlIHhsaW5rOmhyZWY9IiNzOSIgeD0iNDk0Ii8%2BDQo8L2c%2BDQo8dXNlIHhsaW5rOmhyZWY9IiNzMTgiIHg9Ijk4OCIvPg0KPHVzZSB4bGluazpocmVmPSIjczkiIHg9IjE5NzYiLz4NCjx1c2UgeGxpbms6aHJlZj0iI3M1IiB4PSIyNDcwIi8%2BDQo8L2c%2BDQo8L3N2Zz4%3D
-[gitter-english-url]: https://gitter.im/ant-design/ant-design-english?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge
-[gitter-chinese-image]: https://img.shields.io/gitter/room/ant-design/ant-design.svg?style=flat-square&logoWidth=18&logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjkwMCIgaGVpZ2h0PSI2MDAiIHZpZXdCb3g9IjAgMCAzMCAyMCI%2BDQo8ZGVmcz4NCjxwYXRoIGlkPSJzIiBkPSJNMCwtMSAwLjU4Nzc4NSwwLjgwOTAxNyAtMC45NTEwNTcsLTAuMzA5MDE3SDAuOTUxMDU3TC0wLjU4Nzc4NSwwLjgwOTAxN3oiIGZpbGw9IiNmZmRlMDAiLz4NCjwvZGVmcz4NCjxyZWN0IHdpZHRoPSIzMCIgaGVpZ2h0PSIyMCIgZmlsbD0iI2RlMjkxMCIvPg0KPHVzZSB4bGluazpocmVmPSIjcyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNSw1KSBzY2FsZSgzKSIvPg0KPHVzZSB4bGluazpocmVmPSIjcyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAsMikgcm90YXRlKDIzLjAzNjI0MykiLz4NCjx1c2UgeGxpbms6aHJlZj0iI3MiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEyLDQpIHJvdGF0ZSg0NS44Njk4OTgpIi8%2BDQo8dXNlIHhsaW5rOmhyZWY9IiNzIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMiw3KSByb3RhdGUoNjkuOTQ1Mzk2KSIvPg0KPHVzZSB4bGluazpocmVmPSIjcyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAsOSkgcm90YXRlKDIwLjY1OTgwOCkiLz4NCjwvc3ZnPg%3D%3D
-[gitter-chinese-url]: https://gitter.im/ant-design/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge
-[semver-stability-url]: https://dependabot.com/compatibility-score.html/?dependency-name=antd&package-manager=npm_and_yarn&new-version=latest
-[semver-stability-image]: https://api.dependabot.com/badges/compatibility_score?dependency-name=antd&package-manager=npm_and_yarn&target-version=latest&version-scheme=semver
-
-</div>
-
-[![](https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*Yl83RJhUE7kAAAAAAAAAAABkARQnAQ)](https://ant.design)
-
-[English](./README.md) | Português | [简体中文](./README-zh_CN.md)
-
-## ✨ Funcionalidades
-
-- 🌈 Design empresarial de interface para aplicações web.
-- 📦 Um conjunto de alta qualidade, componentes React prontos para uso.
-- 🛡 Escrito em TypeScript com tipos previsíveis.
-- ⚙️ Pacote completo de recursos de design e ferramentas de desenvolvimento.
-- 🌍 Suporte de internacionalização para dezenas de idiomas.
-- 🎨 Personalização poderosa do tema em todos os detalhes.
-
-## 🖥 Suporte aos ambientes
-
-- Navegadores modernos e Internet Explorer 11 (com [polyfills](https://ant.design/docs/react/getting-started#Compatibility))
-- Renderização no lado do servidor (server-side)
-- [Electron](https://www.electronjs.org/)
-
-| [<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 |
-| --- | --- | --- | --- | --- | --- |
-| IE11, Edge | últimas 2 versões | últimas 2 versões | últimas 2 versões | últimas 2 versões | últimas 2 versões |
-
-## 📦 Instalação
-
-```bash
-npm install antd
-```
-
-```bash
-yarn add antd
-```
-
-## 🔨 Uso
-
-```jsx
-import { Button, DatePicker } from 'antd';
-
-const App = () => (
-  <>
-    <Button type="primary">PRESS ME</Button>
-    <DatePicker />
-  </>
-);
-```
-
-Importe o estilo manualmente:
-
-```jsx
-import 'antd/dist/antd.css'; // ou 'antd/dist/antd.less'
-```
-
-### TypeScript
-
-Veja [Uso no Typescript](https://ant.design/docs/react/use-in-typescript).
-
-## 🌍 Internacionalização
-
-Veja [i18n](https://ant.design/docs/react/i18n).
-
-## 🔗 Links
-
-- [Página inicial](https://ant.design/)
-- [Componentes](https://ant.design/components/button)
-- [Ant Design Pro](http://pro.ant.design/)
-- [Change Log](CHANGELOG.en-US.md)
-- [rc-components](http://react-component.github.io/)
-- [Mobile UI](http://mobile.ant.design)
-- [Ant Design Icones](https://github.com/ant-design/ant-design-icons)
-- [Ant Design Cores](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)
-- [Tema escuro](https://github.com/ant-design/ant-design-dark-theme)
-- [Página de aterrissagem](https://landing.ant.design)
-- [Motion](https://motion.ant.design)
-- [Mercado de páginas](http://scaffold.ant.design)
-- [Instruções ao desenvolvedor](https://github.com/ant-design/ant-design/wiki/Development)
-- [Versionando as notas de atualização](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) para relatório de erros
-- [Awesome Ant Design](https://github.com/websemantics/awesome-ant-design)
-- [Customize Theme](https://ant.design/docs/react/customize-theme)
-- [How to Apply for Being A Collaborator](https://github.com/ant-design/ant-design/wiki/Collaborators#how-to-apply-for-being-a-collaborator)
-
-## ⌨️ Desenvolvimento
-
-Use Gitpod, um ambiente de desenvolvimento online para GitHub.
-
-[![Abrir no Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/ant-design/ant-design)
-
-Ou clone localmente:
-
-```bash
-$ git clone git@github.com:ant-design/ant-design.git
-$ cd ant-design
-$ npm install
-$ npm start
-```
-
-Abra seu navegador e visite http://127.0.0.1:8001, veja mais em [Desenvolvimento](https://github.com/ant-design/ant-design/wiki/Development).
-
-## 🤝 Contribuição [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
-
-Leia nosso [guia de contribução](https://ant.design/docs/react/contributing) e vamos contruir um melhor antd juntos.
-
-Nós saudamos todas as contribuições. Por favor, leia nosso [CONTRIBUTING.md](https://github.com/ant-design/ant-design/blob/master/.github/CONTRIBUTING.md) primeiro. Você pode submeter todas as ideias como [Pull Requests](https://github.com/ant-design/ant-design/pulls) ou como [GitHub issues](https://github.com/ant-design/ant-design/issues). Se você quiser melhorar o código, verifique [instruções ao desenvolvedor](https://github.com/ant-design/ant-design/wiki/Development) e divirta-se! :)
-
-Se você é um colaborador, por favor siga nossa [Pull Request princípio](https://github.com/ant-design/ant-design/wiki/PR-principle) para criar um Pull Request através do [template do colaborador](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)
-
-## ❤️ Patrocionadores e Apoiadores [![](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)

README-zh_CN.md

@@ -1,5 +1,5 @@
 <p align="center">
-  <a href="https://ant.design">
+  <a href="http://ant.design">
     <img width="200" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg">
   </a>
 </p>
@@ -8,67 +8,42 @@
 
 <div align="center">
 
-一套企业级 UI 设计语言和 React 组件库。
+一套企业级的 UI 设计语言和 React 实现。
 
-[![CircleCI status][circleci-image]][circleci-url] [![CI status][github-action-image]][github-action-url] [![codecov][codecov-image]][codecov-url] [![NPM version][npm-image]][npm-url] [![NPM downloads][download-image]][download-url]
+[![](https://img.shields.io/travis/ant-design/ant-design/master.svg?style=flat-square)](https://travis-ci.org/ant-design/ant-design)
+[![CircleCI](https://circleci.com/gh/ant-design/ant-design/tree/master.svg?style=shield)](https://circleci.com/gh/ant-design/ant-design/tree/master)
+[![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)
+[![Dependencies](https://img.shields.io/david/ant-design/ant-design.svg)](https://david-dm.org/ant-design/ant-design)
+[![DevDependencies](https://img.shields.io/david/dev/ant-design/ant-design.svg)](https://david-dm.org/ant-design/ant-design?type=dev)
 
-[![david deps][david-image]][david-url] [![david devDeps][david-dev-image]][david-dev-url] [![Total alerts][lgtm-image]][lgtm-url] [![FOSSA Status][fossa-image]][fossa-url] [![Issues need help][help-wanted-image]][help-wanted-url]
-
-[![Follow Twitter][twitter-image]][twitter-url] [![Gitter][gitter-english-image]][gitter-english-url] [![Gitter][gitter-chinese-image]][gitter-chinese-url] [![[SemVer stability]][semver-stability-image]][semver-stability-url]
-
-[npm-image]: http://img.shields.io/npm/v/antd.svg?style=flat-square
-[npm-url]: http://npmjs.org/package/antd
-[circleci-image]: https://img.shields.io/travis/com/ant-design/ant-design.svg?style=flat-square
-[circleci-url]: https://travis-ci.com/ant-design/ant-design
-[github-action-image]: https://github.com/ant-design/ant-design/workflows/test/badge.svg
-[github-action-url]: https://github.com/ant-design/ant-design/actions?query=workflow%3Atest
-[codecov-image]: https://img.shields.io/codecov/c/github/ant-design/ant-design/master.svg?style=flat-square
-[codecov-url]: https://codecov.io/gh/ant-design/ant-design/branch/master
-[david-image]: https://img.shields.io/david/ant-design/ant-design?style=flat-square
-[david-dev-url]: https://david-dm.org/ant-design/ant-design?type=dev
-[david-dev-image]: https://img.shields.io/david/dev/ant-design/ant-design?style=flat-square
-[david-url]: https://david-dm.org/ant-design/ant-design
-[download-image]: https://img.shields.io/npm/dm/antd.svg?style=flat-square
-[download-url]: https://npmjs.org/package/antd
-[lgtm-image]: https://flat.badgen.net/lgtm/alerts/g/ant-design/ant-design
-[lgtm-url]: https://lgtm.com/projects/g/ant-design/ant-design/alerts/
-[fossa-image]: https://app.fossa.io/api/projects/git%2Bgithub.com%2Fant-design%2Fant-design.svg?type=shield
-[fossa-url]: https://app.fossa.io/projects/git%2Bgithub.com%2Fant-design%2Fant-design?ref=badge_shield
-[help-wanted-image]: https://flat.badgen.net/github/label-issues/ant-design/ant-design/help%20wanted/open
-[help-wanted-url]: https://github.com/ant-design/ant-design/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22
-[twitter-image]: https://img.shields.io/twitter/follow/AntDesignUI.svg?label=Ant%20Design&style=social
-[twitter-url]: https://twitter.com/AntDesignUI
-[gitter-english-image]: https://img.shields.io/gitter/room/ant-design/ant-design-english.svg?style=flat-square&logoWidth=18&logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjEyMzUiIGhlaWdodD0iNjUwIiB2aWV3Qm94PSIwIDAgNzQxMCAzOTAwIj4NCjxyZWN0IHdpZHRoPSI3NDEwIiBoZWlnaHQ9IjM5MDAiIGZpbGw9IiNiMjIyMzQiLz4NCjxwYXRoIGQ9Ik0wLDQ1MEg3NDEwbTAsNjAwSDBtMCw2MDBINzQxMG0wLDYwMEgwbTAsNjAwSDc0MTBtMCw2MDBIMCIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjMwMCIvPg0KPHJlY3Qgd2lkdGg9IjI5NjQiIGhlaWdodD0iMjEwMCIgZmlsbD0iIzNjM2I2ZSIvPg0KPGcgZmlsbD0iI2ZmZiI%2BDQo8ZyBpZD0iczE4Ij4NCjxnIGlkPSJzOSI%2BDQo8ZyBpZD0iczUiPg0KPGcgaWQ9InM0Ij4NCjxwYXRoIGlkPSJzIiBkPSJNMjQ3LDkwIDMxNy41MzQyMzAsMzA3LjA4MjAzOSAxMzIuODczMjE4LDE3Mi45MTc5NjFIMzYxLjEyNjc4MkwxNzYuNDY1NzcwLDMwNy4wODIwMzl6Ii8%2BDQo8dXNlIHhsaW5rOmhyZWY9IiNzIiB5PSI0MjAiLz4NCjx1c2UgeGxpbms6aHJlZj0iI3MiIHk9Ijg0MCIvPg0KPHVzZSB4bGluazpocmVmPSIjcyIgeT0iMTI2MCIvPg0KPC9nPg0KPHVzZSB4bGluazpocmVmPSIjcyIgeT0iMTY4MCIvPg0KPC9nPg0KPHVzZSB4bGluazpocmVmPSIjczQiIHg9IjI0NyIgeT0iMjEwIi8%2BDQo8L2c%2BDQo8dXNlIHhsaW5rOmhyZWY9IiNzOSIgeD0iNDk0Ii8%2BDQo8L2c%2BDQo8dXNlIHhsaW5rOmhyZWY9IiNzMTgiIHg9Ijk4OCIvPg0KPHVzZSB4bGluazpocmVmPSIjczkiIHg9IjE5NzYiLz4NCjx1c2UgeGxpbms6aHJlZj0iI3M1IiB4PSIyNDcwIi8%2BDQo8L2c%2BDQo8L3N2Zz4%3D
-[gitter-english-url]: https://gitter.im/ant-design/ant-design-english?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge
-[gitter-chinese-image]: https://img.shields.io/gitter/room/ant-design/ant-design.svg?style=flat-square&logoWidth=18&logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjkwMCIgaGVpZ2h0PSI2MDAiIHZpZXdCb3g9IjAgMCAzMCAyMCI%2BDQo8ZGVmcz4NCjxwYXRoIGlkPSJzIiBkPSJNMCwtMSAwLjU4Nzc4NSwwLjgwOTAxNyAtMC45NTEwNTcsLTAuMzA5MDE3SDAuOTUxMDU3TC0wLjU4Nzc4NSwwLjgwOTAxN3oiIGZpbGw9IiNmZmRlMDAiLz4NCjwvZGVmcz4NCjxyZWN0IHdpZHRoPSIzMCIgaGVpZ2h0PSIyMCIgZmlsbD0iI2RlMjkxMCIvPg0KPHVzZSB4bGluazpocmVmPSIjcyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNSw1KSBzY2FsZSgzKSIvPg0KPHVzZSB4bGluazpocmVmPSIjcyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAsMikgcm90YXRlKDIzLjAzNjI0MykiLz4NCjx1c2UgeGxpbms6aHJlZj0iI3MiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEyLDQpIHJvdGF0ZSg0NS44Njk4OTgpIi8%2BDQo8dXNlIHhsaW5rOmhyZWY9IiNzIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMiw3KSByb3RhdGUoNjkuOTQ1Mzk2KSIvPg0KPHVzZSB4bGluazpocmVmPSIjcyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAsOSkgcm90YXRlKDIwLjY1OTgwOCkiLz4NCjwvc3ZnPg%3D%3D
-[gitter-chinese-url]: https://gitter.im/ant-design/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge
-[semver-stability-url]: https://dependabot.com/compatibility-score.html/?dependency-name=antd&package-manager=npm_and_yarn&new-version=latest
-[semver-stability-image]: https://api.dependabot.com/badges/compatibility_score?dependency-name=antd&package-manager=npm_and_yarn&target-version=latest&version-scheme=semver
+[![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)](http://npmjs.com/antd)
+[![Percentage of issues still open](http://isitmaintained.com/badge/open/ant-design/ant-design.svg)](http://isitmaintained.com/project/ant-design/ant-design "Percentage of issues still open")
+[![Gitter](https://badges.gitter.im/ant-design/ant-design-english.svg)](https://gitter.im/ant-design/ant-design-english?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) (English)
+[![Join the chat at https://gitter.im/ant-design/ant-design](https://img.shields.io/gitter/room/ant-design/ant-design.svg?style=flat-square)](https://gitter.im/ant-design/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)（中文）
 
 </div>
 
-[![](https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*Ey3wTo-5__QAAAAAAAAAAABkARQnAQ)](https://ant.design/index-cn)
+[![](https://cdn-images-1.medium.com/max/2000/1*NIlj0-TdLMbo_hzSBP8tmg.png)](http://ant.design/index-cn)
 
-[English](./README.md) | [Português](./README-pt_BR.md) | 简体中文
+[English](./README.md) | 简体中文
 
 ## ✨ 特性
 
-- 🌈 提炼自企业级中后台产品的交互语言和视觉风格。
-- 📦 开箱即用的高质量 React 组件。
-- 🛡 使用 TypeScript 开发，提供完整的类型定义文件。
-- ⚙️ 全链路开发和设计工具体系。
-- 🌍 数十个国际化语言支持。
-- 🎨 深入每个细节的主题定制能力。
+- 提炼自企业级中后台产品的交互语言和视觉风格。
+- 开箱即用的高质量 React 组件。
+- 使用 TypeScript 构建，提供完整的类型定义文件。
+- 全链路开发和设计工具体系。
 
-## 🖥 兼容环境
+## 🖥 支持环境
 
-- 现代浏览器和 IE11（需要 [polyfills](https://ant.design/docs/react/getting-started-cn#兼容性)）。
-- 支持服务端渲染。
-- [Electron](https://www.electronjs.org/)
+* 现代浏览器和 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/electron/electron_48x48.png" alt="Electron" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Electron |
-| --- | --- | --- | --- | --- |
-| IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
+| [<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
 
 ## 📦 安装
 
@@ -76,74 +51,49 @@
 npm install antd --save
 ```
 
-```bash
-yarn add antd
-```
-
 ## 🔨 示例
 
 ```jsx
-import { Button, DatePicker } from 'antd';
-
-const App = () => (
-  <>
-    <Button type="primary">PRESS ME</Button>
-    <DatePicker />
-  </>
-);
+import { DatePicker } from 'antd';
+ReactDOM.render(<DatePicker />, mountNode);
 ```
 
 引入样式：
 
 ```jsx
-import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
+import 'antd/dist/antd.css';  // or 'antd/dist/antd.less'
 ```
 
-### 🌈 定制主题
+你也可以[按需加载组件](https://ant.design/docs/react/getting-started-cn#按需加载)。
 
-参考 [定制主题](https://ant.design/docs/react/customize-theme-cn) 文档。
+### TypeScript
 
-### 🛡 TypeScript
-
-参考 [在 TypeScript 中使用](https://ant.design/docs/react/use-in-typescript-cn)。
+参考 [在 TypeScript 中使用](https://ant.design/docs/react/use-in-typescript-cn)
 
 ## 🌍 国际化
 
-参考 [国际化文档](https://ant.design/docs/react/i18n-cn)。
+参考 [国际化文档](http://ant.design/docs/react/i18n-cn)。
 
 ## 🔗 链接
 
-- [首页](https://ant.design/)
-- [组件库](https://ant.design/docs/react/introduce)
+- [首页](http://ant.design/)
+- [组件库](http://ant.design/docs/react/introduce)
 - [Ant Design Pro](http://pro.ant.design/)
 - [更新日志](CHANGELOG.en-US.md)
+- [脚手架市场](http://scaffold.ant.design)
 - [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)
-- [定制主题](https://ant.design/docs/react/customize-theme-cn)
-- [成为社区协作成员](https://github.com/ant-design/ant-design/wiki/Collaborators#how-to-apply-for-being-a-collaborator)
+- [定制主题](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
@@ -159,9 +109,7 @@ $ npm start
 
 > 强烈推荐阅读 [《提问的智慧》](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)，更好的问题更容易获得帮助。
 
-[![Let's fund issues in this repository](https://issuehunt.io/static/embed/issuehunt-button-v1.svg)](https://issuehunt.io/repos/34526884)
-
-## 👥 社区互助
+## 社区互助
 
 如果您在使用的过程中碰到问题，可以通过下面几个途径寻求帮助，同时我们也鼓励资深用户通过下面的途径给新人提供帮助。
 
@@ -170,9 +118,3 @@ $ npm start
 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)
-
-[![](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)

README.md

@@ -1,5 +1,5 @@
 <p align="center">
-  <a href="https://ant.design">
+  <a href="http://ant.design">
     <img width="200" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg">
   </a>
 </p>
@@ -8,137 +8,91 @@
 
 <div align="center">
 
-An enterprise-class UI design language and React UI library.
+An enterprise-class UI design language and React-based implementation.
 
-[![CircleCI status][circleci-image]][circleci-url] [![CI status][github-action-image]][github-action-url] [![codecov][codecov-image]][codecov-url] [![NPM version][npm-image]][npm-url] [![NPM downloads][download-image]][download-url]
+[![](https://img.shields.io/travis/ant-design/ant-design/master.svg?style=flat-square)](https://travis-ci.org/ant-design/ant-design)
+[![CircleCI](https://circleci.com/gh/ant-design/ant-design/tree/master.svg?style=shield)](https://circleci.com/gh/ant-design/ant-design/tree/master)
+[![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)
+[![Dependencies](https://img.shields.io/david/ant-design/ant-design.svg)](https://david-dm.org/ant-design/ant-design)
+[![DevDependencies](https://img.shields.io/david/dev/ant-design/ant-design.svg)](https://david-dm.org/ant-design/ant-design?type=dev)
 
-[![david deps][david-image]][david-url] [![david devDeps][david-dev-image]][david-dev-url] [![Total alerts][lgtm-image]][lgtm-url] [![FOSSA Status][fossa-image]][fossa-url] [![Issues need help][help-wanted-image]][help-wanted-url]
-
-[![Follow Twitter][twitter-image]][twitter-url] [![Gitter][gitter-english-image]][gitter-english-url] [![Gitter][gitter-chinese-image]][gitter-chinese-url] [![[SemVer stability]][semver-stability-image]][semver-stability-url]
-
-[npm-image]: http://img.shields.io/npm/v/antd.svg?style=flat-square
-[npm-url]: http://npmjs.org/package/antd
-[circleci-image]: https://img.shields.io/travis/com/ant-design/ant-design.svg?style=flat-square
-[circleci-url]: https://travis-ci.com/ant-design/ant-design
-[github-action-image]: https://github.com/ant-design/ant-design/workflows/test/badge.svg
-[github-action-url]: https://github.com/ant-design/ant-design/actions?query=workflow%3Atest
-[codecov-image]: https://img.shields.io/codecov/c/github/ant-design/ant-design/master.svg?style=flat-square
-[codecov-url]: https://codecov.io/gh/ant-design/ant-design/branch/master
-[david-image]: https://img.shields.io/david/ant-design/ant-design?style=flat-square
-[david-dev-url]: https://david-dm.org/ant-design/ant-design?type=dev
-[david-dev-image]: https://img.shields.io/david/dev/ant-design/ant-design?style=flat-square
-[david-url]: https://david-dm.org/ant-design/ant-design
-[download-image]: https://img.shields.io/npm/dm/antd.svg?style=flat-square
-[download-url]: https://npmjs.org/package/antd
-[lgtm-image]: https://flat.badgen.net/lgtm/alerts/g/ant-design/ant-design
-[lgtm-url]: https://lgtm.com/projects/g/ant-design/ant-design/alerts/
-[fossa-image]: https://app.fossa.io/api/projects/git%2Bgithub.com%2Fant-design%2Fant-design.svg?type=shield
-[fossa-url]: https://app.fossa.io/projects/git%2Bgithub.com%2Fant-design%2Fant-design?ref=badge_shield
-[help-wanted-image]: https://flat.badgen.net/github/label-issues/ant-design/ant-design/help%20wanted/open
-[help-wanted-url]: https://github.com/ant-design/ant-design/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22
-[twitter-image]: https://img.shields.io/twitter/follow/AntDesignUI.svg?label=Ant%20Design&style=social
-[twitter-url]: https://twitter.com/AntDesignUI
-[gitter-english-image]: https://img.shields.io/gitter/room/ant-design/ant-design-english.svg?style=flat-square&logoWidth=18&logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjEyMzUiIGhlaWdodD0iNjUwIiB2aWV3Qm94PSIwIDAgNzQxMCAzOTAwIj4NCjxyZWN0IHdpZHRoPSI3NDEwIiBoZWlnaHQ9IjM5MDAiIGZpbGw9IiNiMjIyMzQiLz4NCjxwYXRoIGQ9Ik0wLDQ1MEg3NDEwbTAsNjAwSDBtMCw2MDBINzQxMG0wLDYwMEgwbTAsNjAwSDc0MTBtMCw2MDBIMCIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjMwMCIvPg0KPHJlY3Qgd2lkdGg9IjI5NjQiIGhlaWdodD0iMjEwMCIgZmlsbD0iIzNjM2I2ZSIvPg0KPGcgZmlsbD0iI2ZmZiI%2BDQo8ZyBpZD0iczE4Ij4NCjxnIGlkPSJzOSI%2BDQo8ZyBpZD0iczUiPg0KPGcgaWQ9InM0Ij4NCjxwYXRoIGlkPSJzIiBkPSJNMjQ3LDkwIDMxNy41MzQyMzAsMzA3LjA4MjAzOSAxMzIuODczMjE4LDE3Mi45MTc5NjFIMzYxLjEyNjc4MkwxNzYuNDY1NzcwLDMwNy4wODIwMzl6Ii8%2BDQo8dXNlIHhsaW5rOmhyZWY9IiNzIiB5PSI0MjAiLz4NCjx1c2UgeGxpbms6aHJlZj0iI3MiIHk9Ijg0MCIvPg0KPHVzZSB4bGluazpocmVmPSIjcyIgeT0iMTI2MCIvPg0KPC9nPg0KPHVzZSB4bGluazpocmVmPSIjcyIgeT0iMTY4MCIvPg0KPC9nPg0KPHVzZSB4bGluazpocmVmPSIjczQiIHg9IjI0NyIgeT0iMjEwIi8%2BDQo8L2c%2BDQo8dXNlIHhsaW5rOmhyZWY9IiNzOSIgeD0iNDk0Ii8%2BDQo8L2c%2BDQo8dXNlIHhsaW5rOmhyZWY9IiNzMTgiIHg9Ijk4OCIvPg0KPHVzZSB4bGluazpocmVmPSIjczkiIHg9IjE5NzYiLz4NCjx1c2UgeGxpbms6aHJlZj0iI3M1IiB4PSIyNDcwIi8%2BDQo8L2c%2BDQo8L3N2Zz4%3D
-[gitter-english-url]: https://gitter.im/ant-design/ant-design-english?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge
-[gitter-chinese-image]: https://img.shields.io/gitter/room/ant-design/ant-design.svg?style=flat-square&logoWidth=18&logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjkwMCIgaGVpZ2h0PSI2MDAiIHZpZXdCb3g9IjAgMCAzMCAyMCI%2BDQo8ZGVmcz4NCjxwYXRoIGlkPSJzIiBkPSJNMCwtMSAwLjU4Nzc4NSwwLjgwOTAxNyAtMC45NTEwNTcsLTAuMzA5MDE3SDAuOTUxMDU3TC0wLjU4Nzc4NSwwLjgwOTAxN3oiIGZpbGw9IiNmZmRlMDAiLz4NCjwvZGVmcz4NCjxyZWN0IHdpZHRoPSIzMCIgaGVpZ2h0PSIyMCIgZmlsbD0iI2RlMjkxMCIvPg0KPHVzZSB4bGluazpocmVmPSIjcyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNSw1KSBzY2FsZSgzKSIvPg0KPHVzZSB4bGluazpocmVmPSIjcyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAsMikgcm90YXRlKDIzLjAzNjI0MykiLz4NCjx1c2UgeGxpbms6aHJlZj0iI3MiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEyLDQpIHJvdGF0ZSg0NS44Njk4OTgpIi8%2BDQo8dXNlIHhsaW5rOmhyZWY9IiNzIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMiw3KSByb3RhdGUoNjkuOTQ1Mzk2KSIvPg0KPHVzZSB4bGluazpocmVmPSIjcyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAsOSkgcm90YXRlKDIwLjY1OTgwOCkiLz4NCjwvc3ZnPg%3D%3D
-[gitter-chinese-url]: https://gitter.im/ant-design/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge
-[semver-stability-url]: https://dependabot.com/compatibility-score.html/?dependency-name=antd&package-manager=npm_and_yarn&new-version=latest
-[semver-stability-image]: https://api.dependabot.com/badges/compatibility_score?dependency-name=antd&package-manager=npm_and_yarn&target-version=latest&version-scheme=semver
+[![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)](http://npmjs.com/antd)
+[![Percentage of issues still open](http://isitmaintained.com/badge/open/ant-design/ant-design.svg)](http://isitmaintained.com/project/ant-design/ant-design "Percentage of issues still open")
+[![Gitter](https://badges.gitter.im/ant-design/ant-design-english.svg)](https://gitter.im/ant-design/ant-design-english?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) (English)
+[![Join the chat at https://gitter.im/ant-design/ant-design](https://img.shields.io/gitter/room/ant-design/ant-design.svg?style=flat-square)](https://gitter.im/ant-design/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)（中文）
 
 </div>
 
-[![](https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*Yl83RJhUE7kAAAAAAAAAAABkARQnAQ)](https://ant.design)
+[![](https://cdn-images-1.medium.com/max/2000/1*NIlj0-TdLMbo_hzSBP8tmg.png)](http://ant.design)
 
-English | [Português](./README-pt_BR.md) | [简体中文](./README-zh_CN.md)
+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.
+- An enterprise-class UI design system for web applications.
+- A set of high-quality React components out of the box.
+- Written in TypeScript with predictable static types.
+- The whole package of development and design resources and tools.
 
 ## 🖥 Environment Support
 
-- Modern browsers and Internet Explorer 11 (with [polyfills](https://ant.design/docs/react/getting-started#Compatibility))
-- Server-side Rendering
-- [Electron](https://www.electronjs.org/)
+* 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/electron/electron_48x48.png" alt="Electron" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Electron |
-| --- | --- | --- | --- | --- |
-| IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
+| [<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
 
 ```bash
-npm install antd
-```
-
-```bash
-yarn add antd
+npm install antd --save
 ```
 
 ## 🔨 Usage
 
 ```jsx
-import { Button, DatePicker } from 'antd';
-
-const App = () => (
-  <>
-    <Button type="primary">PRESS ME</Button>
-    <DatePicker placeholder="select date" />
-  </>
-);
+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 [import components on demand](https://ant.design/docs/react/getting-started#Import-on-Demand).
+
 ### TypeScript
 
-`antd` is written in TypeScript with complete definitions, check [Use in TypeScript](https://ant.design/docs/react/use-in-typescript) to getting started.
+See [Use in TypeScript](https://ant.design/docs/react/use-in-typescript).
 
 ## 🌍 Internationalization
 
-Dozens of languages supported in `antd`, see [i18n](https://ant.design/docs/react/i18n).
+See [i18n](http://ant.design/docs/react/i18n).
 
 ## 🔗 Links
 
-- [Home page](https://ant.design/)
-- [Components](https://ant.design/components/button/)
+- [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)
+- [Scaffold Market](http://scaffold.ant.design)
 - [rc-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)
 - [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
 - [Awesome Ant Design](https://github.com/websemantics/awesome-ant-design)
-- [Customize Theme](https://ant.design/docs/react/customize-theme)
-- [How to Apply for Being A Collaborator](https://github.com/ant-design/ant-design/wiki/Collaborators#how-to-apply-for-being-a-collaborator)
+- [Customize Theme](http://ant.design/docs/react/customize-theme)
 
 ## ⌨️ Development
 
-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
@@ -153,13 +107,3 @@ Open your browser and visit http://127.0.0.1:8001 , see more at [Development](ht
 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)

azure-pipelines.yml

@@ -1,61 +0,0 @@
-name: Ant Design
-
-trigger: none
-
-pr:
-  autoCancel: true
-  branches:
-    exclude:
-      - gh-pages
-
-pool:
-  vmImage: 'ubuntu-latest'
-
-stages:
-- stage: site
-  jobs:
-    - job: Build_Site
-      steps:
-        - checkout: self
-          displayName: 'Checkout'
-          clean: true
-          fetchDepth: 1
-        - task: NodeTool@0
-          displayName: 'Install Node.js'
-          inputs:
-            versionSpec: '12.13.1'
-        - script: npm install
-          displayName: 'Install modules'
-        - script: |
-            node ./scripts/azure-github-comment.js "[![Prepare preview](https://user-images.githubusercontent.com/5378891/72351368-2c979e00-371b-11ea-9652-eb4e825d745e.gif)](https://dev.azure.com/ant-design/ant-design/_build/results?buildId=$(Build.BuildId))"
-          displayName: 'Comment on github'
-        - script: npm run site
-          displayName: 'Build sites'
-        - script: ls -al _site/
-          displayName: 'List build'
-        - script: |
-            export DEPLOY_DOMAIN=https://preview-${SYSTEM_PULLREQUEST_PULLREQUESTNUMBER}-ant-design.surge.sh
-            echo "Deploy to $DEPLOY_DOMAIN"
-            npx surge --project ./_site --domain $DEPLOY_DOMAIN
-          displayName: 'Deploy Site'
-        - script: |
-            export DEPLOY_DOMAIN=https://preview-${SYSTEM_PULLREQUEST_PULLREQUESTNUMBER}-ant-design.surge.sh
-            node ./scripts/azure-github-comment.js "[<img width="306" src="https://user-images.githubusercontent.com/5378891/72400743-23dbb200-3785-11ea-9d13-1a2d92743846.png">]($DEPLOY_DOMAIN)"
-          displayName: 'Update comment on github'
-    - job: Build_Site_Failed
-      dependsOn: Build_Site
-      condition: failed()
-      steps:
-        - checkout: self
-          displayName: 'Checkout'
-          clean: true
-          fetchDepth: 1
-        - task: NodeTool@0
-          displayName: 'Install Node.js'
-          inputs:
-            versionSpec: '12.13.1'
-        - script: npm install
-          displayName: 'Install modules'
-        - script: |
-            node ./scripts/azure-github-comment.js "[<img width="534" src="https://user-images.githubusercontent.com/5378891/75333447-1e63a280-58c1-11ea-975d-235367fd1522.png">](https://dev.azure.com/ant-design/ant-design/_build/results?buildId=$(Build.BuildId))"
-          displayName: 'Comment on github'

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

@@ -18,39 +18,31 @@ Array [
   "Cascader",
   "Checkbox",
   "Col",
-  "Comment",
-  "ConfigProvider",
   "DatePicker",
-  "Descriptions",
   "Divider",
   "Dropdown",
   "Drawer",
-  "Empty",
   "Form",
-  "Grid",
+  "Icon",
   "Input",
   "InputNumber",
   "Layout",
   "List",
+  "LocaleProvider",
   "message",
   "Menu",
-  "Mentions",
   "Modal",
-  "Statistic",
   "notification",
-  "PageHeader",
   "Pagination",
   "Popconfirm",
   "Popover",
   "Progress",
   "Radio",
   "Rate",
-  "Result",
   "Row",
   "Select",
   "Skeleton",
   "Slider",
-  "Space",
   "Spin",
   "Steps",
   "Switch",
@@ -63,7 +55,7 @@ Array [
   "TimePicker",
   "Timeline",
   "Tooltip",
-  "Typography",
+  "Mention",
   "Upload",
   "version",
 ]

components/__tests__/index.test.js

@@ -13,8 +13,8 @@ describe('antd', () => {
   });
 
   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.',
+    expect(warnSpy).toBeCalledWith(
+      '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/_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__/getScroll.test.js

@@ -1,57 +0,0 @@
-import getScroll from '../getScroll';
-
-describe('getScroll', () => {
-  it('getScroll target null', async () => {
-    expect(getScroll(null, true)).toBe(0);
-    expect(getScroll(null, false)).toBe(0);
-  });
-
-  it('getScroll window', async () => {
-    const scrollToSpy = jest.spyOn(window, 'scrollTo').mockImplementation((x, y) => {
-      window.pageXOffset = x;
-      window.pageYOffset = y;
-    });
-    window.scrollTo(200, 400);
-    expect(getScroll(window, true)).toBe(400);
-    expect(getScroll(window, false)).toBe(200);
-    scrollToSpy.mockRestore();
-  });
-
-  it('getScroll document', async () => {
-    const scrollToSpy = jest.spyOn(window, 'scrollTo').mockImplementation((x, y) => {
-      document.documentElement.scrollLeft = x;
-      document.documentElement.scrollTop = y;
-    });
-    window.scrollTo(200, 400);
-    expect(getScroll(document, true)).toBe(400);
-    expect(getScroll(document, false)).toBe(200);
-    scrollToSpy.mockRestore();
-  });
-
-  it('getScroll div', async () => {
-    const div = document.createElement('div');
-    const scrollToSpy = jest.spyOn(window, 'scrollTo').mockImplementation((x, y) => {
-      div.scrollLeft = x;
-      div.scrollTop = y;
-    });
-    window.scrollTo(200, 400);
-    expect(getScroll(div, true)).toBe(400);
-    expect(getScroll(div, false)).toBe(200);
-    scrollToSpy.mockRestore();
-  });
-
-  it('getScroll documentElement', async () => {
-    const div = {};
-    const scrollToSpy = jest.spyOn(window, 'scrollTo').mockImplementation((x, y) => {
-      div.scrollLeft = null;
-      div.scrollTop = null;
-      div.documentElement = {};
-      div.documentElement.scrollLeft = x;
-      div.documentElement.scrollTop = y;
-    });
-    window.scrollTo(200, 400);
-    expect(getScroll(div, true)).toBe(400);
-    expect(getScroll(div, false)).toBe(200);
-    scrollToSpy.mockRestore();
-  });
-});

components/_util/__tests__/getScrollNode.test.ts

@@ -1,11 +0,0 @@
-/**
- * @jest-environment node
- */
-import getScroll from '../getScroll';
-
-describe('getScroll node', () => {
-  it('getScroll return 0 in node environment', async () => {
-    expect(getScroll(null, true)).toBe(0);
-    expect(getScroll(null, false)).toBe(0);
-  });
-});

components/_util/__tests__/scrollTo.test.js

@@ -1,66 +0,0 @@
-import scrollTo from '../scrollTo';
-import { sleep } from '../../../tests/utils';
-
-describe('Test ScrollTo function', () => {
-  let dateNowMock;
-
-  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);
-    await sleep(20);
-
-    expect(window.pageYOffset).toBe(1000);
-
-    scrollToSpy.mockRestore();
-  });
-
-  it('test callback - option', async () => {
-    const cbMock = jest.fn();
-    scrollTo(1000, {
-      callback: cbMock,
-    });
-    await sleep(20);
-    expect(cbMock).toHaveBeenCalledTimes(1);
-  });
-
-  it('test getContainer - option', async () => {
-    const div = document.createElement('div');
-    scrollTo(1000, {
-      getContainer: () => div,
-    });
-    await sleep(20);
-    expect(div.scrollTop).toBe(1000);
-  });
-
-  it('test getContainer document - option', async () => {
-    scrollTo(1000, {
-      getContainer: () => document,
-    });
-    await sleep(20);
-    expect(document.documentElement.scrollTop).toBe(1000);
-  });
-
-  it('test duration - option', async () => {
-    scrollTo(1000, {
-      duration: 1100,
-      getContainer: () => document,
-    });
-    await sleep(20);
-    expect(document.documentElement.scrollTop).toBe(1000);
-  });
-});

components/_util/__tests__/unreachableException.test.js

@@ -1,8 +0,0 @@
-import UnreachableException from '../unreachableException';
-
-describe('UnreachableException', () => {
-  it('error thrown matches snapshot', () => {
-    const exception = new UnreachableException('some value');
-    expect(exception.message).toMatchInlineSnapshot(`"unreachable case: \\"some value\\""`);
-  });
-});

components/_util/__tests__/util.test.js

@@ -1,41 +1,37 @@
-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 Wave from '../wave';
-import TransButton from '../transButton';
-import openAnimation from '../openAnimation';
-import { sleep } from '../../../tests/utils';
-import focusTest from '../../../tests/shared/focusTest';
 
 describe('Test utils function', () => {
-  focusTest(TransButton);
+  beforeAll(() => {
+    jest.useFakeTimers();
+  });
 
-  it('throttle function should work', async () => {
+  afterAll(() => {
+    jest.useRealTimers();
+  });
+
+  it('throttle function should work', () => {
     const callback = jest.fn();
     const throttled = throttleByAnimationFrame(callback);
-    expect(callback).not.toHaveBeenCalled();
+    expect(callback).not.toBeCalled();
 
     throttled();
     throttled();
-    await sleep(20);
 
-    expect(callback).toHaveBeenCalled();
+    jest.runAllTimers();
+    expect(callback).toBeCalled();
     expect(callback.mock.calls.length).toBe(1);
   });
 
-  it('throttle function should be canceled', async () => {
+  it('throttle function should be canceled', () => {
     const callback = jest.fn();
     const throttled = throttleByAnimationFrame(callback);
 
     throttled();
     throttled.cancel();
-    await sleep(20);
 
-    expect(callback).not.toHaveBeenCalled();
+    jest.runAllTimers();
+    expect(callback).not.toBeCalled();
   });
 
   describe('getDataOrAriaProps', () => {
@@ -88,119 +84,4 @@ describe('Test utils function', () => {
       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();
-          });
-        });
-      });
-    });
-  });
-
-  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', () => {
-      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/__tests__/wave.test.js

@@ -1,107 +0,0 @@
-import React from 'react';
-import { mount } from 'enzyme';
-import Wave from '../wave';
-import ConfigProvider from '../../config-provider';
-import mountTest from '../../../tests/shared/mountTest';
-import { sleep } from '../../../tests/utils';
-
-describe('Wave component', () => {
-  mountTest(Wave);
-
-  afterEach(() => {
-    const styles = document.getElementsByTagName('style');
-    for (let i = 0; i < styles.length; i += 1) {
-      styles[i].remove();
-    }
-  });
-
-  it('isHidden works', () => {
-    const TEST_NODE_ENV = process.env.NODE_ENV;
-    process.env.NODE_ENV = 'development';
-    const wrapper = mount(<Wave><button type="button">button</button></Wave>);
-    expect(wrapper.find('button').getDOMNode().className).toBe('');
-    wrapper.find('button').getDOMNode().click();
-    expect(wrapper.find('button').getDOMNode().hasAttribute('ant-click-animating-without-extra-node')).toBe(false);
-    wrapper.unmount();
-    process.env.NODE_ENV = TEST_NODE_ENV;
-  });
-
-  it('isHidden is mocked', () => {
-    const wrapper = mount(<Wave><button type="button">button</button></Wave>);
-    expect(wrapper.find('button').getDOMNode().className).toBe('');
-    wrapper.find('button').getDOMNode().click();
-    expect(wrapper.find('button').getDOMNode().getAttribute('ant-click-animating-without-extra-node')).toBe('false');
-    wrapper.unmount();
-  });
-
-  it('wave color is grey', async () => {
-    const wrapper = mount(<Wave><button type="button" style={{ borderColor: 'rgb(0, 0, 0)' }}>button</button></Wave>);
-    wrapper.find('button').getDOMNode().click();
-    await sleep(0);
-    const styles = document.getElementsByTagName('style');
-    expect(styles.length).toBe(0);
-    wrapper.unmount();
-  });
-
-  it('wave color is not grey', async () => {
-    const wrapper = mount(<Wave><button type="button" style={{ borderColor: 'red' }}>button</button></Wave>);
-    wrapper.find('button').getDOMNode().click();
-    await sleep(200);
-    const styles = document.getElementsByTagName('style');
-    expect(styles.length).toBe(1);
-    expect(styles[0].innerHTML).toContain('--antd-wave-shadow-color: red;');
-    wrapper.unmount();
-  });
-
-  it('read wave color from border-top-color', async () => {
-    const wrapper = mount(<Wave><div style={{ borderTopColor: 'blue' }}>button</div></Wave>);
-    wrapper.find('div').getDOMNode().click();
-    await sleep(0);
-    const styles = document.getElementsByTagName('style');
-    expect(styles.length).toBe(1);
-    expect(styles[0].innerHTML).toContain('--antd-wave-shadow-color: blue;');
-    wrapper.unmount();
-  });
-
-  it('read wave color from background color', async () => {
-    const wrapper = mount(<Wave><div style={{ backgroundColor: 'green' }}>button</div></Wave>);
-    wrapper.find('div').getDOMNode().click();
-    await sleep(0);
-    const styles = document.getElementsByTagName('style');
-    expect(styles.length).toBe(1);
-    expect(styles[0].innerHTML).toContain('--antd-wave-shadow-color: green;');
-    wrapper.unmount();
-  });
-
-  it('read wave color from border firstly', async () => {
-    const wrapper = mount(<Wave><div style={{ borderColor: 'yellow', backgroundColor: 'green' }}>button</div></Wave>);
-    wrapper.find('div').getDOMNode().click();
-    await sleep(0);
-    const styles = document.getElementsByTagName('style');
-    expect(styles.length).toBe(1);
-    expect(styles[0].innerHTML).toContain('--antd-wave-shadow-color: yellow;');
-    wrapper.unmount();
-  });
-
-  it('hidden element with -leave className', async () => {
-    const wrapper = mount(<Wave><button type="button" className="xx-leave">button</button></Wave>);
-    wrapper.find('button').getDOMNode().click();
-    await sleep(0);
-    const styles = document.getElementsByTagName('style');
-    expect(styles.length).toBe(0);
-    wrapper.unmount();
-  });
-
-  it('ConfigProvider csp', async () => {
-    const wrapper = mount(
-      <ConfigProvider csp={{ nonce: 'YourNonceCode' }}>
-        <Wave><button type="button">button</button></Wave>
-      </ConfigProvider>,
-    );
-    wrapper.find('button').getDOMNode().click();
-    await sleep(0);
-    const styles = document.getElementsByTagName('style');
-    expect(styles[0].getAttribute('nonce')).toBe('YourNonceCode');
-    wrapper.unmount();
-  });
-});

components/_util/colors.ts

@@ -1,22 +0,0 @@
-import { ElementOf, tuple } from './type';
-
-export const PresetStatusColorTypes = tuple('success', 'processing', 'error', 'default', 'warning');
-// 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 = ElementOf<typeof PresetColorTypes>;
-export type PresetStatusColorType = ElementOf<typeof PresetStatusColorTypes>;

components/_util/devWarning.ts

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

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/getRenderPropValue.ts

@@ -1,18 +0,0 @@
-import * as React from 'react';
-
-export type RenderFunction = () => React.ReactNode;
-
-export const getRenderPropValue = (
-  propValue?: React.ReactNode | RenderFunction,
-): React.ReactNode => {
-  if (!propValue) {
-    return null;
-  }
-
-  const isRenderFunction = typeof propValue === 'function';
-  if (isRenderFunction) {
-    return (propValue as RenderFunction)();
-  }
-
-  return propValue;
-};

components/_util/getScroll.tsx

@@ -1,27 +1,17 @@
-export function isWindow(obj: any) {
-  return obj !== null && obj !== undefined && obj === obj.window;
-}
-
-export default function getScroll(
-  target: HTMLElement | Window | Document | null,
-  top: boolean,
-): number {
+export default function getScroll(target: any, top: boolean): number {
   if (typeof window === 'undefined') {
     return 0;
   }
+
+  const prop = top ? 'pageYOffset' : 'pageXOffset';
   const method = top ? 'scrollTop' : 'scrollLeft';
-  let result = 0;
-  if (isWindow(target)) {
-    result = (target as Window)[top ? 'pageYOffset' : 'pageXOffset'];
-  } else if (target instanceof Document) {
-    result = target.documentElement[method];
-  } else if (target) {
-    result = (target as HTMLElement)[method];
+  const isWindow = target === window;
+
+  let ret = isWindow ? target[prop] : target[method];
+  // ie6,7,8 standard mode
+  if (isWindow && typeof ret !== 'number') {
+    ret = window.document.documentElement[method];
   }
-  if (target && !isWindow(target) && typeof result !== 'number') {
-    result = ((target as HTMLElement).ownerDocument || (target as Document)).documentElement[
-      method
-    ];
-  }
-  return result;
+
+  return ret;
 }

components/_util/interopDefault.ts

@@ -1,5 +1,4 @@
 // 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/isFlexSupported.tsx

@@ -0,0 +1,10 @@
+export default function isFlexSupported() {
+  if (typeof window !== 'undefined' && window.document && window.document.documentElement) {
+    const { documentElement } = window.document;
+    return 'flex' in documentElement.style ||
+      'webkitFlex' in documentElement.style ||
+      'Flex' in documentElement.style ||
+      'msFlex' in documentElement.style;
+  }
+  return false;
+}

components/_util/motion.tsx

@@ -1,42 +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
-  motionDeadline?: number;
-  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,
-  motionDeadline: 500,
-};
-
-export default collapseMotion;

components/_util/openAnimation.tsx

@@ -1,14 +1,10 @@
-/**
- * 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 '@ant-design/css-animation';
+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', {
+  return cssAnimation(node, 'ant-motion-collapse', {
     start() {
       if (!show) {
         node.style.height = `${node.offsetHeight}px`;

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,17 +0,0 @@
-import * as React from 'react';
-
-export const isValidElement = React.isValidElement;
-
-export function replaceElement(
-  element: React.ReactNode,
-  replacement: React.ReactNode,
-  props: any,
-): React.ReactNode {
-  if (!isValidElement(element)) return replacement;
-
-  return React.cloneElement(element, typeof props === 'function' ? props() : props);
-}
-
-export function cloneElement(element: React.ReactNode, props?: any): React.ReactElement {
-  return replaceElement(element, element, props) as React.ReactElement;
-}

components/_util/ref.ts

@@ -1,17 +0,0 @@
-import * as 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,87 +0,0 @@
-export type Breakpoint = 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs';
-export type BreakpointMap = Partial<Record<Breakpoint, string>>;
-export type ScreenMap = Partial<Record<Breakpoint, boolean>>;
-
-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: ScreenMap) => void;
-
-let subscribers: Array<{
-  token: string;
-  func: SubscribeFunc;
-}> = [];
-let subUid = -1;
-let screens = {};
-
-const responsiveObserve = {
-  matchHandlers: {},
-  dispatch(pointMap: ScreenMap) {
-    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).forEach((screen: Breakpoint) => {
-      const matchMediaQuery = responsiveMap[screen]!;
-      const handler = this.matchHandlers[matchMediaQuery];
-      if (handler && handler.mql && handler.listener) {
-        handler.mql.removeListener(handler.listener);
-      }
-    });
-  },
-  register() {
-    Object.keys(responsiveMap).forEach((screen: Breakpoint) => {
-      const matchMediaQuery = responsiveMap[screen]!;
-      const listener = ({ matches }: { matches: boolean }) => {
-        this.dispatch({
-          ...screens,
-          [screen]: matches,
-        });
-      };
-      const mql = window.matchMedia(matchMediaQuery);
-      mql.addListener(listener);
-      this.matchHandlers[matchMediaQuery] = {
-        mql,
-        listener,
-      };
-
-      listener(mql);
-    });
-  },
-};
-
-export default responsiveObserve;

components/_util/scrollTo.ts

@@ -1,39 +0,0 @@
-import raf from 'raf';
-import getScroll, { isWindow } from './getScroll';
-import { easeInOutCubic } from './easings';
-
-interface ScrollToOptions {
-  /** Scroll container, default as window */
-  getContainer?: () => HTMLElement | Window | Document;
-  /** 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 (isWindow(container)) {
-      (container as Window).scrollTo(window.pageXOffset, nextScrollTop);
-    } else if (container instanceof HTMLDocument || container.constructor.name === 'HTMLDocument') {
-      (container as HTMLDocument).documentElement.scrollTop = nextScrollTop;
-    } else {
-      (container as HTMLElement).scrollTop = nextScrollTop;
-    }
-    if (time < duration) {
-      raf(frameFunc);
-    } else if (typeof callback === 'function') {
-      callback();
-    }
-  };
-  raf(frameFunc);
-}

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

@@ -20,19 +20,17 @@ export default function throttleByAnimationFrame(fn: (...args: any[]) => void) {
 }
 
 export function throttleByAnimationFrameDecorator() {
-  // eslint-disable-next-line func-names
   return function(target: any, key: string, descriptor: any) {
-    const fn = descriptor.value;
+    let 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));
+        let boundFn = throttleByAnimationFrame(fn.bind(this));
         definingProperty = true;
         Object.defineProperty(this, key, {
           value: boundFn,

components/_util/transButton.tsx

@@ -1,82 +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;
-  autoFocus?: 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;
-
-  componentDidMount() {
-    const { autoFocus } = this.props;
-    if (autoFocus) {
-      this.focus();
-    }
-  }
-
-  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

@@ -0,0 +1,8 @@
+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,16 +1 @@
 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;
-
-/**
- * https://stackoverflow.com/a/59187769
- * Extract the type of an element of an array/tuple without performing indexing
- */
-export type ElementOf<T> = T extends (infer E)[] ? E : T extends readonly (infer E)[] ? E : never;
-
-/**
- * https://github.com/Microsoft/TypeScript/issues/29729
- */
-export type LiteralUnion<T extends U, U> = T | (U & {});

components/_util/unreachableException.ts

@@ -1,5 +0,0 @@
-export default class UnreachableException {
-  constructor(value: never) {
-    return new Error(`unreachable case: ${JSON.stringify(value)}`);
-  }
-}

components/_util/usePatchElement.tsx

@@ -1,18 +0,0 @@
-import * as React from 'react';
-
-export default function usePatchElement(): [
-  React.ReactElement[],
-  (element: React.ReactElement) => Function,
-] {
-  const [elements, setElements] = React.useState<React.ReactElement[]>([]);
-
-  function patchElement(element: React.ReactElement) {
-    setElements(originElements => [...originElements, element]);
-
-    return () => {
-      setElements(originElements => originElements.filter(ele => ele !== element));
-    };
-  }
-
-  return [elements, patchElement];
-}

components/_util/warning.tsx

@@ -0,0 +1,9 @@
+import warning from 'warning';
+
+const warned: { [msg: string]: boolean} = {};
+export default (valid: boolean, message: string): void => {
+  if (!valid && !warned[message]) {
+    warning(false, message);
+    warned[message] = true;
+  }
+};

components/_util/wave.tsx

@@ -1,94 +1,47 @@
 import * as React from 'react';
 import { findDOMNode } from 'react-dom';
-import TransitionEvents from '@ant-design/css-animation/lib/Event';
-import raf from './raf';
-import { ConfigConsumer, ConfigConsumerProps, CSPConfig } from '../config-provider';
+import TransitionEvents from 'css-animation/lib/Event';
 
 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 }> {
+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 destroyed: boolean = false;
-
-  private csp?: CSPConfig;
-
-  componentDidMount() {
-    const node = findDOMNode(this) as HTMLElement;
-    if (!node || node.nodeType !== 1) {
-      return;
+  isNotGrey(color: string) {
+    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]);
     }
-    this.instance = this.bindAnimationEvent(node);
-  }
-
-  componentWillUnmount() {
-    if (this.instance) {
-      this.instance.cancel();
-    }
-    if (this.clickWaveTimeoutId) {
-      clearTimeout(this.clickWaveTimeoutId);
-    }
-
-    this.destroyed = true;
+    return true;
   }
 
   onClick = (node: HTMLElement, waveColor: string) => {
-    if (!node || isHidden(node) || node.className.indexOf('-leave') >= 0) {
+    if (node.className.indexOf('-leave') >= 0) {
       return;
     }
     const { insertExtraNode } = this.props;
     this.extraNode = document.createElement('div');
-    const { extraNode } = this;
+    const extraNode = this.extraNode;
     extraNode.className = 'ant-click-animating-node';
     const attributeName = this.getAttributeName();
+    node.removeAttribute(attributeName);
     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*, ){3}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;
-      }
-
+    if (waveColor &&
+        waveColor !== '#ffffff' &&
+        waveColor !== 'rgb(255, 255, 255)' &&
+        this.isNotGrey(waveColor) &&
+        !/rgba\(\d*, \d*, \d*, 0\)/.test(waveColor) &&  // any transparent rgba color
+        waveColor !== 'transparent') {
       extraNode.style.borderColor = waveColor;
-      styleForPesudo.innerHTML = `
-      [ant-click-animating-without-extra-node='true']::after, .ant-click-animating-node {
-        --antd-wave-shadow-color: ${waveColor};
-      }`;
+      styleForPesudo.innerHTML =
+        `[ant-click-animating-without-extra-node]:after { border-color: ${waveColor}; }`;
       if (!document.body.contains(styleForPesudo)) {
         document.body.appendChild(styleForPesudo);
       }
@@ -96,47 +49,19 @@ export default class Wave extends React.Component<{ insertExtraNode?: boolean }>
     if (insertExtraNode) {
       node.appendChild(extraNode);
     }
-    TransitionEvents.addStartEventListener(node, this.onTransitionStart);
     TransitionEvents.addEndEventListener(node, this.onTransitionEnd);
-  };
-
-  onTransitionStart = (e: AnimationEvent) => {
-    if (this.destroyed) {
-      return;
-    }
-
-    const node = findDOMNode(this) as HTMLElement;
-    if (!e || e.target !== node || this.animationStart) {
-      return;
-    }
-
-    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
-    ) {
+    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)) {
+      if ((e.target as HTMLElement).tagName === 'INPUT') {
         return;
       }
       this.resetEffect(node);
@@ -146,14 +71,6 @@ export default class Wave extends React.Component<{ insertExtraNode?: boolean }>
         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 {
@@ -161,35 +78,54 @@ export default class Wave extends React.Component<{ insertExtraNode?: boolean }>
         node.removeEventListener('click', onClick, true);
       },
     };
-  };
+  }
+
+  getAttributeName() {
+    const { insertExtraNode } = this.props;
+    return insertExtraNode ? 'ant-click-animating' : 'ant-click-animating-without-extra-node';
+  }
 
   resetEffect(node: HTMLElement) {
-    if (!node || node === this.extraNode || !(node instanceof Element)) {
+    if (!node || node === this.extraNode) {
       return;
     }
     const { insertExtraNode } = this.props;
     const attributeName = this.getAttributeName();
-    node.setAttribute(attributeName, 'false'); // edge has bug on `removeAttribute` #14466
-
-    if (styleForPesudo) {
-      styleForPesudo.innerHTML = '';
-    }
-
+    node.removeAttribute(attributeName);
+    this.removeExtraStyleNode();
     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;
+  onTransitionEnd = (e: AnimationEvent) => {
+    if (!e || e.animationName !== 'fadeEffect') {
+      return;
+    }
+    this.resetEffect(e.target as HTMLElement);
+  }
 
-    return children;
-  };
+  removeExtraStyleNode() {
+    if (styleForPesudo) {
+      styleForPesudo.innerHTML = '';
+    }
+  }
+
+  componentDidMount() {
+    this.instance = this.bindAnimationEvent(findDOMNode(this) as HTMLElement);
+  }
+
+  componentWillUnmount() {
+    if (this.instance) {
+      this.instance.cancel();
+    }
+    if (this.clickWaveTimeoutId) {
+      clearTimeout(this.clickWaveTimeoutId);
+    }
+  }
 
   render() {
-    return <ConfigConsumer>{this.renderWave}</ConfigConsumer>;
+    return this.props.children;
   }
 }

components/affix/__tests__/Affix.test.js

@@ -0,0 +1,120 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import Affix from '..';
+import Button from '../../button';
+
+const events = {};
+
+class AffixMounter extends React.Component {
+  componentDidMount() {
+    this.container.addEventListener = jest.fn().mockImplementation((event, cb) => {
+      events[event] = cb;
+    });
+  }
+
+  getTarget = () => {
+    return this.container;
+  }
+
+  render() {
+    return (
+      <div
+        style={{
+          height: 100,
+          overflowY: 'scroll',
+        }}
+        ref={(node) => { this.container = node; }}
+      >
+        <div
+          className="background"
+          style={{
+            paddingTop: 60,
+            height: 300,
+          }}
+        >
+          <Affix
+            target={() => this.container}
+            ref={ele => this.affix = ele}
+            {...this.props}
+          >
+            <Button type="primary">
+              Fixed at the top of container
+            </Button>
+          </Affix>
+        </div>
+      </div>
+    );
+  }
+}
+
+describe('Affix Render', () => {
+  let wrapper;
+
+  beforeAll(() => {
+    jest.useFakeTimers();
+  });
+
+  afterAll(() => {
+    jest.useRealTimers();
+  });
+
+  const scrollTo = (top) => {
+    wrapper.instance().affix.fixedNode.parentNode.getBoundingClientRect = jest.fn(() => {
+      return {
+        bottom: 100, height: 28, left: 0, right: 0, top: 50 - top, width: 195,
+      };
+    });
+    wrapper.instance().container.scrollTop = 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();
+
+    scrollTo(0);
+    expect(wrapper.instance().affix.state.affixStyle).toBe(null);
+
+    scrollTo(100);
+    expect(wrapper.instance().affix.state.affixStyle).not.toBe(null);
+
+    scrollTo(0);
+    expect(wrapper.instance().affix.state.affixStyle).toBe(null);
+  });
+
+  it('support offsetBottom', () => {
+    document.body.innerHTML = '<div id="mounter" />';
+
+    wrapper = mount(<AffixMounter offsetBottom={0} />, { attachTo: document.getElementById('mounter') });
+    jest.runAllTimers();
+
+    scrollTo(0);
+    expect(wrapper.instance().affix.state.affixStyle).not.toBe(null);
+
+    scrollTo(100);
+    expect(wrapper.instance().affix.state.affixStyle).toBe(null);
+
+    scrollTo(0);
+    expect(wrapper.instance().affix.state.affixStyle).not.toBe(null);
+  });
+
+  it('updatePosition when offsetTop changed', () => {
+    document.body.innerHTML = '<div id="mounter" />';
+
+    wrapper = mount(<AffixMounter offsetTop={0} />, { attachTo: document.getElementById('mounter') });
+    jest.runAllTimers();
+
+    scrollTo(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);
+  });
+});

components/affix/__tests__/Affix.test.tsx

@@ -1,230 +0,0 @@
-import React from 'react';
-import { mount, ReactWrapper, HTMLAttributes } from 'enzyme';
-import ResizeObserverImpl from 'rc-resize-observer';
-import Affix, { AffixProps, AffixState } from '..';
-import { getObserverEntities } from '../utils';
-import Button from '../../button';
-import rtlTest from '../../../tests/shared/rtlTest';
-import { sleep } from '../../../tests/utils';
-
-const events: Partial<Record<keyof HTMLElementEventMap, (ev: Partial<Event>) => void>> = {};
-
-class AffixMounter extends React.Component<{
-  offsetBottom?: number;
-  offsetTop?: number;
-  onTestUpdatePosition?(): void;
-}> {
-  private container: HTMLDivElement;
-
-  public affix: Affix;
-
-  componentDidMount() {
-    this.container.addEventListener = jest
-      .fn()
-      .mockImplementation((event: keyof HTMLElementEventMap, cb: (ev: Partial<Event>) => void) => {
-        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', () => {
-  rtlTest(Affix);
-
-  const domMock = jest.spyOn(HTMLElement.prototype, 'getBoundingClientRect');
-  let affixMounterWrapper: ReactWrapper<unknown, unknown, AffixMounter>;
-  let affixWrapper: ReactWrapper<AffixProps, AffixState, Affix>;
-
-  const classRect: Record<string, DOMRect> = {
-    container: {
-      top: 0,
-      bottom: 100,
-    } as DOMRect,
-  };
-
-  beforeAll(() => {
-    domMock.mockImplementation(function fn(this: HTMLElement) {
-      return (
-        classRect[this.className] || {
-          top: 0,
-          bottom: 0,
-        }
-      );
-    });
-  });
-
-  afterAll(() => {
-    domMock.mockRestore();
-  });
-
-  const movePlaceholder = async (top: number) => {
-    classRect.fixed = {
-      top,
-      bottom: top,
-    } as DOMRect;
-    if (events.scroll == null) {
-      throw new Error('scroll should be set');
-    }
-    events.scroll({
-      type: 'scroll',
-    });
-    await sleep(20);
-  };
-
-  it('Anchor render perfectly', async () => {
-    document.body.innerHTML = '<div id="mounter" />';
-
-    affixMounterWrapper = mount(<AffixMounter />, { attachTo: document.getElementById('mounter') });
-    await sleep(20);
-
-    await movePlaceholder(0);
-    expect(affixMounterWrapper.instance().affix.state.affixStyle).toBeFalsy();
-
-    await movePlaceholder(-100);
-    expect(affixMounterWrapper.instance().affix.state.affixStyle).toBeTruthy();
-
-    await movePlaceholder(0);
-    expect(affixMounterWrapper.instance().affix.state.affixStyle).toBeFalsy();
-  });
-
-  it('support offsetBottom', async () => {
-    document.body.innerHTML = '<div id="mounter" />';
-
-    affixMounterWrapper = mount(<AffixMounter offsetBottom={0} />, {
-      attachTo: document.getElementById('mounter'),
-    });
-
-    await sleep(20);
-
-    await movePlaceholder(300);
-    expect(affixMounterWrapper.instance().affix.state.affixStyle).toBeTruthy();
-
-    await movePlaceholder(0);
-    expect(affixMounterWrapper.instance().affix.state.affixStyle).toBeFalsy();
-
-    await movePlaceholder(300);
-    expect(affixMounterWrapper.instance().affix.state.affixStyle).toBeTruthy();
-  });
-
-  it('updatePosition when offsetTop changed', async () => {
-    document.body.innerHTML = '<div id="mounter" />';
-
-    affixMounterWrapper = mount(<AffixMounter offsetTop={0} />, {
-      attachTo: document.getElementById('mounter'),
-    });
-    await sleep(20);
-
-    await movePlaceholder(-100);
-    expect(affixMounterWrapper.instance().affix.state.affixStyle?.top).toBe(0);
-    affixMounterWrapper.setProps({
-      offsetTop: 10,
-    });
-    await sleep(20);
-    expect(affixMounterWrapper.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') as HTMLDivElement;
-      const getTarget = () => container;
-      affixWrapper = mount(<Affix target={getTarget}>{null}</Affix>);
-      affixWrapper.setProps({ target: () => null });
-      expect(affixWrapper.instance().state.status).toBe(0);
-      expect(affixWrapper.instance().state.affixStyle).toBe(undefined);
-      expect(affixWrapper.instance().state.placeholderStyle).toBe(undefined);
-    });
-
-    it('instance change', async () => {
-      const getObserverLength = () => Object.keys(getObserverEntities()).length;
-
-      const container = document.createElement('div');
-      document.body.appendChild(container);
-      let target: HTMLDivElement | null = container;
-
-      const originLength = getObserverLength();
-      const getTarget = () => target;
-      affixWrapper = mount(<Affix target={getTarget}>{null}</Affix>);
-      await sleep(50);
-
-      expect(getObserverLength()).toBe(originLength + 1);
-      target = null;
-      affixWrapper.setProps({});
-      affixWrapper.update();
-      await sleep(50);
-      expect(getObserverLength()).toBe(originLength);
-    });
-  });
-
-  describe('updatePosition when size changed', () => {
-    it.each([
-      { name: 'inner', index: 0 },
-      { name: 'outer', index: 1 },
-    ])(name, async ({ index }) => {
-      document.body.innerHTML = '<div id="mounter" />';
-
-      const updateCalled = jest.fn();
-      affixMounterWrapper = mount(
-        <AffixMounter offsetBottom={0} onTestUpdatePosition={updateCalled} />,
-        {
-          attachTo: document.getElementById('mounter'),
-        },
-      );
-
-      await sleep(20);
-
-      await movePlaceholder(300);
-      expect(affixMounterWrapper.instance().affix.state.affixStyle).toBeTruthy();
-      await sleep(20);
-      affixMounterWrapper.update();
-
-      // Mock trigger resize
-      updateCalled.mockReset();
-      const resizeObserverInstance: ReactWrapper<
-        HTMLAttributes,
-        unknown,
-        ResizeObserverImpl
-      > = affixMounterWrapper.find('ResizeObserver') as any;
-      resizeObserverInstance
-        .at(index)
-        .instance()
-        .onResize(
-          [
-            {
-              target: {
-                getBoundingClientRect: () => ({ width: 99, height: 99 }),
-              } as Element,
-              contentRect: {} as DOMRect,
-            },
-          ],
-          ({} as unknown) as ResizeObserver,
-        );
-      await sleep(20);
-
-      expect(updateCalled).toHaveBeenCalled();
-    });
-  });
-});

components/affix/__tests__/__snapshots__/Affix.test.tsx.snap

@@ -1,9 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Affix Render rtl render component should be rendered correctly in RTL direction 1`] = `
-<div>
-  <div
-    class=""
-  />
-</div>
-`;

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

@@ -34,37 +34,6 @@ exports[`renders ./components/affix/demo/basic.md correctly 1`] = `
 </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

components/affix/demo/basic.md

@@ -13,30 +13,47 @@ title:
 
 The simplest usage.
 
-```tsx
-import React, { useState } from 'react';
+````jsx
 import { Affix, Button } from 'antd';
 
-const Demo: React.FC = () => {
-  const [top, setTop] = useState(10);
-  const [bottom, setBottom] = useState(10);
+class Demo extends React.Component {
+  state = {
+    top: 10,
+    bottom: 10,
+  }
 
-  return (
-    <div>
-      <Affix offsetTop={top}>
-        <Button type="primary" onClick={() => setTop(top + 10)}>
-          Affix top
-        </Button>
-      </Affix>
-      <br />
-      <Affix offsetBottom={bottom}>
-        <Button type="primary" onClick={() => setBottom(bottom + 10)}>
-          Affix bottom
-        </Button>
-      </Affix>
-    </div>
-  );
-};
+  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);
-```
+````

components/affix/demo/debug.md

@@ -1,39 +0,0 @@
----
-order: 99
-title:
-  zh-CN: 调整浏览器大小，观察 Affix 容器是否发生变化。跟随变化为正常。#17678
-  en-US:
-debug: true
----
-
-## zh-CN
-
-DEBUG
-
-## en-US
-
-DEBUG
-
-```tsx
-import React, { useState } from 'react';
-import { Affix, Button } from 'antd';
-
-const Demo: React.FC = () => {
-  const [top, setTop] = useState(10);
-  return (
-    <div style={{ height: 10000 }}>
-      <div>Top</div>
-      <Affix offsetTop={top}>
-        <div style={{ background: 'red' }}>
-          <Button type="primary" onClick={() => setTop(top + 10)}>
-            Affix top
-          </Button>
-        </div>
-      </Affix>
-      <div>Bottom</div>
-    </div>
-  );
-};
-
-ReactDOM.render(<Demo />, mountNode);
-```

components/affix/demo/on-change.md

@@ -13,13 +13,13 @@ title:
 
 Callback with affixed state.
 
-```tsx
+````jsx
 import { Affix, Button } from 'antd';
 
 ReactDOM.render(
   <Affix offsetTop={120} onChange={affixed => console.log(affixed)}>
     <Button>120px to affix top</Button>
   </Affix>,
-  mountNode,
+  mountNode
 );
-```
+````

components/affix/demo/target.md

@@ -13,25 +13,27 @@ title:
 
 Set a `target` for 'Affix', which is listen to scroll event of target element (default is `window`).
 
-```tsx
-import React, { useState } from 'react';
+````jsx
 import { Affix, Button } from 'antd';
 
-const Demo: React.FC = () => {
-  const [container, setContainer] = useState(null);
-  return (
-    <div className="scrollable-container" ref={setContainer}>
-      <div className="background">
-        <Affix target={() => container}>
-          <Button type="primary">Fixed at the top of container</Button>
-        </Affix>
+class Demo extends React.Component {
+  render() {
+    return (
+      <div className="scrollable-container" ref={(node) => { this.container = node; }}>
+        <div className="background">
+          <Affix target={() => this.container}>
+            <Button type="primary">
+              Fixed at the top of container
+            </Button>
+          </Affix>
+        </div>
       </div>
-    </div>
-  );
-};
+    );
+  }
+}
 
 ReactDOM.render(<Demo />, mountNode);
-```
+````
 
 <style>
 #components-affix-demo-target .scrollable-container {

components/affix/index.en-US.md

@@ -4,33 +4,27 @@ type: Navigation
 title: Affix
 ---
 
-Wrap Affix around another component to make it stick the viewport.
+Make an element stick 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 stick to the viewport. This 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.
 
 ## API
 
 | Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| 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) | - |
+| -------- | ----------- | ---- | ------- |
+| offsetBottom | Pixels to offset from bottom when calculating position of scroll | number | - |
+| offsetTop | Pixels to offset from top when calculating position of scroll | number | 0 |
+| target | specifies the scrollable area dom node | () => HTMLElement | () => window |
+| onChange | Callback for 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,17 +1,41 @@
 import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import * as PropTypes from 'prop-types';
+import addEventListener from 'rc-util/lib/Dom/addEventListener';
 import classNames from 'classnames';
+import shallowequal from 'shallowequal';
 import omit from 'omit.js';
-import ResizeObserver from 'rc-resize-observer';
-import { ConfigContext, ConfigConsumerProps } from '../config-provider';
+import getScroll from '../_util/getScroll';
 import { throttleByAnimationFrameDecorator } from '../_util/throttleByAnimationFrame';
 
-import {
-  addObserveTarget,
-  removeObserveTarget,
-  getTargetRect,
-  getFixedTop,
-  getFixedBottom,
-} from './utils';
+function getTargetRect(target: HTMLElement | Window | null): ClientRect {
+  return target !== window ?
+    (target as HTMLElement).getBoundingClientRect() :
+    { top: 0, left: 0, bottom: 0 } as ClientRect;
+}
+
+function getOffset(element: HTMLElement, target: HTMLElement | Window | null) {
+  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,
+    width: elemRect.width,
+    height: elemRect.height,
+  };
+}
+
+function noop() {}
 
 function getDefaultTarget() {
   return typeof window !== 'undefined' ? window : null;
@@ -23,6 +47,7 @@ export interface AffixProps {
    * 距离窗口顶部达到指定偏移量后触发
    */
   offsetTop?: number;
+  offset?: number;
   /** 距离窗口底部达到指定偏移量后触发 */
   offsetBottom?: number;
   style?: React.CSSProperties;
@@ -31,271 +56,239 @@ export interface AffixProps {
   /** 设置 Affix 需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数 */
   target?: () => Window | HTMLElement | null;
   prefixCls?: string;
-  className?: string;
-  children: React.ReactNode;
-}
-
-enum AffixStatus {
-  None,
-  Prepare,
 }
 
 export interface AffixState {
-  affixStyle?: React.CSSProperties;
-  placeholderStyle?: React.CSSProperties;
-  status: AffixStatus;
-  lastAffix: boolean;
-
-  prevTarget: Window | HTMLElement | null;
+  affixStyle: React.CSSProperties | undefined;
+  placeholderStyle: React.CSSProperties | undefined;
 }
 
-class Affix extends React.Component<AffixProps, AffixState> {
-  static contextType = ConfigContext;
-
-  state: AffixState = {
-    status: AffixStatus.None,
-    lastAffix: false,
-    prevTarget: null,
+export default class Affix extends React.Component<AffixProps, AffixState> {
+  static propTypes = {
+    offsetTop: PropTypes.number,
+    offsetBottom: PropTypes.number,
+    target: PropTypes.func,
   };
 
-  placeholderNode: HTMLDivElement;
+  scrollEvent: any;
+  resizeEvent: any;
+  timeout: any;
 
-  fixedNode: HTMLDivElement;
+  events = [
+    'resize',
+    'scroll',
+    'touchstart',
+    'touchmove',
+    'touchend',
+    'pageshow',
+    'load',
+  ];
 
-  private timeout: number;
+  eventHandlers: {
+    [key: string]: any;
+  } = {};
 
-  context: ConfigConsumerProps;
+  state: AffixState = {
+    affixStyle: undefined,
+    placeholderStyle: undefined,
+  };
 
-  private getTargetFunc() {
-    const { getTargetContainer } = this.context;
-    const { target } = this.props;
+  private fixedNode: HTMLElement;
+  private placeholderNode: HTMLElement;
 
-    if (target !== undefined) {
-      return target;
+  setAffixStyle(e: any, affixStyle: React.CSSProperties | null) {
+    const { onChange = noop, target = getDefaultTarget } = this.props;
+    const originalAffixStyle = this.state.affixStyle;
+    const isWindow = target() === window;
+    if (e.type === 'scroll' && originalAffixStyle && affixStyle && isWindow) {
+      return;
     }
-
-    return getTargetContainer || getDefaultTarget;
-  }
-
-  // Event handler
-  componentDidMount() {
-    const targetFunc = this.getTargetFunc();
-    if (targetFunc) {
-      // [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(targetFunc(), this);
-        // Mock Event object.
-        this.updatePosition();
-      });
+    if (shallowequal(affixStyle, originalAffixStyle)) {
+      return;
     }
-  }
-
-  componentDidUpdate(prevProps: AffixProps) {
-    const { prevTarget } = this.state;
-    const targetFunc = this.getTargetFunc();
-    let newTarget = null;
-    if (targetFunc) {
-      newTarget = targetFunc() || null;
-    }
-
-    if (prevTarget !== newTarget) {
-      removeObserveTarget(this);
-      if (newTarget) {
-        addObserveTarget(newTarget, this);
-        // Mock Event object.
-        this.updatePosition();
+    this.setState({ affixStyle: affixStyle as React.CSSProperties }, () => {
+      const affixed = !!this.state.affixStyle;
+      if ((affixStyle && !originalAffixStyle) ||
+          (!affixStyle && originalAffixStyle)) {
+        onChange(affixed);
       }
+    });
+  }
 
-      this.setState({ prevTarget: newTarget });
+  setPlaceholderStyle(placeholderStyle: React.CSSProperties | null) {
+    const originalPlaceholderStyle = this.state.placeholderStyle;
+    if (shallowequal(placeholderStyle, originalPlaceholderStyle)) {
+      return;
+    }
+    this.setState({ placeholderStyle: placeholderStyle as React.CSSProperties });
+  }
+
+  syncPlaceholderStyle(e: any) {
+    const { affixStyle } = this.state;
+    if (!affixStyle) {
+      return;
+    }
+    this.placeholderNode.style.cssText = '';
+    this.setAffixStyle(e, {
+      ...affixStyle,
+      width: this.placeholderNode.offsetWidth,
+    });
+    this.setPlaceholderStyle({
+      width: this.placeholderNode.offsetWidth,
+    });
+  }
+
+  @throttleByAnimationFrameDecorator()
+  updatePosition(e: any) {
+    let { offsetTop, offsetBottom, offset, target = getDefaultTarget } = this.props;
+    const targetNode = target();
+
+    // Backwards support
+    // Fix: if offsetTop === 0, it will get undefined,
+    //   if offsetBottom is type of number, offsetMode will be { top: false, ... }
+    offsetTop = typeof offsetTop === 'undefined' ? offset : offsetTop;
+    const scrollTop = getScroll(targetNode, true);
+    const affixNode = ReactDOM.findDOMNode(this) as HTMLElement;
+    const elemOffset = getOffset(affixNode, targetNode);
+    const elemSize = {
+      width: this.fixedNode.offsetWidth,
+      height: this.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';
     }
 
-    if (
-      prevProps.offsetTop !== this.props.offsetTop ||
-      prevProps.offsetBottom !== this.props.offsetBottom
+    const targetRect = getTargetRect(targetNode);
+    const targetInnerHeight =
+      (targetNode as Window).innerHeight || (targetNode as HTMLElement).clientHeight;
+    if (scrollTop > elemOffset.top - (offsetTop as number) && offsetMode.top) {
+      // Fixed Top
+      const width = elemOffset.width;
+      const top = targetRect.top + (offsetTop as number);
+      this.setAffixStyle(e, {
+        position: 'fixed',
+        top,
+        left: targetRect.left + elemOffset.left,
+        width,
+      });
+      this.setPlaceholderStyle({
+        width,
+        height: elemSize.height,
+      });
+    } else if (
+      scrollTop < elemOffset.top + elemSize.height + (offsetBottom as number) - targetInnerHeight &&
+        offsetMode.bottom
     ) {
-      this.updatePosition();
+      // Fixed Bottom
+      const targetBottomOffet = targetNode === window ? 0 : (window.innerHeight - targetRect.bottom);
+      const width = elemOffset.width;
+      this.setAffixStyle(e, {
+        position: 'fixed',
+        bottom: targetBottomOffet + (offsetBottom as number),
+        left: targetRect.left + elemOffset.left,
+        width,
+      });
+      this.setPlaceholderStyle({
+        width,
+        height: elemOffset.height,
+      });
+    } else {
+      const { affixStyle } = this.state;
+      if (e.type === 'resize' && affixStyle && affixStyle.position === 'fixed' && affixNode.offsetWidth) {
+        this.setAffixStyle(e, { ...affixStyle, width: affixNode.offsetWidth });
+      } else {
+        this.setAffixStyle(e, null);
+      }
+      this.setPlaceholderStyle(null);
     }
 
-    this.measure();
+    if (e.type === 'resize') {
+      this.syncPlaceholderStyle(e);
+    }
+  }
+
+  componentDidMount() {
+    const target = this.props.target || getDefaultTarget;
+    // Wait for parent component ref has its value
+    this.timeout = setTimeout(() => {
+      this.setTargetEventListeners(target);
+    });
+  }
+
+  componentWillReceiveProps(nextProps: AffixProps) {
+    if (this.props.target !== nextProps.target) {
+      this.clearEventListeners();
+      this.setTargetEventListeners(nextProps.target!);
+
+      // Mock Event object.
+      this.updatePosition({});
+    }
+    if (
+      this.props.offsetTop !== nextProps.offsetTop ||
+      this.props.offsetBottom !== nextProps.offsetBottom
+    ) {
+      this.updatePosition({});
+    }
   }
 
   componentWillUnmount() {
+    this.clearEventListeners();
     clearTimeout(this.timeout);
-    removeObserveTarget(this);
     (this.updatePosition as any).cancel();
-    // https://github.com/ant-design/ant-design/issues/22683
-    (this.lazyUpdatePosition as any).cancel();
   }
 
-  getOffsetTop = () => {
-    const { offsetBottom } = this.props;
-    let { offsetTop } = this.props;
-    if (offsetBottom === undefined && offsetTop === undefined) {
-      offsetTop = 0;
+  setTargetEventListeners(getTarget: () => HTMLElement | Window | null) {
+    const target = getTarget();
+    if (!target) {
+      return;
     }
-    return offsetTop;
-  };
+    this.clearEventListeners();
 
-  getOffsetBottom = () => {
-    return this.props.offsetBottom;
-  };
+    this.events.forEach(eventName => {
+      this.eventHandlers[eventName] = addEventListener(target, eventName, this.updatePosition);
+    });
+  }
 
-  savePlaceholderNode = (node: HTMLDivElement) => {
-    this.placeholderNode = node;
-  };
+  clearEventListeners() {
+    this.events.forEach(eventName => {
+      const handler = this.eventHandlers[eventName];
+      if (handler && handler.remove) {
+        handler.remove();
+      }
+    });
+  }
 
   saveFixedNode = (node: HTMLDivElement) => {
     this.fixedNode = node;
-  };
-
-  // =================== Measure ===================
-  measure = () => {
-    const { status, lastAffix } = this.state;
-    const { onChange } = this.props;
-    const targetFunc = this.getTargetFunc();
-    if (status !== AffixStatus.Prepare || !this.fixedNode || !this.placeholderNode || !targetFunc) {
-      return;
-    }
-
-    const offsetTop = this.getOffsetTop();
-    const offsetBottom = this.getOffsetBottom();
-
-    const targetNode = targetFunc();
-    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();
-      }
-    }
-  };
-
-  // Handle realign logic
-  @throttleByAnimationFrameDecorator()
-  updatePosition() {
-    this.prepareMeasure();
   }
 
-  @throttleByAnimationFrameDecorator()
-  lazyUpdatePosition() {
-    const targetFunc = this.getTargetFunc();
-    const { affixStyle } = this.state;
-
-    // Check position change before measure to make Safari smooth
-    if (targetFunc && affixStyle) {
-      const offsetTop = this.getOffsetTop();
-      const offsetBottom = this.getOffsetBottom();
-
-      const targetNode = targetFunc();
-      if (targetNode && this.placeholderNode) {
-        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();
+  savePlaceholderNode = (node: HTMLDivElement) => {
+    this.placeholderNode = node;
   }
 
-  // =================== Render ===================
-  render = () => {
-    const { getPrefixCls } = this.context;
-    const { affixStyle, placeholderStyle } = this.state;
-    const { prefixCls, children } = this.props;
+  render() {
     const className = classNames({
-      [getPrefixCls('affix', prefixCls)]: affixStyle,
+      [this.props.prefixCls || 'ant-affix']: this.state.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']);
-    }
-
+    const props = omit(this.props, ['prefixCls', 'offsetTop', 'offsetBottom', 'target', 'onChange']);
+    const placeholderStyle = { ...this.state.placeholderStyle, ...this.props.style };
     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 {...props} style={placeholderStyle} ref={this.savePlaceholderNode}>
+        <div className={className} ref={this.saveFixedNode} style={this.state.affixStyle}>
+          {this.props.children}
         </div>
-      </ResizeObserver>
+      </div>
     );
-  };
+  }
 }
-
-export default Affix;

components/affix/index.zh-CN.md

@@ -1,7 +1,7 @@
 ---
 category: Components
 subtitle: 固钉
-type: 导航
+type: Navigation
 title: Affix
 ---
 
@@ -17,21 +17,15 @@ title: Affix
 
 | 成员 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| offsetBottom | 距离窗口底部达到指定偏移量后触发 | number | - |
-| offsetTop | 距离窗口顶部达到指定偏移量后触发 | number | - |
+| offsetBottom | 距离窗口底部达到指定偏移量后触发 | number |  |
+| offsetTop | 距离窗口顶部达到指定偏移量后触发 | number |  |
 | target | 设置 `Affix` 需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数 | () => HTMLElement | () => window |
-| onChange | 固定状态改变时触发的回调函数 | Function(affixed) | - |
+| 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/ErrorBoundary.tsx

@@ -1,42 +0,0 @@
-import * as React from 'react';
-import Alert from '.';
-
-interface ErrorBoundaryProps {
-  message?: React.ReactNode;
-  description?: React.ReactNode;
-}
-
-export default class ErrorBoundary extends React.Component<
-  ErrorBoundaryProps,
-  {
-    error?: Error | null;
-    info: {
-      componentStack?: string;
-    };
-  }
-> {
-  state = {
-    error: undefined,
-    info: {
-      componentStack: '',
-    },
-  };
-
-  componentDidCatch(error: Error | null, info: object) {
-    this.setState({ error, info });
-  }
-
-  render() {
-    const { message, description, children } = this.props;
-    const { error, info } = this.state;
-    const componentStack = info && info.componentStack ? info.componentStack : null;
-    const errorMessage = typeof message === 'undefined' ? (error || '').toString() : message;
-    const errorDescription = typeof description === 'undefined' ? componentStack : description;
-    if (error) {
-      return (
-        <Alert type="error" message={errorMessage} description={<pre>{errorDescription}</pre>} />
-      );
-    }
-    return children;
-  }
-}

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

@@ -0,0 +1,674 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/alert/demo/banner.md correctly 1`] = `
+<div>
+  <div
+    class="ant-alert ant-alert-warning ant-alert-banner"
+    data-show="true"
+  >
+    <i
+      class="anticon anticon-exclamation-circle ant-alert-icon"
+    >
+      <svg
+        aria-hidden="true"
+        class=""
+        data-icon="exclamation-circle"
+        fill="currentColor"
+        height="1em"
+        viewBox="64 64 896 896"
+        width="1em"
+      >
+        <path
+          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 0 1 0-96 48.01 48.01 0 0 1 0 96z"
+        />
+      </svg>
+    </i>
+    <span
+      class="ant-alert-message"
+    >
+      Warning text
+    </span>
+    <span
+      class="ant-alert-description"
+    />
+  </div>
+  <br />
+  <div
+    class="ant-alert ant-alert-warning ant-alert-banner"
+    data-show="true"
+  >
+    <i
+      class="anticon anticon-exclamation-circle ant-alert-icon"
+    >
+      <svg
+        aria-hidden="true"
+        class=""
+        data-icon="exclamation-circle"
+        fill="currentColor"
+        height="1em"
+        viewBox="64 64 896 896"
+        width="1em"
+      >
+        <path
+          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 0 1 0-96 48.01 48.01 0 0 1 0 96z"
+        />
+      </svg>
+    </i>
+    <span
+      class="ant-alert-message"
+    >
+      Very long warning text warning text text text text text text text
+    </span>
+    <span
+      class="ant-alert-description"
+    />
+    <a
+      class="ant-alert-close-icon"
+    >
+      <i
+        class="anticon anticon-close"
+      >
+        <svg
+          aria-hidden="true"
+          class=""
+          data-icon="close"
+          fill="currentColor"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
+          />
+        </svg>
+      </i>
+    </a>
+  </div>
+  <br />
+  <div
+    class="ant-alert ant-alert-warning ant-alert-no-icon ant-alert-banner"
+    data-show="true"
+  >
+    <span
+      class="ant-alert-message"
+    >
+      Warning text without icon
+    </span>
+    <span
+      class="ant-alert-description"
+    />
+  </div>
+  <br />
+  <div
+    class="ant-alert ant-alert-error ant-alert-banner"
+    data-show="true"
+  >
+    <i
+      class="anticon anticon-close-circle ant-alert-icon"
+    >
+      <svg
+        aria-hidden="true"
+        class=""
+        data-icon="close-circle"
+        fill="currentColor"
+        height="1em"
+        viewBox="64 64 896 896"
+        width="1em"
+      >
+        <path
+          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 0 1-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
+        />
+      </svg>
+    </i>
+    <span
+      class="ant-alert-message"
+    >
+      Error text
+    </span>
+    <span
+      class="ant-alert-description"
+    />
+  </div>
+</div>
+`;
+
+exports[`renders ./components/alert/demo/basic.md correctly 1`] = `
+<div
+  class="ant-alert ant-alert-success ant-alert-no-icon"
+  data-show="true"
+>
+  <span
+    class="ant-alert-message"
+  >
+    Success Text
+  </span>
+  <span
+    class="ant-alert-description"
+  />
+</div>
+`;
+
+exports[`renders ./components/alert/demo/closable.md correctly 1`] = `
+<div>
+  <div
+    class="ant-alert ant-alert-warning ant-alert-no-icon"
+    data-show="true"
+  >
+    <span
+      class="ant-alert-message"
+    >
+      Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text
+    </span>
+    <span
+      class="ant-alert-description"
+    />
+    <a
+      class="ant-alert-close-icon"
+    >
+      <i
+        class="anticon anticon-close"
+      >
+        <svg
+          aria-hidden="true"
+          class=""
+          data-icon="close"
+          fill="currentColor"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
+          />
+        </svg>
+      </i>
+    </a>
+  </div>
+  <div
+    class="ant-alert ant-alert-error ant-alert-with-description ant-alert-no-icon"
+    data-show="true"
+  >
+    <span
+      class="ant-alert-message"
+    >
+      Error Text
+    </span>
+    <span
+      class="ant-alert-description"
+    >
+      Error Description Error Description Error Description Error Description Error Description Error Description
+    </span>
+    <a
+      class="ant-alert-close-icon"
+    >
+      <i
+        class="anticon anticon-close"
+      >
+        <svg
+          aria-hidden="true"
+          class=""
+          data-icon="close"
+          fill="currentColor"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
+          />
+        </svg>
+      </i>
+    </a>
+  </div>
+</div>
+`;
+
+exports[`renders ./components/alert/demo/close-text.md correctly 1`] = `
+<div
+  class="ant-alert ant-alert-info ant-alert-no-icon"
+  data-show="true"
+>
+  <span
+    class="ant-alert-message"
+  >
+    Info Text
+  </span>
+  <span
+    class="ant-alert-description"
+  />
+  <a
+    class="ant-alert-close-icon"
+  >
+    Close Now
+  </a>
+</div>
+`;
+
+exports[`renders ./components/alert/demo/description.md correctly 1`] = `
+<div>
+  <div
+    class="ant-alert ant-alert-success ant-alert-with-description ant-alert-no-icon"
+    data-show="true"
+  >
+    <span
+      class="ant-alert-message"
+    >
+      Success Text
+    </span>
+    <span
+      class="ant-alert-description"
+    >
+      Success Description Success Description Success Description
+    </span>
+  </div>
+  <div
+    class="ant-alert ant-alert-info ant-alert-with-description ant-alert-no-icon"
+    data-show="true"
+  >
+    <span
+      class="ant-alert-message"
+    >
+      Info Text
+    </span>
+    <span
+      class="ant-alert-description"
+    >
+      Info Description Info Description Info Description Info Description
+    </span>
+  </div>
+  <div
+    class="ant-alert ant-alert-warning ant-alert-with-description ant-alert-no-icon"
+    data-show="true"
+  >
+    <span
+      class="ant-alert-message"
+    >
+      Warning Text
+    </span>
+    <span
+      class="ant-alert-description"
+    >
+      Warning Description Warning Description Warning Description Warning Description
+    </span>
+  </div>
+  <div
+    class="ant-alert ant-alert-error ant-alert-with-description ant-alert-no-icon"
+    data-show="true"
+  >
+    <span
+      class="ant-alert-message"
+    >
+      Error Text
+    </span>
+    <span
+      class="ant-alert-description"
+    >
+      Error Description Error Description Error Description Error Description
+    </span>
+  </div>
+</div>
+`;
+
+exports[`renders ./components/alert/demo/icon.md correctly 1`] = `
+<div>
+  <div
+    class="ant-alert ant-alert-success"
+    data-show="true"
+  >
+    <i
+      class="anticon anticon-check-circle ant-alert-icon"
+    >
+      <svg
+        aria-hidden="true"
+        class=""
+        data-icon="check-circle"
+        fill="currentColor"
+        height="1em"
+        viewBox="64 64 896 896"
+        width="1em"
+      >
+        <path
+          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 0 1-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"
+        />
+      </svg>
+    </i>
+    <span
+      class="ant-alert-message"
+    >
+      Success Tips
+    </span>
+    <span
+      class="ant-alert-description"
+    />
+  </div>
+  <div
+    class="ant-alert ant-alert-info"
+    data-show="true"
+  >
+    <i
+      class="anticon anticon-info-circle ant-alert-icon"
+    >
+      <svg
+        aria-hidden="true"
+        class=""
+        data-icon="info-circle"
+        fill="currentColor"
+        height="1em"
+        viewBox="64 64 896 896"
+        width="1em"
+      >
+        <path
+          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm32 664c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V456c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272zm-32-344a48.01 48.01 0 0 1 0-96 48.01 48.01 0 0 1 0 96z"
+        />
+      </svg>
+    </i>
+    <span
+      class="ant-alert-message"
+    >
+      Informational Notes
+    </span>
+    <span
+      class="ant-alert-description"
+    />
+  </div>
+  <div
+    class="ant-alert ant-alert-warning"
+    data-show="true"
+  >
+    <i
+      class="anticon anticon-exclamation-circle ant-alert-icon"
+    >
+      <svg
+        aria-hidden="true"
+        class=""
+        data-icon="exclamation-circle"
+        fill="currentColor"
+        height="1em"
+        viewBox="64 64 896 896"
+        width="1em"
+      >
+        <path
+          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 0 1 0-96 48.01 48.01 0 0 1 0 96z"
+        />
+      </svg>
+    </i>
+    <span
+      class="ant-alert-message"
+    >
+      Warning
+    </span>
+    <span
+      class="ant-alert-description"
+    />
+  </div>
+  <div
+    class="ant-alert ant-alert-error"
+    data-show="true"
+  >
+    <i
+      class="anticon anticon-close-circle ant-alert-icon"
+    >
+      <svg
+        aria-hidden="true"
+        class=""
+        data-icon="close-circle"
+        fill="currentColor"
+        height="1em"
+        viewBox="64 64 896 896"
+        width="1em"
+      >
+        <path
+          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 0 1-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
+        />
+      </svg>
+    </i>
+    <span
+      class="ant-alert-message"
+    >
+      Error
+    </span>
+    <span
+      class="ant-alert-description"
+    />
+  </div>
+  <div
+    class="ant-alert ant-alert-success ant-alert-with-description"
+    data-show="true"
+  >
+    <i
+      class="anticon anticon-check-circle ant-alert-icon"
+    >
+      <svg
+        aria-hidden="true"
+        class=""
+        data-icon="check-circle"
+        fill="currentColor"
+        height="1em"
+        viewBox="64 64 896 896"
+        width="1em"
+      >
+        <path
+          d="M699 353h-46.9c-10.2 0-19.9 4.9-25.9 13.3L469 584.3l-71.2-98.8c-6-8.3-15.6-13.3-25.9-13.3H325c-6.5 0-10.3 7.4-6.5 12.7l124.6 172.8a31.8 31.8 0 0 0 51.7 0l210.6-292c3.9-5.3.1-12.7-6.4-12.7z"
+        />
+        <path
+          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
+        />
+      </svg>
+    </i>
+    <span
+      class="ant-alert-message"
+    >
+      Success Tips
+    </span>
+    <span
+      class="ant-alert-description"
+    >
+      Detailed description and advices about successful copywriting.
+    </span>
+  </div>
+  <div
+    class="ant-alert ant-alert-info ant-alert-with-description"
+    data-show="true"
+  >
+    <i
+      class="anticon anticon-info-circle ant-alert-icon"
+    >
+      <svg
+        aria-hidden="true"
+        class=""
+        data-icon="info-circle"
+        fill="currentColor"
+        height="1em"
+        viewBox="64 64 896 896"
+        width="1em"
+      >
+        <path
+          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
+        />
+        <path
+          d="M464 336a48 48 0 1 0 96 0 48 48 0 1 0-96 0zM536 448h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"
+        />
+      </svg>
+    </i>
+    <span
+      class="ant-alert-message"
+    >
+      Informational Notes
+    </span>
+    <span
+      class="ant-alert-description"
+    >
+      Additional description and informations about copywriting.
+    </span>
+  </div>
+  <div
+    class="ant-alert ant-alert-warning ant-alert-with-description"
+    data-show="true"
+  >
+    <i
+      class="anticon anticon-exclamation-circle ant-alert-icon"
+    >
+      <svg
+        aria-hidden="true"
+        class=""
+        data-icon="exclamation-circle"
+        fill="currentColor"
+        height="1em"
+        viewBox="64 64 896 896"
+        width="1em"
+      >
+        <path
+          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
+        />
+        <path
+          d="M464 688a48 48 0 1 0 96 0 48 48 0 1 0-96 0zM488 576h48c4.4 0 8-3.6 8-8V296c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8z"
+        />
+      </svg>
+    </i>
+    <span
+      class="ant-alert-message"
+    >
+      Warning
+    </span>
+    <span
+      class="ant-alert-description"
+    >
+      This is a warning notice about copywriting.
+    </span>
+  </div>
+  <div
+    class="ant-alert ant-alert-error ant-alert-with-description"
+    data-show="true"
+  >
+    <i
+      class="anticon anticon-close-circle ant-alert-icon"
+    >
+      <svg
+        aria-hidden="true"
+        class=""
+        data-icon="close-circle"
+        fill="currentColor"
+        height="1em"
+        viewBox="64 64 896 896"
+        width="1em"
+      >
+        <path
+          d="M685.4 354.8c0-4.4-3.6-8-8-8l-66 .3L512 465.6l-99.3-118.4-66.1-.3c-4.4 0-8 3.5-8 8 0 1.9.7 3.7 1.9 5.2l130.1 155L340.5 670a8.32 8.32 0 0 0-1.9 5.2c0 4.4 3.6 8 8 8l66.1-.3L512 564.4l99.3 118.4 66 .3c4.4 0 8-3.5 8-8 0-1.9-.7-3.7-1.9-5.2L553.5 515l130.1-155c1.2-1.4 1.8-3.3 1.8-5.2z"
+        />
+        <path
+          d="M512 65C264.6 65 64 265.6 64 513s200.6 448 448 448 448-200.6 448-448S759.4 65 512 65zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
+        />
+      </svg>
+    </i>
+    <span
+      class="ant-alert-message"
+    >
+      Error
+    </span>
+    <span
+      class="ant-alert-description"
+    >
+      This is an error message about copywriting.
+    </span>
+  </div>
+</div>
+`;
+
+exports[`renders ./components/alert/demo/smooth-closed.md correctly 1`] = `
+<div>
+  <div
+    class="ant-alert ant-alert-success ant-alert-no-icon"
+    data-show="true"
+  >
+    <span
+      class="ant-alert-message"
+    >
+      Alert Message Text
+    </span>
+    <span
+      class="ant-alert-description"
+    />
+    <a
+      class="ant-alert-close-icon"
+    >
+      <i
+        class="anticon anticon-close"
+      >
+        <svg
+          aria-hidden="true"
+          class=""
+          data-icon="close"
+          fill="currentColor"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
+          />
+        </svg>
+      </i>
+    </a>
+  </div>
+  <p>
+    placeholder text here
+  </p>
+</div>
+`;
+
+exports[`renders ./components/alert/demo/style.md correctly 1`] = `
+<div>
+  <div
+    class="ant-alert ant-alert-success ant-alert-no-icon"
+    data-show="true"
+  >
+    <span
+      class="ant-alert-message"
+    >
+      Success Text
+    </span>
+    <span
+      class="ant-alert-description"
+    />
+  </div>
+  <div
+    class="ant-alert ant-alert-info ant-alert-no-icon"
+    data-show="true"
+  >
+    <span
+      class="ant-alert-message"
+    >
+      Info Text
+    </span>
+    <span
+      class="ant-alert-description"
+    />
+  </div>
+  <div
+    class="ant-alert ant-alert-warning ant-alert-no-icon"
+    data-show="true"
+  >
+    <span
+      class="ant-alert-message"
+    >
+      Warning Text
+    </span>
+    <span
+      class="ant-alert-description"
+    />
+  </div>
+  <div
+    class="ant-alert ant-alert-error ant-alert-no-icon"
+    data-show="true"
+  >
+    <span
+      class="ant-alert-message"
+    >
+      Error Text
+    </span>
+    <span
+      class="ant-alert-description"
+    />
+  </div>
+</div>
+`;

components/alert/__tests__/__snapshots__/index.test.tsx.snap

@@ -1,58 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Alert ErrorBoundary 1`] = `
-<div
-  class="ant-alert ant-alert-error ant-alert-with-description ant-alert-no-icon"
-  data-show="true"
->
-  <span
-    class="ant-alert-message"
-  >
-    ReferenceError: NotExisted is not defined
-  </span>
-  <span
-    class="ant-alert-description"
-  >
-    <pre>
-          in ThrowError
-    in ErrorBoundary (created by WrapperComponent)
-    in WrapperComponent
-    </pre>
-  </span>
-</div>
-`;
-
-exports[`Alert could accept none react element icon 1`] = `
-<div
-  class="ant-alert ant-alert-success"
-  data-show="true"
->
-  <span
-    class="ant-alert-icon"
-  >
-    icon
-  </span>
-  <span
-    class="ant-alert-message"
-  >
-    Success Tips
-  </span>
-  <span
-    class="ant-alert-description"
-  />
-</div>
-`;
-
-exports[`Alert rtl render component should be rendered correctly in RTL direction 1`] = `
-<div
-  class="ant-alert ant-alert-info ant-alert-no-icon ant-alert-rtl"
-  data-show="true"
->
-  <span
-    class="ant-alert-message"
-  />
-  <span
-    class="ant-alert-description"
-  />
-</div>
-`;

components/alert/__tests__/index.test.js

@@ -0,0 +1,58 @@
+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).toBeCalled();
+    jest.runAllTimers();
+    expect(afterClose).toBeCalled();
+  });
+
+  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');
+    });
+  });
+});

components/alert/__tests__/index.test.tsx

@@ -1,114 +0,0 @@
-import React from 'react';
-import { mount } from 'enzyme';
-import Alert from '..';
-import Tooltip from '../../tooltip';
-import Popconfirm from '../../popconfirm';
-import rtlTest from '../../../tests/shared/rtlTest';
-import { sleep } from '../../../tests/utils';
-
-const { ErrorBoundary } = Alert;
-
-describe('Alert', () => {
-  rtlTest(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" message={null} />);
-      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" message={null} />);
-      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" message={null} />);
-      const input = wrapper.find('.ant-alert').getDOMNode();
-      expect(input.getAttribute('role')).toBe('status');
-    });
-  });
-
-  const testIt = process.env.REACT === '15' ? it.skip : it;
-  testIt('ErrorBoundary', () => {
-    // TODO: Change to @ts-expect-error once typescript is at 3.9
-    // @ts-ignore
-    // eslint-disable-next-line react/jsx-no-undef
-    const ThrowError = () => <NotExisted />;
-    const wrapper = mount(
-      <ErrorBoundary>
-        <ThrowError />
-      </ErrorBoundary>,
-    );
-    // eslint-disable-next-line jest/no-standalone-expect
-    expect(wrapper.render()).toMatchSnapshot();
-  });
-
-  it('could be used with Tooltip', async () => {
-    const ref = React.createRef<any>();
-    jest.useRealTimers();
-    const wrapper = mount(
-      <Tooltip title="xxx" mouseEnterDelay={0} ref={ref}>
-        <Alert
-          message="Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text"
-          type="warning"
-        />
-      </Tooltip>,
-    );
-    wrapper.find('.ant-alert').simulate('mouseenter');
-    await sleep(0);
-    expect(ref.current.getPopupDomNode()).toBeTruthy();
-    jest.useFakeTimers();
-  });
-
-  it('could be used with Popconfirm', async () => {
-    const ref = React.createRef<any>();
-    jest.useRealTimers();
-    const wrapper = mount(
-      <Popconfirm ref={ref} title="xxx">
-        <Alert
-          message="Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text"
-          type="warning"
-        />
-      </Popconfirm>,
-    );
-    wrapper.find('.ant-alert').simulate('click');
-    await sleep(0);
-    expect(ref.current.getPopupDomNode()).toBeTruthy();
-    jest.useFakeTimers();
-  });
-
-  it('could accept none react element icon', () => {
-    const wrapper = mount(<Alert message="Success Tips" type="success" showIcon icon="icon" />);
-    expect(wrapper).toMatchRenderedSnapshot();
-  });
-});

components/alert/demo/banner.md

@@ -8,29 +8,24 @@ title:
 
 ## zh-CN
 
-页面顶部通告形式，默认有图标且 `type` 为 'warning'。
+页面顶部通告形式，默认有图标且`type` 为 'warning'。
 
 ## en-US
 
 Display Alert as a banner at top of page.
 
-```tsx
+````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
-    />
+    <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 />
-  </>,
-  mountNode,
-);
-```
+  </div>,
+  mountNode);
+````

components/alert/demo/basic.md

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

components/alert/demo/closable.md

@@ -13,15 +13,15 @@ title:
 
 To show close button.
 
-```tsx
+````jsx
 import { Alert } from 'antd';
 
-const onClose = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+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"
@@ -35,7 +35,6 @@ ReactDOM.render(
       closable
       onClose={onClose}
     />
-  </>,
-  mountNode,
-);
-```
+  </div>,
+  mountNode);
+````