ant-design/components/modal/Modal.tsx

249 lines
7.2 KiB
TypeScript
Raw Normal View History

import CloseOutlined from '@ant-design/icons/CloseOutlined';
import classNames from 'classnames';
import Dialog from 'rc-dialog';
import * as React from 'react';
use ant design icons 4.0 (#18217) * feat: use @ant-design/icons@4.0 * feat: use createFromIconfontCN to make site works * feat: update doc for Icon * feat: use icon in component Alert * feat: use icon in component Avatar * feat: use icon in component Breadcrumb * feat: use icon in component Button * feat: use icon in component Cascader * feat: use icon in component Collapse * feat: use icon in component Datepicker * feat: use icon in component Dropdown * feat: use icon in component Form * feat: use icon in component Input * feat: use icon in component InputNumber * feat: use icon in component Layout * feat: use icon in component Mention * feat: use icon in component Message * feat: use icon in component Modal * feat: use icon in component Notification * feat: use icon in component PageHeader * feat: use icon in component Pagination * feat: use icon in component Popconfirm * feat: use icon in component Progress * feat: use icon in component Rate * feat: use icon in component Result * feat: use icon in component Select * feat: use icon in component Step * feat: use icon in component Switch * feat: use icon in component Table * feat: use icon in component Tab * feat: use icon in component Tag * feat: handle rest component which using Icon * fix: remove unused vars * feat: use latest alpha ant design icons * fix: failed test in uploadlist.test.js * test: update snapshot for icons * doc: add Icon for site * doc: use @ant-design/icons in site * chore: use latest icons * fix: tslint issue * fix: test cases * fix: types for react * fix: lint rules for import orders * fix: use @ant-design/icons@4.0.0-alpha.5 to avoid insert css in server render * fix: eslint error in demo/**.md * inject antd icons * update snapshot * fix site * doc: update docs * fix: code snippets icon in site * feat: use latest @ant-design/icons * fix: icon props in message
2019-08-13 14:07:17 +08:00
2017-07-17 09:40:55 +08:00
import Button from '../button';
import type { ButtonProps, LegacyButtonType } from '../button/button';
import { convertLegacyProps } from '../button/button';
import type { DirectionType } from '../config-provider';
import { ConfigContext } from '../config-provider';
import { NoFormStyle } from '../form/context';
import LocaleReceiver from '../locale-provider/LocaleReceiver';
import { getTransitionName } from '../_util/motion';
import { canUseDocElement } from '../_util/styleChecker';
import warning from '../_util/warning';
import { getConfirmLocale } from './locale';
2016-01-12 17:07:24 +08:00
type MousePosition = { x: number; y: number } | null;
let mousePosition: MousePosition;
2016-01-12 17:07:24 +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 展示
// 这样可以兼容非点击方式展开
setTimeout(() => {
mousePosition = null;
}, 100);
};
// 只有点击事件支持从鼠标位置动画展开
if (canUseDocElement()) {
2020-11-27 15:53:51 +08:00
document.documentElement.addEventListener('click', getClickPosition, true);
}
export interface ModalProps {
2019-08-05 18:38:10 +08:00
/** 对话框是否可见 */
/**
* @deprecated `visible` is deprecated which will be removed in next major version. Please use
* `open` instead.
*/
visible?: boolean;
open?: boolean;
2019-08-05 18:38:10 +08:00
/** 确定按钮 loading */
confirmLoading?: boolean;
2019-08-05 18:38:10 +08:00
/** 标题 */
2021-11-18 14:39:22 +08:00
title?: React.ReactNode;
2019-08-05 18:38:10 +08:00
/** 是否显示右上角的关闭按钮 */
closable?: boolean;
2019-08-05 18:38:10 +08:00
/** 点击确定回调 */
onOk?: (e: React.MouseEvent<HTMLElement>) => void;
2019-08-05 18:38:10 +08:00
/** 点击模态框右上角叉、取消按钮、Props.maskClosable 值为 true 时的遮罩层或键盘按下 Esc 时的回调 */
onCancel?: (e: React.MouseEvent<HTMLElement>) => void;
afterClose?: () => void;
2018-11-26 19:32:33 +08:00
/** 垂直居中 */
2018-07-31 17:05:07 +08:00
centered?: boolean;
2019-08-05 18:38:10 +08:00
/** 宽度 */
width?: string | number;
2019-08-05 18:38:10 +08:00
/** 底部内容 */
footer?: React.ReactNode;
2019-08-05 18:38:10 +08:00
/** 确认按钮文字 */
okText?: React.ReactNode;
2019-08-05 18:38:10 +08:00
/** 确认按钮类型 */
okType?: LegacyButtonType;
2019-08-05 18:38:10 +08:00
/** 取消按钮文字 */
cancelText?: React.ReactNode;
2019-08-05 18:38:10 +08:00
/** 点击蒙层是否允许关闭 */
maskClosable?: boolean;
2019-08-05 18:38:10 +08:00
/** 强制渲染 Modal */
2019-01-12 13:14:06 +08:00
forceRender?: boolean;
okButtonProps?: ButtonProps;
cancelButtonProps?: ButtonProps;
2017-12-28 15:13:06 +08:00
destroyOnClose?: boolean;
style?: React.CSSProperties;
wrapClassName?: string;
maskTransitionName?: string;
transitionName?: string;
className?: string;
getContainer?: string | HTMLElement | getContainerFunc | false;
2017-09-15 21:41:32 +08:00
zIndex?: number;
2017-12-01 10:29:48 +08:00
bodyStyle?: React.CSSProperties;
maskStyle?: React.CSSProperties;
mask?: boolean;
keyboard?: boolean;
2019-06-24 11:29:58 +08:00
wrapProps?: any;
2018-08-02 18:02:43 +08:00
prefixCls?: string;
closeIcon?: React.ReactNode;
modalRender?: (node: React.ReactNode) => React.ReactNode;
focusTriggerAfterClose?: boolean;
children?: React.ReactNode;
mousePosition?: MousePosition;
}
2019-07-11 21:22:27 +08:00
type getContainerFunc = () => HTMLElement;
export interface ModalFuncProps {
prefixCls?: string;
className?: string;
/**
* @deprecated `visible` is deprecated which will be removed in next major version. Please use
* `open` instead.
*/
visible?: boolean;
open?: boolean;
title?: React.ReactNode;
closable?: boolean;
content?: React.ReactNode;
// TODO: find out exact types
2019-06-24 11:29:58 +08:00
onOk?: (...args: any[]) => any;
onCancel?: (...args: any[]) => any;
afterClose?: () => void;
okButtonProps?: ButtonProps;
cancelButtonProps?: ButtonProps;
2018-07-31 17:05:07 +08:00
centered?: boolean;
width?: string | number;
2019-02-01 00:08:30 +08:00
okText?: React.ReactNode;
okType?: LegacyButtonType;
2019-02-01 00:08:30 +08:00
cancelText?: React.ReactNode;
icon?: React.ReactNode;
mask?: boolean;
maskClosable?: boolean;
2017-09-15 22:51:03 +08:00
zIndex?: number;
okCancel?: boolean;
style?: React.CSSProperties;
wrapClassName?: string;
2018-10-27 18:54:52 +08:00
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;
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);
2016-03-03 17:43:38 +08:00
const handleCancel = (e: React.MouseEvent<HTMLButtonElement>) => {
const { onCancel } = props;
onCancel?.(e);
2018-12-07 20:02:01 +08:00
};
2016-01-12 17:07:24 +08:00
const handleOk = (e: React.MouseEvent<HTMLButtonElement>) => {
const { onOk } = props;
onOk?.(e);
2018-12-07 20:02:01 +08:00
};
2016-01-12 17:07:24 +08:00
warning(
!('visible' in props),
'Modal',
`\`visible\` will be removed in next major version, please use \`open\` instead.`,
);
const {
prefixCls: customizePrefixCls,
footer,
visible,
open = false,
wrapClassName,
centered,
getContainer,
closeIcon,
focusTriggerAfterClose = true,
width = 520,
...restProps
} = props;
const prefixCls = getPrefixCls('modal', customizePrefixCls);
const rootPrefixCls = getPrefixCls();
const defaultFooter = (
<LocaleReceiver componentName="Modal" defaultLocale={getConfirmLocale()}>
{contextLocale => {
const { okText, okType = 'primary', cancelText, confirmLoading = false } = props;
return (
<>
<Button onClick={handleCancel} {...props.cancelButtonProps}>
{cancelText || contextLocale.cancelText}
</Button>
<Button
{...convertLegacyProps(okType)}
loading={confirmLoading}
onClick={handleOk}
{...props.okButtonProps}
>
{okText ?? contextLocale.okText}
</Button>
</>
);
}}
</LocaleReceiver>
);
const closeIconToRender = (
<span className={`${prefixCls}-close-x`}>
{closeIcon || <CloseOutlined className={`${prefixCls}-close-icon`} />}
</span>
);
const wrapClassNameExtended = classNames(wrapClassName, {
[`${prefixCls}-centered`]: !!centered,
[`${prefixCls}-wrap-rtl`]: direction === 'rtl',
});
return (
<NoFormStyle status override>
<Dialog
width={width}
{...restProps}
getContainer={
getContainer === undefined ? (getContextPopupContainer as getContainerFunc) : getContainer
}
prefixCls={prefixCls}
wrapClassName={wrapClassNameExtended}
footer={footer === undefined ? defaultFooter : footer}
visible={open || visible}
mousePosition={restProps.mousePosition ?? mousePosition}
onClose={handleCancel}
closeIcon={closeIconToRender}
focusTriggerAfterClose={focusTriggerAfterClose}
transitionName={getTransitionName(rootPrefixCls, 'zoom', props.transitionName)}
maskTransitionName={getTransitionName(rootPrefixCls, 'fade', props.maskTransitionName)}
/>
</NoFormStyle>
);
};
2016-08-29 20:48:47 +08:00
export default Modal;