react-native-speedy-list/lib/components/ColumnedSpeedyList/index.js

A performance focused list component for React Native.

import React from "react";
import { StyleSheet, View } from "react-native";
import { ObjectUtil } from "../../util/ObjectUtil";
import { RecyclableList } from "../RecyclableList";
import { INITIAL_BATCH_SIZE, RECYCLABLE_ITEMS_COUNT, RECYCLING_DELAY } from "../RecyclableList/types";
export class ColumnedRecyclableList extends React.Component {
    constructor() {
        super(...arguments);
        this.getNumberOfColumns = () => {
            const { columns } = this.props;
            if (!columns || columns <= 1) {
                return 1;
            }
            return columns;
        };
        this.getColumnWidth = () => {
            const columns = this.getNumberOfColumns();
            return `${100.0 / columns}%`;
        };
        this.getItems = (items) => {
            const columns = this.getNumberOfColumns();
            const columnedItems = [];
            const rows = Math.ceil(items.length / columns);
            for (let i = 0; i < rows; i++) {
                columnedItems.push(items.slice(i * columns, i * columns + columns));
            }
            return columnedItems;
        };
        this.getItemRenderer = (renderer) => {
            const width = this.getColumnWidth();
            const columns = this.getNumberOfColumns();
            return ({ item: items, index, height }) => (React.createElement(View, { style: [styles.row, this.props.rowStyle] }, items.map((item, i) => (React.createElement(View, { key: i, style: [styles.column, { width }, this.props.cellStyle] }, renderer({ item, height, index: index * columns + i }))))));
        };
        this.getItemKey = (itemKey) => {
            return ({ item: items, index }) => {
                if (typeof itemKey === "string" || typeof itemKey === "number" || typeof itemKey === "symbol") {
                    return String(items[0][itemKey]);
                }
                return itemKey({ item: items[0], index });
            };
        };
        this.getItemHeight = (itemHeight) => {
            if (typeof itemHeight === "number") {
                return itemHeight;
            }
            return ({ item: items, index }) => Math.max(...items.map((item) => itemHeight({ item, index })));
        };
        this.getItemEquals = (itemEquals) => {
            return (a, b) => a.every((aItem, aIndex) => itemEquals(aItem, b[aIndex]));
        };
    }
    render() {
        const { items, itemRenderer, itemKey, itemHeight, itemEquals, ...props } = this.props;
        return (React.createElement(RecyclableList, { items: this.getItems(items), itemRenderer: this.getItemRenderer(itemRenderer), itemKey: this.getItemKey(itemKey), itemHeight: this.getItemHeight(itemHeight), itemEquals: this.getItemEquals(itemEquals), ...props }));
    }
}
ColumnedRecyclableList.defaultProps = {
    columns: 1,
    itemEquals: ObjectUtil.equals,
    recyclingDelay: RECYCLING_DELAY,
    initialBatchSize: INITIAL_BATCH_SIZE,
    recyclableItemsCount: RECYCLABLE_ITEMS_COUNT,
};
const styles = StyleSheet.create({
    row: {
        flex: 1,
        flexDirection: "row",
        justifyContent: "flex-start",
        alignItems: "stretch",
    },
    column: {},
});
//# sourceMappingURL=index.js.map