ref: Convert material-ui files to TS (#12013)

Convert files that use material-ui to TS (needed for material-ui upgrade)

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

@@ -0,0 +1,212 @@
+/* eslint-disable lines-around-comment */
+import InlineDialog from '@atlaskit/inline-dialog';
+import { withStyles } from '@material-ui/styles';
+import React, { Component, ReactElement } from 'react';
+import { WithTranslation } from 'react-i18next';
+
+// @ts-ignore
+import { createToolbarEvent, sendAnalytics } from '../../../analytics';
+import { translate } from '../../../base/i18n/functions';
+import { connect } from '../../../base/redux/functions';
+// @ts-ignore
+import { ReactionEmoji, ReactionsMenu } from '../../../reactions/components';
+import { type ReactionEmojiProps, REACTIONS_MENU_HEIGHT } from '../../../reactions/constants';
+import { getReactionsQueue } from '../../../reactions/functions.any';
+import { DRAWER_MAX_HEIGHT } from '../../constants';
+
+// @ts-ignore
+import Drawer from './Drawer';
+// @ts-ignore
+import JitsiPortal from './JitsiPortal';
+// @ts-ignore
+import OverflowToggleButton from './OverflowToggleButton';
+
+/**
+ * The type of the React {@code Component} props of {@link OverflowMenuButton}.
+ */
+interface Props extends WithTranslation {
+
+    /**
+     * ID of the menu that is controlled by this button.
+     */
+    ariaControls: String,
+
+    /**
+     * A child React Element to display within {@code InlineDialog}.
+     */
+    children: ReactElement,
+
+    /**
+     * An object containing the CSS classes.
+     */
+    classes: any,
+
+    /**
+     * Whether or not the OverflowMenu popover should display.
+     */
+    isOpen: boolean,
+
+    /**
+     * Callback to change the visibility of the overflow menu.
+     */
+    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 = () => {
+    return {
+        overflowMenuDrawer: {
+            overflowY: 'auto',
+            height: `calc(${DRAWER_MAX_HEIGHT} - ${REACTIONS_MENU_HEIGHT}px - 16px)`
+        }
+    };
+};
+
+/**
+ * A React {@code Component} for opening or closing the {@code OverflowMenu}.
+ *
+ * @augments Component
+ */
+class OverflowMenuButton extends Component<Props> {
+    /**
+     * Initializes a new {@code OverflowMenuButton} instance.
+     *
+     * @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.
+        this._onCloseDialog = this._onCloseDialog.bind(this);
+        this._toggleDialogVisibility
+            = this._toggleDialogVisibility.bind(this);
+        this._onEscClick = this._onEscClick.bind(this);
+    }
+
+    /**
+     * Click handler for the more actions entries.
+     *
+     * @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();
+        }
+    }
+
+    /**
+     * 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);
+    }
+}
+
+/**
+ * Maps (parts of) the Redux state to the associated props for the
+ * {@code OverflowMenuButton} component.
+ *
+ * @param {Object} state - The Redux state.
+ * @returns {Props}
+ */
+function mapStateToProps(state: any) {
+    const { overflowDrawer } = state['features/toolbox'];
+
+    return {
+        overflowDrawer,
+        reactionsQueue: getReactionsQueue(state)
+    };
+}
+
+// @ts-ignore
+export default withStyles(styles)(translate(connect(mapStateToProps)(OverflowMenuButton)));