import React, { MouseEvent, useEffect, useState } from 'react'; import { Group } 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; `; const Classes = styled.div` z-index: 2; border-radius: 10px; padding-left: 5px; 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; `; 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); useEffect(()=>{ console.log("1231312"+popoverId); },[popoverId]) 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}

), )}
))} ); };