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

package/src/JSAvatarTokens.ts

@@ -1,201 +0,0 @@
-import { Theme } from '@fluentui-react-native/framework';
-import { TokenSettings } from '@fluentui-react-native/use-styling';
-import { JSAvatarTokens } from '.';
-import { globalTokens } from '@fluentui-react-native/theme-tokens';
-
-export const defaultJSAvatarTokens: TokenSettings<JSAvatarTokens, Theme> = (t: Theme) =>
-  ({
-    color: t.colors.neutralForeground3,
-    backgroundColor: t.colors.neutralBackground6,
-    avatarOpacity: 1,
-    fontFamily: t.typography.families.primary,
-    fontWeight: globalTokens.font.weight.semibold,
-    fontSize: globalTokens.font.size[200],
-    size: 24,
-    iconSize: 16,
-    iconColor: t.colors.neutralForeground3,
-    ringColor: t.colors.transparentStroke,
-    borderColor: globalTokens.color.white,
-    borderWidth: t.host.appearance === 'highContrast' ? 1 : 0,
-    circular: {
-      borderRadius: globalTokens.corner.radius.circle,
-    },
-    square: {
-      borderRadius: globalTokens.corner.radius.medium,
-    },
-    inactive: {
-      avatarOpacity: 0.8,
-    },
-    size20: {
-      size: 20,
-      badgeSize: 'smallest',
-      iconSize: 16,
-      fontSize: globalTokens.font.size[100],
-      square: {
-        borderRadius: globalTokens.corner.radius.small,
-      },
-    },
-    size24: {
-      size: 24,
-      badgeSize: 'smallest',
-      iconSize: 16,
-      fontSize: globalTokens.font.size[100],
-      square: {
-        borderRadius: globalTokens.corner.radius.small,
-      },
-    },
-    size28: {
-      size: 28,
-      badgeSize: 'smaller',
-      iconSize: 20,
-      fontWeight: globalTokens.font.weight.semibold,
-      fontSize: globalTokens.font.size[100],
-    },
-    size32: {
-      size: 32,
-      badgeSize: 'smaller',
-      iconSize: 20,
-      fontSize: globalTokens.font.size[100],
-    },
-    size36: {
-      size: 36,
-      badgeSize: 'smaller',
-      iconSize: 20,
-    },
-    size40: {
-      size: 40,
-      badgeSize: 'small',
-      iconSize: 20,
-    },
-    size48: {
-      size: 48,
-      badgeSize: 'small',
-      iconSize: 24,
-    },
-    size56: {
-      size: 56,
-      badgeSize: 'medium',
-      iconSize: 28,
-      fontSize: globalTokens.font.size[400],
-      square: {
-        borderRadius: globalTokens.corner.radius.large,
-      },
-    },
-    size64: {
-      size: 64,
-      badgeSize: 'large',
-      iconSize: 32,
-      fontSize: globalTokens.font.size[500],
-      square: {
-        borderRadius: globalTokens.corner.radius.large,
-      },
-    },
-    size72: {
-      size: 72,
-      badgeSize: 'large',
-      iconSize: 32,
-      fontSize: globalTokens.font.size[500],
-      square: {
-        borderRadius: globalTokens.corner.radius.large,
-      },
-    },
-    size96: {
-      size: 96,
-      badgeSize: 'largest',
-      iconSize: 48,
-      fontWeight: globalTokens.font.weight.regular,
-      fontSize: globalTokens.font.size[700],
-      square: {
-        borderRadius: globalTokens.corner.radius.extraLarge,
-      },
-    },
-    size120: {
-      size: 120,
-      badgeSize: 'largest',
-      iconSize: 48,
-      fontWeight: globalTokens.font.weight.regular,
-      fontSize: globalTokens.font.size[900],
-      square: {
-        borderRadius: globalTokens.corner.radius.extraLarge,
-      },
-    },
-    neutral: {
-      backgroundColor: t.colors.neutralBackground6,
-      color: t.colors.neutralForeground3,
-      iconColor: t.colors.neutralForeground3,
-      ringColor: t.colors.transparentStroke,
-    },
-    brand: {
-      backgroundColor: t.colors.brandBackgroundStatic,
-      color: t.colors.neutralForegroundOnBrand,
-      iconColor: t.colors.neutralForegroundOnBrand,
-      ringColor: t.colors.transparentStroke,
-    },
-    darkRed: getColorProps('darkRed', t),
-    cranberry: getColorProps('cranberry', t),
-    red: getColorProps('red', t),
-    pumpkin: getColorProps('pumpkin', t),
-    peach: getColorProps('peach', t),
-    marigold: getColorProps('marigold', t),
-    gold: getColorProps('gold', t),
-    brass: getColorProps('brass', t),
-    brown: getColorProps('brown', t),
-    forest: getColorProps('forest', t),
-    seafoam: getColorProps('seafoam', t),
-    darkGreen: getColorProps('darkGreen', t),
-    lightTeal: getColorProps('lightTeal', t),
-    teal: getColorProps('teal', t),
-    steel: getColorProps('steel', t),
-    blue: getColorProps('blue', t),
-    royalBlue: getColorProps('royalBlue', t),
-    cornflower: getColorProps('cornflower', t),
-    navy: getColorProps('navy', t),
-    lavender: getColorProps('lavender', t),
-    purple: getColorProps('purple', t),
-    grape: getColorProps('grape', t),
-    lilac: getColorProps('lilac', t),
-    pink: getColorProps('pink', t),
-    magenta: getColorProps('magenta', t),
-    plum: getColorProps('plum', t),
-    beige: getColorProps('beige', t),
-    mink: getColorProps('mink', t),
-    platinum: getColorProps('platinum', t),
-    anchor: getColorProps('anchor', t),
-    burgundy: getColorProps('burgundy', t),
-    hotPink: getColorProps('hotPink', t),
-    orchid: getColorProps('orchid', t),
-  } as JSAvatarTokens);
-
-/**
- * A function which returns object of props depending on color and theme.
- * @param color
- * @param theme
- * @returns object of props - backgroundColor, color and ringColor
- */
-function getColorProps(color: string, theme: Theme) {
-  const themeAppearance = theme.host.appearance;
-  switch (themeAppearance) {
-    case 'light':
-    default:
-      return {
-        backgroundColor: globalTokens.color[color].tint40,
-        color: globalTokens.color[color].shade30,
-        iconColor: globalTokens.color[color].shade30,
-        ringColor: globalTokens.color[color].primary,
-      };
-    case 'dark':
-      return {
-        backgroundColor: globalTokens.color[color].shade30,
-        color: globalTokens.color[color].tint40,
-        iconColor: globalTokens.color[color].tint40,
-        ringColor: globalTokens.color[color].tint30,
-      };
-    case 'highContrast':
-      return {
-        backgroundColor: theme.colors.neutralBackground6,
-        color: theme.colors.neutralForeground3,
-        iconColor: theme.colors.neutralForeground3,
-        ringColor: theme.colors.transparentStroke,
-      };
-  }
-}

package/src/JSAvatarTokens.win32.ts

@@ -1,204 +0,0 @@
-import { Theme } from '@fluentui-react-native/framework';
-import { TokenSettings } from '@fluentui-react-native/use-styling';
-import { JSAvatarTokens } from '.';
-import { globalTokens } from '@fluentui-react-native/theme-tokens';
-
-export const defaultJSAvatarTokens: TokenSettings<JSAvatarTokens, Theme> = (t: Theme) =>
-  ({
-    badgeSize: 'smallest',
-    color: t.colors.neutralForeground3,
-    backgroundColor: t.colors.neutralBackground6,
-    avatarOpacity: 1,
-    fontFamily: t.typography.families.primary,
-    fontWeight: globalTokens.font.weight.semibold,
-    fontSize: globalTokens.font.size[200],
-    size: 24,
-    iconSize: 16,
-    iconColor: t.colors.neutralForeground3,
-    ringColor: t.colors.transparentStroke,
-    borderColor: globalTokens.color.white,
-    borderWidth: t.name === 'HighContrast' ? 1 : 0,
-    circular: {
-      borderRadius: globalTokens.corner.radius.circle,
-    },
-    square: {
-      borderRadius: globalTokens.corner.radius.medium,
-    },
-    inactive: {
-      avatarOpacity: 0.8,
-    },
-    size20: {
-      size: 20,
-      badgeSize: 'smallest',
-      iconSize: 16,
-      fontSize: globalTokens.font.size[100],
-      square: {
-        borderRadius: globalTokens.corner.radius.small,
-      },
-    },
-    size24: {
-      size: 24,
-      badgeSize: 'smallest',
-      iconSize: 16,
-      fontSize: globalTokens.font.size[100],
-      square: {
-        borderRadius: globalTokens.corner.radius.small,
-      },
-    },
-    size28: {
-      size: 28,
-      badgeSize: 'smaller',
-      iconSize: 20,
-      fontWeight: globalTokens.font.weight.semibold,
-      fontSize: globalTokens.font.size[100],
-    },
-    size32: {
-      size: 32,
-      badgeSize: 'smaller',
-      iconSize: 20,
-      fontSize: globalTokens.font.size[100],
-    },
-    size36: {
-      size: 36,
-      badgeSize: 'smaller',
-      iconSize: 20,
-    },
-    size40: {
-      size: 40,
-      badgeSize: 'small',
-      iconSize: 20,
-    },
-    size48: {
-      size: 48,
-      badgeSize: 'small',
-      iconSize: 24,
-    },
-    size56: {
-      size: 56,
-      badgeSize: 'medium',
-      iconSize: 28,
-      fontSize: globalTokens.font.size[400],
-      square: {
-        borderRadius: globalTokens.corner.radius.large,
-      },
-    },
-    size64: {
-      size: 64,
-      badgeSize: 'large',
-      iconSize: 32,
-      fontSize: globalTokens.font.size[500],
-      square: {
-        borderRadius: globalTokens.corner.radius.large,
-      },
-    },
-    size72: {
-      size: 72,
-      badgeSize: 'large',
-      iconSize: 32,
-      fontSize: globalTokens.font.size[500],
-      square: {
-        borderRadius: globalTokens.corner.radius.large,
-      },
-    },
-    size96: {
-      size: 96,
-      badgeSize: 'largest',
-      iconSize: 48,
-      fontWeight: globalTokens.font.weight.regular,
-      fontSize: globalTokens.font.size[700],
-      square: {
-        borderRadius: globalTokens.corner.radius.extraLarge,
-      },
-    },
-    size120: {
-      size: 120,
-      badgeSize: 'largest',
-      iconSize: 48,
-      fontWeight: globalTokens.font.weight.regular,
-      fontSize: globalTokens.font.size[900],
-      square: {
-        borderRadius: globalTokens.corner.radius.extraLarge,
-      },
-    },
-    neutral: {
-      backgroundColor: t.colors.neutralBackground6,
-      color: t.colors.neutralForeground3,
-      iconColor: t.colors.neutralForeground3,
-      ringColor: t.colors.transparentStroke,
-    },
-    brand: {
-      backgroundColor: t.colors.brandBackgroundStatic,
-      color: t.colors.neutralForegroundOnBrand,
-      iconColor: t.colors.neutralForegroundOnBrand,
-      ringColor: t.colors.transparentStroke,
-    },
-    darkRed: getColorProps('darkRed', t),
-    cranberry: getColorProps('cranberry', t),
-    red: getColorProps('red', t),
-    pumpkin: getColorProps('pumpkin', t),
-    peach: getColorProps('peach', t),
-    marigold: getColorProps('marigold', t),
-    gold: getColorProps('gold', t),
-    brass: getColorProps('brass', t),
-    brown: getColorProps('brown', t),
-    forest: getColorProps('forest', t),
-    seafoam: getColorProps('seafoam', t),
-    darkGreen: getColorProps('darkGreen', t),
-    lightTeal: getColorProps('lightTeal', t),
-    teal: getColorProps('teal', t),
-    steel: getColorProps('steel', t),
-    blue: getColorProps('blue', t),
-    royalBlue: getColorProps('royalBlue', t),
-    cornflower: getColorProps('cornflower', t),
-    navy: getColorProps('navy', t),
-    lavender: getColorProps('lavender', t),
-    purple: getColorProps('purple', t),
-    grape: getColorProps('grape', t),
-    lilac: getColorProps('lilac', t),
-    pink: getColorProps('pink', t),
-    magenta: getColorProps('magenta', t),
-    plum: getColorProps('plum', t),
-    beige: getColorProps('beige', t),
-    mink: getColorProps('mink', t),
-    platinum: getColorProps('platinum', t),
-    anchor: getColorProps('anchor', t),
-    burgundy: getColorProps('burgundy', t),
-    hotPink: getColorProps('hotPink', t),
-    orchid: getColorProps('orchid', t),
-  } as JSAvatarTokens);
-
-/**
- * A function which returns object of props depending on color and theme.
- * @param color
- * @param theme
- * @returns object of props - backgroundColor, color and ringColor
- */
-function getColorProps(color: string, theme: Theme) {
-  const themeAppearance = theme.name;
-  switch (themeAppearance) {
-    case 'White':
-    case 'Colorful':
-    default:
-      return {
-        backgroundColor: globalTokens.color[color].tint40,
-        color: globalTokens.color[color].shade30,
-        iconColor: globalTokens.color[color].shade30,
-        ringColor: globalTokens.color[color].primary,
-      };
-    case 'DarkGray':
-    case 'Black':
-      return {
-        backgroundColor: globalTokens.color[color].shade30,
-        color: globalTokens.color[color].tint40,
-        iconColor: globalTokens.color[color].tint40,
-        ringColor: globalTokens.color[color].tint30,
-      };
-    case 'HighContrast':
-      return {
-        backgroundColor: theme.colors.neutralBackground6,
-        color: theme.colors.neutralForeground3,
-        iconColor: theme.colors.neutralForeground3,
-        ringColor: theme.colors.transparentStroke,
-      };
-  }
-}

package/src/getHashCode.ts

@@ -1,16 +0,0 @@
-/**
- * A function which returns hash code for the avatar color. Web implementation
- *
- * @param str is idForColor or name
- * @returns hash code of the color
- */
-export const getHashCodeWeb = (str: string): number => {
-  let hashCode = 0;
-  for (let len: number = str.length - 1; len >= 0; len--) {
-    const ch = str.charCodeAt(len);
-    const shift = len % 8;
-    hashCode ^= (ch << shift) + (ch >> (8 - shift)); // eslint-disable-line no-bitwise
-  }
-
-  return hashCode;
-};

package/src/titles.ts

@@ -1,108 +0,0 @@
-export const titles = new Set<string>([
-  'Mr',
-  'Mrs',
-  'Miss',
-  'Ms',
-  'Dr',
-  'Admiral',
-  'Air Comm',
-  'Ambassador',
-  'Baron',
-  'Baroness',
-  'Brig & Mrs',
-  'Brig Gen',
-  'Brigadier',
-  'Brother',
-  'Canon',
-  'Capt',
-  'Chief',
-  'Cllr',
-  'Col',
-  'Commander',
-  'Commander & Mrs',
-  'Consul',
-  'Consul General',
-  'Count',
-  'Countess',
-  'Countess of',
-  'Cpl',
-  'Dame',
-  'Deputy',
-  'Dr & Mrs',
-  'Drs',
-  'Duchess',
-  'Duke',
-  'Earl',
-  'Father',
-  'General',
-  'Gräfin',
-  'HE',
-  'HMA',
-  'Her Grace',
-  'His Excellency',
-  'Jr',
-  'Judge',
-  'Justice',
-  'Lady',
-  'Lic',
-  'Llc',
-  'Lord',
-  'Lord & Lady',
-  'Lt',
-  'Lt Col',
-  'Lt Cpl',
-  'M',
-  'Madam',
-  'Madame',
-  'Major',
-  'Major General',
-  'Marchioness',
-  'Marquis',
-  'Minister',
-  'Mme',
-  'Mr & Dr',
-  'Mr & Mrs',
-  'Mr & Ms',
-  'Prince',
-  'Princess',
-  'Professor',
-  'Prof',
-  'Prof & Dr',
-  'Prof & Mrs',
-  'Prof & Rev',
-  'Prof Dame',
-  'Prof Dr',
-  'Pvt',
-  'Rabbi',
-  'Rear Admiral',
-  'Rev',
-  'Rev & Mrs',
-  'Rev Canon',
-  'Rev Dr',
-  'Senator',
-  'Sgt',
-  'Sheriff',
-  'Sir',
-  'Sir & Lady',
-  'Sister',
-  'Sr',
-  'Sqr. Leader',
-  'The Earl of',
-  'The Hon',
-  'The Hon Dr',
-  'The Hon Lady',
-  'The Hon Lord',
-  'The Hon Mrs',
-  'The Hon Sir',
-  'The Honourable',
-  'The Rt Hon',
-  'The Rt Hon Dr',
-  'The Rt Hon Lord',
-  'The Rt Hon Sir',
-  'The Rt Hon Visc',
-  'Viscount',
-  'van',
-  'I',
-  'II',
-  'III',
-]);

package/src/useAvatar.ts

@@ -1,126 +0,0 @@
-import { JSAvatarProps, AvatarInfo, JSAvatarState, AvatarColors } from './JSAvatar.types';
-import { PresenceBadgeProps } from '@fluentui-react-native/badge';
-import { titles } from './titles';
-import { getHashCodeWeb } from './getHashCode';
-import { createIconProps } from '@fluentui-react-native/interactive-hooks';
-/**
- * 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 {
-    avatarColor,
-    active,
-    accessibilityLabel,
-    accessibilityRole,
-    activeAppearance,
-    badge,
-    idForColor,
-    initials,
-    name,
-    shape,
-    transparentRing,
-    icon,
-    ...rest
-  } = props;
-
-  const showRing = active === 'active' && activeAppearance === 'ring';
-  const showBadge = (!active || active === 'unset') && !!badge && !!badge.status;
-  const accessibilityText = `${name || ''}${showBadge ? `, ${badge.status}` : ''}`;
-
-  const badgeProps: PresenceBadgeProps = {
-    size: 'small',
-    ...badge,
-  };
-
-  const state: JSAvatarState = {
-    showRing,
-    transparentRing: !!transparentRing,
-    showBadge,
-  };
-
-  const _initials = initials || getInitials(name);
-  const avatarColorsIdx = getHashCodeWeb(idForColor ?? name ?? '') % AvatarColors.length;
-  const _avatarColor = avatarColor === 'colorful' ? AvatarColors[avatarColorsIdx] : avatarColor;
-
-  const iconProps = createIconProps(icon);
-
-  return {
-    props: {
-      accessible: true,
-      accessibilityLabel: accessibilityLabel || accessibilityText,
-      accessibilityRole: accessibilityRole ?? 'image',
-      avatarColor: _avatarColor,
-      shape: shape || 'circular',
-      ...rest,
-      active,
-      activeAppearance,
-      badge: badgeProps,
-      initials: _initials,
-      icon: iconProps,
-    },
-    state: {
-      ...state,
-    },
-  };
-};
-
-/**
- * A function which takes a name and returns initials
- *
- * @param name
- * @returns initials. First letter of the word if only one word was provided.
- * First letters of the first and last words if more words were provided.
- * Words in braces, titles, special characters, parantheses and dashes should be ignored.
- */
-export const getInitials = (name: string): string => {
-  if (!name) {
-    return '';
-  }
-  const ARABIC_ASIAN_REGEXP = new RegExp(
-    '[\u0600-\u06FF\u0750-\u077F\u08A0-\u08FF\u1100-\u11FF\u3130-\u318F\uA960-\uA97F\uAC00-\uD7AF\uD7B0-\uD7FF\u3040-\u309F\u30A0-\u30FF\u3400-\u4DBF\u4E00-\u9FFF\uF900-\uFAFF\uD840-\uD869]',
-    'g',
-  );
-  const words = removeRedundantCharacters(name);
-  const wordsLength = words.length;
-  const lastWordIdx = wordsLength - 1;
-  const firstLetter = words[0].charAt(0).toUpperCase();
-  const lastLetter = wordsLength > 1 ? words[lastWordIdx].charAt(0).toUpperCase() : '';
-  const initials = `${firstLetter}${ARABIC_ASIAN_REGEXP.test(name) ? '' : lastLetter}`;
-  return initials;
-};
-
-/**
- * A function which takes a name and returns array of valid words
- *
- * @param name
- * @returns array of words without phone numbers and special characters.
- */
-export const removeRedundantCharacters = (name: string): string[] => {
-  if (!name) {
-    return [];
-  }
-  const WORDS_IN_BRACES_REGEXP = new RegExp('[(\\[\\{][^\\)\\]\\}]*[\\)\\]\\}]', 'g');
-  const PHONE_NUMBER_REGEXP = new RegExp('(\\+|(\\d|\\s))', 'g');
-  const SPECIAL_CHARACTERS_REGEXP = new RegExp('[!"#\'$%&*+,-./:;>=<?@^_`|~¡¢£¤¥¦§¨©ª«¬®ˉ°±²¼½¾¿×÷]', 'g');
-  const words = name
-    .replace(WORDS_IN_BRACES_REGEXP, '')
-    .replace(PHONE_NUMBER_REGEXP, ' ')
-    .replace(SPECIAL_CHARACTERS_REGEXP, '')
-    .trim()
-    .split(' ');
-  return removeTitlesFromName(words);
-};
-
-/**
- * A function which verifies whether words array contains title
- *
- * @param words array of words in name
- * @returns array of words without titles
- */
-export const removeTitlesFromName = (words: string[]): string[] => {
-  return words.filter((word) => !titles.has(word));
-};