@metamask/design-system-react-native 0.41.0 → 0.42.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +26 -1
- package/README.md +2 -2
- package/dist/components/AvatarFavicon/AvatarFavicon.cjs +1 -1
- package/dist/components/AvatarFavicon/AvatarFavicon.cjs.map +1 -1
- package/dist/components/AvatarFavicon/AvatarFavicon.d.cts.map +1 -1
- package/dist/components/AvatarFavicon/AvatarFavicon.d.mts.map +1 -1
- package/dist/components/AvatarFavicon/AvatarFavicon.mjs +1 -1
- package/dist/components/AvatarFavicon/AvatarFavicon.mjs.map +1 -1
- package/dist/components/AvatarNetwork/AvatarNetwork.cjs +1 -1
- package/dist/components/AvatarNetwork/AvatarNetwork.cjs.map +1 -1
- package/dist/components/AvatarNetwork/AvatarNetwork.d.cts.map +1 -1
- package/dist/components/AvatarNetwork/AvatarNetwork.d.mts.map +1 -1
- package/dist/components/AvatarNetwork/AvatarNetwork.mjs +1 -1
- package/dist/components/AvatarNetwork/AvatarNetwork.mjs.map +1 -1
- package/dist/components/AvatarToken/AvatarToken.cjs +1 -1
- package/dist/components/AvatarToken/AvatarToken.cjs.map +1 -1
- package/dist/components/AvatarToken/AvatarToken.d.cts.map +1 -1
- package/dist/components/AvatarToken/AvatarToken.d.mts.map +1 -1
- package/dist/components/AvatarToken/AvatarToken.mjs +1 -1
- package/dist/components/AvatarToken/AvatarToken.mjs.map +1 -1
- package/dist/components/BadgeWrapper/BadgeWrapper.cjs +31 -95
- package/dist/components/BadgeWrapper/BadgeWrapper.cjs.map +1 -1
- package/dist/components/BadgeWrapper/BadgeWrapper.d.cts.map +1 -1
- package/dist/components/BadgeWrapper/BadgeWrapper.d.mts.map +1 -1
- package/dist/components/BadgeWrapper/BadgeWrapper.mjs +29 -73
- package/dist/components/BadgeWrapper/BadgeWrapper.mjs.map +1 -1
- package/dist/components/ButtonBase/ButtonBase.cjs +1 -1
- package/dist/components/ButtonBase/ButtonBase.cjs.map +1 -1
- package/dist/components/ButtonBase/ButtonBase.mjs +1 -1
- package/dist/components/ButtonBase/ButtonBase.mjs.map +1 -1
- package/dist/components/RadioButton/RadioButton.constants.cjs +1 -1
- package/dist/components/RadioButton/RadioButton.constants.cjs.map +1 -1
- package/dist/components/RadioButton/RadioButton.constants.mjs +1 -1
- package/dist/components/RadioButton/RadioButton.constants.mjs.map +1 -1
- package/dist/components/TextField/TextField.d.cts +1 -1
- package/dist/components/TextField/TextField.d.mts +1 -1
- package/dist/components/TextFieldSearch/TextFieldSearch.d.cts +1 -1
- package/dist/components/TextFieldSearch/TextFieldSearch.d.mts +1 -1
- package/dist/components/temp-components/ImageOrSvg/ImageOrSvg.cjs +6 -3
- package/dist/components/temp-components/ImageOrSvg/ImageOrSvg.cjs.map +1 -1
- package/dist/components/temp-components/ImageOrSvg/ImageOrSvg.d.cts.map +1 -1
- package/dist/components/temp-components/ImageOrSvg/ImageOrSvg.d.mts.map +1 -1
- package/dist/components/temp-components/ImageOrSvg/ImageOrSvg.mjs +6 -3
- package/dist/components/temp-components/ImageOrSvg/ImageOrSvg.mjs.map +1 -1
- package/dist/components/temp-components/ImageOrSvg/ImageOrSvg.types.cjs.map +1 -1
- package/dist/components/temp-components/ImageOrSvg/ImageOrSvg.types.d.cts +4 -3
- package/dist/components/temp-components/ImageOrSvg/ImageOrSvg.types.d.cts.map +1 -1
- package/dist/components/temp-components/ImageOrSvg/ImageOrSvg.types.d.mts +4 -3
- package/dist/components/temp-components/ImageOrSvg/ImageOrSvg.types.d.mts.map +1 -1
- package/dist/components/temp-components/ImageOrSvg/ImageOrSvg.types.mjs.map +1 -1
- package/package.json +9 -7
package/CHANGELOG.md
CHANGED
|
@@ -7,6 +7,29 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
7
7
|
|
|
8
8
|
## [Unreleased]
|
|
9
9
|
|
|
10
|
+
## [0.42.1]
|
|
11
|
+
|
|
12
|
+
### Changed
|
|
13
|
+
|
|
14
|
+
- Added content guidelines to component documentation, including sentence case, punctuation, and prop-specific examples ([#1466](https://github.com/MetaMask/metamask-design-system/pull/1466))
|
|
15
|
+
|
|
16
|
+
### Fixed
|
|
17
|
+
|
|
18
|
+
- Fixed a `BadgeWrapper` layout feedback loop that could cause continuous layout updates and high CPU usage ([#1474](https://github.com/MetaMask/metamask-design-system/pull/1474))
|
|
19
|
+
|
|
20
|
+
## [0.42.0]
|
|
21
|
+
|
|
22
|
+
### Changed
|
|
23
|
+
|
|
24
|
+
- **BREAKING:** Raster images in `ImageOrSvg` (used by `AvatarToken`, `AvatarNetwork`, `AvatarFavicon`, and `BadgeNetwork`) now use `expo-image` so remote URIs are disk-cached ([#1454](https://github.com/MetaMask/metamask-design-system/pull/1454))
|
|
25
|
+
- Adds `expo-image` (`>=3.0.0`) as a required peer dependency
|
|
26
|
+
- `imageProps.resizeMode` overrides no longer apply; use `contentFit` instead
|
|
27
|
+
- `onImageLoad` and `onImageError` receive `expo-image` event payloads instead of React Native `NativeSyntheticEvent` wrappers
|
|
28
|
+
- See [Migration Guide](./MIGRATION.md#from-version-0410-to-0420)
|
|
29
|
+
- **BREAKING:** Updated peer dependencies to `@metamask/design-tokens@^10.0.0` and `@metamask/design-system-twrnc-preset@^0.10.0` ([#1450](https://github.com/MetaMask/metamask-design-system/pull/1450))
|
|
30
|
+
- Coordinates with deferred PureBlack scaffolding removals now published in those packages
|
|
31
|
+
- See [design-tokens Migration Guide](../design-tokens/MIGRATION.md#from-version-9x-to-1000)
|
|
32
|
+
|
|
10
33
|
## [0.41.0]
|
|
11
34
|
|
|
12
35
|
### Added
|
|
@@ -697,7 +720,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
697
720
|
- Full TypeScript support with type definitions and enums
|
|
698
721
|
- React Native integration with TWRNC preset support
|
|
699
722
|
|
|
700
|
-
[Unreleased]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.
|
|
723
|
+
[Unreleased]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.42.1...HEAD
|
|
724
|
+
[0.42.1]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.42.0...@metamask/design-system-react-native@0.42.1
|
|
725
|
+
[0.42.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.41.0...@metamask/design-system-react-native@0.42.0
|
|
701
726
|
[0.41.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.40.0...@metamask/design-system-react-native@0.41.0
|
|
702
727
|
[0.40.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.39.1...@metamask/design-system-react-native@0.40.0
|
|
703
728
|
[0.39.1]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.39.0...@metamask/design-system-react-native@0.39.1
|
package/README.md
CHANGED
|
@@ -17,13 +17,13 @@ or
|
|
|
17
17
|
This package requires the following peer dependencies to be installed in your project:
|
|
18
18
|
|
|
19
19
|
```bash
|
|
20
|
-
yarn add react@>=18.2.0 react-native@>=0.72.0
|
|
20
|
+
yarn add react@>=18.2.0 react-native@>=0.72.0 expo-image@>=3.0.0
|
|
21
21
|
```
|
|
22
22
|
|
|
23
23
|
or
|
|
24
24
|
|
|
25
25
|
```bash
|
|
26
|
-
npm install react@>=18.2.0 react-native@>=0.72.0
|
|
26
|
+
npm install react@>=18.2.0 react-native@>=0.72.0 expo-image@>=3.0.0
|
|
27
27
|
```
|
|
28
28
|
|
|
29
29
|
**Note:** This package is compatible with React Native 0.72.0 and newer versions, including 0.76.x.
|
|
@@ -41,7 +41,7 @@ const AvatarFavicon = ({ src, size = design_system_shared_1.AvatarFaviconSize.Md
|
|
|
41
41
|
};
|
|
42
42
|
return (<AvatarBase_1.AvatarBase size={size} shape={design_system_shared_1.AvatarBaseShape.Circle} fallbackText={src ? finalFallbackText : backupFallbackText} fallbackTextProps={fallbackTextProps} {...props}>
|
|
43
43
|
{src && (<ImageOrSvg_1.ImageOrSvg src={src} width={'100%'} height={'100%'} {...imageOrSvgProps} imageProps={{
|
|
44
|
-
|
|
44
|
+
contentFit: 'contain',
|
|
45
45
|
...imageOrSvgProps?.imageProps,
|
|
46
46
|
}} onImageError={onImageErrorHandler} onSvgError={onSvgErrorHandler}/>)}
|
|
47
47
|
</AvatarBase_1.AvatarBase>);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarFavicon.cjs","sourceRoot":"","sources":["../../../src/components/AvatarFavicon/AvatarFavicon.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,yEAGwC;
|
|
1
|
+
{"version":3,"file":"AvatarFavicon.cjs","sourceRoot":"","sources":["../../../src/components/AvatarFavicon/AvatarFavicon.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,yEAGwC;AAExC,+CAAwC;AAExC,wDAA2C;AAC3C,wEAA2D;AAIpD,MAAM,aAAa,GAAG,CAAC,EAC5B,GAAG,EACH,IAAI,GAAG,wCAAiB,CAAC,EAAE,EAC3B,IAAI,EACJ,YAAY,EACZ,iBAAiB,EACjB,eAAe,EACf,GAAG,KAAK,EACW,EAAE,EAAE;IACvB,MAAM,CAAC,iBAAiB,EAAE,eAAe,CAAC,GAAG,IAAA,gBAAQ,EAAS,EAAE,CAAC,CAAC;IAElE,MAAM,kBAAkB,GAAG,YAAY,IAAI,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,GAAG,CAAC;IAC5D,MAAM,mBAAmB,GAAG,CAAC,CAAsB,EAAE,EAAE;QACrD,eAAe,CAAC,kBAAkB,CAAC,CAAC;QACpC,eAAe,EAAE,YAAY,EAAE,CAAC,CAAC,CAAC,CAAC;IACrC,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAAG,CAAC,CAAQ,EAAE,EAAE;QACrC,eAAe,CAAC,kBAAkB,CAAC,CAAC;QACpC,eAAe,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC,CAAC;IACnC,CAAC,CAAC;IAEF,OAAO,CACL,CAAC,uBAAU,CACT,IAAI,CAAC,CAAC,IAAI,CAAC,CACX,KAAK,CAAC,CAAC,sCAAe,CAAC,MAAM,CAAC,CAC9B,YAAY,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAC3D,iBAAiB,CAAC,CAAC,iBAAiB,CAAC,CACrC,IAAI,KAAK,CAAC,CAEV;MAAA,CAAC,GAAG,IAAI,CACN,CAAC,uBAAU,CACT,GAAG,CAAC,CAAC,GAAG,CAAC,CACT,KAAK,CAAC,CAAC,MAAM,CAAC,CACd,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,IAAI,eAAe,CAAC,CACpB,UAAU,CAAC,CAAC;gBACV,UAAU,EAAE,SAAS;gBACrB,GAAG,eAAe,EAAE,UAAU;aAC/B,CAAC,CACF,YAAY,CAAC,CAAC,mBAAmB,CAAC,CAClC,UAAU,CAAC,CAAC,iBAAiB,CAAC,EAC9B,CACH,CACH;IAAA,EAAE,uBAAU,CAAC,CACd,CAAC;AACJ,CAAC,CAAC;AA9CW,QAAA,aAAa,iBA8CxB","sourcesContent":["import {\n AvatarBaseShape,\n AvatarFaviconSize,\n} from '@metamask/design-system-shared';\nimport type { ImageErrorEventData } from 'expo-image';\nimport React, { useState } from 'react';\n\nimport { AvatarBase } from '../AvatarBase';\nimport { ImageOrSvg } from '../temp-components/ImageOrSvg';\n\nimport type { AvatarFaviconProps } from './AvatarFavicon.types';\n\nexport const AvatarFavicon = ({\n src,\n size = AvatarFaviconSize.Md,\n name,\n fallbackText,\n fallbackTextProps,\n imageOrSvgProps,\n ...props\n}: AvatarFaviconProps) => {\n const [finalFallbackText, setFallbackText] = useState<string>('');\n\n const backupFallbackText = fallbackText || name?.[0] || '?';\n const onImageErrorHandler = (e: ImageErrorEventData) => {\n setFallbackText(backupFallbackText);\n imageOrSvgProps?.onImageError?.(e);\n };\n\n const onSvgErrorHandler = (e: Error) => {\n setFallbackText(backupFallbackText);\n imageOrSvgProps?.onSvgError?.(e);\n };\n\n return (\n <AvatarBase\n size={size}\n shape={AvatarBaseShape.Circle}\n fallbackText={src ? finalFallbackText : backupFallbackText}\n fallbackTextProps={fallbackTextProps}\n {...props}\n >\n {src && (\n <ImageOrSvg\n src={src}\n width={'100%'}\n height={'100%'}\n {...imageOrSvgProps}\n imageProps={{\n contentFit: 'contain',\n ...imageOrSvgProps?.imageProps,\n }}\n onImageError={onImageErrorHandler}\n onSvgError={onSvgErrorHandler}\n />\n )}\n </AvatarBase>\n );\n};\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarFavicon.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarFavicon/AvatarFavicon.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"AvatarFavicon.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarFavicon/AvatarFavicon.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAmB,cAAc;AAKxC,OAAO,KAAK,EAAE,kBAAkB,EAAE,kCAA8B;AAEhE,eAAO,MAAM,aAAa,oFAQvB,kBAAkB,sBAsCpB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarFavicon.d.mts","sourceRoot":"","sources":["../../../src/components/AvatarFavicon/AvatarFavicon.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"AvatarFavicon.d.mts","sourceRoot":"","sources":["../../../src/components/AvatarFavicon/AvatarFavicon.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAmB,cAAc;AAKxC,OAAO,KAAK,EAAE,kBAAkB,EAAE,kCAA8B;AAEhE,eAAO,MAAM,aAAa,oFAQvB,kBAAkB,sBAsCpB,CAAC"}
|
|
@@ -22,7 +22,7 @@ export const AvatarFavicon = ({ src, size = AvatarFaviconSize.Md, name, fallback
|
|
|
22
22
|
};
|
|
23
23
|
return (<AvatarBase size={size} shape={AvatarBaseShape.Circle} fallbackText={src ? finalFallbackText : backupFallbackText} fallbackTextProps={fallbackTextProps} {...props}>
|
|
24
24
|
{src && (<ImageOrSvg src={src} width={'100%'} height={'100%'} {...imageOrSvgProps} imageProps={{
|
|
25
|
-
|
|
25
|
+
contentFit: 'contain',
|
|
26
26
|
...imageOrSvgProps?.imageProps,
|
|
27
27
|
}} onImageError={onImageErrorHandler} onSvgError={onSvgErrorHandler}/>)}
|
|
28
28
|
</AvatarBase>);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarFavicon.mjs","sourceRoot":"","sources":["../../../src/components/AvatarFavicon/AvatarFavicon.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EACL,eAAe,EACf,iBAAiB,EAClB,uCAAuC;
|
|
1
|
+
{"version":3,"file":"AvatarFavicon.mjs","sourceRoot":"","sources":["../../../src/components/AvatarFavicon/AvatarFavicon.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EACL,eAAe,EACf,iBAAiB,EAClB,uCAAuC;AAExC,OAAO,QAAO,EAAE,QAAQ,EAAE,cAAc;;AAExC,OAAO,EAAE,UAAU,EAAE,gCAAsB;AAC3C,OAAO,EAAE,UAAU,EAAE,gDAAsC;AAI3D,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAC5B,GAAG,EACH,IAAI,GAAG,iBAAiB,CAAC,EAAE,EAC3B,IAAI,EACJ,YAAY,EACZ,iBAAiB,EACjB,eAAe,EACf,GAAG,KAAK,EACW,EAAE,EAAE;IACvB,MAAM,CAAC,iBAAiB,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAS,EAAE,CAAC,CAAC;IAElE,MAAM,kBAAkB,GAAG,YAAY,IAAI,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,GAAG,CAAC;IAC5D,MAAM,mBAAmB,GAAG,CAAC,CAAsB,EAAE,EAAE;QACrD,eAAe,CAAC,kBAAkB,CAAC,CAAC;QACpC,eAAe,EAAE,YAAY,EAAE,CAAC,CAAC,CAAC,CAAC;IACrC,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAAG,CAAC,CAAQ,EAAE,EAAE;QACrC,eAAe,CAAC,kBAAkB,CAAC,CAAC;QACpC,eAAe,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC,CAAC;IACnC,CAAC,CAAC;IAEF,OAAO,CACL,CAAC,UAAU,CACT,IAAI,CAAC,CAAC,IAAI,CAAC,CACX,KAAK,CAAC,CAAC,eAAe,CAAC,MAAM,CAAC,CAC9B,YAAY,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAC3D,iBAAiB,CAAC,CAAC,iBAAiB,CAAC,CACrC,IAAI,KAAK,CAAC,CAEV;MAAA,CAAC,GAAG,IAAI,CACN,CAAC,UAAU,CACT,GAAG,CAAC,CAAC,GAAG,CAAC,CACT,KAAK,CAAC,CAAC,MAAM,CAAC,CACd,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,IAAI,eAAe,CAAC,CACpB,UAAU,CAAC,CAAC;gBACV,UAAU,EAAE,SAAS;gBACrB,GAAG,eAAe,EAAE,UAAU;aAC/B,CAAC,CACF,YAAY,CAAC,CAAC,mBAAmB,CAAC,CAClC,UAAU,CAAC,CAAC,iBAAiB,CAAC,EAC9B,CACH,CACH;IAAA,EAAE,UAAU,CAAC,CACd,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {\n AvatarBaseShape,\n AvatarFaviconSize,\n} from '@metamask/design-system-shared';\nimport type { ImageErrorEventData } from 'expo-image';\nimport React, { useState } from 'react';\n\nimport { AvatarBase } from '../AvatarBase';\nimport { ImageOrSvg } from '../temp-components/ImageOrSvg';\n\nimport type { AvatarFaviconProps } from './AvatarFavicon.types';\n\nexport const AvatarFavicon = ({\n src,\n size = AvatarFaviconSize.Md,\n name,\n fallbackText,\n fallbackTextProps,\n imageOrSvgProps,\n ...props\n}: AvatarFaviconProps) => {\n const [finalFallbackText, setFallbackText] = useState<string>('');\n\n const backupFallbackText = fallbackText || name?.[0] || '?';\n const onImageErrorHandler = (e: ImageErrorEventData) => {\n setFallbackText(backupFallbackText);\n imageOrSvgProps?.onImageError?.(e);\n };\n\n const onSvgErrorHandler = (e: Error) => {\n setFallbackText(backupFallbackText);\n imageOrSvgProps?.onSvgError?.(e);\n };\n\n return (\n <AvatarBase\n size={size}\n shape={AvatarBaseShape.Circle}\n fallbackText={src ? finalFallbackText : backupFallbackText}\n fallbackTextProps={fallbackTextProps}\n {...props}\n >\n {src && (\n <ImageOrSvg\n src={src}\n width={'100%'}\n height={'100%'}\n {...imageOrSvgProps}\n imageProps={{\n contentFit: 'contain',\n ...imageOrSvgProps?.imageProps,\n }}\n onImageError={onImageErrorHandler}\n onSvgError={onSvgErrorHandler}\n />\n )}\n </AvatarBase>\n );\n};\n"]}
|
|
@@ -41,7 +41,7 @@ const AvatarNetwork = ({ src, size = design_system_shared_1.AvatarNetworkSize.Md
|
|
|
41
41
|
};
|
|
42
42
|
return (<AvatarBase_1.AvatarBase size={size} shape={design_system_shared_1.AvatarBaseShape.Square} fallbackText={src ? finalFallbackText : backupFallbackText} fallbackTextProps={fallbackTextProps} {...props}>
|
|
43
43
|
{src && (<ImageOrSvg_1.ImageOrSvg src={src} width={'100%'} height={'100%'} {...imageOrSvgProps} imageProps={{
|
|
44
|
-
|
|
44
|
+
contentFit: 'contain',
|
|
45
45
|
...imageOrSvgProps?.imageProps,
|
|
46
46
|
}} onImageError={onImageErrorHandler} onSvgError={onSvgErrorHandler}/>)}
|
|
47
47
|
</AvatarBase_1.AvatarBase>);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarNetwork.cjs","sourceRoot":"","sources":["../../../src/components/AvatarNetwork/AvatarNetwork.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,yEAGwC;
|
|
1
|
+
{"version":3,"file":"AvatarNetwork.cjs","sourceRoot":"","sources":["../../../src/components/AvatarNetwork/AvatarNetwork.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,yEAGwC;AAExC,+CAAwC;AAExC,wDAA2C;AAC3C,wEAA2D;AAIpD,MAAM,aAAa,GAAG,CAAC,EAC5B,GAAG,EACH,IAAI,GAAG,wCAAiB,CAAC,EAAE,EAC3B,IAAI,EACJ,YAAY,EACZ,iBAAiB,EACjB,eAAe,EACf,GAAG,KAAK,EACW,EAAE,EAAE;IACvB,MAAM,CAAC,iBAAiB,EAAE,eAAe,CAAC,GAAG,IAAA,gBAAQ,EAAS,EAAE,CAAC,CAAC;IAElE,MAAM,kBAAkB,GAAG,YAAY,IAAI,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,GAAG,CAAC;IAC5D,MAAM,mBAAmB,GAAG,CAAC,CAAsB,EAAE,EAAE;QACrD,eAAe,CAAC,kBAAkB,CAAC,CAAC;QACpC,eAAe,EAAE,YAAY,EAAE,CAAC,CAAC,CAAC,CAAC;IACrC,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAAG,CAAC,CAAQ,EAAE,EAAE;QACrC,eAAe,CAAC,kBAAkB,CAAC,CAAC;QACpC,eAAe,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC,CAAC;IACnC,CAAC,CAAC;IAEF,OAAO,CACL,CAAC,uBAAU,CACT,IAAI,CAAC,CAAC,IAAI,CAAC,CACX,KAAK,CAAC,CAAC,sCAAe,CAAC,MAAM,CAAC,CAC9B,YAAY,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAC3D,iBAAiB,CAAC,CAAC,iBAAiB,CAAC,CACrC,IAAI,KAAK,CAAC,CAEV;MAAA,CAAC,GAAG,IAAI,CACN,CAAC,uBAAU,CACT,GAAG,CAAC,CAAC,GAAG,CAAC,CACT,KAAK,CAAC,CAAC,MAAM,CAAC,CACd,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,IAAI,eAAe,CAAC,CACpB,UAAU,CAAC,CAAC;gBACV,UAAU,EAAE,SAAS;gBACrB,GAAG,eAAe,EAAE,UAAU;aAC/B,CAAC,CACF,YAAY,CAAC,CAAC,mBAAmB,CAAC,CAClC,UAAU,CAAC,CAAC,iBAAiB,CAAC,EAC9B,CACH,CACH;IAAA,EAAE,uBAAU,CAAC,CACd,CAAC;AACJ,CAAC,CAAC;AA9CW,QAAA,aAAa,iBA8CxB","sourcesContent":["import {\n AvatarBaseShape,\n AvatarNetworkSize,\n} from '@metamask/design-system-shared';\nimport type { ImageErrorEventData } from 'expo-image';\nimport React, { useState } from 'react';\n\nimport { AvatarBase } from '../AvatarBase';\nimport { ImageOrSvg } from '../temp-components/ImageOrSvg';\n\nimport type { AvatarNetworkProps } from './AvatarNetwork.types';\n\nexport const AvatarNetwork = ({\n src,\n size = AvatarNetworkSize.Md,\n name,\n fallbackText,\n fallbackTextProps,\n imageOrSvgProps,\n ...props\n}: AvatarNetworkProps) => {\n const [finalFallbackText, setFallbackText] = useState<string>('');\n\n const backupFallbackText = fallbackText || name?.[0] || '?';\n const onImageErrorHandler = (e: ImageErrorEventData) => {\n setFallbackText(backupFallbackText);\n imageOrSvgProps?.onImageError?.(e);\n };\n\n const onSvgErrorHandler = (e: Error) => {\n setFallbackText(backupFallbackText);\n imageOrSvgProps?.onSvgError?.(e);\n };\n\n return (\n <AvatarBase\n size={size}\n shape={AvatarBaseShape.Square}\n fallbackText={src ? finalFallbackText : backupFallbackText}\n fallbackTextProps={fallbackTextProps}\n {...props}\n >\n {src && (\n <ImageOrSvg\n src={src}\n width={'100%'}\n height={'100%'}\n {...imageOrSvgProps}\n imageProps={{\n contentFit: 'contain',\n ...imageOrSvgProps?.imageProps,\n }}\n onImageError={onImageErrorHandler}\n onSvgError={onSvgErrorHandler}\n />\n )}\n </AvatarBase>\n );\n};\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarNetwork.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarNetwork/AvatarNetwork.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"AvatarNetwork.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarNetwork/AvatarNetwork.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAmB,cAAc;AAKxC,OAAO,KAAK,EAAE,kBAAkB,EAAE,kCAA8B;AAEhE,eAAO,MAAM,aAAa,oFAQvB,kBAAkB,sBAsCpB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarNetwork.d.mts","sourceRoot":"","sources":["../../../src/components/AvatarNetwork/AvatarNetwork.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"AvatarNetwork.d.mts","sourceRoot":"","sources":["../../../src/components/AvatarNetwork/AvatarNetwork.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAmB,cAAc;AAKxC,OAAO,KAAK,EAAE,kBAAkB,EAAE,kCAA8B;AAEhE,eAAO,MAAM,aAAa,oFAQvB,kBAAkB,sBAsCpB,CAAC"}
|
|
@@ -22,7 +22,7 @@ export const AvatarNetwork = ({ src, size = AvatarNetworkSize.Md, name, fallback
|
|
|
22
22
|
};
|
|
23
23
|
return (<AvatarBase size={size} shape={AvatarBaseShape.Square} fallbackText={src ? finalFallbackText : backupFallbackText} fallbackTextProps={fallbackTextProps} {...props}>
|
|
24
24
|
{src && (<ImageOrSvg src={src} width={'100%'} height={'100%'} {...imageOrSvgProps} imageProps={{
|
|
25
|
-
|
|
25
|
+
contentFit: 'contain',
|
|
26
26
|
...imageOrSvgProps?.imageProps,
|
|
27
27
|
}} onImageError={onImageErrorHandler} onSvgError={onSvgErrorHandler}/>)}
|
|
28
28
|
</AvatarBase>);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarNetwork.mjs","sourceRoot":"","sources":["../../../src/components/AvatarNetwork/AvatarNetwork.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EACL,eAAe,EACf,iBAAiB,EAClB,uCAAuC;
|
|
1
|
+
{"version":3,"file":"AvatarNetwork.mjs","sourceRoot":"","sources":["../../../src/components/AvatarNetwork/AvatarNetwork.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EACL,eAAe,EACf,iBAAiB,EAClB,uCAAuC;AAExC,OAAO,QAAO,EAAE,QAAQ,EAAE,cAAc;;AAExC,OAAO,EAAE,UAAU,EAAE,gCAAsB;AAC3C,OAAO,EAAE,UAAU,EAAE,gDAAsC;AAI3D,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAC5B,GAAG,EACH,IAAI,GAAG,iBAAiB,CAAC,EAAE,EAC3B,IAAI,EACJ,YAAY,EACZ,iBAAiB,EACjB,eAAe,EACf,GAAG,KAAK,EACW,EAAE,EAAE;IACvB,MAAM,CAAC,iBAAiB,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAS,EAAE,CAAC,CAAC;IAElE,MAAM,kBAAkB,GAAG,YAAY,IAAI,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,GAAG,CAAC;IAC5D,MAAM,mBAAmB,GAAG,CAAC,CAAsB,EAAE,EAAE;QACrD,eAAe,CAAC,kBAAkB,CAAC,CAAC;QACpC,eAAe,EAAE,YAAY,EAAE,CAAC,CAAC,CAAC,CAAC;IACrC,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAAG,CAAC,CAAQ,EAAE,EAAE;QACrC,eAAe,CAAC,kBAAkB,CAAC,CAAC;QACpC,eAAe,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC,CAAC;IACnC,CAAC,CAAC;IAEF,OAAO,CACL,CAAC,UAAU,CACT,IAAI,CAAC,CAAC,IAAI,CAAC,CACX,KAAK,CAAC,CAAC,eAAe,CAAC,MAAM,CAAC,CAC9B,YAAY,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAC3D,iBAAiB,CAAC,CAAC,iBAAiB,CAAC,CACrC,IAAI,KAAK,CAAC,CAEV;MAAA,CAAC,GAAG,IAAI,CACN,CAAC,UAAU,CACT,GAAG,CAAC,CAAC,GAAG,CAAC,CACT,KAAK,CAAC,CAAC,MAAM,CAAC,CACd,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,IAAI,eAAe,CAAC,CACpB,UAAU,CAAC,CAAC;gBACV,UAAU,EAAE,SAAS;gBACrB,GAAG,eAAe,EAAE,UAAU;aAC/B,CAAC,CACF,YAAY,CAAC,CAAC,mBAAmB,CAAC,CAClC,UAAU,CAAC,CAAC,iBAAiB,CAAC,EAC9B,CACH,CACH;IAAA,EAAE,UAAU,CAAC,CACd,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {\n AvatarBaseShape,\n AvatarNetworkSize,\n} from '@metamask/design-system-shared';\nimport type { ImageErrorEventData } from 'expo-image';\nimport React, { useState } from 'react';\n\nimport { AvatarBase } from '../AvatarBase';\nimport { ImageOrSvg } from '../temp-components/ImageOrSvg';\n\nimport type { AvatarNetworkProps } from './AvatarNetwork.types';\n\nexport const AvatarNetwork = ({\n src,\n size = AvatarNetworkSize.Md,\n name,\n fallbackText,\n fallbackTextProps,\n imageOrSvgProps,\n ...props\n}: AvatarNetworkProps) => {\n const [finalFallbackText, setFallbackText] = useState<string>('');\n\n const backupFallbackText = fallbackText || name?.[0] || '?';\n const onImageErrorHandler = (e: ImageErrorEventData) => {\n setFallbackText(backupFallbackText);\n imageOrSvgProps?.onImageError?.(e);\n };\n\n const onSvgErrorHandler = (e: Error) => {\n setFallbackText(backupFallbackText);\n imageOrSvgProps?.onSvgError?.(e);\n };\n\n return (\n <AvatarBase\n size={size}\n shape={AvatarBaseShape.Square}\n fallbackText={src ? finalFallbackText : backupFallbackText}\n fallbackTextProps={fallbackTextProps}\n {...props}\n >\n {src && (\n <ImageOrSvg\n src={src}\n width={'100%'}\n height={'100%'}\n {...imageOrSvgProps}\n imageProps={{\n contentFit: 'contain',\n ...imageOrSvgProps?.imageProps,\n }}\n onImageError={onImageErrorHandler}\n onSvgError={onSvgErrorHandler}\n />\n )}\n </AvatarBase>\n );\n};\n"]}
|
|
@@ -41,7 +41,7 @@ const AvatarToken = ({ src, size = design_system_shared_1.AvatarTokenSize.Md, na
|
|
|
41
41
|
};
|
|
42
42
|
return (<AvatarBase_1.AvatarBase size={size} shape={design_system_shared_1.AvatarBaseShape.Circle} fallbackText={src ? finalFallbackText : backupFallbackText} fallbackTextProps={fallbackTextProps} {...props}>
|
|
43
43
|
{src && (<ImageOrSvg_1.ImageOrSvg src={src} width={'100%'} height={'100%'} {...imageOrSvgProps} imageProps={{
|
|
44
|
-
|
|
44
|
+
contentFit: 'contain',
|
|
45
45
|
...imageOrSvgProps?.imageProps,
|
|
46
46
|
}} onImageError={onImageErrorHandler} onSvgError={onSvgErrorHandler}/>)}
|
|
47
47
|
</AvatarBase_1.AvatarBase>);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarToken.cjs","sourceRoot":"","sources":["../../../src/components/AvatarToken/AvatarToken.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,yEAGwC;
|
|
1
|
+
{"version":3,"file":"AvatarToken.cjs","sourceRoot":"","sources":["../../../src/components/AvatarToken/AvatarToken.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,yEAGwC;AAExC,+CAAwC;AAExC,wDAA2C;AAC3C,wEAA2D;AAIpD,MAAM,WAAW,GAAG,CAAC,EAC1B,GAAG,EACH,IAAI,GAAG,sCAAe,CAAC,EAAE,EACzB,IAAI,EACJ,YAAY,EACZ,iBAAiB,EACjB,eAAe,EACf,GAAG,KAAK,EACS,EAAE,EAAE;IACrB,MAAM,CAAC,iBAAiB,EAAE,eAAe,CAAC,GAAG,IAAA,gBAAQ,EAAS,EAAE,CAAC,CAAC;IAClE,MAAM,kBAAkB,GAAG,YAAY,IAAI,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,GAAG,CAAC;IAE5D,MAAM,mBAAmB,GAAG,CAAC,CAAsB,EAAE,EAAE;QACrD,eAAe,CAAC,kBAAkB,CAAC,CAAC;QACpC,eAAe,EAAE,YAAY,EAAE,CAAC,CAAC,CAAC,CAAC;IACrC,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAAG,CAAC,CAAQ,EAAE,EAAE;QACrC,eAAe,CAAC,kBAAkB,CAAC,CAAC;QACpC,eAAe,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC,CAAC;IACnC,CAAC,CAAC;IAEF,OAAO,CACL,CAAC,uBAAU,CACT,IAAI,CAAC,CAAC,IAAI,CAAC,CACX,KAAK,CAAC,CAAC,sCAAe,CAAC,MAAM,CAAC,CAC9B,YAAY,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAC3D,iBAAiB,CAAC,CAAC,iBAAiB,CAAC,CACrC,IAAI,KAAK,CAAC,CAEV;MAAA,CAAC,GAAG,IAAI,CACN,CAAC,uBAAU,CACT,GAAG,CAAC,CAAC,GAAG,CAAC,CACT,KAAK,CAAC,CAAC,MAAM,CAAC,CACd,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,IAAI,eAAe,CAAC,CACpB,UAAU,CAAC,CAAC;gBACV,UAAU,EAAE,SAAS;gBACrB,GAAG,eAAe,EAAE,UAAU;aAC/B,CAAC,CACF,YAAY,CAAC,CAAC,mBAAmB,CAAC,CAClC,UAAU,CAAC,CAAC,iBAAiB,CAAC,EAC9B,CACH,CACH;IAAA,EAAE,uBAAU,CAAC,CACd,CAAC;AACJ,CAAC,CAAC;AA9CW,QAAA,WAAW,eA8CtB","sourcesContent":["import {\n AvatarBaseShape,\n AvatarTokenSize,\n} from '@metamask/design-system-shared';\nimport type { ImageErrorEventData } from 'expo-image';\nimport React, { useState } from 'react';\n\nimport { AvatarBase } from '../AvatarBase';\nimport { ImageOrSvg } from '../temp-components/ImageOrSvg';\n\nimport type { AvatarTokenProps } from './AvatarToken.types';\n\nexport const AvatarToken = ({\n src,\n size = AvatarTokenSize.Md,\n name,\n fallbackText,\n fallbackTextProps,\n imageOrSvgProps,\n ...props\n}: AvatarTokenProps) => {\n const [finalFallbackText, setFallbackText] = useState<string>('');\n const backupFallbackText = fallbackText || name?.[0] || '?';\n\n const onImageErrorHandler = (e: ImageErrorEventData) => {\n setFallbackText(backupFallbackText);\n imageOrSvgProps?.onImageError?.(e);\n };\n\n const onSvgErrorHandler = (e: Error) => {\n setFallbackText(backupFallbackText);\n imageOrSvgProps?.onSvgError?.(e);\n };\n\n return (\n <AvatarBase\n size={size}\n shape={AvatarBaseShape.Circle}\n fallbackText={src ? finalFallbackText : backupFallbackText}\n fallbackTextProps={fallbackTextProps}\n {...props}\n >\n {src && (\n <ImageOrSvg\n src={src}\n width={'100%'}\n height={'100%'}\n {...imageOrSvgProps}\n imageProps={{\n contentFit: 'contain',\n ...imageOrSvgProps?.imageProps,\n }}\n onImageError={onImageErrorHandler}\n onSvgError={onSvgErrorHandler}\n />\n )}\n </AvatarBase>\n );\n};\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarToken.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarToken/AvatarToken.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"AvatarToken.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarToken/AvatarToken.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAmB,cAAc;AAKxC,OAAO,KAAK,EAAE,gBAAgB,EAAE,gCAA4B;AAE5D,eAAO,MAAM,WAAW,oFAQrB,gBAAgB,sBAsClB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarToken.d.mts","sourceRoot":"","sources":["../../../src/components/AvatarToken/AvatarToken.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"AvatarToken.d.mts","sourceRoot":"","sources":["../../../src/components/AvatarToken/AvatarToken.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAmB,cAAc;AAKxC,OAAO,KAAK,EAAE,gBAAgB,EAAE,gCAA4B;AAE5D,eAAO,MAAM,WAAW,oFAQrB,gBAAgB,sBAsClB,CAAC"}
|
|
@@ -22,7 +22,7 @@ export const AvatarToken = ({ src, size = AvatarTokenSize.Md, name, fallbackText
|
|
|
22
22
|
};
|
|
23
23
|
return (<AvatarBase size={size} shape={AvatarBaseShape.Circle} fallbackText={src ? finalFallbackText : backupFallbackText} fallbackTextProps={fallbackTextProps} {...props}>
|
|
24
24
|
{src && (<ImageOrSvg src={src} width={'100%'} height={'100%'} {...imageOrSvgProps} imageProps={{
|
|
25
|
-
|
|
25
|
+
contentFit: 'contain',
|
|
26
26
|
...imageOrSvgProps?.imageProps,
|
|
27
27
|
}} onImageError={onImageErrorHandler} onSvgError={onSvgErrorHandler}/>)}
|
|
28
28
|
</AvatarBase>);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarToken.mjs","sourceRoot":"","sources":["../../../src/components/AvatarToken/AvatarToken.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EACL,eAAe,EACf,eAAe,EAChB,uCAAuC;
|
|
1
|
+
{"version":3,"file":"AvatarToken.mjs","sourceRoot":"","sources":["../../../src/components/AvatarToken/AvatarToken.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EACL,eAAe,EACf,eAAe,EAChB,uCAAuC;AAExC,OAAO,QAAO,EAAE,QAAQ,EAAE,cAAc;;AAExC,OAAO,EAAE,UAAU,EAAE,gCAAsB;AAC3C,OAAO,EAAE,UAAU,EAAE,gDAAsC;AAI3D,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAC1B,GAAG,EACH,IAAI,GAAG,eAAe,CAAC,EAAE,EACzB,IAAI,EACJ,YAAY,EACZ,iBAAiB,EACjB,eAAe,EACf,GAAG,KAAK,EACS,EAAE,EAAE;IACrB,MAAM,CAAC,iBAAiB,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAS,EAAE,CAAC,CAAC;IAClE,MAAM,kBAAkB,GAAG,YAAY,IAAI,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,GAAG,CAAC;IAE5D,MAAM,mBAAmB,GAAG,CAAC,CAAsB,EAAE,EAAE;QACrD,eAAe,CAAC,kBAAkB,CAAC,CAAC;QACpC,eAAe,EAAE,YAAY,EAAE,CAAC,CAAC,CAAC,CAAC;IACrC,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAAG,CAAC,CAAQ,EAAE,EAAE;QACrC,eAAe,CAAC,kBAAkB,CAAC,CAAC;QACpC,eAAe,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC,CAAC;IACnC,CAAC,CAAC;IAEF,OAAO,CACL,CAAC,UAAU,CACT,IAAI,CAAC,CAAC,IAAI,CAAC,CACX,KAAK,CAAC,CAAC,eAAe,CAAC,MAAM,CAAC,CAC9B,YAAY,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAC3D,iBAAiB,CAAC,CAAC,iBAAiB,CAAC,CACrC,IAAI,KAAK,CAAC,CAEV;MAAA,CAAC,GAAG,IAAI,CACN,CAAC,UAAU,CACT,GAAG,CAAC,CAAC,GAAG,CAAC,CACT,KAAK,CAAC,CAAC,MAAM,CAAC,CACd,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,IAAI,eAAe,CAAC,CACpB,UAAU,CAAC,CAAC;gBACV,UAAU,EAAE,SAAS;gBACrB,GAAG,eAAe,EAAE,UAAU;aAC/B,CAAC,CACF,YAAY,CAAC,CAAC,mBAAmB,CAAC,CAClC,UAAU,CAAC,CAAC,iBAAiB,CAAC,EAC9B,CACH,CACH;IAAA,EAAE,UAAU,CAAC,CACd,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {\n AvatarBaseShape,\n AvatarTokenSize,\n} from '@metamask/design-system-shared';\nimport type { ImageErrorEventData } from 'expo-image';\nimport React, { useState } from 'react';\n\nimport { AvatarBase } from '../AvatarBase';\nimport { ImageOrSvg } from '../temp-components/ImageOrSvg';\n\nimport type { AvatarTokenProps } from './AvatarToken.types';\n\nexport const AvatarToken = ({\n src,\n size = AvatarTokenSize.Md,\n name,\n fallbackText,\n fallbackTextProps,\n imageOrSvgProps,\n ...props\n}: AvatarTokenProps) => {\n const [finalFallbackText, setFallbackText] = useState<string>('');\n const backupFallbackText = fallbackText || name?.[0] || '?';\n\n const onImageErrorHandler = (e: ImageErrorEventData) => {\n setFallbackText(backupFallbackText);\n imageOrSvgProps?.onImageError?.(e);\n };\n\n const onSvgErrorHandler = (e: Error) => {\n setFallbackText(backupFallbackText);\n imageOrSvgProps?.onSvgError?.(e);\n };\n\n return (\n <AvatarBase\n size={size}\n shape={AvatarBaseShape.Circle}\n fallbackText={src ? finalFallbackText : backupFallbackText}\n fallbackTextProps={fallbackTextProps}\n {...props}\n >\n {src && (\n <ImageOrSvg\n src={src}\n width={'100%'}\n height={'100%'}\n {...imageOrSvgProps}\n imageProps={{\n contentFit: 'contain',\n ...imageOrSvgProps?.imageProps,\n }}\n onImageError={onImageErrorHandler}\n onSvgError={onSvgErrorHandler}\n />\n )}\n </AvatarBase>\n );\n};\n"]}
|
|
@@ -1,107 +1,43 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var
|
|
3
|
-
|
|
4
|
-
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
-
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
-
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
-
}
|
|
8
|
-
Object.defineProperty(o, k2, desc);
|
|
9
|
-
}) : (function(o, m, k, k2) {
|
|
10
|
-
if (k2 === undefined) k2 = k;
|
|
11
|
-
o[k2] = m[k];
|
|
12
|
-
}));
|
|
13
|
-
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
-
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
-
}) : function(o, v) {
|
|
16
|
-
o["default"] = v;
|
|
17
|
-
});
|
|
18
|
-
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
-
if (mod && mod.__esModule) return mod;
|
|
20
|
-
var result = {};
|
|
21
|
-
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
-
__setModuleDefault(result, mod);
|
|
23
|
-
return result;
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
24
4
|
};
|
|
25
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
26
6
|
exports.BadgeWrapper = void 0;
|
|
27
7
|
const design_system_shared_1 = require("@metamask/design-system-shared");
|
|
28
8
|
const design_system_twrnc_preset_1 = require("@metamask/design-system-twrnc-preset");
|
|
29
|
-
const react_1 =
|
|
9
|
+
const react_1 = __importDefault(require("react"));
|
|
30
10
|
const react_native_1 = require("react-native");
|
|
11
|
+
const CIRCULAR_ANCHOR_EDGE_INSET = '7%';
|
|
12
|
+
const RECTANGULAR_ANCHOR_EDGE_INSET = '11%';
|
|
31
13
|
const BadgeWrapper = ({ children, childrenContainerProps, badge, badgeContainerProps, position = design_system_shared_1.BadgeWrapperPosition.BottomRight, positionAnchorShape = design_system_shared_1.BadgeWrapperPositionAnchorShape.Circular, positionXOffset = 0, positionYOffset = 0, customPosition, twClassName, style, ...props }) => {
|
|
32
14
|
const tw = (0, design_system_twrnc_preset_1.useTailwind)();
|
|
33
|
-
const
|
|
34
|
-
|
|
35
|
-
const
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
? 0
|
|
60
|
-
: anchorHeight * 0.1464;
|
|
61
|
-
// This is to center the badge in the corner of the anchor element
|
|
62
|
-
const badgeCenteringXOffset = badgeWidth / 2;
|
|
63
|
-
const badgeCenteringYOffset = badgeHeight / 2;
|
|
64
|
-
const finalXOffset = anchorShapeXOffset - badgeCenteringXOffset + positionXOffset;
|
|
65
|
-
const finalYOffset = anchorShapeYOffset - badgeCenteringYOffset + positionYOffset;
|
|
66
|
-
switch (position) {
|
|
67
|
-
case design_system_shared_1.BadgeWrapperPosition.TopRight:
|
|
68
|
-
return {
|
|
69
|
-
top: finalYOffset,
|
|
70
|
-
right: finalXOffset,
|
|
71
|
-
};
|
|
72
|
-
case design_system_shared_1.BadgeWrapperPosition.BottomLeft:
|
|
73
|
-
return {
|
|
74
|
-
bottom: finalYOffset,
|
|
75
|
-
left: finalXOffset,
|
|
76
|
-
};
|
|
77
|
-
case design_system_shared_1.BadgeWrapperPosition.TopLeft:
|
|
78
|
-
return {
|
|
79
|
-
top: finalYOffset,
|
|
80
|
-
left: finalXOffset,
|
|
81
|
-
};
|
|
82
|
-
case design_system_shared_1.BadgeWrapperPosition.BottomRight:
|
|
83
|
-
default:
|
|
84
|
-
return {
|
|
85
|
-
bottom: finalYOffset,
|
|
86
|
-
right: finalXOffset,
|
|
87
|
-
};
|
|
88
|
-
}
|
|
89
|
-
}, [
|
|
90
|
-
position,
|
|
91
|
-
positionAnchorShape,
|
|
92
|
-
anchorWidth,
|
|
93
|
-
anchorHeight,
|
|
94
|
-
badgeWidth,
|
|
95
|
-
badgeHeight,
|
|
96
|
-
positionXOffset,
|
|
97
|
-
positionYOffset,
|
|
98
|
-
customPosition,
|
|
99
|
-
]);
|
|
100
|
-
return (<react_native_1.View {...props} style={[tw.style('relative self-start', twClassName), style]}>
|
|
101
|
-
<react_native_1.View onLayout={getAnchorSize} {...childrenContainerProps}>
|
|
102
|
-
{children}
|
|
103
|
-
</react_native_1.View>
|
|
104
|
-
<react_native_1.View onLayout={getBadgeSize} style={[tw.style('absolute'), { ...finalPositions }]} {...badgeContainerProps}>
|
|
15
|
+
const isTop = position === design_system_shared_1.BadgeWrapperPosition.TopRight ||
|
|
16
|
+
position === design_system_shared_1.BadgeWrapperPosition.TopLeft;
|
|
17
|
+
const isLeft = position === design_system_shared_1.BadgeWrapperPosition.TopLeft ||
|
|
18
|
+
position === design_system_shared_1.BadgeWrapperPosition.BottomLeft;
|
|
19
|
+
const edgeInset = positionAnchorShape === design_system_shared_1.BadgeWrapperPositionAnchorShape.Circular
|
|
20
|
+
? CIRCULAR_ANCHOR_EDGE_INSET
|
|
21
|
+
: RECTANGULAR_ANCHOR_EDGE_INSET;
|
|
22
|
+
const finalPositions = customPosition
|
|
23
|
+
? customPosition
|
|
24
|
+
: {
|
|
25
|
+
...(isTop ? { top: edgeInset } : { bottom: edgeInset }),
|
|
26
|
+
...(isLeft ? { left: edgeInset } : { right: edgeInset }),
|
|
27
|
+
transform: [
|
|
28
|
+
{ translateX: isLeft ? '-50%' : '50%' },
|
|
29
|
+
{ translateY: isTop ? '-50%' : '50%' },
|
|
30
|
+
{ translateX: positionXOffset },
|
|
31
|
+
{ translateY: positionYOffset },
|
|
32
|
+
],
|
|
33
|
+
};
|
|
34
|
+
return (<react_native_1.View {...props} style={[tw.style('relative flex-row self-start', twClassName), style]}>
|
|
35
|
+
<react_native_1.View {...childrenContainerProps}>{children}</react_native_1.View>
|
|
36
|
+
<react_native_1.View {...badgeContainerProps} style={[
|
|
37
|
+
tw.style('absolute items-center justify-center'),
|
|
38
|
+
finalPositions,
|
|
39
|
+
badgeContainerProps?.style,
|
|
40
|
+
]}>
|
|
105
41
|
{badge}
|
|
106
42
|
</react_native_1.View>
|
|
107
43
|
</react_native_1.View>);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BadgeWrapper.cjs","sourceRoot":"","sources":["../../../src/components/BadgeWrapper/BadgeWrapper.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"BadgeWrapper.cjs","sourceRoot":"","sources":["../../../src/components/BadgeWrapper/BadgeWrapper.tsx"],"names":[],"mappings":";;;;;;AAAA,yEAGwC;AACxC,qFAAmE;AACnE,kDAA0B;AAE1B,+CAAoC;AAIpC,MAAM,0BAA0B,GAAmB,IAAI,CAAC;AACxD,MAAM,6BAA6B,GAAmB,KAAK,CAAC;AAErD,MAAM,YAAY,GAAG,CAAC,EAC3B,QAAQ,EACR,sBAAsB,EACtB,KAAK,EACL,mBAAmB,EACnB,QAAQ,GAAG,2CAAoB,CAAC,WAAW,EAC3C,mBAAmB,GAAG,sDAA+B,CAAC,QAAQ,EAC9D,eAAe,GAAG,CAAC,EACnB,eAAe,GAAG,CAAC,EACnB,cAAc,EACd,WAAW,EACX,KAAK,EACL,GAAG,KAAK,EACU,EAAE,EAAE;IACtB,MAAM,EAAE,GAAG,IAAA,wCAAW,GAAE,CAAC;IACzB,MAAM,KAAK,GACT,QAAQ,KAAK,2CAAoB,CAAC,QAAQ;QAC1C,QAAQ,KAAK,2CAAoB,CAAC,OAAO,CAAC;IAC5C,MAAM,MAAM,GACV,QAAQ,KAAK,2CAAoB,CAAC,OAAO;QACzC,QAAQ,KAAK,2CAAoB,CAAC,UAAU,CAAC;IAC/C,MAAM,SAAS,GACb,mBAAmB,KAAK,sDAA+B,CAAC,QAAQ;QAC9D,CAAC,CAAC,0BAA0B;QAC5B,CAAC,CAAC,6BAA6B,CAAC;IACpC,MAAM,cAAc,GAAyB,cAAc;QACzD,CAAC,CAAE,cAAuC;QAC1C,CAAC,CAAC;YACE,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC;YACvD,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC;YACxD,SAAS,EAAE;gBACT,EAAE,UAAU,EAAE,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,EAAE;gBACvC,EAAE,UAAU,EAAE,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,EAAE;gBACtC,EAAE,UAAU,EAAE,eAAe,EAAE;gBAC/B,EAAE,UAAU,EAAE,eAAe,EAAE;aAChC;SACF,CAAC;IAEN,OAAO,CACL,CAAC,mBAAI,CACH,IAAI,KAAK,CAAC,CACV,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,8BAA8B,EAAE,WAAW,CAAC,EAAE,KAAK,CAAC,CAAC,CAEtE;MAAA,CAAC,mBAAI,CAAC,IAAI,sBAAsB,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,mBAAI,CAClD;MAAA,CAAC,mBAAI,CACH,IAAI,mBAAmB,CAAC,CACxB,KAAK,CAAC,CAAC;YACL,EAAE,CAAC,KAAK,CAAC,sCAAsC,CAAC;YAChD,cAAc;YACd,mBAAmB,EAAE,KAAK;SAC3B,CAAC,CAEF;QAAA,CAAC,KAAK,CACR;MAAA,EAAE,mBAAI,CACR;IAAA,EAAE,mBAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAxDW,QAAA,YAAY,gBAwDvB","sourcesContent":["import {\n BadgeWrapperPosition,\n BadgeWrapperPositionAnchorShape,\n} from '@metamask/design-system-shared';\nimport { useTailwind } from '@metamask/design-system-twrnc-preset';\nimport React from 'react';\nimport type { DimensionValue, StyleProp, ViewStyle } from 'react-native';\nimport { View } from 'react-native';\n\nimport type { BadgeWrapperProps } from './BadgeWrapper.types';\n\nconst CIRCULAR_ANCHOR_EDGE_INSET: DimensionValue = '7%';\nconst RECTANGULAR_ANCHOR_EDGE_INSET: DimensionValue = '11%';\n\nexport const BadgeWrapper = ({\n children,\n childrenContainerProps,\n badge,\n badgeContainerProps,\n position = BadgeWrapperPosition.BottomRight,\n positionAnchorShape = BadgeWrapperPositionAnchorShape.Circular,\n positionXOffset = 0,\n positionYOffset = 0,\n customPosition,\n twClassName,\n style,\n ...props\n}: BadgeWrapperProps) => {\n const tw = useTailwind();\n const isTop =\n position === BadgeWrapperPosition.TopRight ||\n position === BadgeWrapperPosition.TopLeft;\n const isLeft =\n position === BadgeWrapperPosition.TopLeft ||\n position === BadgeWrapperPosition.BottomLeft;\n const edgeInset =\n positionAnchorShape === BadgeWrapperPositionAnchorShape.Circular\n ? CIRCULAR_ANCHOR_EDGE_INSET\n : RECTANGULAR_ANCHOR_EDGE_INSET;\n const finalPositions: StyleProp<ViewStyle> = customPosition\n ? (customPosition as StyleProp<ViewStyle>)\n : {\n ...(isTop ? { top: edgeInset } : { bottom: edgeInset }),\n ...(isLeft ? { left: edgeInset } : { right: edgeInset }),\n transform: [\n { translateX: isLeft ? '-50%' : '50%' },\n { translateY: isTop ? '-50%' : '50%' },\n { translateX: positionXOffset },\n { translateY: positionYOffset },\n ],\n };\n\n return (\n <View\n {...props}\n style={[tw.style('relative flex-row self-start', twClassName), style]}\n >\n <View {...childrenContainerProps}>{children}</View>\n <View\n {...badgeContainerProps}\n style={[\n tw.style('absolute items-center justify-center'),\n finalPositions,\n badgeContainerProps?.style,\n ]}\n >\n {badge}\n </View>\n </View>\n );\n};\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BadgeWrapper.d.cts","sourceRoot":"","sources":["../../../src/components/BadgeWrapper/BadgeWrapper.tsx"],"names":[],"mappings":"AAKA,OAAO,
|
|
1
|
+
{"version":3,"file":"BadgeWrapper.d.cts","sourceRoot":"","sources":["../../../src/components/BadgeWrapper/BadgeWrapper.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,cAAc;AAI1B,OAAO,KAAK,EAAE,iBAAiB,EAAE,iCAA6B;AAK9D,eAAO,MAAM,YAAY,oLAatB,iBAAiB,sBA2CnB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BadgeWrapper.d.mts","sourceRoot":"","sources":["../../../src/components/BadgeWrapper/BadgeWrapper.tsx"],"names":[],"mappings":"AAKA,OAAO,
|
|
1
|
+
{"version":3,"file":"BadgeWrapper.d.mts","sourceRoot":"","sources":["../../../src/components/BadgeWrapper/BadgeWrapper.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,cAAc;AAI1B,OAAO,KAAK,EAAE,iBAAiB,EAAE,iCAA6B;AAK9D,eAAO,MAAM,YAAY,oLAatB,iBAAiB,sBA2CnB,CAAC"}
|
|
@@ -6,83 +6,39 @@ function $importDefault(module) {
|
|
|
6
6
|
}
|
|
7
7
|
import { BadgeWrapperPosition, BadgeWrapperPositionAnchorShape } from "@metamask/design-system-shared";
|
|
8
8
|
import { useTailwind } from "@metamask/design-system-twrnc-preset";
|
|
9
|
-
import $React
|
|
9
|
+
import $React from "react";
|
|
10
10
|
const React = $importDefault($React);
|
|
11
11
|
import { View } from "react-native";
|
|
12
|
+
const CIRCULAR_ANCHOR_EDGE_INSET = '7%';
|
|
13
|
+
const RECTANGULAR_ANCHOR_EDGE_INSET = '11%';
|
|
12
14
|
export const BadgeWrapper = ({ children, childrenContainerProps, badge, badgeContainerProps, position = BadgeWrapperPosition.BottomRight, positionAnchorShape = BadgeWrapperPositionAnchorShape.Circular, positionXOffset = 0, positionYOffset = 0, customPosition, twClassName, style, ...props }) => {
|
|
13
15
|
const tw = useTailwind();
|
|
14
|
-
const
|
|
15
|
-
|
|
16
|
-
const
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
? 0
|
|
41
|
-
: anchorHeight * 0.1464;
|
|
42
|
-
// This is to center the badge in the corner of the anchor element
|
|
43
|
-
const badgeCenteringXOffset = badgeWidth / 2;
|
|
44
|
-
const badgeCenteringYOffset = badgeHeight / 2;
|
|
45
|
-
const finalXOffset = anchorShapeXOffset - badgeCenteringXOffset + positionXOffset;
|
|
46
|
-
const finalYOffset = anchorShapeYOffset - badgeCenteringYOffset + positionYOffset;
|
|
47
|
-
switch (position) {
|
|
48
|
-
case BadgeWrapperPosition.TopRight:
|
|
49
|
-
return {
|
|
50
|
-
top: finalYOffset,
|
|
51
|
-
right: finalXOffset,
|
|
52
|
-
};
|
|
53
|
-
case BadgeWrapperPosition.BottomLeft:
|
|
54
|
-
return {
|
|
55
|
-
bottom: finalYOffset,
|
|
56
|
-
left: finalXOffset,
|
|
57
|
-
};
|
|
58
|
-
case BadgeWrapperPosition.TopLeft:
|
|
59
|
-
return {
|
|
60
|
-
top: finalYOffset,
|
|
61
|
-
left: finalXOffset,
|
|
62
|
-
};
|
|
63
|
-
case BadgeWrapperPosition.BottomRight:
|
|
64
|
-
default:
|
|
65
|
-
return {
|
|
66
|
-
bottom: finalYOffset,
|
|
67
|
-
right: finalXOffset,
|
|
68
|
-
};
|
|
69
|
-
}
|
|
70
|
-
}, [
|
|
71
|
-
position,
|
|
72
|
-
positionAnchorShape,
|
|
73
|
-
anchorWidth,
|
|
74
|
-
anchorHeight,
|
|
75
|
-
badgeWidth,
|
|
76
|
-
badgeHeight,
|
|
77
|
-
positionXOffset,
|
|
78
|
-
positionYOffset,
|
|
79
|
-
customPosition,
|
|
80
|
-
]);
|
|
81
|
-
return (<View {...props} style={[tw.style('relative self-start', twClassName), style]}>
|
|
82
|
-
<View onLayout={getAnchorSize} {...childrenContainerProps}>
|
|
83
|
-
{children}
|
|
84
|
-
</View>
|
|
85
|
-
<View onLayout={getBadgeSize} style={[tw.style('absolute'), { ...finalPositions }]} {...badgeContainerProps}>
|
|
16
|
+
const isTop = position === BadgeWrapperPosition.TopRight ||
|
|
17
|
+
position === BadgeWrapperPosition.TopLeft;
|
|
18
|
+
const isLeft = position === BadgeWrapperPosition.TopLeft ||
|
|
19
|
+
position === BadgeWrapperPosition.BottomLeft;
|
|
20
|
+
const edgeInset = positionAnchorShape === BadgeWrapperPositionAnchorShape.Circular
|
|
21
|
+
? CIRCULAR_ANCHOR_EDGE_INSET
|
|
22
|
+
: RECTANGULAR_ANCHOR_EDGE_INSET;
|
|
23
|
+
const finalPositions = customPosition
|
|
24
|
+
? customPosition
|
|
25
|
+
: {
|
|
26
|
+
...(isTop ? { top: edgeInset } : { bottom: edgeInset }),
|
|
27
|
+
...(isLeft ? { left: edgeInset } : { right: edgeInset }),
|
|
28
|
+
transform: [
|
|
29
|
+
{ translateX: isLeft ? '-50%' : '50%' },
|
|
30
|
+
{ translateY: isTop ? '-50%' : '50%' },
|
|
31
|
+
{ translateX: positionXOffset },
|
|
32
|
+
{ translateY: positionYOffset },
|
|
33
|
+
],
|
|
34
|
+
};
|
|
35
|
+
return (<View {...props} style={[tw.style('relative flex-row self-start', twClassName), style]}>
|
|
36
|
+
<View {...childrenContainerProps}>{children}</View>
|
|
37
|
+
<View {...badgeContainerProps} style={[
|
|
38
|
+
tw.style('absolute items-center justify-center'),
|
|
39
|
+
finalPositions,
|
|
40
|
+
badgeContainerProps?.style,
|
|
41
|
+
]}>
|
|
86
42
|
{badge}
|
|
87
43
|
</View>
|
|
88
44
|
</View>);
|