@abbl/material-calendar
Version:
Calendar component build with React and Material-UI
64 lines • 3.01 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 '../../month/event/MonthEventDot';
var useStyles = makeStyles(function (theme) { return ({
root: {
transition: 'background-color 0.15s linear',
'&:hover': {
backgroundColor: theme.palette.grey[100],
transition: 'background-color 0.15s linear',
},
borderRadius: '16px',
marginBottom: theme.spacing(0.25),
},
timeSectionSpacer: {
width: theme.spacing(1),
},
}); });
export default function ScheduleViewEvent(props) {
var popoverState = usePopover();
var eventPopover = useEventPopover(props.popover);
var classes = useStyles();
function getPopoverContent() {
if (eventPopover) {
return React.createElement(eventPopover, { popoverState: popoverState, calendarEvent: props.event });
}
return null;
}
return (React.createElement(Box, { className: classes.root },
React.createElement(Box, __assign({}, toggleEventPopover(popoverState, eventPopover), { display: "flex", alignItems: "center", height: "100%", width: "100%" }),
React.createElement(Box, { display: "flex", width: 160, alignItems: "center", justifyContent: "flex-start" },
React.createElement("div", { className: classes.timeSectionSpacer }),
React.createElement(MonthEventDot, { size: "large" }),
React.createElement("div", { className: classes.timeSectionSpacer }),
React.createElement(Typography, { variant: "body2" },
format(props.event.startedAt, 'HH:mm'),
"-",
format(props.event.finishedAt, 'HH:mm'))),
React.createElement(Box, null,
React.createElement(Typography, { variant: "subtitle2" }, props.event.title))),
React.createElement(Popover, __assign({}, bindPopover(popoverState), { anchorOrigin: {
vertical: 'top',
horizontal: 'center',
}, transformOrigin: {
vertical: 'top',
horizontal: 'center',
} }), getPopoverContent())));
}
//# sourceMappingURL=ScheduleViewEvent.js.map