react-input-emoji 5.1.1 → 5.2.1

Sign up to get free protection for your applications and to get access to all the features.
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
@@ -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