@fluentui-react-native/persona-coin 0.16.0 → 0.16.1
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.md +17 -0
- package/lib/PersonaCoin.d.ts +2 -8
- package/lib/PersonaCoin.helpers.d.ts +6 -13
- package/lib/PersonaCoin.helpers.js +102 -106
- package/lib/PersonaCoin.js +70 -80
- package/lib/PersonaCoin.settings.d.ts +1 -1
- package/lib/PersonaCoin.settings.js +10 -10
- package/lib/PersonaCoin.tokens.icon.d.ts +2 -2
- package/lib/PersonaCoin.tokens.icon.js +17 -17
- package/lib/PersonaCoin.tokens.initials.d.ts +2 -6
- package/lib/PersonaCoin.tokens.initials.js +7 -7
- package/lib/PersonaCoin.tokens.initialsBackground.d.ts +2 -6
- package/lib/PersonaCoin.tokens.initialsBackground.js +22 -21
- package/lib/PersonaCoin.tokens.photo.d.ts +2 -2
- package/lib/PersonaCoin.tokens.photo.js +11 -11
- package/lib/PersonaCoin.tokens.ring.d.ts +3 -3
- package/lib/PersonaCoin.tokens.ring.js +43 -41
- package/lib/PersonaCoin.tokens.root.d.ts +2 -2
- package/lib/PersonaCoin.tokens.root.js +14 -14
- package/lib/PersonaCoin.types.d.ts +45 -85
- package/lib/PersonaCoin.types.js +1 -1
- package/lib/index.d.ts +2 -17
- package/lib/index.js +1 -1
- package/lib-commonjs/PersonaCoin.d.ts +2 -8
- package/lib-commonjs/PersonaCoin.helpers.d.ts +6 -13
- package/lib-commonjs/PersonaCoin.helpers.js +105 -109
- package/lib-commonjs/PersonaCoin.js +86 -97
- package/lib-commonjs/PersonaCoin.settings.d.ts +1 -1
- package/lib-commonjs/PersonaCoin.settings.js +14 -14
- package/lib-commonjs/PersonaCoin.tokens.icon.d.ts +2 -2
- package/lib-commonjs/PersonaCoin.tokens.icon.js +21 -21
- package/lib-commonjs/PersonaCoin.tokens.initials.d.ts +2 -6
- package/lib-commonjs/PersonaCoin.tokens.initials.js +11 -11
- package/lib-commonjs/PersonaCoin.tokens.initialsBackground.d.ts +2 -6
- package/lib-commonjs/PersonaCoin.tokens.initialsBackground.js +26 -25
- package/lib-commonjs/PersonaCoin.tokens.photo.d.ts +2 -2
- package/lib-commonjs/PersonaCoin.tokens.photo.js +15 -15
- package/lib-commonjs/PersonaCoin.tokens.ring.d.ts +3 -3
- package/lib-commonjs/PersonaCoin.tokens.ring.js +47 -51
- package/lib-commonjs/PersonaCoin.tokens.root.d.ts +2 -2
- package/lib-commonjs/PersonaCoin.tokens.root.js +18 -18
- package/lib-commonjs/PersonaCoin.types.d.ts +45 -85
- package/lib-commonjs/PersonaCoin.types.js +3 -3
- package/lib-commonjs/index.d.ts +2 -17
- package/lib-commonjs/index.js +9 -24
- package/package.json +21 -20
|
@@ -1,144 +1,140 @@
|
|
|
1
|
-
|
|
2
|
-
Object.defineProperty(exports,
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.getPresenceIconSource = getPresenceIconSource;
|
|
4
4
|
exports.getSizeConfig = getSizeConfig;
|
|
5
5
|
exports.convertCoinColor = convertCoinColor;
|
|
6
6
|
exports.convertCoinColorFluent = convertCoinColorFluent;
|
|
7
7
|
exports.calculateEffectiveSizes = calculateEffectiveSizes;
|
|
8
8
|
exports.getRingThickness = getRingThickness;
|
|
9
|
-
const theme_tokens_1 = require(
|
|
9
|
+
const theme_tokens_1 = require("@fluentui-react-native/theme-tokens");
|
|
10
10
|
const presenceIconCache = {
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
11
|
+
none: { uri: '' },
|
|
12
|
+
offline: {
|
|
13
|
+
uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAANlBMVEUAAACoxM+oxM+oxM+oxM+oxM+oxM+oxM+oxM////+oxM/W5OmzzNX5+/z3+vvu9Pbt8/Xj7PAAKKEtAAAACXRSTlMA6bWcZQpiXgXWfJCWAAAAeElEQVQoz52RSQ7EIAwEx0AWymT7/2dHYpgoPvQldeySsGl/XjOVZGCpTDFfjIEtj3jN0Pzc99Mb5PUWGbwOHPI/n+GqNxfMY67h9YFjvw0KrQYapYuER+GkLowjigPrArYoNpBCPiWHy3XlB1UlqkRZuziUPO1bvszLC8V87ko/AAAAAElFTkSuQmCC',
|
|
14
|
+
},
|
|
15
|
+
online: {
|
|
16
|
+
uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAAWlBMVEUAAABusAVusAVusAVusAVusAVusAVusAVusAVusAVusAVusAVusAVusAVusAVusAVusAVusAVusAX////N4bi61517tivn8d3e7NL3+vTE3Kux0o6nzH6GvEWFZ26xAAAAEnRSTlMA8eNrEQj6syHTeXrKshzZ19JHa6QpAAAApUlEQVQoz4WS6w7CIAyFBwwGbE5th87b+7+mCDXcIp4/NN9J2tJ2+KdRTFyx0yTGAkvLgMRmmbg2kMnoL185FOIr5Vmg0hKzWWhkQz+sNdinN1Eg9wyP8MYh5xvewjt5gxcct9iYN1SIXvsj46C8EWvfEZ0jTsYxRJcrYuLAqTg5xKm4AHL2xEH8/GBvJIM819xIWkc9dt1ZFEnO+WrbY1CcjqGnN0xiGcyuKFtcAAAAAElFTkSuQmCC',
|
|
17
|
+
},
|
|
18
|
+
away: {
|
|
19
|
+
uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAAP1BMVEUAAAD6yRT6yRT6yRT6yRT6yRT6yRT6yRT6yRT6yRT6yRT6yRT////6zCP95pH95Yv++OL84Hn822T72FT71EUen9LHAAAAC3RSTlMA6rVlCuWgmGJeBd4LCPMAAAB8SURBVCjPnZFLDoAgDERtQUUH/97/rCYNJUITTXjLeYu2064Z75gAYufLfOqR6KdXPI94Mc5ZDCgYNA8piHGBENJcqgV5EQ61gBPBVrAIsoJEwArUYi0EIbFlQ+VwHGpY11XOGDdZVw/MXPstB2olFeGnRFv796Psa1t5ANwFDZEW8B8sAAAAAElFTkSuQmCC',
|
|
20
|
+
},
|
|
21
|
+
dnd: {
|
|
22
|
+
uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAAQlBMVEUAAADpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABv////wfYT86errJjiR9OLxAAAAEXRSTlMA4/CzeQj602seEhEk89jKakfnNfsAAACKSURBVCjPhZFbDoQgDEWBQkHBR2d0/1udEppR0cbzeU9SSq95I69gcZphzZc4eEeC8+HIh0gn4vDPLV2wYsJCHUub5umGr/no7sKNLBI9kFjAkwAWbaX9K+xtMRZIle0jbFRBFpMmZmWU8ri+rv5B/SQmxD6PUknpz16MUJSi9GqZnMAiWkjZvPADxcoYalVfnOMAAAAASUVORK5CYII=',
|
|
23
|
+
},
|
|
24
|
+
blocked: {
|
|
25
|
+
uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAAe1BMVEUAAADpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABv////pABv83uHqCiTsJz7rGjP7zNHvRVj/+vv+8vP6x83sIzv2mqXsKD/7zNL5v8b3oqz2maTuP1P82Nz819vtKUDrGjLrGTK2dyGvAAAAEXRSTlMA8dSzeQj64mseEhHkJMpq5T3coEAAAADSSURBVCjPhdHZFoIgFAVQGQRLGzhQiaLNw/9/YZRk4IvncZ+17uJys7mUGyYFoWxTJpxzghDC878vKFBftLX6UgN0MXqF/qRCTg5VaPI1ro36Re+MWQ/TOPrEXw7840uCNvb9oQVZ+qJAnbpSNQpfMHQTVx2YLyT0xJWG9IWAnbiyEL4gaCKPCopb7P9RDOeJqzNYeG7i3+eGBVMPC2Yczpn9cfTmAT58IoV5Rn4FDSdZbY1rxzk9qpXHofkcqtO2uXfhUHOn9SkLJoWQrCizmbwBa5IbuX8ugpIAAAAASUVORK5CYII=',
|
|
26
|
+
},
|
|
27
|
+
busy: {
|
|
28
|
+
uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAANlBMVEUAAADpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvsgIdoAAAAEXRSTlMA8eLUEQj6s2sheXrlyrJqHBqb3nMAAAB/SURBVCjPhZFRDsQgCEQFEdS223L/yy7JummtGN/nvASUCSvoFGSIclIXpwragC3deYn6IJZ/fqF24NXmHPri+E2rOlCDQTAKIBNZHbKJjyfEBHoCTbAn2ATMRPRHzZfPn+t/cH4SIw3rY2p17H2+l0VRRtr8ag3KgswomcKCL1NmGBp9lqsZAAAAAElFTkSuQmCC',
|
|
29
|
+
},
|
|
30
30
|
};
|
|
31
31
|
// TODO: Need icons for the OOF statues
|
|
32
32
|
const presenceOOFIconCache = presenceIconCache;
|
|
33
33
|
function getPresenceIconSource(presence, isOutOfOffice) {
|
|
34
|
-
|
|
34
|
+
return isOutOfOffice ? presenceOOFIconCache[presence] : presenceIconCache[presence];
|
|
35
35
|
}
|
|
36
36
|
const sizeTable = {
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
37
|
+
size8: { physicalSize: 8, iconSize: 0, iconStrokeWidth: 0, initialsSize: 4 },
|
|
38
|
+
size24: { physicalSize: 24, iconSize: 8, iconStrokeWidth: 2, initialsSize: 10 },
|
|
39
|
+
size32: { physicalSize: 32, iconSize: 8, iconStrokeWidth: 2, initialsSize: 12 },
|
|
40
|
+
size40: { physicalSize: 40, iconSize: 12, iconStrokeWidth: 2, initialsSize: 14 },
|
|
41
|
+
size48: { physicalSize: 48, iconSize: 12, iconStrokeWidth: 2, initialsSize: 16 },
|
|
42
|
+
size56: { physicalSize: 56, iconSize: 16, iconStrokeWidth: 3, initialsSize: 18 },
|
|
43
|
+
size72: { physicalSize: 72, iconSize: 20, iconStrokeWidth: 3, initialsSize: 20 },
|
|
44
|
+
size100: { physicalSize: 100, iconSize: 28, iconStrokeWidth: 4, initialsSize: 36 },
|
|
45
|
+
size120: { physicalSize: 120, iconSize: 32, iconStrokeWidth: 4, initialsSize: 40 },
|
|
46
46
|
};
|
|
47
47
|
function getSizeConfig(size) {
|
|
48
|
-
|
|
48
|
+
return sizeTable[size];
|
|
49
49
|
}
|
|
50
50
|
const colorTable = {
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
51
|
+
lightBlue: theme_tokens_1.globalTokens.color.cornflower.primary,
|
|
52
|
+
blue: theme_tokens_1.globalTokens.color.blue.primary,
|
|
53
|
+
darkBlue: theme_tokens_1.globalTokens.color.royalBlue.primary,
|
|
54
|
+
teal: theme_tokens_1.globalTokens.color.teal.primary,
|
|
55
|
+
green: theme_tokens_1.globalTokens.color.forest.primary,
|
|
56
|
+
darkGreen: theme_tokens_1.globalTokens.color.darkGreen.primary,
|
|
57
|
+
lightPink: theme_tokens_1.globalTokens.color.berry.primary,
|
|
58
|
+
pink: theme_tokens_1.globalTokens.color.hotPink.primary,
|
|
59
|
+
magenta: theme_tokens_1.globalTokens.color.grape.primary,
|
|
60
|
+
purple: theme_tokens_1.globalTokens.color.purple.primary,
|
|
61
|
+
orange: theme_tokens_1.globalTokens.color.pumpkin.primary,
|
|
62
|
+
lightRed: theme_tokens_1.globalTokens.color.red.primary,
|
|
63
|
+
darkRed: theme_tokens_1.globalTokens.color.burgundy.primary,
|
|
64
|
+
violet: theme_tokens_1.globalTokens.color.orchid.primary,
|
|
65
|
+
gold: theme_tokens_1.globalTokens.color.brass.primary,
|
|
66
|
+
burgundy: theme_tokens_1.globalTokens.color.darkRed.primary,
|
|
67
|
+
warmGray: theme_tokens_1.globalTokens.color.beige.primary,
|
|
68
|
+
cyan: theme_tokens_1.globalTokens.color.steel.primary,
|
|
69
|
+
rust: theme_tokens_1.globalTokens.color.brown.primary,
|
|
70
|
+
coolGray: theme_tokens_1.globalTokens.color.platinum.primary,
|
|
71
71
|
};
|
|
72
72
|
/**
|
|
73
73
|
* Converts the PersonaCoinColor into a hex color value
|
|
74
74
|
* @deprecated Use convertCoinColorFluent instead.
|
|
75
75
|
*/
|
|
76
76
|
function convertCoinColor(coinColor) {
|
|
77
|
-
|
|
77
|
+
return colorTable[coinColor];
|
|
78
78
|
}
|
|
79
79
|
const colorTableFluent = {
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
80
|
+
cornflower: theme_tokens_1.globalTokens.color.cornflower.primary,
|
|
81
|
+
blue: theme_tokens_1.globalTokens.color.blue.primary,
|
|
82
|
+
royalBlue: theme_tokens_1.globalTokens.color.royalBlue.primary,
|
|
83
|
+
teal: theme_tokens_1.globalTokens.color.teal.primary,
|
|
84
|
+
forest: theme_tokens_1.globalTokens.color.forest.primary,
|
|
85
|
+
darkGreen: theme_tokens_1.globalTokens.color.darkGreen.primary,
|
|
86
|
+
berry: theme_tokens_1.globalTokens.color.berry.primary,
|
|
87
|
+
hotPink: theme_tokens_1.globalTokens.color.hotPink.primary,
|
|
88
|
+
grape: theme_tokens_1.globalTokens.color.grape.primary,
|
|
89
|
+
purple: theme_tokens_1.globalTokens.color.purple.primary,
|
|
90
|
+
pumpkin: theme_tokens_1.globalTokens.color.pumpkin.primary,
|
|
91
|
+
red: theme_tokens_1.globalTokens.color.red.primary,
|
|
92
|
+
burgundy: theme_tokens_1.globalTokens.color.burgundy.primary,
|
|
93
|
+
orchid: theme_tokens_1.globalTokens.color.orchid.primary,
|
|
94
|
+
brass: theme_tokens_1.globalTokens.color.brass.primary,
|
|
95
|
+
darkRed: theme_tokens_1.globalTokens.color.darkRed.primary,
|
|
96
|
+
beige: theme_tokens_1.globalTokens.color.beige.primary,
|
|
97
|
+
platinum: theme_tokens_1.globalTokens.color.platinum.primary,
|
|
98
|
+
steel: theme_tokens_1.globalTokens.color.steel.primary,
|
|
99
|
+
brown: theme_tokens_1.globalTokens.color.brown.primary,
|
|
100
100
|
};
|
|
101
101
|
/**
|
|
102
102
|
* Converts the PersonaCoinFluentColor into a hex color value
|
|
103
103
|
*/
|
|
104
104
|
function convertCoinColorFluent(coinColor) {
|
|
105
|
-
|
|
105
|
+
return colorTableFluent[coinColor];
|
|
106
106
|
}
|
|
107
107
|
function calculateEffectiveSizes(tokens) {
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
iconStrokeWidth: iconStrokeWidth || defaultIconStrokeWidth,
|
|
122
|
-
initialsSize: initialsSize || defaultInitialsSize,
|
|
123
|
-
};
|
|
124
|
-
}
|
|
108
|
+
const { size, coinSize, iconSize, iconStrokeWidth, initialsSize } = tokens;
|
|
109
|
+
if (size) {
|
|
110
|
+
return sizeTable[size];
|
|
111
|
+
}
|
|
112
|
+
else {
|
|
113
|
+
const { physicalSize: defaultPhysicalSize, iconSize: defaultIconSize, iconStrokeWidth: defaultIconStrokeWidth, initialsSize: defaultInitialsSize, } = sizeTable['size40'];
|
|
114
|
+
return {
|
|
115
|
+
physicalSize: coinSize || defaultPhysicalSize,
|
|
116
|
+
iconSize: iconSize || defaultIconSize,
|
|
117
|
+
iconStrokeWidth: iconStrokeWidth || defaultIconStrokeWidth,
|
|
118
|
+
initialsSize: initialsSize || defaultInitialsSize,
|
|
119
|
+
};
|
|
120
|
+
}
|
|
125
121
|
}
|
|
126
122
|
function getRingThickness(thickness) {
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
123
|
+
switch (thickness) {
|
|
124
|
+
case 'xSmall':
|
|
125
|
+
return 1;
|
|
126
|
+
case 'small':
|
|
127
|
+
return 1;
|
|
128
|
+
case 'medium':
|
|
129
|
+
return 2;
|
|
130
|
+
case 'large':
|
|
131
|
+
return 2;
|
|
132
|
+
case 'xlarge':
|
|
133
|
+
return 2;
|
|
134
|
+
case 'xxlarge':
|
|
135
|
+
return 4;
|
|
136
|
+
default:
|
|
137
|
+
return thickness < 0 ? 4 : thickness;
|
|
138
|
+
}
|
|
143
139
|
}
|
|
144
|
-
//# sourceMappingURL=PersonaCoin.helpers.js.map
|
|
140
|
+
//# sourceMappingURL=PersonaCoin.helpers.js.map
|
|
@@ -1,108 +1,97 @@
|
|
|
1
|
-
|
|
2
|
-
Object.defineProperty(exports,
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.PersonaCoin = void 0;
|
|
4
|
-
const jsx_runtime_1 = require(
|
|
4
|
+
const jsx_runtime_1 = require("@fluentui-react-native/framework-base/jsx-runtime");
|
|
5
5
|
/** @jsxImportSource @fluentui-react-native/framework-base */
|
|
6
|
-
const react_native_1 = require(
|
|
7
|
-
const adapters_1 = require(
|
|
8
|
-
const tokens_1 = require(
|
|
9
|
-
const foundation_compose_1 = require(
|
|
10
|
-
const foundation_settings_1 = require(
|
|
11
|
-
const PersonaCoin_helpers_1 = require(
|
|
12
|
-
const PersonaCoin_settings_1 = require(
|
|
13
|
-
const PersonaCoin_tokens_icon_1 = require(
|
|
14
|
-
const PersonaCoin_tokens_initials_1 = require(
|
|
15
|
-
const PersonaCoin_tokens_initialsBackground_1 = require(
|
|
16
|
-
const PersonaCoin_tokens_photo_1 = require(
|
|
17
|
-
const PersonaCoin_tokens_ring_1 = require(
|
|
18
|
-
const PersonaCoin_tokens_root_1 = require(
|
|
19
|
-
const PersonaCoin_types_1 = require(
|
|
6
|
+
const react_native_1 = require("react-native");
|
|
7
|
+
const adapters_1 = require("@fluentui-react-native/adapters");
|
|
8
|
+
const tokens_1 = require("@fluentui-react-native/tokens");
|
|
9
|
+
const foundation_compose_1 = require("@uifabricshared/foundation-compose");
|
|
10
|
+
const foundation_settings_1 = require("@uifabricshared/foundation-settings");
|
|
11
|
+
const PersonaCoin_helpers_1 = require("./PersonaCoin.helpers");
|
|
12
|
+
const PersonaCoin_settings_1 = require("./PersonaCoin.settings");
|
|
13
|
+
const PersonaCoin_tokens_icon_1 = require("./PersonaCoin.tokens.icon");
|
|
14
|
+
const PersonaCoin_tokens_initials_1 = require("./PersonaCoin.tokens.initials");
|
|
15
|
+
const PersonaCoin_tokens_initialsBackground_1 = require("./PersonaCoin.tokens.initialsBackground");
|
|
16
|
+
const PersonaCoin_tokens_photo_1 = require("./PersonaCoin.tokens.photo");
|
|
17
|
+
const PersonaCoin_tokens_ring_1 = require("./PersonaCoin.tokens.ring");
|
|
18
|
+
const PersonaCoin_tokens_root_1 = require("./PersonaCoin.tokens.root");
|
|
19
|
+
const PersonaCoin_types_1 = require("./PersonaCoin.types");
|
|
20
20
|
function usePrepareForProps(props, useStyling) {
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
uri: imageUrl,
|
|
21
|
+
const { imageUrl, imageDescription, initials, presence, isOutOfOffice, ring, ...rest } = props;
|
|
22
|
+
const personaPhotoSource = imageUrl === undefined
|
|
23
|
+
? undefined
|
|
24
|
+
: {
|
|
25
|
+
uri: imageUrl,
|
|
27
26
|
};
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
}
|
|
48
|
-
};
|
|
27
|
+
const iconSource = presence === undefined ? undefined : (0, PersonaCoin_helpers_1.getPresenceIconSource)(presence, isOutOfOffice || false);
|
|
28
|
+
const showRing = !!ring;
|
|
29
|
+
const transparentRing = !!ring?.transparent;
|
|
30
|
+
return {
|
|
31
|
+
slotProps: (0, foundation_settings_1.mergeSettings)(useStyling(props), {
|
|
32
|
+
root: { ...rest },
|
|
33
|
+
initials: {
|
|
34
|
+
children: initials,
|
|
35
|
+
},
|
|
36
|
+
photo: {
|
|
37
|
+
accessibilityLabel: imageDescription,
|
|
38
|
+
},
|
|
39
|
+
}),
|
|
40
|
+
state: {
|
|
41
|
+
iconSource,
|
|
42
|
+
personaPhotoSource,
|
|
43
|
+
showRing,
|
|
44
|
+
transparentRing,
|
|
45
|
+
},
|
|
46
|
+
};
|
|
49
47
|
}
|
|
50
48
|
const render = (Slots, renderData) => {
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
children: [
|
|
57
|
-
personaPhotoSource
|
|
58
|
-
? jsx_runtime_1.jsx(Slots.photo, { source: personaPhotoSource })
|
|
59
|
-
: jsx_runtime_1.jsx(Slots.initialsBackground, { children: jsx_runtime_1.jsx(Slots.initials, {}) }),
|
|
60
|
-
showRing && !transparentRing && jsx_runtime_1.jsx(Slots.ring, {}),
|
|
61
|
-
showRing && jsx_runtime_1.jsx(Slots.glow, {}),
|
|
62
|
-
!!iconSource && !!iconSource.uri && jsx_runtime_1.jsx(Slots.icon, { source: iconSource }),
|
|
63
|
-
],
|
|
64
|
-
});
|
|
49
|
+
if (!renderData.state) {
|
|
50
|
+
return null;
|
|
51
|
+
}
|
|
52
|
+
const { personaPhotoSource, iconSource, showRing, transparentRing } = renderData.state;
|
|
53
|
+
return (jsx_runtime_1.jsxs(Slots.root, { children: [personaPhotoSource ? (jsx_runtime_1.jsx(Slots.photo, { source: personaPhotoSource })) : (jsx_runtime_1.jsx(Slots.initialsBackground, { children: jsx_runtime_1.jsx(Slots.initials, {}) })), showRing && !transparentRing && jsx_runtime_1.jsx(Slots.ring, {}), showRing && jsx_runtime_1.jsx(Slots.glow, {}), !!iconSource && !!iconSource.uri && jsx_runtime_1.jsx(Slots.icon, { source: iconSource })] }));
|
|
65
54
|
};
|
|
66
55
|
exports.PersonaCoin = (0, foundation_compose_1.compose)({
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
56
|
+
displayName: PersonaCoin_types_1.personaCoinName,
|
|
57
|
+
usePrepareProps: usePrepareForProps,
|
|
58
|
+
settings: PersonaCoin_settings_1.settings,
|
|
59
|
+
slots: {
|
|
60
|
+
root: {
|
|
61
|
+
slotType: react_native_1.View,
|
|
62
|
+
filter: adapters_1.filterViewProps,
|
|
63
|
+
},
|
|
64
|
+
photo: {
|
|
65
|
+
slotType: react_native_1.Image,
|
|
66
|
+
filter: adapters_1.filterImageProps,
|
|
67
|
+
},
|
|
68
|
+
initials: react_native_1.Text,
|
|
69
|
+
initialsBackground: {
|
|
70
|
+
slotType: react_native_1.View,
|
|
71
|
+
filter: adapters_1.filterViewProps,
|
|
72
|
+
},
|
|
73
|
+
icon: {
|
|
74
|
+
slotType: react_native_1.Image,
|
|
75
|
+
filter: adapters_1.filterImageProps,
|
|
76
|
+
},
|
|
77
|
+
ring: {
|
|
78
|
+
slotType: react_native_1.View,
|
|
79
|
+
filter: adapters_1.filterViewProps,
|
|
80
|
+
},
|
|
81
|
+
glow: {
|
|
82
|
+
slotType: react_native_1.View,
|
|
83
|
+
filter: adapters_1.filterViewProps,
|
|
84
|
+
},
|
|
91
85
|
},
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
86
|
+
render: render,
|
|
87
|
+
styles: {
|
|
88
|
+
root: [PersonaCoin_tokens_root_1.buildRootStyles],
|
|
89
|
+
initials: [tokens_1.foregroundColorTokens, PersonaCoin_tokens_initials_1.buildInitialsStyles],
|
|
90
|
+
initialsBackground: [PersonaCoin_tokens_initialsBackground_1.buildInitialsBackgroundStyles],
|
|
91
|
+
photo: [PersonaCoin_tokens_photo_1.buildPhotoStyles],
|
|
92
|
+
icon: [PersonaCoin_tokens_icon_1.buildIconStyles],
|
|
93
|
+
ring: [PersonaCoin_tokens_ring_1.buildRingStyles],
|
|
94
|
+
glow: [PersonaCoin_tokens_ring_1.buildGlowStyles],
|
|
95
95
|
},
|
|
96
|
-
},
|
|
97
|
-
render: render,
|
|
98
|
-
styles: {
|
|
99
|
-
root: [PersonaCoin_tokens_root_1.buildRootStyles],
|
|
100
|
-
initials: [tokens_1.foregroundColorTokens, PersonaCoin_tokens_initials_1.buildInitialsStyles],
|
|
101
|
-
initialsBackground: [PersonaCoin_tokens_initialsBackground_1.buildInitialsBackgroundStyles],
|
|
102
|
-
photo: [PersonaCoin_tokens_photo_1.buildPhotoStyles],
|
|
103
|
-
icon: [PersonaCoin_tokens_icon_1.buildIconStyles],
|
|
104
|
-
ring: [PersonaCoin_tokens_ring_1.buildRingStyles],
|
|
105
|
-
glow: [PersonaCoin_tokens_ring_1.buildGlowStyles],
|
|
106
|
-
},
|
|
107
96
|
});
|
|
108
|
-
//# sourceMappingURL=PersonaCoin.js.map
|
|
97
|
+
//# sourceMappingURL=PersonaCoin.js.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import type { IComposeSettings } from '@uifabricshared/foundation-compose';
|
|
2
2
|
import type { IPersonaCoinType } from './PersonaCoin.types';
|
|
3
3
|
export declare const settings: IComposeSettings<IPersonaCoinType>;
|
|
4
|
-
//# sourceMappingURL=PersonaCoin.settings.d.ts.map
|
|
4
|
+
//# sourceMappingURL=PersonaCoin.settings.d.ts.map
|
|
@@ -1,18 +1,18 @@
|
|
|
1
|
-
|
|
2
|
-
Object.defineProperty(exports,
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.settings = void 0;
|
|
4
|
-
const PersonaCoin_helpers_1 = require(
|
|
5
|
-
const PersonaCoin_types_1 = require(
|
|
4
|
+
const PersonaCoin_helpers_1 = require("./PersonaCoin.helpers");
|
|
5
|
+
const PersonaCoin_types_1 = require("./PersonaCoin.types");
|
|
6
6
|
exports.settings = [
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
7
|
+
{
|
|
8
|
+
tokens: {
|
|
9
|
+
horizontalIconAlignment: 'end',
|
|
10
|
+
verticalIconAlignment: 'end',
|
|
11
|
+
color: 'white', // initials is always 'white', unless overriden by token
|
|
12
|
+
iconStrokeColor: 'white', // icon stroke color is always 'white', unless overriden by token
|
|
13
|
+
backgroundColor: (0, PersonaCoin_helpers_1.convertCoinColorFluent)('cornflower'),
|
|
14
|
+
},
|
|
14
15
|
},
|
|
15
|
-
|
|
16
|
-
PersonaCoin_types_1.personaCoinName,
|
|
16
|
+
PersonaCoin_types_1.personaCoinName,
|
|
17
17
|
];
|
|
18
|
-
//# sourceMappingURL=PersonaCoin.settings.js.map
|
|
18
|
+
//# sourceMappingURL=PersonaCoin.settings.js.map
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { ImageProps } from 'react-native';
|
|
2
2
|
import type { Theme } from '@fluentui-react-native/framework';
|
|
3
3
|
import type { IPersonaCoinTokens } from './PersonaCoin.types';
|
|
4
|
-
export declare const buildIconStyles: import(
|
|
5
|
-
//# sourceMappingURL=PersonaCoin.tokens.icon.d.ts.map
|
|
4
|
+
export declare const buildIconStyles: import("@fluentui-react-native/tokens").StyleFactoryFunction<ImageProps, IPersonaCoinTokens, Theme>;
|
|
5
|
+
//# sourceMappingURL=PersonaCoin.tokens.icon.d.ts.map
|
|
@@ -1,26 +1,26 @@
|
|
|
1
|
-
|
|
2
|
-
Object.defineProperty(exports,
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.buildIconStyles = void 0;
|
|
4
|
-
const foundation_tokens_1 = require(
|
|
5
|
-
const PersonaCoin_helpers_1 = require(
|
|
4
|
+
const foundation_tokens_1 = require("@uifabricshared/foundation-tokens");
|
|
5
|
+
const PersonaCoin_helpers_1 = require("./PersonaCoin.helpers");
|
|
6
6
|
const _iconKeyProps = ['iconSize', 'size', 'coinSize'];
|
|
7
7
|
function _buildIconStyles(tokenProps, theme) {
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
8
|
+
const { iconSize, iconStrokeWidth } = (0, PersonaCoin_helpers_1.calculateEffectiveSizes)(tokenProps);
|
|
9
|
+
const iconSizeAdjusted = iconSize + iconStrokeWidth * 2;
|
|
10
|
+
const iconStrokeColor = tokenProps.iconStrokeColor || theme.colors.background;
|
|
11
|
+
return {
|
|
12
|
+
source: {},
|
|
13
|
+
style: {
|
|
14
|
+
position: 'absolute',
|
|
15
|
+
width: iconSizeAdjusted,
|
|
16
|
+
height: iconSizeAdjusted,
|
|
17
|
+
bottom: -iconStrokeWidth,
|
|
18
|
+
end: -iconStrokeWidth,
|
|
19
|
+
borderRadius: iconSizeAdjusted / 2,
|
|
20
|
+
borderWidth: iconStrokeWidth,
|
|
21
|
+
borderColor: iconStrokeColor,
|
|
22
|
+
},
|
|
23
|
+
};
|
|
24
24
|
}
|
|
25
25
|
exports.buildIconStyles = (0, foundation_tokens_1.styleFunction)(_buildIconStyles, _iconKeyProps);
|
|
26
|
-
//# sourceMappingURL=PersonaCoin.tokens.icon.js.map
|
|
26
|
+
//# sourceMappingURL=PersonaCoin.tokens.icon.js.map
|
|
@@ -1,9 +1,5 @@
|
|
|
1
1
|
import type { TextProps } from 'react-native';
|
|
2
2
|
import type { Theme } from '@fluentui-react-native/framework';
|
|
3
3
|
import type { IPersonaCoinTokens } from './PersonaCoin.types';
|
|
4
|
-
export declare const buildInitialsStyles: import(
|
|
5
|
-
|
|
6
|
-
IPersonaCoinTokens,
|
|
7
|
-
Theme
|
|
8
|
-
>;
|
|
9
|
-
//# sourceMappingURL=PersonaCoin.tokens.initials.d.ts.map
|
|
4
|
+
export declare const buildInitialsStyles: import("@fluentui-react-native/tokens").StyleFactoryFunction<TextProps, IPersonaCoinTokens, Theme>;
|
|
5
|
+
//# sourceMappingURL=PersonaCoin.tokens.initials.d.ts.map
|
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
|
|
2
|
-
Object.defineProperty(exports,
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.buildInitialsStyles = void 0;
|
|
4
|
-
const foundation_tokens_1 = require(
|
|
5
|
-
const PersonaCoin_helpers_1 = require(
|
|
4
|
+
const foundation_tokens_1 = require("@uifabricshared/foundation-tokens");
|
|
5
|
+
const PersonaCoin_helpers_1 = require("./PersonaCoin.helpers");
|
|
6
6
|
const _initialsKeyProps = ['coinSize', 'initialsSize', 'size'];
|
|
7
7
|
function _buildInitialsStyles(tokenProps /*, theme: ITheme */) {
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
8
|
+
const { initialsSize } = (0, PersonaCoin_helpers_1.calculateEffectiveSizes)(tokenProps);
|
|
9
|
+
return {
|
|
10
|
+
style: {
|
|
11
|
+
fontSize: initialsSize,
|
|
12
|
+
},
|
|
13
|
+
};
|
|
14
14
|
}
|
|
15
15
|
exports.buildInitialsStyles = (0, foundation_tokens_1.styleFunction)(_buildInitialsStyles, _initialsKeyProps);
|
|
16
|
-
//# sourceMappingURL=PersonaCoin.tokens.initials.js.map
|
|
16
|
+
//# sourceMappingURL=PersonaCoin.tokens.initials.js.map
|
|
@@ -1,9 +1,5 @@
|
|
|
1
1
|
import type { ViewProps } from 'react-native';
|
|
2
2
|
import type { Theme } from '@fluentui-react-native/framework';
|
|
3
3
|
import type { IPersonaCoinTokens } from './PersonaCoin.types';
|
|
4
|
-
export declare const buildInitialsBackgroundStyles: import(
|
|
5
|
-
|
|
6
|
-
IPersonaCoinTokens,
|
|
7
|
-
Theme
|
|
8
|
-
>;
|
|
9
|
-
//# sourceMappingURL=PersonaCoin.tokens.initialsBackground.d.ts.map
|
|
4
|
+
export declare const buildInitialsBackgroundStyles: import("@fluentui-react-native/tokens").StyleFactoryFunction<ViewProps, IPersonaCoinTokens, Theme>;
|
|
5
|
+
//# sourceMappingURL=PersonaCoin.tokens.initialsBackground.d.ts.map
|