@pnp/spfx-controls-react
Version:
Reusable React controls for SharePoint Framework solutions
35 lines • 2.54 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Day = void 0;
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var react_components_1 = require("@fluentui/react-components");
var RenderEventToDayOfMonth_1 = require("./RenderEventToDayOfMonth");
var date_fns_1 = require("date-fns");
var useCalendarStyles_1 = require("./hooks/useCalendarStyles");
var stack_1 = require("./stack");
var Card_1 = require("./Card");
var Day = function (props) {
var day = props.day, currentMonth = props.currentMonth, events = props.events, date = props.date, columnHeight = props.columnHeight, onDayClick = props.onDayClick;
var styles = (0, useCalendarStyles_1.useCalendarStyles)().styles;
var currentDate = new Date();
var _a = React.useState(false), isEventHovered = _a[0], setIsEventHovered = _a[1];
var isCurrentDayAndMonth = React.useMemo(function () {
return (0, date_fns_1.isSameDay)(date, currentDate);
}, [date, currentDate]);
var renderCurrentDayLabel = React.useMemo(function () {
return (React.createElement(stack_1.Stack, { direction: "horizontal", justifyContent: "start", alignItems: "center", paddingLeft: 'm', paddingRight: 'm' },
React.createElement(react_components_1.Body2, { className: styles.currentDayLabel },
day,
" ",
currentDate.toLocaleString('default', { month: 'short' }))));
}, [day]);
var handleCardHoverChange = React.useCallback(function (isHovered) {
setIsEventHovered(isHovered);
}, []);
return (React.createElement(React.Fragment, null,
React.createElement(Card_1.Card, { onClick: onDayClick ? function () { return onDayClick(date); } : undefined, className: (0, react_components_1.mergeClasses)(styles.cardDay, currentMonth ? '' : styles.otherMonthDay, isCurrentDayAndMonth ? styles.currentDay : '', !isEventHovered ? styles.cardDayOnHover : ''), cardHeader: isCurrentDayAndMonth ? (renderCurrentDayLabel) : (React.createElement(stack_1.Stack, { direction: "horizontal", paddingLeft: 'm', paddingRight: 'm' },
React.createElement(react_components_1.Body2, null, day))), paddingTop: "m", paddingBottom: "m", paddingLeft: "0px", paddingRight: "0px", cardBody: React.createElement(RenderEventToDayOfMonth_1.RenderEventToDayOfMonth, { events: events, date: date, onCardHoverChange: handleCardHoverChange, columnHeight: columnHeight - 60 }) })));
};
exports.Day = Day;
//# sourceMappingURL=Day.js.map