react-filerobot-image-editor/lib/components/buttons/ZoomButtons/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=["showFitCenterButton"];import React from"react";import{Minus,Plus,PositionCenter}from"@scaleflex/icons";import Menu from"@scaleflex/ui/core/menu";import MenuItem,{MenuItemLabel}from"@scaleflex/ui/core/menu-item";import{useStore}from"../../../hooks";import useZoom from"../../../hooks/useZoom";import{StyledSmallButton,StyledZoomPercentageLabel,StyledZoomingWrapper}from"./ZoomButtons.styled";import{ZOOM_FACTORS_PRESETS}from"./ZoomButtons.constants";var ZoomButtons=function(a){var b=a.showFitCenterButton,c=_objectWithoutProperties(a,_excluded),d=useStore(),e=d.t,f=d.config,g=f.useZoomPresetsMenu,h=f.showBackButton,i=f.showFitCenterZoomButton,j=useZoom(),k=j.zoomOut,l=j.zoomIn,m=j.applyZoomFactorPreset,n=j.getPreviewedZoomLevelLabel,o=j.isZoomDisabled,p=j.toggleZoomingMenu,q=j.fitCanvas,r=j.zoomingMenuAnchorEl;return React.createElement(StyledZoomingWrapper,_extends({className:"FIE_buttons-zoom-btns","data-testid":"FIE-zoom-buttons-wrapper"},c),React.createElement(StyledSmallButton,{onClick:k,color:"basic",title:e("zoomOutTitle"),disabled:o,showBackButton:h,className:"FIE_buttons-zoom-out-btn","data-testid":"FIE-zoom-out-button"},React.createElement(Minus,null)),React.createElement(StyledZoomPercentageLabel,{title:e("toggleZoomMenuTitle"),onClick:o?void 0:g&&p||q,"aria-disabled":o,className:"FIE_zoom_buttons-zoom-label","data-testid":"FIE-zoom-percentage-label"},n()),React.createElement(StyledSmallButton,{onClick:l,color:"basic",title:e("zoomInTitle"),disabled:o,showBackButton:h,className:"FIE_buttons-zoom-in-btn","data-testid":"FIE-zoom-in-button"},React.createElement(Plus,null)),(!(void 0!==i)||i)&&(!(void 0!==b)||b)&&React.createElement(StyledSmallButton,{onClick:function(){return m("fit")},color:"basic",title:e("fitTitle"),disabled:o,className:"FIE_buttons-fit-btn","data-testid":"FIE-fit-button"},React.createElement(PositionCenter,null)),React.createElement(Menu,{anchorEl:r,onClose:p,open:!!r,position:"bottom",className:"FIE_buttons-zoom-menu","data-testid":"FIE-zoom-menu"},ZOOM_FACTORS_PRESETS.map(function(a){var b=a.factor,c=a.labelKey,d=a.label;return React.createElement(MenuItem,{key:d||c,onClick:function(){return m(b,d)},"data-testid":"FIE-zoom-menu-item"},React.createElement(MenuItemLabel,null,c?e(c):d))})))};export default ZoomButtons;