@sendbird/uikit-react-native 3.12.2 → 3.12.3

package/src/components/ReactionAddons/MessageReactionAddon.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
-import { ImageProps, Pressable } from 'react-native';
+import React, { useState } from 'react';
+import { ImageProps, Pressable, StyleProp, ViewStyle } from 'react-native';
 
 import { createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
 import { useForceUpdate, useGroupChannelHandler } from '@sendbird/uikit-tools';
@@ -29,6 +29,51 @@ const createOnPressReaction = (
   };
 };
 
+const ReactionPressable = ({
+  reaction,
+  channel,
+  message,
+  source,
+  onOpenReactionUserList,
+  index,
+  style,
+}: {
+  reaction: SendbirdReaction;
+  channel: SendbirdBaseChannel;
+  message: SendbirdBaseMessage;
+  source: ImageProps['source'];
+  onOpenReactionUserList: (focusIndex: number) => void;
+  index: number;
+  style: StyleProp<ViewStyle>;
+}) => {
+  const [pressed, setPressed] = useState(false);
+  return (
+    <Pressable
+      onPress={createOnPressReaction(reaction, channel, message, reaction.hasCurrentUserReacted)}
+      onLongPress={() => onOpenReactionUserList(index)}
+      delayLongPress={DEFAULT_LONG_PRESS_DELAY}
+      onPressIn={() => setPressed(true)}
+      onPressOut={() => setPressed(false)}
+    >
+      <ReactionRoundedButton
+        source={source}
+        count={getReactionCount(reaction)}
+        reacted={pressed || reaction.hasCurrentUserReacted}
+        style={style}
+      />
+    </Pressable>
+  );
+};
+
+const ReactionMorePressable = ({ onPress }: { onPress: () => void }) => {
+  const [pressed, setPressed] = useState(false);
+  return (
+    <Pressable onPress={onPress} onPressIn={() => setPressed(true)} onPressOut={() => setPressed(false)}>
+      <ReactionRoundedButton.More pressed={pressed} />
+    </Pressable>
+  );
+};
+
 const createReactionButtons = (
   channel: SendbirdBaseChannel,
   message: SendbirdBaseMessage,
@@ -43,33 +88,24 @@ const createReactionButtons = (
     const isNotLastOfRow = index % NUM_COL !== NUM_COL - 1;
     const isNotLastOfCol = index < NUM_COL && reactions.length >= NUM_COL;
     return (
-      <Pressable
+      <ReactionPressable
         key={reaction.key}
-        onPress={createOnPressReaction(reaction, channel, message, reaction.hasCurrentUserReacted)}
-        onLongPress={() => onOpenReactionUserList(index)}
-        delayLongPress={DEFAULT_LONG_PRESS_DELAY}
-      >
-        {({ pressed }) => (
-          <ReactionRoundedButton
-            source={getIconSource(reaction.key)}
-            count={getReactionCount(reaction)}
-            reacted={pressed || reaction.hasCurrentUserReacted}
-            style={
-              reactionAddonType === 'default'
-                ? [isNotLastOfRow && styles.marginEnd, isNotLastOfCol && styles.marginBottom]
-                : [styles.marginEnd, styles.marginBottom]
-            }
-          />
-        )}
-      </Pressable>
+        reaction={reaction}
+        channel={channel}
+        message={message}
+        source={getIconSource(reaction.key)}
+        onOpenReactionUserList={onOpenReactionUserList}
+        index={index}
+        style={
+          reactionAddonType === 'default'
+            ? [isNotLastOfRow && styles.marginEnd, isNotLastOfCol && styles.marginBottom]
+            : [styles.marginEnd, styles.marginBottom]
+        }
+      />
     );
   });
   if (buttons.length < emojiLimit) {
-    buttons.push(
-      <Pressable key={REACTION_MORE_KEY} onPress={onOpenReactionList}>
-        {({ pressed }) => <ReactionRoundedButton.More pressed={pressed} />}
-      </Pressable>,
-    );
+    buttons.push(<ReactionMorePressable key={REACTION_MORE_KEY} onPress={onOpenReactionList} />);
   }
 
   return buttons;

package/src/components/ReactionBottomSheets/ReactionListBottomSheet.tsx

@@ -1,13 +1,63 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { FlatList, Pressable, View, useWindowDimensions } from 'react-native';
 
 import type { BaseMessage } from '@sendbird/chat/message';
 import { Image, Modal, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
 import { Logger, useSafeAreaPadding } from '@sendbird/uikit-utils';
+import type { SendbirdBaseChannel, SendbirdBaseMessage } from '@sendbird/uikit-utils';
 
 import { UNKNOWN_USER_ID } from '../../constants';
 import type { ReactionBottomSheetProps } from './index';
 
+const ReactionEmojiPressable = ({
+  emojiKey,
+  url,
+  message,
+  channel,
+  currentUserId,
+  selectedBackground,
+  enabledBackground,
+  onClose,
+}: {
+  emojiKey: string;
+  url: string;
+  message: SendbirdBaseMessage | undefined;
+  channel: SendbirdBaseChannel | undefined;
+  currentUserId: string | undefined;
+  selectedBackground: string;
+  enabledBackground: string;
+  onClose: () => Promise<void>;
+}) => {
+  const [pressed, setPressed] = useState(false);
+
+  const reactedUserIds = message?.reactions?.find((it) => it.key === emojiKey)?.userIds ?? [];
+  const idx = reactedUserIds.indexOf(currentUserId ?? UNKNOWN_USER_ID);
+  const reacted = idx > -1;
+
+  return (
+    <Pressable
+      onPress={async () => {
+        if (message && channel) {
+          const action = (msg: BaseMessage, key: string) => {
+            return reacted ? channel.deleteReaction(msg, key) : channel.addReaction(msg, key);
+          };
+
+          action(message, emojiKey).catch((error) => {
+            const operation = reacted ? 'remove' : 'add';
+            Logger.warn(`Failed to ${operation} reaction (emojiKey=${emojiKey})`, error);
+          });
+        }
+        await onClose();
+      }}
+      onPressIn={() => setPressed(true)}
+      onPressOut={() => setPressed(false)}
+      style={[styles.button, { backgroundColor: reacted || pressed ? selectedBackground : enabledBackground }]}
+    >
+      <Image source={{ uri: url }} style={styles.emoji} />
+    </Pressable>
+  );
+};
+
 const NUM_COLUMN = 6;
 const ReactionListBottomSheet = ({ visible, onClose, onDismiss, reactionCtx, chatCtx }: ReactionBottomSheetProps) => {
   const { width } = useWindowDimensions();
@@ -45,34 +95,18 @@ const ReactionListBottomSheet = ({ visible, onClose, onDismiss, reactionCtx, cha
           contentContainerStyle={styles.flatlist}
           ItemSeparatorComponent={() => <View style={{ height: 16 }} />}
           renderItem={({ item: { key, url } }) => {
-            const reactedUserIds = message?.reactions?.find((it) => it.key === key)?.userIds ?? [];
-
-            const idx = reactedUserIds.indexOf(currentUser?.userId ?? UNKNOWN_USER_ID);
-            const reacted = idx > -1;
-
             return (
               <View style={styles.emojiItem}>
-                <Pressable
-                  key={key}
-                  onPress={async () => {
-                    if (message && channel) {
-                      const action = (message: BaseMessage, key: string) => {
-                        return reacted ? channel.deleteReaction(message, key) : channel.addReaction(message, key);
-                      };
-
-                      action(message, key).catch((error) => {
-                        Logger.warn('Failed to reaction', error);
-                      });
-                    }
-                    await onClose();
-                  }}
-                  style={({ pressed }) => [
-                    styles.button,
-                    { backgroundColor: reacted || pressed ? color.selected.background : color.enabled.background },
-                  ]}
-                >
-                  <Image source={{ uri: url }} style={styles.emoji} />
-                </Pressable>
+                <ReactionEmojiPressable
+                  emojiKey={key}
+                  url={url}
+                  message={message}
+                  channel={channel}
+                  currentUserId={currentUser?.userId}
+                  selectedBackground={color.selected.background}
+                  enabledBackground={color.enabled.background}
+                  onClose={onClose}
+                />
               </View>
             );
           }}

package/src/version.ts

@@ -1,2 +1,2 @@
-const VERSION = '3.12.2';
+const VERSION = '3.12.3';
 export default VERSION;