@metamask/design-system-react-native 0.41.0 → 0.42.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 +15 -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/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,19 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
7
7
|
|
|
8
8
|
## [Unreleased]
|
|
9
9
|
|
|
10
|
+
## [0.42.0]
|
|
11
|
+
|
|
12
|
+
### Changed
|
|
13
|
+
|
|
14
|
+
- **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))
|
|
15
|
+
- Adds `expo-image` (`>=3.0.0`) as a required peer dependency
|
|
16
|
+
- `imageProps.resizeMode` overrides no longer apply; use `contentFit` instead
|
|
17
|
+
- `onImageLoad` and `onImageError` receive `expo-image` event payloads instead of React Native `NativeSyntheticEvent` wrappers
|
|
18
|
+
- See [Migration Guide](./MIGRATION.md#from-version-0410-to-0420)
|
|
19
|
+
- **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))
|
|
20
|
+
- Coordinates with deferred PureBlack scaffolding removals now published in those packages
|
|
21
|
+
- See [design-tokens Migration Guide](../design-tokens/MIGRATION.md#from-version-9x-to-1000)
|
|
22
|
+
|
|
10
23
|
## [0.41.0]
|
|
11
24
|
|
|
12
25
|
### Added
|
|
@@ -697,7 +710,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
697
710
|
- Full TypeScript support with type definitions and enums
|
|
698
711
|
- React Native integration with TWRNC preset support
|
|
699
712
|
|
|
700
|
-
[Unreleased]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.
|
|
713
|
+
[Unreleased]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.42.0...HEAD
|
|
714
|
+
[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
715
|
[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
716
|
[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
717
|
[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"]}
|
|
@@ -169,5 +169,5 @@ export declare const TextField: import("react").ForwardRefExoticComponent<Omit<i
|
|
|
169
169
|
twClassName?: string | undefined;
|
|
170
170
|
style?: import("react-native").StyleProp<import("react-native").ViewStyle>;
|
|
171
171
|
testID?: string | undefined;
|
|
172
|
-
} & Omit<import("../Box/index.cjs").BoxProps, "children" | "style" | "testID" | "onBlur" | "onFocus" | "accessible" | "twClassName" | "startAccessory" | "endAccessory" | "isDisabled" | "
|
|
172
|
+
} & Omit<import("../Box/index.cjs").BoxProps, "children" | "style" | "testID" | "onBlur" | "onFocus" | "accessible" | "twClassName" | "startAccessory" | "endAccessory" | "isDisabled" | "placeholder" | "value" | "autoFocus" | "onChangeText" | "isReadOnly" | "isError" | "inputElement" | "inputProps" | "inputRef"> & import("react").RefAttributes<View>>;
|
|
173
173
|
//# sourceMappingURL=TextField.d.cts.map
|
|
@@ -169,5 +169,5 @@ export declare const TextField: import("react").ForwardRefExoticComponent<Omit<i
|
|
|
169
169
|
twClassName?: string | undefined;
|
|
170
170
|
style?: import("react-native").StyleProp<import("react-native").ViewStyle>;
|
|
171
171
|
testID?: string | undefined;
|
|
172
|
-
} & Omit<import("../Box/index.mjs").BoxProps, "children" | "style" | "testID" | "onBlur" | "onFocus" | "accessible" | "twClassName" | "startAccessory" | "endAccessory" | "isDisabled" | "
|
|
172
|
+
} & Omit<import("../Box/index.mjs").BoxProps, "children" | "style" | "testID" | "onBlur" | "onFocus" | "accessible" | "twClassName" | "startAccessory" | "endAccessory" | "isDisabled" | "placeholder" | "value" | "autoFocus" | "onChangeText" | "isReadOnly" | "isError" | "inputElement" | "inputProps" | "inputRef"> & import("react").RefAttributes<View>>;
|
|
173
173
|
//# sourceMappingURL=TextField.d.mts.map
|
|
@@ -170,7 +170,7 @@ export declare const TextFieldSearch: React.ForwardRefExoticComponent<Omit<impor
|
|
|
170
170
|
twClassName?: string | undefined;
|
|
171
171
|
style?: import("react-native").StyleProp<import("react-native").ViewStyle>;
|
|
172
172
|
testID?: string | undefined;
|
|
173
|
-
} & Omit<import("../index.cjs").BoxProps, "children" | "style" | "testID" | "onBlur" | "onFocus" | "accessible" | "twClassName" | "startAccessory" | "endAccessory" | "isDisabled" | "
|
|
173
|
+
} & Omit<import("../index.cjs").BoxProps, "children" | "style" | "testID" | "onBlur" | "onFocus" | "accessible" | "twClassName" | "startAccessory" | "endAccessory" | "isDisabled" | "placeholder" | "value" | "autoFocus" | "onChangeText" | "isReadOnly" | "isError" | "inputElement" | "inputProps" | "inputRef"> & {
|
|
174
174
|
clearButtonProps?: Partial<import("../ButtonIcon/index.cjs").ButtonIconProps> | undefined;
|
|
175
175
|
onPressClearButton: () => void;
|
|
176
176
|
} & React.RefAttributes<View>>;
|
|
@@ -170,7 +170,7 @@ export declare const TextFieldSearch: React.ForwardRefExoticComponent<Omit<impor
|
|
|
170
170
|
twClassName?: string | undefined;
|
|
171
171
|
style?: import("react-native").StyleProp<import("react-native").ViewStyle>;
|
|
172
172
|
testID?: string | undefined;
|
|
173
|
-
} & Omit<import("../index.mjs").BoxProps, "children" | "style" | "testID" | "onBlur" | "onFocus" | "accessible" | "twClassName" | "startAccessory" | "endAccessory" | "isDisabled" | "
|
|
173
|
+
} & Omit<import("../index.mjs").BoxProps, "children" | "style" | "testID" | "onBlur" | "onFocus" | "accessible" | "twClassName" | "startAccessory" | "endAccessory" | "isDisabled" | "placeholder" | "value" | "autoFocus" | "onChangeText" | "isReadOnly" | "isError" | "inputElement" | "inputProps" | "inputRef"> & {
|
|
174
174
|
clearButtonProps?: Partial<import("../ButtonIcon/index.mjs").ButtonIconProps> | undefined;
|
|
175
175
|
onPressClearButton: () => void;
|
|
176
176
|
} & React.RefAttributes<View>>;
|
|
@@ -24,13 +24,13 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
24
24
|
};
|
|
25
25
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
26
26
|
exports.ImageOrSvg = void 0;
|
|
27
|
+
const expo_image_1 = require("expo-image");
|
|
27
28
|
const react_1 = __importStar(require("react"));
|
|
28
|
-
const react_native_1 = require("react-native");
|
|
29
29
|
const react_native_svg_1 = require("react-native-svg");
|
|
30
30
|
const ImageOrSvg = ({ src, width, height, onImageLoad, onImageError, onSvgError, style, imageProps, svgProps, }) => {
|
|
31
31
|
// CASE 1: local image (src is a number)
|
|
32
32
|
if (typeof src === 'number') {
|
|
33
|
-
return (<
|
|
33
|
+
return (<expo_image_1.Image source={src} style={[{ width, height }, style]} contentFit="contain" onLoad={onImageLoad} onError={onImageError} {...imageProps}/>);
|
|
34
34
|
}
|
|
35
35
|
// CASE 2: Local SVG component (src is a React component)
|
|
36
36
|
if (typeof src === 'function') {
|
|
@@ -68,7 +68,10 @@ const ImageOrSvg = ({ src, width, height, onImageLoad, onImageError, onSvgError,
|
|
|
68
68
|
if (isSvg && typeof src === 'object' && 'uri' in src && src.uri) {
|
|
69
69
|
return (<react_native_svg_1.SvgUri uri={src.uri} width={width} height={height} onError={onSvgError} style={style} {...svgProps}/>);
|
|
70
70
|
}
|
|
71
|
-
|
|
71
|
+
// expo-image caches by URI on disk by default, unlike react-native's
|
|
72
|
+
// plain `Image`, which otherwise re-fetches the same remote icon every
|
|
73
|
+
// time this component remounts (e.g. on list re-renders).
|
|
74
|
+
return (<expo_image_1.Image source={src} style={[{ width, height }, style]} contentFit="contain" onLoad={onImageLoad} onError={onImageError} {...imageProps}/>);
|
|
72
75
|
};
|
|
73
76
|
exports.ImageOrSvg = ImageOrSvg;
|
|
74
77
|
//# sourceMappingURL=ImageOrSvg.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ImageOrSvg.cjs","sourceRoot":"","sources":["../../../../src/components/temp-components/ImageOrSvg/ImageOrSvg.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAgE;AAChE
|
|
1
|
+
{"version":3,"file":"ImageOrSvg.cjs","sourceRoot":"","sources":["../../../../src/components/temp-components/ImageOrSvg/ImageOrSvg.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,2CAAmC;AACnC,+CAAgE;AAChE,uDAA0C;AAInC,MAAM,UAAU,GAAG,CAAC,EACzB,GAAG,EACH,KAAK,EACL,MAAM,EACN,WAAW,EACX,YAAY,EACZ,UAAU,EACV,KAAK,EACL,UAAU,EACV,QAAQ,GACQ,EAAE,EAAE;IACpB,wCAAwC;IACxC,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE;QAC3B,OAAO,CACL,CAAC,kBAAK,CACJ,MAAM,CAAC,CAAC,GAAG,CAAC,CACZ,KAAK,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,EAAS,EAAE,KAAK,CAAC,CAAC,CACzC,UAAU,CAAC,SAAS,CACpB,MAAM,CAAC,CAAC,WAAW,CAAC,CACpB,OAAO,CAAC,CAAC,YAAY,CAAC,CACtB,IAAI,UAAU,CAAC,EACf,CACH,CAAC;KACH;IAED,yDAAyD;IACzD,IAAI,OAAO,GAAG,KAAK,UAAU,EAAE;QAC7B,MAAM,QAAQ,GAAG,GAAG,CAAC;QACrB,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,QAAQ,CAAC,EAAG,CAAC;KACjE;IAED,4DAA4D;IAC5D,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,EAAU,KAAK,CAAC,CAAC;IAEnD,MAAM,mBAAmB,GAAG,IAAA,mBAAW,EAAC,KAAK,EAAE,GAAW,EAAE,EAAE;QAC5D,IAAI;YACF,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,GAAG,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC;YACtD,yDAAyD;YACzD,MAAM,WAAW,GAAG,QAAQ,CAAC,OAAO,CAAC,GAAG,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC;YAC/D,OAAO,WAAW,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC;SAC9C;QAAC,MAAM;YACN,OAAO,KAAK,CAAC;SACd;IACH,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,GAAG,CAAC,GAAG,EAAE;YACX,MAAM,QAAQ,GAAG,GAAG,CAAC,GAAG,CAAC,WAAW,EAAE,CAAC;YACvC,MAAM,WAAW,GACf,QAAQ,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,QAAQ,CAAC,UAAU,CAAC,oBAAoB,CAAC,CAAC;YACzE,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;gBAChC,mBAAmB,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;aAC7C;iBAAM;gBACL,QAAQ,CAAC,WAAW,CAAC,CAAC;aACvB;SACF;aAAM;YACL,QAAQ,CAAC,KAAK,CAAC,CAAC;SACjB;IACH,CAAC,EAAE,CAAC,GAAG,EAAE,mBAAmB,CAAC,CAAC,CAAC;IAE/B,IAAI,KAAK,IAAI,OAAO,GAAG,KAAK,QAAQ,IAAI,KAAK,IAAI,GAAG,IAAI,GAAG,CAAC,GAAG,EAAE;QAC/D,OAAO,CACL,CAAC,yBAAM,CACL,GAAG,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,CACb,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,OAAO,CAAC,CAAC,UAAU,CAAC,CACpB,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,IAAI,QAAQ,CAAC,EACb,CACH,CAAC;KACH;IACD,qEAAqE;IACrE,uEAAuE;IACvE,0DAA0D;IAC1D,OAAO,CACL,CAAC,kBAAK,CACJ,MAAM,CAAC,CAAC,GAAU,CAAC,CACnB,KAAK,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,EAAS,EAAE,KAAK,CAAC,CAAC,CACzC,UAAU,CAAC,SAAS,CACpB,MAAM,CAAC,CAAC,WAAW,CAAC,CACpB,OAAO,CAAC,CAAC,YAAY,CAAC,CACtB,IAAI,UAAU,CAAC,EACf,CACH,CAAC;AACJ,CAAC,CAAC;AArFW,QAAA,UAAU,cAqFrB","sourcesContent":["import { Image } from 'expo-image';\nimport React, { useState, useCallback, useEffect } from 'react';\nimport { SvgUri } from 'react-native-svg';\n\nimport type { ImageOrSvgProps } from './ImageOrSvg.types';\n\nexport const ImageOrSvg = ({\n src,\n width,\n height,\n onImageLoad,\n onImageError,\n onSvgError,\n style,\n imageProps,\n svgProps,\n}: ImageOrSvgProps) => {\n // CASE 1: local image (src is a number)\n if (typeof src === 'number') {\n return (\n <Image\n source={src}\n style={[{ width, height } as any, style]}\n contentFit=\"contain\"\n onLoad={onImageLoad}\n onError={onImageError}\n {...imageProps}\n />\n );\n }\n\n // CASE 2: Local SVG component (src is a React component)\n if (typeof src === 'function') {\n const LocalSvg = src;\n return <LocalSvg width={width} height={height} {...svgProps} />;\n }\n\n // CASE 3: Remote image or SVG (src is an object with a uri)\n const [isSvg, setIsSvg] = useState<boolean>(false);\n\n const checkSvgContentType = useCallback(async (uri: string) => {\n try {\n const response = await fetch(uri, { method: 'HEAD' });\n // If no header is returned, fallback to an empty string.\n const contentType = response.headers.get('Content-Type') || '';\n return contentType.includes('image/svg+xml');\n } catch {\n return false;\n }\n }, []);\n\n useEffect(() => {\n if (src.uri) {\n const uriLower = src.uri.toLowerCase();\n const isLikelySvg =\n uriLower.endsWith('.svg') || uriLower.startsWith('data:image/svg+xml');\n if (!src.uri.startsWith('data:')) {\n checkSvgContentType(src.uri).then(setIsSvg);\n } else {\n setIsSvg(isLikelySvg);\n }\n } else {\n setIsSvg(false);\n }\n }, [src, checkSvgContentType]);\n\n if (isSvg && typeof src === 'object' && 'uri' in src && src.uri) {\n return (\n <SvgUri\n uri={src.uri}\n width={width}\n height={height}\n onError={onSvgError}\n style={style}\n {...svgProps}\n />\n );\n }\n // expo-image caches by URI on disk by default, unlike react-native's\n // plain `Image`, which otherwise re-fetches the same remote icon every\n // time this component remounts (e.g. on list re-renders).\n return (\n <Image\n source={src as any}\n style={[{ width, height } as any, style]}\n contentFit=\"contain\"\n onLoad={onImageLoad}\n onError={onImageError}\n {...imageProps}\n />\n );\n};\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ImageOrSvg.d.cts","sourceRoot":"","sources":["../../../../src/components/temp-components/ImageOrSvg/ImageOrSvg.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ImageOrSvg.d.cts","sourceRoot":"","sources":["../../../../src/components/temp-components/ImageOrSvg/ImageOrSvg.tsx"],"names":[],"mappings":"AACA,OAAO,KAA2C,cAAc;AAGhE,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAE1D,eAAO,MAAM,UAAU,gGAUpB,eAAe,sBA2EjB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ImageOrSvg.d.mts","sourceRoot":"","sources":["../../../../src/components/temp-components/ImageOrSvg/ImageOrSvg.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ImageOrSvg.d.mts","sourceRoot":"","sources":["../../../../src/components/temp-components/ImageOrSvg/ImageOrSvg.tsx"],"names":[],"mappings":"AACA,OAAO,KAA2C,cAAc;AAGhE,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAE1D,eAAO,MAAM,UAAU,gGAUpB,eAAe,sBA2EjB,CAAC"}
|
|
@@ -4,14 +4,14 @@ function $importDefault(module) {
|
|
|
4
4
|
}
|
|
5
5
|
return module;
|
|
6
6
|
}
|
|
7
|
+
import { Image } from "expo-image";
|
|
7
8
|
import $React, { useState, useCallback, useEffect } from "react";
|
|
8
9
|
const React = $importDefault($React);
|
|
9
|
-
import { Image } from "react-native";
|
|
10
10
|
import { SvgUri } from "react-native-svg";
|
|
11
11
|
export const ImageOrSvg = ({ src, width, height, onImageLoad, onImageError, onSvgError, style, imageProps, svgProps, }) => {
|
|
12
12
|
// CASE 1: local image (src is a number)
|
|
13
13
|
if (typeof src === 'number') {
|
|
14
|
-
return (<Image source={src} style={[{ width, height }, style]}
|
|
14
|
+
return (<Image source={src} style={[{ width, height }, style]} contentFit="contain" onLoad={onImageLoad} onError={onImageError} {...imageProps}/>);
|
|
15
15
|
}
|
|
16
16
|
// CASE 2: Local SVG component (src is a React component)
|
|
17
17
|
if (typeof src === 'function') {
|
|
@@ -49,6 +49,9 @@ export const ImageOrSvg = ({ src, width, height, onImageLoad, onImageError, onSv
|
|
|
49
49
|
if (isSvg && typeof src === 'object' && 'uri' in src && src.uri) {
|
|
50
50
|
return (<SvgUri uri={src.uri} width={width} height={height} onError={onSvgError} style={style} {...svgProps}/>);
|
|
51
51
|
}
|
|
52
|
-
|
|
52
|
+
// expo-image caches by URI on disk by default, unlike react-native's
|
|
53
|
+
// plain `Image`, which otherwise re-fetches the same remote icon every
|
|
54
|
+
// time this component remounts (e.g. on list re-renders).
|
|
55
|
+
return (<Image source={src} style={[{ width, height }, style]} contentFit="contain" onLoad={onImageLoad} onError={onImageError} {...imageProps}/>);
|
|
53
56
|
};
|
|
54
57
|
//# sourceMappingURL=ImageOrSvg.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ImageOrSvg.mjs","sourceRoot":"","sources":["../../../../src/components/temp-components/ImageOrSvg/ImageOrSvg.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,QAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,SAAS,EAAE,cAAc;;AAChE,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"ImageOrSvg.mjs","sourceRoot":"","sources":["../../../../src/components/temp-components/ImageOrSvg/ImageOrSvg.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,KAAK,EAAE,mBAAmB;AACnC,OAAO,QAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,SAAS,EAAE,cAAc;;AAChE,OAAO,EAAE,MAAM,EAAE,yBAAyB;AAI1C,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EACzB,GAAG,EACH,KAAK,EACL,MAAM,EACN,WAAW,EACX,YAAY,EACZ,UAAU,EACV,KAAK,EACL,UAAU,EACV,QAAQ,GACQ,EAAE,EAAE;IACpB,wCAAwC;IACxC,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE;QAC3B,OAAO,CACL,CAAC,KAAK,CACJ,MAAM,CAAC,CAAC,GAAG,CAAC,CACZ,KAAK,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,EAAS,EAAE,KAAK,CAAC,CAAC,CACzC,UAAU,CAAC,SAAS,CACpB,MAAM,CAAC,CAAC,WAAW,CAAC,CACpB,OAAO,CAAC,CAAC,YAAY,CAAC,CACtB,IAAI,UAAU,CAAC,EACf,CACH,CAAC;KACH;IAED,yDAAyD;IACzD,IAAI,OAAO,GAAG,KAAK,UAAU,EAAE;QAC7B,MAAM,QAAQ,GAAG,GAAG,CAAC;QACrB,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,QAAQ,CAAC,EAAG,CAAC;KACjE;IAED,4DAA4D;IAC5D,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAC;IAEnD,MAAM,mBAAmB,GAAG,WAAW,CAAC,KAAK,EAAE,GAAW,EAAE,EAAE;QAC5D,IAAI;YACF,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,GAAG,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC;YACtD,yDAAyD;YACzD,MAAM,WAAW,GAAG,QAAQ,CAAC,OAAO,CAAC,GAAG,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC;YAC/D,OAAO,WAAW,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC;SAC9C;QAAC,MAAM;YACN,OAAO,KAAK,CAAC;SACd;IACH,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,GAAG,CAAC,GAAG,EAAE;YACX,MAAM,QAAQ,GAAG,GAAG,CAAC,GAAG,CAAC,WAAW,EAAE,CAAC;YACvC,MAAM,WAAW,GACf,QAAQ,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,QAAQ,CAAC,UAAU,CAAC,oBAAoB,CAAC,CAAC;YACzE,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;gBAChC,mBAAmB,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;aAC7C;iBAAM;gBACL,QAAQ,CAAC,WAAW,CAAC,CAAC;aACvB;SACF;aAAM;YACL,QAAQ,CAAC,KAAK,CAAC,CAAC;SACjB;IACH,CAAC,EAAE,CAAC,GAAG,EAAE,mBAAmB,CAAC,CAAC,CAAC;IAE/B,IAAI,KAAK,IAAI,OAAO,GAAG,KAAK,QAAQ,IAAI,KAAK,IAAI,GAAG,IAAI,GAAG,CAAC,GAAG,EAAE;QAC/D,OAAO,CACL,CAAC,MAAM,CACL,GAAG,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,CACb,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,OAAO,CAAC,CAAC,UAAU,CAAC,CACpB,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,IAAI,QAAQ,CAAC,EACb,CACH,CAAC;KACH;IACD,qEAAqE;IACrE,uEAAuE;IACvE,0DAA0D;IAC1D,OAAO,CACL,CAAC,KAAK,CACJ,MAAM,CAAC,CAAC,GAAU,CAAC,CACnB,KAAK,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,EAAS,EAAE,KAAK,CAAC,CAAC,CACzC,UAAU,CAAC,SAAS,CACpB,MAAM,CAAC,CAAC,WAAW,CAAC,CACpB,OAAO,CAAC,CAAC,YAAY,CAAC,CACtB,IAAI,UAAU,CAAC,EACf,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { Image } from 'expo-image';\nimport React, { useState, useCallback, useEffect } from 'react';\nimport { SvgUri } from 'react-native-svg';\n\nimport type { ImageOrSvgProps } from './ImageOrSvg.types';\n\nexport const ImageOrSvg = ({\n src,\n width,\n height,\n onImageLoad,\n onImageError,\n onSvgError,\n style,\n imageProps,\n svgProps,\n}: ImageOrSvgProps) => {\n // CASE 1: local image (src is a number)\n if (typeof src === 'number') {\n return (\n <Image\n source={src}\n style={[{ width, height } as any, style]}\n contentFit=\"contain\"\n onLoad={onImageLoad}\n onError={onImageError}\n {...imageProps}\n />\n );\n }\n\n // CASE 2: Local SVG component (src is a React component)\n if (typeof src === 'function') {\n const LocalSvg = src;\n return <LocalSvg width={width} height={height} {...svgProps} />;\n }\n\n // CASE 3: Remote image or SVG (src is an object with a uri)\n const [isSvg, setIsSvg] = useState<boolean>(false);\n\n const checkSvgContentType = useCallback(async (uri: string) => {\n try {\n const response = await fetch(uri, { method: 'HEAD' });\n // If no header is returned, fallback to an empty string.\n const contentType = response.headers.get('Content-Type') || '';\n return contentType.includes('image/svg+xml');\n } catch {\n return false;\n }\n }, []);\n\n useEffect(() => {\n if (src.uri) {\n const uriLower = src.uri.toLowerCase();\n const isLikelySvg =\n uriLower.endsWith('.svg') || uriLower.startsWith('data:image/svg+xml');\n if (!src.uri.startsWith('data:')) {\n checkSvgContentType(src.uri).then(setIsSvg);\n } else {\n setIsSvg(isLikelySvg);\n }\n } else {\n setIsSvg(false);\n }\n }, [src, checkSvgContentType]);\n\n if (isSvg && typeof src === 'object' && 'uri' in src && src.uri) {\n return (\n <SvgUri\n uri={src.uri}\n width={width}\n height={height}\n onError={onSvgError}\n style={style}\n {...svgProps}\n />\n );\n }\n // expo-image caches by URI on disk by default, unlike react-native's\n // plain `Image`, which otherwise re-fetches the same remote icon every\n // time this component remounts (e.g. on list re-renders).\n return (\n <Image\n source={src as any}\n style={[{ width, height } as any, style]}\n contentFit=\"contain\"\n onLoad={onImageLoad}\n onError={onImageError}\n {...imageProps}\n />\n );\n};\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ImageOrSvg.types.cjs","sourceRoot":"","sources":["../../../../src/components/temp-components/ImageOrSvg/ImageOrSvg.types.ts"],"names":[],"mappings":"","sourcesContent":["import type {\n
|
|
1
|
+
{"version":3,"file":"ImageOrSvg.types.cjs","sourceRoot":"","sources":["../../../../src/components/temp-components/ImageOrSvg/ImageOrSvg.types.ts"],"names":[],"mappings":"","sourcesContent":["import type {\n ImageErrorEventData,\n ImageLoadEventData,\n ImageProps,\n} from 'expo-image';\nimport type { StyleProp, ImageStyle } from 'react-native';\nimport type { SvgProps } from 'react-native-svg';\n\n/**\n * Base props common to all variations.\n */\nexport type ImageOrSvgBaseProps = {\n /**\n * Optional prop to set the width of the image/SVG.\n * Accepts numbers (pixels) or string values (like percentages).\n */\n width?: number | string;\n /**\n * Optional prop to set the height of the image/SVG.\n * Accepts numbers (pixels) or string values (like percentages).\n */\n height?: number | string;\n /**\n * Optional prop to set callback triggered when the image has loaded successfully.\n */\n onImageLoad?: (event: ImageLoadEventData) => void;\n /**\n * Optional prop to set callback triggered when there is an error rendering the image.\n */\n onImageError?: (errorEvent: ImageErrorEventData) => void;\n /**\n * Optional prop to set callback triggered when there is an error rendering the SVG.\n */\n onSvgError?: (error: Error) => void;\n /**\n * Optional prop for style overrides for the image/SVG container.\n */\n style?: StyleProp<ImageStyle>;\n /**\n * Additional props to pass to the Image component, excluding\n * the 'source' prop (which is handled separately).\n */\n imageProps?: Omit<ImageProps, 'source'>;\n /**\n * Additional props to pass to the Svg component, excluding\n * the 'uri' prop (which is handled separately).\n */\n svgProps?: Omit<SvgProps, 'uri'>;\n};\n\n/**\n * Defines the source type for an image or SVG.\n *\n * The source can be one of the following:\n * - A number representing a locally imported image resource.\n * - A React component (with SvgProps) representing a locally imported SVG.\n * - An object with an optional `uri` property for remote images or SVGs.\n */\nexport type ImageOrSvgSrc =\n | number // For local imported image\n | React.ComponentType<SvgProps> // For local imported svg\n | { uri?: string }; // For remote image or SVG (with a uri property)\n\nexport type ImageOrSvgProps = ImageOrSvgBaseProps & {\n /**\n * Required prop for the source of the image or SVG.\n * This prop determines whether a local image, a local SVG component,\n * or a remote image/SVG (via URI) is rendered.\n */\n src: ImageOrSvgSrc;\n};\n"]}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type { ImageErrorEventData, ImageLoadEventData, ImageProps } from "expo-image";
|
|
2
|
+
import type { StyleProp, ImageStyle } from "react-native";
|
|
2
3
|
import type { SvgProps } from "react-native-svg";
|
|
3
4
|
/**
|
|
4
5
|
* Base props common to all variations.
|
|
@@ -17,11 +18,11 @@ export type ImageOrSvgBaseProps = {
|
|
|
17
18
|
/**
|
|
18
19
|
* Optional prop to set callback triggered when the image has loaded successfully.
|
|
19
20
|
*/
|
|
20
|
-
onImageLoad?: (event:
|
|
21
|
+
onImageLoad?: (event: ImageLoadEventData) => void;
|
|
21
22
|
/**
|
|
22
23
|
* Optional prop to set callback triggered when there is an error rendering the image.
|
|
23
24
|
*/
|
|
24
|
-
onImageError?: (errorEvent:
|
|
25
|
+
onImageError?: (errorEvent: ImageErrorEventData) => void;
|
|
25
26
|
/**
|
|
26
27
|
* Optional prop to set callback triggered when there is an error rendering the SVG.
|
|
27
28
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ImageOrSvg.types.d.cts","sourceRoot":"","sources":["../../../../src/components/temp-components/ImageOrSvg/ImageOrSvg.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,
|
|
1
|
+
{"version":3,"file":"ImageOrSvg.types.d.cts","sourceRoot":"","sources":["../../../../src/components/temp-components/ImageOrSvg/ImageOrSvg.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,mBAAmB,EACnB,kBAAkB,EAClB,UAAU,EACX,mBAAmB;AACpB,OAAO,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,qBAAqB;AAC1D,OAAO,KAAK,EAAE,QAAQ,EAAE,yBAAyB;AAEjD;;GAEG;AACH,MAAM,MAAM,mBAAmB,GAAG;IAChC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB;;OAEG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAClD;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,UAAU,EAAE,mBAAmB,KAAK,IAAI,CAAC;IACzD;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACpC;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC;IAC9B;;;OAGG;IACH,UAAU,CAAC,EAAE,IAAI,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;IACxC;;;OAGG;IACH,QAAQ,CAAC,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;CAClC,CAAC;AAEF;;;;;;;GAOG;AACH,MAAM,MAAM,aAAa,GACrB,MAAM,GACN,KAAK,CAAC,aAAa,CAAC,QAAQ,CAAC,GAC7B;IAAE,GAAG,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAErB,MAAM,MAAM,eAAe,GAAG,mBAAmB,GAAG;IAClD;;;;OAIG;IACH,GAAG,EAAE,aAAa,CAAC;CACpB,CAAC"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type { ImageErrorEventData, ImageLoadEventData, ImageProps } from "expo-image";
|
|
2
|
+
import type { StyleProp, ImageStyle } from "react-native";
|
|
2
3
|
import type { SvgProps } from "react-native-svg";
|
|
3
4
|
/**
|
|
4
5
|
* Base props common to all variations.
|
|
@@ -17,11 +18,11 @@ export type ImageOrSvgBaseProps = {
|
|
|
17
18
|
/**
|
|
18
19
|
* Optional prop to set callback triggered when the image has loaded successfully.
|
|
19
20
|
*/
|
|
20
|
-
onImageLoad?: (event:
|
|
21
|
+
onImageLoad?: (event: ImageLoadEventData) => void;
|
|
21
22
|
/**
|
|
22
23
|
* Optional prop to set callback triggered when there is an error rendering the image.
|
|
23
24
|
*/
|
|
24
|
-
onImageError?: (errorEvent:
|
|
25
|
+
onImageError?: (errorEvent: ImageErrorEventData) => void;
|
|
25
26
|
/**
|
|
26
27
|
* Optional prop to set callback triggered when there is an error rendering the SVG.
|
|
27
28
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ImageOrSvg.types.d.mts","sourceRoot":"","sources":["../../../../src/components/temp-components/ImageOrSvg/ImageOrSvg.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,
|
|
1
|
+
{"version":3,"file":"ImageOrSvg.types.d.mts","sourceRoot":"","sources":["../../../../src/components/temp-components/ImageOrSvg/ImageOrSvg.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,mBAAmB,EACnB,kBAAkB,EAClB,UAAU,EACX,mBAAmB;AACpB,OAAO,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,qBAAqB;AAC1D,OAAO,KAAK,EAAE,QAAQ,EAAE,yBAAyB;AAEjD;;GAEG;AACH,MAAM,MAAM,mBAAmB,GAAG;IAChC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB;;OAEG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAClD;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,UAAU,EAAE,mBAAmB,KAAK,IAAI,CAAC;IACzD;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACpC;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC;IAC9B;;;OAGG;IACH,UAAU,CAAC,EAAE,IAAI,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;IACxC;;;OAGG;IACH,QAAQ,CAAC,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;CAClC,CAAC;AAEF;;;;;;;GAOG;AACH,MAAM,MAAM,aAAa,GACrB,MAAM,GACN,KAAK,CAAC,aAAa,CAAC,QAAQ,CAAC,GAC7B;IAAE,GAAG,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAErB,MAAM,MAAM,eAAe,GAAG,mBAAmB,GAAG;IAClD;;;;OAIG;IACH,GAAG,EAAE,aAAa,CAAC;CACpB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ImageOrSvg.types.mjs","sourceRoot":"","sources":["../../../../src/components/temp-components/ImageOrSvg/ImageOrSvg.types.ts"],"names":[],"mappings":"","sourcesContent":["import type {\n
|
|
1
|
+
{"version":3,"file":"ImageOrSvg.types.mjs","sourceRoot":"","sources":["../../../../src/components/temp-components/ImageOrSvg/ImageOrSvg.types.ts"],"names":[],"mappings":"","sourcesContent":["import type {\n ImageErrorEventData,\n ImageLoadEventData,\n ImageProps,\n} from 'expo-image';\nimport type { StyleProp, ImageStyle } from 'react-native';\nimport type { SvgProps } from 'react-native-svg';\n\n/**\n * Base props common to all variations.\n */\nexport type ImageOrSvgBaseProps = {\n /**\n * Optional prop to set the width of the image/SVG.\n * Accepts numbers (pixels) or string values (like percentages).\n */\n width?: number | string;\n /**\n * Optional prop to set the height of the image/SVG.\n * Accepts numbers (pixels) or string values (like percentages).\n */\n height?: number | string;\n /**\n * Optional prop to set callback triggered when the image has loaded successfully.\n */\n onImageLoad?: (event: ImageLoadEventData) => void;\n /**\n * Optional prop to set callback triggered when there is an error rendering the image.\n */\n onImageError?: (errorEvent: ImageErrorEventData) => void;\n /**\n * Optional prop to set callback triggered when there is an error rendering the SVG.\n */\n onSvgError?: (error: Error) => void;\n /**\n * Optional prop for style overrides for the image/SVG container.\n */\n style?: StyleProp<ImageStyle>;\n /**\n * Additional props to pass to the Image component, excluding\n * the 'source' prop (which is handled separately).\n */\n imageProps?: Omit<ImageProps, 'source'>;\n /**\n * Additional props to pass to the Svg component, excluding\n * the 'uri' prop (which is handled separately).\n */\n svgProps?: Omit<SvgProps, 'uri'>;\n};\n\n/**\n * Defines the source type for an image or SVG.\n *\n * The source can be one of the following:\n * - A number representing a locally imported image resource.\n * - A React component (with SvgProps) representing a locally imported SVG.\n * - An object with an optional `uri` property for remote images or SVGs.\n */\nexport type ImageOrSvgSrc =\n | number // For local imported image\n | React.ComponentType<SvgProps> // For local imported svg\n | { uri?: string }; // For remote image or SVG (with a uri property)\n\nexport type ImageOrSvgProps = ImageOrSvgBaseProps & {\n /**\n * Required prop for the source of the image or SVG.\n * This prop determines whether a local image, a local SVG component,\n * or a remote image/SVG (via URI) is rendered.\n */\n src: ImageOrSvgSrc;\n};\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@metamask/design-system-react-native",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.42.0",
|
|
4
4
|
"description": "Design System React Native",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"MetaMask",
|
|
@@ -47,7 +47,7 @@
|
|
|
47
47
|
"test:watch": "NODE_OPTIONS=--experimental-vm-modules jest --watch"
|
|
48
48
|
},
|
|
49
49
|
"dependencies": {
|
|
50
|
-
"@metamask/design-system-shared": "^0.
|
|
50
|
+
"@metamask/design-system-shared": "^0.34.0",
|
|
51
51
|
"react-native-jazzicon": "^0.1.2"
|
|
52
52
|
},
|
|
53
53
|
"devDependencies": {
|
|
@@ -57,9 +57,9 @@
|
|
|
57
57
|
"@babel/preset-typescript": "^7.23.3",
|
|
58
58
|
"@figma/code-connect": "^1.4.9",
|
|
59
59
|
"@gorhom/bottom-sheet": "^5.1.3",
|
|
60
|
-
"@metamask/auto-changelog": "^6.2.
|
|
61
|
-
"@metamask/design-system-twrnc-preset": "^0.
|
|
62
|
-
"@metamask/design-tokens": "^
|
|
60
|
+
"@metamask/auto-changelog": "^6.2.1",
|
|
61
|
+
"@metamask/design-system-twrnc-preset": "^0.10.0",
|
|
62
|
+
"@metamask/design-tokens": "^10.0.0",
|
|
63
63
|
"@metamask/utils": "^11.11.0",
|
|
64
64
|
"@react-native/babel-preset": "0.81.5",
|
|
65
65
|
"@react-native/typescript-config": "0.81.5",
|
|
@@ -73,6 +73,7 @@
|
|
|
73
73
|
"@types/react-test-renderer": "^19.1.0",
|
|
74
74
|
"babel-jest": "^29.7.0",
|
|
75
75
|
"deepmerge": "^4.2.2",
|
|
76
|
+
"expo-image": "~3.0.11",
|
|
76
77
|
"jest": "^29.7.0",
|
|
77
78
|
"react": "19.1.0",
|
|
78
79
|
"react-native": "0.81.5",
|
|
@@ -89,9 +90,10 @@
|
|
|
89
90
|
"typescript": "~5.2.2"
|
|
90
91
|
},
|
|
91
92
|
"peerDependencies": {
|
|
92
|
-
"@metamask/design-system-twrnc-preset": "^0.
|
|
93
|
-
"@metamask/design-tokens": "^
|
|
93
|
+
"@metamask/design-system-twrnc-preset": "^0.10.0",
|
|
94
|
+
"@metamask/design-tokens": "^10.0.0",
|
|
94
95
|
"@metamask/utils": "^11.11.0",
|
|
96
|
+
"expo-image": ">=3.0.0",
|
|
95
97
|
"lodash": "^4.17.21",
|
|
96
98
|
"react": ">=18.2.0",
|
|
97
99
|
"react-native": ">=0.76.0",
|