@proximus/lavender-pokecard-native 1.2.4-alpha.7 → 1.2.4-alpha.8
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.
|
@@ -44,6 +44,13 @@ export interface PxCardContainerProps extends AccessibilityProps {
|
|
|
44
44
|
artwork?: ImageSourcePropType;
|
|
45
45
|
paddingSize?: 's' | 'm' | 'l';
|
|
46
46
|
aspectRatio?: MediaContainerAspectRatio;
|
|
47
|
+
/**
|
|
48
|
+
* Explicit numeric aspect ratio (width / height) for the media container.
|
|
49
|
+
* Used when `aspectRatio` is `'auto'` to provide a pre-known value
|
|
50
|
+
* (e.g. parsed from an image URL) instead of waiting for `Image.getSize`.
|
|
51
|
+
* Ignored when `aspectRatio` is a named preset.
|
|
52
|
+
*/
|
|
53
|
+
numericAspectRatio?: number;
|
|
47
54
|
hasBorder?: boolean;
|
|
48
55
|
backgroundColor?: PxCardBackgroundColor;
|
|
49
56
|
backgroundImage?: ImageSourcePropType;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PxCardContainer.d.ts","sourceRoot":"","sources":["../src/PxCardContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AACvC,OAAO,EACL,kBAAkB,EAGlB,eAAe,EACf,mBAAmB,EACnB,SAAS,EAIT,SAAS,EACV,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"PxCardContainer.d.ts","sourceRoot":"","sources":["../src/PxCardContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AACvC,OAAO,EACL,kBAAkB,EAGlB,eAAe,EACf,mBAAmB,EACnB,SAAS,EAIT,SAAS,EACV,MAAM,cAAc,CAAC;AAOtB,OAAO,EAEL,KAAK,yBAAyB,EAC/B,MAAM,0CAA0C,CAAC;AAElD,eAAO,MAAM,qBAAqB;;;;;;;;CAQxB,CAAC;AAEX,MAAM,MAAM,qBAAqB,GAC/B,CAAC,OAAO,qBAAqB,CAAC,CAAC,MAAM,OAAO,qBAAqB,CAAC,CAAC;AAErE,MAAM,WAAW,oBAAqB,SAAQ,kBAAkB;IAC9D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,GAAG,CAAC,EAAE,mBAAmB,CAAC;IAC1B;;;;;OAKG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,MAAM,CAAC;IACxC;;OAEG;IACH,UAAU,CAAC,EAAE,eAAe,CAAC;IAC7B;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAC9B,WAAW,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IAC9B,WAAW,CAAC,EAAE,yBAAyB,CAAC;IACxC;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,eAAe,CAAC,EAAE,qBAAqB,CAAC;IACxC,eAAe,CAAC,EAAE,mBAAmB,CAAC;CACvC;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,qBAwM1D"}
|
package/dist/PxCardContainer.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React, { useMemo } from 'react';
|
|
2
2
|
import { Image, ImageBackground, StyleSheet, TouchableOpacity, View, } from 'react-native';
|
|
3
3
|
import { useTheme } from '@proximus/lavender-styling-native';
|
|
4
|
-
import { a11y, e2eID } from '@proximus/lavender-common-native';
|
|
4
|
+
import { a11y, e2eID, useImageAspectRatio, } from '@proximus/lavender-common-native';
|
|
5
5
|
import { PxMediaContainer, } from '@proximus/lavender-mediacontainer-native';
|
|
6
6
|
export const PxCardBackgroundColor = {
|
|
7
7
|
Light: 'ColorBackgroundSurfaceLight',
|
|
@@ -13,12 +13,17 @@ export const PxCardBackgroundColor = {
|
|
|
13
13
|
BrandLight: 'ColorBackgroundSurfaceBrandLight',
|
|
14
14
|
};
|
|
15
15
|
export function PxCardContainer(props) {
|
|
16
|
-
const { inverted = false, children, containerStyle, testID, onPress, disabled = false, accessibilityLabel, accessibilityHint, accessibilityRole, src, mediaPosition = 'none', resizeMode = 'cover', alternativeText, artwork, paddingSize = 's', aspectRatio, hasBorder = true, backgroundColor, backgroundImage, ...rest } = props;
|
|
16
|
+
const { inverted = false, children, containerStyle, testID, onPress, disabled = false, accessibilityLabel, accessibilityHint, accessibilityRole, src, mediaPosition = 'none', resizeMode = 'cover', alternativeText, artwork, paddingSize = 's', aspectRatio, numericAspectRatio: numericAspectRatioProp, hasBorder = true, backgroundColor, backgroundImage, ...rest } = props;
|
|
17
17
|
const { theme } = useTheme();
|
|
18
18
|
const hasMedia = !!src && mediaPosition !== 'none';
|
|
19
19
|
const hasTopMedia = hasMedia && mediaPosition === 'top';
|
|
20
20
|
const hasLeftMedia = hasMedia && mediaPosition === 'left';
|
|
21
21
|
const needsInnerPadding = hasMedia || !!backgroundImage;
|
|
22
|
+
const isAutoAspectRatio = aspectRatio === 'auto';
|
|
23
|
+
const hookAspectRatio = useImageAspectRatio(isAutoAspectRatio && hasTopMedia && numericAspectRatioProp == null
|
|
24
|
+
? src
|
|
25
|
+
: undefined);
|
|
26
|
+
const resolvedImageAspectRatio = numericAspectRatioProp ?? hookAspectRatio;
|
|
22
27
|
const customBackgroundColor = backgroundColor
|
|
23
28
|
? theme.t(backgroundColor)
|
|
24
29
|
: theme.t(inverted
|
|
@@ -71,7 +76,7 @@ export function PxCardContainer(props) {
|
|
|
71
76
|
artworkImage,
|
|
72
77
|
React.createElement(View, { style: styles.artworkContent }, children))) : (children);
|
|
73
78
|
const innerContent = (React.createElement(React.Fragment, null,
|
|
74
|
-
hasTopMedia && (React.createElement(PxMediaContainer, { aspectRatio: aspectRatio, testID: testID ? `${testID}-media-wrapper` : undefined }, mediaImage)),
|
|
79
|
+
hasTopMedia && (React.createElement(PxMediaContainer, { aspectRatio: aspectRatio, numericAspectRatio: isAutoAspectRatio ? resolvedImageAspectRatio : undefined, testID: testID ? `${testID}-media-wrapper` : undefined }, mediaImage)),
|
|
75
80
|
hasLeftMedia && (React.createElement(View, { style: styles.leftMediaWrapper, ...(testID && e2eID(`${testID}-media-wrapper`)) }, mediaImage)),
|
|
76
81
|
hasMedia ? (React.createElement(View, { style: {
|
|
77
82
|
padding,
|