react-toast-msg 1.0.2 → 1.1.0
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/LICENSE.md +21 -0
- package/README.md +30 -26
- package/dist/index.css +1 -1
- package/dist/index.css.map +1 -1
- package/dist/index.es.css +1 -1
- package/dist/index.es.css.map +1 -1
- package/dist/index.es.js +92 -36
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +92 -36
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/LICENSE.md
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2025 SudhuCodes
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -2,27 +2,22 @@
|
|
|
2
2
|
|
|
3
3
|
A lightweight, zero-config, customizable React toast notification library — just plug and play.
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## Features
|
|
6
6
|
|
|
7
|
-
-
|
|
8
|
-
-
|
|
9
|
-
-
|
|
10
|
-
-
|
|
11
|
-
- ✅ Works with React 18+
|
|
7
|
+
- Extremely fast and minimal
|
|
8
|
+
- Works with both `import` and `require`
|
|
9
|
+
- Easy to style with utility classes
|
|
10
|
+
- Works with React 18+
|
|
12
11
|
|
|
13
|
-
---
|
|
14
12
|
|
|
15
|
-
##
|
|
13
|
+
## Installation
|
|
16
14
|
|
|
17
15
|
```bash
|
|
18
16
|
npm install react-toast-msg
|
|
19
|
-
# or
|
|
20
|
-
yarn add react-toast-msg
|
|
21
17
|
````
|
|
22
18
|
|
|
23
|
-
---
|
|
24
19
|
|
|
25
|
-
##
|
|
20
|
+
## Usage
|
|
26
21
|
|
|
27
22
|
### 1. Add the `ToastContainer` at the root of your app (once):
|
|
28
23
|
|
|
@@ -39,9 +34,8 @@ function App() {
|
|
|
39
34
|
}
|
|
40
35
|
```
|
|
41
36
|
|
|
42
|
-
---
|
|
43
37
|
|
|
44
|
-
##
|
|
38
|
+
## Variants
|
|
45
39
|
|
|
46
40
|
```js
|
|
47
41
|
toast('Default toast');
|
|
@@ -50,15 +44,13 @@ toast.error('Something went wrong!');
|
|
|
50
44
|
toast.info('Some useful info');
|
|
51
45
|
```
|
|
52
46
|
|
|
53
|
-
---
|
|
54
47
|
|
|
55
|
-
##
|
|
48
|
+
## Customization (Coming Soon)
|
|
56
49
|
|
|
57
50
|
Style your toasts with Tailwind, classNames, or inline styles. Theme support and placement config coming in the next release.
|
|
58
51
|
|
|
59
|
-
---
|
|
60
52
|
|
|
61
|
-
##
|
|
53
|
+
## API
|
|
62
54
|
|
|
63
55
|
| Function | Description |
|
|
64
56
|
| -------------------- | ------------------ |
|
|
@@ -67,16 +59,28 @@ Style your toasts with Tailwind, classNames, or inline styles. Theme support and
|
|
|
67
59
|
| `toast.error(msg)` | Error variant |
|
|
68
60
|
| `toast.info(msg)` | Info variant |
|
|
69
61
|
|
|
70
|
-
---
|
|
71
62
|
|
|
72
|
-
##
|
|
63
|
+
## Contributing
|
|
73
64
|
|
|
74
|
-
|
|
65
|
+
> react-toast-msg is an open-source project — and you can help make it better! Whether you want to:
|
|
75
66
|
|
|
76
|
-
|
|
67
|
+
- Suggest new features
|
|
68
|
+
- Improve performance or accessibility
|
|
69
|
+
- Fix bugs
|
|
70
|
+
- Refactor code or improve documentation
|
|
77
71
|
|
|
78
|
-
## 🌐 Links
|
|
79
72
|
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
73
|
+
We’d love your input!
|
|
74
|
+
|
|
75
|
+
Start by checking out the [GitHub repo](https://github.com/sudhucodes/react-toast-msg) — issues, discussions, and PRs are welcome. Let's build something amazing together 🚀
|
|
76
|
+
|
|
77
|
+
## License
|
|
78
|
+
|
|
79
|
+
MIT © [SudhuCodes](https://github.com/sudhucodes)
|
|
80
|
+
|
|
81
|
+
|
|
82
|
+
## Links
|
|
83
|
+
|
|
84
|
+
* [GitHub Repo](https://github.com/sudhucodes/react-toast-msg)
|
|
85
|
+
* [Issue Tracker](https://github.com/sudhucodes/react-toast-msg/issues)
|
|
86
|
+
* [npm Package](https://www.npmjs.com/package/react-toast-msg)
|
package/dist/index.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
.toast-container{display:flex;flex-direction:column;gap:8px;left:50%;max-width:90vw;position:fixed;top:20px;transform:translateX(-50%);width:auto;z-index:9999}.toast{animation:fadeInOut 3s ease-in-out forwards;
|
|
1
|
+
:root{--color-success-bg:oklch(0.962 0.044 156.743);--color-success-border:oklch(0.723 0.219 149.579);--color-success-text:oklch(0.393 0.095 152.535);--color-success-icon:oklch(0.627 0.194 149.214)}*{box-sizing:border-box;margin:0;padding:0}.toast-container{display:flex;flex-direction:column;gap:8px;left:50%;max-width:90vw;position:fixed;top:20px;transform:translateX(-50%);width:auto;z-index:9999}.toast{align-items:start;animation:fadeInOut 3s ease-in-out forwards;border-left:4px solid;border-radius:.375rem;display:flex;justify-content:space-between;opacity:0;padding:.5rem .5rem .5rem 0;width:300px}.toast-success{background-color:var(--color-success-bg);border-left-color:var(--color-success-border);color:var(--color-success-text)}.toast-content{align-items:center;display:flex;padding:.5rem}.toast-icon{color:var(--color-success-icon);flex-shrink:0;height:1.75rem;margin-right:.5rem;width:1.75rem}.toast-close{background:none;border:none;color:var(--color-success-text);cursor:pointer;margin-left:1rem}.close-icon{height:1rem;width:1rem}@keyframes fadeInOut{0%{opacity:0;transform:translateY(-10px)}10%{opacity:1;transform:translateY(0)}90%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-10px)}}
|
|
2
2
|
/*# sourceMappingURL=index.css.map */
|
package/dist/index.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["global.css"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sources":["global.css"],"names":[],"mappings":"AAAA,MACI,6CAA8C,CAC9C,iDAAkD,CAClD,+CAAgD,CAChD,+CACJ,CAEA,EAGI,qBAAsB,CAFtB,QAAS,CACT,SAEJ,CAEA,iBAMI,YAAa,CACb,qBAAsB,CACtB,OAAQ,CALR,QAAS,CAOT,cAAe,CATf,cAAe,CACf,QAAS,CAET,0BAA2B,CAK3B,UAAW,CAJX,YAMJ,CAEA,OAEI,iBAAkB,CAQlB,2CAA4C,CAH5C,qBAAsB,CACtB,qBAAuB,CAPvB,YAAa,CAEb,6BAA8B,CAM9B,SAAU,CAHV,2BAAkB,CAFlB,WAOJ,CAEA,eACI,wCAAyC,CACzC,6CAA8C,CAC9C,+BACJ,CAEA,eAEI,kBAAmB,CADnB,YAAa,CAEb,aACJ,CAEA,YAII,+BAAgC,CAChC,aAAc,CAHd,cAAe,CACf,kBAAoB,CAFpB,aAKJ,CAEA,aAEI,eAAgB,CAChB,WAAY,CACZ,+BAAgC,CAChC,cAAe,CAJf,gBAKJ,CAEA,YAEI,WAAY,CADZ,UAEJ,CAEA,qBACI,GACI,SAAU,CACV,2BACJ,CAEA,IACI,SAAU,CACV,uBACJ,CAEA,IACI,SAAU,CACV,uBACJ,CAEA,GACI,SAAU,CACV,2BACJ,CACJ","file":"index.css","sourcesContent":[":root {\r\n --color-success-bg: oklch(0.962 0.044 156.743);\r\n --color-success-border: oklch(0.723 0.219 149.579);\r\n --color-success-text: oklch(0.393 0.095 152.535);\r\n --color-success-icon: oklch(0.627 0.194 149.214);\r\n}\r\n\r\n* {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n}\r\n\r\n.toast-container {\r\n position: fixed;\r\n top: 20px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n z-index: 9999;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 8px;\r\n width: auto;\r\n max-width: 90vw;\r\n}\r\n\r\n.toast {\r\n display: flex;\r\n align-items: start;\r\n justify-content: space-between;\r\n width: 300px;\r\n padding: 0.5rem;\r\n padding-left: 0rem;\r\n border-left: 4px solid;\r\n border-radius: 0.375rem;\r\n opacity: 0;\r\n animation: fadeInOut 3s ease-in-out forwards;\r\n}\r\n\r\n.toast-success {\r\n background-color: var(--color-success-bg);\r\n border-left-color: var(--color-success-border);\r\n color: var(--color-success-text);\r\n}\r\n\r\n.toast-content {\r\n display: flex;\r\n align-items: center;\r\n padding: 0.5rem;\r\n}\r\n\r\n.toast-icon {\r\n width: 1.75rem;\r\n height: 1.75rem;\r\n margin-right: 0.5rem;\r\n color: var(--color-success-icon);\r\n flex-shrink: 0;\r\n}\r\n\r\n.toast-close {\r\n margin-left: 1rem;\r\n background: none;\r\n border: none;\r\n color: var(--color-success-text);\r\n cursor: pointer;\r\n}\r\n\r\n.close-icon {\r\n width: 1rem;\r\n height: 1rem;\r\n}\r\n\r\n@keyframes fadeInOut {\r\n 0% {\r\n opacity: 0;\r\n transform: translateY(-10px);\r\n }\r\n\r\n 10% {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n\r\n 90% {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n\r\n 100% {\r\n opacity: 0;\r\n transform: translateY(-10px);\r\n }\r\n}"]}
|
package/dist/index.es.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
.toast-container{display:flex;flex-direction:column;gap:8px;left:50%;max-width:90vw;position:fixed;top:20px;transform:translateX(-50%);width:auto;z-index:9999}.toast{animation:fadeInOut 3s ease-in-out forwards;
|
|
1
|
+
:root{--color-success-bg:oklch(0.962 0.044 156.743);--color-success-border:oklch(0.723 0.219 149.579);--color-success-text:oklch(0.393 0.095 152.535);--color-success-icon:oklch(0.627 0.194 149.214)}*{box-sizing:border-box;margin:0;padding:0}.toast-container{display:flex;flex-direction:column;gap:8px;left:50%;max-width:90vw;position:fixed;top:20px;transform:translateX(-50%);width:auto;z-index:9999}.toast{align-items:start;animation:fadeInOut 3s ease-in-out forwards;border-left:4px solid;border-radius:.375rem;display:flex;justify-content:space-between;opacity:0;padding:.5rem .5rem .5rem 0;width:300px}.toast-success{background-color:var(--color-success-bg);border-left-color:var(--color-success-border);color:var(--color-success-text)}.toast-content{align-items:center;display:flex;padding:.5rem}.toast-icon{color:var(--color-success-icon);flex-shrink:0;height:1.75rem;margin-right:.5rem;width:1.75rem}.toast-close{background:none;border:none;color:var(--color-success-text);cursor:pointer;margin-left:1rem}.close-icon{height:1rem;width:1rem}@keyframes fadeInOut{0%{opacity:0;transform:translateY(-10px)}10%{opacity:1;transform:translateY(0)}90%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-10px)}}
|
|
2
2
|
/*# sourceMappingURL=index.es.css.map */
|
package/dist/index.es.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["global.css"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sources":["global.css"],"names":[],"mappings":"AAAA,MACI,6CAA8C,CAC9C,iDAAkD,CAClD,+CAAgD,CAChD,+CACJ,CAEA,EAGI,qBAAsB,CAFtB,QAAS,CACT,SAEJ,CAEA,iBAMI,YAAa,CACb,qBAAsB,CACtB,OAAQ,CALR,QAAS,CAOT,cAAe,CATf,cAAe,CACf,QAAS,CAET,0BAA2B,CAK3B,UAAW,CAJX,YAMJ,CAEA,OAEI,iBAAkB,CAQlB,2CAA4C,CAH5C,qBAAsB,CACtB,qBAAuB,CAPvB,YAAa,CAEb,6BAA8B,CAM9B,SAAU,CAHV,2BAAkB,CAFlB,WAOJ,CAEA,eACI,wCAAyC,CACzC,6CAA8C,CAC9C,+BACJ,CAEA,eAEI,kBAAmB,CADnB,YAAa,CAEb,aACJ,CAEA,YAII,+BAAgC,CAChC,aAAc,CAHd,cAAe,CACf,kBAAoB,CAFpB,aAKJ,CAEA,aAEI,eAAgB,CAChB,WAAY,CACZ,+BAAgC,CAChC,cAAe,CAJf,gBAKJ,CAEA,YAEI,WAAY,CADZ,UAEJ,CAEA,qBACI,GACI,SAAU,CACV,2BACJ,CAEA,IACI,SAAU,CACV,uBACJ,CAEA,IACI,SAAU,CACV,uBACJ,CAEA,GACI,SAAU,CACV,2BACJ,CACJ","file":"index.es.css","sourcesContent":[":root {\r\n --color-success-bg: oklch(0.962 0.044 156.743);\r\n --color-success-border: oklch(0.723 0.219 149.579);\r\n --color-success-text: oklch(0.393 0.095 152.535);\r\n --color-success-icon: oklch(0.627 0.194 149.214);\r\n}\r\n\r\n* {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n}\r\n\r\n.toast-container {\r\n position: fixed;\r\n top: 20px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n z-index: 9999;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 8px;\r\n width: auto;\r\n max-width: 90vw;\r\n}\r\n\r\n.toast {\r\n display: flex;\r\n align-items: start;\r\n justify-content: space-between;\r\n width: 300px;\r\n padding: 0.5rem;\r\n padding-left: 0rem;\r\n border-left: 4px solid;\r\n border-radius: 0.375rem;\r\n opacity: 0;\r\n animation: fadeInOut 3s ease-in-out forwards;\r\n}\r\n\r\n.toast-success {\r\n background-color: var(--color-success-bg);\r\n border-left-color: var(--color-success-border);\r\n color: var(--color-success-text);\r\n}\r\n\r\n.toast-content {\r\n display: flex;\r\n align-items: center;\r\n padding: 0.5rem;\r\n}\r\n\r\n.toast-icon {\r\n width: 1.75rem;\r\n height: 1.75rem;\r\n margin-right: 0.5rem;\r\n color: var(--color-success-icon);\r\n flex-shrink: 0;\r\n}\r\n\r\n.toast-close {\r\n margin-left: 1rem;\r\n background: none;\r\n border: none;\r\n color: var(--color-success-text);\r\n cursor: pointer;\r\n}\r\n\r\n.close-icon {\r\n width: 1rem;\r\n height: 1rem;\r\n}\r\n\r\n@keyframes fadeInOut {\r\n 0% {\r\n opacity: 0;\r\n transform: translateY(-10px);\r\n }\r\n\r\n 10% {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n\r\n 90% {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n\r\n 100% {\r\n opacity: 0;\r\n transform: translateY(-10px);\r\n }\r\n}"]}
|
package/dist/index.es.js
CHANGED
|
@@ -11,6 +11,14 @@ function _arrayWithHoles(r) {
|
|
|
11
11
|
function _arrayWithoutHoles(r) {
|
|
12
12
|
if (Array.isArray(r)) return _arrayLikeToArray(r);
|
|
13
13
|
}
|
|
14
|
+
function _defineProperty(e, r, t) {
|
|
15
|
+
return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
|
|
16
|
+
value: t,
|
|
17
|
+
enumerable: !0,
|
|
18
|
+
configurable: !0,
|
|
19
|
+
writable: !0
|
|
20
|
+
}) : e[r] = t, e;
|
|
21
|
+
}
|
|
14
22
|
function _iterableToArray(r) {
|
|
15
23
|
if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r);
|
|
16
24
|
}
|
|
@@ -47,12 +55,47 @@ function _nonIterableRest() {
|
|
|
47
55
|
function _nonIterableSpread() {
|
|
48
56
|
throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
49
57
|
}
|
|
58
|
+
function ownKeys(e, r) {
|
|
59
|
+
var t = Object.keys(e);
|
|
60
|
+
if (Object.getOwnPropertySymbols) {
|
|
61
|
+
var o = Object.getOwnPropertySymbols(e);
|
|
62
|
+
r && (o = o.filter(function (r) {
|
|
63
|
+
return Object.getOwnPropertyDescriptor(e, r).enumerable;
|
|
64
|
+
})), t.push.apply(t, o);
|
|
65
|
+
}
|
|
66
|
+
return t;
|
|
67
|
+
}
|
|
68
|
+
function _objectSpread2(e) {
|
|
69
|
+
for (var r = 1; r < arguments.length; r++) {
|
|
70
|
+
var t = null != arguments[r] ? arguments[r] : {};
|
|
71
|
+
r % 2 ? ownKeys(Object(t), !0).forEach(function (r) {
|
|
72
|
+
_defineProperty(e, r, t[r]);
|
|
73
|
+
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
|
|
74
|
+
Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
|
|
75
|
+
});
|
|
76
|
+
}
|
|
77
|
+
return e;
|
|
78
|
+
}
|
|
50
79
|
function _slicedToArray(r, e) {
|
|
51
80
|
return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
|
|
52
81
|
}
|
|
53
82
|
function _toConsumableArray(r) {
|
|
54
83
|
return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread();
|
|
55
84
|
}
|
|
85
|
+
function _toPrimitive(t, r) {
|
|
86
|
+
if ("object" != typeof t || !t) return t;
|
|
87
|
+
var e = t[Symbol.toPrimitive];
|
|
88
|
+
if (void 0 !== e) {
|
|
89
|
+
var i = e.call(t, r || "default");
|
|
90
|
+
if ("object" != typeof i) return i;
|
|
91
|
+
throw new TypeError("@@toPrimitive must return a primitive value.");
|
|
92
|
+
}
|
|
93
|
+
return ("string" === r ? String : Number)(t);
|
|
94
|
+
}
|
|
95
|
+
function _toPropertyKey(t) {
|
|
96
|
+
var i = _toPrimitive(t, "string");
|
|
97
|
+
return "symbol" == typeof i ? i : i + "";
|
|
98
|
+
}
|
|
56
99
|
function _unsupportedIterableToArray(r, a) {
|
|
57
100
|
if (r) {
|
|
58
101
|
if ("string" == typeof r) return _arrayLikeToArray(r, a);
|
|
@@ -61,36 +104,6 @@ function _unsupportedIterableToArray(r, a) {
|
|
|
61
104
|
}
|
|
62
105
|
}
|
|
63
106
|
|
|
64
|
-
function styleInject(css, ref) {
|
|
65
|
-
if ( ref === void 0 ) ref = {};
|
|
66
|
-
var insertAt = ref.insertAt;
|
|
67
|
-
|
|
68
|
-
if (!css || typeof document === 'undefined') { return; }
|
|
69
|
-
|
|
70
|
-
var head = document.head || document.getElementsByTagName('head')[0];
|
|
71
|
-
var style = document.createElement('style');
|
|
72
|
-
style.type = 'text/css';
|
|
73
|
-
|
|
74
|
-
if (insertAt === 'top') {
|
|
75
|
-
if (head.firstChild) {
|
|
76
|
-
head.insertBefore(style, head.firstChild);
|
|
77
|
-
} else {
|
|
78
|
-
head.appendChild(style);
|
|
79
|
-
}
|
|
80
|
-
} else {
|
|
81
|
-
head.appendChild(style);
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
if (style.styleSheet) {
|
|
85
|
-
style.styleSheet.cssText = css;
|
|
86
|
-
} else {
|
|
87
|
-
style.appendChild(document.createTextNode(css));
|
|
88
|
-
}
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
var css_248z = ".toast-container {\r\n position: fixed;\r\n top: 20px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n z-index: 9999;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 8px;\r\n width: auto;\r\n max-width: 90vw;\r\n}\r\n\r\n.toast {\r\n padding: 10px 20px;\r\n border-radius: 4px;\r\n color: #000;\r\n background-color: #fff;\r\n box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);\r\n min-width: 200px;\r\n max-width: 400px;\r\n opacity: 0;\r\n animation: fadeInOut 3s ease-in-out forwards;\r\n}\r\n\r\n.toast.success {\r\n background-color: #d4edda;\r\n}\r\n\r\n.toast.error {\r\n background-color: #f8d7da;\r\n}\r\n\r\n@keyframes fadeInOut {\r\n 0% {\r\n opacity: 0;\r\n transform: translateY(-10px);\r\n }\r\n\r\n 10% {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n\r\n 90% {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n\r\n 100% {\r\n opacity: 0;\r\n transform: translateY(-10px);\r\n }\r\n}";
|
|
92
|
-
styleInject(css_248z);
|
|
93
|
-
|
|
94
107
|
function ToastContainer() {
|
|
95
108
|
var _useState = useState([]),
|
|
96
109
|
_useState2 = _slicedToArray(_useState, 2),
|
|
@@ -98,23 +111,66 @@ function ToastContainer() {
|
|
|
98
111
|
setToasts = _useState2[1];
|
|
99
112
|
useEffect(function () {
|
|
100
113
|
_register(function (toast) {
|
|
114
|
+
var newToast = _objectSpread2(_objectSpread2({}, toast), {}, {
|
|
115
|
+
id: Date.now() + Math.random()
|
|
116
|
+
});
|
|
101
117
|
setToasts(function (prev) {
|
|
102
|
-
return [].concat(_toConsumableArray(prev)
|
|
118
|
+
return [newToast].concat(_toConsumableArray(prev));
|
|
103
119
|
});
|
|
104
120
|
setTimeout(function () {
|
|
105
121
|
setToasts(function (prev) {
|
|
106
|
-
return prev.
|
|
122
|
+
return prev.filter(function (t) {
|
|
123
|
+
return t.id !== newToast.id;
|
|
124
|
+
});
|
|
107
125
|
});
|
|
108
126
|
}, 3000);
|
|
109
127
|
});
|
|
110
128
|
}, []);
|
|
111
129
|
return /*#__PURE__*/React.createElement("div", {
|
|
112
130
|
className: "toast-container"
|
|
113
|
-
}, toasts.map(function (t
|
|
131
|
+
}, toasts.map(function (t) {
|
|
114
132
|
return /*#__PURE__*/React.createElement("div", {
|
|
115
|
-
key:
|
|
116
|
-
className: "toast ".concat(t.type)
|
|
117
|
-
},
|
|
133
|
+
key: t.id,
|
|
134
|
+
className: "toast toast-".concat(t.type)
|
|
135
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
136
|
+
className: "toast-content"
|
|
137
|
+
}, /*#__PURE__*/React.createElement("svg", {
|
|
138
|
+
className: "toast-icon",
|
|
139
|
+
"aria-hidden": "true",
|
|
140
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
141
|
+
width: "28",
|
|
142
|
+
height: "28",
|
|
143
|
+
fill: "currentColor",
|
|
144
|
+
viewBox: "0 0 24 24"
|
|
145
|
+
}, /*#__PURE__*/React.createElement("path", {
|
|
146
|
+
fillRule: "evenodd",
|
|
147
|
+
d: "M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Zm13.707-1.293a1 1 0 0 0-1.414-1.414L11 12.586l-1.793-1.793a1 1 0 0 0-1.414 1.414l2.5 2.5a1 1 0 0 0 1.414 0l4-4Z",
|
|
148
|
+
clipRule: "evenodd"
|
|
149
|
+
})), /*#__PURE__*/React.createElement("p", null, t.message)), /*#__PURE__*/React.createElement("button", {
|
|
150
|
+
className: "toast-close",
|
|
151
|
+
"aria-label": "Close",
|
|
152
|
+
onClick: function onClick() {
|
|
153
|
+
return setToasts(function (prev) {
|
|
154
|
+
return prev.filter(function (x) {
|
|
155
|
+
return x.id !== t.id;
|
|
156
|
+
});
|
|
157
|
+
});
|
|
158
|
+
}
|
|
159
|
+
}, /*#__PURE__*/React.createElement("svg", {
|
|
160
|
+
className: "close-icon",
|
|
161
|
+
"aria-hidden": "true",
|
|
162
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
163
|
+
width: "24",
|
|
164
|
+
height: "24",
|
|
165
|
+
fill: "none",
|
|
166
|
+
viewBox: "0 0 24 24"
|
|
167
|
+
}, /*#__PURE__*/React.createElement("path", {
|
|
168
|
+
stroke: "currentColor",
|
|
169
|
+
strokeLinecap: "round",
|
|
170
|
+
strokeLinejoin: "round",
|
|
171
|
+
strokeWidth: "2",
|
|
172
|
+
d: "M6 18 17.94 6M18 18 6.06 6"
|
|
173
|
+
}))));
|
|
118
174
|
}));
|
|
119
175
|
}
|
|
120
176
|
|
package/dist/index.es.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.es.js","sources":["../
|
|
1
|
+
{"version":3,"file":"index.es.js","sources":["../src/ToastContainer.jsx","../src/index.js"],"sourcesContent":["import React, { useEffect, useState } from 'react';\r\nimport { _register } from './index.js';\r\nimport './global.css';\r\n\r\nexport default function ToastContainer() {\r\n const [toasts, setToasts] = useState([]);\r\n\r\n useEffect(() => {\r\n _register((toast) => {\r\n const newToast = { ...toast, id: Date.now() + Math.random() };\r\n setToasts((prev) => [newToast, ...prev]);\r\n\r\n setTimeout(() => {\r\n setToasts((prev) => prev.filter((t) => t.id !== newToast.id));\r\n }, 3000);\r\n });\r\n }, []);\r\n\r\n return (\r\n <div className=\"toast-container\">\r\n {toasts.map((t) => (\r\n <div key={t.id} className={`toast toast-${t.type}`}>\r\n <div className=\"toast-content\">\r\n <svg className=\"toast-icon\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" width=\"28\" height=\"28\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path fillRule=\"evenodd\" d=\"M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Zm13.707-1.293a1 1 0 0 0-1.414-1.414L11 12.586l-1.793-1.793a1 1 0 0 0-1.414 1.414l2.5 2.5a1 1 0 0 0 1.414 0l4-4Z\" clipRule=\"evenodd\" />\r\n </svg>\r\n <p>{t.message}</p>\r\n </div>\r\n <button\r\n className=\"toast-close\"\r\n aria-label=\"Close\"\r\n onClick={() => setToasts((prev) => prev.filter((x) => x.id !== t.id))}\r\n >\r\n <svg className=\"close-icon\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\" viewBox=\"0 0 24 24\">\r\n <path stroke=\"currentColor\" strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth=\"2\" d=\"M6 18 17.94 6M18 18 6.06 6\" />\r\n </svg>\r\n </button>\r\n </div>\r\n ))}\r\n </div>\r\n );\r\n}","import ToastContainer from './ToastContainer.jsx';\r\n\r\nlet addToast;\r\n\r\nconst toast = {\r\n show(message) {\r\n addToast && addToast({ message, type: 'default' });\r\n },\r\n success(message) {\r\n addToast && addToast({ message, type: 'success' });\r\n },\r\n error(message) {\r\n addToast && addToast({ message, type: 'error' });\r\n },\r\n};\r\n\r\nfunction _register(fn) {\r\n addToast = fn;\r\n}\r\n\r\nexport { ToastContainer, toast, _register };"],"names":["ToastContainer","_useState","useState","_useState2","_slicedToArray","toasts","setToasts","useEffect","_register","toast","newToast","_objectSpread","id","Date","now","Math","random","prev","concat","_toConsumableArray","setTimeout","filter","t","React","createElement","className","map","key","type","xmlns","width","height","fill","viewBox","fillRule","d","clipRule","message","onClick","x","stroke","strokeLinecap","strokeLinejoin","strokeWidth","addToast","show","success","error","fn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIe,SAASA,cAAcA,GAAG;AACrC,EAAA,IAAAC,SAAA,GAA4BC,QAAQ,CAAC,EAAE,CAAC;IAAAC,UAAA,GAAAC,cAAA,CAAAH,SAAA,EAAA,CAAA,CAAA;AAAjCI,IAAAA,MAAM,GAAAF,UAAA,CAAA,CAAA,CAAA;AAAEG,IAAAA,SAAS,GAAAH,UAAA,CAAA,CAAA,CAAA,CAAA;AAExBI,EAAAA,SAAS,CAAC,YAAM;IACZC,SAAS,CAAC,UAACC,KAAK,EAAK;AACjB,MAAA,IAAMC,QAAQ,GAAAC,cAAA,CAAAA,cAAA,KAAQF,KAAK,CAAA,EAAA,EAAA,EAAA;QAAEG,EAAE,EAAEC,IAAI,CAACC,GAAG,EAAE,GAAGC,IAAI,CAACC,MAAM,EAAC;OAAG,CAAA,CAAA;MAC7DV,SAAS,CAAC,UAACW,IAAI,EAAA;AAAA,QAAA,OAAA,CAAMP,QAAQ,CAAAQ,CAAAA,MAAA,CAAAC,kBAAA,CAAKF,IAAI,CAAA,CAAA,CAAA;AAAA,OAAC,CAAC,CAAA;AAExCG,MAAAA,UAAU,CAAC,YAAM;QACbd,SAAS,CAAC,UAACW,IAAI,EAAA;AAAA,UAAA,OAAKA,IAAI,CAACI,MAAM,CAAC,UAACC,CAAC,EAAA;AAAA,YAAA,OAAKA,CAAC,CAACV,EAAE,KAAKF,QAAQ,CAACE,EAAE,CAAA;WAAC,CAAA,CAAA;SAAC,CAAA,CAAA;OAChE,EAAE,IAAI,CAAC,CAAA;AACZ,KAAC,CAAC,CAAA;GACL,EAAE,EAAE,CAAC,CAAA;EAEN,oBACIW,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKC,IAAAA,SAAS,EAAC,iBAAA;AAAiB,GAAA,EAC3BpB,MAAM,CAACqB,GAAG,CAAC,UAACJ,CAAC,EAAA;IAAA,oBACVC,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;MAAKG,GAAG,EAAEL,CAAC,CAACV,EAAG;AAACa,MAAAA,SAAS,EAAAP,cAAAA,CAAAA,MAAA,CAAiBI,CAAC,CAACM,IAAI,CAAA;KAC5CL,eAAAA,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKC,MAAAA,SAAS,EAAC,eAAA;KACXF,eAAAA,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKC,MAAAA,SAAS,EAAC,YAAY;AAAC,MAAA,aAAA,EAAY,MAAM;AAACI,MAAAA,KAAK,EAAC,4BAA4B;AAACC,MAAAA,KAAK,EAAC,IAAI;AAACC,MAAAA,MAAM,EAAC,IAAI;AAACC,MAAAA,IAAI,EAAC,cAAc;AAACC,MAAAA,OAAO,EAAC,WAAA;KACjIV,eAAAA,KAAA,CAAAC,aAAA,CAAA,MAAA,EAAA;AAAMU,MAAAA,QAAQ,EAAC,SAAS;AAACC,MAAAA,CAAC,EAAC,wLAAwL;AAACC,MAAAA,QAAQ,EAAC,SAAA;AAAS,KAAE,CACvO,CAAC,eACNb,KAAA,CAAAC,aAAA,CAAA,GAAA,EAAA,IAAA,EAAIF,CAAC,CAACe,OAAW,CAChB,CAAC,eACNd,KAAA,CAAAC,aAAA,CAAA,QAAA,EAAA;AACIC,MAAAA,SAAS,EAAC,aAAa;AACvB,MAAA,YAAA,EAAW,OAAO;MAClBa,OAAO,EAAE,SAATA,OAAOA,GAAA;QAAA,OAAQhC,SAAS,CAAC,UAACW,IAAI,EAAA;AAAA,UAAA,OAAKA,IAAI,CAACI,MAAM,CAAC,UAACkB,CAAC,EAAA;AAAA,YAAA,OAAKA,CAAC,CAAC3B,EAAE,KAAKU,CAAC,CAACV,EAAE,CAAA;WAAC,CAAA,CAAA;SAAC,CAAA,CAAA;AAAA,OAAA;KAErEW,eAAAA,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKC,MAAAA,SAAS,EAAC,YAAY;AAAC,MAAA,aAAA,EAAY,MAAM;AAACI,MAAAA,KAAK,EAAC,4BAA4B;AAACC,MAAAA,KAAK,EAAC,IAAI;AAACC,MAAAA,MAAM,EAAC,IAAI;AAACC,MAAAA,IAAI,EAAC,MAAM;AAACC,MAAAA,OAAO,EAAC,WAAA;KACzHV,eAAAA,KAAA,CAAAC,aAAA,CAAA,MAAA,EAAA;AAAMgB,MAAAA,MAAM,EAAC,cAAc;AAACC,MAAAA,aAAa,EAAC,OAAO;AAACC,MAAAA,cAAc,EAAC,OAAO;AAACC,MAAAA,WAAW,EAAC,GAAG;AAACR,MAAAA,CAAC,EAAC,4BAAA;KAA8B,CACxH,CACD,CACP,CAAC,CAAA;AAAA,GACT,CACA,CAAC,CAAA;AAEd;;ACvCA,IAAIS,QAAQ,CAAA;AAEZ,IAAMnC,KAAK,GAAG;AACVoC,EAAAA,IAAI,EAAJA,SAAAA,IAAIA,CAACR,OAAO,EAAE;IACVO,QAAQ,IAAIA,QAAQ,CAAC;AAAEP,MAAAA,OAAO,EAAPA,OAAO;AAAET,MAAAA,IAAI,EAAE,SAAA;AAAU,KAAC,CAAC,CAAA;GACrD;AACDkB,EAAAA,OAAO,EAAPA,SAAAA,OAAOA,CAACT,OAAO,EAAE;IACbO,QAAQ,IAAIA,QAAQ,CAAC;AAAEP,MAAAA,OAAO,EAAPA,OAAO;AAAET,MAAAA,IAAI,EAAE,SAAA;AAAU,KAAC,CAAC,CAAA;GACrD;AACDmB,EAAAA,KAAK,EAALA,SAAAA,KAAKA,CAACV,OAAO,EAAE;IACXO,QAAQ,IAAIA,QAAQ,CAAC;AAAEP,MAAAA,OAAO,EAAPA,OAAO;AAAET,MAAAA,IAAI,EAAE,OAAA;AAAQ,KAAC,CAAC,CAAA;AACpD,GAAA;AACJ,EAAC;AAED,SAASpB,SAASA,CAACwC,EAAE,EAAE;AACnBJ,EAAAA,QAAQ,GAAGI,EAAE,CAAA;AACjB;;;;"}
|
package/dist/index.js
CHANGED
|
@@ -13,6 +13,14 @@ function _arrayWithHoles(r) {
|
|
|
13
13
|
function _arrayWithoutHoles(r) {
|
|
14
14
|
if (Array.isArray(r)) return _arrayLikeToArray(r);
|
|
15
15
|
}
|
|
16
|
+
function _defineProperty(e, r, t) {
|
|
17
|
+
return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
|
|
18
|
+
value: t,
|
|
19
|
+
enumerable: !0,
|
|
20
|
+
configurable: !0,
|
|
21
|
+
writable: !0
|
|
22
|
+
}) : e[r] = t, e;
|
|
23
|
+
}
|
|
16
24
|
function _iterableToArray(r) {
|
|
17
25
|
if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r);
|
|
18
26
|
}
|
|
@@ -49,12 +57,47 @@ function _nonIterableRest() {
|
|
|
49
57
|
function _nonIterableSpread() {
|
|
50
58
|
throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
51
59
|
}
|
|
60
|
+
function ownKeys(e, r) {
|
|
61
|
+
var t = Object.keys(e);
|
|
62
|
+
if (Object.getOwnPropertySymbols) {
|
|
63
|
+
var o = Object.getOwnPropertySymbols(e);
|
|
64
|
+
r && (o = o.filter(function (r) {
|
|
65
|
+
return Object.getOwnPropertyDescriptor(e, r).enumerable;
|
|
66
|
+
})), t.push.apply(t, o);
|
|
67
|
+
}
|
|
68
|
+
return t;
|
|
69
|
+
}
|
|
70
|
+
function _objectSpread2(e) {
|
|
71
|
+
for (var r = 1; r < arguments.length; r++) {
|
|
72
|
+
var t = null != arguments[r] ? arguments[r] : {};
|
|
73
|
+
r % 2 ? ownKeys(Object(t), !0).forEach(function (r) {
|
|
74
|
+
_defineProperty(e, r, t[r]);
|
|
75
|
+
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
|
|
76
|
+
Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
|
|
77
|
+
});
|
|
78
|
+
}
|
|
79
|
+
return e;
|
|
80
|
+
}
|
|
52
81
|
function _slicedToArray(r, e) {
|
|
53
82
|
return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
|
|
54
83
|
}
|
|
55
84
|
function _toConsumableArray(r) {
|
|
56
85
|
return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread();
|
|
57
86
|
}
|
|
87
|
+
function _toPrimitive(t, r) {
|
|
88
|
+
if ("object" != typeof t || !t) return t;
|
|
89
|
+
var e = t[Symbol.toPrimitive];
|
|
90
|
+
if (void 0 !== e) {
|
|
91
|
+
var i = e.call(t, r || "default");
|
|
92
|
+
if ("object" != typeof i) return i;
|
|
93
|
+
throw new TypeError("@@toPrimitive must return a primitive value.");
|
|
94
|
+
}
|
|
95
|
+
return ("string" === r ? String : Number)(t);
|
|
96
|
+
}
|
|
97
|
+
function _toPropertyKey(t) {
|
|
98
|
+
var i = _toPrimitive(t, "string");
|
|
99
|
+
return "symbol" == typeof i ? i : i + "";
|
|
100
|
+
}
|
|
58
101
|
function _unsupportedIterableToArray(r, a) {
|
|
59
102
|
if (r) {
|
|
60
103
|
if ("string" == typeof r) return _arrayLikeToArray(r, a);
|
|
@@ -63,36 +106,6 @@ function _unsupportedIterableToArray(r, a) {
|
|
|
63
106
|
}
|
|
64
107
|
}
|
|
65
108
|
|
|
66
|
-
function styleInject(css, ref) {
|
|
67
|
-
if ( ref === void 0 ) ref = {};
|
|
68
|
-
var insertAt = ref.insertAt;
|
|
69
|
-
|
|
70
|
-
if (!css || typeof document === 'undefined') { return; }
|
|
71
|
-
|
|
72
|
-
var head = document.head || document.getElementsByTagName('head')[0];
|
|
73
|
-
var style = document.createElement('style');
|
|
74
|
-
style.type = 'text/css';
|
|
75
|
-
|
|
76
|
-
if (insertAt === 'top') {
|
|
77
|
-
if (head.firstChild) {
|
|
78
|
-
head.insertBefore(style, head.firstChild);
|
|
79
|
-
} else {
|
|
80
|
-
head.appendChild(style);
|
|
81
|
-
}
|
|
82
|
-
} else {
|
|
83
|
-
head.appendChild(style);
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
if (style.styleSheet) {
|
|
87
|
-
style.styleSheet.cssText = css;
|
|
88
|
-
} else {
|
|
89
|
-
style.appendChild(document.createTextNode(css));
|
|
90
|
-
}
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
var css_248z = ".toast-container {\r\n position: fixed;\r\n top: 20px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n z-index: 9999;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 8px;\r\n width: auto;\r\n max-width: 90vw;\r\n}\r\n\r\n.toast {\r\n padding: 10px 20px;\r\n border-radius: 4px;\r\n color: #000;\r\n background-color: #fff;\r\n box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);\r\n min-width: 200px;\r\n max-width: 400px;\r\n opacity: 0;\r\n animation: fadeInOut 3s ease-in-out forwards;\r\n}\r\n\r\n.toast.success {\r\n background-color: #d4edda;\r\n}\r\n\r\n.toast.error {\r\n background-color: #f8d7da;\r\n}\r\n\r\n@keyframes fadeInOut {\r\n 0% {\r\n opacity: 0;\r\n transform: translateY(-10px);\r\n }\r\n\r\n 10% {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n\r\n 90% {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n\r\n 100% {\r\n opacity: 0;\r\n transform: translateY(-10px);\r\n }\r\n}";
|
|
94
|
-
styleInject(css_248z);
|
|
95
|
-
|
|
96
109
|
function ToastContainer() {
|
|
97
110
|
var _useState = React.useState([]),
|
|
98
111
|
_useState2 = _slicedToArray(_useState, 2),
|
|
@@ -100,23 +113,66 @@ function ToastContainer() {
|
|
|
100
113
|
setToasts = _useState2[1];
|
|
101
114
|
React.useEffect(function () {
|
|
102
115
|
_register(function (toast) {
|
|
116
|
+
var newToast = _objectSpread2(_objectSpread2({}, toast), {}, {
|
|
117
|
+
id: Date.now() + Math.random()
|
|
118
|
+
});
|
|
103
119
|
setToasts(function (prev) {
|
|
104
|
-
return [].concat(_toConsumableArray(prev)
|
|
120
|
+
return [newToast].concat(_toConsumableArray(prev));
|
|
105
121
|
});
|
|
106
122
|
setTimeout(function () {
|
|
107
123
|
setToasts(function (prev) {
|
|
108
|
-
return prev.
|
|
124
|
+
return prev.filter(function (t) {
|
|
125
|
+
return t.id !== newToast.id;
|
|
126
|
+
});
|
|
109
127
|
});
|
|
110
128
|
}, 3000);
|
|
111
129
|
});
|
|
112
130
|
}, []);
|
|
113
131
|
return /*#__PURE__*/React.createElement("div", {
|
|
114
132
|
className: "toast-container"
|
|
115
|
-
}, toasts.map(function (t
|
|
133
|
+
}, toasts.map(function (t) {
|
|
116
134
|
return /*#__PURE__*/React.createElement("div", {
|
|
117
|
-
key:
|
|
118
|
-
className: "toast ".concat(t.type)
|
|
119
|
-
},
|
|
135
|
+
key: t.id,
|
|
136
|
+
className: "toast toast-".concat(t.type)
|
|
137
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
138
|
+
className: "toast-content"
|
|
139
|
+
}, /*#__PURE__*/React.createElement("svg", {
|
|
140
|
+
className: "toast-icon",
|
|
141
|
+
"aria-hidden": "true",
|
|
142
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
143
|
+
width: "28",
|
|
144
|
+
height: "28",
|
|
145
|
+
fill: "currentColor",
|
|
146
|
+
viewBox: "0 0 24 24"
|
|
147
|
+
}, /*#__PURE__*/React.createElement("path", {
|
|
148
|
+
fillRule: "evenodd",
|
|
149
|
+
d: "M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Zm13.707-1.293a1 1 0 0 0-1.414-1.414L11 12.586l-1.793-1.793a1 1 0 0 0-1.414 1.414l2.5 2.5a1 1 0 0 0 1.414 0l4-4Z",
|
|
150
|
+
clipRule: "evenodd"
|
|
151
|
+
})), /*#__PURE__*/React.createElement("p", null, t.message)), /*#__PURE__*/React.createElement("button", {
|
|
152
|
+
className: "toast-close",
|
|
153
|
+
"aria-label": "Close",
|
|
154
|
+
onClick: function onClick() {
|
|
155
|
+
return setToasts(function (prev) {
|
|
156
|
+
return prev.filter(function (x) {
|
|
157
|
+
return x.id !== t.id;
|
|
158
|
+
});
|
|
159
|
+
});
|
|
160
|
+
}
|
|
161
|
+
}, /*#__PURE__*/React.createElement("svg", {
|
|
162
|
+
className: "close-icon",
|
|
163
|
+
"aria-hidden": "true",
|
|
164
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
165
|
+
width: "24",
|
|
166
|
+
height: "24",
|
|
167
|
+
fill: "none",
|
|
168
|
+
viewBox: "0 0 24 24"
|
|
169
|
+
}, /*#__PURE__*/React.createElement("path", {
|
|
170
|
+
stroke: "currentColor",
|
|
171
|
+
strokeLinecap: "round",
|
|
172
|
+
strokeLinejoin: "round",
|
|
173
|
+
strokeWidth: "2",
|
|
174
|
+
d: "M6 18 17.94 6M18 18 6.06 6"
|
|
175
|
+
}))));
|
|
120
176
|
}));
|
|
121
177
|
}
|
|
122
178
|
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../src/ToastContainer.jsx","../src/index.js"],"sourcesContent":["import React, { useEffect, useState } from 'react';\r\nimport { _register } from './index.js';\r\nimport './global.css';\r\n\r\nexport default function ToastContainer() {\r\n const [toasts, setToasts] = useState([]);\r\n\r\n useEffect(() => {\r\n _register((toast) => {\r\n const newToast = { ...toast, id: Date.now() + Math.random() };\r\n setToasts((prev) => [newToast, ...prev]);\r\n\r\n setTimeout(() => {\r\n setToasts((prev) => prev.filter((t) => t.id !== newToast.id));\r\n }, 3000);\r\n });\r\n }, []);\r\n\r\n return (\r\n <div className=\"toast-container\">\r\n {toasts.map((t) => (\r\n <div key={t.id} className={`toast toast-${t.type}`}>\r\n <div className=\"toast-content\">\r\n <svg className=\"toast-icon\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" width=\"28\" height=\"28\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path fillRule=\"evenodd\" d=\"M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Zm13.707-1.293a1 1 0 0 0-1.414-1.414L11 12.586l-1.793-1.793a1 1 0 0 0-1.414 1.414l2.5 2.5a1 1 0 0 0 1.414 0l4-4Z\" clipRule=\"evenodd\" />\r\n </svg>\r\n <p>{t.message}</p>\r\n </div>\r\n <button\r\n className=\"toast-close\"\r\n aria-label=\"Close\"\r\n onClick={() => setToasts((prev) => prev.filter((x) => x.id !== t.id))}\r\n >\r\n <svg className=\"close-icon\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\" viewBox=\"0 0 24 24\">\r\n <path stroke=\"currentColor\" strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth=\"2\" d=\"M6 18 17.94 6M18 18 6.06 6\" />\r\n </svg>\r\n </button>\r\n </div>\r\n ))}\r\n </div>\r\n );\r\n}","import ToastContainer from './ToastContainer.jsx';\r\n\r\nlet addToast;\r\n\r\nconst toast = {\r\n show(message) {\r\n addToast && addToast({ message, type: 'default' });\r\n },\r\n success(message) {\r\n addToast && addToast({ message, type: 'success' });\r\n },\r\n error(message) {\r\n addToast && addToast({ message, type: 'error' });\r\n },\r\n};\r\n\r\nfunction _register(fn) {\r\n addToast = fn;\r\n}\r\n\r\nexport { ToastContainer, toast, _register };"],"names":["ToastContainer","_useState","useState","_useState2","_slicedToArray","toasts","setToasts","useEffect","_register","toast","newToast","_objectSpread","id","Date","now","Math","random","prev","concat","_toConsumableArray","setTimeout","filter","t","React","createElement","className","map","key","type","xmlns","width","height","fill","viewBox","fillRule","d","clipRule","message","onClick","x","stroke","strokeLinecap","strokeLinejoin","strokeWidth","addToast","show","success","error","fn"],"mappings":"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"}
|
package/package.json
CHANGED