@yamada-ui/calendar
Version:
Yamada UI calendar component
319 lines (316 loc) • 10.9 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.ts
var use_calendar_exports = {};
__export(use_calendar_exports, {
CalendarProvider: () => CalendarProvider,
useCalendar: () => useCalendar,
useCalendarContext: () => useCalendarContext
});
module.exports = __toCommonJS(use_calendar_exports);
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");
// src/calendar-utils.ts
var import_utils = require("@yamada-ui/utils");
var import_dayjs = __toESM(require("dayjs"));
var getRangeYears = (year) => {
const rounded = year - 6;
let rangeYears = [];
for (let i = 0; i < 12; i += 1) {
const rangeYear = rounded + i;
rangeYears = [...rangeYears, rangeYear];
}
return rangeYears;
};
var isSameMonth = (date, comparison) => (date == null ? void 0 : date.getFullYear()) === (comparison == null ? void 0 : comparison.getFullYear()) && (date == null ? void 0 : date.getMonth()) === (comparison == null ? void 0 : comparison.getMonth());
var isSameDate = (date, comparison) => isSameMonth(date, comparison) && (date == null ? void 0 : date.getDate()) === (comparison == null ? void 0 : comparison.getDate());
var onShouldFocus = (refs, validateFunc, isFirst = true) => {
let targetValue;
let targetEl;
for (const value of refs.current.keys()) {
const selected = validateFunc(value);
if (selected) targetValue = value;
}
if (typeof targetValue === "number") {
const ref = refs.current.get(targetValue);
targetEl = ref == null ? void 0 : ref.current;
} else {
const values = [...refs.current.values()];
const firstRef = values[0];
const lastRef = values[values.length - 1];
targetEl = isFirst ? firstRef == null ? void 0 : firstRef.current : lastRef == null ? void 0 : lastRef.current;
}
if (targetEl) {
targetEl.focus();
targetEl.tabIndex = 0;
}
};
// src/use-calendar.ts
var [CalendarProvider, useCalendarContext] = (0, import_utils2.createContext)({
name: "CalendarContext",
errorMessage: `useCalendarContext returned is 'undefined'. Seems you forgot to wrap the components in "<Calendar />"`
});
var useCalendar = ({
type: typeProp,
amountOfMonths = 1,
dateFormat = "MMMM YYYY",
defaultMonth,
defaultType,
defaultValue,
disableOutsideDays = false,
enableMultiple = false,
enableRange = false,
excludeDate,
firstDayOfWeek = "monday",
hiddenOutsideDays = false,
holidays = [],
locale,
maxDate,
maxSelectValues,
minDate,
minSelectValues,
month: monthProp,
monthFormat = "MMM",
nextRef,
paginateBy = amountOfMonths,
prevRef,
today = false,
typeRef,
value: valueProp,
weekdayFormat = "dd",
weekendDays = [0, 6],
withControls = true,
withHeader = true,
withLabel = true,
withWeekdays = true,
yearFormat = "YYYY",
onChange: onChangeProp,
onChangeMonth: onChangeMonthProp,
onChangeType: onChangeTypeProp,
__selectType = "date",
...rest
}) => {
var _a, _b, _c;
const { locale: defaultLocale } = (0, import_core.useI18n)();
const { theme } = (0, import_core.useTheme)();
locale != null ? locale : locale = (_c = (_b = (_a = theme.__config) == null ? void 0 : _a.date) == null ? void 0 : _b.locale) != null ? _c : defaultLocale;
const [type, onChangeType] = (0, import_use_controllable_state.useControllableState)({
defaultValue: defaultType != null ? defaultType : "date",
value: typeProp
});
const setType = (0, import_utils2.useCallbackRef)(
(type2, year2, month2) => {
onChangeType(type2);
onChangeTypeProp == null ? void 0 : onChangeTypeProp(type2, year2, month2);
},
[]
);
const prevValueRef = (0, import_react.useRef)(void 0);
const [value, setValue] = (0, import_use_controllable_state.useControllableState)({
defaultValue: defaultValue != null ? defaultValue : enableMultiple || enableRange ? [] : void 0,
value: valueProp,
onChange: onChangeProp
});
const [hoveredValue, setHoveredValue] = (0, import_react.useState)(void 0);
const multi = (0, import_utils2.isArray)(value);
const range = enableRange && multi;
const resolvedValue = multi || range ? value.filter(Boolean) : [];
if (range) disableOutsideDays = false;
const [month, setMonth] = (0, import_use_controllable_state.useControllableState)({
defaultValue: () => {
if (!multi && value) {
defaultMonth != null ? defaultMonth : defaultMonth = new Date(new Date(value).setDate(1));
} else if ((multi || range) && resolvedValue.length) {
defaultMonth != null ? defaultMonth : defaultMonth = new Date(new Date(resolvedValue.at(-1)).setDate(1));
} else {
defaultMonth != null ? defaultMonth : defaultMonth = new Date((/* @__PURE__ */ new Date()).setDate(1));
}
return defaultMonth;
},
value: monthProp,
onChange: onChangeMonthProp,
onUpdate: (prev, next) => !isSameDate(prev, next)
});
const defaultYear = month.getFullYear();
const [year, setYear] = (0, import_react.useState)(defaultYear);
const [internalYear, setInternalYear] = (0, import_react.useState)(year);
const minYear = minDate instanceof Date ? minDate.getFullYear() : 1;
const maxYear = maxDate instanceof Date ? maxDate.getFullYear() : 1e4;
const rangeYears = getRangeYears(internalYear);
const nextMonth = (0, import_dayjs2.default)(month).add(amountOfMonths, "months").toDate();
const prevMonth = (0, import_dayjs2.default)(month).subtract(1, "months").toDate();
const yearRefs = (0, import_react.useRef)(/* @__PURE__ */ new Map());
const monthRefs = (0, import_react.useRef)(/* @__PURE__ */ new Map());
const dayRefs = (0, import_react.useRef)(/* @__PURE__ */ new Map());
(0, import_utils2.useUpdateEffect)(() => {
if (!defaultMonth) return;
if (range && (0, import_utils2.isArray)(prevValueRef.current) && (0, import_utils2.isArray)(valueProp)) {
const prevValue = prevValueRef.current.filter(Boolean);
const nextValue = valueProp.filter(Boolean);
if (prevValue.length === 1) {
const reverse = !isSameDate(prevValue[0], nextValue[0]);
if (!reverse) {
if (nextValue[1])
defaultMonth = new Date(new Date(nextValue[1]).setDate(1));
} else {
if (nextValue[0])
defaultMonth = new Date(new Date(nextValue[0]).setDate(1));
}
}
}
setMonth(defaultMonth);
setYear(defaultMonth.getFullYear());
setInternalYear(defaultMonth.getFullYear());
prevValueRef.current = valueProp;
}, [valueProp]);
(0, import_utils2.useUpdateEffect)(() => {
if (!value || amountOfMonths > 1) return;
if (multi || range) return;
const year2 = value.getFullYear();
if (type === "year") {
setYear(year2);
setInternalYear((prev) => {
const contain = rangeYears.includes(year2);
if (contain) {
return prev;
} else {
return year2;
}
});
} else {
setMonth(value);
}
}, [value, amountOfMonths]);
(0, import_utils2.useUpdateEffect)(() => {
if (!range) return;
if (value.length !== 1) setHoveredValue(void 0);
}, [range, value]);
(0, import_utils2.useUpdateEffect)(() => {
if (__selectType === "year") return;
setYear(month.getFullYear());
setInternalYear(month.getFullYear());
}, [month.getFullYear()]);
(0, import_utils2.useUpdateEffect)(() => {
switch (type) {
case "year":
onShouldFocus(yearRefs, (i) => year === rangeYears[i]);
break;
case "month":
onShouldFocus(
monthRefs,
(value2) => month.getFullYear() === year && month.getMonth() === value2
);
break;
default:
onShouldFocus(dayRefs, (key) => {
const [, month2, date] = key.split("-").map(Number);
if (!multi) {
return (value == null ? void 0 : value.getMonth()) === month2 && (value == null ? void 0 : value.getDate()) === date;
} else {
return value.some(
(value2) => (value2 == null ? void 0 : value2.getMonth()) === month2 && (value2 == null ? void 0 : value2.getDate()) === date
);
}
});
break;
}
}, [type]);
(0, import_utils2.useUpdateEffect)(() => {
setValue(valueProp);
}, [valueProp]);
const getContainerProps = (0, import_react.useCallback)(
(props = {}, ref = null) => ({
...rest,
...props,
ref
}),
[rest]
);
return {
type,
amountOfMonths,
dateFormat,
dayRefs,
disableOutsideDays,
enableRange,
excludeDate,
firstDayOfWeek,
hiddenOutsideDays,
holidays,
hoveredValue,
internalYear,
locale,
maxDate,
maxSelectValues,
maxYear,
minDate,
minSelectValues,
minYear,
month,
monthFormat,
monthRefs,
nextMonth,
nextRef,
paginateBy,
prevMonth,
prevRef,
rangeYears,
setHoveredValue,
setInternalYear,
setMonth,
setType,
setValue,
setYear,
today,
typeRef,
value,
weekdayFormat,
weekendDays,
withControls,
withHeader,
withLabel,
withWeekdays,
year,
yearFormat,
yearRefs,
getContainerProps,
__selectType
};
};
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
CalendarProvider,
useCalendar,
useCalendarContext
});
//# sourceMappingURL=use-calendar.js.map