@situaction/traq-ui-ste 1.1.11 → 1.1.12

package/dist/components/buttonControledScroll/ButtonControlledScroll.d.ts

@@ -4,5 +4,8 @@ export interface ButtonControlledScrollProps {
     items: React.ReactNode[];
     iconLeft: ReactNode;
     iconRight: ReactNode;
+    grabSpeed?: number;
+    scrollAmount?: number;
+    grabbable?: boolean;
 }
 export declare const ButtonControlledScroll: FC<ButtonControlledScrollProps>;

package/dist/components/buttonControledScroll/ButtonControlledScroll.js

@@ -1,31 +1,54 @@
-import { jsxs as d, jsx as l } from "react/jsx-runtime";
-import { useRef as m, useState as s, useEffect as p } from "react";
-import '../../styles/ButtonControlledScroll.css';const R = "_wrapper_wftna_1", S = "_container_wftna_11", w = "_btn_wftna_22", C = "_btnLeft_wftna_39", N = "_btnRight_wftna_44", n = {
-  wrapper: R,
-  container: S,
-  btn: w,
-  btnLeft: C,
-  btnRight: N
-}, $ = ({ items: a, iconLeft: i, iconRight: f }) => {
-  const e = m(null), [_, b] = s(!1), [h, u] = s(!1), c = () => {
-    const t = e.current;
-    t && (b(t.scrollLeft > 0), u(t.scrollLeft + t.clientWidth < t.scrollWidth));
-  }, o = (t) => {
-    const r = e.current;
-    if (!r) return;
-    const L = t === "left" ? -100 : 100;
-    r.scrollBy({ left: L, behavior: "smooth" });
+import { jsxs as N, jsx as o } from "react/jsx-runtime";
+import { useRef as l, useState as _, useEffect as D } from "react";
+import '../../styles/ButtonControlledScroll.css';const k = "_wrapper_r0cby_6", E = "_container_r0cby_16", U = "_btn_r0cby_27", X = "_grab_r0cby_44", j = "_grabbing_r0cby_48", B = "_btnLeft_r0cby_54", O = "_btnRight_r0cby_59", n = {
+  wrapper: k,
+  container: E,
+  btn: U,
+  grab: X,
+  grabbing: j,
+  btnLeft: B,
+  btnRight: O
+}, T = ({ items: h, iconLeft: p, iconRight: L, scrollAmount: m = 150, grabSpeed: v = 1.5, grabbable: c = !0 }) => {
+  const i = m, r = l(null), [M, S] = _(!1), [y, R] = _(!1), s = l(!1), f = l(0), u = l(0), w = (t) => {
+    if (c) {
+      const e = r.current;
+      if (!e) return;
+      s.current = !0, f.current = t.pageX - e.offsetLeft, u.current = e.scrollLeft, e.classList.add(n.grabbing);
+    }
+  }, x = (t) => {
+    if (c) {
+      const e = r.current;
+      if (!e || !s.current) return;
+      t.preventDefault();
+      const C = (t.pageX - e.offsetLeft - f.current) * v;
+      e.scrollLeft = u.current + C;
+    }
+  }, b = () => {
+    if (c) {
+      const t = r.current;
+      s.current = !1, t == null || t.classList.remove(n.grabbing);
+    }
+  }, $ = () => {
+    s.current && c && b();
+  }, a = () => {
+    const t = r.current;
+    t && (S(t.scrollLeft > 0), R(t.scrollLeft + t.clientWidth < t.scrollWidth));
+  }, d = (t) => {
+    const e = r.current;
+    if (!e) return;
+    const g = t === "left" ? -i : i;
+    e.scrollBy({ left: g, behavior: "smooth" });
   };
-  return p(() => {
-    const t = e.current;
+  return D(() => {
+    const t = r.current;
     if (t)
-      return c(), t.addEventListener("scroll", c), () => t.removeEventListener("scroll", c);
-  }, []), /* @__PURE__ */ d("div", { className: `${n.wrapper}`, children: [
-    _ && /* @__PURE__ */ l("button", { className: `${n.btn} ${n.btnLeft}`, onClick: () => o("left"), children: i }),
-    /* @__PURE__ */ l("div", { className: `${n.container}`, ref: e, children: a.map((t, r) => /* @__PURE__ */ l("div", { className: n.item, children: t }, r)) }),
-    h && /* @__PURE__ */ l("button", { className: `${n.btn} ${n.btnRight}`, onClick: () => o("right"), children: f })
+      return a(), t.addEventListener("scroll", a), () => t.removeEventListener("scroll", a);
+  }, []), /* @__PURE__ */ N("div", { className: `${n.wrapper}`, children: [
+    M && /* @__PURE__ */ o("button", { className: `${n.btn} ${n.btnLeft} padding-xs-5`, onClick: () => d("left"), children: p }),
+    /* @__PURE__ */ o("div", { onMouseDown: w, onMouseLeave: $, onMouseMove: x, onMouseUp: b, className: `${n.container} ${c && n.grab}`, ref: r, children: h.map((t, e) => /* @__PURE__ */ o("div", { className: n.item, children: t }, e)) }),
+    y && /* @__PURE__ */ o("button", { className: `${n.btn} ${n.btnRight} padding-xs-5`, onClick: () => d("right"), children: L })
   ] });
 };
 export {
-  $ as ButtonControlledScroll
+  T as ButtonControlledScroll
 };

package/dist/styles/ButtonControlledScroll.css

@@ -1 +1 @@
-._wrapper_wftna_1{position:relative;display:flex;align-items:center;width:300px;-webkit-user-select:none;user-select:none}._wrapper_wftna_1 label{-webkit-user-select:none;user-select:none}._wrapper_wftna_1 ._container_wftna_11{display:flex;overflow-x:auto;scroll-behavior:smooth;gap:10px;padding:10px;width:100%}._wrapper_wftna_1 ._container_wftna_11::-webkit-scrollbar{display:none}._wrapper_wftna_1 ._btn_wftna_22{transition:.3s;display:flex;justify-content:center;align-items:center;width:30px;height:30px;padding:var(--spacing-xs-5);border-radius:50%;border:1px solid var(--button-tertiary-default-border);background-color:var(--button-primary-default-icon);position:absolute;cursor:pointer}._wrapper_wftna_1 ._btn_wftna_22:hover{background-color:var(--background-tooltip)}._wrapper_wftna_1 ._btnLeft_wftna_39{left:3px;top:50%;transform:translateY(-50%)}._wrapper_wftna_1 ._btnRight_wftna_44{right:3px;top:50%;transform:translateY(-50%)}
+._wrapper_r0cby_6{position:relative;display:flex;align-items:center;width:100%;-webkit-user-select:none;user-select:none}._wrapper_r0cby_6 label{-webkit-user-select:none;user-select:none}._wrapper_r0cby_6 ._container_r0cby_16{display:flex;overflow-x:auto;gap:10px;padding:10px;width:100%;scroll-behavior:smooth}._wrapper_r0cby_6 ._container_r0cby_16::-webkit-scrollbar{display:none}._wrapper_r0cby_6 ._btn_r0cby_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_r0cby_6 ._btn_r0cby_27 *{z-index:2}._wrapper_r0cby_6 ._grab_r0cby_44{cursor:grab;scroll-behavior:initial}._wrapper_r0cby_6 ._grabbing_r0cby_48{cursor:grabbing}._wrapper_r0cby_6 ._btn_r0cby_27:hover{background-color:var(--background-tooltip)}._wrapper_r0cby_6 ._btnLeft_r0cby_54{left:0;top:50%;transform:translateY(-50%)}._wrapper_r0cby_6 ._btnRight_r0cby_59{right:0;top:50%;transform:translateY(-50%)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@situaction/traq-ui-ste",
-  "version": "1.1.11",
+  "version": "1.1.12",
   "description": "library react component Situaction",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",