@sincpro/mobile-ui 3.0.0 → 3.1.0

package/dist/Display/Display.StoryViewer.js

@@ -1,86 +1,585 @@
-import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import ExpoImage from "./Display.ExpoImage.js";
 import Icon from "./Display.Icon.js";
 import Pressable from "../primitives/Pressable.js";
 import { useTheme } from "../theme/index.js";
+import { ON_DARK_SURFACE } from "../theme/on-dark-surface.js";
 import { Typography } from "../Typography/index.js";
 import { useReducedMotion } from "../utils/useReducedMotion.js";
 import { LinearGradient } from "expo-linear-gradient";
 import { Modal, Pressable as RNPressable, View } from "react-native";
 import { KeyboardStickyView } from "react-native-keyboard-controller";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-function StoryViewer({ visible, slides, index, onIndexChange, onClose, title, subtitle, time, avatar, progress = 1, muted, paused, onToggleMute, onTogglePause, onMore, footer, testID, }) {
-    const insets = useSafeAreaInsets();
-    const theme = useTheme();
-    const reducedMotion = useReducedMotion();
-    const current = slides[index];
-    const goPrev = () => {
-        if (index > 0)
-            onIndexChange(index - 1);
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+function StoryViewer(t0) {
+  const $ = _c(100);
+  const {
+    visible,
+    slides,
+    index,
+    onIndexChange,
+    onClose,
+    title,
+    subtitle,
+    time,
+    avatar,
+    progress: t1,
+    muted,
+    paused,
+    onToggleMute,
+    onTogglePause,
+    onMore,
+    footer,
+    testID
+  } = t0;
+  const progress = t1 === undefined ? 1 : t1;
+  const insets = useSafeAreaInsets();
+  const theme = useTheme();
+  const reducedMotion = useReducedMotion();
+  const current = slides[index];
+  let t2;
+  if ($[0] !== index || $[1] !== onIndexChange) {
+    t2 = () => {
+      if (index > 0) {
+        onIndexChange(index - 1);
+      }
+    };
+    $[0] = index;
+    $[1] = onIndexChange;
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  const goPrev = t2;
+  let t3;
+  if ($[3] !== index || $[4] !== onClose || $[5] !== onIndexChange || $[6] !== slides.length) {
+    t3 = () => {
+      if (index < slides.length - 1) {
+        onIndexChange(index + 1);
+      } else {
+        onClose();
+      }
+    };
+    $[3] = index;
+    $[4] = onClose;
+    $[5] = onIndexChange;
+    $[6] = slides.length;
+    $[7] = t3;
+  } else {
+    t3 = $[7];
+  }
+  const goNext = t3;
+  if (!current) {
+    return null;
+  }
+  const t4 = reducedMotion ? "none" : "fade";
+  let t5;
+  if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+    t5 = {
+      flex: 1,
+      backgroundColor: "#000"
+    };
+    $[8] = t5;
+  } else {
+    t5 = $[8];
+  }
+  let t6;
+  if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+    t6 = {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      width: "100%",
+      height: "100%"
+    };
+    $[9] = t6;
+  } else {
+    t6 = $[9];
+  }
+  let t7;
+  if ($[10] !== current.image) {
+    t7 = _jsx(ExpoImage, {
+      contentFit: "contain",
+      source: current.image,
+      style: t6
+    });
+    $[10] = current.image;
+    $[11] = t7;
+  } else {
+    t7 = $[11];
+  }
+  let t8;
+  if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+    t8 = {
+      position: "absolute",
+      top: 0,
+      bottom: 0,
+      left: 0,
+      right: 0,
+      flexDirection: "row"
+    };
+    $[12] = t8;
+  } else {
+    t8 = $[12];
+  }
+  let t9;
+  if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
+    t9 = {
+      width: "33%"
+    };
+    $[13] = t9;
+  } else {
+    t9 = $[13];
+  }
+  let t10;
+  if ($[14] !== goPrev) {
+    t10 = _jsx(RNPressable, {
+      onPress: goPrev,
+      style: t9
+    });
+    $[14] = goPrev;
+    $[15] = t10;
+  } else {
+    t10 = $[15];
+  }
+  let t11;
+  if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
+    t11 = {
+      flex: 1
+    };
+    $[16] = t11;
+  } else {
+    t11 = $[16];
+  }
+  let t12;
+  if ($[17] !== goNext) {
+    t12 = _jsx(RNPressable, {
+      onPress: goNext,
+      style: t11
+    });
+    $[17] = goNext;
+    $[18] = t12;
+  } else {
+    t12 = $[18];
+  }
+  let t13;
+  if ($[19] !== t10 || $[20] !== t12) {
+    t13 = _jsxs(View, {
+      style: t8,
+      children: [t10, t12]
+    });
+    $[19] = t10;
+    $[20] = t12;
+    $[21] = t13;
+  } else {
+    t13 = $[21];
+  }
+  let t14;
+  if ($[22] === Symbol.for("react.memo_cache_sentinel")) {
+    t14 = ["rgba(0,0,0,0.6)", "transparent"];
+    $[22] = t14;
+  } else {
+    t14 = $[22];
+  }
+  const t15 = insets.top + 8;
+  const t16 = insets.left + 10;
+  const t17 = insets.right + 10;
+  let t18;
+  if ($[23] !== t15 || $[24] !== t16 || $[25] !== t17) {
+    t18 = {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      paddingTop: t15,
+      paddingLeft: t16,
+      paddingRight: t17
+    };
+    $[23] = t15;
+    $[24] = t16;
+    $[25] = t17;
+    $[26] = t18;
+  } else {
+    t18 = $[26];
+  }
+  let t19;
+  if ($[27] === Symbol.for("react.memo_cache_sentinel")) {
+    t19 = {
+      flexDirection: "row",
+      gap: 4
+    };
+    $[27] = t19;
+  } else {
+    t19 = $[27];
+  }
+  let t20;
+  if ($[28] !== index || $[29] !== progress || $[30] !== slides) {
+    let t21;
+    if ($[32] !== index || $[33] !== progress) {
+      t21 = (_, i) => _jsx(View, {
+        style: {
+          flex: 1,
+          height: 2.5,
+          borderRadius: 2,
+          backgroundColor: "rgba(255,255,255,0.35)",
+          overflow: "hidden"
+        },
+        children: _jsx(View, {
+          style: {
+            height: "100%",
+            width: i < index ? "100%" : i === index ? `${Math.round(progress * 100)}%` : "0%",
+            backgroundColor: "#fff"
+          }
+        })
+      }, i);
+      $[32] = index;
+      $[33] = progress;
+      $[34] = t21;
+    } else {
+      t21 = $[34];
+    }
+    t20 = slides.map(t21);
+    $[28] = index;
+    $[29] = progress;
+    $[30] = slides;
+    $[31] = t20;
+  } else {
+    t20 = $[31];
+  }
+  let t21;
+  if ($[35] !== t20) {
+    t21 = _jsx(View, {
+      style: t19,
+      children: t20
+    });
+    $[35] = t20;
+    $[36] = t21;
+  } else {
+    t21 = $[36];
+  }
+  let t22;
+  if ($[37] === Symbol.for("react.memo_cache_sentinel")) {
+    t22 = {
+      flexDirection: "row",
+      alignItems: "center",
+      marginTop: 12
+    };
+    $[37] = t22;
+  } else {
+    t22 = $[37];
+  }
+  let t23;
+  if ($[38] !== avatar) {
+    t23 = avatar ? _jsx(ExpoImage, {
+      source: avatar,
+      style: {
+        width: 36,
+        height: 36,
+        borderRadius: 18,
+        marginRight: 8
+      }
+    }) : null;
+    $[38] = avatar;
+    $[39] = t23;
+  } else {
+    t23 = $[39];
+  }
+  let t24;
+  if ($[40] === Symbol.for("react.memo_cache_sentinel")) {
+    t24 = {
+      flex: 1
+    };
+    $[40] = t24;
+  } else {
+    t24 = $[40];
+  }
+  let t25;
+  if ($[41] === Symbol.for("react.memo_cache_sentinel")) {
+    t25 = {
+      flexDirection: "row",
+      alignItems: "center",
+      gap: 6
     };
-    const goNext = () => {
-        if (index < slides.length - 1)
-            onIndexChange(index + 1);
-        else
-            onClose();
+    $[41] = t25;
+  } else {
+    t25 = $[41];
+  }
+  let t26;
+  if ($[42] !== title) {
+    t26 = _jsx(Typography.Text, {
+      className: "text-white",
+      semibold: true,
+      variant: "body",
+      children: title
+    });
+    $[42] = title;
+    $[43] = t26;
+  } else {
+    t26 = $[43];
+  }
+  let t27;
+  if ($[44] !== time) {
+    t27 = time ? _jsx(Typography.Text, {
+      style: {
+        color: ON_DARK_SURFACE.muted
+      },
+      variant: "caption",
+      children: time
+    }) : null;
+    $[44] = time;
+    $[45] = t27;
+  } else {
+    t27 = $[45];
+  }
+  let t28;
+  if ($[46] !== t26 || $[47] !== t27) {
+    t28 = _jsxs(View, {
+      style: t25,
+      children: [t26, t27]
+    });
+    $[46] = t26;
+    $[47] = t27;
+    $[48] = t28;
+  } else {
+    t28 = $[48];
+  }
+  let t29;
+  if ($[49] !== subtitle) {
+    t29 = subtitle ? _jsx(Typography.Text, {
+      numberOfLines: 1,
+      style: {
+        color: ON_DARK_SURFACE.muted
+      },
+      variant: "caption",
+      children: subtitle
+    }) : null;
+    $[49] = subtitle;
+    $[50] = t29;
+  } else {
+    t29 = $[50];
+  }
+  let t30;
+  if ($[51] !== t28 || $[52] !== t29) {
+    t30 = _jsxs(View, {
+      style: t24,
+      children: [t28, t29]
+    });
+    $[51] = t28;
+    $[52] = t29;
+    $[53] = t30;
+  } else {
+    t30 = $[53];
+  }
+  let t31;
+  if ($[54] !== muted || $[55] !== onToggleMute) {
+    t31 = onToggleMute ? _jsx(Pressable, {
+      accessibilityLabel: muted ? "Activar sonido" : "Silenciar",
+      hitSlop: 8,
+      onPress: onToggleMute,
+      children: _jsx(Icon, {
+        color: ON_DARK_SURFACE.ink,
+        name: muted ? "mute" : "volume",
+        size: 22
+      })
+    }) : null;
+    $[54] = muted;
+    $[55] = onToggleMute;
+    $[56] = t31;
+  } else {
+    t31 = $[56];
+  }
+  let t32;
+  if ($[57] !== onTogglePause || $[58] !== paused) {
+    t32 = onTogglePause ? _jsx(Pressable, {
+      accessibilityLabel: paused ? "Reanudar" : "Pausar",
+      hitSlop: 8,
+      onPress: onTogglePause,
+      style: {
+        marginLeft: 14
+      },
+      children: _jsx(Icon, {
+        color: ON_DARK_SURFACE.ink,
+        name: paused ? "play" : "pause",
+        size: 22
+      })
+    }) : null;
+    $[57] = onTogglePause;
+    $[58] = paused;
+    $[59] = t32;
+  } else {
+    t32 = $[59];
+  }
+  let t33;
+  if ($[60] !== onMore) {
+    t33 = onMore ? _jsx(Pressable, {
+      accessibilityLabel: "M\xE1s opciones",
+      hitSlop: 8,
+      onPress: onMore,
+      style: {
+        marginLeft: 14
+      },
+      children: _jsx(Icon, {
+        color: ON_DARK_SURFACE.ink,
+        name: "more",
+        size: 22
+      })
+    }) : null;
+    $[60] = onMore;
+    $[61] = t33;
+  } else {
+    t33 = $[61];
+  }
+  let t34;
+  let t35;
+  if ($[62] === Symbol.for("react.memo_cache_sentinel")) {
+    t34 = {
+      marginLeft: 14
     };
-    if (!current)
-        return null;
-    return (_jsx(Modal, { animationType: reducedMotion ? "none" : "fade", onRequestClose: onClose, statusBarTranslucent: true, transparent: false, visible: visible, children: _jsxs(View, { style: { flex: 1, backgroundColor: "#000" }, testID: testID, children: [_jsx(ExpoImage, { contentFit: "contain", source: current.image, style: {
-                        position: "absolute",
-                        top: 0,
-                        left: 0,
-                        right: 0,
-                        bottom: 0,
-                        width: "100%",
-                        height: "100%",
-                    } }), _jsxs(View, { style: {
-                        position: "absolute",
-                        top: 0,
-                        bottom: 0,
-                        left: 0,
-                        right: 0,
-                        flexDirection: "row",
-                    }, children: [_jsx(RNPressable, { onPress: goPrev, style: { width: "33%" } }), _jsx(RNPressable, { onPress: goNext, style: { flex: 1 } })] }), _jsxs(LinearGradient, { colors: ["rgba(0,0,0,0.6)", "transparent"], style: {
-                        position: "absolute",
-                        top: 0,
-                        left: 0,
-                        right: 0,
-                        paddingTop: insets.top + 8,
-                        paddingLeft: insets.left + 10,
-                        paddingRight: insets.right + 10,
-                    }, children: [_jsx(View, { style: { flexDirection: "row", gap: 4 }, children: slides.map((_, i) => (_jsx(View, { style: {
-                                    flex: 1,
-                                    height: 2.5,
-                                    borderRadius: 2,
-                                    backgroundColor: "rgba(255,255,255,0.35)",
-                                    overflow: "hidden",
-                                }, children: _jsx(View, { style: {
-                                        height: "100%",
-                                        width: i < index
-                                            ? "100%"
-                                            : i === index
-                                                ? `${Math.round(progress * 100)}%`
-                                                : "0%",
-                                        backgroundColor: "#fff",
-                                    } }) }, i))) }), _jsxs(View, { style: { flexDirection: "row", alignItems: "center", marginTop: 12 }, children: [avatar ? (_jsx(ExpoImage, { source: avatar, style: { width: 36, height: 36, borderRadius: 18, marginRight: 8 } })) : null, _jsxs(View, { style: { flex: 1 }, children: [_jsxs(View, { style: { flexDirection: "row", alignItems: "center", gap: 6 }, children: [_jsx(Typography.Text, { className: "text-white", semibold: true, variant: "body", children: title }), time ? (_jsx(Typography.Text, { style: { color: "rgba(255,255,255,0.7)" }, variant: "caption", children: time })) : null] }), subtitle ? (_jsx(Typography.Text, { numberOfLines: 1, style: { color: "rgba(255,255,255,0.8)" }, variant: "caption", children: subtitle })) : null] }), onToggleMute ? (_jsx(Pressable, { accessibilityLabel: muted ? "Activar sonido" : "Silenciar", hitSlop: 8, onPress: onToggleMute, children: _jsx(Icon, { color: "#fff", name: muted ? "mute" : "volume", size: 22 }) })) : null, onTogglePause ? (_jsx(Pressable, { accessibilityLabel: paused ? "Reanudar" : "Pausar", hitSlop: 8, onPress: onTogglePause, style: { marginLeft: 14 }, children: _jsx(Icon, { color: "#fff", name: paused ? "play" : "pause", size: 22 }) })) : null, onMore ? (_jsx(Pressable, { accessibilityLabel: "M\u00E1s opciones", hitSlop: 8, onPress: onMore, style: { marginLeft: 14 }, children: _jsx(Icon, { color: "#fff", name: "more", size: 22 }) })) : null, _jsx(Pressable, { accessibilityLabel: "Cerrar", hitSlop: 8, onPress: onClose, style: { marginLeft: 14 }, children: _jsx(Icon, { color: "#fff", name: "close", size: 24 }) })] })] }), index < slides.length - 1 ? (_jsx(Pressable, { accessibilityLabel: "Siguiente", onPress: goNext, style: {
-                        position: "absolute",
-                        right: insets.right + 8,
-                        top: "50%",
-                        width: 36,
-                        height: 36,
-                        borderRadius: 18,
-                        backgroundColor: "rgba(255,255,255,0.9)",
-                        alignItems: "center",
-                        justifyContent: "center",
-                    }, children: _jsx(Icon, { color: theme.text.primary, name: "next", size: 22 }) })) : null, footer ? (_jsx(KeyboardStickyView, { style: {
-                        position: "absolute",
-                        left: 0,
-                        right: 0,
-                        bottom: 0,
-                        paddingBottom: insets.bottom + 8,
-                        paddingLeft: insets.left + 16,
-                        paddingRight: insets.right + 16,
-                    }, children: footer })) : null] }) }));
+    t35 = _jsx(Icon, {
+      color: ON_DARK_SURFACE.ink,
+      name: "close",
+      size: 24
+    });
+    $[62] = t34;
+    $[63] = t35;
+  } else {
+    t34 = $[62];
+    t35 = $[63];
+  }
+  let t36;
+  if ($[64] !== onClose) {
+    t36 = _jsx(Pressable, {
+      accessibilityLabel: "Cerrar",
+      hitSlop: 8,
+      onPress: onClose,
+      style: t34,
+      children: t35
+    });
+    $[64] = onClose;
+    $[65] = t36;
+  } else {
+    t36 = $[65];
+  }
+  let t37;
+  if ($[66] !== t23 || $[67] !== t30 || $[68] !== t31 || $[69] !== t32 || $[70] !== t33 || $[71] !== t36) {
+    t37 = _jsxs(View, {
+      style: t22,
+      children: [t23, t30, t31, t32, t33, t36]
+    });
+    $[66] = t23;
+    $[67] = t30;
+    $[68] = t31;
+    $[69] = t32;
+    $[70] = t33;
+    $[71] = t36;
+    $[72] = t37;
+  } else {
+    t37 = $[72];
+  }
+  let t38;
+  if ($[73] !== t18 || $[74] !== t21 || $[75] !== t37) {
+    t38 = _jsxs(LinearGradient, {
+      colors: t14,
+      style: t18,
+      children: [t21, t37]
+    });
+    $[73] = t18;
+    $[74] = t21;
+    $[75] = t37;
+    $[76] = t38;
+  } else {
+    t38 = $[76];
+  }
+  let t39;
+  if ($[77] !== goNext || $[78] !== index || $[79] !== insets.right || $[80] !== slides.length || $[81] !== theme) {
+    t39 = index < slides.length - 1 ? _jsx(Pressable, {
+      accessibilityLabel: "Siguiente",
+      onPress: goNext,
+      style: {
+        position: "absolute",
+        right: insets.right + 8,
+        top: "50%",
+        width: 36,
+        height: 36,
+        borderRadius: 18,
+        backgroundColor: "rgba(255,255,255,0.9)",
+        alignItems: "center",
+        justifyContent: "center"
+      },
+      children: _jsx(Icon, {
+        color: theme.text.primary,
+        name: "next",
+        size: 22
+      })
+    }) : null;
+    $[77] = goNext;
+    $[78] = index;
+    $[79] = insets.right;
+    $[80] = slides.length;
+    $[81] = theme;
+    $[82] = t39;
+  } else {
+    t39 = $[82];
+  }
+  let t40;
+  if ($[83] !== footer || $[84] !== insets.bottom || $[85] !== insets.left || $[86] !== insets.right) {
+    t40 = footer ? _jsx(KeyboardStickyView, {
+      style: {
+        position: "absolute",
+        left: 0,
+        right: 0,
+        bottom: 0,
+        paddingBottom: insets.bottom + 8,
+        paddingLeft: insets.left + 16,
+        paddingRight: insets.right + 16
+      },
+      children: footer
+    }) : null;
+    $[83] = footer;
+    $[84] = insets.bottom;
+    $[85] = insets.left;
+    $[86] = insets.right;
+    $[87] = t40;
+  } else {
+    t40 = $[87];
+  }
+  let t41;
+  if ($[88] !== t13 || $[89] !== t38 || $[90] !== t39 || $[91] !== t40 || $[92] !== t7 || $[93] !== testID) {
+    t41 = _jsxs(View, {
+      style: t5,
+      testID: testID,
+      children: [t7, t13, t38, t39, t40]
+    });
+    $[88] = t13;
+    $[89] = t38;
+    $[90] = t39;
+    $[91] = t40;
+    $[92] = t7;
+    $[93] = testID;
+    $[94] = t41;
+  } else {
+    t41 = $[94];
+  }
+  let t42;
+  if ($[95] !== onClose || $[96] !== t4 || $[97] !== t41 || $[98] !== visible) {
+    t42 = _jsx(Modal, {
+      animationType: t4,
+      onRequestClose: onClose,
+      statusBarTranslucent: true,
+      transparent: false,
+      visible: visible,
+      children: t41
+    });
+    $[95] = onClose;
+    $[96] = t4;
+    $[97] = t41;
+    $[98] = visible;
+    $[99] = t42;
+  } else {
+    t42 = $[99];
+  }
+  return t42;
 }
 export default StoryViewer;