diff --git a/.circleci/config.yml b/.circleci/config.yml index b7336e952c..23442907d0 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -21,6 +21,52 @@ references: environment: REACT: 16 + workflow: &workflow + jobs: + - setup: + filters: + branches: + ignore: gh-pages + - dist: + requires: + - setup + - compile: + requires: + - setup + - lint: + requires: + - setup + - test_dist: + requires: + - dist + - test_lib: + requires: + - compile + - test_es: + requires: + - compile + - test_dom: + requires: + - setup + - test_node: + requires: + - setup + - test_dist_15: + requires: + - dist + - test_lib_15: + requires: + - compile + - test_es_15: + requires: + - compile + - test_dom_15: + requires: + - setup + - test_node_15: + requires: + - setup + jobs: setup: <<: *container_config @@ -177,45 +223,14 @@ jobs: workflows: version: 2 - build-test: - jobs: - - setup - - dist: - requires: - - setup - - compile: - requires: - - setup - - lint: - requires: - - setup - - test_dist: - requires: - - dist - - test_lib: - requires: - - compile - - test_es: - requires: - - compile - - test_dom: - requires: - - setup - - test_node: - requires: - - setup - - test_dist_15: - requires: - - dist - - test_lib_15: - requires: - - compile - - test_es_15: - requires: - - compile - - test_dom_15: - requires: - - setup - - test_node_15: - requires: - - setup + build_test: + <<: *workflow + nightly: + <<: *workflow + triggers: + - schedule: + cron: "0 0 * * *" + filters: + branches: + only: + - master diff --git a/.jest.js b/.jest.js index f2b15bb87f..ed2c101e41 100644 --- a/.jest.js +++ b/.jest.js @@ -48,4 +48,5 @@ module.exports = { tsConfigFile: './tsconfig.test.json', } }, + testURL: 'http://localhost', }; diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index c22481e3fd..f19a9986b0 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -15,6 +15,38 @@ timeline: true --- +## 3.7.3 + +`2018-07-28` + +- 🐞 Fix issue resulting in title not vertical align with icon when setting `labelPlacement` to `vertical` in Steps. [#11426](https://github.com/ant-design/ant-design/pull/11426) [@yoyo837](https://github.com/yoyo837) +- 🐞 Fix issue resulting in the children field specified in `fieldName` could not be read correctly in Cascader. [#11311](https://github.com/ant-design/ant-design/pull/11311) [@405go](https://github.com/405go) +- TypeScript + - 🐞 Fix type definition of Pagination. [#11474](https://github.com/ant-design/ant-design/pull/11474) [@kagd](https://github.com/kagd) + - 🐞 Fix type definition of Select. [#11189](https://github.com/ant-design/ant-design/pull/11189) [@thisJJ](https://github.com/thisJJ) + +## 3.7.2 + +`2018-07-25` + +- DatePicker + - 🐞 **Fix issue resulting in year and month can not be changed in control mode.** [b9992f4](https://github.com/ant-design/ant-design/commit/b9992f4a08574efb47b6e6cd80eb1e888b9a1ede) + - 🐞 Fix warning of `getDerivedStateFromProp`. [#11398](https://github.com/ant-design/ant-design/pull/11398) [@yoyo837](https://github.com/yoyo837) +- Drawer + - 🐞 Fix close animation when setting `destroyOnClose`. [#11307](https://github.com/ant-design/ant-design/issues/11307) + - 🐞 Fix display issue when using a `vw` value as `width`. [#11326](https://github.com/ant-design/ant-design/issues/11326) + - 🐞 Fix `wrapClassName` now working. +- 🐞 Fix text overflow of Tooltip. [#11402](https://github.com/ant-design/ant-design/pull/11402) [@weidapao](https://github.com/weidapao) +- 🐞 Fix style issue of dark theme Menu in Layout.Header. [#11400](https://github.com/ant-design/ant-design/pull/11400) [@hongxuWei](https://github.com/hongxuWei) +- 🐞 Fix the arrow buttons of InputNumber showing wrong positon in a fixed table. [#11408](https://github.com/ant-design/ant-design/issues/11408) +- 🐞 Fix issue resulting in Select.Option shows wrong border radius in Select.OptGroup. [6cb6f5c](https://github.com/ant-design/ant-design/commit/6cb6f5c83ed634e67d5b5d0816d11aa0788a74d8) +- 🐞 Fix issue resulting in `onChange` was trigged twice when click the filter icon of Table. [#11164](https://github.com/ant-design/ant-design/issues/11164) [@adybionka](https://github.com/adybionka) +- 🐞 Fix issue resulting title of Model.confirm shows scrollbar on Firefox. [#11432](https://github.com/ant-design/ant-design/issues/11432) +- TypeScript + - 🐞 Fix type definition of Radio.Group. [#11409](https://github.com/ant-design/ant-design/pull/11409) [@eddiemoore](https://github.com/eddiemoore) + - 🐞 Fix type definition of TreeSelect. [#11442](https://github.com/ant-design/ant-design/pull/11442) [@JribiBelhassen](https://github.com/JribiBelhassen) + - 🐞 Fix type definition of Badge. [#11421](https://github.com/ant-design/ant-design/pull/11421) [@zongzi531](https://github.com/zongzi531) + ## 3.7.1 `2018-07-21` diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index ca23ebe872..415a266db3 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -15,6 +15,38 @@ timeline: true --- +## 3.7.3 + +`2018-07-28` + +- 🐞 修复 Steps 在 `labelPlacement` 为 `vertical` 时标题与图标不对齐的问题。[#11426](https://github.com/ant-design/ant-design/pull/11426) [@yoyo837](https://github.com/yoyo837) +- 🐞 修复 Cascader 设置 `fieldNames` 时不能正确读取子节点的问题。[#11311](https://github.com/ant-design/ant-design/pull/11311) [@405go](https://github.com/405go) +- TypeScript + - 🐞 修复 Pagination 类型定义。[#11474](https://github.com/ant-design/ant-design/pull/11474) [@kagd](https://github.com/kagd) + - 🐞 修复 Select 类型定义。[#11189](https://github.com/ant-design/ant-design/pull/11189) [@thisJJ](https://github.com/thisJJ) + +## 3.7.2 + +`2018-07-25` + +- DatePicker + - 🐞 **修复在受控模式下不能切换年月的问题。**[b9992f4](https://github.com/ant-design/ant-design/commit/b9992f4a08574efb47b6e6cd80eb1e888b9a1ede) + - 🐞 修复在 `getDerivedStateFromProp` 的警告。[#11398](https://github.com/ant-design/ant-design/pull/11398) [@yoyo837](https://github.com/yoyo837) +- Drawer + - 🐞 修复使用 `destroyOnClose` 时没有关闭动画的问题。[#11307](https://github.com/ant-design/ant-design/issues/11307) + - 🐞 修复 `width` 以 `vw` 为单位时的显示错误。[#11326](https://github.com/ant-design/ant-design/issues/11326) + - 🐞 修复 `wrapClassName` 属性无效的问题。 +- 🐞 修复 Tooltip 文字溢出的问题。[#11402](https://github.com/ant-design/ant-design/pull/11402) [@weidapao](https://github.com/weidapao) +- 🐞 修复 Menu 在 `theme` 为 `dark` 是在 Layout.Header 里的样式问题。[#11400](https://github.com/ant-design/ant-design/pull/11400) [@hongxuWei](https://github.com/hongxuWei) +- 🐞 修复 InputNumber 的箭头按钮在使用了固定列的 Table 里显示错位的问题。[#11408](https://github.com/ant-design/ant-design/issues/11408) +- 🐞 修复 Select 使用分组时 Option 的圆角显示错误。[6cb6f5c](https://github.com/ant-design/ant-design/commit/6cb6f5c83ed634e67d5b5d0816d11aa0788a74d8) +- 🐞 修复 Table 第一次点击过滤按钮的时候 `onChange` 会被触发两次的问题。[#11164](https://github.com/ant-design/ant-design/issues/11164) [@adybionka](https://github.com/adybionka) +- 🐞 修复 Model.confirm 的标题在 Firefox 下会显示滚动条的问题。[#11432](https://github.com/ant-design/ant-design/issues/11432) +- TypeScript + - 🐞 修复 Radio.Group 类型定义。[#11409](https://github.com/ant-design/ant-design/pull/11409) [@eddiemoore](https://github.com/eddiemoore) + - 🐞 修复 TreeSelect 类型定义。[#11442](https://github.com/ant-design/ant-design/pull/11442) [@JribiBelhassen](https://github.com/JribiBelhassen) + - 🐞 修复 Badge 类型定义。[#11421](https://github.com/ant-design/ant-design/pull/11421) [@zongzi531](https://github.com/zongzi531) + ## 3.7.1 `2018-07-21` @@ -29,7 +61,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) diff --git a/components/calendar/index.en-US.md b/components/calendar/index.en-US.md index dddcdab367..0b60d8c6d0 100644 --- a/components/calendar/index.en-US.md +++ b/components/calendar/index.en-US.md @@ -44,3 +44,4 @@ When data is in the form of dates, such as schedules, timetables, prices calenda | value | The current selected date | [moment](http://momentjs.com/) | current date | | onPanelChange | Callback for when panel changes | function(date: moment, mode: string) | - | | onSelect | Callback for when a date is selected | function(date: moment） | - | +| onChange | Callback for when date changes | function(date: moment） | - | diff --git a/components/calendar/index.tsx b/components/calendar/index.tsx index c27227b181..b31eb2b16c 100644 --- a/components/calendar/index.tsx +++ b/components/calendar/index.tsx @@ -36,6 +36,7 @@ export interface CalendarProps { style?: React.CSSProperties; onPanelChange?: (date?: moment.Moment, mode?: CalendarMode) => void; onSelect?: (date?: moment.Moment) => void; + onChange?: (date?: moment.Moment) => void; disabledDate?: (current: moment.Moment) => boolean; validRange ?: [moment.Moment, moment.Moment]; } @@ -53,6 +54,7 @@ export default class Calendar extends React.Component { diff --git a/components/calendar/index.zh-CN.md b/components/calendar/index.zh-CN.md index 0ae9309c59..b3d57bb201 100644 --- a/components/calendar/index.zh-CN.md +++ b/components/calendar/index.zh-CN.md @@ -45,3 +45,4 @@ title: Calendar | value | 展示日期 | [moment](http://momentjs.com/) | 当前日期 | | onPanelChange | 日期面板变化回调 | function(date: moment, mode: string) | 无 | | onSelect | 点击选择日期回调 | function(date: moment） | 无 | +| onChange | 日期变化回调 | function(date: moment） | 无 | diff --git a/components/card/__tests__/__snapshots__/demo.test.js.snap b/components/card/__tests__/__snapshots__/demo.test.js.snap index cd4714a5ab..206daa7e86 100644 --- a/components/card/__tests__/__snapshots__/demo.test.js.snap +++ b/components/card/__tests__/__snapshots__/demo.test.js.snap @@ -773,13 +773,10 @@ exports[`renders ./components/card/demo/tabs.md correctly 1`] = `
-
+
@@ -799,11 +799,11 @@ exports[`renders ./components/card/demo/tabs.md correctly 1`] = ` `; diff --git a/components/layout/demo/fixed-sider.md b/components/layout/demo/fixed-sider.md index 187f0ffbb8..8a7520a090 100644 --- a/components/layout/demo/fixed-sider.md +++ b/components/layout/demo/fixed-sider.md @@ -78,7 +78,7 @@ ReactDOM.render(
- Ant Design ©2016 Created by Ant UED + Ant Design ©2018 Created by Ant UED
, diff --git a/components/layout/demo/fixed.md b/components/layout/demo/fixed.md index 45b78be8e7..cb25026869 100644 --- a/components/layout/demo/fixed.md +++ b/components/layout/demo/fixed.md @@ -43,7 +43,7 @@ ReactDOM.render(
Content
- Ant Design ©2016 Created by Ant UED + Ant Design ©2018 Created by Ant UED
, mountNode); @@ -53,7 +53,7 @@ ReactDOM.render( #components-layout-demo-fixed .logo { width: 120px; height: 31px; - background: rgba(255,255,255,.2); + background: rgba(255,255,255,.2); margin: 16px 24px 16px 0; float: left; } diff --git a/components/layout/demo/responsive.md b/components/layout/demo/responsive.md index 43b930dbe7..3e25e0470c 100644 --- a/components/layout/demo/responsive.md +++ b/components/layout/demo/responsive.md @@ -58,7 +58,7 @@ ReactDOM.render(
- Ant Design ©2016 Created by Ant UED + Ant Design ©2018 Created by Ant UED
, diff --git a/components/layout/demo/side.md b/components/layout/demo/side.md index 1c35f6a8d8..bfd165b156 100644 --- a/components/layout/demo/side.md +++ b/components/layout/demo/side.md @@ -18,7 +18,7 @@ Two-columns layout. The sider menu can be collapsed when horizontal space is lim Generally, the mainnav is placed on the left side of the page, and the secondary menu is placed on the top of the working area. Contents will adapt the layout to the viewing area to improve the horizontal space usage, while the layout of the whole page is not stable. -The level of the aisde navigation is scalable. The first, second, and third level navigations could be present more fluently and relevantly, and aside navigation can be fixed, allowing the user to quickly switch and spot the current position, improving the user experience. However, this navigation occupies some horizontal space of the contents +The level of the aside navigation is scalable. The first, second, and third level navigations could be present more fluently and relevantly, and aside navigation can be fixed, allowing the user to quickly switch and spot the current position, improving the user experience. However, this navigation occupies some horizontal space of the contents ````jsx import { Layout, Menu, Breadcrumb, Icon } from 'antd'; @@ -87,7 +87,7 @@ class SiderDemo extends React.Component {
- Ant Design ©2016 Created by Ant UED + Ant Design ©2018 Created by Ant UED
diff --git a/components/layout/demo/top-side.md b/components/layout/demo/top-side.md index 38e69a58b3..7e5a652205 100644 --- a/components/layout/demo/top-side.md +++ b/components/layout/demo/top-side.md @@ -74,7 +74,7 @@ ReactDOM.render(
- Ant Design ©2016 Created by Ant UED + Ant Design ©2018 Created by Ant UED
, mountNode); @@ -84,7 +84,7 @@ ReactDOM.render( #components-layout-demo-top-side .logo { width: 120px; height: 31px; - background: rgba(255,255,255,.2); + background: rgba(255,255,255,.2); margin: 16px 28px 16px 0; float: left; } diff --git a/components/layout/demo/top.md b/components/layout/demo/top.md index 14c3ee89e8..728a35ebc4 100644 --- a/components/layout/demo/top.md +++ b/components/layout/demo/top.md @@ -49,7 +49,7 @@ ReactDOM.render(
Content
- Ant Design ©2016 Created by Ant UED + Ant Design ©2018 Created by Ant UED
, mountNode); @@ -59,7 +59,7 @@ ReactDOM.render( #components-layout-demo-top .logo { width: 120px; height: 31px; - background: rgba(255,255,255,.2); + background: rgba(255,255,255,.2); margin: 16px 24px 16px 0; float: left; } diff --git a/components/mention/demo/controlled.md b/components/mention/demo/controlled.md index c71240c919..a1f3830fe5 100644 --- a/components/mention/demo/controlled.md +++ b/components/mention/demo/controlled.md @@ -33,7 +33,7 @@ class App extends React.Component { e.preventDefault(); this.props.form.validateFields((errors, values) => { if (errors) { - console.log('Errors in form!!!'); + console.log('Errors in the form!!!'); return; } console.log('Submit!!!'); diff --git a/components/modal/demo/position.md b/components/modal/demo/position.md index b80e9305d2..6f1af499ec 100644 --- a/components/modal/demo/position.md +++ b/components/modal/demo/position.md @@ -11,7 +11,7 @@ title: ## en-US -After release `1.0`, Modal's `align` prop was removed. You can use `style.top` or other styles to +After release `1.0`, Modal's `align` prop was removed. You can use `style.top` or other styles to set position of modal dialog. ````jsx diff --git a/components/modal/style/confirm.less b/components/modal/style/confirm.less index 34bcc26ea4..aa13254389 100644 --- a/components/modal/style/confirm.less +++ b/components/modal/style/confirm.less @@ -24,7 +24,7 @@ color: @heading-color; font-weight: 500; font-size: @font-size-lg; - line-height: 1.375; + line-height: 1.4; display: block; // create BFC to avoid // https://user-images.githubusercontent.com/507615/37702510-ba844e06-2d2d-11e8-9b67-8e19be57f445.png diff --git a/components/pagination/Pagination.tsx b/components/pagination/Pagination.tsx index e42f31a343..6aecaea3fe 100644 --- a/components/pagination/Pagination.tsx +++ b/components/pagination/Pagination.tsx @@ -27,6 +27,7 @@ export interface PaginationProps { prefixCls?: string; selectPrefixCls?: string; itemRender?: (page: number, type: 'page' | 'prev' | 'next' | 'jump-prev' | 'jump-next') => React.ReactNode; + role?: string; } export interface PaginationConfig extends PaginationProps { diff --git a/components/popconfirm/demo/placement.md b/components/popconfirm/demo/placement.md index 443917f5cc..8af84bc6b2 100755 --- a/components/popconfirm/demo/placement.md +++ b/components/popconfirm/demo/placement.md @@ -16,10 +16,10 @@ There are 12 `placement` options available. Use `arrowPointAtCenter` if you want ````jsx import { Popconfirm, message, Button } from 'antd'; -const text = 'Are you sure delete this task?'; +const text = 'Are you sure to delete this task?'; function confirm() { - message.info('Click on Yes.'); + message.info('Clicked on Yes.'); } ReactDOM.render( diff --git a/components/popover/__tests__/__snapshots__/demo.test.js.snap b/components/popover/__tests__/__snapshots__/demo.test.js.snap index f9d82fa3c0..860bc98ce3 100644 --- a/components/popover/__tests__/__snapshots__/demo.test.js.snap +++ b/components/popover/__tests__/__snapshots__/demo.test.js.snap @@ -43,6 +43,17 @@ exports[`renders ./components/popover/demo/control.md correctly 1`] = ` `; +exports[`renders ./components/popover/demo/hover-with-click.md correctly 1`] = ` + +`; + exports[`renders ./components/popover/demo/placement.md correctly 1`] = `
{ + this.setState({ + clicked: false, + hovered: false, + }); + } + + handleHoverChange = (visible) => { + this.setState({ + hovered: visible, + clicked: false, + }); + } + + handleClickChange = (visible) => { + this.setState({ + clicked: visible, + hovered: false, + }); + } + + render() { + const hoverContent = ( +
+ This is hover content. +
+ ); + const clickContent = ( +
+ This is click content. +
+ ); + return ( + + + {clickContent} + Close +
+ )} + title="Click title" + trigger="click" + visible={this.state.clicked} + onVisibleChange={this.handleClickChange} + > + + + + ); + } +} + +ReactDOM.render(, mountNode); +```` diff --git a/components/progress/demo/format.md b/components/progress/demo/format.md index ebbbcd0926..1c3df31ed8 100644 --- a/components/progress/demo/format.md +++ b/components/progress/demo/format.md @@ -11,7 +11,7 @@ title: ## en-US -You can custom text format by setting `format`. +You can set a custom text by setting the `format` prop. ````jsx import { Progress } from 'antd'; diff --git a/components/select/demo/coordinate.md b/components/select/demo/coordinate.md index e11dbb5f91..2e69de5d1b 100644 --- a/components/select/demo/coordinate.md +++ b/components/select/demo/coordinate.md @@ -17,7 +17,6 @@ Coordinating the selection of provinces and cities is a common use case and demo Using the [Cascader](/components/cascader) component is strongly recommended instead as it is more flexible and capable. - ````jsx import { Select } from 'antd'; diff --git a/components/select/index.tsx b/components/select/index.tsx index ee50969377..70ecfec5d2 100755 --- a/components/select/index.tsx +++ b/components/select/index.tsx @@ -27,6 +27,7 @@ export interface AbstractSelectProps { dropdownMatchSelectWidth?: boolean; onSearch?: (value: string) => any; filterOption?: boolean | ((inputValue: string, option: React.ReactElement) => any); + id?: string; } export interface LabeledValue { @@ -85,6 +86,7 @@ const SelectPropTypes = { optionLabelProp: PropTypes.string, transitionName: PropTypes.string, choiceTransitionName: PropTypes.string, + id: PropTypes.string, }; // => It is needless to export the declaration of below two inner components. diff --git a/components/steps/index.en-US.md b/components/steps/index.en-US.md index 308369fa6e..00823e19a8 100644 --- a/components/steps/index.en-US.md +++ b/components/steps/index.en-US.md @@ -29,7 +29,8 @@ The whole of the step bar. | -------- | ----------- | ---- | ------- | | current | to set the current step, counting from 0. You can overwrite this state by using `status` of `Step` | number | 0 | | direction | to specify the direction of the step bar, `horizontal` and `vertical` are currently supported | string | `horizontal` | -| progressDot | Steps with progress dot style, customize the progress dot by setting it to a function | Boolean or (iconDot, {index, status, title, description}) => ReactNode | false | +| labelPlacement | support vertial title and description | string | `horizontal` | +| progressDot | Steps with progress dot style, customize the progress dot by setting it to a function. labelPlacement will be `vertical` | Boolean or (iconDot, {index, status, title, description}) => ReactNode | false | | size | to specify the size of the step bar, `default` and `small` are currently supported | string | `default` | | status | to specify the status of current step, can be set to one of the following values: `wait` `process` `finish` `error` | string | `process` | diff --git a/components/steps/index.zh-CN.md b/components/steps/index.zh-CN.md index 2be3d47144..56fc397e91 100644 --- a/components/steps/index.zh-CN.md +++ b/components/steps/index.zh-CN.md @@ -30,7 +30,8 @@ title: Steps | --- | --- | --- | --- | | current | 指定当前步骤，从 0 开始记数。在子 Step 元素中，可以通过 `status` 属性覆盖状态 | number | 0 | | direction | 指定步骤条方向。目前支持水平（`horizontal`）和竖直（`vertical`）两种方向 | string | horizontal | -| progressDot | 点状步骤条，可以设置为一个 function | Boolean or (iconDot, {index, status, title, description}) => ReactNode | false | +| labelPlacement | 指定标签放置位置，默认水平放图标右侧，可选`vertical`放图标下方 | string | `horizontal` | +| progressDot | 点状步骤条，可以设置为一个 function,labelPlacement 将强制为`vertical` | Boolean or (iconDot, {index, status, title, description}) => ReactNode | false | | size | 指定大小，目前支持普通（`default`）和迷你（`small`） | string | default | | status | 指定当前步骤的状态，可选 `wait` `process` `finish` `error` | string | process | diff --git a/components/steps/style/label-placement.less b/components/steps/style/label-placement.less index f5a2957b2c..b229784ca3 100644 --- a/components/steps/style/label-placement.less +++ b/components/steps/style/label-placement.less @@ -9,7 +9,8 @@ display: block; text-align: center; margin-top: 8px; - width: @steps-desciption-max-width; + // icon左边距离+一半icon宽度，是content一半的宽度，垂直对齐icon + width: (@steps-icon-size / 2 + 36px) * 2; } &-icon { display: inline-block; @@ -21,8 +22,5 @@ display: none; } } - &-description { - text-align: left; - } } } diff --git a/components/steps/style/progress-dot.less b/components/steps/style/progress-dot.less index e7aa109fce..94ece6a8bd 100644 --- a/components/steps/style/progress-dot.less +++ b/components/steps/style/progress-dot.less @@ -44,6 +44,9 @@ } } } + &-content { + width: @steps-desciption-max-width; + } &-process .@{steps-prefix-cls}-item-icon { width: @steps-current-dot-size; height: @steps-current-dot-size; diff --git a/components/table/Table.tsx b/components/table/Table.tsx index db68ddaaf2..df0465b8a4 100755 --- a/components/table/Table.tsx +++ b/components/table/Table.tsx @@ -708,10 +708,11 @@ export default class Table extends React.Component, TableState< className: selectionColumnClass, fixed: rowSelection.fixed, width: rowSelection.columnWidth, + title: rowSelection.columnTitle, }; if (rowSelection.type !== 'radio') { const checkboxAllDisabled = data.every((item, index) => this.getCheckboxPropsByItem(item, index).disabled); - selectionColumn.title = ( + selectionColumn.title = selectionColumn.title || ( { expect(checkbox.props().indeterminate).toBe(false); }); }); + + // https://github.com/ant-design/ant-design/issues/11042 + it('add columnTitle for rowSelection', () => { + const wrapper = mount( + + ); + expect(wrapper.find('thead tr span').at(0).text()).toBe('多选'); + wrapper.setProps({ + rowSelection: { + type: 'radio', + columnTitle: '单选', + }, + }); + expect(wrapper.find('thead tr span').at(0).text()).toBe('单选'); + }); }); diff --git a/components/table/__tests__/__snapshots__/demo.test.js.snap b/components/table/__tests__/__snapshots__/demo.test.js.snap index f61ec48f95..d0e8247932 100755 --- a/components/table/__tests__/__snapshots__/demo.test.js.snap +++ b/components/table/__tests__/__snapshots__/demo.test.js.snap @@ -9529,6 +9529,259 @@ exports[`renders ./components/table/demo/reset-filter.md correctly 1`] = ` `; +exports[`renders ./components/table/demo/resizable-column.md correctly 1`] = ` +
+
+
+
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + Date + + + + + Amount + + + + + Type + + + + + Note + + + + + Action + +
+ + 2018-02-11 + + 120 + + income + + transfer + + + Delete + +
+ + 2018-03-11 + + 243 + + income + + transfer + + + Delete + +
+ + 2018-04-11 + + 98 + + income + + transfer + + + Delete + +
+ + + + + + + +`; + exports[`renders ./components/table/demo/row-selection.md correctly 1`] = `
{ + const { onResize, width, ...restProps } = props; + + if (!width) { + return ; + } + + return ( + + + + ); +}; + +class Demo extends React.Component { + state = { + columns: [{ + title: 'Date', + dataIndex: 'date', + width: 200, + }, { + title: 'Amount', + dataIndex: 'amount', + width: 100, + }, { + title: 'Type', + dataIndex: 'type', + width: 100, + }, { + title: 'Note', + dataIndex: 'note', + width: 100, + }, { + title: 'Action', + key: 'action', + render: () => ( + Delete + ), + }], + }; + + components = { + header: { + cell: ResizeableTitle, + }, + }; + + data = [{ + key: 0, + date: '2018-02-11', + amount: 120, + type: 'income', + note: 'transfer', + }, { + key: 1, + date: '2018-03-11', + amount: 243, + type: 'income', + note: 'transfer', + }, { + key: 2, + date: '2018-04-11', + amount: 98, + type: 'income', + note: 'transfer', + }]; + + handleResize = index => (e, { size }) => { + this.setState(({ columns }) => { + const nextColumns = [...columns]; + nextColumns[index] = { + ...nextColumns[index], + width: size.width, + }; + return { columns: nextColumns }; + }); + }; + + render() { + const columns = this.state.columns.map((col, index) => ({ + ...col, + onHeaderCell: column => ({ + width: column.width, + onResize: this.handleResize(index), + }), + })); + + return ( + + ); + } +} + + +ReactDOM.render(, mountNode); +```` + +````css +#components-table-demo-resizable-column .react-resizable { + position: relative; +} + +#components-table-demo-resizable-column .react-resizable-handle { + position: absolute; + width: 10px; + height: 100%; + bottom: 0; + right: -5px; + cursor: col-resize; +} +```` diff --git a/components/table/index.en-US.md b/components/table/index.en-US.md index 8f2c1f31c9..16c04cc589 100644 --- a/components/table/index.en-US.md +++ b/components/table/index.en-US.md @@ -154,6 +154,7 @@ Properties for row selection. | Property | Description | Type | Default | | -------- | ----------- | ---- | ------- | | columnWidth | Set the width of the selection column | string\|number | - | +| columnTitle | Set the title of the selection column | string\|React.ReactNode | - | | fixed | Fixed selection column on the left | boolean | - | | getCheckboxProps | Get Checkbox or Radio props | Function(record) | - | | hideDefaultSelections | Remove the default `Select All` and `Select Invert` selections | boolean | `false` | diff --git a/components/table/index.zh-CN.md b/components/table/index.zh-CN.md index 2e08e90394..18fcc69da5 100644 --- a/components/table/index.zh-CN.md +++ b/components/table/index.zh-CN.md @@ -154,6 +154,7 @@ const columns = [{ | 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | columnWidth | 自定义列表选择框宽度 | string\|number | - | +| columnTitle | 自定义列表选择框标题 | string\|React.ReactNode | - | | fixed | 把选择框列固定在左边 | boolean | - | | getCheckboxProps | 选择框的默认属性配置 | Function(record) | - | | hideDefaultSelections | 去掉『全选』『反选』两个默认选项 | boolean | false | diff --git a/components/table/interface.tsx b/components/table/interface.tsx index c197408ce8..4b4b712fd0 100644 --- a/components/table/interface.tsx +++ b/components/table/interface.tsx @@ -78,6 +78,7 @@ export interface TableRowSelection { fixed?: boolean; columnWidth?: string | number; selectWay?: TableSelectWay; + columnTitle?: string | React.ReactNode; } export type SortOrder = 'descend' | 'ascend'; export interface SorterResult { diff --git a/components/tabs/__tests__/__snapshots__/demo.test.js.snap b/components/tabs/__tests__/__snapshots__/demo.test.js.snap index 8100a4fe35..158360cb82 100644 --- a/components/tabs/__tests__/__snapshots__/demo.test.js.snap +++ b/components/tabs/__tests__/__snapshots__/demo.test.js.snap @@ -37,9 +37,6 @@ exports[`renders ./components/tabs/demo/basic.md correctly 1`] = `
-
Tab 3
+
@@ -131,9 +131,6 @@ exports[`renders ./components/tabs/demo/card.md correctly 1`] = `
-
Tab 3
+
@@ -227,9 +227,6 @@ exports[`renders ./components/tabs/demo/card-top.md correctly 1`] = `
-
Tab Title 3
+
@@ -342,9 +342,6 @@ exports[`renders ./components/tabs/demo/custom-add-trigger.md correctly 1`] = `
-
+
@@ -459,9 +459,6 @@ exports[`renders ./components/tabs/demo/disabled.md correctly 1`] = `
-
Tab 3
+
@@ -576,9 +576,6 @@ exports[`renders ./components/tabs/demo/editable-card.md correctly 1`] = `
-
+
@@ -722,9 +722,6 @@ exports[`renders ./components/tabs/demo/extra.md correctly 1`] = `
-
Tab 3
+
@@ -816,9 +816,6 @@ exports[`renders ./components/tabs/demo/icon.md correctly 1`] = `
-
+
@@ -988,9 +988,6 @@ exports[`renders ./components/tabs/demo/position.md correctly 1`] = `
-
Tab 3
+
@@ -1147,9 +1147,6 @@ exports[`renders ./components/tabs/demo/size.md correctly 1`] = `
-
Tab 3
+
@@ -1288,9 +1288,6 @@ exports[`renders ./components/tabs/demo/slide.md correctly 1`] = `
-
Tab 11
+
diff --git a/components/tabs/__tests__/__snapshots__/index.test.js.snap b/components/tabs/__tests__/__snapshots__/index.test.js.snap index 208252aaa0..6d07944e5c 100644 --- a/components/tabs/__tests__/__snapshots__/index.test.js.snap +++ b/components/tabs/__tests__/__snapshots__/index.test.js.snap @@ -37,9 +37,6 @@ exports[`Tabs tabPosition remove card 1`] = `
-
foo
+
diff --git a/components/tabs/demo/card.md b/components/tabs/demo/card.md index 51ce1676d1..78d8a2a000 100644 --- a/components/tabs/demo/card.md +++ b/components/tabs/demo/card.md @@ -13,7 +13,6 @@ title: Another type Tabs, which doesn't support vertical mode. - ````jsx import { Tabs } from 'antd'; diff --git a/components/tabs/demo/custom-add-trigger.md b/components/tabs/demo/custom-add-trigger.md index e9313b0440..920455ba66 100644 --- a/components/tabs/demo/custom-add-trigger.md +++ b/components/tabs/demo/custom-add-trigger.md @@ -12,7 +12,6 @@ title: Hide default plus icon, and bind event for customized trigger. - ````jsx import { Tabs, Button } from 'antd'; diff --git a/components/tabs/demo/extra.md b/components/tabs/demo/extra.md index 79cce14212..9241831f03 100644 --- a/components/tabs/demo/extra.md +++ b/components/tabs/demo/extra.md @@ -13,7 +13,6 @@ title: You can add extra actions to the right of Tabs. - ````jsx import { Tabs, Button } from 'antd'; diff --git a/components/tabs/demo/icon.md b/components/tabs/demo/icon.md index 685597ec33..896c524c40 100644 --- a/components/tabs/demo/icon.md +++ b/components/tabs/demo/icon.md @@ -13,7 +13,6 @@ title: The Tab with Icon. - ````jsx import { Tabs, Icon } from 'antd'; diff --git a/components/time-picker/demo/disabled.md b/components/time-picker/demo/disabled.md index 4f765f62c8..4879834c4f 100644 --- a/components/time-picker/demo/disabled.md +++ b/components/time-picker/demo/disabled.md @@ -13,7 +13,6 @@ title: A disabled state of the `TimePicker`. - ````jsx import { TimePicker } from 'antd'; import moment from 'moment'; diff --git a/components/time-picker/style/index.less b/components/time-picker/style/index.less index 0d7f8c591c..bbb26dfa93 100644 --- a/components/time-picker/style/index.less +++ b/components/time-picker/style/index.less @@ -7,6 +7,7 @@ .@{timepicker-prefix-cls}-panel { .reset-component; + font-family: @font-family-no-number; z-index: @zindex-picker; position: absolute; diff --git a/components/tooltip/__tests__/tooltip.test.js b/components/tooltip/__tests__/tooltip.test.js index fcfaad6582..ae7ab7b624 100644 --- a/components/tooltip/__tests__/tooltip.test.js +++ b/components/tooltip/__tests__/tooltip.test.js @@ -2,6 +2,9 @@ import React from 'react'; import { mount } from 'enzyme'; import Tooltip from '..'; import Button from '../../button'; +import DatePicker from '../../date-picker'; + +const delay = timeout => new Promise(resolve => setTimeout(resolve, timeout)); describe('Tooltip', () => { it('check `onVisibleChange` arguments', () => { @@ -174,4 +177,29 @@ describe('Tooltip', () => { jest.dontMock('rc-trigger', suit); }); + + it('should works for date picker', async () => { + const onVisibleChange = jest.fn(); + + const wrapper = mount( + + + + ); + + expect(wrapper.find('span.ant-calendar-picker')).toHaveLength(1); + const picker = wrapper.find('span.ant-calendar-picker').at(0); + picker.simulate('mouseenter'); + await delay(100); + expect(onVisibleChange).toBeCalledWith(true); + expect(wrapper.instance().tooltip.props.visible).toBe(true); + + picker.simulate('mouseleave'); + await delay(100); + expect(onVisibleChange).toBeCalledWith(false); + expect(wrapper.instance().tooltip.props.visible).toBe(false); + }); }); diff --git a/components/tree-select/demo/treeData.md b/components/tree-select/demo/treeData.md index 1dfb48b107..3a4ee0b087 100644 --- a/components/tree-select/demo/treeData.md +++ b/components/tree-select/demo/treeData.md @@ -13,7 +13,6 @@ title: The tree structure can be populated using `treeData` property. This is a quick and easy way to provide the tree content. - ````jsx import { TreeSelect } from 'antd'; diff --git a/components/tree-select/interface.tsx b/components/tree-select/interface.tsx index c19a5cdb2e..8c7d58c159 100644 --- a/components/tree-select/interface.tsx +++ b/components/tree-select/interface.tsx @@ -4,7 +4,11 @@ import { AbstractSelectProps } from '../select'; export interface TreeData { key: string; value: string; - label: React.ReactNode; + /** + * @deprecated Please use `title` instead. + */ + label?: React.ReactNode; + title?: React.ReactNode; children?: TreeData[]; } diff --git a/components/tree/DirectoryTree.tsx b/components/tree/DirectoryTree.tsx index 80210e4b3c..603c5d8d67 100644 --- a/components/tree/DirectoryTree.tsx +++ b/components/tree/DirectoryTree.tsx @@ -2,13 +2,13 @@ import * as React from 'react'; import classNames from 'classnames'; import omit from 'omit.js'; import debounce from 'lodash/debounce'; -import { getFullKeyList, calcExpandedKeys } from 'rc-tree/lib/util'; +import { conductExpandParent, convertTreeToEntities } from 'rc-tree/lib/util'; import Tree, { TreeProps, AntdTreeNodeAttribute, AntTreeNodeExpandedEvent, AntTreeNodeSelectedEvent, AntTreeNode, } from './Tree'; -import { calcRangeKeys } from './util'; +import { calcRangeKeys, getFullKeyList } from './util'; import Icon from '../icon'; export type ExpandAction = false | 'click' | 'doubleClick'; @@ -47,7 +47,8 @@ export default class DirectoryTree extends React.Component { prefixCls: 'ant-tree', checkable: false, showIcon: false, - openAnimation: animation, + openAnimation: { + ...animation, + appear: null, + }, }; render() { diff --git a/components/tree/__tests__/__snapshots__/demo.test.js.snap b/components/tree/__tests__/__snapshots__/demo.test.js.snap index 99bf5a727a..652e9a2f08 100644 --- a/components/tree/__tests__/__snapshots__/demo.test.js.snap +++ b/components/tree/__tests__/__snapshots__/demo.test.js.snap @@ -3,11 +3,12 @@ exports[`renders ./components/tree/demo/basic.md correctly 1`] = `
  • -
      -
    • - - - - - - - leaf - - -
      • -
    • - - - - - - - leaf - - -
      • -
    • span[draggable] { diff --git a/components/tree/util.ts b/components/tree/util.ts index 1c991886b2..0e514b9502 100644 --- a/components/tree/util.ts +++ b/components/tree/util.ts @@ -1,9 +1,6 @@ import * as React from 'react'; -import { traverseTreeNodes } from 'rc-tree/lib/util'; - -export interface TraverseData { - key: string, -} +import { getNodeChildren, convertTreeToEntities } from 'rc-tree/lib/util'; +import { AntTreeNodeProps } from './Tree'; enum Record { None, @@ -11,8 +8,27 @@ enum Record { End, } +// TODO: Move this logic into `rc-tree` +function traverseNodesKey(rootChildren: React.ReactNode | React.ReactNode[], callback: (key: string | number | null) => boolean) { + const nodeList:React.ReactNode[] = getNodeChildren(rootChildren) || []; + + function processNode(node: React.ReactElement) { + const { key, props: { children } } = node; + if (callback(key) !== false) { + traverseNodesKey(children, callback); + } + } + + nodeList.forEach(processNode); +} + +export function getFullKeyList(children: React.ReactNode | React.ReactNode[]) { + const { keyEntities } = convertTreeToEntities(children); + return Object.keys(keyEntities); +} + /** 计算选中范围，只考虑expanded情况以优化性能 */ -export function calcRangeKeys(nodeList: React.ReactNode | React.ReactNode[], expandedKeys: string[], startKey?: string, endKey?: string): string[] { +export function calcRangeKeys(rootChildren: React.ReactNode | React.ReactNode[], expandedKeys: string[], startKey?: string, endKey?: string): string[] { const keys: string[] = []; let record: Record = Record.None; @@ -27,7 +43,7 @@ export function calcRangeKeys(nodeList: React.ReactNode | React.ReactNode[], exp return key === startKey || key === endKey; } - traverseTreeNodes(nodeList, ({ key }: TraverseData) => { + traverseNodesKey(rootChildren, (key: string) => { if (record === Record.End) { return false; } @@ -50,6 +66,8 @@ export function calcRangeKeys(nodeList: React.ReactNode | React.ReactNode[], exp if (expandedKeys.indexOf(key) === -1) { return false; } + + return true; }); return keys; diff --git a/components/upload/demo/fileList.md b/components/upload/demo/fileList.md index 6dee6259dd..b3c1c96732 100644 --- a/components/upload/demo/fileList.md +++ b/components/upload/demo/fileList.md @@ -42,10 +42,10 @@ class MyUpload extends React.Component { let fileList = info.fileList; // 1. Limit the number of uploaded files - // Only to show two recent uploaded files, and old ones will be replaced by the new + // Only to show two recent uploaded files, and old ones will be replaced by the new fileList = fileList.slice(-2); - // 2. read from response and show file link + // 2. Read from response and show file link fileList = fileList.map((file) => { if (file.response) { // Component will show file.url as link @@ -54,7 +54,7 @@ class MyUpload extends React.Component { return file; }); - // 3. filter successfully uploaded files according to response from server + // 3. Filter successfully uploaded files according to response from server fileList = fileList.filter((file) => { if (file.response) { return file.response.status === 'success'; @@ -74,7 +74,7 @@ class MyUpload extends React.Component { return ( ); diff --git a/components/upload/demo/picture-style.md b/components/upload/demo/picture-style.md index ac28dda202..a83576c904 100644 --- a/components/upload/demo/picture-style.md +++ b/components/upload/demo/picture-style.md @@ -13,7 +13,6 @@ title: If uploaded file is a picture, the thumbnail can be shown. `IE8/9` do not support local thumbnail show. Please use `thumbUrl` instead. - ````jsx import { Upload, Button, Icon } from 'antd'; @@ -48,14 +47,14 @@ ReactDOM.render(


      , diff --git a/components/upload/index.en-US.md b/components/upload/index.en-US.md index 0f6b41b91f..51a50ea164 100644 --- a/components/upload/index.en-US.md +++ b/components/upload/index.en-US.md @@ -42,7 +42,7 @@ Uploading is the process of publishing information (web pages, text, pictures, v ### onChange -> The function will be called when uploading is in progress, completed or failed +> The function will be called when uploading is in progress, completed or failed When uploading state change, it returns: diff --git a/docs/spec/colors.zh-CN.md b/docs/spec/colors.zh-CN.md index 2b9019d693..675d641d26 100644 --- a/docs/spec/colors.zh-CN.md +++ b/docs/spec/colors.zh-CN.md @@ -30,6 +30,8 @@ ReactDOM.render(, mountNode); Ant Design 的色板还具备进一步拓展的能力。经过设计师和程序员的精心调制，结合了色彩自然变化的规律，我们得出了一套色彩生成工具，当有进一步色彩设计需求时，设计者只需按照一定规则定义完毕主色，便可以自动获得一系列完整的衍生色。 +> Ant Design 三代色板的历史可以参看社区文章：[Ant Design 色板生成算法演进之路](https://zhuanlan.zhihu.com/p/32422584)。 + ### 中性色板 中性色包含了黑、白、灰。在蚂蚁中后台的网页设计中被大量使用到，合理的选择中性色能够令页面信息具备良好的主次关系，助力阅读体验。Ant Design 的中性色板一共包含了从白到黑的 10 个颜色。 diff --git a/package.json b/package.json index 65e07a21ba..4031e29aaf 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "antd", - "version": "3.7.1", + "version": "3.7.3", "title": "Ant Design", "description": "An enterprise-class UI design language and React-based implementation", "homepage": "http://ant.design/", @@ -71,15 +71,15 @@ "rc-pagination": "~1.16.1", "rc-progress": "~2.2.2", "rc-rate": "~2.4.0", - "rc-select": "~8.0.7", + "rc-select": "~8.1.1", "rc-slider": "~8.6.0", "rc-steps": "~3.1.0", "rc-switch": "~1.6.0", "rc-table": "~6.2.2", - "rc-tabs": "~9.2.0", + "rc-tabs": "~9.3.2", "rc-time-picker": "~3.3.0", "rc-tooltip": "~3.7.0", - "rc-tree": "~1.12.0", + "rc-tree": "~1.13.0", "rc-tree-select": "~2.0.5", "rc-trigger": "^2.5.4", "rc-upload": "~2.5.0", @@ -127,7 +127,7 @@ "eslint-config-airbnb": "^17.0.0", "eslint-plugin-babel": "^5.0.0", "eslint-plugin-import": "^2.2.0", - "eslint-plugin-jsx-a11y": "6.0.2", + "eslint-plugin-jsx-a11y": "6.1.1", "eslint-plugin-markdown": "~1.0.0-beta.4", "eslint-plugin-react": "^7.10.0", "eslint-tinker": "^0.5.0", @@ -136,7 +136,7 @@ "immutability-helper": "^2.5.0", "intersection-observer": "^0.5.0", "jest": "^23.2.0", - "jsdom": "~11.10.0", + "jsdom": "^11.12.0", "jsonml.js": "^0.1.0", "lint-staged": "^7.0.0", "lz-string": "^1.4.4", @@ -160,6 +160,7 @@ "react-github-button": "^0.1.1", "react-infinite-scroller": "^1.0.15", "react-intl": "^2.0.1", + "react-resizable": "^1.7.5", "react-router-dom": "^4.2.2", "react-sublime-video": "^0.2.0", "react-virtualized": "~9.20.0", @@ -170,7 +171,7 @@ "reqwest": "^2.0.5", "rimraf": "^2.5.4", "scrollama": "^1.4.1", - "stylelint": "9.3.0", + "stylelint": "9.4.0", "stylelint-config-standard": "^18.0.0", "typescript": "~2.9.1", "unified": "^7.0.0", @@ -198,7 +199,7 @@ "start": "rimraf _site && mkdir _site && node ./scripts/generateColorLess.js && cross-env NODE_ENV=development bisheng start -c ./site/bisheng.config.js", "start:preact": "node ./scripts/generateColorLess.js && cross-env NODE_ENV=development REACT_ENV=preact bisheng start -c ./site/bisheng.config.js", "site": "cross-env NODE_ENV=production bisheng build --ssr -c ./site/bisheng.config.js && node ./scripts/generateColorLess.js", - "predeploy": "antd-tools run clean && npm run site && cp netlify.toml _site", + "predeploy": "antd-tools run clean && npm run site && cp netlify.toml _site && cp -r .circleci _site", "deploy": "bisheng gh-pages --push-only", "pub": "antd-tools run pub", "prepublish": "antd-tools run guard", diff --git a/site/theme/template/IconSet/CopyableIcon.jsx b/site/theme/template/IconSet/CopyableIcon.jsx index f1183e5c96..c7cd740927 100644 --- a/site/theme/template/IconSet/CopyableIcon.jsx +++ b/site/theme/template/IconSet/CopyableIcon.jsx @@ -2,34 +2,20 @@ import React from 'react'; import CopyToClipboard from 'react-copy-to-clipboard'; import { Icon, Badge } from 'antd'; -export default class CopyableIcon extends React.Component { - state = { - justCopied: false, - }; +const CopyableIcon = ({ type, isNew, justCopied, onCopied }) => ( + `} + onCopy={() => onCopied(type)} + > +
    • + + + + {type} + + +
      • + +); - onCopied = () => { - this.setState({ justCopied: true }, () => { - setTimeout(() => { - this.setState({ justCopied: false }); - }, 2000); - }); - } - - render() { - const { type, isNew } = this.props; - const { justCopied } = this.state; - const text = ``; - return ( - -
    • - - - - {type} - - -
      • -       - ); - } -} +export default CopyableIcon; diff --git a/site/theme/template/IconSet/index.jsx b/site/theme/template/IconSet/index.jsx index 07be7b0cdf..ceb3065c48 100644 --- a/site/theme/template/IconSet/index.jsx +++ b/site/theme/template/IconSet/index.jsx @@ -7,6 +7,18 @@ export default class IconSet extends React.Component { icons: [], } + state = { + justCopied: null, + }; + + onCopied = (type) => { + this.setState({ justCopied: type }, () => { + setTimeout(() => { + this.setState({ justCopied: null }); + }, 2000); + }); + } + icons = { direction: ['step-backward', 'step-forward', 'fast-backward', 'fast-forward', 'shrink', 'arrows-alt', 'down', 'up', 'left', 'right', 'caret-up', 'caret-down', 'caret-left', 'caret-right', 'up-circle', 'down-circle', 'left-circle', 'right-circle', 'up-circle-o', 'down-circle-o', 'right-circle-o', 'left-circle-o', 'double-right', 'double-left', 'verticle-left', 'verticle-right', 'forward', 'backward', 'rollback', 'enter', 'retweet', 'swap', 'swap-left', 'swap-right', 'arrow-up', 'arrow-down', 'arrow-left', 'arrow-right', 'play-circle', 'play-circle-o', 'up-square', 'down-square', 'left-square', 'right-square', 'up-square-o', 'down-square-o', 'left-square-o', 'right-square-o', 'login', 'logout', 'menu-fold', 'menu-unfold'], suggestion: ['question', 'question-circle-o', 'question-circle', 'plus', 'plus-circle-o', 'plus-circle', 'pause', 'pause-circle-o', 'pause-circle', 'minus', 'minus-circle-o', 'minus-circle', 'plus-square', 'plus-square-o', 'minus-square', 'minus-square-o', 'info', 'info-circle-o', 'info-circle', 'exclamation', 'exclamation-circle-o', 'exclamation-circle', 'close', 'close-circle', 'close-circle-o', 'close-square', 'close-square-o', 'check', 'check-circle', 'check-circle-o', 'check-square', 'check-square-o', 'clock-circle-o', 'clock-circle', 'warning'], @@ -24,6 +36,7 @@ export default class IconSet extends React.Component { ]; render() { + const { justCopied } = this.state; const { className, catigory } = this.props; const listClassName = classNames({ 'anticons-list': true, @@ -33,7 +46,13 @@ export default class IconSet extends React.Component { return (
        {this.icons[catigory].map(type => ( - = 0} /> + = 0} + justCopied={justCopied} + onCopied={this.onCopied} + /> ))}
      );