@yamada-ui/calendar
Version:
Yamada UI calendar component
383 lines (381 loc) • 14.4 kB
JavaScript
"use client"
import {
useCalendarContext
} from "./chunk-UMK6LUR5.mjs";
import {
disableAllTabIndex,
getFocused,
getFormattedLabel,
getRangeFirstDay,
getRangeLastDay,
isAfterDate,
isDisabledDate,
isInRange,
isMonthInRange,
isSameDate,
isSameMonth,
onShouldFocus,
sortDates
} from "./chunk-BPJGE3HG.mjs";
// src/use-month.tsx
import {
ariaAttr,
dataAttr,
getEventRelatedTarget,
handlerAll,
isArray,
isDisabled,
isNumber,
mergeRefs,
useUnmountEffect,
useUpdateEffect
} from "@yamada-ui/utils";
import dayjs from "dayjs";
import { createRef, useCallback, useRef } from "react";
var useMonth = () => {
const {
amountOfMonths,
dateFormat,
dayRefs,
disableOutsideDays,
enableRange,
excludeDate,
hiddenOutsideDays,
holidays,
hoveredValue,
locale,
maxDate,
maxSelectValues,
minDate,
minSelectValues,
month,
nextMonth,
paginateBy,
prevMonth,
setHoveredValue,
setMonth,
setValue,
today,
value: selectedValue,
weekendDays
} = useCalendarContext();
const beforeMonth = useRef(null);
const year = month.getFullYear();
const multi = isArray(selectedValue);
const range = enableRange && multi;
const rangeSelectedValue = range ? sortDates(selectedValue.filter(Boolean)) : [];
const max = multi && maxSelectValues === selectedValue.length;
const reversed = !!rangeSelectedValue[0] && isAfterDate(rangeSelectedValue[0], hoveredValue);
const startDate = range ? rangeSelectedValue[!reversed ? 0 : 1] : void 0;
const endDate = range ? rangeSelectedValue[!reversed ? 1 : 0] : void 0;
const maybeStartDate = startDate != null ? startDate : hoveredValue;
const maybeEndDate = endDate != null ? endDate : hoveredValue;
const shouldBetween = rangeSelectedValue.length >= 1 && !!maybeEndDate;
const shouldHovered = rangeSelectedValue.length === 1;
const hasAmountOfMonths = amountOfMonths >= 2;
const minSelectEndDate = isNumber(maxSelectValues) ? dayjs(!reversed ? maybeStartDate : maybeEndDate).subtract(maxSelectValues - 1, "day").toDate() : void 0;
const maxSelectEndDate = isNumber(maxSelectValues) ? dayjs(!reversed ? maybeStartDate : maybeEndDate).add(maxSelectValues - 1, "day").toDate() : void 0;
const minSelectStartDate = isNumber(minSelectValues) ? dayjs(!reversed ? maybeStartDate : maybeEndDate).subtract(minSelectValues - 1, "day").toDate() : void 0;
const maxSelectStartDate = isNumber(minSelectValues) ? dayjs(!reversed ? maybeStartDate : maybeEndDate).add(minSelectValues - 1, "day").toDate() : void 0;
const invalidRangeDates = isNumber(maxSelectValues) && Math.abs(dayjs(startDate).diff(endDate, "day")) >= maxSelectValues;
const minTrulySelectEndDate = shouldHovered || invalidRangeDates ? minSelectEndDate : void 0;
const maxTrulySelectEndDate = shouldHovered || invalidRangeDates ? maxSelectEndDate : void 0;
const minTrulySelectStartDate = shouldHovered || invalidRangeDates ? minSelectStartDate : void 0;
const maxTrulySelectStartDate = shouldHovered || invalidRangeDates ? maxSelectStartDate : void 0;
const onFocusPrev = useCallback(
(targetIndex, targetMonth, targetDay) => {
var _a, _b;
const [firstIndex, , firstDay] = (_b = (_a = getRangeFirstDay(dayRefs)) == null ? void 0 : _a.split("-").map(Number)) != null ? _b : [];
if (firstIndex === targetDay && firstDay && targetDay < firstDay) {
if (!isMonthInRange({ date: prevMonth, maxDate, minDate })) return;
dayRefs.current.clear();
setMonth((prev) => {
beforeMonth.current = prev;
return dayjs(prev).subtract(paginateBy, "months").toDate();
});
} else {
const ref = dayRefs.current.get(
`${targetIndex}-${targetMonth}-${targetDay}`
);
if (ref == null ? void 0 : ref.current) {
if (shouldHovered)
setHoveredValue(dayjs(ref.current.dataset.value).toDate());
ref.current.focus();
ref.current.tabIndex = 0;
}
}
},
[
shouldHovered,
dayRefs,
maxDate,
minDate,
paginateBy,
prevMonth,
setMonth,
setHoveredValue
]
);
const onFocusNext = useCallback(
(targetIndex, targetMonth, targetDay) => {
var _a, _b;
const [lastIndex, , lastDay] = (_b = (_a = getRangeLastDay(dayRefs)) == null ? void 0 : _a.split("-").map(Number)) != null ? _b : [];
if (lastIndex === targetIndex && lastDay && lastDay < targetDay) {
if (!isMonthInRange({ date: nextMonth, maxDate, minDate })) return;
dayRefs.current.clear();
setMonth((prev) => {
beforeMonth.current = prev;
return dayjs(prev).add(paginateBy, "months").toDate();
});
} else {
const ref = dayRefs.current.get(
`${targetIndex}-${targetMonth}-${targetDay}`
);
if (ref == null ? void 0 : ref.current) {
if (shouldHovered)
setHoveredValue(dayjs(ref.current.dataset.value).toDate());
ref.current.focus();
ref.current.tabIndex = 0;
}
}
},
[
shouldHovered,
dayRefs,
maxDate,
minDate,
nextMonth,
paginateBy,
setMonth,
setHoveredValue
]
);
const onKeyDown = useCallback(
(ev) => {
var _a, _b, _c, _d, _e;
const [focusedIndex, focusedMonth, focusedDay] = ((_a = getFocused(dayRefs)) != null ? _a : "").split("-").map(Number);
const [firstIndex, firstMonth, firstDay] = (_c = (_b = getRangeFirstDay(dayRefs)) == null ? void 0 : _b.split("-").map(Number)) != null ? _c : [];
const [lastIndex, lastMonth, lastDay] = (_e = (_d = getRangeLastDay(dayRefs)) == null ? void 0 : _d.split("-").map(Number)) != null ? _e : [];
const actions = {
ArrowDown: () => {
if (!isNumber(focusedMonth)) return;
const lastOfMonthDay = dayjs(new Date(year, focusedMonth)).endOf("month").date();
if (focusedDay && focusedDay + 7 <= lastOfMonthDay)
onFocusNext(focusedIndex != null ? focusedIndex : -1, focusedMonth, focusedDay + 7);
},
ArrowLeft: () => {
if (focusedIndex !== firstIndex) {
if (!isNumber(focusedMonth)) return;
const firstOfMonthDay = dayjs(new Date(year, focusedMonth)).startOf("month").date();
if (focusedDay && firstOfMonthDay < focusedDay) {
onFocusNext(focusedIndex != null ? focusedIndex : -1, focusedMonth, focusedDay - 1);
} else {
const prevLastOfMonthDay = dayjs(new Date(year, focusedMonth)).subtract(1, "month").endOf("month").date();
onFocusNext(
focusedIndex ? focusedIndex - 1 : -1,
focusedMonth - 1,
prevLastOfMonthDay
);
}
} else if (isNumber(focusedMonth) && isNumber(focusedDay)) {
onFocusPrev(focusedIndex != null ? focusedIndex : -1, focusedMonth, focusedDay - 1);
}
},
ArrowRight: () => {
if (focusedIndex !== lastIndex) {
if (!isNumber(focusedMonth)) return;
const lastOfMonthDay = dayjs(new Date(year, focusedMonth)).endOf("month").date();
if (focusedDay && focusedDay < lastOfMonthDay) {
onFocusNext(focusedIndex != null ? focusedIndex : -1, focusedMonth, focusedDay + 1);
} else {
const nextFirstOfMonthDay = dayjs(new Date(year, focusedMonth)).add(1, "month").startOf("month").date();
onFocusNext(
focusedIndex ? focusedIndex + 1 : -1,
focusedMonth + 1,
nextFirstOfMonthDay
);
}
} else if (isNumber(focusedMonth) && isNumber(focusedDay)) {
onFocusNext(focusedIndex != null ? focusedIndex : -1, focusedMonth, focusedDay + 1);
}
},
ArrowUp: () => {
if (!isNumber(focusedMonth)) return;
const firstOfMonthDay = dayjs(new Date(year, focusedMonth)).startOf("month").date();
if (focusedDay && focusedDay - 7 >= firstOfMonthDay)
onFocusNext(focusedIndex != null ? focusedIndex : -1, focusedMonth, focusedDay - 7);
},
End: () => isNumber(lastMonth) && isNumber(lastDay) ? onFocusNext(lastIndex != null ? lastIndex : -1, lastMonth, lastDay) : void 0,
Home: () => isNumber(firstMonth) && isNumber(firstDay) ? onFocusPrev(firstIndex != null ? firstIndex : -1, firstMonth, firstDay) : void 0
};
const action = actions[ev.key];
if (!action) return;
ev.preventDefault();
ev.stopPropagation();
disableAllTabIndex(dayRefs);
action(ev);
},
[dayRefs, onFocusNext, onFocusPrev, year]
);
const onClick = useCallback(
(ev, newValue) => {
ev.preventDefault();
ev.stopPropagation();
const el = getEventRelatedTarget(ev);
if (!el || isDisabled(el)) return;
setValue((prev) => {
if (!isArray(prev)) {
return newValue;
} else if (range) {
prev = prev.filter(Boolean);
const exceeded = prev.length >= 2;
if (!exceeded) {
const selected = prev.some((value) => isSameDate(value, newValue));
return selected ? [] : sortDates([...prev, newValue]);
} else {
return [newValue];
}
} else {
const selected = prev.some((value) => isSameDate(value, newValue));
if (!selected) {
return [...prev, newValue];
} else {
return prev.filter(
(value) => !isSameDate(value, newValue)
);
}
}
});
},
[setValue, range]
);
const onPointerEnter = useCallback(
(value) => {
if (shouldHovered) setHoveredValue(value);
},
[shouldHovered, setHoveredValue]
);
useUpdateEffect(() => {
if (!(beforeMonth.current instanceof Date)) return;
onShouldFocus(dayRefs, () => false, beforeMonth.current < month);
beforeMonth.current = null;
}, [month.getMonth()]);
useUnmountEffect(() => {
dayRefs.current.clear();
});
const getGridProps = useCallback(
({ month: month2, ...props }) => {
const label = getFormattedLabel(month2, locale, dateFormat);
return {
"aria-label": label,
"aria-multiselectable": ariaAttr(multi),
role: "grid",
...props,
onKeyDown: handlerAll(onKeyDown, props.onKeyDown)
};
},
[onKeyDown, multi, locale, dateFormat]
);
const getButtonProps = useCallback(
({ index, month: month2, value, ...props }, ref = null) => {
const controlled = beforeMonth.current instanceof Date;
const holiday = holidays.some((holiday2) => isSameDate(holiday2, value));
const outside = !isSameMonth(month2, value);
const weekend = weekendDays.includes(value.getDay());
const hidden = hiddenOutsideDays && outside;
const selected = !multi ? isSameDate(selectedValue, value) : selectedValue.some(
(selectedValue2) => isSameDate(selectedValue2, value)
);
const trulySelected = selected && (!hasAmountOfMonths || !outside);
const selectedMonth = !multi ? isSameMonth(month2, selectedValue) : selectedValue.some(
(selectedValue2) => isSameMonth(month2, selectedValue2)
);
const _today = today && isSameDate(/* @__PURE__ */ new Date(), value);
const disabled = isDisabledDate({
disableOutsideDays,
endDate,
excludeDate,
maxDate: maxTrulySelectEndDate != null ? maxTrulySelectEndDate : maxDate,
maxTrulySelectStartDate,
maybeEndDate,
maybeStartDate,
minDate: minTrulySelectEndDate != null ? minTrulySelectEndDate : minDate,
minTrulySelectStartDate,
outside,
startDate,
value
});
const trulyDisabled = disabled || !selected && max;
const firstDate = value.getDate() === 1;
const shouldFocus = !selectedMonth && !outside && firstDate || selected;
const start = range && isSameDate(maybeStartDate, value) && !isSameDate(maybeEndDate, value);
const end = range && isSameDate(maybeEndDate, value) && !isSameDate(maybeStartDate, value);
const trulyStart = start && (!hasAmountOfMonths || !outside);
const trulyEnd = end && (!hasAmountOfMonths || !outside);
const between = shouldBetween && !isSameDate(maybeStartDate, maybeEndDate) && !hidden && isInRange(value, maybeStartDate, maybeEndDate);
const key = `${index}-${value.getMonth()}-${value.getDate()}`;
if (!outside) dayRefs.current.set(key, createRef());
return {
ref: mergeRefs(ref, !outside ? dayRefs.current.get(key) : void 0),
between,
end,
hidden,
outside,
selected,
start,
weekend,
...props,
"aria-disabled": ariaAttr(trulyDisabled),
"aria-selected": ariaAttr(trulySelected),
"data-between": dataAttr(between),
"data-disabled": dataAttr(trulyDisabled),
"data-end": dataAttr(trulyEnd),
"data-holiday": dataAttr(holiday),
"data-outside": dataAttr(outside),
"data-selected": dataAttr(trulySelected),
"data-start": dataAttr(trulyStart),
"data-today": dataAttr(_today),
"data-value": value.getDate(),
"data-weekend": dataAttr(weekend),
tabIndex: !!index || controlled ? -1 : shouldFocus ? 0 : -1,
onClick: handlerAll((ev) => onClick(ev, value), props.onClick),
onPointerEnter: handlerAll(
() => onPointerEnter(value),
props.onPointerEnter
)
};
},
[
holidays,
weekendDays,
hiddenOutsideDays,
multi,
selectedValue,
hasAmountOfMonths,
today,
minDate,
maxDate,
minTrulySelectEndDate,
maxTrulySelectEndDate,
minTrulySelectStartDate,
maxTrulySelectStartDate,
startDate,
endDate,
excludeDate,
disableOutsideDays,
max,
range,
maybeStartDate,
maybeEndDate,
shouldBetween,
dayRefs,
onClick,
onPointerEnter
]
);
return { getButtonProps, getGridProps };
};
export {
useMonth
};
//# sourceMappingURL=chunk-5B5Z44KW.mjs.map