2021-12-28 17:23:43 +08:00
|
|
|
import * as React from 'react';
|
2020-07-20 13:39:28 +08:00
|
|
|
import classNames from 'classnames';
|
2021-03-01 17:25:30 +08:00
|
|
|
import useMergedState from 'rc-util/lib/hooks/useMergedState';
|
2021-12-28 17:23:43 +08:00
|
|
|
import ExclamationCircleFilled from '@ant-design/icons/ExclamationCircleFilled';
|
2020-05-25 17:43:59 +08:00
|
|
|
import KeyCode from 'rc-util/lib/KeyCode';
|
2021-12-28 17:23:43 +08:00
|
|
|
import Tooltip, { AbstractTooltipProps } from '../tooltip';
|
2017-07-17 09:40:55 +08:00
|
|
|
import Button from '../button';
|
2021-12-28 17:23:43 +08:00
|
|
|
import { LegacyButtonType, ButtonProps, convertLegacyProps } from '../button/button';
|
2017-10-20 14:54:38 +08:00
|
|
|
import LocaleReceiver from '../locale-provider/LocaleReceiver';
|
2019-07-24 10:34:55 +08:00
|
|
|
import defaultLocale from '../locale/default';
|
2021-12-28 17:23:43 +08:00
|
|
|
import { ConfigContext } from '../config-provider';
|
2020-03-10 13:57:02 +08:00
|
|
|
import { getRenderPropValue, RenderFunction } from '../_util/getRenderPropValue';
|
2021-12-28 17:21:00 +08:00
|
|
|
import { cloneElement } from '../_util/reactNode';
|
2021-12-28 17:23:43 +08:00
|
|
|
import { getTransitionName } from '../_util/motion';
|
|
|
|
import ActionButton from '../_util/ActionButton';
|
2021-12-29 17:10:16 +08:00
|
|
|
import useDestroyed from '../_util/hooks/useDestroyed';
|
2015-11-24 11:21:37 +08:00
|
|
|
|
2016-11-30 16:43:35 +08:00
|
|
|
export interface PopconfirmProps extends AbstractTooltipProps {
|
2020-03-10 13:57:02 +08:00
|
|
|
title: React.ReactNode | RenderFunction;
|
2019-06-05 20:33:00 +08:00
|
|
|
disabled?: boolean;
|
2019-06-16 20:51:47 +08:00
|
|
|
onConfirm?: (e?: React.MouseEvent<HTMLElement>) => void;
|
|
|
|
onCancel?: (e?: React.MouseEvent<HTMLElement>) => void;
|
2016-07-25 11:28:43 +08:00
|
|
|
okText?: React.ReactNode;
|
2020-05-05 12:03:16 +08:00
|
|
|
okType?: LegacyButtonType;
|
2016-07-25 11:28:43 +08:00
|
|
|
cancelText?: React.ReactNode;
|
2021-03-31 09:42:13 +08:00
|
|
|
okButtonProps?: ButtonProps;
|
|
|
|
cancelButtonProps?: ButtonProps;
|
2021-10-26 19:12:08 +08:00
|
|
|
showCancel?: boolean;
|
2018-07-06 23:48:37 +08:00
|
|
|
icon?: React.ReactNode;
|
2020-05-25 17:43:59 +08:00
|
|
|
onVisibleChange?: (
|
|
|
|
visible: boolean,
|
|
|
|
e?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLDivElement>,
|
|
|
|
) => void;
|
2016-07-25 11:28:43 +08:00
|
|
|
}
|
|
|
|
|
2017-11-21 15:37:39 +08:00
|
|
|
export interface PopconfirmState {
|
|
|
|
visible?: boolean;
|
|
|
|
}
|
|
|
|
|
|
|
|
export interface PopconfirmLocale {
|
|
|
|
okText: string;
|
|
|
|
cancelText: string;
|
|
|
|
}
|
|
|
|
|
2020-04-26 22:24:13 +08:00
|
|
|
const Popconfirm = React.forwardRef<unknown, PopconfirmProps>((props, ref) => {
|
2021-06-09 12:18:52 +08:00
|
|
|
const { getPrefixCls } = React.useContext(ConfigContext);
|
2021-03-01 17:25:30 +08:00
|
|
|
const [visible, setVisible] = useMergedState(false, {
|
|
|
|
value: props.visible,
|
|
|
|
defaultValue: props.defaultVisible,
|
|
|
|
});
|
2016-11-30 15:46:50 +08:00
|
|
|
|
2021-12-29 17:10:16 +08:00
|
|
|
const isDestroyed = useDestroyed();
|
2021-12-27 18:06:46 +08:00
|
|
|
|
2020-05-25 17:43:59 +08:00
|
|
|
const settingVisible = (
|
|
|
|
value: boolean,
|
|
|
|
e?: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLDivElement>,
|
|
|
|
) => {
|
2021-12-29 17:10:16 +08:00
|
|
|
if (!isDestroyed()) {
|
2021-12-27 18:06:46 +08:00
|
|
|
setVisible(value);
|
|
|
|
}
|
2021-02-19 18:26:53 +08:00
|
|
|
props.onVisibleChange?.(value, e);
|
2020-04-26 22:24:13 +08:00
|
|
|
};
|
2017-07-07 20:26:08 +08:00
|
|
|
|
2021-06-09 12:18:52 +08:00
|
|
|
const close = (e: React.MouseEvent<HTMLButtonElement>) => {
|
2020-04-26 22:24:13 +08:00
|
|
|
settingVisible(false, e);
|
2018-12-07 20:02:01 +08:00
|
|
|
};
|
2016-03-29 17:33:37 +08:00
|
|
|
|
2021-06-09 12:18:52 +08:00
|
|
|
const onConfirm = (e: React.MouseEvent<HTMLButtonElement>) => props.onConfirm?.call(this, e);
|
|
|
|
|
2020-04-26 22:24:13 +08:00
|
|
|
const onCancel = (e: React.MouseEvent<HTMLButtonElement>) => {
|
|
|
|
settingVisible(false, e);
|
2021-02-19 18:26:53 +08:00
|
|
|
props.onCancel?.call(this, e);
|
2018-12-07 20:02:01 +08:00
|
|
|
};
|
2016-03-29 17:33:37 +08:00
|
|
|
|
2020-05-25 17:43:59 +08:00
|
|
|
const onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
|
|
|
|
if (e.keyCode === KeyCode.ESC && visible) {
|
|
|
|
settingVisible(false, e);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2020-04-26 22:24:13 +08:00
|
|
|
const onVisibleChange = (value: boolean) => {
|
|
|
|
const { disabled } = props;
|
2019-06-05 20:33:00 +08:00
|
|
|
if (disabled) {
|
|
|
|
return;
|
|
|
|
}
|
2020-04-26 22:24:13 +08:00
|
|
|
settingVisible(value);
|
2018-12-07 20:02:01 +08:00
|
|
|
};
|
2016-03-29 17:33:37 +08:00
|
|
|
|
2020-04-26 22:24:13 +08:00
|
|
|
const renderOverlay = (prefixCls: string, popconfirmLocale: PopconfirmLocale) => {
|
2021-10-26 19:12:08 +08:00
|
|
|
const {
|
|
|
|
okButtonProps,
|
|
|
|
cancelButtonProps,
|
|
|
|
title,
|
|
|
|
cancelText,
|
|
|
|
okText,
|
|
|
|
okType,
|
|
|
|
icon,
|
|
|
|
showCancel = true,
|
|
|
|
} = props;
|
2017-10-20 14:54:38 +08:00
|
|
|
return (
|
2020-03-10 15:17:23 +08:00
|
|
|
<div className={`${prefixCls}-inner-content`}>
|
|
|
|
<div className={`${prefixCls}-message`}>
|
|
|
|
{icon}
|
|
|
|
<div className={`${prefixCls}-message-title`}>{getRenderPropValue(title)}</div>
|
|
|
|
</div>
|
|
|
|
<div className={`${prefixCls}-buttons`}>
|
2021-10-26 19:12:08 +08:00
|
|
|
{showCancel && (
|
|
|
|
<Button onClick={onCancel} size="small" {...cancelButtonProps}>
|
|
|
|
{cancelText || popconfirmLocale.cancelText}
|
|
|
|
</Button>
|
|
|
|
)}
|
2021-06-09 12:18:52 +08:00
|
|
|
<ActionButton
|
|
|
|
buttonProps={{ size: 'small', ...convertLegacyProps(okType), ...okButtonProps }}
|
|
|
|
actionFn={onConfirm}
|
|
|
|
close={close}
|
|
|
|
prefixCls={getPrefixCls('btn')}
|
|
|
|
quitOnNullishReturnValue
|
|
|
|
emitEvent
|
2020-05-05 12:03:16 +08:00
|
|
|
>
|
2020-03-10 15:17:23 +08:00
|
|
|
{okText || popconfirmLocale.okText}
|
2021-06-09 12:18:52 +08:00
|
|
|
</ActionButton>
|
2015-06-24 19:20:47 +08:00
|
|
|
</div>
|
|
|
|
</div>
|
2016-01-07 14:21:29 +08:00
|
|
|
);
|
2018-12-07 20:02:01 +08:00
|
|
|
};
|
2017-10-20 14:54:38 +08:00
|
|
|
|
2020-07-20 13:39:28 +08:00
|
|
|
const {
|
|
|
|
prefixCls: customizePrefixCls,
|
|
|
|
placement,
|
|
|
|
children,
|
|
|
|
overlayClassName,
|
|
|
|
...restProps
|
|
|
|
} = props;
|
2020-04-26 22:24:13 +08:00
|
|
|
const prefixCls = getPrefixCls('popover', customizePrefixCls);
|
2020-07-20 13:39:28 +08:00
|
|
|
const prefixClsConfirm = getPrefixCls('popconfirm', customizePrefixCls);
|
|
|
|
const overlayClassNames = classNames(prefixClsConfirm, overlayClassName);
|
2020-04-26 22:24:13 +08:00
|
|
|
|
|
|
|
const overlay = (
|
|
|
|
<LocaleReceiver componentName="Popconfirm" defaultLocale={defaultLocale.Popconfirm}>
|
|
|
|
{(popconfirmLocale: PopconfirmLocale) => renderOverlay(prefixCls, popconfirmLocale)}
|
|
|
|
</LocaleReceiver>
|
|
|
|
);
|
2021-02-08 17:09:13 +08:00
|
|
|
const rootPrefixCls = getPrefixCls();
|
2020-04-26 22:24:13 +08:00
|
|
|
|
|
|
|
return (
|
|
|
|
<Tooltip
|
|
|
|
{...restProps}
|
|
|
|
prefixCls={prefixCls}
|
|
|
|
placement={placement}
|
|
|
|
onVisibleChange={onVisibleChange}
|
|
|
|
visible={visible}
|
|
|
|
overlay={overlay}
|
2020-07-20 13:39:28 +08:00
|
|
|
overlayClassName={overlayClassNames}
|
2020-04-26 22:24:13 +08:00
|
|
|
ref={ref as any}
|
2021-02-08 17:09:13 +08:00
|
|
|
transitionName={getTransitionName(rootPrefixCls, 'zoom-big', props.transitionName)}
|
2020-05-25 17:43:59 +08:00
|
|
|
>
|
|
|
|
{cloneElement(children, {
|
|
|
|
onKeyDown: (e: React.KeyboardEvent<any>) => {
|
2020-09-02 15:35:49 +08:00
|
|
|
if (React.isValidElement(children)) {
|
|
|
|
children?.props.onKeyDown?.(e);
|
|
|
|
}
|
2020-05-25 17:43:59 +08:00
|
|
|
onKeyDown(e);
|
|
|
|
},
|
|
|
|
})}
|
|
|
|
</Tooltip>
|
2020-04-26 22:24:13 +08:00
|
|
|
);
|
|
|
|
});
|
|
|
|
|
|
|
|
Popconfirm.defaultProps = {
|
|
|
|
placement: 'top' as PopconfirmProps['placement'],
|
|
|
|
trigger: 'click' as PopconfirmProps['trigger'],
|
|
|
|
okType: 'primary' as PopconfirmProps['okType'],
|
|
|
|
icon: <ExclamationCircleFilled />,
|
|
|
|
disabled: false,
|
|
|
|
};
|
2018-08-10 17:04:40 +08:00
|
|
|
|
|
|
|
export default Popconfirm;
|