@webority/mobile-ui 0.0.39 → 0.2.0

package/lib/module/components/FilePicker/index.js

@@ -1,4 +1 @@
-"use strict";
-
-export { default, FilePicker, formatFileSize } from "./FilePicker.js";
-//# sourceMappingURL=index.js.map
+"use strict";export{default,FilePicker,formatFileSize}from"./FilePicker.js";

package/lib/module/components/FileViewer/FileViewer.js

@@ -1,253 +1 @@
-"use strict";
-
-import { Logger, publicClient } from '@webority/mobile-core';
-import { downloadFile } from '@webority/mobile-core/download';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Image, PixelRatio, ScrollView, StyleSheet, useWindowDimensions, View } from 'react-native';
-import PdfRasterizer from "../../specs/NativePdfRasterizer.js";
-import { hashString } from "../../utils/hashString.js";
-import { Spinner } from "../Spinner/index.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-const HAS_SCHEME = /^[a-z][a-z0-9+.-]*:/i;
-const MAX_RENDER_SCALE = 3;
-/** How many pages beyond the current one stay mounted, each direction. */
-const RENDER_WINDOW = 1;
-const toError = value => value instanceof Error ? value : new Error(String(value));
-
-/** The renderPage scale is capped so a very wide view never asks the native
- * rasterizer for an unbounded bitmap (see react-native.md's ARGB_8888 4-bytes/px
- * guidance) — both native sides additionally clamp their own pixel ceiling. */
-const scaleForWidth = (viewWidthPx, pageWidthPt) => {
-  if (pageWidthPt <= 0) {
-    return 1;
-  }
-  const raw = viewWidthPx / pageWidthPt * PixelRatio.get();
-  return Math.min(Math.max(raw, 1), MAX_RENDER_SCALE);
-};
-
-/**
- * Named from the whole URL, so two documents whose URLs end the same
- * (`/collateral/123` and `/leads/123`) never share one saved copy.
- */
-const cacheFileName = uri => {
-  const path = uri.split('#')[0]?.split('?')[0] ?? '';
-  const lastSegment = path.split('/').pop() ?? '';
-  const extension = /\.[a-z0-9]{1,8}$/i.exec(lastSegment)?.[0] ?? '';
-  return `${hashString(uri)}${extension.toLowerCase()}`;
-};
-const localPathFromSource = async source => {
-  if (!HAS_SCHEME.test(source.uri) || source.uri.startsWith('file://')) {
-    return source.uri.replace(/^file:\/\//, '');
-  }
-  const result = await downloadFile({
-    client: source.client ?? publicClient,
-    url: source.uri,
-    fileName: cacheFileName(source.uri),
-    headers: source.headers,
-    overwrite: source.cache === false
-  });
-  return result.path;
-};
-
-/**
- * Renders a PDF via our own native rasterizer (PDFKit on iOS, PdfRenderer on
- * Android) — no third-party PDF dependency. Pages are paged through a plain
- * `ScrollView` with manual windowed mounting (render the visible page ±
- * `RENDER_WINDOW`), not a `FlatList` — a `VirtualizedList`-based component
- * would trip React Native's "VirtualizedLists should never be nested inside
- * plain ScrollViews" the moment a consumer embeds FileViewer in their own
- * scrolling screen, which is a completely ordinary way to use it. Avoiding the
- * VirtualizedList primitive entirely removes that whole class of warning
- * rather than working around one instance of it. The WebView fallback
- * consumer apps use for non-PDF office documents is a distinct rendering
- * strategy and stays app-side.
- */
-export const FileViewer = ({
-  source,
-  onLoadComplete,
-  onPageChanged,
-  onError,
-  loadingIndicator,
-  style,
-  testID,
-  accessibilityLabel
-}) => {
-  const {
-    width: windowWidth
-  } = useWindowDimensions();
-  const [pageCount, setPageCount] = useState(0);
-  const [pageSizePt, setPageSizePt] = useState({
-    width: 612,
-    height: 792
-  }); // US Letter fallback
-  const pageAspect = pageSizePt.height / pageSizePt.width;
-  const [renderedPages, setRenderedPages] = useState({});
-  const [currentPage, setCurrentPage] = useState(0);
-  const handleRef = useRef(null);
-  const onErrorRef = useRef(onError);
-  onErrorRef.current = onError;
-  const onLoadCompleteRef = useRef(onLoadComplete);
-  onLoadCompleteRef.current = onLoadComplete;
-  const onPageChangedRef = useRef(onPageChanged);
-  onPageChangedRef.current = onPageChanged;
-  const documentSource = useMemo(() => ({
-    uri: source.uri,
-    headers: source.headers,
-    client: source.client,
-    cache: source.cache
-  }), [source.uri, source.headers, source.client, source.cache]);
-  useEffect(() => {
-    let cancelled = false;
-    const load = async () => {
-      if (!PdfRasterizer) {
-        onErrorRef.current?.(new Error('[@webority/mobile-ui] PdfRasterizer native module is not linked. ' + 'Run pod install / rebuild the app after adding @webority/mobile-ui.'));
-        return;
-      }
-      try {
-        const path = await localPathFromSource(documentSource);
-        if (cancelled) {
-          return;
-        }
-        const opened = await PdfRasterizer.open(path);
-        if (cancelled) {
-          await PdfRasterizer.close(opened.handle).catch(() => undefined);
-          return;
-        }
-        handleRef.current = opened.handle;
-        setPageCount(opened.pageCount);
-        setCurrentPage(0);
-        setRenderedPages({});
-        if (opened.pageWidth > 0 && opened.pageHeight > 0) {
-          setPageSizePt({
-            width: opened.pageWidth,
-            height: opened.pageHeight
-          });
-        }
-        onLoadCompleteRef.current?.(opened.pageCount);
-      } catch (error) {
-        if (!cancelled) {
-          const err = toError(error);
-          Logger.error('[@webority/mobile-ui] FileViewer failed to load.', err);
-          onErrorRef.current?.(err);
-        }
-      }
-    };
-    void load();
-    return () => {
-      cancelled = true;
-    };
-  }, [documentSource]);
-  useEffect(() => () => {
-    const openHandle = handleRef.current;
-    if (openHandle) {
-      PdfRasterizer?.close(openHandle).catch(() => undefined);
-    }
-  }, []);
-  const renderPageImage = useCallback(async pageIndex => {
-    const openHandle = handleRef.current;
-    if (!openHandle || !PdfRasterizer) {
-      return;
-    }
-    try {
-      const scale = scaleForWidth(windowWidth, pageSizePt.width);
-      const uri = await PdfRasterizer.renderPage(openHandle, pageIndex, scale);
-      setRenderedPages(prev => prev[pageIndex] ? prev : {
-        ...prev,
-        [pageIndex]: uri
-      });
-    } catch (error) {
-      Logger.error(`[@webority/mobile-ui] FileViewer failed to render page ${pageIndex}.`, toError(error));
-    }
-  }, [pageSizePt.width, windowWidth]);
-  const pageHeight = windowWidth * pageAspect;
-
-  // Mount and rasterize the current page plus a small window around it;
-  // everything else stays an empty placeholder slot until scrolled near.
-  useEffect(() => {
-    if (pageCount === 0) {
-      return;
-    }
-    const start = Math.max(0, currentPage - RENDER_WINDOW);
-    const end = Math.min(pageCount - 1, currentPage + RENDER_WINDOW);
-    for (let index = start; index <= end; index += 1) {
-      void renderPageImage(index);
-    }
-  }, [currentPage, pageCount, renderPageImage]);
-  const handleScroll = useCallback(event => {
-    if (pageHeight <= 0) {
-      return;
-    }
-    const page = Math.min(pageCount - 1, Math.max(0, Math.round(event.nativeEvent.contentOffset.y / pageHeight)));
-    setCurrentPage(prev => {
-      if (prev !== page) {
-        onPageChangedRef.current?.(page + 1, pageCount);
-      }
-      return page;
-    });
-  }, [pageCount, pageHeight]);
-  const pages = useMemo(() => Array.from({
-    length: pageCount
-  }, (_unused, i) => i), [pageCount]);
-  const renderWindowStart = Math.max(0, currentPage - RENDER_WINDOW);
-  const renderWindowEnd = Math.min(pageCount - 1, currentPage + RENDER_WINDOW);
-  return /*#__PURE__*/_jsx(View, {
-    style: [styles.root, style],
-    testID: testID,
-    accessible: accessibilityLabel !== undefined,
-    accessibilityLabel: accessibilityLabel,
-    accessibilityRole: "none",
-    children: pageCount === 0 ? /*#__PURE__*/_jsx(View, {
-      style: styles.pagePlaceholder,
-      children: loadingIndicator ? loadingIndicator() : /*#__PURE__*/_jsx(Spinner, {
-        size: "lg"
-      })
-    }) : /*#__PURE__*/_jsx(ScrollView, {
-      onScroll: handleScroll,
-      scrollEventThrottle: 32,
-      showsVerticalScrollIndicator: true,
-      removeClippedSubviews: true,
-      children: pages.map(index => {
-        const withinWindow = index >= renderWindowStart && index <= renderWindowEnd;
-        const uri = withinWindow ? renderedPages[index] : undefined;
-        return /*#__PURE__*/_jsx(View, {
-          style: [styles.page, {
-            width: windowWidth,
-            height: pageHeight
-          }],
-          children: uri ? /*#__PURE__*/_jsx(Image, {
-            source: {
-              uri
-            },
-            style: styles.pageImage,
-            resizeMode: "contain",
-            accessible: false
-          }) : /*#__PURE__*/_jsx(View, {
-            style: styles.pagePlaceholder,
-            children: withinWindow ? loadingIndicator?.() ?? /*#__PURE__*/_jsx(Spinner, {
-              size: "lg"
-            }) : null
-          })
-        }, index);
-      })
-    })
-  });
-};
-FileViewer.displayName = 'FileViewer';
-const styles = StyleSheet.create({
-  root: {
-    flex: 1
-  },
-  page: {
-    alignSelf: 'center'
-  },
-  pageImage: {
-    flex: 1
-  },
-  pagePlaceholder: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center'
-  }
-});
-export default FileViewer;
-//# sourceMappingURL=FileViewer.js.map
+"use strict";import{Logger,publicClient}from"@webority/mobile-core";import{downloadFile}from"@webority/mobile-core/download";import{useCallback,useEffect,useMemo,useRef,useState}from"react";import{Image,PixelRatio,ScrollView,StyleSheet,useWindowDimensions,View}from"react-native";import PdfRasterizer from"../../specs/NativePdfRasterizer.js";import{hashString}from"../../utils/hashString.js";import{Spinner}from"../Spinner/index.js";import{jsx as _jsx}from"react/jsx-runtime";const HAS_SCHEME=/^[a-z][a-z0-9+.-]*:/i,MAX_RENDER_SCALE=3,RENDER_WINDOW=1,toError=e=>e instanceof Error?e:new Error(String(e)),scaleForWidth=(e,t)=>{if(t<=0)return 1;const r=e/t*PixelRatio.get();return Math.min(Math.max(r,1),3)},cacheFileName=e=>{const t=(e.split("#")[0]?.split("?")[0]??"").split("/").pop()??"",r=/\.[a-z0-9]{1,8}$/i.exec(t)?.[0]??"";return`${hashString(e)}${r.toLowerCase()}`},localPathFromSource=async e=>{if(!HAS_SCHEME.test(e.uri)||e.uri.startsWith("file://"))return e.uri.replace(/^file:\/\//,"");return(await downloadFile({client:e.client??publicClient,url:e.uri,fileName:cacheFileName(e.uri),headers:e.headers,overwrite:!1===e.cache})).path};export const FileViewer=({source:e,onLoadComplete:t,onPageChanged:r,onError:i,loadingIndicator:a,style:o,testID:s,accessibilityLabel:n})=>{const{width:l}=useWindowDimensions(),[c,u]=useState(0),[h,d]=useState({width:612,height:792}),f=h.height/h.width,[m,p]=useState({}),[g,w]=useState(0),y=useRef(null),S=useRef(i);S.current=i;const b=useRef(t);b.current=t;const x=useRef(r);x.current=r;const E=useMemo(()=>({uri:e.uri,headers:e.headers,client:e.client,cache:e.cache}),[e.uri,e.headers,e.client,e.cache]);useEffect(()=>{let e=!1;return(async()=>{if(PdfRasterizer)try{const t=await localPathFromSource(E);if(e)return;const r=await PdfRasterizer.open(t);if(e)return void await PdfRasterizer.close(r.handle).catch(()=>{});y.current=r.handle,u(r.pageCount),w(0),p({}),r.pageWidth>0&&r.pageHeight>0&&d({width:r.pageWidth,height:r.pageHeight}),b.current?.(r.pageCount)}catch(t){if(!e){const e=toError(t);Logger.error("[@webority/mobile-ui] FileViewer failed to load.",e),S.current?.(e)}}else S.current?.(new Error("[@webority/mobile-ui] PdfRasterizer native module is not linked. Run pod install / rebuild the app after adding @webority/mobile-ui."))})(),()=>{e=!0}},[E]),useEffect(()=>()=>{const e=y.current;e&&PdfRasterizer?.close(e).catch(()=>{})},[]);const R=useCallback(async e=>{const t=y.current;if(t&&PdfRasterizer)try{const r=scaleForWidth(l,h.width),i=await PdfRasterizer.renderPage(t,e,r);p(t=>t[e]?t:{...t,[e]:i})}catch(t){Logger.error(`[@webority/mobile-ui] FileViewer failed to render page ${e}.`,toError(t))}},[h.width,l]),P=l*f;useEffect(()=>{if(0===c)return;const e=Math.max(0,g-1),t=Math.min(c-1,g+1);for(let r=e;r<=t;r+=1)R(r)},[g,c,R]);const M=useCallback(e=>{if(P<=0)return;const t=Math.min(c-1,Math.max(0,Math.round(e.nativeEvent.contentOffset.y/P)));w(e=>(e!==t&&x.current?.(t+1,c),t))},[c,P]),j=useMemo(()=>Array.from({length:c},(e,t)=>t),[c]),z=Math.max(0,g-1),C=Math.min(c-1,g+1);return _jsx(View,{style:[styles.root,o],testID:s,accessible:void 0!==n,accessibilityLabel:n,accessibilityRole:"none",children:0===c?_jsx(View,{style:styles.pagePlaceholder,children:a?a():_jsx(Spinner,{size:"lg"})}):_jsx(ScrollView,{onScroll:M,scrollEventThrottle:32,showsVerticalScrollIndicator:!0,removeClippedSubviews:!0,children:j.map(e=>{const t=e>=z&&e<=C,r=t?m[e]:void 0;return _jsx(View,{style:[styles.page,{width:l,height:P}],children:r?_jsx(Image,{source:{uri:r},style:styles.pageImage,resizeMode:"contain",accessible:!1}):_jsx(View,{style:styles.pagePlaceholder,children:t?a?.()??_jsx(Spinner,{size:"lg"}):null})},e)})})})};FileViewer.displayName="FileViewer";const styles=StyleSheet.create({root:{flex:1},page:{alignSelf:"center"},pageImage:{flex:1},pagePlaceholder:{flex:1,alignItems:"center",justifyContent:"center"}});export default FileViewer;

package/lib/module/components/FileViewer/index.js

@@ -1,4 +1 @@
-"use strict";
-
-export { FileViewer } from "./FileViewer.js";
-//# sourceMappingURL=index.js.map
+"use strict";export{FileViewer}from"./FileViewer.js";