@chem-po/react-native 0.0.19 → 0.0.20

package/src/components/form/input/Editable.tsx

@@ -9,7 +9,7 @@ import {
 import { Ionicons } from '@expo/vector-icons'
 import React, { useCallback, useEffect, useMemo } from 'react'
 import { StyleSheet, TouchableOpacity, View, ViewStyle } from 'react-native'
-import { LoadingOverlay } from '../../loading/Loading'
+import { LoadingOverlay } from '../../loading/LoadingOverlay'
 import { UploadProgress } from '../UploadProgress'
 import { FieldView } from '../view'
 import { StandaloneInput } from './StandaloneInput'
@@ -203,7 +203,7 @@ export const Editable = <T extends Field>({
             </View>
           </View>
         )}
-        <LoadingOverlay isLoading={isLoading} />
+        <LoadingOverlay loading={isLoading} />
       </View>
       <UploadProgress uploads={uploads} />
     </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, { useEffect, useMemo, useState } from 'react'
-import { Animated, Image, StyleSheet, Text, View, ViewStyle } from 'react-native'
+import React, { useMemo } from 'react'
+import { Image, StyleSheet, Text, View, ViewStyle } from 'react-native'
 
 export const LottieLoadingLogo = ({
   size = 30,
@@ -124,62 +124,6 @@ export const Loading = ({
   return inBox ? <View style={styles.boxContainer}>{body}</View> : body
 }
 
-export const LoadingOverlay = ({
-  isLoading,
-  text,
-  inFeed,
-  style,
-}: {
-  isLoading: boolean
-  text?: string
-  inFeed?: boolean
-  style?: ViewStyle
-}) => {
-  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 (
-    <Animated.View
-      style={[
-        styles.overlay,
-        {
-          backgroundColor: bgColor,
-          opacity,
-        },
-        style,
-      ]}>
-      {!text ? (
-        <LoadingLogo inFeed={inFeed} size={100} isLoading={isLoading} />
-      ) : (
-        <Loading text={text} />
-      )}
-    </Animated.View>
-  )
-}
-
 const styles = StyleSheet.create({
   loadingContainer: {
     flexDirection: 'row',
@@ -196,15 +140,6 @@ const styles = StyleSheet.create({
     borderRadius: 8,
     backgroundColor: 'rgba(0, 0, 0, 0.05)',
   },
-  overlay: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
   errorText: {
     color: 'red',
   },

package/src/components/loading/LoadingOverlay.tsx

@@ -0,0 +1,64 @@
+import React, { useMemo } from 'react'
+import { Animated, StyleProp, StyleSheet, ViewStyle } from 'react-native'
+import { FadeInOptions, useFadeIn } from '../../hooks/useFadeIn'
+import { CircularProgress } from './CircularProgress'
+
+const loadingFadeInProps: FadeInOptions = {
+  activeOpacity: 0.5,
+  duration: 100,
+}
+interface LoadingOverlayProps {
+  loading: boolean
+  fadeOptions?: FadeInOptions
+  style?: StyleProp<ViewStyle>
+}
+export const LoadingOverlay = ({ loading, fadeOptions, style }: LoadingOverlayProps) => {
+  const opts = useMemo(() => ({ ...loadingFadeInProps, ...fadeOptions }), [fadeOptions])
+  const opacity = useFadeIn(loading, opts)
+
+  return (
+    <Animated.View
+      style={[styles.overlay, style, { opacity, pointerEvents: loading ? 'auto' : 'none' }]}>
+      <CircularProgress />
+    </Animated.View>
+  )
+}
+
+const withOverlayLoadingFadeIn: FadeInOptions = {
+  enterDelay: 250,
+}
+export const WithLoadingOverlay = ({
+  loading,
+  children,
+  style,
+  overlayStyle,
+}: {
+  loading: boolean
+  children: React.ReactNode
+  style?: StyleProp<ViewStyle>
+  overlayStyle?: StyleProp<ViewStyle>
+}) => {
+  const bodyOpacity = useFadeIn(!loading, withOverlayLoadingFadeIn)
+  return (
+    <>
+      <Animated.View style={[style, { opacity: bodyOpacity }]}>{children}</Animated.View>
+      <LoadingOverlay
+        fadeOptions={withOverlayLoadingFadeIn}
+        loading={loading}
+        style={overlayStyle}
+      />
+    </>
+  )
+}
+
+const styles = StyleSheet.create({
+  overlay: {
+    position: 'absolute',
+    justifyContent: 'center',
+    alignItems: 'center',
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
+  },
+})

package/src/components/loading/index.ts

@@ -1,4 +1,5 @@
 export * from './CircularProgress'
 export * from './Loading'
 export * from './LoadingImage'
+export * from './LoadingOverlay'
 export * from './LoadingSwitch'

package/src/hooks/useFadeIn.ts

@@ -0,0 +1,48 @@
+import { useEffect, useRef } from 'react'
+import { Animated } from 'react-native'
+
+export interface FadeInOptions {
+  activeOpacity?: number
+  inactiveOpacity?: number
+  duration?: number
+  enterDelay?: number
+  exitDelay?: number
+}
+
+const defaultFadeInOptions: FadeInOptions = {
+  activeOpacity: 1,
+  inactiveOpacity: 0,
+  duration: 250,
+  enterDelay: 0,
+  exitDelay: 0,
+}
+export const useFadeIn = (active: boolean, opts?: FadeInOptions) => {
+  const {
+    activeOpacity = 1,
+    inactiveOpacity = 0,
+    duration = 300,
+    enterDelay = 0,
+    exitDelay = 0,
+  } = opts ?? defaultFadeInOptions
+  const opacity = useRef(new Animated.Value(0))
+
+  useEffect(() => {
+    if (active) {
+      Animated.timing(opacity.current, {
+        toValue: activeOpacity,
+        duration,
+        useNativeDriver: true,
+        delay: enterDelay,
+      }).start()
+    } else {
+      Animated.timing(opacity.current, {
+        toValue: inactiveOpacity,
+        duration,
+        useNativeDriver: true,
+        delay: exitDelay,
+      }).start()
+    }
+  }, [active, activeOpacity, inactiveOpacity, duration, enterDelay, exitDelay])
+
+  return opacity.current
+}