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

Opinionated design system for Drivy's projects.

import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
import cx from 'classnames';
import { format } from 'date-fns';
import React, { useRef, useState } from 'react';
import Popover from '../../Popover/index.js';
import { tooltipConfig } from '../../Popover/tooltipConfig.js';

function CalendarRangePickerDay({ date, isToday, isStartDay, isEndDay, isSelected, isDisabled, isInvalid, isRange, isActive, hasNotification, tooltipMessage, onSelect, onMouseEnter, onMouseLeave, hoverTooltipMessage, }) {
    const dayRef = useRef(null);
    const [isHovered, setIsHovered] = useState(false);
    const handleSelectDate = () => {
        !isDisabled && !isInvalid && onSelect(new Date(date));
    };
    const jsx$1 = (jsxs("button", { ref: dayRef, 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);
            setIsHovered(true);
        }, onMouseLeave: () => {
            onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(date);
            setIsHovered(false);
        }, onClick: handleSelectDate, "data-day": format(date, "yyyy-MM-dd"), type: "button", children: [date.getDate(), hasNotification && (jsx("div", { className: "cobalt-CalendarRangePicker__day-notification-container", children: jsx("div", { className: "cobalt-CalendarRangePicker__day-notification" }) }))] }));
    const message = tooltipMessage !== null && tooltipMessage !== void 0 ? tooltipMessage : hoverTooltipMessage;
    if (!message)
        return jsx$1;
    const isControlled = !!tooltipMessage;
    return (jsxs(Fragment, { children: [jsx$1, jsx(Popover, { ...tooltipConfig, targetRef: dayRef, isOpen: isControlled || isHovered, onOpenChange: isControlled ? undefined : setIsHovered, placement: isControlled && !isStartDay ? "bottom" : "top", responsive: false, children: jsx("div", { className: "c-text-body-xs", children: message }) })] }));
}
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