react-input-emoji 5.6.2 → 5.6.3
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +21 -21
- package/dist/__mocks__/getSelectionMock.d.ts +5 -0
- package/dist/fixtures/examples.d.ts +5 -0
- package/dist/index.es.js +5 -10
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +5 -11
- package/dist/index.js.map +1 -1
- package/dist/src/components/emoji-picker-button.d.ts +21 -0
- package/dist/src/components/emoji-picker-container.d.ts +26 -0
- package/dist/src/components/emoji-picker-wrapper.d.ts +37 -0
- package/dist/src/components/emoji-picker.d.ts +23 -0
- package/dist/src/components/mention-user-list.d.ts +15 -0
- package/dist/src/components/mention-wrapper.d.ts +29 -0
- package/dist/src/components/mention-wrapper.test.d.ts +1 -0
- package/dist/src/hooks/use-emit.d.ts +10 -0
- package/dist/src/hooks/use-event-listeners.d.ts +9 -0
- package/dist/src/hooks/use-event-listeners.test.d.ts +1 -0
- package/dist/src/hooks/use-expose.d.ts +18 -0
- package/dist/src/hooks/use-mention.d.ts +17 -0
- package/dist/src/hooks/use-mention.test.d.ts +1 -0
- package/dist/src/hooks/use-sanitize.d.ts +19 -0
- package/dist/src/hooks/user-pollute.d.ts +9 -0
- package/dist/src/index.d.ts +48 -0
- package/dist/src/text-input.d.ts +30 -0
- package/dist/src/utils/emoji-utils.d.ts +20 -0
- package/dist/src/utils/input-event-utils.d.ts +95 -0
- package/dist/src/utils/mention-utils.d.ts +15 -0
- package/dist/src/utils/observer.d.ts +5 -0
- package/dist/src/utils/use-debounce.d.ts +1 -0
- package/package.json +5 -5
package/README.md
CHANGED
|
@@ -45,27 +45,27 @@ export default function Example() {
|
|
|
45
45
|
|
|
46
46
|
## Props
|
|
47
47
|
|
|
48
|
-
| Prop
|
|
49
|
-
|
|
|
50
|
-
| `
|
|
51
|
-
| `
|
|
52
|
-
| `
|
|
53
|
-
| `
|
|
54
|
-
| `
|
|
55
|
-
| `
|
|
56
|
-
| `
|
|
57
|
-
| `
|
|
58
|
-
| `
|
|
59
|
-
| `maxLength`
|
|
60
|
-
| `
|
|
61
|
-
| `
|
|
62
|
-
| `
|
|
63
|
-
| `
|
|
64
|
-
| `
|
|
65
|
-
| `
|
|
66
|
-
| `
|
|
67
|
-
| `
|
|
68
|
-
| `
|
|
48
|
+
| Prop | Type | Default | Description |
|
|
49
|
+
| ------------------ | ------------------------ | ---------------- | ------------------------------------------------------------------------------------------------------------------------ |
|
|
50
|
+
| `borderColor` | string | "#EAEAEA" | The border color of the input container. |
|
|
51
|
+
| `borderRadius` | number | 21 | The border radius of the input container. |
|
|
52
|
+
| `buttonElement` | HTMLElement | - | An HTMLElement that, when clicked, triggers the emoji picker. If this prop is provided, the default emoji picker button is removed. |
|
|
53
|
+
| `buttonRef` | React.MutableRefObject | - | A React mutable ref object that, when referenced, triggers the emoji picker. If this prop is provided, the default emoji picker button is removed. |
|
|
54
|
+
| `cleanOnEnter` | boolean | false | Clean the input value after the keydown event. |
|
|
55
|
+
| `fontSize` | number | 15 | The font size of the placeholder and input container. |
|
|
56
|
+
| `fontFamily` | string | "sans-serif" | The font family of the placeholder and input container. |
|
|
57
|
+
| `height` | number | 40 | The total height of the area in which the element is rendered. |
|
|
58
|
+
| `keepOpened` | boolean | false | If set to true, the emoji picker will remain open after selecting an emoji. Defaults to false. |
|
|
59
|
+
| `maxLength` | number | - | The maximum number of characters allowed in the element. |
|
|
60
|
+
| `onChange` | function | - | This function is called when the value of the input changes. The first argument is the current value. |
|
|
61
|
+
| `onClick` | function | - | This function is called when the input is clicked. |
|
|
62
|
+
| `onEnter` | function | - | This function is called after the keydown event is fired with the `keyCode === 13` returning the last value. |
|
|
63
|
+
| `onFocus` | function | - | This function is called when the input has received focus. |
|
|
64
|
+
| `onResize` | function | - | This function is called when the width or the height of the input changes. The first argument is the current size value. |
|
|
65
|
+
| `placeholder` | string | "Type a message" | Set the placeholder of the input. |
|
|
66
|
+
| `shouldReturn` | boolean | - | Allows the user to use the `Shift + Enter` or `Ctrl + Enter` keyboard shortcut to create a new line. |
|
|
67
|
+
| `theme` | string | - | Set theme for emoji popup. Available values "light", "dark", "auto" |
|
|
68
|
+
| `value` | string | "" | The input value. |
|
|
69
69
|
|
|
70
70
|
## License
|
|
71
71
|
|
package/dist/index.es.js
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import React, { useRef, useCallback, useImperativeHandle, useEffect, forwardRef, useState, memo, useMemo } from 'react';
|
|
2
2
|
import ReactDOM from 'react-dom';
|
|
3
|
-
import t from 'prop-types';
|
|
4
3
|
|
|
5
4
|
function styleInject(css, ref) {
|
|
6
5
|
if (ref === void 0) ref = {};
|
|
@@ -515,7 +514,7 @@ function replaceAllTextEmojis(text) {
|
|
|
515
514
|
allEmojis = _toConsumableArray(new Set(allEmojis)); // remove duplicates
|
|
516
515
|
|
|
517
516
|
allEmojis.forEach(function (emoji) {
|
|
518
|
-
text = replaceAll(text, emoji, getInputEmojiHTML(emoji));
|
|
517
|
+
text = replaceAll(text, emoji, getInputEmojiHTML('', emoji));
|
|
519
518
|
});
|
|
520
519
|
}
|
|
521
520
|
return text;
|
|
@@ -759,7 +758,7 @@ function useExpose(_ref) {
|
|
|
759
758
|
textInputRef = _ref.textInputRef,
|
|
760
759
|
setValue = _ref.setValue,
|
|
761
760
|
emitChange = _ref.emitChange;
|
|
762
|
-
var _useSanitize = useSanitize(),
|
|
761
|
+
var _useSanitize = useSanitize(false),
|
|
763
762
|
sanitize = _useSanitize.sanitize,
|
|
764
763
|
sanitizedTextRef = _useSanitize.sanitizedTextRef;
|
|
765
764
|
useImperativeHandle(ref, function () {
|
|
@@ -3494,14 +3493,13 @@ function $e5534fc185f7111e$export$2e2bcd8739ae039(props) {
|
|
|
3494
3493
|
* @property {'light' | 'dark' | 'auto'} theme
|
|
3495
3494
|
* @property {function(import("../types/types").EmojiMartItem): void} onSelectEmoji
|
|
3496
3495
|
* @property {boolean} disableRecent
|
|
3497
|
-
* @property {
|
|
3496
|
+
* @property {any[]=} customEmojis
|
|
3498
3497
|
* @property {import('../types/types').Languages=} language
|
|
3499
3498
|
*/
|
|
3500
3499
|
|
|
3501
3500
|
/**
|
|
3502
3501
|
* Emoji Picker Component
|
|
3503
3502
|
* @param {Props} props
|
|
3504
|
-
* @return {React.FC}
|
|
3505
3503
|
*/
|
|
3506
3504
|
function EmojiPicker(props) {
|
|
3507
3505
|
var theme = props.theme,
|
|
@@ -3545,7 +3543,7 @@ var EmojiPicker$1 = /*#__PURE__*/memo(EmojiPicker);
|
|
|
3545
3543
|
* @property {'light' | 'dark' | 'auto'} theme
|
|
3546
3544
|
* @property {(emoji: import("../types/types").EmojiMartItem) => void} handleSelectEmoji
|
|
3547
3545
|
* @property {boolean} disableRecent
|
|
3548
|
-
* @property {
|
|
3546
|
+
* @property {any[]=} customEmojis
|
|
3549
3547
|
* @property {('above' | 'below')=} position
|
|
3550
3548
|
* @property {import('../types/types').Languages=} language
|
|
3551
3549
|
*/
|
|
@@ -3599,7 +3597,7 @@ var EMOJI_PICKER_CONTAINER_HEIGHT = 435;
|
|
|
3599
3597
|
* @property {'light' | 'dark' | 'auto'} theme
|
|
3600
3598
|
* @property {boolean} keepOpened
|
|
3601
3599
|
* @property {boolean} disableRecent
|
|
3602
|
-
* @property {
|
|
3600
|
+
* @property {any[]=} customEmojis
|
|
3603
3601
|
* @property {(fn: SanitizeFn) => void} addSanitizeFn
|
|
3604
3602
|
* @property {(fn: PolluteFn) => void} addPolluteFn
|
|
3605
3603
|
* @property {(html: string) => void} appendContent
|
|
@@ -4075,9 +4073,6 @@ var MentionUserList = function MentionUserList(_ref, ref) {
|
|
|
4075
4073
|
}));
|
|
4076
4074
|
};
|
|
4077
4075
|
var MentionUserListWithRef = /*#__PURE__*/forwardRef(MentionUserList);
|
|
4078
|
-
MentionUserListWithRef.propTypes = {
|
|
4079
|
-
users: t.array.isRequired
|
|
4080
|
-
};
|
|
4081
4076
|
|
|
4082
4077
|
/**
|
|
4083
4078
|
* @typedef {import('../types/types').MentionUser} MetionUser
|