@situaction/traq-ui-ste 1.1.20 → 1.1.21
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,26 +1,26 @@
|
|
|
1
1
|
import { jsxs as D, jsx as l } from "react/jsx-runtime";
|
|
2
2
|
import { useRef as a, useState as h, useEffect as k } from "react";
|
|
3
|
-
import '../../styles/ButtonControlledScroll.css';const
|
|
4
|
-
wrapper:
|
|
5
|
-
container:
|
|
6
|
-
btn:
|
|
7
|
-
grab:
|
|
8
|
-
grabbing:
|
|
9
|
-
btnLeft:
|
|
10
|
-
btnRight:
|
|
11
|
-
},
|
|
12
|
-
const
|
|
3
|
+
import '../../styles/ButtonControlledScroll.css';const y = "_wrapper_lqv42_6", E = "_container_lqv42_18", T = "_btn_lqv42_27", U = "_grab_lqv42_47", X = "_grabbing_lqv42_51", j = "_btnLeft_lqv42_57", B = "_btnRight_lqv42_62", n = {
|
|
4
|
+
wrapper: y,
|
|
5
|
+
container: E,
|
|
6
|
+
btn: T,
|
|
7
|
+
grab: U,
|
|
8
|
+
grabbing: X,
|
|
9
|
+
btnLeft: j,
|
|
10
|
+
btnRight: B
|
|
11
|
+
}, A = ({ gap: v = 10, items: i, iconLeft: L, iconRight: b, scrollAmount: m = 150, grabSpeed: M = 1.5, grabbable: o = !0 }) => {
|
|
12
|
+
const u = m, r = a(null), [S, R] = h(!1), [x, $] = h(!1), s = a(!1), f = a(0), d = a(0), q = (t) => {
|
|
13
13
|
if (o) {
|
|
14
14
|
const e = r.current;
|
|
15
15
|
if (!e) return;
|
|
16
|
-
s.current = !0,
|
|
16
|
+
s.current = !0, f.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 N = (t.pageX - e.offsetLeft -
|
|
23
|
+
const N = (t.pageX - e.offsetLeft - f.current) * M;
|
|
24
24
|
e.scrollLeft = d.current + N;
|
|
25
25
|
}
|
|
26
26
|
}, g = () => {
|
|
@@ -32,11 +32,11 @@ import '../../styles/ButtonControlledScroll.css';const E = "_wrapper_1favy_6", T
|
|
|
32
32
|
s.current && o && g();
|
|
33
33
|
}, p = () => {
|
|
34
34
|
const t = r.current;
|
|
35
|
-
t && (
|
|
35
|
+
t && (R(t.scrollLeft > 0), $(t.scrollLeft + t.clientWidth < t.scrollWidth));
|
|
36
36
|
}, _ = (t) => {
|
|
37
37
|
const e = r.current;
|
|
38
38
|
if (!e) return;
|
|
39
|
-
const c = t === "left" ? -
|
|
39
|
+
const c = t === "left" ? -u : u;
|
|
40
40
|
e.scrollBy({ left: c, behavior: "smooth" });
|
|
41
41
|
};
|
|
42
42
|
return k(() => {
|
|
@@ -52,10 +52,10 @@ import '../../styles/ButtonControlledScroll.css';const E = "_wrapper_1favy_6", T
|
|
|
52
52
|
};
|
|
53
53
|
}, [i]), /* @__PURE__ */ D("div", { className: `${n.wrapper}`, children: [
|
|
54
54
|
S && /* @__PURE__ */ l("button", { className: `${n.btn} ${n.btnLeft} padding-xs-5`, onClick: () => _("left"), children: L }),
|
|
55
|
-
/* @__PURE__ */ l("div", { onMouseDown:
|
|
56
|
-
|
|
55
|
+
/* @__PURE__ */ l("div", { onMouseDown: q, 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
|
+
x && /* @__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_lqv42_6{position:relative;display:flex;align-items:center;width:100%;padding:10px;box-sizing:border-box;-webkit-user-select:none;user-select:none}._wrapper_lqv42_6 label{-webkit-user-select:none;user-select:none}._wrapper_lqv42_6 ._container_lqv42_18{display:flex;overflow-x:auto;width:100%;scroll-behavior:smooth}._wrapper_lqv42_6 ._container_lqv42_18::-webkit-scrollbar{display:none}._wrapper_lqv42_6 ._btn_lqv42_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_lqv42_6 ._btn_lqv42_27 *{fill:var(--button-secondary-default-text)}._wrapper_lqv42_6 ._btn_lqv42_27 *{z-index:2}._wrapper_lqv42_6 ._grab_lqv42_47{cursor:grab;scroll-behavior:initial}._wrapper_lqv42_6 ._grabbing_lqv42_51{cursor:grabbing}._wrapper_lqv42_6 ._btn_lqv42_27:hover{background-color:var(--background-tooltip)}._wrapper_lqv42_6 ._btnLeft_lqv42_57{left:0;top:50%;transform:translateY(-50%)}._wrapper_lqv42_6 ._btnRight_lqv42_62{right:0;top:50%;transform:translateY(-50%)}
|