@fluentui-react-native/experimental-avatar 0.14.25 → 0.14.28
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.json +52 -1
- package/CHANGELOG.md +27 -2
- package/jest.config.js +2 -0
- package/lib/JSAvatar.d.ts.map +1 -1
- package/lib/JSAvatar.js +3 -1
- package/lib/JSAvatar.js.map +1 -1
- package/lib/JSAvatar.styling.d.ts.map +1 -1
- package/lib/JSAvatar.styling.js +20 -13
- package/lib/JSAvatar.styling.js.map +1 -1
- package/lib/JSAvatar.types.d.ts +5 -6
- package/lib/JSAvatar.types.d.ts.map +1 -1
- package/lib/JSAvatarTokens.d.ts.map +1 -1
- package/lib/JSAvatarTokens.js +109 -105
- package/lib/JSAvatarTokens.js.map +1 -1
- package/lib/JSAvatarTokens.win32.d.ts +5 -0
- package/lib/JSAvatarTokens.win32.d.ts.map +1 -0
- package/lib/JSAvatarTokens.win32.js +210 -0
- package/lib/JSAvatarTokens.win32.js.map +1 -0
- package/lib/titles.d.ts +2 -0
- package/lib/titles.d.ts.map +1 -0
- package/lib/titles.js +109 -0
- package/lib/titles.js.map +1 -0
- package/lib/useAvatar.d.ts +25 -0
- package/lib/useAvatar.d.ts.map +1 -1
- package/lib/useAvatar.js +47 -2
- package/lib/useAvatar.js.map +1 -1
- package/lib/utils/getInitials.d.ts +15 -0
- package/lib/utils/getInitials.d.ts.map +1 -0
- package/lib/utils/getInitials.js +78 -0
- package/lib/utils/getInitials.js.map +1 -0
- package/lib/utils/getInitials.test.d.ts +2 -0
- package/lib/utils/getInitials.test.d.ts.map +1 -0
- package/lib/utils/getInitials.test.js +116 -0
- package/lib/utils/getInitials.test.js.map +1 -0
- package/lib/utils/index.d.ts +2 -0
- package/lib/utils/index.d.ts.map +1 -0
- package/lib/utils/index.js +2 -0
- package/lib/utils/index.js.map +1 -0
- package/lib-commonjs/JSAvatar.d.ts.map +1 -1
- package/lib-commonjs/JSAvatar.js +3 -1
- package/lib-commonjs/JSAvatar.js.map +1 -1
- package/lib-commonjs/JSAvatar.styling.d.ts.map +1 -1
- package/lib-commonjs/JSAvatar.styling.js +19 -12
- package/lib-commonjs/JSAvatar.styling.js.map +1 -1
- package/lib-commonjs/JSAvatar.types.d.ts +5 -6
- package/lib-commonjs/JSAvatar.types.d.ts.map +1 -1
- package/lib-commonjs/JSAvatarTokens.d.ts.map +1 -1
- package/lib-commonjs/JSAvatarTokens.js +109 -105
- package/lib-commonjs/JSAvatarTokens.js.map +1 -1
- package/lib-commonjs/JSAvatarTokens.win32.d.ts +5 -0
- package/lib-commonjs/JSAvatarTokens.win32.d.ts.map +1 -0
- package/lib-commonjs/JSAvatarTokens.win32.js +214 -0
- package/lib-commonjs/JSAvatarTokens.win32.js.map +1 -0
- package/lib-commonjs/titles.d.ts +2 -0
- package/lib-commonjs/titles.d.ts.map +1 -0
- package/lib-commonjs/titles.js +112 -0
- package/lib-commonjs/titles.js.map +1 -0
- package/lib-commonjs/useAvatar.d.ts +25 -0
- package/lib-commonjs/useAvatar.d.ts.map +1 -1
- package/lib-commonjs/useAvatar.js +51 -3
- package/lib-commonjs/useAvatar.js.map +1 -1
- package/lib-commonjs/utils/getInitials.d.ts +15 -0
- package/lib-commonjs/utils/getInitials.d.ts.map +1 -0
- package/lib-commonjs/utils/getInitials.js +82 -0
- package/lib-commonjs/utils/getInitials.js.map +1 -0
- package/lib-commonjs/utils/getInitials.test.d.ts +2 -0
- package/lib-commonjs/utils/getInitials.test.d.ts.map +1 -0
- package/lib-commonjs/utils/getInitials.test.js +118 -0
- package/lib-commonjs/utils/getInitials.test.js.map +1 -0
- package/lib-commonjs/utils/index.d.ts +2 -0
- package/lib-commonjs/utils/index.d.ts.map +1 -0
- package/lib-commonjs/utils/index.js +6 -0
- package/lib-commonjs/utils/index.js.map +1 -0
- package/package.json +5 -4
- package/src/.eslintrc.js +3 -0
- package/src/JSAvatar.styling.ts +25 -10
- package/src/JSAvatar.tsx +12 -1
- package/src/JSAvatar.types.ts +5 -6
- package/src/JSAvatarTokens.ts +110 -105
- package/src/JSAvatarTokens.win32.ts +213 -0
- package/src/__tests__/JSAvatar.test.jsx +156 -0
- package/src/__tests__/__snapshots__/JSAvatar.test.jsx.snap +92 -0
- package/src/titles.ts +108 -0
- package/src/useAvatar.ts +51 -1
- package/src/utils/getInitials.test.ts +154 -0
- package/src/utils/getInitials.ts +92 -0
- package/src/utils/index.ts +1 -0
- package/tsconfig.json +2 -1
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,58 @@
|
|
|
2
2
|
"name": "@fluentui-react-native/experimental-avatar",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Thu, 19 May 2022 20:09:08 GMT",
|
|
6
|
+
"tag": "@fluentui-react-native/experimental-avatar_v0.14.28",
|
|
7
|
+
"version": "0.14.28",
|
|
8
|
+
"comments": {
|
|
9
|
+
"patch": [
|
|
10
|
+
{
|
|
11
|
+
"author": "v.kozova13@gmail.com",
|
|
12
|
+
"package": "@fluentui-react-native/experimental-avatar",
|
|
13
|
+
"commit": "afc5faf340ee104daf976801ce76962637fe0a61",
|
|
14
|
+
"comment": "Added color generator depending on theme"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "beachball",
|
|
18
|
+
"package": "@fluentui-react-native/experimental-avatar",
|
|
19
|
+
"comment": "Bump @fluentui-react-native/badge to v0.0.34",
|
|
20
|
+
"commit": "afc5faf340ee104daf976801ce76962637fe0a61"
|
|
21
|
+
}
|
|
22
|
+
]
|
|
23
|
+
}
|
|
24
|
+
},
|
|
25
|
+
{
|
|
26
|
+
"date": "Tue, 17 May 2022 16:41:49 GMT",
|
|
27
|
+
"tag": "@fluentui-react-native/experimental-avatar_v0.14.27",
|
|
28
|
+
"version": "0.14.27",
|
|
29
|
+
"comments": {
|
|
30
|
+
"patch": [
|
|
31
|
+
{
|
|
32
|
+
"author": "v.kozova13@gmail.com",
|
|
33
|
+
"package": "@fluentui-react-native/experimental-avatar",
|
|
34
|
+
"commit": "eac718d8d0ba53e731489a66f412a2f19eccc8b5",
|
|
35
|
+
"comment": "Added getInitials method and tests for that"
|
|
36
|
+
}
|
|
37
|
+
]
|
|
38
|
+
}
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
"date": "Tue, 10 May 2022 18:33:23 GMT",
|
|
42
|
+
"tag": "@fluentui-react-native/experimental-avatar_v0.14.26",
|
|
43
|
+
"version": "0.14.26",
|
|
44
|
+
"comments": {
|
|
45
|
+
"patch": [
|
|
46
|
+
{
|
|
47
|
+
"author": "v.kozova13@gmail.com",
|
|
48
|
+
"package": "@fluentui-react-native/experimental-avatar",
|
|
49
|
+
"commit": "4e9f60254753ef5f7d297b197b10f35e638308cf",
|
|
50
|
+
"comment": "Added font and color tokens"
|
|
51
|
+
}
|
|
52
|
+
]
|
|
53
|
+
}
|
|
54
|
+
},
|
|
55
|
+
{
|
|
56
|
+
"date": "Tue, 10 May 2022 17:20:22 GMT",
|
|
6
57
|
"tag": "@fluentui-react-native/experimental-avatar_v0.14.25",
|
|
7
58
|
"version": "0.14.25",
|
|
8
59
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,37 @@
|
|
|
1
1
|
# Change Log - @fluentui-react-native/experimental-avatar
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Thu, 19 May 2022 20:09:08 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## 0.14.28
|
|
8
|
+
|
|
9
|
+
Thu, 19 May 2022 20:09:08 GMT
|
|
10
|
+
|
|
11
|
+
### Patches
|
|
12
|
+
|
|
13
|
+
- Added color generator depending on theme (v.kozova13@gmail.com)
|
|
14
|
+
- Bump @fluentui-react-native/badge to v0.0.34
|
|
15
|
+
|
|
16
|
+
## 0.14.27
|
|
17
|
+
|
|
18
|
+
Tue, 17 May 2022 16:41:49 GMT
|
|
19
|
+
|
|
20
|
+
### Patches
|
|
21
|
+
|
|
22
|
+
- Added getInitials method and tests for that (v.kozova13@gmail.com)
|
|
23
|
+
|
|
24
|
+
## 0.14.26
|
|
25
|
+
|
|
26
|
+
Tue, 10 May 2022 18:33:23 GMT
|
|
27
|
+
|
|
28
|
+
### Patches
|
|
29
|
+
|
|
30
|
+
- Added font and color tokens (v.kozova13@gmail.com)
|
|
31
|
+
|
|
7
32
|
## 0.14.25
|
|
8
33
|
|
|
9
|
-
Tue, 10 May 2022 17:20:
|
|
34
|
+
Tue, 10 May 2022 17:20:22 GMT
|
|
10
35
|
|
|
11
36
|
### Patches
|
|
12
37
|
|
package/jest.config.js
ADDED
package/lib/JSAvatar.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"JSAvatar.d.ts","sourceRoot":"","sources":["../src/JSAvatar.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAA8B,aAAa,EAAE,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"JSAvatar.d.ts","sourceRoot":"","sources":["../src/JSAvatar.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAA8B,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAS5F;;;;;;;GAOG;AACH,eAAO,MAAM,YAAY,UAAW,MAAM,SAAS,aAAa,aAAa,aAAa,KAAG,OAa5F,CAAC;AAEF,eAAO,MAAM,QAAQ,8KA+CnB,CAAC"}
|
package/lib/JSAvatar.js
CHANGED
|
@@ -29,6 +29,7 @@ import { useAvatar } from './useAvatar';
|
|
|
29
29
|
import { PresenceBadge } from '@fluentui-react-native/badge';
|
|
30
30
|
import { Icon } from '@fluentui-react-native/icon';
|
|
31
31
|
import { createIconProps } from '@fluentui-react-native/interactive-hooks';
|
|
32
|
+
import { SvgXml } from 'react-native-svg';
|
|
32
33
|
/**
|
|
33
34
|
* A function which determines if a set of styles should be applied to the compoent given the current state and props of the avatar.
|
|
34
35
|
*
|
|
@@ -65,8 +66,9 @@ export var JSAvatar = compose(__assign(__assign({ displayName: JSAvatarName }, s
|
|
|
65
66
|
var _a = mergeProps(avatar.props, final), activeAppearance = _a.activeAppearance, icon = _a.icon, initials = _a.initials, image = _a.image, badge = _a.badge, mergedProps = __rest(_a, ["activeAppearance", "icon", "initials", "image", "badge"]);
|
|
66
67
|
var _b = avatar.state, showRing = _b.showRing, transparentRing = _b.transparentRing, showBadge = _b.showBadge;
|
|
67
68
|
var svgIconsEnabled = ['ios', 'macos', 'win32', 'android'].includes(Platform.OS);
|
|
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 ";
|
|
68
70
|
return (withSlots(Slots.root, __assign({}, mergedProps),
|
|
69
|
-
image.source ? (withSlots(Slots.image, __assign({}, image))) : (withSlots(Slots.initialsBackground, null, initials ? withSlots(Slots.initials, null, initials) : userProps.icon
|
|
71
|
+
image.source ? (withSlots(Slots.image, __assign({}, image))) : (withSlots(Slots.initialsBackground, null, initials ? (withSlots(Slots.initials, null, initials)) : userProps.icon ? (withSlots(Slots.icon, __assign({}, iconProps))) : (withSlots(SvgXml, { xml: fallBackIconXml })))),
|
|
70
72
|
showRing && !transparentRing && withSlots(Slots.ring, null),
|
|
71
73
|
svgIconsEnabled && showBadge && withSlots(Slots.badge, __assign({}, badge))));
|
|
72
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;
|
|
1
|
+
{"version":3,"file":"JSAvatar.js","sourceRoot":"","sources":["../src/JSAvatar.tsx"],"names":[],"mappings":"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"}
|
|
@@ -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,EAAsC,MAAM,kBAAkB,CAAC;AACpI,OAAO,EAAS,iBAAiB,EAAc,MAAM,kCAAkC,CAAC;AAYxF,eAAO,MAAM,YAAY,EAAE,CAAC,MAAM,cAAc,CAAC,
|
|
1
|
+
{"version":3,"file":"JSAvatar.styling.d.ts","sourceRoot":"","sources":["../src/JSAvatar.styling.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgB,cAAc,EAAE,eAAe,EAAE,aAAa,EAAsC,MAAM,kBAAkB,CAAC;AACpI,OAAO,EAAS,iBAAiB,EAAc,MAAM,kCAAkC,CAAC;AAYxF,eAAO,MAAM,YAAY,EAAE,CAAC,MAAM,cAAc,CAAC,EAShD,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,iBAAiB,CAAC,aAAa,EAAE,eAAe,EAAE,cAAc,CA+G7F,CAAC"}
|
package/lib/JSAvatar.styling.js
CHANGED
|
@@ -22,13 +22,20 @@ import { JSAvatarName, AvatarColors, AvatarSizesForTokens } from './JSAvatar.typ
|
|
|
22
22
|
import { buildProps } from '@fluentui-react-native/framework';
|
|
23
23
|
import { defaultJSAvatarTokens } from './JSAvatarTokens';
|
|
24
24
|
import { getRingConfig } from './JSAvatar.helpers';
|
|
25
|
-
import { borderStyles } from '@fluentui-react-native/tokens';
|
|
25
|
+
import { borderStyles, fontStyles } from '@fluentui-react-native/tokens';
|
|
26
26
|
var nameMap = {
|
|
27
27
|
start: 'flex-start',
|
|
28
28
|
center: 'center',
|
|
29
29
|
end: 'flex-end',
|
|
30
30
|
};
|
|
31
|
-
export var avatarStates = __spreadArray(__spreadArray(__spreadArray([], AvatarColors, true), AvatarSizesForTokens, true), [
|
|
31
|
+
export var avatarStates = __spreadArray(__spreadArray(__spreadArray([], AvatarColors, true), AvatarSizesForTokens, true), [
|
|
32
|
+
'circular',
|
|
33
|
+
'square',
|
|
34
|
+
'inactive',
|
|
35
|
+
'ringColor',
|
|
36
|
+
'ringBackgroundColor',
|
|
37
|
+
'iconColor',
|
|
38
|
+
], false);
|
|
32
39
|
export var stylingSettings = {
|
|
33
40
|
tokens: [defaultJSAvatarTokens, JSAvatarName],
|
|
34
41
|
states: avatarStates,
|
|
@@ -48,42 +55,42 @@ export var stylingSettings = {
|
|
|
48
55
|
},
|
|
49
56
|
};
|
|
50
57
|
}, ['horizontalIconAlignment', 'verticalIconAlignment', 'avatarOpacity', 'height', 'width']),
|
|
51
|
-
initials: buildProps(function (tokens) {
|
|
58
|
+
initials: buildProps(function (tokens, theme) {
|
|
52
59
|
return {
|
|
53
|
-
style: {
|
|
54
|
-
fontSize: tokens.initialsSize,
|
|
55
|
-
color: tokens.color,
|
|
56
|
-
},
|
|
60
|
+
style: __assign(__assign({}, fontStyles.from(tokens, theme)), { color: tokens.color, textAlign: 'center' }),
|
|
57
61
|
};
|
|
58
|
-
}, ['
|
|
62
|
+
}, __spreadArray(['color'], fontStyles.keys, true)),
|
|
59
63
|
initialsBackground: buildProps(function (tokens, theme) {
|
|
60
64
|
var backgroundColor = tokens.backgroundColor;
|
|
61
65
|
return {
|
|
62
|
-
style: __assign(__assign({}, borderStyles.from(tokens, theme)), { width: tokens.width, height: tokens.height, flexGrow: 1, alignSelf: 'stretch', justifyContent: 'center', alignItems: 'center', backgroundColor: backgroundColor }),
|
|
66
|
+
style: __assign(__assign({}, borderStyles.from(tokens, theme)), { width: tokens.width, height: tokens.height, flexGrow: 1, alignSelf: 'stretch', justifyContent: 'center', alignItems: 'center', backgroundColor: backgroundColor, borderWidth: tokens.borderWidth, borderColor: tokens.borderColor }),
|
|
63
67
|
};
|
|
64
|
-
}, __spreadArray(['backgroundColor', 'width', 'height'], borderStyles.keys, true)),
|
|
68
|
+
}, __spreadArray(['backgroundColor', 'width', 'height', 'borderColor', 'borderWidth'], borderStyles.keys, true)),
|
|
65
69
|
image: buildProps(function (tokens) {
|
|
66
70
|
return {
|
|
67
71
|
style: {
|
|
68
72
|
borderRadius: tokens.borderRadius,
|
|
69
73
|
width: tokens.width,
|
|
70
74
|
height: tokens.height,
|
|
75
|
+
borderWidth: tokens.borderWidth,
|
|
76
|
+
borderColor: tokens.borderColor,
|
|
71
77
|
},
|
|
72
78
|
};
|
|
73
|
-
}, ['borderRadius', 'width', 'height']),
|
|
79
|
+
}, ['borderRadius', 'width', 'height', 'borderColor', 'borderWidth']),
|
|
74
80
|
icon: buildProps(function (tokens) {
|
|
75
81
|
return {
|
|
76
82
|
style: {
|
|
77
83
|
position: 'absolute',
|
|
84
|
+
color: tokens.iconColor,
|
|
78
85
|
width: tokens.iconSize,
|
|
79
86
|
height: tokens.iconSize,
|
|
80
87
|
},
|
|
81
88
|
};
|
|
82
|
-
}, ['iconSize']),
|
|
89
|
+
}, ['iconSize', 'iconColor']),
|
|
83
90
|
ring: buildProps(function (tokens, theme) {
|
|
84
91
|
var ringConfig = getRingConfig(tokens.width);
|
|
85
92
|
return {
|
|
86
|
-
style: __assign({ borderStyle: 'solid',
|
|
93
|
+
style: __assign(__assign({ borderStyle: 'solid', width: ringConfig.size, height: ringConfig.size, position: 'absolute', top: -ringConfig.stroke * 2, left: -ringConfig.stroke * 2 }, borderStyles.from(tokens, theme)), { borderWidth: ringConfig.stroke, borderColor: tokens.ringColor }),
|
|
87
94
|
};
|
|
88
95
|
}, __spreadArray(['width', 'height', 'ringColor'], borderStyles.keys, true)),
|
|
89
96
|
badge: buildProps(function (tokens) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"JSAvatar.styling.js","sourceRoot":"","sources":["../src/JSAvatar.styling.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA,OAAO,EAAE,YAAY,EAAkD,YAAY,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AACpI,OAAO,EAA4B,UAAU,EAAE,MAAM,kCAAkC,CAAC;AACxF,OAAO,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AAEzD,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;
|
|
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,6 +1,6 @@
|
|
|
1
1
|
import type { IViewProps } from '@fluentui-react-native/adapters';
|
|
2
2
|
import { ImageProps, ViewProps, TextProps, ColorValue } from 'react-native';
|
|
3
|
-
import { IBackgroundColorTokens, IForegroundColorTokens, IBorderTokens } from '@fluentui-react-native/tokens';
|
|
3
|
+
import { IBackgroundColorTokens, IForegroundColorTokens, IBorderTokens, FontTokens } from '@fluentui-react-native/tokens';
|
|
4
4
|
import { BadgeProps, PresenceBadgeProps, BadgeSize } from '@fluentui-react-native/badge';
|
|
5
5
|
import { IconProps, IconSourcesType } from '@fluentui-react-native/icon';
|
|
6
6
|
export declare const JSAvatarName = "Avatar";
|
|
@@ -20,8 +20,6 @@ export declare type IconAlignment = 'start' | 'center' | 'end';
|
|
|
20
20
|
export interface RingConfig {
|
|
21
21
|
accent?: boolean;
|
|
22
22
|
transparent?: boolean;
|
|
23
|
-
ringColor?: ColorValue;
|
|
24
|
-
ringBackgroundColor?: ColorValue;
|
|
25
23
|
ringThickness?: number;
|
|
26
24
|
innerGap?: number;
|
|
27
25
|
}
|
|
@@ -99,17 +97,18 @@ export interface JSAvatarProps extends IViewProps, AvatarConfigurableProps {
|
|
|
99
97
|
shape?: AvatarShape;
|
|
100
98
|
src?: string;
|
|
101
99
|
}
|
|
102
|
-
export interface JSAvatarTokens extends IBackgroundColorTokens, IForegroundColorTokens, AvatarConfigurableProps, IBorderTokens {
|
|
100
|
+
export interface JSAvatarTokens extends IBackgroundColorTokens, IForegroundColorTokens, AvatarConfigurableProps, IBorderTokens, FontTokens {
|
|
101
|
+
iconColor?: ColorValue;
|
|
103
102
|
iconSize?: number;
|
|
104
|
-
initialsSize?: number;
|
|
105
103
|
height?: number;
|
|
106
104
|
horizontalIconAlignment?: IconAlignment;
|
|
107
105
|
verticalIconAlignment?: IconAlignment;
|
|
108
106
|
circular?: JSAvatarTokens;
|
|
107
|
+
ringColor?: ColorValue;
|
|
108
|
+
ringBackgroundColor?: ColorValue;
|
|
109
109
|
square?: JSAvatarTokens;
|
|
110
110
|
inactive?: JSAvatarTokens;
|
|
111
111
|
avatarOpacity?: number;
|
|
112
|
-
ringColor?: ColorValue;
|
|
113
112
|
size20?: JSAvatarTokens;
|
|
114
113
|
size24?: JSAvatarTokens;
|
|
115
114
|
size28?: JSAvatarTokens;
|
|
@@ -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,MAAM,+BAA+B,CAAC;
|
|
1
|
+
{"version":3,"file":"JSAvatar.types.d.ts","sourceRoot":"","sources":["../src/JSAvatar.types.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +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,
|
|
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,CA6KjD,CAAC"}
|
package/lib/JSAvatarTokens.js
CHANGED
|
@@ -6,8 +6,16 @@ export var defaultJSAvatarTokens = function (t) {
|
|
|
6
6
|
color: globalTokens.color.white,
|
|
7
7
|
backgroundColor: globalTokens.color.cornflower.primary,
|
|
8
8
|
avatarOpacity: 1,
|
|
9
|
+
fontFamily: t.typography.families.primary,
|
|
10
|
+
fontWeight: globalTokens.font.weight.semibold,
|
|
11
|
+
fontSize: globalTokens.font.size[200],
|
|
9
12
|
width: 24,
|
|
10
13
|
height: 24,
|
|
14
|
+
iconSize: 16,
|
|
15
|
+
iconColor: globalTokens.color.white,
|
|
16
|
+
ringColor: t.colors.transparentStroke,
|
|
17
|
+
borderColor: globalTokens.color.white,
|
|
18
|
+
borderWidth: t.host.appearance === 'highContrast' ? 1 : 0,
|
|
11
19
|
circular: {
|
|
12
20
|
borderRadius: globalTokens.corner.radius.circle,
|
|
13
21
|
},
|
|
@@ -22,185 +30,181 @@ export var defaultJSAvatarTokens = function (t) {
|
|
|
22
30
|
height: 20,
|
|
23
31
|
badgeSize: 'smallest',
|
|
24
32
|
iconSize: 16,
|
|
25
|
-
|
|
33
|
+
fontSize: globalTokens.font.size[100],
|
|
34
|
+
square: {
|
|
35
|
+
borderRadius: globalTokens.corner.radius.small,
|
|
36
|
+
},
|
|
26
37
|
},
|
|
27
38
|
size24: {
|
|
28
39
|
width: 24,
|
|
29
40
|
height: 24,
|
|
30
41
|
badgeSize: 'smallest',
|
|
31
42
|
iconSize: 16,
|
|
32
|
-
|
|
43
|
+
fontSize: globalTokens.font.size[100],
|
|
44
|
+
square: {
|
|
45
|
+
borderRadius: globalTokens.corner.radius.small,
|
|
46
|
+
},
|
|
33
47
|
},
|
|
34
48
|
size28: {
|
|
35
49
|
width: 28,
|
|
36
50
|
height: 28,
|
|
37
51
|
badgeSize: 'smaller',
|
|
38
52
|
iconSize: 20,
|
|
39
|
-
|
|
53
|
+
fontWeight: globalTokens.font.weight.semibold,
|
|
54
|
+
fontSize: globalTokens.font.size[100],
|
|
40
55
|
},
|
|
41
56
|
size32: {
|
|
42
57
|
width: 32,
|
|
43
58
|
height: 32,
|
|
44
59
|
badgeSize: 'smaller',
|
|
45
60
|
iconSize: 20,
|
|
46
|
-
|
|
61
|
+
fontSize: globalTokens.font.size[100],
|
|
47
62
|
},
|
|
48
63
|
size36: {
|
|
49
64
|
width: 36,
|
|
50
65
|
height: 36,
|
|
51
66
|
badgeSize: 'smaller',
|
|
52
67
|
iconSize: 20,
|
|
53
|
-
initialsSize: 20,
|
|
54
68
|
},
|
|
55
69
|
size40: {
|
|
56
70
|
width: 40,
|
|
57
71
|
height: 40,
|
|
58
72
|
badgeSize: 'small',
|
|
59
73
|
iconSize: 20,
|
|
60
|
-
initialsSize: 20,
|
|
61
74
|
},
|
|
62
75
|
size48: {
|
|
63
76
|
width: 48,
|
|
64
77
|
height: 48,
|
|
65
78
|
badgeSize: 'small',
|
|
66
79
|
iconSize: 24,
|
|
67
|
-
initialsSize: 24,
|
|
68
80
|
},
|
|
69
81
|
size56: {
|
|
70
82
|
width: 56,
|
|
71
83
|
height: 56,
|
|
72
84
|
badgeSize: 'medium',
|
|
73
85
|
iconSize: 28,
|
|
74
|
-
|
|
86
|
+
fontSize: globalTokens.font.size[400],
|
|
87
|
+
square: {
|
|
88
|
+
borderRadius: globalTokens.corner.radius.large,
|
|
89
|
+
},
|
|
75
90
|
},
|
|
76
91
|
size64: {
|
|
77
92
|
width: 64,
|
|
78
93
|
height: 64,
|
|
79
94
|
badgeSize: 'large',
|
|
80
95
|
iconSize: 32,
|
|
81
|
-
|
|
96
|
+
fontSize: globalTokens.font.size[500],
|
|
97
|
+
square: {
|
|
98
|
+
borderRadius: globalTokens.corner.radius.large,
|
|
99
|
+
},
|
|
82
100
|
},
|
|
83
101
|
size72: {
|
|
84
102
|
width: 72,
|
|
85
103
|
height: 72,
|
|
86
104
|
badgeSize: 'large',
|
|
87
105
|
iconSize: 32,
|
|
88
|
-
|
|
106
|
+
fontSize: globalTokens.font.size[500],
|
|
107
|
+
square: {
|
|
108
|
+
borderRadius: globalTokens.corner.radius.large,
|
|
109
|
+
},
|
|
89
110
|
},
|
|
90
111
|
size96: {
|
|
91
112
|
width: 96,
|
|
92
113
|
height: 96,
|
|
93
114
|
badgeSize: 'largest',
|
|
94
115
|
iconSize: 48,
|
|
95
|
-
|
|
116
|
+
fontWeight: globalTokens.font.weight.regular,
|
|
117
|
+
fontSize: globalTokens.font.size[700],
|
|
118
|
+
square: {
|
|
119
|
+
borderRadius: globalTokens.corner.radius.extraLarge,
|
|
120
|
+
},
|
|
96
121
|
},
|
|
97
122
|
size120: {
|
|
98
123
|
width: 120,
|
|
99
124
|
height: 120,
|
|
100
125
|
badgeSize: 'largest',
|
|
101
126
|
iconSize: 48,
|
|
102
|
-
|
|
127
|
+
fontWeight: globalTokens.font.weight.regular,
|
|
128
|
+
fontSize: globalTokens.font.size[900],
|
|
129
|
+
square: {
|
|
130
|
+
borderRadius: globalTokens.corner.radius.extraLarge,
|
|
131
|
+
},
|
|
103
132
|
},
|
|
104
133
|
neutral: {
|
|
105
134
|
backgroundColor: t.colors.neutralBackground6,
|
|
106
135
|
color: t.colors.neutralForeground3,
|
|
107
|
-
|
|
136
|
+
iconColor: t.colors.neutralForeground3,
|
|
137
|
+
ringColor: t.colors.transparentStroke,
|
|
108
138
|
},
|
|
109
139
|
brand: {
|
|
110
140
|
backgroundColor: t.colors.brandBackgroundStatic,
|
|
111
141
|
color: t.colors.neutralForegroundOnBrand,
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
backgroundColor: globalTokens.color.seafoam.primary,
|
|
146
|
-
},
|
|
147
|
-
darkGreen: {
|
|
148
|
-
backgroundColor: globalTokens.color.darkGreen.primary,
|
|
149
|
-
},
|
|
150
|
-
lightTeal: {
|
|
151
|
-
backgroundColor: globalTokens.color.lightTeal.primary,
|
|
152
|
-
},
|
|
153
|
-
teal: {
|
|
154
|
-
backgroundColor: globalTokens.color.teal.primary,
|
|
155
|
-
},
|
|
156
|
-
steel: {
|
|
157
|
-
backgroundColor: globalTokens.color.steel.primary,
|
|
158
|
-
},
|
|
159
|
-
blue: {
|
|
160
|
-
backgroundColor: globalTokens.color.blue.primary,
|
|
161
|
-
},
|
|
162
|
-
royalBlue: {
|
|
163
|
-
backgroundColor: globalTokens.color.royalBlue.primary,
|
|
164
|
-
},
|
|
165
|
-
cornflower: {
|
|
166
|
-
backgroundColor: globalTokens.color.cornflower.primary,
|
|
167
|
-
},
|
|
168
|
-
navy: {
|
|
169
|
-
backgroundColor: globalTokens.color.navy.primary,
|
|
170
|
-
},
|
|
171
|
-
lavender: {
|
|
172
|
-
backgroundColor: globalTokens.color.lavender.primary,
|
|
173
|
-
},
|
|
174
|
-
purple: {
|
|
175
|
-
backgroundColor: globalTokens.color.purple.primary,
|
|
176
|
-
},
|
|
177
|
-
grape: {
|
|
178
|
-
backgroundColor: globalTokens.color.grape.primary,
|
|
179
|
-
},
|
|
180
|
-
lilac: {
|
|
181
|
-
backgroundColor: globalTokens.color.lilac.primary,
|
|
182
|
-
},
|
|
183
|
-
pink: {
|
|
184
|
-
backgroundColor: globalTokens.color.pink.primary,
|
|
185
|
-
},
|
|
186
|
-
magenta: {
|
|
187
|
-
backgroundColor: globalTokens.color.magenta.primary,
|
|
188
|
-
},
|
|
189
|
-
plum: {
|
|
190
|
-
backgroundColor: globalTokens.color.plum.primary,
|
|
191
|
-
},
|
|
192
|
-
beige: {
|
|
193
|
-
backgroundColor: globalTokens.color.beige.primary,
|
|
194
|
-
},
|
|
195
|
-
mink: {
|
|
196
|
-
backgroundColor: globalTokens.color.mink.primary,
|
|
197
|
-
},
|
|
198
|
-
platinum: {
|
|
199
|
-
backgroundColor: globalTokens.color.platinum.primary,
|
|
200
|
-
},
|
|
201
|
-
anchor: {
|
|
202
|
-
backgroundColor: globalTokens.color.anchor.primary,
|
|
203
|
-
},
|
|
142
|
+
iconColor: t.colors.neutralForegroundOnBrand,
|
|
143
|
+
ringColor: t.colors.transparentStroke,
|
|
144
|
+
},
|
|
145
|
+
darkRed: getColorProps('darkRed', t),
|
|
146
|
+
cranberry: getColorProps('cranberry', t),
|
|
147
|
+
red: getColorProps('red', t),
|
|
148
|
+
pumpkin: getColorProps('pumpkin', t),
|
|
149
|
+
peach: getColorProps('peach', t),
|
|
150
|
+
marigold: getColorProps('marigold', t),
|
|
151
|
+
gold: getColorProps('gold', t),
|
|
152
|
+
brass: getColorProps('brass', t),
|
|
153
|
+
brown: getColorProps('brown', t),
|
|
154
|
+
forest: getColorProps('forest', t),
|
|
155
|
+
seafoam: getColorProps('seafoam', t),
|
|
156
|
+
darkGreen: getColorProps('darkGreen', t),
|
|
157
|
+
lightTeal: getColorProps('lightTeal', t),
|
|
158
|
+
teal: getColorProps('teal', t),
|
|
159
|
+
steel: getColorProps('steel', t),
|
|
160
|
+
blue: getColorProps('blue', t),
|
|
161
|
+
royalBlue: getColorProps('royalBlue', t),
|
|
162
|
+
cornflower: getColorProps('cornflower', t),
|
|
163
|
+
navy: getColorProps('navy', t),
|
|
164
|
+
lavender: getColorProps('lavender', t),
|
|
165
|
+
purple: getColorProps('purple', t),
|
|
166
|
+
grape: getColorProps('grape', t),
|
|
167
|
+
lilac: getColorProps('lilac', t),
|
|
168
|
+
pink: getColorProps('pink', t),
|
|
169
|
+
magenta: getColorProps('magenta', t),
|
|
170
|
+
plum: getColorProps('plum', t),
|
|
171
|
+
beige: getColorProps('beige', t),
|
|
172
|
+
mink: getColorProps('mink', t),
|
|
173
|
+
platinum: getColorProps('platinum', t),
|
|
174
|
+
anchor: getColorProps('anchor', t),
|
|
204
175
|
});
|
|
205
176
|
};
|
|
177
|
+
/**
|
|
178
|
+
* A function which returns object of props depending on color and theme.
|
|
179
|
+
* @param color
|
|
180
|
+
* @param theme
|
|
181
|
+
* @returns object of props - backgroundColor, color and ringColor
|
|
182
|
+
*/
|
|
183
|
+
function getColorProps(color, theme) {
|
|
184
|
+
var themeAppearance = theme.host.appearance;
|
|
185
|
+
switch (themeAppearance) {
|
|
186
|
+
case 'light':
|
|
187
|
+
default:
|
|
188
|
+
return {
|
|
189
|
+
backgroundColor: globalTokens.color[color].tint40,
|
|
190
|
+
color: globalTokens.color[color].shade30,
|
|
191
|
+
iconColor: globalTokens.color[color].shade30,
|
|
192
|
+
ringColor: globalTokens.color[color].primary,
|
|
193
|
+
};
|
|
194
|
+
case 'dark':
|
|
195
|
+
return {
|
|
196
|
+
backgroundColor: globalTokens.color[color].shade30,
|
|
197
|
+
color: globalTokens.color[color].tint40,
|
|
198
|
+
iconColor: globalTokens.color[color].tint40,
|
|
199
|
+
ringColor: globalTokens.color[color].tint30,
|
|
200
|
+
};
|
|
201
|
+
case 'highContrast':
|
|
202
|
+
return {
|
|
203
|
+
backgroundColor: theme.colors.neutralBackground6,
|
|
204
|
+
color: theme.colors.neutralForeground3,
|
|
205
|
+
iconColor: theme.colors.neutralForeground3,
|
|
206
|
+
ringColor: theme.colors.transparentStroke,
|
|
207
|
+
};
|
|
208
|
+
}
|
|
209
|
+
}
|
|
206
210
|
//# sourceMappingURL=JSAvatarTokens.js.map
|