refactor: use rn-primitives for avatar component

roninoss · Aug 29, 2024 · feb2cb0 · feb2cb0
1 parent f860fc1
commit feb2cb0
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 104 deletions.
diff --git a/components/nativewindui/Avatar.tsx b/components/nativewindui/Avatar.tsx
@@ -1,123 +1,46 @@
+import * as AvatarPrimitive from '@rn-primitives/avatar';
 import * as React from 'react';
-import {
-  ImageErrorEventData,
-  ImageLoadEventData,
-  NativeSyntheticEvent,
-  Image as RNImage,
-  View,
-} from 'react-native';
 
 import { cn } from '~/lib/cn';
 
-interface AvatarRootProps {
-  alt: string;
-}
-
-interface AvatarImageProps {
-  children?: React.ReactNode;
-  onLoadingStatusChange?: (status: 'error' | 'loaded') => void;
-}
-
-type AvatarState = 'loading' | 'error' | 'loaded';
-
-interface IRootContext extends AvatarRootProps {
-  status: AvatarState;
-  setStatus: (status: AvatarState) => void;
-}
-
-const RootContext = React.createContext<IRootContext | null>(null);
-
 const Avatar = React.forwardRef<
-  React.ElementRef<typeof View>,
-  React.ComponentPropsWithoutRef<typeof View> & AvatarRootProps
->(({ alt, className, ...viewProps }, ref) => {
-  const [status, setStatus] = React.useState<AvatarState>('error');
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ alt, className, ...props }, ref) => {
   return (
-    <RootContext.Provider value={{ alt, status, setStatus }}>
-      <View
-        ref={ref}
-        className={cn('relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full', className)}
-        {...viewProps}
-      />
-    </RootContext.Provider>
+    <AvatarPrimitive.Root
+      ref={ref}
+      alt={alt}
+      className={cn('relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full', className)}
+      {...props}
+    />
   );
 });
 
-Avatar.displayName = 'Avatar';
-
-function useRootContext() {
-  const context = React.useContext(RootContext);
-  if (!context) {
-    throw new Error('Avatar compound components cannot be rendered outside the Avatar component');
-  }
-  return context;
-}
+Avatar.displayName = AvatarPrimitive.Root.displayName;
 
 const AvatarImage = React.forwardRef<
-  React.ElementRef<typeof RNImage>,
-  Omit<React.ComponentPropsWithoutRef<typeof RNImage>, 'alt'> & AvatarImageProps
->(
-  (
-    { onLoad: onLoadProps, onError: onErrorProps, onLoadingStatusChange, className, ...props },
-    ref
-  ) => {
-    const { alt, setStatus, status } = useRootContext();
-
-    React.useLayoutEffect(() => {
-      setStatus('loading');
-    }, []);
-
-    const onLoad = React.useCallback(
-      (e: NativeSyntheticEvent<ImageLoadEventData>) => {
-        setStatus('loaded');
-        onLoadingStatusChange?.('loaded');
-        onLoadProps?.(e);
-      },
-      [onLoadProps]
-    );
-
-    const onError = React.useCallback(
-      (e: NativeSyntheticEvent<ImageErrorEventData>) => {
-        setStatus('error');
-        onLoadingStatusChange?.('error');
-        onErrorProps?.(e);
-      },
-      [onErrorProps]
-    );
-
-    if (status === 'error') {
-      return null;
-    }
-
-    return (
-      <RNImage
-        ref={ref}
-        alt={alt}
-        onLoad={onLoad}
-        onError={onError}
-        className={cn('aspect-square h-full w-full', className)}
-        {...props}
-      />
-    );
-  }
-);
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => {
+  return (
+    <AvatarPrimitive.Image
+      ref={ref}
+      className={cn('aspect-square h-full w-full', className)}
+      {...props}
+    />
+  );
+});
 
-AvatarImage.displayName = 'AvatarImage';
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
 
 const AvatarFallback = React.forwardRef<
-  React.ElementRef<typeof View>,
-  React.ComponentPropsWithoutRef<typeof View>
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
 >(({ className, ...props }, ref) => {
-  const { alt, status } = useRootContext();
-
-  if (status !== 'error') {
-    return null;
-  }
   return (
-    <View
+    <AvatarPrimitive.Fallback
       ref={ref}
-      role="img"
-      aria-label={alt}
       className={cn(
         'flex h-full w-full items-center justify-center rounded-full bg-muted',
         className
@@ -127,6 +50,6 @@ const AvatarFallback = React.forwardRef<
   );
 });
 
-AvatarFallback.displayName = 'AvatarFallback';
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
 
 export { Avatar, AvatarFallback, AvatarImage };
diff --git a/package.json b/package.json
@@ -19,6 +19,7 @@
     "@react-native-community/slider": "4.5.2",
     "@react-native-picker/picker": "2.7.5",
     "@react-navigation/native": "^6.1.7",
+    "@rn-primitives/avatar": "^1.0.4",
     "@roninoss/icons": "^0.0.4",
     "@shopify/flash-list": "1.6.4",
     "class-variance-authority": "^0.7.0",