diff --git a/src/app/Components/Swipeable/Swipeable.tests.tsx b/src/app/Components/Swipeable/Swipeable.tests.tsx new file mode 100644 index 00000000000..aef1785f41e --- /dev/null +++ b/src/app/Components/Swipeable/Swipeable.tests.tsx @@ -0,0 +1,27 @@ +import { Text } from "@artsy/palette-mobile" +import { screen, fireEvent } from "@testing-library/react-native" +import { Swipeable } from "app/Components/Swipeable/Swipeable" +import { renderWithWrappers } from "app/utils/tests/renderWithWrappers" + +describe("Swipeable Component", () => { + const mockAction = jest.fn() + + it("should render without crashing", () => { + renderWithWrappers() + + expect(screen.getByTestId("swipeable-component")).toBeOnTheScreen() + }) + + it("should call the action when the action component is pressed", () => { + renderWithWrappers() + + fireEvent.press(screen.getByText("Swipe Me")) + + expect(mockAction).toHaveBeenCalled() + }) +}) + +const mockProps = { + actionComponent: Swipe Me, + children: Swipeable Component, +} diff --git a/src/app/Components/Swipeable/Swipeable.tsx b/src/app/Components/Swipeable/Swipeable.tsx new file mode 100644 index 00000000000..12610194313 --- /dev/null +++ b/src/app/Components/Swipeable/Swipeable.tsx @@ -0,0 +1,65 @@ +import { Color, Flex, Touchable } from "@artsy/palette-mobile" +import { forwardRef, useCallback } from "react" +import ReanimatedSwipeable, { + SwipeableMethods, + SwipeableRef, +} from "react-native-gesture-handler/ReanimatedSwipeable" +import { SharedValue } from "react-native-reanimated" + +const FRICTION = 1.2 + +export interface SwipeableProps { + children: React.ReactNode + actionOnPress: () => void + actionComponent: React.ReactNode + actionBackground?: Color + swipeableProps?: SwipeableProps + enabled?: boolean +} + +export const Swipeable = forwardRef((props: SwipeableProps, swipeableRef: SwipeableRef) => { + const { + children, + actionOnPress, + actionComponent, + actionBackground = "red100", + enabled = true, + swipeableProps, + } = props + + const RightActions: ( + progress: SharedValue, + dragX: SharedValue, + swipable: SwipeableMethods + ) => React.ReactNode = useCallback(() => { + return ( + + + {actionComponent} + + + ) + }, [actionBackground, actionComponent, actionOnPress]) + + return ( + + {children} + + ) +})