Skip to content

Commit 05b5f8f

Browse files
joaojmendesjoaojmendes
authored
Merge pull request #2021 from heesungjang/fix-typo-calendar-enable-on-hover-prop
fix-typo-enableOnHover
2 parents 42887cf + ec3cd04 commit 05b5f8f

File tree

4 files changed

+53
-60
lines changed

4 files changed

+53
-60
lines changed

‎src/controls/calendar/EventPopoverCard.tsx

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,8 @@ import {
1313

1414
import { EventDetailsPopover } from "./EventDetailsPopover";
1515
import { IEvent } from "./models/IEvents";
16-
import { Stack } from "@nuvemerudita/react-controls";
17-
import { useUtils } from "./hooks/useUtils";
16+
import { Stack } from "@nuvemerudita/react-controls";
17+
import { useUtils } from "./hooks/useUtils";
1818
import { useWeekViewStyles } from "./hooks/useWeekViewStyles";
1919

2020
interface EventPopoverCardProps {
@@ -35,15 +35,18 @@ export const EventPopoverCard: React.FC<EventPopoverCardProps> = ({
3535
eventCount,
3636
}) => {
3737
const headerId = useId();
38-
const { styles, applyEventHouverColorClass , appyDynamicStyles} = useWeekViewStyles();
38+
const { styles, applyEventHouverColorClass, appyDynamicStyles } =
39+
useWeekViewStyles();
3940
const cardRef = React.useRef<HTMLDivElement>(null);
4041
const { formatDate } = useUtils();
4142

4243
const cardContent = React.useMemo(
4344
() => (
4445
<div>
4546
<Stack columnGap={4} verticalAlign="center">
46-
<Caption1Strong className={styles.eventTitle}>{event.title}</Caption1Strong>
47+
<Caption1Strong className={styles.eventTitle}>
48+
{event.title}
49+
</Caption1Strong>
4750
<Stack
4851
columnGap={4}
4952
horizontal
@@ -57,7 +60,7 @@ export const EventPopoverCard: React.FC<EventPopoverCardProps> = ({
5760
</Stack>
5861
</div>
5962
),
60-
[event]
63+
[event],
6164
);
6265

6366
return (
@@ -66,12 +69,14 @@ export const EventPopoverCard: React.FC<EventPopoverCardProps> = ({
6669
key={event.id}
6770
className={mergeClasses(
6871
styles.eventCard,
69-
applyEventHouverColorClass(colors.backgroundColor, colors.backgroundColor),
70-
appyDynamicStyles(eventIndex, eventCount, rowHeight, spanSlots)
72+
applyEventHouverColorClass(
73+
colors.backgroundColor,
74+
colors.backgroundColor,
75+
),
76+
appyDynamicStyles(eventIndex, eventCount, rowHeight, spanSlots),
7177
)}
72-
7378
>
74-
{event.enableOnHouver ? (
79+
{event.enableOnHover ? (
7580
<Popover
7681
withArrow
7782
mouseLeaveDelay={50}
@@ -82,9 +87,7 @@ export const EventPopoverCard: React.FC<EventPopoverCardProps> = ({
8287
<PopoverTrigger>{cardContent}</PopoverTrigger>
8388
<PopoverSurface
8489
aria-labelledby={headerId}
85-
className={mergeClasses(
86-
styles.popoverContent,
87-
)}
90+
className={mergeClasses(styles.popoverContent)}
8891
>
8992
<EventDetailsPopover event={event} />
9093
</PopoverSurface>

‎src/controls/calendar/RenderEventToDayOfMonth.tsx

Lines changed: 20 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/* eslint-disable @typescript-eslint/explicit-function-return-type */
22
/* eslint-disable @typescript-eslint/no-explicit-any */
3-
import * as React from 'react';
3+
import * as React from "react";
44

55
import {
66
Caption1,
@@ -10,15 +10,15 @@ import {
1010
PositioningImperativeRef,
1111
mergeClasses,
1212
useId,
13-
} from '@fluentui/react-components';
14-
import { endOfDay, isWithinInterval, startOfDay } from 'date-fns';
13+
} from "@fluentui/react-components";
14+
import { endOfDay, isWithinInterval, startOfDay } from "date-fns";
1515

16-
import { Card } from '@nuvemerudita/react-controls';
17-
import { EventDetailsPopover } from './EventDetailsPopover';
18-
import { IEvent } from './models/IEvents';
19-
import { IEventColors } from './models/IEventColors';
20-
import { useCalendarStyles } from './hooks/useCalendarStyles';
21-
import { useUtils } from './hooks/useUtils';
16+
import { Card } from "@nuvemerudita/react-controls";
17+
import { EventDetailsPopover } from "./EventDetailsPopover";
18+
import { IEvent } from "./models/IEvents";
19+
import { IEventColors } from "./models/IEventColors";
20+
import { useCalendarStyles } from "./hooks/useCalendarStyles";
21+
import { useUtils } from "./hooks/useUtils";
2222

2323
export interface IRenderEventToDayOfMonthProps {
2424
events: IEvent[];
@@ -43,7 +43,7 @@ export const RenderEventToDayOfMonth: React.FunctionComponent<
4343
onCardHoverChange(true, eventTitle);
4444
}
4545
},
46-
[onCardHoverChange]
46+
[onCardHoverChange],
4747
);
4848

4949
const handleMouseLeave = React.useCallback(
@@ -52,15 +52,15 @@ export const RenderEventToDayOfMonth: React.FunctionComponent<
5252
onCardHoverChange(false, eventTitle);
5353
}
5454
},
55-
[onCardHoverChange]
55+
[onCardHoverChange],
5656
);
5757

5858
// Set the target for the popover
5959
const buttonRef = React.useCallback(
6060
(el: HTMLDivElement | null) => {
6161
positioningRef.current?.setTarget(el);
6262
},
63-
[positioningRef]
63+
[positioningRef],
6464
);
6565

6666
// Render the card
@@ -74,22 +74,22 @@ export const RenderEventToDayOfMonth: React.FunctionComponent<
7474
styles.eventCard,
7575
applyEventHouverColorClass(
7676
colors.backgroundColor,
77-
colors.backgroundColor
78-
)
77+
colors.backgroundColor,
78+
),
7979
)}
8080
paddingTop="4px"
8181
paddingBottom="4px"
8282
paddingLeft="8px"
8383
paddingRight="8px"
84-
marginTop={index === 0 ? '0px' : '5px'}
84+
marginTop={index === 0 ? "0px" : "5px"}
8585
cardHeader={<Caption1>{calEvent.title}</Caption1>}
8686
onMouseEnter={() => handleMouseEnter(calEvent.title)}
8787
onMouseLeave={() => handleMouseLeave(calEvent.title)}
8888
/>
8989
</div>
9090
);
9191
},
92-
[handleMouseEnter, handleMouseLeave, applyEventHouverColorClass]
92+
[handleMouseEnter, handleMouseLeave, applyEventHouverColorClass],
9393
);
9494

9595
const renderCardWithPopOver = React.useCallback(
@@ -109,18 +109,15 @@ export const RenderEventToDayOfMonth: React.FunctionComponent<
109109
</PopoverTrigger>
110110
<PopoverSurface
111111
aria-labelledby={headerId}
112-
className={mergeClasses(
113-
styles.popoverContent,
114-
115-
)}
112+
className={mergeClasses(styles.popoverContent)}
116113
>
117114
<EventDetailsPopover event={calEvent} />
118115
</PopoverSurface>
119116
</Popover>
120117
</>
121118
);
122119
},
123-
[renderCard]
120+
[renderCard],
124121
);
125122

126123
if (!events || !events?.length) return <> </>;
@@ -150,11 +147,11 @@ export const RenderEventToDayOfMonth: React.FunctionComponent<
150147
return React.cloneElement(customRender as React.ReactElement, {
151148
className: mergeClasses(
152149
(customRender.props as any).className,
153-
styles.eventCard
150+
styles.eventCard,
154151
),
155152
});
156153
}
157-
return calEvent.enableOnHouver
154+
return calEvent.enableOnHover
158155
? renderCardWithPopOver(calEvent, index, colors)
159156
: renderCard(index, calEvent, colors);
160157
})}

‎src/controls/calendar/models/IEvents.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export interface IEvent {
1919
onRenderInMonthView?: (event: IEvent) => JSX.Element;
2020
onRenderInWeekView?: (event: IEvent) => JSX.Element;
2121
onRenderInDayView?: (event: IEvent) => JSX.Element;
22-
enableOnHouver?: boolean;
22+
enableOnHover?: boolean;
2323
imageUrl?: string;
2424
webLink?: string;
2525
color?: AvatarNamedColor;

‎src/webparts/controlsTest/components/TestCalendarControl.tsx

Lines changed: 17 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -17,16 +17,14 @@ import { EAppHostName } from "../../../controls/userPicker/constants/EAppHostnam
1717
import { createV9Theme } from "@fluentui/react-migration-v8-v9";
1818

1919
export interface ICalendarProps {
20-
2120
hasTeamsContext: boolean;
2221
themeString: string;
23-
theme?: Partial<Theme> | undefined;
22+
theme?: Partial<Theme> | undefined;
2423
context: BaseComponentContext;
2524
title: string;
2625
appHostName: EAppHostName;
2726
}
2827

29-
3028
export const mockEvents: IEvent[] = [
3129
{
3230
id: "1",
@@ -41,7 +39,7 @@ export const mockEvents: IEvent[] = [
4139
type: "Work",
4240
isOnlineMeeting: true,
4341
description: "Daily team standup to discuss tasks and blockers.",
44-
enableOnHouver: true,
42+
enableOnHover: true,
4543
imageUrl: "https://via.placeholder.com/150",
4644
color: "blue",
4745
webLink: "https://outlook.com",
@@ -56,7 +54,7 @@ export const mockEvents: IEvent[] = [
5654
importance: "High",
5755
sensitivity: "Confidential",
5856
description: "Final deadline for the Q1 marketing campaign submission.",
59-
enableOnHouver: false,
57+
enableOnHover: false,
6058
color: "red",
6159
webLink: "https://outlook.com",
6260
},
@@ -73,18 +71,16 @@ export const mockEvents: IEvent[] = [
7371
name: "John Doe",
7472
email: "[email protected]",
7573
id: "567891",
76-
7774
},
7875
{
7976
name: "Jane Smith",
8077
email: "[email protected]",
8178
id: "987654",
82-
8379
},
8480
],
8581
importance: "Medium",
8682
description: "Quarterly review meeting with ABC Corp.",
87-
enableOnHouver: true,
83+
enableOnHover: true,
8884
color: "gold",
8985
webLink: "https://outlook.com",
9086
},
@@ -96,7 +92,7 @@ export const mockEvents: IEvent[] = [
9692
category: "Break",
9793
importance: "Low",
9894
description: "Time to relax and enjoy some food!",
99-
enableOnHouver: false,
95+
enableOnHover: false,
10096
color: "cornflower",
10197
webLink: null,
10298
},
@@ -110,7 +106,7 @@ export const mockEvents: IEvent[] = [
110106
importance: "High",
111107
sensitivity: "Public",
112108
description: "Quarterly town hall with leadership updates.",
113-
enableOnHouver: true,
109+
enableOnHover: true,
114110
imageUrl: "https://via.placeholder.com/150",
115111
webLink: "https://outlook.com",
116112
color: "seafoam",
@@ -128,18 +124,16 @@ export const mockEvents: IEvent[] = [
128124
name: "Alex Johnson",
129125
email: "[email protected]",
130126
id: "23456",
131-
132127
},
133128
{
134129
name: "Maria Lee",
135130
email: "[email protected]",
136131
id: "78900",
137-
138132
},
139133
],
140134
importance: "Medium",
141135
description: "Weekly update call with the dev team.",
142-
enableOnHouver: true,
136+
enableOnHover: true,
143137
color: "peach",
144138
webLink: "https://outlook.com",
145139
},
@@ -152,7 +146,7 @@ export const mockEvents: IEvent[] = [
152146
___location: "Downtown Convention Center",
153147
importance: "High",
154148
description: "Meet with top industry leaders and innovators.",
155-
enableOnHouver: true,
149+
enableOnHover: true,
156150
imageUrl: "https://via.placeholder.com/150",
157151
webLink: "https://outlook.com",
158152
color: "purple",
@@ -167,7 +161,7 @@ export const mockEvents: IEvent[] = [
167161
importance: "High",
168162
sensitivity: "Confidential",
169163
description: "Review of financial reports and upcoming projections.",
170-
enableOnHouver: true,
164+
enableOnHover: true,
171165
imageUrl: "https://via.placeholder.com/150",
172166
webLink: "https://outlook.com",
173167
color: "steel",
@@ -181,7 +175,7 @@ export const mockEvents: IEvent[] = [
181175
___location: "Manager’s Office",
182176
importance: "Medium",
183177
description: "Weekly check-in with direct manager.",
184-
enableOnHouver: true,
178+
enableOnHover: true,
185179
color: "lavender",
186180
webLink: "https://outlook.com",
187181
},
@@ -195,30 +189,30 @@ export const mockEvents: IEvent[] = [
195189
___location: "Webex",
196190
importance: "Medium",
197191
description: "An in-depth look at AI trends for the upcoming year.",
198-
enableOnHouver: true,
192+
enableOnHover: true,
199193
imageUrl: "https://via.placeholder.com/150",
200194
color: "magenta",
201195
},
202196
];
203197

204198
export const TestCalendarControl: React.FunctionComponent<ICalendarProps> = (
205-
props: React.PropsWithChildren<ICalendarProps>
199+
props: React.PropsWithChildren<ICalendarProps>,
206200
) => {
207201
const { theme, themeString, hasTeamsContext } = props;
208202

209203
const [FUI9theme, setFUI9theme] = React.useState<Partial<Theme> | undefined>(
210-
undefined
204+
undefined,
211205
);
212206

213207
const setTheme = React.useCallback((): Partial<Theme> => {
214208
if (hasTeamsContext) {
215209
return themeString === "dark"
216210
? teamsDarkTheme
217211
: themeString === "contrast"
218-
? teamsHighContrastTheme
219-
: {
220-
...teamsLightTheme,
221-
};
212+
? teamsHighContrastTheme
213+
: {
214+
...teamsLightTheme,
215+
};
222216
} else {
223217
const nthme = createV9Theme(theme as never);
224218

@@ -244,7 +238,6 @@ export const TestCalendarControl: React.FunctionComponent<ICalendarProps> = (
244238
onMonthChange={(date: Date) => console.log("month", date)}
245239
onWeekChange={(date: Date) => console.log("week", date)}
246240
onViewChange={(view: string) => console.log("view", view)}
247-
248241
/>
249242
</FluentProvider>
250243
</IdPrefixProvider>

0 commit comments

Comments
 (0)