@zergo0/react-filerobot-image-editor/lib/components/tools/Crop/CropPresetsOption.js

React component version of filerobot image editor (FIE).

import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";import React,{useMemo}from"react";import{SET_CROP,SET_RESIZE,ZOOM_CANVAS}from"../../../actions";import{usePhoneScreen,useStore}from"../../../hooks";import{StyledToolsBarItemButtonLabel}from"../../ToolsBar/ToolsBar.styled";import{DEFAULT_ZOOM_FACTOR,ORIGINAL_CROP,TOOLS_IDS}from"../../../utils/constants";import toPrecisedFloat from"../../../utils/toPrecisedFloat";import getZoomFitFactor from"../../../utils/getZoomFitFactor";import{MoveDownOutline,MoveUpOutline}from"@scaleflex/icons";import{Menu}from"@scaleflex/ui/core";import{DEFAULT_CROP_PRESETS}from"./Crop.constants";import CropPresetGroupsList from"./CropPresetGroupsFolder";import CropPresetItem from"./CropPresetItem";import{StyledOpenMenuButton,StyledMenu,StyledToolsBarItemButtonWrapper}from"./Crop.styled";import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";var CropPresetsOption=function(a){var b=a.anchorEl,c=a.onClose,d=useStore(),f=d.dispatch,g=d.t,e=d.adjustments,h=void 0===e?{}:e,i=h.crop,j=void 0===i?{}:i,k=j.ratio,l=j.ratioTitleKey,m=j.ratioFolderKey,n=d.shownImageDimensions,o=d.config,p=d.theme,q=o[TOOLS_IDS.CROP],r=usePhoneScreen(),s=useMemo(function(){var a=q.presetsItems,b=void 0===a?[]:a,c=q.presetsFolders,d=void 0===c?[]:c,e=q.lockCropAreaAt,f=e?DEFAULT_CROP_PRESETS.filter(function(a){var b;return!(null!==(b=a.hide)&&void 0!==b&&b.call(a,{lockCropAreaAt:e}))}):DEFAULT_CROP_PRESETS;return[].concat(_toConsumableArray(d),_toConsumableArray(f),_toConsumableArray(b))},[q]),t=function(a,b,d){a.stopPropagation();var e={ratio:b,ratioTitleKey:d.ratioTitleKey,ratioGroupKey:d.ratioGroupKey,ratioFolderKey:d.ratioFolderKey,noEffect:d.noEffect};f({type:SET_CROP,payload:e}),q.autoResize&&(f({type:SET_RESIZE,payload:{width:d.width,height:d.height,manualChangeDisabled:d.disableManualResize}}),f({type:ZOOM_CANVAS,payload:{factor:d.width>n.width||d.height>n.height?getZoomFitFactor(n,d):DEFAULT_ZOOM_FACTOR}})),c()};return _jsxs(_Fragment,{children:[_jsxs(StyledToolsBarItemButtonWrapper,{children:[_jsx(StyledToolsBarItemButtonLabel,{className:"FIE_crop-tool-label FIE_selected-crop-preset-label",isPhoneScreen:r,children:g(l||"cropTool")}),_jsx(StyledOpenMenuButton,{className:"FIE_crop-presets-opener-button",color:"link-secondary",size:"lg",children:b?_jsx(MoveUpOutline,{size:10}):_jsx(MoveDownOutline,{size:10})})]}),_jsx(Menu,{className:"FIE_crop-presets-menu",anchorEl:b,enableOverlay:!0,onClose:c,open:!!b,position:"top",popperOptions:{modifiers:[{name:"offset",options:{offset:[0,4]}}]},maxHeight:"100%",children:_jsx(StyledMenu,{children:s.map(function renderPreset(a){var b=a.titleKey,c=a.descriptionKey,d=a.ratio,e=a.width,f=a.height,h=a.groups,i=a.icon,j=a.disableManualResize,l=a.noEffect;return h?_jsx(CropPresetGroupsList,{titleKey:b,groups:h,Icon:i,theme:p,onItemSelect:t,t:g,disableManualResize:j},b):_jsx(CropPresetItem,{ratio:null!==d&&void 0!==d?d:toPrecisedFloat(e/f),titleKey:b,t:g,description:g(c),Icon:i,isActive:(k||ORIGINAL_CROP)===(null!==d&&void 0!==d?d:toPrecisedFloat(e/f))&&!m,theme:p,width:e,height:f,onClick:t,disableManualResize:j,noEffect:l},d)})})})]})};CropPresetsOption.defaultProps={anchorEl:null};export default CropPresetsOption;