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