@tap-payments/os-micro-frontend-shared 0.1.96-test.1 → 0.1.96-test.2

package/build/components/VirtualTables/SheetViewVirtualTable/components/SheetViewTableLoading.d.ts

@@ -7,7 +7,10 @@ interface ISheetViewTableLoadingProps {
     isLoading?: boolean;
     rowsCount?: number;
     isPinned?: boolean;
+    tableType?: string;
+    containerHeight?: number;
+    isCompact?: boolean;
 }
-declare function SheetViewTableLoading({ columns, isLoaded, animationType, isLoading, rowsCount, isPinned, }: ISheetViewTableLoadingProps): import("react/jsx-runtime").JSX.Element;
+declare function SheetViewTableLoading({ columns, isLoaded, animationType, isLoading, rowsCount, isPinned, tableType, containerHeight, isCompact, }: ISheetViewTableLoadingProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof SheetViewTableLoading>;
 export default _default;

package/build/components/VirtualTables/SheetViewVirtualTable/components/SheetViewTableLoading.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { memo } from 'react';
 import { styled } from '@mui/material/styles';
 import uniqueId from 'lodash/uniqueId';
-import { calculateMaxAllowedRows } from '../../../../utils/index.js';
+import { calculateSheetViewMaxRows, getSheetViewRowHeight } from '../../../../utils/index.js';
 import SheetViewTableRowLoading from './SheetViewTableRowLoading';
 const Wrapper = styled('section')(({ isLoaded = false, isPinned = false }) => ({
     overflow: 'hidden',
@@ -11,9 +11,11 @@ const Wrapper = styled('section')(({ isLoaded = false, isPinned = false }) => ({
     filter: isLoaded && !isPinned ? 'blur(8px)' : 'none',
     marginTop: isLoaded && !isPinned ? '1rem' : '0',
 }));
-function SheetViewTableLoading({ columns, isLoaded = false, animationType, isLoading = false, rowsCount, isPinned = false, }) {
-    let maxAllowedRows = rowsCount || calculateMaxAllowedRows(isLoaded, isLoading);
-    maxAllowedRows = rowsCount || Math.max(maxAllowedRows, 25);
+function SheetViewTableLoading({ columns, isLoaded = false, animationType, isLoading = false, rowsCount, isPinned = false, tableType = 'default', containerHeight, isCompact = false, }) {
+    const availableHeight = containerHeight || window.innerHeight * 0.8;
+    const rowHeight = getSheetViewRowHeight();
+    const maxAllowedRows = calculateSheetViewMaxRows(availableHeight, rowHeight);
+    console.log({ maxAllowedRows, availableHeight, rowHeight, tableType, isCompact, containerHeight });
     return (_jsx(Wrapper, Object.assign({ isLoaded: isLoaded, isPinned: isPinned, "data-testid": "SheetViewTableLoading" }, { children: [...Array(maxAllowedRows)].map((_, index) => (_jsx(SheetViewTableRowLoading, { columns: columns, animationType: animationType, rowIndex: index, useTableBackground: !isPinned }, `i-${uniqueId('SheetViewTableLoadingRow_')}`))) })));
 }
 export default memo(SheetViewTableLoading);

package/build/utils/table.d.ts

@@ -6,4 +6,9 @@ export declare const getColumnWidthPercentage: (widthInPx: number, options?: {
 export declare const getCellWidth: ({ table, cellID, tableMode }: TableCellWidthProps) => string;
 export declare const calculateMaxAllowedRows: (isLoaded: boolean, isLoading: boolean) => number;
 export declare const isHeightNotFullyFilledByRows: (totalRows: number) => boolean;
+export declare const calculateSheetViewHeight: (totalRows: number, rowHeight?: number) => number;
+export declare const calculateSheetViewMaxRows: (availableHeight: number, rowHeight?: number) => number;
+export declare const isSheetViewScrollable: (totalRows: number, containerHeight: number, rowHeight?: number) => boolean;
+export declare const getSheetViewRowHeight: () => number;
+export declare const calculateSheetViewOptimalHeight: (totalRows: number, tableType: string, maxHeightPercentage?: number) => number;
 export declare const isTableDefaultMode: (tableMode?: TableMode) => boolean;

package/build/utils/table.js

@@ -73,6 +73,38 @@ export const isHeightNotFullyFilledByRows = (totalRows) => {
     const allowedRows = maxRowsThatFit();
     return totalRows < allowedRows + 1;
 };
+export const calculateSheetViewHeight = (totalRows, rowHeight = TABLE_CONTENT_ROW_HEIGHT) => {
+    const headerHeight = 56;
+    const padding = 16;
+    const calculatedHeight = headerHeight + totalRows * rowHeight + padding;
+    const minHeight = 200;
+    const maxHeight = window.innerHeight * 0.8;
+    return Math.max(minHeight, Math.min(calculatedHeight, maxHeight));
+};
+export const calculateSheetViewMaxRows = (availableHeight, rowHeight = TABLE_CONTENT_ROW_HEIGHT) => {
+    const headerHeight = 56;
+    const padding = 16;
+    const availableContentHeight = availableHeight - headerHeight - padding;
+    return Math.floor(availableContentHeight / rowHeight);
+};
+export const isSheetViewScrollable = (totalRows, containerHeight, rowHeight = TABLE_CONTENT_ROW_HEIGHT) => {
+    const headerHeight = 56;
+    const padding = 16;
+    const contentHeight = headerHeight + totalRows * rowHeight + padding;
+    return contentHeight > containerHeight;
+};
+export const getSheetViewRowHeight = () => {
+    const baseRowHeight = TABLE_CONTENT_ROW_HEIGHT;
+    return baseRowHeight * 0.8;
+};
+export const calculateSheetViewOptimalHeight = (totalRows, tableType, maxHeightPercentage = 0.8) => {
+    const rowHeight = getSheetViewRowHeight();
+    const headerHeight = 56;
+    const padding = 16;
+    const calculatedHeight = headerHeight + totalRows * rowHeight + padding;
+    const maxHeight = window.innerHeight * maxHeightPercentage;
+    return Math.min(calculatedHeight, maxHeight);
+};
 export const isTableDefaultMode = (tableMode = 'default') => {
     return tableMode === 'default';
 };

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@tap-payments/os-micro-frontend-shared",
   "description": "Shared components and utilities for Tap Payments micro frontends",
-  "version": "0.1.96-test.1",
-  "testVersion": 1,
+  "version": "0.1.96-test.2",
+  "testVersion": 2,
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",