@abbl/material-calendar
Version:
Calendar component build with React and Material-UI
45 lines • 1.72 kB
JavaScript
import { makeStyles, Typography } from '@material-ui/core';
import React, { useLayoutEffect, useMemo, useRef, useState } from 'react';
var useStyles = makeStyles(function (theme) { return ({
root: {
backgroundColor: theme.palette.background.paper,
textAlign: 'center',
},
timeText: {
color: theme.palette.grey[800],
},
}); });
export default function TimeGrid(props) {
var _a = useState(0), fontHeight = _a[0], setFontHeight = _a[1];
var numberOfHours = 24;
var classes = useStyles();
var typographyRef = useRef(null);
useLayoutEffect(function () {
if (typographyRef) {
var typographyHeight = typographyRef.current.clientHeight;
setFontHeight(typographyHeight);
}
}, []);
function createGrid() {
var elements = [];
for (var i = 1; i < numberOfHours; i++) {
elements.push(React.createElement("div", { key: i, style: { height: props.cellHeight } },
React.createElement(Typography, { variant: "subtitle2", className: classes.timeText, innerRef: typographyRef },
i,
":00")));
}
return elements;
}
/**
* Calculates offset that helps with aligning of grids
*/
function getOffsetTop() {
if (typographyRef.current) {
// gridElementHeight - halfOfFontSize.
return props.cellHeight - (fontHeight / 2);
}
return 0;
}
return React.createElement("div", { style: { marginTop: getOffsetTop(), width: props.width }, className: classes.root }, useMemo(function () { return createGrid(); }, [numberOfHours]));
}
//# sourceMappingURL=TimeGrid.js.map