@abbl/material-calendar
Version:
Calendar component build with React and Material-UI
35 lines • 1.65 kB
JavaScript
import { makeStyles } from '@material-ui/core';
import React from 'react';
import TimeGrid from '../../../../common/components/timeGrid/TimeGrid';
import TimeGridLines from '../../../../common/components/timeGrid/TimeGridLines';
import { NAVIGATION_BAR_HEIGHT } from '../../../../core/components/navigationBar/NavigationBar';
var useStyles = makeStyles(function (theme) { return ({
root: {
minWidth: 56,
overflow: 'hidden',
},
headerSpacer: {
backgroundColor: 'rgba(0, 0, 0, 0.0);',
width: '100%',
borderBottom: '1px solid',
borderBottomColor: theme.palette.grey[300],
},
}); });
var WeekTimeGrid = React.forwardRef(function (props, ref) {
var classes = useStyles();
function getHeight() {
// FIXME: 32px - is a cheap trick to align the grid and ignore shifting height of WeekGrid
return "calc(100vh - " + NAVIGATION_BAR_HEIGHT + "px - " + props.headerHeight + "px - 32px)";
}
function getHeaderSpacerHeight() {
// Minus one pixel cause border adds one extra pixel.
return props.headerHeight;
}
return (React.createElement("div", { style: { flexBasis: '56px' } },
React.createElement("div", { className: classes.headerSpacer, style: { minHeight: getHeaderSpacerHeight() } }),
React.createElement("div", { className: classes.root, ref: ref, style: { maxHeight: getHeight(), display: 'flex' } },
React.createElement(TimeGrid, { width: 48, cellHeight: 48 }),
React.createElement(TimeGridLines, { cellHeight: 48 }))));
});
export default WeekTimeGrid;
//# sourceMappingURL=WeekTimeGrid.js.map