diff --git a/frontend/src/components/MainContent.tsx b/frontend/src/components/MainContent.tsx index 5259962..d0a0fb2 100644 --- a/frontend/src/components/MainContent.tsx +++ b/frontend/src/components/MainContent.tsx @@ -20,7 +20,7 @@ import { Save, Undo } from '@mui/icons-material'; -import { DataGrid, type GridPaginationModel, type GridRowModel } from '@mui/x-data-grid'; +import { DataGrid, useGridApiRef, type GridPaginationModel, type GridRowModel } from '@mui/x-data-grid'; import { useAppStore } from '../store/useAppStore'; import { SchemaService } from '../services/api'; import TransferContent from './TransferContent'; @@ -33,6 +33,7 @@ import type { MainNotification } from '../types/database'; const MainContent: React.FC = () => { const { activeTable, activeDatabase, darkMode, dbTab, setDbTab } = useAppStore(); + const apiRef = useGridApiRef(); const [paginationModel, setPaginationModel] = useState({ page: 0, @@ -217,6 +218,21 @@ const MainContent: React.FC = () => { return () => window.removeEventListener('mouseup', handleMouseUp); }, [handleMouseUp]); + useEffect(() => { + const api = apiRef.current; + if (!api || !api.subscribeEvent) return; + + const unsubs = [ + api.subscribeEvent('cellFocusIn', (params) => { + setCellFocus({ id: params.id, field: params.field }); + }), + api.subscribeEvent('cellMouseDown', handleCellMouseDown), + api.subscribeEvent('cellMouseOver', handleCellMouseEnter) + ]; + + return () => unsubs.forEach(unsub => unsub?.()); + }, [apiRef, activeTable, handleCellMouseDown, handleCellMouseEnter]); + useEffect(() => { setPaginationModel({ page: 0, pageSize: 100 }); setPendingChanges({}); @@ -335,6 +351,7 @@ const MainContent: React.FC = () => { ) : ( ({ ...row, ...(pendingChanges[row[primaryKey]] || {}) @@ -351,9 +368,6 @@ const MainContent: React.FC = () => { onProcessRowUpdateError={(error) => { console.error('Row update error:', error); }} - onCellFocusIn={(params) => setCellFocus({ id: params.id, field: params.field })} - onCellMouseDown={handleCellMouseDown} - onCellMouseEnter={handleCellMouseEnter} slotProps={{ root: { onPaste: handlePaste,