@progress/kendo-react-layout
Version:
React Layout components enable you to create a perceptive and intuitive layout of web projects. KendoReact Layout package
206 lines (205 loc) • 6.14 kB
TypeScript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2026 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
import { Navigation } from '@progress/kendo-react-common';
import { EventDataProps } from './TimelineCard.js';
import * as React from 'react';
export type { EventDataProps };
export interface TimelineEventProps {
/**
* Specifies if the TimelineEvent card is default collapsed.
*
* @default false
*
* @example
* ```jsx
* <Timeline events={[{ opened: true, title: 'Event 1', date: new Date(), description: 'Details' }]} />
* ```
*/
opened?: boolean;
/**
* Specifies the text that is rendered as TimelineEvent card body.
*
* @example
* ```jsx
* <Timeline events={[{ description: 'Event details', title: 'Event 1', date: new Date() }]} />
* ```
*/
description: string;
/**
* Represents the TimelineEvent point on the axis.
*
* @example
* ```jsx
* <Timeline events={[{ date: new Date(), title: 'Event 1', description: 'Details' }]} />
* ```
*/
date: Date;
/**
* Specifies the text that is rendered as the TimelineEvent card title.
*
* @example
* ```jsx
* <Timeline events={[{ title: 'Event 1', date: new Date(), description: 'Details' }]} />
* ```
*/
title: string;
/**
* Specifies the text that is rendered under the `title`.
*
* @example
* ```jsx
* <Timeline events={[{ subtitle: 'Subtitle', title: 'Event 1', date: new Date(), description: 'Details' }]} />
* ```
*/
subtitle?: string;
/**
* Specifies the images that are rendered under the `description`.
*
* @example
* ```jsx
* <Timeline events={[{ images: [{ src: 'image.jpg', alt: 'Image' }], title: 'Event 1', date: new Date(), description: 'Details' }]} />
* ```
*/
images?: {
src: string;
alt?: string;
}[];
/**
* Specifies the corresponding links that are rendered under the `images`.
*
* @example
* ```jsx
* <Timeline events={[{ actions: [{ text: 'Learn More', url: 'https://example.com' }], title: 'Event 1', date: new Date(), description: 'Details' }]} />
* ```
*/
actions?: {
text: string;
url: string;
}[];
/**
* @hidden
*/
yearFlag?: number;
}
export interface TimelineProps {
/**
* The collection of TimelineEvents to be displayed in the Timeline.
*
* @example
* ```jsx
* <Timeline events={[{ title: 'Event 1', date: new Date(), description: 'Details' }]} />
* ```
*/
events: TimelineEventProps[];
/**
* Specifies the CSS class names which are set to the Timeline.
*
* @example
* ```jsx
* <Timeline className="custom-class" events={[{ title: 'Event 1', date: new Date(), description: 'Details' }]} />
* ```
*/
className?: string;
/**
* Specifies whether the TimelineEvent cards can be expanded or collapsed.
*
* @default false
*
* @example
* ```jsx
* <Timeline collapsibleEvents={true} events={[{ title: 'Event 1', date: new Date(), description: 'Details' }]} />
* ```
*/
collapsibleEvents?: boolean;
/**
* Switches the Timeline to horizontal mode.
*
* @default false
*
* @example
* ```jsx
* <Timeline horizontal={true} events={[{ title: 'Event 1', date: new Date(), description: 'Details' }]} />
* ```
*/
horizontal?: boolean;
/**
* The date format for displaying the TimelineEvent date.
*
* @default MMM dd, yyyy
*
* @example
* ```jsx
* <Timeline dateFormat="dd/MM/yyyy" events={[{ title: 'Event 1', date: new Date(), description: 'Details' }]} />
* ```
*/
dateFormat?: string;
/**
* Renders TimelineEvents alternatingly on both sides of the axis.
*
* @default false
*
* @example
* ```jsx
* <Timeline alterMode={true} events={[{ title: 'Event 1', date: new Date(), description: 'Details' }]} />
* ```
*/
alterMode?: boolean;
/**
* Specifies the time for sliding to the next TimelineEvent in horizontal mode and collapsing the TimelineEvent in vertical mode.
* The default value are:
* - `300ms` for horizontal
* - `400ms` for vertical
*
* @example
* ```jsx
* <Timeline transitionDuration={500} events={[{ title: 'Event 1', date: new Date(), description: 'Details' }]} />
* ```
*/
transitionDuration?: number;
/**
* Enables keyboard navigation for the Timeline.
*
* @default false
*
* @example
* ```jsx
* <Timeline navigatable={true} events={[{ title: 'Event 1', date: new Date(), description: 'Details' }]} />
* ```
*/
navigatable?: boolean;
/**
* Fires when a TimelineEvent card is toggled.
*
* @example
* ```jsx
* <Timeline onChange={(event) => console.log(event)} events={[{ title: 'Event 1', date: new Date(), description: 'Details' }]} />
* ```
*/
onChange?: (event: EventDataProps) => void;
/**
* Fires when a TimelineEvent card action is clicked.
*
* @example
* ```jsx
* <Timeline onActionClick={(event) => console.log(event)} events={[{ title: 'Event 1', date: new Date(), description: 'Details' }]} />
* ```
*/
onActionClick?: (event: EventDataProps) => void;
}
/**
* @hidden
*/
export interface TimelineDirectionsProps {
eventsData: TimelineEventProps[];
dateFormat?: string;
transitionDuration?: number;
navigatable?: boolean;
navigation?: React.MutableRefObject<Navigation>;
onActionClick?: (event: EventDataProps) => void;
}
export declare const Timeline: React.FunctionComponent<TimelineProps>;