sp-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,UploadOutline}from"@scaleflex/icons";import{useAnnotation,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 ADDED_IMG_SPACING_PERCENT=.15,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.shownImageDimensions,m=k.dispatch,n=k.adjustments.crop,o=void 0===n?{}:n,p=k.t,q=k.config,r=void 0===q?{}:q,s=r[TOOLS_IDS.IMAGE],t=!s.disableUpload,u=Array.isArray(s.gallery)&&0<s.gallery.length,v=useAnnotation({name:TOOLS_IDS.IMAGE,opacity:1},!1),w=_slicedToArray(v,3),x=w[0],y=w[1],z=w[2],A=useRef(0),B=function(a){var b=o.width||l.width,c=o.height||l.height,d=o.x||0,e=o.y||0,f=Math.min(1,b/(a.width+a.width*ADDED_IMG_SPACING_PERCENT),c/(a.height+a.height*ADDED_IMG_SPACING_PERCENT));z({image:a,x:d+b/2-a.width*f/2,y:e+c/2-a.height*f/2,width:a.width*f,height:a.height*f})},C=function(a){A.current+=1,A.current===a&&(A.current=0,d(!1))},D=function(a){m({type:SET_FEEDBACK,payload:{feedback:{message:a,status:FEEDBACK_STATUSES.WARNING}}})},E=function(){i.current&&i.current.click()},F=function(){h(j.current)},G=useMemo(function(){return[t&&{key:"add-by-upload-image",label:c?p("importing"):p("uploadImage"),icon:UploadOutline,onClick:c?void 0:E},u&&{key:"add-from-gallery",label:p("fromGallery"),icon:Images,onClick:F}]},[s,c,p]);return React.createElement(ImageControls,{image:x,saveImage:y,t:p},React.createElement(ButtonWithMenu,{className:"FIE_image-tool-add-option",color:"secondary",label:p("addImage"),title:p("addImageTitle"),menuPosition:"top",menuItems:G,size:"sm",style:{maxHeight:24},buttonRef:j,menuFromBtn:!0}),t&&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(){B(c),URL.revokeObjectURL(a),C(e)},c.onerror=function(){D(p("uploadImageError")),C(e)},c.src=URL.createObjectURL(a)}else b.push(a.name),C(e)}),0<b.length){var f=1<b.length?p("areNotImages"):p("isNotImage");D("".concat(b.join(", ")," ").concat(f," ").concat(p("toBeUploaded"),"."))}}a.target.value=""},disabled:c,multiple:!0}),u&&React.createElement(ImagesGallery,{gallery:s.gallery,onSelect:function(a){d(!0);var b=new Image;b.onload=function(){B(b),C(1)},b.onerror=function(){D(p("uploadImageError")),C(1)},b.crossOrigin="Anonymous",b.src=a},onClose:function(){h(null)},anchorEl:g}))};export default ImageOptions;