@zergo0/react-filerobot-image-editor/lib/components/tools/Emoji/EmojiOptions.js

React component version of filerobot image editor (FIE).

import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import{Button}from"@scaleflex/ui/core";import{useRef,useState}from"react";import{useAnnotation,useStore}from"../../../hooks";import{TOOLS_IDS}from"../../../utils/constants";import{getEmojiSvgUrl}from"../../../utils/emojiToSvg";import{SELECT_TOOL}from"../../../actions";import EmojiPicker from"./EmojiPicker";import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";var EmojiOptions=function(){var a=useState(null),b=_slicedToArray(a,2),c=b[0],d=b[1],e=useState(!1),f=_slicedToArray(e,2),g=f[0],h=f[1],i=useRef(null),j=useStore(),k=j.shownImageDimensions,l=j.adjustments.crop,m=void 0===l?{}:l,n=j.t,o=j.config,p=void 0===o?{}:o,q=j.dispatch,r=useAnnotation({name:TOOLS_IDS.IMAGE},!1),s=_slicedToArray(r,3),t=s[0],u=s[1],v=s[2],w=p[TOOLS_IDS.EMOJI],x=(null===w||void 0===w?void 0:w.emojis)||["\uD83D\uDE03","\uD83D\uDE0E","\u2764\uFE0F","\uD83D\uDC4D","\uD83D\uDC4E","\uD83C\uDF89","\uD83D\uDD25","\uD83D\uDCAF","\uD83C\uDF1F","\uD83D\uDE80"],y=function(){d(null)},z=function(a){h(!0);var b=getEmojiSvgUrl(a),c=new Image;c.onload=function(){var a=m.width||k.width,b=m.height||k.height,d=m.x||0,e=m.y||0,f=.15*Math.min(a,b);v({image:c,x:d+a/2-f/2,y:e+b/2-f/2,width:f,height:f,opacity:1,isEmoji:!0}),setTimeout(function(){q({type:SELECT_TOOL,payload:{toolId:TOOLS_IDS.IMAGE,keepSelections:!0}})},100),h(!1),y()},c.onerror=function(){console.error("Failed to load emoji SVG:",b),h(!1)},c.crossOrigin="anonymous",c.src=b};return _jsxs(_Fragment,{children:[_jsxs(Button,{ref:i,className:"FIE_emoji-tool-options",color:"secondary",size:"sm",onClick:function handleEmojiButtonClick(a){if(!(a.defaultPrevented||g)){var b=x[0];z(b)}},onMouseDown:function openEmojiPicker(a){a.stopPropagation(),d(a.currentTarget)},disabled:g,children:[_jsx("span",{style:{fontSize:"20px",marginRight:"8px"},children:x[0]}),g?n("loading"):n("emojiLabel")]}),_jsx(EmojiPicker,{anchorEl:c,onClose:y,onSelect:z,t:n})]})};export default EmojiOptions;