fix(iOS): actually fix context menus

closes #138
2026-03-07 01:15:28 +00:00 · 2022-03-05 14:41:41 +00:00
parent fdaadfb428
commit 72792566da
15 changed files with 90 additions and 61 deletions
--- a/src/components/common/IconBase.tsx
+++ b/src/components/common/IconBase.tsx
@@ -1,6 +1,8 @@
 import { Attachment } from "revolt-api/types/Autumn";
 import styled, { css } from "styled-components/macro";

+import { Ref } from "preact";
+
 export interface IconBaseProps<T> {
    target?: T;
    url?: string;
@@ -9,6 +11,8 @@ export interface IconBaseProps<T> {
    size: number;
    hover?: boolean;
    animate?: boolean;
+
+    innerRef?: Ref<any>;
 }

 interface IconModifiers {
--- a/src/components/common/messaging/Message.tsx
+++ b/src/components/common/messaging/Message.tsx
@@ -1,7 +1,8 @@
 import { observer } from "mobx-react-lite";
 import { Message as MessageObject } from "revolt.js/dist/maps/Messages";

-import { attachContextMenu } from "preact-context-menu";
+import { Ref } from "preact";
+import { refContextMenu } from "preact-context-menu";
 import { memo } from "preact/compat";
 import { useEffect, useState } from "preact/hooks";

@@ -64,7 +65,7 @@ const Message = observer(
        // ! TODO: tell fatal to make this type generic
        // bree: Fatal please...
        const userContext = attachContext
-            ? (attachContextMenu("Menu", {
+            ? (refContextMenu("Menu", {
                  user: message.author_id,
                  contextualChannel: message.channel_id,
                  // eslint-disable-next-line
@@ -119,13 +120,13 @@ const Message = observer(
                    sending={typeof queued !== "undefined"}
                    mention={message.mention_ids?.includes(client.user!._id)}
                    failed={typeof queued?.error !== "undefined"}
-                    onContextMenu={
+                    ref={
                        attachContext
-                            ? attachContextMenu("Menu", {
+                            ? (refContextMenu("Menu", {
                                  message,
                                  contextualChannel: message.channel_id,
                                  queued,
-                              })
+                              }) as Ref<HTMLDivElement>)
                            : undefined
                    }
                    onMouseEnter={() => setAnimate(true)}
@@ -137,7 +138,7 @@ const Message = observer(
                                url={message.generateMasqAvatarURL()}
                                target={user}
                                size={36}
-                                onContextMenu={userContext}
+                                innerRef={userContext}
                                onClick={handleUserClick}
                                animate={mouseHovering}
                                showServerIdentity
@@ -154,7 +155,7 @@ const Message = observer(
                                    className="author"
                                    showServerIdentity
                                    onClick={handleUserClick}
-                                    onContextMenu={userContext}
+                                    innerRef={userContext}
                                    masquerade={message.masquerade!}
                                />
                                <MessageDetail
--- a/src/components/common/messaging/SystemMessage.tsx
+++ b/src/components/common/messaging/SystemMessage.tsx
@@ -15,7 +15,8 @@ import { SystemMessage as SystemMessageI } from "revolt-api/types/Channels";
 import { Message } from "revolt.js/dist/maps/Messages";
 import styled from "styled-components/macro";

-import { attachContextMenu } from "preact-context-menu";
+import { Ref } from "preact";
+import { refContextMenu } from "preact-context-menu";

 import { TextReact } from "../../../lib/i18n";

@@ -138,12 +139,12 @@ export const SystemMessage = observer(
        return (
            <MessageBase
                highlight={highlight}
-                onContextMenu={
+                ref={
                    attachContext
-                        ? attachContextMenu("Menu", {
+                        ? (refContextMenu("Menu", {
                              message,
                              contextualChannel: message.channel,
-                          })
+                          }) as Ref<HTMLDivElement>)
                        : undefined
                }>
                {!hideInfo && (
--- a/src/components/common/messaging/attachments/Attachment.tsx
+++ b/src/components/common/messaging/attachments/Attachment.tsx
@@ -2,7 +2,7 @@ import { Attachment as AttachmentI } from "revolt-api/types/Autumn";

 import styles from "./Attachment.module.scss";
 import classNames from "classnames";
-import { attachContextMenu } from "preact-context-menu";
+import { refContextMenu } from "preact-context-menu";
 import { useContext, useState } from "preact/hooks";

 import { AppContext } from "../../../../context/revoltjs/RevoltClient";
@@ -37,7 +37,7 @@ export default function Attachment({ attachment, hasContent }: Props) {
                <SizedGrid
                    width={metadata.width}
                    height={metadata.height}
-                    onContextMenu={attachContextMenu("Menu", {
+                    innerRef={refContextMenu("Menu", {
                        attachment,
                    })}
                    className={classNames({
--- a/src/components/common/messaging/attachments/Grid.tsx
+++ b/src/components/common/messaging/attachments/Grid.tsx
@@ -1,5 +1,7 @@
 import styled from "styled-components/macro";

+import { Ref } from "preact";
+
 import { Children } from "../../../../types/Preact";

 const Grid = styled.div<{ width: number; height: number }>`
@@ -71,13 +73,14 @@ type Props = Omit<
    children?: Children;
    width: number;
    height: number;
+    innerRef?: Ref<any>;
 };

 export function SizedGrid(props: Props) {
-    const { width, height, children, ...divProps } = props;
+    const { width, height, children, innerRef, ...divProps } = props;

    return (
-        <Grid {...divProps} width={width} height={height}>
+        <Grid {...divProps} width={width} height={height} ref={innerRef}>
            {children}
        </Grid>
    );
--- a/src/components/common/user/UserIcon.tsx
+++ b/src/components/common/user/UserIcon.tsx
@@ -70,6 +70,7 @@ export default observer(
            hover,
            showServerIdentity,
            masquerade,
+            innerRef,
            ...svgProps
        } = props;

@@ -103,6 +104,7 @@ export default observer(
        return (
            <IconBase
                {...svgProps}
+                ref={innerRef}
                width={size}
                height={size}
                hover={hover}
--- a/src/components/common/user/UserShort.tsx
+++ b/src/components/common/user/UserShort.tsx
@@ -5,6 +5,7 @@ import { User } from "revolt.js/dist/maps/Users";
 import { Nullable } from "revolt.js/dist/util/null";
 import styled from "styled-components/macro";

+import { Ref } from "preact";
 import { Text } from "preact-i18n";

 import { internalEmit } from "../../../lib/eventEmitter";
@@ -33,6 +34,8 @@ type UsernameProps = JSX.HTMLAttributes<HTMLElement> & {
    prefixAt?: boolean;
    masquerade?: Masquerade;
    showServerIdentity?: boolean | "both";
+
+    innerRef?: Ref<any>;
 };

 export const Username = observer(
@@ -41,6 +44,7 @@ export const Username = observer(
        prefixAt,
        masquerade,
        showServerIdentity,
+        innerRef,
        ...otherProps
    }: UsernameProps) => {
        let username = user?.username;
@@ -83,7 +87,7 @@ export const Username = observer(
        if (user?.bot) {
            return (
                <>
-                    <span {...otherProps} style={{ color }}>
+                    <span {...otherProps} ref={innerRef} style={{ color }}>
                        {masquerade?.name ?? username ?? (
                            <Text id="app.main.channel.unknown_user" />
                        )}
@@ -96,7 +100,7 @@ export const Username = observer(
        }

        return (
-            <span {...otherProps} style={{ color }}>
+            <span {...otherProps} ref={innerRef} style={{ color }}>
                {prefixAt ? "@" : undefined}
                {masquerade?.name ?? username ?? (
                    <Text id="app.main.channel.unknown_user" />
--- a/src/components/navigation/items/ButtonItem.tsx
+++ b/src/components/navigation/items/ButtonItem.tsx
@@ -7,7 +7,8 @@ import { User } from "revolt.js/dist/maps/Users";

 import styles from "./Item.module.scss";
 import classNames from "classnames";
-import { attachContextMenu } from "preact-context-menu";
+import { Ref } from "preact";
+import { refContextMenu } from "preact-context-menu";
 import { Localizer, Text } from "preact-i18n";

 import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
@@ -66,12 +67,14 @@ export const UserButton = observer((props: UserProps) => {
                typeof channel !== "undefined" ||
                (user.online && user.status?.presence !== Presence.Invisible)
            }
-            onContextMenu={attachContextMenu("Menu", {
-                user: user._id,
-                channel: channel?._id,
-                unread: alert,
-                contextualChannel: context?._id,
-            })}>
+            ref={
+                refContextMenu("Menu", {
+                    user: user._id,
+                    channel: channel?._id,
+                    unread: alert,
+                    contextualChannel: context?._id,
+                }) as Ref<HTMLDivElement>
+            }>
            <UserIcon
                className={styles.avatar}
                target={user}
@@ -163,10 +166,12 @@ export const ChannelButton = observer((props: ChannelProps) => {
            data-muted={muted}
            aria-label={channel.name}
            className={classNames(styles.item, { [styles.compact]: compact })}
-            onContextMenu={attachContextMenu("Menu", {
-                channel: channel._id,
-                unread: !!alert,
-            })}>
+            ref={
+                refContextMenu("Menu", {
+                    channel: channel._id,
+                    unread: !!alert,
+                }) as Ref<HTMLDivElement>
+            }>
            <ChannelIcon
                className={styles.avatar}
                target={channel}
--- a/src/components/navigation/left/ServerListSidebar.tsx
+++ b/src/components/navigation/left/ServerListSidebar.tsx
@@ -5,8 +5,8 @@ import { Link, useHistory, useLocation, useParams } from "react-router-dom";
 import { RelationshipStatus } from "revolt-api/types/Users";
 import styled, { css } from "styled-components/macro";

-import { attachContextMenu } from "preact-context-menu";
-import { Text } from "preact-i18n";
+import { Ref } from "preact";
+import { refContextMenu } from "preact-context-menu";

 import ConditionalLink from "../../../lib/ConditionalLink";
 import PaintCounter from "../../../lib/PaintCounter";
@@ -265,7 +265,9 @@ export default observer(() => {
                    <ServerEntry home active={homeActive}>
                        <Swoosh />
                        <div
-                            onContextMenu={attachContextMenu("Status")}
+                            ref={
+                                refContextMenu("Status") as Ref<HTMLDivElement>
+                            }
                            onClick={() =>
                                homeActive && history.push("/settings")
                            }>
@@ -301,10 +303,12 @@ export default observer(() => {
                                <ServerEntry
                                    home
                                    active={false}
-                                    onContextMenu={attachContextMenu("Menu", {
-                                        channel: x._id,
-                                        unread: true,
-                                    })}>
+                                    ref={
+                                        refContextMenu("Menu", {
+                                            channel: x._id,
+                                            unread: true,
+                                        }) as Ref<HTMLDivElement>
+                                    }>
                                    <div>
                                        <Icon
                                            size={42}
@@ -350,10 +354,12 @@ export default observer(() => {
                            to={state.layout.getServerPath(server._id)}>
                            <ServerEntry
                                active={active}
-                                onContextMenu={attachContextMenu("Menu", {
-                                    server: server._id,
-                                    unread: isUnread,
-                                })}>
+                                ref={
+                                    refContextMenu("Menu", {
+                                        server: server._id,
+                                        unread: isUnread,
+                                    }) as Ref<HTMLDivElement>
+                                }>
                                <Swoosh />
                                <Tooltip
                                    content={server.name}
--- a/src/components/navigation/left/ServerSidebar.tsx
+++ b/src/components/navigation/left/ServerSidebar.tsx
@@ -3,7 +3,8 @@ import { Redirect, useParams } from "react-router";
 import { Server } from "revolt.js/dist/maps/Servers";
 import styled, { css } from "styled-components/macro";

-import { attachContextMenu } from "preact-context-menu";
+import { Ref } from "preact";
+import { refContextMenu } from "preact-context-menu";
 import { useEffect } from "preact/hooks";

 import ConditionalLink from "../../../lib/ConditionalLink";
@@ -145,9 +146,11 @@ export default observer(() => {
            <ServerHeader server={server} />
            <ConnectionStatus />
            <ServerList
-                onContextMenu={attachContextMenu("Menu", {
-                    server_list: server._id,
-                })}>
+                ref={
+                    refContextMenu("Menu", {
+                        server_list: server._id,
+                    }) as Ref<HTMLDivElement>
+                }>
                {elements}
            </ServerList>
            <PaintCounter small />
--- a/src/pages/friends/Friend.tsx
+++ b/src/pages/friends/Friend.tsx
@@ -7,7 +7,8 @@ import { User } from "revolt.js/dist/maps/Users";

 import styles from "./Friend.module.scss";
 import classNames from "classnames";
-import { attachContextMenu } from "preact-context-menu";
+import { Ref } from "preact";
+import { refContextMenu } from "preact-context-menu";
 import { Text } from "preact-i18n";
 import { useContext } from "preact/hooks";

@@ -132,7 +133,11 @@ export const Friend = observer(({ user }: Props) => {
        <div
            className={styles.friend}
            onClick={() => openScreen({ id: "profile", user_id: user._id })}
-            onContextMenu={attachContextMenu("Menu", { user: user._id })}>
+            ref={
+                refContextMenu("Menu", {
+                    user: user._id,
+                }) as Ref<HTMLDivElement>
+            }>
            <UserIcon target={user} size={36} status />
            <div className={styles.name}>
                <span>{user.username}</span>