fui-fancyui
Version:
FancyUI Libary
47 lines (46 loc) • 1.63 kB
JavaScript
"use client";
import { jsxs as l, jsx as o } from "react/jsx-runtime";
import p from "color";
import { useMemo as f } from "react";
import C from "../../atoms/ColorIndicator/ColorIndicator.js";
import h from "../../../utils/hooks/useSlider/useSilder.js";
import { WrapperColorArea as y, ColorAreaContainer as x, CurrentColorArea as S, LightnessGradient as $, SaturationGradient as A, WrapperMarker as T, Marker as b } from "./FancyColorArea.style.js";
import { positionToColor as g, colorToPosition as k } from "./utils/calcPosition.js";
function W(s) {
const { colorValue: e = "#f00", hue: t = 0, handler: c, borderRadius: n = "sm", externalStyle: d } = s, i = f(() => p(e), [e]), { sliderRef: m, markerPosition: r, handleInteractionStart: a, isInteracting: u } = h({
color: i,
hue: t,
positionToColorFunc: g,
colorToPositionFunc: k,
handlerColor: c,
type: "color"
});
return /* @__PURE__ */ l(y, { $externalStyle: d, children: [
/* @__PURE__ */ o(
C,
{
position: { y: r.y + "%", x: r.x + "%" },
color: i.toString(),
isActive: u
}
),
/* @__PURE__ */ l(
x,
{
ref: m,
$borderRadius: n,
onMouseDown: a,
onTouchStart: a,
children: [
/* @__PURE__ */ o(S, { $borderRadius: n, style: { background: `hsl(${t}, 100%, 50%)` } }),
/* @__PURE__ */ o($, {}),
/* @__PURE__ */ o(A, {}),
/* @__PURE__ */ o(T, { style: { transform: `translate(${r.x + "%"}, ${r.y + "%"})` }, children: /* @__PURE__ */ o(b, {}) })
]
}
)
] });
}
export {
W as default
};