/* eslint-disable jsx-a11y/no-static-element-interactions */ /* eslint-disable jsx-a11y/click-events-have-key-events */ import React, { useState, useEffect, useRef } from 'react'; import PropTypes from 'prop-types'; import './EmojiBoard.scss'; import parse from 'html-react-parser'; import twemoji from 'twemoji'; import { emojiGroups, emojis } from './emoji'; import { getRelevantPacks } from './custom-emoji'; import initMatrix from '../../../client/initMatrix'; import cons from '../../../client/state/cons'; import navigation from '../../../client/state/navigation'; import AsyncSearch from '../../../util/AsyncSearch'; import { addRecentEmoji, getRecentEmojis } from './recent'; import Text from '../../atoms/text/Text'; import RawIcon from '../../atoms/system-icons/RawIcon'; import IconButton from '../../atoms/button/IconButton'; import Input from '../../atoms/input/Input'; import ScrollView from '../../atoms/scroll/ScrollView'; import SearchIC from '../../../../public/res/ic/outlined/search.svg'; import RecentClockIC from '../../../../public/res/ic/outlined/recent-clock.svg'; import EmojiIC from '../../../../public/res/ic/outlined/emoji.svg'; import DogIC from '../../../../public/res/ic/outlined/dog.svg'; import CupIC from '../../../../public/res/ic/outlined/cup.svg'; import BallIC from '../../../../public/res/ic/outlined/ball.svg'; import PhotoIC from '../../../../public/res/ic/outlined/photo.svg'; import BulbIC from '../../../../public/res/ic/outlined/bulb.svg'; import PeaceIC from '../../../../public/res/ic/outlined/peace.svg'; import FlagIC from '../../../../public/res/ic/outlined/flag.svg'; const ROW_EMOJIS_COUNT = 7; const EmojiGroup = React.memo(({ name, groupEmojis }) => { function getEmojiBoard() { const emojiBoard = []; const totalEmojis = groupEmojis.length; for (let r = 0; r < totalEmojis; r += ROW_EMOJIS_COUNT) { const emojiRow = []; for (let c = r; c < r + ROW_EMOJIS_COUNT; c += 1) { const emojiIndex = c; if (emojiIndex >= totalEmojis) break; const emoji = groupEmojis[emojiIndex]; emojiRow.push( { emoji.hexcode // This is a unicode emoji, and should be rendered with twemoji ? parse(twemoji.parse( emoji.unicode, { attributes: () => ({ unicode: emoji.unicode, shortcodes: emoji.shortcodes?.toString(), hexcode: emoji.hexcode, loading: 'lazy', }), }, )) // This is a custom emoji, and should be render as an mxc : ( ) } , ); } emojiBoard.push(