react-filerobot-image-editor/lib/components/ImageInfo/index.js

React component version of filerobot image editor (FIE).

import _extends from"@babel/runtime/helpers/extends";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["children","showCompareButton"];import React from"react";import Compare from"@scaleflex/icons/compare";import{TOGGLE_ORIGINAL_IMAGE_DISPLAY}from"../../actions";import{usePhoneScreen,useStore}from"../../hooks";import getProperDimensions from"../../utils/getProperDimensions";import{StyledSmallButton,StyledDimensionsLabel,StyledImageOptionsButtons,StyledDimensionsButtons}from"./ImageInfo.styled";var ImageInfo=function(a){var b=a.children,c=a.showCompareButton,d=_objectWithoutProperties(a,_excluded),e=usePhoneScreen(),f=useStore(),g=f.dispatch,h=f.isResetted,i=!(void 0!==h)||h,j=f.originalSource,k=f.resize,l=void 0===k?{}:k,m=f.adjustments,n=m.crop,o=m.rotation,p=void 0===o?0:o,q=f.shownImageDimensions,r=f.config.showBackButton,s=f.t,t=function(){g({type:TOGGLE_ORIGINAL_IMAGE_DISPLAY,payload:{isShow:!1}}),document.removeEventListener("mouseup",t),document.removeEventListener("mouseleave",t),document.removeEventListener("touchcancel",t),document.removeEventListener("touchend",t)},u=function(){g({type:TOGGLE_ORIGINAL_IMAGE_DISPLAY,payload:{isShow:!0}}),document.addEventListener("mouseup",t),document.addEventListener("mouseleave",t),document.addEventListener("touchcancel",t),document.addEventListener("touchend",t)},v=j&&getProperDimensions(l,n,q,j,p),w=(!(void 0!==c)||c)&&(null===j||void 0===j?void 0:j.src);return React.createElement(StyledImageOptionsButtons,_extends({className:"FIE_image_info","data-testid":"FIE-image-info-wrapper",isPhoneScreen:e},d),React.createElement(StyledDimensionsLabel,{"data-testid":"FIE-image-dimensions-label",title:s("imageDimensionsHoverTitle")},"".concat((null===v||void 0===v?void 0:v.width)||s("width")," \xD7 ").concat((null===v||void 0===v?void 0:v.height)||s("height")," ").concat(s("px"))),(b||w)&&React.createElement(StyledDimensionsButtons,{"data-testid":"FIE-image-dimensions-buttons"},w&&React.createElement(StyledSmallButton,{color:"basic","data-testid":"FIE-compare-button",onMouseDown:i?void 0:u,onTouchStart:i?void 0:u,disabled:i,showBackButton:r,title:s("showImageTitle")},React.createElement(Compare,null)),b))};export default ImageInfo;