Refactor AssignmentCard
This commit is contained in:
parent
17e8dafee7
commit
661653f561
3 changed files with 254 additions and 169 deletions
|
|
@ -1,169 +0,0 @@
|
|||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
Typography,
|
||||
CardActionArea,
|
||||
Stack,
|
||||
Tooltip,
|
||||
Divider,
|
||||
} from '@mui/material';
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
import { capitalizeFirstLetter } from '../utils/capitalizeFirstLetter';
|
||||
|
||||
function AssignmentCard({ title, classrooms, dueDate, scores, layoutType }) {
|
||||
if (layoutType === 'desktop') {
|
||||
return (
|
||||
<Card
|
||||
sx={{
|
||||
position: 'relative',
|
||||
width: '100%',
|
||||
borderLeft: `5px solid ${classrooms[0].color}`,
|
||||
}}
|
||||
>
|
||||
{classrooms.length > 1 &&
|
||||
classrooms
|
||||
.filter((_, i) => i > 0)
|
||||
.map(c => (
|
||||
<div
|
||||
key={c.id}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
height: '100%',
|
||||
borderLeft: `5px solid ${c.color}`,
|
||||
left: 0,
|
||||
}}
|
||||
></div>
|
||||
))}
|
||||
<CardActionArea
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'start',
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ width: '100%' }}>
|
||||
<Tooltip title={title}>
|
||||
<Typography
|
||||
sx={{
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
display: '-webkit-box',
|
||||
WebkitLineClamp: 2,
|
||||
WebkitBoxOrient: 'vertical',
|
||||
fontSize: '17px',
|
||||
}}
|
||||
gutterBottom
|
||||
variant="h6"
|
||||
component="div"
|
||||
>
|
||||
{title}
|
||||
</Typography>
|
||||
</Tooltip>
|
||||
<Stack sx={{ width: '100%' }}>
|
||||
<Typography
|
||||
sx={{ fontWeight: 'bold' }}
|
||||
variant="p"
|
||||
component="div"
|
||||
>
|
||||
{classrooms.map(c => c.name).join(', ')}
|
||||
</Typography>
|
||||
<Divider sx={{ marginTop: '10px' }} />
|
||||
<Typography
|
||||
sx={{ marginTop: '10px' }}
|
||||
variant="p"
|
||||
component="div"
|
||||
>
|
||||
<strong>Data de entrega: </strong>{' '}
|
||||
{capitalizeFirstLetter(
|
||||
dayjs(dueDate).format('dddd, DD/MM | HH:mm[h]')
|
||||
)}
|
||||
</Typography>
|
||||
<Typography variant="p" component="div">
|
||||
<strong>Valor: </strong>
|
||||
{scores.map(s => s.value).join(', ')} pts
|
||||
</Typography>
|
||||
</Stack>
|
||||
</CardContent>
|
||||
</CardActionArea>
|
||||
</Card>
|
||||
);
|
||||
} else if (layoutType === 'mobile') {
|
||||
return (
|
||||
<Card
|
||||
sx={{
|
||||
width: 390,
|
||||
borderTop: `5px solid ${classrooms[0].color}`,
|
||||
}}
|
||||
>
|
||||
<CardActionArea
|
||||
sx={{
|
||||
position: 'relative',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
}}
|
||||
>
|
||||
{classrooms.length > 1 &&
|
||||
classrooms
|
||||
.filter((_, i) => i > 0)
|
||||
.map(c => (
|
||||
<div
|
||||
key={c.id}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
width: '100%',
|
||||
borderTop: `5px solid ${c.color}`,
|
||||
top: 0,
|
||||
}}
|
||||
></div>
|
||||
))}
|
||||
<CardContent sx={{ width: '100%' }}>
|
||||
<Tooltip title={title}>
|
||||
<Typography
|
||||
sx={{
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
display: '-webkit-box',
|
||||
WebkitLineClamp: 2,
|
||||
WebkitBoxOrient: 'vertical',
|
||||
fontSize: '17px',
|
||||
}}
|
||||
gutterBottom
|
||||
variant="h6"
|
||||
component="div"
|
||||
>
|
||||
{title}
|
||||
</Typography>
|
||||
</Tooltip>
|
||||
<Stack sx={{ width: '100%' }}>
|
||||
<Typography
|
||||
sx={{ fontWeight: 'bold' }}
|
||||
variant="p"
|
||||
component="div"
|
||||
>
|
||||
{classrooms.map(c => c.name).join(', ')}
|
||||
</Typography>
|
||||
<Divider sx={{ marginTop: '10px' }} />
|
||||
<Typography
|
||||
sx={{ marginTop: '10px' }}
|
||||
variant="p"
|
||||
component="div"
|
||||
>
|
||||
<strong>Data de entrega: </strong>
|
||||
{capitalizeFirstLetter(
|
||||
dayjs(dueDate).format('dddd, DD/MM | HH:mm[h]')
|
||||
)}
|
||||
</Typography>
|
||||
<Typography variant="p" component="div">
|
||||
<strong>Valor: </strong>
|
||||
{scores.map(s => s.value).join(', ')} pts
|
||||
</Typography>
|
||||
</Stack>
|
||||
</CardContent>
|
||||
</CardActionArea>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default AssignmentCard;
|
||||
118
src/components/AssignmentCard/index.js
Normal file
118
src/components/AssignmentCard/index.js
Normal file
|
|
@ -0,0 +1,118 @@
|
|||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
Typography,
|
||||
CardActionArea,
|
||||
Stack,
|
||||
Tooltip,
|
||||
Divider,
|
||||
} from '@mui/material';
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
import { capitalizeFirstLetter } from '../../utils/capitalizeFirstLetter';
|
||||
|
||||
import styles from './styles';
|
||||
|
||||
function AssignmentCard({ title, classrooms, dueDate, scores, layoutType }) {
|
||||
const {
|
||||
cardContainer,
|
||||
classroomLinesIndicator,
|
||||
cardActionArea,
|
||||
cardContent,
|
||||
typographyTitle,
|
||||
stackClassroomNames,
|
||||
typographyClassroomNames,
|
||||
dividerMiddle,
|
||||
typographyDueDate,
|
||||
} = styles[layoutType];
|
||||
|
||||
if (layoutType === 'desktop') {
|
||||
return (
|
||||
<Card sx={cardContainer(classrooms)}>
|
||||
{classrooms.length > 1 &&
|
||||
classrooms
|
||||
.filter((_, i) => i > 0)
|
||||
.map(c => <div key={c.id} style={classroomLinesIndicator(c)} />)}
|
||||
<CardActionArea sx={cardActionArea}>
|
||||
<CardContent sx={cardContent}>
|
||||
<Tooltip title={title}>
|
||||
<Typography
|
||||
sx={typographyTitle}
|
||||
gutterBottom
|
||||
variant="h6"
|
||||
component="div"
|
||||
>
|
||||
{title}
|
||||
</Typography>
|
||||
</Tooltip>
|
||||
<Stack sx={stackClassroomNames}>
|
||||
<Typography
|
||||
sx={typographyClassroomNames}
|
||||
variant="p"
|
||||
component="div"
|
||||
>
|
||||
{classrooms.map(c => c.name).join(', ')}
|
||||
</Typography>
|
||||
<Divider sx={dividerMiddle} />
|
||||
<Typography sx={typographyDueDate} variant="p" component="div">
|
||||
<strong>Data de entrega: </strong>{' '}
|
||||
{capitalizeFirstLetter(
|
||||
dayjs(dueDate).format('dddd, DD/MM | HH:mm[h]')
|
||||
)}
|
||||
</Typography>
|
||||
<Typography variant="p" component="div">
|
||||
<strong>Valor: </strong>
|
||||
{scores.map(s => s.value).join(', ')} pts
|
||||
</Typography>
|
||||
</Stack>
|
||||
</CardContent>
|
||||
</CardActionArea>
|
||||
</Card>
|
||||
);
|
||||
} else if (layoutType === 'mobile') {
|
||||
return (
|
||||
<Card sx={cardContainer(classrooms)}>
|
||||
<CardActionArea sx={cardActionArea}>
|
||||
{classrooms.length > 1 &&
|
||||
classrooms
|
||||
.filter((_, i) => i > 0)
|
||||
.map(c => <div key={c.id} style={classroomLinesIndicator(c)} />)}
|
||||
<CardContent sx={cardContent}>
|
||||
<Tooltip title={title}>
|
||||
<Typography
|
||||
sx={typographyTitle}
|
||||
gutterBottom
|
||||
variant="h6"
|
||||
component="div"
|
||||
>
|
||||
{title}
|
||||
</Typography>
|
||||
</Tooltip>
|
||||
<Stack sx={stackClassroomNames}>
|
||||
<Typography
|
||||
sx={typographyClassroomNames}
|
||||
variant="p"
|
||||
component="div"
|
||||
>
|
||||
{classrooms.map(c => c.name).join(', ')}
|
||||
</Typography>
|
||||
<Divider sx={dividerMiddle} />
|
||||
<Typography sx={typographyDueDate} variant="p" component="div">
|
||||
<strong>Data de entrega: </strong>
|
||||
{capitalizeFirstLetter(
|
||||
dayjs(dueDate).format('dddd, DD/MM | HH:mm[h]')
|
||||
)}
|
||||
</Typography>
|
||||
<Typography variant="p" component="div">
|
||||
<strong>Valor: </strong>
|
||||
{scores.map(s => s.value).join(', ')} pts
|
||||
</Typography>
|
||||
</Stack>
|
||||
</CardContent>
|
||||
</CardActionArea>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default AssignmentCard;
|
||||
136
src/components/AssignmentCard/styles.js
Normal file
136
src/components/AssignmentCard/styles.js
Normal file
|
|
@ -0,0 +1,136 @@
|
|||
// ========== Desktop ==========
|
||||
const desktopCardContainer = classrooms => ({
|
||||
position: 'relative',
|
||||
width: '100%',
|
||||
borderLeft: `5px solid ${classrooms[0].color}`,
|
||||
});
|
||||
|
||||
const desktopClassroomLinesIndicator = classroom => ({
|
||||
position: 'absolute',
|
||||
height: '100%',
|
||||
borderLeft: `5px solid ${classroom.color}`,
|
||||
left: 0,
|
||||
});
|
||||
|
||||
const desktopCardActionArea = {
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'start',
|
||||
};
|
||||
|
||||
const desktopCardContent = {
|
||||
width: '100%',
|
||||
};
|
||||
|
||||
const desktopTypographyTitle = {
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
display: '-webkit-box',
|
||||
WebkitLineClamp: 2,
|
||||
WebkitBoxOrient: 'vertical',
|
||||
fontSize: '17px',
|
||||
};
|
||||
|
||||
const desktopStackClassroomNames = {
|
||||
width: '100%',
|
||||
};
|
||||
|
||||
const desktopTypographyClassroomNames = {
|
||||
fontWeight: 'bold',
|
||||
};
|
||||
|
||||
const desktopDividerMiddle = {
|
||||
marginTop: '10px',
|
||||
};
|
||||
|
||||
const desktopTypographyDueDate = {
|
||||
marginTop: '10px',
|
||||
};
|
||||
|
||||
const desktop = {
|
||||
cardContainer: desktopCardContainer,
|
||||
classroomLinesIndicator: desktopClassroomLinesIndicator,
|
||||
cardActionArea: desktopCardActionArea,
|
||||
cardContent: desktopCardContent,
|
||||
typographyTitle: desktopTypographyTitle,
|
||||
stackClassroomNames: desktopStackClassroomNames,
|
||||
typographyClassroomNames: desktopTypographyClassroomNames,
|
||||
dividerMiddle: desktopDividerMiddle,
|
||||
typographyDueDate: desktopTypographyDueDate,
|
||||
};
|
||||
|
||||
// ========== Mobile ==========
|
||||
const mobileCardContainer = classrooms => ({
|
||||
width: 390,
|
||||
borderTop: `5px solid ${classrooms[0].color}`,
|
||||
});
|
||||
|
||||
const mobileClassroomLinesIndicator = classroom => ({
|
||||
position: 'absolute',
|
||||
width: '100%',
|
||||
borderTop: `5px solid ${classroom.color}`,
|
||||
top: 0,
|
||||
});
|
||||
|
||||
const mobileCardActionArea = {
|
||||
position: 'relative',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
};
|
||||
|
||||
const mobileCardContent = {
|
||||
width: '100%',
|
||||
};
|
||||
|
||||
const mobileTypographyTitle = {
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
display: '-webkit-box',
|
||||
WebkitLineClamp: 2,
|
||||
WebkitBoxOrient: 'vertical',
|
||||
fontSize: '17px',
|
||||
};
|
||||
|
||||
const mobileStackClassroomNames = {
|
||||
width: '100%',
|
||||
};
|
||||
|
||||
const mobileTypographyClassroomNames = {
|
||||
fontWeight: 'bold',
|
||||
};
|
||||
|
||||
const mobileDividerMiddle = {
|
||||
marginTop: '10px',
|
||||
};
|
||||
|
||||
const mobileTypographyDueDate = {
|
||||
marginTop: '10px',
|
||||
};
|
||||
|
||||
const mobile = {
|
||||
cardContainer: mobileCardContainer,
|
||||
classroomLinesIndicator: mobileClassroomLinesIndicator,
|
||||
cardActionArea: mobileCardActionArea,
|
||||
cardContent: mobileCardContent,
|
||||
typographyTitle: mobileTypographyTitle,
|
||||
stackClassroomNames: mobileStackClassroomNames,
|
||||
typographyClassroomNames: mobileTypographyClassroomNames,
|
||||
dividerMiddle: mobileDividerMiddle,
|
||||
typographyDueDate: mobileTypographyDueDate,
|
||||
};
|
||||
|
||||
// ========== Unset ==========
|
||||
const unset = {
|
||||
cardContainer: null,
|
||||
classroomLinesIndicator: null,
|
||||
cardActionArea: null,
|
||||
cardContent: null,
|
||||
typographyTitle: null,
|
||||
stackClassroomNames: null,
|
||||
typographyClassroomNames: null,
|
||||
dividerMiddle: null,
|
||||
typographyDueDate: null,
|
||||
};
|
||||
|
||||
const styles = { desktop, mobile, unset };
|
||||
export default styles;
|
||||
Loading…
Reference in a new issue