From b52b4c2a78acc23395c1441c9ff656fc636efbf5 Mon Sep 17 00:00:00 2001 From: Robert Pintilii Date: Thu, 3 Nov 2022 10:35:51 +0200 Subject: [PATCH] ref(TS ) Improve TS (#12491) Remove global variables from files Change type to interface --- globals.d.ts | 5 +++++ .../components/web/LoginDialog.tsx | 6 +++--- react/features/base/audio-only/actions.ts | 2 -- .../components/AbstractStatelessAvatar.tsx | 6 +++--- .../components/native/StatelessAvatar.js | 2 +- .../avatar/components/web/StatelessAvatar.tsx | 10 ++++----- .../participants-pane-list/ListItem.tsx | 6 +++--- react/features/base/config/reducer.ts | 2 -- .../components/web/AbstractDialogTab.ts | 6 +++--- .../features/base/environment/environment.ts | 2 -- react/features/base/i18n/i18next.ts | 2 -- .../base/i18n/languageDetector.web.ts | 2 -- react/features/base/icons/components/Icon.tsx | 10 ++++----- .../base/label/components/AbstractLabel.tsx | 21 ------------------- .../base/label/components/native/Label.js | 20 ++++++++++++------ .../base/logging/ExternalApiLogTransport.ts | 2 -- react/features/base/logging/middleware.ts | 2 -- react/features/base/media/subscriber.ts | 3 --- .../base/popover/components/Popover.web.tsx | 14 ++++++------- .../components/web/ActionButton.tsx | 6 +++--- react/features/base/tracks/actions.web.ts | 2 -- .../ui/components/JitsiThemeProvider.web.tsx | 8 +++---- .../base/ui/components/web/ContextMenu.tsx | 6 +++--- .../ui/components/web/ContextMenuItem.tsx | 6 +++--- .../components/web/ContextMenuItemGroup.tsx | 8 +++---- react/features/base/util/loadScript.web.ts | 2 -- react/features/breakout-rooms/actions.ts | 2 -- react/features/breakout-rooms/middleware.ts | 2 -- .../chat/components/web/ChatInput.tsx | 6 +++--- .../chat/components/web/DisplayNameForm.tsx | 6 +++--- .../chat/components/web/GifMessage.tsx | 6 +++--- .../chat/components/web/TouchmoveHack.tsx | 6 +++--- .../components/native/carmode/TitleBar.tsx | 10 ++++----- .../components/web/ConnectionIndicator.tsx | 6 +++--- .../components/DesktopPicker.tsx | 8 +++---- .../components/native/DisplayNameLabel.tsx | 12 +++++------ .../components/web/DisplayNamePrompt.tsx | 6 +++--- .../features/e2ee/components/E2EESection.tsx | 8 +++---- .../face-landmarks/FaceLandmarksDetector.ts | 1 - .../filmstrip/components/web/Filmstrip.tsx | 8 +++---- .../components/web/PinnedIndicator.tsx | 6 +++--- .../components/web/RaisedHandIndicator.tsx | 6 +++--- .../filmstrip/components/web/Thumbnail.tsx | 20 ++++++++---------- .../web/ThumbnailBottomIndicators.tsx | 8 +++---- .../components/web/ThumbnailTopIndicators.tsx | 8 +++---- .../components/web/VideoMenuTriggerButton.tsx | 6 +++--- .../lobby/components/web/LobbySection.tsx | 8 +++---- .../components/web/CollapsibleRoom.tsx | 6 +++--- .../components/web/JoinQuickActionButton.tsx | 6 +++--- .../components/web/RoomActionEllipsis.tsx | 6 +++--- .../web/RoomParticipantContextMenu.tsx | 6 +++--- .../components/web/FooterContextMenu.tsx | 6 +++--- .../components/web/LobbyParticipantItem.tsx | 6 +++--- .../components/web/MeetingParticipants.tsx | 8 +++---- .../web/ParticipantActionEllipsis.tsx | 6 +++--- .../components/web/ParticipantQuickAction.tsx | 6 +++--- .../features/participants-pane/middleware.ts | 2 -- .../prejoin/components/web/DropdownButton.tsx | 6 +++--- .../components/web/ReactionEmoji.tsx | 14 ++++++------- .../Recording/web/HighlightButton.tsx | 6 +++--- .../salesforce/components/web/RecordItem.tsx | 8 +++---- .../security-dialog/web/PasswordForm.tsx | 8 +++---- .../security-dialog/web/PasswordSection.tsx | 2 -- .../security-dialog/web/SecurityDialog.tsx | 8 +++---- .../settings/components/native/HelpView.tsx | 8 +++---- .../components/native/PrivacyView.tsx | 6 +++--- .../settings/components/native/TermsView.tsx | 6 +++--- .../settings/components/web/MoreTab.tsx | 2 +- .../settings/components/web/ProfileTab.tsx | 2 -- .../components/web/SettingsDialog.tsx | 12 +++++------ .../components/web/FaceExpressionsSwitch.tsx | 6 +++--- .../components/web/SpeakerStatsLabels.tsx | 6 +++--- .../components/web/SpeakerStatsSearch.tsx | 6 +++--- .../toolbox/components/web/Drawer.tsx | 6 +++--- .../toolbox/components/web/Toolbox.tsx | 2 -- react/features/toolbox/subscriber.ts | 2 -- .../components/AbstractMuteEveryoneDialog.ts | 7 ++++--- .../AbstractMuteEveryonesVideoDialog.ts | 6 +++--- .../web/FakeParticipantContextMenu.tsx | 6 +++--- .../components/web/ParticipantContextMenu.tsx | 6 +++--- .../components/web/VolumeSlider.tsx | 6 +++--- .../video-quality/components/Slider.web.tsx | 6 +++--- .../components/VirtualBackgroundPreview.tsx | 14 ++++++------- .../whiteboard/components/web/Whiteboard.tsx | 2 -- 84 files changed, 241 insertions(+), 296 deletions(-) delete mode 100644 react/features/base/label/components/AbstractLabel.tsx diff --git a/globals.d.ts b/globals.d.ts index 66f15f66e974..e61ea3118dc6 100644 --- a/globals.d.ts +++ b/globals.d.ts @@ -9,6 +9,11 @@ declare global { UI: any; API: any; conference: any; + debugLogs: any; + keyboardshortcut: { + registerShortcut: Function; + unregisterShortcut: Function; + } }; const interfaceConfig: any; diff --git a/react/features/authentication/components/web/LoginDialog.tsx b/react/features/authentication/components/web/LoginDialog.tsx index f16ef83f7ce8..72658b1ce3d2 100644 --- a/react/features/authentication/components/web/LoginDialog.tsx +++ b/react/features/authentication/components/web/LoginDialog.tsx @@ -68,7 +68,7 @@ interface IProps extends WithTranslation { /** * The type of the React {@code Component} state of {@link LoginDialog}. */ -type State = { +interface IState { /** * Authentication process starts before joining the conference room. @@ -84,14 +84,14 @@ type State = { * The user entered local participant name. */ username: string; -}; +} /** * Component that renders the login in conference dialog. * * @returns {React$Element} */ -class LoginDialog extends Component { +class LoginDialog extends Component { /** * Initializes a new {@code LoginDialog} instance. * diff --git a/react/features/base/audio-only/actions.ts b/react/features/base/audio-only/actions.ts index cdbaa1dd1eb3..3560dafabf2d 100644 --- a/react/features/base/audio-only/actions.ts +++ b/react/features/base/audio-only/actions.ts @@ -8,8 +8,6 @@ import { SET_AUDIO_ONLY } from './actionTypes'; import logger from './logger'; -declare let APP: any; - /** * Sets the audio-only flag for the current JitsiConference. * diff --git a/react/features/base/avatar/components/AbstractStatelessAvatar.tsx b/react/features/base/avatar/components/AbstractStatelessAvatar.tsx index c1c22a7c364e..6b10cb34dfba 100644 --- a/react/features/base/avatar/components/AbstractStatelessAvatar.tsx +++ b/react/features/base/avatar/components/AbstractStatelessAvatar.tsx @@ -1,6 +1,6 @@ import { PureComponent } from 'react'; -export type Props = { +export interface IProps { /** * Color of the (initials based) avatar, if needed. @@ -31,13 +31,13 @@ export type Props = { * The URL of the avatar to render. */ url?: string | Function; -}; +} /** * Implements an abstract stateless avatar component that renders an avatar purely from what gets passed through * props. */ -export default class AbstractStatelessAvatar

extends PureComponent

{ +export default class AbstractStatelessAvatar

extends PureComponent

{ /** * Checks if the passed prop is a loaded icon or not. * diff --git a/react/features/base/avatar/components/native/StatelessAvatar.js b/react/features/base/avatar/components/native/StatelessAvatar.js index 3985685de278..bc944b492ddf 100644 --- a/react/features/base/avatar/components/native/StatelessAvatar.js +++ b/react/features/base/avatar/components/native/StatelessAvatar.js @@ -5,7 +5,7 @@ import { Image, Text, View } from 'react-native'; import { Icon } from '../../../icons'; import { type StyleType } from '../../../styles'; -import AbstractStatelessAvatar, { type Props as AbstractProps } from '../AbstractStatelessAvatar'; +import AbstractStatelessAvatar, { type IProps as AbstractProps } from '../AbstractStatelessAvatar'; import styles from './styles'; diff --git a/react/features/base/avatar/components/web/StatelessAvatar.tsx b/react/features/base/avatar/components/web/StatelessAvatar.tsx index 59f9fb9e8418..f805089b8396 100644 --- a/react/features/base/avatar/components/web/StatelessAvatar.tsx +++ b/react/features/base/avatar/components/web/StatelessAvatar.tsx @@ -3,10 +3,10 @@ import clsx from 'clsx'; import React from 'react'; import Icon from '../../../icons/components/Icon'; -import AbstractStatelessAvatar, { type Props as AbstractProps } from '../AbstractStatelessAvatar'; +import AbstractStatelessAvatar, { type IProps as AbstractProps } from '../AbstractStatelessAvatar'; import { PRESENCE_AVAILABLE_COLOR, PRESENCE_AWAY_COLOR, PRESENCE_BUSY_COLOR, PRESENCE_IDLE_COLOR } from '../styles'; -type Props = AbstractProps & { +interface IProps extends AbstractProps { /** * External class name passed through props. @@ -42,7 +42,7 @@ type Props = AbstractProps & { * Indicates whether to load the avatar using CORS or not. */ useCORS?: boolean; -}; +} /** * Creates the styles for the component. @@ -115,14 +115,14 @@ const styles = () => { * Implements a stateless avatar component that renders an avatar purely from what gets passed through * props. */ -class StatelessAvatar extends AbstractStatelessAvatar { +class StatelessAvatar extends AbstractStatelessAvatar { /** * Instantiates a new {@code Component}. * * @inheritdoc */ - constructor(props: Props) { + constructor(props: IProps) { super(props); this._onAvatarLoadError = this._onAvatarLoadError.bind(this); diff --git a/react/features/base/components/participants-pane-list/ListItem.tsx b/react/features/base/components/participants-pane-list/ListItem.tsx index e16b774f6e02..aed7a081adaa 100644 --- a/react/features/base/components/participants-pane-list/ListItem.tsx +++ b/react/features/base/components/participants-pane-list/ListItem.tsx @@ -7,7 +7,7 @@ import { isMobileBrowser } from '../../environment/utils'; import { withPixelLineHeight } from '../../styles/functions.web'; import participantsPaneTheme from '../themes/participantsPaneTheme.json'; -type Props = { +interface IProps { /** * List item actions. @@ -74,7 +74,7 @@ type Props = { */ trigger: string; -}; +} const useStyles = makeStyles()((theme: Theme) => { return { @@ -188,7 +188,7 @@ const ListItem = ({ testId, textChildren, trigger -}: Props) => { +}: IProps) => { const { classes: styles, cx } = useStyles(); const _isMobile = isMobileBrowser(); let timeoutHandler: number; diff --git a/react/features/base/config/reducer.ts b/react/features/base/config/reducer.ts index d8a95f2e6089..7f475d74ebb9 100644 --- a/react/features/base/config/reducer.ts +++ b/react/features/base/config/reducer.ts @@ -14,8 +14,6 @@ import { import { IConfig } from './configType'; import { _cleanupConfig } from './functions'; -declare let interfaceConfig: any; - /** * The initial state of the feature base/config when executing in a * non-React Native environment. The mandatory configuration to be passed to diff --git a/react/features/base/dialog/components/web/AbstractDialogTab.ts b/react/features/base/dialog/components/web/AbstractDialogTab.ts index 725c3d8aa67a..b734bfb1cbc4 100644 --- a/react/features/base/dialog/components/web/AbstractDialogTab.ts +++ b/react/features/base/dialog/components/web/AbstractDialogTab.ts @@ -3,7 +3,7 @@ import { Component } from 'react'; /** * The type of the React {@code Component} props of {@link AbstractDialogTab}. */ -export type Props = { +export interface IProps { /** * Function that closes the dialog. @@ -19,7 +19,7 @@ export type Props = { * The id of the tab. */ tabId: number; -}; +} /** @@ -27,7 +27,7 @@ export type Props = { * * @augments Component */ -class AbstractDialogTab

extends Component { +class AbstractDialogTab

extends Component { /** * Initializes a new {@code AbstractDialogTab} instance. * diff --git a/react/features/base/environment/environment.ts b/react/features/base/environment/environment.ts index 4c06727209d0..920f964b127e 100644 --- a/react/features/base/environment/environment.ts +++ b/react/features/base/environment/environment.ts @@ -25,8 +25,6 @@ const browserNameToCheck = { safari: browser.isSafari.bind(browser) }; -declare let interfaceConfig: any; - /** * Returns whether or not jitsi is optimized and targeted for the provided * browser name. diff --git a/react/features/base/i18n/i18next.ts b/react/features/base/i18n/i18next.ts index 3ad28245c4eb..50d1b67e1029 100644 --- a/react/features/base/i18n/i18next.ts +++ b/react/features/base/i18n/i18next.ts @@ -1,5 +1,3 @@ -declare let APP: any; - import COUNTRIES_RESOURCES from 'i18n-iso-countries/langs/en.json'; import i18next from 'i18next'; import I18nextXHRBackend from 'i18next-xhr-backend'; diff --git a/react/features/base/i18n/languageDetector.web.ts b/react/features/base/i18n/languageDetector.web.ts index 6be8289ba4f3..56e0269f1654 100644 --- a/react/features/base/i18n/languageDetector.web.ts +++ b/react/features/base/i18n/languageDetector.web.ts @@ -3,8 +3,6 @@ import BrowserLanguageDetector from 'i18next-browser-languagedetector'; import configLanguageDetector from './configLanguageDetector'; import customNavigatorDetector from './customNavigatorDetector'; -declare let interfaceConfig: any; - /** * The ordered list (by name) of language detectors to be utilized as backends * by the singleton language detector for Web. diff --git a/react/features/base/icons/components/Icon.tsx b/react/features/base/icons/components/Icon.tsx index 7d720f5b7208..cf78639ab526 100644 --- a/react/features/base/icons/components/Icon.tsx +++ b/react/features/base/icons/components/Icon.tsx @@ -6,7 +6,7 @@ import { Container } from '../../react/base'; // @ts-ignore import { styleTypeToObject } from '../../styles'; -type Props = { +interface IProps { /** * The id of the element this button icon controls. @@ -102,7 +102,7 @@ type Props = { * TabIndex for the Icon. */ tabIndex?: number; -}; +} export const DEFAULT_COLOR = navigator.product === 'ReactNative' ? 'white' : undefined; export const DEFAULT_SIZE = navigator.product === 'ReactNative' ? 36 : 22; @@ -110,10 +110,10 @@ export const DEFAULT_SIZE = navigator.product === 'ReactNative' ? 36 : 22; /** * Implements an Icon component that takes a loaded SVG file as prop and renders it as an icon. * - * @param {Props} props - The props of the component. + * @param {IProps} props - The props of the component. * @returns {ReactElement} */ -export default function Icon(props: Props) { +export default function Icon(props: IProps) { const { className, color, @@ -135,7 +135,7 @@ export default function Icon(props: Props) { onKeyPress, onKeyDown, ...rest - }: Props = props; + }: IProps = props; const { color: styleColor, diff --git a/react/features/base/label/components/AbstractLabel.tsx b/react/features/base/label/components/AbstractLabel.tsx deleted file mode 100644 index fe93817526bd..000000000000 --- a/react/features/base/label/components/AbstractLabel.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { Component } from 'react'; - -export type Props = { - - /** - * An SVG icon to be rendered as the content of the label. - */ - icon?: Function; - - /** - * String or component that will be rendered as the label itself. - */ - text?: string; -}; - -/** - * Abstract class for the {@code Label} component. - */ -export default class Label

- extends Component { -} diff --git a/react/features/base/label/components/native/Label.js b/react/features/base/label/components/native/Label.js index 8aeeb0155ef4..772dff2b560a 100644 --- a/react/features/base/label/components/native/Label.js +++ b/react/features/base/label/components/native/Label.js @@ -1,12 +1,9 @@ // @flow -import React from 'react'; +import React, { Component } from 'react'; import { Animated, Text } from 'react-native'; import Icon from '../../../icons/components/Icon'; import { type StyleType, combineStyles } from '../../../styles'; -import AbstractLabel, { - type Props as AbstractProps -} from '../AbstractLabel'; import styles from './styles'; @@ -20,7 +17,12 @@ const STATUS_IN_PROGRESS = 'in_progress'; */ const STATUS_OFF = 'off'; -type Props = AbstractProps & { +type Props = { + + /** + * An SVG icon to be rendered as the content of the label. + */ + icon?: Function, /** * Color for the icon. @@ -39,10 +41,16 @@ type Props = AbstractProps & { */ style?: ?StyleType, + /** + * String or component that will be rendered as the label itself. + */ + text?: string, + /** * Custom styles for the text. */ textStyle?: ?StyleType + }; type State = { @@ -58,7 +66,7 @@ type State = { * Renders a circular indicator to be used for status icons, such as recording * on, audio-only conference, video quality and similar. */ -export default class Label extends AbstractLabel { +export default class Label extends Component { /** * A reference to the started animation of this label. */ diff --git a/react/features/base/logging/ExternalApiLogTransport.ts b/react/features/base/logging/ExternalApiLogTransport.ts index a4c70b1f45bf..5f37f380219e 100644 --- a/react/features/base/logging/ExternalApiLogTransport.ts +++ b/react/features/base/logging/ExternalApiLogTransport.ts @@ -1,5 +1,3 @@ -declare let APP: any; - /** * Constructs a log transport object for use with external API. * diff --git a/react/features/base/logging/middleware.ts b/react/features/base/logging/middleware.ts index 80bb4f6edc38..66d9886d20d8 100644 --- a/react/features/base/logging/middleware.ts +++ b/react/features/base/logging/middleware.ts @@ -19,8 +19,6 @@ import JitsiMeetLogStorage from './JitsiMeetLogStorage'; import { SET_LOGGING_CONFIG } from './actionTypes'; import { setLogCollector, setLoggingConfig } from './actions'; -declare let APP: any; - /** * The Redux middleware of the feature base/logging. * diff --git a/react/features/base/media/subscriber.ts b/react/features/base/media/subscriber.ts index 524f2d257882..513cd7e1470e 100644 --- a/react/features/base/media/subscriber.ts +++ b/react/features/base/media/subscriber.ts @@ -1,9 +1,6 @@ import { IReduxState, IStore } from '../../app/types'; import StateListenerRegistry from '../redux/StateListenerRegistry'; - -declare let APP: any; - /** * Notifies when the local audio mute state changes. */ diff --git a/react/features/base/popover/components/Popover.web.tsx b/react/features/base/popover/components/Popover.web.tsx index 7c89f81cdc3a..9f43b938d999 100644 --- a/react/features/base/popover/components/Popover.web.tsx +++ b/react/features/base/popover/components/Popover.web.tsx @@ -11,7 +11,7 @@ import { getContextMenuStyle } from '../functions.web'; /** * The type of the React {@code Component} props of {@link Popover}. */ -type Props = { +interface IProps { /** * A child React Element to use as the trigger for showing the dialog. @@ -69,12 +69,12 @@ type Props = { * Whether the popover is visible or not. */ visible: boolean; -}; +} /** * The type of the React {@code Component} state of {@link Popover}. */ -type State = { +interface IState { /** * The style to apply to the context menu in order to position it correctly. @@ -85,7 +85,7 @@ type State = { position: string; top?: string; } | null; -}; +} /** * Implements a React {@code Component} for showing an {@code Popover} on @@ -93,7 +93,7 @@ type State = { * * @augments Component */ -class Popover extends Component { +class Popover extends Component { /** * Default values for {@code Popover} component's properties. * @@ -118,7 +118,7 @@ class Popover extends Component { * @param {Object} props - The read-only properties with which the new * instance is to be initialized. */ - constructor(props: Props) { + constructor(props: IProps) { super(props); this.state = { @@ -409,7 +409,7 @@ class Popover extends Component { * @param {Object} state - The Redux state. * @param {Object} ownProps - The own props of the component. * @private - * @returns {Props} + * @returns {IProps} */ function _mapStateToProps(state: IReduxState) { return { diff --git a/react/features/base/premeeting/components/web/ActionButton.tsx b/react/features/base/premeeting/components/web/ActionButton.tsx index 3b3df8ba3998..498347524bcf 100644 --- a/react/features/base/premeeting/components/web/ActionButton.tsx +++ b/react/features/base/premeeting/components/web/ActionButton.tsx @@ -6,7 +6,7 @@ import Icon from '../../../icons/components/Icon'; import { IconArrowDown } from '../../../icons/svg'; import { withPixelLineHeight } from '../../../styles/functions.web'; -type Props = { +interface IProps { /** * Icon to display in the options section. @@ -78,7 +78,7 @@ type Props = { * The type of th button: primary, secondary, text. */ type: string; -}; +} const useStyles = makeStyles()((theme: Theme) => { return { @@ -183,7 +183,7 @@ function ActionButton({ ariaPressed, ariaLabel, ariaDropDownLabel -}: Props) { +}: IProps) { const { classes, cx } = useStyles(); const onKeyPressHandler = useCallback(e => { diff --git a/react/features/base/tracks/actions.web.ts b/react/features/base/tracks/actions.web.ts index cdd650b59043..6215bf2a18e7 100644 --- a/react/features/base/tracks/actions.web.ts +++ b/react/features/base/tracks/actions.web.ts @@ -38,8 +38,6 @@ import { IShareOptions, IToggleScreenSharingOptions } from './types'; export * from './actions.any'; -declare const APP: any; - /** * Signals that the local participant is ending screensharing or beginning the screensharing flow. * diff --git a/react/features/base/ui/components/JitsiThemeProvider.web.tsx b/react/features/base/ui/components/JitsiThemeProvider.web.tsx index 2c91a340fcef..64cfd2f7c2d0 100644 --- a/react/features/base/ui/components/JitsiThemeProvider.web.tsx +++ b/react/features/base/ui/components/JitsiThemeProvider.web.tsx @@ -6,7 +6,7 @@ import { IReduxState } from '../../../app/types'; import BaseTheme from './BaseTheme.web'; -type Props = { +interface IProps { /** * The default theme or theme set through advanced branding. @@ -17,7 +17,7 @@ type Props = { * The children of the component. */ children: React.ReactNode; -}; +} /** * The theme provider for the web app. @@ -25,7 +25,7 @@ type Props = { * @param {Object} props - The props of the component. * @returns {React.ReactNode} */ -function JitsiThemeProvider(props: Props) { +function JitsiThemeProvider(props: IProps) { return ( { props.children } @@ -37,7 +37,7 @@ function JitsiThemeProvider(props: Props) { * Maps part of the Redux state to the props of this component. * * @param {Object} state - The Redux state. - * @returns {Props} + * @returns {IProps} */ function _mapStateToProps(state: IReduxState) { const { muiBrandedTheme } = state['features/dynamic-branding']; diff --git a/react/features/base/ui/components/web/ContextMenu.tsx b/react/features/base/ui/components/web/ContextMenu.tsx index 15434e8d73da..4bddc5936c14 100644 --- a/react/features/base/ui/components/web/ContextMenu.tsx +++ b/react/features/base/ui/components/web/ContextMenu.tsx @@ -34,7 +34,7 @@ const getComputedOuterHeight = (element: HTMLElement) => { + getFloatStyleProperty(computedStyle, 'margin-bottom'); }; -type Props = { +interface IProps { /** * Accessibility label for menu container. @@ -100,7 +100,7 @@ type Props = { * Callback for the mouse leaving the component. */ onMouseLeave?: (e?: React.MouseEvent) => void; -}; +} const MAX_HEIGHT = 400; @@ -156,7 +156,7 @@ const ContextMenu = ({ onDrawerClose, onMouseEnter, onMouseLeave -}: Props) => { +}: IProps) => { const [ isHidden, setIsHidden ] = useState(true); const containerRef = useRef(null); const { classes: styles, cx } = useStyles(); diff --git a/react/features/base/ui/components/web/ContextMenuItem.tsx b/react/features/base/ui/components/web/ContextMenuItem.tsx index 7a88538f8ca2..7a451d9a526e 100644 --- a/react/features/base/ui/components/web/ContextMenuItem.tsx +++ b/react/features/base/ui/components/web/ContextMenuItem.tsx @@ -7,7 +7,7 @@ import { showOverflowDrawer } from '../../../../toolbox/functions.web'; import Icon from '../../../icons/components/Icon'; import { withPixelLineHeight } from '../../../styles/functions.web'; -export type Props = { +export interface IProps { /** * Label used for accessibility. @@ -69,7 +69,7 @@ export type Props = { * Class name for the text. */ textClassName?: string; -}; +} const useStyles = makeStyles()((theme: Theme) => { return { @@ -131,7 +131,7 @@ const ContextMenuItem = ({ onKeyPress, testId, text, - textClassName }: Props) => { + textClassName }: IProps) => { const { classes: styles, cx } = useStyles(); const _overflowDrawer: boolean = useSelector(showOverflowDrawer); diff --git a/react/features/base/ui/components/web/ContextMenuItemGroup.tsx b/react/features/base/ui/components/web/ContextMenuItemGroup.tsx index 9f251ec54dce..9aa083f32bb3 100644 --- a/react/features/base/ui/components/web/ContextMenuItemGroup.tsx +++ b/react/features/base/ui/components/web/ContextMenuItemGroup.tsx @@ -2,10 +2,10 @@ import { Theme } from '@mui/material'; import React, { ReactNode } from 'react'; import { makeStyles } from 'tss-react/mui'; -import ContextMenuItem, { Props as ItemProps } from './ContextMenuItem'; +import ContextMenuItem, { IProps as ItemProps } from './ContextMenuItem'; -type Props = { +interface IProps { /** * List of actions in this group. @@ -16,7 +16,7 @@ type Props = { * The children of the component. */ children?: ReactNode; -}; +} const useStyles = makeStyles()((theme: Theme) => { return { @@ -43,7 +43,7 @@ const useStyles = makeStyles()((theme: Theme) => { const ContextMenuItemGroup = ({ actions, children -}: Props) => { +}: IProps) => { const { classes: styles } = useStyles(); return ( diff --git a/react/features/base/util/loadScript.web.ts b/react/features/base/util/loadScript.web.ts index 807b0cfdce4b..dbdb3755b3b1 100644 --- a/react/features/base/util/loadScript.web.ts +++ b/react/features/base/util/loadScript.web.ts @@ -1,5 +1,3 @@ -declare let JitsiMeetJS: any; - /** * Loads a script from a specific URL. The script will be interpreted upon load. * diff --git a/react/features/breakout-rooms/actions.ts b/react/features/breakout-rooms/actions.ts index 208d71640c81..0363d0054082 100644 --- a/react/features/breakout-rooms/actions.ts +++ b/react/features/breakout-rooms/actions.ts @@ -32,8 +32,6 @@ import { } from './functions'; import logger from './logger'; -declare let APP: any; - /** * Action to create a breakout room. * diff --git a/react/features/breakout-rooms/middleware.ts b/react/features/breakout-rooms/middleware.ts index fd4099796128..8645c6741ca7 100644 --- a/react/features/breakout-rooms/middleware.ts +++ b/react/features/breakout-rooms/middleware.ts @@ -10,8 +10,6 @@ import { moveToRoom } from './actions'; import logger from './logger'; import { IRooms } from './types'; -declare const APP: any; - /** * Registers a change handler for state['features/base/conference'].conference to * set the event listeners needed for the breakout rooms feature to operate. diff --git a/react/features/chat/components/web/ChatInput.tsx b/react/features/chat/components/web/ChatInput.tsx index 342a8586c193..9ed67d4c1fde 100644 --- a/react/features/chat/components/web/ChatInput.tsx +++ b/react/features/chat/components/web/ChatInput.tsx @@ -37,7 +37,7 @@ interface IProps extends WithTranslation { /** * The type of the React {@code Component} state of {@link ChatInput}. */ -type State = { +interface IState { /** * User provided nickname when the input text is provided in the view. @@ -48,14 +48,14 @@ type State = { * Whether or not the smiley selector is visible. */ showSmileysPanel: boolean; -}; +} /** * Implements a React Component for drafting and submitting a chat message. * * @augments Component */ -class ChatInput extends Component { +class ChatInput extends Component { _textArea?: RefObject; state = { diff --git a/react/features/chat/components/web/DisplayNameForm.tsx b/react/features/chat/components/web/DisplayNameForm.tsx index d4118f4fe316..2c2c637da370 100644 --- a/react/features/chat/components/web/DisplayNameForm.tsx +++ b/react/features/chat/components/web/DisplayNameForm.tsx @@ -30,20 +30,20 @@ interface IProps extends WithTranslation { /** * The type of the React {@code Component} state of {@DisplayNameForm}. */ -type State = { +interface IState { /** * User provided display name when the input text is provided in the view. */ displayName: string; -}; +} /** * React Component for requesting the local participant to set a display name. * * @augments Component */ -class DisplayNameForm extends Component { +class DisplayNameForm extends Component { state = { displayName: '' }; diff --git a/react/features/chat/components/web/GifMessage.tsx b/react/features/chat/components/web/GifMessage.tsx index bab8ef9ecfec..0d6513e00506 100644 --- a/react/features/chat/components/web/GifMessage.tsx +++ b/react/features/chat/components/web/GifMessage.tsx @@ -1,13 +1,13 @@ import React from 'react'; import { makeStyles } from 'tss-react/mui'; -type Props = { +interface IProps { /** * URL of the GIF. */ url: string; -}; +} const useStyles = makeStyles()(() => { return { @@ -27,7 +27,7 @@ const useStyles = makeStyles()(() => { }; }); -const GifMessage = ({ url }: Props) => { +const GifMessage = ({ url }: IProps) => { const { classes: styles } = useStyles(); return (

diff --git a/react/features/chat/components/web/TouchmoveHack.tsx b/react/features/chat/components/web/TouchmoveHack.tsx index 5444d88a3dac..4e98544f7353 100644 --- a/react/features/chat/components/web/TouchmoveHack.tsx +++ b/react/features/chat/components/web/TouchmoveHack.tsx @@ -3,7 +3,7 @@ import { makeStyles } from 'tss-react/mui'; import { isMobileBrowser } from '../../../base/environment/utils'; -type Props = { +interface IProps { /** * The component(s) that need to be scrollable on mobile. @@ -20,7 +20,7 @@ type Props = { */ isModal: boolean; -}; +} const useStyles = makeStyles()(() => { return { @@ -40,7 +40,7 @@ const useStyles = makeStyles()(() => { * * @returns {ReactElement} */ -function TouchmoveHack({ children, isModal, flex }: Props) { +function TouchmoveHack({ children, isModal, flex }: IProps) { if (!isModal || !isMobileBrowser()) { return children; } diff --git a/react/features/conference/components/native/carmode/TitleBar.tsx b/react/features/conference/components/native/carmode/TitleBar.tsx index d3688f001fb3..90405d1f03ed 100644 --- a/react/features/conference/components/native/carmode/TitleBar.tsx +++ b/react/features/conference/components/native/carmode/TitleBar.tsx @@ -21,7 +21,7 @@ import { VideoQualityLabel } from '../../../../video-quality'; import styles from './styles'; -type Props = { +interface IProps { /** * Name of the meeting we're currently in. @@ -33,16 +33,16 @@ type Props = { */ _meetingNameEnabled: boolean; -}; +} /** * Implements a navigation bar component that is rendered on top of the * carmode screen. * - * @param {Props} props - The React props passed to this component. + * @param {IProps} props - The React props passed to this component. * @returns {JSX.Element} */ -const TitleBar = (props: Props): JSX.Element => { +const TitleBar = (props: IProps): JSX.Element => { const localParticipant = useSelector(getLocalParticipant); const localParticipantId = localParticipant?.id; @@ -83,7 +83,7 @@ const TitleBar = (props: Props): JSX.Element => { * Maps part of the Redux store to the props of this component. * * @param {Object} state - The Redux state. - * @returns {Props} + * @returns {IProps} */ function _mapStateToProps(state: IReduxState) { const { hideConferenceSubject } = state['features/base/config']; diff --git a/react/features/connection-indicator/components/web/ConnectionIndicator.tsx b/react/features/connection-indicator/components/web/ConnectionIndicator.tsx index 2155c24228d8..636a7dbe738d 100644 --- a/react/features/connection-indicator/components/web/ConnectionIndicator.tsx +++ b/react/features/connection-indicator/components/web/ConnectionIndicator.tsx @@ -146,13 +146,13 @@ type Props = AbstractProps & WithTranslation & { statsPopoverPosition: string; }; -type State = AbstractState & { +interface IState extends AbstractState { /** * Whether popover is ivisible or not. */ popoverVisible: boolean; -}; +} const styles = (theme: Theme) => { return { @@ -206,7 +206,7 @@ const styles = (theme: Theme) => { * * @augments {Component} */ -class ConnectionIndicator extends AbstractConnectionIndicator { +class ConnectionIndicator extends AbstractConnectionIndicator { /** * Initializes a new {@code ConnectionIndicator} instance. * diff --git a/react/features/desktop-picker/components/DesktopPicker.tsx b/react/features/desktop-picker/components/DesktopPicker.tsx index cf12508c524f..f249352c45c4 100644 --- a/react/features/desktop-picker/components/DesktopPicker.tsx +++ b/react/features/desktop-picker/components/DesktopPicker.tsx @@ -70,7 +70,7 @@ interface IProps extends WithTranslation { /** * The type of the React {@code Component} state of {@link DesktopPicker}. */ -type State = { +interface IState { /** * The state of the audio screen share checkbox. @@ -96,7 +96,7 @@ type State = { * The desktop source types to fetch previews for. */ types: Array; -}; +} /** @@ -104,7 +104,7 @@ type State = { * * @augments Component */ -class DesktopPicker extends PureComponent { +class DesktopPicker extends PureComponent { /** * Implements React's {@link Component#getDerivedStateFromProps()}. * @@ -130,7 +130,7 @@ class DesktopPicker extends PureComponent { _poller: any = null; - state: State = { + state: IState = { screenShareAudio: false, selectedSource: {}, selectedTab: 0, diff --git a/react/features/display-name/components/native/DisplayNameLabel.tsx b/react/features/display-name/components/native/DisplayNameLabel.tsx index 080b162f586b..3d625676a8d8 100644 --- a/react/features/display-name/components/native/DisplayNameLabel.tsx +++ b/react/features/display-name/components/native/DisplayNameLabel.tsx @@ -12,7 +12,7 @@ import { connect } from '../../../base/redux/functions'; // @ts-ignore import styles from './styles'; -type Props = { +interface IProps { /** * The name of the participant to render. @@ -33,12 +33,12 @@ type Props = { * The ID of the participant to render the label for. */ participantId: string; -}; +} /** * Renders a label with the display name of the on-stage participant. */ -class DisplayNameLabel extends React.Component { +class DisplayNameLabel extends React.Component { /** * Implements {@code Component#render}. * @@ -65,10 +65,10 @@ class DisplayNameLabel extends React.Component { * Maps part of the Redux state to the props of this component. * * @param {any} state - The Redux state. - * @param {Props} ownProps - The own props of the component. - * @returns {Props} + * @param {IProps} ownProps - The own props of the component. + * @returns {IProps} */ -function _mapStateToProps(state: IReduxState, ownProps: Partial) { +function _mapStateToProps(state: IReduxState, ownProps: Partial) { const participant = getParticipantById(state, ownProps.participantId ?? ''); return { diff --git a/react/features/display-name/components/web/DisplayNamePrompt.tsx b/react/features/display-name/components/web/DisplayNamePrompt.tsx index 0790e23ad9d1..1bbd5c65970f 100644 --- a/react/features/display-name/components/web/DisplayNamePrompt.tsx +++ b/react/features/display-name/components/web/DisplayNamePrompt.tsx @@ -9,13 +9,13 @@ import AbstractDisplayNamePrompt, { IProps } from '../AbstractDisplayNamePrompt' /** * The type of the React {@code Component} props of {@link DisplayNamePrompt}. */ -type State = { +interface IState { /** * The name to show in the display name text field. */ displayName: string; -}; +} /** * Implements a React {@code Component} for displaying a dialog with an field @@ -23,7 +23,7 @@ type State = { * * @augments Component */ -class DisplayNamePrompt extends AbstractDisplayNamePrompt { +class DisplayNamePrompt extends AbstractDisplayNamePrompt { /** * Initializes a new {@code DisplayNamePrompt} instance. * diff --git a/react/features/e2ee/components/E2EESection.tsx b/react/features/e2ee/components/E2EESection.tsx index 36096c62db44..3e4d7b3c03a8 100644 --- a/react/features/e2ee/components/E2EESection.tsx +++ b/react/features/e2ee/components/E2EESection.tsx @@ -44,13 +44,13 @@ interface IProps extends WithTranslation { dispatch: IStore['dispatch']; } -type State = { +interface IState { /** * True if the switch is toggled on. */ toggled: boolean; -}; +} /** * Implements a React {@code Component} for displaying a security dialog section with a field @@ -58,13 +58,13 @@ type State = { * * @augments Component */ -class E2EESection extends Component { +class E2EESection extends Component { /** * Implements React's {@link Component#getDerivedStateFromProps()}. * * @inheritdoc */ - static getDerivedStateFromProps(props: IProps, state: State) { + static getDerivedStateFromProps(props: IProps, state: IState) { if (props._toggled !== state.toggled) { return { diff --git a/react/features/face-landmarks/FaceLandmarksDetector.ts b/react/features/face-landmarks/FaceLandmarksDetector.ts index 1a44e1266782..e22c3c8d4fa5 100644 --- a/react/features/face-landmarks/FaceLandmarksDetector.ts +++ b/react/features/face-landmarks/FaceLandmarksDetector.ts @@ -23,7 +23,6 @@ import { sendFaceExpressionsWebhook } from './functions'; import logger from './logger'; -declare const APP: any; /** * Class for face language detection. diff --git a/react/features/filmstrip/components/web/Filmstrip.tsx b/react/features/filmstrip/components/web/Filmstrip.tsx index 054ff19e332e..6190f34028ab 100644 --- a/react/features/filmstrip/components/web/Filmstrip.tsx +++ b/react/features/filmstrip/components/web/Filmstrip.tsx @@ -57,8 +57,6 @@ import ThumbnailWrapper from './ThumbnailWrapper'; // @ts-ignore import { styles } from './styles'; -declare let APP: any; - /** * The type of the React {@code Component} props of {@link Filmstrip}. */ @@ -230,7 +228,7 @@ interface IProps extends WithTranslation { filmstripType: string; } -type State = { +interface IState { /** * Initial top panel height on drag handle mouse down. @@ -251,7 +249,7 @@ type State = { * Initial mouse position on drag handle mouse down. */ mousePosition?: number | null; -}; +} /** * Implements a React {@link Component} which represents the filmstrip on @@ -259,7 +257,7 @@ type State = { * * @augments Component */ -class Filmstrip extends PureComponent { +class Filmstrip extends PureComponent { _throttledResize: Function; diff --git a/react/features/filmstrip/components/web/PinnedIndicator.tsx b/react/features/filmstrip/components/web/PinnedIndicator.tsx index 4f10eb3b0bdf..45f7a16a9fe6 100644 --- a/react/features/filmstrip/components/web/PinnedIndicator.tsx +++ b/react/features/filmstrip/components/web/PinnedIndicator.tsx @@ -13,7 +13,7 @@ import { getPinnedActiveParticipants, isStageFilmstripAvailable } from '../../fu /** * The type of the React {@code Component} props of {@link PinnedIndicator}. */ -type Props = { +interface IProps { /** * The font-size for the icon. @@ -30,7 +30,7 @@ type Props = { * From which side of the indicator the tooltip should appear from. */ tooltipPosition: string; -}; +} const useStyles = makeStyles()(() => { return { @@ -54,7 +54,7 @@ const PinnedIndicator = ({ iconSize, participantId, tooltipPosition -}: Props) => { +}: IProps) => { const stageFilmstrip = useSelector(isStageFilmstripAvailable); const pinned = useSelector((state: IReduxState) => getParticipantById(state, participantId))?.pinned; const activePinnedParticipants: Array<{ participantId: string; pinned: boolean; }> diff --git a/react/features/filmstrip/components/web/RaisedHandIndicator.tsx b/react/features/filmstrip/components/web/RaisedHandIndicator.tsx index 552153a083e3..7c4718a3b0a3 100644 --- a/react/features/filmstrip/components/web/RaisedHandIndicator.tsx +++ b/react/features/filmstrip/components/web/RaisedHandIndicator.tsx @@ -12,7 +12,7 @@ import BaseIndicator from '../../../base/react/components/web/BaseIndicator'; /** * The type of the React {@code Component} props of {@link RaisedHandIndicator}. */ -type Props = { +interface IProps { /** * The font-size for the icon. @@ -29,7 +29,7 @@ type Props = { * From which side of the indicator the tooltip should appear from. */ tooltipPosition: string; -}; +} const useStyles = makeStyles()((theme: Theme) => { return { @@ -53,7 +53,7 @@ const RaisedHandIndicator = ({ iconSize, participantId, tooltipPosition -}: Props) => { +}: IProps) => { const participant: IParticipant | undefined = useSelector((state: IReduxState) => getParticipantById(state, participantId)); const _raisedHand = hasRaisedHand(participant); diff --git a/react/features/filmstrip/components/web/Thumbnail.tsx b/react/features/filmstrip/components/web/Thumbnail.tsx index d0f04a539c81..e2836878b02f 100644 --- a/react/features/filmstrip/components/web/Thumbnail.tsx +++ b/react/features/filmstrip/components/web/Thumbnail.tsx @@ -75,12 +75,10 @@ import ThumbnailTopIndicators from './ThumbnailTopIndicators'; // @ts-ignore import VirtualScreenshareParticipant from './VirtualScreenshareParticipant'; -declare let interfaceConfig: any; - /** * The type of the React {@code Component} state of {@link Thumbnail}. */ -export type State = { +export interface IState { /** * Indicates that the canplay event has been received. @@ -101,12 +99,12 @@ export type State = { * Whether popover is visible or not. */ popoverVisible: boolean; -}; +} /** * The type of the React {@code Component} props of {@link Thumbnail}. */ -export type Props = { +export interface IProps { /** * The audio track related to the participant. @@ -277,7 +275,7 @@ export type Props = { * there is empty space. */ width?: number; -}; +} const defaultStyles = (theme: Theme) => { return { @@ -384,7 +382,7 @@ const defaultStyles = (theme: Theme) => { * * @augments Component */ -class Thumbnail extends Component { +class Thumbnail extends Component { /** * The long touch setTimeout handler. */ @@ -402,7 +400,7 @@ class Thumbnail extends Component { * @param {Object} props - The read-only React Component props with which * the new instance is to be initialized. */ - constructor(props: Props) { + constructor(props: IProps) { super(props); const state = { @@ -487,7 +485,7 @@ class Thumbnail extends Component { * @inheritdoc * @returns {void} */ - componentDidUpdate(prevProps: Props, prevState: State) { + componentDidUpdate(prevProps: IProps, prevState: IState) { if (prevState.displayMode !== this.state.displayMode) { this._onDisplayModeChanged(); } @@ -567,7 +565,7 @@ class Thumbnail extends Component { * * @inheritdoc */ - static getDerivedStateFromProps(props: Props, prevState: State) { + static getDerivedStateFromProps(props: IProps, prevState: IState) { if (!props._videoTrack && prevState.canPlayEventReceived) { const newState = { ...prevState, @@ -1168,7 +1166,7 @@ class Thumbnail extends Component { * @param {Object} state - The Redux state. * @param {Object} ownProps - The own props of the component. * @private - * @returns {Props} + * @returns {IProps} */ function _mapStateToProps(state: IReduxState, ownProps: any): Object { const { participantID, filmstripType = FILMSTRIP_TYPE.MAIN } = ownProps; diff --git a/react/features/filmstrip/components/web/ThumbnailBottomIndicators.tsx b/react/features/filmstrip/components/web/ThumbnailBottomIndicators.tsx index a68b9d69be29..1f2a5ce1e99a 100644 --- a/react/features/filmstrip/components/web/ThumbnailBottomIndicators.tsx +++ b/react/features/filmstrip/components/web/ThumbnailBottomIndicators.tsx @@ -17,9 +17,7 @@ import { THUMBNAIL_TYPE } from '../../constants'; // @ts-ignore import StatusIndicators from './StatusIndicators'; -declare let interfaceConfig: any; - -type Props = { +interface IProps { /** * Class name for indicators container. @@ -45,7 +43,7 @@ type Props = { * The type of thumbnail. */ thumbnailType: string; -}; +} const useStyles = makeStyles()(() => { return { @@ -72,7 +70,7 @@ const ThumbnailBottomIndicators = ({ participantId, showStatusIndicators = true, thumbnailType -}: Props) => { +}: IProps) => { const { classes: styles } = useStyles(); const _allowEditing = !useSelector(isNameReadOnly); const _defaultLocalDisplayName = interfaceConfig.DEFAULT_LOCAL_DISPLAY_NAME; diff --git a/react/features/filmstrip/components/web/ThumbnailTopIndicators.tsx b/react/features/filmstrip/components/web/ThumbnailTopIndicators.tsx index 267e5787f964..73cc436a70ec 100644 --- a/react/features/filmstrip/components/web/ThumbnailTopIndicators.tsx +++ b/react/features/filmstrip/components/web/ThumbnailTopIndicators.tsx @@ -19,9 +19,7 @@ import RaisedHandIndicator from './RaisedHandIndicator'; import StatusIndicators from './StatusIndicators'; import VideoMenuTriggerButton from './VideoMenuTriggerButton'; -declare let interfaceConfig: any; - -type Props = { +interface IProps { /** * Whether to hide the connection indicator. @@ -67,7 +65,7 @@ type Props = { * The type of thumbnail. */ thumbnailType: string; -}; +} const useStyles = makeStyles()(() => { return { @@ -91,7 +89,7 @@ const ThumbnailTopIndicators = ({ popoverVisible, showPopover, thumbnailType -}: Props) => { +}: IProps) => { const { classes: styles, cx } = useStyles(); const _isMobile = isMobileBrowser(); diff --git a/react/features/filmstrip/components/web/VideoMenuTriggerButton.tsx b/react/features/filmstrip/components/web/VideoMenuTriggerButton.tsx index 317adbf3d0a1..503e86027176 100644 --- a/react/features/filmstrip/components/web/VideoMenuTriggerButton.tsx +++ b/react/features/filmstrip/components/web/VideoMenuTriggerButton.tsx @@ -3,7 +3,7 @@ import React from 'react'; import LocalVideoMenuTriggerButton from '../../../video-menu/components/web/LocalVideoMenuTriggerButton'; import RemoteVideoMenuTriggerButton from '../../../video-menu/components/web/RemoteVideoMenuTriggerButton'; -type Props = { +interface IProps { /** * Hide popover callback. @@ -39,7 +39,7 @@ type Props = { * Whether or not the component is visible. */ visible: boolean; -}; +} // eslint-disable-next-line no-confusing-arrow const VideoMenuTriggerButton = ({ @@ -50,7 +50,7 @@ const VideoMenuTriggerButton = ({ showPopover, thumbnailType, visible -}: Props) => local +}: IProps) => local ? ( { +class LobbySection extends PureComponent { /** * Instantiates a new component. * @@ -61,7 +61,7 @@ class LobbySection extends PureComponent { * * @inheritdoc */ - static getDerivedStateFromProps(props: IProps, state: State) { + static getDerivedStateFromProps(props: IProps, state: IState) { if (props._lobbyEnabled !== state.lobbyEnabled) { return { diff --git a/react/features/participants-pane/components/breakout-rooms/components/web/CollapsibleRoom.tsx b/react/features/participants-pane/components/breakout-rooms/components/web/CollapsibleRoom.tsx index 9b4e12099219..b79acc705fab 100644 --- a/react/features/participants-pane/components/breakout-rooms/components/web/CollapsibleRoom.tsx +++ b/react/features/participants-pane/components/breakout-rooms/components/web/CollapsibleRoom.tsx @@ -16,7 +16,7 @@ import { participantMatchesSearch } from '../../../../functions'; import ParticipantActionEllipsis from '../../../web/ParticipantActionEllipsis'; import ParticipantItem from '../../../web/ParticipantItem'; -type Props = { +interface IProps { /** * Type of trigger for the breakout room actions. @@ -78,7 +78,7 @@ type Props = { * Toggles the room participant context menu. */ toggleParticipantMenu: Function; -}; +} const useStyles = makeStyles()((theme: Theme) => { return { @@ -118,7 +118,7 @@ export const CollapsibleRoom = ({ room, searchString, toggleParticipantMenu -}: Props) => { +}: IProps) => { const { t } = useTranslation(); const { classes: styles, cx } = useStyles(); const [ collapsed, setCollapsed ] = useState(false); diff --git a/react/features/participants-pane/components/breakout-rooms/components/web/JoinQuickActionButton.tsx b/react/features/participants-pane/components/breakout-rooms/components/web/JoinQuickActionButton.tsx index e8ca1ab655a9..a0c4adb42f01 100644 --- a/react/features/participants-pane/components/breakout-rooms/components/web/JoinQuickActionButton.tsx +++ b/react/features/participants-pane/components/breakout-rooms/components/web/JoinQuickActionButton.tsx @@ -9,7 +9,7 @@ import { sendAnalytics } from '../../../../../analytics/functions'; import Button from '../../../../../base/ui/components/web/Button'; import { moveToRoom } from '../../../../../breakout-rooms/actions'; -type Props = { +interface IProps { /** * The room to join. @@ -18,7 +18,7 @@ type Props = { id: string; jid: string; }; -}; +} const useStyles = makeStyles()((theme: Theme) => { return { @@ -28,7 +28,7 @@ const useStyles = makeStyles()((theme: Theme) => { }; }); -const JoinActionButton = ({ room }: Props) => { +const JoinActionButton = ({ room }: IProps) => { const { classes: styles } = useStyles(); const { t } = useTranslation(); const dispatch = useDispatch(); diff --git a/react/features/participants-pane/components/breakout-rooms/components/web/RoomActionEllipsis.tsx b/react/features/participants-pane/components/breakout-rooms/components/web/RoomActionEllipsis.tsx index b07c700b7770..7d3e43f10a90 100644 --- a/react/features/participants-pane/components/breakout-rooms/components/web/RoomActionEllipsis.tsx +++ b/react/features/participants-pane/components/breakout-rooms/components/web/RoomActionEllipsis.tsx @@ -4,15 +4,15 @@ import { useTranslation } from 'react-i18next'; import { IconHorizontalPoints } from '../../../../../base/icons/svg'; import Button from '../../../../../base/ui/components/web/Button'; -type Props = { +interface IProps { /** * Click handler function. */ onClick: () => void; -}; +} -const RoomActionEllipsis = ({ onClick }: Props) => { +const RoomActionEllipsis = ({ onClick }: IProps) => { const { t } = useTranslation(); return ( diff --git a/react/features/participants-pane/components/breakout-rooms/components/web/RoomParticipantContextMenu.tsx b/react/features/participants-pane/components/breakout-rooms/components/web/RoomParticipantContextMenu.tsx index c99fd6044626..7f194357a53e 100644 --- a/react/features/participants-pane/components/breakout-rooms/components/web/RoomParticipantContextMenu.tsx +++ b/react/features/participants-pane/components/breakout-rooms/components/web/RoomParticipantContextMenu.tsx @@ -17,7 +17,7 @@ import SendToRoomButton from '../../../../../video-menu/components/web/SendToRoo import { AVATAR_SIZE } from '../../../../constants'; -type Props = { +interface IProps { /** * Room and participant jid reference. @@ -47,7 +47,7 @@ type Props = { * Callback for making a selection in the menu. */ onSelect: (force?: any) => void; -}; +} const useStyles = makeStyles()((theme: Theme) => { return { @@ -69,7 +69,7 @@ export const RoomParticipantContextMenu = ({ onEnter, onLeave, onSelect -}: Props) => { +}: IProps) => { const { classes: styles } = useStyles(); const { t } = useTranslation(); const isLocalModerator = useSelector(isLocalParticipantModerator); diff --git a/react/features/participants-pane/components/web/FooterContextMenu.tsx b/react/features/participants-pane/components/web/FooterContextMenu.tsx index c416373c335c..60cb57d35445 100644 --- a/react/features/participants-pane/components/web/FooterContextMenu.tsx +++ b/react/features/participants-pane/components/web/FooterContextMenu.tsx @@ -68,7 +68,7 @@ const useStyles = makeStyles()((theme: Theme) => { }; }); -type Props = { +interface IProps { /** * Whether the menu is open. @@ -84,9 +84,9 @@ type Props = { * Callback for the mouse leaving this item. */ onMouseLeave?: (e?: React.MouseEvent) => void; -}; +} -export const FooterContextMenu = ({ isOpen, onDrawerClose, onMouseLeave }: Props) => { +export const FooterContextMenu = ({ isOpen, onDrawerClose, onMouseLeave }: IProps) => { const dispatch = useDispatch(); const isModerationSupported = useSelector((state: IReduxState) => isAvModerationSupported()(state)); const allModerators = useSelector(isEveryoneModerator); diff --git a/react/features/participants-pane/components/web/LobbyParticipantItem.tsx b/react/features/participants-pane/components/web/LobbyParticipantItem.tsx index c8e045901018..8183b9610f9b 100644 --- a/react/features/participants-pane/components/web/LobbyParticipantItem.tsx +++ b/react/features/participants-pane/components/web/LobbyParticipantItem.tsx @@ -19,7 +19,7 @@ import { useLobbyActions } from '../../hooks'; import ParticipantItem from './ParticipantItem'; -type Props = { +interface IProps { /** * Callback used to open a drawer with admit/reject actions. @@ -35,7 +35,7 @@ type Props = { * Participant reference. */ participant: IParticipant; -}; +} const useStyles = makeStyles()((theme: Theme) => { return { @@ -59,7 +59,7 @@ export const LobbyParticipantItem = ({ overflowDrawer, participant: p, openDrawerForParticipant -}: Props) => { +}: IProps) => { const { id } = p; const [ admit, reject, chat ] = useLobbyActions({ participantID: id }); const { t } = useTranslation(); diff --git a/react/features/participants-pane/components/web/MeetingParticipants.tsx b/react/features/participants-pane/components/web/MeetingParticipants.tsx index 7989af32ea04..a85d213bc664 100644 --- a/react/features/participants-pane/components/web/MeetingParticipants.tsx +++ b/react/features/participants-pane/components/web/MeetingParticipants.tsx @@ -53,7 +53,7 @@ const useStyles = makeStyles()((theme: Theme) => { }; }); -type Props = { +interface IProps { currentRoom?: { name: string; }; overflowDrawer?: boolean; participantsCount?: number; @@ -61,7 +61,7 @@ type Props = { setSearchString: (newValue: string) => void; showInviteButton?: boolean; sortedParticipantIds?: Array; -}; +} /** * Renders the MeetingParticipantList component. @@ -81,7 +81,7 @@ function MeetingParticipants({ setSearchString, showInviteButton, sortedParticipantIds = [] -}: Props) { +}: IProps) { const dispatch = useDispatch(); const { t } = useTranslation(); @@ -158,7 +158,7 @@ function MeetingParticipants({ * @param {Object} state - The Redux state. * @param {Object} ownProps - The own props of the component. * @private - * @returns {Props} + * @returns {IProps} */ function _mapStateToProps(state: IReduxState): Object { let sortedParticipantIds: any = getSortedParticipantIds(state); diff --git a/react/features/participants-pane/components/web/ParticipantActionEllipsis.tsx b/react/features/participants-pane/components/web/ParticipantActionEllipsis.tsx index 1300d5f4bdcb..b7f3783bc3b5 100644 --- a/react/features/participants-pane/components/web/ParticipantActionEllipsis.tsx +++ b/react/features/participants-pane/components/web/ParticipantActionEllipsis.tsx @@ -3,7 +3,7 @@ import React from 'react'; import { IconHorizontalPoints } from '../../../base/icons/svg'; import Button from '../../../base/ui/components/web/Button'; -type Props = { +interface IProps { /** * Label used for accessibility. @@ -14,9 +14,9 @@ type Props = { * Click handler function. */ onClick: () => void; -}; +} -const ParticipantActionEllipsis = ({ accessibilityLabel, onClick }: Props) => ( +const ParticipantActionEllipsis = ({ accessibilityLabel, onClick }: IProps) => (