react-native-speedy-list/lib/components/RecyclableItem/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";
/**
 * Wrapper around each list item.
 * */
export class RecyclableItem extends React.Component {
    constructor(props) {
        super(props);
        /**
         * Current recyclable view ref.
         * */
        this.itemViewRef = null;
        /**
         * The list will call this function attempting
         * to update the current item.
         * */
        this.recycle = (props) => {
            this.setState(props);
        };
        // The default state comes from the first props.
        this.state = { ...props };
    }
    shouldComponentUpdate(_, nextState) {
        var _a;
        // Updating if the item index changed.
        if (this.state.itemProps.index !== nextState.itemProps.index) {
            return true;
        }
        // Updating if the item renderer changed.
        if (this.state.itemRenderer !== nextState.itemRenderer) {
            return true;
        }
        // Updating if the item itself changed.
        if (!nextState.itemEquals(this.state.itemProps.item, nextState.itemProps.item)) {
            return true;
        }
        // If the item layout changed, we just need
        // to directly change the native props.
        if (this.state.layout.top !== nextState.layout.top || this.state.layout.height !== nextState.layout.height) {
            (_a = this.itemViewRef) === null || _a === void 0 ? void 0 : _a.setNativeProps({
                ...nextState.layout,
            });
        }
        return false;
    }
    render() {
        const { layout, itemProps, itemRenderer } = this.state;
        return (React.createElement(View, { ref: (ref) => (this.itemViewRef = ref), style: [styles.recyclableItem, layout] }, typeof itemRenderer === "function" && itemRenderer(itemProps)));
    }
}
RecyclableItem.defaultProps = {
    itemEquals: ObjectUtil.equals,
};
const styles = StyleSheet.create({
    recyclableItem: {
        position: "absolute",
        left: 0,
        right: 0,
    },
});
//# sourceMappingURL=index.js.map