fui-fancyui/dist/src/utils/hooks/useSlider/useSilder.js

FancyUI Libary

"use client";
import { useState as C, useRef as y, useCallback as w, useEffect as h } from "react";
import f from "color";
import D from "../../functions/throttle/throttle.js";
const q = ({
  color: o,
  hue: l,
  type: i,
  opacity: M,
  sliderPositionToColorFunc: d,
  positionToColorFunc: E,
  colorToPositionFunc: g,
  handlerSlider: v,
  handlerColor: I
}) => {
  const [Y, b] = C({ x: 0, y: 0 }), [a, p] = C(!1), c = y(null), t = w(
    (e) => {
      if (!c.current) return;
      const n = c.current.getBoundingClientRect(), s = g(e, n);
      b(s);
    },
    [g]
  ), L = w(
    (e, n) => {
      if (!c.current) return;
      const s = c.current.getBoundingClientRect();
      if (i === "hue") {
        const r = d && d(e, s);
        v && r !== void 0 && v(Math.floor(r) ?? 0);
        const u = f({ h: r, s: 100, l: 50 });
        t(u);
      } else if (i === "opacity") {
        const r = d && d(e, s), u = Math.max(0, Math.min(r, 1));
        v && v(u ?? 1);
        const B = f({ r: 255, g: 255, b: 255 }).alpha(u);
        t(B);
      } else {
        const r = E && E(l ?? 0, e, n, s), u = f(r);
        I && I(u), t(u);
      }
    },
    [t, E, i, l, d, v, I]
  ), m = w(D(L, 10), [L]), x = (e) => {
    p(!0), e.nativeEvent instanceof MouseEvent ? m(e.nativeEvent.clientX, e.nativeEvent.clientY) : e.nativeEvent instanceof TouchEvent && m(e.nativeEvent.touches[0].clientX, e.nativeEvent.touches[0].clientY);
  };
  h(() => (a ? document.body.style.overflow = "hidden" : document.body.style.overflow = "auto", () => {
    document.body.style.overflow = "auto";
  }), [a]);
  const R = w(
    (e) => {
      a && (e instanceof MouseEvent ? (e.preventDefault(), m(e.clientX, e.clientY)) : e instanceof TouchEvent && (e.cancelable && e.preventDefault(), m(e.touches[0].clientX, e.touches[0].clientY)));
    },
    [a, m]
  ), k = w(() => {
    p(!1);
  }, []);
  return h(() => {
    o && t(o);
  }, [o, t]), h(() => {
    t(i === "color" && o ? o.hue(l ?? 0) : i === "opacity" ? f({ r: 255, g: 255, b: 255 }).alpha(M ?? 1) : f({ h: l, s: 50, l: 50 }));
  }, [l, t, o, i, M]), h(() => {
    if (!c.current) return;
    let e = o;
    e || (e = i === "hue" ? f({ h: l, s: 100, l: 50 }) : f({ r: 255, g: 255, b: 255 }).alpha(1));
    const n = c.current.getBoundingClientRect(), s = g(e, n);
    b(s);
  }, []), h(() => {
    const e = (s) => R(s), n = () => k();
    return a && (window.addEventListener("mousemove", e), window.addEventListener("touchmove", e, { passive: !1 }), window.addEventListener("mouseup", n), window.addEventListener("touchend", n, { passive: !1 })), () => {
      window.removeEventListener("mousemove", e), window.removeEventListener("touchmove", e), window.removeEventListener("mouseup", n), window.removeEventListener("touchend", n);
    };
  }, [R, k, a]), { sliderRef: c, markerPosition: Y, handleInteractionStart: x, isInteracting: a };
};
export {
  q as default
};