1
2import flyModal from 'flymodal';
3import 'flymodal/dist/flymodal.css';
4
5const App = () => {
6    const showToast = (pos: 'top' | 'center' | 'bottom' = 'center') => {
7        flyModal.showToast('This is a toast message.' + pos, {            
8            duration: 1,
9            pos,
10            onShow: () => {
11                console.log('showToast onShow');
12            },
13            onClose: () => {
14                console.log('showToast onClose');
15            },
16        });
17    };
18    const makeContentElem = () => {
19        const elem = document.createElement('div');
20        elem.innerText = 'html element (div)';
21        elem.className = 'user-class';
22        Object.assign(elem.style, {
23            padding: '12px',
24            borderRadius: '5px',
25            width: '500px',
26            height: '300px',
27            backgroundColor: '#f2f2f2',
28            border: '1px solid #d9d9d9',
29        });
30        return elem;
31    };
32    const showDialog = () => {
33        flyModal.showDialog({
34            title: 'dialog title',
35            content: makeContentElem(),
36            buttonList: [
37                {
38                    label: 'cancel',
39                    onClick: () => {
40                        console.log('cancel');
41                        flyModal.closeDialog();
42                    },
43                },
44                {
45                    label: 'ok',
46                    onClick: () => {
47                        console.log('ok');
48                        flyModal.closeDialog();
49                    },
50                    isDefault: true,
51                },
52            ],
53            onShow: () => {
54                console.log('onload function');
55            },
56            onClose: () => {
57                console.log('onClose function');
58            },
59            overlayClose: true,
60            escClose: true,
61        });
62    };
63    const showDialog2 = () => {
64        flyModal.showDialog({
65            content:
66                'Simple notifications.|Closes when you press the close button below.',
67            buttonList: [
68                {
69                    label: 'close',
70                    onClick: () => {
71                        flyModal.closeDialog();
72                    },
73                    isDefault: true,
74                },
75            ],
76        });
77    };
78    const showDialog3 = () => {
79        flyModal.showDialog({
80            content:
81                'Simple notifications.|without buttons.|Closes when you click outside the dialog or press ESC.',
82            overlayClose: true,
83            escClose: true,
84        });
85    };
86
87    return (
88        <>
89            <div className="content-container">
90                <button onClick={() => showToast('top')}>
91                    toast message (top)
92                </button>
93                <button onClick={() => showToast('center')}>
94                    toast message (center)
95                </button>
96                <button onClick={() => showToast('bottom')}>
97                    toast message (bottom)
98                </button>
99                <button onClick={showDialog}>dialog</button>
100                <button onClick={showDialog2}>dialog (no title)</button>
101                <button onClick={showDialog3}>
102                    dialog (no title, no foot)
103                </button>
104            </div>
105        </>
106    );
107};
108
109export default App;    
110