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

package/src/components/body/EmojiVariationPicker.css

@@ -0,0 +1,65 @@
+.EmojiPickerReact .epr-emoji-variation-picker {
+  position: absolute;
+  top: 0;
+  right: 5px;
+  left: 5px;
+  padding: 5px;
+  height: 0;
+  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
+  border-radius: 3px;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  top: -100%;
+  border: 1px solid var(--epr-picker-border-color);
+  height: var(--epr-emoji-variation-picker-height);
+  z-index: var(--epr-skin-variation-picker-z-index);
+  background: var(--epr-emoji-variation-picker-bg-color);
+}
+
+.EmojiPickerReact .epr-emoji-variation-picker.visible {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: all;
+}
+.EmojiPickerReact
+  .epr-emoji-variation-picker
+  .EmojiPickerReact
+  .epr-emoji-variation-picker
+  button.epr-emoji:hover {
+  background: none;
+}
+
+.EmojiPickerReact .epr-emoji-variation-picker .epr-emoji-pointer {
+  content: '';
+  position: absolute;
+  top: -10px;
+  width: 25px;
+  height: 15px;
+}
+
+.EmojiPickerReact .epr-emoji-variation-picker .epr-emoji-pointer {
+  background-image: svg-load(./svg/triangle.svg);
+  background-repeat: no-repeat;
+  background-position: 0 0;
+  background-size: 50px 15px;
+}
+
+.EmojiPickerReact.epr-dark-theme
+  .epr-emoji-variation-picker
+  .epr-emoji-pointer {
+  background-position: -25px 0;
+}
+
+.EmojiPickerReact .epr-emoji-variation-picker .epr-emoji-pointer {
+  top: 100%;
+  transform: translateX(-7px);
+}
+
+.EmojiPickerReact .epr-emoji-variation-picker .epr-emoji-pointer.pointing-up {
+  top: 0;
+  transform: rotate(180deg) translateY(100%) translateX(7px);
+}

package/src/components/body/EmojiVariationPicker.tsx

@@ -0,0 +1,154 @@
+import clsx from 'clsx';
+import * as React from 'react';
+
+import {
+  buttonFromEmoji,
+  elementHeight,
+  emojiTrueOffsetTop,
+  emojiTruOffsetLeft
+} from '../../DomUtils/selectors';
+import { useEmojiStyleConfig } from '../../config/useConfig';
+import { asEmoji } from '../../dataUtils/asEmoji';
+import {
+  emojiHasVariations,
+  emojiUnified,
+  emojiVariations
+} from '../../dataUtils/emojiSelectors';
+import {
+  useAnchoredEmojiRef,
+  useBodyRef,
+  useSetAnchoredEmojiRef
+} from '../context/ElementRefContext';
+import { useEmojiVariationPickerState } from '../context/PickerContext';
+import { Emoji } from '../emoji/Emoji';
+import './EmojiVariationPicker.css';
+
+enum Direction {
+  Up,
+  Down
+}
+
+export function EmojiVariationPicker() {
+  const VariationPickerRef = React.useRef<HTMLDivElement>(null);
+  const [emoji] = useEmojiVariationPickerState();
+  const emojiStyle = useEmojiStyleConfig();
+  const { getTop, getMenuDirection } = useVariationPickerTop(
+    VariationPickerRef
+  );
+  const setAnchoredEmojiRef = useSetAnchoredEmojiRef();
+  const getPointerStyle = usePointerStyle(VariationPickerRef);
+
+  const visible = emoji && emojiHasVariations(emoji);
+  let top, pointerStyle;
+
+  if (!visible) {
+    setAnchoredEmojiRef(null);
+  } else {
+    top = getTop();
+    pointerStyle = getPointerStyle();
+  }
+
+  const safeEmoji = asEmoji(emoji);
+
+  return (
+    <div
+      ref={VariationPickerRef}
+      className={clsx('epr-emoji-variation-picker', {
+        visible
+      })}
+      style={{ top }}
+    >
+      {visible
+        ? [emojiUnified(safeEmoji)]
+            .concat(emojiVariations(safeEmoji))
+            .slice(0, 6)
+            .map(unified => (
+              <Emoji
+                key={unified}
+                emoji={safeEmoji}
+                unified={unified}
+                emojiStyle={emojiStyle}
+                showVariations={false}
+              />
+            ))
+        : null}
+      <div
+        className={clsx('epr-emoji-pointer', {
+          'pointing-up': getMenuDirection() === Direction.Down
+        })}
+        style={pointerStyle}
+      />
+    </div>
+  );
+}
+
+function usePointerStyle(VariationPickerRef: React.RefObject<HTMLElement>) {
+  const AnchoredEmojiRef = useAnchoredEmojiRef();
+  return function getPointerStyle() {
+    const style: React.CSSProperties = {};
+    if (!VariationPickerRef.current) {
+      return style;
+    }
+
+    if (AnchoredEmojiRef.current) {
+      const button = buttonFromEmoji(AnchoredEmojiRef.current);
+
+      const offsetLeft = emojiTruOffsetLeft(button);
+
+      if (!button) {
+        return style;
+      }
+
+      // half of the button
+      style.left = offsetLeft + button?.clientWidth / 2 - 12;
+    }
+
+    return style;
+  };
+}
+
+function useVariationPickerTop(
+  VariationPickerRef: React.RefObject<HTMLElement>
+) {
+  const AnchoredEmojiRef = useAnchoredEmojiRef();
+  const BodyRef = useBodyRef();
+  let direction = Direction.Up;
+
+  return {
+    getMenuDirection,
+    getTop
+  };
+
+  function getMenuDirection() {
+    return direction;
+  }
+
+  function getTop() {
+    direction = Direction.Up;
+    let emojiOffsetTop = 0;
+
+    if (!VariationPickerRef.current) {
+      return 0;
+    }
+
+    const height = elementHeight(VariationPickerRef.current);
+
+    if (AnchoredEmojiRef.current) {
+      const bodyRef = BodyRef.current;
+      const button = buttonFromEmoji(AnchoredEmojiRef.current);
+
+      const buttonHeight = elementHeight(button);
+
+      emojiOffsetTop = emojiTrueOffsetTop(button);
+
+      const scrollTop = bodyRef?.scrollTop ?? 0;
+
+      if (scrollTop > emojiOffsetTop - height) {
+        direction = Direction.Down;
+        emojiOffsetTop += buttonHeight + height;
+      }
+    }
+
+    return emojiOffsetTop - height;
+  }
+}

package/src/components/body/RecentlyUsed.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react';
+
+import { CategoryConfig } from '../../config/categoryConfig';
+import { useEmojiStyleConfig } from '../../config/useConfig';
+import { emojiByUnified } from '../../dataUtils/emojiSelectors';
+import { getRecentlyUsed } from '../../dataUtils/recentlyUsed';
+import { useSearchTermState } from '../context/PickerContext';
+import { Emoji } from '../emoji/Emoji';
+
+import { EmojiCategory } from './EmojiCategory';
+
+type Props = Readonly<{
+  categoryConfig: CategoryConfig;
+}>;
+
+export function RecentlyUsed({ categoryConfig }: Props) {
+  const [searchTerm] = useSearchTermState();
+  const recentlyUsed = getRecentlyUsed();
+  const emojiStyle = useEmojiStyleConfig();
+
+  if (searchTerm) {
+    return null;
+  }
+
+  if (recentlyUsed.length === 0) {
+    return null;
+  }
+
+  return (
+    <EmojiCategory categoryConfig={categoryConfig}>
+      {recentlyUsed.map(recentlyUsedItem => {
+        const emoji = emojiByUnified(recentlyUsedItem.original);
+
+        if (!emoji) {
+          return null;
+        }
+
+        return (
+          <Emoji
+            showVariations={false}
+            unified={recentlyUsedItem.unified}
+            emojiStyle={emojiStyle}
+            emoji={emoji}
+            key={recentlyUsedItem.unified}
+          />
+        );
+      })}
+    </EmojiCategory>
+  );
+}

package/src/components/body/svg/triangle.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50px"
+	 height="15px" viewBox="0 0 50 15" enable-background="new 0 0 50 15" xml:space="preserve">
+<g id="Layer_1">
+</g>
+<g id="Layer_2">
+	<path fill="#FFFFFF" stroke="#E8E7E7" stroke-miterlimit="10" d="M1.86-0.43l9.83,11.53c0.59,0.69,1.56,0.69,2.14,0l9.83-11.53"/>
+	<path fill="#010202" stroke="#151617" stroke-miterlimit="10" d="M26.86-0.43l9.83,11.53c0.59,0.69,1.56,0.69,2.14,0l9.83-11.53"/>
+</g>
+</svg>

package/src/components/context/ElementRefContext.tsx

@@ -0,0 +1,61 @@
+import * as React from 'react';
+
+export function ElementRefContextProvider({
+  children
+}: {
+  children: React.ReactNode;
+}) {
+  const PickerMainRef = React.useRef<HTMLElement>(null);
+  const AnchoredEmojiRef = React.useRef<HTMLElement>(null);
+  const BodyRef = React.useRef<HTMLElement>(null);
+
+  return (
+    <ElementRefContext.Provider
+      value={{ PickerMainRef, AnchoredEmojiRef, BodyRef }}
+    >
+      {children}
+    </ElementRefContext.Provider>
+  );
+}
+
+export type ElementRef = React.MutableRefObject<HTMLElement | null>;
+
+type ElementRefs = {
+  PickerMainRef: ElementRef;
+  AnchoredEmojiRef: ElementRef;
+  BodyRef: React.MutableRefObject<HTMLElement | null>;
+};
+
+const ElementRefContext = React.createContext<ElementRefs>({
+  PickerMainRef: React.createRef(),
+  AnchoredEmojiRef: React.createRef(),
+  BodyRef: React.createRef()
+});
+
+type ElementRefKeys = keyof ElementRefs;
+
+export function useElementRef(key: ElementRefKeys) {
+  const { [key]: elementRef } = React.useContext(ElementRefContext);
+  return elementRef;
+}
+
+export function usePickerMainRef() {
+  return useElementRef('PickerMainRef');
+}
+
+export function useAnchoredEmojiRef() {
+  return useElementRef('AnchoredEmojiRef');
+}
+
+export function useSetAnchoredEmojiRef(): (target: null | HTMLElement) => void {
+  const AnchoredEmojiRef = useAnchoredEmojiRef();
+  return (target: null | HTMLElement) => {
+    AnchoredEmojiRef.current = target;
+  };
+}
+
+export function useBodyRef(): React.MutableRefObject<HTMLDivElement | null> {
+  return useElementRef(
+    'BodyRef'
+  ) as React.MutableRefObject<HTMLDivElement | null>;
+}

package/src/components/context/PickerConfigContext.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+
+import {
+  basePickerConfig,
+  mergeConfig,
+  PickerConfig,
+  PickerConfigInternal
+} from '../../config/config';
+
+type Props = PickerConfig &
+  Readonly<{
+    children: React.ReactNode;
+  }>;
+
+const ConfigContext = React.createContext<PickerConfigInternal>(
+  basePickerConfig()
+);
+
+export function PickerConfigProvider({ children, ...config }: Props) {
+  return (
+    <ConfigContext.Provider value={mergeConfig(config)}>
+      {children}
+    </ConfigContext.Provider>
+  );
+}
+
+export function usePickerConfig() {
+  return React.useContext(ConfigContext);
+}

package/src/components/context/PickerContext.tsx

@@ -0,0 +1,139 @@
+import * as React from 'react';
+import { useState } from 'react';
+import { useDefaultSkinToneConfig } from '../../config/useConfig';
+import { DataEmoji } from '../../dataUtils/DataTypes';
+import { scrollCategoryIntoView } from '../../DomUtils/scrollCategoryIntoView';
+import { FilterDict } from '../../hooks/useFilter';
+import { useMarkInitialLoad } from '../../hooks/useInitialLoad';
+import { SkinTones } from '../../types/exposedTypes';
+import { usePickerMainRef } from './ElementRefContext';
+
+export function PickerContextProvider({ children }: Props) {
+  const defaultSkinTone = useDefaultSkinToneConfig();
+  const filterRef = React.useRef<FilterState>({});
+  const disallowClickRef = React.useRef<boolean>(false);
+
+  const searchTerm = useState<string>('');
+  const skinToneFanOpenState = useState<boolean>(false);
+  const activeSkinTone = useState<SkinTones>(defaultSkinTone);
+  const activeCategoryState = useState<ActiveCategoryState>(null);
+  const emojisThatFailedToLoadState = useState<Set<string>>(new Set());
+  const emojiVariationPickerState = useState<DataEmoji | null>(null);
+  const [isPastInitialLoad, setIsPastInitialLoad] = useState(false);
+
+  useMarkInitialLoad(setIsPastInitialLoad);
+
+  return (
+    <PickerContext.Provider
+      value={{
+        filterRef,
+        searchTerm,
+        activeCategoryState,
+        activeSkinTone,
+        emojisThatFailedToLoadState,
+        isPastInitialLoad,
+        emojiVariationPickerState,
+        skinToneFanOpenState,
+        disallowClickRef
+      }}
+    >
+      {children}
+    </PickerContext.Provider>
+  );
+}
+
+type ReactState<T> = [T, React.Dispatch<React.SetStateAction<T>>];
+
+const PickerContext = React.createContext<{
+  searchTerm: ReactState<string>;
+  activeCategoryState: ReactState<ActiveCategoryState>;
+  activeSkinTone: ReactState<SkinTones>;
+  emojisThatFailedToLoadState: ReactState<Set<string>>;
+  isPastInitialLoad: boolean;
+  emojiVariationPickerState: ReactState<DataEmoji | null>;
+  skinToneFanOpenState: ReactState<boolean>;
+  filterRef: React.MutableRefObject<FilterState>;
+  disallowClickRef: React.MutableRefObject<boolean>;
+}>({
+  searchTerm: ['', () => {}],
+  activeCategoryState: [null, () => {}],
+  activeSkinTone: [SkinTones.NEUTRAL, () => {}],
+  emojisThatFailedToLoadState: [new Set(), () => {}],
+  isPastInitialLoad: true,
+  emojiVariationPickerState: [null, () => {}],
+  skinToneFanOpenState: [false, () => {}],
+  filterRef: { current: {} },
+  disallowClickRef: { current: false }
+});
+
+type Props = Readonly<{
+  children: React.ReactNode;
+}>;
+
+export function useFilterRef() {
+  const { filterRef } = React.useContext(PickerContext);
+  return filterRef;
+}
+
+export function useDisallowClickRef() {
+  const { disallowClickRef } = React.useContext(PickerContext);
+  return disallowClickRef;
+}
+
+export function useSearchTermState() {
+  const { searchTerm } = React.useContext(PickerContext);
+  return searchTerm;
+}
+
+export function useActiveCategoryState(): [
+  ActiveCategoryState,
+  (nextActive: string) => void,
+  (nextActive: string) => void
+] {
+  const { activeCategoryState } = React.useContext(PickerContext);
+  const PickerMainRef = usePickerMainRef();
+
+  const [activeCategory, setActiveCategory] = activeCategoryState;
+  return [activeCategory, setCategory, setActiveCategoryAndScroll];
+
+  function setCategory(category: string) {
+    setActiveCategory(category);
+  }
+
+  function setActiveCategoryAndScroll(category: string) {
+    setCategory(category);
+    scrollCategoryIntoView(PickerMainRef.current, category);
+  }
+}
+
+export function useActiveSkinToneState(): [
+  SkinTones,
+  (skinTone: SkinTones) => void
+] {
+  const { activeSkinTone } = React.useContext(PickerContext);
+  return activeSkinTone;
+}
+
+export function useEmojisThatFailedToLoadState() {
+  const { emojisThatFailedToLoadState } = React.useContext(PickerContext);
+  return emojisThatFailedToLoadState;
+}
+
+export function useIsPastInitialLoad(): boolean {
+  const { isPastInitialLoad } = React.useContext(PickerContext);
+  return isPastInitialLoad;
+}
+
+export function useEmojiVariationPickerState() {
+  const { emojiVariationPickerState } = React.useContext(PickerContext);
+  return emojiVariationPickerState;
+}
+
+export function useSkinToneFanOpenState() {
+  const { skinToneFanOpenState } = React.useContext(PickerContext);
+  return skinToneFanOpenState;
+}
+
+export type FilterState = Record<string, FilterDict>;
+
+type ActiveCategoryState = null | string;

package/src/components/emoji/Emoji.css

@@ -0,0 +1,44 @@
+.EmojiPickerReact button.epr-emoji {
+  position: relative;
+  padding: var(--epr-emoji-padding);
+}
+
+.EmojiPickerReact button.epr-emoji.epr-emoji-has-variations:after {
+  content: '';
+  display: block;
+  width: 0;
+  height: 0;
+  right: -2px;
+  bottom: 0px;
+  position: absolute;
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  transform: rotate(135deg);
+  border-bottom: 4px solid var(--epr-emoji-variation-indicator-color);
+  z-index: var(--epr-emoji-variations-indictator-z-index);
+}
+
+.EmojiPickerReact button.epr-emoji > * {
+  height: var(--epr-emoji-size);
+  width: var(--epr-emoji-size);
+  font-size: var(--epr-emoji-size);
+}
+
+.EmojiPickerReact button.epr-emoji.epr-emoji-has-variations:hover:after {
+  border-bottom: 4px solid var(--epr-emoji-variation-indicator-color-hover);
+}
+
+.EmojiPickerReact button.epr-emoji > .epr-emoji-img {
+  font-size: 0;
+}
+
+.EmojiPickerReact button.epr-emoji > .epr-emoji-native {
+  font-family: 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji', Times,
+    Symbola, Aegyptus, Code2000, Code2001, Code2002, Musica, serif, LastResort;
+  line-height: 100%;
+}
+
+.EmojiPickerReact button.epr-emoji:hover {
+  border-radius: 8px;
+  background-color: var(--epr-emoji-hover-color);
+}

package/src/components/emoji/Emoji.tsx

@@ -0,0 +1,104 @@
+import clsx from 'clsx';
+import * as React from 'react';
+
+import { DataEmoji } from '../../dataUtils/DataTypes';
+import {
+  emojiHasVariations,
+  emojiName,
+  emojiUnified,
+  emojiUrlByUnified
+} from '../../dataUtils/emojiSelectors';
+import { parseNativeEmoji } from '../../dataUtils/parseNativeEmoji';
+import { EmojiStyle } from '../../types/exposedTypes';
+import { useEmojisThatFailedToLoadState } from '../context/PickerContext';
+import './Emoji.css';
+
+type Props = Readonly<{
+  hidden?: boolean;
+  emojiStyle: EmojiStyle;
+  emoji: DataEmoji;
+  unified: string;
+  showVariations?: boolean;
+  size?: number;
+}>;
+
+export function Emoji({
+  emoji,
+  unified,
+  hidden,
+  emojiStyle,
+  showVariations = true,
+  size
+}: Props) {
+  const hasVariations = emojiHasVariations(emoji);
+
+  const style = {} as React.CSSProperties;
+  if (size) {
+    style.width = style.height = style.fontSize = `${size}px`;
+  }
+
+  const base = {
+    style,
+    unified
+  };
+
+  return (
+    <button
+      className={clsx('epr-emoji', {
+        hidden,
+        'epr-emoji-has-variations': hasVariations && showVariations
+      })}
+      data-unified={unified}
+      data-original={emojiUnified(emoji)}
+    >
+      {emojiStyle === EmojiStyle.NATIVE ? (
+        <NativeEmoji {...base} />
+      ) : (
+        <EmojiImg {...base} emoji={emoji} emojiStyle={emojiStyle} />
+      )}
+    </button>
+  );
+}
+
+function NativeEmoji({
+  unified,
+  style
+}: {
+  unified: string;
+  style: React.CSSProperties;
+}) {
+  return (
+    <span className="epr-emoji-native" data-unified={unified} style={style}>
+      {parseNativeEmoji(unified)}
+    </span>
+  );
+}
+
+function EmojiImg({
+  emoji,
+  unified,
+  emojiStyle,
+  style
+}: {
+  emoji: DataEmoji;
+  unified: string;
+  emojiStyle: EmojiStyle;
+  style: React.CSSProperties;
+}) {
+  const [, setEmojisThatFailedToLoad] = useEmojisThatFailedToLoadState();
+
+  return (
+    <img
+      src={emojiUrlByUnified(emojiStyle, unified)}
+      alt={emojiName(emoji)}
+      className="epr-emoji-img"
+      loading="lazy"
+      onError={onError}
+      style={style}
+    />
+  );
+
+  function onError() {
+    setEmojisThatFailedToLoad(prev => new Set(prev).add(unified));
+  }
+}

package/src/components/footer/Preview.css

@@ -0,0 +1,14 @@
+.EmojiPickerReact .epr-preview {
+  padding: 10px;
+  z-index: 1;
+  align-items: center;
+  border-top: 1px solid var(--epr-preview-border-color);
+  height: var(--epr-preview-height);
+}
+
+.EmojiPickerReact .epr-preview .epr-preview-emoji-label {
+  text-transform: capitalize;
+  color: var(--epr-preview-text-color);
+  font-size: var(--epr-preview-text-size);
+  padding: var(--epr-preview-text-padding);
+}