@zenithui/day-picker
Version:
A ZenithUi Time Picker is React component enables users to select a date or date range from calendar.
108 lines (107 loc) • 7.06 kB
JavaScript
import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
import * as __WEBPACK_EXTERNAL_MODULE_date_fns_925206bc__ from "date-fns";
import * as __WEBPACK_EXTERNAL_MODULE__hooks_use_day_picker_js_4816b2bd__ from "../hooks/use-day-picker.js";
import * as __WEBPACK_EXTERNAL_MODULE__utils_js_db66b9f7__ from "../utils.js";
import * as __WEBPACK_EXTERNAL_MODULE__zenithui_utils_3fcf552b__ from "@zenithui/utils";
function DayPickerDays() {
const { selected, mode, range, focus, currentMonth, hideWeekdays, hideOutsideDates, disabled, onSelect, setCurrentMonth, setFocus, setRange, classNames } = (0, __WEBPACK_EXTERNAL_MODULE__hooks_use_day_picker_js_4816b2bd__.useDayPicker)();
const device = (0, __WEBPACK_EXTERNAL_MODULE__zenithui_utils_3fcf552b__.useDeviceType)();
const days = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>(0, __WEBPACK_EXTERNAL_MODULE_date_fns_925206bc__.eachDayOfInterval)({
start: (0, __WEBPACK_EXTERNAL_MODULE_date_fns_925206bc__.startOfWeek)((0, __WEBPACK_EXTERNAL_MODULE_date_fns_925206bc__.startOfMonth)(currentMonth)),
end: (0, __WEBPACK_EXTERNAL_MODULE_date_fns_925206bc__.endOfWeek)((0, __WEBPACK_EXTERNAL_MODULE_date_fns_925206bc__.endOfMonth)(currentMonth))
}), [
currentMonth
]);
const handleSelectDate = (date)=>{
if (!(0, __WEBPACK_EXTERNAL_MODULE_date_fns_925206bc__.isSameMonth)(date, currentMonth)) setCurrentMonth((0, __WEBPACK_EXTERNAL_MODULE_date_fns_925206bc__.startOfMonth)(date));
onSelect(date);
};
const handleMouseEnter = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)((day)=>{
if ("range" === mode && null === range.to) setFocus(day);
}, [
range
]);
const handleRangeSelect = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)((date)=>{
setFocus(null);
if (range.from && range.to) setRange({
from: date,
to: null
});
else (0, __WEBPACK_EXTERNAL_MODULE_date_fns_925206bc__.isAfter)(date, range.from) ? setRange({
from: range.from,
to: date
}) : setRange({
from: date,
to: range.from
});
}, [
range,
setRange
]);
const handleMouseEnterDebounced = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)((date)=>{
const timeout = setTimeout(()=>handleMouseEnter(date), 100);
return ()=>clearTimeout(timeout);
}, [
handleMouseEnter
]);
return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.Fragment, {
children: [
!hideWeekdays && /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
className: (0, __WEBPACK_EXTERNAL_MODULE__zenithui_utils_3fcf552b__.cn)("zenithui-weekdays", classNames?.weekdays),
children: [
"Sun",
"Mon",
"Tue",
"Wed",
"Thu",
"Fri",
"Sat"
].map((day)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
className: (0, __WEBPACK_EXTERNAL_MODULE__zenithui_utils_3fcf552b__.cn)("zenithui-weekday", classNames?.weekday),
children: day
}, `zenithui-week-${day}`))
}),
/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
"data-mode": mode,
className: (0, __WEBPACK_EXTERNAL_MODULE__zenithui_utils_3fcf552b__.cn)("zenithui-days", classNames?.days, "range" === mode ? "zenithui-gap-x-4" : ""),
children: days.map((day)=>{
const today = (0, __WEBPACK_EXTERNAL_MODULE_date_fns_925206bc__.isToday)(day);
const isSelected = "single" === mode ? (0, __WEBPACK_EXTERNAL_MODULE_date_fns_925206bc__.isSameDay)(selected ? (0, __WEBPACK_EXTERNAL_MODULE__utils_js_db66b9f7__.getInitialDate)(selected) : new Date(), day) : false;
const isRangeStart = "range" === mode ? (0, __WEBPACK_EXTERNAL_MODULE_date_fns_925206bc__.isSameDay)(range.from, day) : false;
const isRangeEnd = "range" === mode ? range.to && (0, __WEBPACK_EXTERNAL_MODULE_date_fns_925206bc__.isSameDay)(range.to, day) : false;
const isInRange = "range" === mode ? focus ? (0, __WEBPACK_EXTERNAL_MODULE__utils_js_db66b9f7__.isBetweenRange)(day, range, focus) : range.to && (0, __WEBPACK_EXTERNAL_MODULE_date_fns_925206bc__.isBefore)(day, range.to) && (0, __WEBPACK_EXTERNAL_MODULE_date_fns_925206bc__.isAfter)(day, range.from) : false;
const isDisabled = (0, __WEBPACK_EXTERNAL_MODULE__utils_js_db66b9f7__.getDisabled)(day, disabled);
return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("button", {
"data-today": today,
"data-selected": isSelected,
"data-range-start": isRangeStart,
"data-range-end": isRangeEnd,
"data-range-dates": isInRange,
"data-outside-date": !(0, __WEBPACK_EXTERNAL_MODULE_date_fns_925206bc__.isSameMonth)(day, currentMonth),
"data-visibility": !(0, __WEBPACK_EXTERNAL_MODULE_date_fns_925206bc__.isSameMonth)(day, currentMonth) && hideOutsideDates,
"data-day": (0, __WEBPACK_EXTERNAL_MODULE_date_fns_925206bc__.format)(day, "d"),
disabled: isDisabled,
onClick: ()=>{
if ("single" === mode) handleSelectDate(day);
else handleRangeSelect(day);
},
onMouseEnter: ()=>{
if ("desktop" === device) handleMouseEnterDebounced(day);
},
className: (0, __WEBPACK_EXTERNAL_MODULE__zenithui_utils_3fcf552b__.cn)("zenithui-day", classNames?.day, {
[classNames?.outsideDate ?? ""]: !(0, __WEBPACK_EXTERNAL_MODULE_date_fns_925206bc__.isSameMonth)(day, currentMonth),
[classNames?.daySelected ?? ""]: isSelected,
[classNames?.rangeStart ?? ""]: isRangeStart,
[classNames?.rangeEnd ?? ""]: isRangeEnd,
[classNames?.rangeDates ?? ""]: isInRange,
[classNames?.today ?? ""]: today
}),
children: (0, __WEBPACK_EXTERNAL_MODULE_date_fns_925206bc__.format)(day, "d")
}, `zenithui-day-${day}-${Math.random}`);
})
})
]
});
}
export { DayPickerDays };