d9-toast 1.0.2 → 1.0.4
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/dist/Icons.js +136 -125
- package/dist/Toast.js +61 -56
- package/dist/ToastContext.js +24 -31
- package/dist/index.js +3 -19
- package/package.json +1 -1
package/dist/Icons.js
CHANGED
|
@@ -1,152 +1,163 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports["default"] = void 0;
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
7
2
|
var Icons = function Icons(_ref) {
|
|
8
3
|
var name = _ref.name;
|
|
9
4
|
var icons = {
|
|
10
|
-
success: /*#__PURE__*/
|
|
5
|
+
success: /*#__PURE__*/_jsx("svg", {
|
|
11
6
|
xmlns: "http://www.w3.org/2000/svg",
|
|
12
7
|
viewBox: "0 0 24 24",
|
|
13
8
|
width: "1em",
|
|
14
|
-
height: "1em"
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
9
|
+
height: "1em",
|
|
10
|
+
children: /*#__PURE__*/_jsx("path", {
|
|
11
|
+
fill: "currentColor",
|
|
12
|
+
fillRule: "evenodd",
|
|
13
|
+
d: "M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10s-4.477 10-10 10m-1.177-7.86l-2.765-2.767L7 12.431l3.119 3.121a1 1 0 0 0 1.414 0l5.952-5.95l-1.062-1.062z"
|
|
14
|
+
})
|
|
15
|
+
}),
|
|
16
|
+
error: /*#__PURE__*/_jsx("svg", {
|
|
21
17
|
xmlns: "http://www.w3.org/2000/svg",
|
|
22
18
|
viewBox: "0 0 24 24",
|
|
23
19
|
width: "1em",
|
|
24
|
-
height: "1em"
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
20
|
+
height: "1em",
|
|
21
|
+
children: /*#__PURE__*/_jsx("path", {
|
|
22
|
+
d: "M16.707 2.293A.996.996 0 0 0 16 2H8a.996.996 0 0 0-.707.293l-5 5A.996.996 0 0 0 2 8v8c0 .266.105.52.293.707l5 5A.996.996 0 0 0 8 22h8c.266 0 .52-.105.707-.293l5-5A.996.996 0 0 0 22 16V8a.996.996 0 0 0-.293-.707l-5-5zM13 17h-2v-2h2v2zm0-4h-2V7h2v6z",
|
|
23
|
+
fill: "currentColor"
|
|
24
|
+
})
|
|
25
|
+
}),
|
|
26
|
+
info: /*#__PURE__*/_jsx("svg", {
|
|
30
27
|
xmlns: "http://www.w3.org/2000/svg",
|
|
31
28
|
viewBox: "0 0 24 24",
|
|
32
29
|
width: "1em",
|
|
33
|
-
height: "1em"
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
30
|
+
height: "1em",
|
|
31
|
+
children: /*#__PURE__*/_jsx("path", {
|
|
32
|
+
fill: "currentColor",
|
|
33
|
+
d: "M12 2c5.523 0 10 4.477 10 10a10 10 0 0 1-19.995.324L2 12l.004-.28C2.152 6.327 6.57 2 12 2m0 9h-1l-.117.007a1 1 0 0 0 0 1.986L11 13v3l.007.117a1 1 0 0 0 .876.876L12 17h1l.117-.007a1 1 0 0 0 .876-.876L14 16l-.007-.117a1 1 0 0 0-.764-.857l-.112-.02L13 15v-3l-.007-.117a1 1 0 0 0-.876-.876zm.01-3l-.127.007a1 1 0 0 0 0 1.986L12 10l.127-.007a1 1 0 0 0 0-1.986z"
|
|
34
|
+
})
|
|
35
|
+
}),
|
|
36
|
+
warning: /*#__PURE__*/_jsx("svg", {
|
|
39
37
|
xmlns: "http://www.w3.org/2000/svg",
|
|
40
38
|
viewBox: "0 0 24 24",
|
|
41
39
|
width: "1em",
|
|
42
|
-
height: "1em"
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
40
|
+
height: "1em",
|
|
41
|
+
children: /*#__PURE__*/_jsx("path", {
|
|
42
|
+
fill: "currentColor",
|
|
43
|
+
d: "m21.171 15.398l-5.912-9.854C14.483 4.251 13.296 3.511 12 3.511s-2.483.74-3.259 2.031l-5.912 9.856c-.786 1.309-.872 2.705-.235 3.83C3.23 20.354 4.472 21 6 21h12c1.528 0 2.77-.646 3.406-1.771s.551-2.521-.235-3.831M12 17.549c-.854 0-1.55-.695-1.55-1.549c0-.855.695-1.551 1.55-1.551s1.55.696 1.55 1.551c0 .854-.696 1.549-1.55 1.549m1.633-7.424c-.011.031-1.401 3.468-1.401 3.468c-.038.094-.13.156-.231.156s-.193-.062-.231-.156l-1.391-3.438a1.8 1.8 0 0 1-.129-.655c0-.965.785-1.75 1.75-1.75a1.752 1.752 0 0 1 1.633 2.375"
|
|
44
|
+
})
|
|
45
|
+
}),
|
|
46
|
+
loading: /*#__PURE__*/_jsx("svg", {
|
|
48
47
|
xmlns: "http://www.w3.org/2000/svg",
|
|
49
48
|
viewBox: "0 0 24 24",
|
|
50
49
|
width: "1em",
|
|
51
|
-
height: "1em"
|
|
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
|
-
|
|
50
|
+
height: "1em",
|
|
51
|
+
children: /*#__PURE__*/_jsxs("g", {
|
|
52
|
+
fill: "none",
|
|
53
|
+
stroke: "currentColor",
|
|
54
|
+
strokeLinecap: "round",
|
|
55
|
+
strokeLinejoin: "round",
|
|
56
|
+
strokeWidth: "2",
|
|
57
|
+
children: [/*#__PURE__*/_jsxs("path", {
|
|
58
|
+
strokeDasharray: "16",
|
|
59
|
+
strokeDashoffset: "16",
|
|
60
|
+
d: "M12 3c4.97 0 9 4.03 9 9",
|
|
61
|
+
children: [/*#__PURE__*/_jsx("animate", {
|
|
62
|
+
fill: "freeze",
|
|
63
|
+
attributeName: "stroke-dashoffset",
|
|
64
|
+
dur: "0.3s",
|
|
65
|
+
values: "16;0"
|
|
66
|
+
}), /*#__PURE__*/_jsx("animateTransform", {
|
|
67
|
+
attributeName: "transform",
|
|
68
|
+
dur: "1.5s",
|
|
69
|
+
repeatCount: "indefinite",
|
|
70
|
+
type: "rotate",
|
|
71
|
+
values: "0 12 12;360 12 12"
|
|
72
|
+
})]
|
|
73
|
+
}), /*#__PURE__*/_jsx("path", {
|
|
74
|
+
strokeDasharray: "64",
|
|
75
|
+
strokeDashoffset: "64",
|
|
76
|
+
strokeOpacity: ".3",
|
|
77
|
+
d: "M12 3c4.97 0 9 4.03 9 9c0 4.97 -4.03 9 -9 9c-4.97 0 -9 -4.03 -9 -9c0 -4.97 4.03 -9 9 -9Z",
|
|
78
|
+
children: /*#__PURE__*/_jsx("animate", {
|
|
79
|
+
fill: "freeze",
|
|
80
|
+
attributeName: "stroke-dashoffset",
|
|
81
|
+
dur: "1.2s",
|
|
82
|
+
values: "64;0"
|
|
83
|
+
})
|
|
84
|
+
})]
|
|
85
|
+
})
|
|
86
|
+
}),
|
|
87
|
+
submit: /*#__PURE__*/_jsx("svg", {
|
|
85
88
|
xmlns: "http://www.w3.org/2000/svg",
|
|
86
89
|
viewBox: "0 0 24 24",
|
|
87
90
|
width: "1em",
|
|
88
|
-
height: "1em"
|
|
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
|
-
|
|
91
|
+
height: "1em",
|
|
92
|
+
children: /*#__PURE__*/_jsxs("g", {
|
|
93
|
+
fill: "none",
|
|
94
|
+
stroke: "currentColor",
|
|
95
|
+
strokeLinecap: "round",
|
|
96
|
+
strokeLinejoin: "round",
|
|
97
|
+
strokeWidth: "2",
|
|
98
|
+
children: [/*#__PURE__*/_jsx("path", {
|
|
99
|
+
strokeDasharray: "2 4",
|
|
100
|
+
strokeDashoffset: "6",
|
|
101
|
+
d: "M12 21c-4.97 0 -9 -4.03 -9 -9c0 -4.97 4.03 -9 9 -9",
|
|
102
|
+
children: /*#__PURE__*/_jsx("animate", {
|
|
103
|
+
attributeName: "stroke-dashoffset",
|
|
104
|
+
dur: "0.6s",
|
|
105
|
+
repeatCount: "indefinite",
|
|
106
|
+
values: "6;0"
|
|
107
|
+
})
|
|
108
|
+
}), /*#__PURE__*/_jsx("path", {
|
|
109
|
+
strokeDasharray: "32",
|
|
110
|
+
strokeDashoffset: "32",
|
|
111
|
+
d: "M12 3c4.97 0 9 4.03 9 9c0 4.97 -4.03 9 -9 9",
|
|
112
|
+
children: /*#__PURE__*/_jsx("animate", {
|
|
113
|
+
fill: "freeze",
|
|
114
|
+
attributeName: "stroke-dashoffset",
|
|
115
|
+
begin: "0.1s",
|
|
116
|
+
dur: "0.4s",
|
|
117
|
+
values: "32;0"
|
|
118
|
+
})
|
|
119
|
+
}), /*#__PURE__*/_jsx("path", {
|
|
120
|
+
strokeDasharray: "10",
|
|
121
|
+
strokeDashoffset: "10",
|
|
122
|
+
d: "M12 16v-7.5",
|
|
123
|
+
children: /*#__PURE__*/_jsx("animate", {
|
|
124
|
+
fill: "freeze",
|
|
125
|
+
attributeName: "stroke-dashoffset",
|
|
126
|
+
begin: "0.5s",
|
|
127
|
+
dur: "0.2s",
|
|
128
|
+
values: "10;0"
|
|
129
|
+
})
|
|
130
|
+
}), /*#__PURE__*/_jsx("path", {
|
|
131
|
+
strokeDasharray: "6",
|
|
132
|
+
strokeDashoffset: "6",
|
|
133
|
+
d: "M12 8.5l3.5 3.5M12 8.5l-3.5 3.5",
|
|
134
|
+
children: /*#__PURE__*/_jsx("animate", {
|
|
135
|
+
fill: "freeze",
|
|
136
|
+
attributeName: "stroke-dashoffset",
|
|
137
|
+
begin: "0.7s",
|
|
138
|
+
dur: "0.2s",
|
|
139
|
+
values: "6;0"
|
|
140
|
+
})
|
|
141
|
+
})]
|
|
142
|
+
})
|
|
143
|
+
}),
|
|
144
|
+
X: /*#__PURE__*/_jsx("svg", {
|
|
136
145
|
xmlns: "http://www.w3.org/2000/svg",
|
|
137
146
|
viewBox: "0 0 24 24",
|
|
138
147
|
width: "1em",
|
|
139
|
-
height: "1em"
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
148
|
+
height: "1em",
|
|
149
|
+
children: /*#__PURE__*/_jsxs("g", {
|
|
150
|
+
fill: "currentColor",
|
|
151
|
+
fillRule: "evenodd",
|
|
152
|
+
clipRule: "evenodd",
|
|
153
|
+
children: [/*#__PURE__*/_jsx("path", {
|
|
154
|
+
d: "M5.47 5.47a.75.75 0 0 1 1.06 0l12 12a.75.75 0 1 1-1.06 1.06l-12-12a.75.75 0 0 1 0-1.06"
|
|
155
|
+
}), /*#__PURE__*/_jsx("path", {
|
|
156
|
+
d: "M18.53 5.47a.75.75 0 0 1 0 1.06l-12 12a.75.75 0 0 1-1.06-1.06l12-12a.75.75 0 0 1 1.06 0"
|
|
157
|
+
})]
|
|
158
|
+
})
|
|
159
|
+
})
|
|
149
160
|
};
|
|
150
161
|
return icons[name];
|
|
151
162
|
};
|
|
152
|
-
|
|
163
|
+
export default Icons;
|
package/dist/Toast.js
CHANGED
|
@@ -1,18 +1,12 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports["default"] = void 0;
|
|
7
|
-
var _react = require("react");
|
|
8
|
-
var _Icons = _interopRequireDefault(require("./Icons.js"));
|
|
9
|
-
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
10
1
|
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
|
|
11
2
|
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
12
3
|
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
|
|
13
4
|
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
|
|
14
5
|
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
15
6
|
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
|
|
7
|
+
import { useEffect, useRef, useState } from "react";
|
|
8
|
+
import Icons from "./Icons.js";
|
|
9
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
16
10
|
var Toast = function Toast(_ref) {
|
|
17
11
|
var id = _ref.id,
|
|
18
12
|
message = _ref.message,
|
|
@@ -34,20 +28,20 @@ var Toast = function Toast(_ref) {
|
|
|
34
28
|
pauseOnHover = _ref$pauseOnHover === void 0 ? true : _ref$pauseOnHover,
|
|
35
29
|
_ref$pauseOnFocusLoss = _ref.pauseOnFocusLoss,
|
|
36
30
|
pauseOnFocusLoss = _ref$pauseOnFocusLoss === void 0 ? true : _ref$pauseOnFocusLoss;
|
|
37
|
-
var intervalRef =
|
|
38
|
-
var start =
|
|
39
|
-
var remaining =
|
|
40
|
-
var _useState =
|
|
31
|
+
var intervalRef = useRef(null); // stores the interval ID
|
|
32
|
+
var start = useRef(Date.now()); // stores the moment timer started
|
|
33
|
+
var remaining = useRef(duration); // how much time is left
|
|
34
|
+
var _useState = useState(100),
|
|
41
35
|
_useState2 = _slicedToArray(_useState, 2),
|
|
42
36
|
progressWidth = _useState2[0],
|
|
43
37
|
setProgressWidth = _useState2[1]; // progress bar %
|
|
44
|
-
var _useState3 =
|
|
38
|
+
var _useState3 = useState(false),
|
|
45
39
|
_useState4 = _slicedToArray(_useState3, 2),
|
|
46
40
|
isPaused = _useState4[0],
|
|
47
41
|
setPaused = _useState4[1]; // For timer pause
|
|
48
42
|
|
|
49
43
|
// Start auto-close timer.
|
|
50
|
-
|
|
44
|
+
useEffect(function () {
|
|
51
45
|
if (duration !== 0) {
|
|
52
46
|
startTimer();
|
|
53
47
|
}
|
|
@@ -118,46 +112,57 @@ var Toast = function Toast(_ref) {
|
|
|
118
112
|
};
|
|
119
113
|
var keyframes = "\n @keyframes downToUp{\n from {\n transform: translateY(100%);\n opacity: 0;\n }\n to {\n transform: translateY(0);\n opacity: 1;\n }\n }\n @keyframes upToDown{\n from {\n transform: translateY(-100%);\n opacity: 0;\n }\n to {\n transform: translateY(0);\n opacity: 1;\n }\n }\n ";
|
|
120
114
|
var animation = "".concat(position.startsWith("top") && "upToDown" || position.startsWith("bottom") && "downToUp" || position.endsWith("top") && "upToDown" || position.endsWith("bottom") && "downToUp", " 0.3s ease-in");
|
|
121
|
-
return /*#__PURE__*/
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
},
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
onMouseLeave: pauseOnHover ? resumeTimer : undefined
|
|
128
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
129
|
-
className: "flex justify-between items-center px-1 py-0.5 rounded-md inset-shadow-2xs ".concat(colors[type])
|
|
130
|
-
}, /*#__PURE__*/React.createElement("span", {
|
|
131
|
-
className: "flex items-center gap-2 font-medium text-base"
|
|
132
|
-
}, /*#__PURE__*/React.createElement(_Icons["default"], {
|
|
133
|
-
name: type
|
|
134
|
-
}), " ", type.toUpperCase()), closable && /*#__PURE__*/React.createElement("button", {
|
|
135
|
-
className: " hover:text-red-600 cursor-pointer",
|
|
136
|
-
onClick: remove
|
|
137
|
-
}, /*#__PURE__*/React.createElement(_Icons["default"], {
|
|
138
|
-
name: "X"
|
|
139
|
-
}))), /*#__PURE__*/React.createElement("p", {
|
|
140
|
-
className: "p-1"
|
|
141
|
-
}, message), actions.length > 0 && /*#__PURE__*/React.createElement("div", {
|
|
142
|
-
className: "flex justify-end gap-2 mb-2"
|
|
143
|
-
}, actions.map(function (a, idx) {
|
|
144
|
-
return /*#__PURE__*/React.createElement("button", {
|
|
145
|
-
key: idx,
|
|
146
|
-
onClick: function onClick() {
|
|
147
|
-
var _a$callback;
|
|
148
|
-
return (_a$callback = a.callback) === null || _a$callback === void 0 ? void 0 : _a$callback.call(a, {
|
|
149
|
-
id: id
|
|
150
|
-
});
|
|
115
|
+
return /*#__PURE__*/_jsxs(_Fragment, {
|
|
116
|
+
children: [/*#__PURE__*/_jsx("style", {
|
|
117
|
+
children: keyframes
|
|
118
|
+
}), /*#__PURE__*/_jsxs("div", {
|
|
119
|
+
style: {
|
|
120
|
+
animation: animation
|
|
151
121
|
},
|
|
152
|
-
className: "
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
122
|
+
className: "w-80 ".concat(theme === "light" ? "bg-gray-50 text-gray-950" : "bg-gray-950 text-gray-50", " shadow-lg rounded-lg p-1.5 flex flex-col gap-2 relative"),
|
|
123
|
+
onMouseEnter: pauseOnHover ? pauseTimer : undefined,
|
|
124
|
+
onMouseLeave: pauseOnHover ? resumeTimer : undefined,
|
|
125
|
+
children: [/*#__PURE__*/_jsxs("div", {
|
|
126
|
+
className: "flex justify-between items-center px-1 py-0.5 rounded-md inset-shadow-2xs ".concat(colors[type]),
|
|
127
|
+
children: [/*#__PURE__*/_jsxs("span", {
|
|
128
|
+
className: "flex items-center gap-2 font-medium text-base",
|
|
129
|
+
children: [/*#__PURE__*/_jsx(Icons, {
|
|
130
|
+
name: type
|
|
131
|
+
}), " ", type.toUpperCase()]
|
|
132
|
+
}), closable && /*#__PURE__*/_jsx("button", {
|
|
133
|
+
className: " hover:text-red-600 cursor-pointer",
|
|
134
|
+
onClick: remove,
|
|
135
|
+
children: /*#__PURE__*/_jsx(Icons, {
|
|
136
|
+
name: "X"
|
|
137
|
+
})
|
|
138
|
+
})]
|
|
139
|
+
}), /*#__PURE__*/_jsx("p", {
|
|
140
|
+
className: "p-1",
|
|
141
|
+
children: message
|
|
142
|
+
}), actions.length > 0 && /*#__PURE__*/_jsx("div", {
|
|
143
|
+
className: "flex justify-end gap-2 mb-2",
|
|
144
|
+
children: actions.map(function (a, idx) {
|
|
145
|
+
return /*#__PURE__*/_jsx("button", {
|
|
146
|
+
onClick: function onClick() {
|
|
147
|
+
var _a$callback;
|
|
148
|
+
return (_a$callback = a.callback) === null || _a$callback === void 0 ? void 0 : _a$callback.call(a, {
|
|
149
|
+
id: id
|
|
150
|
+
});
|
|
151
|
+
},
|
|
152
|
+
className: "px-3 py-1 text-sm rounded ".concat(idx === 1 ? "".concat(colors[type], " bg-transparent") : colors[type], " ").concat(theme === "dark" ? "text-gray-50" : "text-gray-900", " ring cursor-pointer"),
|
|
153
|
+
children: a.text
|
|
154
|
+
}, idx);
|
|
155
|
+
})
|
|
156
|
+
}), progress && duration !== 0 && /*#__PURE__*/_jsx("div", {
|
|
157
|
+
className: "h-1 w-full bg-gray-200 rounded overflow-hidden absolute bottom-0 left-0",
|
|
158
|
+
children: /*#__PURE__*/_jsx("div", {
|
|
159
|
+
className: "h-1 ".concat(colors[type], " transition-all"),
|
|
160
|
+
style: {
|
|
161
|
+
width: "".concat(progressWidth, "%")
|
|
162
|
+
}
|
|
163
|
+
})
|
|
164
|
+
})]
|
|
165
|
+
})]
|
|
166
|
+
});
|
|
162
167
|
};
|
|
163
|
-
|
|
168
|
+
export default Toast;
|
package/dist/ToastContext.js
CHANGED
|
@@ -1,14 +1,4 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
1
|
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
4
|
-
Object.defineProperty(exports, "__esModule", {
|
|
5
|
-
value: true
|
|
6
|
-
});
|
|
7
|
-
exports.useToast = exports.ToastProvider = void 0;
|
|
8
|
-
var _react = require("react");
|
|
9
|
-
var _Toast = _interopRequireDefault(require("./Toast.js"));
|
|
10
|
-
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
11
|
-
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
12
2
|
function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
|
|
13
3
|
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
14
4
|
function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
|
|
@@ -24,17 +14,20 @@ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r)
|
|
|
24
14
|
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
|
|
25
15
|
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
26
16
|
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
17
|
+
import { createContext, useCallback, useContext, useState } from "react";
|
|
18
|
+
import Toast from "./Toast.js";
|
|
19
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
20
|
+
var ToastContext = /*#__PURE__*/createContext();
|
|
21
|
+
export var useToast = function useToast() {
|
|
22
|
+
return useContext(ToastContext);
|
|
30
23
|
};
|
|
31
24
|
var id = 0; // For unique toast id.
|
|
32
25
|
|
|
33
|
-
var ToastProvider =
|
|
26
|
+
export var ToastProvider = function ToastProvider(_ref) {
|
|
34
27
|
var children = _ref.children,
|
|
35
28
|
_ref$position = _ref.position,
|
|
36
29
|
position = _ref$position === void 0 ? "top-right" : _ref$position;
|
|
37
|
-
var _useState =
|
|
30
|
+
var _useState = useState([]),
|
|
38
31
|
_useState2 = _slicedToArray(_useState, 2),
|
|
39
32
|
toasts = _useState2[0],
|
|
40
33
|
setToasts = _useState2[1];
|
|
@@ -62,7 +55,7 @@ var ToastProvider = exports.ToastProvider = function ToastProvider(_ref) {
|
|
|
62
55
|
};
|
|
63
56
|
|
|
64
57
|
// Show toast.
|
|
65
|
-
var showToast =
|
|
58
|
+
var showToast = useCallback(function (toast) {
|
|
66
59
|
id++;
|
|
67
60
|
// Set new toast.
|
|
68
61
|
var newToast = _objectSpread({
|
|
@@ -81,28 +74,28 @@ var ToastProvider = exports.ToastProvider = function ToastProvider(_ref) {
|
|
|
81
74
|
}, []);
|
|
82
75
|
|
|
83
76
|
// Remove toast.
|
|
84
|
-
var removeToast =
|
|
77
|
+
var removeToast = useCallback(function (id) {
|
|
85
78
|
setToasts(function (prev) {
|
|
86
79
|
return prev.filter(function (t) {
|
|
87
80
|
return t.id !== id;
|
|
88
81
|
});
|
|
89
82
|
});
|
|
90
83
|
}, []);
|
|
91
|
-
return /*#__PURE__*/
|
|
84
|
+
return /*#__PURE__*/_jsxs(ToastContext.Provider, {
|
|
92
85
|
value: {
|
|
93
86
|
showToast: showToast,
|
|
94
87
|
removeToast: removeToast
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
}
|
|
106
|
-
})
|
|
107
|
-
})
|
|
88
|
+
},
|
|
89
|
+
children: [children, /*#__PURE__*/_jsx("div", {
|
|
90
|
+
className: "fixed z-50 flex gap-3 ".concat(getPositionClasses(position)),
|
|
91
|
+
children: toasts.map(function (toast) {
|
|
92
|
+
return /*#__PURE__*/_jsx(Toast, _objectSpread(_objectSpread({}, toast), {}, {
|
|
93
|
+
position: position,
|
|
94
|
+
remove: function remove() {
|
|
95
|
+
return removeToast(toast.id);
|
|
96
|
+
}
|
|
97
|
+
}), toast.id);
|
|
98
|
+
})
|
|
99
|
+
})]
|
|
100
|
+
});
|
|
108
101
|
};
|
package/dist/index.js
CHANGED
|
@@ -1,19 +1,3 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
Object.defineProperty(exports, "ToastProvider", {
|
|
7
|
-
enumerable: true,
|
|
8
|
-
get: function get() {
|
|
9
|
-
return _ToastContext.ToastProvider;
|
|
10
|
-
}
|
|
11
|
-
});
|
|
12
|
-
Object.defineProperty(exports, "useToast", {
|
|
13
|
-
enumerable: true,
|
|
14
|
-
get: function get() {
|
|
15
|
-
return _ToastContext.useToast;
|
|
16
|
-
}
|
|
17
|
-
});
|
|
18
|
-
require("../dist/toast.css");
|
|
19
|
-
var _ToastContext = require("./ToastContext.js");
|
|
1
|
+
import React, { createContext, useState, useContext, useRef, useEffect, useCallback } from "react";
|
|
2
|
+
import "../dist/toast.css";
|
|
3
|
+
export { ToastProvider, useToast } from "./ToastContext.js";
|