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

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

@@ -0,0 +1,187 @@
+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

@@ -0,0 +1,86 @@
+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

@@ -0,0 +1,55 @@
+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

@@ -0,0 +1,118 @@
+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

@@ -0,0 +1,106 @@
+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,
+    },
+});