Consolidate all except tooltips

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

src/components/views/avatars/MemberStatusMessageAvatar.js

@@ -17,12 +17,12 @@ limitations under the License.
 import React, {createRef} from 'react';
 import PropTypes from 'prop-types';
 import MatrixClientPeg from '../../../MatrixClientPeg';
-import AccessibleButton from '../elements/AccessibleButton';
+import {_t} from "../../../languageHandler";
 import MemberAvatar from '../avatars/MemberAvatar';
 import classNames from 'classnames';
 import StatusMessageContextMenu from "../context_menus/StatusMessageContextMenu";
 import SettingsStore from "../../../settings/SettingsStore";
-import {ContextMenu} from "../../structures/ContextualMenu";
+import {ContextMenu, ContextMenuButton} from "../../structures/ContextualMenu";
 
 export default class MemberStatusMessageAvatar extends React.Component {
     static propTypes = {
@@ -118,29 +118,33 @@ export default class MemberStatusMessageAvatar extends React.Component {
         if (this.state.menuDisplayed) {
             const elementRect = this._button.current.getBoundingClientRect();
 
-            const x = (elementRect.left + window.pageXOffset);
             const chevronWidth = 16; // See .mx_ContextualMenu_chevron_bottom
-            const chevronOffset = (elementRect.width - chevronWidth) / 2;
             const chevronMargin = 1; // Add some spacing away from target
-            const y = elementRect.top + window.pageYOffset - chevronMargin;
 
-            const props = {
-                chevronOffset: chevronOffset,
-                chevronFace: 'bottom',
-                left: x,
-                top: y,
-                menuWidth: 226,
-            };
-
-            contextMenu = <ContextMenu props={props} onFinished={this.closeMenu}>
-                <StatusMessageContextMenu user={this.props.member.user} onFinished={this.closeMenu} />
-            </ContextMenu>;
+            contextMenu = (
+                <ContextMenu
+                    chevronOffset={(elementRect.width - chevronWidth) / 2}
+                    chevronFace="bottom"
+                    left={elementRect.left + window.pageXOffset}
+                    top={elementRect.top + window.pageYOffset - chevronMargin}
+                    menuWidth={226}
+                    onFinished={this.closeMenu}
+                >
+                    <StatusMessageContextMenu user={this.props.member.user} onFinished={this.closeMenu} />
+                </ContextMenu>
+            );
         }
 
         return <React.Fragment>
-            <AccessibleButton className={classes} inputRef={this._button} onClick={this.openMenu}>
+            <ContextMenuButton
+                className={classes}
+                inputRef={this._button}
+                onClick={this.openMenu}
+                isExpanded={this.state.menuDisplayed}
+                label={_t("User Status")}
+            >
                 {avatar}
-            </AccessibleButton>
+            </ContextMenuButton>
 
             { contextMenu }
         </React.Fragment>;

src/components/views/context_menus/WidgetContextMenu.js

@@ -16,8 +16,8 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import sdk from '../../../index';
 import {_t} from '../../../languageHandler';
+import {MenuItem} from "../../structures/ContextualMenu";
 
 export default class WidgetContextMenu extends React.Component {
     static propTypes = {
@@ -71,50 +71,45 @@ export default class WidgetContextMenu extends React.Component {
     };
 
     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'>
+                <MenuItem className='mx_WidgetContextMenu_option' onClick={this.onEditClicked} key='edit'>
                     {_t("Edit")}
-                </AccessibleButton>,
+                </MenuItem>,
             );
         }
 
         if (this.props.onReloadClicked) {
             options.push(
-                <AccessibleButton className='mx_WidgetContextMenu_option' onClick={this.onReloadClicked}
-                                  key='reload'>
+                <MenuItem className='mx_WidgetContextMenu_option' onClick={this.onReloadClicked} key='reload'>
                     {_t("Reload")}
-                </AccessibleButton>,
+                </MenuItem>,
             );
         }
 
         if (this.props.onSnapshotClicked) {
             options.push(
-                <AccessibleButton className='mx_WidgetContextMenu_option' onClick={this.onSnapshotClicked}
-                                  key='snap'>
+                <MenuItem className='mx_WidgetContextMenu_option' onClick={this.onSnapshotClicked} key='snap'>
                     {_t("Take picture")}
-                </AccessibleButton>,
+                </MenuItem>,
             );
         }
 
         if (this.props.onDeleteClicked) {
             options.push(
-                <AccessibleButton className='mx_WidgetContextMenu_option' onClick={this.onDeleteClicked}
-                                  key='delete'>
+                <MenuItem className='mx_WidgetContextMenu_option' onClick={this.onDeleteClicked} key='delete'>
                     {_t("Remove for everyone")}
-                </AccessibleButton>,
+                </MenuItem>,
             );
         }
 
         // Push this last so it appears last. It's always present.
         options.push(
-            <AccessibleButton className='mx_WidgetContextMenu_option' onClick={this.onRevokeClicked} key='revoke'>
+            <MenuItem className='mx_WidgetContextMenu_option' onClick={this.onRevokeClicked} key='revoke'>
                 {_t("Remove for me")}
-            </AccessibleButton>,
+            </MenuItem>,
         );
 
         // Put separators between the options

src/components/views/elements/AppTile.js

@@ -18,7 +18,7 @@ limitations under the License.
 
 import url from 'url';
 import qs from 'querystring';
-import React from 'react';
+import React, {createRef} from 'react';
 import PropTypes from 'prop-types';
 import MatrixClientPeg from '../../../MatrixClientPeg';
 import WidgetMessaging from '../../../WidgetMessaging';
@@ -35,7 +35,7 @@ import ActiveWidgetStore from '../../../stores/ActiveWidgetStore';
 import classNames from 'classnames';
 import {IntegrationManagers} from "../../../integrations/IntegrationManagers";
 import SettingsStore, {SettingLevel} from "../../../settings/SettingsStore";
-import {createMenu} from "../../structures/ContextualMenu";
+import {aboveLeft, ContextMenu, ContextMenuButton} from "../../structures/ContextualMenu";
 import PersistedElement from "./PersistedElement";
 
 const ALLOWED_APP_URL_SCHEMES = ['https:', 'http:'];
@@ -62,6 +62,8 @@ export default class AppTile extends React.Component {
         this._revokeWidgetPermission = this._revokeWidgetPermission.bind(this);
         this._onPopoutWidgetClick = this._onPopoutWidgetClick.bind(this);
         this._onReloadWidgetClick = this._onReloadWidgetClick.bind(this);
+
+        this._contextMenuButton = createRef();
     }
 
     /**
@@ -89,6 +91,7 @@ export default class AppTile extends React.Component {
             error: null,
             deleting: false,
             widgetPageTitle: newProps.widgetPageTitle,
+            menuDisplayed: false,
         };
     }
 
@@ -555,45 +558,12 @@ export default class AppTile extends React.Component {
         this.refs.appFrame.src = this.refs.appFrame.src;
     }
 
-    _getMenuOptions(ev) {
-        // TODO: This block of code gets copy/pasted a lot. We should make that happen less.
-        const menuOptions = {};
-        const buttonRect = ev.target.getBoundingClientRect();
-        // The window X and Y offsets are to adjust position when zoomed in to page
-        const buttonLeft = buttonRect.left + window.pageXOffset;
-        const buttonTop = buttonRect.top + window.pageYOffset;
-        // Align the right edge of the menu to the left edge of the button
-        menuOptions.right = window.innerWidth - buttonLeft;
-        // Align the menu vertically on whichever side of the button has more
-        // space available.
-        if (buttonTop < window.innerHeight / 2) {
-            menuOptions.top = buttonTop;
-        } else {
-            menuOptions.bottom = window.innerHeight - buttonTop;
-        }
-        return menuOptions;
-    }
+    _onContextMenuClick = () => {
+        this.setState({ menuDisplayed: true });
+    };
 
-    _onContextMenuClick = (ev) => {
-        const WidgetContextMenu = sdk.getComponent('views.context_menus.WidgetContextMenu');
-        const menuOptions = {
-            ...this._getMenuOptions(ev),
-
-            // A revoke handler is always required
-            onRevokeClicked: this._onRevokeClicked,
-        };
-
-        const canUserModify = this._canUserModify();
-        const showEditButton = Boolean(this._scalarClient && canUserModify);
-        const showDeleteButton = (this.props.showDelete === undefined || this.props.showDelete) && canUserModify;
-        const showPictureSnapshotButton = this._hasCapability('m.capability.screenshot') && this.props.show;
-
-        if (showEditButton) menuOptions.onEditClicked = this._onEditClick;
-        if (showDeleteButton) menuOptions.onDeleteClicked = this._onDeleteClick;
-        if (showPictureSnapshotButton) menuOptions.onSnapshotClicked = this._onSnapshotClick;
-        if (this.props.showReload) menuOptions.onReloadClicked = this._onReloadWidgetClick;
-
-        createMenu(WidgetContextMenu, menuOptions);
+    _closeContextMenu = () => {
+        this.setState({ menuDisplayed: false });
     };
 
     render() {
@@ -601,7 +571,7 @@ export default class AppTile extends React.Component {
 
         // Don't render widget if it is in the process of being deleted
         if (this.state.deleting) {
-            return <div></div>;
+            return <div />;
         }
 
         // Note that there is advice saying allow-scripts shouldn't be used with allow-same-origin
@@ -697,7 +667,31 @@ export default class AppTile extends React.Component {
             mx_AppTileMenuBar_expanded: this.props.show,
         });
 
-        return (
+        let contextMenu;
+        if (this.state.menuDisplayed) {
+            const elementRect = this._contextMenuButton.current.getBoundingClientRect();
+
+            const canUserModify = this._canUserModify();
+            const showEditButton = Boolean(this._scalarClient && canUserModify);
+            const showDeleteButton = (this.props.showDelete === undefined || this.props.showDelete) && canUserModify;
+            const showPictureSnapshotButton = this._hasCapability('m.capability.screenshot') && this.props.show;
+
+            const WidgetContextMenu = sdk.getComponent('views.context_menus.WidgetContextMenu');
+            contextMenu = (
+                <ContextMenu {...aboveLeft(elementRect, null)} onFinished={this._closeContextMenu}>
+                    <WidgetContextMenu
+                        onRevokeClicked={this._onRevokeClicked}
+                        onEditClicked={showEditButton && this._onEditClick}
+                        onDeleteClicked={showDeleteButton && this._onDeleteClick}
+                        onSnapshotClicked={showPictureSnapshotButton && this._onSnapshotClick}
+                        onReloadClicked={this.props.showReload && this._onReloadWidgetClick}
+                        onFinished={this._closeContextMenu}
+                    />
+                </ContextMenu>
+            );
+        }
+
+        return <React.Fragment>
             <div className={appTileClass} id={this.props.id}>
                 { this.props.showMenubar &&
                 <div ref="menu_bar" className={menuBarClasses} onClick={this.onClickMenuBar}>
@@ -725,20 +719,24 @@ export default class AppTile extends React.Component {
                             onClick={this._onPopoutWidgetClick}
                         /> }
                         { /* Context menu */ }
-                        { <AccessibleButton
+                        { <ContextMenuButton
                             className="mx_AppTileMenuBar_iconButton mx_AppTileMenuBar_iconButton_menu"
-                            title={_t('More options')}
+                            label={_t('More options')}
+                            isExpanded={this.state.menuDisplayed}
+                            inputRef={this._contextMenuButton}
                             onClick={this._onContextMenuClick}
                         /> }
                     </span>
                 </div> }
                 { appTileBody }
             </div>
-        );
+
+            { contextMenu }
+        </React.Fragment>;
     }
 }
 
-AppTile.displayName ='AppTile';
+AppTile.displayName = 'AppTile';
 
 AppTile.propTypes = {
     id: PropTypes.string.isRequired,

src/components/views/elements/TagTile.js

@@ -23,13 +23,14 @@ import classNames from 'classnames';
 import { MatrixClient } from 'matrix-js-sdk';
 import sdk from '../../../index';
 import dis from '../../../dispatcher';
+import {_t} from '../../../languageHandler';
 import { isOnlyCtrlOrCmdIgnoreShiftKeyEvent } from '../../../Keyboard';
 import * as FormattingUtils from '../../../utils/FormattingUtils';
 
 import FlairStore from '../../../stores/FlairStore';
 import GroupStore from '../../../stores/GroupStore';
 import TagOrderStore from '../../../stores/TagOrderStore';
-import {ContextMenu, toRightOf} from "../../structures/ContextualMenu";
+import {ContextMenu, ContextMenuButton, toRightOf} from "../../structures/ContextualMenu";
 
 // A class for a child of TagPanel (possibly wrapped in a DNDTagTile) that represents
 // a thing to click on for the user to filter the visible rooms in the RoomList to:
@@ -139,7 +140,6 @@ export default createReactClass({
 
     render: function() {
         const BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
-        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
         const Tooltip = sdk.getComponent('elements.Tooltip');
         const profile = this.state.profile || {};
         const name = profile.name || this.props.tag;
@@ -178,14 +178,20 @@ export default createReactClass({
             const elementRect = this._contextMenuButton.current.getBoundingClientRect();
             const TagTileContextMenu = sdk.getComponent('context_menus.TagTileContextMenu');
             contextMenu = (
-                <ContextMenu props={toRightOf(elementRect)} onFinished={this.closeMenu}>
+                <ContextMenu {...toRightOf(elementRect)} onFinished={this.closeMenu}>
                     <TagTileContextMenu tag={this.props.tag} onFinished={this.closeMenu} />
                 </ContextMenu>
             );
         }
 
         return <React.Fragment>
-            <AccessibleButton className={className} onClick={this.onClick} onContextMenu={this.openMenu}>
+            <ContextMenuButton
+                className={className}
+                onClick={this.onClick}
+                onContextMenu={this.openMenu}
+                label={_t("Options")}
+                isExpanded={this.state.menuDisplayed}
+            >
                 <div className="mx_TagTile_avatar" onMouseOver={this.onMouseOver} onMouseOut={this.onMouseOut}>
                     <BaseAvatar
                         name={name}
@@ -198,7 +204,7 @@ export default createReactClass({
                     { contextButton }
                     { badgeElement }
                 </div>
-            </AccessibleButton>
+            </ContextMenuButton>
 
             { contextMenu }
         </React.Fragment>;

src/components/views/groups/GroupInviteTile.js

@@ -22,9 +22,10 @@ import createReactClass from 'create-react-class';
 import { MatrixClient } from 'matrix-js-sdk';
 import sdk from '../../../index';
 import dis from '../../../dispatcher';
+import {_t} from '../../../languageHandler';
 import classNames from 'classnames';
 import MatrixClientPeg from "../../../MatrixClientPeg";
-import {ContextMenu, toRightOf} from "../../structures/ContextualMenu";
+import {ContextMenu, ContextMenuButton, toRightOf} from "../../structures/ContextualMenu";
 
 export default createReactClass({
     displayName: 'GroupInviteTile',
@@ -124,9 +125,15 @@ export default createReactClass({
 
         const badgeContent = badgeEllipsis ? '\u00B7\u00B7\u00B7' : '!';
         const badge = (
-            <AccessibleButton className={badgeClasses} inputRef={this._contextMenuButton} onClick={this.openMenu}>
+            <ContextMenuButton
+                className={badgeClasses}
+                inputRef={this._contextMenuButton}
+                onClick={this.openMenu}
+                label={_t("Options")}
+                isExpanded={this.state.menuDisplayed}
+            >
                 { badgeContent }
-            </AccessibleButton>
+            </ContextMenuButton>
         );
 
         let tooltip;
@@ -146,7 +153,7 @@ export default createReactClass({
             const elementRect = this._contextMenuButton.current.getBoundingClientRect();
             const GroupInviteTileContextMenu = sdk.getComponent('context_menus.GroupInviteTileContextMenu');
             contextMenu = (
-                <ContextMenu props={toRightOf(elementRect)} onFinished={this.closeMenu}>
+                <ContextMenu {...toRightOf(elementRect)} onFinished={this.closeMenu}>
                     <GroupInviteTileContextMenu group={this.props.group} onFinished={this.closeMenu} />
                 </ContextMenu>
             );

src/components/views/messages/MessageActionBar.js

@@ -16,50 +16,17 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {useState, useEffect, useRef} from 'react';
+import React, {useEffect} from 'react';
 import PropTypes from 'prop-types';
 
 import { _t } from '../../../languageHandler';
 import sdk from '../../../index';
 import dis from '../../../dispatcher';
 import Modal from '../../../Modal';
-import {ContextMenu} from '../../structures/ContextualMenu';
+import {aboveLeft, ContextMenu, ContextMenuButton, useContextMenu} from '../../structures/ContextualMenu';
 import { isContentActionable, canEditContent } from '../../../utils/EventUtils';
 import {RoomContext} from "../../structures/RoomView";
 
-const contextMenuProps = (elementRect) => {
-    const menuOptions = {
-        chevronFace: "none",
-    };
-
-    const buttonRight = elementRect.right + window.pageXOffset;
-    const buttonBottom = elementRect.bottom + window.pageYOffset;
-    const buttonTop = elementRect.top + window.pageYOffset;
-    // Align the right edge of the menu to the right edge of the button
-    menuOptions.right = window.innerWidth - buttonRight;
-    // Align the menu vertically on whichever side of the button has more space available.
-    if (buttonBottom < window.innerHeight / 2) {
-        menuOptions.top = buttonBottom;
-    } else {
-        menuOptions.bottom = window.innerHeight - buttonTop;
-    }
-
-    return menuOptions;
-};
-
-const useContextMenu = () => {
-    const _button = useRef(null);
-    const [isOpen, setIsOpen] = useState(false);
-    const open = () => {
-        setIsOpen(true);
-    };
-    const close = () => {
-        setIsOpen(false);
-    };
-
-    return [isOpen, _button, open, close, setIsOpen];
-};
-
 const OptionsButton = ({mxEvent, getTile, getReplyThread, permalinkCreator, onFocusChange}) => {
     const [menuDisplayed, _button, openMenu, closeMenu] = useContextMenu();
     useEffect(() => {
@@ -86,7 +53,7 @@ const OptionsButton = ({mxEvent, getTile, getReplyThread, permalinkCreator, onFo
         }
 
         const buttonRect = _button.current.getBoundingClientRect();
-        contextMenu = <ContextMenu props={contextMenuProps(buttonRect)} onFinished={closeMenu}>
+        contextMenu = <ContextMenu {...aboveLeft(buttonRect)} onFinished={closeMenu}>
             <MessageContextMenu
                 mxEvent={mxEvent}
                 permalinkCreator={permalinkCreator}
@@ -98,14 +65,12 @@ const OptionsButton = ({mxEvent, getTile, getReplyThread, permalinkCreator, onFo
         </ContextMenu>;
     }
 
-    const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
     return <React.Fragment>
-        <AccessibleButton
+        <ContextMenuButton
             className="mx_MessageActionBar_maskButton mx_MessageActionBar_optionsButton"
-            title={_t("Options")}
+            label={_t("Options")}
             onClick={openMenu}
-            aria-haspopup={true}
-            aria-expanded={menuDisplayed}
+            isExpanded={menuDisplayed}
             inputRef={_button}
         />
 
@@ -120,19 +85,17 @@ const ReactButton = ({mxEvent, reactions}) => {
     if (menuDisplayed) {
         const buttonRect = _button.current.getBoundingClientRect();
         const ReactionPicker = sdk.getComponent('emojipicker.ReactionPicker');
-        contextMenu = <ContextMenu props={contextMenuProps(buttonRect)} onFinished={closeMenu}>
+        contextMenu = <ContextMenu {...aboveLeft(buttonRect)} onFinished={closeMenu}>
             <ReactionPicker mxEvent={mxEvent} reactions={reactions} onFinished={closeMenu} />
         </ContextMenu>;
     }
 
-    const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
     return <React.Fragment>
-        <AccessibleButton
+        <ContextMenuButton
             className="mx_MessageActionBar_maskButton mx_MessageActionBar_reactButton"
-            title={_t("React")}
+            label={_t("React")}
             onClick={openMenu}
-            aria-haspopup={true}
-            aria-expanded={menuDisplayed}
+            isExpanded={menuDisplayed}
             inputRef={_button}
         />
 
@@ -227,7 +190,7 @@ export default class MessageActionBar extends React.PureComponent {
                 getReplyThread={this.props.getReplyThread}
                 getTile={this.props.getTile}
                 permalinkCreator={this.props.permalinkCreator}
-                onFocusChange={this.props.onFocusChange}
+                onFocusChange={this.onFocusChange}
             />
         </div>;
     }

src/components/views/rooms/RoomTile.js

@@ -25,7 +25,7 @@ import dis from '../../../dispatcher';
 import MatrixClientPeg from '../../../MatrixClientPeg';
 import DMRoomMap from '../../../utils/DMRoomMap';
 import sdk from '../../../index';
-import {ContextMenu, toRightOf} from '../../structures/ContextualMenu';
+import {ContextMenu, ContextMenuButton, toRightOf} from '../../structures/ContextualMenu';
 import * as RoomNotifs from '../../../RoomNotifs';
 import * as FormattingUtils from '../../../utils/FormattingUtils';
 import ActiveRoomObserver from '../../../ActiveRoomObserver';
@@ -344,7 +344,12 @@ module.exports = createReactClass({
         let contextMenuButton;
         if (!MatrixClientPeg.get().isGuest()) {
             contextMenuButton = (
-                <AccessibleButton className="mx_RoomTile_menuButton" inputRef={this._contextMenuButton} onClick={this.openMenu} />
+                <ContextMenuButton
+                    className="mx_RoomTile_menuButton"
+                    inputRef={this._contextMenuButton}
+                    label={_t("Options")}
+                    isExpanded={this.state.menuDisplayed}
+                    onClick={this.openMenu} />
             );
         }
 
@@ -381,7 +386,7 @@ module.exports = createReactClass({
             const elementRect = this._contextMenuButton.current.getBoundingClientRect();
             const RoomTileContextMenu = sdk.getComponent('context_menus.RoomTileContextMenu');
             contextMenu = (
-                <ContextMenu props={toRightOf(elementRect)} onFinished={this.closeMenu}>
+                <ContextMenu {...toRightOf(elementRect)} onFinished={this.closeMenu}>
                     <RoomTileContextMenu room={this.props.room} onFinished={this.closeMenu} />
                 </ContextMenu>
             );