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

package/dist/predicates/isFunction.d.ts

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

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.2.0",
+  "version": "4.4.0-rc.1",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/main/PickerMain.tsx

@@ -37,15 +37,15 @@ function PickerRootElement({ children }: RootProps) {
   useOnFocus();
 
   const style = {
-    height: `${height}px`,
-    width: `${width}px`,
+    height,
+    width
   };
 
   return (
     <aside
       className={clsx(ClassNames.emojiPicker, 'epr-main', {
         [ClassNames.searchActive]: searchModeActive,
-        'epr-dark-theme': theme === Theme.DARK,
+        'epr-dark-theme': theme === Theme.DARK
       })}
       ref={PickerMainRef}
       style={style}

package/src/config/config.ts

@@ -1,17 +1,18 @@
 import { GetEmojiUrl } from '../components/emoji/Emoji';
+import { DataEmoji } from '../dataUtils/DataTypes';
 import { emojiUrlByUnified } from '../dataUtils/emojiSelectors';
 import {
   EmojiClickData,
   EmojiStyle,
   SkinTones,
   SuggestionMode,
-  Theme,
+  Theme
 } from '../types/exposedTypes';
 
 import {
   CategoriesConfig,
   baseCategoriesConfig,
-  mergeCategoriesConfig,
+  mergeCategoriesConfig
 } from './categoryConfig';
 
 export function mergeConfig(
@@ -26,13 +27,13 @@ export function mergeConfig(
   const config = Object.assign(base, userConfig);
 
   const categories = mergeCategoriesConfig(userConfig.categories, {
-    suggestionMode: config.suggestedEmojisMode,
+    suggestionMode: config.suggestedEmojisMode
   });
 
   return {
     ...config,
     categories,
-    previewConfig,
+    previewConfig
   };
 }
 
@@ -55,13 +56,14 @@ export function basePickerConfig(): PickerConfigInternal {
       event: MouseEvent
     ) {},
     previewConfig: {
-      ...basePreviewConfig,
+      ...basePreviewConfig
     },
     searchPlaceHolder: 'Search',
+    showEmoji: undefined,
     skinTonesDisabled: false,
     suggestedEmojisMode: SuggestionMode.FREQUENT,
     theme: Theme.LIGHT,
-    width: 350,
+    width: 350
   };
 }
 
@@ -78,9 +80,10 @@ export type PickerConfigInternal = {
   suggestedEmojisMode: SuggestionMode;
   lazyLoadEmojis: boolean;
   previewConfig: PreviewConfig;
-  height: number;
-  width: number;
+  height: PickerDimensions;
+  width: PickerDimensions;
   getEmojiUrl: GetEmojiUrl;
+  showEmoji: undefined | ((emoji: DataEmoji) => boolean);
 };
 
 export type PreviewConfig = {
@@ -92,7 +95,7 @@ export type PreviewConfig = {
 const basePreviewConfig: PreviewConfig = {
   defaultEmoji: '1f60a',
   defaultCaption: "What's your mood?",
-  showPreview: true,
+  showPreview: true
 };
 
 type ConfigExternal = {
@@ -100,3 +103,5 @@ type ConfigExternal = {
 } & Omit<PickerConfigInternal, 'previewConfig'>;
 
 export type PickerConfig = Partial<ConfigExternal>;
+
+export type PickerDimensions = string | number;

package/src/config/useConfig.ts

@@ -1,15 +1,16 @@
 import { isSystemDarkTheme } from '../DomUtils/isDarkTheme';
 import { usePickerConfig } from '../components/context/PickerConfigContext';
+import { DataEmoji } from '../dataUtils/DataTypes';
 import {
   EmojiClickData,
   EmojiStyle,
   SkinTones,
   SuggestionMode,
-  Theme,
+  Theme
 } from '../types/exposedTypes';
 
 import { CategoriesConfig } from './categoryConfig';
-import { PreviewConfig } from './config';
+import { PickerDimensions, PreviewConfig } from './config';
 
 export function useSearchPlaceHolderConfig(): string {
   const { searchPlaceHolder } = usePickerConfig();
@@ -74,9 +75,12 @@ export function useLazyLoadEmojisConfig(): boolean {
   return lazyLoadEmojis;
 }
 
-export function usePickerSizeConfig(): { height: number; width: number } {
+export function usePickerSizeConfig(): {
+  height: PickerDimensions;
+  width: PickerDimensions;
+} {
   const { height, width } = usePickerConfig();
-  return { height, width };
+  return { height: getDimension(height), width: getDimension(width) };
 }
 
 export function useEmojiVersionConfig(): string | null {
@@ -91,3 +95,16 @@ export function useGetEmojiUrlConfig(): (
   const { getEmojiUrl } = usePickerConfig();
   return getEmojiUrl;
 }
+
+export function useShowEmojiConfig():
+  | undefined
+  | ((emoji: DataEmoji) => boolean) {
+  const { showEmoji } = usePickerConfig();
+  return showEmoji;
+}
+
+function getDimension(dimensionConfig: PickerDimensions): PickerDimensions {
+  return typeof dimensionConfig === 'number'
+    ? `${dimensionConfig}px`
+    : dimensionConfig;
+}

package/src/hooks/useDisallowedEmojis.ts

@@ -1,28 +1,41 @@
 import { useRef, useMemo } from 'react';
 
-import { useEmojiVersionConfig } from '../config/useConfig';
+import { useEmojiVersionConfig, useShowEmojiConfig } from '../config/useConfig';
 import { DataEmoji } from '../dataUtils/DataTypes';
 import { addedIn, allEmojis, emojiUnified } from '../dataUtils/emojiSelectors';
+import isFunction from '../predicates/isFunction';
 
 export function useDisallowedEmojis() {
   const DisallowedEmojisRef = useRef<Record<string, boolean>>({});
   const emojiVersionConfig = useEmojiVersionConfig();
+  const shouldShowEmoji = useShowEmojiConfig();
 
   return useMemo(() => {
     const emojiVersion = parseFloat(`${emojiVersionConfig}`);
 
-    if (!emojiVersionConfig || Number.isNaN(emojiVersion)) {
+    if (
+      (!emojiVersionConfig || Number.isNaN(emojiVersion)) &&
+      !shouldShowEmoji
+    ) {
       return DisallowedEmojisRef.current;
     }
 
     return allEmojis.reduce((disallowedEmojis, emoji) => {
+      if (isFunction(shouldShowEmoji) && !shouldShowEmoji(emoji)) {
+        disallowEmoji();
+      }
+
       if (addedInNewerVersion(emoji, emojiVersion)) {
-        disallowedEmojis[emojiUnified(emoji)] = true;
+        disallowEmoji();
       }
 
       return disallowedEmojis;
+
+      function disallowEmoji() {
+        disallowedEmojis[emojiUnified(emoji)] = true;
+      }
     }, DisallowedEmojisRef.current);
-  }, [emojiVersionConfig]);
+  }, [emojiVersionConfig, shouldShowEmoji]);
 }
 
 function addedInNewerVersion(

package/src/hooks/useFilter.ts

@@ -1,15 +1,16 @@
 import { scrollTo } from '../DomUtils/scrollTo';
 import {
   usePickerMainRef,
-  useSearchInputRef,
+  useSearchInputRef
 } from '../components/context/ElementRefContext';
 import {
   FilterState,
   useFilterRef,
-  useSearchTermState,
+  useSearchTermState
 } from '../components/context/PickerContext';
 import { DataEmoji } from '../dataUtils/DataTypes';
 import { emojiNames } from '../dataUtils/emojiSelectors';
+import isFunction from '../predicates/isFunction';
 
 import { useFocusSearchInput } from './useFocus';
 
@@ -19,7 +20,7 @@ function useSetFilterRef() {
   return function setFilter(
     setter: FilterState | ((current: FilterState) => FilterState)
   ): void {
-    if (typeof setter === 'function') {
+    if (isFunction(setter)) {
       return setFilter(setter(filterRef.current));
     }
 
@@ -67,7 +68,7 @@ export function useFilter() {
   return {
     onChange,
     searchTerm,
-    SearchInputRef,
+    SearchInputRef
   };
 
   function onChange(inputValue: string) {
@@ -87,9 +88,9 @@ export function useFilter() {
       return applySearch(nextValue);
     }
 
-    setFilterRef((current) =>
+    setFilterRef(current =>
       Object.assign(current, {
-        [nextValue]: filterEmojiObjectByKeyword(longestMatch, nextValue),
+        [nextValue]: filterEmojiObjectByKeyword(longestMatch, nextValue)
       })
     );
     applySearch(nextValue);
@@ -129,14 +130,14 @@ function filterEmojiObjectByKeyword(
 }
 
 function hasMatch(emoji: DataEmoji, keyword: string): boolean {
-  return emojiNames(emoji).some((name) => name.includes(keyword));
+  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);
+  return unified => isEmojiFilteredBySearchTerm(unified, filter, searchTerm);
 }
 
 function isEmojiFilteredBySearchTerm(
@@ -167,7 +168,7 @@ function findLongestMatch(
 
   const longestMatchingKey = Object.keys(dict)
     .sort((a, b) => b.length - a.length)
-    .find((key) => keyword.includes(key));
+    .find(key => keyword.includes(key));
 
   if (longestMatchingKey) {
     return dict[longestMatchingKey];

package/src/predicates/isFunction.ts

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