sp-image-editor/lib/components/Topbar/SaveButton.js

React component version of filerobot image editor (FIE).

import _extends from"@babel/runtime/helpers/extends";import _defineProperty from"@babel/runtime/helpers/defineProperty";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";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,{useEffect,useRef,useState}from"react";import MenuItem from"@scaleflex/ui/core/menu-item";import{Image2}from"@scaleflex/icons";import Label from"@scaleflex/ui/core/label";import{useStore,useTransformedImgData}from"../../hooks";import getFileFullName from"../../utils/getFileFullName";import getDefaultSaveQuality from"../../utils/getDefaultSaveQuality";import{CLOSING_REASONS,ELLIPSE_CROP,SUPPORTED_IMAGE_TYPES,DEFAULT_SAVE_QUALITY}from"../../utils/constants";import{SET_FEEDBACK,SET_SAVING}from"../../actions";import Modal from"../common/Modal";import Slider from"../common/Slider";import restrictNumber from"../../utils/restrictNumber";import{Resize}from"../tools/Resize";import ButtonWithMenu from"../common/ButtonWithMenu";import{StyledFileExtensionSelect,StyledFileNameInput,StyledQualityWrapper,StyledResizeOnSave,StyledResizeOnSaveLabel}from"./Topbar.styled";var sliderStyle={marginBottom:16},saveButtonWrapperStyle={minWidth:67,width:"fit-content"},saveButtonMenuStyle={marginLeft:12},isFieSaveMounted=!0,SaveButton=function(){var a=useStore(),b=useRef(),c=a.theme,d=a.dispatch,e=a.originalImage,f=a.resize,g=a.isLoadingGlobally,h=a.haveNotSavedChanges,i=a.feedback,j=a.hasUndo,k=a.t,l=a.adjustments,m=void 0===l?{}:l,n=m.crop,o=a.config,p=o.onClose,q=o.closeAfterSave,r=o.onBeforeSave,s=o.onSave,t=o.forceToPngInEllipticalCrop,u=o.defaultSavedImageName,v=o.defaultSavedImageType,w=o.defaultSavedImageQuality,x=void 0===w?DEFAULT_SAVE_QUALITY:w,y=o.useCloudimage,z=o.moreSaveOptions,A=o.disableSaveIfNoChanges,B=o.removeSaveButton,C=useState(!1),D=_slicedToArray(C,2),E=D[0],F=D[1],G=useState({quality:getDefaultSaveQuality(x)}),H=_slicedToArray(G,2),I=H[0],J=H[1],K=useTransformedImgData(),L=["jpeg","jpg","webp"].includes(I.extension),M=0===i.duration,N=function a(){var c=K(I,!1,!0),e=b.current||s,f=e(c.imageData,c.designState),g=function a(){d({type:SET_SAVING,payload:{isSaving:!1}})};f instanceof Promise?f["finally"](g):g(),b.current=null,q&&p&&p(CLOSING_REASONS.AFTER_SAVE,h)},O=function a(){d({type:SET_SAVING,payload:{isSaving:!0}}),F(!1),setTimeout(N,3)},P=function a(){var c=b.current||s;if("function"!=typeof c)throw new Error("Please provide onSave function handler.");return I.name&&I.extension?void O():void d({type:SET_FEEDBACK,payload:{feedback:{message:k("nameIsRequired")}}})},Q=function a(){if(!A||j){if(y){var c=K(I),d=b.current||s;return void d(c.imageData,c.designState)}return b.current||"function"!=typeof r||!1!==r(I)?void F(!0):void P()}},R=function d(a,c){if("function"==typeof a)b.current=a,c();else throw new Error("onSave function callback is required as an argument to the passed function.")},S=function a(){var b=getFileFullName(u||e.name,t&&n.ratio===ELLIPSE_CROP?"png":SUPPORTED_IMAGE_TYPES.includes(null===v||void 0===v?void 0:v.toLowerCase())&&v),c=b.name,d=b.extension;J(_objectSpread(_objectSpread({},I),{},{name:c,extension:d}))};if(useEffect(function(){e&&S()},[e]),useEffect(function(){!e||I.name&&I.extension||S()},[E]),useEffect(function(){J(_objectSpread(_objectSpread({},I),{},{size:{width:f.width,height:f.height}}))},[f]),useEffect(function(){return isFieSaveMounted=!0,function(){isFieSaveMounted=!1}},[]),B)return null;var T=Array.isArray(z)&&0<z.length?z.map(function(a,b){return _objectSpread(_objectSpread({},a),{},{key:"".concat(a.label||b,"-option-key"),onClick:"function"==typeof a.onClick?function(){return a.onClick(function(a){return R(a,Q)},function(a){return R(a,O)})}:void 0})}):[];return React.createElement(React.Fragment,null,React.createElement(ButtonWithMenu,{className:"FIE_topbar-save",color:"primary",onClick:Q,menuPosition:"bottom",menuFromBtn:!0,label:0<T.length?k("saveAs"):k("save"),menuItems:T,menuStyle:saveButtonMenuStyle,wrapperStyle:saveButtonWrapperStyle,disabled:g||A&&!j||M,noMargin:!0}),E&&React.createElement(Modal,{className:"FIE_save-modal",title:k("saveAsModalTitle"),Icon:function b(a){return React.createElement(Image2,_extends({color:c.palette["accent-primary"]},a))},isOpened:E,onCancel:function a(){isFieSaveMounted&&E&&(b.current=null,F(!1))},onDone:P,doneLabel:k("save"),cancelLabel:k("cancel"),doneButtonColor:"primary",areButtonsDisabled:g,zIndex:11110},React.createElement(StyledFileNameInput,{className:"FIE_save-file-name-input",value:I.name,onChange:function b(a){var c=a.target.value;J(_objectSpread(_objectSpread({},I),{},{name:c}))},size:"sm",label:k("name"),placeholder:k("imageName"),error:!I.name,fullWidth:!0,focusOnMount:!0}),React.createElement(StyledFileExtensionSelect,{className:"FIE_save-extension-selector",onChange:function b(a){return J(_objectSpread(_objectSpread({},I),{},{extension:a}))},value:I.extension,label:k("format"),placeholder:k("extension"),size:"sm",fullWidth:!0},SUPPORTED_IMAGE_TYPES.map(function(a){return React.createElement(MenuItem,{key:a,value:a},a)})),L&&React.createElement(StyledQualityWrapper,{className:"FIE_save-quality-wrapper"},React.createElement(Label,null,k("quality")),React.createElement(Slider,{annotation:"%",min:1,max:100,onChange:function b(a){J(_objectSpread(_objectSpread({},I),{},{quality:restrictNumber(a/100,.01,1)}))},value:parseInt(100*I.quality,10),width:"100%",style:sliderStyle})),React.createElement(StyledResizeOnSave,{className:"FIE_save-resize-wrapper"},React.createElement(StyledResizeOnSaveLabel,null,k("resize")),React.createElement(Resize,{onChange:function b(a){J(_objectSpread(_objectSpread({},I),{},{size:_objectSpread(_objectSpread({},I.size),a)}))},currentSize:(null===I||void 0===I?void 0:I.size)||{},hideResetButton:!0,alignLeft:!0,alignment:"space-between"}))))};export default SaveButton;