d9-toast 1.0.16 → 1.1.16
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 +7 -5
- package/dist/Toast.js +18 -15
- package/dist/ToastContext.js +6 -1
- package/dist/toast.css +94 -18
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -56,21 +56,23 @@ import React from "react";
|
|
|
56
56
|
import { useToast } from "d9-toast";
|
|
57
57
|
|
|
58
58
|
function App() {
|
|
59
|
-
const toast = useToast();
|
|
60
59
|
|
|
61
|
-
const showToast = ()
|
|
62
|
-
|
|
60
|
+
const { showToast, removeToast } = useToast();
|
|
61
|
+
|
|
62
|
+
const Toast = () => {
|
|
63
|
+
showToast({
|
|
63
64
|
message: "Hello World!",
|
|
64
65
|
type: "success", // success | error | info | warning | loading | submit
|
|
65
66
|
duration: 3000,
|
|
66
67
|
actions: [
|
|
68
|
+
{ text: "Save", callback: () => console.log("Save clicked") },
|
|
67
69
|
{ text: "Undo", callback: () => console.log("Undo clicked") },
|
|
68
|
-
],
|
|
70
|
+
],
|
|
69
71
|
className: "bg-green-500 text-white shadow-lg", // optional Tailwind/custom styling
|
|
70
72
|
});
|
|
71
73
|
};
|
|
72
74
|
|
|
73
|
-
return <button onClick={
|
|
75
|
+
return <button onClick={Toast}>Show Toast</button>;
|
|
74
76
|
}
|
|
75
77
|
|
|
76
78
|
export default App;
|
package/dist/Toast.js
CHANGED
|
@@ -105,7 +105,7 @@ var Toast = function Toast(_ref) {
|
|
|
105
105
|
};
|
|
106
106
|
|
|
107
107
|
// Styles
|
|
108
|
-
var animation = "".concat(position.startsWith("top") && "upToDown" || position.startsWith("bottom") && "downToUp" || position.endsWith("top") && "upToDown" || position.endsWith("bottom") && "downToUp", " 0.3s
|
|
108
|
+
var animation = "".concat(position.startsWith("top") && "upToDown" || position.startsWith("bottom") && "downToUp" || position.endsWith("top") && "upToDown" || position.endsWith("bottom") && "downToUp", " 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)");
|
|
109
109
|
return /*#__PURE__*/_jsx(_Fragment, {
|
|
110
110
|
children: /*#__PURE__*/_jsxs("div", {
|
|
111
111
|
style: {
|
|
@@ -116,10 +116,13 @@ var Toast = function Toast(_ref) {
|
|
|
116
116
|
onMouseLeave: pauseOnHover ? resumeTimer : undefined,
|
|
117
117
|
children: [/*#__PURE__*/_jsxs("div", {
|
|
118
118
|
className: "toastHeader ".concat(type),
|
|
119
|
-
children: [/*#__PURE__*/_jsxs("
|
|
119
|
+
children: [/*#__PURE__*/_jsxs("div", {
|
|
120
|
+
className: "title",
|
|
120
121
|
children: [/*#__PURE__*/_jsx(Icons, {
|
|
121
122
|
name: type
|
|
122
|
-
}), " ",
|
|
123
|
+
}), " ", /*#__PURE__*/_jsx("p", {
|
|
124
|
+
children: type.toUpperCase()
|
|
125
|
+
})]
|
|
123
126
|
}), closable && /*#__PURE__*/_jsx("button", {
|
|
124
127
|
onClick: remove,
|
|
125
128
|
children: /*#__PURE__*/_jsx(Icons, {
|
|
@@ -134,18 +137,18 @@ var Toast = function Toast(_ref) {
|
|
|
134
137
|
}), actions.length > 0 && /*#__PURE__*/_jsx("div", {
|
|
135
138
|
className: "toastActions",
|
|
136
139
|
children: actions.map(function (a, idx) {
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
}
|
|
140
|
+
if (idx < 2) {
|
|
141
|
+
return /*#__PURE__*/_jsx("button", {
|
|
142
|
+
onClick: function onClick() {
|
|
143
|
+
var _a$callback;
|
|
144
|
+
return (_a$callback = a.callback) === null || _a$callback === void 0 ? void 0 : _a$callback.call(a, {
|
|
145
|
+
id: id
|
|
146
|
+
});
|
|
147
|
+
},
|
|
148
|
+
className: "action-btn ".concat(actions.length === 1 ? "action-btnA ".concat(type) : idx === 0 ? "action-btnB ".concat(type) : "action-btnA ".concat(type)),
|
|
149
|
+
children: a.text
|
|
150
|
+
}, idx);
|
|
151
|
+
}
|
|
149
152
|
})
|
|
150
153
|
}), progress && duration !== 0 && /*#__PURE__*/_jsx("div", {
|
|
151
154
|
className: "progress-container ".concat(type),
|
package/dist/ToastContext.js
CHANGED
|
@@ -36,6 +36,9 @@ export var ToastProvider = function ToastProvider(_ref) {
|
|
|
36
36
|
return Date.now() + Math.random();
|
|
37
37
|
};
|
|
38
38
|
|
|
39
|
+
// Positions.
|
|
40
|
+
var positions = ["top-left", "top-right", "bottom-left", "bottom-right", "center", "center-top", "center-bottom"];
|
|
41
|
+
|
|
39
42
|
// Show toast
|
|
40
43
|
var showToast = useCallback(function (toast) {
|
|
41
44
|
var newToast = _objectSpread({
|
|
@@ -65,7 +68,9 @@ export var ToastProvider = function ToastProvider(_ref) {
|
|
|
65
68
|
removeToast: removeToast
|
|
66
69
|
},
|
|
67
70
|
children: [children, /*#__PURE__*/_jsx("div", {
|
|
68
|
-
className: "toastContainer ".concat(
|
|
71
|
+
className: "toastContainer ".concat(positions.some(function (p) {
|
|
72
|
+
return p === position;
|
|
73
|
+
}) ? position : "top-right"),
|
|
69
74
|
children: toasts.map(function (toast) {
|
|
70
75
|
return /*#__PURE__*/_jsx(Toast, _objectSpread(_objectSpread({}, toast), {}, {
|
|
71
76
|
position: position,
|
package/dist/toast.css
CHANGED
|
@@ -1,8 +1,20 @@
|
|
|
1
|
+
/* Defaults */
|
|
2
|
+
button,
|
|
3
|
+
p,
|
|
4
|
+
span {
|
|
5
|
+
font: inherit;
|
|
6
|
+
color: inherit;
|
|
7
|
+
background-color: transparent;
|
|
8
|
+
border: none;
|
|
9
|
+
padding: 0;
|
|
10
|
+
margin: 0;
|
|
11
|
+
}
|
|
12
|
+
|
|
1
13
|
.toastContainer {
|
|
2
14
|
position: fixed;
|
|
3
15
|
z-index: 999;
|
|
4
16
|
display: flex;
|
|
5
|
-
gap:
|
|
17
|
+
gap: 14px;
|
|
6
18
|
}
|
|
7
19
|
.toastContainer.top-right {
|
|
8
20
|
flex-direction: column;
|
|
@@ -48,19 +60,20 @@
|
|
|
48
60
|
flex-direction: column;
|
|
49
61
|
gap: 8px;
|
|
50
62
|
padding: 6px;
|
|
63
|
+
margin: 6px 0;
|
|
51
64
|
border-radius: 8px;
|
|
52
65
|
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
|
|
53
|
-
font-family:
|
|
54
|
-
transition: all 0.3s ease-in
|
|
66
|
+
font-family: cursive;
|
|
67
|
+
transition: all 0.3s ease-in;
|
|
55
68
|
}
|
|
56
|
-
.
|
|
69
|
+
.light {
|
|
57
70
|
background-color: #f9fafb;
|
|
58
|
-
color: #
|
|
71
|
+
color: #111827;
|
|
59
72
|
}
|
|
60
73
|
|
|
61
|
-
.
|
|
74
|
+
.dark {
|
|
62
75
|
background-color: #030712;
|
|
63
|
-
color: #
|
|
76
|
+
color: #f3f4f6;
|
|
64
77
|
}
|
|
65
78
|
|
|
66
79
|
.toastHeader {
|
|
@@ -71,15 +84,23 @@
|
|
|
71
84
|
border-radius: 6px;
|
|
72
85
|
box-shadow: inset 0 1px rgb(0 0 0 / 0.05);
|
|
73
86
|
}
|
|
74
|
-
.toastHeader
|
|
75
|
-
display: flex;
|
|
87
|
+
.toastHeader .title {
|
|
88
|
+
display: inline-flex;
|
|
76
89
|
align-items: center;
|
|
77
90
|
gap: 8px;
|
|
78
91
|
font-size: 1rem;
|
|
79
92
|
font-weight: 500;
|
|
80
93
|
}
|
|
81
|
-
|
|
94
|
+
|
|
95
|
+
.toastHeader button {
|
|
96
|
+
display: flex;
|
|
97
|
+
align-items: center;
|
|
98
|
+
justify-content: center;
|
|
99
|
+
font-size: 1.3em;
|
|
82
100
|
cursor: pointer;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.toastHeader button:hover {
|
|
83
104
|
color: oklch(57.7% 0.245 27.325);
|
|
84
105
|
}
|
|
85
106
|
|
|
@@ -93,16 +114,16 @@
|
|
|
93
114
|
}
|
|
94
115
|
.toastHeader.info {
|
|
95
116
|
color: oklch(54.6% 0.245 262.881);
|
|
96
|
-
background-color: oklch(54.6% 0.245 262.881 / 0.
|
|
117
|
+
background-color: oklch(54.6% 0.245 262.881 / 0.2);
|
|
97
118
|
}
|
|
98
119
|
.toastHeader.warning {
|
|
99
120
|
color: oklch(68.1% 0.162 75.834);
|
|
100
|
-
background-color: oklch(68.1% 0.162 75.834 / 0.
|
|
121
|
+
background-color: oklch(68.1% 0.162 75.834 / 0.2);
|
|
101
122
|
}
|
|
102
123
|
.toastHeader.loading,
|
|
103
124
|
.toastHeader.submit {
|
|
104
|
-
color:
|
|
105
|
-
background-color:
|
|
125
|
+
color: oklab(54.13400000000001% 0.09644 -0.22706);
|
|
126
|
+
background-color: oklab(54.13400000000001% 0.09644 -0.22706 / 0.2);
|
|
106
127
|
}
|
|
107
128
|
.toastActions {
|
|
108
129
|
display: flex;
|
|
@@ -111,13 +132,68 @@
|
|
|
111
132
|
margin-right: 5px;
|
|
112
133
|
margin-bottom: 8px;
|
|
113
134
|
}
|
|
114
|
-
.toastActions
|
|
135
|
+
.toastActions .action-btn {
|
|
115
136
|
padding: 4px 12px;
|
|
116
137
|
font-size: 14px;
|
|
117
138
|
border-radius: 6px;
|
|
118
139
|
border: 1px solid;
|
|
119
140
|
cursor: pointer;
|
|
120
141
|
}
|
|
142
|
+
.toastActions .action-btn:hover {
|
|
143
|
+
opacity: 0.8;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
/* Action button 1 */
|
|
147
|
+
.action-btnA.success {
|
|
148
|
+
color: oklab(98.193% -0.01648 0.00729);
|
|
149
|
+
border-color: oklch(63.187% 0.18673 147.227);
|
|
150
|
+
background-color: oklch(63.187% 0.18673 147.227);
|
|
151
|
+
}
|
|
152
|
+
.action-btnA.error {
|
|
153
|
+
color: oklab(93.56400000000001% 0.02943 0.0093);
|
|
154
|
+
border-color: oklch(58.305% 0.23863 28.392);
|
|
155
|
+
background-color: oklch(58.305% 0.23863 28.392);
|
|
156
|
+
}
|
|
157
|
+
.action-btnA.info {
|
|
158
|
+
color: oklab(93.192% -0.00786 -0.03071);
|
|
159
|
+
border-color: oklch(54.742% 0.24331 262.725);
|
|
160
|
+
background-color: oklch(54.742% 0.24331 262.725);
|
|
161
|
+
}
|
|
162
|
+
.action-btnA.warning {
|
|
163
|
+
color: oklab(97.962% 0.00443 0.01503);
|
|
164
|
+
border-color: oklch(68.215% 0.14645 71.468);
|
|
165
|
+
background-color: oklch(68.215% 0.14645 71.468);
|
|
166
|
+
}
|
|
167
|
+
.action-btnA.loading,
|
|
168
|
+
.action-btnA.submit {
|
|
169
|
+
color: oklab(94.33500000000001% 0.01183 -0.02594);
|
|
170
|
+
border-color: oklab(54.13400000000001% 0.09644 -0.22706);
|
|
171
|
+
background-color: oklab(54.13400000000001% 0.09644 -0.22706);
|
|
172
|
+
}
|
|
173
|
+
/* Action button 2 */
|
|
174
|
+
.action-btnB.success {
|
|
175
|
+
color: oklch(63.187% 0.18673 147.227);
|
|
176
|
+
border-color: oklch(63.187% 0.18673 147.227);
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
.action-btnB.error {
|
|
180
|
+
color: oklch(58.305% 0.23863 28.392);
|
|
181
|
+
border-color: oklch(58.305% 0.23863 28.392);
|
|
182
|
+
}
|
|
183
|
+
.action-btnB.info {
|
|
184
|
+
color: oklch(54.742% 0.24331 262.725);
|
|
185
|
+
border-color: oklch(54.742% 0.24331 262.725);
|
|
186
|
+
}
|
|
187
|
+
.action-btnB.warning {
|
|
188
|
+
color: oklch(68.215% 0.14645 71.468);
|
|
189
|
+
border-color: oklch(68.215% 0.14645 71.468);
|
|
190
|
+
}
|
|
191
|
+
.action-btnB.loading,
|
|
192
|
+
.action-btnB.submit {
|
|
193
|
+
color: oklab(54.13400000000001% 0.09644 -0.22706);
|
|
194
|
+
border-color: oklab(54.13400000000001% 0.09644 -0.22706);
|
|
195
|
+
}
|
|
196
|
+
|
|
121
197
|
.progress-container {
|
|
122
198
|
position: absolute;
|
|
123
199
|
bottom: 0;
|
|
@@ -143,7 +219,7 @@
|
|
|
143
219
|
}
|
|
144
220
|
.progress-container.loading,
|
|
145
221
|
.progress-container.submit {
|
|
146
|
-
background-color:
|
|
222
|
+
background-color: oklab(54.13400000000001% 0.09644 -0.22706 / 0.25);
|
|
147
223
|
}
|
|
148
224
|
|
|
149
225
|
.toast-progress {
|
|
@@ -165,7 +241,7 @@
|
|
|
165
241
|
}
|
|
166
242
|
.toast-progress.loading,
|
|
167
243
|
.toast-progress.submit {
|
|
168
|
-
background-color:
|
|
244
|
+
background-color: oklab(54.13400000000001% 0.09644 -0.22706);
|
|
169
245
|
}
|
|
170
246
|
|
|
171
247
|
@keyframes downToUp {
|
|
@@ -190,7 +266,7 @@
|
|
|
190
266
|
}
|
|
191
267
|
}
|
|
192
268
|
|
|
193
|
-
@media screen and (max-width:
|
|
269
|
+
@media screen and (max-width: 375px) {
|
|
194
270
|
.toastContainer.top-right,
|
|
195
271
|
.toastContainer.bottom-right {
|
|
196
272
|
right: 0px;
|