sp-image-editor
Version:
React component version of filerobot image editor (FIE).
1 lines • 4.15 kB
JavaScript
import _defineProperty from"@babel/runtime/helpers/defineProperty";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 from"react";import LockOutline from"@scaleflex/icons/lock-outline";import UnlockOutline from"@scaleflex/icons/unlock-outline";import{Reset}from"@scaleflex/icons";import{SET_RESIZE,ZOOM_CANVAS}from"../../../actions";import{useStore}from"../../../hooks";import getProperDimensions from"../../../utils/getProperDimensions";import getSizeAfterRotation from"../../../utils/getSizeAfterRotation";import getZoomFitFactor from"../../../utils/getZoomFitFactor";import restrictNumber from"../../../utils/restrictNumber";import{DEFAULT_ZOOM_FACTOR}from"../../../utils/constants";import{StyledResizeWrapper,StyledResizeInput,StyledRatioLockIcon,StyledResetButton}from"./Resize.styled";var Resize=function(a){var b=a.onChange,c=a.currentSize,d=a.hideResetButton,e=a.alignment,f=useStore(),g=f.dispatch,h=f.originalImage,i=f.resize,j=f.shownImageDimensions,k=f.adjustments,l=k.crop,m=k.rotation,n=void 0===m?0:m,o=f.theme,p=f.t,q=getProperDimensions((c.width||c.height)&&c||i,l,j,h,n),r=function(a){var d,e=a.target,f=e.name,k=e.value;if(!(1>parseFloat(k))){var m=Math.min(10*h.width,10*h.height),o=getSizeAfterRotation(h.width,h.height,n),p="height"===f,r=p?"width":"height",s=_defineProperty(_defineProperty({},f,k?restrictNumber(k,0,m):k),r,q[r]),t=null!==(d=c.ratioUnlocked)&&void 0!==d?d:i.ratioUnlocked;if(!t){var u=o.width/o.height;s[r]=p?Math.round(s[f]*u):Math.round(s[f]/u)}if(s[f]!==i[f]||s[r]!==i[r]){if("function"==typeof b)return void b(s);g({type:SET_RESIZE,payload:s});var v=l.width&&l.height&&l||j,w=_objectSpread(_objectSpread({},i),s);g({type:ZOOM_CANVAS,payload:{factor:w.width&&w.height?getZoomFitFactor(v,w):DEFAULT_ZOOM_FACTOR,isAbsoluteZoom:!0}})}}},s="undefined"==typeof i.width&&"undefined"==typeof i.height||h.width===i.width&&h.height===i.height,t=i.manualChangeDisabled,u="undefined"!=typeof i.width&&!i.width,v="undefined"!=typeof i.height&&!i.height;return React.createElement(StyledResizeWrapper,{className:"FIE_resize-tool-options",alignment:e},React.createElement(StyledResizeInput,{className:"FIE_resize-width-option",value:u?"":q.width,name:"width",onChange:t?void 0:r,inputMode:"numeric",title:p("resizeWidthTitle"),label:p("width"),inputProps:{type:"number"},size:"sm",iconEnd:"px",placeholder:"Width",disabled:t}),React.createElement(StyledRatioLockIcon,{className:"FIE_resize-ratio-locker",title:p("toggleRatioLockTitle"),onClick:t?void 0:function(){return"function"==typeof b?void b({ratioUnlocked:!c.ratioUnlocked}):void g({type:SET_RESIZE,payload:{ratioUnlocked:!i.ratioUnlocked}})},color:"basic",size:"sm",disabled:t},c.ratioUnlocked||i.ratioUnlocked?React.createElement(UnlockOutline,{size:16,color:o.palette.success}):React.createElement(LockOutline,{size:16,color:o.palette.error})),React.createElement(StyledResizeInput,{className:"FIE_resize-height-option",value:v?"":q.height,name:"height",onChange:t?void 0:r,inputMode:"numeric",title:p("resizeHeightTitle"),label:p("height"),inputProps:{type:"number"},size:"sm",iconEnd:"px",placeholder:"Height",disabled:t}),!d&&React.createElement(StyledResetButton,{className:"FIE_resize-reset-button",size:"sm",color:"basic",onClick:s||t?void 0:function(){g({type:SET_RESIZE,payload:{width:void 0,height:void 0,ratioUnlocked:!1}});var a=l.width&&l.height&&l||j;g({type:ZOOM_CANVAS,payload:{factor:getZoomFitFactor(a,a)}})},disabled:s||t},React.createElement(Reset,null)))};Resize.defaultProps={onChange:void 0,currentSize:{},hideResetButton:!1,alignment:"center"};export default Resize;