From 4678f93133a849c7c8417ffe2b94be98b86176f2 Mon Sep 17 00:00:00 2001
From: Ana Margarida Silva <ana.margarida.silva@callstack.com>
Date: Tue, 23 May 2023 08:51:07 +0100
Subject: [PATCH] refactor: store wrapper in component

---
 src/components/PressableWithDelayToggle.js | 81 ++++++++++------------
 1 file changed, 36 insertions(+), 45 deletions(-)

diff --git a/src/components/PressableWithDelayToggle.js b/src/components/PressableWithDelayToggle.js
index b90dc7702f84..46d83b2e226d 100644
--- a/src/components/PressableWithDelayToggle.js
+++ b/src/components/PressableWithDelayToggle.js
@@ -77,57 +77,48 @@ function PressableWithDelayToggle(props) {
         props.onPress();
     };
 
-    const children = (
-        <Tooltip
-            containerStyles={styles.flexRow}
-            text={props.isDelayButtonStateComplete ? props.tooltipTextChecked : props.tooltipText}
-        >
-            <Text
-                suppressHighlighting
-                style={[...props.textStyles, styles.mr1]}
-            >
-                {props.isDelayButtonStateComplete && props.textChecked ? props.textChecked : props.text}
-            </Text>
-            <Pressable
-                ref={props.innerRef}
-                focusable
-                accessibilityLabel={props.isDelayButtonStateComplete ? props.tooltipTextChecked : props.tooltipText}
-                onPress={updatePressState}
-            >
-                {({hovered, pressed}) => (
-                    <>
-                        {props.icon && (
-                            <Icon
-                                src={props.isDelayButtonStateComplete ? props.iconChecked : props.icon}
-                                fill={StyleUtils.getIconFillColor(getButtonState(hovered, pressed, props.isDelayButtonStateComplete))}
-                                style={props.iconStyles}
-                                width={variables.iconSizeSmall}
-                                height={variables.iconSizeSmall}
-                            />
-                        )}
-                    </>
-                )}
-            </Pressable>
-        </Tooltip>
-    );
-
     // Due to limitations in RN regarding the vertical text alignment of non-Text elements,
     // for elements that are supposed to be inline, we need to use a Text element instead
     // of a Pressable
-    return props.inline ? (
-        <Text
-            style={[...props.styles, styles.flexRow]}
-            onPress={updatePressState}
-        >
-            {children}
-        </Text>
-    ) : (
-        <Pressable
+    const PressableView = props.inline ? Text : Pressable;
+
+    return (
+        <PressableView
             style={[...props.styles, styles.flexRow]}
             onPress={updatePressState}
         >
-            {children}
-        </Pressable>
+            <Tooltip
+                containerStyles={styles.flexRow}
+                text={props.isDelayButtonStateComplete ? props.tooltipTextChecked : props.tooltipText}
+            >
+                <Text
+                    suppressHighlighting
+                    style={[...props.textStyles, styles.mr1]}
+                >
+                    {props.isDelayButtonStateComplete && props.textChecked ? props.textChecked : props.text}
+                </Text>
+                <Pressable
+                    ref={props.innerRef}
+                    focusable
+                    accessibilityLabel={props.isDelayButtonStateComplete ? props.tooltipTextChecked : props.tooltipText}
+                    onPress={updatePressState}
+                >
+                    {({hovered, pressed}) => (
+                        <>
+                            {props.icon && (
+                                <Icon
+                                    src={props.isDelayButtonStateComplete ? props.iconChecked : props.icon}
+                                    fill={StyleUtils.getIconFillColor(getButtonState(hovered, pressed, props.isDelayButtonStateComplete))}
+                                    style={props.iconStyles}
+                                    width={variables.iconSizeSmall}
+                                    height={variables.iconSizeSmall}
+                                />
+                            )}
+                        </>
+                    )}
+                </Pressable>
+            </Tooltip>
+        </PressableView>
     );
 }