@fluentui-react-native/persona-coin 0.16.0 → 0.16.3
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 +47 -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 +28 -27
- package/eslint.config.js +0 -3
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,52 @@
|
|
|
1
1
|
# Change Log - @fluentui-react-native/persona-coin
|
|
2
2
|
|
|
3
|
+
## 0.16.3
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- 9cf4444: Migrate from ESLint to oxlint
|
|
8
|
+
- Updated dependencies [9cf4444]
|
|
9
|
+
- @uifabricshared/foundation-composable@0.14.3
|
|
10
|
+
- @uifabricshared/foundation-settings@0.16.3
|
|
11
|
+
- @uifabricshared/foundation-compose@1.16.3
|
|
12
|
+
- @uifabricshared/foundation-tokens@0.16.3
|
|
13
|
+
- @fluentui-react-native/theme-tokens@0.28.3
|
|
14
|
+
- @fluentui-react-native/framework@0.15.3
|
|
15
|
+
- @fluentui-react-native/adapters@0.14.3
|
|
16
|
+
- @fluentui-react-native/tokens@0.24.3
|
|
17
|
+
|
|
18
|
+
## 0.16.2
|
|
19
|
+
|
|
20
|
+
### Patch Changes
|
|
21
|
+
|
|
22
|
+
- 8a7b549: Update to the latest rnx-kit versions, fix some typing issues, and correct the vscode settings
|
|
23
|
+
- Updated dependencies [8a7b549]
|
|
24
|
+
- @uifabricshared/foundation-composable@0.14.2
|
|
25
|
+
- @uifabricshared/foundation-settings@0.16.2
|
|
26
|
+
- @uifabricshared/foundation-compose@1.16.2
|
|
27
|
+
- @uifabricshared/foundation-tokens@0.16.2
|
|
28
|
+
- @fluentui-react-native/theme-tokens@0.28.2
|
|
29
|
+
- @fluentui-react-native/framework@0.15.2
|
|
30
|
+
- @fluentui-react-native/adapters@0.14.2
|
|
31
|
+
- @fluentui-react-native/tokens@0.24.2
|
|
32
|
+
|
|
33
|
+
## 0.16.1
|
|
34
|
+
|
|
35
|
+
### Patch Changes
|
|
36
|
+
|
|
37
|
+
- 0d6e9c1: chore: migrate to `oxfmt`
|
|
38
|
+
- ac6e7af: Ensure packages have a default export that references the typescript entrypoint and clean up build dependency ordering
|
|
39
|
+
- Updated dependencies [0d6e9c1]
|
|
40
|
+
- Updated dependencies [ac6e7af]
|
|
41
|
+
- @uifabricshared/foundation-composable@0.14.1
|
|
42
|
+
- @uifabricshared/foundation-settings@0.16.1
|
|
43
|
+
- @uifabricshared/foundation-compose@1.16.1
|
|
44
|
+
- @uifabricshared/foundation-tokens@0.16.1
|
|
45
|
+
- @fluentui-react-native/theme-tokens@0.28.1
|
|
46
|
+
- @fluentui-react-native/framework@0.15.1
|
|
47
|
+
- @fluentui-react-native/adapters@0.14.1
|
|
48
|
+
- @fluentui-react-native/tokens@0.24.1
|
|
49
|
+
|
|
3
50
|
## 0.16.0
|
|
4
51
|
|
|
5
52
|
### Minor Changes
|
package/lib/PersonaCoin.d.ts
CHANGED
|
@@ -1,9 +1,3 @@
|
|
|
1
1
|
import type { IPersonaCoinProps, IPersonaCoinSlotProps, IPersonaCoinState } from './PersonaCoin.types';
|
|
2
|
-
export declare const PersonaCoin: import(
|
|
3
|
-
|
|
4
|
-
IPersonaCoinSlotProps,
|
|
5
|
-
import('./PersonaCoin.types').IPersonaCoinTokens,
|
|
6
|
-
IPersonaCoinState,
|
|
7
|
-
object
|
|
8
|
-
>;
|
|
9
|
-
//# sourceMappingURL=PersonaCoin.d.ts.map
|
|
2
|
+
export declare const PersonaCoin: import("@uifabricshared/foundation-compose").IComposeReturnType<IPersonaCoinProps, IPersonaCoinSlotProps, import("./PersonaCoin.types").IPersonaCoinTokens, IPersonaCoinState, object>;
|
|
3
|
+
//# sourceMappingURL=PersonaCoin.d.ts.map
|
|
@@ -1,18 +1,11 @@
|
|
|
1
1
|
import type { ImageURISource } from 'react-native';
|
|
2
|
-
import type {
|
|
3
|
-
PersonaSize,
|
|
4
|
-
PersonaCoinColor,
|
|
5
|
-
PersonaCoinFluentColor,
|
|
6
|
-
PersonaPresence,
|
|
7
|
-
IPersonaCoinTokens,
|
|
8
|
-
RingThickness,
|
|
9
|
-
} from './PersonaCoin.types';
|
|
2
|
+
import type { PersonaSize, PersonaCoinColor, PersonaCoinFluentColor, PersonaPresence, IPersonaCoinTokens, RingThickness } from './PersonaCoin.types';
|
|
10
3
|
export declare function getPresenceIconSource(presence: PersonaPresence, isOutOfOffice: boolean): ImageURISource;
|
|
11
4
|
export type PersonaSizeConfig = {
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
5
|
+
physicalSize: number;
|
|
6
|
+
iconSize: number;
|
|
7
|
+
iconStrokeWidth: number;
|
|
8
|
+
initialsSize: number;
|
|
16
9
|
};
|
|
17
10
|
export declare function getSizeConfig(size: PersonaSize): PersonaSizeConfig;
|
|
18
11
|
/**
|
|
@@ -26,4 +19,4 @@ export declare function convertCoinColor(coinColor: PersonaCoinColor): string;
|
|
|
26
19
|
export declare function convertCoinColorFluent(coinColor: PersonaCoinFluentColor): string;
|
|
27
20
|
export declare function calculateEffectiveSizes(tokens: IPersonaCoinTokens): PersonaSizeConfig;
|
|
28
21
|
export declare function getRingThickness(thickness: RingThickness): number;
|
|
29
|
-
//# sourceMappingURL=PersonaCoin.helpers.d.ts.map
|
|
22
|
+
//# sourceMappingURL=PersonaCoin.helpers.d.ts.map
|
|
@@ -1,136 +1,132 @@
|
|
|
1
1
|
import { globalTokens } from '@fluentui-react-native/theme-tokens';
|
|
2
2
|
const presenceIconCache = {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
3
|
+
none: { uri: '' },
|
|
4
|
+
offline: {
|
|
5
|
+
uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAANlBMVEUAAACoxM+oxM+oxM+oxM+oxM+oxM+oxM+oxM////+oxM/W5OmzzNX5+/z3+vvu9Pbt8/Xj7PAAKKEtAAAACXRSTlMA6bWcZQpiXgXWfJCWAAAAeElEQVQoz52RSQ7EIAwEx0AWymT7/2dHYpgoPvQldeySsGl/XjOVZGCpTDFfjIEtj3jN0Pzc99Mb5PUWGbwOHPI/n+GqNxfMY67h9YFjvw0KrQYapYuER+GkLowjigPrArYoNpBCPiWHy3XlB1UlqkRZuziUPO1bvszLC8V87ko/AAAAAElFTkSuQmCC',
|
|
6
|
+
},
|
|
7
|
+
online: {
|
|
8
|
+
uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAAWlBMVEUAAABusAVusAVusAVusAVusAVusAVusAVusAVusAVusAVusAVusAVusAVusAVusAVusAVusAVusAX////N4bi61517tivn8d3e7NL3+vTE3Kux0o6nzH6GvEWFZ26xAAAAEnRSTlMA8eNrEQj6syHTeXrKshzZ19JHa6QpAAAApUlEQVQoz4WS6w7CIAyFBwwGbE5th87b+7+mCDXcIp4/NN9J2tJ2+KdRTFyx0yTGAkvLgMRmmbg2kMnoL185FOIr5Vmg0hKzWWhkQz+sNdinN1Eg9wyP8MYh5xvewjt5gxcct9iYN1SIXvsj46C8EWvfEZ0jTsYxRJcrYuLAqTg5xKm4AHL2xEH8/GBvJIM819xIWkc9dt1ZFEnO+WrbY1CcjqGnN0xiGcyuKFtcAAAAAElFTkSuQmCC',
|
|
9
|
+
},
|
|
10
|
+
away: {
|
|
11
|
+
uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAAP1BMVEUAAAD6yRT6yRT6yRT6yRT6yRT6yRT6yRT6yRT6yRT6yRT6yRT////6zCP95pH95Yv++OL84Hn822T72FT71EUen9LHAAAAC3RSTlMA6rVlCuWgmGJeBd4LCPMAAAB8SURBVCjPnZFLDoAgDERtQUUH/97/rCYNJUITTXjLeYu2064Z75gAYufLfOqR6KdXPI94Mc5ZDCgYNA8piHGBENJcqgV5EQ61gBPBVrAIsoJEwArUYi0EIbFlQ+VwHGpY11XOGDdZVw/MXPstB2olFeGnRFv796Psa1t5ANwFDZEW8B8sAAAAAElFTkSuQmCC',
|
|
12
|
+
},
|
|
13
|
+
dnd: {
|
|
14
|
+
uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAAQlBMVEUAAADpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABv////wfYT86errJjiR9OLxAAAAEXRSTlMA4/CzeQj602seEhEk89jKakfnNfsAAACKSURBVCjPhZFbDoQgDEWBQkHBR2d0/1udEppR0cbzeU9SSq95I69gcZphzZc4eEeC8+HIh0gn4vDPLV2wYsJCHUub5umGr/no7sKNLBI9kFjAkwAWbaX9K+xtMRZIle0jbFRBFpMmZmWU8ri+rv5B/SQmxD6PUknpz16MUJSi9GqZnMAiWkjZvPADxcoYalVfnOMAAAAASUVORK5CYII=',
|
|
15
|
+
},
|
|
16
|
+
blocked: {
|
|
17
|
+
uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAAe1BMVEUAAADpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABv////pABv83uHqCiTsJz7rGjP7zNHvRVj/+vv+8vP6x83sIzv2mqXsKD/7zNL5v8b3oqz2maTuP1P82Nz819vtKUDrGjLrGTK2dyGvAAAAEXRSTlMA8dSzeQj64mseEhHkJMpq5T3coEAAAADSSURBVCjPhdHZFoIgFAVQGQRLGzhQiaLNw/9/YZRk4IvncZ+17uJys7mUGyYFoWxTJpxzghDC878vKFBftLX6UgN0MXqF/qRCTg5VaPI1ro36Re+MWQ/TOPrEXw7840uCNvb9oQVZ+qJAnbpSNQpfMHQTVx2YLyT0xJWG9IWAnbiyEL4gaCKPCopb7P9RDOeJqzNYeG7i3+eGBVMPC2Yczpn9cfTmAT58IoV5Rn4FDSdZbY1rxzk9qpXHofkcqtO2uXfhUHOn9SkLJoWQrCizmbwBa5IbuX8ugpIAAAAASUVORK5CYII=',
|
|
18
|
+
},
|
|
19
|
+
busy: {
|
|
20
|
+
uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAANlBMVEUAAADpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvpABvsgIdoAAAAEXRSTlMA8eLUEQj6s2sheXrlyrJqHBqb3nMAAAB/SURBVCjPhZFRDsQgCEQFEdS223L/yy7JummtGN/nvASUCSvoFGSIclIXpwragC3deYn6IJZ/fqF24NXmHPri+E2rOlCDQTAKIBNZHbKJjyfEBHoCTbAn2ATMRPRHzZfPn+t/cH4SIw3rY2p17H2+l0VRRtr8ag3KgswomcKCL1NmGBp9lqsZAAAAAElFTkSuQmCC',
|
|
21
|
+
},
|
|
22
22
|
};
|
|
23
23
|
// TODO: Need icons for the OOF statues
|
|
24
24
|
const presenceOOFIconCache = presenceIconCache;
|
|
25
25
|
export function getPresenceIconSource(presence, isOutOfOffice) {
|
|
26
|
-
|
|
26
|
+
return isOutOfOffice ? presenceOOFIconCache[presence] : presenceIconCache[presence];
|
|
27
27
|
}
|
|
28
28
|
const sizeTable = {
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
29
|
+
size8: { physicalSize: 8, iconSize: 0, iconStrokeWidth: 0, initialsSize: 4 },
|
|
30
|
+
size24: { physicalSize: 24, iconSize: 8, iconStrokeWidth: 2, initialsSize: 10 },
|
|
31
|
+
size32: { physicalSize: 32, iconSize: 8, iconStrokeWidth: 2, initialsSize: 12 },
|
|
32
|
+
size40: { physicalSize: 40, iconSize: 12, iconStrokeWidth: 2, initialsSize: 14 },
|
|
33
|
+
size48: { physicalSize: 48, iconSize: 12, iconStrokeWidth: 2, initialsSize: 16 },
|
|
34
|
+
size56: { physicalSize: 56, iconSize: 16, iconStrokeWidth: 3, initialsSize: 18 },
|
|
35
|
+
size72: { physicalSize: 72, iconSize: 20, iconStrokeWidth: 3, initialsSize: 20 },
|
|
36
|
+
size100: { physicalSize: 100, iconSize: 28, iconStrokeWidth: 4, initialsSize: 36 },
|
|
37
|
+
size120: { physicalSize: 120, iconSize: 32, iconStrokeWidth: 4, initialsSize: 40 },
|
|
38
38
|
};
|
|
39
39
|
export function getSizeConfig(size) {
|
|
40
|
-
|
|
40
|
+
return sizeTable[size];
|
|
41
41
|
}
|
|
42
42
|
const colorTable = {
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
43
|
+
lightBlue: globalTokens.color.cornflower.primary,
|
|
44
|
+
blue: globalTokens.color.blue.primary,
|
|
45
|
+
darkBlue: globalTokens.color.royalBlue.primary,
|
|
46
|
+
teal: globalTokens.color.teal.primary,
|
|
47
|
+
green: globalTokens.color.forest.primary,
|
|
48
|
+
darkGreen: globalTokens.color.darkGreen.primary,
|
|
49
|
+
lightPink: globalTokens.color.berry.primary,
|
|
50
|
+
pink: globalTokens.color.hotPink.primary,
|
|
51
|
+
magenta: globalTokens.color.grape.primary,
|
|
52
|
+
purple: globalTokens.color.purple.primary,
|
|
53
|
+
orange: globalTokens.color.pumpkin.primary,
|
|
54
|
+
lightRed: globalTokens.color.red.primary,
|
|
55
|
+
darkRed: globalTokens.color.burgundy.primary,
|
|
56
|
+
violet: globalTokens.color.orchid.primary,
|
|
57
|
+
gold: globalTokens.color.brass.primary,
|
|
58
|
+
burgundy: globalTokens.color.darkRed.primary,
|
|
59
|
+
warmGray: globalTokens.color.beige.primary,
|
|
60
|
+
cyan: globalTokens.color.steel.primary,
|
|
61
|
+
rust: globalTokens.color.brown.primary,
|
|
62
|
+
coolGray: globalTokens.color.platinum.primary,
|
|
63
63
|
};
|
|
64
64
|
/**
|
|
65
65
|
* Converts the PersonaCoinColor into a hex color value
|
|
66
66
|
* @deprecated Use convertCoinColorFluent instead.
|
|
67
67
|
*/
|
|
68
68
|
export function convertCoinColor(coinColor) {
|
|
69
|
-
|
|
69
|
+
return colorTable[coinColor];
|
|
70
70
|
}
|
|
71
71
|
const colorTableFluent = {
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
72
|
+
cornflower: globalTokens.color.cornflower.primary,
|
|
73
|
+
blue: globalTokens.color.blue.primary,
|
|
74
|
+
royalBlue: globalTokens.color.royalBlue.primary,
|
|
75
|
+
teal: globalTokens.color.teal.primary,
|
|
76
|
+
forest: globalTokens.color.forest.primary,
|
|
77
|
+
darkGreen: globalTokens.color.darkGreen.primary,
|
|
78
|
+
berry: globalTokens.color.berry.primary,
|
|
79
|
+
hotPink: globalTokens.color.hotPink.primary,
|
|
80
|
+
grape: globalTokens.color.grape.primary,
|
|
81
|
+
purple: globalTokens.color.purple.primary,
|
|
82
|
+
pumpkin: globalTokens.color.pumpkin.primary,
|
|
83
|
+
red: globalTokens.color.red.primary,
|
|
84
|
+
burgundy: globalTokens.color.burgundy.primary,
|
|
85
|
+
orchid: globalTokens.color.orchid.primary,
|
|
86
|
+
brass: globalTokens.color.brass.primary,
|
|
87
|
+
darkRed: globalTokens.color.darkRed.primary,
|
|
88
|
+
beige: globalTokens.color.beige.primary,
|
|
89
|
+
platinum: globalTokens.color.platinum.primary,
|
|
90
|
+
steel: globalTokens.color.steel.primary,
|
|
91
|
+
brown: globalTokens.color.brown.primary,
|
|
92
92
|
};
|
|
93
93
|
/**
|
|
94
94
|
* Converts the PersonaCoinFluentColor into a hex color value
|
|
95
95
|
*/
|
|
96
96
|
export function convertCoinColorFluent(coinColor) {
|
|
97
|
-
|
|
97
|
+
return colorTableFluent[coinColor];
|
|
98
98
|
}
|
|
99
99
|
export function calculateEffectiveSizes(tokens) {
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
iconStrokeWidth: iconStrokeWidth || defaultIconStrokeWidth,
|
|
114
|
-
initialsSize: initialsSize || defaultInitialsSize,
|
|
115
|
-
};
|
|
116
|
-
}
|
|
100
|
+
const { size, coinSize, iconSize, iconStrokeWidth, initialsSize } = tokens;
|
|
101
|
+
if (size) {
|
|
102
|
+
return sizeTable[size];
|
|
103
|
+
}
|
|
104
|
+
else {
|
|
105
|
+
const { physicalSize: defaultPhysicalSize, iconSize: defaultIconSize, iconStrokeWidth: defaultIconStrokeWidth, initialsSize: defaultInitialsSize, } = sizeTable['size40'];
|
|
106
|
+
return {
|
|
107
|
+
physicalSize: coinSize || defaultPhysicalSize,
|
|
108
|
+
iconSize: iconSize || defaultIconSize,
|
|
109
|
+
iconStrokeWidth: iconStrokeWidth || defaultIconStrokeWidth,
|
|
110
|
+
initialsSize: initialsSize || defaultInitialsSize,
|
|
111
|
+
};
|
|
112
|
+
}
|
|
117
113
|
}
|
|
118
114
|
export function getRingThickness(thickness) {
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
115
|
+
switch (thickness) {
|
|
116
|
+
case 'xSmall':
|
|
117
|
+
return 1;
|
|
118
|
+
case 'small':
|
|
119
|
+
return 1;
|
|
120
|
+
case 'medium':
|
|
121
|
+
return 2;
|
|
122
|
+
case 'large':
|
|
123
|
+
return 2;
|
|
124
|
+
case 'xlarge':
|
|
125
|
+
return 2;
|
|
126
|
+
case 'xxlarge':
|
|
127
|
+
return 4;
|
|
128
|
+
default:
|
|
129
|
+
return thickness < 0 ? 4 : thickness;
|
|
130
|
+
}
|
|
135
131
|
}
|
|
136
|
-
//# sourceMappingURL=PersonaCoin.helpers.js.map
|
|
132
|
+
//# sourceMappingURL=PersonaCoin.helpers.js.map
|
package/lib/PersonaCoin.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "@fluentui-react-native/framework-base/jsx-runtime";
|
|
2
2
|
/** @jsxImportSource @fluentui-react-native/framework-base */
|
|
3
3
|
import { Image, View, Text } from 'react-native';
|
|
4
4
|
import { filterViewProps, filterImageProps } from '@fluentui-react-native/adapters';
|
|
@@ -15,90 +15,80 @@ import { buildGlowStyles, buildRingStyles } from './PersonaCoin.tokens.ring';
|
|
|
15
15
|
import { buildRootStyles } from './PersonaCoin.tokens.root';
|
|
16
16
|
import { personaCoinName } from './PersonaCoin.types';
|
|
17
17
|
function usePrepareForProps(props, useStyling) {
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
uri: imageUrl,
|
|
18
|
+
const { imageUrl, imageDescription, initials, presence, isOutOfOffice, ring, ...rest } = props;
|
|
19
|
+
const personaPhotoSource = imageUrl === undefined
|
|
20
|
+
? undefined
|
|
21
|
+
: {
|
|
22
|
+
uri: imageUrl,
|
|
24
23
|
};
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
24
|
+
const iconSource = presence === undefined ? undefined : getPresenceIconSource(presence, isOutOfOffice || false);
|
|
25
|
+
const showRing = !!ring;
|
|
26
|
+
const transparentRing = !!ring?.transparent;
|
|
27
|
+
return {
|
|
28
|
+
slotProps: mergeSettings(useStyling(props), {
|
|
29
|
+
root: { ...rest },
|
|
30
|
+
initials: {
|
|
31
|
+
children: initials,
|
|
32
|
+
},
|
|
33
|
+
photo: {
|
|
34
|
+
accessibilityLabel: imageDescription,
|
|
35
|
+
},
|
|
36
|
+
}),
|
|
37
|
+
state: {
|
|
38
|
+
iconSource,
|
|
39
|
+
personaPhotoSource,
|
|
40
|
+
showRing,
|
|
41
|
+
transparentRing,
|
|
42
|
+
},
|
|
43
|
+
};
|
|
45
44
|
}
|
|
46
45
|
const render = (Slots, renderData) => {
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
children: [
|
|
53
|
-
personaPhotoSource
|
|
54
|
-
? _jsx(Slots.photo, { source: personaPhotoSource })
|
|
55
|
-
: _jsx(Slots.initialsBackground, { children: _jsx(Slots.initials, {}) }),
|
|
56
|
-
showRing && !transparentRing && _jsx(Slots.ring, {}),
|
|
57
|
-
showRing && _jsx(Slots.glow, {}),
|
|
58
|
-
!!iconSource && !!iconSource.uri && _jsx(Slots.icon, { source: iconSource }),
|
|
59
|
-
],
|
|
60
|
-
});
|
|
46
|
+
if (!renderData.state) {
|
|
47
|
+
return null;
|
|
48
|
+
}
|
|
49
|
+
const { personaPhotoSource, iconSource, showRing, transparentRing } = renderData.state;
|
|
50
|
+
return (_jsxs(Slots.root, { children: [personaPhotoSource ? (_jsx(Slots.photo, { source: personaPhotoSource })) : (_jsx(Slots.initialsBackground, { children: _jsx(Slots.initials, {}) })), showRing && !transparentRing && _jsx(Slots.ring, {}), showRing && _jsx(Slots.glow, {}), !!iconSource && !!iconSource.uri && _jsx(Slots.icon, { source: iconSource })] }));
|
|
61
51
|
};
|
|
62
52
|
export const PersonaCoin = compose({
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
53
|
+
displayName: personaCoinName,
|
|
54
|
+
usePrepareProps: usePrepareForProps,
|
|
55
|
+
settings: settings,
|
|
56
|
+
slots: {
|
|
57
|
+
root: {
|
|
58
|
+
slotType: View,
|
|
59
|
+
filter: filterViewProps,
|
|
60
|
+
},
|
|
61
|
+
photo: {
|
|
62
|
+
slotType: Image,
|
|
63
|
+
filter: filterImageProps,
|
|
64
|
+
},
|
|
65
|
+
initials: Text,
|
|
66
|
+
initialsBackground: {
|
|
67
|
+
slotType: View,
|
|
68
|
+
filter: filterViewProps,
|
|
69
|
+
},
|
|
70
|
+
icon: {
|
|
71
|
+
slotType: Image,
|
|
72
|
+
filter: filterImageProps,
|
|
73
|
+
},
|
|
74
|
+
ring: {
|
|
75
|
+
slotType: View,
|
|
76
|
+
filter: filterViewProps,
|
|
77
|
+
},
|
|
78
|
+
glow: {
|
|
79
|
+
slotType: View,
|
|
80
|
+
filter: filterViewProps,
|
|
81
|
+
},
|
|
87
82
|
},
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
83
|
+
render: render,
|
|
84
|
+
styles: {
|
|
85
|
+
root: [buildRootStyles],
|
|
86
|
+
initials: [foregroundColorTokens, buildInitialsStyles],
|
|
87
|
+
initialsBackground: [buildInitialsBackgroundStyles],
|
|
88
|
+
photo: [buildPhotoStyles],
|
|
89
|
+
icon: [buildIconStyles],
|
|
90
|
+
ring: [buildRingStyles],
|
|
91
|
+
glow: [buildGlowStyles],
|
|
91
92
|
},
|
|
92
|
-
},
|
|
93
|
-
render: render,
|
|
94
|
-
styles: {
|
|
95
|
-
root: [buildRootStyles],
|
|
96
|
-
initials: [foregroundColorTokens, buildInitialsStyles],
|
|
97
|
-
initialsBackground: [buildInitialsBackgroundStyles],
|
|
98
|
-
photo: [buildPhotoStyles],
|
|
99
|
-
icon: [buildIconStyles],
|
|
100
|
-
ring: [buildRingStyles],
|
|
101
|
-
glow: [buildGlowStyles],
|
|
102
|
-
},
|
|
103
93
|
});
|
|
104
|
-
//# sourceMappingURL=PersonaCoin.js.map
|
|
94
|
+
//# 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,15 +1,15 @@
|
|
|
1
1
|
import { convertCoinColorFluent } from './PersonaCoin.helpers';
|
|
2
2
|
import { personaCoinName } from './PersonaCoin.types';
|
|
3
3
|
export const settings = [
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
4
|
+
{
|
|
5
|
+
tokens: {
|
|
6
|
+
horizontalIconAlignment: 'end',
|
|
7
|
+
verticalIconAlignment: 'end',
|
|
8
|
+
color: 'white', // initials is always 'white', unless overriden by token
|
|
9
|
+
iconStrokeColor: 'white', // icon stroke color is always 'white', unless overriden by token
|
|
10
|
+
backgroundColor: convertCoinColorFluent('cornflower'),
|
|
11
|
+
},
|
|
11
12
|
},
|
|
12
|
-
|
|
13
|
-
personaCoinName,
|
|
13
|
+
personaCoinName,
|
|
14
14
|
];
|
|
15
|
-
//# sourceMappingURL=PersonaCoin.settings.js.map
|
|
15
|
+
//# 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
|
|
@@ -2,22 +2,22 @@ import { styleFunction } from '@uifabricshared/foundation-tokens';
|
|
|
2
2
|
import { calculateEffectiveSizes } from './PersonaCoin.helpers';
|
|
3
3
|
const _iconKeyProps = ['iconSize', 'size', 'coinSize'];
|
|
4
4
|
function _buildIconStyles(tokenProps, theme) {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
5
|
+
const { iconSize, iconStrokeWidth } = calculateEffectiveSizes(tokenProps);
|
|
6
|
+
const iconSizeAdjusted = iconSize + iconStrokeWidth * 2;
|
|
7
|
+
const iconStrokeColor = tokenProps.iconStrokeColor || theme.colors.background;
|
|
8
|
+
return {
|
|
9
|
+
source: {},
|
|
10
|
+
style: {
|
|
11
|
+
position: 'absolute',
|
|
12
|
+
width: iconSizeAdjusted,
|
|
13
|
+
height: iconSizeAdjusted,
|
|
14
|
+
bottom: -iconStrokeWidth,
|
|
15
|
+
end: -iconStrokeWidth,
|
|
16
|
+
borderRadius: iconSizeAdjusted / 2,
|
|
17
|
+
borderWidth: iconStrokeWidth,
|
|
18
|
+
borderColor: iconStrokeColor,
|
|
19
|
+
},
|
|
20
|
+
};
|
|
21
21
|
}
|
|
22
22
|
export const buildIconStyles = styleFunction(_buildIconStyles, _iconKeyProps);
|
|
23
|
-
//# sourceMappingURL=PersonaCoin.tokens.icon.js.map
|
|
23
|
+
//# 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
|
|
@@ -2,12 +2,12 @@ import { styleFunction } from '@uifabricshared/foundation-tokens';
|
|
|
2
2
|
import { calculateEffectiveSizes } from './PersonaCoin.helpers';
|
|
3
3
|
const _initialsKeyProps = ['coinSize', 'initialsSize', 'size'];
|
|
4
4
|
function _buildInitialsStyles(tokenProps /*, theme: ITheme */) {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
5
|
+
const { initialsSize } = calculateEffectiveSizes(tokenProps);
|
|
6
|
+
return {
|
|
7
|
+
style: {
|
|
8
|
+
fontSize: initialsSize,
|
|
9
|
+
},
|
|
10
|
+
};
|
|
11
11
|
}
|
|
12
12
|
export const buildInitialsStyles = styleFunction(_buildInitialsStyles, _initialsKeyProps);
|
|
13
|
-
//# sourceMappingURL=PersonaCoin.tokens.initials.js.map
|
|
13
|
+
//# 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
|