emoji-picker-react 4.7.0 → 4.7.1
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.
- package/README.md +32 -27
- package/dist/config/config.d.ts +3 -1
- package/dist/config/mutableConfig.d.ts +3 -2
- package/dist/config/useConfig.d.ts +5 -1
- package/dist/emoji-picker-react.cjs.development.js +26 -17
- package/dist/emoji-picker-react.cjs.development.js.map +1 -1
- package/dist/emoji-picker-react.cjs.production.min.js +1 -1
- package/dist/emoji-picker-react.cjs.production.min.js.map +1 -1
- package/dist/emoji-picker-react.esm.js +26 -17
- package/dist/emoji-picker-react.esm.js.map +1 -1
- package/dist/hooks/useMouseDownHandlers.d.ts +2 -1
- package/package.json +1 -1
- package/src/components/Reactions/Reactions.tsx +2 -1
- package/src/components/body/Body.tsx +2 -1
- package/src/config/config.ts +4 -1
- package/src/config/mutableConfig.ts +5 -3
- package/src/config/useConfig.ts +15 -5
- package/src/hooks/useMouseDownHandlers.ts +13 -11
- package/src/index.tsx +2 -1
package/README.md
CHANGED
|
@@ -6,6 +6,8 @@
|
|
|
6
6
|
|
|
7
7
|
|
|
8
8
|
|
|
9
|
+
|
|
10
|
+
|
|
9
11
|
---
|
|
10
12
|
|
|
11
13
|
_If you enjoy using emoji-picker-react<br/>
|
|
@@ -62,30 +64,31 @@ function App() {
|
|
|
62
64
|
|
|
63
65
|
The following props are accepted by them picker:
|
|
64
66
|
|
|
65
|
-
| Prop | Type | Default | Description
|
|
66
|
-
| ---------------------- | ------------------------------------------------------ | ---------- |
|
|
67
|
-
| onEmojiClick | function | | Callback function that is called when an emoji is clicked. The function receives the emoji object as a parameter.
|
|
68
|
-
| autoFocusSearch | boolean | `true` | Controls the auto focus of the search input.
|
|
69
|
-
| Theme | string | `light` | Controls the theme of the picker. Possible values are `light`, `dark` and `auto`.
|
|
70
|
-
| emojiStyle | string | `apple` | Controls the emoji style. Possible values are `google`, `apple`, `facebook`, `twitter` and `native`.
|
|
71
|
-
| defaultSkinTone | string | `neutral` | Controls the default skin tone.
|
|
72
|
-
| lazyLoadEmojis | boolean | `false` | Controls whether the emojis are loaded lazily or not.
|
|
73
|
-
| previewConfig | object | `{}` | Controls the preview of the emoji. See below for more information.
|
|
74
|
-
| searchPlaceholder | string | `Search` | Controls the placeholder of the search input.
|
|
75
|
-
| suggestedEmojisMode | string | `frequent` | Controls the suggested emojis mode. Possible values are `frequent` and `recent`.
|
|
76
|
-
| skinTonesDisabled | boolean | `false` | Controls whether the skin tones are disabled or not.
|
|
77
|
-
| searchDisabled | boolean | `false` | Controls whether the search is disabled or not. When disabled, the skin tone picker will be shown in the preview component.
|
|
78
|
-
| skinTonePickerLocation | string | `SEARCH` | Controls the location of the skin tone picker. Possible values are `SEARCH` and `PREVIEW`.
|
|
79
|
-
| emojiVersion | `string` | - | Allows displaying emojis up to a certain version for compatibility.
|
|
80
|
-
| `className` | `string` | - | Adds a class name to the root element of the picker.
|
|
81
|
-
| `width` | `number`/`string` | `350` | Controls the width of the picker. You can provide a number that will be treated as pixel size, or your any accepted css width as string.
|
|
82
|
-
| `height` | `number`/`string` | `450` | Controls the height of the picker. You can provide a number that will be treated as pixel size, or your any accepted css height as string.
|
|
83
|
-
| `style` | `React.CSSProperties` | `{}` | Adds inline style to the root element of the picker.
|
|
84
|
-
| getEmojiUrl | `Function` | - | Allows to customize the emoji url and provide your own image host.
|
|
85
|
-
| categories | `Array` | - | Allows full config over ordering, naming and display of categories.
|
|
86
|
-
| customEmojis | `Array<{names: string[], imgUrl: string, id: string}>` | - | Allows adding custom emojis to the picker.
|
|
87
|
-
| reactionsDefaultOpen | `boolean` | `false` | Controls whether the reactions picker is on the initial mount instead of the main picker component.
|
|
88
|
-
| reactions | string[] | - | Controls the reactions to display in the reactions picker. Takes unified emoji ids
|
|
67
|
+
| Prop | Type | Default | Description |
|
|
68
|
+
| ---------------------- | ------------------------------------------------------ | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
69
|
+
| onEmojiClick | function | | Callback function that is called when an emoji is clicked. The function receives the emoji object as a parameter. |
|
|
70
|
+
| autoFocusSearch | boolean | `true` | Controls the auto focus of the search input. |
|
|
71
|
+
| Theme | string | `light` | Controls the theme of the picker. Possible values are `light`, `dark` and `auto`. |
|
|
72
|
+
| emojiStyle | string | `apple` | Controls the emoji style. Possible values are `google`, `apple`, `facebook`, `twitter` and `native`. |
|
|
73
|
+
| defaultSkinTone | string | `neutral` | Controls the default skin tone. |
|
|
74
|
+
| lazyLoadEmojis | boolean | `false` | Controls whether the emojis are loaded lazily or not. |
|
|
75
|
+
| previewConfig | object | `{}` | Controls the preview of the emoji. See below for more information. |
|
|
76
|
+
| searchPlaceholder | string | `Search` | Controls the placeholder of the search input. |
|
|
77
|
+
| suggestedEmojisMode | string | `frequent` | Controls the suggested emojis mode. Possible values are `frequent` and `recent`. |
|
|
78
|
+
| skinTonesDisabled | boolean | `false` | Controls whether the skin tones are disabled or not. |
|
|
79
|
+
| searchDisabled | boolean | `false` | Controls whether the search is disabled or not. When disabled, the skin tone picker will be shown in the preview component. |
|
|
80
|
+
| skinTonePickerLocation | string | `SEARCH` | Controls the location of the skin tone picker. Possible values are `SEARCH` and `PREVIEW`. |
|
|
81
|
+
| emojiVersion | `string` | - | Allows displaying emojis up to a certain version for compatibility. |
|
|
82
|
+
| `className` | `string` | - | Adds a class name to the root element of the picker. |
|
|
83
|
+
| `width` | `number`/`string` | `350` | Controls the width of the picker. You can provide a number that will be treated as pixel size, or your any accepted css width as string. |
|
|
84
|
+
| `height` | `number`/`string` | `450` | Controls the height of the picker. You can provide a number that will be treated as pixel size, or your any accepted css height as string. |
|
|
85
|
+
| `style` | `React.CSSProperties` | `{}` | Adds inline style to the root element of the picker. |
|
|
86
|
+
| getEmojiUrl | `Function` | - | Allows to customize the emoji url and provide your own image host. |
|
|
87
|
+
| categories | `Array` | - | Allows full config over ordering, naming and display of categories. |
|
|
88
|
+
| customEmojis | `Array<{names: string[], imgUrl: string, id: string}>` | - | Allows adding custom emojis to the picker. |
|
|
89
|
+
| reactionsDefaultOpen | `boolean` | `false` | Controls whether the reactions picker is on the initial mount instead of the main picker component. |
|
|
90
|
+
| reactions | string[] | - | Controls the reactions to display in the reactions picker. Takes unified emoji ids |
|
|
91
|
+
| onReactionClick | `Function` | - | Callback function that is called when a reaction is clicked. The function receives the emoji object as a parameter. If not passed, onEmojiClicked is used. |
|
|
89
92
|
|
|
90
93
|
## Full details
|
|
91
94
|
|
|
@@ -118,9 +121,11 @@ The following props are accepted by them picker:
|
|
|
118
121
|
import { EmojiStyle } from 'emoji-picker-react';
|
|
119
122
|
```
|
|
120
123
|
|
|
121
|
-
|
|
124
|
+
* `autoFocusSearch`: `boolean` - Whether to focus the search input on mount. Defaults to `true`.
|
|
122
125
|
|
|
123
|
-
|
|
126
|
+
* `lazyLoadEmojis`: `boolean` - Whether to lazy load the emojis. Defaults to `false`.
|
|
127
|
+
|
|
128
|
+
- `autoFocusSearch`: `boolean` - Whether to focus the search input on mount. Defaults to `true`.
|
|
124
129
|
|
|
125
130
|
- `lazyLoadEmojis`: `boolean` - Whether to lazy load the emojis. Defaults to `false`.
|
|
126
131
|
|
|
@@ -268,7 +273,7 @@ To customize the reactions, you should pass an array of unified emoji ids to the
|
|
|
268
273
|
The reactions picker uses the same event handlers, and the same css variables for customizations.
|
|
269
274
|
|
|
270
275
|
```jsx
|
|
271
|
-
<Picker reactionsDefaultOpen />
|
|
276
|
+
<Picker reactionsDefaultOpen={true} onReactionClick={handleReaction} />
|
|
272
277
|
```
|
|
273
278
|
|
|
274
279
|
# Customization
|
package/dist/config/config.d.ts
CHANGED
|
@@ -42,8 +42,10 @@ export declare type PreviewConfig = {
|
|
|
42
42
|
};
|
|
43
43
|
declare type ConfigExternal = {
|
|
44
44
|
previewConfig: Partial<PreviewConfig>;
|
|
45
|
-
onEmojiClick:
|
|
45
|
+
onEmojiClick: MouseDownEvent;
|
|
46
|
+
onReactionClick: MouseDownEvent;
|
|
46
47
|
} & Omit<PickerConfigInternal, 'previewConfig' | 'unicodeToHide'>;
|
|
47
48
|
export declare type PickerConfig = Partial<ConfigExternal>;
|
|
48
49
|
export declare type PickerDimensions = string | number;
|
|
50
|
+
export declare type MouseDownEvent = (emoji: EmojiClickData, event: MouseEvent) => void;
|
|
49
51
|
export {};
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { MouseDownEvent } from './config';
|
|
3
3
|
export declare type MutableConfig = {
|
|
4
|
-
onEmojiClick?:
|
|
4
|
+
onEmojiClick?: MouseDownEvent;
|
|
5
|
+
onReactionClick?: MouseDownEvent;
|
|
5
6
|
};
|
|
6
7
|
export declare const MutableConfigContext: React.Context<React.MutableRefObject<MutableConfig>>;
|
|
7
8
|
export declare function useMutableConfig(): React.MutableRefObject<MutableConfig>;
|
|
@@ -3,6 +3,10 @@ import { EmojiClickData, EmojiStyle, SkinTonePickerLocation, SkinTones, Suggesti
|
|
|
3
3
|
import { CategoriesConfig } from './categoryConfig';
|
|
4
4
|
import { PreviewConfig } from './config';
|
|
5
5
|
import { CustomEmoji } from './customEmojiConfig';
|
|
6
|
+
export declare enum MOUSE_EVENT_SOURCE {
|
|
7
|
+
REACTIONS = "reactions",
|
|
8
|
+
PICKER = "picker"
|
|
9
|
+
}
|
|
6
10
|
export declare function useSearchPlaceHolderConfig(): string;
|
|
7
11
|
export declare function useDefaultSkinToneConfig(): SkinTones;
|
|
8
12
|
export declare function useSkinTonesDisabledConfig(): boolean;
|
|
@@ -10,7 +14,7 @@ export declare function useEmojiStyleConfig(): EmojiStyle;
|
|
|
10
14
|
export declare function useAutoFocusSearchConfig(): boolean;
|
|
11
15
|
export declare function useCategoriesConfig(): CategoriesConfig;
|
|
12
16
|
export declare function useCustomEmojisConfig(): CustomEmoji[];
|
|
13
|
-
export declare function useOnEmojiClickConfig(): (emoji: EmojiClickData, event: MouseEvent) => void;
|
|
17
|
+
export declare function useOnEmojiClickConfig(mouseEventSource: MOUSE_EVENT_SOURCE): (emoji: EmojiClickData, event: MouseEvent) => void;
|
|
14
18
|
export declare function usePreviewConfig(): PreviewConfig;
|
|
15
19
|
export declare function useThemeConfig(): Theme;
|
|
16
20
|
export declare function useSuggestedEmojisModeConfig(): SuggestionMode;
|
|
@@ -16887,7 +16887,8 @@ function useMutableConfig() {
|
|
|
16887
16887
|
}
|
|
16888
16888
|
function useDefineMutableConfig(config) {
|
|
16889
16889
|
var MutableConfigRef = React__default.useRef({
|
|
16890
|
-
onEmojiClick: config.onEmojiClick || emptyFunc
|
|
16890
|
+
onEmojiClick: config.onEmojiClick || emptyFunc,
|
|
16891
|
+
onReactionClick: config.onReactionClick || config.onEmojiClick
|
|
16891
16892
|
});
|
|
16892
16893
|
React__default.useEffect(function () {
|
|
16893
16894
|
MutableConfigRef.current.onEmojiClick = config.onEmojiClick || emptyFunc;
|
|
@@ -16896,6 +16897,11 @@ function useDefineMutableConfig(config) {
|
|
|
16896
16897
|
}
|
|
16897
16898
|
function emptyFunc() {}
|
|
16898
16899
|
|
|
16900
|
+
var MOUSE_EVENT_SOURCE;
|
|
16901
|
+
(function (MOUSE_EVENT_SOURCE) {
|
|
16902
|
+
MOUSE_EVENT_SOURCE["REACTIONS"] = "reactions";
|
|
16903
|
+
MOUSE_EVENT_SOURCE["PICKER"] = "picker";
|
|
16904
|
+
})(MOUSE_EVENT_SOURCE || (MOUSE_EVENT_SOURCE = {}));
|
|
16899
16905
|
function useSearchPlaceHolderConfig() {
|
|
16900
16906
|
var _find;
|
|
16901
16907
|
var _usePickerConfig = usePickerConfig(),
|
|
@@ -16935,10 +16941,12 @@ function useCustomEmojisConfig() {
|
|
|
16935
16941
|
customEmojis = _usePickerConfig7.customEmojis;
|
|
16936
16942
|
return customEmojis;
|
|
16937
16943
|
}
|
|
16938
|
-
function useOnEmojiClickConfig() {
|
|
16944
|
+
function useOnEmojiClickConfig(mouseEventSource) {
|
|
16945
|
+
var _ref;
|
|
16939
16946
|
var _useMutableConfig = useMutableConfig(),
|
|
16940
16947
|
current = _useMutableConfig.current;
|
|
16941
|
-
|
|
16948
|
+
var handler = (_ref = mouseEventSource === MOUSE_EVENT_SOURCE.REACTIONS ? current.onReactionClick : current.onEmojiClick) != null ? _ref : current.onEmojiClick;
|
|
16949
|
+
return handler || function () {};
|
|
16942
16950
|
}
|
|
16943
16951
|
function usePreviewConfig() {
|
|
16944
16952
|
var _usePickerConfig8 = usePickerConfig(),
|
|
@@ -17689,7 +17697,7 @@ function useSetVariationPicker() {
|
|
|
17689
17697
|
};
|
|
17690
17698
|
}
|
|
17691
17699
|
|
|
17692
|
-
function useMouseDownHandlers(
|
|
17700
|
+
function useMouseDownHandlers(ContainerRef, mouseEventSource) {
|
|
17693
17701
|
var mouseDownTimerRef = React.useRef();
|
|
17694
17702
|
var setVariationPicker = useSetVariationPicker();
|
|
17695
17703
|
var disallowClickRef = useDisallowClickRef();
|
|
@@ -17698,7 +17706,7 @@ function useMouseDownHandlers(BodyRef) {
|
|
|
17698
17706
|
var closeAllOpenToggles = useCloseAllOpenToggles();
|
|
17699
17707
|
var _useActiveSkinToneSta = useActiveSkinToneState(),
|
|
17700
17708
|
activeSkinTone = _useActiveSkinToneSta[0];
|
|
17701
|
-
var onEmojiClick = useOnEmojiClickConfig();
|
|
17709
|
+
var onEmojiClick = useOnEmojiClickConfig(mouseEventSource);
|
|
17702
17710
|
var _useUpdateSuggested = useUpdateSuggested(),
|
|
17703
17711
|
updateSuggested = _useUpdateSuggested[1];
|
|
17704
17712
|
var getEmojiUrl = useGetEmojiUrlConfig();
|
|
@@ -17753,25 +17761,25 @@ function useMouseDownHandlers(BodyRef) {
|
|
|
17753
17761
|
}
|
|
17754
17762
|
}, [disallowClickRef]);
|
|
17755
17763
|
React.useEffect(function () {
|
|
17756
|
-
if (!
|
|
17764
|
+
if (!ContainerRef.current) {
|
|
17757
17765
|
return;
|
|
17758
17766
|
}
|
|
17759
|
-
var
|
|
17760
|
-
|
|
17767
|
+
var confainerRef = ContainerRef.current;
|
|
17768
|
+
confainerRef.addEventListener('click', onClick, {
|
|
17761
17769
|
passive: true
|
|
17762
17770
|
});
|
|
17763
|
-
|
|
17771
|
+
confainerRef.addEventListener('mousedown', onMouseDown, {
|
|
17764
17772
|
passive: true
|
|
17765
17773
|
});
|
|
17766
|
-
|
|
17774
|
+
confainerRef.addEventListener('mouseup', onMouseUp, {
|
|
17767
17775
|
passive: true
|
|
17768
17776
|
});
|
|
17769
17777
|
return function () {
|
|
17770
|
-
|
|
17771
|
-
|
|
17772
|
-
|
|
17778
|
+
confainerRef == null ? void 0 : confainerRef.removeEventListener('click', onClick);
|
|
17779
|
+
confainerRef == null ? void 0 : confainerRef.removeEventListener('mousedown', onMouseDown);
|
|
17780
|
+
confainerRef == null ? void 0 : confainerRef.removeEventListener('mouseup', onMouseUp);
|
|
17773
17781
|
};
|
|
17774
|
-
}, [
|
|
17782
|
+
}, [ContainerRef, onClick, onMouseDown, onMouseUp]);
|
|
17775
17783
|
}
|
|
17776
17784
|
function emojiFromEvent(event) {
|
|
17777
17785
|
var target = event == null ? void 0 : event.target;
|
|
@@ -18130,7 +18138,7 @@ function Reactions() {
|
|
|
18130
18138
|
reactionsOpen = _useReactionsModeStat[0];
|
|
18131
18139
|
var ReactionsRef = useReactionsRef();
|
|
18132
18140
|
var reactions = useReactionsConfig();
|
|
18133
|
-
useMouseDownHandlers(ReactionsRef);
|
|
18141
|
+
useMouseDownHandlers(ReactionsRef, MOUSE_EVENT_SOURCE.REACTIONS);
|
|
18134
18142
|
var emojiStyle = useEmojiStyleConfig();
|
|
18135
18143
|
if (!reactionsOpen) {
|
|
18136
18144
|
return null;
|
|
@@ -18886,7 +18894,7 @@ var styles$8 = /*#__PURE__*/stylesheet.create({
|
|
|
18886
18894
|
function Body() {
|
|
18887
18895
|
var BodyRef = useBodyRef();
|
|
18888
18896
|
useOnScroll(BodyRef);
|
|
18889
|
-
useMouseDownHandlers(BodyRef);
|
|
18897
|
+
useMouseDownHandlers(BodyRef, MOUSE_EVENT_SOURCE.PICKER);
|
|
18890
18898
|
useOnMouseMove();
|
|
18891
18899
|
return React.createElement("div", {
|
|
18892
18900
|
className: flairup.cx(styles$9.body, commonInteractionStyles.hiddenOnReactions),
|
|
@@ -20458,7 +20466,8 @@ function ExportedEmoji(_ref) {
|
|
|
20458
20466
|
|
|
20459
20467
|
function EmojiPicker$1(props) {
|
|
20460
20468
|
var MutableConfigRef = useDefineMutableConfig({
|
|
20461
|
-
onEmojiClick: props.onEmojiClick
|
|
20469
|
+
onEmojiClick: props.onEmojiClick,
|
|
20470
|
+
onReactionClick: props.onReactionClick
|
|
20462
20471
|
});
|
|
20463
20472
|
return React.createElement(ErrorBoundary, null, React.createElement(MutableConfigContext.Provider, {
|
|
20464
20473
|
value: MutableConfigRef
|