react-modern-gantt/dist/types/components.d.ts

A modern, customizable Gantt chart component for React applications

import React from "react";
import { Task, TaskGroup, GanttStyles } from "./core";
import { ViewMode } from "./enums";
export interface TaskListRenderProps {
    tasks: TaskGroup[];
    headerLabel?: string;
    onGroupClick?: (group: TaskGroup) => void;
    viewMode: ViewMode;
}
export interface TaskRenderProps {
    task: Task;
    leftPx: number;
    widthPx: number;
    topPx: number;
    isHovered: boolean;
    isDragging: boolean;
    editMode: boolean;
    showProgress?: boolean;
}
export interface TooltipRenderProps {
    task: Task;
    position: {
        x: number;
        y: number;
    };
    dragType: "move" | "resize-left" | "resize-right" | null;
    startDate: Date;
    endDate: Date;
    viewMode: ViewMode;
}
export interface ViewModeSelectorRenderProps {
    activeMode: ViewMode;
    onChange: (mode: ViewMode) => void;
    darkMode: boolean;
    availableModes?: ViewMode[];
}
export interface HeaderRenderProps {
    title: string;
    darkMode: boolean;
    viewMode: ViewMode;
    onViewModeChange: (mode: ViewMode) => void;
    showViewModeSelector: boolean;
}
export interface TimelineHeaderRenderProps {
    timeUnits: Date[];
    currentUnitIndex: number;
    viewMode: ViewMode;
    locale: string;
    unitWidth: number;
}
export interface TaskColorProps {
    task: Task;
    isHovered: boolean;
    isDragging: boolean;
}
export interface GanttChartProps {
    tasks: TaskGroup[];
    startDate?: Date;
    endDate?: Date;
    title?: string;
    currentDate?: Date;
    showCurrentDateMarker?: boolean;
    todayLabel?: string;
    editMode?: boolean;
    headerLabel?: string;
    showProgress?: boolean;
    darkMode?: boolean;
    locale?: string;
    styles?: GanttStyles;
    viewMode?: ViewMode;
    viewModes?: ViewMode[] | false;
    smoothDragging?: boolean;
    movementThreshold?: number;
    animationSpeed?: number;
    minuteStep?: number;
    renderTaskList?: (props: TaskListRenderProps) => React.ReactNode;
    renderTask?: (props: TaskRenderProps) => React.ReactNode;
    renderTooltip?: (props: TooltipRenderProps) => React.ReactNode;
    renderViewModeSelector?: (props: ViewModeSelectorRenderProps) => React.ReactNode;
    renderHeader?: (props: HeaderRenderProps) => React.ReactNode;
    renderTimelineHeader?: (props: TimelineHeaderRenderProps) => React.ReactNode;
    getTaskColor?: (props: TaskColorProps) => {
        backgroundColor: string;
        borderColor?: string;
        textColor?: string;
    };
    onTaskUpdate?: (groupId: string, updatedTask: Task) => void;
    onTaskClick?: (task: Task, group: TaskGroup) => void;
    onTaskSelect?: (task: Task, isSelected: boolean) => void;
    onTaskDoubleClick?: (task: Task) => void;
    onGroupClick?: (group: TaskGroup) => void;
    onViewModeChange?: (viewMode: ViewMode) => void;
    fontSize?: string;
    rowHeight?: number;
    timeStep?: number;
    unitWidth?: number;
}
export interface TaskRowProps {
    taskGroup: TaskGroup;
    startDate: Date;
    endDate: Date;
    totalMonths: number;
    monthWidth: number;
    editMode?: boolean;
    showProgress?: boolean;
    className?: string;
    tooltipClassName?: string;
    smoothDragging?: boolean;
    movementThreshold?: number;
    animationSpeed?: number;
    onTaskUpdate?: (groupId: string, updatedTask: Task) => void;
    onTaskClick?: (task: Task, group: TaskGroup) => void;
    onTaskSelect?: (task: Task, isSelected: boolean) => void;
    onAutoScrollChange?: (isScrolling: boolean) => void;
    viewMode?: ViewMode;
    scrollContainerRef: React.RefObject<HTMLDivElement | null>;
    renderTask?: (props: TaskRenderProps) => React.ReactNode;
    renderTooltip?: (props: TooltipRenderProps) => React.ReactNode;
    getTaskColor?: (props: TaskColorProps) => {
        backgroundColor: string;
        borderColor?: string;
        textColor?: string;
    };
}
export interface TaskListProps {
    tasks: TaskGroup[];
    headerLabel?: string;
    showIcon?: boolean;
    showTaskCount?: boolean;
    showDescription?: boolean;
    rowHeight?: number;
    className?: string;
    onGroupClick?: (group: TaskGroup) => void;
    viewMode?: ViewMode;
}
export interface TimelineProps {
    months: Date[];
    currentMonthIndex: number;
    locale?: string;
    className?: string;
    viewMode?: ViewMode;
    unitWidth?: number;
}
export interface TaskItemProps {
    task: Task;
    leftPx: number;
    widthPx: number;
    topPx: number;
    isHovered: boolean;
    isDragging: boolean;
    editMode: boolean;
    showProgress?: boolean;
    instanceId: string;
    className?: string;
    getTaskColor?: (props: TaskColorProps) => {
        backgroundColor: string;
        borderColor?: string;
        textColor?: string;
    };
    renderTask?: (props: TaskRenderProps) => React.ReactNode;
    onMouseDown: (event: React.MouseEvent, task: Task, type: "move" | "resize-left" | "resize-right") => void;
    onMouseEnter: (event: React.MouseEvent, task: Task) => void;
    onMouseLeave: () => void;
    onClick: (event: React.MouseEvent, task: Task) => void;
    onProgressUpdate?: (task: Task, newPercent: number) => void;
}
export interface TooltipProps {
    task: Task;
    position: {
        x: number;
        y: number;
    };
    dragType: "move" | "resize-left" | "resize-right" | null;
    taskId?: string;
    startDate: Date;
    endDate: Date;
    totalMonths: number;
    monthWidth: number;
    showProgress?: boolean;
    instanceId: string;
    className?: string;
    viewMode?: ViewMode;
    renderTooltip?: (props: TooltipRenderProps) => React.ReactNode;
}
export interface TodayMarkerProps {
    currentMonthIndex: number;
    height: number;
    label?: string;
    dayOfMonth?: number;
    className?: string;
    markerClass?: string;
    viewMode?: ViewMode;
    unitWidth?: number;
}
export interface TaskInteraction {
    draggingTask: Task | null;
    dragType: "move" | "resize-left" | "resize-right" | null;
    dragStartX: number;
    hoveredTask: Task | null;
    tooltipPosition: {
        x: number;
        y: number;
    };
    previewTask: Task | null;
}