@frontify/fondue
Version:
Design system of Frontify
132 lines (131 loc) • 4.37 kB
JavaScript
import { jsxs as E, jsx as w } from "react/jsx-runtime";
import { useState as y, useRef as N, useEffect as S, cloneElement as C } from "react";
import { EditableTextHelper as T } from "./lib/helper.es.js";
import { FOCUS_VISIBLE_STYLE as B } from "../../utilities/focusStyle.es.js";
import { merge as a } from "../../utilities/merge.es.js";
var D = /* @__PURE__ */ ((l) => (l.INPUT = "INPUT", l.LABEL = "LABEL", l))(D || {});
const R = ({
onEditableSave: l,
onModeChange: r,
onAdditionalValueSave: b,
children: u,
options: e,
isOverflowing: m = !1,
"data-test-id": P = "editable-node-container"
}) => {
const d = T.getLabel(u), [x, I] = y(d), [c, n] = y(
"LABEL"
/* LABEL */
), [L, U] = y(), f = N(null), g = (t) => I(t.target.value), h = (t) => {
n(
"LABEL"
/* LABEL */
), r && r(
"LABEL"
/* LABEL */
), e != null && e.additionalValues && b && b(e.additionalValues, t.target.value), l && l(t.target.value);
}, i = (t) => () => {
I(t), n(
"INPUT"
/* INPUT */
), r && r(
"INPUT"
/* INPUT */
);
}, k = (t) => {
t.key === "Enter" && h(t);
}, v = (t) => h(t);
S(() => n(
(e == null ? void 0 : e.mode) ?? "LABEL"
/* LABEL */
), [e == null ? void 0 : e.mode]);
const F = e != null && e.enableDoubleClick ? {
onDoubleClick: i(d),
onKeyPress: (t) => t.key === "Enter" && i(d)()
} : {
onClick: i(d)
};
S(() => {
var t;
s.current && U(T.copyStyles(s.current)), c === "INPUT" && ((t = f.current) == null || t.select());
}, [c, f, u]);
const s = N(), A = u && // eslint-disable-next-line @eslint-react/no-clone-element, @eslint-react/refs
C(u, {
ref: s
});
return /* @__PURE__ */ E(
"div",
{
"data-test-id": P,
className: a(["tw-relative tw-h-full", (e == null ? void 0 : e.removeBoxPadding) === !0 ? "" : "tw-p-2"]),
children: [
c === "INPUT" ? /* @__PURE__ */ w(
"div",
{
className: a([
"tw-flex tw-items-center",
(e == null ? void 0 : e.isSlimInputField) === !0 ? "-tw-translate-x-[0.315rem] -tw-translate-y-[0.07rem]" : "-tw-translate-x-[0.81rem] -tw-translate-y-[0.56rem]"
]),
children: /* @__PURE__ */ E(
"div",
{
"data-test-id": "editable-input",
className: a(["tw-relative", m && "tw-w-full tw-flex tw-items-center"]),
children: [
/* @__PURE__ */ w(
"input",
{
ref: f,
type: "text",
className: a([
(e == null ? void 0 : e.isSlimInputField) === !0 ? "focus-visible:tw-outline-none" : B,
"tw-absolute tw-w-full tw-text-text tw-border tw-rounded tw-bg-base tw-border-solid",
(e == null ? void 0 : e.isSlimInputField) === !0 ? "tw-py-0 tw-px-1" : "tw-px-3 tw-py-2"
]),
style: L,
value: x,
onChange: g,
onKeyDown: k,
onBlur: v
}
),
/* @__PURE__ */ w(
"span",
{
"aria-hidden": "true",
className: a([
"tw-rounded tw-px-4 tw-py-2 tw-bg-base tw-truncate",
(e == null ? void 0 : e.isSlimInputField) === !0 && "tw-py-0 tw-px-2",
m && "tw-w-0"
]),
style: L,
children: x
}
)
]
}
)
}
) : null,
/* @__PURE__ */ w(
"button",
{
type: "button",
style: { display: c === "INPUT" ? "none" : "flex" },
className: a([m && "tw-w-full", "tw-h-full tw-items-center", B]),
...F,
"data-test-id": "node-link-name",
"aria-pressed": "false",
children: A
}
)
]
}
);
};
R.displayName = "FondueEditableText";
export {
D as EditableMode,
R as EditableText
};
//# sourceMappingURL=EditableText.es.js.map