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 | 28x 28x 28x 28x 28x 28x 22x 22x 14x 14x 22x 28x 14x 14x 14x 14x 14x 28x | import React, { useEffect, useState } from "react";
import { Card, OverlayTrigger, Popover } from "react-bootstrap";
export default function PersonalSectionsEvents({
event,
eventColor,
borderColor,
}) {
const [style, setStyle] = useState({});
const testId = "PersonalSectionsEvent";
// Stryker disable all : simple time conversion functions
const convertTimeToMinutes = (time) => {
const [hours, minutes] = [time.slice(0, 2), time.slice(-2)];
return hours * 60 + minutes * 1;
};
const convert24Hourto12Hour = (time) => {
let [hours, minutes] = [time.slice(0, 2), time.slice(-2)];
if (hours * 1 > 12) {
let hTemp = hours * 1 - 12;
hours = hTemp.toString();
}
return hours + ":" + minutes;
};
// Stryker restore all
// Stryker disable all : hard to test for specfic styles
useEffect(() => {
const startMinutes = convertTimeToMinutes(event.startTime);
const endMinutes = convertTimeToMinutes(event.endTime);
const height = endMinutes - startMinutes;
const topPosition = startMinutes + 94;
setStyle({
event: {
position: "absolute",
top: `${topPosition}px`,
height: `${height}px`,
width: "100%",
backgroundColor: eventColor,
border: `2px solid ${borderColor}`,
zIndex: 1,
padding: "2px",
justifyContent: "center",
alignItems: "left",
},
title: {
fontSize:
height < 25
? "10px"
: height < 40
? "12px"
: height < 60
? "14px"
: "16px",
overflow: "hidden",
whiteSpace: "nowrap",
textOverflow: "ellipsis",
textAlign: "left",
margin: "0",
},
padding5: {
padding: "5px",
},
height: height,
});
}, [event.startTime, event.endTime, eventColor, borderColor]);
// Stryker restore all
return (
<OverlayTrigger
trigger="click"
key={event.title}
placement="auto-start"
rootClose
overlay={
<Popover>
<Popover.Header as="h3">
{event.title} - {event.area}
</Popover.Header>
<Popover.Body>
<p data-testid={`${testId}-description`}>
{event.name}
<br />
{event.description}
</p>
</Popover.Body>
</Popover>
}
>
<Card
key={event.title}
style={style.event}
data-testid={`${testId}-${event.id}`}
>
<Card.Body style={style.padding5}>
{style.height >= 20 && (
<Card.Text data-testid={`${testId}-title`} style={style.title}>
{event.title}
</Card.Text>
)}
{style.height >= 40 && ( // Stryker disable all : no need to test text formatting
<Card.Text
data-testid={`${testId}-time`}
style={{ fontSize: "12px", textAlign: "left" }}
>
{convert24Hourto12Hour(event.startTime)} -{" "}
{convert24Hourto12Hour(event.endTime)}
</Card.Text> // Stryker enable all
)}
</Card.Body>
</Card>
</OverlayTrigger>
);
}
|