@yamada-ui/calendar
Version:
Yamada UI calendar component
273 lines (269 loc) • 8.7 kB
JavaScript
"use client"
;
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/use-calendar-header.tsx
var use_calendar_header_exports = {};
__export(use_calendar_header_exports, {
useCalendarHeader: () => useCalendarHeader
});
module.exports = __toCommonJS(use_calendar_header_exports);
var import_utils3 = require("@yamada-ui/utils");
var import_dayjs3 = __toESM(require("dayjs"));
var import_react2 = require("react");
// src/calendar-utils.ts
var import_utils = require("@yamada-ui/utils");
var import_dayjs = __toESM(require("dayjs"));
var isMonthInRange = ({
date,
maxDate,
minDate
}) => {
const hasMinDate = minDate instanceof Date;
const hasMaxDate = maxDate instanceof Date;
if (!hasMaxDate && !hasMinDate) return true;
const firstOfMonth = (0, import_dayjs.default)(date).startOf("month");
const lastOfMonth = (0, import_dayjs.default)(date).endOf("month");
const minInRange = hasMinDate ? lastOfMonth.isAfter(minDate) : true;
const maxInRange = hasMaxDate ? firstOfMonth.isBefore(maxDate) : true;
return maxInRange && minInRange;
};
// src/use-calendar.ts
var import_core = require("@yamada-ui/core");
var import_use_controllable_state = require("@yamada-ui/use-controllable-state");
var import_utils2 = require("@yamada-ui/utils");
var import_dayjs2 = __toESM(require("dayjs"));
var import_react = require("react");
var [CalendarProvider, useCalendarContext] = (0, import_utils2.createContext)({
name: "CalendarContext",
errorMessage: `useCalendarContext returned is 'undefined'. Seems you forgot to wrap the components in "<Calendar />"`
});
// src/use-calendar-header.tsx
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 = (0, import_react2.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 = (0, import_react2.useCallback)(() => {
switch (type) {
case "year":
setInternalYear((prev) => prev - 12);
break;
case "month":
setYear((prev) => prev - 1);
break;
default:
dayRefs.current.clear();
setMonth((prev) => (0, import_dayjs3.default)(prev).subtract(paginateBy, "months").toDate());
break;
}
}, [dayRefs, paginateBy, setInternalYear, setMonth, setYear, type]);
const onNext = (0, import_react2.useCallback)(() => {
switch (type) {
case "year":
setInternalYear((prev) => prev + 12);
break;
case "month":
setYear((prev) => prev + 1);
break;
default:
dayRefs.current.clear();
setMonth((prev) => (0, import_dayjs3.default)(prev).add(paginateBy, "months").toDate());
break;
}
}, [dayRefs, paginateBy, setInternalYear, setMonth, setYear, type]);
(0, import_utils3.assignRef)(typeRef, onChangeType);
(0, import_utils3.assignRef)(prevRef, onPrev);
(0, import_utils3.assignRef)(nextRef, onNext);
const onKeyDown = (0, import_react2.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 = (0, import_react2.useCallback)(
(props = {}) => ({
...props,
onKeyDown: (0, import_utils3.handlerAll)(onKeyDown, props.onKeyDown)
}),
[onKeyDown]
);
const getControlProps = (0, import_react2.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": (0, import_utils3.ariaAttr)(isHidden),
"data-disabled": (0, import_utils3.dataAttr)(isHidden),
"data-hidden": (0, import_utils3.dataAttr)(isHidden),
tabIndex: -1,
onClick: (0, import_utils3.handlerAll)(isPrev ? onPrev : onNext, props.onClick)
};
},
[
amountOfMonths,
index,
maxDate,
maxRangeYear,
maxYear,
minDate,
minRangeYear,
minYear,
nextMonth,
onNext,
onPrev,
prevMonth,
type,
year
]
);
const getLabelProps = (0, import_react2.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: (0, import_utils3.handlerAll)(props.onClick, onChangeType)
};
},
[index, onChangeType, type]
);
return { getContainerProps, getControlProps, getLabelProps };
};
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
useCalendarHeader
});
//# sourceMappingURL=use-calendar-header.js.map