fix(cell): fix swipe group press error

.changeset/brave-drinks-drum.md

@@ -0,0 +1,5 @@
+---
+"@equinor/mad-components": patch
+---
+
+Prevent Cell errors by replacing `SwipeableWithContext` with `Swipeable.

apps/chronicles/screens/dfw/dfwcomponents/WorkOrderCellScreen.tsx

@@ -3,7 +3,6 @@ import { EDSStyleSheet, Spacer, Typography, useStyles } from "@equinor/mad-compo
 import { WorkOrderCell } from "@equinor/mad-dfw";
 import { View } from "react-native";
 import { ScrollView } from "react-native-gesture-handler";
-import { SwipeableMethods } from "@equinor/mad-components/dist/components/_internal/SwipeableWithContext";
 
 export const WorkOrderCellScreen = () => {
     const [bookmarked, setBookmarked] = useState(false);

packages/components/__tests__/Cell.spec.tsx

@@ -1,7 +1,7 @@
 import { fireEvent, render, screen } from "@testing-library/react-native";
 import React from "react";
 import { Cell } from "../src/components/Cell/Cell";
-import { SwipeableMethods } from "../src/components/_internal/SwipeableWithContext";
+import { SwipeableMethods } from "../src/components/Cell/types";
 describe("Cell", () => {
     /**
      * Note: This test doesn't test if the methods are correct. That's an impossible task for a unit test. In fact, the methods log errors in this test.
@@ -53,15 +53,15 @@ describe("Cell", () => {
         const right = screen.getByText("RIGHT BUTTON");
 
         fireEvent(left, "press");
-        expect(close).toBeCalledTimes(1);
-        expect(openLeft).toBeCalledTimes(1);
-        expect(openRight).toBeCalledTimes(1);
-        expect(reset).toBeCalledTimes(1);
+        expect(close).toHaveBeenCalledTimes(1);
+        expect(openLeft).toHaveBeenCalledTimes(1);
+        expect(openRight).toHaveBeenCalledTimes(1);
+        expect(reset).toHaveBeenCalledTimes(1);
 
         fireEvent(right, "press");
-        expect(close).toBeCalledTimes(2);
-        expect(openLeft).toBeCalledTimes(2);
-        expect(openRight).toBeCalledTimes(2);
-        expect(reset).toBeCalledTimes(2);
+        expect(close).toHaveBeenCalledTimes(2);
+        expect(openLeft).toHaveBeenCalledTimes(2);
+        expect(openRight).toHaveBeenCalledTimes(2);
+        expect(reset).toHaveBeenCalledTimes(2);
     });
 });

packages/components/src/components/Cell/Cell.tsx

@@ -1,15 +1,14 @@
-import React, { ReactNode, forwardRef, useContext } from "react";
+import React, { ReactNode, forwardRef, useContext, useMemo, useRef } from "react";
 import { View, ViewProps } from "react-native";
-import { TouchableWithoutFeedback } from "react-native-gesture-handler";
+import { Swipeable, TouchableWithoutFeedback } from "react-native-gesture-handler";
 import Animated from "react-native-reanimated";
 import { useStyles } from "../../hooks/useStyles";
 import { EDSStyleSheet } from "../../styling";
 import { useFadeAnimation } from "../../styling/animations";
 import { PressableHighlight } from "../PressableHighlight";
-import { SwipeableWithContext } from "../_internal/SwipeableWithContext";
 import { CellGroupContext, CellGroupContextType } from "./CellGroup";
 import { CellSwipeItem } from "./CellSwipeItem";
-import { CellSwipeItemProps } from "./types";
+import { CellSwipeItemProps, SwipeableMethods } from "./types";
 
 export type AdditionalSurfaceProps = {
     /**
@@ -72,9 +71,19 @@ export const Cell = forwardRef<View, React.PropsWithChildren<CellProps>>(
         const { isFirstCell, isLastCell } = useContext(CellGroupContext);
         const { handlePressIn, handlePressOut, animatedStyle } = useFadeAnimation();
         const styles = useStyles(themeStyle, { isFirstCell, isLastCell });
-
+        const swipeableRef = useRef<Swipeable>(null);
         const swipeable = !!leftSwipeGroup || !!rightSwipeGroup;
 
+        const swipeableMethods: SwipeableMethods = useMemo(
+            () => ({
+                close: () => swipeableRef.current?.close(),
+                openLeft: () => swipeableRef.current?.openLeft(),
+                openRight: () => swipeableRef.current?.openRight(),
+                reset: () => swipeableRef.current?.reset(),
+            }),
+            [swipeableRef],
+        );
+
         const cellContent = () => (
             <>
                 <View style={styles.contentContainer}>
@@ -135,25 +144,34 @@ export const Cell = forwardRef<View, React.PropsWithChildren<CellProps>>(
         );
 
         return swipeable ? (
-            <SwipeableWithContext
+            <Swipeable
+                ref={swipeableRef}
                 key={`${leftSwipeGroup?.length}-${rightSwipeGroup?.length}`}
                 overshootFriction={8}
                 containerStyle={{
                     backgroundColor: styles.container.backgroundColor,
                 }}
                 renderLeftActions={() =>
                     leftSwipeGroup?.map((swipeItem, index) => (
-                        <CellSwipeItem key={`leftSwipeItem_${index}`} {...swipeItem} />
+                        <CellSwipeItem
+                            key={`leftSwipeItem_${index}`}
+                            swipeableMethods={swipeableMethods}
+                            {...swipeItem}
+                        />
                     ))
                 }
                 renderRightActions={() =>
                     rightSwipeGroup?.map((swipeItem, index) => (
-                        <CellSwipeItem key={`rightSwipeItem_${index}`} {...swipeItem} />
+                        <CellSwipeItem
+                            key={`rightSwipeItem_${index}`}
+                            swipeableMethods={swipeableMethods}
+                            {...swipeItem}
+                        />
                     ))
                 }
             >
                 {renderCell()}
-            </SwipeableWithContext>
+            </Swipeable>
         ) : (
             renderCell()
         );

packages/components/src/components/Cell/CellSwipeItem.tsx

@@ -4,15 +4,22 @@ import { EDSColor, EDSStyleSheet } from "../../styling";
 import { Icon } from "../Icon";
 import { PressableHighlight } from "../PressableHighlight";
 import { Typography } from "../Typography";
-import { useSwipeableMethods } from "../_internal/SwipeableWithContext";
-import { CellSwipeItemProps } from "./types";
+import { CellSwipeItemProps, SwipeableMethods } from "./types";
 
-export const CellSwipeItem = ({ title, iconName, color, onPress }: CellSwipeItemProps) => {
+export const CellSwipeItem = ({
+    title,
+    iconName,
+    color,
+    swipeableMethods,
+    onPress,
+}: CellSwipeItemProps & { swipeableMethods?: SwipeableMethods }) => {
     const styles = useStyles(themeStyles, { color });
-    const swipeableMethods = useSwipeableMethods();
 
     return (
-        <PressableHighlight style={styles.container} onPress={() => onPress?.(swipeableMethods)}>
+        <PressableHighlight
+            style={styles.container}
+            onPress={() => swipeableMethods && onPress?.(swipeableMethods)}
+        >
             {iconName && (
                 <Icon name={iconName} style={styles.textStyle} size={title ? undefined : 28} />
             )}

packages/components/src/components/Cell/types.ts

@@ -1,7 +1,13 @@
-import { SwipeableMethods } from "../_internal/SwipeableWithContext";
 import { EDSColor } from "../../styling";
 import { IconName } from "../Icon";
 
+export type SwipeableMethods = {
+    close: () => void;
+    openLeft: () => void;
+    openRight: () => void;
+    reset: () => void;
+};
+
 type BaseCellSwipeItemProps = {
     /**
      * The color of the swipe item.