react-chrono/dist/models/TimelineModel.d.ts

A Modern Timeline component for React

import { Theme } from './Theme';
import { TimelineItemModel } from './TimelineItemModel';
export type TextDensity = 'LOW' | 'HIGH';
/**
 * model internally used by the component
 *
 * @export
 * @interface TimelineModel
 * @extends {TimelineProps}
 */
export type TimelineModel = Pick<TimelineProps, 'items' | 'onItemSelected' | 'onRestartSlideshow' | 'theme' | 'slideShow' | 'onScrollEnd' | 'mode' | 'timelinePointDimension' | 'nestedCardHeight' | 'noUniqueId' | 'uniqueId'> & {
    activeTimelineItem?: number;
    contentDetailsChildren?: React.ReactNode | React.ReactNode[];
    iconChildren?: React.ReactNode | React.ReactNode[];
    isChild?: boolean;
    onFirst?: () => void;
    onLast?: () => void;
    onNext?: () => void;
    onOutlineSelection?: (index: number) => void;
    onPaused?: () => void;
    onPrevious?: () => void;
    onTimelineUpdated?: (id: number) => void;
    slideItemDuration?: number;
    slideShowEnabled?: boolean;
    slideShowRunning?: boolean;
};
type Option = {
    helpText?: string;
    text: string;
};
type ChangeDensityOptions = {
    high?: Option;
    low?: Option;
};
type ChangeLayoutOptions = {
    alternating?: Option;
    horizontal?: Option;
    horizontal_all?: Option;
    vertical?: Option;
};
export type ButtonTexts = {
    changeDensity?: string;
    changeDensityOptions?: ChangeDensityOptions;
    changeLayout?: string;
    changeLayoutOptions?: ChangeLayoutOptions;
    dark?: string;
    first: string;
    jumpTo?: string;
    last: string;
    light?: string;
    next?: string;
    play?: string;
    previous?: string;
    stop?: string;
    searchPlaceholder?: string;
    searchAriaLabel?: string;
    clearSearch?: string;
    previousMatch?: string;
    nextMatch?: string;
    timelinePoint?: string;
};
/**
 * Main props used by the host app.
 *
 * @export
 * @interface TimelineProps
 */
export type TimelineProps = {
    activeItemIndex?: number;
    allowDynamicUpdate?: boolean;
    borderLessCards?: boolean;
    buttonTexts?: ButtonTexts;
    cardHeight?: number;
    cardLess?: boolean;
    cardPositionHorizontal?: 'TOP' | 'BOTTOM';
    cardWidth?: number;
    children?: React.ReactElement | React.ReactElement[];
    classNames?: {
        card?: string;
        cardMedia?: string;
        cardSubTitle?: string;
        cardText?: string;
        cardTitle?: string;
        controls?: string;
        title?: string;
    };
    contentDetailsHeight?: number;
    darkMode?: boolean;
    disableAutoScrollOnClick?: boolean;
    disableClickOnCircle?: boolean;
    disableInteraction?: boolean;
    disableNavOnKey?: boolean;
    disableTimelinePoint?: boolean;
    disableToolbar?: boolean;
    enableBreakPoint?: boolean;
    enableDarkToggle?: boolean;
    enableLayoutSwitch?: boolean;
    enableQuickJump?: boolean;
    flipLayout?: boolean;
    focusActiveItemOnLoad?: boolean;
    fontSizes?: {
        cardSubtitle?: string;
        cardText?: string;
        cardTitle?: string;
        title?: string;
    };
    highlightCardsOnHover?: boolean;
    itemWidth?: number;
    items?: TimelineItemModel[];
    lineWidth?: number;
    mediaHeight?: number;
    mediaSettings?: {
        align?: 'left' | 'right' | 'center';
        fit?: 'cover' | 'contain' | 'fill' | 'none';
    };
    mode?: TimelineMode;
    nestedCardHeight?: number;
    noUniqueId?: boolean;
    isChild?: boolean;
    onItemSelected?: (data: Pick<TimelineItemModel, 'title' | 'cardDetailedText' | 'cardSubtitle' | 'cardTitle'> & {
        index: number;
    }) => void;
    onRestartSlideshow?: () => void;
    onScrollEnd?: () => void;
    onThemeChange?: () => void;
    parseDetailsAsHTML?: boolean;
    responsiveBreakPoint?: number;
    scrollable?: boolean | {
        scrollbar: boolean;
    };
    showAllCardsHorizontal?: boolean;
    showProgressOnSlideshow?: boolean;
    showOverallSlideshowProgress?: boolean;
    slideItemDuration?: number;
    slideShow?: boolean;
    slideShowType?: SlideShowType;
    textDensity?: TextDensity;
    textOverlay?: boolean;
    theme?: Theme;
    timelinePointDimension?: number;
    timelinePointShape?: 'circle' | 'square' | 'diamond';
    title?: string;
    titleDateFormat?: string;
    toolbarPosition?: 'top' | 'bottom';
    uniqueId?: string;
    useReadMore?: boolean;
    /**
     * Semantic configuration for card elements.
     *
     * This property allows you to specify the semantic HTML tags to be used for
     * the card title and subtitle. It is useful for improving accessibility and
     * aligning with the semantic structure of your application.
     *
     * @property {('h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span' | 'div')} [cardTitle]
     *   The HTML tag to use for the card title. Defaults to 'h3' if not specified.
     * @property {('h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span' | 'div')} [cardSubtitle]
     *   The HTML tag to use for the card subtitle. Defaults to 'h4' if not specified.
     */
    semanticTags?: {
        cardTitle?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span' | 'div';
        cardSubtitle?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span' | 'div';
    };
};
export type SlideShowType = 'reveal' | 'slide_in' | 'slide_from_sides';
export type TimelineMode = 'VERTICAL' | 'HORIZONTAL' | 'VERTICAL_ALTERNATING' | 'HORIZONTAL_ALL';
export {};