@vvedantb/native-ui 0.17.2 → 0.18.0

package/dist/BottomSheetContainer.jsx

@@ -0,0 +1,208 @@
+import { c as _c } from "react/compiler-runtime";
+import BottomSheet, { BottomSheetBackdrop, BottomSheetView } from "@gorhom/bottom-sheet";
+import { IconX } from "@tabler/icons-react-native";
+import React, { useCallback } from "react";
+import { Platform, Text, TouchableOpacity, View } from "react-native";
+import { Colors } from "./colors";
+import { textStyle, typeStyle } from "./controlStyles";
+import { floatingSolidFill } from "./floating";
+import { GlassSheetBackground } from "./LiquidGlass";
+import { useLargerText } from "./theme";
+import { useScheme } from "./useScheme";
+
+// One snap point, set explicitly. With dynamic sizing the sheet can measure to
+// height 0 on Android and never appear.
+const SNAP_POINTS = ["40%"];
+const SHEET_RADIUS = 20;
+
+/**
+ * Opaque sheet chrome for Android. The glass background needs a measured blur
+ * target, which is not reliable once an RN `Modal` has been dismissed.
+ */
+function SolidSheetBackground(t0) {
+  const $ = _c(8);
+  const {
+    style,
+    pointerEvents
+  } = t0;
+  const scheme = useScheme();
+  const t1 = floatingSolidFill[scheme];
+  let t2;
+  if ($[0] !== t1) {
+    t2 = {
+      backgroundColor: t1,
+      borderTopLeftRadius: SHEET_RADIUS,
+      borderTopRightRadius: SHEET_RADIUS
+    };
+    $[0] = t1;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  let t3;
+  if ($[2] !== style || $[3] !== t2) {
+    t3 = [style, t2];
+    $[2] = style;
+    $[3] = t2;
+    $[4] = t3;
+  } else {
+    t3 = $[4];
+  }
+  let t4;
+  if ($[5] !== pointerEvents || $[6] !== t3) {
+    t4 = <View pointerEvents={pointerEvents} style={t3} />;
+    $[5] = pointerEvents;
+    $[6] = t3;
+    $[7] = t4;
+  } else {
+    t4 = $[7];
+  }
+  return t4;
+}
+function SheetBackdrop(props) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== props) {
+    t0 = <BottomSheetBackdrop {...props} appearsOnIndex={0} disappearsOnIndex={-1} opacity={0.5} />;
+    $[0] = props;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+/**
+ * A controlled bottom sheet over the screen, built on gorhom's default-export
+ * `BottomSheet` (the named `BottomSheet` export is undefined).
+ *
+ * It renders nothing while `visible` is false. A closed gorhom sheet still lays
+ * out an absolute-fill host that can cover the triggers beneath it, and
+ * `BottomSheetModal.present()` did nothing after an RN `Modal` had been
+ * dismissed on Android.
+ */
+export function BottomSheetContainer(t0) {
+  const $ = _c(29);
+  const {
+    visible,
+    onClose,
+    title,
+    children,
+    closeTestID
+  } = t0;
+  const largerText = useLargerText();
+  const isDark = useScheme() === "dark";
+  const renderBackdrop = _temp;
+  if (!visible) {
+    return null;
+  }
+  const t1 = isDark ? Colors.white : Colors.neutral[800];
+  let t2;
+  if ($[0] !== t1) {
+    t2 = {
+      backgroundColor: t1
+    };
+    $[0] = t1;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  let t3;
+  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = {
+      padding: 20,
+      paddingBottom: 48
+    };
+    $[2] = t3;
+  } else {
+    t3 = $[2];
+  }
+  const t4 = `${largerText ? "text-2xl" : "text-xl"} flex-1 font-instrument-sans-semibold`;
+  const t5 = isDark ? "dark" : "light";
+  let t6;
+  if ($[3] !== t5) {
+    t6 = textStyle("foreground", t5);
+    $[3] = t5;
+    $[4] = t6;
+  } else {
+    t6 = $[4];
+  }
+  let t7;
+  if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+    t7 = typeStyle("semibold");
+    $[5] = t7;
+  } else {
+    t7 = $[5];
+  }
+  let t8;
+  if ($[6] !== t6) {
+    t8 = [t6, t7];
+    $[6] = t6;
+    $[7] = t8;
+  } else {
+    t8 = $[7];
+  }
+  let t9;
+  if ($[8] !== t4 || $[9] !== t8 || $[10] !== title) {
+    t9 = <Text accessibilityRole="header" className={t4} style={t8}>{title}</Text>;
+    $[8] = t4;
+    $[9] = t8;
+    $[10] = title;
+    $[11] = t9;
+  } else {
+    t9 = $[11];
+  }
+  const t10 = largerText ? 32 : 28;
+  const t11 = isDark ? "white" : "black";
+  let t12;
+  if ($[12] !== t10 || $[13] !== t11) {
+    t12 = <IconX size={t10} color={t11} />;
+    $[12] = t10;
+    $[13] = t11;
+    $[14] = t12;
+  } else {
+    t12 = $[14];
+  }
+  let t13;
+  if ($[15] !== closeTestID || $[16] !== onClose || $[17] !== t12) {
+    t13 = <TouchableOpacity testID={closeTestID} accessibilityRole="button" accessibilityLabel="Close" onPress={onClose} className="-mr-2 h-12 w-12 items-center justify-center" hitSlop={8} activeOpacity={0.7}>{t12}</TouchableOpacity>;
+    $[15] = closeTestID;
+    $[16] = onClose;
+    $[17] = t12;
+    $[18] = t13;
+  } else {
+    t13 = $[18];
+  }
+  let t14;
+  if ($[19] !== t13 || $[20] !== t9) {
+    t14 = <View className="mb-4 flex-row items-center justify-between gap-3">{t9}{t13}</View>;
+    $[19] = t13;
+    $[20] = t9;
+    $[21] = t14;
+  } else {
+    t14 = $[21];
+  }
+  let t15;
+  if ($[22] !== children || $[23] !== t14) {
+    t15 = <BottomSheetView style={t3}>{t14}{children}</BottomSheetView>;
+    $[22] = children;
+    $[23] = t14;
+    $[24] = t15;
+  } else {
+    t15 = $[24];
+  }
+  let t16;
+  if ($[25] !== onClose || $[26] !== t15 || $[27] !== t2) {
+    t16 = <BottomSheet index={0} snapPoints={SNAP_POINTS} enableDynamicSizing={false} enablePanDownToClose={true} enableContentPanningGesture={false} enableHandlePanningGesture={true} keyboardBehavior="interactive" onClose={onClose} backdropComponent={renderBackdrop} backgroundComponent={Platform.OS === "android" ? SolidSheetBackground : GlassSheetBackground} handleIndicatorStyle={t2}>{t15}</BottomSheet>;
+    $[25] = onClose;
+    $[26] = t15;
+    $[27] = t2;
+    $[28] = t16;
+  } else {
+    t16 = $[28];
+  }
+  return t16;
+}
+function _temp(props) {
+  return <SheetBackdrop {...props} />;
+}