@abbl/material-calendar
Version:
Calendar component build with React and Material-UI
47 lines • 1.98 kB
JavaScript
import { makeStyles } from '@material-ui/core';
import React from 'react';
import DateAvatar from '../../../../common/components/dateAvatar/DateAvatar';
import useViewChange from '../../../../common/hooks/viewController/useViewChange';
import DayView from '../../DayView';
import DayHeaderLabel from './DayHeaderLabel';
var useStyle = makeStyles(function (theme) { return ({
root: {
width: '100%',
backgroundColor: 'white',
borderBottom: '1px solid',
borderBottomColor: theme.palette.grey[300],
},
headerContentWrapper: {
display: 'flex',
flexDirection: 'row',
alignContent: 'center',
height: '100%',
paddingTop: theme.spacing(1),
paddingBottom: theme.spacing(1),
},
headerContent: {
marginLeft: function (props) { return props.marginLeftOffset; },
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
},
}); });
function DayHeader(props) {
var classes = useStyle({ marginLeftOffset: props.headerContentLeftOffset ? props.headerContentLeftOffset : 0 });
var viewChange = useViewChange();
function getContentJustification() {
return props.center ? 'center' : 'normal';
}
function changeView() {
if (props.openChildView) {
viewChange.changeView(DayView, props.highlightDate);
}
}
return (React.createElement("div", { className: classes.root },
React.createElement("div", { className: classes.headerContentWrapper, style: { justifyContent: getContentJustification() } },
React.createElement("div", { className: classes.headerContent },
React.createElement(DayHeaderLabel, { highlightDate: props.highlightDate }),
React.createElement(DateAvatar, { date: props.highlightDate, size: "large", onClick: changeView, highlightOnHover: props.openChildView })))));
}
export default DayHeader;
//# sourceMappingURL=DayHeader.js.map