@webority/mobile-ui 0.0.0-stage → 0.0.33

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

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "FilePicker", {
+  enumerable: true,
+  get: function () {
+    return _FilePicker.FilePicker;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _FilePicker.default;
+  }
+});
+Object.defineProperty(exports, "formatFileSize", {
+  enumerable: true,
+  get: function () {
+    return _FilePicker.formatFileSize;
+  }
+});
+var _FilePicker = _interopRequireWildcard(require("./FilePicker.js"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+//# sourceMappingURL=index.js.map

package/lib/commonjs/components/FileViewer/FileViewer.js

@@ -0,0 +1,259 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.FileViewer = void 0;
+var _mobileCore = require("@webority/mobile-core");
+var _download = require("@webority/mobile-core/download");
+var _react = require("react");
+var _reactNative = require("react-native");
+var _NativePdfRasterizer = _interopRequireDefault(require("../../specs/NativePdfRasterizer.js"));
+var _hashString = require("../../utils/hashString.js");
+var _index = require("../Spinner/index.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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 * _reactNative.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 `${(0, _hashString.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 (0, _download.downloadFile)({
+    client: source.client ?? _mobileCore.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.
+ */
+const FileViewer = ({
+  source,
+  onLoadComplete,
+  onPageChanged,
+  onError,
+  loadingIndicator,
+  style,
+  testID,
+  accessibilityLabel
+}) => {
+  const {
+    width: windowWidth
+  } = (0, _reactNative.useWindowDimensions)();
+  const [pageCount, setPageCount] = (0, _react.useState)(0);
+  const [pageSizePt, setPageSizePt] = (0, _react.useState)({
+    width: 612,
+    height: 792
+  }); // US Letter fallback
+  const pageAspect = pageSizePt.height / pageSizePt.width;
+  const [renderedPages, setRenderedPages] = (0, _react.useState)({});
+  const [currentPage, setCurrentPage] = (0, _react.useState)(0);
+  const handleRef = (0, _react.useRef)(null);
+  const onErrorRef = (0, _react.useRef)(onError);
+  onErrorRef.current = onError;
+  const onLoadCompleteRef = (0, _react.useRef)(onLoadComplete);
+  onLoadCompleteRef.current = onLoadComplete;
+  const onPageChangedRef = (0, _react.useRef)(onPageChanged);
+  onPageChangedRef.current = onPageChanged;
+  const documentSource = (0, _react.useMemo)(() => ({
+    uri: source.uri,
+    headers: source.headers,
+    client: source.client,
+    cache: source.cache
+  }), [source.uri, source.headers, source.client, source.cache]);
+  (0, _react.useEffect)(() => {
+    let cancelled = false;
+    const load = async () => {
+      if (!_NativePdfRasterizer.default) {
+        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 _NativePdfRasterizer.default.open(path);
+        if (cancelled) {
+          await _NativePdfRasterizer.default.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);
+          _mobileCore.Logger.error('[@webority/mobile-ui] FileViewer failed to load.', err);
+          onErrorRef.current?.(err);
+        }
+      }
+    };
+    void load();
+    return () => {
+      cancelled = true;
+    };
+  }, [documentSource]);
+  (0, _react.useEffect)(() => () => {
+    const openHandle = handleRef.current;
+    if (openHandle) {
+      _NativePdfRasterizer.default?.close(openHandle).catch(() => undefined);
+    }
+  }, []);
+  const renderPageImage = (0, _react.useCallback)(async pageIndex => {
+    const openHandle = handleRef.current;
+    if (!openHandle || !_NativePdfRasterizer.default) {
+      return;
+    }
+    try {
+      const scale = scaleForWidth(windowWidth, pageSizePt.width);
+      const uri = await _NativePdfRasterizer.default.renderPage(openHandle, pageIndex, scale);
+      setRenderedPages(prev => prev[pageIndex] ? prev : {
+        ...prev,
+        [pageIndex]: uri
+      });
+    } catch (error) {
+      _mobileCore.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.
+  (0, _react.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 = (0, _react.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 = (0, _react.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__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [styles.root, style],
+    testID: testID,
+    accessible: accessibilityLabel !== undefined,
+    accessibilityLabel: accessibilityLabel,
+    accessibilityRole: "none",
+    children: pageCount === 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.pagePlaceholder,
+      children: loadingIndicator ? loadingIndicator() : /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Spinner, {
+        size: "lg"
+      })
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: [styles.page, {
+            width: windowWidth,
+            height: pageHeight
+          }],
+          children: uri ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
+            source: {
+              uri
+            },
+            style: styles.pageImage,
+            resizeMode: "contain",
+            accessible: false
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: styles.pagePlaceholder,
+            children: withinWindow ? loadingIndicator?.() ?? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Spinner, {
+              size: "lg"
+            }) : null
+          })
+        }, index);
+      })
+    })
+  });
+};
+exports.FileViewer = FileViewer;
+FileViewer.displayName = 'FileViewer';
+const styles = _reactNative.StyleSheet.create({
+  root: {
+    flex: 1
+  },
+  page: {
+    alignSelf: 'center'
+  },
+  pageImage: {
+    flex: 1
+  },
+  pagePlaceholder: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+});
+var _default = exports.default = FileViewer;
+//# sourceMappingURL=FileViewer.js.map

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

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "FileViewer", {
+  enumerable: true,
+  get: function () {
+    return _FileViewer.FileViewer;
+  }
+});
+var _FileViewer = require("./FileViewer.js");
+//# sourceMappingURL=index.js.map