sp-image-editor
Version:
React component version of filerobot image editor (FIE).
1 lines • 4.05 kB
JavaScript
import _defineProperty from"@babel/runtime/helpers/defineProperty";import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}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";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()},u=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,l=a.noEffect,n=a.index;return h?React.createElement(CropPresetGroupsList,{key:b,titleKey:b,groups:h,Icon:i,theme:p,onItemSelect:t,t:g,disableManualResize:j}):React.createElement(CropPresetItem,{key:"".concat(d,"-").concat(n),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})};return React.createElement(React.Fragment,null,React.createElement(StyledToolsBarItemButtonWrapper,null,React.createElement(StyledToolsBarItemButtonLabel,{className:"FIE_crop-tool-label FIE_selected-crop-preset-label",isPhoneScreen:r},g(l||"cropTool")),React.createElement(StyledOpenMenuButton,{className:"FIE_crop-presets-opener-button",color:"link-secondary",size:"lg"},b?React.createElement(MoveUpOutline,{size:10}):React.createElement(MoveDownOutline,{size:10}))),React.createElement(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%"},React.createElement(StyledMenu,null,s.map(function(a,b){return u(_objectSpread(_objectSpread({},a),{},{index:b}))}))))};CropPresetsOption.defaultProps={anchorEl:null};export default CropPresetsOption;