ant-design/components/popconfirm/index.tsx

144 lines
4.1 KiB
TypeScript
Raw Normal View History

2022-05-23 15:41:59 +08:00
import ExclamationCircleFilled from '@ant-design/icons/ExclamationCircleFilled';
import classNames from 'classnames';
import KeyCode from 'rc-util/lib/KeyCode';
import useMergedState from 'rc-util/lib/hooks/useMergedState';
import omit from 'rc-util/lib/omit';
import * as React from 'react';
import type { RenderFunction } from '../_util/getRenderPropValue';
import { cloneElement } from '../_util/reactNode';
2022-05-23 15:41:59 +08:00
import type { ButtonProps, LegacyButtonType } from '../button/button';
import { ConfigContext } from '../config-provider';
import Popover from '../popover';
import type { AbstractTooltipProps } from '../tooltip';
import PurePanel, { Overlay } from './PurePanel';
import usePopconfirmStyle from './style';
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;
description?: 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;
onOpenChange?: (
open: boolean,
e?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLDivElement>,
) => void;
onPopupClick?: (e: React.MouseEvent<HTMLElement>) => void;
}
export interface PopconfirmState {
open?: boolean;
}
const Popconfirm = React.forwardRef<unknown, PopconfirmProps>((props, ref) => {
const { getPrefixCls } = React.useContext(ConfigContext);
const [open, setOpen] = useMergedState(false, {
value: props.open,
defaultValue: props.defaultOpen,
});
2022-03-10 18:54:32 +08:00
// const isDestroyed = useDestroyed();
const settingOpen = (
value: boolean,
e?: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLDivElement>,
) => {
setOpen(value, true);
props.onOpenChange?.(value, e);
};
2017-07-07 20:26:08 +08:00
const close = (e: React.MouseEvent<HTMLButtonElement>) => {
settingOpen(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>) => {
settingOpen(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 && open) {
settingOpen(false, e);
}
};
const onOpenChange = (value: boolean) => {
2022-10-01 21:58:46 +08:00
const { disabled = false } = props;
if (disabled) {
return;
}
settingOpen(value);
2018-12-07 20:02:01 +08:00
};
const {
prefixCls: customizePrefixCls,
2022-10-01 21:58:46 +08:00
placement = 'top',
trigger = 'click',
okType = 'primary',
icon = <ExclamationCircleFilled />,
children,
overlayClassName,
...restProps
} = props;
const prefixCls = getPrefixCls('popconfirm', customizePrefixCls);
const overlayClassNames = classNames(prefixCls, overlayClassName);
const [wrapSSR] = usePopconfirmStyle(prefixCls);
return wrapSSR(
2022-05-23 15:41:59 +08:00
<Popover
{...omit(restProps, ['title'])}
2022-10-01 21:58:46 +08:00
trigger={trigger}
placement={placement}
onOpenChange={onOpenChange}
open={open}
2022-10-01 21:58:46 +08:00
ref={ref}
overlayClassName={overlayClassNames}
content={
<Overlay
2022-10-01 21:58:46 +08:00
okType={okType}
icon={icon}
{...props}
prefixCls={prefixCls}
close={close}
onConfirm={onConfirm}
onCancel={onCancel}
/>
}
data-popover-inject
>
{cloneElement(children, {
onKeyDown: (e: React.KeyboardEvent<any>) => {
if (React.isValidElement(children)) {
children?.props.onKeyDown?.(e);
}
onKeyDown(e);
},
})}
</Popover>,
);
}) as React.ForwardRefExoticComponent<
React.PropsWithoutRef<PopconfirmProps> & React.RefAttributes<unknown>
> & {
_InternalPanelDoNotUseOrYouWillBeFired: typeof PurePanel;
};
// We don't care debug panel
/* istanbul ignore next */
Popconfirm._InternalPanelDoNotUseOrYouWillBeFired = PurePanel;
if (process.env.NODE_ENV !== 'production') {
Popconfirm.displayName = 'Popconfirm';
}
export default Popconfirm;