react-input-emoji 4.2.0 → 4.3.0
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/index.es.js +121 -31
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +121 -30
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
package/dist/index.js
CHANGED
@@ -1,11 +1,13 @@
|
|
1
1
|
'use strict';
|
2
2
|
|
3
3
|
var React = require('react');
|
4
|
+
var ReactDOM = require('react-dom');
|
4
5
|
var PropTypes = require('prop-types');
|
5
6
|
|
6
7
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
7
8
|
|
8
9
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
10
|
+
var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
|
9
11
|
var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
|
10
12
|
|
11
13
|
function styleInject(css, ref) {
|
@@ -536,6 +538,51 @@ const TextInput = ({
|
|
536
538
|
|
537
539
|
const TextInputWithRef = /*#__PURE__*/React.forwardRef(TextInput);
|
538
540
|
|
541
|
+
/* eslint-disable react/prop-types */
|
542
|
+
/**
|
543
|
+
* @typedef {object} Props
|
544
|
+
* @property {boolean} showPicker
|
545
|
+
* @property {(event: React.MouseEvent) => void} toggleShowPicker
|
546
|
+
* @property {HTMLDivElement=} buttonElement
|
547
|
+
*/
|
548
|
+
|
549
|
+
/**
|
550
|
+
* Emoji Picker Button Component
|
551
|
+
* @param {Props} props
|
552
|
+
* @return {JSX.Element}
|
553
|
+
*/
|
554
|
+
|
555
|
+
function EmojiPickerButton({
|
556
|
+
showPicker,
|
557
|
+
toggleShowPicker,
|
558
|
+
buttonElement
|
559
|
+
}) {
|
560
|
+
const buttonRef = React.useRef(null);
|
561
|
+
const [showCustomButtonContent, setShowCustomButtonContent] = React.useState(false);
|
562
|
+
React.useEffect(() => {
|
563
|
+
if ((buttonElement?.childNodes?.length ?? 0) > 2) {
|
564
|
+
buttonRef.current.appendChild(buttonElement?.childNodes[0]);
|
565
|
+
setShowCustomButtonContent(true);
|
566
|
+
}
|
567
|
+
}, [buttonElement?.childNodes]);
|
568
|
+
return /*#__PURE__*/React__default["default"].createElement("button", {
|
569
|
+
ref: buttonRef,
|
570
|
+
type: "button",
|
571
|
+
className: `react-input-emoji--button${showPicker ? " react-input-emoji--button__show" : ""}`,
|
572
|
+
onClick: toggleShowPicker
|
573
|
+
}, !showCustomButtonContent && /*#__PURE__*/React__default["default"].createElement("svg", {
|
574
|
+
xmlns: "http://www.w3.org/2000/svg",
|
575
|
+
viewBox: "0 0 24 24",
|
576
|
+
width: "24",
|
577
|
+
height: "24",
|
578
|
+
className: "react-input-emoji--button--icon"
|
579
|
+
}, /*#__PURE__*/React__default["default"].createElement("path", {
|
580
|
+
d: "M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0m0 22C6.486 22 2 17.514 2 12S6.486 2 12 2s10 4.486 10 10-4.486 10-10 10"
|
581
|
+
}), /*#__PURE__*/React__default["default"].createElement("path", {
|
582
|
+
d: "M8 7a2 2 0 1 0-.001 3.999A2 2 0 0 0 8 7M16 7a2 2 0 1 0-.001 3.999A2 2 0 0 0 16 7M15.232 15c-.693 1.195-1.87 2-3.349 2-1.477 0-2.655-.805-3.347-2H15m3-2H6a6 6 0 1 0 12 0"
|
583
|
+
})));
|
584
|
+
}
|
585
|
+
|
539
586
|
var compressed = true;
|
540
587
|
var categories$1 = [
|
541
588
|
{
|
@@ -52388,7 +52435,7 @@ styleInject(css_248z);
|
|
52388
52435
|
* @property {'light' | 'dark' | 'auto'} theme
|
52389
52436
|
* @property {function(import("../types/types").EmojiMartItem): void} onSelectEmoji
|
52390
52437
|
* @property {boolean} disableRecent
|
52391
|
-
* @property {
|
52438
|
+
* @property {import("emoji-mart").CustomEmoji[]=} customEmojis
|
52392
52439
|
*/
|
52393
52440
|
|
52394
52441
|
/**
|
@@ -52433,6 +52480,43 @@ EmojiPicker.propTypes = {
|
|
52433
52480
|
};
|
52434
52481
|
var EmojiPicker$1 = /*#__PURE__*/React.memo(EmojiPicker);
|
52435
52482
|
|
52483
|
+
/**
|
52484
|
+
* @typedef {object} Props
|
52485
|
+
* @property {boolean} showPicker
|
52486
|
+
* @property {'light' | 'dark' | 'auto'} theme
|
52487
|
+
* @property {(emoji: import("../types/types").EmojiMartItem) => void} handleSelectEmoji
|
52488
|
+
* @property {boolean} disableRecent
|
52489
|
+
* @property {import("emoji-mart").CustomEmoji[]=} customEmojis
|
52490
|
+
*/
|
52491
|
+
|
52492
|
+
/**
|
52493
|
+
* Emoji Picker Button Component
|
52494
|
+
* @param {Props} props
|
52495
|
+
* @return {JSX.Element}
|
52496
|
+
*/
|
52497
|
+
|
52498
|
+
function EmojiPickerContainer({
|
52499
|
+
showPicker,
|
52500
|
+
theme,
|
52501
|
+
handleSelectEmoji,
|
52502
|
+
disableRecent,
|
52503
|
+
customEmojis
|
52504
|
+
}) {
|
52505
|
+
return /*#__PURE__*/React__default["default"].createElement("div", {
|
52506
|
+
className: "react-emoji-picker--container"
|
52507
|
+
}, showPicker && /*#__PURE__*/React__default["default"].createElement("div", {
|
52508
|
+
className: "react-emoji-picker--wrapper",
|
52509
|
+
onClick: evt => evt.stopPropagation()
|
52510
|
+
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
52511
|
+
className: "react-emoji-picker"
|
52512
|
+
}, /*#__PURE__*/React__default["default"].createElement(EmojiPicker$1, {
|
52513
|
+
theme: theme,
|
52514
|
+
onSelectEmoji: handleSelectEmoji,
|
52515
|
+
disableRecent: disableRecent,
|
52516
|
+
customEmojis: customEmojis
|
52517
|
+
}))));
|
52518
|
+
}
|
52519
|
+
|
52436
52520
|
// @ts-check
|
52437
52521
|
/**
|
52438
52522
|
* @typedef {import('../types/types').SanitizeFn} SanitizeFn
|
@@ -52447,10 +52531,11 @@ var EmojiPicker$1 = /*#__PURE__*/React.memo(EmojiPicker);
|
|
52447
52531
|
* @property {'light' | 'dark' | 'auto'} theme
|
52448
52532
|
* @property {boolean} keepOpened
|
52449
52533
|
* @property {boolean} disableRecent
|
52450
|
-
* @property {
|
52534
|
+
* @property {import("emoji-mart").CustomEmoji[]=} customEmojis
|
52451
52535
|
* @property {(fn: SanitizeFn) => void} addSanitizeFn
|
52452
52536
|
* @property {(fn: PolluteFn) => void} addPolluteFn
|
52453
52537
|
* @property {(html: string) => void} appendContent
|
52538
|
+
* @property {HTMLDivElement=} buttonElement
|
52454
52539
|
*/
|
52455
52540
|
// eslint-disable-next-line valid-jsdoc
|
52456
52541
|
|
@@ -52464,9 +52549,13 @@ const EmojiPickerWrapper = props => {
|
|
52464
52549
|
customEmojis,
|
52465
52550
|
addSanitizeFn,
|
52466
52551
|
addPolluteFn,
|
52467
|
-
appendContent
|
52552
|
+
appendContent,
|
52553
|
+
buttonElement
|
52468
52554
|
} = props;
|
52469
52555
|
const [showPicker, setShowPicker] = React.useState(false);
|
52556
|
+
/** @type {[HTMLDivElement | undefined, React.Dispatch<React.SetStateAction<HTMLDivElement | undefined>>]} */
|
52557
|
+
|
52558
|
+
const [customButton, setCustomButton] = React.useState();
|
52470
52559
|
React.useEffect(() => {
|
52471
52560
|
addSanitizeFn(replaceAllTextEmojiToString);
|
52472
52561
|
}, [addSanitizeFn]);
|
@@ -52520,33 +52609,32 @@ const EmojiPickerWrapper = props => {
|
|
52520
52609
|
}
|
52521
52610
|
}
|
52522
52611
|
|
52523
|
-
|
52524
|
-
|
52525
|
-
|
52526
|
-
|
52527
|
-
|
52528
|
-
},
|
52529
|
-
|
52530
|
-
|
52612
|
+
React.useEffect(() => {
|
52613
|
+
if (buttonElement?.style) {
|
52614
|
+
buttonElement.style.position = "relative";
|
52615
|
+
setCustomButton(buttonElement);
|
52616
|
+
}
|
52617
|
+
}, [buttonElement]);
|
52618
|
+
return customButton ? /*#__PURE__*/ReactDOM__default["default"].createPortal( /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(EmojiPickerContainer, {
|
52619
|
+
showPicker: showPicker,
|
52531
52620
|
theme: theme,
|
52532
|
-
|
52621
|
+
handleSelectEmoji: handleSelectEmoji,
|
52533
52622
|
disableRecent: disableRecent,
|
52534
52623
|
customEmojis: customEmojis
|
52535
|
-
})
|
52536
|
-
|
52537
|
-
|
52538
|
-
|
52539
|
-
}, /*#__PURE__*/React__default["default"].createElement("
|
52540
|
-
|
52541
|
-
|
52542
|
-
|
52543
|
-
|
52544
|
-
|
52545
|
-
}, /*#__PURE__*/React__default["default"].createElement(
|
52546
|
-
|
52547
|
-
|
52548
|
-
|
52549
|
-
}))));
|
52624
|
+
}), /*#__PURE__*/React__default["default"].createElement(EmojiPickerButton, {
|
52625
|
+
showPicker: showPicker,
|
52626
|
+
toggleShowPicker: toggleShowPicker,
|
52627
|
+
buttonElement: customButton
|
52628
|
+
})), customButton) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(EmojiPickerContainer, {
|
52629
|
+
showPicker: showPicker,
|
52630
|
+
theme: theme,
|
52631
|
+
handleSelectEmoji: handleSelectEmoji,
|
52632
|
+
disableRecent: disableRecent,
|
52633
|
+
customEmojis: customEmojis
|
52634
|
+
}), /*#__PURE__*/React__default["default"].createElement(EmojiPickerButton, {
|
52635
|
+
showPicker: showPicker,
|
52636
|
+
toggleShowPicker: toggleShowPicker
|
52637
|
+
}));
|
52550
52638
|
};
|
52551
52639
|
|
52552
52640
|
// @ts-check
|
@@ -53124,6 +53212,7 @@ function usePollute() {
|
|
53124
53212
|
* @property {string} fontFamily
|
53125
53213
|
* @property {object[]=} customEmojis
|
53126
53214
|
* @property {(text: string) => Promise<MetionUser[]>=} searchMention
|
53215
|
+
* @property {HTMLDivElement=} buttonElement
|
53127
53216
|
*/
|
53128
53217
|
|
53129
53218
|
/**
|
@@ -53153,6 +53242,7 @@ function InputEmoji(props, ref) {
|
|
53153
53242
|
value,
|
53154
53243
|
customEmojis,
|
53155
53244
|
searchMention,
|
53245
|
+
buttonElement,
|
53156
53246
|
// style
|
53157
53247
|
borderRadius,
|
53158
53248
|
borderColor,
|
@@ -53261,12 +53351,12 @@ function InputEmoji(props, ref) {
|
|
53261
53351
|
React.useEffect(() => {
|
53262
53352
|
/** */
|
53263
53353
|
function handleBlur() {
|
53264
|
-
if (typeof onBlur ===
|
53354
|
+
if (typeof onBlur === "function") {
|
53265
53355
|
onBlur();
|
53266
53356
|
}
|
53267
53357
|
}
|
53268
53358
|
|
53269
|
-
const unsubscribe = addEventListener(
|
53359
|
+
const unsubscribe = addEventListener("blur", handleBlur);
|
53270
53360
|
return () => {
|
53271
53361
|
unsubscribe();
|
53272
53362
|
};
|
@@ -53357,7 +53447,8 @@ function InputEmoji(props, ref) {
|
|
53357
53447
|
customEmojis: customEmojis,
|
53358
53448
|
addSanitizeFn: addSanitizeFn,
|
53359
53449
|
addPolluteFn: addPolluteFn,
|
53360
|
-
appendContent: appendContent
|
53450
|
+
appendContent: appendContent,
|
53451
|
+
buttonElement: buttonElement
|
53361
53452
|
}));
|
53362
53453
|
}
|
53363
53454
|
|