@chayns-components/emoji-input
Version:
Input field that supports HTML elements and emojis
43 lines • 1.61 kB
JavaScript
import { AreaProvider, Icon, Popup } from '@chayns-components/core';
import React, { useCallback, useEffect, useRef } from 'react';
import EmojiPicker from '../emoji-picker/EmojiPicker';
import { StyledEmojiPickerPopup } from './EmojiPickerPopup.styles';
const EmojiPickerPopup = _ref => {
let {
accessToken,
onPopupVisibilityChange,
onSelect,
personId
} = _ref;
const popupRef = useRef(null);
const handleKeyPress = useCallback(event => {
if (event.key === 'Escape' && !event.shiftKey) {
popupRef.current?.hide();
}
}, []);
useEffect(() => {
document.addEventListener('keydown', handleKeyPress);
return () => {
document.addEventListener('keydown', handleKeyPress);
};
}, [handleKeyPress]);
return /*#__PURE__*/React.createElement(StyledEmojiPickerPopup, null, /*#__PURE__*/React.createElement(Popup, {
ref: popupRef,
onHide: () => typeof onPopupVisibilityChange === 'function' ? onPopupVisibilityChange(false) : undefined,
onShow: () => typeof onPopupVisibilityChange === 'function' ? onPopupVisibilityChange(true) : undefined,
content: /*#__PURE__*/React.createElement(AreaProvider, {
shouldChangeColor: false
}, /*#__PURE__*/React.createElement(EmojiPicker, {
accessToken: accessToken,
onSelect: onSelect,
personId: personId
}))
}, /*#__PURE__*/React.createElement(Icon, {
className: "prevent-lose-focus",
icons: ['far fa-smile'],
size: 18
})));
};
EmojiPickerPopup.displayName = 'EmojiPickerPopup';
export default EmojiPickerPopup;
//# sourceMappingURL=EmojiPickerPopup.js.map