@abbl/material-calendar
Version:
Calendar component build with React and Material-UI
173 lines • 5.69 kB
JavaScript
import { makeStyles, Typography } from '@material-ui/core';
import { differenceInMinutes, format } from 'date-fns';
import React, { Fragment } from 'react';
var useStyles = makeStyles(function (theme) { return ({
root: {
color: 'white',
position: 'absolute',
},
card: {
backgroundColor: theme.palette.primary.main,
color: 'white',
height: 'calc(100%)',
borderRadius: '4px',
borderTop: '1px solid white',
'&:hover': {
cursor: 'pointer'
}
},
cardBorder: {
border: '1px solid white',
borderRight: 0,
},
textContainerCommon: {
paddingLeft: 4,
height: '100%',
overflow: 'hidden',
},
textContainerLarge: {
paddingTop: 4,
},
fontSmall: {
lineHeight: '12px',
fontSize: '12px',
display: 'inline-block',
verticalAlign: 'top',
},
fontMedium: {
lineHeight: '13px',
fontSize: '13px',
display: 'inline-block',
verticalAlign: 'middle',
},
fontRegular: {
lineHeight: '14px',
fontSize: '13px',
},
}); });
export default function DayEvent(props) {
var classes = useStyles();
var numberOfSections = getNumberOfSections();
var isSmallVariantActive = numberOfSections <= 2;
var cardClasses = [classes.card, getCardBorder()].join(' ');
var containerClassses = [classes.textContainerCommon, getContainerVariant()].join(' ');
var fontClasses = getFontVariant();
function getNumberOfSections() {
var durationInMinutes = differenceInMinutes(props.calendarEvent.finishedAt, props.calendarEvent.startedAt);
var result = Math.round(durationInMinutes / 15);
// Always display at least one section.
return result >= 1 ? result : 1;
}
/**
* Divides length of the event into the sections
* and multiplies it by size of the cell.
*/
function getHeight() {
return numberOfSections * (props.cellHeight / 4);
}
/**
* Calculates remaining width of the element by
* subtracking positionInChain from 100%.
*/
function getWidth() {
return String(100 - getPositionInChain() + '%');
}
/**
* Calculates X position of the element based on
* size of the chainCount and orderInChain of the element.
*/
function getPositionLeft() {
return String(getPositionInChain() + '%');
}
/**
* Calculates which part of the chain belongs
* to this element.
*/
function getPositionInChain() {
return (100 / props.chainCount.count) * (props.orderInChain - 1);
}
/**
* Calculates Y position of the element based on
* when the event startedAt property.
*/
function getPositionTop() {
var startedAt = props.calendarEvent.startedAt;
// (hours + (minutes/hour)) * cellHeight.
return (startedAt.getHours() + roundMinutes(startedAt) / 60) * props.cellHeight;
}
/**
* Rounds minutes to provided values to make
* display of the grid "snappy".
*/
function roundMinutes(startedAt) {
var startedAtMinutes = startedAt.getMinutes();
var points = [45, 30, 15, 0];
for (var _i = 0, points_1 = points; _i < points_1.length; _i++) {
var point = points_1[_i];
if (startedAtMinutes >= point) {
return point;
}
}
return 0;
}
/*
* Card related functions.
*/
function forwardOnClick(mouseEvent) {
if (props.onClick) {
props.onClick(mouseEvent, props.calendarEvent);
}
}
function getEventTitle() {
if (isSmallVariantActive) {
return String(props.calendarEvent.title + ',');
}
return props.calendarEvent.title;
}
function getEventDuration() {
return String(formatHour(props.calendarEvent.startedAt) + ' - ' + formatHour(props.calendarEvent.finishedAt));
}
function getCardBorder() {
if (props.orderInChain > 1) {
return classes.cardBorder;
}
return '';
}
function getFontVariant() {
switch (numberOfSections) {
case 1:
return classes.fontSmall;
case 2:
return classes.fontMedium;
default:
return classes.fontRegular;
}
}
function formatHour(hour) {
return format(hour, 'HH:mm');
}
function getContainerVariant() {
return isSmallVariantActive ? '' : classes.textContainerLarge;
}
function getText() {
if (numberOfSections <= 2) {
return (React.createElement(Typography, { variant: "subtitle2", className: fontClasses, noWrap: true },
getEventTitle(),
" ",
getEventDuration()));
}
return (React.createElement(Fragment, null,
React.createElement(Typography, { variant: "subtitle2", className: fontClasses, noWrap: true }, getEventTitle()),
' ',
React.createElement(Typography, { variant: "subtitle2", className: fontClasses, noWrap: true }, getEventDuration())));
}
return (React.createElement("div", { style: {
width: getWidth(),
height: getHeight(),
top: getPositionTop(),
left: getPositionLeft(),
}, className: classes.root },
React.createElement("div", { className: cardClasses, onClick: forwardOnClick },
React.createElement("div", { className: containerClassses }, getText()))));
}
//# sourceMappingURL=DayEvent.js.map