123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947 |
- import { ComponentPropsWithRef } from 'react';
- import { ComponentType } from 'react';
- import { Key } from 'react';
- import { default as React_2 } from 'react';
- import * as React_3 from 'react';
- import { ReactElement } from 'react';
- import { ReactNode } from 'react';
- import { Ref } from 'react';
- /**
- * Customize the Virtuoso rendering by passing a set of custom components.
- */
- export declare interface Components<Context = unknown> {
- /**
- * Set to render a component at the top of the list.
- *
- * The header remains above the top items and does not remain sticky.
- */
- Header?: ComponentType<{
- context?: Context;
- }>;
- /**
- * Set to render a component at the bottom of the list.
- */
- Footer?: ComponentType<{
- context?: Context;
- }>;
- /**
- * Set to customize the item wrapping element. Use only if you would like to render list from elements different than a `div`.
- */
- Item?: ComponentType<ItemProps & {
- context?: Context;
- }>;
- /**
- * Set to customize the group item wrapping element. Use only if you would like to render list from elements different than a `div`.
- */
- Group?: ComponentType<GroupProps & {
- context?: Context;
- }>;
- /**
- * Set to customize the top list item wrapping element. Use if you would like to render list from elements different than a `div`
- * or you want to set a custom z-index for the sticky position.
- */
- TopItemList?: ComponentType<TopItemListProps & {
- context?: Context;
- }>;
- /**
- * Set to customize the outermost scrollable element. This should not be necessary in general,
- * as the component passes its HTML attribute props to it.
- */
- Scroller?: ComponentType<ScrollerProps & {
- context?: Context;
- }>;
- /**
- * Set to customize the items wrapper. Use only if you would like to render list from elements different than a `div`.
- */
- List?: ComponentType<ListProps & {
- context?: Context;
- }>;
- /**
- * Set to render a custom UI when the list is empty.
- */
- EmptyPlaceholder?: ComponentType<{
- context?: Context;
- }>;
- /**
- * Set to render an item placeholder when the user scrolls fast. See the `scrollSeek` property for more details.
- */
- ScrollSeekPlaceholder?: ComponentType<ScrollSeekPlaceholderProps & {
- context?: Context;
- }>;
- }
- export declare interface ComputeItemKey<D, C> {
- (index: number, item: D, context: C): Key;
- }
- /**
- * Passed to the Components.FillerRow custom component
- */
- export declare interface FillerRowProps {
- height: number;
- }
- export declare type FixedFooterContent = (() => React_2.ReactNode) | null;
- export declare type FixedHeaderContent = (() => React_2.ReactNode) | null;
- export declare interface FlatIndexLocationWithAlign extends LocationOptions {
- /**
- * The index of the item to scroll to.
- */
- index: number | 'LAST';
- }
- export declare interface FlatScrollIntoViewLocation extends ScrollIntoViewLocationOptions {
- index: number;
- }
- export declare type FollowOutput = FollowOutputCallback | FollowOutputScalarType;
- export declare type FollowOutputCallback = (isAtBottom: boolean) => FollowOutputScalarType;
- export declare type FollowOutputScalarType = boolean | 'smooth' | 'auto';
- export declare interface GridComponents<Context = any> {
- /**
- * Set to customize the item wrapping element. Use only if you would like to render list from elements different than a `div`.
- */
- Item?: ComponentType<GridItem & {
- context?: Context;
- }>;
- /**
- * Set to customize the outermost scrollable element. This should not be necessary in general,
- * as the component passes its HTML attribute props to it.
- */
- Scroller?: ComponentType<ScrollerProps & {
- context?: Context;
- }>;
- /**
- * Set to customize the items wrapper. Use only if you would like to render list from elements different than a `div`.
- */
- List?: ComponentType<GridListProps & {
- context?: Context;
- }>;
- /**
- * Set to render an item placeholder when the user scrolls fast.
- * See the `scrollSeekConfiguration` property for more details.
- */
- ScrollSeekPlaceholder?: ComponentType<GridScrollSeekPlaceholderProps & {
- context?: Context;
- }>;
- }
- export declare interface GridComputeItemKey {
- (index: number): Key;
- }
- export declare interface GridItem {
- 'data-index': number;
- className?: string;
- }
- export declare interface GridItemContent<C> {
- (index: number, context: C): ReactNode;
- }
- /**
- * Passed to the Components.List custom component
- */
- export declare type GridListProps = Pick<ComponentPropsWithRef<'div'>, 'style' | 'children' | 'ref' | 'className'>;
- export declare type GridRootProps = Omit<React_2.HTMLProps<'div'>, 'ref' | 'data'>;
- /**
- * Passed to the GridComponents.ScrollSeekPlaceholder custom component
- */
- export declare interface GridScrollSeekPlaceholderProps {
- index: number;
- height: number;
- width: number;
- }
- export declare interface GroupContent {
- (index: number): ReactNode;
- }
- export declare interface GroupedScrollIntoViewLocation extends ScrollIntoViewLocationOptions {
- groupIndex: number;
- }
- export declare const GroupedVirtuoso: <ItemData = any, Context = any>(props: GroupedVirtuosoProps<ItemData, Context> & {
- ref?: Ref<GroupedVirtuosoHandle> | undefined;
- }) => ReactElement;
- export declare interface GroupedVirtuosoHandle {
- scrollToIndex(location: number | IndexLocationWithAlign): void;
- scrollIntoView(location: number | ScrollIntoViewLocation): void;
- scrollTo(location: ScrollToOptions): void;
- scrollBy(location: ScrollToOptions): void;
- autoscrollToBottom(): void;
- }
- export declare interface GroupedVirtuosoProps<D, C> extends Omit<VirtuosoProps<D, C>, 'totalCount' | 'itemContent'> {
- /**
- * Specifies the amount of items in each group (and, actually, how many groups are there).
- * For example, passing [20, 30] will display 2 groups with 20 and 30 items each.
- */
- groupCounts?: number[];
- /**
- * Specifies how each each group header gets rendered. The callback receives the zero-based index of the group.
- */
- groupContent?: GroupContent;
- /**
- * Specifies how each each item gets rendered.
- */
- itemContent?: GroupItemContent<D, C>;
- }
- export declare interface GroupIndexLocationWithAlign extends LocationOptions {
- /**
- * The group index of the item to scroll to.
- */
- groupIndex: number;
- }
- export declare interface GroupItem<D> extends Item<D> {
- type: 'group';
- originalIndex?: number;
- }
- export declare interface GroupItemContent<D, C> {
- (index: number, groupIndex: number, data: D, context: C): ReactNode;
- }
- export declare type GroupProps = Pick<ComponentPropsWithRef<'div'>, 'style' | 'children'> & {
- 'data-index': number;
- 'data-item-index': number;
- 'data-known-size': number;
- };
- export declare type IndexLocationWithAlign = FlatIndexLocationWithAlign | GroupIndexLocationWithAlign;
- export declare interface Item<D> {
- index: number;
- offset: number;
- size: number;
- data?: D;
- }
- export declare interface ItemContent<D, C> {
- (index: number, data: D, context: C): ReactNode;
- }
- export declare type ItemProps = Pick<ComponentPropsWithRef<'div'>, 'style' | 'children'> & {
- 'data-index': number;
- 'data-item-index': number;
- 'data-item-group-index'?: number;
- 'data-known-size': number;
- };
- export declare type ListItem<D> = RecordItem<D> | GroupItem<D>;
- /**
- * Passed to the Components.List custom component
- */
- export declare type ListProps = Pick<ComponentPropsWithRef<'div'>, 'style' | 'children' | 'ref'> & {
- 'data-test-id': string;
- };
- export declare interface ListRange {
- startIndex: number;
- endIndex: number;
- }
- export declare type ListRootProps = Omit<React_2.HTMLProps<'div'>, 'ref' | 'data'>;
- export declare interface LocationOptions {
- /**
- * How to position the item in the viewport.
- */
- align?: 'start' | 'center' | 'end';
- /**
- * Set 'smooth' to have an animated transition to the specified location.
- */
- behavior?: 'smooth' | 'auto';
- /**
- * The offset to scroll.
- */
- offset?: number;
- }
- export declare enum LogLevel {
- DEBUG = 0,
- INFO = 1,
- WARN = 2,
- ERROR = 3
- }
- export declare interface RecordItem<D> extends Item<D> {
- type?: undefined;
- groupIndex?: number;
- originalIndex?: number;
- data?: D;
- }
- export declare interface ScrollContainerState {
- scrollHeight: number;
- scrollTop: number;
- viewportHeight: number;
- }
- /**
- * Passed to the Components.Scroller custom component
- */
- export declare type ScrollerProps = Pick<ComponentPropsWithRef<'div'>, 'style' | 'children' | 'tabIndex' | 'ref'> & {
- 'data-test-id'?: string;
- 'data-virtuoso-scroller'?: boolean;
- };
- export declare type ScrollIntoViewLocation = FlatScrollIntoViewLocation | GroupedScrollIntoViewLocation;
- export declare interface ScrollIntoViewLocationOptions {
- align?: 'start' | 'center' | 'end';
- behavior?: 'auto' | 'smooth';
- done?: () => void;
- }
- export declare interface ScrollSeekConfiguration {
- /**
- * Callback to determine if the list should enter "scroll seek" mode.
- */
- enter: ScrollSeekToggle;
- /**
- * called during scrolling in scroll seek mode - use to display a hint where the list is.
- */
- change?: (velocity: number, range: ListRange) => void;
- /**
- * Callback to determine if the list should enter "scroll seek" mode.
- */
- exit: ScrollSeekToggle;
- }
- /**
- * Passed to the Components.ScrollSeekPlaceholder custom component
- */
- export declare interface ScrollSeekPlaceholderProps {
- index: number;
- height: number;
- groupIndex?: number;
- type: 'group' | 'item';
- }
- export declare interface ScrollSeekToggle {
- (velocity: number, range: ListRange): boolean;
- }
- /** Calculates the height of `el`, which will be the `Item` element in the DOM. */
- export declare type SizeFunction = (el: HTMLElement, field: 'offsetHeight' | 'offsetWidth') => number;
- /**
- * Passed to the Components.TableBody custom component
- */
- export declare type TableBodyProps = Pick<ComponentPropsWithRef<'tbody'>, 'style' | 'children' | 'ref' | 'className'> & {
- 'data-test-id': string;
- };
- /**
- * Customize the TableVirtuoso rendering by passing a set of custom components.
- */
- export declare interface TableComponents<Context = unknown> {
- /**
- * Set to customize the wrapping `table` element.
- *
- */
- Table?: ComponentType<TableProps & {
- context?: Context;
- }>;
- /**
- * Set to render a fixed header at the top of the table (`thead`). use [[fixedHeaderHeight]] to set the contents
- *
- */
- TableHead?: ComponentType<Pick<ComponentPropsWithRef<'thead'>, 'style' | 'ref'> & {
- context?: Context;
- }>;
- /**
- * Set to render a fixed footer at the bottom of the table (`tfoot`). use [[fixedFooterContent]] to set the contents
- */
- TableFoot?: ComponentType<Pick<ComponentPropsWithRef<'tfoot'>, 'style' | 'ref'> & {
- context?: Context;
- }>;
- /**
- * Set to customize the item wrapping element. Default is `tr`.
- */
- TableRow?: ComponentType<ItemProps & {
- context?: Context;
- }>;
- /**
- * Set to customize the outermost scrollable element. This should not be necessary in general,
- * as the component passes its HTML attribute props to it.
- */
- Scroller?: ComponentType<ScrollerProps & {
- context?: Context;
- }>;
- /**
- * Set to customize the items wrapper. Default is `tbody`.
- */
- TableBody?: ComponentType<TableBodyProps & {
- context?: Context;
- }>;
- /**
- * Set to render a custom UI when the list is empty.
- */
- EmptyPlaceholder?: ComponentType<{
- context?: Context;
- }>;
- /**
- * Set to render an item placeholder when the user scrolls fast. See the `scrollSeek` property for more details.
- */
- ScrollSeekPlaceholder?: ComponentType<ScrollSeekPlaceholderProps & {
- context?: Context;
- }>;
- /**
- * Set to render an empty item placeholder.
- */
- FillerRow?: ComponentType<FillerRowProps & {
- context?: Context;
- }>;
- }
- export declare type TableProps = Pick<ComponentPropsWithRef<'table'>, 'style' | 'children'>;
- export declare type TableRootProps = Omit<React_2.HTMLProps<'table'>, 'ref' | 'data'>;
- export declare const TableVirtuoso: <ItemData = any, Context = any>(props: TableVirtuosoProps<ItemData, Context> & {
- ref?: Ref<TableVirtuosoHandle> | undefined;
- }) => ReactElement;
- export declare interface TableVirtuosoHandle {
- scrollIntoView(location: number | FlatScrollIntoViewLocation): void;
- scrollToIndex(location: number | FlatIndexLocationWithAlign): void;
- scrollTo(location: ScrollToOptions): void;
- scrollBy(location: ScrollToOptions): void;
- }
- export declare interface TableVirtuosoProps<D, C> extends Omit<VirtuosoProps<D, C>, 'components' | 'headerFooterTag' | 'topItemCount'> {
- /**
- * Use the `components` property for advanced customization of the elements rendered by the table.
- */
- components?: TableComponents<C>;
- /**
- * Set the contents of the table header.
- */
- fixedHeaderContent?: FixedHeaderContent;
- /**
- * Set the contents of the table footer.
- */
- fixedFooterContent?: FixedFooterContent;
- /**
- * The total amount of items to be rendered.
- */
- totalCount?: number;
- /**
- * The data items to be rendered. If data is set, the total count will be inferred from the length of the array.
- */
- data?: readonly D[];
- /**
- * Set the overscan property to make the component "chunk" the rendering of new items on scroll.
- * The property causes the component to render more items than the necessary, but reduces the re-renders on scroll.
- * Setting `{ main: number, reverse: number }` lets you extend the list in both the main and the reverse scrollable directions.
- * See the `increaseViewportBy` property for a similar behavior (equivalent to the `overscan` in `react-window`).
- */
- overscan?: number | {
- main: number;
- reverse: number;
- };
- /**
- * Set the increaseViewportBy property to artificially increase the viewport size, causing items to be rendered before outside of the viewport.
- * The property causes the component to render more items than the necessary, but can help with slow loading content.
- * Using `{ top?: number, bottom?: number }` lets you set the increase for each end separately.
- */
- increaseViewportBy?: number | {
- top: number;
- bottom: number;
- };
- /**
- * Set to a value between 0 and totalCount - 1 to make the list start scrolled to that item.
- */
- initialTopMostItemIndex?: number;
- /**
- * Set this value to offset the initial location of the list.
- * Warning: using this property will still run a render cycle at the scrollTop: 0 list window.
- * If possible, avoid using it and stick to `initialTopMostItemIndex` instead.
- */
- initialScrollTop?: number;
- /**
- * Use for server-side rendering - if set, the list will render the specified amount of items
- * regardless of the container / item size.
- */
- initialItemCount?: number;
- /**
- * Set the callback to specify the contents of the item.
- */
- itemContent?: ItemContent<D, C>;
- /**
- * If specified, the component will use the function to generate the `key` property for each list item.
- */
- computeItemKey?: ComputeItemKey<D, C>;
- /**
- * By default, the component assumes the default item height from the first rendered item (rendering it as a "probe").
- *
- * If the first item turns out to be an outlier (very short or tall), the rest of the rendering will be slower,
- * as multiple passes of rendering should happen for the list to fill the viewport.
- *
- * Setting `defaultItemHeight` causes the component to skip the "probe" rendering and use the property
- * value as default height instead.
- */
- defaultItemHeight?: number;
- /**
- * Allows customizing the height/width calculation of `Item` elements.
- *
- * The default implementation reads `el.getBoundingClientRect().height` and `el.getBoundingClientRect().width`.
- */
- itemSize?: SizeFunction;
- /**
- * Can be used to improve performance if the rendered items are of known size.
- * Setting it causes the component to skip item measurements.
- */
- fixedItemHeight?: number;
- /**
- * Use to display placeholders if the user scrolls fast through the list.
- *
- * Set `components.ScrollSeekPlaceholder` to change the placeholder content.
- */
- scrollSeekConfiguration?: ScrollSeekConfiguration | false;
- /**
- * If set to `true`, the list automatically scrolls to bottom if the total count is changed.
- * Set to `"smooth"` for an animated scrolling.
- *
- * By default, `followOutput` scrolls down only if the list is already at the bottom.
- * To implement an arbitrary logic behind that, pass a function:
- *
- * ```tsx
- * <Virtuoso
- * followOutput={(isAtBottom: boolean) => {
- * if (expression) {
- * return 'smooth' // can be 'auto' or false to avoid scrolling
- * } else {
- * return false
- * }
- * }} />
- * ```
- */
- followOutput?: FollowOutput;
- /**
- * Use when implementing inverse infinite scrolling - decrease the value this property
- * in combination with `data` or `totalCount` to prepend items to the top of the list.
- *
- * Warning: the firstItemIndex should **be a positive number**, based on the total amount of items to be displayed.
- */
- firstItemIndex?: number;
- /**
- * Called when the list starts/stops scrolling.
- */
- isScrolling?: (isScrolling: boolean) => void;
- /**
- * Gets called when the user scrolls to the end of the list.
- * Receives the last item index as an argument. Can be used to implement endless scrolling.
- */
- endReached?: (index: number) => void;
- /**
- * Called when the user scrolls to the start of the list.
- */
- startReached?: (index: number) => void;
- /**
- * Called with the new set of items each time the list items are rendered due to scrolling.
- */
- rangeChanged?: (range: ListRange) => void;
- /**
- * Called with true / false when the list has reached the bottom / gets scrolled up.
- * Can be used to load newer items, like `tail -f`.
- */
- atBottomStateChange?: (atBottom: boolean) => void;
- /**
- * Called with `true` / `false` when the list has reached the top / gets scrolled down.
- */
- atTopStateChange?: (atTop: boolean) => void;
- /**
- * Called when the total list height is changed due to new items or viewport resize.
- */
- totalListHeightChanged?: (height: number) => void;
- /**
- * Called with the new set of items each time the list items are rendered due to scrolling.
- */
- itemsRendered?: (items: ListItem<D>[]) => void;
- /**
- * Setting `alignToBottom` to `true` aligns the items to the bottom of the list if the list is shorter than the viewport.
- * Use `followOutput` property to keep the list aligned when new items are appended.
- */
- alignToBottom?: boolean;
- /**
- * Uses the document scroller rather than wrapping the list in its own.
- */
- useWindowScroll?: boolean;
- /**
- * Pass a reference to a scrollable parent element, so that the table won't wrap in its own.
- */
- customScrollParent?: HTMLElement;
- /**
- * Provides access to the root DOM element
- */
- scrollerRef?: (ref: HTMLElement | Window | null) => any;
- /**
- * By default `0`. Redefine to change how much away from the top the scroller can be before the list is not considered not at top.
- */
- atTopThreshold?: number;
- /**
- * By default `4`. Redefine to change how much away from the bottom the scroller can be before the list is not considered not at bottom.
- */
- atBottomThreshold?: number;
- /**
- * No longer necessary after 2.10.2. component should work out of the box.
- */
- react18ConcurrentRendering?: boolean;
- }
- export declare type TopItemListProps = Pick<ComponentPropsWithRef<'div'>, 'style' | 'children'>;
- export declare const Virtuoso: <ItemData = any, Context = any>(props: VirtuosoProps<ItemData, Context> & {
- ref?: Ref<VirtuosoHandle> | undefined;
- }) => ReactElement;
- export declare const VirtuosoGrid: <Context = any>(props: VirtuosoGridProps<Context> & {
- ref?: Ref<VirtuosoGridHandle> | undefined;
- }) => ReactElement;
- export declare interface VirtuosoGridHandle {
- scrollToIndex(location: number | IndexLocationWithAlign): void;
- scrollTo(location: ScrollToOptions): void;
- scrollBy(location: ScrollToOptions): void;
- }
- export declare interface VirtuosoGridProps<C = unknown> extends GridRootProps {
- /**
- * The total amount of items to be rendered.
- */
- totalCount: number;
- /**
- * Use for server-side rendering - if set, the list will render the specified amount of items
- * regardless of the container / item size.
- */
- initialItemCount?: number;
- /**
- * Set the callback to specify the contents of the item.
- */
- itemContent?: GridItemContent<C>;
- /**
- * Use the `components` property for advanced customization of the elements rendered by the list.
- */
- components?: GridComponents<C>;
- /**
- * Use the `components` property for advanced customization of the elements rendered by the list.
- */
- context?: C;
- /**
- * Set the overscan property to make the component "chunk" the rendering of new items on scroll.
- * The property causes the component to render more items than the necessary, but reduces the re-renders on scroll.
- * Setting `{ main: number, reverse: number }` lets you extend the list in both the main and the reverse scrollable directions.
- */
- overscan?: number | {
- main: number;
- reverse: number;
- };
- /**
- * If specified, the component will use the function to generate the `key` property for each list item.
- */
- computeItemKey?: GridComputeItemKey;
- /**
- * Use to display placeholders if the user scrolls fast through the list.
- *
- * Set `components.ScrollSeekPlaceholder` to change the placeholder content.
- */
- scrollSeekConfiguration?: ScrollSeekConfiguration | false;
- /**
- * Called when the list starts/stops scrolling.
- */
- isScrolling?: (isScrolling: boolean) => void;
- /**
- * Gets called when the user scrolls to the end of the list.
- * Receives the last item index as an argument. Can be used to implement endless scrolling.
- */
- endReached?: (index: number) => void;
- /**
- * Called when the user scrolls to the start of the list.
- */
- startReached?: (index: number) => void;
- /**
- * Called with the new set of items each time the list items are rendered due to scrolling.
- */
- rangeChanged?: (range: ListRange) => void;
- /**
- * Called with true / false when the list has reached the bottom / gets scrolled up.
- * Can be used to load newer items, like `tail -f`.
- */
- atBottomStateChange?: (atBottom: boolean) => void;
- /**
- * Called with `true` / `false` when the list has reached the top / gets scrolled down.
- */
- atTopStateChange?: (atTop: boolean) => void;
- /**
- * Provides access to the root DOM element
- */
- scrollerRef?: (ref: HTMLElement | null) => any;
- /**
- * Sets the className for the list DOM element
- */
- listClassName?: string;
- /**
- * Sets the grid items' className
- */
- itemClassName?: string;
- /**
- * Uses the document scroller rather than wrapping the grid in its own.
- */
- useWindowScroll?: boolean;
- /**
- * Pass a reference to a scrollable parent element, so that the grid won't wrap in its own.
- */
- customScrollParent?: HTMLElement;
- }
- export declare interface VirtuosoHandle {
- /**
- * Scrolls the component to the specified item index. See {@link IndexLocationWithAlign} for more options.
- */
- scrollToIndex(location: number | FlatIndexLocationWithAlign): void;
- /**
- * Scrolls the item into view if necessary. See [the website example](http://virtuoso.dev/keyboard-navigation/) for an implementation.
- */
- scrollIntoView(location: FlatScrollIntoViewLocation): void;
- /**
- * Scrolls the component to the specified location. See [ScrollToOptions (MDN)](https://developer.mozilla.org/en-US/docs/Web/API/ScrollToOptions)
- */
- scrollTo(location: ScrollToOptions): void;
- /**
- * Scrolls the component with the specified amount. See [ScrollToOptions (MDN)](https://developer.mozilla.org/en-US/docs/Web/API/ScrollToOptions)
- */
- scrollBy(location: ScrollToOptions): void;
- /**
- * Use this with combination with follow output if you have images loading in the list. Listen to the image loading and call the method.
- */
- autoscrollToBottom(): void;
- }
- export declare const VirtuosoMockContext: React_3.Context<VirtuosoMockContextValue | undefined>;
- export declare interface VirtuosoMockContextValue {
- viewportHeight: number;
- itemHeight: number;
- }
- export declare interface VirtuosoProps<D, C> extends ListRootProps {
- /**
- * The total amount of items to be rendered.
- */
- totalCount?: number;
- /**
- * The data items to be rendered. If data is set, the total count will be inferred from the length of the array.
- */
- data?: readonly D[];
- /**
- * Additional context available in the custom components and content callbacks
- */
- context?: C;
- /**
- * *The property accepts pixel values.*
- *
- * Set the overscan property to make the component "chunk" the rendering of new items on scroll.
- * The property causes the component to render more items than the necessary, but reduces the re-renders on scroll.
- * Setting `{ main: number, reverse: number }` lets you extend the list in both the main and the reverse scrollable directions.
- * See the `increaseViewportBy` property for a similar behavior (equivalent to the `overscan` in react-window).
- *
- */
- overscan?: number | {
- main: number;
- reverse: number;
- };
- /**
- *
- * *The property accepts pixel values.*
- *
- * Set the increaseViewportBy property to artificially increase the viewport size, causing items to be rendered before outside of the viewport.
- * The property causes the component to render more items than the necessary, but can help with slow loading content.
- * Using `{ top?: number, bottom?: number }` lets you set the increase for each end separately.
- *
- */
- increaseViewportBy?: number | {
- top: number;
- bottom: number;
- };
- /**
- * Set the amount of items to remain fixed at the top of the list.
- *
- * For a header that scrolls away when scrolling, check the `components.Header` property.
- */
- topItemCount?: number;
- /**
- * Set to a value between 0 and totalCount - 1 to make the list start scrolled to that item.
- * Pass in an object to achieve additional effects similar to `scrollToIndex`.
- */
- initialTopMostItemIndex?: number | IndexLocationWithAlign;
- /**
- * Set this value to offset the initial location of the list.
- * Warning: using this property will still run a render cycle at the scrollTop: 0 list window.
- * If possible, avoid using it and stick to `initialTopMostItemIndex` instead.
- */
- initialScrollTop?: number;
- /**
- * Use for server-side rendering - if set, the list will render the specified amount of items
- * regardless of the container / item size.
- */
- initialItemCount?: number;
- /**
- * Use the `components` property for advanced customization of the elements rendered by the list.
- */
- components?: Components<C>;
- /**
- * Set the callback to specify the contents of the item.
- */
- itemContent?: ItemContent<D, C>;
- /**
- * If specified, the component will use the function to generate the `key` property for each list item.
- */
- computeItemKey?: ComputeItemKey<D, C>;
- /**
- * By default, the component assumes the default item height from the first rendered item (rendering it as a "probe").
- *
- * If the first item turns out to be an outlier (very short or tall), the rest of the rendering will be slower,
- * as multiple passes of rendering should happen for the list to fill the viewport.
- *
- * Setting `defaultItemHeight` causes the component to skip the "probe" rendering and use the property
- * value as default height instead.
- */
- defaultItemHeight?: number;
- /**
- * Allows customizing the height/width calculation of `Item` elements.
- *
- * The default implementation reads `el.getBoundingClientRect().height` and `el.getBoundingClientRect().width`.
- */
- itemSize?: SizeFunction;
- /**
- * Can be used to improve performance if the rendered items are of known size.
- * Setting it causes the component to skip item measurements.
- */
- fixedItemHeight?: number;
- /**
- * Use to display placeholders if the user scrolls fast through the list.
- *
- * Set `components.ScrollSeekPlaceholder` to change the placeholder content.
- */
- scrollSeekConfiguration?: ScrollSeekConfiguration | false;
- /**
- * If set to `true`, the list automatically scrolls to bottom if the total count is changed.
- * Set to `"smooth"` for an animated scrolling.
- *
- * By default, `followOutput` scrolls down only if the list is already at the bottom.
- * To implement an arbitrary logic behind that, pass a function:
- *
- * ```tsx
- * <Virtuoso
- * followOutput={(isAtBottom: boolean) => {
- * if (expression) {
- * return 'smooth' // can be 'auto' or false to avoid scrolling
- * } else {
- * return false
- * }
- * }} />
- * ```
- */
- followOutput?: FollowOutput;
- /**
- * Set to customize the wrapper tag for the header and footer components (default is `div`).
- */
- headerFooterTag?: string;
- /**
- * Use when implementing inverse infinite scrolling - decrease the value this property
- * in combination with `data` or `totalCount` to prepend items to the top of the list.
- *
- * Warning: the firstItemIndex should **be a positive number**, based on the total amount of items to be displayed.
- */
- firstItemIndex?: number;
- /**
- * Called when the list starts/stops scrolling.
- */
- isScrolling?: (isScrolling: boolean) => void;
- /**
- * Gets called when the user scrolls to the end of the list.
- * Receives the last item index as an argument. Can be used to implement endless scrolling.
- */
- endReached?: (index: number) => void;
- /**
- * Called when the user scrolls to the start of the list.
- */
- startReached?: (index: number) => void;
- /**
- * Called with the new set of items each time the list items are rendered due to scrolling.
- */
- rangeChanged?: (range: ListRange) => void;
- /**
- * Called with true / false when the list has reached the bottom / gets scrolled up.
- * Can be used to load newer items, like `tail -f`.
- */
- atBottomStateChange?: (atBottom: boolean) => void;
- /**
- * Called with `true` / `false` when the list has reached the top / gets scrolled down.
- */
- atTopStateChange?: (atTop: boolean) => void;
- /**
- * Called when the total list height is changed due to new items or viewport resize.
- */
- totalListHeightChanged?: (height: number) => void;
- /**
- * Called with the new set of items each time the list items are rendered due to scrolling.
- */
- itemsRendered?: (items: ListItem<D>[]) => void;
- /**
- * Setting `alignToBottom` to `true` aligns the items to the bottom of the list if the list is shorter than the viewport.
- * Use `followOutput` property to keep the list aligned when new items are appended.
- */
- alignToBottom?: boolean;
- /**
- * Uses the document scroller rather than wrapping the list in its own.
- */
- useWindowScroll?: boolean;
- /**
- * Pass a reference to a scrollable parent element, so that the list won't wrap in its own.
- */
- customScrollParent?: HTMLElement;
- /**
- * Provides access to the root DOM element
- */
- scrollerRef?: (ref: HTMLElement | Window | null) => any;
- /**
- * *The property accepts pixel values.*
- *
- * By default `0`. Redefine to change how much away from the top the scroller can be before the list is not considered not at top.
- */
- atTopThreshold?: number;
- /**
- * *The property accepts pixel values.*
- *
- * By default `4`. Redefine to change how much away from the bottom the scroller can be before the list is not considered not at bottom.
- */
- atBottomThreshold?: number;
- /**
- * No longer necessary after 2.10.2. component should work out of the box.
- */
- react18ConcurrentRendering?: boolean;
- }
- export declare interface WindowViewportInfo {
- offsetTop: number;
- visibleHeight: number;
- visibleWidth: number;
- }
- export { }
|