@pagopa/io-app-design-system 1.0.0-9 → 1.1.1

package/src/components/listitems/ListItemCheckbox.tsx

@@ -0,0 +1,182 @@
+import * as React from "react";
+import { useCallback, 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 {
+  IOColors,
+  IOScaleValues,
+  IOSelectionListItemStyles,
+  IOSelectionListItemVisualParams,
+  IOSpringValues,
+  IOStyles,
+  hexToRgba,
+  useIOTheme
+} from "../../core";
+import { IOIcons, Icon } from "../icons";
+import { HSpacer, VSpacer } from "../spacer";
+import { H6, LabelSmall } from "../typography";
+import { AnimatedCheckbox } from "../checkbox/AnimatedCheckbox";
+
+type Props = {
+  value: string;
+  description?: string;
+  icon?: IOIcons;
+  selected?: boolean;
+  onValueChange?: (newValue: boolean) => void;
+};
+
+const DISABLED_OPACITY = 0.5;
+
+// disabled: the component is no longer touchable
+// onPress:
+type OwnProps = Props &
+  Pick<
+    React.ComponentProps<typeof Pressable>,
+    "onPress" | "accessibilityLabel" | "disabled"
+  >;
+
+/**
+ *  with the automatic state management that uses a {@link AnimatedCheckBox}
+ * The toggleValue change when a `onPress` event is received and dispatch the `onValueChange`.
+ *
+ * @param props
+ * @constructor
+ */
+export const ListItemCheckbox = ({
+  value,
+  description,
+  icon,
+  selected,
+  disabled,
+  onValueChange
+}: OwnProps) => {
+  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)
+  );
+
+  // Theme
+  const theme = useIOTheme();
+
+  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);
+    if (onValueChange !== undefined) {
+      onValueChange(!toggleValue);
+    }
+  };
+
+  return (
+    <Pressable
+      onPress={toggleCheckbox}
+      onPressIn={handlePressIn}
+      onPressOut={handlePressOut}
+      onTouchEnd={handlePressOut}
+      testID="ListItemCheckbox"
+      disabled={disabled}
+    >
+      <Animated.View
+        style={[
+          IOSelectionListItemStyles.listItem,
+          animatedBackgroundStyle,
+          { opacity: disabled ? DISABLED_OPACITY : 1 }
+        ]}
+        // This is required to avoid opacity
+        // inheritance on Android
+        needsOffscreenAlphaCompositing={true}
+      >
+        <Animated.View style={animatedScaleStyle}>
+          <View style={IOSelectionListItemStyles.listItemInner}>
+            <View style={[IOStyles.row, { flexShrink: 1 }]}>
+              {icon && (
+                <View
+                  style={{
+                    marginRight: IOSelectionListItemVisualParams.iconMargin
+                  }}
+                >
+                  <Icon
+                    name={icon}
+                    color="grey-300"
+                    size={IOSelectionListItemVisualParams.iconSize}
+                  />
+                </View>
+              )}
+              <H6 color={"black"} style={{ flexShrink: 1 }}>
+                {value}
+              </H6>
+            </View>
+            <HSpacer size={8} />
+            <View pointerEvents="none">
+              <AnimatedCheckbox checked={selected ?? toggleValue} />
+            </View>
+          </View>
+          {description && (
+            <View>
+              <VSpacer
+                size={IOSelectionListItemVisualParams.descriptionMargin}
+              />
+              <LabelSmall weight="Regular" color={theme["textBody-tertiary"]}>
+                {description}
+              </LabelSmall>
+            </View>
+          )}
+        </Animated.View>
+      </Animated.View>
+    </Pressable>
+  );
+};

package/src/components/listitems/ListItemInfo.tsx

@@ -1,75 +1,70 @@
 import React from "react";
 import { View } from "react-native";
 import {
-    IOListItemStyles,
-    IOListItemVisualParams,
-    IOStyles,
-    useIOTheme
+  IOListItemStyles,
+  IOListItemVisualParams,
+  IOStyles,
+  useIOTheme
 } from "../../core";
 import { WithTestID } from "../../utils/types";
 import { Icon, IOIcons } from "../icons";
-import { VSpacer } from "../spacer/Spacer";
 import { H6, LabelSmall } from "../typography";
 
 export type ListItemInfo = WithTestID<{
-    label: string;
-    value: string | React.ReactNode;
-    numberOfLines?: number;
-    icon?: IOIcons;
-    // Accepted components: ButtonLink, IconButton
-    // Don't use any components other than these
-    action?: React.ReactNode;
-    // Accessibility
-    accessibilityLabel: string;
+  label: string;
+  value: string | React.ReactNode;
+  numberOfLines?: number;
+  icon?: IOIcons;
+  // Accepted components: ButtonLink, IconButton
+  // Don't use any components other than these
+  action?: React.ReactNode;
+  // Accessibility
+  accessibilityLabel: string;
 }>;
 
 export const ListItemInfo = ({
-    label,
-    value,
-    numberOfLines = 2,
-    icon,
-    action,
-    accessibilityLabel,
-    testID
+  label,
+  value,
+  numberOfLines = 2,
+  icon,
+  action,
+  accessibilityLabel,
+  testID
 }: ListItemInfo) => {
-    const theme = useIOTheme();
-    return (
-        <View
-            style={IOListItemStyles.listItem}
-            testID={testID}
-            accessible={true}
-            accessibilityLabel={accessibilityLabel}
-        >
-            <View style={IOListItemStyles.listItemInner}>
-                {icon && (
-                    <View style={{ marginRight: IOListItemVisualParams.iconMargin }}>
-                        <Icon
-                            name={icon}
-                            color="grey-450"
-                            size={IOListItemVisualParams.iconSize}
-                        />
-                    </View>
-                )}
-                <View style={IOStyles.flex}>
-                    <LabelSmall weight="Regular" color={theme["textBody-tertiary"]}>
-                        {label}
-                    </LabelSmall>
-                    <VSpacer size={4} />
-                    <H6
-                        color={theme["textBody-default"]}
-                        numberOfLines={numberOfLines}
-                    >
-                        {value}
-                    </H6>
-                </View>
-                {action && (
-                    <View style={{ marginLeft: IOListItemVisualParams.iconMargin }}>
-                        {action}
-                    </View>
-                )}
-            </View>
+  const theme = useIOTheme();
+  return (
+    <View
+      style={IOListItemStyles.listItem}
+      testID={testID}
+      accessible={true}
+      accessibilityLabel={accessibilityLabel}
+    >
+      <View style={IOListItemStyles.listItemInner}>
+        {icon && (
+          <View style={{ marginRight: IOListItemVisualParams.actionMargin }}>
+            <Icon
+              name={icon}
+              color="grey-450"
+              size={IOListItemVisualParams.iconSize}
+            />
+          </View>
+        )}
+        <View style={IOStyles.flex}>
+          <LabelSmall weight="Regular" color={theme["textBody-tertiary"]}>
+            {label}
+          </LabelSmall>
+          <H6 color={theme["textBody-default"]} numberOfLines={numberOfLines}>
+            {value}
+          </H6>
         </View>
-    );
+        {action && (
+          <View style={{ marginLeft: IOListItemVisualParams.actionMargin }}>
+            {action}
+          </View>
+        )}
+      </View>
+    </View>
+  );
 };
 
 export default ListItemInfo;

package/src/components/listitems/ListItemInfoCopy.tsx

@@ -1,155 +1,150 @@
 import React, { useCallback } from "react";
-import {
-    GestureResponderEvent,
-    Pressable,
-    View
-} from "react-native";
+import { GestureResponderEvent, Pressable, View } from "react-native";
 import Animated, {
-    Extrapolate,
-    interpolate,
-    interpolateColor,
-    useAnimatedStyle,
-    useDerivedValue,
-    useSharedValue,
-    withSpring
+  Extrapolate,
+  interpolate,
+  interpolateColor,
+  useAnimatedStyle,
+  useDerivedValue,
+  useSharedValue,
+  withSpring
 } from "react-native-reanimated";
 import {
-    IOColors,
-    IOListItemStyles,
-    IOListItemVisualParams,
-    IOScaleValues,
-    IOSpringValues,
-    IOStyles,
-    hexToRgba, useIOTheme
+  IOColors,
+  IOListItemStyles,
+  IOListItemVisualParams,
+  IOScaleValues,
+  IOSpringValues,
+  IOStyles,
+  hexToRgba,
+  useIOTheme
 } from "../../core";
 import { WithTestID } from "../../utils/types";
 import { IOIcons, Icon } from "../icons";
-import { VSpacer } from "../spacer/Spacer";
 import { H6, LabelSmall } from "../typography";
 
 export type ListItemInfoCopy = WithTestID<{
-    label: string;
-    value: string | React.ReactNode;
-    numberOfLines?: number;
-    onPress: (event: GestureResponderEvent) => void;
-    icon?: IOIcons;
-    // Accessibility
-    accessibilityLabel: string;
+  label: string;
+  value: string | React.ReactNode;
+  numberOfLines?: number;
+  onPress: (event: GestureResponderEvent) => void;
+  icon?: IOIcons;
+  // Accessibility
+  accessibilityLabel: string;
 }>;
 
 export const ListItemInfoCopy = ({
-    label,
-    value,
-    numberOfLines = 2,
-    onPress,
-    icon,
-    accessibilityLabel,
-    testID
+  label,
+  value,
+  numberOfLines = 2,
+  onPress,
+  icon,
+  accessibilityLabel,
+  testID
 }: ListItemInfoCopy) => {
-    const isPressed = useSharedValue(0);
+  const isPressed = useSharedValue(0);
 
-    const theme = useIOTheme();
+  const theme = useIOTheme();
 
-    const mapBackgroundStates: Record<string, string> = {
-        default: hexToRgba(IOColors[theme["listItem-pressed"]], 0),
-        pressed: IOColors[theme["listItem-pressed"]]
-    };
+  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;
+  // Scaling transformation applied when the button is pressed
+  const animationScaleValue = IOScaleValues?.basicButton?.pressedState;
 
-    const progressPressed = useDerivedValue(() =>
-        withSpring(isPressed.value, IOSpringValues.button)
-    );
+  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
-        );
+  // Interpolate animation values from `isPressed` values
+  const animatedScaleStyle = useAnimatedStyle(() => {
+    const scale = interpolate(
+      progressPressed.value,
+      [0, 1],
+      [1, animationScaleValue],
+      Extrapolate.CLAMP
+    );
 
-        return {
-            transform: [{ scale }]
-        };
-    });
+    return {
+      transform: [{ scale }]
+    };
+  });
 
-    const animatedBackgroundStyle = useAnimatedStyle(() => {
-        const backgroundColor = interpolateColor(
-            progressPressed.value,
-            [0, 1],
-            [mapBackgroundStates.default, mapBackgroundStates.pressed]
-        );
+  const animatedBackgroundStyle = useAnimatedStyle(() => {
+    const backgroundColor = interpolateColor(
+      progressPressed.value,
+      [0, 1],
+      [mapBackgroundStates.default, mapBackgroundStates.pressed]
+    );
 
-        return {
-            backgroundColor
-        };
-    });
+    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 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}
-            accessible={true}
-            accessibilityLabel={accessibilityLabel}
-            accessibilityRole="button"
-            testID={testID}
+  return (
+    <Pressable
+      onPress={onPress}
+      onPressIn={handlePressIn}
+      onPressOut={handlePressOut}
+      accessible={true}
+      accessibilityLabel={accessibilityLabel}
+      accessibilityRole="button"
+      testID={testID}
+    >
+      <Animated.View
+        style={[IOListItemStyles.listItem, animatedBackgroundStyle]}
+      >
+        <Animated.View
+          style={[IOListItemStyles.listItemInner, animatedScaleStyle]}
         >
-            <Animated.View
-                style={[IOListItemStyles.listItem, animatedBackgroundStyle]}
-            >
-                <Animated.View
-                    style={[IOListItemStyles.listItemInner, animatedScaleStyle]}
-                >
-                    {icon && (
-                        <View style={{ marginRight: IOListItemVisualParams.iconMargin }}>
-                            <Icon
-                                name={icon}
-                                color="grey-450"
-                                size={IOListItemVisualParams.iconSize}
-                            />
-                        </View>
-                    )}
-                    <View style={IOStyles.flex}>
-                        <LabelSmall weight="Regular" color={theme["textBody-tertiary"]}>
-                            {label}
-                        </LabelSmall>
-                        <VSpacer size={4} />
-                        {/* Let developer using a custom component (e.g: skeleton) */}
-                        {typeof value === "string" ? (
-                            <H6
-                                color={theme["interactiveElem-default"]}
-                                numberOfLines={numberOfLines}
-                            >
-                                {value}
-                            </H6>
-                        ) : (
-                            { value }
-                        )}
-                    </View>
-                    <View style={{ marginLeft: IOListItemVisualParams.iconMargin }}>
-                        <Icon
-                            name="copy"
-                            color={theme["interactiveElem-default"]}
-                            size={IOListItemVisualParams.chevronSize}
-                        />
-                    </View>
-                </Animated.View>
-            </Animated.View>
-        </Pressable>
-    );
+          {icon && (
+            <View style={{ marginRight: IOListItemVisualParams.iconMargin }}>
+              <Icon
+                name={icon}
+                color="grey-450"
+                size={IOListItemVisualParams.iconSize}
+              />
+            </View>
+          )}
+          <View style={IOStyles.flex}>
+            <LabelSmall weight="Regular" color={theme["textBody-tertiary"]}>
+              {label}
+            </LabelSmall>
+            {/* Let developer using a custom component (e.g: skeleton) */}
+            {typeof value === "string" ? (
+              <H6
+                color={theme["interactiveElem-default"]}
+                numberOfLines={numberOfLines}
+              >
+                {value}
+              </H6>
+            ) : (
+              { value }
+            )}
+          </View>
+          <View style={{ marginLeft: IOListItemVisualParams.iconMargin }}>
+            <Icon
+              name="copy"
+              color={theme["interactiveElem-default"]}
+              size={IOListItemVisualParams.chevronSize}
+            />
+          </View>
+        </Animated.View>
+      </Animated.View>
+    </Pressable>
+  );
 };
 
 export default ListItemInfoCopy;