2023-08-28 11:54:43 +08:00
|
|
|
import * as React from 'react';
|
2023-07-31 23:55:25 +08:00
|
|
|
import CloseOutlined from '@ant-design/icons/CloseOutlined';
|
2022-06-06 23:39:00 +08:00
|
|
|
import classNames from 'classnames';
|
|
|
|
import Dialog from 'rc-dialog';
|
2023-08-28 11:54:43 +08:00
|
|
|
|
2023-06-16 15:36:28 +08:00
|
|
|
import useClosable from '../_util/hooks/useClosable';
|
2021-02-08 17:09:13 +08:00
|
|
|
import { getTransitionName } from '../_util/motion';
|
2022-06-06 23:39:00 +08:00
|
|
|
import { canUseDocElement } from '../_util/styleChecker';
|
2023-09-11 17:28:04 +08:00
|
|
|
import { devUseWarning } from '../_util/warning';
|
2023-10-19 15:03:20 +08:00
|
|
|
import zIndexContext from '../_util/zindexContext';
|
2023-06-05 09:57:26 +08:00
|
|
|
import { ConfigContext } from '../config-provider';
|
|
|
|
import { NoFormStyle } from '../form/context';
|
|
|
|
import { NoCompactStyle } from '../space/Compact';
|
2023-08-28 11:54:43 +08:00
|
|
|
import { usePanelRef } from '../watermark/context';
|
2023-06-05 09:57:26 +08:00
|
|
|
import type { ModalProps, MousePosition } from './interface';
|
2023-06-06 09:54:14 +08:00
|
|
|
import { Footer, renderCloseIcon } from './shared';
|
2022-04-26 22:45:39 +08:00
|
|
|
import useStyle from './style';
|
2023-10-19 15:03:20 +08:00
|
|
|
import { useZIndex } from '../_util/hooks/useZIndex';
|
2023-11-13 15:31:49 +08:00
|
|
|
import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
|
2016-01-12 17:07:24 +08:00
|
|
|
|
2022-11-15 22:20:02 +08:00
|
|
|
let mousePosition: MousePosition;
|
2016-01-12 17:07:24 +08:00
|
|
|
|
2019-04-18 23:20:13 +08:00
|
|
|
// ref: https://github.com/ant-design/ant-design/issues/15795
|
|
|
|
const getClickPosition = (e: MouseEvent) => {
|
|
|
|
mousePosition = {
|
|
|
|
x: e.pageX,
|
|
|
|
y: e.pageY,
|
|
|
|
};
|
|
|
|
// 100ms 内发生过点击事件,则从点击位置动画展示
|
|
|
|
// 否则直接 zoom 展示
|
|
|
|
// 这样可以兼容非点击方式展开
|
2020-06-08 18:01:50 +08:00
|
|
|
setTimeout(() => {
|
|
|
|
mousePosition = null;
|
|
|
|
}, 100);
|
2019-04-18 23:20:13 +08:00
|
|
|
};
|
|
|
|
|
|
|
|
// 只有点击事件支持从鼠标位置动画展开
|
2021-01-27 14:03:05 +08:00
|
|
|
if (canUseDocElement()) {
|
2020-11-27 15:53:51 +08:00
|
|
|
document.documentElement.addEventListener('click', getClickPosition, true);
|
2019-04-18 23:20:13 +08:00
|
|
|
}
|
|
|
|
|
2022-11-17 14:04:31 +08:00
|
|
|
const Modal: React.FC<ModalProps> = (props) => {
|
2021-07-26 16:47:55 +08:00
|
|
|
const {
|
|
|
|
getPopupContainer: getContextPopupContainer,
|
|
|
|
getPrefixCls,
|
|
|
|
direction,
|
2023-06-27 17:14:08 +08:00
|
|
|
modal,
|
2021-07-26 16:47:55 +08:00
|
|
|
} = React.useContext(ConfigContext);
|
2016-03-03 17:43:38 +08:00
|
|
|
|
2020-05-19 20:15:51 +08:00
|
|
|
const handleCancel = (e: React.MouseEvent<HTMLButtonElement>) => {
|
|
|
|
const { onCancel } = props;
|
2021-02-19 18:26:53 +08:00
|
|
|
onCancel?.(e);
|
2018-12-07 20:02:01 +08:00
|
|
|
};
|
2016-01-12 17:07:24 +08:00
|
|
|
|
2020-05-19 20:15:51 +08:00
|
|
|
const handleOk = (e: React.MouseEvent<HTMLButtonElement>) => {
|
|
|
|
const { onOk } = props;
|
2021-02-19 18:26:53 +08:00
|
|
|
onOk?.(e);
|
2018-12-07 20:02:01 +08:00
|
|
|
};
|
2016-01-12 17:07:24 +08:00
|
|
|
|
2023-09-11 17:28:04 +08:00
|
|
|
if (process.env.NODE_ENV !== 'production') {
|
2023-09-13 22:07:33 +08:00
|
|
|
const warning = devUseWarning('Modal');
|
2023-09-11 17:28:04 +08:00
|
|
|
|
2023-09-25 14:27:41 +08:00
|
|
|
[
|
|
|
|
['visible', 'open'],
|
|
|
|
['bodyStyle', 'styles.body'],
|
|
|
|
['maskStyle', 'styles.mask'],
|
|
|
|
].forEach(([deprecatedName, newName]) => {
|
|
|
|
warning.deprecated(!(deprecatedName in props), deprecatedName, newName);
|
|
|
|
});
|
2023-09-11 17:28:04 +08:00
|
|
|
}
|
2022-08-23 16:55:57 +08:00
|
|
|
|
2020-05-19 20:15:51 +08:00
|
|
|
const {
|
|
|
|
prefixCls: customizePrefixCls,
|
2022-06-11 21:39:58 +08:00
|
|
|
className,
|
2023-01-20 11:03:50 +08:00
|
|
|
rootClassName,
|
2022-10-11 21:33:29 +08:00
|
|
|
open,
|
2020-05-19 20:15:51 +08:00
|
|
|
wrapClassName,
|
|
|
|
centered,
|
|
|
|
getContainer,
|
|
|
|
closeIcon,
|
2023-06-16 15:36:28 +08:00
|
|
|
closable,
|
2020-11-30 16:57:33 +08:00
|
|
|
focusTriggerAfterClose = true,
|
2023-06-27 17:14:08 +08:00
|
|
|
style,
|
2022-09-06 21:46:49 +08:00
|
|
|
// Deprecated
|
|
|
|
visible,
|
|
|
|
|
2022-10-02 16:50:34 +08:00
|
|
|
width = 520,
|
2023-03-13 19:55:59 +08:00
|
|
|
footer,
|
2023-09-25 14:27:41 +08:00
|
|
|
classNames: modalClassNames,
|
|
|
|
styles: modalStyles,
|
2020-05-19 20:15:51 +08:00
|
|
|
...restProps
|
|
|
|
} = props;
|
|
|
|
|
|
|
|
const prefixCls = getPrefixCls('modal', customizePrefixCls);
|
2021-02-08 17:09:13 +08:00
|
|
|
const rootPrefixCls = getPrefixCls();
|
2022-04-26 22:45:39 +08:00
|
|
|
// Style
|
2023-11-13 15:31:49 +08:00
|
|
|
const rootCls = useCSSVarCls(prefixCls);
|
2023-11-29 17:23:45 +08:00
|
|
|
const [wrapCSSVar, hashId] = useStyle(prefixCls, rootCls);
|
2021-02-08 17:09:13 +08:00
|
|
|
|
2020-05-19 20:15:51 +08:00
|
|
|
const wrapClassNameExtended = classNames(wrapClassName, {
|
|
|
|
[`${prefixCls}-centered`]: !!centered,
|
|
|
|
[`${prefixCls}-wrap-rtl`]: direction === 'rtl',
|
|
|
|
});
|
2022-08-24 11:15:25 +08:00
|
|
|
|
2023-08-28 11:54:43 +08:00
|
|
|
const dialogFooter = footer !== null && (
|
|
|
|
<Footer {...props} onOk={handleOk} onCancel={handleCancel} />
|
|
|
|
);
|
2023-06-16 15:36:28 +08:00
|
|
|
const [mergedClosable, mergedCloseIcon] = useClosable(
|
|
|
|
closable,
|
|
|
|
closeIcon,
|
|
|
|
(icon) => renderCloseIcon(prefixCls, icon),
|
|
|
|
<CloseOutlined className={`${prefixCls}-close-icon`} />,
|
|
|
|
true,
|
|
|
|
);
|
|
|
|
|
2023-08-08 16:48:26 +08:00
|
|
|
// ============================ Refs ============================
|
|
|
|
// Select `ant-modal-content` by `panelRef`
|
|
|
|
const panelRef = usePanelRef(`.${prefixCls}-content`);
|
|
|
|
|
2023-10-19 15:03:20 +08:00
|
|
|
// ============================ zIndex ============================
|
|
|
|
const [zIndex, contextZIndex] = useZIndex('Modal', restProps.zIndex);
|
|
|
|
|
2023-08-08 16:48:26 +08:00
|
|
|
// =========================== Render ===========================
|
2023-11-13 15:31:49 +08:00
|
|
|
return wrapCSSVar(
|
2022-11-22 22:52:40 +08:00
|
|
|
<NoCompactStyle>
|
|
|
|
<NoFormStyle status override>
|
2023-10-19 15:03:20 +08:00
|
|
|
<zIndexContext.Provider value={contextZIndex}>
|
|
|
|
<Dialog
|
|
|
|
width={width}
|
|
|
|
{...restProps}
|
|
|
|
zIndex={zIndex}
|
|
|
|
getContainer={getContainer === undefined ? getContextPopupContainer : getContainer}
|
|
|
|
prefixCls={prefixCls}
|
2023-11-13 15:31:49 +08:00
|
|
|
rootClassName={classNames(hashId, rootClassName, rootCls)}
|
2023-10-19 15:03:20 +08:00
|
|
|
footer={dialogFooter}
|
|
|
|
visible={open ?? visible}
|
|
|
|
mousePosition={restProps.mousePosition ?? mousePosition}
|
|
|
|
onClose={handleCancel}
|
|
|
|
closable={mergedClosable}
|
|
|
|
closeIcon={mergedCloseIcon}
|
|
|
|
focusTriggerAfterClose={focusTriggerAfterClose}
|
|
|
|
transitionName={getTransitionName(rootPrefixCls, 'zoom', props.transitionName)}
|
|
|
|
maskTransitionName={getTransitionName(rootPrefixCls, 'fade', props.maskTransitionName)}
|
|
|
|
className={classNames(hashId, className, modal?.className)}
|
|
|
|
style={{ ...modal?.style, ...style }}
|
|
|
|
classNames={{
|
|
|
|
wrapper: wrapClassNameExtended,
|
|
|
|
...modal?.classNames,
|
|
|
|
...modalClassNames,
|
|
|
|
}}
|
|
|
|
styles={{
|
|
|
|
...modal?.styles,
|
|
|
|
...modalStyles,
|
|
|
|
}}
|
|
|
|
panelRef={panelRef}
|
|
|
|
/>
|
|
|
|
</zIndexContext.Provider>
|
2022-11-22 22:52:40 +08:00
|
|
|
</NoFormStyle>
|
|
|
|
</NoCompactStyle>,
|
2020-05-19 20:15:51 +08:00
|
|
|
);
|
|
|
|
};
|
2016-08-29 20:48:47 +08:00
|
|
|
|
2020-05-19 20:15:51 +08:00
|
|
|
export default Modal;
|