@abbl/material-calendar
Version:
Calendar component build with React and Material-UI
52 lines • 1.78 kB
JavaScript
import { makeStyles } from '@material-ui/core';
import React, { useLayoutEffect, useState } from 'react';
var useStyles = makeStyles(function (theme) { return ({
indicator: {
'&::before': {
content: '""',
position: 'absolute',
marginTop: -4,
marginLeft: -4.5,
width: 10,
height: 10,
borderRadius: '50%',
backgroundColor: '#ea4335',
},
position: 'absolute',
left: 0,
top: 0,
right: 0,
bottom: 0,
height: '2px',
backgroundColor: '#ea4335',
width: '100%',
},
}); });
export default function HourIndicator(props) {
var pixelPerMinute = props.cellHeight / 60;
var _a = useState(new Date()), time = _a[0], setTime = _a[1];
var classes = useStyles();
var positionInterval = null;
useLayoutEffect(function () {
// Setting a timeout to start the interval exactly on minute start.
var timeout = setTimeout(function () {
setTime(new Date());
startPositionInterval();
}, (60 - time.getSeconds()) * 1000);
return function () {
clearTimeout(timeout);
clearInterval(positionInterval);
};
}, []);
function startPositionInterval() {
// Update time saved in component every minute.
positionInterval = setInterval(function () {
setTime(new Date());
}, 60 * 1000);
}
function getIndicatorPosition() {
return (time.getHours() * props.cellHeight) + (time.getMinutes() * pixelPerMinute);
}
return (React.createElement("div", { className: classes.indicator, style: { top: getIndicatorPosition() } }));
}
//# sourceMappingURL=HourIndicator.js.map