emoji-picker-react 4.8.0 → 4.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/README.md +3 -0
  2. package/dist/config/config.d.ts +2 -0
  3. package/dist/config/mutableConfig.d.ts +2 -1
  4. package/dist/config/useConfig.d.ts +1 -0
  5. package/dist/emoji-picker-react.cjs.development.js +14 -2
  6. package/dist/emoji-picker-react.cjs.development.js.map +1 -1
  7. package/dist/emoji-picker-react.cjs.production.min.js +1 -1
  8. package/dist/emoji-picker-react.cjs.production.min.js.map +1 -1
  9. package/dist/emoji-picker-react.esm.js +14 -2
  10. package/dist/emoji-picker-react.esm.js.map +1 -1
  11. package/package.json +1 -1
  12. package/src/components/header/SkinTonePicker/SkinTonePicker.tsx +3 -1
  13. package/src/config/config.ts +2 -0
  14. package/src/config/mutableConfig.ts +8 -2
  15. package/src/config/useConfig.ts +7 -0
  16. package/src/index.tsx +2 -1
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "4.8.0",
2
+ "version": "4.9.0",
3
3
  "license": "MIT",
4
4
  "main": "dist/index.js",
5
5
  "typings": "dist/index.d.ts",
package/src/components/header/SkinTonePicker/SkinTonePicker.tsx CHANGED
@@ -4,7 +4,7 @@ import * as React from 'react';
4
4
 
5
5
  import { ClassNames } from '../../../DomUtils/classNames';
6
6
  import { stylesheet } from '../../../Stylesheet/stylesheet';
7
- import { useSkinTonesDisabledConfig } from '../../../config/useConfig';
7
+ import {useOnSkinToneChangeConfig, useSkinTonesDisabledConfig} from '../../../config/useConfig';
8
8
  import skinToneVariations from '../../../data/skinToneVariations';
9
9
  import { useCloseAllOpenToggles } from '../../../hooks/useCloseAllOpenToggles';
10
10
  import { useFocusSearchInput } from '../../../hooks/useFocus';
@@ -41,6 +41,7 @@ export function SkinTonePicker({
41
41
  const isDisabled = useSkinTonesDisabledConfig();
42
42
  const [isOpen, setIsOpen] = useSkinToneFanOpenState();
43
43
  const [activeSkinTone, setActiveSkinTone] = useActiveSkinToneState();
44
+ const onSkinToneChange = useOnSkinToneChangeConfig();
44
45
  const closeAllOpenToggles = useCloseAllOpenToggles();
45
46
  const focusSearchInput = useFocusSearchInput();
46
47
 
@@ -89,6 +90,7 @@ export function SkinTonePicker({
89
90
  onClick={() => {
90
91
  if (isOpen) {
91
92
  setActiveSkinTone(skinToneVariation);
93
+ onSkinToneChange(skinToneVariation);
92
94
  focusSearchInput();
93
95
  } else {
94
96
  setIsOpen(true);
package/src/config/config.ts CHANGED
@@ -138,6 +138,7 @@ type ConfigExternal = {
138
138
  previewConfig: Partial<PreviewConfig>;
139
139
  onEmojiClick: MouseDownEvent;
140
140
  onReactionClick: MouseDownEvent;
141
+ onSkinToneChange: OnSkinToneChange;
141
142
  } & Omit<PickerConfigInternal, 'previewConfig' | 'unicodeToHide'>;
142
143
 
143
144
  export type PickerConfig = Partial<ConfigExternal>;
@@ -145,3 +146,4 @@ export type PickerConfig = Partial<ConfigExternal>;
145
146
  export type PickerDimensions = string | number;
146
147
 
147
148
  export type MouseDownEvent = (emoji: EmojiClickData, event: MouseEvent) => void;
149
+ export type OnSkinToneChange = (emoji: SkinTones) => void;
package/src/config/mutableConfig.ts CHANGED
@@ -1,10 +1,11 @@
1
1
  import React from 'react';
2
2
 
3
- import { MouseDownEvent } from './config';
3
+ import {MouseDownEvent, OnSkinToneChange} from './config';
4
4
 
5
5
  export type MutableConfig = {
6
6
  onEmojiClick?: MouseDownEvent;
7
7
  onReactionClick?: MouseDownEvent;
8
+ onSkinToneChange?: OnSkinToneChange;
8
9
  };
9
10
 
10
11
  export const MutableConfigContext = React.createContext<
@@ -21,7 +22,8 @@ export function useDefineMutableConfig(
21
22
  ): React.MutableRefObject<MutableConfig> {
22
23
  const MutableConfigRef = React.useRef<MutableConfig>({
23
24
  onEmojiClick: config.onEmojiClick || emptyFunc,
24
- onReactionClick: config.onReactionClick || config.onEmojiClick
25
+ onReactionClick: config.onReactionClick || config.onEmojiClick,
26
+ onSkinToneChange: config.onSkinToneChange || emptyFunc
25
27
  });
26
28
 
27
29
  React.useEffect(() => {
@@ -30,6 +32,10 @@ export function useDefineMutableConfig(
30
32
  config.onReactionClick || config.onEmojiClick;
31
33
  }, [config.onEmojiClick, config.onReactionClick]);
32
34
 
35
+ React.useEffect(() => {
36
+ MutableConfigRef.current.onSkinToneChange = config.onSkinToneChange || emptyFunc;
37
+ }, [config.onSkinToneChange])
38
+
33
39
  return MutableConfigRef;
34
40
  }
35
41
 
package/src/config/useConfig.ts CHANGED
@@ -89,6 +89,13 @@ export function useOnEmojiClickConfig(
89
89
  return handler || (() => {});
90
90
  }
91
91
 
92
+ export function useOnSkinToneChangeConfig(
93
+ ): (skinTone: SkinTones) => void {
94
+ const { current } = useMutableConfig();
95
+
96
+ return current.onSkinToneChange || (() => {});
97
+ }
98
+
92
99
  export function usePreviewConfig(): PreviewConfig {
93
100
  const { previewConfig } = usePickerConfig();
94
101
  return previewConfig;
package/src/index.tsx CHANGED
@@ -25,7 +25,8 @@ export interface PickerProps extends PickerConfig {}
25
25
  export default function EmojiPicker(props: PickerProps) {
26
26
  const MutableConfigRef = useDefineMutableConfig({
27
27
  onEmojiClick: props.onEmojiClick,
28
- onReactionClick: props.onReactionClick
28
+ onReactionClick: props.onReactionClick,
29
+ onSkinToneChange: props.onSkinToneChange,
29
30
  });
30
31
 
31
32
  return (