react-input-emoji 4.0.7 → 4.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -1
- package/dist/index.es.js +63 -44
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +63 -44
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
@@ -37,7 +37,7 @@ function styleInject(css, ref) {
|
|
37
37
|
}
|
38
38
|
}
|
39
39
|
|
40
|
-
var css_248z$1 = ".react-input-emoji--container {\n color: #4b4b4b;\n text-rendering: optimizeLegibility;\n background-color: #fff;\n border: 1px solid #fff;\n border-radius: 21px;\n margin: 5px 10px;\n box-sizing: border-box;\n flex: 1 1 auto;\n font-size: 15px;\n font-family: sans-serif;\n font-weight: 400;\n line-height: 20px;\n min-height: 20px;\n min-width: 0;\n outline: none;\n width: inherit;\n will-change: width;\n vertical-align: baseline;\n border: 1px solid #eaeaea;\n margin-right: 0;\n}\n\n.react-input-emoji--wrapper {\n display: flex;\n overflow: hidden;\n flex: 1;\n position: relative;\n padding-right: 0;\n vertical-align: baseline;\n outline: none;\n margin: 0;\n padding: 0;\n border: 0;\n}\n\n.react-input-emoji--input {\n font-weight: 400;\n max-height: 100px;\n min-height: 20px;\n outline: none;\n overflow-x: hidden;\n overflow-y: auto;\n position: relative;\n white-space: pre-wrap;\n word-wrap: break-word;\n z-index: 1;\n width: 100%;\n user-select: text;\n padding: 9px 12px 11px;\n text-align: left;\n}\n\n.react-input-emoji--input img {\n vertical-align: middle;\n width: 18px !important;\n height: 18px !important;\n display: inline !important;\n margin-left: 1px;\n margin-right: 1px;\n}\n\n.react-input-emoji--overlay {\n position: fixed;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n z-index: 9;\n}\n\n.react-input-emoji--placeholder {\n color: #a0a0a0;\n pointer-events: none;\n position: absolute;\n user-select: none;\n z-index: 2;\n left: 16px;\n top: 0;\n bottom: 0;\n display: flex;\n align-items: center;\n width: calc(100% - 22px);\n}\n\n.react-input-emoji--button {\n position: relative;\n display: block;\n text-align: center;\n padding: 0 10px;\n overflow: hidden;\n transition: color 0.1s ease-out;\n margin: 0;\n box-shadow: none;\n background: none;\n border: none;\n outline: none;\n cursor: pointer;\n flex-shrink: 0;\n}\n\n.react-input-emoji--button svg {\n fill: #858585;\n}\n\n.react-input-emoji--button__show svg {\n fill: #128b7e;\n}\n\n.react-emoji {\n display: flex;\n align-items: center;\n position: relative;\n width: 100%;\n}\n\n.react-emoji-picker--container {\n position: absolute;\n top: 0;\n width: 100%;\n}\n\n.react-emoji-picker--wrapper {\n position: absolute;\n bottom: 0;\n right: 0;\n height: 357px;\n width: 338px;\n overflow: hidden;\n z-index: 10;\n}\n\n.react-emoji-picker {\n position: absolute;\n top: 0;\n left: 0;\n animation: slidein 0.1s ease-in-out;\n}\n\n.react-emoji-picker__show {\n top: 0;\n}\n\n.react-input-emoji--mention--container {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n z-index: 10;\n}\n\n.react-input-emoji--mention--list {\n background-color: #fafafa;\n border: 1px solid #eaeaea;\n border-radius: 4px;\n margin: 0;\n padding: 0;\n list-style: none;\n display: flex;\n gap: 5px;\n flex-direction: column;\n position: absolute;\n bottom: 0;\n width: 100%;\n left: 0;\n}\n\n.react-input-emoji--mention--item {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 5px 10px;\n background-color: transparent;\n width: 100%;\n margin: 0;\n border: 0;\n}\n\n.react-input-emoji--mention--item__selected {\n background-color: #eeeeee;\n}\n\n.react-input-emoji--mention--item--img {\n width: 34px;\n height: 34px;\n border-radius: 50%;\n}\n\n.react-input-emoji--mention--item--name {\n font-size: 16px;\n color: #333;\n}\n\n.react-input-emoji--mention--item--name__selected {\n color: green;\n}\n\n.react-input-emoji--mention--text {\n color: #039be5;\n}\n\n.react-input-emoji--mention--loading {\n background-color: #fafafa;\n border: 1px solid #eaeaea;\n border-radius: 4px;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 10px 0;\n}\n\n.react-input-emoji--mention--loading--spinner,\n.react-input-emoji--mention--loading--spinner::after {\n border-radius: 50%;\n width: 10em;\n height: 10em;\n}\n\n.react-input-emoji--mention--loading--spinner {\n margin: 1px auto;\n font-size: 2px;\n position: relative;\n text-indent: -9999em;\n border-top: 1.1em solid rgba(0, 0, 0, 0.1);\n border-right: 1.1em solid rgba(0, 0, 0, 0.1);\n border-bottom: 1.1em solid rgba(0, 0, 0, 0.1);\n border-left: 1.1em solid rgba(0, 0, 0, 0.4);\n transform: translateZ(0);\n animation: load8 1.1s infinite linear;\n}\n\n@keyframes load8 {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n\n@keyframes slidein {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n}\n";
|
40
|
+
var css_248z$1 = ".react-input-emoji--container {\n color: #4b4b4b;\n text-rendering: optimizeLegibility;\n background-color: #fff;\n border: 1px solid #fff;\n border-radius: 21px;\n margin: 5px 10px;\n box-sizing: border-box;\n flex: 1 1 auto;\n font-size: 15px;\n font-family: sans-serif;\n font-weight: 400;\n line-height: 20px;\n min-height: 20px;\n min-width: 0;\n outline: none;\n width: inherit;\n will-change: width;\n vertical-align: baseline;\n border: 1px solid #eaeaea;\n margin-right: 0;\n}\n\n.react-input-emoji--wrapper {\n display: flex;\n overflow: hidden;\n flex: 1;\n position: relative;\n padding-right: 0;\n vertical-align: baseline;\n outline: none;\n margin: 0;\n padding: 0;\n border: 0;\n}\n\n.react-input-emoji--input {\n font-weight: 400;\n max-height: 100px;\n min-height: 20px;\n outline: none;\n overflow-x: hidden;\n overflow-y: auto;\n position: relative;\n white-space: pre-wrap;\n word-wrap: break-word;\n z-index: 1;\n width: 100%;\n user-select: text;\n padding: 9px 12px 11px;\n text-align: left;\n}\n\n.react-input-emoji--input img {\n vertical-align: middle;\n width: 18px !important;\n height: 18px !important;\n display: inline !important;\n margin-left: 1px;\n margin-right: 1px;\n}\n\n.react-input-emoji--overlay {\n position: fixed;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n z-index: 9;\n}\n\n.react-input-emoji--placeholder {\n color: #a0a0a0;\n pointer-events: none;\n position: absolute;\n user-select: none;\n z-index: 2;\n left: 16px;\n top: 0;\n bottom: 0;\n display: flex;\n align-items: center;\n width: calc(100% - 22px);\n}\n\n.react-input-emoji--button {\n position: relative;\n display: block;\n text-align: center;\n padding: 0 10px;\n overflow: hidden;\n transition: color 0.1s ease-out;\n margin: 0;\n box-shadow: none;\n background: none;\n border: none;\n outline: none;\n cursor: pointer;\n flex-shrink: 0;\n}\n\n.react-input-emoji--button svg {\n fill: #858585;\n}\n\n.react-input-emoji--button__show svg {\n fill: #128b7e;\n}\n\n.react-emoji {\n display: flex;\n align-items: center;\n position: relative;\n width: 100%;\n}\n\n.react-emoji-picker--container {\n position: absolute;\n top: 0;\n width: 100%;\n}\n\n.react-emoji-picker--wrapper {\n position: absolute;\n bottom: 0;\n right: 0;\n height: 357px;\n width: 338px;\n overflow: hidden;\n z-index: 10;\n}\n\n.react-emoji-picker {\n position: absolute;\n top: 0;\n left: 0;\n animation: slidein 0.1s ease-in-out;\n}\n\n.react-emoji-picker__show {\n top: 0;\n}\n\n.react-input-emoji--mention--container {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n z-index: 10;\n}\n\n.react-input-emoji--mention--list {\n background-color: #fafafa;\n border: 1px solid #eaeaea;\n border-radius: 4px;\n margin: 0;\n padding: 0;\n list-style: none;\n display: flex;\n gap: 5px;\n flex-direction: column;\n position: absolute;\n bottom: 0;\n width: 100%;\n left: 0;\n}\n\n.react-input-emoji--mention--item {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 5px 10px;\n background-color: transparent;\n width: 100%;\n margin: 0;\n border: 0;\n}\n\n.react-input-emoji--mention--item__selected {\n background-color: #eeeeee;\n}\n\n.react-input-emoji--mention--item--img {\n width: 34px;\n height: 34px;\n border-radius: 50%;\n}\n\n.react-input-emoji--mention--item--name {\n font-size: 16px;\n color: #333;\n}\n\n.react-input-emoji--mention--item--name__selected {\n color: green;\n}\n\n.react-input-emoji--mention--text {\n color: #039be5;\n}\n\n.react-input-emoji--mention--loading {\n background-color: #fafafa;\n border: 1px solid #eaeaea;\n border-radius: 4px;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 10px 0;\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n}\n\n.react-input-emoji--mention--loading--spinner,\n.react-input-emoji--mention--loading--spinner::after {\n border-radius: 50%;\n width: 10em;\n height: 10em;\n}\n\n.react-input-emoji--mention--loading--spinner {\n margin: 1px auto;\n font-size: 2px;\n position: relative;\n text-indent: -9999em;\n border-top: 1.1em solid rgba(0, 0, 0, 0.1);\n border-right: 1.1em solid rgba(0, 0, 0, 0.1);\n border-bottom: 1.1em solid rgba(0, 0, 0, 0.1);\n border-left: 1.1em solid rgba(0, 0, 0, 0.4);\n transform: translateZ(0);\n animation: load8 1.1s infinite linear;\n}\n\n@keyframes load8 {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n\n@keyframes slidein {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n}\n";
|
41
41
|
styleInject(css_248z$1);
|
42
42
|
|
43
43
|
// @ts-check
|
@@ -52353,6 +52353,7 @@ styleInject(css_248z);
|
|
52353
52353
|
// vendors
|
52354
52354
|
/**
|
52355
52355
|
* @typedef {object} Props
|
52356
|
+
* @property {'light' | 'dark' | 'auto'} theme
|
52356
52357
|
* @property {function(import("../types/types").EmojiMartItem): void} onSelectEmoji
|
52357
52358
|
* @property {boolean} disableRecent
|
52358
52359
|
* @property {object[]} customEmojis
|
@@ -52364,12 +52365,14 @@ styleInject(css_248z);
|
|
52364
52365
|
* @return {React.FC}
|
52365
52366
|
*/
|
52366
52367
|
|
52367
|
-
function EmojiPicker({
|
52368
|
-
|
52369
|
-
|
52370
|
-
|
52371
|
-
|
52372
|
-
|
52368
|
+
function EmojiPicker(props) {
|
52369
|
+
const {
|
52370
|
+
theme,
|
52371
|
+
onSelectEmoji,
|
52372
|
+
disableRecent,
|
52373
|
+
customEmojis
|
52374
|
+
} = props;
|
52375
|
+
const excludePicker = React.useMemo(() => {
|
52373
52376
|
/** @type import("emoji-mart").CategoryName[] */
|
52374
52377
|
const exclude = [];
|
52375
52378
|
|
@@ -52380,16 +52383,18 @@ function EmojiPicker({
|
|
52380
52383
|
return exclude;
|
52381
52384
|
}, [disableRecent]);
|
52382
52385
|
return /*#__PURE__*/React__default['default'].createElement(Picker, {
|
52386
|
+
theme: theme,
|
52387
|
+
set: "apple",
|
52383
52388
|
showPreview: false,
|
52384
52389
|
showSkinTones: false,
|
52385
|
-
set: "apple",
|
52386
52390
|
onSelect: onSelectEmoji,
|
52387
|
-
exclude:
|
52391
|
+
exclude: excludePicker,
|
52388
52392
|
custom: customEmojis
|
52389
52393
|
});
|
52390
52394
|
}
|
52391
52395
|
|
52392
52396
|
EmojiPicker.propTypes = {
|
52397
|
+
theme: PropTypes__default['default'].oneOf(['light', 'dark', 'auto']),
|
52393
52398
|
onSelectEmoji: PropTypes__default['default'].func,
|
52394
52399
|
disableRecent: PropTypes__default['default'].bool,
|
52395
52400
|
customEmojis: PropTypes__default['default'].array
|
@@ -52407,7 +52412,8 @@ var EmojiPicker$1 = /*#__PURE__*/React.memo(EmojiPicker);
|
|
52407
52412
|
|
52408
52413
|
/**
|
52409
52414
|
* @typedef {Object} Props
|
52410
|
-
* @property {
|
52415
|
+
* @property {'light' | 'dark' | 'auto'} theme
|
52416
|
+
* @property {boolean} keepOpened
|
52411
52417
|
* @property {boolean} disableRecent
|
52412
52418
|
* @property {object[]=} customEmojis
|
52413
52419
|
* @property {(fn: SanitizeFn) => void} addSanitizeFn
|
@@ -52418,14 +52424,16 @@ var EmojiPicker$1 = /*#__PURE__*/React.memo(EmojiPicker);
|
|
52418
52424
|
|
52419
52425
|
/** @type {React.FC<Props>} */
|
52420
52426
|
|
52421
|
-
const EmojiPickerWrapper =
|
52422
|
-
|
52423
|
-
|
52424
|
-
|
52425
|
-
|
52426
|
-
|
52427
|
-
|
52428
|
-
|
52427
|
+
const EmojiPickerWrapper = props => {
|
52428
|
+
const {
|
52429
|
+
theme,
|
52430
|
+
keepOpened,
|
52431
|
+
disableRecent,
|
52432
|
+
customEmojis,
|
52433
|
+
addSanitizeFn,
|
52434
|
+
addPolluteFn,
|
52435
|
+
appendContent
|
52436
|
+
} = props;
|
52429
52437
|
const [showPicker, setShowPicker] = React.useState(false);
|
52430
52438
|
React.useEffect(() => {
|
52431
52439
|
addSanitizeFn(replaceAllTextEmojiToString);
|
@@ -52475,7 +52483,7 @@ const EmojiPickerWrapper = ({
|
|
52475
52483
|
function handleSelectEmoji(emoji) {
|
52476
52484
|
appendContent(getImageEmoji(emoji));
|
52477
52485
|
|
52478
|
-
if (!
|
52486
|
+
if (!keepOpened) {
|
52479
52487
|
setShowPicker(currentShowPicker => !currentShowPicker);
|
52480
52488
|
}
|
52481
52489
|
}
|
@@ -52488,10 +52496,12 @@ const EmojiPickerWrapper = ({
|
|
52488
52496
|
}, /*#__PURE__*/React__default['default'].createElement("div", {
|
52489
52497
|
className: "react-emoji-picker"
|
52490
52498
|
}, /*#__PURE__*/React__default['default'].createElement(EmojiPicker$1, {
|
52499
|
+
theme: theme,
|
52491
52500
|
onSelectEmoji: handleSelectEmoji,
|
52492
52501
|
disableRecent: disableRecent,
|
52493
52502
|
customEmojis: customEmojis
|
52494
52503
|
})))), /*#__PURE__*/React__default['default'].createElement("button", {
|
52504
|
+
type: "button",
|
52495
52505
|
className: `react-input-emoji--button${showPicker ? " react-input-emoji--button__show" : ""}`,
|
52496
52506
|
onClick: toggleShowPicker
|
52497
52507
|
}, /*#__PURE__*/React__default['default'].createElement("svg", {
|
@@ -52795,6 +52805,7 @@ const MentionUserList = ({
|
|
52795
52805
|
}, usersFiltered.map((user, index) => /*#__PURE__*/React__default['default'].createElement("li", {
|
52796
52806
|
key: user.id
|
52797
52807
|
}, /*#__PURE__*/React__default['default'].createElement("button", {
|
52808
|
+
type: "button",
|
52798
52809
|
onClick: handleClick(user),
|
52799
52810
|
className: `react-input-emoji--mention--item${selectedUser === index ? " react-input-emoji--mention--item__selected" : ""}`,
|
52800
52811
|
onMouseOver: () => setSelectedUser(index)
|
@@ -53061,6 +53072,7 @@ function usePollute() {
|
|
53061
53072
|
* @typedef {object} Props
|
53062
53073
|
* @property {string} value
|
53063
53074
|
* @property {(value: string) => void} onChange
|
53075
|
+
* @property {"light" | "dark" | "auto"} theme
|
53064
53076
|
* @property {boolean} cleanOnEnter
|
53065
53077
|
* @property {(text: string) => void} onEnter
|
53066
53078
|
* @property {string} placeholder
|
@@ -53068,7 +53080,7 @@ function usePollute() {
|
|
53068
53080
|
* @property {() => void} onClick
|
53069
53081
|
* @property {() => void} onFocus
|
53070
53082
|
* @property {number} maxLength
|
53071
|
-
* @property {boolean}
|
53083
|
+
* @property {boolean} keepOpened
|
53072
53084
|
* @property {(event: KeyboardEvent) => void} onKeyDown
|
53073
53085
|
* @property {string} inputClass
|
53074
53086
|
* @property {boolean} disableRecent
|
@@ -53089,30 +53101,33 @@ function usePollute() {
|
|
53089
53101
|
* @return {JSX.Element}
|
53090
53102
|
*/
|
53091
53103
|
|
53092
|
-
function InputEmoji({
|
53093
|
-
|
53094
|
-
|
53095
|
-
|
53096
|
-
|
53097
|
-
|
53098
|
-
|
53099
|
-
|
53100
|
-
|
53101
|
-
|
53102
|
-
|
53103
|
-
|
53104
|
-
|
53105
|
-
|
53106
|
-
|
53107
|
-
|
53108
|
-
|
53109
|
-
|
53110
|
-
|
53111
|
-
|
53112
|
-
|
53113
|
-
|
53114
|
-
|
53104
|
+
function InputEmoji(props, ref) {
|
53105
|
+
const {
|
53106
|
+
onChange,
|
53107
|
+
onEnter,
|
53108
|
+
onResize,
|
53109
|
+
onClick,
|
53110
|
+
onFocus,
|
53111
|
+
onKeyDown,
|
53112
|
+
theme,
|
53113
|
+
cleanOnEnter,
|
53114
|
+
placeholder,
|
53115
|
+
maxLength,
|
53116
|
+
keepOpened,
|
53117
|
+
inputClass,
|
53118
|
+
disableRecent,
|
53119
|
+
tabIndex,
|
53120
|
+
value,
|
53121
|
+
customEmojis,
|
53122
|
+
searchMention,
|
53123
|
+
// style
|
53124
|
+
borderRadius,
|
53125
|
+
borderColor,
|
53126
|
+
fontSize,
|
53127
|
+
fontFamily
|
53128
|
+
} = props;
|
53115
53129
|
/** @type {React.MutableRefObject<import('./text-input').Ref>} */
|
53130
|
+
|
53116
53131
|
const textInputRef = React.useRef(null);
|
53117
53132
|
const {
|
53118
53133
|
addEventListener,
|
@@ -53286,7 +53301,8 @@ function InputEmoji({
|
|
53286
53301
|
className: inputClass,
|
53287
53302
|
onChange: handleTextInputChange
|
53288
53303
|
}), /*#__PURE__*/React__default['default'].createElement(EmojiPickerWrapper, {
|
53289
|
-
|
53304
|
+
theme: theme,
|
53305
|
+
keepOpened: keepOpened,
|
53290
53306
|
disableRecent: disableRecent,
|
53291
53307
|
customEmojis: customEmojis,
|
53292
53308
|
addSanitizeFn: addSanitizeFn,
|
@@ -53297,6 +53313,9 @@ function InputEmoji({
|
|
53297
53313
|
|
53298
53314
|
const InputEmojiWithRef = /*#__PURE__*/React.forwardRef(InputEmoji);
|
53299
53315
|
InputEmojiWithRef.defaultProps = {
|
53316
|
+
theme:
|
53317
|
+
/** @type {const} */
|
53318
|
+
"auto",
|
53300
53319
|
height: 30,
|
53301
53320
|
placeholder: "Type a message",
|
53302
53321
|
borderRadius: 21,
|