@proximus/lavender-mediacontainer-native 1.2.4-alpha.6

package/dist/PxMediaContainer.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+export type MediaContainerAspectRatio = '1:1' | '4:3' | '3:2' | '16:9' | '3:1' | '2:3';
+export interface PxMediaContainerProps {
+    aspectRatio?: MediaContainerAspectRatio;
+    inset?: boolean;
+    children?: React.ReactNode;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+export declare function PxMediaContainer({ aspectRatio, inset, children, style, testID, }: PxMediaContainerProps): React.JSX.Element;
+//# sourceMappingURL=PxMediaContainer.d.ts.map

package/dist/PxMediaContainer.d.ts.map

@@ -0,0 +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;AAEV,MAAM,WAAW,qBAAqB;IACpC,WAAW,CAAC,EAAE,yBAAyB,CAAC;IACxC,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;AAWD,wBAAgB,gBAAgB,CAAC,EAC/B,WAAmB,EACnB,KAAa,EACb,QAAQ,EACR,KAAK,EACL,MAAM,GACP,EAAE,qBAAqB,qBAqBvB"}

package/dist/PxMediaContainer.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import { useTheme } from '@proximus/lavender-styling-native';
+import { e2eID } from '@proximus/lavender-common-native';
+const aspectRatioMap = {
+    '1:1': 1,
+    '4:3': 4 / 3,
+    '3:2': 3 / 2,
+    '16:9': 16 / 9,
+    '3:1': 3,
+    '2:3': 2 / 3,
+};
+export function PxMediaContainer({ aspectRatio = '1:1', inset = false, children, style, testID, }) {
+    const { theme } = useTheme();
+    const numericAspectRatio = aspectRatioMap[aspectRatio];
+    const insetPadding = inset ? theme.t('PaddingMMobile').number : 0;
+    return (React.createElement(View, { style: [
+            styles.container,
+            {
+                aspectRatio: numericAspectRatio,
+                padding: insetPadding,
+            },
+            style,
+        ], ...(testID && e2eID(testID)) },
+        React.createElement(View, { style: styles.media }, children)));
+}
+const styles = StyleSheet.create({
+    container: {
+        width: '100%',
+        overflow: 'hidden',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    media: {
+        flex: 1,
+        width: '100%',
+        height: '100%',
+    },
+});

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from './PxMediaContainer';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC"}

package/dist/index.js

@@ -0,0 +1 @@
+export * from './PxMediaContainer';

package/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "@proximus/lavender-mediacontainer-native",
+  "version": "1.2.4-alpha.6",
+  "description": "Media container component",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "peerDependencies": {
+    "@proximus/lavender-common-native": "*",
+    "@proximus/lavender-styling-native": "*"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}