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

React component version of filerobot image editor (FIE).

import _typeof from"@babel/runtime/helpers/typeof";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import{Menu,Tabs}from"@scaleflex/ui/core";import{useCallback,useEffect,useMemo,useRef,useState}from"react";import ReactDOM from"react-dom";import{useStore}from"../../../hooks";import{StyledCategoryTitle,StyledEmojiGrid,StyledEmojiItem,StyledEmojiPickerContainer,StyledSkinToneButton,StyledSkinToneSelector,StyledTab,StyledTabsContainer}from"./Emoji.styled";import{getEmojiData,getEmojiWithSkinTone,getFrequentlyUsedEmojis,getSavedSkinTone,saveSkinTone,updateFrequentlyUsedEmoji}from"./emojiUtils";import{jsx as _jsx,Fragment as _Fragment,jsxs as _jsxs}from"react/jsx-runtime";var EmojiPicker=function(a){var b=a.anchorEl,c=a.onClose,d=a.onSelect,e=a.t,f=useStore(),g=f.theme,h=!!b,i=useState(0),j=_slicedToArray(i,2),k=j[0],l=j[1],m=useState([]),n=_slicedToArray(m,2),o=n[0],p=n[1],q=useState(function(){return getSavedSkinTone()}),r=_slicedToArray(q,2),s=r[0],t=r[1],u=useState(!1),v=_slicedToArray(u,2),w=v[0],x=v[1],y=useRef(null);useEffect(function(){if(h){var a=getFrequentlyUsedEmojis();p(a)}},[h]),useEffect(function(){saveSkinTone(s)},[s]);var z=useCallback(function(a){var b="string"==typeof a?a:getEmojiWithSkinTone(a,s);updateFrequentlyUsedEmoji(a),d(b)},[d,s]),A=useMemo(function(){try{var a=getEmojiData(),b=a.categories,c=[];0<o.length&&c.push({key:"recently-used",name:e("frequentlyUsed")||"Frequently Used",icon:"\uD83D\uDD25",emojis:o});var d={"smileys-emotion":"\uD83D\uDE00","people-body":"\uD83D\uDC4B","animals-nature":"\uD83D\uDC36","food-drink":"\uD83C\uDF54","travel-places":"\u2708\uFE0F",activities:"\u26BD",objects:"\uD83D\uDCA1",symbols:"\u2764\uFE0F",flags:"\uD83C\uDFF3\uFE0F"};return Object.entries(b).forEach(function(a){var b=_slicedToArray(a,2),e=b[0],f=b[1];if(f&&f.emojis&&0<f.emojis.length){var g;c.push({key:e,name:f.name||e,icon:d[e]||(null===(g=f.emojis[0])||void 0===g||null===(g=g.skins)||void 0===g||null===(g=g[0])||void 0===g?void 0:g.native)||"\uD83D\uDE00",emojis:f.emojis})}}),0<c.length?c:[{key:"default",name:"Emojis",icon:"\uD83D\uDE00",emojis:[]}]}catch(a){return console.error("Error loading emoji categories:",a),[{key:"default",name:"Emojis",icon:"\uD83D\uDE00",emojis:[]}]}},[o,e]);useEffect(function(){h||(l(0),x(!1))},[h]),useEffect(function(){var a=function(a){w&&!a.target.closest(".FIE_skin-tone-selector")&&x(!1)};if(w)return document.addEventListener("click",a),function(){return document.removeEventListener("click",a)}},[w]);var B=A[k];return _jsxs(Menu,{anchorEl:b,open:h,onClose:c,position:"bottom",className:"FIE_emoji-picker",PaperProps:{style:{maxHeight:"450px",overflow:"visible",position:"relative"}},children:[_jsxs(StyledEmojiPickerContainer,{children:[_jsx(StyledTabsContainer,{children:_jsxs("div",{style:{display:"flex",alignItems:"center",padding:"12px",gap:"12px"},children:[_jsx(Tabs,{value:k,onChange:function onChange(a,b){return l(b)},variant:"scrollable",scrollButtons:!1,style:{flex:1,scrollbarWidth:"none",msOverflowStyle:"none","&::-webkit-scrollbar":{display:"none"}},children:A.map(function(a,b){return _jsx(StyledTab,{label:a.icon,value:b,title:a.name,onClick:function onClick(){return l(b)}},a.key)})}),_jsx(StyledSkinToneSelector,{className:"FIE_skin-tone-selector",children:_jsx(StyledSkinToneButton,{ref:y,type:"button",onClick:function onClick(a){a.preventDefault(),a.stopPropagation(),x(!w)},title:e("selectSkinTone")||"Select skin tone",$selected:1!==s,children:["\u270B","\u270B\uD83C\uDFFB","\u270B\uD83C\uDFFC","\u270B\uD83C\uDFFD","\u270B\uD83C\uDFFE","\u270B\uD83C\uDFFF"][s-1]})})]})}),_jsx("div",{className:"FIE_emoji-picker-panel",style:{height:"350px",overflowY:"auto",position:"relative"},children:B&&_jsxs(_Fragment,{children:[_jsx(StyledCategoryTitle,{children:B.name}),B.emojis&&0<B.emojis.length&&_jsx(StyledEmojiGrid,{children:function renderEmojiGrid(a){var b=!!(1<arguments.length&&arguments[1]!==void 0)&&arguments[1],c=2<arguments.length&&arguments[2]!==void 0?arguments[2]:"";return a&&0!==a.length?_jsxs(_Fragment,{children:[b&&c&&_jsx(StyledCategoryTitle,{children:c}),a.map(function(a){var b="object"===_typeof(a)&&null!==a,c=b?getEmojiWithSkinTone(a,s):a,d=b?a.id:a,f=b&&a.has_skin_variations;return _jsx(StyledEmojiItem,{onClick:function onClick(){return z(a)},title:b?a.name:e("selectEmoji")||"Select emoji",$hasSkinTones:f,children:c},d)})]}):null}(B.emojis)})]})})]}),function renderSkinToneDropdown(){if(!w||!y.current)return null;var a=y.current.getBoundingClientRect();return ReactDOM.createPortal(_jsx("div",{className:"FIE_skin-tone-dropdown",style:{position:"fixed",top:a.bottom+4,right:window.innerWidth-a.right,background:g.palette["bg-secondary"],borderRadius:"4px",padding:"4px",display:"flex",gap:"4px",boxShadow:"0 2px 8px rgba(0,0,0,0.15)",zIndex:1e4},children:[1,2,3,4,5,6].map(function(a){return _jsx(StyledSkinToneButton,{type:"button",onClick:function onClick(b){b.preventDefault(),b.stopPropagation(),t(a),x(!1)},$selected:s===a,title:1===a?"Default":"Skin tone ".concat(a-1),children:["\u270B","\u270B\uD83C\uDFFB","\u270B\uD83C\uDFFC","\u270B\uD83C\uDFFD","\u270B\uD83C\uDFFE","\u270B\uD83C\uDFFF"][a-1]},a)})}),document.body)}()]})};EmojiPicker.defaultProps={anchorEl:null};export default EmojiPicker;