mirror of
https://github.com/ant-design/ant-design.git
synced 2026-02-17 23:02:28 +08:00
Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
b413e4421c | ||
|
|
7433ecf14c |
9
.babelrc
9
.babelrc
@@ -1,10 +1,3 @@
|
||||
{
|
||||
"env": {
|
||||
"test": {
|
||||
"presets": ["es2015", "react", "stage-0"],
|
||||
"plugins": [
|
||||
"add-module-exports"
|
||||
]
|
||||
}
|
||||
}
|
||||
"presets": ["es2015", "react", "stage-0"]
|
||||
}
|
||||
|
||||
@@ -1,2 +0,0 @@
|
||||
codecov:
|
||||
branch: master
|
||||
@@ -1,6 +0,0 @@
|
||||
components/**/*.js
|
||||
components/**/*.jsx
|
||||
components/*/__tests__/type.tsx
|
||||
!.eslintrc.js
|
||||
!components/*/__tests__/**/*.js
|
||||
!components/*/demo/*
|
||||
12
.eslintrc.js
12
.eslintrc.js
@@ -3,7 +3,7 @@ const eslintrc = {
|
||||
env: {
|
||||
browser: true,
|
||||
node: true,
|
||||
jasmine: true,
|
||||
mocha: true,
|
||||
jest: true,
|
||||
es6: true,
|
||||
},
|
||||
@@ -27,25 +27,19 @@ const eslintrc = {
|
||||
'react/prop-types': 0,
|
||||
'react/jsx-first-prop-new-line': 0,
|
||||
'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx', '.md'] }],
|
||||
'import/extensions': 0,
|
||||
'import/no-unresolved': 0,
|
||||
'import/no-extraneous-dependencies': 0,
|
||||
'prefer-destructuring': 0,
|
||||
'no-param-reassign': 0,
|
||||
'no-return-assign': 0,
|
||||
'max-len': 0,
|
||||
'consistent-return': 0,
|
||||
'no-redeclare': 0,
|
||||
'react/require-extension': 0,
|
||||
'react/jsx-indent': 0,
|
||||
'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,
|
||||
},
|
||||
};
|
||||
|
||||
@@ -57,12 +51,12 @@ if (process.env.RUN_ENV === 'DEMO') {
|
||||
};
|
||||
|
||||
Object.assign(eslintrc.rules, {
|
||||
indent: 0,
|
||||
'no-console': 0,
|
||||
'no-plusplus': 0,
|
||||
'eol-last': 0,
|
||||
'prefer-rest-params': 0,
|
||||
'react/no-multi-comp': 0,
|
||||
'react/prefer-es6-class': 0,
|
||||
'jsx-a11y/href-no-hash': 0,
|
||||
'import/newline-after-import': 0,
|
||||
});
|
||||
|
||||
6
.github/CONTRIBUTING.md
vendored
6
.github/CONTRIBUTING.md
vendored
@@ -19,7 +19,7 @@ Tips: choose the corresponding documentation with versions selector which in the
|
||||
|
||||
### 2. Make sure that your question is about Ant Design, not React
|
||||
|
||||
Someone may think all of the questions that he/she meets in developing are about Ant Design, but it's not true. So, please read [React's documentation](http://facebook.github.io/react/docs/getting-started.html) or just Google (not Baidu, seriously) your questions with keyword *React* first. If you are sure that your question is about Ant Design, go ahead.
|
||||
Someone may think all of the questions that he/she meets in developing are about Ant Design, but it's not true. So, please read [React's documentaion](http://facebook.github.io/react/docs/getting-started.html) or just Google(not Baidu, seriously) your questions with keywork *React* first. If you are sure that your question is about Ant Design, go ahead.
|
||||
|
||||
### 3. Read the FAQ and search the issues list of Ant Design
|
||||
|
||||
@@ -48,11 +48,9 @@ If you believe that Ant Design should provide some features, but it does not. Yo
|
||||
|
||||
## Tips about Pull Request
|
||||
|
||||
**Working on your first Pull Request?** You can learn how from this *free* series [How to Contribute to an Open Source Project on GitHub](https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github)
|
||||
|
||||
It's welcomed to pull request. And there are some tips about that:
|
||||
|
||||
1. It is a good habit to create a feature request issue to discuss whether the feature is necessary before you implement it. However, it's unnecessary to create an issue to claim that you found a typo or improved the readability of documentation, just create a pull request.
|
||||
1. It is a good habit to create a feature request issue to disscuss whether the feature is necessary before you implement it. However, it's unnecessary to create an issue to claim that you found a typo or improved the readability of documentaion, just create a pull request.
|
||||
1. Run `npm run lint` and fix those errors before committing in order to keep consistent code style.
|
||||
1. Rebase before creating a PR to keep commit history clear.
|
||||
1. Add some descriptions and refer relative issues for you PR.
|
||||
|
||||
40
.github/ISSUE_TEMPLATE.md
vendored
40
.github/ISSUE_TEMPLATE.md
vendored
@@ -1,15 +1,35 @@
|
||||
<!--
|
||||
IMPORTANT: Please use the following link to create a new issue:
|
||||
|
||||
http://new-issue.ant.design
|
||||
|
||||
If your issue was not created using the app above, it will be closed immediately.
|
||||
-->
|
||||
<!-- Issue Template -->
|
||||
|
||||
<!--
|
||||
注意：请使用下面的链接来新建 issue：
|
||||
antd 的用法咨询，建议通过以下渠道，官方 issues 目前没有足够精力提供此类咨询服务：
|
||||
|
||||
http://new-issue.ant.design
|
||||
1. [Stack Overflow](http://stackoverflow.com/questions/tagged/antd)
|
||||
2. [Segment Fault](https://segmentfault.com/t/antd)（中文）
|
||||
3. [Gitter](https://gitter.im/ant-design/ant-design)
|
||||
|
||||
不是用上面的链接创建的 issue 会被立即关闭。
|
||||
如果是报告 bug，请按照下列格式书写，并务必提供复现步骤，否则恕难解决，感谢您的支持。
|
||||
-->
|
||||
|
||||
#### 发生问题的环境是：
|
||||
|
||||
<!-- 务必提供 -->
|
||||
|
||||
- antd 版本:
|
||||
- 操作系统及其版本:
|
||||
- 浏览器及其版本:
|
||||
|
||||
#### 您做了什么？请提供尽可能详细的重现步骤。
|
||||
|
||||
<!-- 如：引入 antd 了 Button -->
|
||||
|
||||
#### 您期待的结果是:
|
||||
|
||||
<!-- 如：像官网一样正常显示 -->
|
||||
|
||||
#### 实际上的结果是:
|
||||
|
||||
<!-- 如：样式错位了，最好提供截图 -->
|
||||
|
||||
#### 可重现的在线演示
|
||||
|
||||
<!-- 请修改并 Fork http://codepen.io/benjycui/pen/KgPZrE?editors=001 -->
|
||||
|
||||
20
.github/PULL_REQUEST_TEMPLATE.md
vendored
20
.github/PULL_REQUEST_TEMPLATE.md
vendored
@@ -1,22 +1,8 @@
|
||||
First of all, thank you for your contribution! :-)
|
||||
First of all, thanks for your contribution! :-)
|
||||
|
||||
Please makes sure that these checkboxes are checked before submitting your PR, thank you!
|
||||
Please makes sure these boxes are checked before submitting your PR, thank you!
|
||||
|
||||
* [ ] Make sure that you propose PR to right branch: bugfix for `master`, feature for latest active branch `feature-x.x`.
|
||||
* [ ] Make sure that you follow antd's [code convention](https://github.com/ant-design/ant-design/wiki/Code-convention-for-antd).
|
||||
* [ ] Make sure you follow antd's [code convention](https://github.com/ant-design/ant-design/wiki/Code-convention-for-antd).
|
||||
* [ ] Run `npm run lint` and fix those errors before submitting in order to keep consistent code style.
|
||||
* [ ] Rebase before creating a PR to keep commit history clear.
|
||||
* [ ] Add some descriptions and refer relative issues for you PR.
|
||||
|
||||
Extra checklist:
|
||||
|
||||
**if** *isBugFix* **:**
|
||||
|
||||
* [ ] Make sure that you add at least one unit test for the bug which you had fixed.
|
||||
|
||||
**elif** *isNewFeature* **:**
|
||||
|
||||
* [ ] Update API docs for the component.
|
||||
* [ ] Update/Add demo to demonstrate new feature.
|
||||
* [ ] Update TypeScript definition for the component.
|
||||
* [ ] Add unit tests for the feature.
|
||||
|
||||
10
.gitignore
vendored
10
.gitignore
vendored
@@ -15,7 +15,6 @@ Thumbs.db
|
||||
*.swp
|
||||
*.swo
|
||||
*.log
|
||||
*.log.*
|
||||
*.json.gzip
|
||||
node_modules/
|
||||
.buildpath
|
||||
@@ -26,15 +25,8 @@ _site
|
||||
_data
|
||||
dist
|
||||
/lib
|
||||
/es
|
||||
elasticsearch-*
|
||||
config/base.yaml
|
||||
/.vscode/
|
||||
/coverage
|
||||
yarn.lock
|
||||
package-lock.json
|
||||
components/**/*.js
|
||||
components/**/*.jsx
|
||||
!components/**/__tests__/*.js
|
||||
!components/**/__tests__/*.js.snap
|
||||
/.history
|
||||
/.vscode/
|
||||
|
||||
50
.jest.js
50
.jest.js
@@ -1,50 +0,0 @@
|
||||
const libDir = process.env.LIB_DIR;
|
||||
|
||||
const transformIgnorePatterns = [
|
||||
'/dist/',
|
||||
'node_modules\/[^/]+?\/(?!(es|node_modules)\/)', // Ignore modules without es dir
|
||||
];
|
||||
|
||||
module.exports = {
|
||||
setupFiles: [
|
||||
'./tests/setup.js',
|
||||
],
|
||||
moduleFileExtensions: [
|
||||
'ts',
|
||||
'tsx',
|
||||
'js',
|
||||
'jsx',
|
||||
'json',
|
||||
'md',
|
||||
],
|
||||
modulePathIgnorePatterns: [
|
||||
'/_site/',
|
||||
],
|
||||
testPathIgnorePatterns: [
|
||||
'/node_modules/',
|
||||
'dekko',
|
||||
'node',
|
||||
],
|
||||
transform: {
|
||||
'\\.tsx?$': './node_modules/antd-tools/lib/jest/codePreprocessor',
|
||||
'\\.js$': './node_modules/antd-tools/lib/jest/codePreprocessor',
|
||||
'\\.md$': './node_modules/antd-tools/lib/jest/demoPreprocessor',
|
||||
},
|
||||
testRegex: libDir === 'dist' ? 'demo\\.test\\.js$' : '.*\\.test\\.js$',
|
||||
collectCoverageFrom: [
|
||||
'components/**/*.{ts,tsx}',
|
||||
'!components/*/style/index.tsx',
|
||||
'!components/style/index.tsx',
|
||||
'!components/*/locale/index.tsx',
|
||||
'!components/*/__tests__/**/type.tsx',
|
||||
],
|
||||
transformIgnorePatterns,
|
||||
snapshotSerializers: [
|
||||
'enzyme-to-json/serializer',
|
||||
],
|
||||
globals: {
|
||||
'ts-jest': {
|
||||
tsConfigFile: './tsconfig.test.json',
|
||||
}
|
||||
},
|
||||
};
|
||||
@@ -1,26 +0,0 @@
|
||||
module.exports = {
|
||||
setupFiles: [
|
||||
'./tests/setup.js',
|
||||
],
|
||||
moduleFileExtensions: [
|
||||
'ts',
|
||||
'tsx',
|
||||
'js',
|
||||
'md',
|
||||
],
|
||||
transform: {
|
||||
'\\.tsx?$': './node_modules/antd-tools/lib/jest/codePreprocessor',
|
||||
'\\.js$': './node_modules/antd-tools/lib/jest/codePreprocessor',
|
||||
'\\.md$': './node_modules/antd-tools/lib/jest/demoPreprocessor',
|
||||
},
|
||||
testRegex: 'demo\\.test\\.js$',
|
||||
testEnvironment: 'node',
|
||||
snapshotSerializers: [
|
||||
'enzyme-to-json/serializer'
|
||||
],
|
||||
globals: {
|
||||
'ts-jest': {
|
||||
tsConfigFile: './tsconfig.test.json',
|
||||
}
|
||||
},
|
||||
};
|
||||
21
.lesshintrc
Normal file
21
.lesshintrc
Normal file
@@ -0,0 +1,21 @@
|
||||
{
|
||||
"propertyOrdering": false,
|
||||
"hexLength": "short",
|
||||
"stringQuotes": false,
|
||||
"decimalZero": false,
|
||||
"importantRule": false,
|
||||
"zeroUnit": "no_unit",
|
||||
"qualifyingElement": false,
|
||||
"duplicateProperty": false,
|
||||
"importPath": false,
|
||||
"finalNewline": false,
|
||||
"newlineAfterBlock": false,
|
||||
"maxCharPerLine": false,
|
||||
"excludedFiles": [
|
||||
"components/grid/style/mixin.less",
|
||||
"components/style/core/base.less",
|
||||
"components/style/core/iconfont.less",
|
||||
"components/style/core/normalize.less",
|
||||
"components/style/mixins/compatibility.less"
|
||||
]
|
||||
}
|
||||
23
.stylelintrc
23
.stylelintrc
@@ -1,23 +0,0 @@
|
||||
{
|
||||
"extends": "stylelint-config-standard",
|
||||
"rules": {
|
||||
"comment-empty-line-before": null,
|
||||
"declaration-empty-line-before": null,
|
||||
"function-comma-newline-after": null,
|
||||
"function-name-case": null,
|
||||
"function-parentheses-newline-inside": null,
|
||||
"function-max-empty-lines": null,
|
||||
"function-whitespace-after": null,
|
||||
"indentation": null,
|
||||
"number-leading-zero": null,
|
||||
"number-no-trailing-zeros": null,
|
||||
"rule-empty-line-before": null,
|
||||
"selector-combinator-space-after": null,
|
||||
"selector-list-comma-newline-after": null,
|
||||
"selector-pseudo-element-colon-notation": null,
|
||||
"unit-no-unknown": null,
|
||||
"value-list-max-empty-lines": null,
|
||||
"font-family-no-missing-generic-family-keyword": null,
|
||||
"no-descending-specificity": null
|
||||
}
|
||||
}
|
||||
24
.travis.yml
24
.travis.yml
@@ -3,26 +3,4 @@ sudo: false
|
||||
language: node_js
|
||||
|
||||
node_js:
|
||||
- 8
|
||||
|
||||
matrix:
|
||||
fast_finish: true
|
||||
include:
|
||||
- env: TEST_TYPE=lint
|
||||
- env: REACT=16 TEST_TYPE=test:dist
|
||||
- env: REACT=16 TEST_TYPE=test:lib
|
||||
- env: REACT=16 TEST_TYPE=test:es
|
||||
- env: REACT=16 TEST_TYPE=test:dom
|
||||
- env: REACT=16 TEST_TYPE=test:node
|
||||
- env: REACT=15 TEST_TYPE=test:dist
|
||||
- env: REACT=15 TEST_TYPE=test:lib
|
||||
- env: REACT=15 TEST_TYPE=test:es
|
||||
- env: REACT=15 TEST_TYPE=test:dom
|
||||
- env: REACT=15 TEST_TYPE=test:node
|
||||
- env: REACT=16 TEST_TYPE=bisheng:build
|
||||
|
||||
before_script:
|
||||
- scripts/install-react.sh
|
||||
|
||||
script:
|
||||
- scripts/travis-script.sh
|
||||
- "6"
|
||||
|
||||
179
AUTHORS.txt
179
AUTHORS.txt
@@ -1,280 +1,107 @@
|
||||
Aaron Planell López <aaronplanell@gmail.com>
|
||||
Adrian Dimitrov <dimitrov.adrian@gmail.com>
|
||||
Albert Zheng <lisong.zheng@gmail.com>
|
||||
Albert 理斯特 <shuaizhexu@gmail.com>
|
||||
Alexander <labriko@yandex.ru>
|
||||
Alexandre Kirszenberg <a.kirszenberg@gmail.com>
|
||||
Anas Tawfeek <anas.tawfeek@outlook.com>
|
||||
Andrew Murray <radarhere@gmail.com>
|
||||
Andrey G <plandem@gmail.com>
|
||||
Arthur Denner Oliveira Santos <arthurdenner7@gmail.com>
|
||||
BK Heleth <bon.hoo@hotmail.com>
|
||||
Babajide Fowotade <jide.b.tade@gmail.com>
|
||||
Benjamin Kniffler <bkniffler@me.com>
|
||||
Benjy Cui <benjytrys@gmail.com>
|
||||
Bernie <bernie.wangbj@gmail.com>
|
||||
Bill Sheikh <bilawals22@gmail.com>
|
||||
Bo Chen <bochen2014@yahoo.com>
|
||||
Bozhao <yubz86@gmail.com>
|
||||
Brett Lamy <bel423@me.com>
|
||||
Brook Shi <iwxiaot@gmail.com>
|
||||
Bruce Mitchener <bruce.mitchener@gmail.com>
|
||||
Bruno Maia <bruno.mm.maia@gmail.com>
|
||||
C <4019980@qq.com>
|
||||
Cam Song <neosoyn@gmail.com>
|
||||
Catalin Miron <mironcatalin@gmail.com>
|
||||
Cee Cirno <i@cee.moe>
|
||||
Chikara Chan <chenhongtu@51xianqu.net>
|
||||
Chris Kelly <cjke.7777@gmail.com>
|
||||
ChrisFan <chris.fan.dev@gmail.com>
|
||||
Cody Chan <int64ago@gmail.com>
|
||||
Colton Pierson <colton@coltonpierson.com>
|
||||
Conway Anderson <hello@conwayanderson.com>
|
||||
Cordaro <elvis07@163.com>
|
||||
D & R <jdz321@qq.com>
|
||||
Damian Green <damian.green@microlease.com>
|
||||
Danny Hoower Antonio Viasus Avila <danjavia@gmail.com>
|
||||
Daqi Song <dqaria@gmail.com>
|
||||
Darren Poon <dyhpoon@gmail.com>
|
||||
DengYun <tdzl2003@gmail.com>
|
||||
Dorian <dorian@doma.io>
|
||||
Edd Hannay <accounts@edd.fm>
|
||||
Eddie Xie <oeddyo@gmail.com>
|
||||
Eden Wang <yociduo@vip.qq.com>
|
||||
Egor Yurtaev <yurtaev.egor@gmail.com>
|
||||
Emma <sima.zhang1990@gmail.com>
|
||||
Eric <84263800@qq.com>
|
||||
Erwann Mest <m+github@kud.io>
|
||||
Evgeny Kuznetsov <jackk@ya.ru>
|
||||
Eward Song <eward.song@gmail.com>
|
||||
Graeme Yeates <gyeates@clearpath.ai>
|
||||
Graeme Yeates <yeatesgraeme@gmail.com>
|
||||
Gray Choi <gray.choi.1988@gmail.com>
|
||||
Guan Hao <raptium@gmail.com>
|
||||
HJin.me <hjin.me@gmail.com>
|
||||
Hai Phan Nguyen <pnghai@gmail.com>
|
||||
Haibin Yu <haibin.yu@oceanwing.com>
|
||||
Hanai <ihanai1991@gmail.com>
|
||||
Haroen Viaene <fingebimus@me.com>
|
||||
Harshit Mehrotra <harshitmehrotra@hotmail.com>
|
||||
Hubert Argasinski <argasinski.hubert@gmail.com>
|
||||
Hugo LEHMANN <shogi31@gmail.com>
|
||||
Igor G <i.gaidai4uk@gmail.com>
|
||||
ImJoeHs <865439601@qq.com>
|
||||
Inclined.Z <zjq0717@163.com>
|
||||
Infinity <305870677@qq.com>
|
||||
Ivo Stratev <ivo.stratev.tues@gmail.com>
|
||||
James <james@schoolshape.com>
|
||||
Jerry Bendy <jerry@icewingcc.com>
|
||||
Jesper We <jesper@journeyman.se>
|
||||
Jialei <jialeicui@126.com>
|
||||
Jieraaa <842533841@qq.com>
|
||||
Joe <qiaolibo@126.com>
|
||||
Joe Hsu <jhsu.x1@gmail.com>
|
||||
Jonatas Walker <jonataswalker@gmail.com>
|
||||
Jordan Hornblow <jordan@jch254.com>
|
||||
Junyu Zhan <irrigator@yeah.net>
|
||||
Kenaniah Cerny <kenaniah@gmail.com>
|
||||
Kenneth Truong <kenneth.e.truong@gmail.com>
|
||||
Kevin Ivan <info@kevinivan.com>
|
||||
KgTong <kgtong1992@gmail.com>
|
||||
Kimmo Saari <kimmo.saari@revolt.fi>
|
||||
Knacktus <knacktus@gmail.com>
|
||||
Kyle Rosenberg <kyle.rosenberg@gmail.com>
|
||||
Larry Laski <larry.laski@gmail.com>
|
||||
LeeHarlan <709886167@qq.com>
|
||||
Leo <clinyong@gmail.com>
|
||||
Leon Shi <superRaytin@163.com>
|
||||
Leon Shi <superRaytin@gmail.com>
|
||||
Liu Yang <zation1@gmail.com>
|
||||
LongYinan <lynweklm@gmail.com>
|
||||
MG12 <wuzhao.mail@gmail.com>
|
||||
Ma Tianxiao <matx2215@outlook.com>
|
||||
Madis Väin <madisvain@gmail.com>
|
||||
Manjit Kumar <manjit1727@gmail.com>
|
||||
Marius Ileana <visvadw@gmail.com>
|
||||
Marshall Chen <Juniors.fei@gmail.com>
|
||||
Martin Litvaj <kamahl19@gmail.com>
|
||||
Martin Novák <martinnovak@outlook.com>
|
||||
Meck <yesmeck@gmail.com>
|
||||
MeiLin <postget.me@gmail.com>
|
||||
Min <dicklwm@163.com>
|
||||
Minqi Pan <pmq2001@gmail.com>
|
||||
Minsung Ryu <ryums0227@gmail.com>
|
||||
Mitchell Demler <mitchell.demler@harcourts.net>
|
||||
Mr.Tone <vector@malubei.com>
|
||||
Nathan Tavares Nascimento <nathan.tnascimento@gmail.com>
|
||||
Nathan Wells <nwwells@gmail.com>
|
||||
Neverland <chenjiahan@buaa.edu.cn>
|
||||
Nico <nicolas@freddelacompta.com>
|
||||
Nimo <nimo.jser@gmail.com>
|
||||
Nishant Arora <na.nishantarora@gmail.com>
|
||||
OAwan <georgio.wan@gmail.com>
|
||||
Panjie Setiawan Wicaksono <panjie@panjiesw.com>
|
||||
Patrick Gidich <patrick.gidich@simnova.com>
|
||||
Patryk <longer44@gmail.com>
|
||||
Peter Berg <atticusberg@gmail.com>
|
||||
Pierre <pierre@bazoge.com>
|
||||
Piper Chester <piperchester@gmail.com>
|
||||
Pixy Yuan <pixy.bupt@gmail.com>
|
||||
Pyiner <lijiuyang1992@gmail.com>
|
||||
Qiaosen Huang <joesonw@gmail.com>
|
||||
Qingrong Ke <keqingrong1992@gmail.com>
|
||||
Rafael Cosman <rafaelcosman@alumni.stanford.edu>
|
||||
RaoHai <surgesoft@gmail.com>
|
||||
Rex <zhangzilong.zzl@163.com>
|
||||
Richard D. Worth <rdworth@gmail.com>
|
||||
Robert Wilkinson <wilkinson.robert.a@gmail.com>
|
||||
Rrrandom <emanonhere@gmail.com>
|
||||
Sakol Assawasagool <koobitor@gmail.com>
|
||||
Sanjay Kumar <sk@tectusdreamlab.com>
|
||||
Sean Lin <sean@ejoy.com>
|
||||
Sean Sun <pinggodstudio@gmail.com>
|
||||
Sebastian Blade <blade254353074@hotmail.com>
|
||||
Sergio Crisostomo <sergiosbox@gmail.com>
|
||||
Shawn Sit <xueqingxiao@gmail.com>
|
||||
ShiTengFei <shitengfei@goyoo.com>
|
||||
SimaQ <sima.zhang1990@gmail.com>
|
||||
Tao Zhang <windse7en@gmail.com>
|
||||
The Rock <zhoguoxin@126.com>
|
||||
Tino D <ginodeis@gmail.com>
|
||||
Tyler <chaotyler@gmail.com>
|
||||
Vadim Macagon <vadim.macagon@gmail.com>
|
||||
Valentin Vichnal <valentin@vichnal.com>
|
||||
Vemund Santi <veund@santi.no>
|
||||
Vincent Zhang <vxzhong@qq.com>
|
||||
Walter Barbagallo <turbometalskater@gmail.com>
|
||||
Warren Seymour <warren@fountainhead.tech>
|
||||
Wei Zhu <yesmeck@gmail.com>
|
||||
Will Chen <willchen90@gmail.com>
|
||||
Xie Guanglei <xieguanglei@hotmail.com>
|
||||
Yiming <ymjrcc@qq.com>
|
||||
Yogesh <yogeshkumar180592@gmail.com>
|
||||
Yusuke Ito <novi.mad@gmail.com>
|
||||
Yuwei Ba <i@xiaoba.me>
|
||||
YuyingWu <wuyuying1128@gmail.com>
|
||||
Zack Craig <zack@zack6849.com>
|
||||
Zap <a124116186@qq.com>
|
||||
afc163 <afc163@gmail.com>
|
||||
ashishg-qburst <ashishg@qburst.com>
|
||||
bang <sqibang@gmail.com>
|
||||
bang88 <sqibang@gmail.com>
|
||||
blankzust <450811238@qq.com>
|
||||
caoyi <caoyi0905@mail.hfut.edu.cn>
|
||||
cathayandy <wzm_andy@126.com>
|
||||
chchen <cc272309126@gmail.com>
|
||||
chencheng (云谦) <sorrycc@gmail.com>
|
||||
clinyong <clinyong@gmail.com>
|
||||
corneyl <cornieljoosse@gmail.com>
|
||||
ddcat1115 <ddcat1115@gmail.com>
|
||||
denzw <denzw@21cn.com>
|
||||
detailyang <detailyang@gmail.com>
|
||||
devqin <devqin@gmail.com>
|
||||
djorkaeff <djorkae55@gmail.com>
|
||||
duzliang <duzliang@gmail.com>
|
||||
ecofe <150641329@qq.com>
|
||||
edgji <j.edgji@gmail.com>
|
||||
elios <elios264@hotmail.com>
|
||||
elrrrrrrr <elrrrrrrr@gmail.com>
|
||||
ezpub <ez.foro@gmail.com>
|
||||
feng zhi hao <fzhihao@outlook.com>
|
||||
fengmk2 <m@fengmk2.com>
|
||||
flashback313 <windmark2012@gmail.com>
|
||||
genie <genie88@163.com>
|
||||
handycode <lihandi@gmail.com>
|
||||
hansnow <hansnow2012@gmail.com>
|
||||
haoxin <coderhaoxin@outlook.com>
|
||||
hardfist <yangjianzju@gmail.com>
|
||||
hi-caicai <hi@cai-cai.me>
|
||||
iamcastelli <sowed@cyberdude.com>
|
||||
ioldfish <fish.wangl@gmail.com>
|
||||
jasonslyvia <jasonslyvia@gmail.com>
|
||||
jiang <155259966@qq.com>
|
||||
jinouwuque <ee2win@gmail.com>
|
||||
kacjay <45483388@qq.com>
|
||||
kagawagao <kingsongao1221@gmail.com>
|
||||
kaifei <150641329@qq.com>
|
||||
kasinooya <kasinooya@gmail.com>
|
||||
kayw <kayw@outlook.com>
|
||||
kdenz <ksnz93@gmail.com>
|
||||
keng <keng@renderinghouse.com>
|
||||
ko <git@yaksok.net>
|
||||
kossel <lis.yichao@gmail.com>
|
||||
kun sam <kunsam624@icloud.com>
|
||||
leadream <857098475@qq.com>
|
||||
lehug <zcszuo5811@126.com>
|
||||
leon.shi <superRaytin@163.com>
|
||||
lgmcolin <gengmin.lgm@gmail.com>
|
||||
lgmcolin <lgmcolin@gmail.com>
|
||||
liekkas <zjq0717@163.com>
|
||||
lixiaochou077 <qi.liqi07@gmail.com>
|
||||
lixiaoyang <lixiaoyang2345@gmail.com>
|
||||
lizhaocai <lzc09008@gmail.com>
|
||||
loganpowell <loganp@tepper.cmu.edu>
|
||||
mArker <252133226@qq.com>
|
||||
mitchell.demler <mitchell.demler@harcourts.net>
|
||||
muzuiget <muzuiget@gmail.com>
|
||||
natergj <nater_nater@me.com>
|
||||
paranoidjk <hust2012jiangkai@gmail.com>
|
||||
parlop <parlop@gmail.com>
|
||||
pd4d10 <pd4d10@gmail.com>
|
||||
peiming <hyrijk@gmail.com>
|
||||
pinggod <pinggodstudio@gmail.com>
|
||||
pizn <pizner@gmail.com>
|
||||
plandem <plandem@gmail.com>
|
||||
popomore <sakura9515@gmail.com>
|
||||
qubaoming <qubaoming@didichuxing.com>
|
||||
ryangun <ryangun@foxmail.com>
|
||||
sadmark <zhoubin@laidian360.com>
|
||||
shelwin <wxfans@gmail.com>
|
||||
shenlin192@gmail.com <shenlin192@gmail.com>
|
||||
shlice <licesh@gmail.com>
|
||||
shouyong <enlangs@163.com>
|
||||
simaQ <sima.zhang1990@gmail.com>
|
||||
slientcloud <rjmuqiang@gmail.com>
|
||||
snadn <snadn@snadn.cn>
|
||||
sojournerc <cmeyer@zvelo.com>
|
||||
sorrycc <sorrycc@gmail.com>
|
||||
swindme <swindme@163.com>
|
||||
tianli.zhao <275287902@qq.com>
|
||||
tom <caolvchong@gmail.com>
|
||||
ustccjw <317713370@qq.com>
|
||||
wangtao0101 <yuecjn@gmail.com>
|
||||
warmhug <hualei5280@gmail.com>
|
||||
whtang906 <whtang906@gmail.com>
|
||||
wizawu <wizawu@gmail.com>
|
||||
wonyun <wy393767068@163.com>
|
||||
xiaofan2406 <xiaofan2406@gmail.com>
|
||||
yeliex <yeliex@yeliex.com>
|
||||
yiminghe <yiminghe@gmail.com>
|
||||
yubozhao <yubz86@gmail.com>
|
||||
yuche <i@yuche.me>
|
||||
z <haig8@msn.com>
|
||||
zack <zxyah@126.com>
|
||||
zerob4wl <zerob4wl@gmail.com>
|
||||
zhangpc <zhangpc@tenxcloud.com>
|
||||
zhaocai <lzc09008@gmail.com>
|
||||
zhujun24 <zhujun87654321@gmail.com>
|
||||
zilong <jzlxiaohei@163.com>
|
||||
zinkey <yaya@uloveit.com.cn>
|
||||
zollero <corona7@163.com>
|
||||
zuiidea <zuiiidea@gmail.com>
|
||||
一喵呜 <hyb628@gmail.com>
|
||||
乔奕轩 <qiao_yixuan@163.com>
|
||||
低位 <zhujun87654321@gmail.com>
|
||||
偏右 <afc163@gmail.com>
|
||||
可乐 <zaxlct@foxmail.com>
|
||||
吕立青 <jimmy.jinglv@gmail.com>
|
||||
广彬-梁 <326741518@qq.com>
|
||||
柚子男 <yozman@sina.com>
|
||||
白羊座小葛 <abeyuhang@gmail.com>
|
||||
英布 <chaoren1641@gmail.com>
|
||||
蔡伦 <sliuqin@gmail.com>
|
||||
逸达 <dqaria@gmail.com>
|
||||
邦 <sqibang@gmail.com>
|
||||
闲耘™ <hotoo.cn@gmail.com>
|
||||
陆离 <surgesoft@gmail.com>
|
||||
陈帅 <wasd2144@hotmail.com>
|
||||
马斯特 <sd4399340@126.com>
|
||||
马金花儿 <o.o@mug.dog>
|
||||
黄子毅 <576625322@qq.com>
|
||||
低位 <zhujun87654321@gmail.com>
|
||||
闲耘™ <hotoo.cn@gmail.com>
|
||||
白羊座小葛 <abeyuhang@gmail.com>
|
||||
|
||||
@@ -1,216 +1,319 @@
|
||||
---
|
||||
order: 6
|
||||
order: 3
|
||||
title: Change Log
|
||||
toc: false
|
||||
timeline: true
|
||||
---
|
||||
|
||||
`antd` strictly follows [Semantic Versioning 2.0.0](http://semver.org/).
|
||||
|
||||
#### Release Schedule
|
||||
|
||||
* Weekly release: patch version at the end of every week for routine bugfix (anytime for urgent bugfix).
|
||||
* Monthly release: minor version at the end of every month for new features.
|
||||
* Major version release is not included in this schedule for breadking change and new features.
|
||||
If you want to read change logs before `2.0.0`, please visit [GitHub](https://github.com/ant-design/ant-design/releases?after=2.0.0).
|
||||
|
||||
---
|
||||
|
||||
## 3.0.1
|
||||
## 2.4.0
|
||||
|
||||
`2017-12-11`
|
||||
* Adjust components structure.
|
||||
* New [Anchor](https://ant.design/components/anchor) Component.
|
||||
* Fix less variables `@font-size-base` and `@text-color`, add `@font-size-lg` `@text-color-secondary`.
|
||||
* Add new props `selectedKeys` for `Transfer` component [#3729]. (https://github.com/ant-design/ant-design/issues/3729)
|
||||
* Add `Tag` selected status.
|
||||
* Fix `Dropdown.Button` not support `visible` and `onVisibleChange`. [#3779](https://github.com/ant-design/ant-design/issues/3779)
|
||||
* Fix `Now` button of `DatePicker[showTime]`. [#3748](https://github.com/ant-design/ant-design/issues/3748)
|
||||
* Fix style of `Steps` in vertical mode. [#3760](https://github.com/ant-design/ant-design/issues/3760)
|
||||
* Fix style compatibility of `Spin` in IE10+.[#3755](https://github.com/ant-design/ant-design/issues/3755)
|
||||
* Fix default style of `Carousel` component.
|
||||
* Fix focus logic of `Mention` component. [#3801](https://github.com/ant-design/ant-design/issues/3801)
|
||||
* Fix animate bug of `Progress` component. [#3784](https://github.com/ant-design/ant-design/issues/3784)
|
||||
* Fix focus bug of `Select` component. [#3778](https://github.com/ant-design/ant-design/issues/3778)
|
||||
* Fix `TimePicker` not support `format="HH"` bug. [#3793](https://github.com/ant-design/ant-design/issues/3793)
|
||||
* Improve perfermance of `Table` selection. [#3757](https://github.com/ant-design/ant-design/pull/3757)
|
||||
* Improve Carousel default UI style.
|
||||
* Improve style of `Checkbox` and `Radio`. [#3590](https://github.com/ant-design/ant-design/issues/3590)
|
||||
* Fix style of DatePickek, Form, Table.
|
||||
|
||||
* Remove useless DOM wrapper of Card, so that Card's DOM structure will be the same as Card of 2.x.
|
||||
* Fix that missing `antd/lib/style/v2-compatible-reset.css`. [28d13e2](https://github.com/ant-design/ant-design/commit/28d13e2539817f87b8a2029ea22d9c30b377167f)
|
||||
* Fix that Affix will be overlap when it is heigher than viewport. [31a0654](https://github.com/ant-design/ant-design/commit/31a0654ef990eb7bae2b18095fa0d5230b9be1da)
|
||||
* Fix the open animation of Collapse. [edd592c](https://github.com/ant-design/ant-design/commit/edd592cb9dd79d534853e7a0c1b648382e3f1a12)
|
||||
* Fix the aligment of large size Input and Button in Form. [#8459](https://github.com/ant-design/ant-design/issues/8459)
|
||||
## 2.3.2
|
||||
|
||||
`2016-11-09`
|
||||
|
||||
* Fix dead loop while using `getFieldProps`.
|
||||
|
||||
## 2.3.1
|
||||
|
||||
`2016-11-07`
|
||||
|
||||
* Add missing `dist/antd.css` back.
|
||||
|
||||
## 2.3.0
|
||||
|
||||
`2016-11-04`
|
||||
|
||||
* Upgrade normalize.css to 5.0.
|
||||
* Point main file to `lib/index.js` in package.json. [#3397](https://github.com/ant-design/ant-design/pull/3397)
|
||||
* A brand new `Spin` design.
|
||||
* Add `addon` for `TimePicker` to allow render some addon to its bottom.
|
||||
* Add `onDragEnd` for `Tree`.
|
||||
* Add `bordered` for `Collapse`.
|
||||
* Improve `Tabs` switch animation.
|
||||
* Improve `Radio` and `Checkbox` style when it's disabled and mouse hovered. [#3590](https://github.com/ant-design/ant-design/issues/3590)
|
||||
* Opitimize `Transfer` performance.[#2860](https://github.com/ant-design/ant-design/issues/2860)
|
||||
* Fix nested `Popover` style issue. [#3448](https://github.com/ant-design/ant-design/issues/3448)
|
||||
* Fix issue resulting in server side render `Transfer` failed. [#3686](https://github.com/ant-design/ant-design/issues/3686)
|
||||
* Fix issue resulting in preview image not display when `Upload` in `picture-card` mode. [#3706](https://github.com/ant-design/ant-design/pull/3706) [@denzw](https://github.com/denzw)
|
||||
* DatePicker
|
||||
* `onChange` will be triggered when `DatePicker` in `showTime` mode on blur now.
|
||||
* Add `monthCellContentRender` and `cellContentRender` for `MonthPicker`.
|
||||
* `Rangepicker` can input time manually now.[#3718](https://github.com/ant-design/ant-design/issues/3718)
|
||||
* Add czech locale/translations.
|
||||
* Badge
|
||||
* Improve number over 99 displaying when mouse hovering. [#3645](https://github.com/ant-design/ant-design/issues/3645)
|
||||
* Fix moving animation when using `Badge` alone. [#3709](https://github.com/ant-design/ant-design/issues/3709)
|
||||
* Mention
|
||||
* Fix issue resulting in `Mention` will be covered by `Table`. [#3588](https://github.com/ant-design/ant-design/issues/3588)
|
||||
* Add `getSuggestionContainer` to allow specify container. [#3658](https://github.com/ant-design/ant-design/pull/3658)
|
||||
* Tag
|
||||
* Deprecate `color`. [#3560](https://github.com/ant-design/ant-design/issues/3560)
|
||||
* Add `type`. [#3560](https://github.com/ant-design/ant-design/issues/3560)
|
||||
* Add `checkable`. [#3560](https://github.com/ant-design/ant-design/issues/3560)
|
||||
* Radio.Group
|
||||
* Add `className`。
|
||||
* `null` or `undefined` `children` will be ignored.
|
||||
* Select
|
||||
* Add `tokenSeparators` to supoort automatic tokenization。[#2071](https://github.com/ant-design/ant-design/issues/2071)
|
||||
* Add `onFocus` callback. [#3587](https://github.com/ant-design/ant-design/issues/3587)
|
||||
* Fix issue resulting in Select can't display correct selected item text in `combobox` mode. [#3401](https://github.com/ant-design/ant-design/issues/3401)
|
||||
|
||||
## 2.2.1
|
||||
|
||||
`2016-11-02`
|
||||
|
||||
* Fix controlled DatePicker[showTime] not working bug. [#3665](https://github.com/ant-design/ant-design/issues/3665)
|
||||
|
||||
## 2.2.0
|
||||
|
||||
`2016-10-28`
|
||||
|
||||
* Supports TypeScript@2.0. [@AlbertZheng](https://github.com/AlbertZheng) [#3358](https://github.com/ant-design/ant-design/issues/3358)
|
||||
* Not rely on specific version of React now. [#3627](https://github.com/ant-design/ant-design/pull/3627)
|
||||
* Alert supports `className` `style`.
|
||||
* DatePicker & MonthPicker & RangePicker allow developers to set whether to show the clear button. [#3618](https://github.com/ant-design/ant-design/issues/3618)
|
||||
* Form.Item can generate `validateStatus` & `help` for nested form control automatically. [#3212](https://github.com/ant-design/ant-design/issues/3212)
|
||||
* RangePicker can set some hours or minutes or seconds to be not selectable. [#](https://ant.design/components/date-picker/#components-date-picker-demo-disabled-date)
|
||||
* Switch
|
||||
* The width of Switch will resize automatically, according to `checkedChildren/unCheckedChildren`. [#3380](https://github.com/ant-design/ant-design/issues/3380)
|
||||
* Improve the switch animation.
|
||||
* Upload can [customized request](https://github.com/react-component/upload#customrequest) now. [@edgji](https://github.com/edgji)
|
||||
* Icon
|
||||
* New icons `bulb` `select` `like-o` `dislike-o`.
|
||||
* Adjust existing icons `loading` `like` `dislike`.
|
||||
* Improve the TypeScript definition of Card & DatePicker & Icon & Table. [@infeng](https://github.com/infeng) [3468](https://github.com/ant-design/ant-design/pull/3468) [#3603](https://github.com/ant-design/ant-design/pull/3603) [#3531](https://github.com/ant-design/ant-design/pull/3531)
|
||||
* Fix Cascader `defaultValue` should work. [#3470](https://github.com/ant-design/ant-design/issues/3470)
|
||||
* Fix the alignment of Button & Input & DatePicker & Select. [#3481](https://github.com/ant-design/ant-design/issues/3481)
|
||||
* DatePicker
|
||||
* Fix wrong timing of triggering `onChange` while `DatePicker[showTime]` is set. [#3523](https://github.com/ant-design/ant-design/issues/3523)
|
||||
* Fix `Dropdown.Button[disabled]` doesn't works for behaviour. [#3535](https://github.com/ant-design/ant-design/issues/3535)
|
||||
* Menu
|
||||
* Fix the popup will disappear unexpectly in Safari. [#8453](https://github.com/ant-design/ant-design/issues/8453)
|
||||
* Fix the open animation. [edd592c](https://github.com/ant-design/ant-design/commit/edd592cb9dd79d534853e7a0c1b648382e3f1a12)
|
||||
* Fix compile error of style of Notification. [#8437](https://github.com/ant-design/ant-design/issues/8437)
|
||||
* Fix the background color of mini Pagination. [e13c6d8](https://github.com/ant-design/ant-design/commit/e13c6d87fa6bf7d5cf4b2d5154a85b4793997de5)
|
||||
* Fix errors in SSR, thanks to [@xpcode](https://github.com/xpcode) to find the solution. [#2061](https://github.com/ant-design/ant-design/issues/2061) [#2406](https://github.com/ant-design/ant-design/issues/2406) [#3293](https://github.com/ant-design/ant-design/issues/3293)
|
||||
* Fix children don't support `null`. [#3599](https://github.com/ant-design/ant-design/issues/3599)
|
||||
* Fix loading status animation for message.[#3536](https://github.com/ant-design/ant-design/issues/3536)
|
||||
* Form
|
||||
* Fix style issue while using `Form[inline]` and `Input[addonBefore|addonAfter]` together. [#3524](https://github.com/ant-design/ant-design/issues/3524)
|
||||
* Fix style issue for Radio.Button in Form.Item.
|
||||
* Fix style issue for search button in Form.Item. [#3630](https://github.com/ant-design/ant-design/issues/3630)
|
||||
* Fix Form.Item should not treat no user input as validate success. [#3613](https://github.com/ant-design/ant-design/issues/3613)
|
||||
* Should not limit the min width of Popover while `Popover[title]` is not set.
|
||||
* Table
|
||||
* Fix broken style in mobile. [#8465](https://github.com/ant-design/ant-design/issues/8465)
|
||||
* Fix broken style when use size and nested Table together. [#8525](https://github.com/ant-design/ant-design/issues/8525)
|
||||
* TypeScript
|
||||
* Fix TypeScript definition of AutoComplete. [#8383](https://github.com/ant-design/ant-design/pull/8383) [@nidhi-ag](https://github.com/nidhi-ag)
|
||||
* Fix TypeScript definition of Divider. [#8504](https://github.com/ant-design/ant-design/pull/8504) [@cyyyu](https://github.com/cyyyu)
|
||||
* Fix TypeScript definition of Dropdown. [#8444](https://github.com/ant-design/ant-design/issues/8444)
|
||||
* Fix TypeScript definition of List. [e27061e](https://github.com/ant-design/ant-design/commit/e27061ea5b2f2d3273b45862d9b87285448f0998) [1b2a955](https://github.com/ant-design/ant-design/commit/1b2a9550d9595dd2f31f79d1bdd52695ec792692)
|
||||
* Fix TypeScript definition of Table. [#8507](https://github.com/ant-design/ant-design/issues/8507) [#8515](https://github.com/ant-design/ant-design/pull/8515) [@danedavid](https://github.com/danedavid)
|
||||
* Fix style of fixed header of Table while `dataSource` is empty.[#3567](https://github.com/ant-design/ant-design/issues/3567)
|
||||
* Fix Table will overlap SubMenu while `dataSource` is empty. [#3521](https://github.com/ant-design/ant-design/issues/3521)
|
||||
* Tabs
|
||||
* Height of header of `Tabs[type="card|editable-card"]` should follow design.
|
||||
* Fix height of TabPane should follow height of its content. [#3304](https://github.com/ant-design/ant-design/issues/3304)
|
||||
* Fix style of `TreeSelect[showSearch]`. [#3520](https://github.com/ant-design/ant-design/issues/3520)
|
||||
|
||||
## 3.0.0
|
||||
## 2.1.0
|
||||
|
||||
`2017-12-04`
|
||||
`2016-10-16`
|
||||
|
||||
Learn more in the [Ant Design 3.0 announcement post](https://medium.com/ant-design/announcing-ant-design-3-0-70e3e65eca0c)!
|
||||
|
||||
### Major Changes
|
||||
|
||||
- New [color system](https://ant.design/docs/spec/colors#Color-Palettes), We changed our primary color from 『`#108EE9`』 to 『`#1890FF`』, we called the new primary color "拂晓蓝 (Daybreak Blue)" which means the color of the sky at daybreak.
|
||||
- New design of components.
|
||||
- Increased the base font size from 12px to 14px.
|
||||
- Changed default locale to `en_US`.
|
||||
- Support React 16.
|
||||
- Better TypeScript support.
|
||||
- New [List](https://ant.design/components/list/) component.
|
||||
- New [Divider](https://ant.design/components/divider/) component.
|
||||
- 30 New [icons](https://ant.design/components/icon/).
|
||||
|
||||
### Breaking Changes
|
||||
|
||||
- Card's `noHovering` has been renamed to `hoverable`，and its default value now is `true`.
|
||||
- Added new Grid breakpoints. [#7230](https://github.com/ant-design/ant-design/pull/7230)
|
||||
- Form `getFieldDecorator`'s `exclusive` option has been removeed.
|
||||
- Added `Form.createFormField`, and you must use it to wrap field data returned in `option.mapPropsToFields`:
|
||||
|
||||
```diff
|
||||
import { Form } from 'antd';
|
||||
|
||||
Form.create({
|
||||
mapPropsToFields() {
|
||||
return {
|
||||
- name: { value: 'antd' },
|
||||
+ name: Form.createFormField({ value: 'antd' }),
|
||||
};
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
- Improved global reset style, if you encounter style problem after upgrading, you can try import our v2 compatible style.
|
||||
|
||||
```javascript
|
||||
import 'antd/lib/style/v2-compatible-reset';
|
||||
```
|
||||
|
||||
Or use less
|
||||
|
||||
```less
|
||||
@import '~antd/lib/style/v2-compatible-reset.less';
|
||||
```
|
||||
|
||||
- Since we changed default locale to en_US, LocalProvider is not required any more for English users.
|
||||
- We don't set `size="large"` to `Input` in `Form` by default any more.
|
||||
- `Input.Search` 🔍 icon don't be interactive anymore, you can use new `enterButton` prop to add a button after input.
|
||||
- UMD version of `dist/antd.js` doesn't include moment any more, you need add moment by yourself if you are using the UMD version.
|
||||
```diff
|
||||
<html>
|
||||
<head>
|
||||
+ <script src="https://unpkg.com/moment@2.19.3/moment.js"></script>
|
||||
<script src="https://unpkg.com/antd@3.0.0/dist/antd.js"></script>
|
||||
</head>
|
||||
</html>
|
||||
```
|
||||
|
||||
### Removed Deprecations
|
||||
|
||||
- 🗑 DatePicker.Calendar has been removed, you can use Calendar directly.
|
||||
- 🗑 DatePicker's `toggleOpen` prop has been removed, use `onOpenChange` instead.
|
||||
- 🗑 Form's `inline`, `horizontal`, `vertical` props has been removed, use `layout` instead.
|
||||
- 🗑 Input's `type` prop has dropped textarea support, please use Input.TextArea instead.
|
||||
- 🗑 Mention's `toEditorState` has been removed.
|
||||
- 🗑 Select's `multiple`, `combobox`, `tags` props has been removed, use `mode` instead.
|
||||
|
||||
### Features and Improvements
|
||||
|
||||
- 🌟 Tabs added new size `size="large"`。
|
||||
- 🌟 Row's `gutter` now support responsive setting, you can write `gutter={{ sm: 16, lg: 32 }}`.
|
||||
- 🌟 Spin added new `indicator` prop to allow setting custom indicator. [#7977](https://github.com/ant-design/ant-design/pull/7977) [@kossel](https://github.com/ant-design/ant-design/pull/7977)
|
||||
- 🌟 Input.Search added new `enterButton` prop to allow setting custom search button.[#7596](https://github.com/ant-design/ant-design/issues/7596)
|
||||
- 🌟 Mention added new `placement` prop to allow setting the popup direction.
|
||||
- 🌟 Carousel added new `next()`, `prev()`, `goTo(slideNumber)` methods to allow controlling slides programmatically.
|
||||
- 🌟 Button added link support，Button with `href` prop will render to `<a>`. [#8343](https://github.com/ant-design/ant-design/pull/8343)
|
||||
- 🌟 Steps was refactored, first rendering won't flash. [#6010](https://github.com/ant-design/ant-design/issues/6010)
|
||||
- 🌟 Switch added new `loading` prop to show a loading status.
|
||||
- Menu
|
||||
- 🌟 We refactored it with [rc-trigger](https://github.com/react-component/trigger) for delay popup and auto overflow in viewport.
|
||||
- 🌟 Added new `subMenuOpenDelay` and `subMenuCloseDelay` props to allow setting delay time for submenu toggling.
|
||||
- 🌟 Added new `forceSubMenuRender` prop to render submenu even if it's collapsed. [#5586](https://github.com/ant-design/ant-design/issues/5586)
|
||||
- Form
|
||||
- 🌟 Added animations for validation message showing.
|
||||
- 🌟 Added field conditional rendering support. [#react-component/117](https://github.com/react-component/form/issues/117)
|
||||
- Message
|
||||
- 🌟 Allow `duration` optional. [#7857](https://github.com/ant-design/ant-design/issues/7857) [@monkindey](https://github.com/monkindey)
|
||||
- Badge
|
||||
- 🌟 Added new `offset` prop to allow setting the offset of status point.
|
||||
- 🌟 `status` can use whith `children` now. [#8164](https://github.com/ant-design/ant-design/issues/8164)
|
||||
- Card
|
||||
- 🌟 Added new `inner` type. [Demo](https://ant.design/components/card/#components-card-demo-inner)。
|
||||
- 🌟 Added `cover`、`actions` and a new `Meta` component. [Demo](https://ant.design/components/card/#components-card-demo-meta)。
|
||||
- Supports spinning Icon.
|
||||
- Tabs's switch animation could be disabled now. [#3324](https://github.com/ant-design/ant-design/issues/3324)
|
||||
- Add Spanish localization for LocaleProvider. @Danjavia
|
||||
- Update Russian localization for LocaleProvider. @plandem
|
||||
- Add `onSelect` event for AutoComplete.
|
||||
- Improve style of Modal.
|
||||
- Improve animation of Tooltip.
|
||||
- Improve style of Transfer's buttons.
|
||||
- Improve style of Tree.
|
||||
- Fix some less variables.
|
||||
- Fix errors while import the whole antd in SSR.
|
||||
- Fix errors while render Affix and BackTop on server. [#3283](https://github.com/ant-design/ant-design/issues/3283) [#3343](https://github.com/ant-design/ant-design/issues/3343)
|
||||
- Fix conflicts between Cascader search mode and browser's autocomplete behaviour. [#3350](https://github.com/ant-design/ant-design/issues/3350)
|
||||
- Fix bug that `h3` cannot be the value of Card[title]. [#3388](https://github.com/ant-design/ant-design/issues/3388)
|
||||
- DatePicker
|
||||
- 🌟 Added `mode` and `onPanelChange`，to allow controlling the panel mode. [Demo](https://ant.design/components/date-picker/#components-date-picker-demo-mode)。
|
||||
- 🌟 Added `WeekPicker` component. [Demo](https://ant.design/components/date-picker/#components-date-picker-demo-basic)
|
||||
- 🌟 Added new `dateRender` prop to allow customizing date cell.
|
||||
- TimePicker
|
||||
- 🌟 Added new `hourStep`, `minuteStep`, `secondStep` props to allow customizing time setps. [Demo](https://ant.design/components/time-picker/#components-time-picker-demo-interval-options)
|
||||
- 🌟 Added new `focusOnOpen` prop to focus input after panel is open.
|
||||
- Table
|
||||
- 🌟 Added new `components` prop to allow overriding default table elements.
|
||||
```javascript
|
||||
// You can override following elements
|
||||
const components = {
|
||||
table: MyTable,
|
||||
header: {
|
||||
wrapper: HeaderWrapper,
|
||||
row: HeaderRow,
|
||||
cell: HeaderCell,
|
||||
},
|
||||
body: {
|
||||
wrapper: BodyWrapper,
|
||||
row: BodyRow,
|
||||
cell: BodyCell,
|
||||
},
|
||||
};
|
||||
|
||||
<Table components={components} columns={columns data={data}} />
|
||||
```
|
||||
- 🌟 Added new `onRow` prop to allow passing custom props to table body row.
|
||||
- 🌟 Added new `onHeaderRow` props to allow passing custom props to table header row.
|
||||
- 🌟 Added `column[onCell]` to allow passing custom props to table body cell.
|
||||
- 🌟 Added `column[onHeaderCell]` to allow passing custom props to table header cell.
|
||||
- 🌟 Added `column[align]` to allow setting how text aligns.
|
||||
- 🌟 Added `column[defaultSortOrder]` to allow setting default sort order. [#8111](https://github.com/ant-design/ant-design/pull/8111) [@megawac](https://github.com/megawac)
|
||||
- 🌟 Added `rowSelection[fixed]` to allow fixing the selection column.。
|
||||
- 🙅 Deprecated `getBodyWrapper`, please use `components` instead.
|
||||
- 🙅 Deprecated `onRowClick`，`onRowDoubleClick`、`onRowContextMenu`、`onRowMouseEnter`、`onRowMouseLeave`, please use `onRow` instead.
|
||||
```javascript
|
||||
<Table onRow={(record) => ({
|
||||
onClick: () => {},
|
||||
onDoubleClick: () => {},
|
||||
onContextMenu: () => {},
|
||||
onMouseEnter: () => {},
|
||||
onMouseLeave: () => {},
|
||||
})} />
|
||||
```
|
||||
- Fix bug that `onChange` will be trigger twice when `showTime` is set. [#3376](https://github.com/ant-design/ant-design/issues/3376)
|
||||
- Fix differences between overlay's and trigger's date format. [#3405](https://github.com/ant-design/ant-design/issues/3405) [#3298](https://github.com/ant-design/ant-design/issues/3298)
|
||||
- Fix style conflicts with TimePicker. [#3312](https://github.com/ant-design/ant-design/issues/3312) [#3307](https://github.com/ant-design/ant-design/issues/3307)
|
||||
- Fix overflow issue for Form.Item label.
|
||||
- Fix that Icon should not show border in Safari.
|
||||
- Fix infinite loop while inc/dec InputNubmer with keyboard. [#3239](https://github.com/ant-design/ant-design/issues/3239)
|
||||
- Fix the style of the arrow of Popover.
|
||||
- Fix bug Popover and Popconfirm `arrowPointAtCenter` doesn't work.
|
||||
- Select
|
||||
- 🌟 Option's value can be a number in single or multiple mode.
|
||||
- 🌟 Added new `maxTagCount` and `maxTagPlaceholder` props.
|
||||
- 🌟 Added new `showAction` prop to allow setting the trigger action for popup.
|
||||
- 🌟 Added new `onMouseEnter` and `onMouseLeave` callback.
|
||||
- LocaleProvider
|
||||
- 🇮🇸 Added Icelandic. [#7561](https://github.com/ant-design/ant-design/pull/7561) [@paunovic-stefan](https://github.com/paunovic-stefan)
|
||||
- 🇪🇬 Added Egyptian Arabic. [#7888](https://github.com/ant-design/ant-design/pull/7888) [@mohamed-seada-1994](https://github.com/mohamed-seada-1994)
|
||||
- 🇺🇦 Added Ukrainian. [#8169](https://github.com/ant-design/ant-design/pull/8169) [@anxolerd](https://github.com/anxolerd)
|
||||
- Fix bug that styles of Select are imported twice. [#3332](https://github.com/ant-design/ant-design/issues/3332)
|
||||
- Fix bug `notFoundContent` cannot be set as `''`. [#3345](https://github.com/ant-design/ant-design/issues/3345)
|
||||
- Fix the unstable width of table cell with Select[showSearch]. [#3413](https://github.com/ant-design/ant-design/issues/3413)
|
||||
- Fix style conflicts while use `border` & `title` & `footer` of Table at the same time. [#3301](https://github.com/ant-design/ant-design/issues/3301)
|
||||
- Fix that the height of TabPane doesn't follow height of content. [#3377](https://github.com/ant-design/ant-design/issues/3377)
|
||||
- Fix bug Transfer[titles] is not under the control of LocaleProvider. [#3264](https://github.com/ant-design/ant-design/pull/3264)
|
||||
- Upload
|
||||
- Fix bug users' `onRemove` will override default behaviour. [#3317](https://github.com/ant-design/ant-design/issues/3317)
|
||||
- Fix style for `listType='picture-card'`.[#3316](https://github.com/ant-design/ant-design/issues/3316)
|
||||
- Fix bug that moment locales is not found while built. [#3204](https://github.com/ant-design/ant-design/issues/3204) [#3411](https://github.com/ant-design/ant-design/issues/3411)
|
||||
|
||||
### Bug fixes
|
||||
## 2.0.1
|
||||
|
||||
- Form
|
||||
- 🐞 Fixed issue result in Input icon is hovered by feedback icon.
|
||||
- 🐞 Fixed feedback icon not centered in large input.
|
||||
- 🐞 Fix Menu key press error. [#8089](https://github.com/ant-design/ant-design/issues/8089)
|
||||
`2016-10-01`
|
||||
|
||||
### Other things
|
||||
- Fix developers cannot call methods of react-slick. [#3164](https://github.com/ant-design/ant-design/issues/3164)
|
||||
- Fix Steps.Step[icon] should support React.ReactNode. [#3159](https://github.com/ant-design/ant-design/issues/3159)
|
||||
- Fix server-side render for Affix. [#3216](https://github.com/ant-design/ant-design/issues/3216)
|
||||
- Fix Mention should supoort `onSelect` `placeholder`. [#3236](https://github.com/ant-design/ant-design/issues/3236) [#3226](https://github.com/ant-design/ant-design/issues/3226)
|
||||
- Fix Transfer cannot work with `getFieldDecorator`.
|
||||
- Fix LocaleProvider doesn't work for time-related components.
|
||||
- Fix Cascader doesn't show search text in search mode.
|
||||
- Fix the animation & text Spin should be placed in vertical middle.
|
||||
- Fix styles of RangePicker Modal Tag Progress.
|
||||
|
||||
- Don't need set `allowSyntheticDefaultImports` when using in TypeScript.
|
||||
- We removed `react@0.14` and `react@15` from `peerDependencies`, though `antd@3.0` still works on old React versions, but we highly recommend you upgrading to React 16 since we may use the new features only exists in React 16 in the future. See [React 16](https://reactjs.org/blog/2017/09/26/react-v16.0.html)
|
||||
- Fully es module support, if you are using webpack 3, you can set babel-plugin-import's `libraryDirectory` to `es` to enable tree shaking .
|
||||
- We will support 2.x branch until June in next year.
|
||||
## 2.0.0
|
||||
|
||||
## 2.x
|
||||
`2016-09-28`
|
||||
|
||||
Visit [GitHub](https://github.com/ant-design/ant-design/blob/2.x-stable/CHANGELOG.md) to read `2.x` change logs.
|
||||
After four months, `antd@2.0.0` is published. We had refactored code and improve functionalities and details of existing components. What's more, we provide English version of the documentation. The antd community help us a lot in developing `antd@2.0.0`.
|
||||
|
||||
If you meet any problem while you try to upgrade from `antd@1.0.0`, feel free to [create issues on GitHub](https://github.com/ant-design/ant-design/issues).
|
||||
|
||||
## 1.11.4
|
||||
### 2.x Major changes
|
||||
|
||||
Visit [GitHub](https://github.com/ant-design/ant-design/blob/1.x-stable/CHANGELOG.md) to read change logs from `0.x` to `1.x`.
|
||||
* Refactor components with TypeScript, and provide **`.d.ts` files which are officially supported**. Thanks to all the developers that contributed to [#1846](https://github.com/ant-design/ant-design/issues/1846) and @infeng.
|
||||
* **Translate the documentation into English**, and we are going to provide both of Chinese and English versions of the documentation in the future. Thanks to all the translators and reviewers that contributed to [#1471](https://github.com/ant-design/ant-design/issues/1471).
|
||||
* DatePicker, TimePicker, Calendar and other components that are designed to select time **are refactored to replace [gregorian-calendar](github.com/yiminghe/gregorian-calendar) with [moment](http://momentjs.com/)**.
|
||||
* All the [icons](http://ant.design/components/icon/) are re-designed.
|
||||
* New component [Mention](http://ant.design/components/mention/).
|
||||
* New component [AutoComplete](http://ant.design/components/auto-complete/).
|
||||
* The `getFieldProps` of Form is replaced with `getFieldDecorator` which will warn developers if they make mistakes. Related discussion [#1533](https://github.com/ant-design/ant-design/issues/1533).
|
||||
* Table supports [grouping columns](http://ant.design/components/table/#components-table-demo-grouping-columns). @yesmeck
|
||||
* Removed components and features which are deprecated in `antd@1.x`, such as QueueAnim, Validation, Form.ValueMixin, Progress.Line, Progress.Circle, Popover[overlay] and Slider[marks] will not support array any more.
|
||||
|
||||
### 2.x Breaking changes
|
||||
|
||||
There are some breaking changes in `antd@2.0.0`, and you need to modify your code to work with it.
|
||||
|
||||
* `value` and `defaultValue` of all the time-related components will not support type `String/Date`, please use [moment](http://momentjs.com/):
|
||||
```diff
|
||||
- <TimePicker defaultValue="12:08:23" />
|
||||
+ <TimePicker defaultValue={moment('12:08:23', 'HH:mm:ss')} />
|
||||
|
||||
- <DatePicker defaultValue="2015/01/01" />
|
||||
+ <DatePicker defaultValue={moment('2015/01/01', 'YYYY/MM/DD')} />
|
||||
|
||||
- <Calendar defaultValue={new Date('2010-10-10')} />
|
||||
+ <Calendar defaultValue={moment('2010-10-10', 'YYYY-MM-DD')} />
|
||||
```
|
||||
* Parameters of type `Date/GregorianCalendar` of functions such as `onChange` and `onPanelChange`, plus other callback functions had been changed to type moment. Please consult [APIs of gregorian-calendar](https://github.com/yiminghe/gregorian-calendar) and [APIs of moment](http://momentjs.com/docs/), and update your code accordingly. And you can consult this [commit](https://github.com/ant-design/ant-design/commit/5a4ebe535f0353089b30ac331bc4fb7877963371) to see how to upate.
|
||||
|
||||
Because the return value of `JSON.stringy(date: moment)` will lost time zone, we should use `.format` to convert date to string first, see related issue [#3082](https://github.com/ant-design/ant-design/issues/3082) for details:
|
||||
```js
|
||||
handleSubmit() {
|
||||
const values = this.props.form.getFieldsValue();
|
||||
values.date = values.date.format('YYYY-MM-DD HH:mm:ss'); // or other format
|
||||
const data = JSON.stringify(values);
|
||||
// send data to server
|
||||
}
|
||||
```
|
||||
* For the value of time-related components becomes an instance of `moment`, you should replace `type: 'date'` with `type: 'object'` in form validation.
|
||||
* The `format` of time-related components is changed from [gregorian-calendar-format](https://github.com/yiminghe/gregorian-calendar-format#api) to [moment format](http://momentjs.com/docs/#/parsing/string-format/) now, for instance the format `yyyy-MM-dd` should change to `YYYY-MM-DD`.
|
||||
* `linkRender` and `nameRender` of Breadcrumb are removed, please use `itemRender`.
|
||||
* `onClose` and `onOpen` of Menu are removed, please use `onOpenChange`. As being totally different, please check [this demo](http://beta.ant.design/components/menu/#components-menu-demo-sider-current) first.
|
||||
* Paging columns of Table were removed, please use [fixed columns](http://ant.design/components/table/#components-table-demo-fixed-columns).
|
||||
* `Popover[overlay]` is removed, please use `Popover[content]` instead.
|
||||
|
||||
The following change will throw some warnings in the console and it will still work, but we recommend to update your code.
|
||||
|
||||
* `getFieldProps` of Form is deprecated, please use `getFieldDecorator`:
|
||||
|
||||
```diff
|
||||
- <Input placeholder="text" {...getFieldProps('userName', { ... })} />
|
||||
+ {getFieldDecorator('userName', { ... })(
|
||||
+ <Input placeholder="text" />
|
||||
+ )}
|
||||
```
|
||||
|
||||
Look up to [#1533](https://github.com/ant-design/ant-design/issues/1533) for related discussion.
|
||||
|
||||
* `toggleOpen` of DatePicker is deprecated, please use `onOpenChange`:
|
||||
|
||||
```diff
|
||||
- handleToggleOpen({ open }) {
|
||||
+ handleOpenChange(open) {
|
||||
...
|
||||
}
|
||||
```
|
||||
|
||||
### 2.x Bug fixes
|
||||
|
||||
* Dropdown.Button[disabled] should work. [#3070](https://github.com/ant-design/ant-design/issues/3070)
|
||||
* `option.withRef` of Form.create should work. [#2843](https://github.com/ant-design/ant-design/issues/2843)
|
||||
* Fix slow response of expanding sub menu in Menu[inline] mode. [#2701](https://github.com/ant-design/ant-design/issues/2701)
|
||||
* The button of Modal.confirm(and so on) should not be clickable while it is closed asynchronously. [#2684](https://github.com/ant-design/ant-design/issues/2684)
|
||||
* `format` of DatePicker[showTime] should work. [#3123](https://github.com/ant-design/ant-design/issues/3123)
|
||||
* Fix Table[dataSource] treat key whose value is `0` as inexisting. [#3166](https://github.com/ant-design/ant-design/pull/3166) @noonnightstorm
|
||||
* Tree.Node should not show arrow if it has no child nodes. [#2616](https://github.com/ant-design/ant-design/issues/2616)
|
||||
* Fix cursor style of arrows that are hidden of Tree.Node. [#2748](https://github.com/ant-design/ant-design/issues/2748)
|
||||
|
||||
### 2.x Other improvements
|
||||
|
||||
* Alert supports [`banner` mode](http://ant.design/components/alert/#components-alert-demo-banner).
|
||||
* BackTop will scroll to top with animation.
|
||||
* Badge supports [status dot mode](http://ant.design/components/badge/#components-badge-demo-status).
|
||||
* Cascader supports [searching options directly](http://ant.design/components/cascader/#components-cascader-demo-search).
|
||||
* Checkbox supports [indeterminate mode](http://ant.design/components/checkbox/#components-checkbox-demo-check-all).
|
||||
* Form supports [vertical layout](http://ant.design/components/form/#components-form-demo-validate-customized).
|
||||
* InputNumber supports long press to increase/decrease number. [#](http://ant.design/components/input-number/#components-input-number-demo-basic)
|
||||
* notification supports [customized icon](http://ant.design/components/notification/#components-notification-demo-custom-icon).
|
||||
* Spin allows [customized tips and animation work together](http://ant.design/components/spin/#components-spin-demo-tip). @jerrybendy
|
||||
* Transfer can handle event while options are checked/unchecked. [#](http://ant.design/components/transfer/#components-transfer-demo-basic)
|
||||
* Transfer can determine [whether an option is checkable](http://ant.design/components/transfer/#components-transfer-demo-basic).
|
||||
* Improve style of Alert and notification.
|
||||
* Modal.confirm(and so on) can be closed by keyboard. @Dafrok
|
||||
* Improve the user experience of [selecting time in DatePicker](http://ant.design/components/date-picker/#components-date-picker-demo-time).
|
||||
* Improve the status changed animation of [Spin](http://ant.design/components/spin/#components-spin-demo-nested ).
|
||||
* Update [font-family](https://github.com/ant-design/ant-design/commit/2f308b0f995cfcb2a3c8feb1e35ffd3f0bf93cfc).
|
||||
|
||||
### 2.x Workflow
|
||||
|
||||
* [AntD Library](http://library.ant.design/) a collection of Axure files which includes components and patterns that follow Ant Design Specification.
|
||||
* Rename `babel-plugin-antd` to [`babel-plugin-import`](https://github.com/ant-design/babel-plugin-import), and this means that `babel-plugin-import` becomes an common load-on-demand solution and not just for `antd`.
|
||||
|
||||
Please update `package.json`:
|
||||
|
||||
```diff
|
||||
{
|
||||
"devDependencies": {
|
||||
- "babel-plugin-antd": "^0.x.x",
|
||||
+ "babel-plugin-import": "^1.0.0",
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
And update your babel config in `.babelrc` or other place:
|
||||
|
||||
```diff
|
||||
{
|
||||
- "plugins": [["antd", { style: "css" }]]
|
||||
+ "plugins": [["import", { libraryName: "antd", style: "css" }]]
|
||||
}
|
||||
```
|
||||
|
||||
* [dva@1.0.0](https://github.com/dvajs/dva) is published and it is officially recommended framework [in real world](http://ant.design/docs/react/practical-projects).
|
||||
* The officially recommended scaffold is [dva-cli](https://github.com/dvajs/dva-cli) now, the old `antd-init` is just for studying and demo.
|
||||
|
||||
## 1.0.0
|
||||
|
||||
Visit [GitHub](https://github.com/ant-design/ant-design/releases?after=2.0.0) to read change logs from `0.x` to `1.x`。
|
||||
|
||||
@@ -1,226 +1,757 @@
|
||||
---
|
||||
order: 6
|
||||
order: 3
|
||||
title: 更新日志
|
||||
toc: false
|
||||
timeline: true
|
||||
---
|
||||
|
||||
`antd` 严格遵循 [Semantic Versioning 2.0.0](http://semver.org/lang/zh-CN/) 语义化版本规范。
|
||||
|
||||
#### 发布周期
|
||||
|
||||
* 修订版本号：每周末会进行日常 bugfix 更新。（如果有紧急的 bugfix，则任何时候都可发布）
|
||||
* 次版本号：每月发布一个带有新特性的向下兼容的版本。
|
||||
* 主版本号：含有破坏性更新和新特性，不在发布周期内。
|
||||
如果需要查看 `0.12.x` 及之前的更新日志，请移步 [GitHub](https://github.com/ant-design/ant-design/releases?after=1.0.0)。
|
||||
|
||||
---
|
||||
|
||||
## 3.0.1
|
||||
## 2.4.0
|
||||
|
||||
`2017-12-11`
|
||||
* 调整了组件的导航结构。
|
||||
* 新增 [Anchor](https://ant.design/components/anchor) 锚点组件。
|
||||
* 整理了样式变量，修复 `@font-size-base` 和 `@text-color` 在部分组件无效的问题，新增 `@font-size-lg` `@text-color-secondary`，并移除了部分无用的变量。
|
||||
* `Transfer` 组件新增了受控属性 `selectedKeys`。[#3729](https://github.com/ant-design/ant-design/issues/3729)
|
||||
* `Tag` 新增选中状态。
|
||||
* 修复 `Dropdown.Button` 不支持 `visible` 和 `onVisibleChange` 的问题。[#3779](https://github.com/ant-design/ant-design/issues/3779)
|
||||
* 修复 `DatePicker[showTime]`` 的 `此刻` 按钮。[#3748](https://github.com/ant-design/ant-design/issues/3748)
|
||||
* 修复 `Steps` 竖直方向的样式。[#3760](https://github.com/ant-design/ant-design/issues/3760)
|
||||
* 修复 `Spin` 组件在 IE10+ 的样式问题。[#3755](https://github.com/ant-design/ant-design/issues/3755)
|
||||
* 修复 `Mention` 组件的 focus 逻辑. [#3801](https://github.com/ant-design/ant-design/issues/3801)
|
||||
* 修复 `Progress` 组件的动画问题。[#3784](https://github.com/ant-design/ant-design/issues/3784)
|
||||
* 修复 `Select` 搜索时的丢失焦点问题。[#3778](https://github.com/ant-design/ant-design/issues/3778)
|
||||
* 修复 `TimePicker` 不支持 `format="HH"` 等格式的问题。[#3793](https://github.com/ant-design/ant-design/issues/3793)
|
||||
* 优化了 `Table` 选择的性能。[#3757](https://github.com/ant-design/ant-design/pull/3757)
|
||||
* 优化 `Carousel` 的默认样式。
|
||||
* 优化 `Checkbox` 和 `Radio` 的样式。[#3590](https://github.com/ant-design/ant-design/issues/3590)
|
||||
* 修复 `DatePicker`、`Form`、`Table` 等组件的样式细节。
|
||||
|
||||
* 移除 Card 无用 DOM wrapper，以和 2.x 保持一致。
|
||||
* 修复 `antd/lib/style/v2-compatible-reset.css` 缺失问题。[28d13e2](https://github.com/ant-design/ant-design/commit/28d13e2539817f87b8a2029ea22d9c30b377167f)
|
||||
* 修复 Affix 比浏览器可见区域还高时被截断的问题。[31a0654](https://github.com/ant-design/ant-design/commit/31a0654ef990eb7bae2b18095fa0d5230b9be1da)
|
||||
* 修复 Collapse 展开动画。[edd592c](https://github.com/ant-design/ant-design/commit/edd592cb9dd79d534853e7a0c1b648382e3f1a12)
|
||||
* 修复 Form 内大尺寸 Input、Button 的对齐问题。[#8459](https://github.com/ant-design/ant-design/issues/8459)
|
||||
## 2.3.2
|
||||
|
||||
`2016-11-09`
|
||||
|
||||
* 修复使用 `getFieldProps` 会导致死循环的问题。
|
||||
|
||||
## 2.3.1
|
||||
|
||||
`2016-11-07`
|
||||
|
||||
* 修正上个版本缺少 `dist/antd.css` 的问题。
|
||||
|
||||
## 2.3.0
|
||||
|
||||
`2016-11-04`
|
||||
|
||||
* 升级 normalize.css 到 5.0。
|
||||
* package.json 的 main 换成了 `lib/index.js`。[#3397](https://github.com/ant-design/ant-design/pull/3397)
|
||||
* 全新的 `Spin` 设计。
|
||||
* `TimePicker` 新增了 `addon` 以支持自定义的附加内容。
|
||||
* `Tree` 新增了 `onDragEnd`。
|
||||
* `Collapse` 新增了 `bordered`。
|
||||
* 优化 `Tabs` 切换时的动画效果。
|
||||
* 优化 `Radio` 和 `Checkbox` 在禁用和鼠标停留时的样式。[#3590](https://github.com/ant-design/ant-design/issues/3590)
|
||||
* 优化 `Transfer` 的性能。[#2860](https://github.com/ant-design/ant-design/issues/2860)
|
||||
* 修复 `Popover` 嵌套时的样式问题。[#3448](https://github.com/ant-design/ant-design/issues/3448)
|
||||
* 修复 `Transfer` 服务端渲染报错的问题。[#3686](https://github.com/ant-design/ant-design/issues/3686)
|
||||
* 修复 `Upload` `picture-card` 模式下新上传的图片不显示预览的问题。[#3706](https://github.com/ant-design/ant-design/pull/3706) [@denzw](https://github.com/denzw)
|
||||
* DatePicker
|
||||
* 在 `showTime` 模式下现在失去焦点也会触发 `onChange`。
|
||||
* `MonthPicker` 增加了 `monthCellContentRender` 和 `cellContentRender`。
|
||||
* `RangePicker` 现在可以手动输入时间了。[#3718](https://github.com/ant-design/ant-design/issues/3718)
|
||||
* 新增了捷克语的翻译。
|
||||
* Badge
|
||||
* 优化鼠标停留时超过 99 的数字显示。[#3645](https://github.com/ant-design/ant-design/issues/3645)
|
||||
* 修复单独使用时会有移动动画的问题。[#3709](https://github.com/ant-design/ant-design/issues/3709)
|
||||
* Mention
|
||||
* 修复会被 `Table` 遮住的问题。[#3588](https://github.com/ant-design/ant-design/issues/3588)
|
||||
* 新增 `getSuggestionContainer` 来指定容器。[#3658](https://github.com/ant-design/ant-design/pull/3658)
|
||||
* Tag
|
||||
* 废弃 `color` 属性。[#3560](https://github.com/ant-design/ant-design/issues/3560)
|
||||
* 新增 `type`。[#3560](https://github.com/ant-design/ant-design/issues/3560)
|
||||
* 新增 `checkable`。[#3560](https://github.com/ant-design/ant-design/issues/3560)
|
||||
* Radio.Group
|
||||
* 新增 `className`。
|
||||
* `children` 为 `null` 或 `undefined` 时现在会被忽略。
|
||||
* Select
|
||||
* 新增 `tokenSeparators` 支持粘贴时自动分词。[#2071](https://github.com/ant-design/ant-design/issues/2071)
|
||||
* 新增 `onFocus` 回调。[#3587](https://github.com/ant-design/ant-design/issues/3587)
|
||||
* 修复 `combobox` 模式下选中项不能正确显示的问题。[#3401](https://github.com/ant-design/ant-design/issues/3401)
|
||||
|
||||
## 2.2.1
|
||||
|
||||
`2016-11-02`
|
||||
|
||||
* 修复 Form 中 DatePicker[showTime]（受控）无法使用的问题。[#3665](https://github.com/ant-design/ant-design/issues/3665)
|
||||
|
||||
## 2.2.0
|
||||
|
||||
`2016-10-28`
|
||||
|
||||
* 支持 TypeScript@2.0。[@AlbertZheng](https://github.com/AlbertZheng) [#3358](https://github.com/ant-design/ant-design/issues/3358)
|
||||
* 不再强依赖于 React 特定版本。[#3627](https://github.com/ant-design/ant-design/pull/3627)
|
||||
* Alert 支持 `className` `style` 属性。
|
||||
* DatePicker MonthPicker RangePicker 现在允许设置是否显示清除按钮。[#3618](https://github.com/ant-design/ant-design/issues/3618)
|
||||
* Form.Item 现在可以感知深层嵌套的表单域，以自动为其生成错误信息和状态。[#3212](https://github.com/ant-design/ant-design/issues/3212)
|
||||
* RangePicker 现在可以设置不可选的时间。[#](https://ant.design/components/date-picker/#components-date-picker-demo-disabled-date)
|
||||
* Switch
|
||||
* 宽度现在会随着 `checkedChildren/unCheckedChildren` 自动调整。[#3380](https://github.com/ant-design/ant-design/issues/3380)
|
||||
* 优化切换动画。
|
||||
* Upload 现在可以 [自定义上传方式](https://github.com/react-component/upload#customrequest)。[@edgji](https://github.com/edgji)
|
||||
* Icon
|
||||
* 新增 `bulb` `select` `like-o` `dislike-o`。
|
||||
* 调整 `loading` `like` `dislike`。
|
||||
* 优化 Card DatePicker Icon Table 的 TypeScript 定义。[@infeng](https://github.com/infeng) [3468](https://github.com/ant-design/ant-design/pull/3468) [#3603](https://github.com/ant-design/ant-design/pull/3603) [#3531](https://github.com/ant-design/ant-design/pull/3531)
|
||||
* 修复 Cascader `defaultValue` 失效的问题。[#3470](https://github.com/ant-design/ant-design/issues/3470)
|
||||
* 修复在一行内同时使用 Button Input DatePicker Select 时对齐的问题。[#3481](https://github.com/ant-design/ant-design/issues/3481)
|
||||
* DatePicker
|
||||
* 修复设置 `DatePicker[showTime]` 后 `onChange` 事件触发时机问题。[#3523](https://github.com/ant-design/ant-design/issues/3523)
|
||||
* 修复 Dropdown.Button disabled 后仍然响应操作的问题。[#3535](https://github.com/ant-design/ant-design/issues/3535)
|
||||
* Menu
|
||||
* 修复弹层在 Safari 下消失的问题。[#8453](https://github.com/ant-design/ant-design/issues/8453)
|
||||
* 修复展开动画。[edd592c](https://github.com/ant-design/ant-design/commit/edd592cb9dd79d534853e7a0c1b648382e3f1a12)
|
||||
* 修复 Notification 样式编译错误。[#8437](https://github.com/ant-design/ant-design/issues/8437)
|
||||
* 修复迷你 Pagination 的背景色问题。[e13c6d8](https://github.com/ant-design/ant-design/commit/e13c6d87fa6bf7d5cf4b2d5154a85b4793997de5)
|
||||
* 修复服务端渲染问题，感谢 [@xpcode](https://github.com/xpcode) 定位问题。[#2061](https://github.com/ant-design/ant-design/issues/2061) [#2406](https://github.com/ant-design/ant-design/issues/2406) [#3293](https://github.com/ant-design/ant-design/issues/3293)
|
||||
* 修复 children 不能为 `null` 的问题。[#3599](https://github.com/ant-design/ant-design/issues/3599)
|
||||
* 修复 message 加载状态无动画的问题。[#3536](https://github.com/ant-design/ant-design/issues/3536)
|
||||
* Form
|
||||
* 修复 `Form[inline]` 与 `Input[addonBefore|addonAfter]` 一起使用时的样式问题。[#3524](https://github.com/ant-design/ant-design/issues/3524)
|
||||
* 修复 Form.Item 内 Radio.Button 样式问题。
|
||||
* 修复 Form.Item 内搜索按钮的样式问题。[#3630](https://github.com/ant-design/ant-design/issues/3630)
|
||||
* 修复用户无输入时 Form.Item 识别为校验成功的问题。[#3613](https://github.com/ant-design/ant-design/issues/3613)
|
||||
* 当 `Popover[title]` 没有设置时，不再限制 Popover 的最小宽度。
|
||||
* Table
|
||||
* 修复在移动端样式错乱的问题。[#8465](https://github.com/ant-design/ant-design/issues/8465)
|
||||
* 修复嵌套表格与 size 属性共用时的样式问题。[#8525](https://github.com/ant-design/ant-design/issues/8525)
|
||||
* TypeScript
|
||||
* 修复 AutoComplete 的 TypeScript 定义。[#8383](https://github.com/ant-design/ant-design/pull/8383) [@nidhi-ag](https://github.com/nidhi-ag)
|
||||
* 修复 Divider 的 TypeScript 定义。[#8504](https://github.com/ant-design/ant-design/pull/8504) [@cyyyu](https://github.com/cyyyu)
|
||||
* 修复 Dropdown 的 TypeScript 定义。[#8444](https://github.com/ant-design/ant-design/issues/8444)
|
||||
* 修复 List 的 TypeScript 定义。[e27061e](https://github.com/ant-design/ant-design/commit/e27061ea5b2f2d3273b45862d9b87285448f0998) [1b2a955](https://github.com/ant-design/ant-design/commit/1b2a9550d9595dd2f31f79d1bdd52695ec792692)
|
||||
* 修复 Table 的 TypeScript 定义。[#8507](https://github.com/ant-design/ant-design/issues/8507) [#8515](https://github.com/ant-design/ant-design/pull/8515) [@danedavid](https://github.com/danedavid)
|
||||
* 修复固定表头在没有数据情况下的样式问题。[#3567](https://github.com/ant-design/ant-design/issues/3567)
|
||||
* 修复无数据时会覆盖 SubMenu 的问题。[#3521](https://github.com/ant-design/ant-design/issues/3521)
|
||||
* Tabs
|
||||
* 修复卡片叶签头部高度与设计稿不一致的问题。
|
||||
* 修复 TabPane 的高度会被同级 TabPane 撑高的问题。[#3304](https://github.com/ant-design/ant-design/issues/3304)
|
||||
* 修复 `TreeSelect[showSearch]` 样式问题。[#3520](https://github.com/ant-design/ant-design/issues/3520)
|
||||
|
||||
## 3.0.0
|
||||
## 2.1.0
|
||||
|
||||
`2017-12-04`
|
||||
`2016-10-16`
|
||||
|
||||
更多内容见 [Ant Design 3.0 发布公告](https://medium.com/ant-design/announcing-ant-design-3-0-70e3e65eca0c)！
|
||||
- Icon 现在支持旋转动画。
|
||||
- Tabs 现在可以禁用切换动画。[#3324](https://github.com/ant-design/ant-design/issues/3324)
|
||||
- 新增西班牙语的 localization 支持。@Danjavia
|
||||
- 更新俄语的 localization 文案。@plandem
|
||||
- 新增 AutoComplete[onSelect] 回调。
|
||||
- 优化 Modal 样式细节。
|
||||
- 优化 Tooltip 动画。
|
||||
- 优化 Transfer 按钮的样式。
|
||||
- 优化 Tree 的样式细节。
|
||||
- 整理和修复了部分 less 变量。
|
||||
- 修复服务端渲染时全量引入 antd 报错的问题。
|
||||
- 修复 Affix 与 BackTop 的服务端渲染问题。[#3283](https://github.com/ant-design/ant-design/issues/3283) [#3343](https://github.com/ant-design/ant-design/issues/3343)
|
||||
- 修复 Card[title] 内无法使用 `h3` 之类的标签的问题。[#3388](https://github.com/ant-design/ant-design/issues/3388)
|
||||
- 修复 Cascader 搜索模式与浏览器自动完成有冲突的问题。[#3350](https://github.com/ant-design/ant-design/issues/3350)
|
||||
- DatePicker
|
||||
- 修复设置 `showTime` 后，`onChange` 重复触发的问题。[#3376](https://github.com/ant-design/ant-design/issues/3376)
|
||||
- 修复浮层与 Trigger 日期格式不一致的问题。[#3405](https://github.com/ant-design/ant-design/issues/3405) [#3298](https://github.com/ant-design/ant-design/issues/3298)
|
||||
- 修复与 TimePicker 样式冲突问题。[#3312](https://github.com/ant-design/ant-design/issues/3312) [#3307](https://github.com/ant-design/ant-design/issues/3307)
|
||||
- 修复 Form.Item 标签文案过长溢出的问题。
|
||||
- 修复 Icon 在 Safari 下会出现边框的问题。
|
||||
- 修复 InputNubmer 键盘事件死循环问题。[#3239](https://github.com/ant-design/ant-design/issues/3239)
|
||||
- 修复 Popover 箭头样式问题。
|
||||
- 修复 Popover 和 Popconfirm 的 `arrowPointAtCenter` 无效的问题。
|
||||
- Select
|
||||
- 修复样式重复引入的问题。[#3376](https://github.com/ant-design/ant-design/issues/3376)
|
||||
- 修复 `notFoundContent` 无法置空的问题。[#3345](https://github.com/ant-design/ant-design/issues/3345)
|
||||
- 修复 Table 内使用 Select[showSearch] 后宽度会跳动的问题。[#3413](https://github.com/ant-design/ant-design/issues/3413)
|
||||
- 修复 Table 边框线与页头页脚冲突的问题。[#3301](https://github.com/ant-design/ant-design/issues/3301)
|
||||
- 修复 TabPane 高度不随内容变化的问题。[#3377](https://github.com/ant-design/ant-design/issues/3377)
|
||||
- 修复 Transfer[titles] 不受 LocaleProvider 控制的问题。[#3264](https://github.com/ant-design/ant-design/pull/3264)
|
||||
- Upload
|
||||
- 修复用户自定义 `onRemove` 事件会覆盖默认行为的问题。[#3317](https://github.com/ant-design/ant-design/issues/3317)
|
||||
- 修复图片卡片样式问题。[#3316](https://github.com/ant-design/ant-design/issues/3316)
|
||||
- 修复项目构建时 moment locales 找不到的问题。[#3204](https://github.com/ant-design/ant-design/issues/3204) [#3411](https://github.com/ant-design/ant-design/issues/3411)
|
||||
|
||||
## 2.0.1
|
||||
|
||||
`2016-10-01`
|
||||
|
||||
- 修复无法调用 react-slick 方法的问题。[#3164](https://github.com/ant-design/ant-design/issues/3164)
|
||||
- 修复 Steps.Step[icon] 不支持 React.ReactNode 的问题。[#3159](https://github.com/ant-design/ant-design/issues/3159)
|
||||
- 修复 Affix 不支持服务端渲染的问题。[#3216](https://github.com/ant-design/ant-design/issues/3216)
|
||||
- 修复 Mention 不支持 `onSelect` `placeholder` 的问题。[#3236](https://github.com/ant-design/ant-design/issues/3236) [#3226](https://github.com/ant-design/ant-design/issues/3226)
|
||||
- 修复 Transfer 与 `getFieldDecorator` 一起使用时的报错问题。
|
||||
- 修复 LocaleProvider 对时间组件无效的问题。
|
||||
- 修复 Cascader 搜索模式搜索文字显示不了的问题。
|
||||
- 修复 Spin 动画与文案整体不垂直居中的问题。
|
||||
- 修复 RangePicker Modal Tag Progress 等组件样式问题。
|
||||
|
||||
## 2.0.0
|
||||
|
||||
`2016-09-28`
|
||||
|
||||
很高兴的通知各位，经过四个月时间的紧密开发，`antd@2.0.0` 终于发布了。这个版本我们重构了底层代码，持续完善现有组件功能和优化细节，并提供了英文版的文档，其中很多都来自社区的贡献，无法一一感谢，欢迎各位持续关注和鞭策。在升级过程中遇到任何问题，请及时 [反馈给我们](https://github.com/ant-design/ant-design/issues)。
|
||||
|
||||
### 2.x 主要变化
|
||||
|
||||
* 开发语言改为 TypeScript，提供 **官方支持的 `.d.ts` 文件**，感谢 [#1846](https://github.com/ant-design/ant-design/issues/1846) 中所有参与到这次重构的人以及后期 @infeng 对其的完善。
|
||||
* **新增英文文档**， 以后将同时提供中英双语文档，感谢 [#1471](https://github.com/ant-design/ant-design/issues/1471) 里所有参与到翻译和审阅工作中的人。
|
||||
* 时间类组件 DatePicker、TimePicker、Calendar 等的底层 **使用 [moment](http://momentjs.com/) 替换 [gregorian-calendar](github.com/yiminghe/gregorian-calendar)**。
|
||||
* 全新设计的 [图标](http://ant.design/components/icon/)。
|
||||
* 新增提及组件 [Mention](http://ant.design/components/mention/)。
|
||||
* 新增自动完成组件 [AutoComplete](http://ant.design/components/auto-complete/)。
|
||||
* Form 新增 `getFieldDecorator` 作为 `getFieldProps` 的替代，对于不正确的使用方式 `getFieldDecorator` 会给出提示，可以降低踩坑的概率。相关讨论见 [#1533](https://github.com/ant-design/ant-design/issues/1533)。
|
||||
* Table 支持 [表头分组](http://ant.design/components/table/#components-table-demo-grouping-columns)。@yesmeck
|
||||
* 完全移除 `antd@1.x` 中已经废弃的 QueueAnim、Validation、Form.ValueMixin、Progress.Line、Progress.Circle、Popover[overlay] 及 Slider[marks] 对数组的支持。
|
||||
|
||||
### 2.x 不兼容改动
|
||||
|
||||
此版本有部分不兼容的改动，升级时确保修改相应的使用代码。
|
||||
|
||||
* 时间类组件的 `value` 和 `defaultValue` 不再支持 `String/Date` 类型，请使用 [moment](http://momentjs.com/)。
|
||||
```diff
|
||||
- <TimePicker defaultValue="12:08:23" />
|
||||
+ <TimePicker defaultValue={moment('12:08:23', 'HH:mm:ss')} />
|
||||
|
||||
- <DatePicker defaultValue="2015/01/01" />
|
||||
+ <DatePicker defaultValue={moment('2015/01/01', 'YYYY/MM/DD')} />
|
||||
|
||||
- <Calendar defaultValue={new Date('2010-10-10')} />
|
||||
+ <Calendar defaultValue={moment('2010-10-10', 'YYYY-MM-DD')} />
|
||||
```
|
||||
* 时间类组件的 `onChange` 和 `onPanelChange` 及其他回调函数中为 `Date/GregorianCalendar` 类型的参数，均修改为 moment 类型，两者 API 有所不同，但功能基本一致，请对照 [moment 的 API 文档](http://momentjs.com/docs/) 和 [gregorian-calendar 的文档](https://github.com/yiminghe/gregorian-calendar) 进行修改。你也可以参考这个 [commit](https://github.com/ant-design/ant-design/commit/5a4ebe535f0353089b30ac331bc4fb7877963371) 来进行修改。
|
||||
|
||||
由于 `JSON.stringy(date: moment)` 返回的值会丢失时区设置，所以要先使用 `.format` 把日期转成字符串，相关 issue 见 [#3082](https://github.com/ant-design/ant-design/issues/3082)：
|
||||
```js
|
||||
handleSubmit() {
|
||||
const values = this.props.form.getFieldsValue();
|
||||
values.date = values.date.format('YYYY-MM-DD HH:mm:ss'); // 或其它格式
|
||||
const data = JSON.stringify(values);
|
||||
// 发送 data 到服务器
|
||||
}
|
||||
```
|
||||
|
||||
* 时间类组件与表单校验一起使用时，`type: 'date'` 改为 `type: 'object'`。
|
||||
* 时间类组件的 `format` 属性也发生了变化，从 [gregorian-calendar-format 的格式](https://github.com/yiminghe/gregorian-calendar-format#api) 变化为与 [moment 的格式](http://momentjs.com/docs/#/parsing/string-format/)，例如原来的 `yyyy-MM-dd` 将变为 `YYYY-MM-DD`。
|
||||
* Breadcrumb 移除 `linkRender` 和 `nameRender`，请使用 `itemRender`。
|
||||
* Menu 移除 `onClose` `onOpen`，请使用 `onOpenChange`。API 差异较大，请先研究 [demo](http://beta.ant.design/components/menu/#components-menu-demo-sider-current)。
|
||||
* Table 移除列分页功能，请使用 [固定列](http://ant.design/components/table/#components-table-demo-fixed-columns)。
|
||||
* Popover 移除 `overlay` ，请使用 `content`。
|
||||
|
||||
以下变化升级后旧代码仍然能正常运行，但是控制台会出现警告提示，建议按提示进行修改。
|
||||
|
||||
* Form 废弃 `getFieldProps`，请使用 `getFieldDecorator`：
|
||||
|
||||
```diff
|
||||
- <Input placeholder="text" {...getFieldProps('userName', { ... })} />
|
||||
+ {getFieldDecorator('userName', { ... })(
|
||||
+ <Input placeholder="text" />
|
||||
+ )}
|
||||
```
|
||||
|
||||
相关讨论可以看 [#1533](https://github.com/ant-design/ant-design/issues/1533)。
|
||||
|
||||
* DatePicker 废弃 `toggleOpen`，请使用 `onOpenChange`：
|
||||
|
||||
```diff
|
||||
- handleToggleOpen({ open }) {
|
||||
+ handleOpenChange(open) {
|
||||
...
|
||||
}
|
||||
```
|
||||
|
||||
### 2.x Bug 修复
|
||||
|
||||
* 修复 Dropdown.Button `disabled` 属性无效的问题。[#3070](https://github.com/ant-design/ant-design/issues/3070)
|
||||
* 修复 Form.create `withRef` 选项失效的问题。[#2843](https://github.com/ant-design/ant-design/issues/2843)
|
||||
* 修复 Menu inline 模式下子菜单展开的问题。[#2701](https://github.com/ant-design/ant-design/issues/2701)
|
||||
* 修复 Modal.confirm 之类的弹窗在异步调用时按钮仍可点击的问题。[#2684](https://github.com/ant-design/ant-design/issues/2684)
|
||||
* 修复 DatePicker[showTime] 参数中的 `format` 失效的问题。[#3123](https://github.com/ant-design/ant-design/issues/3123)
|
||||
* 修复 Table[dataSource] 中的项的 key 为 `0` 时识别错误的问题。[#3166](https://github.com/ant-design/ant-design/pull/3166) @noonnightstorm
|
||||
* 修复 Tree.Node 无子节点时仍然显示箭头的问题。[#2616](https://github.com/ant-design/ant-design/issues/2616)
|
||||
* 修复 Tree.Node 箭头隐藏后鼠标 hover 上去光标仍会发生变化的问题。[#2748](https://github.com/ant-design/ant-design/issues/2748)
|
||||
|
||||
### 2.x 其他改进
|
||||
|
||||
* Alert 新增 [`banner` 模式](http://ant.design/components/alert/#components-alert-demo-banner)。
|
||||
* BackTop 增加回到顶部的动画效果。
|
||||
* Badge 新增 [状态点模式](http://ant.design/components/badge/#components-badge-demo-status)。
|
||||
* Cascader 新增 [搜索功能](http://ant.design/components/cascader/#components-cascader-demo-search)。
|
||||
* Checkbox 新增 [indeterminate 状态](http://ant.design/components/checkbox/#components-checkbox-demo-check-all)。
|
||||
* Form 新增 [垂直布局](http://ant.design/components/form/#components-form-demo-validate-customized)。
|
||||
* InputNumber 现在支持长按。[#](http://ant.design/components/input-number/#components-input-number-demo-basic)
|
||||
* notification 支持 [自定义 icon](http://ant.design/components/notification/#components-notification-demo-custom-icon)。
|
||||
* Spin 现在允许 [自定义文案与动画共存](http://ant.design/components/spin/#components-spin-demo-tip)。@jerrybendy
|
||||
* Transfer 现在可以监听用户选择了哪些选项。[#](http://ant.design/components/transfer/#components-transfer-demo-basic)
|
||||
* Transfer 现在可以定义哪些选项是 [不可选择的](http://ant.design/components/transfer/#components-transfer-demo-basic)。
|
||||
* 优化 Alert 和 notification 的样式。
|
||||
* 优化 Modal.confirm 之类的弹窗的键盘交互。@Dafrok
|
||||
* 优化 [DatePicker 的时间选择](http://ant.design/components/date-picker/#components-date-picker-demo-time) 交互。
|
||||
* 优化 [Spin 状态切换](http://ant.design/components/spin/#components-spin-demo-nested ) 时的效果。
|
||||
* 更新 [font-family](https://github.com/ant-design/ant-design/commit/2f308b0f995cfcb2a3c8feb1e35ffd3f0bf93cfc)。
|
||||
|
||||
### 2.x 相关工具发布
|
||||
|
||||
* 新增配套网站 [AntD Library](http://library.ant.design/)，提供遵循 Ant Design 设计规范的组件、模式等的 Axure 资源。
|
||||
* `babel-plugin-antd` 更名为 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import)，标志着该插件将作为一个通用的按需加载方案存在，而不再是 `antd` 专有。
|
||||
|
||||
请更新 `package.json`：
|
||||
|
||||
```diff
|
||||
{
|
||||
"devDependencies": {
|
||||
- "babel-plugin-antd": "^0.x.x",
|
||||
+ "babel-plugin-import": "^1.0.0",
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
同时更新 `.babelrc` 或你在其它地方对其的配置：
|
||||
|
||||
```diff
|
||||
{
|
||||
- "plugins": [["antd", { style: "css" }]]
|
||||
+ "plugins": [["import", { libraryName: "antd", style: "css" }]]
|
||||
}
|
||||
```
|
||||
|
||||
* [dva@1.0.0](https://github.com/dvajs/dva) 也已经发布，并推荐 [在实战项目中使用](http://ant.design/docs/react/practical-projects)。
|
||||
* 脚手架工具推荐使用 [dva-cli](https://github.com/dvajs/dva-cli)，原来的 `antd-init` 以后仅会用于学习以及 demo。
|
||||
|
||||
## 1.11.2
|
||||
|
||||
`2016-09-26`
|
||||
|
||||
- 修复 Popover 内嵌 Badge 后失效的问题。[#3109](https://github.com/ant-design/ant-design/issues/3109)
|
||||
- 修复 Modal 内嵌的 Button 在某些情况下与 Modal 的滚动不同步的问题。[#3031](https://github.com/ant-design/ant-design/issues/3031)
|
||||
|
||||
## 1.11.1
|
||||
|
||||
`2016-09-14`
|
||||
|
||||
- 修复 Menu 设置成 `theme=dark` 后，链接点击无效的问题。[#2929](https://github.com/ant-design/ant-design/issues/2929)
|
||||
- 修复迷你型 Table 表头与内容不对齐的问题。[#2933](https://github.com/ant-design/ant-design/issues/2933)
|
||||
- 修复 Cascader hover 样式。[#3015](https://github.com/ant-design/ant-design/issues/3015)
|
||||
- 修复 Upload 上传多个文件时，`onChange` 调用不正确的问题。[#3001](https://github.com/ant-design/ant-design/issues/3001)
|
||||
- 修复 TimePicker 报错样式的问题。[#2973](https://github.com/ant-design/ant-design/issues/2973)
|
||||
- 修复 Calendar 控件的年度选择下拉内容截断的问题。[#2927](https://github.com/ant-design/ant-design/issues/2927)
|
||||
|
||||
## 1.11.0
|
||||
|
||||
`2016-09-01`
|
||||
|
||||
- `Tooltip` `Popover` `Popconfirm` 修正默认对齐方式为边缘对齐，增加 arrowPointAtCenter 属性用于箭头指向中心的行为。[commit 977e2e3](https://github.com/ant-design/ant-design/commit/977e2e32fc40968846c8201ed72bdc3818375d2f)
|
||||
- `Table`
|
||||
- 移除数据中添加的 `indexForSort`。[#2501](https://github.com/ant-design/ant-design/issues/2501)
|
||||
- 修复 `pagination` 属性中 `defaultPageSize` 不生效的问题。[#2874](https://github.com/ant-design/ant-design/issues/2874)
|
||||
- 修复数据为空时固定列出现重复提示的问题。[#2812](https://github.com/ant-design/ant-design/issues/2812)
|
||||
- 给树形子数据增加排序功能。[#2839](https://github.com/ant-design/ant-design/issues/2839)
|
||||
- `InputNumber` 样式问题修复。[#2876](https://github.com/ant-design/ant-design/issues/2876)
|
||||
- 修复手动导入 less 文件时 input error 样式被 focus 样式覆盖的问题。[#2916](https://github.com/ant-design/ant-design/issues/2916)
|
||||
- index.d.ts 中补充了一些缺失的声明，修复 `Form` 中 typescript 语法检查报错的问题。[#2885](https://github.com/ant-design/ant-design/issues/2885)
|
||||
- 升级 react-slick 依赖到 `0.13`。
|
||||
|
||||
## 1.10.0
|
||||
|
||||
`2016-08-20`
|
||||
|
||||
- Affix 和 BackTop 新增 `target` 属性，支持指定滚动容器。[#2718](https://github.com/ant-design/ant-design/issues/2718)
|
||||
- 文档页面加上编辑按钮，方便社区贡献。[#2325](https://github.com/ant-design/ant-design/issues/2325)
|
||||
- 升级 rc-cascader 依赖，修复一个 `loadData` 属性和表单结合使用的问题。[#2767](https://github.com/ant-design/ant-design/issues/2767)
|
||||
- 修复 `editable-card` 类型的 Tabs 没有关闭图标的问题。[#2747](https://github.com/ant-design/ant-design/issues/2747)
|
||||
- Menu 修正默认 `z-index`。[#2762](https://github.com/ant-design/ant-design/issues/2762)
|
||||
- 修正 Select 组件在 IE 下的一些样式问题。[#2741](https://github.com/ant-design/ant-design/issues/2741)
|
||||
|
||||
## 1.9.1
|
||||
|
||||
`2016-08-16`
|
||||
|
||||
- 修复 `editable-card` 类型的 Tabs 设置 `activeKey` 无效的问题。[#2725](https://github.com/ant-design/ant-design/issues/2725)
|
||||
- 修复一个 Table 的样式兼容性问题。[#2723](https://github.com/ant-design/ant-design/issues/2723)
|
||||
- 更新 axure 部件库。[#2714](https://github.com/ant-design/ant-design/issues/2714)
|
||||
|
||||
## 1.9.0
|
||||
|
||||
`2016-08-15`
|
||||
|
||||
- Transfer 修复在火狐下 item 文案过长时只显示省略号的问题。[#2674](https://github.com/ant-design/ant-design/issues/2674)
|
||||
- Input 修复 `autosize` 模式下特定场景中不能输入中文及光标定位不准的问题。[#2666](https://github.com/ant-design/ant-design/issues/2666) [#2239](https://github.com/ant-design/ant-design/issues/2239)
|
||||
- Tabs 修复 `type="editable-card"` 模式下的 `children` 解析问题。[#2658](https://github.com/ant-design/ant-design/issues/2658)
|
||||
- Radio 修复若干 less 硬编码问题。[#2424](https://github.com/ant-design/ant-design/issues/2424)
|
||||
- Upload 的 rc-upload 依赖升级至 2.x，引入的变化有：
|
||||
- 增加 `disabled` 属性。[#2645](https://github.com/ant-design/ant-design/issues/2645)
|
||||
- 取消上传时会自动 abort 上传请求。[#2571](https://github.com/ant-design/ant-design/issues/2571) [#2518](https://github.com/ant-design/ant-design/issues/2518)
|
||||
- Table
|
||||
- 修复 spin 在可滚动区域的定位问题。[#2652](https://github.com/ant-design/ant-design/issues/2652)
|
||||
- 修复无数据时 提示样式错位的问题。[#2663](https://github.com/ant-design/ant-design/issues/2663)
|
||||
- Popover 修复设定 `getTooltipContainer` 后会导致内嵌 DatePicker 样式失效的问题。[#2675](https://github.com/ant-design/ant-design/issues/2675)
|
||||
- Modal 修复重复卸载组件导致的报错。[#2688](https://github.com/ant-design/ant-design/issues/2688)
|
||||
- 升级 rc-slider 组件依赖。
|
||||
|
||||
## 1.8.0
|
||||
|
||||
`2016-08-08`
|
||||
|
||||
- 修复可关闭 Tabs 组件只有一个 Tab 的时候报错的问题。[#2559](https://github.com/ant-design/ant-design/issues/2559)
|
||||
- 修复 Datepicker 在 IE8 下关闭图标。[#2584](https://github.com/ant-design/ant-design/issues/2584)
|
||||
- Tags 支持自定义标签颜色。[#2585](https://github.com/ant-design/ant-design/issues/2585)
|
||||
- TreeSelect 修复未找到内容时的样式。[9cee9f](https://github.com/ant-design/ant-design/commit/9cee9f103a4729572358206c81cba84e2fdc20f5)
|
||||
- Modal 适配小屏幕。[#2597](https://github.com/ant-design/ant-design/issues/2597)
|
||||
- 修复了 Row 组件在同一行闭合会报错的问题。[#2603](https://github.com/ant-design/ant-design/issues/2603)
|
||||
- Table 的 `rowSelection.onChange` 的参数 `selectedRows` 现在和 `selectedRowKeys` 保持一致。[#2566](https://github.com/ant-design/ant-design/issues/2603)
|
||||
- Checkbox 和 Radio 现在支持 `onClick` 属性。
|
||||
|
||||
## 1.7.0
|
||||
|
||||
`2016-07-30`
|
||||
|
||||
友情提示 [Ant Design Mobile](http://mobile.ant.design) 已经发布。
|
||||
|
||||
- Table
|
||||
- 现可以定义页头。[demo](http://ant.design/components/table#components-table-demo-bordered)
|
||||
- 修复当 `rowKey` 为 `String` 时的报错问题。[#2500](https://github.com/ant-design/ant-design/issues/2500)
|
||||
- 修复 `Table` 会修改 `dataSource` 里面的值的问题。[#2501](https://github.com/ant-design/ant-design/issues/2501)
|
||||
- Form 现在不再需要显式传递 `form={this.props.form}`。
|
||||
- 优化 Breadcrumb.Item 的 hover 效果。
|
||||
- 优化 Progress 的动画效果。
|
||||
- DatePicker
|
||||
- 优化清除按钮样式。
|
||||
- 修复点击 `此刻` 时不触发 `onChange` 的问题。[#1902](https://github.com/ant-design/ant-design/issues/1902)
|
||||
- Menu
|
||||
- 修复子菜单中的 Item 被选中后，父级元素无样式变化的问题。[#2414](https://github.com/ant-design/ant-design/issues/2414)
|
||||
- 修复 Menu.Item disabled 后的样式问题。
|
||||
- TreeSelect
|
||||
- treeNodes 可以设置是否可选。[#2401](https://github.com/ant-design/ant-design/issues/2401)
|
||||
- 修复多选模式下进行搜索会把已选项清掉的问题。[#2393](https://github.com/ant-design/ant-design/issues/2393)
|
||||
- 修复 TreeSelect 会修改原数据的问题。[#2459](https://github.com/ant-design/ant-design/issues/2459)
|
||||
- 修复了 Select 组件 placeholder 溢出的问题。[#2480](https://github.com/ant-design/ant-design/pull/2480)
|
||||
- 修复 Timeline.Item 无法自定义边框颜色的问题。[#2479](https://github.com/ant-design/ant-design/issues/2479)
|
||||
- 修复 Spin 显示突兀的问题。[#2398](https://github.com/ant-design/ant-design/issues/2398)
|
||||
- 修复 Cascader 选项文字过长导致的样式问题。[#2515](https://github.com/ant-design/ant-design/issues/2515)
|
||||
|
||||
## 1.6.5
|
||||
|
||||
`2016-07-16`
|
||||
|
||||
- 修复 Input 的 `value prop on input should not be null` 警告并且导致在表单中无法重置的问题。[#2335](https://github.com/ant-design/ant-design/issues/2335)
|
||||
- 优化 FormItem 的布局实现，修复表单布局不支持响应式布局的问题。[#2305](https://github.com/ant-design/ant-design/issues/2305)
|
||||
- 修复带时间的 DatePicker 的 onChange 触发逻辑。[#2399](https://github.com/ant-design/ant-design/issues/2399#issuecomment-232893146)
|
||||
- 修复 Transfer 搜索后全选的问题。[#2396](https://github.com/ant-design/ant-design/issues/2396)
|
||||
- 修复 Cascader 样式会被 ant-input 样式覆盖的问题。[#2400](https://github.com/ant-design/ant-design/issues/2400)
|
||||
- 修复 Table 删除数据时导致当前页数溢出的问题。[#2301](https://github.com/ant-design/ant-design/pull/2301)
|
||||
- 修复 resize 浏览器时 Affix 元素没有和原来的位置同步的问题。[#1987](https://github.com/ant-design/ant-design/issues/1987)
|
||||
- 给 Affix 元素添加占位，修复固定时页面跳动的问题。
|
||||
- 修复 Select combobox 模式会导致页面出现横向滚动条的问题。[#2353](https://github.com/ant-design/ant-design/issues/2353)
|
||||
- 修复 Upload 组件已上传文件链接点击无效的问题。[#2331](https://github.com/ant-design/ant-design/issues/2331)
|
||||
- 修复 Upload 上传过程中删除图片后的报错问题。[#2342](https://github.com/ant-design/ant-design/issues/2342)
|
||||
|
||||
## 1.6.4
|
||||
|
||||
`2016-07-08`
|
||||
|
||||
- 修复组件在 react@15.2.0 下报 Unknown props 警告的问题。[#2258](https://github.com/ant-design/ant-design/issues/2258)
|
||||
- `Table`
|
||||
- 修复 filterDropDown 中内容未改变也会调用 onChange 的问题。[#2228](https://github.com/ant-design/ant-design/issues/2228)
|
||||
- 修复设置 scroll.y 高度后导致内容无法对齐的问题。[#2227](https://github.com/ant-design/ant-design/issues/2227)
|
||||
- `Form`
|
||||
- 修复 `FormItem` 中带空格后缀的冒号替换问题，关联issue：[#1877](https://github.com/ant-design/ant-design/issues/1877)
|
||||
- demo 优化。
|
||||
- `Transfer`
|
||||
- 修复重复 render 的问题，性能优化。[#2112](https://github.com/ant-design/ant-design/issues/2112)
|
||||
- 优化搜索逻辑，修复搜索时未对特殊字符进行处理的问题。[#2260](https://github.com/ant-design/ant-design/issues/2260)
|
||||
- 清除按钮样式优化。
|
||||
- 修复 `Steps` 最后一步多余横线隐藏的问题。
|
||||
- 修复 `Cascader` small size 样式下沉 1px，以及 hover/click 样式残缺的问题。[#2234](https://github.com/ant-design/ant-design/issues/2234)
|
||||
- 修复 `RangePicker` 无清除按钮的问题。[#2252](https://github.com/ant-design/ant-design/issues/2252)
|
||||
|
||||
## 1.6.3
|
||||
|
||||
`2016-07-04`
|
||||
|
||||
- 修复 Transfer 的一个 unmount 的错误。[#2206](https://github.com/ant-design/ant-design/pull/2206)
|
||||
- 修复了 Badge、Alert、Menu、Tag、Checkbox、Radio 组件的一些样式细节问题。
|
||||
|
||||
## 1.6.2
|
||||
|
||||
`2016-06-27`
|
||||
|
||||
- 修复 Table、Transfer 的样式错位问题。
|
||||
- 修复 DatePicker 的一个样式问题。[#2182](https://github.com/ant-design/ant-design/issues/2182)
|
||||
- 优化 Menu 的 hover 样式响应性能。
|
||||
|
||||
## 1.6.1
|
||||
|
||||
`2016-06-24`
|
||||
|
||||
- 回滚一个未完成的 DatePicker 时间选项改造效果。
|
||||
|
||||
## 1.6.0
|
||||
|
||||
`2016-06-24`
|
||||
|
||||
- 新增置顶组件 [BackTop](/components/back-top)。
|
||||
- 全新的 [Spin](/components/spin) 样式。
|
||||
- 给 `Modal.xxx` 系列方法添加了 `{ destory }` 的访问值，方便事后销毁。[#2110](https://github.com/ant-design/ant-design/issues/2110)
|
||||
- Table 的 `rowKey` 属性支持直接使用字符串。[#2058](https://github.com/ant-design/ant-design/issues/2058)
|
||||
- Table 增加 `column.filterDropdown` 属性用于自定义渲染筛选菜单的浮层。[#1736](https://github.com/ant-design/ant-design/issues/1736)
|
||||
- 修复 Tooltip、Popover、Popconfirm 设置 `onVisibleChange` 后失效的问题。[#2134](https://github.com/ant-design/ant-design/issues/2134)
|
||||
- 修复在 IE8 下 Checkbox 的勾样式变形的问题。[#2148](https://github.com/ant-design/ant-design/issues/2148)
|
||||
- 优化 Checkbox、Radio 失效状态的文字颜色。[#2114](https://github.com/ant-design/ant-design/issues/2114)
|
||||
- 优化 Checkbox、Radio 的默认边距过于拥挤的问题。[#2137](https://github.com/ant-design/ant-design/issues/2137)
|
||||
- 优化 Pagination 在暗色背景下的样式。[#2126](https://github.com/ant-design/ant-design/issues/2126)
|
||||
- 修复 Table 固定列时内容无法换行和高度对齐的问题，同时修复了一个 Chrome 下的表格内容错位问题。[#2130](https://github.com/ant-design/ant-design/issues/2130)
|
||||
- 修复一个 Table 的 `rowSelection` 设为 null 时可能导致报错的问题。[#2127](https://github.com/ant-design/ant-design/issues/2127)
|
||||
- 修复在 IE8 下点击 Table 选择框报错的问题。[#2154](https://github.com/ant-design/ant-design/issues/2154)
|
||||
- 小幅优化了 Transfer 的渲染性能。[#2112](https://github.com/ant-design/ant-design/issues/2112)
|
||||
- 将 DatePicker 的清除按钮从面板上移到外部输入框，解决用户容易误解为关闭的问题。[#1708](https://github.com/ant-design/ant-design/issues/1708)
|
||||
- Upload 的 `onPreview` 现在没有 `file.url` 时也能生效。[#2163](https://github.com/ant-design/ant-design/issues/2163)
|
||||
|
||||
## 1.5.1
|
||||
|
||||
`2016-06-21`
|
||||
|
||||
- 修复一个 TypeScript 定义文件的语法错误。
|
||||
- 修复 Table 固定表头高度和滚动条样式问题。
|
||||
|
||||
## 1.5.0
|
||||
|
||||
`2016-06-17`
|
||||
|
||||
- 升级 `rc-form` 到 0.17，支持 `getFieldProps('xx.yy')` 的写法，并支持单多选控件进行关联。[#](https://github.com/react-component/form/pull/21)
|
||||
- Input 的 `addonBefore` 和 `addonAfter` 支持内嵌选择框。[#1927](https://github.com/ant-design/ant-design/issues/1927)
|
||||
- 优化了两个 DatePicker 组成的时间范围选择演示的体验。
|
||||
- 优化一个多个对话框的遮罩层高度的问题。[#2009](https://github.com/ant-design/ant-design/issues/2009)
|
||||
- 优化 Table 的 `getCheckboxProps` 的调用次数。[#2086](https://github.com/ant-design/ant-design/issues/2086)
|
||||
- 修复 Table 固定列时，表头无法左右滚动的问题。[#2068](https://github.com/ant-design/ant-design/issues/2068)
|
||||
- 修复小型表格固定表头的样式。[#2023](https://github.com/ant-design/ant-design/issues/2023)
|
||||
- 修复 Tabs 的 `tabPosition` 为左右时样式错位的问题。[#2046](https://github.com/ant-design/ant-design/issues/2046)
|
||||
- 修复 RangePicker 的日期范围背景丢失的问题。
|
||||
- 修复 Switch 失效状态下文字颜色太浅的问题。[#2051](https://github.com/ant-design/ant-design/issues/2051)
|
||||
- 修复一个 Select 的 `disabled` 选项依然可以被移除的问题。[#2034](https://github.com/ant-design/ant-design/issues/2034)
|
||||
- 修复官方站点在 IE 下的报错问题。
|
||||
|
||||
## 1.4.1
|
||||
|
||||
`2016-06-12`
|
||||
|
||||
- 修复一个展开 Tabs 会导致表格宽度溢出的问题。[#2013](https://github.com/ant-design/ant-design/issues/2013)
|
||||
- 修复一个某些情况下表格布局被破坏的问题。
|
||||
|
||||
## 1.4.0
|
||||
|
||||
`2016-06-12`
|
||||
|
||||
此版本之后你可能会遇到 [#2030](https://github.com/ant-design/ant-design/issues/2030)，请使用 `react@15+` 或 `npm@3+`。
|
||||
|
||||
- `Input[type="textarea"]` 支持自动调整高度。 [#](http://ant.design/components/input#components-input-demo-autosize-textarea)
|
||||
- `Breadcrumb`
|
||||
- `nameRender` 新增 `route` 和 `params` 参数。 [#1999](https://github.com/ant-design/ant-design/issues/1999)
|
||||
- `linkRender` 新增 `paths` 参数。
|
||||
- 再次修复 `Table` 组件 `rowSelection.onChange` 与 `onRowClick` 冲突问题。 [#1470](https://github.com/ant-design/ant-design/issues/1470)
|
||||
- 修复 `Form.Item` 中 `Input` 高度抖动问题。 [#1955](https://github.com/ant-design/ant-design/issues/1955)
|
||||
- 修复高级搜索的 `ant-advanced-search-form` 样式丢失的问题。
|
||||
|
||||
## 1.3.2
|
||||
|
||||
`2016-06-06`
|
||||
|
||||
- 修复全局模式下引用 antd，IE8 环境报错的问题。 [#1970](https://github.com/ant-design/ant-design/issues/1970)
|
||||
|
||||
## 1.3.1
|
||||
|
||||
`2016-06-06`
|
||||
|
||||
- 修复 `Message` `Notification` 找不到的问题。 [#1968](https://github.com/ant-design/ant-design/issues/1968)
|
||||
|
||||
## 1.3.0
|
||||
|
||||
`2016-06-02`
|
||||
|
||||
- Transfer 组件增加 `rowKey` 属性，可自定义数据源主键。 [#1900](https://github.com/ant-design/ant-design/issues/1900)
|
||||
- Tag 组件 `default` 类型的样式增加边框，防止淹没在背景中。 [#1910](https://github.com/ant-design/ant-design/issues/1910)
|
||||
- Table
|
||||
- 修复筛选为单选时仍旧展示多选框的问题。 [#1880](https://github.com/ant-design/ant-design/issues/1880)
|
||||
- 修复 fixed left 的固定列会覆盖 rowSelection 的 Checkbox 的问题。 [#1829](https://github.com/ant-design/ant-design/issues/1829)
|
||||
- 升级 rc-table 依赖
|
||||
- 修复了 fixed 列中数据重复展示以及一些错位问题。 [#1898](https://github.com/ant-design/ant-design/issues/1898)
|
||||
- `dataIndex` 支持内嵌属性的写法。 [react-component/table#46](https://github.com/react-component/table/issues/46)
|
||||
- 修复了 v1.2.0 新增加的组件属性的 TypeScript 定义。 [#1933](https://github.com/ant-design/ant-design/issues/1933)
|
||||
- Form 修复 label中冒号的国际化问题，采用样式实现冒号，不再需要手动输入冒号。 [#1877](https://github.com/ant-design/ant-design/issues/1877)
|
||||
- 修复 DatePicker 组件点击『此刻』失效的问题，并进行了一些代码优化。 [#1902](https://github.com/ant-design/ant-design/issues/1902)
|
||||
- 升级 rc-upload 依赖，修复了 IE10 中第二次上传同一文件不触发 `onChange` 的问题。 [058af3c](https://github.com/ant-design/ant-design/commit/b15a4e3165be5e4db995d3fe75d4d557c7f21c61)
|
||||
- 文档使用 [bisheng](https://github.com/benjycui/bisheng) 重构。
|
||||
|
||||
## 1.2.1
|
||||
|
||||
`2016-05-27`
|
||||
|
||||
- 修复一个 Select 组件的文字重复问题。
|
||||
|
||||
## 1.2.0
|
||||
|
||||
`2016-05-26`
|
||||
|
||||
- Input 组件的文档现在和 Form 分离。 [3c98d3](https://github.com/ant-design/ant-design/commit/3c98d3f80f4ec80066756adc3b4108141d4383ca)
|
||||
- Affix
|
||||
- 新增了 `onChange` 属性。当固定状态改变时回调 [#1777](https://github.com/ant-design/ant-design/issues/1777)
|
||||
- 找回了从 affixStyle 中走失的 `width` 属性，修复固定后错位的问题。[#1820](https://github.com/ant-design/ant-design/issues/1820)
|
||||
- Table
|
||||
- 修复了 Table 组件的分页相关的一系列问题 [#1669](https://github.com/ant-design/ant-design/issues/1669) [#1842](https://github.com/ant-design/ant-design/issues/1842)
|
||||
- 修复了当有列固定在左边时，选择框不显示的问题 [#1829](https://github.com/ant-design/ant-design/issues/1829)
|
||||
- 修复了当 Checkbox 的 label 为数字 0 时， label 不显示的问题 [#1811](https://github.com/ant-design/ant-design/issues/1811)
|
||||
- 修复 Select combobox 模式下无法重置 `optionLabelProp` 的问题。[#1773](https://github.com/ant-design/ant-design/issues/1773)
|
||||
- 修复了 Tag 组件为 closeable 时，内部链接无法点击的问题 [#1862](https://github.com/ant-design/ant-design/issues/1862)
|
||||
- Tab 组件新增 `hideAdd` 属性，用于关闭右边的添加按钮 [#1750](https://github.com/ant-design/ant-design/issues/1750)
|
||||
- 修复了一个在某些情况下找不到 `normalize.css/normalize.css` 文件的问题。[ant-design/antd-init#52](https://github.com/ant-design/antd-init/issues/52)
|
||||
- 修复构建文件在 IE8 下报错的问题。[#1804](https://github.com/ant-design/ant-design/issues/1804)
|
||||
- 更新了第三方依赖。
|
||||
|
||||
## 1.1.0
|
||||
|
||||
`2016-05-18`
|
||||
|
||||
- Cascader 的选择框支持自定义渲染节点，并给 `displayRender` 方法增加了 `selectedOptions` 参数。[#1726](https://github.com/ant-design/ant-design/issues/1726)
|
||||
- Input.Group 新增 `size` 属性，可设置控件尺寸。[#1732](https://github.com/ant-design/ant-design/issues/1732)
|
||||
- Layout 新增常用布局：侧边导航展开收起模式。[#1643](https://github.com/ant-design/ant-design/issues/1643)
|
||||
- Transfer 支持自定义渲染行数据。[#1664](https://github.com/ant-design/ant-design/issues/1664)
|
||||
- Upload 的 children 为空时，不再显示上传按钮。[#1610](https://github.com/ant-design/ant-design/issues/1610)
|
||||
- Table
|
||||
- 修复 `filter` 过滤数据后显示错误分页的问题。[#1669](https://github.com/ant-design/ant-design/issues/1669)
|
||||
- 修复 `pagination` 不指定时显示错误分页的问题。[#1683](https://github.com/ant-design/ant-design/issues/1683)
|
||||
- Modal
|
||||
- 修复弹出时背景依然跟随滚动的问题。[#1751](https://github.com/ant-design/ant-design/issues/1751)
|
||||
- 修复关闭按钮获得焦点时的样式问题。[#1668](https://github.com/ant-design/ant-design/issues/1668)
|
||||
- 将搜索输入框相关样式移到 Input 组件下。[7b7f846](https://github.com/ant-design/ant-design/commit/7b7f8461611e53f4f96ae8d64d37fe28ee8d2553)
|
||||
- 修复 Select 获得焦点时的样式问题。[#1684](https://github.com/ant-design/ant-design/issues/1684)
|
||||
- 修复 TreeSelect 占位符样式问题。[#1657](https://github.com/ant-design/ant-design/issues/1657)
|
||||
- 修复了类型定义以更好地支持 `TypeScript`。[#1696](https://github.com/ant-design/ant-design/pull/1696) [@xujihui1985](https://github.com/xujihui1985)
|
||||
- 优化了 LocaleProvider。[a3850a4](https://github.com/ant-design/ant-design/commit/a3850a4df84d7055a1a40600919f2f9ba1bbf2b2)
|
||||
- 其他组件的样式优化。
|
||||
|
||||
## 1.0.1
|
||||
|
||||
`2016-05-11`
|
||||
|
||||
- 修复当 Table 的 `rowSelection.type` 为 'radio' 时的报错。[#1627](https://github.com/ant-design/ant-design/issues/1627)
|
||||
- 修复 CheckboxGroup 与 `getFieldProps`共用时的问题。[#1631](https://github.com/ant-design/ant-design/issues/1631)
|
||||
- 修复 RangePicker 中 TimePicker 不会受 locale 控制的问题。[#1635](https://github.com/ant-design/ant-design/issues/1635)
|
||||
- 修复 Tag 组件缺失的问题。
|
||||
- 修复 Table 的 className 不在最外层容器上的问题。
|
||||
- 修复一个样式文件重复打包的问题。
|
||||
|
||||
## 1.0.0
|
||||
|
||||
`2016-05-09`
|
||||
|
||||
很高兴的通知各位，经过四个月时间的紧密开发，`antd@1.0.0` 终于发布了。从去年 5 月 7 日提交第一行代码以来，经过整整一年的开发迭代，antd 受到社区的大量关注，使用的公司和产品持续增加，已经日趋成熟。这个版本我们重构了底层代码和站点，持续完善现有组件功能和优化细节，其中很多都来自社区的贡献，无法一一感谢，欢迎各位持续关注和鞭策。在升级过程中遇到任何问题，请及时反馈给我们。
|
||||
|
||||
### 主要变化
|
||||
|
||||
- 全新的[色彩系统](https://ant.design/docs/spec/colors-cn#Color-Palettes)，组件主色由 『`#108EE9`』 改为 『`#1890FF`』，新主色我们称之为『拂晓蓝』。
|
||||
- 全新的视觉样式和组件尺寸，更现代更美观。
|
||||
- 基础字体大小由 `12px` 增大到 `14px`。
|
||||
- 默认语言由中文改为英文。
|
||||
- 全面支持 React 16。
|
||||
- 更友好的 TypeScript 支持。
|
||||
- 新的 [List](https://ant.design/components/list-cn/) 组件。
|
||||
- 新的 [Divider](https://ant.design/components/divider-cn/) 组件。
|
||||
- 新增 30 个[图标](https://ant.design/components/icon-cn/)。
|
||||
- **兼容 React@15.x**。
|
||||
- **全新单页站点**，使用 React 和 antd 进行了彻底重构，加载更快，访问更流畅。
|
||||
- **样式支持按需加载**。可参考 [antd-init](https://github.com/ant-design/antd-init) 的模版代码, 需要配合 [babel-plugin-antd](https://github.com/ant-design/babel-plugin-antd#usage) 插件和 `style` 配置进行使用。[#900](https://github.com/ant-design/ant-design/issues/900)
|
||||
- **提供独立的构建文件**。[文档](/docs/react/install#浏览器引入)
|
||||
- 新增卡片组件 [Card](/components/card)。
|
||||
- 新增评分组件 [Rate](/components/rate)。
|
||||
- 新增 [LocaleProvider](/components/locale-provider) 组件，提供组件文案的国际化支持，并新增了英语和俄语的语言配置。[#1411](https://github.com/ant-design/ant-design/issues/1411)
|
||||
- 更好的服务端渲染支持，修复了 Badge、Spin、Calendar、Upload 等组件服务端渲染的问题。
|
||||
- 新增 antd.d.ts 以更好的支持 TypeScript。[@bang88](https://github.com/bang88)
|
||||
- 布局组件支持响应式布局和栅格间隔设置。[#1082](https://github.com/ant-design/ant-design/issues/1082)
|
||||
- Table 支持固定列和横向滚动。[#1265](https://github.com/ant-design/ant-design/issues/1265)
|
||||
|
||||
### 不兼容改动
|
||||
|
||||
- Card 的 `noHovering` 属性重命名为 `hoverable`，且默认值改为 `true`。
|
||||
- 调整了 Grid 的响应式断点值。详见 [#7230](https://github.com/ant-design/ant-design/pull/7230)
|
||||
- Form `getFieldDecorator` 的 `exclusive` 参数被移除，此类场景应该由 Radio.Group、Checkbox.Group 之类的组件来完成。
|
||||
- 新增 `Form.createFormField` 方法，`mapPropsToFields` 返回的字段都需要由该方法创建。
|
||||
此版本有部分不兼容的改动，升级时确保修改相应的使用代码。
|
||||
|
||||
```diff
|
||||
import { Form } from 'antd';
|
||||
- 推荐使用样式按需加载。如果依然需要整体载入样式，**样式入口文件已变为** `antd/dist/antd.css` 和 `antd/dist/antd.less`。如果你在项目中覆盖了 less 变量，less 文件的引用方式也有 [相应变更](https://github.com/ant-design/ant-design/issues/1558#issuecomment-218120000)。
|
||||
|
||||
Form.create({
|
||||
mapPropsToFields() {
|
||||
return {
|
||||
- name: { value: 'antd' },
|
||||
+ name: Form.createFormField({ value: 'antd' }),
|
||||
};
|
||||
},
|
||||
})
|
||||
```
|
||||
```diff
|
||||
- import 'antd/lib/index.css'; // import 'antd/style/index.less';
|
||||
+ import 'antd/dist/antd.css'; // import 'antd/dist/antd.less';
|
||||
```
|
||||
|
||||
- 优化了全局的重置样式，如果升级后你的全局样式有问题，可以引入我们提供的 2.x 兼容样式。
|
||||
- 完全移除了 `0.12` 中废弃的 Validation 组件，可以直接 import [rc-form-validation](https://github.com/react-component/form-validation) 用以代替。[#1096](https://github.com/ant-design/ant-design/issues/1096)
|
||||
- Breadcrumb.Item 的 `href` 属性被移除，请直接用 `a` 标签包裹可点击的内容。
|
||||
- Modal 移除了 `align` 属性，现在可以使用 `style` 属性调整位置。
|
||||
- `Modal.confirm` 等方法的配置项 `iconClassName` 重命名为 `iconType`。
|
||||
- Select 移除了 `onChange` 中的 `label` 参数，新增了 `labelInValue` 属性。[#1695](https://github.com/ant-design/ant-design/issues/1695)
|
||||
- 移除了 `import { Form } from 'antd/lib/form';` 的用法，应统一为 `import { Form } from 'antd';` 或 `import Form from 'antd/lib/form';`。
|
||||
|
||||
```javascript
|
||||
import 'antd/lib/style/v2-compatible-reset';
|
||||
```
|
||||
#### 有兼容提示的改动
|
||||
|
||||
或者在 less 里引入
|
||||
这里的改动在升级后控制台会出现警告提示，请按提示进行修改。
|
||||
|
||||
```less
|
||||
@import '~antd/lib/style/v2-compatible-reset.less';
|
||||
```
|
||||
|
||||
- 由于默认语言改为英文，如果你需要显示中文，现在需要配置 `LocalProvider`。
|
||||
|
||||
```javascript
|
||||
import { LocaleProvider } from 'antd';
|
||||
import zhCN from 'antd/lib/locale-provider/zh_CN';
|
||||
|
||||
ReactDOM.render(
|
||||
<LocaleProvider locale={zhCN}><YourApp /></LocaleProvider>,
|
||||
document.getElementById('root')
|
||||
);
|
||||
```
|
||||
|
||||
- Form 下的表单控件不再默认为 `size="large"`。
|
||||
- `Input.Search` 默认的 🔍 图标只作为装饰，不再响应用户交互。需要添加可交互按钮请使用 `enterButton`。
|
||||
- UMD 版本的 `dist/antd.js` 不再包含 moment，使用的时候需要自己引入 moment。
|
||||
```diff
|
||||
<html>
|
||||
<head>
|
||||
+ <script src="https://unpkg.com/moment@2.19.3/moment.js"></script>
|
||||
<script src="https://unpkg.com/antd@3.0.0/dist/antd.js"></script>
|
||||
</head>
|
||||
</html>
|
||||
```
|
||||
|
||||
### 以下在 2.x 中废弃的特性被移除
|
||||
|
||||
- 🗑 移除了 DatePicker.Calendar， 请直接使用 Calendar 组件。
|
||||
- 🗑 移除了 DatePicker 的 `toggleOpen` 属性， 请使用 `onOpenChange` 代替。
|
||||
- 🗑 移除了 Form 的 `inline`、`horizontal`、`vertical` 属性，请使用 `layout` 代替。
|
||||
- 🗑 移除了 Select 的 `multiple`、`tags`、`combobox` 属性，请使用 `mode` 代替。
|
||||
- 🗑 移除了 Input 对 `type='textarea'` 的支持，请直接使用 `Input.TextArea` 组件。
|
||||
- 🗑 移除了 Mention 的 `toEditorState` 方法，请使用 `toContentState` 代替。
|
||||
|
||||
### 新增功能及改进
|
||||
|
||||
- 🌟 Tabs 新增 `size="large"`。
|
||||
- 🌟 Row 的 `gutter` 属性新增响应式断点的支持，可以使用诸如 `gutter={{ sm: 16, lg: 32 }}` 的设置。
|
||||
- 🌟 Spin 新增 `indicator` 属性，用于设置自定义的加载指示符。 [#7977](https://github.com/ant-design/ant-design/pull/7977) [@kossel](https://github.com/ant-design/ant-design/pull/7977)
|
||||
- 🌟 Input.Search 新增 `enterButton` 用于设置自定义的搜索图标。[#7596](https://github.com/ant-design/ant-design/issues/7596)
|
||||
- 🌟 Mention 新增 `placement`, 用于设置下拉框的弹出方向。
|
||||
- 🌟 Carousel 新增 `next()`、`prev()`、`goTo(slideNumber)` 方法，用于控制面板展示。
|
||||
- 🌟 Button 新增链接支持，当提供 `href` 时会自动渲染为 `<a>`。[#8343](https://github.com/ant-design/ant-design/pull/8343)
|
||||
- 🌟 Steps 进行了重构，首次渲染的时候不会再闪烁。 [#6010](https://github.com/ant-design/ant-design/issues/6010)
|
||||
- 🌟 Switch 新增 `loading` 属性，用于表现加载中的状态。
|
||||
- Menu
|
||||
- 🌟 我们使用了 [rc-trigger](https://github.com/react-component/trigger) 重构了菜单以支持延迟加载和窗口边缘浮层自适应方向。
|
||||
- 🌟 新增 `subMenuOpenDelay` 和 `subMenuCloseDelay`，用于设置子菜单打开和关闭的延迟。
|
||||
- 🌟 新增 `forceSubMenuRender`，用于强制渲染子菜单。[#5586](https://github.com/ant-design/ant-design/issues/5586)
|
||||
- Form
|
||||
- 🌟 新增显示验证信息时的动画效果。
|
||||
- 🌟 新增按条件渲染表单项的支持。[#react-component/117](https://github.com/react-component/form/issues/117)
|
||||
- Message
|
||||
- 🌟 `duration` 允许可选 [#7857](https://github.com/ant-design/ant-design/issues/7857) [@monkindey](https://github.com/monkindey)
|
||||
- Badge
|
||||
- 🌟 新增 `offset` 属性，用于设置状态点的位置偏移。
|
||||
- 🌟 `status` 允许与 `children` 同时使用。[#8164](https://github.com/ant-design/ant-design/issues/8164)
|
||||
- Card
|
||||
- 🌟 新增 `inner` 类型。[例子](https://ant.design/components/card-cn/#components-card-demo-inner)。
|
||||
- 🌟 新增 `cover`、`actions` 以及 `Meta` 子组件。[例子](https://ant.design/components/card-cn/#components-card-demo-meta)。
|
||||
- DatePicker
|
||||
- 🌟 新增 `mode` 和 `onPanelChange`，用户控制面板的展示模式。[例子](https://ant.design/components/date-picker-cn/#components-date-picker-demo-mode)。
|
||||
- 🌟 新增 `WeekPicker` 子组件。[例子](https://ant.design/components/date-picker-cn/#components-date-picker-demo-basic)
|
||||
- 🌟 新增 `dateRender` 属性，用于自定义日期单元格的渲染。
|
||||
- TimePicker
|
||||
- 🌟 新增 `hourStep`、`minuteStep`、`secondStep`，用于设置时间步长。[例子](https://ant.design/components/time-picker-cn/#components-time-picker-demo-interval-options)
|
||||
- 🌟 新增 `focusOnOpen`，用于设置在打开面板的时候是否聚焦输入框。
|
||||
- Table
|
||||
- 🌟 新增 `components` 属性，用于覆盖表格元素的默认标签。
|
||||
```javascript
|
||||
// 支持覆盖的元素
|
||||
const components = {
|
||||
table: MyTable,
|
||||
header: {
|
||||
wrapper: HeaderWrapper,
|
||||
row: HeaderRow,
|
||||
cell: HeaderCell,
|
||||
},
|
||||
body: {
|
||||
wrapper: BodyWrapper,
|
||||
row: BodyRow,
|
||||
cell: BodyCell,
|
||||
},
|
||||
};
|
||||
|
||||
<Table components={components} columns={columns data={data}} />
|
||||
```
|
||||
- 🌟 新增 `onRow` 属性，用于设置表格列的属性。
|
||||
- 🌟 新增 `onHeaderRow`，用户设置表格头部列的属性。
|
||||
- 🌟 新增 `column[onCell]`，用户设置单元格的属性。
|
||||
- 🌟 新增 `column[onHeaderCell]`，用于设置头部单元格的属性。
|
||||
- 🌟 新增 `column[align]`，用于设置列内文字的对其方向。
|
||||
- 🌟 新增 `column[defaultSortOrder]`，用于设置列的默认排序。[#8111](https://github.com/ant-design/ant-design/pull/8111) [@megawac](https://github.com/megawac)
|
||||
- 🌟 新增 `rowSelection[fixed]`，用于固定选择列。
|
||||
- 🙅 废弃 `getBodyWrapper`，请使用 `components` 属性代替。
|
||||
- 🙅 废弃以下属性 `onRowClick`，`onRowDoubleClick`、`onRowContextMenu`、`onRowMouseEnter`、`onRowMouseLeave`，请使用 `onRow` 代替。
|
||||
```javascript
|
||||
<Table onRow={(record) => ({
|
||||
onClick: () => {},
|
||||
onDoubleClick: () => {},
|
||||
onContextMenu: () => {},
|
||||
onMouseEnter: () => {},
|
||||
onMouseLeave: () => {},
|
||||
})} />
|
||||
```
|
||||
- Select
|
||||
- 🌟 默认和多选模式下 Option 的值允许使用 number。
|
||||
- 🌟 新增 `maxTagCount 和 `maxTagPlaceholder`，用与设置最多可显示的选中项。
|
||||
- 🌟 新增 `showAction`，用于设置出发下拉框打开的事件。
|
||||
- 🌟 新增 `onMouseEnter` 和 `onMouseLeave` 事件回调。
|
||||
- LocaleProvider
|
||||
- 🇮🇸 新增冰岛语。[#7561](https://github.com/ant-design/ant-design/pull/7561) [@paunovic-stefan](https://github.com/paunovic-stefan)
|
||||
- 🇪🇬 新增埃及语。[#7888](https://github.com/ant-design/ant-design/pull/7888) [@mohamed-seada-1994](https://github.com/mohamed-seada-1994)
|
||||
- 🇺🇦 新增乌克兰语。[#8169](https://github.com/ant-design/ant-design/pull/8169) [@anxolerd](https://github.com/anxolerd)
|
||||
- 废弃 QueueAnim，可以直接 import [rc-queue-anim](https://github.com/react-component/queue-anim) 用以代替。Ant Design 的动效方案已移至 [Ant Motion](http://motion.ant.design/components/queue-anim)，欢迎前往探索。
|
||||
- Affix 的 `offset` 属性重命名为 `offsetTop`。
|
||||
- Popover 的 `overlay` 属性重命名为 `content`。
|
||||
- Progress.Line 使用方式改为 `<Progress />` 或 `<Progress type="line" />`。
|
||||
- Progress.Circle 使用方式改为 `<Progress type="circle" />`。
|
||||
- Spin 的 `spining` 属性更正为 `spinning`。
|
||||
- Alert 的 type `warn` 重命名为 `warning`。[#1225](https://github.com/ant-design/ant-design/issues/1225)
|
||||
- Tree 的 `onExpand` 参数从 `function(node, expanded, expandedKeys)` 调整为 `function(expandedKeys, {expanded, node})`。
|
||||
|
||||
### Bug 修复
|
||||
|
||||
- Form
|
||||
- 🐞 修复输入框的图标会被验证图标覆盖的问题。
|
||||
- 🐞 修复使用大尺寸输入框时，验证图标不居中的问题。
|
||||
- 🐞 修复 Menu 按键时的报错。[#8089](https://github.com/ant-design/ant-design/issues/8089)
|
||||
- 修复 Table 的 `size` 为 `middle` 时，分页器大小无法控制的问题。[#1396](https://github.com/ant-design/ant-design/issues/1396)
|
||||
- 修复 Table 的 `pagination.defaultCurrent` 失效的问题。
|
||||
- 修复 Cascader 的 `defaultValue` 没有被 `value` 覆盖的问题。
|
||||
- 修复 Select 同时设置 `allowClear` `disabled` 时还是会出现清除按钮的问题。[#1480](https://github.com/ant-design/ant-design/issues/1480)
|
||||
- 修复 Transfer 的 `DataSource` 变化时已选中项没有同步的问题。[#1587](https://github.com/ant-design/ant-design/issues/1587)
|
||||
- 修复 DatePicker 日期格式与国际化配置不同步的问题。[#1509](https://github.com/ant-design/ant-design/issues/1509)
|
||||
- 修复 Button 禁用时事件仍然会冒泡的问题。[#1541](https://github.com/ant-design/ant-design/issues/1541)
|
||||
- 修复 Carousel 自动播放时的卡顿和报错问题。[#1397](https://github.com/ant-design/ant-design/issues/1397)
|
||||
- 修复 Tabs 的 card 类型内嵌标准 Tabs 时的样式问题。[#1617](https://github.com/ant-design/ant-design/issues/1617)
|
||||
- 修复 Menu `horizontal` 和 `vertical` 模式不支持受控 `openKeys` 的问题。
|
||||
|
||||
### 其他
|
||||
### 其他改进
|
||||
|
||||
- 在 TypeScript 中使用时不再需要设置 `allowSyntheticDefaultImports`。
|
||||
- 从 `peerDependencies` 中移除了 `react@0.14` 和 `react@15`，虽然目前 antd 3.0.0 依然可以在旧版本的 React 上使用，但是我们在未来有可能使用 React 16 的新特性，所以强烈建议升级到 React 16，见[升级文档](https://reactjs.org/blog/2017/09/26/react-v16.0.html)。
|
||||
- 全面支持 ES Module ，antd 及其依赖的底层 react-component 组件全部提供了 ES Module 的构建版本，如果你使用 webpack 3，可以把 `babel-plugin-import` 的 `libraryDirectory` 设置为 `es`，以获得 Tree Shaking 的优化效果。
|
||||
- 最后，我们会继续维护 2.x 的分支到明年 6 月份。
|
||||
- 样式变量梳理，去除了部分无用的变量，另外还有大量样式细节问题修复。
|
||||
- 依赖的 normalize.css 升级到 [4.x](https://github.com/necolas/normalize.css/blob/4.1.1/CHANGELOG.md)。
|
||||
- 使用 ES2016 classes 重构了代码。[@waywardmonkeys](https://github.com/waywardmonkeys)
|
||||
- Popover、Popconfirm 和 Tooltip 组件根据不同的弹出位置有了更精准方向的弹出动画。
|
||||
- 补充 Select TreeSelect Switch Radio Checkbox 等组件的 `focus` 表现，增强表单组件的可用性。[#1358](https://github.com/ant-design/ant-design/issues/1358)
|
||||
- message 和 notification 现在可以全局配置 `duration`。[#1143](https://github.com/ant-design/ant-design/issues/1143)
|
||||
- DatePicker 和 TimePicker 的 `onChange(date, dateString)` 方法增加第二个参数用于获得格式化后的日期字符串。[#1104](https://github.com/ant-design/ant-design/issues/1104)
|
||||
- DatePicker 和 DatePicker.RangePicker 现在可以设置内部 TimePikcer 的属性。[#1415](https://github.com/ant-design/ant-design/issues/1415)
|
||||
- Checkbox
|
||||
- 支持类似 Radio 的使用方式 `<Checkbox>option</Checkbox>`。[#1029](https://github.com/ant-design/ant-design/issues/1029)
|
||||
- Checkbox.Group 现在允许 `label` 和 `value` 不同。[#1025](https://github.com/ant-design/ant-design/issues/1025)
|
||||
- Checkbox.Group 允许单独设置某个 Checkbox 为 `disabled`。[#1218](https://github.com/ant-design/ant-design/issues/1218)
|
||||
- Breadcrumb
|
||||
- 支持路由模式下自定义链接 `linkRender`。[#1026](https://github.com/ant-design/ant-design/issues/1026)
|
||||
- 支持路由模式下自定义最后一项内容 `nameRender`。[#1304](https://github.com/ant-design/ant-design/issues/1304)
|
||||
- Modal
|
||||
- 新增 `Modal.warning` 方法。
|
||||
- 弹出时背景不再跟随滚动。[#1195](https://github.com/ant-design/ant-design/issues/1195)
|
||||
- Select
|
||||
- 搜索框和单选选择框合并，以优化视觉和交互效果。
|
||||
- 优化多选框的选中效果。
|
||||
- Spin
|
||||
- 增加延时展示以优化体验。[#1273](https://github.com/ant-design/ant-design/issues/1273)
|
||||
- 增加 `tip` 属性用于定义加载文案。[#1046](https://github.com/ant-design/ant-design/issues/1046)
|
||||
- Steps
|
||||
- 重构布局方式，以支持更灵活的自适应布局和优化了性能，并移除了 `maxDescriptionWidth` 属性。[#1099](https://github.com/ant-design/ant-design/issues/1099)
|
||||
- 新增 `status` 属性以指定当前步骤状态，同时支持错误步骤的展示。[#1098](https://github.com/ant-design/ant-design/issues/1098)
|
||||
- Timeline
|
||||
- 新增 `dot` 属性，可自定义时间轴点。
|
||||
- 现在可以设置 `className` 和 `style` 的问题。
|
||||
- `color` 属性现在支持自定义色值。
|
||||
- Tree
|
||||
- 当子节点被选中时，自动展开父节点。
|
||||
- 新增 `checkStrictly` 属性，支持父子节点选中关系脱离。
|
||||
- Upload
|
||||
- 在上传文件列表中的文件被删除时，将触发 `onRemove` 事件。[#1240](https://github.com/ant-design/ant-design/issues/1240)
|
||||
- 增加 `onPreview` 支持文件的自定义预览方式。[#1240](https://github.com/ant-design/ant-design/issues/1240)
|
||||
- `data` 属性支持设为一个函数，用于动态修改上传参数。[react-component/upload#32](https://github.com/react-component/upload/pull/32)
|
||||
- Slider `marks` 现在支持 JSX 并可以单独设置某个标记的样式。
|
||||
- Tag 的 `onClose` 可以使用 `e.preventDefault()` 阻止默认事件。[#1267](https://github.com/ant-design/ant-design/issues/1267)
|
||||
- Form.Item 在有多个 child 时也可以自动生成错误信息与校验状态，但一个 Form.Item 内仍然只能有一个表单控件。[#1287](https://github.com/ant-design/ant-design/issues/1287)
|
||||
- Input 新增 `onPressEnter` 属性监听回车事件。
|
||||
- Table 现在可以通过 `filteredValue` `sortOrder` 控制筛选和排序的状态。[#971](https://github.com/ant-design/ant-design/issues/971)
|
||||
- Button 增加了 `icon` 属性。[#1199](https://github.com/ant-design/ant-design/issues/1199)
|
||||
- SubMenu 增加 `onTitleClick` 属性。
|
||||
- Affix 增加 `offsetBottm` 属性，支持固定在底部。[#1000](https://github.com/ant-design/ant-design/issues/1000)
|
||||
|
||||
## 2.x
|
||||
### 相关工具发布
|
||||
|
||||
去 [GitHub](https://github.com/ant-design/ant-design/blob/2.x-stable/CHANGELOG.md) 查看 `2.x` 的 Change Log。
|
||||
- [antd-init](http://github.com/ant-design/antd-init) 同步发布 `1.0.0` 版本，享受最新 [ant-tool](https://github.com/ant-tool/) 工具带来的流畅开发体验。
|
||||
- [Ant Motion](http://motion.ant.design) 全新的动效设计解决方案。
|
||||
- [Ant UX](http://ux.ant.design/) 发布 1.0 版本，提供多种平台的流程素材支持。
|
||||
|
||||
## 1.11.4
|
||||
## 0.12.17
|
||||
|
||||
去 [GitHub](https://github.com/ant-design/ant-design/blob/1.x-stable/CHANGELOG.md) 查看 `0.x` 到 `1.x` 的 Change Log。
|
||||
去 [GitHub](https://github.com/ant-design/ant-design/releases?after=1.0.0) 查看 `0.12.x` 及之前的更新日志。
|
||||
|
||||
@@ -1,46 +0,0 @@
|
||||
# Contributor Covenant Code of Conduct
|
||||
|
||||
## Our Pledge
|
||||
|
||||
In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation.
|
||||
|
||||
## Our Standards
|
||||
|
||||
Examples of behavior that contributes to creating a positive environment include:
|
||||
|
||||
* Using welcoming and inclusive language
|
||||
* Being respectful of differing viewpoints and experiences
|
||||
* Gracefully accepting constructive criticism
|
||||
* Focusing on what is best for the community
|
||||
* Showing empathy towards other community members
|
||||
|
||||
Examples of unacceptable behavior by participants include:
|
||||
|
||||
* The use of sexualized language or imagery and unwelcome sexual attention or advances
|
||||
* Trolling, insulting/derogatory comments, and personal or political attacks
|
||||
* Public or private harassment
|
||||
* Publishing others' private information, such as a physical or electronic address, without explicit permission
|
||||
* Other conduct which could reasonably be considered inappropriate in a professional setting
|
||||
|
||||
## Our Responsibilities
|
||||
|
||||
Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.
|
||||
|
||||
Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
|
||||
|
||||
## Scope
|
||||
|
||||
This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.
|
||||
|
||||
## Enforcement
|
||||
|
||||
Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at xingmin.zhu@alipay.com. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
|
||||
|
||||
Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.
|
||||
|
||||
## Attribution
|
||||
|
||||
This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version]
|
||||
|
||||
[homepage]: http://contributor-covenant.org
|
||||
[version]: http://contributor-covenant.org/version/1/4/
|
||||
101
README-zh_CN.md
101
README-zh_CN.md
@@ -1,46 +1,30 @@
|
||||
<p align="center">
|
||||
<a href="http://ant.design">
|
||||
<img width="230" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg">
|
||||
<img width="320" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg">
|
||||
</a>
|
||||
</p>
|
||||
|
||||
# Ant Design
|
||||
|
||||
[](https://travis-ci.org/ant-design/ant-design)
|
||||
[](https://codecov.io/gh/ant-design/ant-design/branch/master)
|
||||
[](https://gemnasium.com/ant-design/ant-design)
|
||||
|
||||
[](https://www.npmjs.org/package/antd)
|
||||
[](https://npmjs.org/package/antd)
|
||||
[](http://isitmaintained.com/project/ant-design/ant-design "Percentage of issues still open")
|
||||
[](https://gitter.im/ant-design/ant-design-english?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) (English)
|
||||
[](https://gitter.im/ant-design/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)（中文）
|
||||
[](https://cdnjs.com/libraries/antd)
|
||||
[](https://david-dm.org/ant-design/ant-design)
|
||||
[](https://gitter.im/ant-design/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
|
||||
|
||||
一套企业级的 UI 设计语言和 React 实现。
|
||||
|
||||
[README in English](README.md)
|
||||
|
||||
## 特性
|
||||
|
||||
- 提炼自企业级中后台产品的交互语言和视觉风格。
|
||||
- 开箱即用的高质量 React 组件。
|
||||
- 提炼和服务企业级中后台产品的交互语言和视觉风格。
|
||||
- [React Component](http://react-component.github.io/badgeboard/) 基础上精心封装的高质量 UI 组件。
|
||||
- 使用 TypeScript 构建，提供完整的类型定义文件。
|
||||
- 基于 npm + webpack + [dva](https://github.com/dvajs/dva) 的企业级开发框架。
|
||||
|
||||
## 支持环境
|
||||
|
||||
* 现代浏览器和 IE9 及以上。
|
||||
* 支持服务端渲染。
|
||||
* [Electron](http://electron.atom.io/)
|
||||
|
||||
## 参与共建 [](http://makeapullrequest.com)
|
||||
|
||||
`antd` 是一个开源项目，我们欢迎社区参与共建。如果你对此项目感兴趣，有 [很多方式](https://opensource.guide/how-to-contribute/) 进行参与。你可以 watch 这个仓库，加入 [issue 中的讨论](https://github.com/ant-design/ant-design/issues?q=is%3Aopen+is%3Aissue+label%3ADiscussion)，以及尝试实现一些 [已接受的特性](https://github.com/ant-design/ant-design/issues?q=is%3Aopen+is%3Aissue+label%3A%22PR+welcome%22)。我们会给予有活跃贡献的社区成员 [collaborator 权限](https://github.com/ant-design/ant-design/issues/3222)。
|
||||
- 基于 npm + webpack + babel + [dora](https://github.com/dora-js/dora) + [dva](https://github.com/dvajs/dva) 的企业级业务开发框架。
|
||||
|
||||
## 安装
|
||||
|
||||
```bash
|
||||
npm install antd --save
|
||||
npm install antd
|
||||
```
|
||||
|
||||
## 示例
|
||||
@@ -56,56 +40,47 @@ ReactDOM.render(<DatePicker />, mountNode);
|
||||
import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
|
||||
```
|
||||
|
||||
你也可以[按需加载组件](https://ant.design/docs/react/getting-started-cn#按需加载)。
|
||||
按需加载可通过此写法 `import DatePicker from 'antd/lib/date-picker'` 或使用插件 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import)。
|
||||
|
||||
|
||||
## 浏览器支持
|
||||
|
||||
现代浏览器和 IE9 及以上。
|
||||
|
||||
> [IE8 issues](https://github.com/xcatliu/react-ie8)
|
||||
|
||||
## TypeScript
|
||||
|
||||
参考 [在 TypeScript 中使用](https://ant.design/docs/react/use-in-typescript-cn)
|
||||
tsconfig.json
|
||||
|
||||
## 国际化
|
||||
|
||||
参考 [国际化文档](http://ant.design/docs/react/i18n-cn)。
|
||||
```
|
||||
{
|
||||
"compilerOptions": {
|
||||
"moduleResolution": "node",
|
||||
"jsx": "preserve",
|
||||
"allowSyntheticDefaultImports": true
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 链接
|
||||
|
||||
- [首页](http://ant.design/)
|
||||
- [组件库](http://ant.design/docs/react/introduce)
|
||||
- [Ant Design Pro](http://pro.ant.design/)
|
||||
- [更新日志](CHANGELOG.en-US.md)
|
||||
- [脚手架市场](http://scaffold.ant.design)
|
||||
- [React 底层基础组件](http://react-component.github.io/)
|
||||
- [React 实现](http://ant.design/docs/react/introduce)
|
||||
- [修改记录](CHANGELOG.zh-CN.md)
|
||||
- [开发脚手架](https://github.com/ant-design/antd-init/)
|
||||
- [开发工具文档](http://ant-tool.github.io/)
|
||||
- [React 基础组件](http://react-component.github.io/)
|
||||
- [移动端组件](http://mobile.ant.design)
|
||||
- [动效](https://motion.ant.design)
|
||||
- [设计规范速查手册](https://github.com/ant-design/ant-design/wiki/Ant-Design-%E8%AE%BE%E8%AE%A1%E5%9F%BA%E7%A1%80%E7%AE%80%E7%89%88)
|
||||
- [开发者说明](https://github.com/ant-design/ant-design/wiki/Development)
|
||||
- [版本发布规则](https://github.com/ant-design/ant-design/wiki/%E8%BD%AE%E5%80%BC%E8%A7%84%E5%88%99%E5%92%8C%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B)
|
||||
- [React 代码规范](https://github.com/react-component/react-component.github.io/blob/master/docs/zh-cn/component-code-style.md)
|
||||
- [组件设计原则](https://github.com/react-component/react-component.github.io/blob/master/docs/zh-cn/component-design.md)
|
||||
- [网站和组件开发说明](https://github.com/ant-design/ant-design/wiki/%E7%BD%91%E7%AB%99%E5%92%8C%E7%BB%84%E4%BB%B6%E5%BC%80%E5%8F%91%E8%AF%B4%E6%98%8E)
|
||||
- [版本发布手册](https://github.com/ant-design/ant-design/wiki/%E8%BD%AE%E5%80%BC%E8%A7%84%E5%88%99%E5%92%8C%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B)
|
||||
- [社区贡献脚手架和范例](https://github.com/ant-design/ant-design/issues/129)
|
||||
- [常见问题](https://github.com/ant-design/ant-design/wiki/FAQ)
|
||||
- [CodeSandbox 模板](https://u.ant.design/codesandbox-repro) for bug reports
|
||||
- [CodePen 模板](http://codepen.io/benjycui/pen/KgPZrE?editors=001)
|
||||
- [Awesome Ant Design](https://github.com/websemantics/awesome-ant-design)
|
||||
- [定制主题](http://ant.design/docs/react/customize-theme-cn)
|
||||
|
||||
## 本地开发
|
||||
|
||||
```bash
|
||||
$ git clone git@github.com:ant-design/ant-design.git
|
||||
$ npm install
|
||||
$ npm start
|
||||
```
|
||||
|
||||
打开浏览器访问 http://127.0.0.1:8001 ，更多本地开发文档参见: https://github.com/ant-design/ant-design/wiki/Development 。
|
||||
|
||||
## 如何贡献
|
||||
|
||||
在任何形式的参与前，请先阅读 [贡献者文档](https://github.com/ant-design/ant-design/blob/master/.github/CONTRIBUTING.md)。如果你希望参与贡献，欢迎 [Pull Request](https://github.com/ant-design/ant-design/pulls)，或给我们 [报告 Bug](http://new-issue.ant.design/)。
|
||||
|
||||
> 强烈推荐阅读 [《提问的智慧》](https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way)、[《如何向开源社区提问题》](https://github.com/seajs/seajs/issues/545) 和 [《如何有效地报告 Bug》](http://www.chiark.greenend.org.uk/%7Esgtatham/bugs-cn.html)、[《如何向开源项目提交无法解答的问题》](https://zhuanlan.zhihu.com/p/25795393)，更好的问题更容易获得帮助。
|
||||
|
||||
## 社区互助
|
||||
|
||||
如果您在使用的过程中碰到问题，可以通过下面几个途径寻求帮助，同时我们也鼓励资深用户通过下面的途径给新人提供帮助。
|
||||
|
||||
通过 Stack Overflow 或者 Segment Fault 提问时，建议加上 `antd` 标签。
|
||||
|
||||
1. [Stack Overflow](http://stackoverflow.com/questions/tagged/antd)（英文）
|
||||
2. [Segment Fault](https://segmentfault.com/t/antd)（中文）
|
||||
3. [](https://gitter.im/ant-design/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
|
||||
我们欢迎任何形式的贡献，有任何建议或意见您可以进行 [Pull Request](https://github.com/ant-design/ant-design/pulls)，或者给我们 [提问](https://github.com/ant-design/ant-design/issues)。
|
||||
|
||||
112
README.md
112
README.md
@@ -1,54 +1,36 @@
|
||||
<p align="center">
|
||||
<a href="http://ant.design">
|
||||
<img width="230" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg">
|
||||
<img width="320" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg">
|
||||
</a>
|
||||
</p>
|
||||
|
||||
# Ant Design
|
||||
|
||||
[](https://travis-ci.org/ant-design/ant-design)
|
||||
[](https://codecov.io/gh/ant-design/ant-design/branch/master)
|
||||
[](https://gemnasium.com/ant-design/ant-design)
|
||||
|
||||
[](https://www.npmjs.org/package/antd)
|
||||
[](https://npmjs.org/package/antd)
|
||||
[](http://isitmaintained.com/project/ant-design/ant-design "Percentage of issues still open")
|
||||
[](https://gitter.im/ant-design/ant-design-english?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) (English)
|
||||
[](https://gitter.im/ant-design/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)（中文）
|
||||
[](https://david-dm.org/ant-design/ant-design)
|
||||
[](http://isitmaintained.com/project/ant-design/ant-design "Average time to resolve an issue")
|
||||
[](https://gitter.im/ant-design/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
|
||||
|
||||
An enterprise-class UI design language and React-based implementation.
|
||||
|
||||
[中文 README](README-zh_CN.md)
|
||||
|
||||
## 3.0 Released Now! :tada::tada::tada:
|
||||
|
||||
[Announcing Ant Design 3.0](https://medium.com/ant-design/announcing-ant-design-3-0-70e3e65eca0c)
|
||||
|
||||
## Features
|
||||
|
||||
- An enterprise-class UI design language for web applications.
|
||||
- A set of high-quality React components out of the box.
|
||||
- Written in TypeScript with complete define types.
|
||||
- A npm + webpack + [dva](https://github.com/dvajs/dva) front-end development workflow.
|
||||
|
||||
## Environment Support
|
||||
|
||||
* Modern browsers and Internet Explorer 9+ (with [polyfills](https://ant.design/docs/react/getting-started#Compatibility))
|
||||
* Server-side Rendering
|
||||
* [Electron](http://electron.atom.io/)
|
||||
|
||||
## Let's build a better antd together [](http://makeapullrequest.com)
|
||||
|
||||
`antd` is an open source project; improvements are welcomed. If you are interested in contributing to `antd`, you can watch this repository, join in [discussion](https://github.com/ant-design/ant-design/issues?q=is%3Aopen+is%3Aissue+label%3ADiscussion), or try to implement some [features which have been accepted](https://github.com/ant-design/ant-design/issues?q=is%3Aopen+is%3Aissue+label%3A%22PR+welcome%22). Actually, there are [many ways](https://opensource.guide/how-to-contribute/) to contribute. And we are always happy to [offer collaborator permission](https://github.com/ant-design/ant-design/issues/3222) for some active contributors.
|
||||
- An enterprise-class design language and high quality UI.
|
||||
- Graceful UI components out of the box, base on [React Component](http://react-component.github.io/badgeboard/).
|
||||
- Writen in TypeScript with complete define types.
|
||||
- A npm + webpack + babel + [dora](https://github.com/dora-js/dora) + [dva](https://github.com/dvajs/dva) development framework.
|
||||
|
||||
## Install
|
||||
|
||||
```bash
|
||||
npm install antd --save
|
||||
npm install antd
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
### Use prebuilt bundle
|
||||
|
||||
```jsx
|
||||
import { DatePicker } from 'antd';
|
||||
ReactDOM.render(<DatePicker />, mountNode);
|
||||
@@ -60,44 +42,72 @@ And import style manually:
|
||||
import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
|
||||
```
|
||||
|
||||
Or [import components on demand](https://ant.design/docs/react/getting-started#Import-on-Demand)
|
||||
### Use modularized antd
|
||||
|
||||
### TypeScript
|
||||
- Use [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) (Recommended)
|
||||
|
||||
See [Use in TypeScript](https://ant.design/docs/react/use-in-typescript)
|
||||
```js
|
||||
// .babelrc
|
||||
{
|
||||
"plugins": [["import", { libraryName: "antd", style: "css" }]]
|
||||
}
|
||||
```
|
||||
|
||||
Then you can import components from antd directly.
|
||||
|
||||
```jsx
|
||||
// import js and css modularly, parsed by babel-plugin-import
|
||||
import { DatePicker } from 'antd';
|
||||
```
|
||||
|
||||
- Manually import
|
||||
|
||||
```jsx
|
||||
import DatePicker from 'antd/lib/date-picker'; // just for js
|
||||
import 'antd/lib/date-picker/style/css'; // with style
|
||||
```
|
||||
|
||||
|
||||
## Internationalization
|
||||
## Browser Support
|
||||
|
||||
See [i18n](http://ant.design/docs/react/i18n).
|
||||
Normal browsers and Internet Explorer 9+.
|
||||
|
||||
> [IE8 issues](https://github.com/xcatliu/react-ie8)
|
||||
|
||||
## TypeScript
|
||||
|
||||
tsconfig.json
|
||||
|
||||
```
|
||||
{
|
||||
"compilerOptions": {
|
||||
"moduleResolution": "node",
|
||||
"jsx": "preserve",
|
||||
"allowSyntheticDefaultImports": true
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Links
|
||||
|
||||
- [Home page](http://ant.design/)
|
||||
- [Components](http://ant.design/docs/react/introduce)
|
||||
- [Ant Design Pro](http://pro.ant.design/)
|
||||
- [Change Log](CHANGELOG.en-US.md)
|
||||
- [Scaffold Market](http://scaffold.ant.design)
|
||||
- [rc-components](http://react-component.github.io/)
|
||||
- [UI library](http://ant.design/docs/react/introduce)
|
||||
- [ChangeLog](CHANGELOG.en-US.md)
|
||||
- [Scaffold tool](https://github.com/ant-design/antd-init/)
|
||||
- [Development tool](http://ant-tool.github.io/)
|
||||
- [React components](http://react-component.github.io/)
|
||||
- [Mobile UI](http://mobile.ant.design)
|
||||
- [Motion](https://motion.ant.design)
|
||||
- [React style guide](https://github.com/react-component/react-component.github.io/blob/master/docs/zh-cn/component-code-style.md)
|
||||
- [React component design guide](https://github.com/react-component/react-component.github.io/blob/master/docs/zh-cn/component-design.md)
|
||||
- [Developer Instruction](https://github.com/ant-design/ant-design/wiki/Development)
|
||||
- [Versioning Release Note](https://github.com/ant-design/ant-design/wiki/%E8%BD%AE%E5%80%BC%E8%A7%84%E5%88%99%E5%92%8C%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B)
|
||||
- [Boilerplates](https://github.com/ant-design/ant-design/issues/129)
|
||||
- [FAQ](https://github.com/ant-design/ant-design/wiki/FAQ)
|
||||
- [CodeSandbox Template](https://u.ant.design/codesandbox-repro) for bug reports
|
||||
- [CodePen boilerplate](http://codepen.io/benjycui/pen/KgPZrE?editors=001) for bug reports
|
||||
- [Awesome Ant Design](https://github.com/websemantics/awesome-ant-design)
|
||||
- [Customize Theme](http://ant.design/docs/react/customize-theme)
|
||||
|
||||
## Development
|
||||
|
||||
```bash
|
||||
$ git clone git@github.com:ant-design/ant-design.git
|
||||
$ npm install
|
||||
$ npm start
|
||||
```
|
||||
|
||||
Open your browser and visit http://127.0.0.1:8001 , see more at https://github.com/ant-design/ant-design/wiki/Development .
|
||||
|
||||
## Contributing
|
||||
|
||||
We welcome all contributions. Please read our [CONTRIBUTING.md](https://github.com/ant-design/ant-design/blob/master/.github/CONTRIBUTING.md) first. You can submit any ideas as [pull requests](https://github.com/ant-design/ant-design/pulls) or as [GitHub issues](https://github.com/ant-design/ant-design/issues). If you'd like to improve code, check out the [Development Instructions](https://github.com/ant-design/ant-design/wiki/Development) and have a good time! :)
|
||||
We welcome all contributions, please read our [CONTRIBUTING.md](https://github.com/ant-design/ant-design/blob/master/.github/CONTRIBUTING.md) first. You can submit any ideas as [pull requests](https://github.com/ant-design/ant-design/pulls) or as a [GitHub issue](https://github.com/ant-design/ant-design/issues). If you'd like to improve code, check out the [Development Instruction](https://github.com/ant-design/ant-design/wiki/Development) and have a good time! :)
|
||||
|
||||
@@ -1,60 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`antd exports modules correctly 1`] = `
|
||||
Array [
|
||||
"Affix",
|
||||
"Anchor",
|
||||
"AutoComplete",
|
||||
"Alert",
|
||||
"Avatar",
|
||||
"BackTop",
|
||||
"Badge",
|
||||
"Breadcrumb",
|
||||
"Button",
|
||||
"Calendar",
|
||||
"Card",
|
||||
"Collapse",
|
||||
"Carousel",
|
||||
"Cascader",
|
||||
"Checkbox",
|
||||
"Col",
|
||||
"DatePicker",
|
||||
"Divider",
|
||||
"Dropdown",
|
||||
"Form",
|
||||
"Icon",
|
||||
"Input",
|
||||
"InputNumber",
|
||||
"Layout",
|
||||
"List",
|
||||
"LocaleProvider",
|
||||
"message",
|
||||
"Menu",
|
||||
"Modal",
|
||||
"notification",
|
||||
"Pagination",
|
||||
"Popconfirm",
|
||||
"Popover",
|
||||
"Progress",
|
||||
"Radio",
|
||||
"Rate",
|
||||
"Row",
|
||||
"Select",
|
||||
"Slider",
|
||||
"Spin",
|
||||
"Steps",
|
||||
"Switch",
|
||||
"Table",
|
||||
"Transfer",
|
||||
"Tree",
|
||||
"TreeSelect",
|
||||
"Tabs",
|
||||
"Tag",
|
||||
"TimePicker",
|
||||
"Timeline",
|
||||
"Tooltip",
|
||||
"Mention",
|
||||
"Upload",
|
||||
"version",
|
||||
]
|
||||
`;
|
||||
@@ -1,7 +0,0 @@
|
||||
import * as antd from '..';
|
||||
|
||||
describe('antd', () => {
|
||||
it('exports modules correctly', () => {
|
||||
expect(Object.keys(antd)).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
@@ -1,35 +0,0 @@
|
||||
import throttleByAnimationFrame from '../throttleByAnimationFrame';
|
||||
|
||||
describe('Test utils function', () => {
|
||||
beforeAll(() => {
|
||||
jest.useFakeTimers();
|
||||
});
|
||||
|
||||
afterAll(() => {
|
||||
jest.useRealTimers();
|
||||
});
|
||||
|
||||
it('throttle function should work', () => {
|
||||
const callback = jest.fn();
|
||||
const throttled = throttleByAnimationFrame(callback);
|
||||
expect(callback).not.toBeCalled();
|
||||
|
||||
throttled();
|
||||
throttled();
|
||||
|
||||
jest.runAllTimers();
|
||||
expect(callback).toBeCalled();
|
||||
expect(callback.mock.calls.length).toBe(1);
|
||||
});
|
||||
|
||||
it('throttle function should be canceled', () => {
|
||||
const callback = jest.fn();
|
||||
const throttled = throttleByAnimationFrame(callback);
|
||||
|
||||
throttled();
|
||||
throttled.cancel();
|
||||
|
||||
jest.runAllTimers();
|
||||
expect(callback).not.toBeCalled();
|
||||
});
|
||||
});
|
||||
@@ -1,4 +0,0 @@
|
||||
// https://github.com/moment/moment/issues/3650
|
||||
export default function callMoment(moment: any, ...args: any[]) {
|
||||
return (moment.default || moment)(...args);
|
||||
}
|
||||
10
components/_util/getLocale.tsx
Normal file
10
components/_util/getLocale.tsx
Normal file
@@ -0,0 +1,10 @@
|
||||
import assign from 'object-assign';
|
||||
|
||||
export default function getLocale(props, context, componentName, getDefaultLocale) {
|
||||
const locale = context && context.antLocale && context.antLocale[componentName] ?
|
||||
context.antLocale[componentName] : getDefaultLocale();
|
||||
|
||||
const result = assign({}, locale, props.locale);
|
||||
result.lang = assign({}, locale.lang, props.locale.lang);
|
||||
return result;
|
||||
}
|
||||
@@ -1,46 +1,12 @@
|
||||
const availablePrefixs = ['moz', 'ms', 'webkit'];
|
||||
|
||||
function requestAnimationFramePolyfill() {
|
||||
let lastTime = 0;
|
||||
return function(callback: (n: number) => void) {
|
||||
const currTime = new Date().getTime();
|
||||
const timeToCall = Math.max(0, 16 - (currTime - lastTime));
|
||||
const id = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall);
|
||||
lastTime = currTime + timeToCall;
|
||||
return id;
|
||||
};
|
||||
}
|
||||
|
||||
export default function getRequestAnimationFrame() {
|
||||
if (typeof window === 'undefined') {
|
||||
return () => {};
|
||||
}
|
||||
if (window.requestAnimationFrame) {
|
||||
// https://github.com/vuejs/vue/issues/4465
|
||||
return window.requestAnimationFrame.bind(window);
|
||||
return window.requestAnimationFrame;
|
||||
}
|
||||
|
||||
const prefix = availablePrefixs.filter(key => `${key}RequestAnimationFrame` in window)[0];
|
||||
|
||||
const prefix = ['moz', 'ms', 'webkit'].filter(key => `${key}RequestAnimationFrame` in window)[0];
|
||||
return prefix
|
||||
? (window as any)[`${prefix}RequestAnimationFrame`]
|
||||
: requestAnimationFramePolyfill();
|
||||
}
|
||||
|
||||
export function cancelRequestAnimationFrame(id: number) {
|
||||
if (typeof window === 'undefined') {
|
||||
return null;
|
||||
}
|
||||
if (window.cancelAnimationFrame) {
|
||||
return window.cancelAnimationFrame(id);
|
||||
}
|
||||
const prefix = availablePrefixs.filter(key =>
|
||||
`${key}CancelAnimationFrame` in window || `${key}CancelRequestAnimationFrame` in window,
|
||||
)[0];
|
||||
|
||||
return prefix ?
|
||||
(
|
||||
(window as any)[`${prefix}CancelAnimationFrame`] ||
|
||||
(window as any)[`${prefix}CancelRequestAnimationFrame`]
|
||||
).call(this, id) : clearTimeout(id);
|
||||
? window[`${prefix}RequestAnimationFrame`]
|
||||
: callback => setTimeout(callback, 1000 / 60);
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
export default function getScroll(target: any, top: boolean): number {
|
||||
export default function getScroll(target, top): number {
|
||||
if (typeof window === 'undefined') {
|
||||
return 0;
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
let animation: boolean;
|
||||
let animation;
|
||||
|
||||
function isCssAnimationSupported() {
|
||||
if (animation !== undefined) {
|
||||
@@ -11,7 +11,7 @@ function isCssAnimationSupported() {
|
||||
}
|
||||
if (animation !== undefined) {
|
||||
for (let i = 0; i < domPrefixes.length; i++) {
|
||||
if ((elm.style as any)[`${domPrefixes[i]}AnimationName`] !== undefined) {
|
||||
if (elm.style[`${domPrefixes[i]}AnimationName`] !== undefined) {
|
||||
animation = true;
|
||||
break;
|
||||
}
|
||||
|
||||
@@ -1,10 +0,0 @@
|
||||
export default function isFlexSupported() {
|
||||
if (typeof window !== 'undefined' && window.document && window.document.documentElement) {
|
||||
const { documentElement } = window.document;
|
||||
return 'flex' in documentElement.style ||
|
||||
'webkitFlex' in documentElement.style ||
|
||||
'Flex' in documentElement.style ||
|
||||
'msFlex' in documentElement.style;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
@@ -1,50 +1,34 @@
|
||||
import cssAnimation from 'css-animation';
|
||||
import getRequestAnimationFrame, { cancelRequestAnimationFrame } from './getRequestAnimationFrame';
|
||||
|
||||
const reqAnimFrame = getRequestAnimationFrame();
|
||||
|
||||
function animate(node: HTMLElement, show: boolean, done: () => void) {
|
||||
let height: number;
|
||||
let requestAnimationFrameId: number;
|
||||
function animate(node, show, done) {
|
||||
let height;
|
||||
return cssAnimation(node, 'ant-motion-collapse', {
|
||||
start() {
|
||||
if (!show) {
|
||||
node.style.height = `${node.offsetHeight}px`;
|
||||
node.style.opacity = '1';
|
||||
} else {
|
||||
height = node.offsetHeight;
|
||||
node.style.height = '0px';
|
||||
node.style.opacity = '0';
|
||||
node.style.height = 0;
|
||||
}
|
||||
},
|
||||
active() {
|
||||
if (requestAnimationFrameId) {
|
||||
cancelRequestAnimationFrame(requestAnimationFrameId);
|
||||
}
|
||||
requestAnimationFrameId = reqAnimFrame(() => {
|
||||
node.style.height = `${show ? height : 0}px`;
|
||||
node.style.opacity = show ? '1' : '0';
|
||||
});
|
||||
node.style.height = `${show ? height : 0}px`;
|
||||
},
|
||||
end() {
|
||||
if (requestAnimationFrameId) {
|
||||
cancelRequestAnimationFrame(requestAnimationFrameId);
|
||||
}
|
||||
node.style.height = '';
|
||||
node.style.opacity = '';
|
||||
done();
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
const animation = {
|
||||
enter(node: HTMLElement, done: () => void) {
|
||||
enter(node, done) {
|
||||
return animate(node, true, done);
|
||||
},
|
||||
leave(node: HTMLElement, done: () => void) {
|
||||
leave(node, done) {
|
||||
return animate(node, false, done);
|
||||
},
|
||||
appear(node: HTMLElement, done: () => void) {
|
||||
appear(node, done) {
|
||||
return animate(node, true, done);
|
||||
},
|
||||
};
|
||||
|
||||
12
components/_util/splitObject.tsx
Normal file
12
components/_util/splitObject.tsx
Normal file
@@ -0,0 +1,12 @@
|
||||
export default function splitObject(obj, parts): Array<any> {
|
||||
const left = {};
|
||||
const right = {};
|
||||
Object.keys(obj).forEach((k) => {
|
||||
if (parts.indexOf(k) !== -1) {
|
||||
left[k] = obj[k];
|
||||
} else {
|
||||
right[k] = obj[k];
|
||||
}
|
||||
});
|
||||
return [left, right];
|
||||
}
|
||||
@@ -1,47 +0,0 @@
|
||||
import getRequestAnimationFrame, { cancelRequestAnimationFrame } from '../_util/getRequestAnimationFrame';
|
||||
|
||||
const reqAnimFrame = getRequestAnimationFrame();
|
||||
|
||||
export default function throttleByAnimationFrame(fn: () => void) {
|
||||
let requestId: number | null;
|
||||
|
||||
const later = (args: any[]) => () => {
|
||||
requestId = null;
|
||||
fn(...args);
|
||||
};
|
||||
|
||||
const throttled = (...args: any[]) => {
|
||||
if (requestId == null) {
|
||||
requestId = reqAnimFrame(later(args));
|
||||
}
|
||||
};
|
||||
|
||||
(throttled as any).cancel = () => cancelRequestAnimationFrame(requestId!);
|
||||
|
||||
return throttled;
|
||||
}
|
||||
|
||||
export function throttleByAnimationFrameDecorator() {
|
||||
return function(target: any, key: string, descriptor: any) {
|
||||
let fn = descriptor.value;
|
||||
let definingProperty = false;
|
||||
return {
|
||||
configurable: true,
|
||||
get() {
|
||||
if (definingProperty || this === target.prototype || this.hasOwnProperty(key)) {
|
||||
return fn;
|
||||
}
|
||||
|
||||
let boundFn = throttleByAnimationFrame(fn.bind(this));
|
||||
definingProperty = true;
|
||||
Object.defineProperty(this, key, {
|
||||
value: boundFn,
|
||||
configurable: true,
|
||||
writable: true,
|
||||
});
|
||||
definingProperty = false;
|
||||
return boundFn;
|
||||
},
|
||||
};
|
||||
};
|
||||
}
|
||||
@@ -1,8 +0,0 @@
|
||||
export default function triggerEvent(el: Element, type: string) {
|
||||
if ('createEvent' in document) {
|
||||
// modern browsers, IE9+
|
||||
const e = document.createEvent('HTMLEvents');
|
||||
e.initEvent(type, false, true);
|
||||
el.dispatchEvent(e);
|
||||
}
|
||||
}
|
||||
@@ -1,76 +0,0 @@
|
||||
import React from 'react';
|
||||
import { mount } from 'enzyme';
|
||||
import Affix from '..';
|
||||
import Button from '../../button';
|
||||
|
||||
const events = {};
|
||||
|
||||
class AffixMounter extends React.Component {
|
||||
componentDidMount() {
|
||||
this.container.scrollTop = 100;
|
||||
this.container.addEventListener = jest.fn().mockImplementation((event, cb) => {
|
||||
events[event] = cb;
|
||||
});
|
||||
}
|
||||
getTarget = () => {
|
||||
return this.container;
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
height: 100,
|
||||
overflowY: 'scroll',
|
||||
}}
|
||||
ref={(node) => { this.container = node; }}
|
||||
>
|
||||
<div
|
||||
className="background"
|
||||
style={{
|
||||
paddingTop: 60,
|
||||
height: 300,
|
||||
}}
|
||||
>
|
||||
<Affix
|
||||
target={() => this.container}
|
||||
ref={ele => this.affix = ele}
|
||||
>
|
||||
<Button type="primary" >
|
||||
Fixed at the top of container
|
||||
</Button>
|
||||
</Affix>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
describe('Affix Render', () => {
|
||||
beforeAll(() => {
|
||||
jest.useFakeTimers();
|
||||
});
|
||||
|
||||
afterAll(() => {
|
||||
jest.useRealTimers();
|
||||
});
|
||||
|
||||
it('Anchor render perfectly', () => {
|
||||
document.body.innerHTML = '<div id="mounter" />';
|
||||
|
||||
const wrapper = mount(<AffixMounter />, { attachTo: document.getElementById('mounter') });
|
||||
jest.runAllTimers();
|
||||
|
||||
wrapper.instance().affix.fixedNode.parentNode.getBoundingClientRect = jest.fn(() => {
|
||||
return {
|
||||
bottom: 100, height: 28, left: 0, right: 0, top: -50, width: 195,
|
||||
};
|
||||
});
|
||||
|
||||
events.scroll({
|
||||
type: 'scroll',
|
||||
});
|
||||
|
||||
jest.runAllTimers();
|
||||
expect(wrapper.instance().affix.state.affixStyle).not.toBe(null);
|
||||
});
|
||||
});
|
||||
@@ -1,77 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders ./components/affix/demo/basic.md correctly 1`] = `
|
||||
<div>
|
||||
<div>
|
||||
<div
|
||||
class=""
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Affix top
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
<div>
|
||||
<div
|
||||
class=""
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Affix bottom
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/affix/demo/on-change.md correctly 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class=""
|
||||
>
|
||||
<button
|
||||
class="ant-btn"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
120px to affix top
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/affix/demo/target.md correctly 1`] = `
|
||||
<div
|
||||
class="scrollable-container"
|
||||
>
|
||||
<div
|
||||
class="background"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
class=""
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Fixed at the top of container
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@@ -1,3 +0,0 @@
|
||||
import demoTest from '../../../tests/shared/demoTest';
|
||||
|
||||
demoTest('affix');
|
||||
@@ -16,32 +16,36 @@ Set a `target` for 'Affix', which is listen to scroll event of target element (d
|
||||
````jsx
|
||||
import { Affix, Button } from 'antd';
|
||||
|
||||
class Demo extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<div className="scrollable-container" ref={(node) => { this.container = node; }}>
|
||||
const Demo = () => {
|
||||
return (
|
||||
<div className="view-port">
|
||||
<div id="scrollable-container">
|
||||
<div className="background">
|
||||
<Affix target={() => this.container}>
|
||||
<Button type="primary">
|
||||
Fixed at the top of container
|
||||
</Button>
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<Affix target={() => document.getElementById('scrollable-container')} offsetTop={20}>
|
||||
<Button type="primary">Fixed at the top of container</Button>
|
||||
</Affix>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
ReactDOM.render(<Demo />, mountNode);
|
||||
````
|
||||
|
||||
<style>
|
||||
#components-affix-demo-target .scrollable-container {
|
||||
#components-affix-demo-target .view-port {
|
||||
height: 100px;
|
||||
overflow: hidden;
|
||||
}
|
||||
#components-affix-demo-target #scrollable-container {
|
||||
height: 100%;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
#components-affix-demo-target .background {
|
||||
padding-top: 60px;
|
||||
height: 300px;
|
||||
background-image: url('https://zos.alipayobjects.com/rmsportal/RmjwQiJorKyobvI.jpg');
|
||||
}
|
||||
|
||||
@@ -4,22 +4,21 @@ type: Navigation
|
||||
title: Affix
|
||||
---
|
||||
|
||||
Make an element stick to viewport.
|
||||
Make an element sticky to viewport.
|
||||
|
||||
## When To Use
|
||||
|
||||
When user browses a long web page, some content need to stick to the viewport. This is common for menus and actions.
|
||||
When user browses a long web page, some content need to sticky to viewport. It is common for menus and actions.
|
||||
|
||||
Please note that Affix should not cover other content on the page, especially when the size of the viewport is small.
|
||||
Please note that Affix should not cover other content in page, especially when the size of viewport is small.
|
||||
|
||||
## API
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| -------- | ----------- | ---- | ------- |
|
||||
| offsetBottom | Pixels to offset from bottom when calculating position of scroll | number | - |
|
||||
| offsetTop | Pixels to offset from top when calculating position of scroll | number | 0 |
|
||||
| target | specifies the scrollable area dom node | () => HTMLElement | () => window |
|
||||
| onChange | Callback for when affix state is changed | Function(affixed) | - |
|
||||
| Property | Description | Type | Default |
|
||||
|--------------|-----------------------|----------|--------------|
|
||||
| offsetTop | Pixels to offset from top when calculating position of scroll | Number | 0 |
|
||||
| offsetBottom | Pixels to offset from bottom when calculating position of scroll | Number | - |
|
||||
| onChange | Callback when affix state is changed | Function(affixed) | - |
|
||||
|
||||
**Note:** Children of `Affix` can not be `position: absolute`, but you can set `Affix` as `position: absolute`:
|
||||
|
||||
|
||||
@@ -1,20 +1,18 @@
|
||||
import * as React from 'react';
|
||||
import * as ReactDOM from 'react-dom';
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import addEventListener from 'rc-util/lib/Dom/addEventListener';
|
||||
import classNames from 'classnames';
|
||||
import shallowequal from 'shallowequal';
|
||||
import omit from 'omit.js';
|
||||
import getScroll from '../_util/getScroll';
|
||||
import { throttleByAnimationFrameDecorator } from '../_util/throttleByAnimationFrame';
|
||||
|
||||
function getTargetRect(target: HTMLElement | Window | null): ClientRect {
|
||||
function getTargetRect(target): ClientRect {
|
||||
return target !== window ?
|
||||
(target as HTMLElement).getBoundingClientRect() :
|
||||
{ top: 0, left: 0, bottom: 0 } as ClientRect;
|
||||
target.getBoundingClientRect() :
|
||||
{ top: 0, left: 0, bottom: 0 };
|
||||
}
|
||||
|
||||
function getOffset(element: HTMLElement, target: HTMLElement | Window | null) {
|
||||
function getOffset(element: HTMLElement, target) {
|
||||
const elemRect = element.getBoundingClientRect();
|
||||
const targetRect = getTargetRect(target);
|
||||
|
||||
@@ -30,8 +28,6 @@ function getOffset(element: HTMLElement, target: HTMLElement | Window | null) {
|
||||
scrollTop - clientTop,
|
||||
left: elemRect.left - targetRect.left +
|
||||
scrollLeft - clientLeft,
|
||||
width: elemRect.width,
|
||||
height: elemRect.height,
|
||||
};
|
||||
}
|
||||
|
||||
@@ -40,7 +36,7 @@ function noop() {}
|
||||
function getDefaultTarget() {
|
||||
return typeof window !== 'undefined' ?
|
||||
window : null;
|
||||
}
|
||||
};
|
||||
|
||||
// Affix
|
||||
export interface AffixProps {
|
||||
@@ -55,48 +51,32 @@ export interface AffixProps {
|
||||
/** 固定状态改变时触发的回调函数 */
|
||||
onChange?: (affixed?: boolean) => void;
|
||||
/** 设置 Affix 需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数 */
|
||||
target?: () => Window | HTMLElement | null;
|
||||
target?: () => Window | HTMLElement;
|
||||
prefixCls?: string;
|
||||
}
|
||||
|
||||
export interface AffixState {
|
||||
affixStyle: React.CSSProperties | undefined;
|
||||
placeholderStyle: React.CSSProperties | undefined;
|
||||
}
|
||||
|
||||
export default class Affix extends React.Component<AffixProps, AffixState> {
|
||||
export default class Affix extends React.Component<AffixProps, any> {
|
||||
static propTypes = {
|
||||
offsetTop: PropTypes.number,
|
||||
offsetBottom: PropTypes.number,
|
||||
target: PropTypes.func,
|
||||
offsetTop: React.PropTypes.number,
|
||||
offsetBottom: React.PropTypes.number,
|
||||
target: React.PropTypes.func,
|
||||
};
|
||||
|
||||
scrollEvent: any;
|
||||
resizeEvent: any;
|
||||
timeout: any;
|
||||
|
||||
events = [
|
||||
'resize',
|
||||
'scroll',
|
||||
'touchstart',
|
||||
'touchmove',
|
||||
'touchend',
|
||||
'pageshow',
|
||||
'load',
|
||||
];
|
||||
|
||||
eventHandlers: {
|
||||
[key: string]: any;
|
||||
} = {};
|
||||
|
||||
state: AffixState = {
|
||||
affixStyle: undefined,
|
||||
placeholderStyle: undefined,
|
||||
refs: {
|
||||
fixedNode: HTMLElement;
|
||||
};
|
||||
|
||||
private fixedNode: HTMLElement;
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
affixStyle: null,
|
||||
placeholderStyle: null,
|
||||
};
|
||||
}
|
||||
|
||||
setAffixStyle(e: any, affixStyle: React.CSSProperties | null) {
|
||||
setAffixStyle(e, affixStyle) {
|
||||
const { onChange = noop, target = getDefaultTarget } = this.props;
|
||||
const originalAffixStyle = this.state.affixStyle;
|
||||
const isWindow = target() === window;
|
||||
@@ -106,7 +86,7 @@ export default class Affix extends React.Component<AffixProps, AffixState> {
|
||||
if (shallowequal(affixStyle, originalAffixStyle)) {
|
||||
return;
|
||||
}
|
||||
this.setState({ affixStyle: affixStyle as React.CSSProperties }, () => {
|
||||
this.setState({ affixStyle }, () => {
|
||||
const affixed = !!this.state.affixStyle;
|
||||
if ((affixStyle && !originalAffixStyle) ||
|
||||
(!affixStyle && originalAffixStyle)) {
|
||||
@@ -115,16 +95,18 @@ export default class Affix extends React.Component<AffixProps, AffixState> {
|
||||
});
|
||||
}
|
||||
|
||||
setPlaceholderStyle(placeholderStyle: React.CSSProperties | null) {
|
||||
setPlaceholderStyle(e, placeholderStyle) {
|
||||
const originalPlaceholderStyle = this.state.placeholderStyle;
|
||||
if (e.type === 'resize') {
|
||||
return;
|
||||
}
|
||||
if (shallowequal(placeholderStyle, originalPlaceholderStyle)) {
|
||||
return;
|
||||
}
|
||||
this.setState({ placeholderStyle: placeholderStyle as React.CSSProperties });
|
||||
this.setState({ placeholderStyle });
|
||||
}
|
||||
|
||||
@throttleByAnimationFrameDecorator()
|
||||
updatePosition(e: any) {
|
||||
updatePosition = (e) => {
|
||||
let { offsetTop, offsetBottom, offset, target = getDefaultTarget } = this.props;
|
||||
const targetNode = target();
|
||||
|
||||
@@ -134,8 +116,8 @@ export default class Affix extends React.Component<AffixProps, AffixState> {
|
||||
const affixNode = ReactDOM.findDOMNode(this) as HTMLElement;
|
||||
const elemOffset = getOffset(affixNode, targetNode);
|
||||
const elemSize = {
|
||||
width: this.fixedNode.offsetWidth,
|
||||
height: this.fixedNode.offsetHeight,
|
||||
width: this.refs.fixedNode.offsetWidth,
|
||||
height: this.refs.fixedNode.offsetHeight,
|
||||
};
|
||||
|
||||
const offsetMode = {
|
||||
@@ -154,61 +136,49 @@ export default class Affix extends React.Component<AffixProps, AffixState> {
|
||||
const targetRect = getTargetRect(targetNode);
|
||||
const targetInnerHeight =
|
||||
(targetNode as Window).innerHeight || (targetNode as HTMLElement).clientHeight;
|
||||
if (scrollTop > elemOffset.top - (offsetTop as number) && offsetMode.top) {
|
||||
if (scrollTop > elemOffset.top - offsetTop && offsetMode.top) {
|
||||
// Fixed Top
|
||||
const width = elemOffset.width;
|
||||
const top = targetRect.top + (offsetTop as number);
|
||||
this.setAffixStyle(e, {
|
||||
position: 'fixed',
|
||||
top,
|
||||
top: targetRect.top + offsetTop,
|
||||
left: targetRect.left + elemOffset.left,
|
||||
maxHeight: `calc(100vh - ${top}px)`,
|
||||
width,
|
||||
width: affixNode.offsetWidth,
|
||||
});
|
||||
this.setPlaceholderStyle({
|
||||
width,
|
||||
height: elemSize.height,
|
||||
this.setPlaceholderStyle(e, {
|
||||
width: affixNode.offsetWidth,
|
||||
height: affixNode.offsetHeight,
|
||||
});
|
||||
} else if (
|
||||
scrollTop < elemOffset.top + elemSize.height + (offsetBottom as number) - targetInnerHeight &&
|
||||
scrollTop < elemOffset.top + elemSize.height + offsetBottom - targetInnerHeight &&
|
||||
offsetMode.bottom
|
||||
) {
|
||||
// Fixed Bottom
|
||||
const targetBottomOffet = targetNode === window ? 0 : (window.innerHeight - targetRect.bottom);
|
||||
const width = elemOffset.width;
|
||||
this.setAffixStyle(e, {
|
||||
position: 'fixed',
|
||||
bottom: targetBottomOffet + (offsetBottom as number),
|
||||
bottom: targetBottomOffet + offsetBottom,
|
||||
left: targetRect.left + elemOffset.left,
|
||||
width,
|
||||
width: affixNode.offsetWidth,
|
||||
});
|
||||
this.setPlaceholderStyle({
|
||||
width,
|
||||
height: elemOffset.height,
|
||||
this.setPlaceholderStyle(e, {
|
||||
width: affixNode.offsetWidth,
|
||||
height: affixNode.offsetHeight,
|
||||
});
|
||||
} else {
|
||||
const { affixStyle } = this.state;
|
||||
if (e.type === 'resize' && affixStyle && affixStyle.position === 'fixed' && affixNode.offsetWidth) {
|
||||
this.setAffixStyle(e, { ...affixStyle, width: affixNode.offsetWidth });
|
||||
} else {
|
||||
this.setAffixStyle(e, null);
|
||||
}
|
||||
this.setPlaceholderStyle(null);
|
||||
this.setAffixStyle(e, null);
|
||||
this.setPlaceholderStyle(e, null);
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
const target = this.props.target || getDefaultTarget;
|
||||
// Wait for parent component ref has its value
|
||||
this.timeout = setTimeout(() => {
|
||||
this.setTargetEventListeners(target);
|
||||
});
|
||||
this.setTargetEventListeners(target);
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps: AffixProps) {
|
||||
componentWillReceiveProps(nextProps) {
|
||||
if (this.props.target !== nextProps.target) {
|
||||
this.clearEventListeners();
|
||||
this.setTargetEventListeners(nextProps.target!);
|
||||
this.clearScrollEventListeners();
|
||||
this.setTargetEventListeners(nextProps.target);
|
||||
|
||||
// Mock Event object.
|
||||
this.updatePosition({});
|
||||
@@ -216,46 +186,33 @@ export default class Affix extends React.Component<AffixProps, AffixState> {
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
this.clearEventListeners();
|
||||
clearTimeout(this.timeout);
|
||||
(this.updatePosition as any).cancel();
|
||||
this.clearScrollEventListeners();
|
||||
}
|
||||
|
||||
setTargetEventListeners(getTarget: () => HTMLElement | Window | null) {
|
||||
setTargetEventListeners(getTarget) {
|
||||
const target = getTarget();
|
||||
if (!target) {
|
||||
return;
|
||||
}
|
||||
this.clearEventListeners();
|
||||
|
||||
this.events.forEach(eventName => {
|
||||
this.eventHandlers[eventName] = addEventListener(target, eventName, this.updatePosition);
|
||||
});
|
||||
this.scrollEvent = addEventListener(target, 'scroll', this.updatePosition);
|
||||
this.resizeEvent = addEventListener(target, 'resize', this.updatePosition);
|
||||
}
|
||||
|
||||
clearEventListeners() {
|
||||
this.events.forEach(eventName => {
|
||||
const handler = this.eventHandlers[eventName];
|
||||
if (handler && handler.remove) {
|
||||
handler.remove();
|
||||
clearScrollEventListeners() {
|
||||
['scrollEvent', 'resizeEvent'].forEach((name) => {
|
||||
if (this[name]) {
|
||||
this[name].remove();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
saveFixedNode = (node: HTMLDivElement) => {
|
||||
this.fixedNode = node;
|
||||
}
|
||||
|
||||
render() {
|
||||
const className = classNames({
|
||||
[this.props.prefixCls || 'ant-affix']: this.state.affixStyle,
|
||||
});
|
||||
|
||||
const props = omit(this.props, ['prefixCls', 'offsetTop', 'offsetBottom', 'target', 'onChange']);
|
||||
const placeholderStyle = { ...this.state.placeholderStyle, ...this.props.style };
|
||||
const props = omit(this.props, ['prefixCls', 'offsetTop', 'offsetBottom', 'target']);
|
||||
|
||||
return (
|
||||
<div {...props} style={placeholderStyle}>
|
||||
<div className={className} ref={this.saveFixedNode} style={this.state.affixStyle}>
|
||||
<div {...props} style={this.state.placeholderStyle}>
|
||||
<div className={className} ref="fixedNode" style={this.state.affixStyle}>
|
||||
{this.props.children}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -15,12 +15,12 @@ title: Affix
|
||||
|
||||
## API
|
||||
|
||||
| 成员 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| offsetBottom | 距离窗口底部达到指定偏移量后触发 | number | |
|
||||
| offsetTop | 距离窗口顶部达到指定偏移量后触发 | number | |
|
||||
| target | 设置 `Affix` 需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数 | () => HTMLElement | () => window |
|
||||
| onChange | 固定状态改变时触发的回调函数 | Function(affixed) | 无 |
|
||||
| 成员 | 说明 | 类型 | 默认值 |
|
||||
|-------------|----------------|--------------------|--------------|
|
||||
| offsetTop | 距离窗口顶部达到指定偏移量后触发 | Number | |
|
||||
| offsetBottom | 距离窗口底部达到指定偏移量后触发 | Number | |
|
||||
| target | 设置 `Affix` 需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数 | Function | () => window |
|
||||
| onChange | 固定状态改变时触发的回调函数 | Function(affixed) | 无 |
|
||||
|
||||
**注意：**`Affix` 内的元素不要使用绝对定位，如需要绝对定位的效果，可以直接设置 `Affix` 为绝对定位：
|
||||
|
||||
|
||||
@@ -3,5 +3,4 @@
|
||||
.@{ant-prefix}-affix {
|
||||
position: fixed;
|
||||
z-index: @zindex-affix;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
@@ -1,424 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders ./components/alert/demo/banner.md correctly 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="ant-alert ant-alert-warning ant-alert-banner"
|
||||
data-show="true"
|
||||
>
|
||||
<i
|
||||
class="anticon anticon-exclamation-circle ant-alert-icon"
|
||||
/>
|
||||
<span
|
||||
class="ant-alert-message"
|
||||
>
|
||||
Warning text
|
||||
</span>
|
||||
<span
|
||||
class="ant-alert-description"
|
||||
/>
|
||||
</div>
|
||||
<br />
|
||||
<div
|
||||
class="ant-alert ant-alert-warning ant-alert-banner"
|
||||
data-show="true"
|
||||
>
|
||||
<i
|
||||
class="anticon anticon-exclamation-circle ant-alert-icon"
|
||||
/>
|
||||
<span
|
||||
class="ant-alert-message"
|
||||
>
|
||||
Very long warning text warning text text text text text text text
|
||||
</span>
|
||||
<span
|
||||
class="ant-alert-description"
|
||||
/>
|
||||
<a
|
||||
class="ant-alert-close-icon"
|
||||
>
|
||||
<i
|
||||
class="anticon anticon-cross"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
<br />
|
||||
<div
|
||||
class="ant-alert ant-alert-warning ant-alert-no-icon ant-alert-banner"
|
||||
data-show="true"
|
||||
>
|
||||
<span
|
||||
class="ant-alert-message"
|
||||
>
|
||||
Warning text without icon
|
||||
</span>
|
||||
<span
|
||||
class="ant-alert-description"
|
||||
/>
|
||||
</div>
|
||||
<br />
|
||||
<div
|
||||
class="ant-alert ant-alert-error ant-alert-banner"
|
||||
data-show="true"
|
||||
>
|
||||
<i
|
||||
class="anticon anticon-cross-circle ant-alert-icon"
|
||||
/>
|
||||
<span
|
||||
class="ant-alert-message"
|
||||
>
|
||||
Error text
|
||||
</span>
|
||||
<span
|
||||
class="ant-alert-description"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/alert/demo/basic.md correctly 1`] = `
|
||||
<div
|
||||
class="ant-alert ant-alert-success ant-alert-no-icon"
|
||||
data-show="true"
|
||||
>
|
||||
<span
|
||||
class="ant-alert-message"
|
||||
>
|
||||
Success Text
|
||||
</span>
|
||||
<span
|
||||
class="ant-alert-description"
|
||||
/>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/alert/demo/closable.md correctly 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="ant-alert ant-alert-warning ant-alert-no-icon"
|
||||
data-show="true"
|
||||
>
|
||||
<span
|
||||
class="ant-alert-message"
|
||||
>
|
||||
Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text
|
||||
</span>
|
||||
<span
|
||||
class="ant-alert-description"
|
||||
/>
|
||||
<a
|
||||
class="ant-alert-close-icon"
|
||||
>
|
||||
<i
|
||||
class="anticon anticon-cross"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
class="ant-alert ant-alert-error ant-alert-with-description ant-alert-no-icon"
|
||||
data-show="true"
|
||||
>
|
||||
<span
|
||||
class="ant-alert-message"
|
||||
>
|
||||
Error Text
|
||||
</span>
|
||||
<span
|
||||
class="ant-alert-description"
|
||||
>
|
||||
Error Description Error Description Error Description Error Description Error Description Error Description
|
||||
</span>
|
||||
<a
|
||||
class="ant-alert-close-icon"
|
||||
>
|
||||
<i
|
||||
class="anticon anticon-cross"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/alert/demo/close-text.md correctly 1`] = `
|
||||
<div
|
||||
class="ant-alert ant-alert-info ant-alert-no-icon"
|
||||
data-show="true"
|
||||
>
|
||||
<span
|
||||
class="ant-alert-message"
|
||||
>
|
||||
Info Text
|
||||
</span>
|
||||
<span
|
||||
class="ant-alert-description"
|
||||
/>
|
||||
<a
|
||||
class="ant-alert-close-icon"
|
||||
>
|
||||
Close Now
|
||||
</a>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/alert/demo/description.md correctly 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="ant-alert ant-alert-success ant-alert-with-description ant-alert-no-icon"
|
||||
data-show="true"
|
||||
>
|
||||
<span
|
||||
class="ant-alert-message"
|
||||
>
|
||||
Success Text
|
||||
</span>
|
||||
<span
|
||||
class="ant-alert-description"
|
||||
>
|
||||
Success Description Success Description Success Description
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-alert ant-alert-info ant-alert-with-description ant-alert-no-icon"
|
||||
data-show="true"
|
||||
>
|
||||
<span
|
||||
class="ant-alert-message"
|
||||
>
|
||||
Info Text
|
||||
</span>
|
||||
<span
|
||||
class="ant-alert-description"
|
||||
>
|
||||
Info Description Info Description Info Description Info Description
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-alert ant-alert-warning ant-alert-with-description ant-alert-no-icon"
|
||||
data-show="true"
|
||||
>
|
||||
<span
|
||||
class="ant-alert-message"
|
||||
>
|
||||
Warning Text
|
||||
</span>
|
||||
<span
|
||||
class="ant-alert-description"
|
||||
>
|
||||
Warning Description Warning Description Warning Description Warning Description
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-alert ant-alert-error ant-alert-with-description ant-alert-no-icon"
|
||||
data-show="true"
|
||||
>
|
||||
<span
|
||||
class="ant-alert-message"
|
||||
>
|
||||
Error Text
|
||||
</span>
|
||||
<span
|
||||
class="ant-alert-description"
|
||||
>
|
||||
Error Description Error Description Error Description Error Description
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/alert/demo/icon.md correctly 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="ant-alert ant-alert-success"
|
||||
data-show="true"
|
||||
>
|
||||
<i
|
||||
class="anticon anticon-check-circle ant-alert-icon"
|
||||
/>
|
||||
<span
|
||||
class="ant-alert-message"
|
||||
>
|
||||
Success Tips
|
||||
</span>
|
||||
<span
|
||||
class="ant-alert-description"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-alert ant-alert-info"
|
||||
data-show="true"
|
||||
>
|
||||
<i
|
||||
class="anticon anticon-info-circle ant-alert-icon"
|
||||
/>
|
||||
<span
|
||||
class="ant-alert-message"
|
||||
>
|
||||
Informational Notes
|
||||
</span>
|
||||
<span
|
||||
class="ant-alert-description"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-alert ant-alert-warning"
|
||||
data-show="true"
|
||||
>
|
||||
<i
|
||||
class="anticon anticon-exclamation-circle ant-alert-icon"
|
||||
/>
|
||||
<span
|
||||
class="ant-alert-message"
|
||||
>
|
||||
Warning
|
||||
</span>
|
||||
<span
|
||||
class="ant-alert-description"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-alert ant-alert-error"
|
||||
data-show="true"
|
||||
>
|
||||
<i
|
||||
class="anticon anticon-cross-circle ant-alert-icon"
|
||||
/>
|
||||
<span
|
||||
class="ant-alert-message"
|
||||
>
|
||||
Error
|
||||
</span>
|
||||
<span
|
||||
class="ant-alert-description"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-alert ant-alert-success ant-alert-with-description"
|
||||
data-show="true"
|
||||
>
|
||||
<i
|
||||
class="anticon anticon-check-circle-o ant-alert-icon"
|
||||
/>
|
||||
<span
|
||||
class="ant-alert-message"
|
||||
>
|
||||
success tips
|
||||
</span>
|
||||
<span
|
||||
class="ant-alert-description"
|
||||
>
|
||||
Detailed description and advices about successful copywriting.
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-alert ant-alert-info ant-alert-with-description"
|
||||
data-show="true"
|
||||
>
|
||||
<i
|
||||
class="anticon anticon-info-circle-o ant-alert-icon"
|
||||
/>
|
||||
<span
|
||||
class="ant-alert-message"
|
||||
>
|
||||
Informational Notes
|
||||
</span>
|
||||
<span
|
||||
class="ant-alert-description"
|
||||
>
|
||||
Additional description and informations about copywriting.
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-alert ant-alert-warning ant-alert-with-description"
|
||||
data-show="true"
|
||||
>
|
||||
<i
|
||||
class="anticon anticon-exclamation-circle-o ant-alert-icon"
|
||||
/>
|
||||
<span
|
||||
class="ant-alert-message"
|
||||
>
|
||||
Warning
|
||||
</span>
|
||||
<span
|
||||
class="ant-alert-description"
|
||||
>
|
||||
This is a warning notice about copywriting.
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-alert ant-alert-error ant-alert-with-description"
|
||||
data-show="true"
|
||||
>
|
||||
<i
|
||||
class="anticon anticon-cross-circle-o ant-alert-icon"
|
||||
/>
|
||||
<span
|
||||
class="ant-alert-message"
|
||||
>
|
||||
Error
|
||||
</span>
|
||||
<span
|
||||
class="ant-alert-description"
|
||||
>
|
||||
This is an error message about copywriting.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/alert/demo/style.md correctly 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="ant-alert ant-alert-success ant-alert-no-icon"
|
||||
data-show="true"
|
||||
>
|
||||
<span
|
||||
class="ant-alert-message"
|
||||
>
|
||||
Success Text
|
||||
</span>
|
||||
<span
|
||||
class="ant-alert-description"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-alert ant-alert-info ant-alert-no-icon"
|
||||
data-show="true"
|
||||
>
|
||||
<span
|
||||
class="ant-alert-message"
|
||||
>
|
||||
Info Text
|
||||
</span>
|
||||
<span
|
||||
class="ant-alert-description"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-alert ant-alert-warning ant-alert-no-icon"
|
||||
data-show="true"
|
||||
>
|
||||
<span
|
||||
class="ant-alert-message"
|
||||
>
|
||||
Warning Text
|
||||
</span>
|
||||
<span
|
||||
class="ant-alert-description"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-alert ant-alert-error ant-alert-no-icon"
|
||||
data-show="true"
|
||||
>
|
||||
<span
|
||||
class="ant-alert-message"
|
||||
>
|
||||
Error Text
|
||||
</span>
|
||||
<span
|
||||
class="ant-alert-description"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@@ -1,3 +0,0 @@
|
||||
import demoTest from '../../../tests/shared/demoTest';
|
||||
|
||||
demoTest('alert');
|
||||
@@ -1,6 +1,5 @@
|
||||
---
|
||||
order: 6
|
||||
iframe: 250
|
||||
title:
|
||||
zh-CN: 顶部公告
|
||||
en-US: Banner
|
||||
@@ -8,11 +7,11 @@ title:
|
||||
|
||||
## zh-CN
|
||||
|
||||
页面顶部通告形式，默认有图标且`type` 为 'warning'。
|
||||
用作顶部公告时，默认有图标，`type` 为 'warning'，并有特殊样式。
|
||||
|
||||
## en-US
|
||||
|
||||
Display Alert as a banner at top of page.
|
||||
When `Alert` is used as banner, it has particular style, Icon and `type`(warning) are specified by default.
|
||||
|
||||
````jsx
|
||||
import { Alert } from 'antd';
|
||||
@@ -22,10 +21,6 @@ ReactDOM.render(
|
||||
<Alert message="Warning text" banner />
|
||||
<br />
|
||||
<Alert message="Very long warning text warning text text text text text text text" banner closable />
|
||||
<br />
|
||||
<Alert showIcon={false} message="Warning text without icon" banner />
|
||||
<br />
|
||||
<Alert type="error" message="Error text" banner />
|
||||
</div>
|
||||
, mountNode);
|
||||
````
|
||||
|
||||
@@ -20,9 +20,3 @@ ReactDOM.render(
|
||||
<Alert message="Success Text" type="success" />
|
||||
, mountNode);
|
||||
````
|
||||
|
||||
<style>
|
||||
.ant-alert {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -20,21 +20,17 @@ const onClose = function (e) {
|
||||
console.log(e, 'I was closed.');
|
||||
};
|
||||
|
||||
ReactDOM.render(
|
||||
<div>
|
||||
<Alert
|
||||
message="Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text"
|
||||
type="warning"
|
||||
closable
|
||||
onClose={onClose}
|
||||
/>
|
||||
<Alert
|
||||
message="Error Text"
|
||||
description="Error Description Error Description Error Description Error Description Error Description Error Description"
|
||||
type="error"
|
||||
closable
|
||||
onClose={onClose}
|
||||
/>
|
||||
</div>
|
||||
, mountNode);
|
||||
ReactDOM.render(<div>
|
||||
<Alert message="Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text"
|
||||
type="warning"
|
||||
closable
|
||||
onClose={onClose}
|
||||
/>
|
||||
<Alert message="Error Text"
|
||||
description="Error Description Error Description Error Description Error Description Error Description Error Description"
|
||||
type="error"
|
||||
closable
|
||||
onClose={onClose}
|
||||
/>
|
||||
</div>, mountNode);
|
||||
````
|
||||
|
||||
@@ -16,28 +16,26 @@ Additional description for alert message.
|
||||
````jsx
|
||||
import { Alert } from 'antd';
|
||||
|
||||
ReactDOM.render(
|
||||
<div>
|
||||
<Alert
|
||||
message="Success Text"
|
||||
description="Success Description Success Description Success Description"
|
||||
type="success"
|
||||
/>
|
||||
<Alert
|
||||
message="Info Text"
|
||||
description="Info Description Info Description Info Description Info Description"
|
||||
type="info"
|
||||
/>
|
||||
<Alert
|
||||
message="Warning Text"
|
||||
description="Warning Description Warning Description Warning Description Warning Description"
|
||||
type="warning"
|
||||
/>
|
||||
<Alert
|
||||
message="Error Text"
|
||||
description="Error Description Error Description Error Description Error Description"
|
||||
type="error"
|
||||
/>
|
||||
</div>
|
||||
, mountNode);
|
||||
ReactDOM.render(<div>
|
||||
<Alert
|
||||
message="Success Text"
|
||||
description="Success Description Success Description Success Description"
|
||||
type="success"
|
||||
/>
|
||||
<Alert
|
||||
message="Info Text"
|
||||
description="Info Description Info Description Info Description Info Description"
|
||||
type="info"
|
||||
/>
|
||||
<Alert
|
||||
message="Warning Text"
|
||||
description="Warning Description Warning Description Warning Description Warning Description"
|
||||
type="warning"
|
||||
/>
|
||||
<Alert
|
||||
message="Error Text"
|
||||
description="Error Description Error Description Error Description Error Description"
|
||||
type="error"
|
||||
/>
|
||||
</div>, mountNode);
|
||||
````
|
||||
|
||||
@@ -16,36 +16,34 @@ Decent icon make information more clear and more friendly.
|
||||
````jsx
|
||||
import { Alert } from 'antd';
|
||||
|
||||
ReactDOM.render(
|
||||
<div>
|
||||
<Alert message="Success Tips" type="success" showIcon />
|
||||
<Alert message="Informational Notes" type="info" showIcon />
|
||||
<Alert message="Warning" type="warning" showIcon />
|
||||
<Alert message="Error" type="error" showIcon />
|
||||
<Alert
|
||||
message="success tips"
|
||||
description="Detailed description and advices about successful copywriting."
|
||||
type="success"
|
||||
showIcon
|
||||
/>
|
||||
<Alert
|
||||
message="Informational Notes"
|
||||
description="Additional description and informations about copywriting."
|
||||
type="info"
|
||||
showIcon
|
||||
/>
|
||||
<Alert
|
||||
message="Warning"
|
||||
description="This is a warning notice about copywriting."
|
||||
type="warning"
|
||||
showIcon
|
||||
/>
|
||||
<Alert
|
||||
message="Error"
|
||||
description="This is an error message about copywriting."
|
||||
type="error"
|
||||
showIcon
|
||||
/>
|
||||
</div>
|
||||
, mountNode);
|
||||
ReactDOM.render(<div>
|
||||
<Alert message="Success Tips" type="success" showIcon />
|
||||
<Alert message="Informational Notes" type="info" showIcon />
|
||||
<Alert message="Warning" type="warning" showIcon />
|
||||
<Alert message="Error" type="error" showIcon />
|
||||
<Alert
|
||||
message="success tips"
|
||||
description="Detailed description and advices about successful copywriting."
|
||||
type="success"
|
||||
showIcon
|
||||
/>
|
||||
<Alert
|
||||
message="Informational Notes"
|
||||
description="Additional description and informations about copywriting."
|
||||
type="info"
|
||||
showIcon
|
||||
/>
|
||||
<Alert
|
||||
message="Warning"
|
||||
description="This is a warning notice about copywriting."
|
||||
type="warning"
|
||||
showIcon
|
||||
/>
|
||||
<Alert
|
||||
message="Error"
|
||||
description="This is an error message about copywriting."
|
||||
type="error"
|
||||
showIcon
|
||||
/>
|
||||
</div>, mountNode);
|
||||
````
|
||||
|
||||
@@ -16,12 +16,10 @@ There are 4 types of Alert: `success`, `info`, `warning`, `error`.
|
||||
````jsx
|
||||
import { Alert } from 'antd';
|
||||
|
||||
ReactDOM.render(
|
||||
<div>
|
||||
<Alert message="Success Text" type="success" />
|
||||
<Alert message="Info Text" type="info" />
|
||||
<Alert message="Warning Text" type="warning" />
|
||||
<Alert message="Error Text" type="error" />
|
||||
</div>
|
||||
, mountNode);
|
||||
ReactDOM.render(<div>
|
||||
<Alert message="Success Text" type="success" />
|
||||
<Alert message="Info Text" type="info" />
|
||||
<Alert message="Warning Text" type="warning" />
|
||||
<Alert message="Error Text" type="error" />
|
||||
</div>, mountNode);
|
||||
````
|
||||
|
||||
@@ -8,18 +8,18 @@ Alert component for feedback.
|
||||
|
||||
## When To Use
|
||||
|
||||
- When you need to show alert messages to users.
|
||||
- When you need a persistent static container which is closable by user actions.
|
||||
- When you need to show alert messages for users.
|
||||
- When you need a persist static container, and closable by user actions.
|
||||
|
||||
## API
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| -------- | ----------- | ---- | ------- |
|
||||
| banner | Whether to show as banner | boolean | false |
|
||||
| closable | Whether Alert can be closed | boolean | - |
|
||||
| closeText | Close text to show | string\|ReactNode | - |
|
||||
| description | Additional content of Alert | string\|ReactNode | - |
|
||||
| message | Content of Alert | string\|ReactNode | - |
|
||||
| showIcon | Whether to show icon | boolean | false, in `banner` mode default is true |
|
||||
| type | Type of Alert styles, options: `success`, `info`, `warning`, `error` | string | `info`, in `banner` mode default is `warning` |
|
||||
| onClose | Callback when Alert is closed | Function | - |
|
||||
| Property | Description | Type | Default |
|
||||
|----------- |--------------------------------------------------------- | ---------- |-------|
|
||||
| type | Type of Alert styles, options:`success`, `info`, `warning`, `error` | String | `info` |
|
||||
| closable | Whether Alert can be closed | Boolean | - |
|
||||
| closeText | Close text to show | React.Node | - |
|
||||
| message | Content of Alert | React.Node | - |
|
||||
| description | Additional content of Alert | React.Node | - |
|
||||
| onClose | Callback when close Alert | Function | - |
|
||||
| showIcon | Whether to show icon | Boolean | false |
|
||||
| banner | Whether to show as banner | Boolean | false |
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
import * as React from 'react';
|
||||
import * as ReactDOM from 'react-dom';
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import Animate from 'rc-animate';
|
||||
import Icon from '../icon';
|
||||
import classNames from 'classnames';
|
||||
|
||||
function noop() { }
|
||||
function noop() {}
|
||||
|
||||
export interface AlertProps {
|
||||
/**
|
||||
@@ -20,7 +20,7 @@ export interface AlertProps {
|
||||
/** Additional content of Alert */
|
||||
description?: React.ReactNode;
|
||||
/** Callback when close Alert */
|
||||
onClose?: React.MouseEventHandler<HTMLAnchorElement>;
|
||||
onClose?: React.MouseEventHandler<any>;
|
||||
/** Whether to show icon */
|
||||
showIcon?: boolean;
|
||||
style?: React.CSSProperties;
|
||||
@@ -30,14 +30,17 @@ export interface AlertProps {
|
||||
}
|
||||
|
||||
export default class Alert extends React.Component<AlertProps, any> {
|
||||
constructor(props: AlertProps) {
|
||||
static defaultProps = {
|
||||
type: 'info',
|
||||
};
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
closing: true,
|
||||
closed: false,
|
||||
};
|
||||
}
|
||||
handleClose = (e: React.MouseEvent<HTMLAnchorElement>) => {
|
||||
handleClose = (e) => {
|
||||
e.preventDefault();
|
||||
let dom = ReactDOM.findDOMNode(this) as HTMLElement;
|
||||
dom.style.height = `${dom.offsetHeight}px`;
|
||||
@@ -63,9 +66,9 @@ export default class Alert extends React.Component<AlertProps, any> {
|
||||
} = this.props;
|
||||
|
||||
// banner模式默认有 Icon
|
||||
showIcon = banner && showIcon === undefined ? true : showIcon;
|
||||
showIcon = showIcon || banner;
|
||||
// banner模式默认为警告
|
||||
type = banner && type === undefined ? 'warning' : type || 'info';
|
||||
type = banner ? 'warning' : type;
|
||||
|
||||
let iconType = '';
|
||||
switch (type) {
|
||||
@@ -90,25 +93,21 @@ export default class Alert extends React.Component<AlertProps, any> {
|
||||
iconType += '-o';
|
||||
}
|
||||
|
||||
let alertCls = classNames(prefixCls, {
|
||||
let alertCls = classNames({
|
||||
[prefixCls]: true,
|
||||
[`${prefixCls}-${type}`]: true,
|
||||
[`${prefixCls}-close`]: !this.state.closing,
|
||||
[`${prefixCls}-with-description`]: !!description,
|
||||
[`${prefixCls}-no-icon`]: !showIcon,
|
||||
[`${prefixCls}-banner`]: !!banner,
|
||||
}, className);
|
||||
[className]: !!className,
|
||||
});
|
||||
|
||||
// closeable when closeText is assigned
|
||||
if (closeText) {
|
||||
closable = true;
|
||||
}
|
||||
|
||||
const closeIcon = closable ? (
|
||||
<a onClick={this.handleClose} className={`${prefixCls}-close-icon`}>
|
||||
{closeText || <Icon type="cross" />}
|
||||
</a>
|
||||
) : null;
|
||||
|
||||
return this.state.closed ? null : (
|
||||
<Animate
|
||||
component=""
|
||||
@@ -120,7 +119,9 @@ export default class Alert extends React.Component<AlertProps, any> {
|
||||
{showIcon ? <Icon className={`${prefixCls}-icon`} type={iconType} /> : null}
|
||||
<span className={`${prefixCls}-message`}>{message}</span>
|
||||
<span className={`${prefixCls}-description`}>{description}</span>
|
||||
{closeIcon}
|
||||
{closable ? <a onClick={this.handleClose} className={`${prefixCls}-close-icon`}>
|
||||
{closeText || <Icon type="cross" />}
|
||||
</a> : null}
|
||||
</div>
|
||||
</Animate>
|
||||
);
|
||||
|
||||
@@ -14,13 +14,14 @@ title: Alert
|
||||
|
||||
## API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| banner | 是否用作顶部公告 | boolean | false |
|
||||
| closable | 默认不显示关闭按钮 | boolean | 无 |
|
||||
| closeText | 自定义关闭按钮 | string\|ReactNode | 无 |
|
||||
| description | 警告提示的辅助性文字介绍 | string\|ReactNode | 无 |
|
||||
| message | 警告提示内容 | string\|ReactNode | 无 |
|
||||
| showIcon | 是否显示辅助图标 | boolean | false，`banner` 模式下默认值为 true |
|
||||
| type | 指定警告提示的样式，有四种选择 `success`、`info`、`warning`、`error` | string | `info`，`banner` 模式下默认值为 `warning` |
|
||||
| onClose | 关闭时触发的回调函数 | Function | 无 |
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|----------- |--------------------------------------------------------- | ---------- |-------|
|
||||
| type | 指定警告提示的样式，有四种选择 `success`、`info`、`warning`、`error` | String | `info` |
|
||||
| closable | 默认不显示关闭按钮 | Boolean | 无 |
|
||||
| closeText | 自定义关闭按钮 | React.Node | 无 |
|
||||
| message | 警告提示内容 | React.Node | 无 |
|
||||
| description | 警告提示的辅助性文字介绍 | React.Node | 无 |
|
||||
| onClose | 关闭时触发的回调函数 | Function | 无 |
|
||||
| showIcon | 是否显示辅助图标 | Boolean | false |
|
||||
| banner | 是否用作顶部公告 | Boolean | false |
|
||||
|
||||
|
||||
@@ -1,77 +1,78 @@
|
||||
@import "../../style/themes/default";
|
||||
@import "../../style/mixins/index";
|
||||
|
||||
@alert-prefix-cls: ~"@{ant-prefix}-alert";
|
||||
|
||||
@alert-message-color: @heading-color;
|
||||
@alert-text-color: @text-color;
|
||||
|
||||
.@{alert-prefix-cls} {
|
||||
.reset-component;
|
||||
position: relative;
|
||||
padding: 8px 15px 8px 37px;
|
||||
padding: 8px 48px 8px 38px;
|
||||
border-radius: @border-radius-base;
|
||||
color: @text-color;
|
||||
font-size: @font-size-base;
|
||||
line-height: 16px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
&&-no-icon {
|
||||
padding: 8px 15px;
|
||||
padding: 8px 48px 8px 16px;
|
||||
}
|
||||
|
||||
&-icon {
|
||||
top: 8px + @font-size-base * @line-height-base / 2 - @font-size-base / 2 + 1px;
|
||||
font-size: @font-size-lg;
|
||||
top: 9px;
|
||||
left: 16px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
&-description {
|
||||
font-size: @font-size-base;
|
||||
line-height: 22px;
|
||||
line-height: 21px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
&-success {
|
||||
border: @border-width-base @border-style-base ~`colorPalette("@{success-color}", 3)`;
|
||||
background-color: ~`colorPalette("@{success-color}", 1)`;
|
||||
border: 1px solid tint(@success-color, 80%);
|
||||
background-color: tint(@success-color, 90%);
|
||||
.@{alert-prefix-cls}-icon {
|
||||
color: @success-color;
|
||||
}
|
||||
}
|
||||
|
||||
&-info {
|
||||
border: @border-width-base @border-style-base ~`colorPalette("@{info-color}", 3)`;
|
||||
background-color: ~`colorPalette("@{info-color}", 1)`;
|
||||
border: 1px solid tint(@primary-color, 80%);
|
||||
background-color: tint(@primary-color, 90%);
|
||||
.@{alert-prefix-cls}-icon {
|
||||
color: @info-color;
|
||||
color: @primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
&-warning {
|
||||
border: @border-width-base @border-style-base ~`colorPalette("@{warning-color}", 3)`;
|
||||
background-color: ~`colorPalette("@{warning-color}", 1)`;
|
||||
border: 1px solid tint(@warning-color, 80%);
|
||||
background-color: tint(@warning-color, 90%);
|
||||
.@{alert-prefix-cls}-icon {
|
||||
color: @warning-color;
|
||||
}
|
||||
}
|
||||
|
||||
&-error {
|
||||
border: @border-width-base @border-style-base ~`colorPalette("@{error-color}", 3)`;
|
||||
background-color: ~`colorPalette("@{error-color}", 1)`;
|
||||
border: 1px solid tint(@error-color, 80%);
|
||||
background-color: tint(@error-color, 90%);
|
||||
.@{alert-prefix-cls}-icon {
|
||||
color: @error-color;
|
||||
}
|
||||
}
|
||||
|
||||
&-close-icon {
|
||||
font-size: @font-size-sm;
|
||||
font-size: @font-size-base;
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
top: 8px;
|
||||
line-height: 22px;
|
||||
top: 10px;
|
||||
height: 12px;
|
||||
line-height: 12px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
|
||||
.@{iconfont-css-prefix}-cross {
|
||||
color: @text-color-secondary;
|
||||
transition: color .3s;
|
||||
transition: color .3s ease;
|
||||
&:hover {
|
||||
color: #404040;
|
||||
}
|
||||
@@ -84,21 +85,22 @@
|
||||
}
|
||||
|
||||
&-with-description {
|
||||
padding: 15px 15px 15px 64px;
|
||||
padding: 16px 16px 16px 60px;
|
||||
position: relative;
|
||||
border-radius: @border-radius-base;
|
||||
margin-bottom: 10px;
|
||||
color: @text-color;
|
||||
line-height: @line-height-base;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
&-with-description&-no-icon {
|
||||
padding: 15px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
&-with-description &-icon {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
left: 24px;
|
||||
left: 20px;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
@@ -112,7 +114,7 @@
|
||||
|
||||
&-with-description &-message {
|
||||
font-size: @font-size-lg;
|
||||
color: @alert-message-color;
|
||||
color: @heading-color;
|
||||
display: block;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
@@ -1,246 +0,0 @@
|
||||
import * as React from 'react';
|
||||
import * as ReactDOM from 'react-dom';
|
||||
import PropTypes from 'prop-types';
|
||||
import classNames from 'classnames';
|
||||
import addEventListener from 'rc-util/lib/Dom/addEventListener';
|
||||
import Affix from '../affix';
|
||||
import AnchorLink from './AnchorLink';
|
||||
import getScroll from '../_util/getScroll';
|
||||
import getRequestAnimationFrame from '../_util/getRequestAnimationFrame';
|
||||
|
||||
function getDefaultTarget() {
|
||||
return window;
|
||||
}
|
||||
|
||||
function getOffsetTop(element: HTMLElement): number {
|
||||
if (!element) {
|
||||
return 0;
|
||||
}
|
||||
|
||||
if (!element.getClientRects().length) {
|
||||
return 0;
|
||||
}
|
||||
|
||||
const rect = element.getBoundingClientRect();
|
||||
|
||||
if (rect.width || rect.height) {
|
||||
const doc = element.ownerDocument;
|
||||
const docElem = doc.documentElement;
|
||||
return rect.top - docElem.clientTop;
|
||||
}
|
||||
|
||||
return rect.top;
|
||||
}
|
||||
|
||||
function easeInOutCubic(t: number, b: number, c: number, d: number) {
|
||||
const cc = c - b;
|
||||
t /= d / 2;
|
||||
if (t < 1) {
|
||||
return cc / 2 * t * t * t + b;
|
||||
}
|
||||
return cc / 2 * ((t -= 2) * t * t + 2) + b;
|
||||
}
|
||||
|
||||
const reqAnimFrame = getRequestAnimationFrame();
|
||||
function scrollTo(href: string, offsetTop = 0, target: () => Window | HTMLElement, callback = () => { }) {
|
||||
const scrollTop = getScroll(target(), true);
|
||||
const targetElement = document.getElementById(href.substring(1));
|
||||
if (!targetElement) {
|
||||
return;
|
||||
}
|
||||
const eleOffsetTop = getOffsetTop(targetElement);
|
||||
const targetScrollTop = scrollTop + eleOffsetTop - offsetTop;
|
||||
const startTime = Date.now();
|
||||
const frameFunc = () => {
|
||||
const timestamp = Date.now();
|
||||
const time = timestamp - startTime;
|
||||
window.scrollTo(window.pageXOffset, easeInOutCubic(time, scrollTop, targetScrollTop, 450));
|
||||
if (time < 450) {
|
||||
reqAnimFrame(frameFunc);
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
reqAnimFrame(frameFunc);
|
||||
history.pushState(null, '', href);
|
||||
}
|
||||
|
||||
type Section = {
|
||||
link: String;
|
||||
top: number;
|
||||
};
|
||||
|
||||
export interface AnchorProps {
|
||||
prefixCls?: string;
|
||||
className?: string;
|
||||
style?: React.CSSProperties;
|
||||
children?: React.ReactNode;
|
||||
offsetTop?: number;
|
||||
bounds?: number;
|
||||
affix?: boolean;
|
||||
showInkInFixed?: boolean;
|
||||
target?: () => HTMLElement | Window;
|
||||
}
|
||||
|
||||
export default class Anchor extends React.Component<AnchorProps, any> {
|
||||
static Link: typeof AnchorLink;
|
||||
|
||||
static defaultProps = {
|
||||
prefixCls: 'ant-anchor',
|
||||
affix: true,
|
||||
showInkInFixed: false,
|
||||
};
|
||||
|
||||
static childContextTypes = {
|
||||
antAnchor: PropTypes.object,
|
||||
};
|
||||
|
||||
private inkNode: HTMLSpanElement;
|
||||
|
||||
private links: String[];
|
||||
private scrollEvent: any;
|
||||
private animating: boolean;
|
||||
|
||||
constructor(props: AnchorProps) {
|
||||
super(props);
|
||||
this.state = {
|
||||
activeLink: null,
|
||||
};
|
||||
this.links = [];
|
||||
}
|
||||
|
||||
getChildContext() {
|
||||
return {
|
||||
antAnchor: {
|
||||
registerLink: (link: String) => {
|
||||
if (!this.links.includes(link)) {
|
||||
this.links.push(link);
|
||||
}
|
||||
},
|
||||
unregisterLink: (link: String) => {
|
||||
const index = this.links.indexOf(link);
|
||||
if (index !== -1) {
|
||||
this.links.splice(index, 1);
|
||||
}
|
||||
},
|
||||
activeLink: this.state.activeLink,
|
||||
scrollTo: this.handleScrollTo,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
const getTarget = this.props.target || getDefaultTarget;
|
||||
this.scrollEvent = addEventListener(getTarget(), 'scroll', this.handleScroll);
|
||||
this.handleScroll();
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
if (this.scrollEvent) {
|
||||
this.scrollEvent.remove();
|
||||
}
|
||||
}
|
||||
|
||||
componentDidUpdate() {
|
||||
this.updateInk();
|
||||
}
|
||||
|
||||
handleScroll = () => {
|
||||
if (this.animating) {
|
||||
return;
|
||||
}
|
||||
const { offsetTop, bounds } = this.props;
|
||||
this.setState({
|
||||
activeLink: this.getCurrentAnchor(offsetTop, bounds),
|
||||
});
|
||||
}
|
||||
|
||||
handleScrollTo = (link: string) => {
|
||||
const { offsetTop, target = getDefaultTarget } = this.props;
|
||||
this.animating = true;
|
||||
this.setState({ activeLink: link });
|
||||
scrollTo(link, offsetTop, target, () => {
|
||||
this.animating = false;
|
||||
});
|
||||
}
|
||||
|
||||
getCurrentAnchor(offsetTop = 0, bounds = 5) {
|
||||
let activeLink = '';
|
||||
if (typeof document === 'undefined') {
|
||||
return activeLink;
|
||||
}
|
||||
|
||||
const linkSections: Array<Section> = [];
|
||||
this.links.forEach(link => {
|
||||
const target = document.getElementById(link.substring(1));
|
||||
if (target && getOffsetTop(target) < offsetTop + bounds) {
|
||||
const top = getOffsetTop(target);
|
||||
linkSections.push({
|
||||
link,
|
||||
top,
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
if (linkSections.length) {
|
||||
const maxSection = linkSections.reduce((prev, curr) => curr.top > prev.top ? curr : prev);
|
||||
return maxSection.link;
|
||||
}
|
||||
return '';
|
||||
}
|
||||
|
||||
updateInk = () => {
|
||||
if (typeof document === 'undefined') {
|
||||
return;
|
||||
}
|
||||
const { prefixCls } = this.props;
|
||||
const linkNode = ReactDOM.findDOMNode(this as any).getElementsByClassName(`${prefixCls}-link-title-active`)[0];
|
||||
if (linkNode) {
|
||||
this.inkNode.style.top = `${(linkNode as any).offsetTop + linkNode.clientHeight / 2 - 4.5}px`;
|
||||
}
|
||||
}
|
||||
|
||||
saveInkNode = (node: HTMLSpanElement) => {
|
||||
this.inkNode = node;
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
prefixCls,
|
||||
className = '',
|
||||
style,
|
||||
offsetTop,
|
||||
affix,
|
||||
showInkInFixed,
|
||||
children,
|
||||
} = this.props;
|
||||
const { activeLink } = this.state;
|
||||
|
||||
const inkClass = classNames(`${prefixCls}-ink-ball`, {
|
||||
visible: activeLink,
|
||||
});
|
||||
|
||||
const wrapperClass = classNames(className, `${prefixCls}-wrapper`);
|
||||
|
||||
const anchorClass = classNames(prefixCls, {
|
||||
'fixed': !affix && !showInkInFixed,
|
||||
});
|
||||
|
||||
const anchorContent = (
|
||||
<div className={wrapperClass} style={style}>
|
||||
<div className={anchorClass}>
|
||||
<div className={`${prefixCls}-ink`} >
|
||||
<span className={inkClass} ref={this.saveInkNode} />
|
||||
</div>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
return !affix ? anchorContent : (
|
||||
<Affix offsetTop={offsetTop}>
|
||||
{anchorContent}
|
||||
</Affix>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,65 +1,92 @@
|
||||
import * as React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import classNames from 'classnames';
|
||||
import AnchorHelper, { scrollTo } from './anchorHelper';
|
||||
|
||||
export interface AnchorLinkProps {
|
||||
prefixCls?: string;
|
||||
href: string;
|
||||
title: React.ReactNode;
|
||||
onClick: (href: string) => void;
|
||||
active?: boolean;
|
||||
prefixCls?: string;
|
||||
children?: any;
|
||||
title?: Element;
|
||||
bounds: number;
|
||||
target?: () => HTMLElement | Window;
|
||||
affix?: boolean;
|
||||
}
|
||||
|
||||
export default class AnchorLink extends React.Component<AnchorLinkProps, any> {
|
||||
static defaultProps = {
|
||||
prefixCls: 'ant-anchor',
|
||||
href: '#',
|
||||
static contextTypes = {
|
||||
anchorHelper: React.PropTypes.any,
|
||||
};
|
||||
|
||||
static contextTypes = {
|
||||
antAnchor: PropTypes.object,
|
||||
static childContextTypes = {
|
||||
anchorHelper: React.PropTypes.any,
|
||||
};
|
||||
|
||||
static defaultProps = {
|
||||
href: '#',
|
||||
prefixCls: 'ant-anchor',
|
||||
};
|
||||
|
||||
context: {
|
||||
antAnchor: any;
|
||||
anchorHelper: AnchorHelper;
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
this.context.antAnchor.registerLink(this.props.href);
|
||||
constructor(props, context) {
|
||||
super(props, context);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
this.context.antAnchor.unregisterLink(this.props.href);
|
||||
getChildContext() {
|
||||
return {
|
||||
anchorHelper: this.context.anchorHelper,
|
||||
};
|
||||
}
|
||||
|
||||
handleClick = () => {
|
||||
this.context.antAnchor.scrollTo(this.props.href);
|
||||
renderAnchorLink = (child) => {
|
||||
const { href } = child.props;
|
||||
if (href) {
|
||||
this.context.anchorHelper.addLink(href);
|
||||
return React.cloneElement(child, {
|
||||
onClick: this.context.anchorHelper.scrollTo,
|
||||
prefixCls: this.props.prefixCls,
|
||||
});
|
||||
}
|
||||
return child;
|
||||
}
|
||||
|
||||
scrollTo = (e) => {
|
||||
const { onClick, href } = this.props;
|
||||
const { anchorHelper } = this.context;
|
||||
e.preventDefault();
|
||||
if (onClick) {
|
||||
onClick(href);
|
||||
} else {
|
||||
e.stopPreventDefault();
|
||||
const scrollToFn = anchorHelper ? anchorHelper.scrollTo : scrollTo;
|
||||
scrollToFn(href);
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
prefixCls,
|
||||
href,
|
||||
title,
|
||||
children,
|
||||
} = this.props;
|
||||
const active = this.context.antAnchor.activeLink === href;
|
||||
const wrapperClassName = classNames(`${prefixCls}-link`, {
|
||||
const { prefixCls, href, children, title, bounds, affix } = this.props;
|
||||
const { anchorHelper } = this.context;
|
||||
const active = affix && anchorHelper && anchorHelper.getCurrentAnchor(bounds) === href;
|
||||
const cls = classNames({
|
||||
[`${prefixCls}-link`]: true,
|
||||
[`${prefixCls}-link-active`]: active,
|
||||
});
|
||||
const titleClassName = classNames(`${prefixCls}-link-title`, {
|
||||
[`${prefixCls}-link-title-active`]: active,
|
||||
});
|
||||
return (
|
||||
<div className={wrapperClassName}>
|
||||
<div className={cls}>
|
||||
<a
|
||||
className={titleClassName}
|
||||
ref={(component) => component && active && anchorHelper ? anchorHelper.setActiveAnchor(component) : null}
|
||||
className={`${prefixCls}-link-title`}
|
||||
onClick={this.scrollTo}
|
||||
href={href}
|
||||
title={typeof title === 'string' ? title : ''}
|
||||
onClick={this.handleClick}
|
||||
>
|
||||
{title}
|
||||
</a>
|
||||
{children}
|
||||
{React.Children.map(children, this.renderAnchorLink)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,20 +0,0 @@
|
||||
import React from 'react';
|
||||
import { mount } from 'enzyme';
|
||||
import Anchor from '..';
|
||||
|
||||
const { Link } = Anchor;
|
||||
|
||||
describe('Anchor Render', () => {
|
||||
it('Anchor render perfectly', () => {
|
||||
const wrapper = mount(
|
||||
<Anchor>
|
||||
<Link href="#API" title="API" />
|
||||
</Anchor>
|
||||
);
|
||||
|
||||
wrapper.find('a[href="#API"]').simulate('click');
|
||||
|
||||
wrapper.instance().handleScroll();
|
||||
expect(wrapper.instance().state).not.toBe(null);
|
||||
});
|
||||
});
|
||||
@@ -1,153 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders ./components/anchor/demo/basic.md correctly 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class=""
|
||||
>
|
||||
<div
|
||||
class="ant-anchor-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-anchor"
|
||||
>
|
||||
<div
|
||||
class="ant-anchor-ink"
|
||||
>
|
||||
<span
|
||||
class="ant-anchor-ink-ball"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-anchor-link"
|
||||
>
|
||||
<a
|
||||
class="ant-anchor-link-title"
|
||||
href="#components-anchor-demo-basic"
|
||||
title="Basic demo"
|
||||
>
|
||||
Basic demo
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
class="ant-anchor-link"
|
||||
>
|
||||
<a
|
||||
class="ant-anchor-link-title"
|
||||
href="#components-anchor-demo-fixed"
|
||||
title="Fixed demo"
|
||||
>
|
||||
Fixed demo
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
class="ant-anchor-link"
|
||||
>
|
||||
<a
|
||||
class="ant-anchor-link-title"
|
||||
href="#API"
|
||||
title="API"
|
||||
>
|
||||
API
|
||||
</a>
|
||||
<div
|
||||
class="ant-anchor-link"
|
||||
>
|
||||
<a
|
||||
class="ant-anchor-link-title"
|
||||
href="#Anchor-Props"
|
||||
title="Anchor Props"
|
||||
>
|
||||
Anchor Props
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
class="ant-anchor-link"
|
||||
>
|
||||
<a
|
||||
class="ant-anchor-link-title"
|
||||
href="#Link-Props"
|
||||
title="Link Props"
|
||||
>
|
||||
Link Props
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/anchor/demo/static.md correctly 1`] = `
|
||||
<div
|
||||
class="ant-anchor-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-anchor fixed"
|
||||
>
|
||||
<div
|
||||
class="ant-anchor-ink"
|
||||
>
|
||||
<span
|
||||
class="ant-anchor-ink-ball"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-anchor-link"
|
||||
>
|
||||
<a
|
||||
class="ant-anchor-link-title"
|
||||
href="#components-anchor-demo-basic"
|
||||
title="Basic demo"
|
||||
>
|
||||
Basic demo
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
class="ant-anchor-link"
|
||||
>
|
||||
<a
|
||||
class="ant-anchor-link-title"
|
||||
href="#components-anchor-demo-fixed"
|
||||
title="Fixed demo"
|
||||
>
|
||||
Fixed demo
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
class="ant-anchor-link"
|
||||
>
|
||||
<a
|
||||
class="ant-anchor-link-title"
|
||||
href="#API"
|
||||
title="API"
|
||||
>
|
||||
API
|
||||
</a>
|
||||
<div
|
||||
class="ant-anchor-link"
|
||||
>
|
||||
<a
|
||||
class="ant-anchor-link-title"
|
||||
href="#Anchor-Props"
|
||||
title="Anchor Props"
|
||||
>
|
||||
Anchor Props
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
class="ant-anchor-link"
|
||||
>
|
||||
<a
|
||||
class="ant-anchor-link-title"
|
||||
href="#Link-Props"
|
||||
title="Link Props"
|
||||
>
|
||||
Link Props
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@@ -1,3 +0,0 @@
|
||||
import demoTest from '../../../tests/shared/demoTest';
|
||||
|
||||
demoTest('anchor');
|
||||
107
components/anchor/anchorHelper.tsx
Normal file
107
components/anchor/anchorHelper.tsx
Normal file
@@ -0,0 +1,107 @@
|
||||
import getScroll from '../_util/getScroll';
|
||||
import getRequestAnimationFrame from '../_util/getRequestAnimationFrame';
|
||||
|
||||
export const reqAnimFrame = getRequestAnimationFrame();
|
||||
|
||||
export const easeInOutCubic = (t, b, c, d) => {
|
||||
const cc = c - b;
|
||||
t /= d / 2;
|
||||
if (t < 1) {
|
||||
return cc / 2 * t * t * t + b;
|
||||
}
|
||||
return cc / 2 * ((t -= 2) * t * t + 2) + b;
|
||||
};
|
||||
|
||||
export function getDefaultTarget() {
|
||||
return typeof window !== 'undefined' ?
|
||||
window : null;
|
||||
}
|
||||
|
||||
export function getOffsetTop(element): number {
|
||||
if (!element) {
|
||||
return 0;
|
||||
}
|
||||
|
||||
if (!element.getClientRects().length) {
|
||||
return 0;
|
||||
}
|
||||
|
||||
const rect = element.getBoundingClientRect();
|
||||
|
||||
if ( rect.width || rect.height ) {
|
||||
const doc = element.ownerDocument;
|
||||
const docElem = doc.documentElement;
|
||||
return rect.top - docElem.clientTop;
|
||||
}
|
||||
|
||||
return rect.top;
|
||||
}
|
||||
|
||||
export function scrollTo(href, target = getDefaultTarget) {
|
||||
const scrollTop = getScroll(target(), true);
|
||||
const targetElement = document.querySelector(href);
|
||||
if (!targetElement) {
|
||||
return;
|
||||
}
|
||||
const offsetTop = getOffsetTop(targetElement);
|
||||
const targetScrollTop = scrollTop + offsetTop;
|
||||
const startTime = Date.now();
|
||||
const frameFunc = () => {
|
||||
const timestamp = Date.now();
|
||||
const time = timestamp - startTime;
|
||||
window.scrollTo(window.pageXOffset, easeInOutCubic(time, scrollTop, targetScrollTop, 450));
|
||||
if (time < 450) {
|
||||
reqAnimFrame(frameFunc);
|
||||
}
|
||||
};
|
||||
reqAnimFrame(frameFunc);
|
||||
history.pushState(null, undefined, href);
|
||||
}
|
||||
|
||||
class AnchorHelper {
|
||||
private links: Array<string>;
|
||||
private currentAnchor: HTMLElement | null;
|
||||
private _activeAnchor: string;
|
||||
|
||||
constructor() {
|
||||
this.links = [];
|
||||
this.currentAnchor = null;
|
||||
this._activeAnchor = '';
|
||||
}
|
||||
|
||||
addLink(link) {
|
||||
if (this.links.indexOf(link) === -1) {
|
||||
this.links.push(link);
|
||||
}
|
||||
}
|
||||
|
||||
getCurrentActiveAnchor(): HTMLElement | null {
|
||||
return this.currentAnchor;
|
||||
}
|
||||
|
||||
setActiveAnchor(component) {
|
||||
this.currentAnchor = component;
|
||||
}
|
||||
|
||||
getCurrentAnchor(bounds = 5) {
|
||||
let activeAnchor = '';
|
||||
this.links.forEach(section => {
|
||||
const target = document.querySelector(section);
|
||||
if (target) {
|
||||
const top = getOffsetTop(target);
|
||||
const bottom = top + target.clientHeight;
|
||||
if ((top <= bounds) && (bottom >= -bounds)) {
|
||||
activeAnchor = section;
|
||||
}
|
||||
}
|
||||
});
|
||||
this._activeAnchor = activeAnchor || this._activeAnchor;
|
||||
return this._activeAnchor;
|
||||
}
|
||||
|
||||
scrollTo(href, target = getDefaultTarget) {
|
||||
scrollTo(href, target);
|
||||
}
|
||||
}
|
||||
|
||||
export default AnchorHelper;
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
order: 2
|
||||
title:
|
||||
zh-CN: 静态位置
|
||||
en-US: Static Anchor
|
||||
zh-CN: 固定
|
||||
en-US: Fixed Anchor
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
category: Components
|
||||
type: Other
|
||||
cols: 2
|
||||
cols: 1
|
||||
title: Anchor
|
||||
---
|
||||
|
||||
@@ -9,23 +9,21 @@ Hyperlinks to scroll on one page.
|
||||
|
||||
## When To Use
|
||||
|
||||
For displaying anchor hyperlinks on page and jumping between them.
|
||||
For displaying anchor hyperlinks on page, and jump between them.
|
||||
|
||||
## API
|
||||
|
||||
### Anchor Props
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| -------- | ----------- | ---- | ------- |
|
||||
| affix | Fixed mode of Anchor | boolean | false |
|
||||
| bounds | Bounding distance of anchor area | number | 5(px) |
|
||||
| offsetBottom | Pixels to offset from bottom when calculating position of scroll | number | - |
|
||||
| offsetTop | Pixels to offset from top when calculating position of scroll | number | 0 |
|
||||
| showInkInFixed | Whether show ink-balls in Fixed mode | boolean | false |
|
||||
| Property | Description | Type | Default |
|
||||
|--------------|-----------------------|----------|--------------|
|
||||
| offsetTop | Pixels to offset from top when calculating position of scroll | Number | 0 |
|
||||
| offsetBottom | Pixels to offset from bottom when calculating position of scroll | Number | - |
|
||||
| bounds | Bounding distance of anchor area | Number | 5(px) |
|
||||
|
||||
### Link Props
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| -------- | ----------- | ---- | ------- |
|
||||
| href | target of hyperlink | string | |
|
||||
| title | content of hyperlink | string\|ReactNode | |
|
||||
| Property | Description | Type | Default |
|
||||
|-------------|----------------|--------------------|--------------|
|
||||
| href | target of hyperlink | String | |
|
||||
| title | content of hyperlink | React.Node | |
|
||||
|
||||
@@ -1,8 +1,130 @@
|
||||
import Anchor from './Anchor';
|
||||
import React from 'react';
|
||||
import classNames from 'classnames';
|
||||
import addEventListener from 'rc-util/lib/Dom/addEventListener';
|
||||
import AnchorLink from './AnchorLink';
|
||||
import Affix from '../affix';
|
||||
import AnchorHelper, { getDefaultTarget } from './anchorHelper';
|
||||
|
||||
export { AnchorProps } from './Anchor';
|
||||
export { AnchorLinkProps } from './AnchorLink';
|
||||
export interface AnchorProps {
|
||||
target: () => HTMLElement | Window;
|
||||
children: React.ReactNode;
|
||||
prefixCls?: string;
|
||||
offsetTop?: number;
|
||||
bounds?: number;
|
||||
className?: string;
|
||||
style?: React.CSSProperties;
|
||||
affix?: boolean;
|
||||
}
|
||||
|
||||
Anchor.Link = AnchorLink;
|
||||
export default Anchor;
|
||||
export default class Anchor extends React.Component<AnchorProps, any> {
|
||||
static Link = AnchorLink;
|
||||
|
||||
static defaultProps = {
|
||||
prefixCls: 'ant-anchor',
|
||||
affix: true,
|
||||
};
|
||||
|
||||
static childContextTypes = {
|
||||
anchorHelper: React.PropTypes.any,
|
||||
};
|
||||
|
||||
refs: {
|
||||
ink?: any;
|
||||
};
|
||||
|
||||
private scrollEvent: any;
|
||||
private anchorHelper: AnchorHelper;
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
activeAnchor: null,
|
||||
};
|
||||
this.anchorHelper = new AnchorHelper();
|
||||
}
|
||||
|
||||
handleScroll = () => {
|
||||
this.setState({
|
||||
activeAnchor: this.anchorHelper.getCurrentAnchor(this.props.bounds),
|
||||
});
|
||||
}
|
||||
|
||||
getChildContext() {
|
||||
return {
|
||||
anchorHelper: this.anchorHelper,
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.handleScroll();
|
||||
this.updateInk();
|
||||
this.scrollEvent = addEventListener((this.props.target || getDefaultTarget)(), 'scroll', this.handleScroll);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
if (this.scrollEvent) {
|
||||
this.scrollEvent.remove();
|
||||
}
|
||||
}
|
||||
|
||||
componentDidUpdate() {
|
||||
this.updateInk();
|
||||
}
|
||||
|
||||
updateInk = () => {
|
||||
const activeAnchor = this.anchorHelper.getCurrentActiveAnchor();
|
||||
if (activeAnchor) {
|
||||
this.refs.ink.style.top = `${activeAnchor.offsetTop + activeAnchor.clientHeight / 2 - 4.5}px`;
|
||||
}
|
||||
}
|
||||
|
||||
renderAnchorLink = (child) => {
|
||||
const { href } = child.props;
|
||||
if (href) {
|
||||
this.anchorHelper.addLink(href);
|
||||
return React.cloneElement(child, {
|
||||
onClick: this.anchorHelper.scrollTo,
|
||||
prefixCls: this.props.prefixCls,
|
||||
bounds: this.props.bounds,
|
||||
affix: this.props.affix,
|
||||
});
|
||||
}
|
||||
return child;
|
||||
}
|
||||
|
||||
render() {
|
||||
const { prefixCls, offsetTop, style, className = '', affix } = this.props;
|
||||
const { activeAnchor } = this.state;
|
||||
const inkClass = classNames({
|
||||
[`${prefixCls}-ink-ball`]: true,
|
||||
visible: !!activeAnchor,
|
||||
});
|
||||
|
||||
const wrapperClass = classNames({
|
||||
[`${prefixCls}-wrapper`]: true,
|
||||
[className]: !!className,
|
||||
});
|
||||
|
||||
const anchorClass = classNames({
|
||||
[`${prefixCls}`]: true,
|
||||
'fixed': !affix,
|
||||
});
|
||||
|
||||
const anchorContent = (
|
||||
<div className={wrapperClass} style={style}>
|
||||
<div className={anchorClass}>
|
||||
<div className={`${prefixCls}-ink`} >
|
||||
<span className={inkClass} ref="ink" />
|
||||
</div>
|
||||
{React.Children.map(this.props.children, this.renderAnchorLink)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
return affix === false ? anchorContent : (
|
||||
<Affix offsetTop={offsetTop}>
|
||||
{anchorContent}
|
||||
</Affix>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
category: Components
|
||||
subtitle: 锚点
|
||||
cols: 2
|
||||
cols: 1
|
||||
type: Other
|
||||
title: Anchor
|
||||
---
|
||||
@@ -16,17 +16,15 @@ title: Anchor
|
||||
|
||||
### Anchor Props
|
||||
|
||||
| 成员 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| affix | 固定模式 | boolean | false |
|
||||
| bounds | 锚点区域边界 | number | 5(px) |
|
||||
| offsetBottom | 距离窗口底部达到指定偏移量后触发 | number | |
|
||||
| offsetTop | 距离窗口顶部达到指定偏移量后触发 | number | |
|
||||
| showInkInFixed | 固定模式是否显示小圆点 | boolean | false |
|
||||
| 成员 | 说明 | 类型 | 默认值 |
|
||||
|-------------|----------------|--------------------|--------------|
|
||||
| offsetTop | 距离窗口顶部达到指定偏移量后触发 | Number | |
|
||||
| offsetBottom | 距离窗口底部达到指定偏移量后触发 | Number | |
|
||||
| bounds | 锚点区域边界 | Number | 5(px) |
|
||||
|
||||
### Link Props
|
||||
|
||||
| 成员 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| href | 锚点链接 | string | |
|
||||
| title | 文字内容 | string\|ReactNode | |
|
||||
| 成员 | 说明 | 类型 | 默认值 |
|
||||
|-------------|----------------|--------------------|--------------|
|
||||
| href | 锚点链接 | String | |
|
||||
| title | 文字内容 | React.Node | |
|
||||
|
||||
@@ -1,53 +1,52 @@
|
||||
@import "../../style/themes/default";
|
||||
@import "../../style/mixins/index";
|
||||
|
||||
@anchor-border-width: 2px;
|
||||
|
||||
.@{ant-prefix}-anchor {
|
||||
.reset-component;
|
||||
position: relative;
|
||||
padding-left: @anchor-border-width;
|
||||
&-wrapper {
|
||||
background-color: @component-background;
|
||||
}
|
||||
|
||||
&-ink {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
&:before {
|
||||
content: ' ';
|
||||
position: relative;
|
||||
width: @anchor-border-width;
|
||||
height: 100%;
|
||||
display: block;
|
||||
background-color: @border-color-split;
|
||||
margin: 0 auto;
|
||||
.@{ant-prefix} {
|
||||
&-anchor {
|
||||
position: relative;
|
||||
&-wrapper {
|
||||
padding: 6px;
|
||||
background-color: white;
|
||||
}
|
||||
&-ball {
|
||||
display: none;
|
||||
|
||||
&-ink {
|
||||
position: absolute;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 8px;
|
||||
border: 2px solid @primary-color;
|
||||
background-color: @component-background;
|
||||
left: 50%;
|
||||
transition: top .3s ease-in-out;
|
||||
transform: translateX(-50%);
|
||||
&.visible {
|
||||
display: inline-block;
|
||||
width: 9px;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
&:before {
|
||||
content: ' ';
|
||||
position: relative;
|
||||
width: 2px;
|
||||
height: 100%;
|
||||
display: block;
|
||||
background-color: @border-color-split;
|
||||
margin: 0 auto;
|
||||
}
|
||||
&-ball {
|
||||
display: none;
|
||||
position: absolute;
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
border-radius: 9px;
|
||||
border: 3px solid @primary-color;
|
||||
background-color: white;
|
||||
transition: top .3s ease-in-out;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
&.visible {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.fixed &-ink &-ink-ball {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.fixed &-ink &-ink-ball {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&-link {
|
||||
padding: 8px 0 8px 16px;
|
||||
&-anchor-link {
|
||||
padding: 4px 0 4px 16px;
|
||||
line-height: 1;
|
||||
|
||||
&-title {
|
||||
@@ -58,20 +57,14 @@
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin-bottom: 8px;
|
||||
|
||||
&:only-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-active > &-title {
|
||||
color: @primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
&-link &-link {
|
||||
padding-top: 6px;
|
||||
padding-bottom: 6px;
|
||||
& > & {
|
||||
font-size: @font-size-base;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,30 +0,0 @@
|
||||
import * as React from 'react';
|
||||
import * as ReactDOM from 'react-dom';
|
||||
|
||||
export interface InputElementProps {
|
||||
children: React.ReactElement<any>;
|
||||
}
|
||||
|
||||
export default class InputElement extends React.Component<InputElementProps, any> {
|
||||
private ele: HTMLInputElement;
|
||||
|
||||
focus = () => {
|
||||
this.ele.focus ? this.ele.focus() : (ReactDOM.findDOMNode(this.ele) as HTMLInputElement).focus();
|
||||
}
|
||||
blur = () => {
|
||||
this.ele.blur ? this.ele.blur() : (ReactDOM.findDOMNode(this.ele) as HTMLInputElement).blur();
|
||||
}
|
||||
saveRef = (ele: HTMLInputElement) => {
|
||||
this.ele = ele;
|
||||
const { ref: childRef } = this.props.children as any;
|
||||
if (typeof childRef === 'function') {
|
||||
childRef(ele);
|
||||
}
|
||||
}
|
||||
render() {
|
||||
return React.cloneElement(this.props.children, {
|
||||
...this.props,
|
||||
ref: this.saveRef,
|
||||
}, null);
|
||||
}
|
||||
}
|
||||
@@ -1,361 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders ./components/auto-complete/demo/basic.md correctly 1`] = `
|
||||
<div
|
||||
class="ant-select-show-search ant-select-auto-complete ant-select ant-select-combobox ant-select-enabled"
|
||||
style="width:200px"
|
||||
>
|
||||
<div
|
||||
aria-autocomplete="list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
class="ant-select-selection
|
||||
ant-select-selection--single"
|
||||
role="combobox"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selection__rendered"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selection__placeholder"
|
||||
style="display:block;user-select:none;-webkit-user-select:none"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
input here
|
||||
</div>
|
||||
<ul>
|
||||
<li
|
||||
class="ant-select-search ant-select-search--inline"
|
||||
>
|
||||
<div
|
||||
class="ant-select-search__field__wrap"
|
||||
>
|
||||
<input
|
||||
class="ant-input ant-select-search__field"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
class="ant-select-search__field__mirror"
|
||||
>
|
||||
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<span
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
<b />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/auto-complete/demo/certain-category.md correctly 1`] = `
|
||||
<div
|
||||
class="certain-category-search-wrapper"
|
||||
style="width:250px"
|
||||
>
|
||||
<div
|
||||
class="ant-select-lg ant-select-lg certain-category-search ant-select-show-search ant-select-auto-complete ant-select ant-select-combobox ant-select-enabled"
|
||||
style="width:100%"
|
||||
>
|
||||
<div
|
||||
aria-autocomplete="list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
class="ant-select-selection
|
||||
ant-select-selection--single"
|
||||
role="combobox"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selection__rendered"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selection__placeholder"
|
||||
style="display:block;user-select:none;-webkit-user-select:none"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
input here
|
||||
</div>
|
||||
<ul>
|
||||
<li
|
||||
class="ant-select-search ant-select-search--inline"
|
||||
>
|
||||
<div
|
||||
class="ant-select-search__field__wrap"
|
||||
>
|
||||
<span
|
||||
class="ant-select-search__field ant-input-affix-wrapper"
|
||||
>
|
||||
<input
|
||||
class="ant-input"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
class="ant-input-suffix"
|
||||
>
|
||||
<i
|
||||
class="anticon anticon-search certain-category-icon"
|
||||
/>
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-search__field__mirror"
|
||||
>
|
||||
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<span
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
<b />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/auto-complete/demo/custom.md correctly 1`] = `
|
||||
<div
|
||||
class="ant-select-show-search ant-select-auto-complete ant-select ant-select-combobox ant-select-enabled"
|
||||
style="width:200px"
|
||||
>
|
||||
<div
|
||||
aria-autocomplete="list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
class="ant-select-selection
|
||||
ant-select-selection--single"
|
||||
role="combobox"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selection__rendered"
|
||||
>
|
||||
<ul>
|
||||
<li
|
||||
class="ant-select-search ant-select-search--inline"
|
||||
>
|
||||
<div
|
||||
class="ant-select-search__field__wrap"
|
||||
>
|
||||
<textarea
|
||||
class="ant-input custom ant-select-search__field"
|
||||
placeholder="input here"
|
||||
style="height:50px"
|
||||
/>
|
||||
<span
|
||||
class="ant-select-search__field__mirror"
|
||||
>
|
||||
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<span
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
<b />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/auto-complete/demo/non-case-sensitive.md correctly 1`] = `
|
||||
<div
|
||||
class="ant-select-show-search ant-select-auto-complete ant-select ant-select-combobox ant-select-enabled"
|
||||
style="width:200px"
|
||||
>
|
||||
<div
|
||||
aria-autocomplete="list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
class="ant-select-selection
|
||||
ant-select-selection--single"
|
||||
role="combobox"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selection__rendered"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selection__placeholder"
|
||||
style="display:block;user-select:none;-webkit-user-select:none"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
try to type \`b\`
|
||||
</div>
|
||||
<ul>
|
||||
<li
|
||||
class="ant-select-search ant-select-search--inline"
|
||||
>
|
||||
<div
|
||||
class="ant-select-search__field__wrap"
|
||||
>
|
||||
<input
|
||||
class="ant-input ant-select-search__field"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
class="ant-select-search__field__mirror"
|
||||
>
|
||||
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<span
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
<b />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/auto-complete/demo/options.md correctly 1`] = `
|
||||
<div
|
||||
class="ant-select-show-search ant-select-auto-complete ant-select ant-select-combobox ant-select-enabled"
|
||||
style="width:200px"
|
||||
>
|
||||
<div
|
||||
aria-autocomplete="list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
class="ant-select-selection
|
||||
ant-select-selection--single"
|
||||
role="combobox"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selection__rendered"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selection__placeholder"
|
||||
style="display:block;user-select:none;-webkit-user-select:none"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
input here
|
||||
</div>
|
||||
<ul>
|
||||
<li
|
||||
class="ant-select-search ant-select-search--inline"
|
||||
>
|
||||
<div
|
||||
class="ant-select-search__field__wrap"
|
||||
>
|
||||
<input
|
||||
class="ant-input ant-select-search__field"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
class="ant-select-search__field__mirror"
|
||||
>
|
||||
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<span
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
<b />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/auto-complete/demo/uncertain-category.md correctly 1`] = `
|
||||
<div
|
||||
class="global-search-wrapper"
|
||||
style="width:300px"
|
||||
>
|
||||
<div
|
||||
class="ant-select-lg ant-select-lg global-search ant-select-show-search ant-select-auto-complete ant-select ant-select-combobox ant-select-enabled"
|
||||
style="width:100%"
|
||||
>
|
||||
<div
|
||||
aria-autocomplete="list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
class="ant-select-selection
|
||||
ant-select-selection--single"
|
||||
role="combobox"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selection__rendered"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selection__placeholder"
|
||||
style="display:block;user-select:none;-webkit-user-select:none"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
input here
|
||||
</div>
|
||||
<ul>
|
||||
<li
|
||||
class="ant-select-search ant-select-search--inline"
|
||||
>
|
||||
<div
|
||||
class="ant-select-search__field__wrap"
|
||||
>
|
||||
<span
|
||||
class="ant-select-search__field ant-input-affix-wrapper"
|
||||
>
|
||||
<input
|
||||
class="ant-input"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
class="ant-input-suffix"
|
||||
>
|
||||
<button
|
||||
class="ant-btn search-btn ant-btn-primary ant-btn-lg"
|
||||
type="button"
|
||||
>
|
||||
<i
|
||||
class="anticon anticon-search"
|
||||
/>
|
||||
</button>
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-search__field__mirror"
|
||||
>
|
||||
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<span
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
<b />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@@ -1,3 +0,0 @@
|
||||
import demoTest from '../../../tests/shared/demoTest';
|
||||
|
||||
demoTest('auto-complete');
|
||||
@@ -1,33 +0,0 @@
|
||||
import React from 'react';
|
||||
import { mount } from 'enzyme';
|
||||
import AutoComplete from '..';
|
||||
import focusTest from '../../../tests/shared/focusTest';
|
||||
|
||||
describe('AutoComplete with Custom Input Element Render', () => {
|
||||
focusTest(AutoComplete);
|
||||
|
||||
it('AutoComplete with custom Input render perfectly', () => {
|
||||
const wrapper = mount(
|
||||
<AutoComplete dataSource={['12345', '23456', '34567']}>
|
||||
<textarea />
|
||||
</AutoComplete>
|
||||
);
|
||||
|
||||
expect(wrapper.find('textarea').length).toBe(1);
|
||||
wrapper.find('textarea').simulate('change', { target: { value: '123' } });
|
||||
const dropdownWrapper = mount(wrapper.find('Trigger').instance().getComponent());
|
||||
|
||||
// should not filter data source defaultly
|
||||
expect(dropdownWrapper.find('MenuItem').length).toBe(3);
|
||||
});
|
||||
|
||||
it('child.ref should work', () => {
|
||||
const mockRef = jest.fn();
|
||||
mount(
|
||||
<AutoComplete dataSource={[]}>
|
||||
<input ref={mockRef} />
|
||||
</AutoComplete>
|
||||
);
|
||||
expect(mockRef).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
@@ -20,12 +20,13 @@ function onSelect(value) {
|
||||
console.log('onSelect', value);
|
||||
}
|
||||
|
||||
class Complete extends React.Component {
|
||||
state = {
|
||||
dataSource: [],
|
||||
}
|
||||
|
||||
handleSearch = (value) => {
|
||||
const Complete = React.createClass({
|
||||
getInitialState() {
|
||||
return {
|
||||
dataSource: [],
|
||||
};
|
||||
},
|
||||
handleChange(value) {
|
||||
this.setState({
|
||||
dataSource: !value ? [] : [
|
||||
value,
|
||||
@@ -33,8 +34,7 @@ class Complete extends React.Component {
|
||||
value + value + value,
|
||||
],
|
||||
});
|
||||
}
|
||||
|
||||
},
|
||||
render() {
|
||||
const { dataSource } = this.state;
|
||||
return (
|
||||
@@ -42,12 +42,11 @@ class Complete extends React.Component {
|
||||
dataSource={dataSource}
|
||||
style={{ width: 200 }}
|
||||
onSelect={onSelect}
|
||||
onSearch={this.handleSearch}
|
||||
placeholder="input here"
|
||||
onChange={this.handleChange}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
ReactDOM.render(<Complete />, mountNode);
|
||||
````
|
||||
|
||||
@@ -1,152 +0,0 @@
|
||||
---
|
||||
order: 4
|
||||
title:
|
||||
zh-CN: 查询模式 - 确定类目
|
||||
en-US: Lookup-Patterns - Certain Category
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
[查询模式: 确定类目](https://ant.design/docs/spec/reaction#Lookup-Patterns) 示例。
|
||||
|
||||
## en-US
|
||||
|
||||
Demonstration of [Lookup Patterns: Certain Category](https://ant.design/docs/spec/reaction#Lookup-Patterns).
|
||||
Basic Usage, set datasource of autocomplete with `dataSource` property.
|
||||
|
||||
````jsx
|
||||
import { Icon, Input, AutoComplete } from 'antd';
|
||||
const Option = AutoComplete.Option;
|
||||
const OptGroup = AutoComplete.OptGroup;
|
||||
|
||||
const dataSource = [{
|
||||
title: '话题',
|
||||
children: [{
|
||||
title: 'AntDesign',
|
||||
count: 10000,
|
||||
}, {
|
||||
title: 'AntDesign UI',
|
||||
count: 10600,
|
||||
}],
|
||||
}, {
|
||||
title: '问题',
|
||||
children: [{
|
||||
title: 'AntDesign UI 有多好',
|
||||
count: 60100,
|
||||
}, {
|
||||
title: 'AntDesign 是啥',
|
||||
count: 30010,
|
||||
}],
|
||||
}, {
|
||||
title: '文章',
|
||||
children: [{
|
||||
title: 'AntDesign 是一个设计语言',
|
||||
count: 100000,
|
||||
}],
|
||||
}];
|
||||
|
||||
function renderTitle(title) {
|
||||
return (
|
||||
<span>
|
||||
{title}
|
||||
<a
|
||||
style={{ float: 'right' }}
|
||||
href="https://www.google.com/search?q=antd"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>更多
|
||||
</a>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
const options = dataSource.map(group => (
|
||||
<OptGroup
|
||||
key={group.title}
|
||||
label={renderTitle(group.title)}
|
||||
>
|
||||
{group.children.map(opt => (
|
||||
<Option key={opt.title} value={opt.title}>
|
||||
{opt.title}
|
||||
<span className="certain-search-item-count">{opt.count} 人 关注</span>
|
||||
</Option>
|
||||
))}
|
||||
</OptGroup>
|
||||
)).concat([
|
||||
<Option disabled key="all" className="show-all">
|
||||
<a
|
||||
href="https://www.google.com/search?q=antd"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
查看所有结果
|
||||
</a>
|
||||
</Option>,
|
||||
]);
|
||||
|
||||
function Complete() {
|
||||
return (
|
||||
<div className="certain-category-search-wrapper" style={{ width: 250 }}>
|
||||
<AutoComplete
|
||||
className="certain-category-search"
|
||||
dropdownClassName="certain-category-search-dropdown"
|
||||
dropdownMatchSelectWidth={false}
|
||||
dropdownStyle={{ width: 300 }}
|
||||
size="large"
|
||||
style={{ width: '100%' }}
|
||||
dataSource={options}
|
||||
placeholder="input here"
|
||||
optionLabelProp="value"
|
||||
>
|
||||
<Input suffix={<Icon type="search" className="certain-category-icon" />} />
|
||||
</AutoComplete>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
ReactDOM.render(<Complete />, mountNode);
|
||||
````
|
||||
|
||||
````css
|
||||
.certain-category-search.ant-select-auto-complete .ant-input-affix-wrapper .ant-input-suffix {
|
||||
right: 12px;
|
||||
}
|
||||
|
||||
.certain-category-search-dropdown .ant-select-dropdown-menu-item-group-title {
|
||||
color: #666;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.certain-category-search-dropdown .ant-select-dropdown-menu-item-group {
|
||||
border-bottom: 1px solid #F6F6F6;
|
||||
}
|
||||
|
||||
.certain-category-search-dropdown .ant-select-dropdown-menu-item {
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
.certain-category-search-dropdown .ant-select-dropdown-menu-item.show-all {
|
||||
text-align: center;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.certain-category-search-dropdown .ant-select-dropdown-menu {
|
||||
max-height: 300px;
|
||||
}
|
||||
|
||||
.certain-search-item-count {
|
||||
position: absolute;
|
||||
color: #999;
|
||||
right: 16px;
|
||||
}
|
||||
|
||||
.certain-category-search.ant-select-focused .certain-category-icon {
|
||||
color: #108ee9;
|
||||
}
|
||||
|
||||
.certain-category-icon {
|
||||
color: #6E6E6E;
|
||||
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
font-size: 16px;
|
||||
}
|
||||
````
|
||||
@@ -1,64 +0,0 @@
|
||||
---
|
||||
order: 3
|
||||
title:
|
||||
zh-CN: 自定义输入组件
|
||||
en-US: Customize Input Component
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
自定义输入组件。
|
||||
|
||||
## en-US
|
||||
|
||||
Customize Input Component
|
||||
|
||||
````jsx
|
||||
import { AutoComplete, Input } from 'antd';
|
||||
const { TextArea } = Input;
|
||||
|
||||
function onSelect(value) {
|
||||
console.log('onSelect', value);
|
||||
}
|
||||
|
||||
class Complete extends React.Component {
|
||||
state = {
|
||||
dataSource: [],
|
||||
}
|
||||
|
||||
handleSearch = (value) => {
|
||||
this.setState({
|
||||
dataSource: !value ? [] : [
|
||||
value,
|
||||
value + value,
|
||||
value + value + value,
|
||||
],
|
||||
});
|
||||
}
|
||||
|
||||
handleKeyPress = (ev) => {
|
||||
console.log('handleKeyPress', ev);
|
||||
}
|
||||
|
||||
render() {
|
||||
const { dataSource } = this.state;
|
||||
return (
|
||||
<AutoComplete
|
||||
dataSource={dataSource}
|
||||
style={{ width: 200 }}
|
||||
onSelect={onSelect}
|
||||
onSearch={this.handleSearch}
|
||||
>
|
||||
<TextArea
|
||||
placeholder="input here"
|
||||
className="custom"
|
||||
style={{ height: 50 }}
|
||||
onKeyPress={this.handleKeyPress}
|
||||
/>
|
||||
</AutoComplete>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
ReactDOM.render(<Complete />, mountNode);
|
||||
````
|
||||
@@ -1,33 +0,0 @@
|
||||
---
|
||||
order: 3
|
||||
title:
|
||||
zh-CN: 不区分大小写
|
||||
en-US: Non-case-sensitive AutoComplete
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
不区分大小写的 AutoComplete
|
||||
|
||||
## en-US
|
||||
|
||||
A non-case-sensitive AutoComplete
|
||||
|
||||
````jsx
|
||||
import { AutoComplete } from 'antd';
|
||||
|
||||
const dataSource = ['Burns Bay Road', 'Downing Street', 'Wall Street'];
|
||||
|
||||
function Complete() {
|
||||
return (
|
||||
<AutoComplete
|
||||
style={{ width: 200 }}
|
||||
dataSource={dataSource}
|
||||
placeholder="try to type `b`"
|
||||
filterOption={(inputValue, option) => option.props.children.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
ReactDOM.render(<Complete />, mountNode);
|
||||
````
|
||||
@@ -18,12 +18,13 @@ import { AutoComplete } from 'antd';
|
||||
|
||||
const Option = AutoComplete.Option;
|
||||
|
||||
class Complete extends React.Component {
|
||||
state = {
|
||||
result: [],
|
||||
}
|
||||
|
||||
handleSearch = (value) => {
|
||||
const Complete = React.createClass({
|
||||
getInitialState() {
|
||||
return {
|
||||
result: [],
|
||||
};
|
||||
},
|
||||
handleChange(value) {
|
||||
let result;
|
||||
if (!value || value.indexOf('@') >= 0) {
|
||||
result = [];
|
||||
@@ -31,8 +32,7 @@ class Complete extends React.Component {
|
||||
result = ['gmail.com', '163.com', 'qq.com'].map(domain => `${value}@${domain}`);
|
||||
}
|
||||
this.setState({ result });
|
||||
}
|
||||
|
||||
},
|
||||
render() {
|
||||
const { result } = this.state;
|
||||
const children = result.map((email) => {
|
||||
@@ -41,14 +41,13 @@ class Complete extends React.Component {
|
||||
return (
|
||||
<AutoComplete
|
||||
style={{ width: 200 }}
|
||||
onSearch={this.handleSearch}
|
||||
placeholder="input here"
|
||||
onChange={this.handleChange}
|
||||
>
|
||||
{children}
|
||||
</AutoComplete>
|
||||
);
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
ReactDOM.render(<Complete />, mountNode);
|
||||
````
|
||||
|
||||
@@ -1,126 +0,0 @@
|
||||
---
|
||||
order: 5
|
||||
title:
|
||||
zh-CN: 查询模式 - 不确定类目
|
||||
en-US: Lookup-Patterns - Uncertain Category
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
[查询模式: 不确定类目](https://ant.design/docs/spec/reaction#Lookup-Patterns) 示例。
|
||||
|
||||
## en-US
|
||||
|
||||
Demonstration of [Lookup Patterns: Uncertain Category](https://ant.design/docs/spec/reaction#Lookup-Patterns).
|
||||
Basic Usage, set datasource of autocomplete with `dataSource` property.
|
||||
|
||||
````jsx
|
||||
import { Icon, Button, Input, AutoComplete } from 'antd';
|
||||
const Option = AutoComplete.Option;
|
||||
|
||||
function onSelect(value) {
|
||||
console.log('onSelect', value);
|
||||
}
|
||||
|
||||
function getRandomInt(max, min = 0) {
|
||||
return Math.floor(Math.random() * (max - min + 1)) + min; // eslint-disable-line no-mixed-operators
|
||||
}
|
||||
|
||||
function searchResult(query) {
|
||||
return (new Array(getRandomInt(5))).join('.').split('.')
|
||||
.map((item, idx) => ({
|
||||
query,
|
||||
category: `${query}${idx}`,
|
||||
count: getRandomInt(200, 100),
|
||||
}));
|
||||
}
|
||||
|
||||
function renderOption(item) {
|
||||
return (
|
||||
<Option key={item.category} text={item.category}>
|
||||
{item.query} 在
|
||||
<a
|
||||
href={`https://s.taobao.com/search?q=${item.query}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
{item.category}
|
||||
</a>
|
||||
区块中
|
||||
<span className="global-search-item-count">约 {item.count} 个结果</span>
|
||||
</Option>
|
||||
);
|
||||
}
|
||||
|
||||
class Complete extends React.Component {
|
||||
state = {
|
||||
dataSource: [],
|
||||
}
|
||||
|
||||
handleSearch = (value) => {
|
||||
this.setState({
|
||||
dataSource: value ? searchResult(value) : [],
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
const { dataSource } = this.state;
|
||||
return (
|
||||
<div className="global-search-wrapper" style={{ width: 300 }}>
|
||||
<AutoComplete
|
||||
className="global-search"
|
||||
size="large"
|
||||
style={{ width: '100%' }}
|
||||
dataSource={dataSource.map(renderOption)}
|
||||
onSelect={onSelect}
|
||||
onSearch={this.handleSearch}
|
||||
placeholder="input here"
|
||||
optionLabelProp="text"
|
||||
>
|
||||
<Input
|
||||
suffix={(
|
||||
<Button className="search-btn" size="large" type="primary">
|
||||
<Icon type="search" />
|
||||
</Button>
|
||||
)}
|
||||
/>
|
||||
</AutoComplete>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
ReactDOM.render(<Complete />, mountNode);
|
||||
````
|
||||
|
||||
````css
|
||||
.global-search-wrapper {
|
||||
padding-right: 50px;
|
||||
}
|
||||
|
||||
.global-search {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.global-search.ant-select-auto-complete .ant-select-selection--single {
|
||||
margin-right: -46px;
|
||||
}
|
||||
|
||||
.global-search.ant-select-auto-complete .ant-input-affix-wrapper .ant-input:not(:last-child) {
|
||||
padding-right: 62px;
|
||||
}
|
||||
|
||||
.global-search.ant-select-auto-complete .ant-input-affix-wrapper .ant-input-suffix {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.global-search.ant-select-auto-complete .ant-input-affix-wrapper .ant-input-suffix button {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
.global-search-item-count {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
}
|
||||
````
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
category: Components
|
||||
type: Data Entry
|
||||
cols: 2
|
||||
cols: 1
|
||||
title: AutoComplete
|
||||
---
|
||||
|
||||
@@ -9,7 +9,7 @@ Autocomplete function of input field.
|
||||
|
||||
## When To Use
|
||||
|
||||
When there is a need for autocomplete functionality.
|
||||
When need to use autocomplete function.
|
||||
|
||||
## API
|
||||
|
||||
@@ -17,29 +17,14 @@ When there is a need for autocomplete functionality.
|
||||
const dataSource = ['12345', '23456', '34567'];
|
||||
<AutoComplete dataSource={dataSource} />
|
||||
```
|
||||
Since `AutoComplete` is based on `Select`, so besides following API, `AutoComplete` has same API as `Select`.
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| -------- | ----------- | ---- | ------- |
|
||||
| allowClear | Show clear button, effective in multiple mode only. | boolean | false |
|
||||
| autoFocus | get focus when component mounted | boolean | false |
|
||||
| backfill | backfill selected item the input when using keyboard | boolean | false |
|
||||
| children (for customize input element) | customize input element | HTMLInputElement / HTMLTextAreaElement / React.ReactElement<InputProps> | `<Input />` |
|
||||
| children (for dataSource) | Data source for autocomplet | React.ReactElement<OptionProps> / Array<React.ReactElement<OptionProps>> | - |
|
||||
| dataSource | Data source for autocomplete | [DataSourceItemType](https://git.io/vMMKF)\[] | |
|
||||
| defaultActiveFirstOption | Whether active first option by default | boolean | true |
|
||||
| defaultValue | Initial selected option. | string\|string\[]\|{ key: string, label: string\|ReactNode }\|Array<{ key: string, label: string\|ReactNode }> | - |
|
||||
| disabled | Whether disabled select | boolean | false |
|
||||
| filterOption | If true, filter options by input, if function, filter options against it. The function will receive two arguments, `inputValue` and `option`, if the function returns `true`, the option will be included in the filtered set; Otherwise, it will be excluded. | boolean or function(inputValue, option) | true |
|
||||
| optionLabelProp | Which prop value of option will render as content of select. | string | `children` |
|
||||
| placeholder | placeholder of input | string | - |
|
||||
| value | selected option | string\|string\[]\|{ key: string, label: string\|ReactNode }\|Array<{ key: string, label: string\|ReactNode }> | - |
|
||||
| Property | Description | Type | Default |
|
||||
|----------------|----------------------------------|------------|--------|
|
||||
| dataSource | Data source for autocomplete | Array | |
|
||||
| value | selected option | String/Array<String>/{key: String, label: React.Node}/Array<{key, label}> | - |
|
||||
| defaultValue | Initial selected option. | string/Array<String> | - |
|
||||
| allowClear | Show clear button, effective in multiple mode only. | boolean | false |
|
||||
| onChange | Called when select an option or input value change, or value of input is changed | function(value, label) | - |
|
||||
| onSearch | Called when searching items. | function(value) | - |
|
||||
| onSelect | Called when a option is selected. param is option's value and option instance. | function(value, option) | - |
|
||||
|
||||
## Methods
|
||||
|
||||
| Name | Description |
|
||||
| ---- | ----------- |
|
||||
| focus() | get focus |
|
||||
| blur() | remove focus |
|
||||
| onSelect | Called when a option is selected. param is option's value and option instance. | function(value, option) | - |
|
||||
| disabled | Whether disabled select | boolean | false |
|
||||
|
||||
@@ -1,40 +1,34 @@
|
||||
import * as React from 'react';
|
||||
import React from 'react';
|
||||
import Select, { OptionProps, OptGroupProps } from '../select';
|
||||
import { Option, OptGroup } from 'rc-select';
|
||||
import classNames from 'classnames';
|
||||
import Select, { AbstractSelectProps, SelectValue, OptionProps, OptGroupProps } from '../select';
|
||||
import Input from '../input';
|
||||
import InputElement from './InputElement';
|
||||
|
||||
export interface DataSourceItemObject { value: string; text: string; }
|
||||
export interface SelectedValue {
|
||||
key: string;
|
||||
label: React.ReactNode;
|
||||
}
|
||||
|
||||
export interface DataSourceItemObject { value: string; text: string; };
|
||||
export type DataSourceItemType = string | DataSourceItemObject;
|
||||
|
||||
export interface InputProps {
|
||||
onChange?: React.FormEventHandler<any>;
|
||||
value: any;
|
||||
}
|
||||
|
||||
export type ValidInputElement =
|
||||
HTMLInputElement |
|
||||
HTMLTextAreaElement |
|
||||
React.ReactElement<InputProps>;
|
||||
|
||||
export interface AutoCompleteProps extends AbstractSelectProps {
|
||||
value?: SelectValue;
|
||||
defaultValue?: SelectValue;
|
||||
export interface AutoCompleteProps {
|
||||
size?: 'large' | 'small' | 'default';
|
||||
className?: string;
|
||||
notFoundContent?: Element;
|
||||
dataSource: DataSourceItemType[];
|
||||
prefixCls?: string;
|
||||
transitionName?: string;
|
||||
optionLabelProp?: string;
|
||||
onChange?: (value: SelectValue) => void;
|
||||
onSelect?: (value: SelectValue, option: Object) => any;
|
||||
children?: ValidInputElement |
|
||||
React.ReactElement<OptionProps> |
|
||||
Array<React.ReactElement<OptionProps>>;
|
||||
choiceTransitionName?: string;
|
||||
showSearch?: boolean;
|
||||
defaultValue?: string | Array<any> | SelectedValue | Array<SelectedValue>;
|
||||
value?: string | Array<any> | SelectedValue | Array<SelectedValue>;
|
||||
allowClear?: boolean;
|
||||
onChange?: (value: string | Array<any> | SelectedValue | Array<SelectedValue>) => void;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
function isSelectOptionOrSelectOptGroup(child: any): Boolean {
|
||||
return child && child.type && (child.type.isSelectOption || child.type.isSelectOptGroup);
|
||||
}
|
||||
|
||||
export default class AutoComplete extends React.Component<AutoCompleteProps, {}> {
|
||||
export default class AutoComplete extends React.Component<AutoCompleteProps, any> {
|
||||
static Option = Option as React.ClassicComponentClass<OptionProps>;
|
||||
static OptGroup = OptGroup as React.ClassicComponentClass<OptGroupProps>;
|
||||
|
||||
@@ -44,34 +38,11 @@ export default class AutoComplete extends React.Component<AutoCompleteProps, {}>
|
||||
optionLabelProp: 'children',
|
||||
choiceTransitionName: 'zoom',
|
||||
showSearch: false,
|
||||
filterOption: false,
|
||||
};
|
||||
|
||||
private select: any;
|
||||
|
||||
getInputElement = () => {
|
||||
const { children } = this.props;
|
||||
const element = children && React.isValidElement(children) && children.type !== Option ?
|
||||
React.Children.only(this.props.children) : <Input />;
|
||||
const elementProps = { ...element.props };
|
||||
// https://github.com/ant-design/ant-design/pull/7742
|
||||
delete elementProps.children;
|
||||
return (
|
||||
<InputElement {...elementProps}>{element}</InputElement>
|
||||
);
|
||||
}
|
||||
|
||||
focus() {
|
||||
this.select.focus();
|
||||
}
|
||||
|
||||
blur() {
|
||||
this.select.blur();
|
||||
}
|
||||
|
||||
saveSelect = (node: any) => {
|
||||
this.select = node;
|
||||
}
|
||||
static contextTypes = {
|
||||
antLocale: React.PropTypes.object,
|
||||
};
|
||||
|
||||
render() {
|
||||
let {
|
||||
@@ -83,45 +54,29 @@ export default class AutoComplete extends React.Component<AutoCompleteProps, {}>
|
||||
[`${prefixCls}-sm`]: size === 'small',
|
||||
[className]: !!className,
|
||||
[`${prefixCls}-show-search`]: true,
|
||||
[`${prefixCls}-auto-complete`]: true,
|
||||
});
|
||||
|
||||
let options;
|
||||
const childArray = React.Children.toArray(children);
|
||||
if (childArray.length &&
|
||||
isSelectOptionOrSelectOptGroup(childArray[0])
|
||||
) {
|
||||
options = children;
|
||||
} else {
|
||||
options = dataSource ? dataSource.map((item) => {
|
||||
if (React.isValidElement(item)) {
|
||||
return item;
|
||||
}
|
||||
switch (typeof item) {
|
||||
case 'string':
|
||||
return <Option key={item}>{item}</Option>;
|
||||
case 'object':
|
||||
return (
|
||||
<Option key={(item as DataSourceItemObject).value}>
|
||||
{(item as DataSourceItemObject).text}
|
||||
</Option>
|
||||
);
|
||||
default:
|
||||
throw new Error('AutoComplete[dataSource] only supports type `string[] | Object[]`.');
|
||||
}
|
||||
}) : [];
|
||||
}
|
||||
const options = children || (dataSource ? dataSource.map((item) => {
|
||||
switch (typeof item) {
|
||||
case 'string':
|
||||
return <Option key={item}>{item}</Option>;
|
||||
case 'object':
|
||||
return (
|
||||
<Option key={(item as DataSourceItemObject).value}>
|
||||
{(item as DataSourceItemObject).text}
|
||||
</Option>
|
||||
);
|
||||
default:
|
||||
throw new Error('AutoComplete[dataSource] only supports type `string[] | Object[]`.');
|
||||
}
|
||||
}) : []);
|
||||
|
||||
return (
|
||||
<Select
|
||||
{...this.props}
|
||||
<Select {...this.props}
|
||||
className={cls}
|
||||
mode="combobox"
|
||||
optionLabelProp={optionLabelProp}
|
||||
getInputElement={this.getInputElement}
|
||||
notFoundContent={notFoundContent}
|
||||
ref={this.saveSelect}
|
||||
>
|
||||
combobox
|
||||
notFoundContent={notFoundContent} >
|
||||
{options}
|
||||
</Select>
|
||||
);
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
category: Components
|
||||
subtitle: 自动完成
|
||||
type: Data Entry
|
||||
cols: 2
|
||||
cols: 1
|
||||
title: AutoComplete
|
||||
---
|
||||
|
||||
@@ -18,29 +18,14 @@ title: AutoComplete
|
||||
const dataSource = ['12345', '23456', '34567'];
|
||||
<AutoComplete dataSource={dataSource} />
|
||||
```
|
||||
因为 `AutoComplete` 是基于 `Select` 封装的，所以除了以下 API 外，`AutoComplete` 跟 `Select` 拥有一样的 API。
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| allowClear | 支持清除, 单选模式有效 | boolean | false |
|
||||
| autoFocus | 自动获取焦点 | boolean | false |
|
||||
| backfill | 使用键盘选择选项的时候把选中项回填到输入框中 | boolean | false |
|
||||
| children (自动完成的数据源) | 自动完成的数据源 | React.ReactElement<OptionProps> / Array<React.ReactElement<OptionProps>> | - |
|
||||
| children (自定义输入框) | 自定义输入框 | HTMLInputElement / HTMLTextAreaElement / React.ReactElement<InputProps> | `<Input />` |
|
||||
| dataSource | 自动完成的数据源 | [DataSourceItemType](https://git.io/vMMKF)\[] | |
|
||||
| defaultActiveFirstOption | 是否默认高亮第一个选项。 | boolean | true |
|
||||
| defaultValue | 指定默认选中的条目 | string\|string\[]\|{ key: string, label: string\|ReactNode }\|Array<{ key: string, label: string\|ReactNode}> | 无 |
|
||||
| disabled | 是否禁用 | boolean | false |
|
||||
| filterOption | 是否根据输入项进行筛选。当其为一个函数时，会接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 `true`，反之则返回 `false`。 | boolean or function(inputValue, option) | true |
|
||||
| optionLabelProp | 回填到选择框的 Option 的属性值，默认是 Option 的子元素。比如在子元素需要高亮效果时，此值可以设为 `value`。 | string | `children` |
|
||||
| placeholder | 输入框提示 | string | - |
|
||||
| value | 指定当前选中的条目 | string\|string\[]\|{ key: string, label: string\|ReactNode }\|Array<{ key: string, label: string\|ReactNode }> | 无 |
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|----------------|----------------------------------|------------|---------|
|
||||
| dataSource | 自动完成的数据源 | Array | |
|
||||
| value | 指定当前选中的条目 | String/Array<String>/{key: String, label: React.Node}/Array<{key, label}> | 无 |
|
||||
| defaultValue | 指定默认选中的条目 | String/Array<String>/{key: String, label: React.Node}/Array<{key, label}> | 无 |
|
||||
| allowClear | 支持清除, 单选模式有效 | boolean | false |
|
||||
| onChange | 选中 option，或 input 的 value 变化时，调用此函数 | function(value) | 无 |
|
||||
| onSearch | 搜索补全项的时候调用 | function(value) | 无 |
|
||||
| onSelect | 被选中时调用，参数为选中项的 value 值 | function(value, option) | 无 |
|
||||
|
||||
## 方法
|
||||
|
||||
| 名称 | 描述 |
|
||||
| ---- | ----------- |
|
||||
| focus() | 获取焦点 |
|
||||
| blur() | 移除焦点 |
|
||||
| onSelect | 被选中时调用，参数为选中项的 value 值 | function(value, option) | 无 |
|
||||
| disabled | 是否禁用 | boolean | false |
|
||||
|
||||
@@ -1,79 +0,0 @@
|
||||
@import "../../style/themes/default";
|
||||
@import "../../style/mixins/index";
|
||||
@import "../../input/style/mixin";
|
||||
|
||||
@input-prefix-cls: ~"@{ant-prefix}-input";
|
||||
@select-prefix-cls: ~"@{ant-prefix}-select";
|
||||
@autocomplete-prefix-cls: ~"@{select-prefix-cls}-auto-complete";
|
||||
|
||||
.@{autocomplete-prefix-cls} {
|
||||
.reset-component;
|
||||
|
||||
&.@{select-prefix-cls} {
|
||||
.@{select-prefix-cls} {
|
||||
&-selection {
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
&__rendered {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
height: 100%;
|
||||
line-height: @input-height-base;
|
||||
}
|
||||
&__placeholder {
|
||||
margin-left: (@input-padding-horizontal-base + 1px);
|
||||
margin-right: (@input-padding-horizontal-base + 1px);
|
||||
}
|
||||
|
||||
&--single {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Fix https://github.com/ant-design/ant-design/issues/7800
|
||||
.@{select-prefix-cls}-search--inline {
|
||||
position: static;
|
||||
float: left;
|
||||
}
|
||||
|
||||
&-allow-clear {
|
||||
.@{select-prefix-cls}-selection:hover .@{select-prefix-cls}-selection__rendered {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.@{input-prefix-cls} {
|
||||
background: transparent;
|
||||
border-width: @border-width-base;
|
||||
line-height: @line-height-base;
|
||||
height: @input-height-base;
|
||||
&:focus,
|
||||
&:hover {
|
||||
.hover;
|
||||
}
|
||||
}
|
||||
|
||||
&-lg {
|
||||
.@{select-prefix-cls}-selection__rendered {
|
||||
line-height: @input-height-lg;
|
||||
}
|
||||
.@{input-prefix-cls} {
|
||||
padding-top: @input-padding-vertical-lg;
|
||||
padding-bottom: @input-padding-vertical-lg;
|
||||
height: @input-height-lg;
|
||||
}
|
||||
}
|
||||
|
||||
&-sm {
|
||||
.@{select-prefix-cls}-selection__rendered {
|
||||
line-height: @input-height-sm;
|
||||
}
|
||||
.@{input-prefix-cls} {
|
||||
padding-top: @input-padding-vertical-sm;
|
||||
padding-bottom: @input-padding-vertical-sm;
|
||||
height: @input-height-sm;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,11 +0,0 @@
|
||||
import React from 'react';
|
||||
import { mount } from 'enzyme';
|
||||
import Avatar from '..';
|
||||
|
||||
describe('Avatar Render', () => {
|
||||
it('Render long string correctly', () => {
|
||||
const wrapper = mount(<Avatar>TestString</Avatar>);
|
||||
const children = wrapper.find('.ant-avatar-string');
|
||||
expect(children.length).toBe(1);
|
||||
});
|
||||
});
|
||||
@@ -1,329 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders ./components/avatar/demo/badge.md correctly 1`] = `
|
||||
<div>
|
||||
<span
|
||||
style="margin-right:24px"
|
||||
>
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
<span
|
||||
class="ant-avatar ant-avatar-square ant-avatar-icon"
|
||||
>
|
||||
<i
|
||||
class="anticon anticon-user"
|
||||
/>
|
||||
</span>
|
||||
<sup
|
||||
class="ant-scroll-number ant-badge-count"
|
||||
data-show="true"
|
||||
title="1"
|
||||
>
|
||||
<span
|
||||
class="ant-scroll-number-only"
|
||||
style="transition:none;-ms-transform:translateY(-1100%);-webkit-transform:translateY(-1100%);transform:translateY(-1100%)"
|
||||
>
|
||||
<p
|
||||
class=""
|
||||
>
|
||||
0
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
>
|
||||
1
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
>
|
||||
2
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
>
|
||||
3
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
>
|
||||
4
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
>
|
||||
5
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
>
|
||||
6
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
>
|
||||
7
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
>
|
||||
8
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
>
|
||||
9
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
>
|
||||
0
|
||||
</p>
|
||||
<p
|
||||
class="current"
|
||||
>
|
||||
1
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
>
|
||||
2
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
>
|
||||
3
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
>
|
||||
4
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
>
|
||||
5
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
>
|
||||
6
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
>
|
||||
7
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
>
|
||||
8
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
>
|
||||
9
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
>
|
||||
0
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
>
|
||||
1
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
>
|
||||
2
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
>
|
||||
3
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
>
|
||||
4
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
>
|
||||
5
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
>
|
||||
6
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
>
|
||||
7
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
>
|
||||
8
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
>
|
||||
9
|
||||
</p>
|
||||
</span>
|
||||
</sup>
|
||||
</span>
|
||||
</span>
|
||||
<span>
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
<span
|
||||
class="ant-avatar ant-avatar-square ant-avatar-icon"
|
||||
>
|
||||
<i
|
||||
class="anticon anticon-user"
|
||||
/>
|
||||
</span>
|
||||
<sup
|
||||
class="ant-scroll-number ant-badge-dot"
|
||||
data-show="true"
|
||||
/>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/avatar/demo/basic.md correctly 1`] = `
|
||||
<div>
|
||||
<div>
|
||||
<span
|
||||
class="ant-avatar ant-avatar-lg ant-avatar-circle ant-avatar-icon"
|
||||
>
|
||||
<i
|
||||
class="anticon anticon-user"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-avatar ant-avatar-circle ant-avatar-icon"
|
||||
>
|
||||
<i
|
||||
class="anticon anticon-user"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-avatar ant-avatar-sm ant-avatar-circle ant-avatar-icon"
|
||||
>
|
||||
<i
|
||||
class="anticon anticon-user"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<span
|
||||
class="ant-avatar ant-avatar-lg ant-avatar-square ant-avatar-icon"
|
||||
>
|
||||
<i
|
||||
class="anticon anticon-user"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-avatar ant-avatar-square ant-avatar-icon"
|
||||
>
|
||||
<i
|
||||
class="anticon anticon-user"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-avatar ant-avatar-sm ant-avatar-square ant-avatar-icon"
|
||||
>
|
||||
<i
|
||||
class="anticon anticon-user"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/avatar/demo/dynamic.md correctly 1`] = `
|
||||
<div>
|
||||
<span
|
||||
class="ant-avatar ant-avatar-lg ant-avatar-circle"
|
||||
style="background-color:#f56a00;vertical-align:middle"
|
||||
>
|
||||
<span
|
||||
class="ant-avatar-string"
|
||||
>
|
||||
U
|
||||
</span>
|
||||
</span>
|
||||
<button
|
||||
class="ant-btn ant-btn-sm"
|
||||
style="margin-left:16px;vertical-align:middle"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Change
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/avatar/demo/type.md correctly 1`] = `
|
||||
<div>
|
||||
<span
|
||||
class="ant-avatar ant-avatar-circle ant-avatar-icon"
|
||||
>
|
||||
<i
|
||||
class="anticon anticon-user"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-avatar ant-avatar-circle"
|
||||
>
|
||||
<span
|
||||
class="ant-avatar-string"
|
||||
>
|
||||
U
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
class="ant-avatar ant-avatar-circle"
|
||||
>
|
||||
<span
|
||||
class="ant-avatar-string"
|
||||
>
|
||||
USER
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
class="ant-avatar ant-avatar-circle ant-avatar-image"
|
||||
>
|
||||
<img
|
||||
src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-avatar ant-avatar-circle"
|
||||
style="color:#f56a00;background-color:#fde3cf"
|
||||
>
|
||||
<span
|
||||
class="ant-avatar-string"
|
||||
>
|
||||
U
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
class="ant-avatar ant-avatar-circle ant-avatar-icon"
|
||||
style="background-color:#87d068"
|
||||
>
|
||||
<i
|
||||
class="anticon anticon-user"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
`;
|
||||
@@ -1,3 +0,0 @@
|
||||
import demoTest from '../../../tests/shared/demoTest';
|
||||
|
||||
demoTest('avatar');
|
||||
@@ -1,29 +0,0 @@
|
||||
---
|
||||
order: 3
|
||||
title:
|
||||
zh-CN: 带徽标的头像
|
||||
en-US: With Badge
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
通常用于消息提示。
|
||||
|
||||
## en-US
|
||||
|
||||
Usually used for messages remind.
|
||||
|
||||
````jsx
|
||||
import { Avatar, Badge } from 'antd';
|
||||
|
||||
ReactDOM.render(
|
||||
<div>
|
||||
<span style={{ marginRight: 24 }}>
|
||||
<Badge count={1}><Avatar shape="square" icon="user" /></Badge>
|
||||
</span>
|
||||
<span>
|
||||
<Badge dot><Avatar shape="square" icon="user" /></Badge>
|
||||
</span>
|
||||
</div>
|
||||
, mountNode);
|
||||
````
|
||||
@@ -1,40 +0,0 @@
|
||||
---
|
||||
order: 0
|
||||
title:
|
||||
zh-CN: 基本
|
||||
en-US: Basic
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
头像有三种尺寸，两种形状可选。
|
||||
|
||||
## en-US
|
||||
|
||||
Three sizes and two shapes are available.
|
||||
|
||||
````jsx
|
||||
import { Avatar } from 'antd';
|
||||
|
||||
ReactDOM.render(
|
||||
<div>
|
||||
<div>
|
||||
<Avatar size="large" icon="user" />
|
||||
<Avatar icon="user" />
|
||||
<Avatar size="small" icon="user" />
|
||||
</div>
|
||||
<div>
|
||||
<Avatar shape="square" size="large" icon="user" />
|
||||
<Avatar shape="square" icon="user" />
|
||||
<Avatar shape="square" size="small" icon="user" />
|
||||
</div>
|
||||
</div>
|
||||
, mountNode);
|
||||
````
|
||||
|
||||
<style>
|
||||
#components-avatar-demo-basic .ant-avatar {
|
||||
margin-top: 16px;
|
||||
margin-right: 16px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,53 +0,0 @@
|
||||
---
|
||||
order: 2
|
||||
title:
|
||||
zh-CN: 自动调整字符大小
|
||||
en-US: Autoset Font Size
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
对于字符型的头像，当字符串较长时，字体大小可以根据头像宽度自动调整。
|
||||
|
||||
## en-US
|
||||
|
||||
For letter type Avatar, when the letters are too long to display, the font size can be automatically adjusted according to the width of the Avatar.
|
||||
|
||||
````jsx
|
||||
import { Avatar, Button } from 'antd';
|
||||
|
||||
const UserList = ['U', 'Lucy', 'Tom', 'Edward'];
|
||||
const colorList = ['#f56a00', '#7265e6', '#ffbf00', '#00a2ae'];
|
||||
|
||||
class Autoset extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
user: UserList[0],
|
||||
color: colorList[0],
|
||||
};
|
||||
}
|
||||
changeUser = () => {
|
||||
const index = UserList.indexOf(this.state.user);
|
||||
this.setState({
|
||||
user: index < UserList.length - 1 ? UserList[index + 1] : UserList[0],
|
||||
color: index < colorList.length - 1 ? colorList[index + 1] : colorList[0],
|
||||
});
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<Avatar style={{ backgroundColor: this.state.color, verticalAlign: 'middle' }} size="large">
|
||||
{this.state.user}
|
||||
</Avatar>
|
||||
<Button size="small" style={{ marginLeft: 16, verticalAlign: 'middle' }} onClick={this.changeUser}>
|
||||
Change
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
ReactDOM.render(<Autoset />
|
||||
, mountNode);
|
||||
````
|
||||
@@ -1,36 +0,0 @@
|
||||
---
|
||||
order: 1
|
||||
title:
|
||||
zh-CN: 类型
|
||||
en-US: Type
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
支持三种类型：图片、Icon 以及字符，其中 Icon 和字符型可以自定义图标颜色及背景色。
|
||||
|
||||
## en-US
|
||||
|
||||
Image, Icon and letter are supported, and the latter two kinds avatar can have custom colors and background colors.
|
||||
|
||||
````jsx
|
||||
import { Avatar } from 'antd';
|
||||
|
||||
ReactDOM.render(
|
||||
<div>
|
||||
<Avatar icon="user" />
|
||||
<Avatar>U</Avatar>
|
||||
<Avatar>USER</Avatar>
|
||||
<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
|
||||
<Avatar style={{ color: '#f56a00', backgroundColor: '#fde3cf' }}>U</Avatar>
|
||||
<Avatar style={{ backgroundColor: '#87d068' }} icon="user" />
|
||||
</div>
|
||||
, mountNode);
|
||||
````
|
||||
|
||||
<style>
|
||||
#components-avatar-demo-type .ant-avatar {
|
||||
margin-top: 16px;
|
||||
margin-right: 16px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,16 +0,0 @@
|
||||
---
|
||||
category: Components
|
||||
type: Data Display
|
||||
title: Avatar
|
||||
---
|
||||
|
||||
Avatars can be used to represent people or objects. It supports images, `Icon`s, or letters.
|
||||
|
||||
## API
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| -------- | ----------- | ---- | ------- |
|
||||
| icon | the `Icon` type for an icon avatar, see `Icon` Component | string | - |
|
||||
| shape | the shape of avatar | `circle` \| `square` | `circle` |
|
||||
| size | the size of the avatar | `large` \| `small` \| `default` | `default` |
|
||||
| src | the address of the image for an image avatar | string | - |
|
||||
@@ -1,137 +0,0 @@
|
||||
import * as React from 'react';
|
||||
import * as ReactDOM from 'react-dom';
|
||||
import Icon from '../icon';
|
||||
import classNames from 'classnames';
|
||||
|
||||
export interface AvatarProps {
|
||||
/** Shape of avatar, options:`circle`, `square` */
|
||||
shape?: 'circle' | 'square';
|
||||
/** Size of avatar, options:`large`, `small`, `default` */
|
||||
size?: 'large' | 'small' | 'default';
|
||||
/** Src of image avatar */
|
||||
src?: string;
|
||||
/** Type of the Icon to be used in avatar */
|
||||
icon?: string;
|
||||
style?: React.CSSProperties;
|
||||
prefixCls?: string;
|
||||
className?: string;
|
||||
children?: any;
|
||||
}
|
||||
|
||||
export interface AvatarState {
|
||||
scale: number;
|
||||
isImgExist: boolean;
|
||||
}
|
||||
|
||||
export default class Avatar extends React.Component<AvatarProps, AvatarState> {
|
||||
static defaultProps = {
|
||||
prefixCls: 'ant-avatar',
|
||||
shape: 'circle',
|
||||
size: 'default',
|
||||
};
|
||||
|
||||
private avatarChildren: any;
|
||||
|
||||
constructor(props: AvatarProps) {
|
||||
super(props);
|
||||
this.state = {
|
||||
scale: 1,
|
||||
isImgExist: true,
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.setScale();
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps: AvatarProps, prevState: AvatarState) {
|
||||
if (prevProps.children !== this.props.children
|
||||
|| (prevState.scale !== this.state.scale && this.state.scale === 1)) {
|
||||
this.setScale();
|
||||
}
|
||||
}
|
||||
|
||||
setScale = () => {
|
||||
const childrenNode = this.avatarChildren;
|
||||
if (childrenNode) {
|
||||
const childrenWidth = childrenNode.offsetWidth;
|
||||
const avatarWidth = ReactDOM.findDOMNode(this).getBoundingClientRect().width;
|
||||
// add 4px gap for each side to get better performance
|
||||
if (avatarWidth - 8 < childrenWidth) {
|
||||
this.setState({
|
||||
scale: (avatarWidth - 8) / childrenWidth,
|
||||
});
|
||||
} else {
|
||||
this.setState({
|
||||
scale: 1,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
handleImgLoadError = () => this.setState({ isImgExist: false });
|
||||
|
||||
render() {
|
||||
const {
|
||||
prefixCls, shape, size, src, icon, className, ...others,
|
||||
} = this.props;
|
||||
|
||||
const sizeCls = classNames({
|
||||
[`${prefixCls}-lg`]: size === 'large',
|
||||
[`${prefixCls}-sm`]: size === 'small',
|
||||
});
|
||||
|
||||
const classString = classNames(prefixCls, className, sizeCls, {
|
||||
[`${prefixCls}-${shape}`]: shape,
|
||||
[`${prefixCls}-image`]: src,
|
||||
[`${prefixCls}-icon`]: icon,
|
||||
});
|
||||
|
||||
let children = this.props.children;
|
||||
if (src && this.state.isImgExist) {
|
||||
children = (
|
||||
<img
|
||||
src={src}
|
||||
onError={this.handleImgLoadError}
|
||||
/>
|
||||
);
|
||||
} else if (icon) {
|
||||
children = <Icon type={icon} />;
|
||||
} else {
|
||||
const childrenNode = this.avatarChildren;
|
||||
if (childrenNode || this.state.scale !== 1) {
|
||||
const childrenStyle: React.CSSProperties = {
|
||||
msTransform: `scale(${this.state.scale})`,
|
||||
WebkitTransform: `scale(${this.state.scale})`,
|
||||
transform: `scale(${this.state.scale})`,
|
||||
position: 'absolute',
|
||||
display: 'inline-block',
|
||||
left: `calc(50% - ${Math.round(childrenNode.offsetWidth / 2)}px)`,
|
||||
};
|
||||
children = (
|
||||
<span
|
||||
className={`${prefixCls}-string`}
|
||||
ref={span => this.avatarChildren = span}
|
||||
style={childrenStyle}
|
||||
>
|
||||
{children}
|
||||
</span>
|
||||
);
|
||||
} else {
|
||||
children = (
|
||||
<span
|
||||
className={`${prefixCls}-string`}
|
||||
ref={span => this.avatarChildren = span}
|
||||
>
|
||||
{children}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
}
|
||||
return (
|
||||
<span {...others} className={classString}>
|
||||
{children}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,17 +0,0 @@
|
||||
---
|
||||
category: Components
|
||||
subtitle: 头像
|
||||
type: Data Display
|
||||
title: Avatar
|
||||
---
|
||||
|
||||
用来代表用户或事物，支持图片、图标或字符展示。
|
||||
|
||||
## API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| icon | 设置头像的图标类型，参考 `Icon` 组件 | string | - |
|
||||
| shape | 指定头像的形状 | Enum{ 'circle', 'square' } | `circle` |
|
||||
| size | 设置头像的大小 | Enum{ 'large', 'small', 'default' } | `default` |
|
||||
| src | 图片类头像的资源地址 | string | - |
|
||||
@@ -1,50 +0,0 @@
|
||||
@import "../../style/themes/default";
|
||||
@import "../../style/mixins/index";
|
||||
|
||||
@avatar-prefix-cls: ~"@{ant-prefix}-avatar";
|
||||
|
||||
.@{avatar-prefix-cls} {
|
||||
.reset-component;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
background: @avatar-bg;
|
||||
color: @avatar-color;
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
.avatar-size(@avatar-size-base, @avatar-font-size-base);
|
||||
|
||||
&-lg {
|
||||
.avatar-size(@avatar-size-lg, @avatar-font-size-lg);
|
||||
}
|
||||
|
||||
&-sm {
|
||||
.avatar-size(@avatar-size-sm, @avatar-font-size-sm);
|
||||
}
|
||||
|
||||
&-square {
|
||||
border-radius: @avatar-border-radius;
|
||||
}
|
||||
|
||||
& > img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-size(@size, @font-size) {
|
||||
width: @size;
|
||||
height: @size;
|
||||
line-height: @size;
|
||||
border-radius: @size / 2;
|
||||
|
||||
& > * {
|
||||
line-height: @size;
|
||||
}
|
||||
|
||||
&.@{avatar-prefix-cls}-icon {
|
||||
font-size: @font-size;
|
||||
}
|
||||
}
|
||||
@@ -1,2 +0,0 @@
|
||||
import '../../style/index.less';
|
||||
import './index.less';
|
||||
@@ -1,25 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders ./components/back-top/demo/basic.md correctly 1`] = `
|
||||
<div>
|
||||
Scroll down to see the bottom-right
|
||||
<strong
|
||||
style="color:rgba(64, 64, 64, 0.6)"
|
||||
>
|
||||
gray
|
||||
</strong>
|
||||
button.
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/back-top/demo/custom.md correctly 1`] = `
|
||||
<div>
|
||||
Scroll down to see the bottom-right
|
||||
<strong
|
||||
style="color:#1088e9"
|
||||
>
|
||||
blue
|
||||
</strong>
|
||||
button.
|
||||
</div>
|
||||
`;
|
||||
@@ -1,3 +0,0 @@
|
||||
import demoTest from '../../../tests/shared/demoTest';
|
||||
|
||||
demoTest('back-top');
|
||||
@@ -1,24 +0,0 @@
|
||||
import React from 'react';
|
||||
import { mount } from 'enzyme';
|
||||
import BackTop from '..';
|
||||
|
||||
describe('BackTop', () => {
|
||||
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();
|
||||
jest.runAllTimers();
|
||||
wrapper.find('.ant-back-top').simulate('click');
|
||||
jest.runAllTimers();
|
||||
expect(Math.round(document.documentElement.scrollTop)).toBe(0);
|
||||
});
|
||||
});
|
||||
@@ -23,7 +23,7 @@ ReactDOM.render(
|
||||
<div className="ant-back-top-inner">UP</div>
|
||||
</BackTop>
|
||||
Scroll down to see the bottom-right
|
||||
<strong style={{ color: '#1088e9' }}> blue </strong>
|
||||
<strong style={{ color: '#57c5f7' }}> blue </strong>
|
||||
button.
|
||||
</div>,
|
||||
mountNode
|
||||
@@ -39,7 +39,7 @@ ReactDOM.render(
|
||||
width: 40px;
|
||||
line-height: 40px;
|
||||
border-radius: 4px;
|
||||
background-color: #1088e9;
|
||||
background-color: #57c5f7;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
category: Components
|
||||
type: Other
|
||||
type: Navigation
|
||||
title: BackTop
|
||||
---
|
||||
|
||||
@@ -14,11 +14,12 @@ title: BackTop
|
||||
## API
|
||||
|
||||
> The distance to the bottom is set to `50px` by default, which is overridable.
|
||||
>
|
||||
|
||||
> If you decide to use custom styles, please note the size limit: no more than `40px * 40px`.
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| -------- | ----------- | ---- | ------- |
|
||||
| target | specifies the scrollable area dom node | () => HTMLElement | () => window |
|
||||
| visibilityHeight | the `BackTop` button will not show until the scroll height reaches this value | number | 400 |
|
||||
| onClick | a callback function, which can be executed when you click the button | Function | - |
|
||||
|
||||
Property | Description | Type | Default
|
||||
-----|-----|-----|------
|
||||
visibilityHeight | the `BackTop` button will not show until the scroll height reaches this value | Number | 400
|
||||
onClick | a callback function, which can be executed when you click the button | Function | -
|
||||
|
||||
|
||||
@@ -1,14 +1,19 @@
|
||||
import * as React from 'react';
|
||||
import React from 'react';
|
||||
import Animate from 'rc-animate';
|
||||
import addEventListener from 'rc-util/lib/Dom/addEventListener';
|
||||
import classNames from 'classnames';
|
||||
import omit from 'omit.js';
|
||||
import Icon from '../icon';
|
||||
import getScroll from '../_util/getScroll';
|
||||
import getRequestAnimationFrame from '../_util/getRequestAnimationFrame';
|
||||
|
||||
const reqAnimFrame = getRequestAnimationFrame();
|
||||
|
||||
const easeInOutCubic = (t: number, b: number, c: number, d: number) => {
|
||||
const currentScrollTop = () => {
|
||||
return window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;
|
||||
};
|
||||
|
||||
const easeInOutCubic = (t, b, c, d) => {
|
||||
const cc = c - b;
|
||||
t /= d / 2;
|
||||
if (t < 1) {
|
||||
@@ -18,10 +23,11 @@ const easeInOutCubic = (t: number, b: number, c: number, d: number) => {
|
||||
}
|
||||
};
|
||||
|
||||
function noop() { }
|
||||
function noop() {}
|
||||
|
||||
function getDefaultTarget() {
|
||||
return window;
|
||||
return typeof window !== 'undefined' ?
|
||||
window : null;
|
||||
}
|
||||
|
||||
export interface BackTopProps {
|
||||
@@ -40,24 +46,15 @@ export default class BackTop extends React.Component<BackTopProps, any> {
|
||||
|
||||
scrollEvent: any;
|
||||
|
||||
constructor(props: BackTopProps) {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
visible: false,
|
||||
};
|
||||
}
|
||||
|
||||
getCurrentScrollTop = () => {
|
||||
const getTarget = this.props.target || getDefaultTarget;
|
||||
const targetNode = getTarget();
|
||||
if (targetNode === window) {
|
||||
return window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;
|
||||
}
|
||||
return (targetNode as HTMLElement).scrollTop;
|
||||
}
|
||||
|
||||
scrollToTop = (e: React.MouseEvent<HTMLDivElement>) => {
|
||||
const scrollTop = this.getCurrentScrollTop();
|
||||
scrollToTop = (e) => {
|
||||
const scrollTop = currentScrollTop();
|
||||
const startTime = Date.now();
|
||||
const frameFunc = () => {
|
||||
const timestamp = Date.now();
|
||||
@@ -71,9 +68,8 @@ export default class BackTop extends React.Component<BackTopProps, any> {
|
||||
(this.props.onClick || noop)(e);
|
||||
}
|
||||
|
||||
setScrollTop(value: number) {
|
||||
const getTarget = this.props.target || getDefaultTarget;
|
||||
const targetNode = getTarget();
|
||||
setScrollTop(value) {
|
||||
const targetNode = (this.props.target || getDefaultTarget)();
|
||||
if (targetNode === window) {
|
||||
document.body.scrollTop = value;
|
||||
document.documentElement.scrollTop = value;
|
||||
@@ -86,14 +82,13 @@ export default class BackTop extends React.Component<BackTopProps, any> {
|
||||
const { visibilityHeight, target = getDefaultTarget } = this.props;
|
||||
const scrollTop = getScroll(target(), true);
|
||||
this.setState({
|
||||
visible: scrollTop > (visibilityHeight as number),
|
||||
visible: scrollTop > visibilityHeight,
|
||||
});
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
const getTarget = this.props.target || getDefaultTarget;
|
||||
this.scrollEvent = addEventListener(getTarget(), 'scroll', this.handleScroll);
|
||||
this.handleScroll();
|
||||
this.scrollEvent = addEventListener((this.props.target || getDefaultTarget)(), 'scroll', this.handleScroll);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
@@ -104,11 +99,14 @@ export default class BackTop extends React.Component<BackTopProps, any> {
|
||||
|
||||
render() {
|
||||
const { prefixCls = 'ant-back-top', className = '', children } = this.props;
|
||||
const classString = classNames(prefixCls, className);
|
||||
const classString = classNames({
|
||||
[prefixCls]: true,
|
||||
[className]: !!className,
|
||||
});
|
||||
|
||||
const defaultElement = (
|
||||
<div className={`${prefixCls}-content`}>
|
||||
<div className={`${prefixCls}-icon`} />
|
||||
<Icon className={`${prefixCls}-icon`} type="to-top" />
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -120,15 +118,15 @@ export default class BackTop extends React.Component<BackTopProps, any> {
|
||||
'visibilityHeight',
|
||||
]);
|
||||
|
||||
const backTopBtn = this.state.visible ? (
|
||||
<div {...divProps} className={classString} onClick={this.scrollToTop}>
|
||||
{children || defaultElement}
|
||||
</div>
|
||||
) : null;
|
||||
|
||||
return (
|
||||
<Animate component="" transitionName="fade">
|
||||
{backTopBtn}
|
||||
{
|
||||
this.state.visible ?
|
||||
<div {...divProps} className={classString} onClick={this.scrollToTop}>
|
||||
{children || defaultElement}
|
||||
</div>
|
||||
: null
|
||||
}
|
||||
</Animate>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
category: Components
|
||||
type: Other
|
||||
type: Navigation
|
||||
subtitle: 回到顶部
|
||||
title: BackTop
|
||||
---
|
||||
@@ -15,11 +15,10 @@ title: BackTop
|
||||
## API
|
||||
|
||||
> 有默认样式，距离底部 `50px`，可覆盖。
|
||||
>
|
||||
> 自定义样式宽高不大于 40px \* 40px。
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| target | 设置需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数 | Function | () => window |
|
||||
| visibilityHeight | 滚动高度达到此参数值才出现 `BackTop` | number | 400 |
|
||||
| onClick | 点击按钮的回调函数 | Function | - |
|
||||
> 自定义样式宽高不大于 40px * 40px。
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|-------------|----------------|--------------------|--------------|
|
||||
| visibilityHeight | 滚动高度达到此参数值才出现 `BackTop` | Number | 400 |
|
||||
| onClick | 点击按钮的回调函数 | Function | - |
|
||||
|
||||
@@ -1,10 +1,8 @@
|
||||
@import "../../style/themes/default";
|
||||
@import "../../style/mixins/index";
|
||||
|
||||
@backtop-prefix-cls: ~"@{ant-prefix}-back-top";
|
||||
|
||||
.@{backtop-prefix-cls} {
|
||||
.reset-component;
|
||||
z-index: @zindex-back-top;
|
||||
position: fixed;
|
||||
right: 100px;
|
||||
@@ -17,22 +15,19 @@
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
border-radius: 20px;
|
||||
background-color: @back-top-bg;
|
||||
color: @back-top-color;
|
||||
background-color: rgba(64, 64, 64, 0.4);
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
transition: all .3s @ease-in-out;
|
||||
overflow: hidden;
|
||||
|
||||
&:hover {
|
||||
background-color: @back-top-hover-bg;
|
||||
background-color: rgba(64, 64, 64, 0.6);
|
||||
transition: all .3s @ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
&-icon {
|
||||
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;
|
||||
font-size: 20px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,9 +1,11 @@
|
||||
import * as React from 'react';
|
||||
import React from 'react';
|
||||
import { createElement, Component } from 'react';
|
||||
import {findDOMNode} from 'react-dom';
|
||||
import isCssAnimationSupported from '../_util/isCssAnimationSupported';
|
||||
import assign from 'object-assign';
|
||||
import omit from 'omit.js';
|
||||
import classNames from 'classnames';
|
||||
|
||||
function getNumberArray(num: string | number | undefined) {
|
||||
function getNumberArray(num) {
|
||||
return num ?
|
||||
num.toString()
|
||||
.split('')
|
||||
@@ -17,26 +19,22 @@ export interface ScrollNumberProps {
|
||||
count?: string | number;
|
||||
component?: string;
|
||||
onAnimated?: Function;
|
||||
style?: React.CSSProperties;
|
||||
title?: string | number;
|
||||
height?: number;
|
||||
style: React.CSSProperties;
|
||||
}
|
||||
|
||||
export interface ScrollNumberState {
|
||||
animateStarted?: boolean;
|
||||
count?: string | number;
|
||||
}
|
||||
|
||||
export default class ScrollNumber extends Component<ScrollNumberProps, ScrollNumberState> {
|
||||
export default class ScrollNumber extends Component<ScrollNumberProps, any> {
|
||||
static defaultProps = {
|
||||
prefixCls: 'ant-scroll-number',
|
||||
count: null,
|
||||
onAnimated() {
|
||||
},
|
||||
height: 18,
|
||||
};
|
||||
|
||||
lastCount: any;
|
||||
|
||||
constructor(props: ScrollNumberProps) {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
animateStarted: true,
|
||||
@@ -44,14 +42,20 @@ export default class ScrollNumber extends Component<ScrollNumberProps, ScrollNum
|
||||
};
|
||||
}
|
||||
|
||||
getPositionByNum(num: number, i: number) {
|
||||
componentDidMount() {
|
||||
if (!isCssAnimationSupported()) {
|
||||
findDOMNode(this).className += ' not-support-css-animation';
|
||||
}
|
||||
}
|
||||
|
||||
getPositionByNum(num, i) {
|
||||
if (this.state.animateStarted) {
|
||||
return 10 + num;
|
||||
}
|
||||
const currentDigit = getNumberArray(this.state.count)[i];
|
||||
const lastDigit = getNumberArray(this.lastCount)[i];
|
||||
// 同方向则在同一侧切换数字
|
||||
if (this.state.count! > this.lastCount) {
|
||||
if (this.state.count > this.lastCount) {
|
||||
if (currentDigit >= lastDigit) {
|
||||
return 10 + num;
|
||||
}
|
||||
@@ -63,7 +67,7 @@ export default class ScrollNumber extends Component<ScrollNumberProps, ScrollNum
|
||||
return num;
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps: ScrollNumberProps) {
|
||||
componentWillReceiveProps(nextProps) {
|
||||
if ('count' in nextProps) {
|
||||
if (this.state.count === nextProps.count) {
|
||||
return;
|
||||
@@ -90,7 +94,7 @@ export default class ScrollNumber extends Component<ScrollNumberProps, ScrollNum
|
||||
}
|
||||
}
|
||||
|
||||
renderNumberList(position: number) {
|
||||
renderNumberList(position) {
|
||||
const childrenToReturn: React.ReactElement<any>[] = [];
|
||||
for (let i = 0; i < 30; i++) {
|
||||
const currentClassName = (position === i) ? 'current' : '';
|
||||
@@ -99,17 +103,18 @@ export default class ScrollNumber extends Component<ScrollNumberProps, ScrollNum
|
||||
return childrenToReturn;
|
||||
}
|
||||
|
||||
renderCurrentNumber(num: number, i: number) {
|
||||
renderCurrentNumber(num, i) {
|
||||
const position = this.getPositionByNum(num, i);
|
||||
const height = this.props.height;
|
||||
const removeTransition = this.state.animateStarted ||
|
||||
(getNumberArray(this.lastCount)[i] === undefined);
|
||||
return createElement('span', {
|
||||
className: `${this.props.prefixCls}-only`,
|
||||
style: {
|
||||
transition: removeTransition && 'none',
|
||||
msTransform: `translateY(${-position * 100}%)`,
|
||||
WebkitTransform: `translateY(${-position * 100}%)`,
|
||||
transform: `translateY(${-position * 100}%)`,
|
||||
WebkitTransform: `translateY(${-position * height}px)`,
|
||||
transform: `translateY(${-position * height}px)`,
|
||||
height,
|
||||
},
|
||||
key: i,
|
||||
}, this.renderNumberList(position));
|
||||
@@ -117,7 +122,7 @@ export default class ScrollNumber extends Component<ScrollNumberProps, ScrollNum
|
||||
|
||||
renderNumberElement() {
|
||||
const state = this.state;
|
||||
if (!state.count || isNaN(state.count as number)) {
|
||||
if (!state.count || isNaN(state.count)) {
|
||||
return state.count;
|
||||
}
|
||||
return getNumberArray(state.count)
|
||||
@@ -125,29 +130,19 @@ export default class ScrollNumber extends Component<ScrollNumberProps, ScrollNum
|
||||
}
|
||||
|
||||
render() {
|
||||
const { prefixCls, className, style, title, component = 'sup' } = this.props;
|
||||
// fix https://fb.me/react-unknown-prop
|
||||
const restProps = omit(this.props, [
|
||||
const props = assign({}, omit(this.props, [
|
||||
'count',
|
||||
'onAnimated',
|
||||
'component',
|
||||
'prefixCls',
|
||||
]);
|
||||
const newProps = {
|
||||
...restProps,
|
||||
className: classNames(prefixCls, className),
|
||||
title: title as string,
|
||||
};
|
||||
// allow specify the border
|
||||
// mock border-color by box-shadow for compatible with old usage:
|
||||
// <Badge count={4} style={{ backgroundColor: '#fff', color: '#999', borderColor: '#d9d9d9' }} />
|
||||
if (style && style.borderColor) {
|
||||
newProps.style.boxShadow = `0 0 0 1px ${style.borderColor} inset`;
|
||||
}
|
||||
]), {
|
||||
className: `${this.props.prefixCls} ${this.props.className}`,
|
||||
});
|
||||
return createElement(
|
||||
component as any,
|
||||
newProps,
|
||||
this.renderNumberElement(),
|
||||
this.props.component || 'sup',
|
||||
props,
|
||||
this.renderNumberElement()
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,3 +0,0 @@
|
||||
import demoTest from '../../../tests/shared/demoTest';
|
||||
|
||||
demoTest('badge');
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user