@ethora/chat-component-rn 26.7.4 → 26.7.5

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

@@ -1,217 +0,0 @@
-/** @format */
-
-import React, { useRef, useState } from 'react';
-import {
-  Animated,
-  Dimensions,
-  Easing,
-  Modal,
-  Pressable,
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-  View,
-} from 'react-native';
-import { MoreIcon } from '../../../assets/icons';
-
-export interface ProfileMenuItem {
-  key: string;
-  label: string;
-  icon: React.ReactNode;
-  destructive?: boolean;
-  onPress: () => void;
-}
-
-/** Fallbacks used for the very first frame, before the card is measured. */
-const ESTIMATED_WIDTH = 220;
-const ESTIMATED_HEIGHT = 160;
-const GAP = 8;
-/** Roughly a notch inset + the header band, used until measured. */
-const DEFAULT_TOP = 104;
-const EDGE = 12;
-
-/**
- * The "…" overflow menu shared by the chat and user profile screens.
- *
- * The shared `DropdownMenu` pins its card at a hard-coded `top: 95`, which
- * on this screen landed it over the host's own tab bar, unanchored to the
- * button. This one measures the button and grows the card out of it: the
- * card scales up from its top-right corner (translate → scale → translate
- * back, which is how you fake a transform-origin in React Native) so the
- * menu visibly unfolds from the three dots.
- */
-const ProfileMenu: React.FC<{
-  items: ProfileMenuItem[];
-  testIDPrefix?: string;
-}> = ({ items, testIDPrefix = 'chat-profile' }) => {
-  const buttonRef = useRef<View>(null);
-  const [open, setOpen] = useState(false);
-  const [anchor, setAnchor] = useState({ top: DEFAULT_TOP, right: EDGE });
-  const [size, setSize] = useState({
-    width: ESTIMATED_WIDTH,
-    height: ESTIMATED_HEIGHT,
-  });
-  const progress = useRef(new Animated.Value(0)).current;
-
-  const animate = (to: number, done?: () => void) =>
-    Animated.timing(progress, {
-      toValue: to,
-      duration: to ? 180 : 140,
-      easing: to ? Easing.out(Easing.back(1.3)) : Easing.in(Easing.quad),
-      useNativeDriver: true,
-    }).start(({ finished }) => finished && done?.());
-
-  // Anchor to the button's window frame — that is the same coordinate
-  // space the <Modal> lays out in, so no insets to subtract. Measured on
-  // layout (and again on open) rather than *before* opening: on some hosts
-  // the measure callback never fires, and gating the open on it would mean
-  // a menu that simply doesn't appear.
-  const measure = () =>
-    buttonRef.current?.measureInWindow?.((x, y, width, height) => {
-      if (typeof y !== 'number' || typeof x !== 'number') {return;}
-      const screenWidth = Dimensions.get('window').width;
-      setAnchor({
-        top: y + height + GAP,
-        right: Math.max(screenWidth - (x + width), EDGE),
-      });
-    });
-
-  const openMenu = () => {
-    measure();
-    progress.setValue(0);
-    setOpen(true);
-    animate(1);
-  };
-
-  const closeMenu = (then?: () => void) =>
-    animate(0, () => {
-      setOpen(false);
-      then?.();
-    });
-
-  const scale = progress.interpolate({
-    inputRange: [0, 1],
-    outputRange: [0.2, 1],
-  });
-
-  if (items.length === 0) {
-    return null;
-  }
-
-  return (
-    <>
-      <View ref={buttonRef} collapsable={false} onLayout={measure}>
-        <TouchableOpacity
-          testID={`${testIDPrefix}-menu`}
-          activeOpacity={0.7}
-          onPress={openMenu}
-          style={styles.button}
-        >
-          <MoreIcon color="#FFFFFF" />
-        </TouchableOpacity>
-      </View>
-
-      <Modal
-        transparent
-        visible={open}
-        animationType="none"
-        onRequestClose={() => closeMenu()}
-      >
-        <Pressable
-          testID={`${testIDPrefix}-menu-backdrop`}
-          style={StyleSheet.absoluteFill}
-          onPress={() => closeMenu()}
-        />
-        <Animated.View
-          testID={`${testIDPrefix}-menu-card`}
-          onLayout={(e) => {
-            const { width, height } = e.nativeEvent.layout;
-            if (width && height) {setSize({ width, height });}
-          }}
-          style={[
-            styles.card,
-            {
-              top: anchor.top,
-              right: anchor.right,
-              opacity: progress,
-              transform: [
-                // Move the origin to the card's top-right corner, scale
-                // there, then move back — RN has no transform-origin.
-                { translateX: size.width / 2 },
-                { translateY: -size.height / 2 },
-                { scale },
-                { translateX: -size.width / 2 },
-                { translateY: size.height / 2 },
-              ],
-            },
-          ]}
-        >
-          {items.map((item, index) => (
-            <TouchableOpacity
-              key={item.key}
-              testID={`${testIDPrefix}-menu-${item.key}`}
-              activeOpacity={0.6}
-              style={[styles.row, index > 0 && styles.rowDivider]}
-              onPress={() => closeMenu(item.onPress)}
-            >
-              <Text
-                style={[styles.label, item.destructive && styles.destructive]}
-              >
-                {item.label}
-              </Text>
-              <View style={styles.icon}>{item.icon}</View>
-            </TouchableOpacity>
-          ))}
-        </Animated.View>
-      </Modal>
-    </>
-  );
-};
-
-const styles = StyleSheet.create({
-  button: {
-    width: 40,
-    height: 40,
-    borderRadius: 20,
-    backgroundColor: 'rgba(0,0,0,0.28)',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  card: {
-    position: 'absolute',
-    minWidth: 200,
-    backgroundColor: '#FFFFFF',
-    borderRadius: 14,
-    paddingVertical: 4,
-    shadowColor: '#121219',
-    shadowOffset: { width: 0, height: 6 },
-    shadowOpacity: 0.18,
-    shadowRadius: 16,
-    elevation: 12,
-  },
-  row: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    gap: 24,
-    paddingHorizontal: 16,
-    paddingVertical: 13,
-  },
-  rowDivider: {
-    borderTopWidth: StyleSheet.hairlineWidth,
-    borderTopColor: '#EFEFF2',
-  },
-  label: {
-    fontSize: 16,
-    color: '#141414',
-  },
-  destructive: {
-    color: '#E53935',
-  },
-  icon: {
-    width: 22,
-    alignItems: 'center',
-  },
-});
-
-export default ProfileMenu;

package/src/helpers/getChatBackground.ts

@@ -1,18 +0,0 @@
-/** @format */
-
-import type { IConfig } from '../types/types';
-
-/** Ground behind the conversation, and behind the rounded corners of the
- * header and the composer that sit over it. */
-export const DEFAULT_CHAT_BACKGROUND = '#F3F6FC';
-
-/**
- * One place for the conversation's background colour.
- *
- * The message list has always painted it; the chat container behind it was
- * plain white, which is what made the header's rounded bottom corners and
- * the composer's rounded top corners invisible — the corners revealed the
- * white parent, not the conversation.
- */
-export const getChatBackgroundColor = (config?: IConfig): string =>
-  config?.backgroundChat?.color || DEFAULT_CHAT_BACKGROUND;

package/src/helpers/mediaLibraryRuntime.ts

@@ -1,25 +0,0 @@
-let cached: any | undefined;
-
-export const getMediaLibrary = (): any | null => {
-  if (cached !== undefined) {return cached;}
-  try {
-    const legacy = require('expo-media-library/legacy');
-
-    if (legacy?.getAssetsAsync) {
-      cached = legacy;
-      return cached;
-    }
-  } catch {
-  }
-
-  try {
-    cached = require('expo-media-library') ?? null;
-  } catch {
-    cached = null;
-  }
-  return cached;
-};
-
-export const __resetMediaLibraryCache = () => {
-  cached = undefined;
-};

package/src/helpers/pickImageAsset.ts

@@ -1,68 +0,0 @@
-import { Alert, Linking } from 'react-native';
-import * as ImagePicker from 'expo-image-picker';
-
-/**
- * A picked image in the shape React Native's FormData understands.
- *
- * NOT a web `File`: RN streams a multipart part straight from a `file://`
- * uri and has no usable Blob/File/atob path. Screens ported from the web
- * client used to carry base64 -> Blob -> File helpers that could never
- * have run here.
- */
-export interface PickedImage {
-  uri: string;
-  type: string;
-  name: string;
-}
-
-/**
- * Ask for library permission, open the picker, and normalise the result.
- *
- * Returns `null` for every non-error outcome — permission refused, user
- * cancelled — so call sites can simply keep their current value.
- *
- * Exists because the avatar pickers are wired to `onPress`, which hands
- * the callback a SyntheticEvent. Storing that event as "the image" (what
- * two screens used to do) rendered a pooled event as an <Image source>
- * and then crashed with "Property is not configurable" when React tried
- * to release it — on top of never letting the user pick anything.
- */
-export const pickImageAsset = async (): Promise<PickedImage | null> => {
-  try {
-    // expo-image-picker owns the permission prompt internally and
-    // returns a `granted` flag.
-    const perm = await ImagePicker.requestMediaLibraryPermissionsAsync();
-    if (!perm.granted) {
-      Alert.alert(
-        'Permission required',
-        'Photo library permission is needed to select images.',
-        [
-          { text: 'Cancel', style: 'cancel' },
-          { text: 'Open Settings', onPress: () => Linking.openSettings() },
-        ]
-      );
-      return null;
-    }
-
-    const result = await ImagePicker.launchImageLibraryAsync({
-      mediaTypes: ['images'],
-      allowsEditing: true,
-      aspect: [1, 1],
-      quality: 0.8,
-    });
-    if (result.canceled || !result.assets?.[0]) {
-      return null;
-    }
-
-    const asset = result.assets[0];
-    const originalName = asset.fileName || asset.uri.split('/').pop();
-    return {
-      uri: asset.uri,
-      type: asset.mimeType || 'image/jpeg',
-      name: originalName || `image_${Date.now()}.jpg`,
-    };
-  } catch (error) {
-    console.error('Failed to pick an image:', error);
-    return null;
-  }
-};

package/src/helpers/sheetGestures.ts

@@ -1,25 +0,0 @@
-/** @format */
-
-/**
- * Shared thresholds for the drag-to-dismiss gesture on bottom sheets (the
- * attach sheet, the profile headers, the room-list menu). Kept in one
- * place so a pull feels identical wherever the user does it — and so the
- * numbers are unit-testable without a touch event.
- */
-
-/** Drag past this many points and letting go dismisses the sheet. */
-export const DISMISS_DISTANCE = 90;
-/** …or flick faster than this, however short the drag. */
-export const DISMISS_VELOCITY = 0.8;
-
-/**
- * Claim a drag only once it is clearly a downward pull, so a tap on a row
- * still registers and a horizontal swipe stays with whatever scrolls
- * sideways inside the sheet.
- */
-export const shouldClaimVerticalDrag = (dy: number, dx: number) =>
-  dy > 6 && Math.abs(dy) > Math.abs(dx) * 1.5;
-
-/** Far enough / fast enough to let go of the sheet. */
-export const shouldDismissOnDrag = (dy: number, vy: number) =>
-  dy > DISMISS_DISTANCE || vy > DISMISS_VELOCITY;