@kesha-antonov/react-native-chat 5.0.1 → 6.0.0

package/lib/components/AttachmentSheet.js

@@ -1,177 +1,537 @@
+import { c as _c } from "react/compiler-runtime";
 import React, { useCallback, useEffect, useRef } from 'react';
-import { Modal, Pressable, StyleSheet, Text, View } from 'react-native';
+import { Modal, Pressable, StyleSheet, Text, View, useWindowDimensions } from 'react-native';
+import Animated, { Easing, ReduceMotion, runOnJS, useAnimatedStyle, useSharedValue, withSpring, withTiming } from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useAnimatedPresence } from '../hooks/useAnimatedPresence';
 import { useThemedStyles } from '../hooks/useTheme';
-// Optional native bottom sheet (Telegram-style: native grabber, dimmed backdrop,
-// drag-to-dismiss, detents). Resolved through a try/catch require so the bundle
+import { getTrueSheet } from '../optional';
+// Optional native bottom sheet (native grabber, dimmed backdrop,
+// drag-to-dismiss, detents). Resolved through the optional-peer registry (`src/optional`) so the bundle
 // works whether or not it's installed; without it we fall back to a Modal sheet.
-let trueSheetMod = null;
-try {
-    trueSheetMod = require('@lodev09/react-native-true-sheet');
-}
-catch {
-    trueSheetMod = null;
-}
-const TrueSheet = trueSheetMod?.TrueSheet ?? null;
+const TrueSheet = getTrueSheet()?.TrueSheet ?? null;
 export const isTrueSheetAvailable = !!TrueSheet;
 // Shared content (grid of tiles when any action has an icon, otherwise a list).
-const SheetContent = ({ actions, tintColor, onAction, styles, }) => {
-    const isGrid = actions.some(a => a.icon);
-    if (isGrid)
-        return (<View style={styles.grid}>
-        {actions.map((item, index) => (<Pressable key={`${item.title}-${index}`} onPress={() => onAction(item.action)} style={({ pressed }) => [styles.tile, pressed && styles.tilePressed]}>
-            <View style={[styles.tileIcon, { backgroundColor: item.color ?? styles.accent.color }]}>
-              {item.icon?.({ color: '#fff', size: 26 })}
-            </View>
-            <Text style={styles.tileLabel} numberOfLines={1}>{item.title}</Text>
-          </Pressable>))}
-      </View>);
-    return (<View>
-      {actions.map((item, index) => (<Pressable key={`${item.title}-${index}`} onPress={() => onAction(item.action)} style={({ pressed }) => [
-                styles.row,
-                index > 0 && styles.rowDivider,
-                pressed && styles.rowPressed,
-            ]}>
-          <Text style={[styles.rowText, { color: item.destructive ? styles.destructive.color : (tintColor ?? styles.accent.color) }]}>
-            {item.title}
-          </Text>
-        </Pressable>))}
-    </View>);
+const SheetContent = t0 => {
+  const $ = _c(29);
+  const {
+    actions,
+    tintColor,
+    onAction,
+    styles
+  } = t0;
+  const isGrid = actions.some(_temp);
+  if (isGrid) {
+    const t1 = styles.grid;
+    let t2;
+    if ($[0] !== actions || $[1] !== onAction || $[2] !== styles.accent || $[3] !== styles.tile || $[4] !== styles.tileIcon || $[5] !== styles.tileLabel || $[6] !== styles.tilePressed) {
+      let t3;
+      if ($[8] !== onAction || $[9] !== styles.accent || $[10] !== styles.tile || $[11] !== styles.tileIcon || $[12] !== styles.tileLabel || $[13] !== styles.tilePressed) {
+        t3 = (item, index) => <Pressable key={`${item.title}-${index}`} onPress={() => onAction(item.action)} style={t4 => {
+          const {
+            pressed
+          } = t4;
+          return [styles.tile, pressed && styles.tilePressed];
+        }}><View style={[styles.tileIcon, {
+            backgroundColor: item.color ?? styles.accent.color
+          }]}>{item.icon?.({
+              color: "#fff",
+              size: 26
+            })}</View><Text style={styles.tileLabel} numberOfLines={1}>{item.title}</Text></Pressable>;
+        $[8] = onAction;
+        $[9] = styles.accent;
+        $[10] = styles.tile;
+        $[11] = styles.tileIcon;
+        $[12] = styles.tileLabel;
+        $[13] = styles.tilePressed;
+        $[14] = t3;
+      } else {
+        t3 = $[14];
+      }
+      t2 = actions.map(t3);
+      $[0] = actions;
+      $[1] = onAction;
+      $[2] = styles.accent;
+      $[3] = styles.tile;
+      $[4] = styles.tileIcon;
+      $[5] = styles.tileLabel;
+      $[6] = styles.tilePressed;
+      $[7] = t2;
+    } else {
+      t2 = $[7];
+    }
+    let t3;
+    if ($[15] !== styles.grid || $[16] !== t2) {
+      t3 = <View style={t1}>{t2}</View>;
+      $[15] = styles.grid;
+      $[16] = t2;
+      $[17] = t3;
+    } else {
+      t3 = $[17];
+    }
+    return t3;
+  }
+  let t1;
+  if ($[18] !== actions || $[19] !== onAction || $[20] !== styles || $[21] !== tintColor) {
+    let t2;
+    if ($[23] !== onAction || $[24] !== styles || $[25] !== tintColor) {
+      t2 = (item_0, index_0) => <Pressable key={`${item_0.title}-${index_0}`} onPress={() => onAction(item_0.action)} style={t3 => {
+        const {
+          pressed: pressed_0
+        } = t3;
+        return [styles.row, index_0 > 0 && styles.rowDivider, pressed_0 && styles.rowPressed];
+      }}><Text style={[styles.rowText, {
+          color: item_0.destructive ? styles.destructive.color : tintColor ?? styles.accent.color
+        }]}>{item_0.title}</Text></Pressable>;
+      $[23] = onAction;
+      $[24] = styles;
+      $[25] = tintColor;
+      $[26] = t2;
+    } else {
+      t2 = $[26];
+    }
+    t1 = actions.map(t2);
+    $[18] = actions;
+    $[19] = onAction;
+    $[20] = styles;
+    $[21] = tintColor;
+    $[22] = t1;
+  } else {
+    t1 = $[22];
+  }
+  let t2;
+  if ($[27] !== t1) {
+    t2 = <View>{t1}</View>;
+    $[27] = t1;
+    $[28] = t2;
+  } else {
+    t2 = $[28];
+  }
+  return t2;
 };
+
 // Primary path: a real native bottom sheet via react-native-true-sheet.
-const TrueSheetAttachment = ({ visible, actions, onClose, tintColor }) => {
-    const styles = useThemedStyles(createStyles);
-    const insets = useSafeAreaInsets();
-    const ref = useRef(null);
-    const presented = useRef(false);
-    useEffect(() => {
-        // Guard against dismissing before the first present (TrueSheet rejects with
-        // "No sheet" otherwise) and swallow the returned promise's rejection.
-        if (visible) {
-            presented.current = true;
-            ref.current?.present()?.catch(() => { });
-        }
-        else if (presented.current) {
-            presented.current = false;
-            ref.current?.dismiss()?.catch(() => { });
+const TrueSheetAttachment = t0 => {
+  const $ = _c(23);
+  const {
+    visible,
+    actions,
+    onClose,
+    tintColor
+  } = t0;
+  const styles = useThemedStyles(createStyles);
+  const insets = useSafeAreaInsets();
+  const ref = useRef(null);
+  const presented = useRef(false);
+  let t1;
+  let t2;
+  if ($[0] !== visible) {
+    t1 = () => {
+      if (visible) {
+        presented.current = true;
+        ref.current?.present()?.catch(_temp2);
+      } else {
+        if (presented.current) {
+          presented.current = false;
+          ref.current?.dismiss()?.catch(_temp3);
         }
-    }, [visible]);
-    const onAction = useCallback((action) => {
-        action();
-        presented.current = false;
-        ref.current?.dismiss()?.catch(() => { });
-    }, []);
-    return (<TrueSheet ref={ref} sizes={['auto']} cornerRadius={16} grabber dimmed backgroundColor={styles.group.backgroundColor} onDismiss={onClose}>
-      <View style={[styles.trueContent, { paddingBottom: insets.bottom + 12 }]}>
-        <SheetContent actions={actions} tintColor={tintColor} onAction={onAction} styles={styles}/>
-      </View>
-    </TrueSheet>);
+      }
+    };
+    t2 = [visible];
+    $[0] = visible;
+    $[1] = t1;
+    $[2] = t2;
+  } else {
+    t1 = $[1];
+    t2 = $[2];
+  }
+  useEffect(t1, t2);
+  let t3;
+  if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = action => {
+      action();
+      presented.current = false;
+      ref.current?.dismiss()?.catch(_temp4);
+    };
+    $[3] = t3;
+  } else {
+    t3 = $[3];
+  }
+  const onAction = t3;
+  let t4;
+  if ($[4] !== onClose) {
+    t4 = () => {
+      presented.current = false;
+      onClose();
+    };
+    $[4] = onClose;
+    $[5] = t4;
+  } else {
+    t4 = $[5];
+  }
+  const onDidDismiss = t4;
+  let t5;
+  if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+    t5 = ["auto"];
+    $[6] = t5;
+  } else {
+    t5 = $[6];
+  }
+  const t6 = styles.group.backgroundColor;
+  const t7 = insets.bottom + 12;
+  let t8;
+  if ($[7] !== t7) {
+    t8 = {
+      paddingBottom: t7
+    };
+    $[7] = t7;
+    $[8] = t8;
+  } else {
+    t8 = $[8];
+  }
+  let t9;
+  if ($[9] !== styles.trueContent || $[10] !== t8) {
+    t9 = [styles.trueContent, t8];
+    $[9] = styles.trueContent;
+    $[10] = t8;
+    $[11] = t9;
+  } else {
+    t9 = $[11];
+  }
+  let t10;
+  if ($[12] !== actions || $[13] !== styles || $[14] !== tintColor) {
+    t10 = <SheetContent actions={actions} tintColor={tintColor} onAction={onAction} styles={styles} />;
+    $[12] = actions;
+    $[13] = styles;
+    $[14] = tintColor;
+    $[15] = t10;
+  } else {
+    t10 = $[15];
+  }
+  let t11;
+  if ($[16] !== t10 || $[17] !== t9) {
+    t11 = <View style={t9}>{t10}</View>;
+    $[16] = t10;
+    $[17] = t9;
+    $[18] = t11;
+  } else {
+    t11 = $[18];
+  }
+  let t12;
+  if ($[19] !== onDidDismiss || $[20] !== t11 || $[21] !== t6) {
+    t12 = <TrueSheet ref={ref} detents={t5} cornerRadius={16} grabber={true} dimmed={true} backgroundColor={t6} onDidDismiss={onDidDismiss}>{t11}</TrueSheet>;
+    $[19] = onDidDismiss;
+    $[20] = t11;
+    $[21] = t6;
+    $[22] = t12;
+  } else {
+    t12 = $[22];
+  }
+  return t12;
+};
+
+// The sheet rises on a firm spring with no visible overshoot - the iOS sheet
+// feel - and drops away faster than it came.
+const SHEET_SPRING = {
+  damping: 30,
+  stiffness: 320,
+  mass: 1,
+  reduceMotion: ReduceMotion.System
 };
+const SHEET_OUT = {
+  duration: 220,
+  easing: Easing.in(Easing.cubic),
+  reduceMotion: ReduceMotion.System
+};
+const BACKDROP_IN = {
+  duration: 250,
+  easing: Easing.out(Easing.cubic),
+  reduceMotion: ReduceMotion.System
+};
+
 // Fallback: a Modal sheet with a dimmed backdrop and a grab handle. Slides up,
 // dismisses on backdrop tap (used when react-native-true-sheet isn't installed).
-const ModalAttachment = ({ visible, actions, onClose, tintColor }) => {
-    const styles = useThemedStyles(createStyles);
-    const insets = useSafeAreaInsets();
-    const onAction = useCallback((action) => {
+const ModalAttachment = t0 => {
+  const $ = _c(44);
+  const {
+    visible,
+    actions,
+    onClose,
+    tintColor
+  } = t0;
+  const styles = useThemedStyles(createStyles);
+  const insets = useSafeAreaInsets();
+  const {
+    height: windowHeight
+  } = useWindowDimensions();
+  const backdrop = useSharedValue(0);
+  const offset = useSharedValue(windowHeight);
+  let t1;
+  if ($[0] !== backdrop || $[1] !== offset || $[2] !== windowHeight) {
+    t1 = () => {
+      offset.set(windowHeight);
+      offset.set(withSpring(0, SHEET_SPRING));
+      backdrop.set(withTiming(1, BACKDROP_IN));
+    };
+    $[0] = backdrop;
+    $[1] = offset;
+    $[2] = windowHeight;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  const animateIn = t1;
+  let t2;
+  if ($[4] !== backdrop || $[5] !== offset || $[6] !== windowHeight) {
+    t2 = onDone => {
+      backdrop.set(withTiming(0, SHEET_OUT));
+      offset.set(withTiming(windowHeight, SHEET_OUT, finished => {
+        if (finished) {
+          runOnJS(onDone)();
+        }
+      }));
+    };
+    $[4] = backdrop;
+    $[5] = offset;
+    $[6] = windowHeight;
+    $[7] = t2;
+  } else {
+    t2 = $[7];
+  }
+  const animateOut = t2;
+  const {
+    isMounted,
+    close
+  } = useAnimatedPresence(visible, animateIn, animateOut);
+  let t3;
+  if ($[8] !== close || $[9] !== onClose) {
+    t3 = () => close(onClose);
+    $[8] = close;
+    $[9] = onClose;
+    $[10] = t3;
+  } else {
+    t3 = $[10];
+  }
+  const dismiss = t3;
+  let t4;
+  if ($[11] !== close || $[12] !== onClose) {
+    t4 = action => {
+      close(() => {
         action();
         onClose();
-    }, [onClose]);
-    return (<Modal transparent visible={visible} animationType='slide' onRequestClose={onClose} statusBarTranslucent>
-      <Pressable style={styles.backdrop} onPress={onClose} accessibilityLabel='dismiss'/>
-      <View style={[styles.sheetWrapper, { paddingBottom: insets.bottom + 8 }]}>
-        <View style={styles.group}>
-          <View style={styles.handle}/>
-          <SheetContent actions={actions} tintColor={tintColor} onAction={onAction} styles={styles}/>
-        </View>
-      </View>
-    </Modal>);
+      });
+    };
+    $[11] = close;
+    $[12] = onClose;
+    $[13] = t4;
+  } else {
+    t4 = $[13];
+  }
+  const onAction = t4;
+  const backdropStyle = useAnimatedStyle(() => ({
+    opacity: backdrop.value
+  }));
+  const sheetStyle = useAnimatedStyle(() => ({
+    transform: [{
+      translateY: offset.value
+    }]
+  }));
+  if (!isMounted) {
+    return null;
+  }
+  let t5;
+  if ($[14] !== backdropStyle || $[15] !== styles.backdrop) {
+    t5 = <Animated.View style={[styles.backdrop, backdropStyle]} pointerEvents="none" />;
+    $[14] = backdropStyle;
+    $[15] = styles.backdrop;
+    $[16] = t5;
+  } else {
+    t5 = $[16];
+  }
+  let t6;
+  if ($[17] !== dismiss) {
+    t6 = <Pressable style={StyleSheet.absoluteFill} onPress={dismiss} accessibilityLabel="dismiss" />;
+    $[17] = dismiss;
+    $[18] = t6;
+  } else {
+    t6 = $[18];
+  }
+  const t7 = insets.bottom + 8;
+  let t8;
+  if ($[19] !== t7) {
+    t8 = {
+      paddingBottom: t7
+    };
+    $[19] = t7;
+    $[20] = t8;
+  } else {
+    t8 = $[20];
+  }
+  let t9;
+  if ($[21] !== sheetStyle || $[22] !== styles.sheetWrapper || $[23] !== t8) {
+    t9 = [styles.sheetWrapper, t8, sheetStyle];
+    $[21] = sheetStyle;
+    $[22] = styles.sheetWrapper;
+    $[23] = t8;
+    $[24] = t9;
+  } else {
+    t9 = $[24];
+  }
+  let t10;
+  if ($[25] !== styles.handle) {
+    t10 = <View style={styles.handle} />;
+    $[25] = styles.handle;
+    $[26] = t10;
+  } else {
+    t10 = $[26];
+  }
+  let t11;
+  if ($[27] !== actions || $[28] !== onAction || $[29] !== styles || $[30] !== tintColor) {
+    t11 = <SheetContent actions={actions} tintColor={tintColor} onAction={onAction} styles={styles} />;
+    $[27] = actions;
+    $[28] = onAction;
+    $[29] = styles;
+    $[30] = tintColor;
+    $[31] = t11;
+  } else {
+    t11 = $[31];
+  }
+  let t12;
+  if ($[32] !== styles.group || $[33] !== t10 || $[34] !== t11) {
+    t12 = <View style={styles.group}>{t10}{t11}</View>;
+    $[32] = styles.group;
+    $[33] = t10;
+    $[34] = t11;
+    $[35] = t12;
+  } else {
+    t12 = $[35];
+  }
+  let t13;
+  if ($[36] !== t12 || $[37] !== t9) {
+    t13 = <Animated.View style={t9}>{t12}</Animated.View>;
+    $[36] = t12;
+    $[37] = t9;
+    $[38] = t13;
+  } else {
+    t13 = $[38];
+  }
+  let t14;
+  if ($[39] !== dismiss || $[40] !== t13 || $[41] !== t5 || $[42] !== t6) {
+    t14 = <Modal transparent={true} visible={true} animationType="none" onRequestClose={dismiss} statusBarTranslucent={true}>{t5}{t6}{t13}</Modal>;
+    $[39] = dismiss;
+    $[40] = t13;
+    $[41] = t5;
+    $[42] = t6;
+    $[43] = t14;
+  } else {
+    t14 = $[43];
+  }
+  return t14;
 };
+
 /**
- * Telegram-style attachment sheet. Uses the native `react-native-true-sheet`
+ * Attachment sheet. Uses the native `react-native-true-sheet`
  * when installed (native grabber, dimmed backdrop, drag-to-dismiss); otherwise
  * falls back to a dependency-free Modal sheet. No Cancel button - dismiss by
  * dragging down or tapping the backdrop.
  */
-export const AttachmentSheet = (props) => isTrueSheetAvailable ? <TrueSheetAttachment {...props}/> : <ModalAttachment {...props}/>;
-const createStyles = (theme) => StyleSheet.create({
-    backdrop: {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        backgroundColor: 'rgba(0,0,0,0.4)',
-    },
-    sheetWrapper: {
-        position: 'absolute',
-        left: 8,
-        right: 8,
-        bottom: 0,
-    },
-    group: {
-        backgroundColor: theme.colors.surface,
-        borderRadius: 14,
-        overflow: 'hidden',
-    },
-    // Content padding inside the native sheet (which provides its own surface).
-    trueContent: {
-        paddingTop: 8,
-    },
-    handle: {
-        alignSelf: 'center',
-        width: 36,
-        height: 4,
-        borderRadius: 2,
-        backgroundColor: theme.colors.separator,
-        marginTop: 8,
-        marginBottom: 4,
-    },
-    grid: {
-        flexDirection: 'row',
-        flexWrap: 'wrap',
-        padding: 12,
-    },
-    tile: {
-        width: '25%',
-        alignItems: 'center',
-        paddingVertical: 12,
-    },
-    tilePressed: {
-        opacity: 0.6,
-    },
-    tileIcon: {
-        width: 56,
-        height: 56,
-        borderRadius: 28,
-        alignItems: 'center',
-        justifyContent: 'center',
-        marginBottom: 6,
-    },
-    tileLabel: {
-        fontSize: 12,
-        color: theme.colors.incomingText,
-    },
-    row: {
-        minHeight: 56,
-        alignItems: 'center',
-        justifyContent: 'center',
-        paddingHorizontal: 16,
-    },
-    rowDivider: {
-        borderTopWidth: StyleSheet.hairlineWidth,
-        borderTopColor: theme.colors.separator,
-    },
-    rowPressed: {
-        backgroundColor: theme.colors.reactionBackground,
-    },
-    rowText: {
-        fontSize: 18,
-    },
-    accent: {
-        color: theme.colors.accent,
-    },
-    destructive: {
-        color: theme.colors.error,
-    },
+export const AttachmentSheet = props => {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== props) {
+    t0 = isTrueSheetAvailable ? <TrueSheetAttachment {...props} /> : <ModalAttachment {...props} />;
+    $[0] = props;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+};
+const createStyles = theme => StyleSheet.create({
+  backdrop: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: 'rgba(0,0,0,0.4)'
+  },
+  sheetWrapper: {
+    position: 'absolute',
+    left: 8,
+    right: 8,
+    bottom: 0
+  },
+  group: {
+    backgroundColor: theme.colors.surface,
+    borderRadius: 14,
+    overflow: 'hidden'
+  },
+  // Content padding inside the native sheet (which provides its own surface).
+  trueContent: {
+    paddingTop: 8
+  },
+  handle: {
+    alignSelf: 'center',
+    width: 36,
+    height: 4,
+    borderRadius: 2,
+    backgroundColor: theme.colors.separator,
+    marginTop: 8,
+    marginBottom: 4
+  },
+  grid: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    padding: 12
+  },
+  tile: {
+    width: '25%',
+    alignItems: 'center',
+    paddingVertical: 12
+  },
+  tilePressed: {
+    opacity: 0.6
+  },
+  tileIcon: {
+    width: 56,
+    height: 56,
+    borderRadius: 28,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginBottom: 6
+  },
+  tileLabel: {
+    fontSize: 12,
+    color: theme.colors.incomingText
+  },
+  row: {
+    minHeight: 56,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: 16
+  },
+  rowDivider: {
+    borderTopWidth: StyleSheet.hairlineWidth,
+    borderTopColor: theme.colors.separator
+  },
+  rowPressed: {
+    backgroundColor: theme.colors.reactionBackground
+  },
+  rowText: {
+    fontSize: 18
+  },
+  accent: {
+    color: theme.colors.accent
+  },
+  destructive: {
+    color: theme.colors.error
+  }
 });
+function _temp(a) {
+  return a.icon;
+}
+function _temp2() {}
+function _temp3() {}
+function _temp4() {}
 //# sourceMappingURL=AttachmentSheet.js.map