react-filerobot-video-editor/lib/components/buttons/SaveButton/SaveModal.js

React component version of filerobot video editor (FVE).

import _extends from"@babel/runtime/helpers/extends";import React from"react";import MenuItem from"@scaleflex/ui/core/menu-item";import Label from"@scaleflex/ui/core/label";import{useStore}from"../../../hooks";import Modal from"../../common/Modal";import Slider from"../../common/Slider";import{Resize}from"../../tools/Resize";import{StyledFileExtensionSelect,StyledFileNameInput,StyledQualityWrapper,StyledResizeOnSave,StyledResizeOnSaveLabel}from"./SaveButton.styled";var sliderStyle={marginBottom:16},SaveModal=function(a){var b=a.modalProps,c=void 0===b?{}:b,d=a.fileInfo,e=a.icon,f=a.open,g=a.isQualityAcceptable,h=a.supportedTypes,i=void 0===h?[]:h,j=a.hideResizeSection,k=a.onDone,l=a.onFileNameChange,m=a.onSelectFileExtension,n=a.onQualityChange,o=a.onCancel,p=a.onResize,q=useStore(),r=q.isLoadingGlobally,s=q.t,t=q.config.removeSaveButton;return t?null:React.createElement(Modal,_extends({className:"FIE_save-modal",title:s("saveAsModalTitle"),Icon:e,isOpened:f,onCancel:o,onDone:k,doneLabel:s("save"),cancelLabel:s("cancel"),doneButtonColor:"primary",areButtonsDisabled:r,zIndex:11110},c),React.createElement(StyledFileNameInput,{"data-testid":"FIE-save-filename-input",className:"FIE_save-file-name-input",value:d.name,onChange:l,size:"sm",label:s("name"),placeholder:s("imageName"),error:!d.name,fullWidth:!0,focusOnMount:!0}),React.createElement(StyledFileExtensionSelect,{"data-testid":"FIE-save-extension-selector",className:"FIE_save-extension-selector",onChange:m,value:d.extension,label:s("format"),placeholder:s("extension"),size:"sm",fullWidth:!0,disabled:1===i.length},i.map(function(a){return React.createElement(MenuItem,{key:a,value:a},a)})),g&&React.createElement(StyledQualityWrapper,{className:"FIE_save-quality-wrapper","data-testid":"FIE-save-quality-wrapper"},React.createElement(Label,null,s("quality")),React.createElement(Slider,{annotation:"%",min:1,max:100,onChange:n,value:parseInt(100*d.quality,10),width:"100%",style:sliderStyle})),!j&&React.createElement(StyledResizeOnSave,{className:"FIE_save-resize-wrapper","data-testid":"FIE-save-resize-wrapper"},React.createElement(StyledResizeOnSaveLabel,null,s("resize")),React.createElement(Resize,{onChange:p,currentSize:(null===d||void 0===d?void 0:d.size)||{},hideResetButton:!0,alignLeft:!0,alignment:"space-between"})))};export default SaveModal;