@proximus/lavender-mediacontainer-native 1.2.4-alpha.6 → 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.
|
@@ -1,12 +1,18 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { StyleProp, ViewStyle } from 'react-native';
|
|
3
|
-
export type MediaContainerAspectRatio = '1:1' | '4:3' | '3:2' | '16:9' | '3:1' | '2:3';
|
|
3
|
+
export type MediaContainerAspectRatio = '1:1' | '4:3' | '3:2' | '16:9' | '3:1' | '2:3' | 'auto';
|
|
4
4
|
export interface PxMediaContainerProps {
|
|
5
5
|
aspectRatio?: MediaContainerAspectRatio;
|
|
6
|
+
/**
|
|
7
|
+
* Explicit numeric aspect ratio (width / height).
|
|
8
|
+
* When provided alongside `aspectRatio: 'auto'`, this value is used directly.
|
|
9
|
+
* Ignored when `aspectRatio` is a named preset.
|
|
10
|
+
*/
|
|
11
|
+
numericAspectRatio?: number;
|
|
6
12
|
inset?: boolean;
|
|
7
13
|
children?: React.ReactNode;
|
|
8
14
|
style?: StyleProp<ViewStyle>;
|
|
9
15
|
testID?: string;
|
|
10
16
|
}
|
|
11
|
-
export declare function PxMediaContainer({ aspectRatio, inset, children, style, testID, }: PxMediaContainerProps): React.JSX.Element;
|
|
17
|
+
export declare function PxMediaContainer({ aspectRatio, numericAspectRatio: numericAspectRatioProp, inset, children, style, testID, }: PxMediaContainerProps): React.JSX.Element;
|
|
12
18
|
//# sourceMappingURL=PxMediaContainer.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PxMediaContainer.d.ts","sourceRoot":"","sources":["../src/PxMediaContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAoB,SAAS,EAAE,MAAM,cAAc,CAAC;AAItE,MAAM,MAAM,yBAAyB,GACjC,KAAK,GACL,KAAK,GACL,KAAK,GACL,MAAM,GACN,KAAK,GACL,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"PxMediaContainer.d.ts","sourceRoot":"","sources":["../src/PxMediaContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAoB,SAAS,EAAE,MAAM,cAAc,CAAC;AAItE,MAAM,MAAM,yBAAyB,GACjC,KAAK,GACL,KAAK,GACL,KAAK,GACL,MAAM,GACN,KAAK,GACL,KAAK,GACL,MAAM,CAAC;AAEX,MAAM,WAAW,qBAAqB;IACpC,WAAW,CAAC,EAAE,yBAAyB,CAAC;IACxC;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAcD,wBAAgB,gBAAgB,CAAC,EAC/B,WAAmB,EACnB,kBAAkB,EAAE,sBAAsB,EAC1C,KAAa,EACb,QAAQ,EACR,KAAK,EACL,MAAM,GACP,EAAE,qBAAqB,qBAwBvB"}
|
package/dist/PxMediaContainer.js
CHANGED
|
@@ -10,9 +10,11 @@ const aspectRatioMap = {
|
|
|
10
10
|
'3:1': 3,
|
|
11
11
|
'2:3': 2 / 3,
|
|
12
12
|
};
|
|
13
|
-
export function PxMediaContainer({ aspectRatio = '1:1', inset = false, children, style, testID, }) {
|
|
13
|
+
export function PxMediaContainer({ aspectRatio = '1:1', numericAspectRatio: numericAspectRatioProp, inset = false, children, style, testID, }) {
|
|
14
14
|
const { theme } = useTheme();
|
|
15
|
-
const numericAspectRatio =
|
|
15
|
+
const numericAspectRatio = aspectRatio === 'auto'
|
|
16
|
+
? numericAspectRatioProp
|
|
17
|
+
: aspectRatioMap[aspectRatio];
|
|
16
18
|
const insetPadding = inset ? theme.t('PaddingMMobile').number : 0;
|
|
17
19
|
return (React.createElement(View, { style: [
|
|
18
20
|
styles.container,
|