@bigbinary/neeto-image-uploader-frontend 1.5.4 → 1.5.6

package/dist/index.cjs.js

@@ -2187,7 +2187,7 @@ var ImageWithFallback = function ImageWithFallback(_ref) {
   return isLoaded ? /*#__PURE__*/React__default["default"].createElement("img", _extends$1({}, _objectSpread$2({
     src: src
   }, props), {
-    className: "h-full w-auto"
+    className: "h-full w-auto object-contain"
   })) : /*#__PURE__*/React__default["default"].createElement(Fallback, _objectSpread$2({
     className: className
   }, props));
@@ -2197,6 +2197,7 @@ var IS_DEVELOPMENT_OR_HEROKU_ENV = process.env.RAILS_ENV === "development" || pr
 
 var UNSPLASH_DEFAULT_NAME = "Unsplash-asset";
 var UNSPLASH_URL = "https://unsplash.com/";
+var IMAGES_PER_PAGE = 30;
 var UNSPLASH_DEFAULT_REQUEST_CONFIG = {
   headers: {
     "Access-Control-Allow-Origin": "*",
@@ -3384,8 +3385,8 @@ var useImageUploader = function useImageUploader(_ref) {
         onUploadComplete(ramda.mergeRight(neetoCist.keysToCamelCase(blob), {
           url: blob.blob_url
         }));
+        setIsUploading(false);
       });
-      setIsUploading(false);
     } catch (error) {
       neetoui.Toastr.error(error);
     }
@@ -3415,21 +3416,18 @@ var useImageUploader = function useImageUploader(_ref) {
           case 5:
             result = _context.sent;
             onUploadComplete(result);
-            _context.next = 12;
+            setIsUploading(false);
+            _context.next = 13;
             break;
-          case 9:
-            _context.prev = 9;
+          case 10:
+            _context.prev = 10;
             _context.t0 = _context["catch"](0);
             neetoui.Toastr.error(_context.t0);
-          case 12:
-            _context.prev = 12;
-            setIsUploading(false);
-            return _context.finish(12);
-          case 15:
+          case 13:
           case "end":
             return _context.stop();
         }
-      }, _callee, null, [[0, 9, 12, 15]]);
+      }, _callee, null, [[0, 10]]);
     }));
     return function productionUpload(_x, _x2) {
       return _ref2.apply(this, arguments);
@@ -3453,18 +3451,16 @@ var useImageUploader = function useImageUploader(_ref) {
               handleUploadProgress(e, fileSize, setUploadProgress);
             });
             if (!IS_DEVELOPMENT_OR_HEROKU_ENV) {
-              _context2.next = 10;
+              _context2.next = 9;
               break;
             }
-            _context2.next = 8;
-            return developmentUpload(file, setUploadProgress);
-          case 8:
-            _context2.next = 12;
+            developmentUpload(file, setUploadProgress);
+            _context2.next = 11;
             break;
-          case 10:
-            _context2.next = 12;
+          case 9:
+            _context2.next = 11;
             return productionUpload(file, XHRProgress);
-          case 12:
+          case 11:
           case "end":
             return _context2.stop();
         }
@@ -3840,11 +3836,15 @@ var ImageEditor = function ImageEditor(_ref) {
 };
 
 var fetch = function fetch(_ref) {
-  var search = _ref.search,
-    url = _ref.url;
+  var searchTerm = _ref.searchTerm,
+    url = _ref.url,
+    page = _ref.page,
+    per = _ref.per;
   return axios__default["default"].get(url, {
     params: {
-      search: search
+      searchTerm: searchTerm,
+      page: page,
+      per: per
     }
   });
 };
@@ -3853,13 +3853,17 @@ var imagesApi = {
 };
 
 var useFetchAssets = function useFetchAssets(_ref) {
-  var search = _ref.search,
-    url = _ref.url;
+  var searchTerm = _ref.searchTerm,
+    url = _ref.url,
+    page = _ref.page,
+    per = _ref.per;
   var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  return reactQuery.useQuery([QUERY_KEYS.ASSETS_LIST, search], function () {
+  return reactQuery.useQuery([QUERY_KEYS.ASSETS_LIST], function () {
     return imagesApi.fetch({
-      search: search,
-      url: url
+      searchTerm: searchTerm,
+      url: url,
+      page: page,
+      per: per
     });
   }, ramda.mergeRight({
     staleTime: ASSETS_STALE_TIME
@@ -4686,31 +4690,75 @@ var InfiniteScroller = function InfiniteScroller(_ref) {
 };
 
 var Images = function Images(_ref) {
-  var setSelectedImage = _ref.setSelectedImage,
-    debouncedQuery = _ref.debouncedQuery;
+  var query = _ref.query,
+    debouncedQuery = _ref.debouncedQuery,
+    setSelectedImage = _ref.setSelectedImage;
+  var _useState = React.useState(true),
+    _useState2 = _slicedToArray$2(_useState, 2),
+    hasMore = _useState2[0],
+    setHasMore = _useState2[1];
+  var _useState3 = React.useState([]),
+    _useState4 = _slicedToArray$2(_useState3, 2),
+    images = _useState4[0],
+    setImages = _useState4[1];
+  var _useState5 = React.useState(1),
+    _useState6 = _slicedToArray$2(_useState5, 2),
+    pageNo = _useState6[0],
+    setPageNo = _useState6[1];
+  var _useState7 = React.useState(false),
+    _useState8 = _slicedToArray$2(_useState7, 2),
+    error = _useState8[0],
+    setError = _useState8[1];
+  var onSuccess = function onSuccess() {
+    var results = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+    ramda.equals(pageNo, 1) ? setImages(results) : setImages(ramda.concat(ramda.__, results));
+    setPageNo(ramda.inc);
+    setHasMore(results.length === IMAGES_PER_PAGE);
+  };
+  var onError = function onError() {
+    return setError(true);
+  };
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
   var _useFetchAssets = useFetchAssets({
-      search: debouncedQuery,
+      searchTerm: debouncedQuery,
+      page: pageNo,
+      per: IMAGES_PER_PAGE,
       url: ASSETS_FETCH_URL
+    }, {
+      onSuccess: onSuccess,
+      onError: onError
     }),
-    _useFetchAssets$data = _useFetchAssets.data,
-    images = _useFetchAssets$data === void 0 ? [] : _useFetchAssets$data,
+    refetch = _useFetchAssets.refetch,
     isFetching = _useFetchAssets.isFetching;
-  if (isFetching) {
-    return /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "flex items-center justify-center"
-    }, /*#__PURE__*/React__default["default"].createElement(neetoui.Spinner, null));
+  var loadMore = reactUtils.useFuncDebounce(function () {
+    if (isFetching) return;
+    if (!hasMore) return;
+    if (pageNo > 1) {
+      setError(false);
+      refetch();
+    }
+  }, 500);
+  React.useEffect(function () {
+    setPageNo(1);
+  }, [query]);
+  React.useEffect(function () {
+    setImages([]);
+    refetch();
+  }, [debouncedQuery]);
+  if (error) {
+    return /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+      className: "mt-9 flex justify-center",
+      style: "body2"
+    }, t("neetoImageUploader.unsplash.errorMessage"));
   }
-  return neetoCist.isNotEmpty(images) ? /*#__PURE__*/React__default["default"].createElement(InfiniteScroller, {
+  return /*#__PURE__*/React__default["default"].createElement(InfiniteScroller, {
+    hasMore: hasMore,
     images: images,
+    loadMore: loadMore,
     setSelectedImage: setSelectedImage,
     tab: TABS[0].key
-  }) : /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "flex items-center justify-center"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-    style: "h3"
-  }, t("neetoImageUploader.common.noImages")));
+  });
 };
 
 var newAxiosInstance = axios__default["default"].create();
@@ -4792,7 +4840,8 @@ var uploadWithImageKit = function uploadWithImageKit(file) {
 };
 
 var UnsplashLibrary = function UnsplashLibrary(_ref) {
-  var debouncedQuery = _ref.debouncedQuery,
+  var query = _ref.query,
+    debouncedQuery = _ref.debouncedQuery,
     setSelectedImage = _ref.setSelectedImage,
     setIsUploading = _ref.setIsUploading,
     setActiveTab = _ref.setActiveTab;
@@ -4895,6 +4944,9 @@ var UnsplashLibrary = function UnsplashLibrary(_ref) {
       refetch();
     }
   }, 500);
+  React.useEffect(function () {
+    setPageNo(1);
+  }, [query]);
   React.useEffect(function () {
     setPageNo(1);
     setImages([]);
@@ -4946,9 +4998,11 @@ var ImageLibrary = function ImageLibrary(_ref) {
     }
   }), tab === TABS[0].key ? /*#__PURE__*/React__default["default"].createElement(Images, {
     debouncedQuery: debouncedQuery,
+    query: query,
     setSelectedImage: setSelectedImage
   }) : /*#__PURE__*/React__default["default"].createElement(UnsplashLibrary, {
     debouncedQuery: debouncedQuery,
+    query: query,
     setActiveTab: setActiveTab,
     setIsUploading: setIsUploading,
     setSelectedImage: setSelectedImage