@chem-po/react-native 0.0.26 → 0.0.27

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

@@ -1,261 +0,0 @@
-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

@@ -1,261 +0,0 @@
-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',
-  },
-})