@legendapp/list 2.0.0-next.2 → 2.0.0-next.3

package/example/app/countries-reorder/index.tsx

@@ -1,187 +0,0 @@
-import { LegendList } from "@legendapp/list";
-import { type TCountryCode, countries, getEmojiFlag } from "countries-list";
-import { useMemo, useState } from "react";
-import { Pressable, StatusBar, StyleSheet, Text, View } from "react-native";
-import { SafeAreaProvider, SafeAreaView } from "react-native-safe-area-context";
-
-export const unstable_settings = {
-    initialRouteName: "index",
-};
-
-export const createTitle = () => "Countries";
-
-type Country = {
-    id: string;
-    name: string;
-    flag: string;
-};
-
-// Convert countries object to array and add an id
-const DATA: Country[] = Object.entries(countries)
-    // .slice(0, 5)
-    .map(([code, country]) => ({
-        id: code,
-        name: country.name,
-        flag: getEmojiFlag(code as TCountryCode),
-    }))
-    .sort((a, b) => a.name.localeCompare(b.name));
-
-type ItemProps = {
-    item: Country;
-    onPress: () => void;
-    isSelected: boolean;
-};
-
-const Item = ({ item, onPress, isSelected }: ItemProps) => (
-    <Pressable
-        onPress={onPress}
-        style={({ pressed }) => [styles.item, isSelected && styles.selectedItem, pressed && styles.pressedItem]}
-    >
-        <View style={styles.flagContainer}>
-            <Text style={styles.flag}>{item.flag}</Text>
-        </View>
-        <View style={styles.contentContainer}>
-            <Text style={[styles.title, isSelected && styles.selectedText]}>
-                {item.name}
-                <Text style={styles.countryCode}> ({item.id})</Text>
-            </Text>
-        </View>
-    </Pressable>
-);
-
-const App = () => {
-    const [selectedId, setSelectedId] = useState<string>();
-    const [randomSeed, setRandomSeed] = useState(0);
-
-    // Display either ordered or randomized data based on state
-    const displayData = useMemo(() => {
-        if (randomSeed) {
-            // Randomize the order
-            return [...DATA].sort(() => Math.random() - 0.5);
-        }
-        // Return alphabetically sorted data
-        return [...DATA].sort((a, b) => a.name.localeCompare(b.name));
-    }, [randomSeed]);
-
-    const renderItem = ({ item }: { item: Country }) => {
-        const isSelected = item.id === selectedId;
-        return <Item item={item} onPress={() => setSelectedId(item.id)} isSelected={isSelected} />;
-    };
-
-    return (
-        <SafeAreaProvider>
-            <SafeAreaView style={styles.container}>
-                <View style={styles.headerContainer}>
-                    <Pressable style={styles.reorderButton} onPress={() => setRandomSeed(randomSeed + 1)}>
-                        <Text style={styles.buttonText}>Randomize Order</Text>
-                    </Pressable>
-                </View>
-                <LegendList
-                    data={displayData}
-                    renderItem={renderItem}
-                    keyExtractor={(item) => item.id}
-                    extraData={selectedId}
-                    estimatedItemSize={70}
-                    recycleItems
-                    onStartReachedThreshold={0.1}
-                    onStartReached={({ distanceFromStart }) => {
-                        console.log("onStartReached", distanceFromStart);
-                    }}
-                    onEndReachedThreshold={0.1}
-                    onEndReached={({ distanceFromEnd }) => {
-                        console.log("onEndReached", distanceFromEnd);
-                    }}
-                    // ListHeaderComponent={<View style={{ height: 200, backgroundColor: "red" }} />}
-                    // ListFooterComponent={<View style={{ height: 200, backgroundColor: "blue" }} />}
-                    ItemSeparatorComponent={Separator}
-                />
-            </SafeAreaView>
-        </SafeAreaProvider>
-    );
-};
-
-const Separator = () => <View style={{ height: 5, backgroundColor: "green" }} />;
-
-export default App;
-
-const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        marginTop: StatusBar.currentHeight || 0,
-        backgroundColor: "#f5f5f5",
-    },
-    headerContainer: {
-        padding: 8,
-        backgroundColor: "#fff",
-        borderBottomWidth: 1,
-        borderBottomColor: "#e0e0e0",
-        alignItems: "center",
-    },
-    reorderButton: {
-        backgroundColor: "#4a86e8",
-        paddingVertical: 10,
-        paddingHorizontal: 20,
-        borderRadius: 8,
-        width: "80%",
-        alignItems: "center",
-    },
-    buttonText: {
-        color: "#fff",
-        fontSize: 16,
-        fontWeight: "500",
-    },
-    item: {
-        paddingHorizontal: 16,
-        paddingVertical: 6,
-        flexDirection: "row",
-        alignItems: "center",
-        backgroundColor: "#fff",
-        borderRadius: 12,
-        //     shadowColor: "#000",
-        //     shadowOffset: {
-        //         width: 0,
-        //         height: 2,
-        //     },
-        //     shadowOpacity: 0.1,
-        //     shadowRadius: 3,
-        //     elevation: 3,
-    },
-    selectedItem: {
-        // backgroundColor: "#e3f2fd",
-        // borderColor: "#1976d2",
-        // borderWidth: 1,
-    },
-    pressedItem: {
-        // backgroundColor: "#f0f0f0",
-    },
-    flagContainer: {
-        marginRight: 16,
-        width: 40,
-        height: 40,
-        borderRadius: 20,
-        backgroundColor: "#f8f9fa",
-        alignItems: "center",
-        justifyContent: "center",
-    },
-    flag: {
-        fontSize: 28,
-    },
-    contentContainer: {
-        flex: 1,
-        justifyContent: "center",
-    },
-    title: {
-        fontSize: 16,
-        color: "#333",
-        fontWeight: "500",
-    },
-    selectedText: {
-        color: "#1976d2",
-        fontWeight: "600",
-    },
-    countryCode: {
-        fontSize: 14,
-        color: "#666",
-        fontWeight: "400",
-    },
-});

package/example/app/extra-data/index.tsx

@@ -1,86 +0,0 @@
-import { LegendList } from "@legendapp/list";
-import { useState } from "react";
-import { StatusBar, StyleSheet, Text, TouchableOpacity } from "react-native";
-import { SafeAreaProvider, SafeAreaView } from "react-native-safe-area-context";
-
-type ItemData = {
-    id: string;
-    title: string;
-};
-
-const DATA: ItemData[] = [
-    {
-        id: "bd7acbea-c1b1-46c2-aed5-3ad53abb28ba",
-        title: "First Item",
-    },
-    {
-        id: "3ac68afc-c605-48d3-a4f8-fbd91aa97f63",
-        title: "Second Item",
-    },
-    {
-        id: "58694a0f-3da1-471f-bd96-145571e29d72",
-        title: "Third Item",
-    },
-];
-
-type ItemProps = {
-    item: ItemData;
-    onPress: () => void;
-    backgroundColor: string;
-    textColor: string;
-};
-
-const Item = ({ item, onPress, backgroundColor, textColor }: ItemProps) => (
-    <TouchableOpacity onPress={onPress} style={[styles.item, { backgroundColor }]}>
-        <Text style={[styles.title, { color: textColor }]}>{item.title}</Text>
-    </TouchableOpacity>
-);
-
-const App = () => {
-    const [selectedId, setSelectedId] = useState<string>();
-
-    const renderItem = ({ item }: { item: ItemData }) => {
-        const backgroundColor = item.id === selectedId ? "#6e3b6e" : "#f9c2ff";
-        const color = item.id === selectedId ? "white" : "black";
-
-        return (
-            <Item
-                item={item}
-                onPress={() => setSelectedId(item.id)}
-                backgroundColor={backgroundColor}
-                textColor={color}
-            />
-        );
-    };
-
-    return (
-        <SafeAreaProvider>
-            <SafeAreaView style={styles.container}>
-                <LegendList
-                    data={DATA}
-                    renderItem={renderItem}
-                    keyExtractor={(item) => item.id}
-                    extraData={selectedId}
-                    estimatedItemSize={100}
-                />
-            </SafeAreaView>
-        </SafeAreaProvider>
-    );
-};
-
-export default App;
-
-const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        marginTop: StatusBar.currentHeight || 0,
-    },
-    item: {
-        padding: 20,
-        marginVertical: 8,
-        marginHorizontal: 16,
-    },
-    title: {
-        fontSize: 32,
-    },
-});

package/example/app/filter-elements/filter-data-provider.tsx

@@ -1,55 +0,0 @@
-import type React from "react";
-import { createContext, useCallback, useContext, useMemo, useState } from "react";
-
-export interface CardItem {
-    id: string;
-    isExpanded: boolean;
-}
-
-const DataContext = createContext({
-    data: [] as CardItem[],
-    setExpanded: (id: string, expanded: boolean) => {},
-    filter: "",
-    setFilter: null as unknown as React.Dispatch<React.SetStateAction<string>>,
-});
-
-export const CardsDataProvider = ({
-    initialData,
-    children,
-}: { initialData: CardItem[]; children: React.ReactNode }) => {
-    const [data, setData] = useState(initialData);
-    const [filter, setFilter] = useState("");
-
-    const setExpanded = useCallback((id: string, expanded: boolean) => {
-        setData((prevData) => {
-            return prevData.map((item) => {
-                if (item.id === id) {
-                    return { ...item, isExpanded: expanded };
-                }
-                return item;
-            });
-        });
-    }, []);
-
-    const filteredData = useMemo(() => {
-        if (filter !== "") {
-            const filterLower = filter.toLowerCase();
-            return data.filter((item) => item.id.includes(filterLower));
-        }
-        return data;
-    }, [filter, data]);
-
-    return (
-        <DataContext.Provider value={{ data: filteredData, setExpanded, filter, setFilter }}>
-            {children}
-        </DataContext.Provider>
-    );
-};
-
-export const useCardData = () => {
-    const contextValue = useContext(DataContext);
-    if (!contextValue) {
-        throw new Error("useData must be used within a CardDataProvider");
-    }
-    return contextValue;
-};

package/example/app/filter-elements/index.tsx

@@ -1,118 +0,0 @@
-import { renderItem } from "@/app/cards-renderItem";
-import { DRAW_DISTANCE, ESTIMATED_ITEM_LENGTH } from "@/constants/constants";
-import { LegendList, type LegendListRef } from "@legendapp/list";
-import { useNavigation } from "expo-router";
-import { useEffect, useRef, useState } from "react";
-import { Button, StyleSheet, Text, TextInput, View } from "react-native";
-import { CardsDataProvider, useCardData } from "./filter-data-provider";
-
-interface CardsProps {
-    numColumns?: number;
-}
-
-function FilteredCards({ numColumns = 1 }: CardsProps) {
-    const listRef = useRef<LegendListRef>(null);
-    const { data } = useCardData();
-    const navigation = useNavigation();
-    const [mvcp, setMvcp] = useState(false);
-    const [key, setKey] = useState(0);
-
-    useEffect(() => {
-        navigation.setOptions({
-            title: "Filter",
-            headerRight: () => (
-                <Button
-                    title={`${mvcp ? "✓" : ""}MVCP`}
-                    onPress={() => {
-                        setMvcp((prev) => !prev);
-                        setKey((prev) => prev + 1);
-                    }}
-                    color={mvcp ? "#00e" : "black"}
-                />
-            ),
-        });
-    }, [mvcp]);
-
-    return (
-        <View style={[StyleSheet.absoluteFill, styles.outerContainer]} key="legendlist">
-            <FilterInput />
-            <View style={{ flexGrow: 1 }}>
-                <LegendList
-                    key={key} // LegendList react weird on the changing of maintainVisibleContentPosition on the fly, make sure to remount the list
-                    ref={listRef}
-                    style={[StyleSheet.absoluteFill, styles.scrollContainer]}
-                    contentContainerStyle={styles.listContainer}
-                    data={data}
-                    renderItem={renderItem}
-                    keyExtractor={(item) => `id${item.id}`}
-                    estimatedItemSize={ESTIMATED_ITEM_LENGTH}
-                    drawDistance={DRAW_DISTANCE}
-                    maintainVisibleContentPosition={mvcp}
-                    recycleItems={true}
-                    numColumns={numColumns}
-                    ListFooterComponent={<View />}
-                    ListFooterComponentStyle={styles.listHeader}
-                    ListEmptyComponent={
-                        <View style={styles.listEmpty}>
-                            <Text style={{ color: "white" }}>Empty</Text>
-                        </View>
-                    }
-                />
-            </View>
-        </View>
-    );
-}
-
-export default function CardsWrapper({ numColumns = 1 }: CardsProps) {
-    return (
-        <CardsDataProvider
-            initialData={
-                Array.from({ length: 1000 }, (_, i) => ({
-                    id: i.toString(),
-                })) as any[]
-            }
-        >
-            <FilteredCards numColumns={numColumns} />
-        </CardsDataProvider>
-    );
-}
-
-const FilterInput = () => {
-    const { filter, setFilter } = useCardData();
-    return (
-        <TextInput
-            placeholder="Filter"
-            style={{ backgroundColor: "white", padding: 8, margin: 8, height: 40 }}
-            value={filter}
-            onChangeText={setFilter}
-            keyboardType="numeric"
-        />
-    );
-};
-
-const styles = StyleSheet.create({
-    listHeader: {
-        alignSelf: "center",
-        width: "100%",
-        backgroundColor: "#456AAA",
-        borderRadius: 12,
-        marginHorizontal: 8,
-        marginVertical: 8,
-    },
-    listEmpty: {
-        flex: 1,
-        justifyContent: "center",
-        alignItems: "center",
-        backgroundColor: "#6789AB",
-        paddingVertical: 16,
-    },
-    outerContainer: {
-        backgroundColor: "#456",
-    },
-    scrollContainer: {},
-    listContainer: {
-        width: 400,
-        maxWidth: "100%",
-        marginHorizontal: "auto",
-    },
-});

package/example/app/initial-scroll-index/index.tsx

@@ -1,106 +0,0 @@
-import { LegendList, type LegendListRef } from "@legendapp/list";
-import { useNavigation } from "expo-router";
-import { useLayoutEffect, useRef, useState } from "react";
-import { StyleSheet, Text, View } from "react-native";
-import { type Item, renderItem } from "./renderFixedItem";
-
-const ITEM_HEIGHT = 400;
-const SEPARATOR_HEIGHT = 52;
-const ESTIMATED_ITEM_LENGTH = 200;
-
-type RenderItem = Item & { type: "separator" | "item" };
-
-const RenderMultiItem = ({
-    item,
-    index,
-}: {
-    item: RenderItem;
-    index: number;
-}) => {
-    if (item.type === "separator") {
-        return (
-            <View
-                style={{
-                    height: SEPARATOR_HEIGHT,
-                    backgroundColor: "red",
-                    justifyContent: "center",
-                    alignItems: "center",
-                }}
-            >
-                <Text style={{ color: "white" }}>Separator {item.id}</Text>
-            </View>
-        );
-    }
-    return renderItem({ item, index, height: ITEM_HEIGHT });
-};
-
-export default function ScrollIndexDemo() {
-    const scrollViewRef = useRef<LegendListRef>(null);
-
-    const [data, setData] = useState<RenderItem[]>(
-        () =>
-            Array.from({ length: 500 }, (_, i) => ({
-                id: i.toString(),
-                type: i % 3 === 0 ? "separator" : "item",
-            })) as any[],
-    );
-
-    const navigation = useNavigation();
-    useLayoutEffect(() => {
-        navigation.setOptions({
-            title: "Initial scroll index",
-        });
-    }, []);
-
-    return (
-        <View style={[StyleSheet.absoluteFill, styles.outerContainer]}>
-            <LegendList
-                ref={scrollViewRef}
-                style={[StyleSheet.absoluteFill, styles.scrollContainer]}
-                contentContainerStyle={styles.listContainer}
-                data={data}
-                renderItem={RenderMultiItem}
-                keyExtractor={(item) => item.id}
-                getEstimatedItemSize={(i, item) => (data[i].type === "separator" ? 52 : 400)}
-                estimatedItemSize={ESTIMATED_ITEM_LENGTH}
-                drawDistance={1000}
-                recycleItems={true}
-                // alignItemsAtEnd
-                // maintainScrollAtEnd
-                onEndReached={({ distanceFromEnd }) => {
-                    console.log("onEndReached", distanceFromEnd);
-                }}
-                ListHeaderComponent={<View />}
-                ListHeaderComponentStyle={styles.listHeader}
-                // initialScrollOffset={20000}
-                initialScrollIndex={50}
-                // inverted
-                // horizontal
-            />
-        </View>
-    );
-}
-
-const styles = StyleSheet.create({
-    listHeader: {
-        alignSelf: "center",
-        height: 100,
-        width: 100,
-        backgroundColor: "#456AAA",
-        borderRadius: 12,
-        marginHorizontal: 8,
-        marginTop: 8,
-    },
-    outerContainer: {
-        backgroundColor: "#456",
-    },
-    scrollContainer: {
-        paddingHorizontal: 16,
-        // paddingrVertical: 48,
-    },
-
-    listContainer: {
-        // paddingHorizontal: 16,
-        paddingTop: 48,
-    },
-});