@fluentui-react-native/experimental-avatar 0.14.45 → 0.15.2

package/lib-commonjs/useAvatar.js

@@ -1,113 +0,0 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.removeTitlesFromName = exports.removeRedundantCharacters = exports.getInitials = exports.useAvatar = void 0;
-var JSAvatar_types_1 = require("./JSAvatar.types");
-var titles_1 = require("./titles");
-var getHashCode_1 = require("./getHashCode");
-var interactive_hooks_1 = require("@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
- */
-var useAvatar = function (props) {
-    var _a;
-    var avatarColor = props.avatarColor, active = props.active, accessibilityLabel = props.accessibilityLabel, accessibilityRole = props.accessibilityRole, activeAppearance = props.activeAppearance, badge = props.badge, idForColor = props.idForColor, initials = props.initials, name = props.name, shape = props.shape, transparentRing = props.transparentRing, icon = props.icon, rest = __rest(props, ["avatarColor", "active", "accessibilityLabel", "accessibilityRole", "activeAppearance", "badge", "idForColor", "initials", "name", "shape", "transparentRing", "icon"]);
-    var showRing = active === 'active' && activeAppearance === 'ring';
-    var showBadge = (!active || active === 'unset') && !!badge && !!badge.status;
-    var accessibilityText = "".concat(name || '').concat(showBadge ? ", ".concat(badge.status) : '');
-    var badgeProps = __assign({ size: 'small' }, badge);
-    var state = {
-        showRing: showRing,
-        transparentRing: !!transparentRing,
-        showBadge: showBadge,
-    };
-    var _initials = initials || (0, exports.getInitials)(name);
-    var avatarColorsIdx = (0, getHashCode_1.getHashCodeWeb)((_a = idForColor !== null && idForColor !== void 0 ? idForColor : name) !== null && _a !== void 0 ? _a : '') % JSAvatar_types_1.AvatarColors.length;
-    var _avatarColor = avatarColor === 'colorful' ? JSAvatar_types_1.AvatarColors[avatarColorsIdx] : avatarColor;
-    var iconProps = (0, interactive_hooks_1.createIconProps)(icon);
-    return {
-        props: __assign(__assign({ accessible: true, accessibilityLabel: accessibilityLabel || accessibilityText, accessibilityRole: accessibilityRole !== null && accessibilityRole !== void 0 ? accessibilityRole : 'image', avatarColor: _avatarColor, shape: shape || 'circular' }, rest), { active: active, activeAppearance: activeAppearance, badge: badgeProps, initials: _initials, icon: iconProps }),
-        state: __assign({}, state),
-    };
-};
-exports.useAvatar = useAvatar;
-/**
- * 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.
- */
-var getInitials = function (name) {
-    if (!name) {
-        return '';
-    }
-    var 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');
-    var words = (0, exports.removeRedundantCharacters)(name);
-    var wordsLength = words.length;
-    var lastWordIdx = wordsLength - 1;
-    var firstLetter = words[0].charAt(0).toUpperCase();
-    var lastLetter = wordsLength > 1 ? words[lastWordIdx].charAt(0).toUpperCase() : '';
-    var initials = "".concat(firstLetter).concat(ARABIC_ASIAN_REGEXP.test(name) ? '' : lastLetter);
-    return initials;
-};
-exports.getInitials = getInitials;
-/**
- * A function which takes a name and returns array of valid words
- *
- * @param name
- * @returns array of words without phone numbers and special characters.
- */
-var removeRedundantCharacters = function (name) {
-    if (!name) {
-        return [];
-    }
-    var WORDS_IN_BRACES_REGEXP = new RegExp('[(\\[\\{][^\\)\\]\\}]*[\\)\\]\\}]', 'g');
-    var PHONE_NUMBER_REGEXP = new RegExp('(\\+|(\\d|\\s))', 'g');
-    var SPECIAL_CHARACTERS_REGEXP = new RegExp('[!"#\'$%&*+,-./:;>=<?@^_`|~¡¢£¤¥¦§¨©ª«¬®ˉ°±²¼½¾¿×÷]', 'g');
-    var words = name
-        .replace(WORDS_IN_BRACES_REGEXP, '')
-        .replace(PHONE_NUMBER_REGEXP, ' ')
-        .replace(SPECIAL_CHARACTERS_REGEXP, '')
-        .trim()
-        .split(' ');
-    return (0, exports.removeTitlesFromName)(words);
-};
-exports.removeRedundantCharacters = removeRedundantCharacters;
-/**
- * A function which verifies whether words array contains title
- *
- * @param words array of words in name
- * @returns array of words without titles
- */
-var removeTitlesFromName = function (words) {
-    return words.filter(function (word) { return !titles_1.titles.has(word); });
-};
-exports.removeTitlesFromName = removeTitlesFromName;
-//# sourceMappingURL=useAvatar.js.map

package/lib-commonjs/useAvatar.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useAvatar.js","sourceRoot":"","sources":["../src/useAvatar.ts"],"names":[],"mappings":"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"}

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,
-};