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

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

@@ -15,6 +15,7 @@
       "done": "Done",
       "height": "Height",
       "lockAspectRatio": "Lock aspect ratio",
+      "selectOriginalImage": "Select original image",
       "myAssets": "My assets",
       "unsplash": "Unsplash",
       "unsplashImages": "Unsplash images",
@@ -40,7 +41,7 @@
     "imageUpload": {
       "change": "Change",
       "assets": "Assets",
-      "delete": "Delete",
+      "remove": "Remove",
       "dragAndDropOrBrowseFile": "Drag and drop or <span>Browse</span> a file.",
       "selectImagefromAssetsLibrary": "Select from <span>Assets Library</span>",
       "edit": "Edit",

package/dist/index.cjs.js

@@ -2368,11 +2368,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 = reactI18next.useTranslation(),
     t = _useTranslation.t;
-  // const [imageQuality, setImageQuality] = useState("50"); //TODO: Implement image quality
-
   var _useImageControls = useImageControls({
       isAspectRatioLocked: isAspectRatioLocked,
       setAspectRatioLocked: setAspectRatioLocked,
@@ -2389,9 +2389,19 @@ var Controls = function Controls(_ref) {
     handleAspectHeightChange = _useImageControls.handleAspectHeightChange;
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "flex w-1/4 flex-col overflow-scroll pl-6 pt-8"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Checkbox, {
-    checked: isAspectRatioLocked,
+  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Switch, {
+    checked: isFullImage,
     className: "flex-grow-0",
+    label: t("neetoImageUploader.labels.selectOriginalImage"),
+    onChange: function onChange() {
+      return setIsFullImage(function (isFullImage) {
+        return !isFullImage;
+      });
+    }
+  }), /*#__PURE__*/React__default["default"].createElement(neetoui.Switch, {
+    checked: isAspectRatioLocked,
+    className: "mt-4 flex-grow-0",
+    disabled: isFullImage,
     label: t("neetoImageUploader.labels.lockAspectRatio"),
     onChange: onToggleAspectRatioLock
   }), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
@@ -2400,23 +2410,27 @@ var Controls = function Controls(_ref) {
   }, t("neetoImageUploader.imageEditor.aspetRatio")), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "flex gap-4 self-start"
   }, /*#__PURE__*/React__default["default"].createElement(neetoui.Input, {
+    disabled: isFullImage,
     size: "small",
     type: "number",
     value: aspectRatio.width,
     onChange: utils.withEventTargetValue(handleAspectWidthChange)
   }), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, null, " : "), /*#__PURE__*/React__default["default"].createElement(neetoui.Input, {
+    disabled: isFullImage,
     size: "small",
     type: "number",
     value: aspectRatio.height,
     onChange: utils.withEventTargetValue(handleAspectHeightChange)
   })), /*#__PURE__*/React__default["default"].createElement(neetoui.Input, {
     className: "mt-4 flex-grow-0",
+    disabled: isFullImage,
     label: t("neetoImageUploader.labels.width"),
     type: "number",
     value: crop.width.toFixed(2),
     onChange: utils.withEventTargetValue(handleWidthChange)
   }), /*#__PURE__*/React__default["default"].createElement(neetoui.Input, {
     className: "mt-4 flex-grow-0",
+    disabled: isFullImage,
     label: t("neetoImageUploader.labels.height"),
     type: "number",
     value: crop.height.toFixed(2),
@@ -2486,17 +2500,21 @@ var ImageEditor = function ImageEditor(_ref) {
     _useState2 = _slicedToArray$2(_useState, 2),
     isAspectRatioLocked = _useState2[0],
     setIsAspectRatioLocked = _useState2[1];
-  var _useState3 = React.useState({
+  var _useState3 = React.useState(false),
+    _useState4 = _slicedToArray$2(_useState3, 2),
+    isFullImage = _useState4[0],
+    setIsFullImage = _useState4[1];
+  var _useState5 = React.useState({
       width: 16,
       height: 9
     }),
-    _useState4 = _slicedToArray$2(_useState3, 2),
-    aspectRatio = _useState4[0],
-    setAspectRatio = _useState4[1];
-  var _useState5 = React.useState(DEFAULT_CROP_CONFIG),
     _useState6 = _slicedToArray$2(_useState5, 2),
-    crop = _useState6[0],
-    setCrop = _useState6[1];
+    aspectRatio = _useState6[0],
+    setAspectRatio = _useState6[1];
+  var _useState7 = React.useState(DEFAULT_CROP_CONFIG),
+    _useState8 = _slicedToArray$2(_useState7, 2),
+    crop = _useState8[0],
+    setCrop = _useState8[1];
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
   var _useCropImage = useCropImage(),
@@ -2504,6 +2522,10 @@ var ImageEditor = function ImageEditor(_ref) {
   var imageRef = React.useRef(null);
   var wrapperRef = React.useRef(null);
   var processCrop = function processCrop() {
+    if (isFullImage) {
+      handleImageEditComplete(image);
+      return;
+    }
     cropImage({
       crop: getCropValues({
         crop: crop,
@@ -2519,6 +2541,10 @@ var ImageEditor = function ImageEditor(_ref) {
       processCrop();
       return;
     }
+    if (isFullImage) {
+      handleImageEditComplete(image);
+      return;
+    }
     var newURL = getCroppedImageURL({
       crop: crop,
       imageURL: image.url,
@@ -2548,7 +2574,7 @@ var ImageEditor = function ImageEditor(_ref) {
       })
     })
   }, /*#__PURE__*/React__default["default"].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,
@@ -2569,8 +2595,10 @@ var ImageEditor = function ImageEditor(_ref) {
     handleSubmit: handleSubmit,
     imageRef: imageRef,
     isAspectRatioLocked: isAspectRatioLocked,
+    isFullImage: isFullImage,
     setAspectRatio: setAspectRatio,
     setCrop: setCrop,
+    setIsFullImage: setIsFullImage,
     setAspectRatioLocked: setIsAspectRatioLocked
   })));
 };
@@ -6087,7 +6115,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 {
@@ -6304,7 +6332,9 @@ var ImageUploader = function ImageUploader(_ref) {
       url: "",
       signedId: "",
       key: "",
-      filename: ""
+      filename: "",
+      size: "",
+      type: ""
     });
   };
   var onChange = function onChange(file) {
@@ -6318,7 +6348,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);
@@ -6329,7 +6361,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(ramda.mergeRight(image, {
         metadata: {
@@ -6373,7 +6405,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,
@@ -6401,7 +6433,7 @@ var ImageUploader = function ImageUploader(_ref) {
     className: "h-full w-auto",
     src: image.url
   })), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "flex items-stretch justify-center gap-2"
+    className: "mb-2 flex items-stretch justify-center gap-2"
   }, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
     label: t("neetoImageUploader.imageUpload.assets"),
     style: "link",
@@ -6411,7 +6443,7 @@ var ImageUploader = function ImageUploader(_ref) {
   }), /*#__PURE__*/React__default["default"].createElement(neetoui.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
   }), 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", {