[IOPAE-1235] Add onCancel prop on SearchInput (#286)

## Short description This PR adds `onCancel` prop on `SearchInput` component. ## How to test 1. Launch the example app 2. Go to the **SearchCustom** screen
pagopa · Jun 11, 2024 · 37a6cf3 · 37a6cf3
1 parent d6ee99a
commit 37a6cf3
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 15 deletions.
diff --git a/example/src/pages/SearchCustom.tsx b/example/src/pages/SearchCustom.tsx
@@ -4,10 +4,12 @@ import {
   SearchInput,
   VStack
 } from "@pagopa/io-app-design-system";
+import { useNavigation } from "@react-navigation/native";
 import React from "react";
 import { Alert, ScrollView } from "react-native";
 
 export const SearchCustom = () => {
+  const navigation = useNavigation();
   const [inputValue, setInputValue] = React.useState("");
 
   return (
@@ -26,6 +28,7 @@ export const SearchCustom = () => {
             accessibilityLabel="Search input"
             cancelButtonLabel="Annulla"
             value={inputValue}
+            onCancel={() => navigation.goBack()}
             onChangeText={setInputValue}
           />
         </VStack>

diff --git a/src/components/searchInput/SearchInput.tsx b/src/components/searchInput/SearchInput.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable functional/immutable-data */
-import React, { useCallback, useMemo, useRef, useState } from "react";
+import React, { useCallback, useRef, useState } from "react";
 import {
   ColorValue,
   Dimensions,
@@ -58,11 +58,13 @@ type SearchInputPressableProps = {
 type SearchInputActionProps =
   | {
       pressable: SearchInputPressableProps;
+      onCancel?: never;
       onChangeText?: never;
       value?: never;
     }
   | {
       pressable?: never;
+      onCancel: (event: GestureResponderEvent) => void;
       onChangeText: (value: string) => void;
       value: string;
     };
@@ -88,6 +90,7 @@ export const SearchInput = ({
   accessibilityLabel,
   cancelButtonLabel,
   clearAccessibilityLabel,
+  onCancel,
   onChangeText,
   placeholder,
   value = "",
@@ -105,11 +108,8 @@ export const SearchInput = ({
   /* Widths used for the transition:
      - `SearchInput` entire width
      - `Cancel` button */
-  const inputWidth: number = useMemo(
-    () =>
-      Dimensions.get("window").width - IOVisualCostants.appMarginDefault * 2,
-    []
-  );
+  const inputWidth: number =
+    Dimensions.get("window").width - IOVisualCostants.appMarginDefault * 2;
 
   const [cancelButtonWidth, setCancelButtonWidth] =
     useState<LayoutRectangle["width"]>(0);
@@ -118,10 +118,7 @@ export const SearchInput = ({
     setCancelButtonWidth(nativeEvent.layout.width);
   };
 
-  const inputWidthWithCancel: number = useMemo(
-    () => inputWidth - cancelButtonWidth,
-    [inputWidth, cancelButtonWidth]
-  );
+  const inputWidthWithCancel: number = inputWidth - cancelButtonWidth;
 
   /* Reanimated styles */
   const inputAnimatedWidth = useSharedValue<number>(inputWidth);
@@ -179,11 +176,13 @@ export const SearchInput = ({
     inputAnimatedWidth.value = inputWidth;
   };
 
-  const cancel = useCallback(() => {
-    onChangeText?.("");
-    searchInputRef.current?.clear();
-    searchInputRef.current?.blur();
-  }, [onChangeText]);
+  const cancel = useCallback(
+    (event: GestureResponderEvent) => {
+      onChangeText?.("");
+      onCancel?.(event);
+    },
+    [onCancel, onChangeText]
+  );
 
   const clear = useCallback(() => {
     onChangeText?.("");