@ethora/chat-component-rn 26.8.1 → 26.8.3

package/src/components/Menu/HeaderRoomListMenu.tsx

@@ -1,19 +1,100 @@
-import React, { FC, useMemo } from 'react';
+import React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import {
+  Alert,
   Animated,
   Text,
   TouchableOpacity,
   TouchableWithoutFeedback,
   StyleSheet,
   Dimensions,
+  Modal,
+  PanResponder,
+  Platform,
   View,
 } from 'react-native';
-import { AddNewIcon, ProfileIcon, SettingIcon } from '../../assets/icons';
+import {
+  AddNewIcon,
+  LogoutIcon,
+  ProfileIcon,
+  SettingIcon,
+} from '../../assets/icons';
 import { useDispatch } from 'react-redux';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { setActiveModal } from '../../roomStore/chatSettingsSlice';
 import { MODAL_TYPES } from '../../helpers/constants/MODAL_TYPES';
+import { useChatSettingState } from '../../hooks/useChatSettingState';
+import { useLogout } from '../../hooks/useLogout';
+import { useTheme } from '../../hooks/useTheme';
+import {
+  shouldClaimVerticalDrag,
+  shouldDismissOnDrag,
+} from '../../helpers/sheetGestures';
+import type { IConfig } from '../../types/types';
+
+type LogoutConfig = NonNullable<IConfig['logout']>;
+
+const DEFAULT_LOGOUT_LABEL = 'Sign out';
+
+const confirmLogout = (
+  confirm: LogoutConfig['confirm'],
+  label: string
+): Promise<boolean> => {
+  if (confirm === false) {
+    return Promise.resolve(true);
+  }
+  const copy = typeof confirm === 'object' && confirm ? confirm : {};
+  return new Promise<boolean>((resolve) => {
+    Alert.alert(
+      copy.title ?? label,
+      copy.message ?? 'Are you sure you want to sign out?',
+      [
+        {
+          text: copy.cancelText ?? 'Cancel',
+          style: 'cancel',
+          onPress: () => resolve(false),
+        },
+        {
+          text: copy.confirmText ?? label,
+          style: 'destructive',
+          onPress: () => resolve(true),
+        },
+      ],
+      { cancelable: true, onDismiss: () => resolve(false) }
+    );
+  });
+};
 
-const { width } = Dimensions.get('window');
+export const runLogoutFlow = async (
+  logoutConfig: LogoutConfig,
+  performLogout: () => Promise<void>
+): Promise<void> => {
+  const label = logoutConfig.label ?? DEFAULT_LOGOUT_LABEL;
+  const confirmed = await confirmLogout(logoutConfig.confirm ?? true, label);
+  if (!confirmed) {
+    return;
+  }
+  if (logoutConfig.onBeforeLogout) {
+    try {
+      const proceed = await logoutConfig.onBeforeLogout();
+      if (proceed === false) {
+        return;
+      }
+    } catch (e) {
+      console.warn('HeaderRoomListMenu: onBeforeLogout threw, logout cancelled', e);
+      return;
+    }
+  }
+  await performLogout(); // never rejects (see useLogout)
+  if (logoutConfig.onAfterLogout) {
+    try {
+      await logoutConfig.onAfterLogout();
+    } catch (e) {
+      console.warn('HeaderRoomListMenu: onAfterLogout threw', e);
+    }
+  }
+};
+
+const { height: windowHeight } = Dimensions.get('window');
 
 interface HeaderRoomListMenuProps {
   isDrawerOpen: boolean;
@@ -29,86 +110,262 @@ export const HeaderRoomListMenu: FC<HeaderRoomListMenuProps> = ({
   closeDrawer,
 }) => {
   const dispatch = useDispatch();
+  const { config } = useChatSettingState();
+  const performLogout = useLogout();
+  const logoutConfig = config?.logout?.enabled ? config.logout : undefined;
+  const theme = useTheme();
+  const primaryColor = theme.primary;
+  const iconColor = theme.icon;
+  const labelColor = theme.text;
+
+  const insets = useSafeAreaInsets();
+  // Measured, so the sheet is exactly as tall as its rows and starts
+  // fully off-screen no matter how many options the host enables.
+  const [sheetHeight, setSheetHeight] = useState(windowHeight * 0.4);
+  // Finger offset, layered on top of the open/close animation the parent
+  // drives. Reset once the sheet is unmounted, so a swipe-dismissed sheet
+  // never snaps back into view on its way out.
+  const dragY = useRef(new Animated.Value(0)).current;
+  const sheetHeightRef = useRef(sheetHeight);
+  sheetHeightRef.current = sheetHeight;
+
+  // closeDrawer is a fresh function each render; the responder is built
+  // once, so it reads the current one through a ref rather than the one it
+  // closed over on mount.
+  const closeDrawerRef = useRef(closeDrawer);
+  closeDrawerRef.current = closeDrawer;
+
+  const pendingActionRef = useRef<(() => void) | null>(null);
+
+  const runPendingAction = useCallback(() => {
+    const action = pendingActionRef.current;
+    pendingActionRef.current = null;
+    action?.();
+  }, []);
+
+  useEffect(() => {
+    if (Platform.OS === 'ios' || isDrawerOpen) {
+      return;
+    }
+    const id = setTimeout(runPendingAction, 0);
+    return () => clearTimeout(id);
+  }, [isDrawerOpen, runPendingAction]);
+
+  const handleOptionPress = useCallback(
+    (action: () => void) => {
+      pendingActionRef.current = action;
+      closeDrawer();
+    },
+    [closeDrawer]
+  );
+
+  useEffect(() => {
+    if (!isDrawerOpen) {
+      dragY.setValue(0);
+      return;
+    }
+    // Hand `dragY` to the native driver up front. The open/close value is
+    // already native (the parent animates it that way), and a transform
+    // that mixes a native node with a JS-only one drops the JS updates on
+    // the floor — which is exactly a drag that moves nothing.
+    Animated.timing(dragY, {
+      toValue: 0,
+      duration: 0,
+      useNativeDriver: true,
+    }).start();
+  }, [isDrawerOpen, dragY]);
 
-  const drawerTranslateX = drawerAnimation.interpolate({
+  const openTranslateY = drawerAnimation.interpolate({
     inputRange: [0, 1],
-    outputRange: [width, 0],
+    outputRange: [sheetHeight, 0],
   });
 
-  const menuOptions = useMemo(
-    () => [
+  const dismissByDrag = () => {
+    Animated.timing(dragY, {
+      toValue: sheetHeightRef.current,
+      duration: 180,
+      useNativeDriver: true,
+    }).start();
+    closeDrawerRef.current();
+  };
+
+  const makeDragResponder = (claimOnStart: boolean) =>
+    PanResponder.create({
+      // The grab area claims on touch-DOWN: nothing to negotiate against,
+      // so a pull on the handle always drags.
+      onStartShouldSetPanResponder: () => claimOnStart,
+      // CAPTURE matters on the body: a drag that starts on a row makes
+      // that row's Touchable the responder on touch-down, and a plain
+      // `onMoveShouldSetPanResponder` is never consulted afterwards.
+      // Capturing on the first clearly-vertical movement takes the gesture
+      // back, while a tap (dy ≈ 0) still reaches the row.
+      onMoveShouldSetPanResponderCapture: (_evt, g) =>
+        claimOnStart || shouldClaimVerticalDrag(g.dy, g.dx),
+      onMoveShouldSetPanResponder: (_evt, g) =>
+        claimOnStart || shouldClaimVerticalDrag(g.dy, g.dx),
+      onPanResponderTerminationRequest: () => false,
+      onPanResponderMove: (_evt, g) => {
+        dragY.setValue(Math.max(0, g.dy));
+      },
+      onPanResponderRelease: (_evt, g) => {
+        if (shouldDismissOnDrag(g.dy, g.vy)) {
+          dismissByDrag();
+          return;
+        }
+        Animated.spring(dragY, {
+          toValue: 0,
+          tension: 90,
+          friction: 14,
+          useNativeDriver: true,
+        }).start();
+      },
+      onPanResponderTerminate: () => {
+        Animated.spring(dragY, {
+          toValue: 0,
+          tension: 90,
+          friction: 14,
+          useNativeDriver: true,
+        }).start();
+      },
+    });
+
+  // Built once — `useRef(expr)` would re-run PanResponder.create every
+  // render and throw the result away.
+  const bodyPanRef = useRef<ReturnType<typeof makeDragResponder> | null>(null);
+  const handlePanRef = useRef<ReturnType<typeof makeDragResponder> | null>(null);
+  if (!bodyPanRef.current) {bodyPanRef.current = makeDragResponder(false);}
+  if (!handlePanRef.current) {handlePanRef.current = makeDragResponder(true);}
+  const pan = bodyPanRef.current;
+  const handlePan = handlePanRef.current;
+
+  const menuOptions = useMemo(() => {
+    const options: {
+      label: string;
+      icon: React.ReactElement;
+      onClick: () => void;
+      styles?: { color: string };
+    }[] = [
       {
         label: 'New Chat',
-        icon: <AddNewIcon color="#8C8C8C" />,
+        icon: <AddNewIcon color={iconColor} />,
         onClick: () => {
           dispatch(setActiveModal(MODAL_TYPES.NEW_CHAT));
-          console.log('New chat clicked');
         },
-        styles: { color: '#141414' },
+        styles: { color: labelColor },
       },
       {
         label: 'Profile',
-        icon: <ProfileIcon color="#8C8C8C" />,
+        icon: <ProfileIcon color={iconColor} />,
         onClick: () => {
           dispatch(setActiveModal(MODAL_TYPES.PROFILE));
-          console.log('Profile clicked');
         },
       },
       {
         label: 'Settings',
-        icon: <SettingIcon color="#8C8C8C" />,
+        icon: <SettingIcon color={iconColor} />,
         onClick: () => {
           dispatch(setActiveModal(MODAL_TYPES.SETTINGS));
-          console.log('Settings clicked');
         },
       },
-      // {
-      //   label: "Logout",
-      //   onClick: handleLogout,
-      // },
-    ],
-    []
-  );
+    ];
+    if (logoutConfig) {
+      options.push({
+        label: logoutConfig.label ?? DEFAULT_LOGOUT_LABEL,
+        icon: <LogoutIcon color={iconColor} />,
+        styles: { color: primaryColor },
+        onClick: () => {
+          runLogoutFlow(logoutConfig, performLogout).catch(() => {});
+        },
+      });
+    }
+    return options;
+  }, [dispatch, logoutConfig, performLogout, primaryColor, iconColor, labelColor]);
 
   return (
-    <>
+    // Presented through a real <Modal>: as an in-tree overlay the sheet was
+    // bounded by the room list's own container, so it stopped short of the
+    // screen's bottom edge (that pale strip under it) and the dim never
+    // reached the host's chrome.
+    <Modal
+      transparent
+      visible={isDrawerOpen}
+      animationType="none"
+      statusBarTranslucent
+      onRequestClose={closeDrawer}
+      onDismiss={runPendingAction}
+    >
+      <TouchableWithoutFeedback onPress={closeDrawer}>
+        <Animated.View
+          style={[styles.overlay, { opacity: overlayAnimation }]}
+        />
+      </TouchableWithoutFeedback>
+      {/* A bottom sheet rather than the old full-height right-hand drawer:
+        * three rows never needed the whole screen, and coming up from the
+        * bottom keeps them within thumb reach. Inset by 2pt all round so a
+        * sliver of the dimmed screen shows around it. */}
       <Animated.View
+        testID="header-menu-sheet"
+        onLayout={(e) => {
+          const measured = e.nativeEvent.layout.height;
+          if (measured > 0) {setSheetHeight(measured);}
+        }}
         style={[
-          styles.drawer,
-          { transform: [{ translateX: drawerTranslateX }] },
+          styles.sheet,
+          {
+            backgroundColor: theme.surface,
+            shadowColor: theme.shadow,
+            paddingBottom: insets.bottom + 20,
+            // Two entries rather than Animated.add: the parent's value is
+            // driven natively, and stacking the transforms keeps each node
+            // on its own driver instead of mixing them in one expression.
+            transform: [{ translateY: openTranslateY }, { translateY: dragY }],
+          },
         ]}
+        {...pan.panHandlers}
       >
-        {menuOptions.map((option, index) => (
-          <View key={index} style={styles.menuItemWrapper}>
-            <TouchableOpacity
-              style={styles.menuItem}
-              onPress={() => {
-                option.onClick();
-                closeDrawer();
-              }}
-            >
-              <View
-                style={{
-                  width: 22,
-                  alignItems: 'center',
-                }}
+        {/* Full-width grab area, not just the 40pt pill: it claims the
+          * gesture the moment it is touched. */}
+        <View
+          testID="header-menu-grabber"
+          style={styles.grabArea}
+          {...handlePan.panHandlers}
+        >
+          <View
+            style={[
+              styles.grabber,
+              theme.dark ? { backgroundColor: theme.textMuted } : null,
+            ]}
+          />
+        </View>
+        <View style={styles.card}>
+          {menuOptions.map((option, index) => (
+            <View key={index} style={styles.menuItemWrapper}>
+              <TouchableOpacity
+                style={styles.menuItem}
+                testID={`header-menu-${option.label}`}
+                activeOpacity={0.6}
+                onPress={() => handleOptionPress(option.onClick)}
               >
-                {option.icon}
-              </View>
-              <Text style={[styles.label, option?.styles]}>{option.label}</Text>
-            </TouchableOpacity>
-            {index < menuOptions.length - 1 && <View style={styles.divider} />}
-          </View>
-        ))}
+                <View style={styles.iconSlot}>{option.icon}</View>
+                <Text
+                  style={[styles.label, { color: theme.text }, option?.styles]}
+                >
+                  {option.label}
+                </Text>
+              </TouchableOpacity>
+              {index < menuOptions.length - 1 && (
+                <View
+                  style={[
+                    styles.divider,
+                    theme.dark ? { backgroundColor: theme.divider } : null,
+                  ]}
+                />
+              )}
+            </View>
+          ))}
+        </View>
       </Animated.View>
-      {isDrawerOpen && (
-        <TouchableWithoutFeedback onPress={closeDrawer}>
-          <Animated.View
-            style={[styles.overlay, { opacity: overlayAnimation }]}
-          />
-        </TouchableWithoutFeedback>
-      )}
-    </>
+    </Modal>
   );
 };
 
@@ -120,40 +377,53 @@ const styles = StyleSheet.create({
   menuItem: {
     flexDirection: 'row',
     alignItems: 'center',
-    padding: 16,
+    paddingVertical: 18,
+    paddingHorizontal: 16,
+  },
+  iconSlot: {
+    width: 26,
+    alignItems: 'center',
   },
   label: {
     fontSize: 16,
-    marginLeft: 10,
+    fontWeight: '500',
+    marginLeft: 12,
   },
   divider: {
-    height: 1,
-    width: '100%',
-    backgroundColor: '#0052cd0d',
+    height: StyleSheet.hairlineWidth,
+    marginLeft: 54,
+    // Light hairline; swapped for theme.divider in dark mode.
+    backgroundColor: '#E4E4E9',
   },
-  drawer: {
+  sheet: {
     position: 'absolute',
-    top: 0,
-    bottom: 0,
-    right: 0,
-    width: width * 0.7,
-    backgroundColor: '#fff',
-    padding: 20,
-    shadowColor: '#000',
-    shadowOpacity: 0.3,
-    shadowOffset: { width: -2, height: 0 },
-    shadowRadius: 5,
-    elevation: 5,
+    // Inset rather than flush: the dimmed screen stays visible as a thin
+    // line around the sheet.
+    left: 3,
+    right: 3,
+    bottom: 3,
+    paddingTop: 8,
+    borderRadius: 20,
+    shadowOpacity: 0.12,
+    shadowOffset: { width: 0, height: -3 },
+    shadowRadius: 12,
+    elevation: 12,
     zIndex: 999,
   },
-  drawerTitle: {
-    fontSize: 20,
-    fontWeight: 'bold',
-    marginBottom: 20,
+  grabArea: {
+    alignItems: 'center',
+    paddingTop: 6,
+    paddingBottom: 12,
+  },
+  grabber: {
+    width: 40,
+    height: 4,
+    borderRadius: 2,
+    // Light pill; swapped for theme.textMuted in dark mode.
+    backgroundColor: '#C9CBD1',
   },
-  drawerItem: {
-    fontSize: 18,
-    marginBottom: 10,
+  card: {
+    overflow: 'hidden',
   },
   overlay: {
     position: 'absolute',

package/src/components/MessageBubble/BottomReplyContainer.tsx

@@ -3,6 +3,7 @@ import { IReply, IUser } from '../../types/types';
 import { Avatar } from './Avatar';
 import { styled } from 'styled-components/native';
 import { Platform, Text, View } from 'react-native';
+import { useTheme } from '../../hooks/useTheme';
 
 interface BottomReplyContainerProps {
   isUser: boolean;
@@ -11,7 +12,7 @@ interface BottomReplyContainerProps {
 }
 
 const ReplyContainer = styled.TouchableOpacity<{ isUser: boolean }>`
-  background-color: #ffffff;
+  background-color: ${({ theme }) => theme.surface};
   left: ${(props) => (!props.isUser ? '10px' : 'auto')};
   right: ${(props) => (props.isUser ? '10px' : 'auto')};
   padding: 4px 8px 4px 16px;
@@ -21,17 +22,20 @@ const ReplyContainer = styled.TouchableOpacity<{ isUser: boolean }>`
   gap: 6px;
   margin: 8px 8px 0;
 
-  ${Platform.select({
-    ios: `
-      shadow-color: rgba(185, 198, 199, 1);
+  ${({ theme }) =>
+    Platform.select({
+      // The light shadow is a soft bluish-grey tuned for a white card; on
+      // the dark palette that would read as a glow, so use the theme shadow.
+      ios: `
+      shadow-color: ${theme.dark ? theme.shadow : 'rgba(185, 198, 199, 1)'};
       shadow-offset: 0px 0px;
       shadow-opacity: 1;
       shadow-radius: 8px;
     `,
-    android: `
+      android: `
       elevation: 8;
     `,
-  })}
+    })}
 `;
 
 const AvatarCircle = styled.View`
@@ -46,20 +50,20 @@ const CircleCurrent = styled.View`
   display: flex;
   justify-content: center;
   align-items: center;
-  border: 1px solid #f0f0f0;
+  border: 1px solid ${({ theme }) => theme.border};
   border-radius: 50%;
-  background-color: #ffffff;
+  background-color: ${({ theme }) => theme.surface};
 `;
 
 const CircleCurrentText = styled.Text`
-  color: #8c8c8c;
+  color: ${({ theme }) => theme.textSecondary};
   font-size: 10px;
   font-weight: 100;
 `;
 
 const CounterRepliesText = styled.Text`
   font-size: 12px;
-  color: #0052cd;
+  color: ${({ theme }) => theme.primary};
   font-weight: 600;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -70,6 +74,7 @@ export const BottomReplyContainer: FC<BottomReplyContainerProps> = ({
   reply,
   onClick,
 }) => {
+  const theme = useTheme();
   const uniqueUsers: IUser[] = useMemo(() => {
     return Object.values(
       reply.reduce<Record<string, IUser>>((acc, item) => {
@@ -94,7 +99,7 @@ export const BottomReplyContainer: FC<BottomReplyContainerProps> = ({
                 height: '100%',
                 width: '100%',
                 borderWidth: 1,
-                borderColor: '#F0F0F0',
+                borderColor: theme.border,
                 borderStyle: 'solid',
                 fontSize: 10,
               }}