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 function closeEmojiMartOnEsc(i, event): void {
16 event.key === "Escape" && i.setState({ showPicker: false });
19 export class EmojiPicker extends Component<EmojiPickerProps, EmojiPickerState> {
20 private emptyState: EmojiPickerState = {
24 state: EmojiPickerState;
25 constructor(props: EmojiPickerProps, context: any) {
26 super(props, context);
27 this.state = this.emptyState;
28 this.handleEmojiClick = this.handleEmojiClick.bind(this);
33 <span className="emoji-picker">
35 className="btn btn-sm text-muted"
36 data-tippy-content={I18NextService.i18n.t("emoji")}
37 aria-label={I18NextService.i18n.t("emoji")}
38 disabled={this.props.disabled}
39 onClick={linkEvent(this, this.togglePicker)}
41 <Icon icon="smile" classes="icon-inline" />
44 {this.state.showPicker && (
46 <div className="position-relative" role="dialog">
47 <div className="emoji-picker-container">
49 onEmojiClick={this.handleEmojiClick}
53 {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
55 onClick={linkEvent(this, this.togglePicker)}
56 className="click-away-container"
65 componentWillUnmount() {
66 document.removeEventListener("keyup", e => closeEmojiMartOnEsc(this, e));
69 togglePicker(i: EmojiPicker, e: any) {
71 i.setState({ showPicker: !i.state.showPicker });
74 ? document.addEventListener("keyup", e => closeEmojiMartOnEsc(i, e))
75 : document.removeEventListener("keyup", e => closeEmojiMartOnEsc(i, e));
78 handleEmojiClick(e: any) {
79 this.props.onEmojiClick?.(e);