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