@fluentui-react-native/experimental-avatar 0.14.36 → 0.14.37
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.json +16 -1
- package/CHANGELOG.md +10 -2
- package/MIGRATION.md +158 -0
- package/SPEC.md +2 -7
- package/lib/JSAvatar.js +2 -2
- package/lib/JSAvatar.js.map +1 -1
- package/lib/JSAvatar.types.d.ts +2 -7
- package/lib/JSAvatar.types.d.ts.map +1 -1
- package/lib/useAvatar.d.ts.map +1 -1
- package/lib/useAvatar.js +2 -6
- package/lib/useAvatar.js.map +1 -1
- package/lib-commonjs/JSAvatar.js +2 -2
- package/lib-commonjs/JSAvatar.js.map +1 -1
- package/lib-commonjs/JSAvatar.types.d.ts +2 -7
- package/lib-commonjs/JSAvatar.types.d.ts.map +1 -1
- package/lib-commonjs/useAvatar.d.ts.map +1 -1
- package/lib-commonjs/useAvatar.js +2 -6
- package/lib-commonjs/useAvatar.js.map +1 -1
- package/package.json +1 -1
- package/src/JSAvatar.tsx +3 -3
- package/src/JSAvatar.types.ts +2 -8
- package/src/useAvatar.ts +1 -8
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,22 @@
|
|
|
2
2
|
"name": "@fluentui-react-native/experimental-avatar",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "Mon, 06 Jun 2022
|
|
5
|
+
"date": "Mon, 06 Jun 2022 18:30:17 GMT",
|
|
6
|
+
"tag": "@fluentui-react-native/experimental-avatar_v0.14.37",
|
|
7
|
+
"version": "0.14.37",
|
|
8
|
+
"comments": {
|
|
9
|
+
"patch": [
|
|
10
|
+
{
|
|
11
|
+
"author": "v.kozova13@gmail.com",
|
|
12
|
+
"package": "@fluentui-react-native/experimental-avatar",
|
|
13
|
+
"commit": "21bc6e21158561bf2654a5fb1d532db3f45264a8",
|
|
14
|
+
"comment": "Added Avatar migration and added image prop"
|
|
15
|
+
}
|
|
16
|
+
]
|
|
17
|
+
}
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
"date": "Mon, 06 Jun 2022 08:34:25 GMT",
|
|
6
21
|
"tag": "@fluentui-react-native/experimental-avatar_v0.14.36",
|
|
7
22
|
"version": "0.14.36",
|
|
8
23
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,20 @@
|
|
|
1
1
|
# Change Log - @fluentui-react-native/experimental-avatar
|
|
2
2
|
|
|
3
|
-
This log was last generated on Mon, 06 Jun 2022
|
|
3
|
+
This log was last generated on Mon, 06 Jun 2022 18:30:17 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## 0.14.37
|
|
8
|
+
|
|
9
|
+
Mon, 06 Jun 2022 18:30:17 GMT
|
|
10
|
+
|
|
11
|
+
### Patches
|
|
12
|
+
|
|
13
|
+
- Added Avatar migration and added image prop (v.kozova13@gmail.com)
|
|
14
|
+
|
|
7
15
|
## 0.14.36
|
|
8
16
|
|
|
9
|
-
Mon, 06 Jun 2022 08:34:
|
|
17
|
+
Mon, 06 Jun 2022 08:34:25 GMT
|
|
10
18
|
|
|
11
19
|
### Patches
|
|
12
20
|
|
package/MIGRATION.md
ADDED
|
@@ -0,0 +1,158 @@
|
|
|
1
|
+
# Avatar Migration
|
|
2
|
+
|
|
3
|
+
## Migration from PersonaCoin component
|
|
4
|
+
|
|
5
|
+
### Component renames
|
|
6
|
+
|
|
7
|
+
| `PersonaCoin` | `Avatar` |
|
|
8
|
+
| ------------------------------------------------------------ | ------------------------------------------------ |
|
|
9
|
+
| `<PersonaCoin size='size24' initials="SN" />` | `<Avatar size={24} initials="SN" />` |
|
|
10
|
+
| `<PersonaCoin presence='available' coinColorFluent="red" />` | `<Avatar size={24} initials="SN" />` |
|
|
11
|
+
| `<PersonaCoin imageUrl="./path/name.png" />` | `<Avatar image={{source: './path/name.png'}} />` |
|
|
12
|
+
| `<PersonaCoin imageDescription="Photo" />` | `<Avatar accessibilityLabel="Photo" />` |
|
|
13
|
+
|
|
14
|
+
### Props that remain as is
|
|
15
|
+
|
|
16
|
+
- `icon`
|
|
17
|
+
- `initials`
|
|
18
|
+
- `size`
|
|
19
|
+
- `imageUrl`
|
|
20
|
+
|
|
21
|
+
### Props no longer supported with an equivalent functionality in Avatar
|
|
22
|
+
|
|
23
|
+
- `coinColorFluent` => Use `avatarColor` instead.
|
|
24
|
+
- `imageDescription` => Use `accessibilityLabel` instead.
|
|
25
|
+
- `isOutOfOffice` => `outOfOffice` is part of `badge` slot. Use `badge={{ outOfOffice: true }} />`.
|
|
26
|
+
- `presence` => It's part of `badge` slot. Use `badge={{ presence: 'available' }} />`.
|
|
27
|
+
- `ring` => `ring` became part of `activeAppearance` prop. It's used together with `active='active'` prop.
|
|
28
|
+
|
|
29
|
+
### New props
|
|
30
|
+
|
|
31
|
+
- `active`
|
|
32
|
+
- `activeAppearance` - According to Web spec there should be `ring`, `shadow`, `glow`, `ring-shadow`, `ring-glow`.
|
|
33
|
+
Currently we support only `ring`. `activeAppearance` can be used when `active` prop set to `active`.
|
|
34
|
+
- `name` - is used for generation initials with `getInitials` method.
|
|
35
|
+
- `shape` - can be `circular` and `square`.
|
|
36
|
+
- `idForColor`
|
|
37
|
+
|
|
38
|
+
### Tokens that remain as is
|
|
39
|
+
|
|
40
|
+
- Any props that are part of `IBackgroundColorTokens`, `IForegroundColorTokens`
|
|
41
|
+
|
|
42
|
+
- `iconSize`
|
|
43
|
+
- `iconWeight`
|
|
44
|
+
- `horizontalIconAlignment`
|
|
45
|
+
- `verticalIconAlignment`
|
|
46
|
+
- `size`
|
|
47
|
+
|
|
48
|
+
### Tokens no longer supported with an equivalent functionality in Avatar
|
|
49
|
+
|
|
50
|
+
- `initialsSize` => Use `fontSize` token instead
|
|
51
|
+
- `coinColorFluent` => Use `avatarColor` token instead
|
|
52
|
+
- `coinSize` => Use size tokens instead.
|
|
53
|
+
- `ring` => Use `ringBackgroundColor`, `ringColor`, `ringThickness` and `ringInnerGap`
|
|
54
|
+
|
|
55
|
+
### Tokens no longer supported without an equivalent functionality in Avatar
|
|
56
|
+
|
|
57
|
+
- `iconStrokeWidth` and `iconStrokeColor` => This was for activity ring around the Avatar.
|
|
58
|
+
We support ring in `activeAppearance` prop. `borderColor` will be changed using `ringColor` token and `borderWidth` using ringThickness token.
|
|
59
|
+
|
|
60
|
+
### New tokens
|
|
61
|
+
|
|
62
|
+
- Any props that are part of `FontTokens` and `IBorderTokens`.
|
|
63
|
+
- `avatarOpacity`
|
|
64
|
+
- `badgeSize`
|
|
65
|
+
- `circular`
|
|
66
|
+
- `iconColor`
|
|
67
|
+
- `inactive`
|
|
68
|
+
- `square`
|
|
69
|
+
|
|
70
|
+
Size tokens:
|
|
71
|
+
|
|
72
|
+
- `size20`
|
|
73
|
+
- `size24`
|
|
74
|
+
- `size28`
|
|
75
|
+
- `size32`
|
|
76
|
+
- `size36`
|
|
77
|
+
- `size40`
|
|
78
|
+
- `size48`
|
|
79
|
+
- `size56`
|
|
80
|
+
- `size64`
|
|
81
|
+
- `size72`
|
|
82
|
+
- `size96`
|
|
83
|
+
- `size120`
|
|
84
|
+
|
|
85
|
+
Color tokens:
|
|
86
|
+
|
|
87
|
+
- `neutral`
|
|
88
|
+
- `brand`
|
|
89
|
+
- `darkRed`
|
|
90
|
+
- `cranberry`
|
|
91
|
+
- `red`
|
|
92
|
+
- `pumpkin`
|
|
93
|
+
- `peach`
|
|
94
|
+
- `marigold`
|
|
95
|
+
- `gold`
|
|
96
|
+
- `brass`
|
|
97
|
+
- `brown`
|
|
98
|
+
- `forest`
|
|
99
|
+
- `seafoam`
|
|
100
|
+
- `darkGreen`
|
|
101
|
+
- `lightTeal`
|
|
102
|
+
- `teal`
|
|
103
|
+
- `steel`
|
|
104
|
+
- `blue`
|
|
105
|
+
- `royalBlue`
|
|
106
|
+
- `cornflower`
|
|
107
|
+
- `navy`
|
|
108
|
+
- `lavender`
|
|
109
|
+
- `purple`
|
|
110
|
+
- `grape`
|
|
111
|
+
- `lilac`
|
|
112
|
+
- `pink`
|
|
113
|
+
- `magenta`
|
|
114
|
+
- `plum`
|
|
115
|
+
- `beige`
|
|
116
|
+
- `mink`
|
|
117
|
+
- `platinum`
|
|
118
|
+
- `anchor`
|
|
119
|
+
|
|
120
|
+
### Slots no longer supported with an equivalent functionality in v1 Avatar
|
|
121
|
+
|
|
122
|
+
- `photo` => Use `image` slot instead or `imageUrl` prop.
|
|
123
|
+
|
|
124
|
+
### Slots no longer supported without an equivalent functionality in v1 Avatar
|
|
125
|
+
|
|
126
|
+
- `glow` => is not suported in this version of Avatar
|
|
127
|
+
|
|
128
|
+
### New slots
|
|
129
|
+
|
|
130
|
+
- `badge`
|
|
131
|
+
|
|
132
|
+
### Prop differences due to technical differences and limitations
|
|
133
|
+
|
|
134
|
+
- Web uses `image` slot which is part of `react-image` component. They use syntax `image={{ src: './MonaKane.jpg' }}`. If we use similar syntax, our users will need to write `image={{ source: { uri: './MonaKane.jpg' } }} />`. In majority of cases users pass image URL that's why we still have opportunity to pass this parameter using `imageUrl` prop. But there's also a way to pass `image` object similar to Web.
|
|
135
|
+
|
|
136
|
+
### Other Prop differences
|
|
137
|
+
|
|
138
|
+
- `avatarColor` => Web uses `color` prop and omits it from `ComponentProps<AvatarSlots>`. Their users can style font color using CSS but our users can style the component via tokens. If we use the same prop name (color), we'll need to omit it from foregroundTokens and come up with a new name for the font color prop. That's why we use `avatarColor` prop instead of `color`.
|
|
139
|
+
|
|
140
|
+
## Property mapping
|
|
141
|
+
|
|
142
|
+
| `PersonaCoin` | `Avatar` |
|
|
143
|
+
| ------------------ | -------------------- |
|
|
144
|
+
| | `active` |
|
|
145
|
+
| | `activeAppearance` |
|
|
146
|
+
| | `badge` |
|
|
147
|
+
| `coinColorFluent` | `avatarColor` |
|
|
148
|
+
| `icon` | `icon` |
|
|
149
|
+
| | `idForColor` |
|
|
150
|
+
| `imageUrl` | `imageUrl` |
|
|
151
|
+
| `imageDescription` | `accessibilityLabel` |
|
|
152
|
+
| `isOutOfOffice` | |
|
|
153
|
+
| `initials` | `initials` |
|
|
154
|
+
| | `name` |
|
|
155
|
+
| `presence` | |
|
|
156
|
+
| `ring` | |
|
|
157
|
+
| | `shape` |
|
|
158
|
+
| `size` | `size` |
|
package/SPEC.md
CHANGED
|
@@ -140,11 +140,6 @@ export interface JSAvatarProps extends IViewProps, AvatarConfigurableProps {
|
|
|
140
140
|
*/
|
|
141
141
|
idForColor?: string;
|
|
142
142
|
|
|
143
|
-
/**
|
|
144
|
-
* The Avatar's image.
|
|
145
|
-
*/
|
|
146
|
-
image?: ImageProps;
|
|
147
|
-
|
|
148
143
|
/**
|
|
149
144
|
* The initials are displayed when there is no image (including while the image is loading).
|
|
150
145
|
*
|
|
@@ -177,9 +172,9 @@ export interface JSAvatarProps extends IViewProps, AvatarConfigurableProps {
|
|
|
177
172
|
shape?: AvatarShape;
|
|
178
173
|
|
|
179
174
|
/**
|
|
180
|
-
*
|
|
175
|
+
* Shorthand for passing image URL instead of using `image` prop
|
|
181
176
|
*/
|
|
182
|
-
|
|
177
|
+
imageUrl?: string;
|
|
183
178
|
}
|
|
184
179
|
```
|
|
185
180
|
|
package/lib/JSAvatar.js
CHANGED
|
@@ -63,12 +63,12 @@ export var JSAvatar = compose(__assign(__assign({ displayName: JSAvatarName }, s
|
|
|
63
63
|
var iconProps = createIconProps(userProps.icon);
|
|
64
64
|
var Slots = useSlots(avatar.props, function (layer) { return avatarLookup(layer, avatar.state, avatar.props); });
|
|
65
65
|
return function (final) {
|
|
66
|
-
var _a = mergeProps(avatar.props, final), activeAppearance = _a.activeAppearance, icon = _a.icon, initials = _a.initials,
|
|
66
|
+
var _a = mergeProps(avatar.props, final), activeAppearance = _a.activeAppearance, icon = _a.icon, initials = _a.initials, imageUrl = _a.imageUrl, badge = _a.badge, mergedProps = __rest(_a, ["activeAppearance", "icon", "initials", "imageUrl", "badge"]);
|
|
67
67
|
var _b = avatar.state, showRing = _b.showRing, transparentRing = _b.transparentRing, showBadge = _b.showBadge;
|
|
68
68
|
var svgIconsEnabled = ['ios', 'macos', 'win32', 'android'].includes(Platform.OS);
|
|
69
69
|
var fallBackIconXml = "<svg width=\"14\" height=\"16\" viewBox=\"0 0 14 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7 0C4.79086 0 3 1.79086 3 4C3 6.20914 4.79086 8 7 8C9.20914 8 11 6.20914 11 4C11 1.79086 9.20914 0 7 0ZM4 4C4 2.34315 5.34315 1 7 1C8.65685 1 10 2.34315 10 4C10 5.65685 8.65685 7 7 7C5.34315 7 4 5.65685 4 4ZM2.00873 9C0.903151 9 0 9.88687 0 11C0 12.6912 0.83281 13.9663 2.13499 14.7966C3.41697 15.614 5.14526 16 7 16C8.85474 16 10.583 15.614 11.865 14.7966C13.1672 13.9663 14 12.6912 14 11C14 9.89557 13.1045 9.00001 12 9.00001L2.00873 9ZM1 11C1 10.4467 1.44786 10 2.00873 10L12 10C12.5522 10 13 10.4478 13 11C13 12.3088 12.3777 13.2837 11.3274 13.9534C10.2568 14.636 8.73511 15 7 15C5.26489 15 3.74318 14.636 2.67262 13.9534C1.62226 13.2837 1 12.3088 1 11Z\" fill=\"currentColor\"/>\n </svg>\n ";
|
|
70
70
|
return (withSlots(Slots.root, __assign({}, mergedProps),
|
|
71
|
-
|
|
71
|
+
imageUrl ? (withSlots(Slots.image, { source: { uri: imageUrl } })) : (withSlots(Slots.initialsBackground, null, initials ? (withSlots(Slots.initials, null, initials)) : userProps.icon ? (withSlots(Slots.icon, __assign({}, iconProps))) : (withSlots(SvgXml, { xml: fallBackIconXml })))),
|
|
72
72
|
showRing && !transparentRing && withSlots(Slots.ring, null),
|
|
73
73
|
svgIconsEnabled && showBadge && withSlots(Slots.badge, __assign({}, badge))));
|
|
74
74
|
};
|
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,QAAQ,EAAE,MAAM,cAAc,CAAC;AAC3D,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;AAC7D,OAAO,EAAE,IAAI,EAAE,MAAM,6BAA6B,CAAC;AACnD,OAAO,EAAE,eAAe,EAAE,MAAM,0CAA0C,CAAC;AAC3E,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE1C;;;;;;;GAOG;AACH,MAAM,CAAC,IAAM,YAAY,GAAG,UAAC,KAAa,EAAE,KAAoB,EAAE,SAAwB;IACxF,IAAM,IAAI,GAAG,SAAS,CAAC,IAAI,CAAC;IAC5B,IAAM,UAAU,GAAG,IAAI,CAAC,CAAC,CAAC,cAAO,IAAI,CAAE,CAAC,CAAC,CAAC,EAAE,CAAC;IAC7C,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,KAAK,KAAK,SAAS,CAAC,aAAa,CAAC;QAClC,CAAC,CAAC,SAAS,CAAC,aAAa,CAAC,IAAI,KAAK,KAAK,SAAS,CAAC;QAClD,KAAK,KAAK,UAAU;QACpB,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,IAAI;QACV,IAAI,EAAE,IAAI;QACV,KAAK,EAAE,aAAa;KACrB,EACD,SAAS,EAAE,UAAC,SAAwB,EAAE,QAAgC;QACpE,IAAM,MAAM,GAAG,SAAS,CAAC,SAAS,CAAC,CAAC;QACpC,IAAM,SAAS,GAAG,eAAe,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;QAClD,IAAM,KAAK,GAAG,QAAQ,CAAC,MAAM,CAAC,KAAK,EAAE,UAAC,KAAK,IAAK,OAAA,YAAY,CAAC,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,EAA/C,CAA+C,CAAC,CAAC;QAEjG,OAAO,UAAC,KAAoB;YAC1B,IAAM,
|
|
1
|
+
{"version":3,"file":"JSAvatar.js","sourceRoot":"","sources":["../src/JSAvatar.tsx"],"names":[],"mappings":"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"}
|
package/lib/JSAvatar.types.d.ts
CHANGED
|
@@ -18,7 +18,6 @@ export declare type AvatarActiveAppearance = 'ring';
|
|
|
18
18
|
export declare type AvatarColor = 'neutral' | 'brand' | 'colorful' | AvatarNamedColor;
|
|
19
19
|
export declare type IconAlignment = 'start' | 'center' | 'end';
|
|
20
20
|
export interface RingConfig {
|
|
21
|
-
accent?: boolean;
|
|
22
21
|
transparent?: boolean;
|
|
23
22
|
ringThickness?: number;
|
|
24
23
|
innerGap?: number;
|
|
@@ -77,10 +76,6 @@ export interface JSAvatarProps extends IViewProps, AvatarConfigurableProps {
|
|
|
77
76
|
* Use this when a name is not available, but there is another unique identifier that can be used instead.
|
|
78
77
|
*/
|
|
79
78
|
idForColor?: string;
|
|
80
|
-
/**
|
|
81
|
-
* The Avatar's image.
|
|
82
|
-
*/
|
|
83
|
-
image?: ImageProps;
|
|
84
79
|
/**
|
|
85
80
|
* (optional) Custom initials.
|
|
86
81
|
*
|
|
@@ -103,9 +98,9 @@ export interface JSAvatarProps extends IViewProps, AvatarConfigurableProps {
|
|
|
103
98
|
*/
|
|
104
99
|
shape?: AvatarShape;
|
|
105
100
|
/**
|
|
106
|
-
*
|
|
101
|
+
* Shorthand for passing image URL instead of using `image` prop
|
|
107
102
|
*/
|
|
108
|
-
|
|
103
|
+
imageUrl?: string;
|
|
109
104
|
}
|
|
110
105
|
export interface JSAvatarTokens extends IBackgroundColorTokens, IForegroundColorTokens, AvatarConfigurableProps, IBorderTokens, FontTokens {
|
|
111
106
|
iconColor?: ColorValue;
|
|
@@ -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,SAAS,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC5E,OAAO,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAC1H,OAAO,EAAE,UAAU,EAAE,kBAAkB,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzF,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAEzE,eAAO,MAAM,YAAY,WAAW,CAAC;AACrC,eAAO,MAAM,oBAAoB,oIAavB,CAAC;AAEX,eAAO,MAAM,WAAW,4DAA6D,CAAC;AAEtF;;GAEG;AACH,eAAO,MAAM,YAAY,yTA+Bf,CAAC;AACX,oBAAY,UAAU,GAAG,OAAO,WAAW,CAAC,MAAM,CAAC,CAAC;AACpD,oBAAY,gBAAgB,GAAG,OAAO,YAAY,CAAC,MAAM,CAAC,CAAC;AAE3D,oBAAY,WAAW,GAAG,UAAU,GAAG,QAAQ,CAAC;AAChD,oBAAY,YAAY,GAAG,QAAQ,GAAG,UAAU,GAAG,OAAO,CAAC;AAC3D,oBAAY,sBAAsB,GAAG,MAAM,CAAC;AAC5C,oBAAY,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,UAAU,GAAG,gBAAgB,CAAC;AAC9E,oBAAY,aAAa,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;AAEvD,MAAM,WAAW,UAAU;IACzB,
|
|
1
|
+
{"version":3,"file":"JSAvatar.types.d.ts","sourceRoot":"","sources":["../src/JSAvatar.types.ts"],"names":[],"mappings":"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"}
|
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,EAA+B,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"useAvatar.d.ts","sourceRoot":"","sources":["../src/useAvatar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAA+B,MAAM,kBAAkB,CAAC;AAI1F;;;;;;GAMG;AACH,eAAO,MAAM,SAAS,UAAW,aAAa,KAAG,UAoChD,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,WAAW,SAAU,MAAM,KAAG,MAY1C,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,8BAA8B,SAAU,MAAM,KAAG,OAG7D,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,oBAAoB,UAAW,MAAM,EAAE,KAAG,MAAM,EAE5D,CAAC"}
|
package/lib/useAvatar.js
CHANGED
|
@@ -32,14 +32,10 @@ import { getHashCodeWeb } from './getHashCode';
|
|
|
32
32
|
*/
|
|
33
33
|
export var useAvatar = function (props) {
|
|
34
34
|
var _a;
|
|
35
|
-
var avatarColor = props.avatarColor, active = props.active,
|
|
35
|
+
var avatarColor = props.avatarColor, active = props.active, activeAppearance = props.activeAppearance, badge = props.badge, idForColor = props.idForColor, initials = props.initials, name = props.name, ring = props.ring, shape = props.shape, rest = __rest(props, ["avatarColor", "active", "activeAppearance", "badge", "idForColor", "initials", "name", "ring", "shape"]);
|
|
36
36
|
var showRing = active === 'active' && activeAppearance === 'ring';
|
|
37
37
|
var transparentRing = !!(ring === null || ring === void 0 ? void 0 : ring.transparent);
|
|
38
38
|
var showBadge = (!active || active === 'unset') && !!badge && !!badge.status;
|
|
39
|
-
var imageProps = {
|
|
40
|
-
accessibilityLabel: accessibilityLabel,
|
|
41
|
-
source: src ? { uri: src } : undefined,
|
|
42
|
-
};
|
|
43
39
|
var badgeProps = __assign({ size: 'small' }, badge);
|
|
44
40
|
var state = {
|
|
45
41
|
showRing: showRing,
|
|
@@ -50,7 +46,7 @@ export var useAvatar = function (props) {
|
|
|
50
46
|
var avatarColorsIdx = getHashCodeWeb((_a = idForColor !== null && idForColor !== void 0 ? idForColor : name) !== null && _a !== void 0 ? _a : '') % AvatarColors.length;
|
|
51
47
|
var _avatarColor = avatarColor === 'colorful' ? AvatarColors[avatarColorsIdx] : avatarColor;
|
|
52
48
|
return {
|
|
53
|
-
props: __assign(__assign({ avatarColor: _avatarColor, shape: shape || 'circular' }, rest), { active: active, activeAppearance: activeAppearance,
|
|
49
|
+
props: __assign(__assign({ avatarColor: _avatarColor, shape: shape || 'circular' }, rest), { active: active, activeAppearance: activeAppearance, badge: badgeProps, initials: _initials }),
|
|
54
50
|
state: __assign({}, state),
|
|
55
51
|
};
|
|
56
52
|
};
|
package/lib/useAvatar.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useAvatar.js","sourceRoot":"","sources":["../src/useAvatar.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,EAA4C,YAAY,EAAE,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"useAvatar.js","sourceRoot":"","sources":["../src/useAvatar.ts"],"names":[],"mappings":"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"}
|
package/lib-commonjs/JSAvatar.js
CHANGED
|
@@ -67,12 +67,12 @@ exports.JSAvatar = (0, framework_1.compose)(__assign(__assign({ displayName: JSA
|
|
|
67
67
|
var iconProps = (0, interactive_hooks_1.createIconProps)(userProps.icon);
|
|
68
68
|
var Slots = useSlots(avatar.props, function (layer) { return (0, exports.avatarLookup)(layer, avatar.state, avatar.props); });
|
|
69
69
|
return function (final) {
|
|
70
|
-
var _a = (0, framework_1.mergeProps)(avatar.props, final), activeAppearance = _a.activeAppearance, icon = _a.icon, initials = _a.initials,
|
|
70
|
+
var _a = (0, framework_1.mergeProps)(avatar.props, final), activeAppearance = _a.activeAppearance, icon = _a.icon, initials = _a.initials, imageUrl = _a.imageUrl, badge = _a.badge, mergedProps = __rest(_a, ["activeAppearance", "icon", "initials", "imageUrl", "badge"]);
|
|
71
71
|
var _b = avatar.state, showRing = _b.showRing, transparentRing = _b.transparentRing, showBadge = _b.showBadge;
|
|
72
72
|
var svgIconsEnabled = ['ios', 'macos', 'win32', 'android'].includes(react_native_1.Platform.OS);
|
|
73
73
|
var fallBackIconXml = "<svg width=\"14\" height=\"16\" viewBox=\"0 0 14 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7 0C4.79086 0 3 1.79086 3 4C3 6.20914 4.79086 8 7 8C9.20914 8 11 6.20914 11 4C11 1.79086 9.20914 0 7 0ZM4 4C4 2.34315 5.34315 1 7 1C8.65685 1 10 2.34315 10 4C10 5.65685 8.65685 7 7 7C5.34315 7 4 5.65685 4 4ZM2.00873 9C0.903151 9 0 9.88687 0 11C0 12.6912 0.83281 13.9663 2.13499 14.7966C3.41697 15.614 5.14526 16 7 16C8.85474 16 10.583 15.614 11.865 14.7966C13.1672 13.9663 14 12.6912 14 11C14 9.89557 13.1045 9.00001 12 9.00001L2.00873 9ZM1 11C1 10.4467 1.44786 10 2.00873 10L12 10C12.5522 10 13 10.4478 13 11C13 12.3088 12.3777 13.2837 11.3274 13.9534C10.2568 14.636 8.73511 15 7 15C5.26489 15 3.74318 14.636 2.67262 13.9534C1.62226 13.2837 1 12.3088 1 11Z\" fill=\"currentColor\"/>\n </svg>\n ";
|
|
74
74
|
return ((0, framework_1.withSlots)(Slots.root, __assign({}, mergedProps),
|
|
75
|
-
|
|
75
|
+
imageUrl ? ((0, framework_1.withSlots)(Slots.image, { source: { uri: imageUrl } })) : ((0, framework_1.withSlots)(Slots.initialsBackground, null, initials ? ((0, framework_1.withSlots)(Slots.initials, null, initials)) : userProps.icon ? ((0, framework_1.withSlots)(Slots.icon, __assign({}, iconProps))) : ((0, framework_1.withSlots)(react_native_svg_1.SvgXml, { xml: fallBackIconXml })))),
|
|
76
76
|
showRing && !transparentRing && (0, framework_1.withSlots)(Slots.ring, null),
|
|
77
77
|
svgIconsEnabled && showBadge && (0, framework_1.withSlots)(Slots.badge, __assign({}, badge))));
|
|
78
78
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"JSAvatar.js","sourceRoot":"","sources":["../src/JSAvatar.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,qBAAqB;AACrB,6CAA2D;AAC3D,mDAA4F;AAC5F,uDAAqD;AACrD,8DAA4F;AAC5F,yCAAwC;AACxC,sDAA6D;AAC7D,oDAAmD;AACnD,8EAA2E;AAC3E,qDAA0C;AAE1C;;;;;;;GAOG;AACI,IAAM,YAAY,GAAG,UAAC,KAAa,EAAE,KAAoB,EAAE,SAAwB;IACxF,IAAM,IAAI,GAAG,SAAS,CAAC,IAAI,CAAC;IAC5B,IAAM,UAAU,GAAG,IAAI,CAAC,CAAC,CAAC,cAAO,IAAI,CAAE,CAAC,CAAC,CAAC,EAAE,CAAC;IAC7C,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,KAAK,KAAK,SAAS,CAAC,aAAa,CAAC;QAClC,CAAC,CAAC,SAAS,CAAC,aAAa,CAAC,IAAI,KAAK,KAAK,SAAS,CAAC;QAClD,KAAK,KAAK,UAAU;QACpB,CAAC,SAAS,CAAC,MAAM,KAAK,UAAU,IAAI,KAAK,KAAK,UAAU,CAAC,CAC1D,CAAC;AACJ,CAAC,CAAC;AAbW,QAAA,YAAY,gBAavB;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,WAAI;QACV,IAAI,EAAE,mBAAI;QACV,KAAK,EAAE,qBAAa;KACrB,EACD,SAAS,EAAE,UAAC,SAAwB,EAAE,QAAgC;QACpE,IAAM,MAAM,GAAG,IAAA,qBAAS,EAAC,SAAS,CAAC,CAAC;QACpC,IAAM,SAAS,GAAG,IAAA,mCAAe,EAAC,SAAS,CAAC,IAAI,CAAC,CAAC;QAClD,IAAM,KAAK,GAAG,QAAQ,CAAC,MAAM,CAAC,KAAK,EAAE,UAAC,KAAK,IAAK,OAAA,IAAA,oBAAY,EAAC,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,EAA/C,CAA+C,CAAC,CAAC;QAEjG,OAAO,UAAC,KAAoB;YAC1B,IAAM,
|
|
1
|
+
{"version":3,"file":"JSAvatar.js","sourceRoot":"","sources":["../src/JSAvatar.tsx"],"names":[],"mappings":"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"}
|
|
@@ -18,7 +18,6 @@ export declare type AvatarActiveAppearance = 'ring';
|
|
|
18
18
|
export declare type AvatarColor = 'neutral' | 'brand' | 'colorful' | AvatarNamedColor;
|
|
19
19
|
export declare type IconAlignment = 'start' | 'center' | 'end';
|
|
20
20
|
export interface RingConfig {
|
|
21
|
-
accent?: boolean;
|
|
22
21
|
transparent?: boolean;
|
|
23
22
|
ringThickness?: number;
|
|
24
23
|
innerGap?: number;
|
|
@@ -77,10 +76,6 @@ export interface JSAvatarProps extends IViewProps, AvatarConfigurableProps {
|
|
|
77
76
|
* Use this when a name is not available, but there is another unique identifier that can be used instead.
|
|
78
77
|
*/
|
|
79
78
|
idForColor?: string;
|
|
80
|
-
/**
|
|
81
|
-
* The Avatar's image.
|
|
82
|
-
*/
|
|
83
|
-
image?: ImageProps;
|
|
84
79
|
/**
|
|
85
80
|
* (optional) Custom initials.
|
|
86
81
|
*
|
|
@@ -103,9 +98,9 @@ export interface JSAvatarProps extends IViewProps, AvatarConfigurableProps {
|
|
|
103
98
|
*/
|
|
104
99
|
shape?: AvatarShape;
|
|
105
100
|
/**
|
|
106
|
-
*
|
|
101
|
+
* Shorthand for passing image URL instead of using `image` prop
|
|
107
102
|
*/
|
|
108
|
-
|
|
103
|
+
imageUrl?: string;
|
|
109
104
|
}
|
|
110
105
|
export interface JSAvatarTokens extends IBackgroundColorTokens, IForegroundColorTokens, AvatarConfigurableProps, IBorderTokens, FontTokens {
|
|
111
106
|
iconColor?: ColorValue;
|
|
@@ -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,SAAS,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC5E,OAAO,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAC1H,OAAO,EAAE,UAAU,EAAE,kBAAkB,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzF,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAEzE,eAAO,MAAM,YAAY,WAAW,CAAC;AACrC,eAAO,MAAM,oBAAoB,oIAavB,CAAC;AAEX,eAAO,MAAM,WAAW,4DAA6D,CAAC;AAEtF;;GAEG;AACH,eAAO,MAAM,YAAY,yTA+Bf,CAAC;AACX,oBAAY,UAAU,GAAG,OAAO,WAAW,CAAC,MAAM,CAAC,CAAC;AACpD,oBAAY,gBAAgB,GAAG,OAAO,YAAY,CAAC,MAAM,CAAC,CAAC;AAE3D,oBAAY,WAAW,GAAG,UAAU,GAAG,QAAQ,CAAC;AAChD,oBAAY,YAAY,GAAG,QAAQ,GAAG,UAAU,GAAG,OAAO,CAAC;AAC3D,oBAAY,sBAAsB,GAAG,MAAM,CAAC;AAC5C,oBAAY,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,UAAU,GAAG,gBAAgB,CAAC;AAC9E,oBAAY,aAAa,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;AAEvD,MAAM,WAAW,UAAU;IACzB,
|
|
1
|
+
{"version":3,"file":"JSAvatar.types.d.ts","sourceRoot":"","sources":["../src/JSAvatar.types.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useAvatar.d.ts","sourceRoot":"","sources":["../src/useAvatar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAA+B,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"useAvatar.d.ts","sourceRoot":"","sources":["../src/useAvatar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAA+B,MAAM,kBAAkB,CAAC;AAI1F;;;;;;GAMG;AACH,eAAO,MAAM,SAAS,UAAW,aAAa,KAAG,UAoChD,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,WAAW,SAAU,MAAM,KAAG,MAY1C,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,8BAA8B,SAAU,MAAM,KAAG,OAG7D,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,oBAAoB,UAAW,MAAM,EAAE,KAAG,MAAM,EAE5D,CAAC"}
|
|
@@ -35,14 +35,10 @@ var getHashCode_1 = require("./getHashCode");
|
|
|
35
35
|
*/
|
|
36
36
|
var useAvatar = function (props) {
|
|
37
37
|
var _a;
|
|
38
|
-
var avatarColor = props.avatarColor, active = props.active,
|
|
38
|
+
var avatarColor = props.avatarColor, active = props.active, activeAppearance = props.activeAppearance, badge = props.badge, idForColor = props.idForColor, initials = props.initials, name = props.name, ring = props.ring, shape = props.shape, rest = __rest(props, ["avatarColor", "active", "activeAppearance", "badge", "idForColor", "initials", "name", "ring", "shape"]);
|
|
39
39
|
var showRing = active === 'active' && activeAppearance === 'ring';
|
|
40
40
|
var transparentRing = !!(ring === null || ring === void 0 ? void 0 : ring.transparent);
|
|
41
41
|
var showBadge = (!active || active === 'unset') && !!badge && !!badge.status;
|
|
42
|
-
var imageProps = {
|
|
43
|
-
accessibilityLabel: accessibilityLabel,
|
|
44
|
-
source: src ? { uri: src } : undefined,
|
|
45
|
-
};
|
|
46
42
|
var badgeProps = __assign({ size: 'small' }, badge);
|
|
47
43
|
var state = {
|
|
48
44
|
showRing: showRing,
|
|
@@ -53,7 +49,7 @@ var useAvatar = function (props) {
|
|
|
53
49
|
var avatarColorsIdx = (0, getHashCode_1.getHashCodeWeb)((_a = idForColor !== null && idForColor !== void 0 ? idForColor : name) !== null && _a !== void 0 ? _a : '') % JSAvatar_types_1.AvatarColors.length;
|
|
54
50
|
var _avatarColor = avatarColor === 'colorful' ? JSAvatar_types_1.AvatarColors[avatarColorsIdx] : avatarColor;
|
|
55
51
|
return {
|
|
56
|
-
props: __assign(__assign({ avatarColor: _avatarColor, shape: shape || 'circular' }, rest), { active: active, activeAppearance: activeAppearance,
|
|
52
|
+
props: __assign(__assign({ avatarColor: _avatarColor, shape: shape || 'circular' }, rest), { active: active, activeAppearance: activeAppearance, badge: badgeProps, initials: _initials }),
|
|
57
53
|
state: __assign({}, state),
|
|
58
54
|
};
|
|
59
55
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useAvatar.js","sourceRoot":"","sources":["../src/useAvatar.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,mDAA0F;
|
|
1
|
+
{"version":3,"file":"useAvatar.js","sourceRoot":"","sources":["../src/useAvatar.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui-react-native/experimental-avatar",
|
|
3
|
-
"version": "0.14.
|
|
3
|
+
"version": "0.14.37",
|
|
4
4
|
"description": "A cross-platform Avatar component using the Fluent Design System. Currently only implemented on iOS",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "Microsoft <fluentuinativeowners@microsoft.com>",
|
package/src/JSAvatar.tsx
CHANGED
|
@@ -50,7 +50,7 @@ export const JSAvatar = compose<JSAvatarType>({
|
|
|
50
50
|
const Slots = useSlots(avatar.props, (layer) => avatarLookup(layer, avatar.state, avatar.props));
|
|
51
51
|
|
|
52
52
|
return (final: JSAvatarProps) => {
|
|
53
|
-
const { activeAppearance, icon, initials,
|
|
53
|
+
const { activeAppearance, icon, initials, imageUrl, badge, ...mergedProps } = mergeProps(avatar.props, final);
|
|
54
54
|
const { showRing, transparentRing, showBadge } = avatar.state;
|
|
55
55
|
const svgIconsEnabled = ['ios', 'macos', 'win32', 'android'].includes(Platform.OS as string);
|
|
56
56
|
const fallBackIconXml = `<svg width="14" height="16" viewBox="0 0 14 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
@@ -60,8 +60,8 @@ export const JSAvatar = compose<JSAvatarType>({
|
|
|
60
60
|
|
|
61
61
|
return (
|
|
62
62
|
<Slots.root {...mergedProps}>
|
|
63
|
-
{
|
|
64
|
-
<Slots.image {
|
|
63
|
+
{imageUrl ? (
|
|
64
|
+
<Slots.image source={{ uri: imageUrl }} />
|
|
65
65
|
) : (
|
|
66
66
|
<Slots.initialsBackground>
|
|
67
67
|
{initials ? (
|
package/src/JSAvatar.types.ts
CHANGED
|
@@ -67,7 +67,6 @@ export type AvatarColor = 'neutral' | 'brand' | 'colorful' | AvatarNamedColor;
|
|
|
67
67
|
export type IconAlignment = 'start' | 'center' | 'end';
|
|
68
68
|
|
|
69
69
|
export interface RingConfig {
|
|
70
|
-
accent?: boolean;
|
|
71
70
|
transparent?: boolean;
|
|
72
71
|
ringThickness?: number;
|
|
73
72
|
innerGap?: number;
|
|
@@ -134,11 +133,6 @@ export interface JSAvatarProps extends IViewProps, AvatarConfigurableProps {
|
|
|
134
133
|
*/
|
|
135
134
|
idForColor?: string;
|
|
136
135
|
|
|
137
|
-
/**
|
|
138
|
-
* The Avatar's image.
|
|
139
|
-
*/
|
|
140
|
-
image?: ImageProps;
|
|
141
|
-
|
|
142
136
|
/**
|
|
143
137
|
* (optional) Custom initials.
|
|
144
138
|
*
|
|
@@ -164,9 +158,9 @@ export interface JSAvatarProps extends IViewProps, AvatarConfigurableProps {
|
|
|
164
158
|
shape?: AvatarShape;
|
|
165
159
|
|
|
166
160
|
/**
|
|
167
|
-
*
|
|
161
|
+
* Shorthand for passing image URL instead of using `image` prop
|
|
168
162
|
*/
|
|
169
|
-
|
|
163
|
+
imageUrl?: string;
|
|
170
164
|
}
|
|
171
165
|
|
|
172
166
|
export interface JSAvatarTokens extends IBackgroundColorTokens, IForegroundColorTokens, AvatarConfigurableProps, IBorderTokens, FontTokens {
|
package/src/useAvatar.ts
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { JSAvatarProps, AvatarInfo, JSAvatarState, AvatarColors } from './JSAvatar.types';
|
|
2
|
-
import { ImageProps, ImageSourcePropType } from 'react-native';
|
|
3
2
|
import { PresenceBadgeProps } from '@fluentui-react-native/badge';
|
|
4
3
|
import { titles } from './titles';
|
|
5
4
|
import { getHashCodeWeb } from './getHashCode';
|
|
@@ -11,17 +10,12 @@ import { getHashCodeWeb } from './getHashCode';
|
|
|
11
10
|
* @returns configured props and state for FURN Avatar
|
|
12
11
|
*/
|
|
13
12
|
export const useAvatar = (props: JSAvatarProps): AvatarInfo => {
|
|
14
|
-
const { avatarColor, active,
|
|
13
|
+
const { avatarColor, active, activeAppearance, badge, idForColor, initials, name, ring, shape, ...rest } = props;
|
|
15
14
|
|
|
16
15
|
const showRing = active === 'active' && activeAppearance === 'ring';
|
|
17
16
|
const transparentRing = !!ring?.transparent;
|
|
18
17
|
const showBadge = (!active || active === 'unset') && !!badge && !!badge.status;
|
|
19
18
|
|
|
20
|
-
const imageProps: ImageProps = {
|
|
21
|
-
accessibilityLabel,
|
|
22
|
-
source: src ? ({ uri: src } as ImageSourcePropType) : undefined,
|
|
23
|
-
};
|
|
24
|
-
|
|
25
19
|
const badgeProps: PresenceBadgeProps = {
|
|
26
20
|
size: 'small',
|
|
27
21
|
...badge,
|
|
@@ -44,7 +38,6 @@ export const useAvatar = (props: JSAvatarProps): AvatarInfo => {
|
|
|
44
38
|
...rest,
|
|
45
39
|
active,
|
|
46
40
|
activeAppearance,
|
|
47
|
-
image: imageProps,
|
|
48
41
|
badge: badgeProps,
|
|
49
42
|
initials: _initials,
|
|
50
43
|
},
|