@metamask-previews/design-system-react-native 0.27.0-preview.a0fe3894 → 0.28.0-preview.1f40f69f
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/dist/components/AvatarBase/AvatarBase.cjs +1 -1
- package/dist/components/AvatarBase/AvatarBase.cjs.map +1 -1
- package/dist/components/AvatarBase/AvatarBase.mjs +1 -1
- package/dist/components/AvatarBase/AvatarBase.mjs.map +1 -1
- package/dist/components/AvatarFavicon/AvatarFavicon.cjs +2 -2
- 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 +2 -2
- package/dist/components/AvatarFavicon/AvatarFavicon.mjs.map +1 -1
- package/dist/components/AvatarNetwork/AvatarNetwork.cjs +2 -2
- 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 +2 -2
- package/dist/components/AvatarNetwork/AvatarNetwork.mjs.map +1 -1
- package/dist/components/AvatarToken/AvatarToken.cjs +2 -2
- 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 +2 -2
- package/dist/components/AvatarToken/AvatarToken.mjs.map +1 -1
- package/dist/components/SectionHeader/SectionHeader.cjs +47 -24
- package/dist/components/SectionHeader/SectionHeader.cjs.map +1 -1
- package/dist/components/SectionHeader/SectionHeader.d.cts +16 -13
- package/dist/components/SectionHeader/SectionHeader.d.cts.map +1 -1
- package/dist/components/SectionHeader/SectionHeader.d.mts +16 -13
- package/dist/components/SectionHeader/SectionHeader.d.mts.map +1 -1
- package/dist/components/SectionHeader/SectionHeader.mjs +48 -25
- package/dist/components/SectionHeader/SectionHeader.mjs.map +1 -1
- package/dist/components/SectionHeader/SectionHeader.types.cjs.map +1 -1
- package/dist/components/SectionHeader/SectionHeader.types.d.cts +16 -9
- package/dist/components/SectionHeader/SectionHeader.types.d.cts.map +1 -1
- package/dist/components/SectionHeader/SectionHeader.types.d.mts +16 -9
- package/dist/components/SectionHeader/SectionHeader.types.d.mts.map +1 -1
- package/dist/components/SectionHeader/SectionHeader.types.mjs.map +1 -1
- package/dist/components/TextArea/TextArea.cjs +3 -7
- package/dist/components/TextArea/TextArea.cjs.map +1 -1
- package/dist/components/TextArea/TextArea.d.cts +158 -163
- package/dist/components/TextArea/TextArea.d.cts.map +1 -1
- package/dist/components/TextArea/TextArea.d.mts +158 -163
- package/dist/components/TextArea/TextArea.d.mts.map +1 -1
- package/dist/components/TextArea/TextArea.mjs +4 -8
- package/dist/components/TextArea/TextArea.mjs.map +1 -1
- package/dist/components/TextArea/TextArea.types.cjs.map +1 -1
- package/dist/components/TextArea/TextArea.types.d.cts +12 -45
- package/dist/components/TextArea/TextArea.types.d.cts.map +1 -1
- package/dist/components/TextArea/TextArea.types.d.mts +12 -45
- package/dist/components/TextArea/TextArea.types.d.mts.map +1 -1
- package/dist/components/TextArea/TextArea.types.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 +2 -2
- package/dist/components/temp-components/ImageOrSvg/ImageOrSvg.types.d.cts.map +1 -1
- package/dist/components/temp-components/ImageOrSvg/ImageOrSvg.types.d.mts +2 -2
- 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 +6 -6
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.28.0]
|
|
11
|
+
|
|
12
|
+
### Added
|
|
13
|
+
|
|
14
|
+
- Added `Content` for composing scrollable and padded content sections on React Native screens; it is closely related to the upcoming `ListItem` work ([#1192](https://github.com/MetaMask/metamask-design-system/pull/1192))
|
|
15
|
+
|
|
16
|
+
### Changed
|
|
17
|
+
|
|
18
|
+
- **BREAKING:** Dropped Node.js 18 support for the release line; consumers must run Node 20 or newer ([#1206](https://github.com/MetaMask/metamask-design-system/pull/1206))
|
|
19
|
+
- Added default padding and `isInteractive` support to `SectionHeader` so section rows match the new mobile layout patterns ([#1210](https://github.com/MetaMask/metamask-design-system/pull/1210))
|
|
20
|
+
- **BREAKING:** Flattened `TextArea` so it renders the root `TextInput` directly; pass `TextInput` props on `TextArea`, use the component `ref` for the input, and stop relying on `inputProps` or `inputElement` ([#1205](https://github.com/MetaMask/metamask-design-system/pull/1205))
|
|
21
|
+
- Updated avatar fallback handling so `AvatarToken`, `AvatarNetwork`, and `AvatarFavicon` resolve consistently when the requested image is unavailable ([#1212](https://github.com/MetaMask/metamask-design-system/pull/1212))
|
|
22
|
+
|
|
10
23
|
## [0.27.0]
|
|
11
24
|
|
|
12
25
|
### Added
|
|
@@ -468,7 +481,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
468
481
|
- Full TypeScript support with type definitions and enums
|
|
469
482
|
- React Native integration with TWRNC preset support
|
|
470
483
|
|
|
471
|
-
[Unreleased]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.
|
|
484
|
+
[Unreleased]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.28.0...HEAD
|
|
485
|
+
[0.28.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.27.0...@metamask/design-system-react-native@0.28.0
|
|
472
486
|
[0.27.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.26.0...@metamask/design-system-react-native@0.27.0
|
|
473
487
|
[0.26.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.25.0...@metamask/design-system-react-native@0.26.0
|
|
474
488
|
[0.25.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.24.0...@metamask/design-system-react-native@0.25.0
|
|
@@ -13,7 +13,7 @@ const AvatarBase_constants_1 = require("./AvatarBase.constants.cjs");
|
|
|
13
13
|
const AvatarBase = ({ children, size = design_system_shared_1.AvatarBaseSize.Md, shape = design_system_shared_1.AvatarBaseShape.Circle, fallbackText, fallbackTextProps, hasBorder = false, twClassName, style, ...props }) => {
|
|
14
14
|
const tw = (0, design_system_twrnc_preset_1.useTailwind)();
|
|
15
15
|
return (<react_native_1.View {...props} style={[
|
|
16
|
-
tw.style('items-center justify-center overflow-hidden bg-
|
|
16
|
+
tw.style('items-center justify-center overflow-hidden bg-alternative', shape === design_system_shared_1.AvatarBaseShape.Circle
|
|
17
17
|
? 'rounded-full'
|
|
18
18
|
: AvatarBase_constants_1.TWCLASSMAP_AVATARBASE_SIZE_BORDERRADIUSS_SQUARE[size], hasBorder
|
|
19
19
|
? AvatarBase_constants_1.TWCLASSMAP_AVATARBASE_HASBORDER_SIZE_DIMENSION[size]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarBase.cjs","sourceRoot":"","sources":["../../../src/components/AvatarBase/AvatarBase.tsx"],"names":[],"mappings":";;;;;;AAAA,kFAGiD;AACjD,8FAA4E;AAC5E,kDAA0B;AAC1B,+CAAoC;AAEpC,4CAAmE;AAEnE,qEAKgC;AAGzB,MAAM,UAAU,GAAG,CAAC,EACzB,QAAQ,EACR,IAAI,GAAG,qCAAc,CAAC,EAAE,EACxB,KAAK,GAAG,sCAAe,CAAC,MAAM,EAC9B,YAAY,EACZ,iBAAiB,EACjB,SAAS,GAAG,KAAK,EACjB,WAAW,EACX,KAAK,EACL,GAAG,KAAK,EACQ,EAAE,EAAE;IACpB,MAAM,EAAE,GAAG,IAAA,wCAAW,GAAE,CAAC;IAEzB,OAAO,CACL,CAAC,mBAAI,CACH,IAAI,KAAK,CAAC,CACV,KAAK,CAAC,CAAC;YACL,EAAE,CAAC,KAAK,CACN,
|
|
1
|
+
{"version":3,"file":"AvatarBase.cjs","sourceRoot":"","sources":["../../../src/components/AvatarBase/AvatarBase.tsx"],"names":[],"mappings":";;;;;;AAAA,kFAGiD;AACjD,8FAA4E;AAC5E,kDAA0B;AAC1B,+CAAoC;AAEpC,4CAAmE;AAEnE,qEAKgC;AAGzB,MAAM,UAAU,GAAG,CAAC,EACzB,QAAQ,EACR,IAAI,GAAG,qCAAc,CAAC,EAAE,EACxB,KAAK,GAAG,sCAAe,CAAC,MAAM,EAC9B,YAAY,EACZ,iBAAiB,EACjB,SAAS,GAAG,KAAK,EACjB,WAAW,EACX,KAAK,EACL,GAAG,KAAK,EACQ,EAAE,EAAE;IACpB,MAAM,EAAE,GAAG,IAAA,wCAAW,GAAE,CAAC;IAEzB,OAAO,CACL,CAAC,mBAAI,CACH,IAAI,KAAK,CAAC,CACV,KAAK,CAAC,CAAC;YACL,EAAE,CAAC,KAAK,CACN,4DAA4D,EAC5D,KAAK,KAAK,sCAAe,CAAC,MAAM;gBAC9B,CAAC,CAAC,cAAc;gBAChB,CAAC,CAAC,sEAA+C,CAAC,IAAI,CAAC,EACzD,SAAS;gBACP,CAAC,CAAC,qEAA8C,CAAC,IAAI,CAAC;gBACtD,CAAC,CAAC,2DAAoC,CAAC,IAAI,CAAC,EAC9C,SAAS,IAAI,wDAAiC,CAAC,IAAI,CAAC,EACpD,WAAW,CACZ;YACD,KAAK;SACN,CAAC,CAEF;MAAA,CAAC,YAAY,CAAC,CAAC,CAAC,CACd,CAAC,WAAI,CACH,KAAK,CAAC,CAAC,gBAAS,CAAC,SAAS,CAAC,CAC3B,OAAO,CAAC,CAAC,kBAAW,CAAC,MAAM,CAAC,CAC5B,UAAU,CAAC,CAAC,iBAAU,CAAC,MAAM,CAAC,CAC9B,IAAI,iBAAiB,CAAC,CACtB,WAAW,CAAC,CAAC,aAAa,iBAAiB,EAAE,WAAW,CAAC,CAAC,CAAC,IAAI,iBAAiB,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,EAAE,CAAC,CAE7G;UAAA,CAAC,YAAY,CACf;QAAA,EAAE,WAAI,CAAC,CACR,CAAC,CAAC,CAAC,CACF,QAAQ,CACT,CACH;IAAA,EAAE,mBAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AA9CW,QAAA,UAAU,cA8CrB","sourcesContent":["import {\n AvatarBaseSize,\n AvatarBaseShape,\n} from '@metamask-previews/design-system-shared';\nimport { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React from 'react';\nimport { View } from 'react-native';\n\nimport { Text, TextColor, TextVariant, FontWeight } from '../Text';\n\nimport {\n TWCLASSMAP_AVATARBASE_SIZE_DIMENSION,\n TWCLASSMAP_AVATARBASE_HASBORDER_SIZE_DIMENSION,\n TWCLASSMAP_AVATARBASE_SIZE_BORDERRADIUSS_SQUARE,\n TWCLASSMAP_AVATARBASE_SIZE_BORDER,\n} from './AvatarBase.constants';\nimport type { AvatarBaseProps } from './AvatarBase.types';\n\nexport const AvatarBase = ({\n children,\n size = AvatarBaseSize.Md,\n shape = AvatarBaseShape.Circle,\n fallbackText,\n fallbackTextProps,\n hasBorder = false,\n twClassName,\n style,\n ...props\n}: AvatarBaseProps) => {\n const tw = useTailwind();\n\n return (\n <View\n {...props}\n style={[\n tw.style(\n 'items-center justify-center overflow-hidden bg-alternative',\n shape === AvatarBaseShape.Circle\n ? 'rounded-full'\n : TWCLASSMAP_AVATARBASE_SIZE_BORDERRADIUSS_SQUARE[size],\n hasBorder\n ? TWCLASSMAP_AVATARBASE_HASBORDER_SIZE_DIMENSION[size]\n : TWCLASSMAP_AVATARBASE_SIZE_DIMENSION[size],\n hasBorder && TWCLASSMAP_AVATARBASE_SIZE_BORDER[size],\n twClassName,\n ),\n style,\n ]}\n >\n {fallbackText ? (\n <Text\n color={TextColor.TextMuted}\n variant={TextVariant.BodySm}\n fontWeight={FontWeight.Medium}\n {...fallbackTextProps}\n twClassName={`uppercase ${fallbackTextProps?.twClassName ? ` ${fallbackTextProps.twClassName}` : ''}`.trim()}\n >\n {fallbackText}\n </Text>\n ) : (\n children\n )}\n </View>\n );\n};\n"]}
|
|
@@ -14,7 +14,7 @@ import { TWCLASSMAP_AVATARBASE_SIZE_DIMENSION, TWCLASSMAP_AVATARBASE_HASBORDER_S
|
|
|
14
14
|
export const AvatarBase = ({ children, size = AvatarBaseSize.Md, shape = AvatarBaseShape.Circle, fallbackText, fallbackTextProps, hasBorder = false, twClassName, style, ...props }) => {
|
|
15
15
|
const tw = useTailwind();
|
|
16
16
|
return (<View {...props} style={[
|
|
17
|
-
tw.style('items-center justify-center overflow-hidden bg-
|
|
17
|
+
tw.style('items-center justify-center overflow-hidden bg-alternative', shape === AvatarBaseShape.Circle
|
|
18
18
|
? 'rounded-full'
|
|
19
19
|
: TWCLASSMAP_AVATARBASE_SIZE_BORDERRADIUSS_SQUARE[size], hasBorder
|
|
20
20
|
? TWCLASSMAP_AVATARBASE_HASBORDER_SIZE_DIMENSION[size]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarBase.mjs","sourceRoot":"","sources":["../../../src/components/AvatarBase/AvatarBase.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EACL,cAAc,EACd,eAAe,EAChB,gDAAgD;AACjD,OAAO,EAAE,WAAW,EAAE,sDAAsD;AAC5E,OAAO,MAAK,cAAc;;AAC1B,OAAO,EAAE,IAAI,EAAE,qBAAqB;AAEpC,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,WAAW,EAAE,UAAU,EAAE,0BAAgB;AAEnE,OAAO,EACL,oCAAoC,EACpC,8CAA8C,EAC9C,+CAA+C,EAC/C,iCAAiC,EAClC,mCAA+B;AAGhC,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EACzB,QAAQ,EACR,IAAI,GAAG,cAAc,CAAC,EAAE,EACxB,KAAK,GAAG,eAAe,CAAC,MAAM,EAC9B,YAAY,EACZ,iBAAiB,EACjB,SAAS,GAAG,KAAK,EACjB,WAAW,EACX,KAAK,EACL,GAAG,KAAK,EACQ,EAAE,EAAE;IACpB,MAAM,EAAE,GAAG,WAAW,EAAE,CAAC;IAEzB,OAAO,CACL,CAAC,IAAI,CACH,IAAI,KAAK,CAAC,CACV,KAAK,CAAC,CAAC;YACL,EAAE,CAAC,KAAK,CACN,
|
|
1
|
+
{"version":3,"file":"AvatarBase.mjs","sourceRoot":"","sources":["../../../src/components/AvatarBase/AvatarBase.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EACL,cAAc,EACd,eAAe,EAChB,gDAAgD;AACjD,OAAO,EAAE,WAAW,EAAE,sDAAsD;AAC5E,OAAO,MAAK,cAAc;;AAC1B,OAAO,EAAE,IAAI,EAAE,qBAAqB;AAEpC,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,WAAW,EAAE,UAAU,EAAE,0BAAgB;AAEnE,OAAO,EACL,oCAAoC,EACpC,8CAA8C,EAC9C,+CAA+C,EAC/C,iCAAiC,EAClC,mCAA+B;AAGhC,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EACzB,QAAQ,EACR,IAAI,GAAG,cAAc,CAAC,EAAE,EACxB,KAAK,GAAG,eAAe,CAAC,MAAM,EAC9B,YAAY,EACZ,iBAAiB,EACjB,SAAS,GAAG,KAAK,EACjB,WAAW,EACX,KAAK,EACL,GAAG,KAAK,EACQ,EAAE,EAAE;IACpB,MAAM,EAAE,GAAG,WAAW,EAAE,CAAC;IAEzB,OAAO,CACL,CAAC,IAAI,CACH,IAAI,KAAK,CAAC,CACV,KAAK,CAAC,CAAC;YACL,EAAE,CAAC,KAAK,CACN,4DAA4D,EAC5D,KAAK,KAAK,eAAe,CAAC,MAAM;gBAC9B,CAAC,CAAC,cAAc;gBAChB,CAAC,CAAC,+CAA+C,CAAC,IAAI,CAAC,EACzD,SAAS;gBACP,CAAC,CAAC,8CAA8C,CAAC,IAAI,CAAC;gBACtD,CAAC,CAAC,oCAAoC,CAAC,IAAI,CAAC,EAC9C,SAAS,IAAI,iCAAiC,CAAC,IAAI,CAAC,EACpD,WAAW,CACZ;YACD,KAAK;SACN,CAAC,CAEF;MAAA,CAAC,YAAY,CAAC,CAAC,CAAC,CACd,CAAC,IAAI,CACH,KAAK,CAAC,CAAC,SAAS,CAAC,SAAS,CAAC,CAC3B,OAAO,CAAC,CAAC,WAAW,CAAC,MAAM,CAAC,CAC5B,UAAU,CAAC,CAAC,UAAU,CAAC,MAAM,CAAC,CAC9B,IAAI,iBAAiB,CAAC,CACtB,WAAW,CAAC,CAAC,aAAa,iBAAiB,EAAE,WAAW,CAAC,CAAC,CAAC,IAAI,iBAAiB,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,EAAE,CAAC,CAE7G;UAAA,CAAC,YAAY,CACf;QAAA,EAAE,IAAI,CAAC,CACR,CAAC,CAAC,CAAC,CACF,QAAQ,CACT,CACH;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {\n AvatarBaseSize,\n AvatarBaseShape,\n} from '@metamask-previews/design-system-shared';\nimport { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React from 'react';\nimport { View } from 'react-native';\n\nimport { Text, TextColor, TextVariant, FontWeight } from '../Text';\n\nimport {\n TWCLASSMAP_AVATARBASE_SIZE_DIMENSION,\n TWCLASSMAP_AVATARBASE_HASBORDER_SIZE_DIMENSION,\n TWCLASSMAP_AVATARBASE_SIZE_BORDERRADIUSS_SQUARE,\n TWCLASSMAP_AVATARBASE_SIZE_BORDER,\n} from './AvatarBase.constants';\nimport type { AvatarBaseProps } from './AvatarBase.types';\n\nexport const AvatarBase = ({\n children,\n size = AvatarBaseSize.Md,\n shape = AvatarBaseShape.Circle,\n fallbackText,\n fallbackTextProps,\n hasBorder = false,\n twClassName,\n style,\n ...props\n}: AvatarBaseProps) => {\n const tw = useTailwind();\n\n return (\n <View\n {...props}\n style={[\n tw.style(\n 'items-center justify-center overflow-hidden bg-alternative',\n shape === AvatarBaseShape.Circle\n ? 'rounded-full'\n : TWCLASSMAP_AVATARBASE_SIZE_BORDERRADIUSS_SQUARE[size],\n hasBorder\n ? TWCLASSMAP_AVATARBASE_HASBORDER_SIZE_DIMENSION[size]\n : TWCLASSMAP_AVATARBASE_SIZE_DIMENSION[size],\n hasBorder && TWCLASSMAP_AVATARBASE_SIZE_BORDER[size],\n twClassName,\n ),\n style,\n ]}\n >\n {fallbackText ? (\n <Text\n color={TextColor.TextMuted}\n variant={TextVariant.BodySm}\n fontWeight={FontWeight.Medium}\n {...fallbackTextProps}\n twClassName={`uppercase ${fallbackTextProps?.twClassName ? ` ${fallbackTextProps.twClassName}` : ''}`.trim()}\n >\n {fallbackText}\n </Text>\n ) : (\n children\n )}\n </View>\n );\n};\n"]}
|
|
@@ -30,7 +30,7 @@ const AvatarBase_1 = require("../AvatarBase/index.cjs");
|
|
|
30
30
|
const ImageOrSvg_1 = require("../temp-components/ImageOrSvg/index.cjs");
|
|
31
31
|
const AvatarFavicon = ({ src, size = design_system_shared_1.AvatarFaviconSize.Md, name, fallbackText, fallbackTextProps, imageOrSvgProps, ...props }) => {
|
|
32
32
|
const [finalFallbackText, setFallbackText] = (0, react_1.useState)('');
|
|
33
|
-
const backupFallbackText = fallbackText || name?.[0] || '';
|
|
33
|
+
const backupFallbackText = fallbackText || name?.[0] || '?';
|
|
34
34
|
const onImageErrorHandler = (e) => {
|
|
35
35
|
setFallbackText(backupFallbackText);
|
|
36
36
|
imageOrSvgProps?.onImageError?.(e);
|
|
@@ -39,7 +39,7 @@ const AvatarFavicon = ({ src, size = design_system_shared_1.AvatarFaviconSize.Md
|
|
|
39
39
|
setFallbackText(backupFallbackText);
|
|
40
40
|
imageOrSvgProps?.onSvgError?.(e);
|
|
41
41
|
};
|
|
42
|
-
return (<AvatarBase_1.AvatarBase size={size} shape={design_system_shared_1.AvatarBaseShape.Circle} fallbackText={finalFallbackText} fallbackTextProps={fallbackTextProps} {...props}>
|
|
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
|
resizeMode: 'contain',
|
|
45
45
|
...imageOrSvgProps?.imageProps,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarFavicon.cjs","sourceRoot":"","sources":["../../../src/components/AvatarFavicon/AvatarFavicon.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,kFAGiD;AACjD,+CAAwC;AAGxC,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,
|
|
1
|
+
{"version":3,"file":"AvatarFavicon.cjs","sourceRoot":"","sources":["../../../src/components/AvatarFavicon/AvatarFavicon.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,kFAGiD;AACjD,+CAAwC;AAGxC,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,CAAkB,EAAE,EAAE;QACjD,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-previews/design-system-shared';\nimport React, { useState } from 'react';\nimport type { ImageErrorEvent } from 'react-native';\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: ImageErrorEvent) => {\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 resizeMode: '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":"AAIA,OAAO,KAAmB,cAAc;AAMxC,OAAO,KAAK,EAAE,kBAAkB,EAAE,kCAA8B;AAEhE,eAAO,MAAM,aAAa,oFAQvB,kBAAkB,
|
|
1
|
+
{"version":3,"file":"AvatarFavicon.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarFavicon/AvatarFavicon.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAmB,cAAc;AAMxC,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":"AAIA,OAAO,KAAmB,cAAc;AAMxC,OAAO,KAAK,EAAE,kBAAkB,EAAE,kCAA8B;AAEhE,eAAO,MAAM,aAAa,oFAQvB,kBAAkB,
|
|
1
|
+
{"version":3,"file":"AvatarFavicon.d.mts","sourceRoot":"","sources":["../../../src/components/AvatarFavicon/AvatarFavicon.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAmB,cAAc;AAMxC,OAAO,KAAK,EAAE,kBAAkB,EAAE,kCAA8B;AAEhE,eAAO,MAAM,aAAa,oFAQvB,kBAAkB,sBAsCpB,CAAC"}
|
|
@@ -11,7 +11,7 @@ import { AvatarBase } from "../AvatarBase/index.mjs";
|
|
|
11
11
|
import { ImageOrSvg } from "../temp-components/ImageOrSvg/index.mjs";
|
|
12
12
|
export const AvatarFavicon = ({ src, size = AvatarFaviconSize.Md, name, fallbackText, fallbackTextProps, imageOrSvgProps, ...props }) => {
|
|
13
13
|
const [finalFallbackText, setFallbackText] = useState('');
|
|
14
|
-
const backupFallbackText = fallbackText || name?.[0] || '';
|
|
14
|
+
const backupFallbackText = fallbackText || name?.[0] || '?';
|
|
15
15
|
const onImageErrorHandler = (e) => {
|
|
16
16
|
setFallbackText(backupFallbackText);
|
|
17
17
|
imageOrSvgProps?.onImageError?.(e);
|
|
@@ -20,7 +20,7 @@ export const AvatarFavicon = ({ src, size = AvatarFaviconSize.Md, name, fallback
|
|
|
20
20
|
setFallbackText(backupFallbackText);
|
|
21
21
|
imageOrSvgProps?.onSvgError?.(e);
|
|
22
22
|
};
|
|
23
|
-
return (<AvatarBase size={size} shape={AvatarBaseShape.Circle} fallbackText={finalFallbackText} fallbackTextProps={fallbackTextProps} {...props}>
|
|
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
|
resizeMode: 'contain',
|
|
26
26
|
...imageOrSvgProps?.imageProps,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarFavicon.mjs","sourceRoot":"","sources":["../../../src/components/AvatarFavicon/AvatarFavicon.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EACL,eAAe,EACf,iBAAiB,EAClB,gDAAgD;AACjD,OAAO,QAAO,EAAE,QAAQ,EAAE,cAAc;;AAGxC,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,
|
|
1
|
+
{"version":3,"file":"AvatarFavicon.mjs","sourceRoot":"","sources":["../../../src/components/AvatarFavicon/AvatarFavicon.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EACL,eAAe,EACf,iBAAiB,EAClB,gDAAgD;AACjD,OAAO,QAAO,EAAE,QAAQ,EAAE,cAAc;;AAGxC,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,CAAkB,EAAE,EAAE;QACjD,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-previews/design-system-shared';\nimport React, { useState } from 'react';\nimport type { ImageErrorEvent } from 'react-native';\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: ImageErrorEvent) => {\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 resizeMode: 'contain',\n ...imageOrSvgProps?.imageProps,\n }}\n onImageError={onImageErrorHandler}\n onSvgError={onSvgErrorHandler}\n />\n )}\n </AvatarBase>\n );\n};\n"]}
|
|
@@ -31,7 +31,7 @@ const AvatarBase_1 = require("../AvatarBase/index.cjs");
|
|
|
31
31
|
const ImageOrSvg_1 = require("../temp-components/ImageOrSvg/index.cjs");
|
|
32
32
|
const AvatarNetwork = ({ src, size = types_1.AvatarNetworkSize.Md, name, fallbackText, fallbackTextProps, imageOrSvgProps, ...props }) => {
|
|
33
33
|
const [finalFallbackText, setFallbackText] = (0, react_1.useState)('');
|
|
34
|
-
const backupFallbackText = fallbackText || name?.[0] || '';
|
|
34
|
+
const backupFallbackText = fallbackText || name?.[0] || '?';
|
|
35
35
|
const onImageErrorHandler = (e) => {
|
|
36
36
|
setFallbackText(backupFallbackText);
|
|
37
37
|
imageOrSvgProps?.onImageError?.(e);
|
|
@@ -40,7 +40,7 @@ const AvatarNetwork = ({ src, size = types_1.AvatarNetworkSize.Md, name, fallbac
|
|
|
40
40
|
setFallbackText(backupFallbackText);
|
|
41
41
|
imageOrSvgProps?.onSvgError?.(e);
|
|
42
42
|
};
|
|
43
|
-
return (<AvatarBase_1.AvatarBase size={size} shape={design_system_shared_1.AvatarBaseShape.Square} fallbackText={finalFallbackText} fallbackTextProps={fallbackTextProps} {...props}>
|
|
43
|
+
return (<AvatarBase_1.AvatarBase size={size} shape={design_system_shared_1.AvatarBaseShape.Square} fallbackText={src ? finalFallbackText : backupFallbackText} fallbackTextProps={fallbackTextProps} {...props}>
|
|
44
44
|
{src && (<ImageOrSvg_1.ImageOrSvg src={src} width={'100%'} height={'100%'} {...imageOrSvgProps} imageProps={{
|
|
45
45
|
resizeMode: 'contain',
|
|
46
46
|
...imageOrSvgProps?.imageProps,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarNetwork.cjs","sourceRoot":"","sources":["../../../src/components/AvatarNetwork/AvatarNetwork.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,kFAA0E;AAC1E,+CAAwC;AAGxC,iDAAgD;AAChD,wDAA2C;AAC3C,wEAA2D;AAIpD,MAAM,aAAa,GAAG,CAAC,EAC5B,GAAG,EACH,IAAI,GAAG,yBAAiB,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,
|
|
1
|
+
{"version":3,"file":"AvatarNetwork.cjs","sourceRoot":"","sources":["../../../src/components/AvatarNetwork/AvatarNetwork.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,kFAA0E;AAC1E,+CAAwC;AAGxC,iDAAgD;AAChD,wDAA2C;AAC3C,wEAA2D;AAIpD,MAAM,aAAa,GAAG,CAAC,EAC5B,GAAG,EACH,IAAI,GAAG,yBAAiB,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,CAAkB,EAAE,EAAE;QACjD,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 { AvatarBaseShape } from '@metamask-previews/design-system-shared';\nimport React, { useState } from 'react';\nimport type { ImageErrorEvent } from 'react-native';\n\nimport { AvatarNetworkSize } from '../../types';\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: ImageErrorEvent) => {\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 resizeMode: '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":"AACA,OAAO,KAAmB,cAAc;AAOxC,OAAO,KAAK,EAAE,kBAAkB,EAAE,kCAA8B;AAEhE,eAAO,MAAM,aAAa,oFAQvB,kBAAkB,
|
|
1
|
+
{"version":3,"file":"AvatarNetwork.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarNetwork/AvatarNetwork.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,cAAc;AAOxC,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":"AACA,OAAO,KAAmB,cAAc;AAOxC,OAAO,KAAK,EAAE,kBAAkB,EAAE,kCAA8B;AAEhE,eAAO,MAAM,aAAa,oFAQvB,kBAAkB,
|
|
1
|
+
{"version":3,"file":"AvatarNetwork.d.mts","sourceRoot":"","sources":["../../../src/components/AvatarNetwork/AvatarNetwork.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,cAAc;AAOxC,OAAO,KAAK,EAAE,kBAAkB,EAAE,kCAA8B;AAEhE,eAAO,MAAM,aAAa,oFAQvB,kBAAkB,sBAsCpB,CAAC"}
|
|
@@ -12,7 +12,7 @@ import { AvatarBase } from "../AvatarBase/index.mjs";
|
|
|
12
12
|
import { ImageOrSvg } from "../temp-components/ImageOrSvg/index.mjs";
|
|
13
13
|
export const AvatarNetwork = ({ src, size = AvatarNetworkSize.Md, name, fallbackText, fallbackTextProps, imageOrSvgProps, ...props }) => {
|
|
14
14
|
const [finalFallbackText, setFallbackText] = useState('');
|
|
15
|
-
const backupFallbackText = fallbackText || name?.[0] || '';
|
|
15
|
+
const backupFallbackText = fallbackText || name?.[0] || '?';
|
|
16
16
|
const onImageErrorHandler = (e) => {
|
|
17
17
|
setFallbackText(backupFallbackText);
|
|
18
18
|
imageOrSvgProps?.onImageError?.(e);
|
|
@@ -21,7 +21,7 @@ export const AvatarNetwork = ({ src, size = AvatarNetworkSize.Md, name, fallback
|
|
|
21
21
|
setFallbackText(backupFallbackText);
|
|
22
22
|
imageOrSvgProps?.onSvgError?.(e);
|
|
23
23
|
};
|
|
24
|
-
return (<AvatarBase size={size} shape={AvatarBaseShape.Square} fallbackText={finalFallbackText} fallbackTextProps={fallbackTextProps} {...props}>
|
|
24
|
+
return (<AvatarBase size={size} shape={AvatarBaseShape.Square} fallbackText={src ? finalFallbackText : backupFallbackText} fallbackTextProps={fallbackTextProps} {...props}>
|
|
25
25
|
{src && (<ImageOrSvg src={src} width={'100%'} height={'100%'} {...imageOrSvgProps} imageProps={{
|
|
26
26
|
resizeMode: 'contain',
|
|
27
27
|
...imageOrSvgProps?.imageProps,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarNetwork.mjs","sourceRoot":"","sources":["../../../src/components/AvatarNetwork/AvatarNetwork.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,eAAe,EAAE,gDAAgD;AAC1E,OAAO,QAAO,EAAE,QAAQ,EAAE,cAAc;;AAGxC,OAAO,EAAE,iBAAiB,EAAE,8BAAoB;AAChD,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,
|
|
1
|
+
{"version":3,"file":"AvatarNetwork.mjs","sourceRoot":"","sources":["../../../src/components/AvatarNetwork/AvatarNetwork.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,eAAe,EAAE,gDAAgD;AAC1E,OAAO,QAAO,EAAE,QAAQ,EAAE,cAAc;;AAGxC,OAAO,EAAE,iBAAiB,EAAE,8BAAoB;AAChD,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,CAAkB,EAAE,EAAE;QACjD,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 { AvatarBaseShape } from '@metamask-previews/design-system-shared';\nimport React, { useState } from 'react';\nimport type { ImageErrorEvent } from 'react-native';\n\nimport { AvatarNetworkSize } from '../../types';\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: ImageErrorEvent) => {\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 resizeMode: 'contain',\n ...imageOrSvgProps?.imageProps,\n }}\n onImageError={onImageErrorHandler}\n onSvgError={onSvgErrorHandler}\n />\n )}\n </AvatarBase>\n );\n};\n"]}
|
|
@@ -30,7 +30,7 @@ const AvatarBase_1 = require("../AvatarBase/index.cjs");
|
|
|
30
30
|
const ImageOrSvg_1 = require("../temp-components/ImageOrSvg/index.cjs");
|
|
31
31
|
const AvatarToken = ({ src, size = design_system_shared_1.AvatarTokenSize.Md, name, fallbackText, fallbackTextProps, imageOrSvgProps, ...props }) => {
|
|
32
32
|
const [finalFallbackText, setFallbackText] = (0, react_1.useState)('');
|
|
33
|
-
const backupFallbackText = fallbackText || name?.[0] || '';
|
|
33
|
+
const backupFallbackText = fallbackText || name?.[0] || '?';
|
|
34
34
|
const onImageErrorHandler = (e) => {
|
|
35
35
|
setFallbackText(backupFallbackText);
|
|
36
36
|
imageOrSvgProps?.onImageError?.(e);
|
|
@@ -39,7 +39,7 @@ const AvatarToken = ({ src, size = design_system_shared_1.AvatarTokenSize.Md, na
|
|
|
39
39
|
setFallbackText(backupFallbackText);
|
|
40
40
|
imageOrSvgProps?.onSvgError?.(e);
|
|
41
41
|
};
|
|
42
|
-
return (<AvatarBase_1.AvatarBase size={size} shape={design_system_shared_1.AvatarBaseShape.Circle} fallbackText={finalFallbackText} fallbackTextProps={fallbackTextProps} {...props}>
|
|
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
|
resizeMode: 'contain',
|
|
45
45
|
...imageOrSvgProps?.imageProps,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarToken.cjs","sourceRoot":"","sources":["../../../src/components/AvatarToken/AvatarToken.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,kFAGiD;AACjD,+CAAwC;AAGxC,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;
|
|
1
|
+
{"version":3,"file":"AvatarToken.cjs","sourceRoot":"","sources":["../../../src/components/AvatarToken/AvatarToken.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,kFAGiD;AACjD,+CAAwC;AAGxC,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,CAAkB,EAAE,EAAE;QACjD,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-previews/design-system-shared';\nimport React, { useState } from 'react';\nimport type { ImageErrorEvent } from 'react-native';\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: ImageErrorEvent) => {\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 resizeMode: '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":"AAIA,OAAO,KAAmB,cAAc;AAMxC,OAAO,KAAK,EAAE,gBAAgB,EAAE,gCAA4B;AAE5D,eAAO,MAAM,WAAW,oFAQrB,gBAAgB,
|
|
1
|
+
{"version":3,"file":"AvatarToken.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarToken/AvatarToken.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAmB,cAAc;AAMxC,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":"AAIA,OAAO,KAAmB,cAAc;AAMxC,OAAO,KAAK,EAAE,gBAAgB,EAAE,gCAA4B;AAE5D,eAAO,MAAM,WAAW,oFAQrB,gBAAgB,
|
|
1
|
+
{"version":3,"file":"AvatarToken.d.mts","sourceRoot":"","sources":["../../../src/components/AvatarToken/AvatarToken.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAmB,cAAc;AAMxC,OAAO,KAAK,EAAE,gBAAgB,EAAE,gCAA4B;AAE5D,eAAO,MAAM,WAAW,oFAQrB,gBAAgB,sBAsClB,CAAC"}
|
|
@@ -11,7 +11,7 @@ import { AvatarBase } from "../AvatarBase/index.mjs";
|
|
|
11
11
|
import { ImageOrSvg } from "../temp-components/ImageOrSvg/index.mjs";
|
|
12
12
|
export const AvatarToken = ({ src, size = AvatarTokenSize.Md, name, fallbackText, fallbackTextProps, imageOrSvgProps, ...props }) => {
|
|
13
13
|
const [finalFallbackText, setFallbackText] = useState('');
|
|
14
|
-
const backupFallbackText = fallbackText || name?.[0] || '';
|
|
14
|
+
const backupFallbackText = fallbackText || name?.[0] || '?';
|
|
15
15
|
const onImageErrorHandler = (e) => {
|
|
16
16
|
setFallbackText(backupFallbackText);
|
|
17
17
|
imageOrSvgProps?.onImageError?.(e);
|
|
@@ -20,7 +20,7 @@ export const AvatarToken = ({ src, size = AvatarTokenSize.Md, name, fallbackText
|
|
|
20
20
|
setFallbackText(backupFallbackText);
|
|
21
21
|
imageOrSvgProps?.onSvgError?.(e);
|
|
22
22
|
};
|
|
23
|
-
return (<AvatarBase size={size} shape={AvatarBaseShape.Circle} fallbackText={finalFallbackText} fallbackTextProps={fallbackTextProps} {...props}>
|
|
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
|
resizeMode: 'contain',
|
|
26
26
|
...imageOrSvgProps?.imageProps,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarToken.mjs","sourceRoot":"","sources":["../../../src/components/AvatarToken/AvatarToken.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EACL,eAAe,EACf,eAAe,EAChB,gDAAgD;AACjD,OAAO,QAAO,EAAE,QAAQ,EAAE,cAAc;;AAGxC,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;
|
|
1
|
+
{"version":3,"file":"AvatarToken.mjs","sourceRoot":"","sources":["../../../src/components/AvatarToken/AvatarToken.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EACL,eAAe,EACf,eAAe,EAChB,gDAAgD;AACjD,OAAO,QAAO,EAAE,QAAQ,EAAE,cAAc;;AAGxC,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,CAAkB,EAAE,EAAE;QACjD,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-previews/design-system-shared';\nimport React, { useState } from 'react';\nimport type { ImageErrorEvent } from 'react-native';\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: ImageErrorEvent) => {\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 resizeMode: 'contain',\n ...imageOrSvgProps?.imageProps,\n }}\n onImageError={onImageErrorHandler}\n onSvgError={onSvgErrorHandler}\n />\n )}\n </AvatarBase>\n );\n};\n"]}
|
|
@@ -5,39 +5,62 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
6
|
exports.SectionHeader = void 0;
|
|
7
7
|
const design_system_shared_1 = require("@metamask-previews/design-system-shared");
|
|
8
|
+
const design_system_twrnc_preset_1 = require("@metamask-previews/design-system-twrnc-preset");
|
|
8
9
|
const react_1 = __importDefault(require("react"));
|
|
10
|
+
const react_native_1 = require("react-native");
|
|
9
11
|
const BoxRow_1 = require("../BoxRow/index.cjs");
|
|
10
12
|
const Icon_1 = require("../Icon/index.cjs");
|
|
11
13
|
/**
|
|
12
14
|
* Horizontal section header: optional start/end icons or accessories, and a title row with optional inline accessory.
|
|
13
|
-
*
|
|
15
|
+
* When `isInteractive` is `true`, the header is wrapped in a `Pressable` and remaining `PressableProps` are forwarded to it.
|
|
16
|
+
* Otherwise, remaining `View` props are forwarded to the outer {@link BoxRow}.
|
|
14
17
|
*
|
|
15
|
-
* @param
|
|
16
|
-
* @param
|
|
17
|
-
* @param
|
|
18
|
-
* @param
|
|
19
|
-
* @param
|
|
20
|
-
* @param
|
|
21
|
-
* @param
|
|
22
|
-
* @param
|
|
23
|
-
* @param
|
|
24
|
-
* @param
|
|
25
|
-
* @param
|
|
26
|
-
* @param
|
|
18
|
+
* @param sectionHeaderProps - Component props
|
|
19
|
+
* @param sectionHeaderProps.title - Title content for the inner row (required)
|
|
20
|
+
* @param sectionHeaderProps.titleAccessory - Optional node to the right of `title` in the inner row
|
|
21
|
+
* @param sectionHeaderProps.titleProps - Optional props merged into inner row `Text` when `title` is a string
|
|
22
|
+
* @param sectionHeaderProps.titleWrapperProps - Optional props spread onto the inner `BoxRow`
|
|
23
|
+
* @param sectionHeaderProps.startAccessory - Optional custom node before the title row on the outer row; used when no start icon is resolved
|
|
24
|
+
* @param sectionHeaderProps.startIconName - Optional start icon; takes precedence over `startAccessory` when set
|
|
25
|
+
* @param sectionHeaderProps.startIconProps - Props merged into the start `Icon` (defaults include medium size and default icon color)
|
|
26
|
+
* @param sectionHeaderProps.endAccessory - Optional custom node after the title row on the outer row; used when no end icon is resolved
|
|
27
|
+
* @param sectionHeaderProps.endIconName - Optional end icon; takes precedence over `endAccessory` when set. Defaults to `IconName.ArrowRight` when `isInteractive` is `true` and no end icon or `endAccessory` is provided
|
|
28
|
+
* @param sectionHeaderProps.endIconProps - Props merged into the end `Icon`
|
|
29
|
+
* @param sectionHeaderProps.isInteractive - When `true`, wraps the header in a `Pressable` with reduced opacity on press
|
|
30
|
+
* @param sectionHeaderProps.style - Optional style on the outer wrapper (`View` or `Pressable` style, including function form when interactive)
|
|
31
|
+
* @param sectionHeaderProps.twClassName - Optional Tailwind classes on the outer row
|
|
27
32
|
*
|
|
28
33
|
* @returns The rendered SectionHeader layout.
|
|
29
34
|
*/
|
|
30
|
-
const SectionHeader = (
|
|
31
|
-
const
|
|
32
|
-
const
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
35
|
+
const SectionHeader = (sectionHeaderProps) => {
|
|
36
|
+
const { title, titleAccessory, titleProps, titleWrapperProps, startAccessory, startIconName, startIconProps, endAccessory, endIconName, endIconProps, isInteractive, twClassName = '', style, ...props } = sectionHeaderProps;
|
|
37
|
+
const tw = (0, design_system_twrnc_preset_1.useTailwind)();
|
|
38
|
+
const resolvedEndIconName = endIconName ??
|
|
39
|
+
(isInteractive && !endAccessory ? design_system_shared_1.IconName.ArrowRight : undefined);
|
|
40
|
+
const resolvedStartAccessory = startIconName ? (<Icon_1.Icon size={design_system_shared_1.IconSize.Md} color={design_system_shared_1.IconColor.IconDefault} twClassName="shrink-0" {...startIconProps} name={startIconName}/>) : (startAccessory);
|
|
41
|
+
const resolvedEndAccessory = resolvedEndIconName ? (<Icon_1.Icon size={design_system_shared_1.IconSize.Md} color={design_system_shared_1.IconColor.IconAlternative} twClassName="shrink-0" {...endIconProps} name={resolvedEndIconName}/>) : (endAccessory);
|
|
42
|
+
const titleRow = title ? (<BoxRow_1.BoxRow {...titleWrapperProps} gap={1} endAccessory={titleAccessory} textProps={{
|
|
43
|
+
variant: design_system_shared_1.TextVariant.HeadingMd,
|
|
44
|
+
color: design_system_shared_1.TextColor.TextDefault,
|
|
45
|
+
...titleProps,
|
|
46
|
+
}}>
|
|
47
|
+
{title}
|
|
48
|
+
</BoxRow_1.BoxRow>) : null;
|
|
49
|
+
if (isInteractive) {
|
|
50
|
+
const { disabled, accessibilityRole = 'button' } = sectionHeaderProps;
|
|
51
|
+
const isDisabled = Boolean(disabled);
|
|
52
|
+
return (<react_native_1.Pressable accessibilityRole={accessibilityRole} style={({ pressed }) => {
|
|
53
|
+
const baseStyle = tw.style('px-4 pb-2 pt-3', twClassName, pressed && !isDisabled && 'opacity-70');
|
|
54
|
+
const additionalStyle = typeof style === 'function' ? style({ pressed }) : style;
|
|
55
|
+
return additionalStyle ? [baseStyle, additionalStyle] : baseStyle;
|
|
56
|
+
}} {...props}>
|
|
57
|
+
<BoxRow_1.BoxRow gap={1} startAccessory={resolvedStartAccessory} endAccessory={resolvedEndAccessory}>
|
|
58
|
+
{titleRow}
|
|
59
|
+
</BoxRow_1.BoxRow>
|
|
60
|
+
</react_native_1.Pressable>);
|
|
61
|
+
}
|
|
62
|
+
return (<BoxRow_1.BoxRow {...props} gap={1} style={style} twClassName={`px-4 pb-2 pt-3 ${twClassName}`} startAccessory={resolvedStartAccessory} endAccessory={resolvedEndAccessory}>
|
|
63
|
+
{titleRow}
|
|
41
64
|
</BoxRow_1.BoxRow>);
|
|
42
65
|
};
|
|
43
66
|
exports.SectionHeader = SectionHeader;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SectionHeader.cjs","sourceRoot":"","sources":["../../../src/components/SectionHeader/SectionHeader.tsx"],"names":[],"mappings":";;;;;;AAAA,
|
|
1
|
+
{"version":3,"file":"SectionHeader.cjs","sourceRoot":"","sources":["../../../src/components/SectionHeader/SectionHeader.tsx"],"names":[],"mappings":";;;;;;AAAA,kFAMiD;AACjD,8FAA4E;AAC5E,kDAA0B;AAC1B,+CAAyC;AAEzC,gDAAmC;AACnC,4CAA+B;AAI/B;;;;;;;;;;;;;;;;;;;;;GAqBG;AACI,MAAM,aAAa,GAAiC,CACzD,kBAAkB,EAClB,EAAE;IACF,MAAM,EACJ,KAAK,EACL,cAAc,EACd,UAAU,EACV,iBAAiB,EACjB,cAAc,EACd,aAAa,EACb,cAAc,EACd,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,aAAa,EACb,WAAW,GAAG,EAAE,EAChB,KAAK,EACL,GAAG,KAAK,EACT,GAAG,kBAAkB,CAAC;IAEvB,MAAM,EAAE,GAAG,IAAA,wCAAW,GAAE,CAAC;IACzB,MAAM,mBAAmB,GACvB,WAAW;QACX,CAAC,aAAa,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,+BAAQ,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;IAErE,MAAM,sBAAsB,GAAG,aAAa,CAAC,CAAC,CAAC,CAC7C,CAAC,WAAI,CACH,IAAI,CAAC,CAAC,+BAAQ,CAAC,EAAE,CAAC,CAClB,KAAK,CAAC,CAAC,gCAAS,CAAC,WAAW,CAAC,CAC7B,WAAW,CAAC,UAAU,CACtB,IAAI,cAAc,CAAC,CACnB,IAAI,CAAC,CAAC,aAAa,CAAC,EACpB,CACH,CAAC,CAAC,CAAC,CACF,cAAc,CACf,CAAC;IAEF,MAAM,oBAAoB,GAAG,mBAAmB,CAAC,CAAC,CAAC,CACjD,CAAC,WAAI,CACH,IAAI,CAAC,CAAC,+BAAQ,CAAC,EAAE,CAAC,CAClB,KAAK,CAAC,CAAC,gCAAS,CAAC,eAAe,CAAC,CACjC,WAAW,CAAC,UAAU,CACtB,IAAI,YAAY,CAAC,CACjB,IAAI,CAAC,CAAC,mBAAmB,CAAC,EAC1B,CACH,CAAC,CAAC,CAAC,CACF,YAAY,CACb,CAAC;IAEF,MAAM,QAAQ,GAAG,KAAK,CAAC,CAAC,CAAC,CACvB,CAAC,eAAM,CACL,IAAI,iBAAiB,CAAC,CACtB,GAAG,CAAC,CAAC,CAAC,CAAC,CACP,YAAY,CAAC,CAAC,cAAc,CAAC,CAC7B,SAAS,CAAC,CAAC;YACT,OAAO,EAAE,kCAAW,CAAC,SAAS;YAC9B,KAAK,EAAE,gCAAS,CAAC,WAAW;YAC5B,GAAG,UAAU;SACd,CAAC,CAEF;MAAA,CAAC,KAAK,CACR;IAAA,EAAE,eAAM,CAAC,CACV,CAAC,CAAC,CAAC,IAAI,CAAC;IAET,IAAI,aAAa,EAAE;QACjB,MAAM,EAAE,QAAQ,EAAE,iBAAiB,GAAG,QAAQ,EAAE,GAAG,kBAAkB,CAAC;QACtE,MAAM,UAAU,GAAG,OAAO,CAAC,QAAQ,CAAC,CAAC;QAErC,OAAO,CACL,CAAC,wBAAS,CACR,iBAAiB,CAAC,CAAC,iBAAiB,CAAC,CACrC,KAAK,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE;gBACrB,MAAM,SAAS,GAAG,EAAE,CAAC,KAAK,CACxB,gBAAgB,EAChB,WAAW,EACX,OAAO,IAAI,CAAC,UAAU,IAAI,YAAY,CACvC,CAAC;gBACF,MAAM,eAAe,GACnB,OAAO,KAAK,KAAK,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;gBAE3D,OAAO,eAAe,CAAC,CAAC,CAAC,CAAC,SAAS,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;YACpE,CAAC,CAAC,CACF,IAAI,KAAK,CAAC,CAEV;QAAA,CAAC,eAAM,CACL,GAAG,CAAC,CAAC,CAAC,CAAC,CACP,cAAc,CAAC,CAAC,sBAAsB,CAAC,CACvC,YAAY,CAAC,CAAC,oBAAoB,CAAC,CAEnC;UAAA,CAAC,QAAQ,CACX;QAAA,EAAE,eAAM,CACV;MAAA,EAAE,wBAAS,CAAC,CACb,CAAC;KACH;IAED,OAAO,CACL,CAAC,eAAM,CACL,IAAI,KAAK,CAAC,CACV,GAAG,CAAC,CAAC,CAAC,CAAC,CACP,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,WAAW,CAAC,CAAC,kBAAkB,WAAW,EAAE,CAAC,CAC7C,cAAc,CAAC,CAAC,sBAAsB,CAAC,CACvC,YAAY,CAAC,CAAC,oBAAoB,CAAC,CAEnC;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,eAAM,CAAC,CACV,CAAC;AACJ,CAAC,CAAC;AA3GW,QAAA,aAAa,iBA2GxB;AAEF,qBAAa,CAAC,WAAW,GAAG,eAAe,CAAC","sourcesContent":["import {\n IconColor,\n IconName,\n IconSize,\n TextColor,\n TextVariant,\n} from '@metamask-previews/design-system-shared';\nimport { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React from 'react';\nimport { Pressable } from 'react-native';\n\nimport { BoxRow } from '../BoxRow';\nimport { Icon } from '../Icon';\n\nimport type { SectionHeaderProps } from './SectionHeader.types';\n\n/**\n * Horizontal section header: optional start/end icons or accessories, and a title row with optional inline accessory.\n * When `isInteractive` is `true`, the header is wrapped in a `Pressable` and remaining `PressableProps` are forwarded to it.\n * Otherwise, remaining `View` props are forwarded to the outer {@link BoxRow}.\n *\n * @param sectionHeaderProps - Component props\n * @param sectionHeaderProps.title - Title content for the inner row (required)\n * @param sectionHeaderProps.titleAccessory - Optional node to the right of `title` in the inner row\n * @param sectionHeaderProps.titleProps - Optional props merged into inner row `Text` when `title` is a string\n * @param sectionHeaderProps.titleWrapperProps - Optional props spread onto the inner `BoxRow`\n * @param sectionHeaderProps.startAccessory - Optional custom node before the title row on the outer row; used when no start icon is resolved\n * @param sectionHeaderProps.startIconName - Optional start icon; takes precedence over `startAccessory` when set\n * @param sectionHeaderProps.startIconProps - Props merged into the start `Icon` (defaults include medium size and default icon color)\n * @param sectionHeaderProps.endAccessory - Optional custom node after the title row on the outer row; used when no end icon is resolved\n * @param sectionHeaderProps.endIconName - Optional end icon; takes precedence over `endAccessory` when set. Defaults to `IconName.ArrowRight` when `isInteractive` is `true` and no end icon or `endAccessory` is provided\n * @param sectionHeaderProps.endIconProps - Props merged into the end `Icon`\n * @param sectionHeaderProps.isInteractive - When `true`, wraps the header in a `Pressable` with reduced opacity on press\n * @param sectionHeaderProps.style - Optional style on the outer wrapper (`View` or `Pressable` style, including function form when interactive)\n * @param sectionHeaderProps.twClassName - Optional Tailwind classes on the outer row\n *\n * @returns The rendered SectionHeader layout.\n */\nexport const SectionHeader: React.FC<SectionHeaderProps> = (\n sectionHeaderProps,\n) => {\n const {\n title,\n titleAccessory,\n titleProps,\n titleWrapperProps,\n startAccessory,\n startIconName,\n startIconProps,\n endAccessory,\n endIconName,\n endIconProps,\n isInteractive,\n twClassName = '',\n style,\n ...props\n } = sectionHeaderProps;\n\n const tw = useTailwind();\n const resolvedEndIconName =\n endIconName ??\n (isInteractive && !endAccessory ? IconName.ArrowRight : undefined);\n\n const resolvedStartAccessory = startIconName ? (\n <Icon\n size={IconSize.Md}\n color={IconColor.IconDefault}\n twClassName=\"shrink-0\"\n {...startIconProps}\n name={startIconName}\n />\n ) : (\n startAccessory\n );\n\n const resolvedEndAccessory = resolvedEndIconName ? (\n <Icon\n size={IconSize.Md}\n color={IconColor.IconAlternative}\n twClassName=\"shrink-0\"\n {...endIconProps}\n name={resolvedEndIconName}\n />\n ) : (\n endAccessory\n );\n\n const titleRow = title ? (\n <BoxRow\n {...titleWrapperProps}\n gap={1}\n endAccessory={titleAccessory}\n textProps={{\n variant: TextVariant.HeadingMd,\n color: TextColor.TextDefault,\n ...titleProps,\n }}\n >\n {title}\n </BoxRow>\n ) : null;\n\n if (isInteractive) {\n const { disabled, accessibilityRole = 'button' } = sectionHeaderProps;\n const isDisabled = Boolean(disabled);\n\n return (\n <Pressable\n accessibilityRole={accessibilityRole}\n style={({ pressed }) => {\n const baseStyle = tw.style(\n 'px-4 pb-2 pt-3',\n twClassName,\n pressed && !isDisabled && 'opacity-70',\n );\n const additionalStyle =\n typeof style === 'function' ? style({ pressed }) : style;\n\n return additionalStyle ? [baseStyle, additionalStyle] : baseStyle;\n }}\n {...props}\n >\n <BoxRow\n gap={1}\n startAccessory={resolvedStartAccessory}\n endAccessory={resolvedEndAccessory}\n >\n {titleRow}\n </BoxRow>\n </Pressable>\n );\n }\n\n return (\n <BoxRow\n {...props}\n gap={1}\n style={style}\n twClassName={`px-4 pb-2 pt-3 ${twClassName}`}\n startAccessory={resolvedStartAccessory}\n endAccessory={resolvedEndAccessory}\n >\n {titleRow}\n </BoxRow>\n );\n};\n\nSectionHeader.displayName = 'SectionHeader';\n"]}
|
|
@@ -2,20 +2,23 @@ import React from "react";
|
|
|
2
2
|
import type { SectionHeaderProps } from "./SectionHeader.types.cjs";
|
|
3
3
|
/**
|
|
4
4
|
* Horizontal section header: optional start/end icons or accessories, and a title row with optional inline accessory.
|
|
5
|
-
*
|
|
5
|
+
* When `isInteractive` is `true`, the header is wrapped in a `Pressable` and remaining `PressableProps` are forwarded to it.
|
|
6
|
+
* Otherwise, remaining `View` props are forwarded to the outer {@link BoxRow}.
|
|
6
7
|
*
|
|
7
|
-
* @param
|
|
8
|
-
* @param
|
|
9
|
-
* @param
|
|
10
|
-
* @param
|
|
11
|
-
* @param
|
|
12
|
-
* @param
|
|
13
|
-
* @param
|
|
14
|
-
* @param
|
|
15
|
-
* @param
|
|
16
|
-
* @param
|
|
17
|
-
* @param
|
|
18
|
-
* @param
|
|
8
|
+
* @param sectionHeaderProps - Component props
|
|
9
|
+
* @param sectionHeaderProps.title - Title content for the inner row (required)
|
|
10
|
+
* @param sectionHeaderProps.titleAccessory - Optional node to the right of `title` in the inner row
|
|
11
|
+
* @param sectionHeaderProps.titleProps - Optional props merged into inner row `Text` when `title` is a string
|
|
12
|
+
* @param sectionHeaderProps.titleWrapperProps - Optional props spread onto the inner `BoxRow`
|
|
13
|
+
* @param sectionHeaderProps.startAccessory - Optional custom node before the title row on the outer row; used when no start icon is resolved
|
|
14
|
+
* @param sectionHeaderProps.startIconName - Optional start icon; takes precedence over `startAccessory` when set
|
|
15
|
+
* @param sectionHeaderProps.startIconProps - Props merged into the start `Icon` (defaults include medium size and default icon color)
|
|
16
|
+
* @param sectionHeaderProps.endAccessory - Optional custom node after the title row on the outer row; used when no end icon is resolved
|
|
17
|
+
* @param sectionHeaderProps.endIconName - Optional end icon; takes precedence over `endAccessory` when set. Defaults to `IconName.ArrowRight` when `isInteractive` is `true` and no end icon or `endAccessory` is provided
|
|
18
|
+
* @param sectionHeaderProps.endIconProps - Props merged into the end `Icon`
|
|
19
|
+
* @param sectionHeaderProps.isInteractive - When `true`, wraps the header in a `Pressable` with reduced opacity on press
|
|
20
|
+
* @param sectionHeaderProps.style - Optional style on the outer wrapper (`View` or `Pressable` style, including function form when interactive)
|
|
21
|
+
* @param sectionHeaderProps.twClassName - Optional Tailwind classes on the outer row
|
|
19
22
|
*
|
|
20
23
|
* @returns The rendered SectionHeader layout.
|
|
21
24
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SectionHeader.d.cts","sourceRoot":"","sources":["../../../src/components/SectionHeader/SectionHeader.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"SectionHeader.d.cts","sourceRoot":"","sources":["../../../src/components/SectionHeader/SectionHeader.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,cAAc;AAM1B,OAAO,KAAK,EAAE,kBAAkB,EAAE,kCAA8B;AAEhE;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA2GtD,CAAC"}
|
|
@@ -2,20 +2,23 @@ import React from "react";
|
|
|
2
2
|
import type { SectionHeaderProps } from "./SectionHeader.types.mjs";
|
|
3
3
|
/**
|
|
4
4
|
* Horizontal section header: optional start/end icons or accessories, and a title row with optional inline accessory.
|
|
5
|
-
*
|
|
5
|
+
* When `isInteractive` is `true`, the header is wrapped in a `Pressable` and remaining `PressableProps` are forwarded to it.
|
|
6
|
+
* Otherwise, remaining `View` props are forwarded to the outer {@link BoxRow}.
|
|
6
7
|
*
|
|
7
|
-
* @param
|
|
8
|
-
* @param
|
|
9
|
-
* @param
|
|
10
|
-
* @param
|
|
11
|
-
* @param
|
|
12
|
-
* @param
|
|
13
|
-
* @param
|
|
14
|
-
* @param
|
|
15
|
-
* @param
|
|
16
|
-
* @param
|
|
17
|
-
* @param
|
|
18
|
-
* @param
|
|
8
|
+
* @param sectionHeaderProps - Component props
|
|
9
|
+
* @param sectionHeaderProps.title - Title content for the inner row (required)
|
|
10
|
+
* @param sectionHeaderProps.titleAccessory - Optional node to the right of `title` in the inner row
|
|
11
|
+
* @param sectionHeaderProps.titleProps - Optional props merged into inner row `Text` when `title` is a string
|
|
12
|
+
* @param sectionHeaderProps.titleWrapperProps - Optional props spread onto the inner `BoxRow`
|
|
13
|
+
* @param sectionHeaderProps.startAccessory - Optional custom node before the title row on the outer row; used when no start icon is resolved
|
|
14
|
+
* @param sectionHeaderProps.startIconName - Optional start icon; takes precedence over `startAccessory` when set
|
|
15
|
+
* @param sectionHeaderProps.startIconProps - Props merged into the start `Icon` (defaults include medium size and default icon color)
|
|
16
|
+
* @param sectionHeaderProps.endAccessory - Optional custom node after the title row on the outer row; used when no end icon is resolved
|
|
17
|
+
* @param sectionHeaderProps.endIconName - Optional end icon; takes precedence over `endAccessory` when set. Defaults to `IconName.ArrowRight` when `isInteractive` is `true` and no end icon or `endAccessory` is provided
|
|
18
|
+
* @param sectionHeaderProps.endIconProps - Props merged into the end `Icon`
|
|
19
|
+
* @param sectionHeaderProps.isInteractive - When `true`, wraps the header in a `Pressable` with reduced opacity on press
|
|
20
|
+
* @param sectionHeaderProps.style - Optional style on the outer wrapper (`View` or `Pressable` style, including function form when interactive)
|
|
21
|
+
* @param sectionHeaderProps.twClassName - Optional Tailwind classes on the outer row
|
|
19
22
|
*
|
|
20
23
|
* @returns The rendered SectionHeader layout.
|
|
21
24
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SectionHeader.d.mts","sourceRoot":"","sources":["../../../src/components/SectionHeader/SectionHeader.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"SectionHeader.d.mts","sourceRoot":"","sources":["../../../src/components/SectionHeader/SectionHeader.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,cAAc;AAM1B,OAAO,KAAK,EAAE,kBAAkB,EAAE,kCAA8B;AAEhE;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA2GtD,CAAC"}
|