@yamada-ui/calendar
Version:
Yamada UI calendar component
262 lines (258 loc) • 9.45 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-year-list.tsx
var use_year_list_exports = {};
__export(use_year_list_exports, {
useYearList: () => useYearList
});
module.exports = __toCommonJS(use_year_list_exports);
var import_utils3 = require("@yamada-ui/utils");
var import_react2 = require("react");
// src/calendar-utils.ts
var import_utils = require("@yamada-ui/utils");
var import_dayjs = __toESM(require("dayjs"));
var getFormattedLabel = (dateOrYear, locale, format) => {
if (dateOrYear == null || dateOrYear === -1) {
return "";
} else if (dateOrYear instanceof Date) {
return (0, import_dayjs.default)(dateOrYear).locale(locale).format(format);
} else {
return (0, import_dayjs.default)(new Date(dateOrYear, 1, 1)).locale(locale).format(format);
}
};
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;
}
};
var getFocused = (refs) => {
for (const [value, ref] of refs.current.entries()) {
const focused = ref.current ? (0, import_utils.isActiveElement)(ref.current) : false;
if (focused) return value;
}
};
var disableAllTabIndex = (refs) => {
for (const ref of refs.current.values()) {
if (ref.current) ref.current.tabIndex = -1;
}
};
// 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-year-list.tsx
var useYearList = () => {
var _a, _b;
const {
internalYear,
locale,
maxYear,
minYear,
month,
rangeYears,
setInternalYear,
setMonth,
setType,
setYear,
value: selectedValue,
year,
yearFormat,
yearRefs,
__selectType
} = useCalendarContext();
const multi = (0, import_utils3.isArray)(selectedValue);
const containerRef = (0, import_react2.useRef)(null);
const beforeInternalYear = (0, import_react2.useRef)(null);
const minRangeYear = (_a = rangeYears[0]) != null ? _a : minYear;
const maxRangeYear = (_b = rangeYears[rangeYears.length - 1]) != null ? _b : maxYear;
const minYearLabel = getFormattedLabel(minRangeYear, locale, yearFormat);
const maxYearLabel = getFormattedLabel(maxRangeYear, locale, yearFormat);
const label = `${minYearLabel} - ${maxYearLabel}`;
const ariaLabel = `From ${minYearLabel} to ${maxYearLabel}`;
const onFocusPrev = (0, import_react2.useCallback)(
(targetIndex) => {
if (targetIndex < 0) {
if (minRangeYear <= minYear) return;
setInternalYear((prev) => {
beforeInternalYear.current = prev;
return prev - 12;
});
} else {
const ref = yearRefs.current.get(targetIndex);
if (ref == null ? void 0 : ref.current) {
ref.current.focus();
ref.current.tabIndex = 0;
}
}
},
[minYear, minRangeYear, setInternalYear, yearRefs]
);
const onFocusNext = (0, import_react2.useCallback)(
(targetIndex) => {
if (11 < targetIndex) {
if (maxYear <= maxRangeYear) return;
setInternalYear((prev) => {
beforeInternalYear.current = prev;
return prev + 12;
});
} else {
const ref = yearRefs.current.get(targetIndex);
if (ref == null ? void 0 : ref.current) {
ref.current.focus();
ref.current.tabIndex = 0;
}
}
},
[maxYear, maxRangeYear, setInternalYear, yearRefs]
);
const onKeyDown = (0, import_react2.useCallback)(
(ev) => {
var _a2;
const focusedIndex = (_a2 = getFocused(yearRefs)) != null ? _a2 : 0;
const actions = {
ArrowDown: () => focusedIndex + 4 <= 11 ? onFocusNext(focusedIndex + 4) : {},
ArrowLeft: () => onFocusPrev(focusedIndex - 1),
ArrowRight: () => onFocusNext(focusedIndex + 1),
ArrowUp: () => focusedIndex - 4 >= 0 ? onFocusPrev(focusedIndex - 4) : {},
End: () => onFocusNext(11),
Home: () => onFocusPrev(0)
};
const action = actions[ev.key];
if (!action) return;
ev.preventDefault();
ev.stopPropagation();
disableAllTabIndex(yearRefs);
action(ev);
},
[onFocusNext, onFocusPrev, yearRefs]
);
const onClick = (0, import_react2.useCallback)(
(ev, year2) => {
ev.preventDefault();
ev.stopPropagation();
if ((0, import_utils3.isDisabled)(ev.target)) return;
setYear(year2);
setMonth((prev) => new Date(prev.setFullYear(year2)));
setType("month", year2, month.getMonth());
},
[month, setMonth, setType, setYear]
);
const getIsSelected = (0, import_react2.useCallback)(
(value) => {
var _a2;
if (__selectType === "date" || __selectType === "month") {
return year === value;
} else {
const year2 = !multi ? selectedValue == null ? void 0 : selectedValue.getFullYear() : (_a2 = selectedValue[0]) == null ? void 0 : _a2.getFullYear();
return year2 === value;
}
},
[__selectType, multi, selectedValue, year]
);
(0, import_utils3.useUpdateEffect)(() => {
if (!(0, import_utils3.isNumber)(beforeInternalYear.current)) return;
onShouldFocus(
yearRefs,
() => false,
beforeInternalYear.current < internalYear
);
beforeInternalYear.current = null;
}, [internalYear]);
(0, import_utils3.useUnmountEffect)(() => {
yearRefs.current.clear();
});
const getGridProps = (0, import_react2.useCallback)(
(props = {}, ref = null) => ({
ref: (0, import_utils3.mergeRefs)(ref, containerRef),
"aria-label": ariaLabel,
role: "grid",
...props,
onKeyDown: (0, import_utils3.handlerAll)(onKeyDown, props.onKeyDown)
}),
[ariaLabel, onKeyDown]
);
const getButtonProps = (0, import_react2.useCallback)(
({ index, value, ...props }, ref = null) => {
const controlled = (0, import_utils3.isNumber)(beforeInternalYear.current);
const selected = getIsSelected(value);
const disabled = value < minYear || value > maxYear;
yearRefs.current.set(index, (0, import_react2.createRef)());
let tabIndex = -1;
if (controlled) {
tabIndex = -1;
} else if (!rangeYears.includes(year) && rangeYears[0] === value) {
tabIndex = 0;
} else if (selected) {
tabIndex = 0;
}
return {
ref: (0, import_utils3.mergeRefs)(ref, yearRefs.current.get(index)),
disabled,
...props,
"aria-disabled": (0, import_utils3.ariaAttr)(disabled),
"aria-selected": (0, import_utils3.ariaAttr)(selected),
"data-disabled": (0, import_utils3.dataAttr)(disabled),
"data-selected": (0, import_utils3.dataAttr)(selected),
"data-value": value,
tabIndex,
onClick: (0, import_utils3.handlerAll)(props.onClick, (ev) => onClick(ev, value))
};
},
[getIsSelected, minYear, maxYear, yearRefs, rangeYears, year, onClick]
);
return { label, rangeYears, getButtonProps, getGridProps };
};
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
useYearList
});
//# sourceMappingURL=use-year-list.js.map