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