react-input-emoji 5.1.1 → 5.3.1

Sign up to get free protection for your applications and to get access to all the features.
package/dist/index.js CHANGED
@@ -3933,6 +3933,7 @@ function $e5534fc185f7111e$export$2e2bcd8739ae039(props) {
3933
3933
  * @property {function(import("../types/types").EmojiMartItem): void} onSelectEmoji
3934
3934
  * @property {boolean} disableRecent
3935
3935
  * @property {import("emoji-mart").CustomEmoji[]=} customEmojis
3936
+ * @property {import('../types/types').Languages=} language
3936
3937
  */
3937
3938
 
3938
3939
  /**
@@ -3945,7 +3946,8 @@ function EmojiPicker(props) {
3945
3946
  var theme = props.theme,
3946
3947
  onSelectEmoji = props.onSelectEmoji,
3947
3948
  disableRecent = props.disableRecent,
3948
- customEmojis = props.customEmojis;
3949
+ customEmojis = props.customEmojis,
3950
+ language = props.language;
3949
3951
  /** @type {string[]} */
3950
3952
 
3951
3953
  var categories = React.useMemo(function () {
@@ -3959,6 +3961,13 @@ function EmojiPicker(props) {
3959
3961
  categoryies = [].concat(_toConsumableArray(categoryies), ["people", "nature", "foods", "activity", "places", "objects", "symbols", "flags"]);
3960
3962
  return categoryies;
3961
3963
  }, [disableRecent]);
3964
+ var i18n = React.useMemo(function () {
3965
+ if (!language) {
3966
+ return undefined;
3967
+ }
3968
+
3969
+ return require("@emoji-mart/data/i18n/".concat(language !== null && language !== void 0 ? language : 'en', ".json"));
3970
+ }, [language]);
3962
3971
  return /*#__PURE__*/React__default["default"].createElement($e5534fc185f7111e$export$2e2bcd8739ae039, {
3963
3972
  data: undefined,
3964
3973
  theme: theme,
@@ -3966,16 +3975,11 @@ function EmojiPicker(props) {
3966
3975
  onEmojiSelect: onSelectEmoji,
3967
3976
  custom: customEmojis,
3968
3977
  categories: categories,
3969
- set: "apple"
3978
+ set: "apple",
3979
+ i18n: i18n
3970
3980
  });
3971
3981
  }
3972
3982
 
3973
- EmojiPicker.propTypes = {
3974
- theme: t__default["default"].oneOf(["light", "dark", "auto"]),
3975
- onSelectEmoji: t__default["default"].func,
3976
- disableRecent: t__default["default"].bool,
3977
- customEmojis: t__default["default"].array
3978
- };
3979
3983
  var EmojiPicker$1 = /*#__PURE__*/React.memo(EmojiPicker);
3980
3984
 
3981
3985
  /**
@@ -3985,6 +3989,8 @@ var EmojiPicker$1 = /*#__PURE__*/React.memo(EmojiPicker);
3985
3989
  * @property {(emoji: import("../types/types").EmojiMartItem) => void} handleSelectEmoji
3986
3990
  * @property {boolean} disableRecent
3987
3991
  * @property {import("emoji-mart").CustomEmoji[]=} customEmojis
3992
+ * @property {('above' | 'below')=} position
3993
+ * @property {import('../types/types').Languages=} language
3988
3994
  */
3989
3995
 
3990
3996
  /**
@@ -3998,24 +4004,31 @@ function EmojiPickerContainer(_ref) {
3998
4004
  theme = _ref.theme,
3999
4005
  handleSelectEmoji = _ref.handleSelectEmoji,
4000
4006
  disableRecent = _ref.disableRecent,
4001
- customEmojis = _ref.customEmojis;
4007
+ customEmojis = _ref.customEmojis,
4008
+ position = _ref.position,
4009
+ language = _ref.language;
4002
4010
  return /*#__PURE__*/React__default["default"].createElement("div", {
4003
4011
  className: "react-emoji-picker--container"
4004
4012
  }, showPicker && /*#__PURE__*/React__default["default"].createElement("div", {
4005
4013
  className: "react-emoji-picker--wrapper",
4006
4014
  onClick: function onClick(evt) {
4007
4015
  return evt.stopPropagation();
4008
- }
4016
+ },
4017
+ style: position === 'below' ? {
4018
+ top: '40px'
4019
+ } : {}
4009
4020
  }, /*#__PURE__*/React__default["default"].createElement("div", {
4010
4021
  className: "react-emoji-picker"
4011
4022
  }, /*#__PURE__*/React__default["default"].createElement(EmojiPicker$1, {
4012
4023
  theme: theme,
4013
4024
  onSelectEmoji: handleSelectEmoji,
4014
4025
  disableRecent: disableRecent,
4015
- customEmojis: customEmojis
4026
+ customEmojis: customEmojis,
4027
+ language: language
4016
4028
  }))));
4017
4029
  }
4018
4030
 
4031
+ var EMOJI_PICKER_CONTAINER_HEIGHT = 435;
4019
4032
  /**
4020
4033
  * @typedef {import('../types/types').SanitizeFn} SanitizeFn
4021
4034
  */
@@ -4034,6 +4047,7 @@ function EmojiPickerContainer(_ref) {
4034
4047
  * @property {(fn: PolluteFn) => void} addPolluteFn
4035
4048
  * @property {(html: string) => void} appendContent
4036
4049
  * @property {HTMLDivElement=} buttonElement
4050
+ * @property {import('../types/types').Languages=} language
4037
4051
  */
4038
4052
  // eslint-disable-next-line valid-jsdoc
4039
4053
 
@@ -4047,7 +4061,8 @@ var EmojiPickerWrapper = function EmojiPickerWrapper(props) {
4047
4061
  addSanitizeFn = props.addSanitizeFn,
4048
4062
  addPolluteFn = props.addPolluteFn,
4049
4063
  appendContent = props.appendContent,
4050
- buttonElement = props.buttonElement;
4064
+ buttonElement = props.buttonElement,
4065
+ language = props.language;
4051
4066
 
4052
4067
  var _useState = React.useState(false),
4053
4068
  _useState2 = _slicedToArray(_useState, 2),
@@ -4060,6 +4075,13 @@ var EmojiPickerWrapper = function EmojiPickerWrapper(props) {
4060
4075
  _useState4 = _slicedToArray(_useState3, 2),
4061
4076
  customButton = _useState4[0],
4062
4077
  setCustomButton = _useState4[1];
4078
+ /** @type {['above' | 'below' | undefined, React.Dispatch<React.SetStateAction<'above' | 'below' | undefined>>]} */
4079
+
4080
+
4081
+ var _useState5 = React.useState(),
4082
+ _useState6 = _slicedToArray(_useState5, 2),
4083
+ emojiPickerPosition = _useState6[0],
4084
+ setEmojiPickerPosition = _useState6[1];
4063
4085
 
4064
4086
  React.useEffect(function () {
4065
4087
  addSanitizeFn(replaceAllTextEmojiToString);
@@ -4097,9 +4119,30 @@ var EmojiPickerWrapper = function EmojiPickerWrapper(props) {
4097
4119
  function toggleShowPicker(event) {
4098
4120
  event.stopPropagation();
4099
4121
  event.preventDefault();
4122
+ setEmojiPickerPosition(calcTopPosition(event));
4100
4123
  setShowPicker(function (currentShowPicker) {
4101
4124
  return !currentShowPicker;
4102
4125
  });
4126
+ }
4127
+ /**
4128
+ *
4129
+ * @param {React.MouseEvent} event
4130
+ * @return {'above' | 'below'}
4131
+ */
4132
+
4133
+
4134
+ function calcTopPosition(event) {
4135
+ var btn = event.currentTarget;
4136
+ var btnRect = btn.getBoundingClientRect();
4137
+ var popoverHeight = EMOJI_PICKER_CONTAINER_HEIGHT; // Decide to display above or below based on available space
4138
+
4139
+ if (btnRect.top >= popoverHeight) {
4140
+ // Display above
4141
+ return 'above';
4142
+ } else {
4143
+ // Display below
4144
+ return 'below';
4145
+ }
4103
4146
  } // eslint-disable-next-line valid-jsdoc
4104
4147
 
4105
4148
  /**
@@ -4129,7 +4172,9 @@ var EmojiPickerWrapper = function EmojiPickerWrapper(props) {
4129
4172
  theme: theme,
4130
4173
  handleSelectEmoji: handleSelectEmoji,
4131
4174
  disableRecent: disableRecent,
4132
- customEmojis: customEmojis
4175
+ customEmojis: customEmojis,
4176
+ position: emojiPickerPosition,
4177
+ language: language
4133
4178
  }), /*#__PURE__*/React__default["default"].createElement(EmojiPickerButton, {
4134
4179
  showPicker: showPicker,
4135
4180
  toggleShowPicker: toggleShowPicker,
@@ -4139,7 +4184,9 @@ var EmojiPickerWrapper = function EmojiPickerWrapper(props) {
4139
4184
  theme: theme,
4140
4185
  handleSelectEmoji: handleSelectEmoji,
4141
4186
  disableRecent: disableRecent,
4142
- customEmojis: customEmojis
4187
+ customEmojis: customEmojis,
4188
+ position: emojiPickerPosition,
4189
+ language: language
4143
4190
  }), /*#__PURE__*/React__default["default"].createElement(EmojiPickerButton, {
4144
4191
  showPicker: showPicker,
4145
4192
  toggleShowPicker: toggleShowPicker
@@ -4799,6 +4846,7 @@ function usePollute() {
4799
4846
  * @property {number} fontSize
4800
4847
  * @property {string} fontFamily
4801
4848
  * @property {{id: string; name: string; emojis: {id: string; name: string; keywords: string[], skins: {src: string}[]}}[]=} customEmojis
4849
+ * @property {import('./types/types').Languages=} language
4802
4850
  * @property {(text: string) => Promise<MetionUser[]>=} searchMention
4803
4851
  * @property {HTMLDivElement=} buttonElement
4804
4852
  */
@@ -4829,6 +4877,7 @@ function InputEmoji(props, ref) {
4829
4877
  tabIndex = props.tabIndex,
4830
4878
  value = props.value,
4831
4879
  customEmojis = props.customEmojis,
4880
+ language = props.language,
4832
4881
  searchMention = props.searchMention,
4833
4882
  buttonElement = props.buttonElement,
4834
4883
  borderRadius = props.borderRadius,
@@ -5037,7 +5086,8 @@ function InputEmoji(props, ref) {
5037
5086
  addSanitizeFn: addSanitizeFn,
5038
5087
  addPolluteFn: addPolluteFn,
5039
5088
  appendContent: appendContent,
5040
- buttonElement: buttonElement
5089
+ buttonElement: buttonElement,
5090
+ language: language
5041
5091
  }));
5042
5092
  }
5043
5093
 
@@ -5054,7 +5104,8 @@ InputEmojiWithRef.defaultProps = {
5054
5104
  fontFamily: "sans-serif",
5055
5105
  tabIndex: 0,
5056
5106
  shouldReturn: false,
5057
- customEmojis: []
5107
+ customEmojis: [],
5108
+ language: undefined
5058
5109
  };
5059
5110
 
5060
5111
  module.exports = InputEmojiWithRef;