update to latest major version of react-contexify

4 years ago · d729e49840
parent efa45f7cbe
commit d729e49840
6 changed files with 125 additions and 114 deletions
--- a/package.json
+++ b/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",
--- a/ts/components/ConversationListItem.tsx
+++ b/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;
@ -184,14 +188,14 @@ class ConversationListItem extends React.PureComponent<Props> {
          {isTyping ? (
            <TypingAnimation i18n={i18n} />
          ) : (
-            <MessageBody
-              isGroup={true}
-              text={text}
-              disableJumbomoji={true}
-              disableLinks={true}
-              i18n={i18n}
-            />
-          )}
+              <MessageBody
+                isGroup={true}
+                text={text}
+                disableJumbomoji={true}
+                disableLinks={true}
+                i18n={i18n}
+              />
+            )}
        </div>
        {lastMessage && lastMessage.status ? (
          <div
@ -221,35 +225,41 @@ class ConversationListItem extends React.PureComponent<Props> {

    return (
      <div key={key}>
-        <MenuProvider id={triggerId}>
-          <div
-            role="button"
-            onClick={() => {
-              if (onClick) {
-                onClick(id);
-              }
-            }}
-            style={style}
-            className={classNames(
-              'module-conversation-list-item',
-              unreadCount > 0
-                ? 'module-conversation-list-item--has-unread'
-                : null,
-              unreadCount > 0 && mentionedUs
-                ? 'module-conversation-list-item--mentioned-us'
-                : null,
-              isSelected ? 'module-conversation-list-item--is-selected' : null,
-              isBlocked ? 'module-conversation-list-item--is-blocked' : null
-            )}
-          >
-            {this.renderAvatar()}
-            <div className="module-conversation-list-item__content">
-              {this.renderHeader()}
-              {this.renderMessage()}
-            </div>
+        <div
+          role="button"
+          onClick={() => {
+            if (onClick) {
+              onClick(id);
+            }
+          }}
+          onContextMenu={(e: any) => {
+            contextMenu.show({
+              id: triggerId,
+              event: e,
+            });
+          }}
+          style={style}
+          className={classNames(
+            'module-conversation-list-item',
+            unreadCount > 0
+              ? 'module-conversation-list-item--has-unread'
+              : null,
+            unreadCount > 0 && mentionedUs
+              ? 'module-conversation-list-item--mentioned-us'
+              : null,
+            isSelected ? 'module-conversation-list-item--is-selected' : null,
+            isBlocked ? 'module-conversation-list-item--is-blocked' : null
+          )}
+        >
+          {this.renderAvatar()}
+          <div className="module-conversation-list-item__content">
+            {this.renderHeader()}
+            {this.renderMessage()}
          </div>
-        </MenuProvider>
-        <ConversationListItemContextMenu {...this.getMenuProps(triggerId)} />
+        </div>
+        <Portal>
+          <ConversationListItemContextMenu {...this.getMenuProps(triggerId)} />
+        </Portal>
      </div>
    );
  }
--- a/ts/components/conversation/ConversationHeader.tsx
+++ b/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>
    );
  }
 }
--- a/ts/components/conversation/Message.tsx
+++ b/ts/components/conversation/Message.tsx
@ -291,15 +291,15 @@ export class Message extends React.PureComponent<Props, State> {
            {window.i18n('sendFailed')}
          </span>
        ) : (
-          <Timestamp
-            i18n={window.i18n}
-            timestamp={serverTimestamp || timestamp}
-            extended={true}
-            direction={direction}
-            withImageNoCaption={withImageNoCaption}
-            module="module-message__metadata__date"
-          />
-        )}
+            <Timestamp
+              i18n={window.i18n}
+              timestamp={serverTimestamp || timestamp}
+              extended={true}
+              direction={direction}
+              withImageNoCaption={withImageNoCaption}
+              module="module-message__metadata__date"
+            />
+          )}
        {this.renderMetadataBadges()}
        {expirationLength && expirationTimestamp ? (
          <ExpireTimer
@ -473,30 +473,30 @@ export class Message extends React.PureComponent<Props, State> {
              <Spinner size="small" direction={direction} />
            </div>
          ) : (
-            <div className="module-message__generic-attachment__icon-container">
-              <div
-                role="button"
-                className="module-message__generic-attachment__icon"
-                onClick={(e: any) => {
-                  if (this.props?.onDownload) {
-                    e.stopPropagation();
-                    this.props.onDownload(firstAttachment);
-                  }
-                }}
-              >
-                {extension ? (
-                  <div className="module-message__generic-attachment__icon__extension">
-                    {extension}
+              <div className="module-message__generic-attachment__icon-container">
+                <div
+                  role="button"
+                  className="module-message__generic-attachment__icon"
+                  onClick={(e: any) => {
+                    if (this.props?.onDownload) {
+                      e.stopPropagation();
+                      this.props.onDownload(firstAttachment);
+                    }
+                  }}
+                >
+                  {extension ? (
+                    <div className="module-message__generic-attachment__icon__extension">
+                      {extension}
+                    </div>
+                  ) : null}
+                </div>
+                {isDangerous ? (
+                  <div className="module-message__generic-attachment__icon-dangerous-container">
+                    <div className="module-message__generic-attachment__icon-dangerous" />
                  </div>
                ) : null}
              </div>
-              {isDangerous ? (
-                <div className="module-message__generic-attachment__icon-dangerous-container">
-                  <div className="module-message__generic-attachment__icon-dangerous" />
-                </div>
-              ) : null}
-            </div>
-          )}
+            )}
          <div className="module-message__generic-attachment__text">
            <div
              className={classNames(
@ -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);
    }
--- a/ts/components/session/SessionSearchInput.tsx
+++ b/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,20 +21,26 @@ export class SessionSearchInput extends React.Component<Props> {

    return (
      <>
-        <MenuProvider id={triggerId}>
-          <div className="session-search-input">
-            <SessionIconButton
-              iconSize={SessionIconSize.Medium}
-              iconType={SessionIconType.Search}
-            />
-            <input
-              value={searchString}
-              onChange={e => this.props.onChange(e.target.value)}
-              onKeyDown={this.handleKeyDown}
-              placeholder={this.props.placeholder}
-            />
-          </div>
-        </MenuProvider>
+        <div
+          className="session-search-input"
+          onContextMenu={(e: any) => {
+            contextMenu.show({
+              id: triggerId,
+              event: e,
+            });
+          }}
+        >
+          <SessionIconButton
+            iconSize={SessionIconSize.Medium}
+            iconType={SessionIconType.Search}
+          />
+          <input
+            value={searchString}
+            onChange={e => this.props.onChange(e.target.value)}
+            onKeyDown={this.handleKeyDown}
+            placeholder={this.props.placeholder}
+          />
+        </div>
        <Menu id={triggerId} animation={animation.fade}>
          <Item onClick={() => document.execCommand('undo')}>
            {window.i18n('editMenuUndo')}
--- a/yarn.lock
+++ b/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"