xtreme-ui
Version:
Collection of reusable components that can be used in web projects
196 lines (195 loc) • 6.87 kB
JavaScript
"use client";
import { jsxs as a, Fragment as ie, jsx as t } from "react/jsx-runtime";
import { useFloating as ae, autoUpdate as ce, shift as he, flip as de, offset as me, useTransitionStyles as pe, useInteractions as ue, useClick as fe, useDismiss as Ce } from "@floating-ui/react";
import C from "clsx";
import { colord as s, getFormat as ge } from "colord";
import { Icon as ve } from "gliff";
import { forwardRef as xe, useMemo as w, useState as g, useRef as ye, useEffect as V } from "react";
import { ColorPicker as He } from "../ColorPicker/ColorPicker.js";
import { Textfield as be } from "../Textfield/Textfield.js";
import { useScreenType as Ne } from "../../hooks/useScreen.js";
import { getColorLabel as $e } from "../../../utils/helper/colorHelper.js";
import { THEME_SCHEME as Pe } from "../../../utils/constants/theme.js";
import { mergeRefs as Te } from "../../../utils/function/mergeRefs.js";
import { Button as M } from "../Button/Button.js";
import './colorPopper.css';/* empty css */
function O(j, z) {
const {
className: R,
popperClassName: A,
input: v = "textfield",
size: q = "default",
placeholder: D = "Color Picker",
colorHeading: m = "Pick color",
schemeHeading: I,
themeScheme: x,
setThemeScheme: U,
showReset: W = !0,
alpha: _,
shade: G,
swatch: y,
hideWheel: E = !1,
color: c,
setColor: p
} = j, J = Ne(), r = w(() => s(c), []), u = w(() => ge(c), [c]), [H, h] = g(r.toHsv()), [l, d] = g(r.toHex()), [K, Q] = g(m), b = ye(!1), [F, N] = g(!1), { refs: $, floatingStyles: X, context: P } = ae({
open: F,
onOpenChange: N,
middleware: [he({ crossAxis: !0, padding: 18 }), de(), me(({ placement: e }) => e === "bottom" ? 10 : 16)],
whileElementsMounted: ce
}), { isMounted: Y, styles: Z } = pe(P, {
duration: 200,
initial: ({ side: e }) => ({
opacity: 0,
translate: e === "bottom" ? "0px 8px" : "0px -8px"
})
}), { getReferenceProps: L, getFloatingProps: ee } = ue([fe(P), Ce(P)]), [T, oe, S] = w(() => {
const e = s(H), o = e.toHsl(), n = r.toHsl();
return [
`${Math.round(o.h)} ${Math.round(o.s)}% ${Math.round(o.l)}%`,
`${Math.round(n.h)} ${Math.round(n.s)}% ${Math.round(n.l)}%`,
e.isLight() ? "black" : "white"
];
}, [r, H]), te = l !== r.toHex(), k = v === "button" || v === "buttonLabel", f = (e) => {
b.current = !0, u === "rgb" ? p(e.toRgb()) : u === "hex" ? p(e.toHex()) : u === "hsl" ? p(e.toHsl()) : u === "hsv" && p(e.toHsv());
}, B = (e) => {
d(e);
const o = s(e);
o.isValid() && (h(o.toHsv()), f(o));
}, se = (e) => {
const o = s(e);
h(e), d(o.toHex()), f(o);
}, re = (e) => {
const o = s(e);
h(o.toHsv()), d(o.toHex()), f(o);
}, le = () => {
h(r.toHsv()), d(r.toHex()), f(r);
};
return V(() => {
if (!b.current) {
const e = s(c);
h(e.toHsv()), d(e.toHex());
}
b.current = !1;
}, [c]), V(() => {
Q($e(s(l).toHsl()) ?? m);
}, [m, l]), /* @__PURE__ */ a(ie, { children: [
k ? /* @__PURE__ */ t(
M,
{
className: "xtrColorButton",
ref: $.setReference,
size: q,
icon: "f53f",
iconType: "solid",
label: v === "buttonLabel" ? l : void 0,
style: {
"--themeColor": T,
"--iconColor": S,
color: S
},
onClick: () => N(!0),
...L()
}
) : /* @__PURE__ */ t(
be,
{
className: C("xtrColorInput", R),
ref: $.setReference,
placeholder: D,
icon: "f53f",
iconType: "solid",
active: F,
value: l,
onChange: (e) => B(e.target.value),
style: {
"--colorBrandPrimary": T,
"--iconColor": S
},
onFocus: () => N(!0),
...L()
}
),
Y && /* @__PURE__ */ a(
"div",
{
ref: Te([z, $.setFloating]),
className: C("xtrColorPopper", A),
style: { ...X, ...Z, "--colorBrandPrimary": T },
...ee(),
children: [
(y || !E) && /* @__PURE__ */ a("div", { className: C("header", k && "withInput"), children: [
/* @__PURE__ */ a("div", { className: "heading", children: [
/* @__PURE__ */ a("div", { children: [
/* @__PURE__ */ t("h1", { children: K }),
k && /* @__PURE__ */ t(
"input",
{
placeholder: "#Hex",
className: C("popperInput", R),
value: l,
autoFocus: J.isLargest,
onChange: (e) => B(e.target.value)
}
)
] }),
/* @__PURE__ */ t("h1", { children: m })
] }),
W && /* @__PURE__ */ t(
ve,
{
code: "f1da",
type: "solid",
style: {
"--colorBrandPrimary": oe,
visibility: te ? "visible" : "hidden"
},
onClick: le
}
)
] }),
y && /* @__PURE__ */ t("div", { className: "swatch", children: y.map((e, o) => {
const n = s(l).isEqual(e), i = s(e).toHsl(), ne = `${i.h} ${i.s}% ${i.l}%`;
return /* @__PURE__ */ t(
M,
{
className: "swatchItem",
icon: "f00c",
iconType: "solid",
size: "mini",
style: {
"--themeColor": ne,
color: n ? "white" : "transparent"
},
onClick: () => re(i)
},
`ThemeColor-${i.h}${i.s}${i.l}-${o}`
);
}) }),
!E && /* @__PURE__ */ t(He, { className: "colorPicker", alpha: _, shade: G, color: H, setColor: se }),
I && /* @__PURE__ */ a("div", { className: "themeScheme", children: [
/* @__PURE__ */ t("div", { className: "header", children: /* @__PURE__ */ a("div", { className: "heading", children: [
/* @__PURE__ */ t("div", { children: /* @__PURE__ */ t("h1", { children: x }) }),
/* @__PURE__ */ t("h1", { children: I })
] }) }),
/* @__PURE__ */ t("div", { className: "schemeSelector", children: Pe.map(({ name: e, icon: o }, n) => /* @__PURE__ */ t(
M,
{
icon: o,
iconType: "solid",
disabled: x === e,
type: x === e ? "primary" : "secondary",
onClick: () => U?.(e)
},
`ThemeScheme-${e}-${n}`
)) })
] })
]
}
)
] });
}
const Ae = xe(O);
O.displayName = "ColorPopper";
export {
Ae as ColorPopper
};