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

package/example/app/chat-resize-outer/index.tsx

@@ -1,247 +0,0 @@
-import { LegendList } from "@legendapp/list";
-import { useHeaderHeight } from "@react-navigation/elements";
-import { Fragment, useState } from "react";
-import { KeyboardAvoidingView, Platform, Pressable, StyleSheet, Text, View } from "react-native";
-import { SafeAreaView } from "react-native-safe-area-context";
-
-type Message = {
-    id: string;
-    text: string;
-    sender: "user" | "bot";
-    timeStamp: number;
-};
-
-let idCounter = 0;
-const MS_PER_SECOND = 1000;
-
-const defaultChatMessages: Message[] = [
-    {
-        id: String(idCounter++),
-        text: "Hi, I have a question about your product",
-        sender: "user",
-        timeStamp: Date.now() - MS_PER_SECOND * 5,
-    },
-    {
-        id: String(idCounter++),
-        text: "Hello there! How can I assist you today?",
-        sender: "bot",
-        timeStamp: Date.now() - MS_PER_SECOND * 4,
-    },
-    {
-        id: String(idCounter++),
-        text: "I'm looking for information about pricing plans",
-        sender: "user",
-        timeStamp: Date.now() - MS_PER_SECOND * 4,
-    },
-    {
-        id: String(idCounter++),
-        text: "We offer several pricing tiers based on your needs",
-        sender: "bot",
-        timeStamp: Date.now() - MS_PER_SECOND * 4,
-    },
-    {
-        id: String(idCounter++),
-        text: "Our basic plan starts at $9.99 per month",
-        sender: "bot",
-        timeStamp: Date.now() - MS_PER_SECOND * 4,
-    },
-    {
-        id: String(idCounter++),
-        text: "Do you offer any discounts for annual billing?",
-        sender: "user",
-        timeStamp: Date.now() - MS_PER_SECOND * 4,
-    },
-    {
-        id: String(idCounter++),
-        text: "Yes! You can save 20% with our annual billing option",
-        sender: "bot",
-        timeStamp: Date.now() - MS_PER_SECOND * 4,
-    },
-    {
-        id: String(idCounter++),
-        text: "That sounds great. What features are included?",
-        sender: "user",
-        timeStamp: Date.now() - MS_PER_SECOND * 4,
-    },
-    {
-        id: String(idCounter++),
-        text: "The basic plan includes all core features plus 10GB storage",
-        sender: "bot",
-        timeStamp: Date.now() - MS_PER_SECOND * 4,
-    },
-    {
-        id: String(idCounter++),
-        text: "Premium plans include priority support and additional tools",
-        sender: "bot",
-        timeStamp: Date.now() - MS_PER_SECOND * 4,
-    },
-    {
-        id: String(idCounter++),
-        text: "I think the basic plan would work for my needs",
-        sender: "user",
-        timeStamp: Date.now() - MS_PER_SECOND * 4,
-    },
-    {
-        id: String(idCounter++),
-        text: "Perfect! I can help you get set up with that",
-        sender: "bot",
-        timeStamp: Date.now() - MS_PER_SECOND * 4,
-    },
-    {
-        id: String(idCounter++),
-        text: "Thanks for your help so far",
-        sender: "user",
-        timeStamp: Date.now() - MS_PER_SECOND * 4,
-    },
-    {
-        id: String(idCounter++),
-        text: "You're welcome! Is there anything else I can assist with today?",
-        sender: "bot",
-        timeStamp: Date.now() - MS_PER_SECOND * 3,
-    },
-];
-
-const ChatResizeOuter = () => {
-    const [messages, setMessages] = useState<Message[]>(defaultChatMessages);
-    const [inputText, setInputText] = useState("");
-    const headerHeight = Platform.OS === "ios" ? useHeaderHeight() : 80;
-    const [buttonHeight, setButtonHeight] = useState(40);
-
-    const sendMessage = () => {
-        const text = inputText || "Empty message";
-        if (text.trim()) {
-            setMessages((messages) => [
-                ...messages,
-                { id: String(idCounter++), text: text, sender: "user", timeStamp: Date.now() },
-            ]);
-            setInputText("");
-            setTimeout(() => {
-                setMessages((messages) => [
-                    ...messages,
-                    {
-                        id: String(idCounter++),
-                        text: `Answer: ${text.toUpperCase()}`,
-                        sender: "bot",
-                        timeStamp: Date.now(),
-                    },
-                ]);
-            }, 300);
-        }
-    };
-
-    return (
-        <SafeAreaView style={styles.container} edges={["bottom"]}>
-            <KeyboardAvoidingView
-                style={styles.container}
-                behavior="padding"
-                keyboardVerticalOffset={headerHeight}
-                contentContainerStyle={{ flex: 1 }}
-            >
-                <LegendList
-                    data={messages}
-                    contentContainerStyle={styles.contentContainer}
-                    keyExtractor={(item) => item.id}
-                    estimatedItemSize={10} // A size that's way too small to check the behavior is correct
-                    initialScrollIndex={messages.length - 1}
-                    maintainVisibleContentPosition
-                    maintainScrollAtEnd
-                    maintainScrollAtEndThreshold={0.1}
-                    alignItemsAtEnd
-                    renderItem={renderItem}
-                />
-            </KeyboardAvoidingView>
-            <Pressable
-                style={{
-                    height: buttonHeight,
-                    backgroundColor: "rgba(0, 0, 0, 0.1)",
-                    alignItems: "center",
-                    justifyContent: "center",
-                }}
-                onPress={() => {
-                    setButtonHeight(buttonHeight === 40 ? 300 : 40);
-                }}
-            >
-                <Text style={{ fontSize: 16, fontWeight: "medium" }}>Resize</Text>
-            </Pressable>
-        </SafeAreaView>
-    );
-};
-
-const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        backgroundColor: "#fff",
-    },
-    contentContainer: {
-        paddingHorizontal: 16,
-    },
-    messageContainer: {
-        padding: 16,
-        borderRadius: 16,
-        marginVertical: 4,
-    },
-    messageText: {
-        fontSize: 16,
-    },
-    userMessageText: {
-        color: "white",
-    },
-    inputContainer: {
-        flexDirection: "row",
-        alignItems: "center",
-        padding: 10,
-        borderTopWidth: 1,
-        borderColor: "#ccc",
-    },
-    botMessageContainer: {
-        backgroundColor: "#f1f1f1",
-    },
-    userMessageContainer: {
-        backgroundColor: "#007AFF",
-    },
-    botStyle: {
-        maxWidth: "75%",
-        alignSelf: "flex-start",
-    },
-    userStyle: {
-        maxWidth: "75%",
-        alignSelf: "flex-end",
-        alignItems: "flex-end",
-    },
-    input: {
-        flex: 1,
-        borderWidth: 1,
-        borderColor: "#ccc",
-        borderRadius: 5,
-        padding: 10,
-        marginRight: 10,
-    },
-    timeStamp: {
-        marginVertical: 5,
-    },
-    timeStampText: {
-        fontSize: 12,
-        color: "#888",
-    },
-});
-
-export default ChatResizeOuter;
-
-const renderItem = ({ item }: { item: Message }) => {
-    return (
-        <Fragment>
-            <View
-                style={[
-                    styles.messageContainer,
-                    item.sender === "bot" ? styles.botMessageContainer : styles.userMessageContainer,
-                    item.sender === "bot" ? styles.botStyle : styles.userStyle,
-                ]}
-            >
-                <Text style={[styles.messageText, item.sender === "user" && styles.userMessageText]}>{item.text}</Text>
-            </View>
-            <View style={[styles.timeStamp, item.sender === "bot" ? styles.botStyle : styles.userStyle]}>
-                <Text style={styles.timeStampText}>{new Date(item.timeStamp).toLocaleTimeString()}</Text>
-            </View>
-        </Fragment>
-    );
-};

package/example/app/columns/index.tsx

@@ -1,78 +0,0 @@
-import { LegendList } from "@legendapp/list";
-import { useState } from "react";
-import { useEffect } from "react";
-import { LogBox, StyleSheet, Text, View } from "react-native";
-
-LogBox.ignoreLogs(["Open debugger"]);
-
-const initialData = Array.from({ length: 8 }, (_, index) => ({ id: index.toString() }));
-
-export default function Columns() {
-    const [data, setData] = useState(initialData);
-
-    useEffect(() => {
-        setTimeout(() => {
-            setData(Array.from({ length: 20 }, (_, index) => ({ id: index.toString() })));
-        }, 1000);
-    });
-
-    return (
-        <View style={styles.container}>
-            <LegendList
-                data={data}
-                renderItem={Item}
-                keyExtractor={(item) => item.id}
-                numColumns={3}
-                columnWrapperStyle={{
-                    columnGap: 16,
-                    rowGap: 16,
-                }}
-            />
-        </View>
-    );
-}
-
-function Item({ item }: { item: { id: string } }) {
-    return (
-        <View style={styles.redRectangle}>
-            <View style={styles.redRectangleInner} />
-            <Text>Item {item.id}</Text>
-        </View>
-    );
-}
-
-const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        backgroundColor: "#fff",
-    },
-    redRectangle: {
-        aspectRatio: 1,
-    },
-    redRectangleInner: {
-        height: "100%",
-        width: "100%",
-        backgroundColor: "red",
-        borderRadius: 8,
-    },
-    columnWrapper: {
-        justifyContent: "space-between",
-    },
-    listHeader: {
-        alignSelf: "center",
-        height: 100,
-        width: 100,
-        backgroundColor: "#456AAA",
-        borderRadius: 12,
-        marginHorizontal: 8,
-        marginVertical: 8,
-    },
-    listEmpty: {
-        flex: 1,
-        justifyContent: "center",
-        alignItems: "center",
-        backgroundColor: "#6789AB",
-        paddingVertical: 16,
-        height: 100,
-    },
-});

package/example/app/countries/index.tsx

@@ -1,182 +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, TextInput, 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)
-    .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 [searchQuery, setSearchQuery] = useState("");
-
-    const filteredData = useMemo(() => {
-        const query = searchQuery.toLowerCase();
-        return DATA.filter(
-            (country) => country.name.toLowerCase().includes(query) || country.id.toLowerCase().includes(query),
-        );
-    }, [searchQuery]);
-
-    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.searchContainer}>
-                    <TextInput
-                        style={styles.searchInput}
-                        placeholder="Search country or code..."
-                        value={searchQuery}
-                        onChangeText={setSearchQuery}
-                        clearButtonMode="while-editing"
-                        autoCapitalize="none"
-                        autoCorrect={false}
-                    />
-                </View>
-                <LegendList
-                    data={filteredData}
-                    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: 40, backgroundColor: "green" }} />;
-
-export default App;
-
-const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        marginTop: StatusBar.currentHeight || 0,
-        backgroundColor: "#f5f5f5",
-    },
-    searchContainer: {
-        padding: 8,
-        backgroundColor: "#fff",
-        borderBottomWidth: 1,
-        borderBottomColor: "#e0e0e0",
-    },
-    searchInput: {
-        height: 40,
-        backgroundColor: "#f5f5f5",
-        borderRadius: 8,
-        paddingHorizontal: 12,
-        fontSize: 16,
-    },
-    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/countries-flashlist/index.tsx

@@ -1,163 +0,0 @@
-import { FlashList } from "@shopify/flash-list";
-import { type TCountryCode, countries, getEmojiFlag } from "countries-list";
-import { useMemo, useState } from "react";
-import { Pressable, StatusBar, StyleSheet, Text, TextInput, 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)
-    .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 [searchQuery, setSearchQuery] = useState("");
-
-    const filteredData = useMemo(() => {
-        const query = searchQuery.toLowerCase();
-        return DATA.filter(
-            (country) => country.name.toLowerCase().includes(query) || country.id.toLowerCase().includes(query),
-        );
-    }, [searchQuery]);
-
-    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.searchContainer}>
-                    <TextInput
-                        style={styles.searchInput}
-                        placeholder="Search country or code..."
-                        value={searchQuery}
-                        onChangeText={setSearchQuery}
-                        clearButtonMode="while-editing"
-                        autoCapitalize="none"
-                        autoCorrect={false}
-                    />
-                </View>
-                <FlashList
-                    data={filteredData}
-                    renderItem={renderItem}
-                    keyExtractor={(item) => item.id}
-                    extraData={selectedId}
-                    estimatedItemSize={70}
-                    //scrollEventThrottle={200}
-                    disableAutoLayout
-                />
-            </SafeAreaView>
-        </SafeAreaProvider>
-    );
-};
-
-export default App;
-
-const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        marginTop: StatusBar.currentHeight || 0,
-        backgroundColor: "#f5f5f5",
-    },
-    searchContainer: {
-        padding: 8,
-        backgroundColor: "#fff",
-        borderBottomWidth: 1,
-        borderBottomColor: "#e0e0e0",
-    },
-    searchInput: {
-        height: 40,
-        backgroundColor: "#f5f5f5",
-        borderRadius: 8,
-        paddingHorizontal: 12,
-        fontSize: 16,
-    },
-    item: {
-        paddingHorizontal: 16,
-        paddingVertical: 6,
-        flexDirection: "row",
-        alignItems: "center",
-        backgroundColor: "#fff",
-        borderRadius: 12,
-        // 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",
-    },
-});