update to latest major version of react-contexify

package.json

@@ -109,7 +109,7 @@
     "protobufjs": "^6.9.0",
     "rc-slider": "^8.7.1",
     "react": "^16.13.1",
-    "react-contexify": "^4.1.1",
+    "react-contexify": "5.0.0",
     "react-dom": "16.8.3",
     "react-emoji": "^0.5.0",
     "react-emoji-render": "^1.2.4",

ts/components/ConversationListItem.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
 import { isEmpty } from 'lodash';
-import { MenuProvider } from 'react-contexify';
+import { contextMenu } from 'react-contexify';
 
 import { Avatar } from './Avatar';
 import { MessageBody } from './conversation/MessageBody';
@@ -19,6 +19,7 @@ import {
   ConversationListItemContextMenu,
   PropsContextConversationItem,
 } from './session/menu/ConversationListItemContextMenu';
+import { createPortal } from 'react-dom';
 
 export type PropsData = {
   id: string;
@@ -70,6 +71,10 @@ type PropsHousekeeping = {
 
 type Props = PropsData & PropsHousekeeping;
 
+const Portal = ({ children }: { children: any }) => {
+  return createPortal(children, document.querySelector('.inbox.index') as Element);
+}
+
 class ConversationListItem extends React.PureComponent<Props> {
   public constructor(props: Props) {
     super(props);
@@ -103,7 +108,6 @@ class ConversationListItem extends React.PureComponent<Props> {
 
   public renderHeader() {
     const { unreadCount, mentionedUs, i18n, isMe, lastUpdated } = this.props;
-    const {} = this.props;
 
     let atSymbol = null;
     let unreadCountDiv = null;
@@ -221,7 +225,6 @@ class ConversationListItem extends React.PureComponent<Props> {
 
     return (
       <div key={key}>
-        <MenuProvider id={triggerId}>
         <div
           role="button"
           onClick={() => {
@@ -229,6 +232,12 @@ class ConversationListItem extends React.PureComponent<Props> {
               onClick(id);
             }
           }}
+          onContextMenu={(e: any) => {
+            contextMenu.show({
+              id: triggerId,
+              event: e,
+            });
+          }}
           style={style}
           className={classNames(
             'module-conversation-list-item',
@@ -248,8 +257,9 @@ class ConversationListItem extends React.PureComponent<Props> {
             {this.renderMessage()}
           </div>
         </div>
-        </MenuProvider>
+        <Portal>
           <ConversationListItemContextMenu {...this.getMenuProps(triggerId)} />
+        </Portal>
       </div>
     );
   }

ts/components/conversation/ConversationHeader.tsx

@@ -17,11 +17,11 @@ import {
   ConversationAvatar,
   usingClosedConversationDetails,
 } from '../session/usingClosedConversationDetails';
-import { MenuProvider } from 'react-contexify';
 import {
   ConversationHeaderMenu,
   PropsConversationHeaderMenu,
 } from '../session/menu/ConversationHeaderMenu';
+import { contextMenu } from 'react-contexify';
 
 export interface TimerOption {
   name: string;
@@ -309,12 +309,20 @@ class ConversationHeader extends React.Component<Props> {
       return <></>;
     }
     return (
-      <MenuProvider id={triggerId} event="onClick">
+      <div
+        role="button"
+        onClick={(e: any) => {
+          contextMenu.show({
+            id: triggerId,
+            event: e,
+          });
+        }}
+      >
         <SessionIconButton
           iconType={SessionIconType.Ellipses}
           iconSize={SessionIconSize.Medium}
         />
-      </MenuProvider>
+      </div>
     );
   }
 }

ts/components/conversation/Message.tsx

@@ -840,20 +840,8 @@ export class Message extends React.PureComponent<Props, State> {
     } = this.props;
 
     const showRetry = status === 'error' && direction === 'outgoing';
-    const fileName =
-      attachments && attachments[0] ? attachments[0].fileName : null;
-    const isDangerous = isFileDangerous(fileName || '');
     const multipleAttachments = attachments && attachments.length > 1;
 
-    // Wraps a function to prevent event propagation, thus preventing
-    // message selection whenever any of the menu buttons are pressed.
-    const wrap = (f: any, ...args: Array<any>) => (e: any) => {
-      e.event.stopPropagation();
-      if (f) {
-        f(...args);
-      }
-    };
-
     const onContextMenuShown = () => {
       window.contextMenuShown = true;
     };
@@ -880,7 +868,6 @@ export class Message extends React.PureComponent<Props, State> {
         {!multipleAttachments && attachments && attachments[0] ? (
           <Item
             onClick={(e: any) => {
-              e.event.stopPropagation();
               if (onDownload) {
                 onDownload(attachments[0]);
               }
@@ -890,15 +877,13 @@ export class Message extends React.PureComponent<Props, State> {
           </Item>
         ) : null}
 
-        <Item onClick={wrap(onCopyText)}>{window.i18n('copyMessage')}</Item>
+        <Item onClick={onCopyText}>{window.i18n('copyMessage')}</Item>
         <Item onClick={this.onReplyPrivate}>
           {window.i18n('replyToMessage')}
         </Item>
-        <Item onClick={wrap(onShowDetail)}>
-          {window.i18n('moreInformation')}
-        </Item>
+        <Item onClick={onShowDetail}>{window.i18n('moreInformation')}</Item>
         {showRetry ? (
-          <Item onClick={wrap(onRetrySend)}>{window.i18n('resend')}</Item>
+          <Item onClick={onRetrySend}>{window.i18n('resend')}</Item>
         ) : null}
         {isDeletable ? (
           <>
@@ -919,7 +904,7 @@ export class Message extends React.PureComponent<Props, State> {
           </>
         ) : null}
         {isModerator && isPublic ? (
-          <Item onClick={wrap(onBanUser)}>{window.i18n('banUser')}</Item>
+          <Item onClick={onBanUser}>{window.i18n('banUser')}</Item>
         ) : null}
       </Menu>
     );
@@ -1189,8 +1174,6 @@ export class Message extends React.PureComponent<Props, State> {
   }
 
   private onReplyPrivate(e: any) {
-    e.event.stopPropagation();
-    e.event.preventDefault();
     if (this.props && this.props.onReply) {
       this.props.onReply(this.props.timestamp);
     }

ts/components/session/SessionSearchInput.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { animation, Item, Menu, MenuProvider } from 'react-contexify';
+import { animation, contextMenu, Item, Menu } from 'react-contexify';
 import { SessionIconButton, SessionIconSize, SessionIconType } from './icon';
 
 interface Props {
@@ -21,8 +21,15 @@ export class SessionSearchInput extends React.Component<Props> {
 
     return (
       <>
-        <MenuProvider id={triggerId}>
-          <div className="session-search-input">
+        <div
+          className="session-search-input"
+          onContextMenu={(e: any) => {
+            contextMenu.show({
+              id: triggerId,
+              event: e,
+            });
+          }}
+        >
           <SessionIconButton
             iconSize={SessionIconSize.Medium}
             iconType={SessionIconType.Search}
@@ -34,7 +41,6 @@ export class SessionSearchInput extends React.Component<Props> {
             placeholder={this.props.placeholder}
           />
         </div>
-        </MenuProvider>
         <Menu id={triggerId} animation={animation.fade}>
           <Item onClick={() => document.execCommand('undo')}>
             {window.i18n('editMenuUndo')}

yarn.lock

@@ -2253,6 +2253,11 @@ clone@^1.0.2:
   resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
   integrity sha1-2jCcwmPfFZlMaIypAheco8fNfH4=
 
+clsx@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188"
+  integrity sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==
+
 co@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
@@ -8724,13 +8729,12 @@ react-codemirror2@^4.2.1:
   resolved "https://registry.yarnpkg.com/react-codemirror2/-/react-codemirror2-4.3.0.tgz#e79aedca4da60d22402d2cd74f2885a3e5c009fd"
   integrity sha512-tC0n9CHgrQYc976pUlKOaVJYEHAAYTVMers04gNy6jbkFf4rbPlw72y7bbOAfkHHvu6COG5S629Fek30bvHe8w==
 
-react-contexify@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/react-contexify/-/react-contexify-4.1.1.tgz#f5eba1ad82a923c033c91d0abcea1da0a71ebaa1"
-  integrity sha512-WJeRI4ohHEOmNiH0xb62a/eV+5ae168FB7H6pfbeEVJkf0UN7D5H99l6b89poc2LHKN1gOimFjREyY8quGVsXA==
+react-contexify@5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/react-contexify/-/react-contexify-5.0.0.tgz#11b477550a0ee5a9a144399bc17c7c56bbc60057"
+  integrity sha512-2FIp7lxJ6dtfGr8EZ4uVV5p5TQjd0n2h/JU7PrejNIMiCeZWvSVPFh4lj1ZvjXosglBvP7q5JQQ8yUCdSaMSaw==
   dependencies:
-    classnames "^2.2.6"
-    prop-types "^15.6.2"
+    clsx "^1.1.1"
 
 react-dev-utils@^5.0.0:
   version "5.0.3"