@tradly/asset 1.0.19 → 1.0.21
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/dist/core/MediaApiService.js +162 -154
- package/dist/esm/core/MediaApiService.js +162 -154
- package/dist/esm/native/FileUpload.native.js +49 -19
- package/dist/esm/native/Icons.native.js +44 -8
- package/dist/esm/native/ImagesSkeleton.native.js +18 -11
- package/dist/esm/native/MediaGallery.native.js +30 -23
- package/dist/esm/native/MediaPopup.native.js +3 -1
- package/dist/esm/native/MediaTab.native.js +4 -0
- package/dist/esm/native/VideosGallery.native.js +14 -6
- package/dist/native/FileUpload.native.js +49 -20
- package/dist/native/Icons.native.js +43 -7
- package/dist/native/ImagesSkeleton.native.js +16 -9
- package/dist/native/MediaGallery.native.js +24 -18
- package/dist/native/MediaPopup.native.js +3 -1
- package/dist/native/MediaTab.native.js +4 -0
- package/dist/native/VideosGallery.native.js +15 -7
- package/package.json +1 -1
|
@@ -10,7 +10,6 @@ var _reactNative = require("react-native");
|
|
|
10
10
|
var _FileUpload = _interopRequireDefault(require("./FileUpload.native"));
|
|
11
11
|
var _ImagesSkeleton = _interopRequireDefault(require("./ImagesSkeleton.native"));
|
|
12
12
|
var _Pagination = _interopRequireDefault(require("./Pagination.native"));
|
|
13
|
-
var _Icons = require("./Icons.native");
|
|
14
13
|
var _theme = require("./theme");
|
|
15
14
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
16
15
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
@@ -28,14 +27,20 @@ function _nonIterableRest() { throw new TypeError("Invalid attempt to destructur
|
|
|
28
27
|
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
|
|
29
28
|
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; }
|
|
30
29
|
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; } }
|
|
31
|
-
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
|
|
32
|
-
var _Dimensions$get = _reactNative.Dimensions.get(
|
|
30
|
+
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; } // Icons are now passed via props, no need to import here
|
|
31
|
+
var _Dimensions$get = _reactNative.Dimensions.get("window"),
|
|
33
32
|
SCREEN_WIDTH = _Dimensions$get.width;
|
|
34
33
|
var NUM_COLUMNS = 3;
|
|
35
|
-
var ITEM_MARGIN =
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
34
|
+
var ITEM_MARGIN = 4; // Reduced margin for better fit
|
|
35
|
+
// Calculate item size accounting for:
|
|
36
|
+
// - Container padding (md = 12px on each side = 24px total)
|
|
37
|
+
// - Grid padding (2px on each side = 4px total)
|
|
38
|
+
// - Item margins between items (4px * 2 gaps = 8px total)
|
|
39
|
+
var CONTAINER_PADDING = 24; // paddingHorizontal md (12 * 2)
|
|
40
|
+
var GRID_PADDING = 4; // padding 2 on each side (2 * 2)
|
|
41
|
+
var TOTAL_MARGINS = ITEM_MARGIN * (NUM_COLUMNS - 1) * 2; // margins between items (4px * 2 gaps = 8px)
|
|
42
|
+
var ITEM_SIZE = (SCREEN_WIDTH - CONTAINER_PADDING - GRID_PADDING - TOTAL_MARGINS) / NUM_COLUMNS;
|
|
43
|
+
var IMAGE_MIME_TYPES = ["image/png", "image/jpeg", "image/webp", "image/svg+xml", "image/gif", "image/avif", "image/x-icon", "image/vnd.microsoft.icon", "image/heic", "image/heif"];
|
|
39
44
|
var ImagesGallery = function ImagesGallery(_ref) {
|
|
40
45
|
var update_data = _ref.update_data,
|
|
41
46
|
closePopup = _ref.closePopup,
|
|
@@ -43,6 +48,7 @@ var ImagesGallery = function ImagesGallery(_ref) {
|
|
|
43
48
|
onError = _ref.onError,
|
|
44
49
|
picker = _ref.picker,
|
|
45
50
|
pickerOptions = _ref.pickerOptions,
|
|
51
|
+
icons = _ref.icons,
|
|
46
52
|
_ref$theme = _ref.theme,
|
|
47
53
|
theme = _ref$theme === void 0 ? _theme.defaultTheme : _ref$theme,
|
|
48
54
|
containerStyle = _ref.containerStyle,
|
|
@@ -105,7 +111,7 @@ var ImagesGallery = function ImagesGallery(_ref) {
|
|
|
105
111
|
case 3:
|
|
106
112
|
_context.p = 3;
|
|
107
113
|
_t = _context.v;
|
|
108
|
-
console.error(
|
|
114
|
+
console.error("Error loading media:", _t);
|
|
109
115
|
if (onError) {
|
|
110
116
|
onError(_t);
|
|
111
117
|
}
|
|
@@ -144,13 +150,13 @@ var ImagesGallery = function ImagesGallery(_ref) {
|
|
|
144
150
|
onUploadError: onError,
|
|
145
151
|
picker: picker,
|
|
146
152
|
pickerOptions: pickerOptions,
|
|
147
|
-
|
|
148
|
-
|
|
153
|
+
icons: icons,
|
|
154
|
+
theme: theme
|
|
149
155
|
})
|
|
150
156
|
});
|
|
151
157
|
}
|
|
152
158
|
var image = images[index - 1];
|
|
153
|
-
var imageUrl = typeof image ===
|
|
159
|
+
var imageUrl = typeof image === "string" ? image : image.url;
|
|
154
160
|
var imageKey = image.id || image.url || index;
|
|
155
161
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
|
|
156
162
|
onPress: function onPress() {
|
|
@@ -172,7 +178,7 @@ var ImagesGallery = function ImagesGallery(_ref) {
|
|
|
172
178
|
});
|
|
173
179
|
};
|
|
174
180
|
var data = isLoading ? [] : [{
|
|
175
|
-
type:
|
|
181
|
+
type: "upload"
|
|
176
182
|
}].concat(_toConsumableArray(images));
|
|
177
183
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
178
184
|
style: [styles.container, containerStyle],
|
|
@@ -180,7 +186,7 @@ var ImagesGallery = function ImagesGallery(_ref) {
|
|
|
180
186
|
data: data,
|
|
181
187
|
renderItem: renderItem,
|
|
182
188
|
keyExtractor: function keyExtractor(item, index) {
|
|
183
|
-
if (index === 0) return
|
|
189
|
+
if (index === 0) return "upload";
|
|
184
190
|
var image = images[index - 1];
|
|
185
191
|
return image.id || image.url || "image-".concat(index);
|
|
186
192
|
},
|
|
@@ -211,16 +217,16 @@ var styles = _reactNative.StyleSheet.create({
|
|
|
211
217
|
flex: 1
|
|
212
218
|
},
|
|
213
219
|
grid: {
|
|
214
|
-
padding:
|
|
220
|
+
padding: 2 // Reduced padding for better fit
|
|
215
221
|
},
|
|
216
222
|
uploadContainer: {
|
|
217
223
|
margin: ITEM_MARGIN,
|
|
218
|
-
overflow:
|
|
224
|
+
overflow: "hidden"
|
|
219
225
|
},
|
|
220
226
|
imageItem: {
|
|
221
227
|
margin: ITEM_MARGIN,
|
|
222
228
|
borderRadius: 8,
|
|
223
|
-
overflow:
|
|
229
|
+
overflow: "hidden",
|
|
224
230
|
shadowOffset: {
|
|
225
231
|
width: 0,
|
|
226
232
|
height: 2
|
|
@@ -230,8 +236,8 @@ var styles = _reactNative.StyleSheet.create({
|
|
|
230
236
|
elevation: 5
|
|
231
237
|
},
|
|
232
238
|
image: {
|
|
233
|
-
width:
|
|
234
|
-
height:
|
|
239
|
+
width: "100%",
|
|
240
|
+
height: "100%"
|
|
235
241
|
},
|
|
236
242
|
paginationContainer: {
|
|
237
243
|
// Styles applied via theme
|
|
@@ -32,6 +32,7 @@ var MediaPopup = function MediaPopup(_ref) {
|
|
|
32
32
|
title = _ref$title === void 0 ? "Media Gallery" : _ref$title,
|
|
33
33
|
picker = _ref.picker,
|
|
34
34
|
pickerOptions = _ref.pickerOptions,
|
|
35
|
+
icons = _ref.icons,
|
|
35
36
|
theme = _ref.theme,
|
|
36
37
|
overlayStyle = _ref.overlayStyle,
|
|
37
38
|
containerStyle = _ref.containerStyle,
|
|
@@ -95,7 +96,7 @@ var MediaPopup = function MediaPopup(_ref) {
|
|
|
95
96
|
maxHeight: SCREEN_HEIGHT * sheetHeight,
|
|
96
97
|
paddingTop: currentTheme.spacing.sm,
|
|
97
98
|
paddingBottom: currentTheme.spacing.xl,
|
|
98
|
-
paddingHorizontal: currentTheme.spacing.xl
|
|
99
|
+
paddingHorizontal: currentTheme.spacing.md // Reduced from xl to md for better fit
|
|
99
100
|
}, containerStyle, {
|
|
100
101
|
transform: [{
|
|
101
102
|
translateY: slideAnim
|
|
@@ -136,6 +137,7 @@ var MediaPopup = function MediaPopup(_ref) {
|
|
|
136
137
|
onError: onError,
|
|
137
138
|
picker: picker,
|
|
138
139
|
pickerOptions: pickerOptions,
|
|
140
|
+
icons: icons,
|
|
139
141
|
theme: currentTheme
|
|
140
142
|
})]
|
|
141
143
|
})
|
|
@@ -29,6 +29,7 @@ var MediaTab = function MediaTab(_ref) {
|
|
|
29
29
|
onError = _ref.onError,
|
|
30
30
|
picker = _ref.picker,
|
|
31
31
|
pickerOptions = _ref.pickerOptions,
|
|
32
|
+
icons = _ref.icons,
|
|
32
33
|
_ref$theme = _ref.theme,
|
|
33
34
|
theme = _ref$theme === void 0 ? _theme.defaultTheme : _ref$theme,
|
|
34
35
|
containerStyle = _ref.containerStyle,
|
|
@@ -75,6 +76,7 @@ var MediaTab = function MediaTab(_ref) {
|
|
|
75
76
|
onError: onError,
|
|
76
77
|
picker: picker,
|
|
77
78
|
pickerOptions: pickerOptions,
|
|
79
|
+
icons: icons,
|
|
78
80
|
theme: theme
|
|
79
81
|
});
|
|
80
82
|
}
|
|
@@ -88,6 +90,7 @@ var MediaTab = function MediaTab(_ref) {
|
|
|
88
90
|
onError: onError,
|
|
89
91
|
picker: picker,
|
|
90
92
|
pickerOptions: pickerOptions,
|
|
93
|
+
icons: icons,
|
|
91
94
|
theme: theme
|
|
92
95
|
});
|
|
93
96
|
}
|
|
@@ -102,6 +105,7 @@ var MediaTab = function MediaTab(_ref) {
|
|
|
102
105
|
onError: onError,
|
|
103
106
|
picker: picker,
|
|
104
107
|
pickerOptions: pickerOptions,
|
|
108
|
+
icons: icons,
|
|
105
109
|
theme: theme
|
|
106
110
|
});
|
|
107
111
|
}
|
|
@@ -10,7 +10,6 @@ var _reactNative = require("react-native");
|
|
|
10
10
|
var _FileUpload = _interopRequireDefault(require("./FileUpload.native"));
|
|
11
11
|
var _ImagesSkeleton = _interopRequireDefault(require("./ImagesSkeleton.native"));
|
|
12
12
|
var _Pagination = _interopRequireDefault(require("./Pagination.native"));
|
|
13
|
-
var _Icons = require("./Icons.native");
|
|
14
13
|
var _theme = require("./theme");
|
|
15
14
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
16
15
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
@@ -28,13 +27,21 @@ function _nonIterableRest() { throw new TypeError("Invalid attempt to destructur
|
|
|
28
27
|
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
|
|
29
28
|
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; }
|
|
30
29
|
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; } }
|
|
31
|
-
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; } //
|
|
30
|
+
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; } // Icons are now passed via props, no need to import here
|
|
31
|
+
// Note: You'll need to install react-native-video for video playback
|
|
32
32
|
// import Video from 'react-native-video'
|
|
33
33
|
var _Dimensions$get = _reactNative.Dimensions.get('window'),
|
|
34
34
|
SCREEN_WIDTH = _Dimensions$get.width;
|
|
35
35
|
var NUM_COLUMNS = 3;
|
|
36
|
-
var ITEM_MARGIN =
|
|
37
|
-
|
|
36
|
+
var ITEM_MARGIN = 4; // Reduced margin for better fit
|
|
37
|
+
// Calculate item size accounting for:
|
|
38
|
+
// - Container padding (md = 12px on each side = 24px total)
|
|
39
|
+
// - Grid padding (2px on each side = 4px total)
|
|
40
|
+
// - Item margins between items (4px * 2 gaps = 8px total)
|
|
41
|
+
var CONTAINER_PADDING = 24; // paddingHorizontal md (12 * 2)
|
|
42
|
+
var GRID_PADDING = 4; // padding 2 on each side (2 * 2)
|
|
43
|
+
var TOTAL_MARGINS = ITEM_MARGIN * (NUM_COLUMNS - 1) * 2; // margins between items (4px * 2 gaps = 8px)
|
|
44
|
+
var ITEM_SIZE = (SCREEN_WIDTH - CONTAINER_PADDING - GRID_PADDING - TOTAL_MARGINS) / NUM_COLUMNS;
|
|
38
45
|
var VIDEO_MIME_TYPES = ['video/mp4', 'video/quicktime', 'video/x-ms-wmv', 'video/h265', 'video/hevc', 'video/webm'];
|
|
39
46
|
var VideosGallery = function VideosGallery(_ref) {
|
|
40
47
|
var update_data = _ref.update_data,
|
|
@@ -43,6 +50,7 @@ var VideosGallery = function VideosGallery(_ref) {
|
|
|
43
50
|
onError = _ref.onError,
|
|
44
51
|
picker = _ref.picker,
|
|
45
52
|
pickerOptions = _ref.pickerOptions,
|
|
53
|
+
icons = _ref.icons,
|
|
46
54
|
_ref$theme = _ref.theme,
|
|
47
55
|
theme = _ref$theme === void 0 ? _theme.defaultTheme : _ref$theme,
|
|
48
56
|
containerStyle = _ref.containerStyle,
|
|
@@ -144,8 +152,8 @@ var VideosGallery = function VideosGallery(_ref) {
|
|
|
144
152
|
onUploadError: onError,
|
|
145
153
|
picker: picker,
|
|
146
154
|
pickerOptions: pickerOptions,
|
|
147
|
-
|
|
148
|
-
|
|
155
|
+
icons: icons,
|
|
156
|
+
theme: theme
|
|
149
157
|
})
|
|
150
158
|
});
|
|
151
159
|
}
|
|
@@ -209,7 +217,7 @@ var styles = _reactNative.StyleSheet.create({
|
|
|
209
217
|
flex: 1
|
|
210
218
|
},
|
|
211
219
|
grid: {
|
|
212
|
-
padding:
|
|
220
|
+
padding: 2 // Reduced padding for better fit
|
|
213
221
|
},
|
|
214
222
|
uploadContainer: {
|
|
215
223
|
margin: ITEM_MARGIN
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tradly/asset",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.21",
|
|
4
4
|
"description": "A reusable media gallery component for uploading and selecting images, videos, and files with Tradly authentication",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/esm/index.js",
|