@pagopa/io-app-design-system 1.17.0 → 1.17.2

package/src/components/layout/ForceScrollDownView.tsx

@@ -0,0 +1,210 @@
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import {
+  LayoutChangeEvent,
+  NativeScrollEvent,
+  NativeSyntheticEvent,
+  ScrollView,
+  ScrollViewProps,
+  StyleSheet
+} from "react-native";
+import { ScaleInOutAnimation } from "../common/ScaleInOutAnimation";
+import { IOSpringValues, IOVisualCostants } from "../../core";
+import { IconButtonSolid } from "../buttons";
+
+type ForceScrollDownViewProps = {
+  /**
+   * The content to display inside the scroll view.
+   */
+  children: React.ReactNode;
+  /**
+   * The distance from the bottom of the scrollable content at which the "scroll to bottom" button
+   * should become hidden. Defaults to 100.
+   */
+  threshold?: number;
+  /**
+   * A callback that will be called whenever the scroll view crosses the threshold. The callback
+   * is passed a boolean indicating whether the threshold has been crossed (`true`) or not (`false`).
+   */
+  onThresholdCrossed?: (crossed: boolean) => void;
+} & Pick<
+  ScrollViewProps,
+  "style" | "contentContainerStyle" | "scrollEnabled" | "testID"
+>;
+
+/**
+ * A React Native component that displays a scroll view with a button that scrolls to the bottom of the content
+ * when pressed. The button is hidden when the scroll view reaches a certain threshold from the bottom, which is
+ * configurable by the `threshold` prop. The button, and the scrolling, can also be disabled by setting the
+ * `scrollEnabled` prop to `false`.
+ */
+const ForceScrollDownView = ({
+  children,
+  threshold = 100,
+  style,
+  contentContainerStyle,
+  scrollEnabled = true,
+  onThresholdCrossed
+}: ForceScrollDownViewProps) => {
+  const scrollViewRef = useRef<ScrollView>(null);
+
+  /**
+   * The height of the scroll view, used to determine whether or not the scrollable content fits inside
+   * the scroll view and whether the "scroll to bottom" button should be displayed.
+   */
+  const [scrollViewHeight, setScrollViewHeight] = useState<number>();
+
+  /**
+   * The height of the scrollable content, used to determine whether or not the "scroll to bottom" button
+   * should be displayed.
+   */
+  const [contentHeight, setContentHeight] = useState<number>();
+
+  /**
+   * Whether or not the scroll view has crossed the threshold from the bottom.
+   */
+  const [isThresholdCrossed, setThresholdCrossed] = useState(false);
+
+  /**
+   * Whether or not the "scroll to bottom" button should be visible. This is controlled by the threshold
+   * and the current scroll position.
+   */
+  const [isButtonVisible, setButtonVisible] = useState(true);
+
+  /**
+   * A callback that is called whenever the scroll view is scrolled. It checks whether or not the
+   * scroll view has crossed the threshold from the bottom and updates the state accordingly.
+   * The callback is designed to updatr button visibility only when crossing the threshold.
+   */
+  const handleScroll = useCallback(
+    (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+      const { layoutMeasurement, contentOffset, contentSize } =
+        event.nativeEvent;
+
+      const thresholdCrossed =
+        layoutMeasurement.height + contentOffset.y >=
+        contentSize.height - threshold;
+
+      setThresholdCrossed(previousState => {
+        if (!previousState && thresholdCrossed) {
+          setButtonVisible(false);
+        }
+        if (previousState && !thresholdCrossed) {
+          setButtonVisible(true);
+        }
+        return thresholdCrossed;
+      });
+    },
+    [threshold]
+  );
+
+  /**
+   * A side effect that calls the `onThresholdCrossed` callback whenever the value of `isThresholdCrossed` changes.
+   */
+  useEffect(() => {
+    onThresholdCrossed?.(isThresholdCrossed);
+  }, [onThresholdCrossed, isThresholdCrossed]);
+
+  /**
+   * A callback that is called whenever the size of the scrollable content changes. It updates the
+   * state with the new content height.
+   */
+  const handleContentSizeChange = useCallback(
+    (_contentWidth: number, contentHeight: number) => {
+      setContentHeight(contentHeight);
+    },
+    []
+  );
+
+  /**
+   * A callback that is called whenever the size of the scroll view changes. It updates the state
+   * with the new scroll view height.
+   */
+  const handleLayout = useCallback((event: LayoutChangeEvent) => {
+    setScrollViewHeight(event.nativeEvent.layout.height);
+  }, []);
+
+  /**
+   * A callback that is called when the "scroll to bottom" button is pressed. It scrolls the
+   * scroll view to the bottom and hides the button.
+   */
+  const handleScrollDownPress = useCallback(() => {
+    setButtonVisible(false);
+    scrollViewRef.current?.scrollToEnd();
+  }, [scrollViewRef]);
+
+  /**
+   * Whether or not the "scroll to bottom" button needs to be displayed. It is only displayed
+   * when the scrollable content cannot fit inside the scroll view and the button is enabled
+   * (`scrollEnabled` is `true`).
+   */
+  const needsScroll = useMemo(
+    () =>
+      scrollViewHeight != null &&
+      contentHeight != null &&
+      scrollViewHeight < contentHeight,
+    [scrollViewHeight, contentHeight]
+  );
+
+  /**
+   * Whether or not to render the "scroll to bottom" button. It is only rendered when the scroll view
+   * is enabled, needs to be scrolled, and the button is visible (`isButtonVisible` is `true`).
+   */
+  const shouldRenderScrollButton =
+    scrollEnabled && needsScroll && isButtonVisible;
+
+  /**
+   * The "scroll to bottom" button component. It is wrapped in a reanimated view and has enter and exit
+   * animations applied to it.
+   */
+  const scrollDownButton = (
+    <ScaleInOutAnimation
+      springConfig={IOSpringValues.button}
+      style={styles.scrollDownButton}
+      visible={shouldRenderScrollButton}
+    >
+      <IconButtonSolid
+        testID={"ScrollDownButton"}
+        accessibilityLabel="Scroll to bottom"
+        icon="arrowBottom"
+        onPress={handleScrollDownPress}
+      />
+    </ScaleInOutAnimation>
+  );
+
+  return (
+    <>
+      <ScrollView
+        testID={"ScrollView"}
+        ref={scrollViewRef}
+        scrollIndicatorInsets={{ right: 1 }}
+        scrollEnabled={scrollEnabled}
+        onScroll={handleScroll}
+        scrollEventThrottle={400}
+        style={style}
+        onLayout={handleLayout}
+        onContentSizeChange={handleContentSizeChange}
+        contentContainerStyle={contentContainerStyle}
+      >
+        {children}
+      </ScrollView>
+      {scrollDownButton}
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  scrollDownButton: {
+    position: "absolute",
+    zIndex: 10,
+    right: IOVisualCostants.scrollDownButtonRight,
+    bottom: IOVisualCostants.scrollDownButtonBottom
+  }
+});
+
+export { ForceScrollDownView };

package/src/components/layout/HeaderFirstLevel.tsx

@@ -85,7 +85,7 @@ export const HeaderFirstLevel = ({
         <H3
           style={{ flexShrink: 1 }}
           numberOfLines={1}
-          color={backgroundColor === "dark" ? "white" : undefined}
+          color={backgroundColor === "dark" ? "white" : "black"}
         >
           {title}
         </H3>
@@ -94,7 +94,7 @@ export const HeaderFirstLevel = ({
             <>
               <IconButton
                 {...thirdAction}
-                color={backgroundColor === "dark" ? "contrast" : "neutral"}
+                color={backgroundColor === "dark" ? "contrast" : "primary"}
               />
               {/* Ideally, with the "gap" flex property,
               we can get rid of these ugly constructs */}
@@ -105,7 +105,7 @@ export const HeaderFirstLevel = ({
             <>
               <IconButton
                 {...secondAction}
-                color={backgroundColor === "dark" ? "contrast" : "neutral"}
+                color={backgroundColor === "dark" ? "contrast" : "primary"}
               />
               {/* Same as above */}
               <HSpacer size={16} />
@@ -114,7 +114,7 @@ export const HeaderFirstLevel = ({
           {type !== "base" && (
             <IconButton
               {...firstAction}
-              color={backgroundColor === "dark" ? "contrast" : "neutral"}
+              color={backgroundColor === "dark" ? "contrast" : "primary"}
             />
           )}
         </View>

package/src/components/layout/__test__/ForceScrollDownView.test.tsx

@@ -0,0 +1,106 @@
+/* eslint-disable functional/immutable-data */
+import { fireEvent, render } from "@testing-library/react-native";
+import React from "react";
+import { Text } from "react-native";
+import { ForceScrollDownView } from "../ForceScrollDownView";
+
+const tContent = "Some content";
+
+describe("ForceScrollDownView", () => {
+  jest.useFakeTimers();
+
+  it("should match snapshot", () => {
+    const tChildren = <Text>{tContent}</Text>;
+
+    const component = render(
+      <ForceScrollDownView>{tChildren}</ForceScrollDownView>
+    );
+
+    expect(component).toMatchSnapshot();
+  });
+
+  it("renders the content correctly", () => {
+    const tChildren = <Text>{tContent}</Text>;
+
+    const { getByText } = render(
+      <ForceScrollDownView>{tChildren}</ForceScrollDownView>
+    );
+
+    expect(getByText(tContent)).toBeDefined();
+  });
+
+  it("displays the scroll down button when necessary", async () => {
+    const tChildren = <Text>{tContent}</Text>;
+
+    const tScreenHeight = 1000;
+
+    const { getByTestId, queryByTestId } = render(
+      <ForceScrollDownView>{tChildren}</ForceScrollDownView>
+    );
+
+    const scrollView = getByTestId("ScrollView");
+
+    // Update scroll view height
+    fireEvent(scrollView, "layout", {
+      nativeEvent: {
+        layout: {
+          height: tScreenHeight
+        }
+      }
+    });
+
+    // Update scroll view content height
+    fireEvent(scrollView, "contentSizeChange", null, tScreenHeight - 500);
+
+    // Button should not be visible because content does not need scrolling
+    const buttonBefore = queryByTestId("ScrollDownButton");
+    expect(buttonBefore).toBeNull();
+
+    // Increase content height to force button to be shown
+    fireEvent(scrollView, "contentSizeChange", null, tScreenHeight + 500);
+
+    jest.advanceTimersByTime(500);
+
+    // Button should be visible now beacuse content needs scrolling
+    const buttonAfter = queryByTestId("ScrollDownButton");
+    expect(buttonAfter).not.toBeNull();
+  });
+
+  it("scrolls to the bottom when the button is pressed", () => {
+    const tChildren = <Text>{tContent}</Text>;
+
+    const tScreenHeight = 1000;
+
+    const { getByTestId, queryByTestId } = render(
+      <ForceScrollDownView>{tChildren}</ForceScrollDownView>
+    );
+
+    const scrollView = getByTestId("ScrollView");
+
+    // Update scroll view height
+    fireEvent(scrollView, "layout", {
+      nativeEvent: {
+        layout: {
+          height: tScreenHeight
+        }
+      }
+    });
+
+    // Update scroll view content height
+    fireEvent(scrollView, "contentSizeChange", null, tScreenHeight + 500);
+
+    // Button should be visible
+    const buttonBefore = getByTestId("ScrollDownButton");
+    expect(buttonBefore).not.toBeNull();
+
+    // Fire button press event
+    fireEvent.press(buttonBefore);
+
+    // Wait for the scroll animation
+    jest.advanceTimersByTime(500);
+
+    // Button should not be visible after scrolling
+    const buttonAfter = queryByTestId("ScrollDownButton");
+    expect(buttonAfter).toBeNull();
+  });
+});

package/src/components/layout/__test__/__snapshots__/ForceScrollDownView.test.tsx.snap

@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ForceScrollDownView should match snapshot 1`] = `
+<RCTScrollView
+  onContentSizeChange={[Function]}
+  onLayout={[Function]}
+  onScroll={[Function]}
+  scrollEnabled={true}
+  scrollEventThrottle={400}
+  scrollIndicatorInsets={
+    {
+      "right": 1,
+    }
+  }
+  testID="ScrollView"
+>
+  <View>
+    <Text>
+      Some content
+    </Text>
+  </View>
+</RCTScrollView>
+`;

package/src/components/layout/index.tsx

@@ -3,5 +3,6 @@ export * from "./GradientScrollView";
 export * from "./GradientBottomActions";
 export * from "./HeaderFirstLevel";
 export * from "./HeaderSecondLevel";
+export * from "./ForceScrollDownView";
 export * from "./FooterWithButtons";
 export * from "./BlockButtons";

package/src/components/modules/ModuleCheckout.tsx

@@ -10,18 +10,25 @@ import { PressableModuleBase } from "./PressableModuleBase";
 
 // ---------------- types ----------------
 
-export type ModuleCheckoutProps = { ctaText: string } & (
+type ModuleCheckoutPartialProps =
   | {
+      isLoading?: false;
       paymentLogo?: IOLogoPaymentType;
       title: string;
       subtitle: string;
-      isLoading?: false;
-      onPress?: () => void;
+      onPress: () => void;
     }
   | {
       isLoading: true;
-    }
-);
+      paymentLogo?: never;
+      title?: never;
+      subtitle?: never;
+      onPress?: never;
+    };
+
+export type ModuleCheckoutProps = {
+  ctaText: string;
+} & ModuleCheckoutPartialProps;
 
 type CtaOnlyProps = { text?: string };
 

package/src/components/numberpad/NumberButton.tsx

@@ -13,8 +13,7 @@ import {
   IOColors,
   IONumberPadButtonStyles,
   IOScaleValues,
-  IOSpringValues,
-  useIOExperimentalDesign
+  IOSpringValues
 } from "../../core";
 import { H3 } from "../typography";
 
@@ -45,30 +44,12 @@ const colorMap: Record<NumberButtonVariantType, ColorMapVariant> = {
   }
 };
 
-const legacyColorMap: Record<NumberButtonVariantType, ColorMapVariant> = {
-  light: {
-    background: "grey-50",
-    pressed: "grey-200",
-    foreground: "blue"
-  },
-  dark: {
-    background: "blue",
-    pressed: "blue-600",
-    foreground: "white"
-  }
-};
-
 export const NumberButton = ({
   number,
   variant,
   onPress
 }: NumberButtonProps) => {
-  const { isExperimental } = useIOExperimentalDesign();
-
-  const colors = useMemo(
-    () => (isExperimental ? colorMap[variant] : legacyColorMap[variant]),
-    [variant, isExperimental]
-  );
+  const colors = useMemo(() => colorMap[variant], [variant]);
   const isPressed = useSharedValue(0);
   // Scaling transformation applied when the button is pressed
   const animationScaleValue = IOScaleValues?.basicButton?.pressedState;

package/src/components/numberpad/NumberPad.tsx

@@ -74,9 +74,12 @@ export const NumberPad = ({
   }) => (
     <View
       style={[
-        IOStyles.flex,
         IOStyles.rowSpaceBetween,
-        { justifyContent: "space-between", alignItems: "center" }
+        {
+          justifyContent: "space-between",
+          alignItems: "center",
+          flexGrow: 1
+        }
       ]}
     >
       {buttons.map(elem => {

package/src/components/textInput/TextInputBase.tsx

@@ -317,6 +317,7 @@ export const TextInputBase = ({
          * translate to top on focus
          */}
         <Animated.View
+          pointerEvents={"none"}
           style={[styles.textInputLabelWrapper, icon ? { left: 32 } : {}]}
         >
           <Animated.Text

package/src/components/toast/ToastProvider.tsx

@@ -7,12 +7,12 @@ import Animated, {
   SlideInUp,
   SlideOutUp
 } from "react-native-reanimated";
-import { Dismissable } from "../layout/Dismissable";
 import { triggerHaptic } from "../../functions";
+import { Dismissable } from "../layout/Dismissable";
 import { ToastNotification } from "./ToastNotification";
+import { ToastContext } from "./context";
 import { Toast } from "./types";
 import { IOToastRef, useIOToast } from "./useIOToast";
-import { ToastContext } from "./context";
 
 /**
  * The maximum number of toasts that can be displayed at the same time
@@ -67,7 +67,16 @@ export const ToastProvider = ({ children }: ToastProviderProps) => {
 
   const addToast = React.useCallback((toast: Toast): number => {
     const id = (toastId.current ?? 0) + 1;
-    setToasts(prevToasts => [{ id, ...toast }, ...prevToasts]);
+    // eslint-disable-next-line functional/immutable-data
+    toastId.current = id;
+    setToasts(prevToasts => {
+      if (prevToasts.length >= MAX_TOAST_STACK_SIZE) {
+        const mostRecentToasts = prevToasts.slice(0, -1);
+        return [{ id, ...toast }, ...mostRecentToasts];
+      }
+
+      return [{ id, ...toast }, ...prevToasts];
+    });
 
     setTimeout(() => {
       setToasts(prevToasts => prevToasts.filter(t => t.id !== id));
@@ -84,20 +93,6 @@ export const ToastProvider = ({ children }: ToastProviderProps) => {
     setToasts(prevToasts => prevToasts.filter(t => t.id !== id));
   }, []);
 
-  const removeToastAtIndex = (index: number) => {
-    setToasts(prevToasts => [
-      ...prevToasts.slice(0, index),
-      ...prevToasts.slice(index + 1)
-    ]);
-  };
-
-  // If stack size exceed the maximum, remove the oldest toast
-  React.useEffect(() => {
-    if (toasts.length > MAX_TOAST_STACK_SIZE) {
-      removeToastAtIndex(MAX_TOAST_STACK_SIZE);
-    }
-  }, [toasts]);
-
   const removeAllToasts = React.useCallback(() => {
     setToasts([]);
   }, []);

package/src/core/IOSpacing.ts

@@ -28,8 +28,10 @@ export const IOSpacer: ReadonlyArray<IOSpacer> = [
 ] as const;
 
 // Margin values used in the new `<ContentWrapper>` component
-export type IOAppMargin = Extract<IOSpacingScale, 8 | 16 | 24 | 32>;
-export const IOAppMargin: ReadonlyArray<IOAppMargin> = [8, 16, 24, 32] as const;
+export type IOAppMargin = Extract<IOSpacingScale, 8 | 16 | 24 | 32 | 48>;
+export const IOAppMargin: ReadonlyArray<IOAppMargin> = [
+  8, 16, 24, 32, 48
+] as const;
 
 // Values used in the `<Alert>` component
 export type IOAlertSpacing = Extract<IOSpacingScale, 16 | 24>;

package/src/core/IOStyles.ts

@@ -22,6 +22,8 @@ interface IOVisualCostants {
   avatarSizeSmall: number;
   avatarSizeMedium: number;
   iconContainedSizeDefault: number;
+  scrollDownButtonRight: number;
+  scrollDownButtonBottom: number;
 }
 
 export const IOVisualCostants: IOVisualCostants = {
@@ -29,7 +31,9 @@ export const IOVisualCostants: IOVisualCostants = {
   headerHeight: 56,
   avatarSizeSmall: 44,
   avatarSizeMedium: 66,
-  iconContainedSizeDefault: 44
+  iconContainedSizeDefault: 44,
+  scrollDownButtonRight: 24,
+  scrollDownButtonBottom: 24
 };
 
 export const IOStyles = StyleSheet.create({