@drivy/cobalt
Version:
Opinionated design system for Drivy's projects.
74 lines (73 loc) • 3.71 kB
JavaScript
import { Fragment, jsx as jsx_runtime_jsx, jsxs } from "react/jsx-runtime";
import classnames 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 = /*#__PURE__*/ jsxs("button", {
ref: dayRef,
className: classnames("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?.(date);
setIsHovered(false);
},
onClick: handleSelectDate,
"data-day": format(date, "yyyy-MM-dd"),
type: "button",
children: [
date.getDate(),
hasNotification && /*#__PURE__*/ jsx_runtime_jsx("div", {
className: "cobalt-CalendarRangePicker__day-notification-container",
children: /*#__PURE__*/ jsx_runtime_jsx("div", {
className: "cobalt-CalendarRangePicker__day-notification"
})
})
]
});
const message = tooltipMessage ?? hoverTooltipMessage;
if (!message) return jsx;
const isControlled = !!tooltipMessage;
return /*#__PURE__*/ jsxs(Fragment, {
children: [
jsx,
/*#__PURE__*/ jsx_runtime_jsx(Popover, {
...tooltipConfig,
targetRef: dayRef,
isOpen: isControlled || isHovered,
onOpenChange: isControlled ? void 0 : setIsHovered,
placement: isControlled && !isStartDay ? "bottom" : "top",
responsive: false,
children: /*#__PURE__*/ jsx_runtime_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 = /*#__PURE__*/ react.memo(CalendarRangePickerDay, areEqual);
MemoizedComponent.displayName = "CalendarRangePickerDay";
export { MemoizedComponent as CalendarRangePickerDay };
//# sourceMappingURL=CalendarRangePickerDay.js.map