@fluentui-react-native/experimental-avatar 0.12.18 → 0.13.2

package/src/JSAvatar.types.ts

@@ -0,0 +1,110 @@
+import type { IViewProps } from '@fluentui-react-native/adapters';
+import { ImageProps, ViewProps, ImageURISource, TextProps, ColorValue } from 'react-native';
+import { IBackgroundColorTokens, IForegroundColorTokens, IBorderTokens } from '@fluentui-react-native/tokens';
+
+export const JSAvatarName = 'Avatar';
+
+export type AvatarSize = 'size8' | 'size24' | 'size32' | 'size40' | 'size48' | 'size56' | 'size72' | 'size100' | 'size120';
+
+export type AvatarShape = 'circular' | 'square';
+export type AvatarActive = 'active' | 'inactive' | 'unset';
+export type AvatarActiveAppearance = 'ring' | 'shadow' | 'glow' | 'ring-shadow' | 'ring-glow';
+
+/**
+ * Sets color of the avatar when there is no picture. Uses fluent color names
+ */
+export type AvatarColor =
+  | 'cornflower'
+  | 'blue'
+  | 'royalBlue'
+  | 'teal'
+  | 'forest'
+  | 'darkGreen'
+  | 'berry'
+  | 'hotPink'
+  | 'grape'
+  | 'purple'
+  | 'pumpkin'
+  | 'red'
+  | 'burgundy'
+  | 'orchid'
+  | 'brass'
+  | 'darkRed'
+  | 'beige'
+  | 'platinum'
+  | 'steel'
+  | 'brown';
+
+export type AvatarPresence = 'none' | 'offline' | 'online' | 'away' | 'dnd' | 'blocked' | 'busy';
+
+export type RingThickness = number | 'xSmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge';
+
+export interface RingConfig {
+  accent?: boolean;
+  transparent?: boolean;
+  ringColor?: ColorValue; // glow
+  ringBackgroundColor?: ColorValue; // inner/outer rings
+  ringThickness?: RingThickness;
+  innerGap?: RingThickness;
+}
+
+export interface AvatarConfigurableProps {
+  size?: AvatarSize;
+  ring?: RingConfig;
+  coinColorFluent?: AvatarColor;
+}
+
+export interface JSAvatarProps extends IViewProps, AvatarConfigurableProps {
+  active?: AvatarActive;
+  activeAppearance?: AvatarActiveAppearance;
+  imageUrl?: string;
+  imageDescription?: string;
+  initials?: string;
+  presence?: AvatarPresence;
+  isOutOfOffice?: boolean;
+  shape?: AvatarShape;
+}
+
+export interface AvatarSlotProps {
+  root: ViewProps;
+  photo: ImageProps;
+  initials: TextProps;
+  initialsBackground: ViewProps;
+  icon: ImageProps;
+  ring: ViewProps;
+  glow: ViewProps;
+}
+
+export type IconAlignment = 'start' | 'center' | 'end';
+
+export interface JSAvatarTokens extends IBackgroundColorTokens, IForegroundColorTokens, AvatarConfigurableProps, IBorderTokens {
+  avatarSize?: number;
+  iconSize?: number;
+  iconStrokeWidth?: number;
+  iconStrokeColor?: string;
+  initialsSize?: number;
+  horizontalIconAlignment?: IconAlignment;
+  verticalIconAlignment?: IconAlignment;
+  physicalSize?: number;
+  circular?: JSAvatarTokens;
+  square?: JSAvatarTokens;
+}
+
+export interface JSAvatarState {
+  personaPhotoSource: ImageURISource | undefined;
+  iconSource: ImageURISource | undefined;
+  showRing: boolean;
+  transparentRing: boolean;
+}
+
+export interface AvatarInfo {
+  props: JSAvatarProps;
+  state: JSAvatarState;
+}
+
+export interface JSAvatarType {
+  props: JSAvatarProps;
+  slotProps: AvatarSlotProps;
+  tokens: JSAvatarTokens;
+  state: JSAvatarState;
+}

package/src/JSAvatarTokens.ts

@@ -0,0 +1,20 @@
+import { Theme } from '@fluentui-react-native/framework';
+import { TokenSettings } from '@fluentui-react-native/use-styling';
+import { JSAvatarTokens } from '.';
+import { convertCoinColorFluent } from './JSAvatar.helpers';
+import { globalTokens } from '@fluentui-react-native/theme-tokens';
+
+export const defaultJSAvatarTokens: TokenSettings<JSAvatarTokens, Theme> = () =>
+  ({
+    horizontalIconAlignment: 'end',
+    verticalIconAlignment: 'end',
+    color: 'white', // initials is always 'white', unless overriden by token
+    iconStrokeColor: 'white', // icon stroke color is always 'white', unless overriden by token
+    backgroundColor: convertCoinColorFluent('cornflower'),
+    circular: {
+      borderRadius: globalTokens.corner.radius.circle,
+    },
+    square: {
+      borderRadius: globalTokens.corner.radius.medium,
+    },
+  } as JSAvatarTokens);

package/src/index.ts

@@ -1 +1,3 @@
 export * from './Avatar';
+export * from './JSAvatar';
+export * from './JSAvatar.types';

package/src/useAvatar.ts

@@ -0,0 +1,43 @@
+import { JSAvatarProps, AvatarInfo, JSAvatarState } from './JSAvatar.types';
+import { getPresenceIconSource } from './JSAvatar.helpers';
+
+/**
+ * Re-usable hook for FURN Avatar.
+ * This hook configures Avatar props and state for FURN Avatar.
+ *
+ * @param props user props sent to FURN Avatar
+ * @returns configured props and state for FURN Avatar
+ */
+export const useAvatar = (props: JSAvatarProps): AvatarInfo => {
+  const { imageUrl, imageDescription, initials, presence, isOutOfOffice, ring, shape, ...rest } = props;
+
+  const personaPhotoSource =
+    imageUrl === undefined
+      ? undefined
+      : {
+          uri: imageUrl,
+        };
+
+  const iconSource = presence === undefined ? undefined : getPresenceIconSource(presence, isOutOfOffice || false);
+  const showRing = !!ring;
+  const transparentRing = !!ring?.transparent;
+
+  const state: JSAvatarState = {
+    iconSource,
+    personaPhotoSource,
+    showRing,
+    transparentRing,
+  };
+
+  return {
+    props: {
+      children: initials,
+      accessibilityLabel: imageDescription,
+      shape: shape || 'circular',
+      ...rest,
+    },
+    state: {
+      ...state,
+    },
+  };
+};