feat: add popconfirm api showCloseIcon (#1906)

Co-authored-by: yeming <[email protected]>
Co-authored-by: pointhalo <[email protected]>

packages/semi-ui/popconfirm/_story/ShowCloseIcon/index.jsx

@@ -0,0 +1,44 @@
+import React, { useState } from 'react';
+import { Radio, RadioGroup, Button, Switch } from '@douyinfe/semi-ui/';
+import Popconfirm from '../..';
+
+const defaultTitle = '确定是否要保存此修改？';
+const defaultContent = '此修改将不可逆';
+
+function Demo(props = {}) {
+    const [visible, _setVisible] = useState(true);
+    const [showCloseIcon, _setShowCloseIcon] = useState(true);
+
+    const setVisible = visible => _setVisible(visible);
+
+    const toggleVisible = () => setVisible(!visible);
+
+    const toggleCloseIconState = () => _setShowCloseIcon(!showCloseIcon);
+
+    return (
+        <div>
+            <div>
+                <div>展示close图标</div>
+                <Switch checked={showCloseIcon} onChange={toggleCloseIconState} />
+            </div>
+            <div
+                style={{
+                    margin: 20,
+                }}
+            >
+                <Popconfirm
+                    onVisibleChange={setVisible}
+                    showCloseIcon={showCloseIcon}
+                    title={defaultTitle}
+                    content={defaultContent}
+                    arrowPointAtCenter
+                    showArrow
+                >
+                    <Button onClick={toggleVisible}>点击</Button>
+                </Popconfirm>
+            </div>
+        </div>
+    );
+}
+
+export default Demo;

packages/semi-ui/popconfirm/_story/popconfirm.stories.jsx

@@ -12,6 +12,7 @@ import DynamicDisableDemo from './DynamicDisable';
 import TitleConfirmDemo from './TitlePopconfirm';
 import InTableDemo from './InTable';
 import ShowArrow from './ShowArrow';
+import ShowCloseIcon from './ShowCloseIcon';
 
 export default {
   title: 'Popconfirm',
@@ -142,6 +143,11 @@ ShowArrowDemo.style = {
   name: 'show arrow'
 }
 
+export const ShowCloseIconDemo = () => <ShowCloseIcon />;
+ShowCloseIcon.style = {
+  name: 'show close icon'
+}
+
 export const ClickOutSideDemo = () => {
     const [v, setV] = useState(false)
     const onConfirm = () => {

packages/semi-ui/popconfirm/index.tsx

@@ -31,6 +31,7 @@ export interface PopconfirmProps extends PopoverProps {
     prefixCls?: string;
     zIndex?: number;
     trigger?: Trigger;
+    showCloseIcon?: boolean;
     position?: Position;
     onCancel?: (e: React.MouseEvent) => Promise<any> | void;
     onConfirm?: (e: React.MouseEvent) => Promise<any> | void;
@@ -72,6 +73,7 @@ export default class Popconfirm extends BaseComponent<PopconfirmProps, Popconfir
         okButtonProps: PropTypes.object,
         cancelButtonProps: PropTypes.object,
         stopPropagation: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+        showCloseIcon: PropTypes.bool,
         zIndex: PropTypes.number,
         // private
         trigger: PropTypes.string,
@@ -89,6 +91,7 @@ export default class Popconfirm extends BaseComponent<PopconfirmProps, Popconfir
         cancelType: 'tertiary',
         prefixCls: cssClasses.PREFIX,
         zIndex: numbers.DEFAULT_Z_INDEX,
+        showCloseIcon: true,
         onCancel: noop,
         onConfirm: noop,
         onClickOutSide: noop,
@@ -191,7 +194,7 @@ export default class Popconfirm extends BaseComponent<PopconfirmProps, Popconfir
     }
 
     renderConfirmPopCard = ({ initialFocusRef }: { initialFocusRef?: RenderContentProps<any>['initialFocusRef'] }) => {
-        const { content, title, className, style, cancelType, icon, prefixCls } = this.props;
+        const { content, title, className, style, cancelType, icon, prefixCls, showCloseIcon } = this.props;
         const { direction } = this.context;
         const popCardCls = cls(
             prefixCls,
@@ -202,7 +205,7 @@ export default class Popconfirm extends BaseComponent<PopconfirmProps, Popconfir
         );
         const showTitle = title !== null && typeof title !== 'undefined';
         const showContent = !(content === null || typeof content === 'undefined');
-        
+
         const hasIcon = React.isValidElement(icon);
         const bodyCls = cls({
             [`${prefixCls}-body`]: true,
@@ -222,14 +225,19 @@ export default class Popconfirm extends BaseComponent<PopconfirmProps, Popconfir
                                 </div>
                             ) : null}
                         </div>
-                        <Button
-                            className={`${prefixCls}-btn-close`}
-                            icon={<IconClose />}
-                            size="small"
-                            theme={'borderless'}
-                            type={cancelType}
-                            onClick={this.handleCancel}
-                        />
+                        {
+                            showCloseIcon ? (
+                                <Button
+                                    className={`${prefixCls}-btn-close`}
+                                    icon={<IconClose />}
+                                    size="small"
+                                    theme={'borderless'}
+                                    type={cancelType}
+                                    onClick={this.handleCancel}
+                                />
+                            ) : null
+                        }
+
                     </div>
                     {showContent ? (
                         <div className={bodyCls} x-semi-prop="content">