ant-design/components/popconfirm/index.tsx

163 lines
4.6 KiB
TypeScript
Raw Normal View History

import * as React from 'react';
import ExclamationCircleFilled from '@ant-design/icons/ExclamationCircleFilled';
import KeyCode from 'rc-util/lib/KeyCode';
2018-12-07 20:02:01 +08:00
import Tooltip, { AbstractTooltipProps } from '../tooltip';
2017-07-17 09:40:55 +08:00
import Button from '../button';
import { LegacyButtonType, NativeButtonProps, convertLegacyProps } from '../button/button';
import LocaleReceiver from '../locale-provider/LocaleReceiver';
import defaultLocale from '../locale/default';
import { ConfigContext } from '../config-provider';
import { getRenderPropValue, RenderFunction } from '../_util/getRenderPropValue';
import { cloneElement } from '../_util/reactNode';
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?: NativeButtonProps;
cancelButtonProps?: NativeButtonProps;
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 [visible, setVisible] = React.useState(props.visible);
React.useEffect(() => {
if ('visible' in props) {
setVisible(props.visible);
}
}, [props.visible]);
2017-07-07 20:26:08 +08:00
React.useEffect(() => {
if ('defaultVisible' in props) {
setVisible(props.defaultVisible);
}
}, [props.defaultVisible]);
const settingVisible = (
value: boolean,
e?: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLDivElement>,
) => {
if (!('visible' in props)) {
setVisible(value);
}
if (props.onVisibleChange) {
props.onVisibleChange(value, e);
}
};
2017-07-07 20:26:08 +08:00
const onConfirm = (e: React.MouseEvent<HTMLButtonElement>) => {
settingVisible(false, e);
2016-10-24 12:04:26 +08:00
if (props.onConfirm) {
props.onConfirm.call(this, e);
2016-10-24 12:04:26 +08:00
}
2018-12-07 20:02:01 +08:00
};
const onCancel = (e: React.MouseEvent<HTMLButtonElement>) => {
settingVisible(false, e);
2016-10-24 12:04:26 +08:00
if (props.onCancel) {
props.onCancel.call(this, e);
2016-10-24 12:04:26 +08:00
}
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 } = 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`}>
<Button onClick={onCancel} size="small" {...cancelButtonProps}>
{cancelText || popconfirmLocale.cancelText}
</Button>
<Button
onClick={onConfirm}
{...convertLegacyProps(okType)}
size="small"
{...okButtonProps}
>
{okText || popconfirmLocale.okText}
</Button>
2015-06-24 19:20:47 +08:00
</div>
</div>
);
2018-12-07 20:02:01 +08:00
};
const { getPrefixCls } = React.useContext(ConfigContext);
const { prefixCls: customizePrefixCls, placement, children, ...restProps } = props;
const prefixCls = getPrefixCls('popover', customizePrefixCls);
const overlay = (
<LocaleReceiver componentName="Popconfirm" defaultLocale={defaultLocale.Popconfirm}>
{(popconfirmLocale: PopconfirmLocale) => renderOverlay(prefixCls, popconfirmLocale)}
</LocaleReceiver>
);
return (
<Tooltip
{...restProps}
prefixCls={prefixCls}
placement={placement}
onVisibleChange={onVisibleChange}
visible={visible}
overlay={overlay}
ref={ref as any}
>
{cloneElement(children, {
onKeyDown: (e: React.KeyboardEvent<any>) => {
children?.props.onKeyDown?.(e);
onKeyDown(e);
},
})}
</Tooltip>
);
});
Popconfirm.defaultProps = {
transitionName: 'zoom-big',
placement: 'top' as PopconfirmProps['placement'],
trigger: 'click' as PopconfirmProps['trigger'],
okType: 'primary' as PopconfirmProps['okType'],
icon: <ExclamationCircleFilled />,
disabled: false,
};
export default Popconfirm;