diff --git a/src/components/FocusModeNotification.js b/src/components/FocusModeNotification.tsx similarity index 98% rename from src/components/FocusModeNotification.js rename to src/components/FocusModeNotification.tsx index 9ec16beead15..7b3f567d256b 100644 --- a/src/components/FocusModeNotification.js +++ b/src/components/FocusModeNotification.tsx @@ -28,7 +28,6 @@ function FocusModeNotification() { {translate('focusModeUpdateModal.prompt')} { User.clearFocusModeNotification(); diff --git a/src/components/SAMLLoadingIndicator.js b/src/components/SAMLLoadingIndicator.tsx similarity index 79% rename from src/components/SAMLLoadingIndicator.js rename to src/components/SAMLLoadingIndicator.tsx index 84f9098e564f..2be7b76e6cae 100644 --- a/src/components/SAMLLoadingIndicator.js +++ b/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() { /> {translate('samlSignIn.launching')} - - {translate('samlSignIn.oneMoment')} + + + {translate('samlSignIn.oneMoment')} + diff --git a/src/components/ShowMoreButton/index.js b/src/components/ShowMoreButton.tsx similarity index 74% rename from src/components/ShowMoreButton/index.js rename to src/components/ShowMoreButton.tsx index 28c33d185cff..3411066a5376 100644 --- a/src/components/ShowMoreButton/index.js +++ b/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; /** 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 ( @@ -67,7 +59,5 @@ function ShowMoreButton({containerStyle, currentCount, totalCount, onPress}) { } ShowMoreButton.displayName = 'ShowMoreButton'; -ShowMoreButton.propTypes = propTypes; -ShowMoreButton.defaultProps = defaultProps; export default ShowMoreButton; diff --git a/src/components/TaxPicker/index.js b/src/components/TaxPicker.tsx similarity index 68% rename from src/components/TaxPicker/index.js rename to src/components/TaxPicker.tsx index be15cd546b36..664aa741c400 100644 --- a/src/components/TaxPicker/index.js +++ b/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 (