Modal.js
4.67 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _extends from "@babel/runtime/helpers/extends";
var __rest = this && this.__rest || function (s, e) {
var t = {};
for (var p in s) {
if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
}
if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
}
return t;
};
import * as React from 'react';
import Dialog from 'rc-dialog';
import classNames from 'classnames';
import CloseOutlined from '@ant-design/icons/CloseOutlined';
import useModal from './useModal';
import { getConfirmLocale } from './locale';
import Button from '../button';
import { convertLegacyProps } from '../button/button';
import LocaleReceiver from '../locale-provider/LocaleReceiver';
import { ConfigContext } from '../config-provider';
var mousePosition;
export var destroyFns = []; // ref: https://github.com/ant-design/ant-design/issues/15795
var getClickPosition = function getClickPosition(e) {
mousePosition = {
x: e.pageX,
y: e.pageY
}; // 100ms 内发生过点击事件,则从点击位置动画展示
// 否则直接 zoom 展示
// 这样可以兼容非点击方式展开
setTimeout(function () {
mousePosition = null;
}, 100);
}; // 只有点击事件支持从鼠标位置动画展开
if (typeof window !== 'undefined' && window.document && window.document.documentElement) {
document.documentElement.addEventListener('click', getClickPosition, true);
}
var Modal = function Modal(props) {
var _classNames;
var _React$useContext = React.useContext(ConfigContext),
getContextPopupContainer = _React$useContext.getPopupContainer,
getPrefixCls = _React$useContext.getPrefixCls,
direction = _React$useContext.direction;
var handleCancel = function handleCancel(e) {
var onCancel = props.onCancel;
if (onCancel) {
onCancel(e);
}
};
var handleOk = function handleOk(e) {
var onOk = props.onOk;
if (onOk) {
onOk(e);
}
};
var renderFooter = function renderFooter(locale) {
var okText = props.okText,
okType = props.okType,
cancelText = props.cancelText,
confirmLoading = props.confirmLoading;
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, _extends({
onClick: handleCancel
}, props.cancelButtonProps), cancelText || locale.cancelText), /*#__PURE__*/React.createElement(Button, _extends({}, convertLegacyProps(okType), {
loading: confirmLoading,
onClick: handleOk
}, props.okButtonProps), okText || locale.okText));
};
var customizePrefixCls = props.prefixCls,
footer = props.footer,
visible = props.visible,
wrapClassName = props.wrapClassName,
centered = props.centered,
getContainer = props.getContainer,
closeIcon = props.closeIcon,
_props$focusTriggerAf = props.focusTriggerAfterClose,
focusTriggerAfterClose = _props$focusTriggerAf === void 0 ? true : _props$focusTriggerAf,
restProps = __rest(props, ["prefixCls", "footer", "visible", "wrapClassName", "centered", "getContainer", "closeIcon", "focusTriggerAfterClose"]);
var prefixCls = getPrefixCls('modal', customizePrefixCls);
var defaultFooter = /*#__PURE__*/React.createElement(LocaleReceiver, {
componentName: "Modal",
defaultLocale: getConfirmLocale()
}, renderFooter);
var closeIconToRender = /*#__PURE__*/React.createElement("span", {
className: "".concat(prefixCls, "-close-x")
}, closeIcon || /*#__PURE__*/React.createElement(CloseOutlined, {
className: "".concat(prefixCls, "-close-icon")
}));
var wrapClassNameExtended = classNames(wrapClassName, (_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-centered"), !!centered), _defineProperty(_classNames, "".concat(prefixCls, "-wrap-rtl"), direction === 'rtl'), _classNames));
return /*#__PURE__*/React.createElement(Dialog, _extends({}, restProps, {
getContainer: getContainer === undefined ? getContextPopupContainer : getContainer,
prefixCls: prefixCls,
wrapClassName: wrapClassNameExtended,
footer: footer === undefined ? defaultFooter : footer,
visible: visible,
mousePosition: mousePosition,
onClose: handleCancel,
closeIcon: closeIconToRender,
focusTriggerAfterClose: focusTriggerAfterClose
}));
};
Modal.useModal = useModal;
Modal.defaultProps = {
width: 520,
transitionName: 'zoom',
maskTransitionName: 'fade',
confirmLoading: false,
visible: false,
okType: 'primary'
};
export default Modal;