@frontify/fondue
Version:
Design system of Frontify
90 lines (89 loc) • 3.24 kB
JavaScript
import { jsx as e, jsxs as E } from "react/jsx-runtime";
import { useState as p, useRef as j, useEffect as z, cloneElement as B } from "react";
import { CheckboxState as u, Checkbox as U } from "../Checkbox/Checkbox.es.js";
import f from "../../foundation/Icon/Generated/IconArrowBidirectional.es.js";
import F from "../../foundation/Icon/Generated/IconArrowDown.es.js";
import L from "../../foundation/Icon/Generated/IconArrowUp.es.js";
import { IconSize as O } from "../../foundation/Icon/IconSize.es.js";
import { FOCUS_VISIBLE_STYLE as _ } from "../../utilities/focusStyle.es.js";
import { merge as m } from "../../utilities/merge.es.js";
import { SortDirection as H, SelectionMode as M } from "./Table.es.js";
var P = /* @__PURE__ */ ((t) => (t.Default = "Default", t.SelectAll = "SelectAll", t))(P || {});
const T = ({
column: t,
type: d = "Default",
rowIds: h,
sortDirection: o,
selectionMode: b,
isColumnSorted: l = !1,
handleSortChange: x,
setSelectedRows: a,
align: k = "left"
}) => {
const {
key: n,
rendered: S,
props: { allowsSorting: r }
} = t, [g, c] = p(/* @__PURE__ */ e(f, {})), [s, y] = p(!1), i = j(null), C = r ? "button" : "span", I = r ? "tw-cursor-pointer" : "tw-cursor-default", v = k === "right" ? "tw-w-full tw-justify-end" : "";
if (z(() => {
c(l ? o === H.Descending ? /* @__PURE__ */ e(F, {}) : /* @__PURE__ */ e(L, {}) : /* @__PURE__ */ e(f, {}));
}, [l, o]), d === "SelectAll") {
const w = {
"aria-label": "Select all",
scope: "col"
}, A = s ? u.Checked : u.Unchecked, N = () => {
a && (a(s ? [] : h), y((D) => !D));
};
return /* @__PURE__ */ e(
"th",
{
...w,
ref: i,
className: "tw-pl-8 tw-py-3 tw-pr-4 tw-w-16 tw-border-l-4 tw-border-transparent tw-group tw-outline-none",
"data-test-id": "table-select-cell",
children: b === M.SingleSelect ? /* @__PURE__ */ e("span", { className: "tw-sr-only", children: w["aria-label"] }) : /* @__PURE__ */ e(U, { value: n, "aria-label": n, state: A, onChange: N })
}
);
}
return /* @__PURE__ */ e(
"th",
{
ref: i,
className: m([
"tw-px-4 tw-py-3 tw-outline-none tw-group focus-visible:bg-violet-90",
r ? "tw-cursor-pointer" : ""
]),
"data-test-id": "table-column",
scope: "col",
onClick: r ? () => x(t.key, o) : () => null,
children: /* @__PURE__ */ E(
C,
{
className: m([
"tw-text-xs tw-font-medium tw-text-black-100 dark:tw-text-white tw-flex tw-gap-x-1 tw-items-center",
_,
I,
v
]),
children: [
S,
r && /* @__PURE__ */ e(
"span",
{
"aria-hidden": "true",
className: l ? "tw-text-violet-50" : "tw-text-black-40 dark:tw-text-black-60 group-hover:tw-text-black-100 dark:group-hover:tw-text-white",
children: B(g, { size: O.Size12 })
}
)
]
}
)
}
);
};
T.displayName = "FondueTableColumnHeader";
export {
T as TableColumnHeader,
P as TableColumnHeaderType
};
//# sourceMappingURL=TableColumnHeader.es.js.map