@webority-technologies/mobile-ui 0.0.4 → 0.0.6

package/lib/commonjs/components/DocumentViewer/DocumentViewer.js

@@ -0,0 +1,70 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.DocumentViewer = void 0;
+var _mobileCore = require("@webority-technologies/mobile-core");
+var _react = require("react");
+var _reactNative = require("react-native");
+var _reactNativePdf = _interopRequireDefault(require("react-native-pdf"));
+var _index = require("../Spinner/index.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const toError = value => value instanceof Error ? value : new Error(String(value));
+
+/**
+ * Renders a PDF only — the WebView fallback consumer apps use for non-PDF
+ * office documents is a distinct rendering strategy and stays app-side.
+ */
+const DocumentViewer = ({
+  source,
+  trustAllCerts = false,
+  onLoadComplete,
+  onPageChanged,
+  onError,
+  loadingIndicator,
+  style,
+  testID,
+  accessibilityLabel
+}) => {
+  const renderActivityIndicator = (0, _react.useCallback)(() => loadingIndicator ? loadingIndicator() : /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Spinner, {
+    size: "lg"
+  }), [loadingIndicator]);
+  const handleError = (0, _react.useCallback)(error => {
+    const err = toError(error);
+    _mobileCore.Logger.error('[@webority-technologies/mobile-ui] DocumentViewer failed to load.', err);
+    onError?.(err);
+  }, [onError]);
+  const handleLoadComplete = (0, _react.useCallback)(numberOfPages => onLoadComplete?.(numberOfPages), [onLoadComplete]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [styles.root, style],
+    testID: testID,
+    accessible: accessibilityLabel !== undefined,
+    accessibilityLabel: accessibilityLabel,
+    accessibilityRole: "none",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativePdf.default, {
+      source: source,
+      trustAllCerts: trustAllCerts,
+      style: styles.pdf,
+      renderActivityIndicator: renderActivityIndicator,
+      onLoadComplete: handleLoadComplete,
+      onPageChanged: onPageChanged,
+      onError: handleError
+    })
+  });
+};
+exports.DocumentViewer = DocumentViewer;
+DocumentViewer.displayName = 'DocumentViewer';
+const styles = _reactNative.StyleSheet.create({
+  root: {
+    flex: 1
+  },
+  pdf: {
+    flex: 1,
+    width: '100%',
+    height: '100%'
+  }
+});
+var _default = exports.default = DocumentViewer;
+//# sourceMappingURL=DocumentViewer.js.map

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

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

package/lib/commonjs/components/ZoomableImage/ZoomableImage.js

@@ -0,0 +1,204 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ZoomableImage = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _reactNativeGestureHandler = require("react-native-gesture-handler");
+var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
+var _index = require("../../utils/index.js");
+var _jsxRuntime = require("react/jsx-runtime");
+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); }
+/**
+ * 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.
+ */
+
+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
+};
+const ZoomableImage = ({
+  children,
+  maxScale = DEFAULT_MAX_SCALE,
+  minScale = DEFAULT_MIN_SCALE,
+  doubleTapScale = DEFAULT_DOUBLE_TAP_SCALE,
+  disabled = false,
+  haptic,
+  style,
+  accessibilityLabel,
+  testID
+}) => {
+  const scale = (0, _reactNativeReanimated.useSharedValue)(1);
+  const savedScale = (0, _reactNativeReanimated.useSharedValue)(1);
+  const translateX = (0, _reactNativeReanimated.useSharedValue)(0);
+  const translateY = (0, _reactNativeReanimated.useSharedValue)(0);
+  const savedTranslateX = (0, _reactNativeReanimated.useSharedValue)(0);
+  const savedTranslateY = (0, _reactNativeReanimated.useSharedValue)(0);
+  const resetTransform = (0, _react.useCallback)(() => {
+    scale.value = (0, _reactNativeReanimated.withSpring)(1, SPRING_CONFIG);
+    savedScale.value = 1;
+    translateX.value = (0, _reactNativeReanimated.withSpring)(0, SPRING_CONFIG);
+    translateY.value = (0, _reactNativeReanimated.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.
+  (0, _react.useEffect)(() => {
+    if (disabled) {
+      resetTransform();
+    }
+  }, [disabled, resetTransform]);
+  const triggerImpact = (0, _react.useCallback)(() => {
+    const h = (0, _index.resolveHaptic)(haptic, 'impactLight');
+    if (h) {
+      (0, _index.triggerHaptic)(h);
+    }
+  }, [haptic]);
+  const pinch = (0, _react.useMemo)(() => _reactNativeGestureHandler.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 = (0, _reactNativeReanimated.withSpring)(minScale, SPRING_CONFIG);
+      translateX.value = (0, _reactNativeReanimated.withSpring)(0, SPRING_CONFIG);
+      translateY.value = (0, _reactNativeReanimated.withSpring)(0, SPRING_CONFIG);
+      savedScale.value = minScale;
+      savedTranslateX.value = 0;
+      savedTranslateY.value = 0;
+      return;
+    }
+    if (scale.value > maxScale) {
+      scale.value = (0, _reactNativeReanimated.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 = (0, _react.useMemo)(() => _reactNativeGestureHandler.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 = (0, _react.useMemo)(() => _reactNativeGestureHandler.Gesture.Tap().enabled(!disabled).numberOfTaps(2).onEnd(() => {
+    'worklet';
+
+    (0, _reactNativeReanimated.runOnJS)(triggerImpact)();
+    if (scale.value > 1) {
+      scale.value = (0, _reactNativeReanimated.withSpring)(1, SPRING_CONFIG);
+      translateX.value = (0, _reactNativeReanimated.withSpring)(0, SPRING_CONFIG);
+      translateY.value = (0, _reactNativeReanimated.withSpring)(0, SPRING_CONFIG);
+      savedScale.value = 1;
+      savedTranslateX.value = 0;
+      savedTranslateY.value = 0;
+    } else {
+      scale.value = (0, _reactNativeReanimated.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 = (0, _react.useMemo)(() => _reactNativeGestureHandler.Gesture.Race(pinch, pan, doubleTap), [pinch, pan, doubleTap]);
+  const animatedStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
+    transform: [{
+      translateX: translateX.value
+    }, {
+      translateY: translateY.value
+    }, {
+      scale: scale.value
+    }]
+  }));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeGestureHandler.GestureDetector, {
+    gesture: composed,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
+      style: [styles.container, style],
+      testID: testID,
+      accessibilityLabel: accessibilityLabel,
+      accessibilityState: {
+        disabled
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
+        style: [styles.content, animatedStyle],
+        children: children
+      })
+    })
+  });
+};
+exports.ZoomableImage = ZoomableImage;
+ZoomableImage.displayName = 'ZoomableImage';
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    overflow: 'hidden'
+  },
+  content: {
+    width: '100%',
+    height: '100%',
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+});
+var _default = exports.default = ZoomableImage;
+//# sourceMappingURL=ZoomableImage.js.map

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

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