@blofin/blofin-ui 0.7.31 → 0.7.33

package/dist/Slider.es.js

@@ -1,75 +1,75 @@
-import { j as t } from "./jsx-runtime-944c88e2.js";
-import { forwardRef as S, useRef as x, useState as w, useCallback as E } from "react";
-import { a as l, u as R } from "./index-96a8d125.js";
-import { c as i } from "./utils-7e50508b.js";
-const T = "_rail_1f4y3_7", X = "_track_1f4y3_15", L = "_mark_1f4y3_23", P = "_tooltip_1f4y3_53", A = "_thumb_1f4y3_50", n = {
-  "slider-container": "_slider-container_1f4y3_1",
-  "slider-content": "_slider-content_1f4y3_4",
-  rail: T,
-  track: X,
-  "mark-container": "_mark-container_1f4y3_23",
-  mark: L,
-  "mark-label": "_mark-label_1f4y3_39",
-  "thumb-container": "_thumb-container_1f4y3_50",
-  tooltip: P,
-  thumb: A
-}, B = l("", {
+import { j as i } from "./jsx-runtime-944c88e2.js";
+import { forwardRef as J, useRef as T, useMemo as K, useState as Q, useCallback as E } from "react";
+import { a as g, u as U } from "./index-96a8d125.js";
+import { c as p } from "./utils-7e50508b.js";
+const W = "_rail_ppjl3_7", Y = "_track_ppjl3_15", Z = "_mark_ppjl3_23", ee = "_tooltip_ppjl3_67", te = "_thumb_ppjl3_64", h = {
+  "slider-container": "_slider-container_ppjl3_1",
+  "slider-content": "_slider-content_ppjl3_4",
+  rail: W,
+  track: Y,
+  "mark-container": "_mark-container_ppjl3_23",
+  mark: Z,
+  "mark-label": "_mark-label_ppjl3_46",
+  "thumb-container": "_thumb-container_ppjl3_64",
+  tooltip: ee,
+  thumb: te
+}, re = g("", {
   variants: {
     theme: {
       light: ["bu-bg-light-line-secondary"],
       dark: ["bu-bg-dark-line-secondary"]
     }
   }
-}), q = l("", {
+}), ae = g("", {
   variants: {
     theme: {
       light: ["bu-bg-light-primary"],
       dark: ["bu-bg-dark-primary"]
     }
   }
-}), z = l("", {
+}), ne = g("", {
   variants: {
     theme: {
       light: ["bu-bg-light-label-60"],
       dark: ["bu-bg-dark-label"]
     }
   }
-}), b = l("", {
+}), le = g("", {
   variants: {
     theme: {
       light: ["bu-border-light-line-secondary bu-bg-light-background"],
       dark: ["bu-border-dark-line-secondary bu-bg-dark-background"]
     }
   }
-}), F = l("bu-transition-colors", {
+}), oe = g("bu-transition-colors", {
   variants: {
     theme: {
       light: ["bu-border-light-primary"],
       dark: ["bu-border-dark-primary"]
     }
   }
-}), j = l("", {
+}), se = g("", {
   variants: {
     theme: {
       light: ["bu-text-light-label-60"],
       dark: ["bu-text-dark-label-60"]
     }
   }
-}), G = l("", {
+}), ie = g("", {
   variants: {
     theme: {
       light: ["bu-border-light-primary bu-bg-light-background"],
       dark: ["bu-border-dark-primary bu-bg-dark-background"]
     }
   }
-}), N = l("", {
+}), L = g("", {
   variants: {
     theme: {
       light: ["!bu-border-light-label-60 bu-bg-light-background"],
       dark: ["!bu-border-dark-label bu-bg-dark-background"]
     }
   }
-}), H = l("after:border", {
+}), ce = g("after:border", {
   variants: {
     theme: {
       light: [
@@ -80,163 +80,176 @@ const T = "_rail_1f4y3_7", X = "_track_1f4y3_15", L = "_mark_1f4y3_23", P = "_to
       ]
     }
   }
-}), Q = S((C, M) => {
-  const { value: s, onSliderChange: u, onDragEnd: v, theme: r, id: o } = C, { theme: a } = R(), p = x(null), k = (e) => {
-    var $;
-    e.stopPropagation(), e.preventDefault();
-    const { left: c, right: f } = (($ = p.current) == null ? void 0 : $.getBoundingClientRect()) || {
-      left: 0,
-      right: 0
-    };
-    e.clientX >= c && e.clientX <= f ? u(Math.ceil((e.clientX - c) / (f - c) * 100)) : e.clientX < c && e.clientX > 0 ? u(0) : e.clientX > f && u(100);
-  }, h = x(!1), [g, _] = w(!1), D = (e) => {
-    e.stopPropagation(), e.preventDefault(), document.activeElement.blur(), h.current = !0, _(!0), document.addEventListener(
+});
+function P(m, t, o) {
+  return Math.max(t, Math.min(m, o));
+}
+function R(m, t, o, u) {
+  if (o === t)
+    return 0;
+  let s = (m - t) / (o - t) * 100;
+  return typeof u == "number" && (s = Number(s.toFixed(A(u)))), s;
+}
+function A(m) {
+  const t = m.toString();
+  return t.indexOf(".") === -1 ? 0 : t.split(".")[1].length;
+}
+function F(m, t, o, u, s, n) {
+  if (s === u)
+    return t;
+  let c = (m - u) / (s - u);
+  c = P(c, 0, 1);
+  let a = t + c * (o - t);
+  return a = Math.round((a - t) / n) * n + t, a = Number(a.toFixed(A(n))), P(a, t, o);
+}
+const me = J((m, t) => {
+  const {
+    value: o,
+    onSliderChange: u,
+    onDragEnd: s,
+    theme: n,
+    id: c,
+    min: a = 0,
+    max: d = 100,
+    step: k = 1,
+    marks: _ = [25, 50, 75],
+    labels: y = [0, 100],
+    className: X,
+    renderLabel: w = (e) => `${e}%`
+  } = m, { theme: b } = U(), j = T(null), B = K(() => {
+    const e = Array.from(new Set(_.concat([a, ...y, d]))).sort((r, f) => r - f), l = [];
+    return e.forEach((r) => {
+      r >= a && r <= d && l.push({
+        value: r,
+        showLabel: y.includes(r) || r === a || r === d,
+        showMark: _.includes(r) || r === a || r === d
+      });
+    }), l;
+  }, [_, a, d, k, y]), O = (e) => p(
+    le({ theme: n || b }),
+    o >= e ? $ ? oe({ theme: n || b }) : L({ theme: n || b }) : ""
+  ), q = () => $ ? p(ie({ theme: n || b })) : L({ theme: n || b }), z = () => $ ? p(ae({ theme: n || b })) : ne({ theme: n || b }), x = T(!1), [$, N] = Q(!1), S = E(
+    (e) => {
+      var v;
+      e.stopPropagation(), e.preventDefault();
+      const l = (v = j.current) == null ? void 0 : v.getBoundingClientRect();
+      if (!l)
+        return;
+      const { left: r, right: f } = l, M = F(e.clientX, a, d, r, f, k);
+      u(M);
+    },
+    [a, d, k, u]
+  ), D = E(
+    (e) => {
+      x.current && S(e);
+    },
+    [S]
+  ), G = (e) => {
+    e.stopPropagation(), e.preventDefault(), document.activeElement.blur(), x.current = !0, N(!0), document.addEventListener(
       "mouseup",
       () => {
-        h.current = !1, _(!1), document.removeEventListener("mousemove", y), v && v(s);
+        x.current = !1, N(!1), document.removeEventListener("mousemove", D), s && s(o);
       },
       { once: !0 }
-    ), document.addEventListener("mousemove", y);
-  }, y = E(
-    (e) => {
-      h.current && k(e);
-    },
-    [h.current, k]
-  ), d = (e, c) => {
-    e.stopPropagation(), u(c);
-  }, V = (e) => {
-    k(e);
-  }, m = () => g ? F({ theme: r || a }) : N({ theme: r || a });
-  return /* @__PURE__ */ t.jsxs("div", { id: o ? `${o}-slider-container` : "", className: n["slider-container"], children: [
-    /* @__PURE__ */ t.jsxs("div", { className: n["slider-content"], children: [
-      /* @__PURE__ */ t.jsx(
-        "div",
-        {
-          ref: p,
-          className: `${n.rail} ${i(B({ theme: r || a }))}`
-        }
-      ),
-      /* @__PURE__ */ t.jsx(
-        "div",
-        {
-          className: `${n.track} ${g ? i(q({ theme: r || a })) : z({ theme: r || a })}`,
-          style: { width: `${s}%` }
-        }
-      ),
-      /* @__PURE__ */ t.jsxs(
-        "div",
-        {
-          id: o ? `${o}-mark-container` : "",
-          className: n["mark-container"],
-          onClick: (e) => V(e),
-          children: [
-            /* @__PURE__ */ t.jsx(
-              "div",
-              {
-                className: `${n.mark} ${i(
-                  b({ theme: r || a }),
-                  s >= 0 ? m() : ""
-                )}`,
-                onClick: (e) => d(e, 0),
-                children: /* @__PURE__ */ t.jsx(
-                  "span",
+    ), document.addEventListener("mousemove", D);
+  }, H = (e, l) => {
+    e.stopPropagation(), u(l), s && s(l);
+  }, I = (e) => {
+    var C;
+    const l = (C = j.current) == null ? void 0 : C.getBoundingClientRect();
+    if (!l)
+      return;
+    const { left: r, right: f } = l, M = e.clientX, v = F(M, a, d, r, f, k);
+    u(v), s && s(v);
+  }, V = R(o, a, d, k);
+  return /* @__PURE__ */ i.jsxs(
+    "div",
+    {
+      id: c ? `${c}-slider-container` : "",
+      className: p(h["slider-container"], X),
+      children: [
+        /* @__PURE__ */ i.jsxs("div", { className: h["slider-content"], children: [
+          /* @__PURE__ */ i.jsx(
+            "div",
+            {
+              ref: j,
+              className: `${h.rail} ${p(re({ theme: n || b }))}`
+            }
+          ),
+          /* @__PURE__ */ i.jsx(
+            "div",
+            {
+              className: `${h.track} ${z()}`,
+              style: { width: `${V}%` }
+            }
+          ),
+          /* @__PURE__ */ i.jsx(
+            "div",
+            {
+              id: c ? `${c}-mark-container` : "",
+              className: h["mark-container"],
+              onClick: I,
+              children: B.map((e) => {
+                const l = R(e.value, a, d, k);
+                return /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
+                  e.showMark && /* @__PURE__ */ i.jsx(
+                    "div",
+                    {
+                      className: `${h.mark} ${O(e.value)} mark`,
+                      style: { left: `${l}%` },
+                      onClick: (r) => H(r, e.value)
+                    },
+                    e.value
+                  ),
+                  e.showLabel && /* @__PURE__ */ i.jsx(
+                    "span",
+                    {
+                      className: `${h["mark-label"]} ${p(
+                        se({ theme: n || b })
+                      )} mark-label`,
+                      style: { left: `${l}%` },
+                      children: w(e.value)
+                    }
+                  )
+                ] });
+              })
+            }
+          ),
+          /* @__PURE__ */ i.jsxs(
+            "div",
+            {
+              id: c ? `${c}-thumb-container` : "",
+              className: h["thumb-container"],
+              style: {
+                left: `${V}%`
+              },
+              children: [
+                /* @__PURE__ */ i.jsx(
+                  "div",
                   {
-                    className: `${n["mark-label"]} ${i(
-                      j({ theme: r || a })
+                    className: `${h.tooltip} ${p(
+                      ce({ theme: n || b })
                     )}`,
-                    children: "0%"
+                    children: w(o)
                   }
-                )
-              }
-            ),
-            /* @__PURE__ */ t.jsx(
-              "div",
-              {
-                className: `${n.mark} ${i(
-                  b({ theme: r || a }),
-                  s >= 25 ? m() : ""
-                )}`,
-                onClick: (e) => d(e, 25)
-              }
-            ),
-            /* @__PURE__ */ t.jsx(
-              "div",
-              {
-                className: `${n.mark} ${i(
-                  b({ theme: r || a }),
-                  s >= 50 ? m() : ""
-                )}`,
-                onClick: (e) => d(e, 50)
-              }
-            ),
-            /* @__PURE__ */ t.jsx(
-              "div",
-              {
-                className: `${n.mark} ${i(
-                  b({ theme: r || a }),
-                  s >= 75 ? m() : ""
-                )}`,
-                onClick: (e) => d(e, 75)
-              }
-            ),
-            /* @__PURE__ */ t.jsx(
-              "div",
-              {
-                className: `${n.mark} ${i(
-                  b({ theme: r || a }),
-                  s >= 100 ? m() : ""
-                )}`,
-                onClick: (e) => d(e, 100),
-                children: /* @__PURE__ */ t.jsx(
-                  "span",
+                ),
+                /* @__PURE__ */ i.jsx(
+                  "div",
                   {
-                    className: `${n["mark-label"]} ${i(
-                      j({ theme: r || a })
-                    )}`,
-                    children: "100%"
+                    id: c ? `${c}-thumb` : "",
+                    className: `${h.thumb} ${q()} thumb`,
+                    onMouseDown: G
                   }
                 )
-              }
-            )
-          ]
-        }
-      ),
-      /* @__PURE__ */ t.jsxs(
-        "div",
-        {
-          id: o ? `${o}-thumb-container` : "",
-          className: n["thumb-container"],
-          style: {
-            left: `${s}%`
-          },
-          children: [
-            /* @__PURE__ */ t.jsxs(
-              "div",
-              {
-                className: `${n.tooltip} ${i(
-                  H({ theme: r || a })
-                )}`,
-                children: [
-                  s,
-                  "%"
-                ]
-              }
-            ),
-            /* @__PURE__ */ t.jsx(
-              "div",
-              {
-                id: o ? `${o}-thumb` : "",
-                className: `${n.thumb} ${g ? i(G({ theme: r || a })) : N({ theme: r || a })}`,
-                onMouseDown: D
-              }
-            )
-          ]
-        }
-      )
-    ] }),
-    /* @__PURE__ */ t.jsx("input", { type: "hidden", value: s, ref: M })
-  ] });
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ i.jsx("input", { type: "hidden", value: o, ref: t })
+      ]
+    }
+  );
 });
 export {
-  Q as Slider
+  me as Slider
 };