ref(overflow-menu-button) Change to function component (#12411)

Use makeStyles instead of withStyles

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

@@ -1,17 +1,15 @@
 /* eslint-disable lines-around-comment */
 import InlineDialog from '@atlaskit/inline-dialog';
-import { withStyles } from '@mui/styles';
+import React, { ReactNode, useCallback } from 'react';
-import React, { Component, ReactElement } from 'react';
+import { useSelector } from 'react-redux';
-import { WithTranslation } from 'react-i18next';
+import { makeStyles } from 'tss-react/mui';
-import { connect } from 'react-redux';
 
 import { createToolbarEvent } from '../../../analytics/AnalyticsEvents';
 import { sendAnalytics } from '../../../analytics/functions';
 import { IState } from '../../../app/types';
-import { translate } from '../../../base/i18n/functions';
 // @ts-ignore
 import { ReactionEmoji, ReactionsMenu } from '../../../reactions/components';
-import { REACTIONS_MENU_HEIGHT, type ReactionEmojiProps } from '../../../reactions/constants';
+import { REACTIONS_MENU_HEIGHT } from '../../../reactions/constants';
 import { getReactionsQueue } from '../../../reactions/functions.any';
 import { DRAWER_MAX_HEIGHT } from '../../constants';
 
@@ -25,22 +23,17 @@ import OverflowToggleButton from './OverflowToggleButton';
 /**
  * The type of the React {@code Component} props of {@link OverflowMenuButton}.
  */
-interface Props extends WithTranslation {
+interface Props {
 
     /**
      * ID of the menu that is controlled by this button.
      */
-    ariaControls: String;
+    ariaControls: string;
 
     /**
      * A child React Element to display within {@code InlineDialog}.
      */
-    children: ReactElement;
+    children: ReactNode;
-
-    /**
-     * An object containing the CSS classes.
-     */
-    classes: any;
 
     /**
      * Whether or not the OverflowMenu popover should display.
@@ -52,161 +45,93 @@ interface Props extends WithTranslation {
      */
     onVisibilityChange: Function;
 
-    /**
-     * Whether to display the OverflowMenu as a drawer.
-     */
-    overflowDrawer: boolean;
-
-    /**
-     * The array of reactions to be displayed.
-     */
-    reactionsQueue: Array<ReactionEmojiProps>;
-
     /**
      * Whether or not to display the reactions in the mobile menu.
      */
     showMobileReactions: boolean;
 }
 
-const styles = () => {
+const useStyles = makeStyles()(() => {
     return {
         overflowMenuDrawer: {
             overflowY: 'auto' as const,
             height: `calc(${DRAWER_MAX_HEIGHT} - ${REACTIONS_MENU_HEIGHT}px - 16px)`
         }
     };
-};
+});
 
-/**
+const OverflowMenuButton = ({
- * A React {@code Component} for opening or closing the {@code OverflowMenu}.
+    children,
- *
+    isOpen,
- * @augments Component
+    onVisibilityChange,
- */
+    showMobileReactions
-class OverflowMenuButton extends Component<Props> {
+}: Props) => {
-    /**
+    const { classes } = useStyles();
-     * Initializes a new {@code OverflowMenuButton} instance.
+    const overflowDrawer = useSelector((state: IState) => state['features/toolbox'].overflowDrawer);
-     *
+    const reactionsQueue = useSelector(getReactionsQueue);
-     * @param {Object} props - The read-only properties with which the new
-     * instance is to be initialized.
-     */
-    constructor(props: Props) {
-        super(props);
 
-        // Bind event handlers so they are only bound once per instance.
+    const onCloseDialog = useCallback(() => {
-        this._onCloseDialog = this._onCloseDialog.bind(this);
+        onVisibilityChange(false);
-        this._toggleDialogVisibility
+    }, [ onVisibilityChange ]);
-            = this._toggleDialogVisibility.bind(this);
-        this._onEscClick = this._onEscClick.bind(this);
-    }
 
-    /**
+    const onEscClick = useCallback((event: React.KeyboardEvent) => {
-     * Click handler for the more actions entries.
+        if (event.key === 'Escape' && isOpen) {
-     *
-     * @param {KeyboardEvent} event - Esc key click to close the popup.
-     * @returns {void}
-     */
-    _onEscClick(event: React.KeyboardEvent) {
-        if (event.key === 'Escape' && this.props.isOpen) {
             event.preventDefault();
             event.stopPropagation();
-            this._onCloseDialog();
+            onCloseDialog();
         }
-    }
+    }, [ onCloseDialog ]);
 
-    /**
+    const toggleDialogVisibility = useCallback(() => {
-     * Implements React's {@link Component#render()}.
-     *
-     * @inheritdoc
-     * @returns {ReactElement}
-     */
-    render() {
-        const { children, classes, isOpen, overflowDrawer, reactionsQueue, showMobileReactions } = this.props;
-
-        return (
-            <div className = 'toolbox-button-wth-dialog context-menu'>
-                {
-                    overflowDrawer ? (
-                        <>
-                            <OverflowToggleButton
-                                handleClick = { this._toggleDialogVisibility }
-                                isOpen = { isOpen }
-                                onKeyDown = { this._onEscClick } />
-                            <JitsiPortal>
-                                <Drawer
-                                    isOpen = { isOpen }
-                                    onClose = { this._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>
-                        </>
-                    ) : (
-                        <InlineDialog
-                            content = { children }
-                            isOpen = { isOpen }
-                            onClose = { this._onCloseDialog }
-                            placement = 'top-end'>
-                            <OverflowToggleButton
-                                handleClick = { this._toggleDialogVisibility }
-                                isOpen = { isOpen }
-                                onKeyDown = { this._onEscClick } />
-                        </InlineDialog>
-                    )
-                }
-            </div>
-        );
-    }
-
-    /**
-     * Callback invoked when {@code InlineDialog} signals that it should be
-     * close.
-     *
-     * @private
-     * @returns {void}
-     */
-    _onCloseDialog() {
-        this.props.onVisibilityChange(false);
-    }
-
-    /**
-     * Callback invoked to signal that an event has occurred that should change
-     * the visibility of the {@code InlineDialog} component.
-     *
-     * @private
-     * @returns {void}
-     */
-    _toggleDialogVisibility() {
         sendAnalytics(createToolbarEvent('overflow'));
 
-        this.props.onVisibilityChange(!this.props.isOpen);
+        onVisibilityChange(!isOpen);
-    }
+    }, [ isOpen, onVisibilityChange ]);
-}
 
-/**
+    return (
- * Maps (parts of) the Redux state to the associated props for the
+        <div className = 'toolbox-button-wth-dialog context-menu'>
- * {@code OverflowMenuButton} component.
+            {
- *
+                overflowDrawer ? (
- * @param {Object} state - The Redux state.
+                    <>
- * @returns {Props}
+                        <OverflowToggleButton
- */
+                            handleClick = { toggleDialogVisibility }
-function mapStateToProps(state: IState) {
+                            isOpen = { isOpen }
-    const { overflowDrawer } = state['features/toolbox'];
+                            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>
+                    </>
+                ) : (
+                    <InlineDialog
+                        content = { children }
+                        isOpen = { isOpen }
+                        onClose = { onCloseDialog }
+                        placement = 'top-end'>
+                        <OverflowToggleButton
+                            handleClick = { toggleDialogVisibility }
+                            isOpen = { isOpen }
+                            onKeyDown = { onEscClick } />
+                    </InlineDialog>
+                )
+            }
+        </div>
+    );
+};
 
-    return {
+export default OverflowMenuButton;
-        overflowDrawer,
-        reactionsQueue: getReactionsQueue(state)
-    };
-}
-
-export default withStyles(styles)(translate(connect(mapStateToProps)(OverflowMenuButton)));