@fluentui-react-native/experimental-avatar 0.13.1 → 0.13.5

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.
Files changed (40) hide show
  1. package/CHANGELOG.json +106 -1
  2. package/CHANGELOG.md +39 -2
  3. package/lib/JSAvatar.d.ts +10 -1
  4. package/lib/JSAvatar.d.ts.map +1 -1
  5. package/lib/JSAvatar.js +15 -4
  6. package/lib/JSAvatar.js.map +1 -1
  7. package/lib/JSAvatar.styling.d.ts +1 -0
  8. package/lib/JSAvatar.styling.d.ts.map +1 -1
  9. package/lib/JSAvatar.styling.js +30 -38
  10. package/lib/JSAvatar.styling.js.map +1 -1
  11. package/lib/JSAvatar.types.d.ts +10 -2
  12. package/lib/JSAvatar.types.d.ts.map +1 -1
  13. package/lib/JSAvatarTokens.d.ts.map +1 -1
  14. package/lib/JSAvatarTokens.js +7 -0
  15. package/lib/JSAvatarTokens.js.map +1 -1
  16. package/lib/useAvatar.d.ts.map +1 -1
  17. package/lib/useAvatar.js +2 -2
  18. package/lib/useAvatar.js.map +1 -1
  19. package/lib-commonjs/JSAvatar.d.ts +10 -1
  20. package/lib-commonjs/JSAvatar.d.ts.map +1 -1
  21. package/lib-commonjs/JSAvatar.js +15 -4
  22. package/lib-commonjs/JSAvatar.js.map +1 -1
  23. package/lib-commonjs/JSAvatar.styling.d.ts +1 -0
  24. package/lib-commonjs/JSAvatar.styling.d.ts.map +1 -1
  25. package/lib-commonjs/JSAvatar.styling.js +30 -38
  26. package/lib-commonjs/JSAvatar.styling.js.map +1 -1
  27. package/lib-commonjs/JSAvatar.types.d.ts +10 -2
  28. package/lib-commonjs/JSAvatar.types.d.ts.map +1 -1
  29. package/lib-commonjs/JSAvatarTokens.d.ts.map +1 -1
  30. package/lib-commonjs/JSAvatarTokens.js +7 -0
  31. package/lib-commonjs/JSAvatarTokens.js.map +1 -1
  32. package/lib-commonjs/useAvatar.d.ts.map +1 -1
  33. package/lib-commonjs/useAvatar.js +2 -2
  34. package/lib-commonjs/useAvatar.js.map +1 -1
  35. package/package.json +5 -5
  36. package/src/JSAvatar.styling.ts +13 -9
  37. package/src/JSAvatar.tsx +17 -5
  38. package/src/JSAvatar.types.ts +11 -2
  39. package/src/JSAvatarTokens.ts +7 -0
  40. package/src/useAvatar.ts +2 -1
package/CHANGELOG.json CHANGED
@@ -2,7 +2,112 @@
2
2
  "name": "@fluentui-react-native/experimental-avatar",
3
3
  "entries": [
4
4
  {
5
- "date": "Wed, 17 Nov 2021 21:06:50 GMT",
5
+ "date": "Fri, 17 Dec 2021 22:04:25 GMT",
6
+ "tag": "@fluentui-react-native/experimental-avatar_v0.13.5",
7
+ "version": "0.13.5",
8
+ "comments": {
9
+ "patch": [
10
+ {
11
+ "author": "beachball",
12
+ "package": "@fluentui-react-native/experimental-avatar",
13
+ "comment": "Bump @fluentui-react-native/framework to v0.7.4",
14
+ "commit": "b9ea5eb1409f37305169f75398fa7f41229cefbd"
15
+ }
16
+ ]
17
+ }
18
+ },
19
+ {
20
+ "date": "Fri, 17 Dec 2021 19:53:21 GMT",
21
+ "tag": "@fluentui-react-native/experimental-avatar_v0.13.4",
22
+ "version": "0.13.4",
23
+ "comments": {
24
+ "patch": [
25
+ {
26
+ "author": "beachball",
27
+ "package": "@fluentui-react-native/experimental-avatar",
28
+ "comment": "Bump @fluentui-react-native/framework to v0.7.3",
29
+ "commit": "3012e075ca89e36931357442679b73d20540af8b"
30
+ }
31
+ ]
32
+ }
33
+ },
34
+ {
35
+ "date": "Fri, 17 Dec 2021 01:26:42 GMT",
36
+ "tag": "@fluentui-react-native/experimental-avatar_v0.13.3",
37
+ "version": "0.13.3",
38
+ "comments": {
39
+ "patch": [
40
+ {
41
+ "author": "beachball",
42
+ "package": "@fluentui-react-native/experimental-avatar",
43
+ "comment": "Bump @fluentui-react-native/framework to v0.7.2",
44
+ "commit": "511aeb31982a5fb9dd2f7196c0c7217cc4a3dbc6"
45
+ },
46
+ {
47
+ "author": "beachball",
48
+ "package": "@fluentui-react-native/experimental-avatar",
49
+ "comment": "Bump @fluentui-react-native/theme-tokens to v0.11.1",
50
+ "commit": "511aeb31982a5fb9dd2f7196c0c7217cc4a3dbc6"
51
+ }
52
+ ]
53
+ }
54
+ },
55
+ {
56
+ "date": "Thu, 16 Dec 2021 23:00:56 GMT",
57
+ "tag": "@fluentui-react-native/experimental-avatar_v0.13.2",
58
+ "version": "0.13.2",
59
+ "comments": {
60
+ "none": [
61
+ {
62
+ "author": "dannyvv@microsoft.com",
63
+ "package": "@fluentui-react-native/experimental-avatar",
64
+ "commit": "25b3989739737bc598a5d699a941af4c0b4a421f",
65
+ "comment": "📦 applying package updates ***NO_CI***"
66
+ }
67
+ ]
68
+ }
69
+ },
70
+ {
71
+ "date": "Thu, 16 Dec 2021 19:10:29 GMT",
72
+ "tag": "@fluentui-react-native/experimental-avatar_v0.13.2",
73
+ "version": "0.13.2",
74
+ "comments": {
75
+ "patch": [
76
+ {
77
+ "author": "v.kozlova13@gmail.com",
78
+ "package": "@fluentui-react-native/experimental-avatar",
79
+ "commit": "ea7b9238079f53af55ce3c37458b925bb3dfa922",
80
+ "comment": "Added shape prop to Avatar"
81
+ },
82
+ {
83
+ "author": "beachball",
84
+ "package": "@fluentui-react-native/experimental-avatar",
85
+ "comment": "Bump @fluentui-react-native/adapters to v0.8.1",
86
+ "commit": "6a9f067ae2510481b6ff3512c10c08e7de84f86e"
87
+ },
88
+ {
89
+ "author": "beachball",
90
+ "package": "@fluentui-react-native/experimental-avatar",
91
+ "comment": "Bump @fluentui-react-native/framework to v0.7.1",
92
+ "commit": "6a9f067ae2510481b6ff3512c10c08e7de84f86e"
93
+ },
94
+ {
95
+ "author": "beachball",
96
+ "package": "@fluentui-react-native/experimental-avatar",
97
+ "comment": "Bump @fluentui-react-native/theme-tokens to v0.11.0",
98
+ "commit": "6a9f067ae2510481b6ff3512c10c08e7de84f86e"
99
+ },
100
+ {
101
+ "author": "beachball",
102
+ "package": "@fluentui-react-native/experimental-avatar",
103
+ "comment": "Bump @fluentui-react-native/tokens to v0.11.1",
104
+ "commit": "6a9f067ae2510481b6ff3512c10c08e7de84f86e"
105
+ }
106
+ ]
107
+ }
108
+ },
109
+ {
110
+ "date": "Wed, 17 Nov 2021 21:07:06 GMT",
6
111
  "tag": "@fluentui-react-native/experimental-avatar_v0.13.1",
7
112
  "version": "0.13.1",
8
113
  "comments": {
package/CHANGELOG.md CHANGED
@@ -1,12 +1,49 @@
1
1
  # Change Log - @fluentui-react-native/experimental-avatar
2
2
 
3
- This log was last generated on Wed, 17 Nov 2021 21:06:50 GMT and should not be manually modified.
3
+ This log was last generated on Fri, 17 Dec 2021 22:04:25 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## 0.13.5
8
+
9
+ Fri, 17 Dec 2021 22:04:25 GMT
10
+
11
+ ### Patches
12
+
13
+ - Bump @fluentui-react-native/framework to v0.7.4
14
+
15
+ ## 0.13.4
16
+
17
+ Fri, 17 Dec 2021 19:53:21 GMT
18
+
19
+ ### Patches
20
+
21
+ - Bump @fluentui-react-native/framework to v0.7.3
22
+
23
+ ## 0.13.3
24
+
25
+ Fri, 17 Dec 2021 01:26:42 GMT
26
+
27
+ ### Patches
28
+
29
+ - Bump @fluentui-react-native/framework to v0.7.2
30
+ - Bump @fluentui-react-native/theme-tokens to v0.11.1
31
+
32
+ ## 0.13.2
33
+
34
+ Thu, 16 Dec 2021 19:10:29 GMT
35
+
36
+ ### Patches
37
+
38
+ - Added shape prop to Avatar (v.kozlova13@gmail.com)
39
+ - Bump @fluentui-react-native/adapters to v0.8.1
40
+ - Bump @fluentui-react-native/framework to v0.7.1
41
+ - Bump @fluentui-react-native/theme-tokens to v0.11.0
42
+ - Bump @fluentui-react-native/tokens to v0.11.1
43
+
7
44
  ## 0.13.1
8
45
 
9
- Wed, 17 Nov 2021 21:06:50 GMT
46
+ Wed, 17 Nov 2021 21:07:06 GMT
10
47
 
11
48
  ### Patches
12
49
 
package/lib/JSAvatar.d.ts CHANGED
@@ -1,3 +1,12 @@
1
- import { JSAvatarProps } from './JSAvatar.types';
1
+ import { JSAvatarProps, JSAvatarState } from './JSAvatar.types';
2
+ /**
3
+ * A function which determines if a set of styles should be applied to the compoent given the current state and props of the avatar.
4
+ *
5
+ * @param layer The name of the state that is being checked for
6
+ * @param state The current state of the avatar
7
+ * @param userProps The props that were passed into the avatar
8
+ * @returns Whether the styles that are assigned to the layer should be applied to the avatar
9
+ */
10
+ export declare const avatarLookup: (layer: string, state: JSAvatarState, userProps: JSAvatarProps) => boolean;
2
11
  export declare const JSAvatar: import("@fluentui-react-native/composition").ComposeFactoryComponent<JSAvatarProps, import("./JSAvatar.types").AvatarSlotProps, import("./JSAvatar.types").JSAvatarTokens, import("@fluentui-react-native/framework").Theme, object>;
3
12
  //# sourceMappingURL=JSAvatar.d.ts.map
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,MAAM,kBAAkB,CAAC;AAK7E,eAAO,MAAM,QAAQ,sOAoCnB,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;AAK5F;;;;;;;GAOG;AACH,eAAO,MAAM,YAAY,4EAExB,CAAC;AAEF,eAAO,MAAM,QAAQ,sOAoCnB,CAAC"}
package/lib/JSAvatar.js CHANGED
@@ -26,6 +26,17 @@ 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
+ /**
30
+ * 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
+ * @param layer The name of the state that is being checked for
33
+ * @param state The current state of the avatar
34
+ * @param userProps The props that were passed into the avatar
35
+ * @returns Whether the styles that are assigned to the layer should be applied to the avatar
36
+ */
37
+ export var avatarLookup = function (layer, state, userProps) {
38
+ return state[layer] || userProps[layer] || layer === userProps['shape'] || (!userProps['shape'] && layer === 'circular');
39
+ };
29
40
  export var JSAvatar = compose(__assign(__assign({ displayName: JSAvatarName }, stylingSettings), { slots: {
30
41
  root: View,
31
42
  photo: Image,
@@ -35,11 +46,11 @@ export var JSAvatar = compose(__assign(__assign({ displayName: JSAvatarName }, s
35
46
  ring: View,
36
47
  glow: View,
37
48
  }, render: function (userProps, useSlots) {
38
- var Avatar = useAvatar(userProps);
39
- var Slots = useSlots(userProps, function (layer) { return Avatar.state[layer] || userProps[layer]; });
49
+ var avatar = useAvatar(userProps);
50
+ var Slots = useSlots(userProps, function (layer) { return avatarLookup(layer, avatar.state, userProps); });
40
51
  return function (final) {
41
- var _a = mergeProps(Avatar.props, final), children = _a.children, accessibilityLabel = _a.accessibilityLabel, mergedProps = __rest(_a, ["children", "accessibilityLabel"]);
42
- var _b = Avatar.state, personaPhotoSource = _b.personaPhotoSource, iconSource = _b.iconSource, showRing = _b.showRing, transparentRing = _b.transparentRing;
52
+ var _a = mergeProps(avatar.props, final), children = _a.children, accessibilityLabel = _a.accessibilityLabel, mergedProps = __rest(_a, ["children", "accessibilityLabel"]);
53
+ var _b = avatar.state, personaPhotoSource = _b.personaPhotoSource, iconSource = _b.iconSource, showRing = _b.showRing, transparentRing = _b.transparentRing;
43
54
  return (withSlots(Slots.root, __assign({}, mergedProps),
44
55
  personaPhotoSource ? (withSlots(Slots.photo, { accessibilityLabel: accessibilityLabel, source: personaPhotoSource })) : (withSlots(Slots.initialsBackground, null,
45
56
  withSlots(Slots.initials, null, children))),
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,EAAE,MAAM,kBAAkB,CAAC;AAC7E,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,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,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,SAAS,CAAC,KAAK,CAAC,EAAvC,CAAuC,CAAC,CAAC;QAEtF,OAAO,UAAC,KAAoB;YAC1B,IAAM,oCAAkF,EAAhF,sBAAQ,EAAE,0CAAkB,EAAE,4DAAkD,CAAC;YACnF,IAAA,iBAA4E,EAA1E,0CAAkB,EAAE,0BAAU,EAAE,sBAAQ,EAAE,oCAAgC,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,QAAQ,IAAI,UAAC,KAAK,CAAC,IAAI,OAAG;gBAC1B,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
+ {"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,IAAI,SAAS,CAAC,KAAK,CAAC,IAAI,KAAK,KAAK,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC,OAAO,CAAC,IAAI,KAAK,KAAK,UAAU,CAAC,CAAC;AAC3H,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,oCAAkF,EAAhF,sBAAQ,EAAE,0CAAkB,EAAE,4DAAkD,CAAC;YACnF,IAAA,iBAA4E,EAA1E,0CAAkB,EAAE,0BAAU,EAAE,sBAAQ,EAAE,oCAAgC,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,QAAQ,IAAI,UAAC,KAAK,CAAC,IAAI,OAAG;gBAC1B,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"}
package/lib/JSAvatar.styling.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import { JSAvatarTokens, AvatarSlotProps, JSAvatarProps } from './JSAvatar.types';
2
2
  import { UseStylingOptions } from '@fluentui-react-native/framework';
3
+ export declare const avatarStates: (keyof JSAvatarTokens)[];
3
4
  export declare const stylingSettings: UseStylingOptions<JSAvatarProps, AvatarSlotProps, JSAvatarTokens>;
4
5
  //# sourceMappingURL=JSAvatar.styling.d.ts.map
package/lib/JSAvatar.styling.d.ts.map CHANGED
@@ -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;AAWxF,eAAO,MAAM,eAAe,EAAE,iBAAiB,CAAC,aAAa,EAAE,eAAe,EAAE,cAAc,CAkJ7F,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,EAA2B,CAAC;AAE7E,eAAO,MAAM,eAAe,EAAE,iBAAiB,CAAC,aAAa,EAAE,eAAe,EAAE,cAAc,CAmJ7F,CAAC"}
package/lib/JSAvatar.styling.js CHANGED
@@ -1,14 +1,35 @@
1
+ var __assign = (this && this.__assign) || function () {
2
+ __assign = Object.assign || function(t) {
3
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
4
+ s = arguments[i];
5
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
6
+ t[p] = s[p];
7
+ }
8
+ return t;
9
+ };
10
+ return __assign.apply(this, arguments);
11
+ };
12
+ var __spreadArrays = (this && this.__spreadArrays) || function () {
13
+ for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
14
+ for (var r = Array(s), k = 0, i = 0; i < il; i++)
15
+ for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
16
+ r[k] = a[j];
17
+ return r;
18
+ };
1
19
  import { JSAvatarName } from './JSAvatar.types';
2
20
  import { buildProps } from '@fluentui-react-native/framework';
3
21
  import { defaultJSAvatarTokens } from './JSAvatarTokens';
4
22
  import { calculateEffectiveSizes, convertCoinColorFluent, getRingThickness } from './JSAvatar.helpers';
23
+ import { borderStyles } from '@fluentui-react-native/tokens';
5
24
  var nameMap = {
6
25
  start: 'flex-start',
7
26
  center: 'center',
8
27
  end: 'flex-end',
9
28
  };
29
+ export var avatarStates = ['circular', 'square'];
10
30
  export var stylingSettings = {
11
31
  tokens: [defaultJSAvatarTokens, JSAvatarName],
32
+ states: avatarStates,
12
33
  slotProps: {
13
34
  root: buildProps(function (tokens) {
14
35
  var physicalSize = calculateEffectiveSizes(tokens).physicalSize;
@@ -33,7 +54,7 @@ export var stylingSettings = {
33
54
  },
34
55
  };
35
56
  }, ['initialsSize']),
36
- initialsBackground: buildProps(function (tokens) {
57
+ initialsBackground: buildProps(function (tokens, theme) {
37
58
  var physicalSize = calculateEffectiveSizes(tokens).physicalSize;
38
59
  var backgroundColor = tokens.backgroundColor, coinColorFluent = tokens.coinColorFluent;
39
60
  var effectiveBackgroundColor = backgroundColor;
@@ -41,28 +62,19 @@ export var stylingSettings = {
41
62
  effectiveBackgroundColor = convertCoinColorFluent(coinColorFluent);
42
63
  }
43
64
  return {
44
- style: {
45
- borderRadius: physicalSize / 2,
46
- width: physicalSize,
47
- height: physicalSize,
48
- flexGrow: 1,
49
- alignSelf: 'stretch',
50
- justifyContent: 'center',
51
- alignItems: 'center',
52
- backgroundColor: effectiveBackgroundColor,
53
- },
65
+ style: __assign(__assign({}, borderStyles.from(tokens, theme)), { width: physicalSize, height: physicalSize, flexGrow: 1, alignSelf: 'stretch', justifyContent: 'center', alignItems: 'center', backgroundColor: effectiveBackgroundColor }),
54
66
  };
55
- }, ['coinColorFluent', 'backgroundColor', 'physicalSize']),
67
+ }, __spreadArrays(['coinColorFluent', 'backgroundColor', 'physicalSize'], borderStyles.keys)),
56
68
  photo: buildProps(function (tokens) {
57
69
  var physicalSize = calculateEffectiveSizes(tokens).physicalSize;
58
70
  return {
59
71
  style: {
60
- borderRadius: physicalSize / 2,
72
+ borderRadius: tokens.borderRadius,
61
73
  width: physicalSize,
62
74
  height: physicalSize,
63
75
  },
64
76
  };
65
- }, ['physicalSize']),
77
+ }, ['physicalSize', 'borderRadius']),
66
78
  icon: buildProps(function (tokens, theme) {
67
79
  var _a = calculateEffectiveSizes(tokens), iconSize = _a.iconSize, iconStrokeWidth = _a.iconStrokeWidth;
68
80
  var iconSizeAdjusted = iconSize + iconStrokeWidth * 2;
@@ -90,19 +102,9 @@ export var stylingSettings = {
90
102
  var effectiveSize = physicalSize + 2 * effectiveRingThickness;
91
103
  var ringColor = ring.ringBackgroundColor || theme.colors.personaActivityRing;
92
104
  return {
93
- style: {
94
- borderStyle: 'solid',
95
- borderColor: ringColor,
96
- borderWidth: effectiveRingThickness,
97
- borderRadius: effectiveSize / 2,
98
- width: effectiveSize,
99
- height: effectiveSize,
100
- position: 'absolute',
101
- top: -effectiveRingThickness,
102
- left: -effectiveRingThickness,
103
- },
105
+ style: __assign({ borderStyle: 'solid', borderColor: ringColor, borderWidth: effectiveRingThickness, width: effectiveSize, height: effectiveSize, position: 'absolute', top: -effectiveRingThickness, left: -effectiveRingThickness }, borderStyles.from(tokens, theme)),
104
106
  };
105
- }, ['physicalSize', 'ring', 'physicalSize']),
107
+ }, __spreadArrays(['physicalSize', 'ring', 'physicalSize'], borderStyles.keys)),
106
108
  glow: buildProps(function (tokens, theme) {
107
109
  var physicalSize = calculateEffectiveSizes(tokens).physicalSize;
108
110
  var ring = tokens.ring;
@@ -113,19 +115,9 @@ export var stylingSettings = {
113
115
  var effectiveSize = physicalSize + 2 * effectiveRingThickness;
114
116
  var glowColor = ring.accent ? theme.colors.accentButtonBackground : ring.ringColor || theme.colors.personaActivityGlow;
115
117
  return {
116
- style: {
117
- borderStyle: 'solid',
118
- borderColor: glowColor,
119
- borderWidth: effectiveRingThickness - innerGap,
120
- borderRadius: effectiveSize / 2,
121
- width: effectiveSize,
122
- height: effectiveSize,
123
- position: 'absolute',
124
- top: -effectiveRingThickness,
125
- left: -effectiveRingThickness,
126
- },
118
+ style: __assign({ borderStyle: 'solid', borderColor: glowColor, borderWidth: effectiveRingThickness - innerGap, width: effectiveSize, height: effectiveSize, position: 'absolute', top: -effectiveRingThickness, left: -effectiveRingThickness }, borderStyles.from(tokens, theme)),
127
119
  };
128
- }, ['physicalSize', 'ring']),
120
+ }, __spreadArrays(['physicalSize', 'ring'], borderStyles.keys)),
129
121
  },
130
122
  };
131
123
  //# sourceMappingURL=JSAvatar.styling.js.map
package/lib/JSAvatar.styling.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"JSAvatar.styling.js","sourceRoot":"","sources":["../src/JSAvatar.styling.ts"],"names":[],"mappings":"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"}
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
@@ -1,8 +1,11 @@
1
1
  import type { IViewProps } from '@fluentui-react-native/adapters';
2
2
  import { ImageProps, ViewProps, ImageURISource, TextProps, ColorValue } from 'react-native';
3
- import { IBackgroundColorTokens, IForegroundColorTokens } from '@fluentui-react-native/tokens';
3
+ import { IBackgroundColorTokens, IForegroundColorTokens, IBorderTokens } from '@fluentui-react-native/tokens';
4
4
  export declare const JSAvatarName = "Avatar";
5
5
  export declare type AvatarSize = 'size8' | 'size24' | 'size32' | 'size40' | 'size48' | 'size56' | 'size72' | 'size100' | 'size120';
6
+ export declare type AvatarShape = 'circular' | 'square';
7
+ export declare type AvatarActive = 'active' | 'inactive' | 'unset';
8
+ export declare type AvatarActiveAppearance = 'ring' | 'shadow' | 'glow' | 'ring-shadow' | 'ring-glow';
6
9
  /**
7
10
  * Sets color of the avatar when there is no picture. Uses fluent color names
8
11
  */
@@ -23,11 +26,14 @@ export interface AvatarConfigurableProps {
23
26
  coinColorFluent?: AvatarColor;
24
27
  }
25
28
  export interface JSAvatarProps extends IViewProps, AvatarConfigurableProps {
29
+ active?: AvatarActive;
30
+ activeAppearance?: AvatarActiveAppearance;
26
31
  imageUrl?: string;
27
32
  imageDescription?: string;
28
33
  initials?: string;
29
34
  presence?: AvatarPresence;
30
35
  isOutOfOffice?: boolean;
36
+ shape?: AvatarShape;
31
37
  }
32
38
  export interface AvatarSlotProps {
33
39
  root: ViewProps;
@@ -39,7 +45,7 @@ export interface AvatarSlotProps {
39
45
  glow: ViewProps;
40
46
  }
41
47
  export declare type IconAlignment = 'start' | 'center' | 'end';
42
- export interface JSAvatarTokens extends IBackgroundColorTokens, IForegroundColorTokens, AvatarConfigurableProps {
48
+ export interface JSAvatarTokens extends IBackgroundColorTokens, IForegroundColorTokens, AvatarConfigurableProps, IBorderTokens {
43
49
  avatarSize?: number;
44
50
  iconSize?: number;
45
51
  iconStrokeWidth?: number;
@@ -48,6 +54,8 @@ export interface JSAvatarTokens extends IBackgroundColorTokens, IForegroundColor
48
54
  horizontalIconAlignment?: IconAlignment;
49
55
  verticalIconAlignment?: IconAlignment;
50
56
  physicalSize?: number;
57
+ circular?: JSAvatarTokens;
58
+ square?: JSAvatarTokens;
51
59
  }
52
60
  export interface JSAvatarState {
53
61
  personaPhotoSource: ImageURISource | undefined;
package/lib/JSAvatar.types.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"JSAvatar.types.d.ts","sourceRoot":"","sources":["../src/JSAvatar.types.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"JSAvatar.types.d.ts","sourceRoot":"","sources":["../src/JSAvatar.types.ts"],"names":[],"mappings":"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"}
package/lib/JSAvatarTokens.d.ts.map CHANGED
@@ -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;AAGnC,eAAO,MAAM,qBAAqB,EAAE,aAAa,CAAC,cAAc,EAAE,KAAK,CAOjD,CAAC"}
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,CAajD,CAAC"}
package/lib/JSAvatarTokens.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import { convertCoinColorFluent } from './JSAvatar.helpers';
2
+ import { globalTokens } from '@fluentui-react-native/theme-tokens';
2
3
  export var defaultJSAvatarTokens = function () {
3
4
  return ({
4
5
  horizontalIconAlignment: 'end',
@@ -6,6 +7,12 @@ export var defaultJSAvatarTokens = function () {
6
7
  color: 'white',
7
8
  iconStrokeColor: 'white',
8
9
  backgroundColor: convertCoinColorFluent('cornflower'),
10
+ circular: {
11
+ borderRadius: globalTokens.corner.radius.circle,
12
+ },
13
+ square: {
14
+ borderRadius: globalTokens.corner.radius.medium,
15
+ },
9
16
  });
10
17
  };
11
18
  //# sourceMappingURL=JSAvatarTokens.js.map
package/lib/JSAvatarTokens.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"JSAvatarTokens.js","sourceRoot":"","sources":["../src/JSAvatarTokens.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAE5D,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;KACnC,CAAA;AANpB,CAMoB,CAAC"}
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;AAZpB,CAYoB,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,sCA+BrB,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;AAG5E;;;;;;GAMG;AACH,eAAO,MAAM,SAAS,sCAgCrB,CAAC"}
package/lib/useAvatar.js CHANGED
@@ -29,7 +29,7 @@ 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, rest = __rest(props, ["imageUrl", "imageDescription", "initials", "presence", "isOutOfOffice", "ring"]);
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"]);
33
33
  var personaPhotoSource = imageUrl === undefined
34
34
  ? undefined
35
35
  : {
@@ -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 }, rest),
48
+ props: __assign({ children: initials, accessibilityLabel: imageDescription, shape: shape || 'circular' }, rest),
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,yBAAQ,EAAE,yCAAgB,EAAE,yBAAQ,EAAE,yBAAQ,EAAE,mCAAa,EAAE,iBAAI,EAAE,uGAAO,CAAW;IAE/F,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,CAAC,CAAC,IAAI,CAAC;IACxB,IAAM,eAAe,GAAG,CAAC,EAAC,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,aACH,QAAQ,EAAE,QAAQ,EAClB,kBAAkB,EAAE,gBAAgB,IACjC,IAAI,CACR;QACD,KAAK,eACA,KAAK,CACT;KACF,CAAC;AACJ,CAAC,CAAC"}
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,yBAAQ,EAAE,yCAAgB,EAAE,yBAAQ,EAAE,yBAAQ,EAAE,mCAAa,EAAE,iBAAI,EAAE,mBAAK,EAAE,gHAAO,CAAW;IAEtG,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,CAAC,CAAC,IAAI,CAAC;IACxB,IAAM,eAAe,GAAG,CAAC,EAAC,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,aACH,QAAQ,EAAE,QAAQ,EAClB,kBAAkB,EAAE,gBAAgB,EACpC,KAAK,EAAE,KAAK,IAAI,UAAU,IACvB,IAAI,CACR;QACD,KAAK,eACA,KAAK,CACT;KACF,CAAC;AACJ,CAAC,CAAC"}
package/lib-commonjs/JSAvatar.d.ts CHANGED
@@ -1,3 +1,12 @@
1
- import { JSAvatarProps } from './JSAvatar.types';
1
+ import { JSAvatarProps, JSAvatarState } from './JSAvatar.types';
2
+ /**
3
+ * A function which determines if a set of styles should be applied to the compoent given the current state and props of the avatar.
4
+ *
5
+ * @param layer The name of the state that is being checked for
6
+ * @param state The current state of the avatar
7
+ * @param userProps The props that were passed into the avatar
8
+ * @returns Whether the styles that are assigned to the layer should be applied to the avatar
9
+ */
10
+ export declare const avatarLookup: (layer: string, state: JSAvatarState, userProps: JSAvatarProps) => boolean;
2
11
  export declare const JSAvatar: import("@fluentui-react-native/composition").ComposeFactoryComponent<JSAvatarProps, import("./JSAvatar.types").AvatarSlotProps, import("./JSAvatar.types").JSAvatarTokens, import("@fluentui-react-native/framework").Theme, object>;
3
12
  //# sourceMappingURL=JSAvatar.d.ts.map
package/lib-commonjs/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,MAAM,kBAAkB,CAAC;AAK7E,eAAO,MAAM,QAAQ,sOAoCnB,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;AAK5F;;;;;;;GAOG;AACH,eAAO,MAAM,YAAY,4EAExB,CAAC;AAEF,eAAO,MAAM,QAAQ,sOAoCnB,CAAC"}
package/lib-commonjs/JSAvatar.js CHANGED
@@ -28,6 +28,17 @@ var JSAvatar_types_1 = require("./JSAvatar.types");
28
28
  var JSAvatar_styling_1 = require("./JSAvatar.styling");
29
29
  var framework_1 = require("@fluentui-react-native/framework");
30
30
  var useAvatar_1 = require("./useAvatar");
31
+ /**
32
+ * A function which determines if a set of styles should be applied to the compoent given the current state and props of the avatar.
33
+ *
34
+ * @param layer The name of the state that is being checked for
35
+ * @param state The current state of the avatar
36
+ * @param userProps The props that were passed into the avatar
37
+ * @returns Whether the styles that are assigned to the layer should be applied to the avatar
38
+ */
39
+ exports.avatarLookup = function (layer, state, userProps) {
40
+ return state[layer] || userProps[layer] || layer === userProps['shape'] || (!userProps['shape'] && layer === 'circular');
41
+ };
31
42
  exports.JSAvatar = framework_1.compose(__assign(__assign({ displayName: JSAvatar_types_1.JSAvatarName }, JSAvatar_styling_1.stylingSettings), { slots: {
32
43
  root: react_native_1.View,
33
44
  photo: react_native_1.Image,
@@ -37,11 +48,11 @@ exports.JSAvatar = framework_1.compose(__assign(__assign({ displayName: JSAvatar
37
48
  ring: react_native_1.View,
38
49
  glow: react_native_1.View,
39
50
  }, render: function (userProps, useSlots) {
40
- var Avatar = useAvatar_1.useAvatar(userProps);
41
- var Slots = useSlots(userProps, function (layer) { return Avatar.state[layer] || userProps[layer]; });
51
+ var avatar = useAvatar_1.useAvatar(userProps);
52
+ var Slots = useSlots(userProps, function (layer) { return exports.avatarLookup(layer, avatar.state, userProps); });
42
53
  return function (final) {
43
- var _a = framework_1.mergeProps(Avatar.props, final), children = _a.children, accessibilityLabel = _a.accessibilityLabel, mergedProps = __rest(_a, ["children", "accessibilityLabel"]);
44
- var _b = Avatar.state, personaPhotoSource = _b.personaPhotoSource, iconSource = _b.iconSource, showRing = _b.showRing, transparentRing = _b.transparentRing;
54
+ var _a = framework_1.mergeProps(avatar.props, final), children = _a.children, accessibilityLabel = _a.accessibilityLabel, mergedProps = __rest(_a, ["children", "accessibilityLabel"]);
55
+ var _b = avatar.state, personaPhotoSource = _b.personaPhotoSource, iconSource = _b.iconSource, showRing = _b.showRing, transparentRing = _b.transparentRing;
45
56
  return (framework_1.withSlots(Slots.root, __assign({}, mergedProps),
46
57
  personaPhotoSource ? (framework_1.withSlots(Slots.photo, { accessibilityLabel: accessibilityLabel, source: personaPhotoSource })) : (framework_1.withSlots(Slots.initialsBackground, null,
47
58
  framework_1.withSlots(Slots.initials, null, children))),
package/lib-commonjs/JSAvatar.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"JSAvatar.js","sourceRoot":"","sources":["../src/JSAvatar.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA,qBAAqB;AACrB,6CAAiD;AACjD,mDAA6E;AAC7E,uDAAqD;AACrD,8DAA4F;AAC5F,yCAAwC;AAE3B,QAAA,QAAQ,GAAG,mBAAO,qBAC7B,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,qBAAS,CAAC,SAAS,CAAC,CAAC;QACpC,IAAM,KAAK,GAAG,QAAQ,CAAC,SAAS,EAAE,UAAC,KAAK,IAAK,OAAA,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,SAAS,CAAC,KAAK,CAAC,EAAvC,CAAuC,CAAC,CAAC;QAEtF,OAAO,UAAC,KAAoB;YAC1B,IAAM,gDAAkF,EAAhF,sBAAQ,EAAE,0CAAkB,EAAE,4DAAkD,CAAC;YACnF,IAAA,iBAA4E,EAA1E,0CAAkB,EAAE,0BAAU,EAAE,sBAAQ,EAAE,oCAAgC,CAAC;YAEnF,OAAO,CACL,sBAAC,KAAK,CAAC,IAAI,eAAK,WAAW;gBACxB,kBAAkB,CAAC,CAAC,CAAC,CACpB,sBAAC,KAAK,CAAC,KAAK,IAAC,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,EAAE,kBAAkB,GAAI,CACpF,CAAC,CAAC,CAAC,CACF,sBAAC,KAAK,CAAC,kBAAkB;oBACvB,sBAAC,KAAK,CAAC,QAAQ,QAAE,QAAQ,CAAkB,CAClB,CAC5B;gBACA,QAAQ,IAAI,CAAC,eAAe,IAAI,sBAAC,KAAK,CAAC,IAAI,OAAG;gBAC9C,QAAQ,IAAI,sBAAC,KAAK,CAAC,IAAI,OAAG;gBAC1B,CAAC,CAAC,UAAU,IAAI,CAAC,CAAC,UAAU,CAAC,GAAG,IAAI,sBAAC,KAAK,CAAC,IAAI,IAAC,MAAM,EAAE,UAAU,GAAI,CAC5D,CACd,CAAC;QACJ,CAAC,CAAC;IACJ,CAAC,IACD,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;AACU,QAAA,YAAY,GAAG,UAAC,KAAa,EAAE,KAAoB,EAAE,SAAwB;IACxF,OAAO,KAAK,CAAC,KAAK,CAAC,IAAI,SAAS,CAAC,KAAK,CAAC,IAAI,KAAK,KAAK,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC,OAAO,CAAC,IAAI,KAAK,KAAK,UAAU,CAAC,CAAC;AAC3H,CAAC,CAAC;AAEW,QAAA,QAAQ,GAAG,mBAAO,qBAC7B,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,qBAAS,CAAC,SAAS,CAAC,CAAC;QACpC,IAAM,KAAK,GAAG,QAAQ,CAAC,SAAS,EAAE,UAAC,KAAK,IAAK,OAAA,oBAAY,CAAC,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,SAAS,CAAC,EAA5C,CAA4C,CAAC,CAAC;QAE3F,OAAO,UAAC,KAAoB;YAC1B,IAAM,gDAAkF,EAAhF,sBAAQ,EAAE,0CAAkB,EAAE,4DAAkD,CAAC;YACnF,IAAA,iBAA4E,EAA1E,0CAAkB,EAAE,0BAAU,EAAE,sBAAQ,EAAE,oCAAgC,CAAC;YAEnF,OAAO,CACL,sBAAC,KAAK,CAAC,IAAI,eAAK,WAAW;gBACxB,kBAAkB,CAAC,CAAC,CAAC,CACpB,sBAAC,KAAK,CAAC,KAAK,IAAC,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,EAAE,kBAAkB,GAAI,CACpF,CAAC,CAAC,CAAC,CACF,sBAAC,KAAK,CAAC,kBAAkB;oBACvB,sBAAC,KAAK,CAAC,QAAQ,QAAE,QAAQ,CAAkB,CAClB,CAC5B;gBACA,QAAQ,IAAI,CAAC,eAAe,IAAI,sBAAC,KAAK,CAAC,IAAI,OAAG;gBAC9C,QAAQ,IAAI,sBAAC,KAAK,CAAC,IAAI,OAAG;gBAC1B,CAAC,CAAC,UAAU,IAAI,CAAC,CAAC,UAAU,CAAC,GAAG,IAAI,sBAAC,KAAK,CAAC,IAAI,IAAC,MAAM,EAAE,UAAU,GAAI,CAC5D,CACd,CAAC;QACJ,CAAC,CAAC;IACJ,CAAC,IACD,CAAC"}
package/lib-commonjs/JSAvatar.styling.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import { JSAvatarTokens, AvatarSlotProps, JSAvatarProps } from './JSAvatar.types';
2
2
  import { UseStylingOptions } from '@fluentui-react-native/framework';
3
+ export declare const avatarStates: (keyof JSAvatarTokens)[];
3
4
  export declare const stylingSettings: UseStylingOptions<JSAvatarProps, AvatarSlotProps, JSAvatarTokens>;
4
5
  //# sourceMappingURL=JSAvatar.styling.d.ts.map
package/lib-commonjs/JSAvatar.styling.d.ts.map CHANGED
@@ -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;AAWxF,eAAO,MAAM,eAAe,EAAE,iBAAiB,CAAC,aAAa,EAAE,eAAe,EAAE,cAAc,CAkJ7F,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,EAA2B,CAAC;AAE7E,eAAO,MAAM,eAAe,EAAE,iBAAiB,CAAC,aAAa,EAAE,eAAe,EAAE,cAAc,CAmJ7F,CAAC"}
package/lib-commonjs/JSAvatar.styling.js CHANGED
@@ -1,16 +1,37 @@
1
1
  "use strict";
2
+ var __assign = (this && this.__assign) || function () {
3
+ __assign = Object.assign || function(t) {
4
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
5
+ s = arguments[i];
6
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
+ t[p] = s[p];
8
+ }
9
+ return t;
10
+ };
11
+ return __assign.apply(this, arguments);
12
+ };
13
+ var __spreadArrays = (this && this.__spreadArrays) || function () {
14
+ for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
15
+ for (var r = Array(s), k = 0, i = 0; i < il; i++)
16
+ for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
17
+ r[k] = a[j];
18
+ return r;
19
+ };
2
20
  Object.defineProperty(exports, "__esModule", { value: true });
3
21
  var JSAvatar_types_1 = require("./JSAvatar.types");
4
22
  var framework_1 = require("@fluentui-react-native/framework");
5
23
  var JSAvatarTokens_1 = require("./JSAvatarTokens");
6
24
  var JSAvatar_helpers_1 = require("./JSAvatar.helpers");
25
+ var tokens_1 = require("@fluentui-react-native/tokens");
7
26
  var nameMap = {
8
27
  start: 'flex-start',
9
28
  center: 'center',
10
29
  end: 'flex-end',
11
30
  };
31
+ exports.avatarStates = ['circular', 'square'];
12
32
  exports.stylingSettings = {
13
33
  tokens: [JSAvatarTokens_1.defaultJSAvatarTokens, JSAvatar_types_1.JSAvatarName],
34
+ states: exports.avatarStates,
14
35
  slotProps: {
15
36
  root: framework_1.buildProps(function (tokens) {
16
37
  var physicalSize = JSAvatar_helpers_1.calculateEffectiveSizes(tokens).physicalSize;
@@ -35,7 +56,7 @@ exports.stylingSettings = {
35
56
  },
36
57
  };
37
58
  }, ['initialsSize']),
38
- initialsBackground: framework_1.buildProps(function (tokens) {
59
+ initialsBackground: framework_1.buildProps(function (tokens, theme) {
39
60
  var physicalSize = JSAvatar_helpers_1.calculateEffectiveSizes(tokens).physicalSize;
40
61
  var backgroundColor = tokens.backgroundColor, coinColorFluent = tokens.coinColorFluent;
41
62
  var effectiveBackgroundColor = backgroundColor;
@@ -43,28 +64,19 @@ exports.stylingSettings = {
43
64
  effectiveBackgroundColor = JSAvatar_helpers_1.convertCoinColorFluent(coinColorFluent);
44
65
  }
45
66
  return {
46
- style: {
47
- borderRadius: physicalSize / 2,
48
- width: physicalSize,
49
- height: physicalSize,
50
- flexGrow: 1,
51
- alignSelf: 'stretch',
52
- justifyContent: 'center',
53
- alignItems: 'center',
54
- backgroundColor: effectiveBackgroundColor,
55
- },
67
+ style: __assign(__assign({}, tokens_1.borderStyles.from(tokens, theme)), { width: physicalSize, height: physicalSize, flexGrow: 1, alignSelf: 'stretch', justifyContent: 'center', alignItems: 'center', backgroundColor: effectiveBackgroundColor }),
56
68
  };
57
- }, ['coinColorFluent', 'backgroundColor', 'physicalSize']),
69
+ }, __spreadArrays(['coinColorFluent', 'backgroundColor', 'physicalSize'], tokens_1.borderStyles.keys)),
58
70
  photo: framework_1.buildProps(function (tokens) {
59
71
  var physicalSize = JSAvatar_helpers_1.calculateEffectiveSizes(tokens).physicalSize;
60
72
  return {
61
73
  style: {
62
- borderRadius: physicalSize / 2,
74
+ borderRadius: tokens.borderRadius,
63
75
  width: physicalSize,
64
76
  height: physicalSize,
65
77
  },
66
78
  };
67
- }, ['physicalSize']),
79
+ }, ['physicalSize', 'borderRadius']),
68
80
  icon: framework_1.buildProps(function (tokens, theme) {
69
81
  var _a = JSAvatar_helpers_1.calculateEffectiveSizes(tokens), iconSize = _a.iconSize, iconStrokeWidth = _a.iconStrokeWidth;
70
82
  var iconSizeAdjusted = iconSize + iconStrokeWidth * 2;
@@ -92,19 +104,9 @@ exports.stylingSettings = {
92
104
  var effectiveSize = physicalSize + 2 * effectiveRingThickness;
93
105
  var ringColor = ring.ringBackgroundColor || theme.colors.personaActivityRing;
94
106
  return {
95
- style: {
96
- borderStyle: 'solid',
97
- borderColor: ringColor,
98
- borderWidth: effectiveRingThickness,
99
- borderRadius: effectiveSize / 2,
100
- width: effectiveSize,
101
- height: effectiveSize,
102
- position: 'absolute',
103
- top: -effectiveRingThickness,
104
- left: -effectiveRingThickness,
105
- },
107
+ style: __assign({ borderStyle: 'solid', borderColor: ringColor, borderWidth: effectiveRingThickness, width: effectiveSize, height: effectiveSize, position: 'absolute', top: -effectiveRingThickness, left: -effectiveRingThickness }, tokens_1.borderStyles.from(tokens, theme)),
106
108
  };
107
- }, ['physicalSize', 'ring', 'physicalSize']),
109
+ }, __spreadArrays(['physicalSize', 'ring', 'physicalSize'], tokens_1.borderStyles.keys)),
108
110
  glow: framework_1.buildProps(function (tokens, theme) {
109
111
  var physicalSize = JSAvatar_helpers_1.calculateEffectiveSizes(tokens).physicalSize;
110
112
  var ring = tokens.ring;
@@ -115,19 +117,9 @@ exports.stylingSettings = {
115
117
  var effectiveSize = physicalSize + 2 * effectiveRingThickness;
116
118
  var glowColor = ring.accent ? theme.colors.accentButtonBackground : ring.ringColor || theme.colors.personaActivityGlow;
117
119
  return {
118
- style: {
119
- borderStyle: 'solid',
120
- borderColor: glowColor,
121
- borderWidth: effectiveRingThickness - innerGap,
122
- borderRadius: effectiveSize / 2,
123
- width: effectiveSize,
124
- height: effectiveSize,
125
- position: 'absolute',
126
- top: -effectiveRingThickness,
127
- left: -effectiveRingThickness,
128
- },
120
+ style: __assign({ borderStyle: 'solid', borderColor: glowColor, borderWidth: effectiveRingThickness - innerGap, width: effectiveSize, height: effectiveSize, position: 'absolute', top: -effectiveRingThickness, left: -effectiveRingThickness }, tokens_1.borderStyles.from(tokens, theme)),
129
121
  };
130
- }, ['physicalSize', 'ring']),
122
+ }, __spreadArrays(['physicalSize', 'ring'], tokens_1.borderStyles.keys)),
131
123
  },
132
124
  };
133
125
  //# sourceMappingURL=JSAvatar.styling.js.map
package/lib-commonjs/JSAvatar.styling.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"JSAvatar.styling.js","sourceRoot":"","sources":["../src/JSAvatar.styling.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"JSAvatar.styling.js","sourceRoot":"","sources":["../src/JSAvatar.styling.ts"],"names":[],"mappings":"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"}
package/lib-commonjs/JSAvatar.types.d.ts CHANGED
@@ -1,8 +1,11 @@
1
1
  import type { IViewProps } from '@fluentui-react-native/adapters';
2
2
  import { ImageProps, ViewProps, ImageURISource, TextProps, ColorValue } from 'react-native';
3
- import { IBackgroundColorTokens, IForegroundColorTokens } from '@fluentui-react-native/tokens';
3
+ import { IBackgroundColorTokens, IForegroundColorTokens, IBorderTokens } from '@fluentui-react-native/tokens';
4
4
  export declare const JSAvatarName = "Avatar";
5
5
  export declare type AvatarSize = 'size8' | 'size24' | 'size32' | 'size40' | 'size48' | 'size56' | 'size72' | 'size100' | 'size120';
6
+ export declare type AvatarShape = 'circular' | 'square';
7
+ export declare type AvatarActive = 'active' | 'inactive' | 'unset';
8
+ export declare type AvatarActiveAppearance = 'ring' | 'shadow' | 'glow' | 'ring-shadow' | 'ring-glow';
6
9
  /**
7
10
  * Sets color of the avatar when there is no picture. Uses fluent color names
8
11
  */
@@ -23,11 +26,14 @@ export interface AvatarConfigurableProps {
23
26
  coinColorFluent?: AvatarColor;
24
27
  }
25
28
  export interface JSAvatarProps extends IViewProps, AvatarConfigurableProps {
29
+ active?: AvatarActive;
30
+ activeAppearance?: AvatarActiveAppearance;
26
31
  imageUrl?: string;
27
32
  imageDescription?: string;
28
33
  initials?: string;
29
34
  presence?: AvatarPresence;
30
35
  isOutOfOffice?: boolean;
36
+ shape?: AvatarShape;
31
37
  }
32
38
  export interface AvatarSlotProps {
33
39
  root: ViewProps;
@@ -39,7 +45,7 @@ export interface AvatarSlotProps {
39
45
  glow: ViewProps;
40
46
  }
41
47
  export declare type IconAlignment = 'start' | 'center' | 'end';
42
- export interface JSAvatarTokens extends IBackgroundColorTokens, IForegroundColorTokens, AvatarConfigurableProps {
48
+ export interface JSAvatarTokens extends IBackgroundColorTokens, IForegroundColorTokens, AvatarConfigurableProps, IBorderTokens {
43
49
  avatarSize?: number;
44
50
  iconSize?: number;
45
51
  iconStrokeWidth?: number;
@@ -48,6 +54,8 @@ export interface JSAvatarTokens extends IBackgroundColorTokens, IForegroundColor
48
54
  horizontalIconAlignment?: IconAlignment;
49
55
  verticalIconAlignment?: IconAlignment;
50
56
  physicalSize?: number;
57
+ circular?: JSAvatarTokens;
58
+ square?: JSAvatarTokens;
51
59
  }
52
60
  export interface JSAvatarState {
53
61
  personaPhotoSource: ImageURISource | undefined;
package/lib-commonjs/JSAvatar.types.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"JSAvatar.types.d.ts","sourceRoot":"","sources":["../src/JSAvatar.types.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"JSAvatar.types.d.ts","sourceRoot":"","sources":["../src/JSAvatar.types.ts"],"names":[],"mappings":"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"}
package/lib-commonjs/JSAvatarTokens.d.ts.map CHANGED
@@ -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;AAGnC,eAAO,MAAM,qBAAqB,EAAE,aAAa,CAAC,cAAc,EAAE,KAAK,CAOjD,CAAC"}
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,CAajD,CAAC"}
package/lib-commonjs/JSAvatarTokens.js CHANGED
@@ -1,6 +1,7 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  var JSAvatar_helpers_1 = require("./JSAvatar.helpers");
4
+ var theme_tokens_1 = require("@fluentui-react-native/theme-tokens");
4
5
  exports.defaultJSAvatarTokens = function () {
5
6
  return ({
6
7
  horizontalIconAlignment: 'end',
@@ -8,6 +9,12 @@ exports.defaultJSAvatarTokens = function () {
8
9
  color: 'white',
9
10
  iconStrokeColor: 'white',
10
11
  backgroundColor: JSAvatar_helpers_1.convertCoinColorFluent('cornflower'),
12
+ circular: {
13
+ borderRadius: theme_tokens_1.globalTokens.corner.radius.circle,
14
+ },
15
+ square: {
16
+ borderRadius: theme_tokens_1.globalTokens.corner.radius.medium,
17
+ },
11
18
  });
12
19
  };
13
20
  //# sourceMappingURL=JSAvatarTokens.js.map
package/lib-commonjs/JSAvatarTokens.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"JSAvatarTokens.js","sourceRoot":"","sources":["../src/JSAvatarTokens.ts"],"names":[],"mappings":";;AAGA,uDAA4D;AAE/C,QAAA,qBAAqB,GAAyC;IACzE,OAAA,CAAC;QACC,uBAAuB,EAAE,KAAK;QAC9B,qBAAqB,EAAE,KAAK;QAC5B,KAAK,EAAE,OAAO;QACd,eAAe,EAAE,OAAO;QACxB,eAAe,EAAE,yCAAsB,CAAC,YAAY,CAAC;KACnC,CAAA;AANpB,CAMoB,CAAC"}
1
+ {"version":3,"file":"JSAvatarTokens.js","sourceRoot":"","sources":["../src/JSAvatarTokens.ts"],"names":[],"mappings":";;AAGA,uDAA4D;AAC5D,oEAAmE;AAEtD,QAAA,qBAAqB,GAAyC;IACzE,OAAA,CAAC;QACC,uBAAuB,EAAE,KAAK;QAC9B,qBAAqB,EAAE,KAAK;QAC5B,KAAK,EAAE,OAAO;QACd,eAAe,EAAE,OAAO;QACxB,eAAe,EAAE,yCAAsB,CAAC,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;AAZpB,CAYoB,CAAC"}
package/lib-commonjs/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,sCA+BrB,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;AAG5E;;;;;;GAMG;AACH,eAAO,MAAM,SAAS,sCAgCrB,CAAC"}
package/lib-commonjs/useAvatar.js CHANGED
@@ -31,7 +31,7 @@ var JSAvatar_helpers_1 = require("./JSAvatar.helpers");
31
31
  * @returns configured props and state for FURN Avatar
32
32
  */
33
33
  exports.useAvatar = function (props) {
34
- var imageUrl = props.imageUrl, imageDescription = props.imageDescription, initials = props.initials, presence = props.presence, isOutOfOffice = props.isOutOfOffice, ring = props.ring, rest = __rest(props, ["imageUrl", "imageDescription", "initials", "presence", "isOutOfOffice", "ring"]);
34
+ 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
35
  var personaPhotoSource = imageUrl === undefined
36
36
  ? undefined
37
37
  : {
@@ -47,7 +47,7 @@ exports.useAvatar = function (props) {
47
47
  transparentRing: transparentRing,
48
48
  };
49
49
  return {
50
- props: __assign({ children: initials, accessibilityLabel: imageDescription }, rest),
50
+ props: __assign({ children: initials, accessibilityLabel: imageDescription, shape: shape || 'circular' }, rest),
51
51
  state: __assign({}, state),
52
52
  };
53
53
  };
package/lib-commonjs/useAvatar.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"useAvatar.js","sourceRoot":"","sources":["../src/useAvatar.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AACA,uDAA2D;AAE3D;;;;;;GAMG;AACU,QAAA,SAAS,GAAG,UAAC,KAAoB;IACpC,IAAA,yBAAQ,EAAE,yCAAgB,EAAE,yBAAQ,EAAE,yBAAQ,EAAE,mCAAa,EAAE,iBAAI,EAAE,uGAAO,CAAW;IAE/F,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,wCAAqB,CAAC,QAAQ,EAAE,aAAa,IAAI,KAAK,CAAC,CAAC;IAChH,IAAM,QAAQ,GAAG,CAAC,CAAC,IAAI,CAAC;IACxB,IAAM,eAAe,GAAG,CAAC,EAAC,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,aACH,QAAQ,EAAE,QAAQ,EAClB,kBAAkB,EAAE,gBAAgB,IACjC,IAAI,CACR;QACD,KAAK,eACA,KAAK,CACT;KACF,CAAC;AACJ,CAAC,CAAC"}
1
+ {"version":3,"file":"useAvatar.js","sourceRoot":"","sources":["../src/useAvatar.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AACA,uDAA2D;AAE3D;;;;;;GAMG;AACU,QAAA,SAAS,GAAG,UAAC,KAAoB;IACpC,IAAA,yBAAQ,EAAE,yCAAgB,EAAE,yBAAQ,EAAE,yBAAQ,EAAE,mCAAa,EAAE,iBAAI,EAAE,mBAAK,EAAE,gHAAO,CAAW;IAEtG,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,wCAAqB,CAAC,QAAQ,EAAE,aAAa,IAAI,KAAK,CAAC,CAAC;IAChH,IAAM,QAAQ,GAAG,CAAC,CAAC,IAAI,CAAC;IACxB,IAAM,eAAe,GAAG,CAAC,EAAC,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,aACH,QAAQ,EAAE,QAAQ,EAClB,kBAAkB,EAAE,gBAAgB,EACpC,KAAK,EAAE,KAAK,IAAI,UAAU,IACvB,IAAI,CACR;QACD,KAAK,eACA,KAAK,CACT;KACF,CAAC;AACJ,CAAC,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui-react-native/experimental-avatar",
3
- "version": "0.13.1",
3
+ "version": "0.13.5",
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>",
@@ -20,11 +20,11 @@
20
20
  "prettier-fix": "fluentui-scripts prettier --fix true"
21
21
  },
22
22
  "dependencies": {
23
- "@fluentui-react-native/adapters": "^0.8.0",
23
+ "@fluentui-react-native/adapters": "^0.8.1",
24
24
  "@fluentui-react-native/component-cache": "^1.3.0",
25
- "@fluentui-react-native/framework": "0.7.0",
26
- "@fluentui-react-native/theme-tokens": "^0.10.0",
27
- "@fluentui-react-native/tokens": "^0.11.0",
25
+ "@fluentui-react-native/framework": "0.7.4",
26
+ "@fluentui-react-native/theme-tokens": "^0.11.1",
27
+ "@fluentui-react-native/tokens": "^0.11.1",
28
28
  "@fluentui-react-native/use-styling": "^0.8.0"
29
29
  },
30
30
  "devDependencies": {
package/src/JSAvatar.styling.ts CHANGED
@@ -3,6 +3,7 @@ import { Theme, UseStylingOptions, buildProps } from '@fluentui-react-native/fra
3
3
  import { defaultJSAvatarTokens } from './JSAvatarTokens';
4
4
  import { ViewStyle } from 'react-native';
5
5
  import { calculateEffectiveSizes, convertCoinColorFluent, getRingThickness } from './JSAvatar.helpers';
6
+ import { borderStyles } from '@fluentui-react-native/tokens';
6
7
 
7
8
  const nameMap: { [key: string]: string } = {
8
9
  start: 'flex-start',
@@ -10,8 +11,11 @@ const nameMap: { [key: string]: string } = {
10
11
  end: 'flex-end',
11
12
  };
12
13
 
14
+ export const avatarStates: (keyof JSAvatarTokens)[] = ['circular', 'square'];
15
+
13
16
  export const stylingSettings: UseStylingOptions<JSAvatarProps, AvatarSlotProps, JSAvatarTokens> = {
14
17
  tokens: [defaultJSAvatarTokens, JSAvatarName],
18
+ states: avatarStates,
15
19
  slotProps: {
16
20
  root: buildProps(
17
21
  (tokens: JSAvatarTokens) => {
@@ -43,7 +47,7 @@ export const stylingSettings: UseStylingOptions<JSAvatarProps, AvatarSlotProps,
43
47
  ['initialsSize'],
44
48
  ),
45
49
  initialsBackground: buildProps(
46
- (tokens: JSAvatarTokens) => {
50
+ (tokens: JSAvatarTokens, theme: Theme) => {
47
51
  const { physicalSize } = calculateEffectiveSizes(tokens);
48
52
  const { backgroundColor, coinColorFluent } = tokens;
49
53
  let effectiveBackgroundColor = backgroundColor;
@@ -52,7 +56,7 @@ export const stylingSettings: UseStylingOptions<JSAvatarProps, AvatarSlotProps,
52
56
  }
53
57
  return {
54
58
  style: {
55
- borderRadius: physicalSize / 2,
59
+ ...borderStyles.from(tokens, theme),
56
60
  width: physicalSize,
57
61
  height: physicalSize,
58
62
  flexGrow: 1,
@@ -63,7 +67,7 @@ export const stylingSettings: UseStylingOptions<JSAvatarProps, AvatarSlotProps,
63
67
  },
64
68
  };
65
69
  },
66
- ['coinColorFluent', 'backgroundColor', 'physicalSize'],
70
+ ['coinColorFluent', 'backgroundColor', 'physicalSize', ...borderStyles.keys],
67
71
  ),
68
72
  photo: buildProps(
69
73
  (tokens: JSAvatarTokens) => {
@@ -71,13 +75,13 @@ export const stylingSettings: UseStylingOptions<JSAvatarProps, AvatarSlotProps,
71
75
 
72
76
  return {
73
77
  style: {
74
- borderRadius: physicalSize / 2,
78
+ borderRadius: tokens.borderRadius,
75
79
  width: physicalSize,
76
80
  height: physicalSize,
77
81
  },
78
82
  };
79
83
  },
80
- ['physicalSize'],
84
+ ['physicalSize', 'borderRadius'],
81
85
  ),
82
86
  icon: buildProps(
83
87
  (tokens: JSAvatarTokens, theme: Theme) => {
@@ -116,16 +120,16 @@ export const stylingSettings: UseStylingOptions<JSAvatarProps, AvatarSlotProps,
116
120
  borderStyle: 'solid',
117
121
  borderColor: ringColor,
118
122
  borderWidth: effectiveRingThickness,
119
- borderRadius: effectiveSize / 2,
120
123
  width: effectiveSize,
121
124
  height: effectiveSize,
122
125
  position: 'absolute',
123
126
  top: -effectiveRingThickness,
124
127
  left: -effectiveRingThickness,
128
+ ...borderStyles.from(tokens, theme),
125
129
  },
126
130
  };
127
131
  },
128
- ['physicalSize', 'ring', 'physicalSize'],
132
+ ['physicalSize', 'ring', 'physicalSize', ...borderStyles.keys],
129
133
  ),
130
134
  glow: buildProps(
131
135
  (tokens: JSAvatarTokens, theme: Theme) => {
@@ -144,16 +148,16 @@ export const stylingSettings: UseStylingOptions<JSAvatarProps, AvatarSlotProps,
144
148
  borderStyle: 'solid',
145
149
  borderColor: glowColor,
146
150
  borderWidth: effectiveRingThickness - innerGap,
147
- borderRadius: effectiveSize / 2,
148
151
  width: effectiveSize,
149
152
  height: effectiveSize,
150
153
  position: 'absolute',
151
154
  top: -effectiveRingThickness,
152
155
  left: -effectiveRingThickness,
156
+ ...borderStyles.from(tokens, theme),
153
157
  },
154
158
  };
155
159
  },
156
- ['physicalSize', 'ring'],
160
+ ['physicalSize', 'ring', ...borderStyles.keys],
157
161
  ),
158
162
  },
159
163
  };
package/src/JSAvatar.tsx CHANGED
@@ -1,10 +1,22 @@
1
1
  /** @jsx withSlots */
2
2
  import { Image, View, Text } from 'react-native';
3
- import { JSAvatarProps, JSAvatarType, JSAvatarName } from './JSAvatar.types';
3
+ import { JSAvatarProps, JSAvatarType, JSAvatarName, JSAvatarState } from './JSAvatar.types';
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
7
 
8
+ /**
9
+ * A function which determines if a set of styles should be applied to the compoent given the current state and props of the avatar.
10
+ *
11
+ * @param layer The name of the state that is being checked for
12
+ * @param state The current state of the avatar
13
+ * @param userProps The props that were passed into the avatar
14
+ * @returns Whether the styles that are assigned to the layer should be applied to the avatar
15
+ */
16
+ export const avatarLookup = (layer: string, state: JSAvatarState, userProps: JSAvatarProps): boolean => {
17
+ return state[layer] || userProps[layer] || layer === userProps['shape'] || (!userProps['shape'] && layer === 'circular');
18
+ };
19
+
8
20
  export const JSAvatar = compose<JSAvatarType>({
9
21
  displayName: JSAvatarName,
10
22
  ...stylingSettings,
@@ -18,12 +30,12 @@ export const JSAvatar = compose<JSAvatarType>({
18
30
  glow: View,
19
31
  },
20
32
  render: (userProps: JSAvatarProps, useSlots: UseSlots<JSAvatarType>) => {
21
- const Avatar = useAvatar(userProps);
22
- const Slots = useSlots(userProps, (layer) => Avatar.state[layer] || userProps[layer]);
33
+ const avatar = useAvatar(userProps);
34
+ const Slots = useSlots(userProps, (layer) => avatarLookup(layer, avatar.state, userProps));
23
35
 
24
36
  return (final: JSAvatarProps) => {
25
- const { children, accessibilityLabel, ...mergedProps } = mergeProps(Avatar.props, final);
26
- const { personaPhotoSource, iconSource, showRing, transparentRing } = Avatar.state;
37
+ const { children, accessibilityLabel, ...mergedProps } = mergeProps(avatar.props, final);
38
+ const { personaPhotoSource, iconSource, showRing, transparentRing } = avatar.state;
27
39
 
28
40
  return (
29
41
  <Slots.root {...mergedProps}>
package/src/JSAvatar.types.ts CHANGED
@@ -1,11 +1,15 @@
1
1
  import type { IViewProps } from '@fluentui-react-native/adapters';
2
2
  import { ImageProps, ViewProps, ImageURISource, TextProps, ColorValue } from 'react-native';
3
- import { IBackgroundColorTokens, IForegroundColorTokens } from '@fluentui-react-native/tokens';
3
+ import { IBackgroundColorTokens, IForegroundColorTokens, IBorderTokens } from '@fluentui-react-native/tokens';
4
4
 
5
5
  export const JSAvatarName = 'Avatar';
6
6
 
7
7
  export type AvatarSize = 'size8' | 'size24' | 'size32' | 'size40' | 'size48' | 'size56' | 'size72' | 'size100' | 'size120';
8
8
 
9
+ export type AvatarShape = 'circular' | 'square';
10
+ export type AvatarActive = 'active' | 'inactive' | 'unset';
11
+ export type AvatarActiveAppearance = 'ring' | 'shadow' | 'glow' | 'ring-shadow' | 'ring-glow';
12
+
9
13
  /**
10
14
  * Sets color of the avatar when there is no picture. Uses fluent color names
11
15
  */
@@ -51,11 +55,14 @@ export interface AvatarConfigurableProps {
51
55
  }
52
56
 
53
57
  export interface JSAvatarProps extends IViewProps, AvatarConfigurableProps {
58
+ active?: AvatarActive;
59
+ activeAppearance?: AvatarActiveAppearance;
54
60
  imageUrl?: string;
55
61
  imageDescription?: string;
56
62
  initials?: string;
57
63
  presence?: AvatarPresence;
58
64
  isOutOfOffice?: boolean;
65
+ shape?: AvatarShape;
59
66
  }
60
67
 
61
68
  export interface AvatarSlotProps {
@@ -70,7 +77,7 @@ export interface AvatarSlotProps {
70
77
 
71
78
  export type IconAlignment = 'start' | 'center' | 'end';
72
79
 
73
- export interface JSAvatarTokens extends IBackgroundColorTokens, IForegroundColorTokens, AvatarConfigurableProps {
80
+ export interface JSAvatarTokens extends IBackgroundColorTokens, IForegroundColorTokens, AvatarConfigurableProps, IBorderTokens {
74
81
  avatarSize?: number;
75
82
  iconSize?: number;
76
83
  iconStrokeWidth?: number;
@@ -79,6 +86,8 @@ export interface JSAvatarTokens extends IBackgroundColorTokens, IForegroundColor
79
86
  horizontalIconAlignment?: IconAlignment;
80
87
  verticalIconAlignment?: IconAlignment;
81
88
  physicalSize?: number;
89
+ circular?: JSAvatarTokens;
90
+ square?: JSAvatarTokens;
82
91
  }
83
92
 
84
93
  export interface JSAvatarState {
package/src/JSAvatarTokens.ts CHANGED
@@ -2,6 +2,7 @@ import { Theme } from '@fluentui-react-native/framework';
2
2
  import { TokenSettings } from '@fluentui-react-native/use-styling';
3
3
  import { JSAvatarTokens } from '.';
4
4
  import { convertCoinColorFluent } from './JSAvatar.helpers';
5
+ import { globalTokens } from '@fluentui-react-native/theme-tokens';
5
6
 
6
7
  export const defaultJSAvatarTokens: TokenSettings<JSAvatarTokens, Theme> = () =>
7
8
  ({
@@ -10,4 +11,10 @@ export const defaultJSAvatarTokens: TokenSettings<JSAvatarTokens, Theme> = () =>
10
11
  color: 'white', // initials is always 'white', unless overriden by token
11
12
  iconStrokeColor: 'white', // icon stroke color is always 'white', unless overriden by token
12
13
  backgroundColor: convertCoinColorFluent('cornflower'),
14
+ circular: {
15
+ borderRadius: globalTokens.corner.radius.circle,
16
+ },
17
+ square: {
18
+ borderRadius: globalTokens.corner.radius.medium,
19
+ },
13
20
  } 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, ...rest } = props;
12
+ const { imageUrl, imageDescription, initials, presence, isOutOfOffice, ring, shape, ...rest } = props;
13
13
 
14
14
  const personaPhotoSource =
15
15
  imageUrl === undefined
@@ -33,6 +33,7 @@ export const useAvatar = (props: JSAvatarProps): AvatarInfo => {
33
33
  props: {
34
34
  children: initials,
35
35
  accessibilityLabel: imageDescription,
36
+ shape: shape || 'circular',
36
37
  ...rest,
37
38
  },
38
39
  state: {