Add emoji

package.json

@@ -30,12 +30,14 @@
     "@zero-tech/zapp-daos": "^0.4.0",
     "@zero-tech/zapp-nfts": "^0.7.5",
     "@zero-tech/zapp-staking": "0.4.8",
-    "@zero-tech/zui": "^0.12.0",
+    "@zero-tech/zui": "^0.15.0",
     "classnames": "^2.3.1",
+    "emoji-mart": "^3.0.1",
     "es6-promise-debounce": "^1.0.1",
     "ethers": "^5.5.2",
     "global": "^4.4.0",
     "history": "^4.10.1",
+    "if-emoji": "^0.1.0",
     "linkify-react": "^4.0.2",
     "linkifyjs": "^4.0.2",
     "lodash.get": "^4.4.2",

src/components/chat-view-container/chat-view.test.tsx

@@ -7,7 +7,7 @@ import { MediaType } from '../../store/messages';
 import InvertedScroll from '../inverted-scroll';
 import IndicatorMessage from '../indicator-message';
 import { Lightbox } from '@zer0-os/zos-component-library';
-import { MessageInput } from '../message-input';
+import { MessageInput } from '../message-input/container';
 import { Button as ConnectButton } from '../authentication/button';
 import { IfAuthenticated } from '../authentication/if-authenticated';
 import { Message } from '../message';

src/components/chat-view-container/chat-view.tsx

@@ -9,7 +9,7 @@ import { Lightbox } from '@zer0-os/zos-component-library';
 import { provider as cloudinaryProvider } from '../../lib/cloudinary/provider';
 import { User } from '../../store/authentication/types';
 import { User as UserModel } from '../../store/channels/index';
-import { MessageInput } from '../message-input';
+import { MessageInput } from '../message-input/container';
 import { IfAuthenticated } from '../authentication/if-authenticated';
 import { Button as ConnectButton } from '../authentication/button';
 import { Button as ComponentButton } from '@zer0-os/zos-component-library';

src/components/message-input/container.tsx

@@ -0,0 +1,60 @@
+import React, { RefObject } from 'react';
+import { User } from '../../store/channels';
+import { UserForMention, Media } from './utils';
+import { RootState } from '../../store';
+import { connectContainer } from '../../store/redux-container';
+import { ViewModes } from '../../shared-components/theme-engine';
+import { MessageInput as MessageInputComponent } from './index';
+import { ParentMessage } from '../../lib/chat/types';
+
+export interface PublicProperties {
+  className?: string;
+  onSubmit: (message: string, mentionedUserIds: User['id'][], media: Media[]) => void;
+  initialValue?: string;
+  getUsersForMentions: (search: string) => Promise<UserForMention[]>;
+  renderAfterInput?: (value: string, mentionedUserIds: User['id'][]) => React.ReactNode;
+  onMessageInputRendered?: (textareaRef: RefObject<HTMLTextAreaElement>) => void;
+  id?: string;
+  reply?: null | ParentMessage;
+  onRemoveReply?: () => void;
+}
+
+export interface Properties extends PublicProperties {
+  viewMode: ViewModes;
+}
+
+export class Container extends React.Component<Properties> {
+  static mapState(state: RootState): Partial<Properties> {
+    const {
+      theme: {
+        value: { viewMode },
+      },
+    } = state;
+
+    return {
+      viewMode,
+    };
+  }
+
+  static mapActions(_props: Properties): Partial<Properties> {
+    return {};
+  }
+
+  render() {
+    return (
+      <MessageInputComponent
+        className={this.props.className}
+        initialValue={this.props.initialValue}
+        onSubmit={this.props.onSubmit}
+        getUsersForMentions={this.props.getUsersForMentions}
+        renderAfterInput={this.props.renderAfterInput}
+        onMessageInputRendered={this.props.onMessageInputRendered}
+        onRemoveReply={this.props.onRemoveReply}
+        viewMode={this.props.viewMode}
+        reply={this.props.reply}
+      />
+    );
+  }
+}
+
+export const MessageInput = connectContainer<PublicProperties>(Container);

src/components/message-input/emoji-picker.test.tsx

@@ -0,0 +1,74 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+import { ViewModes } from '../../shared-components/theme-engine';
+import { EmojiPicker, Properties } from './emoji-picker';
+import { Picker } from 'emoji-mart';
+
+describe('EmojiPicker', () => {
+  const subject = (props: Partial<Properties>) => {
+    const allProps: Properties = {
+      textareaRef: { current: null },
+      isOpen: true,
+      onOpen: jest.fn(),
+      onClose: jest.fn(),
+      value: null,
+      onSelect: jest.fn(),
+      viewMode: ViewModes.Dark,
+      ...props,
+    };
+
+    return shallow(<EmojiPicker {...allProps} />);
+  };
+
+  const initialDocument = global.document;
+
+  beforeEach(() => {
+    // @ts-ignore
+    global.document = {
+      addEventListener: jest.fn(),
+      removeEventListener: jest.fn(),
+    };
+  });
+
+  afterEach(() => {
+    global.document = initialDocument;
+  });
+
+  it('renders Picker', () => {
+    const wrapper = subject({});
+
+    expect(wrapper.find(Picker).exists()).toBeTrue();
+  });
+
+  it('attach mousedown listener to document', () => {
+    subject({});
+
+    expect(global.document.addEventListener).toHaveBeenCalledWith('mousedown', expect.any(Function));
+  });
+
+  it('removeEventListener mousedown listener to document', () => {
+    const wrapper = subject({});
+
+    (wrapper.instance() as any).componentWillUnmount();
+
+    expect(global.document.removeEventListener).toHaveBeenCalledWith('mousedown', expect.any(Function));
+  });
+
+  it('does not render', () => {
+    const wrapper = subject({ isOpen: false });
+
+    expect(wrapper.find(Picker).exists()).toBeFalsy();
+  });
+
+  it('passes props', () => {
+    const wrapper = subject({});
+
+    expect(wrapper.find(Picker).props()).toEqual(
+      expect.objectContaining({
+        theme: ViewModes.Dark,
+        emoji: 'mechanical_arm',
+        title: 'ZOS',
+      })
+    );
+  });
+});

src/components/message-input/emoji-picker.tsx

@@ -0,0 +1,84 @@
+import React, { RefObject } from 'react';
+import { mentionsConfigs } from './mentions-config';
+import { Picker } from 'emoji-mart';
+import { ViewModes } from '../../shared-components/theme-engine';
+import { mapPlainTextIndex } from './react-mentions-utils';
+
+import 'emoji-mart/css/emoji-mart.css';
+
+export interface Properties {
+  textareaRef: RefObject<HTMLTextAreaElement>;
+  isOpen: boolean;
+  onOpen: () => void;
+  onClose: () => void;
+  value: string;
+  viewMode: ViewModes;
+  onSelect: (value: string) => void;
+}
+
+export class EmojiPicker extends React.Component<Properties> {
+  componentDidMount() {
+    document.addEventListener('mousedown', this.clickOutsideEmojiCheck);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('mousedown', this.clickOutsideEmojiCheck);
+  }
+
+  clickOutsideEmojiCheck = (event: MouseEvent) => {
+    if (!this.props.isOpen) {
+      return;
+    }
+
+    const [emojiMart] = document.getElementsByClassName('emoji-mart');
+
+    if (emojiMart && event && event.target) {
+      if (!emojiMart.contains(event.target as Node)) {
+        this.props.onClose();
+      }
+    }
+  };
+
+  insertEmoji = (emoji: any) => {
+    const emojiToInsert = (emoji.native || emoji.colons) + ' ';
+
+    const selectionStart = this.props.textareaRef && this.props.textareaRef.current.selectionStart;
+    const position =
+      selectionStart != null ? mapPlainTextIndex(this.props.value, mentionsConfigs, selectionStart, 'START') : null;
+
+    const value = this.props.value;
+    const newValue =
+      position == null
+        ? value + emojiToInsert
+        : [
+            value.slice(0, position),
+            emojiToInsert,
+            value.slice(position),
+          ].join('');
+
+    this.props.onSelect(newValue);
+  };
+
+  get pickerViewMode() {
+    if (this.props.viewMode === ViewModes.Dark) {
+      return 'dark';
+    } else {
+      return 'light';
+    }
+  }
+
+  render() {
+    if (!this.props.isOpen) {
+      return null;
+    }
+
+    return (
+      <Picker
+        theme={this.pickerViewMode}
+        emoji='mechanical_arm'
+        title='ZOS'
+        onSelect={this.insertEmoji}
+      />
+    );
+  }
+}

src/components/message-input/index.test.tsx

@@ -7,6 +7,8 @@ import { Key } from '../../lib/keyboard-search';
 import Dropzone from 'react-dropzone';
 import { config } from '../../config';
 import ReplyCard from '../reply-card/reply-card';
+import { ViewModes } from '../../shared-components/theme-engine';
+import { EmojiPicker } from './emoji-picker';
 
 describe('MessageInput', () => {
   const subject = (props: Partial<Properties>, child: any = <div />) => {
@@ -23,6 +25,7 @@ describe('MessageInput', () => {
         addPasteListener: (_) => {},
         removePasteListener: (_) => {},
       },
+      viewMode: ViewModes.Dark,
       ...props,
     };
 
@@ -156,6 +159,19 @@ describe('MessageInput', () => {
     ]);
   });
 
+  describe('Emojis', () => {
+    const getEmojiPicker = () => {
+      const wrapper = subject({});
+      return wrapper.find(Dropzone).shallow().find(EmojiPicker);
+    };
+
+    it('renders', function () {
+      const emojiPicker = getEmojiPicker();
+
+      expect(emojiPicker.exists()).toBe(true);
+    });
+  });
+
   async function userSearch(wrapper, search) {
     const userMentionHandler = wrapper
       .find(Dropzone)