react-image-editor-q/lib/components/Topbar/SaveButton.js

SSR-safe React wrapper around Filerobot Image Editor

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.config,m=l.onClose,n=l.closeAfterSave,o=l.onBeforeSave,p=l.onSave,q=l.forceToPngInEllipticalCrop,r=l.defaultSavedImageName,s=l.defaultSavedImageType,t=l.defaultSavedImageQuality,u=void 0===t?DEFAULT_SAVE_QUALITY:t,v=l.useCloudimage,w=l.moreSaveOptions,x=l.disableSaveIfNoChanges,y=l.removeSaveButton,z=useState({quality:getDefaultSaveQuality(u)}),A=_slicedToArray(z,2),B=A[0],C=A[1],D=useTransformedImgData(),E=0===i.duration,F=function(){var a=D(B,!1,!0),c=b.current||p,e=c(a.imageData,a.designState),f=function(){d({type:SET_SAVING,payload:{isSaving:!1}})};e instanceof Promise?e["finally"](f):f(),b.current=null,n&&m&&m(CLOSING_REASONS.AFTER_SAVE,h)},G=function(){d({type:SET_SAVING,payload:{isSaving:!0}}),setTimeout(F,3)},H=function(){if(!x||j){if(v){var a=D(B),c=b.current||p;return void c(a.imageData,a.designState)}(b.current||"function"!=typeof o||!1!==o(B))&&G()}},I=function(a,c){if("function"==typeof a)b.current=a,c();else throw new Error("onSave function callback is required.")},J=function(){var a,b=getFileFullName(r||e.name,q&&(null===(a=crop)||void 0===a?void 0:a.ratio)===ELLIPSE_CROP?"png":SUPPORTED_IMAGE_TYPES.includes(null===s||void 0===s?void 0:s.toLowerCase())&&s),c=b.name,d=b.extension;C(_objectSpread(_objectSpread({},B),{},{name:c,extension:d}))};if(useEffect(function(){e&&J()},[e]),useEffect(function(){C(_objectSpread(_objectSpread({},B),{},{size:{width:f.width,height:f.height}}))},[f]),useEffect(function(){return isFieSaveMounted=!0,function(){isFieSaveMounted=!1}},[]),y)return null;var K=Array.isArray(w)&&0<w.length?w.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 I(a,H)},function(a){return I(a,G)})}:void 0})}):[];return React.createElement(ButtonWithMenu,{className:"FIE_topbar-save",color:"primary",onClick:H,menuPosition:"bottom",menuFromBtn:!0,label:0<K.length?k("saveAs"):k("save"),menuItems:K,menuStyle:saveButtonMenuStyle,wrapperStyle:saveButtonWrapperStyle,disabled:g||x&&!j||E,noMargin:!0})};export default SaveButton;