fui-fancyui
Version:
FancyUI Libary
38 lines (37 loc) • 1.81 kB
JavaScript
"use client";
import { jsx as o, jsxs as g } from "react/jsx-runtime";
import y from "color";
import { useMemo as S } from "react";
import C from "../../../utils/hooks/useSlider/useSilder.js";
import b from "../../atoms/SliderMarker/SliderMarker.js";
import x from "../../atoms/ColorIndicator/ColorIndicator.js";
import P from "../../atoms/CheckerBoardPattern/CheckerBoardPattern.js";
import { positionToColorOpacity as F, colorToPositionOpacity as O } from "./utils/calcPosition.js";
import { Wrapper as T, SliderContainer as k, OpacityGradient as R } from "./FancyOpacitySlider.style.js";
import { globalElementSizes as $ } from "../../../design/theme/globalSizes.js";
import { sizeSettings as s } from "./sizeSettings.js";
function V(c) {
const { colorValue: i = "#f00", opacity: e = 1, handler: r, sizeC: n = "sm", borderRadius: a, ...p } = c, m = (u) => r == null ? void 0 : r(parseFloat(u.toFixed(2))), t = S(() => y(i), [i]), { sliderRef: d, markerPosition: h, handleInteractionStart: l, isInteracting: f } = C({
opacity: e ?? 1,
sliderPositionToColorFunc: F,
colorToPositionFunc: O,
handlerSlider: m,
type: "opacity"
});
return /* @__PURE__ */ o(T, { $height: $[s[n].height], ...p, children: /* @__PURE__ */ g(k, { ref: d, onMouseDown: l, onTouchStart: l, children: [
/* @__PURE__ */ o(b, { position: h.x + "%", children: /* @__PURE__ */ o(x, { color: t.alpha(e).string(), isActive: f }) }),
/* @__PURE__ */ o(
R,
{
$borderRadius: a || s[n].borderRadius,
style: {
background: `linear-gradient(to right, ${t.hsl().alpha(0).toString()} 0%, ${t.hsl().alpha(1).toString()} 90%)`
}
}
),
/* @__PURE__ */ o(P, { externalStyle: { position: "absolute", top: 0, left: 0 } })
] }) });
}
export {
V as default
};