@navikt/ds-react
Version:
React components from the Norwegian Labour and Welfare Administration.
100 lines • 4.93 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.AxisLabels = exports.yearLabels = exports.monthLabels = exports.dayLabels = void 0;
const date_fns_1 = require("date-fns");
const react_1 = __importDefault(require("react"));
const Theme_1 = require("../theme/Theme");
const Detail_1 = require("../typography/Detail");
const i18n_hooks_1 = require("../util/i18n/i18n.hooks");
const useTimelineContext_1 = require("./hooks/useTimelineContext");
const utils_1 = require("./utils");
const calc_1 = require("./utils/calc");
const dayLabels = (start, end, totalDays, direction, template, locale) => {
const increment = Math.ceil(totalDays / 10);
const lastDay = (0, date_fns_1.startOfDay)(end);
return new Array(totalDays)
.fill(lastDay)
.map((thisDay, i) => {
if (i % increment !== 0)
return null;
const day = (0, date_fns_1.subDays)(thisDay, i);
const { horizontalPosition, width } = (0, calc_1.horizontalPositionAndWidth)(day, (0, date_fns_1.addDays)(day, 1), start, end);
return {
direction,
horizontalPosition,
label: (0, date_fns_1.format)(day, template, { locale }),
date: day,
width,
};
})
.filter((label) => label !== null);
};
exports.dayLabels = dayLabels;
const monthLabels = (start, end, direction, template, locale) => {
const startMonth = (0, date_fns_1.startOfMonth)(start);
const endMonth = (0, date_fns_1.endOfMonth)(end);
const numberOfMonths = (0, date_fns_1.differenceInMonths)(endMonth, startMonth) + 1;
return new Array(numberOfMonths).fill(startMonth).map((thisMonth, i) => {
const month = (0, date_fns_1.addMonths)(thisMonth, i);
const { horizontalPosition, width } = (0, calc_1.horizontalPositionAndWidth)(month, (0, date_fns_1.addMonths)(month, 1), start, end);
return {
direction,
horizontalPosition,
label: (0, date_fns_1.format)(month, template, { locale }),
date: month,
width,
};
});
};
exports.monthLabels = monthLabels;
const yearLabels = (start, end, direction, template, locale) => {
const firstYear = (0, date_fns_1.startOfYear)(start);
const lastYear = (0, date_fns_1.endOfYear)(end);
const yearCount = (0, date_fns_1.differenceInYears)(lastYear, start) + 1;
return new Array(yearCount).fill(firstYear).map((thisYear, i) => {
const year = (0, date_fns_1.addYears)(thisYear, i);
const { horizontalPosition, width } = (0, calc_1.horizontalPositionAndWidth)(year, (0, date_fns_1.addYears)(year, 1), start, end);
return {
direction,
horizontalPosition,
label: (0, date_fns_1.format)(year, template, { locale }),
date: year,
width,
};
});
};
exports.yearLabels = yearLabels;
const getLabels = (start, end, direction, locale, translate) => {
const totalDays = (0, date_fns_1.differenceInDays)(end, start);
if (totalDays < 40) {
const dayTemplate = translate("dayFormat");
return (0, exports.dayLabels)(start, end, totalDays, direction, dayTemplate, locale);
}
if (totalDays < 370) {
const monthTemplate = translate("monthFormat");
return (0, exports.monthLabels)(start, end, direction, monthTemplate, locale);
}
const yearTemplate = translate("yearFormat");
return (0, exports.yearLabels)(start, end, direction, yearTemplate, locale);
};
const AxisLabels = ({ templates, }) => {
const { endDate, startDate, direction } = (0, useTimelineContext_1.useTimelineContext)();
const translate = (0, i18n_hooks_1.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 = (0, i18n_hooks_1.useDateLocale)();
const labels = getLabels(startDate, endDate, direction, locale, translate);
const { cn } = (0, Theme_1.useRenameCSS)();
return (react_1.default.createElement("div", { className: cn("navds-timeline__axislabels"), "aria-hidden": "true" }, labels.filter(utils_1.isVisible).map((etikett) => (react_1.default.createElement(Detail_1.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)))));
};
exports.AxisLabels = AxisLabels;
//# sourceMappingURL=AxisLabels.js.map