@abbl/material-calendar
Version:
Calendar component build with React and Material-UI
76 lines • 3.38 kB
JavaScript
import { makeStyles } from '@material-ui/core';
import { areIntervalsOverlapping } from 'date-fns';
import React, { useMemo, useState } from 'react';
import EventPopover from '../../../../common/components/eventPopover/EventPopover';
import usePopover from '../../../../common/hooks/popover/usePopover';
import DayEvent from './DayEvent';
var useStyles = makeStyles(function (theme) { return ({
root: {
position: 'absolute',
width: 'calc(100% - ' + theme.spacing(2) + 'px)',
left: 0,
top: 0,
right: 0,
bottom: 0,
// Preventing overflow of the grid.
overflowY: 'hidden',
},
}); });
/*
* Every cell in the grid must have the same height,
* otherwise grid won't be displayed correctly.
*/
var cellHeight = 48;
/**
* Grid that displays all provided calendarEvents over DayGrid.
* To make grid more readable events are "chained" together to share available space.
*/
export default function DayEventGrid(props) {
// Keeps track on which CalendarEvent
var _a = useState(), calendarEvent = _a[0], setCalendarEvent = _a[1];
// State of the popover used to display details about focused event.
var popoverState = usePopover();
var classes = useStyles();
function renderGrid() {
var elements = [];
/*
* By creating an object we allocate memory that can be shared between multiple components.
* Which allows them to adjust their position in a chain.
*/
var chainCount = {
count: 1,
};
for (var i = 0; i < props.calendarEvents.length; i++) {
var previousElement = props.calendarEvents[i - 1];
var currentElement = props.calendarEvents[i];
// If events are overlapping we increase the count property inside of chainCount object.
// Otherwise we "reset" the object.
if (areElementsOverlapping(previousElement, currentElement)) {
chainCount.count += 1;
}
else {
chainCount = { count: 1 };
}
elements.push(React.createElement("div", { key: currentElement.id },
React.createElement(DayEvent, { onClick: handleDayEventSelection, calendarEvent: currentElement, cellHeight: cellHeight, chainCount: chainCount,
// Allocating memory for the count property, since it will
// become "undefined" once the loop finishes it's work.
orderInChain: Object.assign({}, chainCount).count })));
}
return elements;
}
function areElementsOverlapping(previousElement, currentElement) {
if (previousElement) {
return areIntervalsOverlapping({ start: previousElement.startedAt, end: previousElement.finishedAt }, { start: currentElement.startedAt, end: currentElement.finishedAt });
}
return false;
}
function handleDayEventSelection(mouseEvent, calendarEvent) {
setCalendarEvent(calendarEvent);
popoverState.openPopover(mouseEvent);
}
return (React.createElement("div", { className: classes.root },
React.createElement(EventPopover, { popoverState: popoverState, calendarEvent: calendarEvent }),
useMemo(function () { return renderGrid(); }, [props.calendarEvents])));
}
//# sourceMappingURL=DayEventGrid.js.map