@nstudio/ui-collectionview/react/index.d.ts

Customized NativeScript CollectionView for high performance lists. Supports vertical and horizontal modes, templating, and more.

import * as React from 'react';
import { CoreTypes, ItemEventData, ItemsSource, View } from '@nativescript/core';
import { NSVElement, NativeScriptProps, ViewAttributes } from 'react-nativescript';
import { CollectionView as NativeScriptCollectionView } from '..';
export type CellViewContainer = View;
type CellFactory = (item: any) => React.ReactElement;
export declare function registerCollectionView(): void;
interface CollectionViewAttributes extends ViewAttributes {
    colWidth?: CoreTypes.PercentLengthType | string;
    horizontalSpacing?: CoreTypes.LengthType | string;
    isBounceEnabled?: boolean;
    isItemsSourceIn?: boolean;
    isScrollEnabled?: boolean;
    itemViewLoader?: any;
    items?: any[] | ItemsSource;
    itemTemplateSelector?: string | ((item: any, index: number, items: any) => string);
    layoutStyle?: string;
    loadMoreThreshold?: number;
    onItemsChangedInternal?: (oldValue: any, newValue: any) => void;
    onItemLoading?: (args: ItemEventData) => void;
    onSpanSizeChangedInternal?: (oldValue: any, newValue: any) => void;
    orientation?: 'horizontal' | 'vertical';
    plugins?: string[];
    reverseLayout?: boolean;
    rowHeight?: CoreTypes.PercentLengthType | string;
    spanSize?: (item: any, index: number) => number;
    verticalSpacing?: CoreTypes.LengthType | string;
}
declare global {
    namespace JSX {
        interface IntrinsicElements {
            collectionView: NativeScriptProps<CollectionViewAttributes, NativeScriptCollectionView>;
        }
    }
}
type OwnProps = {
    items: ItemsSource | any[];
    /** User may specify cellFactory for single-template or cellFactories for multi-template. */
    cellFactory?: CellFactory;
    cellFactories?: Map<string, {
        placeholderItem: any;
        cellFactory: CellFactory;
    }>;
    /** For now, we don't support custom onItemLoading event handlers. */
    /**
     * The event will be raised when the CollectionView is scrolled so that the last item is visible.
     * This event is intended to be used to add additional data in the CollectionView.
     */
    _debug?: {
        logLevel: 'debug' | 'info';
        onCellFirstLoad?: (container: CellViewContainer) => void;
        onCellRecycle?: (container: CellViewContainer) => void;
    };
} & Omit<CollectionViewAttributes, 'onItemLoading'>;
type Props = OwnProps & {
    forwardedRef?: React.RefObject<NSVElement<NativeScriptCollectionView>>;
};
type NumberKey = number | string;
interface State {
    nativeCells: Record<NumberKey, CellViewContainer>;
    nativeCellToItemIndex: Map<CellViewContainer, NumberKey>;
    itemIndexToNativeCell?: Map<NumberKey, CellViewContainer>;
}
/**
 * A React wrapper around the NativeScript CollectionView component.
 * @see https://docs.nativescript.org/ui/ns-ui-widgets/list-view
 * @module ui/list-view/list-view
 */
export declare class _CollectionView extends React.Component<Props, State> {
    static readonly defaultProps: {
        _debug: {
            logLevel: "info";
            onCellFirstLoad: any;
            onCellRecycle: any;
        };
    };
    constructor(props: Props);
    private readonly myRef;
    private readonly argsViewToRootKeyAndRef;
    private roots;
    /**
     * CollectionView code-behind:
     * @see https://github.com/NativeScript/nativescript-sdk-examples-js/blob/master/app/ns-ui-widgets-category/list-view/code-behind/code-behind-ts-page.ts
     * CollectionView item templates:
     * @see https://medium.com/@alexander.vakrilov/faster-nativescript-CollectionView-with-multiple-item-templates-8f903a32e48f
     * Cell state in CollectionView:
     * @see https://medium.com/@alexander.vakrilov/managing-component-state-in-nativescript-CollectionView-b139e45d899b
     * @see https://github.com/NativeScript/nativescript-angular/issues/1245#issuecomment-393465035
     * loadMoreItems:
     * @see https://github.com/NativeScript/nativescript-sdk-examples-js/blob/master/app/ns-ui-widgets-category/list-view/events/events-ts-page.ts
     */
    private readonly defaultOnItemLoading;
    protected getNativeView(): NativeScriptCollectionView | null;
    private readonly renderNewRoot;
    componentDidMount(): void;
    componentWillUnmount(): void;
    static isItemsSource(arr: any[] | ItemsSource): arr is ItemsSource;
    render(): React.JSX.Element;
}
export declare const CollectionView: React.ForwardRefExoticComponent<{
    items: ItemsSource | any[];
    /** User may specify cellFactory for single-template or cellFactories for multi-template. */
    cellFactory?: CellFactory;
    cellFactories?: Map<string, {
        placeholderItem: any;
        cellFactory: CellFactory;
    }>;
    /** For now, we don't support custom onItemLoading event handlers. */
    /**
     * The event will be raised when the CollectionView is scrolled so that the last item is visible.
     * This event is intended to be used to add additional data in the CollectionView.
     */
    _debug?: {
        logLevel: "debug" | "info";
        onCellFirstLoad?: (container: CellViewContainer) => void;
        onCellRecycle?: (container: CellViewContainer) => void;
    };
} & Omit<CollectionViewAttributes, "onItemLoading"> & React.RefAttributes<NSVElement<NativeScriptCollectionView>>>;
export {};