rcx-virtual-list/virtual-list.d.ts

Maximum performance for extremely large lists.<br/> Animation of elements is supported.

import React from 'react';
import { IScrollEvent, IVirtualListCollection, IVirtualListStickyMap, VirtualListItemRenderer } from './models';
import { Direction, SnappingMethod } from './enums';
import { VirtualListItem } from './components';
import { Id } from './types/id';
import { ISize } from './types/size';
export interface IVirtualListProps {
    className?: string;
    /**
     * Determines the direction in which elements are placed. Default value is "vertical".
     */
    direction?: Direction;
    /**
     * If true then the items in the list can have different sizes and the itemSize property is ignored.
     * If false then the items in the list have a fixed size specified by the itemSize property. The default value is false.
     */
    dynamicSize?: boolean;
    /**
     * Experimental!
     * Enables buffer optimization.
     * Can only be used if items in the collection are not added or updated. Otherwise, artifacts in the form of twitching of the scroll area are possible.
     * Works only if the property dynamic = true
     */
    enabledBufferOptimization?: boolean;
    /**
     * Rendering element template.
     */
    itemRenderer: VirtualListItemRenderer;
    /**
     * Collection of list items.
     */
    items: IVirtualListCollection | undefined;
    /**
     * @deprecated "itemOffset" parameter is deprecated. Use "bufferSize" and "maxBufferSize".
     */
    itemsOffset?: number;
    /**
     * Number of elements outside the scope of visibility. Default value is 2.
     */
    bufferSize?: number;
    /**
     * Maximum number of elements outside the scope of visibility. Default value is 100.
     * If maxBufferSize is set to be greater than bufferSize, then adaptive buffer mode is enabled.
     * The greater the scroll size, the more elements are allocated for rendering.
     */
    maxBufferSize?: number;
    /**
     * If direction = 'vertical', then the height of a typical element. If direction = 'horizontal', then the width of a typical element.
     * Ignored if the dynamicSize property is true.
     */
    itemSize?: number;
    /**
     * Determines whether elements will snap. Default value is "true".
     */
    snap?: boolean;
    /**
     * Snapping method.
     * 'default' - Normal group rendering.
     * 'advanced' - The group is rendered on a transparent background. List items below the group are not rendered.
     */
    snappingMethod?: SnappingMethod;
    /**
     * Dictionary zIndex by id of the list element. If the value is not set or equal to 0,
     * then a simple element is displayed, if the value is greater than 0, then the sticky position mode is enabled for the element.
     */
    stickyMap?: IVirtualListStickyMap;
    /**
     * The name of the property by which tracking is performed
     */
    trackBy?: string;
    /**
     * Fires when the list has been scrolled.
     */
    onScroll?: (e: IScrollEvent) => void;
    /**
     * Fires when the list has completed scrolling.
     */
    onScrollEnd?: (e: IScrollEvent) => void;
}
interface IVirtualListState {
    cacheVersion: number;
    displayComponentsList: Array<React.RefObject<VirtualListItem | null>>;
    isVertical: boolean;
    scrollSize: number;
    bounds: ISize | null;
}
/**
 * Virtual list component.
 * Maximum performance for extremely large lists.
 * It is based on algorithms for virtualization of screen objects.
 * @link https://github.com/DjonnyX/rcx-virtual-list/tree/main/src/lib/src/ng-virtual-list.component.ts
 * @author Evgenii Grebennikov
 * @email djonnyx@gmail.com
 */
export declare class VirtualList extends React.Component<IVirtualListProps, IVirtualListState> {
    private static __nextId;
    private _id;
    /**
     * Readonly. Returns the unique identifier of the component.
     */
    get id(): number;
    private _$elementRef;
    private _$containerRef;
    private _$snappedRef;
    private _$listRef;
    private _itemsTransform;
    private _items;
    /**
     * Collection of list items.
     */
    set items(v: IVirtualListCollection | null | undefined);
    get items(): IVirtualListCollection | null | undefined;
    private _snap;
    /**
     * Determines whether elements will snap. Default value is "true".
     */
    set snap(v: boolean);
    get snap(): boolean;
    private _enabledBufferOptimization;
    /**
     * Experimental!
     * Enables buffer optimization.
     * Can only be used if items in the collection are not added or updated. Otherwise, artifacts in the form of twitching of the scroll area are possible.
     * Works only if the property dynamic = true
     */
    set enabledBufferOptimization(v: boolean);
    get enabledBufferOptimization(): boolean;
    private _itemRenderer;
    /**
     * Rendering element template.
     */
    set itemRenderer(v: VirtualListItemRenderer);
    get itemRenderer(): VirtualListItemRenderer;
    private _stickyMap;
    /**
     * Dictionary zIndex by id of the list element. If the value is not set or equal to 0,
     * then a simple element is displayed, if the value is greater than 0, then the sticky position mode is enabled for the element.
     */
    set stickyMap(v: IVirtualListStickyMap);
    get stickyMap(): IVirtualListStickyMap;
    private _itemSizeTransform;
    private _itemSize;
    /**
     * If direction = 'vertical', then the height of a typical element. If direction = 'horizontal', then the width of a typical element.
     * Ignored if the dynamicSize property is true.
     */
    set itemSize(v: number);
    get itemSize(): number;
    private _dynamicSize;
    /**
     * If true then the items in the list can have different sizes and the itemSize property is ignored.
     * If false then the items in the list have a fixed size specified by the itemSize property. The default value is false.
     */
    set dynamicSize(v: boolean);
    get dynamicSize(): boolean;
    private _direction;
    /**
     * Determines the direction in which elements are placed. Default value is "vertical".
     */
    set direction(v: Direction);
    get direction(): Direction;
    private _bufferSize;
    /**
     * Number of elements outside the scope of visibility. Default value is 2.
     */
    set bufferSize(v: number);
    get bufferSize(): number;
    private _maxBufferSize;
    /**
     * Number of elements outside the scope of visibility. Default value is 2.
     */
    set maxBufferSize(v: number);
    get maxBufferSize(): number;
    private _snappingMethod;
    /**
     * Snapping method.
     * 'default' - Normal group rendering.
     * 'advanced' - The group is rendered on a transparent background. List items below the group are not rendered.
     */
    set snappingMethod(v: SnappingMethod);
    get snappingMethod(): SnappingMethod;
    private _trackBy;
    /**
     * The name of the property by which tracking is performed
     */
    set trackBy(v: string);
    get trackBy(): string;
    /**
     * Dictionary of element sizes by their id
     */
    private _trackBox;
    private _className;
    private _onScroll;
    private _onScrollEnd;
    private _displayComponents;
    private _snapedDisplayComponent;
    private _displayComponentsList;
    protected set displayComponentsList(v: Array<React.RefObject<VirtualListItem | null>>);
    private _bounds;
    protected set bounds(v: ISize | null);
    protected get bounds(): ISize | null;
    private _scrollSize;
    protected set scrollSize(v: number);
    protected get scrollSize(): number;
    private _cacheVersion;
    protected set cacheVersion(v: number);
    protected get cacheVersion(): number;
    private _resizeObserver;
    protected _isSnappingMethodAdvanced: boolean;
    protected _isVertical: boolean;
    protected _initialized: boolean;
    private _onTrackBoxChangeHandler;
    private _resizeSnappedComponentHandler;
    private _observeComponentRenderersTimeout;
    private _scrollToRepeatExecutionTimeout;
    private _resizeSnappedObserver;
    private _componentsResizeObserver;
    private _onResizeHandler;
    private _onScrollHandler;
    private _onScrollEndHandler;
    private _onContainerScrollHandler;
    private _onContainerScrollEndHandler;
    constructor(props: IVirtualListProps);
    private _t;
    getSnapshotBeforeUpdate(prevProps: Readonly<IVirtualListProps>, prevState: Readonly<IVirtualListState>): null;
    componentDidUpdate(prevProps: Readonly<IVirtualListProps>, prevState: Readonly<IVirtualListState>, snapshot?: any): void;
    shouldComponentUpdate(nextProps: Readonly<IVirtualListProps>, nextState: Readonly<IVirtualListState>, nextContext: any): boolean;
    private _debouncedInitialize;
    componentDidMount(): void;
    private observeComponentRenderers;
    private initializeComponent;
    protected update(): void;
    private initializeSnappedComponent;
    private listenCacheChangesIfNeed;
    private getIsSnappingMethodAdvanced;
    private getIsVertical;
    /**
     * Returns the bounds of an element with a given id
     */
    getItemBounds(id: Id): ISize | undefined;
    protected scrollToExecutor(id: Id, behavior: ScrollBehavior, iteration?: number, isLastIteration?: boolean): void;
    private resetRenderers;
    private _resizeObserveQueue;
    private executeResizeObserverQueue;
    private waitToResizeObserve;
    private createDisplayComponentsIfNeed;
    /**
     * Tracking by id
     */
    protected tracking(): void;
    private resetBoundsSize;
    /**
     * The method scrolls the list to the element with the given id and returns the value of the scrolled area.
     * Behavior accepts the values ​​"auto", "instant" and "smooth".
     */
    scrollTo(id: Id, behavior?: ScrollBehavior): void;
    /**
     * Scrolls the scroll area to the desired element with the specified ID.
     */
    scrollToEnd(behavior?: ScrollBehavior): void;
    render(): React.ReactNode;
    private disposeScrollToRepeatExecutionTimeout;
    private disposeObserveComponentRenderers;
    componentWillUnmount(): void;
}
export {};