semi-design/packages/semi-ui/carousel/interface.ts

import React, { ReactNode } from "react";
import { strings } from '@douyinfe/semi-foundation/carousel/constants';

export interface CarouselMethod {
    next?: () => void;
    prev?: () => void;
    goTo?: (tagetIndex: number) => void;
    play?: () => void;
    stop?: () => void;
}

export interface CarouselProps {
    activeIndex?: number;
    animation?: typeof strings.ANIMATION_MAP[number];
    arrowProps?: ArrowProps; 
    autoPlay?: boolean | {interval?: number, hoverToPause?: boolean};
    arrowType?: typeof strings.ARROW_MAP[number];
    children?: ReactNode | Array<ReactNode>;
    className?: string;
    defaultActiveIndex?: number;
    indicatorPosition?: typeof strings.POSITION_MAP[number];
    indicatorSize?: typeof strings.SIZE[number];
    theme?: typeof strings.THEME_MAP[number];
    indicatorType?: typeof strings.TYPE_MAP[number];
    onChange?: (index: number, preIndex: number) => void;
    showArrow?: boolean;
    showIndicator?: boolean;
    slideDirection?: typeof strings.DIRECTION[number];
    speed?: number;
    style?: React.CSSProperties;
    trigger?: typeof strings.TRIGGER[number];
}

export interface CarouselIndicatorProps {
    activeIndex?: number;
    className?: string;
    defaultActiveIndex?: number;
    position?: typeof strings.POSITION_MAP[number];
    size?: typeof strings.SIZE[number];
    total?:number;
    theme?: typeof strings.THEME_MAP[number];
    type?: typeof strings.TYPE_MAP[number];
    onIndicatorChange?: (activeIndex: number) => void;
    style?: React.CSSProperties;
    trigger?: typeof strings.TRIGGER[number];
}

export interface CarouselArrowProps {
    type?: typeof strings.ARROW_MAP[number];
    theme?: typeof strings.THEME_MAP[number];
    prev?: () => void;
    next?: () => void;
    arrowProps?: ArrowProps;
}

export interface ArrowButton {
    props?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
    children?: React.ReactNode;
}
export interface ArrowProps {
    leftArrow?: ArrowButton;
    rightArrow?: ArrowButton;
}