@webority-technologies/mobile 0.0.1

package/lib/module/components/ImageGallery/ImageGallery.js

@@ -0,0 +1,458 @@
+"use strict";
+
+/**
+ * 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}
+ * />
+ */
+
+import React, { useCallback, useMemo, useRef, useState } from 'react';
+import { Dimensions, Image, Modal as RNModal, Pressable, StyleSheet, Text, View } from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import Animated, { runOnJS, useAnimatedStyle, useSharedValue, withSpring, withTiming } from 'react-native-reanimated';
+import { Carousel } from "../Carousel/index.js";
+import { Icon } from "../Icon/index.js";
+import { useTheme } from "../../theme/index.js";
+import { triggerHaptic } from "../../utils/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 = useTheme();
+  const styles = useMemo(() => buildStyles(theme), [theme]);
+  const [currentIndex, setCurrentIndex] = useState(clamp(initialIndex, 0, Math.max(0, images.length - 1)));
+  const [lightboxOpen, setLightboxOpen] = useState(false);
+  const handleIndexChange = useCallback(idx => {
+    setCurrentIndex(idx);
+    onIndexChange?.(idx);
+  }, [onIndexChange]);
+  const openLightbox = useCallback(() => {
+    if (!enableLightbox) return;
+    triggerHaptic('selection');
+    setLightboxOpen(true);
+  }, [enableLightbox]);
+  const closeLightbox = useCallback(() => {
+    triggerHaptic('selection');
+    setLightboxOpen(false);
+  }, []);
+  const renderImage = useCallback((image, idx) => {
+    const a11y = image.alt ?? `Image ${idx + 1} of ${images.length}`;
+    return /*#__PURE__*/_jsx(Pressable, {
+      onPress: openLightbox,
+      accessibilityRole: "image",
+      accessibilityLabel: a11y,
+      accessibilityHint: enableLightbox ? 'Tap to open fullscreen' : undefined,
+      style: styles.imageWrap,
+      children: /*#__PURE__*/_jsx(Image, {
+        source: image.source,
+        style: styles.image,
+        resizeMode: "cover"
+      })
+    });
+  }, [enableLightbox, images.length, openLightbox, styles]);
+  const renderThumbnail = useCallback(image => /*#__PURE__*/_jsx(Image, {
+    source: image.source,
+    style: styles.thumbnailImage,
+    resizeMode: "cover"
+  }), [styles]);
+  return /*#__PURE__*/_jsxs(View, {
+    style: [styles.container, containerStyle],
+    testID: testID,
+    accessibilityLabel: accessibilityLabel ?? 'Image gallery',
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: styles.carouselWrap,
+      children: [/*#__PURE__*/_jsx(Carousel, {
+        data: images,
+        defaultIndex: initialIndex,
+        onIndexChange: handleIndexChange,
+        renderItem: renderImage,
+        showPagination: false,
+        showThumbnails: showThumbnails,
+        renderThumbnail: renderThumbnail
+      }), showCounter && images.length > 0 ? /*#__PURE__*/_jsx(View, {
+        style: styles.counterPill,
+        pointerEvents: "none",
+        children: /*#__PURE__*/_jsx(Text, {
+          style: [styles.counterText, {
+            color: theme.colors.text.inverse
+          }],
+          accessibilityLabel: `Image ${currentIndex + 1} of ${images.length}`,
+          children: `${currentIndex + 1} / ${images.length}`
+        })
+      }) : null]
+    }), enableLightbox ? /*#__PURE__*/_jsx(Lightbox, {
+      visible: lightboxOpen,
+      images: images,
+      initialIndex: currentIndex,
+      enablePinchZoom: enablePinchZoom,
+      showCounter: showCounter,
+      onClose: closeLightbox,
+      onIndexChange: handleIndexChange
+    }) : null]
+  });
+};
+ImageGallery.displayName = 'ImageGallery';
+
+// ───────── Lightbox ─────────
+
+const Lightbox = ({
+  visible,
+  images,
+  initialIndex,
+  enablePinchZoom,
+  showCounter,
+  onClose,
+  onIndexChange
+}) => {
+  const theme = useTheme();
+  const styles = useMemo(() => buildLightboxStyles(theme), [theme]);
+  const carouselRef = useRef(null);
+  const [activeIndex, setActiveIndex] = useState(initialIndex);
+  const handleSwipe = useCallback(idx => {
+    if (idx !== activeIndex) {
+      triggerHaptic('selection');
+      setActiveIndex(idx);
+      onIndexChange(idx);
+    }
+  }, [activeIndex, onIndexChange]);
+  const renderItem = useCallback((image, idx) => /*#__PURE__*/_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__*/_jsx(RNModal, {
+    visible: visible,
+    transparent: true,
+    statusBarTranslucent: true,
+    presentationStyle: "overFullScreen",
+    animationType: "fade",
+    onRequestClose: onClose,
+    accessibilityViewIsModal: true,
+    children: /*#__PURE__*/_jsxs(View, {
+      style: styles.backdrop,
+      accessibilityViewIsModal: true,
+      children: [/*#__PURE__*/_jsx(Carousel, {
+        ref: carouselRef,
+        data: images,
+        defaultIndex: initialIndex,
+        onIndexChange: handleSwipe,
+        renderItem: renderItem,
+        showPagination: false
+      }), showCounter && images.length > 0 ? /*#__PURE__*/_jsx(View, {
+        style: styles.counterPill,
+        pointerEvents: "none",
+        children: /*#__PURE__*/_jsx(Text, {
+          style: [styles.counterText, {
+            color: theme.colors.text.inverse
+          }],
+          accessibilityLabel: `Image ${activeIndex + 1} of ${images.length}`,
+          children: `${activeIndex + 1} / ${images.length}`
+        })
+      }) : null, /*#__PURE__*/_jsx(Pressable, {
+        onPress: onClose,
+        accessibilityRole: "button",
+        accessibilityLabel: "Close gallery",
+        style: styles.closeButton,
+        hitSlop: 12,
+        children: /*#__PURE__*/_jsx(Icon, {
+          name: "x",
+          family: "feather",
+          size: "lg",
+          color: theme.colors.text.inverse
+        })
+      }), caption ? /*#__PURE__*/_jsx(Animated.View, {
+        style: styles.captionWrap,
+        entering: undefined,
+        accessibilityElementsHidden: false,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.captionText,
+          numberOfLines: 3,
+          children: caption
+        })
+      }) : null]
+    })
+  });
+};
+
+// ───────── ZoomableImage ─────────
+
+const ZoomableImage = ({
+  image,
+  index,
+  total,
+  active,
+  enabled
+}) => {
+  const screen = Dimensions.get('window');
+  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]);
+
+  // When the slide leaves the active position, smoothly snap back to baseline.
+  React.useEffect(() => {
+    if (!active) {
+      scale.value = withTiming(1, {
+        duration: 150
+      });
+      translateX.value = withTiming(0, {
+        duration: 150
+      });
+      translateY.value = withTiming(0, {
+        duration: 150
+      });
+      savedScale.value = 1;
+      savedTranslateX.value = 0;
+      savedTranslateY.value = 0;
+    }
+  }, [active, scale, translateX, translateY, savedScale, savedTranslateX, savedTranslateY]);
+  const triggerImpact = useCallback(() => triggerHaptic('impactLight'), []);
+  const pinch = useMemo(() => 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 = withSpring(MIN_SCALE, SPRING_CONFIG);
+      translateX.value = withSpring(0, SPRING_CONFIG);
+      translateY.value = withSpring(0, SPRING_CONFIG);
+      savedScale.value = MIN_SCALE;
+      savedTranslateX.value = 0;
+      savedTranslateY.value = 0;
+      return;
+    }
+    if (scale.value > MAX_SCALE) {
+      scale.value = 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 = useMemo(() => 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 = useMemo(() => Gesture.Tap().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(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 = useMemo(() => Gesture.Race(pinch, pan, doubleTap), [pinch, pan, doubleTap]);
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [{
+      translateX: translateX.value
+    }, {
+      translateY: translateY.value
+    }, {
+      scale: scale.value
+    }]
+  }));
+
+  // Reset when the user navigates away from this slide.
+  React.useEffect(() => {
+    if (!active) {
+      resetTransform();
+    }
+  }, [active, resetTransform]);
+  const a11y = image.alt ?? `Image ${index + 1} of ${total}`;
+  return /*#__PURE__*/_jsx(GestureDetector, {
+    gesture: composed,
+    children: /*#__PURE__*/_jsx(Animated.View, {
+      style: [lightboxImageStyles.container, {
+        width: screen.width
+      }],
+      children: /*#__PURE__*/_jsx(Animated.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 => 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 => 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 = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  image: {
+    width: '100%',
+    height: '100%'
+  }
+});
+export { ImageGallery };
+export default ImageGallery;
+//# sourceMappingURL=ImageGallery.js.map

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

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