@bigbinary/neeto-image-uploader-frontend 1.4.10 → 1.4.12

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

@@ -47,7 +47,7 @@
       "genericError": "Something went wrong!.",
       "fileSizeError": "File size is too large",
       "fileTypeError": "File type is not supported",
-      "maxAllowedSize": " Maximum allowed size is {{size}} MB",
+      "allowedConfig": " Only {{fileTypes}} files are supported. Maximum allowed size {{size}} MB.",
       "uploadedImage": "Uploaded Image"
     }
   }

package/dist/index.cjs.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var ramda = require('ramda');
-var pure = require('@bigbinary/neeto-commons-frontend/pure');
+var neetoCist = require('@bigbinary/neeto-cist');
 var neetoui = require('@bigbinary/neetoui');
 var reactI18next = require('react-i18next');
 var classNames = require('classnames');
@@ -2448,7 +2448,7 @@ var OPTIONS = [{
   key: "local",
   label: i18next__default["default"].t("neetoImageUploader.labels.uploadNewAsset"),
   style: "primary",
-  onClick: pure.noop
+  onClick: neetoCist.noop
 }];
 var DEFAULT_CROP_CONFIG = {
   unit: "px",
@@ -2479,7 +2479,7 @@ var ImageEditor = function ImageEditor(_ref) {
   var image = _ref.image,
     handleReset = _ref.handleReset,
     _ref$handleImageEditC = _ref.handleImageEditComplete,
-    handleImageEditComplete = _ref$handleImageEditC === void 0 ? pure.noop : _ref$handleImageEditC,
+    handleImageEditComplete = _ref$handleImageEditC === void 0 ? neetoCist.noop : _ref$handleImageEditC,
     _ref$signedId = _ref.signedId,
     signedId = _ref$signedId === void 0 ? "" : _ref$signedId;
   var _useState = React.useState(true),
@@ -2664,8 +2664,8 @@ var directUploadsApi = {
 };
 
 var QUERY_KEYS = {
-  ASSETS_LSIT: "assets-list",
-  UNSPLASH_LIST: "unsplash-list"
+  ASSETS_LIST: "neeto-image-uploader-assets-list",
+  UNSPLASH_LIST: "neeto-image-uploader-unsplash-list"
 };
 var ASSETS_STALE_TIME = 900000; // 15 mins
 
@@ -4764,9 +4764,9 @@ var useDropzoneWithValidation = function useDropzoneWithValidation(_ref) {
   var maxSize = _ref.maxSize,
     acceptedTypes = _ref.acceptedTypes,
     _ref$onUploadComplete = _ref.onUploadComplete,
-    onUploadComplete = _ref$onUploadComplete === void 0 ? pure.noop : _ref$onUploadComplete,
+    onUploadComplete = _ref$onUploadComplete === void 0 ? neetoCist.noop : _ref$onUploadComplete,
     _ref$setIsUploading = _ref.setIsUploading,
-    setIsUploading = _ref$setIsUploading === void 0 ? pure.noop : _ref$setIsUploading;
+    setIsUploading = _ref$setIsUploading === void 0 ? neetoCist.noop : _ref$setIsUploading;
   var _useState = React.useState(false),
     _useState2 = _slicedToArray$2(_useState, 2),
     error = _useState2[0],
@@ -4804,7 +4804,7 @@ var useDropzoneWithValidation = function useDropzoneWithValidation(_ref) {
           }
         };
         directUploadsApi.update(payload);
-        onUploadComplete(ramda.mergeRight(pure.keysToCamelCase(blob), {
+        onUploadComplete(ramda.mergeRight(neetoCist.keysToCamelCase(blob), {
           url: blob.blob_url
         }));
       });
@@ -4922,7 +4922,7 @@ var useDropzoneWithValidation = function useDropzoneWithValidation(_ref) {
     fileRejections = _useDropzone.fileRejections,
     inputRef = _useDropzone.inputRef;
   React.useEffect(function () {
-    setError(pure.isNotEmpty(fileRejections));
+    setError(neetoCist.isNotEmpty(fileRejections));
   }, [fileRejections]);
   return {
     getRootProps: getRootProps,
@@ -4938,7 +4938,7 @@ var useDropzoneWithValidation = function useDropzoneWithValidation(_ref) {
 var createOptions = function createOptions() {
   var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   return OPTIONS.map(function (option) {
-    return ramda.mergeLeft(pure.findBy({
+    return ramda.mergeLeft(neetoCist.findBy({
       key: option.key
     }, options), option);
   });
@@ -4957,12 +4957,11 @@ var assetsApi = {
   fetch: fetch
 };
 
-var ASSETS_LIST = QUERY_KEYS.ASSETS_LIST;
 var useFetchAssets = function useFetchAssets(_ref) {
   var search = _ref.search,
     url = _ref.url;
   var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  return reactQuery.useQuery([ASSETS_LIST, search], function () {
+  return reactQuery.useQuery([QUERY_KEYS.ASSETS_LIST, search], function () {
     return assetsApi.fetch({
       search: search,
       url: url
@@ -5734,13 +5733,13 @@ var InfiniteScroller = function InfiniteScroller(_ref) {
   var _ref$hasMore = _ref.hasMore,
     hasMore = _ref$hasMore === void 0 ? false : _ref$hasMore,
     _ref$loadMore = _ref.loadMore,
-    loadMore = _ref$loadMore === void 0 ? pure.noop : _ref$loadMore,
+    loadMore = _ref$loadMore === void 0 ? neetoCist.noop : _ref$loadMore,
     tab = _ref.tab,
     images = _ref.images,
     _ref$setSelectedImage = _ref.setSelectedImage,
-    setSelectedImage = _ref$setSelectedImage === void 0 ? pure.noop : _ref$setSelectedImage,
+    setSelectedImage = _ref$setSelectedImage === void 0 ? neetoCist.noop : _ref$setSelectedImage,
     _ref$handleUnsplashIm = _ref.handleUnsplashImageSelect,
-    handleUnsplashImageSelect = _ref$handleUnsplashIm === void 0 ? pure.noop : _ref$handleUnsplashIm;
+    handleUnsplashImageSelect = _ref$handleUnsplashIm === void 0 ? neetoCist.noop : _ref$handleUnsplashIm;
   var Loader = /*#__PURE__*/React__default["default"].createElement("div", {
     className: "flex justify-center"
   }, /*#__PURE__*/React__default["default"].createElement(neetoui.Spinner, null));
@@ -5805,7 +5804,7 @@ var Assets = function Assets(_ref) {
       className: "flex items-center justify-center"
     }, /*#__PURE__*/React__default["default"].createElement(neetoui.Spinner, null));
   }
-  return pure.isNotEmpty(images) ? /*#__PURE__*/React__default["default"].createElement(InfiniteScroller, {
+  return neetoCist.isNotEmpty(images) ? /*#__PURE__*/React__default["default"].createElement(InfiniteScroller, {
     images: images,
     setSelectedImage: setSelectedImage,
     tab: TABS[0].key
@@ -5872,7 +5871,7 @@ var uploadWithDirectUpload = function uploadWithDirectUpload(file) {
         }
       };
       directUploadsApi.update(payload);
-      resolve(ramda.mergeRight(pure.keysToCamelCase(blob), {
+      resolve(ramda.mergeRight(neetoCist.keysToCamelCase(blob), {
         url: blob.blob_url
       }));
     });
@@ -6060,9 +6059,9 @@ var ImageLibrary = function ImageLibrary(_ref) {
 var Modal = function Modal(_ref) {
   var isOpen = _ref.isOpen,
     _ref$onClose = _ref.onClose,
-    onClose = _ref$onClose === void 0 ? pure.noop : _ref$onClose,
+    onClose = _ref$onClose === void 0 ? neetoCist.noop : _ref$onClose,
     _ref$onUploadComplete = _ref.onUploadComplete,
-    onUploadComplete = _ref$onUploadComplete === void 0 ? pure.noop : _ref$onUploadComplete,
+    onUploadComplete = _ref$onUploadComplete === void 0 ? neetoCist.noop : _ref$onUploadComplete,
     uploadConfig = _ref.uploadConfig;
   var _useState = React.useState(TABS[0].key),
     _useState2 = _slicedToArray$2(_useState, 2),
@@ -6193,6 +6192,10 @@ var Modal = function Modal(_ref) {
   })), /*#__PURE__*/React__default["default"].createElement("input", getInputProps()));
 };
 
+var getAllowedTypes = function getAllowedTypes(uploadConfig) {
+  return ramda.pipe(ramda.values, ramda.flatten, ramda.join(", "))(uploadConfig.allowedImageTypes);
+};
+
 var ImageUpload = function ImageUpload(_ref) {
   var getRootProps = _ref.getRootProps,
     getInputProps = _ref.getInputProps,
@@ -6233,9 +6236,10 @@ var ImageUpload = function ImageUpload(_ref) {
     className: "text-center leading-4",
     style: "body3"
   }, /*#__PURE__*/React__default["default"].createElement(reactI18next.Trans, {
-    i18nKey: "neetoImageUploader.imageUpload.maxAllowedSize",
+    i18nKey: "neetoImageUploader.imageUpload.allowedConfig",
     values: {
-      size: uploadConfig === null || uploadConfig === void 0 ? void 0 : uploadConfig.maxImageSize
+      size: uploadConfig === null || uploadConfig === void 0 ? void 0 : uploadConfig.maxImageSize,
+      fileTypes: getAllowedTypes(uploadConfig)
     }
   }))));
 };
@@ -6256,7 +6260,7 @@ var ProgressBar = function ProgressBar(_ref) {
 
 var ImageUploader = function ImageUploader(_ref) {
   var _ref$onUploadComplete = _ref.onUploadComplete,
-    onUploadComplete = _ref$onUploadComplete === void 0 ? pure.noop : _ref$onUploadComplete,
+    onUploadComplete = _ref$onUploadComplete === void 0 ? neetoCist.noop : _ref$onUploadComplete,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? "" : _ref$className,
     src = _ref.src,
@@ -6371,8 +6375,7 @@ var ImageUploader = function ImageUploader(_ref) {
     }),
     getRootProps = _useDropzoneWithValid.getRootProps,
     getInputProps = _useDropzoneWithValid.getInputProps,
-    uploadProgress = _useDropzoneWithValid.uploadProgress,
-    inputRef = _useDropzoneWithValid.inputRef;
+    uploadProgress = _useDropzoneWithValid.uploadProgress;
   if (isUploading) {
     return /*#__PURE__*/React__default["default"].createElement("div", {
       className: className
@@ -6397,15 +6400,6 @@ var ImageUploader = function ImageUploader(_ref) {
   })), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "flex items-stretch justify-center gap-2"
   }, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
-    label: t("neetoImageUploader.imageUpload.change"),
-    style: "link",
-    onClick: function onClick() {
-      var _inputRef$current;
-      return (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.click();
-    }
-  }), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "neeto-ui-bg-gray-300 w-px"
-  }), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
     label: t("neetoImageUploader.imageUpload.assets"),
     style: "link",
     onClick: setIsAssetLibraryOpen
@@ -6416,7 +6410,7 @@ var ImageUploader = function ImageUploader(_ref) {
     label: t("neetoImageUploader.imageUpload.delete"),
     style: "danger-text",
     onClick: handleDelete
-  }), ramda.not(IS_DEVELOPMENT_OR_HEROKU_ENV) && pure.isNotEmpty(signedId) && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
+  }), ramda.not(IS_DEVELOPMENT_OR_HEROKU_ENV) && neetoCist.isNotEmpty(signedId) && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "neeto-ui-bg-gray-300 w-px"
   }), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
     label: t("neetoImageUploader.imageUpload.edit"),
@@ -6526,7 +6520,7 @@ var useImageUpload = function useImageUpload() {
           }
         };
         directUploadsApi.update(payload);
-        onUploadComplete(ramda.mergeRight(pure.keysToCamelCase(blob), {
+        onUploadComplete(ramda.mergeRight(neetoCist.keysToCamelCase(blob), {
           url: blob.blob_url
         }));
       });