ukelli-ui/core/carousel/carousel.d.ts

Base on React's UI lib. Make frontend's dev simpler and faster.

import React, { Component } from 'react';
import { Children } from '../utils/props';
interface CarouselItem {
    /** 如果同时设置了 imgUrl 和 element */
    imgUrl?: string;
    /** 优先渲染 element */
    element?: Children;
    action?: (activeItem: any, activeIdx: any) => void;
}
interface CarouselProps {
    /** 轮播的具体内容，格式如下 */
    carouselItems: CarouselItem[];
    /** 可设置的 style */
    style?: React.CSSProperties;
    /** 预留的操作 class */
    actionClass?: string;
    /** 动画的 css name，可以自由设置 */
    transitionName?: string;
    /** 是否移动版，如果是，则渲染左右切换按钮 */
    isMobile?: boolean;
    /** 自动轮播的频率，单位为秒 */
    freq?: number;
    /** 过场动画的持续时间 */
    transitionTimer?: number;
    /** 指示器的类型， 兼容旧版本，将要废弃 */
    thumbType?: 'thumb' | 'dot';
    /** 指示器的类型 */
    indicator?: 'thumb' | 'dot';
    /** 缩略图和大图的缩小比例 */
    thumbRate: number;
}
/**
 * 轮播控件
 *
 * @export
 * @class Carousel
 * @extends {Component}
 */
export default class Carousel extends Component<CarouselProps, {
    activeIdx: number;
    toNext: boolean;
    activeItem: CarouselItem;
}> {
    static defaultProps: {
        actionClass: string;
        transitionName: string;
        thumbType: string;
        indicator: string;
        style: {
            width: string;
            height: number;
        };
        transitionTimer: number;
        freq: number;
        thumbRate: number;
        isMobile: boolean;
    };
    timer: any;
    isStarted: boolean;
    itemWidth: number | string;
    startPageX: number;
    endPageX: number;
    mobileEvents: {
        onMouseDown: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
        onMouseUp: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
        onTouchStart: (event: React.TouchEvent<HTMLDivElement>) => void;
        onTouchEnd: (event: React.TouchEvent<HTMLDivElement>) => void;
    };
    constructor(props: any);
    componentDidUpdate(prevProps: any): void;
    componentDidMount(): void;
    componentWillUnmount(): void;
    startLoop(): void;
    stopLoop(): void;
    setActiveIdx(idx: any): void;
    genCarouselDOM(currItem: any, idx: any, imgStyle?: any): JSX.Element;
    handleTouchStart: (e: any) => void;
    handleTouchEnd: (e: any) => void;
    showDetail(activeIdx: any): void;
    getThumb(): false | JSX.Element;
    render(): JSX.Element;
}
export {};