From 0f38f7b2e4a23d5958dbc301fec737f9e482ace3 Mon Sep 17 00:00:00 2001
From: mkhutornyi <mkhutorniy@gmail.com>
Date: Mon, 5 Jun 2023 16:39:33 -0600
Subject: [PATCH 1/5] Transform BigNumberPad component to functional one

---
 src/components/BigNumberPad.js | 113 +++++++++++++++------------------
 1 file changed, 50 insertions(+), 63 deletions(-)

diff --git a/src/components/BigNumberPad.js b/src/components/BigNumberPad.js
index 999b5dbd55d..054760ce0af 100644
--- a/src/components/BigNumberPad.js
+++ b/src/components/BigNumberPad.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useState, useCallback} from 'react';
 import {View} from 'react-native';
 import _ from 'underscore';
 import PropTypes from 'prop-types';
@@ -32,72 +32,59 @@ const padNumbers = [
     ['.', '0', '<'],
 ];
 
-class BigNumberPad extends React.PureComponent {
-    constructor(props) {
-        super(props);
+const BigNumberPad = ({
+    numberPressed,
+    longPressHandlerStateChanged,
+    nativeID,
+    toLocaleDigit,
+}) => {
+    const [timer, setTimer] = useState(null);
 
-        this.state = {
-            timer: null,
-        };
-    }
+    const handleLongPress = useCallback((key) => {
+        if (key !== '<') return;
 
-    /**
-     * Handle long press key on number pad.
-     * Only handles the '<' key and starts the continuous input timer.
-     *
-     * @param {String} key
-     */
-    handleLongPress(key) {
-        // Only handles deleting.
-        if (key !== '<') {
-            return;
-        }
-        this.props.longPressHandlerStateChanged(true);
-        const timer = setInterval(() => {
-            this.props.numberPressed(key);
+        longPressHandlerStateChanged(true);
+        const newTimer = setInterval(() => {
+            numberPressed(key);
         }, 100);
-        this.setState({timer});
-    }
+        setTimer(newTimer);
+    }, [longPressHandlerStateChanged, numberPressed]);
 
-    render() {
-        return (
-            <View
-                style={[styles.flexColumn, styles.w100]}
-                nativeID={this.props.nativeID}
-            >
-                {_.map(padNumbers, (row, rowIndex) => (
-                    <View
-                        key={`NumberPadRow-${rowIndex}`}
-                        style={[styles.flexRow, styles.mt3]}
-                    >
-                        {_.map(row, (column, columnIndex) => {
-                            // Adding margin between buttons except first column to
-                            // avoid unccessary space before the first column.
-                            const marginLeft = columnIndex > 0 ? styles.ml3 : {};
-                            return (
-                                <Button
-                                    key={column}
-                                    shouldEnableHapticFeedback
-                                    style={[styles.flex1, marginLeft]}
-                                    text={column === '<' ? column : this.props.toLocaleDigit(column)}
-                                    onLongPress={() => this.handleLongPress(column)}
-                                    onPress={() => this.props.numberPressed(column)}
-                                    onPressIn={ControlSelection.block}
-                                    onPressOut={() => {
-                                        clearInterval(this.state.timer);
-                                        ControlSelection.unblock();
-                                        this.props.longPressHandlerStateChanged(false);
-                                    }}
-                                    onMouseDown={(e) => e.preventDefault()}
-                                />
-                            );
-                        })}
-                    </View>
-                ))}
-            </View>
-        );
-    }
-}
+    return (
+        <View
+            style={[styles.flexColumn, styles.w100]}
+            nativeID={nativeID}
+        >
+            {_.map(padNumbers, (row, rowIndex) => (
+                <View
+                    key={`NumberPadRow-${rowIndex}`}
+                    style={[styles.flexRow, styles.mt3]}
+                >
+                    {_.map(row, (column, columnIndex) => {
+                        const marginLeft = columnIndex > 0 ? styles.ml3 : {};
+                        return (
+                            <Button
+                                key={column}
+                                shouldEnableHapticFeedback
+                                style={[styles.flex1, marginLeft]}
+                                text={column === '<' ? column : toLocaleDigit(column)}
+                                onLongPress={() => handleLongPress(column)}
+                                onPress={() => numberPressed(column)}
+                                onPressIn={ControlSelection.block}
+                                onPressOut={() => {
+                                    clearInterval(timer);
+                                    ControlSelection.unblock();
+                                    longPressHandlerStateChanged(false);
+                                }}
+                                onMouseDown={(e) => e.preventDefault()}
+                            />
+                        );
+                    })}
+                </View>
+            ))}
+        </View>
+    );
+};
 
 BigNumberPad.propTypes = propTypes;
 BigNumberPad.defaultProps = defaultProps;

From 0146d599f0b3c9ef9f542c52c7a5bffcfa89a17a Mon Sep 17 00:00:00 2001
From: mkhutornyi <mkhutorniy@gmail.com>
Date: Mon, 5 Jun 2023 16:45:11 -0600
Subject: [PATCH 2/5] Revert removed comments

---
 src/components/BigNumberPad.js | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/components/BigNumberPad.js b/src/components/BigNumberPad.js
index 054760ce0af..a720c28d764 100644
--- a/src/components/BigNumberPad.js
+++ b/src/components/BigNumberPad.js
@@ -40,6 +40,12 @@ const BigNumberPad = ({
 }) => {
     const [timer, setTimer] = useState(null);
 
+    /**
+     * Handle long press key on number pad.
+     * Only handles the '<' key and starts the continuous input timer.
+     *
+     * @param {String} key
+     */
     const handleLongPress = useCallback((key) => {
         if (key !== '<') return;
 
@@ -61,6 +67,8 @@ const BigNumberPad = ({
                     style={[styles.flexRow, styles.mt3]}
                 >
                     {_.map(row, (column, columnIndex) => {
+                        // Adding margin between buttons except first column to
+                        // avoid unccessary space before the first column.
                         const marginLeft = columnIndex > 0 ? styles.ml3 : {};
                         return (
                             <Button

From 53f5cf00a1ff5af4c5ca629cdbe06dce1d5d9549 Mon Sep 17 00:00:00 2001
From: mkhutornyi <mkhutorniy@gmail.com>
Date: Mon, 5 Jun 2023 17:49:24 -0600
Subject: [PATCH 3/5] Fix lint, prettier issues

---
 src/components/BigNumberPad.js | 27 +++++++++++++--------------
 1 file changed, 13 insertions(+), 14 deletions(-)

diff --git a/src/components/BigNumberPad.js b/src/components/BigNumberPad.js
index a720c28d764..9ac38ade2ec 100644
--- a/src/components/BigNumberPad.js
+++ b/src/components/BigNumberPad.js
@@ -32,12 +32,7 @@ const padNumbers = [
     ['.', '0', '<'],
 ];
 
-const BigNumberPad = ({
-    numberPressed,
-    longPressHandlerStateChanged,
-    nativeID,
-    toLocaleDigit,
-}) => {
+const BigNumberPad = ({numberPressed, longPressHandlerStateChanged, nativeID, toLocaleDigit}) => {
     const [timer, setTimer] = useState(null);
 
     /**
@@ -46,15 +41,18 @@ const BigNumberPad = ({
      *
      * @param {String} key
      */
-    const handleLongPress = useCallback((key) => {
-        if (key !== '<') return;
+    const handleLongPress = useCallback(
+        (key) => {
+            if (key !== '<') return;
 
-        longPressHandlerStateChanged(true);
-        const newTimer = setInterval(() => {
-            numberPressed(key);
-        }, 100);
-        setTimer(newTimer);
-    }, [longPressHandlerStateChanged, numberPressed]);
+            longPressHandlerStateChanged(true);
+            const newTimer = setInterval(() => {
+                numberPressed(key);
+            }, 100);
+            setTimer(newTimer);
+        },
+        [longPressHandlerStateChanged, numberPressed],
+    );
 
     return (
         <View
@@ -96,5 +94,6 @@ const BigNumberPad = ({
 
 BigNumberPad.propTypes = propTypes;
 BigNumberPad.defaultProps = defaultProps;
+BigNumberPad.displayName = 'BigNumberPad';
 
 export default withLocalize(BigNumberPad);

From a49e09f9383692267abf77b70c4229c2890061e4 Mon Sep 17 00:00:00 2001
From: mkhutornyi <mkhutorniy@gmail.com>
Date: Tue, 6 Jun 2023 15:05:06 -0600
Subject: [PATCH 4/5] Fix code style issues

---
 src/components/BigNumberPad.js | 34 +++++++++++++++++-----------------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/src/components/BigNumberPad.js b/src/components/BigNumberPad.js
index 9ac38ade2ec..05e038b2b71 100644
--- a/src/components/BigNumberPad.js
+++ b/src/components/BigNumberPad.js
@@ -1,4 +1,4 @@
-import React, {useState, useCallback} from 'react';
+import React, {useState} from 'react';
 import {View} from 'react-native';
 import _ from 'underscore';
 import PropTypes from 'prop-types';
@@ -32,7 +32,7 @@ const padNumbers = [
     ['.', '0', '<'],
 ];
 
-const BigNumberPad = ({numberPressed, longPressHandlerStateChanged, nativeID, toLocaleDigit}) => {
+function BigNumberPad (props) {
     const [timer, setTimer] = useState(null);
 
     /**
@@ -41,23 +41,23 @@ const BigNumberPad = ({numberPressed, longPressHandlerStateChanged, nativeID, to
      *
      * @param {String} key
      */
-    const handleLongPress = useCallback(
-        (key) => {
-            if (key !== '<') return;
+    const handleLongPress = (key) => {
+        if (key !== '<') {
+            return;
+        }
 
-            longPressHandlerStateChanged(true);
-            const newTimer = setInterval(() => {
-                numberPressed(key);
-            }, 100);
-            setTimer(newTimer);
-        },
-        [longPressHandlerStateChanged, numberPressed],
-    );
+        props.longPressHandlerStateChanged(true);
+
+        const newTimer = setInterval(() => {
+            props.numberPressed(key);
+        }, 100);
+        setTimer(newTimer);
+    };
 
     return (
         <View
             style={[styles.flexColumn, styles.w100]}
-            nativeID={nativeID}
+            nativeID={props.nativeID}
         >
             {_.map(padNumbers, (row, rowIndex) => (
                 <View
@@ -73,14 +73,14 @@ const BigNumberPad = ({numberPressed, longPressHandlerStateChanged, nativeID, to
                                 key={column}
                                 shouldEnableHapticFeedback
                                 style={[styles.flex1, marginLeft]}
-                                text={column === '<' ? column : toLocaleDigit(column)}
+                                text={column === '<' ? column : props.toLocaleDigit(column)}
                                 onLongPress={() => handleLongPress(column)}
-                                onPress={() => numberPressed(column)}
+                                onPress={() => props.numberPressed(column)}
                                 onPressIn={ControlSelection.block}
                                 onPressOut={() => {
                                     clearInterval(timer);
                                     ControlSelection.unblock();
-                                    longPressHandlerStateChanged(false);
+                                    props.longPressHandlerStateChanged(false);
                                 }}
                                 onMouseDown={(e) => e.preventDefault()}
                             />

From 2e0259755dedb48306a9c50dafd10fa2e9a5adb2 Mon Sep 17 00:00:00 2001
From: mkhutornyi <mkhutorniy@gmail.com>
Date: Tue, 6 Jun 2023 23:06:48 -0600
Subject: [PATCH 5/5] Fix prettier issue

---
 src/components/BigNumberPad.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/BigNumberPad.js b/src/components/BigNumberPad.js
index 05e038b2b71..06dbc1aa34a 100644
--- a/src/components/BigNumberPad.js
+++ b/src/components/BigNumberPad.js
@@ -32,7 +32,7 @@ const padNumbers = [
     ['.', '0', '<'],
 ];
 
-function BigNumberPad (props) {
+function BigNumberPad(props) {
     const [timer, setTimer] = useState(null);
 
     /**
@@ -90,7 +90,7 @@ function BigNumberPad (props) {
             ))}
         </View>
     );
-};
+}
 
 BigNumberPad.propTypes = propTypes;
 BigNumberPad.defaultProps = defaultProps;