@ethora/chat-component-rn 26.7.10 → 26.8.1

package/src/components/MainComponents/ProfileImagePlaceholder.tsx

@@ -69,27 +69,27 @@ export const ProfileImagePlaceholder: React.FC<
     if (words.length === 0) {return '';}
 
     if (words.length >= 2) {
-      const firstLetter = /^[\p{L}\p{N}]$/u.test(words[0]?.[0] || '')
+      const firstLetter = /^[a-zA-Zа-яА-ЯёЁ]$/.test(words[0]?.[0] || '')
         ? words[0][0].toUpperCase()
         : '';
-      const secondLetter = /^[\p{L}\p{N}]$/u.test(words[1]?.[0] || '')
+      const secondLetter = /^[a-zA-Zа-яА-ЯёЁ]$/.test(words[1]?.[0] || '')
         ? words[1][0].toUpperCase()
         : '';
       return firstLetter + secondLetter;
     }
 
     if (words.length === 1 && words[0].length >= 2) {
-      const firstLetter = /^[\p{L}\p{N}]$/u.test(words[0][0] || '')
+      const firstLetter = /^[a-zA-Zа-яА-ЯёЁ]$/.test(words[0][0] || '')
         ? words[0][0].toUpperCase()
         : '';
-      const secondLetter = /^[\p{L}\p{N}]$/u.test(words[0][1] || '')
+      const secondLetter = /^[a-zA-Zа-яА-ЯёЁ]$/.test(words[0][1] || '')
         ? words[0][1].toUpperCase()
         : '';
       return firstLetter + secondLetter;
     }
 
     if (words.length === 1 && words[0].length === 1) {
-      return /^[\p{L}\p{N}]$/u.test(words[0][0] || '')
+      return /^[a-zA-Zа-яА-ЯёЁ]$/.test(words[0][0] || '')
         ? words[0][0].toUpperCase()
         : '';
     }
@@ -97,26 +97,16 @@ export const ProfileImagePlaceholder: React.FC<
     return '';
   };
 
-  const getInitials = () =>
-    !imageSource && name ? getTwoUppercaseLetters(name) : '';
-
-  const imageSource =
-    typeof icon === 'string' && icon
-      ? { uri: icon }
-      : typeof icon === 'number'
-      ? icon
-      : icon && typeof (icon as any).uri === 'string' && (icon as any).uri
-      ? (icon as any)
-      : null;
+  const getInitials = () => (!icon && name ? getTwoUppercaseLetters(name) : '');
 
   return (
     <Wrapper
-      bgColor={imageSource ? 'transparent' : backgroundColor?.backgroundColor}
+      bgColor={icon ? 'transparent' : backgroundColor?.backgroundColor}
       size={size}
       isClickable={active || !!upload?.active}
     >
       <AvatarCircle
-        bgColor={imageSource ? 'transparent' : backgroundColor?.backgroundColor}
+        bgColor={icon ? 'transparent' : backgroundColor?.backgroundColor}
         size={size}
         isClickable={active || !!upload?.active}
         onPress={
@@ -127,8 +117,11 @@ export const ProfileImagePlaceholder: React.FC<
             : undefined
         }
       >
-        {imageSource ? (
-          <AvatarImage source={imageSource} size={size} />
+        {icon ? (
+          <AvatarImage
+            source={typeof icon === 'string' ? { uri: icon } : icon as any}
+            size={size}
+          />
         ) : placeholderIcon ? (
           placeholderIcon
         ) : (
@@ -147,7 +140,7 @@ export const ProfileImagePlaceholder: React.FC<
           </Overlay>
         )}
       </AvatarCircle>
-      {remove?.enabled && imageSource && role !== 'participant' && (
+      {remove?.enabled && icon && role !== 'participant' && (
         <RemoveButton onPress={remove.onRemoveClick}>
           <RemoveButtonText>&times;</RemoveButtonText>
         </RemoveButton>

package/src/components/MainComponents/ReduxWrapper.tsx

@@ -1,8 +1,9 @@
 import React, {useMemo} from 'react';
-import {Provider} from 'react-redux';
+import {Provider, useDispatch} from 'react-redux';
 import {KeyboardProvider} from 'react-native-keyboard-controller';
 import {SafeAreaProvider} from 'react-native-safe-area-context';
 import {store} from '../../roomStore';
+import {setConfig} from '../../roomStore/chatSettingsSlice';
 import {ConfigUser, IConfig, MessageProps} from '../../types/types';
 import {XmppProvider} from '../../context/xmppProvider';
 import {MessageNotificationProvider} from '../../context/MessageNotificationContext';
@@ -28,6 +29,21 @@ interface ChatWrapperProps {
   isVisible?: boolean;
 }
 
+// Mirrors the web SDK's ConfigEnabler (ReduxWrapper.tsx): keeps redux's
+// copy of the config in step with the prop. Without it setConfig is only
+// dispatched during XMPP init, so a host changing config mid-session (the
+// testbed's Setup toggles, a host flipping translates.readerLocale) kept
+// serving a STALE config to everything that reads it from the store —
+// which is why picking a reader language changed nothing.
+const ConfigEnabler: React.FC<{config?: IConfig}> = ({config}) => {
+  const dispatch = useDispatch();
+  React.useEffect(() => {
+    if (!config) {return;}
+    dispatch(setConfig(config));
+  }, [config, dispatch]);
+  return null;
+};
+
 export const ReduxWrapper: React.FC<ChatWrapperProps> = React.memo(
   ({...props}) => {
     const memoizedConfig = useMemo(() => {
@@ -57,6 +73,7 @@ export const ReduxWrapper: React.FC<ChatWrapperProps> = React.memo(
 
     return (
       <Provider store={store}>
+        <ConfigEnabler config={memoizedConfig} />
         <SafeAreaProvider>
           {ownKeyboardHandling ? (
             <KeyboardProvider>{tree}</KeyboardProvider>

package/src/components/MainComponents/RoomList.tsx

@@ -13,8 +13,8 @@ import {
   FlatList,
   Pressable,
   Animated,
-  NativeScrollEvent,
-  NativeSyntheticEvent,
+  Text,
+  TouchableOpacity,
 } from 'react-native';
 import { IRoom } from '../../types/types';
 import { SearchInput } from '../InputComponents/Search';
@@ -35,42 +35,6 @@ 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,
@@ -83,12 +47,9 @@ 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;
@@ -159,124 +120,6 @@ 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();
@@ -314,33 +157,6 @@ 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 && (
@@ -364,46 +180,39 @@ const RoomList: React.FC<RoomListProps> = ({
           <>
             <View style={styles.scrollContainer}>
               <HeaderRoomList setDrawerOpen={toggleDrawer} />
-              <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}
+              {/* 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>
+              <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}
@@ -429,7 +238,7 @@ const styles = StyleSheet.create({
     width: '100%',
     height: '100%',
     flex: 1,
-    backgroundColor: LIST_BACKGROUND,
+    backgroundColor: '#fff',
   },
   scrollContainer: {
     flexGrow: 1,
@@ -440,27 +249,21 @@ 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.
+    // but its magnifier. As a row it resolves to width, which is what it
+    // meant back when the field was a list-header child.
     flexDirection: 'row',
     paddingTop: 8,
-    backgroundColor: 'transparent',
-  },
-  searchField: {
-    flexDirection: 'row',
-    flex: 1,
+    paddingHorizontal: 16,
+    backgroundColor: '#FAFAFA',
   },
   chatList: {
     flex: 1,
     paddingHorizontal: 16,
-    backgroundColor: LIST_BACKGROUND,
+    backgroundColor: '#FAFAFA',
   },
 });