@chem-po/react-native 0.0.22 → 0.0.24

package/src/components/overlay/ImageViewOverlay.tsx

@@ -1,104 +0,0 @@
-import { useScreen } from '@chem-po/react'
-import { Ionicons } from '@expo/vector-icons'
-import React, { useCallback, useMemo, useState } from 'react'
-import { Image, Modal, StyleSheet, TouchableOpacity, View } from 'react-native'
-import { LoadingLogo } from '../loading/Loading'
-
-export const ImageViewOverlay = ({ src, onClose }: { src: string; onClose: () => void }) => {
-  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 })
-
-  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)
-  }, [])
-
-  return (
-    <Modal visible={true} transparent animationType="fade" onRequestClose={onClose}>
-      <View style={styles.modalOverlay}>
-        <View style={styles.contentContainer}>
-          <View
-            style={[
-              styles.imageContainer,
-              {
-                width,
-                height,
-                opacity: loading ? 0 : 1,
-              },
-            ]}>
-            <Image
-              source={{ uri: src }}
-              style={styles.image}
-              onLoadStart={onLoadStart}
-              onLoad={onLoad}
-              resizeMode="contain"
-            />
-          </View>
-
-          <TouchableOpacity style={styles.closeButton} onPress={onClose}>
-            <Ionicons name="close" size={24} color="white" />
-          </TouchableOpacity>
-
-          {loading && (
-            <View style={styles.loadingContainer}>
-              <LoadingLogo isLoading={loading} size={70} />
-            </View>
-          )}
-        </View>
-      </View>
-    </Modal>
-  )
-}
-
-const styles = StyleSheet.create({
-  modalOverlay: {
-    flex: 1,
-    backgroundColor: 'rgba(0, 0, 0, 0.7)',
-  },
-  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/overlay/index.ts

@@ -1 +0,0 @@
-export * from './ImageViewOverlay'