@chem-po/react-native 0.0.9 → 0.0.11

package/src/components/form/view/select.tsx

@@ -1,6 +1,7 @@
-import { SelectField, usePlaceholderColor } from '@chem-po/react'
+import { RenderSelectOptionProps } from '@chem-po/core'
+import { SelectField, useColorMode, usePlaceholderColor } from '@chem-po/react'
 import React from 'react'
-import { StyleSheet, Text, useColorScheme, View, ViewStyle } from 'react-native'
+import { StyleSheet, Text, View, ViewStyle } from 'react-native'
 import { Txt } from '../../text'
 
 const styles = StyleSheet.create({
@@ -14,7 +15,9 @@ const styles = StyleSheet.create({
   },
 })
 
-const DefaultRenderOption = (value: any) => {
+const DefaultRenderOption = <T extends SelectField>({
+  value,
+}: RenderSelectOptionProps<T['defaultValue']>) => {
   return <Txt>{typeof value === 'string' ? value : JSON.stringify(value)}</Txt>
 }
 
@@ -30,13 +33,17 @@ export const SelectFieldView = ({
   style?: ViewStyle
 }) => {
   const { placeholder, renderOption: customRender } = field
-  const colorScheme = useColorScheme() ?? 'light'
+  const colorMode = useColorMode()
   const placeholderColor = usePlaceholderColor()
-  const renderOption = customRender ?? DefaultRenderOption
+  const RenderOption = customRender ?? DefaultRenderOption
   return (
     <View style={[styles.container, style]}>
       {!noLabel && <Text style={[styles.label, { color: placeholderColor }]}>{placeholder}</Text>}
-      {value ? renderOption(value, colorScheme, true) : 'None'}
+      <RenderOption
+        value={value && value !== '' ? value : 'None'}
+        colorMode={colorMode}
+        isSelected={true}
+      />
     </View>
   )
 }

package/src/components/loading/Loading.tsx

@@ -1,7 +1,7 @@
 import { ThemedAsset, useAppAssets, useTheme } from '@chem-po/react'
 import LottieView from 'lottie-react-native'
-import React, { useMemo } from 'react'
-import { Image, StyleSheet, Text, View, ViewStyle } from 'react-native'
+import React, { useEffect, useMemo, useState } from 'react'
+import { Animated, Image, StyleSheet, Text, View, ViewStyle } from 'react-native'
 
 export const LottieLoadingLogo = ({
   size = 30,
@@ -137,16 +137,46 @@ export const LoadingOverlay = ({
 }) => {
   const { colorMode } = useTheme()
   const bgColor = colorMode === 'dark' ? 'rgba(0, 0, 0, 0.53)' : 'rgba(255, 255, 255, 0.67)'
+  const opacity = useMemo(() => new Animated.Value(0), [])
+  const [isAnimating, setIsAnimating] = useState(false)
+
+  useEffect(() => {
+    if (isLoading) {
+      setIsAnimating(true)
+      Animated.timing(opacity, {
+        toValue: 1,
+        duration: 200,
+        useNativeDriver: true,
+      }).start()
+    } else {
+      Animated.timing(opacity, {
+        toValue: 0,
+        duration: 200,
+        useNativeDriver: true,
+      }).start(() => {
+        setIsAnimating(false)
+      })
+    }
+  }, [isLoading, opacity])
+
+  if (!isLoading && !isAnimating) return null
 
   return (
-    <View
-      style={[styles.overlay, { backgroundColor: bgColor }, { opacity: isLoading ? 1 : 0 }, style]}>
+    <Animated.View
+      style={[
+        styles.overlay,
+        {
+          backgroundColor: bgColor,
+          opacity,
+        },
+        style,
+      ]}>
       {!text ? (
         <LoadingLogo inFeed={inFeed} size={100} isLoading={isLoading} />
       ) : (
         <Loading text={text} />
       )}
-    </View>
+    </Animated.View>
   )
 }