@frontify/fondue
Version:
Design system of Frontify
72 lines (71 loc) • 1.79 kB
JavaScript
import { jsx as r } from "react/jsx-runtime";
import { useState as g } from "react";
import { ColorPicker as P } from "../ColorPicker/ColorPicker.es.js";
import { Flyout as x } from "../Flyout/Flyout.es.js";
import { ColorFormat as y } from "../../types/colors.es.js";
import { ColorInputTrigger as C } from "./ColorPickerTrigger.es.js";
import { ColorPreview as O } from "../ColorPicker/ColorPreview.es.js";
const v = ({
id: u,
onClick: o,
onClose: t,
onSelect: c,
currentColor: a,
palettes: d,
disabled: m = !1,
clearable: h = !1,
onClear: n,
onDelete: i
}) => {
const [f, e] = g(!1), [l, F] = g(y.Hex), s = (p) => {
p || t == null || t(), e(p);
};
return /* @__PURE__ */ r(
x,
{
hug: !1,
onConfirm: () => {
e(!1), o == null || o();
},
isOpen: f,
onCancel: () => s(!1),
contentMinHeight: 150,
fixedHeader: /* @__PURE__ */ r(O, { color: a || { red: 255, green: 255, blue: 255 } }),
onOpenChange: s,
isTriggerDisabled: m,
trigger: /* @__PURE__ */ r(
C,
{
isOpen: f,
currentColor: a,
format: l,
disabled: m,
id: u,
clearable: h,
onClear: () => {
e(!1), n && n();
},
onDelete: i ? () => {
e(!1), i && i();
} : void 0
}
),
children: /* @__PURE__ */ r(
P,
{
currentFormat: l,
setFormat: F,
palettes: d,
showPreview: !1,
currentColor: a || { red: 255, green: 255, blue: 255 },
onSelect: c
}
)
}
);
};
v.displayName = "FondueColorPickerFlyout";
export {
v as ColorPickerFlyout
};
//# sourceMappingURL=ColorPickerFlyout.es.js.map