@estuary-solutions/rn-core-ui 0.0.4 → 0.1.0

package/lib/module/Images/ImageView/ImageView.web.js

@@ -0,0 +1,163 @@
+"use strict";
+
+import React from 'react';
+import ImageItem from './components/ImageItem/ImageItem';
+import ImageDefaultHeader from './components/ImageDefaultHeader';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const SWIPE_X_THRESHOLD = 80;
+const SWIPE_Y_CLOSE_THRESHOLD = 140;
+const ImageView = ({
+  images,
+  imageIndex,
+  visible,
+  onRequestClose,
+  onImageIndexChange,
+  onLongPress = () => {},
+  swipeToCloseEnabled = true,
+  doubleTapToZoomEnabled = true,
+  delayLongPress = 800,
+  backgroundColor = '#000',
+  HeaderComponent,
+  FooterComponent
+}) => {
+  const [currentIndex, setCurrentIndex] = React.useState(imageIndex);
+  const [dragX, setDragX] = React.useState(0);
+  const [dragY, setDragY] = React.useState(0);
+  const [dragStart, setDragStart] = React.useState(null);
+  const [isDragging, setIsDragging] = React.useState(false);
+  const dragXRef = React.useRef(0);
+  const dragYRef = React.useRef(0);
+
+  /** ---------------- Drag start ---------------- */
+  const onMouseDown = e => {
+    if (e.button !== 0) {
+      return;
+    }
+    setDragStart({
+      x: e.clientX,
+      y: e.clientY
+    });
+    setIsDragging(true);
+  };
+  React.useEffect(() => {
+    setCurrentIndex(imageIndex);
+  }, [imageIndex]);
+  React.useEffect(() => {
+    if (!isDragging) {
+      return;
+    }
+    const handleMouseMove = e => {
+      //@ts-ignore
+      const dx = e.clientX - dragStart?.x || 0;
+      //@ts-ignore
+      const dy = e.clientY - dragStart?.y || 0;
+      if (Math.abs(dy) > Math.abs(dx) && swipeToCloseEnabled) {
+        setDragY(dy);
+        setDragX(0);
+      } else {
+        setDragX(dx);
+        setDragY(0);
+      }
+    };
+    const handleMouseUp = () => {
+      setIsDragging(false);
+      const currentDragX = dragXRef.current;
+      const currentDragY = dragYRef.current;
+      if (swipeToCloseEnabled && Math.abs(currentDragY) > SWIPE_Y_CLOSE_THRESHOLD) {
+        onRequestClose();
+      } else if (Math.abs(currentDragX) > SWIPE_X_THRESHOLD) {
+        let nextIndex = currentIndex;
+        if (currentDragX < -SWIPE_X_THRESHOLD && currentIndex < images.length - 1) {
+          nextIndex = currentIndex + 1;
+        } else if (currentDragX > SWIPE_X_THRESHOLD && currentIndex > 0) {
+          nextIndex = currentIndex - 1;
+        }
+        if (nextIndex !== currentIndex) {
+          setCurrentIndex(nextIndex);
+          onImageIndexChange?.(nextIndex);
+        }
+      }
+      setDragX(0);
+      setDragY(0);
+      setDragStart(null);
+    };
+    window.addEventListener('mousemove', handleMouseMove);
+    window.addEventListener('mouseup', handleMouseUp);
+    return () => {
+      window.removeEventListener('mousemove', handleMouseMove);
+      window.removeEventListener('mouseup', handleMouseUp);
+    };
+  }, [isDragging, dragStart, currentIndex, images.length]);
+  React.useEffect(() => {
+    dragXRef.current = dragX;
+    dragYRef.current = dragY;
+  }, [dragX, dragY]);
+  if (!visible) {
+    return null;
+  }
+  return /*#__PURE__*/_jsxs("div", {
+    onMouseDown: onMouseDown,
+    style: {
+      position: 'fixed',
+      inset: 0,
+      backgroundColor,
+      overflow: 'hidden',
+      cursor: 'grab',
+      userSelect: 'none',
+      zIndex: 9999,
+      display: 'flex',
+      flexDirection: 'column'
+    },
+    children: [/*#__PURE__*/_jsx("div", {
+      style: {
+        width: '100vw',
+        zIndex: 20
+      },
+      children: typeof HeaderComponent !== 'undefined' ? (/*#__PURE__*/React.createElement(HeaderComponent, {
+        imageIndex: currentIndex
+      })) : /*#__PURE__*/_jsx(ImageDefaultHeader, {
+        onRequestClose: onRequestClose
+      })
+    }), /*#__PURE__*/_jsx("div", {
+      onMouseDown: onMouseDown,
+      style: {
+        flex: 1,
+        display: 'flex',
+        width: '100%',
+        minHeight: 0,
+        transform: `translate3d(calc(${-currentIndex * 100}vw + ${dragX}px), ${dragY}px, 0)`,
+        transition: isDragging ? 'none' : 'transform 0.3s cubic-bezier(0.15, 0, 0.15, 1)',
+        cursor: isDragging ? 'grabbing' : 'grab'
+      },
+      children: images.map((image, index) => /*#__PURE__*/_jsx("div", {
+        style: {
+          width: '100vw',
+          height: '100%',
+          flexShrink: 0,
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center'
+        },
+        children: /*#__PURE__*/_jsx(ImageItem, {
+          imageSrc: image,
+          onRequestClose: onRequestClose,
+          onLongPress: onLongPress,
+          delayLongPress: delayLongPress,
+          swipeToCloseEnabled: swipeToCloseEnabled,
+          doubleTapToZoomEnabled: doubleTapToZoomEnabled
+        })
+      }, index))
+    }), typeof FooterComponent !== 'undefined' && /*#__PURE__*/_jsx("div", {
+      style: {
+        width: '100vw',
+        zIndex: 20,
+        pointerEvents: 'auto'
+      },
+      children: /*#__PURE__*/React.createElement(FooterComponent, {
+        imageIndex: currentIndex
+      })
+    })]
+  });
+};
+export default ImageView;
+//# sourceMappingURL=ImageView.web.js.map

package/lib/module/Images/ImageView/ImageView.web.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","ImageItem","ImageDefaultHeader","jsx","_jsx","jsxs","_jsxs","SWIPE_X_THRESHOLD","SWIPE_Y_CLOSE_THRESHOLD","ImageView","images","imageIndex","visible","onRequestClose","onImageIndexChange","onLongPress","swipeToCloseEnabled","doubleTapToZoomEnabled","delayLongPress","backgroundColor","HeaderComponent","FooterComponent","currentIndex","setCurrentIndex","useState","dragX","setDragX","dragY","setDragY","dragStart","setDragStart","isDragging","setIsDragging","dragXRef","useRef","dragYRef","onMouseDown","e","button","x","clientX","y","clientY","useEffect","handleMouseMove","dx","dy","Math","abs","handleMouseUp","currentDragX","current","currentDragY","nextIndex","length","window","addEventListener","removeEventListener","style","position","inset","overflow","cursor","userSelect","zIndex","display","flexDirection","children","width","createElement","flex","minHeight","transform","transition","map","image","index","height","flexShrink","justifyContent","alignItems","imageSrc","pointerEvents"],"sourceRoot":"../../../../src","sources":["Images/ImageView/ImageView.web.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/Images/ImageView/components/ImageDefaultHeader.js

@@ -0,0 +1,50 @@
+"use strict";
+
+import React from 'react';
+import { SafeAreaView, Text, TouchableOpacity, StyleSheet } from 'react-native';
+import { jsx as _jsx } from "react/jsx-runtime";
+const HIT_SLOP = {
+  top: 16,
+  left: 16,
+  bottom: 16,
+  right: 16
+};
+const ImageDefaultHeader = ({
+  onRequestClose
+}) => /*#__PURE__*/_jsx(SafeAreaView, {
+  style: styles.root,
+  children: /*#__PURE__*/_jsx(TouchableOpacity, {
+    style: styles.closeButton,
+    onPress: onRequestClose,
+    hitSlop: HIT_SLOP,
+    children: /*#__PURE__*/_jsx(Text, {
+      style: styles.closeText,
+      children: "\u2715"
+    })
+  })
+});
+const styles = StyleSheet.create({
+  root: {
+    alignItems: 'flex-end'
+  },
+  closeButton: {
+    marginRight: 8,
+    marginTop: 8,
+    width: 44,
+    height: 44,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 22,
+    backgroundColor: '#00000077'
+  },
+  closeText: {
+    lineHeight: 22,
+    fontSize: 19,
+    textAlign: 'center',
+    color: '#ffffff',
+    // always on the black backdrop
+    includeFontPadding: false
+  }
+});
+export default ImageDefaultHeader;
+//# sourceMappingURL=ImageDefaultHeader.js.map

package/lib/module/Images/ImageView/components/ImageDefaultHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","SafeAreaView","Text","TouchableOpacity","StyleSheet","jsx","_jsx","HIT_SLOP","top","left","bottom","right","ImageDefaultHeader","onRequestClose","style","styles","root","children","closeButton","onPress","hitSlop","closeText","create","alignItems","marginRight","marginTop","width","height","justifyContent","borderRadius","backgroundColor","lineHeight","fontSize","textAlign","color","includeFontPadding"],"sourceRoot":"../../../../../src","sources":["Images/ImageView/components/ImageDefaultHeader.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,YAAY,EAAEC,IAAI,EAAEC,gBAAgB,EAAEC,UAAU,QAAQ,cAAc;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAMhF,MAAMC,QAAQ,GAAG;EAAEC,GAAG,EAAE,EAAE;EAAEC,IAAI,EAAE,EAAE;EAAEC,MAAM,EAAE,EAAE;EAAEC,KAAK,EAAE;AAAG,CAAC;AAE7D,MAAMC,kBAAkB,GAAGA,CAAC;EAAEC;AAAsB,CAAC,kBACnDP,IAAA,CAACL,YAAY;EAACa,KAAK,EAAEC,MAAM,CAACC,IAAK;EAAAC,QAAA,eAC/BX,IAAA,CAACH,gBAAgB;IACfW,KAAK,EAAEC,MAAM,CAACG,WAAY;IAC1BC,OAAO,EAAEN,cAAe;IACxBO,OAAO,EAAEb,QAAS;IAAAU,QAAA,eAClBX,IAAA,CAACJ,IAAI;MAACY,KAAK,EAAEC,MAAM,CAACM,SAAU;MAAAJ,QAAA,EAAC;IAAC,CAAM;EAAC,CACvB;AAAC,CACP,CACf;AAED,MAAMF,MAAM,GAAGX,UAAU,CAACkB,MAAM,CAAC;EAC/BN,IAAI,EAAE;IACJO,UAAU,EAAE;EACd,CAAC;EACDL,WAAW,EAAE;IACXM,WAAW,EAAE,CAAC;IACdC,SAAS,EAAE,CAAC;IACZC,KAAK,EAAE,EAAE;IACTC,MAAM,EAAE,EAAE;IACVJ,UAAU,EAAE,QAAQ;IACpBK,cAAc,EAAE,QAAQ;IACxBC,YAAY,EAAE,EAAE;IAChBC,eAAe,EAAE;EACnB,CAAC;EACDT,SAAS,EAAE;IACTU,UAAU,EAAE,EAAE;IACdC,QAAQ,EAAE,EAAE;IACZC,SAAS,EAAE,QAAQ;IACnBC,KAAK,EAAE,SAAS;IAAE;IAClBC,kBAAkB,EAAE;EACtB;AACF,CAAC,CAAC;AAEF,eAAevB,kBAAkB","ignoreList":[]}

package/lib/module/Images/ImageView/components/ImageItem/ImageItem.android.js

@@ -0,0 +1,105 @@
+"use strict";
+
+import React from 'react';
+import { Animated, ScrollView, StyleSheet } from 'react-native';
+import useImageDimensions from '../../../../hooks/ImageView/useImageDimensions';
+import usePanResponder from '../../../../hooks/ImageView/usePanResponder';
+import { getImageStyles, getImageTransform } from '../../../../utils/ImageView';
+import { ImageLoading } from './ImageLoading';
+import { windowHeight as height, windowWidth as width } from '../../../../utils/ImageView/window';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const SWIPE_CLOSE_OFFSET = 75;
+const SWIPE_CLOSE_VELOCITY = 1.75;
+const ImageItem = ({
+  imageSrc,
+  onZoom,
+  onRequestClose,
+  onLongPress,
+  delayLongPress,
+  swipeToCloseEnabled = true,
+  doubleTapToZoomEnabled = true
+}) => {
+  const imageContainer = React.useRef(null);
+  const imageDimensions = useImageDimensions(imageSrc);
+  const [translate, scale] = getImageTransform(imageDimensions);
+  const scrollValueY = new Animated.Value(0);
+  const [isLoaded, setLoadEnd] = React.useState(false);
+  const onLoaded = React.useCallback(() => setLoadEnd(true), []);
+  const onZoomPerformed = React.useCallback(isZoomed => {
+    onZoom(isZoomed);
+    if (imageContainer?.current) {
+      imageContainer.current.setNativeProps({
+        scrollEnabled: !isZoomed
+      });
+    }
+  }, [imageContainer]);
+  const onLongPressHandler = React.useCallback(() => {
+    onLongPress(imageSrc);
+  }, [imageSrc, onLongPress]);
+  const [panHandlers, scaleValue, translateValue] = usePanResponder({
+    initialScale: scale || 1,
+    initialTranslate: translate || {
+      x: 0,
+      y: 0
+    },
+    onZoom: onZoomPerformed,
+    doubleTapToZoomEnabled,
+    onLongPress: onLongPressHandler,
+    delayLongPress
+  });
+  const imagesStyles = getImageStyles(imageDimensions, translateValue, scaleValue);
+  const imageOpacity = scrollValueY.interpolate({
+    inputRange: [-SWIPE_CLOSE_OFFSET, 0, SWIPE_CLOSE_OFFSET],
+    outputRange: [0.7, 1, 0.7]
+  });
+  const imageStylesWithOpacity = {
+    ...imagesStyles,
+    opacity: imageOpacity
+  };
+  const onScrollEndDrag = ({
+    nativeEvent
+  }) => {
+    const velocityY = nativeEvent?.velocity?.y ?? 0;
+    const offsetY = nativeEvent?.contentOffset?.y ?? 0;
+    if (Math.abs(velocityY) > SWIPE_CLOSE_VELOCITY && offsetY > SWIPE_CLOSE_OFFSET || offsetY > height / 2) {
+      onRequestClose();
+    }
+  };
+  const onScroll = ({
+    nativeEvent
+  }) => {
+    const offsetY = nativeEvent?.contentOffset?.y ?? 0;
+    scrollValueY.setValue(offsetY);
+  };
+  return /*#__PURE__*/_jsxs(ScrollView, {
+    ref: imageContainer,
+    style: styles.listItem,
+    pagingEnabled: true,
+    nestedScrollEnabled: true,
+    showsHorizontalScrollIndicator: false,
+    showsVerticalScrollIndicator: false,
+    contentContainerStyle: styles.imageScrollContainer,
+    scrollEnabled: swipeToCloseEnabled,
+    ...(swipeToCloseEnabled && {
+      onScroll,
+      onScrollEndDrag
+    }),
+    children: [/*#__PURE__*/_jsx(Animated.Image, {
+      ...panHandlers,
+      source: imageSrc,
+      style: imageStylesWithOpacity,
+      onLoad: onLoaded
+    }), (!isLoaded || !imageDimensions) && /*#__PURE__*/_jsx(ImageLoading, {})]
+  });
+};
+const styles = StyleSheet.create({
+  listItem: {
+    width: width,
+    height: height
+  },
+  imageScrollContainer: {
+    height: height * 2
+  }
+});
+export default /*#__PURE__*/React.memo(ImageItem);
+//# sourceMappingURL=ImageItem.android.js.map

package/lib/module/Images/ImageView/components/ImageItem/ImageItem.android.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Animated","ScrollView","StyleSheet","useImageDimensions","usePanResponder","getImageStyles","getImageTransform","ImageLoading","windowHeight","height","windowWidth","width","jsx","_jsx","jsxs","_jsxs","SWIPE_CLOSE_OFFSET","SWIPE_CLOSE_VELOCITY","ImageItem","imageSrc","onZoom","onRequestClose","onLongPress","delayLongPress","swipeToCloseEnabled","doubleTapToZoomEnabled","imageContainer","useRef","imageDimensions","translate","scale","scrollValueY","Value","isLoaded","setLoadEnd","useState","onLoaded","useCallback","onZoomPerformed","isZoomed","current","setNativeProps","scrollEnabled","onLongPressHandler","panHandlers","scaleValue","translateValue","initialScale","initialTranslate","x","y","imagesStyles","imageOpacity","interpolate","inputRange","outputRange","imageStylesWithOpacity","opacity","onScrollEndDrag","nativeEvent","velocityY","velocity","offsetY","contentOffset","Math","abs","onScroll","setValue","ref","style","styles","listItem","pagingEnabled","nestedScrollEnabled","showsHorizontalScrollIndicator","showsVerticalScrollIndicator","contentContainerStyle","imageScrollContainer","children","Image","source","onLoad","create","memo"],"sourceRoot":"../../../../../../src","sources":["Images/ImageView/components/ImageItem/ImageItem.android.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/Images/ImageView/components/ImageItem/ImageItem.ios.js

@@ -0,0 +1,102 @@
+"use strict";
+
+import React from 'react';
+import { Animated, ScrollView, StyleSheet, View, TouchableWithoutFeedback } from 'react-native';
+import useDoubleTapToZoom from '../../../../hooks/ImageView/useDoubleTapToZoom';
+import useImageDimensions from '../../../../hooks/ImageView/useImageDimensions';
+import { getImageStyles, getImageTransform } from '../../../../utils/ImageView';
+import { ImageLoading } from './ImageLoading';
+import { windowHeight as height, windowWidth as width } from '../../../../utils/ImageView/window';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const SWIPE_CLOSE_OFFSET = 75;
+const SWIPE_CLOSE_VELOCITY = 1.55;
+const ImageItem = ({
+  imageSrc,
+  onZoom,
+  onRequestClose,
+  onLongPress,
+  delayLongPress,
+  swipeToCloseEnabled = true,
+  doubleTapToZoomEnabled = true
+}) => {
+  const scrollViewRef = React.useRef(null);
+  const [loaded, setLoaded] = React.useState(false);
+  const [scaled, setScaled] = React.useState(false);
+  const imageDimensions = useImageDimensions(imageSrc);
+  const handleDoubleTap = useDoubleTapToZoom(scrollViewRef, scaled);
+  const [translate, scale] = getImageTransform(imageDimensions);
+  const scrollValueY = new Animated.Value(0);
+  const scaleValue = new Animated.Value(scale || 1);
+  const translateValue = new Animated.ValueXY(translate);
+  const maxScale = scale && scale > 0 ? Math.max(1 / scale, 1) : 1;
+  const imageOpacity = scrollValueY.interpolate({
+    inputRange: [-SWIPE_CLOSE_OFFSET, 0, SWIPE_CLOSE_OFFSET],
+    outputRange: [0.5, 1, 0.5]
+  });
+  const imagesStyles = getImageStyles(imageDimensions, translateValue, scaleValue);
+  const imageStylesWithOpacity = {
+    ...imagesStyles,
+    opacity: imageOpacity
+  };
+  const onScrollEndDrag = React.useCallback(({
+    nativeEvent
+  }) => {
+    const velocityY = nativeEvent?.velocity?.y ?? 0;
+    const scaled = nativeEvent?.zoomScale > 1;
+    onZoom(scaled);
+    setScaled(scaled);
+    if (!scaled && swipeToCloseEnabled && Math.abs(velocityY) > SWIPE_CLOSE_VELOCITY) {
+      onRequestClose();
+    }
+  }, [scaled]);
+  const onScroll = ({
+    nativeEvent
+  }) => {
+    const offsetY = nativeEvent?.contentOffset?.y ?? 0;
+    if (nativeEvent?.zoomScale > 1) {
+      return;
+    }
+    scrollValueY.setValue(offsetY);
+  };
+  const onLongPressHandler = React.useCallback(() => {
+    onLongPress(imageSrc);
+  }, [imageSrc, onLongPress]);
+  return /*#__PURE__*/_jsx(View, {
+    children: /*#__PURE__*/_jsxs(ScrollView, {
+      ref: scrollViewRef,
+      style: styles.listItem,
+      pinchGestureEnabled: true,
+      showsHorizontalScrollIndicator: false,
+      showsVerticalScrollIndicator: false,
+      maximumZoomScale: maxScale,
+      contentContainerStyle: styles.imageScrollContainer,
+      scrollEnabled: swipeToCloseEnabled,
+      onScrollEndDrag: onScrollEndDrag,
+      scrollEventThrottle: 1,
+      ...(swipeToCloseEnabled && {
+        onScroll
+      }),
+      children: [(!loaded || !imageDimensions) && /*#__PURE__*/_jsx(ImageLoading, {}), /*#__PURE__*/_jsx(TouchableWithoutFeedback, {
+        onPress: doubleTapToZoomEnabled ? handleDoubleTap : undefined,
+        onLongPress: onLongPressHandler,
+        delayLongPress: delayLongPress,
+        children: /*#__PURE__*/_jsx(Animated.Image, {
+          source: imageSrc,
+          style: imageStylesWithOpacity,
+          onLoad: () => setLoaded(true)
+        })
+      })]
+    })
+  });
+};
+const styles = StyleSheet.create({
+  listItem: {
+    width: width,
+    height: height
+  },
+  imageScrollContainer: {
+    height: height
+  }
+});
+export default /*#__PURE__*/React.memo(ImageItem);
+//# sourceMappingURL=ImageItem.ios.js.map

package/lib/module/Images/ImageView/components/ImageItem/ImageItem.ios.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Animated","ScrollView","StyleSheet","View","TouchableWithoutFeedback","useDoubleTapToZoom","useImageDimensions","getImageStyles","getImageTransform","ImageLoading","windowHeight","height","windowWidth","width","jsx","_jsx","jsxs","_jsxs","SWIPE_CLOSE_OFFSET","SWIPE_CLOSE_VELOCITY","ImageItem","imageSrc","onZoom","onRequestClose","onLongPress","delayLongPress","swipeToCloseEnabled","doubleTapToZoomEnabled","scrollViewRef","useRef","loaded","setLoaded","useState","scaled","setScaled","imageDimensions","handleDoubleTap","translate","scale","scrollValueY","Value","scaleValue","translateValue","ValueXY","maxScale","Math","max","imageOpacity","interpolate","inputRange","outputRange","imagesStyles","imageStylesWithOpacity","opacity","onScrollEndDrag","useCallback","nativeEvent","velocityY","velocity","y","zoomScale","abs","onScroll","offsetY","contentOffset","setValue","onLongPressHandler","children","ref","style","styles","listItem","pinchGestureEnabled","showsHorizontalScrollIndicator","showsVerticalScrollIndicator","maximumZoomScale","contentContainerStyle","imageScrollContainer","scrollEnabled","scrollEventThrottle","onPress","undefined","Image","source","onLoad","create","memo"],"sourceRoot":"../../../../../../src","sources":["Images/ImageView/components/ImageItem/ImageItem.ios.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/Images/ImageView/components/ImageItem/ImageItem.js

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

package/lib/module/Images/ImageView/components/ImageItem/ImageItem.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["default"],"sourceRoot":"../../../../../../src","sources":["Images/ImageView/components/ImageItem/ImageItem.tsx"],"mappings":";;AAAA,SAASA,OAAO,QAAQ,iBAAiB","ignoreList":[]}

package/lib/module/Images/ImageView/components/ImageItem/ImageItem.web.js

@@ -0,0 +1,108 @@
+"use strict";
+
+import React from 'react';
+import useImageDimensions from '../../../../hooks/ImageView/useImageDimensions';
+import { ImageLoading } from './ImageLoading';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const ZOOM_SCALE = 2;
+const ImageItem = ({
+  imageSrc,
+  onZoom,
+  onLongPress,
+  delayLongPress,
+  doubleTapToZoomEnabled = true
+}) => {
+  const imageDimensions = useImageDimensions(imageSrc);
+  const [loaded, setLoaded] = React.useState(false);
+  const [zoomed, setZoomed] = React.useState(false);
+  //@ts-ignore
+  const longPressTimeout = React.useRef(null);
+  const [offsets, setOffsets] = React.useState({
+    x: 0,
+    y: 0
+  });
+  const handleMouseDown = () => {
+    longPressTimeout.current = setTimeout(() => {
+      onLongPress(imageSrc);
+    }, delayLongPress);
+  };
+  const handleMouseUp = () => {
+    if (longPressTimeout.current) {
+      clearTimeout(longPressTimeout.current);
+    }
+  };
+  const onDoubleClick = e => {
+    if (!doubleTapToZoomEnabled) {
+      return;
+    }
+    if (!zoomed) {
+      const {
+        clientWidth,
+        clientHeight
+      } = e.currentTarget;
+      const clickX = e.clientX;
+      const clickY = e.clientY;
+      const targetX = (clientWidth / 2 - clickX) * (ZOOM_SCALE - 1);
+      const targetY = (clientHeight / 2 - clickY) * (ZOOM_SCALE - 1);
+      setOffsets({
+        x: targetX,
+        y: targetY
+      });
+      setZoomed(true);
+      onZoom && onZoom(true);
+    } else {
+      setOffsets({
+        x: 0,
+        y: 0
+      });
+      setZoomed(false);
+      onZoom && onZoom(false);
+    }
+  };
+  if (!imageDimensions) {
+    return /*#__PURE__*/_jsx(ImageLoading, {});
+  }
+  return /*#__PURE__*/_jsxs("div", {
+    style: {
+      width: '100%',
+      height: '100%',
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      boxSizing: 'border-box',
+      zIndex: 10,
+      overflow: 'hidden'
+    },
+    children: [/*#__PURE__*/_jsx("div", {
+      onDoubleClick: onDoubleClick,
+      onMouseDown: handleMouseDown,
+      onMouseUp: handleMouseUp,
+      style: {
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        width: '100%',
+        height: '100%',
+        pointerEvents: 'auto',
+        cursor: zoomed ? 'zoom-out' : 'zoom-in'
+      },
+      children: /*#__PURE__*/_jsx("img", {
+        src: typeof imageSrc === 'number' ? '' : imageSrc.uri,
+        draggable: false,
+        style: {
+          maxWidth: '100%',
+          maxHeight: '100%',
+          width: 'auto',
+          height: 'auto',
+          objectFit: 'contain',
+          userSelect: 'none',
+          transition: 'transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)',
+          transform: zoomed ? `translate(${offsets.x}px, ${offsets.y}px) scale(${ZOOM_SCALE})` : 'none'
+        },
+        onLoad: () => setLoaded(true)
+      })
+    }), !loaded && /*#__PURE__*/_jsx(ImageLoading, {})]
+  });
+};
+export default /*#__PURE__*/React.memo(ImageItem);
+//# sourceMappingURL=ImageItem.web.js.map

package/lib/module/Images/ImageView/components/ImageItem/ImageItem.web.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useImageDimensions","ImageLoading","jsx","_jsx","jsxs","_jsxs","ZOOM_SCALE","ImageItem","imageSrc","onZoom","onLongPress","delayLongPress","doubleTapToZoomEnabled","imageDimensions","loaded","setLoaded","useState","zoomed","setZoomed","longPressTimeout","useRef","offsets","setOffsets","x","y","handleMouseDown","current","setTimeout","handleMouseUp","clearTimeout","onDoubleClick","e","clientWidth","clientHeight","currentTarget","clickX","clientX","clickY","clientY","targetX","targetY","style","width","height","display","justifyContent","alignItems","boxSizing","zIndex","overflow","children","onMouseDown","onMouseUp","pointerEvents","cursor","src","uri","draggable","maxWidth","maxHeight","objectFit","userSelect","transition","transform","onLoad","memo"],"sourceRoot":"../../../../../../src","sources":["Images/ImageView/components/ImageItem/ImageItem.web.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/Images/ImageView/components/ImageItem/ImageLoading.js

@@ -0,0 +1,29 @@
+"use strict";
+
+import React from 'react';
+import { ActivityIndicator, StyleSheet, View } from 'react-native';
+import { windowHeight as height, windowWidth as width } from '../../../../utils/ImageView/window';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const ImageLoading = () => /*#__PURE__*/_jsx(View, {
+  style: styles.loading,
+  children: /*#__PURE__*/_jsx(ActivityIndicator, {
+    size: "small",
+    color: "#ffffff"
+  })
+});
+const styles = StyleSheet.create({
+  listItem: {
+    width: width,
+    height: height
+  },
+  loading: {
+    width: width,
+    height: height,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  imageScrollContainer: {
+    height: height
+  }
+});
+//# sourceMappingURL=ImageLoading.js.map

package/lib/module/Images/ImageView/components/ImageItem/ImageLoading.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","ActivityIndicator","StyleSheet","View","windowHeight","height","windowWidth","width","jsx","_jsx","ImageLoading","style","styles","loading","children","size","color","create","listItem","alignItems","justifyContent","imageScrollContainer"],"sourceRoot":"../../../../../../src","sources":["Images/ImageView/components/ImageItem/ImageLoading.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,iBAAiB,EAAEC,UAAU,EAAEC,IAAI,QAAQ,cAAc;AAElE,SACEC,YAAY,IAAIC,MAAM,EACtBC,WAAW,IAAIC,KAAK,QACf,oCAAoC;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAE5C,OAAO,MAAMC,YAAY,GAAGA,CAAA,kBAC1BD,IAAA,CAACN,IAAI;EAACQ,KAAK,EAAEC,MAAM,CAACC,OAAQ;EAAAC,QAAA,eAC1BL,IAAA,CAACR,iBAAiB;IAACc,IAAI,EAAC,OAAO;IAACC,KAAK,EAAC;EAAS,CAAE;AAAC,CAC9C,CACP;AAED,MAAMJ,MAAM,GAAGV,UAAU,CAACe,MAAM,CAAC;EAC/BC,QAAQ,EAAE;IACRX,KAAK,EAAEA,KAAK;IACZF,MAAM,EAAEA;EACV,CAAC;EACDQ,OAAO,EAAE;IACPN,KAAK,EAAEA,KAAK;IACZF,MAAM,EAAEA,MAAM;IACdc,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE;EAClB,CAAC;EACDC,oBAAoB,EAAE;IACpBhB,MAAM,EAAEA;EACV;AACF,CAAC,CAAC","ignoreList":[]}

package/lib/module/Images/ImageView/components/StatusBarManager.js

@@ -0,0 +1,21 @@
+"use strict";
+
+import { IOS } from '../../../utils/getOS';
+import React from 'react';
+import { StatusBar } from 'react-native';
+const StatusBarManager = ({
+  presentationStyle
+}) => {
+  // RN cannot read the current status bar state; assume it is visible when the modal is overFullScreen.
+  const shouldHide = !IOS && presentationStyle === 'overFullScreen';
+  React.useEffect(() => {
+    if (!shouldHide) {
+      return undefined;
+    }
+    StatusBar.setHidden(true);
+    return () => StatusBar.setHidden(false);
+  }, [shouldHide]);
+  return null;
+};
+export default StatusBarManager;
+//# sourceMappingURL=StatusBarManager.js.map

package/lib/module/Images/ImageView/components/StatusBarManager.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["IOS","React","StatusBar","StatusBarManager","presentationStyle","shouldHide","useEffect","undefined","setHidden"],"sourceRoot":"../../../../../src","sources":["Images/ImageView/components/StatusBarManager.tsx"],"mappings":";;AAAA,SAASA,GAAG,QAAQ,sBAAsB;AAC1C,OAAOC,KAAK,MAAM,OAAO;AACzB,SAAqBC,SAAS,QAAQ,cAAc;AAEpD,MAAMC,gBAAgB,GAAGA,CAAC;EACxBC;AAGF,CAAC,KAAK;EACJ;EACA,MAAMC,UAAU,GAAG,CAACL,GAAG,IAAII,iBAAiB,KAAK,gBAAgB;EAEjEH,KAAK,CAACK,SAAS,CAAC,MAAM;IACpB,IAAI,CAACD,UAAU,EAAE;MACf,OAAOE,SAAS;IAClB;IACAL,SAAS,CAACM,SAAS,CAAC,IAAI,CAAC;IACzB,OAAO,MAAMN,SAAS,CAACM,SAAS,CAAC,KAAK,CAAC;EACzC,CAAC,EAAE,CAACH,UAAU,CAAC,CAAC;EAEhB,OAAO,IAAI;AACb,CAAC;AAED,eAAeF,gBAAgB","ignoreList":[]}

package/lib/module/Images/ImageView/index.js

@@ -0,0 +1,6 @@
+"use strict";
+
+// Entry point for "@estuary-solutions/rn-core-ui/image-view" (ADR-0004).
+export { default } from './ImageView';
+export { default as ImageView } from './ImageView';
+//# sourceMappingURL=index.js.map