react-filerobot-image-editor/lib/components/tools/Resize/Resize.js

React component version of filerobot image editor (FIE).

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=void 0===c?{}:c,e=a.hideResetButton,f=a.alignment,g=void 0===f?"center":f,h=useStore(),i=h.dispatch,j=h.originalSource,k=h.resize,l=h.shownImageDimensions,m=h.adjustments,n=m.crop,o=m.rotation,p=void 0===o?0:o,q=h.theme,r=h.t,s=getProperDimensions((d.width||d.height)&&d||k,n,l,j,p),t=function(a){var c,e=a.target,f=e.name,g=e.value;if(!(1>parseFloat(g))){var h=Math.min(10*j.width,10*j.height),m=getSizeAfterRotation(j.width,j.height,p),o="height"===f,q=o?"width":"height",r=_defineProperty(_defineProperty({},f,g?restrictNumber(g,0,h):g),q,s[q]),t=null!==(c=d.ratioUnlocked)&&void 0!==c?c:k.ratioUnlocked;if(!t){var u=m.width/m.height;r[q]=o?Math.round(r[f]*u):Math.round(r[f]/u)}if(r[f]!==k[f]||r[q]!==k[q]){if("function"==typeof b)return void b(r);i({type:SET_RESIZE,payload:r});var v=n.width&&n.height&&n||l,w=_objectSpread(_objectSpread({},k),r);i({type:ZOOM_CANVAS,payload:{factor:w.width&&w.height?getZoomFitFactor(v,w):DEFAULT_ZOOM_FACTOR,isAbsoluteZoom:!0}})}}},u="undefined"==typeof k.width&&"undefined"==typeof k.height||j.width===k.width&&j.height===k.height,v=k.manualChangeDisabled,w="undefined"!=typeof k.width&&!k.width,x="undefined"!=typeof k.height&&!k.height;return React.createElement(StyledResizeWrapper,{className:"FIE_resize-tool-options",alignment:g},React.createElement(StyledResizeInput,{className:"FIE_resize-width-option","data-testid":"FIE-resize-width-option",value:w?"":s.width,name:"width",onChange:v?void 0:t,inputMode:"numeric",title:r("resizeWidthTitle"),label:r("width"),inputProps:{type:"number"},size:"sm",iconEnd:"px",placeholder:"Width",disabled:v}),React.createElement(StyledRatioLockIcon,{className:"FIE_resize-ratio-locker","data-testid":"FIE-resize-ratio-locker",title:r("toggleRatioLockTitle"),onClick:v?void 0:function(){return"function"==typeof b?void b({ratioUnlocked:!d.ratioUnlocked}):void i({type:SET_RESIZE,payload:{ratioUnlocked:!k.ratioUnlocked}})},color:"basic",size:"sm",disabled:v},d.ratioUnlocked||k.ratioUnlocked?React.createElement(UnlockOutline,{size:16,color:q.palette.success}):React.createElement(LockOutline,{size:16,color:q.palette.error})),React.createElement(StyledResizeInput,{className:"FIE_resize-height-option","data-testid":"FIE-resize-height-option",value:x?"":s.height,name:"height",onChange:v?void 0:t,inputMode:"numeric",title:r("resizeHeightTitle"),label:r("height"),inputProps:{type:"number"},size:"sm",iconEnd:"px",placeholder:"Height",disabled:v}),!(void 0!==e&&e)&&React.createElement(StyledResetButton,{className:"FIE_resize-reset-button","data-testid":"FIE-resize-reset-button",size:"sm",color:"basic",onClick:u||v?void 0:function(){i({type:SET_RESIZE,payload:{width:void 0,height:void 0,ratioUnlocked:!1}});var a=n.width&&n.height&&n||l;i({type:ZOOM_CANVAS,payload:{factor:getZoomFitFactor(a,a)}})},disabled:u||v},React.createElement(Reset,null)))};export default Resize;