@navikt/ds-react/cjs/timeline/Timeline.d.ts

React components from the Norwegian Labour and Welfare Administration.

import React from "react";
import { PinType } from "./Pin";
import { TimelineRowType } from "./TimelineRow";
import { PeriodType } from "./period";
import { AxisLabelTemplates } from "./utils/types.external";
import { ZoomType } from "./zoom";
export interface TimelineProps extends React.HTMLAttributes<HTMLDivElement> {
    children: React.ReactNode;
    /**
     * Decides startingpoint in timeline.
     * Defaults to earliest date among the timeline periods.
     *
     * Using this disables use of ZoomButtons. You will need to control zooming yourself.
     */
    startDate?: Date;
    /**
     * Decides end-date for timeline.
     * Defaults to the latest date among the timeline periods.
     *
     * Using this disables use of ZoomButtons. You will need to control zooming yourself.
     */
    endDate?: Date;
    /**
     * Decides direction which periods are sorted/displayed. "left" ascends from earliest date on left.
     * @default "left"
     */
    direction?: "left" | "right";
    /**
     * Templates for label texts. The templates are passed to the date-fns `format` function.
     * Defaults to { day: "dd.MM", month: "MMM yy", year: "yyyy" }.
     * @deprecated Use `<Provider />`-component
     */
    axisLabelTemplates?: AxisLabelTemplates;
}
interface TimelineComponent extends React.ForwardRefExoticComponent<TimelineProps> {
    /**
     * @see 🏷️ {@link TimelineRowType}
     */
    Row: TimelineRowType;
    /**
     * @see 🏷️ {@link PeriodType}
     */
    Period: PeriodType;
    /**
     * @see 🏷️ {@link PinType}
     */
    Pin: PinType;
    /**
     * @see 🏷️ {@link ZoomType}
     */
    Zoom: ZoomType;
}
/**
 * A component that displays a timeline of events. Meant for Internal systems.
 *
 * Component is made for desktop enviroments and will start having issues on smaller screens.
 *
 * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/timeline)
 * @see 🏷️ {@link TimelineProps}
 *
 * @example
 * ```jsx
 * <Timeline>
 *   <Timeline.Row>
 *    <Timeline.Period start={new Date("2020-01-01")} end={new Date("2020-01-31")}>
 *    <p>Period 1</p>
 *   </Timeline.Period>
 *  <Timeline.Row>
 * </Timeline>
 * ```
 */
export declare const Timeline: TimelineComponent;
export default Timeline;