@drivy/cobalt/components/Calendar/CalendarRangePicker/CalendarRangePickerDay.js

Opinionated design system for Drivy's projects.

import React from 'react';
import cx from 'classnames';
import { format } from 'date-fns';
import DayTooltip from './DayTooltip.js';

function CalendarRangePickerDay({ date, isToday, isStartDay, isEndDay, isSelected, isDisabled, isInvalid, isRange, isActive, hasNotification, tooltipMessage, onSelect, onMouseEnter, onMouseLeave, hoverTooltipMessage, }) {
    const handleSelectDate = () => {
        !isDisabled && !isInvalid && onSelect(new Date(date));
    };
    const jsx = (React.createElement("div", { className: cx("cobalt-CalendarRangePicker__day", {
            "cobalt-CalendarRangePicker__day--today": isToday,
            "cobalt-CalendarRangePicker__day--startDay": isStartDay,
            "cobalt-CalendarRangePicker__day--endDay": isEndDay,
            "cobalt-CalendarRangePicker__day--range": isRange,
            "cobalt-CalendarRangePicker__day--selected": isSelected,
            "cobalt-CalendarRangePicker__day--active": isActive,
            "cobalt-CalendarRangePicker__day--invalid": isInvalid,
            "cobalt-CalendarRangePicker__day--disabled": isDisabled,
        }), onMouseEnter: () => {
            onMouseEnter(date, !!isDisabled);
        }, onMouseLeave: () => {
            onMouseLeave && onMouseLeave(date);
        }, onClick: handleSelectDate, "data-day": format(date, "yyyy-MM-dd") },
        date.getDate(),
        hasNotification && (React.createElement("div", { className: "cobalt-CalendarRangePicker__day-notification-container" },
            React.createElement("div", { className: "cobalt-CalendarRangePicker__day-notification" })))));
    if (tooltipMessage)
        return (React.createElement(DayTooltip, { visible: true, content: React.createElement("div", { className: "c-text-body-sm" }, tooltipMessage), placement: isStartDay ? "top" : "bottom" }, jsx));
    return hoverTooltipMessage ? (React.createElement(DayTooltip, { trigger: "mouseenter", content: React.createElement("div", { className: "c-text-body-sm" }, hoverTooltipMessage), placement: "top", interactive: false }, jsx)) : (jsx);
}
function areEqual(prevProps, nextProps) {
    return (prevProps.isSelected === nextProps.isSelected &&
        prevProps.isActive === nextProps.isActive &&
        prevProps.isStartDay === nextProps.isStartDay &&
        prevProps.isEndDay === nextProps.isEndDay &&
        prevProps.isInvalid === nextProps.isInvalid &&
        prevProps.isRange === nextProps.isRange &&
        prevProps.hasNotification === nextProps.hasNotification &&
        prevProps.isDisabled === nextProps.isDisabled &&
        prevProps.isEditingStartDate === nextProps.isEditingStartDate &&
        prevProps.isEditingEndDate === nextProps.isEditingEndDate);
}
const MemoizedComponent = React.memo(CalendarRangePickerDay, areEqual);
MemoizedComponent.displayName = "CalendarRangePickerDay";

export { MemoizedComponent as CalendarRangePickerDay };
//# sourceMappingURL=CalendarRangePickerDay.js.map