d9-toast 1.2.21 → 1.3.21
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +5 -3
- package/dist/Toast.js +9 -3
- package/dist/d9-toast.d.ts +2 -0
- package/dist/toast.css +152 -88
- package/package.json +13 -5
package/README.md
CHANGED
|
@@ -97,17 +97,17 @@ Returns an object with toast management methods:
|
|
|
97
97
|
| Option | Type | Default | Description |
|
|
98
98
|
|--------|------|---------|-------------|
|
|
99
99
|
| `message` | string \| React.ReactNode | **Required** | Toast content (supports JSX) |
|
|
100
|
-
| `type` | string | `"
|
|
100
|
+
| `type` | string | `"success"` | Toast type: `success`, `error`, `info`, `warning`, `loading`, `submit` |
|
|
101
101
|
| `position` | string | `"top-right"` | Position: `top-left`, `top-right`, `bottom-left`, `bottom-right`, `center`, `center-top`, `center-bottom` |
|
|
102
102
|
| `theme` | string | `"light"` | Theme: `light`, `dark`, `colored` |
|
|
103
103
|
| `duration` | number | `5000` | Auto-close duration in ms (0 = infinite) |
|
|
104
104
|
| `autoClose` | boolean | `true` | Whether toast auto-closes after duration |
|
|
105
|
-
| `closable` | boolean | `
|
|
105
|
+
| `closable` | boolean | `false` | Show close (X) button |
|
|
106
106
|
| `pauseOnHover` | boolean | `true` | Pause timer on hover |
|
|
107
107
|
| `pauseOnFocusLoss` | boolean | `true` | Pause timer when window loses focus |
|
|
108
108
|
| `progress` | boolean | `true` | Show progress bar |
|
|
109
109
|
| `title` | boolean | `true` | Show toast header with type |
|
|
110
|
-
| `actions` | Array | `[]` | Action buttons: `[{ text: string, callback: function }]` |
|
|
110
|
+
| `actions` | Array | `[]` | Action buttons: `[{ text: string, className: string, callback: function }]` |
|
|
111
111
|
| `className` | string | `""` | Additional CSS/Tailwind classes |
|
|
112
112
|
|
|
113
113
|
## 💡 Advanced Usage
|
|
@@ -135,9 +135,11 @@ showToast({
|
|
|
135
135
|
actions: [
|
|
136
136
|
{
|
|
137
137
|
text: "View",
|
|
138
|
+
className: "",
|
|
138
139
|
callback: () => console.log("View clicked")
|
|
139
140
|
},
|
|
140
141
|
{
|
|
142
|
+
className: "",
|
|
141
143
|
text: "Dismiss",
|
|
142
144
|
callback: ({ id }) => removeToast(id)
|
|
143
145
|
}
|
package/dist/Toast.js
CHANGED
|
@@ -12,7 +12,7 @@ var Toast = function Toast(_ref) {
|
|
|
12
12
|
var id = _ref.id,
|
|
13
13
|
message = _ref.message,
|
|
14
14
|
_ref$type = _ref.type,
|
|
15
|
-
type = _ref$type === void 0 ? "
|
|
15
|
+
type = _ref$type === void 0 ? "success" : _ref$type,
|
|
16
16
|
_ref$theme = _ref.theme,
|
|
17
17
|
theme = _ref$theme === void 0 ? "light" : _ref$theme,
|
|
18
18
|
_ref$position = _ref.position,
|
|
@@ -29,7 +29,7 @@ var Toast = function Toast(_ref) {
|
|
|
29
29
|
_ref$autoClose = _ref.autoClose,
|
|
30
30
|
autoClose = _ref$autoClose === void 0 ? true : _ref$autoClose,
|
|
31
31
|
_ref$closable = _ref.closable,
|
|
32
|
-
closable = _ref$closable === void 0 ?
|
|
32
|
+
closable = _ref$closable === void 0 ? false : _ref$closable,
|
|
33
33
|
_ref$title = _ref.title,
|
|
34
34
|
title = _ref$title === void 0 ? true : _ref$title,
|
|
35
35
|
_ref$pauseOnHover = _ref.pauseOnHover,
|
|
@@ -116,14 +116,18 @@ var Toast = function Toast(_ref) {
|
|
|
116
116
|
var actionButtons = useMemo(function () {
|
|
117
117
|
if (actions.length === 0) return null;
|
|
118
118
|
return actions.slice(0, 2).map(function (a, idx) {
|
|
119
|
+
// Dynamic class names..
|
|
120
|
+
var btnType = actions.length === 1 ? "action-btnA__".concat(type) : idx === 0 ? "action-btnB__".concat(type) : "action-btnA__".concat(type);
|
|
121
|
+
var classNameStr = "action-btn ".concat(btnType, " ").concat(a.className || "").trim();
|
|
119
122
|
return /*#__PURE__*/_jsx("button", {
|
|
123
|
+
"aria-label": "Action ".concat(a.text),
|
|
120
124
|
onClick: function onClick() {
|
|
121
125
|
var _a$callback;
|
|
122
126
|
return (_a$callback = a.callback) === null || _a$callback === void 0 ? void 0 : _a$callback.call(a, {
|
|
123
127
|
id: id
|
|
124
128
|
});
|
|
125
129
|
},
|
|
126
|
-
className:
|
|
130
|
+
className: classNameStr,
|
|
127
131
|
children: a.text
|
|
128
132
|
}, idx);
|
|
129
133
|
});
|
|
@@ -174,6 +178,7 @@ var Toast = function Toast(_ref) {
|
|
|
174
178
|
})]
|
|
175
179
|
}), closable && /*#__PURE__*/_jsx("button", {
|
|
176
180
|
className: "close-button",
|
|
181
|
+
"aria-label": "Close button",
|
|
177
182
|
onClick: function onClick() {
|
|
178
183
|
return triggerExit();
|
|
179
184
|
},
|
|
@@ -194,6 +199,7 @@ var Toast = function Toast(_ref) {
|
|
|
194
199
|
})]
|
|
195
200
|
}), closable && !title && /*#__PURE__*/_jsx("button", {
|
|
196
201
|
className: "close-button",
|
|
202
|
+
"aria-label": "Close button",
|
|
197
203
|
onClick: function onClick() {
|
|
198
204
|
return triggerExit();
|
|
199
205
|
},
|
package/dist/d9-toast.d.ts
CHANGED
|
@@ -27,6 +27,8 @@ declare module "d9-toast" {
|
|
|
27
27
|
export interface ToastAction {
|
|
28
28
|
/** Text label for the action button */
|
|
29
29
|
text: string;
|
|
30
|
+
/** Extra custom class names */
|
|
31
|
+
className: string;
|
|
30
32
|
/** Optional callback triggered on click */
|
|
31
33
|
callback?: (toast: { id: number }) => void;
|
|
32
34
|
}
|
package/dist/toast.css
CHANGED
|
@@ -1,5 +1,29 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
--primary-bg: #ffffff;
|
|
3
|
+
--primary-color: #1e2939;
|
|
4
|
+
|
|
5
|
+
/* Success colors */
|
|
6
|
+
--success-color: #006e2f;
|
|
7
|
+
--success-bg: rgba(0, 166, 61, 0.1);
|
|
8
|
+
|
|
9
|
+
/* Error colors */
|
|
10
|
+
--error-color: #b62027;
|
|
11
|
+
--error-bg: rgba(231, 0, 12, 0.1);
|
|
12
|
+
|
|
13
|
+
/* Info colors */
|
|
14
|
+
--info-color: #0062b8;
|
|
15
|
+
--info-bg: rgba(21, 93, 251, 0.1);
|
|
16
|
+
|
|
17
|
+
/* Warning colors */
|
|
18
|
+
--warning-color: #866300;
|
|
19
|
+
--warning-bg: rgba(208, 135, 0, 0.1);
|
|
20
|
+
|
|
21
|
+
/* Loading/Submit colors */
|
|
22
|
+
--loading-color: #8736ca;
|
|
23
|
+
--loading-bg: rgba(124, 58, 237, 0.1);
|
|
24
|
+
}
|
|
25
|
+
|
|
1
26
|
/* Defaults */
|
|
2
|
-
.toastContainer button,
|
|
3
27
|
.toastContainer p,
|
|
4
28
|
.toastContainer span {
|
|
5
29
|
font: inherit;
|
|
@@ -10,6 +34,12 @@
|
|
|
10
34
|
margin: 0;
|
|
11
35
|
}
|
|
12
36
|
|
|
37
|
+
.toastContainer button {
|
|
38
|
+
border: none;
|
|
39
|
+
padding: 0;
|
|
40
|
+
margin: 0;
|
|
41
|
+
}
|
|
42
|
+
|
|
13
43
|
.toastContainer {
|
|
14
44
|
position: fixed;
|
|
15
45
|
z-index: 999;
|
|
@@ -66,27 +96,89 @@
|
|
|
66
96
|
margin: 8px;
|
|
67
97
|
border-radius: 8px;
|
|
68
98
|
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
|
|
69
|
-
font-family: cursive;
|
|
70
99
|
font-size: smaller;
|
|
100
|
+
font-family: cursive;
|
|
71
101
|
transition: all 0.3s ease-in;
|
|
72
102
|
will-change: transform, opacity;
|
|
103
|
+
background-color: var(--primary-bg);
|
|
104
|
+
color: var(--primary-color);
|
|
73
105
|
}
|
|
74
106
|
|
|
107
|
+
/* Theme colors */
|
|
75
108
|
.light {
|
|
76
|
-
|
|
77
|
-
color: #1e2939;
|
|
109
|
+
--primary-bg: #ffffff;
|
|
110
|
+
--primary-color: #1e2939;
|
|
111
|
+
|
|
112
|
+
--success-color: #006e2f;
|
|
113
|
+
--success-bg: rgba(0, 138, 58, 0.1);
|
|
114
|
+
|
|
115
|
+
--error-color: #bf0009;
|
|
116
|
+
--error-bg: rgba(163, 0, 8, 0.1);
|
|
117
|
+
|
|
118
|
+
--info-color: #005fbd;
|
|
119
|
+
--info-bg: rgba(0, 76, 153, 0.1);
|
|
120
|
+
|
|
121
|
+
--warning-color: #8d6200;
|
|
122
|
+
--warning-bg: rgba(153, 107, 0, 0.1);
|
|
123
|
+
|
|
124
|
+
--loading-color: #6900ca;
|
|
125
|
+
--loading-bg: rgba(106, 31, 176, 0.1);
|
|
126
|
+
|
|
127
|
+
/* background-color: #ffffff;
|
|
128
|
+
color: #1e2939; */
|
|
78
129
|
}
|
|
79
130
|
|
|
80
131
|
.dark {
|
|
81
|
-
|
|
82
|
-
color: #ffffff;
|
|
132
|
+
--primary-bg: #1e2939;
|
|
133
|
+
--primary-color: #ffffff;
|
|
134
|
+
|
|
135
|
+
--success-color: #00df5f;
|
|
136
|
+
--success-bg: rgba(0, 138, 58, 0.1);
|
|
137
|
+
|
|
138
|
+
--error-color: #ff666d;
|
|
139
|
+
--error-bg: rgba(163, 0, 8, 0.1);
|
|
140
|
+
|
|
141
|
+
--info-color: #5badff;
|
|
142
|
+
--info-bg: rgba(0, 76, 153, 0.1);
|
|
143
|
+
|
|
144
|
+
--warning-color: #e29e00;
|
|
145
|
+
--warning-bg: rgba(153, 107, 0, 0.1);
|
|
146
|
+
|
|
147
|
+
--loading-color: #c586ff;
|
|
148
|
+
--loading-bg: rgba(106, 31, 176, 0.1);
|
|
149
|
+
|
|
150
|
+
/* background-color: #1e2939;
|
|
151
|
+
color: #ffffff; */
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
/* Type colors */
|
|
155
|
+
.success {
|
|
156
|
+
color: var(--success-color);
|
|
157
|
+
background-color: var(--success-bg);
|
|
158
|
+
}
|
|
159
|
+
.error {
|
|
160
|
+
color: var(--error-color);
|
|
161
|
+
background-color: var(--error-bg);
|
|
162
|
+
}
|
|
163
|
+
.info {
|
|
164
|
+
color: var(--info-color);
|
|
165
|
+
background-color: var(--info-bg);
|
|
166
|
+
}
|
|
167
|
+
.warning {
|
|
168
|
+
color: var(--warning-color);
|
|
169
|
+
background-color: var(--warning-bg);
|
|
170
|
+
}
|
|
171
|
+
.loading,
|
|
172
|
+
.submit {
|
|
173
|
+
color: var(--loading-color);
|
|
174
|
+
background-color: var(--loading-bg);
|
|
83
175
|
}
|
|
84
176
|
|
|
85
177
|
.toastHeader {
|
|
86
178
|
display: flex;
|
|
87
179
|
justify-content: space-between;
|
|
88
180
|
align-items: center;
|
|
89
|
-
padding:
|
|
181
|
+
padding: 5px;
|
|
90
182
|
border-radius: 6px;
|
|
91
183
|
box-shadow: inset 0 1px rgb(0 0 0 / 0.06);
|
|
92
184
|
}
|
|
@@ -102,6 +194,8 @@
|
|
|
102
194
|
display: flex;
|
|
103
195
|
align-items: center;
|
|
104
196
|
justify-content: center;
|
|
197
|
+
background-color: transparent;
|
|
198
|
+
color: var(--primary-color);
|
|
105
199
|
cursor: pointer;
|
|
106
200
|
}
|
|
107
201
|
|
|
@@ -117,7 +211,7 @@
|
|
|
117
211
|
gap: 8px;
|
|
118
212
|
}
|
|
119
213
|
|
|
120
|
-
.toast-message__container .toast-message{
|
|
214
|
+
.toast-message__container .toast-message {
|
|
121
215
|
display: inline-flex;
|
|
122
216
|
align-items: center;
|
|
123
217
|
text-wrap: wrap;
|
|
@@ -133,66 +227,69 @@
|
|
|
133
227
|
margin-bottom: 8px;
|
|
134
228
|
}
|
|
135
229
|
.toastActions .action-btn {
|
|
136
|
-
padding:
|
|
230
|
+
padding: 8px 12px;
|
|
137
231
|
font-size: 14px;
|
|
138
232
|
border-radius: 6px;
|
|
139
|
-
|
|
140
|
-
|
|
233
|
+
box-shadow: inset 0px 0px 1px #0b0b0b89;
|
|
234
|
+
flex-shrink: 0;
|
|
141
235
|
cursor: pointer;
|
|
142
236
|
}
|
|
143
237
|
.toastActions .action-btn:hover {
|
|
144
|
-
|
|
238
|
+
filter: grayscale(1);
|
|
145
239
|
}
|
|
146
240
|
|
|
147
241
|
/* Action button 1 */
|
|
148
|
-
.action-
|
|
149
|
-
color:
|
|
150
|
-
border-color:
|
|
151
|
-
background-color:
|
|
152
|
-
}
|
|
153
|
-
.action-
|
|
154
|
-
color:
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
color:
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
color:
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
.action-
|
|
169
|
-
|
|
170
|
-
color:
|
|
171
|
-
|
|
172
|
-
background-color: #aa44ff;
|
|
242
|
+
.action-btnA__success {
|
|
243
|
+
color: var(--primary-bg);
|
|
244
|
+
border-color: var(--success-color);
|
|
245
|
+
background-color: var(--success-color);
|
|
246
|
+
}
|
|
247
|
+
.action-btnA__error {
|
|
248
|
+
color: var(--primary-bg);
|
|
249
|
+
background-color: var(--error-color);
|
|
250
|
+
}
|
|
251
|
+
.action-btnA__info {
|
|
252
|
+
color: var(--primary-bg);
|
|
253
|
+
border-color: var(--info-color);
|
|
254
|
+
background-color: var(--info-color);
|
|
255
|
+
}
|
|
256
|
+
.action-btnA__warning {
|
|
257
|
+
color: var(--primary-bg);
|
|
258
|
+
border-color: var(--warning-color);
|
|
259
|
+
background-color: var(--warning-color);
|
|
260
|
+
}
|
|
261
|
+
.action-btnA__loading,
|
|
262
|
+
.action-btnA__submit {
|
|
263
|
+
color: var(--primary-bg);
|
|
264
|
+
border-color: var(--loading-color);
|
|
265
|
+
background-color: var(--loading-color);
|
|
173
266
|
}
|
|
267
|
+
|
|
174
268
|
/* Action button 2 */
|
|
175
|
-
.action-
|
|
176
|
-
color:
|
|
269
|
+
.action-btnB__success {
|
|
270
|
+
color: var(--success-color);
|
|
177
271
|
border-color: currentColor;
|
|
272
|
+
background-color: transparent;
|
|
178
273
|
}
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
color:
|
|
182
|
-
border-color: currentColor;
|
|
274
|
+
.action-btnB__error {
|
|
275
|
+
color: var(--error-color);
|
|
276
|
+
background-color: var(--error-bg);
|
|
183
277
|
}
|
|
184
|
-
.action-
|
|
185
|
-
color:
|
|
278
|
+
.action-btnB__info {
|
|
279
|
+
color: var(--info-color);
|
|
186
280
|
border-color: currentColor;
|
|
281
|
+
background-color: transparent;
|
|
187
282
|
}
|
|
188
|
-
.action-
|
|
189
|
-
color:
|
|
283
|
+
.action-btnB__warning {
|
|
284
|
+
color: var(--warning-color);
|
|
190
285
|
border-color: currentColor;
|
|
286
|
+
background-color: transparent;
|
|
191
287
|
}
|
|
192
|
-
.action-
|
|
193
|
-
.action-
|
|
194
|
-
color:
|
|
288
|
+
.action-btnB__loading,
|
|
289
|
+
.action-btnB__submit {
|
|
290
|
+
color: var(--loading-color);
|
|
195
291
|
border-color: currentColor;
|
|
292
|
+
background-color: transparent;
|
|
196
293
|
}
|
|
197
294
|
|
|
198
295
|
.progress-container {
|
|
@@ -211,44 +308,22 @@
|
|
|
211
308
|
}
|
|
212
309
|
|
|
213
310
|
.toast-progress.success {
|
|
214
|
-
background-color:
|
|
311
|
+
background-color: var(--success-color);
|
|
215
312
|
}
|
|
216
313
|
.toast-progress.error {
|
|
217
|
-
background-color:
|
|
314
|
+
background-color: var(--error-color);
|
|
218
315
|
}
|
|
219
316
|
.toast-progress.info {
|
|
220
|
-
background-color:
|
|
317
|
+
background-color: var(--info-color);
|
|
221
318
|
}
|
|
222
319
|
.toast-progress.warning {
|
|
223
|
-
background-color:
|
|
320
|
+
background-color: var(--warning-color);
|
|
224
321
|
}
|
|
225
322
|
.toast-progress.loading,
|
|
226
323
|
.toast-progress.submit {
|
|
227
|
-
background-color:
|
|
324
|
+
background-color: var(--loading-color);
|
|
228
325
|
}
|
|
229
326
|
|
|
230
|
-
.success {
|
|
231
|
-
color: #00c950;
|
|
232
|
-
background-color: rgba(0, 166, 61, 0.1);
|
|
233
|
-
}
|
|
234
|
-
.error {
|
|
235
|
-
color: #fb2c36;
|
|
236
|
-
background-color: rgba(231, 0, 12, 0.1);
|
|
237
|
-
}
|
|
238
|
-
.info {
|
|
239
|
-
color: #0088ff;
|
|
240
|
-
background-color: rgba(21, 93, 251, 0.1);
|
|
241
|
-
}
|
|
242
|
-
.warning {
|
|
243
|
-
color: #f0b100;
|
|
244
|
-
background-color: rgba(208, 135, 0, 0.1);
|
|
245
|
-
}
|
|
246
|
-
.loading,.submit {
|
|
247
|
-
color: #aa44ff;
|
|
248
|
-
background-color: rgba(124, 58, 237, 0.1);
|
|
249
|
-
}
|
|
250
|
-
|
|
251
|
-
|
|
252
327
|
/* Zoom animation */
|
|
253
328
|
/* Enter animate keyframes */
|
|
254
329
|
@keyframes upToDown {
|
|
@@ -317,14 +392,3 @@
|
|
|
317
392
|
transform: scale(0.6);
|
|
318
393
|
}
|
|
319
394
|
}
|
|
320
|
-
|
|
321
|
-
@media screen and (max-width: 375px) {
|
|
322
|
-
.toastContainer.top-right,
|
|
323
|
-
.toastContainer.bottom-right {
|
|
324
|
-
right: 0px;
|
|
325
|
-
}
|
|
326
|
-
.toastContainer.top-left,
|
|
327
|
-
.toastContainer.bottom-left {
|
|
328
|
-
left: 0px;
|
|
329
|
-
}
|
|
330
|
-
}
|
package/package.json
CHANGED
|
@@ -1,7 +1,19 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "d9-toast",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.3.21",
|
|
4
4
|
"description": "Customizable toast notifications for React",
|
|
5
|
+
"homepage": "https://codesandbox.io/embed/cqkyzm?view=preview",
|
|
6
|
+
"repository": {
|
|
7
|
+
"type": "git",
|
|
8
|
+
"url": "https://github.com/psathul073/d9-toast.git"
|
|
9
|
+
},
|
|
10
|
+
"bugs": {
|
|
11
|
+
"url": "https://github.com/psathul073/d9-toast/issues"
|
|
12
|
+
},
|
|
13
|
+
"funding": {
|
|
14
|
+
"type": "donation",
|
|
15
|
+
"url": "https://rzp.io/rzp/eVnJ0oP"
|
|
16
|
+
},
|
|
5
17
|
"main": "dist/index.js",
|
|
6
18
|
"type": "module",
|
|
7
19
|
"files": [
|
|
@@ -19,10 +31,6 @@
|
|
|
19
31
|
"react": ">=17",
|
|
20
32
|
"react-dom": ">=17"
|
|
21
33
|
},
|
|
22
|
-
"funding": {
|
|
23
|
-
"type": "donation",
|
|
24
|
-
"url": "https://rzp.io/rzp/eVnJ0oP"
|
|
25
|
-
},
|
|
26
34
|
"keywords": [
|
|
27
35
|
"react",
|
|
28
36
|
"toast",
|