@abbl/material-calendar
Version:
Calendar component build with React and Material-UI
118 lines • 3.59 kB
JavaScript
import { makeStyles, Typography } from '@material-ui/core';
import { isToday } from 'date-fns';
import React from 'react';
var useStyles = makeStyles(function (theme) { return ({
common: {
textAlign: 'center',
borderRadius: '50%',
color: theme.palette.text.primary,
},
largeVariant: {
width: theme.spacing(6),
height: theme.spacing(6),
},
smallVariant: {
width: theme.spacing(3),
height: theme.spacing(3),
},
backgroundCommon: {
backgroundColor: 'inherit',
},
backgroundToday: {
color: theme.palette.getContrastText(theme.palette.primary.main),
backgroundColor: theme.palette.primary.main,
},
hoverCommon: {
'&:hover': {
backgroundColor: theme.palette.grey[200],
cursor: 'pointer'
},
},
hoverToday: {
'&:hover': {
backgroundColor: theme.palette.primary.dark,
cursor: 'pointer'
},
},
textSmall: {
lineHeight: 1.7,
},
textLarge: {
lineHeight: 2.4,
},
textColorGrey: {
color: theme.palette.grey[500],
},
}); });
/**
* Component based on Avatar design of Material-UI.
*
* Created due default Avatar component being too heavy to render in YearView,
* which degraded the performance significantly.
*
* @privateRemarks
* Remember to keep this component as lightweight as you can.
*/
export default function DateAvatar(props) {
var classes = useStyles();
var rootClasses = [classes.common, getRootVariant(), getBackgroundVariant(), getHoverVariant()].join(' ');
var textClasses = [getTextSize(), getTextColor()].join(' ');
/*
* Text styling functions
*/
function getTextVariant() {
return props.size && props.size === 'small' ? 'subtitle2' : 'h6';
}
function getTextSize() {
return props.size && props.size === 'small' ? classes.textSmall : classes.textLarge;
}
function getTextColor() {
if (props.grayOutText) {
return classes.textColorGrey;
}
return '';
}
function getTypographyText() {
return (React.createElement(Typography, { variant: getTextVariant(), className: textClasses }, props.date.getDate()));
}
function getPlainText() {
return React.createElement("span", { className: textClasses + ' MuiTypography-' + getTextVariant() }, props.date.getDate());
}
function getText() {
if (props.plainText) {
return getPlainText();
}
return getTypographyText();
}
/*
* Component styling functions.
*/
function getRootVariant() {
return props.size && props.size === 'small' ? classes.smallVariant : classes.largeVariant;
}
function getHoverVariant() {
if (props.highlightOnHover) {
return isTodayVariant() ? classes.hoverToday : classes.hoverCommon;
}
return '';
}
function getBackgroundVariant() {
return isTodayVariant() ? classes.backgroundToday : classes.backgroundCommon;
}
/*
* Common styling functions.
*/
function isTodayVariant() {
return isToday(props.date) && !props.disableTodayBackground;
}
/*
* Events handling functions.
*/
function forwardOnClick(event) {
if (props.onClick) {
props.onClick(event, props.date);
}
}
return (React.createElement("div", { className: rootClasses, onClick: forwardOnClick }, getText()));
}
//# sourceMappingURL=DateAvatar.js.map