@chayns-components/emoji-input
Version:
Input field that supports HTML elements and emojis
37 lines • 1.61 kB
JavaScript
import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { convertTextToHTML } from '../../../utils/text';
import { StyledPrefixElement, StyledPrefixElementLetter, StyledPrefixElementLetterWrapper, StyledPrefixElementPseudo } from './PrefixElement.styles';
const PrefixElement = ({
prefixElementRef,
element,
setIsPrefixAnimationFinished
}) => {
const [shouldShow, setShouldShow] = useState(true);
const [prefixText, setPrefixText] = useState('');
useEffect(() => {
if (prefixElementRef.current) {
setPrefixText(prefixElementRef.current.textContent ?? '');
}
}, [prefixElementRef]);
const handleAnimationEnd = useCallback(index => {
if (index === prefixText.length - 1) {
setShouldShow(false);
setIsPrefixAnimationFinished(true);
}
}, [prefixText.length, setIsPrefixAnimationFinished]);
const content = useMemo(() => prefixText.split('').map((letter, index) => /*#__PURE__*/React.createElement(StyledPrefixElementLetter, {
onAnimationEnd: () => handleAnimationEnd(index),
$index: index
}, letter)), [handleAnimationEnd, prefixText]);
return /*#__PURE__*/React.createElement(StyledPrefixElement, {
$shouldShow: shouldShow
}, /*#__PURE__*/React.createElement(StyledPrefixElementPseudo, {
ref: prefixElementRef,
dangerouslySetInnerHTML: {
__html: convertTextToHTML(element)
}
}), shouldShow && /*#__PURE__*/React.createElement(StyledPrefixElementLetterWrapper, null, content));
};
PrefixElement.displayName = 'PrefixElement';
export default PrefixElement;
//# sourceMappingURL=PrefixElement.js.map