@bigbinary/neeto-image-uploader-frontend 1.4.11 → 1.4.13

package/dist/index.js

@@ -1,5 +1,5 @@
 import React, { createContext, PureComponent, useState, useRef, useMemo, useReducer, useEffect, useCallback, forwardRef, useImperativeHandle, Fragment } from 'react';
-import { mergeRight, isNil, isEmpty, equals, mergeLeft, concat, __, inc, not } from 'ramda';
+import { mergeRight, isNil, isEmpty, equals, mergeLeft, concat, __, inc, pipe, values, flatten as flatten$1, join, not } from 'ramda';
 import { noop as noop$1, isNotEmpty, keysToCamelCase, findBy } from '@bigbinary/neeto-cist';
 import { Checkbox, Typography, Input, Button, Toastr, Spinner, Modal as Modal$1, Tab } from '@bigbinary/neetoui';
 import { useTranslation, Trans } from 'react-i18next';
@@ -2653,8 +2653,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
 
@@ -4946,12 +4946,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 useQuery([ASSETS_LIST, search], function () {
+  return useQuery([QUERY_KEYS.ASSETS_LIST, search], function () {
     return assetsApi.fetch({
       search: search,
       url: url
@@ -6182,6 +6181,10 @@ var Modal = function Modal(_ref) {
   })), /*#__PURE__*/React.createElement("input", getInputProps()));
 };
 
+var getAllowedTypes = function getAllowedTypes(uploadConfig) {
+  return pipe(values, flatten$1, join(", "))(uploadConfig.allowedImageTypes);
+};
+
 var ImageUpload = function ImageUpload(_ref) {
   var getRootProps = _ref.getRootProps,
     getInputProps = _ref.getInputProps,
@@ -6201,7 +6204,8 @@ var ImageUpload = function ImageUpload(_ref) {
     i18nKey: "neetoImageUploader.imageUpload.dragAndDropOrBrowseFile",
     components: {
       span: /*#__PURE__*/React.createElement("span", {
-        className: "neeto-ui-text-primary-500"
+        className: "neeto-ui-text-primary-500",
+        "data-cy": "upload-button"
       })
     }
   })), /*#__PURE__*/React.createElement(Typography, {
@@ -6218,13 +6222,16 @@ var ImageUpload = function ImageUpload(_ref) {
         className: "neeto-ui-text-primary-500"
       })
     }
-  })), /*#__PURE__*/React.createElement("input", getInputProps()), /*#__PURE__*/React.createElement(Typography, {
+  })), /*#__PURE__*/React.createElement("input", _extends$1({}, getInputProps(), {
+    "data-cy": "image-upload-input"
+  })), /*#__PURE__*/React.createElement(Typography, {
     className: "text-center leading-4",
     style: "body3"
   }, /*#__PURE__*/React.createElement(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)
     }
   }))));
 };
@@ -6360,8 +6367,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.createElement("div", {
       className: className
@@ -6386,15 +6392,6 @@ var ImageUploader = function ImageUploader(_ref) {
   })), /*#__PURE__*/React.createElement("div", {
     className: "flex items-stretch justify-center gap-2"
   }, /*#__PURE__*/React.createElement(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.createElement("div", {
-    className: "neeto-ui-bg-gray-300 w-px"
-  }), /*#__PURE__*/React.createElement(Button, {
     label: t("neetoImageUploader.imageUpload.assets"),
     style: "link",
     onClick: setIsAssetLibraryOpen
@@ -6402,6 +6399,7 @@ var ImageUploader = function ImageUploader(_ref) {
     className: "neeto-ui-bg-gray-300 w-px"
   }), /*#__PURE__*/React.createElement(Button, {
     className: "bg-transparent p-0",
+    "data-cy": "attachment-remove-button",
     label: t("neetoImageUploader.imageUpload.delete"),
     style: "danger-text",
     onClick: handleDelete