ref(TS) Convert some native components to TS (#13281)

Remove some @ts-ignores

react/features/security/components/security-dialog/native/SecurityDialog.tsx

@@ -1,11 +1,14 @@
 import React, { PureComponent } from 'react';
 import {
     Text,
-    View
+    TextStyle,
+    View,
+    ViewStyle
 } from 'react-native';
 import { connect } from 'react-redux';
-import type { Dispatch } from 'redux';
 
+import { IReduxState, IStore } from '../../../../app/types';
+import { IJitsiConference } from '../../../../base/conference/reducer';
 import { getSecurityUiConfig } from '../../../../base/config/functions.any';
 import { MEETING_PASSWORD_ENABLED } from '../../../../base/flags/constants';
 import { getFeatureFlag } from '../../../../base/flags/functions';
@@ -40,94 +43,94 @@ const _TEXT_INPUT_PROPS = {
 /**
  * The type of the React {@code Component} props of {@link SecurityDialog}.
  */
-type Props = {
+interface IProps {
 
     /**
      * The JitsiConference which requires a password.
      */
-    _conference: Object,
+    _conference?: IJitsiConference;
 
     /**
      * Whether the local user is the moderator.
      */
-    _isModerator: boolean,
+    _isModerator: boolean;
 
     /**
      * State of the lobby mode.
      */
-    _lobbyEnabled: boolean,
+    _lobbyEnabled: boolean;
 
     /**
      * Whether the lobby mode switch is available or not.
      */
-    _lobbyModeSwitchVisible: boolean,
+    _lobbyModeSwitchVisible: boolean;
 
     /**
      * The value for how the conference is locked (or undefined if not locked)
      * as defined by room-lock constants.
      */
-    _locked: string,
+    _locked?: string;
 
     /**
      * Checks if the conference room is locked or not.
      */
-    _lockedConference: boolean,
+    _lockedConference: boolean;
 
     /**
      * The current known password for the JitsiConference.
      */
-    _password: string,
+    _password?: string;
 
     /**
      * Number of digits used in the room-lock password.
      */
-    _passwordNumberOfDigits: number,
+    _passwordNumberOfDigits?: number;
 
     /**
      * Whether setting a room password is available or not.
      */
-    _roomPasswordControls: boolean,
+    _roomPasswordControls: boolean;
 
     /**
      * Redux store dispatch function.
      */
-    dispatch: Dispatch<any>,
+    dispatch: IStore['dispatch'];
 
     /**
      * Invoked to obtain translated strings.
      */
-    t: Function
-};
+    t: Function;
+}
 
 /**
  * The type of the React {@code Component} state of {@link SecurityDialog}.
  */
-type State = {
+interface IState {
 
     /**
      * Password added by the participant for room lock.
      */
-    passwordInputValue: string,
+    passwordInputValue: string;
 
     /**
      * Shows an input or a message.
      */
-    showElement: boolean
-};
+    showElement: boolean;
+}
 
 /**
  * Component that renders the security options dialog.
  *
  * @returns {React$Element<any>}
  */
-class SecurityDialog extends PureComponent<Props, State> {
+class SecurityDialog extends PureComponent<IProps, IState> {
 
     /**
      * Instantiates a new {@code SecurityDialog}.
      *
      * @inheritdoc
      */
-    constructor(props: Props) {
+    constructor(props: IProps) {
         super(props);
 
         this.state = {
@@ -180,8 +183,8 @@ class SecurityDialog extends PureComponent<Props, State> {
                     <Text style = { styles.lobbyModeText }>
                         { t('lobby.enableDialogText') }
                     </Text>
-                    <View style = { styles.lobbyModeSection }>
-                        <Text style = { styles.lobbyModeLabel } >
+                    <View style = { styles.lobbyModeSection as ViewStyle }>
+                        <Text style = { styles.lobbyModeLabel as TextStyle } >
                             { t('lobby.toggleLabel') }
                         </Text>
                         <Switch
@@ -267,7 +270,7 @@ class SecurityDialog extends PureComponent<Props, State> {
         if (_locked === LOCKED_REMOTELY) {
             if (_isModerator) {
                 setPasswordControls = (
-                    <View style = { styles.passwordSetRemotelyContainer }>
+                    <View style = { styles.passwordSetRemotelyContainer as ViewStyle }>
                         <Text style = { styles.passwordSetRemotelyText }>
                             { t('passwordSetRemotely') }
                         </Text>
@@ -281,7 +284,7 @@ class SecurityDialog extends PureComponent<Props, State> {
                 );
             } else {
                 setPasswordControls = (
-                    <View style = { styles.passwordSetRemotelyContainer }>
+                    <View style = { styles.passwordSetRemotelyContainer as ViewStyle }>
                         <Text style = { styles.passwordSetRemotelyTextDisabled }>
                             { t('passwordSetRemotely') }
                         </Text>
@@ -306,7 +309,7 @@ class SecurityDialog extends PureComponent<Props, State> {
                 <View
                     style = {
                         _locked !== LOCKED_REMOTELY
-                        && styles.passwordContainerControls
+                        && styles.passwordContainerControls as ViewStyle
                     }>
                     <View>
                         { this._setRoomPasswordMessage() }
@@ -324,7 +327,7 @@ class SecurityDialog extends PureComponent<Props, State> {
      * @private
      */
     _setRoomPasswordMessage() {
-        let textInputProps = _TEXT_INPUT_PROPS;
+        let textInputProps: any = _TEXT_INPUT_PROPS;
         const {
             _isModerator,
             _locked,
@@ -362,8 +365,8 @@ class SecurityDialog extends PureComponent<Props, State> {
             } else if (_locked) {
                 if (_locked === LOCKED_LOCALLY && typeof _password !== 'undefined') {
                     return (
-                        <View style = { styles.savedPasswordContainer }>
-                            <Text style = { styles.savedPasswordLabel }>
+                        <View style = { styles.savedPasswordContainer as ViewStyle }>
+                            <Text style = { styles.savedPasswordLabel as TextStyle }>
                                 { t('info.password') }
                             </Text>
                             <Text style = { styles.savedPassword }>
@@ -376,8 +379,6 @@ class SecurityDialog extends PureComponent<Props, State> {
         }
     }
 
-    _onToggleLobbyMode: () => void;
-
     /**
      * Handles the enable-disable lobby mode switch.
      *
@@ -394,8 +395,6 @@ class SecurityDialog extends PureComponent<Props, State> {
         }
     }
 
-    _onAddPassword: () => void;
-
     /**
      * Callback to be invoked when add password button is pressed.
      *
@@ -431,15 +430,13 @@ class SecurityDialog extends PureComponent<Props, State> {
         return true;
     }
 
-    _onChangeText: string => void;
-
     /**
      * Callback to be invoked when the text in the field changes.
      *
      * @param {string} passwordInputValue - The value of password input.
      * @returns {void}
      */
-    _onChangeText(passwordInputValue) {
+    _onChangeText(passwordInputValue: string) {
         if (!this._validateInputValue(passwordInputValue)) {
             return;
         }
@@ -449,8 +446,6 @@ class SecurityDialog extends PureComponent<Props, State> {
         });
     }
 
-    _onCancel: () => void;
-
     /**
      * Cancels value typed in text input.
      *
@@ -465,8 +460,6 @@ class SecurityDialog extends PureComponent<Props, State> {
         this.props.dispatch(unlockRoom());
     }
 
-    _onCopy: () => void;
-
     /**
      * Copies room password.
      *
@@ -478,8 +471,6 @@ class SecurityDialog extends PureComponent<Props, State> {
         copyText(passwordInputValue);
     }
 
-    _onSubmit: () => void;
-
     /**
      * Submits value typed in text input.
      *
@@ -492,7 +483,7 @@ class SecurityDialog extends PureComponent<Props, State> {
         } = this.props;
         const { passwordInputValue } = this.state;
 
-        dispatch(endRoomLockRequest(_conference, passwordInputValue));
+        _conference && dispatch(endRoomLockRequest(_conference, passwordInputValue));
     }
 }
 
@@ -500,14 +491,14 @@ class SecurityDialog extends PureComponent<Props, State> {
  * 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: Object): Object {
+function _mapStateToProps(state: IReduxState) {
     const { conference, locked, password } = state['features/base/conference'];
     const { disableLobbyPassword, hideLobbyButton } = getSecurityUiConfig(state);
     const { lobbyEnabled } = state['features/lobby'];
     const { roomPasswordNumberOfDigits } = state['features/base/config'];
-    const lobbySupported = conference && conference.isLobbySupported();
+    const lobbySupported = conference?.isLobbySupported();
     const visible = getFeatureFlag(state, MEETING_PASSWORD_ENABLED, true);
 
     return {

react/features/security/components/security-dialog/native/SecurityDialogButton.ts

@@ -1,21 +1,17 @@
-// @flow
-
 import { connect } from 'react-redux';
 
 import { translate } from '../../../../base/i18n/functions';
 import { navigate } from '../../../../mobile/navigation/components/conference/ConferenceNavigationContainerRef';
 import { screen } from '../../../../mobile/navigation/routes';
 import AbstractSecurityDialogButton, {
-    type Props as AbstractSecurityDialogButtonProps,
+    IProps as AbstractSecurityDialogButtonProps,
     _mapStateToProps as _abstractMapStateToProps
 } from '../AbstractSecurityDialogButton';
 
-type Props = AbstractSecurityDialogButtonProps;
-
 /**
  * Implements an {@link AbstractSecurityDialogButton} to open the security screen.
  */
-class SecurityDialogButton<P: Props, S:*> extends AbstractSecurityDialogButton<P, S> {
+class SecurityDialogButton<P extends AbstractSecurityDialogButtonProps, S> extends AbstractSecurityDialogButton<P, S> {
 
     /**
      * Opens / closes the security screen.

react/features/security/components/security-dialog/native/styles.ts

@@ -1,5 +1,3 @@
-// @flow
-
 import BaseTheme from '../../../../base/ui/components/BaseTheme.native';
 
 /**