emoji-picker-react 4.7.18 → 4.9.0

package/package.json

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

package/src/EmojiPickerReact.tsx

@@ -10,7 +10,7 @@ import { Preview } from './components/footer/Preview';
 import { Header } from './components/header/Header';
 import PickerMain from './components/main/PickerMain';
 import { compareConfig } from './config/compareConfig';
-import { useOpenConfig } from './config/useConfig';
+import { useAllowExpandReactions, useOpenConfig } from './config/useConfig';
 
 import { PickerProps } from './index';
 
@@ -27,14 +27,20 @@ function EmojiPicker(props: PickerProps) {
 
 function ContentControl() {
   const [reactionsDefaultOpen] = useReactionsModeState();
+  const allowExpandReactions = useAllowExpandReactions();
+
   const [renderAll, setRenderAll] = React.useState(!reactionsDefaultOpen);
   const isOpen = useOpenConfig();
 
   React.useEffect(() => {
+    if (reactionsDefaultOpen && !allowExpandReactions) {
+      return;
+    }
+
     if (!renderAll) {
       setRenderAll(true);
     }
-  }, [renderAll]);
+  }, [renderAll, allowExpandReactions, reactionsDefaultOpen]);
 
   if (!isOpen) {
     return null;
@@ -43,16 +49,24 @@ function ContentControl() {
   return (
     <PickerMain>
       <Reactions />
-      {renderAll ? (
-        <>
-          <Header />
-          <Body />
-          <Preview />
-        </>
-      ) : null}
+      <ExpandedPickerContent renderAll={renderAll} />
     </PickerMain>
   );
 }
 
+function ExpandedPickerContent({ renderAll }: { renderAll: boolean }) {
+  if (!renderAll) {
+    return null;
+  }
+
+  return (
+    <>
+      <Header />
+      <Body />
+      <Preview />
+    </>
+  );
+}
+
 // eslint-disable-next-line complexity
 export default React.memo(EmojiPicker, compareConfig);

package/src/components/Reactions/Reactions.tsx

@@ -5,7 +5,8 @@ import { commonStyles, stylesheet } from '../../Stylesheet/stylesheet';
 import {
   MOUSE_EVENT_SOURCE,
   useEmojiStyleConfig,
-  useReactionsConfig
+  useReactionsConfig,
+  useAllowExpandReactions
 } from '../../config/useConfig';
 import { DataEmoji } from '../../dataUtils/DataTypes';
 import { emojiByUnified } from '../../dataUtils/emojiSelectors';
@@ -22,6 +23,7 @@ export function Reactions() {
   const reactions = useReactionsConfig();
   useMouseDownHandlers(ReactionsRef, MOUSE_EVENT_SOURCE.REACTIONS);
   const emojiStyle = useEmojiStyleConfig();
+  const allowExpandReactions = useAllowExpandReactions();
 
   if (!reactionsOpen) {
     return null;
@@ -44,9 +46,11 @@ export function Reactions() {
           />
         </li>
       ))}
-      <li>
-        <BtnPlus />
-      </li>
+      {allowExpandReactions ? (
+        <li>
+          <BtnPlus />
+        </li>
+      ) : null}
     </ul>
   );
 }

package/src/components/context/PickerConfigContext.tsx

@@ -57,7 +57,8 @@ export function useSetConfig(config: PickerConfig) {
     config.height,
     config.width,
     config.searchDisabled,
-    config.skinTonePickerLocation
+    config.skinTonePickerLocation,
+    config.allowExpandReactions
   ]);
 
   return mergedConfig;

package/src/components/header/SkinTonePicker/SkinTonePicker.tsx

@@ -4,7 +4,7 @@ import * as React from 'react';
 
 import { ClassNames } from '../../../DomUtils/classNames';
 import { stylesheet } from '../../../Stylesheet/stylesheet';
-import { useSkinTonesDisabledConfig } from '../../../config/useConfig';
+import {useOnSkinToneChangeConfig, useSkinTonesDisabledConfig} from '../../../config/useConfig';
 import skinToneVariations from '../../../data/skinToneVariations';
 import { useCloseAllOpenToggles } from '../../../hooks/useCloseAllOpenToggles';
 import { useFocusSearchInput } from '../../../hooks/useFocus';
@@ -41,6 +41,7 @@ export function SkinTonePicker({
   const isDisabled = useSkinTonesDisabledConfig();
   const [isOpen, setIsOpen] = useSkinToneFanOpenState();
   const [activeSkinTone, setActiveSkinTone] = useActiveSkinToneState();
+  const onSkinToneChange = useOnSkinToneChangeConfig();
   const closeAllOpenToggles = useCloseAllOpenToggles();
   const focusSearchInput = useFocusSearchInput();
 
@@ -89,6 +90,7 @@ export function SkinTonePicker({
               onClick={() => {
                 if (isOpen) {
                   setActiveSkinTone(skinToneVariation);
+                  onSkinToneChange(skinToneVariation);
                   focusSearchInput();
                 } else {
                   setIsOpen(true);

package/src/config/config.ts

@@ -89,7 +89,8 @@ export function basePickerConfig(): PickerConfigInternal {
     width: 350,
     reactionsDefaultOpen: false,
     reactions: DEFAULT_REACTIONS,
-    open: true
+    open: true,
+    allowExpandReactions: true
   };
 }
 
@@ -118,6 +119,7 @@ export type PickerConfigInternal = {
   reactionsDefaultOpen: boolean;
   reactions: string[];
   open: boolean;
+  allowExpandReactions: boolean;
 };
 
 export type PreviewConfig = {
@@ -136,6 +138,7 @@ type ConfigExternal = {
   previewConfig: Partial<PreviewConfig>;
   onEmojiClick: MouseDownEvent;
   onReactionClick: MouseDownEvent;
+  onSkinToneChange: OnSkinToneChange;
 } & Omit<PickerConfigInternal, 'previewConfig' | 'unicodeToHide'>;
 
 export type PickerConfig = Partial<ConfigExternal>;
@@ -143,3 +146,4 @@ export type PickerConfig = Partial<ConfigExternal>;
 export type PickerDimensions = string | number;
 
 export type MouseDownEvent = (emoji: EmojiClickData, event: MouseEvent) => void;
+export type OnSkinToneChange = (emoji: SkinTones) => void;

package/src/config/mutableConfig.ts

@@ -1,10 +1,11 @@
 import React from 'react';
 
-import { MouseDownEvent } from './config';
+import {MouseDownEvent, OnSkinToneChange} from './config';
 
 export type MutableConfig = {
   onEmojiClick?: MouseDownEvent;
   onReactionClick?: MouseDownEvent;
+  onSkinToneChange?: OnSkinToneChange;
 };
 
 export const MutableConfigContext = React.createContext<
@@ -21,7 +22,8 @@ export function useDefineMutableConfig(
 ): React.MutableRefObject<MutableConfig> {
   const MutableConfigRef = React.useRef<MutableConfig>({
     onEmojiClick: config.onEmojiClick || emptyFunc,
-    onReactionClick: config.onReactionClick || config.onEmojiClick
+    onReactionClick: config.onReactionClick || config.onEmojiClick,
+    onSkinToneChange: config.onSkinToneChange || emptyFunc
   });
 
   React.useEffect(() => {
@@ -30,6 +32,10 @@ export function useDefineMutableConfig(
       config.onReactionClick || config.onEmojiClick;
   }, [config.onEmojiClick, config.onReactionClick]);
 
+  React.useEffect(() => {
+    MutableConfigRef.current.onSkinToneChange = config.onSkinToneChange || emptyFunc;
+  }, [config.onSkinToneChange])
+
   return MutableConfigRef;
 }
 

package/src/config/useConfig.ts

@@ -41,6 +41,11 @@ export function useDefaultSkinToneConfig(): SkinTones {
   return defaultSkinTone;
 }
 
+export function useAllowExpandReactions(): boolean {
+  const { allowExpandReactions } = usePickerConfig();
+  return allowExpandReactions;
+}
+
 export function useSkinTonesDisabledConfig(): boolean {
   const { skinTonesDisabled } = usePickerConfig();
   return skinTonesDisabled;
@@ -84,6 +89,13 @@ export function useOnEmojiClickConfig(
   return handler || (() => {});
 }
 
+export function useOnSkinToneChangeConfig(
+): (skinTone: SkinTones) => void {
+  const { current } = useMutableConfig();
+
+  return current.onSkinToneChange || (() => {});
+}
+
 export function usePreviewConfig(): PreviewConfig {
   const { previewConfig } = usePickerConfig();
   return previewConfig;

package/src/index.tsx

@@ -25,7 +25,8 @@ export interface PickerProps extends PickerConfig {}
 export default function EmojiPicker(props: PickerProps) {
   const MutableConfigRef = useDefineMutableConfig({
     onEmojiClick: props.onEmojiClick,
-    onReactionClick: props.onReactionClick
+    onReactionClick: props.onReactionClick,
+    onSkinToneChange: props.onSkinToneChange,
   });
 
   return (