emoji-picker-react 4.5.2 → 4.5.3

package/dist/index.d.ts

@@ -1,9 +1,7 @@
-import * as React from 'react';
+/// <reference types="react" />
 import { PickerConfig } from './config/config';
 export { ExportedEmoji as Emoji } from './components/emoji/ExportedEmoji';
 export { EmojiStyle, SkinTones, Theme, Categories, EmojiClickData, SuggestionMode, SkinTonePickerLocation } from './types/exposedTypes';
-export interface Props extends PickerConfig {
+export interface PickerProps extends PickerConfig {
 }
-declare function EmojiPicker(props: Props): JSX.Element;
-declare const _default: React.MemoExoticComponent<typeof EmojiPicker>;
-export default _default;
+export default function EmojiPicker(props: PickerProps): JSX.Element;

package/package.json

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

package/src/EmojiPickerReact.tsx

@@ -6,12 +6,11 @@ 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 interface Props extends PickerConfig {}
+import './EmojiPickerReact.css';
+import { PickerProps } from './index';
 
-export default function EmojiPicker(props: Props) {
+function EmojiPicker(props: PickerProps) {
   return (
     <ElementRefContextProvider>
       <PickerConfigProvider {...props}>
@@ -24,3 +23,23 @@ export default function EmojiPicker(props: Props) {
     </ElementRefContextProvider>
   );
 }
+
+// eslint-disable-next-line complexity
+export default React.memo(EmojiPicker, (prev, next) => {
+  return (
+    prev.emojiVersion === next.emojiVersion &&
+    prev.searchPlaceHolder === next.searchPlaceHolder &&
+    prev.searchPlaceholder === next.searchPlaceholder &&
+    prev.defaultSkinTone === next.defaultSkinTone &&
+    prev.skinTonesDisabled === next.skinTonesDisabled &&
+    prev.autoFocusSearch === next.autoFocusSearch &&
+    prev.emojiStyle === next.emojiStyle &&
+    prev.theme === next.theme &&
+    prev.suggestedEmojisMode === next.suggestedEmojisMode &&
+    prev.lazyLoadEmojis === next.lazyLoadEmojis &&
+    prev.height === next.height &&
+    prev.width === next.width &&
+    prev.searchDisabled === next.searchDisabled &&
+    prev.skinTonePickerLocation === next.skinTonePickerLocation
+  );
+});

package/src/config/config.ts

@@ -63,14 +63,6 @@ export function basePickerConfig(): PickerConfigInternal {
     getEmojiUrl: emojiUrlByUnified,
     height: 450,
     lazyLoadEmojis: false,
-    onEmojiClick: function defaultOnClickHandler(
-      // @ts-ignore
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      emoji: EmojiClickData,
-      // @ts-ignore
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      event: MouseEvent
-    ) {},
     previewConfig: {
       ...basePreviewConfig
     },
@@ -95,7 +87,6 @@ export type PickerConfigInternal = {
   autoFocusSearch: boolean;
   emojiStyle: EmojiStyle;
   categories: CategoriesConfig;
-  onEmojiClick: (emoji: EmojiClickData, event: MouseEvent) => void;
   theme: Theme;
   suggestedEmojisMode: SuggestionMode;
   lazyLoadEmojis: boolean;
@@ -123,6 +114,7 @@ const basePreviewConfig: PreviewConfig = {
 
 type ConfigExternal = {
   previewConfig: Partial<PreviewConfig>;
+  onEmojiClick: (emoji: EmojiClickData, event: MouseEvent) => void;
 } & Omit<PickerConfigInternal, 'previewConfig' | 'unicodeToHide'>;
 
 export type PickerConfig = Partial<ConfigExternal>;

package/src/config/mutableConfig.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+
+import { EmojiClickData } from '../types/exposedTypes';
+
+export type MutableConfig = {
+  onEmojiClick?: (emoji: EmojiClickData, event: MouseEvent) => void;
+};
+
+export const MutableConfigContext = React.createContext<
+  React.MutableRefObject<MutableConfig>
+>({} as React.MutableRefObject<MutableConfig>);
+
+export function useMutableConfig(): React.MutableRefObject<MutableConfig> {
+  const mutableConfig = React.useContext(MutableConfigContext);
+  return mutableConfig;
+}
+
+export function useDefineMutableConfig(
+  config: MutableConfig
+): React.MutableRefObject<MutableConfig> {
+  const MutableConfigRef = React.useRef<MutableConfig>({
+    onEmojiClick: config.onEmojiClick || emptyFunc
+  });
+
+  React.useEffect(() => {
+    MutableConfigRef.current.onEmojiClick = config.onEmojiClick || emptyFunc;
+  }, [config.onEmojiClick]);
+
+  return MutableConfigRef;
+}
+
+function emptyFunc() {}

package/src/config/useConfig.ts

@@ -16,6 +16,7 @@ import {
   PreviewConfig
 } from './config';
 import { CustomEmoji } from './customEmojiConfig';
+import { useMutableConfig } from './mutableConfig';
 
 export function useSearchPlaceHolderConfig(): string {
   const { searchPlaceHolder, searchPlaceholder } = usePickerConfig();
@@ -60,8 +61,8 @@ export function useOnEmojiClickConfig(): (
   emoji: EmojiClickData,
   event: MouseEvent
 ) => void {
-  const { onEmojiClick } = usePickerConfig();
-  return onEmojiClick;
+  const { current } = useMutableConfig();
+  return current.onEmojiClick || (() => {});
 }
 
 export function usePreviewConfig(): PreviewConfig {

package/src/index.tsx

@@ -3,6 +3,10 @@ import * as React from 'react';
 import EmojiPickerReact from './EmojiPickerReact';
 import ErrorBoundary from './components/ErrorBoundary';
 import { PickerConfig } from './config/config';
+import {
+  MutableConfigContext,
+  useDefineMutableConfig
+} from './config/mutableConfig';
 
 export { ExportedEmoji as Emoji } from './components/emoji/ExportedEmoji';
 
@@ -16,32 +20,18 @@ export {
   SkinTonePickerLocation
 } from './types/exposedTypes';
 
-export interface Props extends PickerConfig {}
+export interface PickerProps extends PickerConfig {}
+
+export default function EmojiPicker(props: PickerProps) {
+  const MutableConfigRef = useDefineMutableConfig({
+    onEmojiClick: props.onEmojiClick
+  });
 
-function EmojiPicker(props: Props) {
   return (
     <ErrorBoundary>
-      <EmojiPickerReact {...props} />
+      <MutableConfigContext.Provider value={MutableConfigRef}>
+        <EmojiPickerReact {...props} />
+      </MutableConfigContext.Provider>
     </ErrorBoundary>
   );
 }
-
-// eslint-disable-next-line complexity
-export default React.memo(EmojiPicker, (prev, next) => {
-  return (
-    prev.emojiVersion === next.emojiVersion &&
-    prev.searchPlaceHolder === next.searchPlaceHolder &&
-    prev.searchPlaceholder === next.searchPlaceholder &&
-    prev.defaultSkinTone === next.defaultSkinTone &&
-    prev.skinTonesDisabled === next.skinTonesDisabled &&
-    prev.autoFocusSearch === next.autoFocusSearch &&
-    prev.emojiStyle === next.emojiStyle &&
-    prev.theme === next.theme &&
-    prev.suggestedEmojisMode === next.suggestedEmojisMode &&
-    prev.lazyLoadEmojis === next.lazyLoadEmojis &&
-    prev.height === next.height &&
-    prev.width === next.width &&
-    prev.searchDisabled === next.searchDisabled &&
-    prev.skinTonePickerLocation === next.skinTonePickerLocation
-  );
-});