Skip to content

Commit fb0bb46

Browse files
chpy04chpy04
authored
Merge pull request #4115 from Northeastern-Electric-Racing/event-popups
prevent popups from staying open
2 parents 4db880e + d694f3e commit fb0bb46

2 files changed

Lines changed: 42 additions & 7 deletions

File tree

‎src/frontend/src/pages/CalendarPage/CalendarDayCard.tsx‎

Lines changed: 24 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -168,6 +168,10 @@ const CalendarDayCard: React.FC<CalendarDayCardProps> = ({
168168
const [tooltipHovered, setTooltipHovered] = useState(false);
169169
const tooltipKey = `task-${task.taskId}`;
170170
const isLocked = lockedTooltipEventId === tooltipKey;
171+
const tooltipHoveredRef = useRef(false);
172+
tooltipHoveredRef.current = tooltipHovered;
173+
const isLockedRef = useRef(false);
174+
isLockedRef.current = isLocked;
171175
const shouldBeOpen = isLocked || isHovered || tooltipHovered;
172176

173177
return (
@@ -177,8 +181,9 @@ const CalendarDayCard: React.FC<CalendarDayCardProps> = ({
177181
marginRight={0.5}
178182
onMouseEnter={() => setIsHovered(true)}
179183
onMouseLeave={() => {
184+
setTooltipHovered(false);
180185
setTimeout(() => {
181-
if (!isLocked && !tooltipHovered) {
186+
if (!isLockedRef.current && !tooltipHoveredRef.current) {
182187
setIsHovered(false);
183188
}
184189
}, 100);
@@ -299,6 +304,10 @@ const CalendarDayCard: React.FC<CalendarDayCardProps> = ({
299304
event.approved === ConflictStatus.DENIED;
300305
const bgColor = isPending ? getMutedColor(baseColor, 0.35) : baseColor;
301306
const isLocked = lockedTooltipEventId === event.eventId;
307+
const tooltipHoveredRef = useRef(false);
308+
tooltipHoveredRef.current = tooltipHovered;
309+
const isLockedRef = useRef(false);
310+
isLockedRef.current = isLocked;
302311
const shouldBeOpen = isLocked || isHovered || tooltipHovered;
303312

304313
return (
@@ -308,8 +317,9 @@ const CalendarDayCard: React.FC<CalendarDayCardProps> = ({
308317
marginRight={0.5}
309318
onMouseEnter={() => setIsHovered(true)}
310319
onMouseLeave={() => {
320+
setTooltipHovered(false);
311321
setTimeout(() => {
312-
if (!isLocked && !tooltipHovered) {
322+
if (!isLockedRef.current && !tooltipHoveredRef.current) {
313323
setIsHovered(false);
314324
}
315325
}, 100);
@@ -414,6 +424,10 @@ const CalendarDayCard: React.FC<CalendarDayCardProps> = ({
414424
const [isHovered, setIsHovered] = useState(false);
415425
const [tooltipHovered, setTooltipHovered] = useState(false);
416426
const isLocked = lockedTooltipEventId === event.eventId;
427+
const tooltipHoveredRef = useRef(false);
428+
tooltipHoveredRef.current = tooltipHovered;
429+
const isLockedRef = useRef(false);
430+
isLockedRef.current = isLocked;
417431
const shouldBeOpen = isLocked || isHovered || tooltipHovered;
418432

419433
return (
@@ -475,8 +489,9 @@ const CalendarDayCard: React.FC<CalendarDayCardProps> = ({
475489
<Box
476490
onMouseEnter={() => setIsHovered(true)}
477491
onMouseLeave={() => {
492+
setTooltipHovered(false);
478493
setTimeout(() => {
479-
if (!isLocked && !tooltipHovered) {
494+
if (!isLockedRef.current && !tooltipHoveredRef.current) {
480495
setIsHovered(false);
481496
}
482497
}, 100);
@@ -497,6 +512,10 @@ const CalendarDayCard: React.FC<CalendarDayCardProps> = ({
497512
const [tooltipHovered, setTooltipHovered] = useState(false);
498513
const tooltipKey = `task-${task.taskId}`;
499514
const isLocked = lockedTooltipEventId === tooltipKey;
515+
const tooltipHoveredRef = useRef(false);
516+
tooltipHoveredRef.current = tooltipHovered;
517+
const isLockedRef = useRef(false);
518+
isLockedRef.current = isLocked;
500519
const shouldBeOpen = isLocked || isHovered || tooltipHovered;
501520

502521
return (
@@ -547,8 +566,9 @@ const CalendarDayCard: React.FC<CalendarDayCardProps> = ({
547566
<Box
548567
onMouseEnter={() => setIsHovered(true)}
549568
onMouseLeave={() => {
569+
setTooltipHovered(false);
550570
setTimeout(() => {
551-
if (!isLocked && !tooltipHovered) {
571+
if (!isLockedRef.current && !tooltipHoveredRef.current) {
552572
setIsHovered(false);
553573
}
554574
}, 100);

‎src/frontend/src/pages/CalendarPage/CalendarWeekView.tsx‎

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -379,7 +379,11 @@ const CalendarWeekView: React.FC<CalendarWeekViewProps> = ({
379379
const WeekEventBlock = ({ event, layout }: { event: EventInstance; layout: LayoutEvent }) => {
380380
const [blockHovered, setBlockHovered] = useState(false);
381381
const [tooltipHovered, setTooltipHovered] = useState(false);
382+
const tooltipHoveredRef = useRef(false);
383+
tooltipHoveredRef.current = tooltipHovered;
382384
const isLocked = lockedTooltipEventId === event.eventId + event.scheduleSlotId;
385+
const isLockedRef = useRef(false);
386+
isLockedRef.current = isLocked;
383387
const isOpen = isLocked || blockHovered || tooltipHovered;
384388

385389
const baseColor = getEventColor(event);
@@ -442,8 +446,9 @@ const CalendarWeekView: React.FC<CalendarWeekViewProps> = ({
442446
data-testid="week-event-block"
443447
onMouseEnter={() => setBlockHovered(true)}
444448
onMouseLeave={() => {
449+
setTooltipHovered(false);
445450
setTimeout(() => {
446-
if (!isLocked && !tooltipHovered) setBlockHovered(false);
451+
if (!isLockedRef.current && !tooltipHoveredRef.current) setBlockHovered(false);
447452
}, 100);
448453
}}
449454
onClick={(e) => {
@@ -495,7 +500,11 @@ const CalendarWeekView: React.FC<CalendarWeekViewProps> = ({
495500
const AllDayEventBlock = ({ event }: { event: EventInstance }) => {
496501
const [blockHovered, setBlockHovered] = useState(false);
497502
const [tooltipHovered, setTooltipHovered] = useState(false);
503+
const tooltipHoveredRef = useRef(false);
504+
tooltipHoveredRef.current = tooltipHovered;
498505
const isLocked = lockedTooltipEventId === event.eventId + event.scheduleSlotId;
506+
const isLockedRef = useRef(false);
507+
isLockedRef.current = isLocked;
499508
const isOpen = isLocked || blockHovered || tooltipHovered;
500509

501510
const baseColor = getEventColor(event);
@@ -553,8 +562,9 @@ const CalendarWeekView: React.FC<CalendarWeekViewProps> = ({
553562
<Card
554563
onMouseEnter={() => setBlockHovered(true)}
555564
onMouseLeave={() => {
565+
setTooltipHovered(false);
556566
setTimeout(() => {
557-
if (!isLocked && !tooltipHovered) setBlockHovered(false);
567+
if (!isLockedRef.current && !tooltipHoveredRef.current) setBlockHovered(false);
558568
}, 100);
559569
}}
560570
onClick={(e) => {
@@ -583,8 +593,12 @@ const CalendarWeekView: React.FC<CalendarWeekViewProps> = ({
583593
const AllDayTaskBlock = ({ task }: { task: CalendarTask }) => {
584594
const [blockHovered, setBlockHovered] = useState(false);
585595
const [tooltipHovered, setTooltipHovered] = useState(false);
596+
const tooltipHoveredRef = useRef(false);
597+
tooltipHoveredRef.current = tooltipHovered;
586598
const tooltipKey = `task-${task.taskId}`;
587599
const isLocked = lockedTooltipEventId === tooltipKey;
600+
const isLockedRef = useRef(false);
601+
isLockedRef.current = isLocked;
588602
const isOpen = isLocked || blockHovered || tooltipHovered;
589603

590604
return (
@@ -624,8 +638,9 @@ const CalendarWeekView: React.FC<CalendarWeekViewProps> = ({
624638
<Card
625639
onMouseEnter={() => setBlockHovered(true)}
626640
onMouseLeave={() => {
641+
setTooltipHovered(false);
627642
setTimeout(() => {
628-
if (!isLocked && !tooltipHovered) setBlockHovered(false);
643+
if (!isLockedRef.current && !tooltipHoveredRef.current) setBlockHovered(false);
629644
}, 100);
630645
}}
631646
onClick={(e) => {

0 commit comments

Comments
 (0)