@yamada-ui/calendar
Version:
Yamada UI calendar component
215 lines (213 loc) • 5.62 kB
JavaScript
"use client"
import {
useCalendarContext
} from "./chunk-UMK6LUR5.mjs";
import {
isMonthInRange
} from "./chunk-BPJGE3HG.mjs";
// src/use-calendar-header.tsx
import { ariaAttr, assignRef, dataAttr, handlerAll } from "@yamada-ui/utils";
import dayjs from "dayjs";
import { useCallback } from "react";
var useCalendarHeader = ({ index }) => {
var _a, _b;
const {
type,
amountOfMonths,
dayRefs,
maxDate,
maxYear,
minDate,
minYear,
month,
nextMonth,
nextRef,
paginateBy,
prevMonth,
prevRef,
rangeYears,
setInternalYear,
setMonth,
setType,
setYear,
typeRef,
year
} = useCalendarContext();
const minRangeYear = (_a = rangeYears[0]) != null ? _a : minYear;
const maxRangeYear = (_b = rangeYears[rangeYears.length - 1]) != null ? _b : maxYear;
const onChangeType = useCallback(() => {
switch (type) {
case "month":
setType("year", year, month.getMonth());
break;
case "date":
setType("month", year, month.getMonth());
break;
default:
break;
}
}, [month, setType, type, year]);
const onPrev = useCallback(() => {
switch (type) {
case "year":
setInternalYear((prev) => prev - 12);
break;
case "month":
setYear((prev) => prev - 1);
break;
default:
dayRefs.current.clear();
setMonth((prev) => dayjs(prev).subtract(paginateBy, "months").toDate());
break;
}
}, [dayRefs, paginateBy, setInternalYear, setMonth, setYear, type]);
const onNext = useCallback(() => {
switch (type) {
case "year":
setInternalYear((prev) => prev + 12);
break;
case "month":
setYear((prev) => prev + 1);
break;
default:
dayRefs.current.clear();
setMonth((prev) => dayjs(prev).add(paginateBy, "months").toDate());
break;
}
}, [dayRefs, paginateBy, setInternalYear, setMonth, setYear, type]);
assignRef(typeRef, onChangeType);
assignRef(prevRef, onPrev);
assignRef(nextRef, onNext);
const onKeyDown = useCallback(
(ev) => {
const actions = {
ArrowDown: onChangeType,
ArrowLeft: () => {
const isDisabled = (() => {
switch (type) {
case "year":
return minRangeYear <= minYear;
case "month":
return year <= minYear;
default:
return !isMonthInRange({ date: prevMonth, maxDate, minDate });
}
})();
if (!isDisabled) onPrev();
},
ArrowRight: () => {
const isDisabled = (() => {
switch (type) {
case "year":
return maxYear <= maxRangeYear;
case "month":
return maxYear <= year;
default:
return !isMonthInRange({ date: nextMonth, maxDate, minDate });
}
})();
if (!isDisabled) onNext();
}
};
const action = actions[ev.key];
if (!action) return;
ev.preventDefault();
ev.stopPropagation();
action(ev);
},
[
onChangeType,
onPrev,
type,
minRangeYear,
minYear,
year,
prevMonth,
maxDate,
minDate,
onNext,
maxYear,
maxRangeYear,
nextMonth
]
);
const getContainerProps = useCallback(
(props = {}) => ({
...props,
onKeyDown: handlerAll(onKeyDown, props.onKeyDown)
}),
[onKeyDown]
);
const getControlProps = useCallback(
({ operation, ...props }) => {
const isPrev = operation === "prev";
const ariaLabel = `Go to ${isPrev ? "previous" : "next"} ${type === "date" ? "month" : "year"}`;
const isHidden = (() => {
switch (type) {
case "year":
if (isPrev) {
return minRangeYear <= minYear;
} else {
return maxYear <= maxRangeYear;
}
case "month":
if (isPrev) {
return year <= minYear;
} else {
return maxYear <= year;
}
default:
if (typeof index !== "number") return;
if (isPrev) {
return index !== 0 || !isMonthInRange({ date: prevMonth, maxDate, minDate });
} else {
return index + 1 !== amountOfMonths || !isMonthInRange({ date: nextMonth, maxDate, minDate });
}
}
})();
return {
"aria-label": ariaLabel,
...props,
"aria-disabled": ariaAttr(isHidden),
"data-disabled": dataAttr(isHidden),
"data-hidden": dataAttr(isHidden),
tabIndex: -1,
onClick: handlerAll(isPrev ? onPrev : onNext, props.onClick)
};
},
[
amountOfMonths,
index,
maxDate,
maxRangeYear,
maxYear,
minDate,
minRangeYear,
minYear,
nextMonth,
onNext,
onPrev,
prevMonth,
type,
year
]
);
const getLabelProps = useCallback(
(props = {}) => {
return {
as: type !== "year" ? "button" : "span",
pointerEvents: type !== "year" ? "auto" : "none",
...props,
"aria-live": type !== "year" ? "polite" : void 0,
tabIndex: !!index ? -1 : 0,
onClick: handlerAll(props.onClick, onChangeType)
};
},
[index, onChangeType, type]
);
return { getContainerProps, getControlProps, getLabelProps };
};
export {
useCalendarHeader
};
//# sourceMappingURL=chunk-XFCFPRPJ.mjs.map