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

package/src/components/layout/GradientScrollView.tsx

@@ -0,0 +1,167 @@
+import * as React from "react";
+import { useMemo } from "react";
+import Animated, {
+  Easing,
+  useAnimatedScrollHandler,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming
+} from "react-native-reanimated";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { WithTestID } from "../../utils/types";
+import {
+  IOVisualCostants,
+  buttonSolidHeight,
+  IOSpacer,
+  IOSpacingScale
+} from "../../core";
+import GradientBottomActions from "./GradientBottomActions";
+
+export type GradientScrollView = WithTestID<{
+  children: React.ReactNode;
+  excludeSafeAreaMargins?: boolean;
+  debugMode?: boolean;
+  // Accepted components: ButtonSolid, ButtonLink
+  // Don't use any components other than this, please.
+  primaryAction: React.ReactNode;
+  secondaryAction?: React.ReactNode;
+}>;
+
+// Extended gradient area above the actions
+export const gradientSafeArea: IOSpacingScale = 80;
+// End content margin before the actions
+const contentEndMargin: IOSpacingScale = 32;
+// Margin between primary action and secondary one
+const spaceBetweenActions: IOSpacer = 24;
+// Estimated height of the secondary action
+const secondaryActionEstHeight: number = 20;
+// Extra bottom margin for iPhone bottom handle
+const extraSafeAreaMargin: IOSpacingScale = 8;
+
+export const GradientScrollView = ({
+  children,
+  primaryAction,
+  secondaryAction,
+  // Don't include safe area insets
+  excludeSafeAreaMargins = false,
+  debugMode = false,
+  testID
+}: GradientScrollView) => {
+  const gradientOpacity = useSharedValue(1);
+  const insets = useSafeAreaInsets();
+
+  /* Check if the iPhone bottom handle is present.
+  If not, or if you don't need safe area insets,
+  add a default margin to prevent the button
+  from sticking to the bottom. */
+  const bottomMargin: number = useMemo(
+    () =>
+      insets.bottom === 0 || excludeSafeAreaMargins
+        ? IOVisualCostants.appMarginDefault
+        : insets.bottom,
+    [insets, excludeSafeAreaMargins]
+  );
+
+  /* When the secondary action is visible, add extra margin
+to avoid little space from iPhone bottom handle */
+  const extraBottomMargin: number = useMemo(
+    () => (secondaryAction && insets.bottom !== 0 ? extraSafeAreaMargin : 0),
+    [insets.bottom, secondaryAction]
+  );
+
+  /* Total height of actions */
+  const actionsArea: number = useMemo(
+    () =>
+      primaryAction && secondaryAction
+        ? buttonSolidHeight +
+          spaceBetweenActions +
+          secondaryActionEstHeight +
+          extraBottomMargin
+        : buttonSolidHeight,
+    [extraBottomMargin, primaryAction, secondaryAction]
+  );
+
+  /* Total height of "Actions + Gradient" area */
+  const gradientAreaHeight: number = useMemo(
+    () => bottomMargin + actionsArea + gradientSafeArea,
+    [actionsArea, bottomMargin]
+  );
+
+  /* Height of the safe bottom area, applied to the ScrollView:
+  Actions + Content end margin */
+  const safeBottomAreaHeight: number = useMemo(
+    () => bottomMargin + actionsArea + contentEndMargin,
+    [actionsArea, bottomMargin]
+  );
+
+  {
+    /* Safe background block. It's added because when
+    you swipe up quickly, the content below is visible
+    for about 100ms. Without this block, the content
+    appears glitchy. */
+  }
+
+  const safeBackgroundHeight = useMemo(
+    () =>
+      secondaryAction
+        ? spaceBetweenActions +
+          secondaryActionEstHeight +
+          extraBottomMargin +
+          bottomMargin
+        : bottomMargin,
+    [bottomMargin, extraBottomMargin, secondaryAction]
+  );
+
+  const handleScroll = useAnimatedScrollHandler(
+    ({ contentOffset, layoutMeasurement, contentSize }) => {
+      /* We use Math.floor because decimals used on Android
+      devices never change the `isEndReached` boolean value.
+      We have more consistent behavior across platforms
+      if we round these calculations ¯\_(ツ)_/¯ */
+      const isEndReached =
+        Math.floor(layoutMeasurement.height + contentOffset.y) >=
+        Math.floor(contentSize.height);
+
+      // eslint-disable-next-line functional/immutable-data
+      gradientOpacity.value = isEndReached ? 0 : 1;
+    }
+  );
+
+  const opacityTransition = useAnimatedStyle(() => ({
+    opacity: withTiming(gradientOpacity.value, {
+      duration: 200,
+      easing: Easing.ease
+    })
+  }));
+
+  return (
+    <>
+      <Animated.ScrollView
+        testID={testID}
+        onScroll={handleScroll}
+        scrollEventThrottle={16}
+        contentContainerStyle={{
+          paddingHorizontal: IOVisualCostants.appMarginDefault,
+          paddingBottom: safeBottomAreaHeight
+        }}
+      >
+        {children}
+      </Animated.ScrollView>
+      <GradientBottomActions
+        debugMode={debugMode}
+        primaryAction={primaryAction}
+        secondaryAction={secondaryAction}
+        transitionAnimStyle={opacityTransition}
+        dimensions={{
+          bottomMargin,
+          extraBottomMargin,
+          gradientAreaHeight,
+          spaceBetweenActions,
+          safeBackgroundHeight
+        }}
+      />
+    </>
+  );
+};
+
+export default GradientScrollView;

package/src/components/layout/HeaderFirstLevel.tsx

@@ -0,0 +1,76 @@
+import * as React from "react";
+import { View, StyleSheet } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { WithTestID } from "../../utils/types";
+import { IOStyles, IOVisualCostants, IOColors } from "../../core";
+import { H3 } from "../typography";
+import { HSpacer } from "../spacer";
+
+export type HeaderFirstLevel = WithTestID<{
+  title: string;
+  // Accepted components: IconButton
+  // Don't use any components other than this, please.
+  firstAction?: React.ReactNode;
+  secondAction?: React.ReactNode;
+  thirdAction?: React.ReactNode;
+}>;
+
+const HEADER_BG_COLOR: IOColors = "white";
+
+const styles = StyleSheet.create({
+  headerInner: {
+    paddingHorizontal: IOVisualCostants.appMarginDefault,
+    height: IOVisualCostants.headerHeight,
+    width: "100%",
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between"
+  }
+});
+
+export const HeaderFirstLevel = ({
+  title,
+  firstAction,
+  secondAction,
+  thirdAction,
+  testID
+}: HeaderFirstLevel) => {
+  const insets = useSafeAreaInsets();
+
+  return (
+    <View
+      style={{
+        paddingTop: insets.top,
+        backgroundColor: IOColors[HEADER_BG_COLOR]
+      }}
+      accessibilityRole="header"
+      testID={testID}
+    >
+      <View style={styles.headerInner}>
+        <H3 style={{ flexShrink: 1 }} numberOfLines={1}>
+          {title}
+        </H3>
+        <View style={[IOStyles.row, { flexShrink: 0 }]}>
+          {firstAction}
+          {secondAction && (
+            <>
+              {/* Ideally, with the "gap" flex property,
+              we can get rid of these ugly constructs */}
+              <HSpacer size={16} />
+              {secondAction}
+            </>
+          )}
+          {thirdAction && (
+            <>
+              {/* Same as above */}
+              <HSpacer size={16} />
+              {thirdAction}
+            </>
+          )}
+        </View>
+      </View>
+    </View>
+  );
+};
+
+export default HeaderFirstLevel;

package/src/components/layout/index.tsx

@@ -0,0 +1 @@
+export * from "./GradientBottomActions";

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;