mirror of
https://github.com/hicccc77/WeFlow.git
synced 2026-03-24 23:06:51 +00:00
fix(chat): render date popover in top portal for stable layering
This commit is contained in:
@@ -672,7 +672,6 @@ function ChatPage(props: ChatPageProps) {
|
|||||||
}, [])
|
}, [])
|
||||||
|
|
||||||
const updateJumpPopoverPosition = useCallback(() => {
|
const updateJumpPopoverPosition = useCallback(() => {
|
||||||
if (!standaloneSessionWindow) return
|
|
||||||
const anchor = jumpCalendarWrapRef.current
|
const anchor = jumpCalendarWrapRef.current
|
||||||
if (!anchor) return
|
if (!anchor) return
|
||||||
|
|
||||||
@@ -694,7 +693,7 @@ function ChatPage(props: ChatPageProps) {
|
|||||||
if (prev.top === top && prev.left === left) return prev
|
if (prev.top === top && prev.left === left) return prev
|
||||||
return { top, left }
|
return { top, left }
|
||||||
})
|
})
|
||||||
}, [standaloneSessionWindow])
|
}, [])
|
||||||
|
|
||||||
const handleToggleJumpPopover = useCallback(() => {
|
const handleToggleJumpPopover = useCallback(() => {
|
||||||
if (!currentSessionId) return
|
if (!currentSessionId) return
|
||||||
@@ -703,15 +702,11 @@ function ChatPage(props: ChatPageProps) {
|
|||||||
return
|
return
|
||||||
}
|
}
|
||||||
setJumpPopoverDate(resolveCurrentViewDate())
|
setJumpPopoverDate(resolveCurrentViewDate())
|
||||||
if (standaloneSessionWindow) {
|
updateJumpPopoverPosition()
|
||||||
updateJumpPopoverPosition()
|
|
||||||
}
|
|
||||||
setShowJumpPopover(true)
|
setShowJumpPopover(true)
|
||||||
if (standaloneSessionWindow) {
|
requestAnimationFrame(() => updateJumpPopoverPosition())
|
||||||
requestAnimationFrame(() => updateJumpPopoverPosition())
|
|
||||||
}
|
|
||||||
void loadJumpCalendarData(currentSessionId)
|
void loadJumpCalendarData(currentSessionId)
|
||||||
}, [currentSessionId, loadJumpCalendarData, resolveCurrentViewDate, showJumpPopover, standaloneSessionWindow, updateJumpPopoverPosition])
|
}, [currentSessionId, loadJumpCalendarData, resolveCurrentViewDate, showJumpPopover, updateJumpPopoverPosition])
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const unsubscribe = onExportSessionStatus((payload) => {
|
const unsubscribe = onExportSessionStatus((payload) => {
|
||||||
@@ -2775,17 +2770,17 @@ function ChatPage(props: ChatPageProps) {
|
|||||||
const target = event.target as Node | null
|
const target = event.target as Node | null
|
||||||
if (!target) return
|
if (!target) return
|
||||||
if (jumpCalendarWrapRef.current?.contains(target)) return
|
if (jumpCalendarWrapRef.current?.contains(target)) return
|
||||||
if (standaloneSessionWindow && jumpPopoverPortalRef.current?.contains(target)) return
|
if (jumpPopoverPortalRef.current?.contains(target)) return
|
||||||
setShowJumpPopover(false)
|
setShowJumpPopover(false)
|
||||||
}
|
}
|
||||||
document.addEventListener('mousedown', handleGlobalPointerDown)
|
document.addEventListener('mousedown', handleGlobalPointerDown)
|
||||||
return () => {
|
return () => {
|
||||||
document.removeEventListener('mousedown', handleGlobalPointerDown)
|
document.removeEventListener('mousedown', handleGlobalPointerDown)
|
||||||
}
|
}
|
||||||
}, [showJumpPopover, standaloneSessionWindow])
|
}, [showJumpPopover])
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!showJumpPopover || !standaloneSessionWindow) return
|
if (!showJumpPopover) return
|
||||||
const syncPosition = () => {
|
const syncPosition = () => {
|
||||||
requestAnimationFrame(() => updateJumpPopoverPosition())
|
requestAnimationFrame(() => updateJumpPopoverPosition())
|
||||||
}
|
}
|
||||||
@@ -2797,7 +2792,7 @@ function ChatPage(props: ChatPageProps) {
|
|||||||
window.removeEventListener('resize', syncPosition)
|
window.removeEventListener('resize', syncPosition)
|
||||||
window.removeEventListener('scroll', syncPosition, true)
|
window.removeEventListener('scroll', syncPosition, true)
|
||||||
}
|
}
|
||||||
}, [showJumpPopover, standaloneSessionWindow, updateJumpPopoverPosition])
|
}, [showJumpPopover, updateJumpPopoverPosition])
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setShowJumpPopover(false)
|
setShowJumpPopover(false)
|
||||||
@@ -3834,21 +3829,8 @@ function ChatPage(props: ChatPageProps) {
|
|||||||
>
|
>
|
||||||
<Calendar size={18} />
|
<Calendar size={18} />
|
||||||
</button>
|
</button>
|
||||||
{!standaloneSessionWindow && (
|
|
||||||
<JumpToDatePopover
|
|
||||||
isOpen={showJumpPopover}
|
|
||||||
currentDate={jumpPopoverDate}
|
|
||||||
onClose={() => setShowJumpPopover(false)}
|
|
||||||
onSelect={handleJumpDateSelect}
|
|
||||||
messageDates={messageDates}
|
|
||||||
hasLoadedMessageDates={hasLoadedMessageDates}
|
|
||||||
messageDateCounts={messageDateCounts}
|
|
||||||
loadingDates={loadingDates}
|
|
||||||
loadingDateCounts={loadingDateCounts}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
{standaloneSessionWindow && showJumpPopover && createPortal(
|
{showJumpPopover && createPortal(
|
||||||
<div
|
<div
|
||||||
ref={jumpPopoverPortalRef}
|
ref={jumpPopoverPortalRef}
|
||||||
style={{
|
style={{
|
||||||
|
|||||||
Reference in New Issue
Block a user