@chayns-components/emoji-input
Version:
Input field that supports HTML elements and emojis
256 lines (253 loc) • 10.5 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _core = require("@chayns-components/core");
var _emojilib = _interopRequireDefault(require("emojilib"));
var _react = _interopRequireWildcard(require("react"));
var _emojiDeDE = _interopRequireDefault(require("../../../constants/emoji-de-DE.json"));
var _emojiHistory = require("../../../hooks/emojiHistory");
var _Emoji = _interopRequireDefault(require("./emoji/Emoji"));
var _EmojiPickerEmojis = require("./EmojiPickerEmojis.styles");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); } // @ts-nocheck
const EmojiPickerEmojis = ({
accessToken,
onSelect,
personId,
searchString,
selectedCategory
}) => {
const [shouldPreventScroll, setShouldPreventScroll] = (0, _react.useState)(false);
const [shouldShowSkinTonePopup, setShouldShowSkinTonePopup] = (0, _react.useState)(false);
const [focusedIndex, setFocusedIndex] = (0, _react.useState)(0);
const [emojiCategories, setEmojiCategories] = (0, _react.useState)([]);
const [emojiList, setEmojiList] = (0, _react.useState)([]);
(0, _react.useEffect)(() => {
void Promise.resolve().then(() => _interopRequireWildcard(require('unicode-emoji-json/data-by-group.json'))).then(({
default: categories
}) => {
setEmojiCategories(categories);
});
void Promise.resolve().then(() => _interopRequireWildcard(require('unicode-emoji-json/data-by-emoji.json'))).then(({
default: emojis
}) => {
setEmojiList(emojis);
});
}, []);
const [shouldPreventListener, ref] = (0, _core.useIsMeasuredClone)();
const emojiRef = (0, _react.useRef)(null);
const shouldPreventEmojiControlsRef = (0, _react.useRef)(false);
const combinedRef = (0, _core.useCombinedRefs)(emojiRef, ref);
const {
addOrUpdateEmojiInHistory,
historyEmojis
} = (0, _emojiHistory.useEmojiHistory)({
accessToken,
personId,
selectedCategory
});
const handlePopupVisibilityChange = (0, _react.useCallback)(isVisible => {
setShouldShowSkinTonePopup(isVisible);
shouldPreventEmojiControlsRef.current = isVisible;
setShouldPreventScroll(isVisible);
}, []);
const handleSelect = (0, _react.useCallback)(({
emoji,
name,
skin_tone_support,
index
}) => {
onSelect(emoji);
if (index) {
setFocusedIndex(index);
}
void addOrUpdateEmojiInHistory({
emoji,
name,
skin_tone_support
});
}, [addOrUpdateEmojiInHistory, onSelect]);
(0, _react.useEffect)(() => {
if (selectedCategory) {
setFocusedIndex(0);
const container = emojiRef.current;
if (!container) {
return;
}
container.scrollTop = 0;
}
}, [selectedCategory]);
(0, _react.useEffect)(() => {
const handleKeyDown = event => {
if (shouldPreventListener) {
return;
}
if (!shouldPreventEmojiControlsRef.current && (event.key === 'ArrowUp' || event.key === 'ArrowDown' || event.key === 'ArrowLeft' || event.key === 'ArrowRight')) {
var _emojiRef$current;
event.preventDefault();
const children = (_emojiRef$current = emojiRef.current) === null || _emojiRef$current === void 0 ? void 0 : _emojiRef$current.children;
if (children && children.length > 0) {
const container = emojiRef.current;
let newIndex = focusedIndex !== null ? focusedIndex : 0;
if (event.ctrlKey) {
return;
}
if (event.key === 'ArrowUp') {
newIndex = (newIndex - 6) % children.length;
} else if (event.key === 'ArrowDown') {
newIndex = (newIndex + 6) % children.length;
} else if (event.key === 'ArrowLeft') {
newIndex = (newIndex - 1) % children.length;
} else if (event.key === 'ArrowRight') {
newIndex = (newIndex + 1) % children.length;
}
// remove focus from the old element
if (focusedIndex !== null) {
const prevElement = children[focusedIndex];
prevElement.tabIndex = -1;
}
if (newIndex < 0) {
newIndex = children.length - 1;
} else if (newIndex > children.length - 1) {
newIndex = 0;
}
setFocusedIndex(newIndex);
// Set focus to the element
const newElement = children[newIndex];
newElement.tabIndex = 0;
const containerRect = container.getBoundingClientRect();
const elementRect = newElement.getBoundingClientRect();
if (elementRect.bottom > containerRect.bottom) {
container.scrollTop += elementRect.bottom - containerRect.bottom;
} else if (elementRect.top < containerRect.top) {
container.scrollTop -= containerRect.top - elementRect.top;
}
}
} else if (event.key === 'Enter' && !shouldPreventEmojiControlsRef.current && focusedIndex !== null) {
var _emojiRef$current2;
if (event.ctrlKey) {
setShouldShowSkinTonePopup(true);
return;
}
const {
dataset
} = (_emojiRef$current2 = emojiRef.current) === null || _emojiRef$current2 === void 0 ? void 0 : _emojiRef$current2.children[focusedIndex];
const {
emoji,
name,
skinToneSupport
} = dataset;
if (!emoji || !name || !skinToneSupport) {
return;
}
handleSelect({
emoji,
name,
skin_tone_support: skinToneSupport === 'true'
});
}
};
document.addEventListener('keydown', handleKeyDown);
return () => {
document.removeEventListener('keydown', handleKeyDown);
};
}, [focusedIndex, handleSelect, shouldPreventListener]);
const handleRightClick = (0, _react.useCallback)(index => {
setFocusedIndex(index);
}, []);
const emojis = (0, _react.useMemo)(() => {
var _emojiCategories$find;
if (searchString.trim() !== '') {
const lowerSearchString = searchString.toLowerCase();
const searchResults = [];
Object.entries(emojiList).forEach(([emoji, {
name,
skin_tone_support
}], index) => {
const keywords = _emojilib.default[emoji];
const germanKeywords = _emojiDeDE.default[emoji];
if (name.includes(lowerSearchString) || keywords !== null && keywords !== void 0 && keywords.some(keyword => keyword.includes(lowerSearchString)) || germanKeywords !== null && germanKeywords !== void 0 && germanKeywords.some(keyword => keyword.includes(lowerSearchString))) {
searchResults.push(/*#__PURE__*/_react.default.createElement(_Emoji.default, {
shouldShowSkinTonePopup: index === focusedIndex && skin_tone_support && shouldShowSkinTonePopup,
isSelected: index === focusedIndex,
emoji: emoji,
index: index,
onRightClick: handleRightClick,
isSkinToneSupported: skin_tone_support,
key: name,
name: name,
onPopupVisibilityChange: handlePopupVisibilityChange,
onSelect: e => handleSelect({
emoji: e,
name,
skin_tone_support,
index
}),
emojiList: emojiList
}));
}
});
return searchResults;
}
if (selectedCategory === 'history') {
return historyEmojis.map(({
emoji,
name,
skin_tone_support
}, index) => /*#__PURE__*/_react.default.createElement(_Emoji.default, {
isSelected: index === focusedIndex,
shouldShowSkinTonePopup: index === focusedIndex && skin_tone_support && shouldShowSkinTonePopup,
emoji: emoji,
name: name,
key: name,
index: index,
onRightClick: handleRightClick,
onPopupVisibilityChange: handlePopupVisibilityChange,
onSelect: e => handleSelect({
emoji: e,
name,
skin_tone_support,
index
}),
isSkinToneSupported: false,
emojiList: emojiList
}));
}
return (_emojiCategories$find = emojiCategories.find(({
slug
}) => slug === selectedCategory)) === null || _emojiCategories$find === void 0 ? void 0 : _emojiCategories$find.emojis.map(({
emoji,
name,
skin_tone_support
}, index) => /*#__PURE__*/_react.default.createElement(_Emoji.default, {
isSelected: index === focusedIndex,
shouldShowSkinTonePopup: index === focusedIndex && skin_tone_support && shouldShowSkinTonePopup,
emoji: emoji,
name: name,
index: index,
onRightClick: handleRightClick,
isSkinToneSupported: skin_tone_support,
key: name,
onPopupVisibilityChange: handlePopupVisibilityChange,
onSelect: e => handleSelect({
emoji: e,
name,
skin_tone_support,
index
}),
emojiList: emojiList
}));
}, [searchString, selectedCategory, focusedIndex, shouldShowSkinTonePopup, handleRightClick, handlePopupVisibilityChange, handleSelect, historyEmojis]);
const shouldShowNoContentInfo = !emojis || emojis.length === 0;
return /*#__PURE__*/_react.default.createElement(_EmojiPickerEmojis.StyledEmojiPickerEmojis, {
className: "chayns-scrollbar",
$shouldPreventScroll: shouldPreventScroll,
$shouldShowNoContentInfo: shouldShowNoContentInfo,
ref: combinedRef
}, emojis, shouldShowNoContentInfo && /*#__PURE__*/_react.default.createElement(_EmojiPickerEmojis.StyledEmojiPickerEmojisNoContentInfo, null, "Hier werden die zuletzt verwendeten Emojis angezeigt, die \xFCber diese Auswahl gew\xE4hlt wurden."));
};
EmojiPickerEmojis.displayName = 'EmojiPickerEmojis';
var _default = exports.default = EmojiPickerEmojis;
//# sourceMappingURL=EmojiPickerEmojis.js.map