@tradly/asset 1.0.15 → 1.0.16

package/dist/esm/native/MediaPopup.native.js

@@ -84,6 +84,7 @@ var MediaPopup = function MediaPopup(_ref) {
               backgroundColor: currentTheme.colors.background,
               borderTopLeftRadius: currentTheme.radius.xxl,
               borderTopRightRadius: currentTheme.radius.xxl,
+              height: SCREEN_HEIGHT * sheetHeight,
               maxHeight: SCREEN_HEIGHT * sheetHeight,
               padding: currentTheme.spacing.xl
             }, containerStyle, {
@@ -142,7 +143,7 @@ var styles = StyleSheet.create({
     justifyContent: 'flex-end'
   },
   container: {
-    minHeight: 200,
+    width: '100%',
     shadowColor: '#000',
     shadowOffset: {
       width: 0,
@@ -150,7 +151,8 @@ var styles = StyleSheet.create({
     },
     shadowOpacity: 0.25,
     shadowRadius: 3.84,
-    elevation: 5
+    elevation: 5,
+    overflow: 'hidden' // Ensure content doesn't overflow
   },
   header: {
     flexDirection: 'row',

package/dist/esm/native/MediaTab.native.js

@@ -4,11 +4,11 @@ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r)
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
-import React, { useMemo, useState } from 'react';
-import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
-import ImagesGallery from './MediaGallery.native';
-import VideosGallery from './VideosGallery.native';
-import { defaultTheme } from './theme';
+import React, { useMemo, useState } from "react";
+import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
+import ImagesGallery from "./MediaGallery.native";
+import VideosGallery from "./VideosGallery.native";
+import { defaultTheme } from "./theme";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 var MediaTab = function MediaTab(_ref) {
   var imagePopup = _ref.imagePopup,
@@ -35,9 +35,9 @@ var MediaTab = function MediaTab(_ref) {
   // Build a stable list of enabled tabs in order
   var availableTabs = useMemo(function () {
     var tabs = [];
-    if (options !== null && options !== void 0 && options.includes('image')) tabs.push('image');
-    if (options !== null && options !== void 0 && options.includes('video')) tabs.push('video');
-    if (options !== null && options !== void 0 && options.includes('file')) tabs.push('file');
+    if (options !== null && options !== void 0 && options.includes("image")) tabs.push("image");
+    if (options !== null && options !== void 0 && options.includes("video")) tabs.push("video");
+    if (options !== null && options !== void 0 && options.includes("file")) tabs.push("file");
     return tabs;
   }, [options]);
   var _useState = useState(0),
@@ -50,13 +50,13 @@ var MediaTab = function MediaTab(_ref) {
     return null;
   }
   var renderTabLabel = function renderTabLabel(type) {
-    if (type === 'image') return 'Images';
-    if (type === 'video') return 'Videos';
-    if (type === 'file') return 'Files';
+    if (type === "image") return "Images";
+    if (type === "video") return "Videos";
+    if (type === "file") return "Files";
     return type;
   };
   var renderPanel = function renderPanel(type) {
-    if (type === 'image') {
+    if (type === "image") {
       return /*#__PURE__*/_jsx(ImagesGallery, {
         imagePopup: imagePopup,
         update_data: update_data,
@@ -65,10 +65,11 @@ var MediaTab = function MediaTab(_ref) {
         apiService: apiService,
         onError: onError,
         picker: picker,
-        pickerOptions: pickerOptions
+        pickerOptions: pickerOptions,
+        theme: theme
       });
     }
-    if (type === 'video') {
+    if (type === "video") {
       return /*#__PURE__*/_jsx(VideosGallery, {
         imagePopup: imagePopup,
         update_data: update_data,
@@ -81,7 +82,7 @@ var MediaTab = function MediaTab(_ref) {
         theme: theme
       });
     }
-    if (type === 'file') {
+    if (type === "file") {
       // Reuse ImagesGallery for files as in original implementation
       return /*#__PURE__*/_jsx(ImagesGallery, {
         imagePopup: imagePopup,
@@ -91,7 +92,8 @@ var MediaTab = function MediaTab(_ref) {
         apiService: apiService,
         onError: onError,
         picker: picker,
-        pickerOptions: pickerOptions
+        pickerOptions: pickerOptions,
+        theme: theme
       });
     }
     return null;
@@ -102,17 +104,23 @@ var MediaTab = function MediaTab(_ref) {
       style: [styles.tabList, {
         backgroundColor: theme.colors.tabBackground,
         borderBottomColor: theme.colors.border,
-        paddingHorizontal: theme.spacing.xs
+        paddingHorizontal: theme.spacing.xs,
+        // Center align if only one tab
+        justifyContent: availableTabs.length === 1 ? "center" : "flex-start"
       }, tabListStyle],
       children: availableTabs.map(function (type, index) {
         var isSelected = index === selectedIndex;
+        var isSingleTab = availableTabs.length === 1;
         return /*#__PURE__*/_jsxs(TouchableOpacity, {
           onPress: function onPress() {
             return setSelectedIndex(index);
           },
           style: [styles.tabButton, {
             paddingVertical: theme.spacing.md,
-            paddingHorizontal: theme.spacing.lg
+            paddingHorizontal: theme.spacing.lg,
+            // If single tab, don't use flex: 1, use auto width
+            flex: isSingleTab ? 0 : 1,
+            alignSelf: isSingleTab ? "center" : "stretch"
           }, tabButtonStyle, isSelected ? [styles.tabButtonActive, tabButtonActiveStyle] : [styles.tabButtonInactive, tabButtonInactiveStyle]],
           children: [/*#__PURE__*/_jsx(Text, {
             style: [styles.tabButtonText, {
@@ -148,14 +156,14 @@ var styles = StyleSheet.create({
     flex: 1
   },
   tabList: {
-    flexDirection: 'row',
+    flexDirection: "row",
     borderBottomWidth: 2
   },
   tabButton: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-    position: 'relative'
+    alignItems: "center",
+    justifyContent: "center",
+    position: "relative",
+    minWidth: 80 // Minimum width for single tab
   },
   tabButtonActive: {
     // Active state styling applied via theme
@@ -173,7 +181,7 @@ var styles = StyleSheet.create({
     // Inactive text color applied via theme
   },
   tabIndicator: {
-    position: 'absolute',
+    position: "absolute",
     bottom: -2,
     left: 0,
     right: 0,
@@ -186,7 +194,7 @@ var styles = StyleSheet.create({
     flex: 1
   },
   panelHidden: {
-    display: 'none'
+    display: "none"
   }
 });
 export default MediaTab;

package/dist/native/MediaPopup.native.js

@@ -91,6 +91,7 @@ var MediaPopup = function MediaPopup(_ref) {
               backgroundColor: currentTheme.colors.background,
               borderTopLeftRadius: currentTheme.radius.xxl,
               borderTopRightRadius: currentTheme.radius.xxl,
+              height: SCREEN_HEIGHT * sheetHeight,
               maxHeight: SCREEN_HEIGHT * sheetHeight,
               padding: currentTheme.spacing.xl
             }, containerStyle, {
@@ -149,7 +150,7 @@ var styles = _reactNative.StyleSheet.create({
     justifyContent: 'flex-end'
   },
   container: {
-    minHeight: 200,
+    width: '100%',
     shadowColor: '#000',
     shadowOffset: {
       width: 0,
@@ -157,7 +158,8 @@ var styles = _reactNative.StyleSheet.create({
     },
     shadowOpacity: 0.25,
     shadowRadius: 3.84,
-    elevation: 5
+    elevation: 5,
+    overflow: 'hidden' // Ensure content doesn't overflow
   },
   header: {
     flexDirection: 'row',

package/dist/native/MediaTab.native.js

@@ -44,9 +44,9 @@ var MediaTab = function MediaTab(_ref) {
   // Build a stable list of enabled tabs in order
   var availableTabs = (0, _react.useMemo)(function () {
     var tabs = [];
-    if (options !== null && options !== void 0 && options.includes('image')) tabs.push('image');
-    if (options !== null && options !== void 0 && options.includes('video')) tabs.push('video');
-    if (options !== null && options !== void 0 && options.includes('file')) tabs.push('file');
+    if (options !== null && options !== void 0 && options.includes("image")) tabs.push("image");
+    if (options !== null && options !== void 0 && options.includes("video")) tabs.push("video");
+    if (options !== null && options !== void 0 && options.includes("file")) tabs.push("file");
     return tabs;
   }, [options]);
   var _useState = (0, _react.useState)(0),
@@ -59,13 +59,13 @@ var MediaTab = function MediaTab(_ref) {
     return null;
   }
   var renderTabLabel = function renderTabLabel(type) {
-    if (type === 'image') return 'Images';
-    if (type === 'video') return 'Videos';
-    if (type === 'file') return 'Files';
+    if (type === "image") return "Images";
+    if (type === "video") return "Videos";
+    if (type === "file") return "Files";
     return type;
   };
   var renderPanel = function renderPanel(type) {
-    if (type === 'image') {
+    if (type === "image") {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MediaGallery.default, {
         imagePopup: imagePopup,
         update_data: update_data,
@@ -74,10 +74,11 @@ var MediaTab = function MediaTab(_ref) {
         apiService: apiService,
         onError: onError,
         picker: picker,
-        pickerOptions: pickerOptions
+        pickerOptions: pickerOptions,
+        theme: theme
       });
     }
-    if (type === 'video') {
+    if (type === "video") {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_VideosGallery.default, {
         imagePopup: imagePopup,
         update_data: update_data,
@@ -90,7 +91,7 @@ var MediaTab = function MediaTab(_ref) {
         theme: theme
       });
     }
-    if (type === 'file') {
+    if (type === "file") {
       // Reuse ImagesGallery for files as in original implementation
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MediaGallery.default, {
         imagePopup: imagePopup,
@@ -100,7 +101,8 @@ var MediaTab = function MediaTab(_ref) {
         apiService: apiService,
         onError: onError,
         picker: picker,
-        pickerOptions: pickerOptions
+        pickerOptions: pickerOptions,
+        theme: theme
       });
     }
     return null;
@@ -111,17 +113,23 @@ var MediaTab = function MediaTab(_ref) {
       style: [styles.tabList, {
         backgroundColor: theme.colors.tabBackground,
         borderBottomColor: theme.colors.border,
-        paddingHorizontal: theme.spacing.xs
+        paddingHorizontal: theme.spacing.xs,
+        // Center align if only one tab
+        justifyContent: availableTabs.length === 1 ? "center" : "flex-start"
       }, tabListStyle],
       children: availableTabs.map(function (type, index) {
         var isSelected = index === selectedIndex;
+        var isSingleTab = availableTabs.length === 1;
         return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
           onPress: function onPress() {
             return setSelectedIndex(index);
           },
           style: [styles.tabButton, {
             paddingVertical: theme.spacing.md,
-            paddingHorizontal: theme.spacing.lg
+            paddingHorizontal: theme.spacing.lg,
+            // If single tab, don't use flex: 1, use auto width
+            flex: isSingleTab ? 0 : 1,
+            alignSelf: isSingleTab ? "center" : "stretch"
           }, tabButtonStyle, isSelected ? [styles.tabButtonActive, tabButtonActiveStyle] : [styles.tabButtonInactive, tabButtonInactiveStyle]],
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
             style: [styles.tabButtonText, {
@@ -157,14 +165,14 @@ var styles = _reactNative.StyleSheet.create({
     flex: 1
   },
   tabList: {
-    flexDirection: 'row',
+    flexDirection: "row",
     borderBottomWidth: 2
   },
   tabButton: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-    position: 'relative'
+    alignItems: "center",
+    justifyContent: "center",
+    position: "relative",
+    minWidth: 80 // Minimum width for single tab
   },
   tabButtonActive: {
     // Active state styling applied via theme
@@ -182,7 +190,7 @@ var styles = _reactNative.StyleSheet.create({
     // Inactive text color applied via theme
   },
   tabIndicator: {
-    position: 'absolute',
+    position: "absolute",
     bottom: -2,
     left: 0,
     right: 0,
@@ -195,7 +203,7 @@ var styles = _reactNative.StyleSheet.create({
     flex: 1
   },
   panelHidden: {
-    display: 'none'
+    display: "none"
   }
 });
 var _default = exports.default = MediaTab;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@tradly/asset",
-    "version": "1.0.15",
+    "version": "1.0.16",
     "description": "A reusable media gallery component for uploading and selecting images, videos, and files with Tradly authentication",
     "main": "dist/index.js",
     "module": "dist/esm/index.js",