foxit-component 1.0.5-alpha.6 → 1.0.5-alpha.7
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/es/Modal/Modal.d.ts +1 -0
- package/es/Modal/Modal.js +4 -4
- package/es/Modal/ModalTemp.d.ts +1 -0
- package/es/Modal/ModalTemp.js +4 -4
- package/package.json +1 -1
package/es/Modal/Modal.d.ts
CHANGED
package/es/Modal/Modal.js
CHANGED
|
@@ -57,12 +57,12 @@ var ModalContent = function (_a) {
|
|
|
57
57
|
} }, { children: [jsxs("div", __assign({ className: "foxit-modal-head" }, { children: [jsx("div", __assign({ className: "foxit-modal-title" }, { children: title })), closable && (jsx("div", __assign({ onClick: onCancel, className: type === 'success' ? 'foxit-modal-success-icon' : 'foxit-modal-close-button' }, { children: type === 'success' ? (jsx(Icon, { name: "FireWorkColoursOutlined" })) : (jsx(Icon, { name: "CloseOutlined" })) })))] })), jsx("div", __assign({ className: "foxit-modal-children" }, { children: children })), footer && jsx("div", __assign({ className: "foxit-modal-footer" }, { children: footer })), !footer && (jsxs("div", __assign({ className: "foxit-modal-footer" }, { children: [onCancelText && (jsx(Button, __assign({ size: "medium", onClick: handleCancel, loading: cancelLoading }, cancelButtonProps, { children: onCancelText }))), onOkText && (jsx(Button, __assign({ primary: true, size: "medium", onClick: handleOk, loading: loading }, okButtonProps, { children: onOkText })))] })))] })));
|
|
58
58
|
};
|
|
59
59
|
var Modal = function (_a) {
|
|
60
|
-
var title = _a.title, opened = _a.opened, onOk = _a.onOk, onOkText = _a.onOkText, onCancel = _a.onCancel, onCancelText = _a.onCancelText, maskClosable = _a.maskClosable, children = _a.children, width = _a.width, type = _a.type, closable = _a.closable, okButtonProps = _a.okButtonProps, cancelButtonProps = _a.cancelButtonProps, footer = _a.footer;
|
|
61
|
-
return (jsx(Modal$1, __assign({ opened: opened, onClose: onCancel || (function () { }), maskClosable: maskClosable, position: "top" }, { children: jsx(ModalContent, __assign({ title: title, width: width, onCancel: onCancel, onCancelText: onCancelText, onOk: onOk, onOkText: onOkText, type: type, closable: closable, okButtonProps: okButtonProps, cancelButtonProps: cancelButtonProps, footer: footer }, { children: children })) })));
|
|
60
|
+
var title = _a.title, opened = _a.opened, onOk = _a.onOk, onOkText = _a.onOkText, onCancel = _a.onCancel, onCancelText = _a.onCancelText, maskClosable = _a.maskClosable, children = _a.children, width = _a.width, type = _a.type, closable = _a.closable, okButtonProps = _a.okButtonProps, cancelButtonProps = _a.cancelButtonProps, footer = _a.footer, zIndex = _a.zIndex;
|
|
61
|
+
return (jsx(Modal$1, __assign({ opened: opened, onClose: onCancel || (function () { }), maskClosable: maskClosable, position: "top", zIndex: zIndex }, { children: jsx(ModalContent, __assign({ title: title, width: width, onCancel: onCancel, onCancelText: onCancelText, onOk: onOk, onOkText: onOkText, type: type, closable: closable, okButtonProps: okButtonProps, cancelButtonProps: cancelButtonProps, footer: footer }, { children: children })) })));
|
|
62
62
|
};
|
|
63
63
|
// 语法糖的调用方式
|
|
64
64
|
Modal.confirm = function (_a) {
|
|
65
|
-
var title = _a.title, onOk = _a.onOk, onCancel = _a.onCancel, onOkText = _a.onOkText, onCancelText = _a.onCancelText, _b = _a.maskClosable, maskClosable = _b === void 0 ? true : _b, content = _a.content, width = _a.width, closable = _a.closable, okButtonProps = _a.okButtonProps, cancelButtonProps = _a.cancelButtonProps, footer = _a.footer;
|
|
65
|
+
var title = _a.title, onOk = _a.onOk, onCancel = _a.onCancel, onOkText = _a.onOkText, onCancelText = _a.onCancelText, _b = _a.maskClosable, maskClosable = _b === void 0 ? true : _b, content = _a.content, width = _a.width, closable = _a.closable, okButtonProps = _a.okButtonProps, cancelButtonProps = _a.cancelButtonProps, footer = _a.footer, zIndex = _a.zIndex;
|
|
66
66
|
var modalRoot = document.createElement('div');
|
|
67
67
|
document.body.appendChild(modalRoot);
|
|
68
68
|
var root = createRoot(modalRoot);
|
|
@@ -72,7 +72,7 @@ Modal.confirm = function (_a) {
|
|
|
72
72
|
document.body.removeChild(modalRoot);
|
|
73
73
|
}
|
|
74
74
|
};
|
|
75
|
-
root.render(jsx(Modal$1, __assign({ opened: true, onClose: handleClose, maskClosable: maskClosable, position: "top" }, { children: jsx(ModalContent, __assign({ title: title, width: width, onCancel: onCancel instanceof Function && onCancel.constructor.name === 'AsyncFunction'
|
|
75
|
+
root.render(jsx(Modal$1, __assign({ opened: true, onClose: handleClose, maskClosable: maskClosable, position: "top", zIndex: zIndex }, { children: jsx(ModalContent, __assign({ title: title, width: width, onCancel: onCancel instanceof Function && onCancel.constructor.name === 'AsyncFunction'
|
|
76
76
|
? function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
77
77
|
return __generator(this, function (_a) {
|
|
78
78
|
switch (_a.label) {
|
package/es/Modal/ModalTemp.d.ts
CHANGED
package/es/Modal/ModalTemp.js
CHANGED
|
@@ -31,7 +31,7 @@ var Portal = function (_a) {
|
|
|
31
31
|
return createPortal(children, container);
|
|
32
32
|
};
|
|
33
33
|
var ModalLayout = function (_a) {
|
|
34
|
-
var _b = _a.onClose, onClose = _b === void 0 ? function () { } : _b, children = _a.children, opened = _a.opened, _c = _a.maskClosable, maskClosable = _c === void 0 ? true : _c, _d = _a.position, position = _d === void 0 ? 'center' : _d;
|
|
34
|
+
var _b = _a.onClose, onClose = _b === void 0 ? function () { } : _b, children = _a.children, opened = _a.opened, _c = _a.maskClosable, maskClosable = _c === void 0 ? true : _c, _d = _a.position, position = _d === void 0 ? 'center' : _d, zIndex = _a.zIndex;
|
|
35
35
|
var overlayRef = useRef(null);
|
|
36
36
|
var contentRef = useRef(null);
|
|
37
37
|
var _e = useState(false), animationIn = _e[0], setAnimationIn = _e[1];
|
|
@@ -45,10 +45,10 @@ var ModalLayout = function (_a) {
|
|
|
45
45
|
else if (position === 'bottom') {
|
|
46
46
|
justifyClass = 'foxit-modal-justify-bottom';
|
|
47
47
|
}
|
|
48
|
-
return (jsxs("div", __assign({ className: classNames('foxit-modal-fixed-layout', justifyClass) }, { children: [jsx(CSSTransition, __assign({ in: animationIn, nodeRef: overlayRef, timeout: 150, mountOnEnter: true, unmountOnExit: true, classNames: overlayAnimation }, { children: jsx("div", __assign({ ref: overlayRef, className: "foxit-modal-overlay", onClick: maskClosable ? onClose : undefined }, { children: jsx("div", { className: "foxit-modal-overlay-bg" }) })) })), jsx(CSSTransition, __assign({ in: animationIn, nodeRef: contentRef, timeout: 150, mountOnEnter: true, unmountOnExit: true, classNames: contentAnimation }, { children: jsx("div", __assign({ ref: contentRef, className: "foxit-modal-content" }, { children: children })) }))] })));
|
|
48
|
+
return (jsxs("div", __assign({ className: classNames('foxit-modal-fixed-layout', justifyClass), style: zIndex !== undefined ? { zIndex: zIndex } : undefined }, { children: [jsx(CSSTransition, __assign({ in: animationIn, nodeRef: overlayRef, timeout: 150, mountOnEnter: true, unmountOnExit: true, classNames: overlayAnimation }, { children: jsx("div", __assign({ ref: overlayRef, className: "foxit-modal-overlay", onClick: maskClosable ? onClose : undefined }, { children: jsx("div", { className: "foxit-modal-overlay-bg" }) })) })), jsx(CSSTransition, __assign({ in: animationIn, nodeRef: contentRef, timeout: 150, mountOnEnter: true, unmountOnExit: true, classNames: contentAnimation }, { children: jsx("div", __assign({ ref: contentRef, className: "foxit-modal-content" }, { children: children })) }))] })));
|
|
49
49
|
};
|
|
50
50
|
var Modal = function (_a) {
|
|
51
|
-
var opened = _a.opened, onClose = _a.onClose, maskClosable = _a.maskClosable, children = _a.children, position = _a.position;
|
|
51
|
+
var opened = _a.opened, onClose = _a.onClose, maskClosable = _a.maskClosable, children = _a.children, position = _a.position, zIndex = _a.zIndex;
|
|
52
52
|
var _b = useState(false), mounted = _b[0], setMounted = _b[1];
|
|
53
53
|
useEffect(function () {
|
|
54
54
|
if (opened && !mounted) {
|
|
@@ -69,7 +69,7 @@ var Modal = function (_a) {
|
|
|
69
69
|
if (!mounted) {
|
|
70
70
|
return null;
|
|
71
71
|
}
|
|
72
|
-
return (jsx(Portal, { children: jsx(ModalLayout, __assign({ onClose: onClose, opened: opened, maskClosable: maskClosable, position: position }, { children: children })) }));
|
|
72
|
+
return (jsx(Portal, { children: jsx(ModalLayout, __assign({ onClose: onClose, opened: opened, maskClosable: maskClosable, position: position, zIndex: zIndex }, { children: children })) }));
|
|
73
73
|
};
|
|
74
74
|
|
|
75
75
|
export { Modal };
|