react-filerobot-video-editor/lib/components/tools/Crop/CropPresetsOption.js

React component version of filerobot video editor (FVE).

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