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

Remove some @ts-ignores

react/features/salesforce/components/native/RecordItem.tsx

@@ -1,8 +1,6 @@
-// @flow
-
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { Text, TouchableHighlight, View } from 'react-native';
+import { GestureResponderEvent, Text, TextStyle, TouchableHighlight, View, ViewStyle } from 'react-native';
 
 import Icon from '../../../base/icons/components/Icon';
 import { RECORD_TYPE } from '../../constants';
@@ -12,69 +10,71 @@ import styles from './styles';
 /**
  * The type of the React {@code Component} props of {@link RecordItem}.
  */
-type Props = {
+interface IProps {
 
     /**
      * The id of the record.
      */
-    id: String,
+    id?: string;
 
     /**
      * The name of the record.
      */
-    name: String,
+    name?: string;
 
     /**
      * The handler for the click event.
      */
-    onClick: Function,
+    onClick?: (e?: GestureResponderEvent | React.MouseEvent) => void;
 
     /**
      * The type of the record.
      */
-    type: String
+    type?: string;
 }
 
 /**
  * Component to render Record data.
  *
- * @param {Props} props - The props of the component.
+ * @param {IProps} props - The props of the component.
  * @returns {React$Element<any>}
  */
 export const RecordItem = ({
     id,
     name,
     type,
-    /* eslint-disable-next-line no-empty-function */
+    /* eslint-disable-next-line @typescript-eslint/no-empty-function */
     onClick = () => {}
-}: Props) => {
+}: IProps) => {
     const { t } = useTranslation();
-    const IconRecord = RECORD_TYPE[type].icon;
+    const IconRecord = RECORD_TYPE[type ?? ''].icon;
 
     return (
         <TouchableHighlight onPress = { onClick }>
             <View
                 key = { `record-${id}` }
-                style = { styles.recordItem }
+                style = { styles.recordItem as ViewStyle }
+
+                // @ts-ignore
                 title = { name }>
-                <View style = { styles.recordTypeIcon }>
+                <View style = { styles.recordTypeIcon as ViewStyle }>
                     {IconRecord && (
                         <Icon
                             src = { IconRecord }
                             style = { styles.recordIcon } />
                     )}
                 </View>
-                <View style = { styles.recordDetails }>
+                <View style = { styles.recordDetails as ViewStyle }>
                     <Text
                         key = { name }
                         numberOfLines = { 1 }
-                        style = { styles.recordName }>
+                        style = { styles.recordName as TextStyle }>
                         {name}
                     </Text>
                     <Text
                         key = { type }
                         style = { styles.recordType }>
-                        {t(RECORD_TYPE[type].label)}
+                        {t(RECORD_TYPE[type ?? ''].label)}
                     </Text>
                 </View>
             </View>

react/features/salesforce/components/native/SalesforceLinkDialog.tsx

@@ -1,8 +1,9 @@
 import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Platform, SafeAreaView, ScrollView, Text, View } from 'react-native';
+import { Platform, SafeAreaView, ScrollView, Text, View, ViewStyle } from 'react-native';
 import { useSelector } from 'react-redux';
 
+import { IReduxState } from '../../../app/types';
 import { IconSearch } from '../../../base/icons/svg';
 import JitsiScreen from '../../../base/modal/components/JitsiScreen';
 import LoadingIndicator from '../../../base/react/components/native/LoadingIndicator';
@@ -24,7 +25,7 @@ import styles from './styles';
  */
 const SalesforceLinkDialog = () => {
     const { t } = useTranslation();
-    const { clientHeight } = useSelector(state => state['features/base/responsive-ui']);
+    const { clientHeight } = useSelector((state: IReduxState) => state['features/base/responsive-ui']);
     const {
         hasDetailsErrors,
         hasRecordsErrors,
@@ -48,7 +49,7 @@ const SalesforceLinkDialog = () => {
     }, [ navigate, linkMeeting ]);
 
     const renderSpinner = () => (
-        <View style = { [ styles.recordsSpinner, { height: clientHeight - CONTENT_HEIGHT_OFFSET } ] }>
+        <View style = { [ styles.recordsSpinner, { height: clientHeight - CONTENT_HEIGHT_OFFSET } ] as ViewStyle[] }>
             <LoadingIndicator />
         </View>
     );
@@ -63,8 +64,8 @@ const SalesforceLinkDialog = () => {
         <SafeAreaView>
             <ScrollView
                 bounces = { false }
-                style = { [ styles.selectedRecord, { height: clientHeight - CONTENT_HEIGHT_OFFSET } ] }>
-                <View style = { styles.recordInfo }>
+                style = { [ styles.selectedRecord, { height: clientHeight - CONTENT_HEIGHT_OFFSET } ] as ViewStyle[] }>
+                <View style = { styles.recordInfo as ViewStyle }>
                     <RecordItem { ...selectedRecord } />
                     { selectedRecordOwner && <RecordItem { ...selectedRecordOwner } /> }
                     { hasDetailsErrors && renderDetailsErrors() }
@@ -75,9 +76,9 @@ const SalesforceLinkDialog = () => {
                 <Input
                     customStyles = {{ container: styles.notes }}
                     maxLength = { NOTES_MAX_LENGTH }
-                    minHeight = { Platform.OS === 'ios' && NOTES_LINES ? 20 * NOTES_LINES : null }
+                    minHeight = { Platform.OS === 'ios' && NOTES_LINES ? 20 * NOTES_LINES : undefined }
                     multiline = { true }
-                    numberOfLines = { Platform.OS === 'ios' ? null : NOTES_LINES }
+                    numberOfLines = { Platform.OS === 'ios' ? undefined : NOTES_LINES }
                     /* eslint-disable-next-line react/jsx-no-bind */
                     onChange = { value => setNotes(value) }
                     placeholder = { t('dialog.addMeetingNote') }
@@ -87,14 +88,14 @@ const SalesforceLinkDialog = () => {
     );
 
     const renderRecordsSearch = () => (
-        <View style = { styles.recordsSearchContainer }>
+        <View style = { styles.recordsSearchContainer as ViewStyle }>
             <Input
                 icon = { IconSearch }
                 maxLength = { NOTES_MAX_LENGTH }
                 /* eslint-disable-next-line react/jsx-no-bind */
                 onChange = { value => setSearchTerm(value) }
                 placeholder = { t('dialog.searchInSalesforce') }
-                value = { searchTerm } />
+                value = { searchTerm ?? '' } />
             {(!isLoading && !hasRecordsErrors) && (
                 <Text style = { styles.resultLabel }>
                     {showSearchResults
@@ -107,7 +108,7 @@ const SalesforceLinkDialog = () => {
     );
 
     const renderNoRecords = () => showNoResults && (
-        <View style = { [ styles.noRecords, { height: clientHeight - CONTENT_HEIGHT_OFFSET } ] }>
+        <View style = { [ styles.noRecords, { height: clientHeight - CONTENT_HEIGHT_OFFSET } ] as ViewStyle[] }>
             <Text style = { styles.noRecordsText }>
                 {t('dialog.searchResultsNotFound')}
             </Text>
@@ -118,7 +119,7 @@ const SalesforceLinkDialog = () => {
     );
 
     const renderRecordsError = () => (
-        <View style = { [ styles.recordsError, { height: clientHeight - CONTENT_HEIGHT_OFFSET } ] }>
+        <View style = { [ styles.recordsError, { height: clientHeight - CONTENT_HEIGHT_OFFSET } ] as ViewStyle[] }>
             <Text style = { styles.recordsErrorText }>
                 {t('dialog.searchResultsError')}
             </Text>
@@ -143,8 +144,8 @@ const SalesforceLinkDialog = () => {
             <SafeAreaView>
                 <ScrollView
                     bounces = { false }
-                    style = { [ styles.recordList, { height: clientHeight - LIST_HEIGHT_OFFSET } ] }>
-                    {records.map(item => (
+                    style = { [ styles.recordList, { height: clientHeight - LIST_HEIGHT_OFFSET } ] as ViewStyle[] }>
+                    {records.map((item: any) => (
                         <RecordItem
                             key = { `record-${item.id}` }
                             /* eslint-disable-next-line react/jsx-no-bind */
@@ -164,7 +165,7 @@ const SalesforceLinkDialog = () => {
             </View>
             {
                 selectedRecord
-                && <View style = { styles.footer }>
+                && <View>
                     <Button
                         labelKey = 'dialog.Cancel'
                         /* eslint-disable-next-line react/jsx-no-bind */