@pallasoft/ps-table-components 1.28.3 → 1.29.0

package/dist/hooks/use-ps-sticky-head.js

@@ -5,18 +5,17 @@ const react_1 = require("react");
 const ps_table_sticky_config_1 = require("../constants/ps-table-sticky-config");
 const ps_table_scroll_service_1 = require("../services/ps-table-scroll-service");
 const ps_table_sticky_head_service_1 = require("../services/ps-table-sticky-head-service");
-const usePsStickyHead = ({ cardRef, headRef, layoutKey, regionRef, sentinelRef, stickyTop, }) => {
-    const [isStuck, setIsStuck] = (0, react_1.useState)(false);
+const usePsStickyHead = ({ cardRef, contentRef, headRef, layoutKey, regionRef, stickyTop, }) => {
     (0, react_1.useLayoutEffect)(() => {
         const region = regionRef.current;
-        const sentinel = sentinelRef.current;
         const card = cardRef.current;
+        const content = contentRef.current;
         const head = headRef.current;
         const table = head === null ? null : head.parentElement;
         if (stickyTop === undefined ||
             region === null ||
-            sentinel === null ||
             card === null ||
+            content === null ||
             head === null ||
             table === null)
             return;
@@ -24,6 +23,7 @@ const usePsStickyHead = ({ cardRef, headRef, layoutKey, regionRef, sentinelRef,
         const Timeline = window.ScrollTimeline;
         const isDriven = scroller !== null && Timeline !== undefined;
         let animations = [];
+        let measured = null;
         let frame = 0;
         const headTravel = () => Math.max(table.offsetHeight - head.offsetHeight, 0);
         const drive = () => {
@@ -33,10 +33,19 @@ const usePsStickyHead = ({ cardRef, headRef, layoutKey, regionRef, sentinelRef,
                 Number.parseFloat(getComputedStyle(region).top) +
                 region.offsetHeight +
                 ps_table_sticky_config_1.PsTableStickyConfig.cardGapPx;
-            const scrollRange = scroller.scrollHeight - scroller.clientHeight;
+            const inputs = {
+                cardPin: content.getBoundingClientRect().top + scroller.scrollTop - pinnedLine,
+                cardTravel: card.offsetHeight,
+                headPin: table.getBoundingClientRect().top + scroller.scrollTop - pinnedLine,
+                headTravel: headTravel(),
+                scrollRange: scroller.scrollHeight - scroller.clientHeight,
+            };
+            if (ps_table_sticky_head_service_1.PsTableStickyHeadService.sameInputs(measured, inputs))
+                return;
+            measured = inputs;
             const timeline = new Timeline({ axis: 'block', source: scroller });
-            const headFrames = ps_table_sticky_head_service_1.PsTableStickyHeadService.keyframes(table.getBoundingClientRect().top + scroller.scrollTop - pinnedLine, headTravel(), scrollRange);
-            const cardFrames = ps_table_sticky_head_service_1.PsTableStickyHeadService.keyframes(card.getBoundingClientRect().top + scroller.scrollTop - pinnedLine, card.offsetHeight, scrollRange);
+            const headFrames = ps_table_sticky_head_service_1.PsTableStickyHeadService.keyframes(inputs.headPin, inputs.headTravel, inputs.scrollRange);
+            const cardFrames = ps_table_sticky_head_service_1.PsTableStickyHeadService.keyframes(inputs.cardPin, inputs.cardTravel, inputs.scrollRange);
             animations.forEach((animation) => animation.cancel());
             animations = [
                 head.animate(headFrames.map((keyframe) => ({
@@ -44,30 +53,32 @@ const usePsStickyHead = ({ cardRef, headRef, layoutKey, regionRef, sentinelRef,
                     transform: `translateY(${keyframe.shift}px)`,
                 })), { fill: 'both', timeline }),
                 card.animate(cardFrames.map((keyframe) => ({
-                    clipPath: ps_table_sticky_head_service_1.PsTableStickyHeadService.clip(keyframe.shift),
                     offset: keyframe.offset,
+                    transform: `translateY(${keyframe.shift}px)`,
+                })), { fill: 'both', timeline }),
+                content.animate(cardFrames.map((keyframe) => ({
+                    offset: keyframe.offset,
+                    transform: `translateY(${-keyframe.shift}px)`,
                 })), { fill: 'both', timeline }),
             ];
         };
         const follow = () => {
+            frame = 0;
             const pinnedLine = region.getBoundingClientRect().bottom + ps_table_sticky_config_1.PsTableStickyConfig.cardGapPx;
             head.style.transform = `translateY(${ps_table_sticky_head_service_1.PsTableStickyHeadService.offset(pinnedLine, table.getBoundingClientRect().top, table.offsetHeight, head.offsetHeight)}px)`;
-            card.style.clipPath = ps_table_sticky_head_service_1.PsTableStickyHeadService.clip(ps_table_sticky_head_service_1.PsTableStickyHeadService.offset(pinnedLine, card.getBoundingClientRect().top, card.offsetHeight, 0));
-        };
-        const check = () => {
-            frame = 0;
-            setIsStuck(sentinel.getBoundingClientRect().top < region.getBoundingClientRect().top - 1);
-            if (!isDriven)
-                follow();
+            const cut = ps_table_sticky_head_service_1.PsTableStickyHeadService.offset(pinnedLine, content.getBoundingClientRect().top, card.offsetHeight, 0);
+            card.style.transform = `translateY(${cut}px)`;
+            content.style.transform = `translateY(${-cut}px)`;
         };
         const schedule = () => {
             if (frame === 0)
-                frame = window.requestAnimationFrame(check);
+                frame = window.requestAnimationFrame(follow);
         };
         const measure = () => {
             if (isDriven)
                 drive();
-            schedule();
+            else
+                schedule();
         };
         const observer = new ResizeObserver(measure);
         measure();
@@ -75,19 +86,20 @@ const usePsStickyHead = ({ cardRef, headRef, layoutKey, regionRef, sentinelRef,
         observer.observe(card);
         if (scroller !== null)
             Array.from(scroller.children).forEach((child) => observer.observe(child));
-        window.addEventListener('scroll', schedule, { capture: true, passive: true });
         window.addEventListener('resize', measure);
+        if (!isDriven)
+            window.addEventListener('scroll', schedule, { capture: true, passive: true });
         return () => {
             observer.disconnect();
             animations.forEach((animation) => animation.cancel());
             head.style.transform = '';
-            card.style.clipPath = '';
+            card.style.transform = '';
+            content.style.transform = '';
             window.removeEventListener('scroll', schedule, { capture: true });
             window.removeEventListener('resize', measure);
             if (frame !== 0)
                 window.cancelAnimationFrame(frame);
         };
-    }, [cardRef, headRef, layoutKey, regionRef, sentinelRef, stickyTop]);
-    return isStuck;
+    }, [cardRef, contentRef, headRef, layoutKey, regionRef, stickyTop]);
 };
 exports.usePsStickyHead = usePsStickyHead;

package/dist/index.d.ts

@@ -64,3 +64,11 @@ export * from './interfaces/ps-server-rows-result';
 export * from './interfaces/ps-table-cursor-paging';
 export * from './interfaces/ps-table-select-all-matching';
 export * from './services/ps-server-rows-service';
+export * from './components/ps-report-table';
+export * from './components/ps-report-table-skeleton';
+export * from './constants/ps-report-column-align';
+export * from './constants/ps-report-row-kind';
+export * from './constants/ps-report-row-tone';
+export * from './constants/ps-report-table-density';
+export * from './interfaces/ps-report-column';
+export * from './services/ps-report-table-service';

package/dist/index.js

@@ -80,3 +80,11 @@ __exportStar(require("./interfaces/ps-server-rows-result"), exports);
 __exportStar(require("./interfaces/ps-table-cursor-paging"), exports);
 __exportStar(require("./interfaces/ps-table-select-all-matching"), exports);
 __exportStar(require("./services/ps-server-rows-service"), exports);
+__exportStar(require("./components/ps-report-table"), exports);
+__exportStar(require("./components/ps-report-table-skeleton"), exports);
+__exportStar(require("./constants/ps-report-column-align"), exports);
+__exportStar(require("./constants/ps-report-row-kind"), exports);
+__exportStar(require("./constants/ps-report-row-tone"), exports);
+__exportStar(require("./constants/ps-report-table-density"), exports);
+__exportStar(require("./interfaces/ps-report-column"), exports);
+__exportStar(require("./services/ps-report-table-service"), exports);

package/dist/interfaces/ps-report-cell-plan.d.ts

@@ -0,0 +1,6 @@
+import type { PsReportColumn } from './ps-report-column';
+export interface PsReportCellPlan<RowData> {
+    colSpan: number;
+    column: PsReportColumn<RowData>;
+    index: number;
+}

package/dist/interfaces/ps-report-cell-plan.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/interfaces/ps-report-column.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from 'react';
+import type { PsReportColumnAlign } from '../constants/ps-report-column-align';
+export interface PsReportColumn<RowData> {
+    align?: PsReportColumnAlign;
+    id: string;
+    label: ReactNode;
+    maxWidth?: string;
+    minWidth?: string;
+    render: (row: RowData) => ReactNode;
+    width?: string;
+    wrap?: boolean;
+}

package/dist/interfaces/ps-report-column.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/interfaces/ps-sticky-head-refs.d.ts

@@ -1,9 +1,9 @@
 import type { RefObject } from 'react';
 export interface PsStickyHeadRefs {
     cardRef: RefObject<HTMLDivElement | null>;
+    contentRef: RefObject<HTMLDivElement | null>;
     headRef: RefObject<HTMLTableSectionElement | null>;
     layoutKey: string;
     regionRef: RefObject<HTMLDivElement | null>;
-    sentinelRef: RefObject<HTMLDivElement | null>;
     stickyTop?: string;
 }

package/dist/interfaces/ps-table-sticky-head-inputs.d.ts

@@ -0,0 +1,7 @@
+export interface PsTableStickyHeadInputs {
+    cardPin: number;
+    cardTravel: number;
+    headPin: number;
+    headTravel: number;
+    scrollRange: number;
+}

package/dist/interfaces/ps-table-sticky-head-inputs.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/services/ps-report-table-service.d.ts

@@ -0,0 +1,17 @@
+import type { CSSProperties } from 'react';
+import { PsReportColumnAlign } from '../constants/ps-report-column-align';
+import { PsReportRowTone } from '../constants/ps-report-row-tone';
+import { PsReportTableDensity } from '../constants/ps-report-table-density';
+import type { PsReportCellPlan } from '../interfaces/ps-report-cell-plan';
+import type { PsReportColumn } from '../interfaces/ps-report-column';
+export declare class PsReportTableService {
+    static cells<RowData>(columns: PsReportColumn<RowData>[], leadSpan: number): PsReportCellPlan<RowData>[];
+    static span(count: number, leadSpan: number): number;
+    static indent(level: number, density: PsReportTableDensity): CSSProperties;
+    static columnStyle<RowData>(column: PsReportColumn<RowData>): CSSProperties;
+    static levelOf(level: number | undefined): number;
+    static headClass<RowData>(column: PsReportColumn<RowData>, index: number, density: PsReportTableDensity, isHeaderSticky: boolean, isFirstColumnSticky: boolean): string;
+    static headPin(isHeaderSticky: boolean, isPinnedFirst: boolean): string;
+    static cellClass<RowData>(column: PsReportColumn<RowData>, index: number, density: PsReportTableDensity, tone: PsReportRowTone, isFirstColumnSticky: boolean): string;
+    static alignOf<RowData>(column: PsReportColumn<RowData>): PsReportColumnAlign;
+}

package/dist/services/ps-report-table-service.js

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsReportTableService = void 0;
+const ps_report_column_align_1 = require("../constants/ps-report-column-align");
+const ps_report_table_classes_1 = require("../constants/ps-report-table-classes");
+const ps_report_table_config_1 = require("../constants/ps-report-table-config");
+const ps_table_pin_classes_1 = require("../constants/ps-table-pin-classes");
+class PsReportTableService {
+    static cells(columns, leadSpan) {
+        const span = PsReportTableService.span(columns.length, leadSpan);
+        const plan = [{ colSpan: span, column: columns[0], index: 0 }];
+        for (let index = span; index < columns.length; index += 1)
+            plan.push({ colSpan: 1, column: columns[index], index });
+        return plan;
+    }
+    static span(count, leadSpan) {
+        return Math.min(Math.max(leadSpan, 1), count);
+    }
+    static indent(level, density) {
+        const base = ps_report_table_config_1.PsReportTableConfig.baseIndentRem[density];
+        return { paddingLeft: `${base + level * ps_report_table_config_1.PsReportTableConfig.indentRem}rem` };
+    }
+    static columnStyle(column) {
+        return {
+            maxWidth: column.maxWidth,
+            minWidth: column.minWidth,
+            width: column.width,
+        };
+    }
+    static levelOf(level) {
+        return level !== undefined && level > 0 ? level : 0;
+    }
+    static headClass(column, index, density, isHeaderSticky, isFirstColumnSticky) {
+        const isPinnedFirst = index === 0 && isFirstColumnSticky;
+        const pin = PsReportTableService.headPin(isHeaderSticky, isPinnedFirst);
+        return [
+            ps_report_table_classes_1.PsReportTableClasses.headCell[density],
+            ps_report_table_classes_1.PsReportTableClasses.align[PsReportTableService.alignOf(column)],
+            pin,
+            isPinnedFirst ? ps_table_pin_classes_1.PsTablePinClasses.edge : '',
+        ]
+            .filter((name) => name !== '')
+            .join(' ');
+    }
+    static headPin(isHeaderSticky, isPinnedFirst) {
+        if (isHeaderSticky && isPinnedFirst)
+            return ps_report_table_classes_1.PsReportTableClasses.stickyFirstHead;
+        if (isHeaderSticky)
+            return ps_report_table_classes_1.PsReportTableClasses.stickyHead;
+        if (isPinnedFirst)
+            return ps_report_table_classes_1.PsReportTableClasses.stickyFirstBody;
+        return '';
+    }
+    static cellClass(column, index, density, tone, isFirstColumnSticky) {
+        const isPinnedFirst = index === 0 && isFirstColumnSticky;
+        return [
+            ps_report_table_classes_1.PsReportTableClasses.cell[density],
+            ps_report_table_classes_1.PsReportTableClasses.align[PsReportTableService.alignOf(column)],
+            ps_report_table_classes_1.PsReportTableClasses.tone[tone],
+            column.wrap === true ? '' : ps_report_table_classes_1.PsReportTableClasses.nowrap,
+            column.maxWidth !== undefined ? ps_report_table_classes_1.PsReportTableClasses.truncate : '',
+            isPinnedFirst ? `${ps_report_table_classes_1.PsReportTableClasses.stickyFirstBody} ${ps_table_pin_classes_1.PsTablePinClasses.edge}` : '',
+        ]
+            .filter((name) => name !== '')
+            .join(' ');
+    }
+    static alignOf(column) {
+        return column.align !== undefined ? column.align : ps_report_column_align_1.PsReportColumnAlign.left;
+    }
+}
+exports.PsReportTableService = PsReportTableService;

package/dist/services/ps-table-sticky-head-service.d.ts

@@ -1,7 +1,9 @@
+import type { PsTableStickyHeadInputs } from '../interfaces/ps-table-sticky-head-inputs';
 import type { PsTableStickyHeadKeyframe } from '../interfaces/ps-table-sticky-head-keyframe';
 export declare class PsTableStickyHeadService {
     static offset(pinnedBottom: number, tableTop: number, tableHeight: number, headHeight: number): number;
+    static sameInputs(previous: PsTableStickyHeadInputs | null, next: PsTableStickyHeadInputs): boolean;
     static keyframes(pinScroll: number, maxShift: number, scrollRange: number): PsTableStickyHeadKeyframe[];
-    static clip(shift: number): string;
+    private static close;
     private static stops;
 }

package/dist/services/ps-table-sticky-head-service.js

@@ -6,6 +6,15 @@ class PsTableStickyHeadService {
     static offset(pinnedBottom, tableTop, tableHeight, headHeight) {
         return Math.min(Math.max(pinnedBottom - tableTop, 0), Math.max(tableHeight - headHeight, 0));
     }
+    static sameInputs(previous, next) {
+        if (previous === null)
+            return false;
+        return (PsTableStickyHeadService.close(previous.headPin, next.headPin) &&
+            PsTableStickyHeadService.close(previous.headTravel, next.headTravel) &&
+            PsTableStickyHeadService.close(previous.cardPin, next.cardPin) &&
+            PsTableStickyHeadService.close(previous.cardTravel, next.cardTravel) &&
+            PsTableStickyHeadService.close(previous.scrollRange, next.scrollRange));
+    }
     static keyframes(pinScroll, maxShift, scrollRange) {
         if (scrollRange <= 0)
             return [];
@@ -15,9 +24,8 @@ class PsTableStickyHeadService {
             shift: shiftAt(scroll),
         }));
     }
-    static clip(shift) {
-        const radius = ps_table_sticky_config_1.PsTableStickyConfig.cardRadius;
-        return `inset(${shift}px 0 0 0 round ${radius} ${radius} 0 0)`;
+    static close(first, second) {
+        return Math.abs(first - second) <= ps_table_sticky_config_1.PsTableStickyConfig.inputTolerancePx;
     }
     static stops(scrolls, scrollRange) {
         const inside = scrolls.filter((scroll) => scroll >= 0 && scroll <= scrollRange);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@pallasoft/ps-table-components",
-	"version": "1.28.3",
+	"version": "1.29.0",
 	"private": false,
 	"main": "./dist/index.js",
 	"module": "./dist/esm/index.js",