@navikt/ds-react
Version:
React components from the Norwegian Labour and Welfare Administration.
54 lines • 3.83 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.MonthPickerCaption = void 0;
const date_fns_1 = require("date-fns");
const react_1 = __importDefault(require("react"));
const aksel_icons_1 = require("@navikt/aksel-icons");
const button_1 = require("../../../button");
const select_1 = require("../../../form/select");
const Theme_1 = require("../../../theme/Theme");
const Date_locale_1 = require("../../Date.locale");
const MonthPicker_context_1 = require("../MonthPicker.context");
const MonthPickerCaption = () => {
const { fromDate, toDate, locale, year, onYearChange, caption } = (0, MonthPicker_context_1.useMonthPickerContext)();
const translate = (0, Date_locale_1.useDateTranslationContext)().translate;
const { cn } = (0, Theme_1.useRenameCSS)();
const years = [];
if (caption === "dropdown" && fromDate && toDate) {
const fromYear = fromDate.getFullYear();
const toDateYear = toDate.getFullYear();
for (let currYear = fromYear; currYear <= toDateYear; currYear++) {
years.push((0, date_fns_1.setYear)((0, date_fns_1.startOfYear)(new Date()), currYear));
}
if (!years.map((x) => x.getFullYear()).includes(year.getFullYear())) {
years.push((0, date_fns_1.setYear)((0, date_fns_1.startOfYear)(new Date()), year.getFullYear()));
}
years.sort((a, b) => b.getFullYear() - a.getFullYear());
}
const handleYearChange = (event) => {
onYearChange((0, date_fns_1.setYear)((0, date_fns_1.startOfMonth)(new Date()), Number(event.target.value)));
};
const handleButtonClick = (val) => {
const newYear = Number(year.getFullYear() + val);
onYearChange((0, date_fns_1.setYear)(year, newYear));
};
const disablePreviousYear = () => {
return fromDate
? (0, date_fns_1.isBefore)((year === null || year === void 0 ? void 0 : year.getFullYear()) - 1, fromDate === null || fromDate === void 0 ? void 0 : fromDate.getFullYear())
: false;
};
const disableNextYear = () => {
return toDate
? (0, date_fns_1.isAfter)((year === null || year === void 0 ? void 0 : year.getFullYear()) + 1, toDate === null || toDate === void 0 ? void 0 : toDate.getFullYear())
: false;
};
return (react_1.default.createElement("div", { className: cn("navds-date__caption") },
react_1.default.createElement(button_1.Button, { className: cn("navds-date__caption-button"), disabled: disablePreviousYear(), onClick: () => handleButtonClick(-1), icon: react_1.default.createElement(aksel_icons_1.ArrowLeftIcon, { title: translate("goToPreviousYear") }), variant: "tertiary-neutral", type: "button" }),
caption === "dropdown" ? (react_1.default.createElement(select_1.Select, { label: translate("year"), hideLabel: true, value: year.getFullYear(), onChange: handleYearChange, className: cn("navds-date__caption__year") }, years.map((yearOpt) => (react_1.default.createElement("option", { key: yearOpt.getFullYear(), value: yearOpt.getFullYear() }, (0, date_fns_1.format)(yearOpt, "yyyy", { locale })))))) : (react_1.default.createElement("span", { className: cn("navds-date__year-label"), "aria-live": "polite" }, year.getFullYear())),
react_1.default.createElement(button_1.Button, { className: cn("navds-date__caption-button"), disabled: disableNextYear(), onClick: () => handleButtonClick(1), icon: react_1.default.createElement(aksel_icons_1.ArrowRightIcon, { title: translate("goToNextYear") }), variant: "tertiary-neutral", type: "button" })));
};
exports.MonthPickerCaption = MonthPickerCaption;
//# sourceMappingURL=MonthPicker.Caption.js.map