diff --git a/src/components/BigNumberPad.js b/src/components/BigNumberPad.tsx similarity index 64% rename from src/components/BigNumberPad.js rename to src/components/BigNumberPad.tsx index df3ac8fd41fb..812e9e78635b 100644 --- a/src/components/BigNumberPad.js +++ b/src/components/BigNumberPad.tsx @@ -1,29 +1,20 @@ -import PropTypes from 'prop-types'; import React, {useState} from 'react'; import {View} from 'react-native'; -import _ from 'underscore'; +import useLocalize from '@hooks/useLocalize'; import useWindowDimensions from '@hooks/useWindowDimensions'; import ControlSelection from '@libs/ControlSelection'; import useThemeStyles from '@styles/useThemeStyles'; import Button from './Button'; -import withLocalize, {withLocalizePropTypes} from './withLocalize'; -const propTypes = { +type BigNumberPadProps = { /** Callback to inform parent modal with key pressed */ - numberPressed: PropTypes.func.isRequired, + numberPressed: (key: string) => void; /** Callback to inform parent modal whether user is long pressing the "<" (backspace) button */ - longPressHandlerStateChanged: PropTypes.func, + longPressHandlerStateChanged?: (isUserLongPressingBackspace: boolean) => void; /** Used to locate this view from native classes. */ - id: PropTypes.string, - - ...withLocalizePropTypes, -}; - -const defaultProps = { - longPressHandlerStateChanged: () => {}, - id: 'numPadView', + id?: string; }; const padNumbers = [ @@ -31,62 +22,69 @@ const padNumbers = [ ['4', '5', '6'], ['7', '8', '9'], ['.', '0', '<'], -]; +] as const; + +function BigNumberPad({numberPressed, longPressHandlerStateChanged = () => {}, id = 'numPadView'}: BigNumberPadProps) { + const {toLocaleDigit} = useLocalize(); -function BigNumberPad(props) { const styles = useThemeStyles(); - const [timer, setTimer] = useState(null); + const [timer, setTimer] = useState(null); const {isExtraSmallScreenHeight} = useWindowDimensions(); /** * Handle long press key on number pad. * Only handles the '<' key and starts the continuous input timer. - * - * @param {String} key */ - const handleLongPress = (key) => { + const handleLongPress = (key: string) => { if (key !== '<') { return; } - props.longPressHandlerStateChanged(true); + longPressHandlerStateChanged(true); const newTimer = setInterval(() => { - props.numberPressed(key); + numberPressed(key); }, 100); + setTimer(newTimer); }; return ( - {_.map(padNumbers, (row, rowIndex) => ( + {padNumbers.map((row) => ( - {_.map(row, (column, columnIndex) => { + {row.map((column, columnIndex) => { // Adding margin between buttons except first column to // avoid unccessary space before the first column. const marginLeft = columnIndex > 0 ? styles.ml3 : {}; + return (