Compare commits

..

2 Commits
3.7.0 ... 1.3.2

Author SHA1 Message Date
ddcat1115
e051e8ae32 format webpack.config.js 2016-06-06 15:12:38 +08:00
ddcat1115
9558aa2c64 fix #1970 2016-06-06 13:53:05 +08:00
1573 changed files with 28056 additions and 301003 deletions

3
.babelrc Normal file
View File

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

View File

@@ -1,2 +0,0 @@
codecov:
branch: master

View File

@@ -1,6 +0,0 @@
components/**/*.js
components/**/*.jsx
components/*/__tests__/type.tsx
!.eslintrc.js
!components/*/__tests__/**/*.js
!components/*/demo/*

View File

@@ -1,13 +1,22 @@
'use strict';
const eslintrc = {
extends: ['eslint-config-airbnb'],
env: {
browser: true,
node: true,
jasmine: true,
mocha: true,
jest: true,
es6: true,
},
parser: 'babel-eslint',
parserOptions: {
ecmaVersion: 6,
ecmaFeatures: {
jsx: true,
experimentalObjectRestSpread: true,
},
},
plugins: [
'markdown',
'react',
@@ -15,33 +24,18 @@ const eslintrc = {
],
rules: {
'func-names': 0,
'prefer-const': 0,
'arrow-body-style': 0,
'react/sort-comp': 0,
'react/prop-types': 0,
'react/jsx-closing-bracket-location': 0,
'react/jsx-first-prop-new-line': 0,
'react/jsx-one-expression-per-line': 0,
'react/forbid-prop-types': 0,
'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx', '.md'] }],
'import/extensions': 0,
'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,
'react/no-danger': 0,
'comma-dangle': ['error', 'always-multiline'],
'function-paren-newline': 0,
'object-curly-newline': 0,
'no-restricted-globals': 0,
},
}
};
if (process.env.RUN_ENV === 'DEMO') {
@@ -52,18 +46,11 @@ if (process.env.RUN_ENV === 'DEMO') {
};
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,
'react/prefer-es6-class': 0,
});
}

View File

@@ -1,13 +1,56 @@
# Contributing to Ant Design
Want to contribute to Ant Design? There are a few things you need to know.
The following is a set of guidelines for contributing to Ant Design. Please spend several minutes in reading these guidelines before you create an issue or pull request.
We wrote a **[contribution guide](https://ant.design/docs/react/contributing)** to help you get started.
Anyway, these are just guidelines, not rules, use your best judgment and feel free to propose changes to this document in a pull request.
---
# 参与共建
## Do your homework before asking a question
想要给 Ant Design 贡献自己的一份力量?
It's a great idea to read Eric Steven Raymond's [How To Ask Questions The Smart Way](http://www.catb.org/esr/faqs/smart-questions.html) twice before asking a question. But if you are busy now, I recommend to read [Don't post homework questions](http://www.catb.org/esr/faqs/smart-questions.html#homework) first.
我们写了一份 **[贡献指南](https://ant.design/docs/react/contributing-cn)** 来帮助你开始。
The following guidelines are about *How to avoid Homework Questions*.
### 1. Read the documentation.
It sad but true that someone just glance(not read) [Ant Design's documentation](http://ant.design/). Please read the documentation closely. What's more, you can modify and run our demo with [CodePen](http://codepen.io/anon/pen/wGOWGW?editors=001). It's helpful to understand our documentation.
Tips: choose the corresponding documentation with versions selector which in the bottom-right corner.
### 2. Make sure that your question is about Ant Design, not React
Someone may think all of the questions that he/she meets in developing are about Ant Design, but it's not true. So, please read [React's documentaion](http://facebook.github.io/react/docs/getting-started.html) or just Google(not Baidu, seriously) your questions with keywork *React* first. If you are sure that your question is about Ant Design, go ahead.
### 3. Read the FAQ and search the issues list of Ant Design
Your questions may be asked and solved by others. So please spend several minutes on searching. Remember [DRY](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself), both code and questions.
P.S.
1. [FAQ](https://github.com/ant-design/ant-design/wiki/FAQ)
1. [Issues list](https://github.com/ant-design/ant-design/issues)
## Close your issue if it's solved
It is a good habit which will save maintainers' time. Thank you!
## Providing a demo while reporting a bug
It would be helpful to provide a demo which can re-produce the bug 100%. Please fork this [CodePen](http://codepen.io/anon/pen/wGOWGW?editors=001) and re-produce the bug you met. Then, create an issue. The most important thing is: double check before claiming that you have found a bug.
## Tips about Feature Request
If you believe that Ant Design should provide some features, but it does not. You could create an issue to discuss. However, Ant Design is not Swiss Army Knife, there are some features which Ant Design will not support:
1. Request or operate data
## Tips about Pull Request
It's welcomed to pull request. And there are some tips about that:
1. It is a good habit to create a feature request issue to disscuss whether the feature is necessary before you implement it. However, it's unnecessary to create an issue to claim that you found a typo or improved the readability of documentaion, just create a pull request.
1. Run `npm run lint` and fix those errors before committing in order to keep consistent code style.
1. Rebase before creating a PR to keep commit history clear.
1. Add some descriptions and refer relative issues for you PR.

View File

@@ -1,15 +1,53 @@
<!--
IMPORTANT: Please use the following link to create a new issue:
If you want to ask a question, please read [some tips](https://github.com/ant-design/ant-design/blob/master/.github/CONTRIBUTING.md#do-your-homework-before-asking-a-question) first :-)
http://new-issue.ant.design
If you are going to report a bug, please answer the following questions, thank you!
If your issue was not created using the app above, it will be closed immediately.
-->
## What you did
<!--
注意:请使用下面的链接来新建 issue
(e.g. I ate a hamburger)
http://new-issue.ant.design
## What you would like to happen
不是用上面的链接创建的 issue 会被立即关闭。
-->
(e.g. I should be full)
## What actually happened
(e.g. But I am still hungry now T_T)
## Online demo
(e.g. http://codepen.io/anon/pen/wGOWGW?editors=001)
## Environment Information
- The version of antd(e.g. 0.12.0):
- Your operating system and it's version(e.g. OSX 10.11.0):
- Your browser and it's version(e.g. Chrome 48.0.0.0(64-bit)):
---
提问之前,建议先阅读[这份提示](https://github.com/ant-design/ant-design/blob/master/.github/CONTRIBUTING.md#do-your-homework-before-asking-a-question)。:-)
如果是报告 bug请按照下列格式编辑问题务必提供复现步骤否则恕难解决非常感谢
## 你做了什么?
(例如,我吃了一个汉堡)
## 你期待的结果是:
(例如,我应该饱了)
## 实际上的结果和抱怨:
(例如,我还是饿的,肯定是哪里出问题了)
## 可重现的在线演示
(e.g. http://codepen.io/anon/pen/wGOWGW?editors=001)
## 本地环境信息
- antd 版本:
- 操作系统及其版本:
- 浏览器及其版本:

View File

@@ -1,22 +1,8 @@
First of all, thank you for your contribution! :-)
First of all, thanks for your contribution! :-)
Please makes sure that these checkboxes are checked before submitting your PR, thank you!
Please makes sure these boxes are checked before submitting your PR, thank you!
* [ ] Make sure that you propose PR to right branch: bugfix for `master`, feature for latest active branch `feature-x.x`.
* [ ] Make sure that you follow antd's [code convention](https://github.com/ant-design/ant-design/wiki/Code-convention-for-antd).
* [ ] Make sure you follow antd's [code convention](https://github.com/ant-design/ant-design/wiki/Code-convention-for-antd).
* [ ] Run `npm run lint` and fix those errors before submitting in order to keep consistent code style.
* [ ] Rebase before creating a PR to keep commit history clear.
* [ ] Add some descriptions and refer relative issues for you PR.
Extra checklist:
**if** *isBugFix* **:**
* [ ] Make sure that you add at least one unit test for the bug which you had fixed.
**elif** *isNewFeature* **:**
* [ ] Update API docs for the component.
* [ ] Update/Add demo to demonstrate new feature.
* [ ] Update TypeScript definition for the component.
* [ ] Add unit tests for the feature.

14
.github/lock.yml vendored
View File

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

13
.gitignore vendored
View File

@@ -15,8 +15,6 @@ Thumbs.db
*.swp
*.swo
*.log
*.log.*
*.json.gzip
node_modules/
.buildpath
.settings
@@ -26,15 +24,6 @@ _site
_data
dist
/lib
/es
elasticsearch-*
config/base.yaml
/.vscode/
/coverage
yarn.lock
package-lock.json
components/**/*.js
components/**/*.jsx
!components/**/__tests__/*.js
!components/**/__tests__/*.js.snap
/.history
typings

View File

@@ -1,51 +0,0 @@
const libDir = process.env.LIB_DIR;
const transformIgnorePatterns = [
'/dist/',
'node_modules\/[^/]+?\/(?!(es|node_modules)\/)', // Ignore modules without es dir
];
module.exports = {
setupFiles: [
'./tests/setup.js',
],
moduleFileExtensions: [
'ts',
'tsx',
'js',
'jsx',
'json',
'md',
],
modulePathIgnorePatterns: [
'/_site/',
],
testPathIgnorePatterns: [
'/node_modules/',
'dekko',
'node',
],
transform: {
'\\.tsx?$': './node_modules/antd-tools/lib/jest/codePreprocessor',
'\\.js$': './node_modules/antd-tools/lib/jest/codePreprocessor',
'\\.md$': './node_modules/antd-tools/lib/jest/demoPreprocessor',
},
testRegex: libDir === 'dist' ? 'demo\\.test\\.js$' : '.*\\.test\\.js$',
collectCoverageFrom: [
'components/**/*.{ts,tsx}',
'!components/*/style/index.tsx',
'!components/style/index.tsx',
'!components/*/locale/index.tsx',
'!components/*/__tests__/**/type.tsx',
'!components/**/*/interface.{ts,tsx}',
],
transformIgnorePatterns,
snapshotSerializers: [
'enzyme-to-json/serializer',
],
globals: {
'ts-jest': {
tsConfigFile: './tsconfig.test.json',
}
},
};

View File

@@ -1,26 +0,0 @@
module.exports = {
setupFiles: [
'./tests/setup.js',
],
moduleFileExtensions: [
'ts',
'tsx',
'js',
'md',
],
transform: {
'\\.tsx?$': './node_modules/antd-tools/lib/jest/codePreprocessor',
'\\.js$': './node_modules/antd-tools/lib/jest/codePreprocessor',
'\\.md$': './node_modules/antd-tools/lib/jest/demoPreprocessor',
},
testRegex: 'demo\\.test\\.js$',
testEnvironment: 'node',
snapshotSerializers: [
'enzyme-to-json/serializer'
],
globals: {
'ts-jest': {
tsConfigFile: './tsconfig.test.json',
}
},
};

19
.lesshintrc Normal file
View File

@@ -0,0 +1,19 @@
{
"propertyOrdering": false,
"hexLength": "short",
"stringQuotes": false,
"decimalZero": false,
"importantRule": false,
"zeroUnit": "no_unit",
"qualifyingElement": false,
"duplicateProperty": false,
"importPath": false,
"finalNewline": false,
"excludedFiles": [
"components/layout/style/mixin.less",
"components/style/core/base.less",
"components/style/core/iconfont.less",
"components/style/core/normalize.less",
"components/style/mixins/compatibility.less"
]
}

View File

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

View File

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

View File

@@ -1,456 +1,76 @@
778758944 <778758944@qq.com>
Aaron Planell López <aaronplanell@gmail.com>
Adrian Dimitrov <dimitrov.adrian@gmail.com>
Albert Zheng <lisong.zheng@gmail.com>
Albert 理斯特 <shuaizhexu@gmail.com>
Aleck Landgraf <aleck.landgraf@gmail.com>
Alexander <labriko@yandex.ru>
Alexander Suevalov <suevalov.work@gmail.com>
Alexandre Kirszenberg <a.kirszenberg@gmail.com>
Amorites <751809522@qq.com>
Anas Tawfeek <anas.tawfeek@outlook.com>
Andrew Murray <radarhere@gmail.com>
Andrey G <plandem@gmail.com>
Arnab Sen <arnabsen@gmail.com>
Arthur Denner Oliveira Santos <arthurdenner7@gmail.com>
Arvin Xu <arvinx@foxmail.com>
BK Heleth <bon.hoo@hotmail.com>
Babajide Fowotade <jide.b.tade@gmail.com>
Bartek <bartek.kozera@gmail.com>
Benjamin Kniffler <bkniffler@me.com>
Benjy Cui <benjytrys@gmail.com>
Bernie <bernie.wangbj@gmail.com>
Bilal Sirazitdinov <bilalsir@yandex.ru>
Bill Sheikh <bilawals22@gmail.com>
Bo Chen <bochen2014@yahoo.com>
Bozhao <yubz86@gmail.com>
Brett Lamy <bel423@me.com>
Brook Shi <iwxiaot@gmail.com>
Bruce Mitchener <bruce.mitchener@gmail.com>
Bruno Maia <bruno.mm.maia@gmail.com>
Bryan Berger <bb@ga.co>
C <4019980@qq.com>
Cam Song <neosoyn@gmail.com>
Camol <kwwnjujlc@sina.com>
Canwen Xu <canwenxu@126.com>
Catalin Miron <mironcatalin@gmail.com>
Cee Cirno <i@cee.moe>
Chang Wang <cheapsteak@gmail.com>
Chikara Chan <chenhongtu@51xianqu.net>
Chris Kelly <cjke.7777@gmail.com>
ChrisFan <chris.fan.dev@gmail.com>
Christopher Deutsch <cd@cdeutsch.com>
Chuang Yu <cyu9960@gmail.com>
Claudio Restifo <claudio.restifo@gmail.com>
Cody Chan <int64ago@gmail.com>
Colton Pierson <colton@coltonpierson.com>
Confiks <confiks@scriptbase.org>
Conway Anderson <hello@conwayanderson.com>
Cordaro <elvis07@163.com>
D & R <jdz321@qq.com>
Damian Green <damian.green@microlease.com>
Dan Minshew <ofenixculpa@gmail.com>
Dane David <dndavid102@gmail.com>
Danny Hoower Antonio Viasus Avila <danjavia@gmail.com>
Daqi Song <dqaria@gmail.com>
Darren Poon <dyhpoon@gmail.com>
David Schneider <davschne@gmail.com>
DengYun <tdzl2003@gmail.com>
Dimitri Mitropoulos <dimitrimitropoulos@gmail.com>
Dmitry Bolotin <bolotin.dmitriy@gmail.com>
Dorian <dorian@doma.io>
DosLin <doslino@gmail.com>
EcmaProSrc.P/ka <asoiso@foxmail.com>
Edd Hannay <accounts@edd.fm>
Eddie Xie <oeddyo@gmail.com>
Eden Wang <Eden.Wang@Akmii.com>
Eden Wang <yociduo@vip.qq.com>
Egor Yurtaev <yurtaev.egor@gmail.com>
Eli White <github@eli-white.com>
Emma <sima.zhang1990@gmail.com>
Eric <84263800@qq.com>
Erwann Mest <m+github@kud.io>
Evgeny Kuznetsov <jackk@ya.ru>
Eward Song <eward.song@gmail.com>
Flynn <li.fulin@foxmail.com>
For177 <mengqiang.q@gmail.com>
Geoff Holden <geoff@brightloudnoise.com>
George Gray <george@ummodesign.com>
Graeme Yeates <gyeates@clearpath.ai>
Graeme Yeates <yeatesgraeme@gmail.com>
Gray Choi <gray.choi.1988@gmail.com>
Guan Hao <raptium@gmail.com>
Guan Yu Pan (Jacky) <jackypan1989@gmail.com>
HJin.me <hjin.me@gmail.com>
Hai Phan Nguyen <pnghai@gmail.com>
Haibin Yu <haibin.yu@oceanwing.com>
Hanai <ihanai1991@gmail.com>
Haroen Viaene <fingebimus@me.com>
Harshit Mehrotra <harshitmehrotra@hotmail.com>
Henri Normak <henri.normak@gmail.com>
Hubert Argasinski <argasinski.hubert@gmail.com>
Hughen <446370503@163.com>
Hugo LEHMANN <shogi31@gmail.com>
Igor G <i.gaidai4uk@gmail.com>
ImJoeHs <865439601@qq.com>
Inclined.Z <zjq0717@163.com>
Infinity <305870677@qq.com>
Ivan Kravets <me@ikravets.com>
Ivo Stratev <ivo.stratev.tues@gmail.com>
JaePil Jung <jjp5023@gmail.com>
James <james@schoolshape.com>
Jeffrey Carl Faden <jeffreyatw@gmail.com>
Jerry Bendy <jerry@icewingcc.com>
Jesper We <jesper@journeyman.se>
Jiabin Peng <png.inside@gmail.com>
Jialei <jialeicui@126.com>
Jieraaa <842533841@qq.com>
Jing Ma <mjingm87@qq.com>
Joe <qiaolibo@126.com>
Joe Hsu <jhsu.x1@gmail.com>
John Johnson III <john@johnjohnson.cc>
John Nguyen <jtnguyen236@gmail.com>
Jonatas Walker <jonataswalker@gmail.com>
Jonny Buchanan <jonathan.buchanan@gmail.com>
Jordan Hornblow <jordan@jch254.com>
Josué <ujosuegt@outlook.com>
Juan Rodrigo Venegas Boesch <jrvboesch@gmail.com>
Junyu Zhan <irrigator@yeah.net>
Kaien Liao <liaokaien@gmail.com>
Kenaniah Cerny <kenaniah@gmail.com>
Kenneth Truong <kenneth.e.truong@gmail.com>
Kevin Ivan <info@kevinivan.com>
KgTong <kgtong1992@gmail.com>
Khalifa Lame <khalibloo@gmail.com>
Kiho · Cham <monkindey@163.com>
Kimmo Saari <kimmo.saari@revolt.fi>
Kirill Stiopin <kirill.stiopin@hotmail.com>
Knacktus <knacktus@gmail.com>
Kyle Kelley <rgbkrk@gmail.com>
Kyle Rosenberg <kyle.rosenberg@gmail.com>
Larry Laski <larry.laski@gmail.com>
LeeHarlan <709886167@qq.com>
LeezQ <lizhenq2009@gmail.com>
Leo <clinyong@gmail.com>
Leon Shi <superRaytin@163.com>
Leon Shi <superRaytin@gmail.com>
Liu Yang <zation1@gmail.com>
LongYinan <lynweklm@gmail.com>
Lyndon001 <lld207@126.com>
MG12 <wuzhao.mail@gmail.com>
Ma Tianxiao <matx2215@outlook.com>
Madis Väin <madisvain@gmail.com>
Manjit Kumar <manjit1727@gmail.com>
Manweill <mic.liangwenwei@foxmail.com>
Marco Afonso <mafonso333@gmail.com>
Marcus Bransbury <marcus.bransbury@gmail.com>
Marius Ileana <visvadw@gmail.com>
Mars Wong <marswong618@gmail.com>
Marshall Chen <Juniors.fei@gmail.com>
Martin Litvaj <kamahl19@gmail.com>
Martin Novák <martinnovak@outlook.com>
Mathew <khayaanimations@gmail.com>
Maximilian Meyer <Maximilian.Meyer@br.de>
Meck <yesmeck@gmail.com>
MeiLin <postget.me@gmail.com>
Meow-z <372086270@qq.com>
Miaow <i@zfeng.net>
Michalis Macheras <diodosier@gmail.com>
Min <dicklwm@163.com>
MinJeong Kim <min7859@gmail.com>
Minqi Pan <pmq2001@gmail.com>
Minsung Ryu <ryums0227@gmail.com>
Mitchell Demler <mitchell.demler@harcourts.net>
Mohamed Seada <mohamed.seada.1994@gmail.com>
Mr.Tone <vector@malubei.com>
MuYu <mr.muzea@gmail.com>
Mário Gonçalves <mario.mc.goncalves@gmail.com>
Nathan Griffin <nathan@gatherhere.com>
Nathan Tavares Nascimento <nathan.tnascimento@gmail.com>
Nathan Wells <nwwells@gmail.com>
Neekey <ni184775761@gmail.com>
Nekron <nekron.hyt@gmail.com>
Neverland <chenjiahan@buaa.edu.cn>
Nico <nicolas@freddelacompta.com>
Nidhi Agarwal <nidhi.agarwal@zomato.com>
Nimo <nimo.jser@gmail.com>
Nishant Arora <na.nishantarora@gmail.com>
Nokecy <Nokecy@163.com>
OAwan <georgio.wan@gmail.com>
Oleksandr Kovalchuk <me.olexandr.kovalchuk@gmail.com>
OuYancey <ou.yancey@gmail.com>
Panjie Setiawan Wicaksono <panjie@panjiesw.com>
Patrick Gidich <patrick.gidich@simnova.com>
Patryk <longer44@gmail.com>
Peter <usstpeter@gmail.com>
Peter Berg <atticusberg@gmail.com>
Pierre <pierre@bazoge.com>
Pierre Neter <pierreneter@gmail.com>
Piper Chester <piperchester@gmail.com>
Pixy Yuan <pixy.bupt@gmail.com>
Pyiner <lijiuyang1992@gmail.com>
Pyroboomka <qwaarty@mail.ru>
Qiaosen Huang <joesonw@gmail.com>
Qingrong Ke <keqingrong1992@gmail.com>
Rafael Cosman <rafaelcosman@alumni.stanford.edu>
Ramsés Moreno <ramses@cuatromedios.com>
Randy <randypriv@gmail.com>
RaoHai <surgesoft@gmail.com>
Reed Sun <superreedsun@gmail.com>
Rex <zhangzilong.zzl@163.com>
Ricardo Raphael Joson <rrjoson08@gmail.com>
Richard D. Worth <rdworth@gmail.com>
Robert Wilkinson <wilkinson.robert.a@gmail.com>
Rohan Malhotra <rohan.root@gmail.com>
Rrrandom <emanonhere@gmail.com>
SHEN Lin <shenlin192@gmail.com>
Sakol Assawasagool <koobitor@gmail.com>
Sam Chen <chenxsan@gmail.com>
Sam Maxwell <sam@paybase.io>
Sangle <whb97@163.com>
Sanjay Kumar <kris.gooner@gmail.com>
Sanjay Kumar <sk@tectusdreamlab.com>
Sean Lin <sean@ejoy.com>
Sean Sun <pinggodstudio@gmail.com>
Sebastian Blade <blade254353074@hotmail.com>
Sergio Crisostomo <sergiosbox@gmail.com>
Shawn Sit <xueqingxiao@gmail.com>
ShiTengFei <shitengfei@goyoo.com>
Shubham Kanodia <shubhamsizzles@gmail.com>
SimaQ <sima.zhang1990@gmail.com>
Spencer <spjy@hawaii.edu>
Stephen Esser <Stephen.Esser@gmail.com>
Tao <magicdawn@qq.com>
Tao Zhang <windse7en@gmail.com>
Taylor Sabell <taylorsabell@gmail.com>
Tengjiao Cai <caitengjiao1987@gmail.com>
Terence <trence320@163.com>
The Rock <zhoguoxin@126.com>
Tino D <ginodeis@gmail.com>
Tom Gao <tom@zoomsoft.cc>
Trotyl Yu <trotyl@qq.com>
Troy Thompson <troynt@gmail.com>
Tyler <chaotyler@gmail.com>
Ubaldo Quintana <blkdr@hotmail.com>
Vadim Macagon <vadim.macagon@gmail.com>
Valentin Vichnal <valentin@vichnal.com>
Vemund Santi <vemund@santi.no>
Vic <709147950@qq.com>
Vincent Zhang <vxzhong@qq.com>
ViviaRui <zr1450995198@163.com>
Walter Barbagallo <turbometalskater@gmail.com>
Wang Jun <amos.callmexyz@gmail.com>
Warren Seymour <warren@fountainhead.tech>
Wei Zhu <yesmeck@gmail.com>
Wenchao Hu <zjuhwc@gmail.com>
Will Chen <willchen90@gmail.com>
WingGao <wing.gao@live.com>
Wu Haotian <whtsky@gmail.com>
XBTop1! <xbtop1@gmail.com>
Xie Guanglei <xieguanglei@hotmail.com>
XuMM_12 <owiatsq@sina.cn>
Yang Bin <yangkghjh@gmail.com>
Yasin Uslu <nepjua@gmail.com>
Yiming <ymjrcc@qq.com>
Yogesh <yogeshkumar180592@gmail.com>
YuChao Liang <l.yuch@foxmail.com>
Yunus EŞ <yunus@yunuses.com>
Yury Kozyrev <urakozz@me.com>
Yusuke Ito <novi.mad@gmail.com>
Yuwei Ba <i@xiaoba.me>
YuyingWu <wuyuying1128@gmail.com>
Zack Craig <zack@zack6849.com>
Zap <a124116186@qq.com>
Zhang Zhi <fytriht@gmail.com>
Zheeeng <hi@zheeeng.me>
Ziluo <gyfzzu@gmail.com>
afc163 <afc163@gmail.com>
ahalimkara <ahalimkara@gmail.com>
ascoders <576625322@qq.com>
ashishg-qburst <ashishg@qburst.com>
bang <sqibang@gmail.com>
bang88 <sqibang@gmail.com>
blankzust <450811238@qq.com>
byuanama <byuan@ama.com.au>
bzone <yarnbcoder@gmail.com>
caoyi <caoyi0905@mail.hfut.edu.cn>
cathayandy <wzm_andy@126.com>
chaofeis <408067385@qq.com>
chchen <cc272309126@gmail.com>
chencheng (云谦) <sorrycc@gmail.com>
chencheng <sorrycc@gmail.com>
cjahv <cjahv@qq.com>
clinyong <clinyong@gmail.com>
corneyl <cornieljoosse@gmail.com>
ddcat1115 <ddcat1115@gmail.com>
delesseps <andrewlessels@gmail.com>
denzw <denzw@21cn.com>
detailyang <detailyang@gmail.com>
devqin <devqin@gmail.com>
djorkaeff <djorkae55@gmail.com>
duzliang <duzliang@gmail.com>
ecofe <150641329@qq.com>
edgji <j.edgji@gmail.com>
elios <elios264@hotmail.com>
elrrrrrrr <elrrrrrrr@gmail.com>
ezpub <ez.foro@gmail.com>
feng zhi hao <fzhihao@outlook.com>
fengmk2 <m@fengmk2.com>
flashback313 <windmark2012@gmail.com>
genie <genie88@163.com>
gregahren <grega.hren@gmail.com>
handycode <lihandi@gmail.com>
hansnow <hansnow2012@gmail.com>
haoxin <coderhaoxin@outlook.com>
hardfist <yangjianzju@gmail.com>
hauwa123 <hauwa.aminu@outlook.com>
henryv0 <henryvo94@gmail.com>
hi-caicai <hi@cai-cai.me>
huzzbuzz <huzzbuzz@outlook.com>
iamcastelli <sowed@cyberdude.com>
imosapatryk <imosa.patryk@gmail.com>
infeng <fzhihao@outlook.com>
int2d <int2d@qq.com>
ioldfish <fish.wangl@gmail.com>
jasonslyvia <jasonslyvia@gmail.com>
jasonxia23 <xia.jason23@gmail.com>
jiang <155259966@qq.com>
jim <wasd2144@hotmail.com>
jinouwuque <ee2win@gmail.com>
junjing.zhang <zhangjunjing@gmail.com>
kacjay <45483388@qq.com>
kagawagao <kingsongao1221@gmail.com>
kaifei <150641329@qq.com>
kasinooya <kasinooya@gmail.com>
kayw <kayw@outlook.com>
kdenz <ksnz93@gmail.com>
kdepp <kdepp.cd@gmail.com>
keng <keng@renderinghouse.com>
keqingrong <keqingrong1992@gmail.com>
ko <git@yaksok.net>
konakona <lovekonakona@gmail.com>
kossel <lis.yichao@gmail.com>
kuang <p2227@hotmail.com>
kun sam <kunsam624@icloud.com>
leadream <857098475@qq.com>
lehug <zcszuo5811@126.com>
leon.shi <superRaytin@163.com>
lgmcolin <gengmin.lgm@gmail.com>
lgmcolin <lgmcolin@gmail.com>
liangfei <njliangfei@gmail.com>
liekkas <zjq0717@163.com>
lihqi <455711093@qq.com>
lixiaochou077 <qi.liqi07@gmail.com>
lixiaoyang <lixiaoyang2345@gmail.com>
lixiaoyang1992 <lixiaoyang2345@gmail.com>
lizhaocai <lzc09008@gmail.com>
lizhen <lizhen@youzan.com>
loganpowell <loganp@tepper.cmu.edu>
luyiming <luyimingchn@gmail.com>
lvren <luren6049@qq.com>
mArker <252133226@qq.com>
memoryza <jincai.wang@foxmail.com>
mgrdevport <mgrdevport@gmail.com>
mitchell.demler <mitchell.demler@harcourts.net>
mkermani144 <mkermani144@gmail.com>
monkindey <monkindey@163.com>
muzuiget <muzuiget@gmail.com>
natergj <nater_nater@me.com>
neekey <ni184775761@gmail.com>
niko <644506165@qq.com>
nikogu <644506165@qq.com>
paranoidjk <hust2012jiangkai@gmail.com>
parlop <parlop@gmail.com>
pd4d10 <pd4d10@gmail.com>
peiming <hyrijk@gmail.com>
pinggod <pinggodstudio@gmail.com>
pizn <pizner@gmail.com>
plandem <plandem@gmail.com>
popomore <sakura9515@gmail.com>
qubaoming <qubaoming@didichuxing.com>
ravirambles <ravirambles@gmail.com>
ryangun <ryangun@foxmail.com>
ryanhoho <hswacoal@gmail.com>
sadmark <zhoubin@laidian360.com>
sallen450 <jqh101@sina.com>
shelwin <wxfans@gmail.com>
shenlin192@gmail.com <shenlin192@gmail.com>
shlice <licesh@gmail.com>
shouyong <enlangs@163.com>
simaQ <sima.zhang1990@gmail.com>
slientcloud <rjmuqiang@gmail.com>
snadn <snadn@snadn.cn>
sojournerc <cmeyer@zvelo.com>
sorrycc <sorrycc@gmail.com>
swindme <swindme@163.com>
syssam <s.y.s.sam.sys@gmail.com>
thegatheringstorm <tgs@tgs.blue>
tianli.zhao <275287902@qq.com>
tom <caolvchong@gmail.com>
twobin <twobin@live.com>
u3u <qwq@qwq.cat>
ustccjw <317713370@qq.com>
valleykid <valleykiddy@gmail.com>
vgeyi <vgeyiz@126.com>
wangtao0101 <yuecjn@gmail.com>
wangxiaolei <fatelei@gmail.com>
warmhug <hualei5280@gmail.com>
whtang906 <whtang906@gmail.com>
wizawu <wizawu@gmail.com>
wonyun <wy393767068@163.com>
xiaofan2406 <xiaofan2406@gmail.com>
yangwukang <yangwukang@boco.com.cn>
yeliex <yeliex@yeliex.com>
yiminghe <yiminghe@gmail.com>
yociduo <yociduo@vip.qq.com>
yubozhao <yubz86@gmail.com>
yuche <i@yuche.me>
z <haig8@msn.com>
zack <zxyah@126.com>
zerob4wl <zerob4wl@gmail.com>
zhangpc <zhangpc@tenxcloud.com>
zhaocai <lzc09008@gmail.com>
zhujun24 <zhujun87654321@gmail.com>
zhuyue <fuping.dfp@antfin.com>
zilong <jzlxiaohei@163.com>
zinkey <yaya@uloveit.com.cn>
zollero <corona7@163.com>
zombiej <smith3816@gmail.com>
zuiidea <zuiiidea@gmail.com>
邦 <sqibang@gmail.com>
爱but的苍蝇 <354788473@qq.com>
拷钉 <41830859@qq.com>
竹尔 <Juelchiang@gmail.com>
偏右 <afc163@gmail.com>
英布 <chaoren1641@gmail.com>
朮厃 <cn.ah.liu@gmail.com>
诸岳 <dengfuping_develop@163.com>
逸达 <dqaria@gmail.com>
蔡伦 <sliuqin@gmail.com>
陆离 <surgesoft@gmail.com>
愚道 <tingzhao.ytz@antfin.com>
陈帅 <wasd2144@hotmail.com>
松子 <window.pibarr@gmail.com>
可乐 <zaxlct@foxmail.com>
山客 <zeakhold@gmail.com>
曾凯 <zengkai2009@foxmail.com>
低位 <zhujun87654321@gmail.com>
广彬-梁 <326741518@qq.com>
徐坤龙 <272992168@qq.com>
黄子毅 <576625322@qq.com>
翁润雨 <593110501@qq.com>
崔宏森 <948346354@qq.com>
闲耘™ <hotoo.cn@gmail.com>
一喵呜 <hyb628@gmail.com>
吕立青 <jimmy.jinglv@gmail.com>
隋鑫磊 <joshuasui@gmail.com>
乔奕轩 <qiao_yixuan@163.com>
马斯特 <sd4399340@126.com>
王集鹄 <wjhu111@21cn.com>
柚子男 <yozman@sina.com>
愚指导 <yutingzhao1991@sina.com>
愚指导-TZ <yutingzhao1991@sina.com>
超能刚哥 <margox@foxmail.com>
马金花儿 <o.o@mug.dog>
रोहन मल्होत्रा <rohan.malhotra@adwyze.com>
偏右 <afc163@gmail.com>
白羊座小葛 <abeyuhang@gmail.com>
逸达 <dqaria@gmail.com>
闲耘™ <hotoo.cn@gmail.com>

View File

@@ -1,774 +0,0 @@
---
order: 6
title: Change Log
toc: false
timeline: true
---
`antd` strictly follows [Semantic Versioning 2.0.0](http://semver.org/).
#### Release Schedule
* Weekly release: patch version at the end of every week for routine bugfix (anytime for urgent bugfix).
* Monthly release: minor version at the end of every month for new features.
* Major version release is not included in this schedule for breaking change and new features.
---
## 3.7.0
3.7.0 is a heavy update that brings a lot of exciting changes and new features.
Here are some highlights ✨:
- 🌟 Add drawer component : [Drawer](https://ant.design/components/drawer-cn/). [#10791](https://github.com/ant-design/ant-design/pull/10791)
- 🌟 Horizontal menu automatically collapses when there is no enough space. [#11234](https://github.com/ant-design/ant-design/pull/11234)
![demo](https://user-images.githubusercontent.com/1731837/42550555-0fef7878-8505-11e8-9d2f-f708fec66b44.gif)
- 🌟 Add `Tree.DirectoryTree` component as the built-in directory tree. [#7749](https://github.com/ant-design/ant-design/issues/7749)
Component Fixes / Enhancements:
- Upgrade `rc-tree-select` to `2.0.5` for TreeSelect, refactored to fix the logic of the check.
- 🌟 Add `autoClearSearchValue` prop to clear the value of search input when multiple select is selected or deselected. [10996](https://github.com/ant-design/ant-design/issues/10996)
- 🌟 Add `searchValue` prop to set the value of search input. [6ff7dd8](https://github.com/ant-design/ant-design/commit/6ff7dd8fb953f079ee51ee638aaf4d832d0e10bf#diff-1e8e47abbdbe6e12d009aa61619ab22f)
- 🌟 Add `maxTagCount` prop to set the max count of visible tags. [fb96c9d](https://github.com/ant-design/ant-design/commit/fb96c9db351e44a202f64f780470c6319a8a9626)
- 🌟 Add `maxTagPlaceholder` prop to set the content when the tag is hidden. [fb96c9d](https://github.com/ant-design/ant-design/commit/fb96c9db351e44a202f64f780470c6319a8a9626)
- 🌟 Search input now supports case sensitive search. [#10990](https://github.com/ant-design/ant-design/issues/10990)
- 🗑 Remove `label` prop and use `title` prop instead in the `treeData`.
- Upgrade `rc-upload` to `2.5.0` for Upload.
- 🌟 Add `directory` prop to support folder uploading. [#7315](https://github.com/ant-design/ant-design/issues/7315)
- 🌟 `action` prop supports to be the a function which returns a Promise object. [fd96967](https://github.com/ant-design/ant-design/commit/fd96967c872600b79bb608e9ddf9f8c38814a704)
- Dropdown
- 🌟 Provide default margin for icon in the menu item. [8e60a59](https://github.com/ant-design/ant-design/commit/8e60a591fd24f644de4f67d69c2210e9270be9cc)
- 🌟 Be able to adjust the menu position for the trigger mode of `contextMenu` automatically. [16e4260](https://github.com/ant-design/ant-design/commit/16e42601d6772fc0830ee237a1e751a38a118676)
- Upgrade `rc-table` to `6.2.2` for Table. [f2fddff](https://github.com/ant-design/ant-design/commit/f2fddff3fd0d6b36e8e6d8ee06bfcbcc85ead4f0)
- 🌟 Add `expanded` as the fourth param of `expandedRowRender` prop to get the expanded state of current row. [#10379](https://github.com/ant-design/ant-design/issues/10379)
- 🌟 Add the ability to override the filter menu without the fully controlled component. [59cc3a8](https://github.com/ant-design/ant-design/commit/59cc3a8b6c643f7206feedf2dc2c7154296ba3e3) [@chrvadala](https://github.com/chrvadala)
- 🌟 `filterIcon` prop supports to be a render function which returns ReactNode. [1af4392](https://github.com/ant-design/ant-design/commit/1af4392ae9fbdaa6fcfbf2f0de5413100ef4a84a)
- 🐞 Fix the row dislocation problem when the column is fixed. [#10392](https://github.com/ant-design/ant-design/issues/10392)
- 🌟 Allow to pass `data-*`, `aria-*` and `role-*` props to the inner for Alert. [f0b684d](https://github.com/ant-design/ant-design/commit/f0b684de6a7c422f0de56e1ef72aeb35ab25a858)
- 🌟 Add `alt` prop for Avatar to set the text when the image is unable to display. [#10798](https://github.com/ant-design/ant-design/pull/10798)
- 🌟 Allow to pass `data-*`, `aria-*` and `role-*` props to the inner Input for DatePicker. [e63f9d4](https://github.com/ant-design/ant-design/commit/e63f9d4beb440de92c0b0ce8e6e83f7e24fef792)
- 🌟 Add `event` object as the second param of `onSearch` prop for Input.Search. [#11015](https://github.com/ant-design/ant-design/issues/11015)
- 🌟 Add `onBreakPoint` prop for Layout.Sider to be the callback function when breakpoint is triggered. [#10750](https://github.com/ant-design/ant-design/pull/10750) [@nuintun](https://github.com/nuintun)
- 🌟 Add `okButtonProps` prop to set the props of ok button and add `cancelButtonProps` prop to set the props of cancal button for Modal. [#10955](https://github.com/ant-design/ant-design/pull/10955) [@djyde](https://github.com/djyde)
- 🌟 Add `strokeColor` prop to set the color of progress bar for Progress. [#10725](https://github.com/ant-design/ant-design/issues/10725)
- 🌟 Add `buttonStyle` prop whose optional value is `outline` or `solid` to set the Radio.Group style. [60e3cfa](https://github.com/ant-design/ant-design/commit/60e3cfa37ac0dae3a895e74c1fe5351c54536a07#diff-c2ee8b5a368a121e9d2cc2661212045d)
- 🌟 Add `setDefaultIndicator` static function to set global indicator for Spin. [#10787](https://github.com/ant-design/ant-design/issues/10787)
- 🌟 Add `visible` prop to set the visibility for `Tag`. [4ac0277](https://github.com/ant-design/ant-design/commit/4ac027781372dda08a5458bc73836fbc14dfe51f)
- Upgrade `rc-tree` to `1.12.0` for Tree
- 🌟 Add `loadedKeys` prop to set the loaded nodes, which usually works with loadData prop. [#10666](https://github.com/ant-design/ant-design/issues/10666)
- 🌟 Add `onLoad` prop to be the callback function when all the nodes are loaded. [c488aca](https://github.com/ant-design/ant-design/commit/c488aca05e11d942d77c1b6bff45d12bbb1a2bd6)
- 🗑 Deprecate `combobox` value for `Select[mode]` and please replace it with `AutoComplete`. [53046a4](https://github.com/ant-design/ant-design/commit/53046a454ad83ca03dc313e63f56474ed1173002)
- 🐞 Cascader adds `fieldNames` and discards the misspelled `filedNames`. [#10896](https://github.com/ant-design/ant-design/issues/10896)
- 🐞 Fix Timeline dot not working with Tooltip. [0e3b67e](https://github.com/ant-design/ant-design/commit/0e3b67e9999d867cc304f3be61a8a042a2ab92ee)
- 🐞 Fix border radius when avatar has custom size. [e1e6523](https://github.com/ant-design/ant-design/commit/e1e6523452286ba56f20b73abad762a58ea7d7bc)
- 🌟 Add `okButtonDisabled` and `cancelButtonDisabled` props to disable ok button and cancel button. [#10955](https://github.com/ant-design/ant-design/pull/10955)
## 3.6.6
`2018-07-07`
- 🐞 Fix the style of the selected day for `DatePicker`. [#6146](https://github.com/ant-design/ant-design/issues/6146) [#9529](https://github.com/ant-design/ant-design/issues/9529)
- 🐞 Fix the style of the selected day for `DatePicker.RangePicker`. [004561b](https://github.com/ant-design/ant-design/commit/004561ba1f3b894dc164225e9e27b0a90679d15c)
- 🐞 Fix the alignment style wrapped by `Form.Item` for `Cascader`. [#9827](https://github.com/ant-design/ant-design/issues/9827) [#11133](https://github.com/ant-design/ant-design/issues/11133)
- 🐞 Fix the background style of the `handler` for `InputNumber`. [4aabc53](https://github.com/ant-design/ant-design/commit/4aabc5374497359e13a958ef81ae4569db6164a7)
- 🐞 Fix the header overflow in `FireFox` when the data is empty for `Table`. [#11135](https://github.com/ant-design/ant-design/issues/11135)
## 3.6.5
`2018-07-02`
- 🐞 Fixed wired `Transfer` repaint problem in IE or Edge. [#9697](https://github.com/ant-design/ant-design/issues/9697)
- 🐞 Fixed `Card` background overflow when zoom in chrome. [#9085](https://github.com/ant-design/ant-design/issues/9085)
- TypeScript
- 🐞 Fixed `Table` incompatible type `size`. [bf5b6ae1](https://github.com/ant-design/ant-design/commit/bf5b6ae1f3b5da4629a7d10a2d1764eaa3fbbb04)
- 🐞 Fixed `Select` missing showArrow option in types. [cde2a6b6](https://github.com/ant-design/ant-design/commit/cde2a6b6f011a5b3a367b3f58731def547bc98d8)
- 🐞 Add custom local support in `Pagination`. [babbbdd4](https://github.com/ant-design/ant-design/commit/babbbdd4e5c33ca050f8ee08969185c8d3269b4c)
- 🐞 Move max-width to ant-tooltip, so that it can be override by overlayStyle.maxWidth. [e2b359e9](https://github.com/ant-design/ant-design/commit/e2b359e9c3dae067eeba37a886f7896474c87e31)
- 🐞 Adjust `Select` mirror style to avoid to long string. [#11035](https://github.com/ant-design/ant-design/issues/11035)
## 3.6.4
`2018-06-23`
- 🐞 Fixed `Steps` theme `@process-icon-color`. [#10973](https://github.com/ant-design/ant-design/issues/10973)
- 🐞 Fixed style of RangePicker with preset ranges. [#10986](https://github.com/ant-design/ant-design/issues/10986)
- 🐞 Fixed `Dropdown` non-boolean attribute warning. [#7798](https://github.com/ant-design/ant-design/issues/7798)
- TypeScript
- 🌟 Add `Tree` prop `className` definition. [#10950](https://github.com/ant-design/ant-design/issues/10950)
- 🌟 Add `Tree` prop `selectable` definition. [3fb478e](https://github.com/ant-design/ant-design/commit/3fb478e743f3bad23dc300f501df11e5423468ba)
## 3.6.3
`2018-06-17`
- 🐞 Fixed that capitalized extension of Upload image url couldn't be recognaized. [#10928](https://github.com/ant-design/ant-design/pull/10928) [@sliwey](https://github.com/sliwey)
- 🐞 Fixed missing border of InputNumber when browser is zoomed in. [#10562](https://github.com/ant-design/ant-design/issues/10562)
- 🐞 Fixed that fixed element inside Spin cannot be fixed. [#10196](https://github.com/ant-design/ant-design/issues/10196)
- 🐞 Fixed broken border style of small table. [#9754](https://github.com/ant-design/ant-design/issues/9754)
- 🐞 Fixed missing `className` prop of Table's `filterIcon`. [#10937](https://github.com/ant-design/ant-design/issues/10937)
- 🐞 Fixed that Affix `offsetTop` and `offsetBottom` cannot be updated. [#10874](https://github.com/ant-design/ant-design/issues/10874)
- TypeScript
- 🐞 Fixed TreeSelect `TS2339` error. [#10868](https://github.com/ant-design/ant-design/issues/10868)
- 🌟 Added Form arguments definitions of `validateMessages` and `onFieldsChange`.
- 🌟 Improved Button prop definitions. [#10877](https://github.com/ant-design/ant-design/pull/10877) [@zheeeng](https://github.com/zheeeng)
- 🌟 Added `backfill` prop for AutoComplete. [#10909](https://github.com/ant-design/ant-design/pull/10909) [@zhanba](https://github.com/zhanba)
## 3.6.2
`2018-06-09`
- 🐞 Fix the wrong status of check all checkbox in Table when data change. [#10629](https://github.com/ant-design/ant-design/issues/10629)
- 🐞 Fix border style of Button.Group.
- 🐞 Fix file list being reversed when `beforeUpload` returns `false` in Upload component. [#10681](https://github.com/ant-design/ant-design/issues/10681)
- 🐞 Fix overflow of cell content in Calendar. [#10808](https://github.com/ant-design/ant-design/pull/10808) [@Yangzhedi](https://github.com/ant-design/Yangzhedi)
- 🐞 Fix the processing color of Badge not follows the `primary-color`.
- Spin
- 🐞 Fix custom icon does not follow the value of `size`. [#10786](https://github.com/ant-design/ant-design/issues/10786)
- 🐞 Fix no `delay` issue when sets `spinning` to `true` as default.[#10727](https://github.com/ant-design/ant-design/pull/10727) [@dreamerblue](https://github.com/dreamerblue)
- TypeScript
- 🐞 Fix Menu type definition. [#10773](https://github.com/ant-design/ant-design/issues/10773)
- 🐞 Fix AutoComplete type definition. [#10745](https://github.com/ant-design/ant-design/issues/10745) [#10619](https://github.com/ant-design/ant-design/issues/10619)
- 🐞 Fix Tree type definition. [#10841](https://github.com/ant-design/ant-design/pull/10841) [@Voronar](https://github.com/Voronar)
- 🐞 Fix Checkbox.Group definition. [#10677](https://github.com/ant-design/ant-design/pull/10677)
## 3.6.0
`2018-06-02`
* 🌟 `Form`'s error message now can be customized with ReactNode. [#10136](https://github.com/ant-design/ant-design/issues/10136) [@lovekonakona](https://github.com/lovekonakona)
* 🌟 `List` support customized configuration for position of pagination. [#10581](https://github.com/ant-design/ant-design/pull/10581) [@zheeeng](https://github.com/zheeeng)
* 🌟 `Layout.Sider` now can be configured with `light` or `dark` theme. [#10142](https://github.com/ant-design/ant-design/issues/10142) [@pd4d10](https://github.com/pd4d10)
* 🌟 Ant Design official site now supports offline mode. [#10625](https://github.com/ant-design/ant-design/issues/10625)
* 🌟 `Transfer` adding `style` and `operationStyle` props for further customization. [@eduludi](https://github.com/eduludi)
* 🌟 `Message` adds a promisfied interface to handle callback. [#10421](https://github.com/ant-design/ant-design/issues/10421) [@zhujinxuan](https://github.com/zhujinxuan)
* 🐞 Fix compilation issue with typescript@v2.9.1 . [#10729](https://github.com/ant-design/ant-design/issues/10729) [@karol-majewski](https://github.com/karol-majewski)
* 🐞 Fix a bug in `Menu` where outer menu item not highlighting while inner item is selected. [#8666](https://github.com/ant-design/ant-design/issues/8666) [@stonehank](https://github.com/stonehank)
* 🐞 Affix `offsetBottom` not working. [#10674](https://github.com/ant-design/ant-design/issues/10674)
## 3.5.4
`2018-05-26`
- 🐞 Fix `showSearch` on `Cascader` not working.[968488a2](https://github.com/ant-design/ant-design/commit/968488a2fac9bcb16bee9f0c248f49bca00dbec6)
- 🐞 `Badge[status]` support `Tooltip`.[#10626](https://github.com/ant-design/ant-design/issues/10626)
- 🐞 Fix `text-align` on parent element affects `Spin`.[#10643](https://github.com/ant-design/ant-design/pull/10643) [@wmzhong](https://github.com/wmzhong)
- 💄 `Table` break line style change from `break-all` to `break-word`.[#10655](https://github.com/ant-design/ant-design/pull/10655) [@clinyong](https://github.com/clinyong)
- 🌟 When `Search` not define `enterButton`, click search icon will trigger `onSearch`. [36ffe7e1](https://github.com/ant-design/ant-design/commit/36ffe7e1dc9d9473c8c68168ab79b7a03a604702)
## 3.5.3
`2018-05-20`
- 🐞 Fix `Affix` with offsetTop === 0, value becomes `undefined` problem [#10566](https://github.com/ant-design/ant-design/pull/10566)
- 🐞 Fixed issue with shaded `Input.Group` component shadows[#10230](https://github.com/ant-design/ant-design/issues/10230)
- 🐞 Fixed issue where the `Transfer` component checkbox event fired twice [#10480](https://github.com/ant-design/ant-design/issues/10480)
- 💄 Unifying the name of the variable [12d3046](https://github.com/ant-design/ant-design/commit/12d3046687a0dcdb51fece08dd2bea64f185cc40)
- 💄 Fine-tuned the style of `Dropdown` [8e2f72f](https://github.com/ant-design/ant-design/commit/8e2f72ffe0eb300f5997296726b02246bf990c8f)
- 💄 The components of the Chinese document will now be demonstrated using Chinese language packages. [9b17a94](https://github.com/ant-design/ant-design/commit/9b17a943f5d57d40d65041b7b0c247add09d2851)
- 💄 The main theme switch was changed to `antd-theme-generato`, thanks to the work of [@mzohaibqc](https://github.com/mzohaibqc).
- TypeScript
- 🐞 Fixed an issue with the type of gutter attribute in `Row` [b7d508e](https://github.com/ant-design/ant-design/commit/b7d508e1662bf20a0cacbe6440a2ce31a65a8a59)
- 💄 Improved the `Form` component type [#10564](https://github.com/ant-design/ant-design/pull/10564)
- 💄 Improved the `Button` and `Tag` types[1ed9fed](https://github.com/ant-design/ant-design/commit/1ed9fed2cf1c99b947359fafb101b2e58213cb48)
## 3.5.2
`2018-05-13`
- 🐞 Fixed `Table` filter doesn't work when click checkbox. [#10452](https://github.com/ant-design/ant-design/issues/10452)
- 🐞 Fixed `Cascader` displayRender z-index issue. [#10433](https://github.com/ant-design/ant-design/issues/10433)
- 🐞 Fixed `Button` Types of property 'ref' are incompatible. [#10405](https://github.com/ant-design/ant-design/issues/10405)
- 🐞 Fixed the height of `Form` item when checks position is dithered. [#10445](https://github.com/ant-design/ant-design/issues/10445)
- 🌟 Allow to use any CSS units for `Layout` width. [#10479](https://github.com/ant-design/ant-design/pull/10479)
## 3.5.1
`2018-05-09`
- 🐞 Fixed broken style of Input.Group under Form. [#10371](https://github.com/ant-design/ant-design/issues/10371)
- 🐞 Fixed overlay style of Select. [#10383](https://github.com/ant-design/ant-design/issues/10383)
- 🐞 Remove focused style of Collapse.
- 🐞 Remove unnecessary `z-index` of Input.Group and Checkbox. [#9840](https://github.com/ant-design/ant-design/issues/9840) [#10385](https://github.com/ant-design/ant-design/issues/10385)
- 🐞 Fixed that monospaced font family can't be bold.
- Table
- 💄 Rewrited the editable table demo. [#10119](https://github.com/ant-design/ant-design/pull/10119)
- 🐞 Fixed that table column overlay each other. [#9822](https://github.com/ant-design/ant-design/issues/9822)
- TypeScript
- 🐞 Fixed Breadcrumb.Item type. [#10372](https://github.com/ant-design/ant-design/pull/10372) [@karol-majewski](https://github.com/karol-majewski)
- 🐞 Fixed Table `rowSelection` type。[#10374](https://github.com/ant-design/ant-design/issues/10374)
## 3.5.0
`2018-05-04`
- 🌟 Add `title` prop to `Badge` that shows when hovering it. [74d81c2](https://github.com/ant-design/ant-design/commit/74d81c2d078a3c84b3e44cbfbdd99b8f479ea71d) [@ludwigbacklund](https://github.com/ludwigbacklund)
- 🌟 Add `successPercent` as `Progress[format]` argument. [#10096](https://github.com/ant-design/ant-design/issues/10096)
- 🌟 Update `rc-notification` to 3.1.0 so that `Notification` support set `maxCount`. [#10161](https://github.com/ant-design/ant-design/pull/10161) [@jzhangs](https://github.com/jzhangs)
- 🌟 Update `rc-cascader` to 1.13.0 so that `Cascader` support set `filedNames`. [react-component/cascader#23](https://github.com/react-component/cascader/pull/23) [@405go](https://github.com/405go)
- 🌟 Add ability to update `Notification` props by key. [react-component/notification#40](https://github.com/react-component/notification/pull/40) [@yevhen-hryhorevskyi](https://github.com/yevhen-hryhorevskyi)
- 🌟 `List` support pagination by default. [#10135](https://github.com/ant-design/ant-design/pull/10135)
- Table
- 🌟 Column `sorter` function is passed `sortOrder` as param. [#10306](https://github.com/ant-design/ant-design/pull/10306) [@kumarashwin](https://github.com/kumarashwin)
- 🐞 Fix merged header cell border. [#10359](https://github.com/ant-design/ant-design/issues/10359)
- 🐞 Fix lost of user selection on data updates. [#10332](https://github.com/ant-design/ant-design/pull/10332) [@chrvadala](https://github.com/chrvadala)
- Menu upgrade `rc-menu` to `7.x` [#10305](https://github.com/ant-design/ant-design/pull/10305)
- 🌟 Better aria-* attributes support. [react-component/menu#137](https://github.com/react-component/menu/pull/137)
- 🌟 Improve Menu performance by avoiding unnecessary updates. [react-component/menu#133](https://github.com/react-component/menu/pull/133)
- 🌟 Support passing props through to MenuItem list item. [react-component/menu#135](https://github.com/react-component/menu/pull/135)
- 🐞 Minor key shortcut bug fixes. [react-component/menu#132](https://github.com/react-component/menu/pull/132)
- Collapse
- 🌟 Support custom `Collapse` styles with less. [#9943](https://github.com/ant-design/ant-design/pull/9943) [@davidhatten](https://github.com/davidhatten)
- 🌟 Update `rc-collapse` to 1.9.0 to add `Collapse` keyboard support. [react-component/collapse#84](https://github.com/react-component/collapse/pull/84/) [@kossel](https://github.com/kossel)
- Select
- 🐞 Fix type for `placeholder`. [#10282](https://github.com/ant-design/ant-design/pull/10282) [@thomasthiebaud](https://github.com/thomasthiebaud)
- 🐞 Fix extra space taken up when arrow disabled. [#10296](https://github.com/ant-design/ant-design/pull/10296)
- 🐞 Fix property `value` typescript type. [#10336](https://github.com/ant-design/ant-design/pull/10336) [@paranoidjk](https://github.com/paranoidjk)
- Input
- 🐞 Fix `Input.Search` not disable enter button when disabled prop is true. [#10040](https://github.com/ant-design/ant-design/issues/10040)
- 🐞 Fix `Input.Group` align issue in Form. [#10281](https://github.com/ant-design/ant-design/issues/10281)
- Form
- 🐞 Fix typing for `Form.onValuesChange`. [#10231](https://github.com/ant-design/ant-design/pull/10231) [@whtsky](https://github.com/whtsky)
- 🐞 Fix typescript interface `ComponentDecorator`. [#10324](https://github.com/ant-design/ant-design/pull/10324) [@paranoidjk](https://github.com/paranoidjk)
- 🐞 Fix dashed `Divider`. [#10216](https://github.com/ant-design/ant-design/issues/10216)
- 🐞 Fix `Spin` container interaction. [#10227](https://github.com/ant-design/ant-design/issues/10227)
- 🐞 Fix `Notification` icon hover color. [#10272](https://github.com/ant-design/ant-design/issues/10272)
- 🐞 Fix `Upload` property `lastModifiedDate` name. [#10315](https://github.com/ant-design/ant-design/pull/10315) [@danielg2002](https://github.com/danielg2002)
- 🐞 Fix `Button` props type, use `React.HTMLProps`. [#10229](https://github.com/ant-design/ant-design/pull/10229) [@whtsky](https://github.com/whtsky)
- 🐞 Fix less var naming convention. [#10275](https://github.com/ant-design/ant-design/issues/10275)
## 3.4.5
`2018-05-03`
- 🐞 Fix file object is empty and file name not showing in Upload. [#10319](https://github.com/ant-design/ant-design/issues/10319)
## 3.4.4
`2018-04-28`
- 🐞 Fix that Upload file in`onChange({ file })` is not a File instance introduced in `3.4.2`. [#10293](https://github.com/ant-design/ant-design/issues/10293)
- 🐞 Fix style lose bug when use tree shaking in webpack@4. [#10217](https://github.com/ant-design/ant-design/pull/10217) [@whtsky](https://github.com/whtsky)
## 3.4.3
`2018-04-23`
- 🐞 Fix style lose bug when use tree shaking in webpack@4. [#10197](https://github.com/ant-design/ant-design/pull/10197) [@Aladdin-ADD](https://github.com/Aladdin-ADD)
- 🐞 Fix `Menu` item's clickable region in dark theme. [#10187](https://github.com/ant-design/ant-design/pull/10187) [@dgeibi ](https://github.com/dgeibi )
## 3.4.2
`2018-04-22`
- 💄 Deployed site by [netlify](http://netlify.com/) to avoid blocking by GFW.
- 🐞 Fix TypeScript definitions of Menu, Tooltip, Card, Anchor, Avatar, Form, Tabs, Transfer, Tree, AutoComplete and etc.
- 💄 Added `sideEffects` to `package.json` for better Tree-Shaking. [#10043](https://github.com/ant-design/ant-design/pull/10043) [@Aladdin-ADD](https://github.com/Aladdin-ADD)
- List
- 🐞 Fix extra border. [#10028](https://github.com/ant-design/ant-design/issues/10028)
- 🐞 Fix extra prop warning of `locale`. [#10128](https://github.com/ant-design/ant-design/pull/10128) [@slonoed](https://github.com/slonoed)
- 🐞 Fix wrong preview image of Upload list when file.url contains url params. [#10102](https://github.com/ant-design/ant-design/issues/10102)
- 🐞 Fix Progress when percent is out of range. [0eb8357](https://github.com/ant-design/ant-design/commit/0eb835772dbaa7ed14babe03fc177821c5bd5ca5)
- Menu
- 🐞 Fix arrow style of disabled SubMenu. [#10113](https://github.com/ant-design/ant-design/issues/10113)
- 🐞 Fix that menu width is wrong when `collapsedWidth` is assigned as px string like `40px`. [#10140](https://github.com/ant-design/ant-design/issues/10140)
- 🐞 Fix that sometimes controlled input in Form cannot be edited. [#9790](https://github.com/ant-design/ant-design/issues/9790)
- 🐞 Fix padding jumping issue of loading Card. [#10052](https://github.com/ant-design/ant-design/pull/10052) [@zheeeng](https://github.com/zheeeng)
- 🐞 Fix that Avatar's fallback text don't scale as the text avatar does. [#10184](https://github.com/ant-design/ant-design/pull/10184)
- 🐞 Fix Table `getCheckboxProps` cannot be updated as expected. [#10133](https://github.com/ant-design/ant-design/issues/10133)
- 🐞 Fix CheckboxGroup `prefixCls` prop not passed to Checkbox. [#9950](https://github.com/ant-design/ant-design/issues/9950)
## 3.4.1
`2018-04-08`
- 🐞 Fix TypeScript type error caused by code error of Badge. [#9931](https://github.com/ant-design/ant-design/issues/9931)
- 💄 Improve clicking region of Card `actions`. [#9882](https://github.com/ant-design/ant-design/issues/9882)
- 🐞 Fix Divider style issue when used with float elements. [#9956](https://github.com/ant-design/ant-design/issues/9956)
- 🐞 Fix style issue of Form in advanced-search mode. [#9907](https://github.com/ant-design/ant-design/issues/9907)
- 🐞 Add `onHeaderRow` TypeScript type definitions for Table. [#9902](https://github.com/ant-design/ant-design/pull/9902) [@Nokecy](https://github.com/Nokecy)
- 💄 Improve the customized-icon demo of Tree. [#9893](https://github.com/ant-design/ant-design/pull/9893)
- 🐞 Fix image url display with non-image extention in Upload. [#9936](https://github.com/ant-design/ant-design/pull/9936)
## 3.4.0
`2018-04-01`
- Tree
- 🛠 In this version, we refactored the underlying code of Tree to resolve some long living issues.
- 🌟 Added `defaultExpandParent` for expanding parent at first render.
- 🌟 Added `disabled` for disabling the whole tree.
- 🌟 Added `TreeNode[icon]` to allow setting custom node icon.
- 🌟 Improved the check logic for disabled TreeNode.
- 🌟 Anchor added `getContainer` for setting the container of scroll content.
- 🌟 Table added a new less variable `@table-expanded-row-bg`. [#9789](https://github.com/ant-design/ant-design/pull/9789)
- 🐞 Fixed a less syntax error. [#9832](https://github.com/ant-design/ant-design/pull/9832) [@jojoLockLock](https://github.com/jojoLockLock)
- 🐞 Fixed `moment.locale` invoking error in LocaleProvider. [#9853](https://github.com/ant-design/ant-design/pull/9853)
- 🐞 Fixed issue resulting in `style` of WeekPicker not works. [#9848](https://github.com/ant-design/ant-design/issues/9848)
- 🐞 Fixed type definition of Layout.Sider. [#9885](https://github.com/ant-design/ant-design/pull/9885) [@zachguo](https://github.com/zachguo)
- 💄 Improved style of Modal for long contents. [#9592](https://github.com/ant-design/ant-design/pull/9592)
- 🌟 Added new locale Slovenian.
## 3.3.3
`2018-03-25`
- Revert Upload `file` type change in previous version which causes breaking change.
## 3.3.2
`2018-03-24`
- 🐞 `Carousel`: Upgrade `react-slick` version to fix width calculation. [#3659](https://github.com/ant-design/ant-design/issues/3659)
- 💄 `Rate`: Adjust `disabled` style. [#9747](https://github.com/ant-design/ant-design/issues/9747)
- 💄 `Modal`: Adjust `confirm-modal` style to fix display issue when content use grid layout. [#9374](https://github.com/ant-design/ant-design/issues/9374)
- 💄 `Menu`: Adjust style to fix mouse trigger event region. [#9666](https://github.com/ant-design/ant-design/pull/9666) [@dgeibi](https://github.com/dgeibi)
- 🐞 `Upload`: Fix type of `file` on `beforeUpload` function. [#9775](https://github.com/ant-design/ant-design/issues/9775)
- 🐞 `Button`: Fix `two-chinese-words` space not re-calculate when text changed. [4502ad8](https://github.com/ant-design/ant-design/commit/4502ad8376e536c450fa4f27d2a5855be5a153e7)
## 3.3.1
`2018-03-18`
- 💄 Tweak danger button focus style.
- 🐞 Fix a show error when the value of enterButton is a button element. [#9639](https://github.com/ant-design/ant-design/issues/9639)
- 🐞 Fix missing key of `column.title` in Table .[#9658](https://github.com/ant-design/ant-design/issues/9658) [@terence55](https://github.com/terence55)
- 🐞 Fix `scroll: { x: true }` not working if `.ant-table-scroll table` width is `auto`. [#9704](https://github.com/ant-design/ant-design/pull/9704)
- 🐞 Fix when the helper message disappears, the input box will shake. [#8831](https://github.com/ant-design/ant-design/issues/8831)
- 🐞 Fix isMoment call in `TimePicker` will report error in parcel. [85c78e4](https://github.com/ant-design/ant-design/commit/85c78e49a91737c2841dc42621db21ca248b62b4)
- 🐞 Tweak `Table` border radius. [#9674](https://github.com/ant-design/ant-design/pull/9674)
## 3.3.0
`2018-03-12`
- 🌟 Add `afterClose` prop for `Alert` to achieve smooth unmount. [#9448](https://github.com/ant-design/ant-design/pull/9448) [@Hughen](https://github.com/Hughen)
- 🌟 Add `validRange` prop for `Calendar` to set the date range. [71f65a0](https://github.com/ant-design/ant-design/commit/71f65a0be8e72a67f334c57e79ae3ff5fb640630) [@Rohanhacker](https://github.com/Rohanhacker)
- 🌟 Add `defaultActiveTabKey` prop for `Card` to initial TabPane's active key. [30fe88d](https://github.com/ant-design/ant-design/commit/30fe88d4bdcec765bf92ca32a755d9646b36978e) [@u3u](https://github.com/u3u)
- `DatePicker`
- 🌟 Add `dropdownClassName` prop to set the className of popup calendar. [#7211](https://github.com/ant-design/ant-design/issues/7211)
- 🐞 Fix the error of resolving `moment` object. [#9539](https://github.com/ant-design/ant-design/pull/9539)
- 🐞 Fix uncorrect import of `turkish(tr_TR)` locale file. [#9373](https://github.com/ant-design/ant-design/issues/9373)
- 🌟 Add `orientation` prop for `Divider` to set the alignment of text in divider. [#9275](https://github.com/ant-design/ant-design/pull/9275) [@jrvboesch](https://github.com/jrvboesch)
- 🌟 Add `keyboard` prop for `Modal` to set whether Modal could be closed by `Esc` key. [#8818](https://github.com/ant-design/ant-design/issues/8818)
- 🌟 Improve the TypeScript definition of `event` param in `onChange` prop for `Radio` and `Checkbox`. [#9574](https://github.com/ant-design/ant-design/issues/9574)
- `Table`
- 🌟 Add `position` prop in `pagination` prop to set the position of pagination. [#9357](https://github.com/ant-design/ant-design/pull/9357) [@kanweiwei](https://github.com/kanweiwei)
- 🌟 Add event param of `onSelect` prop in `rowSelection` prop. [#9376](https://github.com/ant-design/ant-design/pull/9376) [@kanweiwei](https://github.com/kanweiwei)
- 🌟 Add `columnWidth` prop in `rowSelection` prop to set the column width of selection. [#9474](https://github.com/ant-design/ant-design/pull/9474) [@SimpleFrontend](https://github.com/SimpleFrontend)
- 🐞 Fix border radius issue in `Chrome` for `Table`. [af8e54f](https://github.com/ant-design/ant-design/commit/af8e54f1d6ac2891892e39b153cbe3e998370f61)
- 🌟 Add `pendingDot` prop for `Timeline` to set icon of ghost node. [#9546](https://github.com/ant-design/ant-design/pull/9546) [@SimpleFrontend](https://github.com/SimpleFrontend)
- 🌟 Add `inputReadOnly` prop for `TimePicker` to set if it's read only. [4a69446](https://github.com/ant-design/ant-design/commit/4a69446be155c1c176b18cb2c31459f999aa5d5e) [@JesperWe](https://github.com/JesperWe)
- 🌟 Add `dropdownClassName` prop for `TreeSelect`. [69b154f](https://github.com/ant-design/ant-design/commit/69b154f9a9cfa5f2d89a82b6ed730d4d8793de73) [56e4ce0](https://github.com/ant-design/ant-design/commit/56e4ce099d950601538d72243563021e8083776b)
- 🌟 Improve the preview for `Upload` when uploading the file of non-image format. [#9621](https://github.com/ant-design/ant-design/pull/9621) [@zswang](https://github.com/zswang)
- 🐞 Fix `successPercent` prop that cannot decide the success status for `Progress`. [#9382](https://github.com/ant-design/ant-design/issues/9382)
- 🐞 Fix font size for `Tabs`. [#9509](https://github.com/ant-design/ant-design/pull/9509)
- 🐞 Fix that disabled parent node cannot spread for `Tree` and `TreeSelect`. [#9539](https://github.com/ant-design/ant-design/pull/9539)
## 3.2.3
`2018-03-02`
- 🐞 Fix props `onPopupScroll` ts define in `Select`. [#9475](https://github.com/ant-design/ant-design/pull/9475) [@twobin](https://github.com/twobin)
- 🐞 Fix `Table` filter dropdown menu popup container. [#9209](https://github.com/ant-design/ant-design/issues/9209)
- 🐞 Fix `Timeline` head custom style error in chrome. [#9429](https://github.com/ant-design/ant-design/pull/9429) [@vthinkxie](https://github.com/vthinkxie)
- 🐞 Fix `Select` dropdown border. [82092c1](https://github.com/ant-design/ant-design/commit/82092c154ac1fa7ff2f89e1adbdf0aaf22e3ff53)
- 🐞 Fix compatibility with less 3. [#7850](https://github.com/ant-design/ant-design/issues/7850)
- 🐞 Fix `DatePicker.WeekPicker` year. [#9463](https://github.com/ant-design/ant-design/issues/9463)
- 🐞 Fix `Button.Group` align issue in chrome. [#9457](https://github.com/ant-design/ant-design/issues/9457)
## 3.2.2
`2018-02-24`
- 🌟 Add font-family variable for `Pagination`. [#9351](https://github.com/ant-design/ant-design/issues/9351)
- 🌟 Add font-weight variable for `Badge`. [#9352](https://github.com/ant-design/ant-design/issues/9352)
- 🐞 Fix table custom spin indicator. [#9355](https://github.com/ant-design/ant-design/issues/9355)
- 🐞 Fix `Form.create`. [#9331](https://github.com/ant-design/ant-design/issues/9331)
- 🐞 Revert typescript definition of `column.dataIndex`. [#9393](https://github.com/ant-design/ant-design/issues/9393)
- 🐞 Fix last menu item in Sider could be blocked by collapse trigger. [#9398](https://github.com/ant-design/ant-design/issues/9398) [@MJ111](https://github.com/MJ111)
- 🐞 Fix badge works wrong in dot mode. [#9359](https://github.com/ant-design/ant-design/issues/9359) [@khayalan-mathew](https://github.com/khayalan-mathew)
## 3.2.1
`2018-02-11`
- 🌟 Add icons of some famous products. [c04377e5](https://github.com/ant-design/ant-design/commit/c04377e5413d344b37c34ceac6fee456933fa516)
- Mention
- 🌟 `multiLines` mode will support autosize.
- 🐞 Fix paste not working when `placeholder` is specified. [#9215](https://github.com/ant-design/ant-design/issues/9215)
- Table
- 🐞 Fix padding of middle size table. [#9319](https://github.com/ant-design/ant-design/issues/9319)
- 🐞 Fix border bug of small size table. [#8980](https://github.com/ant-design/ant-design/issues/8980)
- 🐞 Fix overflow issue of sort icon interactive area. [#8979](https://github.com/ant-design/ant-design/issues/8979)
- 🌟 Improve typescript definition of `column.dataIndex`. [#9298](https://github.com/ant-design/ant-design/pull/9298) [@clinyong](https://github.com/clinyong)
- Select
- 🐞 Fix wrong scroll position when navigating active item with keyboard. [#9276](https://github.com/ant-design/ant-design/issues/9276)
- 🐞 Fix arrow position in IE11.
- 🐞 Fix issue that file item showing `uploading` when Upload `beforeUpload` return false. [#8020](https://github.com/ant-design/ant-design/issues/8020)
- 🐞 Fix misplace of feedback icon of `vertical` layout Form. [#9153](https://github.com/ant-design/ant-design/issues/9153)
- 🐞 Fix loading style missing of empty childen Card. [#9258](https://github.com/ant-design/ant-design/issues/9258)
- 🐞 Fix background color of Avatar when image source is not existe. [#9278](https://github.com/ant-design/ant-design/pull/9278) [@andriijas](https://github.com/andriijas)
- 🐞 Fix RangePicker `Cannot read property 'locale' of undefined` error when select end date. [#9267](https://github.com/ant-design/ant-design/issues/9267)
- 🐞 Fix style problem when using disabled button with Tooltip inside ButtonGroup. [#9296](https://github.com/ant-design/ant-design/issues/9296) [#9296](https://github.com/ant-design/ant-design/issues/9296)
- 🐞 Fix z-index of Dropdown's submenu. [#9218](https://github.com/ant-design/ant-design/issues/9218)
## 3.2.0
`2018-02-04`
- 🌟 Add new `tabBarGutter` prop to Tab to allow setting gutter between tabs. [#8644](https://github.com/ant-design/ant-design/pull/8644) [@lixiaoyang1992](https://github.com/lixiaoyang1992)
- 🌟 Add new `hasSider` prop to Layout to avoid render error when server rendering. [#8937](https://github.com/ant-design/ant-design/issues/8937)
- 🌟 Add new `successPercent` to Progress to allow showing two phases. [Demo](https://ant.design/components/progress/#components-progress-demo-segment)
- 🌟 Add new `iconType` prop to Alert to allow settting icon type. [#8811](https://github.com/ant-design/ant-design/pull/8811) [@minwe](https://github.com/ant-design/ant-design/pull/8811)
- 🌟 Add `id` prop to DatePicker. [#8598](https://github.com/ant-design/ant-design/pull/8598) [@mgrdevport](https://github.com/mgrdevport)
- 🌟 Add new `forceRender` prop to Collapse to allow rendering hide panel. [#9192](https://github.com/ant-design/ant-design/pull/9192) [#Pyroboomka](https://github.com/ant-design/ant-design/pull/9192) [@paulcmason](https://github.com/react-component/collapse/pull/82)
- RangePicker
- 🌟 Improve `ranges` prop to allow passing function to it. [#8281](https://github.com/ant-design/ant-design/issues/8281)
- 🐞 Fix issue resulting in can not input start date manually. [#6999](https://github.com/ant-design/ant-design/issues/6999)
- 🐞 Fix issue resulting date panel being closed without animation when click on the preset range. [#6364](https://github.com/ant-design/ant-design/issues/6364)
- 🐞 Fix issue resulting `onOk` is not being trigged, when click on the preset range. [#7747](https://github.com/ant-design/ant-design/issues/7747)
- Select
- 🌟 Improve `onChange`, `onDeselect`, they will receive selected `Option` as second paramteter.
- 🐞 Fix issue resulting in `onSelect` is not trigged when using automatic tokenization. [#9094](https://github.com/ant-design/ant-design/issues/9094)
- 🐞 Fix the missing scrollbar in Chrome.
- 🌟 Improve Table's `rowSelection[getCheckboxProps]` prop, now the all the properties returned by `getCheckboxProps` will be passed to checkbox. [#9054](https://github.com/ant-design/ant-design/pull/9054) [@mgrdevport](https://github.com/ant-design/ant-design/pull/9054)
- 🐞 Fix issue resulting in Calendar's `mode` not being allowed to be changed from outside. [#9243](https://github.com/ant-design/ant-design/pull/9243) [@mgrdevport](https://github.com/ant-design/ant-design/pull/9243)
- 🐞 Fix issue resulting AutoComplete showing wrong border when showing validattion message.[9f2b490](https://github.com/ant-design/ant-design/commit/9f2b4905f09fca503da7a8bb5f2b8347bea663b7)
- 🐞 Fix issue resulting in DatePicker showing wrong time in the control mode. [#8885](https://github.com/ant-design/ant-design/issues/8885)
- 🐞 Fix issue resulting in TextArea showing wrong height in Edge. [#9108](https://github.com/ant-design/ant-design/pull/9108) [@cuyl](https://github.com/cuyl)
- 🐞 Fix issue resulting in Tabs showing wrong tab style when using `type="card"` combine with `tabPosition="bottom"`. [#9165](https://github.com/ant-design/ant-design/pull/9165) [@ryanhoho](https://github.com/ryanhoho)
- 🌟 Add new Kurdish locale.
## 3.1.6
`2018-01-28`
- 🐞 Revert [#9141](https://github.com/ant-design/ant-design/pull/9141) since it causes year and month can not be selected in DatePicker.
## 3.1.5
`2018-01-27`
- 🐞 Fix Select Options were disappeared when click the scrollbar in IE11. [#7934](https://github.com/ant-design/ant-design/issues/7934) [@tianlang89757](https://github.com/tianlang89757)
- 🐞 Fix Form `getFieldDecorator` referenced item will conflicted when using the same id. [#9103](https://github.com/ant-design/ant-design/issues/9103) [#7351](https://github.com/ant-design/ant-design/issues/7351)
- 🐞 Fix RangePicker i18n issue which will shown the last language when change the language. [#8970](https://github.com/ant-design/ant-design/issues/8970)
- 🐞 Fix DatePicker shown wrong in the control mode. [#8885](https://github.com/ant-design/ant-design/issues/8885)
- 🐞 Fix Table shown emptyText when loading state. [#9095](https://github.com/ant-design/ant-design/pull/9095) [@sallen450](https://github.com/sallen450)
- 🐞 Add Icon `file-word`. [#9092](https://github.com/ant-design/ant-design/issues/9092) [#9061](https://github.com/ant-design/ant-design/issues/9061)
- 🐞 Fix wrong font family. [commit/506f97](https://github.com/ant-design/ant-design/commit/506f97640ec34a6d3d9fdb18e8036e5d34796a5f)
- 📖 Add some TypeScript type definitions
- Add `duration` for Notification. [pull/9120](https://github.com/ant-design/ant-design/pull/9120) [@duhongjun](https://github.com/duhongjun)
- Add `style` for Steps. [pull/9126](https://github.com/ant-design/ant-design/pull/9126) [@wanliyunyan](https://github.com/wanliyunyan)
- 🌟 Optimize Avatar default background color. [commit/275946](https://github.com/ant-design/ant-design/commit/275946090823ab8da90f1871976c671b2c7ac851)
- 🌟 Add the less variable for Slider and Menu. [pull/9065](https://github.com/ant-design/ant-design/pull/9065) [pull/9115](https://github.com/ant-design/ant-design/pull/9115) [@mrgeorgegray](https://github.com/mrgeorgegray)
## 3.1.4
`2018-01-21`
- 🐞 Fix ButtonGroup z-index issue. [#9014](https://github.com/ant-design/ant-design/issues/9014)
- 🐞 Fix Dropdown.Button can not be fully disabled. [#8991](https://github.com/ant-design/ant-design/issues/8991) [@sallen450](https://github.com/sallen450)
- 🐞 Fix Layout error responsive docs. [#8995](https://github.com/ant-design/ant-design/pull/8995) [@ReedSun](https://github.com/ReedSun)
- 🐞 Fix List `grid` do not support xxl. [#9019](https://github.com/ant-design/ant-design/issues/9019)
- 🐞 Fix RangePicker can not cancel selected start date when the panel is closed. [#8839](https://github.com/ant-design/ant-design/issues/8839)
- 🐞 Fix Tabs error margin. [commit/200d6c](https://github.com/ant-design/ant-design/commit/200d6cb11aba12a488510f957353bbd5bd1dcd1b)
- 🐞 Fix WeekPicker shows error weeks. [#9021](https://github.com/ant-design/ant-design/issues/9021)
- 🐞 Fix some TypeScript type definitions.
- Add `subMenuCloseDelay` and `subMenuOpenDelay` for Menu. [#8976](https://github.com/ant-design/ant-design/issues/8976) [@Rohanhacker](https://github.com/Rohanhacker)
- Refactor DatePicker types. [commit/0bb531](https://github.com/ant-design/ant-design/commit/0bb531aca6cb2045d5323196a599c925537a4eb0)
- Fix Input `maxLength` type definitions. [#9046](https://github.com/ant-design/ant-design/pull/9046) [@Riokai](https://github.com/Riokai)
- 🌟 Add some new less variables.
- About Checkbox and Radio: [#9003](https://github.com/ant-design/ant-design/pull/9003) [@mrgeorgegray](https://github.com/mrgeorgegray)
- About Breadcrumb: [#9022](https://github.com/ant-design/ant-design/pull/9022) [@mrgeorgegray](https://github.com/mrgeorgegray)
- 🌟 Add aliyun icon.
## 3.1.3
`2018-01-14`
- 🐞 Fix error when passing `null` `locale` to LocaleProvider.
## 3.1.2
`2018-01-13`
- 🐞 Fix Button can not display `0`. [#8733](https://github.com/ant-design/ant-design/pull/8733) [@Cuihongsen](https://github.com/Cuihongsen)
- 🐞 Fix extra scrollbar in Table and List caused by Spin. [#8799](https://github.com/ant-design/ant-design/issues/8799)
- 🐞 Fix can not pass function to Table[emptyText]. [#8871](https://github.com/ant-design/ant-design/issues/8871)
- 🐞 Fix now working Dropdown[transitionName].
- 🐞 Fix issue resulting in font changes when enter number in Input.[#8636](https://github.com/ant-design/ant-design/issues/8636)
- 🐞 Fix issue resulting in wrong locale text when import multiple locale files. [#8785](https://github.com/ant-design/ant-design/pull/8785)
- 🐞 Fix `locales` in dist/antd-with-locales.js has a `extra` default key. [#8881](https://github.com/ant-design/ant-design/issues/8881)
- 🐞 Fix some TypeScript type definitions. [4cc29bc](https://github.com/ant-design/ant-design/commit/4cc29bc11cf7c019c63a25693adff3dbb58b41c3) [693e734](https://github.com/ant-design/ant-design/commit/693e734a82b5e1faf25b025127afca67e75f9c88) [67e956d](https://github.com/ant-design/ant-design/commit/67e956dddd040f63b2a59b8b619123bbb0065780) [ecd4177](https://github.com/ant-design/ant-design/commit/ecd4177638da1eac3a3750fe5ad68b9309865542) [33119ec](https://github.com/ant-design/ant-design/commit/33119ec535e7b819541d4753464871988b37dd6f) [88e0c9b](https://github.com/ant-design/ant-design/commit/88e0c9b436f196def62e737ea72e105aba4b5d4e)
- 🌟 Add some new less variables [b9b5aba](https://github.com/ant-design/ant-design/commit/b9b5abab3364bf752e9644415088b142a153e385) [5931b20](https://github.com/ant-design/ant-design/commit/5931b201da58e993227a04128045e627f2b65c46) [c9d7397](https://github.com/ant-design/ant-design/commit/c9d73978dd2694f9d2bd0111f82a20d237f83621)
- 🌟 Optimize Chinese quotes displaying.
## 3.1.1
`2018-01-08`
- 📖 Published the new site and design guideline.
- 📖 Updated the guideline of real project with dva to [roadhog 2.0](https://github.com/sorrycc/blog/issues/55). [5dcf1c0](https://github.com/ant-design/ant-design/commit/5dcf1c015fc2674adb09434bf766549d6f3f0022)
- 📖 Published the new sketch resource of Ant Design 3.0. [22dfe88](https://github.com/ant-design/ant-design/commit/22dfe88ab043c1e116382fc96b7d78cabf125054)
- 🐞 Fix contextMenu event for trigger prop in the TypeScript definition of Dropdown. [#8646](https://github.com/ant-design/ant-design/issues/8646) [@cjahv](https://github.com/cjahv)
- 🐞 Fix HOC in Button not inserted space between chinese words.
- 🐞 Fix the style compatibility in IE 11 for List Component. [#8784](https://github.com/ant-design/ant-design/issues/8784)
- 🐞 Fix notFoundContent prop not working for Select Component. [#8809](https://github.com/ant-design/ant-design/issues/8809)
- 🐞 Fix the warning for BackTop Component in React 16. [#8848](https://github.com/ant-design/ant-design/issues/8848)
- 🐞 Fix unexpected scrollbar for List Component when setting gutter. [#8799](https://github.com/ant-design/ant-design/issues/8799)
- 🐞 Fix to support complete href link for Anchor.Link Component. [#8808](https://github.com/ant-design/ant-design/issues/8808)
- 🌟 Optimize the font family of Chinese quote. [c6fcc31](https://github.com/ant-design/ant-design/commit/c6fcc3121758dfe6ac5b50c1b55790eb42b805c5)
## 3.1.0
`2017-12-29`
Happy 2018 !~ 2018 2018 2018 coming!~~~
- 🐞 Fix ant-spin-container overflow resizing for Spin component. [#8602](https://github.com/ant-design/ant-design/issues/8602) [@jhsu](https://github.com/jhsu)
- 🐞 Fix extra padding in Table small with fixed columns. [#8724](https://github.com/ant-design/ant-design/issues/8724)
- 🐞 Fix Checkbox.Group align issue in Form. [#8739](https://github.com/ant-design/ant-design/issues/8739)
- 🐞 Fix unexpected scrollbar in Affix. [#8606](https://github.com/ant-design/ant-design/issues/8606)
- 🐞 Fix List component "No Data" mixed with loading. [#8647](https://github.com/ant-design/ant-design/issues/8647)
- 🌟 Add onKeyUp TypeScript definition to Input component. [#8705](https://github.com/ant-design/ant-design/issues/8705) [@delesseps](https://github.com/delesseps)
- 🌟 Add `showArrow` for disabling arrow icon in collapse panel. [#8536](https://github.com/ant-design/ant-design/pull/8536) [@apieceofbart](https://github.com/apieceofbart)
- 🌟 Rate add `allowClear` for reset when click again. [#8627](https://github.com/ant-design/ant-design/issues/8627)
- 🌟 Add responsive for BackTop. [#8719](https://github.com/ant-design/ant-design/issues/8719) [@JetRunner](https://github.com/JetRunner)
- 🌟 Add `destroyOnClose` to Modal component to support unmount child compenents on onClose. [#8769](https://github.com/ant-design/ant-design/pull/8769) [@Rohanhacker](https://github.com/Rohanhacker)
- 🌟 Pagination add `hideOnSinglePage` for support hide it when only one page. [#8615](https://github.com/ant-design/ant-design/pull/8615) [@camsong](https://github.com/camsong)
- 🌟 Support customize spin for List component.
- 👻 Support open official demo in CodeSandbox.
## 3.0.3
`2017-12-22`
- 🐞 Add React.SFC type for Form.create return value. [#8672](https://github.com/ant-design/ant-design/issues/8672)
- 🐞 Fix form item height and align problem. [#8701](https://github.com/ant-design/ant-design/issues/8701)
- 🐞 Improve input addon size. [#8680](https://github.com/ant-design/ant-design/issues/8680)
- 🐞 Fix table size of fixed column. [#8660](https://github.com/ant-design/ant-design/issues/8660)
## 3.0.2
`2017-12-17`
- 📝 Provide a migration helper for antd@3.0. [e71b68dd](https://github.com/ant-design/ant-design/commit/e71b68dd1d2ff91200fea6dd9d56e6aa5653edbc)
- 📝 Rewrite [CONTRIBUTING Guideline](https://github.com/ant-design/ant-design/blob/master/.github/CONTRIBUTING.md)
- 🌟 Optimize notification display in small screen. [#8631](https://github.com/ant-design/ant-design/issues/8631)
- 🌟 Optimize Pagination design and fix some issues of alignment and margin.
- 🐞 Upgrade to `react-slick@0.16.0` for peerDependencies warning. [#8455](https://github.com/ant-design/ant-design/issues/8455)
- 🐞 Fix not working `size` property in fixed-header Table. [#8577](https://github.com/ant-design/ant-design/issues/8577)
- 🐞 Fix not working `locale` property of DatePicker/RangePicker. [#8635](https://github.com/ant-design/ant-design/issues/8635)
- 🐞 Fix Popover arrow position and size cannot be overrided by less variable. [#8548](https://github.com/ant-design/ant-design/issues/8548) [#8549](https://github.com/ant-design/ant-design/issues/8549)
- 🐞 Fix not working `notFoundContent` of AutoComponent. [#8553](https://github.com/ant-design/ant-design/issues/8553)
- 🐞 Tweak RangePicker vertical align position.
- 🐞 Layout.Sider breakpoints is same as Grid's now. [#8620](https://github.com/ant-design/ant-design/issues/8620)
- 🐞 Fix submenu still showing in a collapsed menu when collapsedWidth is `0`. [#8587](https://github.com/ant-design/ant-design/issues/8587)
- 🐞 Fix Card's `Meta.title` text overflow not working. [#8597](https://github.com/ant-design/ant-design/issues/8597)
- 🐞 Fix pagination margin problem of bordered List. [#8562](https://github.com/ant-design/ant-design/issues/8562)
- 🐞 Fix Menu's submenu cannot open when specified non-existed `defaultOpenKeys`. [#8475](https://github.com/ant-design/ant-design/issues/8475)
- 🐞 Fix type name collisions of `InputProps` and `SearchProps` in Input, AutoComplete, Transfer. [#8478](https://github.com/ant-design/ant-design/issues/8478)
## 3.0.1
`2017-12-11`
* Remove useless DOM wrapper of Card, so that Card's DOM structure will be the same as Card of 2.x.
* Fix that missing `antd/lib/style/v2-compatible-reset.css`. [28d13e2](https://github.com/ant-design/ant-design/commit/28d13e2539817f87b8a2029ea22d9c30b377167f)
* Fix that Affix will be overlap when it is heigher than viewport. [31a0654](https://github.com/ant-design/ant-design/commit/31a0654ef990eb7bae2b18095fa0d5230b9be1da)
* Fix the open animation of Collapse. [edd592c](https://github.com/ant-design/ant-design/commit/edd592cb9dd79d534853e7a0c1b648382e3f1a12)
* Fix the aligment of large size Input and Button in Form. [#8459](https://github.com/ant-design/ant-design/issues/8459)
* Menu
* Fix the popup will disappear unexpectly in Safari. [#8453](https://github.com/ant-design/ant-design/issues/8453)
* Fix the open animation. [edd592c](https://github.com/ant-design/ant-design/commit/edd592cb9dd79d534853e7a0c1b648382e3f1a12)
* Fix compile error of style of Notification. [#8437](https://github.com/ant-design/ant-design/issues/8437)
* Fix the background color of mini Pagination. [e13c6d8](https://github.com/ant-design/ant-design/commit/e13c6d87fa6bf7d5cf4b2d5154a85b4793997de5)
* Table
* Fix broken style in mobile. [#8465](https://github.com/ant-design/ant-design/issues/8465)
* Fix broken style when use size and nested Table together. [#8525](https://github.com/ant-design/ant-design/issues/8525)
* TypeScript
* Fix TypeScript definition of AutoComplete. [#8383](https://github.com/ant-design/ant-design/pull/8383) [@nidhi-ag](https://github.com/nidhi-ag)
* Fix TypeScript definition of Divider. [#8504](https://github.com/ant-design/ant-design/pull/8504) [@cyyyu](https://github.com/cyyyu)
* Fix TypeScript definition of Dropdown. [#8444](https://github.com/ant-design/ant-design/issues/8444)
* Fix TypeScript definition of List. [e27061e](https://github.com/ant-design/ant-design/commit/e27061ea5b2f2d3273b45862d9b87285448f0998) [1b2a955](https://github.com/ant-design/ant-design/commit/1b2a9550d9595dd2f31f79d1bdd52695ec792692)
* Fix TypeScript definition of Table. [#8507](https://github.com/ant-design/ant-design/issues/8507) [#8515](https://github.com/ant-design/ant-design/pull/8515) [@danedavid](https://github.com/danedavid)
## 3.0.0
`2017-12-04`
Learn more in the [Ant Design 3.0 announcement post](https://medium.com/ant-design/announcing-ant-design-3-0-70e3e65eca0c).
### Major Changes
- New [color system](https://ant.design/docs/spec/colors#Color-Palettes), We changed our primary color from 『`#108EE9`』 to 『`#1890FF`』, we called the new primary color "拂晓蓝 (Daybreak Blue)" which means the color of the sky at daybreak.
- New design of components.
- Increased the base font size from 12px to 14px.
- Changed default locale to `en_US`.
- Support React 16.
- Better TypeScript support.
- New [List](https://ant.design/components/list/) component.
- New [Divider](https://ant.design/components/divider/) component.
- 30 New [icons](https://ant.design/components/icon/).
### Breaking Changes
We provide a [migration tool](https://github.com/ant-design/antd-migration-helper) to help you find deprecated usages in your codebase.
- Card's `noHovering` has been renamed to `hoverable`, and its default value now is `true`.
- Added new Grid breakpoints. [#7230](https://github.com/ant-design/ant-design/pull/7230)
- Form `getFieldDecorator`'s `exclusive` option has been removeed.
- Added `Form.createFormField`, and you must use it to wrap field data returned in `option.mapPropsToFields`:
```diff
import { Form } from 'antd';
Form.create({
mapPropsToFields() {
return {
- name: { value: 'antd' },
+ name: Form.createFormField({ value: 'antd' }),
};
},
})
```
- Improved global reset style, if you encounter style problem after upgrading, you can try import our v2 compatible style.
```javascript
import 'antd/lib/style/v2-compatible-reset';
```
Or use less
```less
@import '~antd/lib/style/v2-compatible-reset.less';
```
- Since we changed default locale to en_US, LocalProvider is not required any more for English users.
- We don't set `size="large"` to `Input` in `Form` by default any more.
- `Input.Search` 🔍 icon don't be interactive anymore, you can use new `enterButton` prop to add a button after input.
- UMD version of `dist/antd.js` doesn't include moment any more, you need add moment by yourself if you are using the UMD version.
```diff
<html>
<head>
+ <script src="https://unpkg.com/moment@2.19.3/moment.js"></script>
<script src="https://unpkg.com/antd@3.0.0/dist/antd.js"></script>
</head>
</html>
```
### Removed Deprecations
- 🗑 DatePicker.Calendar has been removed, you can use Calendar directly.
- 🗑 DatePicker's `toggleOpen` prop has been removed, use `onOpenChange` instead.
- 🗑 Form's `inline`, `horizontal`, `vertical` props has been removed, use `layout` instead.
- 🗑 Input's `type` prop has dropped textarea support, please use Input.TextArea instead.
- 🗑 Mention's `toEditorState` has been removed.
- 🗑 Select's `multiple`, `combobox`, `tags` props has been removed, use `mode` instead.
### Features and Improvements
- 🌟 Tabs added new size `size="large"`。
- 🌟 Row's `gutter` now support responsive setting, you can write `gutter={{ sm: 16, lg: 32 }}`.
- 🌟 Spin added new `indicator` prop to allow setting custom indicator. [#7977](https://github.com/ant-design/ant-design/pull/7977) [@kossel](https://github.com/ant-design/ant-design/pull/7977)
- 🌟 Input.Search added new `enterButton` prop to allow setting custom search button.[#7596](https://github.com/ant-design/ant-design/issues/7596)
- 🌟 Mention added new `placement` prop to allow setting the popup direction.
- 🌟 Carousel added new `next()`, `prev()`, `goTo(slideNumber)` methods to allow controlling slides programmatically.
- 🌟 Button added link support, Button with `href` prop will render to `<a>`. [#8343](https://github.com/ant-design/ant-design/pull/8343)
- 🌟 Steps was refactored, first rendering won't flash. [#6010](https://github.com/ant-design/ant-design/issues/6010)
- 🌟 Switch added new `loading` prop to show a loading status.
- Menu
- 🌟 We refactored it with [rc-trigger](https://github.com/react-component/trigger) for delay popup and auto overflow in viewport.
- 🌟 Added new `subMenuOpenDelay` and `subMenuCloseDelay` props to allow setting delay time for submenu toggling.
- 🌟 Added new `forceSubMenuRender` prop to render submenu even if it's collapsed. [#5586](https://github.com/ant-design/ant-design/issues/5586)
- Form
- 🌟 Added animations for validation message showing.
- 🌟 Added field conditional rendering support. [#react-component/117](https://github.com/react-component/form/issues/117)
- Message
- 🌟 Allow `duration` optional. [#7857](https://github.com/ant-design/ant-design/issues/7857) [@monkindey](https://github.com/monkindey)
- Badge
- 🌟 Added new `offset` prop to allow setting the offset of status point.
- 🌟 `status` can use whith `children` now. [#8164](https://github.com/ant-design/ant-design/issues/8164)
- Card
- 🌟 Added new `inner` type. [Demo](https://ant.design/components/card/#components-card-demo-inner)。
- 🌟 Added `cover`, `actions` and a new `Meta` component. [Demo](https://ant.design/components/card/#components-card-demo-meta)。
- DatePicker
- 🌟 Added `mode` and `onPanelChange`, to allow controlling the panel mode. [Demo](https://ant.design/components/date-picker/#components-date-picker-demo-mode)。
- 🌟 Added `WeekPicker` component. [Demo](https://ant.design/components/date-picker/#components-date-picker-demo-basic)
- 🌟 Added new `dateRender` prop to allow customizing date cell.
- TimePicker
- 🌟 Added new `hourStep`, `minuteStep`, `secondStep` props to allow customizing time setps. [Demo](https://ant.design/components/time-picker/#components-time-picker-demo-interval-options)
- 🌟 Added new `focusOnOpen` prop to focus input after panel is open.
- Table
- 🌟 Added new `components` prop to allow overriding default table elements.
```javascript
// You can override following elements
const components = {
table: MyTable,
header: {
wrapper: HeaderWrapper,
row: HeaderRow,
cell: HeaderCell,
},
body: {
wrapper: BodyWrapper,
row: BodyRow,
cell: BodyCell,
},
};
<Table components={components} columns={columns} data={data} />
```
- 🌟 Added new `onRow` prop to allow passing custom props to table body row.
- 🌟 Added new `onHeaderRow` props to allow passing custom props to table header row.
- 🌟 Added `column[onCell]` to allow passing custom props to table body cell.
- 🌟 Added `column[onHeaderCell]` to allow passing custom props to table header cell.
- 🌟 Added `column[align]` to allow setting how text aligns.
- 🌟 Added `column[defaultSortOrder]` to allow setting default sort order. [#8111](https://github.com/ant-design/ant-design/pull/8111) [@megawac](https://github.com/megawac)
- 🌟 Added `rowSelection[fixed]` to allow fixing the selection column.。
- 🙅 Deprecated `getBodyWrapper`, please use `components` instead.
- 🙅 Deprecated `onRowClick`, `onRowDoubleClick`, `onRowContextMenu`, `onRowMouseEnter`, `onRowMouseLeave`, please use `onRow` instead.
```javascript
<Table onRow={(record) => ({
onClick: () => {},
onDoubleClick: () => {},
onContextMenu: () => {},
onMouseEnter: () => {},
onMouseLeave: () => {},
})} />
```
- Select
- 🌟 Option's value can be a number in single or multiple mode.
- 🌟 Added new `maxTagCount` and `maxTagPlaceholder` props.
- 🌟 Added new `showAction` prop to allow setting the trigger action for popup.
- 🌟 Added new `onMouseEnter` and `onMouseLeave` callback.
- LocaleProvider
- 🇮🇸 Added Icelandic. [#7561](https://github.com/ant-design/ant-design/pull/7561) [@paunovic-stefan](https://github.com/paunovic-stefan)
- 🇪🇬 Added Egyptian Arabic. [#7888](https://github.com/ant-design/ant-design/pull/7888) [@mohamed-seada-1994](https://github.com/mohamed-seada-1994)
- 🇺🇦 Added Ukrainian. [#8169](https://github.com/ant-design/ant-design/pull/8169) [@anxolerd](https://github.com/anxolerd)
### Bug fixes
- Form
- 🐞 Fixed issue result in Input icon is hovered by feedback icon.
- 🐞 Fixed feedback icon not centered in large input.
- 🐞 Fix Menu key press error. [#8089](https://github.com/ant-design/ant-design/issues/8089)
### Other things
- Don't need set `allowSyntheticDefaultImports` when using in TypeScript.
- We removed `react@0.14` and `react@15` from `peerDependencies`, though `antd@3.0` still works on old React versions, but we highly recommend you upgrading to React 16 since we may use the new features only exists in React 16 in the future. See [React 16](https://reactjs.org/blog/2017/09/26/react-v16.0.html)
- Fully es module support, if you are using webpack 3, you can set babel-plugin-import's `libraryDirectory` to `es` to enable tree shaking .
- We will support 2.x branch until June in next year.
## 2.x
Visit [GitHub](https://github.com/ant-design/ant-design/blob/2.x-stable/CHANGELOG.en-US.md) to read `2.x` change logs.
## 1.11.4
Visit [GitHub](https://github.com/ant-design/ant-design/blob/1.x-stable/CHANGELOG.md) to read change logs from `0.x` to `1.x`.

845
CHANGELOG.md Normal file
View File

@@ -0,0 +1,845 @@
---
order: 3
chinese: 更新日志
toc: false
timeline: true
---
你也可以查看 GitHub 上的 [发布日志](https://github.com/ant-design/ant-design/releases)。
---
## 1.3.2
`2016-06-06`
- 修复全局模式下引用 antdIE8 环境报错的问题。 [#1970](https://github.com/ant-design/ant-design/issues/1970)
## 1.3.1
`2016-06-06`
- 修复 `Message` `Notification` 找不到的问题。 [#1968](https://github.com/ant-design/ant-design/issues/1968)
## 1.3.0
`2016-06-02`
- Transfer 组件增加 `rowKey` 属性,可自定义数据源主键。 [#1900](https://github.com/ant-design/ant-design/issues/1900)
- Tag 组件 `default` 类型的样式增加边框,防止淹没在背景中。 [#1910](https://github.com/ant-design/ant-design/issues/1910)
- Table
- 修复筛选为单选时仍旧展示多选框的问题。 [#1880](https://github.com/ant-design/ant-design/issues/1880)
- 修复 fixed left 的固定列会覆盖 rowSelection 的 Checkbox 的问题。 [#1829](https://github.com/ant-design/ant-design/issues/1829)
- 升级 rc-table 依赖
- 修复了 fixed 列中数据重复展示以及一些错位问题。 [#1898](https://github.com/ant-design/ant-design/issues/1898)
- `dataIndex` 支持内嵌属性的写法。 [react-component/table#46](https://github.com/react-component/table/issues/46)
- 修复了 v1.2.0 新增加的组件属性的 TypeScript 定义。 [#1933](https://github.com/ant-design/ant-design/issues/1933)
- Form 修复 label中冒号的国际化问题采用样式实现冒号不再需要手动输入冒号。 [#1877](https://github.com/ant-design/ant-design/issues/1877)
- 修复 DatePicker 组件点击『此刻』失效的问题,并进行了一些代码优化。 [#1902](https://github.com/ant-design/ant-design/issues/1902)
- 升级 rc-upload 依赖,修复了 IE10 中第二次上传同一文件不触发 `onChange` 的问题。 [058af3c](https://github.com/ant-design/ant-design/commit/b15a4e3165be5e4db995d3fe75d4d557c7f21c61)
- 文档使用 [bisheng](https://github.com/benjycui/bisheng) 重构。
## 1.2.1
`2016-05-27`
- 修复一个 Select 组件的文字重复问题。
## 1.2.0
`2016-05-26`
- Input 组件的文档现在和 Form 分离。 [3c98d3](https://github.com/ant-design/ant-design/commit/3c98d3f80f4ec80066756adc3b4108141d4383ca)
- Affix
- 新增了 `onChange` 属性。当固定状态改变时回调 [#1777](https://github.com/ant-design/ant-design/issues/1777)
- 找回了从 affixStyle 中走失的 `width` 属性,修复固定后错位的问题。[#1820](https://github.com/ant-design/ant-design/issues/1820)
- Table
- 修复了 Table 组件的分页相关的一系列问题 [#1669](https://github.com/ant-design/ant-design/issues/1669) [#1842](https://github.com/ant-design/ant-design/issues/1842)
- 修复了当有列固定在左边时,选择框不显示的问题 [#1829](https://github.com/ant-design/ant-design/issues/1829)
- 修复了当 Checkbox 的 label 为数字 0 时, label 不显示的问题 [#1811](https://github.com/ant-design/ant-design/issues/1811)
- 修复了 Tag 组件为 closeable 时,内部链接无法点击的问题 [#1862](https://github.com/ant-design/ant-design/issues/1862)
- Tab 组件新增 `hideAdd` 属性,用于关闭右边的添加按钮 [#1750](https://github.com/ant-design/ant-design/issues/1750)
- 修复了一个在某些情况下找不到 `normalize.css/normalize.css` 文件的问题。[ant-design/antd-init#52](https://github.com/ant-design/antd-init/issues/52)
- 修复构建文件在 IE8 下报错的问题。[#1804](https://github.com/ant-design/ant-design/issues/1804)
- 更新了第三方依赖。
## 1.1.0
`2016-05-18`
- Cascader 的选择框支持自定义渲染节点,并给 `displayRender` 方法增加了 `selectedOptions` 参数。[#1726](https://github.com/ant-design/ant-design/issues/1726)
- Input.Group 新增 `size` 属性,可设置控件尺寸。[#1732](https://github.com/ant-design/ant-design/issues/1732)
- Layout 新增常用布局:侧边导航展开收起模式。[#1643](https://github.com/ant-design/ant-design/issues/1643)
- Transfer 支持自定义渲染行数据。[#1664](https://github.com/ant-design/ant-design/issues/1664)
- Upload 的 children 为空时,不再显示上传按钮。[#1610](https://github.com/ant-design/ant-design/issues/1610)
- Table
- 修复 `filter` 过滤数据后显示错误分页的问题。[#1669](https://github.com/ant-design/ant-design/issues/1669)
- 修复 `pagination` 不指定时显示错误分页的问题。[#1683](https://github.com/ant-design/ant-design/issues/1683)
- Modal
- 修复弹出时背景依然跟随滚动的问题。[#1751](https://github.com/ant-design/ant-design/issues/1751)
- 修复关闭按钮获得焦点时的样式问题。[#1668](https://github.com/ant-design/ant-design/issues/1668)
- 将搜索输入框相关样式移到 Input 组件下。[7b7f846](https://github.com/ant-design/ant-design/commit/7b7f8461611e53f4f96ae8d64d37fe28ee8d2553)
- 修复 Select 获得焦点时的样式问题。[#1684](https://github.com/ant-design/ant-design/issues/1684)
- 修复 TreeSelect 占位符样式问题。[#1657](https://github.com/ant-design/ant-design/issues/1657)
- 修复了类型定义以更好地支持 `TypeScript`。[#1696](https://github.com/ant-design/ant-design/pull/1696) [@xujihui1985](https://github.com/xujihui1985)
- 优化了 LocaleProvider。[a3850a4](https://github.com/ant-design/ant-design/commit/a3850a4df84d7055a1a40600919f2f9ba1bbf2b2)
- 其他组件的样式优化。
## 1.0.1
`2016-05-11`
- 修复当 Table 的 `rowSelection.type` 为 'radio' 时的报错。[#1627](https://github.com/ant-design/ant-design/issues/1627)
- 修复 CheckboxGroup 与 `getFieldProps`共用时的问题。[#1631](https://github.com/ant-design/ant-design/issues/1631)
- 修复 RangePicker 中 TimePicker 不会受 locale 控制的问题。[#1635](https://github.com/ant-design/ant-design/issues/1635)
- 修复 Tag 组件缺失的问题。
- 修复 Table 的 className 不在最外层容器上的问题。
- 修复一个样式文件重复打包的问题。
## 1.0.0
`2016-05-09`
很高兴的通知各位,经过四个月时间的紧密开发,`antd@1.0.0` 终于发布了。从去年 5 月 7 日提交第一行代码以来经过整整一年的开发迭代antd 受到社区的大量关注,使用的公司和产品持续增加,已经日趋成熟。这个版本我们重构了底层代码和站点,持续完善现有组件功能和优化细节,其中很多都来自社区的贡献,无法一一感谢,欢迎各位持续关注和鞭策。在升级过程中遇到任何问题,请及时反馈给我们。
### 主要变化
- **兼容 React@15.x**。
- **全新单页站点**,使用 React 和 antd 进行了彻底重构,加载更快,访问更流畅。
- **样式支持按需加载**。可参考 [antd-init](https://github.com/ant-design/antd-init) 的模版代码, 需要配合 [babel-plugin-antd](https://github.com/ant-design/babel-plugin-antd#usage) 插件和 `style` 配置进行使用。[#900](https://github.com/ant-design/ant-design/issues/900)
- **提供独立的构建文件**。[文档](/docs/react/install?scrollTo=浏览器引入)
- 新增卡片组件 [Card](/components/card)。
- 新增评分组件 [Rate](/components/rate)。
- 新增 [LocaleProvider](/components/locale-provider) 组件,提供组件文案的国际化支持,并新增了英语和俄语的语言配置。[#1411](https://github.com/ant-design/ant-design/issues/1411)
- 更好的服务端渲染支持,修复了 Badge、Spin、Calendar、Upload 等组件服务端渲染的问题。
- 新增 antd.d.ts 以更好的支持 TypeScript。[@bang88](https://github.com/bang88)
- 布局组件支持响应式布局和栅格间隔设置。[#1082](https://github.com/ant-design/ant-design/issues/1082)
- Table 支持固定列和横向滚动。[#1265](https://github.com/ant-design/ant-design/issues/1265)
### 不兼容改动
此版本有部分不兼容的改动,升级时确保修改相应的使用代码。
- 推荐使用样式按需加载, 如果需要整体载入样式, **样式入口文件变为** `antd/dist/antd.css``antd/dist/antd.less`。如果你在项目中覆盖了 less 变量less 文件的引用方式也有 [相应变更](https://github.com/ant-design/ant-design/issues/1558#issuecomment-218120000)。
```diff
- import 'antd/lib/index.css'; // import 'antd/style/index.less';
+ import 'antd/dist/antd.css'; // import 'antd/dist/antd.less';
```
- 完全移除了 `0.12` 中废弃的 Validation 组件,可以直接 import [rc-form-validation](https://github.com/react-component/form-validation) 用以代替。[#1096](https://github.com/ant-design/ant-design/issues/1096)
- Breadcrumb.Item 的 `href` 属性被移除,请直接用 `a` 标签包裹可点击的内容。
- Modal 移除了 `align` 属性,现在可以使用 `style` 属性调整位置。
- `Modal.confirm` 等方法的配置项 `iconClassName` 重命名为 `iconType`。
- Select 移除了 `onChange` 中的 `label` 参数,新增了 `labelInValue` 属性。[#1695](https://github.com/ant-design/ant-design/issues/1695)
- 移除了 `import { Form } from 'antd/lib/form';` 的用法,应统一为 `import { Form } from 'antd';` 或 `import Form from 'antd/lib/form';`。
#### 有兼容提示的改动
这里的改动在升级后控制台会出现警告提示,请按提示进行修改。
- 废弃 QueueAnim可以直接 import [rc-queue-anim](https://github.com/react-component/queue-anim) 用以代替。Ant Design 的动效方案已移至 [Ant Motion](http://motion.ant.design/#/components/queue-anim),欢迎前往探索。
- Affix 的 `offset` 属性重命名为 `offsetTop`。
- Popover 的 `overlay` 属性重命名为 `content`。
- Progress.Line 使用方式改为 `<Progress />` 或 `<Progress type="line" />`。
- Progress.Circle 使用方式改为 `<Progress type="circle" />`。
- Spin 的 `spining` 属性更正为 `spinning`。
- Alert 的 type `warn` 重命名为 `warning`。[#1225](https://github.com/ant-design/ant-design/issues/1225)
- Tree 的 `onExpand` 参数从 `function(node, expanded, expandedKeys)` 调整为 `function(expandedKeys, {expanded, node})`。
### Bug 修复
- 修复 Table 的 `size` 为 `middle` 时,分页器大小无法控制的问题。[#1396](https://github.com/ant-design/ant-design/issues/1396)
- 修复 Table 的 `pagination.defaultCurrent` 失效的问题。
- 修复 Cascader 的 `defaultValue` 没有被 `value` 覆盖的问题。
- 修复 Select 同时设置 `allowClear` `disabled` 时还是会出现清除按钮的问题。[#1480](https://github.com/ant-design/ant-design/issues/1480)
- 修复 Transfer 的 `DataSource` 变化时已选中项没有同步的问题。[#1587](https://github.com/ant-design/ant-design/issues/1587)
- 修复 DatePicker 日期格式与国际化配置不同步的问题。[#1509](https://github.com/ant-design/ant-design/issues/1509)
- 修复 Button 禁用时事件仍然会冒泡的问题。[#1541](https://github.com/ant-design/ant-design/issues/1541)
- 修复 Carousel 自动播放时的卡顿和报错问题。[#1397](https://github.com/ant-design/ant-design/issues/1397)
- 修复 Tabs 的 card 类型内嵌标准 Tabs 时的样式问题。[#1617](https://github.com/ant-design/ant-design/issues/1617)
- 修复 Menu `horizontal` 和 `vertical` 模式不支持受控 `openKeys` 的问题。
### 其他改进
- 样式变量梳理,去除了部分无用的变量,另外还有大量样式细节问题修复。
- 依赖的 normalize.css 升级到 [4.x](https://github.com/necolas/normalize.css/blob/4.1.1/CHANGELOG.md)。
- 使用 ES2016 classes 重构了代码。[@waywardmonkeys](https://github.com/waywardmonkeys)
- Popover、Popconfirm 和 Tooltip 组件根据不同的弹出位置有了更精准方向的弹出动画。
- 补充 Select TreeSelect Switch Radio Checkbox 等组件的 `focus` 表现,增强表单组件的可用性。[#1358](https://github.com/ant-design/ant-design/issues/1358)
- message 和 notification 现在可以全局配置 `duration`。[#1143](https://github.com/ant-design/ant-design/issues/1143)
- DatePicker 和 TimePicker 的 `onChange(date, dateString)` 方法增加第二个参数用于获得格式化后的日期字符串。[#1104](https://github.com/ant-design/ant-design/issues/1104)
- DatePicker 和 DatePicker.RangePicker 现在可以设置内部 TimePikcer 的属性。[#1415](https://github.com/ant-design/ant-design/issues/1415)
- Checkbox
- 支持类似 Radio 的使用方式 `<Checkbox>option</Checkbox>`。[#1029](https://github.com/ant-design/ant-design/issues/1029)
- Checkbox.Group 现在允许 `label` 和 `value` 不同。[#1025](https://github.com/ant-design/ant-design/issues/1025)
- Checkbox.Group 允许单独设置某个 Checkbox 为 `disabled`。[#1218](https://github.com/ant-design/ant-design/issues/1218)
- Breadcrumb
- 支持路由模式下自定义链接 `linkRender`。[#1026](https://github.com/ant-design/ant-design/issues/1026)
- 支持路由模式下自定义最后一项内容 `nameRender`。[#1304](https://github.com/ant-design/ant-design/issues/1304)
- Modal
- 新增 `Modal.warning` 方法。
- 弹出时背景不再跟随滚动。[#1195](https://github.com/ant-design/ant-design/issues/1195)
- Select
- 搜索框和单选选择框合并,以优化视觉和交互效果。
- 优化多选框的选中效果。
- Spin
- 增加延时展示以优化体验。[#1273](https://github.com/ant-design/ant-design/issues/1273)
- 增加 `tip` 属性用于定义加载文案。[#1046](https://github.com/ant-design/ant-design/issues/1046)
- Steps
- 重构布局方式,以支持更灵活的自适应布局和优化了性能,并移除了 `maxDescriptionWidth` 属性。[#1099](https://github.com/ant-design/ant-design/issues/1099)
- 新增 `status` 属性以指定当前步骤状态,同时支持错误步骤的展示。[#1098](https://github.com/ant-design/ant-design/issues/1098)
- Timeline
- 新增 `dot` 属性,可自定义时间轴点。
- 现在可以设置 `className` 和 `style` 的问题。
- `color` 属性现在支持自定义色值。
- Tree
- 当子节点被选中时,自动展开父节点。
- 新增 `checkStrictly` 属性,支持父子节点选中关系脱离。
- Upload
- 在上传文件列表中的文件被删除时,将触发 `onRemove` 事件。[#1240](https://github.com/ant-design/ant-design/issues/1240)
- 增加 `onPreview` 支持文件的自定义预览方式。[#1240](https://github.com/ant-design/ant-design/issues/1240)
- `data` 属性支持设为一个函数,用于动态修改上传参数。[react-component/upload#32](https://github.com/react-component/upload/pull/32)
- Slider `marks` 现在支持 JSX 并可以单独设置某个标记的样式。
- Tag 的 `onClose` 可以使用 `e.preventDefault()` 阻止默认事件。[#1267](https://github.com/ant-design/ant-design/issues/1267)
- Form.Item 在有多个 child 时也可以自动生成错误信息与校验状态,但一个 Form.Item 内仍然只能有一个表单控件。[#1287](https://github.com/ant-design/ant-design/issues/1287)
- Input 新增 `onPressEnter` 属性监听回车事件。
- Table 现在可以通过 `filteredValue` `sortOrder` 控制筛选和排序的状态。[#971](https://github.com/ant-design/ant-design/issues/971)
- Button 增加了 `icon` 属性。[#1199](https://github.com/ant-design/ant-design/issues/1199)
- SubMenu 增加 `onTitleClick` 属性。
- Affix 增加 `offsetBottm` 属性,支持固定在底部。[#1000](https://github.com/ant-design/ant-design/issues/1000)
### 相关工具发布
- [antd-init](http://github.com/ant-design/antd-init) 同步发布 `1.0.0` 版本,享受最新 [ant-tool](https://github.com/ant-tool/) 工具带来的流畅开发体验。
- [Ant Motion](http://motion.ant.design) 全新的动效设计解决方案。
- [Ant UX](http://ux.ant.design/) 发布 1.0 版本,提供多种平台的流程素材支持。
## 0.12.17
`2016-05-05`
- 修复 FormItem 校验时表单项高度跳动的问题。[#1557](https://github.com/ant-design/ant-design/issues/1557)
- 修复一个 Table 圆角样式的小问题。
## 0.12.16
`2016-04-27`
- 修复 Collapse 在 safari 中切换动画异常的问题。[#1494](https://github.com/ant-design/ant-design/issues/1494)
- 修复 Table 的 selectedRowKeys 在初次渲染时失效的问题。[#1501](https://github.com/ant-design/ant-design/issues/1501)
- Table 现在点击选择框时将不再触发 `onRowClick`。[#1470](https://github.com/ant-design/ant-design/issues/1470)
- 修复一个 Calender 服务端渲染时提示 `Option is not defined` 的问题。[#1521](https://github.com/ant-design/ant-design/issues/1521)
- 修复 Menu 动态切换模式时的一些细节问题。
- 优化了 export 导出图标。
- 修复 Form 的一些样式细节。
## 0.12.15
`2016-04-21`
- 升级 rc-collapse 修复一个性能问题。
- 修复一个 Collapse 内嵌 Tabs 的选中项样式问题。[#1451](https://github.com/ant-design/ant-design/issues/1451)
- 修复 Input 组件服务端渲染报错的问题。[#1321](https://github.com/ant-design/ant-design/issues/1321)
- 修复 Tag 组件调用了两次 afterClose 的问题。[#1435](https://github.com/ant-design/ant-design/issues/1435)
- 修复一个 Table 控制模式的问题。[#1434](https://github.com/ant-design/ant-design/issues/1434)
- 修复一个 Tabs 相互嵌套的样式问题。[#1435](https://github.com/ant-design/ant-design/issues/1435)
- 修复 Dropdown.Button 点击右边也触发 onClick 的问题。
- 修复 Radio.Button 在 IE8 下无法选择的问题。[#1459](https://github.com/ant-design/ant-design/issues/1459)
- 优化了 Button 点击后仍然有 focus 效果的问题。
## 0.12.14
`2016-04-13`
- Form 和 Form.Item 支持 style 属性。[#1290](https://github.com/ant-design/ant-design/issues/1290)
- 修正 IE9 下没有 prefix css3 属性的问题。
- 修正 Table 中指定了 pagination.current 时依然能响应用户操作的问题。[#1311](https://github.com/ant-design/ant-design/issues/1311)
- 修正 Table 的单选模式无法用 `selectedRowKeys` 控制的问题。[#1346](https://github.com/ant-design/ant-design/issues/1346)
- 修正 DatePicker 启用 showTime 时时区失效的问题。[#1356](https://github.com/ant-design/ant-design/issues/1356)
- 修正 Menu、Progress、Form、Table、Select、Pagination、Cascader 的样式细节问题。
- 修正 Breadcrumb 不支持 IndexRoute 的问题。[#1375](https://github.com/ant-design/ant-design/issues/1375)
- 修正 Table 的筛选菜单 filters 的 value 为数字时无法选中的问题。
- 修正 DatePicker 面板输入框的日期格式 format 和外面不一致的问题。[#1403](https://github.com/ant-design/ant-design/issues/1403)
## 0.12.13
`2016-03-29`
- 按照最新的规范修正 Message、Alert、Notification 的默认图标。
- 统一梳理和优化了各浮层组件的 `z-index`,并增加了对应的 less 变量。
- 修复一个 Breadcrumb 组件未指定 breadcrumbName 导致的解析问题。[#1251](https://github.com/ant-design/ant-design/pull/1251)
- 现在 Upload 服务端返回数据不是 JSON 格式时将不判断为出错。[#1248](https://github.com/ant-design/ant-design/issues/1248)
- 修复 Cascader 在 Chrome 下无法滚动菜单的问题。
- 修复 Select、Radio、Progress、Table、DatePicker 的一些样式细节。
## 0.12.12
`2016-03-18`
- 更新了设计资源文件 `Axure Components` 和 `Axure Box`。
- 修复 Popover 和 Popconfirm 箭头消失的问题。
- 修复一个 Table 切换分页长度时的页码溢出的问题。
## 0.12.11
`2016-03-16`
- 全新的设计文档 `语言` 部分。
- 修复 Popconfirm `onConfirm` 和 `onCancel` 时没有触发 `onVisibleChange` 的问题。
- TreeSelect 组件补充 `showCheckedStrategy` 属性,支持回填数据的不同展示方式。
- 补充 Modal `align` 属性的文档。
- 修复 Menu 弹出菜单 `z-index` 丢失的问题。
- Progress 的默认颜色固定,不再随着主色变化。
- 优化 Button 点击动画在 Chrome 下的效果。
- 修复一个 Affix 的 `z-index` 太低的问题。
- 修复 Table 树形数据的二级节点列前无法选择的问题。[#1212](https://github.com/ant-design/ant-design/issues/1212)
- 修复 Table 修改 `pageSize` 没有触发 `onChange` 的问题。[#1206](https://github.com/ant-design/ant-design/issues/1206)
- 修复 Table 指定 `rowKey` 时导致 `rowSelection.onChange` 的 `selectedRows` 参数为空的问题。
## 0.12.10
- 修复 0.12.9 版本 npm 包打包错误的问题。
## 0.12.9
`2016-03-11`
- Transfer
- 可以定义 `notFoundContent `。
- 修复 `searchPlaceholder` 使用了 `placeholder` 的值的问题。
- 修复 Popconfirm、Popover、Tooltip 的箭头位置未指向元素的问题。
- 修正 Badge 在搜狗等旧版 webkit 浏览器下无法使用的问题。
- 调整 Tabs 样式。
- 修复 Table 中的 Pagination 默认配置问题。
- 调整 Form.Item 在 inline 模式下的 `margin-bottom`。[#1141](https://github.com/ant-design/ant-design/issues/1141)
- 修复 DatePicker `style` 设置错误的问题。
- 优化 Popconfirm、Button 样式。
- Dropdown 增加默认的 mouseEnterDelay 延迟以优化体验。
- 修复 Dialog 样式问题。
- 修复 Upload 上传中的状态问题。[#1159](https://github.com/ant-design/ant-design/issues/1159)
- 优化 Menu、Tabs 在 Chorme 下的渲染问题。
- Form 默认阻止 submit 事件。
## 0.12.8
`2016-03-06`
- 新增 `heart` `calculator` 图标。
- Table 补充了 `showHeader` 和 `footer` 属性。
- Modal 补充了 `maskClosable` 属性。
- 修正一个 Tag 和 Popover 配合使用的问题。[#1111](https://github.com/ant-design/ant-design/issues/1111)
- 将 TreeSelect 的 `treeDefaultExpandAll` 默认属性设为 false并优化了性能。
- 修复 RadioGroup 无法垂直布局的问题。[#1119](https://github.com/ant-design/ant-design/issues/1119)
- 统一了 less 文件的部分变量。
- 修正部分组件的样式。
## 0.12.7
`2016-03-03`
- 修正 Table 的 `rowSelect.onSelectAll` 的第三个参数 `deselectedRows` 为 `changeRows`,记录每次变化的列。
## 0.12.6
`2016-03-02`
- 优化 Table 本地排序在 Chrome 下的稳定性问题。
- 修正 Pagination 的 pageSize 属性为受控属性,并补充了 `defaultPageSize` 属性。[#1087](https://github.com/ant-design/ant-design/issues/1087)
- 优化 Select 的 combobox 模式的交互体验。
- 升级 react-slick 依赖到 `0.11`,修复自动播放有时会失效的问题。[#1009](https://github.com/ant-design/ant-design/issues/1009)
- 修复 TreeSelect 的 allowClear 属性失效的问题。[#1084](https://github.com/ant-design/ant-design/issues/1084)
- 修复 Input 组件的 className 属性失效的问题。[#1103](https://github.com/ant-design/ant-design/issues/1103)
- 修复 Dropdown 的 onClick 属性失效的问题。[#1097](https://github.com/ant-design/ant-design/issues/1097)
- 修复多个 CheckboxGroup 选项互相影响的问题。[#1101](https://github.com/ant-design/ant-design/pull/1101)
- 修复 FormItem 的子元素为 `null` 时报错的问题。
- 修复 Table 组件的选择功能和展开功能配合使用的问题。[#1102](https://github.com/ant-design/ant-design/issues/1102)
- 增加了一个搜索框和提示功能结合的 [例子](http://ant.design/components/select/#demo-search-box)。
- 允许可编辑的 Tabs 删除最后一个页签。[#1071](https://github.com/ant-design/ant-design/issues/1071)
- Table 的 `rowSelect.onSelectAll` 补充了第三个参数 `deselectedRows`, `rowSelect.onChange` 补充了第二个参数 `selectedRows`。[#1105](https://github.com/ant-design/ant-design/issues/1105)
- 修正部分组件的样式。
## 0.12.5
`2016-02-25`
- Pagination 支持 `showTotal` 属性。[#1077](https://github.com/ant-design/ant-design/pull/1077)
- Cascader 添加 `allowClear` 属性,允许隐藏清除按钮。
- 补充了一个带图标的搜索建议框的例子。[#1067](https://github.com/ant-design/ant-design/issues/1067)
- 修复 Transfer 在不支持 Object.assign 的浏览器上报错的问题。
- 修复 Cascader 在 Safari 下错位的问题。[#1066](https://github.com/ant-design/ant-design/issues/1066)
- 移除对 Button 圆角的降级方案。
- 修复了部分组件样式的小问题。
## 0.12.4
`2016-02-22`
- Radio 的 value 支持更多类型。[#1043](https://github.com/ant-design/ant-design/pull/1043)
- 修复 Spin 组件的大小、居中等样式问题。
- FormItem 补充 extra 属性的文档。[#931](https://github.com/ant-design/ant-design/issues/931)
- 修复的 Table 下树形数据和选择框配合时的样式问题。
- 修复一个水平表单的错误提示的样式错位问题。[#1040](https://github.com/ant-design/ant-design/issues/1040)
- 添加了一个轻微的 Button 点击动效。
## 0.12.3
`2016-02-19`
- DatePicker 补充 allowClear 属性,支持单选的清空。
- 修复显示时间的 DatePicker 的清空按钮失效的问题。
- 优化 DatePicker 的 `确定` 按钮失效样式。
## 0.12.2
`2016-02-19`
- DatePicker 如果有 `确定` 按钮,现在只有点击 `确定` 按钮才会触发 onChange 事件。
- 修复带时间选择的 DatePicker 日期格式缺少时间部分的问题。[#1005](https://github.com/ant-design/ant-design/issues/1005)
- 修复 DatePicker 内输入框多余的时间展示的问题。[#953](https://github.com/ant-design/ant-design/issues/953)
- 升级依赖 react-slick 到 `0.10`。
- 支持表单校验错误时自动滚动到第一个错误项。[#993](https://github.com/ant-design/ant-design/issues/993)
- 优化了 Select 和 TreeSelect 多选禁用的样式。
- Upload 列表项支持链接展现形式。[#1013](https://github.com/ant-design/ant-design/issues/1013)
- 修复 Safari 下的样式警告信息。[#999](https://github.com/ant-design/ant-design/issues/999)
- Cascader 支持 popupPlacement 位置配置。
## 0.12.1
`2016-02-03`
- 依赖升级到 `rc-pagination@1.4`、`rc-menu@4.10`、`rc-form@0.12`。
- 修复 TreeSelect 的不可用样式。
- DatePicker 补充 `getCalendarContainer` 属性,用于解决问题 [#991](https://github.com/ant-design/ant-design/issues/991)。
- 修正 Modal `onCancel` 的参数为点击事件。[#980](https://github.com/ant-design/ant-design/issues/980)
- 修复一个 Tooltip 内嵌套 Popconfirm 的问题。[#977](https://github.com/ant-design/ant-design/issues/977)
- 修复 DatePicker 和 RangePicker 的 `onOk` 一直不可用的问题。
- 修复一个 Badge 的 count 无法切换的问题。[#983](https://github.com/ant-design/ant-design/issues/983)
## 0.12.0
`2016-02-01`
- 新增 [级联选择(Cascader)](http://ant.design/components/cascader/) 组件。
- 新增 [树选择控件(TreeSelect)](http://ant.design/components/tree-select/) 组件。
- Form 自身支持校验功能,废弃 Validation。[演示](http://ant.design/components/form/#demo-validate-basic)
- Tabs
- `activeKey` 修正为受控属性。
- 当前项现在会始终显示。[#815](https://github.com/ant-design/ant-design/issues/815)
- Modal 可以配置右上关闭按钮是否显示。
- Select
- 打开选项菜单时,自动滚动到选中项。
- `combobox` 模式时,可配置是否默认选中第一项。[rc-select#38](https://github.com/react-component/select/issues/38)
- Table
- filter 支持层级选择。
- 支持行点击事件 `onRowClick`。
- 支持多列的横向切换。[演示](http://ant.design/components/table/#demo-paging-columns)
- 更换 `dataSource` 和变换页面时不再默认清除选择数据,你可以用 `selectedRowKeys` 手动控制。`原来默认清除的行为会触发一个数据更新的死循环,而且难以实现跨页选择。`
- 支持固定表头。[演示](http://ant.design/components/table/#demo-fixed-header)
- Tag 去除 `href` 属性,默认标签名从 `a` 改为 `span`。
- Timeline 支持指定 pending 节点的内容。
- Tree
- 节点支持拖拽。
- 支持动态控制节点展开与否。[演示](http://ant.design/components/tree/#demo-basic-controlled)
- 可以监听节点展开/关闭事件 `onExpand`。
- `onCheck` `onSelect` 参数调整。
- `onDataLoaded` 改为 `loadData`。
- 新增 drag&drop 相关属性:
- `onDragStart`
- `onDragEnter`
- `onDragOver`
- `onDragLeave`
- `onDrop`
- 新增 TreeNode 节点属性:
- `disableCheckbox`
- `isLeaf`
- Transfer 给 `onChange` 增加参数。[#972](https://github.com/ant-design/ant-design/issues/972)
- DatePicker
- 修复 RangePicker 开始结束日期相同的 bug。[#822](https://github.com/ant-design/ant-design/issues/822)
- 修复 `format` 对浮层不生效问题。[#917](https://github.com/ant-design/ant-design/issues/917)
- TimePicker 修复一个 `value` 为 `null` 时没有进入受控模式的问题。
- Upload
- 可以用 `headers` 设置上传头部。
- 新增上传图片卡片样式。[演示](http://ant.design/components/upload/#demo-picture-card)
- Radio
- 更换 Radio.Button 的展现样式。
- 可以设置 Radio.Button 的大小。
- Progress
- `format` 属性现在支持自定义 function 的方式进行定义。[#893](https://github.com/ant-design/ant-design/issues/893)
- `format` 指定 string 和 React.Node 的方式被废弃。
- 支持 `style` 属性。[#895](https://github.com/ant-design/ant-design/issues/895)
- message && notification 现在可以销毁。
- Button
- 小号 Button 的圆角调整为 `4px`。
- 修复 Button.Group disabled 后的样式问题。[#926](https://github.com/ant-design/ant-design/issues/926)
- BreadCrumb
- 移除 `router` 属性,无需设置。
- 修复一个链接参数不对的问题。
## 0.11.3
`2016-01-19`
- 修复 TimePicker 受控模式点选即关闭面板的问题。[#818](https://github.com/ant-design/ant-design/issues/818)
- 修复一个两栏的 TimePicker 点击右边空白处无法关闭面板的问题。[#826](https://github.com/ant-design/ant-design/issues/826)
- 修复 Table `pagination.onChange` 指定无效的问题。[#824](https://github.com/ant-design/ant-design/issues/824)
- 修复 Transfer 搜索功能失效的问题。
- 修复 DatePicker 的 MonthPicker 样式错乱的问题。
- 修复 RangePicker 时区无法设置的问题。[#837](https://github.com/ant-design/ant-design/issues/837)
- 修复二维码图标,新增一个扫描图标。[#772](https://github.com/ant-design/ant-design/issues/772)
## 0.11.2
`2015-01-03`
- 新增了[贡献文档](https://github.com/ant-design/ant-design/blob/master/CONTRIBUTING.md)。
- 修复一个 DatePicker 中选择的国际化文案问题。[#771](https://github.com/ant-design/ant-design/issues/771)
- 增加了一个高级搜索类型表单的[演示](http://ant.design/components/form/#demo-advanced-search-form)。
- Dropdown 支持多级的下拉菜单。[演示](http://ant.design/components/dropdown/#demo-sub-menu)
- Table
- 新增 `rowSelection.onChange` 和 `rowSelection.selectedRowKeys`,完善选择功能。
- 更新 dataSource 时,选中项现在会被清空。
- 修复一个全选框和禁用的选择项配合的问题。
- 修复 `0.11.1`版本 menu 内嵌型菜单inline选中后关闭的问题。
- 修复 `0.11.1`版本对 React 版本要求太严的问题,对应的警告提示对于 `0.14.x` 将不再出现。
- 组件和文档的样式小调整。
## 0.11.1
`2015-12-29`
- 修复一个 Table 无法修改 pageSize 的问题。
- 修复一个 Table 子表格展开的对齐问题。
- 修复一个 Chrome 下部分图标左侧切边的问题。
- 修复搜索输入框在表单下使用的样式问题。[#762](https://github.com/ant-design/ant-design/issues/762)
## 0.11.0
`2015-12-28`
- **移除默认加载的样式文件,样式现在需要独立加载。**
- 按钮圆角调整为 `6px`。
- Modal、Popconfirm、Table、TimePicker 支持国际化配置。
- 新增虚线型按钮。
- 新增 [通用搜索框](http://ant.design/components/form/#demo-search-input) 样式。
- 新增图片上传列表样式[演示](http://ant.design/components/upload/#demo-picture-style)。
- **部分设计资源开放 [下载](http://ant.design/spec/tools),包括 Axure 组件库和 Iconfont 字体打包文件。**
- 新增 [吊顶规范](http://ant.design/spec/layout/#demo-ceiling)。
- 组件演示页面增加锚点。
- 新增穿梭框 [Transfer](http://ant.design/components/transfer/) 组件。
- 新增小尺寸的 Switch 开关组件。
- 增加更多的图标。[#](https://github.com/ant-design/ant-design/commit/087c64649d73206a4d62e52f9b3f6042c1d28608#diff-dc1a1f4794c1c4ee3b083381d4c50c47R180)
- 全局微调了警告和错误状态色。
- Select
- 选中样式进行了调整。
- 在标签/多选模式下,选中或删除选项增加了动画效果。
- Alert
- 默认样式不展示图标。
- 带描述的警告框图标改为描线图标。
- `type="warn"` 图标修改。
- Dropdown 新增带菜单触发的按钮 `Dropdown.Button`。[演示](http://ant.design/components/dropdown/#demo-dropdown-button)
- Menu
- 新增 `Menu.ItemGroup` 用于把菜单项分组。
- onOpen 和 onClose 函数的参数新增了 `keyPath` 数据,可用于制作手风琴类型的菜单。
- Badge
- 徽章可以独立使用。[演示](http://ant.design/components/badge/#demo-no-wrapper)
- 支持设置封顶的 `99+` 的数字。[演示](http://ant.design/components/badge/#demo-overflow)
- Slider
- 增加 `onAfterChange` 事件。[演示](http://ant.design/components/slider/#demo-event)
- 现在设置 `tipFormatter={null}` 可以隐藏 `Tooltip`。
- 双滑块拖动体验优化,一个滑块在拖动时可以直接跨过另一滑块。
- Breadcrumb 可以自定义分隔符。[演示](http://ant.design/components/breadcrumb/#demo-separator)
- Popconfirm 添加 `visible` 属性,使其可以控制是否显示。[演示](http://ant.design/components/popconfirm/#demo-dynamic-trigger)
- 修复 Icon `ref` 引起的报错。
- 修复 Calendar 组件无法切换年/月的问题。[#757](https://github.com/ant-design/ant-design/issues/757)
- Checkbox 新增 `Checkbox.Group`,现可以方便的 [生成一组选择框](http://ant.design/components/checkbox/#demo-group)
- Tabs
- 新增 [卡片式页签](http://ant.design/components/tabs/#demo-card)。
- 调整 [新增和关闭页签](http://ant.design/components/tabs/#demo-editable-card) 的样式。
- 现在支持页签的四个位置 `tabPosition="top|right|bottom|left"`。
- 移除 `animation` 属性,并在 `tabPosition="top|bottom"` 时默认启用切换动画。
- Timepicker
- **重命名为 TimePicker。**
- 国际化属性 `locale` 结构发生了 [变化](https://github.com/ant-design/ant-design/issues/1270#issuecomment-201181384)。
- 新增 `value` 属性。
- 新增属性 `disabledHours` `disabledMinutes` `disabledSeconds`。[演示](http://ant.design/components/time-picker/#picker-demo-disable-options)
- 移除 `hourOptions` `minuteOptions` `secondOptions`,新增 `hideDisabled` 属性用于替代。
- Datepicker
- **重命名为 DatePicker。**
- 新增 [日期范围选择控件](http://ant.design/components/date-picker/#picker-demo-range)。
- 修改 `showTime` 的交互。[演示](http://ant.design/components/date-picker/#picker-demo-time)
- 修正为受控组件。
- Table
- **移除 `dataSource` 的远程模式。**
- 新增 [紧凑型表格](http://ant.design/components/table/#demo-size)。
- 允许监听分页的 `onShowSizeChange`。[演示](http://ant.design/components/table/#demo-paging)
- 优化表格对树形数据的显示。[演示](http://ant.design/components/table/#demo-indent-size)
- 优化了筛选菜单的样式,并添加了最大高度。[演示](http://ant.design/components/table/#demo-head)。
- 修复 column.key 设置失效的问题。[#642](https://github.com/ant-design/ant-design/issues/642)
- 修复设置时 rowKey 时单选会导致全部选中的问题。[#697](https://github.com/ant-design/ant-design/issues/697)
- 修复一个列重新渲染导致选项错乱的问题。[#418](https://github.com/ant-design/ant-design/issues/418#issuecomment-163093580)
- 修复选择列无法设置宽度的问题。[#649](https://github.com/ant-design/ant-design/issues/649)
- Form
- 修复了 Textarea 无法输入的问题。[#646](https://github.com/ant-design/ant-design/issues/646)
- 修复了 Textarea 设置 `cols` 和 `rows` 属性失效的问题。[#694](https://github.com/ant-design/ant-design/issues/694)
- 修复无法设置 `className` 的问题。[#711](https://github.com/ant-design/ant-design/issues/711)
- 修复 Upload 组件在 `beforeUpload` 返回 `false` 后依然更新上传列表问题。[#757](https://github.com/ant-design/ant-design/issues/757)
- 工具
- 替换 `antd build` 为 [atool-build](https://github.com/ant-tool/atool-build),重构并改善了 webpack 配置的自定义方式。
- 替换 `antd server` 为 [dora](https://github.com/dora-js/dora),一个完全插件化的开发服务器,支持[代理转发和数据 Mock](https://github.com/dora-js/dora-plugin-proxy)、[atool-build](https://github.com/dora-js/dora-plugin-atool-build)、[热替换](https://github.com/dora-js/dora-plugin-hmr)。
- 新增 babel 插件 [babel-plugin-antd](https://github.com/ant-design/babel-plugin-antd),转换 `import {Button} from 'antd'` 为 `import Button from 'antd/lib/button'`。
- 发布了 `antd-init@0.6.x`,支持以上改动。
> [0.11 升级指南](http://ant.design/docs/react/upgrade-notes#0-10-gt-0-11)
## 0.10.5
`2016-01-04`
- 修复 Table 更新 dataSource 后,选中项没有置空的问题。[#793](https://github.com/ant-design/ant-design/issues/793)
## 0.10.4
`2015-11-30`
- 将 media-match 加入默认的 polyfill 文件中。[5626974](https://github.com/ant-design/ant-design/commit/562697423b1139eb324c1dceb051c143f4870ed7)
- 修复了 [MonthPicker](http://ant.design/components/datepicker/#demo-month-picker) 报错问题,并增加了相关演示。
- 修复 RadioGroup 中的 Radio/RadioButton 无法单独设置 disabled 的问题。[#603](https://github.com/ant-design/ant-design/issues/603)
- 修复今天是不可选日期时的一个展示问题。[#606](https://github.com/ant-design/ant-design/issues/606)
## 0.10.3
`2015-11-26`
- 和 0.9.x 保持一致默认引入 `antd/lib/index.css`(而非 less 文件),方便第三方引用。引用 less 文件进行变量配置的可自行 `import 'antd/style/index.less'`。[#593](https://github.com/ant-design/ant-design/issues/593)
- 升级 Pagination增加 `defaultCurrent` 属性,修正原来的 `current` 为[完全受控属性](https://facebook.github.io/react/docs/forms.html#controlled-components)。
- Pagination 的改动也修复了 Table 切换数据源后回到[第一页的例子](http://ant.design/components/table/#demo-ajax)。
- 对演示和样式代码增加了 lint 检查。
## 0.10.2
`2015-11-25`
- Slider 新增 `tipFormatter` 用于格式化 Tooltip 的内容。
- 优化 Badge 动画效果。
- 修复以下问题:
- 文本域的表单校验无法重置。
- 设置 Upload 的 `multiple` 为 `true` 时,未显示每个文件的上传进度。
- Breadcrumb 配合 Router 的时候如果没有 `breadcrumbName` 会抛错。
- InputNumber 同时设置 `size` `className` 时会有冲突。
## 0.10.1
`2015-11-20`
- 修改内部组件的引用结构,方便工具优化。[#566](https://github.com/ant-design/ant-design/pull/566)
- 移除了演示中没有使用过的 `antd.ButtonGroup`,依然用 `const ButtonGroup = Button.Group` 来使用。
- Form 和 Input 目录分离,`import { Form, Input } from 'ant/lib/form'` 的引用方式被废弃。
现在可以 `import Form from 'ant/lib/form'` 和 `import Input from 'ant/lib/input'`。
原有的 `import { Form, Input } from 'antd'` 则不受影响。
- 修复 Datepicker 的 `style` 和 `calendarStyle` 属性失效的问题,并将 `calendarStyle` 更名为 `popupStyle`。
## 0.10.0
`2015-11-20`
- 全面兼容 `react@0.14.x`。
- 新增 [时间选择 Timepicker](http://ant.design/components/timepicker/)、[日历 Calendar](http://ant.design/components/calendar/)、[加载中 Spin](http://ant.design/components/spin/) 组件。
- [Button](http://ant.design/components/button/)、[Iconfont](http://ant.design/components/icon/)、[Layout](http://ant.design/components/layout/)、[Form](http://ant.design/components/form/)、[Input](http://ant.design/components/form/#demo-input) 等样式模块改造为 React 组件。
- 新增 [Queue-anim](http://ant.design/components/queue-anim/) 组件,更换了原来的 enter-animation。
- 全新的[字体图标](/components/icon)。
- 全面更新视觉风格,补充更多图标。[#313](https://github.com/ant-design/ant-design/issues/313)
- 调整字体基线,告别对图标位置的特殊调节。(感谢 [iconfont.cn](http://iconfont.cn) 的鼎力支持)
- Datepicker、Dropdown、Select、Popover、Popconfirm 等浮层组件添加在空间不足的情况下自动调整位置功能。
- Popover、Tooltip、Popconfirm 组件支持 12 个方向。[#312](https://github.com/ant-design/ant-design/issues/312)
- 优先使用苹方字体。
- 统一 size 属性的可选值为 `small` `default` `large`。
- 开始初步补充[测试用例](https://github.com/ant-design/ant-design/tree/1a3a19793c0791201666fdcf0dbd12a30fad4be0/tests)。
- 提供主色系更换的[方案](https://github.com/ant-tool/xtool/tree/master/examples/customize-antd-theme)。[#384](https://github.com/ant-design/ant-design/issues/384)
- 添加[色彩换算工具](http://ant.design/spec/colors#色彩换算工具)。
- 添加布局和导航规范,以及[常用布局](http://ant.design/spec/layout/)。
- 文档支持标题和演示的锚点,方便分享文档和演示代码。
- 提供多版本的文档,在[主站](http://ant.design)的右下角提供切换按钮。
- [antd-bin](https://github.com/ant-tool/xtool) 升级到 `0.10`。
- 拆分出 [antd-init](https://github.com/ant-design/antd-init) 和 [antd-build](https://github.com/ant-design/antd-build)。
- 提供代理功能。
- 提供 UI 测试功能。
#### 组件变更
- Table
- 支持单选。[演示](http://ant.design/components/table/#demo-row-selection-radio-props)
- 选择模式支持默认选中和不可用效果。[演示](/components/table/#demo-row-selection-props)
- 列支持了 `colSpan` 和 `rowSpan` 配置。[演示](/components/table/#demo-colspan-rowspan)
- 新增 `loading` 属性。
- 筛选增加 `filterMultiple` 属性,支持单选的配置。
- Datepicker
- 添加国际化支持。
- 添加手动输入和清除功能。
- 优化了视觉样式。
- 修复不标准的日期格式导致显示错误的问题。
- 用 `onChange` 属性代替 `onSelect` 属性。
- Validation 修复了 对 Datepicker、Input-number、Select 的支持,并添加了相关演示。
- Carousel 的依赖 react-slick 升级到 0.9.x相关 API 也相应更新。
- Tree 组件支持完全受控模式。[#397](https://github.com/ant-design/ant-design/issues/397)
- Input Number
- 组件输入体验优化,现在可以键入任意字符,失焦时格式化为合法值。
- 修复不支持小数 step 的问题。[#530](https://github.com/ant-design/ant-design/issues/530)
- Tabs 新增[垂直页签功能](http://ant.design/components/tabs/#demo-vertical-left)。
- Upload 组件视觉优化,新增高级浏览器下的上传进度展示。[#311](https://github.com/ant-design/ant-design/issues/311)
- Menu
- 视觉效果大幅优化。
- 新增 [dark 主题](http://ant.design/components/menu/#demo-theme) 的样式。
- 修复一个链接点击区域的问题。[#535](https://github.com/ant-design/ant-design/issues/535)
- Dropdown 用 onClick 代替 onSelect 作为推荐的使用方式,因为原有的 onSelect 只在变化时触发。
- Slider
- 新增[双滑块功能](http://ant.design/components/slider/#demo-range)。
- 优化 marks 属性的使用逻辑,使其可以和具体数值进行绑定。[slider#26](https://github.com//react-component/slider/issues/26)
- 属性命名优化,用 `dots` 代替了 `withDots` 属性,用 `included` 代替了 `isIncluded`。
- Badge 当 `count` 为 0 时不展示。
- Progress 新增 `format` 属性,能够自定义展示的进度文案。
- Modal 新增 `confirmLoading` 属性。
- 新增 Radio.Button 的失效样式。
- 提供 IE8 下的圆角按钮[兼容方案](http://ant.design/components/button/#ie8-border-radius-support)。
- `antd.Notification()` 修正为 `antd.notification()`。
- 另有巨量样式的修复和优化。
> 备注:
>
> - [计划和推进 issue](https://github.com/ant-design/ant-design/issues/276)
> - [0.10 升级指南](http://010x.ant.design/docs/upgrade-to-0.10)
---
## 0.9.3 ~ 0.9.5
`2015-11-04`
* 增加对 React 版本的检测提示机制0.9.x 序列只能使用 `react@~0.13.3`。
## 0.9.2
`2015-10-26`
* Tooltip 的 title 为空时不展示浮层。[9b53117](https://github.com/ant-design/ant-design/commit/9b5311791e73270c7c16a602ac74dd59719a5f76)
* 修复 Upload 文件列表链接的 target 属性。[340a170](https://github.com/ant-design/ant-design/commit/340a1702b6a7b065ac02d417c891e1886dfe470d)
* 修复 Datepicker 设置 defaultValue 时星期顺序错误的问题。[9ef1450](https://github.com/ant-design/ant-design/commit/9ef14500f3abfcc7081f8dceab8187ec835e3918)
* 修复一些小的样式问题。
## 0.9.1
`2015-09-26`
* 添加 Pagination pageSize 发生变化的回调。[#317](https://github.com/ant-design/ant-design/issues/317)
* 升级依赖 rc-upload 到 1.6.x修复 IE8/9 下的兼容性问题。
* 升级依赖 rc-steps 到 1.3.x。
* 新增 current 属性,方便配置当前的步骤。[#290](https://github.com/ant-design/ant-design/issues/290)
* 修复因滚动条影响页面宽度导致的错位问题。
* 升级依赖 rc-menu 到 1.5.x。
* 新增 onSelect 回调中返回参数 keyPath从而支持只展开当前父级菜单的交互方式。[demo](http://ant.design/components/menu/#demo-sider-current)
* 修复 hover 类型的弹出菜单能响应点击事件的问题。[react-component/menu#14](https://github.com/react-component/menu/issues/14)
* 修复一个 Table 的分页无法正确展示的问题。[#253](https://github.com/ant-design/ant-design/issues/253)
* 修复一个 combobox 选择框无法选中的问题。[0435ca6](https://github.com/ant-design/ant-design/commit/0435ca60e3b574bac3808a10ba3db62f482335fd)
* 修复 Radio.Button 在 IE 8 下不可用的问题。[#321](https://github.com/ant-design/ant-design/issues/321)
* 适配 breadcrumb 面包屑组件和 `react-router@1.0.0-rc1`。
* 修复只能同时弹出一个 Modal 通知框的问题。[d6a4094](https://github.com/ant-design/ant-design/commit/d6a4094bc4c72acd05be001c7e46dbd17092001a)
* 升级依赖 rc-tooltip 到 2.8.0,增加 overlayClassName 属性。
* 部分组件交互和视觉效果修正。
## 0.9.0
`2015-09-14`
* 新增 [timeline](components/timeline/) 和 [badge](components/badge/) 组件。
* 优化弹出层类组件的动画效果,使其更加流畅。
* 部分文案更新。
* 优化主站在小分辨率屏幕下的样式。
* 使用 instantclick 改造主站,加载速度有明显提升。
* antd-bin 升级到 [0.6.x](https://github.com/ant-design/antd-bin/blob/master/HISTORY.md) 。
* Upload **重构了 API 接口,不向下兼容**,支持自定义的功能扩展。
* 新增 `onChange(file) {}` 接口,移出原来的 `onSuccess`、`onProgess`、`onError` 等接口。
* 新增 `fileList` 和 `defaultFileList` 属性,以满足更多的自定义功能,具体见演示。
* 设置 fileList 数组项的 url 属性可以作为链接展示在文件列表中方便下载。
* 移除内建的上传成功或失败的信息提示,业务可自行实现。
* 修正多文件选择上传时文件列表只展示一个文件的问题。
* Table
* 新增可展开的 table。[#258](https://github.com/ant-design/ant-design/pull/258)
* 新增无数据的展示样式。[4c54644](https://github.com/ant-design/ant-design/commit/4c54644116d46cb2510d2d475234529bad60e5d5)
* 修复本地模式 `dataSource` 无法更新的问题。[6d2dcc4](https://github.com/ant-design/ant-design/commit/6d2dcc45393b6ec0ad1ba73caf8b1ec42353743f)
* 修复远程模式 loading 失效的问题。[9b8abb2](https://github.com/ant-design/ant-design/commit/9b8abb219934c246970a84200818aa8f85974bdf)
* 用 [reqwest-without-xhr2](http://npmjs.com/reqwest-without-xhr2) 代替了 reqwest解决某些开发环境下 xhr2 依赖的问题。
* Select
* 增加 label 属性,允许多选模式下展示标签(原来只能显示 value 值)。[演示](http://react-component.github.io/select/examples/mul-suggest.html)
* 修复 combobox 模式下 value 失效的问题。
* Notification 修复不会自动消失的问题。[23fce55](https://github.com/ant-design/ant-design/commit/23fce559b0b2faf4e0b686a92dbcdd045727a464)
* Steps 新增竖版的步骤条。
* Carousel 修复 fade 模式下可以拖拽的问题。#212
* Collapse 修复动画不生效的问题。
* Datepicker 修复无法设置为空值的问题。
* Modal
* 添加 [通知类型](http://ant.design/components/modal/#demo-info) 的对话框函数。
* 用 `Modal.confirm()` 代替 `confirm()` 方法。
* 修改为需要在 onCancel 手动设置 visible 属性来关闭。
* Message 添加 [加载中类型](http://ant.design/components/message/#demo-loading)。
* Radio 修改 Radio.Group 容器的盒模型属性为 inline-block 。
* Enter Animation
* 大幅度的重构,全新 API 的设计。
* 支持和 react-router 结合使用。
## 0.8.0
`2015-08-25`
这个版本是第一个稳定版,组件经过三期迭代,基本到齐,并有大量改进和变化,不向下兼容。
* 新增九个组件 `menu`、`upload`、`carousel`、`tree`、`notification`、`validation`、`affix`、`alert`、`enterAnimation`。目前共有组件 34 个,基本能满足后台类项目的组件需求。
* 新增设计文档部分,包括文字、色彩、动画。
* 重新梳理了设计和 React 实现部分的关系,强调了 Ant Design 的设计属性,并更新了网站的信息结构。
* 构建工具 `antd-bin` 升级到 `0.4.0` 版本,支持合并 webpack 配置热替换HMR等特性[详见](https://github.com/ant-design/antd-bin)。
* 组件动画优化和补充,体验更加流畅动感。
* 排查并修复 IE 和 safari 等浏览器的兼容问题。
* 大量代码重构,演示代码补充,文档更新、以及样式上的优化。
## 0.7.3
`2015-07-30`
* 小幅重构了 Table 分页,修复了分页导致的数据不展示的问题。
* 更新了部分文档。
## 0.7.2
`2015-07-27`
* 修复本地模式下 pagination 为 false 时数据无法显示的 [问题](https://github.com/ant-design/ant-design/commit/1954586665e59031eae5d2c8b2cdb08f83d64fcb)。
* 重构了 message 组件。
* 添加英文版说明文档 [README-en_US.md](https://github.com/ant-design/ant-design/blob/master/README-en_US.md)。
* 部分代码切换至 ES6 模式。
* 修正了部分组件的样式和演示,优化部分动画。
## 0.7.1
`2015-07-22`
* 修复了 Table 组件的 pagination 为 false 时分页未消失的 [问题](https://github.com/ant-design/ant-design/commit/01a6c0f1e6707b72a54ef30d073d148a87b391a8)。
* select 组件[选中后默认显示标签内容](https://github.com/ant-design/ant-design/issues/50)(原来是显示 value
* 修正了部分组件的样式和演示。
* 打包文件为 [umd 模式](https://github.com/ant-design/ant-design/commit/9b7b940cb417429d8fc57d83e252991b043d0f2f)。
## 0.7.0
`2015-07-21`
* 第一个公开版本,发布 `layout`、`iconfont`、`button`、`form`、`checkbox`、`radio`、`switch`、`slider`、`input-number`、`datepicker`、`select`、`tabs`、`steps`、`breadcrumb`、`collapse`、`pagination`、`modal`、`message`、`dropdown`、`popover`、`popconfirm`、`tooltip`、`progress`、`table` 等组件。
* 发布 [Ant Design 首页](http://ant.design/) 和入门文档。

View File

@@ -1,790 +0,0 @@
---
order: 6
title: 更新日志
toc: false
timeline: true
---
`antd` 严格遵循 [Semantic Versioning 2.0.0](http://semver.org/lang/zh-CN/) 语义化版本规范。
#### 发布周期
* 修订版本号:每周末会进行日常 bugfix 更新。(如果有紧急的 bugfix则任何时候都可发布
* 次版本号:每月发布一个带有新特性的向下兼容的版本。
* 主版本号:含有破坏性更新和新特性,不在发布周期内。
---
## 3.7.0
3.7.0是一个重磅更新,带来了很多激动人心的变化和新特性。
以下是一些亮点✨:
- 🔥 增加抽屉组件 : [`Drawer`](https://ant.design/components/drawer-cn/) [#10791](https://github.com/ant-design/ant-design/pull/10791)
- 🔥 Menu 增加一个横向菜单在空间不足时溢出部分自动收起的特性。[#11234](https://github.com/ant-design/ant-design/pull/11234)
![demo](https://user-images.githubusercontent.com/1731837/42550555-0fef7878-8505-11e8-9d2f-f708fec66b44.gif)
- 🔥 新增 `Tree.DirectoryTree` 组件,作为内置的目录树。[#7749](https://github.com/ant-design/ant-design/issues/7749)
组件修复/功能增强:
- TreeSelect 组件升级 `rc-tree-select``2.0.5`,进行了重构,修复了 check 的逻辑。
- 🌟 新增 `autoClearSearchValue` 属性,当多选模式下值被选择,用于自动清空搜索框。[10996](https://github.com/ant-design/ant-design/issues/10996)
- 🌟 新增 `searchValue` 属性,用于设置搜索框的值。[6ff7dd8](https://github.com/ant-design/ant-design/commit/6ff7dd8fb953f079ee51ee638aaf4d832d0e10bf#diff-1e8e47abbdbe6e12d009aa61619ab22f)
- 🌟 新增 `maxTagCount` 属性,用于设置显示标签的最大数量。[fb96c9d](https://github.com/ant-design/ant-design/commit/fb96c9db351e44a202f64f780470c6319a8a9626)
- 🌟 新增 `maxTagPlaceholder` 属性,用于设置标签隐藏时显示的内容。[fb96c9d](https://github.com/ant-design/ant-design/commit/fb96c9db351e44a202f64f780470c6319a8a9626)
- 🌟 搜索框支持大小写敏感。[#10990](https://github.com/ant-design/ant-design/issues/10990)
- 🗑 `treeData` 数据格式中的 `label` 属性被废弃,使用 `title` 属性代替。
- Upload 组件升级 `rc-upload``2.5.0`
- 🌟 新增 `directory` 属性,支持上传一个文件夹。[#7315](https://github.com/ant-design/ant-design/issues/7315)
- 🌟 `action` 属性支持作为一个返回 `Promise` 对象的函数,使用更加灵活。[fd96967](https://github.com/ant-design/ant-design/commit/fd96967c872600b79bb608e9ddf9f8c38814a704)
- Dropdown 增加新特性,可以做为右键菜单来使用。
- 🌟 给菜单项的 icon 提供默认的外间距样式。[8e60a59](https://github.com/ant-design/ant-design/commit/8e60a591fd24f644de4f67d69c2210e9270be9cc)
- 🌟 触发方式为 `contextMenu` 时自动调整菜单的位置。[16e4260](https://github.com/ant-design/ant-design/commit/16e42601d6772fc0830ee237a1e751a38a118676)
- Table 组件升级 `rc-table``6.2.2`。 [f2fddff](https://github.com/ant-design/ant-design/commit/f2fddff3fd0d6b36e8e6d8ee06bfcbcc85ead4f0)
- 🌟 新增 `expanded` 作为 `expandedRowRender` 属性函数的第四个参数,用于获取当前行是否展开。[#10379](https://github.com/ant-design/ant-design/issues/10379)
- 🌟 新增无须使用完全受控组件也能覆盖筛选菜单的能力。[59cc3a8](https://github.com/ant-design/ant-design/commit/59cc3a8b6c643f7206feedf2dc2c7154296ba3e3) [@chrvadala](https://github.com/chrvadala)
- 🌟 `filterIcon` 属性支持作为一个返回 `ReactNode` 的函数。[1af4392](https://github.com/ant-design/ant-design/commit/1af4392ae9fbdaa6fcfbf2f0de5413100ef4a84a)
- 🐞 修复在固定列时导致的行错位的问题。[#10392](https://github.com/ant-design/ant-design/issues/10392)
- 🐞 修复在组件中使用 `combobox` 模式的 `Select` 导致的重影问题。[#10828](https://github.com/ant-design/ant-design/issues/10828)
- 🐞 修复 Table 自定义组件不会更改。 [c380186](https://github.com/ant-design/ant-design/commit/c380186e794a7735ae91e992f25a313158ee4984)
- 🗑 Select 组件废弃了 `combobox` 模式,请使用 `AutoComplete` 组件代替。[53046a4](https://github.com/ant-design/ant-design/commit/53046a454ad83ca03dc313e63f56474ed1173002)
- 🌟 Alert 组件允许传递 `data-*``aria-*``role-*` 属性到组件内部。[f0b684d](https://github.com/ant-design/ant-design/commit/f0b684de6a7c422f0de56e1ef72aeb35ab25a858)
- 🌟 Avatar 组件新增 `alt` 属性,用于设置图像无法显示时的替代文本。[#10798](https://github.com/ant-design/ant-design/pull/10798)
- 🌟 DatePicker 组件允许传递 `data-*``aria-*``role-*` 属性到组件内部的 `Input`。[e63f9d4](https://github.com/ant-design/ant-design/commit/e63f9d4beb440de92c0b0ce8e6e83f7e24fef792)
- 🌟 Input.Search 组件新增 `event` 事件对象作为 `onSearch` 属性函数的第二个参数。[#11015](https://github.com/ant-design/ant-design/issues/11015)
- 🌟 Layout.Sider 组件新增 `onBreakPoint` 属性,用作响应式布局的断点触发时的回调函数。[#10750](https://github.com/ant-design/ant-design/pull/10750) [@nuintun](https://github.com/nuintun)
- 🌟 Modal 组件新增 `okButtonProps``cancelButtonProps` 属性,分别用于设置 `取消` 按钮和 `确定` 按钮的属性。[#10955](https://github.com/ant-design/ant-design/pull/10955) [@djyde](https://github.com/djyde)
- 🌟 Progress 组件新增 `strokeColor` 属性,用于设置进度条的颜色。[#10725](https://github.com/ant-design/ant-design/issues/10725)
- 🌟 Radio.Group 组件新增 `buttonStyle` 属性 (可选值 `outline | solid`),用于设置 `RadioButton` 的风格样式。[60e3cfa](https://github.com/ant-design/ant-design/commit/60e3cfa37ac0dae3a895e74c1fe5351c54536a07#diff-c2ee8b5a368a121e9d2cc2661212045d)
- 🌟 Spin 组件新增 `setDefaultIndicator` 静态方法,用于设置全局的加载指示符。[#10787](https://github.com/ant-design/ant-design/issues/10787)
- 🌟 Tag 组件新增 `visible` 属性,用于设置是否显示标签。[4ac0277](https://github.com/ant-design/ant-design/commit/4ac027781372dda08a5458bc73836fbc14dfe51f)
- Tree 组件升级 `rc-tree``1.12.0`
- 🌟 新增 `loadedKeys` 属性,用于设置已经加载的节点,需要配合 `loadData` 使用。[#10666](https://github.com/ant-design/ant-design/issues/10666)
- 🌟 新增 `onLoad` 属性,作为节点加载完毕时的回调函数。[c488aca](https://github.com/ant-design/ant-design/commit/c488aca05e11d942d77c1b6bff45d12bbb1a2bd6)
- 🌟 增加 `okButtonDisabled` and `cancelButtonDisabled` 属性用于禁用确定和取消按钮。[#10955](https://github.com/ant-design/ant-design/pull/10955)
- 🌟 Cascader 新增 fieldNames 并废弃拼写错误的 filedNames。 [#10896](https://github.com/ant-design/ant-design/issues/10896)
- 🐞 修复时间轴不能与`Tooltip`一起使用的问题。 [0e3b67e](https://github.com/ant-design/ant-design/commit/0e3b67e9999d867cc304f3be61a8a042a2ab92ee)
- 🐞 修复当 Avata 自定义大小时,圆角不改变的问题。[e1e6523](https://github.com/ant-design/ant-design/commit/e1e6523452286ba56f20b73abad762a58ea7d7bc)
## 3.6.6
`2018-07-07`
- 🐞 修复 `DatePicker` 组件被选中日期的样式问题。[#6146](https://github.com/ant-design/ant-design/issues/6146) [#9529](https://github.com/ant-design/ant-design/issues/9529)
- 🐞 修复 `DatePicker.RangePicker` 组件中被选中日期的样式问题。[004561b](https://github.com/ant-design/ant-design/commit/004561ba1f3b894dc164225e9e27b0a90679d15c)
- 🐞 修复 `Cascader` 组件在 `Form.Item` 下的对齐问题。[#9827](https://github.com/ant-design/ant-design/issues/9827) [#11133](https://github.com/ant-design/ant-design/issues/11133)
- 🐞 修复 `InputNumber` 组件的 `handler` 的背景样式问题。[4aabc53](https://github.com/ant-design/ant-design/commit/4aabc5374497359e13a958ef81ae4569db6164a7)
- 🐞 修复 `Table` 组件在 `FireFox` 浏览器下数据为空时的头部溢出的样式问题。[#11135](https://github.com/ant-design/ant-design/issues/11135)
## 3.6.5
`2018-07-02`
- 🐞 修复 `Transfer` 组件的文本 "Not Found" 在 IE 或 Edge 浏览器上显示异常。[#9697](https://github.com/ant-design/ant-design/issues/9697)
- 🐞 修复 Chrome 在缩放模式下,`Card` 组件的边框被标题的背景色覆盖。[#9085](https://github.com/ant-design/ant-design/issues/9085)
- TypeScript
- 🐞 修复 `Table` 不兼容的类型 `size`。[bf5b6ae1](https://github.com/ant-design/ant-design/commit/bf5b6ae1f3b5da4629a7d10a2d1764eaa3fbbb04)
- 🐞 修复 `Select` 组件的 `showArrow` 类型定义。[cde2a6b6](https://github.com/ant-design/ant-design/commit/cde2a6b6f011a5b3a367b3f58731def547bc98d8)
- 🐞 修复 Pagination 全局 locale 设置不能被组件 locale 覆盖的问题。[babbbdd4](https://github.com/ant-design/ant-design/commit/babbbdd4e5c33ca050f8ee08969185c8d3269b4c)
- 🐞 修复 `Tooltip` 组件的 `max-width` 样式,使 `overlayStyle.maxWidth` 可覆盖。[e2b359e9](https://github.com/ant-design/ant-design/commit/e2b359e9c3dae067eeba37a886f7896474c87e31)
- 🐞 修复 `Select` 组件的样式,避免过长文本的溢出。[#11035](https://github.com/ant-design/ant-design/issues/11035)
## 3.6.4
`2018-06-23`
- 🐞 修复 `Steps` 组件的 `@process-icon-color` 样式定义。[#10973](https://github.com/ant-design/ant-design/issues/10973)
- 🐞 修复 `RangePicker` 组件使用预置范围时的样式问题。[#10986]
(https://github.com/ant-design/ant-design/issues/10986)
- 🐞 修复 `Dropdown` 组件可能报出的 `non-boolean attribute` 的警告。[#7798](https://github.com/ant-design/ant-design/issues/7798)
- TypeScript
- 🌟 给 `Tree` 组件添加 `className` 的定义。[#10950](https://github.com/ant-design/ant-design/issues/10950)
- 🌟 给 `Tree` 组件添加 `selectable` 的定义。[3fb478e](https://github.com/ant-design/ant-design/commit/3fb478e743f3bad23dc300f501df11e5423468ba)
## 3.6.3
`2018-06-17`
- 🐞 修复 Upload 图片文件后缀名为大写时无法正确识别的问题。[#10928](https://github.com/ant-design/ant-design/pull/10928) [@sliwey](https://github.com/sliwey)
- 🐞 修复 InputNumber 在浏览器缩放时边框样式丢失的问题。[#10562](https://github.com/ant-design/ant-design/issues/10562)
- 🐞 修复 Spin 内使用 `position: fixed` 的元素无法固定的问题。[#10196](https://github.com/ant-design/ant-design/issues/10196)
- 🐞 修复小号表格下固定列的边框样式问题。[#9754](https://github.com/ant-design/ant-design/issues/9754)
- 🐞 修复 Table `filterIcon``className` 属性失效的问题。[#10937](https://github.com/ant-design/ant-design/issues/10937)
- 🐞 修复 Affix 的 `offsetTop``offsetBottom` 无法动态修改的问题。[#10874](https://github.com/ant-design/ant-design/issues/10874)
- TypeScript
- 🐞 修复 TreeSelect `TS2339` 错误。[#10868](https://github.com/ant-design/ant-design/issues/10868)
- 🌟 补充 Form 的 `validateMessages``onFieldsChange` 参数的定义。
- 🌟 优化 Button 的属性定义。[#10877](https://github.com/ant-design/ant-design/pull/10877) [@zheeeng](https://github.com/zheeeng)
- 🌟 补充 AutoComplete 的 `backfill` 属性定义。[#10909](https://github.com/ant-design/ant-design/pull/10909) [@zhanba](https://github.com/zhanba)
## 3.6.2
`2018-06-09`
- 🐞 修复 Table 数据变化时全选勾选框状态显示不正确的问题。[#10629](https://github.com/ant-design/ant-design/issues/10629)
- 🐞 修复 Button.Group 中使用 disabled 按钮时缺失边框。
- 🐞 修复 Upload 中 `beforeUpload` 返回 `false` 时,文件列表排序会被反转的问题。[#10681](https://github.com/ant-design/ant-design/issues/10681)
- 🐞 修复 Calendar 表格中内容溢出的问题。[#10808](https://github.com/ant-design/ant-design/pull/10808) [@Yangzhedi](https://github.com/ant-design/Yangzhedi)
- Spin
- 🐞 修复使用图标时不能按照 `size` 正确显示大小的问题。[#10786](https://github.com/ant-design/ant-design/issues/10786)
- 🐞 修复默认旋转时 `delay` 不生效的问题。[#10727](https://github.com/ant-design/ant-design/pull/10727) [@dreamerblue](https://github.com/dreamerblue)
- 修复 Badge 的状态色不跟主题色变化的问题。
- TypeScript
- 🐞 修复 Menu 类型定义。[#10773](https://github.com/ant-design/ant-design/issues/10773)
- 🐞 修复 AutoComplete 类型定义。[#10745](https://github.com/ant-design/ant-design/issues/10745) [#10619](https://github.com/ant-design/ant-design/issues/10619)
- 🐞 修复 Tree 类型定义。[#10841](https://github.com/ant-design/ant-design/pull/10841) [@Voronar](https://github.com/Voronar)
- 🐞 修复 Checkbox.Group 的类型定义。[#10677](https://github.com/ant-design/ant-design/pull/10677)
## 3.6.0
`2018-06-02`
* 🌟 `Form` 表单错误信息展示支持传入 ReactNode。 [#10136](https://github.com/ant-design/ant-design/issues/10136) [@lovekonakona](https://github.com/lovekonakona)
* 🌟 `List` 组件支持指定分页器的位置。 [#10581](https://github.com/ant-design/ant-design/pull/10581) [@zheeeng](https://github.com/zheeeng)
* 🌟 `Layout.Sider` 支持 dark/light 主题定制。 [#10142](https://github.com/ant-design/ant-design/issues/10142) [@pd4d10](https://github.com/pd4d10)
* 🌟 支持 Ant Design 站点的离线模式。 [#10625](https://github.com/ant-design/ant-design/issues/10625)
* 🌟 `Transfer` 新增 `style` 以及 `operationStyle` 属性配置样式。 [@eduludi](https://github.com/eduludi)
* 🌟 `Message` 增加 promise 化的回调接口。 [#10421](https://github.com/ant-design/ant-design/issues/10421) [@zhujinxuan](https://github.com/zhujinxuan)
* 🐞 修复编译时 typescript v2.9.1兼容性问题。 [#10729](https://github.com/ant-design/ant-design/issues/10729) [@karol-majewski](https://github.com/karol-majewski)
* 🐞 修复 `Menu` 嵌套超过两层时选中最里层后对应最外层没有亮起问题。 [#8666](https://github.com/ant-design/ant-design/issues/8666) [@stonehank](https://github.com/stonehank)
* 🐞 修复 `Affix` 组件 offsetBottom 无效问题。 [#10674](https://github.com/ant-design/ant-design/issues/10674)
## 3.5.4
`2018-05-26`
- 🐞 修复 `Cascader``showSearch` 无效问题。[968488a2](https://github.com/ant-design/ant-design/commit/968488a2fac9bcb16bee9f0c248f49bca00dbec6)
- 🐞 使 `Badge[status]` 支持 `Tooltip`。[#10626](https://github.com/ant-design/ant-design/issues/10626)
- 🐞 修复父元素使用 `text-align` 会影响 `Spin` 的问题。[#10643](https://github.com/ant-design/ant-design/pull/10643) [@wmzhong](https://github.com/wmzhong)
- 💄 `Table` 换行从 `break-all` 改为 `break-word`。[#10655](https://github.com/ant-design/ant-design/pull/10655) [@clinyong](https://github.com/clinyong)
- 🌟 `Search` 在未定义 `enterButton` 时,点击搜索图标将触发 `onSearch`。 [36ffe7e1](https://github.com/ant-design/ant-design/commit/36ffe7e1dc9d9473c8c68168ab79b7a03a604702)
## 3.5.3
`2018-05-20`
- 🐞 修复了 `Affix``offsetTop === 0`,值将变为 `undefined` 的问题 [#10566](https://github.com/ant-design/ant-design/pull/10566)
- 🐞 修复了 `Menu` item 中的高亮链接颜色问题 [09d5e36](https://github.com/ant-design/ant-design/commit/09d5e36cfa27e371a7b4d4e68276a279698ea901)
- 🐞 修复了 `Input.Group` 组件阴影被遮盖的问题 [#10230](https://github.com/ant-design/ant-design/issues/10230)
- 🐞 修复了 `Transfer` 组件 checkbox 事件触发两次的问题 [`#10480`](https://github.com/ant-design/ant-design/issues/10480)
- 💄 统一 less 的变量命名 [12d3046](https://github.com/ant-design/ant-design/commit/12d3046687a0dcdb51fece08dd2bea64f185cc40)
- 💄 微调了 `Dropdown` 的样式 [8e2f72f](https://github.com/ant-design/ant-design/commit/8e2f72ffe0eb300f5997296726b02246bf990c8f)
- 💄 现在中文文档的组件会用中文语言包进行演示。[9b17a94](https://github.com/ant-design/ant-design/commit/9b17a943f5d57d40d65041b7b0c247add09d2851)
- 💄 主站主题切换 修改为 `antd-theme-generato` ,感谢 [@mzohaibqc](https://github.com/mzohaibqc) 的工作.
- TypeScript
- 🐞 修复了 `Row` 中 gutter 属性的类型问题 [b7d508e](https://github.com/ant-design/ant-design/commit/b7d508e1662bf20a0cacbe6440a2ce31a65a8a59)
- 💄 改进了 `Form` 组件类型 [#10564](https://github.com/ant-design/ant-design/pull/10564)
- 💄 改进了 `Button``Tag` 类型 [1ed9fed](https://github.com/ant-design/ant-design/commit/1ed9fed2cf1c99b947359fafb101b2e58213cb48)
## 3.5.2
`2018-05-13`
- 🐞 修复 `Table` 过滤器和 `Transfer` 复选框无法点击的问题。[#10452](https://github.com/ant-design/ant-design/issues/10452)
- 🐞 修复 `Cascader` `displayRender` 里的链接无法点击的问题。[#10433](https://github.com/ant-design/ant-design/issues/10433)
- 🐞 修复 `Button` ref 不兼容问题。[#10405](https://github.com/ant-design/ant-design/issues/10405)
- 🐞 修复 `Form` 表单项校验位置高度时出现抖动问题。[#10445](https://github.com/ant-design/ant-design/issues/10445)
- 🌟 设置 `Layout` 宽度时,允许使用任何的 CSS 单位。 [#10479](https://github.com/ant-design/ant-design/pull/10479)
## 3.5.1
`2018-05-09`
- 🐞 修复 Input.Group 在 Form 下样式错位的问题。[#10371](https://github.com/ant-design/ant-design/issues/10371)
- 🐞 修复 Select 箭头和内容重叠的问题。[#10383](https://github.com/ant-design/ant-design/issues/10383)
- 🐞 移除 Collapse 点击时的 focus 样式。
- 🐞 移除 Input.Group 和 Checkbox 不必要的 `z-index`。[#9840](https://github.com/ant-design/ant-design/issues/9840) [#10385](https://github.com/ant-design/ant-design/issues/10385)
- 🐞 修复一个数字等宽字体没有加粗的问题。
- Table
- 💄 重写了可编辑表格的演示。[#10119](https://github.com/ant-design/ant-design/pull/10119)
- 🐞 修复一个表格列内容互相重叠的问题。[#9822](https://github.com/ant-design/ant-design/issues/9822)
- TypeScript
- 🐞 调整 Breadcrumb.Item 的类型。[#10372](https://github.com/ant-design/ant-design/pull/10372) [@karol-majewski](https://github.com/karol-majewski)
- 🐞 修复 Table 的 `rowSelection` 的类型。[#10374](https://github.com/ant-design/ant-design/issues/10374)
## 3.5.0
`2018-05-04`
- 🌟 组件 `Badge` 新增 `title` 属性支持鼠标 hover 的时候显示。[74d81c2](https://github.com/ant-design/ant-design/commit/74d81c2d078a3c84b3e44cbfbdd99b8f479ea71d) [@ludwigbacklund](https://github.com/ludwigbacklund)
- 🌟 添加 `successPercent``Progress[format]` 的参数。[#10096](https://github.com/ant-design/ant-design/issues/10096)
- 🌟 更新 `rc-notification` 到 3.1.0 来支持组件 `Notification``maxCount` 属性。[#10161](https://github.com/ant-design/ant-design/pull/10161) [@jzhangs](https://github.com/jzhangs)
- 🌟 更新 `rc-cascader` 到 1.13.0 来支持组件 `Cascader``filedNames` 属性。[react-component/cascader#23](https://github.com/react-component/cascader/pull/23) [@405go](https://github.com/405go)
- 🌟 组件 `Notification` 支持通过 key 更新通知属性。 [react-component/notification#40](https://github.com/react-component/notification/pull/40) [@yevhen-hryhorevskyi](https://github.com/yevhen-hryhorevskyi)
- 🌟 组件 `List` 支持内置的翻页功能。[#10135](https://github.com/ant-design/ant-design/pull/10135)
- Table
- 🌟 新增 `sortOrder` 参数传递给列配置中的 `sorter` 方法。[#10306](https://github.com/ant-design/ant-design/pull/10306) [@kumarashwin](https://github.com/kumarashwin)
- 🐞 修复头部单元格的边框样式问题。[#10359](https://github.com/ant-design/ant-design/issues/10359)
- 🐞 修复当数据变化时用户选择项丢失的问题。[#10332](https://github.com/ant-design/ant-design/pull/10332) [@chrvadala](https://github.com/chrvadala)
- `Menu` 升级 `rc-menu``7.x` [#10305](https://github.com/ant-design/ant-design/pull/10305)
- 🌟 更好的 aria-* 属性支持。[react-component/menu#137](https://github.com/react-component/menu/pull/137)
- 🌟 一些内部优化提升组件性能。[react-component/menu#133](https://github.com/react-component/menu/pull/133)
- 🌟 支持将属性传递到菜单项中。[react-component/menu#135](https://github.com/react-component/menu/pull/135)
- 🐞 修复一些快捷键的问题。[react-component/menu#132](https://github.com/react-component/menu/pull/132)
- Collapse
- 🌟 更新 `rc-collapse` 到 1.9.0 优化键盘支持。[react-component/collapse#84](https://github.com/react-component/collapse/pull/84/) [@kossel](https://github.com/kossel)
- 🌟 支持通过 less 定义组件 `Collapse` 的样式。[#9943](https://github.com/ant-design/ant-design/pull/9943) [@davidhatten](https://github.com/davidhatten)
- Select
- 🐞 修复 `placeholder` 的 ts 类型问题。[#10282](https://github.com/ant-design/ant-design/pull/10282) [@thomasthiebaud](https://github.com/thomasthiebaud)
- 🐞 修复不显示箭头时多余的空白。[#10296](https://github.com/ant-design/ant-design/pull/10296)
- 🐞 修复属性 `value` 的 typescript 类型错误。[#10336](https://github.com/ant-design/ant-design/pull/10336) [@paranoidjk](https://github.com/paranoidjk)
- Input
- 🐞 修复 `Input.Search` 当 disabled 为 true 时按钮没有被禁用的问题。[#10040](https://github.com/ant-design/ant-design/issues/10040)
- 🐞 修复 `Input.Group` 在表单中对齐的问题。[#10281](https://github.com/ant-design/ant-design/issues/10281)
- Form
- 🐞 修复 `Form.onValuesChange` 的 ts 类型错误。[#10231](https://github.com/ant-design/ant-design/pull/10231) [@whtsky](https://github.com/whtsky)
- 🐞 修复 `ComponentDecorator` typescript 定义的错误。[#10324](https://github.com/ant-design/ant-design/pull/10324) [@paranoidjk](https://github.com/paranoidjk)
- 🐞 修复 `Divider` 为 dashed 时的样式问题。[#10216](https://github.com/ant-design/ant-design/issues/10216)
- 🐞 修复 `Spin` 覆盖层的展示问题。[#10227](https://github.com/ant-design/ant-design/issues/10227)
- 🐞 修复 `Notification` 鼠标 hover 是图标的颜色问题。[#10272](https://github.com/ant-design/ant-design/issues/10272)
- 🐞 修复 `Upload` 组件属性 `lastModifiedDate` 的拼写错误。[#10315](https://github.com/ant-design/ant-design/pull/10315) [@danielg2002](https://github.com/danielg2002)
- 🐞 修复 `Button` 的属性类型,使用 `React.HTMLProps`。[#10229](https://github.com/ant-design/ant-design/pull/10229) [@whtsky](https://github.com/whtsky)
- 🐞 修复 less 命名约定不一致的问题。 [#10275](https://github.com/ant-design/ant-design/issues/10275)
## 3.4.5
`2018-05-03`
- 🐞 修复 Upload 上传文件名不展示file 对象属性为空)的问题。[#10319](https://github.com/ant-design/ant-design/issues/10319)
## 3.4.4
`2018-04-28`
- 🐞 修复 3.4.2 中引入的 Upload 中 onChange 参数 `{ file }` file 不是 File 实例的问题。[#10293](https://github.com/ant-design/ant-design/issues/10293)
- 🐞 修复 webpack@4 下使用 Tree Shaking 样式丢失的问题。[#10217](https://github.com/ant-design/ant-design/pull/10217) [@whtsky](https://github.com/whtsky)
## 3.4.3
`2018-04-23`
- 🐞 修复了 webpack@4 下使用 Tree Shaking 样式丢失的问题。[#10197](https://github.com/ant-design/ant-design/pull/10197) [@Aladdin-ADD](https://github.com/Aladdin-ADD)
- 🐞 修复 `Menu` 组件在 `dark` 主题下点击区域的问题。[#10187](https://github.com/ant-design/ant-design/pull/10187) [@dgeibi](https://github.com/dgeibi)
## 3.4.2
`2018-04-22`
- 💄 部署网站到 [netlify](http://netlify.com/),解决网站被墙的问题。
- 🐞 修复和调整 Menu、Tooltip、Card、Anchor、Avatar、Form、Tabs、Transfer、Tree、AutoComplete 等组件的 TypeScript 定义。
- 💄 增加 `sideEffects` 配置以优化 Tree Shaking 效果。[#10043](https://github.com/ant-design/ant-design/pull/10043) [@Aladdin-ADD](https://github.com/Aladdin-ADD)
- List
- 🐞 修复多余边框问题。[#10028](https://github.com/ant-design/ant-design/issues/10028)
- 🐞 修复 `locale` 属性被传递给 div 的警告。[#10128](https://github.com/ant-design/ant-design/pull/10128) [@slonoed](https://github.com/slonoed)
- 🐞 修复 Upload 的文件 url 带有参数时,图片预览效果失效的问题。[#10102](https://github.com/ant-design/ant-design/issues/10102)
- 🐞 修复 Progress 的百分比越界时的展现。[0eb8357](https://github.com/ant-design/ant-design/commit/0eb835772dbaa7ed14babe03fc177821c5bd5ca5)
- Menu
- 🐞 修复 SubMenu 的失效箭头样式。[#10113](https://github.com/ant-design/ant-design/issues/10113)
- 🐞 修复 `collapsedWidth` 为像素字符串 `40px` 菜单宽度失效的问题。[#10140](https://github.com/ant-design/ant-design/issues/10140)
- 🐞 修复一个某些情况下 Form 内使用受控组件时无法编辑的问题。[#9790](https://github.com/ant-design/ant-design/issues/9790)
- 🐞 修复 Card 切换 loading 状态时的内边距跳动问题。[#10052](https://github.com/ant-design/ant-design/pull/10052) [@zheeeng](https://github.com/zheeeng)
- 🐞 修复 Avatar 图片加载失败时的文字没有正确缩放的问题。[#10184](https://github.com/ant-design/ant-design/pull/10184)
- 🐞 修复 Table 的 `getCheckboxProps` 无法动态更新的问题。[#10133](https://github.com/ant-design/ant-design/issues/10133)
- 🐞 修复 CheckGroup 指定 `prefixCls` 没有传递给 Checkbox 的问题。[#9950](https://github.com/ant-design/ant-design/issues/9950)
## 3.4.1
`2018-04-08`
- 🐞 修复了 Badge 代码错误引起的 TypeScript 类型报错。[#9931](https://github.com/ant-design/ant-design/issues/9931)
- 💄 优化了 Card `actions` 点击区域的范围。[#9882](https://github.com/ant-design/ant-design/issues/9882)
- 🐞 修复了 Divider 与浮动元素一起使用时的样式问题。[#9956](https://github.com/ant-design/ant-design/issues/9956)
- 🐞 修复了 Form 高级搜索模式下的样式问题。[#9907](https://github.com/ant-design/ant-design/issues/9907)
- 🐞 补充了 Table 缺失的 `onHeaderRow` TypeScript 定义。[#9902](https://github.com/ant-design/ant-design/pull/9902) [@Nokecy](https://github.com/Nokecy)
- 💄 优化了 Tree 自定义图标示例。[#9893](https://github.com/ant-design/ant-design/pull/9893)
- 🐞 修复了 Upload 对无扩展名图片地址的预览展示问题。[#9936](https://github.com/ant-design/ant-design/pull/9936)
## 3.4.0
`2018-04-01`
- Tree
- 🛠 在这个版本里,我们重构了 Tree 底层的代码,以解决一些存在了很久的问题。
- 🌟 新增 `defaultExpandParent` 用于在第一次渲染时自动展开父节点。
- 🌟 新增 `disabled` 用于禁用整棵树。
- 🌟 TreeNode 新增 `icon` 用于设置自定义图标。
- 🌟 优化了 TreeNode 设置 `disabled` 时的勾选逻辑。
- 🌟 Anchor 新增 `getContainer` 用于指定内容滚动的容器。
- 🌟 Table 新增 less 变量 `@table-expanded-row-bg`。[#9789](https://github.com/ant-design/ant-design/pull/9789)
- 🐞 修复一处 less 语法错误。[#9832](https://github.com/ant-design/ant-design/pull/9832) [@jojoLockLock](https://github.com/jojoLockLock)
- 🐞 修复 LocaleProvider 中 moment.locale 调用报错的问题。 [#9853](https://github.com/ant-design/ant-design/pull/9853)
- 🐞 修复 WeekPicker 的 style 属性不生效的问题。[#9848](https://github.com/ant-design/ant-design/issues/9848)
- 🐞 修复 Layout.Sider 的 TypeScript 定义。[#9885](https://github.com/ant-design/ant-design/pull/9885) [@zachguo](https://github.com/zachguo)
- 💄 优化了 Modal 中超长内容的显示。[#9592](https://github.com/ant-design/ant-design/pull/9592)
- 🌟 新增斯洛维尼亚语。
## 3.3.3
`2018-03-25`
- 回退上个版本 Upload 中 `file` 类型的修改。
## 3.3.2
`2018-03-24`
- 🐞 `Carousel`: 升级 `react-slick` 版本以修复宽度计算错误。 [#3659](https://github.com/ant-design/ant-design/issues/3659)
- 💄 `Rate`: 调整 `disabled` 样式。 [#9747](https://github.com/ant-design/ant-design/issues/9747)
- 💄 `Modal`: 调整 `confirm-modal` 样式以修复 content 内使用栅格会错位的问题。 [#9374](https://github.com/ant-design/ant-design/issues/9374)
- 💄 `Menu`: 调整样式以修复鼠标事件范围。[#9666](https://github.com/ant-design/ant-design/pull/9666) [@dgeibi](https://github.com/dgeibi)
- 🐞 `Upload`: 修复 `beforeUpload``file` 类型错误。 [#9775](https://github.com/ant-design/ant-design/issues/9775)
- 🐞 `Button`: 修复文本改变时,空格插入没有重新计算 [4502ad8](https://github.com/ant-design/ant-design/commit/4502ad8376e536c450fa4f27d2a5855be5a153e7)
## 3.3.1
`2018-03-18`
- 💄 调整 danger Button 的 `focus` 样式。
- 🐞 修复 enterButton 的值为 button 元素时显示错误的问题。 [#9639](https://github.com/ant-design/ant-design/issues/9639)
- 🐞 修复 Table 中的 `column.title` 的缺少 key 的问题。 [#9658](https://github.com/ant-design/ant-design/issues/9658) [@terence55](https://github.com/terence55)
- 🐞 修复 `scroll: { x: true }``.ant-table-scroll table`宽度为 `auto`的情况下不工作的问题。[#9704](https://github.com/ant-design/ant-design/pull/9704)
- 🐞 修复表单校验文字消失的时候输入框会抖一下的问题。 [#8831](https://github.com/ant-design/ant-design/issues/8831)
- 🐞 修复 `TimePicker` 里的 isMoment 调用在 parcel 里会报错的问题。[85c78e4](https://github.com/ant-design/ant-design/commit/85c78e49a91737c2841dc42621db21ca248b62b4)
- 💄 调整 Table 的圆角样式。 [#9674](https://github.com/ant-design/ant-design/pull/9674)
## 3.3.0
`2018-03-12`
- 🌟 `Alert` 组件新增 `afterClose` 属性,用于实现更流畅的关闭效果。[#9448](https://github.com/ant-design/ant-design/pull/9448) [@Hughen](https://github.com/Hughen)
- 🌟 `Calendar` 组件新增 `validRange` 属性,用于设置显示的时间范围。[71f65a0](https://github.com/ant-design/ant-design/commit/71f65a0be8e72a67f334c57e79ae3ff5fb640630) [@Rohanhacker](https://github.com/Rohanhacker)
- 🌟 `Card` 组件新增 `defaultActiveTabKey` 属性,用于初始化选中面板的 key。[30fe88d](https://github.com/ant-design/ant-design/commit/30fe88d4bdcec765bf92ca32a755d9646b36978e) [@u3u](https://github.com/u3u)
- `DatePicker`
- 🌟 新增 `dropdownClassName` 属性,用于设置弹出日历的 className。[#7211](https://github.com/ant-design/ant-design/issues/7211)
- 🐞 修复解析 `moment` 对象出错的问题。[#9539](https://github.com/ant-design/ant-design/pull/9539)
- 🐞 修复引入土耳其语 `tr_TR` 文件的问题。[#9373](https://github.com/ant-design/ant-design/issues/9373)
- 🌟 `Divider` 组件新增 `orientation` 属性,用于设置分割线内文本的对齐方式。[#9275](https://github.com/ant-design/ant-design/pull/9275) [@jrvboesch](https://github.com/jrvboesch)
- 🌟 `Modal` 组件新增 `keyboard` 属性,用于设置按下 `Esc` 键是否可以关闭 `Modal`。[#8818](https://github.com/ant-design/ant-design/issues/8818)
- 🌟 优化 `Radio``Checkbox` 组件 `onChange` 属性中的事件参数的 `TypeScript` 类型定义的问题。[#9574](https://github.com/ant-design/ant-design/issues/9574)
- `Table`
- 🌟 新增 `pagination` 属性的配置项 `position`,用于设置分页的显示位置。[#9357](https://github.com/ant-design/ant-design/pull/9357) [@kanweiwei](https://github.com/kanweiwei)
- 🌟 新增 `rowSelection` 属性的配置项 `onSelect` 回调函数的事件参数。[#9376](https://github.com/ant-design/ant-design/pull/9376) [@kanweiwei](https://github.com/kanweiwei)
- 🌟 新增 `rowSelection` 属性的配置项 `columnWidth`,用于设置选择框的列宽。[#9474](https://github.com/ant-design/ant-design/pull/9474) [@SimpleFrontend](https://github.com/SimpleFrontend)
- 🐞 修复 `Table` 组件在 `Chrome` 下圆角边框样式的问题。[af8e54f](https://github.com/ant-design/ant-design/commit/af8e54f1d6ac2891892e39b153cbe3e998370f61)
- 🌟 `Timeline` 组件新增 `pendingDot` 属性,用于设置幽灵节点的图标。[#9546](https://github.com/ant-design/ant-design/pull/9546) [@SimpleFrontend](https://github.com/SimpleFrontend)
- 🌟 `TimePicker` 组件新增 `inputReadOnly` 属性,用于设置组件是否只读。[4a69446](https://github.com/ant-design/ant-design/commit/4a69446be155c1c176b18cb2c31459f999aa5d5e) [@JesperWe](https://github.com/JesperWe)
- 🌟 `TreeSelect` 组件新增 `dropdownClassName` 属性。[69b154f](https://github.com/ant-design/ant-design/commit/69b154f9a9cfa5f2d89a82b6ed730d4d8793de73) [56e4ce0](https://github.com/ant-design/ant-design/commit/56e4ce099d950601538d72243563021e8083776b)
- 🌟 优化 `Upload` 组件在上传非图片格式文件时的预览效果。[#9621](https://github.com/ant-design/ant-design/pull/9621) [@zswang](https://github.com/zswang)
- 🐞 修复 `Progress` 组件的 `successPercent` 属性无法决定组件是否处于 `success` 状态的问题。[#9382](https://github.com/ant-design/ant-design/issues/9382)
- 🐞 修复 `Tabs` 组件字体尺寸的问题。[#9509](https://github.com/ant-design/ant-design/pull/9509)
- 🐞 修复 `Tree``TreeSelect` 组件的父节点在 `disabled` 状态下无法展开的问题。[#9539](https://github.com/ant-design/ant-design/pull/9539)
## 3.2.3
`2018-03-02`
- 🐞 修复组件 `Select` 中的 `onPopupScroll` 属性的 ts 定义。 [#9475](https://github.com/ant-design/ant-design/pull/9475) [@twobin](https://github.com/twobin)
- 🐞 修复 `Table` 过滤条件下拉选择框的问题。 [#9209](https://github.com/ant-design/ant-design/issues/9209)
- 🐞 修复 `Timeline` 自定义头部样式在 Chrome 下的显示问题。 [#9429](https://github.com/ant-design/ant-design/pull/9429) [@vthinkxie](https://github.com/vthinkxie)
- 🐞 修复 `Select` 下拉窗口的边框显示问题。 [82092c1](https://github.com/ant-design/ant-design/commit/82092c154ac1fa7ff2f89e1adbdf0aaf22e3ff53)
- 🐞 修复对 less 3 的兼容性问题。 [#7850](https://github.com/ant-design/ant-design/issues/7850)
- 🐞 修复 `DatePicker.WeekPicker` 年份问题。 [#9463](https://github.com/ant-design/ant-design/issues/9463)
- 🐞 修复 `Button.Group` 在 Chrome 下的定位对齐问题。 [#9457](https://github.com/ant-design/ant-design/issues/9457)
## 3.2.2
`2018-02-24`
- 🌟 添加 `Pagination` 字体变量。 [#9351](https://github.com/ant-design/ant-design/issues/9351)
- 🌟 添加 `Badge` 字重变量。 [#9352](https://github.com/ant-design/ant-design/issues/9352)
- 🐞 修复 `Table` 当自定义 `loading.indicator`不显示emptyText。 [#9355](https://github.com/ant-design/ant-design/issues/9355)
- 🐞 修复 `Form.create` 。 [#9331](https://github.com/ant-design/ant-design/issues/9331)
- 🐞 回滚 `Table``column.dataIndex` 的 TypeScript 定义。 [#9393](https://github.com/ant-design/ant-design/issues/9393)
- 🐞 修复 `Layout` 中 sider 高度不足时,最后一个菜单无法显示。 [#9398](https://github.com/ant-design/ant-design/issues/9398) [@MJ111](https://github.com/MJ111)
- 🐞 修复 `Badge` dot 模式问题。 [#9359](https://github.com/ant-design/ant-design/issues/9359) [@khayalan-mathew](https://github.com/khayalan-mathew)
## 3.2.1
`2018-02-11`
- 🌟 新增了部分著名产品的图标。[c04377e5](https://github.com/ant-design/ant-design/commit/c04377e5413d344b37c34ceac6fee456933fa516)
- Mention
- 🌟 现在 `multiLines` 模式的高度将默认自适应内容。
- 🐞 修复指定了 `placeholder` 时无法粘贴内容的问题。[#9215](https://github.com/ant-design/ant-design/issues/9215)
- Table
- 🐞 修复中号表格的 padding。[#9319](https://github.com/ant-design/ant-design/issues/9319)
- 🐞 修复小号表格的边框错位问题。[#8980](https://github.com/ant-design/ant-design/issues/8980)
- 🐞 修复排序图标点击区域溢出表头的问题。[#8979](https://github.com/ant-design/ant-design/issues/8979)
- 🌟 优化了 `column.dataIndex` 的 TypeScript 定义。[#9298](https://github.com/ant-design/ant-design/pull/9298) [@clinyong](https://github.com/clinyong)
- Select
- 🐞 修复使用键盘导航时,滚动条不会自动定位的问题。[#9276](https://github.com/ant-design/ant-design/issues/9276)
- 🐞 修复在 IE11 下的箭头位置。
- 🐞 修复 Upload `beforeUpload` 返回 `false` 时,上传文件仍然显示 `uploading` 以及文件列表被替换的问题。[#8020](https://github.com/ant-design/ant-design/issues/8020)
- 🐞 修复 `vertical` 布局的 Form 下反馈图标错位的问题。[#9153](https://github.com/ant-design/ant-design/issues/9153)
- 🐞 修复 Card 没有子节点时 `loading` 样式不生效的问题。[#9258](https://github.com/ant-design/ant-design/issues/9258)
- 🐞 修复 Avatar 的图片不存在时的背景色。[#9278](https://github.com/ant-design/ant-design/pull/9278) [@andriijas](https://github.com/andriijas)
- 🐞 修复 RangePicker 选择结束时间时报 `Cannot read property 'locale' of undefined` 的问题。[#9267](https://github.com/ant-design/ant-design/issues/9267)
- 🐞 修复 ButtonGroup 内使用了失效按钮和 Tooltip 时样式错位的问题。[#9296](https://github.com/ant-design/ant-design/issues/9296) [#9296](https://github.com/ant-design/ant-design/issues/9296)
- 🐞 修复 Dropdown 的子菜单被遮挡的问题。[#9218](https://github.com/ant-design/ant-design/issues/9218)
## 3.2.0
`2018-02-04`
- 🌟 Tab 新增 `tabBarGutter` 属性,用于设置 tabs 之间的间隙。[#8644](https://github.com/ant-design/ant-design/pull/8644) [@lixiaoyang1992](https://github.com/lixiaoyang1992)
- 🌟 Layout 新增 `hasSider` 属性,用于避免服务端渲染时显示问题。[#8937](https://github.com/ant-design/ant-design/issues/8937)
- 🌟 Progress 新增 `successPercent` 属性,用于显示分段进度条。[例子](https://ant.design/components/progress-cn/#components-progress-demo-segment)
- 🌟 Alert 新增 `iconType` 属性,用于显示自定义图标。[#8811](https://github.com/ant-design/ant-design/pull/8811) [@minwe](https://github.com/ant-design/ant-design/pull/8811)
- 🌟 DatePicker 新增 `id` 属性。[#8598](https://github.com/ant-design/ant-design/pull/8598) [@mgrdevport](https://github.com/mgrdevport)
- 🌟 Collapse 新增 `forceRender` 属性,用于渲染隐藏的内容。[#9192](https://github.com/ant-design/ant-design/pull/9192) [#Pyroboomka](https://github.com/ant-design/ant-design/pull/9192) [@paulcmason](https://github.com/react-component/collapse/pull/82)
- RangePicker
- 🌟 改进 `ranges` 属性,使其支持方法。[#8281](https://github.com/ant-design/ant-design/issues/8281)
- 🐞 修复无法手动输入开始时间的问题。[#6999](https://github.com/ant-design/ant-design/issues/6999)
- 🐞 修复点击预设范围关闭日期面板的时候没有动画的问题。[#6364](https://github.com/ant-design/ant-design/issues/6364)
- 🐞 修复点击预设范围时不触发 `onOk` 的问题。[#7747](https://github.com/ant-design/ant-design/issues/7747)
- Select
- 🌟 改进了 `onChange``onDeselect` 方法,现在他们会接受选中的 `Option` 作为第二个参数。
- 🐞 修复自动分词不触发 `onSelect` 的问题。[#9094](https://github.com/ant-design/ant-design/issues/9094)
- 🐞 修复 Chrome 上下拉框没有滚动条的问题。
- 🌟 改进 Table 的 `rowSelection[getCheckboxProps]` 属性,现在可以传任意属性给 chekbox 了。[#9054](https://github.com/ant-design/ant-design/pull/9054) [@mgrdevport](https://github.com/ant-design/ant-design/pull/9054)
- 🐞 修复 Calendar 的 `mode` 属性不能从外部控制的问题。[#9243](https://github.com/ant-design/ant-design/pull/9243) [@mgrdevport](https://github.com/ant-design/ant-design/pull/9243)
- 🐞 修复 AutoComplete 在 Form 中显示错误信息时的边框颜色。[9f2b490](https://github.com/ant-design/ant-design/commit/9f2b4905f09fca503da7a8bb5f2b8347bea663b7)
- 🐞 修复 DatePicker 在受控模式下时间显示不正确的问题。[#8885](https://github.com/ant-design/ant-design/issues/8885)
- 🐞 修复 TextArea 在 Edge 下高度计算错误的问题。[#9108](https://github.com/ant-design/ant-design/pull/9108) [@cuyl](https://github.com/cuyl)
- 🐞 修复 Tabs 在 card 模式且 tabPosition 是 `bottom` 时的样式问题。[#9165](https://github.com/ant-design/ant-design/pull/9165) [@ryanhoho](https://github.com/ryanhoho)
- 🌟 新增库尔德语。
## 3.1.6
`2018-01-28`
- 🐞 回退了 [#9141](https://github.com/ant-design/ant-design/pull/9141) 的修改,因其导致的 DatePicker 年月无法选择。
## 3.1.5
`2018-01-27`
- 🐞 修复了 Select 下拉选择框在 IE11 点击滚动条会无故消失的问题。[#7934](https://github.com/ant-design/ant-design/issues/7934) [@tianlang89757](https://github.com/tianlang89757)
- 🐞 修复了 Form 中使用 `getFieldDecorator` 当 id 重复时引用冲突的问题。[#9103](https://github.com/ant-design/ant-design/issues/9103) [#7351](https://github.com/ant-design/ant-design/issues/7351)
- 🐞 修复了 RangePicker 在语言切换时会显示上一次的语言的问题。[#8970](https://github.com/ant-design/ant-design/issues/8970)
- 🐞 修复了 DatePicker 在受控模式下时间显示不正确的问题。[#8885](https://github.com/ant-design/ant-design/issues/8885)
- 🐞 修复了 Table 在 `loading` 时显示空提示的问题。[#9095](https://github.com/ant-design/ant-design/pull/9095) [@sallen450](https://github.com/sallen450)
- 🐞 补充 Icon 类型 `file-word`。[#9092](https://github.com/ant-design/ant-design/issues/9092) [#9061](https://github.com/ant-design/ant-design/issues/9061)
- 🐞 修复写错的字体名称,造成浏览器无法正确识别的问题。[commit/506f97](https://github.com/ant-design/ant-design/commit/506f97640ec34a6d3d9fdb18e8036e5d34796a5f)
- 📖 修复了 TypeScript 定义
- 补充 Notification 缺失的 `duration` 定义。[pull/9120](https://github.com/ant-design/ant-design/pull/9120) [@duhongjun](https://github.com/duhongjun)
- 补充 Steps 缺失的 `style` 定义。[pull/9126](https://github.com/ant-design/ant-design/pull/9126) [@wanliyunyan](https://github.com/wanliyunyan)
- 🌟 优化了 Avatar 的默认背景色。[commit/275946](https://github.com/ant-design/ant-design/commit/275946090823ab8da90f1871976c671b2c7ac851)
- 🌟 新增了 Slider 以及 Menu 的 less 变量,更加方便的修改主题。[pull/9065](https://github.com/ant-design/ant-design/pull/9065) [pull/9115](https://github.com/ant-design/ant-design/pull/9115) [@mrgeorgegray](https://github.com/mrgeorgegray)
## 3.1.4
`2018-01-21`
- 🐞 修复 ButtonGroup 错误 z-index 导致的样式问题。[#9014](https://github.com/ant-design/ant-design/issues/9014)
- 🐞 修复 Dropdown.Button 不能被完全禁用的问题。[#8991](https://github.com/ant-design/ant-design/issues/8991) [@sallen450](https://github.com/sallen450)
- 🐞 修复 Layout 错误的响应式相关文档。[#8995](https://github.com/ant-design/ant-design/pull/8995) [@ReedSun](https://github.com/ReedSun)
- 🐞 修复 List `grid` 不支持 xxl 配置的问题。[#9019](https://github.com/ant-design/ant-design/issues/9019)
- 🐞 修复 RangePicker 关闭选择面板之后无法清空已选开始时间的问题。[#8839](https://github.com/ant-design/ant-design/issues/8839)
- 🐞 修复 Tabs 错误外边距导致的样式问题。[commit/200d6c](https://github.com/ant-design/ant-design/commit/200d6cb11aba12a488510f957353bbd5bd1dcd1b)
- 🐞 修复 WeekPicker 显示错误周数的问题。[#9021](https://github.com/ant-design/ant-design/issues/9021)
- 🐞 修复 TypeScript 定义
- 补充 Menu 缺失的 `subMenuCloseDelay``subMenuOpenDelay`。[#8976](https://github.com/ant-design/ant-design/issues/8976) [@Rohanhacker](https://github.com/Rohanhacker)
- 重构了 DatePicker 相关 type 定义。[commit/0bb531](https://github.com/ant-design/ant-design/commit/0bb531aca6cb2045d5323196a599c925537a4eb0)
- 修复了 Input `maxLength` type 定义。[#9046](https://github.com/ant-design/ant-design/pull/9046) [@Riokai](https://github.com/Riokai)
- 🌟 新增 less 变量
- Checkbox 和 Radio 相关:[#9003](https://github.com/ant-design/ant-design/pull/9003) [@mrgeorgegray](https://github.com/mrgeorgegray)
- Breadcrumb 相关:[#9022](https://github.com/ant-design/ant-design/pull/9022) [@mrgeorgegray](https://github.com/mrgeorgegray)
- 🌟 新增 aliyun 图标。
## 3.1.3
`2018-01-14`
- 🐞 修复 `locale``null` 时 LocaleProvider 出错的问题。
## 3.1.2
`2018-01-13`
- 🐞 修复 Button 不能正确显示 `0` 的问题。[#8733](https://github.com/ant-design/ant-design/pull/8733) [@Cuihongsen](https://github.com/Cuihongsen)
- 🐞 修复 Table 和 List 中由于 Spin 导致的滚动条。[#8799](https://github.com/ant-design/ant-design/issues/8799)
- 🐞 修复不能传方法给 Table[emptyText] 的问题。[#8871](https://github.com/ant-design/ant-design/issues/8871)
- 🐞 修复 Dropdown[transitionName] 不生效的问题。
- 🐞 修复 Input 中输入数字时字体会发生变化的问题。 [#8636](https://github.com/ant-design/ant-design/issues/8636)
- 🐞 修复 import 多个 locale 文件后日期文本显示错误的问题。[#8785](https://github.com/ant-design/ant-design/pull/8785)
- 🐞 修复 dist/antd-with-locales.js 中的 locale 会多一个 default 字段的问题。[#8881](https://github.com/ant-design/ant-design/issues/8881)
- 🐞 修复 TypeScript 定义 [4cc29bc](https://github.com/ant-design/ant-design/commit/4cc29bc11cf7c019c63a25693adff3dbb58b41c3) [693e734](https://github.com/ant-design/ant-design/commit/693e734a82b5e1faf25b025127afca67e75f9c88) [67e956d](https://github.com/ant-design/ant-design/commit/67e956dddd040f63b2a59b8b619123bbb0065780) [ecd4177](https://github.com/ant-design/ant-design/commit/ecd4177638da1eac3a3750fe5ad68b9309865542) [33119ec](https://github.com/ant-design/ant-design/commit/33119ec535e7b819541d4753464871988b37dd6f) [88e0c9b](https://github.com/ant-design/ant-design/commit/88e0c9b436f196def62e737ea72e105aba4b5d4e)
- 🌟 新增 less 变量 [b9b5aba](https://github.com/ant-design/ant-design/commit/b9b5abab3364bf752e9644415088b142a153e385) [5931b20](https://github.com/ant-design/ant-design/commit/5931b201da58e993227a04128045e627f2b65c46) [c9d7397](https://github.com/ant-design/ant-design/commit/c9d73978dd2694f9d2bd0111f82a20d237f83621)
- 🌟 优化中文引号的显示。
## 3.1.1
`2018-01-08`
- 📖 发布了全新的官网和设计文档。
- 📖 更新了项目实战文档到 [roadhog 2.0](https://github.com/sorrycc/blog/issues/55)。[5dcf1c0](https://github.com/ant-design/ant-design/commit/5dcf1c015fc2674adb09434bf766549d6f3f0022)
- 📖 发布了 Ant Design 3.0 的 sketch 模板包。[22dfe88](https://github.com/ant-design/ant-design/commit/22dfe88ab043c1e116382fc96b7d78cabf125054)
- 🐞 修复 Dropdown 组件的 TypeScript 类型定义中 trigger 属性缺少 contextMenu 事件的问题。[#8646](https://github.com/ant-design/ant-design/issues/8646) [@cjahv](https://github.com/cjahv)
- 🐞 修复 Button 内使用 HOC 组件时两个中文字符间未添加空格的问题。
- 🐞 修复 List 组件在 IE 11 下的样式兼容问题。[#8784](https://github.com/ant-design/ant-design/issues/8784)
- 🐞 修复 Select 组件 notFoundContent 属性不生效的问题。[#8809](https://github.com/ant-design/ant-design/issues/8809)
- 🐞 修复 BackTop 组件在 React 16 下 target 属性出现警告的问题。[#8848](https://github.com/ant-design/ant-design/issues/8848)
- 🐞 修复当设置 gutter 后 List 组件出现横向滚动条的问题。[#8799](https://github.com/ant-design/ant-design/issues/8799)
- 🐞 修复 Anchor.Link 的 href 属性不支持完整链接的问题。[#8808](https://github.com/ant-design/ant-design/issues/8808)
- 🌟 优化中文引号的字体。[c6fcc31](https://github.com/ant-design/ant-design/commit/c6fcc3121758dfe6ac5b50c1b55790eb42b805c5)
## 3.1.0
`2017-12-29`
新年快乐!~ 2018年了00后都成年了少年赶紧提个 PR 给我们吧!~
- 🐞 修复组件 Spin 可能出现跳动的问题。[#8602](https://github.com/ant-design/ant-design/issues/8602) [@jhsu](https://github.com/jhsu)
- 🐞 修复 Table 在设置 `size=small` 的情况下出现多余 padding 的问题。[#8724](https://github.com/ant-design/ant-design/issues/8724)
- 🐞 修复 Checkbox.Group 在 Form 中和 label 的对齐问题。[#8739](https://github.com/ant-design/ant-design/issues/8739)
- 🐞 修复 Affix 组件出现滚动条的问题。[#8606](https://github.com/ant-design/ant-design/issues/8606)
- 🐞 修复组件 List "No Data" 和加载动画重叠的问题。[#8647](https://github.com/ant-design/ant-design/issues/8647)
- 🌟 为 Input 添加 onKeyUp。[#8705](https://github.com/ant-design/ant-design/issues/8705) [@delesseps](https://github.com/delesseps)
- 🌟 折叠面板 Collapse 添加 `showArrow` 来支持隐藏箭头。[#8536](https://github.com/ant-design/ant-design/pull/8536) [@apieceofbart](https://github.com/apieceofbart)
- 🌟 评分 Rate 组件添加 `allowClear`,支持再次点击后重置。[#8627](https://github.com/ant-design/ant-design/issues/8627)
- 🌟 优化 BackTop 组件的响应式效果。[#8719](https://github.com/ant-design/ant-design/issues/8719) [@JetRunner](https://github.com/JetRunner)
- 🌟 Modal 组件添加 `destroyOnClose` 支持关闭时销毁 Modal 里的子元素。[#8769](https://github.com/ant-design/ant-design/pull/8769) [@Rohanhacker](https://github.com/Rohanhacker)
- 🌟 组件 Pagination 添加 `hideOnSinglePage` 支持当只有一页时隐藏组件。[#8615](https://github.com/ant-design/ant-design/pull/8615) [@camsong](https://github.com/camsong)
- 🌟 支持 List 组件自定义加载动画。
- 👻 你现在可以通过 CodeSandbox 来打开官方文档中的示例了。
## 3.0.3
`2017-12-22`
- 🐞 Form.create 返回值增加 `React.SFC` 类型的支持。[#8672](https://github.com/ant-design/ant-design/issues/8672)
- 🐞 修复 Form 控件高度和对齐的问题。[#8701](https://github.com/ant-design/ant-design/issues/8701)
- 🐞 修复前后置标签与 Input 高度不一致的问题。[#8680](https://github.com/ant-design/ant-design/issues/8680)
- 🐞 修复 Table 固定列时左右未对齐的问题。[#8660](https://github.com/ant-design/ant-design/issues/8660)
## 3.0.2
`2017-12-17`
- 📝 提供了 3.0 迁移工具。[e71b68dd](https://github.com/ant-design/ant-design/commit/e71b68dd1d2ff91200fea6dd9d56e6aa5653edbc)
- 📝 重写了 [开源贡献指南](https://github.com/ant-design/ant-design/blob/master/.github/CONTRIBUTING.zh-CN.md)
- 🌟 优化 notification 在小屏幕下的显示效果。[#8631](https://github.com/ant-design/ant-design/issues/8631)
- 🌟 优化了 Pagination 的样式和并修复了对齐和边距问题。
- 🐞 升级 react-slick 到 `0.16.0`,修复 peerDependencies 安装警告。[#8455](https://github.com/ant-design/ant-design/issues/8455)
- 🐞 修复固定列头的表格大小设置无效的问题。[#8577](https://github.com/ant-design/ant-design/issues/8577)
- 🐞 修复 DatePicker 等时间组件的 `locale` 属性失效的问题。[#8635](https://github.com/ant-design/ant-design/issues/8635)
- 🐞 修复 Popover 的箭头偏移和大小无法覆盖的问题。[#8548](https://github.com/ant-design/ant-design/issues/8548) [#8549](https://github.com/ant-design/ant-design/issues/8549)
- 🐞 修复 AutoComponent 的 `notFoundContent` 设置无效的问题。[#8553](https://github.com/ant-design/ant-design/issues/8553)
- 🐞 微调 RangePicker 的垂直对齐问题。
- 🐞 Layout.Sider 的响应式断点和栅格系统保持一致。[#8620](https://github.com/ant-design/ant-design/issues/8620)
- 🐞 修复一个 collapsedWidth 为 0 时,收缩后子菜单依然会显示的问题。[#8587](https://github.com/ant-design/ant-design/issues/8587)
- 🐞 修复 Card 的 `Meta.title` 文本无法自动截断的问题。[#8597](https://github.com/ant-design/ant-design/issues/8597)
- 🐞 修复带边框的 List 下的分页样式边距。[#8562](https://github.com/ant-design/ant-design/issues/8562)
- 🐞 修复一个 Menu 指定了不存在的 defaultOpenKeys 时子菜单无法展开的问题。[#8475](https://github.com/ant-design/ant-design/issues/8475)
- 🐞 修复 Input、AutoComplete、Transfer 的 `InputProps``SearchProps` TypeScript 类型命名冲突。[#8478](https://github.com/ant-design/ant-design/issues/8478)
## 3.0.1
`2017-12-11`
* 移除 Card 无用 DOM wrapper以和 2.x 保持一致。
* 修复 `antd/lib/style/v2-compatible-reset.css` 缺失问题。[28d13e2](https://github.com/ant-design/ant-design/commit/28d13e2539817f87b8a2029ea22d9c30b377167f)
* 修复 Affix 比浏览器可见区域还高时被截断的问题。[31a0654](https://github.com/ant-design/ant-design/commit/31a0654ef990eb7bae2b18095fa0d5230b9be1da)
* 修复 Collapse 展开动画。[edd592c](https://github.com/ant-design/ant-design/commit/edd592cb9dd79d534853e7a0c1b648382e3f1a12)
* 修复 Form 内大尺寸 Input、Button 的对齐问题。[#8459](https://github.com/ant-design/ant-design/issues/8459)
* Menu
* 修复弹层在 Safari 下消失的问题。[#8453](https://github.com/ant-design/ant-design/issues/8453)
* 修复展开动画。[edd592c](https://github.com/ant-design/ant-design/commit/edd592cb9dd79d534853e7a0c1b648382e3f1a12)
* 修复 Notification 样式编译错误。[#8437](https://github.com/ant-design/ant-design/issues/8437)
* 修复迷你 Pagination 的背景色问题。[e13c6d8](https://github.com/ant-design/ant-design/commit/e13c6d87fa6bf7d5cf4b2d5154a85b4793997de5)
* Table
* 修复在移动端样式错乱的问题。[#8465](https://github.com/ant-design/ant-design/issues/8465)
* 修复嵌套表格与 size 属性共用时的样式问题。[#8525](https://github.com/ant-design/ant-design/issues/8525)
* TypeScript
* 修复 AutoComplete 的 TypeScript 定义。[#8383](https://github.com/ant-design/ant-design/pull/8383) [@nidhi-ag](https://github.com/nidhi-ag)
* 修复 Divider 的 TypeScript 定义。[#8504](https://github.com/ant-design/ant-design/pull/8504) [@cyyyu](https://github.com/cyyyu)
* 修复 Dropdown 的 TypeScript 定义。[#8444](https://github.com/ant-design/ant-design/issues/8444)
* 修复 List 的 TypeScript 定义。[e27061e](https://github.com/ant-design/ant-design/commit/e27061ea5b2f2d3273b45862d9b87285448f0998) [1b2a955](https://github.com/ant-design/ant-design/commit/1b2a9550d9595dd2f31f79d1bdd52695ec792692)
* 修复 Table 的 TypeScript 定义。[#8507](https://github.com/ant-design/ant-design/issues/8507) [#8515](https://github.com/ant-design/ant-design/pull/8515) [@danedavid](https://github.com/danedavid)
## 3.0.0
`2017-12-04`
更多内容见 [Ant Design 3.0 发布公告](https://medium.com/ant-design/announcing-ant-design-3-0-70e3e65eca0c)。
### 主要变化
- 全新的[色彩系统](https://ant.design/docs/spec/colors-cn#Color-Palettes),组件主色由『`#108EE9`』改为『`#1890FF`』,新主色我们称之为『拂晓蓝』。
- 全新的视觉样式和组件尺寸,更现代更美观。
- 基础字体大小由 `12px` 增大到 `14px`
- 默认语言由中文改为英文。
- 全面支持 React 16。
- 更友好的 TypeScript 支持。
- 新的 [List](https://ant.design/components/list-cn/) 组件。
- 新的 [Divider](https://ant.design/components/divider-cn/) 组件。
- 新增 30 个[图标](https://ant.design/components/icon-cn/)。
### 不兼容改动
> 如果你从 2.x 升级到 3.x建议直接升级到 3.x 的最新版本。
此版本有部分不兼容的改动,升级时确保修改相应的使用代码。另外由于人肉查找代码中的废弃用法过于低效,所以我们提供了 [antd-migration-helper](https://github.com/ant-design/antd-migration-helper) 用于扫描代码中的废弃用法。
- Card 的 `noHovering` 属性重命名为 `hoverable`,且默认值改为 `true`
- 调整了 Grid 的响应式断点值。详见 [#7230](https://github.com/ant-design/ant-design/pull/7230)
- Form `getFieldDecorator``exclusive` 参数被移除,此类场景应该由 Radio.Group、Checkbox.Group 之类的组件来完成。
- 新增 `Form.createFormField` 方法,`mapPropsToFields` 返回的字段都需要由该方法创建。
```diff
import { Form } from 'antd';
Form.create({
mapPropsToFields() {
return {
- name: { value: 'antd' },
+ name: Form.createFormField({ value: 'antd' }),
};
},
})
```
- 优化了全局的重置样式,如果升级后你的全局样式有问题,可以引入我们提供的 2.x 兼容样式。
```javascript
import 'antd/lib/style/v2-compatible-reset';
```
或者在 less 里引入
```less
@import '~antd/lib/style/v2-compatible-reset.less';
```
- 由于默认语言改为英文,如果你需要显示中文,现在需要配置 `LocalProvider`。
```javascript
import { LocaleProvider } from 'antd';
import zhCN from 'antd/lib/locale-provider/zh_CN';
ReactDOM.render(
<LocaleProvider locale={zhCN}><YourApp /></LocaleProvider>,
document.getElementById('root')
);
```
- Form 下的表单控件不再默认为 `size="large"`。
- `Input.Search` 默认的 🔍 图标只作为装饰,不再响应用户交互。需要添加可交互按钮请使用 `enterButton`。
- UMD 版本的 `dist/antd.js` 不再包含 moment使用的时候需要自己引入 moment。
```diff
<html>
<head>
+ <script src="https://unpkg.com/moment@2.19.3/moment.js"></script>
<script src="https://unpkg.com/antd@3.0.0/dist/antd.js"></script>
</head>
</html>
```
### 以下在 2.x 中废弃的特性被移除
- 🗑 移除了 DatePicker.Calendar 请直接使用 Calendar 组件。
- 🗑 移除了 DatePicker 的 `toggleOpen` 属性, 请使用 `onOpenChange` 代替。
- 🗑 移除了 Form 的 `inline`、`horizontal`、`vertical` 属性,请使用 `layout` 代替。
- 🗑 移除了 Select 的 `multiple`、`tags`、`combobox` 属性,请使用 `mode` 代替。
- 🗑 移除了 Input 对 `type='textarea'` 的支持,请直接使用 `Input.TextArea` 组件。
- 🗑 移除了 Mention 的 `toEditorState` 方法,请使用 `toContentState` 代替。
### 新增功能及改进
- 🌟 Tabs 新增 `size="large"`。
- 🌟 Row 的 `gutter` 属性新增响应式断点的支持,可以使用诸如 `gutter={{ sm: 16, lg: 32 }}` 的设置。
- 🌟 Spin 新增 `indicator` 属性,用于设置自定义的加载指示符。 [#7977](https://github.com/ant-design/ant-design/pull/7977) [@kossel](https://github.com/ant-design/ant-design/pull/7977)
- 🌟 Input.Search 新增 `enterButton` 用于设置自定义的搜索图标。[#7596](https://github.com/ant-design/ant-design/issues/7596)
- 🌟 Mention 新增 `placement`,用于设置下拉框的弹出方向。
- 🌟 Carousel 新增 `next()`、`prev()`、`goTo(slideNumber)` 方法,用于控制面板展示。
- 🌟 Button 新增链接支持,当提供 `href` 时会自动渲染为 `<a>`。[#8343](https://github.com/ant-design/ant-design/pull/8343)
- 🌟 Steps 进行了重构,首次渲染的时候不会再闪烁。 [#6010](https://github.com/ant-design/ant-design/issues/6010)
- 🌟 Switch 新增 `loading` 属性,用于表现加载中的状态。
- Menu
- 🌟 我们使用了 [rc-trigger](https://github.com/react-component/trigger) 重构了菜单以支持延迟加载和窗口边缘浮层自适应方向。
- 🌟 新增 `subMenuOpenDelay` 和 `subMenuCloseDelay`,用于设置子菜单打开和关闭的延迟。
- 🌟 新增 `forceSubMenuRender`,用于强制渲染子菜单。[#5586](https://github.com/ant-design/ant-design/issues/5586)
- Form
- 🌟 新增显示验证信息时的动画效果。
- 🌟 新增按条件渲染表单项的支持。[#react-component/117](https://github.com/react-component/form/issues/117)
- Message
- 🌟 `duration` 允许可选 [#7857](https://github.com/ant-design/ant-design/issues/7857) [@monkindey](https://github.com/monkindey)
- Badge
- 🌟 新增 `offset` 属性,用于设置状态点的位置偏移。
- 🌟 `status` 允许与 `children` 同时使用。[#8164](https://github.com/ant-design/ant-design/issues/8164)
- Card
- 🌟 新增 `inner` 类型。[例子](https://ant.design/components/card-cn/#components-card-demo-inner)。
- 🌟 新增 `cover`、`actions` 以及 `Meta` 子组件。[例子](https://ant.design/components/card-cn/#components-card-demo-meta)。
- DatePicker
- 🌟 新增 `mode` 和 `onPanelChange`,用户控制面板的展示模式。[例子](https://ant.design/components/date-picker-cn/#components-date-picker-demo-mode)。
- 🌟 新增 `WeekPicker` 子组件。[例子](https://ant.design/components/date-picker-cn/#components-date-picker-demo-basic)
- 🌟 新增 `dateRender` 属性,用于自定义日期单元格的渲染。
- TimePicker
- 🌟 新增 `hourStep`、`minuteStep`、`secondStep`,用于设置时间步长。[例子](https://ant.design/components/time-picker-cn/#components-time-picker-demo-interval-options)
- 🌟 新增 `focusOnOpen`,用于设置在打开面板的时候是否聚焦输入框。
- Table
- 🌟 新增 `components` 属性,用于覆盖表格元素的默认标签。
```javascript
// 支持覆盖的元素
const components = {
table: MyTable,
header: {
wrapper: HeaderWrapper,
row: HeaderRow,
cell: HeaderCell,
},
body: {
wrapper: BodyWrapper,
row: BodyRow,
cell: BodyCell,
},
};
<Table components={components} columns={columns} data={data} />
```
- 🌟 新增 `onRow` 属性,用于设置表格列的属性。
- 🌟 新增 `onHeaderRow`,用户设置表格头部列的属性。
- 🌟 新增 `column[onCell]`,用户设置单元格的属性。
- 🌟 新增 `column[onHeaderCell]`,用于设置头部单元格的属性。
- 🌟 新增 `column[align]`,用于设置列内文字的对其方向。
- 🌟 新增 `column[defaultSortOrder]`,用于设置列的默认排序。[#8111](https://github.com/ant-design/ant-design/pull/8111) [@megawac](https://github.com/megawac)
- 🌟 新增 `rowSelection[fixed]`,用于固定选择列。
- 🙅 废弃 `getBodyWrapper`,请使用 `components` 属性代替。
- 🙅 废弃以下属性 `onRowClick``onRowDoubleClick`、`onRowContextMenu`、`onRowMouseEnter`、`onRowMouseLeave`,请使用 `onRow` 代替。
```javascript
<Table onRow={(record) => ({
onClick: () => {},
onDoubleClick: () => {},
onContextMenu: () => {},
onMouseEnter: () => {},
onMouseLeave: () => {},
})} />
```
- Select
- 🌟 默认和多选模式下 Option 的值允许使用 number。
- 🌟 新增 `maxTagCount 和 `maxTagPlaceholder`,用于设置最多可显示的选中项。
- 🌟 新增 `showAction`,用于设置出发下拉框打开的事件。
- 🌟 新增 `onMouseEnter``onMouseLeave` 事件回调。
- LocaleProvider
- 🇮🇸 新增冰岛语。[#7561](https://github.com/ant-design/ant-design/pull/7561) [@paunovic-stefan](https://github.com/paunovic-stefan)
- 🇪🇬 新增埃及语。[#7888](https://github.com/ant-design/ant-design/pull/7888) [@mohamed-seada-1994](https://github.com/mohamed-seada-1994)
- 🇺🇦 新增乌克兰语。[#8169](https://github.com/ant-design/ant-design/pull/8169) [@anxolerd](https://github.com/anxolerd)
### Bug 修复
- Form
- 🐞 修复输入框的图标会被验证图标覆盖的问题。
- 🐞 修复使用大尺寸输入框时,验证图标不居中的问题。
- 🐞 修复 Menu 按键时的报错。[#8089](https://github.com/ant-design/ant-design/issues/8089)
### 其他
- 在 TypeScript 中使用时不再需要设置 `allowSyntheticDefaultImports`
-`peerDependencies` 中移除了 `react@0.14``react@15`,虽然目前 antd 3.0.0 依然可以在旧版本的 React 上使用,但是我们在未来有可能使用 React 16 的新特性,所以强烈建议升级到 React 16见[升级文档](https://reactjs.org/blog/2017/09/26/react-v16.0.html)。
- 全面支持 ES Module antd 及其依赖的底层 react-component 组件全部提供了 ES Module 的构建版本,如果你使用 webpack 3可以把 `babel-plugin-import``libraryDirectory` 设置为 `es`,以获得 Tree Shaking 的优化效果。
- 最后,我们会继续维护 2.x 的分支到明年 6 月份。
## 2.x
去 [GitHub](https://github.com/ant-design/ant-design/blob/2.x-stable/CHANGELOG.zh-CN.md) 查看 `2.x` 的 Change Log。
## 1.11.4
去 [GitHub](https://github.com/ant-design/ant-design/blob/1.x-stable/CHANGELOG.md) 查看 `0.x``1.x` 的 Change Log。

1
CNAME Normal file
View File

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

View File

@@ -1,46 +0,0 @@
# Contributor Covenant Code of Conduct
## Our Pledge
In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation.
## Our Standards
Examples of behavior that contributes to creating a positive environment include:
* Using welcoming and inclusive language
* Being respectful of differing viewpoints and experiences
* Gracefully accepting constructive criticism
* Focusing on what is best for the community
* Showing empathy towards other community members
Examples of unacceptable behavior by participants include:
* The use of sexualized language or imagery and unwelcome sexual attention or advances
* Trolling, insulting/derogatory comments, and personal or political attacks
* Public or private harassment
* Publishing others' private information, such as a physical or electronic address, without explicit permission
* Other conduct which could reasonably be considered inappropriate in a professional setting
## Our Responsibilities
Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.
Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
## Scope
This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.
## Enforcement
Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at xingmin.zhu@alipay.com. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.
## Attribution
This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version]
[homepage]: http://contributor-covenant.org
[version]: http://contributor-covenant.org/version/1/4/

View File

@@ -1,47 +1,24 @@
<p align="center">
<a href="http://ant.design">
<img width="230" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg">
<img width="320" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg">
</a>
</p>
# Ant Design
[![](https://img.shields.io/travis/ant-design/ant-design.svg?style=flat-square)](https://travis-ci.org/ant-design/ant-design)
[![Codecov](https://img.shields.io/codecov/c/github/ant-design/ant-design/master.svg?style=flat-square)](https://codecov.io/gh/ant-design/ant-design/branch/master)
[![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#info=devDependencies&view=list)
[![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://www.npmtrends.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)(中文)
# Ant Design [![](https://img.shields.io/travis/ant-design/ant-design.svg?style=flat-square)](https://travis-ci.org/ant-design/ant-design) [![npm package](https://img.shields.io/npm/v/antd.svg?style=flat-square)](https://www.npmjs.org/package/antd) [![NPM downloads](http://img.shields.io/npm/dm/antd.svg?style=flat-square)](https://npmjs.org/package/antd) [![Dependency Status](https://david-dm.org/ant-design/ant-design.svg?style=flat-square)](https://david-dm.org/ant-design/ant-design) [![Join the chat at https://gitter.im/ant-design/ant-design](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/ant-design/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
一套企业级的 UI 设计语言和 React 实现。
[README in English](README.md)
## 特性
- 提炼企业级中后台产品的交互语言和视觉风格。
- 开箱即用的高质量 React 组件
- 使用 TypeScript 构建,提供完整的类型定义文件
- 全链路开发和设计工具体系。
- 提炼和服务企业级中后台产品的交互语言和视觉风格。
- [React Component](http://react-component.github.io/badgeboard/) 上精心封装的高质量 UI 库
- 基于 npm + webpack + babel 的工作流,支持 ES2015
## 支持环境
* 现代浏览器和 IE9 及以上。
* 支持服务端渲染。
* [Electron](http://electron.atom.io/)
## 参与共建 [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
请参考[贡献指南](https://ant.design/docs/react/contributing-cn).
## 安装
```bash
npm install antd --save
npm install antd
```
## 示例
@@ -57,57 +34,35 @@ ReactDOM.render(<DatePicker />, mountNode);
import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
```
你也可以[按需加载组件](https://ant.design/docs/react/getting-started-cn#按需加载)。
按需加载可通过此写法 `import DatePicker from 'antd/lib/date-picker'` 或使用插件 [babel-plugin-antd](https://github.com/ant-design/babel-plugin-antd)。
## 浏览器支持
现代浏览器和 IE8 及以上。
> [IE8 issues](https://github.com/xcatliu/react-ie8)
## TypeScript
参考 [在 TypeScript 中使用](https://ant.design/docs/react/use-in-typescript-cn)
## 国际化
参考 [国际化文档](http://ant.design/docs/react/i18n-cn)。
```js
///<reference path='./node_modules/antd/type-definitions/antd.d.ts'/>
...
```
## 链接
- [首页](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)
- [动效](https://motion.ant.design)
- [设计规范速查手册](https://github.com/ant-design/ant-design/wiki/Ant-Design-%E8%AE%BE%E8%AE%A1%E5%9F%BA%E7%A1%80%E7%AE%80%E7%89%88)
- [开发者说明](https://github.com/ant-design/ant-design/wiki/Development)
- [版本发布规则](https://github.com/ant-design/ant-design/wiki/%E8%BD%AE%E5%80%BC%E8%A7%84%E5%88%99%E5%92%8C%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B)
- [常见问题](https://github.com/ant-design/ant-design/wiki/FAQ)
- [CodeSandbox 模板](https://u.ant.design/codesandbox-repro) for bug reports
- [Awesome Ant Design](https://github.com/websemantics/awesome-ant-design)
- [定制主题](http://ant.design/docs/react/customize-theme-cn)
## 本地开发
```bash
$ git clone git@github.com:ant-design/ant-design.git
$ cd ant-design
$ npm install
$ npm start
```
打开浏览器访问 http://127.0.0.1:8001 ,更多本地开发文档参见: https://github.com/ant-design/ant-design/wiki/Development 。
- [React 实现](http://ant.design/#/docs/react/introduce)
- [修改记录](CHANGELOG.md)
- [开发脚手架](https://github.com/ant-design/antd-init/)
- [开发工具文档](http://ant-tool.github.io/)
- [React 组件](http://react-component.github.io/)
- [React 代码规范](https://github.com/react-component/react-component.github.io/blob/master/docs/zh-cn/component-code-style.md)
- [组件设计原则](https://github.com/react-component/react-component.github.io/blob/master/docs/zh-cn/component-design.md)
- [网站和组件开发说明](https://github.com/ant-design/ant-design/wiki/%E7%BD%91%E7%AB%99%E5%92%8C%E7%BB%84%E4%BB%B6%E5%BC%80%E5%8F%91%E8%AF%B4%E6%98%8E)
- [版本发布手册](https://github.com/ant-design/ant-design/wiki/%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B)
## 如何贡献
阅读我们的[贡献指南](./.github/CONTRIBUTING.md).
> 强烈推荐阅读 [《提问的智慧》](https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way)、[《如何向开源社区提问题》](https://github.com/seajs/seajs/issues/545) 和 [《如何有效地报告 Bug》](http://www.chiark.greenend.org.uk/%7Esgtatham/bugs-cn.html)、[《如何向开源项目提交无法解答的问题》](https://zhuanlan.zhihu.com/p/25795393),更好的问题更容易获得帮助。
## 社区互助
如果您在使用的过程中碰到问题,可以通过下面几个途径寻求帮助,同时我们也鼓励资深用户通过下面的途径给新人提供帮助。
通过 Stack Overflow 或者 Segment Fault 提问时,建议加上 `antd` 标签。
1. [Stack Overflow](http://stackoverflow.com/questions/tagged/antd)(英文)
2. [Segment Fault](https://segmentfault.com/t/antd)(中文)
3. [![Join the chat at https://gitter.im/ant-design/ant-design](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/ant-design/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
我们欢迎任何形式的贡献,有任何建议或意见您可以进行 [Pull Request](https://github.com/ant-design/ant-design/pulls),或者给我们 [提问](https://github.com/ant-design/ant-design/issues)。

118
README.md
View File

@@ -1,55 +1,33 @@
<p align="center">
<a href="http://ant.design">
<img width="230" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg">
<img width="320" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg">
</a>
</p>
# Ant Design
[![](https://img.shields.io/travis/ant-design/ant-design/master.svg?style=flat-square)](https://travis-ci.org/ant-design/ant-design)
[![Codecov](https://img.shields.io/codecov/c/github/ant-design/ant-design/master.svg?style=flat-square)](https://codecov.io/gh/ant-design/ant-design/branch/master)
[![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#info=devDependencies&view=list)
[![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://www.npmtrends.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)(中文)
# Ant Design [![](https://img.shields.io/travis/ant-design/ant-design.svg?style=flat-square)](https://travis-ci.org/ant-design/ant-design) [![npm package](https://img.shields.io/npm/v/antd.svg?style=flat-square)](https://www.npmjs.org/package/antd) [![NPM downloads](http://img.shields.io/npm/dm/antd.svg?style=flat-square)](https://npmjs.org/package/antd) [![Dependency Status](https://david-dm.org/ant-design/ant-design.svg?style=flat-square)](https://david-dm.org/ant-design/ant-design) [![Join the chat at https://gitter.im/ant-design/ant-design](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/ant-design/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
An enterprise-class UI design language and React-based implementation.
[中文 README](README-zh_CN.md)
## :loudspeaker: Document Translation Recruitment
## 3.0 Released Now! :tada::tada::tada:
[Announcing Ant Design 3.0](https://medium.com/ant-design/announcing-ant-design-3-0-70e3e65eca0c)
We are now working on translate components document to English, and we need some translator and reviewer. https://github.com/ant-design/ant-design/issues/1471
## Features
- An enterprise-class UI design system for desktop 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 9+ (with [polyfills](https://ant.design/docs/react/getting-started#Compatibility))
* Server-side Rendering
* [Electron](http://electron.atom.io/)
## Let's build a better antd together [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
Read our [contributing guide](https://ant.design/docs/react/contributing).
- An enterprise-class design language and high quality UI style.
- Rich library of UI components base on [React Component](http://react-component.github.io/badgeboard/).
- A npm + webpack + babel + dora [workflow](http://ant-tool.github.io/index.html).
## Install
```bash
npm install antd --save
npm install antd
```
## Usage
### Use prebuilt bundle
```jsx
import { DatePicker } from 'antd';
ReactDOM.render(<DatePicker />, mountNode);
@@ -61,45 +39,65 @@ And import style manually:
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)
### Use modularized antd
### TypeScript
- Use [babel-plugin-antd](https://github.com/ant-design/babel-plugin-antd) (Recommended)
See [Use in TypeScript](https://ant.design/docs/react/use-in-typescript)
```js
// .babelrc
{
"plugins": [["antd", { style: "css" }]]
}
```
Then you can import components from antd directly.
```jsx
// import js and css modularly, parsed by babel-plugin-antd
import { DatePicker } from 'antd';
```
- Manually import
```jsx
import DatePicker from 'antd/lib/date-picker'; // just for js
```
## Internationalization
## Browser Support
See [i18n](http://ant.design/docs/react/i18n).
Normal browsers and Internet Explorer 8+.
> [IE8 issues](https://github.com/xcatliu/react-ie8)
## TypeScript
tsconfig.json
```
{
"compilerOptions": {
"moduleResolution": "node",
"jsx": "preserve"
}
}
```
## Links
- [Home page](http://ant.design/)
- [Components](http://ant.design/docs/react/introduce)
- [Ant Design Pro](http://pro.ant.design/)
- [Change Log](CHANGELOG.en-US.md)
- [Scaffold Market](http://scaffold.ant.design)
- [rc-components](http://react-component.github.io/)
- [Mobile UI](http://mobile.ant.design)
- [Motion](https://motion.ant.design)
- [React UI page](http://ant.design/#/docs/react/introduce)
- [ChangeLog](CHANGELOG.md)
- [Scaffold tool](https://github.com/ant-design/antd-init/)
- [Development tool](http://ant-tool.github.io/)
- [React components](http://react-component.github.io/)
- [React style guide](https://github.com/react-component/react-component.github.io/blob/master/docs/zh-cn/component-code-style.md)
- [React component design guide](https://github.com/react-component/react-component.github.io/blob/master/docs/zh-cn/component-design.md)
- [Developer Instruction](https://github.com/ant-design/ant-design/wiki/Development)
- [Versioning Release Note](https://github.com/ant-design/ant-design/wiki/%E8%BD%AE%E5%80%BC%E8%A7%84%E5%88%99%E5%92%8C%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B)
- [Versioning Release Note](https://github.com/ant-design/ant-design/wiki/%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B)
- [FAQ](https://github.com/ant-design/ant-design/wiki/FAQ)
- [CodeSandbox Template](https://u.ant.design/codesandbox-repro) for bug reports
- [Awesome Ant Design](https://github.com/websemantics/awesome-ant-design)
- [Customize Theme](http://ant.design/docs/react/customize-theme)
## Development
```bash
$ git clone git@github.com:ant-design/ant-design.git
$ cd ant-design
$ npm install
$ npm start
```
Open your browser and visit http://127.0.0.1:8001 , see more at https://github.com/ant-design/ant-design/wiki/Development .
- [CodePen boilerplate](http://codepen.io/anon/pen/wGOWGW?editors=001) for bug reports
## Contributing
We welcome all contributions. Please read our [CONTRIBUTING.md](https://github.com/ant-design/ant-design/blob/master/.github/CONTRIBUTING.md) first. You can submit any ideas as [pull requests](https://github.com/ant-design/ant-design/pulls) or as [GitHub issues](https://github.com/ant-design/ant-design/issues). If you'd like to improve code, check out the [Development Instructions](https://github.com/ant-design/ant-design/wiki/Development) and have a good time! :)
We welcome all contributions, please read our [CONTRIBUTING.md](https://github.com/ant-design/ant-design/blob/master/.github/CONTRIBUTING.md) first. You can submit any ideas as [pull requests](https://github.com/ant-design/ant-design/pulls) or as a [GitHub issue](https://github.com/ant-design/ant-design/issues). If you'd like to improve code, check out the [Development Instruction](https://github.com/ant-design/ant-design/wiki/Development) and have a good time! :)

View File

@@ -1,61 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`antd exports modules correctly 1`] = `
Array [
"Affix",
"Anchor",
"AutoComplete",
"Alert",
"Avatar",
"BackTop",
"Badge",
"Breadcrumb",
"Button",
"Calendar",
"Card",
"Collapse",
"Carousel",
"Cascader",
"Checkbox",
"Col",
"DatePicker",
"Divider",
"Dropdown",
"Drawer",
"Form",
"Icon",
"Input",
"InputNumber",
"Layout",
"List",
"LocaleProvider",
"message",
"Menu",
"Modal",
"notification",
"Pagination",
"Popconfirm",
"Popover",
"Progress",
"Radio",
"Rate",
"Row",
"Select",
"Slider",
"Spin",
"Steps",
"Switch",
"Table",
"Transfer",
"Tree",
"TreeSelect",
"Tabs",
"Tag",
"TimePicker",
"Timeline",
"Tooltip",
"Mention",
"Upload",
"version",
]
`;

View File

@@ -1,21 +0,0 @@
const OLD_NODE_ENV = process.env.NODE_ENV;
process.env.NODE_ENV = 'development';
const warnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
const antd = require('..');
describe('antd', () => {
afterAll(() => {
process.env.NODE_ENV = OLD_NODE_ENV;
});
it('exports modules correctly', () => {
expect(Object.keys(antd)).toMatchSnapshot();
});
it('should hint when import all components in dev mode', () => {
expect(warnSpy).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();
});
});

View File

@@ -1,87 +0,0 @@
import throttleByAnimationFrame from '../throttleByAnimationFrame';
import getDataOrAriaProps from '../getDataOrAriaProps';
describe('Test utils function', () => {
beforeAll(() => {
jest.useFakeTimers();
});
afterAll(() => {
jest.useRealTimers();
});
it('throttle function should work', () => {
const callback = jest.fn();
const throttled = throttleByAnimationFrame(callback);
expect(callback).not.toBeCalled();
throttled();
throttled();
jest.runAllTimers();
expect(callback).toBeCalled();
expect(callback.mock.calls.length).toBe(1);
});
it('throttle function should be canceled', () => {
const callback = jest.fn();
const throttled = throttleByAnimationFrame(callback);
throttled();
throttled.cancel();
jest.runAllTimers();
expect(callback).not.toBeCalled();
});
describe('getDataOrAriaProps', () => {
it('returns all data-* properties from an object', () => {
const props = {
onClick: () => {},
isOpen: true,
'data-test': 'test-id',
'data-id': 1234,
};
const results = getDataOrAriaProps(props);
expect(results).toEqual({
'data-test': 'test-id',
'data-id': 1234,
});
});
it('does not return data-__ properties from an object', () => {
const props = {
onClick: () => {},
isOpen: true,
'data-__test': 'test-id',
'data-__id': 1234,
};
const results = getDataOrAriaProps(props);
expect(results).toEqual({});
});
it('returns all aria-* properties from an object', () => {
const props = {
onClick: () => {},
isOpen: true,
'aria-labelledby': 'label-id',
'aria-label': 'some-label',
};
const results = getDataOrAriaProps(props);
expect(results).toEqual({
'aria-labelledby': 'label-id',
'aria-label': 'some-label',
});
});
it('returns role property from an object', () => {
const props = {
onClick: () => {},
isOpen: true,
role: 'search',
};
const results = getDataOrAriaProps(props);
expect(results).toEqual({ role: 'search' });
});
});
});

View File

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

View File

@@ -1,17 +0,0 @@
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';
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];
}
return ret;
}

View File

@@ -1,4 +0,0 @@
// https://github.com/moment/moment/issues/3650
export default function interopDefault(m: any) {
return m.default || m;
}

View File

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

View File

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

View File

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

View File

@@ -0,0 +1,36 @@
import cssAnimation from 'css-animation';
function animate(node, show, done) {
let height;
return cssAnimation(node, 'ant-motion-collapse', {
start() {
if (!show) {
node.style.height = `${node.offsetHeight}px`;
} else {
height = node.offsetHeight;
node.style.height = 0;
}
},
active() {
node.style.height = `${show ? height : 0}px`;
},
end() {
node.style.height = '';
done();
},
});
}
const animation = {
enter(node, done) {
return animate(node, true, done);
},
leave(node, done) {
return animate(node, false, done);
},
appear(node, done) {
return animate(node, true, done);
},
};
export default animation;

View File

@@ -1,50 +0,0 @@
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', {
start() {
if (!show) {
node.style.height = `${node.offsetHeight}px`;
node.style.opacity = '1';
} else {
height = node.offsetHeight;
node.style.height = '0px';
node.style.opacity = '0';
}
},
active() {
if (requestAnimationFrameId) {
raf.cancel(requestAnimationFrameId);
}
requestAnimationFrameId = raf(() => {
node.style.height = `${show ? height : 0}px`;
node.style.opacity = show ? '1' : '0';
});
},
end() {
if (requestAnimationFrameId) {
raf.cancel(requestAnimationFrameId);
}
node.style.height = '';
node.style.opacity = '';
done();
},
});
}
const animation = {
enter(node: HTMLElement, done: () => void) {
return animate(node, true, done);
},
leave(node: HTMLElement, done: () => void) {
return animate(node, false, done);
},
appear(node: HTMLElement, done: () => void) {
return animate(node, true, done);
},
};
export default animation;

View File

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

View File

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

View File

@@ -1 +0,0 @@
export type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;

View File

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

View File

@@ -1,120 +0,0 @@
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);
});
});

View File

@@ -1,77 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders ./components/affix/demo/basic.md correctly 1`] = `
<div>
<div>
<div
class=""
>
<button
class="ant-btn ant-btn-primary"
type="button"
>
<span>
Affix top
</span>
</button>
</div>
</div>
<br />
<div>
<div
class=""
>
<button
class="ant-btn ant-btn-primary"
type="button"
>
<span>
Affix bottom
</span>
</button>
</div>
</div>
</div>
`;
exports[`renders ./components/affix/demo/on-change.md correctly 1`] = `
<div>
<div
class=""
>
<button
class="ant-btn"
type="button"
>
<span>
120px to affix top
</span>
</button>
</div>
</div>
`;
exports[`renders ./components/affix/demo/target.md correctly 1`] = `
<div
class="scrollable-container"
>
<div
class="background"
>
<div>
<div
class=""
>
<button
class="ant-btn ant-btn-primary"
type="button"
>
<span>
Fixed at the top of container
</span>
</button>
</div>
</div>
</div>
</div>
`;

View File

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

View File

@@ -1,59 +1,16 @@
---
order: 0
title:
zh-CN: 基本
en-US: Basic
title: 基本
---
## zh-CN
最简单的用法。
## en-US
The simplest usage.
````jsx
import { Affix, Button } from 'antd';
class Demo extends React.Component {
state = {
top: 10,
bottom: 10,
}
render() {
return (
<div>
<Affix offsetTop={this.state.top}>
<Button
type="primary"
onClick={() => {
this.setState({
top: this.state.top + 10,
});
}}
>
Affix top
</Button>
</Affix>
<br />
<Affix offsetBottom={this.state.bottom}>
<Button
type="primary"
onClick={() => {
this.setState({
bottom: this.state.bottom + 10,
});
}}
>
Affix bottom
</Button>
</Affix>
</div>
);
}
}
ReactDOM.render(<Demo />, mountNode);
ReactDOM.render(
<Affix>
<Button type="primary">固定在顶部</Button>
</Affix>
, mountNode);
````

View File

@@ -0,0 +1,16 @@
---
order: 2
title: 下方固定
---
固定在屏幕下方
````jsx
import { Affix, Button } from 'antd';
ReactDOM.render(
<Affix offsetBottom={20}>
<Button type="primary">固定在距离底部 20px 的位置</Button>
</Affix>
, mountNode);
````

View File

@@ -0,0 +1,16 @@
---
order: 1
title: 偏移
---
达到一定的偏移量才触发。
````jsx
import { Affix, Button } from 'antd';
ReactDOM.render(
<Affix offsetTop={75}>
<Button type="primary">固定在距离顶部 75px 的位置</Button>
</Affix>
, mountNode);
````

View File

@@ -1,25 +1,21 @@
---
order: 1
title:
zh-CN: 固定状态改变的回调
en-US: Callback
order: 3
title: 固定状态改变的回调
---
## zh-CN
可以获得是否固定的状态。
## en-US
Callback with affixed state.
````jsx
import { Affix, Button } from 'antd';
const onChange = function (affixed) {
console.log(affixed); // true or false
};
ReactDOM.render(
<Affix offsetTop={120} onChange={affixed => console.log(affixed)}>
<Button>120px to affix top</Button>
</Affix>,
mountNode
);
<Affix offsetTop={120} onChange={onChange}>
<Button>固定在距离顶部 120px 的位置</Button>
</Affix>
, mountNode);
````

View File

@@ -1,48 +0,0 @@
---
order: 2
title:
zh-CN: 滚动容器
en-US: Container to scroll.
---
## zh-CN
`target` 设置 `Affix` 需要监听其滚动事件的元素,默认为 `window`
## en-US
Set a `target` for 'Affix', which is listen to scroll event of target element (default is `window`).
````jsx
import { Affix, Button } from 'antd';
class Demo extends React.Component {
render() {
return (
<div className="scrollable-container" ref={(node) => { this.container = node; }}>
<div className="background">
<Affix target={() => this.container}>
<Button type="primary">
Fixed at the top of container
</Button>
</Affix>
</div>
</div>
);
}
}
ReactDOM.render(<Demo />, mountNode);
````
<style>
#components-affix-demo-target .scrollable-container {
height: 100px;
overflow-y: scroll;
}
#components-affix-demo-target .background {
padding-top: 60px;
height: 300px;
background-image: url('https://zos.alipayobjects.com/rmsportal/RmjwQiJorKyobvI.jpg');
}
</style>

View File

@@ -1,30 +0,0 @@
---
category: Components
type: Navigation
title: Affix
---
Make an element stick to viewport.
## When To Use
When user browses a long web page, some content need to stick to the viewport. This is common for menus and actions.
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 | 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` can not be `position: absolute`, but you can set `Affix` as `position: absolute`:
```jsx
<Affix style={{ position: 'absolute', top: y, left: x}}>
...
</Affix>
```

134
components/affix/index.jsx Normal file
View File

@@ -0,0 +1,134 @@
import React from 'react';
import ReactDOM from 'react-dom';
import { Dom } from 'rc-util';
import classNames from 'classnames';
import warning from 'warning';
function getScroll(w, top) {
let ret = w[`page${top ? 'Y' : 'X'}Offset`];
const method = `scroll${top ? 'Top' : 'Left'}`;
if (typeof ret !== 'number') {
const d = w.document;
// ie6,7,8 standard mode
ret = d.documentElement[method];
if (typeof ret !== 'number') {
// quirks mode
ret = d.body[method];
}
}
return ret;
}
function getOffset(element) {
const rect = element.getBoundingClientRect();
const body = document.body;
const clientTop = element.clientTop || body.clientTop || 0;
const clientLeft = element.clientLeft || body.clientLeft || 0;
const scrollTop = getScroll(window, true);
const scrollLeft = getScroll(window);
return {
top: rect.top + scrollTop - clientTop,
left: rect.left + scrollLeft - clientLeft,
};
}
export default class Affix extends React.Component {
static propTypes = {
offsetTop: React.PropTypes.number,
offsetBottom: React.PropTypes.number,
}
static defaultProps = {
onChange() {},
}
constructor(props) {
super(props);
this.state = {
affixStyle: null,
};
}
handleScroll = () => {
let { offsetTop, offsetBottom, offset } = this.props;
// Backwards support
offsetTop = offsetTop || offset;
const scrollTop = getScroll(window, true);
const elemOffset = getOffset(ReactDOM.findDOMNode(this));
const elemSize = {
width: ReactDOM.findDOMNode(this.refs.fixedNode).offsetWidth,
height: ReactDOM.findDOMNode(this.refs.fixedNode).offsetHeight,
};
const offsetMode = {};
if (typeof offsetTop !== 'number' && typeof offsetBottom !== 'number') {
offsetMode.top = true;
offsetTop = 0;
} else {
offsetMode.top = typeof offsetTop === 'number';
offsetMode.bottom = typeof offsetBottom === 'number';
}
if (scrollTop > elemOffset.top - offsetTop && offsetMode.top) {
// Fixed Top
if (!this.state.affixStyle) {
this.setState({
affixStyle: {
position: 'fixed',
top: offsetTop,
left: elemOffset.left,
width: ReactDOM.findDOMNode(this).offsetWidth,
},
}, () => this.props.onChange(!!this.state.affixStyle));
}
} else if (scrollTop < elemOffset.top + elemSize.height + offsetBottom - window.innerHeight &&
offsetMode.bottom) {
// Fixed Bottom
if (!this.state.affixStyle) {
this.setState({
affixStyle: {
position: 'fixed',
bottom: offsetBottom,
left: elemOffset.left,
width: ReactDOM.findDOMNode(this).offsetWidth,
},
}, () => this.props.onChange(!!this.state.affixStyle));
}
} else if (this.state.affixStyle) {
this.setState({
affixStyle: null,
}, () => this.props.onChange(!!this.state.affixStyle));
}
}
componentDidMount() {
warning(!('offset' in this.props), '`offset` prop of Affix is deprecated, use `offsetTop` instead.');
this.scrollEvent = Dom.addEventListener(window, 'scroll', this.handleScroll);
this.resizeEvent = Dom.addEventListener(window, 'resize', this.handleScroll);
}
componentWillUnmount() {
if (this.scrollEvent) {
this.scrollEvent.remove();
}
if (this.resizeEvent) {
this.resizeEvent.remove();
}
}
render() {
const className = classNames({
'ant-affix': this.state.affixStyle,
});
return (
<div {...this.props}>
<div className={className} ref="fixedNode" style={this.state.affixStyle}>
{this.props.children}
</div>
</div>
);
}
}

23
components/affix/index.md Normal file
View File

@@ -0,0 +1,23 @@
---
category: Components
chinese: 固钉
type: Other
english: Affix
---
将页面元素钉在可视范围。
## 何时使用
当内容区域比较长,需要滚动页面时,这部分内容对应的操作或者导航需要在滚动范围内始终展现。常用于侧边菜单和按钮组合。
页面可视范围过小时,慎用此功能以免遮挡页面内容。
## API
| 成员 | 说明 | 类型 | 默认值 |
|-------------|----------------|--------------------|--------------|
| offsetTop | 距离窗口顶部达到指定偏移量后触发 | Number | |
| offsetBottom | 距离窗口底部达到指定偏移量后触发 | Number | |
| onChange | 固定状态改变时触发的回调函数 | Function | 无 |

View File

@@ -1,294 +0,0 @@
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
import addEventListener from 'rc-util/lib/Dom/addEventListener';
import classNames from 'classnames';
import shallowequal from 'shallowequal';
import omit from 'omit.js';
import getScroll from '../_util/getScroll';
import { throttleByAnimationFrameDecorator } from '../_util/throttleByAnimationFrame';
function getTargetRect(target: 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;
}
// Affix
export interface AffixProps {
/**
* 距离窗口顶部达到指定偏移量后触发
*/
offsetTop?: number;
offset?: number;
/** 距离窗口底部达到指定偏移量后触发 */
offsetBottom?: number;
style?: React.CSSProperties;
/** 固定状态改变时触发的回调函数 */
onChange?: (affixed?: boolean) => void;
/** 设置 Affix 需要监听其滚动事件的元素,值为一个返回对应 DOM 元素的函数 */
target?: () => Window | HTMLElement | null;
prefixCls?: string;
}
export interface AffixState {
affixStyle: React.CSSProperties | undefined;
placeholderStyle: React.CSSProperties | undefined;
}
export default class Affix extends React.Component<AffixProps, AffixState> {
static propTypes = {
offsetTop: PropTypes.number,
offsetBottom: PropTypes.number,
target: PropTypes.func,
};
scrollEvent: any;
resizeEvent: any;
timeout: any;
events = [
'resize',
'scroll',
'touchstart',
'touchmove',
'touchend',
'pageshow',
'load',
];
eventHandlers: {
[key: string]: any;
} = {};
state: AffixState = {
affixStyle: undefined,
placeholderStyle: undefined,
};
private fixedNode: HTMLElement;
private placeholderNode: HTMLElement;
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;
}
if (shallowequal(affixStyle, originalAffixStyle)) {
return;
}
this.setState({ affixStyle: affixStyle as React.CSSProperties }, () => {
const affixed = !!this.state.affixStyle;
if ((affixStyle && !originalAffixStyle) ||
(!affixStyle && originalAffixStyle)) {
onChange(affixed);
}
});
}
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';
}
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
) {
// 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);
}
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);
(this.updatePosition as any).cancel();
}
setTargetEventListeners(getTarget: () => HTMLElement | Window | null) {
const target = getTarget();
if (!target) {
return;
}
this.clearEventListeners();
this.events.forEach(eventName => {
this.eventHandlers[eventName] = addEventListener(target, eventName, this.updatePosition);
});
}
clearEventListeners() {
this.events.forEach(eventName => {
const handler = this.eventHandlers[eventName];
if (handler && handler.remove) {
handler.remove();
}
});
}
saveFixedNode = (node: HTMLDivElement) => {
this.fixedNode = node;
}
savePlaceholderNode = (node: HTMLDivElement) => {
this.placeholderNode = node;
}
render() {
const className = classNames({
[this.props.prefixCls || 'ant-affix']: this.state.affixStyle,
});
const props = omit(this.props, ['prefixCls', 'offsetTop', 'offsetBottom', 'target', 'onChange']);
const placeholderStyle = { ...this.state.placeholderStyle, ...this.props.style };
return (
<div {...props} style={placeholderStyle} ref={this.savePlaceholderNode}>
<div className={className} ref={this.saveFixedNode} style={this.state.affixStyle}>
{this.props.children}
</div>
</div>
);
}
}

View File

@@ -1,31 +0,0 @@
---
category: Components
subtitle: 固钉
type: Navigation
title: Affix
---
将页面元素钉在可视范围。
## 何时使用
当内容区域比较长,需要滚动页面时,这部分内容对应的操作或者导航需要在滚动范围内始终展现。常用于侧边菜单和按钮组合。
页面可视范围过小时,慎用此功能以免遮挡页面内容。
## API
| 成员 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| offsetBottom | 距离窗口底部达到指定偏移量后触发 | number | |
| offsetTop | 距离窗口顶部达到指定偏移量后触发 | number | |
| target | 设置 `Affix` 需要监听其滚动事件的元素,值为一个返回对应 DOM 元素的函数 | () => HTMLElement | () => window |
| onChange | 固定状态改变时触发的回调函数 | Function(affixed) | 无 |
**注意:**`Affix` 内的元素不要使用绝对定位,如需要绝对定位的效果,可以直接设置 `Affix` 为绝对定位:
```jsx
<Affix style={{ position: 'absolute', top: y, left: x}}>
...
</Affix>
```

View File

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

View File

@@ -1,452 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders ./components/alert/demo/banner.md correctly 1`] = `
<div>
<div
class="ant-alert ant-alert-warning ant-alert-banner"
data-show="true"
>
<i
class="anticon anticon-exclamation-circle ant-alert-icon"
/>
<span
class="ant-alert-message"
>
Warning text
</span>
<span
class="ant-alert-description"
/>
</div>
<br />
<div
class="ant-alert ant-alert-warning ant-alert-banner"
data-show="true"
>
<i
class="anticon anticon-exclamation-circle ant-alert-icon"
/>
<span
class="ant-alert-message"
>
Very long warning text warning text text text text text text text
</span>
<span
class="ant-alert-description"
/>
<a
class="ant-alert-close-icon"
>
<i
class="anticon anticon-cross"
/>
</a>
</div>
<br />
<div
class="ant-alert ant-alert-warning ant-alert-no-icon ant-alert-banner"
data-show="true"
>
<span
class="ant-alert-message"
>
Warning text without icon
</span>
<span
class="ant-alert-description"
/>
</div>
<br />
<div
class="ant-alert ant-alert-error ant-alert-banner"
data-show="true"
>
<i
class="anticon anticon-cross-circle ant-alert-icon"
/>
<span
class="ant-alert-message"
>
Error text
</span>
<span
class="ant-alert-description"
/>
</div>
</div>
`;
exports[`renders ./components/alert/demo/basic.md correctly 1`] = `
<div
class="ant-alert ant-alert-success ant-alert-no-icon"
data-show="true"
>
<span
class="ant-alert-message"
>
Success Text
</span>
<span
class="ant-alert-description"
/>
</div>
`;
exports[`renders ./components/alert/demo/closable.md correctly 1`] = `
<div>
<div
class="ant-alert ant-alert-warning ant-alert-no-icon"
data-show="true"
>
<span
class="ant-alert-message"
>
Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text
</span>
<span
class="ant-alert-description"
/>
<a
class="ant-alert-close-icon"
>
<i
class="anticon anticon-cross"
/>
</a>
</div>
<div
class="ant-alert ant-alert-error ant-alert-with-description ant-alert-no-icon"
data-show="true"
>
<span
class="ant-alert-message"
>
Error Text
</span>
<span
class="ant-alert-description"
>
Error Description Error Description Error Description Error Description Error Description Error Description
</span>
<a
class="ant-alert-close-icon"
>
<i
class="anticon anticon-cross"
/>
</a>
</div>
</div>
`;
exports[`renders ./components/alert/demo/close-text.md correctly 1`] = `
<div
class="ant-alert ant-alert-info ant-alert-no-icon"
data-show="true"
>
<span
class="ant-alert-message"
>
Info Text
</span>
<span
class="ant-alert-description"
/>
<a
class="ant-alert-close-icon"
>
Close Now
</a>
</div>
`;
exports[`renders ./components/alert/demo/description.md correctly 1`] = `
<div>
<div
class="ant-alert ant-alert-success ant-alert-with-description ant-alert-no-icon"
data-show="true"
>
<span
class="ant-alert-message"
>
Success Text
</span>
<span
class="ant-alert-description"
>
Success Description Success Description Success Description
</span>
</div>
<div
class="ant-alert ant-alert-info ant-alert-with-description ant-alert-no-icon"
data-show="true"
>
<span
class="ant-alert-message"
>
Info Text
</span>
<span
class="ant-alert-description"
>
Info Description Info Description Info Description Info Description
</span>
</div>
<div
class="ant-alert ant-alert-warning ant-alert-with-description ant-alert-no-icon"
data-show="true"
>
<span
class="ant-alert-message"
>
Warning Text
</span>
<span
class="ant-alert-description"
>
Warning Description Warning Description Warning Description Warning Description
</span>
</div>
<div
class="ant-alert ant-alert-error ant-alert-with-description ant-alert-no-icon"
data-show="true"
>
<span
class="ant-alert-message"
>
Error Text
</span>
<span
class="ant-alert-description"
>
Error Description Error Description Error Description Error Description
</span>
</div>
</div>
`;
exports[`renders ./components/alert/demo/icon.md correctly 1`] = `
<div>
<div
class="ant-alert ant-alert-success"
data-show="true"
>
<i
class="anticon anticon-check-circle ant-alert-icon"
/>
<span
class="ant-alert-message"
>
Success Tips
</span>
<span
class="ant-alert-description"
/>
</div>
<div
class="ant-alert ant-alert-info"
data-show="true"
>
<i
class="anticon anticon-info-circle ant-alert-icon"
/>
<span
class="ant-alert-message"
>
Informational Notes
</span>
<span
class="ant-alert-description"
/>
</div>
<div
class="ant-alert ant-alert-warning"
data-show="true"
>
<i
class="anticon anticon-exclamation-circle ant-alert-icon"
/>
<span
class="ant-alert-message"
>
Warning
</span>
<span
class="ant-alert-description"
/>
</div>
<div
class="ant-alert ant-alert-error"
data-show="true"
>
<i
class="anticon anticon-cross-circle ant-alert-icon"
/>
<span
class="ant-alert-message"
>
Error
</span>
<span
class="ant-alert-description"
/>
</div>
<div
class="ant-alert ant-alert-success ant-alert-with-description"
data-show="true"
>
<i
class="anticon anticon-check-circle-o ant-alert-icon"
/>
<span
class="ant-alert-message"
>
Success Tips
</span>
<span
class="ant-alert-description"
>
Detailed description and advices about successful copywriting.
</span>
</div>
<div
class="ant-alert ant-alert-info ant-alert-with-description"
data-show="true"
>
<i
class="anticon anticon-info-circle-o ant-alert-icon"
/>
<span
class="ant-alert-message"
>
Informational Notes
</span>
<span
class="ant-alert-description"
>
Additional description and informations about copywriting.
</span>
</div>
<div
class="ant-alert ant-alert-warning ant-alert-with-description"
data-show="true"
>
<i
class="anticon anticon-exclamation-circle-o ant-alert-icon"
/>
<span
class="ant-alert-message"
>
Warning
</span>
<span
class="ant-alert-description"
>
This is a warning notice about copywriting.
</span>
</div>
<div
class="ant-alert ant-alert-error ant-alert-with-description"
data-show="true"
>
<i
class="anticon anticon-cross-circle-o ant-alert-icon"
/>
<span
class="ant-alert-message"
>
Error
</span>
<span
class="ant-alert-description"
>
This is an error message about copywriting.
</span>
</div>
</div>
`;
exports[`renders ./components/alert/demo/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-cross"
/>
</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>
`;

View File

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

View File

@@ -1,58 +0,0 @@
import React from 'react';
import { mount } from 'enzyme';
import Alert from '..';
describe('Alert', () => {
beforeAll(() => {
jest.useFakeTimers();
});
afterAll(() => {
jest.useRealTimers();
});
it('could be closed', () => {
const onClose = jest.fn();
const afterClose = jest.fn();
const wrapper = mount(
<Alert
message="Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text"
type="warning"
closable
onClose={onClose}
afterClose={afterClose}
/>
);
wrapper.find('.ant-alert-close-icon').simulate('click');
expect(onClose).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');
});
});
});

View File

@@ -1,31 +0,0 @@
---
order: 6
iframe: 250
title:
zh-CN: 顶部公告
en-US: Banner
---
## zh-CN
页面顶部通告形式,默认有图标且`type` 为 'warning'。
## en-US
Display Alert as a banner at top of page.
````jsx
import { Alert } from 'antd';
ReactDOM.render(
<div>
<Alert message="Warning text" banner />
<br />
<Alert message="Very long warning text warning text text text text text text text" banner closable />
<br />
<Alert showIcon={false} message="Warning text without icon" banner />
<br />
<Alert type="error" message="Error text" banner />
</div>,
mountNode);
````

View File

@@ -1,28 +1,13 @@
---
order: 0
title:
zh-CN: 基本
en-US: Basic
title: 基本
---
## zh-CN
最简单的用法,适用于简短的警告提示。
## en-US
The simplest usage for short messages.
````jsx
import { Alert } from 'antd';
ReactDOM.render(
<Alert message="Success Text" type="success" />,
mountNode);
ReactDOM.render(<Alert message="成功提示的文案" type="success" />
, mountNode);
````
<style>
.ant-alert {
margin-bottom: 16px;
}
</style>

View File

@@ -1,40 +1,26 @@
---
order: 2
title:
zh-CN: 可关闭的警告提示
en-US: Closable
title: 可关闭的警告提示
---
## zh-CN
显示关闭按钮,点击可关闭警告提示。
## en-US
To show close button.
````jsx
import { Alert } from 'antd';
const onClose = function (e) {
console.log(e, 'I was closed.');
console.log(e, '我要被关闭啦!');
};
ReactDOM.render(
<div>
<Alert
message="Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text"
type="warning"
closable
onClose={onClose}
/>
<Alert
message="Error Text"
description="Error Description Error Description Error Description Error Description Error Description Error Description"
type="error"
closable
onClose={onClose}
/>
</div>,
mountNode);
ReactDOM.render(<div>
<Alert message="警告提示的文案"
type="warning"
closable
onClose={onClose} />
<Alert message="错误提示的文案"
description="错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍"
type="error"
closable
onClose={onClose} />
</div>, mountNode);
````

View File

@@ -1,22 +1,14 @@
---
order: 5
title:
zh-CN: 自定义关闭
en-US: Customized Close Text
title: 自定义关闭
---
## zh-CN
可以自定义关闭,自定义的文字会替换原先的关闭 `Icon`
## en-US
Replace the default icon with customized text.
````jsx
import { Alert } from 'antd';
ReactDOM.render(
<Alert message="Info Text" type="info" closeText="Close Now" />,
mountNode);
<Alert message="消息提示的文案" type="info" closeText="不再提醒" />
, mountNode);
````

View File

@@ -1,43 +1,27 @@
---
order: 3
title:
zh-CN: 含有辅助性文字介绍
en-US: Description
title: 含有辅助性文字介绍
---
## zh-CN
含有辅助性文字介绍的警告提示。
## en-US
Additional description for alert message.
````jsx
import { Alert } from 'antd';
ReactDOM.render(
<div>
<Alert
message="Success Text"
description="Success Description Success Description Success Description"
type="success"
/>
<Alert
message="Info Text"
description="Info Description Info Description Info Description Info Description"
type="info"
/>
<Alert
message="Warning Text"
description="Warning Description Warning Description Warning Description Warning Description"
type="warning"
/>
<Alert
message="Error Text"
description="Error Description Error Description Error Description Error Description"
type="error"
/>
</div>,
mountNode);
ReactDOM.render(<div>
<Alert message="成功提示的文案"
description="成功提示的辅助性文字介绍成功提示的辅助性文字介绍成功提示的辅助性文字介绍成功提示的辅助性文字介绍"
type="success" />
<Alert message="消息提示的文案"
description="消息提示的辅助性文字介绍消息提示的辅助性文字介绍消息提示的辅助性文字介绍"
type="info" />
<Alert
message="警告提示的文案"
description="警告提示的辅助性文字介绍警告提示的辅助性文字介绍"
type="warning" />
<Alert
message="错误提示的文案"
description="错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍"
type="error" />
</div>, mountNode);
````

View File

@@ -1,51 +1,35 @@
---
order: 4
title:
zh-CN: 图标
en-US: Icon
title: 图标
---
## zh-CN
可口的图标让信息类型更加醒目。
## en-US
Decent icon make information more clear and more friendly.
````jsx
import { Alert } from 'antd';
ReactDOM.render(
<div>
<Alert message="Success Tips" type="success" showIcon />
<Alert message="Informational Notes" type="info" showIcon />
<Alert message="Warning" type="warning" showIcon />
<Alert message="Error" type="error" showIcon />
<Alert
message="Success Tips"
description="Detailed description and advices about successful copywriting."
type="success"
showIcon
/>
<Alert
message="Informational Notes"
description="Additional description and informations about copywriting."
type="info"
showIcon
/>
<Alert
message="Warning"
description="This is a warning notice about copywriting."
type="warning"
showIcon
/>
<Alert
message="Error"
description="This is an error message about copywriting."
type="error"
showIcon
/>
</div>,
mountNode);
ReactDOM.render(<div>
<Alert message="成功提示的文案" type="success" showIcon />
<Alert message="消息提示的文案" type="info" showIcon />
<Alert message="警告提示的文案" type="warning" showIcon />
<Alert message="错误提示的文案" type="error" showIcon />
<Alert message="成功提示的文案"
description="成功提示的辅助性文字介绍成功提示的辅助性文字介绍成功提示的辅助性文字介绍成功提示的辅助性文字介绍"
type="success"
showIcon />
<Alert message="消息提示的文案"
description="消息提示的辅助性文字介绍消息提示的辅助性文字介绍消息提示的辅助性文字介绍"
type="info"
showIcon />
<Alert
message="警告提示的文案"
description="警告提示的辅助性文字介绍警告提示的辅助性文字介绍"
type="warning"
showIcon />
<Alert
message="错误提示的文案"
description="错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍"
type="error"
showIcon />
</div>, mountNode);
````

View File

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

View File

@@ -1,27 +1,17 @@
---
order: 1
title:
zh-CN: 四种样式
en-US: More types
title: 四种样式
---
## zh-CN
共有四种样式 `success``info``warning``error`
## en-US
There are 4 types of Alert: `success`, `info`, `warning`, `error`.
````jsx
import { Alert } from 'antd';
ReactDOM.render(
<div>
<Alert message="Success Text" type="success" />
<Alert message="Info Text" type="info" />
<Alert message="Warning Text" type="warning" />
<Alert message="Error Text" type="error" />
</div>,
mountNode);
ReactDOM.render(<div>
<Alert message="成功提示的文案" type="success" />
<Alert message="消息提示的文案" type="info" />
<Alert message="警告提示的文案" type="warning" />
<Alert message="错误提示的文案" type="error" />
</div>, mountNode);
````

View File

@@ -1,27 +0,0 @@
---
category: Components
type: Feedback
title: Alert
---
Alert component for feedback.
## When To Use
- When you need to show alert messages to users.
- When you need a persistent static container which is closable by user actions.
## API
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| afterClose | Called when close animation is finished | () => void | - |
| banner | Whether to show as banner | boolean | false |
| closable | Whether Alert can be closed | boolean | - |
| closeText | Close text to show | string\|ReactNode | - |
| description | Additional content of Alert | string\|ReactNode | - |
| iconType | Icon type, effective when `showIcon` is `true` | string | - |
| message | Content of Alert | string\|ReactNode | - |
| showIcon | Whether to show icon | boolean | false, in `banner` mode default is true |
| type | Type of Alert styles, options: `success`, `info`, `warning`, `error` | string | `info`, in `banner` mode default is `warning` |
| onClose | Callback when Alert is closed | (e: MouseEvent) => void | - |

View File

@@ -0,0 +1,97 @@
import React from 'react';
import ReactDOM from 'react-dom';
import Animate from 'rc-animate';
import Icon from '../icon';
import classNames from 'classnames';
export default class Alert extends React.Component {
static defaultProps = {
prefixCls: 'ant-alert',
showIcon: false,
onClose() {},
type: 'info',
}
constructor(props) {
super(props);
this.state = {
closing: true,
closed: false,
};
}
handleClose = (e) => {
e.preventDefault();
let dom = ReactDOM.findDOMNode(this);
dom.style.height = `${dom.offsetHeight}px`;
// Magic code
// 重复一次后才能正确设置 height
dom.style.height = `${dom.offsetHeight}px`;
this.setState({
closing: false,
});
this.props.onClose.call(this, e);
}
animationEnd = () => {
this.setState({
closed: true,
closing: true,
});
}
render() {
let {
closable, description, type, prefixCls, message, closeText, showIcon,
} = this.props;
let iconType = '';
switch (type) {
case 'success':
iconType = 'check-circle';
break;
case 'info':
iconType = 'info-circle';
break;
case 'error':
iconType = 'cross-circle';
break;
case 'warning':
iconType = 'exclamation-circle';
break;
default:
iconType = 'default';
}
// use outline icon in alert with description
if (!!description) {
iconType += '-o';
}
let alertCls = classNames({
[prefixCls]: true,
[`${prefixCls}-${type}`]: true,
[`${prefixCls}-close`]: !this.state.closing,
[`${prefixCls}-with-description`]: !!description,
[`${prefixCls}-no-icon`]: !showIcon,
});
// closeable when closeText is assigned
if (closeText) {
closable = true;
}
return this.state.closed ? null : (
<Animate component=""
showProp="data-show"
transitionName="slide-up"
onEnd={this.animationEnd}>
<div data-show={this.state.closing} className={alertCls}>
{showIcon ? <Icon className="ant-alert-icon" type={iconType} /> : null}
<span className={`${prefixCls}-message`}>{message}</span>
<span className={`${prefixCls}-description`}>{description}</span>
{closable ? <a onClick={this.handleClose} className={`${prefixCls}-close-icon`}>
{closeText || <Icon type="cross" />}
</a> : null}
</div>
</Animate>
);
}
}

25
components/alert/index.md Normal file
View File

@@ -0,0 +1,25 @@
---
category: Components
chinese: 警告提示
type: Presentation
english: Alert
---
警告提示,展现需要关注的信息。
## 何时使用
- 当某个页面需要向用户显示警告的信息时。
- 非浮层的静态展现形式,始终展现,不会自动消失,用户可以点击关闭。
## API
| 参数 | 说明 | 类型 | 默认值 |
|----------- |--------------------------------------------------------- | ---------- |-------|
| type | 必选参数,指定警告提示的样式,有四种选择 `success``info``warning``error` | String | `info` |
| closable | 可选参数,默认不显示关闭按钮 | Boolean | 无 |
| closeText | 可选参数,自定义关闭按钮 | React.Node | 无 |
| message | 必选参数,警告提示内容 | React.Node | 无 |
| description | 可选参数,警告提示的辅助性文字介绍 | React.Node | 无 |
| onClose | 可选参数,关闭时触发的回调函数 | Function | 无 |
| showIcon | 可选参数,是否显示辅助图标 | Boolean | false |

View File

@@ -1,136 +0,0 @@
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import Animate from 'rc-animate';
import Icon from '../icon';
import classNames from 'classnames';
import getDataOrAriaProps from '../_util/getDataOrAriaProps';
function noop() { }
export interface AlertProps {
/**
* Type of Alert styles, options:`success`, `info`, `warning`, `error`
*/
type?: 'success' | 'info' | 'warning' | 'error';
/** Whether Alert can be closed */
closable?: boolean;
/** Close text to show */
closeText?: React.ReactNode;
/** Content of Alert */
message: React.ReactNode;
/** Additional content of Alert */
description?: React.ReactNode;
/** Callback when close Alert */
onClose?: React.MouseEventHandler<HTMLAnchorElement>;
/** Trigger when animation ending of Alert */
afterClose?: () => void;
/** Whether to show icon */
showIcon?: boolean;
iconType?: string;
style?: React.CSSProperties;
prefixCls?: string;
className?: string;
banner?: boolean;
}
export default class Alert extends React.Component<AlertProps, any> {
constructor(props: AlertProps) {
super(props);
this.state = {
closing: true,
closed: false,
};
}
handleClose = (e: React.MouseEvent<HTMLAnchorElement>) => {
e.preventDefault();
let dom = ReactDOM.findDOMNode(this) as HTMLElement;
dom.style.height = `${dom.offsetHeight}px`;
// Magic code
// 重复一次后才能正确设置 height
dom.style.height = `${dom.offsetHeight}px`;
this.setState({
closing: false,
});
(this.props.onClose || noop)(e);
}
animationEnd = () => {
this.setState({
closed: true,
closing: true,
});
(this.props.afterClose || noop)();
}
render() {
let {
closable, description, type, prefixCls = 'ant-alert', message, closeText, showIcon, banner,
className = '', style, iconType,
} = this.props;
// banner模式默认有 Icon
showIcon = banner && showIcon === undefined ? true : showIcon;
// banner模式默认为警告
type = banner && type === undefined ? 'warning' : type || 'info';
if (!iconType) {
switch (type) {
case 'success':
iconType = 'check-circle';
break;
case 'info':
iconType = 'info-circle';
break;
case 'error':
iconType = 'cross-circle';
break;
case 'warning':
iconType = 'exclamation-circle';
break;
default:
iconType = 'default';
}
// use outline icon in alert with description
if (!!description) {
iconType += '-o';
}
}
let alertCls = classNames(prefixCls, {
[`${prefixCls}-${type}`]: true,
[`${prefixCls}-close`]: !this.state.closing,
[`${prefixCls}-with-description`]: !!description,
[`${prefixCls}-no-icon`]: !showIcon,
[`${prefixCls}-banner`]: !!banner,
}, className);
// closeable when closeText is assigned
if (closeText) {
closable = true;
}
const closeIcon = closable ? (
<a onClick={this.handleClose} className={`${prefixCls}-close-icon`}>
{closeText || <Icon type="cross" />}
</a>
) : null;
const dataOrAriaProps = getDataOrAriaProps(this.props);
return this.state.closed ? null : (
<Animate
component=""
showProp="data-show"
transitionName={`${prefixCls}-slide-up`}
onEnd={this.animationEnd}
>
<div data-show={this.state.closing} className={alertCls} style={style} {...dataOrAriaProps}>
{showIcon ? <Icon className={`${prefixCls}-icon`} type={iconType} /> : null}
<span className={`${prefixCls}-message`}>{message}</span>
<span className={`${prefixCls}-description`}>{description}</span>
{closeIcon}
</div>
</Animate>
);
}
}

View File

@@ -1,28 +0,0 @@
---
category: Components
subtitle: 警告提示
type: Feedback
title: Alert
---
警告提示,展现需要关注的信息。
## 何时使用
- 当某个页面需要向用户显示警告的信息时。
- 非浮层的静态展现形式,始终展现,不会自动消失,用户可以点击关闭。
## API
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| afterClose | 关闭动画结束后触发的回调函数 | () => void | - |
| banner | 是否用作顶部公告 | boolean | false |
| closable | 默认不显示关闭按钮 | boolean | 无 |
| closeText | 自定义关闭按钮 | string\|ReactNode | 无 |
| description | 警告提示的辅助性文字介绍 | string\|ReactNode | 无 |
| iconType | 自定义图标类型,`showIcon``true` 时有效 | string | - |
| message | 警告提示内容 | string\|ReactNode | 无 |
| showIcon | 是否显示辅助图标 | boolean | false`banner` 模式下默认值为 true |
| type | 指定警告提示的样式,有四种选择 `success``info``warning``error` | string | `info``banner` 模式下默认值为 `warning` |
| onClose | 关闭时触发的回调函数 | (e: MouseEvent) => void | 无 |

View File

@@ -1,80 +1,78 @@
@import "../../style/themes/default";
@import "../../style/mixins/index";
@alert-prefix-cls: ~"@{ant-prefix}-alert";
@alert-message-color: @heading-color;
@alert-text-color: @text-color;
@alert-close-color: @text-color-secondary;
@alert-prefix-cls: ant-alert;
.@{alert-prefix-cls} {
.reset-component;
position: relative;
padding: 8px 15px 8px 37px;
padding: 8px 8px 8px 16px;
border-radius: @border-radius-base;
&&-no-icon {
padding: 8px 15px;
}
color: @text-color;
font-size: 12px;
line-height: 16px;
margin-bottom: 10px;
&-icon {
top: 8px + @font-size-base * @line-height-base / 2 - @font-size-base / 2 + 1px;
left: 16px;
position: absolute;
margin-right: 8px;
font-size: 14px;
top: 1px;
position: relative;
}
&-description {
font-size: @font-size-base;
line-height: 22px;
font-size: 12px;
color: @legend-color;
line-height: 21px;
display: none;
}
&-success {
border: @border-width-base @border-style-base ~`colorPalette("@{success-color}", 3)`;
background-color: ~`colorPalette("@{success-color}", 1)`;
border: 1px solid tint(@success-color, 80%);
background-color: tint(@success-color, 90%);
.@{alert-prefix-cls}-icon {
color: @success-color;
}
}
&-info {
border: @border-width-base @border-style-base ~`colorPalette("@{info-color}", 3)`;
background-color: ~`colorPalette("@{info-color}", 1)`;
border: 1px solid tint(@primary-color, 80%);
background-color: tint(@primary-color, 90%);
.@{alert-prefix-cls}-icon {
color: @info-color;
color: @primary-color;
}
}
&-warning {
border: @border-width-base @border-style-base ~`colorPalette("@{warning-color}", 3)`;
background-color: ~`colorPalette("@{warning-color}", 1)`;
border: 1px solid tint(@warning-color, 80%);
background-color: tint(@warning-color, 90%);
.@{alert-prefix-cls}-icon {
color: @warning-color;
}
}
&-error {
border: @border-width-base @border-style-base ~`colorPalette("@{error-color}", 3)`;
background-color: ~`colorPalette("@{error-color}", 1)`;
border: 1px solid tint(@error-color, 80%);
background-color: tint(@error-color, 90%);
.@{alert-prefix-cls}-icon {
color: @error-color;
}
}
&-close-icon {
font-size: @font-size-sm;
font-size: 12px;
position: absolute;
right: 16px;
top: 8px;
line-height: 22px;
top: 50%;
margin-top: -6px;
height: 12px;
line-height: 12px;
overflow: hidden;
cursor: pointer;
.@{iconfont-css-prefix}-cross {
color: @alert-close-color;
transition: color .3s;
.anticon-cross {
color: @legend-color;
transition: color .3s ease;
&:hover {
color: #404040;
color: #444;
}
}
}
@@ -85,86 +83,52 @@
}
&-with-description {
padding: 15px 15px 15px 64px;
padding: 16px 16px 16px 69px;
position: relative;
border-radius: @border-radius-base;
color: @alert-text-color;
line-height: @line-height-base;
margin-bottom: 10px;
color: @text-color;
line-height: 1.5;
}
&-with-description&-no-icon {
padding: 15px;
padding: 16px;
}
&-with-description &-icon {
position: absolute;
top: 16px;
top: 50%;
left: 24px;
font-size: 24px;
margin-top: -15px;
font-size: 29px;
}
&-with-description &-close-icon {
position: absolute;
top: 16px;
top: 17px;
right: 16px;
cursor: pointer;
font-size: @font-size-base;
font-size: 12px;
}
&-with-description &-message {
font-size: @font-size-lg;
color: @alert-message-color;
font-size: 14px;
color: @text-color;
display: block;
margin-bottom: 4px;
}
&-with-description &-description {
display: block;
}
&&-close {
height: 0 !important;
&-close {
height: 0;
opacity: 0;
margin: 0;
padding-top: 0;
padding-bottom: 0;
transition: all .3s @ease-in-out-circ;
transition: all .3s @ease-in-out;
transform-origin: 50% 0;
}
&-slide-up-leave {
animation: antAlertSlideUpOut .3s @ease-in-out-circ;
animation-fill-mode: both;
}
&-banner {
border-radius: 0;
border: 0;
margin-bottom: 0;
}
}
@keyframes antAlertSlideUpIn {
0% {
opacity: 0;
transform-origin: 0% 0%;
transform: scaleY(0);
}
100% {
opacity: 1;
transform-origin: 0% 0%;
transform: scaleY(1);
}
}
@keyframes antAlertSlideUpOut {
0% {
opacity: 1;
transform-origin: 0% 0%;
transform: scaleY(1);
}
100% {
opacity: 0;
transform-origin: 0% 0%;
transform: scaleY(0);
animation-timing-function: @ease-in-out !important;
}
}

View File

@@ -1,281 +0,0 @@
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import addEventListener from 'rc-util/lib/Dom/addEventListener';
import Affix from '../affix';
import AnchorLink from './AnchorLink';
import getScroll from '../_util/getScroll';
import raf from 'raf';
function getDefaultContainer() {
return window;
}
function getOffsetTop(element: HTMLElement, container: AnchorContainer): number {
if (!element) {
return 0;
}
if (!element.getClientRects().length) {
return 0;
}
const rect = element.getBoundingClientRect();
if (rect.width || rect.height) {
if (container === window) {
container = element.ownerDocument.documentElement;
return rect.top - container.clientTop;
}
return rect.top - (container as HTMLElement).getBoundingClientRect().top;
}
return rect.top;
}
function easeInOutCubic(t: number, b: number, c: number, d: number) {
const cc = c - b;
t /= d / 2;
if (t < 1) {
return cc / 2 * t * t * t + b;
}
return cc / 2 * ((t -= 2) * t * t + 2) + b;
}
const sharpMatcherRegx = /#([^#]+)$/;
function scrollTo(href: string, offsetTop = 0, getContainer: () => AnchorContainer, callback = () => { }) {
const container = getContainer();
const scrollTop = getScroll(container, true);
const sharpLinkMatch = sharpMatcherRegx.exec(href);
if (!sharpLinkMatch) { return; }
const targetElement = document.getElementById(sharpLinkMatch[1]);
if (!targetElement) {
return;
}
const eleOffsetTop = getOffsetTop(targetElement, container);
const targetScrollTop = scrollTop + eleOffsetTop - offsetTop;
const startTime = Date.now();
const frameFunc = () => {
const timestamp = Date.now();
const time = timestamp - startTime;
const nextScrollTop = easeInOutCubic(time, scrollTop, targetScrollTop, 450);
if (container === window) {
window.scrollTo(window.pageXOffset, nextScrollTop);
} else {
(container as HTMLElement).scrollTop = nextScrollTop;
}
if (time < 450) {
raf(frameFunc);
} else {
callback();
}
};
raf(frameFunc);
history.pushState(null, '', href);
}
type Section = {
link: String;
top: number;
};
export type AnchorContainer = HTMLElement | Window;
export interface AnchorProps {
prefixCls?: string;
className?: string;
style?: React.CSSProperties;
children?: React.ReactNode;
offsetTop?: number;
bounds?: number;
affix?: boolean;
showInkInFixed?: boolean;
getContainer?: () => AnchorContainer;
}
export interface AnchorDefaultProps extends AnchorProps {
prefixCls: string;
affix: boolean;
showInkInFixed: boolean;
getContainer: () => AnchorContainer;
}
export default class Anchor extends React.Component<AnchorProps, any> {
static Link: typeof AnchorLink;
static defaultProps = {
prefixCls: 'ant-anchor',
affix: true,
showInkInFixed: false,
getContainer: getDefaultContainer,
};
static childContextTypes = {
antAnchor: PropTypes.object,
};
private inkNode: HTMLSpanElement;
private links: String[];
private scrollEvent: any;
private animating: boolean;
constructor(props: AnchorProps) {
super(props);
this.state = {
activeLink: null,
};
this.links = [];
}
getChildContext() {
return {
antAnchor: {
registerLink: (link: String) => {
if (!this.links.includes(link)) {
this.links.push(link);
}
},
unregisterLink: (link: String) => {
const index = this.links.indexOf(link);
if (index !== -1) {
this.links.splice(index, 1);
}
},
activeLink: this.state.activeLink,
scrollTo: this.handleScrollTo,
},
};
}
componentDidMount() {
const { getContainer } = this.props as AnchorDefaultProps;
this.scrollEvent = addEventListener(getContainer(), 'scroll', this.handleScroll);
this.handleScroll();
}
componentWillUnmount() {
if (this.scrollEvent) {
this.scrollEvent.remove();
}
}
componentDidUpdate() {
this.updateInk();
}
handleScroll = () => {
if (this.animating) {
return;
}
const { offsetTop, bounds } = this.props;
this.setState({
activeLink: this.getCurrentAnchor(offsetTop, bounds),
});
}
handleScrollTo = (link: string) => {
const { offsetTop, getContainer } = this.props as AnchorDefaultProps;
this.animating = true;
this.setState({ activeLink: link });
scrollTo(link, offsetTop, getContainer, () => {
this.animating = false;
});
}
getCurrentAnchor(offsetTop = 0, bounds = 5) {
let activeLink = '';
if (typeof document === 'undefined') {
return activeLink;
}
const linkSections: Array<Section> = [];
const { getContainer } = this.props as AnchorDefaultProps;
const container = getContainer();
this.links.forEach(link => {
const sharpLinkMatch = sharpMatcherRegx.exec(link.toString());
if (!sharpLinkMatch) { return; }
const target = document.getElementById(sharpLinkMatch[1]);
if (target) {
const top = getOffsetTop(target, container);
if (top < offsetTop + bounds) {
linkSections.push({
link,
top,
});
}
}
});
if (linkSections.length) {
const maxSection = linkSections.reduce((prev, curr) => curr.top > prev.top ? curr : prev);
return maxSection.link;
}
return '';
}
updateInk = () => {
if (typeof document === 'undefined') {
return;
}
const { prefixCls } = this.props;
const anchorNode = ReactDOM.findDOMNode(this) as Element;
const linkNode = anchorNode.getElementsByClassName(`${prefixCls}-link-title-active`)[0];
if (linkNode) {
this.inkNode.style.top = `${(linkNode as any).offsetTop + linkNode.clientHeight / 2 - 4.5}px`;
}
}
saveInkNode = (node: HTMLSpanElement) => {
this.inkNode = node;
}
render() {
const {
prefixCls,
className = '',
style,
offsetTop,
affix,
showInkInFixed,
children,
} = this.props;
const { activeLink } = this.state;
const inkClass = classNames(`${prefixCls}-ink-ball`, {
visible: activeLink,
});
const wrapperClass = classNames(className, `${prefixCls}-wrapper`);
const anchorClass = classNames(prefixCls, {
'fixed': !affix && !showInkInFixed,
});
const wrapperStyle = {
maxHeight: offsetTop ? `calc(100vh - ${offsetTop}px)` : '100vh',
...style,
};
const anchorContent = (
<div
className={wrapperClass}
style={wrapperStyle}
>
<div className={anchorClass}>
<div className={`${prefixCls}-ink`} >
<span className={inkClass} ref={this.saveInkNode} />
</div>
{children}
</div>
</div>
);
return !affix ? anchorContent : (
<Affix offsetTop={offsetTop}>
{anchorContent}
</Affix>
);
}
}

View File

@@ -1,66 +0,0 @@
import * as React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
export interface AnchorLinkProps {
prefixCls?: string;
href: string;
title: React.ReactNode;
children?: any;
}
export default class AnchorLink extends React.Component<AnchorLinkProps, any> {
static defaultProps = {
prefixCls: 'ant-anchor',
href: '#',
};
static contextTypes = {
antAnchor: PropTypes.object,
};
context: {
antAnchor: any;
};
componentDidMount() {
this.context.antAnchor.registerLink(this.props.href);
}
componentWillUnmount() {
this.context.antAnchor.unregisterLink(this.props.href);
}
handleClick = () => {
this.context.antAnchor.scrollTo(this.props.href);
}
render() {
const {
prefixCls,
href,
title,
children,
} = this.props;
const active = this.context.antAnchor.activeLink === href;
const wrapperClassName = classNames(`${prefixCls}-link`, {
[`${prefixCls}-link-active`]: active,
});
const titleClassName = classNames(`${prefixCls}-link-title`, {
[`${prefixCls}-link-title-active`]: active,
});
return (
<div className={wrapperClassName}>
<a
className={titleClassName}
href={href}
title={typeof title === 'string' ? title : ''}
onClick={this.handleClick}
>
{title}
</a>
{children}
</div>
);
}
}

View File

@@ -1,93 +0,0 @@
import React from 'react';
import { mount } from 'enzyme';
import Anchor from '..';
const { Link } = Anchor;
describe('Anchor Render', () => {
it('Anchor render perfectly', () => {
const wrapper = mount(
<Anchor>
<Link href="#API" title="API" />
</Anchor>
);
wrapper.find('a[href="#API"]').simulate('click');
wrapper.instance().handleScroll();
expect(wrapper.instance().state).not.toBe(null);
});
it('Anchor render perfectly for complete href - click', () => {
const wrapper = mount(
<Anchor>
<Link href="http://www.example.com/#API" title="API" />
</Anchor>
);
wrapper.find('a[href="http://www.example.com/#API"]').simulate('click');
expect(wrapper.instance().state.activeLink).toBe('http://www.example.com/#API');
});
it('Anchor render perfectly for complete href - scroll', () => {
let root = document.getElementById('root');
if (!root) {
root = document.createElement('div', { id: 'root' });
root.id = 'root';
document.body.appendChild(root);
}
mount(<div id="API">Hello</div>, { attachTo: root });
const wrapper = mount(
<Anchor>
<Link href="http://www.example.com/#API" title="API" />
</Anchor>
);
wrapper.instance().handleScroll();
expect(wrapper.instance().state.activeLink).toBe('http://www.example.com/#API');
});
it('Anchor render perfectly for complete href - scrollTo', async () => {
const scrollToSpy = jest.spyOn(window, 'scrollTo');
let root = document.getElementById('root');
if (!root) {
root = document.createElement('div', { id: 'root' });
root.id = 'root';
document.body.appendChild(root);
}
mount(<div id="API">Hello</div>, { attachTo: root });
const wrapper = mount(
<Anchor>
<Link href="##API" title="API" />
</Anchor>
);
wrapper.instance().handleScrollTo('##API');
expect(wrapper.instance().state.activeLink).toBe('##API');
expect(scrollToSpy).not.toHaveBeenCalled();
await new Promise(resolve => setTimeout(resolve, 50));
expect(scrollToSpy).toHaveBeenCalled();
expect(wrapper.instance().animating).toBe(true);
await new Promise(resolve => setTimeout(resolve, 500));
expect(wrapper.instance().animating).toBe(false);
});
it('should remove listener when unmount', async () => {
const wrapper = mount(
<Anchor>
<Link href="#API" title="API" />
</Anchor>
);
const removeListenerSpy = jest.spyOn(wrapper.instance().scrollEvent, 'remove');
wrapper.unmount();
expect(removeListenerSpy).toHaveBeenCalled();
});
it('should unregister link when unmount children', async () => {
const wrapper = mount(
<Anchor>
<Link href="#API" title="API" />
</Anchor>
);
expect(wrapper.instance().links).toEqual(['#API']);
wrapper.setProps({ children: null });
expect(wrapper.instance().links).toEqual([]);
});
});

View File

@@ -1,155 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders ./components/anchor/demo/basic.md correctly 1`] = `
<div>
<div
class=""
>
<div
class="ant-anchor-wrapper"
style="max-height:100vh"
>
<div
class="ant-anchor"
>
<div
class="ant-anchor-ink"
>
<span
class="ant-anchor-ink-ball"
/>
</div>
<div
class="ant-anchor-link"
>
<a
class="ant-anchor-link-title"
href="#components-anchor-demo-basic"
title="Basic demo"
>
Basic demo
</a>
</div>
<div
class="ant-anchor-link"
>
<a
class="ant-anchor-link-title"
href="#components-anchor-demo-fixed"
title="Fixed demo"
>
Fixed demo
</a>
</div>
<div
class="ant-anchor-link"
>
<a
class="ant-anchor-link-title"
href="#API"
title="API"
>
API
</a>
<div
class="ant-anchor-link"
>
<a
class="ant-anchor-link-title"
href="#Anchor-Props"
title="Anchor Props"
>
Anchor Props
</a>
</div>
<div
class="ant-anchor-link"
>
<a
class="ant-anchor-link-title"
href="#Link-Props"
title="Link Props"
>
Link Props
</a>
</div>
</div>
</div>
</div>
</div>
</div>
`;
exports[`renders ./components/anchor/demo/static.md correctly 1`] = `
<div
class="ant-anchor-wrapper"
style="max-height:100vh"
>
<div
class="ant-anchor fixed"
>
<div
class="ant-anchor-ink"
>
<span
class="ant-anchor-ink-ball"
/>
</div>
<div
class="ant-anchor-link"
>
<a
class="ant-anchor-link-title"
href="#components-anchor-demo-basic"
title="Basic demo"
>
Basic demo
</a>
</div>
<div
class="ant-anchor-link"
>
<a
class="ant-anchor-link-title"
href="#components-anchor-demo-fixed"
title="Fixed demo"
>
Fixed demo
</a>
</div>
<div
class="ant-anchor-link"
>
<a
class="ant-anchor-link-title"
href="#API"
title="API"
>
API
</a>
<div
class="ant-anchor-link"
>
<a
class="ant-anchor-link-title"
href="#Anchor-Props"
title="Anchor Props"
>
Anchor Props
</a>
</div>
<div
class="ant-anchor-link"
>
<a
class="ant-anchor-link-title"
href="#Link-Props"
title="Link Props"
>
Link Props
</a>
</div>
</div>
</div>
</div>
`;

View File

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

View File

@@ -1,37 +0,0 @@
---
order: 0
title:
zh-CN: 基本
en-US: Basic
---
## zh-CN
最简单的用法。
## en-US
The simplest usage.
```jsx
import { Anchor } from 'antd';
const { Link } = Anchor;
ReactDOM.render(
<Anchor>
<Link href="#components-anchor-demo-basic" title="Basic demo" />
<Link href="#components-anchor-demo-fixed" title="Fixed demo" />
<Link href="#API" title="API">
<Link href="#Anchor-Props" title="Anchor Props" />
<Link href="#Link-Props" title="Link Props" />
</Link>
</Anchor>,
mountNode);
```
<style>
.code-box-demo .ant-affix {
z-index: 11;
}
</style>

View File

@@ -1,31 +0,0 @@
---
order: 2
title:
zh-CN: 静态位置
en-US: Static Anchor
---
## zh-CN
不浮动,状态不随页面滚动变化。
## en-US
Do not change state when page is scrolling.
```jsx
import { Anchor } from 'antd';
const { Link } = Anchor;
ReactDOM.render(
<Anchor affix={false}>
<Link href="#components-anchor-demo-basic" title="Basic demo" />
<Link href="#components-anchor-demo-fixed" title="Fixed demo" />
<Link href="#API" title="API">
<Link href="#Anchor-Props" title="Anchor Props" />
<Link href="#Link-Props" title="Link Props" />
</Link>
</Anchor>,
mountNode);
```

View File

@@ -1,32 +0,0 @@
---
category: Components
type: Other
cols: 2
title: Anchor
---
Hyperlinks to scroll on one page.
## When To Use
For displaying anchor hyperlinks on page and jumping between them.
## API
### Anchor Props
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| affix | Fixed mode of Anchor | boolean | true |
| bounds | Bounding distance of anchor area | number | 5(px) |
| getContainer | Scrolling container | () => HTMLElement | () => window |
| 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 |
| showInkInFixed | Whether show ink-balls in Fixed mode | boolean | false |
### Link Props
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| href | target of hyperlink | string | |
| title | content of hyperlink | string\|ReactNode | |

View File

@@ -1,8 +0,0 @@
import Anchor from './Anchor';
import AnchorLink from './AnchorLink';
export { AnchorProps } from './Anchor';
export { AnchorLinkProps } from './AnchorLink';
Anchor.Link = AnchorLink;
export default Anchor;

View File

@@ -1,33 +0,0 @@
---
category: Components
subtitle: 锚点
cols: 2
type: Other
title: Anchor
---
用于跳转到页面指定位置。
## 何时使用
需要展现当前页面上可供跳转的锚点链接,以及快速在锚点之间跳转。
## API
### Anchor Props
| 成员 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| affix | 固定模式 | boolean | true |
| bounds | 锚点区域边界 | number | 5(px) |
| getContainer | 指定滚动的容器 | () => HTMLElement | () => window |
| offsetBottom | 距离窗口底部达到指定偏移量后触发 | number | |
| offsetTop | 距离窗口顶部达到指定偏移量后触发 | number | |
| showInkInFixed | 固定模式是否显示小圆点 | boolean | false |
### Link Props
| 成员 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| href | 锚点链接 | string | |
| title | 文字内容 | string\|ReactNode | |

View File

@@ -1,81 +0,0 @@
@import "../../style/themes/default";
@import "../../style/mixins/index";
@anchor-border-width: 2px;
.@{ant-prefix}-anchor {
.reset-component;
position: relative;
padding-left: @anchor-border-width;
&-wrapper {
background-color: @component-background;
overflow: auto;
padding-left: 4px;
margin-left: -4px;
}
&-ink {
position: absolute;
height: 100%;
left: 0;
top: 0;
&:before {
content: ' ';
position: relative;
width: @anchor-border-width;
height: 100%;
display: block;
background-color: @border-color-split;
margin: 0 auto;
}
&-ball {
display: none;
position: absolute;
width: 8px;
height: 8px;
border-radius: 8px;
border: 2px solid @primary-color;
background-color: @component-background;
left: 50%;
transition: top .3s ease-in-out;
transform: translateX(-50%);
&.visible {
display: inline-block;
}
}
}
&.fixed &-ink &-ink-ball {
display: none;
}
&-link {
padding: 8px 0 8px 16px;
line-height: 1;
&-title {
display: block;
position: relative;
transition: all .3s;
color: @text-color;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 8px;
&:only-child {
margin-bottom: 0;
}
}
&-active > &-title {
color: @primary-color;
}
}
&-link &-link {
padding-top: 6px;
padding-bottom: 6px;
}
}

View File

@@ -1,30 +0,0 @@
import * as React from 'react';
import * as ReactDOM from 'react-dom';
export interface InputElementProps {
children: React.ReactElement<any>;
}
export default class InputElement extends React.Component<InputElementProps, any> {
private ele: HTMLInputElement;
focus = () => {
this.ele.focus ? this.ele.focus() : (ReactDOM.findDOMNode(this.ele) as HTMLInputElement).focus();
}
blur = () => {
this.ele.blur ? this.ele.blur() : (ReactDOM.findDOMNode(this.ele) as HTMLInputElement).blur();
}
saveRef = (ele: HTMLInputElement) => {
this.ele = ele;
const { ref: childRef } = this.props.children as any;
if (typeof childRef === 'function') {
childRef(ele);
}
}
render() {
return React.cloneElement(this.props.children, {
...this.props,
ref: this.saveRef,
}, null);
}
}

View File

@@ -1,361 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders ./components/auto-complete/demo/basic.md correctly 1`] = `
<div
class="ant-select-show-search ant-select-auto-complete ant-select ant-select-combobox ant-select-enabled"
style="width:200px"
>
<div
aria-autocomplete="list"
aria-expanded="false"
aria-haspopup="true"
class="ant-select-selection
ant-select-selection--single"
role="combobox"
>
<div
class="ant-select-selection__rendered"
>
<div
class="ant-select-selection__placeholder"
style="display:block;user-select:none;-webkit-user-select:none"
unselectable="on"
>
input here
</div>
<ul>
<li
class="ant-select-search ant-select-search--inline"
>
<div
class="ant-select-search__field__wrap"
>
<input
class="ant-input ant-select-search__field"
type="text"
value=""
/>
<span
class="ant-select-search__field__mirror"
>
 
</span>
</div>
</li>
</ul>
</div>
<span
class="ant-select-arrow"
style="user-select:none;-webkit-user-select:none"
unselectable="on"
>
<b />
</span>
</div>
</div>
`;
exports[`renders ./components/auto-complete/demo/certain-category.md correctly 1`] = `
<div
class="certain-category-search-wrapper"
style="width:250px"
>
<div
class="ant-select-lg ant-select-lg certain-category-search ant-select-show-search ant-select-auto-complete ant-select ant-select-combobox ant-select-enabled"
style="width:100%"
>
<div
aria-autocomplete="list"
aria-expanded="false"
aria-haspopup="true"
class="ant-select-selection
ant-select-selection--single"
role="combobox"
>
<div
class="ant-select-selection__rendered"
>
<div
class="ant-select-selection__placeholder"
style="display:block;user-select:none;-webkit-user-select:none"
unselectable="on"
>
input here
</div>
<ul>
<li
class="ant-select-search ant-select-search--inline"
>
<div
class="ant-select-search__field__wrap"
>
<span
class="ant-select-search__field ant-input-affix-wrapper"
>
<input
class="ant-input"
type="text"
value=""
/>
<span
class="ant-input-suffix"
>
<i
class="anticon anticon-search certain-category-icon"
/>
</span>
</span>
<span
class="ant-select-search__field__mirror"
>
 
</span>
</div>
</li>
</ul>
</div>
<span
class="ant-select-arrow"
style="user-select:none;-webkit-user-select:none"
unselectable="on"
>
<b />
</span>
</div>
</div>
</div>
`;
exports[`renders ./components/auto-complete/demo/custom.md correctly 1`] = `
<div
class="ant-select-show-search ant-select-auto-complete ant-select ant-select-combobox ant-select-enabled"
style="width:200px"
>
<div
aria-autocomplete="list"
aria-expanded="false"
aria-haspopup="true"
class="ant-select-selection
ant-select-selection--single"
role="combobox"
>
<div
class="ant-select-selection__rendered"
>
<ul>
<li
class="ant-select-search ant-select-search--inline"
>
<div
class="ant-select-search__field__wrap"
>
<textarea
class="ant-input custom ant-select-search__field"
placeholder="input here"
style="height:50px"
/>
<span
class="ant-select-search__field__mirror"
>
 
</span>
</div>
</li>
</ul>
</div>
<span
class="ant-select-arrow"
style="user-select:none;-webkit-user-select:none"
unselectable="on"
>
<b />
</span>
</div>
</div>
`;
exports[`renders ./components/auto-complete/demo/non-case-sensitive.md correctly 1`] = `
<div
class="ant-select-show-search ant-select-auto-complete ant-select ant-select-combobox ant-select-enabled"
style="width:200px"
>
<div
aria-autocomplete="list"
aria-expanded="false"
aria-haspopup="true"
class="ant-select-selection
ant-select-selection--single"
role="combobox"
>
<div
class="ant-select-selection__rendered"
>
<div
class="ant-select-selection__placeholder"
style="display:block;user-select:none;-webkit-user-select:none"
unselectable="on"
>
try to type \`b\`
</div>
<ul>
<li
class="ant-select-search ant-select-search--inline"
>
<div
class="ant-select-search__field__wrap"
>
<input
class="ant-input ant-select-search__field"
type="text"
value=""
/>
<span
class="ant-select-search__field__mirror"
>
 
</span>
</div>
</li>
</ul>
</div>
<span
class="ant-select-arrow"
style="user-select:none;-webkit-user-select:none"
unselectable="on"
>
<b />
</span>
</div>
</div>
`;
exports[`renders ./components/auto-complete/demo/options.md correctly 1`] = `
<div
class="ant-select-show-search ant-select-auto-complete ant-select ant-select-combobox ant-select-enabled"
style="width:200px"
>
<div
aria-autocomplete="list"
aria-expanded="false"
aria-haspopup="true"
class="ant-select-selection
ant-select-selection--single"
role="combobox"
>
<div
class="ant-select-selection__rendered"
>
<div
class="ant-select-selection__placeholder"
style="display:block;user-select:none;-webkit-user-select:none"
unselectable="on"
>
input here
</div>
<ul>
<li
class="ant-select-search ant-select-search--inline"
>
<div
class="ant-select-search__field__wrap"
>
<input
class="ant-input ant-select-search__field"
type="text"
value=""
/>
<span
class="ant-select-search__field__mirror"
>
 
</span>
</div>
</li>
</ul>
</div>
<span
class="ant-select-arrow"
style="user-select:none;-webkit-user-select:none"
unselectable="on"
>
<b />
</span>
</div>
</div>
`;
exports[`renders ./components/auto-complete/demo/uncertain-category.md correctly 1`] = `
<div
class="global-search-wrapper"
style="width:300px"
>
<div
class="ant-select-lg ant-select-lg global-search ant-select-show-search ant-select-auto-complete ant-select ant-select-combobox ant-select-enabled"
style="width:100%"
>
<div
aria-autocomplete="list"
aria-expanded="false"
aria-haspopup="true"
class="ant-select-selection
ant-select-selection--single"
role="combobox"
>
<div
class="ant-select-selection__rendered"
>
<div
class="ant-select-selection__placeholder"
style="display:block;user-select:none;-webkit-user-select:none"
unselectable="on"
>
input here
</div>
<ul>
<li
class="ant-select-search ant-select-search--inline"
>
<div
class="ant-select-search__field__wrap"
>
<span
class="ant-select-search__field ant-input-affix-wrapper"
>
<input
class="ant-input"
type="text"
value=""
/>
<span
class="ant-input-suffix"
>
<button
class="ant-btn search-btn ant-btn-primary ant-btn-lg"
type="button"
>
<i
class="anticon anticon-search"
/>
</button>
</span>
</span>
<span
class="ant-select-search__field__mirror"
>
 
</span>
</div>
</li>
</ul>
</div>
<span
class="ant-select-arrow"
style="user-select:none;-webkit-user-select:none"
unselectable="on"
>
<b />
</span>
</div>
</div>
</div>
`;

View File

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

View File

@@ -1,33 +0,0 @@
import React from 'react';
import { mount } from 'enzyme';
import AutoComplete from '..';
import focusTest from '../../../tests/shared/focusTest';
describe('AutoComplete with Custom Input Element Render', () => {
focusTest(AutoComplete);
it('AutoComplete with custom Input render perfectly', () => {
const wrapper = mount(
<AutoComplete dataSource={['12345', '23456', '34567']}>
<textarea />
</AutoComplete>
);
expect(wrapper.find('textarea').length).toBe(1);
wrapper.find('textarea').simulate('change', { target: { value: '123' } });
const dropdownWrapper = mount(wrapper.find('Trigger').instance().getComponent());
// should not filter data source defaultly
expect(dropdownWrapper.find('MenuItem').length).toBe(3);
});
it('child.ref should work', () => {
const mockRef = jest.fn();
mount(
<AutoComplete dataSource={[]}>
<input ref={mockRef} />
</AutoComplete>
);
expect(mockRef).toHaveBeenCalled();
});
});

View File

@@ -1,53 +0,0 @@
---
order: 0
title:
zh-CN: 基本使用
en-US: Basic Usage
---
## zh-CN
基本使用。通过 dataSource 设置自动完成的数据源
## en-US
Basic Usage, set datasource of autocomplete with `dataSource` property.
````jsx
import { AutoComplete } from 'antd';
function onSelect(value) {
console.log('onSelect', value);
}
class Complete extends React.Component {
state = {
dataSource: [],
}
handleSearch = (value) => {
this.setState({
dataSource: !value ? [] : [
value,
value + value,
value + value + value,
],
});
}
render() {
const { dataSource } = this.state;
return (
<AutoComplete
dataSource={dataSource}
style={{ width: 200 }}
onSelect={onSelect}
onSearch={this.handleSearch}
placeholder="input here"
/>
);
}
}
ReactDOM.render(<Complete />, mountNode);
````

View File

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

View File

@@ -1,65 +0,0 @@
---
order: 3
title:
zh-CN: 自定义输入组件
en-US: Customize Input Component
---
## zh-CN
自定义输入组件。
## en-US
Customize Input Component
````jsx
import { AutoComplete, Input } from 'antd';
const { TextArea } = Input;
function onSelect(value) {
console.log('onSelect', value);
}
class Complete extends React.Component {
state = {
dataSource: [],
}
handleSearch = (value) => {
this.setState({
dataSource: !value ? [] : [
value,
value + value,
value + value + value,
],
});
}
handleKeyPress = (ev) => {
console.log('handleKeyPress', ev);
}
render() {
const { dataSource } = this.state;
return (
<AutoComplete
dataSource={dataSource}
style={{ width: 200 }}
onSelect={onSelect}
onSearch={this.handleSearch}
>
<TextArea
placeholder="input here"
className="custom"
style={{ height: 50 }}
onKeyPress={this.handleKeyPress}
/>
</AutoComplete>
);
}
}
ReactDOM.render(<Complete />, mountNode);
````

View File

@@ -1,33 +0,0 @@
---
order: 3
title:
zh-CN: 不区分大小写
en-US: Non-case-sensitive AutoComplete
---
## zh-CN
不区分大小写的 AutoComplete
## en-US
A non-case-sensitive AutoComplete
````jsx
import { AutoComplete } from 'antd';
const dataSource = ['Burns Bay Road', 'Downing Street', 'Wall Street'];
function Complete() {
return (
<AutoComplete
style={{ width: 200 }}
dataSource={dataSource}
placeholder="try to type `b`"
filterOption={(inputValue, option) => option.props.children.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1}
/>
);
}
ReactDOM.render(<Complete />, mountNode);
````

View File

@@ -1,54 +0,0 @@
---
order: 2
title:
zh-CN: 自定义选项
en-US: Customized
---
## zh-CN
也可以直接传 `AutoComplete.Option` 作为 `AutoComplete``children`,而非使用 `dataSource`
## en-US
You could pass `AutoComplete.Option` as children of `AutoComplete`, instead of using `dataSource`
````jsx
import { AutoComplete } from 'antd';
const Option = AutoComplete.Option;
class Complete extends React.Component {
state = {
result: [],
}
handleSearch = (value) => {
let result;
if (!value || value.indexOf('@') >= 0) {
result = [];
} else {
result = ['gmail.com', '163.com', 'qq.com'].map(domain => `${value}@${domain}`);
}
this.setState({ result });
}
render() {
const { result } = this.state;
const children = result.map((email) => {
return <Option key={email}>{email}</Option>;
});
return (
<AutoComplete
style={{ width: 200 }}
onSearch={this.handleSearch}
placeholder="input here"
>
{children}
</AutoComplete>
);
}
}
ReactDOM.render(<Complete />, mountNode);
````

View File

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

View File

@@ -1,47 +0,0 @@
---
category: Components
type: Data Entry
cols: 2
title: AutoComplete
---
Autocomplete function of input field.
## When To Use
When there is a need for autocomplete functionality.
## API
```jsx
const dataSource = ['12345', '23456', '34567'];
<AutoComplete dataSource={dataSource} />
```
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| allowClear | Show clear button, effective in multiple mode only. | boolean | false |
| autoFocus | get focus when component mounted | boolean | false |
| backfill | backfill selected item the input when using keyboard | boolean | false |
| children (for customize input element) | customize input element | HTMLInputElement / HTMLTextAreaElement / React.ReactElement<InputProps> | `<Input />` |
| children (for dataSource) | Data source for autocomplet | React.ReactElement<OptionProps> / Array&lt;React.ReactElement<OptionProps>> | - |
| dataSource | Data source for autocomplete | [DataSourceItemType](https://git.io/vMMKF)\[] | |
| defaultActiveFirstOption | Whether active first option by default | boolean | true |
| defaultValue | Initial selected option. | string\|string\[]\|{ key: string, label: string\|ReactNode }\|Array&lt;{ key: string, label: string\|ReactNode }> | - |
| disabled | Whether disabled select | boolean | false |
| filterOption | If true, filter options by input, if function, filter options against it. The function will receive two arguments, `inputValue` and `option`, if the function returns `true`, the option will be included in the filtered set; Otherwise, it will be excluded. | boolean or function(inputValue, option) | true |
| optionLabelProp | Which prop value of option will render as content of select. | string | `children` |
| placeholder | placeholder of input | string | - |
| value | selected option | string\|string\[]\|{ key: string, label: string\|ReactNode }\|Array&lt;{ key: string, label: string\|ReactNode }> | - |
| onBlur | Called when leaving the component. | function() | - |
| onChange | Called when select an option or input value change, or value of input is changed | function(value) | - |
| onFocus | Called when entering the component | function() | - |
| onSearch | Called when searching items. | function(value) | - |
| onSelect | Called when a option is selected. param is option's value and option instance. | function(value, option) | - |
## Methods
| Name | Description |
| ---- | ----------- |
| blur() | remove focus |
| focus() | get focus |

View File

@@ -1,134 +0,0 @@
import * as React from 'react';
import { Option, OptGroup } from 'rc-select';
import classNames from 'classnames';
import Select, { AbstractSelectProps, SelectValue, OptionProps, OptGroupProps } from '../select';
import Input from '../input';
import InputElement from './InputElement';
export interface DataSourceItemObject { value: string; text: string; }
export type DataSourceItemType =
string |
DataSourceItemObject |
React.ReactElement<OptionProps> |
React.ReactElement<OptGroupProps>;
export interface AutoCompleteInputProps {
onChange?: React.FormEventHandler<any>;
value: any;
}
export type ValidInputElement =
HTMLInputElement |
HTMLTextAreaElement |
React.ReactElement<AutoCompleteInputProps>;
export interface AutoCompleteProps extends AbstractSelectProps {
value?: SelectValue;
defaultValue?: SelectValue;
dataSource?: DataSourceItemType[];
backfill?: boolean;
optionLabelProp?: string;
onChange?: (value: SelectValue) => void;
onSelect?: (value: SelectValue, option: Object) => any;
children?: ValidInputElement |
React.ReactElement<OptionProps> |
Array<React.ReactElement<OptionProps>>;
}
function isSelectOptionOrSelectOptGroup(child: any): Boolean {
return child && child.type && (child.type.isSelectOption || child.type.isSelectOptGroup);
}
export default class AutoComplete extends React.Component<AutoCompleteProps, {}> {
static Option = Option as React.ClassicComponentClass<OptionProps>;
static OptGroup = OptGroup as React.ClassicComponentClass<OptGroupProps>;
static defaultProps = {
prefixCls: 'ant-select',
transitionName: 'slide-up',
optionLabelProp: 'children',
choiceTransitionName: 'zoom',
showSearch: false,
filterOption: false,
};
private select: any;
getInputElement = () => {
const { children } = this.props;
const element = children && React.isValidElement(children) && children.type !== Option ?
React.Children.only(this.props.children) : <Input />;
const elementProps = { ...element.props };
// https://github.com/ant-design/ant-design/pull/7742
delete elementProps.children;
return (
<InputElement {...elementProps}>{element}</InputElement>
);
}
focus() {
this.select.focus();
}
blur() {
this.select.blur();
}
saveSelect = (node: any) => {
this.select = node;
}
render() {
let {
size, className = '', notFoundContent, prefixCls, optionLabelProp, dataSource, children,
} = this.props;
const cls = classNames({
[`${prefixCls}-lg`]: size === 'large',
[`${prefixCls}-sm`]: size === 'small',
[className]: !!className,
[`${prefixCls}-show-search`]: true,
[`${prefixCls}-auto-complete`]: true,
});
let options;
const childArray = React.Children.toArray(children);
if (childArray.length &&
isSelectOptionOrSelectOptGroup(childArray[0])
) {
options = children;
} else {
options = dataSource ? dataSource.map((item) => {
if (React.isValidElement(item)) {
return item;
}
switch (typeof item) {
case 'string':
return <Option key={item}>{item}</Option>;
case 'object':
return (
<Option key={(item as DataSourceItemObject).value}>
{(item as DataSourceItemObject).text}
</Option>
);
default:
throw new Error('AutoComplete[dataSource] only supports type `string[] | Object[]`.');
}
}) : [];
}
return (
<Select
{...this.props}
className={cls}
mode={Select.SECRET_COMBOBOX_MODE_DO_NOT_USE}
optionLabelProp={optionLabelProp}
getInputElement={this.getInputElement}
notFoundContent={notFoundContent}
ref={this.saveSelect}
>
{options}
</Select>
);
}
}

View File

@@ -1,48 +0,0 @@
---
category: Components
subtitle: 自动完成
type: Data Entry
cols: 2
title: AutoComplete
---
输入框自动完成功能。
## 何时使用
需要自动完成时。
## API
```jsx
const dataSource = ['12345', '23456', '34567'];
<AutoComplete dataSource={dataSource} />
```
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| allowClear | 支持清除, 单选模式有效 | boolean | false |
| autoFocus | 自动获取焦点 | boolean | false |
| backfill | 使用键盘选择选项的时候把选中项回填到输入框中 | boolean | false |
| children (自动完成的数据源) | 自动完成的数据源 | React.ReactElement<OptionProps> / Array&lt;React.ReactElement<OptionProps>> | - |
| children (自定义输入框) | 自定义输入框 | HTMLInputElement / HTMLTextAreaElement / React.ReactElement<InputProps> | `<Input />` |
| dataSource | 自动完成的数据源 | [DataSourceItemType](https://git.io/vMMKF)\[] | |
| defaultActiveFirstOption | 是否默认高亮第一个选项。 | boolean | true |
| defaultValue | 指定默认选中的条目 | string\|string\[]\|{ key: string, label: string\|ReactNode }\|Array&lt;{ key: string, label: string\|ReactNode}> | 无 |
| disabled | 是否禁用 | boolean | false |
| filterOption | 是否根据输入项进行筛选。当其为一个函数时,会接收 `inputValue` `option` 两个参数,当 `option` 符合筛选条件时,应返回 `true`,反之则返回 `false`。 | boolean or function(inputValue, option) | true |
| optionLabelProp | 回填到选择框的 Option 的属性值,默认是 Option 的子元素。比如在子元素需要高亮效果时,此值可以设为 `value`。 | string | `children` |
| placeholder | 输入框提示 | string | - |
| value | 指定当前选中的条目 | string\|string\[]\|{ key: string, label: string\|ReactNode }\|Array&lt;{ key: string, label: string\|ReactNode }> | 无 |
| onBlur | 获取焦点时的回调 | function() | - |
| onChange | 选中 option或 input 的 value 变化时,调用此函数 | function(value) | 无 |
| onFocus | 失去焦点时的回调 | function() | - |
| onSearch | 搜索补全项的时候调用 | function(value) | 无 |
| onSelect | 被选中时调用,参数为选中项的 value 值 | function(value, option) | 无 |
## 方法
| 名称 | 描述 |
| --- | --- |
| blur() | 移除焦点 |
| focus() | 获取焦点 |

View File

@@ -1,79 +0,0 @@
@import "../../style/themes/default";
@import "../../style/mixins/index";
@import "../../input/style/mixin";
@input-prefix-cls: ~"@{ant-prefix}-input";
@select-prefix-cls: ~"@{ant-prefix}-select";
@autocomplete-prefix-cls: ~"@{select-prefix-cls}-auto-complete";
.@{autocomplete-prefix-cls} {
.reset-component;
&.@{select-prefix-cls} {
.@{select-prefix-cls} {
&-selection {
border: 0;
box-shadow: none;
&__rendered {
margin-left: 0;
margin-right: 0;
height: 100%;
line-height: @input-height-base;
}
&__placeholder {
margin-left: (@input-padding-horizontal-base + 1px);
margin-right: (@input-padding-horizontal-base + 1px);
}
&--single {
height: auto;
}
}
}
// Fix https://github.com/ant-design/ant-design/issues/7800
.@{select-prefix-cls}-search--inline {
position: static;
float: left;
}
&-allow-clear {
.@{select-prefix-cls}-selection:hover .@{select-prefix-cls}-selection__rendered {
margin-right: 0 !important;
}
}
.@{input-prefix-cls} {
background: transparent;
border-width: @border-width-base;
line-height: @line-height-base;
height: @input-height-base;
&:focus,
&:hover {
.hover;
}
}
&-lg {
.@{select-prefix-cls}-selection__rendered {
line-height: @input-height-lg;
}
.@{input-prefix-cls} {
padding-top: @input-padding-vertical-lg;
padding-bottom: @input-padding-vertical-lg;
height: @input-height-lg;
}
}
&-sm {
.@{select-prefix-cls}-selection__rendered {
line-height: @input-height-sm;
}
.@{input-prefix-cls} {
padding-top: @input-padding-vertical-sm;
padding-bottom: @input-padding-vertical-sm;
height: @input-height-sm;
}
}
}
}

View File

@@ -1,4 +0,0 @@
import '../../style/index.less';
import './index.less';
import '../../select/style';

View File

@@ -1,29 +0,0 @@
import React from 'react';
import { mount } from 'enzyme';
import Avatar from '..';
describe('Avatar Render', () => {
it('Render long string correctly', () => {
const wrapper = mount(<Avatar>TestString</Avatar>);
const children = wrapper.find('.ant-avatar-string');
expect(children.length).toBe(1);
});
it('should render fallback string correctly', () => {
const div = global.document.createElement('div');
global.document.body.appendChild(div);
const wrapper = mount(<Avatar src="http://error.url">Fallback</Avatar>, { attachTo: div });
wrapper.instance().setScale = jest.fn(() => wrapper.instance().setState({ scale: 0.5 }));
wrapper.setState({ isImgExist: false });
const children = wrapper.find('.ant-avatar-string');
expect(children.length).toBe(1);
expect(children.text()).toBe('Fallback');
expect(wrapper.instance().setScale).toBeCalled();
expect(div.querySelector('.ant-avatar-string').style.transform).toBe('scale(0.5)');
wrapper.detach();
global.document.body.removeChild(div);
});
});

View File

@@ -1,329 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders ./components/avatar/demo/badge.md correctly 1`] = `
<div>
<span
style="margin-right:24px"
>
<span
class="ant-badge"
>
<span
class="ant-avatar ant-avatar-square ant-avatar-icon"
>
<i
class="anticon anticon-user"
/>
</span>
<sup
class="ant-scroll-number ant-badge-count"
data-show="true"
title="1"
>
<span
class="ant-scroll-number-only"
style="transition:none;-ms-transform:translateY(-1100%);-webkit-transform:translateY(-1100%);transform:translateY(-1100%)"
>
<p
class=""
>
0
</p>
<p
class=""
>
1
</p>
<p
class=""
>
2
</p>
<p
class=""
>
3
</p>
<p
class=""
>
4
</p>
<p
class=""
>
5
</p>
<p
class=""
>
6
</p>
<p
class=""
>
7
</p>
<p
class=""
>
8
</p>
<p
class=""
>
9
</p>
<p
class=""
>
0
</p>
<p
class="current"
>
1
</p>
<p
class=""
>
2
</p>
<p
class=""
>
3
</p>
<p
class=""
>
4
</p>
<p
class=""
>
5
</p>
<p
class=""
>
6
</p>
<p
class=""
>
7
</p>
<p
class=""
>
8
</p>
<p
class=""
>
9
</p>
<p
class=""
>
0
</p>
<p
class=""
>
1
</p>
<p
class=""
>
2
</p>
<p
class=""
>
3
</p>
<p
class=""
>
4
</p>
<p
class=""
>
5
</p>
<p
class=""
>
6
</p>
<p
class=""
>
7
</p>
<p
class=""
>
8
</p>
<p
class=""
>
9
</p>
</span>
</sup>
</span>
</span>
<span>
<span
class="ant-badge"
>
<span
class="ant-avatar ant-avatar-square ant-avatar-icon"
>
<i
class="anticon anticon-user"
/>
</span>
<sup
class="ant-scroll-number ant-badge-dot"
data-show="true"
/>
</span>
</span>
</div>
`;
exports[`renders ./components/avatar/demo/basic.md correctly 1`] = `
<div>
<div>
<span
class="ant-avatar ant-avatar-lg ant-avatar-circle ant-avatar-icon"
>
<i
class="anticon anticon-user"
/>
</span>
<span
class="ant-avatar ant-avatar-circle ant-avatar-icon"
>
<i
class="anticon anticon-user"
/>
</span>
<span
class="ant-avatar ant-avatar-sm ant-avatar-circle ant-avatar-icon"
>
<i
class="anticon anticon-user"
/>
</span>
</div>
<div>
<span
class="ant-avatar ant-avatar-lg ant-avatar-square ant-avatar-icon"
>
<i
class="anticon anticon-user"
/>
</span>
<span
class="ant-avatar ant-avatar-square ant-avatar-icon"
>
<i
class="anticon anticon-user"
/>
</span>
<span
class="ant-avatar ant-avatar-sm ant-avatar-square ant-avatar-icon"
>
<i
class="anticon anticon-user"
/>
</span>
</div>
</div>
`;
exports[`renders ./components/avatar/demo/dynamic.md correctly 1`] = `
<div>
<span
class="ant-avatar ant-avatar-lg ant-avatar-circle"
style="background-color:#f56a00;vertical-align:middle"
>
<span
class="ant-avatar-string"
>
U
</span>
</span>
<button
class="ant-btn ant-btn-sm"
style="margin-left:16px;vertical-align:middle"
type="button"
>
<span>
Change
</span>
</button>
</div>
`;
exports[`renders ./components/avatar/demo/type.md correctly 1`] = `
<div>
<span
class="ant-avatar ant-avatar-circle ant-avatar-icon"
>
<i
class="anticon anticon-user"
/>
</span>
<span
class="ant-avatar ant-avatar-circle"
>
<span
class="ant-avatar-string"
>
U
</span>
</span>
<span
class="ant-avatar ant-avatar-circle"
>
<span
class="ant-avatar-string"
>
USER
</span>
</span>
<span
class="ant-avatar ant-avatar-circle ant-avatar-image"
>
<img
src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
/>
</span>
<span
class="ant-avatar ant-avatar-circle"
style="color:#f56a00;background-color:#fde3cf"
>
<span
class="ant-avatar-string"
>
U
</span>
</span>
<span
class="ant-avatar ant-avatar-circle ant-avatar-icon"
style="background-color:#87d068"
>
<i
class="anticon anticon-user"
/>
</span>
</div>
`;

View File

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

View File

@@ -1,29 +0,0 @@
---
order: 3
title:
zh-CN: 带徽标的头像
en-US: With Badge
---
## zh-CN
通常用于消息提示。
## en-US
Usually used for messages remind.
````jsx
import { Avatar, Badge } from 'antd';
ReactDOM.render(
<div>
<span style={{ marginRight: 24 }}>
<Badge count={1}><Avatar shape="square" icon="user" /></Badge>
</span>
<span>
<Badge dot><Avatar shape="square" icon="user" /></Badge>
</span>
</div>,
mountNode);
````

Some files were not shown because too many files have changed in this diff Show More