Types, update styles

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

app/soapbox/features/emoji/components/emoji-picker-dropdown.tsx

@@ -15,7 +15,6 @@ import { RootState } from 'soapbox/store';
 import { buildCustomEmojis } from '../../emoji';
 import { EmojiPicker as EmojiPickerAsync } from '../../ui/util/async-components';
 
-import type { EmojiPick } from 'emoji-mart';
 import type { Emoji, CustomEmoji, NativeEmoji } from 'soapbox/features/emoji';
 
 let EmojiPicker: any; // load asynchronously
@@ -169,7 +168,7 @@ const EmojiPickerDropdown: React.FC<IEmojiPickerDropdown> = ({ onPickEmoji, cond
     }
   };
 
-  const handlePick = (emoji: EmojiPick) => {
+  const handlePick = (emoji: any) => {
     setVisible(false);
 
     let pickedEmoji: Emoji;
@@ -189,12 +188,12 @@ const EmojiPickerDropdown: React.FC<IEmojiPickerDropdown> = ({ onPickEmoji, cond
         custom: true,
         imageUrl: emoji.src,
       } as CustomEmoji;
+    }
 
-      dispatch(useEmoji(pickedEmoji)); // eslint-disable-line react-hooks/rules-of-hooks
+    dispatch(useEmoji(pickedEmoji)); // eslint-disable-line react-hooks/rules-of-hooks
 
-      if (onPickEmoji) {
-        onPickEmoji(pickedEmoji);
-      }
+    if (onPickEmoji) {
+      onPickEmoji(pickedEmoji);
     }
   };
 

app/soapbox/features/emoji/components/emoji-picker.tsx

@@ -1,4 +1,4 @@
-import { Picker as EmojiPicker, PickerProps } from 'emoji-mart';
+import { Picker as EmojiPicker } from 'emoji-mart';
 import React, { useRef, useEffect } from 'react';
 
 import { joinPublicPath } from 'soapbox/utils/static';
@@ -13,7 +13,7 @@ const getImageURL = (set: string, name: string) => {
   return joinPublicPath(`/packs/emoji/${name}.svg`);
 };
 
-function Picker(props: PickerProps) {
+function Picker(props: any) {
   const ref = useRef(null);
 
   useEffect(() => {

app/soapbox/features/emoji/data.ts

@@ -1,2 +1,52 @@
-export * from '@emoji-mart/data/sets/14/twitter.json';
-export { default } from '@emoji-mart/data/sets/14/twitter.json';
+import data from '@emoji-mart/data/sets/14/twitter.json';
+
+export interface NativeEmoji {
+  unified: string
+  native: string
+  x: number
+  y: number
+}
+
+export interface CustomEmoji {
+  src: string
+}
+
+export interface Emoji<T> {
+  id: string
+  name: string
+  keywords: string[]
+  skins: T[]
+  version?: number
+}
+
+export interface EmojiCategory {
+  id: string
+  emojis: string[]
+}
+
+export interface EmojiMap {
+  [s: string]: Emoji<NativeEmoji>
+}
+
+export interface EmojiAlias {
+  [s: string]: string
+}
+
+export interface EmojiSheet {
+  cols: number
+  rows: number
+}
+
+export interface EmojiData {
+  categories: EmojiCategory[]
+  emojis: EmojiMap
+  aliases: EmojiAlias
+  sheet: EmojiSheet
+}
+
+const emojiData = data as EmojiData;
+const { categories, emojis, aliases, sheet } = emojiData;
+
+export { categories, emojis, aliases, sheet };
+
+export default emojiData;

app/soapbox/features/emoji/index.ts

@@ -2,7 +2,7 @@ import split from 'graphemesplit';
 
 import unicodeMapping from './mapping';
 
-import type { Emoji as EmojiMart, CustomEmoji as EmojiMartCustom } from 'emoji-mart';
+import type { Emoji as EmojiMart, CustomEmoji as EmojiMartCustom } from 'soapbox/features/emoji/data';
 
 /*
  * TODO: Consolate emoji object types

app/soapbox/features/emoji/search.ts

@@ -5,6 +5,7 @@ import data from './data';
 import type { Emoji } from './index';
 // import type { Emoji as EmojiMart, CustomEmoji } from 'emoji-mart';
 
+// @ts-ignore
 const index = new Index({
   tokenize: 'full',
   optimize: true,
@@ -38,8 +39,7 @@ export const addCustomToPool = (customEmojis: any[]) => {
 // we can share an index by prefixing custom emojis with 'c' and native with 'n'
 const search = (str: string, { maxResults = 5, custom }: searchOptions = {}, custom_emojis?: any): Emoji[] => {
   return index.search(str, maxResults)
-    .flatMap(id => {
-    // @ts-ignore
+    .flatMap((id: string) => {
       if (id[0] === 'c') {
         const { shortcode, static_url } = custom_emojis.get((id as string).slice(1)).toJS();