react-chrono/dist/types/components/contexts/TimelineContextProvider.d.ts

A Modern Timeline component for React

import { default as React, FunctionComponent } from 'react';
import { TimelineProps as TimelinePropsModel, TextDensity, ButtonTexts, SlideShowType } from '../../models/TimelineModel';
import { Theme } from '../../models/Theme';
import { TimelineI18nConfig } from '../../models/TimelineI18n';
import { useI18n } from '../../hooks/useI18n';
import { TextResolver } from '../../utils/textResolver';
/**
 * Static configuration that rarely changes
 */
export interface TimelineStaticConfig {
    mode: NonNullable<TimelinePropsModel['mode']>;
    cardHeight: number | 'auto';
    cardWidth: number;
    cardLess: boolean;
    flipLayout: boolean;
    itemWidth: number;
    lineWidth: number;
    mediaHeight: number;
    mediaSettings: {
        align: 'left' | 'right' | 'center';
        fit: 'cover' | 'contain' | 'fill' | 'none';
    };
    timelinePointDimension: number;
    timelinePointShape: 'circle' | 'square' | 'diamond';
    disableNavOnKey: boolean;
    disableAutoScrollOnClick: boolean;
    disableInteraction: boolean;
    disableClickOnCircle: boolean;
    disableTimelinePoint: boolean;
    enableBreakPoint: boolean;
    enableDarkToggle: boolean;
    enableLayoutSwitch: boolean;
    enableQuickJump: boolean;
    focusActiveItemOnLoad: boolean;
    highlightCardsOnHover: boolean;
    borderLessCards: boolean;
    cardPositionHorizontal: 'TOP' | 'BOTTOM';
    parseDetailsAsHTML: boolean;
    useReadMore: boolean;
    textOverlay: boolean;
    contentAlignment: {
        horizontal: 'left' | 'center' | 'right' | 'stretch';
        vertical: 'top' | 'center' | 'bottom' | 'stretch';
    };
    scrollable: boolean | {
        scrollbar: boolean;
    };
    toolbarPosition: 'top' | 'bottom';
    disableToolbar: boolean;
    toolbarSearchConfig: {
        width?: string;
        maxWidth?: string;
        minWidth?: string;
        inputWidth?: string;
        inputMaxWidth?: string;
    } | undefined;
    slideItemDuration: number;
    showProgressOnSlideshow: boolean;
    showOverallSlideshowProgress: boolean;
    titleDateFormat: string;
    uniqueId: string;
    nestedCardHeight: number;
    contentDetailsHeight: number;
    responsiveBreakPoint: number;
    noUniqueId: boolean;
    isChild: boolean;
}
/**
 * Dynamic state that changes frequently
 */
export interface TimelineDynamicState {
    isDarkMode: boolean;
    isMobile: boolean;
    showAllCardsHorizontal: boolean;
    textContentDensity: TextDensity;
    toggleDarkMode: () => void;
    updateShowAllCardsHorizontal: (state: boolean) => void;
    updateTextContentDensity: (density: TextDensity) => void;
}
/**
 * Memoized objects that change less frequently
 */
export interface TimelineMemoizedObjects {
    theme: Theme;
    buttonTexts: ButtonTexts;
    classNames: Record<string, string>;
    fontSizes: Record<string, string>;
    isDarkMode: boolean;
    semanticTags: Record<string, string>;
    slideShowType: SlideShowType;
    googleFonts: any;
    i18nConfig: TimelineI18nConfig | undefined;
    i18nHelper: ReturnType<typeof useI18n>;
    textResolver: TextResolver;
}
/**
 * Combined context interface
 */
export interface TimelineContextValue extends TimelineStaticConfig, TimelineDynamicState, TimelineMemoizedObjects {
    computedCardHeight: number | 'auto';
    computedActiveItemIndex: number;
    computedMediaAlign: string;
    items?: TimelinePropsModel['items'];
    activeItemIndex?: number;
    onScrollEnd: () => void;
    onThemeChange: () => void;
}
export interface TimelineContextProviderProps extends Omit<Partial<TimelinePropsModel>, 'children'> {
    children: React.ReactNode;
    toolbarSearchConfig?: {
        width?: string;
        maxWidth?: string;
        minWidth?: string;
        inputWidth?: string;
        inputMaxWidth?: string;
    };
    googleFonts?: {
        fontFamily: string;
        elements?: {
            title?: {
                weight?: any;
                style?: any;
                size?: string;
            };
            cardTitle?: {
                weight?: any;
                style?: any;
                size?: string;
            };
            cardSubtitle?: {
                weight?: any;
                style?: any;
                size?: string;
            };
            cardText?: {
                weight?: any;
                style?: any;
                size?: string;
            };
            controls?: {
                weight?: any;
                style?: any;
                size?: string;
            };
        };
        weights?: any[];
        display?: string;
        preconnect?: boolean;
    };
    i18nConfig?: TimelineI18nConfig;
}
export declare const TimelineContextProvider: FunctionComponent<TimelineContextProviderProps>;
/**
 * Hook to access the timeline context
 */
export declare const useTimelineContext: () => TimelineContextValue;
/**
 * Hook to access only static configuration (performance optimized)
 */
export declare const useTimelineStaticConfig: () => TimelineStaticConfig;
/**
 * Hook to access only dynamic state (performance optimized)
 */
export declare const useTimelineDynamicState: () => TimelineDynamicState;
/**
 * Hook to access only memoized objects (performance optimized)
 */
export declare const useTimelineMemoizedObjects: () => TimelineMemoizedObjects;
//# sourceMappingURL=TimelineContextProvider.d.ts.map