@frontify/fondue
Version:
Design system of Frontify
102 lines (101 loc) • 4.06 kB
JavaScript
import { jsxs as u, jsx as e } from "react/jsx-runtime";
import { EmojiSettings as N } from "@udecode/plate-emoji";
import { useCallback as b } from "react";
const f = ({ index: w, emoji: t, onSelect: a, onMouseOver: r }) => {
var n, s;
return /* @__PURE__ */ u(
"button",
{
type: "button",
"aria-label": (n = t == null ? void 0 : t.skins[0]) == null ? void 0 : n.native,
tabIndex: -1,
"data-index": w,
onClick: () => a(t),
onMouseEnter: () => r(t),
onMouseLeave: () => r(),
className: "tw-group/emojibutton tw-relative tw-flex tw-h-9 tw-w-9 tw-cursor-pointer tw-items-center tw-justify-center tw-border-none tw-bg-transparent tw-text-2xl tw-leading-none",
children: [
/* @__PURE__ */ e(
"div",
{
"aria-hidden": "true",
className: "tw-absolute tw-inset-0 tw-rounded-full tw-bg-[rgba(0,0,0,0.05)] tw-opacity-0 group-hover/emojibutton:tw-opacity-100"
}
),
/* @__PURE__ */ e("span", { "data-emoji-set": "native", className: "tw-relative", children: (s = t == null ? void 0 : t.skins[0]) == null ? void 0 : s.native })
]
}
);
}, R = ({ row: w, emojiLibrary: t, onSelectEmoji: a, onMouseOver: r }) => /* @__PURE__ */ e("div", { "data-index": w.id, className: "tw-flex", children: w.elements.map((n, s) => /* @__PURE__ */ e(
f,
{
index: s,
emoji: t.getEmoji(n),
onSelect: a,
onMouseOver: r
},
n
)) }, w.id);
function B({
i18n: w,
onSelectEmoji: t,
onMouseOver: a,
emojiLibrary: r,
isSearching: n = !1,
searchResult: s,
visibleCategories: d,
refs: h,
settings: c = N
}) {
const o = c.perLine.value * c.buttonSize.value, p = b(
(l) => d.has(l) ? d.get(l) : !1,
[d]
), x = b(() => r.getGrid().sections().map(({ id: l }) => {
const i = r.getGrid().section(l), { buttonSize: m } = c;
return /* @__PURE__ */ u("div", { "data-id": l, ref: i.root, style: { width: o }, children: [
/* @__PURE__ */ e("div", { className: "tw-sticky tw--top-px tw-z-[1] tw-bg-white/90 tw-p-1 tw-backdrop-blur-[4px]", children: w.categories[l] }),
/* @__PURE__ */ e(
"div",
{
className: "tw-relative tw-flex tw-flex-wrap",
style: { height: i.getRows().length * m.value },
children: p(l) && i.getRows().map((v, g) => /* @__PURE__ */ e(
R,
{
emojiLibrary: r,
row: v,
onSelectEmoji: t,
onMouseOver: a
},
g
))
}
)
] }, l);
}), [r, o, w.categories, p, t, a, c]), k = b(() => /* @__PURE__ */ u("div", { "data-id": "search", style: { width: o }, children: [
/* @__PURE__ */ e("div", { className: "tw-sticky tw--top-px tw-z-[1] tw-bg-white/90 tw-p-1 tw-backdrop-blur-[4px]", children: w.searchResult }),
/* @__PURE__ */ e("div", { className: "tw-relative tw-flex tw-flex-wrap", children: s.map((l, i) => /* @__PURE__ */ e(
f,
{
index: i,
emoji: r.getEmoji(l.id),
onSelect: t,
onMouseOver: a
},
l.id
)) })
] }), [r, o, w.searchResult, s, t, a]);
return /* @__PURE__ */ e(
"div",
{
className: "tw-h-full tw-min-h-[50%] tw-overflow-y-auto tw-overflow-x-hidden tw-px-3 [&::-webkit-scrollbar]:tw-w-4 [&::-webkit-scrollbar-button]:tw-hidden [&::-webkit-scrollbar-button]:tw-h-0 [&::-webkit-scrollbar-button]:tw-w-0 [&::-webkit-scrollbar-thumb]:hover:tw-bg-[#f3f4f6] [&::-webkit-scrollbar-thumb]:tw-min-h-[65px] [&::-webkit-scrollbar-thumb]:tw-rounded-2xl [&::-webkit-scrollbar-thumb]:tw-border-solid [&::-webkit-scrollbar-thumb]:tw-border-4 [&::-webkit-scrollbar-thumb]:tw-border-white [&::-webkit-scrollbar-track]:tw-border-0",
"data-id": "scroll",
ref: h.current.contentRoot,
children: /* @__PURE__ */ e("div", { ref: h.current.content, className: "tw-h-full", children: n ? k() : x() })
}
);
}
export {
B as EmojiPickerContent
};
//# sourceMappingURL=EmojiPickerContent.es.js.map