@chayns-components/emoji-input
Version:
Input field that supports HTML elements and emojis
40 lines • 1.55 kB
JavaScript
import { Input } from '@chayns-components/core';
import React, { useCallback, useState } from 'react';
import emojiCategories from 'unicode-emoji-json/data-by-group.json';
import EmojiPickerCategories from './emoji-picker-categories/EmojiPickerCategories';
import EmojiPickerEmojis from './emoji-picker-emojis/EmojiPickerEmojis';
import { StyledEmojiPicker } from './EmojiPicker.styles';
const EmojiPicker = _ref => {
let {
accessToken,
onSelect,
personId
} = _ref;
const [searchString, setSearchString] = useState('');
const [selectedCategory, setSelectedCategory] = useState(emojiCategories[0]?.slug);
const handleCategorySelect = useCallback(category => {
setSearchString('');
setSelectedCategory(category);
}, []);
const handleSearchChange = useCallback(event => {
setSearchString(event.target.value);
}, []);
return /*#__PURE__*/React.createElement(StyledEmojiPicker, null, /*#__PURE__*/React.createElement(Input, {
onChange: handleSearchChange,
placeholder: "Suchen",
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