@douyinfe/semi-ui/lib/cjs/carousel/interface.d.ts

A modern, comprehensive, flexible design system and UI library. Connect DesignOps & DevOps. Quickly build beautiful React apps. Maintained by Douyin-fe team.

import React, { ReactNode } from "react";
import { strings } from '@douyinfe/semi-foundation/lib/cjs/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;
}