@navikt/ds-react
Version:
React components from the Norwegian Labour and Welfare Administration.
48 lines • 3.29 kB
JavaScript
import { format, isAfter, isBefore, setYear, startOfMonth, startOfYear, } from "date-fns";
import React from "react";
import { ArrowLeftIcon, ArrowRightIcon } from "@navikt/aksel-icons";
import { Button } from "../../../button/index.js";
import { Select } from "../../../form/select/index.js";
import { useRenameCSS } from "../../../theme/Theme.js";
import { useDateTranslationContext } from "../../Date.locale.js";
import { useMonthPickerContext } from "../MonthPicker.context.js";
const MonthPickerCaption = () => {
const { fromDate, toDate, locale, year, onYearChange, caption } = useMonthPickerContext();
const translate = useDateTranslationContext().translate;
const { cn } = 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(setYear(startOfYear(new Date()), currYear));
}
if (!years.map((x) => x.getFullYear()).includes(year.getFullYear())) {
years.push(setYear(startOfYear(new Date()), year.getFullYear()));
}
years.sort((a, b) => b.getFullYear() - a.getFullYear());
}
const handleYearChange = (event) => {
onYearChange(setYear(startOfMonth(new Date()), Number(event.target.value)));
};
const handleButtonClick = (val) => {
const newYear = Number(year.getFullYear() + val);
onYearChange(setYear(year, newYear));
};
const disablePreviousYear = () => {
return fromDate
? 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
? isAfter((year === null || year === void 0 ? void 0 : year.getFullYear()) + 1, toDate === null || toDate === void 0 ? void 0 : toDate.getFullYear())
: false;
};
return (React.createElement("div", { className: cn("navds-date__caption") },
React.createElement(Button, { className: cn("navds-date__caption-button"), disabled: disablePreviousYear(), onClick: () => handleButtonClick(-1), icon: React.createElement(ArrowLeftIcon, { title: translate("goToPreviousYear") }), variant: "tertiary-neutral", type: "button" }),
caption === "dropdown" ? (React.createElement(Select, { label: translate("year"), hideLabel: true, value: year.getFullYear(), onChange: handleYearChange, className: cn("navds-date__caption__year") }, years.map((yearOpt) => (React.createElement("option", { key: yearOpt.getFullYear(), value: yearOpt.getFullYear() }, format(yearOpt, "yyyy", { locale })))))) : (React.createElement("span", { className: cn("navds-date__year-label"), "aria-live": "polite" }, year.getFullYear())),
React.createElement(Button, { className: cn("navds-date__caption-button"), disabled: disableNextYear(), onClick: () => handleButtonClick(1), icon: React.createElement(ArrowRightIcon, { title: translate("goToNextYear") }), variant: "tertiary-neutral", type: "button" })));
};
export { MonthPickerCaption };
//# sourceMappingURL=MonthPicker.Caption.js.map