kitzo 2.3.6 → 2.3.7
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 +39 -258
- package/dist/fns.d.ts +3 -0
- package/dist/fns.js +4 -0
- package/dist/functions/copy/copy.js +23 -0
- package/dist/index.d.ts +119 -0
- package/dist/index.js +14 -0
- package/dist/react/components/toast/Toaster.js +71 -0
- package/dist/react/components/toast/helpers/addToastStyles.js +259 -0
- package/dist/react/components/toast/helpers/createToast.js +45 -0
- package/dist/react/components/toast/helpers/listenar.js +14 -0
- package/dist/react/components/toast/helpers/manageToasts/addToasts.js +12 -0
- package/dist/react/components/toast/helpers/manageToasts/dismissToasts.js +17 -0
- package/dist/react/components/toast/helpers/manageToasts/manageToasts.js +9 -0
- package/dist/react/components/toast/helpers/manageToasts/timers.js +39 -0
- package/dist/react/components/toast/helpers/manageToasts/updateToasts.js +10 -0
- package/dist/react/components/toast/helpers/triggerToasts.js +99 -0
- package/dist/react/components/toast/partials/Svgs.js +98 -0
- package/dist/react/components/toast/partials/Toast.js +54 -0
- package/dist/react/components/toast/partials/ToastContainer.js +59 -0
- package/dist/react/components/tooltip/Tooltip.js +67 -0
- package/dist/react/components/tooltip/helpers/addTooltipStyles.js +230 -0
- package/dist/react/components/tooltip/helpers/getAnimationProperties.js +12 -0
- package/dist/react/components/tooltip/helpers/getPositionClass.js +27 -0
- package/dist/react/components/tooltip/partials/TooltipWrapper.js +29 -0
- package/dist/react/hooks/useCopy.js +38 -0
- package/dist/react/hooks/useDebounce.js +16 -0
- package/dist/react/hooks/useWindowSize.js +26 -0
- package/package.json +73 -77
- package/dist/functions/index.js +0 -36
- package/dist/functions/index.js.map +0 -1
- package/dist/functions/types.d.ts +0 -2
- package/dist/react/index.js +0 -1086
- package/dist/react/index.js.map +0 -1
- package/dist/react/types/hooks.d.ts +0 -34
- package/dist/react/types/toast.d.ts +0 -60
- package/dist/react/types/tooltip.d.ts +0 -55
- package/dist/react/types.d.ts +0 -3
package/dist/react/index.js
DELETED
|
@@ -1,1086 +0,0 @@
|
|
|
1
|
-
import React, { useRef, useLayoutEffect, useState, useEffect, useCallback } from 'react';
|
|
2
|
-
|
|
3
|
-
function _arrayLikeToArray(r, a) {
|
|
4
|
-
(null == a || a > r.length) && (a = r.length);
|
|
5
|
-
for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
|
|
6
|
-
return n;
|
|
7
|
-
}
|
|
8
|
-
function _arrayWithHoles(r) {
|
|
9
|
-
if (Array.isArray(r)) return r;
|
|
10
|
-
}
|
|
11
|
-
function _arrayWithoutHoles(r) {
|
|
12
|
-
if (Array.isArray(r)) return _arrayLikeToArray(r);
|
|
13
|
-
}
|
|
14
|
-
function asyncGeneratorStep(n, t, e, r, o, a, c) {
|
|
15
|
-
try {
|
|
16
|
-
var i = n[a](c),
|
|
17
|
-
u = i.value;
|
|
18
|
-
} catch (n) {
|
|
19
|
-
return void e(n);
|
|
20
|
-
}
|
|
21
|
-
i.done ? t(u) : Promise.resolve(u).then(r, o);
|
|
22
|
-
}
|
|
23
|
-
function _asyncToGenerator(n) {
|
|
24
|
-
return function () {
|
|
25
|
-
var t = this,
|
|
26
|
-
e = arguments;
|
|
27
|
-
return new Promise(function (r, o) {
|
|
28
|
-
var a = n.apply(t, e);
|
|
29
|
-
function _next(n) {
|
|
30
|
-
asyncGeneratorStep(a, r, o, _next, _throw, "next", n);
|
|
31
|
-
}
|
|
32
|
-
function _throw(n) {
|
|
33
|
-
asyncGeneratorStep(a, r, o, _next, _throw, "throw", n);
|
|
34
|
-
}
|
|
35
|
-
_next(void 0);
|
|
36
|
-
});
|
|
37
|
-
};
|
|
38
|
-
}
|
|
39
|
-
function _defineProperty(e, r, t) {
|
|
40
|
-
return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
|
|
41
|
-
value: t,
|
|
42
|
-
enumerable: true,
|
|
43
|
-
configurable: true,
|
|
44
|
-
writable: true
|
|
45
|
-
}) : e[r] = t, e;
|
|
46
|
-
}
|
|
47
|
-
function _iterableToArray(r) {
|
|
48
|
-
if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r);
|
|
49
|
-
}
|
|
50
|
-
function _iterableToArrayLimit(r, l) {
|
|
51
|
-
var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
|
|
52
|
-
if (null != t) {
|
|
53
|
-
var e,
|
|
54
|
-
n,
|
|
55
|
-
i,
|
|
56
|
-
u,
|
|
57
|
-
a = [],
|
|
58
|
-
f = true,
|
|
59
|
-
o = false;
|
|
60
|
-
try {
|
|
61
|
-
if (i = (t = t.call(r)).next, 0 === l) ; else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
|
|
62
|
-
} catch (r) {
|
|
63
|
-
o = true, n = r;
|
|
64
|
-
} finally {
|
|
65
|
-
try {
|
|
66
|
-
if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
|
|
67
|
-
} finally {
|
|
68
|
-
if (o) throw n;
|
|
69
|
-
}
|
|
70
|
-
}
|
|
71
|
-
return a;
|
|
72
|
-
}
|
|
73
|
-
}
|
|
74
|
-
function _nonIterableRest() {
|
|
75
|
-
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
76
|
-
}
|
|
77
|
-
function _nonIterableSpread() {
|
|
78
|
-
throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
79
|
-
}
|
|
80
|
-
function ownKeys(e, r) {
|
|
81
|
-
var t = Object.keys(e);
|
|
82
|
-
if (Object.getOwnPropertySymbols) {
|
|
83
|
-
var o = Object.getOwnPropertySymbols(e);
|
|
84
|
-
r && (o = o.filter(function (r) {
|
|
85
|
-
return Object.getOwnPropertyDescriptor(e, r).enumerable;
|
|
86
|
-
})), t.push.apply(t, o);
|
|
87
|
-
}
|
|
88
|
-
return t;
|
|
89
|
-
}
|
|
90
|
-
function _objectSpread2(e) {
|
|
91
|
-
for (var r = 1; r < arguments.length; r++) {
|
|
92
|
-
var t = null != arguments[r] ? arguments[r] : {};
|
|
93
|
-
r % 2 ? ownKeys(Object(t), true).forEach(function (r) {
|
|
94
|
-
_defineProperty(e, r, t[r]);
|
|
95
|
-
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
|
|
96
|
-
Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
|
|
97
|
-
});
|
|
98
|
-
}
|
|
99
|
-
return e;
|
|
100
|
-
}
|
|
101
|
-
function _regenerator() {
|
|
102
|
-
/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */
|
|
103
|
-
var e,
|
|
104
|
-
t,
|
|
105
|
-
r = "function" == typeof Symbol ? Symbol : {},
|
|
106
|
-
n = r.iterator || "@@iterator",
|
|
107
|
-
o = r.toStringTag || "@@toStringTag";
|
|
108
|
-
function i(r, n, o, i) {
|
|
109
|
-
var c = n && n.prototype instanceof Generator ? n : Generator,
|
|
110
|
-
u = Object.create(c.prototype);
|
|
111
|
-
return _regeneratorDefine(u, "_invoke", function (r, n, o) {
|
|
112
|
-
var i,
|
|
113
|
-
c,
|
|
114
|
-
u,
|
|
115
|
-
f = 0,
|
|
116
|
-
p = o || [],
|
|
117
|
-
y = false,
|
|
118
|
-
G = {
|
|
119
|
-
p: 0,
|
|
120
|
-
n: 0,
|
|
121
|
-
v: e,
|
|
122
|
-
a: d,
|
|
123
|
-
f: d.bind(e, 4),
|
|
124
|
-
d: function (t, r) {
|
|
125
|
-
return i = t, c = 0, u = e, G.n = r, a;
|
|
126
|
-
}
|
|
127
|
-
};
|
|
128
|
-
function d(r, n) {
|
|
129
|
-
for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) {
|
|
130
|
-
var o,
|
|
131
|
-
i = p[t],
|
|
132
|
-
d = G.p,
|
|
133
|
-
l = i[2];
|
|
134
|
-
r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0));
|
|
135
|
-
}
|
|
136
|
-
if (o || r > 1) return a;
|
|
137
|
-
throw y = true, n;
|
|
138
|
-
}
|
|
139
|
-
return function (o, p, l) {
|
|
140
|
-
if (f > 1) throw TypeError("Generator is already running");
|
|
141
|
-
for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) {
|
|
142
|
-
i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u);
|
|
143
|
-
try {
|
|
144
|
-
if (f = 2, i) {
|
|
145
|
-
if (c || (o = "next"), t = i[o]) {
|
|
146
|
-
if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object");
|
|
147
|
-
if (!t.done) return t;
|
|
148
|
-
u = t.value, c < 2 && (c = 0);
|
|
149
|
-
} else 1 === c && (t = i.return) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1);
|
|
150
|
-
i = e;
|
|
151
|
-
} else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break;
|
|
152
|
-
} catch (t) {
|
|
153
|
-
i = e, c = 1, u = t;
|
|
154
|
-
} finally {
|
|
155
|
-
f = 1;
|
|
156
|
-
}
|
|
157
|
-
}
|
|
158
|
-
return {
|
|
159
|
-
value: t,
|
|
160
|
-
done: y
|
|
161
|
-
};
|
|
162
|
-
};
|
|
163
|
-
}(r, o, i), true), u;
|
|
164
|
-
}
|
|
165
|
-
var a = {};
|
|
166
|
-
function Generator() {}
|
|
167
|
-
function GeneratorFunction() {}
|
|
168
|
-
function GeneratorFunctionPrototype() {}
|
|
169
|
-
t = Object.getPrototypeOf;
|
|
170
|
-
var c = [][n] ? t(t([][n]())) : (_regeneratorDefine(t = {}, n, function () {
|
|
171
|
-
return this;
|
|
172
|
-
}), t),
|
|
173
|
-
u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c);
|
|
174
|
-
function f(e) {
|
|
175
|
-
return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e;
|
|
176
|
-
}
|
|
177
|
-
return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine(u), _regeneratorDefine(u, o, "Generator"), _regeneratorDefine(u, n, function () {
|
|
178
|
-
return this;
|
|
179
|
-
}), _regeneratorDefine(u, "toString", function () {
|
|
180
|
-
return "[object Generator]";
|
|
181
|
-
}), (_regenerator = function () {
|
|
182
|
-
return {
|
|
183
|
-
w: i,
|
|
184
|
-
m: f
|
|
185
|
-
};
|
|
186
|
-
})();
|
|
187
|
-
}
|
|
188
|
-
function _regeneratorDefine(e, r, n, t) {
|
|
189
|
-
var i = Object.defineProperty;
|
|
190
|
-
try {
|
|
191
|
-
i({}, "", {});
|
|
192
|
-
} catch (e) {
|
|
193
|
-
i = 0;
|
|
194
|
-
}
|
|
195
|
-
_regeneratorDefine = function (e, r, n, t) {
|
|
196
|
-
function o(r, n) {
|
|
197
|
-
_regeneratorDefine(e, r, function (e) {
|
|
198
|
-
return this._invoke(r, n, e);
|
|
199
|
-
});
|
|
200
|
-
}
|
|
201
|
-
r ? i ? i(e, r, {
|
|
202
|
-
value: n,
|
|
203
|
-
enumerable: !t,
|
|
204
|
-
configurable: !t,
|
|
205
|
-
writable: !t
|
|
206
|
-
}) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2));
|
|
207
|
-
}, _regeneratorDefine(e, r, n, t);
|
|
208
|
-
}
|
|
209
|
-
function _slicedToArray(r, e) {
|
|
210
|
-
return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
|
|
211
|
-
}
|
|
212
|
-
function _toConsumableArray(r) {
|
|
213
|
-
return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread();
|
|
214
|
-
}
|
|
215
|
-
function _toPrimitive(t, r) {
|
|
216
|
-
if ("object" != typeof t || !t) return t;
|
|
217
|
-
var e = t[Symbol.toPrimitive];
|
|
218
|
-
if (void 0 !== e) {
|
|
219
|
-
var i = e.call(t, r);
|
|
220
|
-
if ("object" != typeof i) return i;
|
|
221
|
-
throw new TypeError("@@toPrimitive must return a primitive value.");
|
|
222
|
-
}
|
|
223
|
-
return ("string" === r ? String : Number)(t);
|
|
224
|
-
}
|
|
225
|
-
function _toPropertyKey(t) {
|
|
226
|
-
var i = _toPrimitive(t, "string");
|
|
227
|
-
return "symbol" == typeof i ? i : i + "";
|
|
228
|
-
}
|
|
229
|
-
function _typeof(o) {
|
|
230
|
-
"@babel/helpers - typeof";
|
|
231
|
-
|
|
232
|
-
return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
|
|
233
|
-
return typeof o;
|
|
234
|
-
} : function (o) {
|
|
235
|
-
return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
|
|
236
|
-
}, _typeof(o);
|
|
237
|
-
}
|
|
238
|
-
function _unsupportedIterableToArray(r, a) {
|
|
239
|
-
if (r) {
|
|
240
|
-
if ("string" == typeof r) return _arrayLikeToArray(r, a);
|
|
241
|
-
var t = {}.toString.call(r).slice(8, -1);
|
|
242
|
-
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;
|
|
243
|
-
}
|
|
244
|
-
}
|
|
245
|
-
|
|
246
|
-
var toastStyles = ".kitzo-toast-container {\n --normal-bg: hsl(0, 0%, 100%);\n --normal-text: hsl(0, 0%, 10%);\n --normal-border: hsl(0, 0%, 94%);\n\n --success-bg: var(--normal-bg);\n --success-text: var(--normal-text);\n --success-border: var(--normal-border);\n --success-svg-clr: var(--normal-bg);\n --success-svg-bg: var(--normal-text);\n\n --error-bg: var(--normal-bg);\n --error-text: var(--normal-text);\n --error-border: var(--normal-border);\n --error-svg-clr: var(--normal-bg);\n --error-svg-bg: var(--normal-text);\n\n --info-bg: var(--normal-bg);\n --info-text: var(--normal-text);\n --info-border: var(--normal-border);\n --info-svg-clr: var(--normal-bg);\n --info-svg-bg: var(--normal-text);\n\n --loader-stroke: hsl(0, 0%, 50%);\n --loader-bg: hsl(0, 0%, 80%);\n}\n\n.kitzo-toast-container.kitzo-toast-dark {\n --normal-bg: hsl(0, 0%, 15%);\n --normal-text: hsl(0, 0%, 95%);\n --normal-border: hsl(0, 0%, 17%);\n\n --success-bg: var(--normal-bg);\n --success-text: var(--normal-text);\n --success-border: var(--normal-border);\n --success-svg-clr: var(--normal-bg);\n --success-svg-bg: var(--normal-text);\n\n --error-bg: var(--normal-bg);\n --error-text: var(--normal-text);\n --error-border: var(--normal-border);\n --error-svg-clr: var(--normal-bg);\n --error-svg-bg: var(--normal-text);\n\n --info-bg: var(--normal-bg);\n --info-text: var(--normal-text);\n --info-border: var(--normal-border);\n --info-svg-clr: var(--normal-bg);\n --info-svg-bg: var(--normal-text);\n\n --loader-stroke: hsl(0, 0%, 80%);\n --loader-bg: hsl(0, 0%, 50%);\n}\n\n.kitzo-toast-container.kitzo-toast-rich-colors {\n --success-bg: hsl(152, 65%, 95%);\n --success-text: hsl(142, 98%, 30%);\n --success-border: hsl(142, 100%, 93%);\n --success-svg-clr: white;\n --success-svg-bg: hsl(142, 98%, 40%);\n\n --error-bg: hsl(0, 65%, 95%);\n --error-text: hsl(6, 98%, 40%);\n --error-border: hsl(0, 100%, 94%);\n --error-svg-clr: white;\n --error-svg-bg: hsl(6, 98%, 50%);\n\n --info-bg: hsl(210, 65%, 95%);\n --info-text: hsl(210, 100%, 20%);\n --info-border: hsl(210, 100%, 94%);\n --info-svg-clr: white;\n --info-svg-bg: hsl(210, 100%, 40%);\n}\n\n.kitzo-toast-container.kitzo-toast-rich-colors.kitzo-toast-dark {\n --success-bg: hsl(152, 65%, 15%);\n --success-text: hsl(142, 98%, 70%);\n --success-border: hsl(142, 100%, 15%);\n --success-svg-clr: white;\n --success-svg-bg: hsl(142, 98%, 40%);\n\n --error-bg: hsl(0, 65%, 15%);\n --error-text: hsl(6, 98%, 70%);\n --error-border: hsl(0, 100%, 15%);\n --error-svg-clr: white;\n --error-svg-bg: hsl(6, 98%, 50%);\n\n --info-bg: hsl(210, 65%, 15%);\n --info-text: hsl(210, 100%, 70%);\n --info-border: hsl(210, 100%, 16%);\n --info-svg-clr: white;\n --info-svg-bg: hsl(210, 100%, 40%);\n}\n\n.kitzo-toast {\n font-family: inherit;\n font-size: 0.875rem;\n transition:\n transform 280ms,\n opacity 280ms;\n will-change: transform, opacity;\n}\n\n/*! toast transfor origin */\n.kitzo-toast.transform-origin-top-left {\n transform-origin: top left;\n}\n.kitzo-toast.transform-origin-top-center {\n transform-origin: top center;\n}\n.kitzo-toast.transform-origin-top-right {\n transform-origin: top right;\n}\n.kitzo-toast.transform-origin-bottom-left {\n transform-origin: bottom left;\n}\n.kitzo-toast.transform-origin-bottom-center {\n transform-origin: bottom center;\n}\n.kitzo-toast.transform-origin-bottom-right {\n transform-origin: bottom right;\n}\n\n/*! Toast theme styles */\n.kitzo-toast.type-normal {\n background-color: var(--normal-bg);\n color: var(--normal-text);\n border: 1px solid var(--normal-border);\n}\n.kitzo-toast.type-loading {\n background-color: var(--normal-bg);\n color: var(--normal-text);\n border: 1px solid var(--normal-border);\n}\n\n.kitzo-toast.type-success {\n background-color: var(--success-bg);\n color: var(--success-text);\n border: 1px solid var(--success-border);\n}\n\n.kitzo-toast.type-error {\n background-color: var(--error-bg);\n color: var(--error-text);\n border: 1px solid var(--error-border);\n}\n\n.kitzo-toast.type-info {\n background-color: var(--info-bg);\n color: var(--info-text);\n border: 1px solid var(--info-border);\n}\n\n.kitzo-toast.type-normal,\n.kitzo-toast.type-loading,\n.kitzo-toast.type-success,\n.kitzo-toast.type-error,\n.kitzo-toast.type-info {\n border-radius: 0.425rem;\n padding: 0.325rem 0.5rem;\n box-shadow: 0 3px 8px -3px hsl(0, 0%, 0%, 0.15);\n}\n\n/*! toast transition styles */\n.kitzo-toast.status-entering.pos-y-top {\n opacity: 0;\n transform: translateY(-120%) scale(0.6);\n}\n\n.kitzo-toast.status-visible.pos-y-top {\n opacity: 1;\n transform: translateY(0) scale(1);\n}\n\n.kitzo-toast.status-leaving.pos-y-top {\n transform-origin: top;\n opacity: 0;\n transform: translateY(-120%) scale(0.6);\n}\n\n.kitzo-toast.status-entering.pos-y-bottom {\n opacity: 0;\n transform: translateY(120%) scale(0.6);\n}\n\n.kitzo-toast.status-visible.pos-y-bottom {\n opacity: 1;\n transform: translateY(0) scale(1);\n}\n\n.kitzo-toast.status-leaving.pos-y-bottom {\n transform-origin: bottom;\n opacity: 0;\n transform: translateY(120%) scale(0.6);\n}\n\n.action-update {\n animation: update 150ms;\n}\n\n@keyframes update {\n 0% {\n opacity: 0.5;\n }\n 100% {\n opacity: 1;\n }\n}\n\n/*! svg stylings */\n.svg-container {\n display: grid;\n place-items: center;\n border-radius: 10rem;\n height: 18px;\n width: 18px;\n position: relative;\n overflow: hidden;\n\n scale: 1.1;\n animation: svg-container-animation 400ms ease-in-out forwards;\n\n svg {\n width: 12px;\n height: 12px;\n stroke-width: 4px;\n display: inline-block;\n }\n}\n\n.svg-container.success {\n color: var(--success-svg-clr);\n background-color: var(--success-svg-bg);\n}\n.svg-container.error {\n color: var(--error-svg-clr);\n background-color: var(--error-svg-bg);\n\n svg {\n scale: 0;\n animation: error-svg-zoom-in 170ms 130ms forwards;\n }\n}\n\n.svg-container.info {\n color: var(--info-svg-clr);\n background-color: var(--info-svg-bg);\n animation: info-svg-bell 400ms 200ms;\n\n svg {\n width: 14px;\n height: 14px;\n }\n}\n\n.svg-container.success::before {\n content: '';\n position: absolute;\n inset: 0;\n z-index: 5;\n border-radius: 10rem;\n background-color: var(--success-svg-bg);\n animation: success-container-before-animation 250ms 150ms forwards;\n}\n\n@keyframes svg-container-animation {\n 0% {\n scale: 1;\n }\n 50% {\n scale: 1.15;\n }\n 100% {\n scale: 1;\n }\n}\n\n@keyframes success-container-before-animation {\n from {\n translate: 0 0;\n }\n to {\n translate: 100% -50%;\n }\n}\n\n@keyframes error-svg-zoom-in {\n from {\n scale: 0;\n }\n to {\n scale: 1;\n }\n}\n\n@keyframes info-svg-bell {\n 0% {\n transform: rotate(0);\n }\n 25% {\n transform: rotate(15deg);\n }\n 75% {\n transform: rotate(-15deg);\n }\n 100% {\n transform: rotate(0);\n }\n}\n\n.promise-svg-container {\n width: 20px;\n height: 20px;\n display: grid;\n place-items: center;\n\n .loader {\n width: 14px;\n height: 14px;\n background-image: conic-gradient(\n var(--loader-stroke) 0 25%,\n var(--loader-bg) 0 100%\n );\n border-radius: 10rem;\n position: relative;\n animation: rotate-infinity 1000ms linear infinite;\n }\n .loader::before {\n content: '';\n position: absolute;\n inset: 2px;\n border-radius: inherit;\n background-color: var(--normal-bg);\n }\n}\n\n@keyframes rotate-infinity {\n to {\n rotate: 360deg;\n }\n}";
|
|
247
|
-
var listeners = new Set();
|
|
248
|
-
function subscribe(fn) {
|
|
249
|
-
if (!document.getElementById('kitzo-toast-styles')) {
|
|
250
|
-
var styleTag = document.createElement('style');
|
|
251
|
-
styleTag.id = 'kitzo-toast-styles';
|
|
252
|
-
styleTag.textContent = toastStyles;
|
|
253
|
-
document.head.appendChild(styleTag);
|
|
254
|
-
}
|
|
255
|
-
listeners.add(fn);
|
|
256
|
-
return function () {
|
|
257
|
-
return listeners["delete"](fn);
|
|
258
|
-
};
|
|
259
|
-
}
|
|
260
|
-
function notify(toast) {
|
|
261
|
-
listeners.forEach(function (fn) {
|
|
262
|
-
return fn(toast);
|
|
263
|
-
});
|
|
264
|
-
}
|
|
265
|
-
var DEFAULTS = {
|
|
266
|
-
duration: 2800,
|
|
267
|
-
showIcon: true
|
|
268
|
-
};
|
|
269
|
-
var uid = 0;
|
|
270
|
-
var genId = function genId() {
|
|
271
|
-
var _crypto$randomUUID, _crypto$randomUUID2, _crypto;
|
|
272
|
-
return (_crypto$randomUUID = (_crypto$randomUUID2 = (_crypto = crypto).randomUUID) === null || _crypto$randomUUID2 === void 0 ? void 0 : _crypto$randomUUID2.call(_crypto)) !== null && _crypto$randomUUID !== void 0 ? _crypto$randomUUID : "kitzo_toast_id_".concat(++uid);
|
|
273
|
-
};
|
|
274
|
-
var zIndex = 1;
|
|
275
|
-
function createToast(type, action, content) {
|
|
276
|
-
var _opts$id, _opts$duration, _opts$showIcon;
|
|
277
|
-
var options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
|
|
278
|
-
var opts = _typeof(options) === 'object' && options !== null ? options : {};
|
|
279
|
-
return _objectSpread2({
|
|
280
|
-
id: (_opts$id = opts.id) !== null && _opts$id !== void 0 ? _opts$id : genId(),
|
|
281
|
-
type: type,
|
|
282
|
-
zIndex: ++zIndex,
|
|
283
|
-
render: content,
|
|
284
|
-
duration: (_opts$duration = opts.duration) !== null && _opts$duration !== void 0 ? _opts$duration : DEFAULTS.duration,
|
|
285
|
-
showIcon: (_opts$showIcon = opts.showIcon) !== null && _opts$showIcon !== void 0 ? _opts$showIcon : DEFAULTS.showIcon,
|
|
286
|
-
action: action
|
|
287
|
-
}, opts);
|
|
288
|
-
}
|
|
289
|
-
function toast(content, options) {
|
|
290
|
-
if (content == null) return;
|
|
291
|
-
notify(createToast('normal', 'add', content, options));
|
|
292
|
-
}
|
|
293
|
-
toast.success = function (content, options) {
|
|
294
|
-
if (content == null) return;
|
|
295
|
-
notify(createToast('success', 'add', content, options));
|
|
296
|
-
};
|
|
297
|
-
toast.error = function (content, options) {
|
|
298
|
-
if (content == null) return;
|
|
299
|
-
notify(createToast('error', 'add', content, options));
|
|
300
|
-
};
|
|
301
|
-
toast.info = function (content, options) {
|
|
302
|
-
if (content == null) return;
|
|
303
|
-
notify(createToast('info', 'add', content, options));
|
|
304
|
-
};
|
|
305
|
-
toast.custom = function (content, options) {
|
|
306
|
-
if (content == null) return;
|
|
307
|
-
notify(createToast('custom', 'add', content, options));
|
|
308
|
-
};
|
|
309
|
-
toast.dismiss = function (id) {
|
|
310
|
-
notify({
|
|
311
|
-
action: 'dismiss',
|
|
312
|
-
id: id
|
|
313
|
-
});
|
|
314
|
-
};
|
|
315
|
-
toast.update = function (id, content) {
|
|
316
|
-
var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
|
|
317
|
-
if (!id) return;
|
|
318
|
-
notify(createToast('custom', 'update', content, _objectSpread2(_objectSpread2({}, options), {}, {
|
|
319
|
-
id: id
|
|
320
|
-
})));
|
|
321
|
-
};
|
|
322
|
-
var loading = function loading(content) {
|
|
323
|
-
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
324
|
-
notify(createToast('loading', 'add', content, _objectSpread2(_objectSpread2({}, options), {}, {
|
|
325
|
-
duration: Infinity
|
|
326
|
-
})));
|
|
327
|
-
};
|
|
328
|
-
toast.promise = function (promise, handlers) {
|
|
329
|
-
var _options$id;
|
|
330
|
-
var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
|
|
331
|
-
if (!promise) return;
|
|
332
|
-
if (!handlers) return;
|
|
333
|
-
if (!handlers.loading) return;
|
|
334
|
-
if (!handlers.success) return;
|
|
335
|
-
if (!handlers.error) return;
|
|
336
|
-
var id = (_options$id = options.id) !== null && _options$id !== void 0 ? _options$id : genId();
|
|
337
|
-
loading(handlers.loading, _objectSpread2(_objectSpread2({}, options), {}, {
|
|
338
|
-
id: id,
|
|
339
|
-
duration: Infinity
|
|
340
|
-
}));
|
|
341
|
-
promise.then(/*#__PURE__*/function () {
|
|
342
|
-
var _ref = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(result) {
|
|
343
|
-
var _options$duration;
|
|
344
|
-
var successContent, _t, _t2, _t3;
|
|
345
|
-
return _regenerator().w(function (_context) {
|
|
346
|
-
while (1) switch (_context.n) {
|
|
347
|
-
case 0:
|
|
348
|
-
if (!(typeof handlers.success === 'function')) {
|
|
349
|
-
_context.n = 2;
|
|
350
|
-
break;
|
|
351
|
-
}
|
|
352
|
-
_context.n = 1;
|
|
353
|
-
return handlers.success(result);
|
|
354
|
-
case 1:
|
|
355
|
-
_t = _context.v;
|
|
356
|
-
_context.n = 3;
|
|
357
|
-
break;
|
|
358
|
-
case 2:
|
|
359
|
-
_t = handlers.success;
|
|
360
|
-
case 3:
|
|
361
|
-
successContent = _t;
|
|
362
|
-
_t2 = toast;
|
|
363
|
-
_t3 = id;
|
|
364
|
-
_context.n = 4;
|
|
365
|
-
return successContent;
|
|
366
|
-
case 4:
|
|
367
|
-
_t2.update.call(_t2, _t3, _context.v, {
|
|
368
|
-
type: 'success',
|
|
369
|
-
duration: (_options$duration = options.duration) !== null && _options$duration !== void 0 ? _options$duration : 2800
|
|
370
|
-
});
|
|
371
|
-
return _context.a(2, result);
|
|
372
|
-
}
|
|
373
|
-
}, _callee);
|
|
374
|
-
}));
|
|
375
|
-
return function (_x) {
|
|
376
|
-
return _ref.apply(this, arguments);
|
|
377
|
-
};
|
|
378
|
-
}())["catch"](/*#__PURE__*/function () {
|
|
379
|
-
var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2(error) {
|
|
380
|
-
var _options$duration2;
|
|
381
|
-
var errorContent, _t4;
|
|
382
|
-
return _regenerator().w(function (_context2) {
|
|
383
|
-
while (1) switch (_context2.n) {
|
|
384
|
-
case 0:
|
|
385
|
-
if (!(typeof handlers.error === 'function')) {
|
|
386
|
-
_context2.n = 2;
|
|
387
|
-
break;
|
|
388
|
-
}
|
|
389
|
-
_context2.n = 1;
|
|
390
|
-
return handlers.error(error);
|
|
391
|
-
case 1:
|
|
392
|
-
_t4 = _context2.v;
|
|
393
|
-
_context2.n = 3;
|
|
394
|
-
break;
|
|
395
|
-
case 2:
|
|
396
|
-
_t4 = handlers.error;
|
|
397
|
-
case 3:
|
|
398
|
-
errorContent = _t4;
|
|
399
|
-
toast.update(id, errorContent, {
|
|
400
|
-
type: 'error',
|
|
401
|
-
duration: (_options$duration2 = options.duration) !== null && _options$duration2 !== void 0 ? _options$duration2 : 3800
|
|
402
|
-
});
|
|
403
|
-
throw error;
|
|
404
|
-
case 4:
|
|
405
|
-
return _context2.a(2);
|
|
406
|
-
}
|
|
407
|
-
}, _callee2);
|
|
408
|
-
}));
|
|
409
|
-
return function (_x2) {
|
|
410
|
-
return _ref2.apply(this, arguments);
|
|
411
|
-
};
|
|
412
|
-
}());
|
|
413
|
-
return promise;
|
|
414
|
-
};
|
|
415
|
-
|
|
416
|
-
var timeouts = new Map();
|
|
417
|
-
var LEAVE_DELAY = 600;
|
|
418
|
-
var MIN_VISIBLE = 700;
|
|
419
|
-
function clearToastTimers(id) {
|
|
420
|
-
var t = timeouts.get(id);
|
|
421
|
-
if (!t) return;
|
|
422
|
-
clearTimeout(t.leaving);
|
|
423
|
-
clearTimeout(t.left);
|
|
424
|
-
timeouts["delete"](id);
|
|
425
|
-
}
|
|
426
|
-
function getDurations(duration) {
|
|
427
|
-
var d = Number(duration);
|
|
428
|
-
if (!isFinite(d)) return null;
|
|
429
|
-
var visible = Math.max(MIN_VISIBLE, d);
|
|
430
|
-
return {
|
|
431
|
-
leaving: visible,
|
|
432
|
-
left: visible + LEAVE_DELAY
|
|
433
|
-
};
|
|
434
|
-
}
|
|
435
|
-
function armToastTimers(toast, setToasts) {
|
|
436
|
-
var durations = getDurations(toast.duration);
|
|
437
|
-
if (!durations) return;
|
|
438
|
-
clearToastTimers(toast.id);
|
|
439
|
-
var leaving = setTimeout(function () {
|
|
440
|
-
setToasts(function (prev) {
|
|
441
|
-
return prev.map(function (t) {
|
|
442
|
-
return t.id === toast.id ? _objectSpread2(_objectSpread2({}, t), {}, {
|
|
443
|
-
status: 'leaving'
|
|
444
|
-
}) : t;
|
|
445
|
-
});
|
|
446
|
-
});
|
|
447
|
-
}, durations.leaving);
|
|
448
|
-
var left = setTimeout(function () {
|
|
449
|
-
setToasts(function (prev) {
|
|
450
|
-
return prev.filter(function (t) {
|
|
451
|
-
return t.id !== toast.id;
|
|
452
|
-
});
|
|
453
|
-
});
|
|
454
|
-
timeouts["delete"](toast.id);
|
|
455
|
-
}, durations.left);
|
|
456
|
-
timeouts.set(toast.id, {
|
|
457
|
-
leaving: leaving,
|
|
458
|
-
left: left
|
|
459
|
-
});
|
|
460
|
-
}
|
|
461
|
-
function manageToasts(toast, setToasts) {
|
|
462
|
-
// dismiss
|
|
463
|
-
if (toast.action === 'dismiss') {
|
|
464
|
-
if (!toast.id) {
|
|
465
|
-
setToasts(function (prev) {
|
|
466
|
-
return prev.map(function (t) {
|
|
467
|
-
return _objectSpread2(_objectSpread2({}, t), {}, {
|
|
468
|
-
status: 'leaving'
|
|
469
|
-
});
|
|
470
|
-
});
|
|
471
|
-
});
|
|
472
|
-
setTimeout(function () {
|
|
473
|
-
setToasts([]);
|
|
474
|
-
}, LEAVE_DELAY);
|
|
475
|
-
timeouts.forEach(function (_ref) {
|
|
476
|
-
var leaving = _ref.leaving,
|
|
477
|
-
left = _ref.left;
|
|
478
|
-
clearTimeout(leaving);
|
|
479
|
-
clearTimeout(left);
|
|
480
|
-
});
|
|
481
|
-
timeouts.clear();
|
|
482
|
-
return;
|
|
483
|
-
}
|
|
484
|
-
clearToastTimers(toast.id);
|
|
485
|
-
setToasts(function (prev) {
|
|
486
|
-
return prev.map(function (t) {
|
|
487
|
-
return t.id === toast.id ? _objectSpread2(_objectSpread2({}, t), {}, {
|
|
488
|
-
status: 'leaving'
|
|
489
|
-
}) : t;
|
|
490
|
-
});
|
|
491
|
-
});
|
|
492
|
-
setTimeout(function () {
|
|
493
|
-
setToasts(function (prev) {
|
|
494
|
-
return prev.filter(function (t) {
|
|
495
|
-
return t.id !== toast.id;
|
|
496
|
-
});
|
|
497
|
-
});
|
|
498
|
-
}, LEAVE_DELAY);
|
|
499
|
-
return;
|
|
500
|
-
}
|
|
501
|
-
|
|
502
|
-
// update
|
|
503
|
-
if (toast.action === 'update') {
|
|
504
|
-
setToasts(function (prev) {
|
|
505
|
-
var prevToast = prev.find(function (t) {
|
|
506
|
-
return t.id === toast.id;
|
|
507
|
-
});
|
|
508
|
-
if (!prevToast) return prev;
|
|
509
|
-
if (prevToast.type !== 'custom' && prevToast.type !== 'loading') return prev;
|
|
510
|
-
return prev.map(function (t) {
|
|
511
|
-
return t.id === toast.id ? _objectSpread2(_objectSpread2(_objectSpread2({}, t), toast), {}, {
|
|
512
|
-
status: 'visible'
|
|
513
|
-
}) : t;
|
|
514
|
-
});
|
|
515
|
-
});
|
|
516
|
-
armToastTimers(toast, setToasts);
|
|
517
|
-
return;
|
|
518
|
-
}
|
|
519
|
-
|
|
520
|
-
// add
|
|
521
|
-
var enteringToast = _objectSpread2(_objectSpread2({}, toast), {}, {
|
|
522
|
-
status: 'entering'
|
|
523
|
-
});
|
|
524
|
-
setToasts(function (prev) {
|
|
525
|
-
var prevToast = prev.find(function (t) {
|
|
526
|
-
return t.id === enteringToast.id;
|
|
527
|
-
});
|
|
528
|
-
if (prevToast) return prev;
|
|
529
|
-
return [enteringToast].concat(_toConsumableArray(prev));
|
|
530
|
-
});
|
|
531
|
-
requestAnimationFrame(function () {
|
|
532
|
-
setToasts(function (prev) {
|
|
533
|
-
return prev.map(function (t) {
|
|
534
|
-
return t.id === toast.id ? _objectSpread2(_objectSpread2({}, t), {}, {
|
|
535
|
-
status: 'visible'
|
|
536
|
-
}) : t;
|
|
537
|
-
});
|
|
538
|
-
});
|
|
539
|
-
});
|
|
540
|
-
armToastTimers(enteringToast, setToasts);
|
|
541
|
-
}
|
|
542
|
-
|
|
543
|
-
function SuccessSvg() {
|
|
544
|
-
return /*#__PURE__*/React.createElement("div", {
|
|
545
|
-
className: "svg-container success"
|
|
546
|
-
}, /*#__PURE__*/React.createElement("svg", {
|
|
547
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
548
|
-
width: "24",
|
|
549
|
-
height: "24",
|
|
550
|
-
viewBox: "0 0 24 24",
|
|
551
|
-
fill: "none",
|
|
552
|
-
stroke: "currentColor",
|
|
553
|
-
strokeWidth: "2",
|
|
554
|
-
strokeLinecap: "round",
|
|
555
|
-
strokeLinejoin: "round"
|
|
556
|
-
}, /*#__PURE__*/React.createElement("path", {
|
|
557
|
-
d: "M20 6 9 17l-5-5"
|
|
558
|
-
})));
|
|
559
|
-
}
|
|
560
|
-
function ErrorSvg() {
|
|
561
|
-
return /*#__PURE__*/React.createElement("div", {
|
|
562
|
-
className: "svg-container error"
|
|
563
|
-
}, /*#__PURE__*/React.createElement("svg", {
|
|
564
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
565
|
-
width: "24",
|
|
566
|
-
height: "24",
|
|
567
|
-
viewBox: "0 0 24 24",
|
|
568
|
-
fill: "none",
|
|
569
|
-
stroke: "currentColor",
|
|
570
|
-
strokeWidth: "2",
|
|
571
|
-
strokeLinecap: "round",
|
|
572
|
-
strokeLinejoin: "round"
|
|
573
|
-
}, /*#__PURE__*/React.createElement("path", {
|
|
574
|
-
d: "M18 6 6 18"
|
|
575
|
-
}), /*#__PURE__*/React.createElement("path", {
|
|
576
|
-
d: "m6 6 12 12"
|
|
577
|
-
})));
|
|
578
|
-
}
|
|
579
|
-
function LoadingSvg() {
|
|
580
|
-
return /*#__PURE__*/React.createElement("div", {
|
|
581
|
-
className: "promise-svg-container"
|
|
582
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
583
|
-
className: "loader"
|
|
584
|
-
}));
|
|
585
|
-
}
|
|
586
|
-
function InfoSvg() {
|
|
587
|
-
return /*#__PURE__*/React.createElement("div", {
|
|
588
|
-
className: "svg-container info"
|
|
589
|
-
}, /*#__PURE__*/React.createElement("svg", {
|
|
590
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
591
|
-
viewBox: "0 0 24 24",
|
|
592
|
-
width: "16",
|
|
593
|
-
height: "16",
|
|
594
|
-
fill: "currentColor"
|
|
595
|
-
}, /*#__PURE__*/React.createElement("path", {
|
|
596
|
-
d: "M12 6C12.8284 6 13.5 5.32843 13.5 4.5C13.5 3.67157 12.8284 3 12 3C11.1716 3 10.5 3.67157 10.5 4.5C10.5 5.32843 11.1716 6 12 6ZM9 10H11V18H9V20H15V18H13V8H9V10Z"
|
|
597
|
-
})));
|
|
598
|
-
}
|
|
599
|
-
|
|
600
|
-
function Toast(_ref) {
|
|
601
|
-
var t = _ref.t,
|
|
602
|
-
gap = _ref.gap,
|
|
603
|
-
setToasts = _ref.setToasts,
|
|
604
|
-
animateTransformOrigin = _ref.animateTransformOrigin,
|
|
605
|
-
containerPosition = _ref.containerPosition;
|
|
606
|
-
var id = t.id,
|
|
607
|
-
type = t.type,
|
|
608
|
-
render = t.render,
|
|
609
|
-
action = t.action,
|
|
610
|
-
status = t.status;
|
|
611
|
-
var ref = useRef(null);
|
|
612
|
-
useLayoutEffect(function () {
|
|
613
|
-
if (!ref.current) return;
|
|
614
|
-
var g = typeof gap === 'number' ? gap : Number.isFinite(Number(gap)) ? Number(gap) : 8;
|
|
615
|
-
var el = ref.current;
|
|
616
|
-
var observer = new ResizeObserver(function () {
|
|
617
|
-
var height = el.offsetHeight + g;
|
|
618
|
-
setToasts(function (prev) {
|
|
619
|
-
return prev.map(function (t) {
|
|
620
|
-
return t.id === id ? _objectSpread2(_objectSpread2({}, t), {}, {
|
|
621
|
-
height: height
|
|
622
|
-
}) : t;
|
|
623
|
-
});
|
|
624
|
-
});
|
|
625
|
-
});
|
|
626
|
-
observer.observe(el);
|
|
627
|
-
return function () {
|
|
628
|
-
return observer.disconnect();
|
|
629
|
-
};
|
|
630
|
-
}, []);
|
|
631
|
-
var allowedPositions = ['top-left', 'top-center', 'top-right', 'bottom-left', 'bottom-center', 'bottom-right'];
|
|
632
|
-
var userPosition = t.position || containerPosition;
|
|
633
|
-
var position = allowedPositions.includes(userPosition) ? userPosition : 'top-center';
|
|
634
|
-
var shouldAnimateTransformOrigin = typeof t.animateTransformOrigin === 'boolean' ? t.animateTransformOrigin : animateTransformOrigin;
|
|
635
|
-
return /*#__PURE__*/React.createElement("div", {
|
|
636
|
-
ref: ref,
|
|
637
|
-
style: getToastContainerStyles({
|
|
638
|
-
t: t,
|
|
639
|
-
position: position
|
|
640
|
-
})
|
|
641
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
642
|
-
style: getToastStyles(),
|
|
643
|
-
className: "kitzo-toast type-".concat(type, " action-").concat(action, " status-").concat(status, " pos-y-").concat(position.split('-')[0], " pos-x-").concat(position.split('-')[1], " ").concat(shouldAnimateTransformOrigin ? "transform-origin-".concat(position) : '')
|
|
644
|
-
}, t.showIcon && type !== 'normal' && type !== 'custom' && /*#__PURE__*/React.createElement("div", {
|
|
645
|
-
style: {
|
|
646
|
-
flexShrink: 0
|
|
647
|
-
}
|
|
648
|
-
}, type === 'loading' && /*#__PURE__*/React.createElement(LoadingSvg, null), type === 'success' && /*#__PURE__*/React.createElement(SuccessSvg, null), type === 'error' && /*#__PURE__*/React.createElement(ErrorSvg, null), type === 'info' && /*#__PURE__*/React.createElement(InfoSvg, null)), /*#__PURE__*/React.createElement("div", {
|
|
649
|
-
style: {
|
|
650
|
-
flex: 1
|
|
651
|
-
}
|
|
652
|
-
}, typeof render === 'function' ? render(function () {
|
|
653
|
-
return toast.dismiss(id);
|
|
654
|
-
}) : render)));
|
|
655
|
-
}
|
|
656
|
-
function getToastStyles() {
|
|
657
|
-
var styles = {
|
|
658
|
-
pointerEvents: 'all',
|
|
659
|
-
display: 'flex',
|
|
660
|
-
alignItems: 'center',
|
|
661
|
-
gap: 8
|
|
662
|
-
};
|
|
663
|
-
return styles;
|
|
664
|
-
}
|
|
665
|
-
function getToastContainerStyles(_ref2) {
|
|
666
|
-
var t = _ref2.t,
|
|
667
|
-
position = _ref2.position;
|
|
668
|
-
var styles = {
|
|
669
|
-
position: 'absolute',
|
|
670
|
-
zIndex: t.zIndex,
|
|
671
|
-
left: 0,
|
|
672
|
-
width: '100%',
|
|
673
|
-
transition: 'transform 180ms',
|
|
674
|
-
display: 'flex'
|
|
675
|
-
};
|
|
676
|
-
var transform = position.includes('top') ? "translateY(".concat(t.distance || 0, "px)") : "translateY(-".concat(t.distance || 0, "px)");
|
|
677
|
-
var justifyContent = position.includes('left') ? 'flex-start' : position.includes('center') ? 'center' : 'flex-end';
|
|
678
|
-
styles.transform = transform;
|
|
679
|
-
styles.justifyContent = justifyContent;
|
|
680
|
-
if (position.includes('top')) styles.top = 0;
|
|
681
|
-
if (position.includes('bottom')) styles.bottom = 0;
|
|
682
|
-
return styles;
|
|
683
|
-
}
|
|
684
|
-
|
|
685
|
-
function Toaster(_ref) {
|
|
686
|
-
var _ref$position = _ref.position,
|
|
687
|
-
position = _ref$position === void 0 ? 'top-center' : _ref$position,
|
|
688
|
-
_ref$richColors = _ref.richColors,
|
|
689
|
-
richColors = _ref$richColors === void 0 ? false : _ref$richColors,
|
|
690
|
-
_ref$gap = _ref.gap,
|
|
691
|
-
gap = _ref$gap === void 0 ? 8 : _ref$gap,
|
|
692
|
-
_ref$edgeOffset = _ref.edgeOffset,
|
|
693
|
-
edgeOffset = _ref$edgeOffset === void 0 ? 16 : _ref$edgeOffset,
|
|
694
|
-
_ref$isDark = _ref.isDark,
|
|
695
|
-
isDark = _ref$isDark === void 0 ? window.matchMedia('(prefers-color-scheme: dark)').matches : _ref$isDark,
|
|
696
|
-
_ref$animateTransform = _ref.animateTransformOrigin,
|
|
697
|
-
animateTransformOrigin = _ref$animateTransform === void 0 ? true : _ref$animateTransform;
|
|
698
|
-
var _useState = useState([]),
|
|
699
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
700
|
-
toasts = _useState2[0],
|
|
701
|
-
setToasts = _useState2[1];
|
|
702
|
-
useEffect(function () {
|
|
703
|
-
var unsub = subscribe(function (toast) {
|
|
704
|
-
return manageToasts(toast, setToasts);
|
|
705
|
-
});
|
|
706
|
-
return unsub;
|
|
707
|
-
}, []);
|
|
708
|
-
useLayoutEffect(function () {
|
|
709
|
-
var grouped = toasts.reduce(function (prev, t) {
|
|
710
|
-
var pos = t.position || position || 'top-center';
|
|
711
|
-
(prev[pos] || (prev[pos] = [])).push(t);
|
|
712
|
-
return prev;
|
|
713
|
-
}, {});
|
|
714
|
-
var hasChanged = false;
|
|
715
|
-
var updated = toasts.map(function (toast) {
|
|
716
|
-
var pos = toast.position || position || 'top-center';
|
|
717
|
-
var group = grouped[pos];
|
|
718
|
-
var index = group.findIndex(function (t) {
|
|
719
|
-
return t.id === toast.id;
|
|
720
|
-
});
|
|
721
|
-
var distance = group.slice(0, index).reduce(function (acc, t) {
|
|
722
|
-
return acc + (t.height || 0);
|
|
723
|
-
}, 0);
|
|
724
|
-
if (distance !== toast.distance) {
|
|
725
|
-
hasChanged = true;
|
|
726
|
-
}
|
|
727
|
-
return _objectSpread2(_objectSpread2({}, toast), {}, {
|
|
728
|
-
distance: distance
|
|
729
|
-
});
|
|
730
|
-
});
|
|
731
|
-
if (hasChanged) {
|
|
732
|
-
setToasts(updated);
|
|
733
|
-
}
|
|
734
|
-
}, [toasts, position]);
|
|
735
|
-
return /*#__PURE__*/React.createElement("div", {
|
|
736
|
-
style: {
|
|
737
|
-
position: 'fixed',
|
|
738
|
-
inset: 0,
|
|
739
|
-
zIndex: 2147483647,
|
|
740
|
-
pointerEvents: 'none',
|
|
741
|
-
display: 'grid',
|
|
742
|
-
padding: edgeOffset != null ? edgeOffset : 16
|
|
743
|
-
},
|
|
744
|
-
className: "kitzo-toast-container ".concat(richColors ? 'kitzo-toast-rich-colors' : '', " ").concat(isDark ? 'kitzo-toast-dark' : '')
|
|
745
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
746
|
-
style: {
|
|
747
|
-
position: 'relative'
|
|
748
|
-
}
|
|
749
|
-
}, toasts.map(function (t) {
|
|
750
|
-
return /*#__PURE__*/React.createElement(Toast, {
|
|
751
|
-
key: t.id,
|
|
752
|
-
t: t,
|
|
753
|
-
gap: gap,
|
|
754
|
-
setToasts: setToasts,
|
|
755
|
-
animateTransformOrigin: animateTransformOrigin,
|
|
756
|
-
containerPosition: position
|
|
757
|
-
});
|
|
758
|
-
})));
|
|
759
|
-
}
|
|
760
|
-
|
|
761
|
-
// import './style.css';
|
|
762
|
-
var tooltipStyles = "/* Default styling */\n.kitzo-tooltip-root {\n --bg-clr: hsl(0, 0%, 15%);\n --text-clr: hsl(0, 0%, 95%);\n\n --transition-startDuration: calc(var(--startDuration) * 1ms);\n --transition-endDuration: calc(var(--endDuration) * 1ms);\n --transition-startDelay: calc(var(--startDelay) * 1ms);\n --transition-endDelay: calc(var(--endDelay) * 1ms);\n}\n\n.kitzo-tooltip-root.tooltip-theme-dark {\n --bg-clr: hsl(0, 0%, 95%);\n --text-clr: hsl(0, 0%, 15%);\n}\n\n.kitzo-tooltip-content-default-style {\n font-family:\n inherit,\n system-ui,\n -apple-system,\n BlinkMacSystemFont,\n 'Segoe UI',\n Roboto,\n Oxygen,\n Ubuntu,\n Cantarell,\n 'Open Sans',\n 'Helvetica Neue',\n sans-serif;\n font-size: 0.875rem;\n background-color: var(--bg-clr);\n color: var(--text-clr);\n padding-block: 0.25rem;\n padding-inline: 0.5rem;\n border-radius: 0.325rem;\n}\n\n/* Tooltip positioning */\n.kitzo-tooltip-wrapper {\n --tooltip-offset: calc(var(--offset) * 1px + 1px);\n opacity: 0;\n transition-property: opacity;\n transition-delay: calc(\n var(--transition-endDuration) + var(--transition-endDelay)\n );\n}\n\n.kitzo-tooltip-root:hover .kitzo-tooltip-wrapper {\n opacity: 1;\n transition-delay: 0ms;\n}\n\n/* Top */\n.kitzo-tooltip-wrapper.top {\n bottom: 100%;\n padding-block-end: var(--tooltip-offset);\n}\n.kitzo-tooltip-wrapper.top {\n left: 50%;\n translate: -50% 0;\n}\n.kitzo-tooltip-wrapper.top.start {\n left: 0;\n translate: 0 0;\n}\n.kitzo-tooltip-wrapper.top.end {\n right: 0;\n translate: 0 0;\n}\n\n/* Right */\n.kitzo-tooltip-wrapper.right {\n left: 100%;\n padding-inline-start: var(--tooltip-offset);\n}\n.kitzo-tooltip-wrapper.right {\n top: 50%;\n translate: 0 -50%;\n}\n.kitzo-tooltip-wrapper.right.start {\n top: 0;\n translate: 0 0;\n}\n.kitzo-tooltip-wrapper.right.end {\n top: 100%;\n translate: 0 -100%;\n}\n\n/* Bottom */\n.kitzo-tooltip-wrapper.bottom {\n top: 100%;\n padding-block-start: var(--tooltip-offset);\n}\n.kitzo-tooltip-wrapper.bottom {\n left: 50%;\n translate: -50% 0;\n}\n.kitzo-tooltip-wrapper.bottom.start {\n left: 0;\n translate: 0 0;\n}\n.kitzo-tooltip-wrapper.bottom.end {\n left: 100%;\n translate: -100% 0;\n}\n\n/* Left */\n.kitzo-tooltip-wrapper.left {\n right: 100%;\n padding-inline-end: var(--tooltip-offset);\n}\n.kitzo-tooltip-wrapper.left {\n top: 50%;\n translate: 0 -50%;\n}\n.kitzo-tooltip-wrapper.left.start {\n top: 0;\n translate: 0 0;\n}\n.kitzo-tooltip-wrapper.left.end {\n top: 100%;\n translate: 0 -100%;\n}\n\n/* Tooltip transitions */\n.kitzo-tooltip-root.animate-tooltip {\n .kitzo-tooltip-content {\n text-rendering: optimizeLegibility;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n backface-visibility: hidden;\n contain: layout paint;\n\n transition:\n transform var(--transition-endDuration) var(--transition-endDelay),\n opacity var(--transition-endDuration) var(--transition-endDelay);\n }\n}\n\n.kitzo-tooltip-content {\n transform: scale(0.8);\n opacity: 0;\n}\n\n.kitzo-tooltip-content.top {\n transform-origin: bottom;\n}\n.kitzo-tooltip-content.right {\n transform-origin: left;\n}\n.kitzo-tooltip-content.bottom {\n transform-origin: top;\n}\n.kitzo-tooltip-content.left {\n transform-origin: right;\n}\n\n.kitzo-tooltip-root.animate-tooltip:hover {\n .kitzo-tooltip-content {\n transition:\n transform var(--transition-startDuration) var(--transition-startDelay),\n opacity var(--transition-startDuration) var(--transition-startDelay);\n }\n}\n.kitzo-tooltip-root:hover {\n .kitzo-tooltip-content {\n transform: scale(1);\n opacity: 1;\n }\n}\n\n/* smart hover persistence feature */\n.kitzo-tooltip-root {\n .kitzo-tooltip-wrapper {\n pointer-events: none;\n }\n}\n.kitzo-tooltip-root.smart-hover:hover {\n .kitzo-tooltip-wrapper {\n pointer-events: all;\n }\n}\n\n/* Arrow */\n.kitzo-tooltip-content.tooltip-arrow {\n --effective-size: calc(var(--arrow-size, 6) * 1px);\n --effective-color: var(--arrow-color, var(--bg-clr));\n\n position: relative;\n}\n.kitzo-tooltip-content.tooltip-arrow::before {\n content: '';\n position: absolute;\n z-index: -1;\n border: var(--effective-size) solid transparent;\n}\n.kitzo-tooltip-content.tooltip-arrow.top::before {\n left: 50%;\n translate: -50% 0;\n top: calc(100% - 1px);\n border-top: var(--effective-size) solid var(--effective-color);\n}\n.kitzo-tooltip-content.tooltip-arrow.right::before {\n top: 50%;\n translate: 0 -50%;\n right: calc(100% - 1px);\n border-right: var(--effective-size) solid var(--effective-color);\n}\n.kitzo-tooltip-content.tooltip-arrow.bottom::before {\n left: 50%;\n translate: -50% 0;\n bottom: calc(100% - 1px);\n border-bottom: var(--effective-size) solid var(--effective-color);\n}\n.kitzo-tooltip-content.tooltip-arrow.left::before {\n top: 50%;\n translate: 0 -50%;\n left: calc(100% - 1px);\n border-left: var(--effective-size) solid var(--effective-color);\n}";
|
|
763
|
-
function addTooltipStyles() {
|
|
764
|
-
if (!document.getElementById('kitzo-tooltip-styles')) {
|
|
765
|
-
var styleTag = document.createElement('style');
|
|
766
|
-
styleTag.id = 'kitzo-tooltip-styles';
|
|
767
|
-
styleTag.textContent = tooltipStyles;
|
|
768
|
-
document.head.appendChild(styleTag);
|
|
769
|
-
}
|
|
770
|
-
}
|
|
771
|
-
var allowedPositions = ['top-start', 'top', 'top-end', 'right-start', 'right', 'right-end', 'bottom-start', 'bottom', 'bottom-end', 'left-start', 'left', 'left-end'];
|
|
772
|
-
function getPositionClass() {
|
|
773
|
-
var position = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
|
|
774
|
-
position = typeof position === 'string' ? position.trim().toLowerCase() : 'top';
|
|
775
|
-
var allowedPos = allowedPositions.find(function (p) {
|
|
776
|
-
return p === position;
|
|
777
|
-
});
|
|
778
|
-
if (!allowedPos) return 'top';
|
|
779
|
-
if (allowedPos.includes('-')) {
|
|
780
|
-
var _allowedPos$split = allowedPos.split('-'),
|
|
781
|
-
_allowedPos$split2 = _slicedToArray(_allowedPos$split, 2),
|
|
782
|
-
dir = _allowedPos$split2[0],
|
|
783
|
-
state = _allowedPos$split2[1];
|
|
784
|
-
return "".concat(dir, " ").concat(state);
|
|
785
|
-
} else {
|
|
786
|
-
return allowedPos;
|
|
787
|
-
}
|
|
788
|
-
}
|
|
789
|
-
function getAnimationProperties(animation) {
|
|
790
|
-
var _animation$delay, _animation$duration;
|
|
791
|
-
var effectiveStartDelay = animation === null || animation === void 0 ? void 0 : animation.startDelay;
|
|
792
|
-
var effectiveEndDelay = animation === null || animation === void 0 ? void 0 : animation.endDelay;
|
|
793
|
-
var effectiveDelay = (_animation$delay = animation === null || animation === void 0 ? void 0 : animation.delay) !== null && _animation$delay !== void 0 ? _animation$delay : 0;
|
|
794
|
-
var effectiveStartDuration = animation === null || animation === void 0 ? void 0 : animation.startDuration;
|
|
795
|
-
var effectiveEndDuration = animation === null || animation === void 0 ? void 0 : animation.endDuration;
|
|
796
|
-
var effectiveDuration = (_animation$duration = animation === null || animation === void 0 ? void 0 : animation.duration) !== null && _animation$duration !== void 0 ? _animation$duration : 110;
|
|
797
|
-
return {
|
|
798
|
-
startDelay: effectiveStartDelay !== null && effectiveStartDelay !== void 0 ? effectiveStartDelay : effectiveDelay,
|
|
799
|
-
endDelay: effectiveEndDelay !== null && effectiveEndDelay !== void 0 ? effectiveEndDelay : effectiveDelay,
|
|
800
|
-
startDuration: effectiveStartDuration !== null && effectiveStartDuration !== void 0 ? effectiveStartDuration : effectiveDuration,
|
|
801
|
-
endDuration: effectiveEndDuration !== null && effectiveEndDuration !== void 0 ? effectiveEndDuration : effectiveDuration
|
|
802
|
-
};
|
|
803
|
-
}
|
|
804
|
-
var isWindowThemeDark = function isWindowThemeDark() {
|
|
805
|
-
return window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
806
|
-
};
|
|
807
|
-
function Tooltip(_ref) {
|
|
808
|
-
var content = _ref.content,
|
|
809
|
-
_ref$position = _ref.position,
|
|
810
|
-
position = _ref$position === void 0 ? 'top' : _ref$position,
|
|
811
|
-
_ref$tooltipOptions = _ref.tooltipOptions,
|
|
812
|
-
tooltipOptions = _ref$tooltipOptions === void 0 ? {} : _ref$tooltipOptions,
|
|
813
|
-
_ref$tooltipStyle = _ref.tooltipStyle,
|
|
814
|
-
tooltipStyle = _ref$tooltipStyle === void 0 ? {} : _ref$tooltipStyle,
|
|
815
|
-
_ref$tooltipClassName = _ref.tooltipClassName,
|
|
816
|
-
tooltipClassName = _ref$tooltipClassName === void 0 ? '' : _ref$tooltipClassName,
|
|
817
|
-
_ref$animation = _ref.animation,
|
|
818
|
-
animation = _ref$animation === void 0 ? true : _ref$animation,
|
|
819
|
-
_ref$isHidden = _ref.isHidden,
|
|
820
|
-
isHidden = _ref$isHidden === void 0 ? false : _ref$isHidden,
|
|
821
|
-
isDark = _ref.isDark,
|
|
822
|
-
children = _ref.children;
|
|
823
|
-
if (typeof isHidden === 'boolean' && isHidden) return children;
|
|
824
|
-
if (content == null) {
|
|
825
|
-
console.warn("kitzo: tooltip 'content' property is required");
|
|
826
|
-
return children;
|
|
827
|
-
}
|
|
828
|
-
// Add styles once
|
|
829
|
-
addTooltipStyles();
|
|
830
|
-
|
|
831
|
-
// Define options
|
|
832
|
-
var _ref2 = tooltipOptions !== null && tooltipOptions !== void 0 ? tooltipOptions : {},
|
|
833
|
-
_ref2$offset = _ref2.offset,
|
|
834
|
-
offset = _ref2$offset === void 0 ? 8 : _ref2$offset,
|
|
835
|
-
_ref2$hideOnTouch = _ref2.hideOnTouch,
|
|
836
|
-
hideOnTouch = _ref2$hideOnTouch === void 0 ? true : _ref2$hideOnTouch,
|
|
837
|
-
_ref2$arrow = _ref2.arrow,
|
|
838
|
-
arrow = _ref2$arrow === void 0 ? false : _ref2$arrow,
|
|
839
|
-
_ref2$smartHover = _ref2.smartHover,
|
|
840
|
-
smartHover = _ref2$smartHover === void 0 ? true : _ref2$smartHover;
|
|
841
|
-
var finalOptions = {
|
|
842
|
-
offset: !isNaN(Number(offset)) ? Number(offset) : 8,
|
|
843
|
-
arrow: typeof arrow === 'boolean' ? arrow : false,
|
|
844
|
-
smartHover: typeof smartHover === 'boolean' ? smartHover : true,
|
|
845
|
-
hideOnTouch: typeof hideOnTouch === 'boolean' ? hideOnTouch : true
|
|
846
|
-
};
|
|
847
|
-
|
|
848
|
-
// Hide on touch device
|
|
849
|
-
var isTouch = window.matchMedia('(pointer: coarse)').matches;
|
|
850
|
-
if (isTouch && finalOptions.hideOnTouch) return children;
|
|
851
|
-
var positionClass = getPositionClass(position);
|
|
852
|
-
|
|
853
|
-
// Define animations
|
|
854
|
-
var animationEnabled = animation ? true : false;
|
|
855
|
-
var animationObj = animation === true ? {} : animation;
|
|
856
|
-
var finalAnimationProperties = getAnimationProperties(animationObj);
|
|
857
|
-
|
|
858
|
-
// theme
|
|
859
|
-
isDark = typeof isDark === 'boolean' ? isDark : isWindowThemeDark();
|
|
860
|
-
return /*#__PURE__*/React.createElement("div", {
|
|
861
|
-
style: {
|
|
862
|
-
position: 'relative',
|
|
863
|
-
width: 'fit-content',
|
|
864
|
-
'--offset': Math.max(0, finalOptions.offset),
|
|
865
|
-
'--startDuration': Math.max(0, finalAnimationProperties.startDuration),
|
|
866
|
-
'--endDuration': Math.max(0, finalAnimationProperties.endDuration),
|
|
867
|
-
'--startDelay': Math.max(0, finalAnimationProperties.startDelay),
|
|
868
|
-
'--endDelay': Math.max(0, finalAnimationProperties.endDelay),
|
|
869
|
-
'--arrow-color': tooltipStyle === null || tooltipStyle === void 0 ? void 0 : tooltipStyle['--arrow-color'],
|
|
870
|
-
'--arrow-size': tooltipStyle === null || tooltipStyle === void 0 ? void 0 : tooltipStyle['--arrow-size']
|
|
871
|
-
},
|
|
872
|
-
className: "kitzo-tooltip-root ".concat(isDark ? 'tooltip-theme-dark' : '', " ").concat(finalOptions.smartHover ? 'smart-hover' : '', " ").concat(animationEnabled ? 'animate-tooltip' : '')
|
|
873
|
-
}, children, /*#__PURE__*/React.createElement("div", {
|
|
874
|
-
style: {
|
|
875
|
-
position: 'absolute',
|
|
876
|
-
whiteSpace: typeof content === 'string' ? 'nowrap' : 'normal'
|
|
877
|
-
},
|
|
878
|
-
tabIndex: -1,
|
|
879
|
-
className: "kitzo-tooltip-wrapper ".concat(positionClass)
|
|
880
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
881
|
-
className: "kitzo-tooltip-content ".concat(positionClass, " ").concat(finalOptions.arrow ? 'tooltip-arrow' : '')
|
|
882
|
-
}, typeof content === 'string' || typeof content === 'number' ? /*#__PURE__*/React.createElement("div", {
|
|
883
|
-
className: "kitzo-tooltip-content-default-style"
|
|
884
|
-
}, content) : /*#__PURE__*/React.createElement("div", {
|
|
885
|
-
className: tooltipClassName,
|
|
886
|
-
style: tooltipStyle
|
|
887
|
-
}, content))));
|
|
888
|
-
}
|
|
889
|
-
|
|
890
|
-
function useDebounce(value, delay) {
|
|
891
|
-
var _useState = useState(value),
|
|
892
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
893
|
-
debouncedValue = _useState2[0],
|
|
894
|
-
setDebouncedValue = _useState2[1];
|
|
895
|
-
useEffect(function () {
|
|
896
|
-
var handler = setTimeout(function () {
|
|
897
|
-
setDebouncedValue(value);
|
|
898
|
-
}, delay);
|
|
899
|
-
return function () {
|
|
900
|
-
clearTimeout(handler);
|
|
901
|
-
};
|
|
902
|
-
}, [value, delay]);
|
|
903
|
-
return debouncedValue;
|
|
904
|
-
}
|
|
905
|
-
|
|
906
|
-
function useWindowSize() {
|
|
907
|
-
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
|
|
908
|
-
_ref$delay = _ref.delay,
|
|
909
|
-
delay = _ref$delay === void 0 ? 30 : _ref$delay;
|
|
910
|
-
if (typeof delay !== 'number') throw new Error("Only number is accepted 'useWindowSize' hook configuration: delay");
|
|
911
|
-
var _useState = useState({
|
|
912
|
-
screenWidth: window.innerWidth,
|
|
913
|
-
screenHeight: window.innerHeight
|
|
914
|
-
}),
|
|
915
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
916
|
-
screenSize = _useState2[0],
|
|
917
|
-
setScreenSize = _useState2[1];
|
|
918
|
-
var timeoutRef = useRef(null);
|
|
919
|
-
useEffect(function () {
|
|
920
|
-
function updateScreenSize() {
|
|
921
|
-
if (timeoutRef.current) {
|
|
922
|
-
clearTimeout(timeoutRef.current);
|
|
923
|
-
}
|
|
924
|
-
timeoutRef.current = setTimeout(function () {
|
|
925
|
-
setScreenSize({
|
|
926
|
-
screenWidth: window.innerWidth,
|
|
927
|
-
screenHeight: window.innerHeight
|
|
928
|
-
});
|
|
929
|
-
}, Math.max(0, Number(delay)));
|
|
930
|
-
}
|
|
931
|
-
if (typeof window !== 'undefined') {
|
|
932
|
-
window.addEventListener('resize', updateScreenSize);
|
|
933
|
-
}
|
|
934
|
-
return function () {
|
|
935
|
-
if (timeoutRef.current) clearTimeout(timeoutRef.current);
|
|
936
|
-
window.removeEventListener('resize', updateScreenSize);
|
|
937
|
-
};
|
|
938
|
-
}, [delay]);
|
|
939
|
-
return screenSize;
|
|
940
|
-
}
|
|
941
|
-
|
|
942
|
-
//! Copy function
|
|
943
|
-
function legacyCopy(text) {
|
|
944
|
-
var textarea = document.createElement('textarea');
|
|
945
|
-
textarea.value = text;
|
|
946
|
-
document.body.appendChild(textarea);
|
|
947
|
-
textarea.select();
|
|
948
|
-
document.execCommand('copy');
|
|
949
|
-
document.body.removeChild(textarea);
|
|
950
|
-
}
|
|
951
|
-
function writeToClipboard(_x) {
|
|
952
|
-
return _writeToClipboard.apply(this, arguments);
|
|
953
|
-
}
|
|
954
|
-
function _writeToClipboard() {
|
|
955
|
-
_writeToClipboard = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(text) {
|
|
956
|
-
var _navigator$clipboard;
|
|
957
|
-
var _t;
|
|
958
|
-
return _regenerator().w(function (_context) {
|
|
959
|
-
while (1) switch (_context.p = _context.n) {
|
|
960
|
-
case 0:
|
|
961
|
-
if ((_navigator$clipboard = navigator.clipboard) !== null && _navigator$clipboard !== void 0 && _navigator$clipboard.writeText) {
|
|
962
|
-
_context.n = 1;
|
|
963
|
-
break;
|
|
964
|
-
}
|
|
965
|
-
legacyCopy(text);
|
|
966
|
-
return _context.a(2);
|
|
967
|
-
case 1:
|
|
968
|
-
_context.p = 1;
|
|
969
|
-
_context.n = 2;
|
|
970
|
-
return navigator.clipboard.writeText(text);
|
|
971
|
-
case 2:
|
|
972
|
-
_context.n = 4;
|
|
973
|
-
break;
|
|
974
|
-
case 3:
|
|
975
|
-
_context.p = 3;
|
|
976
|
-
_t = _context.v;
|
|
977
|
-
legacyCopy(text);
|
|
978
|
-
console.error(_t);
|
|
979
|
-
case 4:
|
|
980
|
-
return _context.a(2);
|
|
981
|
-
}
|
|
982
|
-
}, _callee, null, [[1, 3]]);
|
|
983
|
-
}));
|
|
984
|
-
return _writeToClipboard.apply(this, arguments);
|
|
985
|
-
}
|
|
986
|
-
function copy(_x2) {
|
|
987
|
-
return _copy.apply(this, arguments);
|
|
988
|
-
}
|
|
989
|
-
function _copy() {
|
|
990
|
-
_copy = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2(doc) {
|
|
991
|
-
var text;
|
|
992
|
-
return _regenerator().w(function (_context2) {
|
|
993
|
-
while (1) switch (_context2.n) {
|
|
994
|
-
case 0:
|
|
995
|
-
if (!(doc == null)) {
|
|
996
|
-
_context2.n = 1;
|
|
997
|
-
break;
|
|
998
|
-
}
|
|
999
|
-
throw new Error('[kitzo/copy] expected a value to copy, got null or undefined.');
|
|
1000
|
-
case 1:
|
|
1001
|
-
text = typeof doc === 'string' || typeof doc === 'number' ? String(doc) : JSON.stringify(doc);
|
|
1002
|
-
_context2.n = 2;
|
|
1003
|
-
return writeToClipboard(text);
|
|
1004
|
-
case 2:
|
|
1005
|
-
return _context2.a(2);
|
|
1006
|
-
}
|
|
1007
|
-
}, _callee2);
|
|
1008
|
-
}));
|
|
1009
|
-
return _copy.apply(this, arguments);
|
|
1010
|
-
}
|
|
1011
|
-
|
|
1012
|
-
function useCopy() {
|
|
1013
|
-
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
|
|
1014
|
-
_ref$resetDelay = _ref.resetDelay,
|
|
1015
|
-
resetDelay = _ref$resetDelay === void 0 ? 1500 : _ref$resetDelay;
|
|
1016
|
-
var _useState = useState('standby'),
|
|
1017
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
1018
|
-
status = _useState2[0],
|
|
1019
|
-
setStatus = _useState2[1];
|
|
1020
|
-
var _useState3 = useState(null),
|
|
1021
|
-
_useState4 = _slicedToArray(_useState3, 2),
|
|
1022
|
-
error = _useState4[0],
|
|
1023
|
-
setError = _useState4[1];
|
|
1024
|
-
var timeoutRef = useRef(null);
|
|
1025
|
-
var isBusyRef = useRef(false);
|
|
1026
|
-
var copy$1 = useCallback(/*#__PURE__*/function () {
|
|
1027
|
-
var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(doc) {
|
|
1028
|
-
var _t;
|
|
1029
|
-
return _regenerator().w(function (_context) {
|
|
1030
|
-
while (1) switch (_context.p = _context.n) {
|
|
1031
|
-
case 0:
|
|
1032
|
-
if (!isBusyRef.current) {
|
|
1033
|
-
_context.n = 1;
|
|
1034
|
-
break;
|
|
1035
|
-
}
|
|
1036
|
-
return _context.a(2);
|
|
1037
|
-
case 1:
|
|
1038
|
-
if (timeoutRef.current) clearTimeout(timeoutRef.current);
|
|
1039
|
-
_context.p = 2;
|
|
1040
|
-
isBusyRef.current = true;
|
|
1041
|
-
setError(null);
|
|
1042
|
-
setStatus('copying');
|
|
1043
|
-
_context.n = 3;
|
|
1044
|
-
return copy(doc);
|
|
1045
|
-
case 3:
|
|
1046
|
-
setStatus('copied');
|
|
1047
|
-
_context.n = 5;
|
|
1048
|
-
break;
|
|
1049
|
-
case 4:
|
|
1050
|
-
_context.p = 4;
|
|
1051
|
-
_t = _context.v;
|
|
1052
|
-
setError(_t);
|
|
1053
|
-
setStatus('error');
|
|
1054
|
-
case 5:
|
|
1055
|
-
_context.p = 5;
|
|
1056
|
-
timeoutRef.current = setTimeout(function () {
|
|
1057
|
-
isBusyRef.current = false;
|
|
1058
|
-
setStatus('standby');
|
|
1059
|
-
}, Math.max(resetDelay, 500));
|
|
1060
|
-
return _context.f(5);
|
|
1061
|
-
case 6:
|
|
1062
|
-
return _context.a(2);
|
|
1063
|
-
}
|
|
1064
|
-
}, _callee, null, [[2, 4, 5, 6]]);
|
|
1065
|
-
}));
|
|
1066
|
-
return function (_x) {
|
|
1067
|
-
return _ref2.apply(this, arguments);
|
|
1068
|
-
};
|
|
1069
|
-
}(), [resetDelay]);
|
|
1070
|
-
useEffect(function () {
|
|
1071
|
-
return function () {
|
|
1072
|
-
if (timeoutRef.current) clearTimeout(timeoutRef.current);
|
|
1073
|
-
};
|
|
1074
|
-
}, []);
|
|
1075
|
-
return {
|
|
1076
|
-
copy: copy$1,
|
|
1077
|
-
status: status,
|
|
1078
|
-
error: error,
|
|
1079
|
-
isCopying: status === 'copying',
|
|
1080
|
-
isCopied: status === 'copied',
|
|
1081
|
-
isError: status === 'error'
|
|
1082
|
-
};
|
|
1083
|
-
}
|
|
1084
|
-
|
|
1085
|
-
export { Toaster, Tooltip, toast, useCopy, useDebounce, useWindowSize };
|
|
1086
|
-
//# sourceMappingURL=index.js.map
|