@ornikar/bumper 3.13.0 → 3.14.0

package/src/system/dataDisplays/Avatar/Avatar.tsx

@@ -0,0 +1,124 @@
+import { styled } from '@tamagui/core';
+import { useMemo } from 'react';
+import { useProps } from '../../core/hooks/useProps';
+import type { CenterProps } from '../../core/primitives/Center';
+import { Center } from '../../core/primitives/Center';
+import type { TamaguiMediaProps } from '../../types';
+import AvatarPlaceholderDisabledImage from './assets/avatar-placeholder-disabled.webp';
+import AvatarPlaceholderImage from './assets/avatar-placeholder.webp';
+import { AvatarImage } from './components/AvatarImage';
+import { AvatarInitial } from './components/AvatarInitial';
+import { context } from './context';
+
+export type AvatarSize = 'small' | 'medium' | 'large' | 'xlarge';
+export type AvatarShape = 'square' | 'circle';
+
+export interface InternalAvatarWithoutMediaProps extends Pick<CenterProps, 'testID'> {
+  /**
+   * Image source if none is given then fallback to the initials
+   */
+  src?: string;
+
+  /**
+   * The firstname used to produce the initials. If none is given then
+   * fallback on the default placeholder image.
+   */
+  firstname?: string;
+
+  /**
+   * The firstname used to produce the initials
+   */
+  lastname?: string;
+
+  /**
+   * Is this component in disabled state ?
+   */
+  disabled?: boolean;
+
+  /**
+   * @default large
+   */
+  size?: AvatarSize;
+
+  /**
+   * If size is omited, you can use width and height to tweak the avatar
+   * size as you wish
+   */
+  width?: number;
+
+  /**
+   * @see width
+   */
+  height?: number;
+
+  /**
+   * @default square
+   */
+  shape?: AvatarShape;
+}
+
+export type AvatarProps = TamaguiMediaProps<InternalAvatarWithoutMediaProps>;
+
+export const InternalAvatarFrame = styled(Center, {
+  name: 'Avatar',
+  context,
+  overflow: 'hidden',
+  variants: {
+    size: {
+      small: {
+        width: 32,
+        height: 32,
+      },
+      medium: {
+        width: 40,
+        height: 40,
+      },
+      large: {
+        width: 48,
+        height: 48,
+      },
+      xlarge: {
+        width: 64,
+        height: 64,
+      },
+    },
+    shape: {
+      square: {
+        borderRadius: '$radius.m',
+      },
+      circle: {
+        borderRadius: '$radius.circle',
+      },
+    },
+    disabled: {
+      true: {
+        backgroundColor: '$bg.disabled.hi',
+      },
+      false: {
+        backgroundColor: '$avatar.bg',
+      },
+    },
+  } as const,
+});
+
+export const Avatar = InternalAvatarFrame.styleable<AvatarProps, AvatarProps>((props, ref) => {
+  const flattenProps = useProps(props);
+
+  const children = useMemo(() => {
+    if (!flattenProps.src && !flattenProps.firstname && !flattenProps.lastname) {
+      return <AvatarImage src={flattenProps.disabled ? AvatarPlaceholderDisabledImage : AvatarPlaceholderImage} />;
+    }
+
+    if (flattenProps.src) {
+      return <AvatarImage src={flattenProps.src} />;
+    }
+
+    return <AvatarInitial firstname={flattenProps.firstname ?? ''} lastname={flattenProps.lastname ?? ''} />;
+  }, [flattenProps.src, flattenProps.firstname, flattenProps.lastname, flattenProps.disabled]);
+
+  return (
+    <InternalAvatarFrame ref={ref} {...props}>
+      {children}
+    </InternalAvatarFrame>
+  );
+});