import React, { useEffect, MouseEvent, useRef } from 'react'; import { useState } from 'react'; import { SchedulerEvents } from './SchedulerEvents'; import { days, hours } from '../constants/index'; import styled from 'styled-components/macro'; const SchedulerWrapper = styled.div` border-collapse: collapse; flex-grow: 1; `; const TableBody = styled.div` width: 100%; display: flex; flex-direction: column; `; const TableRow = styled.div` display: flex; `; const TableHead = styled.div` display: flex; width: 100%; `; interface TableCellProps { height: number; } const TableCell = styled.div` height: ${({ height }) => height}px; border: 1px solid #ddd; display: flex; align-items: center; justify-content: center; flex: 1; font-size: 1.25vw; `; const T = styled.table` width: 100%; height: 100%; `; export const Scheduler = () => { const cellRef = useRef(null); const [cellWidth, setCellWidth] = useState(0); const [cellTop, setCellTop] = useState(0); const wrapperRef = useRef(null); const [wrapperHeight, setWrapperHeight] = useState(0); useEffect(() => { const handleResize = () => { if (cellRef.current && wrapperRef.current) { setCellWidth(cellRef.current.getBoundingClientRect().width); setCellTop(cellRef.current.getBoundingClientRect().top); setWrapperHeight(wrapperRef.current.getBoundingClientRect().height); } }; handleResize(); window.addEventListener('resize', handleResize); }, []); return ( <> {days.map((day, indexCell) => indexCell === 0 ? ( {day} ) : ( {day} ), )} {hours.map((hour, indexRow) => ( {[hour, '', '', '', '', ''].map((value, indexCell) => indexCell === 0 ? ( {value} ) : ( {value} ), )} ))} ); };