@situaction/traq-ui-ste 1.1.14 → 1.1.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,61 +1,61 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { useRef as a, useState as
|
|
3
|
-
import '../../styles/ButtonControlledScroll.css';const
|
|
4
|
-
wrapper:
|
|
5
|
-
container:
|
|
6
|
-
btn:
|
|
7
|
-
grab:
|
|
8
|
-
grabbing:
|
|
9
|
-
btnLeft:
|
|
10
|
-
btnRight:
|
|
11
|
-
},
|
|
12
|
-
const
|
|
1
|
+
import { jsxs as D, jsx as l } from "react/jsx-runtime";
|
|
2
|
+
import { useRef as a, useState as h, useEffect as k } from "react";
|
|
3
|
+
import '../../styles/ButtonControlledScroll.css';const E = "_wrapper_1favy_6", T = "_container_1favy_18", U = "_btn_1favy_27", X = "_grab_1favy_44", j = "_grabbing_1favy_48", B = "_btnLeft_1favy_54", O = "_btnRight_1favy_59", n = {
|
|
4
|
+
wrapper: E,
|
|
5
|
+
container: T,
|
|
6
|
+
btn: U,
|
|
7
|
+
grab: X,
|
|
8
|
+
grabbing: j,
|
|
9
|
+
btnLeft: B,
|
|
10
|
+
btnRight: O
|
|
11
|
+
}, q = ({ gap: v = 10, items: i, iconLeft: L, iconRight: b, scrollAmount: m = 150, grabSpeed: M = 1.5, grabbable: o = !0 }) => {
|
|
12
|
+
const f = m, r = a(null), [S, y] = h(!1), [R, x] = h(!1), s = a(!1), u = a(0), d = a(0), $ = (t) => {
|
|
13
13
|
if (o) {
|
|
14
14
|
const e = r.current;
|
|
15
15
|
if (!e) return;
|
|
16
|
-
s.current = !0,
|
|
16
|
+
s.current = !0, u.current = t.pageX - e.offsetLeft, d.current = e.scrollLeft, e.classList.add(n.grabbing);
|
|
17
17
|
}
|
|
18
|
-
},
|
|
18
|
+
}, w = (t) => {
|
|
19
19
|
if (o) {
|
|
20
20
|
const e = r.current;
|
|
21
21
|
if (!e || !s.current) return;
|
|
22
22
|
t.preventDefault();
|
|
23
|
-
const
|
|
24
|
-
e.scrollLeft = d.current +
|
|
23
|
+
const N = (t.pageX - e.offsetLeft - u.current) * M;
|
|
24
|
+
e.scrollLeft = d.current + N;
|
|
25
25
|
}
|
|
26
26
|
}, g = () => {
|
|
27
27
|
if (o) {
|
|
28
28
|
const t = r.current;
|
|
29
29
|
s.current = !1, t == null || t.classList.remove(n.grabbing);
|
|
30
30
|
}
|
|
31
|
-
},
|
|
31
|
+
}, C = () => {
|
|
32
32
|
s.current && o && g();
|
|
33
|
-
},
|
|
33
|
+
}, p = () => {
|
|
34
34
|
const t = r.current;
|
|
35
|
-
t && (
|
|
36
|
-
},
|
|
35
|
+
t && (y(t.scrollLeft > 0), x(t.scrollLeft + t.clientWidth < t.scrollWidth));
|
|
36
|
+
}, _ = (t) => {
|
|
37
37
|
const e = r.current;
|
|
38
38
|
if (!e) return;
|
|
39
|
-
const c = t === "left" ? -
|
|
39
|
+
const c = t === "left" ? -f : f;
|
|
40
40
|
e.scrollBy({ left: c, behavior: "smooth" });
|
|
41
41
|
};
|
|
42
|
-
return
|
|
42
|
+
return k(() => {
|
|
43
43
|
const t = r.current;
|
|
44
44
|
if (!t) return;
|
|
45
|
-
const e = () =>
|
|
45
|
+
const e = () => p();
|
|
46
46
|
t.addEventListener("scroll", e);
|
|
47
47
|
const c = setTimeout(() => {
|
|
48
|
-
|
|
48
|
+
p();
|
|
49
49
|
}, 0);
|
|
50
50
|
return () => {
|
|
51
51
|
clearTimeout(c), t.removeEventListener("scroll", e);
|
|
52
52
|
};
|
|
53
|
-
}, [i]), /* @__PURE__ */
|
|
54
|
-
|
|
55
|
-
/* @__PURE__ */ l("div", { onMouseDown:
|
|
56
|
-
R && /* @__PURE__ */ l("button", { className: `${n.btn} ${n.btnRight} padding-xs-5`, onClick: () =>
|
|
53
|
+
}, [i]), /* @__PURE__ */ D("div", { className: `${n.wrapper}`, children: [
|
|
54
|
+
S && /* @__PURE__ */ l("button", { className: `${n.btn} ${n.btnLeft} padding-xs-5`, onClick: () => _("left"), children: L }),
|
|
55
|
+
/* @__PURE__ */ l("div", { onMouseDown: $, onMouseLeave: C, onMouseMove: w, onMouseUp: g, className: `${n.container} ${o && n.grab}`, style: { gap: `${v}px` }, ref: r, children: i.map((t, e) => /* @__PURE__ */ l("div", { className: n.item, children: t }, e)) }),
|
|
56
|
+
R && /* @__PURE__ */ l("button", { className: `${n.btn} ${n.btnRight} padding-xs-5`, onClick: () => _("right"), children: b })
|
|
57
57
|
] });
|
|
58
58
|
};
|
|
59
59
|
export {
|
|
60
|
-
|
|
60
|
+
q as ButtonControlledScroll
|
|
61
61
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._wrapper_1favy_6{position:relative;display:flex;align-items:center;width:100%;padding:10px;box-sizing:border-box;-webkit-user-select:none;user-select:none}._wrapper_1favy_6 label{-webkit-user-select:none;user-select:none}._wrapper_1favy_6 ._container_1favy_18{display:flex;overflow-x:auto;width:100%;scroll-behavior:smooth}._wrapper_1favy_6 ._container_1favy_18::-webkit-scrollbar{display:none}._wrapper_1favy_6 ._btn_1favy_27{transition:.3s;display:flex;justify-content:center;align-items:center;width:30px;height:30px;padding:.375rem;border-radius:50%;border:1px solid var(--button-tertiary-default-border);background-color:var(--background-primary);position:absolute;cursor:pointer}._wrapper_1favy_6 ._btn_1favy_27 *{z-index:2}._wrapper_1favy_6 ._grab_1favy_44{cursor:grab;scroll-behavior:initial}._wrapper_1favy_6 ._grabbing_1favy_48{cursor:grabbing}._wrapper_1favy_6 ._btn_1favy_27:hover{background-color:var(--background-tooltip)}._wrapper_1favy_6 ._btnLeft_1favy_54{left:0;top:50%;transform:translateY(-50%)}._wrapper_1favy_6 ._btnRight_1favy_59{right:0;top:50%;transform:translateY(-50%)}
|