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

package/example/app/chat-infinite/index.tsx

@@ -0,0 +1,239 @@
+import { LegendList } from "@legendapp/list";
+import { useHeaderHeight } from "@react-navigation/elements";
+import { useState } from "react";
+import { Button, KeyboardAvoidingView, Platform, StyleSheet, Text, TextInput, View } from "react-native";
+import { RefreshControl } from "react-native-gesture-handler";
+import { SafeAreaView, useSafeAreaInsets } from "react-native-safe-area-context";
+
+type MessageSide = "user" | "bot";
+type Message = {
+    id: string;
+    text: string;
+    sender: MessageSide;
+    timeStamp: number;
+};
+
+let idCounter = 0;
+const MS_PER_SECOND = 1000;
+
+const defaultChatMessages: Message[] = [
+    {
+        id: String(idCounter++),
+        text: "Hi, I have a question",
+        sender: "user",
+        timeStamp: Date.now() - MS_PER_SECOND * 5,
+    },
+    { id: String(idCounter++), text: "Are we there yet1?", sender: "bot", timeStamp: Date.now() - MS_PER_SECOND * 4 },
+    { id: String(idCounter++), text: "Are we there yet2?", sender: "bot", timeStamp: Date.now() - MS_PER_SECOND * 4 },
+    { id: String(idCounter++), text: "Are we there yet3?", sender: "bot", timeStamp: Date.now() - MS_PER_SECOND * 4 },
+    { id: String(idCounter++), text: "Are we there yet4?", sender: "bot", timeStamp: Date.now() - MS_PER_SECOND * 4 },
+    { id: String(idCounter++), text: "Are we there yet5?", sender: "bot", timeStamp: Date.now() - MS_PER_SECOND * 4 },
+    { id: String(idCounter++), text: "Are we there yet6?", sender: "bot", timeStamp: Date.now() - MS_PER_SECOND * 4 },
+    { id: String(idCounter++), text: "Are we there yet7?", sender: "bot", timeStamp: Date.now() - MS_PER_SECOND * 4 },
+    { id: String(idCounter++), text: "Are we there yet8?", sender: "bot", timeStamp: Date.now() - MS_PER_SECOND * 4 },
+    { id: String(idCounter++), text: "Are we there yet9?", sender: "bot", timeStamp: Date.now() - MS_PER_SECOND * 4 },
+    { id: String(idCounter++), text: "Are we there yet10?", sender: "bot", timeStamp: Date.now() - MS_PER_SECOND * 4 },
+    { id: String(idCounter++), text: "Are we there yet11?", sender: "bot", timeStamp: Date.now() - MS_PER_SECOND * 4 },
+    { id: String(idCounter++), text: "Are we there yet12?", sender: "bot", timeStamp: Date.now() - MS_PER_SECOND * 4 },
+    { id: String(idCounter++), text: "Are we there yet13?", sender: "bot", timeStamp: Date.now() - MS_PER_SECOND * 4 },
+    { id: String(idCounter++), text: "Are we there yet14?", sender: "bot", timeStamp: Date.now() - MS_PER_SECOND * 4 },
+    { id: String(idCounter++), text: "Are we there yet15?", sender: "bot", timeStamp: Date.now() - MS_PER_SECOND * 4 },
+    { id: String(idCounter++), text: "Are we there yet16?", sender: "bot", timeStamp: Date.now() - MS_PER_SECOND * 4 },
+    { id: String(idCounter++), text: "Are we there yet17?", sender: "bot", timeStamp: Date.now() - MS_PER_SECOND * 4 },
+    { id: String(idCounter++), text: "Are we there yet18?", sender: "bot", timeStamp: Date.now() - MS_PER_SECOND * 4 },
+    {
+        id: String(idCounter++),
+        text: "LAST MESSAGE: How can I help you?",
+        sender: "bot",
+        timeStamp: Date.now() - MS_PER_SECOND * 3,
+    },
+];
+
+const ChatExample = () => {
+    const [messages, setMessages] = useState<Message[]>(defaultChatMessages);
+    const [inputText, setInputText] = useState("");
+    const headerHeight = Platform.OS === "ios" ? useHeaderHeight() : 0;
+
+    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);
+        }
+    };
+
+    const [refreshing, setRefreshing] = useState(false);
+    const onRefresh = () => {
+        console.log("onRefresh");
+        setRefreshing(true);
+        setTimeout(() => {
+            setMessages((prevData) => {
+                const initialIndex = Number.parseInt(prevData[0].id);
+                const newData = [
+                    ...Array.from({ length: 5 }, (_, i) => ({
+                        id: (initialIndex - i - 1).toString(),
+                        text: `Previous message${(initialIndex - i - 1).toString()}`,
+                        sender: "user" as MessageSide,
+                        timeStamp: Date.now() - MS_PER_SECOND * 5,
+                    })).reverse(),
+                    ...prevData,
+                ];
+                return newData;
+            });
+            setRefreshing(false);
+        }, 500);
+    };
+
+    // useEffect(() => {
+    //     setInterval(() => {
+    //         setMessages((prevData) => {
+    //             const initialIndex = Number.parseInt(prevData[0].id);
+    //             const newData = [
+    //                 ...Array.from({ length: 1 }, (_, i) => ({
+    //                     id: (initialIndex - i - 1).toString(),
+    //                     text: `Previous message${(initialIndex - i - 1).toString()}`,
+    //                     sender: "user" as MessageSide,
+    //                     timeStamp: Date.now() - MS_PER_SECOND * 5,
+    //                 })).reverse(),
+    //                 ...prevData,
+    //             ];
+    //             return newData;
+    //         });
+    //         setRefreshing(false);
+    //     }, 500);
+    // }, []);
+
+    const { top } = useSafeAreaInsets();
+
+    return (
+        <SafeAreaView style={styles.container} edges={["bottom"]}>
+            <KeyboardAvoidingView style={styles.container} behavior="padding" keyboardVerticalOffset={headerHeight}>
+                <LegendList
+                    data={messages}
+                    contentContainerStyle={styles.contentContainer}
+                    keyExtractor={(item) => item.id}
+                    estimatedItemSize={80}
+                    maintainScrollAtEnd
+                    maintainVisibleContentPosition
+                    initialScrollIndex={messages.length - 1}
+                    alignItemsAtEnd
+                    recycleItems={true}
+                    ListHeaderComponent={<View style={{ height: top }} />}
+                    refreshControl={
+                        <RefreshControl
+                            refreshing={refreshing}
+                            onRefresh={onRefresh}
+                            tintColor={"#000000"}
+                            progressViewOffset={40}
+                        />
+                    }
+                    renderItem={({ item }) => (
+                        <View>
+                            <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>
+                        </View>
+                    )}
+                />
+                <View style={styles.inputContainer}>
+                    <TextInput
+                        style={styles.input}
+                        value={inputText}
+                        onChangeText={setInputText}
+                        placeholder="Type a message"
+                    />
+                    <Button title="Send" onPress={sendMessage} />
+                </View>
+            </KeyboardAvoidingView>
+        </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 ChatExample;

package/example/app/chat-keyboard/index.tsx

@@ -0,0 +1,248 @@
+import { LegendList } from "@legendapp/list/keyboard-controller";
+import { AnimatedLegendList } from "@legendapp/list/reanimated";
+import { useHeaderHeight } from "@react-navigation/elements";
+import { useState } from "react";
+import { Button, Platform, StyleSheet, Text, TextInput, View } from "react-native";
+import { KeyboardAvoidingView, KeyboardProvider } from "react-native-keyboard-controller";
+
+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 ChatExample = () => {
+    const [messages, setMessages] = useState<Message[]>(defaultChatMessages);
+    const [inputText, setInputText] = useState("");
+    const headerHeight = Platform.OS === "ios" ? useHeaderHeight() : 56;
+
+    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);
+        }
+    };
+
+    // Note: There's something weird with the SafeAreaView interacting with the KeyboardAvoidingView here I think,
+    // so there's some weird margins going on...
+
+    return (
+        <KeyboardProvider>
+            <KeyboardAvoidingView
+                style={styles.container}
+                behavior="position"
+                contentContainerStyle={{ flex: 1 }}
+                keyboardVerticalOffset={headerHeight}
+            >
+                <LegendList
+                    data={messages}
+                    contentContainerStyle={styles.contentContainer}
+                    keyExtractor={(item) => item.id}
+                    estimatedItemSize={80}
+                    LegendList={AnimatedLegendList}
+                    maintainScrollAtEnd
+                    alignItemsAtEnd
+                    initialScrollIndex={messages.length - 1}
+                    maintainVisibleContentPosition
+                    renderItem={({ item }) => (
+                        <>
+                            <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>
+                        </>
+                    )}
+                />
+                <View style={styles.inputContainer}>
+                    <TextInput
+                        style={styles.input}
+                        value={inputText}
+                        onChangeText={setInputText}
+                        placeholder="Type a message"
+                    />
+                    <Button title="Send" onPress={sendMessage} />
+                </View>
+            </KeyboardAvoidingView>
+        </KeyboardProvider>
+    );
+};
+
+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 ChatExample;