@react-native-ohos/flash-list
Version:
FlashList is a more performant FlatList replacement
74 lines • 3.86 kB
TypeScript
/**
* MIT License
*
* Copyright (C) 2024 Huawei Device Co., Ltd.
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/
import React from "react";
import { NativeScrollEvent } from "react-native";
import FlashList from "./FlashList";
import { FlashListProps, ListRenderItemInfo } from "./FlashListProps";
export interface MasonryListRenderItemInfo<TItem> extends ListRenderItemInfo<TItem> {
columnSpan: number;
columnIndex: number;
}
export type MasonryListRenderItem<TItem> = (info: MasonryListRenderItemInfo<TItem>) => React.ReactElement | null;
export interface MasonryFlashListProps<T> extends Omit<FlashListProps<T>, "horizontal" | "initialScrollIndex" | "inverted" | "onBlankArea" | "renderItem" | "viewabilityConfigCallbackPairs"> {
/**
* Allows you to change the column widths of the list. This is helpful if you want some columns to be wider than the others.
* e.g, if `numColumns` is `3`, you can return `2` for `index 1` and `1` for the rest to achieve a `1:2:1` split by width.
*/
getColumnFlex?: (items: MasonryListItem<T>[], columnIndex: number, maxColumns: number, extraData?: any) => number;
/**
* If enabled, MasonryFlashList will try to reduce difference in column height by modifying item order.
* `overrideItemLayout` is required to make this work.
*/
optimizeItemArrangement?: boolean;
/**
* Extends typical `renderItem` to include `columnIndex` and `columnSpan` (number of columns the item spans).
* `columnIndex` gives the consumer column information in case they might need to treat items differently based on column.
* This information may not otherwise be derived if using the `optimizeItemArrangement` feature, as the items will no
* longer be linearly distributed across the columns; instead they are allocated to the column with the least estimated height.
*/
renderItem: MasonryListRenderItem<T> | null | undefined;
}
export interface MasonryFlashListScrollEvent extends NativeScrollEvent {
doNotPropagate?: boolean;
}
export interface MasonryListItem<T> {
originalIndex: number;
originalItem: T;
}
/**
* MasonryFlashListRef with support for scroll related methods
*/
export interface MasonryFlashListRef<T> {
scrollToOffset: FlashList<T>["scrollToOffset"];
scrollToEnd: FlashList<T>["scrollToEnd"];
getScrollableNode: FlashList<T>["getScrollableNode"];
}
/**
* FlashList variant that enables rendering of masonry layouts.
* If you want `MasonryFlashList` to optimize item arrangement, enable `optimizeItemArrangement` and pass a valid `overrideItemLayout` function.
*/
export declare const MasonryFlashList: <T>(props: MasonryFlashListProps<T> & {
ref?: React.RefObject<MasonryFlashListRef<T>> | undefined;
}) => React.ReactElement;
//# sourceMappingURL=MasonryFlashList.d.ts.map