@fluentui-react-native/experimental-avatar 0.14.13 → 0.14.14
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 +22 -1
- package/CHANGELOG.md +11 -2
- package/lib/JSAvatar.d.ts.map +1 -1
- package/lib/JSAvatar.helpers.d.ts +1 -4
- package/lib/JSAvatar.helpers.d.ts.map +1 -1
- package/lib/JSAvatar.helpers.js +12 -37
- package/lib/JSAvatar.helpers.js.map +1 -1
- package/lib/JSAvatar.js +4 -3
- package/lib/JSAvatar.js.map +1 -1
- package/lib/JSAvatar.types.d.ts +4 -3
- package/lib/JSAvatar.types.d.ts.map +1 -1
- package/lib/JSAvatar.types.js +14 -0
- package/lib/JSAvatar.types.js.map +1 -1
- package/lib/useAvatar.d.ts.map +1 -1
- package/lib/useAvatar.js +2 -5
- package/lib/useAvatar.js.map +1 -1
- package/lib-commonjs/JSAvatar.d.ts.map +1 -1
- package/lib-commonjs/JSAvatar.helpers.d.ts +1 -4
- package/lib-commonjs/JSAvatar.helpers.d.ts.map +1 -1
- package/lib-commonjs/JSAvatar.helpers.js +13 -40
- package/lib-commonjs/JSAvatar.helpers.js.map +1 -1
- package/lib-commonjs/JSAvatar.js +4 -3
- package/lib-commonjs/JSAvatar.js.map +1 -1
- package/lib-commonjs/JSAvatar.types.d.ts +4 -3
- package/lib-commonjs/JSAvatar.types.d.ts.map +1 -1
- package/lib-commonjs/JSAvatar.types.js +15 -1
- package/lib-commonjs/JSAvatar.types.js.map +1 -1
- package/lib-commonjs/useAvatar.d.ts.map +1 -1
- package/lib-commonjs/useAvatar.js +2 -5
- package/lib-commonjs/useAvatar.js.map +1 -1
- package/package.json +7 -6
- package/src/JSAvatar.helpers.ts +13 -42
- package/src/JSAvatar.tsx +4 -3
- package/src/JSAvatar.types.ts +17 -5
- package/src/useAvatar.ts +3 -5
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,28 @@
|
|
|
2
2
|
"name": "@fluentui-react-native/experimental-avatar",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Wed, 20 Apr 2022 10:53:24 GMT",
|
|
6
|
+
"tag": "@fluentui-react-native/experimental-avatar_v0.14.14",
|
|
7
|
+
"version": "0.14.14",
|
|
8
|
+
"comments": {
|
|
9
|
+
"patch": [
|
|
10
|
+
{
|
|
11
|
+
"author": "v.kozova13@gmail.com",
|
|
12
|
+
"package": "@fluentui-react-native/experimental-avatar",
|
|
13
|
+
"commit": "c6d615f926aaca616737ab0382ebde9109a5556f",
|
|
14
|
+
"comment": "Replaced presence prop from PersonaCoin with the new PresenceBadge"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "beachball",
|
|
18
|
+
"package": "@fluentui-react-native/experimental-avatar",
|
|
19
|
+
"comment": "Bump @fluentui-react-native/badge to v0.0.27",
|
|
20
|
+
"commit": "c6d615f926aaca616737ab0382ebde9109a5556f"
|
|
21
|
+
}
|
|
22
|
+
]
|
|
23
|
+
}
|
|
24
|
+
},
|
|
25
|
+
{
|
|
26
|
+
"date": "Tue, 19 Apr 2022 16:54:55 GMT",
|
|
6
27
|
"tag": "@fluentui-react-native/experimental-avatar_v0.14.13",
|
|
7
28
|
"version": "0.14.13",
|
|
8
29
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,21 @@
|
|
|
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 Wed, 20 Apr 2022 10:53:24 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## 0.14.14
|
|
8
|
+
|
|
9
|
+
Wed, 20 Apr 2022 10:53:24 GMT
|
|
10
|
+
|
|
11
|
+
### Patches
|
|
12
|
+
|
|
13
|
+
- Replaced presence prop from PersonaCoin with the new PresenceBadge (v.kozova13@gmail.com)
|
|
14
|
+
- Bump @fluentui-react-native/badge to v0.0.27
|
|
15
|
+
|
|
7
16
|
## 0.14.13
|
|
8
17
|
|
|
9
|
-
Tue, 19 Apr 2022 16:
|
|
18
|
+
Tue, 19 Apr 2022 16:54:55 GMT
|
|
10
19
|
|
|
11
20
|
### Patches
|
|
12
21
|
|
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;
|
|
1
|
+
{"version":3,"file":"JSAvatar.d.ts","sourceRoot":"","sources":["../src/JSAvatar.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAA8B,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAM5F;;;;;;;GAOG;AACH,eAAO,MAAM,YAAY,UAAW,MAAM,SAAS,aAAa,aAAa,aAAa,KAAG,OAQ5F,CAAC;AAEF,eAAO,MAAM,QAAQ,8KAoCnB,CAAC"}
|
|
@@ -1,13 +1,10 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { ImageURISource } from 'react-native';
|
|
3
|
-
export declare function getPresenceIconSource(presence: AvatarPresence, isOutOfOffice: boolean): ImageURISource;
|
|
1
|
+
import { AvatarColor, JSAvatarTokens } from './JSAvatar.types';
|
|
4
2
|
export declare type AvatarSizeConfig = {
|
|
5
3
|
physicalSize: number;
|
|
6
4
|
iconSize: number;
|
|
7
5
|
iconStrokeWidth: number;
|
|
8
6
|
initialsSize: number;
|
|
9
7
|
};
|
|
10
|
-
export declare function getSizeConfig(size: AvatarSize): AvatarSizeConfig;
|
|
11
8
|
/**
|
|
12
9
|
* Converts the AvatarColor into a hex color value
|
|
13
10
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"JSAvatar.helpers.d.ts","sourceRoot":"","sources":["../src/JSAvatar.helpers.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"JSAvatar.helpers.d.ts","sourceRoot":"","sources":["../src/JSAvatar.helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAc,WAAW,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAS3E,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;AAwCF;;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
|
@@ -1,48 +1,23 @@
|
|
|
1
1
|
import { globalTokens } from '@fluentui-react-native/theme-tokens';
|
|
2
|
-
var presenceIconCache = {
|
|
3
|
-
none: { uri: '' },
|
|
4
|
-
offline: {
|
|
5
|
-
uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAANlBMVEUAAACoxM+oxM+oxM+oxM+oxM+oxM+oxM+oxM////+oxM/W5OmzzNX5+/z3+vvu9Pbt8/Xj7PAAKKEtAAAACXRSTlMA6bWcZQpiXgXWfJCWAAAAeElEQVQoz52RSQ7EIAwEx0AWymT7/2dHYpgoPvQldeySsGl/XjOVZGCpTDFfjIEtj3jN0Pzc99Mb5PUWGbwOHPI/n+GqNxfMY67h9YFjvw0KrQYapYuER+GkLowjigPrArYoNpBCPiWHy3XlB1UlqkRZuziUPO1bvszLC8V87ko/AAAAAElFTkSuQmCC',
|
|
6
|
-
},
|
|
7
|
-
online: {
|
|
8
|
-
uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAAWlBMVEUAAABusAVusAVusAVusAVusAVusAVusAVusAVusAVusAVusAVusAVusAVusAVusAVusAVusAVusAX////N4bi61517tivn8d3e7NL3+vTE3Kux0o6nzH6GvEWFZ26xAAAAEnRSTlMA8eNrEQj6syHTeXrKshzZ19JHa6QpAAAApUlEQVQoz4WS6w7CIAyFBwwGbE5th87b+7+mCDXcIp4/NN9J2tJ2+KdRTFyx0yTGAkvLgMRmmbg2kMnoL185FOIr5Vmg0hKzWWhkQz+sNdinN1Eg9wyP8MYh5xvewjt5gxcct9iYN1SIXvsj46C8EWvfEZ0jTsYxRJcrYuLAqTg5xKm4AHL2xEH8/GBvJIM819xIWkc9dt1ZFEnO+WrbY1CcjqGnN0xiGcyuKFtcAAAAAElFTkSuQmCC',
|
|
9
|
-
},
|
|
10
|
-
away: {
|
|
11
|
-
uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAAP1BMVEUAAAD6yRT6yRT6yRT6yRT6yRT6yRT6yRT6yRT6yRT6yRT6yRT////6zCP95pH95Yv++OL84Hn822T72FT71EUen9LHAAAAC3RSTlMA6rVlCuWgmGJeBd4LCPMAAAB8SURBVCjPnZFLDoAgDERtQUUH/97/rCYNJUITTXjLeYu2064Z75gAYufLfOqR6KdXPI94Mc5ZDCgYNA8piHGBENJcqgV5EQ61gBPBVrAIsoJEwArUYi0EIbFlQ+VwHGpY11XOGDdZVw/MXPstB2olFeGnRFv796Psa1t5ANwFDZEW8B8sAAAAAElFTkSuQmCC',
|
|
12
|
-
},
|
|
13
|
-
dnd: {
|
|
14
|
-
uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAAQlBMVEUAAADpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABv////wfYT86errJjiR9OLxAAAAEXRSTlMA4/CzeQj602seEhEk89jKakfnNfsAAACKSURBVCjPhZFbDoQgDEWBQkHBR2d0/1udEppR0cbzeU9SSq95I69gcZphzZc4eEeC8+HIh0gn4vDPLV2wYsJCHUub5umGr/no7sKNLBI9kFjAkwAWbaX9K+xtMRZIle0jbFRBFpMmZmWU8ri+rv5B/SQmxD6PUknpz16MUJSi9GqZnMAiWkjZvPADxcoYalVfnOMAAAAASUVORK5CYII=',
|
|
15
|
-
},
|
|
16
|
-
blocked: {
|
|
17
|
-
uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAAe1BMVEUAAADpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABv////pABv83uHqCiTsJz7rGjP7zNHvRVj/+vv+8vP6x83sIzv2mqXsKD/7zNL5v8b3oqz2maTuP1P82Nz819vtKUDrGjLrGTK2dyGvAAAAEXRSTlMA8dSzeQj64mseEhHkJMpq5T3coEAAAADSSURBVCjPhdHZFoIgFAVQGQRLGzhQiaLNw/9/YZRk4IvncZ+17uJys7mUGyYFoWxTJpxzghDC878vKFBftLX6UgN0MXqF/qRCTg5VaPI1ro36Re+MWQ/TOPrEXw7840uCNvb9oQVZ+qJAnbpSNQpfMHQTVx2YLyT0xJWG9IWAnbiyEL4gaCKPCopb7P9RDOeJqzNYeG7i3+eGBVMPC2Yczpn9cfTmAT58IoV5Rn4FDSdZbY1rxzk9qpXHofkcqtO2uXfhUHOn9SkLJoWQrCizmbwBa5IbuX8ugpIAAAAASUVORK5CYII=',
|
|
18
|
-
},
|
|
19
|
-
busy: {
|
|
20
|
-
uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAANlBMVEUAAADpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvsgIdoAAAAEXRSTlMA8eLUEQj6s2sheXrlyrJqHBqb3nMAAAB/SURBVCjPhZFRDsQgCEQFEdS223L/yy7JummtGN/nvASUCSvoFGSIclIXpwragC3deYn6IJZ/fqF24NXmHPri+E2rOlCDQTAKIBNZHbKJjyfEBHoCTbAn2ATMRPRHzZfPn+t/cH4SIw3rY2p17H2+l0VRRtr8ag3KgswomcKCL1NmGBp9lqsZAAAAAElFTkSuQmCC',
|
|
21
|
-
},
|
|
22
|
-
};
|
|
23
|
-
var presenceOOFIconCache = presenceIconCache;
|
|
24
2
|
var sizeAdjustment = {
|
|
25
3
|
small: 8,
|
|
26
4
|
medium: 12,
|
|
27
5
|
large: 16,
|
|
28
6
|
};
|
|
29
|
-
export function getPresenceIconSource(presence, isOutOfOffice) {
|
|
30
|
-
return isOutOfOffice ? presenceOOFIconCache[presence] : presenceIconCache[presence];
|
|
31
|
-
}
|
|
32
7
|
var sizeTable = {
|
|
33
|
-
|
|
34
|
-
size24: { physicalSize: 24, iconSize:
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
8
|
+
size20: { physicalSize: 20, iconSize: 10, iconStrokeWidth: 2, initialsSize: 16 },
|
|
9
|
+
size24: { physicalSize: 24, iconSize: 10, iconStrokeWidth: 2, initialsSize: 16 },
|
|
10
|
+
size28: { physicalSize: 28, iconSize: 16, iconStrokeWidth: 2, initialsSize: 20 },
|
|
11
|
+
size32: { physicalSize: 32, iconSize: 16, iconStrokeWidth: 2, initialsSize: 20 },
|
|
12
|
+
size36: { physicalSize: 36, iconSize: 16, iconStrokeWidth: 2, initialsSize: 20 },
|
|
13
|
+
size40: { physicalSize: 40, iconSize: 16, iconStrokeWidth: 2, initialsSize: 20 },
|
|
14
|
+
size48: { physicalSize: 48, iconSize: 20, iconStrokeWidth: 2, initialsSize: 24 },
|
|
15
|
+
size56: { physicalSize: 56, iconSize: 24, iconStrokeWidth: 3, initialsSize: 28 },
|
|
16
|
+
size64: { physicalSize: 64, iconSize: 28, iconStrokeWidth: 3, initialsSize: 32 },
|
|
17
|
+
size72: { physicalSize: 72, iconSize: 28, iconStrokeWidth: 4, initialsSize: 32 },
|
|
18
|
+
size96: { physicalSize: 96, iconSize: 40, iconStrokeWidth: 4, initialsSize: 48 },
|
|
19
|
+
size120: { physicalSize: 120, iconSize: 40, iconStrokeWidth: 4, initialsSize: 48 },
|
|
42
20
|
};
|
|
43
|
-
export function getSizeConfig(size) {
|
|
44
|
-
return sizeTable[size];
|
|
45
|
-
}
|
|
46
21
|
var colorTableFluent = {
|
|
47
22
|
cornflower: globalTokens.color.cornflower.primary,
|
|
48
23
|
blue: globalTokens.color.blue.primary,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"JSAvatar.helpers.js","sourceRoot":"","sources":["../src/JSAvatar.helpers.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"JSAvatar.helpers.js","sourceRoot":"","sources":["../src/JSAvatar.helpers.ts"],"names":[],"mappings":"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"}
|
package/lib/JSAvatar.js
CHANGED
|
@@ -26,6 +26,7 @@ import { JSAvatarName } from './JSAvatar.types';
|
|
|
26
26
|
import { stylingSettings } from './JSAvatar.styling';
|
|
27
27
|
import { compose, mergeProps, withSlots } from '@fluentui-react-native/framework';
|
|
28
28
|
import { useAvatar } from './useAvatar';
|
|
29
|
+
import { PresenceBadge } from '@fluentui-react-native/badge';
|
|
29
30
|
/**
|
|
30
31
|
* A function which determines if a set of styles should be applied to the compoent given the current state and props of the avatar.
|
|
31
32
|
*
|
|
@@ -53,14 +54,14 @@ export var JSAvatar = compose(__assign(__assign({ displayName: JSAvatarName }, s
|
|
|
53
54
|
var avatar = useAvatar(userProps);
|
|
54
55
|
var Slots = useSlots(userProps, function (layer) { return avatarLookup(layer, avatar.state, userProps); });
|
|
55
56
|
return function (final) {
|
|
56
|
-
var _a = mergeProps(avatar.props, final), children = _a.children, accessibilityLabel = _a.accessibilityLabel, activeAppearance = _a.activeAppearance, mergedProps = __rest(_a, ["children", "accessibilityLabel", "activeAppearance"]);
|
|
57
|
-
var _b = avatar.state, personaPhotoSource = _b.personaPhotoSource,
|
|
57
|
+
var _a = mergeProps(avatar.props, final), children = _a.children, accessibilityLabel = _a.accessibilityLabel, presence = _a.presence, activeAppearance = _a.activeAppearance, isOutOfOffice = _a.isOutOfOffice, mergedProps = __rest(_a, ["children", "accessibilityLabel", "presence", "activeAppearance", "isOutOfOffice"]);
|
|
58
|
+
var _b = avatar.state, personaPhotoSource = _b.personaPhotoSource, showRing = _b.showRing, transparentRing = _b.transparentRing;
|
|
58
59
|
return (withSlots(Slots.root, __assign({}, mergedProps),
|
|
59
60
|
personaPhotoSource ? (withSlots(Slots.photo, { accessibilityLabel: accessibilityLabel, source: personaPhotoSource })) : (withSlots(Slots.initialsBackground, null,
|
|
60
61
|
withSlots(Slots.initials, null, children))),
|
|
61
62
|
showRing && !transparentRing && withSlots(Slots.ring, null),
|
|
62
63
|
activeAppearance === 'glow' && withSlots(Slots.glow, null),
|
|
63
|
-
|
|
64
|
+
withSlots(PresenceBadge, { size: "small", shape: "circular", presence: presence, isOutOfOffice: isOutOfOffice })));
|
|
64
65
|
};
|
|
65
66
|
} }));
|
|
66
67
|
//# sourceMappingURL=JSAvatar.js.map
|
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;
|
|
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;AACxC,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAE7D;;;;;;;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,SAAS,EAAE,UAAC,SAAwB,EAAE,QAAgC;QACpE,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,KAA8F,UAAU,CAAC,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,EAA3H,QAAQ,cAAA,EAAE,kBAAkB,wBAAA,EAAE,QAAQ,cAAA,EAAE,gBAAgB,sBAAA,EAAE,aAAa,mBAAA,EAAK,WAAW,cAAzF,mFAA2F,CAAkC,CAAC;YAC9H,IAAA,KAAoD,MAAM,CAAC,KAAK,EAA9D,kBAAkB,wBAAA,EAAE,QAAQ,cAAA,EAAE,eAAe,qBAAiB,CAAC;YAEvE,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;gBAC9C,UAAC,aAAa,IAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,UAAU,EAAC,QAAQ,EAAE,QAAQ,EAAE,aAAa,EAAE,aAAa,GAAI,CACtF,CACd,CAAC;QACJ,CAAC,CAAC;IACJ,CAAC,IACD,CAAC"}
|
package/lib/JSAvatar.types.d.ts
CHANGED
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
import type { IViewProps } from '@fluentui-react-native/adapters';
|
|
2
2
|
import { ImageProps, ViewProps, ImageURISource, TextProps, ColorValue } from 'react-native';
|
|
3
3
|
import { IBackgroundColorTokens, IForegroundColorTokens, IBorderTokens } from '@fluentui-react-native/tokens';
|
|
4
|
+
import { Presence } from '@fluentui-react-native/badge';
|
|
4
5
|
export declare const JSAvatarName = "Avatar";
|
|
5
|
-
export declare
|
|
6
|
+
export declare const AvatarSizes: readonly ["size20", "size24", "size28", "size32", "size36", "size40", "size48", "size56", "size64", "size72", "size96", "size120"];
|
|
7
|
+
export declare type AvatarSize = typeof AvatarSizes[number];
|
|
6
8
|
export declare type AvatarShape = 'circular' | 'square';
|
|
7
9
|
export declare type AvatarActive = 'active' | 'inactive' | 'unset';
|
|
8
10
|
export declare type AvatarActiveAppearance = 'ring' | 'shadow' | 'glow' | 'ring-shadow' | 'ring-glow';
|
|
@@ -10,7 +12,7 @@ export declare type AvatarActiveAppearance = 'ring' | 'shadow' | 'glow' | 'ring-
|
|
|
10
12
|
* Sets color of the avatar when there is no picture. Uses fluent color names
|
|
11
13
|
*/
|
|
12
14
|
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
|
-
export declare type AvatarPresence =
|
|
15
|
+
export declare type AvatarPresence = Presence;
|
|
14
16
|
export interface RingConfig {
|
|
15
17
|
accent?: boolean;
|
|
16
18
|
transparent?: boolean;
|
|
@@ -61,7 +63,6 @@ export interface JSAvatarTokens extends IBackgroundColorTokens, IForegroundColor
|
|
|
61
63
|
}
|
|
62
64
|
export interface JSAvatarState {
|
|
63
65
|
personaPhotoSource: ImageURISource | undefined;
|
|
64
|
-
iconSource: ImageURISource | undefined;
|
|
65
66
|
showRing: boolean;
|
|
66
67
|
transparentRing: boolean;
|
|
67
68
|
}
|
|
@@ -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;
|
|
1
|
+
{"version":3,"file":"JSAvatar.types.d.ts","sourceRoot":"","sources":["../src/JSAvatar.types.ts"],"names":[],"mappings":"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"}
|
package/lib/JSAvatar.types.js
CHANGED
|
@@ -1,2 +1,16 @@
|
|
|
1
1
|
export var JSAvatarName = 'Avatar';
|
|
2
|
+
export var AvatarSizes = [
|
|
3
|
+
'size20',
|
|
4
|
+
'size24',
|
|
5
|
+
'size28',
|
|
6
|
+
'size32',
|
|
7
|
+
'size36',
|
|
8
|
+
'size40',
|
|
9
|
+
'size48',
|
|
10
|
+
'size56',
|
|
11
|
+
'size64',
|
|
12
|
+
'size72',
|
|
13
|
+
'size96',
|
|
14
|
+
'size120',
|
|
15
|
+
];
|
|
2
16
|
//# sourceMappingURL=JSAvatar.types.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"JSAvatar.types.js","sourceRoot":"","sources":["../src/JSAvatar.types.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"JSAvatar.types.js","sourceRoot":"","sources":["../src/JSAvatar.types.ts"],"names":[],"mappings":"AAKA,MAAM,CAAC,IAAM,YAAY,GAAG,QAAQ,CAAC;AACrC,MAAM,CAAC,IAAM,WAAW,GAAG;IACzB,QAAQ;IACR,QAAQ;IACR,QAAQ;IACR,QAAQ;IACR,QAAQ;IACR,QAAQ;IACR,QAAQ;IACR,QAAQ;IACR,QAAQ;IACR,QAAQ;IACR,QAAQ;IACR,SAAS;CACD,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;
|
|
1
|
+
{"version":3,"file":"useAvatar.d.ts","sourceRoot":"","sources":["../src/useAvatar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAiB,MAAM,kBAAkB,CAAC;AAC5E;;;;;;GAMG;AACH,eAAO,MAAM,SAAS,UAAW,aAAa,KAAG,UAkChD,CAAC"}
|
package/lib/useAvatar.js
CHANGED
|
@@ -20,7 +20,6 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
20
20
|
}
|
|
21
21
|
return t;
|
|
22
22
|
};
|
|
23
|
-
import { getPresenceIconSource } from './JSAvatar.helpers';
|
|
24
23
|
/**
|
|
25
24
|
* Re-usable hook for FURN Avatar.
|
|
26
25
|
* This hook configures Avatar props and state for FURN Avatar.
|
|
@@ -29,23 +28,21 @@ import { getPresenceIconSource } from './JSAvatar.helpers';
|
|
|
29
28
|
* @returns configured props and state for FURN Avatar
|
|
30
29
|
*/
|
|
31
30
|
export var useAvatar = function (props) {
|
|
32
|
-
var imageUrl = props.imageUrl, imageDescription = props.imageDescription, initials = props.initials,
|
|
31
|
+
var imageUrl = props.imageUrl, imageDescription = props.imageDescription, initials = props.initials, isOutOfOffice = props.isOutOfOffice, presence = props.presence, ring = props.ring, shape = props.shape, active = props.active, activeAppearance = props.activeAppearance, rest = __rest(props, ["imageUrl", "imageDescription", "initials", "isOutOfOffice", "presence", "ring", "shape", "active", "activeAppearance"]);
|
|
33
32
|
var personaPhotoSource = imageUrl === undefined
|
|
34
33
|
? undefined
|
|
35
34
|
: {
|
|
36
35
|
uri: imageUrl,
|
|
37
36
|
};
|
|
38
|
-
var iconSource = presence === undefined ? undefined : getPresenceIconSource(presence, isOutOfOffice || false);
|
|
39
37
|
var showRing = active === 'active' && activeAppearance === 'ring';
|
|
40
38
|
var transparentRing = !!(ring === null || ring === void 0 ? void 0 : ring.transparent);
|
|
41
39
|
var state = {
|
|
42
|
-
iconSource: iconSource,
|
|
43
40
|
personaPhotoSource: personaPhotoSource,
|
|
44
41
|
showRing: showRing,
|
|
45
42
|
transparentRing: transparentRing,
|
|
46
43
|
};
|
|
47
44
|
return {
|
|
48
|
-
props: __assign(__assign({ children: initials, accessibilityLabel: imageDescription, shape: shape || 'circular' }, rest), { active: active, activeAppearance: activeAppearance }),
|
|
45
|
+
props: __assign(__assign({ isOutOfOffice: isOutOfOffice || false, presence: presence || 'available', children: initials, accessibilityLabel: imageDescription, shape: shape || 'circular' }, rest), { active: active, activeAppearance: activeAppearance }),
|
|
49
46
|
state: __assign({}, state),
|
|
50
47
|
};
|
|
51
48
|
};
|
package/lib/useAvatar.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useAvatar.js","sourceRoot":"","sources":["../src/useAvatar.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AACA
|
|
1
|
+
{"version":3,"file":"useAvatar.js","sourceRoot":"","sources":["../src/useAvatar.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AACA;;;;;;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,aAAa,GAA+D,KAAK,cAApE,EAAE,QAAQ,GAAqD,KAAK,SAA1D,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,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,kBAAkB,oBAAA;QAClB,QAAQ,UAAA;QACR,eAAe,iBAAA;KAChB,CAAC;IAEF,OAAO;QACL,KAAK,sBACH,aAAa,EAAE,aAAa,IAAI,KAAK,EACrC,QAAQ,EAAE,QAAQ,IAAI,WAAW,EACjC,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;
|
|
1
|
+
{"version":3,"file":"JSAvatar.d.ts","sourceRoot":"","sources":["../src/JSAvatar.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAA8B,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAM5F;;;;;;;GAOG;AACH,eAAO,MAAM,YAAY,UAAW,MAAM,SAAS,aAAa,aAAa,aAAa,KAAG,OAQ5F,CAAC;AAEF,eAAO,MAAM,QAAQ,8KAoCnB,CAAC"}
|
|
@@ -1,13 +1,10 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { ImageURISource } from 'react-native';
|
|
3
|
-
export declare function getPresenceIconSource(presence: AvatarPresence, isOutOfOffice: boolean): ImageURISource;
|
|
1
|
+
import { AvatarColor, JSAvatarTokens } from './JSAvatar.types';
|
|
4
2
|
export declare type AvatarSizeConfig = {
|
|
5
3
|
physicalSize: number;
|
|
6
4
|
iconSize: number;
|
|
7
5
|
iconStrokeWidth: number;
|
|
8
6
|
initialsSize: number;
|
|
9
7
|
};
|
|
10
|
-
export declare function getSizeConfig(size: AvatarSize): AvatarSizeConfig;
|
|
11
8
|
/**
|
|
12
9
|
* Converts the AvatarColor into a hex color value
|
|
13
10
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"JSAvatar.helpers.d.ts","sourceRoot":"","sources":["../src/JSAvatar.helpers.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"JSAvatar.helpers.d.ts","sourceRoot":"","sources":["../src/JSAvatar.helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAc,WAAW,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAS3E,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;AAwCF;;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,53 +1,26 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.getRingConfig = exports.calculateEffectiveSizes = exports.convertCoinColorFluent =
|
|
3
|
+
exports.getRingConfig = exports.calculateEffectiveSizes = exports.convertCoinColorFluent = void 0;
|
|
4
4
|
var theme_tokens_1 = require("@fluentui-react-native/theme-tokens");
|
|
5
|
-
var presenceIconCache = {
|
|
6
|
-
none: { uri: '' },
|
|
7
|
-
offline: {
|
|
8
|
-
uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAANlBMVEUAAACoxM+oxM+oxM+oxM+oxM+oxM+oxM+oxM////+oxM/W5OmzzNX5+/z3+vvu9Pbt8/Xj7PAAKKEtAAAACXRSTlMA6bWcZQpiXgXWfJCWAAAAeElEQVQoz52RSQ7EIAwEx0AWymT7/2dHYpgoPvQldeySsGl/XjOVZGCpTDFfjIEtj3jN0Pzc99Mb5PUWGbwOHPI/n+GqNxfMY67h9YFjvw0KrQYapYuER+GkLowjigPrArYoNpBCPiWHy3XlB1UlqkRZuziUPO1bvszLC8V87ko/AAAAAElFTkSuQmCC',
|
|
9
|
-
},
|
|
10
|
-
online: {
|
|
11
|
-
uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAAWlBMVEUAAABusAVusAVusAVusAVusAVusAVusAVusAVusAVusAVusAVusAVusAVusAVusAVusAVusAVusAX////N4bi61517tivn8d3e7NL3+vTE3Kux0o6nzH6GvEWFZ26xAAAAEnRSTlMA8eNrEQj6syHTeXrKshzZ19JHa6QpAAAApUlEQVQoz4WS6w7CIAyFBwwGbE5th87b+7+mCDXcIp4/NN9J2tJ2+KdRTFyx0yTGAkvLgMRmmbg2kMnoL185FOIr5Vmg0hKzWWhkQz+sNdinN1Eg9wyP8MYh5xvewjt5gxcct9iYN1SIXvsj46C8EWvfEZ0jTsYxRJcrYuLAqTg5xKm4AHL2xEH8/GBvJIM819xIWkc9dt1ZFEnO+WrbY1CcjqGnN0xiGcyuKFtcAAAAAElFTkSuQmCC',
|
|
12
|
-
},
|
|
13
|
-
away: {
|
|
14
|
-
uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAAP1BMVEUAAAD6yRT6yRT6yRT6yRT6yRT6yRT6yRT6yRT6yRT6yRT6yRT////6zCP95pH95Yv++OL84Hn822T72FT71EUen9LHAAAAC3RSTlMA6rVlCuWgmGJeBd4LCPMAAAB8SURBVCjPnZFLDoAgDERtQUUH/97/rCYNJUITTXjLeYu2064Z75gAYufLfOqR6KdXPI94Mc5ZDCgYNA8piHGBENJcqgV5EQ61gBPBVrAIsoJEwArUYi0EIbFlQ+VwHGpY11XOGDdZVw/MXPstB2olFeGnRFv796Psa1t5ANwFDZEW8B8sAAAAAElFTkSuQmCC',
|
|
15
|
-
},
|
|
16
|
-
dnd: {
|
|
17
|
-
uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAAQlBMVEUAAADpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABv////wfYT86errJjiR9OLxAAAAEXRSTlMA4/CzeQj602seEhEk89jKakfnNfsAAACKSURBVCjPhZFbDoQgDEWBQkHBR2d0/1udEppR0cbzeU9SSq95I69gcZphzZc4eEeC8+HIh0gn4vDPLV2wYsJCHUub5umGr/no7sKNLBI9kFjAkwAWbaX9K+xtMRZIle0jbFRBFpMmZmWU8ri+rv5B/SQmxD6PUknpz16MUJSi9GqZnMAiWkjZvPADxcoYalVfnOMAAAAASUVORK5CYII=',
|
|
18
|
-
},
|
|
19
|
-
blocked: {
|
|
20
|
-
uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAAe1BMVEUAAADpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABv////pABv83uHqCiTsJz7rGjP7zNHvRVj/+vv+8vP6x83sIzv2mqXsKD/7zNL5v8b3oqz2maTuP1P82Nz819vtKUDrGjLrGTK2dyGvAAAAEXRSTlMA8dSzeQj64mseEhHkJMpq5T3coEAAAADSSURBVCjPhdHZFoIgFAVQGQRLGzhQiaLNw/9/YZRk4IvncZ+17uJys7mUGyYFoWxTJpxzghDC878vKFBftLX6UgN0MXqF/qRCTg5VaPI1ro36Re+MWQ/TOPrEXw7840uCNvb9oQVZ+qJAnbpSNQpfMHQTVx2YLyT0xJWG9IWAnbiyEL4gaCKPCopb7P9RDOeJqzNYeG7i3+eGBVMPC2Yczpn9cfTmAT58IoV5Rn4FDSdZbY1rxzk9qpXHofkcqtO2uXfhUHOn9SkLJoWQrCizmbwBa5IbuX8ugpIAAAAASUVORK5CYII=',
|
|
21
|
-
},
|
|
22
|
-
busy: {
|
|
23
|
-
uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAANlBMVEUAAADpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvsgIdoAAAAEXRSTlMA8eLUEQj6s2sheXrlyrJqHBqb3nMAAAB/SURBVCjPhZFRDsQgCEQFEdS223L/yy7JummtGN/nvASUCSvoFGSIclIXpwragC3deYn6IJZ/fqF24NXmHPri+E2rOlCDQTAKIBNZHbKJjyfEBHoCTbAn2ATMRPRHzZfPn+t/cH4SIw3rY2p17H2+l0VRRtr8ag3KgswomcKCL1NmGBp9lqsZAAAAAElFTkSuQmCC',
|
|
24
|
-
},
|
|
25
|
-
};
|
|
26
|
-
var presenceOOFIconCache = presenceIconCache;
|
|
27
5
|
var sizeAdjustment = {
|
|
28
6
|
small: 8,
|
|
29
7
|
medium: 12,
|
|
30
8
|
large: 16,
|
|
31
9
|
};
|
|
32
|
-
function getPresenceIconSource(presence, isOutOfOffice) {
|
|
33
|
-
return isOutOfOffice ? presenceOOFIconCache[presence] : presenceIconCache[presence];
|
|
34
|
-
}
|
|
35
|
-
exports.getPresenceIconSource = getPresenceIconSource;
|
|
36
10
|
var sizeTable = {
|
|
37
|
-
|
|
38
|
-
size24: { physicalSize: 24, iconSize:
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
11
|
+
size20: { physicalSize: 20, iconSize: 10, iconStrokeWidth: 2, initialsSize: 16 },
|
|
12
|
+
size24: { physicalSize: 24, iconSize: 10, iconStrokeWidth: 2, initialsSize: 16 },
|
|
13
|
+
size28: { physicalSize: 28, iconSize: 16, iconStrokeWidth: 2, initialsSize: 20 },
|
|
14
|
+
size32: { physicalSize: 32, iconSize: 16, iconStrokeWidth: 2, initialsSize: 20 },
|
|
15
|
+
size36: { physicalSize: 36, iconSize: 16, iconStrokeWidth: 2, initialsSize: 20 },
|
|
16
|
+
size40: { physicalSize: 40, iconSize: 16, iconStrokeWidth: 2, initialsSize: 20 },
|
|
17
|
+
size48: { physicalSize: 48, iconSize: 20, iconStrokeWidth: 2, initialsSize: 24 },
|
|
18
|
+
size56: { physicalSize: 56, iconSize: 24, iconStrokeWidth: 3, initialsSize: 28 },
|
|
19
|
+
size64: { physicalSize: 64, iconSize: 28, iconStrokeWidth: 3, initialsSize: 32 },
|
|
20
|
+
size72: { physicalSize: 72, iconSize: 28, iconStrokeWidth: 4, initialsSize: 32 },
|
|
21
|
+
size96: { physicalSize: 96, iconSize: 40, iconStrokeWidth: 4, initialsSize: 48 },
|
|
22
|
+
size120: { physicalSize: 120, iconSize: 40, iconStrokeWidth: 4, initialsSize: 48 },
|
|
46
23
|
};
|
|
47
|
-
function getSizeConfig(size) {
|
|
48
|
-
return sizeTable[size];
|
|
49
|
-
}
|
|
50
|
-
exports.getSizeConfig = getSizeConfig;
|
|
51
24
|
var colorTableFluent = {
|
|
52
25
|
cornflower: theme_tokens_1.globalTokens.color.cornflower.primary,
|
|
53
26
|
blue: theme_tokens_1.globalTokens.color.blue.primary,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"JSAvatar.helpers.js","sourceRoot":"","sources":["../src/JSAvatar.helpers.ts"],"names":[],"mappings":";;;
|
|
1
|
+
{"version":3,"file":"JSAvatar.helpers.js","sourceRoot":"","sources":["../src/JSAvatar.helpers.ts"],"names":[],"mappings":";;;AACA,oEAAmE;AAEnE,IAAM,cAAc,GAAG;IACrB,KAAK,EAAE,CAAC;IACR,MAAM,EAAE,EAAE;IACV,KAAK,EAAE,EAAE;CACV,CAAC;AASF,IAAM,SAAS,GAA4C;IACzD,MAAM,EAAE,EAAE,YAAY,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,eAAe,EAAE,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE;IAChF,MAAM,EAAE,EAAE,YAAY,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,eAAe,EAAE,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE;IAChF,MAAM,EAAE,EAAE,YAAY,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,eAAe,EAAE,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE;IAChF,MAAM,EAAE,EAAE,YAAY,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,eAAe,EAAE,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE;IAChF,MAAM,EAAE,EAAE,YAAY,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,eAAe,EAAE,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE;IAChF,MAAM,EAAE,EAAE,YAAY,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,eAAe,EAAE,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE;IAChF,MAAM,EAAE,EAAE,YAAY,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,eAAe,EAAE,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE;IAChF,MAAM,EAAE,EAAE,YAAY,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,eAAe,EAAE,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE;IAChF,MAAM,EAAE,EAAE,YAAY,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,eAAe,EAAE,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE;IAChF,MAAM,EAAE,EAAE,YAAY,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,eAAe,EAAE,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE;IAChF,MAAM,EAAE,EAAE,YAAY,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,eAAe,EAAE,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE;IAChF,OAAO,EAAE,EAAE,YAAY,EAAE,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE,eAAe,EAAE,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE;CACnF,CAAC;AAEF,IAAM,gBAAgB,GAAmC;IACvD,UAAU,EAAE,2BAAY,CAAC,KAAK,CAAC,UAAU,CAAC,OAAO;IACjD,IAAI,EAAE,2BAAY,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO;IACrC,SAAS,EAAE,2BAAY,CAAC,KAAK,CAAC,SAAS,CAAC,OAAO;IAC/C,IAAI,EAAE,2BAAY,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO;IACrC,MAAM,EAAE,2BAAY,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO;IACzC,SAAS,EAAE,2BAAY,CAAC,KAAK,CAAC,SAAS,CAAC,OAAO;IAC/C,KAAK,EAAE,2BAAY,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO;IACvC,OAAO,EAAE,2BAAY,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO;IAC3C,KAAK,EAAE,2BAAY,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO;IACvC,MAAM,EAAE,2BAAY,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO;IACzC,OAAO,EAAE,2BAAY,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO;IAC3C,GAAG,EAAE,2BAAY,CAAC,KAAK,CAAC,GAAG,CAAC,OAAO;IACnC,QAAQ,EAAE,2BAAY,CAAC,KAAK,CAAC,QAAQ,CAAC,OAAO;IAC7C,MAAM,EAAE,2BAAY,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO;IACzC,KAAK,EAAE,2BAAY,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO;IACvC,OAAO,EAAE,2BAAY,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO;IAC3C,KAAK,EAAE,2BAAY,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO;IACvC,QAAQ,EAAE,2BAAY,CAAC,KAAK,CAAC,QAAQ,CAAC,OAAO;IAC7C,KAAK,EAAE,2BAAY,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO;IACvC,KAAK,EAAE,2BAAY,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO;CACxC,CAAC;AAEF;;GAEG;AACH,SAAgB,sBAAsB,CAAC,SAAsB;IAC3D,OAAO,gBAAgB,CAAC,SAAS,CAAC,CAAC;AACrC,CAAC;AAFD,wDAEC;AAED,SAAgB,uBAAuB,CAAC,MAAsB;IACpD,IAAA,IAAI,GAA0D,MAAM,KAAhE,EAAE,UAAU,GAA8C,MAAM,WAApD,EAAE,QAAQ,GAAoC,MAAM,SAA1C,EAAE,eAAe,GAAmB,MAAM,gBAAzB,EAAE,YAAY,GAAK,MAAM,aAAX,CAAY;IAE7E,IAAI,IAAI,EAAE;QACR,OAAO,SAAS,CAAC,IAAI,CAAC,CAAC;KACxB;SAAM;QACC,IAAA,KAKF,SAAS,CAAC,QAAQ,CAAC,EAJP,mBAAmB,kBAAA,EACvB,eAAe,cAAA,EACR,sBAAsB,qBAAA,EACzB,mBAAmB,kBACZ,CAAC;QAExB,OAAO;YACL,YAAY,EAAE,UAAU,IAAI,mBAAmB;YAC/C,QAAQ,EAAE,QAAQ,IAAI,eAAe;YACrC,eAAe,EAAE,eAAe,IAAI,sBAAsB;YAC1D,YAAY,EAAE,YAAY,IAAI,mBAAmB;SAClD,CAAC;KACH;AACH,CAAC;AApBD,0DAoBC;AAED,SAAgB,aAAa,CAAC,IAAY;IACxC,IAAI,IAAI,IAAI,EAAE,EAAE;QACd,OAAO;YACL,IAAI,EAAE,IAAI,GAAG,cAAc,CAAC,KAAK;YACjC,MAAM,EAAE,2BAAY,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK;YACvC,WAAW,EAAE,2BAAY,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK;SAC7C,CAAC;KACH;IACD,IAAI,IAAI,IAAI,EAAE,EAAE;QACd,OAAO;YACL,IAAI,EAAE,IAAI,GAAG,cAAc,CAAC,MAAM;YAClC,MAAM,EAAE,2BAAY,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO;YACzC,WAAW,EAAE,2BAAY,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO;SAC/C,CAAC;KACH;IACD,OAAO;QACL,IAAI,EAAE,IAAI,GAAG,cAAc,CAAC,KAAK;QACjC,MAAM,EAAE,2BAAY,CAAC,MAAM,CAAC,KAAK,CAAC,QAAQ;QAC1C,WAAW,EAAE,2BAAY,CAAC,MAAM,CAAC,KAAK,CAAC,QAAQ;KAChD,CAAC;AACJ,CAAC;AApBD,sCAoBC"}
|
package/lib-commonjs/JSAvatar.js
CHANGED
|
@@ -29,6 +29,7 @@ var JSAvatar_types_1 = require("./JSAvatar.types");
|
|
|
29
29
|
var JSAvatar_styling_1 = require("./JSAvatar.styling");
|
|
30
30
|
var framework_1 = require("@fluentui-react-native/framework");
|
|
31
31
|
var useAvatar_1 = require("./useAvatar");
|
|
32
|
+
var badge_1 = require("@fluentui-react-native/badge");
|
|
32
33
|
/**
|
|
33
34
|
* A function which determines if a set of styles should be applied to the compoent given the current state and props of the avatar.
|
|
34
35
|
*
|
|
@@ -57,14 +58,14 @@ exports.JSAvatar = (0, framework_1.compose)(__assign(__assign({ displayName: JSA
|
|
|
57
58
|
var avatar = (0, useAvatar_1.useAvatar)(userProps);
|
|
58
59
|
var Slots = useSlots(userProps, function (layer) { return (0, exports.avatarLookup)(layer, avatar.state, userProps); });
|
|
59
60
|
return function (final) {
|
|
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"]);
|
|
61
|
-
var _b = avatar.state, personaPhotoSource = _b.personaPhotoSource,
|
|
61
|
+
var _a = (0, framework_1.mergeProps)(avatar.props, final), children = _a.children, accessibilityLabel = _a.accessibilityLabel, presence = _a.presence, activeAppearance = _a.activeAppearance, isOutOfOffice = _a.isOutOfOffice, mergedProps = __rest(_a, ["children", "accessibilityLabel", "presence", "activeAppearance", "isOutOfOffice"]);
|
|
62
|
+
var _b = avatar.state, personaPhotoSource = _b.personaPhotoSource, showRing = _b.showRing, transparentRing = _b.transparentRing;
|
|
62
63
|
return ((0, framework_1.withSlots)(Slots.root, __assign({}, mergedProps),
|
|
63
64
|
personaPhotoSource ? ((0, framework_1.withSlots)(Slots.photo, { accessibilityLabel: accessibilityLabel, source: personaPhotoSource })) : ((0, framework_1.withSlots)(Slots.initialsBackground, null,
|
|
64
65
|
(0, framework_1.withSlots)(Slots.initials, null, children))),
|
|
65
66
|
showRing && !transparentRing && (0, framework_1.withSlots)(Slots.ring, null),
|
|
66
67
|
activeAppearance === 'glow' && (0, framework_1.withSlots)(Slots.glow, null),
|
|
67
|
-
|
|
68
|
+
(0, framework_1.withSlots)(badge_1.PresenceBadge, { size: "small", shape: "circular", presence: presence, isOutOfOffice: isOutOfOffice })));
|
|
68
69
|
};
|
|
69
70
|
} }));
|
|
70
71
|
//# sourceMappingURL=JSAvatar.js.map
|
|
@@ -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;
|
|
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;AACxC,sDAA6D;AAE7D;;;;;;;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,SAAS,EAAE,UAAC,SAAwB,EAAE,QAAgC;QACpE,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,KAA8F,IAAA,sBAAU,EAAC,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,EAA3H,QAAQ,cAAA,EAAE,kBAAkB,wBAAA,EAAE,QAAQ,cAAA,EAAE,gBAAgB,sBAAA,EAAE,aAAa,mBAAA,EAAK,WAAW,cAAzF,mFAA2F,CAAkC,CAAC;YAC9H,IAAA,KAAoD,MAAM,CAAC,KAAK,EAA9D,kBAAkB,wBAAA,EAAE,QAAQ,cAAA,EAAE,eAAe,qBAAiB,CAAC;YAEvE,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;gBAC9C,2BAAC,qBAAa,IAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,UAAU,EAAC,QAAQ,EAAE,QAAQ,EAAE,aAAa,EAAE,aAAa,GAAI,CACtF,CACd,CAAC;QACJ,CAAC,CAAC;IACJ,CAAC,IACD,CAAC"}
|
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
import type { IViewProps } from '@fluentui-react-native/adapters';
|
|
2
2
|
import { ImageProps, ViewProps, ImageURISource, TextProps, ColorValue } from 'react-native';
|
|
3
3
|
import { IBackgroundColorTokens, IForegroundColorTokens, IBorderTokens } from '@fluentui-react-native/tokens';
|
|
4
|
+
import { Presence } from '@fluentui-react-native/badge';
|
|
4
5
|
export declare const JSAvatarName = "Avatar";
|
|
5
|
-
export declare
|
|
6
|
+
export declare const AvatarSizes: readonly ["size20", "size24", "size28", "size32", "size36", "size40", "size48", "size56", "size64", "size72", "size96", "size120"];
|
|
7
|
+
export declare type AvatarSize = typeof AvatarSizes[number];
|
|
6
8
|
export declare type AvatarShape = 'circular' | 'square';
|
|
7
9
|
export declare type AvatarActive = 'active' | 'inactive' | 'unset';
|
|
8
10
|
export declare type AvatarActiveAppearance = 'ring' | 'shadow' | 'glow' | 'ring-shadow' | 'ring-glow';
|
|
@@ -10,7 +12,7 @@ export declare type AvatarActiveAppearance = 'ring' | 'shadow' | 'glow' | 'ring-
|
|
|
10
12
|
* Sets color of the avatar when there is no picture. Uses fluent color names
|
|
11
13
|
*/
|
|
12
14
|
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
|
-
export declare type AvatarPresence =
|
|
15
|
+
export declare type AvatarPresence = Presence;
|
|
14
16
|
export interface RingConfig {
|
|
15
17
|
accent?: boolean;
|
|
16
18
|
transparent?: boolean;
|
|
@@ -61,7 +63,6 @@ export interface JSAvatarTokens extends IBackgroundColorTokens, IForegroundColor
|
|
|
61
63
|
}
|
|
62
64
|
export interface JSAvatarState {
|
|
63
65
|
personaPhotoSource: ImageURISource | undefined;
|
|
64
|
-
iconSource: ImageURISource | undefined;
|
|
65
66
|
showRing: boolean;
|
|
66
67
|
transparentRing: boolean;
|
|
67
68
|
}
|
|
@@ -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;
|
|
1
|
+
{"version":3,"file":"JSAvatar.types.d.ts","sourceRoot":"","sources":["../src/JSAvatar.types.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,5 +1,19 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.JSAvatarName = void 0;
|
|
3
|
+
exports.AvatarSizes = exports.JSAvatarName = void 0;
|
|
4
4
|
exports.JSAvatarName = 'Avatar';
|
|
5
|
+
exports.AvatarSizes = [
|
|
6
|
+
'size20',
|
|
7
|
+
'size24',
|
|
8
|
+
'size28',
|
|
9
|
+
'size32',
|
|
10
|
+
'size36',
|
|
11
|
+
'size40',
|
|
12
|
+
'size48',
|
|
13
|
+
'size56',
|
|
14
|
+
'size64',
|
|
15
|
+
'size72',
|
|
16
|
+
'size96',
|
|
17
|
+
'size120',
|
|
18
|
+
];
|
|
5
19
|
//# sourceMappingURL=JSAvatar.types.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"JSAvatar.types.js","sourceRoot":"","sources":["../src/JSAvatar.types.ts"],"names":[],"mappings":";;;
|
|
1
|
+
{"version":3,"file":"JSAvatar.types.js","sourceRoot":"","sources":["../src/JSAvatar.types.ts"],"names":[],"mappings":";;;AAKa,QAAA,YAAY,GAAG,QAAQ,CAAC;AACxB,QAAA,WAAW,GAAG;IACzB,QAAQ;IACR,QAAQ;IACR,QAAQ;IACR,QAAQ;IACR,QAAQ;IACR,QAAQ;IACR,QAAQ;IACR,QAAQ;IACR,QAAQ;IACR,QAAQ;IACR,QAAQ;IACR,SAAS;CACD,CAAC"}
|
|
@@ -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;
|
|
1
|
+
{"version":3,"file":"useAvatar.d.ts","sourceRoot":"","sources":["../src/useAvatar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAiB,MAAM,kBAAkB,CAAC;AAC5E;;;;;;GAMG;AACH,eAAO,MAAM,SAAS,UAAW,aAAa,KAAG,UAkChD,CAAC"}
|
|
@@ -23,7 +23,6 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
23
23
|
};
|
|
24
24
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
25
25
|
exports.useAvatar = void 0;
|
|
26
|
-
var JSAvatar_helpers_1 = require("./JSAvatar.helpers");
|
|
27
26
|
/**
|
|
28
27
|
* Re-usable hook for FURN Avatar.
|
|
29
28
|
* This hook configures Avatar props and state for FURN Avatar.
|
|
@@ -32,23 +31,21 @@ var JSAvatar_helpers_1 = require("./JSAvatar.helpers");
|
|
|
32
31
|
* @returns configured props and state for FURN Avatar
|
|
33
32
|
*/
|
|
34
33
|
var useAvatar = function (props) {
|
|
35
|
-
var imageUrl = props.imageUrl, imageDescription = props.imageDescription, initials = props.initials,
|
|
34
|
+
var imageUrl = props.imageUrl, imageDescription = props.imageDescription, initials = props.initials, isOutOfOffice = props.isOutOfOffice, presence = props.presence, ring = props.ring, shape = props.shape, active = props.active, activeAppearance = props.activeAppearance, rest = __rest(props, ["imageUrl", "imageDescription", "initials", "isOutOfOffice", "presence", "ring", "shape", "active", "activeAppearance"]);
|
|
36
35
|
var personaPhotoSource = imageUrl === undefined
|
|
37
36
|
? undefined
|
|
38
37
|
: {
|
|
39
38
|
uri: imageUrl,
|
|
40
39
|
};
|
|
41
|
-
var iconSource = presence === undefined ? undefined : (0, JSAvatar_helpers_1.getPresenceIconSource)(presence, isOutOfOffice || false);
|
|
42
40
|
var showRing = active === 'active' && activeAppearance === 'ring';
|
|
43
41
|
var transparentRing = !!(ring === null || ring === void 0 ? void 0 : ring.transparent);
|
|
44
42
|
var state = {
|
|
45
|
-
iconSource: iconSource,
|
|
46
43
|
personaPhotoSource: personaPhotoSource,
|
|
47
44
|
showRing: showRing,
|
|
48
45
|
transparentRing: transparentRing,
|
|
49
46
|
};
|
|
50
47
|
return {
|
|
51
|
-
props: __assign(__assign({ children: initials, accessibilityLabel: imageDescription, shape: shape || 'circular' }, rest), { active: active, activeAppearance: activeAppearance }),
|
|
48
|
+
props: __assign(__assign({ isOutOfOffice: isOutOfOffice || false, presence: presence || 'available', children: initials, accessibilityLabel: imageDescription, shape: shape || 'circular' }, rest), { active: active, activeAppearance: activeAppearance }),
|
|
52
49
|
state: __assign({}, state),
|
|
53
50
|
};
|
|
54
51
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useAvatar.js","sourceRoot":"","sources":["../src/useAvatar.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AACA
|
|
1
|
+
{"version":3,"file":"useAvatar.js","sourceRoot":"","sources":["../src/useAvatar.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AACA;;;;;;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,aAAa,GAA+D,KAAK,cAApE,EAAE,QAAQ,GAAqD,KAAK,SAA1D,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,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,kBAAkB,oBAAA;QAClB,QAAQ,UAAA;QACR,eAAe,iBAAA;KAChB,CAAC;IAEF,OAAO;QACL,KAAK,sBACH,aAAa,EAAE,aAAa,IAAI,KAAK,EACrC,QAAQ,EAAE,QAAQ,IAAI,WAAW,EACjC,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.14.
|
|
3
|
+
"version": "0.14.14",
|
|
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,6 +26,7 @@
|
|
|
26
26
|
},
|
|
27
27
|
"dependencies": {
|
|
28
28
|
"@fluentui-react-native/adapters": "^0.8.5",
|
|
29
|
+
"@fluentui-react-native/badge": "^0.0.27",
|
|
29
30
|
"@fluentui-react-native/component-cache": "^1.3.2",
|
|
30
31
|
"@fluentui-react-native/framework": "0.7.22",
|
|
31
32
|
"@fluentui-react-native/theme-tokens": "^0.16.0",
|
|
@@ -34,13 +35,13 @@
|
|
|
34
35
|
},
|
|
35
36
|
"devDependencies": {
|
|
36
37
|
"@fluentui-react-native/eslint-config-rules": "^0.1.1",
|
|
37
|
-
"@types/react-native": "^0.64.0",
|
|
38
38
|
"@fluentui-react-native/scripts": "^0.1.1",
|
|
39
|
-
"react-native": "^0.64.
|
|
40
|
-
"react": "17.0.1"
|
|
39
|
+
"@types/react-native": "^0.64.0",
|
|
40
|
+
"react": "17.0.1",
|
|
41
|
+
"react-native": "^0.64.3"
|
|
41
42
|
},
|
|
42
43
|
"peerDependencies": {
|
|
43
|
-
"react
|
|
44
|
-
"react": "
|
|
44
|
+
"react": "17.0.1",
|
|
45
|
+
"react-native": ">=0.64.3"
|
|
45
46
|
}
|
|
46
47
|
}
|
package/src/JSAvatar.helpers.ts
CHANGED
|
@@ -1,40 +1,12 @@
|
|
|
1
|
-
import { AvatarSize, AvatarColor,
|
|
2
|
-
import { ImageURISource } from 'react-native';
|
|
1
|
+
import { AvatarSize, AvatarColor, JSAvatarTokens } from './JSAvatar.types';
|
|
3
2
|
import { globalTokens } from '@fluentui-react-native/theme-tokens';
|
|
4
3
|
|
|
5
|
-
const presenceIconCache: { [key in AvatarPresence]: ImageURISource } = {
|
|
6
|
-
none: { uri: '' },
|
|
7
|
-
offline: {
|
|
8
|
-
uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAANlBMVEUAAACoxM+oxM+oxM+oxM+oxM+oxM+oxM+oxM////+oxM/W5OmzzNX5+/z3+vvu9Pbt8/Xj7PAAKKEtAAAACXRSTlMA6bWcZQpiXgXWfJCWAAAAeElEQVQoz52RSQ7EIAwEx0AWymT7/2dHYpgoPvQldeySsGl/XjOVZGCpTDFfjIEtj3jN0Pzc99Mb5PUWGbwOHPI/n+GqNxfMY67h9YFjvw0KrQYapYuER+GkLowjigPrArYoNpBCPiWHy3XlB1UlqkRZuziUPO1bvszLC8V87ko/AAAAAElFTkSuQmCC',
|
|
9
|
-
},
|
|
10
|
-
online: {
|
|
11
|
-
uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAAWlBMVEUAAABusAVusAVusAVusAVusAVusAVusAVusAVusAVusAVusAVusAVusAVusAVusAVusAVusAVusAX////N4bi61517tivn8d3e7NL3+vTE3Kux0o6nzH6GvEWFZ26xAAAAEnRSTlMA8eNrEQj6syHTeXrKshzZ19JHa6QpAAAApUlEQVQoz4WS6w7CIAyFBwwGbE5th87b+7+mCDXcIp4/NN9J2tJ2+KdRTFyx0yTGAkvLgMRmmbg2kMnoL185FOIr5Vmg0hKzWWhkQz+sNdinN1Eg9wyP8MYh5xvewjt5gxcct9iYN1SIXvsj46C8EWvfEZ0jTsYxRJcrYuLAqTg5xKm4AHL2xEH8/GBvJIM819xIWkc9dt1ZFEnO+WrbY1CcjqGnN0xiGcyuKFtcAAAAAElFTkSuQmCC',
|
|
12
|
-
},
|
|
13
|
-
away: {
|
|
14
|
-
uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAAP1BMVEUAAAD6yRT6yRT6yRT6yRT6yRT6yRT6yRT6yRT6yRT6yRT6yRT////6zCP95pH95Yv++OL84Hn822T72FT71EUen9LHAAAAC3RSTlMA6rVlCuWgmGJeBd4LCPMAAAB8SURBVCjPnZFLDoAgDERtQUUH/97/rCYNJUITTXjLeYu2064Z75gAYufLfOqR6KdXPI94Mc5ZDCgYNA8piHGBENJcqgV5EQ61gBPBVrAIsoJEwArUYi0EIbFlQ+VwHGpY11XOGDdZVw/MXPstB2olFeGnRFv796Psa1t5ANwFDZEW8B8sAAAAAElFTkSuQmCC',
|
|
15
|
-
},
|
|
16
|
-
dnd: {
|
|
17
|
-
uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAAQlBMVEUAAADpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABv////wfYT86errJjiR9OLxAAAAEXRSTlMA4/CzeQj602seEhEk89jKakfnNfsAAACKSURBVCjPhZFbDoQgDEWBQkHBR2d0/1udEppR0cbzeU9SSq95I69gcZphzZc4eEeC8+HIh0gn4vDPLV2wYsJCHUub5umGr/no7sKNLBI9kFjAkwAWbaX9K+xtMRZIle0jbFRBFpMmZmWU8ri+rv5B/SQmxD6PUknpz16MUJSi9GqZnMAiWkjZvPADxcoYalVfnOMAAAAASUVORK5CYII=',
|
|
18
|
-
},
|
|
19
|
-
blocked: {
|
|
20
|
-
uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAAe1BMVEUAAADpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABv////pABv83uHqCiTsJz7rGjP7zNHvRVj/+vv+8vP6x83sIzv2mqXsKD/7zNL5v8b3oqz2maTuP1P82Nz819vtKUDrGjLrGTK2dyGvAAAAEXRSTlMA8dSzeQj64mseEhHkJMpq5T3coEAAAADSSURBVCjPhdHZFoIgFAVQGQRLGzhQiaLNw/9/YZRk4IvncZ+17uJys7mUGyYFoWxTJpxzghDC878vKFBftLX6UgN0MXqF/qRCTg5VaPI1ro36Re+MWQ/TOPrEXw7840uCNvb9oQVZ+qJAnbpSNQpfMHQTVx2YLyT0xJWG9IWAnbiyEL4gaCKPCopb7P9RDOeJqzNYeG7i3+eGBVMPC2Yczpn9cfTmAT58IoV5Rn4FDSdZbY1rxzk9qpXHofkcqtO2uXfhUHOn9SkLJoWQrCizmbwBa5IbuX8ugpIAAAAASUVORK5CYII=',
|
|
21
|
-
},
|
|
22
|
-
busy: {
|
|
23
|
-
uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAANlBMVEUAAADpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvsgIdoAAAAEXRSTlMA8eLUEQj6s2sheXrlyrJqHBqb3nMAAAB/SURBVCjPhZFRDsQgCEQFEdS223L/yy7JummtGN/nvASUCSvoFGSIclIXpwragC3deYn6IJZ/fqF24NXmHPri+E2rOlCDQTAKIBNZHbKJjyfEBHoCTbAn2ATMRPRHzZfPn+t/cH4SIw3rY2p17H2+l0VRRtr8ag3KgswomcKCL1NmGBp9lqsZAAAAAElFTkSuQmCC',
|
|
24
|
-
},
|
|
25
|
-
};
|
|
26
|
-
|
|
27
|
-
const presenceOOFIconCache = presenceIconCache;
|
|
28
4
|
const sizeAdjustment = {
|
|
29
5
|
small: 8,
|
|
30
6
|
medium: 12,
|
|
31
7
|
large: 16,
|
|
32
8
|
};
|
|
33
9
|
|
|
34
|
-
export function getPresenceIconSource(presence: AvatarPresence, isOutOfOffice: boolean): ImageURISource {
|
|
35
|
-
return isOutOfOffice ? presenceOOFIconCache[presence] : presenceIconCache[presence];
|
|
36
|
-
}
|
|
37
|
-
|
|
38
10
|
export type AvatarSizeConfig = {
|
|
39
11
|
physicalSize: number;
|
|
40
12
|
iconSize: number;
|
|
@@ -43,21 +15,20 @@ export type AvatarSizeConfig = {
|
|
|
43
15
|
};
|
|
44
16
|
|
|
45
17
|
const sizeTable: { [P in AvatarSize]: AvatarSizeConfig } = {
|
|
46
|
-
|
|
47
|
-
size24: { physicalSize: 24, iconSize:
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
18
|
+
size20: { physicalSize: 20, iconSize: 10, iconStrokeWidth: 2, initialsSize: 16 },
|
|
19
|
+
size24: { physicalSize: 24, iconSize: 10, iconStrokeWidth: 2, initialsSize: 16 },
|
|
20
|
+
size28: { physicalSize: 28, iconSize: 16, iconStrokeWidth: 2, initialsSize: 20 },
|
|
21
|
+
size32: { physicalSize: 32, iconSize: 16, iconStrokeWidth: 2, initialsSize: 20 },
|
|
22
|
+
size36: { physicalSize: 36, iconSize: 16, iconStrokeWidth: 2, initialsSize: 20 },
|
|
23
|
+
size40: { physicalSize: 40, iconSize: 16, iconStrokeWidth: 2, initialsSize: 20 },
|
|
24
|
+
size48: { physicalSize: 48, iconSize: 20, iconStrokeWidth: 2, initialsSize: 24 },
|
|
25
|
+
size56: { physicalSize: 56, iconSize: 24, iconStrokeWidth: 3, initialsSize: 28 },
|
|
26
|
+
size64: { physicalSize: 64, iconSize: 28, iconStrokeWidth: 3, initialsSize: 32 },
|
|
27
|
+
size72: { physicalSize: 72, iconSize: 28, iconStrokeWidth: 4, initialsSize: 32 },
|
|
28
|
+
size96: { physicalSize: 96, iconSize: 40, iconStrokeWidth: 4, initialsSize: 48 },
|
|
29
|
+
size120: { physicalSize: 120, iconSize: 40, iconStrokeWidth: 4, initialsSize: 48 },
|
|
55
30
|
};
|
|
56
31
|
|
|
57
|
-
export function getSizeConfig(size: AvatarSize): AvatarSizeConfig {
|
|
58
|
-
return sizeTable[size];
|
|
59
|
-
}
|
|
60
|
-
|
|
61
32
|
const colorTableFluent: { [P in AvatarColor]: string } = {
|
|
62
33
|
cornflower: globalTokens.color.cornflower.primary,
|
|
63
34
|
blue: globalTokens.color.blue.primary,
|
package/src/JSAvatar.tsx
CHANGED
|
@@ -4,6 +4,7 @@ import { JSAvatarProps, JSAvatarType, JSAvatarName, JSAvatarState } from './JSAv
|
|
|
4
4
|
import { stylingSettings } from './JSAvatar.styling';
|
|
5
5
|
import { compose, UseSlots, mergeProps, withSlots } from '@fluentui-react-native/framework';
|
|
6
6
|
import { useAvatar } from './useAvatar';
|
|
7
|
+
import { PresenceBadge } from '@fluentui-react-native/badge';
|
|
7
8
|
|
|
8
9
|
/**
|
|
9
10
|
* A function which determines if a set of styles should be applied to the compoent given the current state and props of the avatar.
|
|
@@ -40,8 +41,8 @@ export const JSAvatar = compose<JSAvatarType>({
|
|
|
40
41
|
const Slots = useSlots(userProps, (layer) => avatarLookup(layer, avatar.state, userProps));
|
|
41
42
|
|
|
42
43
|
return (final: JSAvatarProps) => {
|
|
43
|
-
const { children, accessibilityLabel, activeAppearance, ...mergedProps } = mergeProps(avatar.props, final);
|
|
44
|
-
const { personaPhotoSource,
|
|
44
|
+
const { children, accessibilityLabel, presence, activeAppearance, isOutOfOffice, ...mergedProps } = mergeProps(avatar.props, final);
|
|
45
|
+
const { personaPhotoSource, showRing, transparentRing } = avatar.state;
|
|
45
46
|
|
|
46
47
|
return (
|
|
47
48
|
<Slots.root {...mergedProps}>
|
|
@@ -54,7 +55,7 @@ export const JSAvatar = compose<JSAvatarType>({
|
|
|
54
55
|
)}
|
|
55
56
|
{showRing && !transparentRing && <Slots.ring />}
|
|
56
57
|
{activeAppearance === 'glow' && <Slots.glow />}
|
|
57
|
-
|
|
58
|
+
<PresenceBadge size="small" shape="circular" presence={presence} isOutOfOffice={isOutOfOffice} />
|
|
58
59
|
</Slots.root>
|
|
59
60
|
);
|
|
60
61
|
};
|
package/src/JSAvatar.types.ts
CHANGED
|
@@ -1,10 +1,24 @@
|
|
|
1
1
|
import type { IViewProps } from '@fluentui-react-native/adapters';
|
|
2
2
|
import { ImageProps, ViewProps, ImageURISource, TextProps, ColorValue } from 'react-native';
|
|
3
3
|
import { IBackgroundColorTokens, IForegroundColorTokens, IBorderTokens } from '@fluentui-react-native/tokens';
|
|
4
|
+
import { Presence } from '@fluentui-react-native/badge';
|
|
4
5
|
|
|
5
6
|
export const JSAvatarName = 'Avatar';
|
|
6
|
-
|
|
7
|
-
|
|
7
|
+
export const AvatarSizes = [
|
|
8
|
+
'size20',
|
|
9
|
+
'size24',
|
|
10
|
+
'size28',
|
|
11
|
+
'size32',
|
|
12
|
+
'size36',
|
|
13
|
+
'size40',
|
|
14
|
+
'size48',
|
|
15
|
+
'size56',
|
|
16
|
+
'size64',
|
|
17
|
+
'size72',
|
|
18
|
+
'size96',
|
|
19
|
+
'size120',
|
|
20
|
+
] as const;
|
|
21
|
+
export type AvatarSize = typeof AvatarSizes[number];
|
|
8
22
|
|
|
9
23
|
export type AvatarShape = 'circular' | 'square';
|
|
10
24
|
export type AvatarActive = 'active' | 'inactive' | 'unset';
|
|
@@ -35,8 +49,7 @@ export type AvatarColor =
|
|
|
35
49
|
| 'steel'
|
|
36
50
|
| 'brown';
|
|
37
51
|
|
|
38
|
-
export type AvatarPresence =
|
|
39
|
-
|
|
52
|
+
export type AvatarPresence = Presence;
|
|
40
53
|
export interface RingConfig {
|
|
41
54
|
accent?: boolean;
|
|
42
55
|
transparent?: boolean;
|
|
@@ -93,7 +106,6 @@ export interface JSAvatarTokens extends IBackgroundColorTokens, IForegroundColor
|
|
|
93
106
|
|
|
94
107
|
export interface JSAvatarState {
|
|
95
108
|
personaPhotoSource: ImageURISource | undefined;
|
|
96
|
-
iconSource: ImageURISource | undefined;
|
|
97
109
|
showRing: boolean;
|
|
98
110
|
transparentRing: boolean;
|
|
99
111
|
}
|
package/src/useAvatar.ts
CHANGED
|
@@ -1,6 +1,4 @@
|
|
|
1
1
|
import { JSAvatarProps, AvatarInfo, JSAvatarState } from './JSAvatar.types';
|
|
2
|
-
import { getPresenceIconSource } from './JSAvatar.helpers';
|
|
3
|
-
|
|
4
2
|
/**
|
|
5
3
|
* Re-usable hook for FURN Avatar.
|
|
6
4
|
* This hook configures Avatar props and state for FURN Avatar.
|
|
@@ -9,7 +7,7 @@ import { getPresenceIconSource } from './JSAvatar.helpers';
|
|
|
9
7
|
* @returns configured props and state for FURN Avatar
|
|
10
8
|
*/
|
|
11
9
|
export const useAvatar = (props: JSAvatarProps): AvatarInfo => {
|
|
12
|
-
const { imageUrl, imageDescription, initials,
|
|
10
|
+
const { imageUrl, imageDescription, initials, isOutOfOffice, presence, ring, shape, active, activeAppearance, ...rest } = props;
|
|
13
11
|
|
|
14
12
|
const personaPhotoSource =
|
|
15
13
|
imageUrl === undefined
|
|
@@ -18,12 +16,10 @@ export const useAvatar = (props: JSAvatarProps): AvatarInfo => {
|
|
|
18
16
|
uri: imageUrl,
|
|
19
17
|
};
|
|
20
18
|
|
|
21
|
-
const iconSource = presence === undefined ? undefined : getPresenceIconSource(presence, isOutOfOffice || false);
|
|
22
19
|
const showRing = active === 'active' && activeAppearance === 'ring';
|
|
23
20
|
const transparentRing = !!ring?.transparent;
|
|
24
21
|
|
|
25
22
|
const state: JSAvatarState = {
|
|
26
|
-
iconSource,
|
|
27
23
|
personaPhotoSource,
|
|
28
24
|
showRing,
|
|
29
25
|
transparentRing,
|
|
@@ -31,6 +27,8 @@ export const useAvatar = (props: JSAvatarProps): AvatarInfo => {
|
|
|
31
27
|
|
|
32
28
|
return {
|
|
33
29
|
props: {
|
|
30
|
+
isOutOfOffice: isOutOfOffice || false,
|
|
31
|
+
presence: presence || 'available',
|
|
34
32
|
children: initials,
|
|
35
33
|
accessibilityLabel: imageDescription,
|
|
36
34
|
shape: shape || 'circular',
|