@frontify/fondue
Version:
Design system of Frontify
123 lines (122 loc) • 4.03 kB
JavaScript
import { jsxs as n, jsx as a, Fragment as y } from "react/jsx-runtime";
import { TinyColor as C } from "@ctrl/tinycolor";
import { useState as f, useEffect as k } from "react";
import { RgbaColorPicker as H } from "react-colorful";
import { Dropdown as P } from "../Dropdown/Dropdown.es.js";
import { TextInputType as i } from "../TextInput/TextInput.es.js";
import { toShortRgb as z, toLongRgb as R } from "../../utilities/colors.es.js";
import { ColorInput as r, DecoratorPosition as T } from "./ColorInput.es.js";
import { ColorFormat as b } from "../../types/colors.es.js";
const v = (t) => new C(z(t)).toHex(), V = ({
currentColor: t,
currentFormat: s,
setFormat: m,
onSelect: o
}) => {
const N = [
{
id: "color-picker-format-dropdown-block",
menuItems: Object.values(b).map((e) => ({ id: e, title: e.toLocaleUpperCase() }))
}
], { red: p, green: d, blue: c, alpha: l = 1 } = t, [h, w] = f(v(t)), [I, u] = f(l), g = () => {
const e = new C(h);
e.isValid && o(R(e.toRgb()));
};
return k(() => {
u(l), w(v(t));
}, [l, t]), /* @__PURE__ */ n("div", { className: "tw-flex tw-flex-col tw-gap-4", "data-test-id": "custom-color-picker", id: "custom-color-picker", children: [
/* @__PURE__ */ n("div", { className: "tw-flex tw-flex-col md:tw-flex-row tw-gap-2 tw-max-w-full", children: [
/* @__PURE__ */ a("div", { className: "tw-min-w-[84px]", children: /* @__PURE__ */ a(
P,
{
menuBlocks: N,
activeItemId: s,
onChange: (e) => e && m && m(e)
}
) }),
s === b.Hex ? /* @__PURE__ */ a("div", { className: "tw-flex-1", children: /* @__PURE__ */ a(
r,
{
value: h,
decorator: "#",
size: 6,
onChange: w,
onEnterPressed: g,
onBlur: g,
"aria-label": "Color HEX Value"
}
) }) : /* @__PURE__ */ n(y, { children: [
/* @__PURE__ */ a("div", { className: "tw-flex-1", children: /* @__PURE__ */ a(
r,
{
min: 0,
max: 255,
size: 3,
type: i.Number,
value: p.toString(),
onChange: (e) => o({ ...t, red: parseInt(e || "0") }),
"aria-label": "Color Code Type"
}
) }),
/* @__PURE__ */ a("div", { className: "tw-flex-1", children: /* @__PURE__ */ a(
r,
{
min: 0,
max: 255,
size: 3,
type: i.Number,
value: d.toString(),
onChange: (e) => o({ ...t, green: parseInt(e || "0") }),
"aria-label": "Color Value"
}
) }),
/* @__PURE__ */ a("div", { className: "tw-flex-1", children: /* @__PURE__ */ a(
r,
{
min: 0,
max: 255,
size: 3,
type: i.Number,
value: c.toString(),
onChange: (e) => o({ ...t, blue: parseInt(e || "0") }),
"aria-label": "Color Opacity"
}
) })
] }),
/* @__PURE__ */ a(
r,
{
min: 0,
max: 100,
size: 3,
type: i.Number,
value: Math.trunc(I * 100).toString(),
decorator: "%",
decoratorPosition: T.Right,
onChange: (e) => {
const x = parseInt(e || "0") / 100;
u(x), o({ ...t, alpha: x });
}
}
)
] }),
/* @__PURE__ */ a("div", { className: "tw-flex tw-gap-2 tw-w-full tw-h-[200px]", children: /* @__PURE__ */ a("div", { className: "tw-relative tw-grow tw-rounded", children: /* @__PURE__ */ a(
H,
{
color: { r: p, g: d, b: c, a: l },
onChange: (e) => o({
red: e.r,
green: e.g,
blue: e.b,
alpha: e.a
}),
style: { width: "100%" }
}
) }) })
] });
};
V.displayName = "FondueCustomColorPicker";
export {
V as CustomColorPicker
};
//# sourceMappingURL=CustomColorPicker.es.js.map