react-native-flash-section-list/dist/FlashSectionList.js

SectionList for React Native using FlashList

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.FlashSectionList = FlashSectionList;
const flash_list_1 = require("@shopify/flash-list");
const react_1 = __importDefault(require("react"));
const react_native_1 = require("react-native");
const SectionIndex_1 = __importDefault(require("./SectionIndex"));
function FlashSectionList(props) {
    const ref = react_1.default.useRef(null);
    const data = props.sections
        .map((section) => {
        return [
            { type: "sectionHeader", section, extraData: props.extraData },
            ...section.data.map((item, index) => ({
                type: "row",
                item,
                index,
                extraData: props.extraData,
            })),
        ];
    })
        .flat();
    const stickyHeaderIndices = [];
    const sectionLabels = [];
    data.forEach((item, index) => {
        var _a;
        if (item.type !== "sectionHeader") {
            return;
        }
        sectionLabels.push({
            char: item.section[(_a = props.sectionIndexOptions) === null || _a === void 0 ? void 0 : _a.sectionIndexLabelsKey],
            actualIndex: index,
        });
        if (props.stickySectionHeadersEnabled !== false) {
            stickyHeaderIndices.push(index);
        }
    });
    const separator = (index, isSection) => {
        if (!data || index + 1 >= data.length) {
            return null;
        }
        const leadingItem = data[index];
        const trailingItem = data[index + 1];
        const separatorProps = {
            index,
            leadingItem,
            trailingItem,
        };
        const Separator = isSection
            ? props.SectionSeparatorComponent
            : props.ItemSeparatorComponent;
        return Separator && <Separator {...separatorProps}/>;
    };
    const renderItem = (info) => {
        var _a, _b;
        if (info.item.type === "sectionHeader") {
            return (<>
          {props.inverted ? separator(info.index, true) : null}
          <react_native_1.View style={{
                    flexDirection: props.horizontal ? "column" : "row",
                }}>
            {((_a = props.renderSectionHeader) === null || _a === void 0 ? void 0 : _a.call(props, {
                    section: info.item.section,
                    extraData: info.extraData,
                })) || null}
          </react_native_1.View>
          {props.inverted ? null : separator(info.index, true)}
        </>);
        }
        else {
            return (<>
          {props.inverted ? separator(info.index, false) : null}
          <react_native_1.View style={{
                    flexDirection: props.horizontal || props.numColumns === 1 ? "column" : "row",
                }}>
            {(_b = props.renderItem) === null || _b === void 0 ? void 0 : _b.call(props, { item: info.item.item })}
          </react_native_1.View>
          {props.inverted ? null : separator(info.index, false)}
        </>);
        }
    };
    const overrideItemLayout = (layout, item, index, maxColumns, extraData) => {
        var _a;
        (_a = props.overrideItemLayout) === null || _a === void 0 ? void 0 : _a.call(props, layout, item, index, maxColumns, extraData);
        if (item.type === "sectionHeader") {
            layout.span = maxColumns;
        }
        else {
            layout.span = 1;
        }
    };
    return (<react_native_1.View style={{ flexDirection: "row" }}>
      <flash_list_1.FlashList {...props} ref={ref} ItemSeparatorComponent={null} data={data} renderItem={renderItem} stickyHeaderIndices={props.stickySectionHeadersEnabled !== false ? stickyHeaderIndices : []} getItemType={(item) => item.type} overrideItemLayout={overrideItemLayout}/>
      {!!props.sectionIndexOptions && (<SectionIndex_1.default data={sectionLabels} onPressIndex={(data, index) => {
                var _a, _b, _c;
                (_a = ref.current) === null || _a === void 0 ? void 0 : _a.scrollToIndex({ index: data.actualIndex });
                (_c = (_b = props.sectionIndexOptions) === null || _b === void 0 ? void 0 : _b.onSectionIndexPress) === null || _c === void 0 ? void 0 : _c.call(_b, index);
            }} {...props.sectionIndexOptions}/>)}
    </react_native_1.View>);
}
//# sourceMappingURL=FlashSectionList.js.map