react-input-emoji 5.1.1 → 5.3.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 +2 -1
- package/dist/index.es.js +68 -17
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +67 -16
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
@@ -62,7 +62,8 @@ export default function Example() {
|
|
62
62
|
| `borderColor` | string | "#EAEAEA" | The border color of the input container. |
|
63
63
|
| `fontSize` | number | 15 | The font size of the placeholder and input container. |
|
64
64
|
| `fontFamily` | string | "sans-serif" | The font family of the placeholder and input container. |
|
65
|
-
| `shouldReturn` | boolean | - | Allows the user to use the `Shift + Enter` or `Ctrl + Enter` keyboard shortcut to create a new line.
|
65
|
+
| `shouldReturn` | boolean | - | Allows the user to use the `Shift + Enter` or `Ctrl + Enter` keyboard shortcut to create a new line. | |
|
66
|
+
| `buttonElement` | HTMLElement | - | An HTMLElement that, when clicked, triggers the emoji picker. If this prop is provided, the default emoji picker button is removed. |
|
66
67
|
|
67
68
|
## License
|
68
69
|
|
package/dist/index.es.js
CHANGED
@@ -1,4 +1,4 @@
|
|
1
|
-
import React, { useRef, useCallback, useImperativeHandle, useEffect, forwardRef, useState,
|
1
|
+
import React, { useRef, useCallback, useImperativeHandle, useEffect, forwardRef, useState, memo, useMemo } from 'react';
|
2
2
|
import ReactDOM from 'react-dom';
|
3
3
|
import t from 'prop-types';
|
4
4
|
|
@@ -3925,6 +3925,7 @@ function $e5534fc185f7111e$export$2e2bcd8739ae039(props) {
|
|
3925
3925
|
* @property {function(import("../types/types").EmojiMartItem): void} onSelectEmoji
|
3926
3926
|
* @property {boolean} disableRecent
|
3927
3927
|
* @property {import("emoji-mart").CustomEmoji[]=} customEmojis
|
3928
|
+
* @property {import('../types/types').Languages=} language
|
3928
3929
|
*/
|
3929
3930
|
|
3930
3931
|
/**
|
@@ -3937,7 +3938,8 @@ function EmojiPicker(props) {
|
|
3937
3938
|
var theme = props.theme,
|
3938
3939
|
onSelectEmoji = props.onSelectEmoji,
|
3939
3940
|
disableRecent = props.disableRecent,
|
3940
|
-
customEmojis = props.customEmojis
|
3941
|
+
customEmojis = props.customEmojis,
|
3942
|
+
language = props.language;
|
3941
3943
|
/** @type {string[]} */
|
3942
3944
|
|
3943
3945
|
var categories = useMemo(function () {
|
@@ -3951,6 +3953,13 @@ function EmojiPicker(props) {
|
|
3951
3953
|
categoryies = [].concat(_toConsumableArray(categoryies), ["people", "nature", "foods", "activity", "places", "objects", "symbols", "flags"]);
|
3952
3954
|
return categoryies;
|
3953
3955
|
}, [disableRecent]);
|
3956
|
+
var i18n = useMemo(function () {
|
3957
|
+
if (!language) {
|
3958
|
+
return undefined;
|
3959
|
+
}
|
3960
|
+
|
3961
|
+
return require("@emoji-mart/data/i18n/".concat(language !== null && language !== void 0 ? language : 'en', ".json"));
|
3962
|
+
}, [language]);
|
3954
3963
|
return /*#__PURE__*/React.createElement($e5534fc185f7111e$export$2e2bcd8739ae039, {
|
3955
3964
|
data: undefined,
|
3956
3965
|
theme: theme,
|
@@ -3958,16 +3967,11 @@ function EmojiPicker(props) {
|
|
3958
3967
|
onEmojiSelect: onSelectEmoji,
|
3959
3968
|
custom: customEmojis,
|
3960
3969
|
categories: categories,
|
3961
|
-
set: "apple"
|
3970
|
+
set: "apple",
|
3971
|
+
i18n: i18n
|
3962
3972
|
});
|
3963
3973
|
}
|
3964
3974
|
|
3965
|
-
EmojiPicker.propTypes = {
|
3966
|
-
theme: t.oneOf(["light", "dark", "auto"]),
|
3967
|
-
onSelectEmoji: t.func,
|
3968
|
-
disableRecent: t.bool,
|
3969
|
-
customEmojis: t.array
|
3970
|
-
};
|
3971
3975
|
var EmojiPicker$1 = /*#__PURE__*/memo(EmojiPicker);
|
3972
3976
|
|
3973
3977
|
/**
|
@@ -3977,6 +3981,8 @@ var EmojiPicker$1 = /*#__PURE__*/memo(EmojiPicker);
|
|
3977
3981
|
* @property {(emoji: import("../types/types").EmojiMartItem) => void} handleSelectEmoji
|
3978
3982
|
* @property {boolean} disableRecent
|
3979
3983
|
* @property {import("emoji-mart").CustomEmoji[]=} customEmojis
|
3984
|
+
* @property {('above' | 'below')=} position
|
3985
|
+
* @property {import('../types/types').Languages=} language
|
3980
3986
|
*/
|
3981
3987
|
|
3982
3988
|
/**
|
@@ -3990,24 +3996,31 @@ function EmojiPickerContainer(_ref) {
|
|
3990
3996
|
theme = _ref.theme,
|
3991
3997
|
handleSelectEmoji = _ref.handleSelectEmoji,
|
3992
3998
|
disableRecent = _ref.disableRecent,
|
3993
|
-
customEmojis = _ref.customEmojis
|
3999
|
+
customEmojis = _ref.customEmojis,
|
4000
|
+
position = _ref.position,
|
4001
|
+
language = _ref.language;
|
3994
4002
|
return /*#__PURE__*/React.createElement("div", {
|
3995
4003
|
className: "react-emoji-picker--container"
|
3996
4004
|
}, showPicker && /*#__PURE__*/React.createElement("div", {
|
3997
4005
|
className: "react-emoji-picker--wrapper",
|
3998
4006
|
onClick: function onClick(evt) {
|
3999
4007
|
return evt.stopPropagation();
|
4000
|
-
}
|
4008
|
+
},
|
4009
|
+
style: position === 'below' ? {
|
4010
|
+
top: '40px'
|
4011
|
+
} : {}
|
4001
4012
|
}, /*#__PURE__*/React.createElement("div", {
|
4002
4013
|
className: "react-emoji-picker"
|
4003
4014
|
}, /*#__PURE__*/React.createElement(EmojiPicker$1, {
|
4004
4015
|
theme: theme,
|
4005
4016
|
onSelectEmoji: handleSelectEmoji,
|
4006
4017
|
disableRecent: disableRecent,
|
4007
|
-
customEmojis: customEmojis
|
4018
|
+
customEmojis: customEmojis,
|
4019
|
+
language: language
|
4008
4020
|
}))));
|
4009
4021
|
}
|
4010
4022
|
|
4023
|
+
var EMOJI_PICKER_CONTAINER_HEIGHT = 435;
|
4011
4024
|
/**
|
4012
4025
|
* @typedef {import('../types/types').SanitizeFn} SanitizeFn
|
4013
4026
|
*/
|
@@ -4026,6 +4039,7 @@ function EmojiPickerContainer(_ref) {
|
|
4026
4039
|
* @property {(fn: PolluteFn) => void} addPolluteFn
|
4027
4040
|
* @property {(html: string) => void} appendContent
|
4028
4041
|
* @property {HTMLDivElement=} buttonElement
|
4042
|
+
* @property {import('../types/types').Languages=} language
|
4029
4043
|
*/
|
4030
4044
|
// eslint-disable-next-line valid-jsdoc
|
4031
4045
|
|
@@ -4039,7 +4053,8 @@ var EmojiPickerWrapper = function EmojiPickerWrapper(props) {
|
|
4039
4053
|
addSanitizeFn = props.addSanitizeFn,
|
4040
4054
|
addPolluteFn = props.addPolluteFn,
|
4041
4055
|
appendContent = props.appendContent,
|
4042
|
-
buttonElement = props.buttonElement
|
4056
|
+
buttonElement = props.buttonElement,
|
4057
|
+
language = props.language;
|
4043
4058
|
|
4044
4059
|
var _useState = useState(false),
|
4045
4060
|
_useState2 = _slicedToArray(_useState, 2),
|
@@ -4052,6 +4067,13 @@ var EmojiPickerWrapper = function EmojiPickerWrapper(props) {
|
|
4052
4067
|
_useState4 = _slicedToArray(_useState3, 2),
|
4053
4068
|
customButton = _useState4[0],
|
4054
4069
|
setCustomButton = _useState4[1];
|
4070
|
+
/** @type {['above' | 'below' | undefined, React.Dispatch<React.SetStateAction<'above' | 'below' | undefined>>]} */
|
4071
|
+
|
4072
|
+
|
4073
|
+
var _useState5 = useState(),
|
4074
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
4075
|
+
emojiPickerPosition = _useState6[0],
|
4076
|
+
setEmojiPickerPosition = _useState6[1];
|
4055
4077
|
|
4056
4078
|
useEffect(function () {
|
4057
4079
|
addSanitizeFn(replaceAllTextEmojiToString);
|
@@ -4089,9 +4111,30 @@ var EmojiPickerWrapper = function EmojiPickerWrapper(props) {
|
|
4089
4111
|
function toggleShowPicker(event) {
|
4090
4112
|
event.stopPropagation();
|
4091
4113
|
event.preventDefault();
|
4114
|
+
setEmojiPickerPosition(calcTopPosition(event));
|
4092
4115
|
setShowPicker(function (currentShowPicker) {
|
4093
4116
|
return !currentShowPicker;
|
4094
4117
|
});
|
4118
|
+
}
|
4119
|
+
/**
|
4120
|
+
*
|
4121
|
+
* @param {React.MouseEvent} event
|
4122
|
+
* @return {'above' | 'below'}
|
4123
|
+
*/
|
4124
|
+
|
4125
|
+
|
4126
|
+
function calcTopPosition(event) {
|
4127
|
+
var btn = event.currentTarget;
|
4128
|
+
var btnRect = btn.getBoundingClientRect();
|
4129
|
+
var popoverHeight = EMOJI_PICKER_CONTAINER_HEIGHT; // Decide to display above or below based on available space
|
4130
|
+
|
4131
|
+
if (btnRect.top >= popoverHeight) {
|
4132
|
+
// Display above
|
4133
|
+
return 'above';
|
4134
|
+
} else {
|
4135
|
+
// Display below
|
4136
|
+
return 'below';
|
4137
|
+
}
|
4095
4138
|
} // eslint-disable-next-line valid-jsdoc
|
4096
4139
|
|
4097
4140
|
/**
|
@@ -4121,7 +4164,9 @@ var EmojiPickerWrapper = function EmojiPickerWrapper(props) {
|
|
4121
4164
|
theme: theme,
|
4122
4165
|
handleSelectEmoji: handleSelectEmoji,
|
4123
4166
|
disableRecent: disableRecent,
|
4124
|
-
customEmojis: customEmojis
|
4167
|
+
customEmojis: customEmojis,
|
4168
|
+
position: emojiPickerPosition,
|
4169
|
+
language: language
|
4125
4170
|
}), /*#__PURE__*/React.createElement(EmojiPickerButton, {
|
4126
4171
|
showPicker: showPicker,
|
4127
4172
|
toggleShowPicker: toggleShowPicker,
|
@@ -4131,7 +4176,9 @@ var EmojiPickerWrapper = function EmojiPickerWrapper(props) {
|
|
4131
4176
|
theme: theme,
|
4132
4177
|
handleSelectEmoji: handleSelectEmoji,
|
4133
4178
|
disableRecent: disableRecent,
|
4134
|
-
customEmojis: customEmojis
|
4179
|
+
customEmojis: customEmojis,
|
4180
|
+
position: emojiPickerPosition,
|
4181
|
+
language: language
|
4135
4182
|
}), /*#__PURE__*/React.createElement(EmojiPickerButton, {
|
4136
4183
|
showPicker: showPicker,
|
4137
4184
|
toggleShowPicker: toggleShowPicker
|
@@ -4791,6 +4838,7 @@ function usePollute() {
|
|
4791
4838
|
* @property {number} fontSize
|
4792
4839
|
* @property {string} fontFamily
|
4793
4840
|
* @property {{id: string; name: string; emojis: {id: string; name: string; keywords: string[], skins: {src: string}[]}}[]=} customEmojis
|
4841
|
+
* @property {import('./types/types').Languages=} language
|
4794
4842
|
* @property {(text: string) => Promise<MetionUser[]>=} searchMention
|
4795
4843
|
* @property {HTMLDivElement=} buttonElement
|
4796
4844
|
*/
|
@@ -4821,6 +4869,7 @@ function InputEmoji(props, ref) {
|
|
4821
4869
|
tabIndex = props.tabIndex,
|
4822
4870
|
value = props.value,
|
4823
4871
|
customEmojis = props.customEmojis,
|
4872
|
+
language = props.language,
|
4824
4873
|
searchMention = props.searchMention,
|
4825
4874
|
buttonElement = props.buttonElement,
|
4826
4875
|
borderRadius = props.borderRadius,
|
@@ -5029,7 +5078,8 @@ function InputEmoji(props, ref) {
|
|
5029
5078
|
addSanitizeFn: addSanitizeFn,
|
5030
5079
|
addPolluteFn: addPolluteFn,
|
5031
5080
|
appendContent: appendContent,
|
5032
|
-
buttonElement: buttonElement
|
5081
|
+
buttonElement: buttonElement,
|
5082
|
+
language: language
|
5033
5083
|
}));
|
5034
5084
|
}
|
5035
5085
|
|
@@ -5046,7 +5096,8 @@ InputEmojiWithRef.defaultProps = {
|
|
5046
5096
|
fontFamily: "sans-serif",
|
5047
5097
|
tabIndex: 0,
|
5048
5098
|
shouldReturn: false,
|
5049
|
-
customEmojis: []
|
5099
|
+
customEmojis: [],
|
5100
|
+
language: undefined
|
5050
5101
|
};
|
5051
5102
|
|
5052
5103
|
export { InputEmojiWithRef as default };
|