Popconfirm 确认弹窗

确认弹窗使用场景：表格，列表删除时的确认

DeleteConfirm 删除弹窗

import React from 'react';
import { Popconfirm, Typography } from 'antd';
import { QuestionCircleOutlined, DeleteOutlined } from '@ant-design/icons';
type IProps = {
  title: string;
  text?: string;
  onConfirm: () => Promise<void>;
  children?: React.ReactNode;
}
const DeleteConfirm: React.FC<IProps> = (props) => {
  const { title = '', text = '删除', children, onConfirm } = props;
  const element = children ?? (
    <Typography.Text type="danger">
      <DeleteOutlined/> {text}
    </Typography.Text>
  );
  return (
    <Popconfirm
      title={`确认是否${text}该${title}`}
      icon={
        <QuestionCircleOutlined  style={{ color: 'red' }} />
      }
      okText={text}
      onConfirm={onConfirm}
    >
      {element}
    </Popconfirm>
  )
};
export default DeleteConfirm;

DeleteConfirm

import { Button } from 'antd';
import { DeleteConfirm } from '@/components';
function App() {
  return (
    <DeleteConfirm>
      <Button 
        danger 
        size='small'
        onClick={e => e.preventDefault()}
      >
        删除
      </Button>
    </DeleteConfirm>
  )
}

TableDropdown

表格删除时的确认
https://procomponents.ant.design/components/table#tabledropdown

import { ProTable, TableDropdown } from '@ant-design/pro-components';
const action = [
    {
    title: "操作",
    valueType: 'option',
    key: 'option',
    width: 120,
    fixed: 'right',
    render: renderAction,
  }
]
export function renderAction(text, record, _, action) {
  return [
    <a
      key="editable"
      onClick={() => {
        action?.startEditable?.(record.id);
      }}
      rel="noopener noreferrer" 
    >
      编辑
    </a>,
    <a href={record.url} target="_blank" rel="noopener noreferrer" key="view">
      查看
    </a>,
    <TableDropdown
      key="actions"
      onSelect={() => action?.reload()}
      menus={[
        { key: 'copy', name: '复制' },
        { key: 'delete', name: <DeleteConfirm title="用户" onConfirm={onConfirm}/>}
        // { key: 'delete', name: '删除' },
      ]}
    />,
  ]
}