react-simple-horizontal-scroller/lib/components/HorizontalScrollContainer/HorizontalScrollContainer.d.ts

A wrapper for horizontally scorlling items, like tabs, that will manage adding and removing scroll controls

import * as React from 'react';
import './HorizontalScrollContainer.css';
interface MovementControls {
    /**
     * Set the default icon class and style, gets preseverd when defaultArrow is sent to customCompoent.
     * To change icon color set ```borderColor```
     */
    defaultIconClassName?: string;
    defaultIconStyle?: React.CSSProperties;
    /**
     * Set default container class and style, gets preseverd when defaultArrow is sent to customCompoent.
     */
    defaultIconContainerClassName?: string;
    defaultIconContainerStyle?: React.CSSProperties;
    /**
     * To override the default arrow movement control,
     * provide a component that calls scrollStep() onClick.
     * The defeaultArrow is provided for convience and can be rendered without calling scrollStep.
     */
    customComponent?: (scrollStep: () => void, defaultArrow: React.ReactChild) => React.ReactChild | undefined | null;
    /**
     * Defaults to AUTO.
     * AUTO: only display when needed according to isScroll
     * ALWAYS: Always on
     * NONE: do not show (This is useful for touch screens where one might not need the controls)
     */
    visibility?: 'AUTO' | 'ALWAYS' | 'NONE';
}
export interface ControlsConfig {
    /**
     * Defaults to: SEPERATED
     * Will display according to this
     * SEPERATED: <- {children} ->
     * BEFORE_CHILD: <- -> {children}
     * AFTER_CHILD: {children} <- ->
     */
    position?: 'BEFORE_CHILD' | 'AFTER_CHILD' | 'SEPARATED';
    /**
     * Right scroll button behaviour
     */
    right?: MovementControls;
    /**
     * Left scroll button behaviour
     */
    left?: MovementControls;
}
export interface HorizontalScrollContainerProps {
    /**
     * Configure controls position, looks and behaviour
     */
    controlsConfig?: ControlsConfig;
    /**
     *  Internal listener is good for when only the window can resize.
     *  In case more elements can be resized the component must be rerendered.
     *  This is not meant to be changed while the component is alive
     */
    useExternalResizeListener?: boolean;
    /**
     * Will prevent conversion of mousewheel vertical scroll to horizontal
     */
    removeMouseWheelOverride?: boolean;
    /**
     * Id of a <HorizontalScrollItem> that is selected
     */
    selectedItemId?: string;
    /**
     * Always fires onMount.
     * Returns if the container is overflowing.
     */
    onScrollStateChange?: (isScrollable: boolean) => void;
    /**
     * Gets called at set intervals AFTER a scroll has ended
     */
    onScrollEnd?: (reachedEnd: 'LEFT' | 'RIGHT' | null) => void;
    /**
     * Gets called whenever a scorll starts
     */
    onScrollStart?: () => void;
    /**
     * Overrides default behaviour: Math.max(scrollAbleElementWidth / 2, 208)
     * A function that returns an abs number to scroll by e.g:
     * (scrollAbleElementWidth) => Math.max(window.getWidth() / 2, scrollAbleElementWidth / 10);
     */
    customScrollBy?: (scrollAbleElementWidth: number) => number;
    /**
     * How to position children in the container if it is not yet scrollable.
     * defaults to: 'start'
     */
    childPosition?: 'start' | 'end' | 'center' | 'space-between' | 'space-around' | 'space-evenely';
    /**
     * Add a debounce to the resize listener.
     * This is helpful when window resizing is already a heavy opertaion.
     * Should be left undefined in most cases.
     */
    resizeListenerDebounce?: number;
}
export interface HorizontalScrollContainerState {
    shaking: 'RIGHT' | 'LEFT' | null;
    isScrollable: boolean;
}
export declare class HorizontalScrollContainer extends React.Component<HorizontalScrollContainerProps, HorizontalScrollContainerState> {
    private readonly SCROLL_TIMEOUT_INTO_VIEW;
    private readonly SCROLL_TIMEOUT_WHEEL;
    private readonly SCROLL_TIMEOUT_ARROWS;
    private readonly scrollableContainer;
    private readonly selectedItem;
    private wasScrollable;
    private scrollTimeoutId;
    private resizeTimeoutId;
    private scrollTimeoutTimer;
    private isScrolling;
    private lastSelectedItemId?;
    constructor(props: HorizontalScrollContainerProps);
    componentDidMount(): void;
    componentWillUnmount(): void;
    componentDidUpdate(): void;
    render(): JSX.Element;
    getMovementControls(position: 'BEFORE_CHILD' | 'AFTER_CHILD'): string | number | JSX.Element | null | undefined;
    renderControls(position: 'BEFORE_CHILD' | 'AFTER_CHILD'): JSX.Element | null;
    private scrollIntoViewIfNeeded;
    private handleWheel;
    private handleScrollEnd;
    private getPositionAfterScrollEnd;
    private scrollStart;
    private handleScroll;
    private renderMovementControl;
    private renderChildren;
    private getChildren;
    private isControlVisible;
    private isMovementControlsVisible;
    private resize;
    private resizeWithDebounce;
    private resizeListener;
    private handleScrollStateChange;
    private getChildrenContainerClass;
    private canScrollToSide;
    private getScrollBy;
    private scrollStep;
}
export {};