feat(EMI-2095): Add Swipeable component (#10879)

* feat(EMI-2095): Add Swipeable component

* add tests

* style update

---------

Co-authored-by: Ole <[email protected]>

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(<Swipeable {...mockProps} actionOnPress={mockAction} />)
+
+    expect(screen.getByTestId("swipeable-component")).toBeOnTheScreen()
+  })
+
+  it("should call the action when the action component is pressed", () => {
+    renderWithWrappers(<Swipeable {...mockProps} actionOnPress={mockAction} />)
+
+    fireEvent.press(screen.getByText("Swipe Me"))
+
+    expect(mockAction).toHaveBeenCalled()
+  })
+})
+
+const mockProps = {
+  actionComponent: <Text>Swipe Me</Text>,
+  children: <Text>Swipeable Component</Text>,
+}

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<number>,
+    dragX: SharedValue<number>,
+    swipable: SwipeableMethods
+  ) => React.ReactNode = useCallback(() => {
+    return (
+      <Touchable haptic onPress={actionOnPress}>
+        <Flex
+          flex={1}
+          ml={1}
+          p={2}
+          bg={actionBackground}
+          justifyContent="center"
+          border="1px solid"
+          borderColor={actionBackground}
+          borderRadius={5}
+        >
+          {actionComponent}
+        </Flex>
+      </Touchable>
+    )
+  }, [actionBackground, actionComponent, actionOnPress])
+
+  return (
+    <ReanimatedSwipeable
+      testID="swipeable-component"
+      ref={swipeableRef}
+      enabled={enabled}
+      renderRightActions={RightActions}
+      friction={FRICTION}
+      {...swipeableProps}
+    >
+      {children}
+    </ReanimatedSwipeable>
+  )
+})