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/macro'; const SchedulerWrapper = styled.div` border-collapse: collapse; flex: 1; background-color: white; padding: 10px 40px 25px 10px; border-radius: 5px; margin-right: 20px; margin-left: 20px; flex-direction: column; justify-content: center; align-items: center; box-shadow: 3px 3px 3px -2px rgba(0, 0, 0, 0.59); `; const TableBody = styled.div` position: relative; width: 100%; display: flex; flex-direction: column; height: calc(100% * 25 / 26); `; const TableRow = styled.div` display: flex; height: 100%; `; const TableHead = styled.div` display: flex; width: 100%; height: calc(100% / 26); `; interface TableCellProps { cellHeight?: number; isHourColumn?: boolean; } const TableCell = styled.div` border-width: ${({ isHourColumn }) => !isHourColumn && '1px'}; border-style: ${({ isHourColumn }) => !isHourColumn && 'none solid dotted none'}; border-color: rgb(235, 235, 235); display: flex; align-items: center; justify-content: ${({ isHourColumn }) => (isHourColumn ? 'flex-end' : 'center')}; flex: ${({ isHourColumn }) => (isHourColumn ? '1' : '5')}; margin-right: ${({ isHourColumn }) => (isHourColumn ? '10px' : '0px')}; margin-top: ${({ isHourColumn, cellHeight }) => (isHourColumn ? `-${cellHeight}px` : '0px')}; font-size: 0.75vw; user-select: none; border-collapse: collapse; :nth-child(2) { border-left: 1px solid rgb(235, 235, 235); } font-weight: bold; `; export const Scheduler = () => { const cellRef = useRef(null); const [cellWidth, setCellWidth] = useState(0); const [cellHeight, setCellHeight] = useState(0); useLayoutEffect(() => { const handleResize = () => { if (cellRef.current) { setCellWidth(cellRef.current.getBoundingClientRect().width); setCellHeight(cellRef.current.getBoundingClientRect().height); } }; handleResize(); window.addEventListener('resize', handleResize); return () => window.removeEventListener('resize', handleResize); }, []); return ( {days.map((day, indexCell) => indexCell === 0 ? ( {day} ) : ( {day} ), )} {hours.map((hour, indexRow) => ( {[hour, '', '', '', '', ''].map((value, indexCell) => indexCell === 0 ? ( {value} ) : indexRow === 0 && indexCell === 1 ? ( {value} ) : indexRow === 23 ? ( {value} ) : indexRow === 5 ? ( {value} ) : indexRow % 2 !== 0 ? ( {value} ) : ( {value} ), )} ))} ); };