@webority-technologies/mobile 0.0.15 → 0.0.20

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

@@ -9,10 +9,9 @@ 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("../AppIcon/index.js");
-var _index3 = require("../Skeleton/index.js");
-var _index4 = require("../../theme/index.js");
-var _index5 = require("../../utils/index.js");
+var _index2 = require("../Skeleton/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); }
 /**
@@ -34,9 +33,11 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
  * />
  */
 
-const MAX_SCALE = 4;
-const MIN_SCALE = 1;
-const DOUBLE_TAP_SCALE = 2;
+// 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,
@@ -55,8 +56,10 @@ const ImageGallery = ({
   containerStyle,
   testID
 }) => {
-  const theme = (0, _index4.useTheme)();
+  const theme = (0, _index3.useTheme)();
   const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
+  const galleryTokens = theme.components.imageGallery;
+  const pressHaptic = galleryTokens?.pressHaptic ?? false;
   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 => {
@@ -65,13 +68,13 @@ const ImageGallery = ({
   }, [onIndexChange]);
   const openLightbox = (0, _react.useCallback)(() => {
     if (!enableLightbox) return;
-    (0, _index5.triggerHaptic)('selection');
+    if (pressHaptic) (0, _index4.triggerHaptic)('selection');
     setLightboxOpen(true);
-  }, [enableLightbox]);
+  }, [enableLightbox, pressHaptic]);
   const closeLightbox = (0, _react.useCallback)(() => {
-    (0, _index5.triggerHaptic)('selection');
+    if (pressHaptic) (0, _index4.triggerHaptic)('selection');
     setLightboxOpen(false);
-  }, []);
+  }, [pressHaptic]);
   const renderImage = (0, _react.useCallback)((image, idx) => {
     const a11y = image.alt ?? `Image ${idx + 1} of ${images.length}`;
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
@@ -124,14 +127,17 @@ const ImageGallery = ({
       enablePinchZoom: enablePinchZoom,
       showCounter: showCounter,
       onClose: closeLightbox,
-      onIndexChange: handleIndexChange
+      onIndexChange: handleIndexChange,
+      pressHaptic: pressHaptic
     }) : null]
   });
   if (loading) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.SkeletonContent, {
-      loading: true,
-      mode: "auto",
-      children: rendered
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(ImageGallerySkeleton, {
+      images: images,
+      showThumbnails: showThumbnails,
+      showCounter: showCounter,
+      containerStyle: containerStyle,
+      testID: testID
     });
   }
   return rendered;
@@ -139,6 +145,69 @@ const ImageGallery = ({
 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)(_index2.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)(_index2.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)(_index2.Skeleton, {
+        width: 64,
+        height: 64,
+        radius: "md",
+        style: {
+          marginRight: 8
+        }
+      }, `sk-thumb-${i}`))
+    }) : null]
+  });
+};
+ImageGallerySkeleton.displayName = 'ImageGallerySkeleton';
+ImageGallery.Skeleton = ImageGallerySkeleton;
+
 // ───────── Lightbox ─────────
 
 const Lightbox = ({
@@ -148,26 +217,35 @@ const Lightbox = ({
   enablePinchZoom,
   showCounter,
   onClose,
-  onIndexChange
+  onIndexChange,
+  pressHaptic
 }) => {
-  const theme = (0, _index4.useTheme)();
+  const theme = (0, _index3.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) {
-      (0, _index5.triggerHaptic)('selection');
+      if (pressHaptic) (0, _index4.triggerHaptic)('selection');
       setActiveIndex(idx);
       onIndexChange(idx);
     }
-  }, [activeIndex, onIndexChange]);
+  }, [activeIndex, onIndexChange, pressHaptic]);
   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]);
+    enabled: enablePinchZoom,
+    maxScale: maxScale,
+    minScale: minScale,
+    doubleTapScale: doubleTapScale,
+    pressHaptic: pressHaptic
+  }), [activeIndex, enablePinchZoom, images.length, maxScale, minScale, doubleTapScale, pressHaptic]);
   const caption = images[activeIndex]?.caption;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Modal, {
     visible: visible,
@@ -203,11 +281,15 @@ const Lightbox = ({
         accessibilityLabel: "Close gallery",
         style: styles.closeButton,
         hitSlop: 12,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.AppIcon, {
-          name: "x",
-          family: "feather",
-          size: "lg",
+        children: theme.icons?.close ? theme.icons.close({
+          size: 24,
           color: theme.colors.text.inverse
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: {
+            fontSize: 24,
+            color: theme.colors.text.inverse
+          },
+          children: "\xD7"
         })
       }), caption ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
         style: styles.captionWrap,
@@ -230,7 +312,11 @@ const ZoomableImage = ({
   index,
   total,
   active,
-  enabled
+  enabled,
+  maxScale,
+  minScale,
+  doubleTapScale,
+  pressHaptic
 }) => {
   const screen = _reactNative.Dimensions.get('window');
   const scale = (0, _reactNativeReanimated.useSharedValue)(1);
@@ -265,7 +351,9 @@ const ZoomableImage = ({
       savedTranslateY.value = 0;
     }
   }, [active, scale, translateX, translateY, savedScale, savedTranslateX, savedTranslateY]);
-  const triggerImpact = (0, _react.useCallback)(() => (0, _index5.triggerHaptic)('impactLight'), []);
+  const triggerImpact = (0, _react.useCallback)(() => {
+    if (pressHaptic) (0, _index4.triggerHaptic)('impactLight');
+  }, [pressHaptic]);
   const pinch = (0, _react.useMemo)(() => _reactNativeGestureHandler.Gesture.Pinch().enabled(enabled).onStart(() => {
     'worklet';
 
@@ -274,33 +362,33 @@ const ZoomableImage = ({
     '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;
+    // 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 < MIN_SCALE) {
-      scale.value = (0, _reactNativeReanimated.withSpring)(MIN_SCALE, SPRING_CONFIG);
+    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 = MIN_SCALE;
+      savedScale.value = minScale;
       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;
+    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]);
+  }), [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(() => {
@@ -332,10 +420,10 @@ const ZoomableImage = ({
       savedTranslateX.value = 0;
       savedTranslateY.value = 0;
     } else {
-      scale.value = (0, _reactNativeReanimated.withSpring)(DOUBLE_TAP_SCALE, SPRING_CONFIG);
-      savedScale.value = DOUBLE_TAP_SCALE;
+      scale.value = (0, _reactNativeReanimated.withSpring)(doubleTapScale, SPRING_CONFIG);
+      savedScale.value = doubleTapScale;
     }
-  }), [scale, savedScale, translateX, translateY, savedTranslateX, savedTranslateY, triggerImpact]);
+  }), [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.