Popconfirm support customize icon

ant-design · Jul 16, 2018 · 8496e8f · 8496e8f
1 parent 11f0f14
commit 8496e8f
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 2 deletions.
diff --git a/components/popconfirm/__tests__/__snapshots__/demo.test.js.snap b/components/popconfirm/__tests__/__snapshots__/demo.test.js.snap
@@ -29,6 +29,14 @@ exports[`renders ./components/popconfirm/demo/dynamic-trigger.md correctly 1`] =
 </div>
 `;
 
+exports[`renders ./components/popconfirm/demo/icon.md correctly 1`] = `
+<a
+  href="#"
+>
+  Delete
+</a>
+`;
+
 exports[`renders ./components/popconfirm/demo/locale.md correctly 1`] = `
 <a
   href="#"

diff --git a/components/popconfirm/__tests__/index.test.js b/components/popconfirm/__tests__/index.test.js
@@ -82,4 +82,16 @@ describe('Popconfirm', () => {
     expect(cancel).toHaveBeenCalled();
     expect(onVisibleChange).toHaveBeenLastCalledWith(false);
   });
+
+  it('should support customize icon', () => {
+    const wrapper = mount(
+      <Popconfirm title="code" icon={<span className="customize-icon">custom-icon</span>}>
+        <span>show me your code</span>
+      </Popconfirm>
+    );
+
+    const triggerNode = wrapper.find('span').at(0);
+    triggerNode.simulate('click');
+    expect(wrapper.find('.customize-icon').length).toBe(1);
+  });
 });
diff --git a/components/popconfirm/demo/icon.md b/components/popconfirm/demo/icon.md
@@ -0,0 +1,24 @@
+---
+order: 4
+title:
+  zh-CN: 自定义 Icon 图标
+  en-US: Customize icon
+---
+
+## zh-CN
+
+使用 `icon` 自定义提示 `icon`。
+
+## en-US
+
+Set `icon` props to customize the icon.
+
+````jsx
+import { Popconfirm, Icon } from 'antd';
+
+ReactDOM.render(
+  <Popconfirm title="Are you sure？" icon={<Icon type="question-circle-o" style={{ color: 'red' }} />}>
+    <a href="#">Delete</a>
+  </Popconfirm>,
+  mountNode);
+````
diff --git a/components/popconfirm/index.en-US.md b/components/popconfirm/index.en-US.md
@@ -22,6 +22,7 @@ The difference with the `confirm` modal dialog is that it's more lightweight tha
 | title | title of the confirmation box | string\|ReactNode | - |
 | onCancel | callback of cancel | function(e) | - |
 | onConfirm | callback of confirmation | function(e) | - |
+| icon | customize icon of confirmation | ReactNode | &lt;Icon type="exclamation-circle" /&gt; |
 
 Consult [Tooltip's documentation](https://ant.design/components/tooltip/#API) to find more APIs.
 

diff --git a/components/popconfirm/index.tsx b/components/popconfirm/index.tsx
@@ -13,6 +13,7 @@ export interface PopconfirmProps extends AbstractTooltipProps {
   okText?: React.ReactNode;
   okType?: ButtonType;
   cancelText?: React.ReactNode;
+  icon?: React.ReactNode;
 }
 
 export interface PopconfirmState {
@@ -31,6 +32,7 @@ export default class Popconfirm extends React.Component<PopconfirmProps, Popconf
     placement: 'top',
     trigger: 'click',
     okType: 'primary',
+    icon: <Icon type="exclamation-circle" />,
   };
 
   private tooltip: any;
@@ -92,12 +94,12 @@ export default class Popconfirm extends React.Component<PopconfirmProps, Popconf
   }
 
   renderOverlay = (popconfirmLocale: PopconfirmLocale) => {
-    const { prefixCls, title, cancelText, okText, okType } = this.props;
+    const { prefixCls, title, cancelText, okText, okType, icon } = this.props;
     return (
       <div>
         <div className={`${prefixCls}-inner-content`}>
           <div className={`${prefixCls}-message`}>
-            <Icon type="exclamation-circle" />
+            {icon}
             <div className={`${prefixCls}-message-title`}>{title}</div>
           </div>
           <div className={`${prefixCls}-buttons`}>

diff --git a/components/popconfirm/index.zh-CN.md b/components/popconfirm/index.zh-CN.md
@@ -23,6 +23,7 @@ title: Popconfirm
 | title | 确认框的描述 | string\|ReactNode | 无 |
 | onCancel | 点击取消的回调 | function(e) | 无 |
 | onConfirm | 点击确认的回调 | function(e) | 无 |
+| icon | 自定义弹出气泡 Icon 图标 | ReactNode | &lt;Icon type="exclamation-circle" /&gt; |
 
 更多属性请参考 [Tooltip](/components/tooltip/#API)。