Didn't convert to table but managed to change stylings accordingly

This commit is contained in:
Maciek Głowacki 2020-08-29 18:52:03 +02:00
parent d30852b97d
commit 9f531de1a5
6 changed files with 63 additions and 42 deletions

View File

@ -7,19 +7,19 @@ import styled from 'styled-components';
const Wrapper = styled.div`
display: flex;
height: calc(100vh - 80px);
`;
export const App = () => {
const [isOpenTransfer, setOpenTransfer] = useState(false);
const handleTransfer = () => {
setOpenTransfer(!isOpenTransfer);
};
return (
<>
<Topbar handleTransfer={handleTransfer} />
<Topbar handleTransfer={handleTransfer} />
<Transfer isOpen={isOpenTransfer} handleClose={handleTransfer} />
<Wrapper>
<Scheduler />

View File

@ -9,8 +9,8 @@ const RightbarStyled = styled.div`
padding-right: 15px;
text-align: center;
font-family: Lato;
height: 100%;
width: 300px;
height: 85vh;
overflow-y: scroll;
::-webkit-scrollbar-track {
border-radius: 10px;

View File

@ -1,18 +1,17 @@
import React, { useEffect, useRef } from 'react';
import React, { useEffect, useLayoutEffect, useRef } from 'react';
import { useState } from 'react';
import { SchedulerEvents } from './SchedulerEvents';
import { days, hours } from '../constants/index';
import styled from 'styled-components';
import styled from 'styled-components/macro';
const SchedulerWrapper = styled.div`
flex-grow: 3;
margin-top: 20px;
border-collapse: collapse;
flex-grow: 1;
`;
const TableBody = styled.div`
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
`;
@ -22,36 +21,46 @@ const TableRow = styled.div`
flex-direction: row;
`;
const TableCell = styled.div`
border: 1px solid #ddd;
padding: 10px;
text-align: center;
flex: 1;
`;
const TableHead = styled.div`
display: flex;
width: 100%;
`;
const TableHeadCell = styled.div`
interface TableCellProps {
height: number;
}
const TableCell = styled.div<TableCellProps>`
height: ${({ height }) => height}px;
border: 1px solid #ddd;
padding: 10px;
text-align: center;
flex: 1;
`;
const T = styled.table`
width: 100%;
height: 100%;
`;
export const Scheduler = () => {
const [currentEventsIds, setCurrentEventsIds] = useState<Array<string>>([]);
const cellRef = useRef<HTMLDivElement>(null);
const [cellWidth, setCellWidth] = useState(0);
const [cellTop, setCellTop] = useState(0);
const wrapperRef = useRef<HTMLDivElement>(null);
const [wrapperHeight, setWrapperHeight] = useState(0);
useEffect(() => {
console.log(cellTop);
}, [cellTop]);
useEffect(() => {
const handleResize = () => {
if (cellRef.current) {
if (cellRef.current && wrapperRef.current) {
setCellWidth(cellRef.current.getBoundingClientRect().width);
setCellTop(cellRef.current.getBoundingClientRect().top);
setWrapperHeight(wrapperRef.current.getBoundingClientRect().height);
}
};
handleResize();
@ -81,10 +90,12 @@ export const Scheduler = () => {
return (
<>
<SchedulerWrapper>
<SchedulerWrapper ref={wrapperRef}>
<TableHead>
{days.map((day, index) => (
<TableHeadCell key={index}>{day}</TableHeadCell>
<TableCell height={wrapperHeight / 13} key={index} ref={cellRef}>
{day}
</TableCell>
))}
</TableHead>
<TableBody>
@ -92,15 +103,17 @@ export const Scheduler = () => {
<TableRow key={indexRow}>
{[hour, '', '', '', '', ''].map((value, indexCell) =>
indexRow === 0 && indexCell === 1 ? (
<TableCell key={`${indexRow}${indexCell}`} ref={cellRef}></TableCell>
<TableCell height={wrapperHeight / 13} key={`${indexRow}${indexCell}`}></TableCell>
) : (
<TableCell key={`${indexRow}${indexCell}`}>{value}</TableCell>
<TableCell height={wrapperHeight / 13} key={`${indexRow}${indexCell}`}>
{value}
</TableCell>
),
)}
</TableRow>
))}
</TableBody>
<SchedulerEvents cellTop={cellTop} cellWidth={cellWidth} />
<SchedulerEvents cellTop={cellTop} cellWidth={cellWidth} cellHeight={wrapperHeight / 13} />
</SchedulerWrapper>
</>
);

View File

@ -2,14 +2,14 @@ import React, { useContext, useEffect, useState } from 'react';
import { SchedulerRow } from './SchedulerRow';
import { coursesContext } from '../contexts/CoursesProvider';
import { Group, Basket } from '../types';
import classes from '*.module.css';
interface SchedulerEventsProps {
cellTop: number;
cellWidth: number;
cellHeight: number;
}
export const SchedulerEvents = ({ cellTop, cellWidth }: SchedulerEventsProps) => {
export const SchedulerEvents = ({ cellTop, cellWidth, cellHeight }: SchedulerEventsProps) => {
const { basket } = useContext(coursesContext)!;
const [choosenGroupsMappedToEvents, setChoosenGroupsMappedToEvents] = useState<any>([]);
@ -56,13 +56,22 @@ export const SchedulerEvents = ({ cellTop, cellWidth }: SchedulerEventsProps) =>
})}
indexRow={index}
cellTop={
index == 3
? cellTop + (25 + 80 * index)
: index < 3
? cellTop + (12 + 80 * index)
: cellTop + (25 + 80 * index)
index === 0
? cellTop + (cellHeight + cellHeight * 2 * index + cellHeight / 4)
: index === 1
? cellTop + (cellHeight + cellHeight * 2 * index)
: index === 2
? cellTop + (cellHeight + cellHeight * 2 * index - cellHeight / 4)
: index === 3
? cellTop + (cellHeight + cellHeight * 2 * index - cellHeight / 4)
: index === 4
? cellTop + (cellHeight + cellHeight * 2 * index - cellHeight / 2)
: index === 5
? cellTop + (cellHeight + cellHeight * 2 * index - (cellHeight * 3) / 4)
: 0
}
cellWidth={cellWidth}
cellHeight={cellHeight}
/>
))}
</div>

View File

@ -6,14 +6,15 @@ interface SchedulerEventProps {
eventIndex: number;
cellTop: number;
cellWidth: number;
cellHeight: number;
}
const SchedulerEvent = styled.div<SchedulerEventProps>`
position: absolute;
top: ${(props) => props.cellTop}px;
left: ${(props) => props.cellWidth + 5 + props.cellWidth * props.eventIndex}px;
width: ${(props) => (props.cellWidth * 2) / 3}px;
height: 69px;
top: ${({ cellTop }) => cellTop}px;
left: ${({ cellWidth, eventIndex }) => cellWidth + 5 + cellWidth * eventIndex}px;
width: ${({ cellWidth }) => (cellWidth * 2) / 3}px;
height: ${({ cellHeight }) => (cellHeight * 2 * 3) / 4}px;
background-color: lightblue;
z-index: 2;
`;
@ -23,11 +24,10 @@ interface SchedulerRowProps {
indexRow: number;
cellTop: number;
cellWidth: number;
cellHeight: number;
}
export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth }: SchedulerRowProps) => {
export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight }: SchedulerRowProps) => {
return (
<>
{[...Array(5)].map((_, eventIndex) => (
@ -35,12 +35,11 @@ export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth }: Scheduler
eventIndex={eventIndex}
cellTop={cellTop}
cellWidth={cellWidth}
cellHeight={cellHeight}
key={eventIndex}
id={`eventRow${indexRow}eventCol${eventIndex}`}
>
{groups.map((group, index) =>
group.day === eventIndex && <div key={index}>{groups[index]?.lecturer}</div>,
)}
{groups.map((group, index) => group.day === eventIndex && <div key={index}>{groups[index]?.lecturer}</div>)}
</SchedulerEvent>
))}
</>

View File

@ -102,9 +102,9 @@ export default function ({ handleTransfer }: TopbarProps) {
<TopbarInputStyled>
<TopbarInputIconStyled alt="search" src={Search} />
<TopbarInputFieldStyled>
<Dropdown clearInput={clearInput} handleClearInput={handleClearInput}/>
<Dropdown clearInput={clearInput} handleClearInput={handleClearInput} />
</TopbarInputFieldStyled>
<TopbarInputIconStyled alt="close" src={CloseIcon} onClick={handleClearInput}/>
<TopbarInputIconStyled alt="close" src={CloseIcon} onClick={handleClearInput} />
</TopbarInputStyled>
<TopbarIconBox>
<TopbarIcon alt="transfer" src={Transfer} onClick={handleTransfer} />
@ -114,4 +114,4 @@ export default function ({ handleTransfer }: TopbarProps) {
</TopbarIconBox>
</Topbar>
);
};
}