@ethora/chat-component-rn 26.8.4 → 26.8.5

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

@@ -0,0 +1,170 @@
+import React, { ReactNode, useCallback, useEffect, useRef } from 'react';
+import {
+  BackHandler,
+  Keyboard,
+  StyleSheet,
+  useWindowDimensions,
+  View,
+} from 'react-native';
+import Animated, {
+  interpolate,
+  runOnJS,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+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).
+ */
+export const SwipeBackLayer: React.FC<SwipeBackLayerProps> = ({
+  onClose,
+  children,
+}) => {
+  const { width: windowWidth } = useWindowDimensions();
+  const width = useSharedValue(windowWidth);
+  const x = useSharedValue(windowWidth);
+  const closing = useSharedValue(false);
+
+  useEffect(() => {
+    x.value = withTiming(0, PUSH);
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const onCloseRef = useRef(onClose);
+  onCloseRef.current = onClose;
+  const finish = useCallback(() => onCloseRef.current(), []);
+
+  const close = useCallback(() => {
+    if (closing.value) {
+      return;
+    }
+    closing.value = true;
+    Keyboard.dismiss();
+    x.value = withTiming(width.value, POP, finished => {
+      if (finished) {
+        runOnJS(finish)();
+      }
+    });
+  }, [finish]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  useEffect(() => {
+    const sub = BackHandler.addEventListener('hardwareBackPress', () => {
+      close();
+      return true;
+    });
+    return () => sub.remove();
+  }, [close]);
+
+  const dismissKeyboard = useCallback(() => Keyboard.dismiss(), []);
+
+  const swipeBack = Gesture.Pan()
+    .hitSlop({ left: 0, width: EDGE_WIDTH })
+    .activeOffsetX(12)
+    .failOffsetY([-16, 16])
+    .onStart(() => {
+      runOnJS(dismissKeyboard)();
+    })
+    .onUpdate(e => {
+      if (closing.value) {
+        return;
+      }
+      x.value = Math.min(Math.max(e.translationX, 0), width.value);
+    })
+    .onEnd(e => {
+      if (closing.value) {
+        return;
+      }
+      const complete =
+        x.value > width.value * COMPLETE_DISTANCE ||
+        e.velocityX > COMPLETE_VELOCITY;
+      if (complete) {
+        closing.value = true;
+        x.value = withTiming(width.value, POP, finished => {
+          if (finished) {
+            runOnJS(finish)();
+          }
+        });
+      } else {
+        x.value = withTiming(0, POP);
+      }
+    });
+
+  const screenStyle = useAnimatedStyle(() => ({
+    transform: [{ translateX: x.value }],
+  }));
+  const dimStyle = useAnimatedStyle(() => ({
+    opacity: interpolate(x.value, [0, width.value], [LIST_DIM, 0]),
+  }));
+
+  return (
+    <View
+      pointerEvents="box-none"
+      style={styles.host}
+      onLayout={e => {
+        const next = e.nativeEvent.layout.width;
+        if (next > 0) {
+          width.value = next;
+        }
+      }}
+    >
+      <Animated.View
+        pointerEvents="none"
+        style={[styles.fill, styles.dim, dimStyle]}
+      />
+      <GestureDetector gesture={swipeBack}>
+        <Animated.View style={[styles.fill, styles.screen, screenStyle]}>
+          {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,
+  },
+});

package/src/components/Modals/ProfileHeader/ProfileHeader.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 import {
   Animated,
   Image,
+  Platform,
   StyleProp,
   StyleSheet,
   Text,
@@ -39,7 +40,13 @@ const COLLAPSE_RAMP = 48;
  */
 const BLUR_INTENSITY = 92;
 /** Darkening applied on top of the blur (and used alone without it). */
-const FROST_DIM = 'rgba(0,0,0,0.28)';
+const FROST_DIM = 'rgba(0,0,0,0.5)';
+/**
+ * Blur of the picture itself when expo-blur is not in the binary: RN's own
+ * `Image.blurRadius`, so the collapsed header is still frosted rather than
+ * just dimmed. Android caps the radius at 25.
+ */
+const IMAGE_BLUR_RADIUS = Platform.OS === 'android' ? 25 : 40;
 /** Height of the readability gradient under the name and buttons. */
 const SCRIM_HEIGHT = 220;
 /** Bands the gradient is built from — enough that no step is visible. */
@@ -249,12 +256,25 @@ export const ProfileHero: React.FC<
           ]}
         >
           {onPhoto ? (
-            <Image
-              testID={`${testIDPrefix}-hero-image`}
-              source={{ uri: imageUri as string }}
-              style={StyleSheet.absoluteFill}
-              resizeMode="cover"
-            />
+            <>
+              <Image
+                testID={`${testIDPrefix}-hero-image`}
+                source={{ uri: imageUri as string }}
+                style={StyleSheet.absoluteFill}
+                resizeMode="cover"
+              />
+              {/* Without expo-blur the frost is a blurred copy of the same
+                * picture, inside the same transform so the two line up as
+                * one fades into the other. */}
+              {!BlurView && (
+                <Animated.Image
+                  source={{ uri: imageUri as string }}
+                  style={[StyleSheet.absoluteFill, { opacity: collapsed }]}
+                  resizeMode="cover"
+                  blurRadius={IMAGE_BLUR_RADIUS}
+                />
+              )}
+            </>
           ) : (
             <View style={styles.initialsWrap}>
               <Text
@@ -395,6 +415,7 @@ export const ProfileTopBar: React.FC<
               source={{ uri: imageUri as string }}
               style={StyleSheet.absoluteFill}
               resizeMode="cover"
+              blurRadius={BlurView ? 0 : IMAGE_BLUR_RADIUS}
             />
             <FrostLayer />
           </>
@@ -499,7 +520,7 @@ const styles = StyleSheet.create({
     backgroundColor: FROST_DIM,
   },
   frostFallback: {
-    backgroundColor: 'rgba(0,0,0,0.35)',
+    backgroundColor: FROST_DIM,
   },
   // Only over a photo: keeps white text readable without tinting the flat
   // fallback colour.

package/src/components/Modals/UserProfileModal/UserProfileModal.tsx

@@ -39,7 +39,6 @@ import {
   setActiveFile,
   setActiveModal,
   setLangSource,
-  setSelectedUser,
 } from '../../../roomStore/chatSettingsSlice';
 import { addRoomViaApi, setCurrentRoom } from '../../../roomStore/roomsSlice';
 import { runLogoutFlow } from '../../Menu/HeaderRoomListMenu';
@@ -183,10 +182,10 @@ const UserProfileModal: React.FC<UserProfileModalProps> = ({
     };
   }, [isOwnProfile, user?.token]);
 
+  // The modal host clears `selectedUser` once the page has slid away.
   const handleBackClick = useCallback(() => {
-    dispatch(setSelectedUser(undefined));
     handleCloseModal();
-  }, [dispatch, handleCloseModal]);
+  }, [handleCloseModal]);
 
   // Same teardown the room-list menu runs (XMPP, redux, persisted slices,
   // AsyncStorage), including the host's confirm copy and callbacks.
@@ -473,6 +472,10 @@ const UserProfileModal: React.FC<UserProfileModalProps> = ({
         ]}
         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}
         scrollEventThrottle={16}
         onScroll={Animated.event(
           [{ nativeEvent: { contentOffset: { y: scrollY } } }],

package/src/helpers/keyboardLayout.ts

@@ -6,6 +6,9 @@ type KeyboardLayoutArgs = {
 };
 
 export const ANDROID_INPUT_DOCK_GAP = 12;
+// Bottom padding the dock keeps while the iOS keyboard is open, so the
+// composer is glued to the keyboard without touching its edge.
+export const IOS_KEYBOARD_DOCK_GAP = 4;
 
 export const getKeyboardVerticalOffset = ({
   platform,
@@ -14,6 +17,29 @@ export const getKeyboardVerticalOffset = ({
 }: KeyboardLayoutArgs): number =>
   configuredOffset + (platform === 'ios' ? bottomInset : 0);
 
+// Offset for the KeyboardAvoidingView strategy. Unlike KeyboardStickyView
+// (where a positive `opened` offset pushes the dock DOWN into the keyboard),
+// a positive value here ADDS bottom padding above the keyboard — so the
+// safe-area inset must not be added: the avoiding view already ends exactly
+// at the keyboard's top edge.
+export const getKeyboardAvoidingOffset = ({
+  configuredOffset = 0,
+}: Pick<KeyboardLayoutArgs, 'configuredOffset'>): number => configuredOffset;
+
+// Dock bottom padding while the keyboard is open (KeyboardAvoidingView
+// strategy). On iOS the safe-area padding collapses to a small gap; Android
+// keeps its fixed gap.
+export const getInputDockKeyboardPadding = ({
+  platform,
+  inputDockPaddingBottom,
+}: {
+  platform: string;
+  inputDockPaddingBottom: number;
+}): number =>
+  platform === 'ios'
+    ? Math.min(inputDockPaddingBottom, IOS_KEYBOARD_DOCK_GAP)
+    : inputDockPaddingBottom;
+
 type InputDockPaddingArgs = Omit<KeyboardLayoutArgs, 'configuredOffset'> & {
   // Explicit `inputDockPaddingBottom` config value, verbatim on both
   // platforms when provided (0 allowed). Takes priority over every other