Merge pull request #5085 from matrix-org/t3chguy/notifications11

Factor out Iconized Context menu for reusability

src/components/structures/ContextMenu.tsx

@@ -58,7 +58,7 @@ export enum ChevronFace {
     None = "none",
 }
 
-interface IProps extends IPosition {
+export interface IProps extends IPosition {
     menuWidth?: number;
     menuHeight?: number;
 

src/components/structures/UserMenu.tsx

@@ -20,7 +20,7 @@ import defaultDispatcher from "../../dispatcher/dispatcher";
 import { ActionPayload } from "../../dispatcher/payloads";
 import { Action } from "../../dispatcher/actions";
 import { _t } from "../../languageHandler";
-import { ChevronFace, ContextMenu, ContextMenuButton, MenuItem } from "./ContextMenu";
+import { ContextMenuButton } from "./ContextMenu";
 import {USER_NOTIFICATIONS_TAB, USER_SECURITY_TAB} from "../views/dialogs/UserSettingsDialog";
 import { OpenToTabPayload } from "../../dispatcher/payloads/OpenToTabPayload";
 import RedesignFeedbackDialog from "../views/dialogs/RedesignFeedbackDialog";
@@ -38,6 +38,10 @@ import BaseAvatar from '../views/avatars/BaseAvatar';
 import classNames from "classnames";
 import AccessibleTooltipButton from "../views/elements/AccessibleTooltipButton";
 import { SettingLevel } from "../../settings/SettingLevel";
+import IconizedContextMenu, {
+    IconizedContextMenuOption,
+    IconizedContextMenuOptionList
+} from "../views/context_menus/IconizedContextMenu";
 
 interface IProps {
     isMinimized: boolean;
@@ -50,19 +54,6 @@ interface IState {
     isDarkTheme: boolean;
 }
 
-interface IMenuButtonProps {
-    iconClassName: string;
-    label: string;
-    onClick(ev: ButtonEvent);
-}
-
-const MenuButton: React.FC<IMenuButtonProps> = ({iconClassName, label, onClick}) => {
-    return <MenuItem label={label} onClick={onClick}>
-        <span className={classNames("mx_IconizedContextMenu_icon", iconClassName)} />
-        <span className="mx_IconizedContextMenu_label">{label}</span>
-    </MenuItem>;
-};
-
 export default class UserMenu extends React.Component<IProps, IState> {
     private dispatcherRef: string;
     private themeWatcherRef: string;
@@ -226,7 +217,7 @@ export default class UserMenu extends React.Component<IProps, IState> {
         let homeButton = null;
         if (this.hasHomePage) {
             homeButton = (
-                <MenuButton
+                <IconizedContextMenuOption
                     iconClassName="mx_UserMenu_iconHome"
                     label={_t("Home")}
                     onClick={this.onHomeClick}
@@ -234,75 +225,71 @@ export default class UserMenu extends React.Component<IProps, IState> {
             );
         }
 
-        return (
-            <ContextMenu
-                chevronFace={ChevronFace.None}
-                // -20 to overlap the context menu by just over the width of the `...` icon and make it look connected
-                left={this.state.contextMenuPosition.width + this.state.contextMenuPosition.left - 20}
-                top={this.state.contextMenuPosition.top + this.state.contextMenuPosition.height}
-                onFinished={this.onCloseMenu}
-            >
-                <div className="mx_IconizedContextMenu mx_UserMenu_contextMenu">
-                    <div className="mx_UserMenu_contextMenu_header">
-                        <div className="mx_UserMenu_contextMenu_name">
-                            <span className="mx_UserMenu_contextMenu_displayName">
-                                {OwnProfileStore.instance.displayName}
-                            </span>
-                            <span className="mx_UserMenu_contextMenu_userId">
-                                {MatrixClientPeg.get().getUserId()}
-                            </span>
-                        </div>
-                        <AccessibleTooltipButton
-                            className="mx_UserMenu_contextMenu_themeButton"
-                            onClick={this.onSwitchThemeClick}
-                            title={this.state.isDarkTheme ? _t("Switch to light mode") : _t("Switch to dark mode")}
-                        >
-                            <img
-                                src={require("../../../res/img/element-icons/roomlist/dark-light-mode.svg")}
-                                alt={_t("Switch theme")}
-                                width={16}
-                            />
-                        </AccessibleTooltipButton>
-                    </div>
-                    {hostingLink}
-                    <div className="mx_IconizedContextMenu_optionList mx_IconizedContextMenu_optionList_notFirst">
-                        {homeButton}
-                        <MenuButton
-                            iconClassName="mx_UserMenu_iconBell"
-                            label={_t("Notification settings")}
-                            onClick={(e) => this.onSettingsOpen(e, USER_NOTIFICATIONS_TAB)}
-                        />
-                        <MenuButton
-                            iconClassName="mx_UserMenu_iconLock"
-                            label={_t("Security & privacy")}
-                            onClick={(e) => this.onSettingsOpen(e, USER_SECURITY_TAB)}
-                        />
-                        <MenuButton
-                            iconClassName="mx_UserMenu_iconSettings"
-                            label={_t("All settings")}
-                            onClick={(e) => this.onSettingsOpen(e, null)}
-                        />
-                        {/* <MenuButton
-                            iconClassName="mx_UserMenu_iconArchive"
-                            label={_t("Archived rooms")}
-                            onClick={this.onShowArchived}
-                        /> */}
-                        <MenuButton
-                            iconClassName="mx_UserMenu_iconMessage"
-                            label={_t("Feedback")}
-                            onClick={this.onProvideFeedback}
-                        />
-                    </div>
-                    <div className="mx_IconizedContextMenu_optionList mx_UserMenu_contextMenu_redRow">
-                        <MenuButton
-                            iconClassName="mx_UserMenu_iconSignOut"
-                            label={_t("Sign out")}
-                            onClick={this.onSignOutClick}
-                        />
-                    </div>
+        return <IconizedContextMenu
+            // -20 to overlap the context menu by just over the width of the `...` icon and make it look connected
+            left={this.state.contextMenuPosition.width + this.state.contextMenuPosition.left - 20}
+            top={this.state.contextMenuPosition.top + this.state.contextMenuPosition.height}
+            onFinished={this.onCloseMenu}
+            className="mx_UserMenu_contextMenu"
+        >
+            <div className="mx_UserMenu_contextMenu_header">
+                <div className="mx_UserMenu_contextMenu_name">
+                        <span className="mx_UserMenu_contextMenu_displayName">
+                            {OwnProfileStore.instance.displayName}
+                        </span>
+                    <span className="mx_UserMenu_contextMenu_userId">
+                            {MatrixClientPeg.get().getUserId()}
+                        </span>
                 </div>
-            </ContextMenu>
-        );
+                <AccessibleTooltipButton
+                    className="mx_UserMenu_contextMenu_themeButton"
+                    onClick={this.onSwitchThemeClick}
+                    title={this.state.isDarkTheme ? _t("Switch to light mode") : _t("Switch to dark mode")}
+                >
+                    <img
+                        src={require("../../../res/img/element-icons/roomlist/dark-light-mode.svg")}
+                        alt={_t("Switch theme")}
+                        width={16}
+                    />
+                </AccessibleTooltipButton>
+            </div>
+            {hostingLink}
+            <IconizedContextMenuOptionList>
+                {homeButton}
+                <IconizedContextMenuOption
+                    iconClassName="mx_UserMenu_iconBell"
+                    label={_t("Notification settings")}
+                    onClick={(e) => this.onSettingsOpen(e, USER_NOTIFICATIONS_TAB)}
+                />
+                <IconizedContextMenuOption
+                    iconClassName="mx_UserMenu_iconLock"
+                    label={_t("Security & privacy")}
+                    onClick={(e) => this.onSettingsOpen(e, USER_SECURITY_TAB)}
+                />
+                <IconizedContextMenuOption
+                    iconClassName="mx_UserMenu_iconSettings"
+                    label={_t("All settings")}
+                    onClick={(e) => this.onSettingsOpen(e, null)}
+                />
+                {/* <IconizedContextMenuOption
+                    iconClassName="mx_UserMenu_iconArchive"
+                    label={_t("Archived rooms")}
+                    onClick={this.onShowArchived}
+                /> */}
+                <IconizedContextMenuOption
+                    iconClassName="mx_UserMenu_iconMessage"
+                    label={_t("Feedback")}
+                    onClick={this.onProvideFeedback}
+                />
+            </IconizedContextMenuOptionList>
+            <IconizedContextMenuOptionList red>
+                <IconizedContextMenuOption
+                    iconClassName="mx_UserMenu_iconSignOut"
+                    label={_t("Sign out")}
+                    onClick={this.onSignOutClick}
+                />
+            </IconizedContextMenuOptionList>
+        </IconizedContextMenu>;
     };
 
     public render() {

src/components/views/context_menus/IconizedContextMenu.tsx

@@ -0,0 +1,124 @@
+/*
+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 from "react";
+import classNames from "classnames";
+
+import {
+    ChevronFace,
+    ContextMenu,
+    IProps as IContextMenuProps,
+    MenuItem,
+    MenuItemCheckbox, MenuItemRadio,
+} from "../../structures/ContextMenu";
+
+interface IProps extends IContextMenuProps {
+    className?: string;
+    compact?: boolean;
+}
+
+interface IOptionListProps {
+    first?: boolean;
+    red?: boolean;
+    className?: string;
+}
+
+interface IOptionProps extends React.ComponentProps<typeof MenuItem> {
+    iconClassName: string;
+}
+
+interface ICheckboxProps extends React.ComponentProps<typeof MenuItemCheckbox> {
+    iconClassName: string;
+}
+
+interface IRadioProps extends React.ComponentProps<typeof MenuItemRadio> {
+    iconClassName: string;
+}
+
+export const IconizedContextMenuRadio: React.FC<IRadioProps> = ({
+    label,
+    iconClassName,
+    active,
+    className,
+    ...props
+}) => {
+    return <MenuItemRadio
+        {...props}
+        className={classNames(className, {
+            mx_IconizedContextMenu_active: active,
+        })}
+        active={active}
+        label={label}
+    >
+        <span className={classNames("mx_IconizedContextMenu_icon", iconClassName)} />
+        <span className="mx_IconizedContextMenu_label">{label}</span>
+        {active && <span className="mx_IconizedContextMenu_icon mx_IconizedContextMenu_checked" />}
+    </MenuItemRadio>;
+};
+
+export const IconizedContextMenuCheckbox: React.FC<ICheckboxProps> = ({
+    label,
+    iconClassName,
+    active,
+    className,
+    ...props
+}) => {
+    return <MenuItemCheckbox
+        {...props}
+        className={classNames(className, {
+            mx_IconizedContextMenu_active: active,
+        })}
+        active={active}
+        label={label}
+    >
+        <span className={classNames("mx_IconizedContextMenu_icon", iconClassName)} />
+        <span className="mx_IconizedContextMenu_label">{label}</span>
+        {active && <span className="mx_IconizedContextMenu_icon mx_IconizedContextMenu_checked" />}
+    </MenuItemCheckbox>;
+};
+
+export const IconizedContextMenuOption: React.FC<IOptionProps> = ({label, iconClassName, ...props}) => {
+    return <MenuItem {...props} label={label}>
+        <span className={classNames("mx_IconizedContextMenu_icon", iconClassName)} />
+        <span className="mx_IconizedContextMenu_label">{label}</span>
+    </MenuItem>;
+};
+
+export const IconizedContextMenuOptionList: React.FC<IOptionListProps> = ({first, red, className, children}) => {
+    const classes = classNames("mx_IconizedContextMenu_optionList", className, {
+        mx_IconizedContextMenu_optionList_notFirst: !first,
+        mx_IconizedContextMenu_optionList_red: red,
+    });
+
+    return <div className={classes}>
+        {children}
+    </div>;
+};
+
+const IconizedContextMenu: React.FC<IProps> = ({className, children, compact, ...props}) => {
+    const classes = classNames("mx_IconizedContextMenu", className, {
+        mx_IconizedContextMenu_compact: compact,
+    });
+
+    return <ContextMenu chevronFace={ChevronFace.None} {...props}>
+        <div className={classes}>
+            { children }
+        </div>
+    </ContextMenu>;
+};
+
+export default IconizedContextMenu;
+

src/components/views/rooms/RoomTile.tsx

@@ -27,14 +27,7 @@ import defaultDispatcher from '../../../dispatcher/dispatcher';
 import { Key } from "../../../Keyboard";
 import ActiveRoomObserver from "../../../ActiveRoomObserver";
 import { _t } from "../../../languageHandler";
-import {
-    ChevronFace,
-    ContextMenu,
-    ContextMenuTooltipButton,
-    MenuItem,
-    MenuItemCheckbox,
-    MenuItemRadio,
-} from "../../structures/ContextMenu";
+import { ChevronFace, ContextMenuTooltipButton, MenuItemRadio } from "../../structures/ContextMenu";
 import { DefaultTagID, TagID } from "../../../stores/room-list/models";
 import { MessagePreviewStore, ROOM_PREVIEW_CHANGED } from "../../../stores/room-list/MessagePreviewStore";
 import DecoratedRoomAvatar from "../avatars/DecoratedRoomAvatar";
@@ -51,6 +44,11 @@ import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
 import { EchoChamber } from "../../../stores/local-echo/EchoChamber";
 import { CachedRoomKey, RoomEchoChamber } from "../../../stores/local-echo/RoomEchoChamber";
 import { PROPERTY_UPDATED } from "../../../stores/local-echo/GenericEchoChamber";
+import IconizedContextMenu, {
+    IconizedContextMenuCheckbox,
+    IconizedContextMenuOption,
+    IconizedContextMenuOptionList, IconizedContextMenuRadio
+} from "../context_menus/IconizedContextMenu";
 
 interface IProps {
     room: Room;
@@ -78,32 +76,6 @@ const contextMenuBelow = (elementRect: PartialDOMRect) => {
     return {left, top, chevronFace};
 };
 
-interface INotifOptionProps {
-    active: boolean;
-    iconClassName: string;
-    label: string;
-    onClick(ev: ButtonEvent);
-}
-
-const NotifOption: React.FC<INotifOptionProps> = ({active, onClick, iconClassName, label}) => {
-    const classes = classNames({
-        mx_RoomTile_contextMenu_activeRow: active,
-    });
-
-    let activeIcon;
-    if (active) {
-        activeIcon = <span className="mx_IconizedContextMenu_icon mx_RoomTile_iconCheck" />;
-    }
-
-    return (
-        <MenuItemRadio className={classes} onClick={onClick} active={active} label={label}>
-            <span className={classNames("mx_IconizedContextMenu_icon", iconClassName)} />
-            <span className="mx_IconizedContextMenu_label">{ label }</span>
-            { activeIcon }
-        </MenuItemRadio>
-    );
-};
-
 export default class RoomTile extends React.PureComponent<IProps, IState> {
     private dispatcherRef: string;
     private roomTileRef = createRef<HTMLDivElement>();
@@ -335,38 +307,39 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
 
         let contextMenu = null;
         if (this.state.notificationsMenuPosition) {
-            contextMenu = (
-                <ContextMenu {...contextMenuBelow(this.state.notificationsMenuPosition)} onFinished={this.onCloseNotificationsMenu}>
-                    <div className="mx_IconizedContextMenu mx_IconizedContextMenu_compact mx_RoomTile_contextMenu">
-                        <div className="mx_IconizedContextMenu_optionList">
-                            <NotifOption
-                                label={_t("Use default")}
-                                active={state === ALL_MESSAGES}
-                                iconClassName="mx_RoomTile_iconBell"
-                                onClick={this.onClickAllNotifs}
-                            />
-                            <NotifOption
-                                label={_t("All messages")}
-                                active={state === ALL_MESSAGES_LOUD}
-                                iconClassName="mx_RoomTile_iconBellDot"
-                                onClick={this.onClickAlertMe}
-                            />
-                            <NotifOption
-                                label={_t("Mentions & Keywords")}
-                                active={state === MENTIONS_ONLY}
-                                iconClassName="mx_RoomTile_iconBellMentions"
-                                onClick={this.onClickMentions}
-                            />
-                            <NotifOption
-                                label={_t("None")}
-                                active={state === MUTE}
-                                iconClassName="mx_RoomTile_iconBellCrossed"
-                                onClick={this.onClickMute}
-                            />
-                        </div>
-                    </div>
-                </ContextMenu>
-            );
+            contextMenu = <IconizedContextMenu
+                {...contextMenuBelow(this.state.notificationsMenuPosition)}
+                onFinished={this.onCloseNotificationsMenu}
+                className="mx_RoomTile_contextMenu"
+                compact
+            >
+                <IconizedContextMenuOptionList first>
+                    <IconizedContextMenuRadio
+                        label={_t("Use default")}
+                        active={state === ALL_MESSAGES}
+                        iconClassName="mx_RoomTile_iconBell"
+                        onClick={this.onClickAllNotifs}
+                    />
+                    <IconizedContextMenuRadio
+                        label={_t("All messages")}
+                        active={state === ALL_MESSAGES_LOUD}
+                        iconClassName="mx_RoomTile_iconBellDot"
+                        onClick={this.onClickAlertMe}
+                    />
+                    <IconizedContextMenuRadio
+                        label={_t("Mentions & Keywords")}
+                        active={state === MENTIONS_ONLY}
+                        iconClassName="mx_RoomTile_iconBellMentions"
+                        onClick={this.onClickMentions}
+                    />
+                    <IconizedContextMenuRadio
+                        label={_t("None")}
+                        active={state === MUTE}
+                        iconClassName="mx_RoomTile_iconBellCrossed"
+                        onClick={this.onClickMute}
+                    />
+                </IconizedContextMenuOptionList>
+            </IconizedContextMenu>;
         }
 
         const classes = classNames("mx_RoomTile_notificationsButton", {
@@ -400,18 +373,20 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
 
         let contextMenu = null;
         if (this.state.generalMenuPosition && this.props.tag === DefaultTagID.Archived) {
-            contextMenu = (
-                <ContextMenu {...contextMenuBelow(this.state.generalMenuPosition)} onFinished={this.onCloseGeneralMenu}>
-                    <div className="mx_IconizedContextMenu mx_IconizedContextMenu_compact mx_RoomTile_contextMenu">
-                        <div className="mx_IconizedContextMenu_optionList mx_RoomTile_contextMenu_redRow">
-                            <MenuItem onClick={this.onForgetRoomClick} label={_t("Leave Room")}>
-                                <span className="mx_IconizedContextMenu_icon mx_RoomTile_iconSignOut" />
-                                <span className="mx_IconizedContextMenu_label">{_t("Forget Room")}</span>
-                            </MenuItem>
-                        </div>
-                    </div>
-                </ContextMenu>
-            );
+            contextMenu = <IconizedContextMenu
+                {...contextMenuBelow(this.state.generalMenuPosition)}
+                onFinished={this.onCloseGeneralMenu}
+                className="mx_RoomTile_contextMenu"
+                compact
+            >
+                <IconizedContextMenuOptionList red>
+                    <IconizedContextMenuOption
+                        iconClassName="mx_RoomTile_iconSignOut"
+                        label={_t("Forget Room")}
+                        onClick={this.onForgetRoomClick}
+                    />
+                </IconizedContextMenuOptionList>
+            </IconizedContextMenu>;
         } else if (this.state.generalMenuPosition) {
             const roomTags = RoomListStore.instance.getTagsForRoom(this.props.room);
 
@@ -421,42 +396,40 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
             const isLowPriority = roomTags.includes(DefaultTagID.LowPriority);
             const lowPriorityLabel = _t("Low Priority");
 
-            contextMenu = (
-                <ContextMenu {...contextMenuBelow(this.state.generalMenuPosition)} onFinished={this.onCloseGeneralMenu}>
-                    <div className="mx_IconizedContextMenu mx_IconizedContextMenu_compact mx_RoomTile_contextMenu">
-                        <div className="mx_IconizedContextMenu_optionList">
-                            <MenuItemCheckbox
-                                className={isFavorite ? "mx_RoomTile_contextMenu_activeRow" : ""}
-                                onClick={(e) => this.onTagRoom(e, DefaultTagID.Favourite)}
-                                active={isFavorite}
-                                label={favouriteLabel}
-                            >
-                                <span className="mx_IconizedContextMenu_icon mx_RoomTile_iconStar" />
-                                <span className="mx_IconizedContextMenu_label">{favouriteLabel}</span>
-                            </MenuItemCheckbox>
-                            <MenuItemCheckbox
-                                className={isLowPriority ? "mx_RoomTile_contextMenu_activeRow" : ""}
-                                onClick={(e) => this.onTagRoom(e, DefaultTagID.LowPriority)}
-                                active={isLowPriority}
-                                label={lowPriorityLabel}
-                            >
-                                <span className="mx_IconizedContextMenu_icon mx_RoomTile_iconArrowDown" />
-                                <span className="mx_IconizedContextMenu_label">{lowPriorityLabel}</span>
-                            </MenuItemCheckbox>
-                            <MenuItem onClick={this.onOpenRoomSettings} label={_t("Settings")}>
-                                <span className="mx_IconizedContextMenu_icon mx_RoomTile_iconSettings" />
-                                <span className="mx_IconizedContextMenu_label">{_t("Settings")}</span>
-                            </MenuItem>
-                        </div>
-                        <div className="mx_IconizedContextMenu_optionList mx_RoomTile_contextMenu_redRow">
-                            <MenuItem onClick={this.onLeaveRoomClick} label={_t("Leave Room")}>
-                                <span className="mx_IconizedContextMenu_icon mx_RoomTile_iconSignOut" />
-                                <span className="mx_IconizedContextMenu_label">{_t("Leave Room")}</span>
-                            </MenuItem>
-                        </div>
-                    </div>
-                </ContextMenu>
-            );
+            contextMenu = <IconizedContextMenu
+                {...contextMenuBelow(this.state.generalMenuPosition)}
+                onFinished={this.onCloseGeneralMenu}
+                className="mx_RoomTile_contextMenu"
+                compact
+            >
+                <IconizedContextMenuOptionList>
+                    <IconizedContextMenuCheckbox
+                        onClick={(e) => this.onTagRoom(e, DefaultTagID.Favourite)}
+                        active={isFavorite}
+                        label={favouriteLabel}
+                        iconClassName="mx_RoomTile_iconStar"
+                    />
+                    <IconizedContextMenuCheckbox
+                        onClick={(e) => this.onTagRoom(e, DefaultTagID.LowPriority)}
+                        active={isLowPriority}
+                        label={lowPriorityLabel}
+                        iconClassName="mx_RoomTile_iconArrowDown"
+                    />
+
+                    <IconizedContextMenuOption
+                        onClick={this.onOpenRoomSettings}
+                        label={_t("Settings")}
+                        iconClassName="mx_RoomTile_iconSettings"
+                    />
+                </IconizedContextMenuOptionList>
+                <IconizedContextMenuOptionList red>
+                    <IconizedContextMenuOption
+                        onClick={this.onLeaveRoomClick}
+                        label={_t("Leave Room")}
+                        iconClassName="mx_RoomTile_iconSignOut"
+                    />
+                </IconizedContextMenuOptionList>
+            </IconizedContextMenu>;
         }
 
         return (