@chayns-components/emoji-input
Version:
Input field that supports HTML elements and emojis
46 lines • 1.9 kB
JavaScript
import { Input } from '@chayns-components/core';
import React, { useCallback, useState } from 'react';
import EmojiPickerCategories from './emoji-picker-categories/EmojiPickerCategories';
import EmojiPickerEmojis from './emoji-picker-emojis/EmojiPickerEmojis';
import { StyledEmojiPicker } from './EmojiPicker.styles';
import { Textstring, TextstringProvider, ttsToITextString } from '@chayns-components/textstring';
import textStrings from '../../constants/textStrings';
const FirstEmojiSlug = 'smileys_emotion';
const EmojiPicker = ({
accessToken,
onSelect,
personId
}) => {
const [searchString, setSearchString] = useState('');
const [selectedCategory, setSelectedCategory] = useState(FirstEmojiSlug);
const handleCategorySelect = useCallback(category => {
setSearchString('');
setSelectedCategory(category);
}, []);
const handleSearchChange = useCallback(event => {
setSearchString(event.target.value);
}, []);
const ts = textStrings.components.emojiPicker.input.placeholder;
return /*#__PURE__*/React.createElement(StyledEmojiPicker, null, /*#__PURE__*/React.createElement(TextstringProvider, {
libraryName: "@chayns-component-emoji-input"
}, /*#__PURE__*/React.createElement(Input, {
onChange: handleSearchChange,
placeholder: /*#__PURE__*/React.createElement(Textstring, {
textstring: ttsToITextString(ts)
}),
value: searchString
})), /*#__PURE__*/React.createElement(EmojiPickerEmojis, {
accessToken: accessToken,
onSelect: onSelect,
personId: personId,
searchString: searchString,
selectedCategory: selectedCategory
}), /*#__PURE__*/React.createElement(EmojiPickerCategories, {
onSelect: handleCategorySelect,
searchString: searchString,
selectedCategory: selectedCategory
}));
};
EmojiPicker.displayName = 'EmojiPicker';
export default EmojiPicker;
//# sourceMappingURL=EmojiPicker.js.map