@webority/mobile-ui 0.0.39 → 0.2.0

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

@@ -1,594 +1 @@
-"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("../../theme/index.js");
-var _index2 = require("../../utils/index.js");
-var _corners = require("../../utils/corners.js");
-var _defaultIcons = require("../AppIcon/defaultIcons.js");
-var _index3 = require("../Carousel/index.js");
-var _index4 = require("../Skeleton/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}
- * />
- */
-
-// Local shape mirror — see types.ts ImageGalleryTokens for the canonical definition.
-
-const MAX_SCALE_FALLBACK = 4;
-const MIN_SCALE_FALLBACK = 1;
-const DOUBLE_TAP_SCALE_FALLBACK = 2;
-const SPRING_CONFIG = {
-  damping: 18,
-  stiffness: 220,
-  mass: 1
-};
-const ImageGallery = ({
-  images,
-  initialIndex = 0,
-  showThumbnails = true,
-  showCounter = true,
-  enableLightbox = true,
-  enablePinchZoom = true,
-  onIndexChange,
-  haptic,
-  loading = false,
-  accessibilityLabel,
-  containerStyle,
-  testID
-}) => {
-  const theme = (0, _index.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;
-    }
-    const h = (0, _index2.resolveHaptic)(haptic, 'selection');
-    if (h) {
-      (0, _index2.triggerHaptic)(h);
-    }
-    setLightboxOpen(true);
-  }, [enableLightbox, haptic]);
-  const closeLightbox = (0, _react.useCallback)(() => {
-    const h = (0, _index2.resolveHaptic)(haptic, 'selection');
-    if (h) {
-      (0, _index2.triggerHaptic)(h);
-    }
-    setLightboxOpen(false);
-  }, [haptic]);
-  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]);
-  const rendered = /*#__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)(_index3.Carousel, {
-        data: images,
-        defaultIndex: initialIndex,
-        onIndexChange: handleIndexChange,
-        renderItem: renderImage,
-        showPagination: false,
-        showThumbnails: showThumbnails,
-        renderThumbnail: renderThumbnail,
-        haptic: haptic
-      }), 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,
-      haptic: haptic
-    }) : null]
-  });
-  if (loading) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(ImageGallerySkeleton, {
-      images: images,
-      showThumbnails: showThumbnails,
-      showCounter: showCounter,
-      containerStyle: containerStyle,
-      testID: testID
-    });
-  }
-  return rendered;
-};
-exports.ImageGallery = ImageGallery;
-ImageGallery.displayName = 'ImageGallery';
-
-/**
- * Placeholder shape for `<ImageGallery>`. Hero image block + optional
- * counter pill + thumbnail strip. Heights are tuned to match the live
- * component's defaults so the gallery doesn't reflow when ready.
- */
-const ImageGallerySkeleton = ({
-  images,
-  showThumbnails = true,
-  showCounter = true,
-  containerStyle,
-  testID
-}) => {
-  const thumbCount = Math.min(images?.length || 4, 6);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: [{
-      width: '100%'
-    }, containerStyle],
-    testID: testID,
-    accessibilityRole: "progressbar",
-    accessibilityState: {
-      busy: true
-    },
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: {
-        position: 'relative'
-      },
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index4.Skeleton, {
-        width: "100%",
-        height: 280,
-        radius: "lg"
-      }), showCounter ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: {
-          position: 'absolute',
-          top: 12,
-          right: 12
-        },
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index4.Skeleton, {
-          width: 44,
-          height: 22,
-          radius: "full"
-        })
-      }) : null]
-    }), showThumbnails ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: {
-        flexDirection: 'row',
-        marginTop: 12
-      },
-      children: Array.from({
-        length: thumbCount
-      }).map((_, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_index4.Skeleton, {
-        width: 64,
-        height: 64,
-        radius: "md",
-        style: {
-          marginRight: 8
-        }
-      }, `sk-thumb-${i}`))
-    }) : null]
-  });
-};
-ImageGallerySkeleton.displayName = 'ImageGallerySkeleton';
-ImageGallery.Skeleton = ImageGallerySkeleton;
-
-// ───────── Lightbox ─────────
-
-const Lightbox = ({
-  visible,
-  images,
-  initialIndex,
-  enablePinchZoom,
-  showCounter,
-  onClose,
-  onIndexChange,
-  haptic
-}) => {
-  const theme = (0, _index.useTheme)();
-  const styles = (0, _react.useMemo)(() => buildLightboxStyles(theme), [theme]);
-  const galleryTokens = theme.components.imageGallery;
-  const maxScale = galleryTokens?.maxScale ?? MAX_SCALE_FALLBACK;
-  const minScale = galleryTokens?.minScale ?? MIN_SCALE_FALLBACK;
-  const doubleTapScale = galleryTokens?.doubleTapScale ?? DOUBLE_TAP_SCALE_FALLBACK;
-  const carouselRef = (0, _react.useRef)(null);
-  const [activeIndex, setActiveIndex] = (0, _react.useState)(initialIndex);
-  const handleSwipe = (0, _react.useCallback)(idx => {
-    if (idx !== activeIndex) {
-      const h = (0, _index2.resolveHaptic)(haptic, 'selection');
-      if (h) {
-        (0, _index2.triggerHaptic)(h);
-      }
-      setActiveIndex(idx);
-      onIndexChange(idx);
-    }
-  }, [activeIndex, onIndexChange, haptic]);
-  const renderItem = (0, _react.useCallback)((image, idx) => /*#__PURE__*/(0, _jsxRuntime.jsx)(ZoomableImage, {
-    image: image,
-    index: idx,
-    total: images.length,
-    active: idx === activeIndex,
-    enabled: enablePinchZoom,
-    maxScale: maxScale,
-    minScale: minScale,
-    doubleTapScale: doubleTapScale,
-    haptic: haptic
-  }), [activeIndex, enablePinchZoom, images.length, maxScale, minScale, doubleTapScale, haptic]);
-  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)(_index3.Carousel, {
-        ref: carouselRef,
-        data: images,
-        defaultIndex: initialIndex,
-        onIndexChange: handleSwipe,
-        renderItem: renderItem,
-        showPagination: false
-        // Dormant today (no thumbnail strip in the lightbox) but wired anyway:
-        // enabling thumbnails here later must not resurrect an un-silenceable
-        // haptic.
-        ,
-        haptic: haptic
-      }), 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: (theme.icons?.close ?? _defaultIcons.defaultIcons.close)({
-          size: 24,
-          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,
-  maxScale,
-  minScale,
-  doubleTapScale,
-  haptic
-}) => {
-  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)(() => {
-    if (haptic !== false) {
-      (0, _index2.triggerHaptic)('impactLight');
-    }
-  }, [haptic]);
-  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 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;
-      // Mutation-tested equivalent under the jest reanimated mock (withSpring
-      // resolves synchronously to its target there): with this return removed,
-      // execution falls into `scale.value > maxScale` (always false, since
-      // minScale <= maxScale) and then `savedScale.value = scale.value`, which
-      // reads back the minScale just assigned above — same final state, so no
-      // jest assertion can distinguish the two. On a real device withSpring is
-      // asynchronous, so that fallthrough read could observe a stale
-      // mid-animation scale instead; kept as an explicit early return for that
-      // reason even though it isn't independently testable here.
-      return;
-    }
-    if (scale.value > maxScale) {
-      scale.value = (0, _reactNativeReanimated.withSpring)(maxScale, SPRING_CONFIG);
-      savedScale.value = maxScale;
-      return;
-    }
-    savedScale.value = scale.value;
-  }), [enabled, scale, savedScale, translateX, translateY, savedTranslateX, savedTranslateY, minScale, maxScale]);
-
-  // 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)(doubleTapScale, SPRING_CONFIG);
-      savedScale.value = doubleTapScale;
-    }
-  }), [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
-    }]
-  }));
-
-  // 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,
-    ..._corners.smoothCorners
-  },
-  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,
-    ..._corners.smoothCorners,
-    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,
-    ..._corners.smoothCorners,
-    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,
-    ..._corners.smoothCorners,
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: 'rgba(0,0,0,0.5)'
-  },
-  captionWrap: {
-    position: 'absolute',
-    left: 0,
-    right: 0,
-    bottom: 32,
-    paddingHorizontal: 24
-  },
-  captionText: {
-    // Fixed white, not a theme token, and deliberately so: the lightbox is an
-    // always-dark surface (#000 backdrop with rgba scrims above), so it does
-    // not follow the colour scheme. `text.primary` would be dark ink on black
-    // in light mode. Do not "themify" this.
-    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
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.ImageGallery=void 0;var _react=_interopRequireWildcard(require("react")),_reactNative=require("react-native"),_reactNativeGestureHandler=require("react-native-gesture-handler"),_reactNativeReanimated=_interopRequireWildcard(require("react-native-reanimated")),_index=require("../../theme/index.js"),_index2=require("../../utils/index.js"),_corners=require("../../utils/corners.js"),_defaultIcons=require("../AppIcon/defaultIcons.js"),_index3=require("../Carousel/index.js"),_index4=require("../Skeleton/index.js"),_ToastProvider=require("../Toast/ToastProvider.js"),_jsxRuntime=require("react/jsx-runtime");function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var a=new WeakMap,i=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var r,n,l={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return l;if(r=t?i:a){if(r.has(e))return r.get(e);r.set(e,l)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((n=(r=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(n.get||n.set)?r(l,t,n):l[t]=e[t]);return l})(e,t)}const MAX_SCALE_FALLBACK=4,MIN_SCALE_FALLBACK=1,DOUBLE_TAP_SCALE_FALLBACK=2,SPRING_CONFIG={damping:18,stiffness:220,mass:1},ImageGallery=({images:e,initialIndex:t=0,showThumbnails:a=!0,showCounter:i=!0,enableLightbox:r=!0,enablePinchZoom:n=!0,onIndexChange:l,haptic:s,loading:o=!1,accessibilityLabel:c,containerStyle:u,testID:d})=>{const m=(0,_index.useTheme)(),_=(0,_react.useMemo)(()=>buildStyles(m),[m]),[h,g]=(0,_react.useState)(clamp(t,0,Math.max(0,e.length-1))),[v,x]=(0,_react.useState)(!1),p=(0,_react.useCallback)(e=>{g(e),l?.(e)},[l]),b=(0,_react.useCallback)(()=>{if(!r)return;const e=(0,_index2.resolveHaptic)(s,"selection");e&&(0,_index2.triggerHaptic)(e),x(!0)},[r,s]),y=(0,_react.useCallback)(()=>{const e=(0,_index2.resolveHaptic)(s,"selection");e&&(0,_index2.triggerHaptic)(e),x(!1)},[s]),R=(0,_react.useCallback)((t,a)=>{const i=t.alt??`Image ${a+1} of ${e.length}`;return(0,_jsxRuntime.jsx)(_reactNative.Pressable,{onPress:b,accessibilityRole:"image",accessibilityLabel:i,accessibilityHint:r?"Tap to open fullscreen":void 0,style:_.imageWrap,children:(0,_jsxRuntime.jsx)(_reactNative.Image,{source:t.source,style:_.image,resizeMode:"cover"})})},[r,e.length,b,_]),S=(0,_react.useCallback)(e=>(0,_jsxRuntime.jsx)(_reactNative.Image,{source:e.source,style:_.thumbnailImage,resizeMode:"cover"}),[_]),N=(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[_.container,u],testID:d,accessibilityLabel:c??"Image gallery",children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:_.carouselWrap,children:[(0,_jsxRuntime.jsx)(_index3.Carousel,{data:e,defaultIndex:t,onIndexChange:p,renderItem:R,showPagination:!1,showThumbnails:a,renderThumbnail:S,haptic:s}),i&&e.length>0?(0,_jsxRuntime.jsx)(_reactNative.View,{style:_.counterPill,pointerEvents:"none",children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[_.counterText,{color:m.colors.onOverlay}],accessibilityLabel:`Image ${h+1} of ${e.length}`,children:`${h+1} / ${e.length}`})}):null]}),r?(0,_jsxRuntime.jsx)(Lightbox,{visible:v,images:e,initialIndex:h,enablePinchZoom:n,showCounter:i,onClose:y,onIndexChange:p,haptic:s}):null]});return o?(0,_jsxRuntime.jsx)(ImageGallerySkeleton,{images:e,showThumbnails:a,showCounter:i,containerStyle:u,testID:d}):N};exports.ImageGallery=ImageGallery,ImageGallery.displayName="ImageGallery";const ImageGallerySkeleton=({images:e,showThumbnails:t=!0,showCounter:a=!0,containerStyle:i,testID:r})=>{const n=Math.min(e?.length||4,6);return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[{width:"100%"},i],testID:r,accessibilityRole:"progressbar",accessibilityState:{busy:!0},children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:{position:"relative"},children:[(0,_jsxRuntime.jsx)(_index4.Skeleton,{width:"100%",height:280,radius:"lg"}),a?(0,_jsxRuntime.jsx)(_reactNative.View,{style:{position:"absolute",top:12,right:12},children:(0,_jsxRuntime.jsx)(_index4.Skeleton,{width:44,height:22,radius:"full"})}):null]}),t?(0,_jsxRuntime.jsx)(_reactNative.View,{style:{flexDirection:"row",marginTop:12},children:Array.from({length:n}).map((e,t)=>(0,_jsxRuntime.jsx)(_index4.Skeleton,{width:64,height:64,radius:"md",style:{marginRight:8}},`sk-thumb-${t}`))}):null]})};ImageGallerySkeleton.displayName="ImageGallerySkeleton",ImageGallery.Skeleton=ImageGallerySkeleton;const Lightbox=({visible:e,images:t,initialIndex:a,enablePinchZoom:i,showCounter:r,onClose:n,onIndexChange:l,haptic:s})=>{const o=(0,_index.useTheme)(),c=(0,_react.useMemo)(()=>buildLightboxStyles(o),[o]),u=o.components.imageGallery,d=u?.maxScale??4,m=u?.minScale??1,_=u?.doubleTapScale??2,h=(0,_react.useRef)(null),[g,v]=(0,_react.useState)(a),x=(0,_react.useCallback)(e=>{if(e!==g){const t=(0,_index2.resolveHaptic)(s,"selection");t&&(0,_index2.triggerHaptic)(t),v(e),l(e)}},[g,l,s]),p=(0,_react.useCallback)((e,a)=>(0,_jsxRuntime.jsx)(ZoomableImage,{image:e,index:a,total:t.length,active:a===g,enabled:i,maxScale:d,minScale:m,doubleTapScale:_,haptic:s}),[g,i,t.length,d,m,_,s]),b=t[g]?.caption;return(0,_jsxRuntime.jsx)(_reactNative.Modal,{visible:e,transparent:!0,statusBarTranslucent:!0,presentationStyle:"overFullScreen",animationType:"fade",onRequestClose:n,accessibilityViewIsModal:!0,children:(0,_jsxRuntime.jsxs)(_reactNative.View,{style:c.backdrop,accessibilityViewIsModal:!0,children:[(0,_jsxRuntime.jsx)(_index3.Carousel,{ref:h,data:t,defaultIndex:a,onIndexChange:x,renderItem:p,showPagination:!1,haptic:s}),r&&t.length>0?(0,_jsxRuntime.jsx)(_reactNative.View,{style:c.counterPill,pointerEvents:"none",children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[c.counterText,{color:o.colors.onOverlay}],accessibilityLabel:`Image ${g+1} of ${t.length}`,children:`${g+1} / ${t.length}`})}):null,(0,_jsxRuntime.jsx)(_reactNative.Pressable,{onPress:n,accessibilityRole:"button",accessibilityLabel:"Close gallery",style:c.closeButton,hitSlop:12,children:(o.icons?.close??_defaultIcons.defaultIcons.close)({size:24,color:o.colors.onOverlay})}),b?(0,_jsxRuntime.jsx)(_reactNativeReanimated.default.View,{style:c.captionWrap,entering:void 0,accessibilityElementsHidden:!1,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:c.captionText,numberOfLines:3,children:b})}):null,(0,_jsxRuntime.jsx)(_ToastProvider.ToastHost,{})]})})},ZoomableImage=({image:e,index:t,total:a,active:i,enabled:r,maxScale:n,minScale:l,doubleTapScale:s,haptic:o})=>{const c=_reactNative.Dimensions.get("window"),u=(0,_reactNativeReanimated.useSharedValue)(1),d=(0,_reactNativeReanimated.useSharedValue)(1),m=(0,_reactNativeReanimated.useSharedValue)(0),_=(0,_reactNativeReanimated.useSharedValue)(0),h=(0,_reactNativeReanimated.useSharedValue)(0),g=(0,_reactNativeReanimated.useSharedValue)(0),v=(0,_react.useCallback)(()=>{u.value=(0,_reactNativeReanimated.withSpring)(1,SPRING_CONFIG),d.value=1,m.value=(0,_reactNativeReanimated.withSpring)(0,SPRING_CONFIG),_.value=(0,_reactNativeReanimated.withSpring)(0,SPRING_CONFIG),h.value=0,g.value=0},[u,d,m,_,h,g]);_react.default.useEffect(()=>{i||(u.value=(0,_reactNativeReanimated.withTiming)(1,{duration:150}),m.value=(0,_reactNativeReanimated.withTiming)(0,{duration:150}),_.value=(0,_reactNativeReanimated.withTiming)(0,{duration:150}),d.value=1,h.value=0,g.value=0)},[i,u,m,_,d,h,g]);const x=(0,_react.useCallback)(()=>{!1!==o&&(0,_index2.triggerHaptic)("impactLight")},[o]),p=(0,_react.useMemo)(()=>_reactNativeGestureHandler.Gesture.Pinch().enabled(r).onStart(()=>{"worklet";d.value=u.value}).onUpdate(e=>{"worklet";const t=d.value*e.scale;u.value=t<l?l+.3*(t-l):t>n?n+.2*(t-n):t}).onEnd(()=>{"worklet";return u.value<l?(u.value=(0,_reactNativeReanimated.withSpring)(l,SPRING_CONFIG),m.value=(0,_reactNativeReanimated.withSpring)(0,SPRING_CONFIG),_.value=(0,_reactNativeReanimated.withSpring)(0,SPRING_CONFIG),d.value=l,h.value=0,void(g.value=0)):u.value>n?(u.value=(0,_reactNativeReanimated.withSpring)(n,SPRING_CONFIG),void(d.value=n)):void(d.value=u.value)}),[r,u,d,m,_,h,g,l,n]),b=(0,_react.useMemo)(()=>_reactNativeGestureHandler.Gesture.Pan().minPointers(1).maxPointers(1).onStart(()=>{"worklet";h.value=m.value,g.value=_.value}).onUpdate(e=>{"worklet";u.value<=1||(m.value=h.value+e.translationX,_.value=g.value+e.translationY)}).onEnd(()=>{"worklet";h.value=m.value,g.value=_.value}),[u,m,_,h,g]),y=(0,_react.useMemo)(()=>_reactNativeGestureHandler.Gesture.Tap().numberOfTaps(2).onEnd(()=>{"worklet";(0,_reactNativeReanimated.runOnJS)(x)(),u.value>1?(u.value=(0,_reactNativeReanimated.withSpring)(1,SPRING_CONFIG),m.value=(0,_reactNativeReanimated.withSpring)(0,SPRING_CONFIG),_.value=(0,_reactNativeReanimated.withSpring)(0,SPRING_CONFIG),d.value=1,h.value=0,g.value=0):(u.value=(0,_reactNativeReanimated.withSpring)(s,SPRING_CONFIG),d.value=s)}),[u,d,m,_,h,g,x,s]),R=(0,_react.useMemo)(()=>_reactNativeGestureHandler.Gesture.Race(p,b,y),[p,b,y]),S=(0,_reactNativeReanimated.useAnimatedStyle)(()=>({transform:[{translateX:m.value},{translateY:_.value},{scale:u.value}]}));_react.default.useEffect(()=>{i||v()},[i,v]);const N=e.alt??`Image ${t+1} of ${a}`;return(0,_jsxRuntime.jsx)(_reactNativeGestureHandler.GestureDetector,{gesture:R,children:(0,_jsxRuntime.jsx)(_reactNativeReanimated.default.View,{style:[lightboxImageStyles.container,{width:c.width}],children:(0,_jsxRuntime.jsx)(_reactNativeReanimated.default.Image,{source:e.source,resizeMode:"contain",style:[lightboxImageStyles.image,S],accessibilityLabel:N,accessible:!0})})})},clamp=(e,t,a)=>Math.min(Math.max(e,t),a),buildStyles=e=>_reactNative.StyleSheet.create({container:{width:"100%"},carouselWrap:{width:"100%",position:"relative"},imageWrap:{width:"100%",aspectRatio:16/9,backgroundColor:e.colors.background.secondary,overflow:"hidden",borderRadius:e.radius.md,..._corners.smoothCorners},image:{width:"100%",height:"100%"},thumbnailImage:{width:"100%",height:"100%"},counterPill:{position:"absolute",top:12,alignSelf:"center",paddingHorizontal:12,paddingVertical:4,borderRadius:e.radius.full,..._corners.smoothCorners,backgroundColor:"rgba(0,0,0,0.55)"},counterText:{fontSize:e.typography.fontSize.sm,fontWeight:e.typography.fontWeight.semibold}}),buildLightboxStyles=e=>_reactNative.StyleSheet.create({backdrop:{flex:1,backgroundColor:"#000",justifyContent:"center"},counterPill:{position:"absolute",top:48,alignSelf:"center",paddingHorizontal:14,paddingVertical:6,borderRadius:e.radius.full,..._corners.smoothCorners,backgroundColor:"rgba(0,0,0,0.6)"},counterText:{fontSize:e.typography.fontSize.sm,fontWeight:e.typography.fontWeight.semibold},closeButton:{position:"absolute",top:44,right:16,width:40,height:40,borderRadius:20,..._corners.smoothCorners,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"}}),lightboxImageStyles=_reactNative.StyleSheet.create({container:{flex:1,alignItems:"center",justifyContent:"center"},image:{width:"100%",height:"100%"}});var _default=exports.default=ImageGallery;

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

@@ -1,20 +1 @@
-"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
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"ImageGallery",{enumerable:!0,get:function(){return _ImageGallery.ImageGallery}}),Object.defineProperty(exports,"default",{enumerable:!0,get:function(){return _ImageGallery.default}});var _ImageGallery=_interopRequireWildcard(require("./ImageGallery.js"));function _interopRequireWildcard(e,r){if("function"==typeof WeakMap)var t=new WeakMap,n=new WeakMap;return(_interopRequireWildcard=function(e,r){if(!r&&e&&e.__esModule)return e;var a,l,o={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return o;if(a=r?n:t){if(a.has(e))return a.get(e);a.set(e,o)}for(const r in e)"default"!==r&&{}.hasOwnProperty.call(e,r)&&((l=(a=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,r))&&(l.get||l.set)?a(o,r,l):o[r]=e[r]);return o})(e,r)}