Merge branch 'react-any-emoji' into 'develop'

React with any emoji

See merge request soapbox-pub/soapbox!2271

app/soapbox/components/status-reaction-wrapper.tsx

@@ -1,3 +1,4 @@
+import { Portal } from '@reach/portal';
 import React, { useState, useEffect, useRef } from 'react';
 
 import { simpleEmojiReact } from 'soapbox/actions/emoji-reacts';
@@ -105,12 +106,14 @@ const StatusReactionWrapper: React.FC<IStatusReactionWrapper> = ({ statusId, chi
         ref: setReferenceElement,
       })}
 
+      <Portal>
         <EmojiSelector
           placement='top-start'
           referenceElement={referenceElement}
           onReact={handleReact}
           visible={visible}
         />
+      </Portal>
     </div>
   );
 };

app/soapbox/components/ui/emoji-selector/emoji-selector.tsx

@@ -3,7 +3,8 @@ import clsx from 'clsx';
 import React, { useEffect, useState } from 'react';
 import { usePopper } from 'react-popper';
 
-import { Emoji, HStack } from 'soapbox/components/ui';
+import { Emoji, HStack, IconButton } from 'soapbox/components/ui';
+import { Picker } from 'soapbox/features/emoji/emoji-picker';
 import { useSoapboxConfig } from 'soapbox/hooks';
 
 interface IEmojiButton {
@@ -42,6 +43,8 @@ interface IEmojiSelector {
   placement?: Placement
   /** Whether the selector should be visible. */
   visible?: boolean
+  /** Whether to allow any emoji to be chosen. */
+  all?: boolean
 }
 
 /** Panel with a row of emoji buttons. */
@@ -51,9 +54,12 @@ const EmojiSelector: React.FC<IEmojiSelector> = ({
   onReact,
   placement = 'top',
   visible = false,
+  all = true,
 }): JSX.Element => {
   const soapboxConfig = useSoapboxConfig();
 
+  const [expanded, setExpanded] = useState(false);
+
   // `useRef` won't trigger a re-render, while `useState` does.
   // https://popper.js.org/react-popper/v2/
   const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
@@ -80,6 +86,14 @@ const EmojiSelector: React.FC<IEmojiSelector> = ({
     ],
   });
 
+  const handleExpand: React.MouseEventHandler = () => {
+    setExpanded(true);
+  };
+
+  useEffect(() => {
+    setExpanded(false);
+  }, [visible]);
+
   useEffect(() => {
     document.addEventListener('mousedown', handleClickOutside);
 
@@ -103,6 +117,13 @@ const EmojiSelector: React.FC<IEmojiSelector> = ({
       style={styles.popper}
       {...attributes.popper}
     >
+      {expanded ? (
+        <Picker
+          set='twitter'
+          backgroundImageFn={() => require('emoji-datasource/img/twitter/sheets/32.png')}
+          onClick={(emoji: any) => onReact(emoji.native)}
+        />
+      ) : (
         <HStack
           className={clsx('z-[999] flex w-max max-w-[100vw] flex-wrap space-x-3 rounded-full bg-white px-3 py-2.5 shadow-lg focus:outline-none dark:bg-gray-900 dark:ring-2 dark:ring-primary-700')}
         >
@@ -114,7 +135,16 @@ const EmojiSelector: React.FC<IEmojiSelector> = ({
               tabIndex={visible ? 0 : -1}
             />
           ))}
+
+          {all && (
+            <IconButton
+              className='text-gray-600 hover:text-gray-600 dark:hover:text-white'
+              src={require('@tabler/icons/dots.svg')}
+              onClick={handleExpand}
+            />
+          )}
         </HStack>
+      )}
     </div>
   );
 };

app/soapbox/features/chats/components/chat-message-reaction-wrapper/chat-message-reaction-wrapper.tsx

@@ -41,6 +41,7 @@ function ChatMessageReactionWrapper(props: IChatMessageReactionWrapper) {
         referenceElement={referenceElement}
         onReact={handleSelect}
         onClose={() => setIsOpen(false)}
+        all={false}
       />
     </React.Fragment>
   );

app/soapbox/features/emoji/emoji-picker.ts

@@ -1,4 +1,6 @@
+// @ts-ignore no types
 import Emoji from 'emoji-mart/dist-es/components/emoji/emoji';
+// @ts-ignore no types
 import Picker from 'emoji-mart/dist-es/components/picker/picker';
 
 export {

jest.config.cjs

@@ -39,7 +39,7 @@ module.exports = {
   'transformIgnorePatterns': [
     // FIXME: react-sticky-box doesn't provide a CJS build, so transform it for now
     // https://github.com/codecks-io/react-sticky-box/issues/79
-    `/node_modules/(?!(react-sticky-box|blurhash|.+\\.(${ASSET_EXTS})$))`,
+    `/node_modules/(?!(react-sticky-box|blurhash|emoji-mart|.+\\.(${ASSET_EXTS})$))`,
     // Ignore node_modules, except static assets
     // `/node_modules/(?!.+\\.(${ASSET_EXTS})$)`,
   ],