@webority-technologies/mobile 0.0.1

package/lib/commonjs/components/ImageGallery/ImageGallery.js

@@ -0,0 +1,463 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ImageGallery = 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("../Carousel/index.js");
+var _index2 = require("../Icon/index.js");
+var _index3 = require("../../theme/index.js");
+var _index4 = 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); }
+/**
+ * ImageGallery — themed gallery built on top of Carousel.
+ *
+ * Base view: a Carousel of cover-fitted images with optional thumbnails strip
+ * and counter pill. Tapping an image opens a fullscreen Lightbox that re-uses
+ * the Carousel for swiping but layers Reanimated 3 pinch-to-zoom + pan gestures
+ * on top so the active image can be inspected at up to 4x magnification.
+ *
+ * USAGE:
+ *
+ * <ImageGallery
+ *   images={[
+ *     { source: { uri: 'https://...' }, caption: 'Sunset' },
+ *     { source: { uri: 'https://...' }, alt: 'Tower at dusk' }
+ *   ]}
+ *   initialIndex={0}
+ * />
+ */
+
+const MAX_SCALE = 4;
+const MIN_SCALE = 1;
+const DOUBLE_TAP_SCALE = 2;
+const SPRING_CONFIG = {
+  damping: 18,
+  stiffness: 220,
+  mass: 1
+};
+const ImageGallery = ({
+  images,
+  initialIndex = 0,
+  showThumbnails = true,
+  showCounter = true,
+  enableLightbox = true,
+  enablePinchZoom = true,
+  onIndexChange,
+  accessibilityLabel,
+  containerStyle,
+  testID
+}) => {
+  const theme = (0, _index3.useTheme)();
+  const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
+  const [currentIndex, setCurrentIndex] = (0, _react.useState)(clamp(initialIndex, 0, Math.max(0, images.length - 1)));
+  const [lightboxOpen, setLightboxOpen] = (0, _react.useState)(false);
+  const handleIndexChange = (0, _react.useCallback)(idx => {
+    setCurrentIndex(idx);
+    onIndexChange?.(idx);
+  }, [onIndexChange]);
+  const openLightbox = (0, _react.useCallback)(() => {
+    if (!enableLightbox) return;
+    (0, _index4.triggerHaptic)('selection');
+    setLightboxOpen(true);
+  }, [enableLightbox]);
+  const closeLightbox = (0, _react.useCallback)(() => {
+    (0, _index4.triggerHaptic)('selection');
+    setLightboxOpen(false);
+  }, []);
+  const renderImage = (0, _react.useCallback)((image, idx) => {
+    const a11y = image.alt ?? `Image ${idx + 1} of ${images.length}`;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+      onPress: openLightbox,
+      accessibilityRole: "image",
+      accessibilityLabel: a11y,
+      accessibilityHint: enableLightbox ? 'Tap to open fullscreen' : undefined,
+      style: styles.imageWrap,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
+        source: image.source,
+        style: styles.image,
+        resizeMode: "cover"
+      })
+    });
+  }, [enableLightbox, images.length, openLightbox, styles]);
+  const renderThumbnail = (0, _react.useCallback)(image => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
+    source: image.source,
+    style: styles.thumbnailImage,
+    resizeMode: "cover"
+  }), [styles]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [styles.container, containerStyle],
+    testID: testID,
+    accessibilityLabel: accessibilityLabel ?? 'Image gallery',
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.carouselWrap,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Carousel, {
+        data: images,
+        defaultIndex: initialIndex,
+        onIndexChange: handleIndexChange,
+        renderItem: renderImage,
+        showPagination: false,
+        showThumbnails: showThumbnails,
+        renderThumbnail: renderThumbnail
+      }), showCounter && images.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.counterPill,
+        pointerEvents: "none",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [styles.counterText, {
+            color: theme.colors.text.inverse
+          }],
+          accessibilityLabel: `Image ${currentIndex + 1} of ${images.length}`,
+          children: `${currentIndex + 1} / ${images.length}`
+        })
+      }) : null]
+    }), enableLightbox ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Lightbox, {
+      visible: lightboxOpen,
+      images: images,
+      initialIndex: currentIndex,
+      enablePinchZoom: enablePinchZoom,
+      showCounter: showCounter,
+      onClose: closeLightbox,
+      onIndexChange: handleIndexChange
+    }) : null]
+  });
+};
+exports.ImageGallery = ImageGallery;
+ImageGallery.displayName = 'ImageGallery';
+
+// ───────── Lightbox ─────────
+
+const Lightbox = ({
+  visible,
+  images,
+  initialIndex,
+  enablePinchZoom,
+  showCounter,
+  onClose,
+  onIndexChange
+}) => {
+  const theme = (0, _index3.useTheme)();
+  const styles = (0, _react.useMemo)(() => buildLightboxStyles(theme), [theme]);
+  const carouselRef = (0, _react.useRef)(null);
+  const [activeIndex, setActiveIndex] = (0, _react.useState)(initialIndex);
+  const handleSwipe = (0, _react.useCallback)(idx => {
+    if (idx !== activeIndex) {
+      (0, _index4.triggerHaptic)('selection');
+      setActiveIndex(idx);
+      onIndexChange(idx);
+    }
+  }, [activeIndex, onIndexChange]);
+  const renderItem = (0, _react.useCallback)((image, idx) => /*#__PURE__*/(0, _jsxRuntime.jsx)(ZoomableImage, {
+    image: image,
+    index: idx,
+    total: images.length,
+    active: idx === activeIndex,
+    enabled: enablePinchZoom
+  }), [activeIndex, enablePinchZoom, images.length]);
+  const caption = images[activeIndex]?.caption;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Modal, {
+    visible: visible,
+    transparent: true,
+    statusBarTranslucent: true,
+    presentationStyle: "overFullScreen",
+    animationType: "fade",
+    onRequestClose: onClose,
+    accessibilityViewIsModal: true,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.backdrop,
+      accessibilityViewIsModal: true,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Carousel, {
+        ref: carouselRef,
+        data: images,
+        defaultIndex: initialIndex,
+        onIndexChange: handleSwipe,
+        renderItem: renderItem,
+        showPagination: false
+      }), showCounter && images.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.counterPill,
+        pointerEvents: "none",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [styles.counterText, {
+            color: theme.colors.text.inverse
+          }],
+          accessibilityLabel: `Image ${activeIndex + 1} of ${images.length}`,
+          children: `${activeIndex + 1} / ${images.length}`
+        })
+      }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+        onPress: onClose,
+        accessibilityRole: "button",
+        accessibilityLabel: "Close gallery",
+        style: styles.closeButton,
+        hitSlop: 12,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Icon, {
+          name: "x",
+          family: "feather",
+          size: "lg",
+          color: theme.colors.text.inverse
+        })
+      }), caption ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
+        style: styles.captionWrap,
+        entering: undefined,
+        accessibilityElementsHidden: false,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.captionText,
+          numberOfLines: 3,
+          children: caption
+        })
+      }) : null]
+    })
+  });
+};
+
+// ───────── ZoomableImage ─────────
+
+const ZoomableImage = ({
+  image,
+  index,
+  total,
+  active,
+  enabled
+}) => {
+  const screen = _reactNative.Dimensions.get('window');
+  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]);
+
+  // When the slide leaves the active position, smoothly snap back to baseline.
+  _react.default.useEffect(() => {
+    if (!active) {
+      scale.value = (0, _reactNativeReanimated.withTiming)(1, {
+        duration: 150
+      });
+      translateX.value = (0, _reactNativeReanimated.withTiming)(0, {
+        duration: 150
+      });
+      translateY.value = (0, _reactNativeReanimated.withTiming)(0, {
+        duration: 150
+      });
+      savedScale.value = 1;
+      savedTranslateX.value = 0;
+      savedTranslateY.value = 0;
+    }
+  }, [active, scale, translateX, translateY, savedScale, savedTranslateX, savedTranslateY]);
+  const triggerImpact = (0, _react.useCallback)(() => (0, _index4.triggerHaptic)('impactLight'), []);
+  const pinch = (0, _react.useMemo)(() => _reactNativeGestureHandler.Gesture.Pinch().enabled(enabled).onStart(() => {
+    'worklet';
+
+    savedScale.value = scale.value;
+  }).onUpdate(e => {
+    'worklet';
+
+    const next = savedScale.value * e.scale;
+    // Clamp 1..MAX_SCALE on the UI thread so pinch feels rubbery at limits.
+    if (next < MIN_SCALE) {
+      scale.value = MIN_SCALE + (next - MIN_SCALE) * 0.3;
+    } else if (next > MAX_SCALE) {
+      scale.value = MAX_SCALE + (next - MAX_SCALE) * 0.2;
+    } else {
+      scale.value = next;
+    }
+  }).onEnd(() => {
+    'worklet';
+
+    if (scale.value < MIN_SCALE) {
+      scale.value = (0, _reactNativeReanimated.withSpring)(MIN_SCALE, SPRING_CONFIG);
+      translateX.value = (0, _reactNativeReanimated.withSpring)(0, SPRING_CONFIG);
+      translateY.value = (0, _reactNativeReanimated.withSpring)(0, SPRING_CONFIG);
+      savedScale.value = MIN_SCALE;
+      savedTranslateX.value = 0;
+      savedTranslateY.value = 0;
+      return;
+    }
+    if (scale.value > MAX_SCALE) {
+      scale.value = (0, _reactNativeReanimated.withSpring)(MAX_SCALE, SPRING_CONFIG);
+      savedScale.value = MAX_SCALE;
+      return;
+    }
+    savedScale.value = scale.value;
+  }), [enabled, scale, savedScale, translateX, translateY, savedTranslateX, savedTranslateY]);
+
+  // Pan only engages when zoomed in — otherwise the parent Carousel owns horizontal swipe.
+  const pan = (0, _react.useMemo)(() => _reactNativeGestureHandler.Gesture.Pan().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;
+  }), [scale, translateX, translateY, savedTranslateX, savedTranslateY]);
+  const doubleTap = (0, _react.useMemo)(() => _reactNativeGestureHandler.Gesture.Tap().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)(DOUBLE_TAP_SCALE, SPRING_CONFIG);
+      savedScale.value = DOUBLE_TAP_SCALE;
+    }
+  }), [scale, savedScale, translateX, translateY, savedTranslateX, savedTranslateY, triggerImpact]);
+
+  // 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
+    }]
+  }));
+
+  // Reset when the user navigates away from this slide.
+  _react.default.useEffect(() => {
+    if (!active) {
+      resetTransform();
+    }
+  }, [active, resetTransform]);
+  const a11y = image.alt ?? `Image ${index + 1} of ${total}`;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeGestureHandler.GestureDetector, {
+    gesture: composed,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
+      style: [lightboxImageStyles.container, {
+        width: screen.width
+      }],
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.Image, {
+        source: image.source,
+        resizeMode: "contain",
+        style: [lightboxImageStyles.image, animatedStyle],
+        accessibilityLabel: a11y,
+        accessible: true
+      })
+    })
+  });
+};
+
+// ───────── Helpers / Styles ─────────
+
+const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+const buildStyles = theme => _reactNative.StyleSheet.create({
+  container: {
+    width: '100%'
+  },
+  carouselWrap: {
+    width: '100%',
+    position: 'relative'
+  },
+  imageWrap: {
+    width: '100%',
+    aspectRatio: 16 / 9,
+    backgroundColor: theme.colors.background.secondary,
+    overflow: 'hidden',
+    borderRadius: theme.radius.md
+  },
+  image: {
+    width: '100%',
+    height: '100%'
+  },
+  thumbnailImage: {
+    width: '100%',
+    height: '100%'
+  },
+  counterPill: {
+    position: 'absolute',
+    top: 12,
+    alignSelf: 'center',
+    paddingHorizontal: 12,
+    paddingVertical: 4,
+    borderRadius: theme.radius.full,
+    backgroundColor: 'rgba(0,0,0,0.55)'
+  },
+  counterText: {
+    fontSize: theme.typography.fontSize.sm,
+    fontWeight: theme.typography.fontWeight.semibold
+  }
+});
+const buildLightboxStyles = theme => _reactNative.StyleSheet.create({
+  backdrop: {
+    flex: 1,
+    backgroundColor: '#000',
+    justifyContent: 'center'
+  },
+  counterPill: {
+    position: 'absolute',
+    top: 48,
+    alignSelf: 'center',
+    paddingHorizontal: 14,
+    paddingVertical: 6,
+    borderRadius: theme.radius.full,
+    backgroundColor: 'rgba(0,0,0,0.6)'
+  },
+  counterText: {
+    fontSize: theme.typography.fontSize.sm,
+    fontWeight: theme.typography.fontWeight.semibold
+  },
+  closeButton: {
+    position: 'absolute',
+    top: 44,
+    right: 16,
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'rgba(0,0,0,0.5)'
+  },
+  captionWrap: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    bottom: 32,
+    paddingHorizontal: 24
+  },
+  captionText: {
+    color: '#FFFFFF',
+    fontSize: 14,
+    lineHeight: 20,
+    textAlign: 'center'
+  }
+});
+const lightboxImageStyles = _reactNative.StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  image: {
+    width: '100%',
+    height: '100%'
+  }
+});
+var _default = exports.default = ImageGallery;
+//# sourceMappingURL=ImageGallery.js.map

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

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ImageGallery", {
+  enumerable: true,
+  get: function () {
+    return _ImageGallery.ImageGallery;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _ImageGallery.default;
+  }
+});
+var _ImageGallery = _interopRequireWildcard(require("./ImageGallery.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