@chayns-components/emoji-input
Version:
Input field that supports HTML elements and emojis
44 lines (43 loc) • 2.39 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _text = require("../../../utils/text");
var _PrefixElement = require("./PrefixElement.styles");
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 PrefixElement = ({
prefixElementRef,
element,
setIsPrefixAnimationFinished
}) => {
const [shouldShow, setShouldShow] = (0, _react.useState)(true);
const [prefixText, setPrefixText] = (0, _react.useState)('');
(0, _react.useEffect)(() => {
if (prefixElementRef.current) {
setPrefixText(prefixElementRef.current.textContent ?? '');
}
}, [prefixElementRef]);
const handleAnimationEnd = (0, _react.useCallback)(index => {
if (index === prefixText.length - 1) {
setShouldShow(false);
setIsPrefixAnimationFinished(true);
}
}, [prefixText.length, setIsPrefixAnimationFinished]);
const content = (0, _react.useMemo)(() => prefixText.split('').map((letter, index) => /*#__PURE__*/_react.default.createElement(_PrefixElement.StyledPrefixElementLetter, {
onAnimationEnd: () => handleAnimationEnd(index),
$index: index
}, letter)), [handleAnimationEnd, prefixText]);
return /*#__PURE__*/_react.default.createElement(_PrefixElement.StyledPrefixElement, {
$shouldShow: shouldShow
}, /*#__PURE__*/_react.default.createElement(_PrefixElement.StyledPrefixElementPseudo, {
ref: prefixElementRef,
dangerouslySetInnerHTML: {
__html: (0, _text.convertTextToHTML)(element)
}
}), shouldShow && /*#__PURE__*/_react.default.createElement(_PrefixElement.StyledPrefixElementLetterWrapper, null, content));
};
PrefixElement.displayName = 'PrefixElement';
var _default = exports.default = PrefixElement;
//# sourceMappingURL=PrefixElement.js.map