@1771technologies/lytenyte-pro
Version:
Blazingly fast headless React data grid with 100s of features.
35 lines (34 loc) • 1.32 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { useMemo } from "react";
import { useSlot } from "../hooks/use-slot/index.js";
import { useEvent } from "@1771technologies/lytenyte-core/internal";
export function SelectAll({ api, slot, }) {
const s = api.useSelectionState();
const selected = useMemo(() => {
const selected = s.kind === "isolated" ? s.selected && s.exceptions.size === 0 : s.selected && s.children.size === 0;
return selected;
}, [s]);
const indeterminate = useMemo(() => {
if (s.kind === "isolated")
return !!s.exceptions.size;
return Boolean(s.children.size);
}, [s]);
const toggle = useEvent((b) => {
if (b != null)
return api.rowSelect({ selected: "all", deselect: !b });
api.rowSelect({ selected: "all", deselect: selected });
});
const rendered = useSlot({
slot: slot ?? (_jsx("input", { "aria-label": "Toggle the selection for all the rows in the grid.", ref: (x) => {
if (!x)
return;
x.indeterminate = indeterminate;
}, type: "checkbox", checked: selected, onChange: () => toggle() })),
state: {
selected,
indeterminate,
toggle,
},
});
return rendered;
}