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   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={i18n.t("emoji")}
  32           aria-label={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="emoji-picker-container">
  42               <EmojiMart
  43                 onEmojiClick={this.handleEmojiClick}
  44                 pickerOptions={{}}
  45               ></EmojiMart>
  46             </div>
  47             <div
  48               onClick={linkEvent(this, this.togglePicker)}
  49               className="click-away-container"
  50             />
  51           </>
  52         )}
  53       </span>
  54     );
  55   }
  56
  57   togglePicker(i: EmojiPicker, e: any) {
  58     e.preventDefault();
  59     i.setState({ showPicker: !i.state.showPicker });
  60   }
  61
  62   handleEmojiClick(e: any) {
  63     this.props.onEmojiClick?.(e);
  64   }
  65 }