emoji-picker-react 3.6.1 → 4.0.0-rc.3

package/src/data/groups.ts

@@ -0,0 +1,12 @@
+const groups = [
+  'smileys_people',
+  'animals_nature',
+  'food_drink',
+  'travel_places',
+  'activities',
+  'objects',
+  'symbols',
+  'flags'
+];
+
+export default groups;

package/src/data/skinToneVariations.ts

@@ -0,0 +1,12 @@
+import { SkinTones } from '../types/exposedTypes';
+
+const skinToneVariations = [
+  SkinTones.NEUTRAL,
+  SkinTones.LIGHT,
+  SkinTones.MEDIUM_LIGHT,
+  SkinTones.MEDIUM,
+  SkinTones.MEDIUM_DARK,
+  SkinTones.DARK
+];
+
+export default skinToneVariations;

package/src/dataUtils/DataTypes.ts

@@ -0,0 +1,10 @@
+import emojis from '../data/emojis';
+
+export type DataEmoji = {
+  n: string[];
+  u: string;
+  v?: string[];
+};
+export type DataEmojis = DataEmoji[];
+
+export type DataGroups = keyof typeof emojis;

package/src/dataUtils/alphaNumericEmojiIndex.ts

@@ -0,0 +1,23 @@
+import { DataEmoji } from './DataTypes';
+import { allEmojis, emojiNames, emojiUnified } from './emojiSelectors';
+
+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;
+    });
+    return searchIndex;
+  }, alphaNumericEmojiIndex as BaseIndex);
+});
+
+type BaseIndex = Record<string, Record<string, DataEmoji>>;

package/src/dataUtils/asEmoji.ts

@@ -0,0 +1,5 @@
+import { DataEmoji } from './DataTypes';
+
+export function asEmoji(emoji: DataEmoji | undefined | null): DataEmoji {
+  return emoji as DataEmoji;
+}

package/src/dataUtils/emojiSelectors.ts

@@ -0,0 +1,94 @@
+import { Categories } from './../config/categoryConfig';
+import { cdnUrl } from '../config/cdnUrls';
+import emojis from '../data/emojis';
+import { DataEmoji, DataEmojis } from './DataTypes';
+import skinToneVariations from '../data/skinToneVariations';
+import { EmojiStyle, SkinTones } from '../types/exposedTypes';
+
+enum EmojiProperties {
+  name = 'n',
+  unified = 'u',
+  variations = 'v'
+}
+
+export function emojiNames(emoji: DataEmoji): string[] {
+  return emoji[EmojiProperties.name] ?? [];
+}
+
+export function emojiName(emoji: DataEmoji): string {
+  return emojiNames(emoji)[0];
+}
+
+export function emojiUrl(
+  emojiStyle: EmojiStyle,
+  emoji: DataEmoji,
+  skinTone?: string
+): string {
+  return emojiUrlByUnified(emojiStyle, emojiUnified(emoji, skinTone));
+}
+
+export function emojiUnified(emoji: DataEmoji, skinTone?: string): string {
+  const unified = emoji[EmojiProperties.unified];
+
+  if (!skinTone || !emojiHasVariations(emoji)) {
+    return unified;
+  }
+
+  return emojiVariationUnified(emoji, skinTone) ?? unified;
+}
+
+export function emojisByCategory(category: Categories): DataEmojis {
+  // @ts-ignore
+  return emojis?.[category] ?? [];
+}
+
+export function emojiUrlByUnified(
+  emojiStyle: EmojiStyle,
+  unified: string
+): string {
+  return `${cdnUrl(emojiStyle)}${unified}.png`;
+}
+
+export function emojiVariations(emoji: DataEmoji): string[] {
+  return emoji[EmojiProperties.variations] ?? [];
+}
+
+export function emojiHasVariations(emoji: DataEmoji): boolean {
+  return emojiVariations(emoji).length > 0;
+}
+
+export function emojiVariationUnified(
+  emoji: DataEmoji,
+  skinTone?: string
+): string | undefined {
+  return skinTone
+    ? emojiVariations(emoji).find(variation => variation.includes(skinTone))
+    : emojiUnified(emoji);
+}
+
+export function emojiByUnified(unified?: string): DataEmoji | undefined {
+  if (!unified) {
+    return;
+  }
+  return allEmojisByUnified[unified];
+}
+
+export const allEmojis: DataEmojis = Object.values(emojis).flat();
+
+const allEmojisByUnified: {
+  [unified: string]: DataEmoji;
+} = {};
+
+window?.setTimeout(() => {
+  allEmojis.reduce((allEmojis, Emoji) => {
+    allEmojis[emojiUnified(Emoji)] = Emoji;
+    return allEmojis;
+  }, allEmojisByUnified);
+});
+
+export function activeVariationFromUnified(unified: string): SkinTones | null {
+  const [, suspectedSkinTone] = unified.split('-') as [string, SkinTones];
+  return skinToneVariations.includes(suspectedSkinTone)
+    ? suspectedSkinTone
+    : null;
+}

package/src/dataUtils/parseNativeEmoji.ts

@@ -0,0 +1,6 @@
+export function parseNativeEmoji(unified: string): string {
+  return unified
+    .split('-')
+    .map(hex => String.fromCodePoint(parseInt(hex, 16)))
+    .join('');
+}

package/src/dataUtils/recentlyUsed.ts

@@ -0,0 +1,61 @@
+import { SkinTones } from '../types/exposedTypes';
+import { DataEmoji } from './DataTypes';
+import { emojiUnified } from './emojiSelectors';
+
+const RECENTLY_USED_LS_KEY = 'epr_recentlyUsed';
+
+type RecentlyUsedItem = {
+  unified: string;
+  original: string;
+  count: number;
+};
+
+type RecentlyUsed = RecentlyUsedItem[];
+
+export function getRecentlyUsed(): RecentlyUsed {
+  if (!window?.localStorage) {
+    return [];
+  }
+  try {
+    return JSON.parse(
+      window?.localStorage.getItem(RECENTLY_USED_LS_KEY) ?? '[]'
+    );
+  } catch {
+    return [];
+  }
+}
+
+export function setRecentlyUsed(emoji: DataEmoji, skinTone: SkinTones) {
+  const recent = getRecentlyUsed();
+
+  const unified = emojiUnified(emoji, skinTone);
+  const originalUnified = emojiUnified(emoji);
+
+  let existing = recent.find(({ unified: u }) => u === unified);
+
+  let nextList;
+
+  if (existing) {
+    nextList = [existing].concat(recent.filter(i => i !== existing));
+  } else {
+    existing = {
+      unified,
+      original: originalUnified,
+      count: 0
+    };
+    nextList = [existing, ...recent];
+  }
+
+  existing.count++;
+
+  nextList.length = Math.min(nextList.length, 14);
+
+  try {
+    window?.localStorage.setItem(
+      RECENTLY_USED_LS_KEY,
+      JSON.stringify(nextList)
+    );
+  } catch {
+    // ignore
+  }
+}

package/src/hooks/preloadEmoji.ts

@@ -0,0 +1,29 @@
+import {
+  emojiUnified,
+  emojiUrlByUnified,
+  emojiVariations
+} from '../dataUtils/emojiSelectors';
+import { DataEmoji } from '../dataUtils/DataTypes';
+import { EmojiStyle } from '../types/exposedTypes';
+
+export function preloadEmoji(emoji: DataEmoji, emojiStyle: EmojiStyle): void {
+  const unified = emojiUnified(emoji);
+
+  if (preloadedEmojs.has(unified)) {
+    return;
+  }
+
+  emojiVariations(emoji).forEach(variation => {
+    const emojiUrl = emojiUrlByUnified(emojiStyle, variation);
+    preloadImage(emojiUrl);
+  });
+
+  preloadedEmojs.add(unified);
+}
+
+export const preloadedEmojs: Set<string> = new Set();
+
+function preloadImage(url: string): void {
+  const image = new Image();
+  image.src = url;
+}

package/src/hooks/useActiveCategoryScrollDetection.ts

@@ -0,0 +1,46 @@
+import { useEffect } from 'react';
+
+import { categoryNameFromDom } from '../DomUtils/categoryNameFromDom';
+import { ElementRef } from '../components/context/ElementRefContext';
+import { useActiveCategoryState } from '../components/context/PickerContext';
+
+export function useActiveCategoryScrollDetection(bodyRef: ElementRef) {
+  const [, setActiveCategory] = useActiveCategoryState();
+
+  useEffect(() => {
+    const visibleCategories = new Map();
+    const observer = new IntersectionObserver(
+      entries => {
+        const refCurrent = bodyRef.current;
+        if (!refCurrent) {
+          return;
+        }
+
+        for (const entry of entries) {
+          const id = categoryNameFromDom(entry.target);
+          visibleCategories.set(id, entry.intersectionRatio);
+        }
+
+        const ratios = Array.from(visibleCategories);
+        const lastCategory = ratios[ratios.length - 1];
+
+        if (lastCategory[1] == 1) {
+          return setActiveCategory(lastCategory[0]);
+        }
+
+        for (const [id, ratio] of ratios) {
+          if (ratio) {
+            setActiveCategory(id);
+            break;
+          }
+        }
+      },
+      {
+        threshold: [0, 1]
+      }
+    );
+    bodyRef.current?.querySelectorAll('.epr-emoji-category').forEach(el => {
+      observer.observe(el);
+    });
+  }, [bodyRef]);
+}

package/src/hooks/useCloseAllOpenToggles.ts

@@ -0,0 +1,26 @@
+import { useCallback } from 'react';
+
+import {
+  useEmojiVariationPickerState,
+  useSkinToneFanOpenState
+} from '../components/context/PickerContext';
+
+export function useCloseAllOpenToggles() {
+  const [variationPicker, setVariationPicker] = useEmojiVariationPickerState();
+  const [skinToneFanOpen, setSkinToneFanOpen] = useSkinToneFanOpenState();
+
+  const closeAllOpenToggles = useCallback(() => {
+    if (variationPicker) {
+      setVariationPicker(null);
+    }
+
+    if (skinToneFanOpen) {
+      setSkinToneFanOpen(false);
+    }
+  }, [[variationPicker, skinToneFanOpen]]);
+
+  return {
+    closeAllOpenToggles,
+    dependencyArray: [variationPicker, skinToneFanOpen]
+  };
+}

package/src/hooks/useEmojiElements.ts

@@ -0,0 +1,7 @@
+import { usePickerMainRef } from '../components/context/ElementRefContext';
+
+export function useEmojiElements() {
+  const PickerMainRef = usePickerMainRef();
+
+  return PickerMainRef.current?.querySelectorAll('button.epr-emoji');
+}

package/src/hooks/useEmojiMouseEnter.ts

@@ -0,0 +1,59 @@
+import { useEffect } from 'react';
+
+import {
+  buttonFromEmoji,
+  originalUnifiedFromEmojiElement,
+  unifiedFromEmojiElement
+} from '../DomUtils/selectors';
+import { useBodyRef } from '../components/context/ElementRefContext';
+import { HoveredEmoji } from '../components/footer/Preview';
+
+export function useEmojiMouseEnter(
+  allow: boolean,
+  setHoveredEmoji: React.Dispatch<React.SetStateAction<HoveredEmoji>>
+) {
+  const BodyRef = useBodyRef();
+
+  useEffect(() => {
+    if (!allow) {
+      return;
+    }
+    const bodyRef = BodyRef.current;
+
+    bodyRef?.addEventListener('mouseover', onMouseOver, {
+      passive: true
+    });
+
+    bodyRef?.addEventListener('mouseout', onMouseOut, {
+      passive: true
+    });
+
+    return () => {
+      bodyRef?.removeEventListener('mouseover', onMouseOver);
+      bodyRef?.removeEventListener('mouseout', onMouseOut);
+    };
+  }, [BodyRef.current]);
+
+  function onMouseOver(e: MouseEvent) {
+    const button = buttonFromEmoji(e.target as HTMLElement);
+
+    if (!button) {
+      return onMouseOut();
+    }
+    const unified = unifiedFromEmojiElement(button);
+    const originalUnified = originalUnifiedFromEmojiElement(button);
+
+    if (!unified || !originalUnified) {
+      return onMouseOut();
+    }
+
+    setHoveredEmoji({
+      unified,
+      originalUnified
+    });
+  }
+
+  function onMouseOut() {
+    setHoveredEmoji(null);
+  }
+}

package/src/hooks/useFilter.ts

@@ -0,0 +1,142 @@
+import { scrollTo } from '../DomUtils/scrollTo';
+import { usePickerMainRef } from '../components/context/ElementRefContext';
+import {
+  FilterState,
+  useFilterRef,
+  useSearchTermState
+} from '../components/context/PickerContext';
+import { DataEmoji } from '../dataUtils/DataTypes';
+import { alphaNumericEmojiIndex } from '../dataUtils/alphaNumericEmojiIndex';
+import { emojiNames } from '../dataUtils/emojiSelectors';
+
+function useSetFilterRef() {
+  const filterRef = useFilterRef();
+
+  return function setFilter(
+    setter: FilterState | ((current: FilterState) => FilterState)
+  ): void {
+    if (typeof setter === 'function') {
+      return setFilter(setter(filterRef.current));
+    }
+
+    filterRef.current = setter;
+  };
+}
+
+export function useFilter() {
+  const filterRef = useFilterRef();
+  const setFilterRef = useSetFilterRef();
+
+  const [searchTerm, setSearchTerm] = useSearchTermState();
+  const PickerMainRef = usePickerMainRef();
+
+  return {
+    onChange,
+    searchTerm,
+    clearSearch
+  };
+
+  function clearSearch() {
+    setSearchTerm('');
+  }
+
+  function onChange(nextValue: string) {
+    scrollTo(PickerMainRef.current, 0);
+    setSearchTerm(nextValue);
+    const filter = filterRef.current;
+
+    if (nextValue.length === 0) {
+      // setFilter(null);
+      return;
+    } else if (nextValue.length === 1) {
+      const index = alphaNumericEmojiIndex;
+      setFilterRef(current => ({
+        ...current,
+        [nextValue]: index[nextValue]
+      }));
+      return;
+    }
+
+    if (filter?.[nextValue]) {
+      return;
+    }
+
+    const longestMatch = findLongestMatch(nextValue, filter);
+
+    if (!longestMatch) {
+      // Can we even get here?
+      // If so, we need to search among all emojis
+      return;
+    }
+
+    setFilterRef(current => ({
+      ...current,
+      [nextValue]: filterEmojiObjectByKeyword(longestMatch, nextValue)
+    }));
+  }
+}
+
+function filterEmojiObjectByKeyword(
+  emojis: FilterDict,
+  keyword: string
+): FilterDict {
+  const filtered: FilterDict = {};
+
+  for (const unified in emojis) {
+    const emoji = emojis[unified];
+
+    if (hasMatch(emoji, keyword)) {
+      filtered[unified] = emoji;
+    }
+  }
+
+  return filtered;
+}
+
+function hasMatch(emoji: DataEmoji, keyword: string): boolean {
+  return emojiNames(emoji).some(name => name.includes(keyword));
+}
+
+export function useIsEmojiFiltered(): (unified: string) => boolean {
+  const { current: filter } = useFilterRef();
+  const [searchTerm] = useSearchTermState();
+
+  return unified => isEmojiFilteredBySearchTerm(unified, filter, searchTerm);
+}
+
+function isEmojiFilteredBySearchTerm(
+  unified: string,
+  filter: FilterState,
+  searchTerm: string
+): boolean {
+  if (!filter || !searchTerm) {
+    return false;
+  }
+
+  return !filter[searchTerm]?.[unified];
+}
+
+export type FilterDict = Record<string, DataEmoji>;
+
+function findLongestMatch(
+  keyword: string,
+  dict: Record<string, FilterDict> | null
+): FilterDict | null {
+  if (!dict) {
+    return null;
+  }
+
+  if (dict[keyword]) {
+    return dict[keyword];
+  }
+
+  const longestMatchingKey = Object.keys(dict)
+    .sort((a, b) => b.length - a.length)
+    .find(key => keyword.includes(key));
+
+  if (longestMatchingKey) {
+    return dict[longestMatchingKey];
+  }
+
+  return null;
+}

package/src/hooks/useInitialLoad.ts

@@ -0,0 +1,9 @@
+import { useEffect } from 'react';
+
+export function useMarkInitialLoad(
+  dispatch: React.Dispatch<React.SetStateAction<boolean>>
+) {
+  useEffect(() => {
+    dispatch(true);
+  }, [dispatch]);
+}

package/src/hooks/useIsEmojiHidden.ts

@@ -0,0 +1,16 @@
+import { useEmojisThatFailedToLoadState } from '../components/context/PickerContext';
+import { DataEmoji } from '../dataUtils/DataTypes';
+import { emojiUnified } from '../dataUtils/emojiSelectors';
+
+import { useIsEmojiFiltered } from './useFilter';
+
+export function useIsEmojiHidden(): (emoji: DataEmoji) => boolean {
+  const [emojisThatFailedToLoad] = useEmojisThatFailedToLoadState();
+  const isEmojiFiltered = useIsEmojiFiltered();
+
+  return (emoji: DataEmoji): boolean => {
+    const unified = emojiUnified(emoji);
+
+    return emojisThatFailedToLoad.has(unified) || isEmojiFiltered(unified);
+  };
+}

package/src/hooks/useIsSearchMode.ts

@@ -0,0 +1,7 @@
+import { useSearchTermState } from '../components/context/PickerContext';
+
+export default function useIsSearchMode(): boolean {
+  const [searchTerm] = useSearchTermState();
+
+  return !!searchTerm;
+}