UNPKG

8.71 kBTypeScriptView Raw
1/// <reference types="react" />
2
3import * as React from 'react';
4import CommonProps from '../util';
5
6export interface PopupProps extends React.HTMLAttributes<HTMLElement>, CommonProps {
7 /**
8 * 弹层内容
9 */
10 children?: React.ReactNode;
11 autoFit?: boolean;
12
13 /**
14 * 弹层当前是否显示
15 */
16 visible?: boolean;
17
18 /**
19 * 弹层请求关闭时触发事件的回调函数
20 */
21 onRequestClose?: (type: string, e: React.MouseEvent) => void;
22
23 /**
24 * 弹层定位的参照元素
25 */
26 target?: any;
27
28 /**
29 * 弹层相对于参照元素的定位, 详见开发指南的[定位部分](#定位)
30 */
31 align?: string | boolean;
32
33 /**
34 * 弹层相对于参照元素定位的微调
35 */
36 offset?: Array<any>;
37
38 /**
39 * 渲染组件的容器,如果是函数需要返回 ref,如果是字符串则是该 DOM 的 id,也可以直接传入 DOM 节点
40 */
41 container?: any;
42
43 /**
44 * 是否显示遮罩
45 */
46 hasMask?: boolean;
47
48 /**
49 * 是否支持 esc 按键关闭弹层
50 */
51 canCloseByEsc?: boolean;
52
53 /**
54 * 点击弹层外的区域是否关闭弹层,不显示遮罩时生效
55 */
56 canCloseByOutSideClick?: boolean;
57
58 /**
59 * 点击遮罩区域是否关闭弹层,显示遮罩时生效
60 */
61 canCloseByMask?: boolean;
62
63 /**
64 * 弹层打开前触发事件的回调函数
65 */
66 beforeOpen?: () => void;
67
68 /**
69 * 弹层打开时触发事件的回调函数
70 */
71 onOpen?: () => void;
72
73 /**
74 * 弹层打开后触发事件的回调函数, 如果有动画,则在动画结束后触发
75 */
76 afterOpen?: () => void;
77
78 /**
79 * 弹层关闭前触发事件的回调函数
80 */
81 beforeClose?: () => void;
82
83 /**
84 * 弹层关闭时触发事件的回调函数
85 */
86 onClose?: () => void;
87
88 /**
89 * 弹层关闭后触发事件的回调函数, 如果有动画,则在动画结束后触发
90 */
91 afterClose?: () => void;
92
93 /**
94 * 弹层定位完成前触发的事件
95 */
96 beforePosition?: () => void;
97
98 /**
99 * 弹层定位完成时触发的事件
100 */
101 onPosition?: (config: {}, node: {}) => void;
102
103 /**
104 * 是否在每次弹层重新渲染后强制更新定位信息,一般用于弹层内容区域大小发生变化时,仍需保持原来的定位方式
105 */
106 shouldUpdatePosition?: boolean;
107
108 /**
109 * 弹层打开时是否让其中的元素自动获取焦点
110 */
111 autoFocus?: boolean;
112
113 /**
114 * 当弹层由于页面滚动等情况不在可视区域时,是否自动调整定位以出现在可视区域
115 */
116 needAdjust?: boolean;
117
118 /**
119 * 是否禁用页面滚动
120 */
121 disableScroll?: boolean;
122
123 /**
124 * 隐藏时是否保留子节点
125 */
126 cache?: boolean;
127
128 /**
129 * 安全节点,当点击 document 的时候,如果包含该节点则不会关闭弹层,如果是函数需要返回 ref,如果是字符串则是该 DOM 的 id,也可以直接传入 DOM 节点,或者以上值组成的数组
130 */
131 safeNode?: any;
132
133 /**
134 * 弹层的根节点的样式类
135 */
136 wrapperClassName?: string;
137
138 /**
139 * 弹层的根节点的内联样式
140 */
141 wrapperStyle?: React.CSSProperties;
142
143 /**
144 * 配置动画的播放方式,支持 { in: 'enter-class', out: 'leave-class' } 的对象参数,如果设置为 false,则不播放动画。 请参考 Animate 组件的文档获取可用的动画名
145 */
146 animation?: any | boolean;
147
148 /**
149 * 触发弹层显示或隐藏的元素
150 */
151 trigger?: React.ReactElement<any>;
152
153 /**
154 * 触发弹层显示或隐藏的操作类型,可以是 'click','hover','focus',或者它们组成的数组,如 ['hover', 'focus']
155 */
156 triggerType?: string | Array<any>;
157
158 /**
159 * 当 triggerType 为 click 时才生效,可自定义触发弹层显示的键盘码
160 */
161 triggerClickKeycode?: number | Array<any>;
162
163 /**
164 * 弹层默认是否显示
165 */
166 defaultVisible?: boolean;
167
168 /**
169 * 弹层显示或隐藏时触发的回调函数, v2 版本第二个参数是 event
170 */
171 onVisibleChange?: (visible: boolean, type: string | object, e?: {}) => void;
172
173 /**
174 * 设置此属性,弹层无法显示或隐藏
175 */
176 disabled?: boolean;
177
178 /**
179 * 弹层显示或隐藏的延时时间(以毫秒为单位),在 triggerType 被设置为 hover 时生效
180 */
181 delay?: number;
182
183 /**
184 * trigger 是否可以关闭弹层
185 */
186 canCloseByTrigger?: boolean;
187
188 /**
189 * 是否跟随trigger滚动
190 */
191 followTrigger?: boolean;
192
193 /**
194 * 开启 v2 版本
195 */
196 v2?: boolean;
197
198 /**
199 * [v2可用]
200 * 快捷位置
201 */
202 placement?: string;
203}
204
205export class Popup extends React.Component<PopupProps, any> {}
206export interface OverlayProps extends React.HTMLAttributes<HTMLElement>, CommonProps {
207 /**
208 * 弹层内容
209 */
210 children?: any;
211
212 /**
213 * 是否显示弹层
214 */
215 visible?: boolean;
216
217 /**
218 * 弹层请求关闭时触发事件的回调函数, v2 版本第一个参数是 event
219 */
220 onRequestClose?: (type: string | object, e: React.MouseEvent) => void;
221
222 /**
223 * 弹层定位的参照元素
224 */
225 target?: any;
226
227 /**
228 * 弹层相对于参照元素的定位, 详见开发指南的[定位部分](#定位)
229 */
230 align?: string | boolean;
231
232 /**
233 * 弹层相对于参照元素定位的微调
234 */
235 offset?: Array<any>;
236
237 /**
238 * 渲染组件的容器,如果是函数需要返回 ref,如果是字符串则是该 DOM 的 id,也可以直接传入 DOM 节点
239 */
240 container?: any;
241
242 /**
243 * 是否显示遮罩
244 */
245 hasMask?: boolean;
246
247 /**
248 * 是否支持 esc 按键关闭弹层
249 */
250 canCloseByEsc?: boolean;
251
252 /**
253 * 点击弹层外的区域是否关闭弹层,不显示遮罩时生效
254 */
255 canCloseByOutSideClick?: boolean;
256
257 /**
258 * 点击遮罩区域是否关闭弹层,显示遮罩时生效
259 */
260 canCloseByMask?: boolean;
261
262 /**
263 * 弹层打开前触发事件的回调函数
264 */
265 beforeOpen?: () => void;
266
267 /**
268 * 弹层打开时触发事件的回调函数
269 */
270 onOpen?: () => void;
271
272 /**
273 * 弹层打开后触发事件的回调函数, 如果有动画,则在动画结束后触发
274 */
275 afterOpen?: () => void;
276
277 /**
278 * 弹层关闭前触发事件的回调函数
279 */
280 beforeClose?: () => void;
281
282 /**
283 * 弹层关闭时触发事件的回调函数
284 */
285 onClose?: () => void;
286
287 /**
288 * 弹层关闭后触发事件的回调函数, 如果有动画,则在动画结束后触发
289 */
290 afterClose?: () => void;
291
292 /**
293 * 弹层定位完成前触发的事件
294 */
295 beforePosition?: () => void;
296
297 /**
298 * 弹层定位完成时触发的事件
299 */
300 onPosition?: (config: {}, node: {}) => void;
301
302 /**
303 * 是否在每次弹层重新渲染后强制更新定位信息,一般用于弹层内容区域大小发生变化时,仍需保持原来的定位方式
304 */
305 shouldUpdatePosition?: boolean;
306
307 /**
308 * 弹层打开时是否让其中的元素自动获取焦点
309 */
310 autoFocus?: boolean;
311
312 /**
313 * 当弹层由于页面滚动等情况不在可视区域时,是否自动调整定位以出现在可视区域
314 */
315 needAdjust?: boolean;
316
317 /**
318 * 是否禁用页面滚动
319 */
320 disableScroll?: boolean;
321
322 /**
323 * 隐藏时是否保留子节点
324 */
325 cache?: boolean;
326
327 /**
328 * 安全节点,当点击 document 的时候,如果包含该节点则不会关闭弹层,如果是函数需要返回 ref,如果是字符串则是该 DOM 的 id,也可以直接传入 DOM 节点,或者以上值组成的数组
329 */
330 safeNode?: any;
331
332 /**
333 * 弹层的根节点的样式类
334 */
335 wrapperClassName?: string;
336
337 /**
338 * 弹层的根节点的内联样式
339 */
340 wrapperStyle?: React.CSSProperties;
341 /**
342 * 配置动画的播放方式,支持 { in: 'enter-class', out: 'leave-class' } 的对象参数,如果设置为 false,则不播放动画。 请参考 Animate 组件的文档获取可用的动画名
343 */
344 animation?: { in: string; out: string;} | boolean;
345 /**
346 * 开启 v2 版本
347 */
348 v2?: boolean;
349 /**
350 * 是否在捕获阶段监听,适配 react 17 事件模型变更
351 */
352 useCapture?: boolean;
353}
354
355export default class Overlay extends React.Component<OverlayProps, any> {
356 static Popup: typeof Popup;
357}