@tradly/asset 1.0.12 → 1.0.14
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/README.md +257 -13
- package/dist/components/FileUpload.js +8 -247
- package/dist/components/FileUpload.native.js +13 -0
- package/dist/components/Icons.js +10 -33
- package/dist/components/Icons.native.js +16 -0
- package/dist/components/ImagesSkeleton.js +7 -15
- package/dist/components/ImagesSkeleton.native.js +13 -0
- package/dist/components/MediaGallery.js +8 -148
- package/dist/components/MediaGallery.native.js +13 -0
- package/dist/components/MediaPopup.js +8 -99
- package/dist/components/MediaPopup.native.js +13 -0
- package/dist/components/MediaTab.js +7 -180
- package/dist/components/MediaTab.native.js +13 -0
- package/dist/components/Pagination.js +8 -136
- package/dist/components/Pagination.native.js +13 -0
- package/dist/components/VideosGallery.js +8 -148
- package/dist/components/VideosGallery.native.js +13 -0
- package/dist/core/MediaApiService.js +396 -0
- package/dist/esm/components/FileUpload.js +1 -246
- package/dist/esm/components/FileUpload.native.js +1 -0
- package/dist/esm/components/Icons.js +1 -32
- package/dist/esm/components/Icons.native.js +1 -0
- package/dist/esm/components/ImagesSkeleton.js +1 -14
- package/dist/esm/components/ImagesSkeleton.native.js +1 -0
- package/dist/esm/components/MediaGallery.js +1 -144
- package/dist/esm/components/MediaGallery.native.js +1 -0
- package/dist/esm/components/MediaPopup.js +1 -97
- package/dist/esm/components/MediaPopup.native.js +1 -0
- package/dist/esm/components/MediaTab.js +1 -177
- package/dist/esm/components/MediaTab.native.js +1 -0
- package/dist/esm/components/Pagination.js +1 -134
- package/dist/esm/components/Pagination.native.js +1 -0
- package/dist/esm/components/VideosGallery.js +1 -144
- package/dist/esm/components/VideosGallery.native.js +1 -0
- package/dist/esm/core/MediaApiService.js +390 -0
- package/dist/esm/index.js +1 -1
- package/dist/esm/native/FileUpload.native.js +298 -0
- package/dist/esm/native/Icons.native.js +51 -0
- package/dist/esm/native/ImagesSkeleton.native.js +45 -0
- package/dist/esm/native/MediaGallery.native.js +221 -0
- package/dist/esm/native/MediaPopup.native.js +151 -0
- package/dist/esm/native/MediaTab.native.js +175 -0
- package/dist/esm/native/Pagination.native.js +186 -0
- package/dist/esm/native/VideosGallery.native.js +233 -0
- package/dist/esm/services/apiService.js +1 -372
- package/dist/esm/web/FileUpload.web.js +253 -0
- package/dist/esm/web/Icons.web.js +32 -0
- package/dist/esm/web/ImagesSkeleton.web.js +14 -0
- package/dist/esm/web/MediaGallery.web.js +144 -0
- package/dist/esm/web/MediaPopup.web.js +97 -0
- package/dist/esm/web/MediaTab.web.js +177 -0
- package/dist/esm/web/Pagination.web.js +134 -0
- package/dist/esm/web/VideosGallery.web.js +144 -0
- package/dist/index.js +2 -2
- package/dist/native/FileUpload.native.js +304 -0
- package/dist/native/Icons.native.js +59 -0
- package/dist/native/ImagesSkeleton.native.js +52 -0
- package/dist/native/MediaGallery.native.js +230 -0
- package/dist/native/MediaPopup.native.js +158 -0
- package/dist/native/MediaTab.native.js +184 -0
- package/dist/native/Pagination.native.js +193 -0
- package/dist/native/VideosGallery.native.js +241 -0
- package/dist/services/apiService.js +2 -372
- package/dist/web/FileUpload.web.js +259 -0
- package/dist/web/Icons.web.js +39 -0
- package/dist/web/ImagesSkeleton.web.js +21 -0
- package/dist/web/MediaGallery.web.js +153 -0
- package/dist/web/MediaPopup.web.js +104 -0
- package/dist/web/MediaTab.web.js +186 -0
- package/dist/web/Pagination.web.js +141 -0
- package/dist/web/VideosGallery.web.js +153 -0
- package/package.json +4 -3
|
@@ -0,0 +1,304 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.default = void 0;
|
|
8
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
+
var _reactNative = require("react-native");
|
|
10
|
+
var _Icons = require("./Icons.native");
|
|
11
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
12
|
+
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t3 in e) "default" !== _t3 && {}.hasOwnProperty.call(e, _t3) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t3)) && (i.get || i.set) ? o(f, _t3, i) : f[_t3] = e[_t3]); return f; })(e, t); }
|
|
13
|
+
function _regenerator() { /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */ var e, t, r = "function" == typeof Symbol ? Symbol : {}, n = r.iterator || "@@iterator", o = r.toStringTag || "@@toStringTag"; function i(r, n, o, i) { var c = n && n.prototype instanceof Generator ? n : Generator, u = Object.create(c.prototype); return _regeneratorDefine2(u, "_invoke", function (r, n, o) { var i, c, u, f = 0, p = o || [], y = !1, G = { p: 0, n: 0, v: e, a: d, f: d.bind(e, 4), d: function d(t, r) { return i = t, c = 0, u = e, G.n = r, a; } }; function d(r, n) { for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) { var o, i = p[t], d = G.p, l = i[2]; r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0)); } if (o || r > 1) return a; throw y = !0, n; } return function (o, p, l) { if (f > 1) throw TypeError("Generator is already running"); for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) { i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u); try { if (f = 2, i) { if (c || (o = "next"), t = i[o]) { if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object"); if (!t.done) return t; u = t.value, c < 2 && (c = 0); } else 1 === c && (t = i.return) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1); i = e; } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break; } catch (t) { i = e, c = 1, u = t; } finally { f = 1; } } return { value: t, done: y }; }; }(r, o, i), !0), u; } var a = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} t = Object.getPrototypeOf; var c = [][n] ? t(t([][n]())) : (_regeneratorDefine2(t = {}, n, function () { return this; }), t), u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c); function f(e) { return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine2(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine2(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine2(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine2(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine2(u), _regeneratorDefine2(u, o, "Generator"), _regeneratorDefine2(u, n, function () { return this; }), _regeneratorDefine2(u, "toString", function () { return "[object Generator]"; }), (_regenerator = function _regenerator() { return { w: i, m: f }; })(); }
|
|
14
|
+
function _regeneratorDefine2(e, r, n, t) { var i = Object.defineProperty; try { i({}, "", {}); } catch (e) { i = 0; } _regeneratorDefine2 = function _regeneratorDefine(e, r, n, t) { function o(r, n) { _regeneratorDefine2(e, r, function (e) { return this._invoke(r, n, e); }); } r ? i ? i(e, r, { value: n, enumerable: !t, configurable: !t, writable: !t }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2)); }, _regeneratorDefine2(e, r, n, t); }
|
|
15
|
+
function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
|
|
16
|
+
function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; }
|
|
17
|
+
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
|
|
18
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
19
|
+
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; } }
|
|
20
|
+
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; }
|
|
21
|
+
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; } }
|
|
22
|
+
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; } /**
|
|
23
|
+
* FileUpload component for React Native
|
|
24
|
+
*
|
|
25
|
+
* USAGE EXAMPLES:
|
|
26
|
+
*
|
|
27
|
+
* 1. Using react-native-image-picker:
|
|
28
|
+
* import { launchImageLibrary } from 'react-native-image-picker'
|
|
29
|
+
*
|
|
30
|
+
* <MediaPopup
|
|
31
|
+
* picker={(options) => {
|
|
32
|
+
* return new Promise((resolve) => {
|
|
33
|
+
* launchImageLibrary(options, (response) => {
|
|
34
|
+
* resolve(response.assets || [])
|
|
35
|
+
* })
|
|
36
|
+
* })
|
|
37
|
+
* }}
|
|
38
|
+
* ...
|
|
39
|
+
* />
|
|
40
|
+
*
|
|
41
|
+
* 2. Using expo-image-picker:
|
|
42
|
+
* import * as ImagePicker from 'expo-image-picker'
|
|
43
|
+
*
|
|
44
|
+
* <MediaPopup
|
|
45
|
+
* picker={async (options) => {
|
|
46
|
+
* const result = await ImagePicker.launchImageLibraryAsync({
|
|
47
|
+
* mediaTypes: options.mediaType === 'photo' ? ImagePicker.MediaTypeOptions.Images
|
|
48
|
+
* : options.mediaType === 'video' ? ImagePicker.MediaTypeOptions.Videos
|
|
49
|
+
* : ImagePicker.MediaTypeOptions.All,
|
|
50
|
+
* allowsMultipleSelection: options.allowsMultiple,
|
|
51
|
+
* quality: options.quality,
|
|
52
|
+
* })
|
|
53
|
+
* return result.assets || []
|
|
54
|
+
* }}
|
|
55
|
+
* ...
|
|
56
|
+
* />
|
|
57
|
+
*
|
|
58
|
+
* 3. Custom picker options:
|
|
59
|
+
* <MediaPopup
|
|
60
|
+
* picker={...}
|
|
61
|
+
* pickerOptions={(accept) => ({
|
|
62
|
+
* mediaType: accept?.includes('image') ? 'photo' : 'video',
|
|
63
|
+
* quality: 0.9,
|
|
64
|
+
* allowsMultiple: true,
|
|
65
|
+
* // Add any other options your picker library supports
|
|
66
|
+
* })}
|
|
67
|
+
* ...
|
|
68
|
+
* />
|
|
69
|
+
*
|
|
70
|
+
* @param {Function} picker - REQUIRED: Your file picker function
|
|
71
|
+
* Should accept options and return a promise that resolves with an array of file objects
|
|
72
|
+
* Each file object should have: { uri, type/mimeType, fileName/name }
|
|
73
|
+
*
|
|
74
|
+
* @param {Function} pickerOptions - Optional: Function to generate picker options based on accept type
|
|
75
|
+
* Default: { mediaType: 'photo' | 'video' | 'mixed', quality: 0.8, allowsMultiple: true }
|
|
76
|
+
*/
|
|
77
|
+
var FileUpload = function FileUpload(_ref) {
|
|
78
|
+
var loadMedia = _ref.loadMedia,
|
|
79
|
+
accept = _ref.accept,
|
|
80
|
+
title = _ref.title,
|
|
81
|
+
apiService = _ref.apiService,
|
|
82
|
+
onUploadStart = _ref.onUploadStart,
|
|
83
|
+
onUploadComplete = _ref.onUploadComplete,
|
|
84
|
+
onUploadError = _ref.onUploadError,
|
|
85
|
+
picker = _ref.picker,
|
|
86
|
+
pickerOptions = _ref.pickerOptions,
|
|
87
|
+
containerStyle = _ref.containerStyle,
|
|
88
|
+
buttonStyle = _ref.buttonStyle,
|
|
89
|
+
iconContainerStyle = _ref.iconContainerStyle,
|
|
90
|
+
titleStyle = _ref.titleStyle,
|
|
91
|
+
loadingStyle = _ref.loadingStyle;
|
|
92
|
+
var _useState = (0, _react.useState)(false),
|
|
93
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
94
|
+
isLoading = _useState2[0],
|
|
95
|
+
setISLoading = _useState2[1];
|
|
96
|
+
var _useState3 = (0, _react.useState)(0),
|
|
97
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
98
|
+
uploadProgress = _useState4[0],
|
|
99
|
+
setUploadProgress = _useState4[1];
|
|
100
|
+
|
|
101
|
+
// Convert file picker result to File-like object for apiService
|
|
102
|
+
var convertToFile = function convertToFile(pickerResult) {
|
|
103
|
+
// Picker typically returns: { uri, type, fileName, fileSize, width, height }
|
|
104
|
+
// We need to create a File-like object that apiService.uploadMedia expects
|
|
105
|
+
// For React Native, we'll use the URI directly and let uploadMedia handle it
|
|
106
|
+
|
|
107
|
+
return {
|
|
108
|
+
uri: pickerResult.uri,
|
|
109
|
+
name: pickerResult.fileName || pickerResult.uri.split("/").pop() || "image.jpg",
|
|
110
|
+
type: pickerResult.type || pickerResult.mimeType || "image/jpeg",
|
|
111
|
+
// Keep original picker result for potential use
|
|
112
|
+
_pickerResult: pickerResult
|
|
113
|
+
};
|
|
114
|
+
};
|
|
115
|
+
var uploadFiles = /*#__PURE__*/function () {
|
|
116
|
+
var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(fileList) {
|
|
117
|
+
var filesToUpload, uploadedUrls, _t;
|
|
118
|
+
return _regenerator().w(function (_context) {
|
|
119
|
+
while (1) switch (_context.p = _context.n) {
|
|
120
|
+
case 0:
|
|
121
|
+
if (onUploadStart) {
|
|
122
|
+
onUploadStart(fileList);
|
|
123
|
+
}
|
|
124
|
+
setISLoading(true);
|
|
125
|
+
setUploadProgress(0);
|
|
126
|
+
_context.p = 1;
|
|
127
|
+
// Convert picker results to File-like objects
|
|
128
|
+
filesToUpload = fileList.map(convertToFile); // Use the API service to upload files
|
|
129
|
+
// Note: uploadMedia will need to handle React Native file URIs
|
|
130
|
+
_context.n = 2;
|
|
131
|
+
return apiService.uploadMedia(filesToUpload, apiService.authKey);
|
|
132
|
+
case 2:
|
|
133
|
+
uploadedUrls = _context.v;
|
|
134
|
+
if (onUploadComplete) {
|
|
135
|
+
onUploadComplete(uploadedUrls);
|
|
136
|
+
}
|
|
137
|
+
setUploadProgress(0);
|
|
138
|
+
if (loadMedia) {
|
|
139
|
+
loadMedia();
|
|
140
|
+
}
|
|
141
|
+
_context.n = 4;
|
|
142
|
+
break;
|
|
143
|
+
case 3:
|
|
144
|
+
_context.p = 3;
|
|
145
|
+
_t = _context.v;
|
|
146
|
+
console.error("Upload error:", _t);
|
|
147
|
+
if (onUploadError) {
|
|
148
|
+
onUploadError(_t);
|
|
149
|
+
}
|
|
150
|
+
_reactNative.Alert.alert("Upload Error", _t.message || "Failed to upload file");
|
|
151
|
+
case 4:
|
|
152
|
+
_context.p = 4;
|
|
153
|
+
setISLoading(false);
|
|
154
|
+
return _context.f(4);
|
|
155
|
+
case 5:
|
|
156
|
+
return _context.a(2);
|
|
157
|
+
}
|
|
158
|
+
}, _callee, null, [[1, 3, 4, 5]]);
|
|
159
|
+
}));
|
|
160
|
+
return function uploadFiles(_x) {
|
|
161
|
+
return _ref2.apply(this, arguments);
|
|
162
|
+
};
|
|
163
|
+
}();
|
|
164
|
+
var handlePickFile = /*#__PURE__*/function () {
|
|
165
|
+
var _ref3 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2() {
|
|
166
|
+
var options, isImage, isVideo, result, assets, _error$message, _t2;
|
|
167
|
+
return _regenerator().w(function (_context2) {
|
|
168
|
+
while (1) switch (_context2.p = _context2.n) {
|
|
169
|
+
case 0:
|
|
170
|
+
if (picker) {
|
|
171
|
+
_context2.n = 1;
|
|
172
|
+
break;
|
|
173
|
+
}
|
|
174
|
+
_reactNative.Alert.alert("File Picker Not Configured", "Please provide a picker function prop. See FileUpload.native.jsx documentation for examples.", [{
|
|
175
|
+
text: "OK"
|
|
176
|
+
}]);
|
|
177
|
+
return _context2.a(2);
|
|
178
|
+
case 1:
|
|
179
|
+
_context2.p = 1;
|
|
180
|
+
// Generate picker options based on accept type
|
|
181
|
+
|
|
182
|
+
if (pickerOptions && typeof pickerOptions === "function") {
|
|
183
|
+
options = pickerOptions(accept);
|
|
184
|
+
} else {
|
|
185
|
+
// Default options
|
|
186
|
+
isImage = accept === null || accept === void 0 ? void 0 : accept.includes("image");
|
|
187
|
+
isVideo = accept === null || accept === void 0 ? void 0 : accept.includes("video");
|
|
188
|
+
options = {
|
|
189
|
+
mediaType: isImage ? "photo" : isVideo ? "video" : "mixed",
|
|
190
|
+
quality: 0.8,
|
|
191
|
+
allowsMultiple: true
|
|
192
|
+
};
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
// Call the picker function provided by the app
|
|
196
|
+
_context2.n = 2;
|
|
197
|
+
return picker(options);
|
|
198
|
+
case 2:
|
|
199
|
+
result = _context2.v;
|
|
200
|
+
// Handle different picker response formats
|
|
201
|
+
// react-native-image-picker: { assets: [...] }
|
|
202
|
+
// expo-image-picker: { assets: [...] }
|
|
203
|
+
// Custom: could be array directly or { assets: [...] }
|
|
204
|
+
assets = Array.isArray(result) ? result : (result === null || result === void 0 ? void 0 : result.assets) || result || [];
|
|
205
|
+
if (!(assets && assets.length > 0)) {
|
|
206
|
+
_context2.n = 3;
|
|
207
|
+
break;
|
|
208
|
+
}
|
|
209
|
+
_context2.n = 3;
|
|
210
|
+
return uploadFiles(assets);
|
|
211
|
+
case 3:
|
|
212
|
+
_context2.n = 6;
|
|
213
|
+
break;
|
|
214
|
+
case 4:
|
|
215
|
+
_context2.p = 4;
|
|
216
|
+
_t2 = _context2.v;
|
|
217
|
+
console.error("Error picking file:", _t2);
|
|
218
|
+
if (!(_t2.code === "E_PICKER_CANCELLED" || (_error$message = _t2.message) !== null && _error$message !== void 0 && _error$message.includes("cancel"))) {
|
|
219
|
+
_context2.n = 5;
|
|
220
|
+
break;
|
|
221
|
+
}
|
|
222
|
+
return _context2.a(2);
|
|
223
|
+
case 5:
|
|
224
|
+
_reactNative.Alert.alert("Error", _t2.message || "Failed to pick file");
|
|
225
|
+
case 6:
|
|
226
|
+
return _context2.a(2);
|
|
227
|
+
}
|
|
228
|
+
}, _callee2, null, [[1, 4]]);
|
|
229
|
+
}));
|
|
230
|
+
return function handlePickFile() {
|
|
231
|
+
return _ref3.apply(this, arguments);
|
|
232
|
+
};
|
|
233
|
+
}();
|
|
234
|
+
if (isLoading) {
|
|
235
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
|
|
236
|
+
style: [styles.loadingContainer, loadingStyle],
|
|
237
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
|
|
238
|
+
size: "small",
|
|
239
|
+
color: "#3B3269"
|
|
240
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
|
|
241
|
+
style: styles.loadingText,
|
|
242
|
+
children: "Uploading..."
|
|
243
|
+
})]
|
|
244
|
+
});
|
|
245
|
+
}
|
|
246
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
247
|
+
style: [styles.container, containerStyle],
|
|
248
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
|
|
249
|
+
onPress: handlePickFile,
|
|
250
|
+
style: [styles.button, buttonStyle],
|
|
251
|
+
disabled: isLoading,
|
|
252
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
253
|
+
style: [styles.iconContainer, iconContainerStyle],
|
|
254
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icons.CameraIcon, {})
|
|
255
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
|
|
256
|
+
style: [styles.title, titleStyle],
|
|
257
|
+
children: title
|
|
258
|
+
})]
|
|
259
|
+
})
|
|
260
|
+
});
|
|
261
|
+
};
|
|
262
|
+
var styles = _reactNative.StyleSheet.create({
|
|
263
|
+
container: {
|
|
264
|
+
width: "100%",
|
|
265
|
+
height: 160
|
|
266
|
+
},
|
|
267
|
+
button: {
|
|
268
|
+
width: "100%",
|
|
269
|
+
height: "100%",
|
|
270
|
+
flexDirection: "column",
|
|
271
|
+
justifyContent: "center",
|
|
272
|
+
alignItems: "center",
|
|
273
|
+
borderWidth: 1,
|
|
274
|
+
borderColor: "#3B3269",
|
|
275
|
+
borderStyle: "dashed",
|
|
276
|
+
borderRadius: 8,
|
|
277
|
+
backgroundColor: "#FFFFFF"
|
|
278
|
+
},
|
|
279
|
+
iconContainer: {
|
|
280
|
+
padding: 10,
|
|
281
|
+
backgroundColor: "#3B3269",
|
|
282
|
+
borderRadius: 20,
|
|
283
|
+
marginBottom: 8
|
|
284
|
+
},
|
|
285
|
+
title: {
|
|
286
|
+
fontSize: 14,
|
|
287
|
+
color: "#000000",
|
|
288
|
+
marginTop: 8
|
|
289
|
+
},
|
|
290
|
+
loadingContainer: {
|
|
291
|
+
width: "100%",
|
|
292
|
+
height: 160,
|
|
293
|
+
justifyContent: "center",
|
|
294
|
+
alignItems: "center",
|
|
295
|
+
backgroundColor: "#E5E5E5",
|
|
296
|
+
borderRadius: 8
|
|
297
|
+
},
|
|
298
|
+
loadingText: {
|
|
299
|
+
marginTop: 8,
|
|
300
|
+
fontSize: 14,
|
|
301
|
+
color: "#666666"
|
|
302
|
+
}
|
|
303
|
+
});
|
|
304
|
+
var _default = exports.default = FileUpload;
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.CloseIcon = exports.CameraIcon = void 0;
|
|
7
|
+
var _react = _interopRequireDefault(require("react"));
|
|
8
|
+
var _reactNative = require("react-native");
|
|
9
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
10
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
11
|
+
// Note: For better icons, you can use react-native-svg or react-native-vector-icons
|
|
12
|
+
// This is a simple implementation using Text/View
|
|
13
|
+
|
|
14
|
+
var CloseIcon = exports.CloseIcon = function CloseIcon(_ref) {
|
|
15
|
+
var _ref$size = _ref.size,
|
|
16
|
+
size = _ref$size === void 0 ? 32 : _ref$size,
|
|
17
|
+
_ref$color = _ref.color,
|
|
18
|
+
color = _ref$color === void 0 ? '#000000' : _ref$color;
|
|
19
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
20
|
+
style: [styles.closeIcon, {
|
|
21
|
+
width: size,
|
|
22
|
+
height: size
|
|
23
|
+
}],
|
|
24
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
|
|
25
|
+
style: [styles.closeIconText, {
|
|
26
|
+
color: color,
|
|
27
|
+
fontSize: size * 0.6
|
|
28
|
+
}],
|
|
29
|
+
children: "\u2715"
|
|
30
|
+
})
|
|
31
|
+
});
|
|
32
|
+
};
|
|
33
|
+
var CameraIcon = exports.CameraIcon = function CameraIcon() {
|
|
34
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
35
|
+
style: styles.cameraIcon,
|
|
36
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
|
|
37
|
+
style: styles.cameraIconText,
|
|
38
|
+
children: "\uD83D\uDCF7"
|
|
39
|
+
})
|
|
40
|
+
});
|
|
41
|
+
};
|
|
42
|
+
var styles = _reactNative.StyleSheet.create({
|
|
43
|
+
closeIcon: {
|
|
44
|
+
justifyContent: 'center',
|
|
45
|
+
alignItems: 'center'
|
|
46
|
+
},
|
|
47
|
+
closeIconText: {
|
|
48
|
+
fontWeight: 'bold'
|
|
49
|
+
},
|
|
50
|
+
cameraIcon: {
|
|
51
|
+
width: 22,
|
|
52
|
+
height: 18,
|
|
53
|
+
justifyContent: 'center',
|
|
54
|
+
alignItems: 'center'
|
|
55
|
+
},
|
|
56
|
+
cameraIconText: {
|
|
57
|
+
fontSize: 18
|
|
58
|
+
}
|
|
59
|
+
});
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
var _react = _interopRequireDefault(require("react"));
|
|
8
|
+
var _reactNative = require("react-native");
|
|
9
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
10
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
11
|
+
var _Dimensions$get = _reactNative.Dimensions.get('window'),
|
|
12
|
+
SCREEN_WIDTH = _Dimensions$get.width;
|
|
13
|
+
var NUM_COLUMNS = 3;
|
|
14
|
+
var ITEM_MARGIN = 8;
|
|
15
|
+
var ITEM_SIZE = (SCREEN_WIDTH - 40 - ITEM_MARGIN * (NUM_COLUMNS - 1) * 2) / NUM_COLUMNS;
|
|
16
|
+
var ImagesSkeleton = function ImagesSkeleton(_ref) {
|
|
17
|
+
var _ref$per_page = _ref.per_page,
|
|
18
|
+
per_page = _ref$per_page === void 0 ? 30 : _ref$per_page;
|
|
19
|
+
var skeletonItems = [];
|
|
20
|
+
for (var i = 0; i < per_page; i++) {
|
|
21
|
+
skeletonItems.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
22
|
+
style: [styles.skeletonItem, {
|
|
23
|
+
width: ITEM_SIZE,
|
|
24
|
+
height: ITEM_SIZE,
|
|
25
|
+
margin: ITEM_MARGIN
|
|
26
|
+
}],
|
|
27
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
|
|
28
|
+
size: "small",
|
|
29
|
+
color: "#3B3269"
|
|
30
|
+
})
|
|
31
|
+
}, i));
|
|
32
|
+
}
|
|
33
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
34
|
+
style: styles.container,
|
|
35
|
+
children: skeletonItems
|
|
36
|
+
});
|
|
37
|
+
};
|
|
38
|
+
var styles = _reactNative.StyleSheet.create({
|
|
39
|
+
container: {
|
|
40
|
+
flexDirection: 'row',
|
|
41
|
+
flexWrap: 'wrap',
|
|
42
|
+
padding: 4
|
|
43
|
+
},
|
|
44
|
+
skeletonItem: {
|
|
45
|
+
backgroundColor: '#E5E5E5',
|
|
46
|
+
borderRadius: 8,
|
|
47
|
+
justifyContent: 'center',
|
|
48
|
+
alignItems: 'center',
|
|
49
|
+
opacity: 0.3
|
|
50
|
+
}
|
|
51
|
+
});
|
|
52
|
+
var _default = exports.default = ImagesSkeleton;
|
|
@@ -0,0 +1,230 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.default = void 0;
|
|
8
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
+
var _reactNative = require("react-native");
|
|
10
|
+
var _FileUpload = _interopRequireDefault(require("./FileUpload.native"));
|
|
11
|
+
var _ImagesSkeleton = _interopRequireDefault(require("./ImagesSkeleton.native"));
|
|
12
|
+
var _Pagination = _interopRequireDefault(require("./Pagination.native"));
|
|
13
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
14
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
15
|
+
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
|
|
16
|
+
function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
|
|
17
|
+
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
18
|
+
function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
|
|
19
|
+
function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
|
|
20
|
+
function _regenerator() { /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */ var e, t, r = "function" == typeof Symbol ? Symbol : {}, n = r.iterator || "@@iterator", o = r.toStringTag || "@@toStringTag"; function i(r, n, o, i) { var c = n && n.prototype instanceof Generator ? n : Generator, u = Object.create(c.prototype); return _regeneratorDefine2(u, "_invoke", function (r, n, o) { var i, c, u, f = 0, p = o || [], y = !1, G = { p: 0, n: 0, v: e, a: d, f: d.bind(e, 4), d: function d(t, r) { return i = t, c = 0, u = e, G.n = r, a; } }; function d(r, n) { for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) { var o, i = p[t], d = G.p, l = i[2]; r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0)); } if (o || r > 1) return a; throw y = !0, n; } return function (o, p, l) { if (f > 1) throw TypeError("Generator is already running"); for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) { i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u); try { if (f = 2, i) { if (c || (o = "next"), t = i[o]) { if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object"); if (!t.done) return t; u = t.value, c < 2 && (c = 0); } else 1 === c && (t = i.return) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1); i = e; } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break; } catch (t) { i = e, c = 1, u = t; } finally { f = 1; } } return { value: t, done: y }; }; }(r, o, i), !0), u; } var a = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} t = Object.getPrototypeOf; var c = [][n] ? t(t([][n]())) : (_regeneratorDefine2(t = {}, n, function () { return this; }), t), u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c); function f(e) { return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine2(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine2(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine2(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine2(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine2(u), _regeneratorDefine2(u, o, "Generator"), _regeneratorDefine2(u, n, function () { return this; }), _regeneratorDefine2(u, "toString", function () { return "[object Generator]"; }), (_regenerator = function _regenerator() { return { w: i, m: f }; })(); }
|
|
21
|
+
function _regeneratorDefine2(e, r, n, t) { var i = Object.defineProperty; try { i({}, "", {}); } catch (e) { i = 0; } _regeneratorDefine2 = function _regeneratorDefine(e, r, n, t) { function o(r, n) { _regeneratorDefine2(e, r, function (e) { return this._invoke(r, n, e); }); } r ? i ? i(e, r, { value: n, enumerable: !t, configurable: !t, writable: !t }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2)); }, _regeneratorDefine2(e, r, n, t); }
|
|
22
|
+
function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
|
|
23
|
+
function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; }
|
|
24
|
+
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
|
|
25
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
26
|
+
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; } }
|
|
27
|
+
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; }
|
|
28
|
+
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; } }
|
|
29
|
+
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
|
|
30
|
+
var _Dimensions$get = _reactNative.Dimensions.get('window'),
|
|
31
|
+
SCREEN_WIDTH = _Dimensions$get.width;
|
|
32
|
+
var NUM_COLUMNS = 3;
|
|
33
|
+
var ITEM_MARGIN = 8;
|
|
34
|
+
var ITEM_SIZE = (SCREEN_WIDTH - 40 - ITEM_MARGIN * (NUM_COLUMNS - 1) * 2) / NUM_COLUMNS; // 40 = padding, adjust for margins
|
|
35
|
+
|
|
36
|
+
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'];
|
|
37
|
+
var ImagesGallery = function ImagesGallery(_ref) {
|
|
38
|
+
var update_data = _ref.update_data,
|
|
39
|
+
closePopup = _ref.closePopup,
|
|
40
|
+
apiService = _ref.apiService,
|
|
41
|
+
onError = _ref.onError,
|
|
42
|
+
picker = _ref.picker,
|
|
43
|
+
pickerOptions = _ref.pickerOptions,
|
|
44
|
+
containerStyle = _ref.containerStyle,
|
|
45
|
+
gridStyle = _ref.gridStyle,
|
|
46
|
+
imageItemStyle = _ref.imageItemStyle,
|
|
47
|
+
paginationContainerStyle = _ref.paginationContainerStyle;
|
|
48
|
+
var _useState = (0, _react.useState)([]),
|
|
49
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
50
|
+
images = _useState2[0],
|
|
51
|
+
setImages = _useState2[1];
|
|
52
|
+
var _useState3 = (0, _react.useState)(0),
|
|
53
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
54
|
+
total_count = _useState4[0],
|
|
55
|
+
setTotalCount = _useState4[1];
|
|
56
|
+
var _useState5 = (0, _react.useState)(1),
|
|
57
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
58
|
+
currentPage = _useState6[0],
|
|
59
|
+
setCurrentPage = _useState6[1];
|
|
60
|
+
var _useState7 = (0, _react.useState)(false),
|
|
61
|
+
_useState8 = _slicedToArray(_useState7, 2),
|
|
62
|
+
isLoading = _useState8[0],
|
|
63
|
+
setISLoading = _useState8[1];
|
|
64
|
+
|
|
65
|
+
// Fetch images
|
|
66
|
+
(0, _react.useEffect)(function () {
|
|
67
|
+
loadMedia();
|
|
68
|
+
}, []);
|
|
69
|
+
var loadMedia = /*#__PURE__*/function () {
|
|
70
|
+
var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
|
|
71
|
+
var page_number,
|
|
72
|
+
_response$data,
|
|
73
|
+
_response$data2,
|
|
74
|
+
response,
|
|
75
|
+
mediaData,
|
|
76
|
+
count,
|
|
77
|
+
_args = arguments,
|
|
78
|
+
_t;
|
|
79
|
+
return _regenerator().w(function (_context) {
|
|
80
|
+
while (1) switch (_context.p = _context.n) {
|
|
81
|
+
case 0:
|
|
82
|
+
page_number = _args.length > 0 && _args[0] !== undefined ? _args[0] : 1;
|
|
83
|
+
_context.p = 1;
|
|
84
|
+
_context.n = 2;
|
|
85
|
+
return apiService.fetchMedia({
|
|
86
|
+
mimeTypes: IMAGE_MIME_TYPES,
|
|
87
|
+
page: page_number,
|
|
88
|
+
setISLoading: setISLoading,
|
|
89
|
+
isLoading: isLoading
|
|
90
|
+
});
|
|
91
|
+
case 2:
|
|
92
|
+
response = _context.v;
|
|
93
|
+
// Handle different response formats
|
|
94
|
+
mediaData = (response === null || response === void 0 ? void 0 : response.media) || (response === null || response === void 0 || (_response$data = response.data) === null || _response$data === void 0 ? void 0 : _response$data.media) || (response === null || response === void 0 ? void 0 : response.data) || response || [];
|
|
95
|
+
count = (response === null || response === void 0 ? void 0 : response.count) || (response === null || response === void 0 || (_response$data2 = response.data) === null || _response$data2 === void 0 ? void 0 : _response$data2.count) || (response === null || response === void 0 ? void 0 : response.total) || 0;
|
|
96
|
+
setImages(Array.isArray(mediaData) ? mediaData : []);
|
|
97
|
+
setTotalCount(count);
|
|
98
|
+
setCurrentPage(page_number);
|
|
99
|
+
_context.n = 4;
|
|
100
|
+
break;
|
|
101
|
+
case 3:
|
|
102
|
+
_context.p = 3;
|
|
103
|
+
_t = _context.v;
|
|
104
|
+
console.error('Error loading media:', _t);
|
|
105
|
+
if (onError) {
|
|
106
|
+
onError(_t);
|
|
107
|
+
}
|
|
108
|
+
case 4:
|
|
109
|
+
return _context.a(2);
|
|
110
|
+
}
|
|
111
|
+
}, _callee, null, [[1, 3]]);
|
|
112
|
+
}));
|
|
113
|
+
return function loadMedia() {
|
|
114
|
+
return _ref2.apply(this, arguments);
|
|
115
|
+
};
|
|
116
|
+
}();
|
|
117
|
+
var handleImageClick = function handleImageClick(image) {
|
|
118
|
+
if (update_data) {
|
|
119
|
+
update_data(image.url || image);
|
|
120
|
+
}
|
|
121
|
+
if (closePopup) {
|
|
122
|
+
closePopup();
|
|
123
|
+
}
|
|
124
|
+
};
|
|
125
|
+
var renderItem = function renderItem(_ref3) {
|
|
126
|
+
var item = _ref3.item,
|
|
127
|
+
index = _ref3.index;
|
|
128
|
+
// First item is the upload button
|
|
129
|
+
if (index === 0) {
|
|
130
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
131
|
+
style: [styles.uploadContainer, {
|
|
132
|
+
width: ITEM_SIZE,
|
|
133
|
+
height: ITEM_SIZE
|
|
134
|
+
}],
|
|
135
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FileUpload.default, {
|
|
136
|
+
loadMedia: loadMedia,
|
|
137
|
+
accept: "image/*",
|
|
138
|
+
title: "Add Image",
|
|
139
|
+
apiService: apiService,
|
|
140
|
+
onUploadError: onError,
|
|
141
|
+
picker: picker,
|
|
142
|
+
pickerOptions: pickerOptions
|
|
143
|
+
})
|
|
144
|
+
});
|
|
145
|
+
}
|
|
146
|
+
var image = images[index - 1];
|
|
147
|
+
var imageUrl = typeof image === 'string' ? image : image.url;
|
|
148
|
+
var imageKey = image.id || image.url || index;
|
|
149
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
|
|
150
|
+
onPress: function onPress() {
|
|
151
|
+
return handleImageClick(image);
|
|
152
|
+
},
|
|
153
|
+
style: [styles.imageItem, {
|
|
154
|
+
width: ITEM_SIZE,
|
|
155
|
+
height: ITEM_SIZE
|
|
156
|
+
}, imageItemStyle],
|
|
157
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
|
|
158
|
+
source: {
|
|
159
|
+
uri: imageUrl
|
|
160
|
+
},
|
|
161
|
+
style: styles.image,
|
|
162
|
+
resizeMode: "cover"
|
|
163
|
+
})
|
|
164
|
+
});
|
|
165
|
+
};
|
|
166
|
+
var data = isLoading ? [] : [{
|
|
167
|
+
type: 'upload'
|
|
168
|
+
}].concat(_toConsumableArray(images));
|
|
169
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
170
|
+
style: [styles.container, containerStyle],
|
|
171
|
+
children: isLoading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImagesSkeleton.default, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.FlatList, {
|
|
172
|
+
data: data,
|
|
173
|
+
renderItem: renderItem,
|
|
174
|
+
keyExtractor: function keyExtractor(item, index) {
|
|
175
|
+
if (index === 0) return 'upload';
|
|
176
|
+
var image = images[index - 1];
|
|
177
|
+
return image.id || image.url || "image-".concat(index);
|
|
178
|
+
},
|
|
179
|
+
numColumns: NUM_COLUMNS,
|
|
180
|
+
contentContainerStyle: [styles.grid, gridStyle],
|
|
181
|
+
showsVerticalScrollIndicator: false,
|
|
182
|
+
ListFooterComponent: total_count > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
183
|
+
style: [styles.paginationContainer, paginationContainerStyle],
|
|
184
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pagination.default, {
|
|
185
|
+
nextPage: function nextPage(value) {
|
|
186
|
+
return loadMedia(value);
|
|
187
|
+
},
|
|
188
|
+
pageCount: Math.ceil(total_count / 30),
|
|
189
|
+
current_page: currentPage
|
|
190
|
+
})
|
|
191
|
+
}) : null
|
|
192
|
+
})
|
|
193
|
+
});
|
|
194
|
+
};
|
|
195
|
+
var styles = _reactNative.StyleSheet.create({
|
|
196
|
+
container: {
|
|
197
|
+
flex: 1
|
|
198
|
+
},
|
|
199
|
+
grid: {
|
|
200
|
+
padding: 4
|
|
201
|
+
},
|
|
202
|
+
uploadContainer: {
|
|
203
|
+
margin: ITEM_MARGIN
|
|
204
|
+
},
|
|
205
|
+
imageItem: {
|
|
206
|
+
margin: ITEM_MARGIN,
|
|
207
|
+
borderRadius: 8,
|
|
208
|
+
overflow: 'hidden',
|
|
209
|
+
backgroundColor: '#FFFFFF',
|
|
210
|
+
shadowColor: '#000',
|
|
211
|
+
shadowOffset: {
|
|
212
|
+
width: 0,
|
|
213
|
+
height: 2
|
|
214
|
+
},
|
|
215
|
+
shadowOpacity: 0.1,
|
|
216
|
+
shadowRadius: 3.84,
|
|
217
|
+
elevation: 5
|
|
218
|
+
},
|
|
219
|
+
image: {
|
|
220
|
+
width: '100%',
|
|
221
|
+
height: '100%'
|
|
222
|
+
},
|
|
223
|
+
paginationContainer: {
|
|
224
|
+
paddingVertical: 16,
|
|
225
|
+
paddingHorizontal: 8,
|
|
226
|
+
backgroundColor: '#F5F5F5',
|
|
227
|
+
marginTop: 8
|
|
228
|
+
}
|
|
229
|
+
});
|
|
230
|
+
var _default = exports.default = ImagesGallery;
|