Extract RoomWidgetContextMenu

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

src/components/structures/ContextMenu.tsx

@@ -416,8 +416,9 @@ export const aboveLeftOf = (elementRect: DOMRect, chevronFace = ChevronFace.None
     return menuOptions;
 };
 
-export const useContextMenu = (): [boolean, RefObject<HTMLElement>, () => void, () => void, (val: boolean) => void] => {
+type ContextMenuTuple<T> = [boolean, RefObject<T>, () => void, () => void, (val: boolean) => void];
-    const button = useRef<HTMLElement>(null);
+export const useContextMenu = <T extends any = HTMLElement>(): ContextMenuTuple<T> => {
+    const button = useRef<T>(null);
     const [isOpen, setIsOpen] = useState(false);
     const open = () => {
         setIsOpen(true);

src/components/views/context_menus/RoomWidgetContextMenu.tsx

@@ -0,0 +1,79 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React, {useContext} from "react";
+
+import IconizedContextMenu, {IconizedContextMenuOption, IconizedContextMenuOptionList} from "./IconizedContextMenu";
+import {ChevronFace} from "../../structures/ContextMenu";
+import {_t} from "../../../languageHandler";
+import {IApp} from "../../../stores/WidgetStore";
+import defaultDispatcher from "../../../dispatcher/dispatcher";
+import {AppTileActionPayload} from "../../../dispatcher/payloads/AppTileActionPayload";
+import {Action} from "../../../dispatcher/actions";
+import {Capability} from "../../../widgets/WidgetApi";
+import WidgetUtils from "../../../utils/WidgetUtils";
+import ActiveWidgetStore from "../../../stores/ActiveWidgetStore";
+import RoomContext from "../../../contexts/RoomContext";
+
+interface IProps extends React.ComponentProps<typeof IconizedContextMenu> {
+    app: IApp;
+}
+
+const RoomWidgetContextMenu: React.FC<IProps> = ({ onFinished, app, ...props}) => {
+    const {roomId} = useContext(RoomContext);
+
+    let snapshotButton;
+    if (ActiveWidgetStore.widgetHasCapability(app.id, Capability.Screenshot)) {
+        const onSnapshotClick = () => {
+            WidgetUtils.snapshotWidget(app);
+            onFinished();
+        };
+
+        snapshotButton = <IconizedContextMenuOption onClick={onSnapshotClick} label={_t("Take a picture")} />;
+    }
+
+    let deleteButton;
+    if (WidgetUtils.canUserModifyWidgets(roomId)) {
+        const onDeleteClick = () => {
+            defaultDispatcher.dispatch<AppTileActionPayload>({
+                action: Action.AppTileDelete,
+                widgetId: app.id,
+            });
+            onFinished();
+        };
+
+        deleteButton = <IconizedContextMenuOption onClick={onDeleteClick} label={_t("Remove for everyone")} />;
+    }
+
+    const onRevokeClick = () => {
+        defaultDispatcher.dispatch<AppTileActionPayload>({
+            action: Action.AppTileRevoke,
+            widgetId: app.id,
+        });
+        onFinished();
+    };
+
+    return <IconizedContextMenu {...props} chevronFace={ChevronFace.None} onFinished={onFinished}>
+        <IconizedContextMenuOptionList>
+            { snapshotButton }
+            { deleteButton }
+            <IconizedContextMenuOption onClick={onRevokeClick} label={_t("Remove for me")} />
+        </IconizedContextMenuOptionList>
+    </IconizedContextMenu>;
+};
+
+export default RoomWidgetContextMenu;
+

src/components/views/right_panel/WidgetCard.tsx

@@ -29,16 +29,10 @@ import defaultDispatcher from "../../../dispatcher/dispatcher";
 import {SetRightPanelPhasePayload} from "../../../dispatcher/payloads/SetRightPanelPhasePayload";
 import {Action} from "../../../dispatcher/actions";
 import WidgetStore from "../../../stores/WidgetStore";
-import ActiveWidgetStore from "../../../stores/ActiveWidgetStore";
 import {ChevronFace, ContextMenuButton, useContextMenu} from "../../structures/ContextMenu";
-import IconizedContextMenu, {
-    IconizedContextMenuOption,
-    IconizedContextMenuOptionList,
-} from "../context_menus/IconizedContextMenu";
-import {AppTileActionPayload} from "../../../dispatcher/payloads/AppTileActionPayload";
-import {Capability} from "../../../widgets/WidgetApi";
 import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
 import classNames from "classnames";
+import RoomWidgetContextMenu from "../context_menus/RoomWidgetContextMenu";
 
 interface IProps {
     room: Room;
@@ -76,51 +70,15 @@ const WidgetCard: React.FC<IProps> = ({ room, widgetId, onClose }) => {
 
     let contextMenu;
     if (menuDisplayed) {
-        let snapshotButton;
-        if (ActiveWidgetStore.widgetHasCapability(app.id, Capability.Screenshot)) {
-            const onSnapshotClick = () => {
-                WidgetUtils.snapshotWidget(app);
-                closeMenu();
-            };
-
-            snapshotButton = <IconizedContextMenuOption onClick={onSnapshotClick} label={_t("Take a picture")} />;
-        }
-
-        let deleteButton;
-        if (canModify) {
-            const onDeleteClick = () => {
-                defaultDispatcher.dispatch<AppTileActionPayload>({
-                    action: Action.AppTileDelete,
-                    widgetId: app.id,
-                });
-                closeMenu();
-            };
-
-            deleteButton = <IconizedContextMenuOption onClick={onDeleteClick} label={_t("Remove for everyone")} />;
-        }
-
-        const onRevokeClick = () => {
-            defaultDispatcher.dispatch<AppTileActionPayload>({
-                action: Action.AppTileRevoke,
-                widgetId: app.id,
-            });
-            closeMenu();
-        };
-
         const rect = handle.current.getBoundingClientRect();
         contextMenu = (
-            <IconizedContextMenu
+            <RoomWidgetContextMenu
                 chevronFace={ChevronFace.None}
                 right={window.innerWidth - rect.right}
                 bottom={window.innerHeight - rect.top}
                 onFinished={closeMenu}
-            >
+                app={app}
-                <IconizedContextMenuOptionList>
+            />
-                    { snapshotButton }
-                    { deleteButton }
-                    <IconizedContextMenuOption onClick={onRevokeClick} label={_t("Remove for me")} />
-                </IconizedContextMenuOptionList>
-            </IconizedContextMenu>
         );
     }