Compare commits

..

3 Commits

Author SHA1 Message Date
Wei Zhu
af3142e9bd lock @types version 2018-12-25 11:44:44 +08:00
Wei Zhu
3e2672344c Bump 3.9.4 2018-12-25 11:25:15 +08:00
Wei Zhu
70d1791f5d Revert "add christmas easter egg"
This reverts commit 00aebeb975.
2018-12-25 11:23:08 +08:00
917 changed files with 11985 additions and 49332 deletions

View File

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

View File

@@ -4,6 +4,7 @@ components/*/__tests__/type.tsx
!components/*/__tests__/**/*.js
!components/*/demo/*
!.*.js
# Docs templates
site/theme/template/IconDisplay/*.js
site/theme/template/IconDisplay/*.jsx

View File

@@ -1,5 +1,5 @@
const eslintrc = {
extends: ['airbnb', 'prettier'],
extends: ['eslint-config-airbnb'],
env: {
browser: true,
node: true,
@@ -8,33 +8,39 @@ const eslintrc = {
es6: true,
},
parser: 'babel-eslint',
plugins: ['markdown', 'react', 'babel'],
plugins: [
'markdown',
'react',
'babel',
],
rules: {
'react/jsx-one-expression-per-line': 0,
'func-names': 0,
'arrow-body-style': 0,
'react/sort-comp': 0,
'react/prop-types': 0,
'react/jsx-first-prop-new-line': 0,
'react/jsx-one-expression-per-line': 0,
'react/forbid-prop-types': 0,
'react/jsx-indent': 0,
'react/jsx-wrap-multilines': ['error', { declaration: false, assignment: false }],
'import/no-extraneous-dependencies': [
'error',
{
devDependencies: [
'site/**',
'tests/**',
'scripts/**',
'**/*.test.js',
'**/__tests__/*',
'*.config.js',
'**/*.md',
],
},
],
'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,
},
};
@@ -55,13 +61,9 @@ if (process.env.RUN_ENV === 'DEMO') {
'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,
'prefer-destructuring': 0, // TODO: remove later
'max-len': 0, // TODO: remove later
'consistent-return': 0, // TODO: remove later
'no-return-assign': 0, // TODO: remove later
'no-param-reassign': 0, // TODO: remove later
'import/no-extraneous-dependencies': 0,
'import/newline-after-import': 0,
});
}

View File

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

View File

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

View File

@@ -1,12 +1,12 @@
First of all, thank you for your contribution! :-)
Please makes sure that these checkboxes are checked before submitting your pull request, thank you!
Please makes sure that these checkboxes are checked before submitting your PR, thank you!
* [ ] Make sure that you propose pull request to right branch: bugfix for `master`, feature for branch `feature`.
* [ ] Make sure that you propose PR to right branch: bugfix for `master`, feature for branch `feature`.
* [ ] Make sure that you follow antd's [code convention](https://github.com/ant-design/ant-design/wiki/Code-convention-for-antd).
* [ ] Run `npm run lint` and fix those errors before submitting in order to keep consistent code style.
* [ ] Rebase before creating a pull request to keep commit history clear.
* [ ] Add some descriptions and refer relative issues for you pull request.
* [ ] Rebase before creating a PR to keep commit history clear.
* [ ] Add some descriptions and refer relative issues for you PR.
Extra checklist:

2
.gitignore vendored
View File

@@ -38,8 +38,8 @@ components/**/*.jsx
!components/**/__tests__/*.js
!components/**/__tests__/*.js.snap
/.history
# Docs templates
site/theme/template/IconDisplay/*.js
site/theme/template/IconDisplay/*.jsx
site/theme/template/IconDisplay/fields.js
*.tmp

View File

@@ -7,16 +7,31 @@ const transformIgnorePatterns = [
module.exports = {
verbose: true,
setupFiles: ['./tests/setup.js'],
moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'md'],
modulePathIgnorePatterns: ['/_site/'],
testPathIgnorePatterns: ['/node_modules/', 'dekko', 'node'],
setupFiles: [
'./tests/setup.js',
],
moduleFileExtensions: [
'ts',
'tsx',
'js',
'jsx',
'json',
'md',
],
modulePathIgnorePatterns: [
'/_site/',
],
testPathIgnorePatterns: [
'/node_modules/',
'dekko',
'node',
],
transform: {
'\\.tsx?$': './node_modules/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$`,
testRegex: libDir === 'dist' ? 'demo\\.test\\.js$' : '.*\\.test\\.js$',
collectCoverageFrom: [
'components/**/*.{ts,tsx}',
'!components/*/style/index.tsx',
@@ -26,10 +41,12 @@ module.exports = {
'!components/**/*/interface.{ts,tsx}',
],
transformIgnorePatterns,
snapshotSerializers: ['enzyme-to-json/serializer'],
snapshotSerializers: [
'enzyme-to-json/serializer',
],
globals: {
'ts-jest': {
tsConfig: './tsconfig.test.json',
tsConfigFile: './tsconfig.test.json',
},
},
testURL: 'http://localhost',

View File

@@ -1,7 +1,13 @@
// jest config for server render environment
module.exports = {
setupFiles: ['./tests/setup.js'],
moduleFileExtensions: ['ts', 'tsx', 'js', 'md'],
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',
@@ -9,7 +15,9 @@ module.exports = {
},
testRegex: 'demo\\.test\\.js$',
testEnvironment: 'node',
snapshotSerializers: ['enzyme-to-json/serializer'],
snapshotSerializers: [
'enzyme-to-json/serializer',
],
globals: {
'ts-jest': {
tsConfigFile: './tsconfig.test.json',

View File

@@ -1,7 +0,0 @@
**/*.md
**/*.svg
**/*.ejs
**/*.html
package.json
.umi
.umi-production

View File

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

View File

@@ -1,5 +1,5 @@
{
"extends": ["stylelint-config-standard", "stylelint-config-prettier"],
"extends": "stylelint-config-standard",
"rules": {
"comment-empty-line-before": null,
"declaration-empty-line-before": null,

View File

@@ -3,7 +3,7 @@ sudo: false
language: node_js
node_js:
- 11
- 8
cache:
directories:

View File

@@ -1,10 +1,8 @@
17073025 <17073025@cnsuning.com>
282159468 <282159468@qq.com>
778758944 <778758944@qq.com>
Aaron Planell López <aaronplanell@gmail.com>
Aditya Padhi <aditya.padhi@outlook.com>
Adrian Dimitrov <dimitrov.adrian@gmail.com>
Alan Braithwaite <asbraithwaite@gmail.com>
Albert Zheng <lisong.zheng@gmail.com>
Albert 理斯特 <shuaizhexu@gmail.com>
Aleck Landgraf <aleck.landgraf@gmail.com>
@@ -13,7 +11,6 @@ Alexander Anpleenko <vaeum@yandex.com>
Alexander Suevalov <suevalov.work@gmail.com>
Alexandre Kirszenberg <a.kirszenberg@gmail.com>
Alexey Yakovlev <yallie@yandex.ru>
Alireza <alireza.mh@gmail.com>
Amorites <751809522@qq.com>
Amumu <yoyo837@hotmail.com>
Anas Tawfeek <anas.tawfeek@outlook.com>
@@ -45,18 +42,15 @@ Bruce Mitchener <bruce.mitchener@gmail.com>
Bruno Maia <bruno.mm.maia@gmail.com>
Bryan Berger <bb@ga.co>
C <4019980@qq.com>
C.J. Winslow <whoaa512@gmail.com>
Cam Song <neosoyn@gmail.com>
Camol <kwwnjujlc@sina.com>
Cang Ta <hoksilato176@gmail.com>
Canwen Xu <canwenxu@126.com>
Carter Feldman <carter@carter.at>
Catalin Miron <mironcatalin@gmail.com>
Cee Cirno <i@cee.moe>
Chandler Moisen <chandlermoisen@gmail.com>
Chang Wang <cheapsteak@gmail.com>
Charles Covey-Brandt <chazcb@gmail.com>
Chelsea Huang <chelsea.huang@sap.com>
Chenjia <ariesjia00@hotmail.com>
Chikara Chan <chenhongtu@51xianqu.net>
Chris Kelly <cjke.7777@gmail.com>
@@ -75,14 +69,12 @@ Cordaro <elvis07@163.com>
D & R <jdz321@qq.com>
Daewoong Moon <wiziple@gmail.com>
Damian Green <damian.green@microlease.com>
Damian Green <damian@gcoders.com>
Dan Minshew <ofenixculpa@gmail.com>
Dane David <dndavid102@gmail.com>
Daniel Gomez <dgomez@orangeloops.com>
Danny Hoower Antonio Viasus Avila <danjavia@gmail.com>
Daqi Song <dqaria@gmail.com>
Darren Poon <dyhpoon@gmail.com>
David Hatten <dhatten@covermymeds.com>
David Schneider <davschne@gmail.com>
DengYun <tdzl2003@gmail.com>
Dimitri Mitropoulos <dimitrimitropoulos@gmail.com>
@@ -104,7 +96,6 @@ Eddie Xie <oeddyo@gmail.com>
Eden Wang <Eden.Wang@Akmii.com>
Eden Wang <yociduo@vip.qq.com>
Eduardo Ludi <eduludi@gmail.com>
Edward <7047924@qq.com>
Egor Yurtaev <yurtaev.egor@gmail.com>
Eli White <github@eli-white.com>
Emerson Laurentino <emersonlaurentino@hotmail.com>
@@ -115,8 +106,6 @@ Eric Turriff <eric.turriff@gmail.com>
Erwann Mest <m+github@kud.io>
Evgeny Kuznetsov <jackk@ya.ru>
Eward Song <eward.song@gmail.com>
Federico Marcos <marcosfede@gmail.com>
Fergus Leung <fergusleung96@gmail.com>
Fernando Giarritiello <fgiarritiello@gmail.com>
Flynn <li.fulin@foxmail.com>
For177 <mengqiang.q@gmail.com>
@@ -139,7 +128,6 @@ Harshit Mehrotra <harshitmehrotra@hotmail.com>
Heaven <ne_smalltown@163.com>
Henri Normak <henri.normak@gmail.com>
HeskeyBaozi <hezhiyu233@foxmail.com>
Hieu Ho <hieu.ho.le@lazada.com>
Hubert Argasinski <argasinski.hubert@gmail.com>
Hughen <446370503@163.com>
Hugo LEHMANN <shogi31@gmail.com>
@@ -155,15 +143,12 @@ Ivo Stratev <ivo.stratev.tues@gmail.com>
Jack Hsieh <jack@egenware.com>
Jack Works <zjwpeter@gmail.com>
Jackie.Ls <418292038@qq.com>
Jacques Kvam <jwkvam@gmail.com>
JaePil Jung <jjp5023@gmail.com>
Jake Richards <jake.richards@genesys.com>
James <james@schoolshape.com>
JamesYin <elantion@gmail.com>
Jaroslav Bereza <github.com@bereza.cz>
Jean-Luc Sorak <jlsorak@icloud.com>
Jeffrey Carl Faden <jeffreyatw@gmail.com>
JeromeLin <jerome.lin@zhongan.com>
Jerry Bendy <jerry@icewingcc.com>
Jesper We <jesper@journeyman.se>
Jiabin Peng <png.inside@gmail.com>
@@ -174,7 +159,6 @@ Jing Ma <mjingm87@qq.com>
Jinxuan Zhu <zhujinxuan@gmail.com>
Joe <qiaolibo@126.com>
Joe Hsu <jhsu.x1@gmail.com>
Johannes Loewe <johannes@loewe.pm>
John Johnson III <john@johnjohnson.cc>
John Nguyen <jtnguyen236@gmail.com>
Jonatas Walker <jonataswalker@gmail.com>
@@ -188,9 +172,7 @@ Kaien Liao <liaokaien@gmail.com>
Kenaniah Cerny <kenaniah@gmail.com>
Kenneth Luján Rosas <elgenio.03@gmail.com>
Kenneth Truong <kenneth.e.truong@gmail.com>
KentonYu <975853613@qq.com>
Kevin Ivan <info@kevinivan.com>
Kevin Wang <gumtree200@gmail.com>
KgTong <kgtong1992@gmail.com>
Khalifa Lame <khalibloo@gmail.com>
Kian <kian@vsu.cc>
@@ -201,15 +183,12 @@ Kirill Stiopin <kirill.stiopin@hotmail.com>
Knacktus <knacktus@gmail.com>
Kyle Kelley <rgbkrk@gmail.com>
Kyle Rosenberg <kyle.rosenberg@gmail.com>
LLinFan- <catfoursi@qq.com>
Laith <laith24@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>
Li Chao <rftstars@qq.com>
Liu Yang <zation1@gmail.com>
LongYinan <lynweklm@gmail.com>
Lucien Lee <lkiral7903@gmail.com>
@@ -235,17 +214,14 @@ Meck <yesmeck@gmail.com>
MeiLin <postget.me@gmail.com>
Meow-z <372086270@qq.com>
Miaow <i@zfeng.net>
Michael Krog <michael.krog@previsto.com>
Michael Wang <ylzcylx@gmail.com>
Michalis Macheras <diodosier@gmail.com>
Mikasa33 <mikasa33@qq.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>
Mohammad Faisal <faisalhmohd@gmail.com>
Mr.Tone <vector@malubei.com>
MuYu <mr.muzea@gmail.com>
Mário Gonçalves <mario.mc.goncalves@gmail.com>
@@ -258,7 +234,6 @@ Neverland <chenjiahan@buaa.edu.cn>
Nico <nicolas@freddelacompta.com>
Nidhi Agarwal <nidhi.agarwal@zomato.com>
Nikolay <veseliy07@gmail.com>
Nikolay Solovyov <i@mr-ozio.ru>
Nimo <nimo.jser@gmail.com>
Nishant Arora <na.nishantarora@gmail.com>
Nokecy <Nokecy@163.com>
@@ -273,12 +248,10 @@ Patrick Gidich <patrick.gidich@simnova.com>
Patryk <longer44@gmail.com>
Peter <usstpeter@gmail.com>
Peter Berg <atticusberg@gmail.com>
Phanupong Janthapoon <panupong.jtp@gmail.com>
Pierre <pierre@bazoge.com>
Pierre Neter <pierreneter@gmail.com>
Piper Chester <piperchester@gmail.com>
Pixy Yuan <pixy.bupt@gmail.com>
Pooya Parsa <pyapar@gmail.com>
Pyiner <lijiuyang1992@gmail.com>
Pyroboomka <qwaarty@mail.ru>
Qiaosen Huang <joesonw@gmail.com>
@@ -298,7 +271,6 @@ Robert Wilkinson <wilkinson.robert.a@gmail.com>
Rohan Malhotra <rohan.root@gmail.com>
Rongjian Zhang <pd4d10@gmail.com>
Rrrandom <emanonhere@gmail.com>
RyanHui <ryanhui1996@gmail.com>
SHEN Lin <shenlin192@gmail.com>
Sakol Assawasagool <koobitor@gmail.com>
Sam Chen <chenxsan@gmail.com>
@@ -333,8 +305,6 @@ Thiebaud Thomas <thiebaud.tom@gmail.com>
Tino D <ginodeis@gmail.com>
Tom Gao <tom@zoomsoft.cc>
Tom Xu <tom.xu@antcosa.com>
Tom Xu <ycxzhkx@gmail.com>
TomIsion <isiontom@gmail.com>
Tomás Francisco <mail@tomasfrancisco.com>
Tomáš Szabo <tomas.szabo@deftomat.com>
Trotyl Yu <trotyl@qq.com>
@@ -352,11 +322,9 @@ Walter Barbagallo <brb.walter@gmail.com>
Walter Barbagallo <turbometalskater@gmail.com>
Wang Jun <amos.callmexyz@gmail.com>
Wang Riwu <riwu0730@gmail.com>
Wang Zhengchen <wang909208@163.com>
Warren Seymour <warren@fountainhead.tech>
Wei Zhu <yesmeck@gmail.com>
Wenchao Hu <zjuhwc@gmail.com>
Wendell <wendzhue@gmail.com>
Will Chen <willchen90@gmail.com>
WingGao <wing.gao@live.com>
Wu Haotian <whtsky@gmail.com>
@@ -365,17 +333,13 @@ Xiaoming <yokiming1994@gmail.com>
Xie Guanglei <xieguanglei@hotmail.com>
Xiping.wang <527409987@qq.com>
XuMM_12 <owiatsq@sina.cn>
Yang <504021398@qq.com>
Yang Bin <yangkghjh@gmail.com>
Yasin Uslu <nepjua@gmail.com>
Yevhen Hryhorevskyi <evgeniygrigorevskiy@gmail.com>
Yiming <ymjrcc@qq.com>
Yogesh <yogeshkumar180592@gmail.com>
Yu <yutingzhao1991@sina.com>
YuChao Liang <l.yuch@foxmail.com>
Yuhang Liu <644186735@qq.com>
Yunus EŞ <yunus@yunuses.com>
Yuri Pirola <yuri.pirola@unimi.it>
Yury Kozyrev <urakozz@me.com>
Yusuke Ito <novi.mad@gmail.com>
Yuwei Ba <i@xiaoba.me>
@@ -391,8 +355,6 @@ Zohaib Ijaz <mzohaib.qc@gmail.com>
afc163 <afc163@gmail.com>
agent-z <1607291079@qq.com>
ahalimkara <ahalimkara@gmail.com>
alex <379118572@qq.com>
arifemrecelik <ce.arifemre@gmail.com>
ascoders <576625322@qq.com>
ashishg-qburst <ashishg@qburst.com>
bLue <tbdblue@gmail.com>
@@ -412,12 +374,10 @@ chencheng (云谦) <sorrycc@gmail.com>
chencheng <sorrycc@gmail.com>
cjahv <cjahv@qq.com>
clinyong <clinyong@gmail.com>
codesign <zuishiguang@126.com>
corneyl <cornieljoosse@gmail.com>
david.lv <code4funlnyx@gmail.com>
davidhatten <david.r.hatten@gmail.com>
ddcat1115 <ddcat1115@gmail.com>
decade <decadef20@gmail.com>
delesseps <andrewlessels@gmail.com>
denzw <denzw@21cn.com>
dependabot[bot] <support@dependabot.com>
@@ -434,7 +394,6 @@ ezpub <ez.foro@gmail.com>
feng zhi hao <fzhihao@outlook.com>
fengmk2 <m@fengmk2.com>
flashback313 <windmark2012@gmail.com>
frezc <504021398@qq.com>
genie <genie88@163.com>
gregahren <grega.hren@gmail.com>
guifu <picodoth@gmail.com>
@@ -446,14 +405,12 @@ haoxin <coderhaoxin@outlook.com>
hardfist <yangjianzju@gmail.com>
hauwa123 <hauwa.aminu@outlook.com>
hehe <xpc_kacl@163.com>
hengkx <ycxzhkx@gmail.com>
henryv0 <henryvo94@gmail.com>
hi-caicai <hi@cai-cai.me>
hongxuWei <hongxu.wei@outlook.com>
huangyan.py <huangyan.py@bytedance.com>
huzzbuzz <huzzbuzz@outlook.com>
iamcastelli <sowed@cyberdude.com>
ilanus <hasanovtk@gmail.com>
imosapatryk <imosa.patryk@gmail.com>
infeng <fzhihao@outlook.com>
int2d <int2d@qq.com>
@@ -463,7 +420,6 @@ jasonxia23 <xia.jason23@gmail.com>
jiang <155259966@qq.com>
jim <wasd2144@hotmail.com>
jinouwuque <ee2win@gmail.com>
jinyaqiao1102 <405782493@QQ.com>
jojoLockLock <miffyschou@sina.com>
junjing.zhang <zhangjunjing@gmail.com>
kacjay <45483388@qq.com>
@@ -479,7 +435,6 @@ ko <git@yaksok.net>
konakona <lovekonakona@gmail.com>
kossel <lis.yichao@gmail.com>
kuang <p2227@hotmail.com>
kuitos <kuitos.lau@gmail.com>
kun sam <kunsam624@icloud.com>
leadream <857098475@qq.com>
lehug <zcszuo5811@126.com>
@@ -527,7 +482,6 @@ pinggod <pinggodstudio@gmail.com>
pizn <pizner@gmail.com>
plandem <plandem@gmail.com>
popomore <sakura9515@gmail.com>
qiaojie <1454763497@qq.com>
qixian.cs@outlook.com <wasd2144@hotmail.com>
qliu <1403927509@qq.com>
qubaoming <qubaoming@didichuxing.com>
@@ -542,16 +496,12 @@ shenlin192@gmail.com <shenlin192@gmail.com>
shlice <licesh@gmail.com>
shouyong <enlangs@163.com>
simaQ <sima.zhang1990@gmail.com>
siyu77 <xwzhang1986@gmail.com>
slientcloud <rjmuqiang@gmail.com>
sliwey <qlw1009@gmail.com>
snadn <snadn@snadn.cn>
snail <120216220@qq.com>
sojournerc <cmeyer@zvelo.com>
sorrycc <sorrycc@gmail.com>
sosohime <theziming@126.com>
spideeee <spideeee@github.com>
stickmy <stickmyc@gmail.com>
swindme <swindme@163.com>
syssam <s.y.s.sam.sys@gmail.com>
tangjinzhou <415800467@qq.com>
@@ -575,7 +525,6 @@ wonyun <wy393767068@163.com>
xiaofan2406 <xiaofan2406@gmail.com>
y-take <y.takey@gmail.com>
yangwukang <yangwukang@boco.com.cn>
ycjcl868 <45808948@qq.com>
yeliex <yeliex@yeliex.com>
yiminanci <yiminanci@gmail.com>
yiminghe <yiminghe@gmail.com>
@@ -597,12 +546,9 @@ zollero <corona7@163.com>
zombieJ <smith3816@gmail.com>
zombiej <smith3816@gmail.com>
zongzi531 <zongzi.xy@gmail.com>
ztplz <mysticzt@gmail.com>
zuiidea <zuiiidea@gmail.com>
°))))彡 <fisherspy@live.com>
邦 <sqibang@gmail.com>
爱but的苍蝇 <354788473@qq.com>
高力 <3071730@qq.com>
拷钉 <41830859@qq.com>
苏秦 <646382806@qq.com>
竹尔 <Juelchiang@gmail.com>
@@ -632,7 +578,6 @@ zuiidea <zuiiidea@gmail.com>
黄子毅 <576625322@qq.com>
翁润雨 <593110501@qq.com>
崔宏森 <948346354@qq.com>
黄文鉴 <concefly@foxmail.com>
董天成 <dongtiangche@outlook.com>
方剑成 <fjc0kb@gmail.com>
包子熊 <hezhiyu233@foxmail.com>

View File

@@ -15,302 +15,6 @@ timeline: true
---
## 3.11.3 🎅🏻
`2018-12-22`
- ⚡️ Upgrade our toolchains (babel and webpack) to latest version and prettier all codes!
- Table
- 🐞 **Fixed that dropdown menu action not clickable**. [#13563](https://github.com/ant-design/ant-design/issues/13563)
- 🐞 Fixed hovering components on Table sortable column. [#13467](https://github.com/ant-design/ant-design/issues/13467)
- 🐞 Fixed crash issue of selection Table under IE9/10. [#13540](https://github.com/ant-design/ant-design/issues/13540)
- 🐞 Fixed check-all checkbox state when Table `childrenColumnName` is specified. [#13710](https://github.com/ant-design/ant-design/issues/13710)
- 💄 Remove work break styles in table cell for consistent behavior. [#13624](https://github.com/ant-design/ant-design/issues/13624)
- 💄 Rewrote the custom filter demo of Table. [Link](https://ant.design/components/table-cn/#components-table-demo-custom-filter-panel)
- 🐞 Fixed padding of Button which children is `0`. [#13596](https://github.com/ant-design/ant-design/pull/13596) [@951565664](https://github.com/951565664)
- 💄 Chore Card header and loading UI.
- 💄 Optimized Spin wrapper styles and improve performance slightly. [2c7112b](https://github.com/ant-design/ant-design/commit/2c7112be7bf32c6e8362334b86b0799cc3a4a6c4)
- 🐞 Fixed border color of validated Input.Group. [#13529](https://github.com/ant-design/ant-design/issues/13529) [@morenyang](https://github.com/morenyang)
- 🐞 Fixed submenu animation of vertical-type Menu. [#13597](https://github.com/ant-design/ant-design/issues/13597)
- 🐞 Fixed width of WeekPicker. [#13629](https://github.com/ant-design/ant-design/issues/13629)
- 🐞 Fixed cursor style of disabled Radio.Button. [#13642](https://github.com/ant-design/ant-design/pull/13642) [@gianpaj](https://github.com/gianpaj)
- Dropdown
- 🐞 Fixed slight shift when menu is poped in Chrome. [#12115](https://github.com/ant-design/ant-design/issues/12115) [@gurungrahul2](https://github.com/gurungrahul2)
- 🐞 Fixed unexpected scrollbar caused by dropdown placed at screen edge. [00564dd](https://github.com/ant-design/ant-design/commit/3aeca7c10ec6ee3441f024fe7fdb5ae9e00564dd)
- 🐞 Fixed `offset` props when Bdage `count` is specified as a ReactNode. [#13694](https://github.com/ant-design/ant-design/issues/13694)
- 🐞 Remove nested Form.Item negetive margin. [#13748](https://github.com/ant-design/ant-design/issues/13748)
- 📝 Added a Select demo of [Hide Already Selected](https://ant.design/components/select/#components-select-demo-hide-selected). [#13552](https://github.com/ant-design/ant-design/pull/13552) [@SergeyVolynkin](https://github.com/SergeyVolynkin)
- 🐞 Fixed padding of Comment actions. [#13713](https://github.com/ant-design/ant-design/issues/13713)
- 🐞 Fixed broken arrow style when customize Popover's background color. [#13533](https://github.com/ant-design/ant-design/issues/13533) [@gurungrahul2](https://github.com/gurungrahul2)
- 🐞 Corrected Drawer `style` prop to outside wrapper. [#11504](https://github.com/ant-design/ant-design/issues/11504)
- 🐞 Fixed one problem of incorrect state when Affix first mounted. [#13737](https://github.com/ant-design/ant-design/pull/13737) [@xuxinhang](https://github.com/xuxinhang)
- 🐞 Fixed Tabs cursor style of disabled tab. [#13709](https://github.com/ant-design/ant-design/issues/13709)
- 🌟 Added some less variables of [Tabs](https://github.com/ant-design/ant-design/pull/13727), [Table](https://github.com/ant-design/ant-design/pull/13754), [Alert](https://github.com/ant-design/ant-design/pull/13768).
- TypeScript
- ⚡️ Enhanced Table `ColumnProps` types about `dataIndex`. [#13605](https://github.com/ant-design/ant-design/pull/13605) [@bondBo](https://github.com/bondBo)
- ⚡️ Enhanced Table `TableRowSelection.onChange` arguments with generic types.[#13761](https://github.com/ant-design/ant-design/issues/13761) [@hahabazinga](https://github.com/hahabazinga)
- 🐞 Fixed type of LocaleProvider's `children`. [#12974](https://github.com/ant-design/ant-design/issues/12974)
- 🐞 Fixed type of RangePicker `onOk`'s arguments. [#13650](https://github.com/ant-design/ant-design/pull/13650) [@iugo](https://github.com/iugo)
- 🐞 Fixed Comment `author` type from string to ReactNode。[#13670](https://github.com/ant-design/ant-design/pull/13670) [@reichjustin](https://github.com/reichjustin)
- 🐞 Fixed type of Select `dropdownProps`'s arguments. [#13617](https://github.com/ant-design/ant-design/pull/13617) [@SylvanasGone](https://github.com/SylvanasGone)
## 3.11.2
`2018-12-10`
- 🐞 Fixed Table `Cannot read property 'children' of undefined` error when customize `column.title` as ReactNode. [#13542](https://github.com/ant-design/ant-design/issues/13542) [@geraldchen890806](https://github.com/geraldchen890806)
- 🐞 Fixed another border problem of Button when customized less variable `@border-width-base`. [#13534](https://github.com/ant-design/ant-design/issues/13534) [@morenyang](https://github.com/morenyang)
- 🐞 Fixed Upload don't support resolve `Blob` object when `beforeUpload` returns a Promise. [#13528](https://github.com/ant-design/ant-design/pull/13528/) [@huanz](https://github.com/huanz)
- https://github.com/ant-design/ant-design/pull/13536
- 🐞 Fixed two props of Dropdown TypeScript definitions. [#13536](https://github.com/ant-design/ant-design/pull/13536) [@wangxingkang](https://github.com/wangxingkang)
## 3.11.1
`2018-12-08`
- 🐞 Fixed the issue where the Avatar icon could not be centered vertically. [#13408](https://github.com/ant-design/ant-design/issues/13408)
- 🐞 Fixed the border problem of Button when customized less variable `@border-width-base`. [#13413](https://github.com/ant-design/ant-design/issues/13413) [@morenyang](https://github.com/morenyang)
- 🐞 Fixed Commnet does not correctly display line breaks. [#13429](https://github.com/ant-design/ant-design/issues/13429)
- 🐞 Fixed the issue that when the Alert is in `closable`, the icon will be covered by the text. [#13440](https://github.com/ant-design/ant-design/issues/13440)
- Button
- 🐞 Fixed the issue that when the `href` property is `undefined`, the Button will also be rendered as a anchor. [#13337](https://github.com/ant-design/ant-design/issues/13337)
- 🐞 Fixed the issue that Edge throws an error when setting the `loading` property. [#13216](https://github.com/ant-design/ant-design/issues/13216)
- Dropdown
- 🐞 Fixed the issue that causes the icon in the Button to display smaller. [#13442](https://github.com/ant-design/ant-design/issues/13442)
- 🐞 Fixed the gap between the drop-down menu and the trigger element causes the drop-down menu to close. [#10481](https://github.com/ant-design/ant-design/issues/10481)
- Table
- 🐞 Fixed the use of filter causes an inconsistency between `selectedRowKeys` and `selectedRows` in `onChange`. [#11384](https://github.com/ant-design/ant-design/issues/11384)
- 💄 Optimize the display of the title when the mouse hovers over the sortable header. [#13312](https://github.com/ant-design/ant-design/issues/13312)
- DatePicker
- 🐞 Fixed the issue where the component lost focus after selecting the date. [#12475](https://github.com/ant-design/ant-design/issues/12475)
- 🐞 Fixed the issue that cause Safari to unresponsive. [#13424](https://github.com/ant-design/ant-design/issues/13424)
- 🐞 Fixed the issue where WeekPicker's date selection box was not aligned with the input box.
- 🐞 Fixed the blur method of the Slider. [#13439](https://github.com/ant-design/ant-design/issues/13439)
- 🐞 Fixed Cascader's i18n issues. [#13486](https://github.com/ant-design/ant-design/issues/13486)
- 🐞 Fix some TypeScript definitions. [#13390](https://github.com/ant-design/ant-design/pull/13390) [#13488](https://github.com/ant-design/ant-design/pull/13488) [#13420](https://github.com/ant-design/ant-design/issues/13420)
## 3.11.0
`2018-12-02`
3.11.0 brings two new Components, a lot of exciting changes and new features.
- 🔥 Added a new component [Comment](https://ant.design/components/comment/). [#12770](https://github.com/ant-design/ant-design/pull/12770) [@ilanus](https://github.com/ilanus)
- 🔥 Added a new component [ConfigProvider](https://ant.design/components/config-provider/) for user to customize some global setting. [#12991](https://github.com/ant-design/ant-design/pull/12991)
Component Fixes / Enhancements:
- 🌟 Avatar Added `srcSet` prop that is a list of sources to use for different screen resolutions. [#12525](https://github.com/ant-design/ant-design/pull/12525) [@philipodev](https://github.com/philipodev)
- 🌟 Upgrade `rc-notification` to `3.3.0`, Notification Added `onClick` prop that is called when the notification is clicked. [#11832](https://github.com/ant-design/ant-design/issues/11832)
- Transfer
- 🌟 Added `onSearch` prop that is executed when search field are changed and deprecated `onSearchChange`. [#12422](https://github.com/ant-design/ant-design/pull/12422)
- 🌟 Added `disabled` prop that whether disable transfer. [#13330](https://github.com/ant-design/ant-design/issues/13330)
- 🌟 Refactor Badge, support `count` as custom component. [#12140](https://github.com/ant-design/ant-design/pull/12140) [@supra28](https://github.com/supra28)
- 🌟 Slider Added `tooltipVisible` prop that whether Tooltip will always show. [#12915](https://github.com/ant-design/ant-design/pull/12915) [@zy410419243](https://github.com/zy410419243)
- 🌟 Support custom font-variant style through less variable `@font-variant-base`. [#12691](https://github.com/ant-design/ant-design/pull/12691) [@neemski](https://github.com/neemski)
- Table upgrade `rc-table` to `6.4.0`
- 🌟 Added `expandIcon` prop that custom the default expand icon. [#236](https://github.com/react-component/table/pull/236) [@kagd](https://github.com/kagd)
- 💄 Support `data-*``aria-*` attributes. [#227](https://github.com/react-component/table/pull/227) [@kagd](https://github.com/kagd)
- 🌟 onCell added `index` prop. [#222](https://github.com/react-component/table/pull/222) [@yoyo837](https://github.com/yoyo837)
- Select upgrade `rc-select` to `8.6.0`
- 🌟 Added `removeIcon``clearIcon``menuItemSelectedIcon` propallow setting `remove``clear``menuItemSelected` custom icons. [#12958](https://github.com/ant-design/ant-design/pull/12958) [@kimochg](https://github.com/kimochg)
- 🌟 Added `dropdownRender` prop that custom dropdown content. [#10831](https://github.com/ant-design/ant-design/issues/10831)
- 🌟 Added `loading` prop that indicate loading state. [#11225](https://github.com/ant-design/ant-design/issues/11225)
- 💄 Added `title` prop that Menu.Item support tooltip title when collapsed. [#12952](https://github.com/ant-design/ant-design/pull/12952)
- Cascader upgrade `rc-calendar` to `9.8.0`
- 🌟 Support multiple date format. [#437](https://github.com/react-component/calendar/pull/437) [@onlyann](https://github.com/onlyann)
- 🌟 showSearch added `limit` prop that support limit filtered item count. [#13206](https://github.com/ant-design/ant-design/pull/13206)
- 🌟 Added Hungarian locale. [#13026](https://github.com/ant-design/ant-design/pull/13026) [@ilanus](https://github.com/ilanus)
- 🐞 Fix TextArea use resize observer to check textarea size. [#13295](https://github.com/ant-design/ant-design/pull/13295)
- 🐞 Fix Tabs renderTabBar style error when tabPosition is left or right. [#13118](https://github.com/ant-design/ant-design/pull/13118)
- 🐞 Fix Upload thumbnail icon broken styles. [#13333](https://github.com/ant-design/ant-design/issues/13333)
## 3.10.9
`2018-11-24`
- 🐞 Fix disabled Checkbox label cursor style. [#13199](https://github.com/ant-design/ant-design/issues/13199) [@walker27](https://github.com/walker27)
- 🐞 Fix TimePicker input exceeds the boundary of container. [#13194](https://github.com/ant-design/ant-design/issues/13194)
- 🌟 Adjust Table sort order from `desc -> asc` to `asc -> desc`. [#13069](https://github.com/ant-design/ant-design/pull/13069) [@OvestLabs](https://github.com/OvestLabs)
- 🐞 Fix Switch can be operated when loading. [#13219](https://github.com/ant-design/ant-design/pull/13219) [@jojoLockLock](https://github.com/jojoLockLock)
- 🐞 Fix Carousel can not be interactive in fade mode. [#13215](https://github.com/ant-design/ant-design/issues/13215)
- 🐞 Fix DatePicker don't support `tabIndex` prop. [#13265](https://github.com/ant-design/ant-design/pull/13265) [@arifemrecelik](https://github.com/arifemrecelik)
- 🐞 TreeSelect won't call `loadData` when searching to avoid lagging problem. [#13245](https://github.com/ant-design/ant-design/issues/13245)
## 3.10.8
`2018-11-17`
- 🐞 Fix pop-up menu background transparency.[#13104](https://github.com/ant-design/ant-design/issues/13104)
- 🐞 Fixed an issue where disabled Button does not full width in Popconfirm.[#13119](https://github.com/ant-design/ant-design/issues/13119)
- 🐞 Fixed an issue where Radio.Button in Radio.Group overridden Badge.[#13132](https://github.com/ant-design/ant-design/issues/13132)
- 🐞 Fixed a issue where RangePicker was not aligned in `small` mode.[#13105](https://github.com/ant-design/ant-design/issues/13105)
- 🐞 Fix the problem that the Dropdown font size affects the avatar.[#13091](https://github.com/ant-design/ant-design/issues/13091)
- 🐞 Fixed an issue where tabBarGutter could not work in vertical mode.[#12968](https://github.com/ant-design/ant-design/issues/12968)
- 🌟 Adjusted the types of multiple typescript.
## 3.10.7
`2018-11-11`
- 🐞 Fix a Button `line-height` typo. [74aeace](https://github.com/ant-design/ant-design/commit/74aeaceaa88034b8cb669efb8aa3b6de41ff6f9d)
## 3.10.6
`2018-11-11`
- 🐞 Reverted [adee2f3](https://github.com/ant-design/ant-design/commit/adee2f33294b9223bda959e6ae27b4d7dadcec49) for fixing link button broken style, and changed another way to resolve [#12978](https://github.com/ant-design/ant-design/issues/12978).
## 3.10.5
`2018-11-09`
- 🎉 [Ant Design Landing](https://landing.ant.design) released!
- 📖 Published the new [sketch resource](https://github.com/ant-design/ant-design/releases/download/resource/Ant.Design.Components.Beta.3.10.5.sketch) of Ant Design.
- Button
- 🐞 Fix the style of vertical align in small `Button.Group`. [#12972](https://github.com/ant-design/ant-design/issues/12972)
- 🐞 Fix the style of vertical align with `href` prop. [#12978](https://github.com/ant-design/ant-design/issues/12978)
- 🐞 Fix the incompatibility for `Cascader[filedNames]` after `3.7.0` version. [#12970](https://github.com/ant-design/ant-design/issues/12970)
- 🐞 Fix that the show date in pop-up layer should be reset when date value is not modified successfully for `DatePicker`. [#12929](https://github.com/ant-design/ant-design/issues/12929)
- 🐞 Fix the lose of type `cross` for Icon. [#12970](https://github.com/ant-design/ant-design/issues/12970)
- 🐞 Fix the incorrect `mode` for collapsed Menu. [#2782](https://github.com/ant-design/ant-design-pro/issues/2782) [#2783](https://github.com/ant-design/ant-design-pro/issues/2783) [#2786](https://github.com/ant-design/ant-design-pro/issues/2786)
- 🐞 Fix the unnecessary `reflow` to avoid weird wave animation for Popover and Tooltip. [#12942](https://github.com/ant-design/ant-design/issues/12942)
- Table
- 🐞 Fix the style of overflow when nested in other components. [#13025](https://github.com/ant-design/ant-design/issues/13025)
- 🐞 Fix the style of overlap between the overlong head content and sort icon. [#12552](https://github.com/ant-design/ant-design/issues/12552) [#12650](https://github.com/ant-design/ant-design/issues/12650)
- 🐞 Fix the disappearance when nested in Popover and Popconfirm for Tooltip whose children is `disabled`. [#13001](https://github.com/ant-design/ant-design/issues/13001)
- 🐞 Fix the stuck problem when upload non-image file for Upload. [#12948](https://github.com/ant-design/ant-design/issues/12948)
- 🐞 Fix that `DOM Object` doesn't support property or method `removeAttribute` in `IE` and `Edge`. [#2423](https://github.com/ant-design/ant-design-pro/issues/2423)
- 🐞 Remove the unnecessary wave animation for hidden elements. [#12967](https://github.com/ant-design/ant-design/issues/12967)
## 3.10.4
`2018-11-03`
- 🌟 Support custom modal header style through less variable `@modal-header-bg`. [#12914](https://github.com/ant-design/ant-design/issues/12914)
- 🐞 Fixed mask style not working for Modal.method. [#12688](https://github.com/ant-design/ant-design/issues/12688)
- 🐞 Fixed Checkbox missing check mark inside table in IE 11. [#12597](https://github.com/ant-design/ant-design/issues/12597)
- 🐞 Fixed FormItem having different height with help info. [#12803](https://github.com/ant-design/ant-design/issues/12803)
- 🐞 Fixed Divider expands Popover card width under Chrome. [#10914](https://github.com/ant-design/ant-design/issues/10914)
- 🐞 Fixed Avatar content not aligned in Popover. [#10917](https://github.com/ant-design/ant-design/issues/#10917)
- Button
- 🐞 Fixed unable to find node on unmounted components error. [#12843](https://github.com/ant-design/ant-design/issues/12843)
- 🐞 Fixed icon margin style. [546c59a](https://github.com/ant-design/ant-design/commit/546c59a4c1a6b482afecbcb4a3cb1e385c0bbdb6)
- Table
- 🐞 Fixed sorter issue when render function is present in column. [#12870](https://github.com/ant-design/ant-design/issues/12870) [#12737](https://github.com/ant-design/ant-design/issues/12737)
- 🐞 Fixed fixed-columns border issue. [#9687](https://github.com/ant-design/ant-design/issues/9687)
- TypeScript
- 🐞 Fixed Select `onPopupScroll` props definition. [#12913](https://github.com/ant-design/ant-design/pull/12913)
- 🐞 Fixed `onFocus` and `onBlur` missing in AutoComplete props. [@muzea](https://github.com/muzea) [#12793](https://github.com/ant-design/ant-design/issues/12793);
## 3.10.3
`2018-10-27`
- 🌟 Improve util function `getScroll` TypeScript definition. [#12784](https://github.com/ant-design/ant-design/pull/12784) [@ztplz](https://github.com/ztplz)
- 🐞 Fixed that Checkbox inside CheckboxGroup do not trigger `onChange`. [#12642](https://github.com/ant-design/ant-design/issues/12642)
- 🐞 Fixed Calendar month picker not correct when set with `validRange`. [#12675](https://github.com/ant-design/ant-design/issues/12675)
- 🐞 Fixed multiple Select drop-down bug when set `dropdownMatchSelectWidth`. [#12816](https://github.com/ant-design/ant-design/pull/12816) [@hengkx](https://github.com/hengkx)
- 🐞 Fixed Card title overflow bug. [#12680](https://github.com/ant-design/ant-design/issues/12680)
- 🐞 Fixed Form[inline] help and extra overlapped. [#12725](https://github.com/ant-design/ant-design/issues/12725)
- Table
- 🌟 Support custom Table filter backgrounds. [#12775](https://github.com/ant-design/ant-design/pull/12775) [@ivankravets](https://github.com/ivankravets)
- 🐞 Adjust small table placeholder style. [#12682](https://github.com/ant-design/ant-design/issues/12682)
- 🐞 Fixed small size table header border missing in Firefox. [#12840](https://github.com/ant-design/ant-design/issues/12840)
- 🐞 Fixed checkbox align of small/middle size table. [#12723](https://github.com/ant-design/ant-design/issues/12723)
## 3.10.2
`2018-10-23`
- 📝 Translated documentation [patterns overview](https://ant.design/docs/spec/overview) to English. [#12637](https://github.com/ant-design/ant-design/pull/12637) [@ilanus](https://github.com/ilanus)
- 🛠 Improve support vi_VN locale for DatePicker component. [#12656](https://github.com/ant-design/ant-design/pull/12656) [@hieuhlc](https://github.com/hieuhlc)
- 🐞 Fixed TimePicker style issue in IE11. [#12707](https://github.com/ant-design/ant-design/pull/12707) [jinyaqiao1102](https://github.com/jinyaqiao1102)
- 🐞 Fixed Popconfirm defaultVisible. [#12733](https://github.com/ant-design/ant-design/issues/12733)
- 🐞 Fixed Table the border missing in Firefox. [#12628](https://github.com/ant-design/ant-design/issues/12628)
- 🐞 Add `touch-action: none` css on Slider to fix chrome warning. [#12595](https://github.com/ant-design/ant-design/issues/12595)
- 🐞 Fixed Tabs ink-bar vertical css. [#12276](https://github.com/ant-design/ant-design/issues/12276)
- 🐞 Fixed vertical align issue of empty Button. [#12681](https://github.com/ant-design/ant-design/issues/12681)
- 🐞 Fixed Calendar `locale` prop should have priority. [#12706](https://github.com/ant-design/ant-design/issues/12706)
- 🐞 Fixed Checkbox[checked] indeterminate style. [#12724](https://github.com/ant-design/ant-design/issues/12724)
- 🐞 Fixed `prefixCls` not passed to Popconfirm's button. [#12677](https://github.com/ant-design/ant-design/pull/12677) [@concefly](https://github.com/concefly)
- 🐞 Fixed Edge ignoring `pointer-events:none` on Button's span. [#12712](https://github.com/ant-design/ant-design/pull/12712) [@dazbo](https://github.com/dazbo)
- Progress
- 🐞 Fixed Progress `strokeColor` props not work. [#12587](https://github.com/ant-design/ant-design/pull/12587) [@lyhper](https://github.com/lyhper)
- 🐞 Fixed Progress[type="circle"] should wrap text. [#12718](https://github.com/ant-design/ant-design/issues/12718)
- TypeScript
- 🐞 Fixed `trexpandedKeys` and `onTreeExpand` definition missing in TreeSelect. [#12648](https://github.com/ant-design/ant-design/pull/12648) [@decadef20](https://github.com/decadef20)
- 🐞 Fixed missed property `key` in TabPaneProps. [682af0d](https://github.com/ant-design/ant-design/commit/682af0d44bf38a7d3e487aa909c46409db163030) [@ztplz](https://github.com/ztplz)
- 🐞 Fixed some definition of Icon. [3dbc357](https://github.com/ant-design/ant-design/commit/3dbc357ff2837debbb9b36a25b14be4757297cad)
## 3.10.1
`2018-10-12`
- 🎉 [Ant Design Mobile of Angular](http://ng.mobile.ant.design/)(NG-ZORRO-Mobile) released!
- 📝 Upgrade document `Real project with dva` to [Real project with umi](https://ant.design/docs/react/practical-projects).
- Table
- 🐞 Fixed clicking all columns will trigger sort behavior even without `sorter` props. [#12515](https://github.com/ant-design/ant-design/issues/12515)
- 🐞 Fixed extra "Sort" title hint of column. [#12613](https://github.com/ant-design/ant-design/issues/12613)
- 🐞 Fixed broken style of sort and right-aligned column. [#12552](https://github.com/ant-design/ant-design/issues/12552)
- 🐞 Fixed sort not working as expected when `columns` defined in `render`. [#12571](https://github.com/ant-design/ant-design/issues/12571)
- 🐞 Fixed sorted column background color of small size Table.
- 🐞 Fixed overlap style of Table row selection Checkbox in chrome. [5bef1aa](https://github.com/ant-design/ant-design/commit/5bef1aa6c2e792180ef8d53a1f1489376b8e35db)
- 🐞 Fixed broken style of Table inside Form.Item. [#12554](https://github.com/ant-design/ant-design/issues/12554)
- DatePicker
- 🐞 Tweak Italian locale. [#12413](https://github.com/ant-design/ant-design/issues/12413) [@yp](https://github.com/yp)
- 🐞 Fixed that picker does not get focused state after select date. [#12475](https://github.com/ant-design/ant-design/issues/12475)
- 🐞 Fixed calendar icon missing when use it in Input.Group. [#12536](https://github.com/ant-design/ant-design/issues/12536)
- 🐞 Fixed Anchor text edge cut problem. [#12520](https://github.com/ant-design/ant-design/issues/12520)
- 🐞 Fixed that Drawer still cover page even set `mask={false}`. [#12401](https://github.com/ant-design/ant-design/issues/12401)
- 🐞 Fixed disabled style missing of Input.TextArea when used as custom input in AutoComplete. [#12594](https://github.com/ant-design/ant-design/issues/12594)
- 🐞 Fixed Modal.confirm `prefixCls` prop not passing to mask element, and changed it's default value to `ant-model-confirm`. [#12546](https://github.com/ant-design/ant-design/issues/12546)
- 🐞 Fixed an align issue of Input.Group in safari. [#12493](https://github.com/ant-design/ant-design/issues/12493)
- 🐞 Fixed an align issue of standalone `<Badge />`. [#12419](https://github.com/ant-design/ant-design/issues/12419)
- 🐞 Fixed inconsistent arguments of `onExpand` when click Tree.DirectoryTree switch icon and tree node. [#12567](https://github.com/ant-design/ant-design/issues/12567)
- 🐞 Fixed hasFeedback icon unexpected focused state in IE11. [#12524](https://github.com/ant-design/ant-design/pull/12524) [@siyu77](https://github.com/siyu77)
- 🐞 Fixed multiple Select will trigger `onFocus` and `onBlur` repeatedly when click it multiple times. [#12281](https://github.com/ant-design/ant-design/issues/12281) [@Frezc ](https://github.com/Frezc)
- 🐞 Fixed long text overflow issue of circle type Progress.
- TypeScript
- 🐞 Fixed Steps `labelPlacement` definition. [#12575](https://github.com/ant-design/ant-design/pull/12575) [@yueyes](https://github.com/yueyes)
- 🐞 Fixed Select.Option `style` definition. [#12609](https://github.com/ant-design/ant-design/pull/12609) [@dimitropoulos](https://github.com/dimitropoulos)
- 🐞 Fixed `form.validateFields` overload order problem. [#12538](https://github.com/ant-design/ant-design/pull/12538) [@TomIsion](https://github.com/TomIsion)
- 🐞 Fixed AutoComponent `onFocus` `onBlur` definitions. [#12498](https://github.com/ant-design/ant-design/issues/12498)
## 3.10.0
`2018-09-30`
- 🌟 Upload adds `openFileDialogOnClick` prop to allow setting whether to open the upload dialog when the component is clicked. [#12347](https://github.com/ant-design/ant-design/pull/12347) [@hengkx](https://github.com/hengkx)
- 🌟 InputNumber adds `decimalSeparator` prop to allow setting a custom decimal. [#12329](https://github.com/ant-design/ant-design/pull/12329) [@amedora](https://github.com/amedora)
- 🌟 TreeSelect adds the `treeExpandedKeys` and `onTreeExpand` props to control the expansion of the tree. [#12145](https://github.com/ant-design/ant-design/issues/12145)
- Transfer
- 🌟 Adds `disabled` prop. [#12066](https://github.com/ant-design/ant-design/issues/12066)
- Modal
- 🌟 Adds `autoFocusButton` prop to allow specifying a button that automatically gets focus when Modal opens. [#11756](https://github.com/ant-design/ant-design/pull/11756) [@erwin-k](https://github.com/erwin-k)
- 🌟 `confirm` added `okButtonProps` and `cancelButtonProps` prop to allow setting custom props on buttons. [#12425](https://github.com/ant-design/ant-design/pull/12425) [@Whoaa512](https://github.com/Whoaa512)
- Table
- 🌟 `column.title` accepts function now. [#11246](https://github.com/ant-design/ant-design/issues/11246)
- 🌟 `onChange` adds a new parameter `extra` to allow you getting filtered data. [#12369](https://github.com/ant-design/ant-design/pull/12369)
- 🌟 Improve the sort and filter UX, You can now sort by clicking on the entire header. [#12264](https://github.com/ant-design/ant-design/pull/12264)
- 🌟 Alert adds `icon` prop to allow setting a custom icon. [Demo](https://ant.design/components/alert/#components-alert-demo-custom-icon)
- 🌟 The following components add a `suffixIcon` prop, which is used to set the icon behind the input box. For details, please refer to the documentation.
- Cascader
- DatePicker
- Select
- TreeSelect
- TimePicker
- 🌟 Add some new less variables. [f237eff](https://github.com/ant-design/ant-design/commit/f237effc2a35eb249273f6f2826092a2f9b9db45)
- 🐞 Fix Icon.createFromIconfontCN prepending `https` to the `scriptUrl`. [#12316](https://github.com/ant-design/ant-design/issues/12316)
- 🐞 Fix the issue with the `gutter` props of Row that doesn't work when using nested Col. [#12320](https://github.com/ant-design/ant-design/pull/12320)
- 🐞 Fix the issue where the Tree.DirectoryTree component could not properly expand the node when the 'expandedKeys` prop had initial values. [#12396](https://github.com/ant-design/ant-design/issues/12396)
- 🐞 Fix the issue when the `render` prop of the Transfer component returns a ReactNode, the `title` property of the list item shows an unexpected value. [#12399](https://github.com/ant-design/ant-design/issues/12399)
- 🐞 Fix Tooltip not working with CheckboxGroup. [#12427](https://github.com/ant-design/ant-design/issues/12427)
- 🐞 Fix the issue that Button can still be clicked in IE9 under loading state. [#12466](https://github.com/ant-design/ant-design/pull/12466) [@snail](https://github.com/120216220)
- 🐞 Fix the issue with mouse hover when using non-Input components in Input.Group. [#12407](https://github.com/ant-design/ant-design/pull/12407) [@hengkx](https://github.com/hengkx)
- 🐞 Fix some TypeScript type definitions. [#12374](https://github.com/ant-design/ant-design/pull/12374) [#12370](https://github.com/ant-design/ant-design/pull/12370) [#12354](https://github.com/ant-design/ant-design/pull/12354/files) [#12473](https://github.com/ant-design/ant-design/pull/12473)
## 3.9.3
`2018-09-22`
@@ -320,7 +24,7 @@ Component Fixes / Enhancements:
- 🐞 Fix parameter `dontAnimate` to `goTo` of `Carousel`, the parameter be used to closing animation transitions. [#12205](https://github.com/ant-design/ant-design/pull/12205)
- 🐞 Fix duplicated className for tabBar in `Tabs`. [589ba](https://github.com/ant-design/ant-design/commit/589bafd5db92a817c078ead6decdb81e64b2b5a8) [#12051](https://github.com/ant-design/ant-design/issues/12051)
- 🐞 Fix the vertical alignment for the title of `Card`. [#11036](https://github.com/ant-design/ant-design/pull/11036) [#10576](https://github.com/ant-design/ant-design/issues/10576)
- 🐞 Fix Item key unexpected change on `List` component. [#12299](https://github.com/ant-design/ant-design/pull/12299)[@douglasjunior](https://github.com/douglasjunior)
- 🐞 Fix Item key unspected change on `List` component. [#12299](https://github.com/ant-design/ant-design/pull/12299)[@douglasjunior](https://github.com/douglasjunior)
- 🐞 Fix `confirmFilter` in `Table` does not refresh immediately. [954c7](https://github.com/ant-design/ant-design/commit/954c7ecd8ed384a3c67ec8dfb0e0deaa14bbf83b) [#12284](https://github.com/ant-design/ant-design/issues/12284)
- Menu
- 🐞 Fix extra scrollbar when popup `Menu` in `horizontal` mode. [#12152](https://github.com/ant-design/ant-design/issues/12152)
@@ -348,13 +52,13 @@ Component Fixes / Enhancements:
- 🐞 Fix `AutoComplete` using `TextArea` as input, height adjust by manual has time delay. [#12117](https://github.com/ant-design/ant-design/issues/12117)
- 🐞 Fix `maskStyle` under `Drawer` not working. [#12125](https://github.com/ant-design/ant-design/pull/12125)[@ryerh](https://github.com/ryerh)
- 🌟 `Popconfirm` can detect whether `onVisibleChange` is triggered by Ok or Cancel buttons. [#8614](https://github.com/ant-design/ant-design/issues/8614)
- 🐞 Fix something table header in `Table` using fixed header and columns display unnecessary scrollbar. [#6515](https://github.com/ant-design/ant-design/issues/6515)
- 🐞 Fix something table header in `Table` using fixed header and colums display unecessary scorllbar. [#6515](https://github.com/ant-design/ant-design/issues/6515)
- 🐞 Fix `Spin` using `delay` still render at first time. [#12131](https://github.com/ant-design/ant-design/issues/12131)
- Icon related:
- 🐞 Fix `Icon` in `popconfirm` has wrong position. [#12080](https://github.com/ant-design/ant-design/issues/12080)
- 🐞 Add `Icon` missing icons. [#121218](https://github.com/ant-design/ant-design/issues/121218)
- 🐞 Fix `Select` don't have checked icon. [#12054](https://github.com/ant-design/ant-design/issues/12054)
- 🐞 Fix `TreeSelect` clear icon not same as previous versions. [#12124](https://github.com/ant-design/ant-design/issues/12124)
- 🐞 Fix `TreeSelect` clear icon not same as previous verions. [#12124](https://github.com/ant-design/ant-design/issues/12124)
## 3.9.1
@@ -367,7 +71,7 @@ Component Fixes / Enhancements:
- 🐞 Fixed the but that the icons are misaligned in `Card`'s `Actions` panel. [#12016](https://github.com/ant-design/ant-design/pull/12016)
- 🐞 Fixed that the icons in `Form`, `Alert`, `TimePicker` have wrong theme. [#12016](https://github.com/ant-design/ant-design/pull/12016)
- 🐞 Fixed that the icons are set to have 90deg rotation in the `header` property in `Collapse`. [#12016](https://github.com/ant-design/ant-design/pull/12016)
- 🐞 Fixed the issue that there are still old icons in some production environments. [#12016](https://github.com/ant-design/ant-design/pull/12016) [8b82f14](https://github.com/ant-design/ant-design/pull/12016/commits/8b82f143b6bd612e8ec7f1202dfd5f41127b025e)
- 🐞 FIxed the issue that there are still old icons in some production environments. [#12016](https://github.com/ant-design/ant-design/pull/12016) [8b82f14](https://github.com/ant-design/ant-design/pull/12016/commits/8b82f143b6bd612e8ec7f1202dfd5f41127b025e)
- 🐞 Fixed the bug that the new static method `Icon.createFromIconFontCN({...})` doesn't work and gives a warning. [#12013](https://github.com/ant-design/ant-design/pull/12013)
## 3.9.0
@@ -378,7 +82,7 @@ In September we brought an update for `3.9.0`. There are many new features in `3
- 🔥🔥🔥 In the `3.9.0` version, we redraw all the icons, adding two new categories, more than 90 new icons. And the bit adds a variety of styles to each icon. To this end, we have rewritten the Icon component, replaced the `fontface` icon with `SVG`, adding a number of features that allow us to quickly use new icons and styles.
![](https://gw.alipayobjects.com/zos/rmsportal/CVDHuodLwcDeyQBDoUIZ.png)
- 💄 Replace the `css` font icon with the `SVG` icon, [see more discussion about it](https://github.com/ant-design/ant-design/issues/10353).
- 💄 Replace the `css` font icon with the `SVG` icon, [see more disscussion about it](https://github.com/ant-design/ant-design/issues/10353).
- 💄 You can now render a two-color icon.
- 💄 We provide three theme of icons: outlined, filled, twoTone, default theme is outlined.
- 🌟 Two new categories, **Edit Icons** and **Data Icons**, have been added.
@@ -395,7 +99,7 @@ In addition, our **Ant Design Pro 2.0.0** version has also been released simulta
### Bugfix/Feature
- 🌟 Added Modal.open for optional icon dialog. [#11982](https://github.com/ant-design/ant-design/pull/11982) [@hsiehjack](https://github.com/hsiehjack)
- 🌟 Added Model.open for optional icon dialog. [#11982](https://github.com/ant-design/ant-design/pull/11982) [@hsiehjack](https://github.com/hsiehjack)
- 🌟 Modal.info adds the configuration of `getContainer`. [#11377](https://github.com/ant-design/ant-design/issues/11377)
- 🌟 Improve RangePicker footer UI by merging them.
- 🌟 The Anchor component adds `onClick` property. [#11898](https://github.com/ant-design/ant-design/pull/11898)
@@ -460,7 +164,7 @@ In addition, our **Ant Design Pro 2.0.0** version has also been released simulta
- 🐞 Fixed Tabs that focusable element in inactive panel cause tabs disappear. [#11261](https://github.com/ant-design/ant-design/issues/11261)
- 🐞 Fixed Badge `offset` x y axis order error. [#11648](https://github.com/ant-design/ant-design/pull/11648) [@tangjinzhou](https://github.com/tangjinzhou)
- Upload
- 🐞 Fixed delete button missing in Upload. [#10454](https://github.com/ant-design/ant-design/issues/10454)
- 🐞 Fixed detete button missing in Upload. [#10454](https://github.com/ant-design/ant-design/issues/10454)
- 🐞 Fixed Upload thumbnail which url has no extension. [#11684](https://github.com/ant-design/ant-design/pull/11684) [@elantion](https://github.com/elantion)
- 🐞 Fixed Anchor with `affix=true` doesn't work inside inner scrollable. [#11688](https://github.com/ant-design/ant-design/pull/11688) [@vitaliymaz](https://github.com/vitaliymaz)
- 🐞 Fixed card width in List.Grid. [!11712](https://github.com/ant-design/ant-design/issues/11712)
@@ -479,12 +183,12 @@ In addition, our **Ant Design Pro 2.0.0** version has also been released simulta
Thanks to 24 contributors who send pull request to 3.8.0!
- 💄 Support TypeScript 3 and improve lots of definitions.
- 💄 Use [tabular-nums font variant](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric) instead of monospaced numeric font family Tahoma. [#11567](https://github.com/ant-design/ant-design/pull/11567) [@tibdex](https://github.com/tibdex)
- 💄 Use [tabular-nums font variant](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric) instead of monospaced numberic font family Tahoma. [#11567](https://github.com/ant-design/ant-design/pull/11567) [@tibdex](https://github.com/tibdex)
- 🌟 Timeline support `mode="left|right|alternate"` now. [#11490](https://github.com/ant-design/ant-design/pull/11490) [@jrvboesch](https://github.com/jrvboesch)
- 🌟 Button added `block` prop which allow to fit parent container. [#11500](https://github.com/ant-design/ant-design/pull/11500) [@ilanus](https://github.com/ilanus)
- Tree
- 💄 Better accessibility support.
- 🐞 Fixed that some tree nodes disappear after dragged. [#11492](https://github.com/ant-design/ant-design/issues/11492)
- 🐞 Fixed that some tree nodes disapear after dragged. [#11492](https://github.com/ant-design/ant-design/issues/11492)
- 🐞 Fixed a vertical align style issue of draggable tree. [#11458](https://github.com/ant-design/ant-design/issues/11458)
- Table
- 🌟 Added `rowSelection.columnTitle` to customize selection column title. [#11042](https://github.com/ant-design/ant-design/issues/11042) [@littleLane](https://github.com/littleLane)
@@ -497,7 +201,7 @@ Thanks to 24 contributors who send pull request to 3.8.0!
- 🐞 Fixed that Tooltip not working with DatePicker. [#11451](https://github.com/ant-design/ant-design/issues/11451) [@yociduo](https://github.com/yociduo)
- 🐞 Fixed that Tooltip not working with Input.Group. [#11532](https://github.com/ant-design/ant-design/issues/11532) [@yociduo](https://github.com/yociduo)
- 🐞 Fixed that DatePicker time panel text jumping when hovering. [#11460](https://github.com/ant-design/ant-design/issues/11460)
- 🐞 Fixed Tabs display issue when switch focus elements between panels. [#11261](https://github.com/ant-design/ant-design/issues/11261)
- 🐞 Fixed Tabs display issue when switch focus elements bettween panels. [#11261](https://github.com/ant-design/ant-design/issues/11261)
- Select
- 💄 Support `data-*` attributes.
- 🐞 Fixed that selected item don't display correct position in dropdown menu items. [#11268](https://github.com/ant-design/ant-design/issues/11268)
@@ -506,7 +210,7 @@ Thanks to 24 contributors who send pull request to 3.8.0!
- Modal
- 🌟 Added `centered` prop to set vertical center position of modal. [#11537](https://github.com/ant-design/ant-design/pull/11537) [@yoyo837](https://github.com/yoyo837)
- 🐞 Fixed that closing all modals when pressing `ESC` once, now they will be closed one by one. [#11394](https://github.com/ant-design/ant-design/issues/11394) [@yoyo837](https://github.com/yoyo837)
- 🐞 Fixed issue resulting title of Modal.confirm shows scrollbar again. [#11568](https://github.com/ant-design/ant-design/pull/11568) [@cheshireoctopus](https://github.com/cheshireoctopus)
- 🐞 Fixed issue resulting title of Model.confirm shows scrollbar again. [#11568](https://github.com/ant-design/ant-design/pull/11568) [@cheshireoctopus](https://github.com/cheshireoctopus)
- 🌟 Progress added `strokeLinecap` to customize shape of edge. [#11547](https://github.com/ant-design/ant-design/pull/11547) [@blatinier](https://github.com/blatinier)
- 🌟 Drawer added `className` and deprecated `wrapClassName`. [#11609](https://github.com/ant-design/ant-design/pull/11609) [@fergiar](https://github.com/fergiar)
@@ -533,10 +237,10 @@ Thanks to 24 contributors who send pull request to 3.8.0!
- 🐞 Fix `wrapClassName` now working.
- 🐞 Fix text overflow of Tooltip. [#11402](https://github.com/ant-design/ant-design/pull/11402) [@weidapao](https://github.com/weidapao)
- 🐞 Fix style issue of dark theme Menu in Layout.Header. [#11400](https://github.com/ant-design/ant-design/pull/11400) [@hongxuWei](https://github.com/hongxuWei)
- 🐞 Fix the arrow buttons of InputNumber showing wrong position in a fixed table. [#11408](https://github.com/ant-design/ant-design/issues/11408)
- 🐞 Fix the arrow buttons of InputNumber showing wrong positon in a fixed table. [#11408](https://github.com/ant-design/ant-design/issues/11408)
- 🐞 Fix issue resulting in Select.Option shows wrong border radius in Select.OptGroup. [6cb6f5c](https://github.com/ant-design/ant-design/commit/6cb6f5c83ed634e67d5b5d0816d11aa0788a74d8)
- 🐞 Fix issue resulting in `onChange` was trigged twice when click the filter icon of Table. [#11164](https://github.com/ant-design/ant-design/issues/11164) [@adybionka](https://github.com/adybionka)
- 🐞 Fix issue resulting title of Modal.confirm shows scrollbar on Firefox. [#11432](https://github.com/ant-design/ant-design/issues/11432)
- 🐞 Fix issue resulting title of Model.confirm shows scrollbar on Firefox. [#11432](https://github.com/ant-design/ant-design/issues/11432)
- TypeScript
- 🐞 Fix type definition of Radio.Group. [#11409](https://github.com/ant-design/ant-design/pull/11409) [@eddiemoore](https://github.com/eddiemoore)
- 🐞 Fix type definition of TreeSelect. [#11442](https://github.com/ant-design/ant-design/pull/11442) [@JribiBelhassen](https://github.com/JribiBelhassen)
@@ -587,7 +291,7 @@ Component Fixes / Enhancements:
- 🌟 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 cancel button for Modal. [#10955](https://github.com/ant-design/ant-design/pull/10955) [@djyde](https://github.com/djyde)
- 🌟 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)
@@ -640,7 +344,7 @@ Component Fixes / Enhancements:
`2018-06-17`
- 🐞 Fixed that capitalized extension of Upload image url couldn't be recognized. [#10928](https://github.com/ant-design/ant-design/pull/10928) [@sliwey](https://github.com/sliwey)
- 🐞 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)
@@ -730,7 +434,7 @@ Component Fixes / Enhancements:
- 🐞 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
- 💄 Rewrote the editable table demo. [#10119](https://github.com/ant-design/ant-design/pull/10119)
- 💄 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)
@@ -826,7 +530,7 @@ Component Fixes / Enhancements:
- 🐞 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 extension in Upload. [#9936](https://github.com/ant-design/ant-design/pull/9936)
- 🐞 Fix image url display with non-image extention in Upload. [#9936](https://github.com/ant-design/ant-design/pull/9936)
## 3.4.0
@@ -885,7 +589,7 @@ Component Fixes / Enhancements:
- `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 incorrect import of `turkish(tr_TR)` locale file. [#9373](https://github.com/ant-design/ant-design/issues/9373)
- 🐞 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)
@@ -944,8 +648,8 @@ Component Fixes / Enhancements:
- 🐞 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 children Card. [#9258](https://github.com/ant-design/ant-design/issues/9258)
- 🐞 Fix background color of Avatar when image source is not existed. [#9278](https://github.com/ant-design/ant-design/pull/9278) [@andriijas](https://github.com/andriijas)
- 🐞 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)
@@ -957,7 +661,7 @@ Component Fixes / Enhancements:
- 🌟 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 setting icon type. [#8811](https://github.com/ant-design/ant-design/pull/8811) [@minwe](https://github.com/ant-design/ant-design/pull/8811)
- 🌟 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
@@ -966,12 +670,12 @@ Component Fixes / Enhancements:
- 🐞 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 parameter.
- 🌟 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 validation message.[9f2b490](https://github.com/ant-design/ant-design/commit/9f2b4905f09fca503da7a8bb5f2b8347bea663b7)
- 🐞 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)
@@ -1050,7 +754,7 @@ Component Fixes / Enhancements:
- 📖 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 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)
@@ -1073,7 +777,7 @@ Happy 2018 !~ 2018 2018 2018 coming!~~~
- 🌟 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 components on onClose. [#8769](https://github.com/ant-design/ant-design/pull/8769) [@Rohanhacker](https://github.com/Rohanhacker)
- 🌟 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.
@@ -1098,7 +802,7 @@ Happy 2018 !~ 2018 2018 2018 coming!~~~
- 🐞 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 overridden by less variable. [#8548](https://github.com/ant-design/ant-design/issues/8548) [#8549](https://github.com/ant-design/ant-design/issues/8549)
- 🐞 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)
@@ -1114,11 +818,11 @@ Happy 2018 !~ 2018 2018 2018 coming!~~~
* 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 higher than viewport. [31a0654](https://github.com/ant-design/ant-design/commit/31a0654ef990eb7bae2b18095fa0d5230b9be1da)
* 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 alignment of large size Input and Button in Form. [#8459](https://github.com/ant-design/ant-design/issues/8459)
* 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 unexpectedly in Safari. [#8453](https://github.com/ant-design/ant-design/issues/8453)
* 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)
@@ -1150,20 +854,17 @@ Learn more in the [Ant Design 3.0 announcement post](https://medium.com/ant-desi
- New [Divider](https://ant.design/components/divider/) component.
- 30 New [icons](https://ant.design/components/icon/).
### ⚠️ Read it before migration
- We suggest you upgrade to latest 3.x version directly.
- Some APIs may be deprecated in other 3.x versions which don't described below, please pay attention to warning in browser console and upgrade them.
- We strongly suggest upgrade react to 16 or newest for better support and performance, which could be conduct via [React 16 upgrading](https://reactjs.org/blog/2017/09/26/react-v16.0.html#upgrading).
- Then you can migrate to antd@3 by following `Breaking Changes` section.
### Breaking Changes
> We suggest you upgrade to latest 3.x verison directly.
> Some APIs may be daparated in other 3.x versions which don't described below, please pay attention to warning in browser console and upgrade them.
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 removed.
- 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
@@ -1235,7 +936,7 @@ We provide a [migration tool](https://github.com/ant-design/antd-migration-helpe
- 🌟 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 with `children` now. [#8164](https://github.com/ant-design/ant-design/issues/8164)
- 🌟 `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)。
@@ -1244,7 +945,7 @@ We provide a [migration tool](https://github.com/ant-design/antd-migration-helpe
- 🌟 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 steps. [Demo](https://ant.design/components/time-picker/#components-time-picker-demo-interval-options)
- 🌟 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.

View File

@@ -15,305 +15,6 @@ timeline: true
---
## 3.11.3 🎅🏻
`2018-12-22`
- ⚡️ 升级内部依赖到 babel@7 和 webpack@4,并使用 prettier 格式化了所有代码。
- Table
- 🐞 **修复 Table 列筛选菜单按钮不可点击的问题**。[#13563](https://github.com/ant-design/ant-design/issues/13563)
- 🐞 修复 Table 列设置排序后影响列头自定义浮出组件的展现问题。[#13467](https://github.com/ant-design/ant-design/issues/13467)
- 🐞 修复 Table 选择时在 IE9/10 下崩溃的问题。[#13540](https://github.com/ant-design/ant-design/issues/13540)
- 🐞 修复 Table 指定 `childrenColumnName` 时,全选框无法自动勾选的问题。[#13710](https://github.com/ant-design/ant-design/issues/13710)
- 💄 移除 Table 下英文单词断行的样式。[#13624](https://github.com/ant-design/ant-design/issues/13624)
- 💄 优化了 Table 自定义列搜索例子的实现和 UI。[演示](https://ant.design/components/table-cn/#components-table-demo-custom-filter-panel)
- 🐞 修复 Button 内容为 `0` 时的样式。[#13596](https://github.com/ant-design/ant-design/pull/13596) [@951565664](https://github.com/951565664)
- 💄 微调 Card 头部和加载中的样式细节。
- 💄 优化 Spin 样式并略微提升了切换状态的性能。[2c7112b](https://github.com/ant-design/ant-design/commit/2c7112be7bf32c6e8362334b86b0799cc3a4a6c4)
- 🐞 修复一个 Input.Group 使用 compact 时校验状态边框样式的问题。[#13529](https://github.com/ant-design/ant-design/issues/13529) [@morenyang](https://github.com/morenyang)
- 🐞 修复 Menu 在 vertical 模式下的展开收起动画。[#13597](https://github.com/ant-design/ant-design/issues/13597)
- 🐞 修复 WeekPicker 的宽度样式异常。[#13629](https://github.com/ant-design/ant-design/issues/13629)
- 🐞 修复 Radio.Button 失效状态下的鼠标手势。[#13642](https://github.com/ant-design/ant-design/pull/13642) [@gianpaj](https://github.com/gianpaj)
- Dropdown
- 🐞 修复 Chrome 下菜单弹出时有轻微移动的问题。[#12115](https://github.com/ant-design/ant-design/issues/12115) [@gurungrahul2](https://github.com/gurungrahul2)
- 🐞 修复一个屏幕边缘的 Dropdown 菜单引起的浏览器滚动条异常出现的问题。[00564dd](https://github.com/ant-design/ant-design/commit/3aeca7c10ec6ee3441f024fe7fdb5ae9e00564dd)
- 🐞 修复 Badge 的 `count` 是自定义 ReactNode 时 `offset` 属性失效的问题。[#13694](https://github.com/ant-design/ant-design/issues/13694)
- 🐞 去掉 Form.Item 内嵌负边距,改用其他的方式实现单行多个表单项。[#13748](https://github.com/ant-design/ant-design/issues/13748)
- 📝 补充了一个 Select 选择后隐藏选项的[例子](https://ant.design/components/select-cn/#components-select-demo-hide-selected)。[#13552](https://github.com/ant-design/ant-design/pull/13552) [@SergeyVolynkin](https://github.com/SergeyVolynkin)
- 🐞 修复 Comment 的操作链接边距样式。[#13713](https://github.com/ant-design/ant-design/issues/13713)
- 🐞 修复自定义 Popover 背景色时箭头样式突兀的问题。[#13533](https://github.com/ant-design/ant-design/issues/13533) [@gurungrahul2](https://github.com/gurungrahul2)
- 🐞 修正 Drawer 的 `style` 属性到最外层容器上。[#11504](https://github.com/ant-design/ant-design/issues/11504)
- 🐞 修复一个 Affix 初始化时固定状态不正确的问题。[#13737](https://github.com/ant-design/ant-design/pull/13737) [@xuxinhang](https://github.com/xuxinhang)
- 🐞 修复 Tabs 失效页签的鼠标手型。[#13709](https://github.com/ant-design/ant-design/issues/13709)
- 🌟 补充 [Tabs](https://github.com/ant-design/ant-design/pull/13727)、[Table](https://github.com/ant-design/ant-design/pull/13754)、[Alert](https://github.com/ant-design/ant-design/pull/13768) 组件的一些样式变量。
- TypeScript
- ⚡️ 完善 Table 的 `ColumnProps` 定义,增强对 `dataIndex` 的校验。[#13605](https://github.com/ant-design/ant-design/pull/13605) [@bondBo](https://github.com/bondBo)
- ⚡️ 完善 Table 的 `TableRowSelection.onChange` 参数泛型定义。[#13761](https://github.com/ant-design/ant-design/issues/13761) [@hahabazinga](https://github.com/hahabazinga)
- 🐞 修复 LocaleProvider 的 `children` 类型。 [#12974](https://github.com/ant-design/ant-design/issues/12974)
- 🐞 修复 RangePicker 的 `onOk` 的参数类型。[#13650](https://github.com/ant-design/ant-design/pull/13650) [@iugo](https://github.com/iugo)
- 🐞 修正 Comment `author` 属性的类型为 ReactNode。[#13670](https://github.com/ant-design/ant-design/pull/13670) [@reichjustin](https://github.com/reichjustin)
- 🐞 修复 Select `dropdownProps` 的参数定义。[#13617](https://github.com/ant-design/ant-design/pull/13617) [@SylvanasGone](https://github.com/SylvanasGone)
## 3.11.2
`2018-12-10`
- 🐞 修复 Table 使用自定义列头时报 `Cannot read property 'children' of undefined` 的问题。[#13542](https://github.com/ant-design/ant-design/issues/13542) [@geraldchen890806](https://github.com/geraldchen890806)
- 🐞 修复另一个 Input 在自定义了 less 变量 `@border-width-base` 时的边框问题。[#13534](https://github.com/ant-design/ant-design/pull/13534) [@morenyang](https://github.com/morenyang)
- 🐞 修复 Upload 的 `beforeUpload` 方法返回 Promise 时不支持 resolve `Blob` 对象的问题。[#13528](https://github.com/ant-design/ant-design/pull/13528/) [@huanz](https://github.com/huanz)
- https://github.com/ant-design/ant-design/pull/13536
- 🐞 修复 Dropdown 两个属性的 TypeScript 定义。[#13536](https://github.com/ant-design/ant-design/pull/13536) [@wangxingkang](https://github.com/wangxingkang)
## 3.11.1
`2018-12-08`
- 🐞 修复 Avatar 图标不能垂直居中的问题。[#13408](https://github.com/ant-design/ant-design/issues/13408)
- 🐞 修复 Input 在自定义了 less 变量 `@border-width-base` 时的边框问题。[#13413](https://github.com/ant-design/ant-design/issues/13413) [@morenyang](https://github.com/morenyang)
- 🐞 修复 Commnet 组件不能正确显示换行的问题。[#13429](https://github.com/ant-design/ant-design/issues/13429)
- 🐞 修复 Alert 在 `closable` 时,关闭图标会被文字遮挡的问题。[#13440](https://github.com/ant-design/ant-design/issues/13440)
- Button
- 🐞 修复 `href` 属性为 `undefined`Button 也会被渲染为 a 标签的问题。[#13337](https://github.com/ant-design/ant-design/issues/13337)
- 🐞 修复设置 `loading` 属性时在 Edge 下会报错的问题。[#13216](https://github.com/ant-design/ant-design/issues/13216)
- Dropdown
- 🐞 修复会导致 Button 中的图标显示变小的问题。[#13442](https://github.com/ant-design/ant-design/issues/13442)
- 🐞 修复下拉菜单跟触发元素之间的孔隙会导致下拉菜单关闭的问题。[#10481](https://github.com/ant-design/ant-design/issues/10481)
- Table
- 🐞 修复使用 filter 会导致 `onChange``selectedRowKeys``selectedRows` 不一致的问题。[#11384](https://github.com/ant-design/ant-design/issues/11384)
- 💄 优化鼠标悬停在可排序的表头上时 title 的显示。[#13312](https://github.com/ant-design/ant-design/issues/13312)
- DatePicker
- 🐞 修复选择日期后,组件会失去焦点的问题。[#12475](https://github.com/ant-design/ant-design/issues/12475)
- 🐞 修复会导致 Safari 假死的问题。[#13424](https://github.com/ant-design/ant-design/issues/13424)
- 🐞 修复 WeekPicker 的日期选择框跟输入框不对齐的问题。
- 🐞 修复 Slider 的 blur 方法。[#13439](https://github.com/ant-design/ant-design/issues/13439)
- 🐞 修复 Cascader 的国际化问题。[#13486](https://github.com/ant-design/ant-design/issues/13486)
- 🐞 修复一些组件 TypeScript 定义。[#13390](https://github.com/ant-design/ant-design/pull/13390) [#13488](https://github.com/ant-design/ant-design/pull/13488) [#13420](https://github.com/ant-design/ant-design/issues/13420)
## 3.11.0
`2018-12-02`
3.11.0 版本带来了两个新组件,还有很多激动人心的变化和新特性。
- 🔥 增加了一个新组件 [Comment](https://ant.design/components/comment-cn/)。[#12770](https://github.com/ant-design/ant-design/pull/12770) [@ilanus](https://github.com/ilanus)
- 🔥 增加了一个新组件 [ConfigProvider](https://ant.design/components/config-provider-cn/) 为组件提供统一的全局化配置。[#12991](https://github.com/ant-design/ant-design/pull/12991)
组件修复/功能增强:
- 🌟 Avatar 组件增加 `srcSet` 属性,用于设置图片类头像响应式资源地址。[#12525](https://github.com/ant-design/ant-design/pull/12525) [@philipodev](https://github.com/philipodev)
- 🌟 Notification 组件升级 `rc-notification``3.3.0`,增加 `onClick` 属性,点击通知时触发的回调函数。[#11832](https://github.com/ant-design/ant-design/issues/11832)
- Transfer
- 🌟 增加 `onSearch` 属性,搜索框内容时改变时的回调函数,并废弃 `onSearchChange` 属性。[#12422](https://github.com/ant-design/ant-design/pull/12422)
- 🌟 增加 `disabled` 属性,用于禁用搜索框。[#13330](https://github.com/ant-design/ant-design/issues/13330)
- 🌟 Badge 进行了重构,`count` 支持自定义组件。[#12140](https://github.com/ant-design/ant-design/pull/12140) [@supra28](https://github.com/supra28)
- 🌟 Slider 组件增加 `tooltipVisible` 属性,用于 Tooltip 是否始终显示。[#12915](https://github.com/ant-design/ant-design/pull/12915) [@zy410419243](https://github.com/zy410419243)
- 🌟 增加 less 变量 `@font-variant-base` 定制 font-variant 样式。[#12691](https://github.com/ant-design/ant-design/pull/12691) [@neemski](https://github.com/neemski)
- Table 升级 `rc-table``6.4.0`
- 🌟 增加 `expandIcon` 属性,用于自定义表格展开图标。[#236](https://github.com/react-component/table/pull/236) [@kagd](https://github.com/kagd)
- 💄 支持 `data-*``aria-*` 属性。[#227](https://github.com/react-component/table/pull/227) [@kagd](https://github.com/kagd)
- 🌟 onCell 方法增加 `index` 参数。[#222](https://github.com/react-component/table/pull/222) [@yoyo837](https://github.com/yoyo837)
- Select 组件升级 `rc-select``8.6.0`
- 🌟 增加 `removeIcon``clearIcon``menuItemSelectedIcon` 属性,用于自定义删除、清空、选中的图标。[#12958](https://github.com/ant-design/ant-design/pull/12958) [@kimochg](https://github.com/kimochg)
- 🌟 增加 `dropdownRender` 属性, 用于自定义下拉框内容。[#10831](https://github.com/ant-design/ant-design/issues/10831)
- 🌟 增加 `loading` 属性, 用于展示加载中状态。 [#11225](https://github.com/ant-design/ant-design/issues/11225)
- 💄 Menu.Item 组件增加 `title` 属性,用于在收缩时展示的悬浮标题。[#12952](https://github.com/ant-design/ant-design/pull/12952)
- Cascader 升级 `rc-calendar``9.8.0`
- 🌟 支持多种时间格式。[#437](https://github.com/react-component/calendar/pull/437) [@onlyann](https://github.com/onlyann)
- 🌟 showSearch 方法增加 `limit` 参数,用于限制搜索结果展示数量。[#13206](https://github.com/ant-design/ant-design/pull/13206)
- 🌟 增加匈牙利国际化文案。[#13026](https://github.com/ant-design/ant-design/pull/13026) [@ilanus](https://github.com/ilanus)
- 🐞 修复 TextArea 组件高度不能自适应问题。[#13295](https://github.com/ant-design/ant-design/pull/13295)
- 🐞 修复 Tabs 组件当 tabPosition 为 left 或 right 的时候renderTabBar 样式问题。[#13118](https://github.com/ant-design/ant-design/pull/13118)
- 🐞 修复 Upload 缩略图图标样式错误。[#13333](https://github.com/ant-design/ant-design/issues/13333)
## 3.10.9
`2018-11-24`
- 🐞 修复 Checkbox 标签名鼠标失效样式没有生效的问题。[#13199](https://github.com/ant-design/ant-design/issues/13199) [@walker27](https://github.com/walker27)
- 🐞 修复 TimePicker 输入框超出边界的样式问题。[#13194](https://github.com/ant-design/ant-design/issues/13194)
- 🌟 Table 排序调整为先升序后降序。[#13069](https://github.com/ant-design/ant-design/pull/13069) [@OvestLabs](https://github.com/OvestLabs)
- 🐞 修复 loading 状态下Switch 仍然可以被操作的问题。[#13219](https://github.com/ant-design/ant-design/pull/13219) [@jojoLockLock](https://github.com/jojoLockLock)
- 🐞 修复 Carousel 组件渐显效果下轮播区域无法点击的问题。[#13215](https://github.com/ant-design/ant-design/issues/13215)
- 🐞 修复 DatePicker 对 `tabIndex` 属性的支持。[#13265](https://github.com/ant-design/ant-design/pull/13265) [@arifemrecelik](https://github.com/arifemrecelik)
- 🐞 TreeSelect 现在在搜索时不再调用 `loadData` 以避免卡死。[#13245](https://github.com/ant-design/ant-design/issues/13245)
## 3.10.8
`2018-11-17`
- 🐞 修复弹出菜单背景透明的问题。[#13104](https://github.com/ant-design/ant-design/issues/13104)
- 🐞 修复了 disabled Button 在 Popconfirm 中的不占用整个宽度的问题。[#13119](https://github.com/ant-design/ant-design/issues/13119)
- 🐞 修复了 Radio.Group 中的 Radio.Button 覆盖了 Badge 的问题。[#13132](https://github.com/ant-design/ant-design/issues/13132)
- 🐞 修复 RangePicker 在 `small` 模式不对齐的问题。[#13105](https://github.com/ant-design/ant-design/issues/13105)
- 🐞 修复 Dropdown 字体大小影响到头像的问题。[#13091](https://github.com/ant-design/ant-design/issues/13091)
- 🐞 修复 tabBarGutter 无法在垂直模式下工作的问题。[#12968](https://github.com/ant-design/ant-design/issues/12968)
- 🌟 调整了多处 typescript 的类型。
## 3.10.7
`2018-11-11`
- 🐞 修复一个 Button `line-height` 的笔误。 [74aeace](https://github.com/ant-design/ant-design/commit/74aeaceaa88034b8cb669efb8aa3b6de41ff6f9d)
## 3.10.6
`2018-11-11`
- 🐞 回滚了 [adee2f3](https://github.com/ant-design/ant-design/commit/adee2f33294b9223bda959e6ae27b4d7dadcec49) 以修复一个链接按钮样式问题,并且换了一个方式修复 [#12978](https://github.com/ant-design/ant-design/issues/12978)。
## 3.10.5
`2018-11-09`
- 🎉 发布 [Landing 模板集](https://landing.ant.design)
- 📖 发布 Ant Design [新版 Sketch 模版文件](https://github.com/ant-design/ant-design/releases/download/resource/Ant.Design.Components.Beta.3.10.5.sketch)。
- Button
- 🐞 修复在小尺寸的 `Button.Group` 中没有垂直对齐的问题。[#12972](https://github.com/ant-design/ant-design/issues/12972)
- 🐞 修复设置了 `href` 属性没有垂直对齐的问题。[#12978](https://github.com/ant-design/ant-design/issues/12978)
- 🐞 修复 Cascader 组件的 `filedNames` 属性在 `3.7.0` 版本后的兼容性问题。[#12970](https://github.com/ant-design/ant-design/issues/12970)
- 🐞 修复 DatePicker 组件的日期值没有被成功修改,浮层中显示的日期应该被重置的问题。[#12929](https://github.com/ant-design/ant-design/issues/12929)
- 🐞 修复 Icon 组件丢失 `cross` 类型图标的问题。[#12970](https://github.com/ant-design/ant-design/issues/12970)
- 🐞 修复 Menu 组件处于折叠状态时菜单类型不正确的问题。[#2782](https://github.com/ant-design/ant-design-pro/issues/2782) [#2783](https://github.com/ant-design/ant-design-pro/issues/2783) [#2786](https://github.com/ant-design/ant-design-pro/issues/2786)
- 🐞 修复 Popover 和 Tooltip 组件中出现不必要的回流问题,避免出现奇怪的动画。[#12942](https://github.com/ant-design/ant-design/issues/12942)
- Table
- 🐞 修复嵌套在其他组件中时样式溢出的问题。[#13025](https://github.com/ant-design/ant-design/issues/13025)
- 🐞 修复表头内容过长会与排序图表重合的问题。[#12552](https://github.com/ant-design/ant-design/issues/12552) [#12650](https://github.com/ant-design/ant-design/issues/12650)
- 🐞 修复 Tooltip 组件嵌套在 `Popover/Popconfirm` 下,并且子元素为 `disabled` 状态时不消失的问题。[#13001](https://github.com/ant-design/ant-design/issues/13001)
- 🐞 修复 Upload 组件在上传非图片类型文件时会将文件读取至内存,造成浏览器卡顿的问题。[#12948](https://github.com/ant-design/ant-design/issues/12948)
- 🐞 修复在 `IE``Edge` 浏览器下 `DOM 对象` 不支持 `removeAttribute` 属性的问题。[#2423](https://github.com/ant-design/ant-design-pro/issues/2423)
- 🐞 对于隐藏元素去掉不必要的波浪动画。[#12967](https://github.com/ant-design/ant-design/issues/12967)
## 3.10.4
`2018-11-03`
- Modal
- 🌟 增加 less 变量 `@modal-header-bg` 定制 Modal 头部颜色。[#12914](https://github.com/ant-design/ant-design/issues/12914)
- 🐞 修复 maskStyle 在 Modal.method 中无效的问题。[#12688](https://github.com/ant-design/ant-design/issues/12688)
- 🐞 修复 Checkbox 在 IE 11 中丢失勾号的问题。[#12597](https://github.com/ant-design/ant-design/issues/12597)
- 🐞 修复 FormItem 在有帮助信息时高度不一致的问题。[#12803](https://github.com/ant-design/ant-design/issues/12803)
- 🐞 修复 Chrome 下 Divider 在 Popover 中会撑宽 Popover card 的问题。[#10914](https://github.com/ant-design/ant-design/issues/10914)
- 🐞 修复 Avatar 内容在 Popover 中没有对齐的问题。[#10917](https://github.com/ant-design/ant-design/issues/#10917)
- Button
- 🐞 修复 unable to find node on unmounted components 报错问题。[#12843](https://github.com/ant-design/ant-design/issues/12843)
- 🐞 修复 icon margin 样式。[546c59a](https://github.com/ant-design/ant-design/commit/546c59a4c1a6b482afecbcb4a3cb1e385c0bbdb6)
- Table
- 🐞 修复在 Column 中使用 render function 时的排序问题。[#12870](https://github.com/ant-design/ant-design/issues/12870) [#12737](https://github.com/ant-design/ant-design/issues/12737)
- 🐞 修复固定列 border 样式问题。[#9687](https://github.com/ant-design/ant-design/issues/9687)
- TypeScript
- 🐞 修复 Select `onPopupScroll` 属性定义 [#12913](https://github.com/ant-design/ant-design/pull/12913)。
- 🐞 修复 AutoComplete 缺失 `onFocus` 以及 `onBlur` 属性定义。[@muzea](https://github.com/muzea) [#12793](https://github.com/ant-design/ant-design/issues/12793);
## 3.10.3
`2018-10-27`
- 🌟 完善工具方法 `getScroll` 的 TypeScript 定义。[#12784](https://github.com/ant-design/ant-design/pull/12784) [@ztplz](https://github.com/ztplz)
- 🐞 修复 CheckboxGroup 内 Checkbox 没有触发 `onChange` 的问题。[#12642](https://github.com/ant-design/ant-design/issues/12642)
- 🐞 修复 Calendar 组件设置 `validRange` 后选择月份时的问题。[#12675](https://github.com/ant-design/ant-design/issues/12675)
- 🐞 修复 Select 组件设置了 `dropdownMatchSelectWidth` 后多选下拉框的问题。[#12816](https://github.com/ant-design/ant-design/pull/12816) [@hengkx](https://github.com/hengkx)
- 🐞 修复 Card 标题可能会被覆盖的问题。[#12680](https://github.com/ant-design/ant-design/issues/12680)
- 🐞 修复 Form[inline] 提示信息和错误文案被覆盖的问题。[#12725](https://github.com/ant-design/ant-design/issues/12725)
- Table
- 🌟 支持自定义 Table 组件的筛选按钮的背景色。[#12775](https://github.com/ant-design/ant-design/pull/12775) [@ivankravets](https://github.com/ivankravets)
- 🐞 调整 Table 组件的样式细节。[#12682](https://github.com/ant-design/ant-design/issues/12682)
- 🐞 修复在火狐下,当 size="small" 未排序时下边框不显示。[#12840](https://github.com/ant-design/ant-design/issues/12840)
- 🐞 修复大小为 small/middle 时复选框不能对齐的问题。[#12723](https://github.com/ant-design/ant-design/issues/12723)
## 3.10.2
`2018-10-23`
- 📝 翻译[模式-概览](https://ant.design/docs/spec/overview)文档到英文。[#12637](https://github.com/ant-design/ant-design/pull/12637) [@ilanus](https://github.com/ilanus)
- 🛠 DatePicker 组件完善对越南语vi_VN的支持。[#12656](https://github.com/ant-design/ant-design/pull/12656) [@hieuhlc](https://github.com/hieuhlc)
- 🐞 修复 TimePicker 组件在 IE11 下的样式问题。[#12707](https://github.com/ant-design/ant-design/pull/12707) [jinyaqiao1102](https://github.com/jinyaqiao1102)
- 🐞 修复 Popconfirm 组件的 `defaultVisible` 属性的问题。[#12733](https://github.com/ant-design/ant-design/issues/12733)
- 🐞 修复在 Firefox 下 Table 组件头部边框不显示的问题。[#12628](https://github.com/ant-design/ant-design/issues/12628)
- 🐞 组件 Slider 添加 `touch-action: none` 样式修复 Chrome 上可能出现的报错。[#12595](https://github.com/ant-design/ant-design/issues/12595)
- 🐞 修复 Tabs 组件垂直模式下边框条的问题。[#12276](https://github.com/ant-design/ant-design/issues/12276)
- 🐞 修复 Button 组件无内容时垂直不对齐的问题。[#12681](https://github.com/ant-design/ant-design/issues/12681)
- 🐞 修复 Calendar 组件 `locale` 属性不生效的问题。[#12706](https://github.com/ant-design/ant-design/issues/12706)
- 🐞 修复 Checkbox 组件在设置 `indeterminate` 的情况下的样式问题。[#12724](https://github.com/ant-design/ant-design/issues/12724)
- 🐞 修复 `prefixCls` 没有应用到 Popconfirm 组件按钮上的问题。[#12677](https://github.com/ant-design/ant-design/pull/12677) [@concefly](https://github.com/concefly)
- 🐞 修复 Edge 下 Button 组件 `pointer-events:none` 对于 span 不生效的问题。[#12712](https://github.com/ant-design/ant-design/pull/12712) [@dazbo](https://github.com/dazbo)
- Progress
- 🐞 修复 Progress 组件的 `strokeColor` 属性无效的问题。[#12587](https://github.com/ant-design/ant-design/pull/12587) [@lyhper](https://github.com/lyhper)
- 🐞 修复 Progress[type="circle"] 中文本溢出的问题。[#12718](https://github.com/ant-design/ant-design/issues/12718)
- TypeScript
- 🐞 修复 TreeSelect 组件缺少 `treeExpandedKeys``onTreeExpand` 的定义的问题。[#12648](https://github.com/ant-design/ant-design/pull/12648) [@decadef20](https://github.com/decadef20)
- 🐞 修复 TabPaneProps 组件缺少 `key` 属性定义的问题。[682af0d](https://github.com/ant-design/ant-design/commit/682af0d44bf38a7d3e487aa909c46409db163030) [@ztplz](https://github.com/ztplz)
- 🐞 修复 Icon 组件的部分定义问题。[3dbc357](https://github.com/ant-design/ant-design/commit/3dbc357ff2837debbb9b36a25b14be4757297cad)
## 3.10.1
`2018-10-12`
- 🎉 [Ant Design Mobile of Angular](http://ng.mobile.ant.design/)NG-ZORRO-Mobile发布
- 📝 更新 [项目实战](https://ant.design/docs/react/practical-projects-cn) 文档为最新的 umi 技术栈。
- Table
- 🐞 修复未指定排序的列头点击时也会触发排序的问题。[#12515](https://github.com/ant-design/ant-design/issues/12515)
- 🐞 修复列头多余的排序 title 提示。[#12613](https://github.com/ant-design/ant-design/issues/12613)
- 🐞 修复排序和右对齐的列样式错位的问题。[#12552](https://github.com/ant-design/ant-design/issues/12552)
- 🐞 修复一个 columns 定义在 render 内时排序失效的问题。[#12571](https://github.com/ant-design/ant-design/issues/12571)
- 🐞 修复小号表格下排序列的列头背景色。
- 🐞 修复 Table 的选择器在 chrome 下选中样式的重影问题。[5bef1aa](https://github.com/ant-design/ant-design/commit/5bef1aa6c2e792180ef8d53a1f1489376b8e35db)
- 🐞 修复 Form.Item 内的 Table 分页样式。[#12554](https://github.com/ant-design/ant-design/issues/12554)
- DatePicker
- 🐞 调整意大利国际化文案。[#12413](https://github.com/ant-design/ant-design/issues/12413) [@yp](https://github.com/yp)
- 🐞 修复选择完成后选择框没有获取焦点的问题。[#12475](https://github.com/ant-design/ant-design/issues/12475)
- 🐞 修复在 Input.Group 内使用时日期图标消失的问题。[#12536](https://github.com/ant-design/ant-design/issues/12536)
- 🐞 修复 Anchor 中文字边缘被切割的问题。[#12520](https://github.com/ant-design/ant-design/issues/12520)
- 🐞 修复 Drawer 设置无遮罩时依然挡住了页面元素的问题。[#12401](https://github.com/ant-design/ant-design/issues/12401)
- 🐞 修复 AutoComplete 下使用自定义 Input.TextArea 下失效样式丢失的问题。[#12594](https://github.com/ant-design/ant-design/issues/12594)
- 🐞 修复 Modal.confirm 的 `prefixCls` 属性没有透传给 mask 的问题,并调整了默认的 prefixCls 的值为 `ant-model-confirm`。[#12546](https://github.com/ant-design/ant-design/issues/12546)
- 🐞 修复 Input.Group 在 safari 下的一个对齐问题。[#12493](https://github.com/ant-design/ant-design/issues/12493)
- 🐞 修复独自使用 `<Badge />` 时的垂直对齐。[#12419](https://github.com/ant-design/ant-design/issues/12419)
- 🐞 修复 Tree.DirectoryTree 点击切换图标和点击文本时 `onExpand` 参数不一致的问题。[#12567](https://github.com/ant-design/ant-design/issues/12567)
- 🐞 修复在 IE11 下错误聚焦到表单状态图标的问题。[#12524](https://github.com/ant-design/ant-design/pull/12524) [@siyu77](https://github.com/siyu77)
- 🐞 修复多选 Select 多次点击输入框时会反复触发 `onFocus``onBlur` 的问题。[#12281](https://github.com/ant-design/ant-design/issues/12281) [@Frezc ](https://github.com/Frezc)
- 🐞 修复环形 Progress 内文本超长溢出的问题。
- TypeScript
- 🐞 补充 Steps 的 `labelPlacement` 属性定义。[#12575](https://github.com/ant-design/ant-design/pull/12575) [@yueyes](https://github.com/yueyes)
- 🐞 补充 Select.Option 的 `style` 属性定义。[#12609](https://github.com/ant-design/ant-design/pull/12609) [@dimitropoulos](https://github.com/dimitropoulos)
- 🐞 修复 `form.validateFields` 的定义重载问题。[#12538](https://github.com/ant-design/ant-design/pull/12538) [@TomIsion](https://github.com/TomIsion)
- 🐞 补充 AutoComponent 的 `onFocus` `onBlur` 定义。[#12498](https://github.com/ant-design/ant-design/issues/12498)
## 3.10.0
`2018-09-30`
🎉 国庆节快乐
- 📝 更新了[图标](https://ant.design/docs/spec/icon-cn)和[动效](https://ant.design/docs/spec/motion-cn)两篇设计指引。
- 🌟 Upload 组件新增 `openFileDialogOnClick` 属性,用于设置点击组件时是否打开上传对话框。[#12347](https://github.com/ant-design/ant-design/pull/12347) [@hengkx](https://github.com/hengkx)
- 🌟 InputNumber 组件新增 `decimalSeparator` 属性,用于设置自定义的小数点。[#12329](https://github.com/ant-design/ant-design/pull/12329) [@amedora](https://github.com/amedora)
- 🌟 TreeSelect 组件新增 `treeExpandedKeys``onTreeExpand` 属性,用于控制树的展开收起。[#12145](https://github.com/ant-design/ant-design/issues/12145)
- Transfer
- 🌟 新增 `disabled` 属性。[#12066](https://github.com/ant-design/ant-design/issues/12066)
- Modal
- 🌟 新增 `autoFocusButton` 属性,用于指定 Modal 打开时自动获取焦点的按钮。[#11756](https://github.com/ant-design/ant-design/pull/11756) [@erwin-k](https://github.com/erwin-k)
- 🌟 `confirm` 方法的参数新增 `okButtonProps``cancelButtonProps`,用户设置对应按钮的属性。[#12425](https://github.com/ant-design/ant-design/pull/12425) [@Whoaa512](https://github.com/Whoaa512)
- Table
- 🌟 现在可以把 `column.title` 设置为一个方法了。[#11246](https://github.com/ant-design/ant-design/issues/11246)
- 🌟 `onChange` 属性新增第四个参数 `extra`,用于获取当前显示的筛选后的数据。[#12369](https://github.com/ant-design/ant-design/pull/12369)
- 🌟 优化了排序和筛选交互,现在整个列表头都可以点击排序了。[#12264](https://github.com/ant-design/ant-design/pull/12264)
- 🌟 Alert 新增 `icon` 属性,用户设置自定义图标。例子:[自定义图标](https://ant.design/components/alert-cn/#components-alert-demo-custom-icon)
- 🌟 以下组件均新增了 `suffixIcon` 属性,用于设置输入框后面的图标,具体用法可以参考文档。
- Cascader
- DatePicker
- Select
- TreeSelect
- TimePicker
- 🌟 新增 less 变量 [f237eff](https://github.com/ant-design/ant-design/commit/f237effc2a35eb249273f6f2826092a2f9b9db45)
- 🐞 修复 Icon.createFromIconfontCN 方法会自动给 `scriptUrl``https` 的问题。[#12316](https://github.com/ant-design/ant-design/issues/12316)
- 🐞 修复 Row 的 `gutter` 属性,在使用嵌套的 Col 时不生效的问题。[#12320](https://github.com/ant-design/ant-design/pull/12320)
- 🐞 修复 Tree.DirectoryTree 组件在设置的 `expandedKeys` 有初始值时不能正确展开节点的问题。[#12396](https://github.com/ant-design/ant-design/issues/12396)
- 🐞 修复 Transfer 组件使用 `render` 属性返回 ReactNode 时,列表项的 `title` 属性显示错误的问题。[#12399](https://github.com/ant-design/ant-design/issues/12399)
- 🐞 修复 Tooltip 在 CheckboxGroup 上不工作的问题。[#12427](https://github.com/ant-design/ant-design/issues/12427)
- 🐞 修复 Button 组件 loading 状态下在 IE9 里依然可以被点击的问题。[#12466](https://github.com/ant-design/ant-design/pull/12466) [@snail](https://github.com/120216220)
- 🐞 修复 Input.Group 中使用非 Input 组件时,鼠标 hover 时会产生抖动的问题。[#12407](https://github.com/ant-design/ant-design/pull/12407) [@hengkx](https://github.com/hengkx)
- 🐞 修复 TypeScript 类型定义 [#12374](https://github.com/ant-design/ant-design/pull/12374) [#12370](https://github.com/ant-design/ant-design/pull/12370) [#12354](https://github.com/ant-design/ant-design/pull/12354/files) [#12473](https://github.com/ant-design/ant-design/pull/12473)
## 3.9.3
`2018-09-22`
@@ -329,7 +30,7 @@ timeline: true
- 🐞 修复 `Menu``horizontal` 模式下时出现额外的滚动条。[#12152](https://github.com/ant-design/ant-design/issues/12152)
- 🐞 修复 `Menu` 组件 `openKeys` 有更高的优先级。[#12361](https://github.com/ant-design/ant-design/pull/12361) [@tangjinzhou](https://github.com/tangjinzhou)
- `Upload` 组件相关
- 🐞 修复 `Upload` 上传文件列表中的 `linkProps` ,支持 JSON 格式链接且可传入 `rel``target` `title` 等属性。[efb23](https://github.com/ant-design/ant-design/commit/efb23c1525858114460bfe3bd5fcb18c9f236bdc)
- 🐞 修复 `Upload` 上传文件列表中的 `linkProps` ,支持 JSON 格式链接且可传入 `rel``target` `title` 等属性。[efb23(https://github.com/ant-design/ant-design/commit/efb23c1525858114460bfe3bd5fcb18c9f236bdc)
- 🐞 修复 `Upload` 组件多文件类型同时上传时key 重复引用冲突的报错问题。[273fd](https://github.com/ant-design/ant-design/commit/273fd2ea1bca395d61509cc98c3ebbf1c620bf43)[#10953](https://github.com/ant-design/ant-design/issues/10953)
- 图标相关内容
- 🐞 修复 `Upload` 组件关闭图标样式。[#12330](https://github.com/ant-design/ant-design/pull/12330) [#12304](https://github.com/ant-design/ant-design/issues/12304)
@@ -364,7 +65,7 @@ timeline: true
`2018-09-03`
- 🐞 修复 `Icon` 组件在被 `Tooltip` 组件包裹时,无法显示 `Tooltip` 内容的问题。[#12005](https://github.com/ant-design/ant-design/issues/12005)
- 🐞 修复 `InputNumber` 组件的向上图标显示不正常的问题。[#12035](https://github.com/ant-design/ant-design/issues/12035)
- 🐞 修复 `InputNumber` 组件的向上图标显示不正常的问题。[#12035](https://github.com/ant-design/ant-design/issues/12035)
- 🐞 修复 `Modal` 组件的错误确认框不显示图标的问题。[#12026](https://github.com/ant-design/ant-design/issues/12026)
- 🐞 修复 `Popconfirm` 组件中的图标显示位置不正确的问题。[#12026](https://github.com/ant-design/ant-design/issues/12026)
- 🐞 修复 `Card` 组件中的 `Actions` 图标显示位置不正确的问题。[#12016](https://github.com/ant-design/ant-design/pull/12016)
@@ -397,7 +98,7 @@ timeline: true
### 组件修复/功能增强:
- 🌟 新增 Modal.open 方法,用于可自定义图标的快捷对话框。[#11982](https://github.com/ant-design/ant-design/pull/11982) [@hsiehjack](https://github.com/hsiehjack)
- 🌟 新增 Model.open 方法,用于可自定义图标的快捷对话框。[#11982](https://github.com/ant-design/ant-design/pull/11982) [@hsiehjack](https://github.com/hsiehjack)
- 🌟 Modal.info 增加 `getContainer` 的配置。[#11377](https://github.com/ant-design/ant-design/issues/11377)
- 🌟 合并优化了 RangePicker 的日历页脚 UI。
- 🌟 Anchor 组件增加 `onClick` 属性。[#11898](https://github.com/ant-design/ant-design/pull/11898)
@@ -506,7 +207,7 @@ timeline: true
- Modal
- 🌟 新增 `centered` 属性用于设置对话框垂直居中。[#11537](https://github.com/ant-design/ant-design/pull/11537) [@yoyo837](https://github.com/yoyo837)
- 🐞 修复了多个对话框会被 ESC 一次性全部关掉的问题。[#11394](https://github.com/ant-design/ant-design/issues/11394) [@yoyo837](https://github.com/yoyo837)
- 🐞 再次修复 Modal.confirm 的标题区域某些情况下会显示滚动条的问题。[#11568](https://github.com/ant-design/ant-design/pull/11568) [@cheshireoctopus](https://github.com/cheshireoctopus)
- 🐞 再次修复 Model.confirm 的标题区域某些情况下会显示滚动条的问题。[#11568](https://github.com/ant-design/ant-design/pull/11568) [@cheshireoctopus](https://github.com/cheshireoctopus)
- 🌟 Progress 新增 `strokeLinecap` 属性用于调整边缘形状。[#11547](https://github.com/ant-design/ant-design/pull/11547) [@blatinier](https://github.com/blatinier)
- 🌟 Drawer 新增 `className` 并废弃 `wrapClassName`。[#11609](https://github.com/ant-design/ant-design/pull/11609) [@fergiar](https://github.com/fergiar)
@@ -536,7 +237,7 @@ timeline: true
- 🐞 修复 InputNumber 的箭头按钮在使用了固定列的 Table 里显示错位的问题。[#11408](https://github.com/ant-design/ant-design/issues/11408)
- 🐞 修复 Select 使用分组时 Option 的圆角显示错误。[6cb6f5c](https://github.com/ant-design/ant-design/commit/6cb6f5c83ed634e67d5b5d0816d11aa0788a74d8)
- 🐞 修复 Table 第一次点击过滤按钮的时候 `onChange` 会被触发两次的问题。[#11164](https://github.com/ant-design/ant-design/issues/11164) [@adybionka](https://github.com/adybionka)
- 🐞 修复 Modal.confirm 的标题在 Firefox 下会显示滚动条的问题。[#11432](https://github.com/ant-design/ant-design/issues/11432)
- 🐞 修复 Model.confirm 的标题在 Firefox 下会显示滚动条的问题。[#11432](https://github.com/ant-design/ant-design/issues/11432)
- TypeScript
- 🐞 修复 Radio.Group 类型定义。[#11409](https://github.com/ant-design/ant-design/pull/11409) [@eddiemoore](https://github.com/eddiemoore)
- 🐞 修复 TreeSelect 类型定义。[#11442](https://github.com/ant-design/ant-design/pull/11442) [@JribiBelhassen](https://github.com/JribiBelhassen)
@@ -577,7 +278,7 @@ timeline: true
- 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)
- 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)
@@ -631,7 +332,8 @@ timeline: true
`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)
- 🐞 修复 `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)
@@ -693,7 +395,7 @@ timeline: true
- 🐞 使 `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)
- 🌟 `Search` 在未定义 `enterButton` 时,点击搜索图标将触发 `onSearch` [36ffe7e1](https://github.com/ant-design/ant-design/commit/36ffe7e1dc9d9473c8c68168ab79b7a03a604702)
## 3.5.3
@@ -924,7 +626,7 @@ timeline: true
- 🌟 添加 `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)
- 🐞 修复 `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)
@@ -1153,15 +855,12 @@ timeline: true
- 新的 [Divider](https://ant.design/components/divider-cn/) 组件。
- 新增 30 个[图标](https://ant.design/components/icon-cn/)。
### ⚠️ 升级必读
- 如果你从 2.x 升级到 3.x建议直接升级到 3.x 的最新版本。
- 3.x 后续的版本可能已经废弃了一些下面没有提到的改动,请参考控制台的警告提示相应升级。
- 建议同时升级 React 到 16 或更新版本,以获得更好的性能和更完善的支持,升级方式见 [官方发布文档](https://reactjs.org/blog/2017/09/26/react-v16.0.html#upgrading)。
- 最后请参照下面的不兼容改动进行升级。
### 不兼容改动
> 如果你从 2.x 升级到 3.x建议直接升级到 3.x 的最新版本。
> 3.x 后续的版本可能已经废弃了一些下面没有提到的改动,请参考控制台的警告提示相应升级。
此版本有部分不兼容的改动,升级时确保修改相应的使用代码。另外由于人肉查找代码中的废弃用法过于低效,所以我们提供了 [antd-migration-helper](https://github.com/ant-design/antd-migration-helper) 用于扫描代码中的废弃用法。
- Card 的 `noHovering` 属性重命名为 `hoverable`,且默认值改为 `true`

View File

@@ -40,7 +40,7 @@ Project maintainers who do not follow or enforce the Code of Conduct in good fai
## Attribution
This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version].
This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version]
[homepage]: http://contributor-covenant.org
[version]: http://contributor-covenant.org/version/1/4/

View File

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

View File

@@ -10,18 +10,17 @@
一套企业级的 UI 设计语言和 React 实现。
[![CircleCI branch](https://img.shields.io/circleci/project/github/ant-design/ant-design/master.svg?style=flat-square)](https://circleci.com/gh/ant-design/ant-design)
[![](https://img.shields.io/travis/ant-design/ant-design/master.svg?style=flat-square)](https://travis-ci.org/ant-design/ant-design)
[![CircleCI](https://circleci.com/gh/ant-design/ant-design/tree/master.svg?style=shield)](https://circleci.com/gh/ant-design/ant-design/tree/master)
[![Codecov](https://img.shields.io/codecov/c/github/ant-design/ant-design/master.svg?style=flat-square)](https://codecov.io/gh/ant-design/ant-design/branch/master)
[![Total alerts](https://img.shields.io/lgtm/alerts/g/ant-design/ant-design.svg?logo=lgtm&logoWidth=18&style=flat-square)](https://lgtm.com/projects/g/ant-design/ant-design/alerts/)
[![Language grade: JavaScript](https://img.shields.io/lgtm/grade/javascript/g/ant-design/ant-design.svg?logo=lgtm&logoWidth=18&style=flat-square)](https://lgtm.com/projects/g/ant-design/ant-design/context:javascript)
[![Dependencies](https://img.shields.io/david/ant-design/ant-design.svg?style=flat-square)](https://david-dm.org/ant-design/ant-design)
[![DevDependencies](https://img.shields.io/david/dev/ant-design/ant-design.svg?style=flat-square)](https://david-dm.org/ant-design/ant-design?type=dev)
[![Dependencies](https://img.shields.io/david/ant-design/ant-design.svg)](https://david-dm.org/ant-design/ant-design)
[![DevDependencies](https://img.shields.io/david/dev/ant-design/ant-design.svg)](https://david-dm.org/ant-design/ant-design?type=dev)
[![npm package](https://img.shields.io/npm/v/antd.svg?style=flat-square)](https://www.npmjs.org/package/antd)
[![NPM downloads](http://img.shields.io/npm/dm/antd.svg?style=flat-square)](http://npmjs.com/antd)
[![Percentage of issues still open](http://isitmaintained.com/badge/open/ant-design/ant-design.svg)](http://isitmaintained.com/project/ant-design/ant-design "Percentage of issues still open")
[![Gitter](https://img.shields.io/gitter/room/ant-design/ant-design-english.svg?style=flat-square&logoWidth=20&logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjEyMzUiIGhlaWdodD0iNjUwIiB2aWV3Qm94PSIwIDAgNzQxMCAzOTAwIj4NCjxyZWN0IHdpZHRoPSI3NDEwIiBoZWlnaHQ9IjM5MDAiIGZpbGw9IiNiMjIyMzQiLz4NCjxwYXRoIGQ9Ik0wLDQ1MEg3NDEwbTAsNjAwSDBtMCw2MDBINzQxMG0wLDYwMEgwbTAsNjAwSDc0MTBtMCw2MDBIMCIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjMwMCIvPg0KPHJlY3Qgd2lkdGg9IjI5NjQiIGhlaWdodD0iMjEwMCIgZmlsbD0iIzNjM2I2ZSIvPg0KPGcgZmlsbD0iI2ZmZiI%2BDQo8ZyBpZD0iczE4Ij4NCjxnIGlkPSJzOSI%2BDQo8ZyBpZD0iczUiPg0KPGcgaWQ9InM0Ij4NCjxwYXRoIGlkPSJzIiBkPSJNMjQ3LDkwIDMxNy41MzQyMzAsMzA3LjA4MjAzOSAxMzIuODczMjE4LDE3Mi45MTc5NjFIMzYxLjEyNjc4MkwxNzYuNDY1NzcwLDMwNy4wODIwMzl6Ii8%2BDQo8dXNlIHhsaW5rOmhyZWY9IiNzIiB5PSI0MjAiLz4NCjx1c2UgeGxpbms6aHJlZj0iI3MiIHk9Ijg0MCIvPg0KPHVzZSB4bGluazpocmVmPSIjcyIgeT0iMTI2MCIvPg0KPC9nPg0KPHVzZSB4bGluazpocmVmPSIjcyIgeT0iMTY4MCIvPg0KPC9nPg0KPHVzZSB4bGluazpocmVmPSIjczQiIHg9IjI0NyIgeT0iMjEwIi8%2BDQo8L2c%2BDQo8dXNlIHhsaW5rOmhyZWY9IiNzOSIgeD0iNDk0Ii8%2BDQo8L2c%2BDQo8dXNlIHhsaW5rOmhyZWY9IiNzMTgiIHg9Ijk4OCIvPg0KPHVzZSB4bGluazpocmVmPSIjczkiIHg9IjE5NzYiLz4NCjx1c2UgeGxpbms6aHJlZj0iI3M1IiB4PSIyNDcwIi8%2BDQo8L2c%2BDQo8L3N2Zz4%3D)](https://gitter.im/ant-design/ant-design-english?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
[![Join the chat at https://gitter.im/ant-design/ant-design](https://img.shields.io/gitter/room/ant-design/ant-design.svg?style=flat-square&logoWidth=20&logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjkwMCIgaGVpZ2h0PSI2MDAiIHZpZXdCb3g9IjAgMCAzMCAyMCI%2BDQo8ZGVmcz4NCjxwYXRoIGlkPSJzIiBkPSJNMCwtMSAwLjU4Nzc4NSwwLjgwOTAxNyAtMC45NTEwNTcsLTAuMzA5MDE3SDAuOTUxMDU3TC0wLjU4Nzc4NSwwLjgwOTAxN3oiIGZpbGw9IiNmZmRlMDAiLz4NCjwvZGVmcz4NCjxyZWN0IHdpZHRoPSIzMCIgaGVpZ2h0PSIyMCIgZmlsbD0iI2RlMjkxMCIvPg0KPHVzZSB4bGluazpocmVmPSIjcyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNSw1KSBzY2FsZSgzKSIvPg0KPHVzZSB4bGluazpocmVmPSIjcyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAsMikgcm90YXRlKDIzLjAzNjI0MykiLz4NCjx1c2UgeGxpbms6aHJlZj0iI3MiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEyLDQpIHJvdGF0ZSg0NS44Njk4OTgpIi8%2BDQo8dXNlIHhsaW5rOmhyZWY9IiNzIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMiw3KSByb3RhdGUoNjkuOTQ1Mzk2KSIvPg0KPHVzZSB4bGluazpocmVmPSIjcyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAsOSkgcm90YXRlKDIwLjY1OTgwOCkiLz4NCjwvc3ZnPg%3D%3D)](https://gitter.im/ant-design/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
[![Gitter](https://badges.gitter.im/ant-design/ant-design-english.svg)](https://gitter.im/ant-design/ant-design-english?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) (English)
[![Join the chat at https://gitter.im/ant-design/ant-design](https://img.shields.io/gitter/room/ant-design/ant-design.svg?style=flat-square)](https://gitter.im/ant-design/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)(中文)
</div>
@@ -65,7 +64,7 @@ ReactDOM.render(<DatePicker />, mountNode);
import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
```
你也可以 [按需加载组件](https://ant.design/docs/react/getting-started-cn#按需加载)。
你也可以[按需加载组件](https://ant.design/docs/react/getting-started-cn#按需加载)。
### TypeScript
@@ -81,11 +80,10 @@ import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
- [组件库](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://landing.ant.design)
- [动效](https://motion.ant.design)
- [脚手架市场](http://scaffold.ant.design)
- [设计规范速查手册](https://github.com/ant-design/ant-design/wiki/Ant-Design-%E8%AE%BE%E8%AE%A1%E5%9F%BA%E7%A1%80%E7%AE%80%E7%89%88)
- [开发者说明](https://github.com/ant-design/ant-design/wiki/Development)
- [版本发布规则](https://github.com/ant-design/ant-design/wiki/%E8%BD%AE%E5%80%BC%E8%A7%84%E5%88%99%E5%92%8C%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B)
@@ -111,8 +109,6 @@ $ npm start
> 强烈推荐阅读 [《提问的智慧》](https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way)、[《如何向开源社区提问题》](https://github.com/seajs/seajs/issues/545) 和 [《如何有效地报告 Bug》](http://www.chiark.greenend.org.uk/%7Esgtatham/bugs-cn.html)、[《如何向开源项目提交无法解答的问题》](https://zhuanlan.zhihu.com/p/25795393),更好的问题更容易获得帮助。
[![Let's fund issues in this repository](https://issuehunt.io/static/embed/issuehunt-button-v1.svg)](https://issuehunt.io/repos/34526884)
## 社区互助
如果您在使用的过程中碰到问题,可以通过下面几个途径寻求帮助,同时我们也鼓励资深用户通过下面的途径给新人提供帮助。

View File

@@ -10,18 +10,17 @@
An enterprise-class UI design language and React-based implementation.
[![CircleCI branch](https://img.shields.io/circleci/project/github/ant-design/ant-design/master.svg?style=flat-square)](https://circleci.com/gh/ant-design/ant-design)
[![](https://img.shields.io/travis/ant-design/ant-design/master.svg?style=flat-square)](https://travis-ci.org/ant-design/ant-design)
[![CircleCI](https://circleci.com/gh/ant-design/ant-design/tree/master.svg?style=shield)](https://circleci.com/gh/ant-design/ant-design/tree/master)
[![Codecov](https://img.shields.io/codecov/c/github/ant-design/ant-design/master.svg?style=flat-square)](https://codecov.io/gh/ant-design/ant-design/branch/master)
[![Total alerts](https://img.shields.io/lgtm/alerts/g/ant-design/ant-design.svg?logo=lgtm&logoWidth=18&style=flat-square)](https://lgtm.com/projects/g/ant-design/ant-design/alerts/)
[![Language grade: JavaScript](https://img.shields.io/lgtm/grade/javascript/g/ant-design/ant-design.svg?logo=lgtm&logoWidth=18&style=flat-square)](https://lgtm.com/projects/g/ant-design/ant-design/context:javascript)
[![Dependencies](https://img.shields.io/david/ant-design/ant-design.svg?style=flat-square)](https://david-dm.org/ant-design/ant-design)
[![DevDependencies](https://img.shields.io/david/dev/ant-design/ant-design.svg?style=flat-square)](https://david-dm.org/ant-design/ant-design?type=dev)
[![Dependencies](https://img.shields.io/david/ant-design/ant-design.svg)](https://david-dm.org/ant-design/ant-design)
[![DevDependencies](https://img.shields.io/david/dev/ant-design/ant-design.svg)](https://david-dm.org/ant-design/ant-design?type=dev)
[![npm package](https://img.shields.io/npm/v/antd.svg?style=flat-square)](https://www.npmjs.org/package/antd)
[![NPM downloads](http://img.shields.io/npm/dm/antd.svg?style=flat-square)](http://npmjs.com/antd)
[![Percentage of issues still open](http://isitmaintained.com/badge/open/ant-design/ant-design.svg)](http://isitmaintained.com/project/ant-design/ant-design "Percentage of issues still open")
[![Gitter](https://img.shields.io/gitter/room/ant-design/ant-design-english.svg?style=flat-square&logoWidth=20&logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjEyMzUiIGhlaWdodD0iNjUwIiB2aWV3Qm94PSIwIDAgNzQxMCAzOTAwIj4NCjxyZWN0IHdpZHRoPSI3NDEwIiBoZWlnaHQ9IjM5MDAiIGZpbGw9IiNiMjIyMzQiLz4NCjxwYXRoIGQ9Ik0wLDQ1MEg3NDEwbTAsNjAwSDBtMCw2MDBINzQxMG0wLDYwMEgwbTAsNjAwSDc0MTBtMCw2MDBIMCIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjMwMCIvPg0KPHJlY3Qgd2lkdGg9IjI5NjQiIGhlaWdodD0iMjEwMCIgZmlsbD0iIzNjM2I2ZSIvPg0KPGcgZmlsbD0iI2ZmZiI%2BDQo8ZyBpZD0iczE4Ij4NCjxnIGlkPSJzOSI%2BDQo8ZyBpZD0iczUiPg0KPGcgaWQ9InM0Ij4NCjxwYXRoIGlkPSJzIiBkPSJNMjQ3LDkwIDMxNy41MzQyMzAsMzA3LjA4MjAzOSAxMzIuODczMjE4LDE3Mi45MTc5NjFIMzYxLjEyNjc4MkwxNzYuNDY1NzcwLDMwNy4wODIwMzl6Ii8%2BDQo8dXNlIHhsaW5rOmhyZWY9IiNzIiB5PSI0MjAiLz4NCjx1c2UgeGxpbms6aHJlZj0iI3MiIHk9Ijg0MCIvPg0KPHVzZSB4bGluazpocmVmPSIjcyIgeT0iMTI2MCIvPg0KPC9nPg0KPHVzZSB4bGluazpocmVmPSIjcyIgeT0iMTY4MCIvPg0KPC9nPg0KPHVzZSB4bGluazpocmVmPSIjczQiIHg9IjI0NyIgeT0iMjEwIi8%2BDQo8L2c%2BDQo8dXNlIHhsaW5rOmhyZWY9IiNzOSIgeD0iNDk0Ii8%2BDQo8L2c%2BDQo8dXNlIHhsaW5rOmhyZWY9IiNzMTgiIHg9Ijk4OCIvPg0KPHVzZSB4bGluazpocmVmPSIjczkiIHg9IjE5NzYiLz4NCjx1c2UgeGxpbms6aHJlZj0iI3M1IiB4PSIyNDcwIi8%2BDQo8L2c%2BDQo8L3N2Zz4%3D)](https://gitter.im/ant-design/ant-design-english?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
[![Join the chat at https://gitter.im/ant-design/ant-design](https://img.shields.io/gitter/room/ant-design/ant-design.svg?style=flat-square&logoWidth=20&logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjkwMCIgaGVpZ2h0PSI2MDAiIHZpZXdCb3g9IjAgMCAzMCAyMCI%2BDQo8ZGVmcz4NCjxwYXRoIGlkPSJzIiBkPSJNMCwtMSAwLjU4Nzc4NSwwLjgwOTAxNyAtMC45NTEwNTcsLTAuMzA5MDE3SDAuOTUxMDU3TC0wLjU4Nzc4NSwwLjgwOTAxN3oiIGZpbGw9IiNmZmRlMDAiLz4NCjwvZGVmcz4NCjxyZWN0IHdpZHRoPSIzMCIgaGVpZ2h0PSIyMCIgZmlsbD0iI2RlMjkxMCIvPg0KPHVzZSB4bGluazpocmVmPSIjcyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNSw1KSBzY2FsZSgzKSIvPg0KPHVzZSB4bGluazpocmVmPSIjcyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAsMikgcm90YXRlKDIzLjAzNjI0MykiLz4NCjx1c2UgeGxpbms6aHJlZj0iI3MiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEyLDQpIHJvdGF0ZSg0NS44Njk4OTgpIi8%2BDQo8dXNlIHhsaW5rOmhyZWY9IiNzIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMiw3KSByb3RhdGUoNjkuOTQ1Mzk2KSIvPg0KPHVzZSB4bGluazpocmVmPSIjcyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAsOSkgcm90YXRlKDIwLjY1OTgwOCkiLz4NCjwvc3ZnPg%3D%3D)](https://gitter.im/ant-design/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
[![Gitter](https://badges.gitter.im/ant-design/ant-design-english.svg)](https://gitter.im/ant-design/ant-design-english?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) (English)
[![Join the chat at https://gitter.im/ant-design/ant-design](https://img.shields.io/gitter/room/ant-design/ant-design.svg?style=flat-square)](https://gitter.im/ant-design/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)(中文)
</div>
@@ -81,11 +80,10 @@ See [i18n](http://ant.design/docs/react/i18n).
- [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)
- [Landing Pages](https://landing.ant.design)
- [Motion](https://motion.ant.design)
- [Scaffold Market](http://scaffold.ant.design)
- [Developer Instruction](https://github.com/ant-design/ant-design/wiki/Development)
- [Versioning Release Note](https://github.com/ant-design/ant-design/wiki/%E8%BD%AE%E5%80%BC%E8%A7%84%E5%88%99%E5%92%8C%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B)
- [FAQ](https://ant.design/docs/react/faq)
@@ -109,5 +107,3 @@ Open your browser and visit http://127.0.0.1:8001 , see more at [Development](ht
Read our [contributing guide](https://ant.design/docs/react/contributing) and let's build a better antd together.
We welcome all contributions. Please read our [CONTRIBUTING.md](https://github.com/ant-design/ant-design/blob/master/.github/CONTRIBUTING.md) first. You can submit any ideas as [pull requests](https://github.com/ant-design/ant-design/pulls) or as [GitHub issues](https://github.com/ant-design/ant-design/issues). If you'd like to improve code, check out the [Development Instructions](https://github.com/ant-design/ant-design/wiki/Development) and have a good time! :)
[![Let's fund issues in this repository](https://issuehunt.io/static/embed/issuehunt-button-v1.svg)](https://issuehunt.io/repos/34526884)

View File

@@ -18,8 +18,6 @@ Array [
"Cascader",
"Checkbox",
"Col",
"Comment",
"ConfigProvider",
"DatePicker",
"Divider",
"Dropdown",

View File

@@ -14,7 +14,7 @@ describe('antd', () => {
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.',
'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,8 +1,5 @@
import raf from 'raf';
import delayRaf from '../raf';
import throttleByAnimationFrame from '../throttleByAnimationFrame';
import getDataOrAriaProps from '../getDataOrAriaProps';
import triggerEvent from '../triggerEvent';
describe('Test utils function', () => {
beforeAll(() => {
@@ -87,45 +84,4 @@ describe('Test utils function', () => {
expect(results).toEqual({ role: 'search' });
});
});
it('delayRaf', done => {
jest.useRealTimers();
let bamboo = false;
delayRaf(() => {
bamboo = true;
}, 3);
// Variable bamboo should be false in frame 2 but true in frame 4
raf(() => {
expect(bamboo).toBe(false);
// Frame 2
raf(() => {
expect(bamboo).toBe(false);
// Frame 3
raf(() => {
// Frame 4
raf(() => {
expect(bamboo).toBe(true);
done();
});
});
});
});
});
it('triggerEvent', () => {
const button = document.createElement('button');
button.addEventListener(
'click',
() => {
button.style.width = '100px';
},
true,
);
triggerEvent(button, 'click');
expect(button.style.width).toBe('100px');
});
});

View File

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

View File

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

View File

@@ -1,4 +1,4 @@
const isNumeric = <T extends number>(value: any): value is T => {
const isNumeric = (value: any): boolean => {
return !isNaN(parseFloat(value)) && isFinite(value);
};

View File

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

View File

@@ -21,7 +21,7 @@ export default function throttleByAnimationFrame(fn: (...args: any[]) => void) {
export function throttleByAnimationFrameDecorator() {
return function(target: any, key: string, descriptor: any) {
const fn = descriptor.value;
let fn = descriptor.value;
let definingProperty = false;
return {
configurable: true,
@@ -30,7 +30,7 @@ export function throttleByAnimationFrameDecorator() {
return fn;
}
const boundFn = throttleByAnimationFrame(fn.bind(this));
let boundFn = throttleByAnimationFrame(fn.bind(this));
definingProperty = true;
Object.defineProperty(this, key, {
value: boundFn,

View File

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

View File

@@ -1,28 +1,16 @@
import * as React from 'react';
import { findDOMNode } from 'react-dom';
import TransitionEvents from 'css-animation/lib/Event';
import raf from '../_util/raf';
let styleForPesudo: HTMLStyleElement | null;
// Where el is the DOM element you'd like to test for visibility
function isHidden(element: HTMLElement) {
if (process.env.NODE_ENV === 'test') {
return false;
}
return !element || element.offsetParent === null;
}
export default class Wave extends React.Component<{ insertExtraNode?: boolean }> {
export default class Wave extends React.Component<{insertExtraNode?: boolean}> {
private instance?: {
cancel: () => void;
};
private extraNode: HTMLDivElement;
private clickWaveTimeoutId: number;
private animationStartId: number;
private animationStart: boolean = false;
private destroy: boolean = false;
isNotGrey(color: string) {
const match = (color || '').match(/rgba?\((\d*), (\d*), (\d*)(, [\.\d]*)?\)/);
@@ -33,7 +21,7 @@ export default class Wave extends React.Component<{ insertExtraNode?: boolean }>
}
onClick = (node: HTMLElement, waveColor: string) => {
if (!node || isHidden(node) || node.className.indexOf('-leave') >= 0) {
if (node.className.indexOf('-leave') >= 0) {
return;
}
const { insertExtraNode } = this.props;
@@ -45,16 +33,15 @@ export default class Wave extends React.Component<{ insertExtraNode?: boolean }>
node.setAttribute(attributeName, 'true');
// Not white or transparnt or grey
styleForPesudo = styleForPesudo || document.createElement('style');
if (
waveColor &&
waveColor !== '#ffffff' &&
waveColor !== 'rgb(255, 255, 255)' &&
this.isNotGrey(waveColor) &&
!/rgba\(\d*, \d*, \d*, 0\)/.test(waveColor) && // any transparent rgba color
waveColor !== 'transparent'
) {
if (waveColor &&
waveColor !== '#ffffff' &&
waveColor !== 'rgb(255, 255, 255)' &&
this.isNotGrey(waveColor) &&
!/rgba\(\d*, \d*, \d*, 0\)/.test(waveColor) && // any transparent rgba color
waveColor !== 'transparent') {
extraNode.style.borderColor = waveColor;
styleForPesudo.innerHTML = `[ant-click-animating-without-extra-node]:after { border-color: ${waveColor}; }`;
styleForPesudo.innerHTML =
`[ant-click-animating-without-extra-node]:after { border-color: ${waveColor}; }`;
if (!document.body.contains(styleForPesudo)) {
document.body.appendChild(styleForPesudo);
}
@@ -62,22 +49,19 @@ export default class Wave extends React.Component<{ insertExtraNode?: boolean }>
if (insertExtraNode) {
node.appendChild(extraNode);
}
TransitionEvents.addStartEventListener(node, this.onTransitionStart);
TransitionEvents.addEndEventListener(node, this.onTransitionEnd);
};
}
bindAnimationEvent = (node: HTMLElement) => {
if (
!node ||
!node.getAttribute ||
node.getAttribute('disabled') ||
node.className.indexOf('disabled') >= 0
) {
if (!node ||
!node.getAttribute ||
node.getAttribute('disabled') ||
node.className.indexOf('disabled') >= 0) {
return;
}
const onClick = (e: MouseEvent) => {
// Fix radio button click twice
if ((e.target as HTMLElement).tagName === 'INPUT' || isHidden(e.target as HTMLElement)) {
if ((e.target as HTMLElement).tagName === 'INPUT') {
return;
}
this.resetEffect(node);
@@ -87,14 +71,6 @@ export default class Wave extends React.Component<{ insertExtraNode?: boolean }>
getComputedStyle(node).getPropertyValue('border-color') ||
getComputedStyle(node).getPropertyValue('background-color');
this.clickWaveTimeoutId = window.setTimeout(() => this.onClick(node, waveColor), 0);
raf.cancel(this.animationStartId);
this.animationStart = true;
// Render to trigger transition event cost 3 frames. Let's delay 10 frames to reset this.
this.animationStartId = raf(() => {
this.animationStart = false;
}, 10);
};
node.addEventListener('click', onClick, true);
return {
@@ -102,7 +78,7 @@ export default class Wave extends React.Component<{ insertExtraNode?: boolean }>
node.removeEventListener('click', onClick, true);
},
};
};
}
getAttributeName() {
const { insertExtraNode } = this.props;
@@ -110,7 +86,7 @@ export default class Wave extends React.Component<{ insertExtraNode?: boolean }>
}
resetEffect(node: HTMLElement) {
if (!node || node === this.extraNode || !(node instanceof Element)) {
if (!node || node === this.extraNode) {
return;
}
const { insertExtraNode } = this.props;
@@ -120,29 +96,15 @@ export default class Wave extends React.Component<{ insertExtraNode?: boolean }>
if (insertExtraNode && this.extraNode && node.contains(this.extraNode)) {
node.removeChild(this.extraNode);
}
TransitionEvents.removeStartEventListener(node, this.onTransitionStart);
TransitionEvents.removeEndEventListener(node, this.onTransitionEnd);
}
onTransitionStart = (e: AnimationEvent) => {
if (this.destroy) return;
const node = findDOMNode(this) as HTMLElement;
if (!e || e.target !== node) {
return;
}
if (!this.animationStart) {
this.resetEffect(node);
}
};
onTransitionEnd = (e: AnimationEvent) => {
if (!e || e.animationName !== 'fadeEffect') {
return;
}
this.resetEffect(e.target as HTMLElement);
};
}
removeExtraStyleNode() {
if (styleForPesudo) {
@@ -151,11 +113,7 @@ export default class Wave extends React.Component<{ insertExtraNode?: boolean }>
}
componentDidMount() {
const node = findDOMNode(this) as HTMLElement;
if (node.nodeType !== 1) {
return;
}
this.instance = this.bindAnimationEvent(node);
this.instance = this.bindAnimationEvent(findDOMNode(this) as HTMLElement);
}
componentWillUnmount() {
@@ -165,8 +123,6 @@ export default class Wave extends React.Component<{ insertExtraNode?: boolean }>
if (this.clickWaveTimeoutId) {
clearTimeout(this.clickWaveTimeoutId);
}
this.destroy = true;
}
render() {

View File

@@ -12,7 +12,9 @@ class AffixMounter extends React.Component {
});
}
getTarget = () => this.container;
getTarget = () => {
return this.container;
}
render() {
return (
@@ -21,9 +23,7 @@ class AffixMounter extends React.Component {
height: 100,
overflowY: 'scroll',
}}
ref={node => {
this.container = node;
}}
ref={(node) => { this.container = node; }}
>
<div
className="background"
@@ -34,12 +34,12 @@ class AffixMounter extends React.Component {
>
<Affix
target={() => this.container}
ref={ele => {
this.affix = ele;
}}
ref={ele => this.affix = ele}
{...this.props}
>
<Button type="primary">Fixed at the top of container</Button>
<Button type="primary">
Fixed at the top of container
</Button>
</Affix>
</div>
</div>
@@ -58,15 +58,12 @@ describe('Affix Render', () => {
jest.useRealTimers();
});
const scrollTo = top => {
wrapper.instance().affix.fixedNode.parentNode.getBoundingClientRect = jest.fn(() => ({
bottom: 100,
height: 28,
left: 0,
right: 0,
top: 50 - top,
width: 195,
}));
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',
@@ -93,9 +90,7 @@ describe('Affix Render', () => {
it('support offsetBottom', () => {
document.body.innerHTML = '<div id="mounter" />';
wrapper = mount(<AffixMounter offsetBottom={0} />, {
attachTo: document.getElementById('mounter'),
});
wrapper = mount(<AffixMounter offsetBottom={0} />, { attachTo: document.getElementById('mounter') });
jest.runAllTimers();
scrollTo(0);
@@ -111,9 +106,7 @@ describe('Affix Render', () => {
it('updatePosition when offsetTop changed', () => {
document.body.innerHTML = '<div id="mounter" />';
wrapper = mount(<AffixMounter offsetTop={0} />, {
attachTo: document.getElementById('mounter'),
});
wrapper = mount(<AffixMounter offsetTop={0} />, { attachTo: document.getElementById('mounter') });
jest.runAllTimers();
scrollTo(100);

View File

@@ -9,9 +9,9 @@ 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);
return target !== window ?
(target as HTMLElement).getBoundingClientRect() :
{ top: 0, left: 0, bottom: 0 } as ClientRect;
}
function getOffset(element: HTMLElement, target: HTMLElement | Window | null) {
@@ -26,8 +26,10 @@ function getOffset(element: HTMLElement, target: HTMLElement | Window | null) {
const clientLeft = docElem.clientLeft || 0;
return {
top: elemRect.top - targetRect.top + scrollTop - clientTop,
left: elemRect.left - targetRect.left + scrollLeft - clientLeft,
top: elemRect.top - targetRect.top +
scrollTop - clientTop,
left: elemRect.left - targetRect.left +
scrollLeft - clientLeft,
width: elemRect.width,
height: elemRect.height,
};
@@ -68,16 +70,11 @@ export default class Affix extends React.Component<AffixProps, AffixState> {
target: PropTypes.func,
};
state: AffixState = {
affixStyle: undefined,
placeholderStyle: undefined,
};
scrollEvent: any;
resizeEvent: any;
timeout: any;
private timeout: number;
private eventHandlers: Record<string, any> = {};
private fixedNode: HTMLElement;
private placeholderNode: HTMLElement;
private readonly events = [
events = [
'resize',
'scroll',
'touchstart',
@@ -87,7 +84,19 @@ export default class Affix extends React.Component<AffixProps, AffixState> {
'load',
];
setAffixStyle(e: Event, affixStyle: React.CSSProperties | null) {
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;
@@ -99,7 +108,8 @@ export default class Affix extends React.Component<AffixProps, AffixState> {
}
this.setState({ affixStyle: affixStyle as React.CSSProperties }, () => {
const affixed = !!this.state.affixStyle;
if ((affixStyle && !originalAffixStyle) || (!affixStyle && originalAffixStyle)) {
if ((affixStyle && !originalAffixStyle) ||
(!affixStyle && originalAffixStyle)) {
onChange(affixed);
}
});
@@ -113,7 +123,7 @@ export default class Affix extends React.Component<AffixProps, AffixState> {
this.setState({ placeholderStyle: placeholderStyle as React.CSSProperties });
}
syncPlaceholderStyle(e: Event) {
syncPlaceholderStyle(e: any) {
const { affixStyle } = this.state;
if (!affixStyle) {
return;
@@ -129,9 +139,8 @@ export default class Affix extends React.Component<AffixProps, AffixState> {
}
@throttleByAnimationFrameDecorator()
updatePosition(e: Event) {
const { offsetBottom, offset, target = getDefaultTarget } = this.props;
let { offsetTop } = this.props;
updatePosition(e: any) {
let { offsetTop, offsetBottom, offset, target = getDefaultTarget } = this.props;
const targetNode = target();
// Backwards support
@@ -178,10 +187,10 @@ export default class Affix extends React.Component<AffixProps, AffixState> {
});
} else if (
scrollTop < elemOffset.top + elemSize.height + (offsetBottom as number) - targetInnerHeight &&
offsetMode.bottom
offsetMode.bottom
) {
// Fixed Bottom
const targetBottomOffet = targetNode === window ? 0 : window.innerHeight - targetRect.bottom;
const targetBottomOffet = targetNode === window ? 0 : (window.innerHeight - targetRect.bottom);
const width = elemOffset.width;
this.setAffixStyle(e, {
position: 'fixed',
@@ -195,12 +204,7 @@ export default class Affix extends React.Component<AffixProps, AffixState> {
});
} else {
const { affixStyle } = this.state;
if (
e.type === 'resize' &&
affixStyle &&
affixStyle.position === 'fixed' &&
affixNode.offsetWidth
) {
if (e.type === 'resize' && affixStyle && affixStyle.position === 'fixed' && affixNode.offsetWidth) {
this.setAffixStyle(e, { ...affixStyle, width: affixNode.offsetWidth });
} else {
this.setAffixStyle(e, null);
@@ -218,8 +222,6 @@ export default class Affix extends React.Component<AffixProps, AffixState> {
// Wait for parent component ref has its value
this.timeout = setTimeout(() => {
this.setTargetEventListeners(target);
// Mock Event object.
this.updatePosition({} as Event);
});
}
@@ -229,13 +231,13 @@ export default class Affix extends React.Component<AffixProps, AffixState> {
this.setTargetEventListeners(nextProps.target!);
// Mock Event object.
this.updatePosition({} as Event);
this.updatePosition({});
}
if (
this.props.offsetTop !== nextProps.offsetTop ||
this.props.offsetBottom !== nextProps.offsetBottom
) {
this.updatePosition({} as Event);
this.updatePosition({});
}
}
@@ -268,24 +270,18 @@ export default class Affix extends React.Component<AffixProps, AffixState> {
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 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}>

View File

@@ -1,7 +1,7 @@
---
category: Components
subtitle: 固钉
type: 导航
type: Navigation
title: Affix
---

View File

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

View File

@@ -34,7 +34,7 @@ exports[`renders ./components/alert/demo/banner.md correctly 1`] = `
</div>
<br />
<div
class="ant-alert ant-alert-warning ant-alert-banner ant-alert-closable"
class="ant-alert ant-alert-warning ant-alert-banner"
data-show="true"
>
<i
@@ -151,7 +151,7 @@ exports[`renders ./components/alert/demo/basic.md correctly 1`] = `
exports[`renders ./components/alert/demo/closable.md correctly 1`] = `
<div>
<div
class="ant-alert ant-alert-warning ant-alert-no-icon ant-alert-closable"
class="ant-alert ant-alert-warning ant-alert-no-icon"
data-show="true"
>
<span
@@ -185,7 +185,7 @@ exports[`renders ./components/alert/demo/closable.md correctly 1`] = `
</a>
</div>
<div
class="ant-alert ant-alert-error ant-alert-with-description ant-alert-no-icon ant-alert-closable"
class="ant-alert ant-alert-error ant-alert-with-description ant-alert-no-icon"
data-show="true"
>
<span
@@ -225,7 +225,7 @@ exports[`renders ./components/alert/demo/closable.md correctly 1`] = `
exports[`renders ./components/alert/demo/close-text.md correctly 1`] = `
<div
class="ant-alert ant-alert-info ant-alert-no-icon ant-alert-closable"
class="ant-alert ant-alert-info ant-alert-no-icon"
data-show="true"
>
<span
@@ -244,272 +244,6 @@ exports[`renders ./components/alert/demo/close-text.md correctly 1`] = `
</div>
`;
exports[`renders ./components/alert/demo/custom-icon.md correctly 1`] = `
<div>
<div
class="ant-alert ant-alert-success ant-alert-no-icon"
data-show="true"
>
<span
class="ant-alert-message"
>
showIcon = false
</span>
<span
class="ant-alert-description"
/>
</div>
<div
class="ant-alert ant-alert-success"
data-show="true"
>
<i
class="anticon anticon-smile ant-alert-icon"
>
<svg
aria-hidden="true"
class=""
data-icon="smile"
fill="currentColor"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M288 421a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm352 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 0 1 248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 0 1 249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 0 1 775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 0 1 775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 0 0-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 0 0-8-8.4z"
/>
</svg>
</i>
<span
class="ant-alert-message"
>
Success Tips
</span>
<span
class="ant-alert-description"
/>
</div>
<div
class="ant-alert ant-alert-info"
data-show="true"
>
<i
class="anticon anticon-smile ant-alert-icon"
>
<svg
aria-hidden="true"
class=""
data-icon="smile"
fill="currentColor"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M288 421a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm352 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 0 1 248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 0 1 249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 0 1 775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 0 1 775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 0 0-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 0 0-8-8.4z"
/>
</svg>
</i>
<span
class="ant-alert-message"
>
Informational Notes
</span>
<span
class="ant-alert-description"
/>
</div>
<div
class="ant-alert ant-alert-warning"
data-show="true"
>
<i
class="anticon anticon-smile ant-alert-icon"
>
<svg
aria-hidden="true"
class=""
data-icon="smile"
fill="currentColor"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M288 421a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm352 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 0 1 248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 0 1 249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 0 1 775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 0 1 775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 0 0-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 0 0-8-8.4z"
/>
</svg>
</i>
<span
class="ant-alert-message"
>
Warning
</span>
<span
class="ant-alert-description"
/>
</div>
<div
class="ant-alert ant-alert-error"
data-show="true"
>
<i
class="anticon anticon-smile ant-alert-icon"
>
<svg
aria-hidden="true"
class=""
data-icon="smile"
fill="currentColor"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M288 421a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm352 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 0 1 248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 0 1 249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 0 1 775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 0 1 775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 0 0-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 0 0-8-8.4z"
/>
</svg>
</i>
<span
class="ant-alert-message"
>
Error
</span>
<span
class="ant-alert-description"
/>
</div>
<div
class="ant-alert ant-alert-success ant-alert-with-description"
data-show="true"
>
<i
class="anticon anticon-smile ant-alert-icon"
>
<svg
aria-hidden="true"
class=""
data-icon="smile"
fill="currentColor"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M288 421a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm352 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 0 1 248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 0 1 249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 0 1 775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 0 1 775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 0 0-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 0 0-8-8.4z"
/>
</svg>
</i>
<span
class="ant-alert-message"
>
Success Tips
</span>
<span
class="ant-alert-description"
>
Detailed description and advices about successful copywriting.
</span>
</div>
<div
class="ant-alert ant-alert-info ant-alert-with-description"
data-show="true"
>
<i
class="anticon anticon-smile ant-alert-icon"
>
<svg
aria-hidden="true"
class=""
data-icon="smile"
fill="currentColor"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M288 421a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm352 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 0 1 248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 0 1 249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 0 1 775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 0 1 775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 0 0-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 0 0-8-8.4z"
/>
</svg>
</i>
<span
class="ant-alert-message"
>
Informational Notes
</span>
<span
class="ant-alert-description"
>
Additional description and informations about copywriting.
</span>
</div>
<div
class="ant-alert ant-alert-warning ant-alert-with-description"
data-show="true"
>
<i
class="anticon anticon-smile ant-alert-icon"
>
<svg
aria-hidden="true"
class=""
data-icon="smile"
fill="currentColor"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M288 421a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm352 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 0 1 248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 0 1 249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 0 1 775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 0 1 775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 0 0-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 0 0-8-8.4z"
/>
</svg>
</i>
<span
class="ant-alert-message"
>
Warning
</span>
<span
class="ant-alert-description"
>
This is a warning notice about copywriting.
</span>
</div>
<div
class="ant-alert ant-alert-error ant-alert-with-description"
data-show="true"
>
<i
class="anticon anticon-smile ant-alert-icon"
>
<svg
aria-hidden="true"
class=""
data-icon="smile"
fill="currentColor"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M288 421a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm352 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 0 1 248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 0 1 249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 0 1 775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 0 1 775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 0 0-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 0 0-8-8.4z"
/>
</svg>
</i>
<span
class="ant-alert-message"
>
Error
</span>
<span
class="ant-alert-description"
>
This is an error message about copywriting.
</span>
</div>
</div>
`;
exports[`renders ./components/alert/demo/description.md correctly 1`] = `
<div>
<div
@@ -752,7 +486,7 @@ exports[`renders ./components/alert/demo/icon.md correctly 1`] = `
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
/>
<path
d="M464 336a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"
d="M464 336a48 48 0 1 0 96 0 48 48 0 1 0-96 0zM536 448h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"
/>
</svg>
</i>
@@ -787,7 +521,7 @@ exports[`renders ./components/alert/demo/icon.md correctly 1`] = `
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
/>
<path
d="M464 688a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm24-112h48c4.4 0 8-3.6 8-8V296c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8z"
d="M464 688a48 48 0 1 0 96 0 48 48 0 1 0-96 0zM488 576h48c4.4 0 8-3.6 8-8V296c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8z"
/>
</svg>
</i>
@@ -843,7 +577,7 @@ exports[`renders ./components/alert/demo/icon.md correctly 1`] = `
exports[`renders ./components/alert/demo/smooth-closed.md correctly 1`] = `
<div>
<div
class="ant-alert ant-alert-success ant-alert-no-icon ant-alert-closable"
class="ant-alert ant-alert-success ant-alert-no-icon"
data-show="true"
>
<span

View File

@@ -21,7 +21,7 @@ describe('Alert', () => {
closable
onClose={onClose}
afterClose={afterClose}
/>,
/>
);
wrapper.find('.ant-alert-close-icon').simulate('click');
expect(onClose).toBeCalled();
@@ -31,20 +31,26 @@ describe('Alert', () => {
describe('data and aria props', () => {
it('sets data attributes on input', () => {
const wrapper = mount(<Alert data-test="test-id" data-id="12345" />);
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 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 wrapper = mount(
<Alert role="status" />
);
const input = wrapper.find('.ant-alert').getDOMNode();
expect(input.getAttribute('role')).toBe('status');
});

View File

@@ -27,6 +27,5 @@ ReactDOM.render(
<br />
<Alert type="error" message="Error text" banner />
</div>,
mountNode
);
mountNode);
````

View File

@@ -18,8 +18,7 @@ import { Alert } from 'antd';
ReactDOM.render(
<Alert message="Success Text" type="success" />,
mountNode
);
mountNode);
````
<style>

View File

@@ -16,7 +16,7 @@ To show close button.
````jsx
import { Alert } from 'antd';
const onClose = (e) => {
const onClose = function (e) {
console.log(e, 'I was closed.');
};
@@ -36,6 +36,5 @@ ReactDOM.render(
onClose={onClose}
/>
</div>,
mountNode
);
mountNode);
````

View File

@@ -18,6 +18,5 @@ import { Alert } from 'antd';
ReactDOM.render(
<Alert message="Info Text" type="info" closeText="Close Now" />,
mountNode
);
mountNode);
````

View File

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

View File

@@ -39,6 +39,5 @@ ReactDOM.render(
type="error"
/>
</div>,
mountNode
);
mountNode);
````

View File

@@ -47,6 +47,5 @@ ReactDOM.render(
showIcon
/>
</div>,
mountNode
);
mountNode);
````

View File

@@ -46,6 +46,5 @@ class App extends React.Component {
ReactDOM.render(
<App />,
mountNode
);
mountNode);
````

View File

@@ -23,6 +23,5 @@ ReactDOM.render(
<Alert message="Warning Text" type="warning" />
<Alert message="Error Text" type="error" />
</div>,
mountNode
);
mountNode);
````

View File

@@ -20,7 +20,7 @@ Alert component for feedback.
| closable | Whether Alert can be closed | boolean | - |
| closeText | Close text to show | string\|ReactNode | - |
| description | Additional content of Alert | string\|ReactNode | - |
| icon | Custom icon, effective when `showIcon` is `true` | ReactNode | - |
| 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` |

View File

@@ -5,7 +5,7 @@ import Icon, { ThemeType } from '../icon';
import classNames from 'classnames';
import getDataOrAriaProps from '../_util/getDataOrAriaProps';
function noop() {}
function noop() { }
export interface AlertProps {
/**
@@ -31,23 +31,19 @@ export interface AlertProps {
prefixCls?: string;
className?: string;
banner?: boolean;
icon?: React.ReactNode;
}
export interface AlertState {
closing: boolean;
closed: boolean;
}
export default class Alert extends React.Component<AlertProps, AlertState> {
state: AlertState = {
closing: true,
closed: false,
};
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();
const dom = ReactDOM.findDOMNode(this) as HTMLElement;
let dom = ReactDOM.findDOMNode(this) as HTMLElement;
dom.style.height = `${dom.offsetHeight}px`;
// Magic code
// 重复一次后才能正确设置 height
@@ -57,28 +53,19 @@ export default class Alert extends React.Component<AlertProps, AlertState> {
closing: false,
});
(this.props.onClose || noop)(e);
};
}
animationEnd = () => {
this.setState({
closed: true,
closing: true,
});
(this.props.afterClose || noop)();
};
}
render() {
const {
description,
prefixCls = 'ant-alert',
message,
closeText,
banner,
className = '',
style,
icon,
let {
closable, description, type, prefixCls = 'ant-alert', message, closeText, showIcon, banner,
className = '', style, iconType,
} = this.props;
let { closable, type, showIcon, iconType } = this.props;
// banner模式默认有 Icon
showIcon = banner && showIcon === undefined ? true : showIcon;
@@ -86,8 +73,6 @@ export default class Alert extends React.Component<AlertProps, AlertState> {
type = banner && type === undefined ? 'warning' : type || 'info';
let iconTheme: ThemeType = 'filled';
// should we give a warning?
// warning(!iconType, `The property 'iconType' is deprecated. Use the property 'icon' instead.`);
if (!iconType) {
switch (type) {
case 'success':
@@ -112,24 +97,18 @@ export default class Alert extends React.Component<AlertProps, AlertState> {
}
}
const alertCls = classNames(prefixCls, `${prefixCls}-${type}`, {
[`${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 alertCls = classNames(
prefixCls,
`${prefixCls}-${type}`,
{
[`${prefixCls}-close`]: !this.state.closing,
[`${prefixCls}-with-description`]: !!description,
[`${prefixCls}-no-icon`]: !showIcon,
[`${prefixCls}-banner`]: !!banner,
[`${prefixCls}-closable`]: closable,
},
className,
);
const closeIcon = closable ? (
<a onClick={this.handleClose} className={`${prefixCls}-close-icon`}>
{closeText || <Icon type="close" />}
@@ -138,17 +117,7 @@ export default class Alert extends React.Component<AlertProps, AlertState> {
const dataOrAriaProps = getDataOrAriaProps(this.props);
const iconNode = (icon &&
(React.isValidElement<{ className?: string }>(icon) ? (
React.cloneElement(icon, {
className: classNames({
[icon.props.className as string]: icon.props.className,
[`${prefixCls}-icon`]: true,
}),
})
) : (
<span className={`${prefixCls}-icon`}>{icon}</span>
))) || <Icon className={`${prefixCls}-icon`} type={iconType} theme={iconTheme} />;
const iconNode = <Icon className={`${prefixCls}-icon`} type={iconType} theme={iconTheme} />;
return this.state.closed ? null : (
<Animate

View File

@@ -1,7 +1,7 @@
---
category: Components
subtitle: 警告提示
type: 反馈
type: Feedback
title: Alert
---
@@ -21,7 +21,7 @@ title: Alert
| closable | 默认不显示关闭按钮 | boolean | 无 |
| closeText | 自定义关闭按钮 | string\|ReactNode | 无 |
| description | 警告提示的辅助性文字介绍 | string\|ReactNode | 无 |
| icon | 自定义图标,`showIcon``true` 时有效 | ReactNode | - |
| iconType | 自定义图标类型`showIcon``true` 时有效 | string | - |
| message | 警告提示内容 | string\|ReactNode | 无 |
| showIcon | 是否显示辅助图标 | boolean | false`banner` 模式下默认值为 true |
| type | 指定警告提示的样式,有四种选择 `success``info``warning``error` | string | `info``banner` 模式下默认值为 `warning` |

View File

@@ -1,12 +1,11 @@
@import '../../style/themes/default';
@import '../../style/mixins/index';
@import "../../style/themes/default";
@import "../../style/mixins/index";
@alert-prefix-cls: ~'@{ant-prefix}-alert';
@alert-prefix-cls: ~"@{ant-prefix}-alert";
@alert-message-color: @heading-color;
@alert-text-color: @text-color;
@alert-close-color: @text-color-secondary;
@alert-close-hover-color: #404040;
.@{alert-prefix-cls} {
.reset-component;
@@ -18,10 +17,6 @@
padding: 8px 15px;
}
&&-closable {
padding-right: 30px;
}
&-icon {
top: 8px + @font-size-base * @line-height-base / 2 - @font-size-base / 2;
left: 16px;
@@ -77,9 +72,9 @@
.@{iconfont-css-prefix}-close {
color: @alert-close-color;
transition: color 0.3s;
transition: color .3s;
&:hover {
color: @alert-close-hover-color;
color: #404040;
}
}
}
@@ -132,12 +127,12 @@
margin: 0;
padding-top: 0;
padding-bottom: 0;
transition: all 0.3s @ease-in-out-circ;
transition: all .3s @ease-in-out-circ;
transform-origin: 50% 0;
}
&-slide-up-leave {
animation: antAlertSlideUpOut 0.3s @ease-in-out-circ;
animation: antAlertSlideUpOut .3s @ease-in-out-circ;
animation-fill-mode: both;
}

View File

@@ -25,7 +25,7 @@ function getOffsetTop(element: HTMLElement, container: AnchorContainer): number
if (rect.width || rect.height) {
if (container === window) {
container = element.ownerDocument!.documentElement!;
container = element.ownerDocument.documentElement;
return rect.top - container.clientTop;
}
return rect.top - (container as HTMLElement).getBoundingClientRect().top;
@@ -38,24 +38,17 @@ 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 * t * t + b;
}
return (cc / 2) * ((t -= 2) * t * t + 2) + b;
return cc / 2 * ((t -= 2) * t * t + 2) + b;
}
const sharpMatcherRegx = /#([^#]+)$/;
function scrollTo(
href: string,
offsetTop = 0,
getContainer: () => AnchorContainer,
callback = () => {},
) {
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;
}
if (!sharpLinkMatch) { return; }
const targetElement = document.getElementById(sharpLinkMatch[1]);
if (!targetElement) {
return;
@@ -86,7 +79,7 @@ type Section = {
top: number;
};
export type AnchorContainer = HTMLElement | Window;
export type AnchorContainer = HTMLElement | Window;
export interface AnchorProps {
prefixCls?: string;
@@ -98,10 +91,7 @@ export interface AnchorProps {
affix?: boolean;
showInkInFixed?: boolean;
getContainer?: () => AnchorContainer;
onClick?: (
e: React.MouseEvent<HTMLElement>,
link: { title: React.ReactNode; href: string },
) => void;
onClick?: (e: React.MouseEvent<HTMLElement>, link: { title: React.ReactNode, href: string }) => void;
}
export interface AnchorState {
@@ -120,10 +110,7 @@ export interface AntAnchor {
unregisterLink: (link: string) => void;
activeLink: string | null;
scrollTo: (link: string) => void;
onClick?: (
e: React.MouseEvent<HTMLElement>,
link: { title: React.ReactNode; href: string },
) => void;
onClick?: (e: React.MouseEvent<HTMLElement>, link: { title: React.ReactNode, href: string }) => void;
}
export default class Anchor extends React.Component<AnchorProps, AnchorState> {
@@ -194,7 +181,7 @@ export default class Anchor extends React.Component<AnchorProps, AnchorState> {
this.setState({
activeLink: this.getCurrentAnchor(offsetTop, bounds),
});
};
}
handleScrollTo = (link: string) => {
const { offsetTop, getContainer } = this.props as AnchorDefaultProps;
@@ -203,10 +190,10 @@ export default class Anchor extends React.Component<AnchorProps, AnchorState> {
scrollTo(link, offsetTop, getContainer, () => {
this.animating = false;
});
};
}
getCurrentAnchor(offsetTop = 0, bounds = 5): string {
const activeLink = '';
let activeLink = '';
if (typeof document === 'undefined') {
return activeLink;
}
@@ -216,9 +203,7 @@ export default class Anchor extends React.Component<AnchorProps, AnchorState> {
const container = getContainer();
this.links.forEach(link => {
const sharpLinkMatch = sharpMatcherRegx.exec(link.toString());
if (!sharpLinkMatch) {
return;
}
if (!sharpLinkMatch) { return; }
const target = document.getElementById(sharpLinkMatch[1]);
if (target) {
const top = getOffsetTop(target, container);
@@ -232,7 +217,7 @@ export default class Anchor extends React.Component<AnchorProps, AnchorState> {
});
if (linkSections.length) {
const maxSection = linkSections.reduce((prev, curr) => (curr.top > prev.top ? curr : prev));
const maxSection = linkSections.reduce((prev, curr) => curr.top > prev.top ? curr : prev);
return maxSection.link;
}
return '';
@@ -248,11 +233,11 @@ export default class Anchor extends React.Component<AnchorProps, AnchorState> {
if (linkNode) {
this.inkNode.style.top = `${(linkNode as any).offsetTop + linkNode.clientHeight / 2 - 4.5}px`;
}
};
}
saveInkNode = (node: HTMLSpanElement) => {
this.inkNode = node;
};
}
render() {
const {
@@ -274,7 +259,7 @@ export default class Anchor extends React.Component<AnchorProps, AnchorState> {
const wrapperClass = classNames(className, `${prefixCls}-wrapper`);
const anchorClass = classNames(prefixCls, {
fixed: !affix && !showInkInFixed,
'fixed': !affix && !showInkInFixed,
});
const wrapperStyle = {
@@ -283,9 +268,12 @@ export default class Anchor extends React.Component<AnchorProps, AnchorState> {
};
const anchorContent = (
<div className={wrapperClass} style={wrapperStyle}>
<div
className={wrapperClass}
style={wrapperStyle}
>
<div className={anchorClass}>
<div className={`${prefixCls}-ink`}>
<div className={`${prefixCls}-ink`} >
<span className={inkClass} ref={this.saveInkNode} />
</div>
{children}
@@ -293,9 +281,7 @@ export default class Anchor extends React.Component<AnchorProps, AnchorState> {
</div>
);
return !affix ? (
anchorContent
) : (
return !affix ? anchorContent : (
<Affix offsetTop={offsetTop} target={getContainer}>
{anchorContent}
</Affix>

View File

@@ -47,10 +47,15 @@ export default class AnchorLink extends React.Component<AnchorLinkProps, any> {
onClick(e, { title, href });
}
scrollTo(href);
};
}
render() {
const { prefixCls, href, title, children } = this.props;
const {
prefixCls,
href,
title,
children,
} = this.props;
const active = this.context.antAnchor.activeLink === href;
const wrapperClassName = classNames(`${prefixCls}-link`, {
[`${prefixCls}-link-active`]: active,

View File

@@ -9,7 +9,7 @@ describe('Anchor Render', () => {
const wrapper = mount(
<Anchor>
<Link href="#API" title="API" />
</Anchor>,
</Anchor>
);
wrapper.find('a[href="#API"]').simulate('click');
@@ -22,7 +22,7 @@ describe('Anchor Render', () => {
const wrapper = mount(
<Anchor>
<Link href="http://www.example.com/#API" title="API" />
</Anchor>,
</Anchor>
);
wrapper.find('a[href="http://www.example.com/#API"]').simulate('click');
expect(wrapper.instance().state.activeLink).toBe('http://www.example.com/#API');
@@ -39,7 +39,7 @@ describe('Anchor Render', () => {
const wrapper = mount(
<Anchor>
<Link href="http://www.example.com/#API" title="API" />
</Anchor>,
</Anchor>
);
wrapper.instance().handleScroll();
expect(wrapper.instance().state.activeLink).toBe('http://www.example.com/#API');
@@ -57,7 +57,7 @@ describe('Anchor Render', () => {
const wrapper = mount(
<Anchor>
<Link href="##API" title="API" />
</Anchor>,
</Anchor>
);
wrapper.instance().handleScrollTo('##API');
expect(wrapper.instance().state.activeLink).toBe('##API');
@@ -70,7 +70,7 @@ describe('Anchor Render', () => {
const wrapper = mount(
<Anchor>
<Link href="#API" title="API" />
</Anchor>,
</Anchor>
);
const removeListenerSpy = jest.spyOn(wrapper.instance().scrollEvent, 'remove');
wrapper.unmount();
@@ -81,7 +81,7 @@ describe('Anchor Render', () => {
const wrapper = mount(
<Anchor>
<Link href="#API" title="API" />
</Anchor>,
</Anchor>
);
expect(wrapper.instance().links).toEqual(['#API']);
wrapper.setProps({ children: null });
@@ -92,11 +92,7 @@ describe('Anchor Render', () => {
let anchorInstance = null;
function AnchorUpdate({ href }) {
return (
<Anchor
ref={c => {
anchorInstance = c;
}}
>
<Anchor ref={c => anchorInstance = c}>
<Link href={href} title="API" />
</Anchor>
);
@@ -111,9 +107,7 @@ describe('Anchor Render', () => {
it('Anchor onClick event', () => {
let event;
let link;
const handleClick = (...arg) => {
[event, link] = arg;
};
const handleClick = (...arg) => ([event, link] = arg);
const href = '#API';
const title = 'API';
@@ -121,7 +115,7 @@ describe('Anchor Render', () => {
const wrapper = mount(
<Anchor onClick={handleClick}>
<Link href={href} title={title} />
</Anchor>,
</Anchor>
);
wrapper.find(`a[href="${href}"]`).simulate('click');

View File

@@ -27,8 +27,7 @@ ReactDOM.render(
<Link href="#Link-Props" title="Link Props" />
</Link>
</Anchor>,
mountNode
);
mountNode);
```
<style>

View File

@@ -32,6 +32,5 @@ ReactDOM.render(
<Link href="#Link-Props" title="Link Props" />
</Link>
</Anchor>,
mountNode
);
mountNode);
```

View File

@@ -27,6 +27,5 @@ ReactDOM.render(
<Link href="#Link-Props" title="Link Props" />
</Link>
</Anchor>,
mountNode
);
mountNode);
```

View File

@@ -2,7 +2,7 @@
category: Components
subtitle: 锚点
cols: 2
type: 其他
type: Other
title: Anchor
---

View File

@@ -1,5 +1,5 @@
@import '../../style/themes/default';
@import '../../style/mixins/index';
@import "../../style/themes/default";
@import "../../style/mixins/index";
@anchor-border-width: 2px;
@@ -38,7 +38,7 @@
border: 2px solid @primary-color;
background-color: @component-background;
left: 50%;
transition: top 0.3s ease-in-out;
transition: top .3s ease-in-out;
transform: translateX(-50%);
&.visible {
display: inline-block;
@@ -51,18 +51,18 @@
}
&-link {
padding: 7px 0 7px 16px;
line-height: 1.143;
padding: 8px 0 8px 16px;
line-height: 1;
&-title {
display: block;
position: relative;
transition: all 0.3s;
transition: all .3s;
color: @text-color;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 6px;
margin-bottom: 8px;
&:only-child {
margin-bottom: 0;
@@ -75,7 +75,7 @@
}
&-link &-link {
padding-top: 5px;
padding-bottom: 5px;
padding-top: 6px;
padding-bottom: 6px;
}
}

View File

@@ -9,28 +9,22 @@ 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();
};
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,
);
return React.cloneElement(this.props.children, {
...this.props,
ref: this.saveRef,
}, null);
}
}

View File

@@ -7,7 +7,6 @@ exports[`renders ./components/auto-complete/demo/basic.md correctly 1`] = `
>
<div
aria-autocomplete="list"
aria-controls="test-uuid"
aria-expanded="false"
aria-haspopup="true"
class="ant-select-selection
@@ -83,7 +82,6 @@ exports[`renders ./components/auto-complete/demo/certain-category.md correctly 1
>
<div
aria-autocomplete="list"
aria-controls="test-uuid"
aria-expanded="false"
aria-haspopup="true"
class="ant-select-selection
@@ -131,7 +129,7 @@ exports[`renders ./components/auto-complete/demo/certain-category.md correctly 1
width="1em"
>
<path
d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
d="M608 112c-167.9 0-304 136.1-304 304 0 70.3 23.9 135 63.9 186.5L114.3 856.1a8.03 8.03 0 0 0 0 11.3l42.3 42.3c3.1 3.1 8.2 3.1 11.3 0l253.6-253.6C473 696.1 537.7 720 608 720c167.9 0 304-136.1 304-304S775.9 112 608 112zm161.2 465.2C726.2 620.3 668.9 644 608 644s-118.2-23.7-161.2-66.8C403.7 534.2 380 476.9 380 416s23.7-118.2 66.8-161.2c43-43.1 100.3-66.8 161.2-66.8s118.2 23.7 161.2 66.8c43.1 43 66.8 100.3 66.8 161.2s-23.7 118.2-66.8 161.2z"
/>
</svg>
</i>
@@ -181,7 +179,6 @@ exports[`renders ./components/auto-complete/demo/custom.md correctly 1`] = `
>
<div
aria-autocomplete="list"
aria-controls="test-uuid"
aria-expanded="false"
aria-haspopup="true"
class="ant-select-selection
@@ -246,7 +243,6 @@ exports[`renders ./components/auto-complete/demo/non-case-sensitive.md correctly
>
<div
aria-autocomplete="list"
aria-controls="test-uuid"
aria-expanded="false"
aria-haspopup="true"
class="ant-select-selection
@@ -318,7 +314,6 @@ exports[`renders ./components/auto-complete/demo/options.md correctly 1`] = `
>
<div
aria-autocomplete="list"
aria-controls="test-uuid"
aria-expanded="false"
aria-haspopup="true"
class="ant-select-selection
@@ -394,7 +389,6 @@ exports[`renders ./components/auto-complete/demo/uncertain-category.md correctly
>
<div
aria-autocomplete="list"
aria-controls="test-uuid"
aria-expanded="false"
aria-haspopup="true"
class="ant-select-selection
@@ -446,7 +440,7 @@ exports[`renders ./components/auto-complete/demo/uncertain-category.md correctly
width="1em"
>
<path
d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
d="M608 112c-167.9 0-304 136.1-304 304 0 70.3 23.9 135 63.9 186.5L114.3 856.1a8.03 8.03 0 0 0 0 11.3l42.3 42.3c3.1 3.1 8.2 3.1 11.3 0l253.6-253.6C473 696.1 537.7 720 608 720c167.9 0 304-136.1 304-304S775.9 112 608 112zm161.2 465.2C726.2 620.3 668.9 644 608 644s-118.2-23.7-161.2-66.8C403.7 534.2 380 476.9 380 416s23.7-118.2 66.8-161.2c43-43.1 100.3-66.8 161.2-66.8s118.2 23.7 161.2 66.8c43.1 43 66.8 100.3 66.8 161.2s-23.7 118.2-66.8 161.2z"
/>
</svg>
</i>

View File

@@ -10,17 +10,12 @@ describe('AutoComplete with Custom Input Element Render', () => {
const wrapper = mount(
<AutoComplete dataSource={['12345', '23456', '34567']}>
<textarea />
</AutoComplete>,
</AutoComplete>
);
expect(wrapper.find('textarea').length).toBe(1);
wrapper.find('textarea').simulate('change', { target: { value: '123' } });
const dropdownWrapper = mount(
wrapper
.find('Trigger')
.instance()
.getComponent(),
);
const dropdownWrapper = mount(wrapper.find('Trigger').instance().getComponent());
// should not filter data source defaultly
expect(dropdownWrapper.find('MenuItem').length).toBe(3);
@@ -31,7 +26,7 @@ describe('AutoComplete with Custom Input Element Render', () => {
mount(
<AutoComplete dataSource={[]}>
<input ref={mockRef} />
</AutoComplete>,
</AutoComplete>
);
expect(mockRef).toHaveBeenCalled();
});

View File

@@ -35,7 +35,9 @@ class Complete extends React.Component {
render() {
const { result } = this.state;
const children = result.map(email => <Option key={email}>{email}</Option>);
const children = result.map((email) => {
return <Option key={email}>{email}</Option>;
});
return (
<AutoComplete
style={{ width: 200 }}

View File

@@ -15,9 +15,7 @@ Demonstration of [Lookup Patterns: Uncertain Category](https://ant.design/docs/s
Basic Usage, set datasource of autocomplete with `dataSource` property.
````jsx
import {
Icon, Button, Input, AutoComplete,
} from 'antd';
import { Icon, Button, Input, AutoComplete } from 'antd';
const Option = AutoComplete.Option;

View File

@@ -27,7 +27,7 @@ const dataSource = ['12345', '23456', '34567'];
| 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\[]\| - |
| 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` |

View File

@@ -2,18 +2,15 @@ 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, { InputProps } from '../input';
import Input from '../input';
import InputElement from './InputElement';
export interface DataSourceItemObject {
value: string;
text: string;
}
export interface DataSourceItemObject { value: string; text: string; }
export type DataSourceItemType =
| string
| DataSourceItemObject
| React.ReactElement<OptionProps>
| React.ReactElement<OptGroupProps>;
string |
DataSourceItemObject |
React.ReactElement<OptionProps> |
React.ReactElement<OptGroupProps>;
export interface AutoCompleteInputProps {
onChange?: React.FormEventHandler<any>;
@@ -21,9 +18,9 @@ export interface AutoCompleteInputProps {
}
export type ValidInputElement =
| HTMLInputElement
| HTMLTextAreaElement
| React.ReactElement<AutoCompleteInputProps>;
HTMLInputElement |
HTMLTextAreaElement |
React.ReactElement<AutoCompleteInputProps>;
export interface AutoCompleteProps extends AbstractSelectProps {
value?: SelectValue;
@@ -34,13 +31,9 @@ export interface AutoCompleteProps extends AbstractSelectProps {
optionLabelProp?: string;
onChange?: (value: SelectValue) => void;
onSelect?: (value: SelectValue, option: Object) => any;
onBlur?: (value: SelectValue) => void;
onFocus?: () => void;
children?:
| ValidInputElement
| React.ReactElement<InputProps>
| React.ReactElement<OptionProps>
| Array<React.ReactElement<OptionProps>>;
children?: ValidInputElement |
React.ReactElement<OptionProps> |
Array<React.ReactElement<OptionProps>>;
}
function isSelectOptionOrSelectOptGroup(child: any): Boolean {
@@ -64,17 +57,15 @@ export default class AutoComplete extends React.Component<AutoCompleteProps, {}>
getInputElement = () => {
const { children } = this.props;
const element =
children && React.isValidElement(children) && children.type !== Option ? (
React.Children.only(this.props.children)
) : (
<Input />
);
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>;
};
return (
<InputElement {...elementProps}>{element}</InputElement>
);
}
focus() {
this.select.focus();
@@ -86,17 +77,11 @@ export default class AutoComplete extends React.Component<AutoCompleteProps, {}>
saveSelect = (node: any) => {
this.select = node;
};
}
render() {
const {
size,
className = '',
notFoundContent,
prefixCls,
optionLabelProp,
dataSource,
children,
let {
size, className = '', notFoundContent, prefixCls, optionLabelProp, dataSource, children,
} = this.props;
const cls = classNames({
@@ -109,30 +94,28 @@ export default class AutoComplete extends React.Component<AutoCompleteProps, {}>
let options;
const childArray = React.Children.toArray(children);
if (childArray.length && isSelectOptionOrSelectOptGroup(childArray[0])) {
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[]`.',
);
}
})
: [];
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 (

View File

@@ -1,7 +1,7 @@
---
category: Components
subtitle: 自动完成
type: 数据录入
type: Data Entry
cols: 2
title: AutoComplete
---
@@ -28,7 +28,7 @@ const dataSource = ['12345', '23456', '34567'];
| children (自定义输入框) | 自定义输入框 | HTMLInputElement / HTMLTextAreaElement / React.ReactElement<InputProps> | `<Input />` |
| dataSource | 自动完成的数据源 | [DataSourceItemType](https://git.io/vMMKF)\[] | |
| defaultActiveFirstOption | 是否默认高亮第一个选项。 | boolean | true |
| defaultValue | 指定默认选中的条目 | string\|string\[]\| 无 |
| 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` |

View File

@@ -1,10 +1,10 @@
@import '../../style/themes/default';
@import '../../style/mixins/index';
@import '../../input/style/mixin';
@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';
@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;
@@ -52,9 +52,6 @@
&:hover {
.hover;
}
&[disabled] {
.disabled;
}
}
&-lg {

View File

@@ -22,7 +22,7 @@ describe('Avatar Render', () => {
expect(children.length).toBe(1);
expect(children.text()).toBe('Fallback');
expect(wrapper.instance().setScale).toBeCalled();
expect(div.querySelector('.ant-avatar-string').style.transform).toContain('scale(0.5)');
expect(div.querySelector('.ant-avatar-string').style.transform).toBe('scale(0.5)');
wrapper.detach();
global.document.body.removeChild(div);
@@ -38,14 +38,14 @@ describe('Avatar Render', () => {
class Foo extends React.Component {
state = {
src: LOAD_FAILURE_SRC,
};
}
handleImgError = () => {
this.setState({
src: LOAD_SUCCESS_SRC,
});
return false;
};
}
render() {
const { src } = this.state;

View File

@@ -25,6 +25,5 @@ ReactDOM.render(
<Badge dot><Avatar shape="square" icon="user" /></Badge>
</span>
</div>,
mountNode
);
mountNode);
````

View File

@@ -31,8 +31,7 @@ ReactDOM.render(
<Avatar shape="square" size="small" icon="user" />
</div>
</div>,
mountNode
);
mountNode);
````
<style>

View File

@@ -25,8 +25,7 @@ ReactDOM.render(
<Avatar style={{ color: '#f56a00', backgroundColor: '#fde3cf' }}>U</Avatar>
<Avatar style={{ backgroundColor: '#87d068' }} icon="user" />
</div>,
mountNode
);
mountNode);
````
<style>

View File

@@ -14,6 +14,5 @@ Avatars can be used to represent people or objects. It supports images, `Icon`s,
| shape | the shape of avatar | `circle` \| `square` | `circle` |
| size | the size of the avatar | number \| string: `large` `small` `default` | `default` |
| src | the address of the image for an image avatar | string | - |
| srcSet | a list of sources to use for different screen resolutions | string | - |
| alt | This attribute defines the alternative text describing the image | string | - |
| onError | handler when img load errorreturn false to prevent default fallback behavior | () => boolean | - |

View File

@@ -13,8 +13,6 @@ export interface AvatarProps {
size?: 'large' | 'small' | 'default' | number;
/** Src of image avatar */
src?: string;
/** Srcset of image avatar */
srcSet?: string;
/** Type of the Icon to be used in avatar */
icon?: string;
style?: React.CSSProperties;
@@ -39,23 +37,24 @@ export default class Avatar extends React.Component<AvatarProps, AvatarState> {
size: 'default',
};
state = {
scale: 1,
isImgExist: true,
};
private avatarChildren: any;
constructor(props: AvatarProps) {
super(props);
this.state = {
scale: 1,
isImgExist: true,
};
}
componentDidMount() {
this.setScale();
}
componentDidUpdate(prevProps: AvatarProps, prevState: AvatarState) {
if (
prevProps.children !== this.props.children ||
(prevState.scale !== this.state.scale && this.state.scale === 1) ||
prevState.isImgExist !== this.state.isImgExist
) {
if (prevProps.children !== this.props.children
|| (prevState.scale !== this.state.scale && this.state.scale === 1)
|| (prevState.isImgExist !== this.state.isImgExist)) {
this.setScale();
}
}
@@ -77,7 +76,7 @@ export default class Avatar extends React.Component<AvatarProps, AvatarState> {
});
}
}
};
}
handleImgLoadError = () => {
const { onError } = this.props;
@@ -85,10 +84,12 @@ export default class Avatar extends React.Component<AvatarProps, AvatarState> {
if (errorFlag !== false) {
this.setState({ isImgExist: false });
}
};
}
render() {
const { prefixCls, shape, size, src, srcSet, icon, className, alt, ...others } = this.props;
const {
prefixCls, shape, size, src, icon, className, alt, ...others
} = this.props;
const { isImgExist, scale } = this.state;
@@ -103,40 +104,43 @@ export default class Avatar extends React.Component<AvatarProps, AvatarState> {
[`${prefixCls}-icon`]: icon,
});
const sizeStyle: React.CSSProperties =
typeof size === 'number'
? {
width: size,
height: size,
lineHeight: `${size}px`,
fontSize: icon ? size / 2 : 18,
}
: {};
const sizeStyle: React.CSSProperties = typeof size === 'number' ? {
width: size,
height: size,
lineHeight: `${size}px`,
fontSize: icon ? size / 2 : 18,
} : {};
let children = this.props.children;
if (src && isImgExist) {
children = <img src={src} srcSet={srcSet} onError={this.handleImgLoadError} alt={alt} />;
children = (
<img
src={src}
onError={this.handleImgLoadError}
alt={alt}
/>
);
} else if (icon) {
children = <Icon type={icon} />;
} else {
const childrenNode = this.avatarChildren;
if (childrenNode || scale !== 1) {
const transformString = `scale(${scale}) translateX(-50%)`;
const childrenStyle: React.CSSProperties = {
msTransform: transformString,
WebkitTransform: transformString,
transform: transformString,
msTransform: `scale(${scale})`,
WebkitTransform: `scale(${scale})`,
transform: `scale(${scale})`,
position: 'absolute',
display: 'inline-block',
left: `calc(50% - ${Math.round(childrenNode.offsetWidth / 2)}px)`,
};
const sizeChildrenStyle: React.CSSProperties =
typeof size === 'number'
? {
lineHeight: `${size}px`,
}
: {};
typeof size === 'number' ? {
lineHeight: `${size}px`,
} : {};
children = (
<span
className={`${prefixCls}-string`}
ref={span => (this.avatarChildren = span)}
ref={span => this.avatarChildren = span}
style={{ ...sizeChildrenStyle, ...childrenStyle }}
>
{children}
@@ -144,14 +148,21 @@ export default class Avatar extends React.Component<AvatarProps, AvatarState> {
);
} else {
children = (
<span className={`${prefixCls}-string`} ref={span => (this.avatarChildren = span)}>
<span
className={`${prefixCls}-string`}
ref={span => this.avatarChildren = span}
>
{children}
</span>
);
}
}
return (
<span {...others} style={{ ...sizeStyle, ...others.style }} className={classString}>
<span
{...others}
style={{ ...sizeStyle, ...others.style }}
className={classString}
>
{children}
</span>
);

View File

@@ -1,7 +1,7 @@
---
category: Components
subtitle: 头像
type: 数据展示
type: Data Display
title: Avatar
---
@@ -17,8 +17,7 @@ title: Avatar
| --- | --- | --- | --- |
| icon | 设置头像的图标类型,参考 `Icon` 组件 | string | - |
| shape | 指定头像的形状 | Enum{ 'circle', 'square' } | `circle` |
| size | 设置头像的大小 | number \| Enum{ 'large', 'small', 'default' } | `default` |
| size | 设置头像的大小 | Enum{ 'large', 'small', 'default' } | `default` |
| src | 图片类头像的资源地址 | string | - |
| srcSet | 设置图片类头像响应式资源地址 | string | - |
| alt | 图像无法显示时的替代文本 | string | - |
| onError | 图片加载失败的事件,返回 false 会关闭组件默认的 fallback 行为 | () => boolean | - |

View File

@@ -1,7 +1,7 @@
@import '../../style/themes/default';
@import '../../style/mixins/index';
@import "../../style/themes/default";
@import "../../style/mixins/index";
@avatar-prefix-cls: ~'@{ant-prefix}-avatar';
@avatar-prefix-cls: ~"@{ant-prefix}-avatar";
.@{avatar-prefix-cls} {
.reset-component;
@@ -45,10 +45,8 @@
line-height: @size;
border-radius: 50%;
&-string {
position: absolute;
left: 50%;
transform-origin: 0 center;
& > * {
line-height: @size;
}
&.@{avatar-prefix-cls}-icon {

View File

@@ -3,14 +3,22 @@ import { mount } from 'enzyme';
import BackTop from '..';
describe('BackTop', () => {
it('should scroll to top after click it', async () => {
beforeAll(() => {
jest.useFakeTimers();
});
afterAll(() => {
jest.useRealTimers();
});
it('should scroll to top after click it', () => {
const wrapper = mount(<BackTop visibilityHeight={-1} />);
document.documentElement.scrollTop = 400;
// trigger scroll manually
wrapper.instance().handleScroll();
await new Promise(resolve => setTimeout(resolve, 0));
jest.runAllTimers();
wrapper.find('.ant-back-top').simulate('click');
await new Promise(resolve => setTimeout(resolve, 1000));
jest.runAllTimers();
expect(Math.abs(Math.round(document.documentElement.scrollTop))).toBe(0);
});
});

View File

@@ -10,13 +10,13 @@ const 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 * t * t + b;
} else {
return (cc / 2) * ((t -= 2) * t * t + 2) + b;
return cc / 2 * ((t -= 2) * t * t + 2) + b;
}
};
function noop() {}
function noop() { }
function getDefaultTarget() {
return window;
@@ -49,10 +49,10 @@ export default class BackTop extends React.Component<BackTopProps, any> {
const getTarget = this.props.target || getDefaultTarget;
const targetNode = getTarget();
if (targetNode === window) {
return window.pageYOffset || document.body.scrollTop || document.documentElement!.scrollTop;
return window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;
}
return (targetNode as HTMLElement).scrollTop;
};
}
scrollToTop = (e: React.MouseEvent<HTMLDivElement>) => {
const scrollTop = this.getCurrentScrollTop();
@@ -69,14 +69,14 @@ export default class BackTop extends React.Component<BackTopProps, any> {
};
raf(frameFunc);
(this.props.onClick || noop)(e);
};
}
setScrollTop(value: number) {
const getTarget = this.props.target || getDefaultTarget;
const targetNode = getTarget();
if (targetNode === window) {
document.body.scrollTop = value;
document.documentElement!.scrollTop = value;
document.documentElement.scrollTop = value;
} else {
(targetNode as HTMLElement).scrollTop = value;
}
@@ -88,7 +88,7 @@ export default class BackTop extends React.Component<BackTopProps, any> {
this.setState({
visible: scrollTop > (visibilityHeight as number),
});
};
}
componentDidMount() {
const getTarget = this.props.target || getDefaultTarget;

View File

@@ -1,6 +1,6 @@
---
category: Components
type: 其他
type: Other
subtitle: 回到顶部
title: BackTop
---

View File

@@ -1,7 +1,7 @@
@import '../../style/themes/default';
@import '../../style/mixins/index';
@import "../../style/themes/default";
@import "../../style/mixins/index";
@backtop-prefix-cls: ~'@{ant-prefix}-back-top';
@backtop-prefix-cls: ~"@{ant-prefix}-back-top";
.@{backtop-prefix-cls} {
.reset-component;
@@ -20,12 +20,12 @@
background-color: @back-top-bg;
color: @back-top-color;
text-align: center;
transition: all 0.3s @ease-in-out;
transition: all .3s @ease-in-out;
overflow: hidden;
&:hover {
background-color: @back-top-hover-bg;
transition: all 0.3s @ease-in-out;
transition: all .3s @ease-in-out;
}
}
@@ -33,8 +33,7 @@
margin: 12px auto;
width: 14px;
height: 16px;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAoCAYAAACWwljjAAAABGdBTUEAALGPC/xhBQAAAbtJREFUWAntmMtKw0AUhhMvS5cuxILgQlRUpIggIoKIIoigG1eC+AA+jo+i6FIXBfeuXIgoeKVeitVWJX5HWhhDksnUpp3FDPyZk3Nm5nycmZKkXhAEOXSA3lG7muTeRzmfy6HneUvIhnYkQK+Q9NhAA0Opg0vBEhjBKHiyb8iGMyQMOYuK41BcBSypAL+MYXSKjtFAW7EAGEO3qN4uMQbbAkXiSfRQJ1H6a+yhlkKRcAoVFYiweYNjtCVQJJpBz2GCiPt7fBOZQpFgDpUikse5HgnkM4Fi4QX0Fpc5wf9EbLqpUCy4jMoJSXWhFwbMNgWKhVbRhy5jirhs9fy/oFhgHVVTJEs7RLZ8sSEoJm6iz7SZDMbJ+/OKERQTttCXQRLToRUmrKWCYuA2+jbN0MB4OQobYShfdTCgn/sL1K36M7TLrN3n+758aPy2rrpR6+/od5E8tf/A1uLS9aId5T7J3CNYihkQ4D9PiMdMC7mp4rjB9kjFjZp8BlnVHJBuO1yFXIV0FdDF3RlyFdJVQBdv5AxVdIsq8apiZ2PyYO1EVykesGfZEESsCkweyR8MUW+V8uJ1gkYipmpdP1pm2aJVPEGzAAAAAElFTkSuQmCC)
~'100%/100%' no-repeat;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAoCAYAAACWwljjAAAABGdBTUEAALGPC/xhBQAAAbtJREFUWAntmMtKw0AUhhMvS5cuxILgQlRUpIggIoKIIoigG1eC+AA+jo+i6FIXBfeuXIgoeKVeitVWJX5HWhhDksnUpp3FDPyZk3Nm5nycmZKkXhAEOXSA3lG7muTeRzmfy6HneUvIhnYkQK+Q9NhAA0Opg0vBEhjBKHiyb8iGMyQMOYuK41BcBSypAL+MYXSKjtFAW7EAGEO3qN4uMQbbAkXiSfRQJ1H6a+yhlkKRcAoVFYiweYNjtCVQJJpBz2GCiPt7fBOZQpFgDpUikse5HgnkM4Fi4QX0Fpc5wf9EbLqpUCy4jMoJSXWhFwbMNgWKhVbRhy5jirhs9fy/oFhgHVVTJEs7RLZ8sSEoJm6iz7SZDMbJ+/OKERQTttCXQRLToRUmrKWCYuA2+jbN0MB4OQobYShfdTCgn/sL1K36M7TLrN3n+758aPy2rrpR6+/od5E8tf/A1uLS9aId5T7J3CNYihkQ4D9PiMdMC7mp4rjB9kjFjZp8BlnVHJBuO1yFXIV0FdDF3RlyFdJVQBdv5AxVdIsq8apiZ2PyYO1EVykesGfZEESsCkweyR8MUW+V8uJ1gkYipmpdP1pm2aJVPEGzAAAAAElFTkSuQmCC) ~"100%/100%" no-repeat;
}
}

View File

@@ -4,20 +4,17 @@ import omit from 'omit.js';
import classNames from 'classnames';
function getNumberArray(num: string | number | undefined | null) {
return num
? num
.toString()
.split('')
.reverse()
.map(i => Number(i))
: [];
return num ?
num.toString()
.split('')
.reverse()
.map(i => Number(i)) : [];
}
export interface ScrollNumberProps {
prefixCls?: string;
className?: string;
count?: string | number | null;
displayComponent?: React.ReactElement<any>;
component?: string;
onAnimated?: Function;
style?: React.CSSProperties;
@@ -33,7 +30,8 @@ export default class ScrollNumber extends Component<ScrollNumberProps, ScrollNum
static defaultProps = {
prefixCls: 'ant-scroll-number',
count: null,
onAnimated() {},
onAnimated() {
},
};
lastCount: any;
@@ -72,84 +70,68 @@ export default class ScrollNumber extends Component<ScrollNumberProps, ScrollNum
}
this.lastCount = this.state.count;
// 复原数字初始位置
this.setState(
{
animateStarted: true,
},
() => {
// 等待数字位置复原完毕
// 开始设置完整的数字
setTimeout(() => {
this.setState(
{
animateStarted: false,
count: nextProps.count,
},
() => {
const onAnimated = this.props.onAnimated;
if (onAnimated) {
onAnimated();
}
},
);
}, 5);
},
);
this.setState({
animateStarted: true,
}, () => {
// 等待数字位置复原完毕
// 开始设置完整的数字
setTimeout(() => {
this.setState({
animateStarted: false,
count: nextProps.count,
}, () => {
const onAnimated = this.props.onAnimated;
if (onAnimated) {
onAnimated();
}
});
}, 5);
});
}
}
renderNumberList(position: number) {
const childrenToReturn: React.ReactElement<any>[] = [];
for (let i = 0; i < 30; i++) {
const currentClassName = position === i ? 'current' : '';
childrenToReturn.push(
<p key={i.toString()} className={currentClassName}>
{i % 10}
</p>,
);
const currentClassName = (position === i) ? 'current' : '';
childrenToReturn.push(<p key={i.toString()} className={currentClassName}>{i % 10}</p>);
}
return childrenToReturn;
}
renderCurrentNumber(num: number, i: number) {
const position = this.getPositionByNum(num, i);
const removeTransition =
this.state.animateStarted || getNumberArray(this.lastCount)[i] === undefined;
return createElement(
'span',
{
className: `${this.props.prefixCls}-only`,
style: {
transition: removeTransition ? 'none' : undefined,
msTransform: `translateY(${-position * 100}%)`,
WebkitTransform: `translateY(${-position * 100}%)`,
transform: `translateY(${-position * 100}%)`,
},
key: i,
const removeTransition = this.state.animateStarted ||
(getNumberArray(this.lastCount)[i] === undefined);
return createElement('span', {
className: `${this.props.prefixCls}-only`,
style: {
transition: removeTransition ? 'none' : undefined,
msTransform: `translateY(${-position * 100}%)`,
WebkitTransform: `translateY(${-position * 100}%)`,
transform: `translateY(${-position * 100}%)`,
},
this.renderNumberList(position),
);
key: i,
}, this.renderNumberList(position));
}
renderNumberElement() {
const { count } = this.state;
if (!count || isNaN(count as number)) {
return count;
const state = this.state;
if (!state.count || isNaN(state.count as number)) {
return state.count;
}
return getNumberArray(count)
.map((num, i) => this.renderCurrentNumber(num, i))
.reverse();
return getNumberArray(state.count)
.map((num, i) => this.renderCurrentNumber(num, i)).reverse();
}
render() {
const { prefixCls, className, style, title, component = 'sup', displayComponent } = this.props;
const { prefixCls, className, style, title, component = 'sup' } = this.props;
// fix https://fb.me/react-unknown-prop
const restProps = omit(this.props, [
'count',
'onAnimated',
'component',
'prefixCls',
'displayComponent',
]);
const newProps = {
...restProps,
@@ -162,14 +144,10 @@ export default class ScrollNumber extends Component<ScrollNumberProps, ScrollNum
if (style && style.borderColor) {
newProps.style.boxShadow = `0 0 0 1px ${style.borderColor} inset`;
}
if (displayComponent) {
return React.cloneElement(displayComponent, {
className: classNames(
`${prefixCls}-custom-component`,
displayComponent.props && displayComponent.props.className,
),
});
}
return createElement(component as any, newProps, this.renderNumberElement());
return createElement(
component as any,
newProps,
this.renderNumberElement(),
);
}
}

View File

@@ -186,35 +186,6 @@ exports[`renders ./components/badge/demo/basic.md correctly 1`] = `
0
</sup>
</span>
<span
class="ant-badge"
>
<a
class="head-example"
href="#"
/>
<i
class="anticon anticon-clock-circle ant-scroll-number-custom-component"
style="color:#f5222d"
>
<svg
aria-hidden="true"
class=""
data-icon="clock-circle"
fill="currentColor"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
/>
<path
d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"
/>
</svg>
</i>
</span>
</div>
`;
@@ -454,17 +425,15 @@ exports[`renders ./components/badge/demo/change.md correctly 1`] = `
data-show="true"
/>
</span>
<button
aria-checked="true"
<span
checked=""
class="ant-switch ant-switch-checked"
role="switch"
type="button"
tabindex="0"
>
<span
class="ant-switch-inner"
/>
</button>
</span>
</div>
</div>
`;

View File

@@ -2185,18 +2185,3 @@ exports[`Badge should render when count is changed 5`] = `
</span>
</Badge>
`;
exports[`Badge should support offset when count is a ReactNode 1`] = `
<span
class="ant-badge"
>
<a
class="head-example"
href="#"
/>
<span
class="ant-scroll-number-custom-component custom"
style="right:-10px;margin-top:20px;color:#f5222d"
/>
</span>
`;

View File

@@ -24,12 +24,7 @@ describe('Badge', () => {
it('should have an overriden title attribute', () => {
const badge = mount(<Badge count={10} title="Custom title" />);
expect(
badge
.find('.ant-scroll-number')
.getDOMNode()
.attributes.getNamedItem('title').value,
).toEqual('Custom title');
expect(badge.find('.ant-scroll-number').getDOMNode().attributes.getNamedItem('title').value).toEqual('Custom title');
});
// https://github.com/ant-design/ant-design/issues/10626
@@ -37,7 +32,7 @@ describe('Badge', () => {
const wrapper = mount(
<Tooltip title="Fix the error">
<Badge status="error" />
</Tooltip>,
</Tooltip>
);
wrapper.find('Badge').simulate('mouseenter');
jest.runAllTimers();
@@ -64,22 +59,7 @@ describe('Badge', () => {
});
it('should be compatible with borderColor style', () => {
const wrapper = render(
<Badge
count={4}
style={{ backgroundColor: '#fff', color: '#999', borderColor: '#d9d9d9' }}
/>,
);
expect(wrapper).toMatchSnapshot();
});
// https://github.com/ant-design/ant-design/issues/13694
it('should support offset when count is a ReactNode', () => {
const wrapper = render(
<Badge count={<span className="custom" style={{ color: '#f5222d' }} />} offset={[10, 20]}>
<a href="#" className="head-example" />
</Badge>,
);
const wrapper = render(<Badge count={4} style={{ backgroundColor: '#fff', color: '#999', borderColor: '#d9d9d9' }} />);
expect(wrapper).toMatchSnapshot();
});
});

View File

@@ -14,7 +14,7 @@ title:
Simplest Usage. Badge will be hidden when `count` is `0`, but we can use `showZero` to show it.
````jsx
import { Badge, Icon } from 'antd';
import { Badge } from 'antd';
ReactDOM.render(
<div>
@@ -24,12 +24,8 @@ ReactDOM.render(
<Badge count={0} showZero>
<a href="#" className="head-example" />
</Badge>
<Badge count={<Icon type="clock-circle" style={{ color: '#f5222d' }} />}>
<a href="#" className="head-example" />
</Badge>
</div>,
mountNode
);
mountNode);
````
<style>

View File

@@ -14,9 +14,7 @@ title:
The count will be animated as it changes.
````jsx
import {
Badge, Button, Icon, Switch,
} from 'antd';
import { Badge, Button, Icon, Switch } from 'antd';
const ButtonGroup = Button.Group;

View File

@@ -29,8 +29,7 @@ ReactDOM.render(
<a href="#">Link something</a>
</Badge>
</div>,
mountNode
);
mountNode);
````
<style>

View File

@@ -22,6 +22,5 @@ ReactDOM.render(
<span className="head-example" />
</Badge>
</a>,
mountNode
);
mountNode);
````

View File

@@ -24,8 +24,7 @@ ReactDOM.render(
<Badge count={4} style={{ backgroundColor: '#fff', color: '#999', boxShadow: '0 0 0 1px #d9d9d9 inset' }} />
<Badge count={109} style={{ backgroundColor: '#52c41a' }} />
</div>,
mountNode
);
mountNode);
````
<style>

View File

@@ -31,6 +31,5 @@ ReactDOM.render(
<a href="#" className="head-example" />
</Badge>
</div>,
mountNode
);
mountNode);
````

View File

@@ -34,6 +34,5 @@ ReactDOM.render(
<br />
<Badge status="warning" text="Warning" />
</div>,
mountNode
);
mountNode);
````

View File

@@ -22,8 +22,7 @@ ReactDOM.render(
<a href="#" className="head-example" />
</Badge>
</div>,
mountNode
);
mountNode);
````
<style>

View File

@@ -24,7 +24,7 @@ Badge normally appears in proximity to notifications or user avatars with eye-ca
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| count | Number to show in badge | ReactNode | |
| count | Number to show in badge | number\|ReactNode | |
| dot | Whether to display a red dot instead of `count` | boolean | `false` |
| offset | set offset of the badge dot, like`[x, y]` | `[number, number]` | - |
| overflowCount | Max count to show | number | 99 |

View File

@@ -8,7 +8,7 @@ export { ScrollNumberProps } from './ScrollNumber';
export interface BadgeProps {
/** Number to show in badge */
count?: React.ReactNode;
count?: number | string | null;
showZero?: boolean;
/** Max count to show */
overflowCount?: number;
@@ -35,124 +35,15 @@ export default class Badge extends React.Component<BadgeProps, any> {
};
static propTypes = {
count: PropTypes.node,
count: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
]),
showZero: PropTypes.bool,
dot: PropTypes.bool,
overflowCount: PropTypes.number,
};
getBadgeClassName() {
const { prefixCls, className, status, children } = this.props;
return classNames(className, prefixCls, {
[`${prefixCls}-status`]: !!status,
[`${prefixCls}-not-a-wrapper`]: !children,
}) as string;
}
isZero() {
const numberedDispayCount = this.getNumberedDispayCount();
return numberedDispayCount === '0' || numberedDispayCount === 0;
}
isDot() {
const { dot, status } = this.props;
const isZero = this.isZero();
return (dot && !isZero) || status;
}
isHidden() {
const { showZero } = this.props;
const displayCount = this.getDispayCount();
const isZero = this.isZero();
const isDot = this.isDot();
const isEmpty = displayCount === null || displayCount === undefined || displayCount === '';
return (isEmpty || (isZero && !showZero)) && !isDot;
}
getNumberedDispayCount() {
const { count, overflowCount } = this.props;
const displayCount =
(count as number) > (overflowCount as number) ? `${overflowCount}+` : count;
return displayCount as string | number | null;
}
getDispayCount() {
const isDot = this.isDot();
// dot mode don't need count
if (isDot) {
return '';
}
return this.getNumberedDispayCount();
}
getScollNumberTitle() {
const { title, count } = this.props;
if (title) {
return title;
}
return typeof count === 'string' || typeof count === 'number' ? count : undefined;
}
getStyleWithOffset() {
const { offset, style } = this.props;
return offset
? {
right: -parseInt(offset[0] as string, 10),
marginTop: offset[1],
...style,
}
: style;
}
renderStatusText() {
const { prefixCls, text } = this.props;
const hidden = this.isHidden();
return hidden || !text ? null : <span className={`${prefixCls}-status-text`}>{text}</span>;
}
renderDispayComponent() {
const { count } = this.props;
const customNode = count as React.ReactElement<any>;
if (!customNode || typeof customNode !== 'object') {
return undefined;
}
return React.cloneElement(customNode, {
style: {
...this.getStyleWithOffset(),
...(customNode.props && customNode.props.style),
},
});
}
renderBadgeNumber() {
const { count, prefixCls, scrollNumberPrefixCls, status } = this.props;
const displayCount = this.getDispayCount();
const isDot = this.isDot();
const hidden = this.isHidden();
const scrollNumberCls = classNames({
[`${prefixCls}-dot`]: isDot,
[`${prefixCls}-count`]: !isDot,
[`${prefixCls}-multiple-words`]:
!isDot && count && count.toString && count.toString().length > 1,
[`${prefixCls}-status-${status}`]: !!status,
});
return hidden ? null : (
<ScrollNumber
prefixCls={scrollNumberPrefixCls}
data-show={!hidden}
className={scrollNumberCls}
count={displayCount}
displayComponent={this.renderDispayComponent()} // <Badge status="success" count={<Icon type="xxx" />}></Badge>
title={this.getScollNumberTitle()}
style={this.getStyleWithOffset()}
key="scrollNumber"
/>
);
}
render() {
const {
count,
@@ -170,27 +61,62 @@ export default class Badge extends React.Component<BadgeProps, any> {
title,
...restProps
} = this.props;
const scrollNumber = this.renderBadgeNumber();
const statusText = this.renderStatusText();
let displayCount = (count as number) > (overflowCount as number) ? `${overflowCount}+` : count;
const isZero = displayCount === '0' || displayCount === 0;
const isDot = (dot && !isZero) || status;
// dot mode don't need count
if (isDot) {
displayCount = '';
}
const isEmpty = displayCount === null || displayCount === undefined || displayCount === '';
const hidden = (isEmpty || (isZero && !showZero)) && !isDot;
const statusCls = classNames({
[`${prefixCls}-status-dot`]: !!status,
[`${prefixCls}-status-${status}`]: !!status,
});
const scrollNumberCls = classNames({
[`${prefixCls}-dot`]: isDot,
[`${prefixCls}-count`]: !isDot,
[`${prefixCls}-multiple-words`]: !isDot && count && count.toString && count.toString().length > 1,
[`${prefixCls}-status-${status}`]: !!status,
});
const badgeCls = classNames(className, prefixCls, {
[`${prefixCls}-status`]: !!status,
[`${prefixCls}-not-a-wrapper`]: !children,
});
const styleWithOffset = offset ? {
right: -parseInt(offset[0] as string, 10),
marginTop: offset[1],
...style,
} : style;
// <Badge status="success" />
if (!children && status) {
return (
<span {...restProps} className={this.getBadgeClassName()} style={this.getStyleWithOffset()}>
<span {...restProps} className={badgeCls} style={styleWithOffset}>
<span className={statusCls} />
<span className={`${prefixCls}-status-text`}>{text}</span>
</span>
);
}
const scrollNumber = hidden ? null : (
<ScrollNumber
prefixCls={scrollNumberPrefixCls}
data-show={!hidden}
className={scrollNumberCls}
count={displayCount}
title={title || count}
style={styleWithOffset}
key="scrollNumber"
/>
);
const statusText = (hidden || !text) ? null : (
<span className={`${prefixCls}-status-text`}>{text}</span>
);
return (
<span {...restProps} className={this.getBadgeClassName()}>
<span {...restProps} className={badgeCls}>
{children}
<Animate
component=""

View File

@@ -1,7 +1,7 @@
---
category: Components
subtitle: 徽标数
type: 数据展示
type: Data Display
title: Badge
---
@@ -25,7 +25,7 @@ title: Badge
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| count | 展示的数字,大于 overflowCount 时显示为 `${overflowCount}+`,为 0 时隐藏 | ReactNode | |
| count | 展示的数字,大于 overflowCount 时显示为 `${overflowCount}+`,为 0 时隐藏 | number\|ReactNode | |
| dot | 不展示数字,只有一个小红点 | boolean | false |
| offset | 设置状态点的位置偏移,格式为 `[x, y]` | `[number, number]` | - |
| overflowCount | 展示封顶的数字值 | number | 99 |

View File

@@ -1,8 +1,8 @@
@import '../../style/themes/default';
@import '../../style/mixins/index';
@import "../../style/themes/default";
@import "../../style/mixins/index";
@badge-prefix-cls: ~'@{ant-prefix}-badge';
@number-prefix-cls: ~'@{ant-prefix}-scroll-number';
@badge-prefix-cls: ~"@{ant-prefix}-badge";
@number-prefix-cls: ~"@{ant-prefix}-scroll-number";
.@{badge-prefix-cls} {
.reset-component;
@@ -25,7 +25,6 @@
font-weight: @badge-font-weight;
white-space: nowrap;
box-shadow: 0 0 0 1px #fff;
z-index: 10;
a,
a:hover {
color: #fff;
@@ -47,18 +46,13 @@
}
&-count,
&-dot,
.@{number-prefix-cls}-custom-component {
&-dot {
position: absolute;
right: 0;
transform: translateX(50%);
transform-origin: 100%;
}
.@{number-prefix-cls}-custom-component {
transform: translate(50%, -50%);
}
&-status {
line-height: inherit;
vertical-align: baseline;
@@ -108,27 +102,23 @@
&-zoom-appear,
&-zoom-enter {
animation: antZoomBadgeIn 0.3s @ease-out-back;
animation: antZoomBadgeIn .3s @ease-out-back;
animation-fill-mode: both;
}
&-zoom-leave {
animation: antZoomBadgeOut 0.3s @ease-in-back;
animation: antZoomBadgeOut .3s @ease-in-back;
animation-fill-mode: both;
}
&-not-a-wrapper {
vertical-align: middle;
&-not-a-wrapper .@{ant-prefix}-scroll-number {
top: auto;
display: block;
position: relative;
}
.@{ant-prefix}-scroll-number {
top: auto;
display: block;
position: relative;
}
.@{badge-prefix-cls}-count {
transform: none;
}
&-not-a-wrapper .@{badge-prefix-cls}-count {
transform: none;
}
}
@@ -147,7 +137,7 @@
overflow: hidden;
&-only {
display: inline-block;
transition: all 0.3s @ease-in-out;
transition: all .3s @ease-in-out;
height: @badge-height;
> p {
height: @badge-height;

View File

@@ -15,12 +15,7 @@ export interface BreadcrumbProps {
routes?: Route[];
params?: any;
separator?: React.ReactNode;
itemRender?: (
route: any,
params: any,
routes: Array<any>,
paths: Array<string>,
) => React.ReactNode;
itemRender?: (route: any, params: any, routes: Array<any>, paths: Array<string>) => React.ReactNode;
style?: React.CSSProperties;
className?: string;
}
@@ -40,7 +35,9 @@ function getBreadcrumbName(route: Route, params: any) {
function defaultItemRender(route: Route, params: any, routes: Route[], paths: string[]) {
const isLastItem = routes.indexOf(route) === routes.length - 1;
const name = getBreadcrumbName(route, params);
return isLastItem ? <span>{name}</span> : <a href={`#/${paths.join('/')}`}>{name}</a>;
return isLastItem
? <span>{name}</span>
: <a href={`#/${paths.join('/')}`}>{name}</a>;
}
export default class Breadcrumb extends React.Component<BreadcrumbProps, any> {
@@ -65,25 +62,19 @@ export default class Breadcrumb extends React.Component<BreadcrumbProps, any> {
warning(
!('linkRender' in props || 'nameRender' in props),
'`linkRender` and `nameRender` are removed, please use `itemRender` instead, ' +
'see: https://u.ant.design/item-render.',
'see: https://u.ant.design/item-render.',
);
}
render() {
let crumbs;
const {
separator,
prefixCls,
style,
className,
routes,
params = {},
children,
itemRender = defaultItemRender,
separator, prefixCls, style, className, routes, params = {},
children, itemRender = defaultItemRender,
} = this.props;
if (routes && routes.length > 0) {
const paths: string[] = [];
crumbs = routes.map(route => {
crumbs = routes.map((route) => {
route.path = route.path || '';
let path: string = route.path.replace(/^\//, '');
Object.keys(params).forEach(key => {
@@ -105,7 +96,7 @@ export default class Breadcrumb extends React.Component<BreadcrumbProps, any> {
}
warning(
element.type && element.type.__ANT_BREADCRUMB_ITEM,
"Breadcrumb only accepts Breadcrumb.Item as it's children",
'Breadcrumb only accepts Breadcrumb.Item as it\'s children',
);
return cloneElement(element, {
separator,

View File

@@ -17,7 +17,10 @@ export default class BreadcrumbItem extends React.Component<BreadcrumbItemProps,
static propTypes = {
prefixCls: PropTypes.string,
separator: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
separator: PropTypes.oneOfType([
PropTypes.string,
PropTypes.element,
]),
href: PropTypes.string,
};
@@ -25,17 +28,9 @@ export default class BreadcrumbItem extends React.Component<BreadcrumbItemProps,
const { prefixCls, separator, children, ...restProps } = this.props;
let link;
if ('href' in this.props) {
link = (
<a className={`${prefixCls}-link`} {...restProps}>
{children}
</a>
);
link = <a className={`${prefixCls}-link`} {...restProps}>{children}</a>;
} else {
link = (
<span className={`${prefixCls}-link`} {...restProps}>
{children}
</span>
);
link = <span className={`${prefixCls}-link`} {...restProps}>{children}</span>;
}
if (children) {
return (

View File

@@ -19,11 +19,11 @@ describe('Breadcrumb', () => {
mount(
<Breadcrumb>
<MyCom />
</Breadcrumb>,
</Breadcrumb>
);
expect(errorSpy.mock.calls).toHaveLength(1);
expect(errorSpy.mock.calls[0][0]).toMatch(
"Breadcrumb only accepts Breadcrumb.Item as it's children",
'Breadcrumb only accepts Breadcrumb.Item as it\'s children'
);
});
@@ -34,7 +34,7 @@ describe('Breadcrumb', () => {
{null}
<Breadcrumb.Item>Home</Breadcrumb.Item>
{undefined}
</Breadcrumb>,
</Breadcrumb>
);
expect(errorSpy).not.toHaveBeenCalled();
expect(wrapper).toMatchSnapshot();
@@ -47,7 +47,7 @@ describe('Breadcrumb', () => {
<Breadcrumb.Item />
<Breadcrumb.Item>xxx</Breadcrumb.Item>
<Breadcrumb.Item>yyy</Breadcrumb.Item>
</Breadcrumb>,
</Breadcrumb>
);
expect(wrapper).toMatchSnapshot();
});

View File

@@ -22,22 +22,24 @@ const breadcrumbNameMap = {
'/apps/2/detail': 'Detail',
};
const Home = withRouter(props => {
const Home = withRouter((props) => {
const { location, history } = props;
const pathSnippets = location.pathname.split('/').filter(i => i);
const extraBreadcrumbItems = pathSnippets.map((_, index) => {
const url = `/${pathSnippets.slice(0, index + 1).join('/')}`;
return (
<Breadcrumb.Item key={url}>
<Link to={url}>{breadcrumbNameMap[url]}</Link>
<Link to={url}>
{breadcrumbNameMap[url]}
</Link>
</Breadcrumb.Item>
);
});
const breadcrumbItems = [
const breadcrumbItems = [(
<Breadcrumb.Item key="home">
<Link to="/">Home</Link>
</Breadcrumb.Item>,
].concat(extraBreadcrumbItems);
</Breadcrumb.Item>
)].concat(extraBreadcrumbItems);
return (
<div className="demo">
<div className="demo-nav">
@@ -48,7 +50,9 @@ const Home = withRouter(props => {
<Route path="/apps" component={Apps} />
<Route render={() => <span>Home Page</span>} />
</Switch>
<Breadcrumb>{breadcrumbItems}</Breadcrumb>
<Breadcrumb>
{breadcrumbItems}
</Breadcrumb>
</div>
);
});
@@ -66,94 +70,81 @@ describe('react router', () => {
const wrapper = mount(
<MemoryRouter initialEntries={['/']} initialIndex={0}>
<Home />
</MemoryRouter>,
</MemoryRouter>
);
expect(wrapper.find('BreadcrumbItem').length).toBe(1);
expect(
wrapper
.find('BreadcrumbItem .ant-breadcrumb-link')
.at(0)
.text(),
).toBe('Home');
wrapper
.find('.demo-nav a')
.at(1)
.simulate('click');
expect(wrapper.find('BreadcrumbItem .ant-breadcrumb-link').at(0).text()).toBe('Home');
wrapper.find('.demo-nav a').at(1).simulate('click');
expect(wrapper.find('BreadcrumbItem').length).toBe(2);
expect(
wrapper
.find('BreadcrumbItem .ant-breadcrumb-link')
.at(1)
.text(),
).toBe('Application List');
expect(wrapper.find('BreadcrumbItem .ant-breadcrumb-link').at(1).text()).toBe('Application List');
});
it('react router 3', () => {
const routes = [
{
name: 'home',
breadcrumbName: 'Home',
path: '/',
childRoutes: [
{
name: 'apps',
breadcrumbName: 'Application List',
path: 'apps',
childRoutes: [
{
name: 'app',
breadcrumbName: 'Application:id',
path: ':id',
childRoutes: [
{
name: 'detail',
breadcrumbName: 'Detail',
path: 'detail',
},
],
},
],
},
],
},
{
name: 'apps',
breadcrumbName: 'Application List',
path: 'apps',
childRoutes: [
{
name: 'app',
breadcrumbName: 'Application:id',
path: ':id',
childRoutes: [
{
name: 'detail',
breadcrumbName: 'Detail',
path: 'detail',
},
],
},
],
},
{
name: 'app',
breadcrumbName: 'Application:id',
path: ':id',
childRoutes: [
{
name: 'detail',
breadcrumbName: 'Detail',
path: 'detail',
},
],
},
{
name: 'detail',
breadcrumbName: 'Detail',
path: 'detail',
},
];
const wrapper = mount(<Breadcrumb routes={routes} params={{ id: 1 }} />);
const routes = [{
name: 'home',
breadcrumbName: 'Home',
path: '/',
childRoutes: [
{
name: 'apps',
breadcrumbName: 'Application List',
path: 'apps',
childRoutes: [
{
name: 'app',
breadcrumbName: 'Application:id',
path: ':id',
childRoutes: [
{
name: 'detail',
breadcrumbName: 'Detail',
path: 'detail',
},
],
},
],
},
],
},
{
name: 'apps',
breadcrumbName: 'Application List',
path: 'apps',
childRoutes: [
{
name: 'app',
breadcrumbName: 'Application:id',
path: ':id',
childRoutes: [
{
name: 'detail',
breadcrumbName: 'Detail',
path: 'detail',
},
],
},
],
},
{
name: 'app',
breadcrumbName: 'Application:id',
path: ':id',
childRoutes: [
{
name: 'detail',
breadcrumbName: 'Detail',
path: 'detail',
},
],
},
{
name: 'detail',
breadcrumbName: 'Detail',
path: 'detail',
}];
const wrapper = mount(
<Breadcrumb routes={routes} params={{ id: 1 }} />
);
expect(wrapper).toMatchSnapshot();
});
});

View File

@@ -23,6 +23,5 @@ ReactDOM.render(
<Breadcrumb.Item><a href="">Application List</a></Breadcrumb.Item>
<Breadcrumb.Item>An Application</Breadcrumb.Item>
</Breadcrumb>,
mountNode
);
mountNode);
````

View File

@@ -16,9 +16,7 @@ title:
Used together with `react-router@4` or other router.
````jsx
import {
HashRouter as Router, Route, Switch, Link, withRouter,
} from 'react-router-dom';
import { HashRouter as Router, Route, Switch, Link, withRouter } from 'react-router-dom';
import { Breadcrumb, Alert } from 'antd';
const Apps = () => (
@@ -79,8 +77,7 @@ ReactDOM.render(
<Router>
<Home />
</Router>,
mountNode
);
mountNode);
````
````css

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