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

   1 import { Component, linkEvent } from "inferno";
   2 import { I18NextService } from "../../services";
   3 import { EmojiMart } from "./emoji-mart";
   4 import { Icon } from "./icon";
   5
   6 interface EmojiPickerProps {
   7   onEmojiClick?(val: any): any;
   8   disabled?: boolean;
   9 }
  10
  11 interface EmojiPickerState {
  12   showPicker: boolean;
  13 }
  14
  15 export class EmojiPicker extends Component<EmojiPickerProps, EmojiPickerState> {
  16   private emptyState: EmojiPickerState = {
  17     showPicker: false,
  18   };
  19
  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);
  25   }
  26   render() {
  27     return (
  28       <span className="emoji-picker">
  29         <button
  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)}
  35         >
  36           <Icon icon="smile" classes="icon-inline" />
  37         </button>
  38
  39         {this.state.showPicker && (
  40           <>
  41             <div className="position-relative">
  42               <div className="emoji-picker-container position-absolute w-100">
  43                 <EmojiMart
  44                   onEmojiClick={this.handleEmojiClick}
  45                   pickerOptions={{}}
  46                 ></EmojiMart>
  47               </div>
  48               <div
  49                 onClick={linkEvent(this, this.togglePicker)}
  50                 className="click-away-container"
  51               />
  52             </div>
  53           </>
  54         )}
  55       </span>
  56     );
  57   }
  58
  59   togglePicker(i: EmojiPicker, e: any) {
  60     e.preventDefault();
  61     i.setState({ showPicker: !i.state.showPicker });
  62   }
  63
  64   handleEmojiClick(e: any) {
  65     this.props.onEmojiClick?.(e);
  66   }
  67 }