@botonic/react
Version:
Build Chatbots using React
43 lines • 2.77 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.OpenedEmojiPicker = exports.EmojiPicker = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const emoji_picker_react_1 = tslib_1.__importDefault(require("emoji-picker-react"));
const react_1 = tslib_1.__importStar(require("react"));
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const emojiButton_svg_1 = tslib_1.__importDefault(require("../../assets/emojiButton.svg"));
const constants_1 = require("../../constants");
const contexts_1 = require("../../contexts");
const conditional_animation_1 = require("../components/conditional-animation");
const hooks_1 = require("../hooks");
const common_1 = require("./common");
const EmojiPicker = ({ enableEmojiPicker, onClick }) => {
const { getThemeProperty } = (0, react_1.useContext)(contexts_1.WebchatContext);
const CustomEmojiPicker = getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.customEmojiPicker, undefined);
const isEmojiPickerEnabled = () => {
var _a;
const hasCustomEmojiPicker = !!CustomEmojiPicker;
return ((_a = getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.enableEmojiPicker, enableEmojiPicker)) !== null && _a !== void 0 ? _a : hasCustomEmojiPicker);
};
const emojiPickerEnabled = isEmojiPickerEnabled();
const handleClick = event => {
onClick();
event.stopPropagation();
};
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: emojiPickerEnabled ? ((0, jsx_runtime_1.jsx)(conditional_animation_1.ConditionalAnimation, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ role: constants_1.ROLES.EMOJI_PICKER_ICON, onClick: handleClick }, { children: CustomEmojiPicker ? ((0, jsx_runtime_1.jsx)(CustomEmojiPicker, {})) : ((0, jsx_runtime_1.jsx)(common_1.Icon, { src: emojiButton_svg_1.default })) })) })) : null }));
};
exports.EmojiPicker = EmojiPicker;
const Container = styled_components_1.default.div `
display: flex;
justify-content: flex-end;
position: absolute;
right: 3px;
top: -324px;
`;
const OpenedEmojiPicker = props => {
const { ref, isComponentVisible } = (0, hooks_1.useComponentVisible)(true, props.onClick);
return ((0, jsx_runtime_1.jsx)("div", Object.assign({ ref: ref }, { children: isComponentVisible && ((0, jsx_runtime_1.jsx)(Container, Object.assign({ role: constants_1.ROLES.EMOJI_PICKER }, { children: (0, jsx_runtime_1.jsx)(emoji_picker_react_1.default, { width: '100%', height: '19rem', previewConfig: { showPreview: false }, onEmojiClick: props.onEmojiClick, disableAutoFocus: true }) }))) })));
};
exports.OpenedEmojiPicker = OpenedEmojiPicker;
//# sourceMappingURL=emoji-picker.js.map