@fluentui-react-native/experimental-avatar 0.14.44 → 0.15.1

package/src/JSAvatar.styling.ts

@@ -1,201 +0,0 @@
-import {
-  JSAvatarName,
-  JSAvatarTokens,
-  AvatarConfigurableProps,
-  AvatarSlotProps,
-  JSAvatarProps,
-  AvatarColors,
-  AvatarSizesForTokens,
-  AvatarNamedColor,
-  ColorSchemes,
-  AvatarColorSchemes,
-} from './JSAvatar.types';
-import { Theme, UseStylingOptions, buildProps } from '@fluentui-react-native/framework';
-import { defaultJSAvatarTokens } from './JSAvatarTokens';
-import { borderStyles, fontStyles } from '@fluentui-react-native/tokens';
-import { globalTokens } from '@fluentui-react-native/theme-tokens';
-
-export const avatarStates: (keyof JSAvatarTokens)[] = [
-  ...AvatarColors,
-  ...AvatarSizesForTokens,
-  'neutral',
-  'brand',
-  'circular',
-  'square',
-  'inactive',
-  'iconColor',
-  'iconSize',
-  'size',
-];
-
-const tokensThatAreAlsoProps: (keyof AvatarConfigurableProps)[] = [
-  'active',
-  'avatarColor',
-  'initialsColor',
-  'ringBackgroundColor',
-  'ringColor',
-  'ringInnerGap',
-  'ringThickness',
-];
-
-export const stylingSettings: UseStylingOptions<JSAvatarProps, AvatarSlotProps, JSAvatarTokens> = {
-  tokens: [defaultJSAvatarTokens, JSAvatarName],
-  tokensThatAreAlsoProps,
-  states: avatarStates,
-  slotProps: {
-    root: buildProps(
-      (tokens: JSAvatarTokens) => {
-        const { size, active, avatarOpacity } = tokens;
-        const ringConfig = getRingConfig(tokens);
-        const avatarSize = active === 'active' ? ringConfig.size : size;
-
-        return {
-          style: {
-            alignItems: 'center',
-            justifyContent: 'center',
-            width: avatarSize,
-            height: avatarSize,
-            opacity: avatarOpacity,
-          },
-        };
-      },
-      ['avatarOpacity', 'size'],
-    ),
-    initials: buildProps(
-      (tokens: JSAvatarTokens, theme: Theme) => {
-        return {
-          style: {
-            ...fontStyles.from(tokens, theme),
-            color: tokens.initialsColor || tokens.color,
-            textAlign: 'center',
-          },
-        };
-      },
-      ['color', 'initialsColor', ...fontStyles.keys],
-    ),
-    initialsBackground: buildProps(
-      (tokens: JSAvatarTokens, theme: Theme) => {
-        const { backgroundColor, size, avatarColor } = tokens;
-        const _avatarColor =
-          !avatarColor || AvatarColors.includes(avatarColor as AvatarNamedColor) || ColorSchemes.includes(avatarColor as AvatarColorSchemes)
-            ? backgroundColor
-            : avatarColor;
-        const ringConfig = getRingConfig(tokens);
-
-        return {
-          style: {
-            ...borderStyles.from(tokens, theme),
-            width: size,
-            height: size,
-            justifyContent: 'center',
-            alignItems: 'center',
-            backgroundColor: _avatarColor,
-            borderWidth: tokens.borderWidth,
-            borderColor: tokens.borderColor,
-            marginTop: ringConfig.ringThickness,
-            marginLeft: ringConfig.ringThickness,
-          },
-        };
-      },
-      ['avatarColor', 'backgroundColor', 'size', 'borderColor', 'borderWidth', 'ringThickness', ...borderStyles.keys],
-    ),
-    image: buildProps(
-      (tokens: JSAvatarTokens) => {
-        const { borderRadius, size, borderWidth, borderColor } = tokens;
-        const ringConfig = getRingConfig(tokens);
-        return {
-          style: {
-            borderRadius: borderRadius,
-            width: size,
-            height: size,
-            borderWidth: borderWidth,
-            borderColor: borderColor,
-            marginTop: ringConfig.ringThickness,
-            marginLeft: ringConfig.ringThickness,
-          },
-        };
-      },
-      ['borderRadius', 'size', 'borderColor', 'borderWidth', 'ringThickness'],
-    ),
-    icon: buildProps(
-      (tokens: JSAvatarTokens) => {
-        return {
-          style: {
-            position: 'absolute',
-            fontSize: tokens.iconSize || tokens.fontSize,
-          },
-          color: tokens.iconColor || tokens.color,
-          width: tokens.iconSize,
-          height: tokens.iconSize,
-        };
-      },
-      ['iconSize', 'iconColor'],
-    ),
-    ring: buildProps(
-      (tokens: JSAvatarTokens, theme: Theme) => {
-        const { ringColor, ringBackgroundColor } = tokens;
-        const ringConfig = getRingConfig(tokens);
-        return {
-          style: {
-            borderStyle: 'solid',
-            width: ringConfig.size,
-            height: ringConfig.size,
-            ...borderStyles.from(tokens, theme),
-            borderWidth: ringConfig.ringThickness,
-            backgroundColor: ringBackgroundColor || 'transparent',
-            borderColor: ringColor,
-          },
-        };
-      },
-      ['size', 'ringColor', 'ringBackgroundColor', 'ringThickness', ...borderStyles.keys],
-    ),
-    badge: buildProps(
-      (tokens: JSAvatarTokens) => {
-        return {
-          size: tokens.badgeSize,
-          shape: 'circular',
-        };
-      },
-      ['badgeSize'],
-    ),
-  },
-};
-
-function getRingConfig(tokens: JSAvatarTokens): any {
-  const { size, ringThickness } = tokens;
-  const SMALL_SIZE = 48;
-  const MEDIUM_SIZE = 71;
-
-  const strokeSize = {
-    small: globalTokens.stroke.width.thick,
-    medium: globalTokens.stroke.width.thicker,
-    large: globalTokens.stroke.width.thickest,
-  };
-  if (ringThickness) {
-    return {
-      size: size + ringThickness * 4,
-      ringThickness,
-      innerStroke: ringThickness,
-    };
-  } else {
-    if (size <= SMALL_SIZE) {
-      return {
-        size: size + strokeSize.small * 4,
-        ringThickness: strokeSize.small,
-        innerStroke: strokeSize.small,
-      };
-    }
-    if (size <= MEDIUM_SIZE) {
-      return {
-        size: size + strokeSize.medium * 4,
-        ringThickness: strokeSize.medium,
-        innerStroke: strokeSize.medium,
-      };
-    }
-    return {
-      size: size + strokeSize.large * 4,
-      ringThickness: strokeSize.large,
-      innerStroke: strokeSize.large,
-    };
-  }
-}

package/src/JSAvatar.tsx

@@ -1,96 +0,0 @@
-/** @jsx withSlots */
-import { Image, View, Text, Platform } from 'react-native';
-import { Fragment } from 'react';
-import { JSAvatarProps, JSAvatarType, JSAvatarName, JSAvatarState, AvatarSlotProps } from './JSAvatar.types';
-import { stylingSettings } from './JSAvatar.styling';
-import { compose, UseSlots, mergeProps, withSlots, Slots } from '@fluentui-react-native/framework';
-import { useAvatar } from './useAvatar';
-import { PresenceBadge } from '@fluentui-react-native/badge';
-import { Icon } from '@fluentui-react-native/icon';
-import { Svg, Path, SvgProps } from 'react-native-svg';
-import { SvgIconProps } from '@fluentui-react-native/icon';
-
-/**
- * A function which determines if a set of styles should be applied to the compoent given the current state and props of the avatar.
- *
- * @param layer The name of the state that is being checked for
- * @param state The current state of the avatar
- * @param userProps The props that were passed into the avatar
- * @returns Whether the styles that are assigned to the layer should be applied to the avatar
- */
-export const avatarLookup = (layer: string, state: JSAvatarState, userProps: JSAvatarProps): boolean => {
-  const size = userProps.size;
-  const avatarSize = size ? `size${size}` : '';
-  return (
-    state[layer] ||
-    userProps[layer] ||
-    layer === userProps['shape'] ||
-    (!userProps['shape'] && layer === 'circular') ||
-    layer === userProps['avatarColor'] ||
-    layer === avatarSize ||
-    (userProps.active === 'inactive' && layer === 'inactive')
-  );
-};
-
-export const JSAvatar = compose<JSAvatarType>({
-  displayName: JSAvatarName,
-  ...stylingSettings,
-  slots: {
-    root: View,
-    image: Image,
-    initials: Text,
-    initialsBackground: View,
-    icon: Icon,
-    ring: View,
-    badge: PresenceBadge,
-  },
-  useRender: (userProps: JSAvatarProps, useSlots: UseSlots<JSAvatarType>) => {
-    const avatar = useAvatar(userProps);
-    const Slots = useSlots(avatar.props, (layer) => avatarLookup(layer, avatar.state, avatar.props));
-
-    return (final: JSAvatarProps) => {
-      const { showRing, transparentRing, showBadge } = avatar.state;
-      const { badge, ...mergedProps } = avatar.props;
-      const svgIconsEnabled = ['ios', 'macos', 'win32', 'android'].includes(Platform.OS as string);
-      const RingComponent = showRing && !transparentRing ? Slots.ring : Fragment;
-
-      return (
-        <Slots.root {...mergedProps}>
-          <RingComponent>{renderAvatar(final, avatar.props, Slots, svgIconsEnabled)}</RingComponent>
-          {svgIconsEnabled && showBadge && <Slots.badge {...badge} />}
-        </Slots.root>
-      );
-    };
-  },
-});
-
-function renderAvatar(final: JSAvatarProps, avatarProps: JSAvatarProps, Slots: Slots<AvatarSlotProps>, svgIconsEnabled?: boolean) {
-  const { icon, initials, imageUrl } = mergeProps(avatarProps, final);
-  return imageUrl ? (
-    <Slots.image source={{ uri: imageUrl }} />
-  ) : (
-    <Slots.initialsBackground accessible={false}>
-      {initials ? (
-        <Slots.initials accessible={false}>{initials}</Slots.initials>
-      ) : avatarProps.icon ? (
-        <Slots.icon {...icon} accessible={false} />
-      ) : (
-        svgIconsEnabled && <Slots.icon svgSource={svgProps} accessible={false} />
-      )}
-    </Slots.initialsBackground>
-  );
-}
-
-const fallbackIconSvg: React.FunctionComponent<SvgProps> = () => {
-  return (
-    <Svg viewBox="0 0 14 16">
-      <Path
-        fill="currentColor"
-        d="M7 0C4.79086 0 3 1.79086 3 4C3 6.20914 4.79086 8 7 8C9.20914 8 11 6.20914 11 4C11 1.79086 9.20914 0 7 0ZM4 4C4 2.34315 5.34315 1 7 1C8.65685 1 10 2.34315 10 4C10 5.65685 8.65685 7 7 7C5.34315 7 4 5.65685 4 4ZM2.00873 9C0.903151 9 0 9.88687 0 11C0 12.6912 0.83281 13.9663 2.13499 14.7966C3.41697 15.614 5.14526 16 7 16C8.85474 16 10.583 15.614 11.865 14.7966C13.1672 13.9663 14 12.6912 14 11C14 9.89557 13.1045 9.00001 12 9.00001L2.00873 9ZM1 11C1 10.4467 1.44786 10 2.00873 10L12 10C12.5522 10 13 10.4478 13 11C13 12.3088 12.3777 13.2837 11.3274 13.9534C10.2568 14.636 8.73511 15 7 15C5.26489 15 3.74318 14.636 2.67262 13.9534C1.62226 13.2837 1 12.3088 1 11Z"
-      ></Path>
-    </Svg>
-  );
-};
-const svgProps: SvgIconProps = {
-  src: fallbackIconSvg,
-};

package/src/JSAvatar.types.ts

@@ -1,286 +0,0 @@
-import type { IViewProps } from '@fluentui-react-native/adapters';
-import { ImageProps, ViewProps, TextProps, ColorValue } from 'react-native';
-import { IBackgroundColorTokens, IForegroundColorTokens, IBorderTokens, FontTokens } from '@fluentui-react-native/tokens';
-import { BadgeProps, PresenceBadgeProps, BadgeSize } from '@fluentui-react-native/badge';
-import { IconProps, IconSourcesType } from '@fluentui-react-native/icon';
-
-export const JSAvatarName = 'Avatar';
-export const AvatarSizesForTokens = [
-  'size20',
-  'size24',
-  'size28',
-  'size32',
-  'size36',
-  'size40',
-  'size48',
-  'size56',
-  'size64',
-  'size72',
-  'size96',
-  'size120',
-] as const;
-
-export const AvatarSizes = [20, 24, 28, 32, 36, 40, 48, 56, 64, 72, 96, 120] as const;
-
-/**
- * Sets color of the avatar when there is no picture. Uses fluent color names
- */
-export const AvatarColors = [
-  'darkRed',
-  'cranberry',
-  'red',
-  'pumpkin',
-  'peach',
-  'marigold',
-  'gold',
-  'brass',
-  'brown',
-  'forest',
-  'seafoam',
-  'darkGreen',
-  'lightTeal',
-  'teal',
-  'steel',
-  'blue',
-  'royalBlue',
-  'cornflower',
-  'navy',
-  'lavender',
-  'purple',
-  'grape',
-  'lilac',
-  'pink',
-  'magenta',
-  'plum',
-  'beige',
-  'mink',
-  'platinum',
-  'anchor',
-  'burgundy',
-  'hotPink',
-  'orchid',
-] as const;
-export const ColorSchemes = ['neutral', 'brand', 'colorful'] as const;
-export type AvatarSize = typeof AvatarSizes[number];
-export type AvatarNamedColor = typeof AvatarColors[number];
-export type AvatarColorSchemes = typeof ColorSchemes[number];
-
-export type AvatarShape = 'circular' | 'square';
-export type AvatarActive = 'active' | 'inactive' | 'unset';
-export type AvatarActiveAppearance = 'ring';
-export type AvatarColor = AvatarColorSchemes | AvatarNamedColor | ColorValue;
-
-export interface AvatarConfigurableProps {
-  /**
-   * Optional activity indicator
-   * * active: the avatar will be decorated according to activeAppearance
-   * * inactive: the avatar will be reduced in size and partially transparent
-   * * unset: normal display
-   *
-   * @defaultvalue unset
-   */
-  active?: AvatarActive;
-  /**
-   * The color when displaying either an icon or initials.
-   * * neutral (default): gray
-   * * brand: color from the brand palette
-   * * colorful: picks a color from a set of pre-defined colors, based on a hash of the name (or idForColor if provided)
-   * * [AvatarNamedColor]: a specific color from the theme
-   *
-   * @defaultvalue neutral
-   */
-  avatarColor?: AvatarColor;
-  initialsColor?: ColorValue;
-
-  /**
-   * Ring props
-   */
-  ringInnerGap?: number;
-  ringBackgroundColor?: ColorValue;
-  ringColor?: ColorValue;
-  ringThickness?: number;
-  transparentRing?: boolean;
-
-  /**
-   * Size of the avatar in pixels.
-   *
-   * Size is restricted to a limited set of supported values recommended for most uses (see `AvatarSizeValue`) and
-   * based on design guidelines for the Avatar control.
-   *
-   * @defaultvalue 24
-   */
-  size?: AvatarSize;
-}
-
-export interface JSAvatarProps extends IViewProps, AvatarConfigurableProps {
-  /**
-   * The appearance when `active="active"`
-   *
-   * @defaultvalue ring
-   */
-  activeAppearance?: AvatarActiveAppearance;
-
-  /**
-   * Badge shows the avatar's presence status.
-   * Badge can be shown only if `active` prop is undefined or unset
-   */
-  badge?: PresenceBadgeProps;
-
-  /**
-   * Icon to be displayed when the avatar doesn't have an image or initials.
-   *
-   * @defaultvalue `PersonRegular` (the default icon's size depends on the Avatar's size)
-   */
-  icon?: IconSourcesType;
-
-  /**
-   * Specify a string to be used instead of the name, to determine which color to use when color="colorful".
-   * Use this when a name is not available, but there is another unique identifier that can be used instead.
-   */
-  idForColor?: string;
-
-  /**
-   * (optional) Custom initials.
-   *
-   * It is usually not necessary to specify custom initials; by default they will be derived from the `name` prop,
-   * using the `getInitials` function.
-   *
-   * The initials are displayed when there is no image (including while the image is loading).
-   */
-  initials?: string;
-
-  /**
-   * The name of the person or entity represented by this Avatar. This should always be provided if it is available.
-   *
-   * The name will be used to determine the initials displayed when there is no icon, as well as provided to
-   * accessibility tools.
-   */
-  name?: string;
-
-  /**
-   * The avatar can have a circular or square shape.
-   * @defaultvalue circular
-   */
-  shape?: AvatarShape;
-
-  /**
-   * Shorthand for passing image URL instead of using `image` prop
-   */
-  imageUrl?: string;
-}
-
-export interface JSAvatarTokens extends IBackgroundColorTokens, IForegroundColorTokens, AvatarConfigurableProps, IBorderTokens, FontTokens {
-  /**
-   * Avatar opacity which is changed depending on `active` prop.
-   */
-  avatarOpacity?: number;
-
-  /**
-   * The size of presence badge.
-   */
-  badgeSize?: BadgeSize;
-
-  /**
-   * The icon color.
-   */
-  iconColor?: ColorValue;
-
-  /**
-   * The size of the icon.
-   */
-  iconSize?: number;
-
-  /**
-   * Avatar shapes:
-   */
-  circular?: JSAvatarTokens;
-  square?: JSAvatarTokens;
-
-  /**
-   * Token for inactive value of `active` prop
-   */
-  inactive?: JSAvatarTokens;
-
-  /**
-   * Avatar sizes:
-   */
-  size20?: JSAvatarTokens;
-  size24?: JSAvatarTokens;
-  size28?: JSAvatarTokens;
-  size32?: JSAvatarTokens;
-  size36?: JSAvatarTokens;
-  size40?: JSAvatarTokens;
-  size48?: JSAvatarTokens;
-  size56?: JSAvatarTokens;
-  size64?: JSAvatarTokens;
-  size72?: JSAvatarTokens;
-  size96?: JSAvatarTokens;
-  size120?: JSAvatarTokens;
-
-  /**
-   * Avatar colors:
-   */
-  neutral?: JSAvatarTokens;
-  brand?: JSAvatarTokens;
-  darkRed?: JSAvatarTokens;
-  cranberry?: JSAvatarTokens;
-  red?: JSAvatarTokens;
-  pumpkin?: JSAvatarTokens;
-  peach?: JSAvatarTokens;
-  marigold?: JSAvatarTokens;
-  gold?: JSAvatarTokens;
-  brass?: JSAvatarTokens;
-  brown?: JSAvatarTokens;
-  forest?: JSAvatarTokens;
-  seafoam?: JSAvatarTokens;
-  darkGreen?: JSAvatarTokens;
-  lightTeal?: JSAvatarTokens;
-  teal?: JSAvatarTokens;
-  steel?: JSAvatarTokens;
-  blue?: JSAvatarTokens;
-  royalBlue?: JSAvatarTokens;
-  cornflower?: JSAvatarTokens;
-  navy?: JSAvatarTokens;
-  lavender?: JSAvatarTokens;
-  purple?: JSAvatarTokens;
-  grape?: JSAvatarTokens;
-  lilac?: JSAvatarTokens;
-  pink?: JSAvatarTokens;
-  magenta?: JSAvatarTokens;
-  plum?: JSAvatarTokens;
-  beige?: JSAvatarTokens;
-  mink?: JSAvatarTokens;
-  platinum?: JSAvatarTokens;
-  anchor?: JSAvatarTokens;
-  burgundy?: JSAvatarTokens;
-  hotPink?: JSAvatarTokens;
-  orchid?: JSAvatarTokens;
-}
-
-export interface AvatarSlotProps {
-  root: ViewProps;
-  image: ImageProps;
-  initials: TextProps;
-  initialsBackground: ViewProps;
-  icon: IconProps;
-  ring: ViewProps;
-  badge: BadgeProps;
-}
-
-export interface JSAvatarState {
-  showRing: boolean;
-  transparentRing: boolean;
-  showBadge: boolean;
-}
-
-export interface AvatarInfo {
-  props: JSAvatarProps;
-  state: JSAvatarState;
-}
-
-export interface JSAvatarType {
-  props: JSAvatarProps;
-  slotProps: AvatarSlotProps;
-  tokens: JSAvatarTokens;
-  state: JSAvatarState;
-}