@situaction/traq-ui-ste 1.1.13 → 1.1.14
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,54 +1,61 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { useRef as
|
|
3
|
-
import '../../styles/ButtonControlledScroll.css';const
|
|
4
|
-
wrapper:
|
|
5
|
-
container:
|
|
6
|
-
btn:
|
|
7
|
-
grab:
|
|
8
|
-
grabbing:
|
|
9
|
-
btnLeft:
|
|
10
|
-
btnRight:
|
|
11
|
-
},
|
|
12
|
-
const
|
|
13
|
-
if (
|
|
1
|
+
import { jsxs as N, jsx as l } from "react/jsx-runtime";
|
|
2
|
+
import { useRef as a, useState as p, useEffect as D } from "react";
|
|
3
|
+
import '../../styles/ButtonControlledScroll.css';const k = "_wrapper_q8o27_6", E = "_container_q8o27_18", T = "_btn_q8o27_28", U = "_grab_q8o27_45", X = "_grabbing_q8o27_49", j = "_btnLeft_q8o27_55", y = "_btnRight_q8o27_60", n = {
|
|
4
|
+
wrapper: k,
|
|
5
|
+
container: E,
|
|
6
|
+
btn: T,
|
|
7
|
+
grab: U,
|
|
8
|
+
grabbing: X,
|
|
9
|
+
btnLeft: j,
|
|
10
|
+
btnRight: y
|
|
11
|
+
}, W = ({ items: i, iconLeft: L, iconRight: b, scrollAmount: m = 150, grabSpeed: v = 1.5, grabbable: o = !0 }) => {
|
|
12
|
+
const u = m, r = a(null), [M, S] = p(!1), [R, q] = p(!1), s = a(!1), f = a(0), d = a(0), w = (t) => {
|
|
13
|
+
if (o) {
|
|
14
14
|
const e = r.current;
|
|
15
15
|
if (!e) return;
|
|
16
|
-
|
|
16
|
+
s.current = !0, f.current = t.pageX - e.offsetLeft, d.current = e.scrollLeft, e.classList.add(n.grabbing);
|
|
17
17
|
}
|
|
18
|
-
},
|
|
19
|
-
if (
|
|
18
|
+
}, x = (t) => {
|
|
19
|
+
if (o) {
|
|
20
20
|
const e = r.current;
|
|
21
|
-
if (!e || !
|
|
21
|
+
if (!e || !s.current) return;
|
|
22
22
|
t.preventDefault();
|
|
23
|
-
const
|
|
24
|
-
e.scrollLeft =
|
|
23
|
+
const C = (t.pageX - e.offsetLeft - f.current) * v;
|
|
24
|
+
e.scrollLeft = d.current + C;
|
|
25
25
|
}
|
|
26
|
-
},
|
|
27
|
-
if (
|
|
26
|
+
}, g = () => {
|
|
27
|
+
if (o) {
|
|
28
28
|
const t = r.current;
|
|
29
|
-
|
|
29
|
+
s.current = !1, t == null || t.classList.remove(n.grabbing);
|
|
30
30
|
}
|
|
31
|
-
},
|
|
32
|
-
|
|
33
|
-
},
|
|
31
|
+
}, $ = () => {
|
|
32
|
+
s.current && o && g();
|
|
33
|
+
}, _ = () => {
|
|
34
34
|
const t = r.current;
|
|
35
|
-
t && (S(t.scrollLeft > 0),
|
|
36
|
-
},
|
|
35
|
+
t && (S(t.scrollLeft > 0), q(t.scrollLeft + t.clientWidth < t.scrollWidth));
|
|
36
|
+
}, h = (t) => {
|
|
37
37
|
const e = r.current;
|
|
38
38
|
if (!e) return;
|
|
39
|
-
const
|
|
40
|
-
e.scrollBy({ left:
|
|
39
|
+
const c = t === "left" ? -u : u;
|
|
40
|
+
e.scrollBy({ left: c, behavior: "smooth" });
|
|
41
41
|
};
|
|
42
|
-
return
|
|
42
|
+
return D(() => {
|
|
43
43
|
const t = r.current;
|
|
44
|
-
if (t)
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
44
|
+
if (!t) return;
|
|
45
|
+
const e = () => _();
|
|
46
|
+
t.addEventListener("scroll", e);
|
|
47
|
+
const c = setTimeout(() => {
|
|
48
|
+
_();
|
|
49
|
+
}, 0);
|
|
50
|
+
return () => {
|
|
51
|
+
clearTimeout(c), t.removeEventListener("scroll", e);
|
|
52
|
+
};
|
|
53
|
+
}, [i]), /* @__PURE__ */ N("div", { className: `${n.wrapper}`, children: [
|
|
54
|
+
M && /* @__PURE__ */ l("button", { className: `${n.btn} ${n.btnLeft} padding-xs-5`, onClick: () => h("left"), children: L }),
|
|
55
|
+
/* @__PURE__ */ l("div", { onMouseDown: w, onMouseLeave: $, onMouseMove: x, onMouseUp: g, className: `${n.container} ${o && n.grab}`, 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: () => h("right"), children: b })
|
|
50
57
|
] });
|
|
51
58
|
};
|
|
52
59
|
export {
|
|
53
|
-
|
|
60
|
+
W as ButtonControlledScroll
|
|
54
61
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._wrapper_q8o27_6{position:relative;display:flex;align-items:center;width:300px;padding:10px;box-sizing:border-box;-webkit-user-select:none;user-select:none}._wrapper_q8o27_6 label{-webkit-user-select:none;user-select:none}._wrapper_q8o27_6 ._container_q8o27_18{display:flex;overflow-x:auto;gap:10px;width:100%;scroll-behavior:smooth}._wrapper_q8o27_6 ._container_q8o27_18::-webkit-scrollbar{display:none}._wrapper_q8o27_6 ._btn_q8o27_28{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_q8o27_6 ._btn_q8o27_28 *{z-index:2}._wrapper_q8o27_6 ._grab_q8o27_45{cursor:grab;scroll-behavior:initial}._wrapper_q8o27_6 ._grabbing_q8o27_49{cursor:grabbing}._wrapper_q8o27_6 ._btn_q8o27_28:hover{background-color:var(--background-tooltip)}._wrapper_q8o27_6 ._btnLeft_q8o27_55{left:0;top:50%;transform:translateY(-50%)}._wrapper_q8o27_6 ._btnRight_q8o27_60{right:0;top:50%;transform:translateY(-50%)}
|