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