@bigbinary/neeto-image-uploader-frontend 2.3.0 → 2.3.2

package/app/javascript/src/translations/en.json

@@ -44,8 +44,8 @@
       "images": "Images",
       "imageLibrary": "Image library",
       "remove": "Remove",
-      "dragAndDropOrBrowseFile": "Drag and drop or <span>Browse</span> a file.",
-      "selectImagefromImageLibrary": "Select from <span>Image Library</span>.",
+      "dragAndDropOrBrowseFile": "Drag & drop or <span>upload</span>.",
+      "selectImagefromImageLibrary": "Select from <span>image library</span>.",
       "edit": "Edit",
       "genericError": "Something went wrong!.",
       "fileSizeError": "File size is too large",

package/dist/AssetLibrary.js

@@ -1,7 +1,8 @@
-import { O as OPTIONS, i as isNilOrEmpty, D as DEFAULT_CROP_CONFIG, a as isItemsCenter, o as onImageLoaded, g as getCroppedImageURL, b as getCropValues, I as IMAGES_PER_PAGE, c as INFINITE_SCROLLER_SIZES, d as INFINITE_SCROLLER_STYLE, T as TABS, A as ASSETS_DESTROY_URL, e as ASSETS_FETCH_URL, U as UNSPLASH_DEFAULT_NAME, f as UNSPLASH_DEFAULT_REQUEST_CONFIG, h as DEFAULT_UPLOAD_CONFIG, u as useUploadDropzone, _ as _objectWithoutProperties$2, j as UNSPLASH_URL } from './utils-96eacd77.js';
-import { _ as _defineProperty$1, a as _slicedToArray$1, I as IS_DEVELOPMENT_OR_HEROKU_ENV, b as ImageKit } from './index-b9963255.js';
+import { O as OPTIONS, i as isNilOrEmpty, D as DEFAULT_CROP_CONFIG, a as isItemsCenter, o as onImageLoaded, g as getCroppedImageURL, b as getCropValues, I as IMAGES_PER_PAGE, c as INFINITE_SCROLLER_SIZES, d as INFINITE_SCROLLER_STYLE, T as TABS, A as ASSETS_DESTROY_URL, e as ASSETS_FETCH_URL, U as UNSPLASH_DEFAULT_NAME, f as UNSPLASH_DEFAULT_REQUEST_CONFIG, h as DEFAULT_UPLOAD_CONFIG, u as useUploadDropzone, _ as _objectWithoutProperties$2, j as UNSPLASH_URL } from './utils-46caa3d3.js';
+import { _ as _defineProperty$1, a as _slicedToArray$1, I as IS_DEVELOPMENT_OR_HEROKU_ENV, C as CLOUD_FLARE, b as ImageKit } from './index-c128d963.js';
 import require$$0, { useState, useEffect, useRef, createElement, useMemo, memo, Fragment as Fragment$1, useCallback } from 'react';
 import { findBy, isPresent, noop, nullSafe, removeBy, isNotEmpty, findById, toLabelAndValue, keysToSnakeCase, filterBy, slugify, _findBy, replaceById, notEquals, keysToCamelCase } from '@bigbinary/neeto-cist';
+import { taxonomies, globalProps } from '@bigbinary/neeto-commons-frontend/initializers';
 import NeetoUIModal from '@bigbinary/neetoui/Modal';
 import Button from '@bigbinary/neetoui/Button';
 import Tab from '@bigbinary/neetoui/Tab';
@@ -10,18 +11,18 @@ import Toastr from '@bigbinary/neetoui/Toastr';
 import Typography from '@bigbinary/neetoui/Typography';
 import { mergeLeft, mergeRight, identity, clamp, curry, prop, pluck, filter, includes, append, isEmpty, identical, isNil, assoc, equals, groupBy, isNotNil, keys, pick, map, not, move, head, reverse, is, modify, __, trim, toLower, concat } from 'ramda';
 import { useTranslation, Trans } from 'react-i18next';
-import { c as commonjsGlobal$1, g as getDefaultExportFromCjs$1, Q as QUERY_KEYS$1, A as ASSETS_STALE_TIME, a as getAugmentedNamespace, U as UNSPLASH_STALE_TIME, d as directUploadsApi, _ as _asyncToGenerator, b as _regeneratorRuntime, u as useCreateBlob, e as useImageUploader } from './useImageUploader-36a03350.js';
+import { c as commonjsGlobal$1, g as getDefaultExportFromCjs$1, a as getAugmentedNamespace, d as directUploadsApi, _ as _asyncToGenerator, b as _regeneratorRuntime, u as useCreateBlob, e as useImageUploader, f as generateASCIIFileName } from './useImageUploader-b93adc31.js';
 import classnames from 'classnames';
 import LeftArrow from '@bigbinary/neeto-icons/LeftArrow';
 import { useMutation, useInfiniteQuery, useQueryClient, QueryClient, QueryCache, useQuery, QueryClientProvider, keepPreviousData } from '@tanstack/react-query';
 import axios from 'axios';
 import { useDebounce, withT, withTitle, useMutationWithInvalidation, useQueryParams, useBreakpoints, useFuncDebounce } from '@bigbinary/neeto-commons-frontend/react-utils';
-import { withEventTargetValue, getQueryParams, buildUrl, showThumbsUpToastr, hyphenize, currencyFormat } from '@bigbinary/neeto-commons-frontend/utils';
+import { withEventTargetValue, getQueryParams, buildUrl, showThumbsUpToastr, hyphenize, currencyFormat, hasPermission } from '@bigbinary/neeto-commons-frontend/utils';
 import Input from '@bigbinary/neetoui/Input';
 import Switch from '@bigbinary/neetoui/Switch';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { Q as QUERY_KEYS$1, A as ASSETS_STALE_TIME, U as UNSPLASH_STALE_TIME } from './query-dcc7b81b.js';
 import MenuHorizontal from '@bigbinary/neeto-icons/MenuHorizontal';
-import { taxonomies, globalProps } from '@bigbinary/neeto-commons-frontend/initializers';
 import Container from '@bigbinary/neeto-molecules/Container';
 import NeetoHeader from '@bigbinary/neeto-molecules/Header';
 import i18next, { t as t$2 } from 'i18next';
@@ -569,21 +570,6 @@ function _typeof$1(o) {
     return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
   }, _typeof$1(o);
 }
-
-var hasPermission = function hasPermission() {
-  var _globalProps$permissi;
-  var permissions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "";
-  var type = _typeof$1(permissions);
-  var userPermissions = (_globalProps$permissi = globalProps.permissions) !== null && _globalProps$permissi !== void 0 ? _globalProps$permissi : [];
-  if (Object.is(type, "string")) {
-    return userPermissions.includes(permissions);
-  } else if (Array.isArray(permissions)) {
-    return permissions.some(function (permission) {
-      return userPermissions.includes(permission);
-    });
-  }
-  return false;
-};
 var isOverflown = function isOverflown(_ref) {
   var clientWidth = _ref.clientWidth,
     clientHeight = _ref.clientHeight,
@@ -9671,7 +9657,9 @@ var InfiniteScroller = function InfiniteScroller(_ref) {
     _ref$setSelectedImage = _ref.setSelectedImage,
     setSelectedImage = _ref$setSelectedImage === void 0 ? noop : _ref$setSelectedImage,
     _ref$handleUnsplashIm = _ref.handleUnsplashImageSelect,
-    handleUnsplashImageSelect = _ref$handleUnsplashIm === void 0 ? noop : _ref$handleUnsplashIm;
+    handleUnsplashImageSelect = _ref$handleUnsplashIm === void 0 ? noop : _ref$handleUnsplashIm,
+    _ref$handleSubmit = _ref.handleSubmit,
+    handleSubmit = _ref$handleSubmit === void 0 ? noop : _ref$handleSubmit;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var _useState = useState({
@@ -9684,7 +9672,7 @@ var InfiniteScroller = function InfiniteScroller(_ref) {
   var _useBulkDestroyAssets = useBulkDestroyAssets(ASSETS_DESTROY_URL),
     isPending = _useBulkDestroyAssets.isPending,
     bulkDelete = _useBulkDestroyAssets.mutate;
-  var hasPermissioToDeleteImage = hasPermission(VIEW_ROLES_PERMISSION);
+  var isMenuButtonEnabled = globalProps.assetsUploaderService !== CLOUD_FLARE;
   var handleDelete = useCallback(function () {
     bulkDelete(deleteConfirmation.imageIds, {
       onSuccess: function onSuccess() {
@@ -9722,6 +9710,7 @@ var InfiniteScroller = function InfiniteScroller(_ref) {
             },
             children: /*#__PURE__*/jsxs("div", {
               className: "neeto-ui-rounded-sm neeto-ui-bg-gray-100 group absolute h-full w-full",
+              "data-cy": "library-image-card",
               id: "unsplashImage".concat(image.id),
               children: [tab === TABS[1].key && /*#__PURE__*/jsxs(Fragment, {
                 children: [/*#__PURE__*/jsx("img", {
@@ -9738,7 +9727,7 @@ var InfiniteScroller = function InfiniteScroller(_ref) {
                   children: [image === null || image === void 0 || (_image$user2 = image.user) === null || _image$user2 === void 0 ? void 0 : _image$user2.name, " | ", " ", t("neetoImageUploader.labels.unsplash")]
                 })]
               }), tab === TABS[0].key && /*#__PURE__*/jsxs(Fragment, {
-                children: [hasPermissioToDeleteImage && /*#__PURE__*/jsx(Dropdown, {
+                children: [hasPermission(VIEW_ROLES_PERMISSION) && isMenuButtonEnabled && /*#__PURE__*/jsx(Dropdown, {
                   buttonSize: "small",
                   buttonStyle: "tertiary",
                   "data-cy": "image-library-image-options-".concat(index),
@@ -9764,7 +9753,8 @@ var InfiniteScroller = function InfiniteScroller(_ref) {
                   "data-cy": "niu-library-image-".concat(index),
                   src: image === null || image === void 0 ? void 0 : image.url,
                   onClick: function onClick() {
-                    return setSelectedImage(image);
+                    setSelectedImage(image);
+                    handleSubmit(image);
                   }
                 })]
               })]
@@ -9791,7 +9781,8 @@ var InfiniteScroller = function InfiniteScroller(_ref) {
 
 var Images = function Images(_ref) {
   var debouncedQuery = _ref.debouncedQuery,
-    setSelectedImage = _ref.setSelectedImage;
+    setSelectedImage = _ref.setSelectedImage,
+    handleSubmit = _ref.handleSubmit;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var _useFetchAssets = useFetchAssets({
@@ -9821,6 +9812,7 @@ var Images = function Images(_ref) {
     });
   }
   return /*#__PURE__*/createElement(InfiniteScroller, {
+    handleSubmit: handleSubmit,
     setSelectedImage: setSelectedImage,
     hasMore: hasNextPage,
     images: results,
@@ -10026,7 +10018,9 @@ var ImageLibrary = function ImageLibrary(_ref) {
   var setSelectedImage = _ref.setSelectedImage,
     tab = _ref.tab,
     setIsUploading = _ref.setIsUploading,
-    setActiveTab = _ref.setActiveTab;
+    setActiveTab = _ref.setActiveTab,
+    _ref$handleSubmit = _ref.handleSubmit,
+    handleSubmit = _ref$handleSubmit === void 0 ? noop : _ref$handleSubmit;
   var _useState = useState(""),
     _useState2 = _slicedToArray$1(_useState, 2),
     query = _useState2[0],
@@ -10053,6 +10047,7 @@ var ImageLibrary = function ImageLibrary(_ref) {
       }
     }), tab === TABS[0].key ? /*#__PURE__*/jsx(Images, {
       debouncedQuery: debouncedQuery,
+      handleSubmit: handleSubmit,
       query: query,
       setSelectedImage: setSelectedImage
     }) : /*#__PURE__*/jsx(UnsplashLibrary, {
@@ -10095,6 +10090,8 @@ var Modal = function Modal(_ref) {
   var _useCreateBlob = useCreateBlob(),
     createBlob = _useCreateBlob.mutate;
   var uploadConfigWithDefaults = mergeRight(DEFAULT_UPLOAD_CONFIG, uploadConfig);
+  var isImageCropEnabled = globalProps.assetsUploaderService !== CLOUD_FLARE;
+  var isCloudFlareImageUploader = globalProps.assetsUploaderService === CLOUD_FLARE;
   var handleCloseModal = function handleCloseModal() {
     onClose();
     setSelectedImage({});
@@ -10107,7 +10104,7 @@ var Modal = function Modal(_ref) {
       });
     } else {
       var payload = {
-        filename: editedImage.name,
+        filename: generateASCIIFileName(editedImage.name),
         byte_size: editedImage.size,
         content_type: editedImage.fileType,
         checksum: editedImage.fileId,
@@ -10126,8 +10123,29 @@ var Modal = function Modal(_ref) {
     }
     handleCloseModal();
   };
+  var handleUploadToCloudFlare = function handleUploadToCloudFlare(result) {
+    var file = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    var payload = {
+      filename: generateASCIIFileName(result.filename),
+      content_type: file.type,
+      byte_size: file.size,
+      checksum: result.id,
+      metadata: _objectSpread(_objectSpread({}, result), {}, {
+        url: result.variants[0]
+      }),
+      service_name: "cloudflare_image"
+    };
+    createBlob(payload);
+  };
+  var handleSubmit = function handleSubmit(image) {
+    onUploadComplete({
+      url: image.url,
+      signedId: image.signedId
+    });
+    handleCloseModal();
+  };
   var _useImageUploader = useImageUploader({
-      onUploadComplete: setSelectedImage,
+      onUploadComplete: isCloudFlareImageUploader ? handleUploadToCloudFlare : setSelectedImage,
       setIsUploading: setIsUploading
     }),
     uploadFile = _useImageUploader.uploadFile;
@@ -10164,7 +10182,7 @@ var Modal = function Modal(_ref) {
       children: /*#__PURE__*/jsx(Typography, {
         children: t("neetoImageUploader.common.dropHere")
       })
-    })), !isNilOrEmpty(selectedImage) ? /*#__PURE__*/jsx(ImageEditor, {
+    })), !isNilOrEmpty(selectedImage) && isImageCropEnabled ? /*#__PURE__*/jsx(ImageEditor, {
       fixedAspectRatio: fixedAspectRatio,
       handleImageEditComplete: handleImageEditComplete,
       handleReset: function handleReset() {
@@ -10215,12 +10233,15 @@ var Modal = function Modal(_ref) {
             })
           })]
         })
-      }), /*#__PURE__*/jsx(ImageLibrary, {
+      }), /*#__PURE__*/jsx(ImageLibrary, _objectSpread(_objectSpread({}, _objectSpread({
         setActiveTab: setActiveTab,
         setIsUploading: setIsUploading,
-        setSelectedImage: setSelectedImage,
+        setSelectedImage: setSelectedImage
+      }, isCloudFlareImageUploader && {
+        handleSubmit: handleSubmit
+      })), {}, {
         tab: activeTab
-      }), equals(activeTab, TABS[1].key) && /*#__PURE__*/jsx(NeetoUIModal.Footer, {
+      })), equals(activeTab, TABS[1].key) && /*#__PURE__*/jsx(NeetoUIModal.Footer, {
         className: "flex items-center justify-center gap-2",
         children: /*#__PURE__*/jsx(Typography, {
           style: "body2",