@navikt/ds-react
Version:
React components from the Norwegian Labour and Welfare Administration.
90 lines • 4.24 kB
JavaScript
import { addDays, addMonths, addYears, differenceInDays, differenceInMonths, differenceInYears, endOfMonth, endOfYear, format, startOfDay, startOfMonth, startOfYear, subDays, } from "date-fns";
import React from "react";
import { useRenameCSS } from "../theme/Theme.js";
import { Detail } from "../typography/Detail.js";
import { useDateLocale, useI18n } from "../util/i18n/i18n.hooks.js";
import { useTimelineContext } from "./hooks/useTimelineContext.js";
import { isVisible } from "./utils/index.js";
import { horizontalPositionAndWidth } from "./utils/calc.js";
export const dayLabels = (start, end, totalDays, direction, template, locale) => {
const increment = Math.ceil(totalDays / 10);
const lastDay = startOfDay(end);
return new Array(totalDays)
.fill(lastDay)
.map((thisDay, i) => {
if (i % increment !== 0)
return null;
const day = subDays(thisDay, i);
const { horizontalPosition, width } = horizontalPositionAndWidth(day, addDays(day, 1), start, end);
return {
direction,
horizontalPosition,
label: format(day, template, { locale }),
date: day,
width,
};
})
.filter((label) => label !== null);
};
export const monthLabels = (start, end, direction, template, locale) => {
const startMonth = startOfMonth(start);
const endMonth = endOfMonth(end);
const numberOfMonths = differenceInMonths(endMonth, startMonth) + 1;
return new Array(numberOfMonths).fill(startMonth).map((thisMonth, i) => {
const month = addMonths(thisMonth, i);
const { horizontalPosition, width } = horizontalPositionAndWidth(month, addMonths(month, 1), start, end);
return {
direction,
horizontalPosition,
label: format(month, template, { locale }),
date: month,
width,
};
});
};
export const yearLabels = (start, end, direction, template, locale) => {
const firstYear = startOfYear(start);
const lastYear = endOfYear(end);
const yearCount = differenceInYears(lastYear, start) + 1;
return new Array(yearCount).fill(firstYear).map((thisYear, i) => {
const year = addYears(thisYear, i);
const { horizontalPosition, width } = horizontalPositionAndWidth(year, addYears(year, 1), start, end);
return {
direction,
horizontalPosition,
label: format(year, template, { locale }),
date: year,
width,
};
});
};
const getLabels = (start, end, direction, locale, translate) => {
const totalDays = differenceInDays(end, start);
if (totalDays < 40) {
const dayTemplate = translate("dayFormat");
return dayLabels(start, end, totalDays, direction, dayTemplate, locale);
}
if (totalDays < 370) {
const monthTemplate = translate("monthFormat");
return monthLabels(start, end, direction, monthTemplate, locale);
}
const yearTemplate = translate("yearFormat");
return yearLabels(start, end, direction, yearTemplate, locale);
};
export const AxisLabels = ({ templates, }) => {
const { endDate, startDate, direction } = useTimelineContext();
const translate = useI18n("Timeline", {
dayFormat: templates === null || templates === void 0 ? void 0 : templates.day,
monthFormat: templates === null || templates === void 0 ? void 0 : templates.month,
yearFormat: templates === null || templates === void 0 ? void 0 : templates.year,
});
const locale = useDateLocale();
const labels = getLabels(startDate, endDate, direction, locale, translate);
const { cn } = useRenameCSS();
return (React.createElement("div", { className: cn("navds-timeline__axislabels"), "aria-hidden": "true" }, labels.filter(isVisible).map((etikett) => (React.createElement(Detail, { className: cn("navds-timeline__axislabels-label"), as: "div", key: etikett.label, style: {
justifyContent: direction === "left" ? "flex-start" : "flex-end",
[direction]: `${etikett.horizontalPosition}%`,
width: `${etikett.width}%`,
} }, etikett.label)))));
};
//# sourceMappingURL=AxisLabels.js.map