feat(reactions): New button for web.

react/features/toolbox/components/web/OverflowMenuButton.tsx

@@ -1,14 +1,25 @@
-import React, { ReactNode, useCallback } from 'react';
-import { useSelector } from 'react-redux';
+import React, { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useDispatch, useSelector } from 'react-redux';
 import { makeStyles } from 'tss-react/mui';
 
 import { createToolbarEvent } from '../../../analytics/AnalyticsEvents';
 import { sendAnalytics } from '../../../analytics/functions';
 import Popover from '../../../base/popover/components/Popover.web';
+import ContextMenu from '../../../base/ui/components/web/ContextMenu';
+import ContextMenuItemGroup from '../../../base/ui/components/web/ContextMenuItemGroup';
+import { setGifMenuVisibility } from '../../../gifs/actions';
+import { isGifsMenuOpen } from '../../../gifs/functions.web';
 import ReactionEmoji from '../../../reactions/components/web/ReactionEmoji';
 import ReactionsMenu from '../../../reactions/components/web/ReactionsMenu';
-import { REACTIONS_MENU_HEIGHT } from '../../../reactions/constants';
+import {
+    GIFS_MENU_HEIGHT_IN_OVERFLOW_MENU,
+    RAISE_HAND_ROW_HEIGHT,
+    REACTIONS_MENU_HEIGHT_DRAWER,
+    REACTIONS_MENU_HEIGHT_IN_OVERFLOW_MENU
+} from '../../../reactions/constants';
 import { getReactionsQueue } from '../../../reactions/functions.any';
+import { IReactionsMenuParent } from '../../../reactions/types';
 import { DRAWER_MAX_HEIGHT } from '../../constants';
 import { showOverflowDrawer } from '../../functions.web';
 
@@ -27,48 +38,85 @@ interface IProps {
     ariaControls: string;
 
     /**
-     * A child React Element to display within {@code Popover}.
+     * Information about the buttons that need to be rendered in the overflow menu.
      */
-    children: ReactNode;
+    buttons: Object[];
 
     /**
      * Whether or not the OverflowMenu popover should display.
      */
     isOpen: boolean;
 
+    /**
+     * Esc key handler.
+     */
+    onToolboxEscKey: (e?: React.KeyboardEvent) => void;
+
     /**
      * Callback to change the visibility of the overflow menu.
      */
     onVisibilityChange: Function;
 
     /**
-     * Whether or not to display the reactions in the mobile menu.
+     * Whether to show the raise hand in the reactions menu or not.
      */
-    showMobileReactions: boolean;
+    showRaiseHandInReactionsMenu: boolean;
+
+    /**
+     * Whether or not to display the reactions menu.
+     */
+    showReactionsMenu: boolean;
 }
 
-const useStyles = makeStyles()(() => {
+const useStyles = makeStyles<{ overflowDrawer: boolean; reactionsMenuHeight: number; }>()(
+(_theme, { reactionsMenuHeight, overflowDrawer }) => {
     return {
         overflowMenuDrawer: {
-            overflowY: 'auto' as const,
-            height: `calc(${DRAWER_MAX_HEIGHT} - ${REACTIONS_MENU_HEIGHT}px - 16px)`
+            overflow: 'hidden',
+            height: `calc(${DRAWER_MAX_HEIGHT} - ${reactionsMenuHeight}px - 16px)`
+        },
+        contextMenu: {
+            position: 'relative' as const,
+            right: 'auto',
+            margin: 0,
+            marginBottom: '8px',
+            maxHeight: overflowDrawer ? undefined : 'calc(100vh - 100px)',
+            paddingBottom: overflowDrawer ? undefined : 0,
+            minWidth: '240px',
+            overflow: 'hidden'
+        },
+        content: {
+            position: 'relative',
+            maxHeight: overflowDrawer
+                ? `calc(100% - ${reactionsMenuHeight}px - 16px)` : `calc(100vh - 100px - ${reactionsMenuHeight}px)`,
+            overflowY: 'auto'
+        },
+        footer: {
+            position: 'relative',
+            bottom: 0
         }
     };
 });
 
 const OverflowMenuButton = ({
-    children,
+    buttons,
     isOpen,
+    onToolboxEscKey,
     onVisibilityChange,
-    showMobileReactions
+    showRaiseHandInReactionsMenu,
+    showReactionsMenu
 }: IProps) => {
-    const { classes } = useStyles();
     const overflowDrawer = useSelector(showOverflowDrawer);
     const reactionsQueue = useSelector(getReactionsQueue);
+    const isGiphyVisible = useSelector(isGifsMenuOpen);
+    const dispatch = useDispatch();
 
     const onCloseDialog = useCallback(() => {
         onVisibilityChange(false);
-    }, [ onVisibilityChange ]);
+        if (isGiphyVisible && !overflowDrawer) {
+            dispatch(setGifMenuVisibility(false));
+        }
+    }, [ onVisibilityChange, setGifMenuVisibility, isGiphyVisible, overflowDrawer, dispatch ]);
 
     const onOpenDialog = useCallback(() => {
         onVisibilityChange(true);
@@ -88,50 +136,118 @@ const OverflowMenuButton = ({
         onVisibilityChange(!isOpen);
     }, [ isOpen, onVisibilityChange ]);
 
+    const toolbarAccLabel = 'toolbar.accessibilityLabel.moreActionsMenu';
+    const { t } = useTranslation();
+    let reactionsMenuHeight = 0;
+
+    if (showReactionsMenu) {
+        reactionsMenuHeight = REACTIONS_MENU_HEIGHT_DRAWER;
+        if (!overflowDrawer) {
+            reactionsMenuHeight = REACTIONS_MENU_HEIGHT_IN_OVERFLOW_MENU;
+        }
+        if (!showRaiseHandInReactionsMenu) {
+            reactionsMenuHeight -= RAISE_HAND_ROW_HEIGHT;
+        }
+        if (!overflowDrawer && isGiphyVisible) {
+            reactionsMenuHeight += GIFS_MENU_HEIGHT_IN_OVERFLOW_MENU;
+        }
+    }
+    const { classes } = useStyles({
+        reactionsMenuHeight,
+        overflowDrawer
+    });
+
+    const groupsJSX = buttons.map((buttonGroup: any) => (
+        <ContextMenuItemGroup key = { `group-${buttonGroup[0].group}` }>
+            {buttonGroup.map(({ key, Content, ...rest }: { Content: React.ElementType; key: string; }) => {
+                const props: { buttonKey?: string; contextMenu?: boolean; showLabel?: boolean; } = { ...rest };
+
+                if (key !== 'reactions') {
+                    props.buttonKey = key;
+                    props.contextMenu = true;
+                    props.showLabel = true;
+                }
+
+                return (
+                    <Content
+                        { ...props }
+                        key = { key } />);
+            })}
+        </ContextMenuItemGroup>));
+
+    const overflowMenu = groupsJSX && (
+        <ContextMenu
+            accessibilityLabel = { t(toolbarAccLabel) }
+            className = { classes.contextMenu }
+            hidden = { false }
+            id = 'overflow-context-menu'
+            inDrawer = { overflowDrawer }
+            onKeyDown = { onToolboxEscKey }>
+            <div className = { classes.content }>
+                { groupsJSX }
+            </div>
+            {
+                showReactionsMenu && (<div className = { classes.footer }>
+                    <ReactionsMenu
+                        parent = {
+                            overflowDrawer ? IReactionsMenuParent.OverflowDrawer : IReactionsMenuParent.OverflowMenu }
+                        showRaisedHand = { showRaiseHandInReactionsMenu } />
+                </div>)
+            }
+        </ContextMenu>);
+
+    if (overflowDrawer) {
+        return (
+            <div className = 'toolbox-button-wth-dialog context-menu'>
+                <>
+                    <OverflowToggleButton
+                        handleClick = { toggleDialogVisibility }
+                        isOpen = { isOpen }
+                        onKeyDown = { onEscClick } />
+                    <JitsiPortal>
+                        <Drawer
+                            isOpen = { isOpen }
+                            onClose = { onCloseDialog }>
+                            <>
+                                <div className = { classes.overflowMenuDrawer }>
+                                    { overflowMenu }
+                                </div>
+                            </>
+                        </Drawer>
+                        {showReactionsMenu && <div className = 'reactions-animations-container'>
+                            {reactionsQueue.map(({ reaction, uid }, index) => (<ReactionEmoji
+                                index = { index }
+                                key = { uid }
+                                reaction = { reaction }
+                                uid = { uid } />))}
+                        </div>}
+                    </JitsiPortal>
+                </>
+            </div>
+        );
+    }
+
     return (
         <div className = 'toolbox-button-wth-dialog context-menu'>
-            {
-                overflowDrawer ? (
-                    <>
-                        <OverflowToggleButton
-                            handleClick = { toggleDialogVisibility }
-                            isOpen = { isOpen }
-                            onKeyDown = { onEscClick } />
-                        <JitsiPortal>
-                            <Drawer
-                                isOpen = { isOpen }
-                                onClose = { onCloseDialog }>
-                                <>
-                                    <div className = { classes.overflowMenuDrawer }>
-                                        {children}
-                                    </div>
-                                    {showMobileReactions && <ReactionsMenu overflowMenu = { true } />}
-                                </>
-                            </Drawer>
-                            {showMobileReactions && <div className = 'reactions-animations-container'>
-                                {reactionsQueue.map(({ reaction, uid }, index) => (<ReactionEmoji
-                                    index = { index }
-                                    key = { uid }
-                                    reaction = { reaction }
-                                    uid = { uid } />))}
-                            </div>}
-                        </JitsiPortal>
-                    </>
-                ) : (
-                    <Popover
-                        content = { children }
-                        headingId = 'overflow-context-menu'
-                        onPopoverClose = { onCloseDialog }
-                        onPopoverOpen = { onOpenDialog }
-                        position = 'top'
-                        trigger = 'click'
-                        visible = { isOpen }>
-                        <OverflowToggleButton
-                            isOpen = { isOpen }
-                            onKeyDown = { onEscClick } />
-                    </Popover>
-                )
-            }
+            <Popover
+                content = { overflowMenu }
+                headingId = 'overflow-context-menu'
+                onPopoverClose = { onCloseDialog }
+                onPopoverOpen = { onOpenDialog }
+                position = 'top'
+                trigger = 'click'
+                visible = { isOpen }>
+                <OverflowToggleButton
+                    isOpen = { isOpen }
+                    onKeyDown = { onEscClick } />
+            </Popover>
+            {showReactionsMenu && <div className = 'reactions-animations-container'>
+                {reactionsQueue.map(({ reaction, uid }, index) => (<ReactionEmoji
+                    index = { index }
+                    key = { uid }
+                    reaction = { reaction }
+                    uid = { uid } />))}
+            </div>}
         </div>
     );
 };