@webority-technologies/mobile-ui 0.0.4 → 0.0.6

package/lib/module/components/ZoomableImage/ZoomableImage.js

@@ -0,0 +1,198 @@
+"use strict";
+
+/**
+ * ZoomableImage — a standalone pinch-to-zoom / pan / double-tap-to-zoom
+ * wrapper for a single piece of content (typically one `<Image>`).
+ *
+ * Reuses the same Reanimated 3 gesture composition `ImageGallery`'s internal
+ * lightbox slide uses (pinch clamped and rubber-banded at its limits, pan
+ * gated to only engage once zoomed in, double-tap toggling between baseline
+ * and `doubleTapScale`), stripped of the carousel-slide concerns that
+ * component needs and this one does not — there is no `index`/`total`/
+ * `active` because a standalone image is always the one being viewed.
+ *
+ * USAGE:
+ *
+ * <ZoomableImage>
+ *   <Image source={{ uri }} style={styles.image} resizeMode="contain" />
+ * </ZoomableImage>
+ *
+ * Takes `children` rather than a `source`/`uri` prop: every real consumer of
+ * this pattern in the fleet wraps an already-authenticated image component
+ * (headers, caching, its own loading state) rather than a bare `<Image>`, so
+ * a `source` prop would force re-implementing that per app. Wrapping keeps
+ * this component ignorant of how the image is fetched.
+ */
+
+import React, { useCallback, useEffect, useMemo } from 'react';
+import { StyleSheet } from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import Animated, { runOnJS, useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated';
+import { resolveHaptic, triggerHaptic } from "../../utils/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const DEFAULT_MAX_SCALE = 4;
+const DEFAULT_MIN_SCALE = 1;
+const DEFAULT_DOUBLE_TAP_SCALE = 2;
+const SPRING_CONFIG = {
+  damping: 18,
+  stiffness: 220,
+  mass: 1
+};
+export const ZoomableImage = ({
+  children,
+  maxScale = DEFAULT_MAX_SCALE,
+  minScale = DEFAULT_MIN_SCALE,
+  doubleTapScale = DEFAULT_DOUBLE_TAP_SCALE,
+  disabled = false,
+  haptic,
+  style,
+  accessibilityLabel,
+  testID
+}) => {
+  const scale = useSharedValue(1);
+  const savedScale = useSharedValue(1);
+  const translateX = useSharedValue(0);
+  const translateY = useSharedValue(0);
+  const savedTranslateX = useSharedValue(0);
+  const savedTranslateY = useSharedValue(0);
+  const resetTransform = useCallback(() => {
+    scale.value = withSpring(1, SPRING_CONFIG);
+    savedScale.value = 1;
+    translateX.value = withSpring(0, SPRING_CONFIG);
+    translateY.value = withSpring(0, SPRING_CONFIG);
+    savedTranslateX.value = 0;
+    savedTranslateY.value = 0;
+  }, [scale, savedScale, translateX, translateY, savedTranslateX, savedTranslateY]);
+
+  // Disabling mid-zoom must not leave the content stranded scaled/panned —
+  // snap it back the same way ImageGallery's slide resets on losing focus.
+  useEffect(() => {
+    if (disabled) {
+      resetTransform();
+    }
+  }, [disabled, resetTransform]);
+  const triggerImpact = useCallback(() => {
+    const h = resolveHaptic(haptic, 'impactLight');
+    if (h) {
+      triggerHaptic(h);
+    }
+  }, [haptic]);
+  const pinch = useMemo(() => Gesture.Pinch().enabled(!disabled).onStart(() => {
+    'worklet';
+
+    savedScale.value = scale.value;
+  }).onUpdate(e => {
+    'worklet';
+
+    const next = savedScale.value * e.scale;
+    // Clamp minScale..maxScale on the UI thread so pinch feels rubbery at limits.
+    if (next < minScale) {
+      scale.value = minScale + (next - minScale) * 0.3;
+    } else if (next > maxScale) {
+      scale.value = maxScale + (next - maxScale) * 0.2;
+    } else {
+      scale.value = next;
+    }
+  }).onEnd(() => {
+    'worklet';
+
+    if (scale.value < minScale) {
+      scale.value = withSpring(minScale, SPRING_CONFIG);
+      translateX.value = withSpring(0, SPRING_CONFIG);
+      translateY.value = withSpring(0, SPRING_CONFIG);
+      savedScale.value = minScale;
+      savedTranslateX.value = 0;
+      savedTranslateY.value = 0;
+      return;
+    }
+    if (scale.value > maxScale) {
+      scale.value = withSpring(maxScale, SPRING_CONFIG);
+      savedScale.value = maxScale;
+      return;
+    }
+    savedScale.value = scale.value;
+  }), [disabled, scale, savedScale, translateX, translateY, savedTranslateX, savedTranslateY, minScale, maxScale]);
+
+  // Pan only engages when zoomed in — otherwise a scroll view or carousel this
+  // is nested inside keeps owning the gesture.
+  const pan = useMemo(() => Gesture.Pan().enabled(!disabled).minPointers(1).maxPointers(1).onStart(() => {
+    'worklet';
+
+    savedTranslateX.value = translateX.value;
+    savedTranslateY.value = translateY.value;
+  }).onUpdate(e => {
+    'worklet';
+
+    if (scale.value <= 1) {
+      return;
+    }
+    translateX.value = savedTranslateX.value + e.translationX;
+    translateY.value = savedTranslateY.value + e.translationY;
+  }).onEnd(() => {
+    'worklet';
+
+    savedTranslateX.value = translateX.value;
+    savedTranslateY.value = translateY.value;
+  }), [disabled, scale, translateX, translateY, savedTranslateX, savedTranslateY]);
+  const doubleTap = useMemo(() => Gesture.Tap().enabled(!disabled).numberOfTaps(2).onEnd(() => {
+    'worklet';
+
+    runOnJS(triggerImpact)();
+    if (scale.value > 1) {
+      scale.value = withSpring(1, SPRING_CONFIG);
+      translateX.value = withSpring(0, SPRING_CONFIG);
+      translateY.value = withSpring(0, SPRING_CONFIG);
+      savedScale.value = 1;
+      savedTranslateX.value = 0;
+      savedTranslateY.value = 0;
+    } else {
+      scale.value = withSpring(doubleTapScale, SPRING_CONFIG);
+      savedScale.value = doubleTapScale;
+    }
+  }), [disabled, scale, savedScale, translateX, translateY, savedTranslateX, savedTranslateY, triggerImpact, doubleTapScale]);
+
+  // Race the gestures so they coordinate cleanly: a tap won't be misread as a
+  // tiny pan, and pan won't fire when the user actually starts a pinch.
+  const composed = useMemo(() => Gesture.Race(pinch, pan, doubleTap), [pinch, pan, doubleTap]);
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [{
+      translateX: translateX.value
+    }, {
+      translateY: translateY.value
+    }, {
+      scale: scale.value
+    }]
+  }));
+  return /*#__PURE__*/_jsx(GestureDetector, {
+    gesture: composed,
+    children: /*#__PURE__*/_jsx(Animated.View, {
+      style: [styles.container, style],
+      testID: testID,
+      accessibilityLabel: accessibilityLabel,
+      accessibilityState: {
+        disabled
+      },
+      children: /*#__PURE__*/_jsx(Animated.View, {
+        style: [styles.content, animatedStyle],
+        children: children
+      })
+    })
+  });
+};
+ZoomableImage.displayName = 'ZoomableImage';
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    overflow: 'hidden'
+  },
+  content: {
+    width: '100%',
+    height: '100%',
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+});
+export default ZoomableImage;
+//# sourceMappingURL=ZoomableImage.js.map

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

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

package/lib/module/components/index.js

@@ -24,6 +24,7 @@ export { DateRangePicker } from "./DateRangePicker/index.js";
 export { Descriptions } from "./Descriptions/index.js";
 export { Dialog } from "./Dialog/index.js";
 export { Divider } from "./Divider/index.js";
+export { DocumentViewer } from "./DocumentViewer/index.js";
 export { Drawer } from "./Drawer/index.js";
 export { EmptyState } from "./EmptyState/index.js";
 export { ErrorBoundary, useErrorHandler, withErrorBoundary } from "./ErrorBoundary/index.js";
@@ -67,4 +68,5 @@ export { Timeline } from "./Timeline/index.js";
 export { TimePicker } from "./TimePicker/index.js";
 export { Toast, ToastProvider, toast, useToast } from "./Toast/index.js";
 export { Tooltip } from "./Tooltip/index.js";
+export { ZoomableImage } from "./ZoomableImage/index.js";
 //# sourceMappingURL=index.js.map

package/lib/typescript/commonjs/components/DocumentViewer/DocumentViewer.d.ts

@@ -0,0 +1,27 @@
+import type React from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+export interface DocumentViewerSource {
+    uri: string;
+    headers?: Record<string, string>;
+    cache?: boolean;
+}
+export interface DocumentViewerProps {
+    source: DocumentViewerSource;
+    /** Trust self-signed / invalid certs on the document request. Default false. */
+    trustAllCerts?: boolean;
+    onLoadComplete?: (numberOfPages: number) => void;
+    onPageChanged?: (page: number, numberOfPages: number) => void;
+    onError?: (error: Error) => void;
+    /** Replaces the default themed spinner shown while the document loads. */
+    loadingIndicator?: () => React.ReactNode;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+    accessibilityLabel?: string;
+}
+/**
+ * Renders a PDF only — the WebView fallback consumer apps use for non-PDF
+ * office documents is a distinct rendering strategy and stays app-side.
+ */
+export declare const DocumentViewer: React.FC<DocumentViewerProps>;
+export default DocumentViewer;
+//# sourceMappingURL=DocumentViewer.d.ts.map

package/lib/typescript/commonjs/components/DocumentViewer/index.d.ts

@@ -0,0 +1,3 @@
+export type { DocumentViewerProps, DocumentViewerSource } from './DocumentViewer';
+export { DocumentViewer } from './DocumentViewer';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/commonjs/components/ZoomableImage/ZoomableImage.d.ts

@@ -0,0 +1,47 @@
+/**
+ * ZoomableImage — a standalone pinch-to-zoom / pan / double-tap-to-zoom
+ * wrapper for a single piece of content (typically one `<Image>`).
+ *
+ * Reuses the same Reanimated 3 gesture composition `ImageGallery`'s internal
+ * lightbox slide uses (pinch clamped and rubber-banded at its limits, pan
+ * gated to only engage once zoomed in, double-tap toggling between baseline
+ * and `doubleTapScale`), stripped of the carousel-slide concerns that
+ * component needs and this one does not — there is no `index`/`total`/
+ * `active` because a standalone image is always the one being viewed.
+ *
+ * USAGE:
+ *
+ * <ZoomableImage>
+ *   <Image source={{ uri }} style={styles.image} resizeMode="contain" />
+ * </ZoomableImage>
+ *
+ * Takes `children` rather than a `source`/`uri` prop: every real consumer of
+ * this pattern in the fleet wraps an already-authenticated image component
+ * (headers, caching, its own loading state) rather than a bare `<Image>`, so
+ * a `source` prop would force re-implementing that per app. Wrapping keeps
+ * this component ignorant of how the image is fetched.
+ */
+import React from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import type { HapticType } from '../../utils';
+export interface ZoomableImageProps {
+    /** The content to pinch-zoom, pan, and double-tap-zoom — typically a single `<Image>`. */
+    children: React.ReactNode;
+    /** Upper bound on pinch and double-tap zoom. Default 4. */
+    maxScale?: number;
+    /** Lower bound on pinch zoom — the resting scale a pinch springs back to. Default 1. */
+    minScale?: number;
+    /** Scale a double tap zooms to; a second double tap returns to baseline. Default 2. */
+    doubleTapScale?: number;
+    /** Blocks pinch/pan/double-tap and smoothly resets any active zoom back to baseline. Default false. */
+    disabled?: boolean;
+    /** Haptic feedback on double-tap-to-zoom. Pass false to disable; pass a HapticType to override. */
+    haptic?: HapticType | false;
+    /** Style for the outer wrapping view. */
+    style?: StyleProp<ViewStyle>;
+    accessibilityLabel?: string;
+    testID?: string;
+}
+export declare const ZoomableImage: React.FC<ZoomableImageProps>;
+export default ZoomableImage;
+//# sourceMappingURL=ZoomableImage.d.ts.map

package/lib/typescript/commonjs/components/ZoomableImage/index.d.ts

@@ -0,0 +1,3 @@
+export type { ZoomableImageProps } from './ZoomableImage';
+export { ZoomableImage } from './ZoomableImage';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/commonjs/components/index.d.ts

@@ -46,6 +46,8 @@ export type { DialogAction, DialogProps, DialogVariant } from './Dialog';
 export { Dialog } from './Dialog';
 export type { DividerOrientation, DividerProps, DividerSpacing } from './Divider';
 export { Divider } from './Divider';
+export type { DocumentViewerProps, DocumentViewerSource } from './DocumentViewer';
+export { DocumentViewer } from './DocumentViewer';
 export type { DrawerProps, DrawerRef, DrawerSide } from './Drawer';
 export { Drawer } from './Drawer';
 export type { EmptyStateAction, EmptyStateProps, EmptyStateSize } from './EmptyState';
@@ -132,4 +134,6 @@ export type { ToastApi, ToastOptions, ToastPosition, ToastProps, ToastProviderPr
 export { Toast, ToastProvider, toast, useToast } from './Toast';
 export type { TooltipPlacement, TooltipProps, TooltipTrigger } from './Tooltip';
 export { Tooltip } from './Tooltip';
+export type { ZoomableImageProps } from './ZoomableImage';
+export { ZoomableImage } from './ZoomableImage';
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/module/components/DocumentViewer/DocumentViewer.d.ts

@@ -0,0 +1,27 @@
+import type React from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+export interface DocumentViewerSource {
+    uri: string;
+    headers?: Record<string, string>;
+    cache?: boolean;
+}
+export interface DocumentViewerProps {
+    source: DocumentViewerSource;
+    /** Trust self-signed / invalid certs on the document request. Default false. */
+    trustAllCerts?: boolean;
+    onLoadComplete?: (numberOfPages: number) => void;
+    onPageChanged?: (page: number, numberOfPages: number) => void;
+    onError?: (error: Error) => void;
+    /** Replaces the default themed spinner shown while the document loads. */
+    loadingIndicator?: () => React.ReactNode;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+    accessibilityLabel?: string;
+}
+/**
+ * Renders a PDF only — the WebView fallback consumer apps use for non-PDF
+ * office documents is a distinct rendering strategy and stays app-side.
+ */
+export declare const DocumentViewer: React.FC<DocumentViewerProps>;
+export default DocumentViewer;
+//# sourceMappingURL=DocumentViewer.d.ts.map

package/lib/typescript/module/components/DocumentViewer/index.d.ts

@@ -0,0 +1,3 @@
+export type { DocumentViewerProps, DocumentViewerSource } from './DocumentViewer.js';
+export { DocumentViewer } from './DocumentViewer.js';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/module/components/ZoomableImage/ZoomableImage.d.ts

@@ -0,0 +1,47 @@
+/**
+ * ZoomableImage — a standalone pinch-to-zoom / pan / double-tap-to-zoom
+ * wrapper for a single piece of content (typically one `<Image>`).
+ *
+ * Reuses the same Reanimated 3 gesture composition `ImageGallery`'s internal
+ * lightbox slide uses (pinch clamped and rubber-banded at its limits, pan
+ * gated to only engage once zoomed in, double-tap toggling between baseline
+ * and `doubleTapScale`), stripped of the carousel-slide concerns that
+ * component needs and this one does not — there is no `index`/`total`/
+ * `active` because a standalone image is always the one being viewed.
+ *
+ * USAGE:
+ *
+ * <ZoomableImage>
+ *   <Image source={{ uri }} style={styles.image} resizeMode="contain" />
+ * </ZoomableImage>
+ *
+ * Takes `children` rather than a `source`/`uri` prop: every real consumer of
+ * this pattern in the fleet wraps an already-authenticated image component
+ * (headers, caching, its own loading state) rather than a bare `<Image>`, so
+ * a `source` prop would force re-implementing that per app. Wrapping keeps
+ * this component ignorant of how the image is fetched.
+ */
+import React from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import type { HapticType } from '../../utils/index.js';
+export interface ZoomableImageProps {
+    /** The content to pinch-zoom, pan, and double-tap-zoom — typically a single `<Image>`. */
+    children: React.ReactNode;
+    /** Upper bound on pinch and double-tap zoom. Default 4. */
+    maxScale?: number;
+    /** Lower bound on pinch zoom — the resting scale a pinch springs back to. Default 1. */
+    minScale?: number;
+    /** Scale a double tap zooms to; a second double tap returns to baseline. Default 2. */
+    doubleTapScale?: number;
+    /** Blocks pinch/pan/double-tap and smoothly resets any active zoom back to baseline. Default false. */
+    disabled?: boolean;
+    /** Haptic feedback on double-tap-to-zoom. Pass false to disable; pass a HapticType to override. */
+    haptic?: HapticType | false;
+    /** Style for the outer wrapping view. */
+    style?: StyleProp<ViewStyle>;
+    accessibilityLabel?: string;
+    testID?: string;
+}
+export declare const ZoomableImage: React.FC<ZoomableImageProps>;
+export default ZoomableImage;
+//# sourceMappingURL=ZoomableImage.d.ts.map

package/lib/typescript/module/components/ZoomableImage/index.d.ts

@@ -0,0 +1,3 @@
+export type { ZoomableImageProps } from './ZoomableImage.js';
+export { ZoomableImage } from './ZoomableImage.js';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/module/components/index.d.ts

@@ -46,6 +46,8 @@ export type { DialogAction, DialogProps, DialogVariant } from './Dialog/index.js
 export { Dialog } from './Dialog/index.js';
 export type { DividerOrientation, DividerProps, DividerSpacing } from './Divider/index.js';
 export { Divider } from './Divider/index.js';
+export type { DocumentViewerProps, DocumentViewerSource } from './DocumentViewer/index.js';
+export { DocumentViewer } from './DocumentViewer/index.js';
 export type { DrawerProps, DrawerRef, DrawerSide } from './Drawer/index.js';
 export { Drawer } from './Drawer/index.js';
 export type { EmptyStateAction, EmptyStateProps, EmptyStateSize } from './EmptyState/index.js';
@@ -132,4 +134,6 @@ export type { ToastApi, ToastOptions, ToastPosition, ToastProps, ToastProviderPr
 export { Toast, ToastProvider, toast, useToast } from './Toast/index.js';
 export type { TooltipPlacement, TooltipProps, TooltipTrigger } from './Tooltip/index.js';
 export { Tooltip } from './Tooltip/index.js';
+export type { ZoomableImageProps } from './ZoomableImage/index.js';
+export { ZoomableImage } from './ZoomableImage/index.js';
 //# sourceMappingURL=index.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority-technologies/mobile-ui",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "description": "Beautiful, animated, accessible React Native components, theme and form engine for Webority projects.",
   "keywords": [
     "react-native",
@@ -61,7 +61,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@webority-technologies/mobile-core": "^0.0.4"
+    "@webority-technologies/mobile-core": "^0.0.5"
   },
   "peerDependencies": {
     "expo": ">=57.0.0",
@@ -69,6 +69,7 @@
     "react": "^19.1.0",
     "react-native": ">=0.81.0",
     "react-native-gesture-handler": "^2.21.0 || ^3.0.0",
+    "react-native-pdf": ">=7.0.4",
     "react-native-reanimated": "^4.0.0",
     "react-native-safe-area-context": ">=5.4.0",
     "react-native-worklets": ">=0.10.0"
@@ -103,6 +104,7 @@
     ]
   },
   "devDependencies": {
-    "expo-haptics": "^57.0.2"
+    "expo-haptics": "^57.0.2",
+    "react-native-pdf": "^7.0.4"
   }
 }