emoji-picker-react 4.4.12 → 4.5.0

package/src/dataUtils/DataTypes.ts

@@ -1,11 +1,24 @@
 import emojis from '../data/emojis';
 
-export type DataEmoji = {
-  n: string[];
-  u: string;
-  v?: string[];
-  a: string;
-};
+export enum EmojiProperties {
+  name = 'n',
+  unified = 'u',
+  variations = 'v',
+  added_in = 'a',
+  imgUrl = 'imgUrl'
+}
+
+export interface DataEmoji extends WithName {
+  [EmojiProperties.unified]: string;
+  [EmojiProperties.variations]?: string[];
+  [EmojiProperties.added_in]: string;
+  [EmojiProperties.imgUrl]?: string;
+}
+
 export type DataEmojis = DataEmoji[];
 
 export type DataGroups = keyof typeof emojis;
+
+export type WithName = {
+  [EmojiProperties.name]: string[];
+};

package/src/dataUtils/alphaNumericEmojiIndex.ts

@@ -5,19 +5,24 @@ export const alphaNumericEmojiIndex: BaseIndex = {};
 
 setTimeout(() => {
   allEmojis.reduce((searchIndex, emoji) => {
-    const joinedNameString = emojiNames(emoji)
-      .flat()
-      .join('')
-      .replace(/[^a-zA-Z\d]/g, '')
-      .split('');
-
-    joinedNameString.forEach(char => {
-      searchIndex[char] = searchIndex[char] ?? {};
-
-      searchIndex[char][emojiUnified(emoji)] = emoji;
-    });
+    indexEmoji(emoji);
     return searchIndex;
   }, alphaNumericEmojiIndex as BaseIndex);
 });
 
 type BaseIndex = Record<string, Record<string, DataEmoji>>;
+
+export function indexEmoji(emoji: DataEmoji): void {
+  const joinedNameString = emojiNames(emoji)
+    .flat()
+    .join('')
+    .toLowerCase()
+    .replace(/[^a-zA-Z\d]/g, '')
+    .split('');
+
+  joinedNameString.forEach(char => {
+    alphaNumericEmojiIndex[char] = alphaNumericEmojiIndex[char] ?? {};
+
+    alphaNumericEmojiIndex[char][emojiUnified(emoji)] = emoji;
+  });
+}

package/src/dataUtils/emojiSelectors.ts

@@ -1,21 +1,16 @@
 import { Categories } from '../config/categoryConfig';
 import { cdnUrl } from '../config/cdnUrls';
+import { CustomEmoji } from '../config/customEmojiConfig';
 import emojis from '../data/emojis';
 import skinToneVariations, {
   skinTonesMapped
 } from '../data/skinToneVariations';
-import { EmojiStyle, SkinTones } from '../types/exposedTypes';  
+import { EmojiStyle, SkinTones } from '../types/exposedTypes';
 
-import { DataEmoji, DataEmojis } from './DataTypes';
+import { DataEmoji, DataEmojis, EmojiProperties, WithName } from './DataTypes';
+import { indexEmoji } from './alphaNumericEmojiIndex';
 
-enum EmojiProperties {
-  name = 'n',
-  unified = 'u',
-  variations = 'v',
-  added_in = 'a'
-}
-
-export function emojiNames(emoji: DataEmoji): string[] {
+export function emojiNames(emoji: WithName): string[] {
   return emoji[EmojiProperties.name] ?? [];
 }
 
@@ -23,7 +18,7 @@ export function addedIn(emoji: DataEmoji): number {
   return parseFloat(emoji[EmojiProperties.added_in]);
 }
 
-export function emojiName(emoji?: DataEmoji): string {
+export function emojiName(emoji?: WithName): string {
   if (!emoji) {
     return '';
   }
@@ -97,6 +92,30 @@ export function emojiByUnified(unified?: string): DataEmoji | undefined {
 
 export const allEmojis: DataEmojis = Object.values(emojis).flat();
 
+export function addCustomEmojis(customEmojis: CustomEmoji[]): void {
+  customEmojis.forEach(emoji => {
+    const emojiData = customToRegularEmoji(emoji);
+
+    if (allEmojisByUnified[emojiData[EmojiProperties.unified]]) {
+      return;
+    }
+
+    allEmojis.push(emojiData);
+    allEmojisByUnified[emojiData[EmojiProperties.unified]] = emojiData;
+    emojis[Categories.CUSTOM].push(emojiData as never);
+    indexEmoji(emojiData);
+  });
+}
+
+function customToRegularEmoji(emoji: CustomEmoji): DataEmoji {
+  return {
+    [EmojiProperties.name]: emoji.names.map(name => name.toLowerCase()),
+    [EmojiProperties.unified]: emoji.id.toLowerCase(),
+    [EmojiProperties.added_in]: '0',
+    [EmojiProperties.imgUrl]: emoji.imgUrl
+  };
+}
+
 const allEmojisByUnified: {
   [unified: string]: DataEmoji;
 } = {};

package/src/hooks/preloadEmoji.ts

@@ -1,4 +1,4 @@
-import { GetEmojiUrl } from '../components/emoji/Emoji';
+import { GetEmojiUrl } from '../components/emoji/BaseEmojiProps';
 import { DataEmoji } from '../dataUtils/DataTypes';
 import { emojiUnified, emojiVariations } from '../dataUtils/emojiSelectors';
 import { EmojiStyle } from '../types/exposedTypes';

package/src/hooks/useEmojiPreviewEvents.ts

@@ -42,7 +42,6 @@ export function useEmojiPreviewEvents(
     });
     bodyRef?.addEventListener('blur', onLeave, true);
 
-
     function onEnter(e: FocusEvent) {
       const button = buttonFromTarget(e.target as HTMLElement);
 
@@ -91,7 +90,6 @@ export function useEmojiPreviewEvents(
       }
     }
 
-
     return () => {
       bodyRef?.removeEventListener('mouseover', onMouseOver);
       bodyRef?.removeEventListener('mouseout', onLeave);

package/src/hooks/useMouseDownHandlers.ts

@@ -12,7 +12,6 @@ import {
   useEmojiVariationPickerState,
   useUpdateSuggested,
 } from '../components/context/PickerContext';
-import { GetEmojiUrl } from '../components/emoji/Emoji';
 import {
   useGetEmojiUrlConfig,
   useOnEmojiClickConfig,
@@ -30,6 +29,7 @@ import { EmojiClickData, EmojiStyle, SkinTones } from '../types/exposedTypes';
 
 import { useCloseAllOpenToggles } from './useCloseAllOpenToggles';
 import useSetVariationPicker from './useSetVariationPicker';
+import { GetEmojiUrl } from '../components/emoji/BaseEmojiProps';
 
 export function useMouseDownHandlers(
   BodyRef: React.MutableRefObject<NullableElement>

package/src/hooks/useShouldHideCustomEmojis.ts

@@ -0,0 +1,11 @@
+import { useCustomEmojisConfig } from '../config/useConfig';
+
+export function useShouldHideCustomEmojis() {
+  const customCategoryConfig = useCustomEmojisConfig();
+
+  if (!customCategoryConfig) {
+    return false;
+  }
+
+  return customCategoryConfig.length === 0;
+}

package/src/typeRefinements/typeRefinements.ts

@@ -0,0 +1,17 @@
+import {
+  Categories,
+  CategoryConfig,
+  CustomCategoryConfig
+} from '../config/categoryConfig';
+import { CustomEmoji } from '../config/customEmojiConfig';
+import { DataEmoji } from '../dataUtils/DataTypes';
+
+export function isCustomCategory(
+  category: CategoryConfig | CustomCategoryConfig
+): category is CustomCategoryConfig {
+  return category.category === Categories.CUSTOM;
+}
+
+export function isCustomEmoji(emoji: Partial<DataEmoji>): emoji is CustomEmoji {
+  return emoji.imgUrl !== undefined;
+}

package/src/types/exposedTypes.ts

@@ -37,6 +37,7 @@ export enum SkinTones {
 
 export enum Categories {
   SUGGESTED = 'suggested',
+  CUSTOM = 'custom',
   SMILEYS_PEOPLE = 'smileys_people',
   ANIMALS_NATURE = 'animals_nature',
   FOOD_DRINK = 'food_drink',