Browse Source

meger feature to master (#16421)

* use ul in list

* update snapshot

* update comment

* feat: TreeSelect support `showSearch` in multiple mode (#15933)

* update rc-tree-select

* typo

* update desc & snapshot

* update desc & snapshot

* check default showSearch

* feat: table customizing variable (#15971)

* feat: added table selected row color variable

* fix: @table-selected-row-color default is inherit

* feat: Upload support customize previewFile (#15984)

* support preview file

* use promise

* dealy load

* use canvas of render

* use domHook of test

* update demo

* add snapshot

* update types

* update testcase

* feat: form customizing variables (#15954)

* fix: added styling form input background-color

* feat: added '@form-warning-input-bg' variable

* feat: added '@form-error-input-bg' variable

* use li wrap with comment

* feat: Support append theme less file with less-variable (#16118)

* add override

* add override support

* update doc

* feat: dropdown support set right icon

* docs: update doc of dropdown component

* style: format dropdown-button.md

* test: update updateSnapshot

* style: format dropdown-button.md

* test: update updateSnapshot

* test: update updateSnapshot

* style: change style of dropdown-button demo

* fix: fix document table order

* feat: Support SkeletonAvatarProps.size accept number (#16078) (#16128)

* chore:update style of demo

* feat: Notification functions accept top, bottom and getContainer as arguments

* drawer: add afterVisibleChange

* rm onVisibleChange

* update

* feat: 🇭🇷 hr_HR locale (#16258)

* Added Croatian locale

* fixed lint error

*  Add test cases for hr_HR

* 📝 update i18n documentation

* feat:  add `htmlFor` in Form.Item (#16278)

* add htmlFor in Form.Item

* update doc

* feat: Button support `link` type (#16289)

close #15892

* feat: Add Timeline.Item.position (#16148) (#16193)

* fix: Timeline.pendingDot interface documentation there is a small problem (#16177)

* feat: Add Timeline.Item.position (#16148)

* doc: add version infomation for Timeline.Item.position

* refactor: Update Tree & TreeSelect deps (#16330)

* use CSSMotion

* update snapshot

* feat: Collapse support `expandIconPosition` (#16365)

* update doc

* support expandIconPosition

* update snapshot

* feat: Breadcrumb  support DropDown (#16315)

* breadcrumbs support drop down menu

* update doc

* add require less

* fix test

* fix md doc

* less code

* fix  style warning

* update snap

* add children render test

* feat: TreeNode support checkable

* feat: add optional to support top and left slick dots (#16186) (#16225)

* add optional to support top and left slick dots

* update carousel snapshot

* Update doc, add placement demo

* update carousel placement demo snapshots

* rename dots placement to position

* update vertical as deprecated

* rename dotsPosition to dotPosition

* refine code

* add warning testcase for vertical

* remove unused warning

* update expression

* Additional test case for dotPosition

* refactor: Upgrade `rc-tree-select` to support pure React motion (#16402)

* upgrade `rc-tree-select`

* update snapshot

* 3.17.0 changelog

* fix warning

* fix review warning
pull/16445/head
陈帅 6 years ago
committed by GitHub
parent
commit
785c132262
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
  1. 159
      CHANGELOG.en-US.md
  2. 180
      CHANGELOG.zh-CN.md
  3. 54
      components/__tests__/util/domHook.js
  4. 38
      components/_util/motion.tsx
  5. 6
      components/_util/openAnimation.tsx
  6. 2
      components/affix/style/index.less
  7. 2
      components/alert/style/index.less
  8. 2
      components/anchor/style/index.less
  9. 2
      components/auto-complete/style/index.less
  10. 2
      components/avatar/style/index.less
  11. 2
      components/back-top/style/index.less
  12. 2
      components/badge/style/index.less
  13. 60
      components/breadcrumb/Breadcrumb.tsx
  14. 32
      components/breadcrumb/BreadcrumbItem.tsx
  15. 33
      components/breadcrumb/__tests__/Breadcrumb.test.js
  16. 75
      components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.js.snap
  17. 87
      components/breadcrumb/__tests__/__snapshots__/demo.test.js.snap
  18. 4
      components/breadcrumb/__tests__/__snapshots__/router.test.js.snap
  19. 14
      components/breadcrumb/demo/basic.md
  20. 54
      components/breadcrumb/demo/overlay.md
  21. 14
      components/breadcrumb/demo/router.md
  22. 48
      components/breadcrumb/index.en-US.md
  23. 83
      components/breadcrumb/index.zh-CN.md
  24. 8
      components/breadcrumb/style/index.less
  25. 3
      components/breadcrumb/style/index.tsx
  26. 52
      components/button/__tests__/__snapshots__/demo.test.js.snap
  27. 32
      components/button/button.tsx
  28. 1
      components/button/demo/basic.md
  29. 3
      components/button/demo/block.md
  30. 3
      components/button/demo/disabled.md
  31. 1
      components/button/demo/ghost.md
  32. 1
      components/button/demo/size.md
  33. 2
      components/button/index.en-US.md
  34. 4
      components/button/index.zh-CN.md
  35. 12
      components/button/style/index.less
  36. 34
      components/button/style/mixin.less
  37. 2
      components/calendar/locale/hr_HR.tsx
  38. 2
      components/calendar/style/index.less
  39. 2
      components/card/style/index.less
  40. 456
      components/carousel/__tests__/__snapshots__/demo.test.js.snap
  41. 137
      components/carousel/__tests__/__snapshots__/index.test.js.snap
  42. 27
      components/carousel/__tests__/index.test.js
  43. 2
      components/carousel/demo/fade.md
  44. 63
      components/carousel/demo/position.md
  45. 43
      components/carousel/demo/vertical.md
  46. 18
      components/carousel/index.en-US.md
  47. 25
      components/carousel/index.tsx
  48. 18
      components/carousel/index.zh-CN.md
  49. 16
      components/carousel/style/index.less
  50. 2
      components/cascader/style/index.less
  51. 2
      components/checkbox/style/index.less
  52. 12
      components/collapse/Collapse.tsx
  53. 273
      components/collapse/__tests__/__snapshots__/demo.test.js.snap
  54. 4
      components/collapse/__tests__/__snapshots__/index.test.js.snap
  55. 57
      components/collapse/demo/extra.md
  56. 25
      components/collapse/index.en-US.md
  57. 25
      components/collapse/index.zh-CN.md
  58. 18
      components/collapse/style/index.less
  59. 178
      components/comment/__tests__/__snapshots__/demo.test.js.snap
  60. 16
      components/comment/demo/list.md
  61. 2
      components/comment/style/index.less
  62. 174
      components/config-provider/__tests__/__snapshots__/components.test.js.snap
  63. 2
      components/config-provider/style/index.less
  64. 19
      components/date-picker/locale/hr_HR.tsx
  65. 2
      components/date-picker/style/index.less
  66. 2
      components/divider/style/index.less
  67. 150
      components/drawer/__tests__/__snapshots__/demo.test.js.snap
  68. 1
      components/drawer/index.en-US.md
  69. 2
      components/drawer/index.tsx
  70. 1
      components/drawer/index.zh-CN.md
  71. 2
      components/drawer/style/drawer.less
  72. 2
      components/drawer/style/index.less
  73. 46
      components/dropdown/__tests__/__snapshots__/demo.test.js.snap
  74. 2
      components/dropdown/__tests__/__snapshots__/dropdown-button.test.js.snap
  75. 21
      components/dropdown/demo/dropdown-button.md
  76. 2
      components/dropdown/demo/sub-menu.md
  77. 11
      components/dropdown/dropdown-button.tsx
  78. 24
      components/dropdown/index.en-US.md
  79. 21
      components/dropdown/index.zh-CN.md
  80. 2
      components/dropdown/style/index.less
  81. 2
      components/empty/style/index.less
  82. 13
      components/form/FormItem.tsx
  83. 26
      components/form/__tests__/label.test.js
  84. 23
      components/form/index.en-US.md
  85. 23
      components/form/index.zh-CN.md
  86. 6
      components/form/style/index.less
  87. 1
      components/form/style/mixin.less
  88. 2
      components/grid/style/index.less
  89. 2
      components/icon/style/index.less
  90. 2
      components/input-number/style/index.less
  91. 2
      components/input/style/index.less
  92. 2
      components/input/style/mixin.less
  93. 2
      components/input/style/search-input.less
  94. 2
      components/layout/style/index.less
  95. 7
      components/list/Item.tsx
  96. 64
      components/list/__tests__/__snapshots__/Item.test.js.snap
  97. 1176
      components/list/__tests__/__snapshots__/demo.test.js.snap
  98. 22
      components/list/__tests__/__snapshots__/pagination.test.js.snap
  99. 6
      components/list/index.tsx
  100. 10
      components/list/style/index.less

159
CHANGELOG.en-US.md

@ -9,12 +9,37 @@ timeline: true
#### Release Schedule
* Weekly release: patch version at the end of every week for routine bugfix (anytime for urgent bugfix).
* Monthly release: minor version at the end of every month for new features.
* Major version release is not included in this schedule for breaking change and new features.
- Weekly release: patch version at the end of every week for routine bugfix (anytime for urgent bugfix).
- Monthly release: minor version at the end of every month for new features.
- Major version release is not included in this schedule for breaking change and new features.
---
## 3.17.0
`2019-05-05`
- 🎉 Breadcrumb.Item supports `overlay` props to define drop-down menus. [#16315](https://github.com/ant-design/ant-design/pull/16315)
- 🎉 Button added a new type `link`. [#16289](https://github.com/ant-design/ant-design/pull/16289)
- ⌨️ Wrap List.Item under `ul` to enhance accessibility.[#15890](https://github.com/ant-design/ant-design/pull/15890)
- 🌟 TreeSelect support `showSearch` in multiple mode. [#15933](https://github.com/ant-design/ant-design/pull/15933)
- 🌟 Provides `previewFile` to customize preview logic. [#15984](https://github.com/ant-design/ant-design/pull/15984)
- 🌟 Added the `@table-selected-row-color` variable to customize the color selected by the table. [#15971](https://github.com/ant-design/ant-design/pull/15971) [@hextion](https://github.com/hextion)
- 🌟 Added `@form-warning-input-bg` and `@form-error-input-bg` variables to customize the background color when the form is in error state. [#15954](https://github.com/ant-design/ant-design/pull/15954) [@hextion](https://github.com/hextion)
- 🌟 Dropdown.Button supports `icon` props to customize icons. [#15996](https://github.com/ant-design/ant-design/pull/15996) [@DiamondYuan](https://github.com/DiamondYuan)
- 🌟 Support SkeletonAvatarProps `size` accept number. [#16128](https://github.com/ant-design/ant-design/pull/16128) [@MrHeer](https://github.com/MrHeer)
- 🌟 Notification.config now supports `getContainer` for custom dom rendering locations. [#16123](https://github.com/ant-design/ant-design/pull/16123) [@Nouzbe](https://github.com/Nouzbe)
- 🌟 Drawer supports `afterVisibleChange` props, which fires when the drawer animation is complete. [#16228](https://github.com/ant-design/ant-design/pull/16228)
- 🌟 Form.Item supports `htmlFor` props. [#16278](https://github.com/ant-design/ant-design/pull/16278)
- 🌟 Collapse supports `expandIconPosition` props. [#16365](https://github.com/ant-design/ant-design/pull/16365)
- 🌟 Carousel supports the location of custom panel indicator points. [#16225](https://github.com/ant-design/ant-design/pull/16225) [@yociduo](https://github.com/yociduo)
- 🌟 TreeNode supports the properties of `checkable`. [#16369](https://github.com/ant-design/ant-design/pull/16369)
- 🌟 🇭🇷 Added Croatian language pack. [#15641](https://github.com/ant-design/ant-design/pull/15641) [@fpintaric](https://github.com/fpintaric)
- 🐞 Fix Drawer wrong animation direction. [#16358](https://github.com/ant-design/ant-design/pull/16358)
- 🐞 Fix Slider mark text style will break line. [#15128](https://github.com/ant-design/ant-design/pull/15128)
- 🐞 Fix Checkbox.Group `onChange` pass removed value. [#16392](https://github.com/ant-design/ant-design/pull/16392)
- 🐞 Fixed multiple Typescript type errors. [#16043](https://github.com/ant-design/ant-design/pull/16043) [#16341](https://github.com/ant-design/ant-design/pull/16341) [#16343](https://github.com/ant-design/ant-design/pull/16343) [#16360](https://github.com/ant-design/ant-design/pull/16360) [#16344](https://github.com/ant-design/ant-design/pull/16344)
## 3.16.6
`2019-04-26`
@ -58,7 +83,7 @@ timeline: true
- 🐞 Fix issue that Affix's `target` does not work after it's value changing. [#16146](https://github.com/ant-design/ant-design/pull/16146)
- 🐞 Fix the Modal's animation issue Modal on first rendering. [#15795](https://github.com/ant-design/ant-design/issues/15795)
- 🐞 Fix issue that Table's `rowSelection.columnWidth` does not work. [#16163](https://github.com/ant-design/ant-design/issues/16163)
- 🐞 Fix type definition of Form.create. [#16095](https://github.com/ant-design/ant-design/issues/16095)
- 🐞 Fix type definition of Form.create. [#16095](https://github.com/ant-design/ant-design/issues/16095)
- 🐞 Fix type definition of Icon's `aria-hidden`. [#16202](https://github.com/ant-design/ant-design/pull/16202)
- 🐞 Fix type definition of PageHeader's `tags`. [#16092](https://github.com/ant-design/ant-design/issues/16092)
- 🌟 Add new less variable `@text-selection-bg;`. [#16155](https://github.com/ant-design/ant-design/pull/16155)
@ -186,10 +211,10 @@ timeline: true
- 🐞 Correct suffix icon in Input.Password. [#15381](https://github.com/ant-design/ant-design/pull/15381) [@melchior-voidwolf](https://github.com/melchior-voidwolf)
- 🐞 Fix Layout has classname `ant-layout-has-sider` even if `hasFixer` is set to `false`. [#15396](https://github.com/ant-design/ant-design/pull/15396) [@SoraYama](https://github.com/SoraYama)
- 🐞 Fix Divider alignment issue in PageHeader. [#15400](https://github.com/ant-design/ant-design/pull/15400)
- 🐞 Fix a style issue of Skeleton. [#15421](https://github.com/ant-design/ant-design/pull/15421) [@Maktel](https://github.com/Maktel)
- 🐞 Fix a style issue of Skeleton. [#15421](https://github.com/ant-design/ant-design/pull/15421) [@Maktel](https://github.com/Maktel)
- 🌟 Adjust multiple TypeScript types
- 🌟 FormComponentProps added a generic type of form values. [#15355](https://github.com/ant-design/ant-design/pull/15355)
- 🌟 Export ConfigProviderProps interface. [#15446](https://github.com/ant-design/ant-design/pull/15446) [@DiamondYuan](https://github.com/DiamondYuan)
- 🌟 Export ConfigProviderProps interface. [#15446](https://github.com/ant-design/ant-design/pull/15446) [@DiamondYuan](https://github.com/DiamondYuan)
- 🐞 Add `onClick` prop for Breadcrumb.Item. [#15331](https://github.com/ant-design/ant-design/pull/15331) [@tgxpuisb](https://github.com/tgxpuisb)
- 🐞 Add `style` prop for Steps.Step component. [#15393](https://github.com/ant-design/ant-design/pull/15393) [@pavolgolias](https://github.com/pavolgolias)
- 🐞 Fix `itemRender` definition of Pagination. [#15428](https://github.com/ant-design/ant-design/pull/15428) [@DiamondYuan](https://github.com/DiamondYuan)
@ -584,7 +609,7 @@ timeline: true
- 🐞 Fixed Table `Cannot read property 'children' of undefined` error when customize `column.title` as ReactNode. [#13542](https://github.com/ant-design/ant-design/issues/13542) [@geraldchen890806](https://github.com/geraldchen890806)
- 🐞 Fixed another border problem of Button when customized less variable `@border-width-base`. [#13534](https://github.com/ant-design/ant-design/issues/13534) [@morenyang](https://github.com/morenyang)
- 🐞 Fixed Upload don't support resolve `Blob` object when `beforeUpload` returns a Promise. [#13528](https://github.com/ant-design/ant-design/pull/13528/) [@huanz](https://github.com/huanz)
- https://github.com/ant-design/ant-design/pull/13536
- https://github.com/ant-design/ant-design/pull/13536
- 🐞 Fixed two props of Dropdown TypeScript definitions. [#13536](https://github.com/ant-design/ant-design/pull/13536) [@wangxingkang](https://github.com/wangxingkang)
## 3.11.1
@ -833,7 +858,6 @@ Component Fixes / Enhancements:
- 🐞 Fix the issue with mouse hover when using non-Input components in Input.Group. [#12407](https://github.com/ant-design/ant-design/pull/12407) [@hengkx](https://github.com/hengkx)
- 🐞 Fix some TypeScript type definitions. [#12374](https://github.com/ant-design/ant-design/pull/12374) [#12370](https://github.com/ant-design/ant-design/pull/12370) [#12354](https://github.com/ant-design/ant-design/pull/12354/files) [#12473](https://github.com/ant-design/ant-design/pull/12473)
## 3.9.3
`2018-09-22`
@ -899,8 +923,7 @@ Component Fixes / Enhancements:
In September we brought an update for `3.9.0`. There are many new features in `3.9.0`, Ant Design is getting stronger and solider.
- 🔥🔥🔥 In the `3.9.0` version, we redraw all the icons, adding two new categories, more than 90 new icons. And the bit adds a variety of styles to each icon. To this end, we have rewritten the Icon component, replaced the `fontface` icon with `SVG`, adding a number of features that allow us to quickly use new icons and styles.
![](https://gw.alipayobjects.com/zos/rmsportal/CVDHuodLwcDeyQBDoUIZ.png)
- 🔥🔥🔥 In the `3.9.0` version, we redraw all the icons, adding two new categories, more than 90 new icons. And the bit adds a variety of styles to each icon. To this end, we have rewritten the Icon component, replaced the `fontface` icon with `SVG`, adding a number of features that allow us to quickly use new icons and styles. ![](https://gw.alipayobjects.com/zos/rmsportal/CVDHuodLwcDeyQBDoUIZ.png)
- 💄 Replace the `css` font icon with the `SVG` icon, [see more discussion about it](https://github.com/ant-design/ant-design/issues/10353).
- 💄 You can now render a two-color icon.
- 💄 We provide three theme of icons: outlined, filled, twoTone, default theme is outlined.
@ -974,7 +997,6 @@ In addition, our **Ant Design Pro 2.0.0** version has also been released simulta
- 🐞 Fixed `selectable` prop is missing in TreeNode props. [#11604](https://github.com/ant-design/ant-design/issues/11604) [@apieceofbart](https://github.com/apieceofbart)
- 🐞 Fixed `autosize` prop is missing in Input props. [#11697](https://github.com/ant-design/ant-design/issues/11697)
## 3.8.1
`2018-08-12`
@ -1079,8 +1101,7 @@ Thanks to 24 contributors who send pull request to 3.8.0!
## 3.7.0
3.7.0 is a heavy update that brings a lot of exciting changes and new features.
Here are some highlights ✨:
3.7.0 is a heavy update that brings a lot of exciting changes and new features. Here are some highlights ✨:
- 🌟 Add drawer component : [Drawer](https://ant.design/components/drawer-cn/). [#10791](https://github.com/ant-design/ant-design/pull/10791)
- 🌟 Add `Tree.DirectoryTree` component as the built-in directory tree. [#7749](https://github.com/ant-design/ant-design/issues/7749)
@ -1103,7 +1124,7 @@ Component Fixes / Enhancements:
- Upgrade `rc-table` to `6.2.2` for Table. [f2fddff](https://github.com/ant-design/ant-design/commit/f2fddff3fd0d6b36e8e6d8ee06bfcbcc85ead4f0)
- 🌟 Add `expanded` as the fourth param of `expandedRowRender` prop to get the expanded state of current row. [#10379](https://github.com/ant-design/ant-design/issues/10379)
- 🌟 Add the ability to override the filter menu without the fully controlled component. [59cc3a8](https://github.com/ant-design/ant-design/commit/59cc3a8b6c643f7206feedf2dc2c7154296ba3e3) [@chrvadala](https://github.com/chrvadala)
- 🌟 `filterIcon` prop supports to be a render function which returns ReactNode. [1af4392](https://github.com/ant-design/ant-design/commit/1af4392ae9fbdaa6fcfbf2f0de5413100ef4a84a)
- 🌟 `filterIcon` prop supports to be a render function which returns ReactNode. [1af4392](https://github.com/ant-design/ant-design/commit/1af4392ae9fbdaa6fcfbf2f0de5413100ef4a84a)
- 🐞 Fix the row dislocation problem when the column is fixed. [#10392](https://github.com/ant-design/ant-design/issues/10392)
- 🌟 Allow to pass `data-*`, `aria-*` and `role-*` props to the inner for Alert. [f0b684d](https://github.com/ant-design/ant-design/commit/f0b684de6a7c422f0de56e1ef72aeb35ab25a858)
- 🌟 Add `alt` prop for Avatar to set the text when the image is unable to display. [#10798](https://github.com/ant-design/ant-design/pull/10798)
@ -1124,7 +1145,6 @@ Component Fixes / Enhancements:
- 🐞 Fix border radius when avatar has custom size. [e1e6523](https://github.com/ant-design/ant-design/commit/e1e6523452286ba56f20b73abad762a58ea7d7bc)
- 🌟 Add `okButtonDisabled` and `cancelButtonDisabled` props to disable ok button and cancel button. [#10955](https://github.com/ant-design/ant-design/pull/10955)
## 3.6.6
`2018-07-07`
@ -1197,15 +1217,15 @@ Component Fixes / Enhancements:
`2018-06-02`
* 🌟 `Form`'s error message now can be customized with ReactNode. [#10136](https://github.com/ant-design/ant-design/issues/10136) [@lovekonakona](https://github.com/lovekonakona)
* 🌟 `List` support customized configuration for position of pagination. [#10581](https://github.com/ant-design/ant-design/pull/10581) [@zheeeng](https://github.com/zheeeng)
* 🌟 `Layout.Sider` now can be configured with `light` or `dark` theme. [#10142](https://github.com/ant-design/ant-design/issues/10142) [@pd4d10](https://github.com/pd4d10)
* 🌟 Ant Design official site now supports offline mode. [#10625](https://github.com/ant-design/ant-design/issues/10625)
* 🌟 `Transfer` adding `style` and `operationStyle` props for further customization. [@eduludi](https://github.com/eduludi)
* 🌟 `Message` adds a promisfied interface to handle callback. [#10421](https://github.com/ant-design/ant-design/issues/10421) [@zhujinxuan](https://github.com/zhujinxuan)
* 🐞 Fix compilation issue with typescript@v2.9.1 . [#10729](https://github.com/ant-design/ant-design/issues/10729) [@karol-majewski](https://github.com/karol-majewski)
* 🐞 Fix a bug in `Menu` where outer menu item not highlighting while inner item is selected. [#8666](https://github.com/ant-design/ant-design/issues/8666) [@stonehank](https://github.com/stonehank)
* 🐞 Affix `offsetBottom` not working. [#10674](https://github.com/ant-design/ant-design/issues/10674)
- 🌟 `Form`'s error message now can be customized with ReactNode. [#10136](https://github.com/ant-design/ant-design/issues/10136) [@lovekonakona](https://github.com/lovekonakona)
- 🌟 `List` support customized configuration for position of pagination. [#10581](https://github.com/ant-design/ant-design/pull/10581) [@zheeeng](https://github.com/zheeeng)
- 🌟 `Layout.Sider` now can be configured with `light` or `dark` theme. [#10142](https://github.com/ant-design/ant-design/issues/10142) [@pd4d10](https://github.com/pd4d10)
- 🌟 Ant Design official site now supports offline mode. [#10625](https://github.com/ant-design/ant-design/issues/10625)
- 🌟 `Transfer` adding `style` and `operationStyle` props for further customization. [@eduludi](https://github.com/eduludi)
- 🌟 `Message` adds a promised interface to handle callback. [#10421](https://github.com/ant-design/ant-design/issues/10421) [@zhujinxuan](https://github.com/zhujinxuan)
- 🐞 Fix compilation issue with typescript@v2.9.1 . [#10729](https://github.com/ant-design/ant-design/issues/10729) [@karol-majewski](https://github.com/karol-majewski)
- 🐞 Fix a bug in `Menu` where outer menu item not highlighting while inner item is selected. [#8666](https://github.com/ant-design/ant-design/issues/8666) [@stonehank](https://github.com/stonehank)
- 🐞 Affix `offsetBottom` not working. [#10674](https://github.com/ant-design/ant-design/issues/10674)
## 3.5.4
@ -1274,13 +1294,13 @@ Component Fixes / Enhancements:
- 🐞 Fix merged header cell border. [#10359](https://github.com/ant-design/ant-design/issues/10359)
- 🐞 Fix lost of user selection on data updates. [#10332](https://github.com/ant-design/ant-design/pull/10332) [@chrvadala](https://github.com/chrvadala)
- Menu upgrade `rc-menu` to `7.x` [#10305](https://github.com/ant-design/ant-design/pull/10305)
- 🌟 Better aria-* attributes support. [react-component/menu#137](https://github.com/react-component/menu/pull/137)
- 🌟 Better aria-\* attributes support. [react-component/menu#137](https://github.com/react-component/menu/pull/137)
- 🌟 Improve Menu performance by avoiding unnecessary updates. [react-component/menu#133](https://github.com/react-component/menu/pull/133)
- 🌟 Support passing props through to MenuItem list item. [react-component/menu#135](https://github.com/react-component/menu/pull/135)
- 🐞 Minor key shortcut bug fixes. [react-component/menu#132](https://github.com/react-component/menu/pull/132)
- Collapse
- 🌟 Support custom `Collapse` styles with less. [#9943](https://github.com/ant-design/ant-design/pull/9943) [@davidhatten](https://github.com/davidhatten)
- 🌟 Update `rc-collapse` to 1.9.0 to add `Collapse` keyboard support. [react-component/collapse#84](https://github.com/react-component/collapse/pull/84/) [@kossel](https://github.com/kossel)
- 🌟 Update `rc-collapse` to 1.9.0 to add `Collapse` keyboard support. [react-component/collapse#84](https://github.com/react-component/collapse/pull/84/) [@kossel](https://github.com/kossel)
- Select
- 🐞 Fix type for `placeholder`. [#10282](https://github.com/ant-design/ant-design/pull/10282) [@thomasthiebaud](https://github.com/thomasthiebaud)
- 🐞 Fix extra space taken up when arrow disabled. [#10296](https://github.com/ant-design/ant-design/pull/10296)
@ -1316,7 +1336,7 @@ Component Fixes / Enhancements:
`2018-04-23`
- 🐞 Fix style lose bug when use tree shaking in webpack@4. [#10197](https://github.com/ant-design/ant-design/pull/10197) [@Aladdin-ADD](https://github.com/Aladdin-ADD)
- 🐞 Fix `Menu` item's clickable region in dark theme. [#10187](https://github.com/ant-design/ant-design/pull/10187) [@dgeibi ](https://github.com/dgeibi )
- 🐞 Fix `Menu` item's clickable region in dark theme. [#10187](https://github.com/ant-design/ant-design/pull/10187) [@dgeibi ](https://github.com/dgeibi)
## 3.4.2
@ -1374,7 +1394,7 @@ Component Fixes / Enhancements:
`2018-03-25`
- Revert Upload `file` type change in previous version which causes breaking change.
- Revert Upload `file` type change in previous version which causes breaking change.
## 3.3.2
@ -1392,12 +1412,13 @@ Component Fixes / Enhancements:
`2018-03-18`
- 💄 Tweak danger button focus style.
- 🐞 Fix a show error when the value of enterButton is a button element. [#9639](https://github.com/ant-design/ant-design/issues/9639)
- 🐞 Fix a show error when the value of enterButton is a button element. [#9639](https://github.com/ant-design/ant-design/issues/9639)
- 🐞 Fix missing key of `column.title` in Table .[#9658](https://github.com/ant-design/ant-design/issues/9658) [@terence55](https://github.com/terence55)
- 🐞 Fix `scroll: { x: true }` not working if `.ant-table-scroll table` width is `auto`. [#9704](https://github.com/ant-design/ant-design/pull/9704)
- 🐞 Fix when the helper message disappears, the input box will shake. [#8831](https://github.com/ant-design/ant-design/issues/8831)
- 🐞 Fix when the helper message disappears, the input box will shake. [#8831](https://github.com/ant-design/ant-design/issues/8831)
- 🐞 Fix isMoment call in `TimePicker` will report error in parcel. [85c78e4](https://github.com/ant-design/ant-design/commit/85c78e49a91737c2841dc42621db21ca248b62b4)
- 🐞 Tweak `Table` border radius. [#9674](https://github.com/ant-design/ant-design/pull/9674)
## 3.3.0
`2018-03-12`
@ -1406,17 +1427,17 @@ Component Fixes / Enhancements:
- 🌟 Add `validRange` prop for `Calendar` to set the date range. [71f65a0](https://github.com/ant-design/ant-design/commit/71f65a0be8e72a67f334c57e79ae3ff5fb640630) [@Rohanhacker](https://github.com/Rohanhacker)
- 🌟 Add `defaultActiveTabKey` prop for `Card` to initial TabPane's active key. [30fe88d](https://github.com/ant-design/ant-design/commit/30fe88d4bdcec765bf92ca32a755d9646b36978e) [@u3u](https://github.com/u3u)
- `DatePicker`
- 🌟 Add `dropdownClassName` prop to set the className of popup calendar. [#7211](https://github.com/ant-design/ant-design/issues/7211)
- 🐞 Fix the error of resolving `moment` object. [#9539](https://github.com/ant-design/ant-design/pull/9539)
- 🐞 Fix incorrect import of `turkish(tr_TR)` locale file. [#9373](https://github.com/ant-design/ant-design/issues/9373)
- 🌟 Add `dropdownClassName` prop to set the className of popup calendar. [#7211](https://github.com/ant-design/ant-design/issues/7211)
- 🐞 Fix the error of resolving `moment` object. [#9539](https://github.com/ant-design/ant-design/pull/9539)
- 🐞 Fix incorrect import of `turkish(tr_TR)` locale file. [#9373](https://github.com/ant-design/ant-design/issues/9373)
- 🌟 Add `orientation` prop for `Divider` to set the alignment of text in divider. [#9275](https://github.com/ant-design/ant-design/pull/9275) [@jrvboesch](https://github.com/jrvboesch)
- 🌟 Add `keyboard` prop for `Modal` to set whether Modal could be closed by `Esc` key. [#8818](https://github.com/ant-design/ant-design/issues/8818)
- 🌟 Improve the TypeScript definition of `event` param in `onChange` prop for `Radio` and `Checkbox`. [#9574](https://github.com/ant-design/ant-design/issues/9574)
- `Table`
- 🌟 Add `position` prop in `pagination` prop to set the position of pagination. [#9357](https://github.com/ant-design/ant-design/pull/9357) [@kanweiwei](https://github.com/kanweiwei)
- 🌟 Add event param of `onSelect` prop in `rowSelection` prop. [#9376](https://github.com/ant-design/ant-design/pull/9376) [@kanweiwei](https://github.com/kanweiwei)
- 🌟 Add `columnWidth` prop in `rowSelection` prop to set the column width of selection. [#9474](https://github.com/ant-design/ant-design/pull/9474) [@SimpleFrontend](https://github.com/SimpleFrontend)
- 🐞 Fix border radius issue in `Chrome` for `Table`. [af8e54f](https://github.com/ant-design/ant-design/commit/af8e54f1d6ac2891892e39b153cbe3e998370f61)
- 🌟 Add `position` prop in `pagination` prop to set the position of pagination. [#9357](https://github.com/ant-design/ant-design/pull/9357) [@kanweiwei](https://github.com/kanweiwei)
- 🌟 Add event param of `onSelect` prop in `rowSelection` prop. [#9376](https://github.com/ant-design/ant-design/pull/9376) [@kanweiwei](https://github.com/kanweiwei)
- 🌟 Add `columnWidth` prop in `rowSelection` prop to set the column width of selection. [#9474](https://github.com/ant-design/ant-design/pull/9474) [@SimpleFrontend](https://github.com/SimpleFrontend)
- 🐞 Fix border radius issue in `Chrome` for `Table`. [af8e54f](https://github.com/ant-design/ant-design/commit/af8e54f1d6ac2891892e39b153cbe3e998370f61)
- 🌟 Add `pendingDot` prop for `Timeline` to set icon of ghost node. [#9546](https://github.com/ant-design/ant-design/pull/9546) [@SimpleFrontend](https://github.com/SimpleFrontend)
- 🌟 Add `inputReadOnly` prop for `TimePicker` to set if it's read only. [4a69446](https://github.com/ant-design/ant-design/commit/4a69446be155c1c176b18cb2c31459f999aa5d5e) [@JesperWe](https://github.com/JesperWe)
- 🌟 Add `dropdownClassName` prop for `TreeSelect`. [69b154f](https://github.com/ant-design/ant-design/commit/69b154f9a9cfa5f2d89a82b6ed730d4d8793de73) [56e4ce0](https://github.com/ant-design/ant-design/commit/56e4ce099d950601538d72243563021e8083776b)
@ -1506,7 +1527,6 @@ Component Fixes / Enhancements:
- 🐞 Revert [#9141](https://github.com/ant-design/ant-design/pull/9141) since it causes year and month can not be selected in DatePicker.
## 3.1.5
`2018-01-27`
@ -1522,7 +1542,7 @@ Component Fixes / Enhancements:
- Add `duration` for Notification. [pull/9120](https://github.com/ant-design/ant-design/pull/9120) [@duhongjun](https://github.com/duhongjun)
- Add `style` for Steps. [pull/9126](https://github.com/ant-design/ant-design/pull/9126) [@wanliyunyan](https://github.com/wanliyunyan)
- 🌟 Optimize Avatar default background color. [commit/275946](https://github.com/ant-design/ant-design/commit/275946090823ab8da90f1871976c671b2c7ac851)
- 🌟 Add the less variable for Slider and Menu. [pull/9065](https://github.com/ant-design/ant-design/pull/9065) [pull/9115](https://github.com/ant-design/ant-design/pull/9115) [@mrgeorgegray](https://github.com/mrgeorgegray)
- 🌟 Add the less variable for Slider and Menu. [pull/9065](https://github.com/ant-design/ant-design/pull/9065) [pull/9115](https://github.com/ant-design/ant-design/pull/9115) [@mrgeorgegray](https://github.com/mrgeorgegray)
## 3.1.4
@ -1635,25 +1655,25 @@ Happy 2018 !~ 2018 2018 2018 coming!~~~
`2017-12-11`
* Remove useless DOM wrapper of Card, so that Card's DOM structure will be the same as Card of 2.x.
* Fix that missing `antd/lib/style/v2-compatible-reset.css`. [28d13e2](https://github.com/ant-design/ant-design/commit/28d13e2539817f87b8a2029ea22d9c30b377167f)
* Fix that Affix will be overlap when it is higher than viewport. [31a0654](https://github.com/ant-design/ant-design/commit/31a0654ef990eb7bae2b18095fa0d5230b9be1da)
* Fix the open animation of Collapse. [edd592c](https://github.com/ant-design/ant-design/commit/edd592cb9dd79d534853e7a0c1b648382e3f1a12)
* Fix the alignment of large size Input and Button in Form. [#8459](https://github.com/ant-design/ant-design/issues/8459)
* Menu
* Fix the popup will disappear unexpectedly in Safari. [#8453](https://github.com/ant-design/ant-design/issues/8453)
* Fix the open animation. [edd592c](https://github.com/ant-design/ant-design/commit/edd592cb9dd79d534853e7a0c1b648382e3f1a12)
* Fix compile error of style of Notification. [#8437](https://github.com/ant-design/ant-design/issues/8437)
* Fix the background color of mini Pagination. [e13c6d8](https://github.com/ant-design/ant-design/commit/e13c6d87fa6bf7d5cf4b2d5154a85b4793997de5)
* Table
* Fix broken style in mobile. [#8465](https://github.com/ant-design/ant-design/issues/8465)
* Fix broken style when use size and nested Table together. [#8525](https://github.com/ant-design/ant-design/issues/8525)
* TypeScript
* Fix TypeScript definition of AutoComplete. [#8383](https://github.com/ant-design/ant-design/pull/8383) [@nidhi-ag](https://github.com/nidhi-ag)
* Fix TypeScript definition of Divider. [#8504](https://github.com/ant-design/ant-design/pull/8504) [@cyyyu](https://github.com/cyyyu)
* Fix TypeScript definition of Dropdown. [#8444](https://github.com/ant-design/ant-design/issues/8444)
* Fix TypeScript definition of List. [e27061e](https://github.com/ant-design/ant-design/commit/e27061ea5b2f2d3273b45862d9b87285448f0998) [1b2a955](https://github.com/ant-design/ant-design/commit/1b2a9550d9595dd2f31f79d1bdd52695ec792692)
* Fix TypeScript definition of Table. [#8507](https://github.com/ant-design/ant-design/issues/8507) [#8515](https://github.com/ant-design/ant-design/pull/8515) [@danedavid](https://github.com/danedavid)
- Remove useless DOM wrapper of Card, so that Card's DOM structure will be the same as Card of 2.x.
- Fix that missing `antd/lib/style/v2-compatible-reset.css`. [28d13e2](https://github.com/ant-design/ant-design/commit/28d13e2539817f87b8a2029ea22d9c30b377167f)
- Fix that Affix will be overlap when it is higher than viewport. [31a0654](https://github.com/ant-design/ant-design/commit/31a0654ef990eb7bae2b18095fa0d5230b9be1da)
- Fix the open animation of Collapse. [edd592c](https://github.com/ant-design/ant-design/commit/edd592cb9dd79d534853e7a0c1b648382e3f1a12)
- Fix the alignment of large size Input and Button in Form. [#8459](https://github.com/ant-design/ant-design/issues/8459)
- Menu
- Fix the popup will disappear unexpectedly in Safari. [#8453](https://github.com/ant-design/ant-design/issues/8453)
- Fix the open animation. [edd592c](https://github.com/ant-design/ant-design/commit/edd592cb9dd79d534853e7a0c1b648382e3f1a12)
- Fix compile error of style of Notification. [#8437](https://github.com/ant-design/ant-design/issues/8437)
- Fix the background color of mini Pagination. [e13c6d8](https://github.com/ant-design/ant-design/commit/e13c6d87fa6bf7d5cf4b2d5154a85b4793997de5)
- Table
- Fix broken style in mobile. [#8465](https://github.com/ant-design/ant-design/issues/8465)
- Fix broken style when use size and nested Table together. [#8525](https://github.com/ant-design/ant-design/issues/8525)
- TypeScript
- Fix TypeScript definition of AutoComplete. [#8383](https://github.com/ant-design/ant-design/pull/8383) [@nidhi-ag](https://github.com/nidhi-ag)
- Fix TypeScript definition of Divider. [#8504](https://github.com/ant-design/ant-design/pull/8504) [@cyyyu](https://github.com/cyyyu)
- Fix TypeScript definition of Dropdown. [#8444](https://github.com/ant-design/ant-design/issues/8444)
- Fix TypeScript definition of List. [e27061e](https://github.com/ant-design/ant-design/commit/e27061ea5b2f2d3273b45862d9b87285448f0998) [1b2a955](https://github.com/ant-design/ant-design/commit/1b2a9550d9595dd2f31f79d1bdd52695ec792692)
- Fix TypeScript definition of Table. [#8507](https://github.com/ant-design/ant-design/issues/8507) [#8515](https://github.com/ant-design/ant-design/pull/8515) [@danedavid](https://github.com/danedavid)
## 3.0.0
@ -1770,7 +1790,9 @@ We provide a [migration tool](https://github.com/ant-design/antd-migration-helpe
- 🌟 Added new `hourStep`, `minuteStep`, `secondStep` props to allow customizing time steps. [Demo](https://ant.design/components/time-picker/#components-time-picker-demo-interval-options)
- 🌟 Added new `focusOnOpen` prop to focus input after panel is open.
- Table
- 🌟 Added new `components` prop to allow overriding default table elements.
```javascript
// You can override following elements
const components = {
@ -1787,8 +1809,9 @@ We provide a [migration tool](https://github.com/ant-design/antd-migration-helpe
},
};
<Table components={components} columns={columns} data={data} />
<Table components={components} columns={columns} data={data} />;
```
- 🌟 Added new `onRow` prop to allow passing custom props to table body row.
- 🌟 Added new `onHeaderRow` props to allow passing custom props to table header row.
- 🌟 Added `column[onCell]` to allow passing custom props to table body cell.
@ -1799,14 +1822,17 @@ We provide a [migration tool](https://github.com/ant-design/antd-migration-helpe
- 🙅 Deprecated `getBodyWrapper`, please use `components` instead.
- 🙅 Deprecated `onRowClick`, `onRowDoubleClick`, `onRowContextMenu`, `onRowMouseEnter`, `onRowMouseLeave`, please use `onRow` instead.
```javascript
<Table onRow={(record) => ({
onClick: () => {},
onDoubleClick: () => {},
onContextMenu: () => {},
onMouseEnter: () => {},
onMouseLeave: () => {},
})} />
<Table
onRow={record => ({
onClick: () => {},
onDoubleClick: () => {},
onContextMenu: () => {},
onMouseEnter: () => {},
onMouseLeave: () => {},
})}
/>
```
- Select
- 🌟 Option's value can be a number in single or multiple mode.
- 🌟 Added new `maxTagCount` and `maxTagPlaceholder` props.
@ -1835,7 +1861,6 @@ We provide a [migration tool](https://github.com/ant-design/antd-migration-helpe
Visit [GitHub](https://github.com/ant-design/ant-design/blob/2.x-stable/CHANGELOG.en-US.md) to read `2.x` change logs.
## 1.11.4
Visit [GitHub](https://github.com/ant-design/ant-design/blob/1.x-stable/CHANGELOG.md) to read change logs from `0.x` to `1.x`.

180
CHANGELOG.zh-CN.md

@ -9,12 +9,37 @@ timeline: true
#### 发布周期
* 修订版本号:每周末会进行日常 bugfix 更新。(如果有紧急的 bugfix,则任何时候都可发布)
* 次版本号:每月发布一个带有新特性的向下兼容的版本。
* 主版本号:含有破坏性更新和新特性,不在发布周期内。
- 修订版本号:每周末会进行日常 bugfix 更新。(如果有紧急的 bugfix,则任何时候都可发布)
- 次版本号:每月发布一个带有新特性的向下兼容的版本。
- 主版本号:含有破坏性更新和新特性,不在发布周期内。
---
## 3.17.0
`2019-05-05`
- 🎉 Breadcrumb.Item 支持 `overlay` props 来定义下拉菜单。[#16315](https://github.com/ant-design/ant-design/pull/16315)
- 🎉 Button 的增加了新的类型 `link`。[#16289](https://github.com/ant-design/ant-design/pull/16289)
- ⌨️ 用`ul`包裹 List.Item,以增加可访问性。[#15890](https://github.com/ant-design/ant-design/pull/15890)
- 🌟 TreeSelect 的 `showSearch` 支持多选模式。[#15933](https://github.com/ant-design/ant-design/pull/15933)
- 🌟 Upload 提供 `previewFile` props 以自定义预览逻辑。[#15984](https://github.com/ant-design/ant-design/pull/15984)
- 🌟 添加了 `@table-selected-row-color` 变量来自定义表格选中的颜色。[#15971](https://github.com/ant-design/ant-design/pull/15971) [@hextion](https://github.com/hextion)
- 🌟 添加了 `@form-warning-input-bg``@form-error-input-bg` 变量来自定义表单错误状态时的背景颜色。[#15954](https://github.com/ant-design/ant-design/pull/15954) [@hextion](https://github.com/hextion)
- 🌟 Dropdown.Button 支持 `icon` props 来自定义图标。[#15996](https://github.com/ant-design/ant-design/pull/15996) [@DiamondYuan](https://github.com/DiamondYuan)
- 🌟 SkeletonAvatarProps 的 `size` props 支持传入数字。[#16128](https://github.com/ant-design/ant-design/pull/16128) [@MrHeer](https://github.com/MrHeer)
- 🌟 notification.config 现在支持 `getContainer` 来进行自定义 dom 渲染位置。[#16123](https://github.com/ant-design/ant-design/pull/16123) [@Nouzbe](https://github.com/Nouzbe)
- 🌟 Drawer 支持 `afterVisibleChange` props,在抽屉动画完成后触发。[#16228](https://github.com/ant-design/ant-design/pull/16228)
- 🌟 Form.Item 支持了 `htmlFor` props. [#16278](https://github.com/ant-design/ant-design/pull/16278)
- 🌟 Collapse 支持 `expandIconPosition` props。[#16365](https://github.com/ant-design/ant-design/pull/16365)
- 🌟 Carousel 支持自定义面板指示点的位置。[#16225](https://github.com/ant-design/ant-design/pull/16225) [@yociduo](https://github.com/yociduo)
- 🌟 TreeNode 支持 `checkable` 的属性。[#16369](https://github.com/ant-design/ant-design/pull/16369)
- 🌟 🇭🇷 新增克罗地亚语言包。[#15641](https://github.com/ant-design/ant-design/pull/15641) [@fpintaric](https://github.com/fpintaric)
- 🐞 修复 Drawer 组件的弹出动画闪烁的问题。[#16358](https://github.com/ant-design/ant-design/pull/16358)
- 🐞 修复 Slider 的文字会换行的问题。[#15128](https://github.com/ant-design/ant-design/pull/15128)
- 🐞 修复 Checkbox.Group `onChange` 会包含移除值得问题。[#16392](https://github.com/ant-design/ant-design/pull/16392)
- 🐞 修正了多处 Typescript 的类型错误。[#16043](https://github.com/ant-design/ant-design/pull/16043) [#16341](https://github.com/ant-design/ant-design/pull/16341) [#16343](https://github.com/ant-design/ant-design/pull/16343) [#16360](https://github.com/ant-design/ant-design/pull/16360) [#16344](https://github.com/ant-design/ant-design/pull/16344)
## 3.16.6
`2019-04-26`
@ -179,7 +204,7 @@ timeline: true
- 🐞 保持 List 组件内容颜色与之前的版本一致。[#15301](https://github.com/ant-design/ant-design/pull/15301)
- 🐞 修复 Calendar 无法切换类型的问题。[#15338](https://github.com/ant-design/ant-design/pull/15338) [@zy410419243](https://github.com/zy410419243)
- Badge
- 🐞 修复 Badge 组件不支持自定义颜色的问题。[#15356](https://github.com/ant-design/ant-design/pull/15356) [@DiamondYuan](https://github.com/DiamondYuan)
- 🐞 修复 Badge 组件不支持自定义颜色的问题。[#15356](https://github.com/ant-design/ant-design/pull/15356) [@DiamondYuan](https://github.com/DiamondYuan)
- 🐞 修复 Badge 组件内带小圆点时的高度问题。[#15395](https://github.com/ant-design/ant-design/pull/15395)
- 🐞 微调 Tabs 标签模式在浏览器放大时丢失边框的问题。[#15299](https://github.com/ant-design/ant-design/pull/15299) [@rinick](https://github.com/rinick)
- 🐞 修复 Avatar 组件设置了 `display: none` 的时候无法计算偏移量的问题。[#15351](https://github.com/ant-design/ant-design/pull/15351) [@ppbl](https://github.com/ppbl)
@ -401,6 +426,7 @@ timeline: true
## 3.12.4
`2019-01-19`
- 🌟 更新《在 create-react-app 中使用》文档以兼容升级后的 create-react-app 和 react-scripts-rewired。[#14385](https://github.com/ant-design/ant-design/pull/14385)
- 🐞 修复在 postcss(webpack)中使用 autoprefixer 9.4.5 会抛出错误 `Replace text-decoration-skip: ink to text-decoration-skip-ink: auto, because spec had been changed` 的问题。[#14312](https://github.com/ant-design/ant-design/pull/14312)
- 🐞 修复 InputNumber 在 MenuItem 中样式不正确的问题。[#14373](https://github.com/ant-design/ant-design/pull/14373)
@ -580,7 +606,7 @@ timeline: true
- 🐞 修复 Table 使用自定义列头时报 `Cannot read property 'children' of undefined` 的问题。[#13542](https://github.com/ant-design/ant-design/issues/13542) [@geraldchen890806](https://github.com/geraldchen890806)
- 🐞 修复另一个 Input 在自定义了 less 变量 `@border-width-base` 时的边框问题。[#13534](https://github.com/ant-design/ant-design/pull/13534) [@morenyang](https://github.com/morenyang)
- 🐞 修复 Upload 的 `beforeUpload` 方法返回 Promise 时不支持 resolve `Blob` 对象的问题。[#13528](https://github.com/ant-design/ant-design/pull/13528/) [@huanz](https://github.com/huanz)
- https://github.com/ant-design/ant-design/pull/13536
- https://github.com/ant-design/ant-design/pull/13536
- 🐞 修复 Dropdown 两个属性的 TypeScript 定义。[#13536](https://github.com/ant-design/ant-design/pull/13536) [@wangxingkang](https://github.com/wangxingkang)
## 3.11.1
@ -661,7 +687,7 @@ timeline: true
`2018-11-17`
- 🐞 修复弹出菜单背景透明的问题。[#13104](https://github.com/ant-design/ant-design/issues/13104)
- 🐞 修复了 disabled Button 在 Popconfirm 中的不占用整个宽度的问题。[#13119](https://github.com/ant-design/ant-design/issues/13119)
- 🐞 修复了 disabled Button 在 Popconfirm 中的不占用整个宽度的问题。[#13119](https://github.com/ant-design/ant-design/issues/13119)
- 🐞 修复了 Radio.Group 中的 Radio.Button 覆盖了 Badge 的问题。[#13132](https://github.com/ant-design/ant-design/issues/13132)
- 🐞 修复 RangePicker 在 `small` 模式不对齐的问题。[#13105](https://github.com/ant-design/ant-design/issues/13105)
- 🐞 修复 Dropdown 字体大小影响到头像的问题。[#13091](https://github.com/ant-design/ant-design/issues/13091)
@ -685,7 +711,7 @@ timeline: true
`2018-11-09`
- 🎉 发布 [首页模板集](https://landing.ant.design)!
- 📖 发布 Ant Design [新版 Sketch 模版文件](https://github.com/ant-design/ant-design/releases/download/resource/Ant.Design.Components.Beta.3.10.5.sketch)。
- 📖 发布 Ant Design [新版 Sketch 模版文件](https://github.com/ant-design/ant-design/releases/download/resource/Ant.Design.Components.Beta.3.10.5.sketch)。
- Button
- 🐞 修复在小尺寸的 `Button.Group` 中没有垂直对齐的问题。[#12972](https://github.com/ant-design/ant-design/issues/12972)
- 🐞 修复设置了 `href` 属性没有垂直对齐的问题。[#12978](https://github.com/ant-design/ant-design/issues/12978)
@ -827,7 +853,7 @@ timeline: true
- 🐞 修复 Icon.createFromIconfontCN 方法会自动给 `scriptUrl``https` 的问题。[#12316](https://github.com/ant-design/ant-design/issues/12316)
- 🐞 修复 Row 的 `gutter` 属性,在使用嵌套的 Col 时不生效的问题。[#12320](https://github.com/ant-design/ant-design/pull/12320)
- 🐞 修复 Tree.DirectoryTree 组件在设置的 `expandedKeys` 有初始值时不能正确展开节点的问题。[#12396](https://github.com/ant-design/ant-design/issues/12396)
- 🐞 修复 Transfer 组件使用 `render` 属性返回 ReactNode 时,列表项的 `title` 属性显示错误的问题。[#12399](https://github.com/ant-design/ant-design/issues/12399)
- 🐞 修复 Transfer 组件使用 `render` 属性返回 ReactNode 时,列表项的 `title` 属性显示错误的问题。[#12399](https://github.com/ant-design/ant-design/issues/12399)
- 🐞 修复 Tooltip 在 CheckboxGroup 上不工作的问题。[#12427](https://github.com/ant-design/ant-design/issues/12427)
- 🐞 修复 Button 组件 loading 状态下在 IE9 里依然可以被点击的问题。[#12466](https://github.com/ant-design/ant-design/pull/12466) [@snail](https://github.com/120216220)
- 🐞 修复 Input.Group 中使用非 Input 组件时,鼠标 hover 时会产生抖动的问题。[#12407](https://github.com/ant-design/ant-design/pull/12407) [@hengkx](https://github.com/hengkx)
@ -857,10 +883,10 @@ timeline: true
- 🐞 修复当 `Icon` 组件包含子组件时,`React.Children.only` 报错。[c21ff](https://github.com/ant-design/ant-design/commit/c21ff5251d1ff0f00d7f283dd377a7b13eec21ee)
- 🐞 修复 `Notification` 组件没有描述时图标对齐问题。[e6579](https://github.com/ant-design/ant-design/commit/e657985cc35359fb813a2bd68be8c3afbe75c95a)
- 🐞 修复 `Table` 组件的排序图标对齐问题。[c935d](https://github.com/ant-design/ant-design/commit/c935d53b713afb3ec314133d749ca4e29e0c1ee5)
- TypeScript
- 🐞 修复 `Message` 组件中 `MessageApi` 类型定义。[e82d7](https://github.com/ant-design/ant-design/commit/e82d7a9c095317d62b054fcf7c2d6666ba54660d)[#12137](https://github.com/ant-design/ant-design/issues/12137)
- 🐞 修复 `Tree` onDrop 类型定义。[e5827](https://github.com/ant-design/ant-design/commit/e58273dccf59d58862e8bab0da36c7065e1c1044)[#12269](https://github.com/ant-design/ant-design/issues/12269)
- 🐞 `TreeSelect` 组件中 `onChange` 方法中添加 `extra` 类型定义。[#12243](https://github.com/ant-design/ant-design/pull/12243)[@jardicc](https://github.com/jardicc)
- TypeScript
- 🐞 修复 `Message` 组件中 `MessageApi` 类型定义。[e82d7](https://github.com/ant-design/ant-design/commit/e82d7a9c095317d62b054fcf7c2d6666ba54660d)[#12137](https://github.com/ant-design/ant-design/issues/12137)
- 🐞 修复 `Tree` onDrop 类型定义。[e5827](https://github.com/ant-design/ant-design/commit/e58273dccf59d58862e8bab0da36c7065e1c1044)[#12269](https://github.com/ant-design/ant-design/issues/12269)
- 🐞 `TreeSelect` 组件中 `onChange` 方法中添加 `extra` 类型定义。[#12243](https://github.com/ant-design/ant-design/pull/12243)[@jardicc](https://github.com/jardicc)
## 3.9.2
@ -888,7 +914,7 @@ timeline: true
- 🐞 修复 `Popconfirm` 组件中的图标显示位置不正确的问题。[#12026](https://github.com/ant-design/ant-design/issues/12026)
- 🐞 修复 `Card` 组件中的 `Actions` 图标显示位置不正确的问题。[#12016](https://github.com/ant-design/ant-design/pull/12016)
- 🐞 修复 `Form`、`Alert`、`TimePicker` 等组件图标主题风格不正确的问题。[#12016](https://github.com/ant-design/ant-design/pull/12016)
- 🐞 修复 `Collapse` 组件中的 `header` 中的图标会顺时针旋转90度的问题。[#12016](https://github.com/ant-design/ant-design/pull/12016)
- 🐞 修复 `Collapse` 组件中的 `header` 中的图标会顺时针旋转 90 度的问题。[#12016](https://github.com/ant-design/ant-design/pull/12016)
- 🐞 修复在特定部署环境中,新旧图标会同时出现的问题。[#12016](https://github.com/ant-design/ant-design/pull/12016) [8b82f14](https://github.com/ant-design/ant-design/pull/12016/commits/8b82f143b6bd612e8ec7f1202dfd5f41127b025e)
- 🐞 修复使用 `Icon.createFromIconFontCN({...})` 方法失效并报错的问题。[#12013](https://github.com/ant-design/ant-design/pull/12013)
@ -898,8 +924,7 @@ timeline: true
在开学之际我们带来了久违的 `3.9.0` 的更新。多个重量级的新特性和大量修复,使 Ant Design 的能力显著提升。
- 🔥🔥🔥 在 `3.9.0` 版本中,我们重绘了所有的图标,新增了两大类,超过 90 个新图标,并且为每个图标增加了多种风格。为此我们重写了 Icon 组件,使用 `SVG` 替换了 `fontface` 图标,增加了多个特性,可以快速的使用新的图标和风格。
![](https://gw.alipayobjects.com/zos/rmsportal/CVDHuodLwcDeyQBDoUIZ.png)
- 🔥🔥🔥 在 `3.9.0` 版本中,我们重绘了所有的图标,新增了两大类,超过 90 个新图标,并且为每个图标增加了多种风格。为此我们重写了 Icon 组件,使用 `SVG` 替换了 `fontface` 图标,增加了多个特性,可以快速的使用新的图标和风格。 ![](https://gw.alipayobjects.com/zos/rmsportal/CVDHuodLwcDeyQBDoUIZ.png)
- 💄 使用 `SVG` 图标替换了 `css` 字体图标,[可以看这里的讨论了解 svg 的优势](https://github.com/ant-design/ant-design/issues/10353)。
- 💄 提供了三套图标风格线性、实色和双色图标,默认为线性风格。
- 🌟 新增了 **编辑类****数据类** 两个新类别。
@ -960,12 +985,13 @@ timeline: true
## 3.8.2
`2018-8-18`
- 🐞 修复 Tag 组件 `visible` 属性初始值为 false 时仍然可见的问题。[#11757](https://github.com/ant-design/ant-design/issues/11757)
- 🐞 修复 Modal 文本在双击打开的时候会被选中的问题。[#11777](https://github.com/ant-design/ant-design/issues/11777)
- 🐞 修复 Rate 组件点击时的样式问题。[#11736](https://github.com/ant-design/ant-design/issues/11736)
- 🐞 修复 Badge 组件在子元素为 `display:block` 时的样式问题。[#84119d8](https://github.com/ant-design/ant-design/commit/84119d8959d55edf535a9cac5ff532e61b6ee698)
- Drawer
- 🐞 修复 Drawer 组件不兼容 IE10 和 IE9 的问题。[#11583](https://github.com/ant-design/ant-design/issues/11583)
- 🐞 修复 Drawer 组件不兼容 IE10 和 IE9 的问题。[#11583](https://github.com/ant-design/ant-design/issues/11583)
- 🐞 修复 Drawer 组件在移动设备上无法垂直滚动的问题。[#11443](https://github.com/ant-design/ant-design/issues/11443)
- TypeScript
- 🐞 修复 TreeNode 组件缺少的 `selectable` 属性定义。[#11604](https://github.com/ant-design/ant-design/issues/11604) [@apieceofbart](https://github.com/apieceofbart)
@ -989,7 +1015,7 @@ timeline: true
- 🐞 修复 Collapse 组件缺少的 `destroyInactivePanel` 定义。[#11646](https://github.com/ant-design/ant-design/pull/11646) [@zheeeng](https://github.com/zheeeng)
- 💄 修复 AutoComplete 没有 `getPopupContainer` 属性定义的问题。[#11690](https://github.com/ant-design/ant-design/pull/11690) [@Huanghuiying0624](https://github.com/Huanghuiying0624)
- 🐞 修复 Upload 组件的 `lastModifiedDate` 定义。[#11709](https://github.com/ant-design/ant-design/pull/11709) [@andycall](https://github.com/andycall)
- 💄 使用新的 React 生命周期函数,包括组件 Upload,CheckboxGroup,Layout.Sider,Tooltip,Popconfirm。[#11666](https://github.com/ant-design/ant-design/pull/11666) [@dancerphil](https://github.com/dancerphil) [#11682](https://github.com/ant-design/ant-design/pull/11682) [@dancerphil](https://github.com/dancerphil)
- 💄 使用新的 React 生命周期函数,包括组件 Upload,CheckboxGroup,Layout.Sider,Tooltip,Popconfirm。[#11666](https://github.com/ant-design/ant-design/pull/11666) [@dancerphil](https://github.com/dancerphil) [#11682](https://github.com/ant-design/ant-design/pull/11682) [@dancerphil](https://github.com/dancerphil)
## 3.8.0
@ -1075,8 +1101,7 @@ timeline: true
## 3.7.0
3.7.0 是一个重磅更新,带来了很多激动人心的变化和新特性。
以下是一些亮点✨:
3.7.0 是一个重磅更新,带来了很多激动人心的变化和新特性。以下是一些亮点 ✨:
- 🔥 增加抽屉组件 : [`Drawer`](https://ant.design/components/drawer-cn/) [#10791](https://github.com/ant-design/ant-design/pull/10791)
- 🔥 新增 `Tree.DirectoryTree` 组件,作为内置的目录树。[#7749](https://github.com/ant-design/ant-design/issues/7749)
@ -1093,7 +1118,7 @@ timeline: true
- Upload 组件升级 `rc-upload``2.5.0`
- 🌟 新增 `directory` 属性,支持上传一个文件夹。[#7315](https://github.com/ant-design/ant-design/issues/7315)
- 🌟 `action` 属性支持作为一个返回 `Promise` 对象的函数,使用更加灵活。[fd96967](https://github.com/ant-design/ant-design/commit/fd96967c872600b79bb608e9ddf9f8c38814a704)
- Dropdown 增加新特性,可以做为右键菜单来使用。
- Dropdown 增加新特性, 可以做为右键菜单来使用。
- 🌟 给菜单项的 icon 提供默认的外间距样式。[8e60a59](https://github.com/ant-design/ant-design/commit/8e60a591fd24f644de4f67d69c2210e9270be9cc)
- 🌟 触发方式为 `contextMenu` 时自动调整菜单的位置。[16e4260](https://github.com/ant-design/ant-design/commit/16e42601d6772fc0830ee237a1e751a38a118676)
- Table 组件升级 `rc-table``6.2.2`。[f2fddff](https://github.com/ant-design/ant-design/commit/f2fddff3fd0d6b36e8e6d8ee06bfcbcc85ead4f0)
@ -1194,15 +1219,15 @@ timeline: true
`2018-06-02`
* 🌟 `Form` 表单错误信息展示支持传入 ReactNode。[#10136](https://github.com/ant-design/ant-design/issues/10136) [@lovekonakona](https://github.com/lovekonakona)
* 🌟 `List` 组件支持指定分页器的位置。[#10581](https://github.com/ant-design/ant-design/pull/10581) [@zheeeng](https://github.com/zheeeng)
* 🌟 `Layout.Sider` 支持 dark/light 主题定制。[#10142](https://github.com/ant-design/ant-design/issues/10142) [@pd4d10](https://github.com/pd4d10)
* 🌟 支持 Ant Design 站点的离线模式。[#10625](https://github.com/ant-design/ant-design/issues/10625)
* 🌟 `Transfer` 新增 `style` 以及 `operationStyle` 属性配置样式。[@eduludi](https://github.com/eduludi)
* 🌟 `Message` 增加 promise 化的回调接口。[#10421](https://github.com/ant-design/ant-design/issues/10421) [@zhujinxuan](https://github.com/zhujinxuan)
* 🐞 修复编译时 TypeScript v2.9.1兼容性问题。[#10729](https://github.com/ant-design/ant-design/issues/10729) [@karol-majewski](https://github.com/karol-majewski)
* 🐞 修复 `Menu` 嵌套超过两层时选中最里层后对应最外层没有亮起问题。[#8666](https://github.com/ant-design/ant-design/issues/8666) [@stonehank](https://github.com/stonehank)
* 🐞 修复 `Affix` 组件 offsetBottom 无效问题。[#10674](https://github.com/ant-design/ant-design/issues/10674)
- 🌟 `Form` 表单错误信息展示支持传入 ReactNode。[#10136](https://github.com/ant-design/ant-design/issues/10136) [@lovekonakona](https://github.com/lovekonakona)
- 🌟 `List` 组件支持指定分页器的位置。[#10581](https://github.com/ant-design/ant-design/pull/10581) [@zheeeng](https://github.com/zheeeng)
- 🌟 `Layout.Sider` 支持 dark/light 主题定制。[#10142](https://github.com/ant-design/ant-design/issues/10142) [@pd4d10](https://github.com/pd4d10)
- 🌟 支持 Ant Design 站点的离线模式。[#10625](https://github.com/ant-design/ant-design/issues/10625)
- 🌟 `Transfer` 新增 `style` 以及 `operationStyle` 属性配置样式。[@eduludi](https://github.com/eduludi)
- 🌟 `Message` 增加 promise 化的回调接口。[#10421](https://github.com/ant-design/ant-design/issues/10421) [@zhujinxuan](https://github.com/zhujinxuan)
- 🐞 修复编译时 TypeScript v2.9.1 兼容性问题。[#10729](https://github.com/ant-design/ant-design/issues/10729) [@karol-majewski](https://github.com/karol-majewski)
- 🐞 修复 `Menu` 嵌套超过两层时选中最里层后对应最外层没有亮起问题。[#8666](https://github.com/ant-design/ant-design/issues/8666) [@stonehank](https://github.com/stonehank)
- 🐞 修复 `Affix` 组件 offsetBottom 无效问题。[#10674](https://github.com/ant-design/ant-design/issues/10674)
## 3.5.4
@ -1236,7 +1261,7 @@ timeline: true
`2018-05-13`
- 🐞 修复 `Table` 过滤器和 `Transfer` 复选框无法点击的问题。[#10452](https://github.com/ant-design/ant-design/issues/10452)
- 🐞 修复 `Cascader` 的 `displayRender` 里的链接无法点击的问题。[#10433](https://github.com/ant-design/ant-design/issues/10433)
- 🐞 修复 `Cascader`  `displayRender` 里的链接无法点击的问题。[#10433](https://github.com/ant-design/ant-design/issues/10433)
- 🐞 修复 `Button` ref 不兼容问题。[#10405](https://github.com/ant-design/ant-design/issues/10405)
- 🐞 修复 `Form` 表单项校验位置高度时出现抖动问题。[#10445](https://github.com/ant-design/ant-design/issues/10445)
- 🌟 设置 `Layout` 宽度时,允许使用任何的 CSS 单位。[#10479](https://github.com/ant-design/ant-design/pull/10479)
@ -1272,12 +1297,12 @@ timeline: true
- 🐞 修复头部单元格的边框样式问题。[#10359](https://github.com/ant-design/ant-design/issues/10359)
- 🐞 修复当数据变化时用户选择项丢失的问题。[#10332](https://github.com/ant-design/ant-design/pull/10332) [@chrvadala](https://github.com/chrvadala)
- `Menu` 升级 `rc-menu``7.x` [#10305](https://github.com/ant-design/ant-design/pull/10305)
- 🌟 更好的 aria-* 属性支持。[react-component/menu#137](https://github.com/react-component/menu/pull/137)
- 🌟 更好的 aria-\* 属性支持。[react-component/menu#137](https://github.com/react-component/menu/pull/137)
- 🌟 一些内部优化提升组件性能。[react-component/menu#133](https://github.com/react-component/menu/pull/133)
- 🌟 支持将属性传递到菜单项中。[react-component/menu#135](https://github.com/react-component/menu/pull/135)
- 🐞 修复一些快捷键的问题。[react-component/menu#132](https://github.com/react-component/menu/pull/132)
- Collapse
- 🌟 更新 `rc-collapse` 到 1.9.0 优化键盘支持。[react-component/collapse#84](https://github.com/react-component/collapse/pull/84/) [@kossel](https://github.com/kossel)
- 🌟 更新 `rc-collapse` 到 1.9.0 优化键盘支持。[react-component/collapse#84](https://github.com/react-component/collapse/pull/84/) [@kossel](https://github.com/kossel)
- 🌟 支持通过 less 定义组件 `Collapse` 的样式。[#9943](https://github.com/ant-design/ant-design/pull/9943) [@davidhatten](https://github.com/davidhatten)
- Select
- 🐞 修复 `placeholder` 的 ts 类型问题。[#10282](https://github.com/ant-design/ant-design/pull/10282) [@thomasthiebaud](https://github.com/thomasthiebaud)
@ -1358,7 +1383,7 @@ timeline: true
- 🌟 新增 `defaultExpandParent` 用于在第一次渲染时自动展开父节点。
- 🌟 新增 `disabled` 用于禁用整棵树。
- 🌟 TreeNode 新增 `icon` 用于设置自定义图标。
- 🌟 优化了 TreeNode 设置 `disabled` 时的勾选逻辑。
- 🌟 优化了 TreeNode 设置 `disabled` 时的  勾选逻辑。
- 🌟 Anchor 新增 `getContainer` 用于指定内容滚动的容器。
- 🌟 Table 新增 less 变量 `@table-expanded-row-bg`。[#9789](https://github.com/ant-design/ant-design/pull/9789)
- 🐞 修复一处 less 语法错误。[#9832](https://github.com/ant-design/ant-design/pull/9832) [@jojoLockLock](https://github.com/jojoLockLock)
@ -1405,17 +1430,17 @@ timeline: true
- 🌟 `Calendar` 组件新增 `validRange` 属性,用于设置显示的时间范围。[71f65a0](https://github.com/ant-design/ant-design/commit/71f65a0be8e72a67f334c57e79ae3ff5fb640630) [@Rohanhacker](https://github.com/Rohanhacker)
- 🌟 `Card` 组件新增 `defaultActiveTabKey` 属性,用于初始化选中面板的 key。[30fe88d](https://github.com/ant-design/ant-design/commit/30fe88d4bdcec765bf92ca32a755d9646b36978e) [@u3u](https://github.com/u3u)
- `DatePicker`
- 🌟 新增 `dropdownClassName` 属性,用于设置弹出日历的 className。[#7211](https://github.com/ant-design/ant-design/issues/7211)
- 🐞 修复解析 `moment` 对象出错的问题。[#9539](https://github.com/ant-design/ant-design/pull/9539)
- 🐞 修复引入土耳其语 `tr_TR` 文件的问题。[#9373](https://github.com/ant-design/ant-design/issues/9373)
- 🌟 新增 `dropdownClassName` 属性,用于设置弹出日历的 className。[#7211](https://github.com/ant-design/ant-design/issues/7211)
- 🐞 修复解析 `moment` 对象出错的问题。[#9539](https://github.com/ant-design/ant-design/pull/9539)
- 🐞 修复引入土耳其语 `tr_TR` 文件的问题。[#9373](https://github.com/ant-design/ant-design/issues/9373)
- 🌟 `Divider` 组件新增 `orientation` 属性,用于设置分割线内文本的对齐方式。[#9275](https://github.com/ant-design/ant-design/pull/9275) [@jrvboesch](https://github.com/jrvboesch)
- 🌟 `Modal` 组件新增 `keyboard` 属性,用于设置按下 `Esc` 键是否可以关闭 `Modal`。[#8818](https://github.com/ant-design/ant-design/issues/8818)
- 🌟 优化 `Radio``Checkbox` 组件 `onChange` 属性中的事件参数的 `TypeScript` 类型定义的问题。[#9574](https://github.com/ant-design/ant-design/issues/9574)
- `Table`
- 🌟 新增 `pagination` 属性的配置项 `position`,用于设置分页的显示位置。[#9357](https://github.com/ant-design/ant-design/pull/9357) [@kanweiwei](https://github.com/kanweiwei)
- 🌟 新增 `rowSelection` 属性的配置项 `onSelect` 回调函数的事件参数。[#9376](https://github.com/ant-design/ant-design/pull/9376) [@kanweiwei](https://github.com/kanweiwei)
- 🌟 新增 `rowSelection` 属性的配置项 `columnWidth`,用于设置选择框的列宽。[#9474](https://github.com/ant-design/ant-design/pull/9474) [@SimpleFrontend](https://github.com/SimpleFrontend)
- 🐞 修复 `Table` 组件在 `Chrome` 下圆角边框样式的问题。[af8e54f](https://github.com/ant-design/ant-design/commit/af8e54f1d6ac2891892e39b153cbe3e998370f61)
- 🌟 新增 `pagination` 属性的配置项 `position`,用于设置分页的显示位置。[#9357](https://github.com/ant-design/ant-design/pull/9357) [@kanweiwei](https://github.com/kanweiwei)
- 🌟 新增 `rowSelection` 属性的配置项 `onSelect` 回调函数的事件参数。[#9376](https://github.com/ant-design/ant-design/pull/9376) [@kanweiwei](https://github.com/kanweiwei)
- 🌟 新增 `rowSelection` 属性的配置项 `columnWidth`,用于设置选择框的列宽。[#9474](https://github.com/ant-design/ant-design/pull/9474) [@SimpleFrontend](https://github.com/SimpleFrontend)
- 🐞 修复 `Table` 组件在 `Chrome` 下圆角边框样式的问题。[af8e54f](https://github.com/ant-design/ant-design/commit/af8e54f1d6ac2891892e39b153cbe3e998370f61)
- 🌟 `Timeline` 组件新增 `pendingDot` 属性,用于设置幽灵节点的图标。[#9546](https://github.com/ant-design/ant-design/pull/9546) [@SimpleFrontend](https://github.com/SimpleFrontend)
- 🌟 `TimePicker` 组件新增 `inputReadOnly` 属性,用于设置组件是否只读。[4a69446](https://github.com/ant-design/ant-design/commit/4a69446be155c1c176b18cb2c31459f999aa5d5e) [@JesperWe](https://github.com/JesperWe)
- 🌟 `TreeSelect` 组件新增 `dropdownClassName` 属性。[69b154f](https://github.com/ant-design/ant-design/commit/69b154f9a9cfa5f2d89a82b6ed730d4d8793de73) [56e4ce0](https://github.com/ant-design/ant-design/commit/56e4ce099d950601538d72243563021e8083776b)
@ -1442,7 +1467,7 @@ timeline: true
- 🌟 添加 `Pagination` 字体变量。[#9351](https://github.com/ant-design/ant-design/issues/9351)
- 🌟 添加 `Badge` 字重变量。[#9352](https://github.com/ant-design/ant-design/issues/9352)
- 🐞 修复 `Table` 当自定义 `loading.indicator` 时,不显示emptyText。[#9355](https://github.com/ant-design/ant-design/issues/9355)
- 🐞 修复 `Table` 当自定义 `loading.indicator` 时,不显示 emptyText。[#9355](https://github.com/ant-design/ant-design/issues/9355)
- 🐞 修复 `Form.create` 。[#9331](https://github.com/ant-design/ant-design/issues/9331)
- 🐞 回滚 `Table``column.dataIndex` 的 TypeScript 定义。[#9393](https://github.com/ant-design/ant-design/issues/9393)
- 🐞 修复 `Layout` 中 sider 高度不足时,最后一个菜单无法显示。[#9398](https://github.com/ant-design/ant-design/issues/9398) [@MJ111](https://github.com/MJ111)
@ -1499,7 +1524,6 @@ timeline: true
- 🐞 修复 Tabs 在 card 模式且 tabPosition 是 `bottom` 时的样式问题。[#9165](https://github.com/ant-design/ant-design/pull/9165) [@ryanhoho](https://github.com/ryanhoho)
- 🌟 新增库尔德语。
## 3.1.6
`2018-01-28`
@ -1521,7 +1545,7 @@ timeline: true
- 补充 Notification 缺失的 `duration` 定义。[pull/9120](https://github.com/ant-design/ant-design/pull/9120) [@duhongjun](https://github.com/duhongjun)
- 补充 Steps 缺失的 `style` 定义。[pull/9126](https://github.com/ant-design/ant-design/pull/9126) [@wanliyunyan](https://github.com/wanliyunyan)
- 🌟 优化了 Avatar 的默认背景色。[commit/275946](https://github.com/ant-design/ant-design/commit/275946090823ab8da90f1871976c671b2c7ac851)
- 🌟 新增了 Slider 以及 Menu 的 less 变量,更加方便的修改主题。[pull/9065](https://github.com/ant-design/ant-design/pull/9065) [pull/9115](https://github.com/ant-design/ant-design/pull/9115) [@mrgeorgegray](https://github.com/mrgeorgegray)
- 🌟 新增了 Slider 以及 Menu 的 less 变量,更加方便的修改主题。[pull/9065](https://github.com/ant-design/ant-design/pull/9065) [pull/9115](https://github.com/ant-design/ant-design/pull/9115) [@mrgeorgegray](https://github.com/mrgeorgegray)
## 3.1.4
@ -1584,7 +1608,7 @@ timeline: true
`2017-12-29`
新年快乐!~ 2018年了,00后都成年了!少年赶紧提个 PR 给我们吧!~
新年快乐!~ 2018 年了,00 后都成年了!少年赶紧提个 PR 给我们吧!~
- 🐞 修复组件 Spin 可能出现跳动的问题。[#8602](https://github.com/ant-design/ant-design/issues/8602) [@jhsu](https://github.com/jhsu)
- 🐞 修复 Table 在设置 `size=small` 的情况下出现多余 padding 的问题。[#8724](https://github.com/ant-design/ant-design/issues/8724)
@ -1634,25 +1658,25 @@ timeline: true
`2017-12-11`
* 移除 Card 无用 DOM wrapper,以和 2.x 保持一致。
* 修复 `antd/lib/style/v2-compatible-reset.css` 缺失问题。[28d13e2](https://github.com/ant-design/ant-design/commit/28d13e2539817f87b8a2029ea22d9c30b377167f)
* 修复 Affix 比浏览器可见区域还高时被截断的问题。[31a0654](https://github.com/ant-design/ant-design/commit/31a0654ef990eb7bae2b18095fa0d5230b9be1da)
* 修复 Collapse 展开动画。[edd592c](https://github.com/ant-design/ant-design/commit/edd592cb9dd79d534853e7a0c1b648382e3f1a12)
* 修复 Form 内大尺寸 Input、Button 的对齐问题。[#8459](https://github.com/ant-design/ant-design/issues/8459)
* Menu
* 修复弹层在 Safari 下消失的问题。[#8453](https://github.com/ant-design/ant-design/issues/8453)
* 修复展开动画。[edd592c](https://github.com/ant-design/ant-design/commit/edd592cb9dd79d534853e7a0c1b648382e3f1a12)
* 修复 Notification 样式编译错误。[#8437](https://github.com/ant-design/ant-design/issues/8437)
* 修复迷你 Pagination 的背景色问题。[e13c6d8](https://github.com/ant-design/ant-design/commit/e13c6d87fa6bf7d5cf4b2d5154a85b4793997de5)
* Table
* 修复在移动端样式错乱的问题。[#8465](https://github.com/ant-design/ant-design/issues/8465)
* 修复嵌套表格与 size 属性共用时的样式问题。[#8525](https://github.com/ant-design/ant-design/issues/8525)
* TypeScript
* 修复 AutoComplete 的 TypeScript 定义。[#8383](https://github.com/ant-design/ant-design/pull/8383) [@nidhi-ag](https://github.com/nidhi-ag)
* 修复 Divider 的 TypeScript 定义。[#8504](https://github.com/ant-design/ant-design/pull/8504) [@cyyyu](https://github.com/cyyyu)
* 修复 Dropdown 的 TypeScript 定义。[#8444](https://github.com/ant-design/ant-design/issues/8444)
* 修复 List 的 TypeScript 定义。[e27061e](https://github.com/ant-design/ant-design/commit/e27061ea5b2f2d3273b45862d9b87285448f0998) [1b2a955](https://github.com/ant-design/ant-design/commit/1b2a9550d9595dd2f31f79d1bdd52695ec792692)
* 修复 Table 的 TypeScript 定义。[#8507](https://github.com/ant-design/ant-design/issues/8507) [#8515](https://github.com/ant-design/ant-design/pull/8515) [@danedavid](https://github.com/danedavid)
- 移除 Card 无用 DOM wrapper,以和 2.x 保持一致。
- 修复 `antd/lib/style/v2-compatible-reset.css` 缺失问题。[28d13e2](https://github.com/ant-design/ant-design/commit/28d13e2539817f87b8a2029ea22d9c30b377167f)
- 修复 Affix 比浏览器可见区域还高时被截断的问题。[31a0654](https://github.com/ant-design/ant-design/commit/31a0654ef990eb7bae2b18095fa0d5230b9be1da)
- 修复 Collapse 展开动画。[edd592c](https://github.com/ant-design/ant-design/commit/edd592cb9dd79d534853e7a0c1b648382e3f1a12)
- 修复 Form 内大尺寸 Input、Button 的对齐问题。[#8459](https://github.com/ant-design/ant-design/issues/8459)
- Menu
- 修复弹层在 Safari 下消失的问题。[#8453](https://github.com/ant-design/ant-design/issues/8453)
- 修复展开动画。[edd592c](https://github.com/ant-design/ant-design/commit/edd592cb9dd79d534853e7a0c1b648382e3f1a12)
- 修复 Notification 样式编译错误。[#8437](https://github.com/ant-design/ant-design/issues/8437)
- 修复迷你 Pagination 的背景色问题。[e13c6d8](https://github.com/ant-design/ant-design/commit/e13c6d87fa6bf7d5cf4b2d5154a85b4793997de5)
- Table
- 修复在移动端样式错乱的问题。[#8465](https://github.com/ant-design/ant-design/issues/8465)
- 修复嵌套表格与 size 属性共用时的样式问题。[#8525](https://github.com/ant-design/ant-design/issues/8525)
- TypeScript
- 修复 AutoComplete 的 TypeScript 定义。[#8383](https://github.com/ant-design/ant-design/pull/8383) [@nidhi-ag](https://github.com/nidhi-ag)
- 修复 Divider 的 TypeScript 定义。[#8504](https://github.com/ant-design/ant-design/pull/8504) [@cyyyu](https://github.com/cyyyu)
- 修复 Dropdown 的 TypeScript 定义。[#8444](https://github.com/ant-design/ant-design/issues/8444)
- 修复 List 的 TypeScript 定义。[e27061e](https://github.com/ant-design/ant-design/commit/e27061ea5b2f2d3273b45862d9b87285448f0998) [1b2a955](https://github.com/ant-design/ant-design/commit/1b2a9550d9595dd2f31f79d1bdd52695ec792692)
- 修复 Table 的 TypeScript 定义。[#8507](https://github.com/ant-design/ant-design/issues/8507) [#8515](https://github.com/ant-design/ant-design/pull/8515) [@danedavid](https://github.com/danedavid)
## 3.0.0
@ -1720,8 +1744,10 @@ timeline: true
import zhCN from 'antd/lib/locale-provider/zh_CN';
ReactDOM.render(
<LocaleProvider locale={zhCN}><YourApp /></LocaleProvider>,
document.getElementById('root')
<LocaleProvider locale={zhCN}>
<YourApp />
</LocaleProvider>,
document.getElementById('root'),
);
```
@ -1780,7 +1806,9 @@ timeline: true
- 🌟 新增 `hourStep`、`minuteStep`、`secondStep`,用于设置时间步长。[例子](https://ant.design/components/time-picker-cn/#components-time-picker-demo-interval-options)
- 🌟 新增 `focusOnOpen`,用于设置在打开面板的时候是否聚焦输入框。
- Table
- 🌟 新增 `components` 属性,用于覆盖表格元素的默认标签。
```javascript
// 支持覆盖的元素
const components = {
@ -1797,8 +1825,9 @@ timeline: true
},
};
<Table components={components} columns={columns} data={data} />
<Table components={components} columns={columns} data={data} />;
```
- 🌟 新增 `onRow` 属性,用于设置表格列的属性。
- 🌟 新增 `onHeaderRow`,用户设置表格头部列的属性。
- 🌟 新增 `column[onCell]`,用户设置单元格的属性。
@ -1809,17 +1838,20 @@ timeline: true
- 🙅 废弃 `getBodyWrapper`,请使用 `components` 属性代替。
- 🙅 废弃以下属性 `onRowClick`,`onRowDoubleClick`、`onRowContextMenu`、`onRowMouseEnter`、`onRowMouseLeave`,请使用 `onRow` 代替。
```javascript
<Table onRow={(record) => ({
onClick: () => {},
onDoubleClick: () => {},
onContextMenu: () => {},
onMouseEnter: () => {},
onMouseLeave: () => {},
})} />
<Table
onRow={record => ({
onClick: () => {},
onDoubleClick: () => {},
onContextMenu: () => {},
onMouseEnter: () => {},
onMouseLeave: () => {},
})}
/>
```
- Select
- 🌟 默认和多选模式下 Option 的值允许使用 number。
- 🌟 新增 `maxTagCount 和 `maxTagPlaceholder`,用于设置最多可显示的选中项。
- 🌟 新增 `maxTagCount``maxTagPlaceholder`,用于设置最多可显示的选中项。
- 🌟 新增 `showAction`,用于设置出发下拉框打开的事件。
- 🌟 新增 `onMouseEnter``onMouseLeave` 事件回调。
- LocaleProvider

54
components/__tests__/util/domHook.js

@ -0,0 +1,54 @@
export function spyElementPrototypes(Element, properties) {
const propNames = Object.keys(properties);
const originDescriptors = {};
propNames.forEach(propName => {
const originDescriptor = Object.getOwnPropertyDescriptor(Element.prototype, propName);
originDescriptors[propName] = originDescriptor;
const spyProp = properties[propName];
if (typeof spyProp === 'function') {
// If is a function
Element.prototype[propName] = function spyFunc(...args) {
return spyProp.call(this, originDescriptor, ...args);
};
} else {
// Otherwise tread as a property
Object.defineProperty(Element.prototype, propName, {
...spyProp,
set(value) {
if (spyProp.set) {
return spyProp.set.call(this, originDescriptor, value);
}
return originDescriptor.set(value);
},
get() {
if (spyProp.get) {
return spyProp.get.call(this, originDescriptor);
}
return originDescriptor.get();
},
});
}
});
return {
mockRestore() {
propNames.forEach(propName => {
const originDescriptor = originDescriptors[propName];
if (typeof originDescriptor === 'function') {
Element.prototype[propName] = originDescriptor;
} else {
Object.defineProperty(Element.prototype, propName, originDescriptor);
}
});
},
};
}
export function spyElementPrototype(Element, propName, property) {
return spyElementPrototypes(Element, {
[propName]: property,
});
}

38
components/_util/motion.tsx

@ -0,0 +1,38 @@
import * as React from 'react';
type MotionFunc = (element: HTMLElement) => React.CSSProperties;
interface Motion {
visible?: boolean;
motionName?: string; // It also support object, but we only use string here.
motionAppear?: boolean;
motionEnter?: boolean;
motionLeave?: boolean;
motionLeaveImmediately?: boolean; // Trigger leave motion immediately
removeOnLeave?: boolean;
leavedClassName?: string;
onAppearStart?: MotionFunc;
onAppearActive?: MotionFunc;
onAppearEnd?: MotionFunc;
onEnterStart?: MotionFunc;
onEnterActive?: MotionFunc;
onEnterEnd?: MotionFunc;
onLeaveStart?: MotionFunc;
onLeaveActive?: MotionFunc;
onLeaveEnd?: MotionFunc;
}
// ================== Collapse Motion ==================
const getCollapsedHeight: MotionFunc = () => ({ height: 0, opacity: 0 });
const getRealHeight: MotionFunc = node => ({ height: node.scrollHeight, opacity: 1 });
const getCurrentHeight: MotionFunc = node => ({ height: node.offsetHeight });
export const collapseMotion: Motion = {
motionName: 'ant-motion-collapse',
onAppearStart: getCollapsedHeight,
onEnterStart: getCollapsedHeight,
onAppearActive: getRealHeight,
onEnterActive: getRealHeight,
onLeaveStart: getCurrentHeight,
onLeaveActive: getCollapsedHeight,
};

6
components/_util/openAnimation.tsx

@ -1,10 +1,14 @@
/**
* Deprecated. We should replace the animation with pure react motion instead of modify style directly.
* If you are creating new component with animation, please use `./motion`.
*/
import cssAnimation from 'css-animation';
import raf from 'raf';
function animate(node: HTMLElement, show: boolean, done: () => void) {
let height: number;
let requestAnimationFrameId: number;
return cssAnimation(node, 'ant-motion-collapse', {
return cssAnimation(node, 'ant-motion-collapse-legacy', {
start() {
if (!show) {
node.style.height = `${node.offsetHeight}px`;

2
components/affix/style/index.less

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

2
components/alert/style/index.less

@ -1,4 +1,4 @@
@import '../../style/themes/default';
@import '../../style/themes/index';
@import '../../style/mixins/index';
@alert-prefix-cls: ~'@{ant-prefix}-alert';

2
components/anchor/style/index.less

@ -1,4 +1,4 @@
@import '../../style/themes/default';
@import '../../style/themes/index';
@import '../../style/mixins/index';
@anchor-border-width: 2px;

2
components/auto-complete/style/index.less

@ -1,4 +1,4 @@
@import '../../style/themes/default';
@import '../../style/themes/index';
@import '../../style/mixins/index';
@import '../../input/style/mixin';

2
components/avatar/style/index.less

@ -1,4 +1,4 @@
@import '../../style/themes/default';
@import '../../style/themes/index';
@import '../../style/mixins/index';
@avatar-prefix-cls: ~'@{ant-prefix}-avatar';

2
components/back-top/style/index.less

@ -1,4 +1,4 @@
@import '../../style/themes/default';
@import '../../style/themes/index';
@import '../../style/mixins/index';
@backtop-prefix-cls: ~'@{ant-prefix}-back-top';

2
components/badge/style/index.less

@ -1,4 +1,4 @@
@import '../../style/themes/default';
@import '../../style/themes/index';
@import '../../style/mixins/index';
@badge-prefix-cls: ~'@{ant-prefix}-badge';

60
components/breadcrumb/Breadcrumb.tsx

@ -3,12 +3,15 @@ import * as PropTypes from 'prop-types';
import { cloneElement } from 'react';
import classNames from 'classnames';
import BreadcrumbItem from './BreadcrumbItem';
import Menu from '../menu';
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
import warning from '../_util/warning';
import { Omit } from '../_util/type';
export interface Route {
path: string;
breadcrumbName: string;
children: Omit<Route, 'children'>[];
}
export interface BreadcrumbProps {
@ -69,7 +72,44 @@ export default class Breadcrumb extends React.Component<BreadcrumbProps, any> {
'see: https://u.ant.design/item-render.',
);
}
genForRoutes = ({
routes = [],
params = {},
separator,
itemRender = defaultItemRender,
}: BreadcrumbProps) => {
const paths: string[] = [];
return routes.map(route => {
route.path = route.path || '';
let path = route.path.replace(/^\//, '');
Object.keys(params).forEach(key => {
path = path.replace(`:${key}`, params[key]);
});
if (path) {
paths.push(path);
}
// generated overlay by route.children
let overlay = null;
if (route.children && route.children.length) {
overlay = (
<Menu>
{route.children.map(child => (
<Menu.Item key={child.breadcrumbName || child.path}>
{itemRender(child, params, routes, paths)}
</Menu.Item>
))}
</Menu>
);
}
return (
<BreadcrumbItem overlay={overlay} separator={separator} key={route.breadcrumbName || path}>
{itemRender(route, params, routes, paths)}
</BreadcrumbItem>
);
});
};
renderBreadcrumb = ({ getPrefixCls }: ConfigConsumerProps) => {
let crumbs;
const {
@ -78,28 +118,12 @@ export default class Breadcrumb extends React.Component<BreadcrumbProps, any> {
style,
className,
routes,
params = {},
children,
itemRender = defaultItemRender,
} = this.props;
const prefixCls = getPrefixCls('breadcrumb', customizePrefixCls);
if (routes && routes.length > 0) {
const paths: string[] = [];
crumbs = routes.map(route => {
route.path = route.path || '';
let path: string = route.path.replace(/^\//, '');
Object.keys(params).forEach(key => {
path = path.replace(`:${key}`, params[key]);
});
if (path) {
paths.push(path);
}
return (
<BreadcrumbItem separator={separator} key={route.breadcrumbName || path}>
{itemRender(route, params, routes, paths)}
</BreadcrumbItem>
);
});
// generated by route
crumbs = this.genForRoutes(this.props);
} else if (children) {
crumbs = React.Children.map(children, (element: any, index) => {
if (!element) {

32
components/breadcrumb/BreadcrumbItem.tsx

@ -1,11 +1,14 @@
import * as React from 'react';
import * as PropTypes from 'prop-types';
import DropDown, { DropDownProps } from '../dropdown/dropdown';
import Icon from '../icon';
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
export interface BreadcrumbItemProps {
prefixCls?: string;
separator?: React.ReactNode;
href?: string;
overlay?: DropDownProps['overlay'];
onClick?: React.MouseEventHandler<HTMLAnchorElement | HTMLSpanElement>;
}
@ -23,7 +26,13 @@ export default class BreadcrumbItem extends React.Component<BreadcrumbItemProps,
};
renderBreadcrumbItem = ({ getPrefixCls }: ConfigConsumerProps) => {
const { prefixCls: customizePrefixCls, separator, children, ...restProps } = this.props;
const {
prefixCls: customizePrefixCls,
separator,
children,
overlay,
...restProps
} = this.props;
const prefixCls = getPrefixCls('breadcrumb', customizePrefixCls);
let link;
if ('href' in this.props) {
@ -39,6 +48,9 @@ export default class BreadcrumbItem extends React.Component<BreadcrumbItemProps,
</span>
);
}
// wrap to dropDown
link = this.renderBreadcrumbNode(link, prefixCls);
if (children) {
return (
<span>
@ -50,6 +62,24 @@ export default class BreadcrumbItem extends React.Component<BreadcrumbItemProps,
return null;
};
/**
* if overlay is have
* Wrap a DropDown
*/
renderBreadcrumbNode = (breadcrumbItem: React.ReactNode, prefixCls: string) => {
const { overlay } = this.props;
if (overlay) {
return (
<DropDown overlay={overlay} placement="bottomCenter">
<a className={`${prefixCls}-overlay-link`}>
{breadcrumbItem}
<Icon type="down" />
</a>
</DropDown>
);
}
return breadcrumbItem;
};
render() {
return <ConfigConsumer>{this.renderBreadcrumbItem}</ConfigConsumer>;
}

33
components/breadcrumb/__tests__/Breadcrumb.test.js

@ -51,4 +51,37 @@ describe('Breadcrumb', () => {
);
expect(wrapper).toMatchSnapshot();
});
it('should render a menu', () => {
const routes = [
{
path: 'index',
breadcrumbName: 'home',
},
{
path: 'first',
breadcrumbName: 'first',
children: [
{
path: '/general',
breadcrumbName: 'General',
},
{
path: '/layout',
breadcrumbName: 'Layout',
},
{
path: '/navigation',
breadcrumbName: 'Navigation',
},
],
},
{
path: 'second',
breadcrumbName: 'second',
},
];
const wrapper = render(<Breadcrumb routes={routes} />);
expect(wrapper).toMatchSnapshot();
});
});

75
components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.js.snap

@ -49,3 +49,78 @@ exports[`Breadcrumb should not display Breadcrumb Item when its children is fals
</span>
</div>
`;
exports[`Breadcrumb should render a menu 1`] = `
<div
class="ant-breadcrumb"
>
<span>
<span
class="ant-breadcrumb-link"
>
<a
href="#/index"
>
home
</a>
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<a
class="ant-breadcrumb-overlay-link ant-dropdown-trigger"
>
<span
class="ant-breadcrumb-link"
/>
</a>
<a
href="#/index/first"
>
first
</a>
</span>
<i
aria-label="icon: down"
class="anticon anticon-down"
>
<svg
aria-hidden="true"
class=""
data-icon="down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
/>
</svg>
</i>
<span
class="ant-breadcrumb-separator"
>
/
</span>
<span>
<span
class="ant-breadcrumb-link"
>
<span>
second
</span>
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
</div>
`;

87
components/breadcrumb/__tests__/__snapshots__/demo.test.js.snap

@ -63,6 +63,93 @@ exports[`renders ./components/breadcrumb/demo/basic.md correctly 1`] = `
</div>
`;
exports[`renders ./components/breadcrumb/demo/overlay.md correctly 1`] = `
<div>
<div
class="ant-breadcrumb"
>
<span>
<span
class="ant-breadcrumb-link"
>
Ant Design
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
<a
href=""
>
Component
</a>
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<a
class="ant-breadcrumb-overlay-link ant-dropdown-trigger"
>
<span
class="ant-breadcrumb-link"
/>
</a>
<a
href=""
>
General
</a>
</span>
<i
aria-label="icon: down"
class="anticon anticon-down"
>
<svg
aria-hidden="true"
class=""
data-icon="down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
/>
</svg>
</i>
<span
class="ant-breadcrumb-separator"
>
/
</span>
<span>
<span
class="ant-breadcrumb-link"
>
Button
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
</div>
</div>
`;
exports[`renders ./components/breadcrumb/demo/router.md correctly 1`] = `
<div
class="demo"

4
components/breadcrumb/__tests__/__snapshots__/router.test.js.snap

@ -80,6 +80,7 @@ exports[`react router react router 3 1`] = `
>
<BreadcrumbItem
key="Home"
overlay={null}
separator="/"
>
<span>
@ -101,6 +102,7 @@ exports[`react router react router 3 1`] = `
</BreadcrumbItem>
<BreadcrumbItem
key="Application List"
overlay={null}
separator="/"
>
<span>
@ -122,6 +124,7 @@ exports[`react router react router 3 1`] = `
</BreadcrumbItem>
<BreadcrumbItem
key="Application:id"
overlay={null}
separator="/"
>
<span>
@ -143,6 +146,7 @@ exports[`react router react router 3 1`] = `
</BreadcrumbItem>
<BreadcrumbItem
key="Detail"
overlay={null}
separator="/"
>
<span>

14
components/breadcrumb/demo/basic.md

@ -13,16 +13,20 @@ title:
The simplest use
````jsx
```jsx
import { Breadcrumb } from 'antd';
ReactDOM.render(
<Breadcrumb>
<Breadcrumb.Item>Home</Breadcrumb.Item>
<Breadcrumb.Item><a href="">Application Center</a></Breadcrumb.Item>
<Breadcrumb.Item><a href="">Application List</a></Breadcrumb.Item>
<Breadcrumb.Item>
<a href="">Application Center</a>
</Breadcrumb.Item>
<Breadcrumb.Item>
<a href="">Application List</a>
</Breadcrumb.Item>
<Breadcrumb.Item>An Application</Breadcrumb.Item>
</Breadcrumb>,
mountNode
mountNode,
);
````
```

54
components/breadcrumb/demo/overlay.md

@ -0,0 +1,54 @@
---
order: 5
title:
zh-CN: 带下拉菜单的面包屑
en-US: Bread crumbs with drop down menu
---
## zh-CN
面包屑支持下拉菜单。
## en-US
Breadcrumbs support drop down menu.
```jsx
import { Breadcrumb, Menu } from 'antd';
const menu = (
<Menu>
<Menu.Item>
<a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">
General
</a>
</Menu.Item>
<Menu.Item>
<a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/">
Layout
</a>
</Menu.Item>
<Menu.Item>
<a target="_blank" rel="noopener noreferrer" href="http://www.tmall.com/">
Navigation
</a>
</Menu.Item>
</Menu>
);
ReactDOM.render(
<div>
<Breadcrumb>
<Breadcrumb.Item>Ant Design</Breadcrumb.Item>
<Breadcrumb.Item>
<a href="">Component</a>
</Breadcrumb.Item>
<Breadcrumb.Item overlay={menu}>
<a href="">General</a>
</Breadcrumb.Item>
<Breadcrumb.Item>Button</Breadcrumb.Item>
</Breadcrumb>
</div>,
mountNode,
);
```

14
components/breadcrumb/demo/router.md

@ -15,10 +15,8 @@ title:
Used together with `react-router@2` `react-router@3`.
````jsx
import {
Router, Route, Link, hashHistory,
} from 'react-router';
```jsx
import { Router, Route, Link, hashHistory } from 'react-router';
import { Breadcrumb, Alert } from 'antd';
const Apps = () => (
@ -54,11 +52,11 @@ ReactDOM.render(
</Route>
</Route>
</Router>,
mountNode
mountNode,
);
````
```
````css
```css
.demo {
margin: 16px;
}
@ -75,4 +73,4 @@ ReactDOM.render(
.app-list {
margin-top: 16px;
}
````
```

48
components/breadcrumb/index.en-US.md

@ -16,10 +16,10 @@ A breadcrumb displays the current location within a hierarchy. It allows going b
## API
| Property | Description | Type | Optional | Default |
| -------- | ----------- | ---- | -------- | ------- |
| --- | --- | --- | --- | --- |
| itemRender | Custom item renderer | (route, params, routes, paths) => ReactNode | | - |
| params | Routing parameters | object | | - |
| routes | The routing stack information of router | object\[] | | - |
| routes | The routing stack information of router | [routes\[\]](#routes) | | - |
| separator | Custom separator | string\|ReactNode | | `/` |
### Use with browserHistory
@ -29,19 +29,41 @@ The link of Breadcrumb item targets `#` by default, you can use `itemRender` to
```jsx
import { Link } from 'react-router';
const routes = [{
path: 'index',
 breadcrumbName: 'home'
}, {
path: 'first',
breadcrumbName: 'first'
}, {
path: 'second',
breadcrumbName: 'second'
}];
const routes = [
{
path: 'index',
breadcrumbName: 'home',
},
{
path: 'first',
breadcrumbName: 'first',
children: [
{
path: '/general',
breadcrumbName: 'General',
},
{
path: '/layout',
breadcrumbName: 'Layout',
},
{
path: '/navigation',
breadcrumbName: 'Navigation',
},
],
},
{
path: 'second',
breadcrumbName: 'second',
},
];
function itemRender(route, params, routes, paths) {
const last = routes.indexOf(route) === routes.length - 1;
return last ? <span>{route.breadcrumbName}</span> : <Link to={paths.join('/')}>{route.breadcrumbName}</Link>;
return last ? (
<span>{route.breadcrumbName}</span>
) : (
<Link to={paths.join('/')}>{route.breadcrumbName}</Link>
);
}
return <Breadcrumb itemRender={itemRender} routes={routes} />;

83
components/breadcrumb/index.zh-CN.md

@ -15,12 +15,36 @@ title: Breadcrumb
## API
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| --- | --- | --- | --- | --- |
| itemRender | 自定义链接函数,和 react-router 配置使用 | (route, params, routes, paths) => ReactNode | | - |
| params | 路由的参数 | object | | - |
| routes | router 的路由栈信息 | object\[] | | - |
| separator | 分隔符自定义 | string\|ReactNode | | '/' |
### Breadcrumb
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| itemRender | 自定义链接函数,和 react-router 配置使用 | (route, params, routes, paths) => ReactNode | - |
| params | 路由的参数 | object | - |
| routes | router 的路由栈信息 | [routes\[\]](#routes) | - |
| separator | 分隔符自定义 | string\|ReactNode | '/' |
### Breadcrumb.Item
| 参数 | 参数 | 类型 | 默认值 |
| --------- | -------------- | -------------------------------------- | ------ |
| href | 链接的目的地 | string | - |
| separator | 自定义的分隔符 | string\|ReactNode | '/' |
| overlay | 下来菜单的内容 | [Menu](/components/menu) \| () => Menu | - |
| onClick | 单击事件 | (e:MouseEventHandler)=>void | - |
### routes
```ts
interface Route {
path: string;
breadcrumbName: string;
children: Array<{
path: string;
breadcrumbName: string;
}>;
}
```
### 和 browserHistory 配合
@ -29,20 +53,43 @@ title: Breadcrumb
```jsx
import { Link } from 'react-router';
const routes = [{
path: 'index',
breadcrumbName: '首页'
}, {
path: 'first',
breadcrumbName: '一级面包屑'
}, {
path: 'second',
breadcrumbName: '当前页面'
}];
const routes = [
{
path: 'index',
breadcrumbName: 'home',
},
{
path: 'first',
breadcrumbName: 'first',
children: [
{
path: '/general',
breadcrumbName: 'General',
},
{
path: '/layout',
breadcrumbName: 'Layout',
},
{
path: '/navigation',
breadcrumbName: 'Navigation',
},
],
},
{
path: 'second',
breadcrumbName: 'second',
},
];
function itemRender(route, params, routes, paths) {
const last = routes.indexOf(route) === routes.length - 1;
return last ? <span>{route.breadcrumbName}</span> : <Link to={paths.join('/')}>{route.breadcrumbName}</Link>;
return last ? (
<span>{route.breadcrumbName}</span>
) : (
<Link to={paths.join('/')}>{route.breadcrumbName}</Link>
);
}
return <Breadcrumb itemRender={itemRender} routes={routes}/>;
return <Breadcrumb itemRender={itemRender} routes={routes} />;
```

8
components/breadcrumb/style/index.less

@ -1,4 +1,4 @@
@import '../../style/themes/default';
@import '../../style/themes/index';
@import '../../style/mixins/index';
@breadcrumb-prefix-cls: ~'@{ant-prefix}-breadcrumb';
@ -39,4 +39,10 @@
margin-left: 4px;
}
}
&-overlay-link {
> .@{iconfont-css-prefix} {
margin-left: 4px;
}
}
}

3
components/breadcrumb/style/index.tsx

@ -1,2 +1,5 @@
import '../../style/index.less';
import './index.less';
import '../../menu/style';
import '../../dropdown/style';

52
components/button/__tests__/__snapshots__/demo.test.js.snap

@ -34,6 +34,14 @@ exports[`renders ./components/button/demo/basic.md correctly 1`] = `
Danger
</span>
</button>
<button
class="ant-btn ant-btn-link"
type="button"
>
<span>
Link
</span>
</button>
</div>
`;
@ -68,7 +76,15 @@ exports[`renders ./components/button/demo/block.md correctly 1`] = `
type="button"
>
<span>
danger
Danger
</span>
</button>
<button
class="ant-btn ant-btn-link ant-btn-block"
type="button"
>
<span>
Link
</span>
</button>
</div>
@ -332,6 +348,24 @@ exports[`renders ./components/button/demo/disabled.md correctly 1`] = `
Dashed(disabled)
</span>
</button>
<br />
<button
class="ant-btn ant-btn-link"
type="button"
>
<span>
Link
</span>
</button>
<button
class="ant-btn ant-btn-link"
disabled=""
type="button"
>
<span>
Link(disabled)
</span>
</button>
<div
style="padding:8px 8px 0 8px;background:rgb(190, 200, 200)"
>
@ -392,6 +426,14 @@ exports[`renders ./components/button/demo/ghost.md correctly 1`] = `
danger
</span>
</button>
<button
class="ant-btn ant-btn-link ant-btn-background-ghost"
type="button"
>
<span>
link
</span>
</button>
</div>
`;
@ -895,6 +937,14 @@ exports[`renders ./components/button/demo/size.md correctly 1`] = `
Danger
</span>
</button>
<button
class="ant-btn ant-btn-link ant-btn-lg"
type="button"
>
<span>
Link
</span>
</button>
<br />
<button
class="ant-btn ant-btn-primary ant-btn-circle ant-btn-lg ant-btn-icon-only"

32
components/button/button.tsx

@ -40,7 +40,7 @@ function insertSpace(child: React.ReactChild, needInserted: boolean) {
return child;
}
const ButtonTypes = tuple('default', 'primary', 'ghost', 'dashed', 'danger');
const ButtonTypes = tuple('default', 'primary', 'ghost', 'dashed', 'danger', 'link');
export type ButtonType = (typeof ButtonTypes)[number];
const ButtonShapes = tuple('circle', 'circle-outline', 'round');
export type ButtonShape = (typeof ButtonShapes)[number];
@ -266,20 +266,24 @@ class Button extends React.Component<ButtonProps, ButtonState> {
// React does not recognize the `htmlType` prop on a DOM element. Here we pick it out of `rest`.
const { htmlType, ...otherProps } = rest as NativeButtonProps;
return (
<Wave>
<button
{...otherProps as NativeButtonProps}
type={htmlType}
className={classes}
onClick={this.handleClick}
ref={this.saveButtonRef}
>
{iconNode}
{kids}
</button>
</Wave>
const buttonNode = (
<button
{...otherProps as NativeButtonProps}
type={htmlType}
className={classes}
onClick={this.handleClick}
ref={this.saveButtonRef}
>
{iconNode}
{kids}
</button>
);
if (type === 'link') {
return buttonNode;
}
return <Wave>{buttonNode}</Wave>;
};
render() {

1
components/button/demo/basic.md

@ -22,6 +22,7 @@ ReactDOM.render(
<Button>Default</Button>
<Button type="dashed">Dashed</Button>
<Button type="danger">Danger</Button>
<Button type="link">Link</Button>
</div>,
mountNode
);

3
components/button/demo/block.md

@ -21,7 +21,8 @@ ReactDOM.render(
<Button type="primary" block>Primary</Button>
<Button block>Default</Button>
<Button type="dashed" block>Dashed</Button>
<Button type="danger" block>danger</Button>
<Button type="danger" block>Danger</Button>
<Button type="link" block>Link</Button>
</div>,
mountNode
);

3
components/button/demo/disabled.md

@ -26,6 +26,9 @@ ReactDOM.render(
<br />
<Button type="dashed">Dashed</Button>
<Button type="dashed" disabled>Dashed(disabled)</Button>
<br />
<Button type="link">Link</Button>
<Button type="link" disabled>Link(disabled)</Button>
<div style={{ padding: '8px 8px 0 8px', background: 'rgb(190, 200, 200)' }}>
<Button ghost>Ghost</Button>
<Button ghost disabled>Ghost(disabled)</Button>

1
components/button/demo/ghost.md

@ -22,6 +22,7 @@ ReactDOM.render(
<Button ghost>Default</Button>
<Button type="dashed" ghost>Dashed</Button>
<Button type="danger" ghost>danger</Button>
<Button type="link" ghost>link</Button>
</div>,
mountNode
);

1
components/button/demo/size.md

@ -43,6 +43,7 @@ class ButtonSize extends React.Component {
<Button size={size}>Normal</Button>
<Button type="dashed" size={size}>Dashed</Button>
<Button type="danger" size={size}>Danger</Button>
<Button type="link" size={size}>Link</Button>
<br />
<Button type="primary" shape="circle" icon="download" size={size} />
<Button type="primary" shape="round" icon="download" size={size}>Download</Button>

2
components/button/index.en-US.md

@ -25,7 +25,7 @@ To get a customized button, just set `type`/`shape`/`size`/`loading`/`disabled`.
| shape | can be set to `circle`, `round` or omitted | string | - |
| size | can be set to `small` `large` or omitted | string | `default` |
| target | same as target attribute of a, works when href is specified | string | - |
| type | can be set to `primary` `ghost` `dashed` `danger`(added in 2.7) or omitted (meaning `default`) | string | `default` |
| type | can be set to `primary` `ghost` `dashed` `danger` `link`(added in 3.17) or omitted (meaning `default`) | string | `default` |
| onClick | set the handler to handle `click` event | (event) => void | - |
| block | option to fit button width to its parent width | boolean | `false` |

4
components/button/index.zh-CN.md

@ -18,7 +18,7 @@ subtitle: 按钮
按钮的属性说明如下:
| 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| --- | --- | --- | --- | --- |
| disabled | 按钮失效状态 | boolean | `false` |
| ghost | 幽灵属性,使按钮背景透明,版本 2.7 中增加 | boolean | false |
| href | 点击跳转的地址,指定此属性 button 的行为和 a 链接一致 | string | - |
@ -28,7 +28,7 @@ subtitle: 按钮
| shape | 设置按钮形状,可选值为 `circle``round` 或者不设 | string | - |
| size | 设置按钮大小,可选值为 `small` `large` 或者不设 | string | `default` |
| target | 相当于 a 链接的 target 属性,href 存在时生效 | string | - |
| type | 设置按钮类型,可选值为 `primary` `dashed` `danger`(版本 2.7 中增加) 或者不设 | string | - |
| type | 设置按钮类型,可选值为 `primary` `dashed` `danger` `link`(3.17 中增加) 或者不设 | string | - |
| onClick | 点击按钮时的回调 | (event) => void | - |
| block | 将按钮宽度调整为其父宽度的选项 | boolean | `false` |

12
components/button/style/index.less

@ -1,4 +1,4 @@
@import '../../style/themes/default';
@import '../../style/themes/index';
@import '../../style/mixins/index';
@import './mixin';
@ -69,6 +69,10 @@
.btn-danger;
}
&-link {
.btn-link;
}
&-round {
.btn-round(@btn-prefix-cls);
}
@ -165,6 +169,12 @@
.button-variant-ghost(@btn-danger-color);
}
&-background-ghost&-link {
.button-variant-ghost(@link-color; transparent);
color: @component-background;
}
&-two-chinese-chars::first-letter {
letter-spacing: 0.34em;
}

34
components/button/style/mixin.less

@ -7,7 +7,7 @@
border-radius: @border-radius;
}
.button-disabled() {
.button-disabled(@color: @btn-disable-color; @background: @btn-disable-bg; @border: @btn-disable-border) {
&-disabled,
&.disabled,
&[disabled] {
@ -16,7 +16,7 @@
&:focus,
&:active,
&.active {
.button-color(@btn-disable-color; @btn-disable-bg; @btn-disable-border);
.button-color(@color; @background; @border);
text-shadow: none;
box-shadow: none;
@ -86,17 +86,27 @@
}
.button-disabled();
}
.button-variant-ghost(@color) {
.button-color(@color; transparent; @color);
.button-variant-ghost(@color; @border: @color) {
.button-color(@color; transparent; @border);
text-shadow: none;
&:hover,
&:focus {
.button-color(~`colorPalette('@{color}', 5) `; transparent; ~`colorPalette('@{color}', 5) `);
& when (@border = transparent) {
.button-color(~`colorPalette('@{color}', 5) `; transparent; transparent);
}
& when not(@border = transparent) {
.button-color(~`colorPalette('@{color}', 5) `; transparent; ~`colorPalette('@{color}', 5) `);
}
}
&:active,
&.active {
.button-color(~`colorPalette('@{color}', 7) `; transparent; ~`colorPalette('@{color}', 7) `);
& when (@border = transparent) {
.button-color(~`colorPalette('@{color}', 7) `; transparent; transparent);
}
& when not(@border = transparent) {
.button-color(~`colorPalette('@{color}', 7) `; transparent; ~`colorPalette('@{color}', 7) `);
}
}
.button-disabled();
}
@ -226,6 +236,18 @@
.btn-danger() {
.button-variant-danger(@btn-danger-color, @btn-danger-bg, @btn-danger-border);
}
// link button style
.btn-link() {
.button-variant-other(@link-color, transparent, transparent);
box-shadow: none;
&:hover,
&:focus,
&:active {
border-color: transparent;
}
.button-disabled(@disabled-color; transparent; transparent);
}
// round button
.btn-round(@btnClassName: btn) {
.button-size(@btn-circle-size; 0 @btn-circle-size / 2; @font-size-base + 2px; @btn-circle-size);

2
components/calendar/locale/hr_HR.tsx

@ -0,0 +1,2 @@
import hr_HR from '../../date-picker/locale/hr_HR';
export default hr_HR;

2
components/calendar/style/index.less

@ -1,4 +1,4 @@
@import '../../style/themes/default';
@import '../../style/themes/index';
@import '../../style/mixins/index';
@full-calendar-prefix-cls: ~'@{ant-prefix}-fullcalendar';

2
components/card/style/index.less

@ -1,4 +1,4 @@
@import '../../style/themes/default';
@import '../../style/themes/index';
@import '../../style/mixins/index';
@card-prefix-cls: ~'@{ant-prefix}-card';

456
components/carousel/__tests__/__snapshots__/demo.test.js.snap

@ -180,7 +180,7 @@ exports[`renders ./components/carousel/demo/autoplay.md correctly 1`] = `
</div>
</div>
<ul
class="slick-dots"
class="slick-dots slick-dots-bottom"
style="display:block"
>
<li
@ -396,7 +396,7 @@ exports[`renders ./components/carousel/demo/basic.md correctly 1`] = `
</div>
</div>
<ul
class="slick-dots"
class="slick-dots slick-dots-bottom"
style="display:block"
>
<li
@ -522,7 +522,7 @@ exports[`renders ./components/carousel/demo/fade.md correctly 1`] = `
</div>
</div>
<ul
class="slick-dots"
class="slick-dots slick-dots-bottom"
style="display:block"
>
<li
@ -558,218 +558,302 @@ exports[`renders ./components/carousel/demo/fade.md correctly 1`] = `
</div>
`;
exports[`renders ./components/carousel/demo/vertical.md correctly 1`] = `
<div
class="ant-carousel ant-carousel-vertical"
>
exports[`renders ./components/carousel/demo/position.md correctly 1`] = `
<div>
<div
class="slick-slider slick-vertical slick-initialized"
dir="ltr"
class="ant-radio-group ant-radio-group-outline"
style="margin-bottom:8px"
>
<label
class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
>
<span
class="ant-radio-button ant-radio-button-checked"
>
<input
checked=""
class="ant-radio-button-input"
type="radio"
value="top"
/>
<span
class="ant-radio-button-inner"
/>
</span>
<span>
Top
</span>
</label>
<label
class="ant-radio-button-wrapper"
>
<span
class="ant-radio-button"
>
<input
class="ant-radio-button-input"
type="radio"
value="bottom"
/>
<span
class="ant-radio-button-inner"
/>
</span>
<span>
Bottom
</span>
</label>
<label
class="ant-radio-button-wrapper"
>
<span
class="ant-radio-button"
>
<input
class="ant-radio-button-input"
type="radio"
value="left"
/>
<span
class="ant-radio-button-inner"
/>
</span>
<span>
Left
</span>
</label>
<label
class="ant-radio-button-wrapper"
>
<span
class="ant-radio-button"
>
<input
class="ant-radio-button-input"
type="radio"
value="right"
/>
<span
class="ant-radio-button-inner"
/>
</span>
<span>
Right
</span>
</label>
</div>
<div
class="ant-carousel"
>
<div
class="slick-list"
class="slick-slider slick-initialized"
dir="ltr"
>
<div
class="slick-track"
style="width:900%;left:-100%"
class="slick-list"
>
<div
aria-hidden="true"
class="slick-slide slick-cloned"
data-index="-1"
style="width:11.11111111111111%"
tabindex="-1"
class="slick-track"
style="width:900%;left:-100%"
>
<div>
<div
style="width:100%;display:inline-block"
tabindex="-1"
>
<h3>
4
</h3>
<div
aria-hidden="true"
class="slick-slide slick-cloned"
data-index="-1"
style="width:11.11111111111111%"
tabindex="-1"
>
<div>
<div
style="width:100%;display:inline-block"
tabindex="-1"
>
<h3>
4
</h3>
</div>
</div>
</div>
</div>
<div
aria-hidden="false"
class="slick-slide slick-active slick-current"
data-index="0"
style="outline:none;width:11.11111111111111%"
tabindex="-1"
>
<div>
<div
style="width:100%;display:inline-block"
tabindex="-1"
>
<h3>
1
</h3>
<div
aria-hidden="false"
class="slick-slide slick-active slick-current"
data-index="0"
style="outline:none;width:11.11111111111111%"
tabindex="-1"
>
<div>
<div
style="width:100%;display:inline-block"
tabindex="-1"
>
<h3>
1
</h3>
</div>
</div>
</div>
</div>
<div
aria-hidden="true"
class="slick-slide"
data-index="1"
style="outline:none;width:11.11111111111111%"
tabindex="-1"
>
<div>
<div
style="width:100%;display:inline-block"
tabindex="-1"
>
<h3>
2
</h3>
<div
aria-hidden="true"
class="slick-slide"
data-index="1"
style="outline:none;width:11.11111111111111%"
tabindex="-1"
>
<div>
<div
style="width:100%;display:inline-block"
tabindex="-1"
>
<h3>
2
</h3>
</div>
</div>
</div>
</div>
<div
aria-hidden="true"
class="slick-slide"
data-index="2"
style="outline:none;width:11.11111111111111%"
tabindex="-1"
>
<div>
<div
style="width:100%;display:inline-block"
tabindex="-1"
>
<h3>
3
</h3>
<div
aria-hidden="true"
class="slick-slide"
data-index="2"
style="outline:none;width:11.11111111111111%"
tabindex="-1"
>
<div>
<div
style="width:100%;display:inline-block"
tabindex="-1"
>
<h3>
3
</h3>
</div>
</div>
</div>
</div>
<div
aria-hidden="true"
class="slick-slide"
data-index="3"
style="outline:none;width:11.11111111111111%"
tabindex="-1"
>
<div>
<div
style="width:100%;display:inline-block"
tabindex="-1"
>
<h3>
4
</h3>
<div
aria-hidden="true"
class="slick-slide"
data-index="3"
style="outline:none;width:11.11111111111111%"
tabindex="-1"
>
<div>
<div
style="width:100%;display:inline-block"
tabindex="-1"
>
<h3>
4
</h3>
</div>
</div>
</div>
</div>
<div
aria-hidden="true"
class="slick-slide slick-cloned"
data-index="4"
style="width:11.11111111111111%"
tabindex="-1"
>
<div>
<div
style="width:100%;display:inline-block"
tabindex="-1"
>
<h3>
1
</h3>
<div
aria-hidden="true"
class="slick-slide slick-cloned"
data-index="4"
style="width:11.11111111111111%"
tabindex="-1"
>
<div>
<div
style="width:100%;display:inline-block"
tabindex="-1"
>
<h3>
1
</h3>
</div>
</div>
</div>
</div>
<div
aria-hidden="true"
class="slick-slide slick-cloned"
data-index="5"
style="width:11.11111111111111%"
tabindex="-1"
>
<div>
<div
style="width:100%;display:inline-block"
tabindex="-1"
>
<h3>
2
</h3>
<div
aria-hidden="true"
class="slick-slide slick-cloned"
data-index="5"
style="width:11.11111111111111%"
tabindex="-1"
>
<div>
<div
style="width:100%;display:inline-block"
tabindex="-1"
>
<h3>
2
</h3>
</div>
</div>
</div>
</div>
<div
aria-hidden="true"
class="slick-slide slick-cloned"
data-index="6"
style="width:11.11111111111111%"
tabindex="-1"
>
<div>
<div
style="width:100%;display:inline-block"
tabindex="-1"
>
<h3>
3
</h3>
<div
aria-hidden="true"
class="slick-slide slick-cloned"
data-index="6"
style="width:11.11111111111111%"
tabindex="-1"
>
<div>
<div
style="width:100%;display:inline-block"
tabindex="-1"
>
<h3>
3
</h3>
</div>
</div>
</div>
</div>
<div
aria-hidden="true"
class="slick-slide slick-cloned"
data-index="7"
style="width:11.11111111111111%"
tabindex="-1"
>
<div>
<div
style="width:100%;display:inline-block"
tabindex="-1"
>
<h3>
4
</h3>
<div
aria-hidden="true"
class="slick-slide slick-cloned"
data-index="7"
style="width:11.11111111111111%"
tabindex="-1"
>
<div>
<div
style="width:100%;display:inline-block"
tabindex="-1"
>
<h3>
4
</h3>
</div>
</div>
</div>
</div>
</div>
</div>
<ul
class="slick-dots"
style="display:block"
>
<li
class="slick-active"
>
<button>
1
</button>
</li>
<li
class=""
<ul
class="slick-dots slick-dots-top"
style="display:block"
>
<button>
2
</button>
</li>
<li
class=""
>
<button>
3
</button>
</li>
<li
class=""
>
<button>
4
</button>
</li>
</ul>
<li
class="slick-active"
>
<button>
1
</button>
</li>
<li
class=""
>
<button>
2
</button>
</li>
<li
class=""
>
<button>
3
</button>
</li>
<li
class=""
>
<button>
4
</button>
</li>
</ul>
</div>
</div>
</div>
`;

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

@ -0,0 +1,137 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Carousel should works for dotPosition bottom 1`] = `
<div
class="ant-carousel"
>
<div
class="slick-slider slick-initialized"
>
<div
class="slick-list"
>
<div
class="slick-track"
style="opacity: 1; transform: translate3d(0px, 0px, 0px);"
>
<div
aria-hidden="false"
class="slick-slide slick-active slick-current"
data-index="0"
style="outline: none; width: 0px;"
tabindex="-1"
>
<div>
<div
style="width: 100%; display: inline-block;"
tabindex="-1"
/>
</div>
</div>
</div>
</div>
</div>
</div>
`;
exports[`Carousel should works for dotPosition left 1`] = `
<div
class="ant-carousel ant-carousel-vertical"
>
<div
class="slick-slider slick-vertical slick-initialized"
>
<div
class="slick-list"
>
<div
class="slick-track"
style="opacity: 1; transform: translate3d(0px, 0px, 0px);"
>
<div
aria-hidden="false"
class="slick-slide slick-active slick-current"
data-index="0"
style="outline: none; width: 0px;"
tabindex="-1"
>
<div>
<div
style="width: 100%; display: inline-block;"
tabindex="-1"
/>
</div>
</div>
</div>
</div>
</div>
</div>
`;
exports[`Carousel should works for dotPosition right 1`] = `
<div
class="ant-carousel ant-carousel-vertical"
>
<div
class="slick-slider slick-vertical slick-initialized"
>
<div
class="slick-list"
>
<div
class="slick-track"
style="opacity: 1; transform: translate3d(0px, 0px, 0px);"
>
<div
aria-hidden="false"
class="slick-slide slick-active slick-current"
data-index="0"
style="outline: none; width: 0px;"
tabindex="-1"
>
<div>
<div
style="width: 100%; display: inline-block;"
tabindex="-1"
/>
</div>
</div>
</div>
</div>
</div>
</div>
`;
exports[`Carousel should works for dotPosition top 1`] = `
<div
class="ant-carousel"
>
<div
class="slick-slider slick-initialized"
>
<div
class="slick-list"
>
<div
class="slick-track"
style="opacity: 1; transform: translate3d(0px, 0px, 0px);"
>
<div
aria-hidden="false"
class="slick-slide slick-active slick-current"
data-index="0"
style="outline: none; width: 0px;"
tabindex="-1"
>
<div>
<div
style="width: 100%; display: inline-block;"
tabindex="-1"
/>
</div>
</div>
</div>
</div>
</div>
</div>
`;

27
components/carousel/__tests__/index.test.js

@ -78,4 +78,31 @@ describe('Carousel', () => {
expect(spy).toHaveBeenCalled();
expect(spy2).toHaveBeenCalledWith('resize', onWindowResized);
});
describe('should works for dotPosition', () => {
['left', 'right', 'top', 'bottom'].forEach(dotPosition => {
it(dotPosition, () => {
const wrapper = mount(
<Carousel dotPosition={dotPosition}>
<div />
</Carousel>,
);
jest.runAllTimers();
expect(wrapper.render()).toMatchSnapshot();
});
});
});
it('warning', () => {
const warnSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
mount(
<Carousel vertical>
<div />
</Carousel>,
);
expect(warnSpy).toHaveBeenCalledWith(
'Warning: [antd: Carousel] `vertical` is deprecated, please use `dotPosition` instead.',
);
warnSpy.mockRestore();
});
});

2
components/carousel/demo/fade.md

@ -1,5 +1,5 @@
---
order: 2
order: 3
title:
zh-CN: 渐显
en-US: Fade in

63
components/carousel/demo/position.md

@ -0,0 +1,63 @@
---
order: 2
title:
zh-CN: 位置
en-US: Position
---
## zh-CN
位置有 4 个方向。
## en-US
There are 4 position options available.
````jsx
import { Carousel, Radio } from 'antd';
class PositionCarouselDemo extends React.Component {
state = {
dotPosition: 'top',
};
handlePositionChange = ({ target: { value: dotPosition } }) => this.setState({ dotPosition });
render() {
const { dotPosition } = this.state;
return (
<div>
<Radio.Group onChange={this.handlePositionChange} value={dotPosition} style={{ marginBottom: 8 }}>
<Radio.Button value="top">Top</Radio.Button>
<Radio.Button value="bottom">Bottom</Radio.Button>
<Radio.Button value="left">Left</Radio.Button>
<Radio.Button value="right">Right</Radio.Button>
</Radio.Group>
<Carousel dotPosition={dotPosition}>
<div><h3>1</h3></div>
<div><h3>2</h3></div>
<div><h3>3</h3></div>
<div><h3>4</h3></div>
</Carousel>
</div>
);
}
}
ReactDOM.render(<PositionCarouselDemo />, mountNode);
````
````css
/* For demo */
.ant-carousel .slick-slide {
text-align: center;
height: 160px;
line-height: 160px;
background: #364d79;
overflow: hidden;
}
.ant-carousel .slick-slide h3 {
color: #fff;
}
````

43
components/carousel/demo/vertical.md

@ -1,43 +0,0 @@
---
order: 1
title:
zh-CN: 垂直
en-US: Vertical
---
## zh-CN
垂直显示。
## en-US
Vertical pagination.
````jsx
import { Carousel } from 'antd';
ReactDOM.render(
<Carousel vertical>
<div><h3>1</h3></div>
<div><h3>2</h3></div>
<div><h3>3</h3></div>
<div><h3>4</h3></div>
</Carousel>,
mountNode
);
````
````css
/* For demo */
.ant-carousel .slick-slide {
text-align: center;
height: 160px;
line-height: 160px;
background: #364d79;
overflow: hidden;
}
.ant-carousel .slick-slide h3 {
color: #fff;
}
````

18
components/carousel/index.en-US.md

@ -14,15 +14,15 @@ A carousel component. Scales with its container.
## API
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| afterChange | Callback function called after the current index changes | function(current) | - |
| autoplay | Whether to scroll automatically | boolean | `false` |
| beforeChange | Callback function called before the current index changes | function(from, to) | - |
| dots | Whether to show the dots at the bottom of the gallery | boolean | `true` |
| easing | Transition interpolation function name | string | `linear` |
| effect | Transition effect | `scrollx` \| `fade` | `scrollx` |
| vertical | Whether to use a vertical display | boolean | `false` |
| Property | Description | Type | Default | Version |
| -------- | ----------- | ---- | ------- | ------- |
| afterChange | Callback function called after the current index changes | function(current) | - | |
| autoplay | Whether to scroll automatically | boolean | `false` | |
| beforeChange | Callback function called before the current index changes | function(from, to) | - | |
| dotPosition | The position of the dots, which can be one of `top` `bottom` `left` `right` | string | bottom | 3.17.0 |
| dots | Whether to show the dots at the bottom of the gallery | boolean | `true` | |
| easing | Transition interpolation function name | string | `linear` | |
| effect | Transition effect | `scrollx` \| `fade` | `scrollx` | |
## Methods

25
components/carousel/index.tsx

@ -2,6 +2,7 @@ import * as React from 'react';
import debounce from 'lodash/debounce';
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
import { Settings } from 'react-slick';
import warning from '../_util/warning';
// matchMedia polyfill for
// https://github.com/WickyNilliams/enquire.js/issues/82
@ -23,12 +24,15 @@ if (typeof window !== 'undefined') {
const SlickCarousel = require('react-slick').default;
export type CarouselEffect = 'scrollx' | 'fade';
export type DotPosition = 'top' | 'bottom' | 'left' | 'right';
// Carousel
export interface CarouselProps extends Settings {
effect?: CarouselEffect;
style?: React.CSSProperties;
prefixCls?: string;
slickGoTo?: number;
dotPosition?: DotPosition;
}
export default class Carousel extends React.Component<CarouselProps, {}> {
@ -47,6 +51,14 @@ export default class Carousel extends React.Component<CarouselProps, {}> {
this.onWindowResized = debounce(this.onWindowResized, 500, {
leading: false,
});
if ('vertical' in this.props) {
warning(
!this.props.vertical,
'Carousel',
'`vertical` is deprecated, please use `dotPosition` instead.',
);
}
}
componentDidMount() {
@ -90,6 +102,15 @@ export default class Carousel extends React.Component<CarouselProps, {}> {
this.slick.slickGoTo(slide, dontAnimate);
}
getDotPosition(): DotPosition {
if (this.props.dotPosition) {
return this.props.dotPosition;
} else if ('vertical' in this.props) {
return this.props.vertical ? 'right' : 'bottom';
}
return 'bottom';
}
renderCarousel = ({ getPrefixCls }: ConfigConsumerProps) => {
const props = {
...this.props,
@ -100,6 +121,10 @@ export default class Carousel extends React.Component<CarouselProps, {}> {
}
let className = getPrefixCls('carousel', props.prefixCls);
const dotsClass = 'slick-dots';
const dotPosition = this.getDotPosition();
props.vertical = dotPosition === 'left' || dotPosition === 'right';
props.dotsClass = `${dotsClass} ${dotsClass}-${dotPosition || 'bottom'}`;
if (props.vertical) {
className = `${className} ${className}-vertical`;
}

18
components/carousel/index.zh-CN.md

@ -15,15 +15,15 @@ subtitle: 走马灯
## API
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| afterChange | 切换面板的回调 | function(current) | 无 |
| autoplay | 是否自动切换 | boolean | false |
| beforeChange | 切换面板的回调 | function(from, to) | 无 |
| dots | 是否显示面板指示点 | boolean | true |
| easing | 动画效果 | string | linear |
| effect | 动画效果函数,可取 scrollx, fade | string | scrollx |
| vertical | 垂直显示 | boolean | false |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| afterChange | 切换面板的回调 | function(current) | 无 | |
| autoplay | 是否自动切换 | boolean | false | |
| beforeChange | 切换面板的回调 | function(from, to) | 无 | |
| dotPosition | 面板指示点位置,可选 `top` `bottom` `left` `right` | string | bottom | 3.17.0 |
| dots | 是否显示面板指示点 | boolean | true | |
| easing | 动画效果 | string | linear | |
| effect | 动画效果函数,可取 scrollx, fade | string | scrollx | |
## 方法

16
components/carousel/style/index.less

@ -1,4 +1,4 @@
@import '../../style/themes/default';
@import '../../style/themes/index';
@import '../../style/mixins/index';
.@{ant-prefix}-carousel {
@ -146,7 +146,6 @@
// Dots
.slick-dots {
position: absolute;
bottom: 12px;
display: block;
width: 100%;
height: @carousel-dot-height;
@ -154,6 +153,12 @@
padding: 0;
text-align: center;
list-style: none;
&-bottom {
bottom: 12px;
}
&-top {
top: 12px;
}
li {
position: relative;
display: inline-block;
@ -196,11 +201,16 @@
.@{ant-prefix}-carousel-vertical {
.slick-dots {
top: 50%;
right: 12px;
bottom: auto;
width: @carousel-dot-height;
height: auto;
transform: translateY(-50%);
&-left {
left: 12px;
}
&-right {
right: 12px;
}
li {
margin: 0 2px;
vertical-align: baseline;

2
components/cascader/style/index.less

@ -1,4 +1,4 @@
@import '../../style/themes/default';
@import '../../style/themes/index';
@import '../../style/mixins/index';
@import '../../input/style/mixin';

2
components/checkbox/style/index.less

@ -1,4 +1,4 @@
@import '../../style/themes/default';
@import '../../style/themes/index';
@import './mixin';
.antCheckboxFn();

12
components/collapse/Collapse.tsx

@ -6,6 +6,8 @@ import Icon from '../icon';
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
import animation from '../_util/openAnimation';
export type ExpandIconPosition = 'left' | 'right';
export interface CollapseProps {
activeKey?: Array<string> | string;
defaultActiveKey?: Array<string>;
@ -18,6 +20,7 @@ export interface CollapseProps {
bordered?: boolean;
prefixCls?: string;
expandIcon?: (panelProps: any) => React.ReactNode;
expandIconPosition?: ExpandIconPosition;
}
interface PanelProps {
@ -37,6 +40,7 @@ export default class Collapse extends React.Component<CollapseProps, any> {
static defaultProps = {
bordered: true,
openAnimation: { ...animation, appear() {} },
expandIconPosition: 'left',
};
renderExpandIcon = (panelProps: PanelProps = {}, prefixCls: string) => {
@ -54,11 +58,17 @@ export default class Collapse extends React.Component<CollapseProps, any> {
};
renderCollapse = ({ getPrefixCls }: ConfigConsumerProps) => {
const { prefixCls: customizePrefixCls, className = '', bordered } = this.props;
const {
prefixCls: customizePrefixCls,
className = '',
bordered,
expandIconPosition,
} = this.props;
const prefixCls = getPrefixCls('collapse', customizePrefixCls);
const collapseClassName = classNames(
{
[`${prefixCls}-borderless`]: !bordered,
[`${prefixCls}-icon-position-${expandIconPosition}`]: true,
},
className,
);

273
components/collapse/__tests__/__snapshots__/demo.test.js.snap

@ -2,7 +2,7 @@
exports[`renders ./components/collapse/demo/accordion.md correctly 1`] = `
<div
class="ant-collapse"
class="ant-collapse ant-collapse-icon-position-left"
role="tablist"
>
<div
@ -103,7 +103,7 @@ exports[`renders ./components/collapse/demo/accordion.md correctly 1`] = `
exports[`renders ./components/collapse/demo/basic.md correctly 1`] = `
<div
class="ant-collapse"
class="ant-collapse ant-collapse-icon-position-left"
>
<div
class="ant-collapse-item ant-collapse-item-active"
@ -219,7 +219,7 @@ exports[`renders ./components/collapse/demo/basic.md correctly 1`] = `
exports[`renders ./components/collapse/demo/borderless.md correctly 1`] = `
<div
class="ant-collapse ant-collapse-borderless"
class="ant-collapse ant-collapse-borderless ant-collapse-icon-position-left"
>
<div
class="ant-collapse-item ant-collapse-item-active"
@ -333,7 +333,7 @@ exports[`renders ./components/collapse/demo/borderless.md correctly 1`] = `
exports[`renders ./components/collapse/demo/custom.md correctly 1`] = `
<div
class="ant-collapse ant-collapse-borderless"
class="ant-collapse ant-collapse-borderless ant-collapse-icon-position-left"
>
<div
class="ant-collapse-item ant-collapse-item-active"
@ -451,121 +451,153 @@ exports[`renders ./components/collapse/demo/custom.md correctly 1`] = `
`;
exports[`renders ./components/collapse/demo/extra.md correctly 1`] = `
<div
class="ant-collapse"
>
<div>
<div
class="ant-collapse-item ant-collapse-item-active"
class="ant-collapse ant-collapse-icon-position-left"
>
<div
aria-expanded="true"
class="ant-collapse-header"
role="button"
tabindex="0"
class="ant-collapse-item ant-collapse-item-active"
>
<i
aria-label="icon: right"
class="anticon anticon-right ant-collapse-arrow"
>
<svg
aria-hidden="true"
class=""
data-icon="right"
fill="currentColor"
focusable="false"
height="1em"
style="-ms-transform:rotate(90deg);transform:rotate(90deg)"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"
/>
</svg>
</i>
This is panel header 1
<div
class="ant-collapse-extra"
aria-expanded="true"
class="ant-collapse-header"
role="button"
tabindex="0"
>
<i
aria-label="icon: setting"
class="anticon anticon-setting"
tabindex="-1"
aria-label="icon: right"
class="anticon anticon-right ant-collapse-arrow"
>
<svg
aria-hidden="true"
class=""
data-icon="setting"
data-icon="right"
fill="currentColor"
focusable="false"
height="1em"
style="-ms-transform:rotate(90deg);transform:rotate(90deg)"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 0 0 9.3-35.2l-.9-2.6a443.74 443.74 0 0 0-79.7-137.9l-1.8-2.1a32.12 32.12 0 0 0-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 0 0-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 0 0-25.8 25.7l-15.8 85.4a351.86 351.86 0 0 0-99 57.4l-81.9-29.1a32 32 0 0 0-35.1 9.5l-1.8 2.1a446.02 446.02 0 0 0-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 0 0-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0 0 35.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0 0 25.8 25.7l2.7.5a449.4 449.4 0 0 0 159 0l2.7-.5a32.05 32.05 0 0 0 25.8-25.7l15.7-85a350 350 0 0 0 99.7-57.6l81.3 28.9a32 32 0 0 0 35.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 0 1-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 0 1-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 0 1 512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 0 1 400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 0 1 624 502c0 29.9-11.7 58-32.8 79.2z"
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"
/>
</svg>
</i>
This is panel header 1
<div
class="ant-collapse-extra"
>
<i
aria-label="icon: setting"
class="anticon anticon-setting"
tabindex="-1"
>
<svg
aria-hidden="true"
class=""
data-icon="setting"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 0 0 9.3-35.2l-.9-2.6a443.74 443.74 0 0 0-79.7-137.9l-1.8-2.1a32.12 32.12 0 0 0-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 0 0-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 0 0-25.8 25.7l-15.8 85.4a351.86 351.86 0 0 0-99 57.4l-81.9-29.1a32 32 0 0 0-35.1 9.5l-1.8 2.1a446.02 446.02 0 0 0-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 0 0-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0 0 35.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0 0 25.8 25.7l2.7.5a449.4 449.4 0 0 0 159 0l2.7-.5a32.05 32.05 0 0 0 25.8-25.7l15.7-85a350 350 0 0 0 99.7-57.6l81.3 28.9a32 32 0 0 0 35.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 0 1-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 0 1-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 0 1 512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 0 1 400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 0 1 624 502c0 29.9-11.7 58-32.8 79.2z"
/>
</svg>
</i>
</div>
</div>
</div>
<div
class="ant-collapse-content ant-collapse-content-active"
>
<div
class="ant-collapse-content-box"
class="ant-collapse-content ant-collapse-content-active"
>
<div>
<div
class="ant-collapse-content-box"
>
<div>
A dog is a type of domesticated animal.
Known for its loyalty and faithfulness,
it can be found as a welcome guest in many households across the world.
</div>
</div>
</div>
</div>
</div>
<div
class="ant-collapse-item"
>
<div
aria-expanded="false"
class="ant-collapse-header"
role="button"
tabindex="0"
class="ant-collapse-item"
>
<i
aria-label="icon: right"
class="anticon anticon-right ant-collapse-arrow"
<div
aria-expanded="false"
class="ant-collapse-header"
role="button"
tabindex="0"
>
<svg
aria-hidden="true"
class=""
data-icon="right"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
<i
aria-label="icon: right"
class="anticon anticon-right ant-collapse-arrow"
>
<path
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"
/>
</svg>
</i>
This is panel header 2
<svg
aria-hidden="true"
class=""
data-icon="right"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"
/>
</svg>
</i>
This is panel header 2
<div
class="ant-collapse-extra"
>
<i
aria-label="icon: setting"
class="anticon anticon-setting"
tabindex="-1"
>
<svg
aria-hidden="true"
class=""
data-icon="setting"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 0 0 9.3-35.2l-.9-2.6a443.74 443.74 0 0 0-79.7-137.9l-1.8-2.1a32.12 32.12 0 0 0-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 0 0-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 0 0-25.8 25.7l-15.8 85.4a351.86 351.86 0 0 0-99 57.4l-81.9-29.1a32 32 0 0 0-35.1 9.5l-1.8 2.1a446.02 446.02 0 0 0-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 0 0-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0 0 35.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0 0 25.8 25.7l2.7.5a449.4 449.4 0 0 0 159 0l2.7-.5a32.05 32.05 0 0 0 25.8-25.7l15.7-85a350 350 0 0 0 99.7-57.6l81.3 28.9a32 32 0 0 0 35.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 0 1-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 0 1-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 0 1 512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 0 1 400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 0 1 624 502c0 29.9-11.7 58-32.8 79.2z"
/>
</svg>
</i>
</div>
</div>
</div>
<div
class="ant-collapse-item"
>
<div
class="ant-collapse-extra"
aria-expanded="false"
class="ant-collapse-header"
role="button"
tabindex="0"
>
<i
aria-label="icon: setting"
class="anticon anticon-setting"
tabindex="-1"
aria-label="icon: right"
class="anticon anticon-right ant-collapse-arrow"
>
<svg
aria-hidden="true"
class=""
data-icon="setting"
data-icon="right"
fill="currentColor"
focusable="false"
height="1em"
@ -573,54 +605,77 @@ exports[`renders ./components/collapse/demo/extra.md correctly 1`] = `
width="1em"
>
<path
d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 0 0 9.3-35.2l-.9-2.6a443.74 443.74 0 0 0-79.7-137.9l-1.8-2.1a32.12 32.12 0 0 0-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 0 0-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 0 0-25.8 25.7l-15.8 85.4a351.86 351.86 0 0 0-99 57.4l-81.9-29.1a32 32 0 0 0-35.1 9.5l-1.8 2.1a446.02 446.02 0 0 0-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 0 0-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0 0 35.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0 0 25.8 25.7l2.7.5a449.4 449.4 0 0 0 159 0l2.7-.5a32.05 32.05 0 0 0 25.8-25.7l15.7-85a350 350 0 0 0 99.7-57.6l81.3 28.9a32 32 0 0 0 35.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 0 1-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 0 1-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 0 1 512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 0 1 400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 0 1 624 502c0 29.9-11.7 58-32.8 79.2z"
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"
/>
</svg>
</i>
This is panel header 3
<div
class="ant-collapse-extra"
>
<i
aria-label="icon: setting"
class="anticon anticon-setting"
tabindex="-1"
>
<svg
aria-hidden="true"
class=""
data-icon="setting"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 0 0 9.3-35.2l-.9-2.6a443.74 443.74 0 0 0-79.7-137.9l-1.8-2.1a32.12 32.12 0 0 0-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 0 0-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 0 0-25.8 25.7l-15.8 85.4a351.86 351.86 0 0 0-99 57.4l-81.9-29.1a32 32 0 0 0-35.1 9.5l-1.8 2.1a446.02 446.02 0 0 0-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 0 0-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0 0 35.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0 0 25.8 25.7l2.7.5a449.4 449.4 0 0 0 159 0l2.7-.5a32.05 32.05 0 0 0 25.8-25.7l15.7-85a350 350 0 0 0 99.7-57.6l81.3 28.9a32 32 0 0 0 35.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 0 1-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 0 1-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 0 1 512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 0 1 400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 0 1 624 502c0 29.9-11.7 58-32.8 79.2z"
/>
</svg>
</i>
</div>
</div>
</div>
</div>
<br />
Expand Icon Position:
<div
class="ant-collapse-item"
class="ant-select ant-select-enabled"
>
<div
aria-autocomplete="list"
aria-controls=""
aria-expanded="false"
class="ant-collapse-header"
role="button"
aria-haspopup="true"
class="ant-select-selection
ant-select-selection--single"
role="combobox"
tabindex="0"
>
<i
aria-label="icon: right"
class="anticon anticon-right ant-collapse-arrow"
<div
class="ant-select-selection__rendered"
>
<svg
aria-hidden="true"
class=""
data-icon="right"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
<div
class="ant-select-selection-selected-value"
style="display:block;opacity:1"
title="left"
>
<path
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"
/>
</svg>
</i>
This is panel header 3
<div
class="ant-collapse-extra"
left
</div>
</div>
<span
class="ant-select-arrow"
style="user-select:none;-webkit-user-select:none"
unselectable="on"
>
<i
aria-label="icon: setting"
class="anticon anticon-setting"
tabindex="-1"
aria-label="icon: down"
class="anticon anticon-down ant-select-arrow-icon"
>
<svg
aria-hidden="true"
class=""
data-icon="setting"
data-icon="down"
fill="currentColor"
focusable="false"
height="1em"
@ -628,11 +683,11 @@ exports[`renders ./components/collapse/demo/extra.md correctly 1`] = `
width="1em"
>
<path
d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 0 0 9.3-35.2l-.9-2.6a443.74 443.74 0 0 0-79.7-137.9l-1.8-2.1a32.12 32.12 0 0 0-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 0 0-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 0 0-25.8 25.7l-15.8 85.4a351.86 351.86 0 0 0-99 57.4l-81.9-29.1a32 32 0 0 0-35.1 9.5l-1.8 2.1a446.02 446.02 0 0 0-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 0 0-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0 0 35.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0 0 25.8 25.7l2.7.5a449.4 449.4 0 0 0 159 0l2.7-.5a32.05 32.05 0 0 0 25.8-25.7l15.7-85a350 350 0 0 0 99.7-57.6l81.3 28.9a32 32 0 0 0 35.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 0 1-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 0 1-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 0 1 512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 0 1 400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 0 1 624 502c0 29.9-11.7 58-32.8 79.2z"
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
/>
</svg>
</i>
</div>
</span>
</div>
</div>
</div>
@ -640,7 +695,7 @@ exports[`renders ./components/collapse/demo/extra.md correctly 1`] = `
exports[`renders ./components/collapse/demo/mix.md correctly 1`] = `
<div
class="ant-collapse"
class="ant-collapse ant-collapse-icon-position-left"
>
<div
class="ant-collapse-item"
@ -740,7 +795,7 @@ exports[`renders ./components/collapse/demo/mix.md correctly 1`] = `
exports[`renders ./components/collapse/demo/noarrow.md correctly 1`] = `
<div
class="ant-collapse"
class="ant-collapse ant-collapse-icon-position-left"
>
<div
class="ant-collapse-item ant-collapse-item-active"

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

@ -2,7 +2,7 @@
exports[`Collapse should render extra node of panel 1`] = `
<div
class="ant-collapse"
class="ant-collapse ant-collapse-icon-position-left"
>
<div
class="ant-collapse-item"
@ -89,7 +89,7 @@ exports[`Collapse should render extra node of panel 1`] = `
exports[`Collapse should support remove expandIcon 1`] = `
<div
class="ant-collapse"
class="ant-collapse ant-collapse-icon-position-left"
>
<div
class="ant-collapse-item"

57
components/collapse/demo/extra.md

@ -14,9 +14,10 @@ title:
More than one panel can be expanded at a time, the first panel is initialized to be active in this case.
````jsx
import { Collapse, Icon } from 'antd';
import { Collapse, Icon, Select } from 'antd';
const Panel = Collapse.Panel;
const { Panel } = Collapse;
const { Option } = Select;
function callback(key) {
console.log(key);
@ -38,18 +39,42 @@ const genExtra = () => (
/>
);
ReactDOM.render(
<Collapse defaultActiveKey={['1']} onChange={callback}>
<Panel header="This is panel header 1" key="1" extra={genExtra()}>
<div>{text}</div>
</Panel>
<Panel header="This is panel header 2" key="2" extra={genExtra()}>
<div>{text}</div>
</Panel>
<Panel header="This is panel header 3" key="3" extra={genExtra()}>
<div>{text}</div>
</Panel>
</Collapse>,
mountNode
);
class Demo extends React.Component {
state = {
expandIconPosition: 'left',
};
onPositionChange = (expandIconPosition) => {
this.setState({ expandIconPosition });
};
render() {
const { expandIconPosition } = this.state;
return (
<div>
<Collapse defaultActiveKey={['1']} onChange={callback} expandIconPosition={expandIconPosition}>
<Panel header="This is panel header 1" key="1" extra={genExtra()}>
<div>{text}</div>
</Panel>
<Panel header="This is panel header 2" key="2" extra={genExtra()}>
<div>{text}</div>
</Panel>
<Panel header="This is panel header 3" key="3" extra={genExtra()}>
<div>{text}</div>
</Panel>
</Collapse>
<br />
Expand Icon Position:
{' '}
<Select value={expandIconPosition} onChange={this.onPositionChange}>
<Option value="left">left</Option>
<Option value="right">right</Option>
</Select>
</div>
);
}
}
ReactDOM.render(<Demo />, mountNode);
````

25
components/collapse/index.en-US.md

@ -16,15 +16,16 @@ A content area which can be collapsed and expanded.
### Collapse
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| activeKey | Key of the active panel | string\[]\|string | No default value. In `accordion` mode, it's the key of the first panel. |
| defaultActiveKey | Key of the initial active panel | string | - |
| bordered | Toggles rendering of the border around the collapse block | boolean | `true` |
| accordion | If `true`, `Collapse` renders as `Accordion` | boolean | `false` |
| onChange | Callback function executed when active panel is changed | Function | - |
| expandIcon | allow to customize collapse icon | (panelProps) => ReactNode | - |
| destroyInactivePanel | Destroy Inactive Panel | boolean | `false` |
| Property | Description | Type | Default | Version |
| -------- | ----------- | ---- | ------- | ------- |
| activeKey | Key of the active panel | string\[]\|string | No default value. In `accordion` mode, it's the key of the first panel. | |
| defaultActiveKey | Key of the initial active panel | string | - | |
| bordered | Toggles rendering of the border around the collapse block | boolean | `true` | |
| accordion | If `true`, `Collapse` renders as `Accordion` | boolean | `false` | |
| onChange | Callback function executed when active panel is changed | Function | - | |
| expandIcon | allow to customize collapse icon | (panelProps) => ReactNode | - | |
| expandIconPosition | Set expand icon position: `left`, `right` | `left` | - | 3.17.0 |
| destroyInactivePanel | Destroy Inactive Panel | boolean | `false` | |
### Collapse.Panel
@ -36,9 +37,3 @@ A content area which can be collapsed and expanded.
| key | Unique key identifying the panel from among its siblings | string | - |
| showArrow | If `false`, panel will not show arrow icon | boolean | `true` |
| extra | extra element in the corner | ReactNode | - |
## FAQ
### How to let the arrow to be on the right?
You can adjust style of the arrow: <https://codesandbox.io/s/v046rx89n0>

25
components/collapse/index.zh-CN.md

@ -17,15 +17,16 @@ cols: 1
### Collapse
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| activeKey | 当前激活 tab 面板的 key | string\[]\|string | 默认无,accordion模式下默认第一个元素 |
| defaultActiveKey | 初始化选中面板的 key | string | 无 |
| bordered | 带边框风格的折叠面板 | boolean | `true` |
| accordion | 手风琴模式 | boolean | `false` |
| onChange | 切换面板的回调 | Function | 无 |
| expandIcon | 自定义切换图标 | (panelProps) => ReactNode | - |
| destroyInactivePanel | 销毁折叠隐藏的面板 | boolean | `false` |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| activeKey | 当前激活 tab 面板的 key | string\[]\|string | 默认无,accordion模式下默认第一个元素 | |
| defaultActiveKey | 初始化选中面板的 key | string | 无 | |
| bordered | 带边框风格的折叠面板 | boolean | `true` | |
| accordion | 手风琴模式 | boolean | `false` | |
| onChange | 切换面板的回调 | Function | 无 | |
| expandIcon | 自定义切换图标 | (panelProps) => ReactNode | - | |
| expandIconPosition | 设置图标位置: `left`, `right` | `left` | - | 3.17.0 |
| destroyInactivePanel | 销毁折叠隐藏的面板 | boolean | `false` | |
### Collapse.Panel
@ -37,9 +38,3 @@ cols: 1
| key | 对应 activeKey | string | 无 |
| showArrow | 是否展示当前面板上的箭头 | boolean | `true` |
| extra | 自定义渲染每个面板右上角的内容 | ReactNode | - |
## FAQ
### 我希望箭头在右边,怎么做?
通过样式调整,将箭头放到右边就行啦:<https://codesandbox.io/s/v046rx89n0>

18
components/collapse/style/index.less

@ -1,4 +1,4 @@
@import '../../style/themes/default';
@import '../../style/themes/index';
@import '../../style/mixins/index';
@collapse-prefix-cls: ~'@{ant-prefix}-collapse';
@ -24,6 +24,7 @@
> .@{collapse-prefix-cls}-header {
position: relative;
padding: @collapse-header-padding;
padding-left: @collapse-header-padding-extra;
color: @heading-color;
line-height: 22px;
cursor: pointer;
@ -62,6 +63,21 @@
}
}
// Expand Icon right
&-icon-position-right {
& > .@{collapse-prefix-cls}-item {
> .@{collapse-prefix-cls}-header {
padding: @collapse-header-padding;
padding-right: @collapse-header-padding-extra;
.@{collapse-prefix-cls}-arrow {
right: @padding-md;
left: initial;
}
}
}
}
&-anim-active {
transition: height 0.2s @ease-out;
}

178
components/comment/__tests__/__snapshots__/demo.test.js.snap

@ -216,108 +216,116 @@ exports[`renders ./components/comment/demo/list.md correctly 1`] = `
<div
class="ant-spin-container"
>
<div
class="ant-comment"
<ul
class="ant-list-items"
>
<div
class="ant-comment-inner"
>
<div
class="ant-comment-avatar"
>
<img
src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
/>
</div>
<li>
<div
class="ant-comment-content"
class="ant-comment"
>
<div
class="ant-comment-content-author"
class="ant-comment-inner"
>
<span
class="ant-comment-content-author-name"
<div
class="ant-comment-avatar"
>
Han Solo
</span>
<span
class="ant-comment-content-author-time"
<img
src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
/>
</div>
<div
class="ant-comment-content"
>
<span>
a day ago
</span>
</span>
</div>
<div
class="ant-comment-content-detail"
>
<p>
We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.
</p>
<div
class="ant-comment-content-author"
>
<span
class="ant-comment-content-author-name"
>
Han Solo
</span>
<span
class="ant-comment-content-author-time"
>
<span>
a day ago
</span>
</span>
</div>
<div
class="ant-comment-content-detail"
>
<p>
We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.
</p>
</div>
<ul
class="ant-comment-actions"
>
<li>
<span>
Reply to
</span>
</li>
</ul>
</div>
</div>
<ul
class="ant-comment-actions"
>
<li>
<span>
Reply to
</span>
</li>
</ul>
</div>
</div>
</div>
<div
class="ant-comment"
>
<div
class="ant-comment-inner"
>
<div
class="ant-comment-avatar"
>
<img
src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
/>
</div>
</li>
<li>
<div
class="ant-comment-content"
class="ant-comment"
>
<div
class="ant-comment-content-author"
class="ant-comment-inner"
>
<span
class="ant-comment-content-author-name"
<div
class="ant-comment-avatar"
>
Han Solo
</span>
<span
class="ant-comment-content-author-time"
<img
src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
/>
</div>
<div
class="ant-comment-content"
>
<span>
2 days ago
</span>
</span>
</div>
<div
class="ant-comment-content-detail"
>
<p>
We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.
</p>
<div
class="ant-comment-content-author"
>
<span
class="ant-comment-content-author-name"
>
Han Solo
</span>
<span
class="ant-comment-content-author-time"
>
<span>
2 days ago
</span>
</span>
</div>
<div
class="ant-comment-content-detail"
>
<p>
We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.
</p>
</div>
<ul
class="ant-comment-actions"
>
<li>
<span>
Reply to
</span>
</li>
</ul>
</div>
</div>
<ul
class="ant-comment-actions"
>
<li>
<span>
Reply to
</span>
</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>

16
components/comment/demo/list.md

@ -53,13 +53,15 @@ ReactDOM.render(
itemLayout="horizontal"
dataSource={data}
renderItem={item => (
<Comment
actions={item.actions}
author={item.author}
avatar={item.avatar}
content={item.content}
datetime={item.datetime}
/>
<li>
<Comment
actions={item.actions}
author={item.author}
avatar={item.avatar}
content={item.content}
datetime={item.datetime}
/>
</li>
)}
/>,
mountNode,

2
components/comment/style/index.less

@ -1,4 +1,4 @@
@import '../../style/themes/default';
@import '../../style/themes/index';
@import '../../style/mixins/index';
@comment-prefix-cls: ~'@{ant-prefix}-comment';

174
components/config-provider/__tests__/__snapshots__/components.test.js.snap

@ -5517,7 +5517,7 @@ exports[`ConfigProvider components Carousel configProvider 1`] = `
</div>
</div>
<ul
class="slick-dots"
class="slick-dots slick-dots-bottom"
style="display:block"
>
<li
@ -5647,7 +5647,7 @@ exports[`ConfigProvider components Carousel normal 1`] = `
</div>
</div>
<ul
class="slick-dots"
class="slick-dots slick-dots-bottom"
style="display:block"
>
<li
@ -5777,7 +5777,7 @@ exports[`ConfigProvider components Carousel prefixCls 1`] = `
</div>
</div>
<ul
class="slick-dots"
class="slick-dots slick-dots-bottom"
style="display:block"
>
<li
@ -5990,7 +5990,7 @@ exports[`ConfigProvider components Checkbox prefixCls 1`] = `
exports[`ConfigProvider components Collapse configProvider 1`] = `
<div
class="config-collapse"
class="config-collapse config-collapse-icon-position-left"
>
<div
class="config-collapse-item"
@ -6028,7 +6028,7 @@ exports[`ConfigProvider components Collapse configProvider 1`] = `
exports[`ConfigProvider components Collapse normal 1`] = `
<div
class="ant-collapse"
class="ant-collapse ant-collapse-icon-position-left"
>
<div
class="ant-collapse-item"
@ -6066,7 +6066,7 @@ exports[`ConfigProvider components Collapse normal 1`] = `
exports[`ConfigProvider components Collapse prefixCls 1`] = `
<div
class="prefix-Collapse"
class="prefix-Collapse prefix-Collapse-icon-position-left"
>
<div
class="prefix-Collapse-item"
@ -6955,7 +6955,7 @@ exports[`ConfigProvider components Dropdown configProvider 1`] = `
</span>
</button>
<button
class="config-btn config-dropdown-trigger config-btn-default config-btn-icon-only"
class="config-btn config-dropdown-trigger config-btn-default"
type="button"
>
<i
@ -6994,7 +6994,7 @@ exports[`ConfigProvider components Dropdown normal 1`] = `
</span>
</button>
<button
class="ant-btn ant-dropdown-trigger ant-btn-default ant-btn-icon-only"
class="ant-btn ant-dropdown-trigger ant-btn-default"
type="button"
>
<i
@ -7033,7 +7033,7 @@ exports[`ConfigProvider components Dropdown prefixCls 1`] = `
</span>
</button>
<button
class="ant-btn ant-dropdown-trigger ant-btn-default ant-btn-icon-only"
class="ant-btn ant-dropdown-trigger ant-btn-default"
type="button"
>
<i
@ -7666,39 +7666,43 @@ exports[`ConfigProvider components List configProvider 1`] = `
<div
class="config-spin-container"
>
<div
class="config-list-item"
<ul
class="config-list-items"
>
<div
class="config-list-item-meta"
<li
class="config-list-item"
>
<div
class="config-list-item-meta-avatar"
>
<span
class="config-avatar config-avatar-circle config-avatar-image"
>
<img
src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
/>
</span>
</div>
<div
class="config-list-item-meta-content"
class="config-list-item-meta"
>
<h4
class="config-list-item-meta-title"
<div
class="config-list-item-meta-avatar"
>
Ant Design
</h4>
<span
class="config-avatar config-avatar-circle config-avatar-image"
>
<img
src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
/>
</span>
</div>
<div
class="config-list-item-meta-description"
class="config-list-item-meta-content"
>
Ant Design, a design language for background applications, is refined by Ant UED Team
<h4
class="config-list-item-meta-title"
>
Ant Design
</h4>
<div
class="config-list-item-meta-description"
>
Ant Design, a design language for background applications, is refined by Ant UED Team
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
@ -7714,39 +7718,43 @@ exports[`ConfigProvider components List normal 1`] = `
<div
class="ant-spin-container"
>
<div
class="ant-list-item"
<ul
class="ant-list-items"
>
<div
class="ant-list-item-meta"
<li
class="ant-list-item"
>
<div
class="ant-list-item-meta-avatar"
class="ant-list-item-meta"
>
<span
class="ant-avatar ant-avatar-circle ant-avatar-image"
>
<img
src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
/>
</span>
</div>
<div
class="ant-list-item-meta-content"
>
<h4
class="ant-list-item-meta-title"
<div
class="ant-list-item-meta-avatar"
>
Ant Design
</h4>
<span
class="ant-avatar ant-avatar-circle ant-avatar-image"
>
<img
src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
/>
</span>
</div>
<div
class="ant-list-item-meta-description"
class="ant-list-item-meta-content"
>
Ant Design, a design language for background applications, is refined by Ant UED Team
<h4
class="ant-list-item-meta-title"
>
Ant Design
</h4>
<div
class="ant-list-item-meta-description"
>
Ant Design, a design language for background applications, is refined by Ant UED Team
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
@ -7762,39 +7770,43 @@ exports[`ConfigProvider components List prefixCls 1`] = `
<div
class="ant-spin-container"
>
<div
class="prefix-List-item"
<ul
class="prefix-List-items"
>
<div
class="prefix-List-item-meta"
<li
class="prefix-List-item"
>
<div
class="prefix-List-item-meta-avatar"
class="prefix-List-item-meta"
>
<span
class="ant-avatar ant-avatar-circle ant-avatar-image"
>
<img
src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
/>
</span>
</div>
<div
class="prefix-List-item-meta-content"
>
<h4
class="prefix-List-item-meta-title"
<div
class="prefix-List-item-meta-avatar"
>
Ant Design
</h4>
<span
class="ant-avatar ant-avatar-circle ant-avatar-image"
>
<img
src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
/>
</span>
</div>
<div
class="prefix-List-item-meta-description"
class="prefix-List-item-meta-content"
>
Ant Design, a design language for background applications, is refined by Ant UED Team
<h4
class="prefix-List-item-meta-title"
>
Ant Design
</h4>
<div
class="prefix-List-item-meta-description"
>
Ant Design, a design language for background applications, is refined by Ant UED Team
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>

2
components/config-provider/style/index.less

@ -1,2 +1,2 @@
// placeholder
@import '../../style/themes/default';
@import '../../style/themes/index';

19
components/date-picker/locale/hr_HR.tsx

@ -0,0 +1,19 @@
import CalendarLocale from 'rc-calendar/lib/locale/hr_HR';
import TimePickerLocale from '../../time-picker/locale/hr_HR';
// Merge into a locale object
const locale = {
lang: {
placeholder: 'Odaberite datum',
rangePlaceholder: ['Početni datum', 'Završni datum'],
...CalendarLocale,
},
timePickerLocale: {
...TimePickerLocale,
},
};
// All settings at:
// https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json
export default locale;

2
components/date-picker/style/index.less

@ -1,4 +1,4 @@
@import '../../style/themes/default';
@import '../../style/themes/index';
@import '../../style/mixins/index';
@import '../../input/style/mixin';
@import '../../button/style/mixin';

2
components/divider/style/index.less

@ -1,4 +1,4 @@
@import '../../style/themes/default';
@import '../../style/themes/index';
@import '../../style/mixins/index';
@divider-prefix-cls: ~'@{ant-prefix}-divider';

150
components/drawer/__tests__/__snapshots__/demo.test.js.snap

@ -167,98 +167,102 @@ exports[`renders ./components/drawer/demo/user-profile.md correctly 1`] = `
<div
class="ant-spin-container"
>
<div
class="ant-list-item"
<ul
class="ant-list-items"
>
<div
class="ant-list-item-meta"
<li
class="ant-list-item"
>
<div
class="ant-list-item-meta-avatar"
class="ant-list-item-meta"
>
<span
class="ant-avatar ant-avatar-circle ant-avatar-image"
>
<img
src="https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png"
/>
</span>
</div>
<div
class="ant-list-item-meta-content"
>
<h4
class="ant-list-item-meta-title"
<div
class="ant-list-item-meta-avatar"
>
<a
href="https://ant.design/index-cn"
<span
class="ant-avatar ant-avatar-circle ant-avatar-image"
>
Lily
</a>
</h4>
<img
src="https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png"
/>
</span>
</div>
<div
class="ant-list-item-meta-description"
class="ant-list-item-meta-content"
>
Progresser AFX
<h4
class="ant-list-item-meta-title"
>
<a
href="https://ant.design/index-cn"
>
Lily
</a>
</h4>
<div
class="ant-list-item-meta-description"
>
Progresser AFX
</div>
</div>
</div>
</div>
<ul
class="ant-list-item-action"
>
<li>
<a>
View Profile
</a>
</li>
</ul>
</div>
<div
class="ant-list-item"
>
<div
class="ant-list-item-meta"
>
<div
class="ant-list-item-meta-avatar"
<ul
class="ant-list-item-action"
>
<span
class="ant-avatar ant-avatar-circle ant-avatar-image"
>
<img
src="https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png"
/>
</span>
</div>
<li>
<a>
View Profile
</a>
</li>
</ul>
</li>
<li
class="ant-list-item"
>
<div
class="ant-list-item-meta-content"
class="ant-list-item-meta"
>
<h4
class="ant-list-item-meta-title"
<div
class="ant-list-item-meta-avatar"
>
<a
href="https://ant.design/index-cn"
<span
class="ant-avatar ant-avatar-circle ant-avatar-image"
>
Lily
</a>
</h4>
<img
src="https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png"
/>
</span>
</div>
<div
class="ant-list-item-meta-description"
class="ant-list-item-meta-content"
>
Progresser AFX
<h4
class="ant-list-item-meta-title"
>
<a
href="https://ant.design/index-cn"
>
Lily
</a>
</h4>
<div
class="ant-list-item-meta-description"
>
Progresser AFX
</div>
</div>
</div>
</div>
<ul
class="ant-list-item-action"
>
<li>
<a>
View Profile
</a>
</li>
</ul>
</div>
<ul
class="ant-list-item-action"
>
<li>
<a>
View Profile
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>

1
components/drawer/index.en-US.md

@ -35,6 +35,7 @@ A Drawer is a panel that is typically overlaid on top of a page and slides in fr
| zIndex | The `z-index` of the Drawer. | Number | 1000 |
| placement | The placement of the Drawer. | 'top' \| 'right' \| 'bottom' \| 'left' | 'right' |
| onClose | Specify a callback that will be called when a user clicks mask, close button or Cancel button. | function(e) | - |
| afterVisibleChange | Callback after the animation ends when switching drawers. | function(visible) | - |
<style>
#_hj_feedback_container {

2
components/drawer/index.tsx

@ -36,6 +36,7 @@ export interface DrawerProps {
push?: boolean;
placement?: placementType;
onClose?: (e: EventType) => void;
afterVisibleChange?: (visible: boolean) => void;
className?: string;
handler?: React.ReactNode;
}
@ -65,6 +66,7 @@ class Drawer extends React.Component<DrawerProps & ConfigConsumerProps, IDrawerS
prefixCls: PropTypes.string,
placement: PropTypes.oneOf(PlacementTypes),
onClose: PropTypes.func,
afterVisibleChange: PropTypes.func,
className: PropTypes.string,
};

1
components/drawer/index.zh-CN.md

@ -34,6 +34,7 @@ title: Drawer
| zIndex | 设置 Drawer 的 `z-index` | Number | 1000 |
| placement | 抽屉的方向 | 'top' \| 'right' \| 'bottom' \| 'left' | 'right'
| onClose | 点击遮罩层或右上角叉或取消按钮的回调 | function(e) | 无 |
| afterVisibleChange | 切换抽屉时动画结束后的回调 | function(visible) | 无 |
<style>
#_hj_feedback_container {

2
components/drawer/style/drawer.less

@ -1,4 +1,4 @@
@import '../../style/themes/default';
@import '../../style/themes/index';
// Preserve the typo for compatibility
// https://github.com/ant-design/ant-design/issues/14628

2
components/drawer/style/index.less

@ -1,3 +1,3 @@
@import '../../style/themes/default';
@import '../../style/themes/index';
@import '../../style/mixins/index';
@import './drawer';

46
components/dropdown/__tests__/__snapshots__/demo.test.js.snap

@ -38,7 +38,9 @@ exports[`renders ./components/dropdown/demo/context-menu.md correctly 1`] = `
`;
exports[`renders ./components/dropdown/demo/dropdown-button.md correctly 1`] = `
<div>
<div
id="components-dropdown-demo-dropdown-button"
>
<div
class="ant-btn-group ant-dropdown-button"
>
@ -51,7 +53,7 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md correctly 1`] = `
</span>
</button>
<button
class="ant-btn ant-dropdown-trigger ant-btn-default ant-btn-icon-only"
class="ant-btn ant-dropdown-trigger ant-btn-default"
type="button"
>
<i
@ -77,7 +79,42 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md correctly 1`] = `
</div>
<div
class="ant-btn-group ant-dropdown-button"
style="margin-left:8px"
>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
Dropdown
</span>
</button>
<button
class="ant-btn ant-dropdown-trigger ant-btn-default"
type="button"
>
<i
aria-label="icon: user"
class="anticon anticon-user"
>
<svg
aria-hidden="true"
class=""
data-icon="user"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
/>
</svg>
</i>
</button>
</div>
<div
class="ant-btn-group ant-dropdown-button"
>
<button
class="ant-btn ant-btn-default"
@ -89,7 +126,7 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md correctly 1`] = `
</span>
</button>
<button
class="ant-btn ant-dropdown-trigger ant-btn-default ant-btn-icon-only"
class="ant-btn ant-dropdown-trigger ant-btn-default"
disabled=""
type="button"
>
@ -116,7 +153,6 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md correctly 1`] = `
</div>
<button
class="ant-btn ant-dropdown-trigger"
style="margin-left:8px"
type="button"
>
<span>

2
components/dropdown/__tests__/__snapshots__/dropdown-button.test.js.snap

@ -9,7 +9,7 @@ exports[`DropdownButton should support href like Button 1`] = `
href="https://ant.design"
/>
<button
class="ant-btn ant-dropdown-trigger ant-btn-default ant-btn-icon-only"
class="ant-btn ant-dropdown-trigger ant-btn-default"
type="button"
>
<i

21
components/dropdown/demo/dropdown-button.md

@ -8,10 +8,12 @@ title:
## zh-CN
左边是按钮,右边是额外的相关功能菜单。
可设置 `icon` 属性来修改右边的图标。
## en-US
A button is on the left, and a related functional menu is on the right.
You can set the icon property to modify the icon of right.
````jsx
import {
@ -37,24 +39,35 @@ const menu = (
);
ReactDOM.render(
<div>
<div id="components-dropdown-demo-dropdown-button">
<Dropdown.Button onClick={handleButtonClick} overlay={menu}>
Dropdown
</Dropdown.Button>
<Dropdown.Button
overlay={menu}
icon={<Icon type="user" />}
>
Dropdown
</Dropdown.Button>
<Dropdown.Button
onClick={handleButtonClick}
overlay={menu}
disabled
style={{ marginLeft: 8 }}
>
Dropdown
</Dropdown.Button>
<Dropdown overlay={menu}>
<Button style={{ marginLeft: 8 }}>
<Button>
Button <Icon type="down" />
</Button>
</Dropdown>
</div>,
mountNode
mountNode,
);
````
````css
#components-dropdown-demo-dropdown-button .ant-dropdown-button{
margin: 0 8px 8px 0;
}
````

2
components/dropdown/demo/sub-menu.md

@ -16,7 +16,7 @@ The menu has multiple levels.
````jsx
import { Menu, Dropdown, Icon } from 'antd';
const SubMenu = Menu.SubMenu;
const { SubMenu } = Menu;
const menu = (
<Menu>

11
components/dropdown/dropdown-button.tsx

@ -1,10 +1,12 @@
import * as React from 'react';
import classNames from 'classnames';
import Button from '../button';
import { ButtonHTMLType } from '../button/button';
import { ButtonGroupProps } from '../button/button-group';
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
import Dropdown, { DropDownProps } from './dropdown';
import classNames from 'classnames';
import Icon from '../icon';
const ButtonGroup = Button.Group;
type DropdownButtonType = 'primary' | 'ghost' | 'dashed';
@ -14,6 +16,10 @@ export interface DropdownButtonProps extends ButtonGroupProps, DropDownProps {
htmlType?: ButtonHTMLType;
disabled?: boolean;
onClick?: React.MouseEventHandler<HTMLButtonElement>;
/**
* @since 3.17.0
*/
icon?: React.ReactNode;
href?: string;
children?: any;
}
@ -44,6 +50,7 @@ export default class DropdownButton extends React.Component<DropdownButtonProps,
placement,
getPopupContainer,
href,
icon = <Icon type="ellipsis" />,
...restProps
} = this.props;
@ -67,7 +74,7 @@ export default class DropdownButton extends React.Component<DropdownButtonProps,
{children}
</Button>
<Dropdown {...dropdownProps}>
<Button type={type} icon="ellipsis" />
<Button type={type}>{icon}</Button>
</Dropdown>
</ButtonGroup>
);

24
components/dropdown/index.en-US.md

@ -34,14 +34,16 @@ You should use [Menu](/components/menu/) as `overlay`. The menu items and divide
### Dropdown.Button
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| disabled | whether the dropdown menu is disabled | boolean | - |
| overlay | the dropdown menu | [Menu](/components/menu) | - |
| placement | placement of pop menu: `bottomLeft` `bottomCenter` `bottomRight` `topLeft` `topCenter` `topRight` | String | `bottomLeft` |
| size | size of the button, the same as [Button](/components/button) | string | `default` |
| trigger | the trigger mode which executes the drop-down action | Array&lt;`click`\|`hover`\|`contextMenu`> | `['hover']` |
| type | type of the button, the same as [Button](/components/button) | string | `default` |
| visible | whether the dropdown menu is visible | boolean | - |
| onClick | a callback function, the same as [Button](/components/button), which will be executed when you click the button on the left | Function | - |
| onVisibleChange | a callback function takes an argument: `visible`, is executed when the visible state is changed | Function | - |
| Property | Description | Type | Default | Version |
| -------- | ----------- | ---- | ------- |------- |
| disabled | whether the dropdown menu is disabled | boolean | - ||
| icon | icon of right | ReactNode | - | 3.17.0 |
| overlay | the dropdown menu | [Menu](/components/menu) | - ||
| placement | placement of pop menu: `bottomLeft` `bottomCenter` `bottomRight` `topLeft` `topCenter` `topRight` | String | `bottomLeft` ||
| size | size of the button, the same as [Button](/components/button) | string | `default` ||
| trigger | the trigger mode which executes the drop-down action | Array&lt;`click`\|`hover`\|`contextMenu`> | `['hover']` ||
| type | type of the button, the same as [Button](/components/button) | string | `default` ||
| visible | whether the dropdown menu is visible | boolean | - ||
| onClick | a callback function, the same as [Button](/components/button), which will be executed when you click the button on the left | Function | - ||
| onVisibleChange | a callback function takes an argument: `visible`, is executed when the visible state is changed | Function | - ||

21
components/dropdown/index.zh-CN.md

@ -35,14 +35,15 @@ title: Dropdown
### Dropdown.Button
| 参数 | 说明 | 类型 | 默认值 |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- |
| disabled | 菜单是否禁用 | boolean | - |
| overlay | 菜单 | [Menu](/components/menu/) | - |
| placement | 菜单弹出位置:`bottomLeft` `bottomCenter` `bottomRight` `topLeft` `topCenter` `topRight` | String | `bottomLeft` |
| size | 按钮大小,和 [Button](/components/button/) 一致 | string | 'default' |
| trigger | 触发下拉的行为 | Array&lt;`click`\|`hover`\|`contextMenu`> | `['hover']` |
| type | 按钮类型,和 [Button](/components/button/) 一致 | string | 'default' |
| visible | 菜单是否显示 | boolean | - |
| onClick | 点击左侧按钮的回调,和 [Button](/components/button/) 一致 | Function | - |
| onVisibleChange | 菜单显示状态改变时调用,参数为 visible | Function | - |
| disabled | 菜单是否禁用 | boolean | - |||
| icon | 右侧的 icon | ReactNode | - | 3.17.0 |
| overlay | 菜单 | [Menu](/components/menu/) | - ||
| placement | 菜单弹出位置:`bottomLeft` `bottomCenter` `bottomRight` `topLeft` `topCenter` `topRight` | String | `bottomLeft` ||
| size | 按钮大小,和 [Button](/components/button/) 一致 | string | 'default' ||
| trigger | 触发下拉的行为 | Array&lt;`click`\|`hover`\|`contextMenu`> | `['hover']` ||
| type | 按钮类型,和 [Button](/components/button/) 一致 | string | 'default' ||
| visible | 菜单是否显示 | boolean | - ||
| onClick | 点击左侧按钮的回调,和 [Button](/components/button/) 一致 | Function | - ||
| onVisibleChange | 菜单显示状态改变时调用,参数为 visible | Function | - ||

2
components/dropdown/style/index.less

@ -1,4 +1,4 @@
@import '../../style/themes/default';
@import '../../style/themes/index';
@import '../../style/mixins/index';
@dropdown-prefix-cls: ~'@{ant-prefix}-dropdown';

2
components/empty/style/index.less

@ -1,4 +1,4 @@
@import '../../style/themes/default';
@import '../../style/themes/index';
@import '../../style/mixins/index';
@empty-prefix-cls: ~'@{ant-prefix}-empty';

13
components/form/FormItem.tsx

@ -20,6 +20,7 @@ export interface FormItemProps {
prefixCls?: string;
className?: string;
id?: string;
htmlFor?: string;
label?: React.ReactNode;
labelAlign?: FormLabelAlign;
labelCol?: ColProps;
@ -60,7 +61,7 @@ export default class FormItem extends React.Component<FormItemProps, any> {
helpShow = false;
componentDidMount() {
const { children, help, validateStatus } = this.props;
const { children, help, validateStatus, id } = this.props;
warning(
this.getControls(children, true).length <= 1 ||
(help !== undefined || validateStatus !== undefined),
@ -68,6 +69,12 @@ export default class FormItem extends React.Component<FormItemProps, any> {
'Cannot generate `validateStatus` and `help` automatically, ' +
'while there are more than one `getFieldDecorator` in it.',
);
warning(
!id,
'Form.Item',
'`id` is deprecated for its label `htmlFor`. Please use `htmlFor` directly.',
);
}
getHelpMessage() {
@ -328,7 +335,7 @@ export default class FormItem extends React.Component<FormItemProps, any> {
labelCol: contextLabelCol,
colon: contextColon,
}: FormContextProps) => {
const { label, labelCol, labelAlign, colon, id } = this.props;
const { label, labelCol, labelAlign, colon, id, htmlFor } = this.props;
const required = this.isRequired();
const mergedLabelCol: ColProps =
@ -361,7 +368,7 @@ export default class FormItem extends React.Component<FormItemProps, any> {
return label ? (
<Col {...mergedLabelCol} className={labelColClassName}>
<label
htmlFor={id || this.getId()}
htmlFor={htmlFor || id || this.getId()}
className={labelClassName}
title={typeof label === 'string' ? label : ''}
onClick={this.onLabelClick}

26
components/form/__tests__/label.test.js

@ -236,4 +236,30 @@ describe('Form', () => {
),
).toMatchSnapshot();
});
describe('should `htmlFor` work', () => {
const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
afterEach(() => {
errorSpy.mockReset();
});
afterAll(() => {
errorSpy.mockRestore();
});
it('should warning when use `id`', () => {
mount(<Form.Item id="bamboo" label="bamboo" />);
expect(errorSpy).toHaveBeenCalledWith(
'Warning: [antd: Form.Item] `id` is deprecated for its label `htmlFor`. Please use `htmlFor` directly.',
);
});
it('use `htmlFor`', () => {
const wrapper = mount(<Form.Item htmlFor="bamboo" label="bamboo" />);
expect(wrapper.find('label').props().htmlFor).toBe('bamboo');
});
});
});

23
components/form/index.en-US.md

@ -193,17 +193,18 @@ More option at [rc-form option](https://github.com/react-component/form#option-o
Note: if Form.Item has multiple children that had been decorated by `getFieldDecorator`, `help` and `required` and `validateStatus` can't be generated automatically.
| Property | Description | Type | Default Value |
| -------- | ----------- | ---- | ------------- |
| colon | Used with `label`, whether to display `:` after label text. | boolean | true |
| extra | The extra prompt message. It is similar to help. Usage example: to display error message and prompt message at the same time. | string\|ReactNode | |
| hasFeedback | Used with `validateStatus`, this option specifies the validation status icon. Recommended to be used only with `Input`. | boolean | false |
| help | The prompt message. If not provided, the prompt message will be generated by the validation rule. | string\|ReactNode | |
| label | Label text | string\|ReactNode | |
| labelCol | The layout of label. You can set `span` `offset` to something like `{span: 3, offset: 12}` or `sm: {span: 3, offset: 12}` same as with `<Col>`. You can set on Form one time after 3.14.0. Will take FormItem's prop when both set with Form. | [object](https://ant.design/components/grid/#Col) | |
| required | Whether provided or not, it will be generated by the validation rule. | boolean | false |
| validateStatus | The validation status. If not provided, it will be generated by validation rule. options: 'success' 'warning' 'error' 'validating' | string | |
| wrapperCol | The layout for input controls, same as `labelCol`. You can set on Form one time after 3.14.0. Will take FormItem's prop when both set with Form. | [object](https://ant.design/components/grid/#Col) | |
| Property | Description | Type | Default Value | Version |
| -------- | ----------- | ---- | ------------- | ------- |
| colon | Used with `label`, whether to display `:` after label text. | boolean | true | |
| extra | The extra prompt message. It is similar to help. Usage example: to display error message and prompt message at the same time. | string\|ReactNode | | |
| hasFeedback | Used with `validateStatus`, this option specifies the validation status icon. Recommended to be used only with `Input`. | boolean | false | |
| help | The prompt message. If not provided, the prompt message will be generated by the validation rule. | string\|ReactNode | | |
| htmlFor | Set sub label `htmlFor`. | string | | 3.17.0 |
| label | Label text | string\|ReactNode | | |
| labelCol | The layout of label. You can set `span` `offset` to something like `{span: 3, offset: 12}` or `sm: {span: 3, offset: 12}` same as with `<Col>`. You can set on Form one time after 3.14.0. Will take FormItem's prop when both set with Form. | [object](https://ant.design/components/grid/#Col) | | |
| required | Whether provided or not, it will be generated by the validation rule. | boolean | false | |
| validateStatus | The validation status. If not provided, it will be generated by validation rule. options: 'success' 'warning' 'error' 'validating' | string | | |
| wrapperCol | The layout for input controls, same as `labelCol`. You can set on Form one time after 3.14.0. Will take FormItem's prop when both set with Form. | [object](https://ant.design/components/grid/#Col) | | |
### Validation Rules

23
components/form/index.zh-CN.md

@ -195,17 +195,18 @@ validateFields(['field1', 'field2'], options, (errors, values) => {
注意:一个 Form.Item 建议只放一个被 getFieldDecorator 装饰过的 child,当有多个被装饰过的 child 时,`help` `required` `validateStatus` 无法自动生成。
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| colon | 配合 label 属性使用,表示是否显示 label 后面的冒号 | boolean | true |
| extra | 额外的提示信息,和 help 类似,当需要错误信息和提示文案同时出现时,可以使用这个。 | string\|ReactNode | |
| hasFeedback | 配合 validateStatus 属性使用,展示校验状态图标,建议只配合 Input 组件使用 | boolean | false |
| help | 提示信息,如不设置,则会根据校验规则自动生成 | string\|ReactNode | |
| label | label 标签的文本 | string\|ReactNode | |
| labelCol | label 标签布局,同 `<Col>` 组件,设置 `span` `offset` 值,如 `{span: 3, offset: 12}``sm: {span: 3, offset: 12}`。在 3.14.0 之后,你可以通过 Form 的 labelCol 进行统一设置。当和 Form 同时设置时,以 FormItem 为准。 | [object](https://ant.design/components/grid/#Col) | |
| required | 是否必填,如不设置,则会根据校验规则自动生成 | boolean | false |
| validateStatus | 校验状态,如不设置,则会根据校验规则自动生成,可选:'success' 'warning' 'error' 'validating' | string | |
| wrapperCol | 需要为输入控件设置布局样式时,使用该属性,用法同 labelCol。在 3.14.0 之后,你可以通过 Form 的 labelCol 进行统一设置。当和 Form 同时设置时,以 FormItem 为准。 | [object](https://ant.design/components/grid/#Col) | |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| colon | 配合 label 属性使用,表示是否显示 label 后面的冒号 | boolean | true | |
| extra | 额外的提示信息,和 help 类似,当需要错误信息和提示文案同时出现时,可以使用这个。 | string\|ReactNode | | |
| hasFeedback | 配合 validateStatus 属性使用,展示校验状态图标,建议只配合 Input 组件使用 | boolean | false | |
| help | 提示信息,如不设置,则会根据校验规则自动生成 | string\|ReactNode | | |
| htmlFor | 设置子元素 label `htmlFor` 属性 | string | | 3.17.0 |
| label | label 标签的文本 | string\|ReactNode | | |
| labelCol | label 标签布局,同 `<Col>` 组件,设置 `span` `offset` 值,如 `{span: 3, offset: 12}``sm: {span: 3, offset: 12}`。在 3.14.0 之后,你可以通过 Form 的 labelCol 进行统一设置。当和 Form 同时设置时,以 FormItem 为准。 | [object](https://ant.design/components/grid/#Col) | | |
| required | 是否必填,如不设置,则会根据校验规则自动生成 | boolean | false | |
| validateStatus | 校验状态,如不设置,则会根据校验规则自动生成,可选:'success' 'warning' 'error' 'validating' | string | | |
| wrapperCol | 需要为输入控件设置布局样式时,使用该属性,用法同 labelCol。在 3.14.0 之后,你可以通过 Form 的 labelCol 进行统一设置。当和 Form 同时设置时,以 FormItem 为准。 | [object](https://ant.design/components/grid/#Col) | | |
### 校验规则

6
components/form/style/index.less

@ -1,4 +1,4 @@
@import '../../style/themes/default';
@import '../../style/themes/index';
@import '../../style/mixins/index';
@import '../../input/style/mixin';
@import '../../button/style/mixin';
@ -457,7 +457,7 @@ form {
}
.has-warning {
.form-control-validation(@warning-color; @warning-color;);
.form-control-validation(@warning-color; @warning-color; @form-warning-input-bg;);
&.has-feedback .@{form-prefix-cls}-item-children-icon {
color: @warning-color;
@ -506,7 +506,7 @@ form {
}
.has-error {
.form-control-validation(@error-color; @error-color;);
.form-control-validation(@error-color; @error-color; @form-error-input-bg;);
&.has-feedback .@{form-prefix-cls}-item-children-icon {
color: @error-color;

1
components/form/style/mixin.less

@ -30,6 +30,7 @@
.@{ant-prefix}-input {
&,
&:hover {
background-color: @background-color;
border-color: @border-color;
}

2
components/grid/style/index.less

@ -1,4 +1,4 @@
@import '../../style/themes/default';
@import '../../style/themes/index';
@import '../../style/mixins/index';
@import './mixin';

2
components/icon/style/index.less

@ -1,4 +1,4 @@
@import '../../style/themes/default';
@import '../../style/themes/index';
@import '../../style/mixins/index';
@icon-prefix-cls: ~'@{ant-prefix}-icon';

2
components/input-number/style/index.less

@ -1,4 +1,4 @@
@import '../../style/themes/default';
@import '../../style/themes/index';
@import '../../style/mixins/index';
@import '../../input/style/mixin';

2
components/input/style/index.less

@ -1,4 +1,4 @@
@import '../../style/themes/default';
@import '../../style/themes/index';
@import '../../style/mixins/index';
@import './mixin';

2
components/input/style/mixin.less

@ -1,4 +1,4 @@
@import '../../style/themes/default';
@import '../../style/themes/index';
@import '../../style/mixins/index';
@input-affix-width: 19px;

2
components/input/style/search-input.less

@ -1,4 +1,4 @@
@import '../../style/themes/default';
@import '../../style/themes/index';
@import '../../style/mixins/index';
@import '../../button/style/mixin';
@import './mixin';

2
components/layout/style/index.less

@ -1,4 +1,4 @@
@import '../../style/themes/default';
@import '../../style/themes/index';
@import '../../style/mixins/index';
@layout-prefix-cls: ~'@{ant-prefix}-layout';

7
components/list/Item.tsx

@ -113,9 +113,10 @@ export default class Item extends React.Component<ListItemProps, any> {
))}
</ul>
);
const Tag = grid ? 'div' : 'li';
const itemChildren = (
<div
{...others}
<Tag
{...others as any} // `li` element `onCopy` prop args is not same as `div`
className={classNames(`${prefixCls}-item`, className, {
[`${prefixCls}-item-no-flex`]: !this.isFlexMode(),
})}
@ -131,7 +132,7 @@ export default class Item extends React.Component<ListItemProps, any> {
</div>,
]
: [children, actionsContent, cloneElement(extra, { key: 'extra' })]}
</div>
</Tag>
);
return grid ? (

64
components/list/__tests__/__snapshots__/Item.test.js.snap

@ -10,44 +10,48 @@ exports[`List Item Layout horizontal itemLayout List should accept extra node 1`
<div
class="ant-spin-container"
>
<div
class="ant-list-item"
<ul
class="ant-list-items"
>
<div
class="ant-list-item-meta"
<li
class="ant-list-item"
>
<div
class="ant-list-item-meta-content"
class="ant-list-item-meta"
>
<h4
class="ant-list-item-meta-title"
>
<a
href="http://ant.design"
>
ant design
</a>
</h4>
<div
class="ant-list-item-meta-description"
class="ant-list-item-meta-content"
>
Ant Design, a design language for background applications, is refined by Ant UED Team.
<h4
class="ant-list-item-meta-title"
>
<a
href="http://ant.design"
>
ant design
</a>
</h4>
<div
class="ant-list-item-meta-description"
>
Ant Design, a design language for background applications, is refined by Ant UED Team.
</div>
</div>
</div>
</div>
<ul
class="ant-list-item-action"
>
<li>
<a>
Action
</a>
</li>
</ul>
<span>
extra
</span>
</div>
<ul
class="ant-list-item-action"
>
<li>
<a>
Action
</a>
</li>
</ul>
<span>
extra
</span>
</li>
</ul>
</div>
</div>
</div>

1176
components/list/__tests__/__snapshots__/demo.test.js.snap

File diff suppressed because it is too large

22
components/list/__tests__/__snapshots__/pagination.test.js.snap

@ -10,16 +10,20 @@ exports[`List.pagination renders pagination correctly 1`] = `
<div
class="ant-spin-container"
>
<div
class="ant-list-item ant-list-item-no-flex"
>
Jack
</div>
<div
class="ant-list-item ant-list-item-no-flex"
<ul
class="ant-list-items"
>
Lucy
</div>
<li
class="ant-list-item ant-list-item-no-flex"
>
Jack
</li>
<li
class="ant-list-item ant-list-item-no-flex"
>
Lucy
</li>
</ul>
</div>
</div>
<div

6
components/list/index.tsx

@ -258,7 +258,11 @@ export default class List<T> extends React.Component<ListProps<T>, ListState> {
);
});
childrenContent = grid ? <Row gutter={grid.gutter}>{childrenList}</Row> : childrenList;
childrenContent = grid ? (
<Row gutter={grid.gutter}>{childrenList}</Row>
) : (
<ul className={`${prefixCls}-items`}>{childrenList}</ul>
);
} else if (!children && !isLoading) {
childrenContent = this.renderEmpty(prefixCls, renderEmpty);
}

10
components/list/style/index.less

@ -1,4 +1,4 @@
@import '../../style/themes/default';
@import '../../style/themes/index';
@import '../../style/mixins/index';
@list-prefix-cls: ~'@{ant-prefix}-list';
@ -38,6 +38,12 @@
text-align: center;
}
&-items {
margin: 0;
padding: 0;
list-style: none;
}
&-item {
display: flex;
align-items: center;
@ -144,7 +150,7 @@
min-height: 32px;
}
&-something-after-last-item .@{ant-prefix}-spin-container > &-item:last-child {
&-something-after-last-item .@{ant-prefix}-spin-container > &-items > &-item:last-child {
border-bottom: 1px solid @border-color-split;
}

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

Loading…
Cancel
Save