rename text input function & change performance types

software-mansion-labs · May 28, 2024 · 238abd6 · 238abd6
1 parent 48de655
commit 238abd6
Show file tree

Hide file tree

Showing 8 changed files with 41 additions and 31 deletions.
diff --git a/.github/actions/javascript/getGraphiteString/getGraphiteString.ts b/.github/actions/javascript/getGraphiteString/getGraphiteString.ts
@@ -1,6 +1,15 @@
 import * as core from '@actions/core';
 import fs from 'fs';
 
+type RegressionEntryProps = {
+    metadata?: {
+        creationDate: string;
+    };
+    name: string;
+    meanDuration: number;
+    meanCount: number;
+};
+
 const run = () => {
     // Prefix path to the graphite metric
     const GRAPHITE_PATH = 'reassure';
@@ -24,15 +33,15 @@ const run = () => {
         }
 
         try {
-            const current = JSON.parse(entry);
+            const current: RegressionEntryProps = JSON.parse(entry);
 
             // Extract timestamp, Graphite accepts timestamp in seconds
             if (current.metadata?.creationDate) {
-                timestamp = Math.floor(new Date(current.metadata.creationDate as string).getTime() / 1000);
+                timestamp = Math.floor(new Date(current.metadata.creationDate).getTime() / 1000);
             }
 
             if (current.name && current.meanDuration && current.meanCount && timestamp) {
-                const formattedName = (current.name as string).split(' ').join('-');
+                const formattedName = current.name.split(' ').join('-');
 
                 const renderDurationString = `${GRAPHITE_PATH}.${formattedName}.renderDuration ${current.meanDuration} ${timestamp}`;
                 const renderCountString = `${GRAPHITE_PATH}.${formattedName}.renderCount ${current.meanCount} ${timestamp}`;

diff --git a/src/components/AmountForm.tsx b/src/components/AmountForm.tsx
@@ -12,7 +12,7 @@ import * as MoneyRequestUtils from '@libs/MoneyRequestUtils';
 import CONST from '@src/CONST';
 import BigNumberPad from './BigNumberPad';
 import FormHelpMessage from './FormHelpMessage';
-import isAnimatedTextInputRef from './TextInput/BaseTextInput/isAnimatedTextInoutRef';
+import isAnimatedTextInputFocused from './TextInput/BaseTextInput/isAnimatedTextInputFocused';
 import type {BaseTextInputProps, BaseTextInputRef} from './TextInput/BaseTextInput/types';
 import TextInputWithCurrencySymbol from './TextInputWithCurrencySymbol';
 import type TextInputWithCurrencySymbolProps from './TextInputWithCurrencySymbol/types';
@@ -95,7 +95,7 @@ function AmountForm(
         if (!textInput.current) {
             return;
         }
-        if (!isAnimatedTextInputRef(textInput)) {
+        if (!isAnimatedTextInputFocused(textInput)) {
             textInput.current.focus();
         }
     };
@@ -144,7 +144,7 @@ function AmountForm(
      */
     const updateAmountNumberPad = useCallback(
         (key: string) => {
-            if (shouldUpdateSelection && !isAnimatedTextInputRef(textInput)) {
+            if (shouldUpdateSelection && !isAnimatedTextInputFocused(textInput)) {
                 textInput.current?.focus();
             }
             // Backspace button is pressed
@@ -169,7 +169,7 @@ function AmountForm(
      */
     const updateLongPressHandlerState = useCallback((value: boolean) => {
         setShouldUpdateSelection(!value);
-        if (!value && !isAnimatedTextInputRef(textInput)) {
+        if (!value && !isAnimatedTextInputFocused(textInput)) {
             textInput.current?.focus();
         }
     }, []);

diff --git a/src/components/EmojiPicker/EmojiPickerMenu/index.tsx b/src/components/EmojiPicker/EmojiPickerMenu/index.tsx
@@ -7,7 +7,7 @@ import {scrollTo} from 'react-native-reanimated';
 import EmojiPickerMenuItem from '@components/EmojiPicker/EmojiPickerMenuItem';
 import Text from '@components/Text';
 import TextInput from '@components/TextInput';
-import isAnimatedTextInputRef from '@components/TextInput/BaseTextInput/isAnimatedTextInoutRef';
+import isAnimatedTextInputFocused from '@components/TextInput/BaseTextInput/isAnimatedTextInputFocused';
 import type {BaseTextInputRef} from '@components/TextInput/BaseTextInput/types';
 import useArrowKeyFocusManager from '@hooks/useArrowKeyFocusManager';
 import useLocalize from '@hooks/useLocalize';
@@ -85,7 +85,7 @@ function EmojiPickerMenu({onEmojiSelected, activeEmoji}: EmojiPickerMenuProps, r
             }
 
             // If the input is not focused and the new index is out of range, focus the input
-            if (newIndex < 0 && !isAnimatedTextInputRef(searchInputRef) && shouldFocusInputOnScreenFocus) {
+            if (newIndex < 0 && !isAnimatedTextInputFocused(searchInputRef) && shouldFocusInputOnScreenFocus) {
                 searchInputRef.current?.focus();
             }
         },
@@ -164,12 +164,12 @@ function EmojiPickerMenu({onEmojiSelected, activeEmoji}: EmojiPickerMenuProps, r
             // Enable keyboard movement if tab or enter is pressed or if shift is pressed while the input
             // is not focused, so that the navigation and tab cycling can be done using the keyboard without
             // interfering with the input behaviour.
-            if (keyBoardEvent.key === 'Tab' || keyBoardEvent.key === 'Enter' || (keyBoardEvent.key === 'Shift' && searchInputRef.current && !isAnimatedTextInputRef(searchInputRef))) {
+            if (keyBoardEvent.key === 'Tab' || keyBoardEvent.key === 'Enter' || (keyBoardEvent.key === 'Shift' && searchInputRef.current && !isAnimatedTextInputFocused(searchInputRef))) {
                 setIsUsingKeyboardMovement(true);
             }
 
             // We allow typing in the search box if any key is pressed apart from Arrow keys.
-            if (searchInputRef.current && !isAnimatedTextInputRef(searchInputRef) && ReportUtils.shouldAutoFocusOnKeyPress(keyBoardEvent)) {
+            if (searchInputRef.current && !isAnimatedTextInputFocused(searchInputRef) && ReportUtils.shouldAutoFocusOnKeyPress(keyBoardEvent)) {
                 searchInputRef.current.focus();
             }
         },

diff --git a/src/components/MoneyRequestAmountInput.tsx b/src/components/MoneyRequestAmountInput.tsx
@@ -7,7 +7,7 @@ import * as CurrencyUtils from '@libs/CurrencyUtils';
 import getOperatingSystem from '@libs/getOperatingSystem';
 import * as MoneyRequestUtils from '@libs/MoneyRequestUtils';
 import CONST from '@src/CONST';
-import isAnimatedTextInputRef from './TextInput/BaseTextInput/isAnimatedTextInoutRef';
+import isAnimatedTextInputFocused from './TextInput/BaseTextInput/isAnimatedTextInputFocused';
 import type {BaseTextInputRef} from './TextInput/BaseTextInput/types';
 import TextInputWithCurrencySymbol from './TextInputWithCurrencySymbol';
 
@@ -180,7 +180,7 @@ function MoneyRequestAmountInput(
     }));
 
     useEffect(() => {
-        if (!currency || typeof amount !== 'number' || (formatAmountOnBlur && isAnimatedTextInputRef(textInput))) {
+        if (!currency || typeof amount !== 'number' || (formatAmountOnBlur && isAnimatedTextInputFocused(textInput))) {
             return;
         }
         const frontendAmount = formatAmountOnBlur ? CurrencyUtils.convertToDisplayStringWithoutCurrency(amount, currency) : CurrencyUtils.convertToFrontendAmount(amount).toString();

diff --git a/...t/BaseTextInput/isAnimatedTextInoutRef.ts → ...seTextInput/isAnimatedTextInputFocused.ts b/...t/BaseTextInput/isAnimatedTextInoutRef.ts → ...seTextInput/isAnimatedTextInputFocused.ts
@@ -1,6 +1,6 @@
 import type {AnimatedTextInputRef} from '@components/RNTextInput';
 import type {BaseTextInputRef} from './types';
 
-export default function isAnimatedTextInputRef(textInput: React.MutableRefObject<BaseTextInputRef | null>): boolean | null {
+export default function isAnimatedTextInputFocused(textInput: React.MutableRefObject<BaseTextInputRef | null>): boolean | null {
     return textInput.current && 'isFocused' in textInput.current && (textInput.current as AnimatedTextInputRef).isFocused();
 }
diff --git a/src/libs/Performance.tsx b/src/libs/Performance.tsx
@@ -3,7 +3,7 @@ import isObject from 'lodash/isObject';
 import lodashTransform from 'lodash/transform';
 import React, {forwardRef, Profiler} from 'react';
 import {Alert, InteractionManager} from 'react-native';
-import type {PerformanceEntry, PerformanceMark, PerformanceMeasure, Performance as RNPerformance} from 'react-native-performance';
+import type {PerformanceEntry, PerformanceMark, PerformanceMeasure, Performance as RNPerformance, PerformanceObserver as RNPerformanceObserver} from 'react-native-performance';
 import type {PerformanceObserverEntryList} from 'react-native-performance/lib/typescript/performance-observer';
 import CONST from '@src/CONST';
 import isE2ETestSession from './E2E/isE2ETestSession';
@@ -46,7 +46,11 @@ type PerformanceModule = {
     subscribeToMeasurements: SubscribeToMeasurements;
 };
 
-type PerformanceObserverCallback = (entries: PerformanceObserverEntryList, observer: PerformanceObserver) => void;
+type ReactNativePerformance = {
+    default: RNPerformance;
+    setResourceLoggingEnabled: (enabled?: boolean) => void;
+    PerformanceObserver: typeof RNPerformanceObserver;
+};
 
 let rnPerformance: RNPerformance;
 
@@ -88,12 +92,9 @@ const Performance: PerformanceModule = {
 };
 
 if (Metrics.canCapturePerformanceMetrics()) {
-    const perfModule = require('react-native-performance');
-    const {default: performance, setResourceLoggingEnabled, PerformanceObserver} = perfModule;
-    const perfObserver: new (callback: PerformanceObserverCallback) => PerformanceObserver = PerformanceObserver;
-
-    (setResourceLoggingEnabled as (enabled?: boolean) => void)(true);
-    rnPerformance = performance;
+    const perfModule: ReactNativePerformance = require('react-native-performance');
+    perfModule.setResourceLoggingEnabled(true);
+    rnPerformance = perfModule.default;
 
     Performance.measureFailSafe = (measureName: string, startOrMeasureOptions: string, endMark?: string) => {
         try {
@@ -128,7 +129,7 @@ if (Metrics.canCapturePerformanceMetrics()) {
      */
     Performance.setupPerformanceObserver = () => {
         // Monitor some native marks that we want to put on the timeline
-        new perfObserver((list: PerformanceObserverEntryList, observer: PerformanceObserver) => {
+        new perfModule.PerformanceObserver((list: PerformanceObserverEntryList, observer: PerformanceObserver) => {
             list.getEntries().forEach((entry: PerformanceEntry) => {
                 if (entry.name === 'nativeLaunchEnd') {
                     Performance.measureFailSafe('nativeLaunch', 'nativeLaunchStart', 'nativeLaunchEnd');
@@ -155,7 +156,7 @@ if (Metrics.canCapturePerformanceMetrics()) {
         }).observe({type: 'react-native-mark', buffered: true});
 
         // Monitor for "_end" marks and capture "_start" to "_end" measures
-        new perfObserver((list: PerformanceObserverEntryList) => {
+        new perfModule.PerformanceObserver((list: PerformanceObserverEntryList) => {
             list.getEntriesByType('mark').forEach((mark: PerformanceEntry) => {
                 if (mark.name.endsWith('_end')) {
                     const end = mark.name;
@@ -200,7 +201,7 @@ if (Metrics.canCapturePerformanceMetrics()) {
     };
 
     Performance.subscribeToMeasurements = (callback: PerformanceEntriesCallback) => {
-        new perfObserver((list: PerformanceObserverEntryList) => {
+        new perfModule.PerformanceObserver((list: PerformanceObserverEntryList) => {
             list.getEntriesByType('measure').forEach(callback);
         }).observe({type: 'measure', buffered: true});
     };

diff --git a/src/pages/iou/MoneyRequestAmountForm.tsx b/src/pages/iou/MoneyRequestAmountForm.tsx
@@ -10,7 +10,7 @@ import MoneyRequestAmountInput from '@components/MoneyRequestAmountInput';
 import type {MoneyRequestAmountInputRef} from '@components/MoneyRequestAmountInput';
 import ScrollView from '@components/ScrollView';
 import SettlementButton from '@components/SettlementButton';
-import isAnimatedTextInputRef from '@components/TextInput/BaseTextInput/isAnimatedTextInoutRef';
+import isAnimatedTextInputFocused from '@components/TextInput/BaseTextInput/isAnimatedTextInputFocused';
 import useLocalize from '@hooks/useLocalize';
 import usePrevious from '@hooks/usePrevious';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -128,7 +128,7 @@ function MoneyRequestAmountForm(
             return;
         }
 
-        if (!isAnimatedTextInputRef(textInput)) {
+        if (!isAnimatedTextInputFocused(textInput)) {
             textInput.current.focus();
         }
     };
@@ -169,7 +169,7 @@ function MoneyRequestAmountForm(
      */
     const updateAmountNumberPad = useCallback(
         (key: string) => {
-            if (shouldUpdateSelection && !isAnimatedTextInputRef(textInput)) {
+            if (shouldUpdateSelection && !isAnimatedTextInputFocused(textInput)) {
                 textInput.current?.focus();
             }
             const currentAmount = moneyRequestAmountInput.current?.getAmount() ?? '';
@@ -196,7 +196,7 @@ function MoneyRequestAmountForm(
      */
     const updateLongPressHandlerState = useCallback((value: boolean) => {
         setShouldUpdateSelection(!value);
-        if (!value && !isAnimatedTextInputRef(textInput)) {
+        if (!value && !isAnimatedTextInputFocused(textInput)) {
             textInput.current?.focus();
         }
     }, []);

diff --git a/src/pages/signin/LoginForm/BaseLoginForm.tsx b/src/pages/signin/LoginForm/BaseLoginForm.tsx
@@ -11,7 +11,7 @@ import AppleSignIn from '@components/SignInButtons/AppleSignIn';
 import GoogleSignIn from '@components/SignInButtons/GoogleSignIn';
 import Text from '@components/Text';
 import TextInput from '@components/TextInput';
-import isAnimatedTextInputRef from '@components/TextInput/BaseTextInput/isAnimatedTextInoutRef';
+import isAnimatedTextInputFocused from '@components/TextInput/BaseTextInput/isAnimatedTextInputFocused';
 import type {BaseTextInputRef} from '@components/TextInput/BaseTextInput/types';
 import withToggleVisibilityView from '@components/withToggleVisibilityView';
 import type {WithToggleVisibilityViewProps} from '@components/withToggleVisibilityView';
@@ -201,7 +201,7 @@ function BaseLoginForm({account, credentials, closeAccount, blurOnSubmit = false
             if (!input.current) {
                 return false;
             }
-            return !!isAnimatedTextInputRef(input);
+            return !!isAnimatedTextInputFocused(input);
         },
         clearDataAndFocus(clearLogin = true) {
             if (!input.current) {