2022-07-15 15:28:09 +08:00
|
|
|
import ExclamationCircleFilled from '@ant-design/icons/ExclamationCircleFilled';
|
|
|
|
import classNames from 'classnames';
|
2023-02-22 18:18:26 +08:00
|
|
|
import * as React from 'react';
|
2022-07-15 11:11:50 +08:00
|
|
|
import type { PopconfirmProps } from '.';
|
|
|
|
import Button from '../button';
|
|
|
|
import { convertLegacyProps } from '../button/button';
|
|
|
|
import { ConfigContext } from '../config-provider';
|
2023-02-22 18:18:26 +08:00
|
|
|
import defaultLocale from '../locale/en_US';
|
|
|
|
import useLocale from '../locale/useLocale';
|
2022-07-15 15:28:09 +08:00
|
|
|
import PopoverPurePanel from '../popover/PurePanel';
|
2023-02-22 18:18:26 +08:00
|
|
|
import ActionButton from '../_util/ActionButton';
|
|
|
|
import { getRenderPropValue } from '../_util/getRenderPropValue';
|
2022-07-15 15:28:09 +08:00
|
|
|
|
|
|
|
import useStyle from './style';
|
2022-07-15 11:11:50 +08:00
|
|
|
|
|
|
|
export interface PopconfirmLocale {
|
|
|
|
okText: string;
|
|
|
|
cancelText: string;
|
|
|
|
}
|
|
|
|
|
|
|
|
export interface OverlayProps
|
|
|
|
extends Pick<
|
|
|
|
PopconfirmProps,
|
|
|
|
| 'icon'
|
|
|
|
| 'okButtonProps'
|
|
|
|
| 'cancelButtonProps'
|
|
|
|
| 'cancelText'
|
|
|
|
| 'okText'
|
|
|
|
| 'okType'
|
|
|
|
| 'showCancel'
|
|
|
|
| 'title'
|
2022-12-08 16:39:42 +08:00
|
|
|
| 'description'
|
2022-07-15 11:11:50 +08:00
|
|
|
> {
|
|
|
|
prefixCls: string;
|
|
|
|
close?: Function;
|
2022-12-15 17:48:29 +08:00
|
|
|
onConfirm?: React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;
|
|
|
|
onCancel?: React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;
|
2022-07-15 11:11:50 +08:00
|
|
|
}
|
|
|
|
|
2022-11-19 13:47:33 +08:00
|
|
|
export const Overlay: React.FC<OverlayProps> = (props) => {
|
2022-07-15 11:11:50 +08:00
|
|
|
const {
|
|
|
|
prefixCls,
|
|
|
|
okButtonProps,
|
|
|
|
cancelButtonProps,
|
|
|
|
title,
|
2022-12-08 16:39:42 +08:00
|
|
|
description,
|
2022-07-15 11:11:50 +08:00
|
|
|
cancelText,
|
|
|
|
okText,
|
2022-07-15 15:28:09 +08:00
|
|
|
okType = 'primary',
|
|
|
|
icon = <ExclamationCircleFilled />,
|
2022-07-15 11:11:50 +08:00
|
|
|
showCancel = true,
|
|
|
|
close,
|
|
|
|
onConfirm,
|
|
|
|
onCancel,
|
|
|
|
} = props;
|
|
|
|
|
|
|
|
const { getPrefixCls } = React.useContext(ConfigContext);
|
|
|
|
|
2023-02-22 18:18:26 +08:00
|
|
|
const contextLocale = useLocale('Popconfirm', defaultLocale.Popconfirm);
|
|
|
|
|
2022-07-15 11:11:50 +08:00
|
|
|
return (
|
2023-02-22 18:18:26 +08:00
|
|
|
<div className={`${prefixCls}-inner-content`}>
|
|
|
|
<div className={`${prefixCls}-message`}>
|
|
|
|
{icon && <span className={`${prefixCls}-message-icon`}>{icon}</span>}
|
|
|
|
<div
|
|
|
|
className={classNames(`${prefixCls}-message-title`, {
|
|
|
|
[`${prefixCls}-message-title-only`]: !!description,
|
|
|
|
})}
|
|
|
|
>
|
|
|
|
{getRenderPropValue(title)}
|
2022-07-15 11:11:50 +08:00
|
|
|
</div>
|
2023-02-22 18:18:26 +08:00
|
|
|
</div>
|
|
|
|
{description && (
|
|
|
|
<div className={`${prefixCls}-description`}>{getRenderPropValue(description)}</div>
|
2022-07-15 11:11:50 +08:00
|
|
|
)}
|
2023-02-22 18:18:26 +08:00
|
|
|
<div className={`${prefixCls}-buttons`}>
|
|
|
|
{showCancel && (
|
|
|
|
<Button onClick={onCancel} size="small" {...cancelButtonProps}>
|
|
|
|
{cancelText ?? contextLocale?.cancelText}
|
|
|
|
</Button>
|
|
|
|
)}
|
|
|
|
<ActionButton
|
|
|
|
buttonProps={{ size: 'small', ...convertLegacyProps(okType), ...okButtonProps }}
|
|
|
|
actionFn={onConfirm}
|
|
|
|
close={close}
|
|
|
|
prefixCls={getPrefixCls('btn')}
|
|
|
|
quitOnNullishReturnValue
|
|
|
|
emitEvent
|
|
|
|
>
|
|
|
|
{okText ?? contextLocale?.okText}
|
|
|
|
</ActionButton>
|
|
|
|
</div>
|
|
|
|
</div>
|
2022-07-15 11:11:50 +08:00
|
|
|
);
|
2022-10-01 21:58:46 +08:00
|
|
|
};
|
2022-07-15 15:28:09 +08:00
|
|
|
|
|
|
|
export interface PurePanelProps
|
|
|
|
extends Omit<OverlayProps, 'prefixCls'>,
|
|
|
|
Pick<PopconfirmProps, 'placement'> {
|
|
|
|
className?: string;
|
|
|
|
style?: React.CSSProperties;
|
|
|
|
prefixCls?: string;
|
|
|
|
}
|
|
|
|
|
|
|
|
export default function PurePanel(props: PurePanelProps) {
|
|
|
|
const { prefixCls: customizePrefixCls, placement, className, style, ...restProps } = props;
|
|
|
|
|
|
|
|
const { getPrefixCls } = React.useContext(ConfigContext);
|
|
|
|
const prefixCls = getPrefixCls('popconfirm', customizePrefixCls);
|
|
|
|
const [wrapSSR] = useStyle(prefixCls);
|
|
|
|
|
|
|
|
return wrapSSR(
|
|
|
|
<PopoverPurePanel
|
|
|
|
placement={placement}
|
|
|
|
className={classNames(prefixCls, className)}
|
|
|
|
style={style}
|
2022-12-06 23:14:30 +08:00
|
|
|
content={<Overlay prefixCls={prefixCls} {...restProps} />}
|
|
|
|
/>,
|
2022-07-15 15:28:09 +08:00
|
|
|
);
|
|
|
|
}
|