import React from 'react';
import SliderBar, { IProps as P, IState as S } from "./SliderBar";
export interface IRenderDotsProps {
    /**
     * Total slides in this slider
     */
    totalSlides: number;
    /**
     * Current slide index (from 0)
     *
     */
    currentSlide: number;
    /**
     * How many visible slides (N), slide width = 100% / N
     */
    visibleSlides: number;
    /**
     * How mange slides per step (when click previous and next button)
     */
    step: number;
    /**
     * How far has scrolled in %, range in [0 ~ (100 - % of visible slides)]
     */
    left: number;
    /**
     * A function to call to slide to a target slide [from 0 ~ (length - visible slide - 1)]
     * @param slideIndex
     * @returns
     */
    slideTo: (slideIndex: number) => void;
}
export interface IProps extends P {
    dotGroupProps?: React.HTMLAttributes<HTMLDivElement>;
    /**
     * To customize the dot group rendering by using the state props passed in
     *
     * @returns
     */
    renderDots?: (props: IRenderDotsProps) => JSX.Element | JSX.Element[];
}
export interface IState extends S {
}
export declare class SliderBarDotGroup extends SliderBar<IProps, IState> {
    theDot(key: number, active: boolean, onClick: () => void): JSX.Element;
    /**
     * Simple dot rendering, add "active" ClassName to those active dots
     *
     * @param props
     * @returns
     */
    renderDots(props: IRenderDotsProps): JSX.Element[];
    render(): JSX.Element;
}