@kesha-antonov/react-native-chat 5.0.0 → 6.0.0

package/lib/ChatList/index.js

@@ -0,0 +1,1301 @@
+import { c as _c } from "react/compiler-runtime";
+import React, { useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { Alert, BackHandler, Pressable, StyleSheet, Text, TextInput, useColorScheme, View } from 'react-native';
+import { GestureHandlerRootView, Touchable } from 'react-native-gesture-handler';
+import Animated, { Easing, FadeIn, FadeOut, LinearTransition, useAnimatedScrollHandler, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
+import { SafeAreaInsetsContext } from 'react-native-safe-area-context';
+import { ChatContext } from '../ChatContext';
+import { impactHaptic } from '../components/haptics';
+import { Icon } from '../components/Icon';
+import { normalizeColorScheme } from '../hooks/useColorScheme';
+import { formatLabel, resolveLabels } from '../i18n';
+import { isRTLLocale } from '../rtl';
+import { resolveTheme } from '../Theme';
+import { ChatListAvatar } from './ChatListAvatar';
+import { CHAT_LIST_ROW_HEIGHT, ChatListCell } from './ChatListCell';
+import { ChatListShimmer } from './ChatListShimmer';
+import { matchesChatQuery, sortChats } from './utils';
+export * from './types';
+export { ChatListAvatar } from './ChatListAvatar';
+export { ChatListCell, CHAT_LIST_ROW_HEIGHT } from './ChatListCell';
+export { ChatListShimmer } from './ChatListShimmer';
+export { formatChatListDate, getChatPreview, getInitials, matchesChatQuery, sortChats } from './utils';
+export { useChatList } from './useChatList';
+
+/** Rows move over 250ms on bezier(0.199, 0.011, 0.279, 0.91). */
+const LIST_TRANSITION = LinearTransition.duration(250).easing(Easing.bezier(0.199, 0.011, 0.279, 0.91));
+/** The new-chat button hides and shows over 380ms on an ease-out-quint curve... */
+const FAB_TIMING = {
+  duration: 380,
+  easing: Easing.bezier(0.23, 1, 0.32, 1)
+};
+/** ...moving its size, its 14 margin and 40 more. */
+const FAB_SIZE = 48;
+const FAB_HIDDEN_OFFSET = FAB_SIZE + 14 + 40;
+const HEADER_HEIGHT = 56;
+const ARCHIVE_ROW_ID = '__chat-list-archive__';
+const isArchiveRow = row => row.id === ARCHIVE_ROW_ID;
+
+/**
+ * A list of chats with everything a messenger's main screen has: a header with search and a
+ * selection bar (pin, mute, archive, delete), an "Archived Chats" folder, swipe to archive,
+ * pinned chats you can drag into order, unread counters, typing and drafts, a loading
+ * placeholder and a new-chat button. Feed it your chats and wire the callbacks to your backend.
+ */
+export function ChatList(props) {
+  const $ = _c(36);
+  const {
+    theme,
+    darkTheme,
+    colorScheme: colorSchemeProp,
+    locale,
+    labels,
+    icons
+  } = props;
+  const systemColorScheme = useColorScheme();
+  const t0 = colorSchemeProp !== undefined ? colorSchemeProp : systemColorScheme;
+  let t1;
+  if ($[0] !== t0) {
+    t1 = normalizeColorScheme(t0);
+    $[0] = t0;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const colorScheme = t1;
+  let t2;
+  if ($[2] !== colorScheme || $[3] !== darkTheme || $[4] !== theme) {
+    t2 = resolveTheme(colorScheme, theme, darkTheme);
+    $[2] = colorScheme;
+    $[3] = darkTheme;
+    $[4] = theme;
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  const resolvedTheme = t2;
+  let t3;
+  if ($[6] !== labels || $[7] !== locale) {
+    t3 = resolveLabels(locale, labels);
+    $[6] = labels;
+    $[7] = locale;
+    $[8] = t3;
+  } else {
+    t3 = $[8];
+  }
+  const resolvedLabels = t3;
+  let t4;
+  if ($[9] !== locale) {
+    t4 = isRTLLocale(locale);
+    $[9] = locale;
+    $[10] = t4;
+  } else {
+    t4 = $[10];
+  }
+  const isRTL = t4;
+  let t5;
+  if ($[11] !== locale) {
+    t5 = () => locale ?? "en";
+    $[11] = locale;
+    $[12] = t5;
+  } else {
+    t5 = $[12];
+  }
+  let t6;
+  if ($[13] !== isRTL) {
+    t6 = () => isRTL;
+    $[13] = isRTL;
+    $[14] = t6;
+  } else {
+    t6 = $[14];
+  }
+  let t7;
+  if ($[15] !== colorScheme) {
+    t7 = () => colorScheme;
+    $[15] = colorScheme;
+    $[16] = t7;
+  } else {
+    t7 = $[16];
+  }
+  let t8;
+  if ($[17] !== resolvedTheme) {
+    t8 = () => resolvedTheme;
+    $[17] = resolvedTheme;
+    $[18] = t8;
+  } else {
+    t8 = $[18];
+  }
+  let t9;
+  if ($[19] !== icons) {
+    t9 = () => icons;
+    $[19] = icons;
+    $[20] = t9;
+  } else {
+    t9 = $[20];
+  }
+  let t10;
+  if ($[21] !== resolvedLabels) {
+    t10 = () => resolvedLabels;
+    $[21] = resolvedLabels;
+    $[22] = t10;
+  } else {
+    t10 = $[22];
+  }
+  let t11;
+  if ($[23] !== t10 || $[24] !== t5 || $[25] !== t6 || $[26] !== t7 || $[27] !== t8 || $[28] !== t9) {
+    t11 = {
+      actionSheet: _temp2,
+      getLocale: t5,
+      getIsRTL: t6,
+      getColorScheme: t7,
+      getTheme: t8,
+      getIcons: t9,
+      getLabels: t10
+    };
+    $[23] = t10;
+    $[24] = t5;
+    $[25] = t6;
+    $[26] = t7;
+    $[27] = t8;
+    $[28] = t9;
+    $[29] = t11;
+  } else {
+    t11 = $[29];
+  }
+  const context = t11;
+  let t12;
+  if ($[30] !== props || $[31] !== resolvedTheme) {
+    t12 = <ChatListContent {...props} resolvedTheme={resolvedTheme} />;
+    $[30] = props;
+    $[31] = resolvedTheme;
+    $[32] = t12;
+  } else {
+    t12 = $[32];
+  }
+  let t13;
+  if ($[33] !== context || $[34] !== t12) {
+    t13 = <GestureHandlerRootView style={styles.fill}><ChatContext.Provider value={context}>{t12}</ChatContext.Provider></GestureHandlerRootView>;
+    $[33] = context;
+    $[34] = t12;
+    $[35] = t13;
+  } else {
+    t13 = $[35];
+  }
+  return t13;
+}
+function _temp2() {
+  return {
+    showActionSheetWithOptions: _temp
+  };
+}
+function _temp() {}
+function ChatListContent(t0) {
+  const $ = _c(170);
+  const {
+    chats,
+    user,
+    onPressChat,
+    onLongPressChat,
+    onPinChats,
+    onMuteChats,
+    onArchiveChats,
+    onDeleteChats,
+    onReorderPinnedChats,
+    onPressNewChat,
+    isDeleteConfirmed: t1,
+    isSwipeEnabled: t2,
+    isLoading: t3,
+    isSortEnabled: t4,
+    isHeaderVisible: t5,
+    title,
+    renderHeaderRight,
+    isTopInsetApplied: t6,
+    isSearchEnabled: t7,
+    filterChat: t8,
+    onSearchChange,
+    isArchiveOpen: isArchiveOpenProp,
+    onArchiveOpenChange,
+    renderChat,
+    renderEmpty,
+    listProps,
+    style,
+    resolvedTheme
+  } = t0;
+  const isDeleteConfirmed = t1 === undefined ? true : t1;
+  const isSwipeEnabled = t2 === undefined ? true : t2;
+  const isLoading = t3 === undefined ? false : t3;
+  const isSortEnabled = t4 === undefined ? true : t4;
+  const isHeaderVisible = t5 === undefined ? true : t5;
+  const isTopInsetApplied = t6 === undefined ? true : t6;
+  const isSearchEnabled = t7 === undefined ? true : t7;
+  const filterChat = t8 === undefined ? matchesChatQuery : t8;
+  const colors = resolvedTheme.chatList;
+  const {
+    getLabels
+  } = useContext(ChatContext);
+  let t9;
+  if ($[0] !== getLabels) {
+    t9 = getLabels();
+    $[0] = getLabels;
+    $[1] = t9;
+  } else {
+    t9 = $[1];
+  }
+  const labels = t9;
+  const insets = useContext(SafeAreaInsetsContext);
+  const topInset = isHeaderVisible && isTopInsetApplied ? insets?.top ?? 0 : 0;
+  const [isArchiveOpenState, setIsArchiveOpenState] = useState(false);
+  const isArchiveOpen = isArchiveOpenProp ?? isArchiveOpenState;
+  let t10;
+  if ($[2] !== onArchiveOpenChange) {
+    t10 = isOpen => {
+      setIsArchiveOpenState(isOpen);
+      onArchiveOpenChange?.(isOpen);
+    };
+    $[2] = onArchiveOpenChange;
+    $[3] = t10;
+  } else {
+    t10 = $[3];
+  }
+  const setIsArchiveOpen = t10;
+  let t11;
+  if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+    t11 = [];
+    $[4] = t11;
+  } else {
+    t11 = $[4];
+  }
+  const [selectedIds, setSelectedIds] = useState(t11);
+  const [query, setQueryState] = useState(null);
+  let t12;
+  if ($[5] !== onSearchChange) {
+    t12 = next => {
+      setQueryState(next);
+      onSearchChange?.(next);
+    };
+    $[5] = onSearchChange;
+    $[6] = t12;
+  } else {
+    t12 = $[6];
+  }
+  const setQuery = t12;
+  const isSelectionMode = selectedIds.length > 0;
+  let t13;
+  if ($[7] !== chats || $[8] !== isSortEnabled) {
+    t13 = isSortEnabled ? sortChats(chats) : chats;
+    $[7] = chats;
+    $[8] = isSortEnabled;
+    $[9] = t13;
+  } else {
+    t13 = $[9];
+  }
+  const sorted = t13;
+  let t14;
+  if ($[10] !== sorted) {
+    t14 = sorted.filter(_temp3);
+    $[10] = sorted;
+    $[11] = t14;
+  } else {
+    t14 = $[11];
+  }
+  const mainChats = t14;
+  let t15;
+  if ($[12] !== sorted) {
+    t15 = sorted.filter(_temp4);
+    $[12] = sorted;
+    $[13] = t15;
+  } else {
+    t15 = $[13];
+  }
+  const archivedChats = t15;
+  let t16;
+  bb0: {
+    const source = isArchiveOpen ? archivedChats : mainChats;
+    if (query) {
+      let t17;
+      if ($[14] !== filterChat || $[15] !== query || $[16] !== source) {
+        let t18;
+        if ($[18] !== filterChat || $[19] !== query) {
+          t18 = chat_1 => filterChat(chat_1, query);
+          $[18] = filterChat;
+          $[19] = query;
+          $[20] = t18;
+        } else {
+          t18 = $[20];
+        }
+        t17 = source.filter(t18);
+        $[14] = filterChat;
+        $[15] = query;
+        $[16] = source;
+        $[17] = t17;
+      } else {
+        t17 = $[17];
+      }
+      t16 = t17;
+      break bb0;
+    }
+    if (!isArchiveOpen && archivedChats.length) {
+      let t17;
+      if ($[21] === Symbol.for("react.memo_cache_sentinel")) {
+        t17 = {
+          id: ARCHIVE_ROW_ID
+        };
+        $[21] = t17;
+      } else {
+        t17 = $[21];
+      }
+      let t18;
+      if ($[22] !== source) {
+        t18 = [t17, ...source];
+        $[22] = source;
+        $[23] = t18;
+      } else {
+        t18 = $[23];
+      }
+      t16 = t18;
+      break bb0;
+    }
+    t16 = source;
+  }
+  const rows = t16;
+  let t17;
+  let t18;
+  if ($[24] !== chats) {
+    t17 = () => {
+      setSelectedIds(ids => {
+        const kept = ids.filter(id => chats.some(chat_2 => chat_2.id === id));
+        return kept.length === ids.length ? ids : kept;
+      });
+    };
+    t18 = [chats];
+    $[24] = chats;
+    $[25] = t17;
+    $[26] = t18;
+  } else {
+    t17 = $[25];
+    t18 = $[26];
+  }
+  useEffect(t17, t18);
+  let t19;
+  if ($[27] !== chats || $[28] !== selectedIds) {
+    let t20;
+    if ($[30] !== chats) {
+      t20 = id_0 => chats.find(chat_3 => chat_3.id === id_0);
+      $[30] = chats;
+      $[31] = t20;
+    } else {
+      t20 = $[31];
+    }
+    t19 = selectedIds.map(t20).filter(_temp5);
+    $[27] = chats;
+    $[28] = selectedIds;
+    $[29] = t19;
+  } else {
+    t19 = $[29];
+  }
+  const selectedChats = t19;
+  let t20;
+  if ($[32] === Symbol.for("react.memo_cache_sentinel")) {
+    t20 = () => setSelectedIds([]);
+    $[32] = t20;
+  } else {
+    t20 = $[32];
+  }
+  const clearSelection = t20;
+  let t21;
+  let t22;
+  if ($[33] !== isArchiveOpen || $[34] !== isSelectionMode || $[35] !== query || $[36] !== setIsArchiveOpen || $[37] !== setQuery) {
+    t21 = () => {
+      const subscription = BackHandler.addEventListener("hardwareBackPress", () => {
+        if (isSelectionMode) {
+          clearSelection();
+        } else {
+          if (query !== null) {
+            setQuery(null);
+          } else {
+            if (isArchiveOpen) {
+              setIsArchiveOpen(false);
+            } else {
+              return false;
+            }
+          }
+        }
+        return true;
+      });
+      return () => subscription.remove();
+    };
+    t22 = [isSelectionMode, query, isArchiveOpen, clearSelection, setQuery, setIsArchiveOpen];
+    $[33] = isArchiveOpen;
+    $[34] = isSelectionMode;
+    $[35] = query;
+    $[36] = setIsArchiveOpen;
+    $[37] = setQuery;
+    $[38] = t21;
+    $[39] = t22;
+  } else {
+    t21 = $[38];
+    t22 = $[39];
+  }
+  useEffect(t21, t22);
+  let t23;
+  if ($[40] === Symbol.for("react.memo_cache_sentinel")) {
+    t23 = chat_5 => {
+      setSelectedIds(ids_0 => ids_0.includes(chat_5.id) ? ids_0.filter(id_1 => id_1 !== chat_5.id) : [...ids_0, chat_5.id]);
+    };
+    $[40] = t23;
+  } else {
+    t23 = $[40];
+  }
+  const toggleSelected = t23;
+  let t24;
+  if ($[41] !== isSelectionMode || $[42] !== onPressChat) {
+    t24 = chat_6 => {
+      if (isSelectionMode) {
+        toggleSelected(chat_6);
+        return;
+      }
+      onPressChat?.(chat_6);
+    };
+    $[41] = isSelectionMode;
+    $[42] = onPressChat;
+    $[43] = t24;
+  } else {
+    t24 = $[43];
+  }
+  const onPressRow = t24;
+  let t25;
+  if ($[44] !== onLongPressChat) {
+    t25 = chat_7 => {
+      if (onLongPressChat) {
+        onLongPressChat(chat_7);
+        return;
+      }
+      impactHaptic("Medium");
+      toggleSelected(chat_7);
+    };
+    $[44] = onLongPressChat;
+    $[45] = t25;
+  } else {
+    t25 = $[45];
+  }
+  const onLongPressRow = t25;
+  let t26;
+  if ($[46] !== onArchiveChats) {
+    t26 = chat_8 => {
+      onArchiveChats?.([chat_8], !chat_8.isArchived);
+    };
+    $[46] = onArchiveChats;
+    $[47] = t26;
+  } else {
+    t26 = $[47];
+  }
+  const onSwipeRow = t26;
+  let t27;
+  if ($[48] !== mainChats) {
+    t27 = mainChats.filter(_temp6).map(_temp7);
+    $[48] = mainChats;
+    $[49] = t27;
+  } else {
+    t27 = $[49];
+  }
+  const pinnedIds = t27;
+  const canReorder = !!onReorderPinnedChats && !isArchiveOpen && !query;
+  const dragId = useSharedValue("");
+  const dragFrom = useSharedValue(0);
+  const dragY = useSharedValue(0);
+  const isDragActive = useSharedValue(false);
+  let t28;
+  if ($[50] !== dragFrom || $[51] !== dragId || $[52] !== dragY || $[53] !== isDragActive) {
+    t28 = {
+      id: dragId,
+      from: dragFrom,
+      y: dragY,
+      isActive: isDragActive
+    };
+    $[50] = dragFrom;
+    $[51] = dragId;
+    $[52] = dragY;
+    $[53] = isDragActive;
+    $[54] = t28;
+  } else {
+    t28 = $[54];
+  }
+  const drag = t28;
+  const [liftedId, setLiftedId] = useState(null);
+  const [isSettling, setIsSettling] = useState(false);
+  const [dropCount, setDropCount] = useState(0);
+  let t29;
+  if ($[55] !== selectedIds) {
+    t29 = chat_11 => {
+      setLiftedId(String(chat_11.id));
+      setIsSettling(true);
+      if (!selectedIds.includes(chat_11.id)) {
+        impactHaptic("Medium");
+        toggleSelected(chat_11);
+      }
+    };
+    $[55] = selectedIds;
+    $[56] = t29;
+  } else {
+    t29 = $[56];
+  }
+  const onDragStart = t29;
+  let t30;
+  if ($[57] !== onReorderPinnedChats || $[58] !== pinnedIds) {
+    t30 = (chat_12, toIndex) => {
+      const order = pinnedIds.filter(id_2 => id_2 !== chat_12.id);
+      order.splice(toIndex, 0, chat_12.id);
+      if (order.some((id_3, index) => id_3 !== pinnedIds[index])) {
+        onReorderPinnedChats?.(order);
+      }
+      setLiftedId(null);
+      setDropCount(_temp8);
+    };
+    $[57] = onReorderPinnedChats;
+    $[58] = pinnedIds;
+    $[59] = t30;
+  } else {
+    t30 = $[59];
+  }
+  const onDrop = t30;
+  let t31;
+  let t32;
+  if ($[60] !== dragId || $[61] !== dragY || $[62] !== dropCount || $[63] !== isDragActive) {
+    t31 = () => {
+      if (!dropCount) {
+        return;
+      }
+      isDragActive.set(false);
+      dragY.set(0);
+      dragId.set("");
+      const timer = setTimeout(() => setIsSettling(false), 50);
+      return () => clearTimeout(timer);
+    };
+    t32 = [dropCount, isDragActive, dragY, dragId];
+    $[60] = dragId;
+    $[61] = dragY;
+    $[62] = dropCount;
+    $[63] = isDragActive;
+    $[64] = t31;
+    $[65] = t32;
+  } else {
+    t31 = $[64];
+    t32 = $[65];
+  }
+  useLayoutEffect(t31, t32);
+  let t33;
+  if ($[66] !== onDragStart || $[67] !== onDrop) {
+    t33 = {
+      onDragStart,
+      onDrop
+    };
+    $[66] = onDragStart;
+    $[67] = onDrop;
+    $[68] = t33;
+  } else {
+    t33 = $[68];
+  }
+  const dragHandlersRef = useRef(t33);
+  let t34;
+  if ($[69] !== onDragStart || $[70] !== onDrop) {
+    t34 = () => {
+      dragHandlersRef.current = {
+        onDragStart,
+        onDrop
+      };
+    };
+    $[69] = onDragStart;
+    $[70] = onDrop;
+    $[71] = t34;
+  } else {
+    t34 = $[71];
+  }
+  useLayoutEffect(t34);
+  let t35;
+  if ($[72] === Symbol.for("react.memo_cache_sentinel")) {
+    t35 = chat_13 => dragHandlersRef.current.onDragStart(chat_13);
+    $[72] = t35;
+  } else {
+    t35 = $[72];
+  }
+  const stableOnStart = t35;
+  let t36;
+  if ($[73] === Symbol.for("react.memo_cache_sentinel")) {
+    t36 = (chat_14, toIndex_0) => dragHandlersRef.current.onDrop(chat_14, toIndex_0);
+    $[73] = t36;
+  } else {
+    t36 = $[73];
+  }
+  const stableOnDrop = t36;
+  let t37;
+  if ($[74] !== canReorder || $[75] !== drag || $[76] !== pinnedIds) {
+    t37 = chat_15 => {
+      const index_0 = pinnedIds.indexOf(chat_15.id);
+      if (!canReorder || index_0 < 0) {
+        return;
+      }
+      return {
+        index: index_0,
+        count: pinnedIds.length,
+        drag,
+        onStart: stableOnStart,
+        onDrop: stableOnDrop
+      };
+    };
+    $[74] = canReorder;
+    $[75] = drag;
+    $[76] = pinnedIds;
+    $[77] = t37;
+  } else {
+    t37 = $[77];
+  }
+  const reorderFor = t37;
+  let t38;
+  if ($[78] !== selectedChats) {
+    t38 = action => {
+      action(selectedChats);
+      clearSelection();
+    };
+    $[78] = selectedChats;
+    $[79] = t38;
+  } else {
+    t38 = $[79];
+  }
+  const runOnSelection = t38;
+  let t39;
+  if ($[80] !== isDeleteConfirmed || $[81] !== labels || $[82] !== onDeleteChats || $[83] !== runOnSelection || $[84] !== selectedChats.length) {
+    t39 = () => {
+      if (!onDeleteChats) {
+        return;
+      }
+      if (!isDeleteConfirmed) {
+        runOnSelection(onDeleteChats);
+        return;
+      }
+      const count_0 = selectedChats.length;
+      Alert.alert(count_0 === 1 ? labels.chatListDeleteTitle : formatLabel(labels.chatListDeleteManyTitle, {
+        count: count_0
+      }), labels.chatListDeleteMessage, [{
+        text: labels.cancel,
+        style: "cancel"
+      }, {
+        text: labels.actionDelete,
+        style: "destructive",
+        onPress: () => runOnSelection(onDeleteChats)
+      }]);
+    };
+    $[80] = isDeleteConfirmed;
+    $[81] = labels;
+    $[82] = onDeleteChats;
+    $[83] = runOnSelection;
+    $[84] = selectedChats.length;
+    $[85] = t39;
+  } else {
+    t39 = $[85];
+  }
+  const onDeleteSelected = t39;
+  const fabOffset = useSharedValue(0);
+  const lastScrollY = useSharedValue(0);
+  const onScroll = useAnimatedScrollHandler(event => {
+    const y = event.contentOffset.y;
+    const delta = y - lastScrollY.value;
+    lastScrollY.value = y;
+    if (Math.abs(delta) < 2) {
+      return;
+    }
+    const target = delta > 0 && y > CHAT_LIST_ROW_HEIGHT ? FAB_HIDDEN_OFFSET : 0;
+    if (target !== fabOffset.value) {
+      fabOffset.value = withTiming(target, FAB_TIMING);
+    }
+  });
+  const fabStyle = useAnimatedStyle(() => ({
+    transform: [{
+      translateY: fabOffset.value
+    }]
+  }));
+  let t40;
+  if ($[86] !== archivedChats || $[87] !== canReorder || $[88] !== isSelectionMode || $[89] !== isSwipeEnabled || $[90] !== onArchiveChats || $[91] !== onLongPressRow || $[92] !== onPressRow || $[93] !== onSwipeRow || $[94] !== pinnedIds.length || $[95] !== renderChat || $[96] !== reorderFor || $[97] !== rows.length || $[98] !== selectedIds || $[99] !== setIsArchiveOpen || $[100] !== user) {
+    t40 = t41 => {
+      const {
+        item,
+        index: index_1
+      } = t41;
+      if (isArchiveRow(item)) {
+        return <ArchiveRow chats={archivedChats} onPress={() => setIsArchiveOpen(true)} />;
+      }
+      const cellProps = {
+        chat: item,
+        user,
+        isSelected: selectedIds.includes(item.id),
+        isSelectionMode,
+        onPress: onPressRow,
+        onLongPress: onLongPressRow,
+        onSwipe: onArchiveChats && isSwipeEnabled ? onSwipeRow : undefined,
+        isLast: index_1 === rows.length - 1,
+        reorder: reorderFor(item),
+        isReordering: isSelectionMode && canReorder && pinnedIds.length > 1 && !!item.isPinned
+      };
+      return renderChat ? <>{renderChat(cellProps)}</> : <ChatListCell {...cellProps} />;
+    };
+    $[86] = archivedChats;
+    $[87] = canReorder;
+    $[88] = isSelectionMode;
+    $[89] = isSwipeEnabled;
+    $[90] = onArchiveChats;
+    $[91] = onLongPressRow;
+    $[92] = onPressRow;
+    $[93] = onSwipeRow;
+    $[94] = pinnedIds.length;
+    $[95] = renderChat;
+    $[96] = reorderFor;
+    $[97] = rows.length;
+    $[98] = selectedIds;
+    $[99] = setIsArchiveOpen;
+    $[100] = user;
+    $[101] = t40;
+  } else {
+    t40 = $[101];
+  }
+  const renderItem = t40;
+  let t41;
+  if ($[102] !== selectedChats) {
+    t41 = selectedChats.length > 0 && selectedChats.every(_temp9);
+    $[102] = selectedChats;
+    $[103] = t41;
+  } else {
+    t41 = $[103];
+  }
+  const isAllPinned = t41;
+  let t42;
+  if ($[104] !== selectedChats) {
+    t42 = selectedChats.length > 0 && selectedChats.every(_temp0);
+    $[104] = selectedChats;
+    $[105] = t42;
+  } else {
+    t42 = $[105];
+  }
+  const isAllMuted = t42;
+  const headerTitle = isArchiveOpen ? labels.chatListArchived : title ?? labels.chatListTitle;
+  let t43;
+  if ($[106] !== colors.message || $[107] !== labels || $[108] !== query || $[109] !== renderEmpty) {
+    t43 = renderEmpty ? <>{renderEmpty(!!query)}</> : <Text style={[styles.empty, {
+      color: colors.message
+    }]}>{query ? labels.chatListNoResults : labels.chatListEmpty}</Text>;
+    $[106] = colors.message;
+    $[107] = labels;
+    $[108] = query;
+    $[109] = renderEmpty;
+    $[110] = t43;
+  } else {
+    t43 = $[110];
+  }
+  const empty = t43;
+  let t44;
+  if ($[111] !== colors.background) {
+    t44 = {
+      backgroundColor: colors.background
+    };
+    $[111] = colors.background;
+    $[112] = t44;
+  } else {
+    t44 = $[112];
+  }
+  let t45;
+  if ($[113] !== style || $[114] !== t44) {
+    t45 = [styles.fill, t44, style];
+    $[113] = style;
+    $[114] = t44;
+    $[115] = t45;
+  } else {
+    t45 = $[115];
+  }
+  let t46;
+  if ($[116] !== colors.headerBackground || $[117] !== colors.headerText || $[118] !== colors.message || $[119] !== headerTitle || $[120] !== isAllMuted || $[121] !== isAllPinned || $[122] !== isArchiveOpen || $[123] !== isHeaderVisible || $[124] !== isSearchEnabled || $[125] !== isSelectionMode || $[126] !== labels || $[127] !== onArchiveChats || $[128] !== onDeleteChats || $[129] !== onDeleteSelected || $[130] !== onMuteChats || $[131] !== onPinChats || $[132] !== query || $[133] !== renderHeaderRight || $[134] !== runOnSelection || $[135] !== selectedIds.length || $[136] !== setIsArchiveOpen || $[137] !== setQuery || $[138] !== topInset) {
+    t46 = isHeaderVisible && <View style={[styles.header, {
+      paddingTop: topInset,
+      backgroundColor: colors.headerBackground
+    }]}><View style={styles.headerBar}>{isSelectionMode ? <Animated.View key="selection" entering={FadeIn.duration(150)} exiting={FadeOut.duration(150)} style={styles.headerContent}><HeaderButton icon="close" color={colors.headerText} onPress={clearSelection} label={labels.cancelSelection} /><Text style={[styles.headerTitle, styles.selectionCount, {
+            color: colors.headerText
+          }]}>{selectedIds.length}</Text><View style={styles.spacer} />{onPinChats && !isArchiveOpen && <HeaderButton icon={isAllPinned ? "pinOff" : "pushpin"} color={colors.headerText} label={isAllPinned ? labels.actionUnpin : labels.actionPin} onPress={() => runOnSelection(selection => onPinChats(selection, !isAllPinned))} />}{onMuteChats && <HeaderButton icon={isAllMuted ? "unmute" : "mute"} color={colors.headerText} label={isAllMuted ? labels.chatListUnmute : labels.chatListMute} onPress={() => runOnSelection(selection_0 => onMuteChats(selection_0, !isAllMuted))} />}{onArchiveChats && <HeaderButton icon={isArchiveOpen ? "unarchive" : "archive"} color={colors.headerText} label={isArchiveOpen ? labels.chatListUnarchive : labels.chatListArchive} onPress={() => runOnSelection(selection_1 => onArchiveChats(selection_1, !isArchiveOpen))} />}{onDeleteChats && <HeaderButton icon="trash" color={colors.headerText} label={labels.actionDelete} onPress={onDeleteSelected} />}</Animated.View> : query !== null ? <Animated.View key="search" entering={FadeIn.duration(150)} exiting={FadeOut.duration(150)} style={styles.headerContent}><HeaderButton icon="arrowLeft" color={colors.headerText} onPress={() => setQuery(null)} label={labels.chatListBack} /><TextInput autoFocus={true} value={query} onChangeText={setQuery} placeholder={labels.chatListSearch} placeholderTextColor={colors.message} style={[styles.searchInput, {
+            color: colors.headerText
+          }]} returnKeyType="search" /></Animated.View> : <Animated.View key={isArchiveOpen ? "archive" : "main"} entering={FadeIn.duration(150)} exiting={FadeOut.duration(150)} style={styles.headerContent}>{isArchiveOpen && <HeaderButton icon="arrowLeft" color={colors.headerText} onPress={() => setIsArchiveOpen(false)} label={labels.chatListBack} />}<Text style={[styles.headerTitle, !isArchiveOpen && styles.headerTitleStart, {
+            color: colors.headerText
+          }]} numberOfLines={1}>{headerTitle}</Text><View style={styles.spacer} />{renderHeaderRight?.()}{isSearchEnabled && <HeaderButton icon="search" color={colors.headerText} onPress={() => setQuery("")} label={labels.chatListSearch} />}</Animated.View>}</View></View>;
+    $[116] = colors.headerBackground;
+    $[117] = colors.headerText;
+    $[118] = colors.message;
+    $[119] = headerTitle;
+    $[120] = isAllMuted;
+    $[121] = isAllPinned;
+    $[122] = isArchiveOpen;
+    $[123] = isHeaderVisible;
+    $[124] = isSearchEnabled;
+    $[125] = isSelectionMode;
+    $[126] = labels;
+    $[127] = onArchiveChats;
+    $[128] = onDeleteChats;
+    $[129] = onDeleteSelected;
+    $[130] = onMuteChats;
+    $[131] = onPinChats;
+    $[132] = query;
+    $[133] = renderHeaderRight;
+    $[134] = runOnSelection;
+    $[135] = selectedIds.length;
+    $[136] = setIsArchiveOpen;
+    $[137] = setQuery;
+    $[138] = topInset;
+    $[139] = t46;
+  } else {
+    t46 = $[139];
+  }
+  const t47 = isLoading ? EMPTY_ROWS : rows;
+  const t48 = isSettling ? undefined : LIST_TRANSITION;
+  let t49;
+  if ($[140] !== liftedId) {
+    t49 = t50 => {
+      const {
+        item: item_1
+      } = t50;
+      return String(item_1.id) === liftedId ? styles.liftedCell : undefined;
+    };
+    $[140] = liftedId;
+    $[141] = t49;
+  } else {
+    t49 = $[141];
+  }
+  const t50 = onPressNewChat ? styles.listContentWithFab : undefined;
+  const t51 = isLoading ? undefined : empty;
+  const t52 = listProps;
+  let t53;
+  if ($[142] !== liftedId || $[143] !== onScroll || $[144] !== renderItem || $[145] !== t47 || $[146] !== t48 || $[147] !== t49 || $[148] !== t50 || $[149] !== t51 || $[150] !== t52) {
+    t53 = <Animated.FlatList data={t47} keyExtractor={_temp1} renderItem={renderItem} itemLayoutAnimation={t48} extraData={liftedId} CellRendererComponentStyle={t49} onScroll={onScroll} scrollEventThrottle={16} keyboardShouldPersistTaps="handled" contentContainerStyle={t50} ListEmptyComponent={t51} {...t52} />;
+    $[142] = liftedId;
+    $[143] = onScroll;
+    $[144] = renderItem;
+    $[145] = t47;
+    $[146] = t48;
+    $[147] = t49;
+    $[148] = t50;
+    $[149] = t51;
+    $[150] = t52;
+    $[151] = t53;
+  } else {
+    t53 = $[151];
+  }
+  let t54;
+  if ($[152] !== isLoading) {
+    t54 = isLoading && <Animated.View exiting={FadeOut.duration(150)} style={StyleSheet.absoluteFill} pointerEvents="none"><ChatListShimmer /></Animated.View>;
+    $[152] = isLoading;
+    $[153] = t54;
+  } else {
+    t54 = $[153];
+  }
+  let t55;
+  if ($[154] !== t53 || $[155] !== t54) {
+    t55 = <View style={styles.fill}>{t53}{t54}</View>;
+    $[154] = t53;
+    $[155] = t54;
+    $[156] = t55;
+  } else {
+    t55 = $[156];
+  }
+  let t56;
+  if ($[157] !== colors.fab || $[158] !== colors.fabIcon || $[159] !== fabStyle || $[160] !== isArchiveOpen || $[161] !== isSelectionMode || $[162] !== labels || $[163] !== onPressNewChat) {
+    t56 = onPressNewChat && !isArchiveOpen && !isSelectionMode && <Animated.View entering={FadeIn.duration(200)} exiting={FadeOut.duration(200)} style={[styles.fabWrap, fabStyle]}><Touchable style={[styles.fab, {
+        backgroundColor: colors.fab
+      }]} activeScale={0.9} onPress={onPressNewChat} accessibilityRole="button" accessibilityLabel={labels.chatListNewChat}><Icon name="pencil" size={24} color={colors.fabIcon} fallback={<Text style={{
+          color: colors.fabIcon
+        }}>+</Text>} /></Touchable></Animated.View>;
+    $[157] = colors.fab;
+    $[158] = colors.fabIcon;
+    $[159] = fabStyle;
+    $[160] = isArchiveOpen;
+    $[161] = isSelectionMode;
+    $[162] = labels;
+    $[163] = onPressNewChat;
+    $[164] = t56;
+  } else {
+    t56 = $[164];
+  }
+  let t57;
+  if ($[165] !== t45 || $[166] !== t46 || $[167] !== t55 || $[168] !== t56) {
+    t57 = <View style={t45}>{t46}{t55}{t56}</View>;
+    $[165] = t45;
+    $[166] = t46;
+    $[167] = t55;
+    $[168] = t56;
+    $[169] = t57;
+  } else {
+    t57 = $[169];
+  }
+  return t57;
+}
+function _temp1(item_0) {
+  return String(item_0.id);
+}
+function _temp0(chat_17) {
+  return chat_17.isMuted;
+}
+function _temp9(chat_16) {
+  return chat_16.isPinned;
+}
+function _temp8(count) {
+  return count + 1;
+}
+function _temp7(chat_10) {
+  return chat_10.id;
+}
+function _temp6(chat_9) {
+  return chat_9.isPinned;
+}
+function _temp5(chat_4) {
+  return !!chat_4;
+}
+function _temp4(chat_0) {
+  return chat_0.isArchived;
+}
+function _temp3(chat) {
+  return !chat.isArchived;
+}
+function HeaderButton(t0) {
+  const $ = _c(15);
+  const {
+    icon,
+    color,
+    label,
+    onPress
+  } = t0;
+  let t1;
+  if ($[0] !== color) {
+    t1 = {
+      color
+    };
+    $[0] = color;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  let t2;
+  if ($[2] !== label) {
+    t2 = label.slice(0, 1);
+    $[2] = label;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  let t3;
+  if ($[4] !== t1 || $[5] !== t2) {
+    t3 = <Text style={t1}>{t2}</Text>;
+    $[4] = t1;
+    $[5] = t2;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  let t4;
+  if ($[7] !== color || $[8] !== icon || $[9] !== t3) {
+    t4 = <Icon name={icon} size={24} color={color} fallback={t3} />;
+    $[7] = color;
+    $[8] = icon;
+    $[9] = t3;
+    $[10] = t4;
+  } else {
+    t4 = $[10];
+  }
+  let t5;
+  if ($[11] !== label || $[12] !== onPress || $[13] !== t4) {
+    t5 = <Pressable onPress={onPress} hitSlop={4} style={styles.headerButton} accessibilityRole="button" accessibilityLabel={label}>{t4}</Pressable>;
+    $[11] = label;
+    $[12] = onPress;
+    $[13] = t4;
+    $[14] = t5;
+  } else {
+    t5 = $[14];
+  }
+  return t5;
+}
+
+/** The "Archived Chats" folder row: a grey archive avatar and the names inside. */
+function ArchiveRow(t0) {
+  const $ = _c(40);
+  const {
+    chats,
+    onPress
+  } = t0;
+  const {
+    getTheme,
+    getLabels
+  } = useContext(ChatContext);
+  let t1;
+  if ($[0] !== getTheme) {
+    t1 = getTheme();
+    $[0] = getTheme;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const colors = t1.chatList;
+  let t2;
+  if ($[2] !== getLabels) {
+    t2 = getLabels();
+    $[2] = getLabels;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  const labels = t2;
+  const unread = chats.reduce(_temp10, 0);
+  let t3;
+  if ($[4] !== colors.background) {
+    t3 = [styles.archiveRow, {
+      backgroundColor: colors.background
+    }];
+    $[4] = colors.background;
+    $[5] = t3;
+  } else {
+    t3 = $[5];
+  }
+  const t4 = colors.pressed;
+  const t5 = labels.chatListArchived;
+  let t6;
+  if ($[6] !== labels.chatListArchived) {
+    t6 = <View style={styles.archiveAvatar}><ChatListAvatar id="archive" title={labels.chatListArchived} size={52} isArchive={true} /></View>;
+    $[6] = labels.chatListArchived;
+    $[7] = t6;
+  } else {
+    t6 = $[7];
+  }
+  let t7;
+  if ($[8] !== colors.name) {
+    t7 = [styles.archiveTitle, {
+      color: colors.name
+    }];
+    $[8] = colors.name;
+    $[9] = t7;
+  } else {
+    t7 = $[9];
+  }
+  let t8;
+  if ($[10] !== labels.chatListArchived || $[11] !== t7) {
+    t8 = <Text style={t7} numberOfLines={1}>{labels.chatListArchived}</Text>;
+    $[10] = labels.chatListArchived;
+    $[11] = t7;
+    $[12] = t8;
+  } else {
+    t8 = $[12];
+  }
+  let t9;
+  if ($[13] !== colors.message) {
+    t9 = [styles.archivePreview, {
+      color: colors.message
+    }];
+    $[13] = colors.message;
+    $[14] = t9;
+  } else {
+    t9 = $[14];
+  }
+  let t10;
+  if ($[15] !== chats) {
+    t10 = chats.map(_temp11).join(", ");
+    $[15] = chats;
+    $[16] = t10;
+  } else {
+    t10 = $[16];
+  }
+  let t11;
+  if ($[17] !== t10 || $[18] !== t9) {
+    t11 = <Text style={t9} numberOfLines={1}>{t10}</Text>;
+    $[17] = t10;
+    $[18] = t9;
+    $[19] = t11;
+  } else {
+    t11 = $[19];
+  }
+  let t12;
+  if ($[20] !== colors.badgeMuted || $[21] !== colors.badgeText || $[22] !== unread) {
+    t12 = unread > 0 && <View style={[styles.archiveBadge, {
+      backgroundColor: colors.badgeMuted
+    }]}><Text style={[styles.archiveBadgeText, {
+        color: colors.badgeText
+      }]}>{unread}</Text></View>;
+    $[20] = colors.badgeMuted;
+    $[21] = colors.badgeText;
+    $[22] = unread;
+    $[23] = t12;
+  } else {
+    t12 = $[23];
+  }
+  let t13;
+  if ($[24] !== t11 || $[25] !== t12) {
+    t13 = <View style={styles.archiveBottom}>{t11}{t12}</View>;
+    $[24] = t11;
+    $[25] = t12;
+    $[26] = t13;
+  } else {
+    t13 = $[26];
+  }
+  let t14;
+  if ($[27] !== t13 || $[28] !== t8) {
+    t14 = <View style={styles.archiveContent}>{t8}{t13}</View>;
+    $[27] = t13;
+    $[28] = t8;
+    $[29] = t14;
+  } else {
+    t14 = $[29];
+  }
+  let t15;
+  if ($[30] !== colors.divider) {
+    t15 = <View style={[styles.archiveDivider, {
+      backgroundColor: colors.divider
+    }]} />;
+    $[30] = colors.divider;
+    $[31] = t15;
+  } else {
+    t15 = $[31];
+  }
+  let t16;
+  if ($[32] !== colors.pressed || $[33] !== labels.chatListArchived || $[34] !== onPress || $[35] !== t14 || $[36] !== t15 || $[37] !== t3 || $[38] !== t6) {
+    t16 = <Touchable style={t3} underlayColor={t4} activeUnderlayOpacity={1} onPress={onPress} accessibilityRole="button" accessibilityLabel={t5}>{t6}{t14}{t15}</Touchable>;
+    $[32] = colors.pressed;
+    $[33] = labels.chatListArchived;
+    $[34] = onPress;
+    $[35] = t14;
+    $[36] = t15;
+    $[37] = t3;
+    $[38] = t6;
+    $[39] = t16;
+  } else {
+    t16 = $[39];
+  }
+  return t16;
+}
+function _temp11(chat_0) {
+  return chat_0.title;
+}
+function _temp10(sum, chat) {
+  return sum + (chat.unreadCount ?? 0);
+}
+const EMPTY_ROWS = [];
+const styles = StyleSheet.create({
+  fill: {
+    flex: 1
+  },
+  liftedCell: {
+    zIndex: 1
+  },
+  header: {
+    zIndex: 1
+  },
+  headerBar: {
+    height: HEADER_HEIGHT
+  },
+  headerContent: {
+    ...StyleSheet.absoluteFill,
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 4
+  },
+  headerButton: {
+    width: 48,
+    height: 48,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  headerTitle: {
+    flexShrink: 1,
+    fontSize: 20,
+    fontWeight: '500',
+    marginStart: 8
+  },
+  headerTitleStart: {
+    marginStart: 14
+  },
+  selectionCount: {
+    fontSize: 18,
+    marginStart: 14
+  },
+  spacer: {
+    flex: 1
+  },
+  searchInput: {
+    flex: 1,
+    fontSize: 18,
+    marginStart: 8,
+    textAlign: 'auto'
+  },
+  listContentWithFab: {
+    paddingBottom: FAB_SIZE + 40
+  },
+  empty: {
+    textAlign: 'center',
+    marginTop: 48,
+    fontSize: 15
+  },
+  // 20 from the end, 14 from the bottom.
+  fabWrap: {
+    position: 'absolute',
+    end: 20,
+    bottom: 14
+  },
+  fab: {
+    width: FAB_SIZE,
+    height: FAB_SIZE,
+    borderRadius: FAB_SIZE / 2,
+    alignItems: 'center',
+    justifyContent: 'center',
+    boxShadow: '0 1px 2px rgba(0, 0, 0, 0.2)'
+  },
+  archiveRow: {
+    height: CHAT_LIST_ROW_HEIGHT,
+    flexDirection: 'row'
+  },
+  archiveAvatar: {
+    position: 'absolute',
+    start: 11,
+    top: 9
+  },
+  archiveContent: {
+    flex: 1,
+    marginStart: 76,
+    paddingEnd: 15
+  },
+  archiveTitle: {
+    marginTop: 14,
+    height: 19,
+    fontSize: 16,
+    fontWeight: '500',
+    textAlign: 'left'
+  },
+  archiveBottom: {
+    marginTop: 5,
+    height: 20.666,
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  archivePreview: {
+    flex: 1,
+    fontSize: 15,
+    textAlign: 'left'
+  },
+  archiveBadge: {
+    minWidth: 20.666,
+    height: 20.666,
+    borderRadius: 11.5,
+    paddingHorizontal: 6.333,
+    marginStart: 6,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  archiveBadgeText: {
+    fontSize: 13,
+    fontWeight: '500'
+  },
+  archiveDivider: {
+    position: 'absolute',
+    start: 72,
+    end: 0,
+    bottom: 0,
+    height: StyleSheet.hairlineWidth
+  }
+});
+//# sourceMappingURL=index.js.map