@zergo0/react-filerobot-image-editor/lib/components/Topbar/ImageDimensionsAndDisplayToggle.js

React component version of filerobot image editor (FIE).

import React from"react";import Compare from"@scaleflex/icons/compare";import{TOGGLE_ORIGINAL_IMAGE_DISPLAY}from"../../actions";import{useStore}from"../../hooks";import getProperDimensions from"../../utils/getProperDimensions";import Separator from"../common/Separator";import{StyledSmallButton,StyledDimensionsLabel,StyledImageOptionsButtons,StyledDimensionsButtons}from"./Topbar.styled";import CanvasZooming from"./CanvasZooming";import{jsx as _jsx,Fragment as _Fragment,jsxs as _jsxs}from"react/jsx-runtime";var ImageDimensionsAndDisplayToggle=function(a){var b=a.showBackButton,c=a.isPhoneScreen,d=useStore(),e=d.dispatch,f=d.isResetted,g=!(void 0!==f)||f,h=d.originalImage,i=d.resize,j=void 0===i?{}:i,k=d.adjustments,l=k.crop,m=k.rotation,n=void 0===m?0:m,o=d.shownImageDimensions,p=d.config.disableZooming,q=d.t,r=function(){e({type:TOGGLE_ORIGINAL_IMAGE_DISPLAY,payload:{isShow:!1}}),document.removeEventListener("mouseup",r),document.removeEventListener("mouseleave",r),document.removeEventListener("touchcancel",r),document.removeEventListener("touchend",r)},s=function(){e({type:TOGGLE_ORIGINAL_IMAGE_DISPLAY,payload:{isShow:!0}}),document.addEventListener("mouseup",r),document.addEventListener("mouseleave",r),document.addEventListener("touchcancel",r),document.addEventListener("touchend",r)};if(!h)return null;var t=getProperDimensions(j,l,o,h,n);return _jsxs(StyledImageOptionsButtons,{isPhoneScreen:c,children:[_jsx(StyledDimensionsLabel,{title:q("imageDimensionsHoverTitle"),children:"".concat(t.width," x ").concat(t.height," px")}),_jsxs(StyledDimensionsButtons,{children:[_jsx(StyledSmallButton,{color:"basic",onMouseDown:g?void 0:s,onTouchStart:g?void 0:s,disabled:g,showBackButton:b,title:q("showImageTitle"),children:_jsx(Compare,{})}),!p&&_jsxs(_Fragment,{children:[_jsx(Separator,{}),_jsx(CanvasZooming,{showBackButton:b})]})]})]})};ImageDimensionsAndDisplayToggle.defaultProps={showBackButton:!1,isPhoneScreen:!1};export default ImageDimensionsAndDisplayToggle;