Added 'closeOnPress' to SwipeableItemButton (#694)

* Added 'closeOnPress' to SwipeableItemButton

* Update how 'closeOnPress' is checked

* Removed async from debouncing tests

Author: YoussefHenna

packages/core/src/__tests__/Debouncing.test.tsx

@@ -15,7 +15,7 @@ beforeEach(() => jest.clearAllMocks());
 describe("Text Input debouncing test", () => {
   test.each([200, 500, 1000])(
     "should onChangeTextDelayed be called once with %s delay in TextInput",
-    async (delay) => {
+    (delay) => {
       const Wrapper: React.FC = () => {
         const [value, setValue] = React.useState("");
         return (
@@ -29,13 +29,13 @@ describe("Text Input debouncing test", () => {
       };
 
       render(<Wrapper />);
-      await testDebounce("first", "second", "", delay);
+      testDebounce("first", "second", "", delay);
     }
   );
 
   test.each([200, 500, 1000])(
     "should onChangeTextDelayed be called once with %s delay in TextField",
-    async (delay) => {
+    (delay) => {
       const Wrapper: React.FC = () => {
         const [value, setValue] = React.useState("");
         return (
@@ -52,13 +52,13 @@ describe("Text Input debouncing test", () => {
       };
 
       render(<Wrapper />);
-      await testDebounce("first", "second", "", delay);
+      testDebounce("first", "second", "", delay);
     }
   );
 
   test.each([200, 500, 1000])(
     "should onChangeTextDelayed be called once with %s delay in NumberInput",
-    async (delay) => {
+    (delay) => {
       const Wrapper: React.FC = () => {
         const [value, setValue] = React.useState<number | undefined>(0);
         return (
@@ -72,18 +72,18 @@ describe("Text Input debouncing test", () => {
       };
 
       render(<Wrapper />);
-      await testDebounce(1, 23, 0, delay);
+      testDebounce(1, 23, 0, delay);
     }
   );
 });
 
-async function testDebounce(
+function testDebounce(
   valueOne: string | number,
   valueTwo: string | number,
   initialValue: string | number,
   delay: number
 ) {
-  const textInput = await screen.findByTestId("native-text-input");
+  const textInput = screen.getByTestId("native-text-input");
 
   act(() => fireEvent.changeText(textInput, valueOne));
   act(() => fireEvent.changeText(textInput, valueTwo));

packages/core/src/components/SwipeableItem/SwipeableItem.tsx

@@ -96,6 +96,8 @@ const SwipeableItem: React.FC<React.PropsWithChildren<Props>> = ({
   const { onStartSwiping, onStopSwiping } =
     React.useContext(SwipeableListContext);
 
+  const swipeableRef = React.useRef<any>(null);
+
   const { viewStyles, textStyles } = extractStyles(style);
 
   const { borderStyles, marginStyles } =
@@ -176,7 +178,12 @@ const SwipeableItem: React.FC<React.PropsWithChildren<Props>> = ({
   const renderBehindItem = (item: SwipeableItemBehindItem, index: number) => (
     <Pressable
       key={index.toString()}
-      onPress={(item as any).onPress}
+      onPress={() => {
+        item.onPress?.();
+        if (item.closeOnPress !== false) {
+          swipeableRef.current?.closeRow();
+        }
+      }}
       style={[
         styles.buttonContainer,
         { backgroundColor: item.backgroundColor || theme.colors.primary },
@@ -211,6 +218,7 @@ const SwipeableItem: React.FC<React.PropsWithChildren<Props>> = ({
     >
       {/*@ts-ignore*/}
       <SwipeRow
+        ref={swipeableRef}
         leftOpenValue={
           isRightSwipeHandled ? 0 : leftOpenValue || defaultLeftOpenValue //If in swiping mode, don't keep open
         }

packages/core/src/components/SwipeableItem/SwipeableItemCommon.ts

@@ -5,6 +5,7 @@ export interface SwipeableItemBehindItem {
   revealSwipeDirection: "left" | "right";
   onPress?: () => void;
   onSwipe?: () => void;
+  closeOnPress?: boolean;
   icon?: string;
   iconSize?: number;
   backgroundColor?: string;
@@ -53,7 +54,7 @@ export function extractLeftSwipeProps(object: object): LeftSwipeProps {
 
 export function rightSwipeToSwipeableItemBehindItem(
   swipe: RightSwipeProps
-): Omit<SwipeableItemBehindItem, "onPress"> {
+): Omit<SwipeableItemBehindItem, "onPress" | "closeOnPress"> {
   return {
     title: swipe.rightSwipeTitle || "",
     revealSwipeDirection: "right",
@@ -67,7 +68,7 @@ export function rightSwipeToSwipeableItemBehindItem(
 
 export function leftSwipeToSwipeableItemBehindItem(
   swipe: LeftSwipeProps
-): Omit<SwipeableItemBehindItem, "onPress"> {
+): Omit<SwipeableItemBehindItem, "onPress" | "closeOnPress"> {
   return {
     title: swipe.leftSwipeTitle || "",
     revealSwipeDirection: "left",