fix(sns): stabilize jump date popover month

This commit is contained in:
aits2026
2026-03-06 15:34:58 +08:00
parent e92983dd80
commit 02aefcf155

View File

@@ -45,6 +45,7 @@ export const SnsFilterPanel: React.FC<SnsFilterPanelProps> = ({
contactsCountProgress contactsCountProgress
}) => { }) => {
const [showJumpPopover, setShowJumpPopover] = useState(false) const [showJumpPopover, setShowJumpPopover] = useState(false)
const [jumpPopoverDate, setJumpPopoverDate] = useState<Date>(jumpTargetDate || new Date())
const jumpCalendarWrapRef = useRef<HTMLDivElement | null>(null) const jumpCalendarWrapRef = useRef<HTMLDivElement | null>(null)
useEffect(() => { useEffect(() => {
@@ -58,6 +59,11 @@ export const SnsFilterPanel: React.FC<SnsFilterPanelProps> = ({
return () => document.removeEventListener('mousedown', handleClickOutside) return () => document.removeEventListener('mousedown', handleClickOutside)
}, [showJumpPopover]) }, [showJumpPopover])
useEffect(() => {
if (showJumpPopover) return
setJumpPopoverDate(jumpTargetDate || new Date())
}, [jumpTargetDate, showJumpPopover])
const filteredContacts = contacts.filter(c => const filteredContacts = contacts.filter(c =>
(c.displayName || '').toLowerCase().includes(contactSearch.toLowerCase()) || (c.displayName || '').toLowerCase().includes(contactSearch.toLowerCase()) ||
c.username.toLowerCase().includes(contactSearch.toLowerCase()) c.username.toLowerCase().includes(contactSearch.toLowerCase())
@@ -131,7 +137,12 @@ export const SnsFilterPanel: React.FC<SnsFilterPanelProps> = ({
<div className="jump-calendar-anchor" ref={jumpCalendarWrapRef}> <div className="jump-calendar-anchor" ref={jumpCalendarWrapRef}>
<button <button
className={`date-picker-trigger ${jumpTargetDate ? 'active' : ''}`} className={`date-picker-trigger ${jumpTargetDate ? 'active' : ''}`}
onClick={() => setShowJumpPopover(prev => !prev)} onClick={() => {
if (!showJumpPopover) {
setJumpPopoverDate(jumpTargetDate || new Date())
}
setShowJumpPopover(prev => !prev)
}}
> >
<span className="date-text"> <span className="date-text">
{jumpTargetDate {jumpTargetDate
@@ -152,9 +163,12 @@ export const SnsFilterPanel: React.FC<SnsFilterPanelProps> = ({
</button> </button>
<JumpToDatePopover <JumpToDatePopover
isOpen={showJumpPopover} isOpen={showJumpPopover}
currentDate={jumpTargetDate || new Date()} currentDate={jumpPopoverDate}
onClose={() => setShowJumpPopover(false)} onClose={() => setShowJumpPopover(false)}
onSelect={(date) => setJumpTargetDate(date)} onSelect={(date) => {
setJumpPopoverDate(date)
setJumpTargetDate(date)
}}
/> />
</div> </div>
</div> </div>