@chayns-components/emoji-input
Version:
Input field that supports HTML elements and emojis
130 lines (127 loc) • 5.15 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _dataEmojiComponents = _interopRequireDefault(require("unicode-emoji-json/data-emoji-components.json"));
var _emoji = require("../../../../../utils/emoji");
var _SkinTonePopup = require("./SkinTonePopup.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); }
const SkinTonePopup = ({
anchorAlignment,
anchorOffset,
emoji,
onHidePopup,
onSelect,
overlayPosition,
position,
emojiList
}) => {
const [focusedIndex, setFocusedIndex] = (0, _react.useState)(0);
const skinToneRef = (0, _react.useRef)(null);
const handleOverlayClick = (0, _react.useCallback)(event => {
event.preventDefault();
event.stopPropagation();
onHidePopup();
}, [onHidePopup]);
(0, _react.useEffect)(() => {
const handleKeyDown = event => {
if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
var _skinToneRef$current;
event.preventDefault();
const children = (_skinToneRef$current = skinToneRef.current) === null || _skinToneRef$current === void 0 ? void 0 : _skinToneRef$current.children;
if (children && children.length > 0) {
let newIndex = focusedIndex !== null ? focusedIndex : 0;
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;
newElement.focus();
}
} else if (event.key === 'Enter' && focusedIndex !== null) {
var _skinToneRef$current2;
const {
dataset
} = (_skinToneRef$current2 = skinToneRef.current) === null || _skinToneRef$current2 === void 0 ? void 0 : _skinToneRef$current2.children[focusedIndex];
const {
skinTone
} = dataset;
if (!skinTone) {
return;
}
onSelect(skinTone);
onHidePopup();
} else if (event.key === 'Escape' && event.shiftKey) {
event.preventDefault();
onHidePopup();
}
};
document.addEventListener('keydown', handleKeyDown);
return () => {
document.removeEventListener('keydown', handleKeyDown);
};
}, [focusedIndex, onHidePopup, onSelect]);
const emojis = (0, _react.useMemo)(() => {
const result = [];
Object.entries(_dataEmojiComponents.default).forEach(([key, value], index) => {
if (key.includes('skin_tone')) {
const emojiWithSkinTone = (0, _emoji.addSkinToneToEmoji)(emojiList, emoji, value);
const handleClick = event => {
event.preventDefault();
event.stopPropagation();
onSelect(emojiWithSkinTone);
onHidePopup();
};
result.push(/*#__PURE__*/_react.default.createElement(_SkinTonePopup.StyledSkinTonePopupContentEmoji, {
key: key,
"data-skin-tone": emojiWithSkinTone,
$isSelected: index === focusedIndex,
onClick: handleClick
}, emojiWithSkinTone));
}
});
return result;
}, [emoji, emojiList, focusedIndex, onHidePopup, onSelect]);
return /*#__PURE__*/_react.default.createElement(_SkinTonePopup.StyledMotionSkinTonePopup, {
animate: {
opacity: 1
},
exit: {
opacity: 0
},
initial: {
opacity: 0
},
transition: {
duration: 0.1
}
}, /*#__PURE__*/_react.default.createElement(_SkinTonePopup.StyledSkinTonePopupContent, {
ref: skinToneRef,
$anchorAlignment: anchorAlignment,
$anchorOffset: anchorOffset,
style: position
}, emojis), /*#__PURE__*/_react.default.createElement(_SkinTonePopup.StyledSkinTonePopupOverlay, {
onClick: handleOverlayClick,
style: overlayPosition
}));
};
SkinTonePopup.displayName = 'SkinTonePopup';
var _default = exports.default = SkinTonePopup;
//# sourceMappingURL=SkinTonePopup.js.map