@1771technologies/lytenyte-pro
Version:
Blazingly fast headless React data grid with 100s of features.
31 lines (30 loc) • 1.5 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { useColumnItemContext } from "./context.js";
import { forwardRef, useCallback, useMemo } from "react";
import { useGrid } from "../grid-provider/use-grid.js";
import { useColumnsFromContext } from "./use-columns-from-context.js";
import { useSlot } from "@1771technologies/lytenyte-core/yinternal";
export const VisibilityCheckbox = forwardRef(function VisibilityCheckbox({ as, ...props }, forwarded) {
const { item } = useColumnItemContext();
const grid = useGrid();
const base = grid.state.columnBase.useValue();
const columns = useColumnsFromContext(item);
const [isVisible, isIndeterminate] = useMemo(() => {
const allVisible = columns.every((c) => !(c.hide ?? base.hide));
const someVisible = columns.some((c) => !(c.hide ?? base.hide));
return [allVisible, !allVisible && someVisible];
}, [base.hide, columns]);
const toggle = useCallback((s) => {
const next = s ?? isVisible;
grid.api.columnUpdate(Object.fromEntries(columns.map((c) => [c.id, { hide: next }])));
}, [columns, grid.api, isVisible]);
const rendered = useSlot({
props: [props],
ref: forwarded,
slot: as ?? (_jsx("input", { type: "checkbox", checked: isVisible, "aria-label": "visibility toggle", onChange: () => {
toggle();
} })),
state: { visible: isVisible, indeterminate: isIndeterminate, toggle },
});
return rendered;
});