react-scroll-snap-anime-slider/dist/lib/Slider.d.ts

A simple slider/carousel using css style scroll-snap and Popmotion.

import React, { Component } from 'react';
import { IProps as P } from "./Types";
import { ColdSubscription, ValueReaction, easing } from "popmotion";
import { CarouselContext } from "./CarouselContext";
export interface IProps extends P, React.HTMLAttributes<HTMLDivElement> {
    /**
     * Props to the slider tray
     */
    trayProps?: React.HTMLAttributes<HTMLDivElement>;
}
export interface IState {
}
export declare class Slider extends Component<IProps, IState> {
    context: React.ContextType<typeof CarouselContext>;
    sliderTrayRef: React.RefObject<HTMLDivElement>;
    scrollValue: ValueReaction;
    mouseDownAction: ColdSubscription | undefined;
    mouseUpAction: ColdSubscription | undefined;
    pointerAction: ColdSubscription | undefined;
    inertiaAction: ColdSubscription | undefined;
    snapAction: ColdSubscription | undefined;
    tempCurrentSlide: number;
    sliderDidSlided: boolean;
    constructor(prop: IProps);
    /**
     * On scrolling from any action (touchpad, mouse drag, button)
     * @param evt
     */
    onScroll: (evt: Event) => void;
    /**
     * On using touchpad or mouse wheel to scroll
     * @param evt
     */
    onWheel: (evt: Event) => void;
    /**
     * Use to detect when loosing mousedown focus on slider when hold down a link
     *
     * @param evt
     */
    onTouchstart: (evt: TouchEvent) => void;
    /**
     * When start tracking mouse action
     * @param evt
     */
    startTracking: (evt: MouseEvent) => void;
    /**
     * When stop tracking mouse action
     *
     * @param evt
     * @returns
     */
    stopTracking: (evt: MouseEvent) => void;
    /**
     * Get some current state data of tray element
     * @returns
     */
    getTrayState(): {
        trayElement: HTMLDivElement;
        scrollLeft: number;
        trayWidth: number;
        innerTrayWidth: number;
        trayPaddingX: number;
        slideWidth: number;
        slideCount: number;
        currentSlide: number;
    } | undefined;
    /**
     * Update slide index if necessary
     *
     * @param state
     */
    updateSlideIndex(state?: {
        trayElement: HTMLDivElement;
        scrollLeft: number;
        trayWidth: number;
        innerTrayWidth: number;
        trayPaddingX: number;
        slideWidth: number;
        slideCount: number;
        currentSlide: number;
    } | undefined): void;
    /**
     * Slide to a target slide
     *
     * @param slideIndex From 0 ~ (len-1), this target slide will be the slide on the left side (if visible slide > 1)
     * @param animated Using animation?
    */
    slideTo(slideIndex: number, animated?: boolean): void;
    /**
     * Stop mouse pointer tracking
     */
    stopTrackingActions(): void;
    /**
     * Stop current active anime actions (inertia moving and snap moving)
     *
     * @returns current slide index if there is anime action which is not finished
     */
    stopAnimeActions(): void;
    /**
     * Get a target value instead of X value to avoid overdrage
     *
     * @param x
     * @param max
     * @returns
     */
    applyOverdrag(x: number, max: number): number;
    /**
     * Get max scroll x, y
     *
     * @returns if >0 has a max scroll, if <0 not able to scroll
     */
    getScrollMax(): number;
    /**
     * Get a snap point when the free scrolling is done base on current value and direction
     *
     * @param currentScrollValue
     * @param velocity >0 is scrolling down, <0 is up, =0 unknown
     */
    getSnapScrollValue(currentScrollValue: number, velocity: number): number;
    /**
     * Get easing function
     *
     * @returns default is easeOut
     */
    getEase(): easing.Easing;
    handleOnClickCapture(ev: React.MouseEvent<HTMLDivElement>): void;
    componentDidUpdate(prevProps: Readonly<IProps>, prevState: Readonly<IState>, snapshot?: any): void;
    componentDidMount(): void;
    componentWillUnmount(): void;
    render(): JSX.Element;
}