@shiflo/ui 0.0.13 → 0.0.15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/BottomSheet/BottomSheet.d.ts +1 -1
- package/dist/components/BottomSheet/BottomSheet.mjs +43 -39
- package/dist/components/BottomSheet/BottomSheet.typing.d.ts +3 -1
- package/dist/components/Dialog/Dialog.d.ts +1 -1
- package/dist/components/Dialog/Dialog.mjs +15 -12
- package/dist/components/Dialog/Dialog.typing.d.ts +3 -1
- package/dist/components/Overlay/Overlay.d.ts +1 -1
- package/dist/components/Overlay/Overlay.mjs +87 -88
- package/dist/components/Overlay/Overlay.typing.d.ts +1 -0
- package/dist/components/Snackbar/Snackbar.d.ts +1 -1
- package/dist/components/Snackbar/Snackbar.mjs +27 -25
- package/dist/components/Snackbar/Snackbar.typing.d.ts +1 -0
- package/package.json +1 -1
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { BottomSheetProps } from './BottomSheet.typing';
|
|
2
|
-
declare function BottomSheet({ open, onClose, children, transitionDuration, onClick, ref, hideDragHandleBar, hideOverlay, style, ...props }: BottomSheetProps): import("react").JSX.Element;
|
|
2
|
+
declare function BottomSheet({ open, onClose, children, transitionDuration, maxWidth, onClick, ref, hideDragHandleBar, hideOverlay, style, ...props }: BottomSheetProps): import("react").JSX.Element;
|
|
3
3
|
export default BottomSheet;
|
|
@@ -1,9 +1,10 @@
|
|
|
1
|
-
import { jsx as y, jsxs as
|
|
2
|
-
import { useState as
|
|
1
|
+
import { jsx as y, jsxs as z } from "react/jsx-runtime";
|
|
2
|
+
import { useState as G, useRef as o, useImperativeHandle as J, useEffect as S } from "react";
|
|
3
3
|
import b from "basic-styled";
|
|
4
|
-
import
|
|
5
|
-
const
|
|
6
|
-
width: 100
|
|
4
|
+
import K from "../Overlay/Overlay.mjs";
|
|
5
|
+
const N = b.div`
|
|
6
|
+
width: calc(100% - ${({ theme: { spacing: t } }) => t[800]});
|
|
7
|
+
max-width: ${({ maxWidth: t = "375px" }) => t};
|
|
7
8
|
max-height: calc(100% - ${({ theme: { spacing: t } }) => t[800]});
|
|
8
9
|
overflow-y: auto;
|
|
9
10
|
margin: ${({ theme: { spacing: t } }) => t[400]};
|
|
@@ -18,7 +19,7 @@ const K = b.div`
|
|
|
18
19
|
transform ${({ transitionDuration: t }) => `${t}ms`}
|
|
19
20
|
${({ ease: t }) => t === "in" ? "ease-out" : "ease-in"},
|
|
20
21
|
background-color 0.2s;
|
|
21
|
-
`,
|
|
22
|
+
`, Q = b.div`
|
|
22
23
|
position: sticky;
|
|
23
24
|
top: 0;
|
|
24
25
|
left: 0;
|
|
@@ -33,7 +34,7 @@ const K = b.div`
|
|
|
33
34
|
}
|
|
34
35
|
}) => t.background};
|
|
35
36
|
transition: background-color 0.2s;
|
|
36
|
-
`,
|
|
37
|
+
`, U = b.div`
|
|
37
38
|
width: 24px;
|
|
38
39
|
height: 4px;
|
|
39
40
|
border-radius: ${({ theme: { radius: t } }) => t[100]};
|
|
@@ -44,78 +45,81 @@ const K = b.div`
|
|
|
44
45
|
}) => t.main};
|
|
45
46
|
transition: background-color 0.2s;
|
|
46
47
|
`;
|
|
47
|
-
function
|
|
48
|
+
function E({
|
|
48
49
|
open: t,
|
|
49
50
|
onClose: c,
|
|
50
51
|
children: T,
|
|
51
52
|
transitionDuration: s = 200,
|
|
53
|
+
maxWidth: j = "375px",
|
|
52
54
|
onClick: $,
|
|
53
|
-
ref:
|
|
54
|
-
hideDragHandleBar:
|
|
55
|
-
hideOverlay:
|
|
56
|
-
style:
|
|
57
|
-
...
|
|
55
|
+
ref: I,
|
|
56
|
+
hideDragHandleBar: O,
|
|
57
|
+
hideOverlay: A,
|
|
58
|
+
style: F,
|
|
59
|
+
...W
|
|
58
60
|
}) {
|
|
59
|
-
const [
|
|
60
|
-
|
|
61
|
-
const
|
|
61
|
+
const [h, L] = G(!1), l = o(null), x = o(null), i = o(null), d = o(!1), v = o(0), f = o(0), m = o(0), p = o(0), g = o(0), q = o(0.25);
|
|
62
|
+
J(I, () => l.current);
|
|
63
|
+
const P = (r) => {
|
|
62
64
|
r.stopPropagation(), typeof $ == "function" && $(r);
|
|
63
65
|
};
|
|
64
66
|
return S(() => {
|
|
65
67
|
let r;
|
|
66
68
|
return t ? r = requestAnimationFrame(() => {
|
|
67
|
-
|
|
68
|
-
}) :
|
|
69
|
+
L(!0);
|
|
70
|
+
}) : L(!1), () => {
|
|
69
71
|
r && cancelAnimationFrame(r);
|
|
70
72
|
};
|
|
71
73
|
}, [t]), S(() => {
|
|
72
|
-
const r = l.current, n =
|
|
73
|
-
r && (r.scrollTop > 0 || (d.current = !0, v.current = e, f.current = e, m.current = r.offsetHeight,
|
|
74
|
-
},
|
|
74
|
+
const r = l.current, n = x.current, k = (e) => {
|
|
75
|
+
r && (r.scrollTop > 0 || (d.current = !0, v.current = e, f.current = e, m.current = r.offsetHeight, g.current = Date.now(), r.style.transition = "none", r.style.cursor = "grabbing", n && (n.style.transition = "none"), i.current && (i.current.style.cursor = "grabbing")));
|
|
76
|
+
}, R = (e) => {
|
|
75
77
|
if (!r || !d.current) return;
|
|
76
78
|
const u = e - v.current;
|
|
77
79
|
if (u < 0) return;
|
|
78
80
|
f.current = e;
|
|
79
|
-
const D = Date.now(), M = D -
|
|
81
|
+
const D = Date.now(), M = D - g.current;
|
|
80
82
|
if (M > 0) {
|
|
81
|
-
const
|
|
82
|
-
|
|
83
|
+
const V = f.current;
|
|
84
|
+
p.current = (e - V) / M, g.current = D;
|
|
83
85
|
}
|
|
84
86
|
n && (n.style.opacity = `${Math.max(0, 1 - u / (m.current * 2))}`), r.style.transform = `translate3d(0, ${u}px, 0)`;
|
|
85
87
|
}, a = () => {
|
|
86
88
|
if (!r || !d.current) return;
|
|
87
89
|
d.current = !1, r.style.cursor = "default", i.current && (i.current.style.cursor = "grab");
|
|
88
|
-
const e = f.current - v.current, u = m.current *
|
|
89
|
-
r.style.transition = `transform ${s}ms ease-out`, n && (n.style.transition = `opacity ${s}ms ease-out`), e > u ||
|
|
90
|
-
}, w = (e) =>
|
|
90
|
+
const e = f.current - v.current, u = m.current * q.current;
|
|
91
|
+
r.style.transition = `transform ${s}ms ease-out`, n && (n.style.transition = `opacity ${s}ms ease-out`), e > u || p.current > 0.5 && p.current > 0 ? (r.style.transform = "translate3d(0, 200%, 0)", n && (n.style.opacity = "0"), c == null || c()) : (r.style.transform = "translate3d(0, 0, 0)", n && (n.style.opacity = "1"));
|
|
92
|
+
}, w = (e) => k(e.clientY), H = (e) => R(e.clientY), Y = (e) => k(e.touches[0].clientY), B = (e) => R(e.touches[0].clientY);
|
|
91
93
|
return r == null || r.addEventListener("mousedown", w), r == null || r.addEventListener("mousemove", H), r == null || r.addEventListener("mouseup", a), r == null || r.addEventListener("mouseleave", a), r == null || r.addEventListener("touchstart", Y), r == null || r.addEventListener("touchmove", B), r == null || r.addEventListener("touchend", a), r == null || r.addEventListener("touchcancel", a), () => {
|
|
92
94
|
r == null || r.removeEventListener("mousedown", w), r == null || r.removeEventListener("mousemove", H), r == null || r.removeEventListener("mouseup", a), r == null || r.removeEventListener("mouseleave", a), r == null || r.removeEventListener("touchstart", Y), r == null || r.removeEventListener("touchmove", B), r == null || r.removeEventListener("touchend", a), r == null || r.removeEventListener("touchcancel", a);
|
|
93
95
|
};
|
|
94
|
-
}, [
|
|
95
|
-
|
|
96
|
+
}, [h, c, s]), /* @__PURE__ */ y(
|
|
97
|
+
K,
|
|
96
98
|
{
|
|
97
|
-
ref:
|
|
99
|
+
ref: x,
|
|
98
100
|
open: t,
|
|
99
101
|
onClose: c,
|
|
100
102
|
transitionDuration: s,
|
|
101
103
|
placement: "center-bottom",
|
|
102
|
-
css:
|
|
104
|
+
css: A ? {
|
|
105
|
+
pointerEvents: "none",
|
|
103
106
|
backgroundColor: "transparent !important"
|
|
104
107
|
} : void 0,
|
|
105
|
-
children: /* @__PURE__ */
|
|
106
|
-
|
|
108
|
+
children: /* @__PURE__ */ z(
|
|
109
|
+
N,
|
|
107
110
|
{
|
|
108
111
|
ref: l,
|
|
109
112
|
ease: t ? "in" : "out",
|
|
110
113
|
transitionDuration: s,
|
|
111
|
-
|
|
112
|
-
|
|
114
|
+
maxWidth: j,
|
|
115
|
+
onClick: P,
|
|
116
|
+
...W,
|
|
113
117
|
style: {
|
|
114
|
-
transform: `translate3d(0, ${
|
|
115
|
-
...
|
|
118
|
+
transform: `translate3d(0, ${h ? "0" : "200%"}, 0)`,
|
|
119
|
+
...F
|
|
116
120
|
},
|
|
117
121
|
children: [
|
|
118
|
-
!
|
|
122
|
+
!O && /* @__PURE__ */ y(Q, { ref: i, children: /* @__PURE__ */ y(U, {}) }),
|
|
119
123
|
T
|
|
120
124
|
]
|
|
121
125
|
}
|
|
@@ -124,5 +128,5 @@ function C({
|
|
|
124
128
|
);
|
|
125
129
|
}
|
|
126
130
|
export {
|
|
127
|
-
|
|
131
|
+
E as default
|
|
128
132
|
};
|
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
import { ComponentPropsWithRef } from 'react';
|
|
2
|
-
|
|
2
|
+
import { UtilityProps } from '../../typings/utility';
|
|
3
|
+
export interface BottomSheetProps extends ComponentPropsWithRef<"div">, Pick<UtilityProps, "css"> {
|
|
3
4
|
open?: boolean;
|
|
4
5
|
onClose?: () => void;
|
|
5
6
|
transitionDuration?: number;
|
|
7
|
+
maxWidth?: string;
|
|
6
8
|
hideDragHandleBar?: boolean;
|
|
7
9
|
hideOverlay?: boolean;
|
|
8
10
|
}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { DialogProps } from './Dialog.typing';
|
|
2
|
-
declare function Dialog({ open, onClose, children, transitionDuration, onClick, style, ...props }: DialogProps): import("react").JSX.Element;
|
|
2
|
+
declare function Dialog({ open, onClose, children, transitionDuration, onClick, style, maxWidth, ...props }: DialogProps): import("react").JSX.Element;
|
|
3
3
|
export default Dialog;
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import { jsx as s } from "react/jsx-runtime";
|
|
2
|
-
import { useState as
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
const
|
|
2
|
+
import { useState as $, useRef as p, useEffect as h } from "react";
|
|
3
|
+
import g from "basic-styled";
|
|
4
|
+
import y from "../Overlay/Overlay.mjs";
|
|
5
|
+
const x = g.div`
|
|
6
6
|
width: calc(100% - ${({ theme: { spacing: e } }) => e[800]});
|
|
7
|
+
max-width: ${({ maxWidth: e = "375px" }) => e};
|
|
7
8
|
max-height: calc(100% - ${({ theme: { spacing: e } }) => e[800]});
|
|
8
9
|
overflow-y: auto;
|
|
9
10
|
margin: ${({ theme: { spacing: e } }) => e[400]};
|
|
@@ -28,12 +29,13 @@ function O({
|
|
|
28
29
|
transitionDuration: a = 200,
|
|
29
30
|
onClick: o,
|
|
30
31
|
style: l,
|
|
31
|
-
|
|
32
|
+
maxWidth: c = "375px",
|
|
33
|
+
...f
|
|
32
34
|
}) {
|
|
33
|
-
const [r, i] =
|
|
35
|
+
const [r, i] = $(!1), u = p(null), d = (t) => {
|
|
34
36
|
t.stopPropagation(), typeof o == "function" && o(t);
|
|
35
37
|
};
|
|
36
|
-
return
|
|
38
|
+
return h(() => {
|
|
37
39
|
let t;
|
|
38
40
|
return e ? t = requestAnimationFrame(() => {
|
|
39
41
|
i(!0);
|
|
@@ -41,20 +43,21 @@ function O({
|
|
|
41
43
|
t && cancelAnimationFrame(t);
|
|
42
44
|
};
|
|
43
45
|
}, [e]), /* @__PURE__ */ s(
|
|
44
|
-
|
|
46
|
+
y,
|
|
45
47
|
{
|
|
46
|
-
ref:
|
|
48
|
+
ref: u,
|
|
47
49
|
open: e,
|
|
48
50
|
onClose: n,
|
|
49
51
|
transitionDuration: a,
|
|
50
52
|
placement: "center-middle",
|
|
51
53
|
children: /* @__PURE__ */ s(
|
|
52
|
-
|
|
54
|
+
x,
|
|
53
55
|
{
|
|
54
56
|
ease: e ? "in" : "out",
|
|
55
57
|
transitionDuration: a,
|
|
56
|
-
|
|
57
|
-
|
|
58
|
+
maxWidth: c,
|
|
59
|
+
onClick: d,
|
|
60
|
+
...f,
|
|
58
61
|
style: {
|
|
59
62
|
transform: `scale(${r ? 1 : 0.9})`,
|
|
60
63
|
opacity: r ? 1 : 0,
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import { ComponentPropsWithRef } from 'react';
|
|
2
|
-
|
|
2
|
+
import { UtilityProps } from '../../typings/utility';
|
|
3
|
+
export interface DialogProps extends ComponentPropsWithRef<"div">, Pick<UtilityProps, "css"> {
|
|
3
4
|
open?: boolean;
|
|
4
5
|
onClose?: () => void;
|
|
5
6
|
transitionDuration?: number;
|
|
7
|
+
maxWidth?: string;
|
|
6
8
|
}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { OverlayProps } from './Overlay.typing';
|
|
2
|
-
declare function Overlay({ children, open, onClose, transitionDuration, placement, style, ref, ...props }: OverlayProps): import('react').ReactPortal | null;
|
|
2
|
+
declare function Overlay({ children, open, onClose, transitionDuration, placement, style, ref, onClick, ...props }: OverlayProps): import('react').ReactPortal | null;
|
|
3
3
|
export default Overlay;
|
|
@@ -1,15 +1,12 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { useState as
|
|
3
|
-
import { createPortal as
|
|
1
|
+
import { jsxs as v, jsx as l } from "react/jsx-runtime";
|
|
2
|
+
import { useState as m, useRef as k, useImperativeHandle as x, useLayoutEffect as $, useEffect as I } from "react";
|
|
3
|
+
import { createPortal as w } from "react-dom";
|
|
4
4
|
import i from "basic-styled";
|
|
5
|
-
const
|
|
5
|
+
const L = i.div`
|
|
6
6
|
position: fixed;
|
|
7
7
|
top: 0;
|
|
8
8
|
left: 0;
|
|
9
|
-
|
|
10
|
-
height: 100%;
|
|
11
|
-
z-index: 1;
|
|
12
|
-
`, $ = i.div`
|
|
9
|
+
`, z = i.div`
|
|
13
10
|
position: fixed;
|
|
14
11
|
top: 0;
|
|
15
12
|
left: 0;
|
|
@@ -17,135 +14,137 @@ const v = i.div`
|
|
|
17
14
|
height: 100%;
|
|
18
15
|
background-color: ${({
|
|
19
16
|
theme: {
|
|
20
|
-
palette: { common:
|
|
17
|
+
palette: { common: r }
|
|
21
18
|
}
|
|
22
|
-
}) =>
|
|
19
|
+
}) => r.overlay};
|
|
23
20
|
transition:
|
|
24
|
-
opacity ${({ transitionDuration:
|
|
25
|
-
${({ ease:
|
|
21
|
+
opacity ${({ transitionDuration: r }) => `${r}ms`}
|
|
22
|
+
${({ ease: r }) => r === "in" ? "ease-in" : "ease-out"},
|
|
26
23
|
background-color 0.2s;
|
|
27
|
-
|
|
24
|
+
z-index: 1;
|
|
25
|
+
`, A = i.div`
|
|
28
26
|
position: fixed;
|
|
29
|
-
top: 0;
|
|
30
|
-
left: 0;
|
|
31
27
|
width: 100%;
|
|
32
|
-
|
|
28
|
+
display: flex;
|
|
29
|
+
justify-content: center;
|
|
30
|
+
align-items: center;
|
|
31
|
+
z-index: 1;
|
|
33
32
|
|
|
34
|
-
${({ placement:
|
|
35
|
-
const
|
|
36
|
-
switch (
|
|
33
|
+
${({ placement: r }) => {
|
|
34
|
+
const t = {};
|
|
35
|
+
switch (r) {
|
|
37
36
|
case "top-left":
|
|
38
|
-
Object.assign(
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
alignItems: "flex-start"
|
|
37
|
+
Object.assign(t, {
|
|
38
|
+
top: 0,
|
|
39
|
+
left: 0
|
|
42
40
|
});
|
|
43
41
|
break;
|
|
44
42
|
case "top-right":
|
|
45
|
-
Object.assign(
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
alignItems: "flex-start"
|
|
43
|
+
Object.assign(t, {
|
|
44
|
+
top: 0,
|
|
45
|
+
right: 0
|
|
49
46
|
});
|
|
50
47
|
break;
|
|
51
48
|
case "bottom-left":
|
|
52
|
-
Object.assign(
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
alignItems: "flex-end"
|
|
49
|
+
Object.assign(t, {
|
|
50
|
+
bottom: 0,
|
|
51
|
+
left: 0
|
|
56
52
|
});
|
|
57
53
|
break;
|
|
58
54
|
case "bottom-right":
|
|
59
|
-
Object.assign(
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
alignItems: "flex-end"
|
|
55
|
+
Object.assign(t, {
|
|
56
|
+
bottom: 0,
|
|
57
|
+
right: 0
|
|
63
58
|
});
|
|
64
59
|
break;
|
|
65
60
|
case "center-top":
|
|
66
|
-
Object.assign(
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
61
|
+
Object.assign(t, {
|
|
62
|
+
top: 0,
|
|
63
|
+
left: "50%",
|
|
64
|
+
transform: "translate3d(-50%, 0, 0)"
|
|
70
65
|
});
|
|
71
66
|
break;
|
|
72
67
|
case "center-bottom":
|
|
73
|
-
Object.assign(
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
68
|
+
Object.assign(t, {
|
|
69
|
+
bottom: 0,
|
|
70
|
+
left: "50%",
|
|
71
|
+
transform: "translate3d(-50%, 0, 0)"
|
|
77
72
|
});
|
|
78
73
|
break;
|
|
79
74
|
case "center-middle":
|
|
80
|
-
Object.assign(
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
75
|
+
Object.assign(t, {
|
|
76
|
+
top: "50%",
|
|
77
|
+
left: "50%",
|
|
78
|
+
transform: "translate3d(-50%, -50%, 0)"
|
|
84
79
|
});
|
|
85
80
|
break;
|
|
86
81
|
case "center-left":
|
|
87
|
-
Object.assign(
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
82
|
+
Object.assign(t, {
|
|
83
|
+
top: "50%",
|
|
84
|
+
left: 0,
|
|
85
|
+
transform: "translate3d(0, -50%, 0)"
|
|
91
86
|
});
|
|
92
87
|
break;
|
|
93
88
|
case "center-right":
|
|
94
|
-
Object.assign(
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
89
|
+
Object.assign(t, {
|
|
90
|
+
top: "50%",
|
|
91
|
+
right: 0,
|
|
92
|
+
transform: "translate3d(0, -50%, 0)"
|
|
98
93
|
});
|
|
99
94
|
break;
|
|
100
95
|
}
|
|
101
|
-
return
|
|
96
|
+
return t;
|
|
102
97
|
}}
|
|
103
98
|
`;
|
|
104
|
-
function
|
|
105
|
-
children:
|
|
106
|
-
open:
|
|
107
|
-
onClose:
|
|
108
|
-
transitionDuration:
|
|
99
|
+
function U({
|
|
100
|
+
children: r,
|
|
101
|
+
open: t,
|
|
102
|
+
onClose: s,
|
|
103
|
+
transitionDuration: o = 200,
|
|
109
104
|
placement: u,
|
|
110
|
-
style:
|
|
111
|
-
ref:
|
|
112
|
-
|
|
105
|
+
style: b,
|
|
106
|
+
ref: p,
|
|
107
|
+
onClick: a,
|
|
108
|
+
...g
|
|
113
109
|
}) {
|
|
114
|
-
const [
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
110
|
+
const [h, c] = m(!0), [y, f] = m(!1), n = k(null), O = (e) => {
|
|
111
|
+
s == null || s(), a == null || a(e);
|
|
112
|
+
};
|
|
113
|
+
return x(p, () => n.current), $(() => {
|
|
114
|
+
let e;
|
|
115
|
+
return t ? (c(!1), e = requestAnimationFrame(() => {
|
|
116
|
+
f(!0);
|
|
117
|
+
})) : f(!1), () => {
|
|
118
|
+
e && cancelAnimationFrame(e);
|
|
121
119
|
};
|
|
122
|
-
}, [
|
|
123
|
-
const
|
|
124
|
-
|
|
120
|
+
}, [t, o]), I(() => {
|
|
121
|
+
const e = n.current, d = (j) => {
|
|
122
|
+
t || j.propertyName === "opacity" && c(!0);
|
|
125
123
|
};
|
|
126
|
-
return
|
|
127
|
-
|
|
124
|
+
return e == null || e.addEventListener("transitionend", d), () => {
|
|
125
|
+
e == null || e.removeEventListener("transitionend", d);
|
|
128
126
|
};
|
|
129
|
-
}, [
|
|
130
|
-
/* @__PURE__ */
|
|
131
|
-
/* @__PURE__ */
|
|
132
|
-
|
|
127
|
+
}, [t]), h ? null : w(
|
|
128
|
+
/* @__PURE__ */ v(L, { children: [
|
|
129
|
+
/* @__PURE__ */ l(
|
|
130
|
+
z,
|
|
133
131
|
{
|
|
134
|
-
ref:
|
|
135
|
-
transitionDuration:
|
|
136
|
-
ease:
|
|
132
|
+
ref: n,
|
|
133
|
+
transitionDuration: o,
|
|
134
|
+
ease: t ? "in" : "out",
|
|
135
|
+
onClick: O,
|
|
137
136
|
style: {
|
|
138
|
-
opacity:
|
|
139
|
-
...
|
|
137
|
+
opacity: y ? 1 : 0,
|
|
138
|
+
...b
|
|
140
139
|
},
|
|
141
|
-
...
|
|
140
|
+
...g
|
|
142
141
|
}
|
|
143
142
|
),
|
|
144
|
-
/* @__PURE__ */
|
|
143
|
+
/* @__PURE__ */ l(A, { placement: u, children: r })
|
|
145
144
|
] }),
|
|
146
145
|
document.body
|
|
147
146
|
);
|
|
148
147
|
}
|
|
149
148
|
export {
|
|
150
|
-
|
|
149
|
+
U as default
|
|
151
150
|
};
|
|
@@ -5,4 +5,5 @@ export interface OverlayProps extends ComponentPropsWithRef<"div">, Pick<Utility
|
|
|
5
5
|
onClose?: () => void;
|
|
6
6
|
transitionDuration?: number;
|
|
7
7
|
placement?: "top-left" | "top-right" | "bottom-left" | "bottom-right" | "center-top" | "center-bottom" | "center-middle" | "center-left" | "center-right";
|
|
8
|
+
hideOverlay?: boolean;
|
|
8
9
|
}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { SnackbarProps } from './Snackbar.typing';
|
|
2
|
-
declare function Snackbar({ children, open, onClose, transitionDuration, style, ref, startIcon, action, autoHideDuration, disableAutoHide, ...props }: SnackbarProps): import('react').ReactPortal | null;
|
|
2
|
+
declare function Snackbar({ children, open, onClose, transitionDuration, style, ref, startIcon, action, maxWidth, autoHideDuration, disableAutoHide, ...props }: SnackbarProps): import('react').ReactPortal | null;
|
|
3
3
|
export default Snackbar;
|
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { useState as
|
|
3
|
-
import { createPortal as
|
|
1
|
+
import { jsxs as A, jsx as c } from "react/jsx-runtime";
|
|
2
|
+
import { useState as $, useRef as y, useImperativeHandle as I, useLayoutEffect as L, useEffect as v } from "react";
|
|
3
|
+
import { createPortal as R } from "react-dom";
|
|
4
4
|
import a from "basic-styled";
|
|
5
|
-
const
|
|
5
|
+
const T = a.div`
|
|
6
6
|
position: fixed;
|
|
7
7
|
bottom: ${({ theme: { spacing: e } }) => `calc(${e[800]} + var(--safe-area-inset-bottom, 0px))`};
|
|
8
8
|
left: 50%;
|
|
9
9
|
display: flex;
|
|
10
10
|
align-items: center;
|
|
11
11
|
gap: ${({ theme: { spacing: e } }) => e[400]};
|
|
12
|
-
width: 100
|
|
13
|
-
max-width:
|
|
12
|
+
width: calc(100% - ${({ theme: { spacing: e } }) => e[800]});
|
|
13
|
+
max-width: ${({ maxWidth: e = "375px" }) => e};
|
|
14
14
|
min-height: 56px;
|
|
15
15
|
padding: ${({ theme: { spacing: e } }) => e[400]};
|
|
16
16
|
background-color: ${({
|
|
@@ -26,9 +26,9 @@ const R = a.div`
|
|
|
26
26
|
${({ ease: e }) => e === "in" ? "ease-in" : "ease-out"},
|
|
27
27
|
transform ${({ transitionDuration: e }) => `${e}ms`},
|
|
28
28
|
background-color 0.2s;
|
|
29
|
-
`, T = a.div`
|
|
30
|
-
white-space: nowrap;
|
|
31
29
|
`, j = a.div`
|
|
30
|
+
white-space: nowrap;
|
|
31
|
+
`, E = a.div`
|
|
32
32
|
flex-grow: 1;
|
|
33
33
|
display: -webkit-box;
|
|
34
34
|
overflow: hidden;
|
|
@@ -45,10 +45,10 @@ const R = a.div`
|
|
|
45
45
|
lineHeight: r.lineHeight,
|
|
46
46
|
color: e.surface
|
|
47
47
|
})}
|
|
48
|
-
`,
|
|
48
|
+
`, F = a.div`
|
|
49
49
|
white-space: nowrap;
|
|
50
50
|
`;
|
|
51
|
-
function
|
|
51
|
+
function N({
|
|
52
52
|
children: e,
|
|
53
53
|
open: r,
|
|
54
54
|
onClose: n,
|
|
@@ -57,12 +57,13 @@ function H({
|
|
|
57
57
|
ref: g,
|
|
58
58
|
startIcon: f,
|
|
59
59
|
action: m,
|
|
60
|
+
maxWidth: b = "375px",
|
|
60
61
|
autoHideDuration: d = 3e3,
|
|
61
62
|
disableAutoHide: u,
|
|
62
|
-
...
|
|
63
|
+
...S
|
|
63
64
|
}) {
|
|
64
|
-
const [
|
|
65
|
-
return
|
|
65
|
+
const [k, p] = $(!0), [i, h] = $(!1), s = y(null), o = y(null);
|
|
66
|
+
return I(g, () => s.current), L(() => {
|
|
66
67
|
let t;
|
|
67
68
|
return r ? (p(!1), t = requestAnimationFrame(() => {
|
|
68
69
|
h(!0);
|
|
@@ -70,11 +71,11 @@ function H({
|
|
|
70
71
|
t && cancelAnimationFrame(t);
|
|
71
72
|
};
|
|
72
73
|
}, [r, l]), v(() => {
|
|
73
|
-
const t = s.current,
|
|
74
|
-
r ||
|
|
74
|
+
const t = s.current, x = (z) => {
|
|
75
|
+
r || z.propertyName === "opacity" && p(!0);
|
|
75
76
|
};
|
|
76
|
-
return t == null || t.addEventListener("transitionend",
|
|
77
|
-
t == null || t.removeEventListener("transitionend",
|
|
77
|
+
return t == null || t.addEventListener("transitionend", x), () => {
|
|
78
|
+
t == null || t.removeEventListener("transitionend", x);
|
|
78
79
|
};
|
|
79
80
|
}, [r]), v(() => {
|
|
80
81
|
if (!(u || !i))
|
|
@@ -83,23 +84,24 @@ function H({
|
|
|
83
84
|
}, d), () => {
|
|
84
85
|
o.current && clearTimeout(o.current);
|
|
85
86
|
};
|
|
86
|
-
}, [u, d, i, n]),
|
|
87
|
-
/* @__PURE__ */
|
|
88
|
-
|
|
87
|
+
}, [u, d, i, n]), k ? null : R(
|
|
88
|
+
/* @__PURE__ */ A(
|
|
89
|
+
T,
|
|
89
90
|
{
|
|
90
91
|
ref: s,
|
|
91
92
|
transitionDuration: l,
|
|
92
93
|
ease: r ? "in" : "out",
|
|
94
|
+
maxWidth: b,
|
|
93
95
|
style: {
|
|
94
96
|
opacity: i ? 1 : 0,
|
|
95
97
|
transform: i ? "translate3d(-50%, 0, 0) scale(1)" : "translate3d(-50%, 0, 0) scale(0.97)",
|
|
96
98
|
...w
|
|
97
99
|
},
|
|
98
|
-
...
|
|
100
|
+
...S,
|
|
99
101
|
children: [
|
|
100
|
-
f && /* @__PURE__ */ c(
|
|
101
|
-
/* @__PURE__ */ c(
|
|
102
|
-
m && /* @__PURE__ */ c(
|
|
102
|
+
f && /* @__PURE__ */ c(j, { children: f }),
|
|
103
|
+
/* @__PURE__ */ c(E, { children: e }),
|
|
104
|
+
m && /* @__PURE__ */ c(F, { children: m })
|
|
103
105
|
]
|
|
104
106
|
}
|
|
105
107
|
),
|
|
@@ -107,5 +109,5 @@ function H({
|
|
|
107
109
|
);
|
|
108
110
|
}
|
|
109
111
|
export {
|
|
110
|
-
|
|
112
|
+
N as default
|
|
111
113
|
};
|