@ethora/chat-component-rn 26.7.10 → 26.8.1

package/src/components/Modals/AttachSheet/AttachSheet.tsx

@@ -1,41 +1,20 @@
 /** @format */
 
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import {
-  ActivityIndicator,
   Animated,
   Easing,
-  Image,
   Modal,
-  PanResponder,
   Platform,
-  ScrollView,
   StyleSheet,
   Text,
   TouchableOpacity,
   View,
 } from 'react-native';
-import { CameraIcon, DocumentIcon } from '../../../assets/icons';
+import { CameraIcon, DocumentIcon, MediaIcon } from '../../../assets/icons';
 import { useChatSettingState } from '../../../hooks/useChatSettingState';
 import { chatTextStyle } from '../../../helpers/typography';
-import { getMediaLibrary } from '../../../helpers/mediaLibraryRuntime';
-import {
-  shouldClaimVerticalDrag,
-  shouldDismissOnDrag,
-} from '../../../helpers/sheetGestures';
-
-interface RecentItem {
-  id: string;
-  uri: string;
-  filename: string;
-}
-
-export interface PickedMedia {
-  uri: string;
-  name: string;
-  mimeType?: string;
-  isVideo: boolean;
-}
+import { useT } from '../../../i18n/useT';
 
 interface AttachSheetProps {
   visible: boolean;
@@ -43,54 +22,13 @@ interface AttachSheetProps {
   onCamera: () => void;
   onGallery: () => void;
   onDocument: () => void;
-  onPickMedia?: (media: PickedMedia) => void;
   primaryColor?: string;
 }
 
 // Starting translateY for the sheet. Larger than any realistic sheet
 // height so it sits fully below the viewport before opening; the exact
 // number doesn't matter visually because it animates to 0.
-const SHEET_OFFSCREEN = 800;
-// Re-exported so this sheet's own tests keep addressing them here.
-export { shouldClaimVerticalDrag, shouldDismissOnDrag };
-
-const RECENTS_COUNT = 12;
-const THUMB_SIZE = 88;
-const THUMB_DECODE = THUMB_SIZE * 2;
-
-const EXT_MIME: Record<string, string> = {
-  jpg: 'image/jpeg',
-  jpeg: 'image/jpeg',
-  png: 'image/png',
-  gif: 'image/gif',
-  webp: 'image/webp',
-  heic: 'image/heic',
-  heif: 'image/heif',
-};
-
-const guessMimeType = (name: string) => {
-  const ext = name.split('.').pop()?.toLowerCase() ?? '';
-  return EXT_MIME[ext] ?? 'image/jpeg';
-};
-
-const toRecentItem = async (
-  MediaLibrary: any,
-  asset: any
-): Promise<RecentItem | null> => {
-  const filename = asset?.filename || `photo_${asset?.id ?? Date.now()}`;
-  if (asset?.uri && !asset.uri.startsWith('ph://')) {
-    return { id: asset.id, uri: asset.uri, filename };
-  }
-  try {
-    const info = await MediaLibrary?.getAssetInfoAsync?.(asset, {
-      shouldDownloadFromNetwork: false,
-    });
-    if (!info?.localUri) {return null;}
-    return { id: asset.id, uri: info.localUri, filename };
-  } catch {
-    return null;
-  }
-};
+const SHEET_OFFSCREEN = 600;
 
 const AttachSheet: React.FC<AttachSheetProps> = ({
   visible,
@@ -98,17 +36,17 @@ const AttachSheet: React.FC<AttachSheetProps> = ({
   onCamera,
   onGallery,
   onDocument,
-  onPickMedia,
   primaryColor = '#0052CD',
 }) => {
   const { config } = useChatSettingState();
   const ts = config?.typography?.attachSheet;
+  const t = useT();
+  // Pending handler captured on row tap — runs once the EXIT animation
+  // finishes so iOS doesn't try to present an image picker over a
+  // still-dismissing modal (was the original reason for the
+  // platform-split + Modal.onDismiss dance). The animation completion
+  // callback now drives this on both platforms.
   const pendingRef = useRef<(() => void) | null>(null);
-  const runPending = () => {
-    const fn = pendingRef.current;
-    pendingRef.current = null;
-    fn?.();
-  };
 
   // Local "modal stays mounted while animating out" state. The parent
   // controls `visible`; we mirror it but delay unmount until the exit
@@ -127,9 +65,6 @@ const AttachSheet: React.FC<AttachSheetProps> = ({
     new Animated.Value(SHEET_OFFSCREEN)
   ).current;
 
-  const onCloseRef = useRef(onClose);
-  onCloseRef.current = onClose;
-
   useEffect(() => {
     if (visible) {
       setMounted(true);
@@ -162,6 +97,8 @@ const AttachSheet: React.FC<AttachSheetProps> = ({
       return () => cancelAnimationFrame(raf);
     }
     if (!mounted) {return;}
+    // Exit: fade the backdrop, slide the sheet down, then unmount and
+    // fire any pending picker handler.
     Animated.parallel([
       Animated.timing(backdropOpacity, {
         toValue: 0,
@@ -178,133 +115,43 @@ const AttachSheet: React.FC<AttachSheetProps> = ({
     ]).start(({ finished }) => {
       if (!finished) {return;} // interrupted (rapid re-open) → leave state alone
       setMounted(false);
-      if (Platform.OS !== 'ios') {
-        runPending();
-      }
+      const fn = pendingRef.current;
+      pendingRef.current = null;
+      fn?.();
     });
     return undefined;
   }, [visible]); // eslint-disable-line react-hooks/exhaustive-deps
 
-  const makeDragResponder = (claimOnStart: boolean) =>
-    PanResponder.create({
-      onStartShouldSetPanResponder: () => claimOnStart,
-      // Capture, so a pull that starts on a row (whose Touchable grabbed
-      // the responder on touch-down) still drags the sheet.
-      onMoveShouldSetPanResponderCapture: (_evt, g) =>
-        claimOnStart || shouldClaimVerticalDrag(g.dy, g.dx),
-      onMoveShouldSetPanResponder: (_evt, g) =>
-        claimOnStart || shouldClaimVerticalDrag(g.dy, g.dx),
-      onPanResponderTerminationRequest: () => false,
-      onPanResponderMove: (_evt, g) => {
-        sheetTranslateY.setValue(Math.max(0, g.dy));
-      },
-      onPanResponderRelease: (_evt, g) => {
-        if (shouldDismissOnDrag(g.dy, g.vy)) {
-          onCloseRef.current();
-          return;
-        }
-        Animated.spring(sheetTranslateY, {
-          toValue: 0,
-          tension: 90,
-          friction: 14,
-          useNativeDriver: true,
-        }).start();
-      },
-      onPanResponderTerminate: () => {
-        Animated.spring(sheetTranslateY, {
-          toValue: 0,
-          tension: 90,
-          friction: 14,
-          useNativeDriver: true,
-        }).start();
-      },
-    });
-
-  const sheetPanRef = useRef<ReturnType<typeof makeDragResponder> | null>(null);
-  const grabberPanRef = useRef<ReturnType<typeof makeDragResponder> | null>(null);
-  if (!sheetPanRef.current) {sheetPanRef.current = makeDragResponder(false);}
-  if (!grabberPanRef.current) {grabberPanRef.current = makeDragResponder(true);}
-  const sheetPan = sheetPanRef.current;
-  const grabberPan = grabberPanRef.current;
-
-  const [recents, setRecents] = useState<RecentItem[]>([]);
-  const [loadingRecents, setLoadingRecents] = useState(false);
-  const lastLoadRef = useRef(0);
-  const RECENTS_TTL_MS = 15000;
-
-  const loadRecents = useCallback(async () => {
-    const MediaLibrary = getMediaLibrary();
-    if (!MediaLibrary?.getAssetsAsync) {
-      setLoadingRecents(false);
-      return;
-    }
-    try {
-      const perm = await MediaLibrary.getPermissionsAsync();
-      if (!perm?.granted) {
-        setRecents([]);
-        return;
-      }
-      const page = await MediaLibrary.getAssetsAsync({
-        first: RECENTS_COUNT,
-        sortBy: [MediaLibrary.SortBy?.creationTime ?? 'creationTime'],
-        mediaType: [MediaLibrary.MediaType?.photo ?? 'photo'],
-      });
-      const items = await Promise.all(
-        (page?.assets ?? []).map((asset: any) => toRecentItem(MediaLibrary, asset))
-      );
-      lastLoadRef.current = Date.now();
-      setRecents(items.filter(Boolean) as RecentItem[]);
-    } catch (err) {
-      console.warn('AttachSheet: could not read recent media', err);
-      setRecents([]);
-    } finally {
-      setLoadingRecents(false);
-    }
-  }, []);
-
-  useEffect(() => {
-    if (!visible) {return undefined;}
-    if (recents.length && Date.now() - lastLoadRef.current < RECENTS_TTL_MS) {
-      return undefined;
-    }
-    setLoadingRecents(true);
-    const timer = setTimeout(() => {
-      loadRecents();
-    }, 250);
-    return () => clearTimeout(timer);
-  }, [visible]);
-
   const trigger = (handler: () => void) => () => {
+    // Capture the handler and ask parent to close. The exit-animation
+    // completion above fires `handler` AFTER the sheet has slid away,
+    // so iOS no longer tries to present a picker over a dismissing
+    // modal — and Android no longer needs the ad-hoc 150ms setTimeout.
     pendingRef.current = handler;
-    if (Platform.OS === 'ios') {
-      setMounted(false);
-    }
     onClose();
   };
 
-  const handleRecentPress = (item: RecentItem) =>
-    trigger(() => {
-      if (onPickMedia) {
-        onPickMedia({
-          uri: item.uri,
-          name: item.filename,
-          mimeType: guessMimeType(item.filename),
-          isVideo: false,
-        });
-      } else {
-        onGallery();
-      }
-    });
-
   const rows: {
-    id: string;
     label: string;
+    hint: string;
     Icon: React.ComponentType<any>;
     handler: () => void;
   }[] = [
     {
-      id: 'Document',
-      label: 'Upload a File',
+      label: t('attach.takePhoto'),
+      hint: t('attach.takePhotoHint'),
+      Icon: CameraIcon,
+      handler: onCamera,
+    },
+    {
+      label: t('attach.photoOrVideo'),
+      hint: t('attach.photoOrVideoHint'),
+      Icon: MediaIcon,
+      handler: onGallery,
+    },
+    {
+      label: t('attach.document'),
+      hint: t('attach.documentHint'),
       Icon: DocumentIcon,
       handler: onDocument,
     },
@@ -321,13 +168,11 @@ const AttachSheet: React.FC<AttachSheetProps> = ({
       onRequestClose={onClose}
       // Hardware-back / iOS gesture also routes through onClose, which
       // flips `visible` and triggers our exit animation above.
-      onDismiss={Platform.OS === 'ios' ? runPending : undefined}
     >
       <Animated.View
         style={[styles.backdrop, { opacity: backdropOpacity }]}
       >
         <TouchableOpacity
-          testID="attach-backdrop"
           style={StyleSheet.absoluteFill}
           activeOpacity={1}
           onPress={onClose}
@@ -337,101 +182,42 @@ const AttachSheet: React.FC<AttachSheetProps> = ({
             styles.sheet,
             { transform: [{ translateY: sheetTranslateY }] },
           ]}
-          {...sheetPan.panHandlers}
         >
-          <View
-            testID="attach-grabber"
-            style={styles.grabberArea}
-            {...grabberPan.panHandlers}
-          >
+          <TouchableOpacity activeOpacity={1}>
             <View style={styles.grabber} />
-          </View>
-
-          {/* Photos & Videos ------------------------------------------------ */}
-          <View style={styles.sectionHeader}>
-            <Text style={[styles.sectionTitle, chatTextStyle(ts?.title)]}>
-              Photos & Videos
-            </Text>
-            <TouchableOpacity
-              testID="attach-view-library"
-              activeOpacity={0.6}
-              onPress={trigger(onGallery)}
-              hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
-            >
-              <Text
+            <Text style={[styles.title, chatTextStyle(ts?.title)]}>{t('attach.title')}</Text>
+            {rows.map(({ label, hint, Icon, handler }, idx) => (
+              <TouchableOpacity
+                key={label}
+                activeOpacity={0.6}
                 style={[
-                  styles.sectionAction,
-                  { color: primaryColor },
-                  chatTextStyle(ts?.viewLibrary),
+                  styles.row,
+                  idx < rows.length - 1 && styles.rowDivider,
                 ]}
+                onPress={trigger(handler)}
               >
-                View Library
-              </Text>
-            </TouchableOpacity>
-          </View>
-
-          <ScrollView
-            horizontal
-            showsHorizontalScrollIndicator={false}
-            contentContainerStyle={styles.strip}
-            keyboardShouldPersistTaps="handled"
-          >
-            {/* Camera tile — always first, works without library access. */}
-            <TouchableOpacity
-              testID="attach-row-Camera"
-              activeOpacity={0.7}
-              style={styles.cameraTile}
-              onPress={trigger(onCamera)}
-            >
-              <CameraIcon color="#8A8A8E" width={26} height={26} />
-            </TouchableOpacity>
-
-            {loadingRecents && recents.length === 0 && (
-              <View style={styles.loadingTile}>
-                <ActivityIndicator color="#8A8A8E" />
-              </View>
-            )}
-
-            {recents.map((item) => (
-              <TouchableOpacity
-                key={item.id}
-                testID={`attach-recent-${item.id}`}
-                activeOpacity={0.8}
-                style={styles.thumbWrap}
-                onPress={handleRecentPress(item)}
-              >
-                <Image
-                  source={{
-                    uri: item.uri,
-                    width: THUMB_DECODE,
-                    height: THUMB_DECODE,
-                  }}
-                  style={styles.thumb}
-                  resizeMethod="resize"
-                  resizeMode="cover"
-                  fadeDuration={0}
-                />
+                <View
+                  style={[
+                    styles.iconBubble,
+                    { backgroundColor: primaryColor + '14' },
+                  ]}
+                >
+                  <Icon color={primaryColor} width={20} height={20} />
+                </View>
+                <View style={styles.rowText}>
+                  <Text style={[styles.rowLabel, chatTextStyle(ts?.rowLabel)]}>{label}</Text>
+                  <Text style={[styles.rowHint, chatTextStyle(ts?.rowHint)]}>{hint}</Text>
+                </View>
               </TouchableOpacity>
             ))}
-          </ScrollView>
-
-          <View style={styles.rowsDivider} />
-          {rows.map(({ id, label, Icon, handler }) => (
             <TouchableOpacity
-              key={id}
-              testID={`attach-row-${id}`}
               activeOpacity={0.6}
-              style={styles.row}
-              onPress={trigger(handler)}
+              style={styles.cancelRow}
+              onPress={onClose}
             >
-              <View style={styles.rowIcon}>
-                <Icon color="#1C1C1E" width={20} height={20} />
-              </View>
-              <Text style={[styles.rowLabel, chatTextStyle(ts?.rowLabel)]}>
-                {label}
-              </Text>
+              <Text style={[styles.cancelLabel, chatTextStyle(ts?.cancelButton)]}>{t('action.cancel')}</Text>
             </TouchableOpacity>
-          ))}
+          </TouchableOpacity>
         </Animated.View>
       </Animated.View>
     </Modal>
@@ -448,7 +234,7 @@ const styles = StyleSheet.create({
     backgroundColor: '#fff',
     borderTopLeftRadius: 24,
     borderTopRightRadius: 24,
-    paddingTop: 4,
+    paddingTop: 8,
     paddingBottom: Platform.OS === 'ios' ? 32 : 20,
     shadowColor: '#000',
     shadowOffset: { width: 0, height: -2 },
@@ -456,83 +242,65 @@ const styles = StyleSheet.create({
     shadowRadius: 12,
     elevation: 16,
   },
-  grabberArea: {
-    alignItems: 'center',
-    paddingTop: 10,
-    paddingBottom: 14,
-  },
   grabber: {
+    alignSelf: 'center',
     width: 40,
     height: 4,
     borderRadius: 2,
     backgroundColor: '#D9D9DE',
+    marginBottom: 12,
   },
-  sectionHeader: {
+  title: {
+    fontSize: 13,
+    fontWeight: '600',
+    color: '#8A8A8E',
+    letterSpacing: 0.4,
+    textTransform: 'uppercase',
+    paddingHorizontal: 20,
+    paddingBottom: 8,
+  },
+  row: {
     flexDirection: 'row',
     alignItems: 'center',
-    justifyContent: 'space-between',
     paddingHorizontal: 20,
-    paddingBottom: 12,
+    paddingVertical: 14,
   },
-  sectionTitle: {
-    fontSize: 17,
-    fontWeight: '700',
-    color: '#1C1C1E',
+  rowDivider: {
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: '#EFEFF2',
   },
-  sectionAction: {
-    fontSize: 15,
-    fontWeight: '500',
-  },
-  strip: {
-    paddingHorizontal: 16,
-    paddingBottom: 16,
-    gap: 8,
-  },
-  cameraTile: {
-    width: THUMB_SIZE,
-    height: THUMB_SIZE,
-    borderRadius: 16,
-    borderWidth: 1,
-    borderColor: '#E4E4E9',
-    backgroundColor: '#FAFAFC',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  loadingTile: {
-    width: THUMB_SIZE,
-    height: THUMB_SIZE,
+  iconBubble: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
     alignItems: 'center',
     justifyContent: 'center',
+    marginRight: 14,
   },
-  thumbWrap: {
-    width: THUMB_SIZE,
-    height: THUMB_SIZE,
-    borderRadius: 16,
-    overflow: 'hidden',
-    backgroundColor: '#EFEFF2',
-  },
-  thumb: {
-    width: '100%',
-    height: '100%',
+  rowText: {
+    flex: 1,
   },
-  rowsDivider: {
-    height: StyleSheet.hairlineWidth,
-    backgroundColor: '#EFEFF2',
+  rowLabel: {
+    fontSize: 16,
+    fontWeight: '500',
+    color: '#1C1C1E',
   },
-  row: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: 20,
-    paddingVertical: 16,
+  rowHint: {
+    fontSize: 12,
+    color: '#8A8A8E',
+    marginTop: 2,
   },
-  rowIcon: {
-    width: 28,
+  cancelRow: {
+    marginTop: 8,
+    marginHorizontal: 16,
+    paddingVertical: 14,
+    borderRadius: 14,
     alignItems: 'center',
-    marginRight: 12,
+    backgroundColor: '#F2F2F7',
   },
-  rowLabel: {
+  cancelLabel: {
     fontSize: 16,
-    fontWeight: '500',
+    fontWeight: '600',
     color: '#1C1C1E',
   },
 });