ref: Convert files to TS (#12007)

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

react/features/base/components/context-menu/ContextMenu.tsx

@@ -1,11 +1,14 @@
-// @flow
+/* eslint-disable lines-around-comment */
 import { makeStyles } from '@material-ui/core';
 import clsx from 'clsx';
-import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import React, { ReactNode, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { useSelector } from 'react-redux';
 
+// @ts-ignore
 import { getComputedOuterHeight } from '../../../participants-pane/functions';
+// @ts-ignore
 import { Drawer, JitsiPortal } from '../../../toolbox/components/web';
+// @ts-ignore
 import { showOverflowDrawer } from '../../../toolbox/functions.web';
 import participantsPaneTheme from '../themes/participantsPaneTheme.json';
 
@@ -19,12 +22,12 @@ type Props = {
     /**
      * Children of the context menu.
      */
-    children: React$Node,
+    children: ReactNode,
 
     /**
      * Class name for context menu. Used to overwrite default styles.
      */
-    className?: ?string,
+    className?: string,
 
     /**
      * The entity for which the context menu is displayed.
@@ -39,7 +42,7 @@ type Props = {
     /**
      * Whether or not the menu is already in a drawer.
      */
-    inDrawer?: ?boolean,
+    inDrawer?: boolean,
 
     /**
      * Whether or not drawer should be open.
@@ -54,32 +57,32 @@ type Props = {
     /**
      * Callback for click on an item in the menu.
      */
-    onClick?: Function,
-
-    /**
-     * Keydown handler.
-     */
-    onKeyDown?: Function,
+    onClick?: (e?: React.MouseEvent) => void,
 
     /**
      * Callback for drawer close.
      */
-    onDrawerClose?: Function,
+    onDrawerClose?: (e?: React.MouseEvent) => void,
+
+    /**
+     * Keydown handler.
+     */
+    onKeyDown?: (e?: React.KeyboardEvent) => void,
 
     /**
      * Callback for the mouse entering the component.
      */
-    onMouseEnter?: Function,
+    onMouseEnter?: (e?: React.MouseEvent) => void,
 
     /**
      * Callback for the mouse leaving the component.
      */
-    onMouseLeave?: Function
+    onMouseLeave?: (e?: React.MouseEvent) => void
 };
 
 const MAX_HEIGHT = 400;
 
-const useStyles = makeStyles(theme => {
+const useStyles = makeStyles((theme: any) => {
     return {
         contextMenu: {
             backgroundColor: theme.palette.ui02,

react/features/base/components/context-menu/ContextMenuItem.tsx

@@ -1,12 +1,11 @@
-// @flow
-
 import { makeStyles } from '@material-ui/styles';
 import clsx from 'clsx';
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { useSelector } from 'react-redux';
 
+// @ts-ignore
 import { showOverflowDrawer } from '../../../toolbox/functions.web';
-import { Icon } from '../../icons';
+import Icon from '../../icons/components/Icon';
 
 export type Props = {
 
@@ -24,37 +23,37 @@ export type Props = {
      * Custom icon. If used, the icon prop is ignored.
      * Used to allow custom children instead of just the default icons.
      */
-    customIcon?: React$Node,
+    customIcon?: ReactNode,
 
     /**
      * Whether or not the action is disabled.
      */
     disabled?: boolean,
 
-    /**
-     * Id of the action container.
-     */
-    id?: string,
-
     /**
      * Default icon for action.
      */
     icon?: Function,
 
+    /**
+     * Id of the action container.
+     */
+    id?: string,
+
     /**
      * Click handler.
      */
-    onClick?: Function,
+    onClick?: (e?: React.MouseEvent) => void,
 
     /**
      * Keydown handler.
      */
-    onKeyDown?: Function,
+    onKeyDown?: (e?: React.KeyboardEvent) => void,
 
     /**
      * Keypress handler.
      */
-    onKeyPress?: Function,
+    onKeyPress?: (e?: React.KeyboardEvent) => void,
 
     /**
      * TestId of the element, if any.
@@ -72,7 +71,7 @@ export type Props = {
     textClassName?: string
 }
 
-const useStyles = makeStyles(theme => {
+const useStyles = makeStyles((theme: any) => {
     return {
         contextMenuItem: {
             alignItems: 'center',
@@ -121,7 +120,7 @@ const ContextMenuItem = ({
     text,
     textClassName }: Props) => {
     const styles = useStyles();
-    const _overflowDrawer = useSelector(showOverflowDrawer);
+    const _overflowDrawer: boolean = useSelector(showOverflowDrawer);
 
     return (
         <div

react/features/base/components/context-menu/ContextMenuItemGroup.tsx

@@ -1,8 +1,7 @@
-// @flow
 import { makeStyles } from '@material-ui/core';
-import React from 'react';
+import React, { ReactNode } from 'react';
 
-import ContextMenuItem from './ContextMenuItem';
+import ContextMenuItem, { Props as ItemProps } from './ContextMenuItem';
 
 
 type Props = {
@@ -10,15 +9,15 @@ type Props = {
     /**
      * List of actions in this group.
      */
-    actions?: Array<Object>,
+    actions?: Array<ItemProps>,
 
     /**
      * The children of the component.
      */
-    children?: React$Node,
+    children?: ReactNode,
 };
 
-const useStyles = makeStyles(theme => {
+const useStyles = makeStyles((theme: any) => {
     return {
         contextMenuItemGroup: {
             '&:not(:empty)': {