@fluentui-react-native/experimental-avatar 0.13.10 → 0.14.0
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 +16 -1
- package/CHANGELOG.md +10 -2
- package/lib/JSAvatar.d.ts.map +1 -1
- package/lib/JSAvatar.helpers.d.ts +2 -2
- package/lib/JSAvatar.helpers.d.ts.map +1 -1
- package/lib/JSAvatar.helpers.js +24 -17
- package/lib/JSAvatar.helpers.js.map +1 -1
- package/lib/JSAvatar.js +7 -3
- package/lib/JSAvatar.js.map +1 -1
- package/lib/JSAvatar.styling.d.ts.map +1 -1
- package/lib/JSAvatar.styling.js +10 -19
- package/lib/JSAvatar.styling.js.map +1 -1
- package/lib/JSAvatar.types.d.ts +5 -3
- package/lib/JSAvatar.types.d.ts.map +1 -1
- package/lib/JSAvatarTokens.d.ts.map +1 -1
- package/lib/JSAvatarTokens.js +4 -0
- package/lib/JSAvatarTokens.js.map +1 -1
- package/lib/useAvatar.d.ts.map +1 -1
- package/lib/useAvatar.js +3 -3
- package/lib/useAvatar.js.map +1 -1
- package/lib-commonjs/JSAvatar.d.ts.map +1 -1
- package/lib-commonjs/JSAvatar.helpers.d.ts +2 -2
- package/lib-commonjs/JSAvatar.helpers.d.ts.map +1 -1
- package/lib-commonjs/JSAvatar.helpers.js +26 -19
- package/lib-commonjs/JSAvatar.helpers.js.map +1 -1
- package/lib-commonjs/JSAvatar.js +7 -3
- package/lib-commonjs/JSAvatar.js.map +1 -1
- package/lib-commonjs/JSAvatar.styling.d.ts.map +1 -1
- package/lib-commonjs/JSAvatar.styling.js +9 -18
- package/lib-commonjs/JSAvatar.styling.js.map +1 -1
- package/lib-commonjs/JSAvatar.types.d.ts +5 -3
- package/lib-commonjs/JSAvatar.types.d.ts.map +1 -1
- package/lib-commonjs/JSAvatarTokens.d.ts.map +1 -1
- package/lib-commonjs/JSAvatarTokens.js +4 -0
- package/lib-commonjs/JSAvatarTokens.js.map +1 -1
- package/lib-commonjs/useAvatar.d.ts.map +1 -1
- package/lib-commonjs/useAvatar.js +3 -3
- package/lib-commonjs/useAvatar.js.map +1 -1
- package/package.json +1 -1
- package/src/JSAvatar.helpers.ts +25 -18
- package/src/JSAvatar.styling.ts +18 -29
- package/src/JSAvatar.tsx +9 -3
- package/src/JSAvatar.types.ts +5 -4
- package/src/JSAvatarTokens.ts +4 -0
- package/src/useAvatar.ts +4 -2
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,22 @@
|
|
|
2
2
|
"name": "@fluentui-react-native/experimental-avatar",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Tue, 11 Jan 2022 12:26:53 GMT",
|
|
6
|
+
"tag": "@fluentui-react-native/experimental-avatar_v0.14.0",
|
|
7
|
+
"version": "0.14.0",
|
|
8
|
+
"comments": {
|
|
9
|
+
"minor": [
|
|
10
|
+
{
|
|
11
|
+
"author": "vkozlova@microsoft.com",
|
|
12
|
+
"package": "@fluentui-react-native/experimental-avatar",
|
|
13
|
+
"commit": "c64035399b0c64acffaa962c045aa00a3918c6cb",
|
|
14
|
+
"comment": "added active and activeAppearance props"
|
|
15
|
+
}
|
|
16
|
+
]
|
|
17
|
+
}
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
"date": "Thu, 06 Jan 2022 23:14:38 GMT",
|
|
6
21
|
"tag": "@fluentui-react-native/experimental-avatar_v0.13.10",
|
|
7
22
|
"version": "0.13.10",
|
|
8
23
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,20 @@
|
|
|
1
1
|
# Change Log - @fluentui-react-native/experimental-avatar
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Tue, 11 Jan 2022 12:26:53 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## 0.14.0
|
|
8
|
+
|
|
9
|
+
Tue, 11 Jan 2022 12:26:53 GMT
|
|
10
|
+
|
|
11
|
+
### Minor changes
|
|
12
|
+
|
|
13
|
+
- added active and activeAppearance props (vkozlova@microsoft.com)
|
|
14
|
+
|
|
7
15
|
## 0.13.10
|
|
8
16
|
|
|
9
|
-
Thu, 06 Jan 2022 23:
|
|
17
|
+
Thu, 06 Jan 2022 23:14:38 GMT
|
|
10
18
|
|
|
11
19
|
### Patches
|
|
12
20
|
|
package/lib/JSAvatar.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"JSAvatar.d.ts","sourceRoot":"","sources":["../src/JSAvatar.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAA8B,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAK5F;;;;;;;GAOG;AACH,eAAO,MAAM,YAAY,UAAW,MAAM,SAAS,aAAa,aAAa,aAAa,KAAG,
|
|
1
|
+
{"version":3,"file":"JSAvatar.d.ts","sourceRoot":"","sources":["../src/JSAvatar.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAA8B,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAK5F;;;;;;;GAOG;AACH,eAAO,MAAM,YAAY,UAAW,MAAM,SAAS,aAAa,aAAa,aAAa,KAAG,OAQ5F,CAAC;AAEF,eAAO,MAAM,QAAQ,8KAoCnB,CAAC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { AvatarSize, AvatarColor, AvatarPresence, JSAvatarTokens
|
|
1
|
+
import { AvatarSize, AvatarColor, AvatarPresence, JSAvatarTokens } from './JSAvatar.types';
|
|
2
2
|
import { ImageURISource } from 'react-native';
|
|
3
3
|
export declare function getPresenceIconSource(presence: AvatarPresence, isOutOfOffice: boolean): ImageURISource;
|
|
4
4
|
export declare type AvatarSizeConfig = {
|
|
@@ -13,5 +13,5 @@ export declare function getSizeConfig(size: AvatarSize): AvatarSizeConfig;
|
|
|
13
13
|
*/
|
|
14
14
|
export declare function convertCoinColorFluent(coinColor: AvatarColor): string;
|
|
15
15
|
export declare function calculateEffectiveSizes(tokens: JSAvatarTokens): AvatarSizeConfig;
|
|
16
|
-
export declare function
|
|
16
|
+
export declare function getRingConfig(size: number): any;
|
|
17
17
|
//# sourceMappingURL=JSAvatar.helpers.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"JSAvatar.helpers.d.ts","sourceRoot":"","sources":["../src/JSAvatar.helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,cAAc,EAAE,cAAc,EAAE,
|
|
1
|
+
{"version":3,"file":"JSAvatar.helpers.d.ts","sourceRoot":"","sources":["../src/JSAvatar.helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC3F,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAgC9C,wBAAgB,qBAAqB,CAAC,QAAQ,EAAE,cAAc,EAAE,aAAa,EAAE,OAAO,GAAG,cAAc,CAEtG;AAED,oBAAY,gBAAgB,GAAG;IAC7B,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,eAAe,EAAE,MAAM,CAAC;IACxB,YAAY,EAAE,MAAM,CAAC;CACtB,CAAC;AAcF,wBAAgB,aAAa,CAAC,IAAI,EAAE,UAAU,GAAG,gBAAgB,CAEhE;AAyBD;;GAEG;AACH,wBAAgB,sBAAsB,CAAC,SAAS,EAAE,WAAW,GAAG,MAAM,CAErE;AAED,wBAAgB,uBAAuB,CAAC,MAAM,EAAE,cAAc,GAAG,gBAAgB,CAoBhF;AAED,wBAAgB,aAAa,CAAC,IAAI,EAAE,MAAM,GAAG,GAAG,CAoB/C"}
|
package/lib/JSAvatar.helpers.js
CHANGED
|
@@ -20,8 +20,12 @@ var presenceIconCache = {
|
|
|
20
20
|
uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAANlBMVEUAAADpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvsgIdoAAAAEXRSTlMA8eLUEQj6s2sheXrlyrJqHBqb3nMAAAB/SURBVCjPhZFRDsQgCEQFEdS223L/yy7JummtGN/nvASUCSvoFGSIclIXpwragC3deYn6IJZ/fqF24NXmHPri+E2rOlCDQTAKIBNZHbKJjyfEBHoCTbAn2ATMRPRHzZfPn+t/cH4SIw3rY2p17H2+l0VRRtr8ag3KgswomcKCL1NmGBp9lqsZAAAAAElFTkSuQmCC',
|
|
21
21
|
},
|
|
22
22
|
};
|
|
23
|
-
// TODO: Need icons for the OOF statuses
|
|
24
23
|
var presenceOOFIconCache = presenceIconCache;
|
|
24
|
+
var sizeAdjustment = {
|
|
25
|
+
small: 8,
|
|
26
|
+
medium: 12,
|
|
27
|
+
large: 16,
|
|
28
|
+
};
|
|
25
29
|
export function getPresenceIconSource(presence, isOutOfOffice) {
|
|
26
30
|
return isOutOfOffice ? presenceOOFIconCache[presence] : presenceIconCache[presence];
|
|
27
31
|
}
|
|
@@ -82,22 +86,25 @@ export function calculateEffectiveSizes(tokens) {
|
|
|
82
86
|
};
|
|
83
87
|
}
|
|
84
88
|
}
|
|
85
|
-
export function
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
default:
|
|
100
|
-
return thickness < 0 ? 4 : thickness;
|
|
89
|
+
export function getRingConfig(size) {
|
|
90
|
+
if (size <= 48) {
|
|
91
|
+
return {
|
|
92
|
+
size: size + sizeAdjustment.small,
|
|
93
|
+
stroke: globalTokens.stroke.width.thick,
|
|
94
|
+
innerStroke: globalTokens.stroke.width.thick,
|
|
95
|
+
};
|
|
96
|
+
}
|
|
97
|
+
if (size <= 71) {
|
|
98
|
+
return {
|
|
99
|
+
size: size + sizeAdjustment.medium,
|
|
100
|
+
stroke: globalTokens.stroke.width.thicker,
|
|
101
|
+
innerStroke: globalTokens.stroke.width.thicker,
|
|
102
|
+
};
|
|
101
103
|
}
|
|
104
|
+
return {
|
|
105
|
+
size: size + sizeAdjustment.large,
|
|
106
|
+
stroke: globalTokens.stroke.width.thickest,
|
|
107
|
+
innerStroke: globalTokens.stroke.width.thickest,
|
|
108
|
+
};
|
|
102
109
|
}
|
|
103
110
|
//# sourceMappingURL=JSAvatar.helpers.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"JSAvatar.helpers.js","sourceRoot":"","sources":["../src/JSAvatar.helpers.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAE,MAAM,qCAAqC,CAAC;AAEnE,IAAM,iBAAiB,GAAgD;IACrE,IAAI,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE;IACjB,OAAO,EAAE;QACP,GAAG,EAAE,wXAAwX;KAC9X;IACD,MAAM,EAAE;QACN,GAAG,EAAE,gfAAgf;KACtf;IACD,IAAI,EAAE;QACJ,GAAG,EAAE,4YAA4Y;KAClZ;IACD,GAAG,EAAE;QACH,GAAG,EAAE,4aAA4a;KAClb;IACD,OAAO,EAAE;QACP,GAAG,EAAE,wlBAAwlB;KAC9lB;IACD,IAAI,EAAE;QACJ,GAAG,EAAE,4YAA4Y;KAClZ;CACF,CAAC;AAEF,
|
|
1
|
+
{"version":3,"file":"JSAvatar.helpers.js","sourceRoot":"","sources":["../src/JSAvatar.helpers.ts"],"names":[],"mappings":"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"}
|
package/lib/JSAvatar.js
CHANGED
|
@@ -35,7 +35,11 @@ import { useAvatar } from './useAvatar';
|
|
|
35
35
|
* @returns Whether the styles that are assigned to the layer should be applied to the avatar
|
|
36
36
|
*/
|
|
37
37
|
export var avatarLookup = function (layer, state, userProps) {
|
|
38
|
-
return state[layer] ||
|
|
38
|
+
return (state[layer] ||
|
|
39
|
+
userProps[layer] ||
|
|
40
|
+
layer === userProps['shape'] ||
|
|
41
|
+
(!userProps['shape'] && layer === 'circular') ||
|
|
42
|
+
(userProps.active === 'inactive' && layer === 'inactive'));
|
|
39
43
|
};
|
|
40
44
|
export var JSAvatar = compose(__assign(__assign({ displayName: JSAvatarName }, stylingSettings), { slots: {
|
|
41
45
|
root: View,
|
|
@@ -49,13 +53,13 @@ export var JSAvatar = compose(__assign(__assign({ displayName: JSAvatarName }, s
|
|
|
49
53
|
var avatar = useAvatar(userProps);
|
|
50
54
|
var Slots = useSlots(userProps, function (layer) { return avatarLookup(layer, avatar.state, userProps); });
|
|
51
55
|
return function (final) {
|
|
52
|
-
var _a = mergeProps(avatar.props, final), children = _a.children, accessibilityLabel = _a.accessibilityLabel, mergedProps = __rest(_a, ["children", "accessibilityLabel"]);
|
|
56
|
+
var _a = mergeProps(avatar.props, final), children = _a.children, accessibilityLabel = _a.accessibilityLabel, activeAppearance = _a.activeAppearance, mergedProps = __rest(_a, ["children", "accessibilityLabel", "activeAppearance"]);
|
|
53
57
|
var _b = avatar.state, personaPhotoSource = _b.personaPhotoSource, iconSource = _b.iconSource, showRing = _b.showRing, transparentRing = _b.transparentRing;
|
|
54
58
|
return (withSlots(Slots.root, __assign({}, mergedProps),
|
|
55
59
|
personaPhotoSource ? (withSlots(Slots.photo, { accessibilityLabel: accessibilityLabel, source: personaPhotoSource })) : (withSlots(Slots.initialsBackground, null,
|
|
56
60
|
withSlots(Slots.initials, null, children))),
|
|
57
61
|
showRing && !transparentRing && withSlots(Slots.ring, null),
|
|
58
|
-
|
|
62
|
+
activeAppearance === 'glow' && withSlots(Slots.glow, null),
|
|
59
63
|
!!iconSource && !!iconSource.uri && withSlots(Slots.icon, { source: iconSource })));
|
|
60
64
|
};
|
|
61
65
|
} }));
|
package/lib/JSAvatar.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"JSAvatar.js","sourceRoot":"","sources":["../src/JSAvatar.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,qBAAqB;AACrB,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACjD,OAAO,EAA+B,YAAY,EAAiB,MAAM,kBAAkB,CAAC;AAC5F,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,OAAO,EAAY,UAAU,EAAE,SAAS,EAAE,MAAM,kCAAkC,CAAC;AAC5F,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC;;;;;;;GAOG;AACH,MAAM,CAAC,IAAM,YAAY,GAAG,UAAC,KAAa,EAAE,KAAoB,EAAE,SAAwB;IACxF,OAAO,KAAK,CAAC,KAAK,CAAC,
|
|
1
|
+
{"version":3,"file":"JSAvatar.js","sourceRoot":"","sources":["../src/JSAvatar.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,qBAAqB;AACrB,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACjD,OAAO,EAA+B,YAAY,EAAiB,MAAM,kBAAkB,CAAC;AAC5F,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,OAAO,EAAY,UAAU,EAAE,SAAS,EAAE,MAAM,kCAAkC,CAAC;AAC5F,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC;;;;;;;GAOG;AACH,MAAM,CAAC,IAAM,YAAY,GAAG,UAAC,KAAa,EAAE,KAAoB,EAAE,SAAwB;IACxF,OAAO,CACL,KAAK,CAAC,KAAK,CAAC;QACZ,SAAS,CAAC,KAAK,CAAC;QAChB,KAAK,KAAK,SAAS,CAAC,OAAO,CAAC;QAC5B,CAAC,CAAC,SAAS,CAAC,OAAO,CAAC,IAAI,KAAK,KAAK,UAAU,CAAC;QAC7C,CAAC,SAAS,CAAC,MAAM,KAAK,UAAU,IAAI,KAAK,KAAK,UAAU,CAAC,CAC1D,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,QAAQ,GAAG,OAAO,qBAC7B,WAAW,EAAE,YAAY,IACtB,eAAe,KAClB,KAAK,EAAE;QACL,IAAI,EAAE,IAAI;QACV,KAAK,EAAE,KAAK;QACZ,QAAQ,EAAE,IAAI;QACd,kBAAkB,EAAE,IAAI;QACxB,IAAI,EAAE,KAAK;QACX,IAAI,EAAE,IAAI;QACV,IAAI,EAAE,IAAI;KACX,EACD,MAAM,EAAE,UAAC,SAAwB,EAAE,QAAgC;QACjE,IAAM,MAAM,GAAG,SAAS,CAAC,SAAS,CAAC,CAAC;QACpC,IAAM,KAAK,GAAG,QAAQ,CAAC,SAAS,EAAE,UAAC,KAAK,IAAK,OAAA,YAAY,CAAC,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,SAAS,CAAC,EAA5C,CAA4C,CAAC,CAAC;QAE3F,OAAO,UAAC,KAAoB;YAC1B,IAAM,KAAqE,UAAU,CAAC,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,EAAlG,QAAQ,cAAA,EAAE,kBAAkB,wBAAA,EAAE,gBAAgB,sBAAA,EAAK,WAAW,cAAhE,sDAAkE,CAAkC,CAAC;YACrG,IAAA,KAAgE,MAAM,CAAC,KAAK,EAA1E,kBAAkB,wBAAA,EAAE,UAAU,gBAAA,EAAE,QAAQ,cAAA,EAAE,eAAe,qBAAiB,CAAC;YAEnF,OAAO,CACL,UAAC,KAAK,CAAC,IAAI,eAAK,WAAW;gBACxB,kBAAkB,CAAC,CAAC,CAAC,CACpB,UAAC,KAAK,CAAC,KAAK,IAAC,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,EAAE,kBAAkB,GAAI,CACpF,CAAC,CAAC,CAAC,CACF,UAAC,KAAK,CAAC,kBAAkB;oBACvB,UAAC,KAAK,CAAC,QAAQ,QAAE,QAAQ,CAAkB,CAClB,CAC5B;gBACA,QAAQ,IAAI,CAAC,eAAe,IAAI,UAAC,KAAK,CAAC,IAAI,OAAG;gBAC9C,gBAAgB,KAAK,MAAM,IAAI,UAAC,KAAK,CAAC,IAAI,OAAG;gBAC7C,CAAC,CAAC,UAAU,IAAI,CAAC,CAAC,UAAU,CAAC,GAAG,IAAI,UAAC,KAAK,CAAC,IAAI,IAAC,MAAM,EAAE,UAAU,GAAI,CAC5D,CACd,CAAC;QACJ,CAAC,CAAC;IACJ,CAAC,IACD,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"JSAvatar.styling.d.ts","sourceRoot":"","sources":["../src/JSAvatar.styling.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgB,cAAc,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAChG,OAAO,EAAS,iBAAiB,EAAc,MAAM,kCAAkC,CAAC;AAYxF,eAAO,MAAM,YAAY,EAAE,CAAC,MAAM,cAAc,CAAC,
|
|
1
|
+
{"version":3,"file":"JSAvatar.styling.d.ts","sourceRoot":"","sources":["../src/JSAvatar.styling.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgB,cAAc,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAChG,OAAO,EAAS,iBAAiB,EAAc,MAAM,kCAAkC,CAAC;AAYxF,eAAO,MAAM,YAAY,EAAE,CAAC,MAAM,cAAc,CAAC,EAAuC,CAAC;AAEzF,eAAO,MAAM,eAAe,EAAE,iBAAiB,CAAC,aAAa,EAAE,eAAe,EAAE,cAAc,CAwI7F,CAAC"}
|
package/lib/JSAvatar.styling.js
CHANGED
|
@@ -21,14 +21,14 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
|
21
21
|
import { JSAvatarName } from './JSAvatar.types';
|
|
22
22
|
import { buildProps } from '@fluentui-react-native/framework';
|
|
23
23
|
import { defaultJSAvatarTokens } from './JSAvatarTokens';
|
|
24
|
-
import { calculateEffectiveSizes, convertCoinColorFluent,
|
|
24
|
+
import { calculateEffectiveSizes, convertCoinColorFluent, getRingConfig } from './JSAvatar.helpers';
|
|
25
25
|
import { borderStyles } from '@fluentui-react-native/tokens';
|
|
26
26
|
var nameMap = {
|
|
27
27
|
start: 'flex-start',
|
|
28
28
|
center: 'center',
|
|
29
29
|
end: 'flex-end',
|
|
30
30
|
};
|
|
31
|
-
export var avatarStates = ['circular', 'square'];
|
|
31
|
+
export var avatarStates = ['circular', 'square', 'inactive'];
|
|
32
32
|
export var stylingSettings = {
|
|
33
33
|
tokens: [defaultJSAvatarTokens, JSAvatarName],
|
|
34
34
|
states: avatarStates,
|
|
@@ -45,9 +45,10 @@ export var stylingSettings = {
|
|
|
45
45
|
alignItems: nameMap[verticalIconAlignment || 'end'],
|
|
46
46
|
horizontalIconAlignment: horizontalIconAlignment,
|
|
47
47
|
verticalIconAlignment: verticalIconAlignment,
|
|
48
|
+
opacity: tokens.avatarOpacity,
|
|
48
49
|
},
|
|
49
50
|
};
|
|
50
|
-
}, ['horizontalIconAlignment', 'verticalIconAlignment']),
|
|
51
|
+
}, ['horizontalIconAlignment', 'verticalIconAlignment', 'avatarOpacity']),
|
|
51
52
|
initials: buildProps(function (tokens) {
|
|
52
53
|
var initialsSize = calculateEffectiveSizes(tokens).initialsSize;
|
|
53
54
|
return {
|
|
@@ -96,28 +97,18 @@ export var stylingSettings = {
|
|
|
96
97
|
}, ['iconSize', 'iconStrokeWidth', 'iconStrokeColor']),
|
|
97
98
|
ring: buildProps(function (tokens, theme) {
|
|
98
99
|
var physicalSize = calculateEffectiveSizes(tokens).physicalSize;
|
|
99
|
-
var
|
|
100
|
-
|
|
101
|
-
return {};
|
|
102
|
-
var innerGap = ring.innerGap != undefined ? getRingThickness(ring.innerGap) : getRingThickness(ring.ringThickness || 'xxlarge');
|
|
103
|
-
var effectiveRingThickness = 2 * getRingThickness(ring.ringThickness || 'xxlarge') + innerGap;
|
|
104
|
-
var effectiveSize = physicalSize + 2 * effectiveRingThickness;
|
|
105
|
-
var ringColor = ring.ringBackgroundColor || theme.colors.personaActivityRing;
|
|
100
|
+
var ringConfig = getRingConfig(physicalSize);
|
|
101
|
+
var ringColor = tokens.ringColor;
|
|
106
102
|
return {
|
|
107
|
-
style: __assign({ borderStyle: 'solid', borderColor: ringColor, borderWidth:
|
|
103
|
+
style: __assign({ borderStyle: 'solid', borderColor: ringColor, borderWidth: ringConfig.stroke, width: ringConfig.size, height: ringConfig.size, position: 'absolute', top: -ringConfig.stroke * 2, left: -ringConfig.stroke * 2 }, borderStyles.from(tokens, theme)),
|
|
108
104
|
};
|
|
109
105
|
}, __spreadArray(['physicalSize', 'ring', 'physicalSize'], borderStyles.keys, true)),
|
|
110
106
|
glow: buildProps(function (tokens, theme) {
|
|
111
107
|
var physicalSize = calculateEffectiveSizes(tokens).physicalSize;
|
|
112
|
-
var
|
|
113
|
-
|
|
114
|
-
return {};
|
|
115
|
-
var innerGap = ring.innerGap != undefined ? getRingThickness(ring.innerGap) : getRingThickness(ring.ringThickness || 'xxlarge');
|
|
116
|
-
var effectiveRingThickness = getRingThickness(ring.ringThickness || 'xxlarge') + innerGap;
|
|
117
|
-
var effectiveSize = physicalSize + 2 * effectiveRingThickness;
|
|
118
|
-
var glowColor = ring.accent ? theme.colors.accentButtonBackground : ring.ringColor || theme.colors.personaActivityGlow;
|
|
108
|
+
var ringConfig = getRingConfig(physicalSize);
|
|
109
|
+
var glowColor = tokens.ringColor;
|
|
119
110
|
return {
|
|
120
|
-
style: __assign({ borderStyle: 'solid', borderColor: glowColor, borderWidth:
|
|
111
|
+
style: __assign({ borderStyle: 'solid', borderColor: glowColor, borderWidth: ringConfig.stroke - ringConfig.innerStroke, width: ringConfig.size, height: ringConfig.size, position: 'absolute', top: -ringConfig.stroke * 2, left: -ringConfig.stroke * 2 }, borderStyles.from(tokens, theme)),
|
|
121
112
|
};
|
|
122
113
|
}, __spreadArray(['physicalSize', 'ring'], borderStyles.keys, true)),
|
|
123
114
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"JSAvatar.styling.js","sourceRoot":"","sources":["../src/JSAvatar.styling.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA,OAAO,EAAE,YAAY,EAAkD,MAAM,kBAAkB,CAAC;AAChG,OAAO,EAA4B,UAAU,EAAE,MAAM,kCAAkC,CAAC;AACxF,OAAO,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AAEzD,OAAO,EAAE,uBAAuB,EAAE,sBAAsB,EAAE,
|
|
1
|
+
{"version":3,"file":"JSAvatar.styling.js","sourceRoot":"","sources":["../src/JSAvatar.styling.ts"],"names":[],"mappings":"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"}
|
package/lib/JSAvatar.types.d.ts
CHANGED
|
@@ -11,14 +11,13 @@ export declare type AvatarActiveAppearance = 'ring' | 'shadow' | 'glow' | 'ring-
|
|
|
11
11
|
*/
|
|
12
12
|
export declare type AvatarColor = 'cornflower' | 'blue' | 'royalBlue' | 'teal' | 'forest' | 'darkGreen' | 'berry' | 'hotPink' | 'grape' | 'purple' | 'pumpkin' | 'red' | 'burgundy' | 'orchid' | 'brass' | 'darkRed' | 'beige' | 'platinum' | 'steel' | 'brown';
|
|
13
13
|
export declare type AvatarPresence = 'none' | 'offline' | 'online' | 'away' | 'dnd' | 'blocked' | 'busy';
|
|
14
|
-
export declare type RingThickness = number | 'xSmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge';
|
|
15
14
|
export interface RingConfig {
|
|
16
15
|
accent?: boolean;
|
|
17
16
|
transparent?: boolean;
|
|
18
17
|
ringColor?: ColorValue;
|
|
19
18
|
ringBackgroundColor?: ColorValue;
|
|
20
|
-
ringThickness?:
|
|
21
|
-
innerGap?:
|
|
19
|
+
ringThickness?: number;
|
|
20
|
+
innerGap?: number;
|
|
22
21
|
}
|
|
23
22
|
export interface AvatarConfigurableProps {
|
|
24
23
|
size?: AvatarSize;
|
|
@@ -56,6 +55,9 @@ export interface JSAvatarTokens extends IBackgroundColorTokens, IForegroundColor
|
|
|
56
55
|
physicalSize?: number;
|
|
57
56
|
circular?: JSAvatarTokens;
|
|
58
57
|
square?: JSAvatarTokens;
|
|
58
|
+
inactive?: JSAvatarTokens;
|
|
59
|
+
avatarOpacity?: number;
|
|
60
|
+
ringColor?: ColorValue;
|
|
59
61
|
}
|
|
60
62
|
export interface JSAvatarState {
|
|
61
63
|
personaPhotoSource: ImageURISource | undefined;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"JSAvatar.types.d.ts","sourceRoot":"","sources":["../src/JSAvatar.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAC;AAClE,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,cAAc,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC5F,OAAO,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAE9G,eAAO,MAAM,YAAY,WAAW,CAAC;AAErC,oBAAY,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAC;AAE3H,oBAAY,WAAW,GAAG,UAAU,GAAG,QAAQ,CAAC;AAChD,oBAAY,YAAY,GAAG,QAAQ,GAAG,UAAU,GAAG,OAAO,CAAC;AAC3D,oBAAY,sBAAsB,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,aAAa,GAAG,WAAW,CAAC;AAE9F;;GAEG;AACH,oBAAY,WAAW,GACnB,YAAY,GACZ,MAAM,GACN,WAAW,GACX,MAAM,GACN,QAAQ,GACR,WAAW,GACX,OAAO,GACP,SAAS,GACT,OAAO,GACP,QAAQ,GACR,SAAS,GACT,KAAK,GACL,UAAU,GACV,QAAQ,GACR,OAAO,GACP,SAAS,GACT,OAAO,GACP,UAAU,GACV,OAAO,GACP,OAAO,CAAC;AAEZ,oBAAY,cAAc,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,KAAK,GAAG,SAAS,GAAG,MAAM,CAAC;AAEjG,
|
|
1
|
+
{"version":3,"file":"JSAvatar.types.d.ts","sourceRoot":"","sources":["../src/JSAvatar.types.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"JSAvatarTokens.d.ts","sourceRoot":"","sources":["../src/JSAvatarTokens.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;AAInC,eAAO,MAAM,qBAAqB,EAAE,aAAa,CAAC,cAAc,EAAE,KAAK,
|
|
1
|
+
{"version":3,"file":"JSAvatarTokens.d.ts","sourceRoot":"","sources":["../src/JSAvatarTokens.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;AAInC,eAAO,MAAM,qBAAqB,EAAE,aAAa,CAAC,cAAc,EAAE,KAAK,CAiBjD,CAAC"}
|
package/lib/JSAvatarTokens.js
CHANGED
|
@@ -7,12 +7,16 @@ export var defaultJSAvatarTokens = function () {
|
|
|
7
7
|
color: 'white',
|
|
8
8
|
iconStrokeColor: 'white',
|
|
9
9
|
backgroundColor: convertCoinColorFluent('cornflower'),
|
|
10
|
+
avatarOpacity: 1,
|
|
10
11
|
circular: {
|
|
11
12
|
borderRadius: globalTokens.corner.radius.circle,
|
|
12
13
|
},
|
|
13
14
|
square: {
|
|
14
15
|
borderRadius: globalTokens.corner.radius.medium,
|
|
15
16
|
},
|
|
17
|
+
inactive: {
|
|
18
|
+
avatarOpacity: 0.8,
|
|
19
|
+
},
|
|
16
20
|
});
|
|
17
21
|
};
|
|
18
22
|
//# sourceMappingURL=JSAvatarTokens.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"JSAvatarTokens.js","sourceRoot":"","sources":["../src/JSAvatarTokens.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,qCAAqC,CAAC;AAEnE,MAAM,CAAC,IAAM,qBAAqB,GAAyC;IACzE,OAAA,CAAC;QACC,uBAAuB,EAAE,KAAK;QAC9B,qBAAqB,EAAE,KAAK;QAC5B,KAAK,EAAE,OAAO;QACd,eAAe,EAAE,OAAO;QACxB,eAAe,EAAE,sBAAsB,CAAC,YAAY,CAAC;QACrD,QAAQ,EAAE;YACR,YAAY,EAAE,YAAY,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM;SAChD;QACD,MAAM,EAAE;YACN,YAAY,EAAE,YAAY,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM;SAChD;KACiB,CAAA;
|
|
1
|
+
{"version":3,"file":"JSAvatarTokens.js","sourceRoot":"","sources":["../src/JSAvatarTokens.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,qCAAqC,CAAC;AAEnE,MAAM,CAAC,IAAM,qBAAqB,GAAyC;IACzE,OAAA,CAAC;QACC,uBAAuB,EAAE,KAAK;QAC9B,qBAAqB,EAAE,KAAK;QAC5B,KAAK,EAAE,OAAO;QACd,eAAe,EAAE,OAAO;QACxB,eAAe,EAAE,sBAAsB,CAAC,YAAY,CAAC;QACrD,aAAa,EAAE,CAAC;QAChB,QAAQ,EAAE;YACR,YAAY,EAAE,YAAY,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM;SAChD;QACD,MAAM,EAAE;YACN,YAAY,EAAE,YAAY,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM;SAChD;QACD,QAAQ,EAAE;YACR,aAAa,EAAE,GAAG;SACnB;KACiB,CAAA;AAhBpB,CAgBoB,CAAC"}
|
package/lib/useAvatar.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useAvatar.d.ts","sourceRoot":"","sources":["../src/useAvatar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAiB,MAAM,kBAAkB,CAAC;AAG5E;;;;;;GAMG;AACH,eAAO,MAAM,SAAS,UAAW,aAAa,KAAG,
|
|
1
|
+
{"version":3,"file":"useAvatar.d.ts","sourceRoot":"","sources":["../src/useAvatar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAiB,MAAM,kBAAkB,CAAC;AAG5E;;;;;;GAMG;AACH,eAAO,MAAM,SAAS,UAAW,aAAa,KAAG,UAkChD,CAAC"}
|
package/lib/useAvatar.js
CHANGED
|
@@ -29,14 +29,14 @@ import { getPresenceIconSource } from './JSAvatar.helpers';
|
|
|
29
29
|
* @returns configured props and state for FURN Avatar
|
|
30
30
|
*/
|
|
31
31
|
export var useAvatar = function (props) {
|
|
32
|
-
var imageUrl = props.imageUrl, imageDescription = props.imageDescription, initials = props.initials, presence = props.presence, isOutOfOffice = props.isOutOfOffice, ring = props.ring, shape = props.shape, rest = __rest(props, ["imageUrl", "imageDescription", "initials", "presence", "isOutOfOffice", "ring", "shape"]);
|
|
32
|
+
var imageUrl = props.imageUrl, imageDescription = props.imageDescription, initials = props.initials, presence = props.presence, isOutOfOffice = props.isOutOfOffice, ring = props.ring, shape = props.shape, active = props.active, activeAppearance = props.activeAppearance, rest = __rest(props, ["imageUrl", "imageDescription", "initials", "presence", "isOutOfOffice", "ring", "shape", "active", "activeAppearance"]);
|
|
33
33
|
var personaPhotoSource = imageUrl === undefined
|
|
34
34
|
? undefined
|
|
35
35
|
: {
|
|
36
36
|
uri: imageUrl,
|
|
37
37
|
};
|
|
38
38
|
var iconSource = presence === undefined ? undefined : getPresenceIconSource(presence, isOutOfOffice || false);
|
|
39
|
-
var showRing =
|
|
39
|
+
var showRing = active === 'active' && activeAppearance === 'ring';
|
|
40
40
|
var transparentRing = !!(ring === null || ring === void 0 ? void 0 : ring.transparent);
|
|
41
41
|
var state = {
|
|
42
42
|
iconSource: iconSource,
|
|
@@ -45,7 +45,7 @@ export var useAvatar = function (props) {
|
|
|
45
45
|
transparentRing: transparentRing,
|
|
46
46
|
};
|
|
47
47
|
return {
|
|
48
|
-
props: __assign({ children: initials, accessibilityLabel: imageDescription, shape: shape || 'circular' }, rest),
|
|
48
|
+
props: __assign(__assign({ children: initials, accessibilityLabel: imageDescription, shape: shape || 'circular' }, rest), { active: active, activeAppearance: activeAppearance }),
|
|
49
49
|
state: __assign({}, state),
|
|
50
50
|
};
|
|
51
51
|
};
|
package/lib/useAvatar.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useAvatar.js","sourceRoot":"","sources":["../src/useAvatar.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AACA,OAAO,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAE3D;;;;;;GAMG;AACH,MAAM,CAAC,IAAM,SAAS,GAAG,UAAC,KAAoB;IACpC,IAAA,QAAQ,
|
|
1
|
+
{"version":3,"file":"useAvatar.js","sourceRoot":"","sources":["../src/useAvatar.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AACA,OAAO,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAE3D;;;;;;GAMG;AACH,MAAM,CAAC,IAAM,SAAS,GAAG,UAAC,KAAoB;IACpC,IAAA,QAAQ,GAA0G,KAAK,SAA/G,EAAE,gBAAgB,GAAwF,KAAK,iBAA7F,EAAE,QAAQ,GAA8E,KAAK,SAAnF,EAAE,QAAQ,GAAoE,KAAK,SAAzE,EAAE,aAAa,GAAqD,KAAK,cAA1D,EAAE,IAAI,GAA+C,KAAK,KAApD,EAAE,KAAK,GAAwC,KAAK,MAA7C,EAAE,MAAM,GAAgC,KAAK,OAArC,EAAE,gBAAgB,GAAc,KAAK,iBAAnB,EAAK,IAAI,UAAK,KAAK,EAAzH,wHAAiH,CAAF,CAAW;IAEhI,IAAM,kBAAkB,GACtB,QAAQ,KAAK,SAAS;QACpB,CAAC,CAAC,SAAS;QACX,CAAC,CAAC;YACE,GAAG,EAAE,QAAQ;SACd,CAAC;IAER,IAAM,UAAU,GAAG,QAAQ,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,qBAAqB,CAAC,QAAQ,EAAE,aAAa,IAAI,KAAK,CAAC,CAAC;IAChH,IAAM,QAAQ,GAAG,MAAM,KAAK,QAAQ,IAAI,gBAAgB,KAAK,MAAM,CAAC;IACpE,IAAM,eAAe,GAAG,CAAC,CAAC,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,WAAW,CAAA,CAAC;IAE5C,IAAM,KAAK,GAAkB;QAC3B,UAAU,YAAA;QACV,kBAAkB,oBAAA;QAClB,QAAQ,UAAA;QACR,eAAe,iBAAA;KAChB,CAAC;IAEF,OAAO;QACL,KAAK,sBACH,QAAQ,EAAE,QAAQ,EAClB,kBAAkB,EAAE,gBAAgB,EACpC,KAAK,EAAE,KAAK,IAAI,UAAU,IACvB,IAAI,KACP,MAAM,QAAA,EACN,gBAAgB,kBAAA,GACjB;QACD,KAAK,eACA,KAAK,CACT;KACF,CAAC;AACJ,CAAC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"JSAvatar.d.ts","sourceRoot":"","sources":["../src/JSAvatar.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAA8B,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAK5F;;;;;;;GAOG;AACH,eAAO,MAAM,YAAY,UAAW,MAAM,SAAS,aAAa,aAAa,aAAa,KAAG,
|
|
1
|
+
{"version":3,"file":"JSAvatar.d.ts","sourceRoot":"","sources":["../src/JSAvatar.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAA8B,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAK5F;;;;;;;GAOG;AACH,eAAO,MAAM,YAAY,UAAW,MAAM,SAAS,aAAa,aAAa,aAAa,KAAG,OAQ5F,CAAC;AAEF,eAAO,MAAM,QAAQ,8KAoCnB,CAAC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { AvatarSize, AvatarColor, AvatarPresence, JSAvatarTokens
|
|
1
|
+
import { AvatarSize, AvatarColor, AvatarPresence, JSAvatarTokens } from './JSAvatar.types';
|
|
2
2
|
import { ImageURISource } from 'react-native';
|
|
3
3
|
export declare function getPresenceIconSource(presence: AvatarPresence, isOutOfOffice: boolean): ImageURISource;
|
|
4
4
|
export declare type AvatarSizeConfig = {
|
|
@@ -13,5 +13,5 @@ export declare function getSizeConfig(size: AvatarSize): AvatarSizeConfig;
|
|
|
13
13
|
*/
|
|
14
14
|
export declare function convertCoinColorFluent(coinColor: AvatarColor): string;
|
|
15
15
|
export declare function calculateEffectiveSizes(tokens: JSAvatarTokens): AvatarSizeConfig;
|
|
16
|
-
export declare function
|
|
16
|
+
export declare function getRingConfig(size: number): any;
|
|
17
17
|
//# sourceMappingURL=JSAvatar.helpers.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"JSAvatar.helpers.d.ts","sourceRoot":"","sources":["../src/JSAvatar.helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,cAAc,EAAE,cAAc,EAAE,
|
|
1
|
+
{"version":3,"file":"JSAvatar.helpers.d.ts","sourceRoot":"","sources":["../src/JSAvatar.helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC3F,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAgC9C,wBAAgB,qBAAqB,CAAC,QAAQ,EAAE,cAAc,EAAE,aAAa,EAAE,OAAO,GAAG,cAAc,CAEtG;AAED,oBAAY,gBAAgB,GAAG;IAC7B,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,eAAe,EAAE,MAAM,CAAC;IACxB,YAAY,EAAE,MAAM,CAAC;CACtB,CAAC;AAcF,wBAAgB,aAAa,CAAC,IAAI,EAAE,UAAU,GAAG,gBAAgB,CAEhE;AAyBD;;GAEG;AACH,wBAAgB,sBAAsB,CAAC,SAAS,EAAE,WAAW,GAAG,MAAM,CAErE;AAED,wBAAgB,uBAAuB,CAAC,MAAM,EAAE,cAAc,GAAG,gBAAgB,CAoBhF;AAED,wBAAgB,aAAa,CAAC,IAAI,EAAE,MAAM,GAAG,GAAG,CAoB/C"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.
|
|
3
|
+
exports.getRingConfig = exports.calculateEffectiveSizes = exports.convertCoinColorFluent = exports.getSizeConfig = exports.getPresenceIconSource = void 0;
|
|
4
4
|
var theme_tokens_1 = require("@fluentui-react-native/theme-tokens");
|
|
5
5
|
var presenceIconCache = {
|
|
6
6
|
none: { uri: '' },
|
|
@@ -23,8 +23,12 @@ var presenceIconCache = {
|
|
|
23
23
|
uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAANlBMVEUAAADpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvsgIdoAAAAEXRSTlMA8eLUEQj6s2sheXrlyrJqHBqb3nMAAAB/SURBVCjPhZFRDsQgCEQFEdS223L/yy7JummtGN/nvASUCSvoFGSIclIXpwragC3deYn6IJZ/fqF24NXmHPri+E2rOlCDQTAKIBNZHbKJjyfEBHoCTbAn2ATMRPRHzZfPn+t/cH4SIw3rY2p17H2+l0VRRtr8ag3KgswomcKCL1NmGBp9lqsZAAAAAElFTkSuQmCC',
|
|
24
24
|
},
|
|
25
25
|
};
|
|
26
|
-
// TODO: Need icons for the OOF statuses
|
|
27
26
|
var presenceOOFIconCache = presenceIconCache;
|
|
27
|
+
var sizeAdjustment = {
|
|
28
|
+
small: 8,
|
|
29
|
+
medium: 12,
|
|
30
|
+
large: 16,
|
|
31
|
+
};
|
|
28
32
|
function getPresenceIconSource(presence, isOutOfOffice) {
|
|
29
33
|
return isOutOfOffice ? presenceOOFIconCache[presence] : presenceIconCache[presence];
|
|
30
34
|
}
|
|
@@ -89,23 +93,26 @@ function calculateEffectiveSizes(tokens) {
|
|
|
89
93
|
}
|
|
90
94
|
}
|
|
91
95
|
exports.calculateEffectiveSizes = calculateEffectiveSizes;
|
|
92
|
-
function
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
default:
|
|
107
|
-
return thickness < 0 ? 4 : thickness;
|
|
96
|
+
function getRingConfig(size) {
|
|
97
|
+
if (size <= 48) {
|
|
98
|
+
return {
|
|
99
|
+
size: size + sizeAdjustment.small,
|
|
100
|
+
stroke: theme_tokens_1.globalTokens.stroke.width.thick,
|
|
101
|
+
innerStroke: theme_tokens_1.globalTokens.stroke.width.thick,
|
|
102
|
+
};
|
|
103
|
+
}
|
|
104
|
+
if (size <= 71) {
|
|
105
|
+
return {
|
|
106
|
+
size: size + sizeAdjustment.medium,
|
|
107
|
+
stroke: theme_tokens_1.globalTokens.stroke.width.thicker,
|
|
108
|
+
innerStroke: theme_tokens_1.globalTokens.stroke.width.thicker,
|
|
109
|
+
};
|
|
108
110
|
}
|
|
111
|
+
return {
|
|
112
|
+
size: size + sizeAdjustment.large,
|
|
113
|
+
stroke: theme_tokens_1.globalTokens.stroke.width.thickest,
|
|
114
|
+
innerStroke: theme_tokens_1.globalTokens.stroke.width.thickest,
|
|
115
|
+
};
|
|
109
116
|
}
|
|
110
|
-
exports.
|
|
117
|
+
exports.getRingConfig = getRingConfig;
|
|
111
118
|
//# sourceMappingURL=JSAvatar.helpers.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"JSAvatar.helpers.js","sourceRoot":"","sources":["../src/JSAvatar.helpers.ts"],"names":[],"mappings":";;;AAEA,oEAAmE;AAEnE,IAAM,iBAAiB,GAAgD;IACrE,IAAI,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE;IACjB,OAAO,EAAE;QACP,GAAG,EAAE,wXAAwX;KAC9X;IACD,MAAM,EAAE;QACN,GAAG,EAAE,gfAAgf;KACtf;IACD,IAAI,EAAE;QACJ,GAAG,EAAE,4YAA4Y;KAClZ;IACD,GAAG,EAAE;QACH,GAAG,EAAE,4aAA4a;KAClb;IACD,OAAO,EAAE;QACP,GAAG,EAAE,wlBAAwlB;KAC9lB;IACD,IAAI,EAAE;QACJ,GAAG,EAAE,4YAA4Y;KAClZ;CACF,CAAC;AAEF,
|
|
1
|
+
{"version":3,"file":"JSAvatar.helpers.js","sourceRoot":"","sources":["../src/JSAvatar.helpers.ts"],"names":[],"mappings":"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"}
|
package/lib-commonjs/JSAvatar.js
CHANGED
|
@@ -38,7 +38,11 @@ var useAvatar_1 = require("./useAvatar");
|
|
|
38
38
|
* @returns Whether the styles that are assigned to the layer should be applied to the avatar
|
|
39
39
|
*/
|
|
40
40
|
var avatarLookup = function (layer, state, userProps) {
|
|
41
|
-
return state[layer] ||
|
|
41
|
+
return (state[layer] ||
|
|
42
|
+
userProps[layer] ||
|
|
43
|
+
layer === userProps['shape'] ||
|
|
44
|
+
(!userProps['shape'] && layer === 'circular') ||
|
|
45
|
+
(userProps.active === 'inactive' && layer === 'inactive'));
|
|
42
46
|
};
|
|
43
47
|
exports.avatarLookup = avatarLookup;
|
|
44
48
|
exports.JSAvatar = (0, framework_1.compose)(__assign(__assign({ displayName: JSAvatar_types_1.JSAvatarName }, JSAvatar_styling_1.stylingSettings), { slots: {
|
|
@@ -53,13 +57,13 @@ exports.JSAvatar = (0, framework_1.compose)(__assign(__assign({ displayName: JSA
|
|
|
53
57
|
var avatar = (0, useAvatar_1.useAvatar)(userProps);
|
|
54
58
|
var Slots = useSlots(userProps, function (layer) { return (0, exports.avatarLookup)(layer, avatar.state, userProps); });
|
|
55
59
|
return function (final) {
|
|
56
|
-
var _a = (0, framework_1.mergeProps)(avatar.props, final), children = _a.children, accessibilityLabel = _a.accessibilityLabel, mergedProps = __rest(_a, ["children", "accessibilityLabel"]);
|
|
60
|
+
var _a = (0, framework_1.mergeProps)(avatar.props, final), children = _a.children, accessibilityLabel = _a.accessibilityLabel, activeAppearance = _a.activeAppearance, mergedProps = __rest(_a, ["children", "accessibilityLabel", "activeAppearance"]);
|
|
57
61
|
var _b = avatar.state, personaPhotoSource = _b.personaPhotoSource, iconSource = _b.iconSource, showRing = _b.showRing, transparentRing = _b.transparentRing;
|
|
58
62
|
return ((0, framework_1.withSlots)(Slots.root, __assign({}, mergedProps),
|
|
59
63
|
personaPhotoSource ? ((0, framework_1.withSlots)(Slots.photo, { accessibilityLabel: accessibilityLabel, source: personaPhotoSource })) : ((0, framework_1.withSlots)(Slots.initialsBackground, null,
|
|
60
64
|
(0, framework_1.withSlots)(Slots.initials, null, children))),
|
|
61
65
|
showRing && !transparentRing && (0, framework_1.withSlots)(Slots.ring, null),
|
|
62
|
-
|
|
66
|
+
activeAppearance === 'glow' && (0, framework_1.withSlots)(Slots.glow, null),
|
|
63
67
|
!!iconSource && !!iconSource.uri && (0, framework_1.withSlots)(Slots.icon, { source: iconSource })));
|
|
64
68
|
};
|
|
65
69
|
} }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"JSAvatar.js","sourceRoot":"","sources":["../src/JSAvatar.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,qBAAqB;AACrB,6CAAiD;AACjD,mDAA4F;AAC5F,uDAAqD;AACrD,8DAA4F;AAC5F,yCAAwC;AAExC;;;;;;;GAOG;AACI,IAAM,YAAY,GAAG,UAAC,KAAa,EAAE,KAAoB,EAAE,SAAwB;IACxF,OAAO,KAAK,CAAC,KAAK,CAAC,
|
|
1
|
+
{"version":3,"file":"JSAvatar.js","sourceRoot":"","sources":["../src/JSAvatar.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,qBAAqB;AACrB,6CAAiD;AACjD,mDAA4F;AAC5F,uDAAqD;AACrD,8DAA4F;AAC5F,yCAAwC;AAExC;;;;;;;GAOG;AACI,IAAM,YAAY,GAAG,UAAC,KAAa,EAAE,KAAoB,EAAE,SAAwB;IACxF,OAAO,CACL,KAAK,CAAC,KAAK,CAAC;QACZ,SAAS,CAAC,KAAK,CAAC;QAChB,KAAK,KAAK,SAAS,CAAC,OAAO,CAAC;QAC5B,CAAC,CAAC,SAAS,CAAC,OAAO,CAAC,IAAI,KAAK,KAAK,UAAU,CAAC;QAC7C,CAAC,SAAS,CAAC,MAAM,KAAK,UAAU,IAAI,KAAK,KAAK,UAAU,CAAC,CAC1D,CAAC;AACJ,CAAC,CAAC;AARW,QAAA,YAAY,gBAQvB;AAEW,QAAA,QAAQ,GAAG,IAAA,mBAAO,sBAC7B,WAAW,EAAE,6BAAY,IACtB,kCAAe,KAClB,KAAK,EAAE;QACL,IAAI,EAAE,mBAAI;QACV,KAAK,EAAE,oBAAK;QACZ,QAAQ,EAAE,mBAAI;QACd,kBAAkB,EAAE,mBAAI;QACxB,IAAI,EAAE,oBAAK;QACX,IAAI,EAAE,mBAAI;QACV,IAAI,EAAE,mBAAI;KACX,EACD,MAAM,EAAE,UAAC,SAAwB,EAAE,QAAgC;QACjE,IAAM,MAAM,GAAG,IAAA,qBAAS,EAAC,SAAS,CAAC,CAAC;QACpC,IAAM,KAAK,GAAG,QAAQ,CAAC,SAAS,EAAE,UAAC,KAAK,IAAK,OAAA,IAAA,oBAAY,EAAC,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,SAAS,CAAC,EAA5C,CAA4C,CAAC,CAAC;QAE3F,OAAO,UAAC,KAAoB;YAC1B,IAAM,KAAqE,IAAA,sBAAU,EAAC,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,EAAlG,QAAQ,cAAA,EAAE,kBAAkB,wBAAA,EAAE,gBAAgB,sBAAA,EAAK,WAAW,cAAhE,sDAAkE,CAAkC,CAAC;YACrG,IAAA,KAAgE,MAAM,CAAC,KAAK,EAA1E,kBAAkB,wBAAA,EAAE,UAAU,gBAAA,EAAE,QAAQ,cAAA,EAAE,eAAe,qBAAiB,CAAC;YAEnF,OAAO,CACL,2BAAC,KAAK,CAAC,IAAI,eAAK,WAAW;gBACxB,kBAAkB,CAAC,CAAC,CAAC,CACpB,2BAAC,KAAK,CAAC,KAAK,IAAC,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,EAAE,kBAAkB,GAAI,CACpF,CAAC,CAAC,CAAC,CACF,2BAAC,KAAK,CAAC,kBAAkB;oBACvB,2BAAC,KAAK,CAAC,QAAQ,QAAE,QAAQ,CAAkB,CAClB,CAC5B;gBACA,QAAQ,IAAI,CAAC,eAAe,IAAI,2BAAC,KAAK,CAAC,IAAI,OAAG;gBAC9C,gBAAgB,KAAK,MAAM,IAAI,2BAAC,KAAK,CAAC,IAAI,OAAG;gBAC7C,CAAC,CAAC,UAAU,IAAI,CAAC,CAAC,UAAU,CAAC,GAAG,IAAI,2BAAC,KAAK,CAAC,IAAI,IAAC,MAAM,EAAE,UAAU,GAAI,CAC5D,CACd,CAAC;QACJ,CAAC,CAAC;IACJ,CAAC,IACD,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"JSAvatar.styling.d.ts","sourceRoot":"","sources":["../src/JSAvatar.styling.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgB,cAAc,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAChG,OAAO,EAAS,iBAAiB,EAAc,MAAM,kCAAkC,CAAC;AAYxF,eAAO,MAAM,YAAY,EAAE,CAAC,MAAM,cAAc,CAAC,
|
|
1
|
+
{"version":3,"file":"JSAvatar.styling.d.ts","sourceRoot":"","sources":["../src/JSAvatar.styling.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgB,cAAc,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAChG,OAAO,EAAS,iBAAiB,EAAc,MAAM,kCAAkC,CAAC;AAYxF,eAAO,MAAM,YAAY,EAAE,CAAC,MAAM,cAAc,CAAC,EAAuC,CAAC;AAEzF,eAAO,MAAM,eAAe,EAAE,iBAAiB,CAAC,aAAa,EAAE,eAAe,EAAE,cAAc,CAwI7F,CAAC"}
|
|
@@ -31,7 +31,7 @@ var nameMap = {
|
|
|
31
31
|
center: 'center',
|
|
32
32
|
end: 'flex-end',
|
|
33
33
|
};
|
|
34
|
-
exports.avatarStates = ['circular', 'square'];
|
|
34
|
+
exports.avatarStates = ['circular', 'square', 'inactive'];
|
|
35
35
|
exports.stylingSettings = {
|
|
36
36
|
tokens: [JSAvatarTokens_1.defaultJSAvatarTokens, JSAvatar_types_1.JSAvatarName],
|
|
37
37
|
states: exports.avatarStates,
|
|
@@ -48,9 +48,10 @@ exports.stylingSettings = {
|
|
|
48
48
|
alignItems: nameMap[verticalIconAlignment || 'end'],
|
|
49
49
|
horizontalIconAlignment: horizontalIconAlignment,
|
|
50
50
|
verticalIconAlignment: verticalIconAlignment,
|
|
51
|
+
opacity: tokens.avatarOpacity,
|
|
51
52
|
},
|
|
52
53
|
};
|
|
53
|
-
}, ['horizontalIconAlignment', 'verticalIconAlignment']),
|
|
54
|
+
}, ['horizontalIconAlignment', 'verticalIconAlignment', 'avatarOpacity']),
|
|
54
55
|
initials: (0, framework_1.buildProps)(function (tokens) {
|
|
55
56
|
var initialsSize = (0, JSAvatar_helpers_1.calculateEffectiveSizes)(tokens).initialsSize;
|
|
56
57
|
return {
|
|
@@ -99,28 +100,18 @@ exports.stylingSettings = {
|
|
|
99
100
|
}, ['iconSize', 'iconStrokeWidth', 'iconStrokeColor']),
|
|
100
101
|
ring: (0, framework_1.buildProps)(function (tokens, theme) {
|
|
101
102
|
var physicalSize = (0, JSAvatar_helpers_1.calculateEffectiveSizes)(tokens).physicalSize;
|
|
102
|
-
var
|
|
103
|
-
|
|
104
|
-
return {};
|
|
105
|
-
var innerGap = ring.innerGap != undefined ? (0, JSAvatar_helpers_1.getRingThickness)(ring.innerGap) : (0, JSAvatar_helpers_1.getRingThickness)(ring.ringThickness || 'xxlarge');
|
|
106
|
-
var effectiveRingThickness = 2 * (0, JSAvatar_helpers_1.getRingThickness)(ring.ringThickness || 'xxlarge') + innerGap;
|
|
107
|
-
var effectiveSize = physicalSize + 2 * effectiveRingThickness;
|
|
108
|
-
var ringColor = ring.ringBackgroundColor || theme.colors.personaActivityRing;
|
|
103
|
+
var ringConfig = (0, JSAvatar_helpers_1.getRingConfig)(physicalSize);
|
|
104
|
+
var ringColor = tokens.ringColor;
|
|
109
105
|
return {
|
|
110
|
-
style: __assign({ borderStyle: 'solid', borderColor: ringColor, borderWidth:
|
|
106
|
+
style: __assign({ borderStyle: 'solid', borderColor: ringColor, borderWidth: ringConfig.stroke, width: ringConfig.size, height: ringConfig.size, position: 'absolute', top: -ringConfig.stroke * 2, left: -ringConfig.stroke * 2 }, tokens_1.borderStyles.from(tokens, theme)),
|
|
111
107
|
};
|
|
112
108
|
}, __spreadArray(['physicalSize', 'ring', 'physicalSize'], tokens_1.borderStyles.keys, true)),
|
|
113
109
|
glow: (0, framework_1.buildProps)(function (tokens, theme) {
|
|
114
110
|
var physicalSize = (0, JSAvatar_helpers_1.calculateEffectiveSizes)(tokens).physicalSize;
|
|
115
|
-
var
|
|
116
|
-
|
|
117
|
-
return {};
|
|
118
|
-
var innerGap = ring.innerGap != undefined ? (0, JSAvatar_helpers_1.getRingThickness)(ring.innerGap) : (0, JSAvatar_helpers_1.getRingThickness)(ring.ringThickness || 'xxlarge');
|
|
119
|
-
var effectiveRingThickness = (0, JSAvatar_helpers_1.getRingThickness)(ring.ringThickness || 'xxlarge') + innerGap;
|
|
120
|
-
var effectiveSize = physicalSize + 2 * effectiveRingThickness;
|
|
121
|
-
var glowColor = ring.accent ? theme.colors.accentButtonBackground : ring.ringColor || theme.colors.personaActivityGlow;
|
|
111
|
+
var ringConfig = (0, JSAvatar_helpers_1.getRingConfig)(physicalSize);
|
|
112
|
+
var glowColor = tokens.ringColor;
|
|
122
113
|
return {
|
|
123
|
-
style: __assign({ borderStyle: 'solid', borderColor: glowColor, borderWidth:
|
|
114
|
+
style: __assign({ borderStyle: 'solid', borderColor: glowColor, borderWidth: ringConfig.stroke - ringConfig.innerStroke, width: ringConfig.size, height: ringConfig.size, position: 'absolute', top: -ringConfig.stroke * 2, left: -ringConfig.stroke * 2 }, tokens_1.borderStyles.from(tokens, theme)),
|
|
124
115
|
};
|
|
125
116
|
}, __spreadArray(['physicalSize', 'ring'], tokens_1.borderStyles.keys, true)),
|
|
126
117
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"JSAvatar.styling.js","sourceRoot":"","sources":["../src/JSAvatar.styling.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA,mDAAgG;AAChG,8DAAwF;AACxF,mDAAyD;AAEzD,
|
|
1
|
+
{"version":3,"file":"JSAvatar.styling.js","sourceRoot":"","sources":["../src/JSAvatar.styling.ts"],"names":[],"mappings":"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"}
|
|
@@ -11,14 +11,13 @@ export declare type AvatarActiveAppearance = 'ring' | 'shadow' | 'glow' | 'ring-
|
|
|
11
11
|
*/
|
|
12
12
|
export declare type AvatarColor = 'cornflower' | 'blue' | 'royalBlue' | 'teal' | 'forest' | 'darkGreen' | 'berry' | 'hotPink' | 'grape' | 'purple' | 'pumpkin' | 'red' | 'burgundy' | 'orchid' | 'brass' | 'darkRed' | 'beige' | 'platinum' | 'steel' | 'brown';
|
|
13
13
|
export declare type AvatarPresence = 'none' | 'offline' | 'online' | 'away' | 'dnd' | 'blocked' | 'busy';
|
|
14
|
-
export declare type RingThickness = number | 'xSmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge';
|
|
15
14
|
export interface RingConfig {
|
|
16
15
|
accent?: boolean;
|
|
17
16
|
transparent?: boolean;
|
|
18
17
|
ringColor?: ColorValue;
|
|
19
18
|
ringBackgroundColor?: ColorValue;
|
|
20
|
-
ringThickness?:
|
|
21
|
-
innerGap?:
|
|
19
|
+
ringThickness?: number;
|
|
20
|
+
innerGap?: number;
|
|
22
21
|
}
|
|
23
22
|
export interface AvatarConfigurableProps {
|
|
24
23
|
size?: AvatarSize;
|
|
@@ -56,6 +55,9 @@ export interface JSAvatarTokens extends IBackgroundColorTokens, IForegroundColor
|
|
|
56
55
|
physicalSize?: number;
|
|
57
56
|
circular?: JSAvatarTokens;
|
|
58
57
|
square?: JSAvatarTokens;
|
|
58
|
+
inactive?: JSAvatarTokens;
|
|
59
|
+
avatarOpacity?: number;
|
|
60
|
+
ringColor?: ColorValue;
|
|
59
61
|
}
|
|
60
62
|
export interface JSAvatarState {
|
|
61
63
|
personaPhotoSource: ImageURISource | undefined;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"JSAvatar.types.d.ts","sourceRoot":"","sources":["../src/JSAvatar.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAC;AAClE,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,cAAc,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC5F,OAAO,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAE9G,eAAO,MAAM,YAAY,WAAW,CAAC;AAErC,oBAAY,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAC;AAE3H,oBAAY,WAAW,GAAG,UAAU,GAAG,QAAQ,CAAC;AAChD,oBAAY,YAAY,GAAG,QAAQ,GAAG,UAAU,GAAG,OAAO,CAAC;AAC3D,oBAAY,sBAAsB,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,aAAa,GAAG,WAAW,CAAC;AAE9F;;GAEG;AACH,oBAAY,WAAW,GACnB,YAAY,GACZ,MAAM,GACN,WAAW,GACX,MAAM,GACN,QAAQ,GACR,WAAW,GACX,OAAO,GACP,SAAS,GACT,OAAO,GACP,QAAQ,GACR,SAAS,GACT,KAAK,GACL,UAAU,GACV,QAAQ,GACR,OAAO,GACP,SAAS,GACT,OAAO,GACP,UAAU,GACV,OAAO,GACP,OAAO,CAAC;AAEZ,oBAAY,cAAc,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,KAAK,GAAG,SAAS,GAAG,MAAM,CAAC;AAEjG,
|
|
1
|
+
{"version":3,"file":"JSAvatar.types.d.ts","sourceRoot":"","sources":["../src/JSAvatar.types.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"JSAvatarTokens.d.ts","sourceRoot":"","sources":["../src/JSAvatarTokens.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;AAInC,eAAO,MAAM,qBAAqB,EAAE,aAAa,CAAC,cAAc,EAAE,KAAK,
|
|
1
|
+
{"version":3,"file":"JSAvatarTokens.d.ts","sourceRoot":"","sources":["../src/JSAvatarTokens.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;AAInC,eAAO,MAAM,qBAAqB,EAAE,aAAa,CAAC,cAAc,EAAE,KAAK,CAiBjD,CAAC"}
|
|
@@ -10,12 +10,16 @@ var defaultJSAvatarTokens = function () {
|
|
|
10
10
|
color: 'white',
|
|
11
11
|
iconStrokeColor: 'white',
|
|
12
12
|
backgroundColor: (0, JSAvatar_helpers_1.convertCoinColorFluent)('cornflower'),
|
|
13
|
+
avatarOpacity: 1,
|
|
13
14
|
circular: {
|
|
14
15
|
borderRadius: theme_tokens_1.globalTokens.corner.radius.circle,
|
|
15
16
|
},
|
|
16
17
|
square: {
|
|
17
18
|
borderRadius: theme_tokens_1.globalTokens.corner.radius.medium,
|
|
18
19
|
},
|
|
20
|
+
inactive: {
|
|
21
|
+
avatarOpacity: 0.8,
|
|
22
|
+
},
|
|
19
23
|
});
|
|
20
24
|
};
|
|
21
25
|
exports.defaultJSAvatarTokens = defaultJSAvatarTokens;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"JSAvatarTokens.js","sourceRoot":"","sources":["../src/JSAvatarTokens.ts"],"names":[],"mappings":";;;AAGA,uDAA4D;AAC5D,oEAAmE;AAE5D,IAAM,qBAAqB,GAAyC;IACzE,OAAA,CAAC;QACC,uBAAuB,EAAE,KAAK;QAC9B,qBAAqB,EAAE,KAAK;QAC5B,KAAK,EAAE,OAAO;QACd,eAAe,EAAE,OAAO;QACxB,eAAe,EAAE,IAAA,yCAAsB,EAAC,YAAY,CAAC;QACrD,QAAQ,EAAE;YACR,YAAY,EAAE,2BAAY,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM;SAChD;QACD,MAAM,EAAE;YACN,YAAY,EAAE,2BAAY,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM;SAChD;KACiB,CAAA;
|
|
1
|
+
{"version":3,"file":"JSAvatarTokens.js","sourceRoot":"","sources":["../src/JSAvatarTokens.ts"],"names":[],"mappings":";;;AAGA,uDAA4D;AAC5D,oEAAmE;AAE5D,IAAM,qBAAqB,GAAyC;IACzE,OAAA,CAAC;QACC,uBAAuB,EAAE,KAAK;QAC9B,qBAAqB,EAAE,KAAK;QAC5B,KAAK,EAAE,OAAO;QACd,eAAe,EAAE,OAAO;QACxB,eAAe,EAAE,IAAA,yCAAsB,EAAC,YAAY,CAAC;QACrD,aAAa,EAAE,CAAC;QAChB,QAAQ,EAAE;YACR,YAAY,EAAE,2BAAY,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM;SAChD;QACD,MAAM,EAAE;YACN,YAAY,EAAE,2BAAY,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM;SAChD;QACD,QAAQ,EAAE;YACR,aAAa,EAAE,GAAG;SACnB;KACiB,CAAA;AAhBpB,CAgBoB,CAAC;AAjBV,QAAA,qBAAqB,yBAiBX"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useAvatar.d.ts","sourceRoot":"","sources":["../src/useAvatar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAiB,MAAM,kBAAkB,CAAC;AAG5E;;;;;;GAMG;AACH,eAAO,MAAM,SAAS,UAAW,aAAa,KAAG,
|
|
1
|
+
{"version":3,"file":"useAvatar.d.ts","sourceRoot":"","sources":["../src/useAvatar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAiB,MAAM,kBAAkB,CAAC;AAG5E;;;;;;GAMG;AACH,eAAO,MAAM,SAAS,UAAW,aAAa,KAAG,UAkChD,CAAC"}
|
|
@@ -32,14 +32,14 @@ var JSAvatar_helpers_1 = require("./JSAvatar.helpers");
|
|
|
32
32
|
* @returns configured props and state for FURN Avatar
|
|
33
33
|
*/
|
|
34
34
|
var useAvatar = function (props) {
|
|
35
|
-
var imageUrl = props.imageUrl, imageDescription = props.imageDescription, initials = props.initials, presence = props.presence, isOutOfOffice = props.isOutOfOffice, ring = props.ring, shape = props.shape, rest = __rest(props, ["imageUrl", "imageDescription", "initials", "presence", "isOutOfOffice", "ring", "shape"]);
|
|
35
|
+
var imageUrl = props.imageUrl, imageDescription = props.imageDescription, initials = props.initials, presence = props.presence, isOutOfOffice = props.isOutOfOffice, ring = props.ring, shape = props.shape, active = props.active, activeAppearance = props.activeAppearance, rest = __rest(props, ["imageUrl", "imageDescription", "initials", "presence", "isOutOfOffice", "ring", "shape", "active", "activeAppearance"]);
|
|
36
36
|
var personaPhotoSource = imageUrl === undefined
|
|
37
37
|
? undefined
|
|
38
38
|
: {
|
|
39
39
|
uri: imageUrl,
|
|
40
40
|
};
|
|
41
41
|
var iconSource = presence === undefined ? undefined : (0, JSAvatar_helpers_1.getPresenceIconSource)(presence, isOutOfOffice || false);
|
|
42
|
-
var showRing =
|
|
42
|
+
var showRing = active === 'active' && activeAppearance === 'ring';
|
|
43
43
|
var transparentRing = !!(ring === null || ring === void 0 ? void 0 : ring.transparent);
|
|
44
44
|
var state = {
|
|
45
45
|
iconSource: iconSource,
|
|
@@ -48,7 +48,7 @@ var useAvatar = function (props) {
|
|
|
48
48
|
transparentRing: transparentRing,
|
|
49
49
|
};
|
|
50
50
|
return {
|
|
51
|
-
props: __assign({ children: initials, accessibilityLabel: imageDescription, shape: shape || 'circular' }, rest),
|
|
51
|
+
props: __assign(__assign({ children: initials, accessibilityLabel: imageDescription, shape: shape || 'circular' }, rest), { active: active, activeAppearance: activeAppearance }),
|
|
52
52
|
state: __assign({}, state),
|
|
53
53
|
};
|
|
54
54
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useAvatar.js","sourceRoot":"","sources":["../src/useAvatar.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AACA,uDAA2D;AAE3D;;;;;;GAMG;AACI,IAAM,SAAS,GAAG,UAAC,KAAoB;IACpC,IAAA,QAAQ,
|
|
1
|
+
{"version":3,"file":"useAvatar.js","sourceRoot":"","sources":["../src/useAvatar.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AACA,uDAA2D;AAE3D;;;;;;GAMG;AACI,IAAM,SAAS,GAAG,UAAC,KAAoB;IACpC,IAAA,QAAQ,GAA0G,KAAK,SAA/G,EAAE,gBAAgB,GAAwF,KAAK,iBAA7F,EAAE,QAAQ,GAA8E,KAAK,SAAnF,EAAE,QAAQ,GAAoE,KAAK,SAAzE,EAAE,aAAa,GAAqD,KAAK,cAA1D,EAAE,IAAI,GAA+C,KAAK,KAApD,EAAE,KAAK,GAAwC,KAAK,MAA7C,EAAE,MAAM,GAAgC,KAAK,OAArC,EAAE,gBAAgB,GAAc,KAAK,iBAAnB,EAAK,IAAI,UAAK,KAAK,EAAzH,wHAAiH,CAAF,CAAW;IAEhI,IAAM,kBAAkB,GACtB,QAAQ,KAAK,SAAS;QACpB,CAAC,CAAC,SAAS;QACX,CAAC,CAAC;YACE,GAAG,EAAE,QAAQ;SACd,CAAC;IAER,IAAM,UAAU,GAAG,QAAQ,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAA,wCAAqB,EAAC,QAAQ,EAAE,aAAa,IAAI,KAAK,CAAC,CAAC;IAChH,IAAM,QAAQ,GAAG,MAAM,KAAK,QAAQ,IAAI,gBAAgB,KAAK,MAAM,CAAC;IACpE,IAAM,eAAe,GAAG,CAAC,CAAC,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,WAAW,CAAA,CAAC;IAE5C,IAAM,KAAK,GAAkB;QAC3B,UAAU,YAAA;QACV,kBAAkB,oBAAA;QAClB,QAAQ,UAAA;QACR,eAAe,iBAAA;KAChB,CAAC;IAEF,OAAO;QACL,KAAK,sBACH,QAAQ,EAAE,QAAQ,EAClB,kBAAkB,EAAE,gBAAgB,EACpC,KAAK,EAAE,KAAK,IAAI,UAAU,IACvB,IAAI,KACP,MAAM,QAAA,EACN,gBAAgB,kBAAA,GACjB;QACD,KAAK,eACA,KAAK,CACT;KACF,CAAC;AACJ,CAAC,CAAC;AAlCW,QAAA,SAAS,aAkCpB"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui-react-native/experimental-avatar",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.14.0",
|
|
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>",
|
package/src/JSAvatar.helpers.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { AvatarSize, AvatarColor, AvatarPresence, JSAvatarTokens
|
|
1
|
+
import { AvatarSize, AvatarColor, AvatarPresence, JSAvatarTokens } from './JSAvatar.types';
|
|
2
2
|
import { ImageURISource } from 'react-native';
|
|
3
3
|
import { globalTokens } from '@fluentui-react-native/theme-tokens';
|
|
4
4
|
|
|
@@ -24,8 +24,12 @@ const presenceIconCache: { [key in AvatarPresence]: ImageURISource } = {
|
|
|
24
24
|
},
|
|
25
25
|
};
|
|
26
26
|
|
|
27
|
-
// TODO: Need icons for the OOF statuses
|
|
28
27
|
const presenceOOFIconCache = presenceIconCache;
|
|
28
|
+
const sizeAdjustment = {
|
|
29
|
+
small: 8,
|
|
30
|
+
medium: 12,
|
|
31
|
+
large: 16,
|
|
32
|
+
};
|
|
29
33
|
|
|
30
34
|
export function getPresenceIconSource(presence: AvatarPresence, isOutOfOffice: boolean): ImageURISource {
|
|
31
35
|
return isOutOfOffice ? presenceOOFIconCache[presence] : presenceIconCache[presence];
|
|
@@ -106,21 +110,24 @@ export function calculateEffectiveSizes(tokens: JSAvatarTokens): AvatarSizeConfi
|
|
|
106
110
|
}
|
|
107
111
|
}
|
|
108
112
|
|
|
109
|
-
export function
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
default:
|
|
124
|
-
return thickness < 0 ? 4 : thickness;
|
|
113
|
+
export function getRingConfig(size: number): any {
|
|
114
|
+
if (size <= 48) {
|
|
115
|
+
return {
|
|
116
|
+
size: size + sizeAdjustment.small,
|
|
117
|
+
stroke: globalTokens.stroke.width.thick,
|
|
118
|
+
innerStroke: globalTokens.stroke.width.thick,
|
|
119
|
+
};
|
|
120
|
+
}
|
|
121
|
+
if (size <= 71) {
|
|
122
|
+
return {
|
|
123
|
+
size: size + sizeAdjustment.medium,
|
|
124
|
+
stroke: globalTokens.stroke.width.thicker,
|
|
125
|
+
innerStroke: globalTokens.stroke.width.thicker,
|
|
126
|
+
};
|
|
125
127
|
}
|
|
128
|
+
return {
|
|
129
|
+
size: size + sizeAdjustment.large,
|
|
130
|
+
stroke: globalTokens.stroke.width.thickest,
|
|
131
|
+
innerStroke: globalTokens.stroke.width.thickest,
|
|
132
|
+
};
|
|
126
133
|
}
|
package/src/JSAvatar.styling.ts
CHANGED
|
@@ -2,7 +2,7 @@ import { JSAvatarName, JSAvatarTokens, AvatarSlotProps, JSAvatarProps } from './
|
|
|
2
2
|
import { Theme, UseStylingOptions, buildProps } from '@fluentui-react-native/framework';
|
|
3
3
|
import { defaultJSAvatarTokens } from './JSAvatarTokens';
|
|
4
4
|
import { ViewStyle } from 'react-native';
|
|
5
|
-
import { calculateEffectiveSizes, convertCoinColorFluent,
|
|
5
|
+
import { calculateEffectiveSizes, convertCoinColorFluent, getRingConfig } from './JSAvatar.helpers';
|
|
6
6
|
import { borderStyles } from '@fluentui-react-native/tokens';
|
|
7
7
|
|
|
8
8
|
const nameMap: { [key: string]: string } = {
|
|
@@ -11,7 +11,7 @@ const nameMap: { [key: string]: string } = {
|
|
|
11
11
|
end: 'flex-end',
|
|
12
12
|
};
|
|
13
13
|
|
|
14
|
-
export const avatarStates: (keyof JSAvatarTokens)[] = ['circular', 'square'];
|
|
14
|
+
export const avatarStates: (keyof JSAvatarTokens)[] = ['circular', 'square', 'inactive'];
|
|
15
15
|
|
|
16
16
|
export const stylingSettings: UseStylingOptions<JSAvatarProps, AvatarSlotProps, JSAvatarTokens> = {
|
|
17
17
|
tokens: [defaultJSAvatarTokens, JSAvatarName],
|
|
@@ -30,10 +30,11 @@ export const stylingSettings: UseStylingOptions<JSAvatarProps, AvatarSlotProps,
|
|
|
30
30
|
alignItems: nameMap[verticalIconAlignment || 'end'] as ViewStyle['alignItems'],
|
|
31
31
|
horizontalIconAlignment,
|
|
32
32
|
verticalIconAlignment,
|
|
33
|
+
opacity: tokens.avatarOpacity,
|
|
33
34
|
},
|
|
34
35
|
};
|
|
35
36
|
},
|
|
36
|
-
['horizontalIconAlignment', 'verticalIconAlignment'],
|
|
37
|
+
['horizontalIconAlignment', 'verticalIconAlignment', 'avatarOpacity'],
|
|
37
38
|
),
|
|
38
39
|
initials: buildProps(
|
|
39
40
|
(tokens: JSAvatarTokens) => {
|
|
@@ -106,25 +107,19 @@ export const stylingSettings: UseStylingOptions<JSAvatarProps, AvatarSlotProps,
|
|
|
106
107
|
ring: buildProps(
|
|
107
108
|
(tokens: JSAvatarTokens, theme: Theme) => {
|
|
108
109
|
const { physicalSize } = calculateEffectiveSizes(tokens);
|
|
109
|
-
const
|
|
110
|
+
const ringConfig = getRingConfig(physicalSize);
|
|
110
111
|
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
const innerGap = ring.innerGap != undefined ? getRingThickness(ring.innerGap) : getRingThickness(ring.ringThickness || 'xxlarge');
|
|
114
|
-
|
|
115
|
-
const effectiveRingThickness = 2 * getRingThickness(ring.ringThickness || 'xxlarge') + innerGap;
|
|
116
|
-
const effectiveSize = physicalSize + 2 * effectiveRingThickness;
|
|
117
|
-
const ringColor = ring.ringBackgroundColor || theme.colors.personaActivityRing;
|
|
112
|
+
const ringColor = tokens.ringColor;
|
|
118
113
|
return {
|
|
119
114
|
style: {
|
|
120
115
|
borderStyle: 'solid',
|
|
121
116
|
borderColor: ringColor,
|
|
122
|
-
borderWidth:
|
|
123
|
-
width:
|
|
124
|
-
height:
|
|
117
|
+
borderWidth: ringConfig.stroke,
|
|
118
|
+
width: ringConfig.size,
|
|
119
|
+
height: ringConfig.size,
|
|
125
120
|
position: 'absolute',
|
|
126
|
-
top: -
|
|
127
|
-
left: -
|
|
121
|
+
top: -ringConfig.stroke * 2,
|
|
122
|
+
left: -ringConfig.stroke * 2,
|
|
128
123
|
...borderStyles.from(tokens, theme),
|
|
129
124
|
},
|
|
130
125
|
};
|
|
@@ -134,25 +129,19 @@ export const stylingSettings: UseStylingOptions<JSAvatarProps, AvatarSlotProps,
|
|
|
134
129
|
glow: buildProps(
|
|
135
130
|
(tokens: JSAvatarTokens, theme: Theme) => {
|
|
136
131
|
const { physicalSize } = calculateEffectiveSizes(tokens);
|
|
137
|
-
const
|
|
138
|
-
|
|
139
|
-
if (!ring) return {};
|
|
140
|
-
|
|
141
|
-
const innerGap = ring.innerGap != undefined ? getRingThickness(ring.innerGap) : getRingThickness(ring.ringThickness || 'xxlarge');
|
|
132
|
+
const ringConfig = getRingConfig(physicalSize);
|
|
142
133
|
|
|
143
|
-
const
|
|
144
|
-
const effectiveSize = physicalSize + 2 * effectiveRingThickness;
|
|
145
|
-
const glowColor = ring.accent ? theme.colors.accentButtonBackground : ring.ringColor || theme.colors.personaActivityGlow;
|
|
134
|
+
const glowColor = tokens.ringColor;
|
|
146
135
|
return {
|
|
147
136
|
style: {
|
|
148
137
|
borderStyle: 'solid',
|
|
149
138
|
borderColor: glowColor,
|
|
150
|
-
borderWidth:
|
|
151
|
-
width:
|
|
152
|
-
height:
|
|
139
|
+
borderWidth: ringConfig.stroke - ringConfig.innerStroke,
|
|
140
|
+
width: ringConfig.size,
|
|
141
|
+
height: ringConfig.size,
|
|
153
142
|
position: 'absolute',
|
|
154
|
-
top: -
|
|
155
|
-
left: -
|
|
143
|
+
top: -ringConfig.stroke * 2,
|
|
144
|
+
left: -ringConfig.stroke * 2,
|
|
156
145
|
...borderStyles.from(tokens, theme),
|
|
157
146
|
},
|
|
158
147
|
};
|
package/src/JSAvatar.tsx
CHANGED
|
@@ -14,7 +14,13 @@ import { useAvatar } from './useAvatar';
|
|
|
14
14
|
* @returns Whether the styles that are assigned to the layer should be applied to the avatar
|
|
15
15
|
*/
|
|
16
16
|
export const avatarLookup = (layer: string, state: JSAvatarState, userProps: JSAvatarProps): boolean => {
|
|
17
|
-
return
|
|
17
|
+
return (
|
|
18
|
+
state[layer] ||
|
|
19
|
+
userProps[layer] ||
|
|
20
|
+
layer === userProps['shape'] ||
|
|
21
|
+
(!userProps['shape'] && layer === 'circular') ||
|
|
22
|
+
(userProps.active === 'inactive' && layer === 'inactive')
|
|
23
|
+
);
|
|
18
24
|
};
|
|
19
25
|
|
|
20
26
|
export const JSAvatar = compose<JSAvatarType>({
|
|
@@ -34,7 +40,7 @@ export const JSAvatar = compose<JSAvatarType>({
|
|
|
34
40
|
const Slots = useSlots(userProps, (layer) => avatarLookup(layer, avatar.state, userProps));
|
|
35
41
|
|
|
36
42
|
return (final: JSAvatarProps) => {
|
|
37
|
-
const { children, accessibilityLabel, ...mergedProps } = mergeProps(avatar.props, final);
|
|
43
|
+
const { children, accessibilityLabel, activeAppearance, ...mergedProps } = mergeProps(avatar.props, final);
|
|
38
44
|
const { personaPhotoSource, iconSource, showRing, transparentRing } = avatar.state;
|
|
39
45
|
|
|
40
46
|
return (
|
|
@@ -47,7 +53,7 @@ export const JSAvatar = compose<JSAvatarType>({
|
|
|
47
53
|
</Slots.initialsBackground>
|
|
48
54
|
)}
|
|
49
55
|
{showRing && !transparentRing && <Slots.ring />}
|
|
50
|
-
{
|
|
56
|
+
{activeAppearance === 'glow' && <Slots.glow />}
|
|
51
57
|
{!!iconSource && !!iconSource.uri && <Slots.icon source={iconSource} />}
|
|
52
58
|
</Slots.root>
|
|
53
59
|
);
|
package/src/JSAvatar.types.ts
CHANGED
|
@@ -37,15 +37,13 @@ export type AvatarColor =
|
|
|
37
37
|
|
|
38
38
|
export type AvatarPresence = 'none' | 'offline' | 'online' | 'away' | 'dnd' | 'blocked' | 'busy';
|
|
39
39
|
|
|
40
|
-
export type RingThickness = number | 'xSmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge';
|
|
41
|
-
|
|
42
40
|
export interface RingConfig {
|
|
43
41
|
accent?: boolean;
|
|
44
42
|
transparent?: boolean;
|
|
45
43
|
ringColor?: ColorValue; // glow
|
|
46
44
|
ringBackgroundColor?: ColorValue; // inner/outer rings
|
|
47
|
-
ringThickness?:
|
|
48
|
-
innerGap?:
|
|
45
|
+
ringThickness?: number;
|
|
46
|
+
innerGap?: number;
|
|
49
47
|
}
|
|
50
48
|
|
|
51
49
|
export interface AvatarConfigurableProps {
|
|
@@ -88,6 +86,9 @@ export interface JSAvatarTokens extends IBackgroundColorTokens, IForegroundColor
|
|
|
88
86
|
physicalSize?: number;
|
|
89
87
|
circular?: JSAvatarTokens;
|
|
90
88
|
square?: JSAvatarTokens;
|
|
89
|
+
inactive?: JSAvatarTokens;
|
|
90
|
+
avatarOpacity?: number;
|
|
91
|
+
ringColor?: ColorValue;
|
|
91
92
|
}
|
|
92
93
|
|
|
93
94
|
export interface JSAvatarState {
|
package/src/JSAvatarTokens.ts
CHANGED
|
@@ -11,10 +11,14 @@ export const defaultJSAvatarTokens: TokenSettings<JSAvatarTokens, Theme> = () =>
|
|
|
11
11
|
color: 'white', // initials is always 'white', unless overriden by token
|
|
12
12
|
iconStrokeColor: 'white', // icon stroke color is always 'white', unless overriden by token
|
|
13
13
|
backgroundColor: convertCoinColorFluent('cornflower'),
|
|
14
|
+
avatarOpacity: 1,
|
|
14
15
|
circular: {
|
|
15
16
|
borderRadius: globalTokens.corner.radius.circle,
|
|
16
17
|
},
|
|
17
18
|
square: {
|
|
18
19
|
borderRadius: globalTokens.corner.radius.medium,
|
|
19
20
|
},
|
|
21
|
+
inactive: {
|
|
22
|
+
avatarOpacity: 0.8,
|
|
23
|
+
},
|
|
20
24
|
} as JSAvatarTokens);
|
package/src/useAvatar.ts
CHANGED
|
@@ -9,7 +9,7 @@ import { getPresenceIconSource } from './JSAvatar.helpers';
|
|
|
9
9
|
* @returns configured props and state for FURN Avatar
|
|
10
10
|
*/
|
|
11
11
|
export const useAvatar = (props: JSAvatarProps): AvatarInfo => {
|
|
12
|
-
const { imageUrl, imageDescription, initials, presence, isOutOfOffice, ring, shape, ...rest } = props;
|
|
12
|
+
const { imageUrl, imageDescription, initials, presence, isOutOfOffice, ring, shape, active, activeAppearance, ...rest } = props;
|
|
13
13
|
|
|
14
14
|
const personaPhotoSource =
|
|
15
15
|
imageUrl === undefined
|
|
@@ -19,7 +19,7 @@ export const useAvatar = (props: JSAvatarProps): AvatarInfo => {
|
|
|
19
19
|
};
|
|
20
20
|
|
|
21
21
|
const iconSource = presence === undefined ? undefined : getPresenceIconSource(presence, isOutOfOffice || false);
|
|
22
|
-
const showRing =
|
|
22
|
+
const showRing = active === 'active' && activeAppearance === 'ring';
|
|
23
23
|
const transparentRing = !!ring?.transparent;
|
|
24
24
|
|
|
25
25
|
const state: JSAvatarState = {
|
|
@@ -35,6 +35,8 @@ export const useAvatar = (props: JSAvatarProps): AvatarInfo => {
|
|
|
35
35
|
accessibilityLabel: imageDescription,
|
|
36
36
|
shape: shape || 'circular',
|
|
37
37
|
...rest,
|
|
38
|
+
active,
|
|
39
|
+
activeAppearance,
|
|
38
40
|
},
|
|
39
41
|
state: {
|
|
40
42
|
...state,
|