Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 | 112x 112x 112x 112x 112x 112x 112x 60x 52x 2x 112x 112x 112x 112x 56x 56x 56x 56x 56x 56x 29x 27x 11x 16x 7x 56x 56x | import React, { useEffect, useState } from "react";
import {
ButtonGroup,
Card,
OverlayTrigger,
Popover,
Button,
} from "react-bootstrap";
export default function SchedulerEvents({ event, eventColor, borderColor }) {
const [style, setStyle] = useState({});
// Stryker disable next-line all : Initial value is immediately overwritten in useEffect
const [titleClass, setTitleClass] = useState("");
const testId = "SchedulerEvent";
const convertTimeToMinutes = (time) => {
const [timePart, modifier] = [time.slice(0, -2), time.slice(-2)];
let [hours, minutes] = timePart.split(":").map(Number);
if (modifier === "PM" && hours !== 12) {
hours += 12;
} else if (modifier === "AM" && hours === 12) {
hours = 0;
}
return hours * 60 + minutes;
};
const TOP_POSITION_OFFSET = 94;
const DISPLAY_START_HOUR_MINUTES = 8 * 60; // 8 AM in minutes
useEffect(() => {
const startMinutes = convertTimeToMinutes(event.startTime);
const endMinutes = convertTimeToMinutes(event.endTime);
const height = endMinutes - startMinutes;
const topPosition =
startMinutes + TOP_POSITION_OFFSET - DISPLAY_START_HOUR_MINUTES;
// Determine font size class based on height
let fontSizeClass = "event-title-xs";
if (height >= 60) {
fontSizeClass = "event-title-lg";
} else if (height >= 40) {
fontSizeClass = "event-title-md";
} else if (height >= 25) {
fontSizeClass = "event-title-sm";
}
setTitleClass(fontSizeClass);
setStyle({
event: {
top: `${topPosition}px`,
height: `${height}px`,
backgroundColor: eventColor,
border: `2px solid ${borderColor}`,
},
height: height,
});
}, [
event.startTime,
event.endTime,
eventColor,
borderColor,
DISPLAY_START_HOUR_MINUTES,
]);
return (
<OverlayTrigger
trigger="click"
key={event.title}
placement="auto-start"
rootClose
overlay={
<Popover>
<Popover.Header as="h3">{event.title}</Popover.Header>
<Popover.Body>
<p data-testid={`${testId}-description`}>
{event.startTime} - {event.endTime}
<br />
{event.description}
</p>
{event.actions &&
event.actions.map((action, index) => (
<ButtonGroup key={index}>
<Button variant={action.variant} onClick={action.callback}>
{action.text}
</Button>
</ButtonGroup>
))}
</Popover.Body>
</Popover>
}
>
<Card
key={event.title}
className="scheduler-event"
style={style.event}
data-testid={`${testId}-${event.id}`}
>
<Card.Body className="scheduler-event-body">
{style.height >= 20 && (
<Card.Text
data-testid={`${testId}-title`}
className={`scheduler-event-title ${titleClass}`}
>
{event.title}
</Card.Text>
)}
{style.height >= 40 && (
<Card.Text
data-testid={`${testId}-time`}
className="PersonalScheduleCard"
>
{event.startTime} - {event.endTime}
</Card.Text>
)}
</Card.Body>
</Card>
</OverlayTrigger>
);
}
|