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
85
86
87
88
89
90
|
import * as React from 'react';
import { themes } from './constants';
function getType(type: string) {
switch (type) {
case 'default':
default:
return 'toast';
case 'success':
return 'toast.success';
case 'error':
return 'toast.error';
case 'info':
return 'toast.info';
case 'warning':
return 'toast.warn';
}
}
export interface ToastCodeProps {
position: string;
disableAutoClose: boolean;
autoClose: boolean | number;
hideProgressBar: boolean;
closeOnClick: boolean;
pauseOnHover: boolean;
type: string;
draggable: boolean;
progress: number;
theme: typeof themes[number];
}
export const ToastCode: React.FC<ToastCodeProps> = ({
position,
disableAutoClose,
autoClose,
hideProgressBar,
closeOnClick,
pauseOnHover,
type,
draggable,
progress,
theme
}) => (
<div>
<h3>Toast Emitter</h3>
<div className="code">
<div>
<span className="code__component">{getType(type)}</span>
{`('🦄 Wow so easy!', { `}
</div>
<div>
<span className="code__props">position</span>
{`: "${position}"`},
</div>
<div>
<span className="code__props">theme</span>
{`: "${theme}"`},
</div>
<div>
<span className="code__props">autoClose</span>
{`: ${disableAutoClose ? false : autoClose}`},
</div>
<div>
<span className="code__props">hideProgressBar</span>
{`: ${hideProgressBar ? 'true' : 'false'}`},
</div>
<div>
<span className="code__props">closeOnClick</span>
{`: ${closeOnClick ? 'true' : 'false'}`},
</div>
<div>
<span className="code__props">pauseOnHover</span>
{`: ${pauseOnHover ? 'true' : 'false'}`},
</div>
<div>
<span className="code__props">draggable</span>
{`: ${draggable ? 'true' : 'false'}`},
</div>
{!Number.isNaN(progress) && (
<div>
<span className="code__props">progress</span>
{`: ${progress}`},
</div>
)}
<div>{`});`}</div>
</div>
</div>
);
|
