@pagopa/io-app-design-system 7.0.2 → 7.1.0

package/src/components/searchInput/SearchInput.tsx

@@ -1,11 +1,5 @@
 /* eslint-disable functional/immutable-data */
-import {
-  forwardRef,
-  useCallback,
-  useImperativeHandle,
-  useRef,
-  useState
-} from "react";
+import { Ref, useCallback, useImperativeHandle, useRef, useState } from "react";
 import {
   ColorValue,
   Dimensions,
@@ -76,6 +70,7 @@ type SearchInputActionProps =
     };
 
 type SearchInputProps = WithTestID<{
+  ref?: Ref<SearchInputRef>;
   accessibilityLabel: TextInputProps["accessibilityLabel"];
   cancelButtonLabel: string;
   clearAccessibilityLabel: string;
@@ -96,246 +91,242 @@ const inputWithTimingConfig = {
   easing: Easing.inOut(Easing.cubic)
 };
 
-export const SearchInput = forwardRef<SearchInputRef, SearchInputProps>(
-  (
-    {
-      accessibilityLabel,
-      cancelButtonLabel,
-      clearAccessibilityLabel,
-      placeholder,
-      autoFocus,
-      keepCancelVisible = false,
-      onCancel,
-      onChangeText,
-      pressable,
-      testID,
-      value = ""
-    },
-    ref
-  ) => {
-    const searchInputRef = useRef<TextInput>(null);
-    const { newTypefaceEnabled } = useIONewTypeface();
+export const SearchInput = ({
+  accessibilityLabel,
+  cancelButtonLabel,
+  clearAccessibilityLabel,
+  placeholder,
+  autoFocus,
+  keepCancelVisible = false,
+  onCancel,
+  onChangeText,
+  pressable,
+  testID,
+  value = "",
+  ref
+}: SearchInputProps) => {
+  const searchInputRef = useRef<TextInput>(null);
+  const { newTypefaceEnabled } = useIONewTypeface();
 
-    /* Component visual attributes */
-    const theme = useIOTheme();
-    const inputCaretColor = IOColors[theme["interactiveElem-default"]];
+  /* Component visual attributes */
+  const theme = useIOTheme();
+  const inputCaretColor = IOColors[theme["interactiveElem-default"]];
 
-    const inputBgColorDefault: ColorValue =
-      IOColors[theme["appBackground-secondary"]];
-    const inputBgColorFocused: ColorValue =
-      IOColors[theme["appBackground-tertiary"]];
-    const inputColorPlaceholder: ColorValue =
-      IOColors[theme["textBody-tertiary"]];
-    const iconColor: IOColors = theme["textBody-tertiary"];
+  const inputBgColorDefault: ColorValue =
+    IOColors[theme["appBackground-secondary"]];
+  const inputBgColorFocused: ColorValue =
+    IOColors[theme["appBackground-tertiary"]];
+  const inputColorPlaceholder: ColorValue =
+    IOColors[theme["textBody-tertiary"]];
+  const iconColor: IOColors = theme["textBody-tertiary"];
 
-    /* Widths used for the transition:
+  /* Widths used for the transition:
        - `SearchInput` entire width
        - `Cancel` button */
-    const inputWidth: number =
-      Dimensions.get("window").width - IOVisualCostants.appMarginDefault * 2;
-
-    const [cancelButtonWidth, setCancelButtonWidth] =
-      useState<LayoutRectangle["width"]>(0);
+  const inputWidth: number =
+    Dimensions.get("window").width - IOVisualCostants.appMarginDefault * 2;
 
-    const getCancelButtonWidth = ({ nativeEvent }: LayoutChangeEvent) => {
-      setCancelButtonWidth(nativeEvent.layout.width);
-    };
+  const [cancelButtonWidth, setCancelButtonWidth] =
+    useState<LayoutRectangle["width"]>(0);
 
-    const inputWidthWithCancel: number = inputWidth - cancelButtonWidth;
+  const getCancelButtonWidth = ({ nativeEvent }: LayoutChangeEvent) => {
+    setCancelButtonWidth(nativeEvent.layout.width);
+  };
 
-    useImperativeHandle(
-      ref,
-      () => ({
-        focus() {
-          searchInputRef.current?.focus();
-        }
-      }),
-      []
-    );
+  const inputWidthWithCancel: number = inputWidth - cancelButtonWidth;
 
-    /* Reanimated styles */
-    const inputAnimatedWidth = useSharedValue<number>(inputWidth);
-    const isFocused = useSharedValue(0);
+  useImperativeHandle(
+    ref,
+    () => ({
+      focus() {
+        searchInputRef.current?.focus();
+      }
+    }),
+    []
+  );
 
-    /* Applied to the `SearchInput` */
-    const animatedStyle = useAnimatedStyle(() => ({
-      width: withTiming(inputAnimatedWidth.value, inputWithTimingConfig),
-      backgroundColor: interpolateColor(
-        isFocused.value,
-        [0, 1],
-        [inputBgColorDefault, inputBgColorFocused]
-      )
-    }));
+  /* Reanimated styles */
+  const inputAnimatedWidth = useSharedValue<number>(inputWidth);
+  const isFocused = useSharedValue(0);
 
-    /* Applied to the `Cancel` button */
-    const cancelButtonAnimatedStyle = useAnimatedStyle(() => {
-      const showCancelButton =
-        !pressable && keepCancelVisible ? 1 : isFocused.value;
+  /* Applied to the `SearchInput` */
+  const animatedStyle = useAnimatedStyle(() => ({
+    width: withTiming(inputAnimatedWidth.value, inputWithTimingConfig),
+    backgroundColor: interpolateColor(
+      isFocused.value,
+      [0, 1],
+      [inputBgColorDefault, inputBgColorFocused]
+    )
+  }));
 
-      return {
-        transform: [
-          {
-            translateX: interpolate(
-              showCancelButton,
-              [0, 1],
-              [cancelButtonWidth + IOVisualCostants.appMarginDefault, 0],
-              Extrapolation.CLAMP
-            )
-          }
-        ],
-        opacity: interpolate(showCancelButton, [0, 1], [0.5, 1])
-      };
-    });
+  /* Applied to the `Cancel` button */
+  const cancelButtonAnimatedStyle = useAnimatedStyle(() => {
+    const showCancelButton =
+      !pressable && keepCancelVisible ? 1 : isFocused.value;
 
-    /* Applied to the `Clear` button inside the `SearchInput` */
-    const clearButtonAnimatedStyle = useAnimatedStyle(() => {
-      const showClearButton = value.length > 0;
+    return {
+      transform: [
+        {
+          translateX: interpolate(
+            showCancelButton,
+            [0, 1],
+            [cancelButtonWidth + IOVisualCostants.appMarginDefault, 0],
+            Extrapolation.CLAMP
+          )
+        }
+      ],
+      opacity: interpolate(showCancelButton, [0, 1], [0.5, 1])
+    };
+  });
 
-      return {
-        transform: [
-          {
-            scale: showClearButton
-              ? withTiming(1, inputWithTimingConfig)
-              : withTiming(0.5, inputWithTimingConfig)
-          }
-        ],
-        opacity: withTiming(showClearButton ? 1 : 0, inputWithTimingConfig)
-      };
-    }, [value]);
+  /* Applied to the `Clear` button inside the `SearchInput` */
+  const clearButtonAnimatedStyle = useAnimatedStyle(() => {
+    const showClearButton = value.length > 0;
 
-    /* Related event handlers */
-    const handleFocus = () => {
-      isFocused.value = withTiming(1, inputWithTimingConfig);
-      inputAnimatedWidth.value = inputWidthWithCancel;
+    return {
+      transform: [
+        {
+          scale: showClearButton
+            ? withTiming(1, inputWithTimingConfig)
+            : withTiming(0.5, inputWithTimingConfig)
+        }
+      ],
+      opacity: withTiming(showClearButton ? 1 : 0, inputWithTimingConfig)
     };
+  }, [value]);
 
-    const handleBlur = () => {
-      isFocused.value = withTiming(0, inputWithTimingConfig);
-      inputAnimatedWidth.value = keepCancelVisible
-        ? inputWidthWithCancel
-        : inputWidth;
-    };
+  /* Related event handlers */
+  const handleFocus = () => {
+    isFocused.value = withTiming(1, inputWithTimingConfig);
+    inputAnimatedWidth.value = inputWidthWithCancel;
+  };
 
-    const handleCancel = useCallback(
-      (event: GestureResponderEvent) => {
-        onChangeText?.("");
-        onCancel?.(event);
-      },
-      [onCancel, onChangeText]
-    );
+  const handleBlur = () => {
+    isFocused.value = withTiming(0, inputWithTimingConfig);
+    inputAnimatedWidth.value = keepCancelVisible
+      ? inputWidthWithCancel
+      : inputWidth;
+  };
 
-    const handleClear = useCallback(() => {
+  const handleCancel = useCallback(
+    (event: GestureResponderEvent) => {
       onChangeText?.("");
-      searchInputRef.current?.clear();
-    }, [onChangeText]);
+      onCancel?.(event);
+    },
+    [onCancel, onChangeText]
+  );
+
+  const handleClear = useCallback(() => {
+    onChangeText?.("");
+    searchInputRef.current?.clear();
+  }, [onChangeText]);
 
-    const handleChangeText = useCallback(
-      (text: string) => onChangeText?.(text),
-      [onChangeText]
-    );
+  const handleChangeText = useCallback(
+    (text: string) => onChangeText?.(text),
+    [onChangeText]
+  );
 
-    const renderSearchBar = () => (
+  const renderSearchBar = () => (
+    <Animated.View
+      importantForAccessibility={pressable ? "no-hide-descendants" : "auto"}
+      style={styles.searchBar}
+    >
       <Animated.View
-        importantForAccessibility={pressable ? "no-hide-descendants" : "auto"}
-        style={styles.searchBar}
+        style={[styles.searchInput, animatedStyle]}
+        pointerEvents={pressable ? "none" : "auto"}
       >
-        <Animated.View
-          style={[styles.searchInput, animatedStyle]}
-          pointerEvents={pressable ? "none" : "auto"}
-        >
-          <View style={styles.iconContainer}>
-            <Icon
-              allowFontScaling
-              name="search"
-              size={iconSize}
-              color={iconColor}
-            />
-          </View>
-          <AnimatedTextInput
-            testID={testID}
-            ref={searchInputRef}
-            inputMode="search"
-            returnKeyType="search"
-            accessibilityRole={"search"}
-            accessibilityLabel={accessibilityLabel}
-            numberOfLines={1}
-            style={[
-              {
-                color: IOColors[theme["textBody-default"]],
-                ...makeFontStyleObject(
-                  inputFontSizePlaceholder,
-                  newTypefaceEnabled ? "Titillio" : "TitilliumSansPro",
-                  undefined,
-                  "Regular"
-                )
-              },
-              styles.textInput,
-              Platform.OS === "ios"
-                ? styles.textInputIOS
-                : styles.textInputAndroid
-            ]}
-            selectionColor={inputCaretColor}
-            cursorColor={inputCaretColor}
-            placeholder={placeholder}
-            placeholderTextColor={inputColorPlaceholder}
-            onFocus={handleFocus}
-            onBlur={handleBlur}
-            onChangeText={handleChangeText}
-            value={value}
-            autoFocus={autoFocus}
-            maxFontSizeMultiplier={IOMaxFontSizeMultiplier}
+        <View style={styles.iconContainer}>
+          <Icon
+            allowFontScaling
+            name="search"
+            size={iconSize}
+            color={iconColor}
           />
+        </View>
+        <AnimatedTextInput
+          testID={testID}
+          ref={searchInputRef}
+          inputMode="search"
+          returnKeyType="search"
+          accessibilityRole={"search"}
+          accessibilityLabel={accessibilityLabel}
+          numberOfLines={1}
+          style={[
+            {
+              color: IOColors[theme["textBody-default"]],
+              ...makeFontStyleObject(
+                inputFontSizePlaceholder,
+                newTypefaceEnabled ? "Titillio" : "TitilliumSansPro",
+                undefined,
+                "Regular"
+              )
+            },
+            styles.textInput,
+            Platform.OS === "ios"
+              ? styles.textInputIOS
+              : styles.textInputAndroid
+          ]}
+          selectionColor={inputCaretColor}
+          cursorColor={inputCaretColor}
+          placeholder={placeholder}
+          placeholderTextColor={inputColorPlaceholder}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          onChangeText={handleChangeText}
+          value={value}
+          autoFocus={autoFocus}
+          maxFontSizeMultiplier={IOMaxFontSizeMultiplier}
+        />
 
-          <AnimatedPressable
-            style={[styles.clearButton, clearButtonAnimatedStyle]}
-            onPress={handleClear}
-            accessibilityLabel={clearAccessibilityLabel}
-            accessibilityRole="button"
-            hitSlop={16}
-          >
-            <Icon name="closeSmall" size={iconCloseSize} color={iconColor} />
-          </AnimatedPressable>
-        </Animated.View>
-        <Animated.View
-          onLayout={getCancelButtonWidth}
-          style={[styles.cancelButton, cancelButtonAnimatedStyle]}
+        <AnimatedPressable
+          style={[styles.clearButton, clearButtonAnimatedStyle]}
+          onPress={handleClear}
+          accessibilityLabel={clearAccessibilityLabel}
+          accessibilityRole="button"
+          hitSlop={16}
         >
-          <Pressable
-            accessibilityRole="button"
-            accessibilityLabel={cancelButtonLabel}
-            onPress={handleCancel}
+          <Icon name="closeSmall" size={iconCloseSize} color={iconColor} />
+        </AnimatedPressable>
+      </Animated.View>
+      <Animated.View
+        onLayout={getCancelButtonWidth}
+        style={[styles.cancelButton, cancelButtonAnimatedStyle]}
+      >
+        <Pressable
+          accessibilityRole="button"
+          accessibilityLabel={cancelButtonLabel}
+          onPress={handleCancel}
+        >
+          <IOText
+            color={theme["interactiveElem-default"]}
+            weight={"Semibold"}
+            size={buttonTextFontSize}
+            lineHeight={buttonTextLineHeight}
+            numberOfLines={1}
+            accessible={false}
+            accessibilityElementsHidden
+            importantForAccessibility="no-hide-descendants"
           >
-            <IOText
-              color={theme["interactiveElem-default"]}
-              weight={"Semibold"}
-              size={buttonTextFontSize}
-              lineHeight={buttonTextLineHeight}
-              numberOfLines={1}
-              accessible={false}
-              accessibilityElementsHidden
-              importantForAccessibility="no-hide-descendants"
-            >
-              {cancelButtonLabel}
-            </IOText>
-          </Pressable>
-        </Animated.View>
+            {cancelButtonLabel}
+          </IOText>
+        </Pressable>
       </Animated.View>
-    );
+    </Animated.View>
+  );
 
-    return pressable ? (
-      <Pressable
-        accessible={true}
-        accessibilityRole="button"
-        accessibilityLabel={placeholder}
-        onPress={pressable.onPress}
-      >
-        {renderSearchBar()}
-      </Pressable>
-    ) : (
-      renderSearchBar()
-    );
-  }
-);
+  return pressable ? (
+    <Pressable
+      accessible={true}
+      accessibilityRole="button"
+      accessibilityLabel={placeholder}
+      onPress={pressable.onPress}
+    >
+      {renderSearchBar()}
+    </Pressable>
+  ) : (
+    renderSearchBar()
+  );
+};
 
 const styles = StyleSheet.create({
   searchBar: {