@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
|
@@ -1,30 +1,31 @@
|
|
|
1
|
-
|
|
2
|
-
Object.defineProperty(exports,
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.buildInitialsBackgroundStyles = 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 _initialsBackgroundKeyProps = ['coinSize', 'size', 'coinColor', 'coinColorFluent', 'backgroundColor'];
|
|
7
7
|
function _buildInitialsBackgroundStyles(tokenProps /*, theme: ITheme*/) {
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
8
|
+
const { physicalSize } = (0, PersonaCoin_helpers_1.calculateEffectiveSizes)(tokenProps);
|
|
9
|
+
const { backgroundColor, coinColor, coinColorFluent } = tokenProps;
|
|
10
|
+
let effectiveBackgroundColor = backgroundColor;
|
|
11
|
+
if (coinColorFluent) {
|
|
12
|
+
effectiveBackgroundColor = (0, PersonaCoin_helpers_1.convertCoinColorFluent)(coinColorFluent);
|
|
13
|
+
}
|
|
14
|
+
else if (coinColor) {
|
|
15
|
+
effectiveBackgroundColor = (0, PersonaCoin_helpers_1.convertCoinColor)(coinColor);
|
|
16
|
+
}
|
|
17
|
+
return {
|
|
18
|
+
style: {
|
|
19
|
+
borderRadius: physicalSize / 2,
|
|
20
|
+
width: physicalSize,
|
|
21
|
+
height: physicalSize,
|
|
22
|
+
flexGrow: 1,
|
|
23
|
+
alignSelf: 'stretch',
|
|
24
|
+
justifyContent: 'center',
|
|
25
|
+
alignItems: 'center',
|
|
26
|
+
backgroundColor: effectiveBackgroundColor,
|
|
27
|
+
},
|
|
28
|
+
};
|
|
28
29
|
}
|
|
29
30
|
exports.buildInitialsBackgroundStyles = (0, foundation_tokens_1.styleFunction)(_buildInitialsBackgroundStyles, _initialsBackgroundKeyProps);
|
|
30
|
-
//# sourceMappingURL=PersonaCoin.tokens.initialsBackground.js.map
|
|
31
|
+
//# sourceMappingURL=PersonaCoin.tokens.initialsBackground.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 buildPhotoStyles: import(
|
|
5
|
-
//# sourceMappingURL=PersonaCoin.tokens.photo.d.ts.map
|
|
4
|
+
export declare const buildPhotoStyles: import("@fluentui-react-native/tokens").StyleFactoryFunction<ImageProps, IPersonaCoinTokens, Theme>;
|
|
5
|
+
//# sourceMappingURL=PersonaCoin.tokens.photo.d.ts.map
|
|
@@ -1,20 +1,20 @@
|
|
|
1
|
-
|
|
2
|
-
Object.defineProperty(exports,
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.buildPhotoStyles = 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 _photoKeyProps = ['coinSize', 'size'];
|
|
7
7
|
function _buildPhotoStyles(tokenProps /*, theme: ITheme */) {
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
8
|
+
const { physicalSize } = (0, PersonaCoin_helpers_1.calculateEffectiveSizes)(tokenProps);
|
|
9
|
+
return {
|
|
10
|
+
source: {},
|
|
11
|
+
style: {
|
|
12
|
+
borderRadius: physicalSize / 2,
|
|
13
|
+
width: physicalSize,
|
|
14
|
+
height: physicalSize,
|
|
15
|
+
},
|
|
16
|
+
resizeMode: 'cover',
|
|
17
|
+
};
|
|
18
18
|
}
|
|
19
19
|
exports.buildPhotoStyles = (0, foundation_tokens_1.styleFunction)(_buildPhotoStyles, _photoKeyProps);
|
|
20
|
-
//# sourceMappingURL=PersonaCoin.tokens.photo.js.map
|
|
20
|
+
//# sourceMappingURL=PersonaCoin.tokens.photo.js.map
|
|
@@ -1,6 +1,6 @@
|
|
|
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 buildRingStyles: import(
|
|
5
|
-
export declare const buildGlowStyles: import(
|
|
6
|
-
//# sourceMappingURL=PersonaCoin.tokens.ring.d.ts.map
|
|
4
|
+
export declare const buildRingStyles: import("@fluentui-react-native/tokens").StyleFactoryFunction<ViewProps, IPersonaCoinTokens, Theme>;
|
|
5
|
+
export declare const buildGlowStyles: import("@fluentui-react-native/tokens").StyleFactoryFunction<ViewProps, IPersonaCoinTokens, Theme>;
|
|
6
|
+
//# sourceMappingURL=PersonaCoin.tokens.ring.d.ts.map
|
|
@@ -1,59 +1,55 @@
|
|
|
1
|
-
|
|
2
|
-
Object.defineProperty(exports,
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.buildGlowStyles = exports.buildRingStyles = 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 _ringProps = ['coinSize', 'size', 'ring'];
|
|
7
7
|
function _buildRingStyles(tokenProps, theme) {
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
ring.innerGap != undefined
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
},
|
|
30
|
-
};
|
|
8
|
+
const { physicalSize } = (0, PersonaCoin_helpers_1.calculateEffectiveSizes)(tokenProps);
|
|
9
|
+
const { ring } = tokenProps;
|
|
10
|
+
if (!ring)
|
|
11
|
+
return {};
|
|
12
|
+
const innerGap = ring.innerGap != undefined ? (0, PersonaCoin_helpers_1.getRingThickness)(ring.innerGap) : (0, PersonaCoin_helpers_1.getRingThickness)(ring.ringThickness || 'xxlarge');
|
|
13
|
+
const effectiveRingThickness = 2 * (0, PersonaCoin_helpers_1.getRingThickness)(ring.ringThickness || 'xxlarge') + innerGap;
|
|
14
|
+
const effectiveSize = physicalSize + 2 * effectiveRingThickness;
|
|
15
|
+
const ringColor = ring.ringBackgroundColor || theme.colors.personaActivityRing;
|
|
16
|
+
return {
|
|
17
|
+
style: {
|
|
18
|
+
borderStyle: 'solid',
|
|
19
|
+
borderColor: ringColor,
|
|
20
|
+
borderWidth: effectiveRingThickness,
|
|
21
|
+
borderRadius: effectiveSize / 2,
|
|
22
|
+
width: effectiveSize,
|
|
23
|
+
height: effectiveSize,
|
|
24
|
+
position: 'absolute',
|
|
25
|
+
top: -effectiveRingThickness,
|
|
26
|
+
left: -effectiveRingThickness,
|
|
27
|
+
},
|
|
28
|
+
};
|
|
31
29
|
}
|
|
32
30
|
function _buildGlowStyles(tokenProps, theme) {
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
ring.innerGap != undefined
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
},
|
|
55
|
-
};
|
|
31
|
+
const { physicalSize } = (0, PersonaCoin_helpers_1.calculateEffectiveSizes)(tokenProps);
|
|
32
|
+
const { ring } = tokenProps;
|
|
33
|
+
if (!ring)
|
|
34
|
+
return {};
|
|
35
|
+
const innerGap = ring.innerGap != undefined ? (0, PersonaCoin_helpers_1.getRingThickness)(ring.innerGap) : (0, PersonaCoin_helpers_1.getRingThickness)(ring.ringThickness || 'xxlarge');
|
|
36
|
+
const effectiveRingThickness = (0, PersonaCoin_helpers_1.getRingThickness)(ring.ringThickness || 'xxlarge') + innerGap;
|
|
37
|
+
const effectiveSize = physicalSize + 2 * effectiveRingThickness;
|
|
38
|
+
const glowColor = ring.accent ? theme.colors.accentButtonBackground : ring.ringColor || theme.colors.personaActivityGlow;
|
|
39
|
+
return {
|
|
40
|
+
style: {
|
|
41
|
+
borderStyle: 'solid',
|
|
42
|
+
borderColor: glowColor,
|
|
43
|
+
borderWidth: effectiveRingThickness - innerGap,
|
|
44
|
+
borderRadius: effectiveSize / 2,
|
|
45
|
+
width: effectiveSize,
|
|
46
|
+
height: effectiveSize,
|
|
47
|
+
position: 'absolute',
|
|
48
|
+
top: -effectiveRingThickness,
|
|
49
|
+
left: -effectiveRingThickness,
|
|
50
|
+
},
|
|
51
|
+
};
|
|
56
52
|
}
|
|
57
53
|
exports.buildRingStyles = (0, foundation_tokens_1.styleFunction)(_buildRingStyles, _ringProps);
|
|
58
54
|
exports.buildGlowStyles = (0, foundation_tokens_1.styleFunction)(_buildGlowStyles, _ringProps);
|
|
59
|
-
//# sourceMappingURL=PersonaCoin.tokens.ring.js.map
|
|
55
|
+
//# sourceMappingURL=PersonaCoin.tokens.ring.js.map
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { IViewProps } from '@fluentui-react-native/adapters';
|
|
2
2
|
import type { Theme } from '@fluentui-react-native/framework';
|
|
3
3
|
import type { IPersonaCoinTokens } from './PersonaCoin.types';
|
|
4
|
-
export declare const buildRootStyles: import(
|
|
5
|
-
//# sourceMappingURL=PersonaCoin.tokens.root.d.ts.map
|
|
4
|
+
export declare const buildRootStyles: import("@fluentui-react-native/tokens").StyleFactoryFunction<IViewProps, IPersonaCoinTokens, Theme>;
|
|
5
|
+
//# sourceMappingURL=PersonaCoin.tokens.root.d.ts.map
|
|
@@ -1,25 +1,25 @@
|
|
|
1
|
-
|
|
2
|
-
Object.defineProperty(exports,
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.buildRootStyles = 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 nameMap = {
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
7
|
+
start: 'flex-start',
|
|
8
|
+
center: 'center',
|
|
9
|
+
end: 'flex-end',
|
|
10
10
|
};
|
|
11
11
|
const _rootKeyProps = ['coinSize', 'size', 'horizontalIconAlignment', 'verticalIconAlignment'];
|
|
12
12
|
function _buildRootStyles(tokenProps /*, theme: ITheme */) {
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
13
|
+
const rootStyle = {
|
|
14
|
+
flexDirection: 'row',
|
|
15
|
+
};
|
|
16
|
+
const { physicalSize } = (0, PersonaCoin_helpers_1.calculateEffectiveSizes)(tokenProps);
|
|
17
|
+
rootStyle.width = physicalSize;
|
|
18
|
+
rootStyle.height = physicalSize;
|
|
19
|
+
const { horizontalIconAlignment, verticalIconAlignment } = tokenProps;
|
|
20
|
+
rootStyle.justifyContent = nameMap[horizontalIconAlignment || 'end'];
|
|
21
|
+
rootStyle.alignItems = nameMap[verticalIconAlignment || 'end'];
|
|
22
|
+
return { style: rootStyle };
|
|
23
23
|
}
|
|
24
24
|
exports.buildRootStyles = (0, foundation_tokens_1.styleFunction)(_buildRootStyles, _rootKeyProps);
|
|
25
|
-
//# sourceMappingURL=PersonaCoin.tokens.root.js.map
|
|
25
|
+
//# sourceMappingURL=PersonaCoin.tokens.root.js.map
|
|
@@ -2,114 +2,74 @@ import type { ImageProps, ViewProps, ImageURISource, TextProps, ColorValue } fro
|
|
|
2
2
|
import type { IViewProps } from '@fluentui-react-native/adapters';
|
|
3
3
|
import type { IBackgroundColorTokens, IForegroundColorTokens } from '@fluentui-react-native/tokens';
|
|
4
4
|
import type { IRenderData } from '@uifabricshared/foundation-composable';
|
|
5
|
-
export declare const personaCoinName =
|
|
5
|
+
export declare const personaCoinName = "RNFPersonaCoin";
|
|
6
6
|
export type PersonaSize = 'size8' | 'size24' | 'size32' | 'size40' | 'size48' | 'size56' | 'size72' | 'size100' | 'size120';
|
|
7
7
|
/**
|
|
8
8
|
* Sets color of the coin when there is no picture
|
|
9
9
|
* @deprecated Use PersonaCoinFluentColor instead.
|
|
10
10
|
*/
|
|
11
|
-
export type PersonaCoinColor =
|
|
12
|
-
| 'lightBlue'
|
|
13
|
-
| 'blue'
|
|
14
|
-
| 'darkBlue'
|
|
15
|
-
| 'teal'
|
|
16
|
-
| 'green'
|
|
17
|
-
| 'darkGreen'
|
|
18
|
-
| 'lightPink'
|
|
19
|
-
| 'pink'
|
|
20
|
-
| 'magenta'
|
|
21
|
-
| 'purple'
|
|
22
|
-
| 'orange'
|
|
23
|
-
| 'darkRed'
|
|
24
|
-
| 'violet'
|
|
25
|
-
| 'lightRed'
|
|
26
|
-
| 'gold'
|
|
27
|
-
| 'burgundy'
|
|
28
|
-
| 'warmGray'
|
|
29
|
-
| 'coolGray'
|
|
30
|
-
| 'cyan'
|
|
31
|
-
| 'rust';
|
|
11
|
+
export type PersonaCoinColor = 'lightBlue' | 'blue' | 'darkBlue' | 'teal' | 'green' | 'darkGreen' | 'lightPink' | 'pink' | 'magenta' | 'purple' | 'orange' | 'darkRed' | 'violet' | 'lightRed' | 'gold' | 'burgundy' | 'warmGray' | 'coolGray' | 'cyan' | 'rust';
|
|
32
12
|
/**
|
|
33
13
|
* Sets color of the coin when there is no picture. Uses fluent color names
|
|
34
14
|
*/
|
|
35
|
-
export type PersonaCoinFluentColor =
|
|
36
|
-
| 'cornflower'
|
|
37
|
-
| 'blue'
|
|
38
|
-
| 'royalBlue'
|
|
39
|
-
| 'teal'
|
|
40
|
-
| 'forest'
|
|
41
|
-
| 'darkGreen'
|
|
42
|
-
| 'berry'
|
|
43
|
-
| 'hotPink'
|
|
44
|
-
| 'grape'
|
|
45
|
-
| 'purple'
|
|
46
|
-
| 'pumpkin'
|
|
47
|
-
| 'red'
|
|
48
|
-
| 'burgundy'
|
|
49
|
-
| 'orchid'
|
|
50
|
-
| 'brass'
|
|
51
|
-
| 'darkRed'
|
|
52
|
-
| 'beige'
|
|
53
|
-
| 'platinum'
|
|
54
|
-
| 'steel'
|
|
55
|
-
| 'brown';
|
|
15
|
+
export type PersonaCoinFluentColor = 'cornflower' | 'blue' | 'royalBlue' | 'teal' | 'forest' | 'darkGreen' | 'berry' | 'hotPink' | 'grape' | 'purple' | 'pumpkin' | 'red' | 'burgundy' | 'orchid' | 'brass' | 'darkRed' | 'beige' | 'platinum' | 'steel' | 'brown';
|
|
56
16
|
export type PersonaPresence = 'none' | 'offline' | 'online' | 'away' | 'dnd' | 'blocked' | 'busy';
|
|
57
17
|
export type RingThickness = number | 'xSmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge';
|
|
58
18
|
export interface RingConfig {
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
19
|
+
accent?: boolean;
|
|
20
|
+
transparent?: boolean;
|
|
21
|
+
ringColor?: ColorValue;
|
|
22
|
+
ringBackgroundColor?: ColorValue;
|
|
23
|
+
ringThickness?: RingThickness;
|
|
24
|
+
innerGap?: RingThickness;
|
|
65
25
|
}
|
|
66
26
|
export interface IPersonaConfigurableProps {
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
27
|
+
size?: PersonaSize;
|
|
28
|
+
/**
|
|
29
|
+
* Sets color of the coin when there is no picture
|
|
30
|
+
* @deprecated Use coinColorFluent instead
|
|
31
|
+
*/
|
|
32
|
+
coinColor?: PersonaCoinColor;
|
|
33
|
+
ring?: RingConfig;
|
|
34
|
+
coinColorFluent?: PersonaCoinFluentColor;
|
|
75
35
|
}
|
|
76
36
|
export interface IPersonaCoinProps extends IViewProps, IPersonaConfigurableProps {
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
37
|
+
imageUrl?: string;
|
|
38
|
+
imageDescription?: string;
|
|
39
|
+
initials?: string;
|
|
40
|
+
presence?: PersonaPresence;
|
|
41
|
+
isOutOfOffice?: boolean;
|
|
82
42
|
}
|
|
83
43
|
export interface IPersonaCoinSlotProps {
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
44
|
+
root: ViewProps;
|
|
45
|
+
photo: ImageProps;
|
|
46
|
+
initials: TextProps;
|
|
47
|
+
initialsBackground: ViewProps;
|
|
48
|
+
icon: ImageProps;
|
|
49
|
+
ring: ViewProps;
|
|
50
|
+
glow: ViewProps;
|
|
91
51
|
}
|
|
92
52
|
export type IconAlignment = 'start' | 'center' | 'end';
|
|
93
53
|
export interface IPersonaCoinTokens extends IBackgroundColorTokens, IForegroundColorTokens, IPersonaConfigurableProps {
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
54
|
+
coinSize?: number;
|
|
55
|
+
iconSize?: number;
|
|
56
|
+
iconStrokeWidth?: number;
|
|
57
|
+
iconStrokeColor?: string;
|
|
58
|
+
initialsSize?: number;
|
|
59
|
+
horizontalIconAlignment?: IconAlignment;
|
|
60
|
+
verticalIconAlignment?: IconAlignment;
|
|
101
61
|
}
|
|
102
62
|
export interface IPersonaCoinState {
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
63
|
+
personaPhotoSource: ImageURISource | undefined;
|
|
64
|
+
iconSource: ImageURISource | undefined;
|
|
65
|
+
showRing: boolean;
|
|
66
|
+
transparentRing: boolean;
|
|
107
67
|
}
|
|
108
68
|
export interface IPersonaCoinType {
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
69
|
+
props: IPersonaCoinProps;
|
|
70
|
+
slotProps: IPersonaCoinSlotProps;
|
|
71
|
+
tokens: IPersonaCoinTokens;
|
|
72
|
+
state: IPersonaCoinState;
|
|
113
73
|
}
|
|
114
74
|
export type IPersonaCoinRenderData = IRenderData<IPersonaCoinSlotProps, IPersonaCoinState>;
|
|
115
|
-
//# sourceMappingURL=PersonaCoin.types.d.ts.map
|
|
75
|
+
//# sourceMappingURL=PersonaCoin.types.d.ts.map
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
Object.defineProperty(exports,
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.personaCoinName = void 0;
|
|
4
4
|
exports.personaCoinName = 'RNFPersonaCoin';
|
|
5
|
-
//# sourceMappingURL=PersonaCoin.types.js.map
|
|
5
|
+
//# sourceMappingURL=PersonaCoin.types.js.map
|
package/lib-commonjs/index.d.ts
CHANGED
|
@@ -1,20 +1,5 @@
|
|
|
1
1
|
export { PersonaCoin } from './PersonaCoin';
|
|
2
2
|
export { personaCoinName } from './PersonaCoin.types';
|
|
3
|
-
export type {
|
|
4
|
-
IPersonaCoinProps,
|
|
5
|
-
IPersonaCoinRenderData,
|
|
6
|
-
IPersonaCoinSlotProps,
|
|
7
|
-
IPersonaCoinState,
|
|
8
|
-
IPersonaCoinTokens,
|
|
9
|
-
IPersonaCoinType,
|
|
10
|
-
IPersonaConfigurableProps,
|
|
11
|
-
IconAlignment,
|
|
12
|
-
PersonaCoinColor,
|
|
13
|
-
PersonaCoinFluentColor,
|
|
14
|
-
PersonaPresence,
|
|
15
|
-
PersonaSize,
|
|
16
|
-
RingConfig,
|
|
17
|
-
RingThickness,
|
|
18
|
-
} from './PersonaCoin.types';
|
|
3
|
+
export type { IPersonaCoinProps, IPersonaCoinRenderData, IPersonaCoinSlotProps, IPersonaCoinState, IPersonaCoinTokens, IPersonaCoinType, IPersonaConfigurableProps, IconAlignment, PersonaCoinColor, PersonaCoinFluentColor, PersonaPresence, PersonaSize, RingConfig, RingThickness, } from './PersonaCoin.types';
|
|
19
4
|
export { buildRootStyles } from './PersonaCoin.tokens.root';
|
|
20
|
-
//# sourceMappingURL=index.d.ts.map
|
|
5
|
+
//# sourceMappingURL=index.d.ts.map
|
package/lib-commonjs/index.js
CHANGED
|
@@ -1,25 +1,10 @@
|
|
|
1
|
-
|
|
2
|
-
Object.defineProperty(exports,
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.buildRootStyles = exports.personaCoinName = exports.PersonaCoin = void 0;
|
|
4
|
-
const PersonaCoin_1 = require(
|
|
5
|
-
Object.defineProperty(exports,
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
const PersonaCoin_types_1 = require('./PersonaCoin.types');
|
|
12
|
-
Object.defineProperty(exports, 'personaCoinName', {
|
|
13
|
-
enumerable: true,
|
|
14
|
-
get: function () {
|
|
15
|
-
return PersonaCoin_types_1.personaCoinName;
|
|
16
|
-
},
|
|
17
|
-
});
|
|
18
|
-
const PersonaCoin_tokens_root_1 = require('./PersonaCoin.tokens.root');
|
|
19
|
-
Object.defineProperty(exports, 'buildRootStyles', {
|
|
20
|
-
enumerable: true,
|
|
21
|
-
get: function () {
|
|
22
|
-
return PersonaCoin_tokens_root_1.buildRootStyles;
|
|
23
|
-
},
|
|
24
|
-
});
|
|
25
|
-
//# sourceMappingURL=index.js.map
|
|
4
|
+
const PersonaCoin_1 = require("./PersonaCoin");
|
|
5
|
+
Object.defineProperty(exports, "PersonaCoin", { enumerable: true, get: function () { return PersonaCoin_1.PersonaCoin; } });
|
|
6
|
+
const PersonaCoin_types_1 = require("./PersonaCoin.types");
|
|
7
|
+
Object.defineProperty(exports, "personaCoinName", { enumerable: true, get: function () { return PersonaCoin_types_1.personaCoinName; } });
|
|
8
|
+
const PersonaCoin_tokens_root_1 = require("./PersonaCoin.tokens.root");
|
|
9
|
+
Object.defineProperty(exports, "buildRootStyles", { enumerable: true, get: function () { return PersonaCoin_tokens_root_1.buildRootStyles; } });
|
|
10
|
+
//# sourceMappingURL=index.js.map
|
package/package.json
CHANGED
|
@@ -1,69 +1,70 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui-react-native/persona-coin",
|
|
3
|
-
"version": "0.16.
|
|
3
|
+
"version": "0.16.3",
|
|
4
4
|
"description": "A cross-platform PersonaCoin component using the Fluent Design System",
|
|
5
|
+
"license": "MIT",
|
|
6
|
+
"author": "",
|
|
5
7
|
"repository": {
|
|
6
8
|
"type": "git",
|
|
7
9
|
"url": "https://github.com/microsoft/fluentui-react-native.git",
|
|
8
10
|
"directory": "packages/components/PersonaCoin"
|
|
9
11
|
},
|
|
10
|
-
"
|
|
11
|
-
"
|
|
12
|
+
"main": "lib-commonjs/index.js",
|
|
13
|
+
"module": "lib/index.js",
|
|
14
|
+
"types": "lib/index.d.ts",
|
|
12
15
|
"exports": {
|
|
13
16
|
".": {
|
|
14
17
|
"types": "./lib/index.d.ts",
|
|
15
18
|
"import": "./lib/index.js",
|
|
16
|
-
"require": "./lib-commonjs/index.js"
|
|
19
|
+
"require": "./lib-commonjs/index.js",
|
|
20
|
+
"default": "./src/index.ts"
|
|
17
21
|
}
|
|
18
22
|
},
|
|
19
|
-
"main": "lib-commonjs/index.js",
|
|
20
|
-
"module": "lib/index.js",
|
|
21
|
-
"types": "lib/index.d.ts",
|
|
22
23
|
"scripts": {
|
|
23
24
|
"build": "fluentui-scripts build",
|
|
24
25
|
"build-cjs": "tsgo --outDir lib-commonjs",
|
|
25
|
-
"build-
|
|
26
|
+
"build-core": "tsgo --outDir lib --module esnext --moduleResolution bundler",
|
|
26
27
|
"clean": "fluentui-scripts clean",
|
|
27
28
|
"depcheck": "fluentui-scripts depcheck",
|
|
28
|
-
"
|
|
29
|
+
"format": "fluentui-scripts format",
|
|
30
|
+
"lint": "fluentui-scripts lint",
|
|
29
31
|
"lint-package": "fluentui-scripts lint-package",
|
|
30
|
-
"prettier": "fluentui-scripts prettier",
|
|
31
32
|
"test": "fluentui-scripts jest",
|
|
32
33
|
"update-snapshots": "fluentui-scripts jest -u"
|
|
33
34
|
},
|
|
34
35
|
"dependencies": {
|
|
35
|
-
"@fluentui-react-native/adapters": "0.14.
|
|
36
|
-
"@fluentui-react-native/framework": "0.15.
|
|
37
|
-
"@fluentui-react-native/theme-tokens": "0.28.
|
|
38
|
-
"@fluentui-react-native/tokens": "0.24.
|
|
39
|
-
"@uifabricshared/foundation-composable": "0.14.
|
|
40
|
-
"@uifabricshared/foundation-compose": "1.16.
|
|
41
|
-
"@uifabricshared/foundation-settings": "0.16.
|
|
42
|
-
"@uifabricshared/foundation-tokens": "0.16.
|
|
36
|
+
"@fluentui-react-native/adapters": "0.14.3",
|
|
37
|
+
"@fluentui-react-native/framework": "0.15.3",
|
|
38
|
+
"@fluentui-react-native/theme-tokens": "0.28.3",
|
|
39
|
+
"@fluentui-react-native/tokens": "0.24.3",
|
|
40
|
+
"@uifabricshared/foundation-composable": "0.14.3",
|
|
41
|
+
"@uifabricshared/foundation-compose": "1.16.3",
|
|
42
|
+
"@uifabricshared/foundation-settings": "0.16.3",
|
|
43
|
+
"@uifabricshared/foundation-tokens": "0.16.3"
|
|
43
44
|
},
|
|
44
45
|
"devDependencies": {
|
|
45
46
|
"@babel/core": "^7.20.0",
|
|
46
47
|
"@fluentui-react-native/babel-config": "0.1.1",
|
|
47
|
-
"@fluentui-react-native/
|
|
48
|
-
"@fluentui-react-native/framework-base": "0.3.0",
|
|
48
|
+
"@fluentui-react-native/framework-base": "0.3.3",
|
|
49
49
|
"@fluentui-react-native/kit-config": "0.1.2",
|
|
50
|
-
"@fluentui-react-native/
|
|
50
|
+
"@fluentui-react-native/lint-config-rules": "0.1.3",
|
|
51
|
+
"@fluentui-react-native/scripts": "0.1.0",
|
|
51
52
|
"@office-iss/react-native-win32": "^0.74.0",
|
|
52
53
|
"@react-native-community/cli": "^20.0.0",
|
|
53
54
|
"@react-native-community/cli-platform-android": "^20.0.0",
|
|
54
55
|
"@react-native-community/cli-platform-ios": "^20.0.0",
|
|
55
56
|
"@react-native/metro-config": "^0.81.0",
|
|
56
|
-
"@types/react": "~19.1.
|
|
57
|
-
"react": "19.1.
|
|
58
|
-
"react-native": "^0.81.
|
|
57
|
+
"@types/react": "~19.1.4",
|
|
58
|
+
"react": "19.1.4",
|
|
59
|
+
"react-native": "^0.81.6",
|
|
59
60
|
"react-native-macos": "^0.81.0",
|
|
60
61
|
"react-native-windows": "^0.81.0"
|
|
61
62
|
},
|
|
62
63
|
"peerDependencies": {
|
|
63
64
|
"@office-iss/react-native-win32": "^0.74.0",
|
|
64
|
-
"@types/react": "~18.2.0 || ~19.0.0 || ~19.1.
|
|
65
|
-
"react": "18.2.0 || 19.0.0 || 19.1.
|
|
66
|
-
"react-native": "^0.73.0 || ^0.74.0 || ^0.78.0 || ^0.81.
|
|
65
|
+
"@types/react": "~18.2.0 || ~19.0.0 || ~19.1.4",
|
|
66
|
+
"react": "18.2.0 || 19.0.0 || 19.1.4",
|
|
67
|
+
"react-native": "^0.73.0 || ^0.74.0 || ^0.78.0 || ^0.81.6",
|
|
67
68
|
"react-native-macos": "^0.73.0 || ^0.74.0 || ^0.78.0 || ^0.81.0",
|
|
68
69
|
"react-native-windows": "^0.73.0 || ^0.74.0 || ^0.78.0 || ^0.81.0"
|
|
69
70
|
},
|
package/eslint.config.js
DELETED