Merge pull request #16985 from lhyt/feature_disabled_prop_popconfirm

feat(popconfirm): add disabled in popconfirm
This commit is contained in:
偏右 2019-06-07 18:04:44 +08:00 committed by GitHub
commit c8a9ca62e3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 988 additions and 39 deletions

View File

@ -285,7 +285,7 @@ exports[`renders ./components/layout/demo/fixed.md correctly 1`] = `
<li
class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu"
role="menuitem"
style="line-height:64px;display:none"
style="display:none"
>
<div
aria-expanded="false"
@ -309,7 +309,7 @@ exports[`renders ./components/layout/demo/fixed.md correctly 1`] = `
<li
class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu"
role="menuitem"
style="line-height:64px;display:none"
style="display:none"
>
<div
aria-expanded="false"
@ -333,7 +333,7 @@ exports[`renders ./components/layout/demo/fixed.md correctly 1`] = `
<li
class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu"
role="menuitem"
style="line-height:64px;display:none"
style="display:none"
>
<div
aria-expanded="false"
@ -357,7 +357,7 @@ exports[`renders ./components/layout/demo/fixed.md correctly 1`] = `
<li
class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu"
role="menuitem"
style="line-height:64px;visibility:hidden;position:absolute"
style="visibility:hidden;position:absolute"
>
<div
aria-expanded="false"
@ -1269,7 +1269,7 @@ exports[`renders ./components/layout/demo/top.md correctly 1`] = `
<li
class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu"
role="menuitem"
style="line-height:64px;display:none"
style="display:none"
>
<div
aria-expanded="false"
@ -1293,7 +1293,7 @@ exports[`renders ./components/layout/demo/top.md correctly 1`] = `
<li
class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu"
role="menuitem"
style="line-height:64px;display:none"
style="display:none"
>
<div
aria-expanded="false"
@ -1317,7 +1317,7 @@ exports[`renders ./components/layout/demo/top.md correctly 1`] = `
<li
class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu"
role="menuitem"
style="line-height:64px;display:none"
style="display:none"
>
<div
aria-expanded="false"
@ -1341,7 +1341,7 @@ exports[`renders ./components/layout/demo/top.md correctly 1`] = `
<li
class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu"
role="menuitem"
style="line-height:64px;visibility:hidden;position:absolute"
style="visibility:hidden;position:absolute"
>
<div
aria-expanded="false"
@ -1436,7 +1436,7 @@ exports[`renders ./components/layout/demo/top-side.md correctly 1`] = `
<li
class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu"
role="menuitem"
style="line-height:64px;display:none"
style="display:none"
>
<div
aria-expanded="false"
@ -1460,7 +1460,7 @@ exports[`renders ./components/layout/demo/top-side.md correctly 1`] = `
<li
class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu"
role="menuitem"
style="line-height:64px;display:none"
style="display:none"
>
<div
aria-expanded="false"
@ -1484,7 +1484,7 @@ exports[`renders ./components/layout/demo/top-side.md correctly 1`] = `
<li
class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu"
role="menuitem"
style="line-height:64px;display:none"
style="display:none"
>
<div
aria-expanded="false"
@ -1508,7 +1508,7 @@ exports[`renders ./components/layout/demo/top-side.md correctly 1`] = `
<li
class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu"
role="menuitem"
style="line-height:64px;visibility:hidden;position:absolute"
style="visibility:hidden;position:absolute"
>
<div
aria-expanded="false"
@ -1772,7 +1772,7 @@ exports[`renders ./components/layout/demo/top-side-2.md correctly 1`] = `
<li
class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu"
role="menuitem"
style="line-height:64px;display:none"
style="display:none"
>
<div
aria-expanded="false"
@ -1796,7 +1796,7 @@ exports[`renders ./components/layout/demo/top-side-2.md correctly 1`] = `
<li
class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu"
role="menuitem"
style="line-height:64px;display:none"
style="display:none"
>
<div
aria-expanded="false"
@ -1820,7 +1820,7 @@ exports[`renders ./components/layout/demo/top-side-2.md correctly 1`] = `
<li
class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu"
role="menuitem"
style="line-height:64px;display:none"
style="display:none"
>
<div
aria-expanded="false"
@ -1844,7 +1844,7 @@ exports[`renders ./components/layout/demo/top-side-2.md correctly 1`] = `
<li
class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu"
role="menuitem"
style="line-height:64px;visibility:hidden;position:absolute"
style="visibility:hidden;position:absolute"
>
<div
aria-expanded="false"

View File

@ -134,4 +134,15 @@ describe('Popconfirm', () => {
);
expect(popconfirm.instance().getPopupDomNode()).toBeTruthy();
});
it('should not open in disabled', () => {
const popconfirm = mount(
<Popconfirm title="code" disabled>
<span>click me</span>
</Popconfirm>,
);
const triggerNode = popconfirm.find('span').at(0);
triggerNode.simulate('click');
expect(popconfirm.instance().getPopupDomNode()).toBeFalsy();
});
});

View File

@ -23,6 +23,7 @@ The difference with the `confirm` modal dialog is that it's more lightweight tha
| onCancel | callback of cancel | function(e) | - |
| onConfirm | callback of confirmation | function(e) | - |
| icon | customize icon of confirmation | ReactNode | &lt;Icon type="exclamation-circle" /&gt; |
| disabled | is show popconfirm when click its childrenNode | boolean | false |
Consult [Tooltip's documentation](https://ant.design/components/tooltip/#API) to find more APIs.

View File

@ -10,6 +10,7 @@ import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
export interface PopconfirmProps extends AbstractTooltipProps {
title: React.ReactNode;
disabled?: boolean;
onConfirm?: (e?: React.MouseEvent<any>) => void;
onCancel?: (e?: React.MouseEvent<any>) => void;
okText?: React.ReactNode;
@ -37,6 +38,7 @@ class Popconfirm extends React.Component<PopconfirmProps, PopconfirmState> {
trigger: 'click' as PopconfirmProps['trigger'],
okType: 'primary' as PopconfirmProps['okType'],
icon: <Icon type="exclamation-circle" theme="filled" />,
disabled: false,
};
static getDerivedStateFromProps(nextProps: PopconfirmProps) {
@ -81,6 +83,10 @@ class Popconfirm extends React.Component<PopconfirmProps, PopconfirmState> {
};
onVisibleChange = (visible: boolean) => {
const { disabled } = this.props;
if (disabled) {
return;
}
this.setVisible(visible);
};

View File

@ -24,6 +24,7 @@ title: Popconfirm
| onCancel | 点击取消的回调 | function(e) | 无 |
| onConfirm | 点击确认的回调 | function(e) | 无 |
| icon | 自定义弹出气泡 Icon 图标 | ReactNode | &lt;Icon type="exclamation-circle" /&gt; |
| disabled | 点击 Popconfirm 子元素是否弹出气泡确认框 | boolean | false |
更多属性请参考 [Tooltip](/components/tooltip/#API)。

View File

@ -41,16 +41,17 @@ exports[`TimePicker not render clean icon when allowClear is false 1`] = `
`;
exports[`TimePicker prop locale should works 1`] = `
<span
Array [
<span
class="ant-time-picker"
style=""
>
>
<input
class="ant-time-picker-input"
id=""
placeholder="Избери дата"
type="text"
value=""
value="00:00:00"
/>
<span
class="ant-time-picker-icon"
@ -78,7 +79,934 @@ exports[`TimePicker prop locale should works 1`] = `
</svg>
</i>
</span>
</span>
<i
aria-label="icon: close-circle"
class="anticon anticon-close-circle ant-time-picker-clear"
tabindex="-1"
>
<svg
aria-hidden="true"
class=""
data-icon="close-circle"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 0 1-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
/>
</svg>
</i>
</span>,
<div>
<div
class="ant-time-picker-panel ant-time-picker-panel-column-3 ant-time-picker-panel-placement-bottomLeft slide-up-appear"
style="left: -999px; top: -1001px;"
>
<div
class="ant-time-picker-panel-inner"
>
<div
class="ant-time-picker-panel-input-wrap"
>
<input
class="ant-time-picker-panel-input"
placeholder="Избери дата"
value="00:00:00"
/>
</div>
<div
class="ant-time-picker-panel-combobox"
>
<div
class="ant-time-picker-panel-select"
>
<ul>
<li
class="ant-time-picker-panel-select-option-selected"
role="button"
>
00
</li>
<li
class=""
role="button"
>
01
</li>
<li
class=""
role="button"
>
02
</li>
<li
class=""
role="button"
>
03
</li>
<li
class=""
role="button"
>
04
</li>
<li
class=""
role="button"
>
05
</li>
<li
class=""
role="button"
>
06
</li>
<li
class=""
role="button"
>
07
</li>
<li
class=""
role="button"
>
08
</li>
<li
class=""
role="button"
>
09
</li>
<li
class=""
role="button"
>
10
</li>
<li
class=""
role="button"
>
11
</li>
<li
class=""
role="button"
>
12
</li>
<li
class=""
role="button"
>
13
</li>
<li
class=""
role="button"
>
14
</li>
<li
class=""
role="button"
>
15
</li>
<li
class=""
role="button"
>
16
</li>
<li
class=""
role="button"
>
17
</li>
<li
class=""
role="button"
>
18
</li>
<li
class=""
role="button"
>
19
</li>
<li
class=""
role="button"
>
20
</li>
<li
class=""
role="button"
>
21
</li>
<li
class=""
role="button"
>
22
</li>
<li
class=""
role="button"
>
23
</li>
</ul>
</div>
<div
class="ant-time-picker-panel-select"
>
<ul>
<li
class="ant-time-picker-panel-select-option-selected"
role="button"
>
00
</li>
<li
class=""
role="button"
>
01
</li>
<li
class=""
role="button"
>
02
</li>
<li
class=""
role="button"
>
03
</li>
<li
class=""
role="button"
>
04
</li>
<li
class=""
role="button"
>
05
</li>
<li
class=""
role="button"
>
06
</li>
<li
class=""
role="button"
>
07
</li>
<li
class=""
role="button"
>
08
</li>
<li
class=""
role="button"
>
09
</li>
<li
class=""
role="button"
>
10
</li>
<li
class=""
role="button"
>
11
</li>
<li
class=""
role="button"
>
12
</li>
<li
class=""
role="button"
>
13
</li>
<li
class=""
role="button"
>
14
</li>
<li
class=""
role="button"
>
15
</li>
<li
class=""
role="button"
>
16
</li>
<li
class=""
role="button"
>
17
</li>
<li
class=""
role="button"
>
18
</li>
<li
class=""
role="button"
>
19
</li>
<li
class=""
role="button"
>
20
</li>
<li
class=""
role="button"
>
21
</li>
<li
class=""
role="button"
>
22
</li>
<li
class=""
role="button"
>
23
</li>
<li
class=""
role="button"
>
24
</li>
<li
class=""
role="button"
>
25
</li>
<li
class=""
role="button"
>
26
</li>
<li
class=""
role="button"
>
27
</li>
<li
class=""
role="button"
>
28
</li>
<li
class=""
role="button"
>
29
</li>
<li
class=""
role="button"
>
30
</li>
<li
class=""
role="button"
>
31
</li>
<li
class=""
role="button"
>
32
</li>
<li
class=""
role="button"
>
33
</li>
<li
class=""
role="button"
>
34
</li>
<li
class=""
role="button"
>
35
</li>
<li
class=""
role="button"
>
36
</li>
<li
class=""
role="button"
>
37
</li>
<li
class=""
role="button"
>
38
</li>
<li
class=""
role="button"
>
39
</li>
<li
class=""
role="button"
>
40
</li>
<li
class=""
role="button"
>
41
</li>
<li
class=""
role="button"
>
42
</li>
<li
class=""
role="button"
>
43
</li>
<li
class=""
role="button"
>
44
</li>
<li
class=""
role="button"
>
45
</li>
<li
class=""
role="button"
>
46
</li>
<li
class=""
role="button"
>
47
</li>
<li
class=""
role="button"
>
48
</li>
<li
class=""
role="button"
>
49
</li>
<li
class=""
role="button"
>
50
</li>
<li
class=""
role="button"
>
51
</li>
<li
class=""
role="button"
>
52
</li>
<li
class=""
role="button"
>
53
</li>
<li
class=""
role="button"
>
54
</li>
<li
class=""
role="button"
>
55
</li>
<li
class=""
role="button"
>
56
</li>
<li
class=""
role="button"
>
57
</li>
<li
class=""
role="button"
>
58
</li>
<li
class=""
role="button"
>
59
</li>
</ul>
</div>
<div
class="ant-time-picker-panel-select"
>
<ul>
<li
class="ant-time-picker-panel-select-option-selected"
role="button"
>
00
</li>
<li
class=""
role="button"
>
01
</li>
<li
class=""
role="button"
>
02
</li>
<li
class=""
role="button"
>
03
</li>
<li
class=""
role="button"
>
04
</li>
<li
class=""
role="button"
>
05
</li>
<li
class=""
role="button"
>
06
</li>
<li
class=""
role="button"
>
07
</li>
<li
class=""
role="button"
>
08
</li>
<li
class=""
role="button"
>
09
</li>
<li
class=""
role="button"
>
10
</li>
<li
class=""
role="button"
>
11
</li>
<li
class=""
role="button"
>
12
</li>
<li
class=""
role="button"
>
13
</li>
<li
class=""
role="button"
>
14
</li>
<li
class=""
role="button"
>
15
</li>
<li
class=""
role="button"
>
16
</li>
<li
class=""
role="button"
>
17
</li>
<li
class=""
role="button"
>
18
</li>
<li
class=""
role="button"
>
19
</li>
<li
class=""
role="button"
>
20
</li>
<li
class=""
role="button"
>
21
</li>
<li
class=""
role="button"
>
22
</li>
<li
class=""
role="button"
>
23
</li>
<li
class=""
role="button"
>
24
</li>
<li
class=""
role="button"
>
25
</li>
<li
class=""
role="button"
>
26
</li>
<li
class=""
role="button"
>
27
</li>
<li
class=""
role="button"
>
28
</li>
<li
class=""
role="button"
>
29
</li>
<li
class=""
role="button"
>
30
</li>
<li
class=""
role="button"
>
31
</li>
<li
class=""
role="button"
>
32
</li>
<li
class=""
role="button"
>
33
</li>
<li
class=""
role="button"
>
34
</li>
<li
class=""
role="button"
>
35
</li>
<li
class=""
role="button"
>
36
</li>
<li
class=""
role="button"
>
37
</li>
<li
class=""
role="button"
>
38
</li>
<li
class=""
role="button"
>
39
</li>
<li
class=""
role="button"
>
40
</li>
<li
class=""
role="button"
>
41
</li>
<li
class=""
role="button"
>
42
</li>
<li
class=""
role="button"
>
43
</li>
<li
class=""
role="button"
>
44
</li>
<li
class=""
role="button"
>
45
</li>
<li
class=""
role="button"
>
46
</li>
<li
class=""
role="button"
>
47
</li>
<li
class=""
role="button"
>
48
</li>
<li
class=""
role="button"
>
49
</li>
<li
class=""
role="button"
>
50
</li>
<li
class=""
role="button"
>
51
</li>
<li
class=""
role="button"
>
52
</li>
<li
class=""
role="button"
>
53
</li>
<li
class=""
role="button"
>
54
</li>
<li
class=""
role="button"
>
55
</li>
<li
class=""
role="button"
>
56
</li>
<li
class=""
role="button"
>
57
</li>
<li
class=""
role="button"
>
58
</li>
<li
class=""
role="button"
>
59
</li>
</ul>
</div>
</div>
</div>
</div>
</div>,
]
`;
exports[`TimePicker renders addon correctly 1`] = `

View File

@ -73,7 +73,9 @@ describe('TimePicker', () => {
const locale = {
placeholder: 'Избери дата',
};
const wrapper = mount(<TimePicker open locale={locale} />);
const wrapper = mount(
<TimePicker defaultValue={moment('2000-01-01 00:00:00')} open locale={locale} />,
);
expect(wrapper.render()).toMatchSnapshot();
});
});