@fluentui-react-native/experimental-avatar 0.14.41 → 0.14.44
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.json +52 -1
- package/CHANGELOG.md +27 -2
- package/FRNAvatar.podspec +0 -2
- package/MIGRATION.md +1 -2
- package/SPEC.md +1 -11
- package/lib/JSAvatar.d.ts +2 -2
- package/lib/JSAvatar.d.ts.map +1 -1
- package/lib/JSAvatar.js +17 -8
- package/lib/JSAvatar.js.map +1 -1
- package/lib/JSAvatar.styling.d.ts.map +1 -1
- package/lib/JSAvatar.styling.js +69 -25
- package/lib/JSAvatar.styling.js.map +1 -1
- package/lib/JSAvatar.types.d.ts +43 -22
- package/lib/JSAvatar.types.d.ts.map +1 -1
- package/lib/JSAvatarTokens.d.ts.map +1 -1
- package/lib/JSAvatarTokens.js +0 -2
- package/lib/JSAvatarTokens.js.map +1 -1
- package/lib/JSAvatarTokens.win32.d.ts.map +1 -1
- package/lib/JSAvatarTokens.win32.js +0 -2
- package/lib/JSAvatarTokens.win32.js.map +1 -1
- package/lib/useAvatar.d.ts +3 -5
- package/lib/useAvatar.d.ts.map +1 -1
- package/lib/useAvatar.js +27 -17
- package/lib/useAvatar.js.map +1 -1
- package/lib-commonjs/JSAvatar.d.ts +2 -2
- package/lib-commonjs/JSAvatar.d.ts.map +1 -1
- package/lib-commonjs/JSAvatar.js +16 -7
- package/lib-commonjs/JSAvatar.js.map +1 -1
- package/lib-commonjs/JSAvatar.styling.d.ts.map +1 -1
- package/lib-commonjs/JSAvatar.styling.js +69 -25
- package/lib-commonjs/JSAvatar.styling.js.map +1 -1
- package/lib-commonjs/JSAvatar.types.d.ts +43 -22
- package/lib-commonjs/JSAvatar.types.d.ts.map +1 -1
- package/lib-commonjs/JSAvatarTokens.d.ts.map +1 -1
- package/lib-commonjs/JSAvatarTokens.js +0 -2
- package/lib-commonjs/JSAvatarTokens.js.map +1 -1
- package/lib-commonjs/JSAvatarTokens.win32.d.ts.map +1 -1
- package/lib-commonjs/JSAvatarTokens.win32.js +0 -2
- package/lib-commonjs/JSAvatarTokens.win32.js.map +1 -1
- package/lib-commonjs/useAvatar.d.ts +3 -5
- package/lib-commonjs/useAvatar.d.ts.map +1 -1
- package/lib-commonjs/useAvatar.js +29 -19
- package/lib-commonjs/useAvatar.js.map +1 -1
- package/package.json +2 -2
- package/src/JSAvatar.styling.ts +74 -32
- package/src/JSAvatar.tsx +40 -24
- package/src/JSAvatar.types.ts +51 -24
- package/src/JSAvatarTokens.ts +0 -2
- package/src/JSAvatarTokens.win32.ts +0 -2
- package/src/__tests__/JSAvatar.test.jsx +48 -77
- package/src/__tests__/__snapshots__/JSAvatar.test.jsx.snap +52 -55
- package/src/useAvatar.ts +32 -16
- package/lib/JSAvatar.helpers.d.ts +0 -7
- package/lib/JSAvatar.helpers.d.ts.map +0 -1
- package/lib/JSAvatar.helpers.js +0 -28
- package/lib/JSAvatar.helpers.js.map +0 -1
- package/lib/utils/getInitials.d.ts +0 -15
- package/lib/utils/getInitials.d.ts.map +0 -1
- package/lib/utils/getInitials.js +0 -78
- package/lib/utils/getInitials.js.map +0 -1
- package/lib/utils/getInitials.test.d.ts +0 -2
- package/lib/utils/getInitials.test.d.ts.map +0 -1
- package/lib/utils/getInitials.test.js +0 -116
- package/lib/utils/getInitials.test.js.map +0 -1
- package/lib/utils/index.d.ts +0 -2
- package/lib/utils/index.d.ts.map +0 -1
- package/lib/utils/index.js +0 -2
- package/lib/utils/index.js.map +0 -1
- package/lib-commonjs/JSAvatar.helpers.d.ts +0 -7
- package/lib-commonjs/JSAvatar.helpers.d.ts.map +0 -1
- package/lib-commonjs/JSAvatar.helpers.js +0 -32
- package/lib-commonjs/JSAvatar.helpers.js.map +0 -1
- package/lib-commonjs/utils/getInitials.d.ts +0 -15
- package/lib-commonjs/utils/getInitials.d.ts.map +0 -1
- package/lib-commonjs/utils/getInitials.js +0 -82
- package/lib-commonjs/utils/getInitials.js.map +0 -1
- package/lib-commonjs/utils/getInitials.test.d.ts +0 -2
- package/lib-commonjs/utils/getInitials.test.d.ts.map +0 -1
- package/lib-commonjs/utils/getInitials.test.js +0 -118
- package/lib-commonjs/utils/getInitials.test.js.map +0 -1
- package/lib-commonjs/utils/index.d.ts +0 -2
- package/lib-commonjs/utils/index.d.ts.map +0 -1
- package/lib-commonjs/utils/index.js +0 -6
- package/lib-commonjs/utils/index.js.map +0 -1
- package/src/JSAvatar.helpers.ts +0 -35
- package/src/utils/getInitials.test.ts +0 -154
- package/src/utils/getInitials.ts +0 -92
- package/src/utils/index.ts +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"JSAvatarTokens.js","sourceRoot":"","sources":["../src/JSAvatarTokens.ts"],"names":[],"mappings":";;;AAGA,oEAAmE;AAE5D,IAAM,qBAAqB,GAAyC,UAAC,CAAQ;IAClF,OAAA,CAAC;QACC,
|
|
1
|
+
{"version":3,"file":"JSAvatarTokens.js","sourceRoot":"","sources":["../src/JSAvatarTokens.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"JSAvatarTokens.win32.d.ts","sourceRoot":"","sources":["../src/JSAvatarTokens.win32.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,kCAAkC,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAC;AACnE,OAAO,EAAE,cAAc,EAAE,MAAM,GAAG,CAAC;AAGnC,eAAO,MAAM,qBAAqB,EAAE,aAAa,CAAC,cAAc,EAAE,KAAK,
|
|
1
|
+
{"version":3,"file":"JSAvatarTokens.win32.d.ts","sourceRoot":"","sources":["../src/JSAvatarTokens.win32.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,kCAAkC,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAC;AACnE,OAAO,EAAE,cAAc,EAAE,MAAM,GAAG,CAAC;AAGnC,eAAO,MAAM,qBAAqB,EAAE,aAAa,CAAC,cAAc,EAAE,KAAK,CAkKjD,CAAC"}
|
|
@@ -5,8 +5,6 @@ var theme_tokens_1 = require("@fluentui-react-native/theme-tokens");
|
|
|
5
5
|
var defaultJSAvatarTokens = function (t) {
|
|
6
6
|
return ({
|
|
7
7
|
badgeSize: 'smallest',
|
|
8
|
-
horizontalIconAlignment: 'end',
|
|
9
|
-
verticalIconAlignment: 'end',
|
|
10
8
|
color: t.colors.neutralForeground3,
|
|
11
9
|
backgroundColor: t.colors.neutralBackground6,
|
|
12
10
|
avatarOpacity: 1,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"JSAvatarTokens.win32.js","sourceRoot":"","sources":["../src/JSAvatarTokens.win32.ts"],"names":[],"mappings":";;;AAGA,oEAAmE;AAE5D,IAAM,qBAAqB,GAAyC,UAAC,CAAQ;IAClF,OAAA,CAAC;QACC,SAAS,EAAE,UAAU;QACrB,
|
|
1
|
+
{"version":3,"file":"JSAvatarTokens.win32.js","sourceRoot":"","sources":["../src/JSAvatarTokens.win32.ts"],"names":[],"mappings":"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"}
|
|
@@ -17,14 +17,12 @@ export declare const useAvatar: (props: JSAvatarProps) => AvatarInfo;
|
|
|
17
17
|
*/
|
|
18
18
|
export declare const getInitials: (name: string) => string;
|
|
19
19
|
/**
|
|
20
|
-
* A function which
|
|
20
|
+
* A function which takes a name and returns array of valid words
|
|
21
21
|
*
|
|
22
22
|
* @param name
|
|
23
|
-
* @returns
|
|
24
|
-
* numeric values or the first character is non-alphabetical. In this case avatar should
|
|
25
|
-
* fall back to icon.
|
|
23
|
+
* @returns array of words without phone numbers and special characters.
|
|
26
24
|
*/
|
|
27
|
-
export declare const
|
|
25
|
+
export declare const removeRedundantCharacters: (name: string) => string[];
|
|
28
26
|
/**
|
|
29
27
|
* A function which verifies whether words array contains title
|
|
30
28
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useAvatar.d.ts","sourceRoot":"","sources":["../src/useAvatar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAA+B,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"useAvatar.d.ts","sourceRoot":"","sources":["../src/useAvatar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAA+B,MAAM,kBAAkB,CAAC;AAK1F;;;;;;GAMG;AACH,eAAO,MAAM,SAAS,UAAW,aAAa,KAAG,UAwDhD,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,WAAW,SAAU,MAAM,KAAG,MAe1C,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,yBAAyB,SAAU,MAAM,KAAG,MAAM,EAc9D,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,oBAAoB,UAAW,MAAM,EAAE,KAAG,MAAM,EAE5D,CAAC"}
|
|
@@ -22,10 +22,11 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
22
22
|
return t;
|
|
23
23
|
};
|
|
24
24
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
25
|
-
exports.removeTitlesFromName = exports.
|
|
25
|
+
exports.removeTitlesFromName = exports.removeRedundantCharacters = exports.getInitials = exports.useAvatar = void 0;
|
|
26
26
|
var JSAvatar_types_1 = require("./JSAvatar.types");
|
|
27
27
|
var titles_1 = require("./titles");
|
|
28
28
|
var getHashCode_1 = require("./getHashCode");
|
|
29
|
+
var interactive_hooks_1 = require("@fluentui-react-native/interactive-hooks");
|
|
29
30
|
/**
|
|
30
31
|
* Re-usable hook for FURN Avatar.
|
|
31
32
|
* This hook configures Avatar props and state for FURN Avatar.
|
|
@@ -35,22 +36,22 @@ var getHashCode_1 = require("./getHashCode");
|
|
|
35
36
|
*/
|
|
36
37
|
var useAvatar = function (props) {
|
|
37
38
|
var _a;
|
|
38
|
-
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,
|
|
39
|
+
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"]);
|
|
39
40
|
var showRing = active === 'active' && activeAppearance === 'ring';
|
|
40
|
-
var transparentRing = !!(ring === null || ring === void 0 ? void 0 : ring.transparent);
|
|
41
41
|
var showBadge = (!active || active === 'unset') && !!badge && !!badge.status;
|
|
42
42
|
var accessibilityText = "".concat(name || '').concat(showBadge ? ", ".concat(badge.status) : '');
|
|
43
43
|
var badgeProps = __assign({ size: 'small' }, badge);
|
|
44
44
|
var state = {
|
|
45
45
|
showRing: showRing,
|
|
46
|
-
transparentRing: transparentRing,
|
|
46
|
+
transparentRing: !!transparentRing,
|
|
47
47
|
showBadge: showBadge,
|
|
48
48
|
};
|
|
49
49
|
var _initials = initials || (0, exports.getInitials)(name);
|
|
50
50
|
var avatarColorsIdx = (0, getHashCode_1.getHashCodeWeb)((_a = idForColor !== null && idForColor !== void 0 ? idForColor : name) !== null && _a !== void 0 ? _a : '') % JSAvatar_types_1.AvatarColors.length;
|
|
51
51
|
var _avatarColor = avatarColor === 'colorful' ? JSAvatar_types_1.AvatarColors[avatarColorsIdx] : avatarColor;
|
|
52
|
+
var iconProps = (0, interactive_hooks_1.createIconProps)(icon);
|
|
52
53
|
return {
|
|
53
|
-
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 }),
|
|
54
|
+
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 }),
|
|
54
55
|
state: __assign({}, state),
|
|
55
56
|
};
|
|
56
57
|
};
|
|
@@ -64,32 +65,41 @@ exports.useAvatar = useAvatar;
|
|
|
64
65
|
* Words in braces, titles, special characters, parantheses and dashes should be ignored.
|
|
65
66
|
*/
|
|
66
67
|
var getInitials = function (name) {
|
|
67
|
-
if (!name
|
|
68
|
+
if (!name) {
|
|
68
69
|
return '';
|
|
69
70
|
}
|
|
70
|
-
var
|
|
71
|
-
var
|
|
72
|
-
var words = name.replace(wordsInBracesRegExp, ' ').replace(nonWordRegExp, ' ').trim().split(' ');
|
|
73
|
-
words = (0, exports.removeTitlesFromName)(words);
|
|
71
|
+
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');
|
|
72
|
+
var words = (0, exports.removeRedundantCharacters)(name);
|
|
74
73
|
var wordsLength = words.length;
|
|
75
74
|
var lastWordIdx = wordsLength - 1;
|
|
76
|
-
var
|
|
75
|
+
var firstLetter = words[0].charAt(0).toUpperCase();
|
|
76
|
+
var lastLetter = wordsLength > 1 ? words[lastWordIdx].charAt(0).toUpperCase() : '';
|
|
77
|
+
var initials = "".concat(firstLetter).concat(ARABIC_ASIAN_REGEXP.test(name) ? '' : lastLetter);
|
|
77
78
|
return initials;
|
|
78
79
|
};
|
|
79
80
|
exports.getInitials = getInitials;
|
|
80
81
|
/**
|
|
81
|
-
* A function which
|
|
82
|
+
* A function which takes a name and returns array of valid words
|
|
82
83
|
*
|
|
83
84
|
* @param name
|
|
84
|
-
* @returns
|
|
85
|
-
* numeric values or the first character is non-alphabetical. In this case avatar should
|
|
86
|
-
* fall back to icon.
|
|
85
|
+
* @returns array of words without phone numbers and special characters.
|
|
87
86
|
*/
|
|
88
|
-
var
|
|
89
|
-
|
|
90
|
-
|
|
87
|
+
var removeRedundantCharacters = function (name) {
|
|
88
|
+
if (!name) {
|
|
89
|
+
return [];
|
|
90
|
+
}
|
|
91
|
+
var WORDS_IN_BRACES_REGEXP = new RegExp('[(\\[\\{][^\\)\\]\\}]*[\\)\\]\\}]', 'g');
|
|
92
|
+
var PHONE_NUMBER_REGEXP = new RegExp('(\\+|(\\d|\\s))', 'g');
|
|
93
|
+
var SPECIAL_CHARACTERS_REGEXP = new RegExp('[!"#\'$%&*+,-./:;>=<?@^_`|~¡¢£¤¥¦§¨©ª«¬®ˉ°±²¼½¾¿×÷]', 'g');
|
|
94
|
+
var words = name
|
|
95
|
+
.replace(WORDS_IN_BRACES_REGEXP, '')
|
|
96
|
+
.replace(PHONE_NUMBER_REGEXP, ' ')
|
|
97
|
+
.replace(SPECIAL_CHARACTERS_REGEXP, '')
|
|
98
|
+
.trim()
|
|
99
|
+
.split(' ');
|
|
100
|
+
return (0, exports.removeTitlesFromName)(words);
|
|
91
101
|
};
|
|
92
|
-
exports.
|
|
102
|
+
exports.removeRedundantCharacters = removeRedundantCharacters;
|
|
93
103
|
/**
|
|
94
104
|
* A function which verifies whether words array contains title
|
|
95
105
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useAvatar.js","sourceRoot":"","sources":["../src/useAvatar.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,mDAA0F;AAE1F,mCAAkC;AAClC,6CAA+C;AAC/C;;;;;;GAMG;AACI,IAAM,SAAS,GAAG,UAAC,KAAoB;;IAE1C,IAAA,WAAW,
|
|
1
|
+
{"version":3,"file":"useAvatar.js","sourceRoot":"","sources":["../src/useAvatar.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui-react-native/experimental-avatar",
|
|
3
|
-
"version": "0.14.
|
|
3
|
+
"version": "0.14.44",
|
|
4
4
|
"description": "A cross-platform Avatar component using the Fluent Design System. Currently only implemented on iOS",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "Microsoft <fluentuinativeowners@microsoft.com>",
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
},
|
|
27
27
|
"dependencies": {
|
|
28
28
|
"@fluentui-react-native/adapters": "^0.8.5",
|
|
29
|
-
"@fluentui-react-native/badge": "^0.0.
|
|
29
|
+
"@fluentui-react-native/badge": "^0.0.43",
|
|
30
30
|
"@fluentui-react-native/component-cache": "^1.3.2",
|
|
31
31
|
"@fluentui-react-native/framework": "0.7.30",
|
|
32
32
|
"@fluentui-react-native/icon": "^0.12.1",
|
package/src/JSAvatar.styling.ts
CHANGED
|
@@ -12,15 +12,8 @@ import {
|
|
|
12
12
|
} from './JSAvatar.types';
|
|
13
13
|
import { Theme, UseStylingOptions, buildProps } from '@fluentui-react-native/framework';
|
|
14
14
|
import { defaultJSAvatarTokens } from './JSAvatarTokens';
|
|
15
|
-
import { ViewStyle } from 'react-native';
|
|
16
|
-
import { getRingConfig } from './JSAvatar.helpers';
|
|
17
15
|
import { borderStyles, fontStyles } from '@fluentui-react-native/tokens';
|
|
18
|
-
|
|
19
|
-
const nameMap: { [key: string]: string } = {
|
|
20
|
-
start: 'flex-start',
|
|
21
|
-
center: 'center',
|
|
22
|
-
end: 'flex-end',
|
|
23
|
-
};
|
|
16
|
+
import { globalTokens } from '@fluentui-react-native/theme-tokens';
|
|
24
17
|
|
|
25
18
|
export const avatarStates: (keyof JSAvatarTokens)[] = [
|
|
26
19
|
...AvatarColors,
|
|
@@ -30,13 +23,20 @@ export const avatarStates: (keyof JSAvatarTokens)[] = [
|
|
|
30
23
|
'circular',
|
|
31
24
|
'square',
|
|
32
25
|
'inactive',
|
|
33
|
-
'ringColor',
|
|
34
26
|
'iconColor',
|
|
35
27
|
'iconSize',
|
|
36
28
|
'size',
|
|
37
29
|
];
|
|
38
30
|
|
|
39
|
-
const tokensThatAreAlsoProps: (keyof AvatarConfigurableProps)[] = [
|
|
31
|
+
const tokensThatAreAlsoProps: (keyof AvatarConfigurableProps)[] = [
|
|
32
|
+
'active',
|
|
33
|
+
'avatarColor',
|
|
34
|
+
'initialsColor',
|
|
35
|
+
'ringBackgroundColor',
|
|
36
|
+
'ringColor',
|
|
37
|
+
'ringInnerGap',
|
|
38
|
+
'ringThickness',
|
|
39
|
+
];
|
|
40
40
|
|
|
41
41
|
export const stylingSettings: UseStylingOptions<JSAvatarProps, AvatarSlotProps, JSAvatarTokens> = {
|
|
42
42
|
tokens: [defaultJSAvatarTokens, JSAvatarName],
|
|
@@ -45,21 +45,21 @@ export const stylingSettings: UseStylingOptions<JSAvatarProps, AvatarSlotProps,
|
|
|
45
45
|
slotProps: {
|
|
46
46
|
root: buildProps(
|
|
47
47
|
(tokens: JSAvatarTokens) => {
|
|
48
|
-
const {
|
|
48
|
+
const { size, active, avatarOpacity } = tokens;
|
|
49
|
+
const ringConfig = getRingConfig(tokens);
|
|
50
|
+
const avatarSize = active === 'active' ? ringConfig.size : size;
|
|
51
|
+
|
|
49
52
|
return {
|
|
50
53
|
style: {
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
alignItems: nameMap[verticalIconAlignment || 'end'] as ViewStyle['alignItems'],
|
|
56
|
-
horizontalIconAlignment,
|
|
57
|
-
verticalIconAlignment,
|
|
54
|
+
alignItems: 'center',
|
|
55
|
+
justifyContent: 'center',
|
|
56
|
+
width: avatarSize,
|
|
57
|
+
height: avatarSize,
|
|
58
58
|
opacity: avatarOpacity,
|
|
59
59
|
},
|
|
60
60
|
};
|
|
61
61
|
},
|
|
62
|
-
['
|
|
62
|
+
['avatarOpacity', 'size'],
|
|
63
63
|
),
|
|
64
64
|
initials: buildProps(
|
|
65
65
|
(tokens: JSAvatarTokens, theme: Theme) => {
|
|
@@ -80,27 +80,29 @@ export const stylingSettings: UseStylingOptions<JSAvatarProps, AvatarSlotProps,
|
|
|
80
80
|
!avatarColor || AvatarColors.includes(avatarColor as AvatarNamedColor) || ColorSchemes.includes(avatarColor as AvatarColorSchemes)
|
|
81
81
|
? backgroundColor
|
|
82
82
|
: avatarColor;
|
|
83
|
+
const ringConfig = getRingConfig(tokens);
|
|
83
84
|
|
|
84
85
|
return {
|
|
85
86
|
style: {
|
|
86
87
|
...borderStyles.from(tokens, theme),
|
|
87
88
|
width: size,
|
|
88
89
|
height: size,
|
|
89
|
-
flexGrow: 1,
|
|
90
|
-
alignSelf: 'stretch',
|
|
91
90
|
justifyContent: 'center',
|
|
92
91
|
alignItems: 'center',
|
|
93
92
|
backgroundColor: _avatarColor,
|
|
94
93
|
borderWidth: tokens.borderWidth,
|
|
95
94
|
borderColor: tokens.borderColor,
|
|
95
|
+
marginTop: ringConfig.ringThickness,
|
|
96
|
+
marginLeft: ringConfig.ringThickness,
|
|
96
97
|
},
|
|
97
98
|
};
|
|
98
99
|
},
|
|
99
|
-
['avatarColor', 'backgroundColor', 'size', 'borderColor', 'borderWidth', ...borderStyles.keys],
|
|
100
|
+
['avatarColor', 'backgroundColor', 'size', 'borderColor', 'borderWidth', 'ringThickness', ...borderStyles.keys],
|
|
100
101
|
),
|
|
101
102
|
image: buildProps(
|
|
102
103
|
(tokens: JSAvatarTokens) => {
|
|
103
104
|
const { borderRadius, size, borderWidth, borderColor } = tokens;
|
|
105
|
+
const ringConfig = getRingConfig(tokens);
|
|
104
106
|
return {
|
|
105
107
|
style: {
|
|
106
108
|
borderRadius: borderRadius,
|
|
@@ -108,19 +110,21 @@ export const stylingSettings: UseStylingOptions<JSAvatarProps, AvatarSlotProps,
|
|
|
108
110
|
height: size,
|
|
109
111
|
borderWidth: borderWidth,
|
|
110
112
|
borderColor: borderColor,
|
|
113
|
+
marginTop: ringConfig.ringThickness,
|
|
114
|
+
marginLeft: ringConfig.ringThickness,
|
|
111
115
|
},
|
|
112
116
|
};
|
|
113
117
|
},
|
|
114
|
-
['borderRadius', 'size', 'borderColor', 'borderWidth'],
|
|
118
|
+
['borderRadius', 'size', 'borderColor', 'borderWidth', 'ringThickness'],
|
|
115
119
|
),
|
|
116
120
|
icon: buildProps(
|
|
117
121
|
(tokens: JSAvatarTokens) => {
|
|
118
122
|
return {
|
|
119
123
|
style: {
|
|
120
124
|
position: 'absolute',
|
|
121
|
-
fontSize: tokens.iconSize,
|
|
125
|
+
fontSize: tokens.iconSize || tokens.fontSize,
|
|
122
126
|
},
|
|
123
|
-
color: tokens.color,
|
|
127
|
+
color: tokens.iconColor || tokens.color,
|
|
124
128
|
width: tokens.iconSize,
|
|
125
129
|
height: tokens.iconSize,
|
|
126
130
|
};
|
|
@@ -129,22 +133,21 @@ export const stylingSettings: UseStylingOptions<JSAvatarProps, AvatarSlotProps,
|
|
|
129
133
|
),
|
|
130
134
|
ring: buildProps(
|
|
131
135
|
(tokens: JSAvatarTokens, theme: Theme) => {
|
|
132
|
-
const
|
|
136
|
+
const { ringColor, ringBackgroundColor } = tokens;
|
|
137
|
+
const ringConfig = getRingConfig(tokens);
|
|
133
138
|
return {
|
|
134
139
|
style: {
|
|
135
140
|
borderStyle: 'solid',
|
|
136
141
|
width: ringConfig.size,
|
|
137
142
|
height: ringConfig.size,
|
|
138
|
-
position: 'absolute',
|
|
139
|
-
top: -ringConfig.stroke * 2,
|
|
140
|
-
left: -ringConfig.stroke * 2,
|
|
141
143
|
...borderStyles.from(tokens, theme),
|
|
142
|
-
borderWidth: ringConfig.
|
|
143
|
-
|
|
144
|
+
borderWidth: ringConfig.ringThickness,
|
|
145
|
+
backgroundColor: ringBackgroundColor || 'transparent',
|
|
146
|
+
borderColor: ringColor,
|
|
144
147
|
},
|
|
145
148
|
};
|
|
146
149
|
},
|
|
147
|
-
['size', 'ringColor', ...borderStyles.keys],
|
|
150
|
+
['size', 'ringColor', 'ringBackgroundColor', 'ringThickness', ...borderStyles.keys],
|
|
148
151
|
),
|
|
149
152
|
badge: buildProps(
|
|
150
153
|
(tokens: JSAvatarTokens) => {
|
|
@@ -157,3 +160,42 @@ export const stylingSettings: UseStylingOptions<JSAvatarProps, AvatarSlotProps,
|
|
|
157
160
|
),
|
|
158
161
|
},
|
|
159
162
|
};
|
|
163
|
+
|
|
164
|
+
function getRingConfig(tokens: JSAvatarTokens): any {
|
|
165
|
+
const { size, ringThickness } = tokens;
|
|
166
|
+
const SMALL_SIZE = 48;
|
|
167
|
+
const MEDIUM_SIZE = 71;
|
|
168
|
+
|
|
169
|
+
const strokeSize = {
|
|
170
|
+
small: globalTokens.stroke.width.thick,
|
|
171
|
+
medium: globalTokens.stroke.width.thicker,
|
|
172
|
+
large: globalTokens.stroke.width.thickest,
|
|
173
|
+
};
|
|
174
|
+
if (ringThickness) {
|
|
175
|
+
return {
|
|
176
|
+
size: size + ringThickness * 4,
|
|
177
|
+
ringThickness,
|
|
178
|
+
innerStroke: ringThickness,
|
|
179
|
+
};
|
|
180
|
+
} else {
|
|
181
|
+
if (size <= SMALL_SIZE) {
|
|
182
|
+
return {
|
|
183
|
+
size: size + strokeSize.small * 4,
|
|
184
|
+
ringThickness: strokeSize.small,
|
|
185
|
+
innerStroke: strokeSize.small,
|
|
186
|
+
};
|
|
187
|
+
}
|
|
188
|
+
if (size <= MEDIUM_SIZE) {
|
|
189
|
+
return {
|
|
190
|
+
size: size + strokeSize.medium * 4,
|
|
191
|
+
ringThickness: strokeSize.medium,
|
|
192
|
+
innerStroke: strokeSize.medium,
|
|
193
|
+
};
|
|
194
|
+
}
|
|
195
|
+
return {
|
|
196
|
+
size: size + strokeSize.large * 4,
|
|
197
|
+
ringThickness: strokeSize.large,
|
|
198
|
+
innerStroke: strokeSize.large,
|
|
199
|
+
};
|
|
200
|
+
}
|
|
201
|
+
}
|
package/src/JSAvatar.tsx
CHANGED
|
@@ -1,13 +1,14 @@
|
|
|
1
1
|
/** @jsx withSlots */
|
|
2
2
|
import { Image, View, Text, Platform } from 'react-native';
|
|
3
|
-
import {
|
|
3
|
+
import { Fragment } from 'react';
|
|
4
|
+
import { JSAvatarProps, JSAvatarType, JSAvatarName, JSAvatarState, AvatarSlotProps } from './JSAvatar.types';
|
|
4
5
|
import { stylingSettings } from './JSAvatar.styling';
|
|
5
|
-
import { compose, UseSlots, mergeProps, withSlots } from '@fluentui-react-native/framework';
|
|
6
|
+
import { compose, UseSlots, mergeProps, withSlots, Slots } from '@fluentui-react-native/framework';
|
|
6
7
|
import { useAvatar } from './useAvatar';
|
|
7
8
|
import { PresenceBadge } from '@fluentui-react-native/badge';
|
|
8
9
|
import { Icon } from '@fluentui-react-native/icon';
|
|
9
|
-
import {
|
|
10
|
-
import {
|
|
10
|
+
import { Svg, Path, SvgProps } from 'react-native-svg';
|
|
11
|
+
import { SvgIconProps } from '@fluentui-react-native/icon';
|
|
11
12
|
|
|
12
13
|
/**
|
|
13
14
|
* A function which determines if a set of styles should be applied to the compoent given the current state and props of the avatar.
|
|
@@ -45,36 +46,51 @@ export const JSAvatar = compose<JSAvatarType>({
|
|
|
45
46
|
},
|
|
46
47
|
useRender: (userProps: JSAvatarProps, useSlots: UseSlots<JSAvatarType>) => {
|
|
47
48
|
const avatar = useAvatar(userProps);
|
|
48
|
-
const iconProps = createIconProps(userProps.icon);
|
|
49
49
|
const Slots = useSlots(avatar.props, (layer) => avatarLookup(layer, avatar.state, avatar.props));
|
|
50
50
|
|
|
51
51
|
return (final: JSAvatarProps) => {
|
|
52
|
-
const { activeAppearance, icon, initials, imageUrl, badge, ...mergedProps } = mergeProps(avatar.props, final);
|
|
53
52
|
const { showRing, transparentRing, showBadge } = avatar.state;
|
|
53
|
+
const { badge, ...mergedProps } = avatar.props;
|
|
54
54
|
const svgIconsEnabled = ['ios', 'macos', 'win32', 'android'].includes(Platform.OS as string);
|
|
55
|
-
const
|
|
56
|
-
|
|
57
|
-
</svg>
|
|
58
|
-
`;
|
|
55
|
+
const RingComponent = showRing && !transparentRing ? Slots.ring : Fragment;
|
|
56
|
+
|
|
59
57
|
return (
|
|
60
58
|
<Slots.root {...mergedProps}>
|
|
61
|
-
{
|
|
62
|
-
<Slots.image source={{ uri: imageUrl }} />
|
|
63
|
-
) : (
|
|
64
|
-
<Slots.initialsBackground accessible={false}>
|
|
65
|
-
{initials ? (
|
|
66
|
-
<Slots.initials accessible={false}>{initials}</Slots.initials>
|
|
67
|
-
) : userProps.icon ? (
|
|
68
|
-
<Slots.icon {...iconProps} accessible={false} />
|
|
69
|
-
) : (
|
|
70
|
-
<SvgXml xml={fallBackIconXml} />
|
|
71
|
-
)}
|
|
72
|
-
</Slots.initialsBackground>
|
|
73
|
-
)}
|
|
74
|
-
{showRing && !transparentRing && <Slots.ring />}
|
|
59
|
+
<RingComponent>{renderAvatar(final, avatar.props, Slots, svgIconsEnabled)}</RingComponent>
|
|
75
60
|
{svgIconsEnabled && showBadge && <Slots.badge {...badge} />}
|
|
76
61
|
</Slots.root>
|
|
77
62
|
);
|
|
78
63
|
};
|
|
79
64
|
},
|
|
80
65
|
});
|
|
66
|
+
|
|
67
|
+
function renderAvatar(final: JSAvatarProps, avatarProps: JSAvatarProps, Slots: Slots<AvatarSlotProps>, svgIconsEnabled?: boolean) {
|
|
68
|
+
const { icon, initials, imageUrl } = mergeProps(avatarProps, final);
|
|
69
|
+
return imageUrl ? (
|
|
70
|
+
<Slots.image source={{ uri: imageUrl }} />
|
|
71
|
+
) : (
|
|
72
|
+
<Slots.initialsBackground accessible={false}>
|
|
73
|
+
{initials ? (
|
|
74
|
+
<Slots.initials accessible={false}>{initials}</Slots.initials>
|
|
75
|
+
) : avatarProps.icon ? (
|
|
76
|
+
<Slots.icon {...icon} accessible={false} />
|
|
77
|
+
) : (
|
|
78
|
+
svgIconsEnabled && <Slots.icon svgSource={svgProps} accessible={false} />
|
|
79
|
+
)}
|
|
80
|
+
</Slots.initialsBackground>
|
|
81
|
+
);
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
const fallbackIconSvg: React.FunctionComponent<SvgProps> = () => {
|
|
85
|
+
return (
|
|
86
|
+
<Svg viewBox="0 0 14 16">
|
|
87
|
+
<Path
|
|
88
|
+
fill="currentColor"
|
|
89
|
+
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"
|
|
90
|
+
></Path>
|
|
91
|
+
</Svg>
|
|
92
|
+
);
|
|
93
|
+
};
|
|
94
|
+
const svgProps: SvgIconProps = {
|
|
95
|
+
src: fallbackIconSvg,
|
|
96
|
+
};
|
package/src/JSAvatar.types.ts
CHANGED
|
@@ -69,15 +69,17 @@ export type AvatarShape = 'circular' | 'square';
|
|
|
69
69
|
export type AvatarActive = 'active' | 'inactive' | 'unset';
|
|
70
70
|
export type AvatarActiveAppearance = 'ring';
|
|
71
71
|
export type AvatarColor = AvatarColorSchemes | AvatarNamedColor | ColorValue;
|
|
72
|
-
export type IconAlignment = 'start' | 'center' | 'end';
|
|
73
|
-
|
|
74
|
-
export interface RingConfig {
|
|
75
|
-
transparent?: boolean;
|
|
76
|
-
ringThickness?: number;
|
|
77
|
-
innerGap?: number;
|
|
78
|
-
}
|
|
79
72
|
|
|
80
73
|
export interface AvatarConfigurableProps {
|
|
74
|
+
/**
|
|
75
|
+
* Optional activity indicator
|
|
76
|
+
* * active: the avatar will be decorated according to activeAppearance
|
|
77
|
+
* * inactive: the avatar will be reduced in size and partially transparent
|
|
78
|
+
* * unset: normal display
|
|
79
|
+
*
|
|
80
|
+
* @defaultvalue unset
|
|
81
|
+
*/
|
|
82
|
+
active?: AvatarActive;
|
|
81
83
|
/**
|
|
82
84
|
* The color when displaying either an icon or initials.
|
|
83
85
|
* * neutral (default): gray
|
|
@@ -89,7 +91,15 @@ export interface AvatarConfigurableProps {
|
|
|
89
91
|
*/
|
|
90
92
|
avatarColor?: AvatarColor;
|
|
91
93
|
initialsColor?: ColorValue;
|
|
92
|
-
|
|
94
|
+
|
|
95
|
+
/**
|
|
96
|
+
* Ring props
|
|
97
|
+
*/
|
|
98
|
+
ringInnerGap?: number;
|
|
99
|
+
ringBackgroundColor?: ColorValue;
|
|
100
|
+
ringColor?: ColorValue;
|
|
101
|
+
ringThickness?: number;
|
|
102
|
+
transparentRing?: boolean;
|
|
93
103
|
|
|
94
104
|
/**
|
|
95
105
|
* Size of the avatar in pixels.
|
|
@@ -103,16 +113,6 @@ export interface AvatarConfigurableProps {
|
|
|
103
113
|
}
|
|
104
114
|
|
|
105
115
|
export interface JSAvatarProps extends IViewProps, AvatarConfigurableProps {
|
|
106
|
-
/**
|
|
107
|
-
* Optional activity indicator
|
|
108
|
-
* * active: the avatar will be decorated according to activeAppearance
|
|
109
|
-
* * inactive: the avatar will be reduced in size and partially transparent
|
|
110
|
-
* * unset: normal display
|
|
111
|
-
*
|
|
112
|
-
* @defaultvalue unset
|
|
113
|
-
*/
|
|
114
|
-
active?: AvatarActive;
|
|
115
|
-
|
|
116
116
|
/**
|
|
117
117
|
* The appearance when `active="active"`
|
|
118
118
|
*
|
|
@@ -170,16 +170,40 @@ export interface JSAvatarProps extends IViewProps, AvatarConfigurableProps {
|
|
|
170
170
|
}
|
|
171
171
|
|
|
172
172
|
export interface JSAvatarTokens extends IBackgroundColorTokens, IForegroundColorTokens, AvatarConfigurableProps, IBorderTokens, FontTokens {
|
|
173
|
+
/**
|
|
174
|
+
* Avatar opacity which is changed depending on `active` prop.
|
|
175
|
+
*/
|
|
176
|
+
avatarOpacity?: number;
|
|
177
|
+
|
|
178
|
+
/**
|
|
179
|
+
* The size of presence badge.
|
|
180
|
+
*/
|
|
181
|
+
badgeSize?: BadgeSize;
|
|
182
|
+
|
|
183
|
+
/**
|
|
184
|
+
* The icon color.
|
|
185
|
+
*/
|
|
173
186
|
iconColor?: ColorValue;
|
|
187
|
+
|
|
188
|
+
/**
|
|
189
|
+
* The size of the icon.
|
|
190
|
+
*/
|
|
174
191
|
iconSize?: number;
|
|
175
|
-
|
|
176
|
-
|
|
192
|
+
|
|
193
|
+
/**
|
|
194
|
+
* Avatar shapes:
|
|
195
|
+
*/
|
|
177
196
|
circular?: JSAvatarTokens;
|
|
178
|
-
ringColor?: ColorValue;
|
|
179
|
-
ringBackgroundColor?: ColorValue;
|
|
180
197
|
square?: JSAvatarTokens;
|
|
198
|
+
|
|
199
|
+
/**
|
|
200
|
+
* Token for inactive value of `active` prop
|
|
201
|
+
*/
|
|
181
202
|
inactive?: JSAvatarTokens;
|
|
182
|
-
|
|
203
|
+
|
|
204
|
+
/**
|
|
205
|
+
* Avatar sizes:
|
|
206
|
+
*/
|
|
183
207
|
size20?: JSAvatarTokens;
|
|
184
208
|
size24?: JSAvatarTokens;
|
|
185
209
|
size28?: JSAvatarTokens;
|
|
@@ -192,7 +216,10 @@ export interface JSAvatarTokens extends IBackgroundColorTokens, IForegroundColor
|
|
|
192
216
|
size72?: JSAvatarTokens;
|
|
193
217
|
size96?: JSAvatarTokens;
|
|
194
218
|
size120?: JSAvatarTokens;
|
|
195
|
-
|
|
219
|
+
|
|
220
|
+
/**
|
|
221
|
+
* Avatar colors:
|
|
222
|
+
*/
|
|
196
223
|
neutral?: JSAvatarTokens;
|
|
197
224
|
brand?: JSAvatarTokens;
|
|
198
225
|
darkRed?: JSAvatarTokens;
|