-
Notifications
You must be signed in to change notification settings - Fork 18
/
index.tsx
70 lines (62 loc) · 1.82 KB
/
index.tsx
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
import React from 'react';
import { createPortalDOM } from '../utils/dom';
import { DialogType } from './style';
import { WrapperProps, Wrapper } from './Wrapper';
import isPlainObject from 'lodash/isPlainObject';
import omit from 'lodash/omit';
export interface ShowDialogOption extends WrapperProps {
// 空白处可点击关闭
blankClosable?: boolean;
// 弹框内容
content?: React.ReactNode;
// 弹窗类型
type?: DialogType;
}
/**
* 显示一个对话框,出现和隐藏都带有动画效果
* @param option
* @returns
*/
export function showDialog(option: React.ReactNode | ShowDialogOption) {
const { mount, unmount } = createPortalDOM();
// 生成全部配置
let config: ShowDialogOption = { status: 'show', blankClosable: false };
if (React.isValidElement(option) || !isPlainObject(option)) {
config.content = option as React.ReactNode;
} else {
config = { ...config, ...(option as ShowDialogOption) };
}
// 提取需要单独处理的配置项
const blankClosable = !!config.blankClosable;
const children = config.content;
const onBlankClick = config.onBlankClick;
const onHide = config.onHide;
const props: WrapperProps = omit(config, [
'blankClosable',
'content',
'onHide',
]);
// 关闭弹窗
const closeDialog = async () => {
props.status = 'hide';
props.onHide = () => {
unmount();
onHide?.();
};
await mount(<Wrapper {...props}>{children}</Wrapper>);
};
// 空白处可点击关闭
if (blankClosable) {
props.onBlankClick = async (event) => {
await closeDialog();
onBlankClick?.(event);
};
}
// 挂载容器对象
const amountShow = mount(<Wrapper {...props}>{children}</Wrapper>);
return async () => {
// 关闭前确保容器已经被挂载
await amountShow;
await closeDialog();
};
}