diff --git a/src/controls/calendar/EventPopoverCard.tsx b/src/controls/calendar/EventPopoverCard.tsx index 6ad19c5b4..8e6c75b32 100644 --- 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,7 +35,8 @@ export const EventPopoverCard: React.FC = ({ eventCount, }) => { const headerId = useId(); - const { styles, applyEventHouverColorClass , appyDynamicStyles} = useWeekViewStyles(); + const { styles, applyEventHouverColorClass, appyDynamicStyles } = + useWeekViewStyles(); const cardRef = React.useRef(null); const { formatDate } = useUtils(); @@ -43,7 +44,9 @@ export const EventPopoverCard: React.FC = ({ () => (
- {event.title} + + {event.title} + = ({
), - [event] + [event], ); return ( @@ -66,12 +69,14 @@ export const EventPopoverCard: React.FC = ({ 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 ? ( = ({ {cardContent} diff --git a/src/controls/calendar/RenderEventToDayOfMonth.tsx b/src/controls/calendar/RenderEventToDayOfMonth.tsx index 2a3f9aea4..2a99a1fcd 100644 --- 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,7 +52,7 @@ export const RenderEventToDayOfMonth: React.FunctionComponent< onCardHoverChange(false, eventTitle); } }, - [onCardHoverChange] + [onCardHoverChange], ); // Set the target for the popover @@ -60,7 +60,7 @@ export const RenderEventToDayOfMonth: React.FunctionComponent< (el: HTMLDivElement | null) => { positioningRef.current?.setTarget(el); }, - [positioningRef] + [positioningRef], ); // Render the card @@ -74,14 +74,14 @@ 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={{calEvent.title}} onMouseEnter={() => handleMouseEnter(calEvent.title)} onMouseLeave={() => handleMouseLeave(calEvent.title)} @@ -89,7 +89,7 @@ export const RenderEventToDayOfMonth: React.FunctionComponent< ); }, - [handleMouseEnter, handleMouseLeave, applyEventHouverColorClass] + [handleMouseEnter, handleMouseLeave, applyEventHouverColorClass], ); const renderCardWithPopOver = React.useCallback( @@ -109,10 +109,7 @@ export const RenderEventToDayOfMonth: React.FunctionComponent< @@ -120,7 +117,7 @@ export const RenderEventToDayOfMonth: React.FunctionComponent< ); }, - [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 index 8dc212f98..457495296 100644 --- 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 index 4a23cda13..b99ab5f5b 100644 --- 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 | undefined; + theme?: Partial | 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,19 +189,19 @@ 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 = ( - props: React.PropsWithChildren + props: React.PropsWithChildren, ) => { const { theme, themeString, hasTeamsContext } = props; const [FUI9theme, setFUI9theme] = React.useState | undefined>( - undefined + undefined, ); const setTheme = React.useCallback((): Partial => { @@ -215,10 +209,10 @@ export const TestCalendarControl: React.FunctionComponent = ( 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 = ( onMonthChange={(date: Date) => console.log("month", date)} onWeekChange={(date: Date) => console.log("week", date)} onViewChange={(view: string) => console.log("view", view)} - />