@bigbinary/neeto-image-uploader-frontend 1.5.25 → 1.5.26

package/dist/index.js

@@ -2,16 +2,24 @@ import React, { useMemo, useRef, useReducer, useEffect, useCallback, forwardRef,
 import classnames from 'classnames';
 import { noop as noop$1, keysToCamelCase, findBy, isPresent } from '@bigbinary/neeto-cist';
 import { Delete, LeftArrow, MenuHorizontal } from '@bigbinary/neeto-icons';
-import { Toastr, Typography, Button, Switch, Input, Spinner, Modal as Modal$1, Tab, Dropdown } from '@bigbinary/neetoui';
+import Button from '@bigbinary/neetoui/Button';
+import Typography from '@bigbinary/neetoui/Typography';
 import { pipe, values, flatten as flatten$1, map, toUpper, join, equals, isNil, isEmpty, mergeRight, mergeLeft, concat, __, inc, mergeDeepRight } from 'ramda';
 import { Trans, useTranslation } from 'react-i18next';
 import { globalProps } from '@bigbinary/neeto-commons-frontend/initializers';
 import i18next, { t as t$1 } from 'i18next';
+import Toastr from '@bigbinary/neetoui/Toastr';
+import Dropdown from '@bigbinary/neetoui/Dropdown';
+import NeetoUIModal from '@bigbinary/neetoui/Modal';
+import Tab from '@bigbinary/neetoui/Tab';
+import Spinner from '@bigbinary/neetoui/Spinner';
 import { useMutationWithInvalidation, useDebounce, useFuncDebounce } from '@bigbinary/neeto-commons-frontend/react-utils';
 import { useMutation, useQuery } from 'react-query';
 import axios from 'axios';
 import { DirectUpload } from '@rails/activestorage';
 import { withEventTargetValue } from '@bigbinary/neeto-commons-frontend/utils';
+import Input from '@bigbinary/neetoui/Input';
+import Switch from '@bigbinary/neetoui/Switch';
 
 var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
 
@@ -3535,17 +3543,18 @@ var useImageControls = function useImageControls(_ref) {
     }
   };
   var handleWidthChange = function handleWidthChange(width) {
-    var newWidth = Number(width);
-    if (newWidth > 0 && Math.trunc(crop.x) + newWidth <= imageRef.current.width) {
+    var cropWidth = Number(width);
+    var displayWidth = cropWidth * imageRef.current.width / imageRef.current.naturalWidth;
+    if (displayWidth > 0 && Math.trunc(crop.x) + displayWidth <= imageRef.current.width) {
       if (isAspectRatioLocked) {
-        var newHeight = newWidth / (aspectRatio.width / aspectRatio.height);
-        newHeight + Math.trunc(crop.y) <= imageRef.current.height && setCrop(mergeRight(crop, {
-          width: newWidth,
-          height: newHeight
+        var displayHeight = displayWidth / (aspectRatio.width / aspectRatio.height);
+        displayHeight + Math.trunc(crop.y) <= imageRef.current.height && setCrop(mergeRight(crop, {
+          width: displayWidth,
+          height: displayHeight
         }));
       } else {
         setCrop(mergeRight(crop, {
-          width: newWidth
+          width: displayWidth
         }));
       }
     } else {
@@ -3553,17 +3562,18 @@ var useImageControls = function useImageControls(_ref) {
     }
   };
   var handleHeightChange = function handleHeightChange(height) {
-    var newHeight = Number(height);
-    if (newHeight > 0 && Math.trunc(crop.y) + newHeight <= imageRef.current.height) {
+    var cropHeight = Number(height);
+    var displayHeight = cropHeight * imageRef.current.height / imageRef.current.naturalHeight;
+    if (displayHeight > 0 && Math.trunc(crop.y) + displayHeight <= imageRef.current.height) {
       if (isAspectRatioLocked) {
-        var newWidth = newHeight * aspectRatio.width / aspectRatio.height;
-        newWidth + Math.trunc(crop.x) <= imageRef.current.width && setCrop(mergeRight(crop, {
-          height: newHeight,
-          width: newWidth
+        var displayWidth = displayHeight * aspectRatio.width / aspectRatio.height;
+        displayWidth + Math.trunc(crop.x) <= imageRef.current.width && setCrop(mergeRight(crop, {
+          height: displayHeight,
+          width: displayWidth
         }));
       } else {
         setCrop(mergeRight(crop, {
-          height: newHeight
+          height: displayHeight
         }));
       }
     } else {
@@ -3634,11 +3644,19 @@ var Controls = function Controls(_ref) {
     hideControls = _ref$hideControls === void 0 ? false : _ref$hideControls;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
-  var _useState = useState(crop.height.toFixed(0)),
+  var getActualCropHeight = function getActualCropHeight(cropHeight) {
+    var _imageRef$current, _imageRef$current2;
+    return cropHeight * (((_imageRef$current = imageRef.current) === null || _imageRef$current === void 0 ? void 0 : _imageRef$current.naturalHeight) / ((_imageRef$current2 = imageRef.current) === null || _imageRef$current2 === void 0 ? void 0 : _imageRef$current2.height));
+  };
+  var getActualCropWidth = function getActualCropWidth(cropHeight) {
+    var _imageRef$current3, _imageRef$current4;
+    return cropHeight * (((_imageRef$current3 = imageRef.current) === null || _imageRef$current3 === void 0 ? void 0 : _imageRef$current3.naturalWidth) / ((_imageRef$current4 = imageRef.current) === null || _imageRef$current4 === void 0 ? void 0 : _imageRef$current4.width));
+  };
+  var _useState = useState(getActualCropHeight(crop.height)),
     _useState2 = _slicedToArray$2(_useState, 2),
     height = _useState2[0],
     setHeight = _useState2[1];
-  var _useState3 = useState(crop.width.toFixed(0)),
+  var _useState3 = useState(getActualCropWidth(crop.width)),
     _useState4 = _slicedToArray$2(_useState3, 2),
     width = _useState4[0],
     setWidth = _useState4[1];
@@ -3667,8 +3685,8 @@ var Controls = function Controls(_ref) {
     handleWidthChange(debouncedWidth);
   }, [debouncedWidth]);
   useEffect(function () {
-    setHeight(crop.height.toFixed(2));
-    setWidth(crop.width.toFixed(2));
+    setHeight(getActualCropHeight(crop.height));
+    setWidth(getActualCropWidth(crop.width));
   }, [crop]);
   return /*#__PURE__*/React.createElement("div", {
     className: "flex flex-col p-4 md:w-2/6 "
@@ -3711,14 +3729,14 @@ var Controls = function Controls(_ref) {
     disabled: isFullImage,
     label: t("neetoImageUploader.labels.width"),
     type: "number",
-    value: width,
+    value: Math.round(width),
     onChange: withEventTargetValue(setWidth)
   }), /*#__PURE__*/React.createElement(Input, {
     className: "mt-4 flex-grow-0",
     disabled: isFullImage,
     label: t("neetoImageUploader.labels.height"),
     type: "number",
-    value: height,
+    value: Math.round(height),
     onChange: withEventTargetValue(setHeight)
   }), /*#__PURE__*/React.createElement(Button, {
     className: "mt-6 self-start",
@@ -5108,7 +5126,7 @@ var Modal = function Modal(_ref) {
   useEffect(function () {
     setActiveTab(TABS[0].key);
   }, [isOpen]);
-  return /*#__PURE__*/React.createElement(Modal$1, {
+  return /*#__PURE__*/React.createElement(NeetoUIModal, {
     isOpen: isOpen,
     className: "niu-modal",
     size: "large",
@@ -5131,7 +5149,7 @@ var Modal = function Modal(_ref) {
     onClick: function onClick(event) {
       return event.stopPropagation();
     }
-  })), /*#__PURE__*/React.createElement(Modal$1.Header, null, /*#__PURE__*/React.createElement(Typography, {
+  })), /*#__PURE__*/React.createElement(NeetoUIModal.Header, null, /*#__PURE__*/React.createElement(Typography, {
     style: "h2"
   }, t("neetoImageUploader.common.imageLibrary"))), /*#__PURE__*/React.createElement("div", {
     className: "px-6 py-2"
@@ -5164,7 +5182,7 @@ var Modal = function Modal(_ref) {
     setIsUploading: setIsUploading,
     setSelectedImage: setSelectedImage,
     tab: activeTab
-  }), equals(activeTab, TABS[1].key) && /*#__PURE__*/React.createElement(Modal$1.Footer, {
+  }), equals(activeTab, TABS[1].key) && /*#__PURE__*/React.createElement(NeetoUIModal.Footer, {
     className: "flex items-center justify-center gap-2"
   }, /*#__PURE__*/React.createElement(Typography, {
     style: "body2"