= ({ selectedTool }) => {
const [isDragging, setIsDragging] = useState(false);
const [isMobile, setIsMobile] = useState(false);
- const { loadRecentFiles, handleRemoveFile, storeFile, convertToFile } = useFileManager();
-
- // Wrapper for storeFile that generates UUID
- const storeFileWithId = useCallback(async (file: File) => {
- const fileId = createFileId(); // Generate UUID for storage
- return await storeFile(file, fileId);
- }, [storeFile]);
+ const { loadRecentFiles, handleRemoveFile, convertToFile } = useFileManager();
// File management handlers
const isFileSupported = useCallback((fileName: string) => {
diff --git a/frontend/src/components/fileEditor/FileEditor.tsx b/frontend/src/components/fileEditor/FileEditor.tsx
index bf95d9796..8f71f59b0 100644
--- a/frontend/src/components/fileEditor/FileEditor.tsx
+++ b/frontend/src/components/fileEditor/FileEditor.tsx
@@ -1,42 +1,28 @@
-import React, { useState, useCallback, useRef, useEffect, useMemo } from 'react';
+import React, { useState, useCallback, useRef, useMemo } from 'react';
import {
Text, Center, Box, Notification, LoadingOverlay, Stack, Group, Portal
} from '@mantine/core';
import { Dropzone } from '@mantine/dropzone';
-import { useTranslation } from 'react-i18next';
-import UploadFileIcon from '@mui/icons-material/UploadFile';
-import { useFileSelection, useFileState, useFileManagement, useFileActions } from '../../contexts/FileContext';
+import { useFileSelection, useFileState, useFileManagement } from '../../contexts/FileContext';
import { useNavigationActions } from '../../contexts/NavigationContext';
-import { FileOperation } from '../../types/fileContext';
-import { fileStorage } from '../../services/fileStorage';
-import { generateThumbnailForFile } from '../../utils/thumbnailUtils';
import { zipFileService } from '../../services/zipFileService';
import { detectFileExtension } from '../../utils/fileUtils';
-import styles from './FileEditor.module.css';
import FileEditorThumbnail from './FileEditorThumbnail';
import FilePickerModal from '../shared/FilePickerModal';
import SkeletonLoader from '../shared/SkeletonLoader';
-import { FileId } from '../../types/file';
-
+import { FileId, StirlingFile } from '../../types/fileContext';
interface FileEditorProps {
- onOpenPageEditor?: (file: File) => void;
- onMergeFiles?: (files: File[]) => void;
+ onOpenPageEditor?: () => void;
+ onMergeFiles?: (files: StirlingFile[]) => void;
toolMode?: boolean;
- showUpload?: boolean;
- showBulkActions?: boolean;
supportedExtensions?: string[];
}
const FileEditor = ({
- onOpenPageEditor,
- onMergeFiles,
toolMode = false,
- showUpload = true,
- showBulkActions = true,
supportedExtensions = ["pdf"]
}: FileEditorProps) => {
- const { t } = useTranslation();
// Utility function to check if a file extension is supported
const isFileSupported = useCallback((fileName: string): boolean => {
@@ -49,13 +35,10 @@ const FileEditor = ({
const { addFiles, removeFiles, reorderFiles } = useFileManagement();
// Extract needed values from state (memoized to prevent infinite loops)
- const activeFiles = useMemo(() => selectors.getFiles(), [selectors.getFilesSignature()]);
- const activeFileRecords = useMemo(() => selectors.getFileRecords(), [selectors.getFilesSignature()]);
+ const activeStirlingFileStubs = useMemo(() => selectors.getStirlingFileStubs(), [selectors.getFilesSignature()]);
const selectedFileIds = state.ui.selectedFileIds;
- const isProcessing = state.ui.isProcessing;
- // Get the real context actions
- const { actions } = useFileActions();
+ // Get navigation actions
const { actions: navActions } = useNavigationActions();
// Get file selection context
@@ -92,10 +75,10 @@ const FileEditor = ({
const contextSelectedIdsRef = useRef
([]);
contextSelectedIdsRef.current = contextSelectedIds;
- // Use activeFileRecords directly - no conversion needed
+ // Use activeStirlingFileStubs directly - no conversion needed
const localSelectedIds = contextSelectedIds;
- // Helper to convert FileRecord to FileThumbnail format
+ // Helper to convert StirlingFileStub to FileThumbnail format
const recordToFileItem = useCallback((record: any) => {
const file = selectors.getFile(record.id);
if (!file) return null;
@@ -161,29 +144,9 @@ const FileEditor = ({
if (extractionResult.success) {
allExtractedFiles.push(...extractionResult.extractedFiles);
- // Record ZIP extraction operation
- const operationId = `zip-extract-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
- const operation: FileOperation = {
- id: operationId,
- type: 'convert',
- timestamp: Date.now(),
- fileIds: extractionResult.extractedFiles.map(f => f.name) as FileId[] /* FIX ME: This doesn't seem right */,
- status: 'pending',
- metadata: {
- originalFileName: file.name,
- outputFileNames: extractionResult.extractedFiles.map(f => f.name),
- fileSize: file.size,
- parameters: {
- extractionType: 'zip',
- extractedCount: extractionResult.extractedCount,
- totalFiles: extractionResult.totalFiles
- }
+ if (extractionResult.errors.length > 0) {
+ errors.push(...extractionResult.errors);
}
- };
-
- if (extractionResult.errors.length > 0) {
- errors.push(...extractionResult.errors);
- }
} else {
errors.push(`Failed to extract ZIP file "${file.name}": ${extractionResult.errors.join(', ')}`);
}
@@ -213,25 +176,6 @@ const FileEditor = ({
// Process all extracted files
if (allExtractedFiles.length > 0) {
- // Record upload operations for PDF files
- for (const file of allExtractedFiles) {
- const operationId = `upload-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
- const operation: FileOperation = {
- id: operationId,
- type: 'upload',
- timestamp: Date.now(),
- fileIds: [file.name as FileId /* This doesn't seem right */],
- status: 'pending',
- metadata: {
- originalFileName: file.name,
- fileSize: file.size,
- parameters: {
- uploadMethod: 'drag-drop'
- }
- }
- };
- }
-
// Add files to context (they will be processed automatically)
await addFiles(allExtractedFiles);
setStatus(`Added ${allExtractedFiles.length} files`);
@@ -252,27 +196,10 @@ const FileEditor = ({
}
}, [addFiles]);
- const selectAll = useCallback(() => {
- setSelectedFiles(activeFileRecords.map(r => r.id)); // Use FileRecord IDs directly
- }, [activeFileRecords, setSelectedFiles]);
-
- const deselectAll = useCallback(() => setSelectedFiles([]), [setSelectedFiles]);
-
- const closeAllFiles = useCallback(() => {
- if (activeFileRecords.length === 0) return;
-
- // Remove all files from context but keep in storage
- const allFileIds = activeFileRecords.map(record => record.id);
- removeFiles(allFileIds, false); // false = keep in storage
-
- // Clear selections
- setSelectedFiles([]);
- }, [activeFileRecords, removeFiles, setSelectedFiles]);
-
const toggleFile = useCallback((fileId: FileId) => {
const currentSelectedIds = contextSelectedIdsRef.current;
- const targetRecord = activeFileRecords.find(r => r.id === fileId);
+ const targetRecord = activeStirlingFileStubs.find(r => r.id === fileId);
if (!targetRecord) return;
const contextFileId = fileId; // No need to create a new ID
@@ -302,21 +229,12 @@ const FileEditor = ({
// Update context (this automatically updates tool selection since they use the same action)
setSelectedFiles(newSelection);
- }, [setSelectedFiles, toolMode, setStatus, activeFileRecords]);
+ }, [setSelectedFiles, toolMode, setStatus, activeStirlingFileStubs]);
- const toggleSelectionMode = useCallback(() => {
- setSelectionMode(prev => {
- const newMode = !prev;
- if (!newMode) {
- setSelectedFiles([]);
- }
- return newMode;
- });
- }, [setSelectedFiles]);
// File reordering handler for drag and drop
const handleReorderFiles = useCallback((sourceFileId: FileId, targetFileId: FileId, selectedFileIds: FileId[]) => {
- const currentIds = activeFileRecords.map(r => r.id);
+ const currentIds = activeStirlingFileStubs.map(r => r.id);
// Find indices
const sourceIndex = currentIds.findIndex(id => id === sourceFileId);
@@ -368,71 +286,34 @@ const FileEditor = ({
// Update status
const moveCount = filesToMove.length;
setStatus(`${moveCount > 1 ? `${moveCount} files` : 'File'} reordered`);
- }, [activeFileRecords, reorderFiles, setStatus]);
+ }, [activeStirlingFileStubs, reorderFiles, setStatus]);
// File operations using context
const handleDeleteFile = useCallback((fileId: FileId) => {
- const record = activeFileRecords.find(r => r.id === fileId);
+ const record = activeStirlingFileStubs.find(r => r.id === fileId);
const file = record ? selectors.getFile(record.id) : null;
if (record && file) {
- // Record close operation
- const fileName = file.name;
- const contextFileId = record.id;
- const operationId = `close-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
- const operation: FileOperation = {
- id: operationId,
- type: 'remove',
- timestamp: Date.now(),
- fileIds: [fileName as FileId /* FIX ME: This doesn't seem right */],
- status: 'pending',
- metadata: {
- originalFileName: fileName,
- fileSize: record.size,
- parameters: {
- action: 'close',
- reason: 'user_request'
- }
- }
- };
-
// Remove file from context but keep in storage (close, don't delete)
+ const contextFileId = record.id;
removeFiles([contextFileId], false);
// Remove from context selections
const currentSelected = selectedFileIds.filter(id => id !== contextFileId);
setSelectedFiles(currentSelected);
}
- }, [activeFileRecords, selectors, removeFiles, setSelectedFiles, selectedFileIds]);
+ }, [activeStirlingFileStubs, selectors, removeFiles, setSelectedFiles, selectedFileIds]);
const handleViewFile = useCallback((fileId: FileId) => {
- const record = activeFileRecords.find(r => r.id === fileId);
+ const record = activeStirlingFileStubs.find(r => r.id === fileId);
if (record) {
// Set the file as selected in context and switch to viewer for preview
setSelectedFiles([fileId]);
navActions.setWorkbench('viewer');
}
- }, [activeFileRecords, setSelectedFiles, navActions.setWorkbench]);
-
- const handleMergeFromHere = useCallback((fileId: FileId) => {
- const startIndex = activeFileRecords.findIndex(r => r.id === fileId);
- if (startIndex === -1) return;
-
- const recordsToMerge = activeFileRecords.slice(startIndex);
- const filesToMerge = recordsToMerge.map(r => selectors.getFile(r.id)).filter(Boolean) as File[];
- if (onMergeFiles) {
- onMergeFiles(filesToMerge);
- }
- }, [activeFileRecords, selectors, onMergeFiles]);
-
- const handleSplitFile = useCallback((fileId: FileId) => {
- const file = selectors.getFile(fileId);
- if (file && onOpenPageEditor) {
- onOpenPageEditor(file);
- }
- }, [selectors, onOpenPageEditor]);
+ }, [activeStirlingFileStubs, setSelectedFiles, navActions.setWorkbench]);
const handleLoadFromStorage = useCallback(async (selectedFiles: File[]) => {
if (selectedFiles.length === 0) return;
@@ -467,7 +348,7 @@ const FileEditor = ({
- {activeFileRecords.length === 0 && !zipExtractionProgress.isExtracting ? (
+ {activeStirlingFileStubs.length === 0 && !zipExtractionProgress.isExtracting ? (
📁
@@ -475,7 +356,7 @@ const FileEditor = ({
Upload PDF files, ZIP archives, or load from storage to get started
- ) : activeFileRecords.length === 0 && zipExtractionProgress.isExtracting ? (
+ ) : activeStirlingFileStubs.length === 0 && zipExtractionProgress.isExtracting ? (
@@ -522,7 +403,7 @@ const FileEditor = ({
pointerEvents: 'auto'
}}
>
- {activeFileRecords.map((record, index) => {
+ {activeStirlingFileStubs.map((record, index) => {
const fileItem = recordToFileItem(record);
if (!fileItem) return null;
@@ -531,7 +412,7 @@ const FileEditor = ({
key={record.id}
file={fileItem}
index={index}
- totalFiles={activeFileRecords.length}
+ totalFiles={activeStirlingFileStubs.length}
selectedFiles={localSelectedIds}
selectionMode={selectionMode}
onToggleFile={toggleFile}
diff --git a/frontend/src/components/fileEditor/FileEditorThumbnail.tsx b/frontend/src/components/fileEditor/FileEditorThumbnail.tsx
index e82483898..7e7370785 100644
--- a/frontend/src/components/fileEditor/FileEditorThumbnail.tsx
+++ b/frontend/src/components/fileEditor/FileEditorThumbnail.tsx
@@ -44,7 +44,6 @@ const FileEditorThumbnail = ({
selectedFiles,
onToggleFile,
onDeleteFile,
- onViewFile,
onSetStatus,
onReorderFiles,
onDownloadFile,
@@ -61,8 +60,8 @@ const FileEditorThumbnail = ({
// Resolve the actual File object for pin/unpin operations
const actualFile = useMemo(() => {
- return activeFiles.find((f: File) => f.name === file.name && f.size === file.size);
- }, [activeFiles, file.name, file.size]);
+ return activeFiles.find(f => f.fileId === file.id);
+ }, [activeFiles, file.id]);
const isPinned = actualFile ? isFilePinned(actualFile) : false;
const downloadSelectedFile = useCallback(() => {
diff --git a/frontend/src/components/fileManager/FileDetails.tsx b/frontend/src/components/fileManager/FileDetails.tsx
index dcd460644..b1e7e93e3 100644
--- a/frontend/src/components/fileManager/FileDetails.tsx
+++ b/frontend/src/components/fileManager/FileDetails.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
import { Stack, Button, Box } from '@mantine/core';
import { useTranslation } from 'react-i18next';
import { useIndexedDBThumbnail } from '../../hooks/useIndexedDBThumbnail';
@@ -11,27 +11,26 @@ interface FileDetailsProps {
compact?: boolean;
}
-const FileDetails: React.FC = ({
+const FileDetails: React.FC = ({
compact = false
}) => {
const { selectedFiles, onOpenFiles, modalHeight } = useFileManagerContext();
const { t } = useTranslation();
const [currentFileIndex, setCurrentFileIndex] = useState(0);
const [isAnimating, setIsAnimating] = useState(false);
-
+
// Get the currently displayed file
const currentFile = selectedFiles.length > 0 ? selectedFiles[currentFileIndex] : null;
const hasSelection = selectedFiles.length > 0;
- const hasMultipleFiles = selectedFiles.length > 1;
// Use IndexedDB hook for the current file
const { thumbnail: currentThumbnail } = useIndexedDBThumbnail(currentFile);
-
+
// Get thumbnail for current file
const getCurrentThumbnail = () => {
return currentThumbnail;
};
-
+
const handlePrevious = () => {
if (isAnimating) return;
setIsAnimating(true);
@@ -40,7 +39,7 @@ const FileDetails: React.FC = ({
setIsAnimating(false);
}, 150);
};
-
+
const handleNext = () => {
if (isAnimating) return;
setIsAnimating(true);
@@ -49,14 +48,14 @@ const FileDetails: React.FC = ({
setIsAnimating(false);
}, 150);
};
-
+
// Reset index when selection changes
React.useEffect(() => {
if (currentFileIndex >= selectedFiles.length) {
setCurrentFileIndex(0);
}
}, [selectedFiles.length, currentFileIndex]);
-
+
if (compact) {
return (
= ({
onNext={handleNext}
/>
-
+
{/* Section 2: File Details */}
-
-
);
};
-export default MobileLayout;
\ No newline at end of file
+export default MobileLayout;
diff --git a/frontend/src/components/history/FileOperationHistory.tsx b/frontend/src/components/history/FileOperationHistory.tsx
deleted file mode 100644
index c4c5de0f8..000000000
--- a/frontend/src/components/history/FileOperationHistory.tsx
+++ /dev/null
@@ -1,181 +0,0 @@
-import React from 'react';
-import {
- Stack,
- Paper,
- Text,
- Badge,
- Group,
- Collapse,
- Box,
- ScrollArea,
- Code,
- Divider
-} from '@mantine/core';
-// FileContext no longer needed - these were stub functions anyway
-import { FileOperation, FileOperationHistory as FileOperationHistoryType } from '../../types/fileContext';
-import { PageOperation } from '../../types/pageEditor';
-import { FileId } from '../../types/file';
-
-interface FileOperationHistoryProps {
- fileId: FileId;
- showOnlyApplied?: boolean;
- maxHeight?: number;
-}
-
-const FileOperationHistory: React.FC = ({
- fileId,
- showOnlyApplied = false,
- maxHeight = 400
-}) => {
- // These were stub functions in the old context - replace with empty stubs
- const getFileHistory = (fileId: FileId) => ({ operations: [], createdAt: Date.now(), lastModified: Date.now() });
- const getAppliedOperations = (fileId: FileId) => [];
-
- const history = getFileHistory(fileId);
- const allOperations = showOnlyApplied ? getAppliedOperations(fileId) : history?.operations || [];
- const operations = allOperations.filter((op: any) => 'fileIds' in op) as FileOperation[];
-
- const formatTimestamp = (timestamp: number) => {
- return new Date(timestamp).toLocaleString();
- };
-
- const getOperationIcon = (type: string) => {
- switch (type) {
- case 'split': return '✂️';
- case 'merge': return '🔗';
- case 'compress': return '🗜️';
- case 'rotate': return '🔄';
- case 'delete': return '🗑️';
- case 'move': return '↕️';
- case 'insert': return '📄';
- case 'upload': return '⬆️';
- case 'add': return '➕';
- case 'remove': return '➖';
- case 'replace': return '🔄';
- case 'convert': return '🔄';
- default: return '⚙️';
- }
- };
-
- const getStatusColor = (status: string) => {
- switch (status) {
- case 'applied': return 'green';
- case 'failed': return 'red';
- case 'pending': return 'yellow';
- default: return 'gray';
- }
- };
-
- const renderOperationDetails = (operation: FileOperation) => {
- if ('metadata' in operation && operation.metadata) {
- const { metadata } = operation;
- return (
-
- {metadata.parameters && (
-
- Parameters: {JSON.stringify(metadata.parameters, null, 2)}
-
- )}
- {metadata.originalFileName && (
-
- Original file: {metadata.originalFileName}
-
- )}
- {metadata.outputFileNames && (
-
- Output files: {metadata.outputFileNames.join(', ')}
-
- )}
- {metadata.fileSize && (
-
- File size: {(metadata.fileSize / 1024 / 1024).toFixed(2)} MB
-
- )}
- {metadata.pageCount && (
-
- Pages: {metadata.pageCount}
-
- )}
- {metadata.error && (
-
- Error: {metadata.error}
-
- )}
-
- );
- }
- return null;
- };
-
- if (!history || operations.length === 0) {
- return (
-
-
- {showOnlyApplied ? 'No applied operations found' : 'No operation history available'}
-
-
- );
- }
-
- return (
-
-
-
- {showOnlyApplied ? 'Applied Operations' : 'Operation History'}
-
-
- {operations.length} operations
-
-
-
-
-
- {operations.map((operation, index) => (
-
-
-
-
- {getOperationIcon(operation.type)}
-
-
-
- {operation.type.charAt(0).toUpperCase() + operation.type.slice(1)}
-
-
- {formatTimestamp(operation.timestamp)}
-
-
-
-
-
- {operation.status}
-
-
-
- {renderOperationDetails(operation)}
-
- {index < operations.length - 1 && }
-
- ))}
-
-
-
- {history && (
-
-
- Created: {formatTimestamp(history.createdAt)}
-
-
- Last modified: {formatTimestamp(history.lastModified)}
-
-
- )}
-
- );
-};
-
-export default FileOperationHistory;
diff --git a/frontend/src/components/layout/Workbench.tsx b/frontend/src/components/layout/Workbench.tsx
index 02dabea06..d3fad72c4 100644
--- a/frontend/src/components/layout/Workbench.tsx
+++ b/frontend/src/components/layout/Workbench.tsx
@@ -1,6 +1,4 @@
-import React from 'react';
import { Box } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
import { useRainbowThemeContext } from '../shared/RainbowThemeProvider';
import { useToolWorkflow } from '../../contexts/ToolWorkflowContext';
import { useFileHandler } from '../../hooks/useFileHandler';
@@ -19,7 +17,6 @@ import Footer from '../shared/Footer';
// No props needed - component uses contexts directly
export default function Workbench() {
- const { t } = useTranslation();
const { isRainbowMode } = useRainbowThemeContext();
// Use context-based hooks to eliminate all prop drilling
@@ -78,11 +75,9 @@ export default function Workbench() {
return (
{
+ onOpenPageEditor: () => {
setCurrentView("pageEditor");
},
onMergeFiles: (filesToMerge) => {
diff --git a/frontend/src/components/pageEditor/DragDropGrid.tsx b/frontend/src/components/pageEditor/DragDropGrid.tsx
index da1b1658f..715929567 100644
--- a/frontend/src/components/pageEditor/DragDropGrid.tsx
+++ b/frontend/src/components/pageEditor/DragDropGrid.tsx
@@ -1,8 +1,6 @@
import React, { useRef, useEffect, useState, useCallback } from 'react';
import { Box } from '@mantine/core';
import { useVirtualizer } from '@tanstack/react-virtual';
-import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
-import styles from './PageEditor.module.css';
import { GRID_CONSTANTS } from './constants';
interface DragDropItem {
@@ -22,65 +20,60 @@ interface DragDropGridProps {
const DragDropGrid = ({
items,
- selectedItems,
- selectionMode,
- isAnimating,
- onReorderPages,
renderItem,
- renderSplitMarker,
}: DragDropGridProps) => {
const itemRefs = useRef>(new Map());
const containerRef = useRef(null);
-
+
// Responsive grid configuration
const [itemsPerRow, setItemsPerRow] = useState(4);
const OVERSCAN = items.length > 1000 ? GRID_CONSTANTS.OVERSCAN_LARGE : GRID_CONSTANTS.OVERSCAN_SMALL;
-
+
// Calculate items per row based on container width
const calculateItemsPerRow = useCallback(() => {
if (!containerRef.current) return 4; // Default fallback
-
+
const containerWidth = containerRef.current.offsetWidth;
if (containerWidth === 0) return 4; // Container not measured yet
-
+
// Convert rem to pixels for calculation
const remToPx = parseFloat(getComputedStyle(document.documentElement).fontSize);
const ITEM_WIDTH = parseFloat(GRID_CONSTANTS.ITEM_WIDTH) * remToPx;
const ITEM_GAP = parseFloat(GRID_CONSTANTS.ITEM_GAP) * remToPx;
-
+
// Calculate how many items fit: (width - gap) / (itemWidth + gap)
const availableWidth = containerWidth - ITEM_GAP; // Account for first gap
const itemWithGap = ITEM_WIDTH + ITEM_GAP;
const calculated = Math.floor(availableWidth / itemWithGap);
-
+
return Math.max(1, calculated); // At least 1 item per row
}, []);
-
+
// Update items per row when container resizes
useEffect(() => {
const updateLayout = () => {
const newItemsPerRow = calculateItemsPerRow();
setItemsPerRow(newItemsPerRow);
};
-
+
// Initial calculation
updateLayout();
-
+
// Listen for window resize
window.addEventListener('resize', updateLayout);
-
+
// Use ResizeObserver for container size changes
const resizeObserver = new ResizeObserver(updateLayout);
if (containerRef.current) {
resizeObserver.observe(containerRef.current);
}
-
+
return () => {
window.removeEventListener('resize', updateLayout);
resizeObserver.disconnect();
};
}, [calculateItemsPerRow]);
-
+
// Virtualization with react-virtual library
const rowVirtualizer = useVirtualizer({
count: Math.ceil(items.length / itemsPerRow),
@@ -92,8 +85,6 @@ const DragDropGrid = ({
overscan: OVERSCAN,
});
-
-
// Calculate optimal width for centering
const remToPx = parseFloat(getComputedStyle(document.documentElement).fontSize);
const itemWidth = parseFloat(GRID_CONSTANTS.ITEM_WIDTH) * remToPx;
@@ -101,9 +92,9 @@ const DragDropGrid = ({
const gridWidth = itemsPerRow * itemWidth + (itemsPerRow - 1) * itemGap;
return (
- ({
const startIndex = virtualRow.index * itemsPerRow;
const endIndex = Math.min(startIndex + itemsPerRow, items.length);
const rowItems = items.slice(startIndex, endIndex);
-
+
return (
({
);
})}
-
+