y0rune/frontend
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

styled table and card

Browse Source
This commit is contained in:
Maciek Głowacki
2020-11-26 01:53:07 +01:00
parent d384b248e5
commit 3f0aaf42ca
5 changed files with 127 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
src/components/Scheduler.tsx
View File

@ -43,9 +43,9 @@ interface TableCellProps {
}
const TableCell = styled.div<TableCellProps>`
border-width: ${({ isHourColumn }) => !isHourColumn && '2px'};
border-width: ${({ isHourColumn }) => !isHourColumn && '1px'};
border-style: ${({ isHourColumn }) => !isHourColumn && 'none solid dotted none'};
border-color: rgb(242, 243, 245);
border-color: rgb(235, 235, 235);
display: flex;
align-items: center;
justify-content: ${({ isHourColumn }) => (isHourColumn ? 'flex-end' : 'center')};
@ -56,13 +56,12 @@ const TableCell = styled.div<TableCellProps>`
user-select: none;
border-collapse: collapse;
:nth-child(2) {
border-left: 2px solid rgb(242, 243, 245);
border-left: 1px solid rgb(235, 235, 235);
}
font-weight: bold;
`;
export const Scheduler = () => {
const cellRef = useRef<HTMLDivElement>(null);
const [cellWidth, setCellWidth] = useState(0);
const [cellHeight, setCellHeight] = useState(0);
@ -80,52 +79,52 @@ export const Scheduler = () => {
}, []);
return (
<SchedulerWrapper>
<TableHead>
{days.map((day, indexCell) =>
indexCell === 0 ? (
<TableCell isHourColumn={true} key={indexCell}>
{day}
</TableCell>
) : (
<TableCell style={{ borderStyle: 'none none solid none' }} key={indexCell}>
{day}
</TableCell>
),
)}
</TableHead>
<TableBody>
{hours.map((hour, indexRow) => (
<TableRow key={indexRow}>
{[hour, '', '', '', '', ''].map((value, indexCell) =>
indexCell === 0 ? (
<TableCell isHourColumn={true} cellHeight={cellHeight} key={`${indexRow}${indexCell}`}>
{value}
</TableCell>
) : indexRow === 0 && indexCell === 1 ? (
<TableCell ref={cellRef} key={`${indexRow}${indexCell}`}>
{value}
</TableCell>
) : indexRow === 23 ? (
<TableCell style={{ borderBottom: '2px solid rgb(242, 243, 245)' }} key={`${indexRow}${indexCell}`}>
{value}
</TableCell>
) : indexRow === 5 ? (
<TableCell style={{ borderBottom: '2px solid rgb(242, 243, 245)' }} key={`${indexRow}${indexCell}`}>
{value}
</TableCell>
) : indexRow % 2 !== 0 ? (
<TableCell style={{ borderBottom: '2px solid rgb(242, 243, 245)' }} key={`${indexRow}${indexCell}`}>
{value}
</TableCell>
) : (
<TableCell key={`${indexRow}${indexCell}`}>{value}</TableCell>
),
)}
</TableRow>
))}
<SchedulerEvents cellWidth={cellWidth} cellHeight={cellHeight} />
</TableBody>
</SchedulerWrapper>
<SchedulerWrapper>
<TableHead>
{days.map((day, indexCell) =>
indexCell === 0 ? (
<TableCell isHourColumn={true} key={indexCell}>
{day}
</TableCell>
) : (
<TableCell style={{ borderStyle: 'none none solid none' }} key={indexCell}>
{day}
</TableCell>
),
)}
</TableHead>
<TableBody>
{hours.map((hour, indexRow) => (
<TableRow key={indexRow}>
{[hour, '', '', '', '', ''].map((value, indexCell) =>
indexCell === 0 ? (
<TableCell isHourColumn={true} cellHeight={cellHeight} key={`${indexRow}${indexCell}`}>
{value}
</TableCell>
) : indexRow === 0 && indexCell === 1 ? (
<TableCell ref={cellRef} key={`${indexRow}${indexCell}`}>
{value}
</TableCell>
) : indexRow === 23 ? (
<TableCell style={{ borderBottom: '1px solid rgb(235, 235, 235)' }} key={`${indexRow}${indexCell}`}>
{value}
</TableCell>
) : indexRow === 5 ? (
<TableCell style={{ borderBottom: '1px solid rgb(235, 235, 235)' }} key={`${indexRow}${indexCell}`}>
{value}
</TableCell>
) : indexRow % 2 !== 0 ? (
<TableCell style={{ borderBottom: '1px solid rgb(235, 235, 235)' }} key={`${indexRow}${indexCell}`}>
{value}
</TableCell>
) : (
<TableCell key={`${indexRow}${indexCell}`}>{value}</TableCell>
),
)}
</TableRow>
))}
<SchedulerEvents cellWidth={cellWidth} cellHeight={cellHeight} />
</TableBody>
</SchedulerWrapper>
);
};