@rx-angular/template
Version:
**Fully** Reactive Component Template Rendering in Angular. @rx-angular/template aims to be a reflection of Angular's built in renderings just reactive.
249 lines (248 loc) • 9.54 kB
TypeScript
import { NgIterable, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
import { Observable } from 'rxjs';
import { ListRange, RxVirtualScrollStrategy, RxVirtualScrollViewport, RxVirtualViewRepeater } from '../model';
import * as i0 from "@angular/core";
/**
* @Directive AutosizeVirtualScrollStrategy
*
* @description
*
* The `AutosizeVirtualScrollStrategy` provides a twitter-like virtual-scrolling
* experience. It is able to render and position items based on their individual
* size. It is comparable to \@angular/cdk/experimental `AutosizeVirtualScrollStrategy`, but
* with a high performant layouting technique and more features.
*
* On top of this the `AutosizeVirtualScrollStrategy` is leveraging the native
* `ResizeObserver` in order to detect size changes for each individual view
* rendered to the DOM and properly re-position accordingly.
*
* In order to provide top-notch runtime performance the `AutosizeVirtualScrollStrategy`
* builds up caches that prevent DOM interactions whenever possible. Once a view
* was visited, its properties will be stored instead of re-read from the DOM again as
* this can potentially lead to unwanted forced reflows.
*
* @docsCategory RxVirtualFor
* @docsPage RxVirtualFor
* @publicApi
*/
export declare class AutoSizeVirtualScrollStrategy<T, U extends NgIterable<T> = NgIterable<T>> extends RxVirtualScrollStrategy<T, U> implements OnChanges, OnDestroy {
private readonly defaults?;
/**
* @description
* The amount of items to render upfront in scroll direction
*/
runwayItems: number;
/**
* @description
* The amount of items to render upfront in reverse scroll direction
*/
runwayItemsOpposite: number;
/**
* @description
* The default size of the items being rendered. The autosized strategy will assume
* this size for items it doesn't know yet. For the smoothest experience,
* you provide the mean size of all items being rendered - if possible of course.
*
* As soon as rxVirtualFor is able to also render actual tombstone items, this
* will be the size of a tombstone item being rendered before the actual item
* is inserted into its position.
*/
tombstoneSize: number;
/**
* @description
* The autosized strategy uses the native ResizeObserver in order to determine
* if an item changed in size to afterwards properly position the views.
* You can customize the config passed to the ResizeObserver as well as determine
* which result property to use when determining the views size.
*/
resizeObserverConfig?: {
options?: ResizeObserverOptions;
extractSize?: (entry: ResizeObserverEntry) => number;
};
/**
* @description
* When enabled, the autosized scroll strategy attaches a `ResizeObserver`
* to every view within the given renderedRange. If your views receive
* dimension changes that are not caused by list updates, this is a way to
* still track height changes. This also applies to resize events of the whole
* document.
*/
withResizeObserver: boolean;
/**
* @description
* When enabled, the scroll strategy stops removing views from the viewport,
* instead it only adds views. This setting can be changed on the fly. Views will be added in both directions
* according to the user interactions.
*/
appendOnly: boolean;
/**
* @description
* When enabled, the autosized scroll strategy removes css styles that
* prevent the scrollbar from being in sync with the input device.
* Use with caution, as this can lead to extremely weird scroll behavior
* on chromium based browsers when the rendered views differ
* in dimensions too much or change dimensions heavily.
*/
withSyncScrollbar: boolean;
/**
* @description
* If this flag is true, the virtual scroll strategy maintains the scrolled item when new data
* is prepended to the list. This is very useful when implementing a reversed infinite scroller, that prepends
* data instead of appending it
*/
keepScrolledIndexOnPrepend: boolean;
/** @internal */
private viewport;
/** @internal */
private viewRepeater;
/** @internal */
private readonly _contentSize$;
/** @internal */
readonly contentSize$: Observable<number>;
/** @internal */
private _contentSize;
/** @internal */
private set contentSize(value);
private get contentSize();
/** @internal */
private readonly _renderedRange$;
/** @internal */
readonly renderedRange$: Observable<ListRange>;
/** @internal */
private _renderedRange;
/** @internal */
private set renderedRange(value);
/** @internal */
private get renderedRange();
/** @internal */
private positionedRange;
/** @internal */
private readonly _scrolledIndex$;
/** @internal */
readonly scrolledIndex$: Observable<number>;
/**
* @internal
* The action used to kick off the scroll process
*/
private scrollToTrigger$;
/** @internal */
private _scrolledIndex;
/** @internal */
private get scrolledIndex();
/** @internal */
private set scrolledIndex(value);
/**
* is set, when scrollToIndex is called
* @internal
* */
private _scrollToIndex;
/** @internal */
private containerSize;
/** @internal */
private contentLength;
/** @internal */
private _virtualItems;
/** @internal */
private scrollTop;
/** @internal */
private scrollTopWithOutOffset;
/** @internal */
private scrollTopAfterOffset;
/** @internal */
private viewportOffset;
/** @internal */
private direction;
/** @internal */
private anchorScrollTop;
/** @internal */
private anchorItem;
/** @internal */
private lastScreenItem;
/** @internal */
private waitForScroll;
/** @internal */
private isStable$;
/** @internal */
private readonly detached$;
/** @internal */
private resizeObserver;
/** @internal */
private readonly recalculateRange$;
/** @internal */
private until$;
/** @internal */
private get extractSize();
/** @internal */
get isStable(): Observable<boolean>;
/** @internal */
ngOnChanges(changes: SimpleChanges): void;
/** @internal */
ngOnDestroy(): void;
/** @internal */
attach(viewport: RxVirtualScrollViewport, viewRepeater: RxVirtualViewRepeater<T, U>): void;
/** @internal */
detach(): void;
scrollToIndex(index: number, behavior?: ScrollBehavior): void;
private scrollTo;
/**
* starts the subscriptions that maintain the virtualItems array on changes
* to the underlying dataset
* @internal
*/
private maintainVirtualItems;
/**
* listen to triggers that should change the renderedRange
* @internal
*/
private calcRenderedRange;
/**
* position elements after they are created/updated/moved or their dimensions
* change from other sources
* @internal
*/
private positionElements;
/** listen to API initiated scroll triggers (e.g. initialScrollIndex) */
private listenToScrollTrigger;
/** @internal */
private adjustContentSize;
/** @internal */
private observeViewSize$;
/**
* @internal
* heavily inspired by
* https://github.com/GoogleChromeLabs/ui-element-samples/blob/gh-pages/infinite-scroller/scripts/infinite-scroll.js
*/
private calculateAnchoredItem;
/** @internal */
private positionUnchangedViews;
/**
* Adjust the scroll position when the anchorScrollTop differs from
* the actual scrollTop.
* Trigger a range recalculation if there is empty space
*
* @internal
*/
private maybeAdjustScrollPosition;
/** @internal */
private calcAnchorScrollTop;
/** @internal */
private calcInitialPosition;
/** @internal */
private getViewRef;
/** @internal */
private updateElementSize;
/** @internal */
private getItemSize;
/** @internal */
private getElementSize;
/** @internal */
private positionElement;
/** @internal */
private updateScrollElementClass;
static ɵfac: i0.ɵɵFactoryDeclaration<AutoSizeVirtualScrollStrategy<any, any>, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<AutoSizeVirtualScrollStrategy<any, any>, "rx-virtual-scroll-viewport[autosize]", never, { "runwayItems": { "alias": "runwayItems"; "required": false; }; "runwayItemsOpposite": { "alias": "runwayItemsOpposite"; "required": false; }; "tombstoneSize": { "alias": "tombstoneSize"; "required": false; }; "resizeObserverConfig": { "alias": "resizeObserverConfig"; "required": false; }; "withResizeObserver": { "alias": "withResizeObserver"; "required": false; }; "appendOnly": { "alias": "appendOnly"; "required": false; }; "withSyncScrollbar": { "alias": "withSyncScrollbar"; "required": false; }; "keepScrolledIndexOnPrepend": { "alias": "keepScrolledIndexOnPrepend"; "required": false; }; }, {}, never, never, true, never>;
static ngAcceptInputType_withResizeObserver: null | boolean | string | undefined;
static ngAcceptInputType_appendOnly: null | boolean | string | undefined;
static ngAcceptInputType_withSyncScrollbar: null | boolean | string | undefined;
static ngAcceptInputType_keepScrolledIndexOnPrepend: null | boolean | string | undefined;
}