Merge pull request #36764 from rayane-djouah/Migrate-Components-Group…

…-1-to-TypeScript

[TS migration] Migrate '[Components Group 1]' component to TypeScript

src/components/FocusModeNotification.js → src/components/FocusModeNotification.tsx

@@ -28,7 +28,6 @@ function FocusModeNotification() {
                 <Text>
                     {translate('focusModeUpdateModal.prompt')}
                     <TextLinkWithRef
-                        href={href}
                         style={styles.link}
                         onPress={() => {
                             User.clearFocusModeNotification();

src/components/SAMLLoadingIndicator.js → src/components/SAMLLoadingIndicator.tsx

@@ -3,6 +3,7 @@ import {StyleSheet, View} from 'react-native';
 import useLocalize from '@hooks/useLocalize';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
+import variables from '@styles/variables';
 import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
 import * as Illustrations from './Icon/Illustrations';
@@ -23,8 +24,13 @@ function SAMLLoadingIndicator() {
                     />
                 </View>
                 <Text style={[styles.textHeadline, styles.textXXLarge, styles.textAlignCenter]}>{translate('samlSignIn.launching')}</Text>
-                <View style={[styles.mt2, styles.mh2, styles.fontSizeNormal, styles.textAlignCenter]}>
-                    <Text style={[styles.textAlignCenter]}>{translate('samlSignIn.oneMoment')}</Text>
+                <View style={[styles.mt2, styles.mh2, styles.textAlignCenter]}>
+                    <Text
+                        style={[styles.textAlignCenter]}
+                        fontSize={variables.fontSizeNormal}
+                    >
+                        {translate('samlSignIn.oneMoment')}
+                    </Text>
                 </View>
             </View>
             <View style={styles.deeplinkWrapperFooter}>

src/components/ShowMoreButton/index.js → src/components/ShowMoreButton.tsx

@@ -1,42 +1,34 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import {View} from 'react-native';
-import _ from 'underscore';
-import Button from '@components/Button';
-import * as Expensicons from '@components/Icon/Expensicons';
-import Text from '@components/Text';
+import type {StyleProp, ViewStyle} from 'react-native';
 import useLocalize from '@hooks/useLocalize';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as NumberFormatUtils from '@libs/NumberFormatUtils';
-import stylePropTypes from '@styles/stylePropTypes';
+import Button from './Button';
+import * as Expensicons from './Icon/Expensicons';
+import Text from './Text';
 
-const propTypes = {
+type ShowMoreButtonProps = {
     /** Additional styles for container */
-    containerStyle: stylePropTypes,
+    containerStyle?: StyleProp<ViewStyle>;
 
     /** The number of currently shown items */
-    currentCount: PropTypes.number,
+    currentCount?: number;
 
     /** The total number of items that could be shown */
-    totalCount: PropTypes.number,
+    totalCount?: number;
 
     /** A handler that fires when button has been pressed */
-    onPress: PropTypes.func.isRequired,
+    onPress: () => void;
 };
 
-const defaultProps = {
-    containerStyle: {},
-    currentCount: undefined,
-    totalCount: undefined,
-};
-
-function ShowMoreButton({containerStyle, currentCount, totalCount, onPress}) {
+function ShowMoreButton({containerStyle, currentCount, totalCount, onPress}: ShowMoreButtonProps) {
     const {translate, preferredLocale} = useLocalize();
     const theme = useTheme();
     const styles = useThemeStyles();
 
-    const shouldShowCounter = _.isNumber(currentCount) && _.isNumber(totalCount);
+    const shouldShowCounter = !!(currentCount && totalCount);
 
     return (
         <View style={[styles.alignItemsCenter, containerStyle]}>
@@ -67,7 +59,5 @@ function ShowMoreButton({containerStyle, currentCount, totalCount, onPress}) {
 }
 
 ShowMoreButton.displayName = 'ShowMoreButton';
-ShowMoreButton.propTypes = propTypes;
-ShowMoreButton.defaultProps = defaultProps;
 
 export default ShowMoreButton;

src/components/TaxPicker/index.js → src/components/TaxPicker.tsx

@@ -1,16 +1,32 @@
-import lodashGet from 'lodash/get';
 import React, {useMemo, useState} from 'react';
-import _ from 'underscore';
-import OptionsSelector from '@components/OptionsSelector';
+import type {EdgeInsets} from 'react-native-safe-area-context';
 import useLocalize from '@hooks/useLocalize';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
 import * as TransactionUtils from '@libs/TransactionUtils';
 import CONST from '@src/CONST';
-import {defaultProps, propTypes} from './taxPickerPropTypes';
+import type {TaxRatesWithDefault} from '@src/types/onyx';
+import OptionsSelector from './OptionsSelector';
 
-function TaxPicker({selectedTaxRate, taxRates, insets, onSubmit}) {
+type TaxPickerProps = {
+    /** Collection of tax rates attached to a policy */
+    taxRates: TaxRatesWithDefault;
+
+    /** The selected tax rate of an expense */
+    selectedTaxRate?: string;
+
+    /**
+     * Safe area insets required for reflecting the portion of the view,
+     * that is not covered by navigation bars, tab bars, toolbars, and other ancestor views.
+     */
+    insets?: EdgeInsets;
+
+    /** Callback to fire when a tax is pressed */
+    onSubmit: () => void;
+};
+
+function TaxPicker({selectedTaxRate = '', taxRates, insets, onSubmit}: TaxPickerProps) {
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
     const {translate} = useLocalize();
@@ -40,10 +56,11 @@ function TaxPicker({selectedTaxRate, taxRates, insets, onSubmit}) {
         return taxRatesOptions;
     }, [taxRates, searchValue, selectedOptions]);
 
-    const selectedOptionKey = lodashGet(_.filter(lodashGet(sections, '[0].data', []), (taxRate) => taxRate.searchText === selectedTaxRate)[0], 'keyForList');
+    const selectedOptionKey = sections?.[0]?.data?.find((taxRate) => taxRate.searchText === selectedTaxRate)?.keyForList;
 
     return (
         <OptionsSelector
+            // @ts-expect-error TODO: Remove this once OptionsSelector (https://github.com/Expensify/App/issues/25125) is migrated to TypeScript.
             contentContainerStyles={[{paddingBottom: StyleUtils.getSafeAreaMargins(insets).marginBottom}]}
             optionHoveredStyle={styles.hoveredComponentBG}
             sectionHeaderStyle={styles.mt5}
@@ -65,7 +82,5 @@ function TaxPicker({selectedTaxRate, taxRates, insets, onSubmit}) {
 }
 
 TaxPicker.displayName = 'TaxPicker';
-TaxPicker.propTypes = propTypes;
-TaxPicker.defaultProps = defaultProps;
 
 export default TaxPicker;