@frontify/fondue
Version:
Design system of Frontify
54 lines (53 loc) • 1.78 kB
JavaScript
import { jsxs as x, Fragment as g, jsx as e } from "react/jsx-runtime";
import { omit as T } from "lodash-es";
import { zIndexLayers as h } from "../../../helpers/zIndexLayers.es.js";
import { DEFAULT_TEXT_STYLE_VALUE as m } from "../types.es.js";
import { DropdownItem as y } from "./DropdownItem.es.js";
import { DropdownTrigger as D } from "./DropdownTrigger.es.js";
import { useTextStyleDropdown as v } from "./useTextStyleDropdown.es.js";
const z = ({ editorId: l, textStyles: t = [] }) => {
var n;
const {
state: { editor: a, toggle: s, isOpen: i },
dropdownProps: w,
triggerRef: f,
dropdownRef: c,
key: b
} = v(l);
let p = m;
const d = t.find((o) => {
var r;
return o.id === b && ((r = o.props) == null ? void 0 : r.label);
});
return d && (p = ((n = d.props) == null ? void 0 : n.label) || m), /* @__PURE__ */ x(g, { children: [
/* @__PURE__ */ e(D, { label: p, open: i, onClick: s, ref: f }),
i && /* @__PURE__ */ e(
"div",
{
style: { zIndex: h.textStyleDropdown },
className: "tw-divide-y tw-divide-line tw-bg-base tw-shadow-md tw-border tw-border-line tw-overflow-auto tw-min-h-[40px]",
ref: c,
...w,
children: t.map((o) => {
var r;
return /* @__PURE__ */ e(y, { editor: a, type: o, children: /* @__PURE__ */ e(
"span",
{
style: T(o.styles ?? {}, [
"color",
"lineHeight",
"marginTop",
"marginBottom"
]),
children: (r = o.props) == null ? void 0 : r.label
}
) }, o.id);
})
}
)
] });
};
export {
z as TextStyleDropdown
};
//# sourceMappingURL=TextStyleDropdown.es.js.map