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

package/src/hooks/useMouseDownHandlers.ts

@@ -0,0 +1,160 @@
+import { SkinTones } from './../types/exposedTypes';
+import { useEffect, useRef } from 'react';
+
+import { emojiFromElement, isEmojiElement } from '../DomUtils/selectors';
+import { useSetAnchoredEmojiRef } from '../components/context/ElementRefContext';
+import {
+  useActiveSkinToneState,
+  useDisallowClickRef,
+  useEmojiVariationPickerState
+} from '../components/context/PickerContext';
+import {
+  useEmojiStyleConfig,
+  useOnEmojiClickConfig
+} from '../config/useConfig';
+import { DataEmoji } from '../dataUtils/DataTypes';
+import {
+  activeVariationFromUnified,
+  emojiHasVariations,
+  emojiNames,
+  emojiUnified,
+  emojiUrlByUnified
+} from '../dataUtils/emojiSelectors';
+import { parseNativeEmoji } from '../dataUtils/parseNativeEmoji';
+import { setRecentlyUsed } from '../dataUtils/recentlyUsed';
+import { EmojiClickData, EmojiStyle } from '../types/exposedTypes';
+
+import { useCloseAllOpenToggles } from './useCloseAllOpenToggles';
+import { preloadEmoji } from './preloadEmoji';
+
+let mouseDownTimer: undefined | number;
+
+export function useMouseDownHandlers(
+  BodyRef: React.MutableRefObject<HTMLElement | null>
+) {
+  const preloading = useRef(false);
+  const setAnchoredEmojiRef = useSetAnchoredEmojiRef();
+  const disallowClickRef = useDisallowClickRef();
+  const [, setEmojiVariationPicker] = useEmojiVariationPickerState();
+  const { closeAllOpenToggles, dependencyArray } = useCloseAllOpenToggles();
+  const [activeSkinTone] = useActiveSkinToneState();
+  const onEmojiClick = useOnEmojiClickConfig();
+  const emojiStyle = useEmojiStyleConfig();
+
+  useEffect(() => {
+    if (!BodyRef.current) {
+      return;
+    }
+    const bodyRef = BodyRef.current;
+    bodyRef.addEventListener('click', onClick, {
+      passive: true
+    });
+
+    bodyRef.addEventListener('mousedown', onMouseDown, {
+      passive: true
+    });
+    bodyRef.addEventListener('mouseup', onMouseUp, {
+      passive: true
+    });
+
+    return () => {
+      bodyRef?.removeEventListener('click', onClick);
+      bodyRef?.removeEventListener('mousedown', onMouseDown);
+      bodyRef?.removeEventListener('mouseup', onMouseUp);
+    };
+  }, [BodyRef, ...dependencyArray]);
+
+  function onClick(event: MouseEvent) {
+    if (disallowClickRef.current) {
+      return;
+    }
+
+    closeAllOpenToggles();
+
+    const emoji = emojiFromEvent(event);
+
+    if (!emoji) {
+      return;
+    }
+
+    const unified = emojiUnified(emoji);
+
+    const skinToneToUse = activeVariationFromUnified(unified) || activeSkinTone;
+
+    setRecentlyUsed(emoji, skinToneToUse);
+    onEmojiClick(event, emojiClickOutput(emoji, skinToneToUse));
+  }
+
+  function onMouseDown(event: MouseEvent) {
+    if (mouseDownTimer) {
+      clearTimeout(mouseDownTimer);
+    }
+
+    const emoji = emojiFromEvent(event);
+
+    if (!emoji || !emojiHasVariations(emoji)) {
+      return;
+    }
+
+    preloading.current = true;
+
+    window?.setTimeout(() => {
+      if (preloading.current) {
+        preloadEmoji(emoji, emojiStyle);
+        preloading.current = false;
+      }
+    }, 50);
+
+    mouseDownTimer = window?.setTimeout(() => {
+      disallowClickRef.current = true;
+      mouseDownTimer = undefined;
+      closeAllOpenToggles();
+      setAnchoredEmojiRef(event.target as HTMLElement);
+      setEmojiVariationPicker(emoji);
+    }, 250);
+  }
+  function onMouseUp() {
+    preloading.current = false;
+
+    if (mouseDownTimer) {
+      clearTimeout(mouseDownTimer);
+      mouseDownTimer = undefined;
+    } else if (disallowClickRef.current) {
+      // The problem we're trying to overcome here
+      // is that the emoji has both mouseup and click events
+      // and when releasing a mouseup event
+      // the click gets triggered too
+      // So we're disallowing the click event for a short time
+
+      requestAnimationFrame(() => {
+        disallowClickRef.current = false;
+      });
+    }
+  }
+}
+
+function emojiFromEvent(event: MouseEvent): DataEmoji | undefined {
+  const target = event?.target as HTMLElement;
+  if (!isEmojiElement(target)) {
+    return;
+  }
+
+  return emojiFromElement(target);
+}
+
+function emojiClickOutput(
+  emoji: DataEmoji,
+  activeSkinTone: SkinTones
+): EmojiClickData {
+  const unified = emojiUnified(emoji, activeSkinTone);
+  return {
+    activeSkinTone,
+    emoji: parseNativeEmoji(unified),
+    getImageUrl(emojiStyle: EmojiStyle) {
+      return emojiUrlByUnified(emojiStyle, unified);
+    },
+    names: emojiNames(emoji),
+    unified,
+    unifiedWithoutSkinTone: emojiUnified(emoji)
+  };
+}

package/src/hooks/useOnScroll.ts

@@ -0,0 +1,28 @@
+import { useEffect } from 'react';
+
+import { ElementRef } from '../components/context/ElementRefContext';
+
+import { useCloseAllOpenToggles } from './useCloseAllOpenToggles';
+
+export function useOnScroll(BodyRef: ElementRef) {
+  const { closeAllOpenToggles, dependencyArray } = useCloseAllOpenToggles();
+
+  useEffect(() => {
+    const bodyRef = BodyRef.current;
+    if (!bodyRef) {
+      return;
+    }
+
+    bodyRef.addEventListener('scroll', onScroll, {
+      passive: true
+    });
+
+    function onScroll() {
+      closeAllOpenToggles();
+    }
+
+    return () => {
+      bodyRef?.removeEventListener('scroll', onScroll);
+    };
+  }, [...dependencyArray, BodyRef, closeAllOpenToggles]);
+}

package/src/index.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+
+import { Body } from './components/body/Body';
+import { ElementRefContextProvider } from './components/context/ElementRefContext';
+import { PickerConfigProvider } from './components/context/PickerConfigContext';
+import { Preview } from './components/footer/Preview';
+import { Header } from './components/header/Header';
+import PickerMain from './components/main/PickerMain';
+import { PickerConfig } from './config/config';
+import './EmojiPickerReact.css';
+export { EmojiStyle, SkinTones, Theme } from './types/exposedTypes';
+
+export interface Props extends PickerConfig {}
+
+export function EmojiPicker(props: Props) {
+  return (
+    <ElementRefContextProvider>
+      <PickerConfigProvider {...props}>
+        <PickerMain>
+          <Header />
+          <Body />
+          <Preview />
+        </PickerMain>
+      </PickerConfigProvider>
+    </ElementRefContextProvider>
+  );
+}

package/src/types/exposedTypes.ts

@@ -0,0 +1,31 @@
+export type EmojiClickData = {
+  activeSkinTone: SkinTones;
+  unified: string;
+  unifiedWithoutSkinTone: string;
+  emoji: string;
+  names: string[];
+  getImageUrl: (emojiStyle: EmojiStyle) => string;
+};
+
+export enum EmojiStyle {
+  NATIVE = 'native',
+  APPLE = 'apple',
+  TWITTER = 'twitter',
+  GOOGLE = 'google',
+  FACEBOOK = 'facebook'
+}
+
+export enum Theme {
+  DARK = 'dark',
+  LIGHT = 'light',
+  AUTO = 'auto'
+}
+
+export enum SkinTones {
+  NEUTRAL = 'neutral',
+  LIGHT = '1f3fb',
+  MEDIUM_LIGHT = '1f3fc',
+  MEDIUM = '1f3fd',
+  MEDIUM_DARK = '1f3fe',
+  DARK = '1f3ff'
+}

package/.babelrc

@@ -1,30 +0,0 @@
-{
-  "presets": [
-    "@babel/preset-react",
-    [
-      "@babel/preset-env",
-      {
-        "targets": {
-          "browsers": ["last 4 versions", "not ie <= 10"]
-        },
-        "modules": false
-      }
-    ]
-  ],
-  "env": {
-    "test": {
-      "presets": [
-        "@babel/preset-react",
-        [
-          "@babel/preset-env",
-          {
-            "targets": {
-              "node": "current"
-            }
-          }
-        ]
-      ]
-    }
-  },
-  "plugins": ["@babel/plugin-transform-runtime"]
-}

package/.eslintrc.js

@@ -1,37 +0,0 @@
-module.exports = {
-  env: {
-    es6: true,
-    jest: true,
-    node: true,
-    browser: true,
-  },
-  extends: [
-    'eslint:recommended',
-    'plugin:react/recommended',
-    'plugin:import/errors',
-    'plugin:import/warnings',
-  ],
-  parserOptions: {
-    ecmaVersion: 2020,
-    sourceType: 'module',
-  },
-  globals: {
-    DEFAULT_EMOJI_URL: true,
-  },
-  rules: {
-    'no-console': 2,
-    indent: 0,
-    quotes: 0,
-    semi: ['error', 'always'],
-    eqeqeq: ['error', 'always'],
-    'no-trailing-spaces': ['error', { ignoreComments: true }],
-    'consistent-this': 2,
-    'import/no-self-import': 2,
-    'import/no-internal-modules': 0,
-    'import/no-dynamic-require': 0,
-    'import/no-useless-path-segments': 2,
-    'import/order': 1,
-    'import/newline-after-import': 2,
-  },
-  ignorePatterns: ['node_modules', 'dist'],
-};

package/.github/workflows/npmpublish.yml

@@ -1,30 +0,0 @@
-name: Node.js Package
-
-on:
-  release:
-    types: [created]
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v1
-      - uses: actions/setup-node@v1
-        with:
-          node-version: 12
-      - run: npm ci
-      - run: npm run build
-
-  publish-npm:
-    needs: build
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v1
-      - uses: actions/setup-node@v1
-        with:
-          node-version: 12
-          registry-url: https://registry.npmjs.org/
-      - run: npm ci
-      - run: npm publish
-        env:
-          NODE_AUTH_TOKEN: ${{secrets.npm_token}}

package/.prettierignore

@@ -1,2 +0,0 @@
-dist/
-node_modules/

package/.storybook/addons.js

@@ -1,2 +0,0 @@
-import '@storybook/addon-actions/register';
-import '@storybook/addon-links/register';

package/.storybook/config.js

@@ -1,9 +0,0 @@
-import { configure } from '@storybook/react';
-
-// automatically import all files ending in *.stories.js
-const req = require.context('../stories', true, /\.stories\.js$/);
-function loadStories() {
-  req.keys().forEach(filename => req(filename));
-}
-
-configure(loadStories, module);

package/dist/index.js.LICENSE.txt

@@ -1,5 +0,0 @@
-/*!
-  Copyright (c) 2017 Jed Watson.
-  Licensed under the MIT License (MIT), see
-  http://jedwatson.github.io/classnames
-*/