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/dist/index.js CHANGED
@@ -772,7 +772,7 @@ function removeHtmlExceptBr(inputDiv) {
772
772
 
773
773
  var stripped = temp.replace(/<[^>]+>/g, ''); // strip all html tags
774
774
 
775
- var _final = stripped.replace(/\[BR\]/gi, '<br>'); // replace placeholders with <br>
775
+ var _final = stripped.replace(/\[BR\]/gi, '</br>'); // replace placeholders with <br>
776
776
 
777
777
 
778
778
  return _final;
@@ -1054,13 +1054,13 @@ var TextInput = function TextInput(_ref, ref) {
1054
1054
 
1055
1055
  function handleKeyDown(event) {
1056
1056
  if (event.key === "Enter" && (event.shiftKey === true || event.ctrlKey === true) && props.shouldReturn) {
1057
- if (!event.shiftKey && event.ctrlKey && textInputRef.current) {
1058
- textInputRef.current.innerHTML = "".concat(textInputRef.current.innerHTML, "<br><br>");
1059
- console.log('asjda', textInputRef.current.innerHTML);
1057
+ event.preventDefault();
1058
+
1059
+ if (textInputRef.current) {
1060
+ textInputRef.current.innerHTML = "".concat(textInputRef.current.innerHTML, "</br></br>");
1060
1061
  moveCaretToEnd(textInputRef);
1062
+ return;
1061
1063
  }
1062
-
1063
- return;
1064
1064
  }
1065
1065
 
1066
1066
  if (event.key === "Enter") {
@@ -3985,6 +3985,7 @@ var EmojiPicker$1 = /*#__PURE__*/React.memo(EmojiPicker);
3985
3985
  * @property {(emoji: import("../types/types").EmojiMartItem) => void} handleSelectEmoji
3986
3986
  * @property {boolean} disableRecent
3987
3987
  * @property {import("emoji-mart").CustomEmoji[]=} customEmojis
3988
+ * @property {('above' | 'below')=} position
3988
3989
  */
3989
3990
 
3990
3991
  /**
@@ -3998,14 +3999,18 @@ function EmojiPickerContainer(_ref) {
3998
3999
  theme = _ref.theme,
3999
4000
  handleSelectEmoji = _ref.handleSelectEmoji,
4000
4001
  disableRecent = _ref.disableRecent,
4001
- customEmojis = _ref.customEmojis;
4002
+ customEmojis = _ref.customEmojis,
4003
+ position = _ref.position;
4002
4004
  return /*#__PURE__*/React__default["default"].createElement("div", {
4003
4005
  className: "react-emoji-picker--container"
4004
4006
  }, showPicker && /*#__PURE__*/React__default["default"].createElement("div", {
4005
4007
  className: "react-emoji-picker--wrapper",
4006
4008
  onClick: function onClick(evt) {
4007
4009
  return evt.stopPropagation();
4008
- }
4010
+ },
4011
+ style: position === 'below' ? {
4012
+ top: '40px'
4013
+ } : {}
4009
4014
  }, /*#__PURE__*/React__default["default"].createElement("div", {
4010
4015
  className: "react-emoji-picker"
4011
4016
  }, /*#__PURE__*/React__default["default"].createElement(EmojiPicker$1, {
@@ -4016,6 +4021,7 @@ function EmojiPickerContainer(_ref) {
4016
4021
  }))));
4017
4022
  }
4018
4023
 
4024
+ var EMOJI_PICKER_CONTAINER_HEIGHT = 435;
4019
4025
  /**
4020
4026
  * @typedef {import('../types/types').SanitizeFn} SanitizeFn
4021
4027
  */
@@ -4060,6 +4066,13 @@ var EmojiPickerWrapper = function EmojiPickerWrapper(props) {
4060
4066
  _useState4 = _slicedToArray(_useState3, 2),
4061
4067
  customButton = _useState4[0],
4062
4068
  setCustomButton = _useState4[1];
4069
+ /** @type {['above' | 'below' | undefined, React.Dispatch<React.SetStateAction<'above' | 'below' | undefined>>]} */
4070
+
4071
+
4072
+ var _useState5 = React.useState(),
4073
+ _useState6 = _slicedToArray(_useState5, 2),
4074
+ emojiPickerPosition = _useState6[0],
4075
+ setEmojiPickerPosition = _useState6[1];
4063
4076
 
4064
4077
  React.useEffect(function () {
4065
4078
  addSanitizeFn(replaceAllTextEmojiToString);
@@ -4097,9 +4110,30 @@ var EmojiPickerWrapper = function EmojiPickerWrapper(props) {
4097
4110
  function toggleShowPicker(event) {
4098
4111
  event.stopPropagation();
4099
4112
  event.preventDefault();
4113
+ setEmojiPickerPosition(calcTopPosition(event));
4100
4114
  setShowPicker(function (currentShowPicker) {
4101
4115
  return !currentShowPicker;
4102
4116
  });
4117
+ }
4118
+ /**
4119
+ *
4120
+ * @param {React.MouseEvent} event
4121
+ * @return {'above' | 'below'}
4122
+ */
4123
+
4124
+
4125
+ function calcTopPosition(event) {
4126
+ var btn = event.currentTarget;
4127
+ var btnRect = btn.getBoundingClientRect();
4128
+ var popoverHeight = EMOJI_PICKER_CONTAINER_HEIGHT; // Decide to display above or below based on available space
4129
+
4130
+ if (btnRect.top >= popoverHeight) {
4131
+ // Display above
4132
+ return 'above';
4133
+ } else {
4134
+ // Display below
4135
+ return 'below';
4136
+ }
4103
4137
  } // eslint-disable-next-line valid-jsdoc
4104
4138
 
4105
4139
  /**
@@ -4129,7 +4163,8 @@ var EmojiPickerWrapper = function EmojiPickerWrapper(props) {
4129
4163
  theme: theme,
4130
4164
  handleSelectEmoji: handleSelectEmoji,
4131
4165
  disableRecent: disableRecent,
4132
- customEmojis: customEmojis
4166
+ customEmojis: customEmojis,
4167
+ position: emojiPickerPosition
4133
4168
  }), /*#__PURE__*/React__default["default"].createElement(EmojiPickerButton, {
4134
4169
  showPicker: showPicker,
4135
4170
  toggleShowPicker: toggleShowPicker,
@@ -4139,7 +4174,8 @@ var EmojiPickerWrapper = function EmojiPickerWrapper(props) {
4139
4174
  theme: theme,
4140
4175
  handleSelectEmoji: handleSelectEmoji,
4141
4176
  disableRecent: disableRecent,
4142
- customEmojis: customEmojis
4177
+ customEmojis: customEmojis,
4178
+ position: emojiPickerPosition
4143
4179
  }), /*#__PURE__*/React__default["default"].createElement(EmojiPickerButton, {
4144
4180
  showPicker: showPicker,
4145
4181
  toggleShowPicker: toggleShowPicker