Added popover and removed onClick event from scheduler
This commit is contained in:
Maciek Głowacki
parent
0ae374a0fb
commit
44150eb322
@ -1,4 +1,4 @@
|
||||
import React, { useState, useContext, useEffect, MouseEvent } from 'react';
|
||||
import React, { useState, useContext, useEffect, MouseEvent, ChangeEvent } from 'react';
|
||||
import axios from 'axios';
|
||||
import { Input } from '@material-ui/core';
|
||||
import ClickAwayListener from '@material-ui/core/ClickAwayListener';
|
||||
@ -64,13 +64,10 @@ export const Dropdown = ({ clearInput, handleClearInput }: DropdownProps) => {
|
||||
}, [input, open, basket]);
|
||||
|
||||
useEffect(() => {
|
||||
if (clearInput) {
|
||||
setInput('');
|
||||
handleClearInput();
|
||||
}
|
||||
clearInput && (setInput(''), handleClearInput());
|
||||
}, [clearInput]);
|
||||
|
||||
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => setInput(event.target.value);
|
||||
const handleChange = (event: ChangeEvent<HTMLInputElement>) => setInput(event.target.value);
|
||||
|
||||
const handleClick = () => setOpen(true);
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React, { useEffect, useLayoutEffect, useRef } from 'react';
|
||||
import React, { useEffect, MouseEvent, useRef } from 'react';
|
||||
import { useState } from 'react';
|
||||
import { SchedulerEvents } from './SchedulerEvents';
|
||||
import { days, hours } from '../constants/index';
|
||||
@ -44,7 +44,6 @@ const T = styled.table`
|
||||
`;
|
||||
|
||||
export const Scheduler = () => {
|
||||
const [currentEventsIds, setCurrentEventsIds] = useState<Array<string>>([]);
|
||||
const cellRef = useRef<HTMLDivElement>(null);
|
||||
const [cellWidth, setCellWidth] = useState(0);
|
||||
const [cellTop, setCellTop] = useState(0);
|
||||
@ -52,10 +51,6 @@ export const Scheduler = () => {
|
||||
const wrapperRef = useRef<HTMLDivElement>(null);
|
||||
const [wrapperHeight, setWrapperHeight] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
console.log(cellTop);
|
||||
}, [cellTop]);
|
||||
|
||||
useEffect(() => {
|
||||
const handleResize = () => {
|
||||
if (cellRef.current && wrapperRef.current) {
|
||||
@ -68,27 +63,6 @@ export const Scheduler = () => {
|
||||
window.addEventListener('resize', handleResize);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const displayEvents = () => {
|
||||
currentEventsIds.map((eventId: string) => {
|
||||
const event = document.getElementById(eventId);
|
||||
if (event) {
|
||||
event.style.backgroundColor = 'blue';
|
||||
}
|
||||
});
|
||||
};
|
||||
displayEvents();
|
||||
}, [currentEventsIds]);
|
||||
|
||||
const handleClick = (e: React.MouseEvent) => {
|
||||
const cellId = e.currentTarget.id;
|
||||
// const column = cellId.slice(0, 9);
|
||||
// const row = cellId.slice(1);
|
||||
//const eventId = `eventCol${column}eventRow${Math.floor(parseInt(row) / 2)}`;
|
||||
console.log(currentEventsIds)
|
||||
setCurrentEventsIds((currentEventsIds) => [...currentEventsIds, cellId]);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<SchedulerWrapper ref={wrapperRef}>
|
||||
@ -114,7 +88,7 @@ export const Scheduler = () => {
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
<SchedulerEvents onClick={handleClick} cellTop={cellTop} cellWidth={cellWidth} cellHeight={wrapperHeight / 13}/>
|
||||
<SchedulerEvents cellTop={cellTop} cellWidth={cellWidth} cellHeight={wrapperHeight / 13} />
|
||||
</SchedulerWrapper>
|
||||
</>
|
||||
);
|
||||
|
||||
@ -7,10 +7,9 @@ interface SchedulerEventsProps {
|
||||
cellTop: number;
|
||||
cellWidth: number;
|
||||
cellHeight: number;
|
||||
onClick: (e: MouseEvent) => void;
|
||||
}
|
||||
|
||||
export const SchedulerEvents = ({ cellTop, cellWidth, cellHeight, onClick }: SchedulerEventsProps) => {
|
||||
export const SchedulerEvents = ({ cellTop, cellWidth, cellHeight }: SchedulerEventsProps) => {
|
||||
const { basket } = useContext(coursesContext)!;
|
||||
|
||||
const [choosenGroupsMappedToEvents, setChoosenGroupsMappedToEvents] = useState<any>([]);
|
||||
@ -29,27 +28,20 @@ export const SchedulerEvents = ({ cellTop, cellWidth, cellHeight, onClick }: Sch
|
||||
|
||||
useEffect(() => {
|
||||
function mapGroupTimeToEventRow(basket: Array<Basket>) {
|
||||
const classes = basket.map(({ classes, name }) => ({ ...classes, name })).filter((cl) => cl !== null) as Array<
|
||||
Group & { name: string }
|
||||
>;
|
||||
const lectures = basket.map(({ lecture, name }) => ({ ...lecture, name })).filter((lec) => lec !== null) as Array<
|
||||
Group & { name: string }
|
||||
>;
|
||||
const classes = basket.map(({ classes, name }) => ({ ...classes, name })) as Array<Group & { name: string }>;
|
||||
const lectures = basket.map(({ lecture, name }) => ({ ...lecture, name })) as Array<Group & { name: string }>;
|
||||
const merged = [...classes, ...lectures];
|
||||
|
||||
console.log('merged');
|
||||
console.log(merged);
|
||||
if (merged.length >= 1) {
|
||||
const groupsMapped = merged.map(({ id, day, lecturer, room, time, name }) => ({
|
||||
id,
|
||||
day,
|
||||
lecturer,
|
||||
room,
|
||||
eventRow: groupTimeToEventRowMapping[time],
|
||||
name,
|
||||
}));
|
||||
setChoosenGroupsMappedToEvents(groupsMapped);
|
||||
}
|
||||
//deleted if statement, maybe it is needed
|
||||
const groupsMapped = merged.map(({ id, day, lecturer, room, time, name }) => ({
|
||||
id,
|
||||
day: day === 5 ? 4 : day,
|
||||
lecturer,
|
||||
room,
|
||||
eventRow: groupTimeToEventRowMapping[time],
|
||||
name,
|
||||
}));
|
||||
setChoosenGroupsMappedToEvents(groupsMapped);
|
||||
}
|
||||
mapGroupTimeToEventRow(basket);
|
||||
}, [basket]);
|
||||
@ -58,11 +50,8 @@ export const SchedulerEvents = ({ cellTop, cellWidth, cellHeight, onClick }: Sch
|
||||
<div>
|
||||
{[...Array(6)].map((_, index) => (
|
||||
<SchedulerRow
|
||||
onClick={onClick}
|
||||
key={index}
|
||||
groups={choosenGroupsMappedToEvents.filter((group: any) => {
|
||||
return group.eventRow === index;
|
||||
})}
|
||||
groups={choosenGroupsMappedToEvents.filter((group: any) => group.eventRow === index)}
|
||||
indexRow={index}
|
||||
cellTop={
|
||||
index === 0
|
||||
|
||||
@ -1,6 +1,20 @@
|
||||
import React, { MouseEvent } from 'react';
|
||||
import { Group } from '../types';
|
||||
import styled from 'styled-components';
|
||||
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),
|
||||
},
|
||||
}),
|
||||
);
|
||||
|
||||
interface SchedulerEventProps {
|
||||
eventIndex: number;
|
||||
@ -11,14 +25,15 @@ interface SchedulerEventProps {
|
||||
|
||||
const SchedulerEvent = styled.div<SchedulerEventProps>`
|
||||
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 ClassDiv = styled.div<SchedulerEventProps>`
|
||||
width: ${({ cellWidth }) => (cellWidth * 2.5) / 3}px;
|
||||
height: ${({ cellHeight }) => (cellHeight * 2 * 3) / 4}px;
|
||||
const Classes = styled.div<SchedulerEventProps>`
|
||||
z-index: 2;
|
||||
border-radius: 10px;
|
||||
padding-left: 5px;
|
||||
@ -31,15 +46,27 @@ interface SchedulerRowProps {
|
||||
cellTop: number;
|
||||
cellWidth: number;
|
||||
cellHeight: number;
|
||||
onClick: (e: MouseEvent) => void;
|
||||
}
|
||||
|
||||
export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight, onClick }: SchedulerRowProps) => {
|
||||
export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight }: SchedulerRowProps) => {
|
||||
const classes = useStyles();
|
||||
const [anchorEl, setAnchorEl] = React.useState<HTMLDivElement | null>(null);
|
||||
|
||||
//looks weird
|
||||
const handlePopoverOpen = (event: MouseEvent<HTMLDivElement, globalThis.MouseEvent>) => {
|
||||
setAnchorEl(event.currentTarget);
|
||||
};
|
||||
|
||||
const handlePopoverClose = () => {
|
||||
setAnchorEl(null);
|
||||
};
|
||||
|
||||
const open = Boolean(anchorEl);
|
||||
|
||||
return (
|
||||
<>
|
||||
{[...Array(5)].map((_, eventIndex) => (
|
||||
<SchedulerEvent
|
||||
onClick={onClick}
|
||||
eventIndex={eventIndex}
|
||||
cellTop={cellTop}
|
||||
cellWidth={cellWidth}
|
||||
@ -50,16 +77,43 @@ export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight,
|
||||
{groups.map(
|
||||
(group, index) =>
|
||||
group.day === eventIndex && (
|
||||
<ClassDiv
|
||||
eventIndex={eventIndex}
|
||||
cellTop={cellTop}
|
||||
cellWidth={cellWidth}
|
||||
cellHeight={cellHeight}
|
||||
id={`eventRow${indexRow}eventCol${eventIndex}`}
|
||||
key={index}
|
||||
>
|
||||
{groups[index].name}
|
||||
</ClassDiv>
|
||||
<>
|
||||
<Classes
|
||||
eventIndex={eventIndex}
|
||||
cellTop={cellTop}
|
||||
cellWidth={cellWidth}
|
||||
cellHeight={cellHeight}
|
||||
id={`eventRow${indexRow}eventCol${eventIndex}`}
|
||||
key={index}
|
||||
aria-owns={open ? 'mouse-over-popover' : undefined}
|
||||
aria-haspopup="true"
|
||||
onMouseEnter={handlePopoverOpen}
|
||||
onMouseLeave={handlePopoverClose}
|
||||
>
|
||||
{groups[index].name}
|
||||
</Classes>
|
||||
<Popover
|
||||
id="mouse-over-popover"
|
||||
className={classes.popover}
|
||||
classes={{
|
||||
paper: classes.paper,
|
||||
}}
|
||||
open={open}
|
||||
anchorEl={anchorEl}
|
||||
anchorOrigin={{
|
||||
vertical: 'bottom',
|
||||
horizontal: 'left',
|
||||
}}
|
||||
transformOrigin={{
|
||||
vertical: 'top',
|
||||
horizontal: 'left',
|
||||
}}
|
||||
onClose={handlePopoverClose}
|
||||
disableRestoreFocus
|
||||
>
|
||||
<Typography>I use Popover.</Typography>
|
||||
</Popover>
|
||||
</>
|
||||
),
|
||||
)}
|
||||
</SchedulerEvent>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user