@abbl/material-calendar
Version:
Calendar component build with React and Material-UI
70 lines • 2.86 kB
JavaScript
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
import { Box, makeStyles, Popover, Typography } from '@material-ui/core';
import { format } from 'date-fns';
import React from 'react';
import toggleEventPopover from '../../../common/hooks/eventPopover/toggleEventPopover';
import useEventPopover from '../../../common/hooks/eventPopover/useEventPopover';
import bindPopover from '../../../common/hooks/popover/bindPopover';
import usePopover from '../../../common/hooks/popover/usePopover';
import MonthEventDot from './MonthEventDot';
var useStyles = makeStyles(function (theme) { return ({
root: {
transition: 'background-color 0.15s linear',
'&:hover': {
backgroundColor: theme.palette.grey[300],
transition: 'background-color 0.15s linear',
cursor: 'pointer'
},
},
disableTextSelection: {
WebkitTouchCallout: 'none',
WebkitUserSelect: 'none',
KhtmlUserSelect: 'none',
MozUserSelect: 'none',
msUserSelect: 'none',
userSelect: 'none',
},
}); });
export default function MonthEvent(props) {
var popoverState = usePopover();
var eventPopover = useEventPopover();
var classes = useStyles();
function getPopoverContent() {
if (eventPopover) {
return React.createElement(eventPopover, { popoverState: popoverState, calendarEvent: props.event });
}
return null;
}
return (React.createElement(Box, { display: "flex", width: "100%", alignItems: "center", alignContent: "center", className: classes.root },
React.createElement(MonthEventDot, null),
React.createElement("div", __assign({ style: {
flex: 1,
overflow: 'hidden',
textOverflow: 'ellipsis',
minWidth: 0,
whiteSpace: 'nowrap',
width: 0,
} }, toggleEventPopover(popoverState, eventPopover)),
React.createElement(Typography, { variant: "caption", className: classes.disableTextSelection },
format(props.event.startedAt, 'HH:mm'),
", ",
props.event.title)),
React.createElement(Popover, __assign({}, bindPopover(popoverState), { anchorOrigin: {
vertical: 'top',
horizontal: 'right',
}, transformOrigin: {
vertical: 'top',
horizontal: 'left',
} }), getPopoverContent())));
}
//# sourceMappingURL=MonthEvent.js.map