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 function closeEmojiMartOnEsc(i, event): void {
  16   event.key === "Escape" && i.setState({ showPicker: false });
  17 }
  18
  19 export class EmojiPicker extends Component<EmojiPickerProps, EmojiPickerState> {
  20   private emptyState: EmojiPickerState = {
  21     showPicker: false,
  22   };
  23
  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);
  29   }
  30
  31   render() {
  32     return (
  33       <span className="emoji-picker">
  34         <button
  35           className="btn btn-sm btn-link rounded-0 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)}
  40         >
  41           <Icon icon="smile" classes="icon-inline" />
  42         </button>
  43
  44         {this.state.showPicker && (
  45           <>
  46             <div className="position-relative" role="dialog">
  47               <div className="emoji-picker-container">
  48                 <EmojiMart
  49                   onEmojiClick={this.handleEmojiClick}
  50                   pickerOptions={{}}
  51                 ></EmojiMart>
  52               </div>
  53               {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
  54               <div
  55                 onClick={linkEvent(this, this.togglePicker)}
  56                 className="click-away-container"
  57               />
  58             </div>
  59           </>
  60         )}
  61       </span>
  62     );
  63   }
  64
  65   componentWillUnmount() {
  66     document.removeEventListener("keyup", e => closeEmojiMartOnEsc(this, e));
  67   }
  68
  69   togglePicker(i: EmojiPicker, e: any) {
  70     e.preventDefault();
  71     i.setState({ showPicker: !i.state.showPicker });
  72
  73     i.state.showPicker
  74       ? document.addEventListener("keyup", e => closeEmojiMartOnEsc(i, e))
  75       : document.removeEventListener("keyup", e => closeEmojiMartOnEsc(i, e));
  76   }
  77
  78   handleEmojiClick(e: any) {
  79     this.props.onEmojiClick?.(e);
  80   }
  81 }