@situaction/traq-ui-ste 1.1.11 → 1.1.13

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 D, jsx as c } from "react/jsx-runtime";
+import { useRef as l, useState as h, useEffect as k } from "react";
+import '../../styles/ButtonControlledScroll.css';const E = "_wrapper_30f39_6", U = "_container_30f39_17", X = "_btn_30f39_27", j = "_grab_30f39_44", y = "_grabbing_30f39_48", B = "_btnLeft_30f39_54", O = "_btnRight_30f39_59", n = {
+  wrapper: E,
+  container: U,
+  btn: X,
+  grab: j,
+  grabbing: y,
+  btnLeft: B,
+  btnRight: O
+}, T = ({ items: p, iconLeft: L, iconRight: b, scrollAmount: m = 150, grabSpeed: v = 1.5, grabbable: s = !0 }) => {
+  const i = m, r = l(null), [M, S] = h(!1), [R, w] = h(!1), o = l(!1), f = l(0), u = l(0), x = (t) => {
+    if (s) {
+      const e = r.current;
+      if (!e) return;
+      o.current = !0, f.current = t.pageX - e.offsetLeft, u.current = e.scrollLeft, e.classList.add(n.grabbing);
+    }
+  }, $ = (t) => {
+    if (s) {
+      const e = r.current;
+      if (!e || !o.current) return;
+      t.preventDefault();
+      const N = (t.pageX - e.offsetLeft - f.current) * v;
+      e.scrollLeft = u.current + N;
+    }
+  }, d = () => {
+    if (s) {
+      const t = r.current;
+      o.current = !1, t == null || t.classList.remove(n.grabbing);
+    }
+  }, C = () => {
+    o.current && s && d();
+  }, a = () => {
+    const t = r.current;
+    t && (S(t.scrollLeft > 0), w(t.scrollLeft + t.clientWidth < t.scrollWidth));
+  }, g = (t) => {
+    const e = r.current;
+    if (!e) return;
+    const _ = t === "left" ? -i : i;
+    e.scrollBy({ left: _, behavior: "smooth" });
   };
-  return p(() => {
-    const t = e.current;
+  return k(() => {
+    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__ */ D("div", { className: `${n.wrapper}`, children: [
+    M && /* @__PURE__ */ c("button", { className: `${n.btn} ${n.btnLeft} padding-xs-5`, onClick: () => g("left"), children: L }),
+    /* @__PURE__ */ c("div", { onMouseDown: x, onMouseLeave: C, onMouseMove: $, onMouseUp: d, className: `${n.container} ${s && n.grab}`, ref: r, children: p.map((t, e) => /* @__PURE__ */ c("div", { className: n.item, children: t }, e)) }),
+    R && /* @__PURE__ */ c("button", { className: `${n.btn} ${n.btnRight} padding-xs-5`, onClick: () => g("right"), children: b })
   ] });
 };
 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_30f39_6{position:relative;display:flex;align-items:center;width:100%;padding:10px;-webkit-user-select:none;user-select:none}._wrapper_30f39_6 label{-webkit-user-select:none;user-select:none}._wrapper_30f39_6 ._container_30f39_17{display:flex;overflow-x:auto;gap:10px;width:100%;scroll-behavior:smooth}._wrapper_30f39_6 ._container_30f39_17::-webkit-scrollbar{display:none}._wrapper_30f39_6 ._btn_30f39_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_30f39_6 ._btn_30f39_27 *{z-index:2}._wrapper_30f39_6 ._grab_30f39_44{cursor:grab;scroll-behavior:initial}._wrapper_30f39_6 ._grabbing_30f39_48{cursor:grabbing}._wrapper_30f39_6 ._btn_30f39_27:hover{background-color:var(--background-tooltip)}._wrapper_30f39_6 ._btnLeft_30f39_54{left:0;top:50%;transform:translateY(-50%)}._wrapper_30f39_6 ._btnRight_30f39_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.13",
   "description": "library react component Situaction",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",