@ethora/chat-component-rn 26.7.5 → 26.7.7

package/src/components/MainComponents/RoomList.tsx

@@ -13,8 +13,8 @@ import {
   FlatList,
   Pressable,
   Animated,
-  Text,
-  TouchableOpacity,
+  NativeScrollEvent,
+  NativeSyntheticEvent,
 } from 'react-native';
 import { IRoom } from '../../types/types';
 import { SearchInput } from '../InputComponents/Search';
@@ -35,6 +35,42 @@ interface RoomListProps {
   onRoomClick?: (chat: IRoom) => void;
 }
 
+/** Page ground behind the room list, the search field and the header's
+ * rounded bottom corners. */
+const LIST_BACKGROUND = '#E8EDF2';
+
+/** A release that leaves the search strip in between is settled by
+ * scrolling to whichever end is nearer; this delay lets the platform tell
+ * us first whether the finger threw the list (momentum) or just let go. */
+const SNAP_SETTLE_DELAY = 60;
+
+const COLLAPSED_SCALE = 0.86;
+
+const SEARCH_REST_GAP = 16;
+
+export const searchRevealStyle = (
+  scrollY: Animated.Value,
+  hiddenOffset: number
+) => {
+  const travel = Math.max(hiddenOffset, 1);
+  return {
+    opacity: scrollY.interpolate({
+      inputRange: [0, travel * 0.85],
+      outputRange: [1, 0],
+      extrapolate: 'clamp' as const,
+    }),
+    transform: [
+      {
+        scale: scrollY.interpolate({
+          inputRange: [0, travel],
+          outputRange: [1, COLLAPSED_SCALE],
+          extrapolate: 'clamp' as const,
+        }),
+      },
+    ],
+  };
+};
+
 const RoomList: React.FC<RoomListProps> = ({
   chats,
   burgerMenu = false,
@@ -47,9 +83,12 @@ const RoomList: React.FC<RoomListProps> = ({
   const [searchTerm, setSearchTerm] = useState('');
   const [isLongPress, setIsLongPress] = useState(false);
   const [isDrawerOpen, setDrawerOpen] = useState(false);
+  const [isSearchFocused, setSearchFocused] = useState(false);
 
   const pressTimer = useRef<NodeJS.Timeout | null>(null);
   const containerRef = useRef<View>(null);
+  const listRef = useRef<FlatList<IRoom> | null>(null);
+  const scrollY = useRef(new Animated.Value(0)).current;
 
   const drawerAnimation = useRef(new Animated.Value(0)).current;
   const overlayAnimation = useRef(new Animated.Value(0)).current;
@@ -120,6 +159,124 @@ const RoomList: React.FC<RoomListProps> = ({
     }
   }, [burgerMenu]);
 
+  // The search field is the list's own header rather than a bar pinned
+  // above it: it lives in the scrollable content, so the list opens
+  // already scrolled past it (rooms first, no search in sight) and
+  // dragging the content down brings it back with the finger — the way
+  // Telegram's chat list behaves. A pinned bar could not do this on
+  // Android, where a list sitting at offset 0 has nothing left to drag.
+  const searchBarHeight = useRef(0);
+  const [measuredBarHeight, setMeasuredBarHeight] = useState(0);
+  const listHeight = useRef(0);
+  const contentHeight = useRef(0);
+  /** The list starts hidden-search only once, and only before the user
+   * has touched it — chats arriving later must not yank the view. */
+  const didInitialHide = useRef(false);
+  const hasDragged = useRef(false);
+  const inMomentum = useRef(false);
+  const settleTimer = useRef<NodeJS.Timeout | null>(null);
+
+  // A search being typed in (or just focused) is never tucked away
+  // under the header, whichever way the list is then dragged.
+  const searchIsActive = useRef(false);
+  searchIsActive.current = isSearchFocused || searchTerm.length > 0;
+
+  /** How far the list can scroll — the strip can only be hidden fully
+   * when the rooms below it are tall enough to take its place. */
+  const maxOffset = () => contentHeight.current - listHeight.current;
+
+  const hiddenOffset = () =>
+    Math.max(searchBarHeight.current - SEARCH_REST_GAP, 0);
+
+  const hideSearchInitially = useCallback(() => {
+    if (didInitialHide.current || hasDragged.current) return;
+    const hidden = hiddenOffset();
+    if (!hidden || !listHeight.current || !contentHeight.current) return;
+    if (maxOffset() < hidden) return;
+    didInitialHide.current = true;
+    listRef.current?.scrollToOffset({ offset: hidden, animated: false });
+  }, []);
+
+  /** The magnet: a strip left half-way in or out settles to whichever
+   * end it is closer to. */
+  const snapSearch = useCallback((offset: number) => {
+    const hidden = hiddenOffset();
+    if (!hidden || maxOffset() < hidden) return;
+    if (offset <= 0 || offset >= hidden) return;
+    const hide = !searchIsActive.current && offset > hidden / 2;
+    listRef.current?.scrollToOffset({
+      offset: hide ? hidden : 0,
+      animated: true,
+    });
+  }, []);
+
+  const clearSettleTimer = () => {
+    if (settleTimer.current) {
+      clearTimeout(settleTimer.current);
+      settleTimer.current = null;
+    }
+  };
+
+  useEffect(() => clearSettleTimer, []);
+
+  const handleScroll = useMemo(
+    () =>
+      Animated.event([{ nativeEvent: { contentOffset: { y: scrollY } } }], {
+        useNativeDriver: true,
+      }),
+    [scrollY]
+  );
+
+  const revealStyle = useMemo(
+    () =>
+      searchRevealStyle(
+        scrollY,
+        Math.max(measuredBarHeight - SEARCH_REST_GAP, 0)
+      ),
+    [scrollY, measuredBarHeight]
+  );
+
+  const handleScrollBeginDrag = useCallback(() => {
+    hasDragged.current = true;
+    clearSettleTimer();
+  }, []);
+
+  const handleScrollEndDrag = useCallback(
+    (e: NativeSyntheticEvent<NativeScrollEvent>) => {
+      const offset = e.nativeEvent.contentOffset.y;
+      inMomentum.current = false;
+      clearSettleTimer();
+      // A flick keeps scrolling after the release; snapping now would
+      // fight it, so wait a beat and let momentum claim the gesture.
+      settleTimer.current = setTimeout(() => {
+        settleTimer.current = null;
+        if (!inMomentum.current) snapSearch(offset);
+      }, SNAP_SETTLE_DELAY);
+    },
+    [snapSearch]
+  );
+
+  const handleMomentumBegin = useCallback(() => {
+    inMomentum.current = true;
+    clearSettleTimer();
+  }, []);
+
+  const handleMomentumEnd = useCallback(
+    (e: NativeSyntheticEvent<NativeScrollEvent>) => {
+      inMomentum.current = false;
+      snapSearch(e.nativeEvent.contentOffset.y);
+    },
+    [snapSearch]
+  );
+
+  // Tapping the field pulls it fully into view even if it was caught
+  // half-way, so the caret never sits under the header.
+  useEffect(() => {
+    if (isSearchFocused) {
+      listRef.current?.scrollToOffset({ offset: 0, animated: true });
+    }
+  }, [isSearchFocused]);
+
   const toggleDrawer = () => {
     if (isDrawerOpen) {
       closeDrawer();
@@ -157,6 +314,33 @@ const RoomList: React.FC<RoomListProps> = ({
     });
   };
 
+  const searchHeader = (
+    <View
+      testID="room-list-search"
+      style={styles.searchBar}
+      onLayout={(e) => {
+        const height = e.nativeEvent.layout.height;
+        searchBarHeight.current = height;
+        setMeasuredBarHeight((prev) => (prev === height ? prev : height));
+        hideSearchInitially();
+      }}
+    >
+      <Animated.View
+        testID="room-list-search-field"
+        style={[styles.searchField, revealStyle]}
+      >
+        <SearchInput
+          icon={<SearchIcon height={20} />}
+          value={searchTerm}
+          onChangeText={handleSearchChange}
+          onFocus={() => setSearchFocused(true)}
+          onBlur={() => setSearchFocused(false)}
+          placeholder={t('search.placeholder')}
+        />
+      </Animated.View>
+    </View>
+  );
+
   return (
     <>
       {burgerMenu && !open && (
@@ -180,39 +364,46 @@ const RoomList: React.FC<RoomListProps> = ({
           <>
             <View style={styles.scrollContainer}>
               <HeaderRoomList setDrawerOpen={toggleDrawer} />
-              {/* Search sits ABOVE the list rather than in its
-                  ListHeaderComponent. As a list header it was simply the
-                  first scrolling row, so the moment you scrolled the rooms
-                  it slid up and disappeared behind the opaque header band.
-                  Fixed here it stays reachable, which is the entire point
-                  of a search field over a long list. */}
-              <View style={styles.searchBar}>
-                <SearchInput
-                  icon={<SearchIcon height={20} />}
-                  value={searchTerm}
-                  onChangeText={handleSearchChange}
-                  placeholder={t('search.placeholder')}
+              <View style={styles.listArea}>
+                {/* Animated.FlatList, so the reveal runs on the native
+                    thread off the very same scroll it follows. */}
+                <Animated.FlatList
+                  ref={listRef}
+                  data={filteredChats}
+                  keyExtractor={(item) => item.jid}
+                  ListHeaderComponent={searchHeader}
+                  onLayout={(e) => {
+                    listHeight.current = e.nativeEvent.layout.height;
+                    hideSearchInitially();
+                  }}
+                  onContentSizeChange={(_w, h) => {
+                    contentHeight.current = h;
+                    hideSearchInitially();
+                  }}
+                  onScroll={handleScroll}
+                  scrollEventThrottle={16}
+                  onScrollBeginDrag={handleScrollBeginDrag}
+                  onScrollEndDrag={handleScrollEndDrag}
+                  onMomentumScrollBegin={handleMomentumBegin}
+                  onMomentumScrollEnd={handleMomentumEnd}
+                  keyboardShouldPersistTaps="handled"
+                  renderItem={({ item }) => (
+                    <Pressable
+                      // Stable testID so e2e drivers can target a room
+                      // row by its jid local-part (e.g. Main chat under
+                      // app id `..._...759` → testID `room-...759`).
+                      testID={`room-${(item.jid || '').split('@')[0]}`}
+                      accessibilityLabel={`room-${item.title || item.name}`}
+                      onPress={() => performClick(item)}
+                      onPressIn={handlePressIn}
+                      onPressOut={handlePressOut}
+                    >
+                      <ChatRoomItem chat={item} config={config} />
+                    </Pressable>
+                  )}
+                  style={styles.chatList}
                 />
               </View>
-              <FlatList
-                data={filteredChats}
-                keyExtractor={(item) => item.jid}
-                renderItem={({ item }) => (
-                  <Pressable
-                    // Stable testID so e2e drivers can target a room
-                    // row by its jid local-part (e.g. Main chat under
-                    // app id `..._...759` → testID `room-...759`).
-                    testID={`room-${(item.jid || '').split('@')[0]}`}
-                    accessibilityLabel={`room-${item.title || item.name}`}
-                    onPress={() => performClick(item)}
-                    onPressIn={handlePressIn}
-                    onPressOut={handlePressOut}
-                  >
-                    <ChatRoomItem chat={item} config={config} />
-                  </Pressable>
-                )}
-                style={styles.chatList}
-              />
 
               <HeaderRoomListMenu
                 closeDrawer={closeDrawer}
@@ -238,7 +429,7 @@ const styles = StyleSheet.create({
     width: '100%',
     height: '100%',
     flex: 1,
-    backgroundColor: '#fff',
+    backgroundColor: LIST_BACKGROUND,
   },
   scrollContainer: {
     flexGrow: 1,
@@ -249,21 +440,27 @@ const styles = StyleSheet.create({
     padding: 16,
     justifyContent: 'space-between',
   },
+  listArea: {
+    flex: 1,
+  },
   searchBar: {
+    paddingBottom: 4,
     // `row` matters: SearchInputWrapper is `flex: 1` plus a fixed 44px
     // height. In a column parent that flex resolves VERTICALLY against a
     // parent with no height of its own and collapses the field to nothing
-    // but its magnifier. As a row it resolves to width, which is what it
-    // meant back when the field was a list-header child.
+    // but its magnifier. As a row it resolves to width.
     flexDirection: 'row',
     paddingTop: 8,
-    paddingHorizontal: 16,
-    backgroundColor: '#FAFAFA',
+    backgroundColor: 'transparent',
+  },
+  searchField: {
+    flexDirection: 'row',
+    flex: 1,
   },
   chatList: {
     flex: 1,
     paddingHorizontal: 16,
-    backgroundColor: '#FAFAFA',
+    backgroundColor: LIST_BACKGROUND,
   },
 });