@metamask/design-system-react-native 0.40.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 +30 -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/BannerBase/BannerBase.cjs +88 -11
- package/dist/components/BannerBase/BannerBase.cjs.map +1 -1
- package/dist/components/BannerBase/BannerBase.d.cts.map +1 -1
- package/dist/components/BannerBase/BannerBase.d.mts.map +1 -1
- package/dist/components/BannerBase/BannerBase.mjs +66 -9
- package/dist/components/BannerBase/BannerBase.mjs.map +1 -1
- package/dist/components/Checkbox/Checkbox.cjs +2 -4
- package/dist/components/Checkbox/Checkbox.cjs.map +1 -1
- package/dist/components/Checkbox/Checkbox.d.cts.map +1 -1
- package/dist/components/Checkbox/Checkbox.d.mts.map +1 -1
- package/dist/components/Checkbox/Checkbox.mjs +2 -4
- package/dist/components/Checkbox/Checkbox.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/Toast/Toast.types.cjs.map +1 -1
- package/dist/components/Toast/Toast.types.d.cts +6 -0
- package/dist/components/Toast/Toast.types.d.cts.map +1 -1
- package/dist/components/Toast/Toast.types.d.mts +6 -0
- package/dist/components/Toast/Toast.types.d.mts.map +1 -1
- package/dist/components/Toast/Toast.types.mjs.map +1 -1
- package/dist/components/Toast/Toaster.cjs +9 -9
- package/dist/components/Toast/Toaster.cjs.map +1 -1
- package/dist/components/Toast/Toaster.d.cts.map +1 -1
- package/dist/components/Toast/Toaster.d.mts.map +1 -1
- package/dist/components/Toast/Toaster.mjs +9 -9
- package/dist/components/Toast/Toaster.mjs.map +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,33 @@ 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
|
+
|
|
23
|
+
## [0.41.0]
|
|
24
|
+
|
|
25
|
+
### Added
|
|
26
|
+
|
|
27
|
+
- Added `showCloseButton` to `ToastOptions` for the imperative `toast(...)` API (default `true`); when `false`, the close button is hidden while swipe-to-dismiss, auto-dismiss, and `toast.dismiss()` still work ([#1446](https://github.com/MetaMask/metamask-design-system/pull/1446))
|
|
28
|
+
|
|
29
|
+
### Changed
|
|
30
|
+
|
|
31
|
+
- Updated `BannerBase` to center-align compact content (title-only, description-only, or title with a single-line description or string children) and top-align multi-line stacks, custom React node children, or below-action layouts; inherited by `BannerAlert` and `Toast` ([#1447](https://github.com/MetaMask/metamask-design-system/pull/1447))
|
|
32
|
+
|
|
33
|
+
### Fixed
|
|
34
|
+
|
|
35
|
+
- Fixed `Checkbox` unselected state to use a transparent background instead of `background.default` ([#1451](https://github.com/MetaMask/metamask-design-system/pull/1451))
|
|
36
|
+
|
|
10
37
|
## [0.40.0]
|
|
11
38
|
|
|
12
39
|
### Added
|
|
@@ -683,7 +710,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
683
710
|
- Full TypeScript support with type definitions and enums
|
|
684
711
|
- React Native integration with TWRNC preset support
|
|
685
712
|
|
|
686
|
-
[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
|
|
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
|
|
687
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
|
|
688
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
|
|
689
718
|
[0.39.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.38.1...@metamask/design-system-react-native@0.39.0
|
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,43 +1,118 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var
|
|
3
|
-
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
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;
|
|
4
24
|
};
|
|
5
25
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
26
|
exports.BannerBase = void 0;
|
|
7
27
|
const design_system_shared_1 = require("@metamask/design-system-shared");
|
|
8
|
-
const
|
|
28
|
+
const design_tokens_1 = require("@metamask/design-tokens");
|
|
29
|
+
const react_1 = __importStar(require("react"));
|
|
9
30
|
const Box_1 = require("../Box/index.cjs");
|
|
10
31
|
const Button_1 = require("../Button/index.cjs");
|
|
11
32
|
const ButtonIcon_1 = require("../ButtonIcon/index.cjs");
|
|
12
33
|
const Text_1 = require("../Text/index.cjs");
|
|
34
|
+
/** BodyMd line height — title block. */
|
|
35
|
+
const BODY_MD_LINE_HEIGHT = design_tokens_1.typography.sBodyMD.lineHeight;
|
|
36
|
+
/** BodySm line height — description block. */
|
|
37
|
+
const BODY_SM_LINE_HEIGHT = design_tokens_1.typography.sBodySM.lineHeight;
|
|
38
|
+
/** `mt-0.5` between title and description. */
|
|
39
|
+
const TITLE_DESCRIPTION_GAP = 2;
|
|
40
|
+
/** Sub-pixel / font rounding allowance when comparing stack height. */
|
|
41
|
+
const COMPACT_HEIGHT_TOLERANCE = 4;
|
|
13
42
|
const isTextContent = (content) => typeof content === 'string' || typeof content === 'number';
|
|
14
43
|
const hasContent = (content) => content !== null && content !== undefined;
|
|
15
|
-
const
|
|
44
|
+
const getCompactContentMaxHeight = ({ hasTitle, hasDescription, hasChildren, }) => {
|
|
45
|
+
let maxHeight = 0;
|
|
46
|
+
if (hasTitle) {
|
|
47
|
+
maxHeight += BODY_MD_LINE_HEIGHT;
|
|
48
|
+
}
|
|
49
|
+
if (hasDescription) {
|
|
50
|
+
if (hasTitle) {
|
|
51
|
+
maxHeight += TITLE_DESCRIPTION_GAP;
|
|
52
|
+
}
|
|
53
|
+
maxHeight += BODY_SM_LINE_HEIGHT;
|
|
54
|
+
}
|
|
55
|
+
if (hasChildren) {
|
|
56
|
+
maxHeight += BODY_MD_LINE_HEIGHT;
|
|
57
|
+
}
|
|
58
|
+
return maxHeight + COMPACT_HEIGHT_TOLERANCE;
|
|
59
|
+
};
|
|
60
|
+
const BannerBase = ({ title, titleProps, description, descriptionProps, children, childrenWrapperProps, actionButtonLabel, actionButtonOnPress, actionButtonProps, actionButtonLayout = design_system_shared_1.BannerBaseActionButtonLayout.Below, startAccessory, onClose, closeButtonProps, twClassName, backgroundColor = design_system_shared_1.BoxBackgroundColor.BackgroundDefault, ...props }) => {
|
|
16
61
|
const resolvedActionButtonProps = actionButtonProps ?? {};
|
|
17
62
|
const { accessibilityLabel: closeButtonAccessibilityLabel = 'Close banner', twClassName: closeButtonTwClassName, ...resolvedCloseButtonProps } = closeButtonProps ?? {};
|
|
18
63
|
const shouldShowCloseButton = Boolean(onClose);
|
|
19
64
|
const shouldShowActionButton = Boolean(actionButtonOnPress);
|
|
20
65
|
const isActionButtonLayoutEnd = actionButtonLayout === design_system_shared_1.BannerBaseActionButtonLayout.End;
|
|
21
66
|
const hasActionButtonBelow = shouldShowActionButton && !isActionButtonLayoutEnd;
|
|
67
|
+
const hasTitle = hasContent(title);
|
|
68
|
+
const hasDescription = hasContent(description);
|
|
69
|
+
const hasChildren = hasContent(children);
|
|
70
|
+
// Custom nodes can't be measured reliably — keep top-aligned.
|
|
71
|
+
const hasUnmeasuredContent = (hasTitle && !isTextContent(title)) ||
|
|
72
|
+
(hasDescription && !isTextContent(description)) ||
|
|
73
|
+
(hasChildren && !isTextContent(children));
|
|
74
|
+
// Multiple text blocks: default top-aligned until the stack measures as
|
|
75
|
+
// single-line per block. A single title, description, or children block
|
|
76
|
+
// always centers (including wraps). Avoids multiline stacks sticking
|
|
77
|
+
// centered when layout callbacks are delayed or skipped.
|
|
78
|
+
const [isCompactContent, setIsCompactContent] = (0, react_1.useState)(false);
|
|
79
|
+
const isSingleTextBlock = [hasTitle, hasDescription, hasChildren].filter(Boolean).length === 1;
|
|
80
|
+
const isCenterAligned = !hasActionButtonBelow &&
|
|
81
|
+
!hasUnmeasuredContent &&
|
|
82
|
+
(hasTitle || hasDescription || hasChildren) &&
|
|
83
|
+
(isSingleTextBlock || isCompactContent);
|
|
84
|
+
const handleContentLayout = (event) => {
|
|
85
|
+
if (hasUnmeasuredContent || hasActionButtonBelow || isSingleTextBlock) {
|
|
86
|
+
setIsCompactContent(false);
|
|
87
|
+
return;
|
|
88
|
+
}
|
|
89
|
+
const { height } = event.nativeEvent.layout;
|
|
90
|
+
const maxCompactHeight = getCompactContentMaxHeight({
|
|
91
|
+
hasTitle,
|
|
92
|
+
hasDescription,
|
|
93
|
+
hasChildren,
|
|
94
|
+
});
|
|
95
|
+
setIsCompactContent(height > 0 && height <= maxCompactHeight);
|
|
96
|
+
};
|
|
22
97
|
const actionButton = shouldShowActionButton ? (<Button_1.Button size={design_system_shared_1.ButtonSize.Md} onPress={actionButtonOnPress} {...resolvedActionButtonProps} variant={design_system_shared_1.ButtonVariant.Secondary}>
|
|
23
98
|
{actionButtonLabel}
|
|
24
99
|
</Button_1.Button>) : null;
|
|
25
|
-
return (<Box_1.Box flexDirection={design_system_shared_1.BoxFlexDirection.Row} alignItems={design_system_shared_1.BoxAlignItems.Start} gap={4} backgroundColor={
|
|
100
|
+
return (<Box_1.Box {...props} flexDirection={design_system_shared_1.BoxFlexDirection.Row} alignItems={isCenterAligned ? design_system_shared_1.BoxAlignItems.Center : design_system_shared_1.BoxAlignItems.Start} gap={4} backgroundColor={backgroundColor} paddingTop={3} paddingBottom={hasActionButtonBelow ? 4 : 3} paddingLeft={4} paddingRight={shouldShowCloseButton ? 2 : 4} twClassName={(0, design_system_shared_1.mergeTwClassName)('rounded-xl', twClassName)}>
|
|
26
101
|
{startAccessory}
|
|
27
102
|
|
|
28
|
-
<Box_1.Box twClassName="flex-1">
|
|
29
|
-
{
|
|
103
|
+
<Box_1.Box twClassName="flex-1" onLayout={handleContentLayout}>
|
|
104
|
+
{hasTitle &&
|
|
30
105
|
(isTextContent(title) ? (<Text_1.Text variant={design_system_shared_1.TextVariant.BodyMd} fontWeight={design_system_shared_1.FontWeight.Medium} {...titleProps}>
|
|
31
106
|
{title}
|
|
32
107
|
</Text_1.Text>) : (title))}
|
|
33
108
|
|
|
34
|
-
{
|
|
109
|
+
{hasDescription && (<Box_1.Box twClassName={hasTitle ? 'mt-0.5' : undefined}>
|
|
35
110
|
{isTextContent(description) ? (<Text_1.Text variant={design_system_shared_1.TextVariant.BodySm} {...descriptionProps}>
|
|
36
111
|
{description}
|
|
37
112
|
</Text_1.Text>) : (description)}
|
|
38
113
|
</Box_1.Box>)}
|
|
39
114
|
|
|
40
|
-
{
|
|
115
|
+
{hasChildren &&
|
|
41
116
|
(isTextContent(children) ? (<Text_1.Text variant={design_system_shared_1.TextVariant.BodyMd} {...childrenWrapperProps}>
|
|
42
117
|
{children}
|
|
43
118
|
</Text_1.Text>) : (children))}
|
|
@@ -45,9 +120,11 @@ const BannerBase = ({ title, titleProps, description, descriptionProps, children
|
|
|
45
120
|
{hasActionButtonBelow && <Box_1.Box twClassName="mt-2">{actionButton}</Box_1.Box>}
|
|
46
121
|
</Box_1.Box>
|
|
47
122
|
|
|
48
|
-
{shouldShowActionButton && isActionButtonLayoutEnd && actionButton}
|
|
123
|
+
{shouldShowActionButton && isActionButtonLayoutEnd && (<Box_1.Box twClassName="self-center">{actionButton}</Box_1.Box>)}
|
|
49
124
|
|
|
50
|
-
{shouldShowCloseButton && (<ButtonIcon_1.ButtonIcon twClassName={
|
|
125
|
+
{shouldShowCloseButton && (<ButtonIcon_1.ButtonIcon twClassName={isCenterAligned
|
|
126
|
+
? closeButtonTwClassName
|
|
127
|
+
: (0, design_system_shared_1.mergeTwClassName)('-mt-1', closeButtonTwClassName)} iconName={design_system_shared_1.IconName.Close} size={design_system_shared_1.ButtonIconSize.Md} accessibilityLabel={closeButtonAccessibilityLabel} onPress={onClose} {...resolvedCloseButtonProps}/>)}
|
|
51
128
|
</Box_1.Box>);
|
|
52
129
|
};
|
|
53
130
|
exports.BannerBase = BannerBase;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BannerBase.cjs","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n BannerBaseActionButtonLayout,\n BoxAlignItems,\n BoxBackgroundColor,\n BoxFlexDirection,\n ButtonIconSize,\n ButtonSize,\n ButtonVariant,\n FontWeight,\n IconName,\n mergeTwClassName,\n TextVariant,\n} from '@metamask/design-system-shared';\nimport React from 'react';\n\nimport { Box } from '../Box';\nimport { Button } from '../Button';\nimport { ButtonIcon } from '../ButtonIcon';\nimport { Text } from '../Text';\n\nimport type { BannerBaseProps } from './BannerBase.types';\n\nconst isTextContent = (content: React.ReactNode): content is string | number =>\n typeof content === 'string' || typeof content === 'number';\n\nconst hasContent = (content: React.ReactNode) =>\n content !== null && content !== undefined;\n\nexport const BannerBase: React.FC<BannerBaseProps> = ({\n title,\n titleProps,\n description,\n descriptionProps,\n children,\n childrenWrapperProps,\n actionButtonLabel,\n actionButtonOnPress,\n actionButtonProps,\n actionButtonLayout = BannerBaseActionButtonLayout.Below,\n startAccessory,\n onClose,\n closeButtonProps,\n twClassName,\n ...props\n}) => {\n const resolvedActionButtonProps = actionButtonProps ?? {};\n\n const {\n accessibilityLabel: closeButtonAccessibilityLabel = 'Close banner',\n twClassName: closeButtonTwClassName,\n ...resolvedCloseButtonProps\n } = closeButtonProps ?? {};\n\n const shouldShowCloseButton = Boolean(onClose);\n const shouldShowActionButton = Boolean(actionButtonOnPress);\n const isActionButtonLayoutEnd =\n actionButtonLayout === BannerBaseActionButtonLayout.End;\n const hasActionButtonBelow =\n shouldShowActionButton && !isActionButtonLayoutEnd;\n\n const actionButton = shouldShowActionButton ? (\n <Button\n size={ButtonSize.Md}\n onPress={actionButtonOnPress}\n {...resolvedActionButtonProps}\n variant={ButtonVariant.Secondary}\n >\n {actionButtonLabel}\n </Button>\n ) : null;\n\n return (\n <Box\n flexDirection={BoxFlexDirection.Row}\n alignItems={BoxAlignItems.Start}\n gap={4}\n backgroundColor={BoxBackgroundColor.BackgroundDefault}\n paddingTop={3}\n paddingBottom={hasActionButtonBelow ? 4 : 3}\n paddingLeft={4}\n paddingRight={shouldShowCloseButton ? 2 : 4}\n twClassName={mergeTwClassName('rounded-xl', twClassName)}\n {...props}\n >\n {startAccessory}\n\n <Box twClassName=\"flex-1\">\n {hasContent(title) &&\n (isTextContent(title) ? (\n <Text\n variant={TextVariant.BodyMd}\n fontWeight={FontWeight.Medium}\n {...titleProps}\n >\n {title}\n </Text>\n ) : (\n title\n ))}\n\n {hasContent(description) && (\n <Box twClassName={hasContent(title) ? 'mt-0.5' : undefined}>\n {isTextContent(description) ? (\n <Text variant={TextVariant.BodySm} {...descriptionProps}>\n {description}\n </Text>\n ) : (\n description\n )}\n </Box>\n )}\n\n {hasContent(children) &&\n (isTextContent(children) ? (\n <Text variant={TextVariant.BodyMd} {...childrenWrapperProps}>\n {children}\n </Text>\n ) : (\n children\n ))}\n\n {hasActionButtonBelow && <Box twClassName=\"mt-2\">{actionButton}</Box>}\n </Box>\n\n {shouldShowActionButton && isActionButtonLayoutEnd && actionButton}\n\n {shouldShowCloseButton && (\n <ButtonIcon\n twClassName={mergeTwClassName('-mt-1', closeButtonTwClassName)}\n iconName={IconName.Close}\n size={ButtonIconSize.Md}\n accessibilityLabel={closeButtonAccessibilityLabel}\n onPress={onClose}\n {...resolvedCloseButtonProps}\n />\n )}\n </Box>\n );\n};\n"]}
|
|
1
|
+
{"version":3,"file":"BannerBase.cjs","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n BannerBaseActionButtonLayout,\n BoxAlignItems,\n BoxBackgroundColor,\n BoxFlexDirection,\n ButtonIconSize,\n ButtonSize,\n ButtonVariant,\n FontWeight,\n IconName,\n mergeTwClassName,\n TextVariant,\n} from '@metamask/design-system-shared';\nimport { typography } from '@metamask/design-tokens';\nimport React, { useState } from 'react';\nimport type { LayoutChangeEvent } from 'react-native';\n\nimport { Box } from '../Box';\nimport { Button } from '../Button';\nimport { ButtonIcon } from '../ButtonIcon';\nimport { Text } from '../Text';\n\nimport type { BannerBaseProps } from './BannerBase.types';\n\n/** BodyMd line height — title block. */\nconst BODY_MD_LINE_HEIGHT = typography.sBodyMD.lineHeight;\n/** BodySm line height — description block. */\nconst BODY_SM_LINE_HEIGHT = typography.sBodySM.lineHeight;\n/** `mt-0.5` between title and description. */\nconst TITLE_DESCRIPTION_GAP = 2;\n/** Sub-pixel / font rounding allowance when comparing stack height. */\nconst COMPACT_HEIGHT_TOLERANCE = 4;\n\nconst isTextContent = (content: React.ReactNode): content is string | number =>\n typeof content === 'string' || typeof content === 'number';\n\nconst hasContent = (content: React.ReactNode) =>\n content !== null && content !== undefined;\n\nconst getCompactContentMaxHeight = ({\n hasTitle,\n hasDescription,\n hasChildren,\n}: {\n hasTitle: boolean;\n hasDescription: boolean;\n hasChildren: boolean;\n}) => {\n let maxHeight = 0;\n\n if (hasTitle) {\n maxHeight += BODY_MD_LINE_HEIGHT;\n }\n if (hasDescription) {\n if (hasTitle) {\n maxHeight += TITLE_DESCRIPTION_GAP;\n }\n maxHeight += BODY_SM_LINE_HEIGHT;\n }\n if (hasChildren) {\n maxHeight += BODY_MD_LINE_HEIGHT;\n }\n\n return maxHeight + COMPACT_HEIGHT_TOLERANCE;\n};\n\nexport const BannerBase: React.FC<BannerBaseProps> = ({\n title,\n titleProps,\n description,\n descriptionProps,\n children,\n childrenWrapperProps,\n actionButtonLabel,\n actionButtonOnPress,\n actionButtonProps,\n actionButtonLayout = BannerBaseActionButtonLayout.Below,\n startAccessory,\n onClose,\n closeButtonProps,\n twClassName,\n backgroundColor = BoxBackgroundColor.BackgroundDefault,\n ...props\n}) => {\n const resolvedActionButtonProps = actionButtonProps ?? {};\n\n const {\n accessibilityLabel: closeButtonAccessibilityLabel = 'Close banner',\n twClassName: closeButtonTwClassName,\n ...resolvedCloseButtonProps\n } = closeButtonProps ?? {};\n\n const shouldShowCloseButton = Boolean(onClose);\n const shouldShowActionButton = Boolean(actionButtonOnPress);\n const isActionButtonLayoutEnd =\n actionButtonLayout === BannerBaseActionButtonLayout.End;\n const hasActionButtonBelow =\n shouldShowActionButton && !isActionButtonLayoutEnd;\n const hasTitle = hasContent(title);\n const hasDescription = hasContent(description);\n const hasChildren = hasContent(children);\n // Custom nodes can't be measured reliably — keep top-aligned.\n const hasUnmeasuredContent =\n (hasTitle && !isTextContent(title)) ||\n (hasDescription && !isTextContent(description)) ||\n (hasChildren && !isTextContent(children));\n\n // Multiple text blocks: default top-aligned until the stack measures as\n // single-line per block. A single title, description, or children block\n // always centers (including wraps). Avoids multiline stacks sticking\n // centered when layout callbacks are delayed or skipped.\n const [isCompactContent, setIsCompactContent] = useState(false);\n const isSingleTextBlock =\n [hasTitle, hasDescription, hasChildren].filter(Boolean).length === 1;\n\n const isCenterAligned =\n !hasActionButtonBelow &&\n !hasUnmeasuredContent &&\n (hasTitle || hasDescription || hasChildren) &&\n (isSingleTextBlock || isCompactContent);\n\n const handleContentLayout = (event: LayoutChangeEvent) => {\n if (hasUnmeasuredContent || hasActionButtonBelow || isSingleTextBlock) {\n setIsCompactContent(false);\n return;\n }\n\n const { height } = event.nativeEvent.layout;\n const maxCompactHeight = getCompactContentMaxHeight({\n hasTitle,\n hasDescription,\n hasChildren,\n });\n setIsCompactContent(height > 0 && height <= maxCompactHeight);\n };\n\n const actionButton = shouldShowActionButton ? (\n <Button\n size={ButtonSize.Md}\n onPress={actionButtonOnPress}\n {...resolvedActionButtonProps}\n variant={ButtonVariant.Secondary}\n >\n {actionButtonLabel}\n </Button>\n ) : null;\n\n return (\n <Box\n {...props}\n flexDirection={BoxFlexDirection.Row}\n alignItems={isCenterAligned ? BoxAlignItems.Center : BoxAlignItems.Start}\n gap={4}\n backgroundColor={backgroundColor}\n paddingTop={3}\n paddingBottom={hasActionButtonBelow ? 4 : 3}\n paddingLeft={4}\n paddingRight={shouldShowCloseButton ? 2 : 4}\n twClassName={mergeTwClassName('rounded-xl', twClassName)}\n >\n {startAccessory}\n\n <Box twClassName=\"flex-1\" onLayout={handleContentLayout}>\n {hasTitle &&\n (isTextContent(title) ? (\n <Text\n variant={TextVariant.BodyMd}\n fontWeight={FontWeight.Medium}\n {...titleProps}\n >\n {title}\n </Text>\n ) : (\n title\n ))}\n\n {hasDescription && (\n <Box twClassName={hasTitle ? 'mt-0.5' : undefined}>\n {isTextContent(description) ? (\n <Text variant={TextVariant.BodySm} {...descriptionProps}>\n {description}\n </Text>\n ) : (\n description\n )}\n </Box>\n )}\n\n {hasChildren &&\n (isTextContent(children) ? (\n <Text variant={TextVariant.BodyMd} {...childrenWrapperProps}>\n {children}\n </Text>\n ) : (\n children\n ))}\n\n {hasActionButtonBelow && <Box twClassName=\"mt-2\">{actionButton}</Box>}\n </Box>\n\n {shouldShowActionButton && isActionButtonLayoutEnd && (\n <Box twClassName=\"self-center\">{actionButton}</Box>\n )}\n\n {shouldShowCloseButton && (\n <ButtonIcon\n twClassName={\n isCenterAligned\n ? closeButtonTwClassName\n : mergeTwClassName('-mt-1', closeButtonTwClassName)\n }\n iconName={IconName.Close}\n size={ButtonIconSize.Md}\n accessibilityLabel={closeButtonAccessibilityLabel}\n onPress={onClose}\n {...resolvedCloseButtonProps}\n />\n )}\n </Box>\n );\n};\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BannerBase.d.cts","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"BannerBase.d.cts","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAmB,cAAc;AAQxC,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AA4C1D,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA0JhD,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BannerBase.d.mts","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"BannerBase.d.mts","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAmB,cAAc;AAQxC,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AA4C1D,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA0JhD,CAAC"}
|
|
@@ -5,40 +5,95 @@ function $importDefault(module) {
|
|
|
5
5
|
return module;
|
|
6
6
|
}
|
|
7
7
|
import { BannerBaseActionButtonLayout, BoxAlignItems, BoxBackgroundColor, BoxFlexDirection, ButtonIconSize, ButtonSize, ButtonVariant, FontWeight, IconName, mergeTwClassName, TextVariant } from "@metamask/design-system-shared";
|
|
8
|
-
import
|
|
8
|
+
import { typography } from "@metamask/design-tokens";
|
|
9
|
+
import $React, { useState } from "react";
|
|
9
10
|
const React = $importDefault($React);
|
|
10
11
|
import { Box } from "../Box/index.mjs";
|
|
11
12
|
import { Button } from "../Button/index.mjs";
|
|
12
13
|
import { ButtonIcon } from "../ButtonIcon/index.mjs";
|
|
13
14
|
import { Text } from "../Text/index.mjs";
|
|
15
|
+
/** BodyMd line height — title block. */
|
|
16
|
+
const BODY_MD_LINE_HEIGHT = typography.sBodyMD.lineHeight;
|
|
17
|
+
/** BodySm line height — description block. */
|
|
18
|
+
const BODY_SM_LINE_HEIGHT = typography.sBodySM.lineHeight;
|
|
19
|
+
/** `mt-0.5` between title and description. */
|
|
20
|
+
const TITLE_DESCRIPTION_GAP = 2;
|
|
21
|
+
/** Sub-pixel / font rounding allowance when comparing stack height. */
|
|
22
|
+
const COMPACT_HEIGHT_TOLERANCE = 4;
|
|
14
23
|
const isTextContent = (content) => typeof content === 'string' || typeof content === 'number';
|
|
15
24
|
const hasContent = (content) => content !== null && content !== undefined;
|
|
16
|
-
|
|
25
|
+
const getCompactContentMaxHeight = ({ hasTitle, hasDescription, hasChildren, }) => {
|
|
26
|
+
let maxHeight = 0;
|
|
27
|
+
if (hasTitle) {
|
|
28
|
+
maxHeight += BODY_MD_LINE_HEIGHT;
|
|
29
|
+
}
|
|
30
|
+
if (hasDescription) {
|
|
31
|
+
if (hasTitle) {
|
|
32
|
+
maxHeight += TITLE_DESCRIPTION_GAP;
|
|
33
|
+
}
|
|
34
|
+
maxHeight += BODY_SM_LINE_HEIGHT;
|
|
35
|
+
}
|
|
36
|
+
if (hasChildren) {
|
|
37
|
+
maxHeight += BODY_MD_LINE_HEIGHT;
|
|
38
|
+
}
|
|
39
|
+
return maxHeight + COMPACT_HEIGHT_TOLERANCE;
|
|
40
|
+
};
|
|
41
|
+
export const BannerBase = ({ title, titleProps, description, descriptionProps, children, childrenWrapperProps, actionButtonLabel, actionButtonOnPress, actionButtonProps, actionButtonLayout = BannerBaseActionButtonLayout.Below, startAccessory, onClose, closeButtonProps, twClassName, backgroundColor = BoxBackgroundColor.BackgroundDefault, ...props }) => {
|
|
17
42
|
const resolvedActionButtonProps = actionButtonProps ?? {};
|
|
18
43
|
const { accessibilityLabel: closeButtonAccessibilityLabel = 'Close banner', twClassName: closeButtonTwClassName, ...resolvedCloseButtonProps } = closeButtonProps ?? {};
|
|
19
44
|
const shouldShowCloseButton = Boolean(onClose);
|
|
20
45
|
const shouldShowActionButton = Boolean(actionButtonOnPress);
|
|
21
46
|
const isActionButtonLayoutEnd = actionButtonLayout === BannerBaseActionButtonLayout.End;
|
|
22
47
|
const hasActionButtonBelow = shouldShowActionButton && !isActionButtonLayoutEnd;
|
|
48
|
+
const hasTitle = hasContent(title);
|
|
49
|
+
const hasDescription = hasContent(description);
|
|
50
|
+
const hasChildren = hasContent(children);
|
|
51
|
+
// Custom nodes can't be measured reliably — keep top-aligned.
|
|
52
|
+
const hasUnmeasuredContent = (hasTitle && !isTextContent(title)) ||
|
|
53
|
+
(hasDescription && !isTextContent(description)) ||
|
|
54
|
+
(hasChildren && !isTextContent(children));
|
|
55
|
+
// Multiple text blocks: default top-aligned until the stack measures as
|
|
56
|
+
// single-line per block. A single title, description, or children block
|
|
57
|
+
// always centers (including wraps). Avoids multiline stacks sticking
|
|
58
|
+
// centered when layout callbacks are delayed or skipped.
|
|
59
|
+
const [isCompactContent, setIsCompactContent] = useState(false);
|
|
60
|
+
const isSingleTextBlock = [hasTitle, hasDescription, hasChildren].filter(Boolean).length === 1;
|
|
61
|
+
const isCenterAligned = !hasActionButtonBelow &&
|
|
62
|
+
!hasUnmeasuredContent &&
|
|
63
|
+
(hasTitle || hasDescription || hasChildren) &&
|
|
64
|
+
(isSingleTextBlock || isCompactContent);
|
|
65
|
+
const handleContentLayout = (event) => {
|
|
66
|
+
if (hasUnmeasuredContent || hasActionButtonBelow || isSingleTextBlock) {
|
|
67
|
+
setIsCompactContent(false);
|
|
68
|
+
return;
|
|
69
|
+
}
|
|
70
|
+
const { height } = event.nativeEvent.layout;
|
|
71
|
+
const maxCompactHeight = getCompactContentMaxHeight({
|
|
72
|
+
hasTitle,
|
|
73
|
+
hasDescription,
|
|
74
|
+
hasChildren,
|
|
75
|
+
});
|
|
76
|
+
setIsCompactContent(height > 0 && height <= maxCompactHeight);
|
|
77
|
+
};
|
|
23
78
|
const actionButton = shouldShowActionButton ? (<Button size={ButtonSize.Md} onPress={actionButtonOnPress} {...resolvedActionButtonProps} variant={ButtonVariant.Secondary}>
|
|
24
79
|
{actionButtonLabel}
|
|
25
80
|
</Button>) : null;
|
|
26
|
-
return (<Box flexDirection={BoxFlexDirection.Row} alignItems={BoxAlignItems.Start} gap={4} backgroundColor={
|
|
81
|
+
return (<Box {...props} flexDirection={BoxFlexDirection.Row} alignItems={isCenterAligned ? BoxAlignItems.Center : BoxAlignItems.Start} gap={4} backgroundColor={backgroundColor} paddingTop={3} paddingBottom={hasActionButtonBelow ? 4 : 3} paddingLeft={4} paddingRight={shouldShowCloseButton ? 2 : 4} twClassName={mergeTwClassName('rounded-xl', twClassName)}>
|
|
27
82
|
{startAccessory}
|
|
28
83
|
|
|
29
|
-
<Box twClassName="flex-1">
|
|
30
|
-
{
|
|
84
|
+
<Box twClassName="flex-1" onLayout={handleContentLayout}>
|
|
85
|
+
{hasTitle &&
|
|
31
86
|
(isTextContent(title) ? (<Text variant={TextVariant.BodyMd} fontWeight={FontWeight.Medium} {...titleProps}>
|
|
32
87
|
{title}
|
|
33
88
|
</Text>) : (title))}
|
|
34
89
|
|
|
35
|
-
{
|
|
90
|
+
{hasDescription && (<Box twClassName={hasTitle ? 'mt-0.5' : undefined}>
|
|
36
91
|
{isTextContent(description) ? (<Text variant={TextVariant.BodySm} {...descriptionProps}>
|
|
37
92
|
{description}
|
|
38
93
|
</Text>) : (description)}
|
|
39
94
|
</Box>)}
|
|
40
95
|
|
|
41
|
-
{
|
|
96
|
+
{hasChildren &&
|
|
42
97
|
(isTextContent(children) ? (<Text variant={TextVariant.BodyMd} {...childrenWrapperProps}>
|
|
43
98
|
{children}
|
|
44
99
|
</Text>) : (children))}
|
|
@@ -46,9 +101,11 @@ export const BannerBase = ({ title, titleProps, description, descriptionProps, c
|
|
|
46
101
|
{hasActionButtonBelow && <Box twClassName="mt-2">{actionButton}</Box>}
|
|
47
102
|
</Box>
|
|
48
103
|
|
|
49
|
-
{shouldShowActionButton && isActionButtonLayoutEnd && actionButton}
|
|
104
|
+
{shouldShowActionButton && isActionButtonLayoutEnd && (<Box twClassName="self-center">{actionButton}</Box>)}
|
|
50
105
|
|
|
51
|
-
{shouldShowCloseButton && (<ButtonIcon twClassName={
|
|
106
|
+
{shouldShowCloseButton && (<ButtonIcon twClassName={isCenterAligned
|
|
107
|
+
? closeButtonTwClassName
|
|
108
|
+
: mergeTwClassName('-mt-1', closeButtonTwClassName)} iconName={IconName.Close} size={ButtonIconSize.Md} accessibilityLabel={closeButtonAccessibilityLabel} onPress={onClose} {...resolvedCloseButtonProps}/>)}
|
|
52
109
|
</Box>);
|
|
53
110
|
};
|
|
54
111
|
//# sourceMappingURL=BannerBase.mjs.map
|