@tamagui/avatar 1.0.1-beta.59 → 1.0.1-beta.62

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/avatar",
-  "version": "1.0.1-beta.59",
+  "version": "1.0.1-beta.62",
   "sideEffects": true,
   "source": "src/index.ts",
   "types": "./types/index.d.ts",
@@ -8,6 +8,7 @@
   "module": "dist/esm",
   "module:jsx": "dist/jsx",
   "files": [
+    "src",
     "types",
     "dist"
   ],
@@ -19,10 +20,10 @@
   },
   "dependencies": {
     "@radix-ui/react-use-callback-ref": "^0.1.0",
-    "@tamagui/core": "^1.0.1-beta.59",
-    "@tamagui/image": "^1.0.1-beta.59",
-    "@tamagui/shapes": "^1.0.1-beta.59",
-    "@tamagui/text": "^1.0.1-beta.59"
+    "@tamagui/core": "^1.0.1-beta.62",
+    "@tamagui/image": "^1.0.1-beta.62",
+    "@tamagui/shapes": "^1.0.1-beta.62",
+    "@tamagui/text": "^1.0.1-beta.62"
   },
   "peerDependencies": {
     "react": "*",
@@ -30,7 +31,7 @@
     "react-native": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.0.1-beta.59",
+    "@tamagui/build": "^1.0.1-beta.62",
     "@types/react-dom": "^18.0.3",
     "@types/react-native": "^0.67.3",
     "react": "*",

package/src/Avatar.tsx

@@ -0,0 +1,162 @@
+// forked from radix https://github.com/radix-ui/primitives/blob/main/packages/react/avatar/src/Avatar.tsx
+
+import {
+  GetProps,
+  SizeTokens,
+  TamaguiElement,
+  getVariableValue,
+  getVariantExtras,
+  styled,
+  withStaticProperties,
+} from '@tamagui/core'
+import { Scope, createContextScope } from '@tamagui/create-context'
+import { Image, ImageProps } from '@tamagui/image'
+import { Square, getShapeSize } from '@tamagui/shapes'
+import { YStack } from '@tamagui/stacks'
+import * as React from 'react'
+
+const AVATAR_NAME = 'Avatar'
+
+type ScopedProps<P> = P & { __scopeAvatar?: Scope }
+const [createAvatarContext, createAvatarScope] = createContextScope(AVATAR_NAME)
+
+type ImageLoadingStatus = 'idle' | 'loading' | 'loaded' | 'error'
+
+type AvatarContextValue = {
+  size: SizeTokens
+  imageLoadingStatus: ImageLoadingStatus
+  onImageLoadingStatusChange(status: ImageLoadingStatus): void
+}
+
+const [AvatarProvider, useAvatarContext] = createAvatarContext<AvatarContextValue>(AVATAR_NAME)
+
+/* -------------------------------------------------------------------------------------------------
+ * AvatarImage
+ * -----------------------------------------------------------------------------------------------*/
+
+const IMAGE_NAME = 'AvatarImage'
+
+type AvatarImageProps = Partial<ImageProps> & {
+  onLoadingStatusChange?: (status: ImageLoadingStatus) => void
+}
+
+const AvatarImage = React.forwardRef<TamaguiElement, AvatarImageProps>(
+  (props: ScopedProps<AvatarImageProps>, forwardedRef) => {
+    const { __scopeAvatar, src, onLoadingStatusChange = () => {}, ...imageProps } = props
+    const context = useAvatarContext(IMAGE_NAME, __scopeAvatar)
+    const [status, setStatus] = React.useState<ImageLoadingStatus>('idle')
+    const extras = getVariantExtras(props)
+    const shapeSize = getVariableValue(getShapeSize(context.size, extras)?.width)
+
+    React.useEffect(() => {
+      setStatus('idle')
+    }, [JSON.stringify(src)])
+
+    React.useEffect(() => {
+      onLoadingStatusChange(status)
+      context.onImageLoadingStatusChange(status)
+    }, [status])
+
+    return (
+      <YStack fullscreen zIndex={1}>
+        <Image
+          fullscreen
+          {...imageProps}
+          // @ts-ignore
+          ref={forwardedRef}
+          // @ts-ignore
+          src={src}
+          onLoadStart={() => {
+            // setStatus('loading')
+          }}
+          onError={() => {
+            setStatus('error')
+          }}
+          onLoad={() => {
+            setStatus('loaded')
+          }}
+        />
+      </YStack>
+    )
+  }
+)
+
+AvatarImage.displayName = IMAGE_NAME
+
+/* -------------------------------------------------------------------------------------------------
+ * AvatarFallback
+ * -----------------------------------------------------------------------------------------------*/
+
+const FALLBACK_NAME = 'AvatarFallback'
+
+const AvatarFallbackFrame = styled(YStack, {
+  name: FALLBACK_NAME,
+  position: 'absolute',
+  fullscreen: true,
+  zIndex: 0,
+})
+
+type AvatarFallbackProps = GetProps<typeof AvatarFallbackFrame> & {
+  delayMs?: number
+}
+
+const AvatarFallback = AvatarFallbackFrame.extractable(
+  React.forwardRef<TamaguiElement, AvatarFallbackProps>(
+    (props: ScopedProps<AvatarFallbackProps>, forwardedRef) => {
+      const { __scopeAvatar, delayMs, ...fallbackProps } = props
+      const context = useAvatarContext(FALLBACK_NAME, __scopeAvatar)
+      const [canRender, setCanRender] = React.useState(delayMs === undefined)
+
+      React.useEffect(() => {
+        if (delayMs !== undefined) {
+          const timerId = setTimeout(() => setCanRender(true), delayMs)
+          return () => clearTimeout(timerId)
+        }
+      }, [delayMs])
+
+      return canRender && context.imageLoadingStatus !== 'loaded' ? (
+        <AvatarFallbackFrame {...fallbackProps} ref={forwardedRef} />
+      ) : null
+    }
+  )
+)
+
+AvatarFallback.displayName = FALLBACK_NAME
+
+/* -------------------------------------------------------------------------------------------------
+ * Avatar
+ * -----------------------------------------------------------------------------------------------*/
+
+export const AvatarFrame = styled(Square, {
+  name: AVATAR_NAME,
+  position: 'relative',
+  overflow: 'hidden',
+})
+
+type AvatarProps = GetProps<typeof AvatarFrame>
+
+const Avatar = withStaticProperties(
+  React.forwardRef<TamaguiElement, AvatarProps>((props: ScopedProps<AvatarProps>, forwardedRef) => {
+    const { __scopeAvatar, size = '$4', ...avatarProps } = props
+    const [imageLoadingStatus, setImageLoadingStatus] = React.useState<ImageLoadingStatus>('idle')
+    return (
+      <AvatarProvider
+        size={size}
+        scope={__scopeAvatar}
+        imageLoadingStatus={imageLoadingStatus}
+        onImageLoadingStatusChange={setImageLoadingStatus}
+      >
+        <AvatarFrame size={size} {...avatarProps} ref={forwardedRef} />
+      </AvatarProvider>
+    )
+  }),
+  {
+    Image: AvatarImage,
+    Fallback: AvatarFallback,
+  }
+)
+
+Avatar.displayName = AVATAR_NAME
+
+export { createAvatarScope, Avatar, AvatarImage, AvatarFallback }
+export type { AvatarProps, AvatarImageProps, AvatarFallbackProps }

package/src/index.ts

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