@abbl/material-calendar
Version:
Calendar component build with React and Material-UI
62 lines • 2.59 kB
JavaScript
import { Grid, makeStyles } from '@material-ui/core';
import { eachMonthOfInterval, endOfYear, isSameYear, startOfYear } from 'date-fns';
import React, { Fragment, useContext, useEffect, useMemo, useState } from 'react';
import CompactMonth from '../../../../common/components/compactMonth/CompactMonth';
import { ViewContext } from '../../../../common/contexts/ViewContext';
var useStyles = makeStyles(function (theme) { return ({
root: {
marginTop: 4,
},
}); });
export default function YearGrid(props) {
var viewContext = useContext(ViewContext);
var classes = useStyles();
/**
* Grid keeps track of what year it's currently displaying,
* to prevent unnecessary re-renders due to change of highlightDate
* in viewContext.
*/
var _a = useState(), year = _a[0], setYear = _a[1];
useEffect(function () {
/**
* Re-render grid if highlightDate changed
* to different year than previously.
*/
changeGridYear();
}, [viewContext.highlightDate]);
/**
* Creates CompactMonth component for every month in year.
*/
function createCompactMonths() {
return eachMonthOfInterval({
start: startOfYear(viewContext.highlightDate),
end: endOfYear(viewContext.highlightDate),
}).map(function (month) { return (React.createElement(Fragment, { key: 'year-month-' + month.getMonth() },
React.createElement(Grid, { item: true, xs: 12, sm: 6, md: 3, lg: 3, xl: 3 },
React.createElement(CompactMonth, { month: month, onDateAvatarClick: onDateAvatarClickMiddleware })))); });
}
/**
* Sets highlightDate to the day that was selected
* by user in CompactMonth and sets grid year to
* highlightDate only if it's different then the
* one selected now.
*
* Forwards the callback to parent component.
*/
function onDateAvatarClickMiddleware(event, day) {
viewContext.setHighlightDate(day);
// Forward event to parent.
props.onDateAvatarClick(event);
}
/**
* Changes currently displayed year only
* If It's different than previous one.
*/
function changeGridYear() {
if (!isSameYear(year, viewContext.highlightDate)) {
setYear(viewContext.highlightDate);
}
}
return (React.createElement(Grid, { container: true, direction: "row", justify: "center", alignItems: "center", className: classes.root }, useMemo(function () { return createCompactMonths(); }, [year])));
}
//# sourceMappingURL=YearGrid.js.map