@frontify/fondue
Version:
Design system of Frontify
73 lines (72 loc) • 2.12 kB
JavaScript
import { jsx as r } from "react/jsx-runtime";
import { useRef as x } from "react";
import { Checkbox as d, CheckboxState as w } from "../Checkbox/Checkbox.es.js";
import { merge as l } from "../../utilities/merge.es.js";
import { SelectionMode as h } from "./Table.es.js";
var k = /* @__PURE__ */ ((t) => (t.Default = "Default", t.Checkbox = "Checkbox", t))(k || {});
const g = ({
cell: t,
selectionMode: i,
type: c = "Default",
isChecked: e = !1,
selectedRows: o,
setSelectedRows: a,
align: s = "left"
}) => {
const n = x(null);
if (c === "Checkbox") {
const { key: f } = t, b = () => {
if (!a)
return;
if (e) {
const p = o.filter((u) => u !== t.parentKey);
a(p);
return;
}
const m = (
// eslint-disable-next-line @typescript-eslint/no-unsafe-enum-comparison
i === h.SingleSelect ? [t.parentKey] : [...o, t.parentKey]
);
a(m);
};
return /* @__PURE__ */ r(
"td",
{
role: "cell",
ref: n,
className: l([
"tw-pl-8 tw-py-4 tw-pr-4 tw-relative after:tw-absolute after:tw-left-0 after:tw-top-[-1px] after:tw-bottom-[-1px] after:tw-w-1",
e ? "after:tw-bg-box-selected-strong" : "after:tw-bg-transparent"
]),
"data-test-id": "table-select-cell",
children: /* @__PURE__ */ r(
d,
{
value: f,
"aria-label": t["aria-label"] || f,
state: e ? w.Checked : w.Unchecked,
onChange: b
}
)
}
);
}
return /* @__PURE__ */ r(
"td",
{
role: "cell",
ref: n,
className: l([
"tw-p-4 tw-font-normal tw-text-xs focus:tw-outline-none",
e ? "tw-text-black-100 dark:tw-text-white" : "tw-text-black-80 dark:tw-text-black-20"
]),
children: /* @__PURE__ */ r("div", { className: l(["tw-flex", s === "right" && "tw-w-full tw-justify-end"]), children: t.rendered })
}
);
};
g.displayName = "FondueTableCell";
export {
g as TableCell,
k as TableCellType
};
//# sourceMappingURL=TableCell.es.js.map