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

package/src/components/listitems/ListItemRadio.tsx

@@ -0,0 +1,185 @@
+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 { WithTestID } from "../../utils/types";
+import { IOIcons, Icon } from "../icons";
+import { HSpacer, VSpacer } from "../spacer";
+import { H6, LabelSmall } from "../typography";
+import { AnimatedRadio } from "../radio/AnimatedRadio";
+
+type Props = WithTestID<{
+  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 ListItemRadio = ({
+  value,
+  description,
+  icon,
+  selected,
+  disabled,
+  onValueChange,
+  testID
+}: 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 toggleRadioItem = () => {
+    ReactNativeHapticFeedback.trigger("impactLight");
+    setToggleValue(!toggleValue);
+    if (onValueChange !== undefined) {
+      onValueChange(!toggleValue);
+    }
+  };
+
+  return (
+    <Pressable
+      onPress={toggleRadioItem}
+      onPressIn={handlePressIn}
+      onPressOut={handlePressOut}
+      onTouchEnd={handlePressOut}
+      testID={testID}
+      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">
+              <AnimatedRadio 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/ListItemSwitch.tsx

@@ -0,0 +1,109 @@
+import React from "react";
+import { GestureResponderEvent, Switch, View } from "react-native";
+import {
+  IOSelectionListItemStyles,
+  IOSelectionListItemVisualParams,
+  IOStyles,
+  useIOTheme
+} from "../../core";
+import { IOIcons, Icon } from "../icons";
+import { HSpacer, VSpacer } from "../spacer";
+import { H6, LabelSmall, Link } from "../typography";
+import { NativeSwitch } from "../switch/NativeSwitch";
+
+type Props = {
+  label: string;
+  onSwitchValueChange?: (newValue: boolean) => void;
+  description?: string;
+  icon?: IOIcons;
+  action?: SwitchAction;
+};
+
+type SwitchAction = {
+  label: string;
+  onPress: (event: GestureResponderEvent) => void;
+};
+
+const DISABLED_OPACITY = 0.5;
+
+type OwnProps = Props &
+  Pick<React.ComponentProps<typeof Switch>, "value" | "disabled">;
+
+export const ListItemSwitch = React.memo(
+  ({
+    label,
+    description,
+    icon,
+    value,
+    disabled,
+    action,
+    onSwitchValueChange
+  }: OwnProps) => {
+    const theme = useIOTheme();
+
+    return (
+      <View
+        testID="ListItemSwitch"
+        style={[
+          IOSelectionListItemStyles.listItem,
+          {
+            opacity: disabled ? DISABLED_OPACITY : 1
+          }
+        ]}
+        pointerEvents={disabled ? "none" : "auto"}
+        needsOffscreenAlphaCompositing={true}
+      >
+        <View
+          style={[
+            IOSelectionListItemStyles.listItemInner,
+            { alignItems: "center" }
+          ]}
+        >
+          <View style={{ flexShrink: 1 }}>
+            <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 }}>
+                {label}
+              </H6>
+            </View>
+            {description && (
+              <>
+                <VSpacer
+                  size={IOSelectionListItemVisualParams.descriptionMargin}
+                />
+                <LabelSmall weight="Regular" color={theme["textBody-tertiary"]}>
+                  {description}
+                </LabelSmall>
+              </>
+            )}
+            {action && (
+              <>
+                <VSpacer size={IOSelectionListItemVisualParams.actionMargin} />
+                <Link fontSize="small" onPress={action.onPress}>
+                  {action.label}
+                </Link>
+              </>
+            )}
+          </View>
+
+          <HSpacer size={8} />
+          <View style={{ flexShrink: 0, alignSelf: "flex-start" }}>
+            <NativeSwitch value={value} onValueChange={onSwitchValueChange} />
+          </View>
+        </View>
+      </View>
+    );
+  }
+);

package/src/components/listitems/ListItemTransaction.tsx

@@ -1,15 +1,15 @@
 import * as O from "fp-ts/lib/Option";
 import { pipe } from "fp-ts/lib/function";
-import I18n from "i18n-js";
 import React from "react";
 import { ImageURISource, StyleSheet, View } from "react-native";
 import Placeholder from "rn-placeholder";
 import {
-    IOListItemStyles,
-    IOListItemVisualParams,
-    IOStyles,
-    IOVisualCostants,
-    useIOTheme
+  IOColors,
+  IOListItemStyles,
+  IOListItemVisualParams,
+  IOStyles,
+  IOVisualCostants,
+  useIOTheme
 } from "../../core";
 import { WithTestID } from "../../utils/types";
 import { Avatar } from "../avatar/Avatar";
@@ -18,181 +18,184 @@ import { Icon } from "../icons";
 import { IOLogoPaymentType, LogoPayment } from "../logos";
 import { VSpacer } from "../spacer";
 import { H6, LabelSmall } from "../typography";
-import { PressableBaseProps, PressableListItemBase } from "./PressableListItemsBase";
+import {
+  PressableBaseProps,
+  PressableListItemBase
+} from "./PressableListItemsBase";
 
 type LogoNameOrUri = IOLogoPaymentType | ImageURISource;
 export type ListItemTransaction = WithTestID<
-    PressableBaseProps & {
-        hasChevronRight?: boolean;
-        isLoading?: boolean;
-        paymentLogoOrUrl?: LogoNameOrUri;
-        subtitle: string;
-        title: string;
-    } & (
-        | {
-            transactionStatus: "success";
-            transactionAmount: string;
+  PressableBaseProps & {
+    hasChevronRight?: boolean;
+    isLoading?: boolean;
+    paymentLogoOrUrl?: LogoNameOrUri;
+    subtitle: string;
+    title: string;
+  } & (
+      | {
+          transactionStatus: "success";
+          transactionAmount: string;
         }
-        | {
-            transactionStatus: "failure" | "pending";
-            transactionAmount?: string;
+      | {
+          transactionStatus: "failure" | "pending";
+          transactionAmount?: string;
         }
     )
 >;
 
 type LeftComponentProps = {
-    logoNameOrUrl: LogoNameOrUri;
+  logoNameOrUrl: LogoNameOrUri;
 };
 
 const isImageUrI = (
-    value: IOLogoPaymentType | ImageURISource
+  value: IOLogoPaymentType | ImageURISource
 ): value is ImageURISource =>
-    typeof value === "object" && value.uri !== undefined;
+  typeof value === "object" && value.uri !== undefined;
 
 const LeftComponent = ({ logoNameOrUrl }: LeftComponentProps) => {
-    if (isImageUrI(logoNameOrUrl)) {
-        return <Avatar shape="circle" size="small" logoUri={[logoNameOrUrl]} />;
-    } else {
-        return (
-            <View
-                style={{
-                    width: IOVisualCostants.avatarSizeSmall,
-                    height: IOVisualCostants.avatarSizeSmall,
-                    alignItems: "center",
-                    justifyContent: "center"
-                }}
-            >
-                <LogoPayment name={logoNameOrUrl} />
-            </View>
-        );
-    }
+  if (isImageUrI(logoNameOrUrl)) {
+    return <Avatar shape="circle" size="small" logoUri={[logoNameOrUrl]} />;
+  } else {
+    return (
+      <View
+        style={{
+          width: IOVisualCostants.avatarSizeSmall,
+          height: IOVisualCostants.avatarSizeSmall,
+          alignItems: "center",
+          justifyContent: "center"
+        }}
+      >
+        <LogoPayment name={logoNameOrUrl} />
+      </View>
+    );
+  }
 };
 
 export const ListItemTransaction = ({
-    accessibilityLabel,
-    hasChevronRight = false,
-    isLoading = false,
-    paymentLogoOrUrl,
-    onPress,
-    subtitle,
-    testID,
-    title,
-    transactionAmount,
-    transactionStatus = "success"
+  accessibilityLabel,
+  hasChevronRight = false,
+  isLoading = false,
+  paymentLogoOrUrl,
+  onPress,
+  subtitle,
+  testID,
+  title,
+  transactionAmount,
+  transactionStatus = "success"
 }: ListItemTransaction) => {
-    const theme = useIOTheme();
+  const theme = useIOTheme();
 
-    if (isLoading) {
-        return <SkeletonComponent />;
-    }
+  if (isLoading) {
+    return <SkeletonComponent />;
+  }
 
-    const designSystemBlue = "blue";
-    const ListItemTransactionContent = () => {
-        const TransactionAmountOrBadgeComponent = () => {
-            switch (transactionStatus) {
-                case "success":
-                    return (
-                        <H6 color={hasChevronRight ? designSystemBlue : "black"}>
-                            {transactionAmount || "-"}
-                        </H6>
-                    );
+  const designSystemBlue: IOColors = "blue";
+  const ListItemTransactionContent = () => {
+    const TransactionAmountOrBadgeComponent = () => {
+      switch (transactionStatus) {
+        case "success":
+          return (
+            <H6 color={hasChevronRight ? designSystemBlue : "black"}>
+              {transactionAmount || "-"}
+            </H6>
+          );
 
-                case "failure":
-                    return (
-                        <Badge variant="error" text={I18n.t("global.badges.failed")} />
-                    );
-                case "pending":
-                    return (
-                        <Badge variant="info" text={I18n.t("global.badges.onGoing")} />
-                    );
-            }
-        };
-
-        return (
-            <>
-                {paymentLogoOrUrl && (
-                    <View style={{ marginRight: IOListItemVisualParams.iconMargin }}>
-                        <LeftComponent logoNameOrUrl={paymentLogoOrUrl} />
-                    </View>
-                )}
-                <View style={IOStyles.flex}>
-                    <H6 color={theme["textBody-default"]}>{title}</H6>
-                    <LabelSmall weight="Regular" color={theme["textBody-tertiary"]}>
-                        {subtitle}
-                    </LabelSmall>
-                    <VSpacer size={4} />
-                </View>
-                <View style={Styles.rightSection}>
-                    <TransactionAmountOrBadgeComponent />
-                    {hasChevronRight && (
-                        <Icon
-                            name="chevronRightListItem"
-                            color={designSystemBlue}
-                            size={IOListItemVisualParams.chevronSize}
-                        />
-                    )}
-                </View>
-            </>
-        );
+        case "failure":
+          return (
+            <Badge variant="error" text={"Failed"} />
+          );
+        case "pending":
+          return (
+            <Badge variant="info" text={"Cancelled"} />
+          );
+      }
     };
 
-    return pipe(
-        onPress,
-        O.fromNullable,
-        O.fold(
-            () => (
-                <View
-                    style={IOListItemStyles.listItem}
-                    testID={testID}
-                    accessible={true}
-                    accessibilityLabel={accessibilityLabel}
-                >
-                    <View style={IOListItemStyles.listItemInner}>
-                        <ListItemTransactionContent />
-                    </View>
-                </View>
-            ),
-            onPress => (
-                <PressableListItemBase
-                    onPress={onPress}
-                    testID={testID}
-                    accessibilityLabel={accessibilityLabel}
-                >
-                    <ListItemTransactionContent />
-                </PressableListItemBase>
-            )
-        )
+    return (
+      <>
+        {paymentLogoOrUrl && (
+          <View style={{ marginRight: IOListItemVisualParams.iconMargin }}>
+            <LeftComponent logoNameOrUrl={paymentLogoOrUrl} />
+          </View>
+        )}
+        <View style={IOStyles.flex}>
+          <H6 color={theme["textBody-default"]}>{title}</H6>
+          <LabelSmall weight="Regular" color={theme["textBody-tertiary"]}>
+            {subtitle}
+          </LabelSmall>
+          <VSpacer size={4} />
+        </View>
+        <View style={Styles.rightSection}>
+          <TransactionAmountOrBadgeComponent />
+          {hasChevronRight && (
+            <Icon
+              name="chevronRightListItem"
+              color={designSystemBlue}
+              size={IOListItemVisualParams.chevronSize}
+            />
+          )}
+        </View>
+      </>
     );
+  };
+
+  return pipe(
+    onPress,
+    O.fromNullable,
+    O.fold(
+      () => (
+        <View
+          style={IOListItemStyles.listItem}
+          testID={testID}
+          accessible={true}
+          accessibilityLabel={accessibilityLabel}
+        >
+          <View style={IOListItemStyles.listItemInner}>
+            <ListItemTransactionContent />
+          </View>
+        </View>
+      ),
+      onPress => (
+        <PressableListItemBase
+          onPress={onPress}
+          testID={testID}
+          accessibilityLabel={accessibilityLabel}
+        >
+          <ListItemTransactionContent />
+        </PressableListItemBase>
+      )
+    )
+  );
 };
 
 const SkeletonComponent = () => (
-    <View style={IOListItemStyles.listItem} accessible={false}>
-        <View style={IOListItemStyles.listItemInner}>
-            <View style={{ marginRight: IOListItemVisualParams.iconMargin }}>
-                <Placeholder.Box
-                    animate="fade"
-                    height={IOVisualCostants.avatarSizeSmall}
-                    width={IOVisualCostants.avatarSizeSmall}
-                    radius={100}
-                />
-            </View>
-            <View style={IOStyles.flex}>
-                <Placeholder.Box animate="fade" radius={8} width={62} height={16} />
-                <VSpacer size={4} />
-                <Placeholder.Box animate="fade" radius={8} width={107} height={16} />
-            </View>
-            <View style={{ marginLeft: IOListItemVisualParams.iconMargin }}>
-                <Placeholder.Box animate="fade" radius={8} width={70} height={24} />
-            </View>
-        </View>
+  <View style={IOListItemStyles.listItem} accessible={false}>
+    <View style={IOListItemStyles.listItemInner}>
+      <View style={{ marginRight: IOListItemVisualParams.iconMargin }}>
+        <Placeholder.Box
+          animate="fade"
+          height={IOVisualCostants.avatarSizeSmall}
+          width={IOVisualCostants.avatarSizeSmall}
+          radius={100}
+        />
+      </View>
+      <View style={IOStyles.flex}>
+        <Placeholder.Box animate="fade" radius={8} width={62} height={16} />
+        <VSpacer size={4} />
+        <Placeholder.Box animate="fade" radius={8} width={107} height={16} />
+      </View>
+      <View style={{ marginLeft: IOListItemVisualParams.iconMargin }}>
+        <Placeholder.Box animate="fade" radius={8} width={70} height={24} />
+      </View>
     </View>
+  </View>
 );
 
 const Styles = StyleSheet.create({
-    rightSection: {
-        marginLeft: IOListItemVisualParams.iconMargin,
-        flexDirection: "row",
-        alignItems: "center",
-        height: "100%"
-    }
+  rightSection: {
+    marginLeft: IOListItemVisualParams.iconMargin,
+    flexDirection: "row",
+    alignItems: "center",
+    height: "100%"
+  }
 });

package/src/components/listitems/__test__/__snapshots__/listitem.test.tsx.snap

@@ -246,13 +246,6 @@ exports[`Test List Item Components ListItemInfo Snapshot 1`] = `
       >
         label
       </Text>
-      <View
-        style={
-          {
-            "height": 4,
-          }
-        }
-      />
       <Text
         color="black"
         defaultColor="black"
@@ -388,13 +381,6 @@ exports[`Test List Item Components ListItemInfoCopy Snapshot 1`] = `
         >
           label
         </Text>
-        <View
-          style={
-            {
-              "height": 4,
-            }
-          }
-        />
         <Text
           color="blueIO-500"
           defaultColor="black"

package/src/components/listitems/index.tsx

@@ -6,3 +6,6 @@ export * from "./ListItemNav";
 export * from "./ListItemNavAlert";
 export * from "./ListItemTransaction";
 export * from "./PressableListItemsBase";
+export * from "./ListItemSwitch";
+export * from "./ListItemCheckbox";
+export * from "./ListItemRadio";