@rc-component/dialog 1.0.0 → 1.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/10509781610555453368.hot-update-url-map.json +1 -0
- package/dist/10509781610555453368.hot-update.json +1 -0
- package/dist/11977476592833392720.hot-update-url-map.json +1 -0
- package/dist/11977476592833392720.hot-update.json +1 -0
- package/dist/14397576132152343869.hot-update-url-map.json +1 -0
- package/dist/14397576132152343869.hot-update.json +1 -0
- package/dist/14597408625395534096.hot-update-url-map.json +1 -0
- package/dist/14597408625395534096.hot-update.json +1 -0
- package/dist/15104553912779929595.hot-update-url-map.json +1 -0
- package/dist/15104553912779929595.hot-update.json +1 -0
- package/dist/4361192314875393955.hot-update-url-map.json +1 -0
- package/dist/4361192314875393955.hot-update.json +1 -0
- package/dist/4704580574928883170.hot-update-url-map.json +1 -0
- package/dist/4704580574928883170.hot-update.json +1 -0
- package/dist/5496443382647786649.hot-update-url-map.json +1 -0
- package/dist/5496443382647786649.hot-update.json +1 -0
- package/dist/7338948553039754745.hot-update-url-map.json +1 -0
- package/dist/7338948553039754745.hot-update.json +1 -0
- package/dist/7441995189917427860.hot-update-url-map.json +1 -0
- package/dist/7441995189917427860.hot-update.json +1 -0
- package/dist/8425845753817463333.hot-update-url-map.json +1 -0
- package/dist/8425845753817463333.hot-update.json +1 -0
- package/dist/8742625841545363477.hot-update-url-map.json +1 -0
- package/dist/8742625841545363477.hot-update.json +1 -0
- package/dist/960384830459946830.hot-update-url-map.json +1 -0
- package/dist/960384830459946830.hot-update.json +1 -0
- package/dist/9707589364653732454.hot-update-url-map.json +1 -0
- package/dist/9707589364653732454.hot-update.json +1 -0
- package/dist/common-async.10509781610555453368.hot-update.js +268 -0
- package/dist/common-async.10509781610555453368.hot-update.js.map +1 -0
- package/dist/common-async.11977476592833392720.hot-update.js +395 -0
- package/dist/common-async.11977476592833392720.hot-update.js.map +1 -0
- package/dist/common-async.14397576132152343869.hot-update.js +395 -0
- package/dist/common-async.14397576132152343869.hot-update.js.map +1 -0
- package/dist/common-async.14597408625395534096.hot-update.js +268 -0
- package/dist/common-async.14597408625395534096.hot-update.js.map +1 -0
- package/dist/common-async.15104553912779929595.hot-update.js +268 -0
- package/dist/common-async.15104553912779929595.hot-update.js.map +1 -0
- package/dist/common-async.4361192314875393955.hot-update.js +268 -0
- package/dist/common-async.4361192314875393955.hot-update.js.map +1 -0
- package/dist/common-async.4704580574928883170.hot-update.js +268 -0
- package/dist/common-async.4704580574928883170.hot-update.js.map +1 -0
- package/dist/common-async.5496443382647786649.hot-update.js +391 -0
- package/dist/common-async.5496443382647786649.hot-update.js.map +1 -0
- package/dist/common-async.7338948553039754745.hot-update.js +395 -0
- package/dist/common-async.7338948553039754745.hot-update.js.map +1 -0
- package/dist/common-async.7441995189917427860.hot-update.js +394 -0
- package/dist/common-async.7441995189917427860.hot-update.js.map +1 -0
- package/dist/common-async.8425845753817463333.hot-update.js +268 -0
- package/dist/common-async.8425845753817463333.hot-update.js.map +1 -0
- package/dist/common-async.8742625841545363477.hot-update.js +268 -0
- package/dist/common-async.8742625841545363477.hot-update.js.map +1 -0
- package/dist/common-async.960384830459946830.hot-update.js +268 -0
- package/dist/common-async.960384830459946830.hot-update.js.map +1 -0
- package/dist/common-async.9707589364653732454.hot-update.js +268 -0
- package/dist/common-async.9707589364653732454.hot-update.js.map +1 -0
- package/dist/common-async.js +1180 -0
- package/dist/common-async.js.map +1 -0
- package/dist/demos-async.7338948553039754745.hot-update.js +395 -0
- package/dist/demos-async.7338948553039754745.hot-update.js.map +1 -0
- package/dist/demos-async.css +396 -0
- package/dist/demos-async.css.map +1 -0
- package/dist/demos-async.js +1242 -0
- package/dist/demos-async.js.map +1 -0
- package/dist/docs_changelog_md-async.js +2159 -0
- package/dist/docs_changelog_md-async.js.map +1 -0
- package/dist/docs_demo_ant-design_md-async.js +119 -0
- package/dist/docs_demo_ant-design_md-async.js.map +1 -0
- package/dist/docs_demo_bootstrap_md-async.js +119 -0
- package/dist/docs_demo_bootstrap_md-async.js.map +1 -0
- package/dist/docs_demo_draggable_md-async.js +119 -0
- package/dist/docs_demo_draggable_md-async.js.map +1 -0
- package/dist/docs_demo_multiple-Portal_md-async.js +119 -0
- package/dist/docs_demo_multiple-Portal_md-async.js.map +1 -0
- package/dist/docs_demo_pure_md-async.js +119 -0
- package/dist/docs_demo_pure_md-async.js.map +1 -0
- package/dist/docs_index_md-async.js +1717 -0
- package/dist/docs_index_md-async.js.map +1 -0
- package/dist/dumi__tmp__dumi__theme__ContextWrapper-async.js +201 -0
- package/dist/dumi__tmp__dumi__theme__ContextWrapper-async.js.map +1 -0
- package/dist/meta__docs-async.7338948553039754745.hot-update.js +395 -0
- package/dist/meta__docs-async.7338948553039754745.hot-update.js.map +1 -0
- package/dist/meta__docs-async.css +396 -0
- package/dist/meta__docs-async.css.map +1 -0
- package/dist/meta__docs-async.js +2391 -0
- package/dist/meta__docs-async.js.map +1 -0
- package/dist/nm__dumi__dist__client__pages__404-async.js +69 -0
- package/dist/nm__dumi__dist__client__pages__404-async.js.map +1 -0
- package/dist/nm__dumi__dist__client__pages__Demo__index-async.js +63 -0
- package/dist/nm__dumi__dist__client__pages__Demo__index-async.js.map +1 -0
- package/dist/node_modules__dumi_2_4_17_dumi_dist_client_misc_reactDemoCompiler_js-async.js +368 -0
- package/dist/node_modules__dumi_2_4_17_dumi_dist_client_misc_reactDemoCompiler_js-async.js.map +1 -0
- package/dist/node_modules__dumi_2_4_17_dumi_theme-default_layouts_DocLayout_index_js-async.js +1077 -0
- package/dist/node_modules__dumi_2_4_17_dumi_theme-default_layouts_DocLayout_index_js-async.js.map +1 -0
- package/dist/node_modules__react-dom_18_3_1_react-dom_server_browser_js-async.js +18 -0
- package/dist/node_modules__react-dom_18_3_1_react-dom_server_browser_js-async.js.map +1 -0
- package/dist/umi.css +1302 -0
- package/dist/umi.css.map +1 -0
- package/dist/umi.js +80442 -0
- package/dist/umi.js.map +1 -0
- package/dist/vendors-async.css +22545 -0
- package/dist/vendors-async.css.map +1 -0
- package/dist/vendors-async.js +53289 -0
- package/dist/vendors-async.js.map +1 -0
- package/es/Dialog/Content/MemoChildren.js +5 -7
- package/es/Dialog/Content/Panel.d.ts +2 -2
- package/es/Dialog/Content/Panel.js +89 -78
- package/es/Dialog/Content/index.d.ts +4 -1
- package/es/Dialog/Content/index.js +45 -37
- package/es/Dialog/Mask.js +23 -20
- package/es/Dialog/index.js +97 -93
- package/es/DialogWrap.js +17 -22
- package/es/IDialogPropTypes.d.ts +2 -1
- package/es/context.js +1 -1
- package/es/util.js +9 -9
- package/lib/Dialog/Content/MemoChildren.js +7 -10
- package/lib/Dialog/Content/Panel.d.ts +2 -2
- package/lib/Dialog/Content/Panel.js +93 -83
- package/lib/Dialog/Content/index.d.ts +4 -1
- package/lib/Dialog/Content/index.js +49 -42
- package/lib/Dialog/Mask.js +27 -25
- package/lib/Dialog/index.js +103 -100
- package/lib/DialogWrap.js +21 -27
- package/lib/IDialogPropTypes.d.ts +2 -1
- package/lib/context.js +3 -4
- package/lib/index.js +2 -2
- package/lib/util.js +9 -9
- package/package.json +11 -16
package/lib/Dialog/index.js
CHANGED
|
@@ -1,77 +1,71 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
5
3
|
Object.defineProperty(exports, "__esModule", {
|
|
6
4
|
value: true
|
|
7
5
|
});
|
|
8
6
|
exports.default = void 0;
|
|
9
|
-
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
10
|
-
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
|
|
11
|
-
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
12
7
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
13
|
-
var _contains = _interopRequireDefault(require("rc-util/lib/Dom/contains"));
|
|
14
|
-
var _useId = _interopRequireDefault(require("rc-util/lib/hooks/useId"));
|
|
15
|
-
var _KeyCode = _interopRequireDefault(require("rc-util/lib/KeyCode"));
|
|
16
|
-
var _pickAttrs = _interopRequireDefault(require("rc-util/lib/pickAttrs"));
|
|
8
|
+
var _contains = _interopRequireDefault(require("@rc-component/util/lib/Dom/contains"));
|
|
9
|
+
var _useId = _interopRequireDefault(require("@rc-component/util/lib/hooks/useId"));
|
|
10
|
+
var _KeyCode = _interopRequireDefault(require("@rc-component/util/lib/KeyCode"));
|
|
11
|
+
var _pickAttrs = _interopRequireDefault(require("@rc-component/util/lib/pickAttrs"));
|
|
17
12
|
var _react = _interopRequireWildcard(require("react"));
|
|
18
13
|
var React = _react;
|
|
19
14
|
var _util = require("../util");
|
|
20
15
|
var _Content = _interopRequireDefault(require("./Content"));
|
|
21
16
|
var _Mask = _interopRequireDefault(require("./Mask"));
|
|
22
|
-
var _warning = require("rc-util/lib/warning");
|
|
23
|
-
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function
|
|
24
|
-
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" !=
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
keyboard =
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
maskClosable =
|
|
51
|
-
maskStyle
|
|
52
|
-
maskProps
|
|
53
|
-
rootClassName
|
|
54
|
-
|
|
55
|
-
|
|
17
|
+
var _warning = require("@rc-component/util/lib/warning");
|
|
18
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
19
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
20
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
21
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
22
|
+
const Dialog = props => {
|
|
23
|
+
const {
|
|
24
|
+
prefixCls = 'rc-dialog',
|
|
25
|
+
zIndex,
|
|
26
|
+
visible = false,
|
|
27
|
+
keyboard = true,
|
|
28
|
+
focusTriggerAfterClose = true,
|
|
29
|
+
// scrollLocker,
|
|
30
|
+
// Wrapper
|
|
31
|
+
wrapStyle,
|
|
32
|
+
wrapClassName,
|
|
33
|
+
wrapProps,
|
|
34
|
+
onClose,
|
|
35
|
+
afterOpenChange,
|
|
36
|
+
afterClose,
|
|
37
|
+
// Dialog
|
|
38
|
+
transitionName,
|
|
39
|
+
animation,
|
|
40
|
+
closable = true,
|
|
41
|
+
// Mask
|
|
42
|
+
mask = true,
|
|
43
|
+
maskTransitionName,
|
|
44
|
+
maskAnimation,
|
|
45
|
+
maskClosable = true,
|
|
46
|
+
maskStyle,
|
|
47
|
+
maskProps,
|
|
48
|
+
rootClassName,
|
|
49
|
+
rootStyle,
|
|
50
|
+
classNames: modalClassNames,
|
|
51
|
+
styles: modalStyles
|
|
52
|
+
} = props;
|
|
56
53
|
if (process.env.NODE_ENV !== 'production') {
|
|
57
|
-
['wrapStyle', 'bodyStyle', 'maskStyle'].forEach(
|
|
54
|
+
['wrapStyle', 'bodyStyle', 'maskStyle'].forEach(prop => {
|
|
58
55
|
// (prop in props) && console.error(`Warning: ${prop} is deprecated, please use styles instead.`)
|
|
59
|
-
(0, _warning.warning)(!(prop in props),
|
|
56
|
+
(0, _warning.warning)(!(prop in props), `${prop} is deprecated, please use styles instead.`);
|
|
60
57
|
});
|
|
61
58
|
if ('wrapClassName' in props) {
|
|
62
|
-
(0, _warning.warning)(false,
|
|
59
|
+
(0, _warning.warning)(false, `wrapClassName is deprecated, please use classNames instead.`);
|
|
63
60
|
}
|
|
64
61
|
}
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
_React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
|
|
70
|
-
animatedVisible = _React$useState2[0],
|
|
71
|
-
setAnimatedVisible = _React$useState2[1];
|
|
62
|
+
const lastOutSideActiveElementRef = (0, _react.useRef)();
|
|
63
|
+
const wrapperRef = (0, _react.useRef)();
|
|
64
|
+
const contentRef = (0, _react.useRef)();
|
|
65
|
+
const [animatedVisible, setAnimatedVisible] = React.useState(visible);
|
|
72
66
|
|
|
73
67
|
// ========================== Init ==========================
|
|
74
|
-
|
|
68
|
+
const ariaId = (0, _useId.default)();
|
|
75
69
|
function saveLastOutSideActiveElementRef() {
|
|
76
70
|
if (!(0, _contains.default)(wrapperRef.current, document.activeElement)) {
|
|
77
71
|
lastOutSideActiveElementRef.current = document.activeElement;
|
|
@@ -79,61 +73,66 @@ var Dialog = function Dialog(props) {
|
|
|
79
73
|
}
|
|
80
74
|
function focusDialogContent() {
|
|
81
75
|
if (!(0, _contains.default)(wrapperRef.current, document.activeElement)) {
|
|
82
|
-
|
|
83
|
-
(_contentRef$current = contentRef.current) === null || _contentRef$current === void 0 || _contentRef$current.focus();
|
|
76
|
+
contentRef.current?.focus();
|
|
84
77
|
}
|
|
85
78
|
}
|
|
86
79
|
|
|
87
80
|
// ========================= Events =========================
|
|
81
|
+
// Close action will trigger by:
|
|
82
|
+
// 1. When hide motion end
|
|
83
|
+
// 2. Controlled `open` to `false` immediately after set to `true` which will not trigger motion
|
|
84
|
+
function doClose() {
|
|
85
|
+
// Clean up scroll bar & focus back
|
|
86
|
+
setAnimatedVisible(false);
|
|
87
|
+
if (mask && lastOutSideActiveElementRef.current && focusTriggerAfterClose) {
|
|
88
|
+
try {
|
|
89
|
+
lastOutSideActiveElementRef.current.focus({
|
|
90
|
+
preventScroll: true
|
|
91
|
+
});
|
|
92
|
+
} catch (e) {
|
|
93
|
+
// Do nothing
|
|
94
|
+
}
|
|
95
|
+
lastOutSideActiveElementRef.current = null;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
// Trigger afterClose only when change visible from true to false
|
|
99
|
+
if (animatedVisible) {
|
|
100
|
+
afterClose?.();
|
|
101
|
+
}
|
|
102
|
+
}
|
|
88
103
|
function onDialogVisibleChanged(newVisible) {
|
|
89
104
|
// Try to focus
|
|
90
105
|
if (newVisible) {
|
|
91
106
|
focusDialogContent();
|
|
92
107
|
} else {
|
|
93
|
-
|
|
94
|
-
setAnimatedVisible(false);
|
|
95
|
-
if (mask && lastOutSideActiveElementRef.current && focusTriggerAfterClose) {
|
|
96
|
-
try {
|
|
97
|
-
lastOutSideActiveElementRef.current.focus({
|
|
98
|
-
preventScroll: true
|
|
99
|
-
});
|
|
100
|
-
} catch (e) {
|
|
101
|
-
// Do nothing
|
|
102
|
-
}
|
|
103
|
-
lastOutSideActiveElementRef.current = null;
|
|
104
|
-
}
|
|
105
|
-
|
|
106
|
-
// Trigger afterClose only when change visible from true to false
|
|
107
|
-
if (animatedVisible) {
|
|
108
|
-
afterClose === null || afterClose === void 0 || afterClose();
|
|
109
|
-
}
|
|
108
|
+
doClose();
|
|
110
109
|
}
|
|
111
|
-
afterOpenChange
|
|
110
|
+
afterOpenChange?.(newVisible);
|
|
112
111
|
}
|
|
113
112
|
function onInternalClose(e) {
|
|
114
|
-
onClose
|
|
113
|
+
onClose?.(e);
|
|
115
114
|
}
|
|
116
115
|
|
|
117
116
|
// >>> Content
|
|
118
|
-
|
|
119
|
-
|
|
117
|
+
const contentClickRef = (0, _react.useRef)(false);
|
|
118
|
+
const contentTimeoutRef = (0, _react.useRef)();
|
|
120
119
|
|
|
121
120
|
// We need record content click incase content popup out of dialog
|
|
122
|
-
|
|
121
|
+
const onContentMouseDown = () => {
|
|
123
122
|
clearTimeout(contentTimeoutRef.current);
|
|
124
123
|
contentClickRef.current = true;
|
|
125
124
|
};
|
|
126
|
-
|
|
127
|
-
contentTimeoutRef.current = setTimeout(
|
|
125
|
+
const onContentMouseUp = () => {
|
|
126
|
+
contentTimeoutRef.current = setTimeout(() => {
|
|
128
127
|
contentClickRef.current = false;
|
|
129
128
|
});
|
|
130
129
|
};
|
|
131
130
|
|
|
132
131
|
// >>> Wrapper
|
|
133
132
|
// Close only when element not on dialog
|
|
134
|
-
|
|
133
|
+
let onWrapperClick = null;
|
|
135
134
|
if (maskClosable) {
|
|
136
|
-
onWrapperClick =
|
|
135
|
+
onWrapperClick = e => {
|
|
137
136
|
if (contentClickRef.current) {
|
|
138
137
|
contentClickRef.current = false;
|
|
139
138
|
} else if (wrapperRef.current === e.target) {
|
|
@@ -155,47 +154,51 @@ var Dialog = function Dialog(props) {
|
|
|
155
154
|
}
|
|
156
155
|
|
|
157
156
|
// ========================= Effect =========================
|
|
158
|
-
(0, _react.useEffect)(
|
|
157
|
+
(0, _react.useEffect)(() => {
|
|
159
158
|
if (visible) {
|
|
160
159
|
setAnimatedVisible(true);
|
|
161
160
|
saveLastOutSideActiveElementRef();
|
|
161
|
+
} else if (animatedVisible && contentRef.current.enableMotion() && !contentRef.current.inMotion()) {
|
|
162
|
+
doClose();
|
|
162
163
|
}
|
|
163
164
|
}, [visible]);
|
|
164
165
|
|
|
165
166
|
// Remove direct should also check the scroll bar update
|
|
166
|
-
(0, _react.useEffect)(
|
|
167
|
-
|
|
168
|
-
clearTimeout(contentTimeoutRef.current);
|
|
169
|
-
};
|
|
167
|
+
(0, _react.useEffect)(() => () => {
|
|
168
|
+
clearTimeout(contentTimeoutRef.current);
|
|
170
169
|
}, []);
|
|
171
|
-
|
|
172
|
-
zIndex
|
|
173
|
-
|
|
170
|
+
const mergedStyle = {
|
|
171
|
+
zIndex,
|
|
172
|
+
...wrapStyle,
|
|
173
|
+
...modalStyles?.wrapper,
|
|
174
174
|
display: !animatedVisible ? 'none' : null
|
|
175
|
-
}
|
|
175
|
+
};
|
|
176
176
|
|
|
177
177
|
// ========================= Render =========================
|
|
178
|
-
return /*#__PURE__*/React.createElement("div", (
|
|
179
|
-
className: (0, _classnames.default)(
|
|
178
|
+
return /*#__PURE__*/React.createElement("div", _extends({
|
|
179
|
+
className: (0, _classnames.default)(`${prefixCls}-root`, rootClassName),
|
|
180
|
+
style: rootStyle
|
|
180
181
|
}, (0, _pickAttrs.default)(props, {
|
|
181
182
|
data: true
|
|
182
183
|
})), /*#__PURE__*/React.createElement(_Mask.default, {
|
|
183
184
|
prefixCls: prefixCls,
|
|
184
185
|
visible: mask && visible,
|
|
185
186
|
motionName: (0, _util.getMotionName)(prefixCls, maskTransitionName, maskAnimation),
|
|
186
|
-
style:
|
|
187
|
-
zIndex
|
|
188
|
-
|
|
187
|
+
style: {
|
|
188
|
+
zIndex,
|
|
189
|
+
...maskStyle,
|
|
190
|
+
...modalStyles?.mask
|
|
191
|
+
},
|
|
189
192
|
maskProps: maskProps,
|
|
190
|
-
className: modalClassNames
|
|
191
|
-
}), /*#__PURE__*/React.createElement("div", (
|
|
193
|
+
className: modalClassNames?.mask
|
|
194
|
+
}), /*#__PURE__*/React.createElement("div", _extends({
|
|
192
195
|
tabIndex: -1,
|
|
193
196
|
onKeyDown: onWrapperKeyDown,
|
|
194
|
-
className: (0, _classnames.default)(
|
|
197
|
+
className: (0, _classnames.default)(`${prefixCls}-wrap`, wrapClassName, modalClassNames?.wrapper),
|
|
195
198
|
ref: wrapperRef,
|
|
196
199
|
onClick: onWrapperClick,
|
|
197
200
|
style: mergedStyle
|
|
198
|
-
}, wrapProps), /*#__PURE__*/React.createElement(_Content.default, (
|
|
201
|
+
}, wrapProps), /*#__PURE__*/React.createElement(_Content.default, _extends({}, props, {
|
|
199
202
|
onMouseDown: onContentMouseDown,
|
|
200
203
|
onMouseUp: onContentMouseUp,
|
|
201
204
|
ref: contentRef,
|
package/lib/DialogWrap.js
CHANGED
|
@@ -1,19 +1,17 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
5
3
|
Object.defineProperty(exports, "__esModule", {
|
|
6
4
|
value: true
|
|
7
5
|
});
|
|
8
6
|
exports.default = void 0;
|
|
9
|
-
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
10
|
-
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
11
7
|
var _portal = _interopRequireDefault(require("@rc-component/portal"));
|
|
12
8
|
var React = _interopRequireWildcard(require("react"));
|
|
13
9
|
var _context = require("./context");
|
|
14
10
|
var _Dialog = _interopRequireDefault(require("./Dialog"));
|
|
15
|
-
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function
|
|
16
|
-
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" !=
|
|
11
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
12
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
13
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
14
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
17
15
|
// fix issue #10656
|
|
18
16
|
/*
|
|
19
17
|
* getContainer remarks
|
|
@@ -23,24 +21,20 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
|
|
|
23
21
|
* So here should add a child (div element) to custom container.
|
|
24
22
|
* */
|
|
25
23
|
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
destroyOnClose =
|
|
32
|
-
|
|
33
|
-
panelRef
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
panel: panelRef
|
|
41
|
-
};
|
|
42
|
-
}, [panelRef]);
|
|
43
|
-
React.useEffect(function () {
|
|
24
|
+
const DialogWrap = props => {
|
|
25
|
+
const {
|
|
26
|
+
visible,
|
|
27
|
+
getContainer,
|
|
28
|
+
forceRender,
|
|
29
|
+
destroyOnClose = false,
|
|
30
|
+
afterClose,
|
|
31
|
+
panelRef
|
|
32
|
+
} = props;
|
|
33
|
+
const [animatedVisible, setAnimatedVisible] = React.useState(visible);
|
|
34
|
+
const refContext = React.useMemo(() => ({
|
|
35
|
+
panel: panelRef
|
|
36
|
+
}), [panelRef]);
|
|
37
|
+
React.useEffect(() => {
|
|
44
38
|
if (visible) {
|
|
45
39
|
setAnimatedVisible(true);
|
|
46
40
|
}
|
|
@@ -57,10 +51,10 @@ var DialogWrap = function DialogWrap(props) {
|
|
|
57
51
|
autoDestroy: false,
|
|
58
52
|
getContainer: getContainer,
|
|
59
53
|
autoLock: visible || animatedVisible
|
|
60
|
-
}, /*#__PURE__*/React.createElement(_Dialog.default, (
|
|
54
|
+
}, /*#__PURE__*/React.createElement(_Dialog.default, _extends({}, props, {
|
|
61
55
|
destroyOnClose: destroyOnClose,
|
|
62
|
-
afterClose:
|
|
63
|
-
|
|
56
|
+
afterClose: () => {
|
|
57
|
+
afterClose?.();
|
|
64
58
|
setAnimatedVisible(false);
|
|
65
59
|
}
|
|
66
60
|
}))));
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { GetContainer } from 'rc-util/lib/PortalWrapper';
|
|
1
|
+
import type { GetContainer } from '@rc-component/util/lib/PortalWrapper';
|
|
2
2
|
import type { CSSProperties, ReactNode, SyntheticEvent } from 'react';
|
|
3
3
|
export type SemanticName = 'header' | 'body' | 'footer' | 'section' | 'title' | 'wrapper' | 'mask';
|
|
4
4
|
export type ModalClassNames = Partial<Record<SemanticName, string>>;
|
|
@@ -7,6 +7,7 @@ export type IDialogPropTypes = {
|
|
|
7
7
|
className?: string;
|
|
8
8
|
keyboard?: boolean;
|
|
9
9
|
style?: CSSProperties;
|
|
10
|
+
rootStyle?: CSSProperties;
|
|
10
11
|
mask?: boolean;
|
|
11
12
|
children?: React.ReactNode;
|
|
12
13
|
afterClose?: () => any;
|
package/lib/context.js
CHANGED
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
4
3
|
Object.defineProperty(exports, "__esModule", {
|
|
5
4
|
value: true
|
|
6
5
|
});
|
|
7
6
|
exports.RefContext = void 0;
|
|
8
7
|
var React = _interopRequireWildcard(require("react"));
|
|
9
|
-
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function
|
|
10
|
-
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" !=
|
|
11
|
-
|
|
8
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
9
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
10
|
+
const RefContext = exports.RefContext = /*#__PURE__*/React.createContext({});
|
package/lib/index.js
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
3
|
Object.defineProperty(exports, "__esModule", {
|
|
5
4
|
value: true
|
|
6
5
|
});
|
|
7
6
|
Object.defineProperty(exports, "Panel", {
|
|
8
7
|
enumerable: true,
|
|
9
|
-
get: function
|
|
8
|
+
get: function () {
|
|
10
9
|
return _Panel.default;
|
|
11
10
|
}
|
|
12
11
|
});
|
|
13
12
|
exports.default = void 0;
|
|
14
13
|
var _DialogWrap = _interopRequireDefault(require("./DialogWrap"));
|
|
15
14
|
var _Panel = _interopRequireDefault(require("./Dialog/Content/Panel"));
|
|
15
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
16
16
|
var _default = exports.default = _DialogWrap.default;
|
package/lib/util.js
CHANGED
|
@@ -7,19 +7,19 @@ exports.getMotionName = getMotionName;
|
|
|
7
7
|
exports.offset = offset;
|
|
8
8
|
// =============================== Motion ===============================
|
|
9
9
|
function getMotionName(prefixCls, transitionName, animationName) {
|
|
10
|
-
|
|
10
|
+
let motionName = transitionName;
|
|
11
11
|
if (!motionName && animationName) {
|
|
12
|
-
motionName =
|
|
12
|
+
motionName = `${prefixCls}-${animationName}`;
|
|
13
13
|
}
|
|
14
14
|
return motionName;
|
|
15
15
|
}
|
|
16
16
|
|
|
17
17
|
// =============================== Offset ===============================
|
|
18
18
|
function getScroll(w, top) {
|
|
19
|
-
|
|
20
|
-
|
|
19
|
+
let ret = w[`page${top ? 'Y' : 'X'}Offset`];
|
|
20
|
+
const method = `scroll${top ? 'Top' : 'Left'}`;
|
|
21
21
|
if (typeof ret !== 'number') {
|
|
22
|
-
|
|
22
|
+
const d = w.document;
|
|
23
23
|
ret = d.documentElement[method];
|
|
24
24
|
if (typeof ret !== 'number') {
|
|
25
25
|
ret = d.body[method];
|
|
@@ -28,13 +28,13 @@ function getScroll(w, top) {
|
|
|
28
28
|
return ret;
|
|
29
29
|
}
|
|
30
30
|
function offset(el) {
|
|
31
|
-
|
|
32
|
-
|
|
31
|
+
const rect = el.getBoundingClientRect();
|
|
32
|
+
const pos = {
|
|
33
33
|
left: rect.left,
|
|
34
34
|
top: rect.top
|
|
35
35
|
};
|
|
36
|
-
|
|
37
|
-
|
|
36
|
+
const doc = el.ownerDocument;
|
|
37
|
+
const w = doc.defaultView || doc.parentWindow;
|
|
38
38
|
pos.left += getScroll(w);
|
|
39
39
|
pos.top += getScroll(w, true);
|
|
40
40
|
return pos;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rc-component/dialog",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.1.0",
|
|
4
4
|
"description": "dialog ui component for react",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
"lint:tsc": "tsc -p tsconfig.json --noEmit",
|
|
38
38
|
"now-build": "npm run docs:build",
|
|
39
39
|
"prepare": "husky install",
|
|
40
|
-
"prepublishOnly": "npm run compile && np
|
|
40
|
+
"prepublishOnly": "npm run compile && rc-np",
|
|
41
41
|
"prettier": "prettier --write \"**/*.{ts,tsx,js,jsx,json,md}\"",
|
|
42
42
|
"start": "dumi dev",
|
|
43
43
|
"test": "rc-test"
|
|
@@ -49,17 +49,16 @@
|
|
|
49
49
|
]
|
|
50
50
|
},
|
|
51
51
|
"dependencies": {
|
|
52
|
-
"@babel/runtime": "^7.10.1",
|
|
53
52
|
"@rc-component/portal": "^1.0.0-8",
|
|
53
|
+
"@rc-component/util": "^1.0.1",
|
|
54
54
|
"classnames": "^2.2.6",
|
|
55
|
-
"rc-motion": "^
|
|
56
|
-
"rc-util": "^5.21.0"
|
|
55
|
+
"@rc-component/motion": "^1.1.3"
|
|
57
56
|
},
|
|
58
57
|
"devDependencies": {
|
|
59
|
-
"@rc-component/father-plugin": "^
|
|
58
|
+
"@rc-component/father-plugin": "^2.0.2",
|
|
59
|
+
"@rc-component/np": "^1.0.3",
|
|
60
60
|
"@testing-library/jest-dom": "^6.1.6",
|
|
61
|
-
"@testing-library/react": "^
|
|
62
|
-
"@types/enzyme": "^3.10.7",
|
|
61
|
+
"@testing-library/react": "^13.0.0",
|
|
63
62
|
"@types/jest": "^29.4.0",
|
|
64
63
|
"@types/keyv": "3.1.4",
|
|
65
64
|
"@types/react": "^18.0.24",
|
|
@@ -69,9 +68,6 @@
|
|
|
69
68
|
"cheerio": "1.0.0-rc.12",
|
|
70
69
|
"cross-env": "^7.0.0",
|
|
71
70
|
"dumi": "^2.1.3",
|
|
72
|
-
"enzyme": "^3.1.1",
|
|
73
|
-
"enzyme-adapter-react-16": "^1.0.1",
|
|
74
|
-
"enzyme-to-json": "^3.1.2",
|
|
75
71
|
"eslint": "^7.1.0",
|
|
76
72
|
"eslint-config-airbnb": "^19.0.4",
|
|
77
73
|
"eslint-plugin-react": "^7.20.6",
|
|
@@ -81,18 +77,17 @@
|
|
|
81
77
|
"husky": "^8.0.3",
|
|
82
78
|
"less": "^4.1.3",
|
|
83
79
|
"lint-staged": "^15.2.0",
|
|
84
|
-
"np": "^10.0.5",
|
|
85
80
|
"prettier": "^3.2.1",
|
|
86
81
|
"rc-drawer": "^7.0.0",
|
|
87
82
|
"rc-select": "^14.11.0",
|
|
88
83
|
"rc-test": "^7.0.14",
|
|
89
|
-
"react": "^
|
|
90
|
-
"react-dom": "^
|
|
84
|
+
"react": "^18.0.0",
|
|
85
|
+
"react-dom": "^18.0.0",
|
|
91
86
|
"react-draggable": "^4.4.3",
|
|
92
87
|
"typescript": "^5.4.3"
|
|
93
88
|
},
|
|
94
89
|
"peerDependencies": {
|
|
95
|
-
"react": ">=
|
|
96
|
-
"react-dom": ">=
|
|
90
|
+
"react": ">=18.0.0",
|
|
91
|
+
"react-dom": ">=18.0.0"
|
|
97
92
|
}
|
|
98
93
|
}
|