@chem-po/react-native 0.0.23 → 0.0.25

package/src/components/image/ImageViewModal.backup.tsx

@@ -0,0 +1,261 @@
+import { useScreen } from '@chem-po/react'
+import { Ionicons } from '@expo/vector-icons'
+import React, { useCallback, useMemo, useRef, useState } from 'react'
+import { Animated, Image, Modal, StyleSheet, TouchableOpacity, View } from 'react-native'
+import { Gesture, GestureDetector, GestureHandlerRootView } from 'react-native-gesture-handler'
+import { LoadingLogo } from '../loading/Loading'
+
+interface ImageViewModalProps {
+  isOpen: boolean
+  onClose: () => void
+  src: string | null
+}
+
+export const ImageViewModal: React.FC<ImageViewModalProps> = ({ isOpen, onClose, src }) => {
+  const [loading, setLoading] = useState(true)
+  const screenWidth = useScreen(s => s.width)
+  const screenHeight = useScreen(s => s.height)
+  const [imageSize, setImageSize] = useState({ width: screenWidth / 2, height: screenHeight / 2 })
+
+  // Animated values for zoom and pan
+  const scale = useRef(new Animated.Value(1)).current
+  const translateX = useRef(new Animated.Value(0)).current
+  const translateY = useRef(new Animated.Value(0)).current
+
+  // Gesture state
+  const savedScale = useRef(1)
+  const savedTranslateX = useRef(0)
+  const savedTranslateY = useRef(0)
+  const currentScale = useRef(1)
+  const currentTranslateX = useRef(0)
+  const currentTranslateY = useRef(0)
+
+  const { height, width } = useMemo(() => {
+    if (loading) return imageSize
+    const ratio = imageSize.width / imageSize.height
+    let h = Math.min(imageSize.height, screenHeight * 0.9)
+    let w = h * ratio
+    if (w > screenWidth * 0.9) {
+      w = Math.min(imageSize.width, screenWidth * 0.9)
+      h = w / ratio
+    }
+    return { height: h, width: w }
+  }, [screenHeight, screenWidth, imageSize, loading])
+
+  const onLoadStart = useCallback(() => setLoading(true), [])
+  const onLoad = useCallback((e: any) => {
+    const { width: naturalWidth, height: naturalHeight } = e.nativeEvent.source
+    setImageSize({ width: naturalWidth, height: naturalHeight })
+    setLoading(false)
+  }, [])
+
+  // Reset zoom and pan when modal opens/closes
+  const resetTransform = useCallback(() => {
+    scale.setValue(1)
+    translateX.setValue(0)
+    translateY.setValue(0)
+    savedScale.current = 1
+    savedTranslateX.current = 0
+    savedTranslateY.current = 0
+    currentScale.current = 1
+    currentTranslateX.current = 0
+    currentTranslateY.current = 0
+  }, [scale, translateX, translateY])
+
+  // Reset when modal closes or src changes
+  React.useEffect(() => {
+    if (!isOpen || !src) {
+      resetTransform()
+    }
+  }, [isOpen, src, resetTransform])
+
+  // Pan gesture
+  const panGesture = Gesture.Pan()
+    .onUpdate(event => {
+      // Only allow panning if zoomed in
+      if (savedScale.current > 1) {
+        const newTranslateX = savedTranslateX.current + event.translationX
+        const newTranslateY = savedTranslateY.current + event.translationY
+
+        // Calculate bounds to prevent panning too far
+        const maxTranslateX = (width * savedScale.current - width) / 2
+        const maxTranslateY = (height * savedScale.current - height) / 2
+
+        const boundedTranslateX = Math.max(-maxTranslateX, Math.min(maxTranslateX, newTranslateX))
+        const boundedTranslateY = Math.max(-maxTranslateY, Math.min(maxTranslateY, newTranslateY))
+
+        translateX.setValue(boundedTranslateX)
+        translateY.setValue(boundedTranslateY)
+        currentTranslateX.current = boundedTranslateX
+        currentTranslateY.current = boundedTranslateY
+      }
+    })
+    .onEnd(() => {
+      savedTranslateX.current = currentTranslateX.current
+      savedTranslateY.current = currentTranslateY.current
+    })
+
+  // Pinch gesture
+  const pinchGesture = Gesture.Pinch()
+    .onUpdate(event => {
+      const newScale = savedScale.current * event.scale
+      // Limit zoom between 1x and 5x
+      const boundedScale = Math.max(1, Math.min(5, newScale))
+      scale.setValue(boundedScale)
+      currentScale.current = boundedScale
+
+      // If zooming out to 1x, reset position
+      if (boundedScale <= 1) {
+        translateX.setValue(0)
+        translateY.setValue(0)
+        currentTranslateX.current = 0
+        currentTranslateY.current = 0
+      }
+    })
+    .onEnd(() => {
+      savedScale.current = currentScale.current
+      // If scale is close to 1, snap back to 1
+      if (savedScale.current < 1.1) {
+        Animated.parallel([
+          Animated.spring(scale, { toValue: 1, useNativeDriver: true }),
+          Animated.spring(translateX, { toValue: 0, useNativeDriver: true }),
+          Animated.spring(translateY, { toValue: 0, useNativeDriver: true }),
+        ]).start()
+        savedScale.current = 1
+        savedTranslateX.current = 0
+        savedTranslateY.current = 0
+        currentScale.current = 1
+        currentTranslateX.current = 0
+        currentTranslateY.current = 0
+      } else {
+        savedTranslateX.current = currentTranslateX.current
+        savedTranslateY.current = currentTranslateY.current
+      }
+    })
+
+  // Double tap to zoom
+  const doubleTapGesture = Gesture.Tap()
+    .numberOfTaps(2)
+    .onEnd(() => {
+      if (savedScale.current > 1) {
+        // Zoom out
+        Animated.parallel([
+          Animated.spring(scale, { toValue: 1, useNativeDriver: true }),
+          Animated.spring(translateX, { toValue: 0, useNativeDriver: true }),
+          Animated.spring(translateY, { toValue: 0, useNativeDriver: true }),
+        ]).start()
+        savedScale.current = 1
+        savedTranslateX.current = 0
+        savedTranslateY.current = 0
+        currentScale.current = 1
+        currentTranslateX.current = 0
+        currentTranslateY.current = 0
+      } else {
+        // Zoom in to 2x
+        Animated.spring(scale, { toValue: 2, useNativeDriver: true }).start()
+        savedScale.current = 2
+        currentScale.current = 2
+      }
+    })
+
+  // Test simple single tap gesture
+
+  // Combine gestures - simplified approach
+  const combinedGestures = Gesture.Race(
+    doubleTapGesture,
+    Gesture.Simultaneous(panGesture, pinchGesture),
+  )
+
+  if (!isOpen) {
+    return null
+  }
+
+  return (
+    <Modal visible={isOpen} transparent animationType="fade" onRequestClose={onClose}>
+      <GestureHandlerRootView style={styles.gestureRoot}>
+        <View style={styles.modalOverlay}>
+          <TouchableOpacity
+            style={styles.backgroundTouchable}
+            activeOpacity={1}
+            onPress={onClose}
+          />
+          <View style={styles.contentContainer}>
+            <GestureDetector gesture={combinedGestures}>
+              <Animated.View
+                style={[
+                  styles.imageContainer,
+                  {
+                    width,
+                    height,
+                    opacity: loading ? 0 : 1,
+                    transform: [{ scale }, { translateX }, { translateY }],
+                  },
+                ]}>
+                <Image
+                  source={src ? { uri: src } : undefined}
+                  style={styles.image}
+                  onLoadStart={onLoadStart}
+                  onLoad={onLoad}
+                  resizeMode="contain"
+                />
+              </Animated.View>
+            </GestureDetector>
+
+            <TouchableOpacity style={styles.closeButton} onPress={onClose}>
+              <Ionicons name="close" size={24} color="white" />
+            </TouchableOpacity>
+
+            {loading || !src ? (
+              <View style={styles.loadingContainer}>
+                <LoadingLogo isLoading={loading} size={70} />
+              </View>
+            ) : null}
+          </View>
+        </View>
+      </GestureHandlerRootView>
+    </Modal>
+  )
+}
+
+const styles = StyleSheet.create({
+  gestureRoot: {
+    flex: 1,
+  },
+  modalOverlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0, 0, 0, 0.7)',
+  },
+  backgroundTouchable: {
+    ...StyleSheet.absoluteFillObject,
+  },
+  contentContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 16,
+  },
+  imageContainer: {
+    overflow: 'hidden',
+    borderRadius: 4,
+  },
+  image: {
+    width: '100%',
+    height: '100%',
+  },
+  closeButton: {
+    position: 'absolute',
+    top: 16,
+    right: 16,
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  loadingContainer: {
+    ...StyleSheet.absoluteFillObject,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+})

package/src/components/image/ImageViewModal.old.tsx

@@ -0,0 +1,261 @@
+import { useScreen } from '@chem-po/react'
+import { Ionicons } from '@expo/vector-icons'
+import React, { useCallback, useMemo, useRef, useState } from 'react'
+import { Animated, Image, Modal, StyleSheet, TouchableOpacity, View } from 'react-native'
+import { Gesture, GestureDetector, GestureHandlerRootView } from 'react-native-gesture-handler'
+import { LoadingLogo } from '../loading/Loading'
+
+interface ImageViewModalProps {
+  isOpen: boolean
+  onClose: () => void
+  src: string | null
+}
+
+export const ImageViewModal: React.FC<ImageViewModalProps> = ({ isOpen, onClose, src }) => {
+  const [loading, setLoading] = useState(true)
+  const screenWidth = useScreen(s => s.width)
+  const screenHeight = useScreen(s => s.height)
+  const [imageSize, setImageSize] = useState({ width: screenWidth / 2, height: screenHeight / 2 })
+
+  // Animated values for zoom and pan
+  const scale = useRef(new Animated.Value(1)).current
+  const translateX = useRef(new Animated.Value(0)).current
+  const translateY = useRef(new Animated.Value(0)).current
+
+  // Gesture state
+  const savedScale = useRef(1)
+  const savedTranslateX = useRef(0)
+  const savedTranslateY = useRef(0)
+  const currentScale = useRef(1)
+  const currentTranslateX = useRef(0)
+  const currentTranslateY = useRef(0)
+
+  const { height, width } = useMemo(() => {
+    if (loading) return imageSize
+    const ratio = imageSize.width / imageSize.height
+    let h = Math.min(imageSize.height, screenHeight * 0.9)
+    let w = h * ratio
+    if (w > screenWidth * 0.9) {
+      w = Math.min(imageSize.width, screenWidth * 0.9)
+      h = w / ratio
+    }
+    return { height: h, width: w }
+  }, [screenHeight, screenWidth, imageSize, loading])
+
+  const onLoadStart = useCallback(() => setLoading(true), [])
+  const onLoad = useCallback((e: any) => {
+    const { width: naturalWidth, height: naturalHeight } = e.nativeEvent.source
+    setImageSize({ width: naturalWidth, height: naturalHeight })
+    setLoading(false)
+  }, [])
+
+  // Reset zoom and pan when modal opens/closes
+  const resetTransform = useCallback(() => {
+    scale.setValue(1)
+    translateX.setValue(0)
+    translateY.setValue(0)
+    savedScale.current = 1
+    savedTranslateX.current = 0
+    savedTranslateY.current = 0
+    currentScale.current = 1
+    currentTranslateX.current = 0
+    currentTranslateY.current = 0
+  }, [scale, translateX, translateY])
+
+  // Reset when modal closes or src changes
+  React.useEffect(() => {
+    if (!isOpen || !src) {
+      resetTransform()
+    }
+  }, [isOpen, src, resetTransform])
+
+  // Pan gesture
+  const panGesture = Gesture.Pan()
+    .onUpdate(event => {
+      // Only allow panning if zoomed in
+      if (savedScale.current > 1) {
+        const newTranslateX = savedTranslateX.current + event.translationX
+        const newTranslateY = savedTranslateY.current + event.translationY
+
+        // Calculate bounds to prevent panning too far
+        const maxTranslateX = (width * savedScale.current - width) / 2
+        const maxTranslateY = (height * savedScale.current - height) / 2
+
+        const boundedTranslateX = Math.max(-maxTranslateX, Math.min(maxTranslateX, newTranslateX))
+        const boundedTranslateY = Math.max(-maxTranslateY, Math.min(maxTranslateY, newTranslateY))
+
+        translateX.setValue(boundedTranslateX)
+        translateY.setValue(boundedTranslateY)
+        currentTranslateX.current = boundedTranslateX
+        currentTranslateY.current = boundedTranslateY
+      }
+    })
+    .onEnd(() => {
+      savedTranslateX.current = currentTranslateX.current
+      savedTranslateY.current = currentTranslateY.current
+    })
+
+  // Pinch gesture
+  const pinchGesture = Gesture.Pinch()
+    .onUpdate(event => {
+      const newScale = savedScale.current * event.scale
+      // Limit zoom between 1x and 5x
+      const boundedScale = Math.max(1, Math.min(5, newScale))
+      scale.setValue(boundedScale)
+      currentScale.current = boundedScale
+
+      // If zooming out to 1x, reset position
+      if (boundedScale <= 1) {
+        translateX.setValue(0)
+        translateY.setValue(0)
+        currentTranslateX.current = 0
+        currentTranslateY.current = 0
+      }
+    })
+    .onEnd(() => {
+      savedScale.current = currentScale.current
+      // If scale is close to 1, snap back to 1
+      if (savedScale.current < 1.1) {
+        Animated.parallel([
+          Animated.spring(scale, { toValue: 1, useNativeDriver: true }),
+          Animated.spring(translateX, { toValue: 0, useNativeDriver: true }),
+          Animated.spring(translateY, { toValue: 0, useNativeDriver: true }),
+        ]).start()
+        savedScale.current = 1
+        savedTranslateX.current = 0
+        savedTranslateY.current = 0
+        currentScale.current = 1
+        currentTranslateX.current = 0
+        currentTranslateY.current = 0
+      } else {
+        savedTranslateX.current = currentTranslateX.current
+        savedTranslateY.current = currentTranslateY.current
+      }
+    })
+
+  // Double tap to zoom
+  const doubleTapGesture = Gesture.Tap()
+    .numberOfTaps(2)
+    .onEnd(() => {
+      if (savedScale.current > 1) {
+        // Zoom out
+        Animated.parallel([
+          Animated.spring(scale, { toValue: 1, useNativeDriver: true }),
+          Animated.spring(translateX, { toValue: 0, useNativeDriver: true }),
+          Animated.spring(translateY, { toValue: 0, useNativeDriver: true }),
+        ]).start()
+        savedScale.current = 1
+        savedTranslateX.current = 0
+        savedTranslateY.current = 0
+        currentScale.current = 1
+        currentTranslateX.current = 0
+        currentTranslateY.current = 0
+      } else {
+        // Zoom in to 2x
+        Animated.spring(scale, { toValue: 2, useNativeDriver: true }).start()
+        savedScale.current = 2
+        currentScale.current = 2
+      }
+    })
+
+  // Test simple single tap gesture
+
+  // Combine gestures - simplified approach
+  const combinedGestures = Gesture.Race(
+    doubleTapGesture,
+    Gesture.Simultaneous(panGesture, pinchGesture),
+  )
+
+  if (!isOpen) {
+    return null
+  }
+
+  return (
+    <Modal visible={isOpen} transparent animationType="fade" onRequestClose={onClose}>
+      <GestureHandlerRootView style={styles.gestureRoot}>
+        <View style={styles.modalOverlay}>
+          <TouchableOpacity
+            style={styles.backgroundTouchable}
+            activeOpacity={1}
+            onPress={onClose}
+          />
+          <View style={styles.contentContainer}>
+            <GestureDetector gesture={combinedGestures}>
+              <Animated.View
+                style={[
+                  styles.imageContainer,
+                  {
+                    width,
+                    height,
+                    opacity: loading ? 0 : 1,
+                    transform: [{ scale }, { translateX }, { translateY }],
+                  },
+                ]}>
+                <Image
+                  source={src ? { uri: src } : undefined}
+                  style={styles.image}
+                  onLoadStart={onLoadStart}
+                  onLoad={onLoad}
+                  resizeMode="contain"
+                />
+              </Animated.View>
+            </GestureDetector>
+
+            <TouchableOpacity style={styles.closeButton} onPress={onClose}>
+              <Ionicons name="close" size={24} color="white" />
+            </TouchableOpacity>
+
+            {loading || !src ? (
+              <View style={styles.loadingContainer}>
+                <LoadingLogo isLoading={loading} size={70} />
+              </View>
+            ) : null}
+          </View>
+        </View>
+      </GestureHandlerRootView>
+    </Modal>
+  )
+}
+
+const styles = StyleSheet.create({
+  gestureRoot: {
+    flex: 1,
+  },
+  modalOverlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0, 0, 0, 0.7)',
+  },
+  backgroundTouchable: {
+    ...StyleSheet.absoluteFillObject,
+  },
+  contentContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 16,
+  },
+  imageContainer: {
+    overflow: 'hidden',
+    borderRadius: 4,
+  },
+  image: {
+    width: '100%',
+    height: '100%',
+  },
+  closeButton: {
+    position: 'absolute',
+    top: 16,
+    right: 16,
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  loadingContainer: {
+    ...StyleSheet.absoluteFillObject,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+})