-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathnotificationManager.js
More file actions
176 lines (173 loc) · 7.72 KB
/
notificationManager.js
File metadata and controls
176 lines (173 loc) · 7.72 KB
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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
import React from "react";
import { useDispatch, useSelector } from "react-redux";
import NotificationsSystem, {
atalhoTheme,
wyboTheme,
bootstrapTheme,
dismissNotification,
setUpNotifications,
} from "reapop";
// run this function when your application starts before creating any notifications
setUpNotifications({
defaultProps: {
position: "bottom-right",
dismissible: true,
dismissAfter: 5000,
},
});
export default function NotificationManager() {
const dispatch = useDispatch();
// 1. Retrieve the notifications to display.
const notifications = useSelector((state) => state.notifications);
return (
<div>
<NotificationsSystem
// 2. Pass the notifications you want Reapop to display.
notifications={notifications}
// 3. Pass the function used to dismiss a notification.
dismissNotification={(id) => dispatch(dismissNotification(id))}
// 4. Pass a builtIn theme or a custom theme.
components={{
NotificationIcon: ({ notification, theme }) => {
switch (notification.status) {
case "error":
return (
<div className="flex items-center ml-2">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 50 50"
className="h-8 w-8 text-pink-50"
fill="currentColor"
stroke="currentColor"
>
<path d="M 25 2 C 12.309534 2 2 12.309534 2 25 C 2 37.690466 12.309534 48 25 48 C 37.690466 48 48 37.690466 48 25 C 48 12.309534 37.690466 2 25 2 z M 25 4 C 36.609534 4 46 13.390466 46 25 C 46 36.609534 36.609534 46 25 46 C 13.390466 46 4 36.609534 4 25 C 4 13.390466 13.390466 4 25 4 z M 32.990234 15.986328 A 1.0001 1.0001 0 0 0 32.292969 16.292969 L 25 23.585938 L 17.707031 16.292969 A 1.0001 1.0001 0 0 0 16.990234 15.990234 A 1.0001 1.0001 0 0 0 16.292969 17.707031 L 23.585938 25 L 16.292969 32.292969 A 1.0001 1.0001 0 1 0 17.707031 33.707031 L 25 26.414062 L 32.292969 33.707031 A 1.0001 1.0001 0 1 0 33.707031 32.292969 L 26.414062 25 L 33.707031 17.707031 A 1.0001 1.0001 0 0 0 32.990234 15.986328 z" />
</svg>
</div>
);
case "info":
return (
<div className="flex items-center ml-2">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 50 50"
className="h-8 w-8 text-tea-50"
fill="currentColor"
stroke="currentColor"
>
<path d="M 25 2 C 12.309295 2 2 12.309295 2 25 C 2 37.690705 12.309295 48 25 48 C 37.690705 48 48 37.690705 48 25 C 48 12.309295 37.690705 2 25 2 z M 25 4 C 36.609824 4 46 13.390176 46 25 C 46 36.609824 36.609824 46 25 46 C 13.390176 46 4 36.609824 4 25 C 4 13.390176 13.390176 4 25 4 z M 25 11 A 3 3 0 0 0 22 14 A 3 3 0 0 0 25 17 A 3 3 0 0 0 28 14 A 3 3 0 0 0 25 11 z M 21 21 L 21 23 L 22 23 L 23 23 L 23 36 L 22 36 L 21 36 L 21 38 L 22 38 L 23 38 L 27 38 L 28 38 L 29 38 L 29 36 L 28 36 L 27 36 L 27 21 L 26 21 L 22 21 L 21 21 z" />
</svg>
</div>
);
case "waiting-for-input":
return (
<div className="flex items-center ml-2">
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-8 w-8 text-purple-50 animate-spin-slow"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={1}
d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
/>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={1}
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
/>
</svg>
</div>
);
case "loading":
return (
<div className="flex items-center ml-2">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor"
className="h-7 w-8 text-purple-50 animate-spin-slow"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"
/>
</svg>
</div>
);
default:
return (
<div className="flex items-center ml-2">
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-8 w-8"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"
/>
</svg>
</div>
);
}
},
}}
theme={{
...atalhoTheme,
notification: (n) => {
return {
display: "flex",
backgroundColor: (() => {
switch (n.status) {
case "info":
return "#0883AA";
case "error":
return "#C52A7D";
case "waiting-for-input":
case "loading":
return "#6927B9";
}
})(),
color: "#FFFFFF",
borderRadius: "var(--rounded-btn, .5rem)",
padding: "0.8rem",
marginBottom: "0.8rem",
maxWidth: "24rem",
boxShadow:
"var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)",
};
},
notificationMessage: (n) => {
return {
fontSize: "0.92rem",
color: "#FFF"
}
}
// container: (c) => {
// if (c === "top-right")
// return {
// position: "fixed",
// zIndex: "999999",
// top: "100px",
// right: "20px",
// };
// return {};
// },
}}
smallScreenBreakpoint={() => 0}
/>
</div>
);
}