@pagopa/io-app-design-system 4.2.0 → 4.3.0

package/src/components/listitems/ListItemCheckbox.tsx

@@ -1,26 +1,15 @@
 import * as React from "react";
-import { useCallback, useState } from "react";
+import { useState } from "react";
 import { Pressable, View } from "react-native";
 import ReactNativeHapticFeedback from "react-native-haptic-feedback";
-import Animated, {
-  Extrapolate,
-  interpolate,
-  interpolateColor,
-  useAnimatedStyle,
-  useDerivedValue,
-  useSharedValue,
-  withSpring
-} from "react-native-reanimated";
+import Animated from "react-native-reanimated";
 import {
-  IOColors,
-  IOScaleValues,
   IOSelectionListItemStyles,
   IOSelectionListItemVisualParams,
-  IOSpringValues,
   IOStyles,
-  hexToRgba,
   useIOTheme
 } from "../../core";
+import { useListItemAnimation } from "../../hooks";
 import { AnimatedCheckbox } from "../checkbox/AnimatedCheckbox";
 import { IOIcons, Icon } from "../icons";
 import { HSpacer, VSpacer } from "../spacer";
@@ -60,15 +49,8 @@ export const ListItemCheckbox = ({
   onValueChange
 }: ListItemCheckboxProps) => {
   const [toggleValue, setToggleValue] = useState(selected ?? false);
-  // Animations
-  const isPressed: Animated.SharedValue<number> = useSharedValue(0);
-
-  // Scaling transformation applied when the button is pressed
-  const animationScaleValue = IOScaleValues?.basicButton?.pressedState;
-
-  const progressPressed = useDerivedValue(() =>
-    withSpring(isPressed.value, IOSpringValues.button)
-  );
+  const { onPressIn, onPressOut, scaleAnimatedStyle, backgroundAnimatedStyle } =
+    useListItemAnimation();
 
   // Theme
   const theme = useIOTheme();
@@ -79,46 +61,6 @@ export const ListItemCheckbox = ({
     ? `${value}, ${description}`
     : value;
 
-  const mapBackgroundStates: Record<string, string> = {
-    default: hexToRgba(IOColors[theme["listItem-pressed"]], 0),
-    pressed: IOColors[theme["listItem-pressed"]]
-  };
-
-  // Interpolate animation values from `isPressed` values
-  const animatedScaleStyle = useAnimatedStyle(() => {
-    const scale = interpolate(
-      progressPressed.value,
-      [0, 1],
-      [1, animationScaleValue],
-      Extrapolate.CLAMP
-    );
-
-    return {
-      transform: [{ scale }]
-    };
-  });
-
-  const handlePressIn = useCallback(() => {
-    // eslint-disable-next-line functional/immutable-data
-    isPressed.value = 1;
-  }, [isPressed]);
-  const handlePressOut = useCallback(() => {
-    // eslint-disable-next-line functional/immutable-data
-    isPressed.value = 0;
-  }, [isPressed]);
-
-  const animatedBackgroundStyle = useAnimatedStyle(() => {
-    const backgroundColor = interpolateColor(
-      progressPressed.value,
-      [0, 1],
-      [mapBackgroundStates.default, mapBackgroundStates.pressed]
-    );
-
-    return {
-      backgroundColor
-    };
-  });
-
   const toggleCheckbox = () => {
     ReactNativeHapticFeedback.trigger("impactLight");
     setToggleValue(!toggleValue);
@@ -130,9 +72,9 @@ export const ListItemCheckbox = ({
   return (
     <Pressable
       onPress={toggleCheckbox}
-      onPressIn={handlePressIn}
-      onPressOut={handlePressOut}
-      onTouchEnd={handlePressOut}
+      onPressIn={onPressIn}
+      onPressOut={onPressOut}
+      onTouchEnd={onPressOut}
       testID="ListItemCheckbox"
       accessible={true}
       accessibilityLabel={accessibilityLabel || fallbackAccessibilityLabel}
@@ -147,14 +89,14 @@ export const ListItemCheckbox = ({
       <Animated.View
         style={[
           IOSelectionListItemStyles.listItem,
-          animatedBackgroundStyle,
+          backgroundAnimatedStyle,
           { opacity: disabled ? DISABLED_OPACITY : 1 }
         ]}
         // This is required to avoid opacity
         // inheritance on Android
         needsOffscreenAlphaCompositing={true}
       >
-        <Animated.View style={animatedScaleStyle}>
+        <Animated.View style={scaleAnimatedStyle}>
           <View style={IOSelectionListItemStyles.listItemInner}>
             <View style={[IOStyles.row, { flexShrink: 1 }]}>
               {icon && (

package/src/components/listitems/ListItemHeader.tsx

@@ -87,7 +87,7 @@ export const ListItemHeader = ({
     [label, theme, endElement]
   );
 
-  const listItemInfoAction = useCallback(() => {
+  const listItemAction = useCallback(() => {
     if (endElement) {
       const { type, componentProps } = endElement;
 
@@ -141,7 +141,7 @@ export const ListItemHeader = ({
         <View style={IOStyles.flex}>{itemInfoTextComponent}</View>
         {endElement && (
           <View style={{ marginLeft: IOListItemVisualParams.actionMargin }}>
-            {listItemInfoAction()}
+            {listItemAction()}
           </View>
         )}
       </View>

package/src/components/listitems/ListItemInfoCopy.tsx

@@ -1,25 +1,13 @@
-import React, { ComponentProps, useCallback, useMemo } from "react";
+import React, { ComponentProps, useMemo } from "react";
 import { GestureResponderEvent, Pressable, View } from "react-native";
-import Animated, {
-  Extrapolate,
-  interpolate,
-  interpolateColor,
-  useAnimatedStyle,
-  useDerivedValue,
-  useSharedValue,
-  withSpring
-} from "react-native-reanimated";
+import Animated from "react-native-reanimated";
 import {
-  IOColors,
   IOListItemStyles,
   IOListItemVisualParams,
-  IOScaleValues,
-  IOSpringValues,
   IOStyles,
-  hexToRgba,
-  useIOExperimentalDesign,
   useIOTheme
 } from "../../core";
+import { useListItemAnimation } from "../../hooks";
 import { WithTestID } from "../../utils/types";
 import { IOIcons, Icon } from "../icons";
 import { BodySmall, H6 } from "../typography";
@@ -46,9 +34,9 @@ export const ListItemInfoCopy = ({
   accessibilityHint,
   testID
 }: ListItemInfoCopy) => {
-  const isPressed = useSharedValue(0);
-  const { isExperimental } = useIOExperimentalDesign();
   const theme = useIOTheme();
+  const { onPressIn, onPressOut, scaleAnimatedStyle, backgroundAnimatedStyle } =
+    useListItemAnimation();
 
   const componentValueToAccessibility = useMemo(
     () => (typeof value === "string" ? value : ""),
@@ -63,9 +51,7 @@ export const ListItemInfoCopy = ({
     [label, componentValueToAccessibility, accessibilityLabel]
   );
 
-  const foregroundColor = isExperimental
-    ? theme["interactiveElem-default"]
-    : "blue";
+  const foregroundColor = theme["interactiveElem-default"];
 
   const listItemInfoCopyContent = (
     <>
@@ -83,58 +69,12 @@ export const ListItemInfoCopy = ({
     </>
   );
 
-  const mapBackgroundStates: Record<string, string> = {
-    default: hexToRgba(IOColors[theme["listItem-pressed"]], 0),
-    pressed: IOColors[theme["listItem-pressed"]]
-  };
-
-  // Scaling transformation applied when the button is pressed
-  const animationScaleValue = IOScaleValues?.basicButton?.pressedState;
-
-  const progressPressed = useDerivedValue(() =>
-    withSpring(isPressed.value, IOSpringValues.button)
-  );
-
-  // Interpolate animation values from `isPressed` values
-  const animatedScaleStyle = useAnimatedStyle(() => {
-    const scale = interpolate(
-      progressPressed.value,
-      [0, 1],
-      [1, animationScaleValue],
-      Extrapolate.CLAMP
-    );
-
-    return {
-      transform: [{ scale }]
-    };
-  });
-
-  const animatedBackgroundStyle = useAnimatedStyle(() => {
-    const backgroundColor = interpolateColor(
-      progressPressed.value,
-      [0, 1],
-      [mapBackgroundStates.default, mapBackgroundStates.pressed]
-    );
-
-    return {
-      backgroundColor
-    };
-  });
-
-  const handlePressIn = useCallback(() => {
-    // eslint-disable-next-line functional/immutable-data
-    isPressed.value = 1;
-  }, [isPressed]);
-  const handlePressOut = useCallback(() => {
-    // eslint-disable-next-line functional/immutable-data
-    isPressed.value = 0;
-  }, [isPressed]);
-
   return (
     <Pressable
       onPress={onPress}
-      onPressIn={handlePressIn}
-      onPressOut={handlePressOut}
+      onPressIn={onPressIn}
+      onPressOut={onPressOut}
+      onTouchEnd={onPressOut}
       accessible={true}
       accessibilityLabel={listItemAccessibilityLabel}
       accessibilityHint={accessibilityHint}
@@ -144,10 +84,10 @@ export const ListItemInfoCopy = ({
       <Animated.View
         importantForAccessibility="no-hide-descendants"
         accessibilityElementsHidden
-        style={[IOListItemStyles.listItem, animatedBackgroundStyle]}
+        style={[IOListItemStyles.listItem, backgroundAnimatedStyle]}
       >
         <Animated.View
-          style={[IOListItemStyles.listItemInner, animatedScaleStyle]}
+          style={[IOListItemStyles.listItemInner, scaleAnimatedStyle]}
         >
           {icon && (
             <View style={{ marginRight: IOListItemVisualParams.iconMargin }}>

package/src/components/listitems/ListItemNav.tsx

@@ -1,4 +1,4 @@
-import React, { ComponentProps, ReactNode, useCallback } from "react";
+import React, { ComponentProps, ReactNode } from "react";
 import {
   GestureResponderEvent,
   Image,
@@ -6,27 +6,16 @@ import {
   StyleSheet,
   View
 } from "react-native";
-import Animated, {
-  Extrapolate,
-  interpolate,
-  interpolateColor,
-  useAnimatedStyle,
-  useDerivedValue,
-  useSharedValue,
-  withSpring
-} from "react-native-reanimated";
+import Animated from "react-native-reanimated";
 import {
   IOColors,
   IOListItemStyles,
   IOListItemVisualParams,
-  IOScaleValues,
   IOSelectionListItemVisualParams,
-  IOSpringValues,
   IOStyles,
-  hexToRgba,
-  useIOExperimentalDesign,
   useIOTheme
 } from "../../core";
+import { useListItemAnimation } from "../../hooks";
 import { WithTestID } from "../../utils/types";
 import { Avatar } from "../avatar";
 import { Badge } from "../badge";
@@ -114,8 +103,8 @@ export const ListItemNav = ({
   loading,
   numberOfLines
 }: ListItemNav) => {
-  const isPressed = useSharedValue(0);
-  const { isExperimental } = useIOExperimentalDesign();
+  const { onPressIn, onPressOut, scaleAnimatedStyle, backgroundAnimatedStyle } =
+    useListItemAnimation();
   const theme = useIOTheme();
 
   const withMargin = (GraphicalAsset: ReactNode) => (
@@ -172,56 +161,7 @@ export const ListItemNav = ({
     </>
   );
 
-  const mapBackgroundStates: Record<string, string> = {
-    default: hexToRgba(IOColors[theme["listItem-pressed"]], 0),
-    pressed: IOColors[theme["listItem-pressed"]]
-  };
-
-  const navIconColor = isExperimental
-    ? theme["interactiveElem-default"]
-    : "blue";
-
-  // Scaling transformation applied when the button is pressed
-  const animationScaleValue = IOScaleValues?.basicButton?.pressedState;
-
-  const progressPressed = useDerivedValue(() =>
-    withSpring(isPressed.value, IOSpringValues.button)
-  );
-
-  // Interpolate animation values from `isPressed` values
-  const animatedScaleStyle = useAnimatedStyle(() => {
-    const scale = interpolate(
-      progressPressed.value,
-      [0, 1],
-      [1, animationScaleValue],
-      Extrapolate.CLAMP
-    );
-
-    return {
-      transform: [{ scale }]
-    };
-  });
-
-  const animatedBackgroundStyle = useAnimatedStyle(() => {
-    const backgroundColor = interpolateColor(
-      progressPressed.value,
-      [0, 1],
-      [mapBackgroundStates.default, mapBackgroundStates.pressed]
-    );
-
-    return {
-      backgroundColor
-    };
-  });
-
-  const handlePressIn = useCallback(() => {
-    // eslint-disable-next-line functional/immutable-data
-    isPressed.value = 1;
-  }, [isPressed]);
-  const handlePressOut = useCallback(() => {
-    // eslint-disable-next-line functional/immutable-data
-    isPressed.value = 0;
-  }, [isPressed]);
+  const interactiveColor = theme["interactiveElem-default"];
 
   const handleOnPress = (event: GestureResponderEvent) => {
     if (!loading) {
@@ -229,13 +169,12 @@ export const ListItemNav = ({
     }
   };
 
-  const primaryColor: IOColors = isExperimental ? "blueIO-500" : "blue";
-
   return (
     <Pressable
       onPress={handleOnPress}
-      onPressIn={handlePressIn}
-      onPressOut={handlePressOut}
+      onPressIn={onPressIn}
+      onPressOut={onPressOut}
+      onTouchEnd={onPressOut}
       accessible={true}
       accessibilityState={{ busy: loading }}
       accessibilityLabel={accessibilityLabel}
@@ -244,10 +183,10 @@ export const ListItemNav = ({
       testID={testID}
     >
       <Animated.View
-        style={[IOListItemStyles.listItem, animatedBackgroundStyle]}
+        style={[IOListItemStyles.listItem, backgroundAnimatedStyle]}
       >
         <Animated.View
-          style={[IOListItemStyles.listItemInner, animatedScaleStyle]}
+          style={[IOListItemStyles.listItemInner, scaleAnimatedStyle]}
         >
           {/* Possibile graphical assets
           - Icon
@@ -273,11 +212,11 @@ export const ListItemNav = ({
           {avatar && withMargin(<Avatar size="small" {...avatar} />)}
 
           <View style={IOStyles.flex}>{listItemNavContent}</View>
-          {loading && <LoadingSpinner color={primaryColor} />}
+          {loading && <LoadingSpinner color={interactiveColor} />}
           {!loading && !hideChevron && (
             <Icon
               name="chevronRightListItem"
-              color={navIconColor}
+              color={interactiveColor}
               size={IOListItemVisualParams.chevronSize}
             />
           )}

package/src/components/listitems/ListItemNavAlert.tsx

@@ -1,25 +1,13 @@
-import React, { ComponentProps, useCallback, useMemo } from "react";
+import React, { ComponentProps } from "react";
 import { GestureResponderEvent, Pressable, View } from "react-native";
-import Animated, {
-  Extrapolate,
-  interpolate,
-  interpolateColor,
-  useAnimatedStyle,
-  useDerivedValue,
-  useSharedValue,
-  withSpring
-} from "react-native-reanimated";
+import Animated from "react-native-reanimated";
 import {
-  IOColors,
   IOListItemStyles,
   IOListItemVisualParams,
-  IOScaleValues,
-  IOSpringValues,
   IOStyles,
-  hexToRgba,
-  useIOExperimentalDesign,
   useIOTheme
 } from "../../core";
+import { useListItemAnimation } from "../../hooks";
 import { WithTestID } from "../../utils/types";
 import { Icon } from "../icons";
 import { H6, BodySmall } from "../typography";
@@ -44,31 +32,17 @@ export const ListItemNavAlert = ({
   accessibilityHint,
   testID
 }: ListItemNavAlert) => {
-  const isPressed: Animated.SharedValue<number> = useSharedValue(0);
-  const { isExperimental } = useIOExperimentalDesign();
-
-  const componentValueToAccessibility = useMemo(
-    () => (typeof value === "string" ? value : ""),
-    [value]
-  );
+  const theme = useIOTheme();
+  const { onPressIn, onPressOut, scaleAnimatedStyle, backgroundAnimatedStyle } =
+    useListItemAnimation();
 
-  const componentDescriptionToAccessibility = useMemo(
-    () => (typeof description === "string" ? description : ""),
-    [description]
-  );
+  const componentValueToAccessibility = typeof value === "string" ? value : "";
+  const componentDescriptionToAccessibility =
+    typeof description === "string" ? description : "";
 
-  const listItemAccessibilityLabel = useMemo(
-    () =>
-      accessibilityLabel
-        ? accessibilityLabel
-        : `${componentValueToAccessibility}; ${componentDescriptionToAccessibility}`,
-    [
-      componentDescriptionToAccessibility,
-      componentValueToAccessibility,
-      accessibilityLabel
-    ]
-  );
-  const theme = useIOTheme();
+  const listItemAccessibilityLabel =
+    accessibilityLabel ??
+    `${componentValueToAccessibility}; ${componentDescriptionToAccessibility}`;
 
   // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
   const listItemNavAlertContent = (
@@ -93,60 +67,12 @@ export const ListItemNavAlert = ({
     </>
   );
 
-  const iconColor = isExperimental ? theme["interactiveElem-default"] : "blue";
-
-  const mapBackgroundStates: Record<string, string> = {
-    default: hexToRgba(IOColors[theme["listItem-pressed"]], 0),
-    pressed: IOColors[theme["listItem-pressed"]]
-  };
-
-  // Scaling transformation applied when the button is pressed
-  const animationScaleValue = IOScaleValues?.basicButton?.pressedState;
-
-  const progressPressed = useDerivedValue(() =>
-    withSpring(isPressed.value, IOSpringValues.button)
-  );
-
-  // Interpolate animation values from `isPressed` values
-  const animatedScaleStyle = useAnimatedStyle(() => {
-    const scale = interpolate(
-      progressPressed.value,
-      [0, 1],
-      [1, animationScaleValue],
-      Extrapolate.CLAMP
-    );
-
-    return {
-      transform: [{ scale }]
-    };
-  });
-
-  const animatedBackgroundStyle = useAnimatedStyle(() => {
-    const backgroundColor = interpolateColor(
-      progressPressed.value,
-      [0, 1],
-      [mapBackgroundStates.default, mapBackgroundStates.pressed]
-    );
-
-    return {
-      backgroundColor
-    };
-  });
-
-  const handlePressIn = useCallback(() => {
-    // eslint-disable-next-line functional/immutable-data
-    isPressed.value = 1;
-  }, [isPressed]);
-  const handlePressOut = useCallback(() => {
-    // eslint-disable-next-line functional/immutable-data
-    isPressed.value = 0;
-  }, [isPressed]);
-
   return (
     <Pressable
       onPress={onPress}
-      onPressIn={handlePressIn}
-      onPressOut={handlePressOut}
+      onPressIn={onPressIn}
+      onPressOut={onPressOut}
+      onTouchEnd={onPressOut}
       accessible={true}
       accessibilityLabel={listItemAccessibilityLabel}
       accessibilityHint={accessibilityHint}
@@ -154,12 +80,12 @@ export const ListItemNavAlert = ({
       testID={testID}
     >
       <Animated.View
-        style={[IOListItemStyles.listItem, animatedBackgroundStyle]}
+        style={[IOListItemStyles.listItem, backgroundAnimatedStyle]}
         importantForAccessibility="no-hide-descendants"
         accessibilityElementsHidden
       >
         <Animated.View
-          style={[IOListItemStyles.listItemInner, animatedScaleStyle]}
+          style={[IOListItemStyles.listItemInner, scaleAnimatedStyle]}
         >
           {!withoutIcon && (
             <View style={{ marginRight: IOListItemVisualParams.iconMargin }}>
@@ -174,7 +100,7 @@ export const ListItemNavAlert = ({
           <View style={{ marginLeft: IOListItemVisualParams.iconMargin }}>
             <Icon
               name="chevronRightListItem"
-              color={iconColor}
+              color={theme["interactiveElem-default"]}
               size={IOListItemVisualParams.chevronSize}
             />
           </View>