@navikt/ds-react/esm/timeline/TimelineRow.js

React components from the Norwegian Labour and Welfare Administration.

var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import { format } from "date-fns";
import React, { forwardRef } from "react";
import { useRenameCSS } from "../theme/Theme.js";
import { BodyShort } from "../typography/BodyShort.js";
import { useI18n } from "../util/i18n/i18n.hooks.js";
import { PeriodContext } from "./hooks/usePeriodContext.js";
import { useRowContext } from "./hooks/useRowContext.js";
import { useTimelineContext } from "./hooks/useTimelineContext.js";
import Period from "./period/index.js";
export const TimelineRow = forwardRef((_a, ref) => {
    var { label, className, headingTag = "h3", icon } = _a, rest = __rest(_a, ["label", "className", "headingTag", "icon"]);
    const { cn } = useRenameCSS();
    const { periods, id, active } = useRowContext();
    const { setActiveRow } = useTimelineContext();
    const translate = useI18n("Timeline");
    const latest = periods.reduce((a, b) => {
        return a.end > b.end ? a : b;
    }, {});
    const earliest = periods.reduce((a, b) => {
        return a.end < b.end ? a : b;
    }, {});
    const firstFocusable = periods.find((p) => !!p.children || !!p.onSelectPeriod);
    return (React.createElement(React.Fragment, null,
        label && (React.createElement(BodyShort, { as: headingTag, id: `timeline-row-${id}`, className: cn("navds-timeline__row-label"), size: "small" },
            icon,
            label)),
        React.createElement("div", { className: cn("navds-timeline__row", {
                "navds-timeline__row--active": active,
            }) },
            React.createElement("ol", Object.assign({}, rest, { tabIndex: -1, ref: ref, "aria-label": periods.length === 0
                    ? translate("Row.noPeriods")
                    : translate("Row.period", {
                        start: format(earliest.start, translate("dateFormat")),
                        end: format(latest.end, translate("dateFormat")),
                    }), className: cn("navds-timeline__row-periods", className), onKeyDown: (e) => {
                    if (e.key === "ArrowDown" || e.key === "ArrowUp") {
                        e.preventDefault();
                        setActiveRow(e.key);
                    }
                } }), periods === null || periods === void 0 ? void 0 : periods.map((period) => {
                return (React.createElement("li", { key: `period-${period.id}` },
                    React.createElement(PeriodContext.Provider, { value: {
                            periodId: period.id,
                            firstFocus: (firstFocusable === null || firstFocusable === void 0 ? void 0 : firstFocusable.id) === period.id,
                            restProps: period === null || period === void 0 ? void 0 : period.restProps,
                        } },
                        React.createElement(Period, { start: period.start, end: period.endInclusive, icon: period.icon, ref: period === null || period === void 0 ? void 0 : period.ref }))));
            })))));
});
TimelineRow.componentType = "row";
export default TimelineRow;
//# sourceMappingURL=TimelineRow.js.map