@chem-po/react-native 0.0.29 → 0.0.31

package/src/components/image/ImageViewModal.tsx

@@ -1,8 +1,13 @@
 import { useScreen, useToast } from '@chem-po/react'
 import { Ionicons } from '@expo/vector-icons'
 import React, { useCallback, useEffect, useMemo, useState } from 'react'
-import { Image, Modal, StyleSheet, TouchableOpacity, View } from 'react-native'
-import { Gesture, GestureDetector, GestureHandlerRootView } from 'react-native-gesture-handler'
+import { Image, Modal, SafeAreaView, StyleSheet, View } from 'react-native'
+import {
+  Gesture,
+  GestureDetector,
+  GestureHandlerRootView,
+  Pressable,
+} from 'react-native-gesture-handler'
 import Animated, { useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated'
 import { downloadFile } from '../../utils/downloadFile'
 import { LoadingLogo } from '../loading/Loading'
@@ -53,11 +58,13 @@ export const ImageViewModal: React.FC<ImageViewModalProps> = ({
   }, [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)
-  }, [])
+  const onLoad = useCallback(() => {
+    if (!src) return
+    Image.getSize(src, (width, height) => {
+      setImageSize({ width, height })
+      setLoading(false)
+    })
+  }, [src])
 
   // Reset zoom and pan when modal opens/closes
   const resetTransform = useCallback(() => {
@@ -203,53 +210,51 @@ export const ImageViewModal: React.FC<ImageViewModalProps> = ({
 
   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,
-                  },
-                  animatedStyle,
-                ]}>
-                <Image
-                  source={src ? { uri: src } : undefined}
-                  style={styles.image}
-                  onLoadStart={onLoadStart}
-                  onLoad={onLoad}
-                  resizeMode="contain"
-                />
-              </Animated.View>
-            </GestureDetector>
+      <SafeAreaView style={{ flex: 1 }}>
+        <GestureHandlerRootView style={styles.gestureRoot}>
+          <View style={styles.modalOverlay}>
+            <Pressable style={styles.backgroundTouchable} onPress={onClose} />
+            <View style={styles.contentContainer}>
+              <GestureDetector gesture={combinedGestures}>
+                <Animated.View
+                  style={[
+                    styles.imageContainer,
+                    {
+                      width,
+                      height,
+                      opacity: loading ? 0 : 1,
+                    },
+                    animatedStyle,
+                  ]}>
+                  <Image
+                    source={src ? { uri: src } : undefined}
+                    style={styles.image}
+                    onLoadStart={onLoadStart}
+                    onLoad={onLoad}
+                    resizeMode="contain"
+                  />
+                </Animated.View>
+              </GestureDetector>
 
-            {withDownload && (
-              <TouchableOpacity style={styles.downloadButton} onPress={() => void handleDownload()}>
-                <Ionicons name="download" size={24} color="white" />
-              </TouchableOpacity>
-            )}
+              {withDownload && (
+                <Pressable style={styles.downloadButton} onPress={() => void handleDownload()}>
+                  <Ionicons name="download" size={24} color="white" />
+                </Pressable>
+              )}
 
-            <TouchableOpacity style={styles.closeButton} onPress={onClose}>
-              <Ionicons name="close" size={24} color="white" />
-            </TouchableOpacity>
+              <Pressable style={styles.closeButton} onPress={onClose}>
+                <Ionicons name="close" size={24} color="white" />
+              </Pressable>
 
-            {loading || !src ? (
-              <View style={styles.loadingContainer}>
-                <LoadingLogo isLoading={loading} size={70} />
-              </View>
-            ) : null}
+              {loading || !src ? (
+                <View style={styles.loadingContainer}>
+                  <LoadingLogo isLoading={loading} size={70} />
+                </View>
+              ) : null}
+            </View>
           </View>
-        </View>
-      </GestureHandlerRootView>
+        </GestureHandlerRootView>
+      </SafeAreaView>
     </Modal>
   )
 }
@@ -303,6 +308,7 @@ const styles = StyleSheet.create({
   },
   loadingContainer: {
     ...StyleSheet.absoluteFillObject,
+    pointerEvents: 'none',
     justifyContent: 'center',
     alignItems: 'center',
   },

package/src/components/layout/CollapseHorizontal.tsx

@@ -0,0 +1,92 @@
+import React, { useCallback, useLayoutEffect, useRef, useState } from 'react'
+import { LayoutChangeEvent, StyleProp, View, ViewStyle } from 'react-native'
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withSequence,
+  withTiming,
+} from 'react-native-reanimated'
+
+export const CollapseHorizontal = ({
+  children,
+  in: isIn,
+  duration = 200,
+  style,
+}: {
+  children: React.ReactNode
+  in: boolean
+  duration?: number
+  style?: StyleProp<ViewStyle>
+}) => {
+  const contentRef = useRef<View>(null)
+  const [contentWidth, setContentWidth] = useState(0)
+  const width = useSharedValue(0)
+  const opacity = useSharedValue(0)
+  const handleLayout = useCallback(
+    (event: LayoutChangeEvent) => {
+      setContentWidth(event.nativeEvent.layout.width)
+      // Initialize width if component is initially visible
+      if (isIn && width.value === 0) {
+        width.value = event.nativeEvent.layout.width
+        opacity.value = 1
+      }
+    },
+    [isIn, width, opacity],
+  )
+
+  useLayoutEffect(() => {
+    if (contentRef.current) {
+      contentRef.current.measure((_x, _y, width) => {
+        setContentWidth(width)
+      })
+    }
+  }, [])
+
+  React.useEffect(() => {
+    if (isIn) {
+      // Fade in: width first, then opacity
+      width.value = withTiming(contentWidth, {
+        duration,
+      })
+      opacity.value = withSequence(
+        withTiming(0, { duration: 0 }), // Reset opacity
+        withTiming(1, {
+          duration,
+        }),
+      )
+    } else {
+      // Fade out: opacity first, then width
+      opacity.value = withTiming(0, {
+        duration,
+      })
+      width.value = withSequence(
+        withTiming(width.value, { duration: 0 }), // Ensure we start from current width
+        withTiming(0, {
+          duration,
+        }),
+      )
+    }
+  }, [isIn, contentWidth, duration, width, opacity])
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    width: width.value,
+    opacity: opacity.value,
+  }))
+
+  return (
+    <Animated.View
+      style={[
+        {
+          overflow: 'hidden',
+          pointerEvents: isIn ? 'auto' : 'none',
+        },
+        animatedStyle,
+      ]}>
+      <View style={{ position: 'absolute', width: 'auto' }}>
+        <View style={style} onLayout={handleLayout} ref={contentRef}>
+          {children}
+        </View>
+      </View>
+    </Animated.View>
+  )
+}

package/src/components/loading/LoadingImage.tsx

@@ -1,14 +1,15 @@
 import { useMounted } from '@chem-po/react'
 import { Ionicons } from '@expo/vector-icons'
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { DimensionValue, Image, StyleSheet, TouchableOpacity, View, ViewStyle } from 'react-native'
+import { DimensionValue, Image, StyleSheet, View, ViewStyle } from 'react-native'
+import { Pressable } from 'react-native-gesture-handler'
 import { ImageViewModal } from '../image/ImageViewModal'
 import { LoadingLogo } from './Loading'
 
 export interface LoadingImageProps {
   src?: string | null
   loadingOverride?: boolean
-  onLoad?: (e: any) => void
+  onLoad?: (dims: { width: number; height: number }) => void
   filename?: string
   fileType?: string
   withFullView?: boolean
@@ -41,12 +42,13 @@ export const LoadingImage = ({
   const [viewing, setViewing] = useState(false)
   const mounted = useMounted(100)
 
-  const handleImageLoad = useCallback(
-    (e: any) => {
-      if (onLoad) onLoad(e)
-    },
-    [onLoad],
-  )
+  const handleImageLoad = useCallback(() => {
+    if (onLoad && src) {
+      Image.getSize(src, (width, height) => {
+        onLoad({ width, height })
+      })
+    }
+  }, [onLoad, src])
 
   const [prevSrc, setPrevSrc] = useState(src)
   useEffect(() => {
@@ -65,7 +67,6 @@ export const LoadingImage = ({
           opacity: src && !loading ? 1 : 0,
         },
       ]}
-      // onLoadStart={() => setImageLoading(true)}
       onLoadEnd={() => setImageLoading(false)}
       onLoad={handleImageLoad}
       resizeMode={src ? 'cover' : 'contain'}
@@ -86,23 +87,22 @@ export const LoadingImage = ({
       {!withFullView || buttonFullView ? (
         ImageComponent
       ) : (
-        <TouchableOpacity
-          activeOpacity={0.9}
+        <Pressable
           onPress={() => setViewing(true)}
           style={{
-            width: width ? undefined : '100%',
-            height: height ? undefined : '100%',
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
           }}>
           {ImageComponent}
-        </TouchableOpacity>
+        </Pressable>
       )}
       {buttonFullView && (
-        <TouchableOpacity
-          style={styles.fullViewButton}
-          onPress={() => setViewing(true)}
-          activeOpacity={0.7}>
+        <Pressable style={styles.fullViewButton} onPress={() => setViewing(true)}>
           <Ionicons name="expand" size={20} color="white" style={styles.fullViewIcon} />
-        </TouchableOpacity>
+        </Pressable>
       )}
       <View
         style={[

package/src/components/theme/colorMode/DarkModeToggle.tsx

@@ -1,7 +1,8 @@
 import { useBackgroundColor, useIconColor, useTheme } from '@chem-po/react'
 import { Ionicons } from '@expo/vector-icons'
 import React from 'react'
-import { StyleSheet, TouchableOpacity, View } from 'react-native'
+import { StyleSheet, View } from 'react-native'
+import { Pressable } from 'react-native-gesture-handler'
 
 export const DarkModeToggle = () => {
   const { colorMode, toggleColorMode } = useTheme()
@@ -11,7 +12,7 @@ export const DarkModeToggle = () => {
   const iconName = isDark ? 'moon' : 'sunny'
   const bg = useBackgroundColor(100)
   return (
-    <TouchableOpacity
+    <Pressable
       onPress={toggleColorMode}
       style={[
         styles.button,
@@ -20,7 +21,7 @@ export const DarkModeToggle = () => {
         },
       ]}>
       <Ionicons name={iconName} size={16} color={iconColor} />
-    </TouchableOpacity>
+    </Pressable>
   )
 }
 

package/src/contexts/root.tsx

@@ -28,14 +28,14 @@ const createPaperTheme = (
   return {
     dark: colorMode === 'dark',
     colors: {
-      primary: colors.accent[200],
+      primary: colors.accent[300],
       onPrimary: colors.text[900],
-      primaryContainer: colors.accent[500],
-      onPrimaryContainer: colors.text[300],
+      primaryContainer: colors.accent[800],
+      onPrimaryContainer: colors.text[150],
 
       secondary: colors.background[150],
       onSecondary: colors.text[100],
-      secondaryContainer: colors.background[50],
+      secondaryContainer: colors.accent[950],
       onSecondaryContainer: colors.text[150],
 
       tertiary: colors.accent[600],
@@ -53,7 +53,7 @@ const createPaperTheme = (
       surface: colors.background[100],
       onSurface: colors.text[100],
       surfaceVariant: colors.background[200],
-      onSurfaceVariant: colors.text[250],
+      onSurfaceVariant: colors.text[300],
       outline: colors.text[500],
       outlineVariant: colors.accent[300],
 
@@ -92,7 +92,7 @@ const createPaperTheme = (
           ...fonts?.bodyMedium,
         },
         bodySmall: {
-          fontSize: 15,
+          fontSize: 16,
           ...fonts?.bodySmall,
         },
       },

package/src/index.ts

@@ -3,3 +3,4 @@ export * from './constants'
 export * from './contexts'
 export * from './hooks'
 export * from './store'
+export * from './types'

package/src/types/forms.ts

@@ -0,0 +1,14 @@
+import { BaseCustomInput, BaseCustomInputProps } from '@chem-po/react'
+import { TextStyle, ViewStyle } from 'react-native'
+
+export type CustomInput<Value, InputStyle = TextStyle> = BaseCustomInput<
+  Value,
+  ViewStyle,
+  InputStyle
+>
+
+export type CustomInputProps<Value, InputStyle = TextStyle> = BaseCustomInputProps<
+  Value,
+  ViewStyle,
+  InputStyle
+>

package/src/types/index.ts

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