Refactoring sticky button

pagopa · Oct 31, 2023 · db6bf51 · db6bf51
1 parent ffa6559
commit db6bf51
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 24 deletions.
diff --git a/src/components/buttons/ButtonLink.tsx b/src/components/buttons/ButtonLink.tsx
@@ -28,8 +28,8 @@ import {
 import { HSpacer } from "../spacer/Spacer";
 import { buttonTextFontSize } from "../typography";
 
-type ColorButtonLink = "primary";
-export type ButtonLink = WithTestID<{
+export type ColorButtonLink = "primary";
+export type ButtonLinkProps = WithTestID<{
   color?: ColorButtonLink;
   label: string;
   disabled?: boolean;
@@ -51,7 +51,10 @@ type ColorStates = {
   };
 };
 
-const mapColorStates: Record<NonNullable<ButtonLink["color"]>, ColorStates> = {
+const mapColorStates: Record<
+  NonNullable<ButtonLinkProps["color"]>,
+  ColorStates
+> = {
   // Primary button
   primary: {
     label: {
@@ -64,7 +67,7 @@ const mapColorStates: Record<NonNullable<ButtonLink["color"]>, ColorStates> = {
 
 // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
 const mapLegacyColorStates: Record<
-  NonNullable<ButtonLink["color"]>,
+  NonNullable<ButtonLinkProps["color"]>,
   ColorStates
 > = {
   // Primary button
@@ -104,7 +107,7 @@ export const ButtonLink = React.memo(
     accessibilityLabel,
     accessibilityHint,
     testID
-  }: ButtonLink) => {
+  }: ButtonLinkProps) => {
     const isPressed = useSharedValue(0);
     const { isExperimental } = useIOExperimentalDesign();
 

diff --git a/src/components/buttons/ButtonSolid.tsx b/src/components/buttons/ButtonSolid.tsx
@@ -1,5 +1,6 @@
 import React, { useCallback } from "react";
 import { GestureResponderEvent, Pressable, StyleSheet } from "react-native";
+import ReactNativeHapticFeedback from "react-native-haptic-feedback";
 import Animated, {
   Extrapolate,
   interpolate,
@@ -9,11 +10,6 @@ import Animated, {
   useSharedValue,
   withSpring
 } from "react-native-reanimated";
-import ReactNativeHapticFeedback from "react-native-haptic-feedback";
-import { IOIconSizeScale, IOIcons, Icon } from "../icons";
-import { WithTestID } from "../../utils/types";
-import { HSpacer } from "../spacer/Spacer";
-import { ButtonText } from "../typography/ButtonText";
 import {
   IOButtonLegacyStyles,
   IOButtonStyles,
@@ -25,9 +21,13 @@ import {
   exitTransitionInnerContent,
   useIOExperimentalDesign
 } from "../../core";
+import { WithTestID } from "../../utils/types";
+import { IOIconSizeScale, IOIcons, Icon } from "../icons";
 import { LoadingSpinner } from "../loadingSpinner";
+import { HSpacer } from "../spacer/Spacer";
+import { ButtonText } from "../typography/ButtonText";
 
-type ButtonSolidColor = "primary" | "danger" | "contrast";
+export type ButtonSolidColor = "primary" | "danger" | "contrast";
 
 type ColorStates = {
   default: string;

diff --git a/src/components/layout/GradientBottomActions.tsx b/src/components/layout/GradientBottomActions.tsx
@@ -1,18 +1,20 @@
 import * as React from "react";
-import { View, StyleSheet, ViewStyle, StyleProp } from "react-native";
+import { StyleProp, StyleSheet, View, ViewStyle } from "react-native";
 import LinearGradient from "react-native-linear-gradient";
 import Animated from "react-native-reanimated";
+import { IOColors, IOSpacer, IOVisualCostants, hexToRgba } from "../../core";
 import { WithTestID } from "../../utils/types";
-import { IOColors, hexToRgba, IOSpacer, IOVisualCostants } from "../../core";
+import { ButtonLink, ButtonSolid } from "../buttons";
 import { VSpacer } from "../spacer";
+import { GradientBottomAction } from "./common";
 
 export type GradientBottomActions = WithTestID<{
   transitionAnimStyle: Animated.AnimateStyle<StyleProp<ViewStyle>>;
   dimensions: GradientBottomActionsDimensions;
   // Accepted components: ButtonSolid, ButtonLink
   // Don't use any components other than this, please.
-  primaryAction?: React.ReactNode;
-  secondaryAction?: React.ReactNode;
+  primaryAction?: GradientBottomAction;
+  secondaryAction?: GradientBottomAction;
   // Debug mode
   debugMode?: boolean;
 }>;
@@ -99,7 +101,12 @@ export const GradientBottomActions = ({
       ]}
     />
     <View style={styles.buttonContainer} pointerEvents="box-none">
-      {primaryAction}
+      {primaryAction &&
+        (primaryAction.type === "ButtonLink" ? (
+          <ButtonLink {...primaryAction.actionProps}></ButtonLink>
+        ) : (
+          <ButtonSolid {...primaryAction.actionProps}></ButtonSolid>
+        ))}
 
       {secondaryAction && (
         <View
@@ -109,7 +116,11 @@ export const GradientBottomActions = ({
           }}
         >
           <VSpacer size={dimensions.spaceBetweenActions} />
-          {secondaryAction}
+          {secondaryAction.type === "ButtonLink" ? (
+            <ButtonLink {...secondaryAction.actionProps}></ButtonLink>
+          ) : (
+            <ButtonSolid {...secondaryAction.actionProps}></ButtonSolid>
+          )}
         </View>
       )}
     </View>

diff --git a/src/components/layout/GradientScrollView.tsx b/src/components/layout/GradientScrollView.tsx
@@ -8,23 +8,24 @@ import Animated, {
   withTiming
 } from "react-native-reanimated";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { WithTestID } from "../../utils/types";
 import {
-  IOVisualCostants,
-  buttonSolidHeight,
   IOSpacer,
-  IOSpacingScale
+  IOSpacingScale,
+  IOVisualCostants,
+  buttonSolidHeight
 } from "../../core";
+import { WithTestID } from "../../utils/types";
 import GradientBottomActions from "./GradientBottomActions";
+import { GradientBottomAction } from "./common";
 
 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;
+  primaryAction: GradientBottomAction;
+  secondaryAction?: GradientBottomAction;
 }>;
 
 // Extended gradient area above the actions

diff --git a/src/components/layout/common.ts b/src/components/layout/common.ts
@@ -1,7 +1,19 @@
 import * as React from "react";
-import { IconButton } from "../buttons";
+import { ButtonLinkProps, ButtonSolidProps, IconButton } from "../buttons";
 
 export type ActionProp = Pick<
   React.ComponentProps<typeof IconButton>,
   "icon" | "onPress" | "accessibilityLabel" | "accessibilityHint" | "testID"
 >;
+
+interface ButtonLinkAction {
+  type: "ButtonLink";
+  actionProps: ButtonLinkProps;
+}
+
+interface ButtonSolidAction {
+  type: "ButtonSolid";
+  actionProps: ButtonSolidProps;
+}
+
+export type GradientBottomAction = ButtonLinkAction | ButtonSolidAction;