diff --git a/.babelrc b/.babelrc index 4687bc4f44..36a371c9f7 100644 --- a/.babelrc +++ b/.babelrc @@ -1,3 +1,6 @@ { - "presets": ["es2015", "react", "stage-0"] + "presets": ["es2015", "react", "stage-0"], + "plugins": [ + "add-module-exports" + ] } diff --git a/.codecov.yml b/.codecov.yml new file mode 100644 index 0000000000..7966f407b9 --- /dev/null +++ b/.codecov.yml @@ -0,0 +1,2 @@ +codecov: + branch: master diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 0000000000..efe690abc8 --- /dev/null +++ b/.eslintignore @@ -0,0 +1,5 @@ +components/**/*.js +components/**/*.jsx +!.eslintrc.js +!components/*/__tests__/* +!components/*/demo/* diff --git a/.eslintrc.js b/.eslintrc.js index 5e2173a4e2..aa92f63469 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,11 +1,9 @@ -'use strict'; - const eslintrc = { extends: ['eslint-config-airbnb'], env: { browser: true, node: true, - mocha: true, + jasmine: true, jest: true, es6: true, }, @@ -28,7 +26,8 @@ const eslintrc = { 'react/sort-comp': 0, 'react/prop-types': 0, 'react/jsx-first-prop-new-line': 0, - "react/jsx-filename-extension": [1, { extensions: ['.js', '.jsx', '.md'] }], + 'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx', '.md'] }], + 'import/extensions': 0, 'import/no-unresolved': 0, 'import/no-extraneous-dependencies': 0, 'no-param-reassign': 0, @@ -36,7 +35,12 @@ const eslintrc = { 'max-len': 0, 'consistent-return': 0, 'no-redeclare': 0, - } + 'react/require-extension': 0, + 'jsx-a11y/no-static-element-interactions': 0, + 'jsx-a11y/anchor-has-content': 0, + 'react/no-danger': 0, + 'comma-dangle': ['error', 'always-multiline'], + }, }; if (process.env.RUN_ENV === 'DEMO') { @@ -48,10 +52,10 @@ if (process.env.RUN_ENV === 'DEMO') { Object.assign(eslintrc.rules, { '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, }); diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md index c8a17cbf92..eadf9b6856 100644 --- a/.github/CONTRIBUTING.md +++ b/.github/CONTRIBUTING.md @@ -13,13 +13,13 @@ The following guidelines are about *How to avoid Homework Questions*. ### 1. Read the documentation. -It sad but true that someone just glance(not read) [Ant Design's documentation](http://ant.design/). Please read the documentation closely. What's more, you can modify and run our demo with [CodePen](http://codepen.io/anon/pen/wGOWGW?editors=001). It's helpful to understand our documentation. +It sad but true that someone just glance(not read) [Ant Design's documentation](http://ant.design/). Please read the documentation closely. What's more, you can modify and run our demo with [CodePen](http://codepen.io/benjycui/pen/KgPZrE?editors=001). It's helpful to understand our documentation. Tips: choose the corresponding documentation with versions selector which in the bottom-right corner. ### 2. Make sure that your question is about Ant Design, not React -Someone may think all of the questions that he/she meets in developing are about Ant Design, but it's not true. So, please read [React's documentaion](http://facebook.github.io/react/docs/getting-started.html) or just Google(not Baidu, seriously) your questions with keywork *React* first. If you are sure that your question is about Ant Design, go ahead. +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. ### 3. Read the FAQ and search the issues list of Ant Design @@ -36,7 +36,7 @@ It is a good habit which will save maintainers' time. Thank you! ## Providing a demo while reporting a bug -It would be helpful to provide a demo which can re-produce the bug 100%. Please fork this [CodePen](http://codepen.io/anon/pen/wGOWGW?editors=001) and re-produce the bug you met. Then, create an issue. The most important thing is: double check before claiming that you have found a bug. +It would be helpful to provide a demo which can re-produce the bug 100%. Please fork this [CodePen](http://codepen.io/benjycui/pen/KgPZrE?editors=001) and re-produce the bug you met. Then, create an issue. The most important thing is: double check before claiming that you have found a bug. ## Tips about Feature Request @@ -48,9 +48,11 @@ 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 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. 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. 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. diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md index df4acf956e..6af160725e 100644 --- a/.github/ISSUE_TEMPLATE.md +++ b/.github/ISSUE_TEMPLATE.md @@ -1,27 +1,15 @@ - + + http://new-issue.ant.design -#### 本地环境 +If your issue was not created using the app above, it will be closed immediately. +--> - + - -#### 你期待的结果是： - - - -#### 实际上的结果： - - - -#### 可重现的在线演示 - - +不是用上面的链接创建的 issue 会被立即关闭。 +--> diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index 01e6ca426d..e00817b0ba 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -2,6 +2,7 @@ First of all, thanks for your contribution! :-) Please makes sure these boxes are checked before submitting your PR, thank you! +* [ ] Make sure you propose PR to correct branch: bugfix for `master`, feature for latest active branch `feature-x.x`. * [ ] 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. diff --git a/.gitignore b/.gitignore index 86665f9ab8..d6ac993045 100644 --- a/.gitignore +++ b/.gitignore @@ -15,6 +15,7 @@ Thumbs.db *.swp *.swo *.log +*.json.gzip node_modules/ .buildpath .settings @@ -26,6 +27,10 @@ dist /lib elasticsearch-* config/base.yaml -typings +/.vscode/ +/coverage +yarn.lock components/**/*.js components/**/*.jsx +!components/**/__tests__/*.js +!components/**/__tests__/*.js.snap diff --git a/.jest.node.json b/.jest.node.json new file mode 100644 index 0000000000..573bcce851 --- /dev/null +++ b/.jest.node.json @@ -0,0 +1,19 @@ +{ + "setupFiles": [ + "./tests/setup.js" + ], + "moduleFileExtensions": [ + "ts", + "tsx", + "js", + "md" + ], + "transform": { + "\\.tsx?$": "./node_modules/typescript-babel-jest", + "\\.js$": "./node_modules/babel-jest", + "\\.md$": "./node_modules/antd-demo-jest" + }, + "testRegex": "demo\\.test\\.js$", + "testEnvironment": "node", + "snapshotSerializers": ["enzyme-to-json/serializer"] +} diff --git a/.lesshintrc b/.lesshintrc deleted file mode 100644 index d798ace465..0000000000 --- a/.lesshintrc +++ /dev/null @@ -1,19 +0,0 @@ -{ - "propertyOrdering": false, - "hexLength": "short", - "stringQuotes": false, - "decimalZero": false, - "importantRule": false, - "zeroUnit": "no_unit", - "qualifyingElement": false, - "duplicateProperty": false, - "importPath": false, - "finalNewline": false, - "excludedFiles": [ - "components/layout/style/mixin.less", - "components/style/core/base.less", - "components/style/core/iconfont.less", - "components/style/core/normalize.less", - "components/style/mixins/compatibility.less" - ] -} diff --git a/.stylelintrc b/.stylelintrc new file mode 100644 index 0000000000..59fd86dfcf --- /dev/null +++ b/.stylelintrc @@ -0,0 +1,24 @@ +{ + "extends": "stylelint-config-standard", + "rules": { + "at-rule-empty-line-before": null, + "at-rule-name-space-after": null, + "comment-empty-line-before": null, + "declaration-bang-space-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 + } +} diff --git a/.travis.yml b/.travis.yml index 517c87fa04..d1049a9195 100644 --- a/.travis.yml +++ b/.travis.yml @@ -3,4 +3,30 @@ sudo: false language: node_js node_js: - - "5" + - "6" + +env: + matrix: + - TEST_TYPE=lint + - TEST_TYPE=dist + - TEST_TYPE=compile + - TEST_TYPE=test:dom + - TEST_TYPE=test:node + +script: + - | + if [ "$TEST_TYPE" = lint ]; then + npm run lint + elif [ "$TEST_TYPE" = dist ]; then + npm run dist && \ + node ./tests/dekko/dist.test.js + elif [ "$TEST_TYPE" = compile ]; then + npm run compile && \ + node ./tests/dekko/lib.test.js + elif [ "$TEST_TYPE" = test:dom ]; then + npm run dist && \ + npm test -- --coverage -w 2 && \ + bash <(curl -s https://codecov.io/bash) + elif [ "$TEST_TYPE" = test:node ]; then + npm test -- --config .jest.node.json -w 2 + fi diff --git a/AUTHORS.txt b/AUTHORS.txt index c796a807a8..d002be54fe 100644 --- a/AUTHORS.txt +++ b/AUTHORS.txt @@ -1,30 +1,58 @@ +Albert Zheng +Andrew Murray +Andrey G Benjy Cui Bernie Bozhao Bruce Mitchener Bruno Maia +C <4019980@qq.com> Cam Song +Catalin Miron Cee Cirno +Cody Chan +Danny Hoower Antonio Viasus Avila Daqi Song +DengYun +Eddie Xie Emma +Eric <84263800@qq.com> Eward Song +Gray Choi Guan Hao Haibin Yu Hanai +ImJoeHs <865439601@qq.com> +Infinity <305870677@qq.com> James +Jerry Bendy +Junyu Zhan KgTong Leon Shi +Leon Shi +Liu Yang +LongYinan MG12 Ma Tianxiao +Marius Ileana Marshall Chen +Meck Mr.Tone +Nathan Wells Neverland +Nimo Pyiner Qiaosen Huang RaoHai +Rrrandom +Sean Lin Sebastian Blade +Shawn Sit ShiTengFei SimaQ +The Rock +Vadim Macagon +Vincent Zhang Wei Zhu Yuwei Ba Zap @@ -33,44 +61,71 @@ bang bang88 chencheng (云谦) ddcat1115 +denzw +detailyang devqin +djorkaeff ecofe <150641329@qq.com> +edgji elrrrrrrr +ezpub +feng zhi hao fengmk2 genie haoxin hi-caicai ioldfish +jasonslyvia jiang <155259966@qq.com> +jinouwuque +kagawagao +kaifei <150641329@qq.com> kasinooya +kayw leon.shi lgmcolin lgmcolin +lixiaochou077 +lizhaocai +muzuiget +parlop pizn plandem popomore qubaoming +ryangun shelwin shouyong simaQ snadn sorrycc swindme +tianli.zhao <275287902@qq.com> tom ustccjw <317713370@qq.com> warmhug wizawu +xiaofan2406 +yeliex yiminghe yubozhao yuche z zack zhangpc +zhaocai zhujun24 zilong zinkey -低位 +zuiidea 偏右 -白羊座小葛 逸达 +蔡伦 +陆离 +低位 +广彬-梁 <326741518@qq.com> 闲耘™ +吕立青 +马斯特 +马金花儿 +白羊座小葛 diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md new file mode 100644 index 0000000000..38ed099252 --- /dev/null +++ b/CHANGELOG.en-US.md @@ -0,0 +1,822 @@ +--- +order: 6 +title: Change Log +toc: false +timeline: true +--- + +`antd` strictly follows [Semantic Versioning 2.0.0](http://semver.org/). + +#### Release Schedule + +* Weekly release: patch version at the end of every week for routine bugfix (anytime for urgent bugfix). +* Monthly release: minor version at the end of every month for new features. +* Major version release is not included in this schedule for 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/blob/1.x-stable/CHANGELOG.md). + +--- + +## 2.9.0 + +`2017-04-01` 👻 + +- Change the default font family to be monospaced for numbers. [b526083](https://github.com/ant-design/ant-design/commit/b526083fa6a619113a3d26c4f4f092a8648f3bd4) +- Select + - Add `mode` prop, deprecate the `tags|combobox|multiple` properties, replaced by `mode={tags|combobox|multiple}`. + - `tags|multiple` now supports `allowClear`. [#4843](https://github.com/ant-design/ant-design/issues/4843) +- Add a new type `dashboard` of Progress. [#5225](https://github.com/ant-design/ant-design/issues/5225) [@qiaolb](https://github.com/qiaolb) +- Add `showLine` prop of Tree, for connecting line style in tree nodes. [#3854](https://github.com/ant-design/ant-design/issues/3854) +- TimePicker now supports 12 hours via `use12Hours`. [#4063](https://github.com/ant-design/ant-design/issues/4063) +- Add `column.filterIcon` prop of Table, which can be used to customize filter icon. [#5293](https://github.com/ant-design/ant-design/pull/5293) +- Add `wrapperClassName` prop of Spin. [#5425](https://github.com/ant-design/ant-design/pull/5425) [@aaronplanell](https://github.com/aaronplanell) +- Add `onPrevClick` `onNextClick` props of Tabs. [#4395](https://github.com/ant-design/ant-design/issues/4395) +- Add `parser` prop of InputNumber, to extract value from formatter. [#5178](https://github.com/ant-design/ant-design/pull/5178#issuecomment-284557933) +- New locales support: + - Japanese [#5529](https://github.com/ant-design/ant-design/pull/5529) [@novi](https://github.com/novi) + - Slovak [#5304](https://github.com/ant-design/ant-design/pull/5304) [@Kamahl19](https://github.com/Kamahl19) + - Estonian [#5266](https://github.com/ant-design/ant-design/pull/5266) [@madisvain](https://github.com/madisvain) + - Turkish [#5536](https://github.com/ant-design/ant-design/pull/5536) [@c0b41](https://github.com/c0b41) +- TypeScript + - Fix definitions of Carousel following react-slick + - Fix some definitions of Form. + - Fix `getPopupContainer` definitions. +- Allow to disable animation of inkBar and panes of Tabs separately. [#5089](https://github.com/ant-design/ant-design/issues/5089) [@xieguanglei](https://github.com/xieguanglei) +- Button `loading` prop now supports like `{ delay: 1000 }`, removed the default loading delay. [#5365](https://github.com/ant-design/ant-design/issues/5365) +- Add less variables for Card header. [#5354](https://github.com/ant-design/ant-design/pull/5354) [@kossel](https://github.com/kossel) +- Fix extra separator of Breadcrumb without `breadcrumbName`. +- Fix `Unknown prop placement` warning of Dropdown.Button. [#5594](https://github.com/ant-design/ant-design/issues/5594) +- Fix RangePicker and InputNumber placeholder color. +- Fix that Cascader search can't use [Backspace]. [#5340](https://github.com/ant-design/ant-design/issues/5340) +- Fix that LocaleProvider can't affect `Modal.confirm` sometimes. [#5493](https://github.com/ant-design/ant-design/issues/5493) [@hargasinski](https://github.com/hargasinski) +- Fix scroll animation of BackTop which specifies the `target` prop. [#5564](https://github.com/ant-design/ant-design/issues/5564) +- Optimize the block style of Pagination. [#5557](https://github.com/ant-design/ant-design/issues/5557) + +## 2.8.3 + +`2017-03-27` + +- TypeScript + - Fixed missing definition of `AutoComplete[filterOption]`. [#5393](https://github.com/ant-design/ant-design/pull/5393) [@mitchelldemler](https://github.com/mitchelldemler) + - Improve definition of `getPopupContainer` `getCalendarContainer` `getTooltipContainer` `getSuggestionContainer`, etc. [322e9ef](https://github.com/ant-design/ant-design/commit/322e9efdc9db28bd92230fc690f1fdf5a72cf7cd) + - Improve definition of `Form.create`. [#5420](https://github.com/ant-design/ant-design/pull/5420) [@infeng](https://github.com/infeng) +- Fixed Badge should work in Maxthon. [#5477](https://github.com/ant-design/ant-design/issues/5477) +- Fixed Button cannot work with `null` `undefined` as children. [#5472](https://github.com/ant-design/ant-design/issues/5472) [@blade254353074](https://github.com/blade254353074) +- Breadcrumb are not rely on `route.breadcrumbName` now. [ac1c7f3](https://github.com/ant-design/ant-design/commit/ac1c7f312bc46ba6ef7aacace43e4ac99b87dd54) +- Fixed `Form.Item[hasFeedback]` will lost styles while using with `Input[prefix]`. [#5456](https://github.com/ant-design/ant-design/issues/5456) [@william-yz](https://github.com/william-yz) +- Fixed Layout.Content will show scrollbar while using with Carousel. [#5415](https://github.com/ant-design/ant-design/issues/5415) +- LocaleProvider + - Fixed missing locales of German. [#5387](https://github.com/ant-design/ant-design/pull/5387) [@Knacktus](https://github.com/Knacktus) + - Fixed missing locales of Russian. [#5406](https://github.com/ant-design/ant-design/pull/5406) [@plandem](https://github.com/plandem) + - Fixed it doesn't work with Upload. [#5388](https://github.com/ant-design/ant-design/pull/5388) [@natergj](https://github.com/natergj) +- Fixed inconsistet animation of Menu Icon and text. [#5495](https://github.com/ant-design/ant-design/issues/5495) +- Fixed `Modale[footer]` cannot be set to `null`. [#5462](https://github.com/ant-design/ant-design/issues/5462) +- Fixed Pagination will lost styles in `IE<=10` which is introduced in `2.8.2`. [#5484](https://github.com/ant-design/ant-design/issues/5484) +- Fixed Popover will be closed by mistake while using Table in it. [#5407](https://github.com/ant-design/ant-design/issues/5407) +- Remove restriction that Radio can only be direct chidlren of Radio.Group. [#5443](https://github.com/ant-design/ant-design/issues/5443) +- Fixed warning while using Switch in Form.Item. [#5368](https://github.com/ant-design/ant-design/issues/5368) +- Now we defaultly hide the Table's "Select All" dropdown icon, display it when set `selections` to true. [#5246](https://github.com/ant-design/ant-design/issues/5246) [@infeng](https://github.com/infeng) +- New theme variable `@info-color`. [#5442](https://github.com/ant-design/ant-design/issues/5442) +- Supporting suppress warning(You are using a whole package of antd...) with `NODE_ENV=test` while testing. [#5345](https://github.com/ant-design/ant-design/issues/5345) +- Upgrade moment to `2.18.0`. + +## 2.8.2 + +`2017-03-11` + +- New [design specification documentation](https://ant.design/docs/spec/colors). +- Fix error of Modal.confirm [#5269](https://github.com/ant-design/ant-design/issues/5269). +- Fix mask style of Upload [#5275](https://github.com/ant-design/ant-design/issues/5275). +- Fix progress not showing of Upload [#5323](https://github.com/ant-design/ant-design/issues/5323). +- Fix a pagination showTotal wrong data issue of Table [#5259](https://github.com/ant-design/ant-design/issues/5259). +- Fix a style issue while using Popconfirm and Button together [5301](https://github.com/ant-design/ant-design/issues/5301). +- Fix a style issue of Radio [#5336](https://github.com/ant-design/ant-design/pull/5336). +- Fix a issue that `getContainer` of Message didn't work [#5380](https://github.com/ant-design/ant-design/issues/5380). +- Fix text alignment of Checkbox and Radio [696a3c0](https://github.com/ant-design/ant-design/commit/696a3c0e34156d78e87d629a3f0f8703af1f03ec). +- Tweak animation and blur style of Spin [fa1e031](https://github.com/ant-design/ant-design/commit/fa1e031a7396c61fa9709a0c46fe63200c35d232). +- Tweak some styles of Mention [240a93c](https://github.com/ant-design/ant-design/commit/240a93cee25bc8c6ad4520cd907a14a7b22ed773). + +## 2.8.1 + +`2017-03-11` + +- **DatePicker** Fix can't select time when new props are passed, and improve the selection behavior of `DatePicker[showTime]`. [#5189](https://github.com/ant-design/ant-design/issues/5189) [@megawac](https://github.com/megawac) +- **Form** + - Add document for validate rules. [#5201](https://github.com/ant-design/ant-design/issues/5201) + - Fix some style issues. [#5196](https://github.com/ant-design/ant-design/issues/5196) [#5236](https://github.com/ant-design/ant-design/issues/5236) [#5222](https://github.com/ant-design/ant-design/issues/5222) +- **Icon** Add iconfont `shake` and `android-o`. [commit/941782](https://github.com/ant-design/ant-design/commit/941782f7ec000a9054c3bc945ab887f93ab46749) +- **Input** Fix `hasFeedback` not work with `addonBefore`. [#5228](https://github.com/ant-design/ant-design/issues/5228) +- **InputNumber** Add typings for props `formatter`. [#5240](https://github.com/ant-design/ant-design/issues/5240) [@hlehmann](https://github.com/hlehmann) +- **Modal** Call `onCancel` when pressing esc key. [#5203](https://github.com/ant-design/ant-design/issues/5203) [@elios264](https://github.com/elios264) +- **Table** + - Fix implicit type issue. [#5206](https://github.com/ant-design/ant-design/issues/5206) [@kvey](https://github.com/kvey) + - Fix right border not visible with no data in `small` size. [#5237](https://github.com/ant-design/ant-design/issues/5237) + - Fix sort not working when using grouping column. [#5158](https://github.com/ant-design/ant-design/issues/5158) +- **Tooltip** Fix layout style on disabled Button. [#5254](https://github.com/ant-design/ant-design/issues/5254) +- **Upload** + - Fix long name of upload item style. [commit/0a3519](https://github.com/ant-design/ant-design/commit/0a35197a35513ca45308bb7163c8243b75dd6f8d) + - Fix and improve animation. [pull/5210](https://github.com/ant-design/ant-design/pull/5210) + - Allow override `onProgress`. [pull/5260](https://github.com/ant-design/ant-design/pull/5260) [@minwe](https://github.com/minwe) +- **Global Optimization** + - Fix Cannot resolve module `lodash.debounce`. [#5230](https://github.com/ant-design/ant-design/issues/5230) +- **Site** + - Fix safari language check. [pull/5245](https://github.com/ant-design/ant-design/pull/5245) + - Add ability to copy color when clicking on palette. [pull/5247](https://github.com/ant-design/ant-design/pull/5247) [@bsheikh](https://github.com/bsheikh) + - Add boilerplate samples. [commit/f2f786](https://github.com/ant-design/ant-design/commit/f2f786d66d75eebef8406a72db8a15e1640cea1f) + +## 2.8.0 + +`2017-03-06` + +- Tabs + - Added `tabBarStyle` to allow customize style of tab bar. [#4966](https://github.com/ant-design/ant-design/issues/4966) + - Added `TabPane[closable]` to allow config whether to show delete icon or not. [#4807](https://github.com/ant-design/ant-design/pull/4807) [@lixiaoyang1992](https://github.com/lixiaoyang1992) +- Anchor + - Added `showInkInFixed` to allow config whether to show circle icon or not when anchor is fixed. [#4960](https://github.com/ant-design/ant-design/pull/4960) + - Fix issue resulting in Anchor throw errors when `children` is not AnchorLink. [#5129](https://github.com/ant-design/ant-design/issues/5129) +- Table + - Added invert selection feature. [demo](https://ant.design/components/table-cn/#components-table-demo-row-selection-custom) [#4962](https://github.com/ant-design/ant-design/pull/4962) + - `spin` now spport Spin props. [#4824](https://github.com/ant-design/ant-design/pull/4824) [@lixiaoyang1992](https://github.com/lixiaoyang1992) + - Fix issue resulting header's bottom border doesn't show when `size` is `small`. [#5182](https://github.com/ant-design/ant-design/issues/5182) +- Mention added custom trigger character support. [demo](https://ant.design/components/mention-cn/#components-mention-demo-multiple-trigger) + - ![Mention animation](https://zos.alipayobjects.com/rmsportal/QDYwAbwKrqOUOykRaNai.gif) +- Rate + - Support custom character. [demo](https://ant.design/components/rate-cn/#components-rate-demo-character) + - Added new `className` prop. +- Layout + - Added a new `Header Sider` demo. [demo](http://ant.design/components/layout-cn/#components-layout-demo-top-side-2) + - Added a new `Fixed Header` demo. [demo](https://ant.design/components/layout-cn/#components-layout-demo-fixed) + - Added `Sider[breakpoint]` to allow config responsive breakpoint. [#4931](https://github.com/ant-design/ant-design/pull/4931) +- Form + - Added `layout` to replace the original `horizontal`、`vertical`、`inline`. [#5056](https://github.com/ant-design/ant-design/issues/5056) +- Calendar + - Added `dateFullCellRender` and `monthFullCellRender` to allow override the content of cell. [#5138](https://github.com/ant-design/ant-design/pull/5138) [@wonyun](https://github.com/wonyun) + - Added `onSelect` for date selection. [demo](https://ant.design/components/calendar-cn/#components-calendar-demo-select) +- AutoComplete + - Fix alignment issue in Form.Item. [#5139](https://github.com/ant-design/ant-design/issues/5139) + - Adde a newd `Uncertain Category` demo. [demo](https://ant.design/components/auto-complete-cn/#components-auto-complete-demo-uncertain-category) +- Col added `xl` to support 1600px breakpoint. [#4796](https://github.com/ant-design/ant-design/pull/4796) [@hjin-me](https://github.com/hjin-me) +- Upload added `locale` to support i18n. [#4697](https://github.com/ant-design/ant-design/issues/4697) +- Transfer added `onScroll` to support load data dynamically. [#4188](https://github.com/ant-design/ant-design/issues/4188) +- `message` and `notification` add `getContainer` to allow config the render container. [#5019](https://github.com/ant-design/ant-design/issues/5019) +- Badge added `showZero` to allow config whether to show `0` or not. [#4251](https://github.com/ant-design/ant-design/issues/4251) +- InputNumber + - Added `formatter` to allow format the value to present. + - Added ctrl and shift key support. [detail](https://github.com/react-component/input-number#keyboard-navigation) +- Added some new icons. [#5107](https://github.com/ant-design/ant-design/pull/5107) +- New locale support: + - Dutch [#4785](https://github.com/ant-design/ant-design/pull/4785) [@corneyl](https://github.com/corneyl) + - Catalan [#4929](https://github.com/ant-design/ant-design/pull/4929) [@aaronplanell](https://github.com/aaronplanell) + - Czech [#5169](https://github.com/ant-design/ant-design/pull/5169) [@martinnov92](https://github.com/ant-design/ant-design/pull/5169) + - Korean [#5141](https://github.com/ant-design/ant-design/pull/5141) [@minsungryu](https://github.com/ant-design/ant-design/pull/5141) +- Improve Spin display position. [#4722](https://github.com/ant-design/ant-design/issues/4722) +- Fix Checkbox comatible issue with `browser-sync`. [#2744](https://github.com/ant-design/ant-design/issues/2744) +- Fix Steps width issue when resize window. [#5083](https://github.com/ant-design/ant-design/issues/5083) +- Fix Upload.Dragger unmount error. [#5162](https://github.com/ant-design/ant-design/issues/5162) +- Fix Button shifting during click in IE issue. +- FIx Input prefix and suffix vertical alignment. + +## 2.7.4 + +`2017-02-28` + +- Fix TreeSelect cannot display bug. [#5092](https://github.com/ant-design/ant-design/issues/5092) +- Fix Anchor `e.stopPreventDefault is not a function` error. [#5080](https://github.com/ant-design/ant-design/issues/5080) +- Fix some detail styles of Input, Cascader, Upload. + +## 2.7.3 + +`2017-02-25` + +- Unify demo code to ES6 class. [#4878](https://github.com/ant-design/ant-design/issues/4878) +- TypeScript + - Fix that `Cannot find module '../../package.json'` error. [#4935](https://github.com/ant-design/ant-design/issues/4935) + - Fix definitions of Table, RangePicker and Upload. +- Fix lack of event argument for Modal `onOk` `afterClose` and Popconfirm `onConfirm` `onCancel`. [#4787](https://github.com/ant-design/ant-design/issues/4787) +- Improve animation of Menu[inline] and Collapse. +- Improve Checkbox and Radio vertical align style. +- Table + - Fix misplace header when fix column. [#4936](https://github.com/ant-design/ant-design/issues/4936) + - Fix not clearing float issue. [#4945](https://github.com/ant-design/ant-design/issues/4945) + - Fix submenu of filter. [#4975](https://github.com/ant-design/ant-design/issues/4975) + - Fix that filterDropdown of fixed column cannot be interacted with. [#5010](https://github.com/ant-design/ant-design/issues/5010) + - Fix that arguments of `pagination.onChange` do not match Pagination `onChange`. + - Fix that table loading animation is not smoothing. [#4934](https://github.com/ant-design/ant-design/issues/4934) +- Improve multiple message display. [#3543](https://github.com/ant-design/ant-design/issues/3543) +- Fix Carousel autoplay not working after resize window. [#2550](https://github.com/ant-design/ant-design/issues/2550) +- Fix that controlled InputNumber cannot input number like `1.01` `1.001`. [#5012](https://github.com/ant-design/ant-design/issues/5012) +- Improve Button loading switching.[#4913](https://github.com/ant-design/ant-design/issues/4913) +- Fix Dropdown selected menu style and `Menu[theme="dark"]` style. [#5013](https://github.com/ant-design/ant-design/issues/5013) [#4903](https://github.com/ant-design/ant-design/issues/4903) +- Fix Menu submenu `z-index` issue. [#4937](https://github.com/ant-design/ant-design/issues/4937) +- Fix that DatePicker and RangePicker width cannot be reset below `300px` issue. [#4920](https://github.com/ant-design/ant-design/issues/4920) +- Fix style of Spin nested in Spin. [#4971](https://github.com/ant-design/ant-design/issues/4971) +- Fix that lack of Button style when import Popconfirm by babel-plugin-import. +- Fix that less variables cannot work on circle Progress. [#5002](https://github.com/ant-design/ant-design/issues/5002) +- Fix falsy children of Breadcrumb. [#5015](https://github.com/ant-design/ant-design/issues/5015) +- Fix blinking tooltip of Slider. [#5003](https://github.com/ant-design/ant-design/issues/5003) +- Fix that Transfer disabled option can be moved. [#4981](https://github.com/ant-design/ant-design/pull/4981) [@tianlizhao](https://github.com/tianlizhao) +- Documentation + - Fix and improve site for mobile devices. + - Improve 1.x to 2.x compatibility instruction. + +## 2.7.2 + +`2017-02-17` + +- Fix that `antd.version` doesn't work as expected. [#4844](https://github.com/ant-design/ant-design/issues/4844) +- Fix that dist files don't include locales. [#4910](https://github.com/ant-design/ant-design/pull/4910) +- Fix that disabled option is selectable in search mode of Cascader. [#4699](https://github.com/ant-design/ant-design/issues/4699) +- **Button** + - Fix click animation of `Button[type=danger]`. + - Fix broken style with `loading`. [#4875](https://github.com/ant-design/ant-design/issues/4875) +- **Menu** + - Fix that `openKeys` should be controlled property in `vertical` mode. [#4876](https://github.com/ant-design/ant-design/issues/4876) + - Fix selected animation of Menu.Item. + - Fix broken style of Menu.SubMenu. [#4906](https://github.com/ant-design/ant-design/issues/4906) +- **Table** + - Fix broken style of table which use small size and fixed header. [#4850](https://github.com/ant-design/ant-design/issues/4850) + - Fix placeholder style. [#4851](https://github.com/ant-design/ant-design/pull/4851) + - Simplify DOM structure. [#4868](https://github.com/ant-design/ant-design/issues/4868) +- Fix that Radio should support number `0` as children. [#4874](https://github.com/ant-design/ant-design/issues/4874) [@HQidea](https://github.com/HQidea) +- Fix that RangePicker should work with `style.width` which is small than 300. [#4920](https://github.com/ant-design/ant-design/issues/4920) +- Fix CSS compile error caused by Spin. [#4915](https://github.com/ant-design/ant-design/issues/4915) +- Fix that Tooltip should work with disabled button in Chrome. [#4865](https://github.com/ant-design/ant-design/pull/4865) +- Fix UX of Tree while dragging. [#4858](https://github.com/ant-design/ant-design/issues/4858) +- Fix failed style of Upload. [#4810](https://github.com/ant-design/ant-design/issues/4810) +- Fix that `Menu[vertical]`'s SubMenu cannot popup in Layout.Sider. [#4890](https://github.com/ant-design/ant-design/issues/4890) +- Improve animation of Button and `Badge[status=processing]`. + +![Badge animation](https://camo.githubusercontent.com/6874b2333f2fac3fac346404c6e70684e4dafc1a/68747470733a2f2f7a6f732e616c697061796f626a656374732e636f6d2f726d73706f7274616c2f73516b72756c716346734b4e54785158615971512e676966) +![Button animation](https://camo.githubusercontent.com/3963d12b45de4f522c2799361dbc3177e7bd93d1/68747470733a2f2f7a6f732e616c697061796f626a656374732e636f6d2f726d73706f7274616c2f46624b776d636f766d795364666c557468494e522e676966) + +## 2.7.1 + +`2017-02-10` + +- **Affix** + - Fix the problem of element been hidden when hover on. [#4800](https://github.com/ant-design/ant-design/issues/4800) + - Fix event listener can not be removed. [#4755](https://github.com/ant-design/ant-design/issues/4755) + - Fix can not be unfixed when scrolling fastly. [#4760](https://github.com/ant-design/ant-design/issues/4760) +- **Anchor** Fix the location problem when offsetTop has been set. [#4706](https://github.com/ant-design/ant-design/issues/4706) +- **AutoComplete** + - Fix the wrong size. [#4766](https://github.com/ant-design/ant-design/issues/4766) + - Fix adding error character automatically. [#4778](https://github.com/ant-design/ant-design/issues/4778) +- **Dropdown** Add the documentation and demo about positioning of Dropdown menus. [#4811](https://github.com/ant-design/ant-design/issues/4811) +- **Layout** Improve Sider's animation effect. [#4752](https://github.com/ant-design/ant-design/issues/4752) +- **LocaleProvider** Fix issues with the new Swedish locale provider. [pull-4762](https://github.com/ant-design/ant-design/pull/4762) [@JesperWe](https://github.com/JesperWe) +- **RangePicker** Fix the overlapping problem about the date icon. [#4783](https://github.com/ant-design/ant-design/issues/4783) [@zhenzong](https://github.com/zhenzong) +- **Table** + - Add the missing value 'middle' for size definition. [#4819](https://github.com/ant-design/ant-design/pull/4819) [@warrenseymour](https://github.com/warrenseymour) + - Fix controlled filter does not work with JSX style. [#4759](https://github.com/ant-design/ant-design/issues/4759) + - Fix switch pagination problem. [#4779](https://github.com/ant-design/ant-design/issues/4779) +- **Tabs** Fix content missing problem since the second tab pane under IE9. [#4795](https://github.com/ant-design/ant-design/issues/4795) +- **rc-pagination** Upgrade to ~1.7.0, add pageSize as onChange's second argument. +- **Global optimization** + - Make some bugfixes and optimizations about documentation、link and style. + - Use stylelint instead of lesslint, and fix some lint issues. [#2179](https://github.com/ant-design/ant-design/issues/2179) + - Unify border radius to 4px. [#4772](https://github.com/ant-design/ant-design/issues/4772) + - Support `import { version } from 'antd'`. [#4751](https://github.com/ant-design/ant-design/pull/4751) +- **Site** + - Add default locale looking-up in Home Page. [#4552](https://github.com/ant-design/ant-design/issues/4552) + - Can search with Google. [#4814](https://github.com/ant-design/ant-design/issues/4814) + - Change the position of version switch. [pull-4799](https://github.com/ant-design/ant-design/pull/4799) + +## 2.7.0 + +`2017-02-03` + +* Added `danger` button and `ghost` button style. [#4679](https://github.com/ant-design/ant-design/pull/4679) +* Input element of AutoComplete can be customized. [#4483](https://github.com/ant-design/ant-design/pull/4483) +* Upgrade rc-cascader to `0.11.0`, keyborad interactions supported. [#4411](https://github.com/ant-design/ant-design/pull/4411) +* More popup directions are supported in notification. [#4732](https://github.com/ant-design/ant-design/pull/4700) +* Upgrade rc-steps to `2.3.0`, added `progressDot` property of Steps, which allows users to customize the display for Steps with progress dot style. +* Upgrade rc-input-number to `3.0.0` + * Input behavious will trigger `onChange` callback now.[#4265](https://github.com/ant-design/ant-design/pull/4265) + * Fixed `onKeyUp`. [#4717](https://github.com/ant-design/ant-design/issues/4717) +* Added `vertical` mode of Slider. [#4473](https://github.com/ant-design/ant-design/pull/4473) +* Tag + * Added preset colors. [#4571](https://github.com/ant-design/ant-design/pull/4571) + * Improvement vertical-align and margin. +* Add German localization for LocaleProvider.[#4686](https://github.com/ant-design/ant-design/pull/4686) +* Add Swedish localization for LocaleProvider. [#4455](https://github.com/ant-design/ant-design/pull/4455) +* Add French localization for LocaleProvider. [#4538](https://github.com/ant-design/ant-design/pull/4538) +* Added `onSearchChange` callback of Transfer. [#4464](https://github.com/ant-design/ant-design/pull/4464) +* Added `maskClosable` property of Modal.confirm. [#4488](https://github.com/ant-design/ant-design/pull/4488), [#4488](https://github.com/ant-design/ant-design/pull/4490) +* Form + * Added `options.onValuesChange` option, because `options.onFieldsChange` would be triggered multiply. [#2934](https://github.com/ant-design/ant-design/pull/2934) + * Added `props.form.getFieldsError` `props.form.isFieldTouched` `props.form.isFieldsTouched` options that can be used to disable submit button. [#4374](https://github.com/ant-design/ant-design/issues/4374) + * Added `hideRequiredMark` property. [#4732](https://github.com/ant-design/ant-design/pull/4732) +* Improvement upload list of Upload. [#4516](https://github.com/ant-design/ant-design/pull/4516) +* Upgrade rc-select to `6.7.1`. + * Fixed duplication `onChange` callback. [#156@rc-select](https://github.com/react-component/select/pull/156) + * Fixed displaying of initial value. [#152@rc-select](https://github.com/react-component/select/pull/152) +* Upgrade rc-tree-select to `1.9.0`. + * Added `treeDefaultExpandedKeys` property.[#43@rc-tree-select](https://github.com/react-component/tree-select/pull/43) + * Fixed an overflow-wrap issue. [#42@rc-tree-select](https://github.com/react-component/tree-select/pull/42) +* Added less variables: `@border-style-base` `@border-width-base` `@btn-danger-color` `@btn-danger-bg` and etc. +* Fixed Badge misplace issue when browser zoom above 100%. [#4747](https://github.com/ant-design/ant-design/issues/4747) [#4290](https://github.com/ant-design/ant-design/issues/4290) +* Fixed a mis-align issue of fixed header Table. [#4750](https://github.com/ant-design/ant-design/issues/4750) +* Fixed Table scrolling lag issue in IE. [#4522](https://github.com/ant-design/ant-design/issues/4522) +* Add icon aliases: `addfile` => `file-add`，`addfolder` => `folder-open`, and the old type names are still working. [#4758](https://github.com/ant-design/ant-design/issues/4758) + +## 2.6.4 + +`2017-01-20` + +* Improve RangePicker when selecting a preset date.[#4561](https://github.com/ant-design/ant-design/issues/4561) +* Fix DatePicker select time scroll issue.[#4412](https://github.com/ant-design/ant-design/issues/4412) +* Fix issue resulting in vertical Menu can't be controlled.[#3783](https://github.com/ant-design/ant-design/issues/3783) +* Fix Cascader's style when it's disabled.[#4648](https://github.com/ant-design/ant-design/issues/4648) +* Table + * Improve Table fixed header's scrollbar style.[#4637](https://github.com/ant-design/ant-design/issues/4637) + * Fix issue resulting in Table's header flashes when `loading` is true in Safari.[#4622](https://github.com/ant-design/ant-design/issues/4622) + * Fix multiple border issues. [#4647](https://github.com/ant-design/ant-design/issues/4647)、[#4635](https://github.com/ant-design/ant-design/issues/4635) + * Fix `showHeader`'s default value.[#4658](https://github.com/ant-design/ant-design/issues/4658) + * Fix missing `TableColumnConfig` type.[#4660](https://github.com/ant-design/ant-design/issues/4660) + +## 2.6.3 + +`2017-01-15` + +* Fixed issue introduced in `2.6.2` that Popconfirm is not working. [#4606](https://github.com/ant-design/ant-design/issues/4606) + +## 2.6.2 + +`2017-01-14` + +* Added a Third-Party Library Page for recommending other greet react components. [Link](/docs/react/recommendation) +* Fixed misplaced Sider of Layout. [#4459](https://github.com/ant-design/ant-design/issues/4459) +* Fixed Input.Search wrong block layout and misplaced icon. [#4540](https://github.com/ant-design/ant-design/issues/4540) +* Added a customize Collapse panel demo. [Link](/components/collapse/#components-collapse-demo-custom) +* Table + * Enlarged the width of selection column and expand column. + * Fixed not-available pagination issue when property `pagination` is changed. [#4532](https://github.com/ant-design/ant-design/issues/4532) + * Fixed that three level filter menu is not working. [#4541](https://github.com/ant-design/ant-design/issues/4541) + * Fixed `column.filteredValue` issue of cannot being set to `null`. +* Now Carousel is undragglble and text-selectable defaultly. +* Added warnings when non-BreadcrumbItem node is nested under Breadcrumb. [#4403](https://github.com/ant-design/ant-design/issues/4403) +* Fixed Tooltip hidden issue when `onVisibleChange(visible)` return `true`. [#4579](https://github.com/ant-design/ant-design/issues/4579) +* Make TreeSelect panel default height smaller than screen height. [#4537](https://github.com/ant-design/ant-design/pull/4537) +* Added less variables of TimePicker and Spin. +* Replaced arrows of DatePicker year panel by year text. [#4415](https://github.com/ant-design/ant-design/issues/4415) +* Fixed TypeScript definites of AutoComplete and Form `[options.validateTrigger]`. +* Improved the animation details of Spin and Progress. + +## 2.6.1 + +`2017-1-6` + +* Fix style problem for Menu dark theme. [#4440](https://github.com/ant-design/ant-design/issues/4440) +* Fix TypeScript interface definition for `Select[tokenSeparators]` `Modal[afterClose]` `Input[name]` and so on. [#4441](https://github.com/ant-design/ant-design/pull/4441) [@eddhannay](https://github.com/eddhannay) +* Fix that `TimePicker[placeholder]` cannot be set to empty string. [#4446](https://github.com/ant-design/ant-design/pull/4446) [@jialeicui](https://github.com/jialeicui) +* Fix style problem in DatePicker year panel. [#4415](https://github.com/ant-design/ant-design/issues/4415) +* Fix that Table loading doesn't mask Pagination. [#4461](https://github.com/ant-design/ant-design/issues/4461) +* Fix align style for `Input[prefix|suffix]`. [commit](https://github.com/ant-design/ant-design/commit/c4ac4d1eca53ae2f6f4a1e15210b43745f283534) +* Fix align style for Cascader. [commit](https://github.com/ant-design/ant-design/commit/1fbebd4ecfff432e1b2261c9dfee4b9f471e7b1f) + +## 2.6.0 + +`2017-1-2` + +- Brand new color system. [pull/4426](https://github.com/ant-design/ant-design/pull/4426) + - Brand new color algorithm replacing the tint/shade system. + - Brand new color palattes generated by new algorithm. [Link](http://ant.design/docs/spec/colors) + - Change default font color. +- Add Layout component. [#3534](https://github.com/ant-design/ant-design/issues/3534) +- Add Grid playground demo. [commit/ee17ab](https://github.com/ant-design/ant-design/commit/ee17abfa9d0362c6f9baab4a9a09e57574583246) +- Input + - Support prefix and suffix. [#4226](https://github.com/ant-design/ant-design/issues/4226) [@ystarlongzi](https://github.com/ystarlongzi) + - InputGroup support compact display mode. [pull/4309](https://github.com/ant-design/ant-design/pull/4309) +- Spin support delayed display. [#4306](https://github.com/ant-design/ant-design/issues/4306) +- Fix the dislocation problem of Pagination in low resolution. [#4349](https://github.com/ant-design/ant-design/issues/4349) +- Fix wrapping display of Dropdown.Button. [pull/4355](https://github.com/ant-design/ant-design/pull/4355) [@Morhaus](https://github.com/Morhaus) +- Fix wrong background color of Cascader in disabled status. [#4434](https://github.com/ant-design/ant-design/issues/4434) +- Fix MonthPicker[monthCellContentRender] doesn't work, and some documentation errors. [#4394](https://github.com/ant-design/ant-design/issues/4394) +- Fix the extra border of ButtonGroup. [#4382](https://github.com/ant-design/ant-design/pull/4382) [@ystarlongzi](https://github.com/ystarlongzi) +- Fix wrong background color of the Submenu(horizontal mode). [#4414](https://github.com/ant-design/ant-design/issues/4414) +- Fix overlapping graphics with Select/Cascader in Form.Item with hasFeedback. [#4431](https://github.com/ant-design/ant-design/issues/4431) [@JesperWe](https://github.com/JesperWe) +- Reset border-radius of the first row in Table without header. [#4373](https://github.com/ant-design/ant-design/issues/4373) +- Improve the drag performance of Tree. [#4371](https://github.com/ant-design/ant-design/issues/4371) +- Improve official website and documentation, fix some bugs. +- Update rc-form to support nested style of getFieldDecorator[id]. + +## 2.5.3 + +`2016-12-24` 🎄🎄🎄 + +* Supports TypeScript@2.1. [#4208](https://github.com/ant-design/ant-design/issues/4208) +* Fix style issue resulting in nested Tabs. [#4317](https://github.com/ant-design/ant-design/issues/4317) +* Fix `onChange` callback issue resulting in Radio. [#4242](https://github.com/ant-design/ant-design/issues/4242) [@ystarlongzi](https://github.com/ystarlongzi) +* Fix a FormItem mis-aligin bug. [#4271](https://github.com/ant-design/ant-design/issues/4271) +* Fix background issue resulting in selected element of veritcal Menu.[#4253](https://github.com/ant-design/ant-design/issues/4253) +* Improve arguments type of `onVisibleChange` callback of Dropdown.[#4236](https://github.com/ant-design/ant-design/issues/4236) [@bang88](https://github.com/bang88) +* Improve first argument type of `onChange` callback of Cascader.[#4231](https://github.com/ant-design/ant-design/issues/4231) [@bang88](https://github.com/bang88) +* Improve default width of Datepicker[showTime]. [b912f1c](https://github.com/ant-design/ant-design/commit/b912f1cea6f470c16b8dd90554883460161cef47) + +## 2.5.2 + +`2016-12-10` + +* Improve selected item style of Menu. +* Fix issue resulting in Mention not responses `onFocus` and `onBlur`. [#4163](https://github.com/ant-design/ant-design/issues/4163) +* Fix issue resulting in there is a redundant shadow between `disabled` and `checked` Radio. [#4114](https://github.com/ant-design/ant-design/pull/4114) @jdz321 +* Fix error when setting Momment `defaultValue` or `value` on RangePicker, TimePicker, Calendar. [#4147](https://github.com/ant-design/ant-design/issues/4147) +* Fix issue resulting in Affix disappears when it's uesed in animated Tabs. [#3943](https://github.com/ant-design/ant-design/issues/3943) +* Fix issue resulting in Cascader passes different `selectedOptions` to `onChange` when manually selecting and selecting by search. [#4096](https://github.com/ant-design/ant-design/issues/4096) +* Fix issue resulting in Tabs get offset, when too many tabs are opening. [#3637](https://github.com/ant-design/ant-design/issues/3637) +* Table + * Align text of grouped parent header to center. + * Fix issue resulting in `filterDropdownVisible` can't be set correctly. [#4162](https://github.com/ant-design/ant-design/issues/4162) + +## 2.5.1 + +`2016-12-03` + +* Improve website experience on mobile devices. +* Add some migrate warnings for `1.x` to `2.x`. +* ToolTip, Popover, Popconfirm support to wrap text node and multiple node directly now. [#3924](https://github.com/ant-design/ant-design/issues/3924) +* Anchor + * Fix current position bug when scroll fastly. [#4053](https://github.com/ant-design/ant-design/issues/4053) + * Fix a bug of parent component ref node is undefined. [#4037](https://github.com/ant-design/ant-design/issues/4037) +* Table + * Fix a selection problem when setting defaultChecked in rowSelection. [#4020](https://github.com/ant-design/ant-design/issues/4020) + * Fix grouping column title cannot work with filters. [#4099](https://github.com/ant-design/ant-design/issues/4099) +* Fix a misplace bug when using Popover over `Input[type="textarea"]`. [#4092](https://github.com/ant-design/ant-design/issues/4092) +* Fix Popconfirm `visible` is not-working problem. [#4068](https://github.com/ant-design/ant-design/issues/4068) +* Fix TimePicker can not override width by `style.width`. +* Unify Steps icon size. [#3817](https://github.com/ant-design/ant-design/issues/3817) +* Fix style details of Form, Button, Slider, Table. + +## 2.5.0 + +`2016-11-25` + +* Change the default theme to Alipay style and improve lots of style details. +* Supports server-side rendering. (`Mention` will throw warning for [draft-js](https://github.com/facebook/draft-js/issues/385)' issue) +* Introduce [Jest Snapshot](https://facebook.github.io/jest/docs/tutorial-react.html#snapshot-testing) to test the structure of components and SSR issues. +* Improve official website and documentation. +* Add [document](https://ant.design/docs/react/customize-theme) for customizing theme. +* Add [Sketch template files](https://ant.design/docs/resource/download). +* `LocaleProvider` supports Brazilian. [#4004](https://github.com/ant-design/ant-design/pull/4004) [@nathantn](https://github.com/nathantn) +* DatePicker + * DatePicker can determine whether to show "Today" button. [commit](https://github.com/ant-design/ant-design/commit/bbef274aae169d142e3e7e3ea0af922d48e6dd64) + * RangePicker can set presetted ranges. [demo](https://ant.design/components/date-picker/#components-date-picker-demo-presetted-ranges) + * Fix "Now" button doesn't work while `DatePicker[showTime]` is set. [#3748](https://github.com/ant-design/ant-design/issues/3748) + * Fix `RangePicker[format]` should work. [#3808](https://github.com/ant-design/ant-design/issues/3808) +* Add and update some icons. [#3977](https://github.com/ant-design/ant-design/pull/3977) +* New component `Input.Search`. [demo](https://ant.design/components/input/#components-input-demo-search-input) +* Mention onSelect event will get complete record. [#3867](https://github.com/ant-design/ant-design/issues/3867) +* Pagination can get current range. [demo](https://ant.design/components/pagination/#components-pagination-demo-total) +* Table + * We can control the visible of customized `filterDropdown`. [demo](https://ant.design/components/table/#components-table-demo-custom-filter-panel) + * Supports JSX-style columns. [demo](https://ant.design/components/table/#components-table-demo-jsx) + * Can listen the click event of table cell by `onCellClick`. [#3774](https://github.com/ant-design/ant-design/issues/3774) + * Fix border radius of head of border-less table. + * Fix that height of title and footer don't follow `Table[size]`. [commit](https://github.com/ant-design/ant-design/commit/9e6439b06cd099ab384a4a2f026f0def6e12bf23) + * Fix issue with selected status. [#3900](https://github.com/ant-design/ant-design/issues/3900) +* Upload + * Fix that children could not be `null`. + * Fix logic of preview. [commit](https://github.com/ant-design/ant-design/commit/e552880c32aaa3f5b0fb09a5e1fb7454c24d5378) +* Fix `z-index` of Badge. [#3898](https://github.com/ant-design/ant-design/issues/3898) +* Fix alignment of multi-line Checkbox. [#3971](https://github.com/ant-design/ant-design/issues/3971) [@flashback313](https://github.com/flashback313) +* Fix alignment of InputNumber while using with other form controls. [#3866(comment)](https://github.com/ant-design/ant-design/issues/3866#issuecomment-261148256) +* Fix style of `Menu.Divider`. [#3813](https://github.com/ant-design/ant-design/issues/3813) +* Fix that Popover should support Checkbox and Radio as children. [#3455](https://github.com/ant-design/ant-design/issues/3455) +* Fix height of `Select[combobox]`. [#3855](https://github.com/ant-design/ant-design/issues/3855) +* Fix style of actived Switch. [#3838](https://github.com/ant-design/ant-design/issues/3838) +* Fix that Transfer doesn't show "Not Found" while there is no search result. [#3996](https://github.com/ant-design/ant-design/issues/3996) +* Fix style of placeholder of TreeSelect. [#3841](https://github.com/ant-design/ant-design/issues/3841) +* Fix compile errors in TypeScript. [#3969](https://github.com/ant-design/ant-design/pull/3969) [@AlbertZheng](https://github.com/AlbertZheng) +* Fix that feedback icon should not affect users' operation. [#3891](https://github.com/ant-design/ant-design/issues/3891) + +## 2.4.3 + +`2016-11-17` + +* Fix errors in `Anchor` about querySelector, and make some experience Optimization .[#3832](https://github.com/ant-design/ant-design/issues/3832) [#3844](https://github.com/ant-design/ant-design/issues/3844) + +## 2.4.2 + +`2016-11-13` + +* Fix `Dropdown.Button` cannot popup menu.[#3815](https://github.com/ant-design/ant-design/issues/3815) + +## 2.4.1 + +`2016-11-11` + +* Fix `2.4.0` missing index files. + +## 2.4.0 + +`2016-11-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) +* Fix `Input` `suffix` mouse event responsive area. [#3714](https://github.com/ant-design/ant-design/issues/3714) +* Improve performance 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. + +## 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) +* Optimize `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` 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 support 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 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 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) + +## 2.1.0 + +`2016-10-16` + +- 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 + - 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 + - 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) + +## 2.0.1 + +`2016-10-01` + +- 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 support `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. + +## 2.0.0 + +`2016-09-28` + +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). + +### 2.x Major changes + +* 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 + +> We suggest you upgrade to lastest version of `2.x`. + +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 + - + + + + - + + + + - + + + ``` +* 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/4026221d451b246956983bb42140142d4a48b7d7) to see how to update. + + 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 + - + + {getFieldDecorator('userName', { ... })( + + + + )} + ``` + + 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.11.4 + +Visit [GitHub](https://github.com/ant-design/ant-design/blob/1.x-stable/CHANGELOG.md) to read change logs from `0.x` to `1.x`. diff --git a/CHANGELOG.md b/CHANGELOG.md deleted file mode 100644 index 588858250e..0000000000 --- a/CHANGELOG.md +++ /dev/null @@ -1,421 +0,0 @@ ---- -order: 3 -title: 更新日志 -toc: false -timeline: true ---- - -如果需要查看 `0.12.x` 及之前的更新日志，请移步 [GitHub](https://github.com/ant-design/ant-design/releases?after=1.0.0)。 - ---- - -## 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 受到社区的大量关注，使用的公司和产品持续增加，已经日趋成熟。这个版本我们重构了底层代码和站点，持续完善现有组件功能和优化细节，其中很多都来自社区的贡献，无法一一感谢，欢迎各位持续关注和鞭策。在升级过程中遇到任何问题，请及时反馈给我们。 - -### 主要变化 - -- **兼容 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) - -### 不兼容改动 - -此版本有部分不兼容的改动，升级时确保修改相应的使用代码。 - -- 推荐使用样式按需加载。如果依然需要整体载入样式，**样式入口文件已变为** `antd/dist/antd.css` 和 `antd/dist/antd.less`。如果你在项目中覆盖了 less 变量，less 文件的引用方式也有 [相应变更](https://github.com/ant-design/ant-design/issues/1558#issuecomment-218120000)。 - - ```diff - - import 'antd/lib/index.css'; // import 'antd/style/index.less'; - + import 'antd/dist/antd.css'; // import 'antd/dist/antd.less'; - ``` - -- 完全移除了 `0.12` 中废弃的 Validation 组件，可以直接 import [rc-form-validation](https://github.com/react-component/form-validation) 用以代替。[#1096](https://github.com/ant-design/ant-design/issues/1096) -- Breadcrumb.Item 的 `href` 属性被移除，请直接用 `a` 标签包裹可点击的内容。 -- Modal 移除了 `align` 属性，现在可以使用 `style` 属性调整位置。 -- `Modal.confirm` 等方法的配置项 `iconClassName` 重命名为 `iconType`。 -- Select 移除了 `onChange` 中的 `label` 参数，新增了 `labelInValue` 属性。[#1695](https://github.com/ant-design/ant-design/issues/1695) -- 移除了 `import { Form } from 'antd/lib/form';` 的用法，应统一为 `import { Form } from 'antd';` 或 `import Form from 'antd/lib/form';`。 - -#### 有兼容提示的改动 - -这里的改动在升级后控制台会出现警告提示，请按提示进行修改。 - -- 废弃 QueueAnim，可以直接 import [rc-queue-anim](https://github.com/react-component/queue-anim) 用以代替。Ant Design 的动效方案已移至 [Ant Motion](http://motion.ant.design/components/queue-anim)，欢迎前往探索。 -- Affix 的 `offset` 属性重命名为 `offsetTop`。 -- Popover 的 `overlay` 属性重命名为 `content`。 -- Progress.Line 使用方式改为 `` 或 ``。 -- Progress.Circle 使用方式改为 ``。 -- Spin 的 `spining` 属性更正为 `spinning`。 -- Alert 的 type `warn` 重命名为 `warning`。[#1225](https://github.com/ant-design/ant-design/issues/1225) -- Tree 的 `onExpand` 参数从 `function(node, expanded, expandedKeys)` 调整为 `function(expandedKeys, {expanded, node})`。 - -### Bug 修复 - -- 修复 Table 的 `size` 为 `middle` 时，分页器大小无法控制的问题。[#1396](https://github.com/ant-design/ant-design/issues/1396) -- 修复 Table 的 `pagination.defaultCurrent` 失效的问题。 -- 修复 Cascader 的 `defaultValue` 没有被 `value` 覆盖的问题。 -- 修复 Select 同时设置 `allowClear` `disabled` 时还是会出现清除按钮的问题。[#1480](https://github.com/ant-design/ant-design/issues/1480) -- 修复 Transfer 的 `DataSource` 变化时已选中项没有同步的问题。[#1587](https://github.com/ant-design/ant-design/issues/1587) -- 修复 DatePicker 日期格式与国际化配置不同步的问题。[#1509](https://github.com/ant-design/ant-design/issues/1509) -- 修复 Button 禁用时事件仍然会冒泡的问题。[#1541](https://github.com/ant-design/ant-design/issues/1541) -- 修复 Carousel 自动播放时的卡顿和报错问题。[#1397](https://github.com/ant-design/ant-design/issues/1397) -- 修复 Tabs 的 card 类型内嵌标准 Tabs 时的样式问题。[#1617](https://github.com/ant-design/ant-design/issues/1617) -- 修复 Menu `horizontal` 和 `vertical` 模式不支持受控 `openKeys` 的问题。 - -### 其他改进 - -- 样式变量梳理，去除了部分无用的变量，另外还有大量样式细节问题修复。 -- 依赖的 normalize.css 升级到 [4.x](https://github.com/necolas/normalize.css/blob/4.1.1/CHANGELOG.md)。 -- 使用 ES2016 classes 重构了代码。[@waywardmonkeys](https://github.com/waywardmonkeys) -- Popover、Popconfirm 和 Tooltip 组件根据不同的弹出位置有了更精准方向的弹出动画。 -- 补充 Select TreeSelect Switch Radio Checkbox 等组件的 `focus` 表现，增强表单组件的可用性。[#1358](https://github.com/ant-design/ant-design/issues/1358) -- message 和 notification 现在可以全局配置 `duration`。[#1143](https://github.com/ant-design/ant-design/issues/1143) -- DatePicker 和 TimePicker 的 `onChange(date, dateString)` 方法增加第二个参数用于获得格式化后的日期字符串。[#1104](https://github.com/ant-design/ant-design/issues/1104) -- DatePicker 和 DatePicker.RangePicker 现在可以设置内部 TimePikcer 的属性。[#1415](https://github.com/ant-design/ant-design/issues/1415) -- Checkbox - - 支持类似 Radio 的使用方式 `option`。[#1029](https://github.com/ant-design/ant-design/issues/1029) - - Checkbox.Group 现在允许 `label` 和 `value` 不同。[#1025](https://github.com/ant-design/ant-design/issues/1025) - - Checkbox.Group 允许单独设置某个 Checkbox 为 `disabled`。[#1218](https://github.com/ant-design/ant-design/issues/1218) -- Breadcrumb - - 支持路由模式下自定义链接 `linkRender`。[#1026](https://github.com/ant-design/ant-design/issues/1026) - - 支持路由模式下自定义最后一项内容 `nameRender`。[#1304](https://github.com/ant-design/ant-design/issues/1304) -- Modal - - 新增 `Modal.warning` 方法。 - - 弹出时背景不再跟随滚动。[#1195](https://github.com/ant-design/ant-design/issues/1195) -- Select - - 搜索框和单选选择框合并，以优化视觉和交互效果。 - - 优化多选框的选中效果。 -- Spin - - 增加延时展示以优化体验。[#1273](https://github.com/ant-design/ant-design/issues/1273) - - 增加 `tip` 属性用于定义加载文案。[#1046](https://github.com/ant-design/ant-design/issues/1046) -- Steps - - 重构布局方式，以支持更灵活的自适应布局和优化了性能，并移除了 `maxDescriptionWidth` 属性。[#1099](https://github.com/ant-design/ant-design/issues/1099) - - 新增 `status` 属性以指定当前步骤状态，同时支持错误步骤的展示。[#1098](https://github.com/ant-design/ant-design/issues/1098) -- Timeline - - 新增 `dot` 属性，可自定义时间轴点。 - - 现在可以设置 `className` 和 `style` 的问题。 - - `color` 属性现在支持自定义色值。 -- Tree - - 当子节点被选中时，自动展开父节点。 - - 新增 `checkStrictly` 属性，支持父子节点选中关系脱离。 -- Upload - - 在上传文件列表中的文件被删除时，将触发 `onRemove` 事件。[#1240](https://github.com/ant-design/ant-design/issues/1240) - - 增加 `onPreview` 支持文件的自定义预览方式。[#1240](https://github.com/ant-design/ant-design/issues/1240) - - `data` 属性支持设为一个函数，用于动态修改上传参数。[react-component/upload#32](https://github.com/react-component/upload/pull/32) -- Slider `marks` 现在支持 JSX 并可以单独设置某个标记的样式。 -- Tag 的 `onClose` 可以使用 `e.preventDefault()` 阻止默认事件。[#1267](https://github.com/ant-design/ant-design/issues/1267) -- Form.Item 在有多个 child 时也可以自动生成错误信息与校验状态，但一个 Form.Item 内仍然只能有一个表单控件。[#1287](https://github.com/ant-design/ant-design/issues/1287) -- Input 新增 `onPressEnter` 属性监听回车事件。 -- Table 现在可以通过 `filteredValue` `sortOrder` 控制筛选和排序的状态。[#971](https://github.com/ant-design/ant-design/issues/971) -- Button 增加了 `icon` 属性。[#1199](https://github.com/ant-design/ant-design/issues/1199) -- SubMenu 增加 `onTitleClick` 属性。 -- Affix 增加 `offsetBottm` 属性，支持固定在底部。[#1000](https://github.com/ant-design/ant-design/issues/1000) - -### 相关工具发布 - -- [antd-init](http://github.com/ant-design/antd-init) 同步发布 `1.0.0` 版本，享受最新 [ant-tool](https://github.com/ant-tool/) 工具带来的流畅开发体验。 -- [Ant Motion](http://motion.ant.design) 全新的动效设计解决方案。 -- [Ant UX](http://ux.ant.design/) 发布 1.0 版本，提供多种平台的流程素材支持。 - -## 0.12.17 - -去 [GitHub](https://github.com/ant-design/ant-design/releases?after=1.0.0) 查看 `0.12.x` 及之前的更新日志。 diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md new file mode 100644 index 0000000000..569064a809 --- /dev/null +++ b/CHANGELOG.zh-CN.md @@ -0,0 +1,839 @@ +--- +order: 6 +title: 更新日志 +toc: false +timeline: true +--- + +`antd` 严格遵循 [Semantic Versioning 2.0.0](http://semver.org/lang/zh-CN/) 语义化版本规范。 + +#### 发布周期 + +* 修订版本号：每周末会进行日常 bugfix 更新。（如果有紧急的 bugfix，则任何时候都可发布） +* 次版本号：每月发布一个带有新特性的向下兼容的版本。 +* 主版本号：含有破坏性更新和新特性，不在发布周期内。 + +如果需要查看 `2.0.0` 之前的更新日志，请移步 [GitHub](https://github.com/ant-design/ant-design/blob/1.x-stable/CHANGELOG.md)。 + +--- + +## 2.9.0 + +`2017-04-01` 👻 + +- 默认字体中数字设为等宽，方便进行纵向比较。[b526083](https://github.com/ant-design/ant-design/commit/b526083fa6a619113a3d26c4f4f092a8648f3bd4) +- Select + - 新增 `mode` 参数，废弃 `tags|combobox|multiple` 属性，使用 `mode={tags|combobox|multiple}` 来代替。 + - `tags|multiple` 模式现在支持配置 `allowClear` 清除按钮。[#4843](https://github.com/ant-design/ant-design/issues/4843) +- Progress 新增 `dashboard` 仪表盘类型。[#5225](https://github.com/ant-design/ant-design/issues/5225) [@qiaolb](https://github.com/qiaolb) +- Tree 新增 `showLine` 属性，支持纵向连接线展示。[#3854](https://github.com/ant-design/ant-design/issues/3854) +- TimePicker 支持 12 小时制：`use12Hours`。[#4063](https://github.com/ant-design/ant-design/issues/4063) +- Table 支持 `column.filterIcon`，支持使用自定义筛选菜单时自定义图标。[#5293](https://github.com/ant-design/ant-design/pull/5293) +- Spin 新增 `wrapperClassName`，方便给包裹形态的加载条增加类名。[#5425](https://github.com/ant-design/ant-design/pull/5425) [@aaronplanell](https://github.com/aaronplanell) +- Tabs 新增点击左右切换箭头的回调 `onPrevClick` `onNextClick`。[#4395](https://github.com/ant-design/ant-design/issues/4395) +- InputNumber 新增 `parser` 属性，用于有时指定了 `formatter` 时需要解析出数字。[#5178](https://github.com/ant-design/ant-design/pull/5178#issuecomment-284557933) +- 国际化 + - 新增日语。[#5529](https://github.com/ant-design/ant-design/pull/5529) [@novi](https://github.com/novi) + - 新增斯洛伐克语。[#5304](https://github.com/ant-design/ant-design/pull/5304) [@Kamahl19](https://github.com/Kamahl19) + - 新增爱沙尼亚语。[#5266](https://github.com/ant-design/ant-design/pull/5266) [@madisvain](https://github.com/madisvain) + - 新增土耳其语。[#5536](https://github.com/ant-design/ant-design/pull/5536) [@c0b41](https://github.com/c0b41) +- TypeScript + - 参照 react-slick 补充 Carousel 的定义。 + - 修复 Form 的部分定义。 + - 修正 `getPopupContainer` 定义。 +- 允许分开禁用 Tabs 的高亮条和面板的切换动画。[#5089](https://github.com/ant-design/ant-design/issues/5089) [@xieguanglei](https://github.com/xieguanglei) +- Button 的 `loading` 属性支持 `{ delay: 1000 }` 的形式，默认不再延迟切换状态 。[#5365](https://github.com/ant-design/ant-design/issues/5365) +- 增加 Card 头部的 less 变量。[#5354](https://github.com/ant-design/ant-design/pull/5354) [@kossel](https://github.com/kossel) +- 修复 Breadcrumb 没有设置 `breadcrumbName` 时分隔符多余的问题。 +- 修复 Dropdown.Button 的 `Unknown prop placement` 警告信息。[#5594](https://github.com/ant-design/ant-design/issues/5594) +- 修复 RangePicker 和 InputNumber 的占位文字颜色。 +- 修复 Cascasder 搜索模式下无法使用退格键的问题。[#5340](https://github.com/ant-design/ant-design/issues/5340) +- 修复 LocaleProvider 有时对 `Modal.confirm` 失效的问题。[#5493](https://github.com/ant-design/ant-design/issues/5493) [@hargasinski](https://github.com/hargasinski) +- 修复 BackTop 设置了 `target` 时滚动动效消失的问题。[#5564](https://github.com/ant-design/ant-design/issues/5564) +- 优化 Pagination 的样式实现。[#5557](https://github.com/ant-design/ant-design/issues/5557) + +## 2.8.3 + +`2017-03-27` + +- TypeScript + - 修复 `AutoComplete[filterOption]` 定义缺失的问题。[#5393](https://github.com/ant-design/ant-design/pull/5393) [@mitchelldemler](https://github.com/mitchelldemler) + - 修复 `getPopupContainer` `getCalendarContainer` `getTooltipContainer` `getSuggestionContainer` 等的定义问题。[322e9ef](https://github.com/ant-design/ant-design/commit/322e9efdc9db28bd92230fc690f1fdf5a72cf7cd) + - 优化 `Form.create` 的定义。[#5420](https://github.com/ant-design/ant-design/pull/5420) [@infeng](https://github.com/infeng) +- 修复 Badge 在 Maxthon 内的兼容性问题。[#5477](https://github.com/ant-design/ant-design/issues/5477) +- 修复 Button 内无法使用 `null` `undefined` 的问题。[#5472](https://github.com/ant-design/ant-design/issues/5472) [@blade254353074](https://github.com/blade254353074) +- Breadcrumb 不再强依赖于 `route.breadcrumbName` [ac1c7f3](https://github.com/ant-design/ant-design/commit/ac1c7f312bc46ba6ef7aacace43e4ac99b87dd54) +- 修复 `Form.Item[hasFeedback]` 与 `Input[prefix]` 混用时的样式问题。[#5456](https://github.com/ant-design/ant-design/issues/5456) [@william-yz](https://github.com/william-yz) +- 修复 Layout.Content 与 Carousel 一起使用时的样式问题。[#5415](https://github.com/ant-design/ant-design/issues/5415) +- LocaleProvider + - 修复对德语支持不完善的问题。[#5387](https://github.com/ant-design/ant-design/pull/5387) [@Knacktus](https://github.com/Knacktus) + - 修复对俄语支持不完善的问题。[#5406](https://github.com/ant-design/ant-design/pull/5406) [@plandem](https://github.com/plandem) + - 修复不支持 Upload 的问题。[#5388](https://github.com/ant-design/ant-design/pull/5388) [@natergj](https://github.com/natergj) +- 修复 Menu 内 Icon 动画效果与文字不一致的问题。[#5495](https://github.com/ant-design/ant-design/issues/5495) +- 修复 `Modale[footer]` 无法置空的问题。[#5462](https://github.com/ant-design/ant-design/issues/5462) +- 修复 `2.8.2` 引入的 Pagination 在 `IE<=10` 下样式丢失的问题。[#5484](https://github.com/ant-design/ant-design/issues/5484) +- 修复 Popover 内使用 Table 时会意外关闭的问题。[#5407](https://github.com/ant-design/ant-design/issues/5407) +- 去掉 Radio 只能作为 Radio.Group 的直接后代的限制。[#5443](https://github.com/ant-design/ant-design/issues/5443) +- 修复 Switch 在 Form.Item 内使用时的 warning。[#5368](https://github.com/ant-design/ant-design/issues/5368) +- Table 的选择全部菜单现在默认隐藏，`selections` 设置为 true 时展现。[#5246](https://github.com/ant-design/ant-design/issues/5246) [@infeng](https://github.com/infeng) +- 新增 `@info-color` 主题变量。[#5442](https://github.com/ant-design/ant-design/issues/5442) +- 现在可以通过 `NODE_ENV=test` 来禁用测试时 antd 全量加载的 warning。[#5345](https://github.com/ant-design/ant-design/issues/5345) +- 升级 moment 到 `2.18.0`。 + +## 2.8.2 + +`2017-03-19` + +- 发布了新的 [设计基础文档](https://ant.design/docs/spec/colors-cn)。 +- 修复使用 Modal.confirm 时报错的问题。[#5269](https://github.com/ant-design/ant-design/issues/5269)。 +- 修复 Upload 的蒙层样式 [#5275](https://github.com/ant-design/ant-design/issues/5275)。 +- 修复 Upload 上传进度条不显示的问题 [#5323](https://github.com/ant-design/ant-design/issues/5323)。 +- 修复 Table 的分页的 showTotal 数据错误的问题 [#5259](https://github.com/ant-design/ant-design/issues/5259)。 +- 修复了 Popconfirm 与 Button 同时使用时的样式问题 [5301](https://github.com/ant-design/ant-design/issues/5301)。 +- 修复 Radio 的一个样式问题 [#5336](https://github.com/ant-design/ant-design/pull/5336)。 +- 修复 Message 的 getContainer 无法使用的问题 [#5380](https://github.com/ant-design/ant-design/issues/5380)。 +- 修复 Checkbox 和 Radio 标签的文字对齐 [696a3c0](https://github.com/ant-design/ant-design/commit/696a3c0e34156d78e87d629a3f0f8703af1f03ec)。 +- 调整了 Spin 的动画 [fa1e031](https://github.com/ant-design/ant-design/commit/fa1e031a7396c61fa9709a0c46fe63200c35d232)。 +- 调整了 Mention 的一些样式 [240a93c](https://github.com/ant-design/ant-design/commit/240a93cee25bc8c6ad4520cd907a14a7b22ed773)。 + +## 2.8.1 + +`2017-03-11` + +- **DatePicker** 优化了带时间的 DatePicker 的选择行为，并修复父组件 state 变化导致无法选中的问题。[#5189](https://github.com/ant-design/ant-design/issues/5189) [@megawac](https://github.com/megawac) +- **Form** + - 补充了校验规则相关文档。[#5201](https://github.com/ant-design/ant-design/issues/5201) + - 修复了一些样式问题。[#5196](https://github.com/ant-design/ant-design/issues/5196) [#5236](https://github.com/ant-design/ant-design/issues/5236) [#5222](https://github.com/ant-design/ant-design/issues/5222) +- **Icon** 增加 `shake` 和 `android-o` 图标。[commit/941782](https://github.com/ant-design/ant-design/commit/941782f7ec000a9054c3bc945ab887f93ab46749) +- **Input** 修复有 `addonBefore` 时 `hasFeedback` 失效的问题。[#5228](https://github.com/ant-design/ant-design/issues/5228) +- **InputNumber** 补充缺失的 type 定义。[#5240](https://github.com/ant-design/ant-design/issues/5240) [@hlehmann](https://github.com/hlehmann) +- **Modal** 支持点击 esc 调用 `onCancle`。[#5203](https://github.com/ant-design/ant-design/issues/5203) [@elios264](https://github.com/elios264) +- **Table** + - 补充缺失的 type 定义。[#5206](https://github.com/ant-design/ant-design/issues/5206) [@kvey](https://github.com/kvey) + - 修复小号表格无数据时右边线缺失的问题。[#5237](https://github.com/ant-design/ant-design/issues/5237) + - 修复表头分组时排序失效的问题。[#5158](https://github.com/ant-design/ant-design/issues/5158) +- **Tooltip** 修复 Trigger 为绝对定位且禁用的按钮时失效的问题。[#5254](https://github.com/ant-design/ant-design/issues/5254) +- **Upload** + - 修复上传文件名字过长时的样式问题。[commit/0a3519](https://github.com/ant-design/ant-design/commit/0a35197a35513ca45308bb7163c8243b75dd6f8d) + - 修复并优化了动画。[pull/5210](https://github.com/ant-design/ant-design/pull/5210) + - 支持覆盖 `onProgress`。[pull/5260](https://github.com/ant-design/ant-design/pull/5260) [@minwe](https://github.com/minwe) +- **全局性优化** + - 修复 `lodash.debounce` 依赖缺失问题。[#5230](https://github.com/ant-design/ant-design/issues/5230) +- **网站** + - 修复 safari 语言检测失效的问题。[pull/5245](https://github.com/ant-design/ant-design/pull/5245) + - 色板支持点击复制色号。[pull/5247](https://github.com/ant-design/ant-design/pull/5247) [@bsheikh](https://github.com/bsheikh) + - 增加脚手架示例。[commit/f2f786](https://github.com/ant-design/ant-design/commit/f2f786d66d75eebef8406a72db8a15e1640cea1f) + +## 2.8.0 + +`2017-03-06` + +- Tabs + - 新增 `tabBarStyle` 用于自定义 tabBar 的样式。[#4966](https://github.com/ant-design/ant-design/issues/4966) + - 新增 `TabPane[closable]` 用于设置是否显示删除按钮。[#4807](https://github.com/ant-design/ant-design/pull/4807) [@lixiaoyang1992](https://github.com/lixiaoyang1992) +- Anchor + - 新增 `showInkInFixed` 用于设置在 fixed 状态下是否圆形图标。[#4960](https://github.com/ant-design/ant-design/pull/4960) + - 修复 `children` 不是 AnchorLink 时会报错的问题。[#5129](https://github.com/ant-design/ant-design/issues/5129) +- Table + - 新增反选功能并允许自定义全选选项。[#4962](https://github.com/ant-design/ant-design/pull/4962) + - `spin` 属性支持所有 Spin 的属性。[#4824](https://github.com/ant-design/ant-design/pull/4824) [@lixiaoyang1992](https://github.com/lixiaoyang1992) + - 修正 `size` 是 `small` 的时候表头没有底边框的问题。[#5182](https://github.com/ant-design/ant-design/issues/5182) +- Mention 新增自定义触发字符的支持。[demo](https://ant.design/components/mention-cn/#components-mention-demo-multiple-trigger) + - ![Mention animation](https://zos.alipayobjects.com/rmsportal/QDYwAbwKrqOUOykRaNai.gif) +- Rate + - 支持自定义字符。[demo](https://ant.design/components/rate-cn/#components-rate-demo-charactor) + - 新增 `className` 属性。 +- Layout + - 新增 `顶部-侧边布局-通栏` 的例子。[demo](http://ant.design/components/layout-cn/#components-layout-demo-top-side-2) + - 新增 `固定头部` 的例子。[demo](https://ant.design/components/layout-cn/#components-layout-demo-fixed) + - Sider 新增 `breakpoint` 用于设置响应式展示。[#4931](https://github.com/ant-design/ant-design/pull/4931) +- Form + - 新增 `layout` 属性用于取代原有的 `horizontal`、`vertical`、`inline`。[#5056](https://github.com/ant-design/ant-design/issues/5056) +- Calendar + - 新增 `dateFullCellRender` 和 `monthFullCellRender` 用于覆盖单元格的内容。[#5138](https://github.com/ant-design/ant-design/pull/5138) [@wonyun](https://github.com/wonyun) + - 新增 `onSelect` 用于日期选择功能。[demo](https://ant.design/components/calendar-cn/#components-calendar-demo-select) +- AutoComplete + - 修复在 Form.Item 里不对齐的问题。[#5139](https://github.com/ant-design/ant-design/issues/5139) + - 新增 `查询模式 - 确定类目` 的例子。[demo](https://ant.design/components/auto-complete-cn/#components-auto-complete-demo-uncertain-category) +- Col 新增 `xl` 属性，支持 1600px 的响应布局断点。[#4796](https://github.com/ant-design/ant-design/pull/4796) [@hjin-me](https://github.com/hjin-me) +- Upload 新增 `locale` 支持国际化文案定义。[#4697](https://github.com/ant-design/ant-design/issues/4697) +- Transfer 新增 `onScroll` 支持动态加载数据。[#4188](https://github.com/ant-design/ant-design/issues/4188) +- message 和 notification 新增 `getContainer` 参数支持自定义消息渲染的容器。[#5019](https://github.com/ant-design/ant-design/issues/5019) +- Badge 新增 `showZero` 支持设置是否显示 `0`。[#4251](https://github.com/ant-design/ant-design/issues/4251) +- InputNumber + - 新增 `formatter` 用于格式化展示的值。 + - 新增组合键的支持。[详细](https://github.com/react-component/input-number#keyboard-navigation) +- 新增大量图标。[#5107](https://github.com/ant-design/ant-design/pull/5107) +- 新增语言支持： + - 荷兰语 [#4785](https://github.com/ant-design/ant-design/pull/4785) [@corneyl](https://github.com/corneyl) + - 加泰罗尼亚语 [#4929](https://github.com/ant-design/ant-design/pull/4929) [@aaronplanell](https://github.com/aaronplanell) + - 捷克语 [#5169](https://github.com/ant-design/ant-design/pull/5169) [@martinnov92](https://github.com/ant-design/ant-design/pull/5169) + - 韩语/朝鲜语 [#5141](https://github.com/ant-design/ant-design/pull/5141) [@minsungryu](https://github.com/ant-design/ant-design/pull/5141) +- 优化 Spin 显示位置。[#4722](https://github.com/ant-design/ant-design/issues/4722) +- 优化 Checkbox 以兼容 `browser-sync`。[#2744](https://github.com/ant-design/ant-design/issues/2744) +- 修复 Steps 在窗口变化时的宽度问题。[#5083](https://github.com/ant-design/ant-design/issues/5083) +- 修复 Upload.Dragger unmount 时会报错的问题。[#5162](https://github.com/ant-design/ant-design/issues/5162) +- 修复 Button 里的文字在 IE 下点击时会移动的问题。 +- 修复 Input 的前缀跟后缀的垂直居中对齐问题。 + +## 2.7.4 + +`2017-02-28` + +- 修复 TreeSelect 多选框无法展现的问题。[#5092](https://github.com/ant-design/ant-design/issues/5092) +- 修复 Anchor 的 `e.stopPreventDefault is not a function` 的报错。[#5080](https://github.com/ant-design/ant-design/issues/5080) +- 修复 Input、Cascader、Upload 的一些样式细节。 + +## 2.7.3 + +`2017-02-25` + +- 演示代码统一为 ES6 class 的写法。[#4878](https://github.com/ant-design/ant-design/issues/4878) +- TypeScript + - 修复 `Cannot find module '../../package.json'` 的问题。[#4935](https://github.com/ant-design/ant-design/issues/4935) + - 补充了 Table、RangePicker 和 Upload 的部分属性定义。 +- 修复了 Modal `onOk` `afterClose` 和 Popconfirm `onConfirm` `onCancel` 缺少点击 event 参数的问题。 [#4787](https://github.com/ant-design/ant-design/issues/4787) +- 优化 Menu[inline] 和 Collapse 的折叠动画效果。 +- 优化了 Checkbox 和 Radio 的垂直对齐样式。 +- Table + - 修复固定列时列头样式错位的问题。[#4936](https://github.com/ant-design/ant-design/issues/4936) + - 修复未清除浮动导致排版错位的问题。[#4945](https://github.com/ant-design/ant-design/issues/4945) + - 修复筛选子菜单无法显示的问题。[#4975](https://github.com/ant-design/ant-design/issues/4975) + - 修复固定列上的自定义筛选菜单无法交互的问题。[#5010](https://github.com/ant-design/ant-design/issues/5010) + - 修正 `pagination.onChange` 和 Pagination 的 `onChange` 参数不一致的问题。 + - 修复加载状态切换不柔和的问题。[#4934](https://github.com/ant-design/ant-design/issues/4934) +- 优化多个 message 展示重叠的问题。[#3543](https://github.com/ant-design/ant-design/issues/3543) +- 修复 Carousel 在改变浏览器窗口大小后 autoplay 会失效的问题。[#2550](https://github.com/ant-design/ant-design/issues/2550) +- 修复了 InputNumber 在受控模式（Form 表单内）无法输入 `1.01` `1.001` 等数字的问题。[#5012](https://github.com/ant-design/ant-design/issues/5012) +- 优化 Button 加载状态切换时的宽度抖动问题。[#4913](https://github.com/ant-design/ant-design/issues/4913) +- 修复 Dropdown 的菜单选中样式和 `Menu[theme="dark"]` 样式无效的问题。[#5013](https://github.com/ant-design/ant-design/issues/5013) [#4903](https://github.com/ant-design/ant-design/issues/4903) +- 修复 Menu 的弹出菜单的 `z-index` 问题。[#4937](https://github.com/ant-design/ant-design/issues/4937) +- 修复 DatePicker 和 RangePicker 无法设置小于 300px 的宽度的问题。[#4920](https://github.com/ant-design/ant-design/issues/4920) +- 修复 Spin 内嵌 Spin 的样式问题。[#4971](https://github.com/ant-design/ant-design/issues/4971) +- 修复了使用 babel-plugin-import 引入 Popconfirm 时，未引入 Button 样式的问题。 +- 修复了样式变量在 Progress `type="circle"` 上未生效的问题。[#5002](https://github.com/ant-design/ant-design/issues/5002) +- 修复了 Breadcrumb 的 chilren 为 `null` 或 `undefined` 时报错的问题。[#5015](https://github.com/ant-design/ant-design/issues/5015) +- 修复 Slider 的 tooltip 闪烁的问题。[#5003](https://github.com/ant-design/ant-design/issues/5003) +- 修复了 Transfer 中 disabled 选项仍然可以被移动的问题。[#4981](https://github.com/ant-design/ant-design/pull/4981) [@tianlizhao](https://github.com/tianlizhao) +- 文档 + - 修复和优化了移动端的展现。 + - 优化了 1.x 升级到 2.x 的不兼容改动文档。 + +## 2.7.2 + +`2017-02-17` + +- 修复 `antd.version` 无法正常使用的问题。 [#4844](https://github.com/ant-design/ant-design/issues/4844) +- 修复 dist 文件没有 locales 的问题。 [#4910](https://github.com/ant-design/ant-design/pull/4910) +- 修复 Cascader 搜索模式下可以选择已禁用选项的问题。 [#4699](https://github.com/ant-design/ant-design/issues/4699) +- **Button** + - 修复 `Button[type=danger]` 的点击动画。 + - 修复设置 `loading` 时的样式问题。 [#4875](https://github.com/ant-design/ant-design/issues/4875) +- **Menu** + - 修复 `vertical` 模式下 `openKeys` 为受控属性。 [#4876](https://github.com/ant-design/ant-design/issues/4876) + - 修复 Menu.Item 选中时的动画问题。 + - 修复 Menu.SubMenu 的样式问题。 [#4906](https://github.com/ant-design/ant-design/issues/4906) +- **Table** + - 修复在混合使用固定表头和小尺寸时的样式问题。 [#4850](https://github.com/ant-design/ant-design/issues/4850) + - 修复无数据时的占位符样式问题。 [#4851](https://github.com/ant-design/ant-design/pull/4851) + - 精简了 DOM 结构。 [#4868](https://github.com/ant-design/ant-design/issues/4868) +- 修复 Radio 组件 children 无法为数字 `0` 的问题。 [#4874](https://github.com/ant-design/ant-design/issues/4874) [@HQidea](https://github.com/HQidea) +- 修复 RangePicker `style.width` 无法小于 300 的问题。 [#4920](https://github.com/ant-design/ant-design/issues/4920) +- 修复 Spin 样式在打包时会导致编译错误的问题。 [#4915](https://github.com/ant-design/ant-design/issues/4915) +- 修复 Chrome 下 Tooltip 无法在 disabled 的按钮上使用的问题。 [#4865](https://github.com/ant-design/ant-design/pull/4865) +- 修复 Tree 节点在拖动时会导致整棵树抖动的问题。 [#4858](https://github.com/ant-design/ant-design/issues/4858) +- 修复 Upload 上传失败的样式问题。 [#4810](https://github.com/ant-design/ant-design/issues/4810) +- 修复 `Menu[vertical]` 和 Layout.Sider 配合使用时二级菜单无法弹出的问题。 [#4890](https://github.com/ant-design/ant-design/issues/4890) +- 优化 Button、`Badge[status=processing]` 的动画。 + +![Badge animation](https://camo.githubusercontent.com/6874b2333f2fac3fac346404c6e70684e4dafc1a/68747470733a2f2f7a6f732e616c697061796f626a656374732e636f6d2f726d73706f7274616c2f73516b72756c716346734b4e54785158615971512e676966) +![Button animation](https://camo.githubusercontent.com/3963d12b45de4f522c2799361dbc3177e7bd93d1/68747470733a2f2f7a6f732e616c697061796f626a656374732e636f6d2f726d73706f7274616c2f46624b776d636f766d795364666c557468494e522e676966) + +## 2.7.1 + +`2017-02-10` + +- **Affix** + - 修复 hover 时元素被隐藏的问题。[#4800](https://github.com/ant-design/ant-design/issues/4800) + - 修复 event listener 未被正确移除的问题。[#4755](https://github.com/ant-design/ant-design/issues/4755) + - 修复快速滚动时不能正确复位的问题。[#4760](https://github.com/ant-design/ant-design/issues/4760) +- **Anchor** 修复了有 offsetTop 时的定位问题。[#4706](https://github.com/ant-design/ant-design/issues/4706) +- **AutoComplete** + - 修复了 size 问题。[#4766](https://github.com/ant-design/ant-design/issues/4766) + - 修复了自动加入其他字符的问题。[#4778](https://github.com/ant-design/ant-design/issues/4778) +- **Dropdown** 补充了之前缺失的弹出框位置设定相关的文档及示例。[#4811](https://github.com/ant-design/ant-design/issues/4811) +- **Layout** 修复了侧边布局动效不平滑的问题。[#4752](https://github.com/ant-design/ant-design/issues/4752) +- **LocaleProvider** 修复了瑞典语相关问题。[pull-4762](https://github.com/ant-design/ant-design/pull/4762) [@JesperWe](https://github.com/JesperWe) +- **RangePicker** 修复了图标与表单校验反馈图标重叠的问题。[#4783](https://github.com/ant-design/ant-design/issues/4783) [@zhenzong](https://github.com/zhenzong) +- **Table** + - 修复了 size 定义里没有 'middle' 的问题。[#4819](https://github.com/ant-design/ant-design/pull/4819) [@warrenseymour](https://github.com/warrenseymour) + - 修复过滤功能在 JSX 模式下不生效的问题。[#4759](https://github.com/ant-design/ant-design/issues/4759) + - 修复分页跳转问题。[#4779](https://github.com/ant-design/ant-design/issues/4779) +- **Tabs** 修复了在 IE9 中从第二个标签页起都显示空白的问题。[#4795](https://github.com/ant-design/ant-design/issues/4795) +- **rc-pagination** 升级至 ~1.7.0，onChange 增加 pageSize 参数。 +- **全局性优化** + - 修复或优化了一些了文档，链接，样式细节。 + - 接入 stylelint 以替代 lesslint，修复一些 lint 问题。[#2179](https://github.com/ant-design/ant-design/issues/2179) + - border-radius 统一为 4px。[#4772](https://github.com/ant-design/ant-design/issues/4772) + - 支持 `import { version } from 'antd'`。[#4751](https://github.com/ant-design/ant-design/pull/4751) +- **网站** + - 首页自动选择语言。[#4552](https://github.com/ant-design/ant-design/issues/4552) + - 接入 Google 作为文档的全文本搜索。[#4814](https://github.com/ant-design/ant-design/issues/4814) + - 改变版本切换 Select 的位置。[pull-4799](https://github.com/ant-design/ant-design/pull/4799) + +## 2.7.0 + +`2017-02-03` + +* Button 新增 `danger` 和 `ghost` 属性。[#4679](https://github.com/ant-design/ant-design/pull/4679) +* AutoComplete 支持自定义输入框的用法。 [#4483](https://github.com/ant-design/ant-design/pull/4483) +* 升级了 rc-cascader 到 0.11.0，支持键盘操作。[#4411](https://github.com/ant-design/ant-design/pull/4411) +* notification 支持更多弹出方向。[#4732](https://github.com/ant-design/ant-design/pull/4700) +* 升级了 rc-steps 到 2.3.0，Steps 新增 `progressDot` 属性，支持自定义点状步骤条的样式。[#4659](https://github.com/ant-design/ant-design/pull/4659) +* 升级了 rc-input-number 到 3.0.0 + * 现在输入时也会触发 `onChange`。[#4265](https://github.com/ant-design/ant-design/pull/4265) + * 修复了 `onKeyUp` 事件。[#4717](https://github.com/ant-design/ant-design/issues/4717) +* Slider 增加 `veritical` 模式。[#4473](https://github.com/ant-design/ant-design/pull/4473) +* Tag + - 增加了预设颜色。[#4571](https://github.com/ant-design/ant-design/pull/4571) + - 调整了垂直对齐和默认间距。 +* 添加了对德语的支持。[#4686](https://github.com/ant-design/ant-design/pull/4686) +* 添加了对瑞典语的支持。[#4455](https://github.com/ant-design/ant-design/pull/4455) +* 添加了对法语的支持。[#4538](https://github.com/ant-design/ant-design/pull/4538) +* Transfer 添加了 `onSearchChange` 回调。 [#4464](https://github.com/ant-design/ant-design/pull/4464) +* Modal.confirm 添加了 maskClosable 配置项。[#4488](https://github.com/ant-design/ant-design/pull/4488), [#4488](https://github.com/ant-design/ant-design/pull/4490) +* Form + * 增加 `options.onValuesChange` 参数，可用于代替会触发多次 `options.onFieldsChange`。[#2934](https://github.com/ant-design/ant-design/pull/2934) + * 增加 `props.form.getFieldsError` `props.form.isFieldTouched` `props.form.isFieldsTouched` 三个方法，可用于提交表单按钮的禁用展示。 [#4374](https://github.com/ant-design/ant-design/issues/4374) + * 增加 `hideRequiredMark` 属性。[#4732](https://github.com/ant-design/ant-design/pull/4732) +* 改进了 Upload 的列表图片预览。 [#4516](https://github.com/ant-design/ant-design/pull/4516) +* 升级了 rc-select 到 6.7.1。 + * 修复了 Select 的 `onChange` 回调重复触发的问题。[#156@rc-select](https://github.com/react-component/select/pull/156) + * 修复了 Select 显示初始化值的问题。[#152@rc-select](https://github.com/react-component/select/pull/152) +* 升级 rc-tree-select 到 `1.9.0`。 + * 新增 `treeDefaultExpandedKeys` 属性。[#43@rc-tree-select](https://github.com/react-component/tree-select/pull/43) + * 修复了文字溢出换行问题。[#42@rc-tree-select](https://github.com/react-component/tree-select/pull/42) +* 新增 less 变量: `@border-style-base` `@border-width-base` `@btn-danger-color` `@btn-danger-bg` 等。 +* 修复了 Badge 在页面放大时错位的问题。[#4747](https://github.com/ant-design/ant-design/issues/4747) [#4290](https://github.com/ant-design/ant-design/issues/4290) +* 修复一个固定表头的表格错位问题。[#4750](https://github.com/ant-design/ant-design/issues/4750) +* 修复一个 IE 下表格滚动时卡顿的问题。[#4522](https://github.com/ant-design/ant-design/issues/4522) +* 添加别名以修正图标命名风格：`addfile` => `file-add`，`addfolder` => `folder-open`，原有的命名依然有效。[#4758](https://github.com/ant-design/ant-design/issues/4758) + +## 2.6.4 + +`2017-01-20` + +* 优化 RangePicker 选择预设时间时的界面显示。[#4561](https://github.com/ant-design/ant-design/issues/4561) +* 修复 DatePicker 选择时间界面的滚动问题。[#4412](https://github.com/ant-design/ant-design/issues/4412) +* 修复 Menu 在 `vertical` 的受控模式下，子菜单不会弹出的问题。[#3783](https://github.com/ant-design/ant-design/issues/3783) +* 修复 Cascader 禁用时的值显示样式问题。[#4648](https://github.com/ant-design/ant-design/issues/4648) +* Table + * 优化固定表头的滚动条显示。[#4637](https://github.com/ant-design/ant-design/issues/4637) + * 修复在 Safari 下显示 loading 效果时表头会闪烁的问题。[#4622](https://github.com/ant-design/ant-design/issues/4622) + * 修复多处边框问题。[#4647](https://github.com/ant-design/ant-design/issues/4647)、[#4635](https://github.com/ant-design/ant-design/issues/4635) + * 修复 showHeader 的默认值不为 `false` 的问题。[#4658](https://github.com/ant-design/ant-design/issues/4658) + * 修复找不到 `TableColumnConfig` 的类型定义的问题。[#4660](https://github.com/ant-design/ant-design/issues/4660) + +## 2.6.3 + +`2017-01-15` + +* 修复 `2.6.2` 中 Popconfirm 不可用的问题。[#4606](https://github.com/ant-design/ant-design/issues/4606) + +## 2.6.2 + +`2017-01-14` + +* 新增社区精选组件页面。[链接](/docs/react/recommendation) +* 修复一个内容过长导致 Layout 侧边布局错位的问题。[#4459](https://github.com/ant-design/ant-design/issues/4459) +* 修复 Input.Search 输入框和图标错位的问题。[#4540](https://github.com/ant-design/ant-design/issues/4540) +* 补充了一个自定义灰底样式的 Collapse 折叠面板的例子。[链接](/components/collapse/#components-collapse-demo-custom) +* Table + * 调大了 Table 选择框和展开按钮的列宽度。 + * 修复 `pagination` 属性切换后分页不可用的问题。[#4532](https://github.com/ant-design/ant-design/issues/4532) + * 修复不支持三级筛选菜单的问题。[#4541](https://github.com/ant-design/ant-design/issues/4541) + * 修复 `column.filteredValue` 无法设置为 `null` 的问题。 +* 调整 Carousel 为默认不可拖拽和文字可选择。 +* 增加了 Breadcrumb 内嵌非 Breadcrumb.Item 元素时的警告提示。[#4403](https://github.com/ant-design/ant-design/issues/4403) +* 修复 Tooltip 在 `onVisibleChange(visible)` 返回 `true` 时不展示的问题。[#4579](https://github.com/ant-design/ant-design/issues/4579) +* 优化 TreeSelect 内容过长时的面板高度。[#4537](https://github.com/ant-design/ant-design/pull/4537) +* 补充了 TimePicker 和 Spin 的组件样式变量。 +* 用年份代替了 DatePicker 年份选择面板上的箭头。[#4415](https://github.com/ant-design/ant-design/issues/4415) +* 修复 AutoComplete 和 Form `[options.validateTrigger]` 的 TypeScript 定义。 +* 优化 Spin、Progress 的动画细节效果。 + +## 2.6.1 + +`2017-1-6` + +* 修复 Menu dark theme 样式问题。[#4440](https://github.com/ant-design/ant-design/issues/4440) +* 修复 `Select[tokenSeparators]` `Modal[afterClose]` `Input[name]` 等的 TypeScript interface 定义。[#4441](https://github.com/ant-design/ant-design/pull/4441) [@eddhannay](https://github.com/eddhannay) +* 修复 `TimePicker[placeholder]` 无法置空的问题。[#4446](https://github.com/ant-design/ant-design/pull/4446) [@jialeicui](https://github.com/jialeicui) +* 修复 DatePicker 等年份选择面板折行问题。[#4415](https://github.com/ant-design/ant-design/issues/4415) +* 修复 Table loading 状态分页器可操作的问题。[#4461](https://github.com/ant-design/ant-design/issues/4461) +* 修复 `Input[prefix|suffix]` 垂直对齐问题。[commit](https://github.com/ant-design/ant-design/commit/c4ac4d1eca53ae2f6f4a1e15210b43745f283534) +* 修复 Cascader 对齐问题。[commit](https://github.com/ant-design/ant-design/commit/1fbebd4ecfff432e1b2261c9dfee4b9f471e7b1f) + +## 2.6.0 + +`2017-1-2` + +- 采用全新的色彩系统。[pull/4426](https://github.com/ant-design/ant-design/pull/4426) + - 使用新的算法函数代替 `tint/shade`。 + - 利用算法生成的新版色板。[色板演示](http://ant.design/docs/spec/colors) + - 调整默认文字颜色。 +- 增加 Layout 布局组件。[#3534](https://github.com/ant-design/ant-design/issues/3534) +- 增加 Grid 栅格配置器示例。[commit/ee17ab](https://github.com/ant-design/ant-design/commit/ee17abfa9d0362c6f9baab4a9a09e57574583246) +- Input + - 增加 prefix 和 suffix 属性，支持前后缀配置。[#4226](https://github.com/ant-design/ant-design/issues/4226) [@ystarlongzi](https://github.com/ystarlongzi) + - InputGroup 增加 compact 属性，支持紧凑型展示。[pull/4309](https://github.com/ant-design/ant-design/pull/4309) +- Spin 增加延迟显示属性 delay。[#4306](https://github.com/ant-design/ant-design/issues/4306) +- 修复 Pagination 在低分辨率下的错位问题。[#4349](https://github.com/ant-design/ant-design/issues/4349) +- 修复 Dropdown.Button 换行的问题。[pull/4355](https://github.com/ant-design/ant-design/pull/4355) [@Morhaus](https://github.com/Morhaus) +- 修复 Cascader disabled 状态底色的问题。[#4434](https://github.com/ant-design/ant-design/issues/4434) +- 修复 MonthPicker monthCellContentRender 属性无效的问题，并修正了错误的文档。[#4394](https://github.com/ant-design/ant-design/issues/4394) +- 修复 ButtonGroup 存在多余蓝色边框的问题。[#4382](https://github.com/ant-design/ant-design/pull/4382) [@ystarlongzi](https://github.com/ystarlongzi) +- 修复 Menu horizontal 模式子菜单选择项背景色错误的问题。[#4414](https://github.com/ant-design/ant-design/issues/4414) +- 修复配置了 hasFeedback 的 Select/Cascader 下拉箭头被遮盖的问题。[#4431](https://github.com/ant-design/ant-design/issues/4431) [@JesperWe](https://github.com/JesperWe) +- Table 没有 header 时，第一行改为非圆角。[#4373](https://github.com/ant-design/ant-design/issues/4373) +- 优化 Tree 的拖拽效果。[#4371](https://github.com/ant-design/ant-design/issues/4371) +- 进行了一些文档或示例优化、文档错误修正以及网站样式问题修复。 +- 升级 rc-form 底层依赖，getFieldDecorator 的 id 支持嵌套式写法。 + +## 2.5.3 + +`2016-12-24` 🎄🎄🎄 + +* 支持 TypeScript@2.1。[#4208](https://github.com/ant-design/ant-design/issues/4208) +* 修正了 Tabs 嵌套时的样式问题。 [#4317](https://github.com/ant-design/ant-design/issues/4317) +* 修正了 Radio 在当前项选中时，再次点击仍会触发 onChange 的问题。 [#4242](https://github.com/ant-design/ant-design/issues/4242) [@ystarlongzi](https://github.com/ystarlongzi) +* 修正了 Form 多列栅格式的表单排列方式布局异常。 [#4271](https://github.com/ant-design/ant-design/issues/4271) +* 修正了 Menu 竖直方向的当前选择项的背景问题。[#4253](https://github.com/ant-design/ant-design/issues/4253) +* 优化了 Dropdown 的 `onVisibleChange` 回调参数 Type 类型。[#4236](https://github.com/ant-design/ant-design/issues/4236) +* 优化了 Cascader 的 `onChange` 回调参数的 Type 类型。[#4231](https://github.com/ant-design/ant-design/issues/4231) +* 优化了 Datepicker[showTime] 的默认宽度 [b912f1c](https://github.com/ant-design/ant-design/commit/b912f1cea6f470c16b8dd90554883460161cef47) + +## 2.5.2 + +`2016-12-10` + +* 优化 Menu 已选择项的样式。 +* 修复 Mention 不能响应 `onFocus` 和 `onBlur` 的问题。[#4163](https://github.com/ant-design/ant-design/issues/4163) +* 修复 `disabled` 和 `checked` 的 Radio 之间会多一条阴影的问题。[#4114](https://github.com/ant-design/ant-design/pull/4114) @jdz321 +* 修复 RangePicker、TimePicker、Calendar 设置 Moment 的 `defaultValue` 和 `value` 时也会报错的问题。[#4147](https://github.com/ant-design/ant-design/issues/4147) +* 修复 Affix 在开启动画的 Tabs 里使用时会消失的问题。[#3943](https://github.com/ant-design/ant-design/issues/3943) +* 修复 Cascader 手动选择和搜索选择时 `onChange` 接收到的 `selectedOptions` 不同的问题。[#4096](https://github.com/ant-design/ant-design/issues/4096) +* 修复 Tabs 页增加到一定数量时会产生偏移的问题。[#3637](https://github.com/ant-design/ant-design/issues/3637) +* Table + * 居中对齐表头分组的父表头。 + * 修正设置 filterDropdownVisible 时不生效的问题。[#4162](https://github.com/ant-design/ant-design/issues/4162) + +## 2.5.1 + +`2016-12-03` + +* 提升网站首页在移动端访问的体验。 +* 补充从 `1.x` 升级到 `2.x` 时的组件改动警告提示。[#4028](https://github.com/ant-design/ant-design/pull/4028) +* 现在 ToolTip、Popover、Popconfirm 支持直接包裹文本节点和多个节点。[#3924](https://github.com/ant-design/ant-design/issues/3924) +* Anchor + * 修复快速滚动时的定位问题。[#4053](https://github.com/ant-design/ant-design/issues/4053) + * 修复 target 指定父元素 ref 时无效的问题。[#4037](https://github.com/ant-design/ant-design/issues/4037) +* Table + * 修复设置 defaultChecked 时的一个选中问题。[#4020](https://github.com/ant-design/ant-design/issues/4020) + * 修复分组表头中筛选功能无法使用的问题。[#4099](https://github.com/ant-design/ant-design/issues/4099) +* 修复在 `Input[type="textarea"]` 上使用 Popover 定位错误问题。[#4092](https://github.com/ant-design/ant-design/issues/4092) +* 修复 Popconfirm 的 `visible` 属性失效的问题。[#4068](https://github.com/ant-design/ant-design/issues/4068) +* 修复 TimePicker 无法设置 `style.width` 的问题。 +* 修复 Steps 自定义图标和默认图标大小不一致的问题。[#3817](https://github.com/ant-design/ant-design/issues/3817) +* 修复 Form、Button、Slider、Table 等组件的一些样式细节。 + +## 2.5.0 + +`2016-11-25` + +* 默认主题风格修改为支付宝钱包风格，及大量样式优化。 +* 支持服务端渲染。（Mention 会因为 [draft-js](https://github.com/facebook/draft-js/issues/385) 的问题有 warning） +* 引入 [Jest Snapshot](https://facebook.github.io/jest/docs/tutorial-react.html#snapshot-testing) 测试组件结构及服务端渲染问题。 +* 官网及文档优化。 +* 新增自定义主题的 [文档](https://ant.design/docs/react/customize-theme)。 +* 新增 [Sketch 资源文件](https://ant.design/docs/resource/download)。 +* LocaleProvider 新增巴西语支持。[#4004](https://github.com/ant-design/ant-design/pull/4004) [@nathantn](https://github.com/nathantn) +* DatePicker + * DatePicker 现在可以决定是否展示 “今天” 按钮。[commit](https://github.com/ant-design/ant-design/commit/bbef274aae169d142e3e7e3ea0af922d48e6dd64) + * RangePicker 现在可以自定义快捷选择。[demo](https://ant.design/components/date-picker/#components-date-picker-demo-presetted-ranges) + * 修复 DatePicker 设置 `showTime` 后 “此刻” 按钮失效的问题。[#3748](https://github.com/ant-design/ant-design/issues/3748) + * 修复 `RangePicker[format]` 失效的问题。[#3808](https://github.com/ant-design/ant-design/issues/3808) +* 新增并优化部分 Icon。[#3977](https://github.com/ant-design/ant-design/pull/3977) +* 新增 Input.Search 控件。[demo](https://ant.design/components/input/#components-input-demo-search-input) +* Mention onSelect 事件现在可以获取完整的数据。[#3867](https://github.com/ant-design/ant-design/issues/3867) +* Pagination 现在支持展示当前页的索引范围。[demo](https://ant.design/components/pagination/#components-pagination-demo-total) +* Table + * 自定义筛选的显示隐藏现在可以通过代码控制。[demo](https://ant.design/components/table/#components-table-demo-custom-filter-panel) + * 支持 JSX 风格的方式设置 columns。[demo](https://ant.design/components/table/#components-table-demo-jsx) + * 现在可以监听单元格的点击事件 `onCellClick`。[#3774](https://github.com/ant-design/ant-design/issues/3774) + * 修复无边框 Table 头部的圆角样式问题。 + * 修复 title 和 footer 高度不随 `Table[size]` 变化的问题。[commit](https://github.com/ant-design/ant-design/commit/9e6439b06cd099ab384a4a2f026f0def6e12bf23) + * 修复选中状态出错的问题。[#3900](https://github.com/ant-design/ant-design/issues/3900) +* Upload + * 修复 children 不能为 `null` 的问题。 + * 修复预览逻辑的问题。[commit](https://github.com/ant-design/ant-design/commit/e552880c32aaa3f5b0fb09a5e1fb7454c24d5378) +* 修复 Badge 会覆盖其他组件的问题。[#3898](https://github.com/ant-design/ant-design/issues/3898) +* 修复多行 Checkbox 样式不对齐的问题。[#3971](https://github.com/ant-design/ant-design/issues/3971) [@flashback313](https://github.com/flashback313) +* 修复 InputNumber 与其它表单控件不对齐的问题。[#3866(comment)](https://github.com/ant-design/ant-design/issues/3866#issuecomment-261148256) +* 修复 `Menu.Divider` 样式问题。[#3813](https://github.com/ant-design/ant-design/issues/3813) +* 修复 Popover 直接内嵌 Checkbox 和 Radio 无效的问题。[#3455](https://github.com/ant-design/ant-design/issues/3455) +* 修复 Select combobox 高度异常问题。[#3855](https://github.com/ant-design/ant-design/issues/3855) +* 修复 Switch actived 后的样式问题。[#3838](https://github.com/ant-design/ant-design/issues/3838) +* 修复 Transfer 搜索无结果时不展示 “Not Found” 提示的问题。[#3996](https://github.com/ant-design/ant-design/issues/3996) +* 修复 TreeSelect 占位符的样式问题。[#3841](https://github.com/ant-design/ant-design/issues/3841) +* 修复 TypeScript 编译报错的问题。[#3969](https://github.com/ant-design/ant-design/pull/3969) [@AlbertZheng](https://github.com/AlbertZheng) +* 修复表单反馈图标影响用户操作的问题。[#3891](https://github.com/ant-design/ant-design/issues/3891) + +## 2.4.3 + +`2016-11-17` + +* 修复 `Anchor` 内部 querySelector 报错，并做了一些体验优化 。[#3832](https://github.com/ant-design/ant-design/issues/3832) [#3844](https://github.com/ant-design/ant-design/issues/3844) + +## 2.4.2 + +`2016-11-13` + +* 修复 `Dropdown.Button` 不弹出的问题。[#3815](https://github.com/ant-design/ant-design/issues/3815) + +## 2.4.1 + +`2016-11-11` + +* 修复 `2.4.0` 组件 index 文件丢失的问题。 + +## 2.4.0 + +`2016-11-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) +* 修复 `Input` 的 `suffix` 部分区域中鼠标事件无法响应的问题。[#3714](https://github.com/ant-design/ant-design/issues/3714) +* 优化了 `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` 等组件的样式细节。 + +## 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`。 + * `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 + * 修复服务端渲染问题，感谢 [@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 + * 修复固定表头在没有数据情况下的样式问题。[#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) + +## 2.1.0 + +`2016-10-16` + +- 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 不兼容改动 + +> 建议从 `1.x` 升级时，直接升级到 `2.x` 的最新版本。 + +> 建议在升级 antd 的过程中，每做完一次合理的修改并 review 和测试之后，就 git commit 一次，这样在误操作时能随时回滚到之前的版本 + +此版本有部分不兼容的改动，升级时确保修改相应的使用代码。另外由于人肉查找代码中的废弃用法过于低效，所以我们提供了 [antd-migration-helper](https://github.com/ant-design/antd-migration-helper) 用于扫描代码中的废弃用法。 + +* 时间类组件的 `value` 和 `defaultValue` 不再支持 `String/Date` 类型，请使用 [moment](http://momentjs.com/)。需要对代码进行如下修改，可人手修改也可用我们提供的 [codemod](https://github.com/ant-design/antd-codemod#time-related-value-to-moment) 脚本自动修改类似用法，但注意脚本不能覆盖所有情况，所以在运行脚本后仍然需要 review 和测试。 + ```diff + - + + + + - + + + + - + + + ``` +* 时间类组件的 `onChange` 和 `onPanelChange` 及其他回调函数中为 `Date/GregorianCalendar` 类型的参数，均修改为 moment 类型，两者 API 有所不同，但功能基本一致，请对照 [moment 的 API 文档](http://momentjs.com/docs/) 和 [gregorian-calendar 的文档](https://github.com/yiminghe/gregorian-calendar) 进行修改。 + 1. 也可以参考这个 [commit](https://github.com/ant-design/ant-design/commit/4026221d451b246956983bb42140142d4a48b7d7) 来进行修改。 + 1. 也可用我们提供的 [codemod](https://github.com/ant-design/antd-codemod#gergoriancalendar-to-moment) 脚本自动修改类似用法，但注意脚本不能覆盖所有情况，所以在运行脚本后仍然需要 review 和测试。 + ```diff + function disabledDate(date) { + - console.log(date.getTime()); + + console.log(date.valueOf()); + } + ``` +* 由于 `JSON.stringify(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'`。 + ```diff + getFieldDecorator('time', { + rules: [{ + required: true, + - 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`。可人手修改也可用我们提供的 [codemod](https://github.com/ant-design/antd-codemod#time-related-value-to-moment) 脚本自动修改类似用法，但注意脚本不能覆盖所有情况，所以在运行脚本后仍然需要 review 和测试。 +* 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`。可人手修改也可用我们提供的 [codemod](https://github.com/ant-design/antd-codemod#getfieldprops-to-getfielddecorator) 脚本自动修改类似用法，但注意脚本不能覆盖所有情况，所以在运行脚本后仍然需要 review 和测试。 + + ```diff + - + + {getFieldDecorator('userName', { ... })( + + + + )} + ``` + + 相关讨论可以看 [#1533](https://github.com/ant-design/ant-design/issues/1533)。 + +* DatePicker 废弃 `toggleOpen`，请使用 `onOpenChange`： + + ```diff + - handleToggleOpen({ open }) { + + handleOpenChange(open) { + ... + } + ``` + +最后，由于时间类组件修改比较复杂，可能还需要深入业务逻辑，所以在项目比较赶的情况下，可以考虑使用 [antd-adapter](https://github.com/ant-design/antd-adapter) 适配为 `antd@1.x` 里面的用法，但不建议。 + +### 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.4 + +去 [GitHub](https://github.com/ant-design/ant-design/blob/1.x-stable/CHANGELOG.md) 查看 `0.x` 到 `1.x` 的 Change Log。 diff --git a/CNAME b/CNAME deleted file mode 100644 index 224102eb87..0000000000 --- a/CNAME +++ /dev/null @@ -1 +0,0 @@ -ant.design diff --git a/README-zh_CN.md b/README-zh_CN.md index f07781f6b5..133dd0370b 100644 --- a/README-zh_CN.md +++ b/README-zh_CN.md @@ -4,15 +4,37 @@

-# Ant Design [![](https://img.shields.io/travis/ant-design/ant-design.svg?style=flat-square)](https://travis-ci.org/ant-design/ant-design) [![npm package](https://img.shields.io/npm/v/antd.svg?style=flat-square)](https://www.npmjs.org/package/antd) [![NPM downloads](http://img.shields.io/npm/dm/antd.svg?style=flat-square)](https://npmjs.org/package/antd) [![Dependency Status](https://david-dm.org/ant-design/ant-design.svg?style=flat-square)](https://david-dm.org/ant-design/ant-design) [![Join the chat at https://gitter.im/ant-design/ant-design](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/ant-design/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) +# Ant Design + +[![](https://img.shields.io/travis/ant-design/ant-design.svg?style=flat-square)](https://travis-ci.org/ant-design/ant-design) +[![Codecov](https://img.shields.io/codecov/c/github/ant-design/ant-design/master.svg?style=flat-square)](https://codecov.io/gh/ant-design/ant-design/branch/master) +[![Dependency Status](https://img.shields.io/gemnasium/react-component/trigger.svg?style=flat-square)](https://gemnasium.com/ant-design/ant-design) + +[![npm package](https://img.shields.io/npm/v/antd.svg?style=flat-square)](https://www.npmjs.org/package/antd) +[![NPM downloads](http://img.shields.io/npm/dm/antd.svg?style=flat-square)](https://npmjs.org/package/antd) +[![Percentage of issues still open](http://isitmaintained.com/badge/open/ant-design/ant-design.svg)](http://isitmaintained.com/project/ant-design/ant-design "Percentage of issues still open") +[![Join the chat at https://gitter.im/ant-design/ant-design](https://img.shields.io/gitter/room/ant-design/ant-design.svg?style=flat-square)](https://gitter.im/ant-design/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) 一套企业级的 UI 设计语言和 React 实现。 +[README in English](README.md) + ## 特性 -- 提炼和服务企业级中后台产品的交互语言和视觉风格。 -- [React Component](http://react-component.github.io/badgeboard/) 基础上精心封装的高质量 UI 组件。 -- 基于 npm + webpack + babel 的工作流，支持 ES2015 和 TypeScript。 +- 提炼自企业级中后台产品的交互语言和视觉风格。 +- 开箱即用的高质量 React 组件。 +- 使用 TypeScript 构建，提供完整的类型定义文件。 +- 基于 npm + webpack + [dva](https://github.com/dvajs/dva) 的企业级开发框架。 + +## 支持环境 + +* 现代浏览器和 IE9 及以上。 +* 支持服务端渲染。 +* [Electron](http://electron.atom.io/) + +## 参与共建 [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](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)。 ## 安装 @@ -33,41 +55,70 @@ ReactDOM.render(, mountNode); import 'antd/dist/antd.css'; // or 'antd/dist/antd.less' ``` -按需加载可通过此写法 `import DatePicker from 'antd/lib/date-picker'` 或使用插件 [babel-plugin-antd](https://github.com/ant-design/babel-plugin-antd)。 - - -## 浏览器支持 - -现代浏览器和 IE8 及以上。 - -> [IE8 issues](https://github.com/xcatliu/react-ie8) +按需加载可通过此写法 `import DatePicker from 'antd/lib/date-picker'` 或使用插件 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import)。 ## TypeScript ```js -/// -... +// tsconfig.json +{ + "compilerOptions": { + "moduleResolution": "node", + "jsx": "preserve", + "allowSyntheticDefaultImports": true + } +} ``` +> 注意： +> - 设置 `allowSyntheticDefaultImports` 避免 `error TS1192: Module 'react' has no default export` 的错误。 +> - 不要使用 @types/antd, antd 已经自带了 TypeScript 定义。 + +## 国际化 + +参考 [国际化文档](http://ant.design/docs/react/i18n)。 + ## 链接 -- [首页](http://ant.design/) -- [React 实现](http://ant.design/#/docs/react/introduce) -- [修改记录](CHANGELOG.md) -- [开发脚手架](https://github.com/ant-design/antd-init/) +- [首页](http://ant.design/index-cn) +- [UI 组件库](http://ant.design/docs/react/introduce-cn) +- [更新日志](CHANGELOG.en-US.md) +- [开发脚手架](https://github.com/dvajs/dva-cli) - [开发工具文档](http://ant-tool.github.io/) -- [React 基础组件](http://react-component.github.io/) +- [React 底层基础组件](http://react-component.github.io/) - [移动端组件](http://mobile.ant.design) -- [React 代码规范](https://github.com/react-component/react-component.github.io/blob/master/docs/zh-cn/component-code-style.md) -- [组件设计原则](https://github.com/react-component/react-component.github.io/blob/master/docs/zh-cn/component-design.md) -- [网站和组件开发说明](https://github.com/ant-design/ant-design/wiki/%E7%BD%91%E7%AB%99%E5%92%8C%E7%BB%84%E4%BB%B6%E5%BC%80%E5%8F%91%E8%AF%B4%E6%98%8E) -- [版本发布手册](https://github.com/ant-design/ant-design/wiki/%E8%BD%AE%E5%80%BC%E8%A7%84%E5%88%99%E5%92%8C%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B) +- [动效](https://motion.ant.design) +- [设计规范速查手册](https://github.com/ant-design/ant-design/wiki/Ant-Design-%E8%AE%BE%E8%AE%A1%E5%9F%BA%E7%A1%80%E7%AE%80%E7%89%88) +- [开发者说明](https://github.com/ant-design/ant-design/wiki/Development) +- [版本发布规则](https://github.com/ant-design/ant-design/wiki/%E8%BD%AE%E5%80%BC%E8%A7%84%E5%88%99%E5%92%8C%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B) - [社区贡献脚手架和范例](https://github.com/ant-design/ant-design/issues/129) - [常见问题](https://github.com/ant-design/ant-design/wiki/FAQ) -- [CodePen 模板](http://codepen.io/anon/pen/wGOWGW?editors=001) +- [CodePen 模板](http://codepen.io/benjycui/pen/KgPZrE?editors=001) for bug reports - [Awesome Ant Design](https://github.com/websemantics/awesome-ant-design) +- [定制主题](http://ant.design/docs/react/customize-theme-cn) +## 本地开发 + +```bash +$ git clone git@github.com:ant-design/ant-design.git +$ npm install +$ npm start +``` + +打开浏览器访问 http://127.0.0.1:8001 ，更多本地开发文档参见: https://github.com/ant-design/ant-design/wiki/Development 。 ## 如何贡献 -我们欢迎任何形式的贡献，有任何建议或意见您可以进行 [Pull Request](https://github.com/ant-design/ant-design/pulls)，或者给我们 [提问](https://github.com/ant-design/ant-design/issues)。 +在任何形式的参与前，请先阅读 [贡献者文档](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)，更好的问题更容易获得帮助。 + +## 社区互助 + +如果您在使用的过程中碰到问题，可以通过下面几个途径寻求帮助，同时我们也鼓励资深用户通过下面的途径给新人提供帮助。 + +通过 Stack Overflow 或者 Segment Fault 提问时，建议加上 `antd` 标签。 + +1. [Stack Overflow](http://stackoverflow.com/questions/tagged/antd)（英文） +2. [Segment Fault](https://segmentfault.com/t/antd)（中文） +3. [![Join the chat at https://gitter.im/ant-design/ant-design](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/ant-design/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) diff --git a/README.md b/README.md index fefd553398..3df621eb05 100644 --- a/README.md +++ b/README.md @@ -4,19 +4,37 @@

-# Ant Design [![](https://img.shields.io/travis/ant-design/ant-design.svg?style=flat-square)](https://travis-ci.org/ant-design/ant-design) [![npm package](https://img.shields.io/npm/v/antd.svg?style=flat-square)](https://www.npmjs.org/package/antd) [![NPM downloads](http://img.shields.io/npm/dm/antd.svg?style=flat-square)](https://npmjs.org/package/antd) [![Dependency Status](https://david-dm.org/ant-design/ant-design.svg?style=flat-square)](https://david-dm.org/ant-design/ant-design) [![Join the chat at https://gitter.im/ant-design/ant-design](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/ant-design/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) +# Ant Design + +[![](https://img.shields.io/travis/ant-design/ant-design.svg?style=flat-square)](https://travis-ci.org/ant-design/ant-design) +[![Codecov](https://img.shields.io/codecov/c/github/ant-design/ant-design/master.svg?style=flat-square)](https://codecov.io/gh/ant-design/ant-design/branch/master) +[![Dependency Status](https://img.shields.io/gemnasium/react-component/trigger.svg?style=flat-square)](https://gemnasium.com/ant-design/ant-design) + +[![npm package](https://img.shields.io/npm/v/antd.svg?style=flat-square)](https://www.npmjs.org/package/antd) +[![NPM downloads](http://img.shields.io/npm/dm/antd.svg?style=flat-square)](https://npmjs.org/package/antd) +[![Percentage of issues still open](http://isitmaintained.com/badge/open/ant-design/ant-design.svg)](http://isitmaintained.com/project/ant-design/ant-design "Percentage of issues still open") +[![Join the chat at https://gitter.im/ant-design/ant-design](https://img.shields.io/gitter/room/ant-design/ant-design.svg?style=flat-square)](https://gitter.im/ant-design/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) An enterprise-class UI design language and React-based implementation. -## :loudspeaker: Document Translation Recruitment - -We are now working on translate components document to English, and we need some translator and reviewer. https://github.com/ant-design/ant-design/issues/1471 +[中文 README](README-zh_CN.md) ## Features -- 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/). -- A npm + webpack + babel + dora [workflow](http://ant-tool.github.io/index.html). +- 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 + +* Browser: Modern browsers and Internet Explorer 9+ +* Server-side Rendering +* [Electron](http://electron.atom.io/) + +## Let's build a better antd together [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) + +`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. ## Install @@ -26,8 +44,6 @@ npm install antd ## Usage -### Use prebuilt bundle - ```jsx import { DatePicker } from 'antd'; ReactDOM.render(, mountNode); @@ -41,66 +57,81 @@ import 'antd/dist/antd.css'; // or 'antd/dist/antd.less' ### Use modularized antd -- Use [babel-plugin-antd](https://github.com/ant-design/babel-plugin-antd) (Recommended) +- Use [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) (Recommended) ```js - // .babelrc + // .babelrc or babel-loader option { - "plugins": [["antd", { style: "css" }]] + "plugins": [ + ["import", { libraryName: "antd", style: "css" }] // `style: true` for less + ] } ``` - Then you can import components from antd directly. + Then you can import components from antd, equivalent to import manually below. ```jsx - // import js and css modularly, parsed by babel-plugin-antd + // 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 DatePicker from 'antd/lib/date-picker'; // for js + import 'antd/lib/date-picker/style/css'; // for css + // import 'antd/lib/date-picker/style'; // that will import less ``` +### TypeScript -## Browser Support - -Normal browsers and Internet Explorer 8+. - -> [IE8 issues](https://github.com/xcatliu/react-ie8) - -## TypeScript - -tsconfig.json - -``` +```js +// tsconfig.json { "compilerOptions": { "moduleResolution": "node", - "jsx": "preserve" + "jsx": "preserve", + "allowSyntheticDefaultImports": true } } ``` +> Note: +> - set `allowSyntheticDefaultImports` to prevent `error TS1192: Module 'react' has no default export`. +> - Don't use @types/antd, antd provide a built-in ts definition already. + +## Internationalization + +See [i18n](http://ant.design/docs/react/i18n). + ## Links - [Home page](http://ant.design/) -- [React UI page](http://ant.design/#/docs/react/introduce) -- [ChangeLog](CHANGELOG.md) -- [Scaffold tool](https://github.com/ant-design/antd-init/) +- [UI library](http://ant.design/docs/react/introduce) +- [Change Log](CHANGELOG.en-US.md) +- [Scaffold tool](https://github.com/dvajs/dva-cli/) - [Development tool](http://ant-tool.github.io/) -- [React components](http://react-component.github.io/) +- [rc-components](http://react-component.github.io/) - [Mobile UI](http://mobile.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) +- [Motion](https://motion.ant.design) - [Developer Instruction](https://github.com/ant-design/ant-design/wiki/Development) - [Versioning Release Note](https://github.com/ant-design/ant-design/wiki/%E8%BD%AE%E5%80%BC%E8%A7%84%E5%88%99%E5%92%8C%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B) - [Boilerplates](https://github.com/ant-design/ant-design/issues/129) - [FAQ](https://github.com/ant-design/ant-design/wiki/FAQ) -- [CodePen boilerplate](http://codepen.io/anon/pen/wGOWGW?editors=001) 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 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! :) +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! :) diff --git a/components/__tests__/__snapshots__/index.test.js.snap b/components/__tests__/__snapshots__/index.test.js.snap new file mode 100644 index 0000000000..e2261c093e --- /dev/null +++ b/components/__tests__/__snapshots__/index.test.js.snap @@ -0,0 +1,57 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`antd exports modules correctly 1`] = ` +Array [ + "Affix", + "Anchor", + "AutoComplete", + "Alert", + "BackTop", + "Badge", + "Breadcrumb", + "Button", + "Calendar", + "Card", + "Collapse", + "Carousel", + "Cascader", + "Checkbox", + "Col", + "DatePicker", + "Dropdown", + "Form", + "Icon", + "Input", + "InputNumber", + "Layout", + "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", +] +`; diff --git a/components/__tests__/index.test.js b/components/__tests__/index.test.js new file mode 100644 index 0000000000..ce2a6461df --- /dev/null +++ b/components/__tests__/index.test.js @@ -0,0 +1,7 @@ +import * as antd from '..'; + +describe('antd', () => { + it('exports modules correctly', () => { + expect(Object.keys(antd)).toMatchSnapshot(); + }); +}); diff --git a/components/_util/__tests__/util.test.js b/components/_util/__tests__/util.test.js new file mode 100644 index 0000000000..d314438343 --- /dev/null +++ b/components/_util/__tests__/util.test.js @@ -0,0 +1,29 @@ +import throttleByAnimationFrame from '../throttleByAnimationFrame'; + +jest.useFakeTimers(); + +describe('Test utils function', () => { + 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(); + }); +}); diff --git a/components/_util/getLocale.tsx b/components/_util/getLocale.tsx new file mode 100644 index 0000000000..57adba7b5a --- /dev/null +++ b/components/_util/getLocale.tsx @@ -0,0 +1,19 @@ +import assign from 'object-assign'; + +export function getComponentLocale(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; +} + +export function getLocaleCode(context) { + const localeCode = context.antLocale && context.antLocale.locale; + // Had use LocaleProvide but didn't set locale + if (context.antLocale && context.antLocale.exist && !localeCode) { + return 'zh-cn'; + } + return localeCode; +} diff --git a/components/_util/getRequestAnimationFrame.tsx b/components/_util/getRequestAnimationFrame.tsx new file mode 100644 index 0000000000..6c510d6dc7 --- /dev/null +++ b/components/_util/getRequestAnimationFrame.tsx @@ -0,0 +1,43 @@ +const availablePrefixs = ['moz', 'ms', 'webkit']; + +function requestAnimationFramePolyfill() { + let lastTime = 0; + return function(callback) { + 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) { + return window.requestAnimationFrame; + } + + const prefix = availablePrefixs.filter(key => `${key}RequestAnimationFrame` in window)[0]; + + return prefix + ? window[`${prefix}RequestAnimationFrame`] + : requestAnimationFramePolyfill(); +} + +export function cancelRequestAnimationFrame(id) { + 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[`${prefix}CancelAnimationFrame`] || window[`${prefix}CancelRequestAnimationFrame`]).call(this, id) + : clearTimeout(id); +} diff --git a/components/_util/getScroll.tsx b/components/_util/getScroll.tsx new file mode 100644 index 0000000000..95e33a3808 --- /dev/null +++ b/components/_util/getScroll.tsx @@ -0,0 +1,17 @@ +export default function getScroll(target, top): number { + if (typeof window === 'undefined') { + return 0; + } + + const prop = top ? 'pageYOffset' : 'pageXOffset'; + const method = top ? 'scrollTop' : 'scrollLeft'; + const isWindow = target === window; + + let ret = isWindow ? target[prop] : target[method]; + // ie6,7,8 standard mode + if (isWindow && typeof ret !== 'number') { + ret = window.document.documentElement[method]; + } + + return ret; +} diff --git a/components/_util/isFlexSupported.tsx b/components/_util/isFlexSupported.tsx new file mode 100644 index 0000000000..78b9babed7 --- /dev/null +++ b/components/_util/isFlexSupported.tsx @@ -0,0 +1,10 @@ +export default function isFlexSupported() { + if (typeof window !== 'undefined' && window.document && window.document.documentElement) { + const { documentElement } = window.document; + return 'flex' in documentElement.style || + 'webkitFlex' in documentElement.style || + 'Flex' in documentElement.style || + 'msFlex' in documentElement.style; + } + return false; +} diff --git a/components/_util/openAnimation.tsx b/components/_util/openAnimation.tsx index f2a33ba216..4ce25c3dc0 100644 --- a/components/_util/openAnimation.tsx +++ b/components/_util/openAnimation.tsx @@ -1,21 +1,37 @@ import cssAnimation from 'css-animation'; +import getRequestAnimationFrame, { cancelRequestAnimationFrame } from './getRequestAnimationFrame'; + +const reqAnimFrame = getRequestAnimationFrame(); function animate(node, show, done) { let height; + let requestAnimationFrameId; 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 = 0; + node.style.opacity = 0; } }, active() { - node.style.height = `${show ? height : 0}px`; + if (requestAnimationFrameId) { + cancelRequestAnimationFrame(requestAnimationFrameId); + } + requestAnimationFrameId = reqAnimFrame(() => { + node.style.height = `${show ? height : 0}px`; + node.style.opacity = show ? 1 : 0; + }); }, end() { + if (requestAnimationFrameId) { + cancelRequestAnimationFrame(requestAnimationFrameId); + } node.style.height = ''; + node.style.opacity = ''; done(); }, }); diff --git a/components/_util/splitObject.tsx b/components/_util/splitObject.tsx deleted file mode 100644 index d1061f40b4..0000000000 --- a/components/_util/splitObject.tsx +++ /dev/null @@ -1,12 +0,0 @@ -export default function splitObject(obj, parts): Array { - let left = {}; - let right = {}; - Object.keys(obj).forEach((k) => { - if (parts.indexOf(k) !== -1) { - left[k] = obj[k]; - } else { - right[k] = obj[k]; - } - }); - return [left, right]; -} diff --git a/components/_util/throttleByAnimationFrame.tsx b/components/_util/throttleByAnimationFrame.tsx new file mode 100644 index 0000000000..657fcbfea5 --- /dev/null +++ b/components/_util/throttleByAnimationFrame.tsx @@ -0,0 +1,47 @@ +import getRequestAnimationFrame, { cancelRequestAnimationFrame } from '../_util/getRequestAnimationFrame'; + +const reqAnimFrame = getRequestAnimationFrame(); + +export default function throttleByAnimationFrame(fn) { + let requestId; + + const later = args => () => { + requestId = null; + fn(...args); + }; + + const throttled = (...args) => { + if (requestId == null) { + requestId = reqAnimFrame(later(args)); + } + }; + + (throttled as any).cancel = () => cancelRequestAnimationFrame(requestId); + + return throttled; +} + +export function throttleByAnimationFrameDecorator() { + return function(target, key, descriptor) { + 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; + }, + }; + }; +} diff --git a/components/_util/warning.tsx b/components/_util/warning.tsx new file mode 100644 index 0000000000..144130e529 --- /dev/null +++ b/components/_util/warning.tsx @@ -0,0 +1,9 @@ +import warning from 'warning'; + +const warned: { [msg: string]: boolean} = {}; +export default (valid: boolean, message: string): void => { + if (!valid && !warned[message]) { + warning(false, message); + warned[message] = true; + } +}; diff --git a/components/affix/__tests__/Affix.test.js b/components/affix/__tests__/Affix.test.js new file mode 100644 index 0000000000..9e3ce25e15 --- /dev/null +++ b/components/affix/__tests__/Affix.test.js @@ -0,0 +1,68 @@ +import React from 'react'; +import { mount } from 'enzyme'; +import Affix from '..'; +import Button from '../../button'; + +jest.useFakeTimers(); + +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 (
{ this.container = node; }} + > +
+ this.container} + ref={ele => this.affix = ele} + > + + +
+
); + } +} + +describe('Affix Render', () => { + it('Anchor render perfectly', () => { + document.body.innerHTML = '
'; + + const wrapper = mount(, { attachTo: document.getElementById('mounter') }); + jest.runAllTimers(); + + wrapper.node.affix.refs.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.node.affix.state.affixStyle).not.toBe(null); + }); +}); diff --git a/components/affix/__tests__/__snapshots__/demo.test.js.snap b/components/affix/__tests__/__snapshots__/demo.test.js.snap new file mode 100644 index 0000000000..9a694a8d88 --- /dev/null +++ b/components/affix/__tests__/__snapshots__/demo.test.js.snap @@ -0,0 +1,77 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`renders ./components/affix/demo/basic.md correctly 1`] = ` +
+
+
+ +
+
+
+
+
+ +
+
+
+`; + +exports[`renders ./components/affix/demo/on-change.md correctly 1`] = ` +
+
+ +
+
+`; + +exports[`renders ./components/affix/demo/target.md correctly 1`] = ` +
+
+
+
+ +
+
+
+
+`; diff --git a/components/affix/__tests__/demo.test.js b/components/affix/__tests__/demo.test.js new file mode 100644 index 0000000000..58fcda3f82 --- /dev/null +++ b/components/affix/__tests__/demo.test.js @@ -0,0 +1,3 @@ +import demoTest from '../../../tests/shared/demoTest'; + +demoTest('affix'); diff --git a/components/affix/demo/basic.md b/components/affix/demo/basic.md index 4dadf3e9ef..59c8605560 100644 --- a/components/affix/demo/basic.md +++ b/components/affix/demo/basic.md @@ -17,8 +17,15 @@ The simplest usage. import { Affix, Button } from 'antd'; ReactDOM.render( - - - -, mountNode); +
+ + + +
+ + + +
, + mountNode +); ```` diff --git a/components/affix/demo/bottom.md b/components/affix/demo/bottom.md deleted file mode 100644 index f8faf64264..0000000000 --- a/components/affix/demo/bottom.md +++ /dev/null @@ -1,24 +0,0 @@ ---- -order: 2 -title: - zh-CN: 下方固定 - en-US: Bottom ---- - -## zh-CN - -固定在屏幕下方。 - -## en-US - -Affix to bottom. - -````jsx -import { Affix, Button } from 'antd'; - -ReactDOM.render( - - - -, mountNode); -```` diff --git a/components/affix/demo/offset.md b/components/affix/demo/offset.md deleted file mode 100644 index 878bbf110a..0000000000 --- a/components/affix/demo/offset.md +++ /dev/null @@ -1,24 +0,0 @@ ---- -order: 1 -title: - zh-CN: 偏移 - en-US: Offset ---- - -## zh-CN - -达到一定的偏移量才触发。 - -## en-US - -Affix element according to offset value. - -````jsx -import { Affix, Button } from 'antd'; - -ReactDOM.render( - - - -, mountNode); -```` diff --git a/components/affix/demo/on-change.md b/components/affix/demo/on-change.md index 9b4d005021..9d9a89c9d4 100644 --- a/components/affix/demo/on-change.md +++ b/components/affix/demo/on-change.md @@ -1,5 +1,5 @@ --- -order: 3 +order: 1 title: zh-CN: 固定状态改变的回调 en-US: Callback @@ -19,6 +19,7 @@ import { Affix, Button } from 'antd'; ReactDOM.render( console.log(affixed)}> - -, mountNode); + , + mountNode +); ```` diff --git a/components/affix/demo/target.md b/components/affix/demo/target.md index e2a21d1f56..d78ab9100e 100644 --- a/components/affix/demo/target.md +++ b/components/affix/demo/target.md @@ -1,29 +1,48 @@ --- -order: 4 -title: 参考对象 +order: 2 +title: + zh-CN: 滚动容器 + en-US: Container to scroll. --- +## zh-CN + 用 `target` 设置 `Affix` 需要监听其滚动事件的元素，默认为 `window`。 +## en-US + +Set a `target` for 'Affix', which is listen to scroll event of target element (default is `window`). + ````jsx import { Affix, Button } from 'antd'; -const Demo = () => { - return ( -
-
-
-
-
-
- document.getElementById('affix-target')} offsetTop={20}> - +class Demo extends React.Component { + render() { + return ( +
{ this.container = node; }}> +
+ this.container}> +
-
- ); -}; + ); + } +} ReactDOM.render(, mountNode); ```` + + diff --git a/components/affix/index.en-US.md b/components/affix/index.en-US.md index 8cd7887a92..613a1a1d91 100644 --- a/components/affix/index.en-US.md +++ b/components/affix/index.en-US.md @@ -1,21 +1,30 @@ --- category: Components -type: Other -english: Affix +type: Navigation +title: Affix --- Make an element sticky to viewport. -## When to use +## When To Use -When user browses a long web page, some content need to sticky to viewport. It is common for menus and actions. +When user browses a long web page, some content need to stick to the viewport. This is common for menus and actions. -Please note that Affix should not cover other content in page, especially when the size of viewport is small. +Please note that Affix should not cover other content on the page, especially when the size of the viewport is small. ## API | Property | Description | Type | Default | |--------------|-----------------------|----------|--------------| -| 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 | - | +| 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 | - | +| target | specifies the scrollable area dom node | () => HTMLElement | () => window | | 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`: + +```jsx + + ... + +``` diff --git a/components/affix/index.tsx b/components/affix/index.tsx index d4b70ec732..feb49a0932 100644 --- a/components/affix/index.tsx +++ b/components/affix/index.tsx @@ -1,32 +1,19 @@ -import * as React from 'react'; -import * as ReactDOM from 'react-dom'; +import React from 'react'; +import ReactDOM from 'react-dom'; import addEventListener from 'rc-util/lib/Dom/addEventListener'; import classNames from 'classnames'; -import warning from 'warning'; -import assign from 'object-assign'; import shallowequal from 'shallowequal'; +import omit from 'omit.js'; +import getScroll from '../_util/getScroll'; +import { throttleByAnimationFrameDecorator } from '../_util/throttleByAnimationFrame'; -function getScroll(target, top) { - const prop = top ? 'pageYOffset' : 'pageXOffset'; - const method = top ? 'scrollTop' : 'scrollLeft'; - const isWindow = target === window; - - let ret = isWindow ? target[prop] : target[method]; - // ie6,7,8 standard mode - if (isWindow && typeof ret !== 'number') { - ret = window.document.documentElement[method]; - } - - return ret; -} - -function getTargetRect(target): any { +function getTargetRect(target): ClientRect { return target !== window ? target.getBoundingClientRect() : { top: 0, left: 0, bottom: 0 }; } -function getOffset(element, target) { +function getOffset(element: HTMLElement, target) { const elemRect = element.getBoundingClientRect(); const targetRect = getTargetRect(target); @@ -42,9 +29,18 @@ function getOffset(element, target) { scrollTop - clientTop, left: elemRect.left - targetRect.left + scrollLeft - clientLeft, + width: elemRect.width, + height: elemRect.height, }; } +function noop() {} + +function getDefaultTarget() { + return typeof window !== 'undefined' ? + window : null; +}; + // Affix export interface AffixProps { /** @@ -52,10 +48,14 @@ export interface AffixProps { */ offsetTop?: number; offset?: number; + /** 距离窗口底部达到指定偏移量后触发 */ offsetBottom?: number; style?: React.CSSProperties; - onChange?: (affixed?: boolean) => any; + /** 固定状态改变时触发的回调函数 */ + onChange?: (affixed?: boolean) => void; + /** 设置 Affix 需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数 */ target?: () => Window | HTMLElement; + prefixCls?: string; } export default class Affix extends React.Component { @@ -65,17 +65,10 @@ export default class Affix extends React.Component { target: React.PropTypes.func, }; - static defaultProps = { - target() { - return window; - }, - onChange() {}, - }; - scrollEvent: any; resizeEvent: any; + timeout: any; refs: { - [key: string]: any; fixedNode: HTMLElement; }; @@ -88,7 +81,7 @@ export default class Affix extends React.Component { } setAffixStyle(e, affixStyle) { - const { onChange, target } = this.props; + const { onChange = noop, target = getDefaultTarget } = this.props; const originalAffixStyle = this.state.affixStyle; const isWindow = target() === window; if (e.type === 'scroll' && originalAffixStyle && affixStyle && isWindow) { @@ -106,19 +99,17 @@ export default class Affix extends React.Component { }); } - setPlaceholderStyle(e, placeholderStyle) { + setPlaceholderStyle(placeholderStyle) { const originalPlaceholderStyle = this.state.placeholderStyle; - if (e.type === 'resize') { - return; - } if (shallowequal(placeholderStyle, originalPlaceholderStyle)) { return; } this.setState({ placeholderStyle }); } - updatePosition = (e) => { - let { offsetTop, offsetBottom, offset, target } = this.props; + @throttleByAnimationFrameDecorator() + updatePosition(e) { + let { offsetTop, offsetBottom, offset, target = getDefaultTarget } = this.props; const targetNode = target(); // Backwards support @@ -132,8 +123,8 @@ export default class Affix extends React.Component { }; const offsetMode = { - top: null as boolean, - bottom: null as boolean, + top: false, + bottom: false, }; // Default to `offsetTop=0`. if (typeof offsetTop !== 'number' && typeof offsetBottom !== 'number') { @@ -147,45 +138,53 @@ export default class Affix extends React.Component { const targetRect = getTargetRect(targetNode); const targetInnerHeight = (targetNode as Window).innerHeight || (targetNode as HTMLElement).clientHeight; - if (scrollTop > elemOffset.top - offsetTop && offsetMode.top) { + if (scrollTop > elemOffset.top - (offsetTop as number) && offsetMode.top) { // Fixed Top + const width = elemOffset.width; this.setAffixStyle(e, { position: 'fixed', - top: targetRect.top + offsetTop, + top: targetRect.top + (offsetTop as number), left: targetRect.left + elemOffset.left, - width: affixNode.offsetWidth, + width, }); - this.setPlaceholderStyle(e, { - width: affixNode.offsetWidth, + this.setPlaceholderStyle({ + width, height: affixNode.offsetHeight, }); } else if ( - scrollTop < elemOffset.top + elemSize.height + offsetBottom - targetInnerHeight && + scrollTop < elemOffset.top + elemSize.height + (offsetBottom as number) - targetInnerHeight && offsetMode.bottom ) { // Fixed Bottom const targetBottomOffet = targetNode === window ? 0 : (window.innerHeight - targetRect.bottom); + const width = elemOffset.width; this.setAffixStyle(e, { position: 'fixed', - bottom: targetBottomOffet + offsetBottom, + bottom: targetBottomOffet + (offsetBottom as number), left: targetRect.left + elemOffset.left, - width: affixNode.offsetWidth, + width, }); - this.setPlaceholderStyle(e, { - width: affixNode.offsetWidth, + this.setPlaceholderStyle({ + width, height: affixNode.offsetHeight, }); } else { - this.setAffixStyle(e, null); - this.setPlaceholderStyle(e, null); + 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); } } componentDidMount() { - warning(!('offset' in this.props), '`offset` prop of Affix is deprecated, use `offsetTop` instead.'); - - const target = this.props.target; - this.setTargetEventListeners(target); + const target = this.props.target || getDefaultTarget; + // Wait for parent component ref has its value + this.timeout = setTimeout(() => { + this.setTargetEventListeners(target); + }); } componentWillReceiveProps(nextProps) { @@ -200,10 +199,16 @@ export default class Affix extends React.Component { componentWillUnmount() { this.clearScrollEventListeners(); + clearTimeout(this.timeout); + (this.updatePosition as any).cancel(); } setTargetEventListeners(getTarget) { const target = getTarget(); + if (!target) { + return; + } + this.clearScrollEventListeners(); this.scrollEvent = addEventListener(target, 'scroll', this.updatePosition); this.resizeEvent = addEventListener(target, 'resize', this.updatePosition); } @@ -218,16 +223,13 @@ export default class Affix extends React.Component { render() { const className = classNames({ - 'ant-affix': this.state.affixStyle, + [this.props.prefixCls || 'ant-affix']: this.state.affixStyle, }); - const props = assign({}, this.props); - delete props.offsetTop; - delete props.offsetBottom; - delete props.target; - + const props = omit(this.props, ['prefixCls', 'offsetTop', 'offsetBottom', 'target', 'onChange']); + const placeholderStyle = { ...this.state.placeholderStyle, ...this.props.style }; return ( -
+
{this.props.children}
diff --git a/components/affix/index.zh-CN.md b/components/affix/index.zh-CN.md index bb4a4f54ab..59ad33ac60 100644 --- a/components/affix/index.zh-CN.md +++ b/components/affix/index.zh-CN.md @@ -1,8 +1,8 @@ --- category: Components -chinese: 固钉 -type: Other -english: Affix +subtitle: 固钉 +type: Navigation +title: Affix --- 将页面元素钉在可视范围。 @@ -15,10 +15,17 @@ english: Affix ## API - | 成员 | 说明 | 类型 | 默认值 | |-------------|----------------|--------------------|--------------| -| offsetTop | 距离窗口顶部达到指定偏移量后触发 | Number | | -| offsetBottom | 距离窗口底部达到指定偏移量后触发 | Number | | -| target | 设置 `Affix` 需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数 | Function | () => window | +| offsetTop | 距离窗口顶部达到指定偏移量后触发 | number | | +| offsetBottom | 距离窗口底部达到指定偏移量后触发 | number | | +| target | 设置 `Affix` 需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数 | () => HTMLElement | () => window | | onChange | 固定状态改变时触发的回调函数 | Function(affixed) | 无 | + +**注意：**`Affix` 内的元素不要使用绝对定位，如需要绝对定位的效果，可以直接设置 `Affix` 为绝对定位： + +```jsx + + ... + +``` diff --git a/components/affix/style/index.less b/components/affix/style/index.less index 5d4cdabcd0..cd61d1ed08 100644 --- a/components/affix/style/index.less +++ b/components/affix/style/index.less @@ -1,6 +1,6 @@ @import "../../style/themes/default"; -.ant-affix { +.@{ant-prefix}-affix { position: fixed; z-index: @zindex-affix; } diff --git a/components/alert/__tests__/__snapshots__/demo.test.js.snap b/components/alert/__tests__/__snapshots__/demo.test.js.snap new file mode 100644 index 0000000000..0406835d75 --- /dev/null +++ b/components/alert/__tests__/__snapshots__/demo.test.js.snap @@ -0,0 +1,393 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`renders ./components/alert/demo/banner.md correctly 1`] = ` +
+
+ + + Warning text + + +
+
+
+ + + Very long warning text warning text text text text text text text + + + + + +
+
+`; + +exports[`renders ./components/alert/demo/basic.md correctly 1`] = ` +
+ + Success Text + + +
+`; + +exports[`renders ./components/alert/demo/closable.md correctly 1`] = ` +
+
+ + Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text + + + + + +
+
+ + Error Text + + + Error Description Error Description Error Description Error Description Error Description Error Description + + + + +
+
+`; + +exports[`renders ./components/alert/demo/close-text.md correctly 1`] = ` +
+ + Info Text + + + + Close Now + +
+`; + +exports[`renders ./components/alert/demo/description.md correctly 1`] = ` +
+
+ + Success Text + + + Success Description Success Description Success Description + +
+
+ + Info Text + + + Info Description Info Description Info Description Info Description + +
+
+ + Warning Text + + + Warning Description Warning Description Warning Description Warning Description + +
+
+ + Error Text + + + Error Description Error Description Error Description Error Description + +
+
+`; + +exports[`renders ./components/alert/demo/icon.md correctly 1`] = ` +
+
+ + + Success Tips + + +
+
+ + + Informational Notes + + +
+
+ + + Warning + + +
+
+ + + Error + + +
+
+ + + success tips + + + Detailed description and advices about successful copywriting. + +
+
+ + + Informational Notes + + + Additional description and informations about copywriting. + +
+
+ + + Warning + + + This is a warning notice about copywriting. + +
+
+ + + Error + + + This is an error message about copywriting. + +
+
+`; + +exports[`renders ./components/alert/demo/style.md correctly 1`] = ` +
+
+ + Success Text + + +
+
+ + Info Text + + +
+
+ + Warning Text + + +
+
+ + Error Text + + +
+
+`; diff --git a/components/alert/__tests__/demo.test.js b/components/alert/__tests__/demo.test.js new file mode 100644 index 0000000000..0810864015 --- /dev/null +++ b/components/alert/__tests__/demo.test.js @@ -0,0 +1,3 @@ +import demoTest from '../../../tests/shared/demoTest'; + +demoTest('alert'); diff --git a/components/alert/demo/banner.md b/components/alert/demo/banner.md index 35d3e7f20e..9883b4cb26 100644 --- a/components/alert/demo/banner.md +++ b/components/alert/demo/banner.md @@ -1,5 +1,6 @@ --- order: 6 +iframe: true title: zh-CN: 顶部公告 en-US: Banner @@ -7,11 +8,11 @@ title: ## zh-CN -用作顶部公告时，默认有图标，`type` 为 'warning'，并有特殊样式。 +页面顶部通告形式，默认有图标且`type` 为 'warning'。 ## en-US -When `Alert` is used as banner, it has particular style, Icon and `type`(warning) are specified by default. +Display Alert as a banner at top of page. ````jsx import { Alert } from 'antd'; diff --git a/components/alert/demo/icon.md b/components/alert/demo/icon.md index a6fda9ec68..8b94e9b3b3 100644 --- a/components/alert/demo/icon.md +++ b/components/alert/demo/icon.md @@ -17,31 +17,31 @@ Decent icon make information more clear and more friendly. import { Alert } from 'antd'; ReactDOM.render(
- - - - + + + + diff --git a/components/alert/demo/style.md b/components/alert/demo/style.md index d5bb487956..7fae3b28b6 100644 --- a/components/alert/demo/style.md +++ b/components/alert/demo/style.md @@ -11,7 +11,7 @@ title: ## en-US -There are 4 kinds of Alert: `success`, `info`, `warning`, `error`. +There are 4 types of Alert: `success`, `info`, `warning`, `error`. ````jsx import { Alert } from 'antd'; diff --git a/components/alert/index.en-US.md b/components/alert/index.en-US.md index c52c7d917f..8e99864531 100644 --- a/components/alert/index.en-US.md +++ b/components/alert/index.en-US.md @@ -1,25 +1,25 @@ --- category: Components -type: Views -english: Alert +type: Feedback +title: Alert --- Alert component for feedback. -## When to use +## When To Use - When you need to show alert messages for users. -- When you need a persist static container, and closable by user actions. +- When you need a persistent static container which is closable by user actions. ## API | 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 | - | +| type | Type of Alert styles, options:`success`, `info`, `warning`, `error` | string | `info` | +| closable | Whether Alert can be closed | boolean | - | +| closeText | Close text to show | string\|ReactNode | - | +| message | Content of Alert | string\|ReactNode | - | +| description | Additional content of Alert | string\|ReactNode | - | | onClose | Callback when close Alert | Function | - | -| showIcon | Whether to show icon | Boolean | false | -| banner | Whether to show as banner | Boolean | false | +| showIcon | Whether to show icon | boolean | false | +| banner | Whether to show as banner | boolean | false | diff --git a/components/alert/index.tsx b/components/alert/index.tsx old mode 100644 new mode 100755 index 680a504294..fb08917c9b --- a/components/alert/index.tsx +++ b/components/alert/index.tsx @@ -1,10 +1,12 @@ -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'; -interface AlertProps { +function noop() {} + +export interface AlertProps { /** * Type of Alert styles, options:`success`, `info`, `warning`, `error` */ @@ -18,19 +20,17 @@ interface AlertProps { /** Additional content of Alert */ description?: React.ReactNode; /** Callback when close Alert */ - onClose?: (event) => void; + onClose?: React.MouseEventHandler; /** Whether to show icon */ showIcon?: boolean; style?: React.CSSProperties; prefixCls?: string; + className?: string; banner?: boolean; } export default class Alert extends React.Component { static defaultProps = { - prefixCls: 'ant-alert', - showIcon: false, - onClose() {}, type: 'info', }; constructor(props) { @@ -51,7 +51,7 @@ export default class Alert extends React.Component { this.setState({ closing: false, }); - this.props.onClose(e); + (this.props.onClose || noop)(e); } animationEnd = () => { this.setState({ @@ -61,7 +61,8 @@ export default class Alert extends React.Component { } render() { let { - closable, description, type, prefixCls, message, closeText, showIcon, banner, + closable, description, type, prefixCls = 'ant-alert', message, closeText, showIcon, banner, + className = '', style, } = this.props; // banner模式默认有 Icon @@ -92,33 +93,37 @@ export default class Alert extends React.Component { iconType += '-o'; } - let alertCls = classNames({ - [prefixCls]: true, + let alertCls = classNames(prefixCls, { [`${prefixCls}-${type}`]: true, [`${prefixCls}-close`]: !this.state.closing, [`${prefixCls}-with-description`]: !!description, [`${prefixCls}-no-icon`]: !showIcon, [`${prefixCls}-banner`]: !!banner, - }); + }, className); // closeable when closeText is assigned if (closeText) { closable = true; } + const closeIcon = closable ? ( + + {closeText || } + + ) : null; + return this.state.closed ? null : ( - -
- {showIcon ? : null} +
+ {showIcon ? : null} {message} {description} - {closable ? - {closeText || } - : null} + {closeIcon}
); diff --git a/components/alert/index.zh-CN.md b/components/alert/index.zh-CN.md index 07d6543b7c..d9f5e0f0a2 100644 --- a/components/alert/index.zh-CN.md +++ b/components/alert/index.zh-CN.md @@ -1,8 +1,8 @@ --- category: Components -chinese: 警告提示 -type: Views -english: Alert +subtitle: 警告提示 +type: Feedback +title: Alert --- 警告提示，展现需要关注的信息。 @@ -16,12 +16,12 @@ english: Alert | 参数 | 说明 | 类型 | 默认值 | |----------- |--------------------------------------------------------- | ---------- |-------| -| type | 指定警告提示的样式，有四种选择 `success`、`info`、`warning`、`error` | String | `info` | -| closable | 默认不显示关闭按钮 | Boolean | 无 | -| closeText | 自定义关闭按钮 | React.Node | 无 | -| message | 警告提示内容 | React.Node | 无 | -| description | 警告提示的辅助性文字介绍 | React.Node | 无 | +| type | 指定警告提示的样式，有四种选择 `success`、`info`、`warning`、`error` | string | `info` | +| closable | 默认不显示关闭按钮 | boolean | 无 | +| closeText | 自定义关闭按钮 | string\|ReactNode | 无 | +| message | 警告提示内容 | string\|ReactNode | 无 | +| description | 警告提示的辅助性文字介绍 | string\|ReactNode | 无 | | onClose | 关闭时触发的回调函数 | Function | 无 | -| showIcon | 是否显示辅助图标 | Boolean | false | -| banner | 是否用作顶部公告 | Boolean | false | +| showIcon | 是否显示辅助图标 | boolean | false | +| banner | 是否用作顶部公告 | boolean | false | diff --git a/components/alert/style/index.less b/components/alert/style/index.less index 56660b1760..52e7e6ffea 100644 --- a/components/alert/style/index.less +++ b/components/alert/style/index.less @@ -1,13 +1,13 @@ @import "../../style/themes/default"; -@alert-prefix-cls: ant-alert; +@alert-prefix-cls: ~"@{ant-prefix}-alert"; .@{alert-prefix-cls} { position: relative; padding: 8px 48px 8px 38px; border-radius: @border-radius-base; color: @text-color; - font-size: 12px; + font-size: @font-size-base; line-height: 16px; margin-bottom: 10px; @@ -16,53 +16,52 @@ } &-icon { - font-size: 14px; - top: 9px; + font-size: @font-size-lg; + top: 9.5px; left: 16px; position: absolute; } &-description { - font-size: 12px; - color: @legend-color; + font-size: @font-size-base; line-height: 21px; display: none; } &-success { - border: 1px solid tint(@success-color, 80%); - background-color: tint(@success-color, 90%); + border: @border-width-base @border-style-base @green-2; + background-color: @green-1; .@{alert-prefix-cls}-icon { color: @success-color; } } &-info { - border: 1px solid tint(@primary-color, 80%); - background-color: tint(@primary-color, 90%); + border: @border-width-base @border-style-base @primary-2; + background-color: @primary-1; .@{alert-prefix-cls}-icon { - color: @primary-color; + color: @info-color; } } &-warning { - border: 1px solid tint(@warning-color, 80%); - background-color: tint(@warning-color, 90%); + border: @border-width-base @border-style-base @yellow-2; + background-color: @yellow-1; .@{alert-prefix-cls}-icon { color: @warning-color; } } &-error { - border: 1px solid tint(@error-color, 80%); - background-color: tint(@error-color, 90%); + border: @border-width-base @border-style-base @red-2; + background-color: @red-1; .@{alert-prefix-cls}-icon { color: @error-color; } } &-close-icon { - font-size: 12px; + font-size: @font-size-base; position: absolute; right: 16px; top: 10px; @@ -71,11 +70,11 @@ overflow: hidden; cursor: pointer; - .anticon-cross { - color: @legend-color; + .@{iconfont-css-prefix}-cross { + color: @text-color-secondary; transition: color .3s ease; &:hover { - color: #444; + color: #404040; } } } @@ -86,7 +85,7 @@ } &-with-description { - padding: 16px 16px 16px 69px; + padding: 16px 16px 16px 60px; position: relative; border-radius: @border-radius-base; margin-bottom: 10px; @@ -100,24 +99,24 @@ &-with-description &-icon { position: absolute; - top: 50%; - left: 24px; - margin-top: -15px; - font-size: 29px; + top: 16px; + left: 20px; + font-size: 24px; } &-with-description &-close-icon { position: absolute; - top: 17px; + top: 16px; right: 16px; cursor: pointer; - font-size: 12px; + font-size: @font-size-base; } &-with-description &-message { - font-size: 14px; - color: @text-color; + font-size: @font-size-lg; + color: @heading-color; display: block; + margin-bottom: 4px; } &-with-description &-description { diff --git a/components/anchor/AnchorLink.tsx b/components/anchor/AnchorLink.tsx new file mode 100644 index 0000000000..04b291cd00 --- /dev/null +++ b/components/anchor/AnchorLink.tsx @@ -0,0 +1,105 @@ +import React from 'react'; +import classNames from 'classnames'; +import AnchorHelper, { scrollTo } from './anchorHelper'; + +export interface AnchorLinkProps { + href: string; + onClick?: (href: string, component: Element) => void; + active?: boolean; + prefixCls?: string; + children?: any; + title: React.ReactNode; + offsetTop?: number; + bounds?: number; + target?: () => HTMLElement | Window; + affix?: boolean; +} + +export default class AnchorLink extends React.Component { + static __ANT_ANCHOR_LINK = true; + static contextTypes = { + anchorHelper: React.PropTypes.any, + }; + + static defaultProps = { + href: '#', + prefixCls: 'ant-anchor', + }; + + context: { + anchorHelper: AnchorHelper; + }; + + private _component: Element; + + setActiveAnchor() { + const { bounds, offsetTop, href, affix } = this.props; + const { anchorHelper } = this.context; + const active = affix && anchorHelper && anchorHelper.getCurrentAnchor(offsetTop, bounds) === href; + if (active && anchorHelper) { + anchorHelper.setActiveAnchor(this._component); + } + } + + componentDidMount() { + this.setActiveAnchor(); + } + + componentDidUpdate() { + this.setActiveAnchor(); + } + + renderAnchorLink = (child) => { + const { href } = child.props; + if (href) { + this.context.anchorHelper.addLink(href); + return React.cloneElement(child, { + onClick: this.props.onClick, + prefixCls: this.props.prefixCls, + affix: this.props.affix, + offsetTop: this.props.offsetTop, + }); + } + return child; + } + + refsTo = (component) => { + this._component = component; + } + + scrollTo = (e) => { + e.preventDefault(); + const { onClick, href } = this.props; + const { anchorHelper } = this.context; + if (onClick) { + onClick(href, this._component); + } else { + const scrollToFn = anchorHelper ? anchorHelper.scrollTo : scrollTo; + scrollToFn(href, this.props.offsetTop); + } + } + + render() { + const { prefixCls, href, children, title, bounds, offsetTop, affix } = this.props; + const { anchorHelper } = this.context; + const active = affix && anchorHelper && anchorHelper.getCurrentAnchor(offsetTop, bounds) === href; + const cls = classNames({ + [`${prefixCls}-link`]: true, + [`${prefixCls}-link-active`]: active, + }); + return ( +
+ + {title} + + {React.Children.map(children, this.renderAnchorLink)} +
+ ); + } +} diff --git a/components/anchor/__tests__/Anchor.test.js b/components/anchor/__tests__/Anchor.test.js new file mode 100644 index 0000000000..54db866a7d --- /dev/null +++ b/components/anchor/__tests__/Anchor.test.js @@ -0,0 +1,20 @@ +import React from 'react'; +import { mount } from 'enzyme'; +import Anchor from '..'; + +const { Link } = Anchor; + +describe('Anchor Render', () => { + it('Anchor render perfectly', () => { + const wrapper = mount( + + + + ); + + wrapper.find('a[href="#API"]').simulate('click'); + + wrapper.node.handleScroll(); + expect(wrapper.node.state).not.toBe(null); + }); +}); diff --git a/components/anchor/__tests__/__snapshots__/demo.test.js.snap b/components/anchor/__tests__/__snapshots__/demo.test.js.snap new file mode 100644 index 0000000000..d5c69537aa --- /dev/null +++ b/components/anchor/__tests__/__snapshots__/demo.test.js.snap @@ -0,0 +1,153 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`renders ./components/anchor/demo/basic.md correctly 1`] = ` + +`; + +exports[`renders ./components/anchor/demo/fixed.md correctly 1`] = ` +
+
+
+ +
+
+ + Basic demo + +
+
+ + Fixed demo + +
+
+ + API + +
+ + Anchor Props + +
+
+ + Link Props + +
+
+
+
+`; diff --git a/components/anchor/__tests__/demo.test.js b/components/anchor/__tests__/demo.test.js new file mode 100644 index 0000000000..302081fcbe --- /dev/null +++ b/components/anchor/__tests__/demo.test.js @@ -0,0 +1,3 @@ +import demoTest from '../../../tests/shared/demoTest'; + +demoTest('anchor'); diff --git a/components/anchor/anchorHelper.tsx b/components/anchor/anchorHelper.tsx new file mode 100644 index 0000000000..f5761aeb51 --- /dev/null +++ b/components/anchor/anchorHelper.tsx @@ -0,0 +1,129 @@ +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 type Section = { + top: number; + bottom: number; + section: any; +}; + +export function scrollTo(href, offsetTop = 0, target = getDefaultTarget, 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); +} + +class AnchorHelper { + private links: Array; + 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(offsetTop: number = 0, bounds = 5) { + let activeAnchor = ''; + if (typeof document === 'undefined') { + return activeAnchor; + } + + const linksPositions = (this.links + .map(section => { + const target = document.getElementById(section.substring(1)); + if (target && getOffsetTop(target) < offsetTop + bounds) { + const top = getOffsetTop(target); + if (top <= offsetTop + bounds) { + return { + section, + top, + bottom: top + target.clientHeight, + }; + } + } + return null; + }) + .filter(section => section !== null) as Array
); + + if (linksPositions.length) { + const maxSection = linksPositions.reduce((prev, curr) => curr.top > prev.top ? curr : prev); + return maxSection.section; + } + return ''; + } + + scrollTo(href, offsetTop, target = getDefaultTarget, callback = () => {}) { + scrollTo(href, offsetTop, target, callback); + } +} + +export default AnchorHelper; diff --git a/components/anchor/demo/basic.md b/components/anchor/demo/basic.md new file mode 100644 index 0000000000..d193e0c818 --- /dev/null +++ b/components/anchor/demo/basic.md @@ -0,0 +1,36 @@ +--- +order: 0 +title: + zh-CN: 基本 + en-US: Basic +--- + +## zh-CN + +最简单的用法。 + +## en-US + +The simplest usage. + +```jsx +import { Anchor } from 'antd'; +const { Link } = Anchor; + +ReactDOM.render( + + + + + + + + +, mountNode); +``` + + diff --git a/components/anchor/demo/fixed.md b/components/anchor/demo/fixed.md new file mode 100644 index 0000000000..2e0fdbb8f9 --- /dev/null +++ b/components/anchor/demo/fixed.md @@ -0,0 +1,30 @@ +--- +order: 2 +title: + zh-CN: 固定 + en-US: Fixed Anchor +--- + +## zh-CN + +不浮动，状态不随页面滚动变化。 + +## en-US + +Do not change state when page is scrolling. + +```jsx +import { Anchor } from 'antd'; +const { Link } = Anchor; + +ReactDOM.render( + + + + + + + + +, mountNode); +``` diff --git a/components/anchor/index.en-US.md b/components/anchor/index.en-US.md new file mode 100644 index 0000000000..b4607e7cd8 --- /dev/null +++ b/components/anchor/index.en-US.md @@ -0,0 +1,31 @@ +--- +category: Components +type: Other +cols: 2 +title: Anchor +--- + +Hyperlinks to scroll on one page. + +## When To Use + +For displaying anchor hyperlinks on page and jumping between them. + +## API + +### Anchor Props + +| Property | Description | Type | Default | +|--------------|-----------------------|----------|--------------| +| 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) | +| affix | Fixed mode of Anchor | boolean | false | +| showInkInFixed | Whether show ink-balls in Fixed mode | boolean | false | + +### Link Props + +| Property | Description | Type | Default | +|-------------|----------------|--------------------|--------------| +| href | target of hyperlink | string | | +| title | content of hyperlink | string\|ReactNode | | diff --git a/components/anchor/index.tsx b/components/anchor/index.tsx new file mode 100644 index 0000000000..f34d6d6a2f --- /dev/null +++ b/components/anchor/index.tsx @@ -0,0 +1,145 @@ +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 interface AnchorProps { + target?: () => HTMLElement | Window; + children?: React.ReactNode; + prefixCls?: string; + offsetTop?: number; + bounds?: number; + className?: string; + style?: React.CSSProperties; + affix?: boolean; + showInkInFixed?: boolean; +} + +export default class Anchor extends React.Component { + static Link = AnchorLink; + + static defaultProps = { + prefixCls: 'ant-anchor', + affix: true, + showInkInFixed: false, + }; + + static childContextTypes = { + anchorHelper: React.PropTypes.any, + }; + + refs: { + ink?: any; + }; + + private scrollEvent: any; + private anchorHelper: AnchorHelper; + private _avoidInk: boolean; + + constructor(props) { + super(props); + this.state = { + activeAnchor: null, + animated: true, + }; + this.anchorHelper = new AnchorHelper(); + } + + handleScroll = () => { + this.setState({ + activeAnchor: this.anchorHelper.getCurrentAnchor(this.props.offsetTop, 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() { + if (!this._avoidInk) { + this.updateInk(); + } + } + + updateInk = () => { + const activeAnchor = this.anchorHelper.getCurrentActiveAnchor(); + if (activeAnchor) { + this.refs.ink.style.top = `${activeAnchor.offsetTop + activeAnchor.clientHeight / 2 - 4.5}px`; + } + } + + clickAnchorLink = (href, component) => { + this._avoidInk = true; + this.refs.ink.style.top = `${component.offsetTop + component.clientHeight / 2 - 4.5}px`; + this.anchorHelper.scrollTo(href, this.props.offsetTop, getDefaultTarget, () => { + this._avoidInk = false; + }); + } + + renderAnchorLink = (child) => { + + const { href } = child.props; + if (child.type.__ANT_ANCHOR_LINK && href) { + this.anchorHelper.addLink(href); + return React.cloneElement(child, { + onClick: this.clickAnchorLink, + prefixCls: this.props.prefixCls, + bounds: this.props.bounds, + affix: this.props.affix || this.props.showInkInFixed, + offsetTop: this.props.offsetTop, + }); + } + return child; + } + + render() { + const { prefixCls, offsetTop, style, className = '', affix, showInkInFixed } = this.props; + const { activeAnchor, animated } = this.state; + const inkClass = classNames({ + [`${prefixCls}-ink-ball`]: true, + animated, + visible: !!activeAnchor, + }); + + const wrapperClass = classNames({ + [`${prefixCls}-wrapper`]: true, + }, className); + + const anchorClass = classNames(prefixCls, { + 'fixed': !affix && !showInkInFixed, + }); + + const anchorContent = ( +
+
+
+ +
+ {React.Children.toArray(this.props.children).map(this.renderAnchorLink)} +
+
+ ); + + return !affix ? anchorContent : ( + + {anchorContent} + + ); + } +} diff --git a/components/anchor/index.zh-CN.md b/components/anchor/index.zh-CN.md new file mode 100644 index 0000000000..f40fa64c98 --- /dev/null +++ b/components/anchor/index.zh-CN.md @@ -0,0 +1,32 @@ +--- +category: Components +subtitle: 锚点 +cols: 2 +type: Other +title: Anchor +--- + +用于跳转到页面指定位置。 + +## 何时使用 + +需要展现当前页面上可供跳转的锚点链接，以及快速在锚点之间跳转。 + +## API + +### Anchor Props + +| 成员 | 说明 | 类型 | 默认值 | +|-------------|----------------|--------------------|--------------| +| offsetTop | 距离窗口顶部达到指定偏移量后触发 | number | | +| offsetBottom | 距离窗口底部达到指定偏移量后触发 | number | | +| bounds | 锚点区域边界 | number | 5(px) | +| affix | 固定模式 | boolean | false | +| showInkInFixed | 固定模式是否显示小圆点 | boolean | false | + +### Link Props + +| 成员 | 说明 | 类型 | 默认值 | +|-------------|----------------|--------------------|--------------| +| href | 锚点链接 | string | | +| title | 文字内容 | string\|ReactNode | | diff --git a/components/anchor/style/index.less b/components/anchor/style/index.less new file mode 100644 index 0000000000..acf20bb194 --- /dev/null +++ b/components/anchor/style/index.less @@ -0,0 +1,78 @@ +@import "../../style/themes/default"; + +.@{ant-prefix} { + &-anchor { + position: relative; + &-wrapper { + background-color: @component-background; + } + + &-ink { + position: absolute; + 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: @component-background; + left: 50%; + transition: top .3s ease-in-out; + transform: translateX(-50%); + &.visible { + display: inline-block; + } + } + } + + &.fixed &-ink &-ink-ball { + display: none; + } + } + + &-anchor-link { + padding: 8px 0 8px 18px; + line-height: 1; + + & & { + padding-top: 6px; + padding-bottom: 6px; + } + + &-title { + display: block; + position: relative; + transition: all .3s; + color: @text-color; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + margin-bottom: 8px; + } + + &-title:only-child { + margin-bottom: 0; + } + + &-active > &-title { + color: @primary-color; + } + + & > & { + font-size: @font-size-base; + } + } +} diff --git a/components/back-top/style/index.js b/components/anchor/style/index.tsx similarity index 100% rename from components/back-top/style/index.js rename to components/anchor/style/index.tsx diff --git a/components/auto-complete/InputElement.tsx b/components/auto-complete/InputElement.tsx new file mode 100644 index 0000000000..e9323a5f02 --- /dev/null +++ b/components/auto-complete/InputElement.tsx @@ -0,0 +1,19 @@ +import React from 'react'; +import { findDOMNode } from 'react-dom'; + +export default class InputElement extends React.Component { + private ele: HTMLInputElement; + + focus = () => { + this.ele.focus ? this.ele.focus() : (findDOMNode(this.ele) as HTMLInputElement).focus(); + } + blur = () => { + this.ele.blur ? this.ele.blur() : (findDOMNode(this.ele) as HTMLInputElement).blur(); + } + render() { + return React.cloneElement(this.props.children, { + ...this.props, + ref: ele => this.ele = (ele as HTMLInputElement), + }, null); + } +} diff --git a/components/auto-complete/__tests__/__snapshots__/demo.test.js.snap b/components/auto-complete/__tests__/__snapshots__/demo.test.js.snap new file mode 100644 index 0000000000..946dfa14de --- /dev/null +++ b/components/auto-complete/__tests__/__snapshots__/demo.test.js.snap @@ -0,0 +1,367 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`renders ./components/auto-complete/demo/antd.md correctly 1`] = ` +
+