@abbl/material-calendar
Version:
Calendar component build with React and Material-UI
68 lines • 2.98 kB
JavaScript
import { makeStyles, Typography, useTheme } from '@material-ui/core';
import React from 'react';
import DateAvatar from '../../../common/components/dateAvatar/DateAvatar';
import ExpandableContainer from '../../../common/components/expandableContainer/ExpandableContainer';
import useLocale from '../../../common/hooks/locale/useLocale';
import useViewChange from '../../../common/hooks/viewController/useViewChange';
import DayView from '../../day/DayView';
import MonthEvent from '../event/MonthEvent';
import MonthEventListPopover from '../eventListPopover/MonthEventListPopover';
var useStyles = makeStyles(function (theme) { return ({
root: {
display: 'flex',
flex: 1,
borderBottom: '1px solid',
borderBottomColor: theme.palette.grey[300],
borderRight: '1px solid',
borderRightColor: theme.palette.grey[300],
},
dayDate: {
display: 'flex',
justifyContent: 'center',
flexDirection: 'row',
padding: 2,
flexWrap: 'wrap',
minHeight: 40,
},
elementContent: {
display: 'flex',
flexDirection: 'column',
flexGrow: 1,
},
}); });
function MonthGridElement(props) {
var monthEvents = getMonthEvents();
var viewChange = useViewChange();
var locale = useLocale();
var theme = useTheme();
var classes = useStyles();
function changeView() {
viewChange.changeView(DayView, props.date);
}
function displayDayDate() {
return (React.createElement("div", { className: classes.dayDate },
displayDayName(),
React.createElement(DateAvatar, { date: props.date, size: "small", highlightOnHover: true, onClick: changeView })));
}
function displayDayName() {
if (props.displayDayOfWeekIndication) {
return (React.createElement("div", { style: { width: '100%', textAlign: 'center' } },
React.createElement(Typography, { variant: "subtitle2" }, locale.daysShort[props.date.getDay()])));
}
return null;
}
function getMonthEvents() {
if (props.dayEvents) {
return props.dayEvents.map(function (dayEvent) { return React.createElement(MonthEvent, { event: dayEvent, key: dayEvent.id }); });
}
return [];
}
return (React.createElement("div", { style: {
backgroundColor: props.indicatePreviousMonth ? theme.palette.grey[50] : theme.palette.common.white,
}, className: classes.root },
React.createElement("div", { className: classes.elementContent },
displayDayDate(),
React.createElement(ExpandableContainer, { elementHeight: 20, elements: monthEvents, expandMoreComponent: function (remainingElements) { return (React.createElement(MonthEventListPopover, { date: props.date, remainingEvents: remainingElements, eventsComponent: monthEvents })); } }))));
}
export default MonthGridElement;
//# sourceMappingURL=MonthGridElement.js.map