@1771technologies/lytenyte-pro
Version:
Blazingly fast headless React data grid with 100s of features.
87 lines (86 loc) • 4.2 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { memo, useMemo } from "react";
import { CellStyleRow } from "./cell-style-row.js";
import { isTopRect } from "./is-top-rect.js";
import { isCenterRect } from "./is-center-rect.js";
import { isBottomRect } from "./is-bottom-rect.js";
import { useRoot } from "@1771technologies/lytenyte-core/internal";
import { useProRoot } from "../root/context.js";
export const CellSelectionTop = memo(function CellSelectionTop() {
const { source } = useRoot();
const { cellSelectionSplits: allRects, cellSelectionAdditiveRects: additive, cellSelectionIsDeselect, } = useProRoot();
const topCount = source.useTopCount();
const topRects = useMemo(() => {
return allRects.filter((rect) => isTopRect(topCount, rect));
}, [allRects, topCount]);
const isDeselect = cellSelectionIsDeselect.current;
const additiveRects = useMemo(() => {
if (!additive)
return [];
return additive.filter((rect) => isTopRect(topCount, rect));
}, [additive, topCount]);
return (_jsxs("div", { role: "presentation", style: {
width: "100%",
height: 0,
display: "grid",
gridTemplateRows: "0px",
gridTemplateColumns: "0px",
}, children: [topRects.map((rect, i) => {
return _jsx(CellStyleRow, { rect: rect, isRowPinnedTop: true }, i);
}), additiveRects.map((rect) => {
return _jsx(CellStyleRow, { rect: rect, isDeselect: isDeselect }, rect.columnStart);
})] }));
});
export const CellSelectionCenter = memo(function CellSelectionCenter() {
const { source } = useRoot();
const { cellSelectionSplits: allRects, cellSelectionAdditiveRects: additive, cellSelectionIsDeselect, } = useProRoot();
const topCount = source.useTopCount();
const rowCount = source.useRowCount();
const botCount = source.useBottomCount();
const centerRects = useMemo(() => {
return allRects.filter((rect) => isCenterRect(rowCount, botCount, topCount, rect));
}, [allRects, botCount, rowCount, topCount]);
const isDeselect = cellSelectionIsDeselect.current;
const additiveRects = useMemo(() => {
if (!additive)
return [];
return additive.filter((rect) => isCenterRect(rowCount, botCount, topCount, rect));
}, [additive, botCount, rowCount, topCount]);
return (_jsxs("div", { role: "presentation", style: {
width: "100%",
height: 0,
display: "grid",
gridTemplateRows: "0px",
gridTemplateColumns: "0px",
}, children: [centerRects.map((rect, i) => {
return _jsx(CellStyleRow, { rect: rect }, i);
}), additiveRects.map((rect) => {
return _jsx(CellStyleRow, { rect: rect, isDeselect: isDeselect }, rect.columnStart);
})] }));
});
export const CellSelectionBottom = memo(function CellSelectionBottom() {
const { source } = useRoot();
const { cellSelectionSplits: allRects, cellSelectionAdditiveRects: additive, cellSelectionIsDeselect, } = useProRoot();
const rowCount = source.useRowCount();
const botCount = source.useBottomCount();
const bottomRects = useMemo(() => {
return allRects.filter((rect) => isBottomRect(rowCount, botCount, rect));
}, [allRects, botCount, rowCount]);
const isDeselect = cellSelectionIsDeselect.current;
const additiveRects = useMemo(() => {
if (!additive)
return [];
return additive.filter((rect) => isBottomRect(rowCount, botCount, rect));
}, [additive, botCount, rowCount]);
return (_jsxs("div", { role: "presentation", style: {
width: "100%",
height: 0,
display: "grid",
gridTemplateRows: "0px",
gridTemplateColumns: "0px",
}, children: [bottomRects.map((rect, i) => {
return _jsx(CellStyleRow, { rect: rect, isRowPinnedBottom: true }, i);
}), additiveRects.map((rect) => {
return _jsx(CellStyleRow, { rect: rect, isDeselect: isDeselect }, rect.columnStart);
})] }));
});