@navikt/ds-react
Version:
React components from the Norwegian Labour and Welfare Administration.
36 lines • 2.16 kB
JavaScript
import React, { useMemo } from "react";
import { useDayPicker } from "react-day-picker";
import { Button } from "../../../button/index.js";
import { Hide, Show } from "../../../layout/responsive/index.js";
import { useRenameCSS } from "../../../theme/Theme.js";
import { Detail } from "../../../typography/index.js";
import { useDateTranslationContext } from "../../Date.locale.js";
const DatePickerWeekNumber = ({ week: { weekNumber, days }, onWeekNumberClick, className, style, showOnDesktop, }) => {
const translate = useDateTranslationContext().translate;
const { cn } = useRenameCSS();
const { getModifiers } = useDayPicker();
const hideWeek = useMemo(() => {
if (days.filter((day) => {
const mods = getModifiers(day);
return !(mods.hidden || mods.outside || mods.disabled);
}).length === 0) {
return true;
}
return false;
}, [days, getModifiers]);
const DisplayMode = showOnDesktop ? Show : Hide;
if (!onWeekNumberClick || hideWeek) {
return (React.createElement(DisplayMode, { above: "sm", asChild: true },
React.createElement("td", { className: "rdp-cell" },
React.createElement(Detail, { as: "span", textColor: "subtle", className: className, style: style, "aria-label": translate("weekNumber", { week: weekNumber }) }, weekNumber))));
}
return (React.createElement(DisplayMode, { above: "sm", asChild: true },
React.createElement("td", { className: cn("rdp-cell", {
"navds-date__week-wrapper": !showOnDesktop,
}) },
React.createElement(Button, { variant: "secondary-neutral", size: "small", name: "week-number", "aria-label": translate("selectWeekNumber", { week: weekNumber }), style: style, className: cn("navds-date__weeknumber", "rdp-weeknumber"), onClick: () => {
onWeekNumberClick(weekNumber, days.map((day) => day.date));
}, icon: React.createElement("span", { className: cn("navds-date__weeknumber-number") }, weekNumber) }))));
};
export { DatePickerWeekNumber };
//# sourceMappingURL=DatePicker.WeekNumber.js.map