ant-design/components/popconfirm/index.tsx

178 lines
5.3 KiB
TypeScript
Raw Normal View History

2021-12-28 17:23:43 +08:00
import * as React from 'react';
import classNames from 'classnames';
import useMergedState from 'rc-util/lib/hooks/useMergedState';
2021-12-28 17:23:43 +08:00
import ExclamationCircleFilled from '@ant-design/icons/ExclamationCircleFilled';
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';
import LocaleReceiver from '../locale-provider/LocaleReceiver';
import defaultLocale from '../locale/default';
2021-12-28 17:23:43 +08:00
import { ConfigContext } from '../config-provider';
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';
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 {
title: React.ReactNode | RenderFunction;
disabled?: boolean;
onConfirm?: (e?: React.MouseEvent<HTMLElement>) => void;
onCancel?: (e?: React.MouseEvent<HTMLElement>) => void;
okText?: React.ReactNode;
okType?: LegacyButtonType;
cancelText?: React.ReactNode;
okButtonProps?: ButtonProps;
cancelButtonProps?: ButtonProps;
showCancel?: boolean;
2018-07-06 23:48:37 +08:00
icon?: React.ReactNode;
onVisibleChange?: (
visible: boolean,
e?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLDivElement>,
) => void;
}
export interface PopconfirmState {
visible?: boolean;
}
export interface PopconfirmLocale {
okText: string;
cancelText: string;
}
const Popconfirm = React.forwardRef<unknown, PopconfirmProps>((props, ref) => {
const { getPrefixCls } = React.useContext(ConfigContext);
const [visible, setVisible] = useMergedState(false, {
value: props.visible,
defaultValue: props.defaultVisible,
});
const isDestroyed = useDestroyed();
const settingVisible = (
value: boolean,
e?: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLDivElement>,
) => {
if (!isDestroyed()) {
setVisible(value);
}
props.onVisibleChange?.(value, e);
};
2017-07-07 20:26:08 +08:00
const close = (e: React.MouseEvent<HTMLButtonElement>) => {
settingVisible(false, e);
2018-12-07 20:02:01 +08:00
};
const onConfirm = (e: React.MouseEvent<HTMLButtonElement>) => props.onConfirm?.call(this, e);
const onCancel = (e: React.MouseEvent<HTMLButtonElement>) => {
settingVisible(false, e);
props.onCancel?.call(this, e);
2018-12-07 20:02:01 +08:00
};
const onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
if (e.keyCode === KeyCode.ESC && visible) {
settingVisible(false, e);
}
};
const onVisibleChange = (value: boolean) => {
const { disabled } = props;
if (disabled) {
return;
}
settingVisible(value);
2018-12-07 20:02:01 +08:00
};
const renderOverlay = (prefixCls: string, popconfirmLocale: PopconfirmLocale) => {
const {
okButtonProps,
cancelButtonProps,
title,
cancelText,
okText,
okType,
icon,
showCancel = true,
} = props;
return (
<div className={`${prefixCls}-inner-content`}>
<div className={`${prefixCls}-message`}>
{icon}
<div className={`${prefixCls}-message-title`}>{getRenderPropValue(title)}</div>
</div>
<div className={`${prefixCls}-buttons`}>
{showCancel && (
<Button onClick={onCancel} size="small" {...cancelButtonProps}>
{cancelText || popconfirmLocale.cancelText}
</Button>
)}
<ActionButton
buttonProps={{ size: 'small', ...convertLegacyProps(okType), ...okButtonProps }}
actionFn={onConfirm}
close={close}
prefixCls={getPrefixCls('btn')}
quitOnNullishReturnValue
emitEvent
>
{okText || popconfirmLocale.okText}
</ActionButton>
2015-06-24 19:20:47 +08:00
</div>
</div>
);
2018-12-07 20:02:01 +08:00
};
const {
prefixCls: customizePrefixCls,
placement,
children,
overlayClassName,
...restProps
} = props;
const prefixCls = getPrefixCls('popover', customizePrefixCls);
const prefixClsConfirm = getPrefixCls('popconfirm', customizePrefixCls);
const overlayClassNames = classNames(prefixClsConfirm, overlayClassName);
const overlay = (
<LocaleReceiver componentName="Popconfirm" defaultLocale={defaultLocale.Popconfirm}>
{(popconfirmLocale: PopconfirmLocale) => renderOverlay(prefixCls, popconfirmLocale)}
</LocaleReceiver>
);
const rootPrefixCls = getPrefixCls();
return (
<Tooltip
{...restProps}
prefixCls={prefixCls}
placement={placement}
onVisibleChange={onVisibleChange}
visible={visible}
overlay={overlay}
overlayClassName={overlayClassNames}
ref={ref as any}
transitionName={getTransitionName(rootPrefixCls, 'zoom-big', props.transitionName)}
>
{cloneElement(children, {
onKeyDown: (e: React.KeyboardEvent<any>) => {
if (React.isValidElement(children)) {
children?.props.onKeyDown?.(e);
}
onKeyDown(e);
},
})}
</Tooltip>
);
});
Popconfirm.defaultProps = {
placement: 'top' as PopconfirmProps['placement'],
trigger: 'click' as PopconfirmProps['trigger'],
okType: 'primary' as PopconfirmProps['okType'],
icon: <ExclamationCircleFilled />,
disabled: false,
};
export default Popconfirm;