@chem-po/react-native 0.0.19 → 0.0.21

package/lib/typescript/components/loading/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/loading/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAA;AAClC,cAAc,WAAW,CAAA;AACzB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,iBAAiB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/loading/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAA;AAClC,cAAc,WAAW,CAAA;AACzB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,kBAAkB,CAAA;AAChC,cAAc,iBAAiB,CAAA"}

package/lib/typescript/hooks/useFadeIn.d.ts

@@ -0,0 +1,10 @@
+import { Animated } from 'react-native';
+export interface FadeInOptions {
+    activeOpacity?: number;
+    inactiveOpacity?: number;
+    duration?: number;
+    enterDelay?: number;
+    exitDelay?: number;
+}
+export declare const useFadeIn: (active: boolean, opts?: FadeInOptions) => Animated.Value;
+//# sourceMappingURL=useFadeIn.d.ts.map

package/lib/typescript/hooks/useFadeIn.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFadeIn.d.ts","sourceRoot":"","sources":["../../../src/hooks/useFadeIn.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAA;AAEvC,MAAM,WAAW,aAAa;IAC5B,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AASD,eAAO,MAAM,SAAS,GAAI,QAAQ,OAAO,EAAE,OAAO,aAAa,mBA6B9D,CAAA"}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@chem-po/react-native",
   "author": "Elan Canfield",
   "license": "MIT",
-  "version": "0.0.19",
+  "version": "0.0.21",
   "main": "lib/commonjs/index.js",
   "types": "lib/typescript/index.d.ts",
   "source": "src/index.ts",
@@ -49,8 +49,8 @@
     "react-native-paper-dates": "^0.22.42",
     "react-native-svg": "15.11.2",
     "zustand": "^4.3.3",
-    "@chem-po/react": "0.0.19",
-    "@chem-po/core": "0.0.19"
+    "@chem-po/core": "0.0.21",
+    "@chem-po/react": "0.0.21"
   },
   "devDependencies": {
     "@babel/core": "^7.26.0",

package/src/components/button/ActionButton.tsx

@@ -0,0 +1,108 @@
+import { palette } from '@chem-po/core'
+import { useBackgroundColor } from '@chem-po/react'
+import React, { PropsWithChildren } from 'react'
+import { Pressable, StyleProp, StyleSheet, TextStyle, ViewStyle } from 'react-native'
+import { WithLoadingOverlay } from '../loading/LoadingOverlay'
+import { Txt } from '../text'
+
+export interface ActionButtonProps
+  extends PropsWithChildren<{
+    onPress: () => void
+    style?: StyleProp<ViewStyle>
+    disabled?: boolean
+    size?: 'lg' | 'md' | 'sm' | 'xs'
+  }> {
+  textStyle?: StyleProp<TextStyle>
+  disabledColor?: string
+  loading?: boolean
+}
+export const ActionButton = ({
+  children,
+  onPress,
+  style,
+  textStyle,
+  disabled = false,
+  loading,
+  size = 'md',
+  disabledColor = palette.gray.medium,
+}: ActionButtonProps) => {
+  const defaultBackgroundColor = useBackgroundColor(300)
+  const backgroundColor = disabled ? disabledColor : defaultBackgroundColor
+  const body =
+    typeof children === 'string' ? (
+      <Txt
+        style={[
+          textStyles[size],
+          { color: disabled ? disabledColor : defaultBackgroundColor },
+          textStyle,
+        ]}>
+        {children}
+      </Txt>
+    ) : (
+      children
+    )
+  return (
+    <Pressable
+      style={[containerStyles.base, containerStyles[size], { backgroundColor }, style]}
+      onPress={onPress}
+      disabled={disabled}>
+      {loading !== undefined ? (
+        <WithLoadingOverlay loading={loading}>{body}</WithLoadingOverlay>
+      ) : (
+        body
+      )}
+    </Pressable>
+  )
+}
+
+export const RoundedButton = ({ style, ...props }: ActionButtonProps) => {
+  return <ActionButton style={[styles.rounded, style]} {...props} />
+}
+
+const styles = StyleSheet.create({
+  rounded: {
+    borderRadius: 100,
+  },
+})
+
+const containerStyles = StyleSheet.create({
+  base: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  lg: {
+    paddingVertical: 10,
+    paddingHorizontal: 16,
+    borderRadius: 5,
+  },
+  md: {
+    paddingVertical: 8,
+    paddingHorizontal: 16,
+    borderRadius: 4,
+  },
+  sm: {
+    paddingVertical: 6,
+    paddingHorizontal: 12,
+    borderRadius: 3,
+  },
+  xs: {
+    paddingVertical: 4,
+    paddingHorizontal: 8,
+    borderRadius: 2,
+  },
+})
+
+const textStyles = StyleSheet.create({
+  lg: {
+    fontSize: 18,
+  },
+  md: {
+    fontSize: 16,
+  },
+  sm: {
+    fontSize: 14,
+  },
+  xs: {
+    fontSize: 12,
+  },
+})

package/src/components/button/index.ts

@@ -1,3 +1,4 @@
+export * from './ActionButton'
 export * from './DeleteButton'
 export * from './LoadingButton'
 export * from './Toggle'

package/src/components/feed/MediaFeed.tsx

@@ -18,7 +18,7 @@ import {
 } from 'react-native-gesture-handler'
 import { fill } from '../../styles/fill'
 import { Center } from '../box/Center'
-import { LoadingOverlay } from '../loading/Loading'
+import { LoadingOverlay } from '../loading/LoadingOverlay'
 import { REFRESH_THRESHOLD, SWIPE_THRESHOLD } from './constants'
 import { MediaFeedProvider } from './context'
 import { FeedContentPane } from './FeedContentPane'
@@ -183,7 +183,7 @@ export const MediaFeed = <T extends AnyObject = AnyObject>({
           </View>
           <MediaFeedRefresh canRefresh={!canGoPrev} refreshing={refreshing} offsetY={offsetY} />
           {/* {onSwipeUp ? <MediaFeedSwipeUp offsetY={offsetY} /> : null} */}
-          <LoadingOverlay inFeed isLoading={loading} />
+          <LoadingOverlay loading={loading} />
           {children ? <Center style={[fill.absolute, { zIndex: 3 }]}>{children}</Center> : null}
         </Center>
       </GestureDetector>

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/form/input/file/index.tsx

@@ -3,6 +3,7 @@ import {
   FileField,
   useBorderColor,
   useIconColor,
+  useObjectUrl,
   usePlaceholderColor,
   useTextColor,
 } from '@chem-po/react'
@@ -55,6 +56,8 @@ export const FileView = ({
   const { storagePath, dataUrl } = value ?? {}
   const missingFile = !dataUrl && !storagePath
 
+  const { url, loading } = useObjectUrl(value)
+
   const iconColor = useIconColor()
   const fileNameColor = useTextColor()
   const borderColor = useBorderColor()
@@ -65,7 +68,8 @@ export const FileView = ({
   if (value.type?.startsWith('image/')) {
     return (
       <LoadingImage
-        src={dataUrl}
+        src={url}
+        loadingOverride={loading}
         width={imageOptions?.width ?? 120}
         height={imageOptions?.height ?? 120}
         style={styles.image}

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
+}