react-native-simi-comps/dist/components/List.js

Simple Minimal Components for React Native

import React, { useState, useEffect } from "react";
import { FlatList } from "react-native";
import LineRule from "./LineRule";
import SearchBar from "./SearchBar";
import Text from "./Text";
import View from "./View";
export default function List(_a) {
    var name = _a.name, items = _a.items, renderItem = _a.renderItem, onSearch = _a.onSearch, _b = _a.bordered, bordered = _b === void 0 ? true : _b, headerExtra = _a.headerExtra;
    var _c = useState(""), searchQuery = _c[0], setSearchQuery = _c[1];
    useEffect(function () {
        onSearch(searchQuery.toLowerCase());
    }, [searchQuery]);
    useEffect(function () {
        setSearchQuery("");
    }, [name]);
    var border = bordered ? React.createElement(LineRule, null) : null;
    return (React.createElement(FlatList, { data: items, renderItem: renderItem, keyExtractor: function (_a) {
            var id = _a.id;
            return id;
        }, ListEmptyComponent: React.createElement(Text, { text: "No ".concat(name, " match \"").concat(searchQuery, "\""), centered: true, margin: 16 }), ListHeaderComponent: React.createElement(View, { flexed: true },
            headerExtra,
            React.createElement(SearchBar, { query: searchQuery, setQuery: setSearchQuery }),
            React.createElement(LineRule, null)), ListFooterComponent: border, ItemSeparatorComponent: function () { return border; }, contentContainerStyle: { paddingBottom: 32 }, stickyHeaderIndices: [0] }));
}
//# sourceMappingURL=List.js.map