react-input-emoji 5.1.0 → 5.2.1
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +3 -1
- package/dist/index.es.js +46 -10
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +46 -10
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
@@ -46,7 +46,7 @@ export default function Example() {
|
|
46
46
|
## Props
|
47
47
|
|
48
48
|
| Prop | Type | Default | Description |
|
49
|
-
|
49
|
+
| -------------- | -------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------ |
|
50
50
|
| `value` | string | "" | The input value. |
|
51
51
|
| `onChange` | function | - | This function is called when the value of the input changes. The first argument is the current value. |
|
52
52
|
| `onResize` | function | - | This function is called when the width or the height of the input changes. The first argument is the current size value. |
|
@@ -62,6 +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. | |
|
66
|
+
| `buttonElement` | HTMLElement | - | An HTMLElement that, when clicked, triggers the emoji picker. If this prop is provided, the default emoji picker button is removed. |
|
65
67
|
|
66
68
|
## License
|
67
69
|
|
package/dist/index.es.js
CHANGED
@@ -764,7 +764,7 @@ function removeHtmlExceptBr(inputDiv) {
|
|
764
764
|
|
765
765
|
var stripped = temp.replace(/<[^>]+>/g, ''); // strip all html tags
|
766
766
|
|
767
|
-
var _final = stripped.replace(/\[BR\]/gi, '
|
767
|
+
var _final = stripped.replace(/\[BR\]/gi, '</br>'); // replace placeholders with <br>
|
768
768
|
|
769
769
|
|
770
770
|
return _final;
|
@@ -1046,13 +1046,13 @@ var TextInput = function TextInput(_ref, ref) {
|
|
1046
1046
|
|
1047
1047
|
function handleKeyDown(event) {
|
1048
1048
|
if (event.key === "Enter" && (event.shiftKey === true || event.ctrlKey === true) && props.shouldReturn) {
|
1049
|
-
|
1050
|
-
|
1051
|
-
|
1049
|
+
event.preventDefault();
|
1050
|
+
|
1051
|
+
if (textInputRef.current) {
|
1052
|
+
textInputRef.current.innerHTML = "".concat(textInputRef.current.innerHTML, "</br></br>");
|
1052
1053
|
moveCaretToEnd(textInputRef);
|
1054
|
+
return;
|
1053
1055
|
}
|
1054
|
-
|
1055
|
-
return;
|
1056
1056
|
}
|
1057
1057
|
|
1058
1058
|
if (event.key === "Enter") {
|
@@ -3977,6 +3977,7 @@ var EmojiPicker$1 = /*#__PURE__*/memo(EmojiPicker);
|
|
3977
3977
|
* @property {(emoji: import("../types/types").EmojiMartItem) => void} handleSelectEmoji
|
3978
3978
|
* @property {boolean} disableRecent
|
3979
3979
|
* @property {import("emoji-mart").CustomEmoji[]=} customEmojis
|
3980
|
+
* @property {('above' | 'below')=} position
|
3980
3981
|
*/
|
3981
3982
|
|
3982
3983
|
/**
|
@@ -3990,14 +3991,18 @@ function EmojiPickerContainer(_ref) {
|
|
3990
3991
|
theme = _ref.theme,
|
3991
3992
|
handleSelectEmoji = _ref.handleSelectEmoji,
|
3992
3993
|
disableRecent = _ref.disableRecent,
|
3993
|
-
customEmojis = _ref.customEmojis
|
3994
|
+
customEmojis = _ref.customEmojis,
|
3995
|
+
position = _ref.position;
|
3994
3996
|
return /*#__PURE__*/React.createElement("div", {
|
3995
3997
|
className: "react-emoji-picker--container"
|
3996
3998
|
}, showPicker && /*#__PURE__*/React.createElement("div", {
|
3997
3999
|
className: "react-emoji-picker--wrapper",
|
3998
4000
|
onClick: function onClick(evt) {
|
3999
4001
|
return evt.stopPropagation();
|
4000
|
-
}
|
4002
|
+
},
|
4003
|
+
style: position === 'below' ? {
|
4004
|
+
top: '40px'
|
4005
|
+
} : {}
|
4001
4006
|
}, /*#__PURE__*/React.createElement("div", {
|
4002
4007
|
className: "react-emoji-picker"
|
4003
4008
|
}, /*#__PURE__*/React.createElement(EmojiPicker$1, {
|
@@ -4008,6 +4013,7 @@ function EmojiPickerContainer(_ref) {
|
|
4008
4013
|
}))));
|
4009
4014
|
}
|
4010
4015
|
|
4016
|
+
var EMOJI_PICKER_CONTAINER_HEIGHT = 435;
|
4011
4017
|
/**
|
4012
4018
|
* @typedef {import('../types/types').SanitizeFn} SanitizeFn
|
4013
4019
|
*/
|
@@ -4052,6 +4058,13 @@ var EmojiPickerWrapper = function EmojiPickerWrapper(props) {
|
|
4052
4058
|
_useState4 = _slicedToArray(_useState3, 2),
|
4053
4059
|
customButton = _useState4[0],
|
4054
4060
|
setCustomButton = _useState4[1];
|
4061
|
+
/** @type {['above' | 'below' | undefined, React.Dispatch<React.SetStateAction<'above' | 'below' | undefined>>]} */
|
4062
|
+
|
4063
|
+
|
4064
|
+
var _useState5 = useState(),
|
4065
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
4066
|
+
emojiPickerPosition = _useState6[0],
|
4067
|
+
setEmojiPickerPosition = _useState6[1];
|
4055
4068
|
|
4056
4069
|
useEffect(function () {
|
4057
4070
|
addSanitizeFn(replaceAllTextEmojiToString);
|
@@ -4089,9 +4102,30 @@ var EmojiPickerWrapper = function EmojiPickerWrapper(props) {
|
|
4089
4102
|
function toggleShowPicker(event) {
|
4090
4103
|
event.stopPropagation();
|
4091
4104
|
event.preventDefault();
|
4105
|
+
setEmojiPickerPosition(calcTopPosition(event));
|
4092
4106
|
setShowPicker(function (currentShowPicker) {
|
4093
4107
|
return !currentShowPicker;
|
4094
4108
|
});
|
4109
|
+
}
|
4110
|
+
/**
|
4111
|
+
*
|
4112
|
+
* @param {React.MouseEvent} event
|
4113
|
+
* @return {'above' | 'below'}
|
4114
|
+
*/
|
4115
|
+
|
4116
|
+
|
4117
|
+
function calcTopPosition(event) {
|
4118
|
+
var btn = event.currentTarget;
|
4119
|
+
var btnRect = btn.getBoundingClientRect();
|
4120
|
+
var popoverHeight = EMOJI_PICKER_CONTAINER_HEIGHT; // Decide to display above or below based on available space
|
4121
|
+
|
4122
|
+
if (btnRect.top >= popoverHeight) {
|
4123
|
+
// Display above
|
4124
|
+
return 'above';
|
4125
|
+
} else {
|
4126
|
+
// Display below
|
4127
|
+
return 'below';
|
4128
|
+
}
|
4095
4129
|
} // eslint-disable-next-line valid-jsdoc
|
4096
4130
|
|
4097
4131
|
/**
|
@@ -4121,7 +4155,8 @@ var EmojiPickerWrapper = function EmojiPickerWrapper(props) {
|
|
4121
4155
|
theme: theme,
|
4122
4156
|
handleSelectEmoji: handleSelectEmoji,
|
4123
4157
|
disableRecent: disableRecent,
|
4124
|
-
customEmojis: customEmojis
|
4158
|
+
customEmojis: customEmojis,
|
4159
|
+
position: emojiPickerPosition
|
4125
4160
|
}), /*#__PURE__*/React.createElement(EmojiPickerButton, {
|
4126
4161
|
showPicker: showPicker,
|
4127
4162
|
toggleShowPicker: toggleShowPicker,
|
@@ -4131,7 +4166,8 @@ var EmojiPickerWrapper = function EmojiPickerWrapper(props) {
|
|
4131
4166
|
theme: theme,
|
4132
4167
|
handleSelectEmoji: handleSelectEmoji,
|
4133
4168
|
disableRecent: disableRecent,
|
4134
|
-
customEmojis: customEmojis
|
4169
|
+
customEmojis: customEmojis,
|
4170
|
+
position: emojiPickerPosition
|
4135
4171
|
}), /*#__PURE__*/React.createElement(EmojiPickerButton, {
|
4136
4172
|
showPicker: showPicker,
|
4137
4173
|
toggleShowPicker: toggleShowPicker
|