react-calendar
Version:
Ultimate calendar for your React app.
118 lines (117 loc) • 7.68 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var react_1 = __importDefault(require("react"));
var prop_types_1 = __importDefault(require("prop-types"));
var get_user_locale_1 = require("get-user-locale");
var dates_1 = require("../shared/dates");
var dateFormatter_1 = require("../shared/dateFormatter");
var propTypes_1 = require("../shared/propTypes");
var className = 'react-calendar__navigation';
function Navigation(_a) {
var activeStartDate = _a.activeStartDate, drillUp = _a.drillUp, _b = _a.formatMonthYear, formatMonthYear = _b === void 0 ? dateFormatter_1.formatMonthYear : _b, _c = _a.formatYear, formatYear = _c === void 0 ? dateFormatter_1.formatYear : _c, locale = _a.locale, maxDate = _a.maxDate, minDate = _a.minDate, _d = _a.navigationAriaLabel, navigationAriaLabel = _d === void 0 ? '' : _d, navigationAriaLive = _a.navigationAriaLive, navigationLabel = _a.navigationLabel, _e = _a.next2AriaLabel, next2AriaLabel = _e === void 0 ? '' : _e, _f = _a.next2Label, next2Label = _f === void 0 ? '»' : _f, _g = _a.nextAriaLabel, nextAriaLabel = _g === void 0 ? '' : _g, _h = _a.nextLabel, nextLabel = _h === void 0 ? '›' : _h, _j = _a.prev2AriaLabel, prev2AriaLabel = _j === void 0 ? '' : _j, _k = _a.prev2Label, prev2Label = _k === void 0 ? '«' : _k, _l = _a.prevAriaLabel, prevAriaLabel = _l === void 0 ? '' : _l, _m = _a.prevLabel, prevLabel = _m === void 0 ? '‹' : _m, setActiveStartDate = _a.setActiveStartDate, showDoubleView = _a.showDoubleView, view = _a.view, views = _a.views;
var drillUpAvailable = views.indexOf(view) > 0;
var shouldShowPrevNext2Buttons = view !== 'century';
var previousActiveStartDate = (0, dates_1.getBeginPrevious)(view, activeStartDate);
var previousActiveStartDate2 = shouldShowPrevNext2Buttons
? (0, dates_1.getBeginPrevious2)(view, activeStartDate)
: undefined;
var nextActiveStartDate = (0, dates_1.getBeginNext)(view, activeStartDate);
var nextActiveStartDate2 = shouldShowPrevNext2Buttons
? (0, dates_1.getBeginNext2)(view, activeStartDate)
: undefined;
var prevButtonDisabled = (function () {
if (previousActiveStartDate.getFullYear() < 0) {
return true;
}
var previousActiveEndDate = (0, dates_1.getEndPrevious)(view, activeStartDate);
return minDate && minDate >= previousActiveEndDate;
})();
var prev2ButtonDisabled = shouldShowPrevNext2Buttons &&
(function () {
if (previousActiveStartDate2.getFullYear() < 0) {
return true;
}
var previousActiveEndDate = (0, dates_1.getEndPrevious2)(view, activeStartDate);
return minDate && minDate >= previousActiveEndDate;
})();
var nextButtonDisabled = maxDate && maxDate < nextActiveStartDate;
var next2ButtonDisabled = shouldShowPrevNext2Buttons && maxDate && maxDate < nextActiveStartDate2;
function onClickPrevious() {
setActiveStartDate(previousActiveStartDate, 'prev');
}
function onClickPrevious2() {
setActiveStartDate(previousActiveStartDate2, 'prev2');
}
function onClickNext() {
setActiveStartDate(nextActiveStartDate, 'next');
}
function onClickNext2() {
setActiveStartDate(nextActiveStartDate2, 'next2');
}
function renderLabel(date) {
var label = (function () {
switch (view) {
case 'century':
return (0, dates_1.getCenturyLabel)(locale, formatYear, date);
case 'decade':
return (0, dates_1.getDecadeLabel)(locale, formatYear, date);
case 'year':
return formatYear(locale, date);
case 'month':
return formatMonthYear(locale, date);
default:
throw new Error("Invalid view: ".concat(view, "."));
}
})();
return navigationLabel
? navigationLabel({
date: date,
label: label,
locale: locale || (0, get_user_locale_1.getUserLocale)() || undefined,
view: view,
})
: label;
}
function renderButton() {
var labelClassName = "".concat(className, "__label");
return (react_1.default.createElement("button", { "aria-label": navigationAriaLabel, "aria-live": navigationAriaLive, className: labelClassName, disabled: !drillUpAvailable, onClick: drillUp, style: { flexGrow: 1 }, type: "button" },
react_1.default.createElement("span", { className: "".concat(labelClassName, "__labelText ").concat(labelClassName, "__labelText--from") }, renderLabel(activeStartDate)),
showDoubleView ? (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("span", { className: "".concat(labelClassName, "__divider") }, " \u2013 "),
react_1.default.createElement("span", { className: "".concat(labelClassName, "__labelText ").concat(labelClassName, "__labelText--to") }, renderLabel(nextActiveStartDate)))) : null));
}
return (react_1.default.createElement("div", { className: className },
prev2Label !== null && shouldShowPrevNext2Buttons ? (react_1.default.createElement("button", { "aria-label": prev2AriaLabel, className: "".concat(className, "__arrow ").concat(className, "__prev2-button"), disabled: prev2ButtonDisabled, onClick: onClickPrevious2, type: "button" }, prev2Label)) : null,
prevLabel !== null && (react_1.default.createElement("button", { "aria-label": prevAriaLabel, className: "".concat(className, "__arrow ").concat(className, "__prev-button"), disabled: prevButtonDisabled, onClick: onClickPrevious, type: "button" }, prevLabel)),
renderButton(),
nextLabel !== null && (react_1.default.createElement("button", { "aria-label": nextAriaLabel, className: "".concat(className, "__arrow ").concat(className, "__next-button"), disabled: nextButtonDisabled, onClick: onClickNext, type: "button" }, nextLabel)),
next2Label !== null && shouldShowPrevNext2Buttons ? (react_1.default.createElement("button", { "aria-label": next2AriaLabel, className: "".concat(className, "__arrow ").concat(className, "__next2-button"), disabled: next2ButtonDisabled, onClick: onClickNext2, type: "button" }, next2Label)) : null));
}
exports.default = Navigation;
Navigation.propTypes = {
activeStartDate: prop_types_1.default.instanceOf(Date).isRequired,
drillUp: prop_types_1.default.func.isRequired,
formatMonthYear: prop_types_1.default.func,
formatYear: prop_types_1.default.func,
locale: prop_types_1.default.string,
maxDate: prop_types_1.default.instanceOf(Date),
minDate: prop_types_1.default.instanceOf(Date),
navigationAriaLabel: prop_types_1.default.string,
navigationAriaLive: prop_types_1.default.string,
navigationLabel: prop_types_1.default.func,
next2AriaLabel: prop_types_1.default.string,
next2Label: prop_types_1.default.node,
nextAriaLabel: prop_types_1.default.string,
nextLabel: prop_types_1.default.node,
prev2AriaLabel: prop_types_1.default.string,
prev2Label: prop_types_1.default.node,
prevAriaLabel: prop_types_1.default.string,
prevLabel: prop_types_1.default.node,
setActiveStartDate: prop_types_1.default.func.isRequired,
showDoubleView: prop_types_1.default.bool,
view: propTypes_1.isView.isRequired,
views: propTypes_1.isViews.isRequired,
};