mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-13 23:59:12 +08:00
ac5a06027e
This reverts commit ea8ed28209
.
234 lines
7.1 KiB
TypeScript
234 lines
7.1 KiB
TypeScript
import classNames from 'classnames';
|
|
import Dialog from 'rc-dialog';
|
|
import * as React from 'react';
|
|
import type { ButtonProps, LegacyButtonType } from '../button/button';
|
|
import type { DirectionType } from '../config-provider';
|
|
import { ConfigContext } from '../config-provider';
|
|
import { NoFormStyle } from '../form/context';
|
|
import { NoCompactStyle } from '../space/Compact';
|
|
import { getTransitionName } from '../_util/motion';
|
|
import { canUseDocElement } from '../_util/styleChecker';
|
|
import warning from '../_util/warning';
|
|
import { Footer, renderCloseIcon } from './PurePanel';
|
|
import useStyle from './style';
|
|
|
|
type MousePosition = { x: number; y: number } | null;
|
|
|
|
let mousePosition: MousePosition;
|
|
|
|
// ref: https://github.com/ant-design/ant-design/issues/15795
|
|
const getClickPosition = (e: MouseEvent) => {
|
|
mousePosition = {
|
|
x: e.pageX,
|
|
y: e.pageY,
|
|
};
|
|
// 100ms 内发生过点击事件,则从点击位置动画展示
|
|
// 否则直接 zoom 展示
|
|
// 这样可以兼容非点击方式展开
|
|
setTimeout(() => {
|
|
mousePosition = null;
|
|
}, 100);
|
|
};
|
|
|
|
// 只有点击事件支持从鼠标位置动画展开
|
|
if (canUseDocElement()) {
|
|
document.documentElement.addEventListener('click', getClickPosition, true);
|
|
}
|
|
|
|
export interface ModalProps {
|
|
/** Whether the modal dialog is visible or not */
|
|
open?: boolean;
|
|
/** Whether to apply loading visual effect for OK button or not */
|
|
confirmLoading?: boolean;
|
|
/** The modal dialog's title */
|
|
title?: React.ReactNode;
|
|
/** Whether a close (x) button is visible on top right of the modal dialog or not */
|
|
closable?: boolean;
|
|
/** Specify a function that will be called when a user clicks the OK button */
|
|
onOk?: (e: React.MouseEvent<HTMLButtonElement>) => void;
|
|
/** Specify a function that will be called when a user clicks mask, close button on top right or Cancel button */
|
|
onCancel?: (e: React.MouseEvent<HTMLButtonElement>) => void;
|
|
afterClose?: () => void;
|
|
/** Callback when the animation ends when Modal is turned on and off */
|
|
afterOpenChange?: (open: boolean) => void;
|
|
/** Centered Modal */
|
|
centered?: boolean;
|
|
/** Width of the modal dialog */
|
|
width?: string | number;
|
|
/** Footer content */
|
|
footer?: React.ReactNode;
|
|
/** Text of the OK button */
|
|
okText?: React.ReactNode;
|
|
/** Button `type` of the OK button */
|
|
okType?: LegacyButtonType;
|
|
/** Text of the Cancel button */
|
|
cancelText?: React.ReactNode;
|
|
/** Whether to close the modal dialog when the mask (area outside the modal) is clicked */
|
|
maskClosable?: boolean;
|
|
/** Force render Modal */
|
|
forceRender?: boolean;
|
|
okButtonProps?: ButtonProps;
|
|
cancelButtonProps?: ButtonProps;
|
|
destroyOnClose?: boolean;
|
|
style?: React.CSSProperties;
|
|
wrapClassName?: string;
|
|
maskTransitionName?: string;
|
|
transitionName?: string;
|
|
className?: string;
|
|
rootClassName?: string;
|
|
getContainer?: string | HTMLElement | getContainerFunc | false;
|
|
zIndex?: number;
|
|
bodyStyle?: React.CSSProperties;
|
|
maskStyle?: React.CSSProperties;
|
|
mask?: boolean;
|
|
keyboard?: boolean;
|
|
wrapProps?: any;
|
|
prefixCls?: string;
|
|
closeIcon?: React.ReactNode;
|
|
modalRender?: (node: React.ReactNode) => React.ReactNode;
|
|
focusTriggerAfterClose?: boolean;
|
|
children?: React.ReactNode;
|
|
mousePosition?: MousePosition;
|
|
|
|
// Legacy
|
|
/** @deprecated Please use `open` instead. */
|
|
visible?: boolean;
|
|
}
|
|
|
|
type getContainerFunc = () => HTMLElement;
|
|
|
|
export interface ModalFuncProps {
|
|
prefixCls?: string;
|
|
className?: string;
|
|
rootClassName?: string;
|
|
open?: boolean;
|
|
/** @deprecated Please use `open` instead. */
|
|
visible?: boolean;
|
|
title?: React.ReactNode;
|
|
closable?: boolean;
|
|
content?: React.ReactNode;
|
|
// TODO: find out exact types
|
|
onOk?: (...args: any[]) => any;
|
|
onCancel?: (...args: any[]) => any;
|
|
afterClose?: () => void;
|
|
okButtonProps?: ButtonProps;
|
|
cancelButtonProps?: ButtonProps;
|
|
centered?: boolean;
|
|
width?: string | number;
|
|
okText?: React.ReactNode;
|
|
okType?: LegacyButtonType;
|
|
cancelText?: React.ReactNode;
|
|
icon?: React.ReactNode;
|
|
mask?: boolean;
|
|
maskClosable?: boolean;
|
|
zIndex?: number;
|
|
okCancel?: boolean;
|
|
style?: React.CSSProperties;
|
|
wrapClassName?: string;
|
|
maskStyle?: React.CSSProperties;
|
|
type?: 'info' | 'success' | 'error' | 'warn' | 'warning' | 'confirm';
|
|
keyboard?: boolean;
|
|
getContainer?: string | HTMLElement | getContainerFunc | false;
|
|
autoFocusButton?: null | 'ok' | 'cancel';
|
|
transitionName?: string;
|
|
maskTransitionName?: string;
|
|
direction?: DirectionType;
|
|
bodyStyle?: React.CSSProperties;
|
|
closeIcon?: React.ReactNode;
|
|
footer?: React.ReactNode;
|
|
modalRender?: (node: React.ReactNode) => React.ReactNode;
|
|
focusTriggerAfterClose?: boolean;
|
|
}
|
|
|
|
export interface ModalLocale {
|
|
okText: string;
|
|
cancelText: string;
|
|
justOkText: string;
|
|
}
|
|
|
|
const Modal: React.FC<ModalProps> = (props) => {
|
|
const {
|
|
getPopupContainer: getContextPopupContainer,
|
|
getPrefixCls,
|
|
direction,
|
|
} = React.useContext(ConfigContext);
|
|
|
|
const handleCancel = (e: React.MouseEvent<HTMLButtonElement>) => {
|
|
const { onCancel } = props;
|
|
onCancel?.(e);
|
|
};
|
|
|
|
const handleOk = (e: React.MouseEvent<HTMLButtonElement>) => {
|
|
const { onOk } = props;
|
|
onOk?.(e);
|
|
};
|
|
|
|
warning(
|
|
!('visible' in props),
|
|
'Modal',
|
|
`\`visible\` will be removed in next major version, please use \`open\` instead.`,
|
|
);
|
|
|
|
const {
|
|
prefixCls: customizePrefixCls,
|
|
className,
|
|
rootClassName,
|
|
open,
|
|
wrapClassName,
|
|
centered,
|
|
getContainer,
|
|
closeIcon,
|
|
focusTriggerAfterClose = true,
|
|
|
|
// Deprecated
|
|
visible,
|
|
|
|
width = 520,
|
|
footer,
|
|
...restProps
|
|
} = props;
|
|
|
|
const prefixCls = getPrefixCls('modal', customizePrefixCls);
|
|
const rootPrefixCls = getPrefixCls();
|
|
// Style
|
|
const [wrapSSR, hashId] = useStyle(prefixCls);
|
|
|
|
const wrapClassNameExtended = classNames(wrapClassName, {
|
|
[`${prefixCls}-centered`]: !!centered,
|
|
[`${prefixCls}-wrap-rtl`]: direction === 'rtl',
|
|
});
|
|
|
|
if (process.env.NODE_ENV !== 'production') {
|
|
warning(!('visible' in props), 'Modal', '`visible` is deprecated, please use `open` instead.');
|
|
}
|
|
|
|
const dialogFooter =
|
|
footer === undefined ? <Footer {...props} onOk={handleOk} onCancel={handleCancel} /> : footer;
|
|
|
|
return wrapSSR(
|
|
<NoCompactStyle>
|
|
<NoFormStyle status override>
|
|
<Dialog
|
|
width={width}
|
|
{...restProps}
|
|
getContainer={getContainer === undefined ? getContextPopupContainer : getContainer}
|
|
prefixCls={prefixCls}
|
|
rootClassName={classNames(hashId, rootClassName)}
|
|
wrapClassName={wrapClassNameExtended}
|
|
footer={dialogFooter}
|
|
visible={open ?? visible}
|
|
mousePosition={restProps.mousePosition ?? mousePosition}
|
|
onClose={handleCancel}
|
|
closeIcon={renderCloseIcon(prefixCls, closeIcon)}
|
|
focusTriggerAfterClose={focusTriggerAfterClose}
|
|
transitionName={getTransitionName(rootPrefixCls, 'zoom', props.transitionName)}
|
|
maskTransitionName={getTransitionName(rootPrefixCls, 'fade', props.maskTransitionName)}
|
|
className={classNames(hashId, className)}
|
|
/>
|
|
</NoFormStyle>
|
|
</NoCompactStyle>,
|
|
);
|
|
};
|
|
|
|
export default Modal;
|