koval-ui/dist/src/lib/DataTable/cells/ColumnHeaderCell.js

React components collection with minimalistic design. Supports theming, layout, and input validation.

"use client";
import { jsxs as S, jsx as c } from "react/jsx-runtime";
import { useState as b, useCallback as r, useMemo as k } from "react";
import { IconEllipsisVertical as P } from "../../../internal/Icons/IconEllipsisVertical.js";
import { IconPinLeft as N } from "../../../internal/Icons/IconPinLeft.js";
import { IconPinRight as v } from "../../../internal/Icons/IconPinRight.js";
import { IconUnPin as a } from "../../../internal/Icons/IconUnPin.js";
import { IconFilter as F } from "../../../internal/Icons/IconFilter.js";
import { IconSortAsc as A } from "../../../internal/Icons/IconSortAsc.js";
import { IconSortDesc as D } from "../../../internal/Icons/IconSortDesc.js";
import { IconSortOff as f } from "../../../internal/Icons/IconSortOff.js";
import s from "./Cells.module.css.js";
import { useDialogState as M } from "../../Dialog/useDialogState.js";
import { MenuActions as O } from "../../Menu/MenuActions.js";
const z = ({ title: u, headerContext: i }) => {
  const [t, o] = b(!1), p = r(() => {
    o(!t);
  }, [t]), d = r(
    (I) => {
      o(I);
    },
    [o]
  ), n = i.column.getIsPinned(), l = i.column.getIsSorted(), e = i.column.getIsFiltered(), { openDialog: m } = M(i.table.options.meta?.filterModalId), g = k(
    () => [
      {
        title: e ? "Edit filter" : "Filter column",
        icon: F,
        onClick: () => {
          m({ columnId: i.column.id }), o(!1);
        }
      },
      {
        title: l !== "asc" ? "Sort ascending" : "Clear ascending",
        icon: l !== "asc" ? A : f,
        onClick: () => {
          l !== "asc" && i.table.setSorting([
            { desc: !1, id: i.column.id }
          ]), l === "asc" && i.column.clearSorting(), o(!1);
        }
      },
      {
        title: l !== "desc" ? "Sort descending" : "Clear descending",
        icon: l !== "desc" ? D : f,
        onClick: () => {
          l !== "desc" && i.table.setSorting([{ desc: !0, id: i.column.id }]), l === "desc" && i.column.clearSorting(), o(!1);
        }
      },
      {
        title: n !== "left" ? "Pin left" : "Unpin left",
        icon: n !== "left" ? N : a,
        onClick: () => {
          o(!1), n !== "left" ? i.column.pin("left") : i.column.pin(!1);
        }
      },
      {
        title: n !== "right" ? "Pin right" : "Unpin right",
        icon: n !== "right" ? v : a,
        onClick: () => {
          o(!1), n !== "right" ? i.column.pin("right") : i.column.pin(!1);
        }
      }
    ],
    [e, i.column, i.table, n, l, m]
  );
  return /* @__PURE__ */ S("div", { className: s.headerCell, children: [
    /* @__PURE__ */ c("div", { className: s.columnTitle, children: u }),
    /* @__PURE__ */ c("div", { className: s.columnActions, children: /* @__PURE__ */ c(
      O,
      {
        allowedPlacements: ["bottom", "bottom-end", "bottom-start"],
        variant: "plain",
        actions: g,
        isOpen: t,
        onToggle: d,
        children: /* @__PURE__ */ c("button", { className: s.actionsButton, onClick: p, children: /* @__PURE__ */ c(P, { className: s.actionsIcon }) })
      }
    ) })
  ] });
};
export {
  z as ColumnHeaderCell
};
//# sourceMappingURL=ColumnHeaderCell.js.map