@kesha-antonov/react-native-chat 6.0.1 → 6.1.0

package/lib/ChatHeader.js

@@ -0,0 +1,356 @@
+import { c as _c } from "react/compiler-runtime";
+import React, { useContext, useMemo } from 'react';
+import { Pressable, StyleSheet, Text, useColorScheme, View } from 'react-native';
+import { SafeAreaInsetsContext } from 'react-native-safe-area-context';
+import { ChatContext } from './ChatContext';
+import { ChatListAvatar } from './ChatList/ChatListAvatar';
+import { Icon } from './components/Icon';
+import { TypingStatus } from './components/TypingStatus';
+import { normalizeColorScheme } from './hooks/useColorScheme';
+import { resolveLabels } from './i18n';
+import { isRTLLocale } from './rtl';
+import { resolveTheme } from './Theme';
+const HEADER_HEIGHT = 56;
+const AVATAR_SIZE = 42;
+/**
+ * A chat screen's top bar, as a messenger draws it: back arrow, a 42 avatar, the name in 18 medium
+ * with a 14 status line under it ("online" and "typing" in the accent color), and buttons at the
+ * end. Colors come from `theme.chatList` (`headerBackground`, `headerText`, `headerSubtitle`,
+ * `headerSubtitleActive`), so it matches `ChatList`'s header.
+ */
+export function ChatHeader(props) {
+  const $ = _c(35);
+  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) {
+    t12 = <ChatHeaderContent {...props} />;
+    $[30] = props;
+    $[31] = t12;
+  } else {
+    t12 = $[31];
+  }
+  let t13;
+  if ($[32] !== context || $[33] !== t12) {
+    t13 = <ChatContext.Provider value={context}>{t12}</ChatContext.Provider>;
+    $[32] = context;
+    $[33] = t12;
+    $[34] = t13;
+  } else {
+    t13 = $[34];
+  }
+  return t13;
+}
+function _temp2() {
+  return {
+    showActionSheetWithOptions: _temp
+  };
+}
+function _temp() {}
+function ChatHeaderContent(t0) {
+  const $ = _c(41);
+  const {
+    title,
+    subtitle,
+    isSubtitleActive: t1,
+    typingUsers,
+    typingAction,
+    isGroup: t2,
+    avatar,
+    onBack,
+    onPressTitle,
+    renderRight,
+    renderTitle,
+    isTopInsetApplied: t3,
+    style
+  } = t0;
+  const isSubtitleActive = t1 === undefined ? false : t1;
+  const isGroup = t2 === undefined ? false : t2;
+  const isTopInsetApplied = t3 === undefined ? true : t3;
+  const {
+    getTheme,
+    getLabels
+  } = useContext(ChatContext);
+  let t4;
+  if ($[0] !== getTheme) {
+    t4 = getTheme();
+    $[0] = getTheme;
+    $[1] = t4;
+  } else {
+    t4 = $[1];
+  }
+  const colors = t4.chatList;
+  let t5;
+  if ($[2] !== getLabels) {
+    t5 = getLabels();
+    $[2] = getLabels;
+    $[3] = t5;
+  } else {
+    t5 = $[3];
+  }
+  const labels = t5;
+  const insets = useContext(SafeAreaInsetsContext);
+  const topInset = isTopInsetApplied ? insets?.top ?? 0 : 0;
+  const isTyping = !!typingUsers?.length;
+  let t6;
+  if ($[4] !== colors.headerSubtitle || $[5] !== colors.headerSubtitleActive || $[6] !== colors.headerText || $[7] !== isGroup || $[8] !== isSubtitleActive || $[9] !== isTyping || $[10] !== subtitle || $[11] !== title || $[12] !== typingAction || $[13] !== typingUsers) {
+    t6 = () => <View style={styles.text}><Text style={[styles.title, {
+        color: colors.headerText
+      }]} numberOfLines={1}>{title}</Text>{isTyping ? <TypingStatus users={typingUsers} action={typingAction} isGroup={isGroup} color={colors.headerSubtitleActive} textStyle={styles.subtitle} /> : !!subtitle && <Text style={[styles.subtitle, {
+        color: isSubtitleActive ? colors.headerSubtitleActive : colors.headerSubtitle
+      }]} numberOfLines={1}>{subtitle}</Text>}</View>;
+    $[4] = colors.headerSubtitle;
+    $[5] = colors.headerSubtitleActive;
+    $[6] = colors.headerText;
+    $[7] = isGroup;
+    $[8] = isSubtitleActive;
+    $[9] = isTyping;
+    $[10] = subtitle;
+    $[11] = title;
+    $[12] = typingAction;
+    $[13] = typingUsers;
+    $[14] = t6;
+  } else {
+    t6 = $[14];
+  }
+  const renderText = t6;
+  let t7;
+  if ($[15] !== colors.headerBackground || $[16] !== topInset) {
+    t7 = {
+      paddingTop: topInset,
+      backgroundColor: colors.headerBackground
+    };
+    $[15] = colors.headerBackground;
+    $[16] = topInset;
+    $[17] = t7;
+  } else {
+    t7 = $[17];
+  }
+  let t8;
+  if ($[18] !== style || $[19] !== t7) {
+    t8 = [styles.header, t7, style];
+    $[18] = style;
+    $[19] = t7;
+    $[20] = t8;
+  } else {
+    t8 = $[20];
+  }
+  let t9;
+  if ($[21] !== colors.headerText || $[22] !== labels || $[23] !== onBack) {
+    t9 = onBack ? <Pressable onPress={onBack} hitSlop={4} style={styles.button} accessibilityRole="button" accessibilityLabel={labels.chatListBack}><Icon name="arrowLeft" size={24} color={colors.headerText} fallback={<Text style={{
+        color: colors.headerText
+      }}>{"<"}</Text>} /></Pressable> : <View style={styles.edge} />;
+    $[21] = colors.headerText;
+    $[22] = labels;
+    $[23] = onBack;
+    $[24] = t9;
+  } else {
+    t9 = $[24];
+  }
+  let t10;
+  if ($[25] !== avatar || $[26] !== colors.headerBackground || $[27] !== onPressTitle || $[28] !== renderText || $[29] !== renderTitle || $[30] !== title) {
+    t10 = renderTitle ? <View style={styles.titleArea}>{renderTitle()}</View> : <Pressable onPress={onPressTitle} disabled={!onPressTitle} style={styles.titleArea} accessibilityRole={onPressTitle ? "button" : undefined}>{!!avatar && <View style={styles.avatar}><ChatListAvatar id={avatar.id} title={title} uri={avatar.uri} size={AVATAR_SIZE} ringColor={colors.headerBackground} /></View>}{renderText()}</Pressable>;
+    $[25] = avatar;
+    $[26] = colors.headerBackground;
+    $[27] = onPressTitle;
+    $[28] = renderText;
+    $[29] = renderTitle;
+    $[30] = title;
+    $[31] = t10;
+  } else {
+    t10 = $[31];
+  }
+  let t11;
+  if ($[32] !== renderRight) {
+    t11 = renderRight?.();
+    $[32] = renderRight;
+    $[33] = t11;
+  } else {
+    t11 = $[33];
+  }
+  let t12;
+  if ($[34] !== t10 || $[35] !== t11 || $[36] !== t9) {
+    t12 = <View style={styles.bar}>{t9}{t10}{t11}</View>;
+    $[34] = t10;
+    $[35] = t11;
+    $[36] = t9;
+    $[37] = t12;
+  } else {
+    t12 = $[37];
+  }
+  let t13;
+  if ($[38] !== t12 || $[39] !== t8) {
+    t13 = <View style={t8}>{t12}</View>;
+    $[38] = t12;
+    $[39] = t8;
+    $[40] = t13;
+  } else {
+    t13 = $[40];
+  }
+  return t13;
+}
+const styles = StyleSheet.create({
+  header: {
+    zIndex: 1,
+    boxShadow: '0 0.5px 0 rgba(0, 0, 0, 0.12)'
+  },
+  bar: {
+    height: HEADER_HEIGHT,
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 4
+  },
+  button: {
+    width: 48,
+    height: 48,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  edge: {
+    width: 10
+  },
+  titleArea: {
+    flex: 1,
+    alignSelf: 'stretch',
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  avatar: {
+    marginStart: 4
+  },
+  // The text starts 55 after the avatar's left edge: 42 + 13.
+  text: {
+    flex: 1,
+    marginStart: 13,
+    justifyContent: 'center'
+  },
+  title: {
+    flexShrink: 1,
+    fontSize: 18,
+    fontWeight: '500',
+    textAlign: 'left'
+  },
+  subtitle: {
+    fontSize: 14,
+    marginTop: 1,
+    textAlign: 'left'
+  }
+});
+//# sourceMappingURL=ChatHeader.js.map

package/lib/ChatHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatHeader.js","names":["React","useContext","useMemo","Pressable","StyleSheet","Text","useColorScheme","View","SafeAreaInsetsContext","ChatContext","ChatListAvatar","Icon","TypingStatus","normalizeColorScheme","resolveLabels","isRTLLocale","resolveTheme","HEADER_HEIGHT","AVATAR_SIZE","ChatHeader","props","$","_c","theme","darkTheme","colorScheme","colorSchemeProp","locale","labels","icons","systemColorScheme","t0","undefined","t1","t2","resolvedTheme","t3","resolvedLabels","t4","isRTL","t5","t6","t7","t8","t9","t10","t11","actionSheet","_temp2","getLocale","getIsRTL","getColorScheme","getTheme","getIcons","getLabels","context","t12","t13","showActionSheetWithOptions","_temp","ChatHeaderContent","title","subtitle","isSubtitleActive","typingUsers","typingAction","isGroup","avatar","onBack","onPressTitle","renderRight","renderTitle","isTopInsetApplied","style","colors","chatList","insets","topInset","top","isTyping","length","headerSubtitle","headerSubtitleActive","headerText","styles","text","color","renderText","headerBackground","paddingTop","backgroundColor","header","button","chatListBack","edge","titleArea","id","uri","bar","create","zIndex","boxShadow","height","flexDirection","alignItems","paddingHorizontal","width","justifyContent","flex","alignSelf","marginStart","flexShrink","fontSize","fontWeight","textAlign","marginTop"],"sources":["../src/ChatHeader.tsx"],"sourcesContent":["import React, { ReactNode, useContext, useMemo } from 'react'\nimport { ColorSchemeName, Pressable, StyleProp, StyleSheet, Text, useColorScheme, View, ViewStyle } from 'react-native'\nimport { SafeAreaInsetsContext } from 'react-native-safe-area-context'\n\nimport { ChatContext, IChatContext } from './ChatContext'\nimport { ChatListAvatar } from './ChatList/ChatListAvatar'\nimport { Icon } from './components/Icon'\nimport { TypingAction, TypingStatus } from './components/TypingStatus'\nimport { normalizeColorScheme } from './hooks/useColorScheme'\nimport { ChatLabels, resolveLabels } from './i18n'\nimport { ChatIcons } from './Icons'\nimport { User } from './Models'\nimport { isRTLLocale } from './rtl'\nimport { PartialChatTheme, resolveTheme } from './Theme'\n\nconst HEADER_HEIGHT = 56\nconst AVATAR_SIZE = 42\n\nexport interface ChatHeaderProps {\n  /** The chat's name, on one line. */\n  title: string\n  /** The line under the name: \"online\", \"last seen recently\", \"3 members\"... */\n  subtitle?: string\n  /** Draws the subtitle in the accent color, as for \"online\". */\n  isSubtitleActive?: boolean\n  /** Shown in place of the subtitle while someone types: \"typing\", \"Anna is typing\"... */\n  typingUsers?: User[]\n  typingAction?: TypingAction\n  /** Names the people typing, as a group does. */\n  isGroup?: boolean\n  /** The avatar: a photo, or initials on the chat's color picked by `id`. Hidden without it. */\n  avatar?: { id: string | number, uri?: string }\n  /** Shows the back arrow. */\n  onBack?: () => void\n  /** Makes the avatar and the name a button, e.g. to open the profile. */\n  onPressTitle?: () => void\n  /** Buttons at the end of the bar: a call, a menu. */\n  renderRight?: () => ReactNode\n  /** Replaces the name and the subtitle, e.g. with a search field. */\n  renderTitle?: () => ReactNode\n  /** Pads the bar by the top safe-area inset. Default true; turn off when it sits below the status bar already. */\n  isTopInsetApplied?: boolean\n  style?: StyleProp<ViewStyle>\n  theme?: PartialChatTheme\n  darkTheme?: PartialChatTheme\n  colorScheme?: ColorSchemeName\n  locale?: string\n  labels?: Partial<ChatLabels>\n  icons?: ChatIcons\n}\n\n/**\n * A chat screen's top bar, as a messenger draws it: back arrow, a 42 avatar, the name in 18 medium\n * with a 14 status line under it (\"online\" and \"typing\" in the accent color), and buttons at the\n * end. Colors come from `theme.chatList` (`headerBackground`, `headerText`, `headerSubtitle`,\n * `headerSubtitleActive`), so it matches `ChatList`'s header.\n */\nexport function ChatHeader (props: ChatHeaderProps) {\n  const { theme, darkTheme, colorScheme: colorSchemeProp, locale, labels, icons } = props\n  const systemColorScheme = useColorScheme()\n  const colorScheme = normalizeColorScheme(colorSchemeProp !== undefined ? colorSchemeProp : systemColorScheme)\n  const resolvedTheme = useMemo(() => resolveTheme(colorScheme, theme, darkTheme), [colorScheme, theme, darkTheme])\n  const resolvedLabels = useMemo(() => resolveLabels(locale, labels), [locale, labels])\n  const isRTL = useMemo(() => isRTLLocale(locale), [locale])\n  const context = useMemo<IChatContext>(() => ({\n    actionSheet: () => ({ showActionSheetWithOptions: () => {} }),\n    getLocale: () => locale ?? 'en',\n    getIsRTL: () => isRTL,\n    getColorScheme: () => colorScheme,\n    getTheme: () => resolvedTheme,\n    getIcons: () => icons,\n    getLabels: () => resolvedLabels,\n  }), [locale, isRTL, colorScheme, resolvedTheme, icons, resolvedLabels])\n\n  return (\n    <ChatContext.Provider value={context}>\n      <ChatHeaderContent {...props} />\n    </ChatContext.Provider>\n  )\n}\n\nfunction ChatHeaderContent ({\n  title,\n  subtitle,\n  isSubtitleActive = false,\n  typingUsers,\n  typingAction,\n  isGroup = false,\n  avatar,\n  onBack,\n  onPressTitle,\n  renderRight,\n  renderTitle,\n  isTopInsetApplied = true,\n  style,\n}: ChatHeaderProps) {\n  const { getTheme, getLabels } = useContext(ChatContext)\n  const colors = getTheme!()!.chatList\n  const labels = getLabels!()!\n  const insets = useContext(SafeAreaInsetsContext)\n  const topInset = isTopInsetApplied ? insets?.top ?? 0 : 0\n  const isTyping = !!typingUsers?.length\n\n  const renderText = () => (\n    <View style={styles.text}>\n      <Text style={[styles.title, { color: colors.headerText }]} numberOfLines={1}>{title}</Text>\n      {isTyping\n        ? <TypingStatus users={typingUsers!} action={typingAction} isGroup={isGroup} color={colors.headerSubtitleActive} textStyle={styles.subtitle} />\n        : !!subtitle && (\n          <Text\n            style={[styles.subtitle, { color: isSubtitleActive ? colors.headerSubtitleActive : colors.headerSubtitle }]}\n            numberOfLines={1}\n          >\n            {subtitle}\n          </Text>\n        )}\n    </View>\n  )\n\n  return (\n    <View style={[styles.header, { paddingTop: topInset, backgroundColor: colors.headerBackground }, style]}>\n      <View style={styles.bar}>\n        {onBack\n          ? (\n            <Pressable onPress={onBack} hitSlop={4} style={styles.button} accessibilityRole='button' accessibilityLabel={labels.chatListBack}>\n              <Icon name='arrowLeft' size={24} color={colors.headerText} fallback={<Text style={{ color: colors.headerText }}>{'<'}</Text>} />\n            </Pressable>\n          )\n          : <View style={styles.edge} />}\n        {renderTitle\n          ? <View style={styles.titleArea}>{renderTitle()}</View>\n          : (\n            <Pressable\n              onPress={onPressTitle}\n              disabled={!onPressTitle}\n              style={styles.titleArea}\n              accessibilityRole={onPressTitle ? 'button' : undefined}\n            >\n              {!!avatar && (\n                <View style={styles.avatar}>\n                  <ChatListAvatar id={avatar.id} title={title} uri={avatar.uri} size={AVATAR_SIZE} ringColor={colors.headerBackground} />\n                </View>\n              )}\n              {renderText()}\n            </Pressable>\n          )}\n        {renderRight?.()}\n      </View>\n    </View>\n  )\n}\n\nconst styles = StyleSheet.create({\n  header: {\n    zIndex: 1,\n    boxShadow: '0 0.5px 0 rgba(0, 0, 0, 0.12)',\n  },\n  bar: {\n    height: HEADER_HEIGHT,\n    flexDirection: 'row',\n    alignItems: 'center',\n    paddingHorizontal: 4,\n  },\n  button: {\n    width: 48,\n    height: 48,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  edge: {\n    width: 10,\n  },\n  titleArea: {\n    flex: 1,\n    alignSelf: 'stretch',\n    flexDirection: 'row',\n    alignItems: 'center',\n  },\n  avatar: {\n    marginStart: 4,\n  },\n  // The text starts 55 after the avatar's left edge: 42 + 13.\n  text: {\n    flex: 1,\n    marginStart: 13,\n    justifyContent: 'center',\n  },\n  title: {\n    flexShrink: 1,\n    fontSize: 18,\n    fontWeight: '500',\n    textAlign: 'left',\n  },\n  subtitle: {\n    fontSize: 14,\n    marginTop: 1,\n    textAlign: 'left',\n  },\n})\n"],"mappings":"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","ignoreList":[]}

package/lib/ChatList/ChatListCell.d.ts

@@ -5,7 +5,7 @@ export declare const CHAT_LIST_ROW_HEIGHT = 70;
  * A chat's row: avatar, name, time, the last message (or a draft, or who is typing), the unread
  * counter or pin, a swipe to archive, and dragging when pinned chats can be reordered.
  */
-declare function ChatListCellInner<TChat extends ChatListItem>({ chat, user, isSelected, isSelectionMode, onPress, onLongPress, onSwipe, isLast, reorder, isReordering, }: ChatListCellProps<TChat>): React.JSX.Element;
+declare function ChatListCellInner<TChat extends ChatListItem>({ chat, user, isSelected, isSelectionMode, onPress, onLongPress, onSwipe, isLast, reorder, isReordering, timeFormat, dateFormat, }: ChatListCellProps<TChat>): React.JSX.Element;
 /**
  * A chat's row: avatar, name, time, the last message (or a draft, or who is typing), the unread
  * counter or pin, a swipe to archive, and dragging when pinned chats can be reordered. Rows only

package/lib/ChatList/ChatListCell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatListCell.d.ts","sourceRoot":"","sources":["../../src/ChatList/ChatListCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAA;AAuBxD,OAAO,EAAE,iBAAiB,EAAgB,YAAY,EAAE,MAAM,SAAS,CAAA;AAIvE,eAAO,MAAM,oBAAoB,KAAK,CAAA;AAgCtC;;;GAGG;AACH,iBAAS,iBAAiB,CAAC,KAAK,SAAS,YAAY,EAAG,EACtD,IAAI,EACJ,IAAI,EACJ,UAAU,EACV,eAAe,EACf,OAAO,EACP,WAAW,EACX,OAAO,EACP,MAAM,EACN,OAAO,EACP,YAAoB,GACrB,EAAE,iBAAiB,CAAC,KAAK,CAAC,qBAkR1B;AAmBD;;;;GAIG;AACH,eAAO,MAAM,YAAY,EAAsD,OAAO,iBAAiB,CAAA"}
+{"version":3,"file":"ChatListCell.d.ts","sourceRoot":"","sources":["../../src/ChatList/ChatListCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAA;AAuBxD,OAAO,EAAE,iBAAiB,EAAgB,YAAY,EAAE,MAAM,SAAS,CAAA;AAIvE,eAAO,MAAM,oBAAoB,KAAK,CAAA;AAgCtC;;;GAGG;AACH,iBAAS,iBAAiB,CAAC,KAAK,SAAS,YAAY,EAAG,EACtD,IAAI,EACJ,IAAI,EACJ,UAAU,EACV,eAAe,EACf,OAAO,EACP,WAAW,EACX,OAAO,EACP,MAAM,EACN,OAAO,EACP,YAAoB,EACpB,UAAU,EACV,UAAU,GACX,EAAE,iBAAiB,CAAC,KAAK,CAAC,qBAgS1B;AAqBD;;;;GAIG;AACH,eAAO,MAAM,YAAY,EAAsD,OAAO,iBAAiB,CAAA"}

package/lib/ChatList/ChatListCell.js

@@ -75,7 +75,9 @@ function ChatListCellInner({
   onSwipe,
   isLast,
   reorder,
-  isReordering = false
+  isReordering = false,
+  timeFormat,
+  dateFormat
 }) {
   // The gesture callbacks read shared values; React Compiler would memoize them into render.
   'use no memo';
@@ -90,6 +92,13 @@ function ChatListCellInner({
     width
   } = useWindowDimensions();
 
+  // The worklets below call these JS functions with no arguments. Handing `chat` itself to a worklet
+  // would copy the whole item to the UI thread, which fails on anything it cannot copy (a Date in
+  // `lastMessage.createdAt`, an app's own objects) - so the row's chat stays here, on the JS side.
+  const swipeChat = () => onSwipe?.(chat);
+  const startDrag = () => reorder?.onStart?.(chat);
+  const dropChat = to => reorder?.onDrop?.(chat, to);
+
   // The row swipes towards the start edge, revealing the action at the end.
   const direction = I18nManager.isRTL ? 1 : -1;
   const reveal = useSharedValue(0);
@@ -120,7 +129,7 @@ function ChatListCellInner({
       const isFling = velocity > SWIPE_ESCAPE_VELOCITY;
       if (onSwipe && (isPast || isFling)) {
         rowOffset.value = withTiming(width * direction, SWIPE_CANCEL, isFinished => {
-          if (isFinished) runOnJS(onSwipe)(chat);
+          if (isFinished) runOnJS(swipeChat)();
         });
         return;
       }
@@ -145,7 +154,7 @@ function ChatListCellInner({
       drag.from.set(index);
       drag.y.set(0);
       drag.isActive.set(true);
-      if (onDragStart) runOnJS(onDragStart)(chat);
+      if (onDragStart) runOnJS(startDrag)();
     },
     onUpdate: event => {
       if (!drag) return;
@@ -156,9 +165,9 @@ function ChatListCellInner({
     },
     onDeactivate: () => {
       if (!drag || drag.id.value !== chatKey) return;
-      const to = hoverIndex(drag, count);
-      drag.y.set(withTiming((to - index) * ROW_HEIGHT, SETTLE, () => {
-        if (onDrop) runOnJS(onDrop)(chat, to);
+      const to_0 = hoverIndex(drag, count);
+      drag.y.set(withTiming((to_0 - index) * ROW_HEIGHT, SETTLE, () => {
+        if (onDrop) runOnJS(dropChat)(to_0);
       }));
     }
   });
@@ -170,8 +179,8 @@ function ChatListCellInner({
     let target = 0;
     if (drag && drag.isActive.value && drag.id.value !== chatKey) {
       const from = drag.from.value;
-      const to_0 = hoverIndex(drag, count);
-      if (from < index && index <= to_0) target = -ROW_HEIGHT;else if (to_0 <= index && index < from) target = ROW_HEIGHT;
+      const to_1 = hoverIndex(drag, count);
+      if (from < index && index <= to_1) target = -ROW_HEIGHT;else if (to_1 <= index && index < from) target = ROW_HEIGHT;
     }
     if (target === lastTarget.value) return;
     lastTarget.value = target;
@@ -271,11 +280,20 @@ function ChatListCellInner({
                     </View>}
                 </View>
                 {isOutgoing && !chat.draft && <View style={styles.checks}>
-                    <Icon name={statusIcon} size={16} color={colors.check} fallback={null} />
+                    {lastMessage?.isFailed
+                // Not sent: the bubble's red badge, not a check that reads as delivered
+                ? <View testID='chat-list-failed-badge' style={[styles.failed, {
+                  backgroundColor: theme.colors.error
+                }]}>
+                          <Text style={styles.failedText} allowFontScaling={false}>!</Text>
+                        </View> : <Icon name={statusIcon} size={16} color={colors.check} fallback={null} />}
                   </View>}
                 {lastMessage?.createdAt != null && <Text style={[styles.time, {
                 color: colors.date
-              }]}>{formatChatListDate(lastMessage.createdAt, getLocale())}</Text>}
+              }]}>{formatChatListDate(lastMessage.createdAt, getLocale(), {
+                  timeFormat,
+                  dateFormat
+                })}</Text>}
               </View>
 
               <View style={styles.bottomLine}>
@@ -337,7 +355,7 @@ function ChatListCellInner({
 
 /** The drag props are rebuilt with the list; what matters is what they say. */
 const isSameReorder = (a, b) => a === b || !!a && !!b && a.index === b.index && a.count === b.count && a.drag === b.drag && a.onStart === b.onStart && a.onDrop === b.onDrop;
-const arePropsEqual = (previous, next) => previous.chat === next.chat && previous.user === next.user && previous.isSelected === next.isSelected && previous.isSelectionMode === next.isSelectionMode && previous.onPress === next.onPress && previous.onLongPress === next.onLongPress && previous.onSwipe === next.onSwipe && previous.isLast === next.isLast && previous.isReordering === next.isReordering && isSameReorder(previous.reorder, next.reorder);
+const arePropsEqual = (previous, next) => previous.chat === next.chat && previous.user === next.user && previous.isSelected === next.isSelected && previous.isSelectionMode === next.isSelectionMode && previous.onPress === next.onPress && previous.onLongPress === next.onLongPress && previous.onSwipe === next.onSwipe && previous.isLast === next.isLast && previous.isReordering === next.isReordering && previous.timeFormat === next.timeFormat && previous.dateFormat === next.dateFormat && isSameReorder(previous.reorder, next.reorder);
 
 /**
  * A chat's row: avatar, name, time, the last message (or a draft, or who is typing), the unread
@@ -427,6 +445,19 @@ const styles = StyleSheet.create({
   nameIcon: {
     marginStart: 4
   },
+  failed: {
+    width: 14,
+    height: 14,
+    borderRadius: 7,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  failedText: {
+    color: '#FFFFFF',
+    fontSize: 10,
+    lineHeight: 12,
+    fontWeight: '700'
+  },
   // The checks sit 5 before the time.
   checks: {
     marginStart: 6,