@trail-ui/react
Version:
112 lines (109 loc) • 4.42 kB
JavaScript
import {
useFocusHandler
} from "./chunk-SSX6C2M6.mjs";
// src/editable-table/editable-table-header.tsx
import { flexRender } from "@tanstack/react-table";
import { ArrowDownIcon, ArrowUpIcon, CaretUpDownIcon } from "@trail-ui/icons";
import { jsx, jsxs } from "react/jsx-runtime";
function EditableTableHeader({
table,
selectAllCheckBoxName,
tableName
}) {
const { focusedCell, setFocusedCell } = useFocusHandler();
const focusHeader = (columnIndex) => setFocusedCell({ rowIndex: 0, columnIndex, isHeader: true });
const renderSortIcon = (sorted) => {
switch (sorted) {
case "asc":
return /* @__PURE__ */ jsx(ArrowUpIcon, { className: "h-4 w-4 text-purple-600" });
case "desc":
return /* @__PURE__ */ jsx(ArrowDownIcon, { className: "h-4 w-4 text-purple-600" });
default:
return /* @__PURE__ */ jsx(CaretUpDownIcon, { className: "h-4 w-4 text-neutral-600" });
}
};
const toggleCheckbox = (elem) => {
const checkbox = elem.querySelector('input[type="checkbox"]');
checkbox == null ? void 0 : checkbox.click();
};
return /* @__PURE__ */ jsx("thead", { className: "sticky top-0 z-10", children: table.getHeaderGroups().map((group) => /* @__PURE__ */ jsx("tr", { children: group.headers.map((header, columnIndex) => {
var _a;
const isFocused = focusedCell.isHeader && focusedCell.columnIndex === columnIndex;
const canSort = header.column.getCanSort();
const isCheckbox = ((_a = header.column.columnDef.meta) == null ? void 0 : _a.type) === "checkbox";
if (isCheckbox) {
return /* @__PURE__ */ jsx(
"th",
{
colSpan: header.colSpan,
className: "border-b border-r bg-neutral-100 px-2 py-2 text-left text-center text-sm font-normal last:border-r-0",
children: /* @__PURE__ */ jsx(
"div",
{
role: "checkbox",
"data-row": "header",
"data-col": columnIndex,
"aria-label": selectAllCheckBoxName != null ? selectAllCheckBoxName : `Select all ${tableName}`,
"aria-checked": table.getIsAllRowsSelected() ? "true" : table.getIsSomeRowsSelected() ? "mixed" : "false",
className: "th-content flex h-[18px] w-[18px] cursor-pointer items-center justify-center p-[10px] outline-purple-600",
onClick: (e) => toggleCheckbox(e.currentTarget),
onKeyDown: (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
toggleCheckbox(e.currentTarget);
}
},
tabIndex: isFocused ? 0 : -1,
onFocus: () => focusHeader(columnIndex),
children: flexRender(header.column.columnDef.header, header.getContext())
}
)
},
header.id
);
}
return /* @__PURE__ */ jsx(
"th",
{
scope: "col",
className: "border-b border-r bg-neutral-100 last:border-r-0",
style: {
width: header.column.columnDef.size === 100 ? "auto" : header.column.columnDef.size
},
colSpan: header.colSpan,
...canSort && {
"aria-sort": header.column.getIsSorted() === "asc" ? "ascending" : header.column.getIsSorted() === "desc" ? "descending" : "none"
},
children: /* @__PURE__ */ jsxs(
"div",
{
className: `th-content flex items-center justify-between px-2 text-sm font-semibold outline-purple-600 ${canSort ? "cursor-pointer select-none" : ""} ${isFocused ? "focused" : ""}`,
"data-row": "header",
"data-col": columnIndex,
onClick: () => {
if (canSort)
header.column.toggleSorting();
focusHeader(columnIndex);
},
onKeyDown: (e) => {
if (e.key === " " && canSort) {
e.preventDefault();
header.column.toggleSorting();
}
},
tabIndex: isFocused ? 0 : -1,
onFocus: () => focusHeader(columnIndex),
children: [
flexRender(header.column.columnDef.header, header.getContext()),
canSort && renderSortIcon(header.column.getIsSorted())
]
}
)
},
header.id
);
}) }, group.id)) });
}
export {
EditableTableHeader
};