Move many widget options to a context menu

Part of https://github.com/vector-im/riot-web/issues/11262

src/components/views/context_menus/WidgetContextMenu.js

@@ -0,0 +1,134 @@
+/*
+Copyright 2019 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 from 'react';
+import PropTypes from 'prop-types';
+import sdk from '../../../index';
+import {_t} from '../../../languageHandler';
+
+export default class WidgetContextMenu extends React.Component {
+    static propTypes = {
+        onFinished: PropTypes.func,
+
+        // Callback for when the revoke button is clicked. Required.
+        onRevokeClicked: PropTypes.func.isRequired,
+
+        // Callback for when the snapshot button is clicked. Button not shown
+        // without a callback.
+        onSnapshotClicked: PropTypes.func,
+
+        // Callback for when the reload button is clicked. Button not shown
+        // without a callback.
+        onReloadClicked: PropTypes.func,
+
+        // Callback for when the edit button is clicked. Button not shown
+        // without a callback.
+        onEditClicked: PropTypes.func,
+
+        // Callback for when the delete button is clicked. Button not shown
+        // without a callback.
+        onDeleteClicked: PropTypes.func,
+    };
+
+    proxyClick(fn) {
+        fn();
+        if (this.props.onFinished) this.props.onFinished();
+    }
+
+    // XXX: It's annoying that our context menus require us to hit onFinished() to close :(
+
+    onEditClicked = () => {
+        this.proxyClick(this.props.onEditClicked);
+    };
+
+    onReloadClicked = () => {
+        this.proxyClick(this.props.onReloadClicked);
+    };
+
+    onSnapshotClicked = () => {
+        this.proxyClick(this.props.onSnapshotClicked);
+    };
+
+    onDeleteClicked = () => {
+        this.proxyClick(this.props.onDeleteClicked);
+    };
+
+    onRevokeClicked = () => {
+        this.proxyClick(this.props.onRevokeClicked);
+    };
+
+    render() {
+        const AccessibleButton = sdk.getComponent("views.elements.AccessibleButton");
+
+        const options = [];
+
+        if (this.props.onEditClicked) {
+            options.push(
+                <AccessibleButton className='mx_WidgetContextMenu_option' onClick={this.onEditClicked} key='edit'>
+                    {_t("Edit")}
+                </AccessibleButton>,
+            );
+        }
+
+        if (this.props.onReloadClicked) {
+            options.push(
+                <AccessibleButton className='mx_WidgetContextMenu_option' onClick={this.onReloadClicked}
+                                  key='reload'>
+                    {_t("Reload")}
+                </AccessibleButton>,
+            );
+        }
+
+        if (this.props.onSnapshotClicked) {
+            options.push(
+                <AccessibleButton className='mx_WidgetContextMenu_option' onClick={this.onSnapshotClicked}
+                                  key='snap'>
+                    {_t("Take picture")}
+                </AccessibleButton>,
+            );
+        }
+
+        if (this.props.onDeleteClicked) {
+            options.push(
+                <AccessibleButton className='mx_WidgetContextMenu_option' onClick={this.onDeleteClicked}
+                                  key='delete'>
+                    {_t("Remove for everyone")}
+                </AccessibleButton>,
+            );
+        }
+
+        // Push this last so it appears last. It's always present.
+        options.push(
+            <AccessibleButton className='mx_WidgetContextMenu_option' onClick={this.onRevokeClicked} key='revoke'>
+                {_t("Remove for me")}
+            </AccessibleButton>,
+        );
+
+        // Put separators between the options
+        if (options.length > 1) {
+            const length = options.length;
+            for (let i = 0; i < length - 1; i++) {
+                const sep = <hr key={i} className="mx_WidgetContextMenu_separator" />;
+
+                // Insert backwards so the insertions don't affect our math on where to place them.
+                // We also use our cached length to avoid worrying about options.length changing
+                options.splice(length - 1 - i, 0, sep);
+            }
+        }
+
+        return <div className="mx_WidgetContextMenu">{options}</div>;
+    }
+}