@botonic/react
Version:
Build Chatbots using React
37 lines • 2.09 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
import Picker from 'emoji-picker-react';
import React, { useContext } from 'react';
import styled from 'styled-components';
import LogoEmoji from '../../assets/emojiButton.svg';
import { ROLES, WEBCHAT } from '../../constants';
import { WebchatContext } from '../../contexts';
import { ConditionalAnimation } from '../components/conditional-animation';
import { useComponentVisible } from '../hooks';
import { Icon } from './common';
export const EmojiPicker = ({ enableEmojiPicker, onClick }) => {
const { getThemeProperty } = useContext(WebchatContext);
const CustomEmojiPicker = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.customEmojiPicker, undefined);
const isEmojiPickerEnabled = () => {
var _a;
const hasCustomEmojiPicker = !!CustomEmojiPicker;
return ((_a = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.enableEmojiPicker, enableEmojiPicker)) !== null && _a !== void 0 ? _a : hasCustomEmojiPicker);
};
const emojiPickerEnabled = isEmojiPickerEnabled();
const handleClick = event => {
onClick();
event.stopPropagation();
};
return (_jsx(_Fragment, { children: emojiPickerEnabled ? (_jsx(ConditionalAnimation, { children: _jsx("div", Object.assign({ role: ROLES.EMOJI_PICKER_ICON, onClick: handleClick }, { children: CustomEmojiPicker ? (_jsx(CustomEmojiPicker, {})) : (_jsx(Icon, { src: LogoEmoji })) })) })) : null }));
};
const Container = styled.div `
display: flex;
justify-content: flex-end;
position: absolute;
right: 3px;
top: -324px;
`;
export const OpenedEmojiPicker = props => {
const { ref, isComponentVisible } = useComponentVisible(true, props.onClick);
return (_jsx("div", Object.assign({ ref: ref }, { children: isComponentVisible && (_jsx(Container, Object.assign({ role: ROLES.EMOJI_PICKER }, { children: _jsx(Picker, { width: '100%', height: '19rem', previewConfig: { showPreview: false }, onEmojiClick: props.onEmojiClick, disableAutoFocus: true }) }))) })));
};
//# sourceMappingURL=emoji-picker.js.map