From 3e94fe7cdec4326c64ea6dcd9b88073b5d42cdd7 Mon Sep 17 00:00:00 2001 From: "Kilu.He" <108015703+qinluhe@users.noreply.github.com> Date: Fri, 12 Sep 2025 10:06:43 +0800 Subject: [PATCH] chore: fix switch view (#71) * chore: fix switch view * chore: fix the issue of switch database view --- src/components/database/Database.tsx | 18 +++- src/components/database/DatabaseViews.tsx | 92 ++++++------------- .../database/fullcalendar/CustomToolbar.tsx | 2 +- .../database/fullcalendar/FullCalendar.tsx | 40 ++++---- .../fullcalendar/StickyCalendarToolbar.tsx | 6 +- .../fullcalendar/StickyWeekHeader.tsx | 6 +- .../hooks/useCalendarKeyboardShortcuts.ts | 2 +- src/components/database/fullcalendar/index.ts | 2 +- src/components/database/grid/Grid.tsx | 15 +-- src/components/ws/useSync.ts | 2 +- 10 files changed, 79 insertions(+), 106 deletions(-) diff --git a/src/components/database/Database.tsx b/src/components/database/Database.tsx index 3d461bc1..5144edc5 100644 --- a/src/components/database/Database.tsx +++ b/src/components/database/Database.tsx @@ -73,15 +73,25 @@ function Database(props: Database2Props) { const newRowMap: Record = {}; if (!rowIds || !createRowDoc) return; - for (const id of rowIds) { + + const promises = rowIds.map(async (id) => { if (!id) { - continue; + return; } const rowKey = `${doc.guid}_rows_${id}`; + const rowDoc = await createRowDoc(rowKey); - newRowMap[id] = await createRowDoc(rowKey); - } + return { id, rowDoc }; + }); + + const results = await Promise.all(promises); + + results.forEach((result) => { + if (result) { + newRowMap[result.id] = result.rowDoc; + } + }); setRowDocMap(newRowMap); }, [createRowDoc, doc.guid, rowIds]); diff --git a/src/components/database/DatabaseViews.tsx b/src/components/database/DatabaseViews.tsx index 4bb952e5..1e06749d 100644 --- a/src/components/database/DatabaseViews.tsx +++ b/src/components/database/DatabaseViews.tsx @@ -1,4 +1,3 @@ -import { AnimatePresence, motion } from 'framer-motion'; import { Suspense, useCallback, useEffect, useMemo, useState } from 'react'; import { ErrorBoundary } from 'react-error-boundary'; @@ -13,6 +12,7 @@ import { DatabaseTabs } from '@/components/database/components/tabs'; import { Calendar } from '@/components/database/fullcalendar'; import { Grid } from '@/components/database/grid'; import { ElementFallbackRender } from '@/components/error/ElementFallbackRender'; +import { Progress } from '@/components/ui/progress'; import DatabaseConditions from 'src/components/database/components/conditions/DatabaseConditions'; @@ -31,6 +31,7 @@ function DatabaseViews({ }) { const { childViews, viewIds } = useDatabaseViewsSelector(iidIndex, visibleViewIds); + const [isLoading, setIsLoading] = useState(false); const [layout, setLayout] = useState(null); const value = useMemo(() => { return Math.max( @@ -54,6 +55,7 @@ function DatabaseViews({ const observerEvent = () => { setLayout(Number(activeView.get(YjsDatabaseKey.layout)) as DatabaseViewLayout); + setIsLoading(false); }; observerEvent(); @@ -65,61 +67,13 @@ function DatabaseViews({ }; }, [activeView]); - const view = useMemo(() => { - // 使用 viewId 和 layout 的组合作为 key，确保在任一变化时都有动画 - const animationKey = `${layout}-${viewId}`; - - switch (layout) { - case DatabaseViewLayout.Grid: - return ( - - - - ); - case DatabaseViewLayout.Board: - return ( - - - - ); - case DatabaseViewLayout.Calendar: - return ( - - - - ); - } - }, [layout, viewId]); + const handleViewChange = useCallback( + (newViewId: string) => { + setIsLoading(true); + onChangeView(newViewId); + }, + [onChangeView] + ); const skeleton = useMemo(() => { switch (layout) { @@ -134,6 +88,17 @@ function DatabaseViews({ } }, [layout]); + const view = useMemo(() => { + switch (layout) { + case DatabaseViewLayout.Grid: + return ; + case DatabaseViewLayout.Board: + return ; + case DatabaseViewLayout.Calendar: + return ; + } + }, [layout]); + return ( <> -
+
- - - {view} - - + {view} + {isLoading && ( +
+ +
+ )}
diff --git a/src/components/database/fullcalendar/CustomToolbar.tsx b/src/components/database/fullcalendar/CustomToolbar.tsx index bcbf139d..eefa4240 100644 --- a/src/components/database/fullcalendar/CustomToolbar.tsx +++ b/src/components/database/fullcalendar/CustomToolbar.tsx @@ -18,7 +18,7 @@ import { NoDateButton } from './NoDateButton'; import { CalendarViewType } from './types'; interface CustomToolbarProps { - calendar: CalendarApi | null; + calendar?: CalendarApi | null; onViewChange?: (view: CalendarViewType) => void; slideDirection?: 'up' | 'down' | null; emptyEvents?: CalendarEvent[]; diff --git a/src/components/database/fullcalendar/FullCalendar.tsx b/src/components/database/fullcalendar/FullCalendar.tsx index 4a7b69d3..9f67f323 100644 --- a/src/components/database/fullcalendar/FullCalendar.tsx +++ b/src/components/database/fullcalendar/FullCalendar.tsx @@ -103,30 +103,26 @@ function Calendar() { return (
{/* Normal toolbar - always visible */} - {calendarData && ( -
- -
- )} +
+ +
{/* Normal week header - always visible for comparison */} - {calendarData && calendarData.shouldShowWeekHeader && ( - - )} + {/* Calendar content without toolbar */} void; + calendar?: CalendarApi | null; + currentView?: CalendarViewType; + onViewChange?: (view: CalendarViewType) => void; slideDirection?: 'up' | 'down' | null; emptyEvents?: CalendarEvent[]; onDragStart?: (rowId: string) => void; diff --git a/src/components/database/fullcalendar/StickyWeekHeader.tsx b/src/components/database/fullcalendar/StickyWeekHeader.tsx index 097a77f6..19e2ce16 100644 --- a/src/components/database/fullcalendar/StickyWeekHeader.tsx +++ b/src/components/database/fullcalendar/StickyWeekHeader.tsx @@ -19,7 +19,7 @@ interface HeaderCellData { * Props for StickyWeekHeader component */ interface StickyWeekHeaderProps { - headerCells: HeaderCellData[]; + headerCells?: HeaderCellData[]; visible: boolean; scrollLeft?: number; currentView?: CalendarViewType; @@ -59,7 +59,7 @@ export function StickyWeekHeader({ return currentView === CalendarViewType.TIME_GRID_WEEK; }, [currentView]); - if (!visible || headerCells.length === 0) { + if (!visible || headerCells?.length === 0) { return null; } @@ -110,7 +110,7 @@ export function StickyWeekHeader({ )} {/* Date columns */} - {headerCells.map((cell, index) => ( + {headerCells?.map((cell, index) => ( void; onPrev?: () => void; diff --git a/src/components/database/fullcalendar/index.ts b/src/components/database/fullcalendar/index.ts index 0df73c49..44c23475 100644 --- a/src/components/database/fullcalendar/index.ts +++ b/src/components/database/fullcalendar/index.ts @@ -1,4 +1,4 @@ import { lazy } from 'react'; export const Calendar = lazy(() => import('./FullCalendar')); -export * from './event'; \ No newline at end of file +export * from './event'; diff --git a/src/components/database/grid/Grid.tsx b/src/components/database/grid/Grid.tsx index dee4a4e2..260b23fb 100644 --- a/src/components/database/grid/Grid.tsx +++ b/src/components/database/grid/Grid.tsx @@ -1,10 +1,11 @@ +import { useEffect } from 'react'; + import { useDatabaseContext, useDatabaseViewId } from '@/application/database-yjs'; import { useRenderFields } from '@/components/database/components/grid/grid-column'; import GridVirtualizer from '@/components/database/components/grid/grid-table/GridVirtualizer'; import { GridProvider } from '@/components/database/grid/GridProvider'; -import { useEffect } from 'react'; -export function Grid () { +export function Grid() { const { fields } = useRenderFields(); const viewId = useDatabaseViewId(); @@ -18,13 +19,13 @@ export function Grid () { return ( -
- +
+
- ); } diff --git a/src/components/ws/useSync.ts b/src/components/ws/useSync.ts index 56decdb5..cfbb887f 100644 --- a/src/components/ws/useSync.ts +++ b/src/components/ws/useSync.ts @@ -185,7 +185,7 @@ export const useSync = (ws: AppflowyWebSocketType, bc: BroadcastChannelType, eve return existingContext; } - console.log(`Registering sync context for objectId ${context.doc.guid} with collabType ${context.collabType}`); + console.debug(`Registering sync context for objectId ${context.doc.guid} with collabType ${context.collabType}`); context.emit = (message) => { sendMessage(message); postMessage(message);