Skip to content

Commit a7db01a

Browse files
cuilanxincuilanxin
authoredMay 13, 2022
fix(Modal): 修复Modal.show类型不存在问题 #825 (#827)
·
v4.22.3v4.21.9
1 parent f05e4fa commit a7db01a

File tree

2 files changed

+108
-107
lines changed

2 files changed

+108
-107
lines changed
 

‎packages/react-modal/src/CallShow.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@ import React from 'react';
22
import ReactDOM from 'react-dom';
33
import Modal, { ModalProps } from './';
44

5-
export default function CallShow(props: Omit<ModalProps, 'onClosed' | 'isOpen'> & { children: React.ReactNode }) {
6-
const { title = '提示框', children, ...other } = props;
5+
export default function CallShow(props?: Omit<ModalProps, 'onClosed' | 'isOpen'> & { children?: React.ReactNode }) {
6+
const { title = '提示框', children, ...other } = props || {};
77
const dv = document.createElement('div');
88
dv.id = 'uiw-modal-call-show-element';
99
document.body.appendChild(dv);

‎packages/react-modal/src/index.tsx

+106-105
Original file line numberDiff line numberDiff line change
@@ -28,113 +28,114 @@ export interface ModalProps extends IProps, OverlayProps {
2828
onConfirm?: (evn: React.MouseEvent<HTMLButtonElement> & MouseEvent) => void;
2929
}
3030

31-
type ShowModalProps = {
32-
show?: (props: Omit<ModalProps, 'onClosed' | 'isOpen'> & { children: React.ReactNode }) => void;
33-
};
34-
35-
const Modal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<OverlayProps>> & ShowModalProps =
36-
React.forwardRef<OverlayProps, ModalProps>((props, ref) => {
37-
const {
38-
prefixCls = 'w-modal',
39-
className,
40-
children,
41-
useButton = true,
42-
usePortal = true,
43-
autoFocus = false,
44-
isOpen: _ = false,
45-
title,
46-
cancelText,
47-
cancelButtonProps,
48-
confirmButtonProps,
49-
content,
50-
confirmText = '确认',
51-
type = 'light',
52-
icon,
53-
maxWidth = 500,
54-
minWidth = 320,
55-
width,
56-
isCloseButtonShown = true,
57-
onCancel = noop,
58-
onConfirm = noop,
59-
bodyStyle,
60-
...other
61-
} = props;
62-
const [isOpen, setIsOpen] = useState(props.isOpen);
63-
useEffect(() => {
64-
if (props.isOpen !== isOpen) {
65-
setIsOpen(props.isOpen);
66-
}
67-
}, [props.isOpen]);
68-
69-
const [loading, setLoading] = useState(false);
70-
const cls = [prefixCls, className, type ? `${type}` : null].filter(Boolean).join(' ').trim();
71-
function onClose() {
72-
setIsOpen(false);
73-
}
74-
async function handleCancel(e: React.MouseEvent<HTMLButtonElement, MouseEvent> & MouseEvent) {
75-
setLoading(true);
76-
try {
77-
onCancel && (await onCancel(e));
78-
} catch (e) {}
79-
setIsOpen(false);
80-
setLoading(false);
81-
}
82-
async function handleConfirm(e: React.MouseEvent<HTMLButtonElement, MouseEvent> & MouseEvent) {
83-
setLoading(true);
84-
try {
85-
onConfirm && (await onConfirm(e));
86-
} catch (e) {}
87-
setIsOpen(false);
88-
setLoading(false);
31+
const Modal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<OverlayProps>> = React.forwardRef<
32+
OverlayProps,
33+
ModalProps
34+
>((props, ref) => {
35+
const {
36+
prefixCls = 'w-modal',
37+
className,
38+
children,
39+
useButton = true,
40+
usePortal = true,
41+
autoFocus = false,
42+
isOpen: _ = false,
43+
title,
44+
cancelText,
45+
cancelButtonProps,
46+
confirmButtonProps,
47+
content,
48+
confirmText = '确认',
49+
type = 'light',
50+
icon,
51+
maxWidth = 500,
52+
minWidth = 320,
53+
width,
54+
isCloseButtonShown = true,
55+
onCancel = noop,
56+
onConfirm = noop,
57+
bodyStyle,
58+
...other
59+
} = props;
60+
const [isOpen, setIsOpen] = useState(props.isOpen);
61+
useEffect(() => {
62+
if (props.isOpen !== isOpen) {
63+
setIsOpen(props.isOpen);
8964
}
90-
return (
91-
<Overlay usePortal={usePortal} isOpen={isOpen} {...other} onClose={onClose} className={cls}>
92-
<div className={`${prefixCls}-container`}>
93-
<div
94-
className={[
95-
`${prefixCls}-inner`,
96-
title ? `${prefixCls}-shown-title` : null,
97-
icon ? `${prefixCls}-shown-icon` : null,
98-
]
99-
.filter(Boolean)
100-
.join(' ')
101-
.trim()}
102-
style={{ maxWidth, minWidth, width }}
103-
>
104-
{(title || icon) && (
105-
<div className={`${prefixCls}-header`}>
106-
{icon && <Icon type={icon} />}
107-
{title && <h4>{title}</h4>}
108-
{isCloseButtonShown && <Button basic onClick={(e) => handleCancel(e)} icon="close" type="light" />}
109-
</div>
110-
)}
111-
<div className={`${prefixCls}-body`} style={bodyStyle}>
112-
{children || content}
65+
}, [props.isOpen]);
66+
67+
const [loading, setLoading] = useState(false);
68+
const cls = [prefixCls, className, type ? `${type}` : null].filter(Boolean).join(' ').trim();
69+
function onClose() {
70+
setIsOpen(false);
71+
}
72+
async function handleCancel(e: React.MouseEvent<HTMLButtonElement, MouseEvent> & MouseEvent) {
73+
setLoading(true);
74+
try {
75+
onCancel && (await onCancel(e));
76+
} catch (e) {}
77+
setIsOpen(false);
78+
setLoading(false);
79+
}
80+
async function handleConfirm(e: React.MouseEvent<HTMLButtonElement, MouseEvent> & MouseEvent) {
81+
setLoading(true);
82+
try {
83+
onConfirm && (await onConfirm(e));
84+
} catch (e) {}
85+
setIsOpen(false);
86+
setLoading(false);
87+
}
88+
return (
89+
<Overlay usePortal={usePortal} isOpen={isOpen} {...other} onClose={onClose} className={cls}>
90+
<div className={`${prefixCls}-container`}>
91+
<div
92+
className={[
93+
`${prefixCls}-inner`,
94+
title ? `${prefixCls}-shown-title` : null,
95+
icon ? `${prefixCls}-shown-icon` : null,
96+
]
97+
.filter(Boolean)
98+
.join(' ')
99+
.trim()}
100+
style={{ maxWidth, minWidth, width }}
101+
>
102+
{(title || icon) && (
103+
<div className={`${prefixCls}-header`}>
104+
{icon && <Icon type={icon} />}
105+
{title && <h4>{title}</h4>}
106+
{isCloseButtonShown && <Button basic onClick={(e) => handleCancel(e)} icon="close" type="light" />}
113107
</div>
114-
{useButton && (
115-
<div className={`${prefixCls}-footer`}>
116-
<Button
117-
autoFocus={autoFocus}
118-
type={type}
119-
loading={loading}
120-
disabled={loading}
121-
{...confirmButtonProps}
122-
onClick={(e) => handleConfirm(e)}
123-
>
124-
{confirmText}
125-
</Button>
126-
{cancelText && (
127-
<Button {...cancelButtonProps} onClick={(e) => handleCancel(e)}>
128-
{cancelText}
129-
</Button>
130-
)}
131-
</div>
132-
)}
108+
)}
109+
<div className={`${prefixCls}-body`} style={bodyStyle}>
110+
{children || content}
133111
</div>
112+
{useButton && (
113+
<div className={`${prefixCls}-footer`}>
114+
<Button
115+
autoFocus={autoFocus}
116+
type={type}
117+
loading={loading}
118+
disabled={loading}
119+
{...confirmButtonProps}
120+
onClick={(e) => handleConfirm(e)}
121+
>
122+
{confirmText}
123+
</Button>
124+
{cancelText && (
125+
<Button {...cancelButtonProps} onClick={(e) => handleCancel(e)}>
126+
{cancelText}
127+
</Button>
128+
)}
129+
</div>
130+
)}
134131
</div>
135-
</Overlay>
136-
);
137-
});
132+
</div>
133+
</Overlay>
134+
);
135+
});
138136

139-
Modal.show = CallShow;
140-
export default Modal;
137+
type Modal = typeof Modal & {
138+
show: (props?: Omit<ModalProps, 'onClosed' | 'isOpen'> & { children?: React.ReactNode }) => void;
139+
};
140+
(Modal as Modal).show = CallShow;
141+
export default Modal as Modal;

0 commit comments

Comments
 (0)
Please sign in to comment.