emoji-picker-react 4.4.0-rc.1 → 4.4.0

package/src/hooks/useKeyboardNavigation.ts

@@ -38,6 +38,10 @@ import {
 } from './useFocus';
 import useIsSearchMode from './useIsSearchMode';
 import useSetVariationPicker from './useSetVariationPicker';
+import {
+  useIsSkinToneInPreview,
+  useIsSkinToneInSearch
+} from './useShouldShowSkinTonePicker';
 
 enum KeyboardEvents {
   ArrowDown = 'ArrowDown',
@@ -120,6 +124,7 @@ function useSearchInputKeyboardEvents() {
   const SearchInputRef = useSearchInputRef();
   const [, setSkinToneFanOpenState] = useSkinToneFanOpenState();
   const goDownFromSearchInput = useGoDownFromSearchInput();
+  const isSkinToneInSearch = useIsSkinToneInSearch();
 
   const onKeyDown = useMemo(
     () =>
@@ -128,6 +133,9 @@ function useSearchInputKeyboardEvents() {
 
         switch (key) {
           case KeyboardEvents.ArrowRight:
+            if (!isSkinToneInSearch) {
+              return;
+            }
             event.preventDefault();
             setSkinToneFanOpenState(true);
             focusSkinTonePicker();
@@ -171,41 +179,76 @@ function useSkinTonePickerKeyboardEvents() {
   const SearchInputRef = useSearchInputRef();
   const goDownFromSearchInput = useGoDownFromSearchInput();
   const [isOpen, setIsOpen] = useSkinToneFanOpenState();
+  const isSkinToneInPreview = useIsSkinToneInPreview();
+  const isSkinToneInSearch = useIsSkinToneInSearch();
   const onType = useOnType();
 
   const onKeyDown = useMemo(
     () =>
+      // eslint-disable-next-line complexity
       function onKeyDown(event: KeyboardEvent) {
         const { key } = event;
 
-        switch (key) {
-          case KeyboardEvents.ArrowLeft:
-            event.preventDefault();
-            if (!isOpen) {
-              return focusSearchInput();
-            }
-            focusNextSkinTone(focusSearchInput);
-            break;
-          case KeyboardEvents.ArrowRight:
-            event.preventDefault();
-            if (!isOpen) {
-              return focusSearchInput();
-            }
-            focusPrevSkinTone();
-            break;
-          case KeyboardEvents.ArrowDown:
-            event.preventDefault();
-            if (isOpen) {
-              setIsOpen(false);
-            }
-            goDownFromSearchInput();
-            break;
-          default:
-            onType(event);
-            break;
+        if (isSkinToneInSearch) {
+          switch (key) {
+            case KeyboardEvents.ArrowLeft:
+              event.preventDefault();
+              if (!isOpen) {
+                return focusSearchInput();
+              }
+              focusNextSkinTone(focusSearchInput);
+              break;
+            case KeyboardEvents.ArrowRight:
+              event.preventDefault();
+              if (!isOpen) {
+                return focusSearchInput();
+              }
+              focusPrevSkinTone();
+              break;
+            case KeyboardEvents.ArrowDown:
+              event.preventDefault();
+              if (isOpen) {
+                setIsOpen(false);
+              }
+              goDownFromSearchInput();
+              break;
+            default:
+              onType(event);
+              break;
+          }
+        }
+
+        if (isSkinToneInPreview) {
+          switch (key) {
+            case KeyboardEvents.ArrowUp:
+              event.preventDefault();
+              if (!isOpen) {
+                return focusSearchInput();
+              }
+              focusNextSkinTone(focusSearchInput);
+              break;
+            case KeyboardEvents.ArrowDown:
+              event.preventDefault();
+              if (!isOpen) {
+                return focusSearchInput();
+              }
+              focusPrevSkinTone();
+              break;
+            default:
+              onType(event);
+              break;
+          }
         }
       },
-    [isOpen, focusSearchInput, setIsOpen, goDownFromSearchInput, onType]
+    [
+      isOpen,
+      focusSearchInput,
+      setIsOpen,
+      goDownFromSearchInput,
+      onType,
+      isSkinToneInPreview,
+      isSkinToneInSearch
+    ]
   );
 
   useEffect(() => {

package/src/hooks/useShouldShowSkinTonePicker.ts

@@ -0,0 +1,22 @@
+import { useSkinTonePickerLocationConfig } from '../config/useConfig';
+import { SkinTonePickerLocation } from '../types/exposedTypes';
+
+export function useShouldShowSkinTonePicker() {
+  const skinTonePickerLocationConfig = useSkinTonePickerLocationConfig();
+
+  return function shouldShowSkinTonePicker(location: SkinTonePickerLocation) {
+    return skinTonePickerLocationConfig === location;
+  };
+}
+
+export function useIsSkinToneInSearch() {
+  const skinTonePickerLocationConfig = useSkinTonePickerLocationConfig();
+
+  return skinTonePickerLocationConfig === SkinTonePickerLocation.SEARCH;
+}
+
+export function useIsSkinToneInPreview() {
+  const skinTonePickerLocationConfig = useSkinTonePickerLocationConfig();
+
+  return skinTonePickerLocationConfig === SkinTonePickerLocation.PREVIEW;
+}

package/src/types/exposedTypes.ts

@@ -9,7 +9,7 @@ export type EmojiClickData = {
 
 export enum SuggestionMode {
   RECENT = 'recent',
-  FREQUENT = 'frequent',
+  FREQUENT = 'frequent'
 }
 
 export enum EmojiStyle {
@@ -17,13 +17,13 @@ export enum EmojiStyle {
   APPLE = 'apple',
   TWITTER = 'twitter',
   GOOGLE = 'google',
-  FACEBOOK = 'facebook',
+  FACEBOOK = 'facebook'
 }
 
 export enum Theme {
   DARK = 'dark',
   LIGHT = 'light',
-  AUTO = 'auto',
+  AUTO = 'auto'
 }
 
 export enum SkinTones {
@@ -32,7 +32,7 @@ export enum SkinTones {
   MEDIUM_LIGHT = '1f3fc',
   MEDIUM = '1f3fd',
   MEDIUM_DARK = '1f3fe',
-  DARK = '1f3ff',
+  DARK = '1f3ff'
 }
 
 export enum Categories {
@@ -44,5 +44,10 @@ export enum Categories {
   ACTIVITIES = 'activities',
   OBJECTS = 'objects',
   SYMBOLS = 'symbols',
-  FLAGS = 'flags',
+  FLAGS = 'flags'
+}
+
+export enum SkinTonePickerLocation {
+  SEARCH = 'SEARCH',
+  PREVIEW = 'PREVIEW'
 }

package/dist/predicates/isFunction.d.ts

@@ -1 +0,0 @@
-export default function isFunction(value: any): value is (...args: any[]) => any;

package/src/predicates/isFunction.ts

@@ -1,5 +0,0 @@
-export default function isFunction(
-  value: any
-): value is (...args: any[]) => any {
-  return typeof value === 'function';
-}