react-filerobot-image-editor/lib/components/tools/Image/ImageOptions.js

React component version of filerobot image editor (FIE).

import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import React,{useMemo,useRef,useState}from"react";import{Images,PlusOutline,UploadOutline}from"@scaleflex/icons";import{useImageScaled,useStore}from"../../../hooks";import{FEEDBACK_STATUSES,TOOLS_IDS}from"../../../utils/constants";import{SET_FEEDBACK}from"../../../actions";import HiddenUploadInput from"../../common/HiddenUploadInput";import ButtonWithMenu from"../../common/ButtonWithMenu";import ImageControls from"./ImageControls";import ImagesGallery from"./ImagesGallery";var ImageOptions=function(){var a=useState(),b=_slicedToArray(a,2),c=b[0],d=b[1],e=useState(null),f=_slicedToArray(e,2),g=f[0],h=f[1],i=useRef(),j=useRef(),k=useStore(),l=k.dispatch,m=k.t,n=k.config,o=void 0===n?{}:n,p=useImageScaled(),q=p.image,r=p.saveImage,s=p.addImgScaled,t=o[TOOLS_IDS.IMAGE],u=!t.disableUpload,v=Array.isArray(t.gallery)&&0<t.gallery.length,w=useRef(0),x=function(a){w.current+=1,w.current===a&&(w.current=0,d(!1))},y=function(a){l({type:SET_FEEDBACK,payload:{feedback:{message:a,status:FEEDBACK_STATUSES.WARNING}}})},z=function(){i.current&&i.current.click()},A=function(){h(j.current)},B=useMemo(function(){return[u&&{key:"add-by-upload-image",label:c?m("importing"):m("uploadImage"),icon:UploadOutline,onClick:c?void 0:z},v&&{key:"add-from-gallery",label:m("fromGallery"),icon:Images,onClick:A}]},[t,c,m]);return React.createElement(ImageControls,{image:q,saveImage:r,t:m},React.createElement(ButtonWithMenu,{className:"FIE_image-tool-add-option","data-testid":"FIE-image-tool-add-option",color:"secondary",label:React.createElement(React.Fragment,null,React.createElement(PlusOutline,null),m("addImage")),title:m("addImageTitle"),menuPosition:"top",menuItems:B,size:"sm",style:{maxHeight:24},buttonRef:j,menuFromBtn:!0}),u&&React.createElement(HiddenUploadInput,{ref:i,onChange:c?void 0:function(a){if(a.target.files){d(!0);var b=[],c=Array.from(a.target.files),e=c.length;if(c.forEach(function(a){if(a.type.startsWith("image/")){var c=new Image;c.onload=function(){s(c),URL.revokeObjectURL(a),x(e)},c.onerror=function(){y(m("uploadImageError")),x(e)},c.src=URL.createObjectURL(a)}else b.push(a.name),x(e)}),0<b.length){var f=1<b.length?m("areNotImages"):m("isNotImage");y("".concat(b.join(", ")," ").concat(f," ").concat(m("toBeUploaded"),"."))}}a.target.value=""},disabled:c,multiple:!0}),v&&React.createElement(ImagesGallery,{gallery:t.gallery,onSelect:function(a){d(!0);var b=new Image;b.onload=function(){s(b),x(1)},b.onerror=function(){y(m("uploadImageError")),x(1)},b.crossOrigin="Anonymous",b.src=a},onClose:function(){h(null)},anchorEl:g}))};export default ImageOptions;