Merge pull request #12 from GFean/release-2.3.0-changes

feat(closeanyopenrows): close any open rows functionality

README.md

@@ -96,19 +96,57 @@ All the SwipeableProps can be passed under SwipeableProps prop to SwipeableFlatl
     }}
 >
 ```
-### renderLeftActions
+### renderLeftActions: ((item: any) => React.ReactNode) | undefined
 
 A function that returns the component to render as left swipe actions for each item. This is actually a SwipeableProp, but for the simplicity, as you will mostly using left/right actions, it can be passed directly to the SwipeableFlatList.
 
-### renderRightActions
+### renderRightActions: ((item: any) => React.ReactNode) | undefined
 
 Similarly to the one above, this is the function that returns the component to render as right swipe actions for each item.
 This is also a SwipeableProp, but for the simplicity, as you will mostly using left/right actions, it can be passed directly to the SwipeableFlatList.
 
-### enableOpenMultipleRows
+### enableOpenMultipleRows:boolean
 
 This is the prop to enable/disable multiple rows being opened. if enabled you can swipe multiple rows and they'll stay open, if disabled - only one row can be opened at a time and the previous one will be closed if you open the new one. Defaults to ```true```. 
 (please note, that when you'll alter this prop, you'll need to reinitialize the list - simply refresh the js bundle and the changes will be applied)
+
+### ref: SwipeableFlatListRef
+The ref is passed to the base ```Flatlist``` component and you can access all the native api available methods through this. Special interface  ```SwipeableFlatListRef ``` will add a custom module related function to this  ```ref ``` which is   ```closeAnyOpenRows  ``` - see the description below.
+
+## Methods
+
+### closeAnyOpenRows: () => void
+SwipeableFlatList provides a method `closeAnyExistingRows()` accessible via a ref to the component. This method can be used to programmatically close any opened rows:
+
+- **When `enableOpenMultipleRows` is true**: The method closes all swipeable rows that are currently open.
+- **When `enableOpenMultipleRows` is false**: The method closes the currently open swipeable row, if any.
+
+This method is particularly useful in scenarios where you need to ensure that all swipe actions are reset, such as when navigating away from the list or performing batch actions on the list data.
+
+example usage:
+
+```jsx
+
+   const flatlistRef = useRef<SwipeableFlatListRef<DataItem> | null>(null);
+
+   const closeAllOpenRows = () => {
+    flatListRef.current?.closeAnyOpenRows();
+   };
+
+   return (
+  <SwipeableFlatList
+    ref={flatListRef}
+    data={data}
+    keyExtractor={(item) => item.id}
+    renderItem={renderItem}
+    renderLeftActions={renderLeftAction}
+    renderRightActions={renderRightAction}
+  />
+);
+
+```
+
+
 ## Contributing
 Contributions are welcome! If you find any issues or would like to suggest improvements, please create a new issue or submit a pull request.
 

index.d.ts

@@ -1,5 +1,5 @@
 declare module 'rn-gesture-swipeable-flatlist' {
-    import { FlatListProps } from 'react-native';
+    import { FlatListProps, FlatList } from 'react-native';
     import {SwipeableProps} from 'react-native-gesture-handler/lib/typescript/components/Swipeable';
 
 
@@ -13,5 +13,10 @@ declare module 'rn-gesture-swipeable-flatlist' {
     export default function SwipeableFlatList<T>(
       props: SwipeableFlatListProps<T>,
     ): JSX.Element;
+
+    export interface SwipeableFlatListRef<T> extends FlatList<T> {
+      closeAnyOpenRows: () => void;
+    }
+
   }
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rn-gesture-swipeable-flatlist",
-  "version": "2.0.1",
+  "version": "2.3.0",
   "description": "Swipeable FlatList for React Native",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",

src/SwipeableFlatList.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useCallback, useRef } from 'react';
+import React, { forwardRef, useCallback, useImperativeHandle, useRef } from 'react';
 import { FlatList } from 'react-native';
 import { Swipeable } from 'react-native-gesture-handler';
 import { SwipeableFlatListProps,  } from './types';
@@ -16,6 +16,35 @@ const SwipeableFlatList = forwardRef<FlatList<any>, SwipeableFlatListProps<any>>
 
    const openedRowIndex = useRef<number | null>(null);
    const swipeableRefs = useRef<(Swipeable | null)[]>([]);
+   const flatListRef = useRef<FlatList>(null);
+
+   useImperativeHandle(ref, () => new Proxy({} as FlatList<any>, {
+      get: (_, prop) => {
+        if (prop === 'closeAnyOpenRows') {
+          return () => {
+            // Close all open swipeables if multiple rows are enabled
+            if (enableOpenMultipleRows) {
+              swipeableRefs.current.forEach(swipeable => {
+                if (swipeable) swipeable.close();
+              });
+            } else {
+              // Close the currently open swipeable row
+              const currentIndex = swipeableRefs.current.findIndex(swipeable => swipeable === swipeableRefs.current[openedRowIndex.current as number]);
+              if (currentIndex !== -1) {
+                swipeableRefs.current[currentIndex]?.close();
+                openedRowIndex.current = null; // Reset the index after closing
+              }
+            }
+          };
+        }
+        // Safely delegate other property accesses to the FlatList ref
+        const property = flatListRef.current?.[prop as keyof FlatList<any>];
+        if (typeof property === 'function') {
+          return property.bind(flatListRef.current);
+        }
+        return property;
+      }
+   }), [enableOpenMultipleRows]);
 
 
    const onSwipeableOpen = useCallback((directions: "left" | "right", swipeable: Swipeable, index: number) => {
@@ -63,7 +92,7 @@ const SwipeableFlatList = forwardRef<FlatList<any>, SwipeableFlatListProps<any>>
    return (
          <FlatList
             {...rest}
-            ref={ref}
+            ref={flatListRef}
             data={data}
             keyExtractor={keyExtractor}
             renderItem={renderSwipeableItem}

src/types.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { FlatListProps } from 'react-native';
+import { FlatList, FlatListProps } from 'react-native';
 import { SwipeableProps } from 'react-native-gesture-handler';
 
 export interface SwipeableFlatListProps<T> extends FlatListProps<T> {
@@ -8,3 +8,8 @@ export interface SwipeableFlatListProps<T> extends FlatListProps<T> {
   swipeableProps?: SwipeableProps;
   enableOpenMultipleRows?: boolean;
 }
+
+export interface SwipeableFlatListRef<T> extends FlatList<T> {
+  closeAnyOpenRows: () => void;
+}
+