@sincpro/mobile-ui 3.1.0 → 3.3.0

package/dist/Display/Display.DocumentViewer.js

@@ -0,0 +1,465 @@
+import { c as _c } from "react/compiler-runtime";
+import ExpoImage from "./Display.ExpoImage.js";
+import { documentHeading, documentMeta, DocumentStatus, useDocumentPages } from "./document-pages.js";
+import State from "../Feedback/Feedback.State.js";
+import { AppBar } from "../Navigation/Navigation.AppBar.js";
+import { useTheme, useThemeVars } from "../theme/index.js";
+import { Typography } from "../Typography/index.js";
+import { useReducedMotion } from "../utils/useReducedMotion.js";
+import { useState } from "react";
+import { Modal, ScrollView, useWindowDimensions, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "nativewind/jsx-runtime";
+const MAX_RENDER_WIDTH = 2048;
+const ZOOM_SCALE = 2;
+const GUTTER = 12;
+const A4_RATIO = 1 / Math.SQRT2;
+function ViewerPage(t0) {
+  const $ = _c(26);
+  const {
+    page,
+    width,
+    number,
+    pageCount,
+    label,
+    onError
+  } = t0;
+  const theme = useTheme();
+  const [loadedRatio, setLoadedRatio] = useState(null);
+  const ratio = page.width && page.height ? page.width / page.height : loadedRatio ?? A4_RATIO;
+  let t1;
+  if ($[0] !== width) {
+    t1 = {
+      width,
+      gap: 6
+    };
+    $[0] = width;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  let t2;
+  if ($[2] !== ratio || $[3] !== theme.border.light || $[4] !== theme.shadow.sm || $[5] !== width) {
+    t2 = {
+      width,
+      aspectRatio: ratio,
+      borderColor: theme.border.light,
+      borderWidth: 1,
+      ...theme.shadow.sm
+    };
+    $[2] = ratio;
+    $[3] = theme.border.light;
+    $[4] = theme.shadow.sm;
+    $[5] = width;
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  const t3 = pageCount > 1 ? `${label}, página ${number} de ${pageCount}` : label;
+  let t4;
+  if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+    t4 = event => {
+      if (event.source.height > 0) {
+        setLoadedRatio(event.source.width / event.source.height);
+      }
+    };
+    $[7] = t4;
+  } else {
+    t4 = $[7];
+  }
+  let t5;
+  if ($[8] !== page.uri) {
+    t5 = {
+      uri: page.uri
+    };
+    $[8] = page.uri;
+    $[9] = t5;
+  } else {
+    t5 = $[9];
+  }
+  let t6;
+  if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+    t6 = {
+      width: "100%",
+      height: "100%"
+    };
+    $[10] = t6;
+  } else {
+    t6 = $[10];
+  }
+  let t7;
+  if ($[11] !== onError || $[12] !== t3 || $[13] !== t5) {
+    t7 = _jsx(ExpoImage, {
+      accessibilityLabel: t3,
+      accessible: true,
+      contentFit: "contain",
+      onError: onError,
+      onLoad: t4,
+      source: t5,
+      style: t6
+    });
+    $[11] = onError;
+    $[12] = t3;
+    $[13] = t5;
+    $[14] = t7;
+  } else {
+    t7 = $[14];
+  }
+  let t8;
+  if ($[15] !== t2 || $[16] !== t7) {
+    t8 = _jsx(View, {
+      style: t2,
+      children: t7
+    });
+    $[15] = t2;
+    $[16] = t7;
+    $[17] = t8;
+  } else {
+    t8 = $[17];
+  }
+  let t9;
+  if ($[18] !== number || $[19] !== pageCount || $[20] !== theme.text) {
+    t9 = pageCount > 1 ? _jsxs(Typography.Text, {
+      align: "center",
+      style: {
+        color: theme.text.secondary
+      },
+      variant: "caption",
+      children: ["P\xE1gina ", number, " de ", pageCount]
+    }) : null;
+    $[18] = number;
+    $[19] = pageCount;
+    $[20] = theme.text;
+    $[21] = t9;
+  } else {
+    t9 = $[21];
+  }
+  let t10;
+  if ($[22] !== t1 || $[23] !== t8 || $[24] !== t9) {
+    t10 = _jsxs(View, {
+      style: t1,
+      children: [t8, t9]
+    });
+    $[22] = t1;
+    $[23] = t8;
+    $[24] = t9;
+    $[25] = t10;
+  } else {
+    t10 = $[25];
+  }
+  return t10;
+}
+function ViewerContent(t0) {
+  const $ = _c(55);
+  const {
+    source,
+    title,
+    onClose,
+    actions,
+    renderer
+  } = t0;
+  const theme = useTheme();
+  const insets = useSafeAreaInsets();
+  const {
+    width,
+    scale
+  } = useWindowDimensions();
+  const [zoomed, setZoomed] = useState(false);
+  let t1;
+  if ($[0] !== scale || $[1] !== width) {
+    t1 = Math.round(width * scale * ZOOM_SCALE);
+    $[0] = scale;
+    $[1] = width;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  const document = useDocumentPages(source, Math.min(MAX_RENDER_WIDTH, t1), false, renderer);
+  const ready = document.status === DocumentStatus.READY;
+  let t2;
+  if ($[3] !== document || $[4] !== title) {
+    t2 = title ?? documentHeading(document);
+    $[3] = document;
+    $[4] = title;
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  const heading = t2;
+  const fitWidth = width - insets.left - insets.right - GUTTER * 2;
+  const pageWidth = zoomed ? fitWidth * ZOOM_SCALE : fitWidth;
+  let t3;
+  if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = {
+      gap: GUTTER * 2
+    };
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  let t4;
+  if ($[7] !== document.attempt || $[8] !== document.pageCount || $[9] !== document.pages || $[10] !== document.reportPageError || $[11] !== heading || $[12] !== pageWidth) {
+    let t5;
+    if ($[14] !== document.attempt || $[15] !== document.pageCount || $[16] !== document.reportPageError || $[17] !== heading || $[18] !== pageWidth) {
+      t5 = (page, index) => _jsx(ViewerPage, {
+        label: heading,
+        number: index + 1,
+        onError: document.reportPageError,
+        page: page,
+        pageCount: document.pageCount,
+        width: pageWidth
+      }, `${document.attempt}:${index}`);
+      $[14] = document.attempt;
+      $[15] = document.pageCount;
+      $[16] = document.reportPageError;
+      $[17] = heading;
+      $[18] = pageWidth;
+      $[19] = t5;
+    } else {
+      t5 = $[19];
+    }
+    t4 = document.pages.map(t5);
+    $[7] = document.attempt;
+    $[8] = document.pageCount;
+    $[9] = document.pages;
+    $[10] = document.reportPageError;
+    $[11] = heading;
+    $[12] = pageWidth;
+    $[13] = t4;
+  } else {
+    t4 = $[13];
+  }
+  let t5;
+  if ($[20] !== t4) {
+    t5 = _jsx(View, {
+      style: t3,
+      children: t4
+    });
+    $[20] = t4;
+    $[21] = t5;
+  } else {
+    t5 = $[21];
+  }
+  const pages = t5;
+  let t6;
+  if ($[22] !== theme.bg.muted) {
+    t6 = {
+      flex: 1,
+      backgroundColor: theme.bg.muted
+    };
+    $[22] = theme.bg.muted;
+    $[23] = t6;
+  } else {
+    t6 = $[23];
+  }
+  let t7;
+  if ($[24] !== ready || $[25] !== zoomed) {
+    t7 = ready ? _jsx(AppBar.Action, {
+      accessibilityLabel: zoomed ? "Ajustar al ancho" : "Ampliar",
+      label: zoomed ? "Ajustar" : "Ampliar",
+      onPress: () => setZoomed(_temp)
+    }) : null;
+    $[24] = ready;
+    $[25] = zoomed;
+    $[26] = t7;
+  } else {
+    t7 = $[26];
+  }
+  let t8;
+  if ($[27] !== actions || $[28] !== t7) {
+    t8 = _jsxs(_Fragment, {
+      children: [t7, actions]
+    });
+    $[27] = actions;
+    $[28] = t7;
+    $[29] = t8;
+  } else {
+    t8 = $[29];
+  }
+  let t9;
+  if ($[30] !== onClose) {
+    t9 = _jsx(AppBar.Action, {
+      accessibilityLabel: "Cerrar",
+      icon: "close",
+      onPress: onClose
+    });
+    $[30] = onClose;
+    $[31] = t9;
+  } else {
+    t9 = $[31];
+  }
+  let t10;
+  if ($[32] !== document.isImage || $[33] !== document.label || $[34] !== document.pageCount) {
+    t10 = documentMeta(document.label, document.isImage, document.pageCount);
+    $[32] = document.isImage;
+    $[33] = document.label;
+    $[34] = document.pageCount;
+    $[35] = t10;
+  } else {
+    t10 = $[35];
+  }
+  let t11;
+  if ($[36] !== heading || $[37] !== t10 || $[38] !== t8 || $[39] !== t9) {
+    t11 = _jsx(AppBar, {
+      actions: t8,
+      leading: t9,
+      subtitle: t10,
+      title: heading
+    });
+    $[36] = heading;
+    $[37] = t10;
+    $[38] = t8;
+    $[39] = t9;
+    $[40] = t11;
+  } else {
+    t11 = $[40];
+  }
+  let t12;
+  if ($[41] !== document.label || $[42] !== document.retry || $[43] !== document.status || $[44] !== insets.bottom || $[45] !== insets.left || $[46] !== insets.right || $[47] !== pages || $[48] !== ready || $[49] !== zoomed) {
+    t12 = ready ? _jsx(ScrollView, {
+      contentContainerStyle: {
+        paddingTop: GUTTER,
+        paddingLeft: insets.left + GUTTER,
+        paddingRight: insets.right + GUTTER,
+        paddingBottom: insets.bottom + GUTTER * 2
+      },
+      children: zoomed ? _jsx(ScrollView, {
+        horizontal: true,
+        children: pages
+      }) : pages
+    }) : _jsxs(View, {
+      style: {
+        flex: 1,
+        paddingBottom: insets.bottom
+      },
+      children: [document.status === DocumentStatus.LOADING ? _jsx(State, {
+        kind: "loading",
+        message: "Generando vista previa\u2026"
+      }) : null, document.status === DocumentStatus.ERROR ? _jsx(State, {
+        kind: "error",
+        message: "No se pudo generar la vista previa del documento.",
+        onRetry: document.retry
+      }) : null, document.status === DocumentStatus.UNSUPPORTED ? _jsx(State, {
+        description: `Esta app no tiene un visor configurado para ${document.label}.`,
+        icon: "document",
+        kind: "empty",
+        title: "Vista previa no disponible"
+      }) : null]
+    });
+    $[41] = document.label;
+    $[42] = document.retry;
+    $[43] = document.status;
+    $[44] = insets.bottom;
+    $[45] = insets.left;
+    $[46] = insets.right;
+    $[47] = pages;
+    $[48] = ready;
+    $[49] = zoomed;
+    $[50] = t12;
+  } else {
+    t12 = $[50];
+  }
+  let t13;
+  if ($[51] !== t11 || $[52] !== t12 || $[53] !== t6) {
+    t13 = _jsxs(View, {
+      style: t6,
+      children: [t11, t12]
+    });
+    $[51] = t11;
+    $[52] = t12;
+    $[53] = t6;
+    $[54] = t13;
+  } else {
+    t13 = $[54];
+  }
+  return t13;
+}
+function _temp(previous) {
+  return !previous;
+}
+function DocumentViewer(t0) {
+  const $ = _c(18);
+  const {
+    visible,
+    source,
+    title,
+    onClose,
+    actions,
+    renderer,
+    testID
+  } = t0;
+  const reducedMotion = useReducedMotion();
+  const themeVars = useThemeVars();
+  const t1 = reducedMotion ? "none" : "slide";
+  const t2 = visible && source !== null;
+  let t3;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = {
+      flex: 1
+    };
+    $[0] = t3;
+  } else {
+    t3 = $[0];
+  }
+  let t4;
+  if ($[1] !== themeVars) {
+    t4 = [t3, themeVars];
+    $[1] = themeVars;
+    $[2] = t4;
+  } else {
+    t4 = $[2];
+  }
+  let t5;
+  if ($[3] !== actions || $[4] !== onClose || $[5] !== renderer || $[6] !== source || $[7] !== title) {
+    t5 = source ? _jsx(ViewerContent, {
+      actions: actions,
+      onClose: onClose,
+      renderer: renderer,
+      source: source,
+      title: title
+    }) : null;
+    $[3] = actions;
+    $[4] = onClose;
+    $[5] = renderer;
+    $[6] = source;
+    $[7] = title;
+    $[8] = t5;
+  } else {
+    t5 = $[8];
+  }
+  let t6;
+  if ($[9] !== t4 || $[10] !== t5 || $[11] !== testID) {
+    t6 = _jsx(View, {
+      style: t4,
+      testID: testID,
+      children: t5
+    });
+    $[9] = t4;
+    $[10] = t5;
+    $[11] = testID;
+    $[12] = t6;
+  } else {
+    t6 = $[12];
+  }
+  let t7;
+  if ($[13] !== onClose || $[14] !== t1 || $[15] !== t2 || $[16] !== t6) {
+    t7 = _jsx(Modal, {
+      animationType: t1,
+      navigationBarTranslucent: true,
+      onRequestClose: onClose,
+      statusBarTranslucent: true,
+      visible: t2,
+      children: t6
+    });
+    $[13] = onClose;
+    $[14] = t1;
+    $[15] = t2;
+    $[16] = t6;
+    $[17] = t7;
+  } else {
+    t7 = $[17];
+  }
+  return t7;
+}
+export default DocumentViewer;
+export { DocumentViewer };

package/dist/Display/Display.SwipeableRow.js

@@ -1,6 +1,7 @@
 import { c as _c } from "react/compiler-runtime";
 import Icon from "./Display.Icon.js";
 import { useTheme } from "../theme/index.js";
+import { resolveOnColor } from "../theme/contrast.js";
 import { Typography } from "../Typography/index.js";
 import { useRef } from "react";
 import { TouchableOpacity, View } from "react-native";
@@ -26,29 +27,35 @@ function ActionButtons(t0) {
   if ($[1] !== actions || $[2] !== onDone || $[3] !== theme) {
     let t3;
     if ($[5] !== onDone || $[6] !== theme) {
-      t3 = (action, index) => _jsxs(TouchableOpacity, {
-        accessibilityLabel: action.label ?? "Acci\xF3n",
-        accessibilityRole: "button",
-        activeOpacity: 0.8,
-        onPress: () => {
-          onDone();
-          action.onPress();
-        },
-        style: {
-          backgroundColor: action.color ?? theme.danger,
-          justifyContent: "center",
-          alignItems: "center",
-          paddingHorizontal: 20
-        },
-        children: [action.icon ? _jsx(Icon, {
-          color: theme.text.inverse,
-          name: action.icon,
-          size: 20
-        }) : null, action.label ? _jsx(Typography.Text, {
-          className: "text-text-inverse mt-1",
-          children: action.label
-        }) : null]
-      }, index);
+      t3 = (action, index) => {
+        const ink = action.color ? resolveOnColor(action.color) : theme.text.onDanger;
+        return _jsxs(TouchableOpacity, {
+          accessibilityLabel: action.label ?? "Acci\xF3n",
+          accessibilityRole: "button",
+          activeOpacity: 0.8,
+          onPress: () => {
+            onDone();
+            action.onPress();
+          },
+          style: {
+            backgroundColor: action.color ?? theme.danger,
+            justifyContent: "center",
+            alignItems: "center",
+            paddingHorizontal: 20
+          },
+          children: [action.icon ? _jsx(Icon, {
+            color: ink,
+            name: action.icon,
+            size: 20
+          }) : null, action.label ? _jsx(Typography.Text, {
+            className: "mt-1",
+            style: {
+              color: ink
+            },
+            children: action.label
+          }) : null]
+        }, index);
+      };
       $[5] = onDone;
       $[6] = theme;
       $[7] = t3;

package/dist/Display/document-pages.d.ts

@@ -0,0 +1,21 @@
+import { type DocumentRenderer } from "./document-renderer.js";
+import { type DocumentPage, type DocumentSource } from "../utils/document.js";
+export declare enum DocumentStatus {
+    LOADING = "loading",
+    READY = "ready",
+    UNSUPPORTED = "unsupported",
+    ERROR = "error"
+}
+export interface DocumentPagesState {
+    label: string;
+    isImage: boolean;
+    status: DocumentStatus;
+    pageCount: number;
+    pages: DocumentPage[];
+    attempt: number;
+    retry: () => void;
+    reportPageError: () => void;
+}
+export declare function documentMeta(label: string, isImage: boolean, pageCount: number): string;
+export declare function documentHeading(state: DocumentPagesState): string;
+export declare function useDocumentPages(source: DocumentSource, maxWidth: number, firstPageOnly: boolean, override?: DocumentRenderer): DocumentPagesState;