-
Notifications
You must be signed in to change notification settings - Fork 58
/
useShowPopup.ts
84 lines (78 loc) · 2.3 KB
/
useShowPopup.ts
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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
import { useCallback } from 'react';
import { useWebApp } from './core';
/**
* You have to see original interface {@link telegram!PopupButton}.
*/
export interface ShowPopupButton extends Record<string, unknown> {
/**
* Optional. Identifier of the button, 0-64 characters.
* Set to empty string by default.
* If the button is pressed, its id is returned in the callback and the popupClosed event.
*/
id?: string;
/**
* Optional. Type of the button.
* Set to default by default.
*/
type?: 'default' | 'ok' | 'close' | 'cancel' | 'destructive' | string;
/**
* Optional. The text to be displayed on the button, 0-64 characters.
* Required if type is default or destructive.
* Irrelevant for other types.
*/
text?: string;
}
/**
* You have to see original interface {@link telegram!PopupParams}.
*/
export interface ShowPopupParams extends Record<string, unknown> {
/**
* Optional. The text to be displayed in the popup title, 0-64 characters.
*/
title?: string;
/**
* The message to be displayed in the body of the popup, 1-256 characters.
*/
message: string;
/**
* Optional. List of buttons to be displayed in the popup, 1-3 buttons
*/
buttons?: ShowPopupButton[];
}
/**
* This function provides Promise, and resolve the field id of the pressed button will be passed.
* @return Button id as string, it was described by {@link ShowPopupButton}
* @throws
*/
export type ShowPopupFunction = (params: ShowPopupParams) => Promise<string>;
/**
* The hook provided showPopup function of the type {@link ShowPopupFunction}.
* The function that shows a native popup described by the params argument of the type {@link ShowPopupParams}.
*
* ```tsx
* import { useShowPopup } from "@vkruglikov/react-telegram-web-app";
*
* const showPopup = useShowPopup();
*
* showPopup({ message: 'Hello world' }).then((buttonId) => console.log(buttonId));
* ```
*
* @group Hooks
*/
const useShowPopup: () => ShowPopupFunction = () => {
const WebApp = useWebApp();
return useCallback(
params =>
new Promise((resolve, reject) => {
try {
WebApp?.showPopup?.(params, (buttonId: string) => {
resolve(buttonId);
});
} catch (e) {
reject(e);
}
}),
[WebApp],
);
};
export default useShowPopup;