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

package/dist/index.js

@@ -1,7 +1,7 @@
 import React, { createContext, PureComponent, useState, useRef, useMemo, useReducer, useEffect, useCallback, forwardRef, useImperativeHandle, Fragment } from 'react';
 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 { Switch, Typography, Input, Button, Toastr, Spinner, Modal as Modal$1, Tab } from '@bigbinary/neetoui';
 import { useTranslation, Trans } from 'react-i18next';
 import classNames from 'classnames';
 import { LeftArrow, ImageUpload as ImageUpload$1 } from '@bigbinary/neeto-icons';
@@ -2357,11 +2357,11 @@ var Controls = function Controls(_ref) {
     setAspectRatio = _ref.setAspectRatio,
     setAspectRatioLocked = _ref.setAspectRatioLocked,
     setCrop = _ref.setCrop,
-    imageRef = _ref.imageRef;
+    imageRef = _ref.imageRef,
+    isFullImage = _ref.isFullImage,
+    setIsFullImage = _ref.setIsFullImage;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
-  // const [imageQuality, setImageQuality] = useState("50"); //TODO: Implement image quality
-
   var _useImageControls = useImageControls({
       isAspectRatioLocked: isAspectRatioLocked,
       setAspectRatioLocked: setAspectRatioLocked,
@@ -2378,9 +2378,19 @@ var Controls = function Controls(_ref) {
     handleAspectHeightChange = _useImageControls.handleAspectHeightChange;
   return /*#__PURE__*/React.createElement("div", {
     className: "flex w-1/4 flex-col overflow-scroll pl-6 pt-8"
-  }, /*#__PURE__*/React.createElement(Checkbox, {
-    checked: isAspectRatioLocked,
+  }, /*#__PURE__*/React.createElement(Switch, {
+    checked: isFullImage,
     className: "flex-grow-0",
+    label: t("neetoImageUploader.labels.selectOriginalImage"),
+    onChange: function onChange() {
+      return setIsFullImage(function (isFullImage) {
+        return !isFullImage;
+      });
+    }
+  }), /*#__PURE__*/React.createElement(Switch, {
+    checked: isAspectRatioLocked,
+    className: "mt-4 flex-grow-0",
+    disabled: isFullImage,
     label: t("neetoImageUploader.labels.lockAspectRatio"),
     onChange: onToggleAspectRatioLock
   }), /*#__PURE__*/React.createElement(Typography, {
@@ -2389,23 +2399,27 @@ var Controls = function Controls(_ref) {
   }, t("neetoImageUploader.imageEditor.aspetRatio")), /*#__PURE__*/React.createElement("div", {
     className: "flex gap-4 self-start"
   }, /*#__PURE__*/React.createElement(Input, {
+    disabled: isFullImage,
     size: "small",
     type: "number",
     value: aspectRatio.width,
     onChange: withEventTargetValue(handleAspectWidthChange)
   }), /*#__PURE__*/React.createElement(Typography, null, " : "), /*#__PURE__*/React.createElement(Input, {
+    disabled: isFullImage,
     size: "small",
     type: "number",
     value: aspectRatio.height,
     onChange: withEventTargetValue(handleAspectHeightChange)
   })), /*#__PURE__*/React.createElement(Input, {
     className: "mt-4 flex-grow-0",
+    disabled: isFullImage,
     label: t("neetoImageUploader.labels.width"),
     type: "number",
     value: crop.width.toFixed(2),
     onChange: withEventTargetValue(handleWidthChange)
   }), /*#__PURE__*/React.createElement(Input, {
     className: "mt-4 flex-grow-0",
+    disabled: isFullImage,
     label: t("neetoImageUploader.labels.height"),
     type: "number",
     value: crop.height.toFixed(2),
@@ -2475,17 +2489,21 @@ var ImageEditor = function ImageEditor(_ref) {
     _useState2 = _slicedToArray$2(_useState, 2),
     isAspectRatioLocked = _useState2[0],
     setIsAspectRatioLocked = _useState2[1];
-  var _useState3 = useState({
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray$2(_useState3, 2),
+    isFullImage = _useState4[0],
+    setIsFullImage = _useState4[1];
+  var _useState5 = useState({
       width: 16,
       height: 9
     }),
-    _useState4 = _slicedToArray$2(_useState3, 2),
-    aspectRatio = _useState4[0],
-    setAspectRatio = _useState4[1];
-  var _useState5 = useState(DEFAULT_CROP_CONFIG),
     _useState6 = _slicedToArray$2(_useState5, 2),
-    crop = _useState6[0],
-    setCrop = _useState6[1];
+    aspectRatio = _useState6[0],
+    setAspectRatio = _useState6[1];
+  var _useState7 = useState(DEFAULT_CROP_CONFIG),
+    _useState8 = _slicedToArray$2(_useState7, 2),
+    crop = _useState8[0],
+    setCrop = _useState8[1];
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var _useCropImage = useCropImage(),
@@ -2493,6 +2511,10 @@ var ImageEditor = function ImageEditor(_ref) {
   var imageRef = useRef(null);
   var wrapperRef = useRef(null);
   var processCrop = function processCrop() {
+    if (isFullImage) {
+      handleImageEditComplete(image);
+      return;
+    }
     cropImage({
       crop: getCropValues({
         crop: crop,
@@ -2508,6 +2530,10 @@ var ImageEditor = function ImageEditor(_ref) {
       processCrop();
       return;
     }
+    if (isFullImage) {
+      handleImageEditComplete(image);
+      return;
+    }
     var newURL = getCroppedImageURL({
       crop: crop,
       imageURL: image.url,
@@ -2537,7 +2563,7 @@ var ImageEditor = function ImageEditor(_ref) {
       })
     })
   }, /*#__PURE__*/React.createElement(ReactCrop, {
-    crop: crop,
+    crop: isFullImage ? null : crop,
     src: image === null || image === void 0 ? void 0 : image.url,
     aspect: isAspectRatioLocked ? aspectRatio.width / aspectRatio.height : 0,
     onChange: setCrop,
@@ -2558,8 +2584,10 @@ var ImageEditor = function ImageEditor(_ref) {
     handleSubmit: handleSubmit,
     imageRef: imageRef,
     isAspectRatioLocked: isAspectRatioLocked,
+    isFullImage: isFullImage,
     setAspectRatio: setAspectRatio,
     setCrop: setCrop,
+    setIsFullImage: setIsFullImage,
     setAspectRatioLocked: setIsAspectRatioLocked
   })));
 };
@@ -6076,7 +6104,7 @@ var Modal = function Modal(_ref) {
   var handleImageEditComplete = function handleImageEditComplete(editedImage) {
     if (IS_DEVELOPMENT_OR_HEROKU_ENV) {
       onUploadComplete({
-        url: editedImage.metadata.url,
+        url: editedImage.url,
         signedId: editedImage.signedId
       });
     } else {
@@ -6293,7 +6321,9 @@ var ImageUploader = function ImageUploader(_ref) {
       url: "",
       signedId: "",
       key: "",
-      filename: ""
+      filename: "",
+      size: "",
+      type: ""
     });
   };
   var onChange = function onChange(file) {
@@ -6307,7 +6337,9 @@ var ImageUploader = function ImageUploader(_ref) {
       filename: attachedImage.filename,
       key: attachedImage.key,
       url: attachedImage.blobUrl,
-      signedId: attachedImage.signedId
+      signedId: attachedImage.signedId,
+      size: attachedImage.byteSize,
+      type: attachedImage.contentType
     });
     setSignedId(attachedImage.signedId);
     setIsEditorOpen(false);
@@ -6318,7 +6350,7 @@ var ImageUploader = function ImageUploader(_ref) {
     setSignedId("");
     setIsEditorOpen(false);
   };
-  var handleUplaodComplete = function handleUplaodComplete(image) {
+  var handleUploadComplete = function handleUploadComplete(image) {
     if (IS_DEVELOPMENT_OR_HEROKU_ENV) {
       handleSuccess(mergeRight(image, {
         metadata: {
@@ -6362,7 +6394,7 @@ var ImageUploader = function ImageUploader(_ref) {
   var _useDropzoneWithValid = useDropzoneWithValidation({
       maxSize: uploadConfigWithDefaults === null || uploadConfigWithDefaults === void 0 ? void 0 : uploadConfigWithDefaults.maxImageSize,
       acceptedTypes: uploadConfigWithDefaults === null || uploadConfigWithDefaults === void 0 ? void 0 : uploadConfigWithDefaults.allowedImageTypes,
-      onUploadComplete: handleUplaodComplete,
+      onUploadComplete: handleUploadComplete,
       setIsUploading: setIsUploading
     }),
     getRootProps = _useDropzoneWithValid.getRootProps,
@@ -6390,7 +6422,7 @@ var ImageUploader = function ImageUploader(_ref) {
     className: "h-full w-auto",
     src: image.url
   })), /*#__PURE__*/React.createElement("div", {
-    className: "flex items-stretch justify-center gap-2"
+    className: "mb-2 flex items-stretch justify-center gap-2"
   }, /*#__PURE__*/React.createElement(Button, {
     label: t("neetoImageUploader.imageUpload.assets"),
     style: "link",
@@ -6400,7 +6432,7 @@ var ImageUploader = function ImageUploader(_ref) {
   }), /*#__PURE__*/React.createElement(Button, {
     className: "bg-transparent p-0",
     "data-cy": "attachment-remove-button",
-    label: t("neetoImageUploader.imageUpload.delete"),
+    label: t("neetoImageUploader.imageUpload.remove"),
     style: "danger-text",
     onClick: handleDelete
   }), not(IS_DEVELOPMENT_OR_HEROKU_ENV) && isNotEmpty(signedId) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {