@fluentui-react-native/experimental-avatar 0.21.19 → 0.22.0
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 +36 -0
- package/lib/AvatarNative.types.d.ts +11 -0
- package/lib/AvatarNative.types.d.ts.map +1 -0
- package/lib/AvatarNative.types.js +2 -0
- package/lib/AvatarNative.types.js.map +1 -0
- package/lib/AvatarNativeComponent.d.ts +3 -16
- package/lib/AvatarNativeComponent.d.ts.map +1 -1
- package/lib/AvatarNativeComponent.ios.d.ts +1 -0
- package/lib/AvatarNativeComponent.ios.d.ts.map +1 -0
- package/lib/AvatarNativeComponent.ios.js +2 -0
- package/lib/AvatarNativeComponent.ios.js.map +1 -0
- package/lib/AvatarNativeComponent.js +3 -8
- package/lib/AvatarNativeComponent.js.map +1 -1
- package/lib/AvatarNativeComponent.macos.d.ts +5 -0
- package/lib/AvatarNativeComponent.macos.d.ts.map +1 -0
- package/lib/AvatarNativeComponent.macos.js +3 -0
- package/lib/AvatarNativeComponent.macos.js.map +1 -0
- package/lib/NativeAvatar.d.ts +67 -63
- package/lib/NativeAvatar.d.ts.map +1 -1
- package/lib/NativeAvatar.js +28 -24
- package/lib/NativeAvatar.js.map +1 -1
- package/lib/index.d.ts +1 -1
- package/lib/index.js +1 -1
- package/lib-commonjs/AvatarNative.types.d.ts +11 -0
- package/lib-commonjs/AvatarNative.types.d.ts.map +1 -0
- package/lib-commonjs/AvatarNative.types.js +3 -0
- package/lib-commonjs/AvatarNative.types.js.map +1 -0
- package/lib-commonjs/AvatarNativeComponent.d.ts +3 -16
- package/lib-commonjs/AvatarNativeComponent.d.ts.map +1 -1
- package/lib-commonjs/AvatarNativeComponent.ios.d.ts +2 -0
- package/lib-commonjs/AvatarNativeComponent.ios.d.ts.map +1 -0
- package/lib-commonjs/AvatarNativeComponent.ios.js +3 -0
- package/lib-commonjs/AvatarNativeComponent.ios.js.map +1 -0
- package/lib-commonjs/AvatarNativeComponent.js +5 -13
- package/lib-commonjs/AvatarNativeComponent.js.map +1 -1
- package/lib-commonjs/AvatarNativeComponent.macos.d.ts +5 -0
- package/lib-commonjs/AvatarNativeComponent.macos.d.ts.map +1 -0
- package/lib-commonjs/AvatarNativeComponent.macos.js +10 -0
- package/lib-commonjs/AvatarNativeComponent.macos.js.map +1 -0
- package/lib-commonjs/NativeAvatar.d.ts +67 -63
- package/lib-commonjs/NativeAvatar.d.ts.map +1 -1
- package/lib-commonjs/NativeAvatar.js +39 -32
- package/lib-commonjs/NativeAvatar.js.map +1 -1
- package/lib-commonjs/index.d.ts +1 -1
- package/lib-commonjs/index.js +16 -6
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +56 -58
- package/src/AvatarNative.types.ts +13 -0
- package/src/AvatarNativeComponent.ios.ts +0 -0
- package/src/AvatarNativeComponent.macos.ts +5 -0
- package/src/AvatarNativeComponent.ts +4 -21
- package/src/NativeAvatar.tsx +2 -3
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,41 @@
|
|
|
1
1
|
# Change Log - @fluentui-react-native/experimental-avatar
|
|
2
2
|
|
|
3
|
+
## 0.22.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- d7adbdd: # Migration from Beachball to Changesets
|
|
8
|
+
|
|
9
|
+
This changeset represents the migration from Beachball to Changesets for version management and consolidates all changes from 440+ beachball change files that were in the `change/` directory.
|
|
10
|
+
|
|
11
|
+
All 75 affected packages receive a minor version bump to acknowledge the accumulated changes from the beachball era.
|
|
12
|
+
|
|
13
|
+
## What Changed
|
|
14
|
+
|
|
15
|
+
Going forward, all version management uses Changesets via `yarn changeset`. The following beachball infrastructure has been removed:
|
|
16
|
+
|
|
17
|
+
- ❌ 440+ beachball change files from `change/` directory
|
|
18
|
+
- ❌ `beachball` package dependency
|
|
19
|
+
- ❌ Beachball scripts from `package.json`
|
|
20
|
+
- ❌ `beachball.config.js` configuration file
|
|
21
|
+
- ❌ Beachball publish steps from Azure Pipelines
|
|
22
|
+
|
|
23
|
+
## New Workflow
|
|
24
|
+
|
|
25
|
+
✅ **Create changes**: Run `yarn changeset` to document changes
|
|
26
|
+
✅ **Version bump PRs**: Automatically created by GitHub Actions
|
|
27
|
+
✅ **Publishing**: Handled by Azure Pipelines using `changeset publish`
|
|
28
|
+
✅ **Validation**: CI validates changesets and blocks major version bumps
|
|
29
|
+
|
|
30
|
+
For details, see `CHANGESETS_SETUP.md` and `CONTRIBUTING.md`.
|
|
31
|
+
|
|
32
|
+
### Patch Changes
|
|
33
|
+
|
|
34
|
+
- d1d8c26: We were pinning @types/react and react-native-macos via resolutions. This fixes that which uncovered a bunch of type inconsistencies that needed to be addressed.
|
|
35
|
+
- Updated dependencies [d7adbdd]
|
|
36
|
+
- Updated dependencies [d1d8c26]
|
|
37
|
+
- @fluentui-react-native/framework@0.15.0
|
|
38
|
+
|
|
3
39
|
<!-- This log was last generated on Tue, 05 Aug 2025 18:50:42 GMT and should not be manually modified. -->
|
|
4
40
|
|
|
5
41
|
<!-- Start content -->
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { ColorValue, ViewProps } from 'react-native';
|
|
2
|
+
import type { WithDefault } from 'react-native/Libraries/Types/CodegenTypes';
|
|
3
|
+
import type { ImageSource } from './codegenTypes';
|
|
4
|
+
export interface NativeProps extends ViewProps {
|
|
5
|
+
primaryText?: string;
|
|
6
|
+
secondaryText?: string;
|
|
7
|
+
imageSource?: ImageSource;
|
|
8
|
+
backgroundColor?: ColorValue;
|
|
9
|
+
size?: WithDefault<'size16' | 'size20' | 'size24' | 'size32' | 'size40' | 'size56' | 'size72', undefined>;
|
|
10
|
+
}
|
|
11
|
+
//# sourceMappingURL=AvatarNative.types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AvatarNative.types.d.ts","sourceRoot":"","sources":["../src/AvatarNative.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE1D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,2CAA2C,CAAC;AAE7E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAElD,MAAM,WAAW,WAAY,SAAQ,SAAS;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,eAAe,CAAC,EAAE,UAAU,CAAC;IAC7B,IAAI,CAAC,EAAE,WAAW,CAAC,QAAQ,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,EAAE,SAAS,CAAC,CAAC;CAC3G"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AvatarNative.types.js","sourceRoot":"","sources":["../src/AvatarNative.types.ts"],"names":[],"mappings":""}
|
|
@@ -1,18 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
* Licensed under the MIT License.
|
|
4
|
-
* @format
|
|
5
|
-
*/
|
|
6
|
-
import type { ColorValue, HostComponent, ViewProps } from 'react-native';
|
|
7
|
-
import type { WithDefault } from 'react-native/Libraries/Types/CodegenTypes';
|
|
8
|
-
import type { ImageSource } from './codegenTypes';
|
|
9
|
-
export interface NativeProps extends ViewProps {
|
|
10
|
-
primaryText?: string;
|
|
11
|
-
secondaryText?: string;
|
|
12
|
-
imageSource?: ImageSource;
|
|
13
|
-
backgroundColor?: ColorValue;
|
|
14
|
-
size?: WithDefault<'size16' | 'size20' | 'size24' | 'size32' | 'size40' | 'size56' | 'size72', undefined>;
|
|
15
|
-
}
|
|
1
|
+
import type { HostComponent } from 'react-native';
|
|
2
|
+
import type { NativeProps } from './AvatarNative.types';
|
|
16
3
|
declare const _default: HostComponent<NativeProps>;
|
|
17
4
|
export default _default;
|
|
18
|
-
//# sourceMappingURL=AvatarNativeComponent.d.ts.map
|
|
5
|
+
//# sourceMappingURL=AvatarNativeComponent.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarNativeComponent.d.ts","sourceRoot":"","sources":["../src/AvatarNativeComponent.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"AvatarNativeComponent.d.ts","sourceRoot":"","sources":["../src/AvatarNativeComponent.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;;AAGxD,wBAAkG"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
//# sourceMappingURL=AvatarNativeComponent.ios.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AvatarNativeComponent.ios.d.ts","sourceRoot":"","sources":["../src/AvatarNativeComponent.ios.ts"],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AvatarNativeComponent.ios.js","sourceRoot":"","sources":["../src/AvatarNativeComponent.ios.ts"],"names":[],"mappings":""}
|
|
@@ -1,8 +1,3 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
* @format
|
|
5
|
-
*/
|
|
6
|
-
import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
|
|
7
|
-
export default codegenNativeComponent('FRNAvatarView');
|
|
8
|
-
//# sourceMappingURL=AvatarNativeComponent.js.map
|
|
1
|
+
import { requireNativeComponent } from 'react-native';
|
|
2
|
+
export default requireNativeComponent('FRNAvatarView');
|
|
3
|
+
//# sourceMappingURL=AvatarNativeComponent.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarNativeComponent.js","sourceRoot":"","sources":["../src/AvatarNativeComponent.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"AvatarNativeComponent.js","sourceRoot":"","sources":["../src/AvatarNativeComponent.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AAEtD,eAAe,sBAAsB,CAAc,eAAe,CAA+B,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AvatarNativeComponent.macos.d.ts","sourceRoot":"","sources":["../src/AvatarNativeComponent.macos.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;;AAGxD,wBAAkG"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AvatarNativeComponent.macos.js","sourceRoot":"","sources":["../src/AvatarNativeComponent.macos.ts"],"names":[],"mappings":"AAEA,OAAO,sBAAsB,MAAM,yDAAyD,CAAC;AAE7F,eAAe,sBAAsB,CAAc,eAAe,CAA+B,CAAC"}
|
package/lib/NativeAvatar.d.ts
CHANGED
|
@@ -3,76 +3,80 @@
|
|
|
3
3
|
* Licensed under the MIT License.
|
|
4
4
|
* @format
|
|
5
5
|
*/
|
|
6
|
-
/** @
|
|
7
|
-
/** @jsx withSlots */
|
|
6
|
+
/** @jsxImportSource @fluentui-react-native/framework-base */
|
|
8
7
|
import type { ImageURISource, ViewProps, ColorValue } from 'react-native';
|
|
9
|
-
export declare const Sizes: readonly [
|
|
8
|
+
export declare const Sizes: readonly ['size16', 'size20', 'size24', 'size32', 'size40', 'size56', 'size72'];
|
|
10
9
|
export type Size = (typeof Sizes)[number];
|
|
11
10
|
export type AvatarStyle = 'default' | 'accent' | 'group' | 'outlined' | 'outlinedPrimary' | 'overflow';
|
|
12
11
|
export type Presence = 'none' | 'available' | 'away' | 'blocked' | 'doNotDisturb' | 'offline' | 'unknown';
|
|
13
12
|
export type NativeAvatarTokens = {
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
13
|
+
/**
|
|
14
|
+
* Supported Avatar sizes
|
|
15
|
+
*/
|
|
16
|
+
size?: Size;
|
|
17
|
+
/**
|
|
18
|
+
* Supported Avatar styles
|
|
19
|
+
*/
|
|
20
|
+
avatarStyle?: AvatarStyle;
|
|
22
21
|
};
|
|
23
22
|
export type NativeAvatarProps = NativeAvatarTokens & {
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
23
|
+
/**
|
|
24
|
+
* The image to be displayed
|
|
25
|
+
*/
|
|
26
|
+
imageSource?: ImageURISource;
|
|
27
|
+
/**
|
|
28
|
+
* The primary text to create initials with (e.g. a name)
|
|
29
|
+
*/
|
|
30
|
+
primaryText?: string;
|
|
31
|
+
/**
|
|
32
|
+
* The secondary text to create initials with if primary text is not provided (e.g. an email address)
|
|
33
|
+
*/
|
|
34
|
+
secondaryText?: string;
|
|
35
|
+
/**
|
|
36
|
+
* A custom color for the ring around the Avatar
|
|
37
|
+
*/
|
|
38
|
+
ringColor?: ColorValue;
|
|
39
|
+
/**
|
|
40
|
+
* A custom color for the avatar initials when no image is shown
|
|
41
|
+
*/
|
|
42
|
+
foregroundColor?: ColorValue;
|
|
43
|
+
/**
|
|
44
|
+
* A custom color for the avatar background when no image is shown
|
|
45
|
+
*/
|
|
46
|
+
backgroundColor?: ColorValue;
|
|
47
|
+
/**
|
|
48
|
+
* The avatar view's presence state.
|
|
49
|
+
*/
|
|
50
|
+
presence?: Presence;
|
|
51
|
+
/**
|
|
52
|
+
* A boolean inidicating whether the ring is visible
|
|
53
|
+
*/
|
|
54
|
+
isRingVisible?: boolean;
|
|
55
|
+
/**
|
|
56
|
+
* A boolean indicating whether the Inner Ring Gap is transparent
|
|
57
|
+
*/
|
|
58
|
+
isTransparent?: boolean;
|
|
59
|
+
/**
|
|
60
|
+
* A boolean indicating out of office status
|
|
61
|
+
*/
|
|
62
|
+
isOutOfOffice?: boolean;
|
|
63
|
+
/**
|
|
64
|
+
* A boolean indicating whether the gap between the avatar and ring is visible.
|
|
65
|
+
*/
|
|
66
|
+
hasRingInnerGap?: boolean;
|
|
67
|
+
/**
|
|
68
|
+
* An image to be shown as the backdrop of the ring, rather then a solid color.
|
|
69
|
+
* Takes precendence over `ringColor`
|
|
70
|
+
*/
|
|
71
|
+
customBorderImageSource?: ImageURISource;
|
|
73
72
|
};
|
|
74
73
|
export type NativeAvatarViewProps = ViewProps & NativeAvatarProps;
|
|
75
|
-
export declare const NativeAvatar: import(
|
|
74
|
+
export declare const NativeAvatar: import('@fluentui-react-native/framework').ComposableComponent<
|
|
75
|
+
NativeAvatarProps,
|
|
76
|
+
{
|
|
76
77
|
root: NativeAvatarViewProps;
|
|
77
|
-
},
|
|
78
|
-
|
|
78
|
+
},
|
|
79
|
+
NativeAvatarTokens,
|
|
80
|
+
import('@fluentui-react-native/framework-base').ObjectBase
|
|
81
|
+
>;
|
|
82
|
+
//# sourceMappingURL=NativeAvatar.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NativeAvatar.d.ts","sourceRoot":"","sources":["../src/NativeAvatar.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,
|
|
1
|
+
{"version":3,"file":"NativeAvatar.d.ts","sourceRoot":"","sources":["../src/NativeAvatar.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,6DAA6D;AAC7D,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAU1E,eAAO,MAAM,KAAK,iFAAkF,CAAC;AACrG,MAAM,MAAM,IAAI,GAAG,CAAC,OAAO,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC;AAE1C,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,UAAU,GAAG,iBAAiB,GAAG,UAAU,CAAC;AAEvG,MAAM,MAAM,QAAQ,GAAG,MAAM,GAAG,WAAW,GAAG,MAAM,GAAG,SAAS,GAAG,cAAc,GAAG,SAAS,GAAG,SAAS,CAAC;AAS1G,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;OAEG;IACH,IAAI,CAAC,EAAE,IAAI,CAAC;IAEZ;;OAEG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,kBAAkB,GAAG;IACnD;;OAEG;IACH,WAAW,CAAC,EAAE,cAAc,CAAC;IAE7B;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;OAEG;IACH,SAAS,CAAC,EAAE,UAAU,CAAC;IAEvB;;OAEG;IACH,eAAe,CAAC,EAAE,UAAU,CAAC;IAE7B;;OAEG;IACH,eAAe,CAAC,EAAE,UAAU,CAAC;IAE7B;;OAEG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IAEpB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;OAGG;IACH,uBAAuB,CAAC,EAAE,cAAc,CAAC;CAC1C,CAAC;AAIF,MAAM,MAAM,qBAAqB,GAAG,SAAS,GAAG,iBAAiB,CAAC;AAOlE,eAAO,MAAM,YAAY;;kFA4BvB,CAAC"}
|
package/lib/NativeAvatar.js
CHANGED
|
@@ -1,33 +1,37 @@
|
|
|
1
|
+
import { jsx as _jsx } from '@fluentui-react-native/framework-base/jsx-runtime';
|
|
1
2
|
import { NativeModules, TurboModuleRegistry } from 'react-native';
|
|
2
|
-
import { compose, buildProps, mergeProps
|
|
3
|
+
import { compose, buildProps, mergeProps } from '@fluentui-react-native/framework';
|
|
3
4
|
const avatarName = 'NativeAvatar';
|
|
4
5
|
import NativeAvatarView from './AvatarNativeComponent';
|
|
5
6
|
export const Sizes = ['size16', 'size20', 'size24', 'size32', 'size40', 'size56', 'size72'];
|
|
6
7
|
const ExportedNativeConstants = TurboModuleRegistry.get('FRNAvatarConstants')?.getConstants() || NativeModules.FRNAvatarViewManager;
|
|
7
8
|
const tokensThatAreAlsoProps = ['size', 'avatarStyle'];
|
|
8
9
|
export const NativeAvatar = compose({
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
},
|
|
15
|
-
avatarName,
|
|
16
|
-
],
|
|
17
|
-
tokensThatAreAlsoProps,
|
|
18
|
-
slots: { root: NativeAvatarView },
|
|
19
|
-
slotProps: {
|
|
20
|
-
root: buildProps((tokens) => ({
|
|
21
|
-
size: tokens.size,
|
|
22
|
-
style: {
|
|
23
|
-
height: ExportedNativeConstants.sizes[tokens.size],
|
|
24
|
-
width: ExportedNativeConstants.sizes[tokens.size],
|
|
25
|
-
},
|
|
26
|
-
}), ['size']),
|
|
27
|
-
},
|
|
28
|
-
useRender: (props, useSlots) => {
|
|
29
|
-
const Root = useSlots(props).root;
|
|
30
|
-
return (rest) => withSlots(Root, { ...mergeProps(props, rest) });
|
|
10
|
+
displayName: avatarName,
|
|
11
|
+
tokens: [
|
|
12
|
+
{
|
|
13
|
+
size: 'size24',
|
|
14
|
+
avatarStyle: 'default',
|
|
31
15
|
},
|
|
16
|
+
avatarName,
|
|
17
|
+
],
|
|
18
|
+
tokensThatAreAlsoProps,
|
|
19
|
+
slots: { root: NativeAvatarView },
|
|
20
|
+
slotProps: {
|
|
21
|
+
root: buildProps(
|
|
22
|
+
(tokens) => ({
|
|
23
|
+
size: tokens.size,
|
|
24
|
+
style: {
|
|
25
|
+
height: ExportedNativeConstants.sizes[tokens.size],
|
|
26
|
+
width: ExportedNativeConstants.sizes[tokens.size],
|
|
27
|
+
},
|
|
28
|
+
}),
|
|
29
|
+
['size'],
|
|
30
|
+
),
|
|
31
|
+
},
|
|
32
|
+
useRender: (props, useSlots) => {
|
|
33
|
+
const Root = useSlots(props).root;
|
|
34
|
+
return (rest) => _jsx(Root, { ...mergeProps(props, rest) });
|
|
35
|
+
},
|
|
32
36
|
});
|
|
33
|
-
//# sourceMappingURL=NativeAvatar.js.map
|
|
37
|
+
//# sourceMappingURL=NativeAvatar.js.map
|
package/lib/NativeAvatar.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NativeAvatar.js","sourceRoot":"","sources":["../src/NativeAvatar.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"NativeAvatar.js","sourceRoot":"","sources":["../src/NativeAvatar.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,aAAa,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAGlE,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,kCAAkC,CAAC;AAEnF,MAAM,UAAU,GAAG,cAAc,CAAC;AAElC,OAAO,gBAAgB,MAAM,yBAAyB,CAAC;AAEvD,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,CAAU,CAAC;AAWrG,MAAM,uBAAuB,GAC3B,mBAAmB,CAAC,GAAG,CAAC,oBAAoB,CAAC,EAAE,YAAY,EAAE,IAAI,aAAa,CAAC,oBAAoB,CAAC;AA6EtG,MAAM,sBAAsB,GAAiC,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;AASrF,MAAM,CAAC,MAAM,YAAY,GAAG,OAAO,CAAa;IAC9C,WAAW,EAAE,UAAU;IACvB,MAAM,EAAE;QACN;YACE,IAAI,EAAE,QAAQ;YACd,WAAW,EAAE,SAAS;SACvB;QACD,UAAU;KACX;IACD,sBAAsB;IACtB,KAAK,EAAE,EAAE,IAAI,EAAE,gBAAgB,EAAE;IACjC,SAAS,EAAE;QACT,IAAI,EAAE,UAAU,CACd,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;YACX,IAAI,EAAE,MAAM,CAAC,IAAI;YACjB,KAAK,EAAE;gBACL,MAAM,EAAE,uBAAuB,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC;gBAClD,KAAK,EAAE,uBAAuB,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC;aAClD;SACF,CAAC,EACF,CAAC,MAAM,CAAC,CACT;KACF;IACD,SAAS,EAAE,CAAC,KAAwB,EAAE,QAA8B,EAAE,EAAE,CAAC;QACvE,MAAM,IAAI,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC;QAElC,OAAO,CAAC,IAAuB,EAAE,EAAE,CAAC,KAAC,IAAI,OAAK,UAAU,CAAC,KAAK,EAAE,IAAI,CAAC,GAAI,CAAC;IAAA,CAC3E;CACF,CAAC,CAAC"}
|
package/lib/index.d.ts
CHANGED
package/lib/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export { NativeAvatar, Sizes } from './NativeAvatar';
|
|
2
|
-
//# sourceMappingURL=index.js.map
|
|
2
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { ColorValue, ViewProps } from 'react-native';
|
|
2
|
+
import type { WithDefault } from 'react-native/Libraries/Types/CodegenTypes';
|
|
3
|
+
import type { ImageSource } from './codegenTypes';
|
|
4
|
+
export interface NativeProps extends ViewProps {
|
|
5
|
+
primaryText?: string;
|
|
6
|
+
secondaryText?: string;
|
|
7
|
+
imageSource?: ImageSource;
|
|
8
|
+
backgroundColor?: ColorValue;
|
|
9
|
+
size?: WithDefault<'size16' | 'size20' | 'size24' | 'size32' | 'size40' | 'size56' | 'size72', undefined>;
|
|
10
|
+
}
|
|
11
|
+
//# sourceMappingURL=AvatarNative.types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AvatarNative.types.d.ts","sourceRoot":"","sources":["../src/AvatarNative.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE1D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,2CAA2C,CAAC;AAE7E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAElD,MAAM,WAAW,WAAY,SAAQ,SAAS;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,eAAe,CAAC,EAAE,UAAU,CAAC;IAC7B,IAAI,CAAC,EAAE,WAAW,CAAC,QAAQ,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,EAAE,SAAS,CAAC,CAAC;CAC3G"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AvatarNative.types.js","sourceRoot":"","sources":["../src/AvatarNative.types.ts"],"names":[],"mappings":""}
|
|
@@ -1,18 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
* Licensed under the MIT License.
|
|
4
|
-
* @format
|
|
5
|
-
*/
|
|
6
|
-
import type { ColorValue, HostComponent, ViewProps } from 'react-native';
|
|
7
|
-
import type { WithDefault } from 'react-native/Libraries/Types/CodegenTypes';
|
|
8
|
-
import type { ImageSource } from './codegenTypes';
|
|
9
|
-
export interface NativeProps extends ViewProps {
|
|
10
|
-
primaryText?: string;
|
|
11
|
-
secondaryText?: string;
|
|
12
|
-
imageSource?: ImageSource;
|
|
13
|
-
backgroundColor?: ColorValue;
|
|
14
|
-
size?: WithDefault<'size16' | 'size20' | 'size24' | 'size32' | 'size40' | 'size56' | 'size72', undefined>;
|
|
15
|
-
}
|
|
1
|
+
import type { HostComponent } from 'react-native';
|
|
2
|
+
import type { NativeProps } from './AvatarNative.types';
|
|
16
3
|
declare const _default: HostComponent<NativeProps>;
|
|
17
4
|
export default _default;
|
|
18
|
-
//# sourceMappingURL=AvatarNativeComponent.d.ts.map
|
|
5
|
+
//# sourceMappingURL=AvatarNativeComponent.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarNativeComponent.d.ts","sourceRoot":"","sources":["../src/AvatarNativeComponent.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"AvatarNativeComponent.d.ts","sourceRoot":"","sources":["../src/AvatarNativeComponent.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;;AAGxD,wBAAkG"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AvatarNativeComponent.ios.d.ts","sourceRoot":"","sources":["../src/AvatarNativeComponent.ios.ts"],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AvatarNativeComponent.ios.js","sourceRoot":"","sources":["../src/AvatarNativeComponent.ios.ts"],"names":[],"mappings":""}
|
|
@@ -1,13 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
*/
|
|
7
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
8
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
9
|
-
};
|
|
10
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
11
|
-
const codegenNativeComponent_1 = __importDefault(require("react-native/Libraries/Utilities/codegenNativeComponent"));
|
|
12
|
-
exports.default = (0, codegenNativeComponent_1.default)('FRNAvatarView');
|
|
13
|
-
//# sourceMappingURL=AvatarNativeComponent.js.map
|
|
1
|
+
'use strict';
|
|
2
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
3
|
+
const react_native_1 = require('react-native');
|
|
4
|
+
exports.default = (0, react_native_1.requireNativeComponent)('FRNAvatarView');
|
|
5
|
+
//# sourceMappingURL=AvatarNativeComponent.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarNativeComponent.js","sourceRoot":"","sources":["../src/AvatarNativeComponent.ts"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"AvatarNativeComponent.js","sourceRoot":"","sources":["../src/AvatarNativeComponent.ts"],"names":[],"mappings":";;AAEA,+CAAsD;kBAEvC,IAAA,qCAAsB,EAAc,eAAe,CAA+B"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AvatarNativeComponent.macos.d.ts","sourceRoot":"","sources":["../src/AvatarNativeComponent.macos.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;;AAGxD,wBAAkG"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
var __importDefault =
|
|
3
|
+
(this && this.__importDefault) ||
|
|
4
|
+
function (mod) {
|
|
5
|
+
return mod && mod.__esModule ? mod : { default: mod };
|
|
6
|
+
};
|
|
7
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
8
|
+
const codegenNativeComponent_1 = __importDefault(require('react-native/Libraries/Utilities/codegenNativeComponent'));
|
|
9
|
+
exports.default = (0, codegenNativeComponent_1.default)('FRNAvatarView');
|
|
10
|
+
//# sourceMappingURL=AvatarNativeComponent.macos.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AvatarNativeComponent.macos.js","sourceRoot":"","sources":["../src/AvatarNativeComponent.macos.ts"],"names":[],"mappings":";;;;;AAEA,qHAA6F;kBAE9E,IAAA,gCAAsB,EAAc,eAAe,CAA+B"}
|
|
@@ -3,76 +3,80 @@
|
|
|
3
3
|
* Licensed under the MIT License.
|
|
4
4
|
* @format
|
|
5
5
|
*/
|
|
6
|
-
/** @
|
|
7
|
-
/** @jsx withSlots */
|
|
6
|
+
/** @jsxImportSource @fluentui-react-native/framework-base */
|
|
8
7
|
import type { ImageURISource, ViewProps, ColorValue } from 'react-native';
|
|
9
|
-
export declare const Sizes: readonly [
|
|
8
|
+
export declare const Sizes: readonly ['size16', 'size20', 'size24', 'size32', 'size40', 'size56', 'size72'];
|
|
10
9
|
export type Size = (typeof Sizes)[number];
|
|
11
10
|
export type AvatarStyle = 'default' | 'accent' | 'group' | 'outlined' | 'outlinedPrimary' | 'overflow';
|
|
12
11
|
export type Presence = 'none' | 'available' | 'away' | 'blocked' | 'doNotDisturb' | 'offline' | 'unknown';
|
|
13
12
|
export type NativeAvatarTokens = {
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
13
|
+
/**
|
|
14
|
+
* Supported Avatar sizes
|
|
15
|
+
*/
|
|
16
|
+
size?: Size;
|
|
17
|
+
/**
|
|
18
|
+
* Supported Avatar styles
|
|
19
|
+
*/
|
|
20
|
+
avatarStyle?: AvatarStyle;
|
|
22
21
|
};
|
|
23
22
|
export type NativeAvatarProps = NativeAvatarTokens & {
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
23
|
+
/**
|
|
24
|
+
* The image to be displayed
|
|
25
|
+
*/
|
|
26
|
+
imageSource?: ImageURISource;
|
|
27
|
+
/**
|
|
28
|
+
* The primary text to create initials with (e.g. a name)
|
|
29
|
+
*/
|
|
30
|
+
primaryText?: string;
|
|
31
|
+
/**
|
|
32
|
+
* The secondary text to create initials with if primary text is not provided (e.g. an email address)
|
|
33
|
+
*/
|
|
34
|
+
secondaryText?: string;
|
|
35
|
+
/**
|
|
36
|
+
* A custom color for the ring around the Avatar
|
|
37
|
+
*/
|
|
38
|
+
ringColor?: ColorValue;
|
|
39
|
+
/**
|
|
40
|
+
* A custom color for the avatar initials when no image is shown
|
|
41
|
+
*/
|
|
42
|
+
foregroundColor?: ColorValue;
|
|
43
|
+
/**
|
|
44
|
+
* A custom color for the avatar background when no image is shown
|
|
45
|
+
*/
|
|
46
|
+
backgroundColor?: ColorValue;
|
|
47
|
+
/**
|
|
48
|
+
* The avatar view's presence state.
|
|
49
|
+
*/
|
|
50
|
+
presence?: Presence;
|
|
51
|
+
/**
|
|
52
|
+
* A boolean inidicating whether the ring is visible
|
|
53
|
+
*/
|
|
54
|
+
isRingVisible?: boolean;
|
|
55
|
+
/**
|
|
56
|
+
* A boolean indicating whether the Inner Ring Gap is transparent
|
|
57
|
+
*/
|
|
58
|
+
isTransparent?: boolean;
|
|
59
|
+
/**
|
|
60
|
+
* A boolean indicating out of office status
|
|
61
|
+
*/
|
|
62
|
+
isOutOfOffice?: boolean;
|
|
63
|
+
/**
|
|
64
|
+
* A boolean indicating whether the gap between the avatar and ring is visible.
|
|
65
|
+
*/
|
|
66
|
+
hasRingInnerGap?: boolean;
|
|
67
|
+
/**
|
|
68
|
+
* An image to be shown as the backdrop of the ring, rather then a solid color.
|
|
69
|
+
* Takes precendence over `ringColor`
|
|
70
|
+
*/
|
|
71
|
+
customBorderImageSource?: ImageURISource;
|
|
73
72
|
};
|
|
74
73
|
export type NativeAvatarViewProps = ViewProps & NativeAvatarProps;
|
|
75
|
-
export declare const NativeAvatar: import(
|
|
74
|
+
export declare const NativeAvatar: import('@fluentui-react-native/framework').ComposableComponent<
|
|
75
|
+
NativeAvatarProps,
|
|
76
|
+
{
|
|
76
77
|
root: NativeAvatarViewProps;
|
|
77
|
-
},
|
|
78
|
-
|
|
78
|
+
},
|
|
79
|
+
NativeAvatarTokens,
|
|
80
|
+
import('@fluentui-react-native/framework').ObjectBase
|
|
81
|
+
>;
|
|
82
|
+
//# sourceMappingURL=NativeAvatar.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NativeAvatar.d.ts","sourceRoot":"","sources":["../src/NativeAvatar.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,
|
|
1
|
+
{"version":3,"file":"NativeAvatar.d.ts","sourceRoot":"","sources":["../src/NativeAvatar.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,6DAA6D;AAC7D,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAU1E,eAAO,MAAM,KAAK,iFAAkF,CAAC;AACrG,MAAM,MAAM,IAAI,GAAG,CAAC,OAAO,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC;AAE1C,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,UAAU,GAAG,iBAAiB,GAAG,UAAU,CAAC;AAEvG,MAAM,MAAM,QAAQ,GAAG,MAAM,GAAG,WAAW,GAAG,MAAM,GAAG,SAAS,GAAG,cAAc,GAAG,SAAS,GAAG,SAAS,CAAC;AAS1G,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;OAEG;IACH,IAAI,CAAC,EAAE,IAAI,CAAC;IAEZ;;OAEG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,kBAAkB,GAAG;IACnD;;OAEG;IACH,WAAW,CAAC,EAAE,cAAc,CAAC;IAE7B;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;OAEG;IACH,SAAS,CAAC,EAAE,UAAU,CAAC;IAEvB;;OAEG;IACH,eAAe,CAAC,EAAE,UAAU,CAAC;IAE7B;;OAEG;IACH,eAAe,CAAC,EAAE,UAAU,CAAC;IAE7B;;OAEG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IAEpB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;OAGG;IACH,uBAAuB,CAAC,EAAE,cAAc,CAAC;CAC1C,CAAC;AAIF,MAAM,MAAM,qBAAqB,GAAG,SAAS,GAAG,iBAAiB,CAAC;AAOlE,eAAO,MAAM,YAAY;;6EA4BvB,CAAC"}
|
|
@@ -1,39 +1,46 @@
|
|
|
1
|
-
|
|
2
|
-
var __importDefault =
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
1
|
+
'use strict';
|
|
2
|
+
var __importDefault =
|
|
3
|
+
(this && this.__importDefault) ||
|
|
4
|
+
function (mod) {
|
|
5
|
+
return mod && mod.__esModule ? mod : { default: mod };
|
|
6
|
+
};
|
|
7
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
6
8
|
exports.NativeAvatar = exports.Sizes = void 0;
|
|
7
|
-
const
|
|
8
|
-
const
|
|
9
|
+
const jsx_runtime_1 = require('@fluentui-react-native/framework-base/jsx-runtime');
|
|
10
|
+
const react_native_1 = require('react-native');
|
|
11
|
+
const framework_1 = require('@fluentui-react-native/framework');
|
|
9
12
|
const avatarName = 'NativeAvatar';
|
|
10
|
-
const AvatarNativeComponent_1 = __importDefault(require(
|
|
13
|
+
const AvatarNativeComponent_1 = __importDefault(require('./AvatarNativeComponent'));
|
|
11
14
|
exports.Sizes = ['size16', 'size20', 'size24', 'size32', 'size40', 'size56', 'size72'];
|
|
12
|
-
const ExportedNativeConstants =
|
|
15
|
+
const ExportedNativeConstants =
|
|
16
|
+
react_native_1.TurboModuleRegistry.get('FRNAvatarConstants')?.getConstants() || react_native_1.NativeModules.FRNAvatarViewManager;
|
|
13
17
|
const tokensThatAreAlsoProps = ['size', 'avatarStyle'];
|
|
14
18
|
exports.NativeAvatar = (0, framework_1.compose)({
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
},
|
|
21
|
-
avatarName,
|
|
22
|
-
],
|
|
23
|
-
tokensThatAreAlsoProps,
|
|
24
|
-
slots: { root: AvatarNativeComponent_1.default },
|
|
25
|
-
slotProps: {
|
|
26
|
-
root: (0, framework_1.buildProps)((tokens) => ({
|
|
27
|
-
size: tokens.size,
|
|
28
|
-
style: {
|
|
29
|
-
height: ExportedNativeConstants.sizes[tokens.size],
|
|
30
|
-
width: ExportedNativeConstants.sizes[tokens.size],
|
|
31
|
-
},
|
|
32
|
-
}), ['size']),
|
|
33
|
-
},
|
|
34
|
-
useRender: (props, useSlots) => {
|
|
35
|
-
const Root = useSlots(props).root;
|
|
36
|
-
return (rest) => (0, framework_1.withSlots)(Root, { ...(0, framework_1.mergeProps)(props, rest) });
|
|
19
|
+
displayName: avatarName,
|
|
20
|
+
tokens: [
|
|
21
|
+
{
|
|
22
|
+
size: 'size24',
|
|
23
|
+
avatarStyle: 'default',
|
|
37
24
|
},
|
|
25
|
+
avatarName,
|
|
26
|
+
],
|
|
27
|
+
tokensThatAreAlsoProps,
|
|
28
|
+
slots: { root: AvatarNativeComponent_1.default },
|
|
29
|
+
slotProps: {
|
|
30
|
+
root: (0, framework_1.buildProps)(
|
|
31
|
+
(tokens) => ({
|
|
32
|
+
size: tokens.size,
|
|
33
|
+
style: {
|
|
34
|
+
height: ExportedNativeConstants.sizes[tokens.size],
|
|
35
|
+
width: ExportedNativeConstants.sizes[tokens.size],
|
|
36
|
+
},
|
|
37
|
+
}),
|
|
38
|
+
['size'],
|
|
39
|
+
),
|
|
40
|
+
},
|
|
41
|
+
useRender: (props, useSlots) => {
|
|
42
|
+
const Root = useSlots(props).root;
|
|
43
|
+
return (rest) => jsx_runtime_1.jsx(Root, { ...(0, framework_1.mergeProps)(props, rest) });
|
|
44
|
+
},
|
|
38
45
|
});
|
|
39
|
-
//# sourceMappingURL=NativeAvatar.js.map
|
|
46
|
+
//# sourceMappingURL=NativeAvatar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NativeAvatar.js","sourceRoot":"","sources":["../src/NativeAvatar.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"NativeAvatar.js","sourceRoot":"","sources":["../src/NativeAvatar.tsx"],"names":[],"mappings":";;;;;;;AAOA,+CAAkE;AAGlE,gEAAmF;AAEnF,MAAM,UAAU,GAAG,cAAc,CAAC;AAElC,oFAAuD;AAE1C,QAAA,KAAK,GAAG,CAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,CAAU,CAAC;AAWrG,MAAM,uBAAuB,GAC3B,kCAAmB,CAAC,GAAG,CAAC,oBAAoB,CAAC,EAAE,YAAY,EAAE,IAAI,4BAAa,CAAC,oBAAoB,CAAC;AA6EtG,MAAM,sBAAsB,GAAiC,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;AASxE,QAAA,YAAY,GAAG,IAAA,mBAAO,EAAa;IAC9C,WAAW,EAAE,UAAU;IACvB,MAAM,EAAE;QACN;YACE,IAAI,EAAE,QAAQ;YACd,WAAW,EAAE,SAAS;SACvB;QACD,UAAU;KACX;IACD,sBAAsB;IACtB,KAAK,EAAE,EAAE,IAAI,EAAE,+BAAgB,EAAE;IACjC,SAAS,EAAE;QACT,IAAI,EAAE,IAAA,sBAAU,EACd,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;YACX,IAAI,EAAE,MAAM,CAAC,IAAI;YACjB,KAAK,EAAE;gBACL,MAAM,EAAE,uBAAuB,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC;gBAClD,KAAK,EAAE,uBAAuB,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC;aAClD;SACF,CAAC,EACF,CAAC,MAAM,CAAC,CACT;KACF;IACD,SAAS,EAAE,CAAC,KAAwB,EAAE,QAA8B,EAAE,EAAE,CAAC;QACvE,MAAM,IAAI,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC;QAElC,OAAO,CAAC,IAAuB,EAAE,EAAE,CAAC,kBAAC,IAAI,OAAK,IAAA,sBAAU,EAAC,KAAK,EAAE,IAAI,CAAC,GAAI,CAAC;IAAA,CAC3E;CACF,CAAC,CAAC"}
|
package/lib-commonjs/index.d.ts
CHANGED
package/lib-commonjs/index.js
CHANGED
|
@@ -1,7 +1,17 @@
|
|
|
1
|
-
|
|
2
|
-
Object.defineProperty(exports,
|
|
1
|
+
'use strict';
|
|
2
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
3
3
|
exports.Sizes = exports.NativeAvatar = void 0;
|
|
4
|
-
|
|
5
|
-
Object.defineProperty(exports,
|
|
6
|
-
|
|
7
|
-
|
|
4
|
+
const NativeAvatar_1 = require('./NativeAvatar');
|
|
5
|
+
Object.defineProperty(exports, 'NativeAvatar', {
|
|
6
|
+
enumerable: true,
|
|
7
|
+
get: function () {
|
|
8
|
+
return NativeAvatar_1.NativeAvatar;
|
|
9
|
+
},
|
|
10
|
+
});
|
|
11
|
+
Object.defineProperty(exports, 'Sizes', {
|
|
12
|
+
enumerable: true,
|
|
13
|
+
get: function () {
|
|
14
|
+
return NativeAvatar_1.Sizes;
|
|
15
|
+
},
|
|
16
|
+
});
|
|
17
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;AAAA
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;AAAA,iDAAqD;AAA5C,4GAAA,YAAY,OAAA;AAAE,qGAAA,KAAK,OAAA"}
|
package/package.json
CHANGED
|
@@ -1,97 +1,95 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui-react-native/experimental-avatar",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.22.0",
|
|
4
4
|
"description": "A cross-platform Avatar component using the Fluent Design System. Currently only implemented on iOS",
|
|
5
|
+
"homepage": "https://github.com/microsoft/fluentui-react-native",
|
|
6
|
+
"repository": {
|
|
7
|
+
"type": "git",
|
|
8
|
+
"url": "https://github.com/microsoft/fluentui-react-native.git",
|
|
9
|
+
"directory": "packages/experimental/Avatar"
|
|
10
|
+
},
|
|
5
11
|
"license": "MIT",
|
|
6
12
|
"author": "Microsoft <fluentuinativeowners@microsoft.com>",
|
|
7
|
-
"homepage": "https://github.com/microsoft/fluentui-react-native",
|
|
8
|
-
"main": "lib-commonjs/index.js",
|
|
9
|
-
"module": "lib/index.js",
|
|
10
|
-
"react-native": "src/index.ts",
|
|
11
13
|
"exports": {
|
|
12
14
|
".": {
|
|
15
|
+
"types": "./lib/index.d.ts",
|
|
13
16
|
"import": "./lib/index.js",
|
|
14
|
-
"require": "./lib-commonjs/index.js"
|
|
15
|
-
"types": "./lib/index.d.ts"
|
|
17
|
+
"require": "./lib-commonjs/index.js"
|
|
16
18
|
}
|
|
17
19
|
},
|
|
18
|
-
"
|
|
20
|
+
"main": "lib-commonjs/index.js",
|
|
21
|
+
"module": "lib/index.js",
|
|
22
|
+
"types": "lib/index.d.ts",
|
|
19
23
|
"scripts": {
|
|
20
24
|
"build": "fluentui-scripts build",
|
|
21
|
-
"
|
|
25
|
+
"build-cjs": "tsgo --outDir lib-commonjs",
|
|
26
|
+
"build-esm": "tsgo --outDir lib --module esnext --moduleResolution bundler",
|
|
22
27
|
"clean": "fluentui-scripts clean",
|
|
23
|
-
"lint": "fluentui-scripts eslint",
|
|
24
28
|
"depcheck": "fluentui-scripts depcheck",
|
|
25
|
-
"
|
|
26
|
-
"
|
|
29
|
+
"lint": "fluentui-scripts eslint",
|
|
30
|
+
"lint-package": "fluentui-scripts lint-package",
|
|
27
31
|
"prettier": "fluentui-scripts prettier",
|
|
28
|
-
"
|
|
29
|
-
|
|
30
|
-
"repository": {
|
|
31
|
-
"type": "git",
|
|
32
|
-
"url": "https://github.com/microsoft/fluentui-react-native.git",
|
|
33
|
-
"directory": "packages/experimental/Avatar"
|
|
32
|
+
"test": "fluentui-scripts jest",
|
|
33
|
+
"update-snapshots": "fluentui-scripts jest -u"
|
|
34
34
|
},
|
|
35
35
|
"dependencies": {
|
|
36
|
-
"@fluentui-react-native/framework": "0.
|
|
36
|
+
"@fluentui-react-native/framework": "0.15.0"
|
|
37
37
|
},
|
|
38
38
|
"devDependencies": {
|
|
39
39
|
"@babel/core": "^7.20.0",
|
|
40
40
|
"@fluentui-react-native/babel-config": "0.1.1",
|
|
41
41
|
"@fluentui-react-native/eslint-config-rules": "0.1.1",
|
|
42
|
-
"@fluentui-react-native/
|
|
43
|
-
"@react-native/
|
|
44
|
-
"@react-native/
|
|
45
|
-
"@
|
|
46
|
-
"@
|
|
47
|
-
"react": "
|
|
48
|
-
"react-native": "^0.
|
|
49
|
-
"react
|
|
50
|
-
"react-
|
|
51
|
-
"react
|
|
42
|
+
"@fluentui-react-native/framework-base": "0.3.0",
|
|
43
|
+
"@fluentui-react-native/kit-config": "0.1.2",
|
|
44
|
+
"@fluentui-react-native/scripts": "0.1.2",
|
|
45
|
+
"@react-native-community/cli": "^20.0.0",
|
|
46
|
+
"@react-native-community/cli-platform-android": "^20.0.0",
|
|
47
|
+
"@react-native-community/cli-platform-ios": "^20.0.0",
|
|
48
|
+
"@react-native/metro-config": "^0.81.0",
|
|
49
|
+
"@types/react": "~19.1.0",
|
|
50
|
+
"@types/react-test-renderer": "^19.1.0",
|
|
51
|
+
"react": "19.1.0",
|
|
52
|
+
"react-native": "^0.81.0",
|
|
53
|
+
"react-native-macos": "^0.81.0",
|
|
54
|
+
"react-native-windows": "^0.81.0",
|
|
55
|
+
"react-test-renderer": "19.1.0"
|
|
52
56
|
},
|
|
53
57
|
"peerDependencies": {
|
|
54
58
|
"@office-iss/react-native-win32": "^0.74.0",
|
|
55
|
-
"react": "18.2.0",
|
|
56
|
-
"react
|
|
57
|
-
"react-native
|
|
58
|
-
"react-native-
|
|
59
|
+
"@types/react": "~18.2.0 || ~19.0.0 || ~19.1.0",
|
|
60
|
+
"react": "18.2.0 || 19.0.0 || 19.1.0",
|
|
61
|
+
"react-native": "^0.73.0 || ^0.74.0 || ^0.78.0 || ^0.81.0",
|
|
62
|
+
"react-native-macos": "^0.73.0 || ^0.74.0 || ^0.78.0 || ^0.81.0",
|
|
63
|
+
"react-native-windows": "^0.73.0 || ^0.74.0 || ^0.78.0 || ^0.81.0"
|
|
64
|
+
},
|
|
65
|
+
"peerDependenciesMeta": {
|
|
66
|
+
"@office-iss/react-native-win32": {
|
|
67
|
+
"optional": true
|
|
68
|
+
},
|
|
69
|
+
"@types/react": {
|
|
70
|
+
"optional": true
|
|
71
|
+
},
|
|
72
|
+
"react-native-macos": {
|
|
73
|
+
"optional": true
|
|
74
|
+
},
|
|
75
|
+
"react-native-windows": {
|
|
76
|
+
"optional": true
|
|
77
|
+
}
|
|
59
78
|
},
|
|
60
79
|
"rnx-kit": {
|
|
61
80
|
"kitType": "library",
|
|
62
81
|
"alignDeps": {
|
|
63
|
-
"presets": [
|
|
64
|
-
"microsoft/react-native"
|
|
65
|
-
],
|
|
66
|
-
"requirements": {
|
|
67
|
-
"development": [
|
|
68
|
-
"react-native@0.74"
|
|
69
|
-
],
|
|
70
|
-
"production": [
|
|
71
|
-
"react-native@0.73 || 0.74"
|
|
72
|
-
]
|
|
73
|
-
},
|
|
74
82
|
"capabilities": [
|
|
75
|
-
"babel-preset-react-native",
|
|
76
83
|
"core",
|
|
77
84
|
"core-android",
|
|
78
85
|
"core-ios",
|
|
79
86
|
"core-macos",
|
|
80
87
|
"core-windows",
|
|
81
88
|
"react",
|
|
82
|
-
"react-test-renderer"
|
|
89
|
+
"react-test-renderer",
|
|
90
|
+
"tools-core"
|
|
83
91
|
]
|
|
84
|
-
}
|
|
85
|
-
},
|
|
86
|
-
"peerDependenciesMeta": {
|
|
87
|
-
"@office-iss/react-native-win32": {
|
|
88
|
-
"optional": true
|
|
89
92
|
},
|
|
90
|
-
"react-native-
|
|
91
|
-
"optional": true
|
|
92
|
-
},
|
|
93
|
-
"react-native-windows": {
|
|
94
|
-
"optional": true
|
|
95
|
-
}
|
|
93
|
+
"extends": "@fluentui-react-native/kit-config"
|
|
96
94
|
}
|
|
97
|
-
}
|
|
95
|
+
}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import type { ColorValue, ViewProps } from 'react-native';
|
|
2
|
+
|
|
3
|
+
import type { WithDefault } from 'react-native/Libraries/Types/CodegenTypes';
|
|
4
|
+
|
|
5
|
+
import type { ImageSource } from './codegenTypes';
|
|
6
|
+
|
|
7
|
+
export interface NativeProps extends ViewProps {
|
|
8
|
+
primaryText?: string;
|
|
9
|
+
secondaryText?: string;
|
|
10
|
+
imageSource?: ImageSource;
|
|
11
|
+
backgroundColor?: ColorValue;
|
|
12
|
+
size?: WithDefault<'size16' | 'size20' | 'size24' | 'size32' | 'size40' | 'size56' | 'size72', undefined>;
|
|
13
|
+
}
|
|
File without changes
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import type { HostComponent } from 'react-native';
|
|
2
|
+
import type { NativeProps } from './AvatarNative.types';
|
|
3
|
+
import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
|
|
4
|
+
|
|
5
|
+
export default codegenNativeComponent<NativeProps>('FRNAvatarView') as HostComponent<NativeProps>;
|
|
@@ -1,22 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
* @format
|
|
5
|
-
*/
|
|
1
|
+
import type { HostComponent } from 'react-native';
|
|
2
|
+
import type { NativeProps } from './AvatarNative.types';
|
|
3
|
+
import { requireNativeComponent } from 'react-native';
|
|
6
4
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
import type { WithDefault } from 'react-native/Libraries/Types/CodegenTypes';
|
|
10
|
-
import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
|
|
11
|
-
|
|
12
|
-
import type { ImageSource } from './codegenTypes';
|
|
13
|
-
|
|
14
|
-
export interface NativeProps extends ViewProps {
|
|
15
|
-
primaryText?: string;
|
|
16
|
-
secondaryText?: string;
|
|
17
|
-
imageSource?: ImageSource;
|
|
18
|
-
backgroundColor?: ColorValue;
|
|
19
|
-
size?: WithDefault<'size16' | 'size20' | 'size24' | 'size32' | 'size40' | 'size56' | 'size72', undefined>;
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
export default codegenNativeComponent<NativeProps>('FRNAvatarView') as HostComponent<NativeProps>;
|
|
5
|
+
export default requireNativeComponent<NativeProps>('FRNAvatarView') as HostComponent<NativeProps>;
|
package/src/NativeAvatar.tsx
CHANGED
|
@@ -3,13 +3,12 @@
|
|
|
3
3
|
* Licensed under the MIT License.
|
|
4
4
|
* @format
|
|
5
5
|
*/
|
|
6
|
-
/** @
|
|
7
|
-
/** @jsx withSlots */
|
|
6
|
+
/** @jsxImportSource @fluentui-react-native/framework-base */
|
|
8
7
|
import type { ImageURISource, ViewProps, ColorValue } from 'react-native';
|
|
9
8
|
import { NativeModules, TurboModuleRegistry } from 'react-native';
|
|
10
9
|
|
|
11
10
|
import type { UseSlots } from '@fluentui-react-native/framework';
|
|
12
|
-
import { compose, buildProps, mergeProps
|
|
11
|
+
import { compose, buildProps, mergeProps } from '@fluentui-react-native/framework';
|
|
13
12
|
|
|
14
13
|
const avatarName = 'NativeAvatar';
|
|
15
14
|
|