Add hit slop

observation · May 3, 2024 · 237d56b · 237d56b
1 parent 2e6e8d5
commit 237d56b
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 34 deletions.
diff --git a/src/components/Lightbox.tsx b/src/components/Lightbox.tsx
@@ -11,31 +11,30 @@ import font from '../styles/font'
 import textStyle from '../styles/text'
 import theme from '../styles/theme'
 
+const hitSlop = { top: 16, left: 16, bottom: 16, right: 16 }
+
 const getLightboxHeaderComponent =
   (numberOfPages: number, onClose: () => void) =>
-  ({ imageIndex }: { imageIndex: number }) => {
-    const hitSlop = { top: 16, left: 16, bottom: 16, right: 16 }
-    return (
-      <SafeAreaView style={styles.lightboxHeaderContainer}>
-        <View style={styles.lightboxHeader}>
-          <View style={{ flex: 1 }} />
-          <View style={styles.pageIndicator}>
-            <PageIndicator currentPage={imageIndex + 1} numberOfPages={numberOfPages} />
-          </View>
-          <View style={{ flex: 1 }}>
-            <TouchableOpacity style={styles.closeButton} onPress={() => onClose()} hitSlop={hitSlop}>
-              <Icon
-                name="times"
-                color={Color(theme.color.white).alpha(0.5).string()}
-                size={theme.icon.size.extraExtraLarge}
-                testID="close-lightbox"
-              />
-            </TouchableOpacity>
-          </View>
+  ({ imageIndex }: { imageIndex: number }) => (
+    <SafeAreaView style={styles.lightboxHeaderContainer}>
+      <View style={styles.lightboxHeader}>
+        <View style={{ flex: 1 }} />
+        <View style={styles.pageIndicator}>
+          <PageIndicator currentPage={imageIndex + 1} numberOfPages={numberOfPages} />
+        </View>
+        <View style={{ flex: 1 }}>
+          <TouchableOpacity style={styles.closeButton} onPress={() => onClose()} hitSlop={hitSlop}>
+            <Icon
+              name="times"
+              color={Color(theme.color.white).alpha(0.5).string()}
+              size={theme.icon.size.extraExtraLarge}
+              testID="close-lightbox"
+            />
+          </TouchableOpacity>
         </View>
-      </SafeAreaView>
-    )
-  }
+      </View>
+    </SafeAreaView>
+  )
 
 const getLightboxFooterComponent =
   (
@@ -62,11 +61,9 @@ const getLightboxFooterComponent =
         {onPressDelete && (
           <View style={styles.buttonsContainer}>
             <View style={styles.buttonContainer}>
-              <IconButton
-                testID="delete-photo"
-                icon={{ name: 'trash-alt', size: 20, color: theme.color.white }}
-                onPress={onPressDelete}
-              />
+              <TouchableOpacity onPress={onPressDelete} hitSlop={hitSlop}>
+                <IconButton testID="delete-photo" icon={{ name: 'trash-alt', size: 20, color: theme.color.white }} />
+              </TouchableOpacity>
             </View>
           </View>
         )}

diff --git a/src/components/__tests__/__snapshots__/Lightbox.test.tsx.snap b/src/components/__tests__/__snapshots__/Lightbox.test.tsx.snap
@@ -1992,6 +1992,14 @@ exports[`Lightbox Rendering With a delete button 1`] = `
                 accessible={true}
                 collapsable={false}
                 focusable={true}
+                hitSlop={
+                  {
+                    "bottom": 16,
+                    "left": 16,
+                    "right": 16,
+                    "top": 16,
+                  }
+                }
                 onClick={[Function]}
                 onResponderGrant={[Function]}
                 onResponderMove={[Function]}
@@ -2004,14 +2012,49 @@ exports[`Lightbox Rendering With a delete button 1`] = `
                     "opacity": 1,
                   }
                 }
-                testID="delete-photo"
               >
-                <Icon
-                  color="#FFFFFF"
-                  name="trash-can"
-                  size={20}
-                  type="light"
-                />
+                <View
+                  accessibilityState={
+                    {
+                      "busy": undefined,
+                      "checked": undefined,
+                      "disabled": undefined,
+                      "expanded": undefined,
+                      "selected": undefined,
+                    }
+                  }
+                  accessibilityValue={
+                    {
+                      "max": undefined,
+                      "min": undefined,
+                      "now": undefined,
+                      "text": undefined,
+                    }
+                  }
+                  accessible={true}
+                  collapsable={false}
+                  focusable={false}
+                  onClick={[Function]}
+                  onResponderGrant={[Function]}
+                  onResponderMove={[Function]}
+                  onResponderRelease={[Function]}
+                  onResponderTerminate={[Function]}
+                  onResponderTerminationRequest={[Function]}
+                  onStartShouldSetResponder={[Function]}
+                  style={
+                    {
+                      "opacity": 1,
+                    }
+                  }
+                  testID="delete-photo"
+                >
+                  <Icon
+                    color="#FFFFFF"
+                    name="trash-can"
+                    size={20}
+                    type="light"
+                  />
+                </View>
               </View>
             </View>
           </View>