Skip to content

fix-typo-enableOnHover #2021

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: dev
Choose a base branch
from
Open

fix-typo-enableOnHover #2021

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 15 additions & 12 deletions src/controls/calendar/EventPopoverCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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
Expand All @@ -57,7 +60,7 @@ export const EventPopoverCard: React.FC<EventPopoverCardProps> = ({
</Stack>
</div>
),
[event]
[event],
);

return (
Expand All @@ -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}
Expand All @@ -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>
Expand Down
43 changes: 20 additions & 23 deletions src/controls/calendar/RenderEventToDayOfMonth.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -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[];
Expand All @@ -43,7 +43,7 @@ export const RenderEventToDayOfMonth: React.FunctionComponent<
onCardHoverChange(true, eventTitle);
}
},
[onCardHoverChange]
[onCardHoverChange],
);

const handleMouseLeave = React.useCallback(
Expand All @@ -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
Expand All @@ -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(
Expand All @@ -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 <> </>;
Expand Down Expand Up @@ -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);
})}
Expand Down
2 changes: 1 addition & 1 deletion src/controls/calendar/models/IEvents.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
41 changes: 17 additions & 24 deletions src/webparts/controlsTest/components/TestCalendarControl.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand All @@ -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",
},
Expand All @@ -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",
},
Expand All @@ -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,
},
Expand All @@ -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",
Expand All @@ -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",
},
Expand All @@ -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",
Expand All @@ -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",
Expand All @@ -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",
},
Expand All @@ -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);

Expand All @@ -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>
Expand Down