@ethora/chat-component-rn 26.7.2 → 26.7.4

package/src/components/Menu/HeaderRoomListMenu.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useMemo } from 'react';
+import React, { FC, useEffect, useMemo, useRef, useState } from 'react';
 import {
   Alert,
   Animated,
@@ -7,6 +7,8 @@ import {
   TouchableWithoutFeedback,
   StyleSheet,
   Dimensions,
+  Modal,
+  PanResponder,
   View,
 } from 'react-native';
 import {
@@ -16,10 +18,15 @@ import {
   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 {
+  shouldClaimVerticalDrag,
+  shouldDismissOnDrag,
+} from '../../helpers/sheetGestures';
 import type { IConfig } from '../../types/types';
 
 type LogoutConfig = NonNullable<IConfig['logout']>;
@@ -85,7 +92,7 @@ export const runLogoutFlow = async (
   }
 };
 
-const { width } = Dimensions.get('window');
+const { height: windowHeight } = Dimensions.get('window');
 
 interface HeaderRoomListMenuProps {
   isDrawerOpen: boolean;
@@ -106,11 +113,102 @@ export const HeaderRoomListMenu: FC<HeaderRoomListMenuProps> = ({
   const logoutConfig = config?.logout?.enabled ? config.logout : undefined;
   const primaryColor = config?.colors?.primary ?? '#0052CD';
 
-  const drawerTranslateX = drawerAnimation.interpolate({
+  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;
+
+  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 openTranslateY = drawerAnimation.interpolate({
     inputRange: [0, 1],
-    outputRange: [width, 0],
+    outputRange: [sheetHeight, 0],
   });
 
+  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;
@@ -122,7 +220,7 @@ export const HeaderRoomListMenu: FC<HeaderRoomListMenuProps> = ({
     }[] = [
       {
         label: 'New Chat',
-        icon: <AddNewIcon color="#8C8C8C" />,
+        icon: <AddNewIcon color={primaryColor} />,
         onClick: () => {
           dispatch(setActiveModal(MODAL_TYPES.NEW_CHAT));
           console.log('New chat clicked');
@@ -131,7 +229,7 @@ export const HeaderRoomListMenu: FC<HeaderRoomListMenuProps> = ({
       },
       {
         label: 'Profile',
-        icon: <ProfileIcon color="#8C8C8C" />,
+        icon: <ProfileIcon color={primaryColor} />,
         onClick: () => {
           dispatch(setActiveModal(MODAL_TYPES.PROFILE));
           console.log('Profile clicked');
@@ -139,7 +237,7 @@ export const HeaderRoomListMenu: FC<HeaderRoomListMenuProps> = ({
       },
       {
         label: 'Settings',
-        icon: <SettingIcon color="#8C8C8C" />,
+        icon: <SettingIcon color={primaryColor} />,
         onClick: () => {
           dispatch(setActiveModal(MODAL_TYPES.SETTINGS));
           console.log('Settings clicked');
@@ -162,47 +260,80 @@ export const HeaderRoomListMenu: FC<HeaderRoomListMenuProps> = ({
   }, [dispatch, logoutConfig, performLogout, primaryColor, closeDrawer]);
 
   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}
+    >
+      <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,
+          {
+            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}
-              testID={`header-menu-${option.label}`}
-              onPress={() => {
-                option.onClick();
-                if (!option.closesDrawer) {
-                  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} />
+        </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={() => {
+                  option.onClick();
+                  if (!option.closesDrawer) {
+                    closeDrawer();
+                  }
                 }}
               >
-                {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, option?.styles]}>
+                  {option.label}
+                </Text>
+              </TouchableOpacity>
+              {index < menuOptions.length - 1 && (
+                <View style={styles.divider} />
+              )}
+            </View>
+          ))}
+        </View>
       </Animated.View>
-      {isDrawerOpen && (
-        <TouchableWithoutFeedback onPress={closeDrawer}>
-          <Animated.View
-            style={[styles.overlay, { opacity: overlayAnimation }]}
-          />
-        </TouchableWithoutFeedback>
-      )}
-    </>
+    </Modal>
   );
 };
 
@@ -214,40 +345,54 @@ 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',
+    color: '#141414',
+    marginLeft: 12,
   },
   divider: {
-    height: 1,
-    width: '100%',
-    backgroundColor: '#0052cd0d',
+    height: StyleSheet.hairlineWidth,
+    marginLeft: 54,
+    backgroundColor: '#E4E4E9',
   },
-  drawer: {
+  sheet: {
     position: 'absolute',
-    top: 0,
-    bottom: 0,
-    right: 0,
-    width: width * 0.7,
-    backgroundColor: '#fff',
-    padding: 20,
+    // Inset rather than flush: the dimmed screen stays visible as a thin
+    // line around the sheet.
+    left: 3,
+    right: 3,
+    bottom: 3,
+    paddingTop: 8,
+    backgroundColor: '#FFFFFF',
+    borderRadius: 20,
     shadowColor: '#000',
-    shadowOpacity: 0.3,
-    shadowOffset: { width: -2, height: 0 },
-    shadowRadius: 5,
-    elevation: 5,
+    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,
+    backgroundColor: '#C9CBD1',
   },
-  drawerItem: {
-    fontSize: 18,
-    marginBottom: 10,
+  card: {
+    overflow: 'hidden',
   },
   overlay: {
     position: 'absolute',