@ethora/chat-component-rn 26.8.4 → 26.8.6

package/src/components/MessageBubble/MessageReaction.tsx

@@ -1,52 +1,44 @@
-/* eslint-disable react-hooks/rules-of-hooks -- pre-existing port artifacts; hooks called conditionally / inside helpers. TODO: refactor */
-import React, { FC, useMemo, useState } from 'react';
-import { View, Text, TouchableOpacity, Animated } from 'react-native';
-import styled from 'styled-components/native';
+import React, { FC, useMemo, useRef, useState } from 'react';
+import { View, Text, TouchableOpacity, Animated, StyleSheet } from 'react-native';
 import { ReactionMessage } from '../../types/types';
 import { useTheme } from '../../hooks/useTheme';
-
-const ReactionContainer = styled.View`
-  flex-direction: row;
-  align-items: center;
-  gap: 8px;
-`;
-
-const ReactionBox = styled(TouchableOpacity)<{ active: boolean; color: string }>`
-  padding: 4px 8px;
-  border-radius: 20px;
-  background-color: ${({ active, color, theme }) =>
-    active ? color : theme.surface};
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  elevation: 3;
-`;
+import { getEmojiNativeById } from '../../helpers/emoji';
 
 interface MessageReactionProps {
   color: string;
   reaction: Record<string, ReactionMessage>;
   changeReaction: (reaction: string) => void;
   userName?: string;
-}
 
-const emojiMap: Record<string, string> = {
-  joy: '😂',
-  heart: '❤️',
-  fire: '🔥',
-  '+1': '👍',
-  smile: '😄',
-  scream: '😱',
-};
+  interactive?: boolean;
+}
 
 export const MessageReaction: FC<MessageReactionProps> = ({
   reaction,
   color,
   changeReaction,
   userName,
+  interactive = true,
 }) => {
   const theme = useTheme();
   const [tooltipEmoji, setTooltipEmoji] = useState<string | null>(null);
-  const fadeAnim = new Animated.Value(0);
+  const fadeAnim = useRef(new Animated.Value(0)).current;
+
+  const reactionDetails = useMemo(() => {
+    const result: Record<string, { count: number; users: string[] }> = {};
+    Object.values(reaction || {}).forEach(({ emoji, data }) => {
+      (emoji || []).forEach((em) => {
+        if (!result[em]) {result[em] = { count: 0, users: [] };}
+        result[em].count += 1;
+        result[em].users.push(
+          `${data?.senderFirstName || ''} ${data?.senderLastName || ''}`.trim()
+        );
+      });
+    });
+    return result;
+  }, [reaction]);
+
+  if (!reaction || Object.keys(reactionDetails).length === 0) {return null;}
 
   const showTooltip = (emoji: string) => {
     setTooltipEmoji(emoji);
@@ -65,90 +57,122 @@ export const MessageReaction: FC<MessageReactionProps> = ({
     }).start(() => setTooltipEmoji(null));
   };
 
-  if (!reaction) {return null;}
-
-  const reactionDetails = useMemo(() => {
-    const result: Record<string, { count: number; users: string[] }> = {};
-
-    Object.values(reaction).forEach(({ emoji, data }) => {
-      if (emoji && emoji.length > 0)
-        {emoji.forEach((em) => {
-          if (!result[em]) {
-            result[em] = { count: 0, users: [] };
-          }
-          result[em].count += 1;
-          result[em].users.push(`${data?.senderFirstName} ${data?.senderLastName}`);
-        });}
-    });
-
-    return result;
-  }, [reaction]);
-
   return (
-    <ReactionContainer>
+    <View style={styles.row}>
       {Object.entries(reactionDetails).map(([emoji, details]) => {
-        const isUserReacted = userName
-          ? details.users.includes(userName)
-          : false;
-
+        const isUserReacted = !!userName && details.users.includes(userName);
         return (
-          <View key={emoji} style={{ position: 'relative' }}>
-            <ReactionBox
-              active={isUserReacted}
-              color={color}
+          <View key={emoji} style={styles.chipWrap}>
+            <TouchableOpacity
+              testID={`reaction-chip-${emoji}`}
+              activeOpacity={0.7}
+              disabled={!interactive}
               onPress={() => changeReaction(emoji)}
               onLongPress={() => showTooltip(emoji)}
               onPressOut={hideTooltip}
+              style={[
+                styles.chip,
+                {
+                  backgroundColor: theme.surface,
+                  borderColor: isUserReacted ? color : theme.border,
+                  shadowColor: theme.shadow,
+                },
+              ]}
             >
-              <Text style={{ fontSize: 18, marginRight: 4 }}>
-                {emojiMap[emoji] || emoji}
-              </Text>
+              {isUserReacted && (
+                <View
+                  pointerEvents="none"
+                  style={[styles.tint, { backgroundColor: `${color}26` }]}
+                />
+              )}
+              <Text style={styles.glyph}>{getEmojiNativeById(emoji)}</Text>
               <Text
-                style={{
-                  fontSize: 14,
-                  fontWeight: '600',
-                  color: isUserReacted ? theme.textOnPrimary : color,
-                }}
+                style={[
+                  styles.count,
+                  { color: isUserReacted ? color : theme.textSecondary },
+                ]}
               >
                 {details.count}
               </Text>
-            </ReactionBox>
+            </TouchableOpacity>
 
-            {/* Tooltip */}
             {tooltipEmoji === emoji && (
               <Animated.View
-                style={{
-                  position: 'absolute',
-                  bottom: 36,
-                  left: '50%',
-                  transform: [
-                    { translateX: -50 },
-                    {
-                      translateY: fadeAnim.interpolate({
-                        inputRange: [0, 1],
-                        outputRange: [4, 0],
-                      }),
-                    },
-                  ],
-                  opacity: fadeAnim,
-                  // Inverted pill: text colour as ground, surface as ink,
-                  // so it stays high-contrast on both palettes.
-                  backgroundColor: theme.text,
-                  borderRadius: 6,
-                  paddingHorizontal: 10,
-                  paddingVertical: 6,
-                  maxWidth: 220,
-                  zIndex: 999,
-                }}
+                pointerEvents="none"
+                style={[
+                  styles.tooltip,
+                  {
+                    opacity: fadeAnim,
+                    transform: [
+                      {
+                        translateY: fadeAnim.interpolate({
+                          inputRange: [0, 1],
+                          outputRange: [4, 0],
+                        }),
+                      },
+                    ],
+                    // Inverted pill: text colour as ground, surface as ink,
+                    // so it stays high-contrast on both palettes.
+                    backgroundColor: theme.text,
+                  },
+                ]}
               >
-                <Text style={{ color: theme.surface, fontSize: 12 }}>
-                  {details.users.join(', ')}
+                <Text style={[styles.tooltipText, { color: theme.surface }]}>
+                  {details.users.filter(Boolean).join(', ')}
                 </Text>
               </Animated.View>
             )}
           </View>
         );
       })}
-    </ReactionContainer>
+    </View>
   );
-};
+};
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    gap: 6,
+  },
+  chipWrap: {
+    position: 'relative',
+  },
+  chip: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 3,
+    paddingHorizontal: 8,
+    borderRadius: 14,
+    borderWidth: StyleSheet.hairlineWidth,
+    shadowOpacity: 0.08,
+    shadowOffset: { width: 0, height: 1 },
+    shadowRadius: 2,
+    elevation: 1,
+  },
+  tint: {
+    position: "absolute", top: 0, right: 0, bottom: 0, left: 0,
+    borderRadius: 14,
+  },
+  glyph: {
+    fontSize: 16,
+    marginRight: 4,
+  },
+  count: {
+    fontSize: 13,
+    fontWeight: '600',
+  },
+  tooltip: {
+    position: 'absolute',
+    bottom: 34,
+    left: 0,
+    borderRadius: 6,
+    paddingHorizontal: 10,
+    paddingVertical: 6,
+    maxWidth: 220,
+  },
+  tooltipText: {
+    fontSize: 12,
+  },
+});

package/src/components/MessageBubble/MessageReply.tsx

@@ -1,50 +1,83 @@
-import { FC } from 'react';
-import { IMessage } from '../../types/types';
-import { styled } from 'styled-components/native';
-import { Text } from 'react-native';
-
-export const StyledMessageReply = styled.TouchableOpacity<{
-  isUser: boolean;
-  configColor: string;
-}>`
-  background-color: ${(props) => (props.isUser ? '#ffffff' : '#E7EDF9')};
-  padding: 8px 16px;
-  margin-bottom: 8px;
-  border-radius: 4px;
-  border-style: solid;
-  border-start-width: ${(props) => (props.isUser ? 4 : 0)}px;
-  border-start-color: ${(props) =>
-    props.isUser ? props.configColor : 'transparent'};
-  border-end-width: ${(props) => (!props.isUser ? 4 : 0)}px;
-  border-end-color: ${(props) =>
-    !props.isUser ? props.configColor : 'transparent'};
-`;
-
-const StyledText = styled.Text`
-  font-size: 14px;
-  overflow: hidden;
-`;
+import React, { FC } from 'react';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { useTheme } from '../../hooks/useTheme';
 
 interface MessageReplyProps {
   isUser: boolean;
   text: string;
+  /** The parent's author, when the reply carries it. */
+  userName?: string;
   color?: string;
   handleReplyMessage: () => void;
 }
 
+/**
+ * Quote of the parent at the top of a reply that was also sent to the
+ * channel (WhatsApp-style): accent bar, author, up to two lines of text.
+ * Tapping opens the parent's thread.
+ */
 export const MessageReply: FC<MessageReplyProps> = ({
   isUser,
   text,
-  color = '#0052CD',
+  userName,
+  color,
   handleReplyMessage,
 }) => {
+  const theme = useTheme();
+  const accent = color || theme.primary;
   return (
-    <StyledMessageReply
+    <TouchableOpacity
+      testID="message-reply-quote"
+      activeOpacity={0.7}
       onPress={handleReplyMessage}
-      isUser={isUser}
-      configColor={color}
+      style={[
+        styles.quote,
+        {
+          // A tint of the bubble's own ground, so it reads on both sides
+          // and in both themes.
+          backgroundColor: isUser ? 'rgba(0,0,0,0.12)' : theme.surfaceSecondary,
+        },
+      ]}
     >
-      <StyledText>{text}</StyledText>
-    </StyledMessageReply>
+      <View style={[styles.bar, { backgroundColor: accent }]} />
+      <View style={styles.body}>
+        {!!userName && (
+          <Text numberOfLines={1} style={[styles.author, { color: accent }]}>
+            {userName}
+          </Text>
+        )}
+        <Text
+          numberOfLines={2}
+          style={[styles.text, { color: isUser ? theme.messageTextUser : theme.text }]}
+        >
+          {text}
+        </Text>
+      </View>
+    </TouchableOpacity>
   );
 };
+
+const styles = StyleSheet.create({
+  quote: {
+    flexDirection: 'row',
+    borderRadius: 8,
+    overflow: 'hidden',
+    marginBottom: 8,
+  },
+  bar: {
+    width: 4,
+  },
+  body: {
+    flexShrink: 1,
+    paddingVertical: 6,
+    paddingHorizontal: 10,
+  },
+  author: {
+    fontSize: 13,
+    fontWeight: '600',
+    marginBottom: 2,
+  },
+  text: {
+    fontSize: 14,
+  },
+});

package/src/components/Modals/ChatProfileModal/ChatProfileModal.tsx

@@ -510,6 +510,10 @@ const ChatProfileModal: React.FC<ChatProfileModalProps> = ({
         ]}
         onLayout={(e) => setViewportHeight(e.nativeEvent.layout.height)}
         showsVerticalScrollIndicator={false}
+        // Magnet: a header released part-way settles fully open or fully
+        // collapsed; past the collapsed point the content scrolls freely.
+        snapToOffsets={[0, collapseDistance]}
+        snapToEnd={false}
         keyboardShouldPersistTaps="handled"
         scrollEventThrottle={16}
         onScroll={Animated.event(

package/src/components/Modals/Modal/Modal.tsx

@@ -2,9 +2,13 @@ import React from 'react';
 import { ModalBackground } from '../styledModalComponents';
 import { ModalType } from '../../../types/types';
 import { useDispatch } from 'react-redux';
-import { setActiveModal } from '../../../roomStore/chatSettingsSlice';
+import {
+  setActiveModal,
+  setSelectedUser,
+} from '../../../roomStore/chatSettingsSlice';
 import { MODAL_TYPES } from '../../../helpers/constants/MODAL_TYPES';
 import { MODAL_COMPONENTS } from '../../../helpers/constants/MODAL_COMPONENTS';
+import { SwipeBackLayer } from './SwipeBackLayer';
 
 interface ModalProps {
   children?: React.ReactNode;
@@ -44,6 +48,33 @@ const Modal: React.FC<ModalProps> = ({ children, modal, setOpenModal }) => {
     return <>{renderModalContent()}{children}</>;
   }
 
+  // The profile screens are full-screen pages rather than dialogs: they
+  // slide in and can be swiped back from the left edge, like a room. One
+  // layer serves both, so going chat profile → member profile swaps the
+  // page in place instead of replaying the entrance.
+  if (modal === MODAL_TYPES.PROFILE || modal === MODAL_TYPES.CHAT_PROFILE) {
+    const ProfileComponent = MODAL_COMPONENTS[modal];
+    if (ProfileComponent) {
+      return (
+        <SwipeBackLayer
+          onClose={() => {
+            // The viewed member is cleared only once the page is gone, so
+            // it doesn't flip to the user's own profile mid-slide.
+            dispatch(setSelectedUser(undefined));
+            setOpenModal();
+          }}
+        >
+          {(close) => (
+            <>
+              <ProfileComponent handleCloseModal={close} />
+              {children}
+            </>
+          )}
+        </SwipeBackLayer>
+      );
+    }
+  }
+
   return (
     modal && (
       <ModalBackground

package/src/components/Modals/Modal/SwipeBackLayer.tsx

@@ -0,0 +1,221 @@
+import React, {
+  ReactNode,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import {
+  Animated,
+  BackHandler,
+  Keyboard,
+  StyleSheet,
+  useWindowDimensions,
+  View,
+} from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import {
+  COMPLETE_DISTANCE,
+  COMPLETE_VELOCITY,
+  EDGE_WIDTH,
+  LIST_DIM,
+  POP,
+  PUSH,
+} from '../../MainComponents/RoomStack';
+
+interface SwipeBackLayerProps {
+  /** Called once the screen has left (swipe, back button, hardware back). */
+  onClose: () => void;
+  /** Receives the animated close, to hand to the screen's own back button. */
+  children: (close: () => void) => ReactNode;
+}
+
+/**
+ * Full-screen modal layer with the same navigation feel as RoomStack: it
+ * slides in from the right, and a swipe from the left edge drags it back
+ * out over whatever is underneath (the room or the list). Like RoomStack it
+ * runs on RN's own `Animated`, one value driving every layer.
+ */
+export const SwipeBackLayer: React.FC<SwipeBackLayerProps> = ({
+  onClose,
+  children,
+}) => {
+  const { width: windowWidth } = useWindowDimensions();
+  const [width, setWidth] = useState(windowWidth);
+  const widthRef = useRef(width);
+  widthRef.current = width;
+  const x = useRef(new Animated.Value(windowWidth)).current;
+  const closing = useRef(false);
+
+  const slideTo = useCallback(
+    (
+      toValue: number,
+      config: typeof PUSH,
+      done?: (finished: boolean) => void
+    ) => {
+      Animated.timing(x, {
+        toValue,
+        ...config,
+        useNativeDriver: true,
+      }).start(({ finished }) => done?.(finished));
+    },
+    [x]
+  );
+
+  useEffect(() => {
+    slideTo(0, PUSH);
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const onCloseRef = useRef(onClose);
+  onCloseRef.current = onClose;
+  const [closeCount, setCloseCount] = useState(0);
+  const finish = useCallback(() => {
+    onCloseRef.current();
+    setCloseCount(count => count + 1);
+  }, []);
+
+  // `onClose` normally unmounts this layer. If it is still here afterwards
+  // (the modal did not close), slide the screen back rather than leave it
+  // parked off-screen.
+  useEffect(() => {
+    if (closeCount === 0) {
+      return;
+    }
+    closing.current = false;
+    slideTo(0, POP);
+  }, [closeCount]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const slideOut = useCallback(() => {
+    closing.current = true;
+    slideTo(widthRef.current, POP, finished => {
+      if (finished) {
+        finish();
+      } else {
+        closing.current = false;
+      }
+    });
+  }, [finish, slideTo]);
+
+  const close = useCallback(() => {
+    if (closing.current) {
+      return;
+    }
+    Keyboard.dismiss();
+    slideOut();
+  }, [slideOut]);
+
+  useEffect(() => {
+    const sub = BackHandler.addEventListener('hardwareBackPress', () => {
+      close();
+      return true;
+    });
+    return () => sub.remove();
+  }, [close]);
+
+  const swipeBack = useMemo(
+    () =>
+      Gesture.Pan()
+        .runOnJS(true)
+        .hitSlop({ left: 0, width: EDGE_WIDTH })
+        .activeOffsetX(12)
+        .failOffsetY([-16, 16])
+        .onStart(() => {
+          if (closing.current) {
+            return;
+          }
+          Keyboard.dismiss();
+          x.stopAnimation();
+        })
+        .onUpdate(e => {
+          if (closing.current) {
+            return;
+          }
+          x.setValue(Math.min(Math.max(e.translationX, 0), widthRef.current));
+        })
+        .onEnd(e => {
+          if (closing.current) {
+            return;
+          }
+          const complete =
+            e.translationX > widthRef.current * COMPLETE_DISTANCE ||
+            e.velocityX > COMPLETE_VELOCITY;
+          if (complete) {
+            slideOut();
+          } else {
+            slideTo(0, POP);
+          }
+        }),
+    [slideOut, slideTo, x]
+  );
+
+  const dimOpacity = useMemo(
+    () =>
+      x.interpolate({
+        inputRange: [0, width],
+        outputRange: [LIST_DIM, 0],
+        extrapolate: 'clamp',
+      }),
+    [x, width]
+  );
+
+  return (
+    <View
+      pointerEvents="box-none"
+      style={styles.host}
+      onLayout={e => {
+        const next = e.nativeEvent.layout.width;
+        if (next > 0 && next !== widthRef.current) {
+          setWidth(next);
+        }
+      }}
+    >
+      <Animated.View
+        pointerEvents="none"
+        style={[styles.fill, styles.dim, { opacity: dimOpacity }]}
+      />
+      <GestureDetector gesture={swipeBack}>
+        <Animated.View
+          style={[
+            styles.fill,
+            styles.screen,
+            { transform: [{ translateX: x }] },
+          ]}
+        >
+          {children(close)}
+        </Animated.View>
+      </GestureDetector>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  host: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    zIndex: 1000,
+    overflow: 'hidden',
+  },
+  fill: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+  },
+  dim: {
+    backgroundColor: '#000',
+  },
+  // Same box the shared ModalBackground gives its content.
+  screen: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    shadowColor: '#000',
+    shadowOffset: { width: -4, height: 0 },
+    shadowOpacity: 0.18,
+    shadowRadius: 12,
+  },
+});