diff --git a/packages/react-modal/README.md b/packages/react-modal/README.md
index 163832f314..9087354f91 100644
--- a/packages/react-modal/README.md
+++ b/packages/react-modal/README.md
@@ -323,6 +323,35 @@ class Demo extends React.Component {
ReactDOM.render(, _mount_);
```
+### 快捷弹出
+
+使用 show() 可以快捷地弹出确认框。接受的参数与 ModalProps 一样, 只是少了 isOpen 与 onClosed
+
+
+```jsx
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Modal, ButtonGroup, Button } from 'uiw';
+
+class Demo extends React.Component {
+ onClick() {
+ Modal.show({
+ confirmText: "知道了",
+ children: "快捷提示",
+ onConfirm: () => console.log('您点击了确定按钮!'),
+ })
+ }
+ render() {
+ return (
+
+
+
+ )
+ }
+}
+ReactDOM.render(, _mount_);
+```
+
## Props
| 参数 | 说明 | 类型 | 默认值 |
@@ -345,4 +374,9 @@ ReactDOM.render(, _mount_);
| isOpen[``](#/components/overlay) | 对话框是否可见 | Boolean | `false` |
| maskClosable[``](#/components/overlay) | 点击遮罩层是否允许关闭 | Boolean | `true` |
+## Modal.show(params)
+
+params: Omit & { children: React.ReactNode }
+
+
更多属性文档请参考 [Overlay](#/components/overlay)。
diff --git a/packages/react-modal/src/CallShow.tsx b/packages/react-modal/src/CallShow.tsx
new file mode 100644
index 0000000000..a1c1892db3
--- /dev/null
+++ b/packages/react-modal/src/CallShow.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Modal, { ModalProps } from './';
+
+export default function CallShow(props: Omit & { children: React.ReactNode }) {
+ const { title = '提示框', children, ...other } = props;
+ const dv = document.createElement('div');
+ dv.id = 'uiw-modal-call-show-element';
+ document.body.appendChild(dv);
+ ReactDOM.render(
+ {
+ document.getElementById('uiw-modal-call-show-element')!.remove();
+ }}
+ >
+ {children}
+ ,
+ document.getElementById('uiw-modal-call-show-element'),
+ );
+}
diff --git a/packages/react-modal/src/index.tsx b/packages/react-modal/src/index.tsx
index 618034454e..268c5053ed 100644
--- a/packages/react-modal/src/index.tsx
+++ b/packages/react-modal/src/index.tsx
@@ -4,6 +4,7 @@ import Button, { ButtonType, ButtonProps } from '@uiw/react-button';
import Icon, { IconProps } from '@uiw/react-icon';
import { IProps, noop } from '@uiw/utils';
import './style/index.less';
+import CallShow from './CallShow';
export interface ModalProps extends IProps, OverlayProps {
type?: ButtonType;
@@ -27,105 +28,113 @@ export interface ModalProps extends IProps, OverlayProps {
onConfirm?: (evn: React.MouseEvent & MouseEvent) => void;
}
-export default React.forwardRef((props, ref) => {
- const {
- prefixCls = 'w-modal',
- className,
- children,
- useButton = true,
- usePortal = true,
- autoFocus = false,
- isOpen: _ = false,
- title,
- cancelText,
- cancelButtonProps,
- confirmButtonProps,
- content,
- confirmText = '确认',
- type = 'light',
- icon,
- maxWidth = 500,
- minWidth = 320,
- width,
- isCloseButtonShown = true,
- onCancel = noop,
- onConfirm = noop,
- bodyStyle,
- ...other
- } = props;
- const [isOpen, setIsOpen] = useState(props.isOpen);
- useEffect(() => {
- if (props.isOpen !== isOpen) {
- setIsOpen(props.isOpen);
- }
- }, [props.isOpen]);
+type ShowModalProps = {
+ show?: (props: Omit & { children: React.ReactNode }) => void;
+};
+
+const Modal: React.ForwardRefExoticComponent> & ShowModalProps =
+ React.forwardRef((props, ref) => {
+ const {
+ prefixCls = 'w-modal',
+ className,
+ children,
+ useButton = true,
+ usePortal = true,
+ autoFocus = false,
+ isOpen: _ = false,
+ title,
+ cancelText,
+ cancelButtonProps,
+ confirmButtonProps,
+ content,
+ confirmText = '确认',
+ type = 'light',
+ icon,
+ maxWidth = 500,
+ minWidth = 320,
+ width,
+ isCloseButtonShown = true,
+ onCancel = noop,
+ onConfirm = noop,
+ bodyStyle,
+ ...other
+ } = props;
+ const [isOpen, setIsOpen] = useState(props.isOpen);
+ useEffect(() => {
+ if (props.isOpen !== isOpen) {
+ setIsOpen(props.isOpen);
+ }
+ }, [props.isOpen]);
- const [loading, setLoading] = useState(false);
- const cls = [prefixCls, className, type ? `${type}` : null].filter(Boolean).join(' ').trim();
- function onClose() {
- setIsOpen(false);
- }
- async function handleCancel(e: React.MouseEvent & MouseEvent) {
- setLoading(true);
- try {
- onCancel && (await onCancel(e));
- } catch (e) {}
- setIsOpen(false);
- setLoading(false);
- }
- async function handleConfirm(e: React.MouseEvent & MouseEvent) {
- setLoading(true);
- try {
- onConfirm && (await onConfirm(e));
- } catch (e) {}
- setIsOpen(false);
- setLoading(false);
- }
- return (
-
-
-
- {(title || icon) && (
-
- {icon &&
}
- {title &&
{title}
}
- {isCloseButtonShown &&
-
- );
-});
+
+ );
+ });
+
+Modal.show = CallShow;
+export default Modal;
diff --git a/packages/react-overlay/src/index.tsx b/packages/react-overlay/src/index.tsx
index 197b2ca270..3c265bc29d 100644
--- a/packages/react-overlay/src/index.tsx
+++ b/packages/react-overlay/src/index.tsx
@@ -61,7 +61,8 @@ export default function Overlay(props: OverlayProps) {
...otherProps
} = props;
- const [isOpen, setIsOpen] = useState(props.isOpen || false);
+ const [isOpen, setIsOpen] = useState
();
+ // const [isOpen, setIsOpen] = useState(props.isOpen || false);
const [visible, setVisible] = useState(false);
const container = useRef(null);
const overlay = useRef(null);
@@ -127,7 +128,6 @@ export default function Overlay(props: OverlayProps) {
// setVisible(false)
// }
}
-
const TransitionGroupComp = (