import React, { MouseEvent, useEffect, useState } from 'react'; import { Group, GroupType } from '../types'; import styled from 'styled-components/macro'; import Popover from '@material-ui/core/Popover'; import Typography from '@material-ui/core/Typography'; import { makeStyles, createStyles, Theme } from '@material-ui/core/styles'; const useStyles = makeStyles((theme: Theme) => createStyles({ popover: { pointerEvents: 'none', }, paper: { padding: theme.spacing(1), marginLeft: 5, textAlign: 'center', }, }), ); interface SchedulerEventProps { eventIndex: number; cellTop: number; cellWidth: number; cellHeight: number; } const SchedulerEvent = styled.div` position: absolute; display: flex; top: ${({ cellTop }) => cellTop}px; left: ${({ cellWidth, eventIndex }) => cellWidth + 5 + cellWidth * eventIndex}px; width: ${({ cellWidth }) => (cellWidth * 2.5) / 3}px; height: ${({ cellHeight }) => (cellHeight * 2 * 3) / 4}px; z-index: 2; `; interface ClassesProps{ cellWidth: number; cellHeight: number; groupType: GroupType; } const Classes = styled.div` display: flex; justify-content: center; align-items: center; z-index: 2; border-radius: 10px; /* background-color: rgb(100, 181, 246); */ width: ${({ cellWidth }) => (cellWidth * 2.5) / 3}px; height: ${({ cellHeight }) => (cellHeight * 2 * 3) / 4}px; margin-right: 5px; text-align: center; background-color:${({groupType})=>groupType === "CLASS" ? "#5642AA" : "#866DF7"}; `; interface SchedulerRowProps { groups: Array; indexRow: number; cellTop: number; cellWidth: number; cellHeight: number; } export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight }: SchedulerRowProps) => { const classes = useStyles(); const [anchorEl, setAnchorEl] = React.useState(null); const [popoverId, setPopoverId] = useState(null); //looks weird const handlePopoverOpen = (event: MouseEvent) => { setAnchorEl(event.currentTarget); setPopoverId(event.currentTarget.id); }; const handlePopoverClose = () => { setAnchorEl(null); setPopoverId(null); }; const open = Boolean(anchorEl); return ( <> {[...Array(5)].map((_, eventIndex) => ( {groups.map( (group, index) => group.day === eventIndex && ( <> handlePopoverOpen(e)} onMouseLeave={handlePopoverClose} >

{groups[index].name}

{groups[index].room}

{groups[index].name}

{groups[index].lecturer}

{groups[index].room}

), )}
))} ); };