react-input-emoji 4.2.0 → 4.3.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/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.es.js
CHANGED
@@ -1,4 +1,5 @@
|
|
1
|
-
import React, { useRef, useCallback, useImperativeHandle, useEffect, forwardRef, useMemo, memo
|
1
|
+
import React, { useRef, useCallback, useImperativeHandle, useEffect, forwardRef, useState, useMemo, memo } from 'react';
|
2
|
+
import ReactDOM from 'react-dom';
|
2
3
|
import PropTypes from 'prop-types';
|
3
4
|
|
4
5
|
function styleInject(css, ref) {
|
@@ -529,6 +530,51 @@ const TextInput = ({
|
|
529
530
|
|
530
531
|
const TextInputWithRef = /*#__PURE__*/forwardRef(TextInput);
|
531
532
|
|
533
|
+
/* eslint-disable react/prop-types */
|
534
|
+
/**
|
535
|
+
* @typedef {object} Props
|
536
|
+
* @property {boolean} showPicker
|
537
|
+
* @property {(event: React.MouseEvent) => void} toggleShowPicker
|
538
|
+
* @property {HTMLDivElement=} buttonElement
|
539
|
+
*/
|
540
|
+
|
541
|
+
/**
|
542
|
+
* Emoji Picker Button Component
|
543
|
+
* @param {Props} props
|
544
|
+
* @return {JSX.Element}
|
545
|
+
*/
|
546
|
+
|
547
|
+
function EmojiPickerButton({
|
548
|
+
showPicker,
|
549
|
+
toggleShowPicker,
|
550
|
+
buttonElement
|
551
|
+
}) {
|
552
|
+
const buttonRef = useRef(null);
|
553
|
+
const [showCustomButtonContent, setShowCustomButtonContent] = useState(false);
|
554
|
+
useEffect(() => {
|
555
|
+
if ((buttonElement?.childNodes?.length ?? 0) > 2) {
|
556
|
+
buttonRef.current.appendChild(buttonElement?.childNodes[0]);
|
557
|
+
setShowCustomButtonContent(true);
|
558
|
+
}
|
559
|
+
}, [buttonElement?.childNodes]);
|
560
|
+
return /*#__PURE__*/React.createElement("button", {
|
561
|
+
ref: buttonRef,
|
562
|
+
type: "button",
|
563
|
+
className: `react-input-emoji--button${showPicker ? " react-input-emoji--button__show" : ""}`,
|
564
|
+
onClick: toggleShowPicker
|
565
|
+
}, !showCustomButtonContent && /*#__PURE__*/React.createElement("svg", {
|
566
|
+
xmlns: "http://www.w3.org/2000/svg",
|
567
|
+
viewBox: "0 0 24 24",
|
568
|
+
width: "24",
|
569
|
+
height: "24",
|
570
|
+
className: "react-input-emoji--button--icon"
|
571
|
+
}, /*#__PURE__*/React.createElement("path", {
|
572
|
+
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"
|
573
|
+
}), /*#__PURE__*/React.createElement("path", {
|
574
|
+
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"
|
575
|
+
})));
|
576
|
+
}
|
577
|
+
|
532
578
|
var compressed = true;
|
533
579
|
var categories$1 = [
|
534
580
|
{
|
@@ -52381,7 +52427,7 @@ styleInject(css_248z);
|
|
52381
52427
|
* @property {'light' | 'dark' | 'auto'} theme
|
52382
52428
|
* @property {function(import("../types/types").EmojiMartItem): void} onSelectEmoji
|
52383
52429
|
* @property {boolean} disableRecent
|
52384
|
-
* @property {
|
52430
|
+
* @property {import("emoji-mart").CustomEmoji[]=} customEmojis
|
52385
52431
|
*/
|
52386
52432
|
|
52387
52433
|
/**
|
@@ -52426,6 +52472,43 @@ EmojiPicker.propTypes = {
|
|
52426
52472
|
};
|
52427
52473
|
var EmojiPicker$1 = /*#__PURE__*/memo(EmojiPicker);
|
52428
52474
|
|
52475
|
+
/**
|
52476
|
+
* @typedef {object} Props
|
52477
|
+
* @property {boolean} showPicker
|
52478
|
+
* @property {'light' | 'dark' | 'auto'} theme
|
52479
|
+
* @property {(emoji: import("../types/types").EmojiMartItem) => void} handleSelectEmoji
|
52480
|
+
* @property {boolean} disableRecent
|
52481
|
+
* @property {import("emoji-mart").CustomEmoji[]=} customEmojis
|
52482
|
+
*/
|
52483
|
+
|
52484
|
+
/**
|
52485
|
+
* Emoji Picker Button Component
|
52486
|
+
* @param {Props} props
|
52487
|
+
* @return {JSX.Element}
|
52488
|
+
*/
|
52489
|
+
|
52490
|
+
function EmojiPickerContainer({
|
52491
|
+
showPicker,
|
52492
|
+
theme,
|
52493
|
+
handleSelectEmoji,
|
52494
|
+
disableRecent,
|
52495
|
+
customEmojis
|
52496
|
+
}) {
|
52497
|
+
return /*#__PURE__*/React.createElement("div", {
|
52498
|
+
className: "react-emoji-picker--container"
|
52499
|
+
}, showPicker && /*#__PURE__*/React.createElement("div", {
|
52500
|
+
className: "react-emoji-picker--wrapper",
|
52501
|
+
onClick: evt => evt.stopPropagation()
|
52502
|
+
}, /*#__PURE__*/React.createElement("div", {
|
52503
|
+
className: "react-emoji-picker"
|
52504
|
+
}, /*#__PURE__*/React.createElement(EmojiPicker$1, {
|
52505
|
+
theme: theme,
|
52506
|
+
onSelectEmoji: handleSelectEmoji,
|
52507
|
+
disableRecent: disableRecent,
|
52508
|
+
customEmojis: customEmojis
|
52509
|
+
}))));
|
52510
|
+
}
|
52511
|
+
|
52429
52512
|
// @ts-check
|
52430
52513
|
/**
|
52431
52514
|
* @typedef {import('../types/types').SanitizeFn} SanitizeFn
|
@@ -52440,10 +52523,11 @@ var EmojiPicker$1 = /*#__PURE__*/memo(EmojiPicker);
|
|
52440
52523
|
* @property {'light' | 'dark' | 'auto'} theme
|
52441
52524
|
* @property {boolean} keepOpened
|
52442
52525
|
* @property {boolean} disableRecent
|
52443
|
-
* @property {
|
52526
|
+
* @property {import("emoji-mart").CustomEmoji[]=} customEmojis
|
52444
52527
|
* @property {(fn: SanitizeFn) => void} addSanitizeFn
|
52445
52528
|
* @property {(fn: PolluteFn) => void} addPolluteFn
|
52446
52529
|
* @property {(html: string) => void} appendContent
|
52530
|
+
* @property {HTMLDivElement=} buttonElement
|
52447
52531
|
*/
|
52448
52532
|
// eslint-disable-next-line valid-jsdoc
|
52449
52533
|
|
@@ -52457,9 +52541,13 @@ const EmojiPickerWrapper = props => {
|
|
52457
52541
|
customEmojis,
|
52458
52542
|
addSanitizeFn,
|
52459
52543
|
addPolluteFn,
|
52460
|
-
appendContent
|
52544
|
+
appendContent,
|
52545
|
+
buttonElement
|
52461
52546
|
} = props;
|
52462
52547
|
const [showPicker, setShowPicker] = useState(false);
|
52548
|
+
/** @type {[HTMLDivElement | undefined, React.Dispatch<React.SetStateAction<HTMLDivElement | undefined>>]} */
|
52549
|
+
|
52550
|
+
const [customButton, setCustomButton] = useState();
|
52463
52551
|
useEffect(() => {
|
52464
52552
|
addSanitizeFn(replaceAllTextEmojiToString);
|
52465
52553
|
}, [addSanitizeFn]);
|
@@ -52513,33 +52601,32 @@ const EmojiPickerWrapper = props => {
|
|
52513
52601
|
}
|
52514
52602
|
}
|
52515
52603
|
|
52516
|
-
|
52517
|
-
|
52518
|
-
|
52519
|
-
|
52520
|
-
|
52521
|
-
},
|
52522
|
-
|
52523
|
-
|
52604
|
+
useEffect(() => {
|
52605
|
+
if (buttonElement?.style) {
|
52606
|
+
buttonElement.style.position = "relative";
|
52607
|
+
setCustomButton(buttonElement);
|
52608
|
+
}
|
52609
|
+
}, [buttonElement]);
|
52610
|
+
return customButton ? /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(EmojiPickerContainer, {
|
52611
|
+
showPicker: showPicker,
|
52524
52612
|
theme: theme,
|
52525
|
-
|
52613
|
+
handleSelectEmoji: handleSelectEmoji,
|
52526
52614
|
disableRecent: disableRecent,
|
52527
52615
|
customEmojis: customEmojis
|
52528
|
-
})
|
52529
|
-
|
52530
|
-
|
52531
|
-
|
52532
|
-
}, /*#__PURE__*/React.createElement(
|
52533
|
-
|
52534
|
-
|
52535
|
-
|
52536
|
-
|
52537
|
-
|
52538
|
-
}, /*#__PURE__*/React.createElement(
|
52539
|
-
|
52540
|
-
|
52541
|
-
|
52542
|
-
}))));
|
52616
|
+
}), /*#__PURE__*/React.createElement(EmojiPickerButton, {
|
52617
|
+
showPicker: showPicker,
|
52618
|
+
toggleShowPicker: toggleShowPicker,
|
52619
|
+
buttonElement: customButton
|
52620
|
+
})), customButton) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(EmojiPickerContainer, {
|
52621
|
+
showPicker: showPicker,
|
52622
|
+
theme: theme,
|
52623
|
+
handleSelectEmoji: handleSelectEmoji,
|
52624
|
+
disableRecent: disableRecent,
|
52625
|
+
customEmojis: customEmojis
|
52626
|
+
}), /*#__PURE__*/React.createElement(EmojiPickerButton, {
|
52627
|
+
showPicker: showPicker,
|
52628
|
+
toggleShowPicker: toggleShowPicker
|
52629
|
+
}));
|
52543
52630
|
};
|
52544
52631
|
|
52545
52632
|
// @ts-check
|
@@ -53117,6 +53204,7 @@ function usePollute() {
|
|
53117
53204
|
* @property {string} fontFamily
|
53118
53205
|
* @property {object[]=} customEmojis
|
53119
53206
|
* @property {(text: string) => Promise<MetionUser[]>=} searchMention
|
53207
|
+
* @property {HTMLDivElement=} buttonElement
|
53120
53208
|
*/
|
53121
53209
|
|
53122
53210
|
/**
|
@@ -53146,6 +53234,7 @@ function InputEmoji(props, ref) {
|
|
53146
53234
|
value,
|
53147
53235
|
customEmojis,
|
53148
53236
|
searchMention,
|
53237
|
+
buttonElement,
|
53149
53238
|
// style
|
53150
53239
|
borderRadius,
|
53151
53240
|
borderColor,
|
@@ -53254,12 +53343,12 @@ function InputEmoji(props, ref) {
|
|
53254
53343
|
useEffect(() => {
|
53255
53344
|
/** */
|
53256
53345
|
function handleBlur() {
|
53257
|
-
if (typeof onBlur ===
|
53346
|
+
if (typeof onBlur === "function") {
|
53258
53347
|
onBlur();
|
53259
53348
|
}
|
53260
53349
|
}
|
53261
53350
|
|
53262
|
-
const unsubscribe = addEventListener(
|
53351
|
+
const unsubscribe = addEventListener("blur", handleBlur);
|
53263
53352
|
return () => {
|
53264
53353
|
unsubscribe();
|
53265
53354
|
};
|
@@ -53350,7 +53439,8 @@ function InputEmoji(props, ref) {
|
|
53350
53439
|
customEmojis: customEmojis,
|
53351
53440
|
addSanitizeFn: addSanitizeFn,
|
53352
53441
|
addPolluteFn: addPolluteFn,
|
53353
|
-
appendContent: appendContent
|
53442
|
+
appendContent: appendContent,
|
53443
|
+
buttonElement: buttonElement
|
53354
53444
|
}));
|
53355
53445
|
}
|
53356
53446
|
|