@sincpro/mobile-ui 3.1.0 → 3.3.0

package/dist/Display/Display.DocumentPreview.js

@@ -0,0 +1,349 @@
+import { c as _c } from "react/compiler-runtime";
+import ExpoImage from "./Display.ExpoImage.js";
+import Icon from "./Display.Icon.js";
+import { documentHeading, documentMeta, DocumentStatus, useDocumentPages } from "./document-pages.js";
+import Skeleton from "../Feedback/Feedback.Skeleton.js";
+import Pressable from "../primitives/Pressable.js";
+import { useTheme } from "../theme/index.js";
+import { cn } from "../theme/tw.js";
+import { Typography } from "../Typography/index.js";
+import { useWindowDimensions, View } from "react-native";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "nativewind/jsx-runtime";
+const MAX_THUMBNAIL_WIDTH = 1080;
+function Notice(t0) {
+  const $ = _c(8);
+  const {
+    icon,
+    label,
+    color
+  } = t0;
+  let t1;
+  if ($[0] !== color || $[1] !== icon) {
+    t1 = _jsx(Icon, {
+      color: color,
+      name: icon,
+      size: 28
+    });
+    $[0] = color;
+    $[1] = icon;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  let t2;
+  if ($[3] !== label) {
+    t2 = _jsx(Typography.Text, {
+      align: "center",
+      className: "text-text-secondary",
+      variant: "bodySmall",
+      children: label
+    });
+    $[3] = label;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  let t3;
+  if ($[5] !== t1 || $[6] !== t2) {
+    t3 = _jsxs(View, {
+      className: "flex-1 items-center justify-center gap-2 px-4",
+      children: [t1, t2]
+    });
+    $[5] = t1;
+    $[6] = t2;
+    $[7] = t3;
+  } else {
+    t3 = $[7];
+  }
+  return t3;
+}
+function DocumentPreview(t0) {
+  const $ = _c(68);
+  const {
+    source,
+    title,
+    height: t1,
+    fit: t2,
+    onPress,
+    renderer,
+    className,
+    testID
+  } = t0;
+  const height = t1 === undefined ? 180 : t1;
+  const fit = t2 === undefined ? "top" : t2;
+  const theme = useTheme();
+  const {
+    width,
+    scale
+  } = useWindowDimensions();
+  let t3;
+  if ($[0] !== scale || $[1] !== width) {
+    t3 = Math.round(width * scale);
+    $[0] = scale;
+    $[1] = width;
+    $[2] = t3;
+  } else {
+    t3 = $[2];
+  }
+  const document = useDocumentPages(source, Math.min(MAX_THUMBNAIL_WIDTH, t3), true, renderer);
+  const page = document.pages[0];
+  const failed = document.status === DocumentStatus.ERROR;
+  let t4;
+  if ($[3] !== document || $[4] !== title) {
+    t4 = title ?? documentHeading(document);
+    $[3] = document;
+    $[4] = title;
+    $[5] = t4;
+  } else {
+    t4 = $[5];
+  }
+  const heading = t4;
+  let t5;
+  if ($[6] !== document.isImage || $[7] !== document.label || $[8] !== document.pageCount) {
+    t5 = documentMeta(document.label, document.isImage, document.pageCount);
+    $[6] = document.isImage;
+    $[7] = document.label;
+    $[8] = document.pageCount;
+    $[9] = t5;
+  } else {
+    t5 = $[9];
+  }
+  const meta = t5;
+  const handlePress = failed ? document.retry : onPress;
+  let t6;
+  if ($[10] !== height || $[11] !== theme.bg.muted) {
+    t6 = {
+      height,
+      backgroundColor: theme.bg.muted
+    };
+    $[10] = height;
+    $[11] = theme.bg.muted;
+    $[12] = t6;
+  } else {
+    t6 = $[12];
+  }
+  let t7;
+  if ($[13] !== document.attempt || $[14] !== document.reportPageError || $[15] !== document.status || $[16] !== fit || $[17] !== page) {
+    t7 = document.status === DocumentStatus.READY && page ? _jsx(ExpoImage, {
+      contentFit: fit === "top" ? "cover" : "contain",
+      contentPosition: "top",
+      onError: document.reportPageError,
+      source: {
+        uri: page.uri
+      },
+      style: {
+        flex: 1,
+        width: "100%",
+        borderTopLeftRadius: 6,
+        borderTopRightRadius: 6
+      }
+    }, document.attempt) : null;
+    $[13] = document.attempt;
+    $[14] = document.reportPageError;
+    $[15] = document.status;
+    $[16] = fit;
+    $[17] = page;
+    $[18] = t7;
+  } else {
+    t7 = $[18];
+  }
+  let t8;
+  if ($[19] !== document.status) {
+    t8 = document.status === DocumentStatus.LOADING ? _jsx(Skeleton, {
+      height: "100%",
+      radius: 6,
+      width: "100%"
+    }) : null;
+    $[19] = document.status;
+    $[20] = t8;
+  } else {
+    t8 = $[20];
+  }
+  let t9;
+  if ($[21] !== failed || $[22] !== theme.danger) {
+    t9 = failed ? _jsx(Notice, {
+      color: theme.danger,
+      icon: "error",
+      label: "No se pudo generar la vista previa. Toca para reintentar."
+    }) : null;
+    $[21] = failed;
+    $[22] = theme.danger;
+    $[23] = t9;
+  } else {
+    t9 = $[23];
+  }
+  let t10;
+  if ($[24] !== document.status || $[25] !== theme.icon.tertiary) {
+    t10 = document.status === DocumentStatus.UNSUPPORTED ? _jsx(Notice, {
+      color: theme.icon.tertiary,
+      icon: "document",
+      label: "Vista previa no disponible"
+    }) : null;
+    $[24] = document.status;
+    $[25] = theme.icon.tertiary;
+    $[26] = t10;
+  } else {
+    t10 = $[26];
+  }
+  let t11;
+  if ($[27] !== t10 || $[28] !== t6 || $[29] !== t7 || $[30] !== t8 || $[31] !== t9) {
+    t11 = _jsxs(View, {
+      className: "px-3 pt-3",
+      style: t6,
+      children: [t7, t8, t9, t10]
+    });
+    $[27] = t10;
+    $[28] = t6;
+    $[29] = t7;
+    $[30] = t8;
+    $[31] = t9;
+    $[32] = t11;
+  } else {
+    t11 = $[32];
+  }
+  const t12 = document.isImage ? "image" : "document";
+  let t13;
+  if ($[33] !== t12 || $[34] !== theme.icon.secondary) {
+    t13 = _jsx(Icon, {
+      color: theme.icon.secondary,
+      name: t12,
+      size: 20
+    });
+    $[33] = t12;
+    $[34] = theme.icon.secondary;
+    $[35] = t13;
+  } else {
+    t13 = $[35];
+  }
+  let t14;
+  if ($[36] !== heading) {
+    t14 = _jsx(Typography.Text, {
+      className: "text-text-primary",
+      numberOfLines: 1,
+      semibold: true,
+      children: heading
+    });
+    $[36] = heading;
+    $[37] = t14;
+  } else {
+    t14 = $[37];
+  }
+  let t15;
+  if ($[38] !== meta) {
+    t15 = _jsx(Typography.Text, {
+      className: "text-text-secondary",
+      variant: "caption",
+      children: meta
+    });
+    $[38] = meta;
+    $[39] = t15;
+  } else {
+    t15 = $[39];
+  }
+  let t16;
+  if ($[40] !== t14 || $[41] !== t15) {
+    t16 = _jsxs(View, {
+      className: "flex-1",
+      children: [t14, t15]
+    });
+    $[40] = t14;
+    $[41] = t15;
+    $[42] = t16;
+  } else {
+    t16 = $[42];
+  }
+  let t17;
+  if ($[43] !== failed || $[44] !== onPress || $[45] !== theme.icon.tertiary) {
+    t17 = onPress && !failed ? _jsx(Icon, {
+      color: theme.icon.tertiary,
+      name: "next",
+      size: 18
+    }) : null;
+    $[43] = failed;
+    $[44] = onPress;
+    $[45] = theme.icon.tertiary;
+    $[46] = t17;
+  } else {
+    t17 = $[46];
+  }
+  let t18;
+  if ($[47] !== t13 || $[48] !== t16 || $[49] !== t17) {
+    t18 = _jsxs(View, {
+      className: "flex-row items-center gap-3 px-3 py-2.5",
+      children: [t13, t16, t17]
+    });
+    $[47] = t13;
+    $[48] = t16;
+    $[49] = t17;
+    $[50] = t18;
+  } else {
+    t18 = $[50];
+  }
+  let t19;
+  if ($[51] !== t11 || $[52] !== t18) {
+    t19 = _jsxs(_Fragment, {
+      children: [t11, t18]
+    });
+    $[51] = t11;
+    $[52] = t18;
+    $[53] = t19;
+  } else {
+    t19 = $[53];
+  }
+  const body = t19;
+  let t20;
+  if ($[54] !== className) {
+    t20 = cn("overflow-hidden rounded-xl border border-border-light bg-bg-card", className);
+    $[54] = className;
+    $[55] = t20;
+  } else {
+    t20 = $[55];
+  }
+  const surface = t20;
+  const label = `Vista previa de ${heading}, ${meta}`;
+  if (!handlePress) {
+    let t21;
+    if ($[56] !== body || $[57] !== label || $[58] !== surface || $[59] !== testID) {
+      t21 = _jsx(View, {
+        accessibilityLabel: label,
+        accessibilityRole: "image",
+        accessible: true,
+        className: surface,
+        testID: testID,
+        children: body
+      });
+      $[56] = body;
+      $[57] = label;
+      $[58] = surface;
+      $[59] = testID;
+      $[60] = t21;
+    } else {
+      t21 = $[60];
+    }
+    return t21;
+  }
+  const t21 = failed ? "Reintenta generar la vista previa" : "Abre el documento";
+  let t22;
+  if ($[61] !== body || $[62] !== handlePress || $[63] !== label || $[64] !== surface || $[65] !== t21 || $[66] !== testID) {
+    t22 = _jsx(Pressable, {
+      accessibilityHint: t21,
+      accessibilityLabel: label,
+      className: surface,
+      onPress: handlePress,
+      testID: testID,
+      children: body
+    });
+    $[61] = body;
+    $[62] = handlePress;
+    $[63] = label;
+    $[64] = surface;
+    $[65] = t21;
+    $[66] = testID;
+    $[67] = t22;
+  } else {
+    t22 = $[67];
+  }
+  return t22;
+}
+export default DocumentPreview;
+export { DocumentPreview };

package/dist/Display/Display.DocumentViewer.d.ts

@@ -0,0 +1,15 @@
+import type { DocumentRenderer } from "./document-renderer.js";
+import type { DocumentSource } from "../utils/document.js";
+import { type ReactNode } from "react";
+export interface DocumentViewerProps {
+    visible: boolean;
+    source: DocumentSource | null;
+    title?: string;
+    onClose: () => void;
+    actions?: ReactNode;
+    renderer?: DocumentRenderer;
+    testID?: string;
+}
+declare function DocumentViewer({ visible, source, title, onClose, actions, renderer, testID, }: DocumentViewerProps): import("react").JSX.Element;
+export default DocumentViewer;
+export { DocumentViewer };