feat: V3 Split Logic

components/Chat/ChatDumb.tsx

@@ -0,0 +1,248 @@
+import { FlashList, ListRenderItem } from "@shopify/flash-list";
+import {
+  backgroundColor,
+  itemSeparatorColor,
+  tertiaryBackgroundColor,
+} from "@styles/colors";
+import React, { useCallback, useEffect, useMemo, useRef } from "react";
+import {
+  Dimensions,
+  FlatList,
+  Platform,
+  StyleSheet,
+  View,
+  useColorScheme,
+} from "react-native";
+import Animated, {
+  useAnimatedStyle,
+  useDerivedValue,
+  useSharedValue,
+} from "react-native-reanimated";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+import ChatInput from "./Input/Input";
+import TransactionInput from "./Transaction/TransactionInput";
+import { ReanimatedFlashList, ReanimatedView } from "../../utils/animations";
+import { useKeyboardAnimation } from "../../utils/animations/keyboardAnimation";
+import { converseEventEmitter } from "../../utils/events";
+
+type ChatDumbProps<T> = {
+  onReadyToFocus: () => void;
+  transactionMode: boolean;
+  frameTextInputFocused: boolean;
+  items: T[];
+  renderItem: ListRenderItem<T>;
+  keyExtractor: (item: T) => string;
+  showChatInput: boolean;
+  ListFooterComponent: React.JSX.Element | null;
+  showPlaceholder: boolean;
+  key?: string;
+  displayList: boolean;
+  refreshing: boolean;
+  getItemType: (
+    item: T,
+    index: number,
+    extraData?: any
+  ) => string | number | undefined;
+  placeholderComponent: React.JSX.Element | null;
+  extraData?: any;
+  itemToId: (id: T) => string;
+};
+
+const useStyles = () => {
+  const colorScheme = useColorScheme();
+  return useMemo(
+    () =>
+      StyleSheet.create({
+        chatContainer: {
+          flex: 1,
+          justifyContent: "flex-end",
+          backgroundColor: backgroundColor(colorScheme),
+        },
+        chatContent: {
+          backgroundColor: backgroundColor(colorScheme),
+          flex: 1,
+        },
+        chatPreviewContent: {
+          backgroundColor: backgroundColor(colorScheme),
+          flex: 1,
+          paddingBottom: 0,
+        },
+        chat: {
+          backgroundColor: backgroundColor(colorScheme),
+        },
+        inputBottomFiller: {
+          position: "absolute",
+          width: "100%",
+          bottom: 0,
+          backgroundColor: backgroundColor(colorScheme),
+          zIndex: 0,
+        },
+        inChatRecommendations: {
+          borderBottomWidth: 0.5,
+          borderBottomColor: itemSeparatorColor(colorScheme),
+          marginHorizontal: 20,
+          marginBottom: 10,
+        },
+      }),
+    [colorScheme]
+  );
+};
+
+export function ChatDumb<T>({
+  onReadyToFocus,
+  transactionMode,
+  frameTextInputFocused,
+  items,
+  renderItem,
+  keyExtractor,
+  showChatInput,
+  showPlaceholder,
+  key,
+  displayList,
+  refreshing,
+  ListFooterComponent,
+  getItemType,
+  placeholderComponent,
+  extraData,
+  itemToId,
+}: ChatDumbProps<T>) {
+  const colorScheme = useColorScheme();
+  const styles = useStyles();
+
+  const hideInputIfFrameFocused = Platform.OS !== "web";
+
+  const DEFAULT_INPUT_HEIGHT = 58;
+  const chatInputHeight = useSharedValue(0);
+  const chatInputDisplayedHeight = useDerivedValue(() => {
+    return frameTextInputFocused && hideInputIfFrameFocused
+      ? 0
+      : chatInputHeight.value + DEFAULT_INPUT_HEIGHT;
+  });
+
+  const insets = useSafeAreaInsets();
+
+  const { height: keyboardHeight } = useKeyboardAnimation();
+  const tertiary = tertiaryBackgroundColor(colorScheme);
+  const textInputStyle = useAnimatedStyle(
+    () => ({
+      position: "absolute",
+      width: "100%",
+      backgroundColor: tertiary,
+      height: "auto",
+      zIndex: 1,
+      transform: [
+        { translateY: -Math.max(insets.bottom, keyboardHeight.value) },
+      ] as any,
+    }),
+    [keyboardHeight, colorScheme, insets.bottom]
+  );
+
+  const chatContentStyle = useAnimatedStyle(
+    () => ({
+      ...styles.chatContent,
+      paddingBottom: showChatInput
+        ? chatInputDisplayedHeight.value +
+          Math.max(insets.bottom, keyboardHeight.value)
+        : insets.bottom,
+    }),
+    [showChatInput, keyboardHeight, chatInputDisplayedHeight, insets.bottom]
+  );
+
+  const messageListRef = useRef<FlatList<T> | FlashList<T> | undefined>();
+
+  const scrollToMessage = useCallback(
+    (data: { messageId?: string; index?: number; animated?: boolean }) => {
+      let index = data.index;
+      if (index === undefined && data.messageId) {
+        index = items.findIndex((m) => itemToId(m) === data.messageId);
+      }
+      if (index !== undefined) {
+        messageListRef.current?.scrollToIndex({
+          index,
+          viewPosition: 0.5,
+          animated: !!data.animated,
+        });
+      }
+    },
+    [itemToId, items]
+  );
+
+  useEffect(() => {
+    converseEventEmitter.on("scrollChatToMessage", scrollToMessage);
+    return () => {
+      converseEventEmitter.off("scrollChatToMessage", scrollToMessage);
+    };
+  }, [scrollToMessage]);
+
+  const handleOnLayout = useCallback(() => {
+    setTimeout(() => {
+      onReadyToFocus();
+    }, 50);
+  }, [onReadyToFocus]);
+
+  return (
+    <View style={styles.chatContainer} key={key}>
+      <Animated.View style={chatContentStyle}>
+        {displayList && (
+          <ReanimatedFlashList
+            contentContainerStyle={styles.chat}
+            data={items}
+            refreshing={refreshing}
+            extraData={extraData}
+            renderItem={renderItem}
+            onLayout={handleOnLayout}
+            ref={(r) => {
+              // if (r) {
+              //   messageListRef.current = r;
+              // }
+            }}
+            keyboardDismissMode="interactive"
+            automaticallyAdjustContentInsets={false}
+            contentInsetAdjustmentBehavior="never"
+            // Causes a glitch on Android, no sure we need it for now
+            // maintainVisibleContentPosition={{
+            //   minIndexForVisible: 0,
+            //   autoscrollToTopThreshold: 100,
+            // }}
+            estimatedListSize={Dimensions.get("screen")}
+            inverted
+            keyExtractor={keyExtractor}
+            getItemType={getItemType}
+            keyboardShouldPersistTaps="handled"
+            estimatedItemSize={80}
+            // Size glitch on Android
+            showsVerticalScrollIndicator={Platform.OS === "ios"}
+            pointerEvents="auto"
+            ListFooterComponent={ListFooterComponent}
+          />
+        )}
+        {showPlaceholder && placeholderComponent}
+      </Animated.View>
+      {showChatInput && (
+        <>
+          <ReanimatedView
+            style={[
+              textInputStyle,
+              {
+                display:
+                  frameTextInputFocused && hideInputIfFrameFocused
+                    ? "none"
+                    : "flex",
+              },
+            ]}
+          >
+            {!transactionMode && <ChatInput inputHeight={chatInputHeight} />}
+            {transactionMode && <TransactionInput />}
+          </ReanimatedView>
+          <View
+            style={[
+              styles.inputBottomFiller,
+              { height: insets.bottom + DEFAULT_INPUT_HEIGHT },
+            ]}
+          />
+        </>
+      )}
+    </View>
+  );
+}

components/Conversation/ConversationTitleDumb.tsx

@@ -0,0 +1,68 @@
+import { headerTitleStyle, textPrimaryColor } from "@styles/colors";
+import {
+  Platform,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  useColorScheme,
+  View,
+} from "react-native";
+
+import { getTitleFontScale } from "../../utils/str";
+
+type ConversationTitleDumbProps = {
+  title?: string;
+  avatarComponent?: React.ReactNode;
+  onLongPress?: () => void;
+  onPress?: () => void;
+};
+
+export function ConversationTitleDumb({
+  avatarComponent,
+  title,
+  onLongPress,
+  onPress,
+}: ConversationTitleDumbProps) {
+  const styles = useStyles();
+
+  return (
+    <View style={styles.container}>
+      <TouchableOpacity
+        onLongPress={onLongPress}
+        onPress={onPress}
+        style={styles.touchableContainer}
+      >
+        {avatarComponent}
+        <Text style={styles.title} numberOfLines={1} allowFontScaling={false}>
+          {title}
+        </Text>
+      </TouchableOpacity>
+    </View>
+  );
+}
+
+const useStyles = () => {
+  const colorScheme = useColorScheme();
+  return StyleSheet.create({
+    avatar: {
+      marginRight: Platform.OS === "android" ? 24 : 7,
+      marginLeft: Platform.OS === "ios" ? 0 : -9,
+    },
+    container: { flexDirection: "row", flexGrow: 1 },
+    touchableContainer: {
+      flexDirection: "row",
+      justifyContent: "flex-start",
+      left: Platform.OS === "android" ? -36 : 0,
+      width: "100%",
+      alignItems: "center",
+      paddingRight: 40,
+    },
+    title: {
+      color: textPrimaryColor(colorScheme),
+      fontSize:
+        Platform.OS === "ios"
+          ? 16 * getTitleFontScale()
+          : headerTitleStyle(colorScheme).fontSize,
+    },
+  });
+};