1 import { Component, linkEvent } from "inferno";
2 import { I18NextService } from "../../services";
3 import { EmojiMart } from "./emoji-mart";
4 import { Icon } from "./icon";
6 interface EmojiPickerProps {
7 onEmojiClick?(val: any): any;
11 interface EmojiPickerState {
15 export class EmojiPicker extends Component<EmojiPickerProps, EmojiPickerState> {
16 private emptyState: EmojiPickerState = {
20 state: EmojiPickerState;
21 constructor(props: EmojiPickerProps, context: any) {
22 super(props, context);
23 this.state = this.emptyState;
24 this.handleEmojiClick = this.handleEmojiClick.bind(this);
28 <span className="emoji-picker">
30 className="btn btn-sm text-muted"
31 data-tippy-content={I18NextService.i18n.t("emoji")}
32 aria-label={I18NextService.i18n.t("emoji")}
33 disabled={this.props.disabled}
34 onClick={linkEvent(this, this.togglePicker)}
36 <Icon icon="smile" classes="icon-inline" />
39 {this.state.showPicker && (
41 <div className="position-relative">
42 <div className="emoji-picker-container position-absolute w-100">
44 onEmojiClick={this.handleEmojiClick}
49 onClick={linkEvent(this, this.togglePicker)}
50 className="click-away-container"
59 togglePicker(i: EmojiPicker, e: any) {
61 i.setState({ showPicker: !i.state.showPicker });
64 handleEmojiClick(e: any) {
65 this.props.onEmojiClick?.(e);