src/shared/components/common/emoji-picker.tsx

   1 import { Component, linkEvent } from "inferno";
   2 import { i18n } from "../../i18next";
   3 import { EmojiMart } from "./emoji-mart";
   4 import { Icon } from "./icon";
   5
   6 interface EmojiPickerProps {
   7     onEmojiClick?(val: any): any;
   8 }
   9
  10 interface EmojiPickerState {
  11     showPicker: boolean,
  12 }
  13
  14 export class EmojiPicker extends Component<
  15     EmojiPickerProps,
  16     EmojiPickerState
  17 > {
  18     private emptyState: EmojiPickerState = {
  19         showPicker: false,
  20     };
  21     state: EmojiPickerState;
  22     constructor(props: any, context: any) {
  23         super(props, context);
  24         this.state = this.emptyState;
  25         this.handleEmojiClick = this.handleEmojiClick.bind(this);
  26     }
  27     render() {
  28         return (
  29             <span>
  30                 <button
  31                     className="btn btn-sm text-muted"
  32                     data-tippy-content={i18n.t("emoji")}
  33                     aria-label={i18n.t("emoji")}
  34                     onClick={linkEvent(this,this.togglePicker)}
  35                 >
  36                     <Icon icon="smile" classes="icon-inline" />
  37                 </button>
  38
  39                 {this.state.showPicker && (
  40                     <>
  41                         <div className="emoji-picker-container">
  42                             <EmojiMart onEmojiClick={this.handleEmojiClick} pickerOptions={({})}></EmojiMart>
  43                         </div>
  44                         <div
  45                             onClick={linkEvent(this,this.togglePicker)}
  46                             className="click-away-container"
  47                         />
  48                     </>
  49                 )}
  50             </span>
  51         );
  52     }
  53
  54     togglePicker(i: EmojiPicker, e: any) {
  55         e.preventDefault();
  56         i.setState({ showPicker: !i.state.showPicker });
  57     }
  58
  59     handleEmojiClick(e: any) {
  60         this.props.onEmojiClick?.(e);
  61     }
  62 }