Merge pull request #2021 from heesungjang/fix-typo-calendar-enable-on-hover-prop

joaojmendes · web-flow · commit 05b5f8f363dd · 2025-07-13T16:32:21.000+01:00
fix-typo-enableOnHover
diff --git a/src/controls/calendar/EventPopoverCard.tsx b/src/controls/calendar/EventPopoverCard.tsx
@@ -13,8 +13,8 @@ import {
 
 import { EventDetailsPopover } from "./EventDetailsPopover";
 import { IEvent } from "./models/IEvents";
-import { Stack } from  "@nuvemerudita/react-controls";
-import { useUtils } from  "./hooks/useUtils";
+import { Stack } from "@nuvemerudita/react-controls";
+import { useUtils } from "./hooks/useUtils";
 import { useWeekViewStyles } from "./hooks/useWeekViewStyles";
 
 interface EventPopoverCardProps {
@@ -35,15 +35,18 @@ export const EventPopoverCard: React.FC<EventPopoverCardProps> = ({
   eventCount,
 }) => {
   const headerId = useId();
-  const { styles, applyEventHouverColorClass , appyDynamicStyles} = useWeekViewStyles();
+  const { styles, applyEventHouverColorClass, appyDynamicStyles } =
+    useWeekViewStyles();
   const cardRef = React.useRef<HTMLDivElement>(null);
   const { formatDate } = useUtils();
 
   const cardContent = React.useMemo(
     () => (
       <div>
         <Stack columnGap={4} verticalAlign="center">
-          <Caption1Strong className={styles.eventTitle}>{event.title}</Caption1Strong>
+          <Caption1Strong className={styles.eventTitle}>
+            {event.title}
+          </Caption1Strong>
           <Stack
             columnGap={4}
             horizontal
@@ -57,7 +60,7 @@ export const EventPopoverCard: React.FC<EventPopoverCardProps> = ({
         </Stack>
       </div>
     ),
-    [event]
+    [event],
   );
 
   return (
@@ -66,12 +69,14 @@ export const EventPopoverCard: React.FC<EventPopoverCardProps> = ({
       key={event.id}
       className={mergeClasses(
         styles.eventCard,
-        applyEventHouverColorClass(colors.backgroundColor, colors.backgroundColor),
-        appyDynamicStyles(eventIndex, eventCount, rowHeight, spanSlots)
+        applyEventHouverColorClass(
+          colors.backgroundColor,
+          colors.backgroundColor,
+        ),
+        appyDynamicStyles(eventIndex, eventCount, rowHeight, spanSlots),
       )}
-
     >
-      {event.enableOnHouver ? (
+      {event.enableOnHover ? (
         <Popover
           withArrow
           mouseLeaveDelay={50}
@@ -82,9 +87,7 @@ export const EventPopoverCard: React.FC<EventPopoverCardProps> = ({
           <PopoverTrigger>{cardContent}</PopoverTrigger>
           <PopoverSurface
             aria-labelledby={headerId}
-            className={mergeClasses(
-              styles.popoverContent,
-            )}
+            className={mergeClasses(styles.popoverContent)}
           >
             <EventDetailsPopover event={event} />
           </PopoverSurface>
diff --git a/src/controls/calendar/RenderEventToDayOfMonth.tsx b/src/controls/calendar/RenderEventToDayOfMonth.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import * as React from 'react';
+import * as React from "react";
 
 import {
   Caption1,
@@ -10,15 +10,15 @@ import {
   PositioningImperativeRef,
   mergeClasses,
   useId,
-} from '@fluentui/react-components';
-import { endOfDay, isWithinInterval, startOfDay } from 'date-fns';
+} from "@fluentui/react-components";
+import { endOfDay, isWithinInterval, startOfDay } from "date-fns";
 
-import { Card } from '@nuvemerudita/react-controls';
-import { EventDetailsPopover } from './EventDetailsPopover';
-import { IEvent } from './models/IEvents';
-import { IEventColors } from './models/IEventColors';
-import { useCalendarStyles } from './hooks/useCalendarStyles';
-import { useUtils } from './hooks/useUtils';
+import { Card } from "@nuvemerudita/react-controls";
+import { EventDetailsPopover } from "./EventDetailsPopover";
+import { IEvent } from "./models/IEvents";
+import { IEventColors } from "./models/IEventColors";
+import { useCalendarStyles } from "./hooks/useCalendarStyles";
+import { useUtils } from "./hooks/useUtils";
 
 export interface IRenderEventToDayOfMonthProps {
   events: IEvent[];
@@ -43,7 +43,7 @@ export const RenderEventToDayOfMonth: React.FunctionComponent<
         onCardHoverChange(true, eventTitle);
       }
     },
-    [onCardHoverChange]
+    [onCardHoverChange],
   );
 
   const handleMouseLeave = React.useCallback(
@@ -52,15 +52,15 @@ export const RenderEventToDayOfMonth: React.FunctionComponent<
         onCardHoverChange(false, eventTitle);
       }
     },
-    [onCardHoverChange]
+    [onCardHoverChange],
   );
 
   // Set the target for the popover
   const buttonRef = React.useCallback(
     (el: HTMLDivElement | null) => {
       positioningRef.current?.setTarget(el);
     },
-    [positioningRef]
+    [positioningRef],
   );
 
   // Render the card
@@ -74,22 +74,22 @@ export const RenderEventToDayOfMonth: React.FunctionComponent<
               styles.eventCard,
               applyEventHouverColorClass(
                 colors.backgroundColor,
-                colors.backgroundColor
-              )
+                colors.backgroundColor,
+              ),
             )}
             paddingTop="4px"
             paddingBottom="4px"
             paddingLeft="8px"
             paddingRight="8px"
-            marginTop={index === 0 ? '0px' : '5px'}
+            marginTop={index === 0 ? "0px" : "5px"}
             cardHeader={<Caption1>{calEvent.title}</Caption1>}
             onMouseEnter={() => handleMouseEnter(calEvent.title)}
             onMouseLeave={() => handleMouseLeave(calEvent.title)}
           />
         </div>
       );
     },
-    [handleMouseEnter, handleMouseLeave, applyEventHouverColorClass]
+    [handleMouseEnter, handleMouseLeave, applyEventHouverColorClass],
   );
 
   const renderCardWithPopOver = React.useCallback(
@@ -109,18 +109,15 @@ export const RenderEventToDayOfMonth: React.FunctionComponent<
             </PopoverTrigger>
             <PopoverSurface
               aria-labelledby={headerId}
-              className={mergeClasses(
-                styles.popoverContent,
-
-              )}
+              className={mergeClasses(styles.popoverContent)}
             >
               <EventDetailsPopover event={calEvent} />
             </PopoverSurface>
           </Popover>
         </>
       );
     },
-    [renderCard]
+    [renderCard],
   );
 
   if (!events || !events?.length) return <> </>;
@@ -150,11 +147,11 @@ export const RenderEventToDayOfMonth: React.FunctionComponent<
             return React.cloneElement(customRender as React.ReactElement, {
               className: mergeClasses(
                 (customRender.props as any).className,
-                styles.eventCard
+                styles.eventCard,
               ),
             });
           }
-          return calEvent.enableOnHouver
+          return calEvent.enableOnHover
             ? renderCardWithPopOver(calEvent, index, colors)
             : renderCard(index, calEvent, colors);
         })}
diff --git a/src/controls/calendar/models/IEvents.ts b/src/controls/calendar/models/IEvents.ts
@@ -19,7 +19,7 @@ export interface IEvent {
   onRenderInMonthView?: (event: IEvent) => JSX.Element;
   onRenderInWeekView?: (event: IEvent) => JSX.Element;
   onRenderInDayView?: (event: IEvent) => JSX.Element;
-  enableOnHouver?: boolean;
+  enableOnHover?: boolean;
   imageUrl?: string;
   webLink?: string;
   color?: AvatarNamedColor;
diff --git a/src/webparts/controlsTest/components/TestCalendarControl.tsx b/src/webparts/controlsTest/components/TestCalendarControl.tsx
@@ -17,16 +17,14 @@ import { EAppHostName } from "../../../controls/userPicker/constants/EAppHostnam
 import { createV9Theme } from "@fluentui/react-migration-v8-v9";
 
 export interface ICalendarProps {
-
   hasTeamsContext: boolean;
   themeString: string;
-  theme?: Partial<Theme>  | undefined;
+  theme?: Partial<Theme> | undefined;
   context: BaseComponentContext;
   title: string;
   appHostName: EAppHostName;
 }
 
-
 export const mockEvents: IEvent[] = [
   {
     id: "1",
@@ -41,7 +39,7 @@ export const mockEvents: IEvent[] = [
     type: "Work",
     isOnlineMeeting: true,
     description: "Daily team standup to discuss tasks and blockers.",
-    enableOnHouver: true,
+    enableOnHover: true,
     imageUrl: "https://via.placeholder.com/150",
     color: "blue",
     webLink: "https://outlook.com",
@@ -56,7 +54,7 @@ export const mockEvents: IEvent[] = [
     importance: "High",
     sensitivity: "Confidential",
     description: "Final deadline for the Q1 marketing campaign submission.",
-    enableOnHouver: false,
+    enableOnHover: false,
     color: "red",
     webLink: "https://outlook.com",
   },
@@ -73,18 +71,16 @@ export const mockEvents: IEvent[] = [
         name: "John Doe",
         email: "joao.j.mendes@nuvemerudita.com",
         id: "567891",
-
       },
       {
         name: "Jane Smith",
         email: "geral@nuvemerudita.com",
         id: "987654",
-
       },
     ],
     importance: "Medium",
     description: "Quarterly review meeting with ABC Corp.",
-    enableOnHouver: true,
+    enableOnHover: true,
     color: "gold",
     webLink: "https://outlook.com",
   },
@@ -96,7 +92,7 @@ export const mockEvents: IEvent[] = [
     category: "Break",
     importance: "Low",
     description: "Time to relax and enjoy some food!",
-    enableOnHouver: false,
+    enableOnHover: false,
     color: "cornflower",
     webLink: null,
   },
@@ -110,7 +106,7 @@ export const mockEvents: IEvent[] = [
     importance: "High",
     sensitivity: "Public",
     description: "Quarterly town hall with leadership updates.",
-    enableOnHouver: true,
+    enableOnHover: true,
     imageUrl: "https://via.placeholder.com/150",
     webLink: "https://outlook.com",
     color: "seafoam",
@@ -128,18 +124,16 @@ export const mockEvents: IEvent[] = [
         name: "Alex Johnson",
         email: "alex.johnson@example.com",
         id: "23456",
-
       },
       {
         name: "Maria Lee",
         email: "maria.lee@example.com",
         id: "78900",
-
       },
     ],
     importance: "Medium",
     description: "Weekly update call with the dev team.",
-    enableOnHouver: true,
+    enableOnHover: true,
     color: "peach",
     webLink: "https://outlook.com",
   },
@@ -152,7 +146,7 @@ export const mockEvents: IEvent[] = [
     location: "Downtown Convention Center",
     importance: "High",
     description: "Meet with top industry leaders and innovators.",
-    enableOnHouver: true,
+    enableOnHover: true,
     imageUrl: "https://via.placeholder.com/150",
     webLink: "https://outlook.com",
     color: "purple",
@@ -167,7 +161,7 @@ export const mockEvents: IEvent[] = [
     importance: "High",
     sensitivity: "Confidential",
     description: "Review of financial reports and upcoming projections.",
-    enableOnHouver: true,
+    enableOnHover: true,
     imageUrl: "https://via.placeholder.com/150",
     webLink: "https://outlook.com",
     color: "steel",
@@ -181,7 +175,7 @@ export const mockEvents: IEvent[] = [
     location: "Manager’s Office",
     importance: "Medium",
     description: "Weekly check-in with direct manager.",
-    enableOnHouver: true,
+    enableOnHover: true,
     color: "lavender",
     webLink: "https://outlook.com",
   },
@@ -195,30 +189,30 @@ export const mockEvents: IEvent[] = [
     location: "Webex",
     importance: "Medium",
     description: "An in-depth look at AI trends for the upcoming year.",
-    enableOnHouver: true,
+    enableOnHover: true,
     imageUrl: "https://via.placeholder.com/150",
     color: "magenta",
   },
 ];
 
 export const TestCalendarControl: React.FunctionComponent<ICalendarProps> = (
-  props: React.PropsWithChildren<ICalendarProps>
+  props: React.PropsWithChildren<ICalendarProps>,
 ) => {
   const { theme, themeString, hasTeamsContext } = props;
 
   const [FUI9theme, setFUI9theme] = React.useState<Partial<Theme> | undefined>(
-    undefined
+    undefined,
   );
 
   const setTheme = React.useCallback((): Partial<Theme> => {
     if (hasTeamsContext) {
       return themeString === "dark"
         ? teamsDarkTheme
         : themeString === "contrast"
-        ? teamsHighContrastTheme
-        : {
-            ...teamsLightTheme,
-          };
+          ? teamsHighContrastTheme
+          : {
+              ...teamsLightTheme,
+            };
     } else {
       const nthme = createV9Theme(theme as never);
 
@@ -244,7 +238,6 @@ export const TestCalendarControl: React.FunctionComponent<ICalendarProps> = (
             onMonthChange={(date: Date) => console.log("month", date)}
             onWeekChange={(date: Date) => console.log("week", date)}
             onViewChange={(view: string) => console.log("view", view)}
-
           />
         </FluentProvider>
       </IdPrefixProvider>
